Vue move-resize-rotate component

Move-resize-rotate component for Vue framework. Component acts as a tool for editing other (parent) component.
It uses hammerjs and supports desktop and mobile. Tested on chrome, firefox, edge and chrome mobile.

Install

npm install @zipavlin/mrr-tool

<script src="//unpkg.com/@zipavlin/vue-mrr-tool/dist/MrrTool.umd.min.js">

Use

Include component in your Vue app and bind v-model or :value + @input attributes.

Keep in mind that this component is supposed to be used as a tool, which means that it does not store value properties (width, height, x, y, angle) internaly, but expects to get them from external source (parent component/vuex store).

The easiest way to use this tool is to bind component's output object to vue style object.

<template>
    <div id="app">
        <div :style="style">
            <mrr-tool v-model="mrr"></mrr-tool>
        </div>
    </div>
</template>

<script>
    import MrrTool from '@zipavlin/vue-mrr-tool'

    export default {
        name: "App",
        components: { MrrTool },
        data() {
            return {
                mrr: {
                    width: 200,
                    height: 100,
                    x: 0,
                    y: 0,
                    angle: 0
                }
            }
        },
        computed: {
            style() {
                return {
                    position: 'absolute',
                    top: this.mrr.y + 'px',
                    left: this.mrr.x + 'px',
                    width: this.mrr.width + 'px',
                    height: this.mrr.height + 'px',
                    transform: `rotate(${this.mrr.angle}deg)`
                };
            }
        }
    }
</script>

Props

Value

Type Object Component supports binding with v-model or :value + @input combination.

value	default	description
width	200	width (in px)
height	200	height (in px)
x	0	x/left position (in px)
y	0	y/top position (in px)
angle	0	angle (in deg)

Options

Type Object

option	default	description
padding	26	padding between resize and rotate handles
stroke	'#00C2FF'	stroke color
strokeWidth	2	stroke width (in px)
fill	'white'	resize and rotate handles fill color
resizeSize	10	size of resize handles
rotateSize	6	size of rotate handles
move	true	should tool allow move edit
resize	true	should tool allow resize edit
rotate	true	should tool allow rotate edit
action	true	should tool display action

Events

input

Triggered on every move/resize/rotate event (not just at the end).

change

Triggered when edit is done with no parameters passed. This can be used for saving a history state when using vuex history.

contextmenu

Triggered on right click (mouse) or long touch (touch) on move element with event object passed as only parameter.

TODO

• create an example page (gitHub page)
• add a gif showing component in use so other don't need to download it for no reason :)