@zipavlin/vue-clip-tool

Vue clip component

Clip/mask component for Vue framework. Component acts as a tool for clipping other (parent) component. It uses hammerjs and supports desktop (and partialy mobile). Tested on chrome, firefox, edge and chrome mobile.

Install

npm install @zipavlin/clip-tool

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

Use

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

This component is supposed to be used as a tool and will only return array of points that can be used to create css clip-path property for external source component. Component does not keep internal state/track of points array and it expects to get data from external source (parent component).

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">
            <clip-tool :width="width" :height="height" v-model="cliptool"></mrr-tool>
        </div>
    </div>
</template>

<script>
    import ClipTool from '@zipavlin/vue-clip-tool'

    export default {
        name: "App",
        components: { ClipTool },
        data() {
            return {
                width: 400,
                height: 400,
                cliptool: []
            }
        },
        computed: {
            style() {
                return {
                    background-color: 'deeppink',
                    width: this.width + 'px',
                    height: this.height + 'px',
                    clip-path: `polygon(${this.cliptool.map(x => x.join('%,')).join('% ')});`
                };
            }
        }
    }
</script>

Props

Width

Width of a component. You probably want to bind this with parent's width.

Height

Width of a component. You probably want to bind this with parent's width.

Value

Type Array of Arrays of Int Example [[10, 10], [20, 20], [30, 10]] Component supports binding with v-model or :value + @input combination.

Options

Type Object

option	default	description
stroke	'#00C2FF'	stroke color
strokeWidth	2	stroke width and point radius (in px)
strokeArea	20	stroke and point's pointer event area
pathTitle	null	path title attribute
pointTitle	null	point title attribute
confirmText	null	confirm popup text when removing point
blankText	'Click to add a point'	Display text if there are no point yet
minPointDistance	10	minimum distance between points when adding a new one
limitToParent	true	limit point move to be inside parent
canMoveClip	true	can user move whole clip

Events

input

Triggered on every edit (add, remove, move) event, except while moving points.

change

Same as input event.

contextmenu

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

TODO

• [ ] add demo page
• [ ] add image/gif of component