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