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 :)