@zipavlin/vue-clip-tool

1.0.2 • Public • Published

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

Package Sidebar

Install

npm i @zipavlin/vue-clip-tool

Weekly Downloads

1

Version

1.0.2

License

ISC

Unpacked Size

747 kB

Total Files

10

Last publish

Collaborators

  • zipavlin