vue-simple-drag-resize v0.0.2
vue DragResize
Inspired by vue-draggable-resizable
Targeted for use with SVG elements but can be used on DOM elements too. This component only handles smooth prop update on mouse move. Transform update is entirely up to your implementation.
Not tested in production!
I couldn't find simple customisable draggable and resizable solution for svg so I gave it a go on my own. My aim was to create something that will handle move and resize logic but the rest of the implementation can be handled elsewhere.
Install
npm i --save vue-simple-drag-resize
Example Usage
<template>
<svg>
<DragResize
:x="x"
:y="y"
:width="width"
:height="height"
:transform="transform"
@transform="updateSize"
@transformEnd="() => (transform = null)"
@mousedown="transform = 'move'"
/>
</svg>
</template>
<script>
import { DragResize } from "vue-simple-drag-resize";
export default {
name: "test",
data: () => ({
x: 200,
y: 60,
width: 100,
height: 60,
transform: null
}),
components: { DragResize },
methods: {
updateSize(size) {
this.x = size.x;
this.y = size.y;
this.width = size.width;
this.height = size.height;
}
}
};
</script>
<style>
svg {
width: 100%;
height: 300px;
}
</style>
Or register as global component using:
import Vue from 'vue';
import DragResize from "vue-simple-drag-resize";
Vue.use(DragResize);
then in your component use directly
<template>
<drag-resize :x="x" :y="y" :width="width" :height="height" />
</template>
Props
el
default: rect
Can be any custom or DOM element
transform
default: null
one of:
[
"move", // moves the whole element
"n", // resize from top
"w", // resize from right
"e", // resize from left
"s" // resize from bottom
];
x
default: 0
Current x
position
y
default: 0
Current y
position
width
default: 0
Current width
height
default: 0
Current height
widthMax
default: Infinity
Maximum width of the element
widthMin
default: 0
Minimum width of the element
heightMax
default: Infinity
Maximum height of the element
heightMin
default: 0
Minimum height of the element
boundaryEl
default: window.document.body
Boundary element for dragging/resizing. Set to null
to remove boundaries
grid
default: []
[x, y]
- Grid that should be followed when resizing/dragging. Can be set to x
or y
individually or both.
mappingOnRoot
default: a => a
type: Function
Mapping position attributes x, y, width, height to root element. By default it's equivalent. Function takes object with attributes and values as an argument. Use when you want to use with DOM element as per example:
function mappingOnRoot(attrs) {
return {
top: attrs.y + "px",
left: attrs.x + "px",
width: attrs.width + "px",
height: attrs.height + "px"
};
}
Events
@transform
Emits on every transform with position object: { x, y, width, height }
@transformEnd
Emits when mouseup
is registered (even away from element)
Dev
Clone this repo
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build-lib
Run your unit tests
npm run test:unit