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