vue-rubberband/dist/vue-rubberband.min.js

Rubberband component of Vue.js

/*!
 * vue-rubberband v0.1.0
 * https://github.com/ktsn/vue-rubberband
 *
 * @license
 * Copyright (c) 2017 katashin
 * Released under the MIT license
 * https://github.com/ktsn/vue-rubberband/blob/master/LICENSE
 */
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.VueRubberband=e()}(this,function(){"use strict";function t(t){var e=t.currentTarget.getBoundingClientRect();return{left:t.clientX-e.left,top:t.clientY-e.top}}function e(t){t.component("rubberband",n)}var n={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"rubberband",on:{mousedown:function(e){e.preventDefault(),t.onDragStart(e)},mousemove:function(e){e.preventDefault(),t.onDragMove(e)},mouseup:function(e){e.preventDefault(),t.onDragEnd(e)},mouseleave:function(e){e.preventDefault(),t.onDragEnd(e)}}},[t._t("default"),n("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],staticClass:"rubberband-rect",style:t.rubberBandStyles})],2)},staticRenderFns:[],_scopeId:"data-v-89072bc4",name:"rubberband",props:{min:{type:Number,default:900}},data:function(){return{bounds:{x1:0,y1:0,x2:0,y2:0},show:!1,dragging:!1}},methods:{onDragStart:function(e){var n=t(e),i=this.bounds;this.show=this.dragging=!0,i.x1=i.x2=n.left,i.y1=i.y2=n.top},onDragMove:function(e){if(this.dragging){var n=t(e),i=this.bounds;i.x2=n.left,i.y2=n.top}},onDragEnd:function(e){if(this.dragging){var n=t(e),i=this.bounds;i.x2=n.left,i.y2=n.top,this.show=this.dragging=!1,this.isValidLink&&this.emitAddEvent()}},emitAddEvent:function(){this.$emit("add",this.rubberBandRect)}},computed:{isValidLink:function(){var t=this.rubberBandRect;return t.width*t.height>=this.min},rubberBandRect:function(){var t=this.bounds;return{x:Math.min(t.x1,t.x2),y:Math.min(t.y1,t.y2),width:Math.abs(t.x1-t.x2),height:Math.abs(t.y1-t.y2)}},rubberBandStyles:function(){var t=this.rubberBandRect;return{transform:"translate("+t.x+"px, "+t.y+"px)",width:t.width+"px",height:t.height+"px"}}}};return"undefined"!=typeof window&&"function"==typeof window.Vue&&window.Vue.use(e),e});