2 lines
15 KiB
JavaScript
2 lines
15 KiB
JavaScript
import{w as H}from"./runtime-dom.esm-bundler-22744054.js";import{_ as k}from"./_plugin-vue_export-helper-c27b6911.js";import{o as y,g as z,F as D,L as E,n as v,j as M,p as W}from"./runtime-core.esm-bundler-381a9959.js";function T(t){return typeof t=="function"||Object.prototype.toString.call(t)==="[object Function]"}function w(t,e,i,s=1){const[n,o]=typeof s=="number"?[s,s]:s,a=Math.round(e/n/t[0])*t[0],r=Math.round(i/o/t[1])*t[1];return[a,r]}function R(t,e,i){return t-e-i}function S(t,e,i){return t-e-i}function c(t,e,i){return e!==null&&t<e?e:i!==null&&i<t?i:t}function B(t,e,i){let s=t;const n=["matches","webkitMatchesSelector","mozMatchesSelector","msMatchesSelector","oMatchesSelector"].find(o=>T(s[o]));if(!T(s[n]))return!1;do{if(s[n](e))return!0;if(s===i)return!1;s=s.parentNode}while(s);return!1}function L(t){const e=window.getComputedStyle(t);return[parseFloat(e.getPropertyValue("width"),10),parseFloat(e.getPropertyValue("height"),10)]}function b(t,e,i){t&&(t.attachEvent?t.attachEvent("on"+e,i):t.addEventListener?t.addEventListener(e,i,!0):t["on"+e]=i)}function f(t,e,i){t&&(t.detachEvent?t.detachEvent("on"+e,i):t.removeEventListener?t.removeEventListener(e,i,!0):t["on"+e]=null)}const x={mouse:{start:"mousedown",move:"mousemove",stop:"mouseup"},touch:{start:"touchstart",move:"touchmove",stop:"touchend"}},N={userSelect:"none",MozUserSelect:"none",WebkitUserSelect:"none",MsUserSelect:"none"},P={userSelect:"auto",MozUserSelect:"auto",WebkitUserSelect:"auto",MsUserSelect:"auto"};let p=x.mouse;const C={replace:!0,name:"vue-draggable-resizable",props:{className:{type:String,default:"vdr"},classNameDraggable:{type:String,default:"draggable"},classNameResizable:{type:String,default:"resizable"},classNameDragging:{type:String,default:"dragging"},classNameResizing:{type:String,default:"resizing"},classNameActive:{type:String,default:"active"},classNameHandle:{type:String,default:"handle"},disableUserSelect:{type:Boolean,default:!0},enableNativeDrag:{type:Boolean,default:!1},preventDeactivation:{type:Boolean,default:!1},active:{type:Boolean,default:!1},draggable:{type:Boolean,default:!0},resizable:{type:Boolean,default:!0},lockAspectRatio:{type:Boolean,default:!1},w:{type:[Number,String],default:200,validator:t=>typeof t=="number"?t>0:t==="auto"},h:{type:[Number,String],default:200,validator:t=>typeof t=="number"?t>0:t==="auto"},minWidth:{type:Number,default:0,validator:t=>t>=0},minHeight:{type:Number,default:0,validator:t=>t>=0},maxWidth:{type:Number,default:null,validator:t=>t>=0},maxHeight:{type:Number,default:null,validator:t=>t>=0},x:{type:Number,default:0},y:{type:Number,default:0},z:{type:[String,Number],default:"auto",validator:t=>typeof t=="string"?t==="auto":t>=0},handles:{type:Array,default:()=>["tl","tm","tr","mr","br","bm","bl","ml"],validator:t=>{const e=new Set(["tl","tm","tr","mr","br","bm","bl","ml"]);return new Set(t.filter(i=>e.has(i))).size===t.length}},dragHandle:{type:String,default:null},dragCancel:{type:String,default:null},axis:{type:String,default:"both",validator:t=>["x","y","both"].includes(t)},grid:{type:Array,default:()=>[1,1]},parent:{type:Boolean,default:!1},scale:{type:[Number,Array],default:1,validator:t=>typeof t=="number"?t>0:t.length===2&&t[0]>0&&t[1]>0},onDragStart:{type:Function,default:()=>!0},onDrag:{type:Function,default:()=>!0},onResizeStart:{type:Function,default:()=>!0},onResize:{type:Function,default:()=>!0}},data:function(){return{left:this.x,top:this.y,right:null,bottom:null,width:null,height:null,widthTouched:!1,heightTouched:!1,aspectFactor:null,parentWidth:null,parentHeight:null,minW:this.minWidth,minH:this.minHeight,maxW:this.maxWidth,maxH:this.maxHeight,handle:null,enabled:this.active,resizing:!1,dragging:!1,dragEnable:!1,resizeEnable:!1,zIndex:this.z}},created:function(){this.maxWidth&&this.minWidth>this.maxWidth&&console.warn("[Vdr warn]: Invalid prop: minWidth cannot be greater than maxWidth"),this.maxWidth&&this.minHeight>this.maxHeight&&console.warn("[Vdr warn]: Invalid prop: minHeight cannot be greater than maxHeight"),this.resetBoundsAndMouseState()},mounted:function(){this.enableNativeDrag||(this.$el.ondragstart=()=>!1);const[t,e]=this.getParentSize();this.parentWidth=t,this.parentHeight=e;const[i,s]=L(this.$el);this.aspectFactor=(this.w!=="auto"?this.w:i)/(this.h!=="auto"?this.h:s),this.width=this.w!=="auto"?this.w:i,this.height=this.h!=="auto"?this.h:s,this.right=this.parentWidth-this.width-this.left,this.bottom=this.parentHeight-this.height-this.top,this.active&&this.$emit("activated"),b(document.documentElement,"mousedown",this.deselect),b(document.documentElement,"touchend touchcancel",this.deselect),b(window,"resize",this.checkParentSize)},beforeDestroy:function(){f(document.documentElement,"mousedown",this.deselect),f(document.documentElement,"touchstart",this.handleUp),f(document.documentElement,"mousemove",this.move),f(document.documentElement,"touchmove",this.move),f(document.documentElement,"mouseup",this.handleUp),f(document.documentElement,"touchend touchcancel",this.deselect),f(window,"resize",this.checkParentSize)},methods:{resetBoundsAndMouseState(){this.mouseClickPosition={mouseX:0,mouseY:0,x:0,y:0,w:0,h:0},this.bounds={minLeft:null,maxLeft:null,minRight:null,maxRight:null,minTop:null,maxTop:null,minBottom:null,maxBottom:null}},checkParentSize(){if(this.parent){const[t,e]=this.getParentSize();this.parentWidth=t,this.parentHeight=e,this.right=this.parentWidth-this.width-this.left,this.bottom=this.parentHeight-this.height-this.top}},getParentSize(){if(this.parent){const t=window.getComputedStyle(this.$el.parentNode,null);return[parseInt(t.getPropertyValue("width"),10),parseInt(t.getPropertyValue("height"),10)]}return[null,null]},elementTouchDown(t){p=x.touch,this.elementDown(t)},elementMouseDown(t){p=x.mouse,this.elementDown(t)},elementDown(t){if(t instanceof MouseEvent&&t.which!==1)return;const e=t.target||t.srcElement;if(this.$el.contains(e)){if(this.onDragStart(t)===!1)return;if(this.dragHandle&&!B(e,this.dragHandle,this.$el)||this.dragCancel&&B(e,this.dragCancel,this.$el)){this.dragging=!1;return}this.enabled||(this.enabled=!0,this.$emit("activated"),this.$emit("update:active",!0)),this.draggable&&(this.dragEnable=!0),this.mouseClickPosition.mouseX=t.touches?t.touches[0].pageX:t.pageX,this.mouseClickPosition.mouseY=t.touches?t.touches[0].pageY:t.pageY,this.mouseClickPosition.left=this.left,this.mouseClickPosition.right=this.right,this.mouseClickPosition.top=this.top,this.mouseClickPosition.bottom=this.bottom,this.parent&&(this.bounds=this.calcDragLimits()),b(document.documentElement,p.move,this.move),b(document.documentElement,p.stop,this.handleUp)}},calcDragLimits(){return{minLeft:this.left%this.grid[0],maxLeft:Math.floor((this.parentWidth-this.width-this.left)/this.grid[0])*this.grid[0]+this.left,minRight:this.right%this.grid[0],maxRight:Math.floor((this.parentWidth-this.width-this.right)/this.grid[0])*this.grid[0]+this.right,minTop:this.top%this.grid[1],maxTop:Math.floor((this.parentHeight-this.height-this.top)/this.grid[1])*this.grid[1]+this.top,minBottom:this.bottom%this.grid[1],maxBottom:Math.floor((this.parentHeight-this.height-this.bottom)/this.grid[1])*this.grid[1]+this.bottom}},deselect(t){const e=t.target||t.srcElement,i=new RegExp(this.className+"-([trmbl]{2})","");!this.$el.contains(e)&&!i.test(e.className)&&(this.enabled&&!this.preventDeactivation&&(this.enabled=!1,this.$emit("deactivated"),this.$emit("update:active",!1)),f(document.documentElement,p.move,this.handleResize)),this.resetBoundsAndMouseState()},handleTouchDown(t,e){p=x.touch,this.handleDown(t,e)},handleDown(t,e){e instanceof MouseEvent&&e.which!==1||this.onResizeStart(t,e)!==!1&&(e.stopPropagation&&e.stopPropagation(),this.lockAspectRatio&&!t.includes("m")?this.handle="m"+t.substring(1):this.handle=t,this.resizeEnable=!0,this.mouseClickPosition.mouseX=e.touches?e.touches[0].pageX:e.pageX,this.mouseClickPosition.mouseY=e.touches?e.touches[0].pageY:e.pageY,this.mouseClickPosition.left=this.left,this.mouseClickPosition.right=this.right,this.mouseClickPosition.top=this.top,this.mouseClickPosition.bottom=this.bottom,this.bounds=this.calcResizeLimits(),b(document.documentElement,p.move,this.handleResize),b(document.documentElement,p.stop,this.handleUp))},calcResizeLimits(){let t=this.minW,e=this.minH,i=this.maxW,s=this.maxH;const n=this.aspectFactor,[o,a]=this.grid,r=this.width,g=this.height,l=this.left,m=this.top,u=this.right,d=this.bottom;this.lockAspectRatio&&(t/e>n?e=t/n:t=n*e,i&&s?(i=Math.min(i,n*s),s=Math.min(s,i/n)):i?s=i/n:s&&(i=n*s)),i=i-i%o,s=s-s%a;const h={minLeft:null,maxLeft:null,minTop:null,maxTop:null,minRight:null,maxRight:null,minBottom:null,maxBottom:null};return this.parent?(h.minLeft=l%o,h.maxLeft=l+Math.floor((r-t)/o)*o,h.minTop=m%a,h.maxTop=m+Math.floor((g-e)/a)*a,h.minRight=u%o,h.maxRight=u+Math.floor((r-t)/o)*o,h.minBottom=d%a,h.maxBottom=d+Math.floor((g-e)/a)*a,i&&(h.minLeft=Math.max(h.minLeft,this.parentWidth-u-i),h.minRight=Math.max(h.minRight,this.parentWidth-l-i)),s&&(h.minTop=Math.max(h.minTop,this.parentHeight-d-s),h.minBottom=Math.max(h.minBottom,this.parentHeight-m-s)),this.lockAspectRatio&&(h.minLeft=Math.max(h.minLeft,l-m*n),h.minTop=Math.max(h.minTop,m-l/n),h.minRight=Math.max(h.minRight,u-d*n),h.minBottom=Math.max(h.minBottom,d-u/n))):(h.minLeft=null,h.maxLeft=l+Math.floor((r-t)/o)*o,h.minTop=null,h.maxTop=m+Math.floor((g-e)/a)*a,h.minRight=null,h.maxRight=u+Math.floor((r-t)/o)*o,h.minBottom=null,h.maxBottom=d+Math.floor((g-e)/a)*a,i&&(h.minLeft=-(u+i),h.minRight=-(l+i)),s&&(h.minTop=-(d+s),h.minBottom=-(m+s)),this.lockAspectRatio&&i&&s&&(h.minLeft=Math.min(h.minLeft,-(u+i)),h.minTop=Math.min(h.minTop,-(s+d)),h.minRight=Math.min(h.minRight,-l-i),h.minBottom=Math.min(h.minBottom,-m-s))),h},move(t){this.resizing?this.handleResize(t):this.dragEnable&&this.handleDrag(t)},handleDrag(t){const e=this.axis,i=this.grid,s=this.bounds,n=this.mouseClickPosition,o=e&&e!=="y"?n.mouseX-(t.touches?t.touches[0].pageX:t.pageX):0,a=e&&e!=="x"?n.mouseY-(t.touches?t.touches[0].pageY:t.pageY):0,[r,g]=w(i,o,a,this.scale),l=c(n.left-r,s.minLeft,s.maxLeft),m=c(n.top-g,s.minTop,s.maxTop);if(this.onDrag(l,m)===!1)return;const u=c(n.right+r,s.minRight,s.maxRight),d=c(n.bottom+g,s.minBottom,s.maxBottom);this.left=l,this.top=m,this.right=u,this.bottom=d,this.$emit("dragging",this.left,this.top),this.dragging=!0},moveHorizontally(t){const[e,i]=w(this.grid,t,this.top,1),s=c(e,this.bounds.minLeft,this.bounds.maxLeft);this.left=s,this.right=this.parentWidth-this.width-s},moveVertically(t){const[e,i]=w(this.grid,this.left,t,1),s=c(i,this.bounds.minTop,this.bounds.maxTop);this.top=s,this.bottom=this.parentHeight-this.height-s},handleResize(t){let e=this.left,i=this.top,s=this.right,n=this.bottom;const o=this.mouseClickPosition;this.lockAspectRatio;const a=this.aspectFactor,r=o.mouseX-(t.touches?t.touches[0].pageX:t.pageX),g=o.mouseY-(t.touches?t.touches[0].pageY:t.pageY);!this.widthTouched&&r&&(this.widthTouched=!0),!this.heightTouched&&g&&(this.heightTouched=!0);const[l,m]=w(this.grid,r,g,this.scale);this.handle.includes("b")?(n=c(o.bottom+m,this.bounds.minBottom,this.bounds.maxBottom),this.lockAspectRatio&&this.resizingOnY&&(s=this.right-(this.bottom-n)*a)):this.handle.includes("t")&&(i=c(o.top-m,this.bounds.minTop,this.bounds.maxTop),this.lockAspectRatio&&this.resizingOnY&&(e=this.left-(this.top-i)*a)),this.handle.includes("r")?(s=c(o.right+l,this.bounds.minRight,this.bounds.maxRight),this.lockAspectRatio&&this.resizingOnX&&(n=this.bottom-(this.right-s)/a)):this.handle.includes("l")&&(e=c(o.left-l,this.bounds.minLeft,this.bounds.maxLeft),this.lockAspectRatio&&this.resizingOnX&&(i=this.top-(this.left-e)/a));const u=R(this.parentWidth,e,s),d=S(this.parentHeight,i,n);this.onResize(this.handle,e,i,u,d)!==!1&&(this.left=e,this.top=i,this.right=s,this.bottom=n,this.width=u,this.height=d,this.$emit("resizing",this.left,this.top,this.width,this.height),this.resizing=!0)},changeWidth(t){const[e,i]=w(this.grid,t,0,1);let s=c(this.parentWidth-e-this.left,this.bounds.minRight,this.bounds.maxRight),n=this.bottom;this.lockAspectRatio&&(n=this.bottom-(this.right-s)/this.aspectFactor);const o=R(this.parentWidth,this.left,s),a=S(this.parentHeight,this.top,n);this.right=s,this.bottom=n,this.width=o,this.height=a},changeHeight(t){const[e,i]=w(this.grid,0,t,1);let s=c(this.parentHeight-i-this.top,this.bounds.minBottom,this.bounds.maxBottom),n=this.right;this.lockAspectRatio&&(n=this.right-(this.bottom-s)*this.aspectFactor);const o=R(this.parentWidth,this.left,n),a=S(this.parentHeight,this.top,s);this.right=n,this.bottom=s,this.width=o,this.height=a},handleUp(t){this.handle=null,this.resetBoundsAndMouseState(),this.dragEnable=!1,this.resizeEnable=!1,this.resizing&&(this.resizing=!1,this.$emit("resizestop",this.left,this.top,this.width,this.height)),this.dragging&&(this.dragging=!1,this.$emit("dragstop",this.left,this.top)),f(document.documentElement,p.move,this.handleResize)}},computed:{style(){return{transform:`translate(${this.left}px, ${this.top}px)`,width:this.computedWidth,height:this.computedHeight,zIndex:this.zIndex,...this.dragging&&this.disableUserSelect?N:P}},actualHandles(){return this.resizable?this.handles:[]},computedWidth(){return this.w==="auto"&&!this.widthTouched?"auto":this.width+"px"},computedHeight(){return this.h==="auto"&&!this.heightTouched?"auto":this.height+"px"},resizingOnX(){return Boolean(this.handle)&&(this.handle.includes("l")||this.handle.includes("r"))},resizingOnY(){return Boolean(this.handle)&&(this.handle.includes("t")||this.handle.includes("b"))},isCornerHandle(){return Boolean(this.handle)&&["tl","tr","br","bl"].includes(this.handle)}},watch:{active(t){this.enabled=t,t?this.$emit("activated"):this.$emit("deactivated")},z(t){(t>=0||t==="auto")&&(this.zIndex=t)},x(t){this.resizing||this.dragging||(this.parent&&(this.bounds=this.calcDragLimits()),this.moveHorizontally(t))},y(t){this.resizing||this.dragging||(this.parent&&(this.bounds=this.calcDragLimits()),this.moveVertically(t))},lockAspectRatio(t){t?this.aspectFactor=this.width/this.height:this.aspectFactor=void 0},minWidth(t){t>0&&t<=this.width&&(this.minW=t)},minHeight(t){t>0&&t<=this.height&&(this.minH=t)},maxWidth(t){this.maxW=t},maxHeight(t){this.maxH=t},w(t){this.resizing||this.dragging||(this.parent&&(this.bounds=this.calcResizeLimits()),this.changeWidth(t))},h(t){this.resizing||this.dragging||(this.parent&&(this.bounds=this.calcResizeLimits()),this.changeHeight(t))}}},A=["onMousedown","onTouchstart"];function X(t,e,i,s,n,o){return y(),z("div",{style:M(o.style),class:v([{[i.classNameActive]:t.enabled,[i.classNameDragging]:t.dragging,[i.classNameResizing]:t.resizing,[i.classNameDraggable]:i.draggable,[i.classNameResizable]:i.resizable},i.className]),onMousedown:e[0]||(e[0]=(...a)=>o.elementMouseDown&&o.elementMouseDown(...a)),onTouchstart:e[1]||(e[1]=(...a)=>o.elementTouchDown&&o.elementTouchDown(...a))},[(y(!0),z(D,null,E(o.actualHandles,a=>(y(),z("div",{key:a,class:v([i.classNameHandle,i.classNameHandle+"-"+a]),style:M({display:t.enabled?"block":"none"}),onMousedown:H(r=>o.handleDown(a,r),["stop","prevent"]),onTouchstart:H(r=>o.handleTouchDown(a,r),["stop","prevent"])},[W(t.$slots,a)],46,A))),128)),W(t.$slots,"default")],38)}const V=k(C,[["render",X]]);export{V};
|