		@@ -18,3 +18,3 @@ var __defProp = Object.defineProperty;
		import { defineComponent, ref, computed, onMounted, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, withKeys, withModifiers, createElementVNode, normalizeStyle, Fragment, renderList, renderSlot } from "vue";
		var index_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ / (() => '[data-v-34a94c50]{outline:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.draggable-panel[data-v-34a94c50]{position:relative;width:100%;height:100%;overflow:hidden;background:#EEEEEE}.draggable-panel.lock .chart-item[data-v-34a94c50]:hover{filter:none}.draggable-panel.lock .chart-item .resizable[data-v-34a94c50]{display:none}.canvas[data-v-34a94c50]{background:#FFFFFF;box-shadow:0 5px 130px #00000026}.chart-item[data-v-34a94c50]{position:absolute;background:rgba(25,118,210,.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.chart-item .content[data-v-34a94c50]{position:relative;width:100%;height:100%;overflow:hidden;z-index:10}.chart-item[data-v-34a94c50]:hover{filter:brightness(1.05)}.chart-item:hover .resizable[data-v-34a94c50]{display:block}.chart-item.moving .resizable[data-v-34a94c50]{display:none}.chart-item.resizing .resizable[data-v-34a94c50]{display:block}.chart-item .resizable[data-v-34a94c50]{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;z-index:1;display:none}.chart-item .resizable .resizable-point[data-v-34a94c50]{position:absolute;width:16px;height:16px;display:flex;flex-direction:row;justify-content:center;align-items:center;z-index:20}.chart-item .resizable .resizable-point[data-v-34a94c50]:after{content:"";display:block;width:8px;height:8px;border:1px solid #1976D2;background:#FFFFFF}.chart-item .resizable .resizable-line[data-v-34a94c50]{position:absolute;z-index:10}.chart-item .resizable .resizable-line[data-v-34a94c50]:after{content:"";position:absolute;display:block;background:#1976D2}.chart-item .resizable .b[data-v-34a94c50],.chart-item .resizable .d[data-v-34a94c50],.chart-item .resizable .f[data-v-34a94c50],.chart-item .resizable .h[data-v-34a94c50]{pointer-events:none}.chart-item .resizable .a[data-v-34a94c50]{top:0;left:0;transform:translate(-50%,-50%);cursor:nwse-resize}.chart-item .resizable .b[data-v-34a94c50]{top:0;left:50%;margin-left:-8px;transform:translateY(-50%)}.chart-item .resizable .c[data-v-34a94c50]{top:0;right:0;transform:translate(50%,-50%);cursor:nesw-resize}.chart-item .resizable .d[data-v-34a94c50]{top:50%;right:0;margin-top:-8px;transform:translate(50%)}.chart-item .resizable .e[data-v-34a94c50]{bottom:0;right:0;transform:translate(50%,50%);cursor:nwse-resize}.chart-item .resizable .f[data-v-34a94c50]{bottom:0;left:50%;margin-left:-8px;transform:translateY(50%)}.chart-item .resizable .g[data-v-34a94c50]{bottom:0;left:0;transform:translate(-50%,50%);cursor:nesw-resize}.chart-item .resizable .h[data-v-34a94c50]{left:0;top:50%;margin-top:-8px;transform:translate(-50%)}.chart-item .resizable .i[data-v-34a94c50]{top:0;left:0;width:100%;height:16px;transform:translateY(-16px);cursor:ns-resize}.chart-item .resizable .i[data-v-34a94c50]:after{bottom:0;left:0;height:1px;width:100%}.chart-item .resizable .j[data-v-34a94c50]{right:0;top:0;height:100%;width:16px;transform:translate(16px);cursor:ew-resize}.chart-item .resizable .j[data-v-34a94c50]:after{top:0;left:0;height:100%;width:1px}.chart-item .resizable .k[data-v-34a94c50]{bottom:0;left:0;width:100%;height:16px;transform:translateY(16px);cursor:ns-resize}.chart-item .resizable .k[data-v-34a94c50]:after{top:0;left:0;height:1px;width:100%}.chart-item .resizable .l[data-v-34a94c50]{left:0;top:0;height:100%;width:16px;transform:translate(-16px);cursor:ew-resize}.chart-item .resizable .l[data-v-34a94c50]:after{top:0;right:0;height:100%;width:1px}\n')();
		var index_vue_vue_type_style_index_0_scoped_true_lang = /* @__PURE__ */ (() => '.draggable-panel[data-v-34a94c50]{position:relative;width:100%;height:100%;overflow:hidden;background:#EEEEEE;outline:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.draggable-panel.lock .chart-item[data-v-34a94c50]:hover{filter:none}.draggable-panel.lock .chart-item .resizable[data-v-34a94c50]{display:none}.draggable-panel .canvas[data-v-34a94c50]{background:#FFFFFF;box-shadow:0 5px 130px #00000026}.draggable-panel .chart-item[data-v-34a94c50]{position:absolute;background:rgba(25,118,210,.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.draggable-panel .chart-item .content[data-v-34a94c50]{position:relative;width:100%;height:100%;overflow:hidden;z-index:10}.draggable-panel .chart-item[data-v-34a94c50]:hover{filter:brightness(1.05)}.draggable-panel .chart-item:hover .resizable[data-v-34a94c50]{display:block}.draggable-panel .chart-item.moving .resizable[data-v-34a94c50]{display:none}.draggable-panel .chart-item.resizing .resizable[data-v-34a94c50]{display:block}.draggable-panel .chart-item .resizable[data-v-34a94c50]{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;z-index:1;display:none}.draggable-panel .chart-item .resizable .resizable-point[data-v-34a94c50]{position:absolute;width:16px;height:16px;display:flex;flex-direction:row;justify-content:center;align-items:center;z-index:20}.draggable-panel .chart-item .resizable .resizable-point[data-v-34a94c50]:after{content:"";display:block;width:8px;height:8px;border:1px solid #1976D2;background:#FFFFFF}.draggable-panel .chart-item .resizable .resizable-line[data-v-34a94c50]{position:absolute;z-index:10}.draggable-panel .chart-item .resizable .resizable-line[data-v-34a94c50]:after{content:"";position:absolute;display:block;background:#1976D2}.draggable-panel .chart-item .resizable .b[data-v-34a94c50],.draggable-panel .chart-item .resizable .d[data-v-34a94c50],.draggable-panel .chart-item .resizable .f[data-v-34a94c50],.draggable-panel .chart-item .resizable .h[data-v-34a94c50]{pointer-events:none}.draggable-panel .chart-item .resizable .a[data-v-34a94c50]{top:0;left:0;transform:translate(-50%,-50%);cursor:nwse-resize}.draggable-panel .chart-item .resizable .b[data-v-34a94c50]{top:0;left:50%;margin-left:-8px;transform:translateY(-50%)}.draggable-panel .chart-item .resizable .c[data-v-34a94c50]{top:0;right:0;transform:translate(50%,-50%);cursor:nesw-resize}.draggable-panel .chart-item .resizable .d[data-v-34a94c50]{top:50%;right:0;margin-top:-8px;transform:translate(50%)}.draggable-panel .chart-item .resizable .e[data-v-34a94c50]{bottom:0;right:0;transform:translate(50%,50%);cursor:nwse-resize}.draggable-panel .chart-item .resizable .f[data-v-34a94c50]{bottom:0;left:50%;margin-left:-8px;transform:translateY(50%)}.draggable-panel .chart-item .resizable .g[data-v-34a94c50]{bottom:0;left:0;transform:translate(-50%,50%);cursor:nesw-resize}.draggable-panel .chart-item .resizable .h[data-v-34a94c50]{left:0;top:50%;margin-top:-8px;transform:translate(-50%)}.draggable-panel .chart-item .resizable .i[data-v-34a94c50]{top:0;left:0;width:100%;height:16px;transform:translateY(-16px);cursor:ns-resize}.draggable-panel .chart-item .resizable .i[data-v-34a94c50]:after{bottom:0;left:0;height:1px;width:100%}.draggable-panel .chart-item .resizable .j[data-v-34a94c50]{right:0;top:0;height:100%;width:16px;transform:translate(16px);cursor:ew-resize}.draggable-panel .chart-item .resizable .j[data-v-34a94c50]:after{top:0;left:0;height:100%;width:1px}.draggable-panel .chart-item .resizable .k[data-v-34a94c50]{bottom:0;left:0;width:100%;height:16px;transform:translateY(16px);cursor:ns-resize}.draggable-panel .chart-item .resizable .k[data-v-34a94c50]:after{top:0;left:0;height:1px;width:100%}.draggable-panel .chart-item .resizable .l[data-v-34a94c50]{left:0;top:0;height:100%;width:16px;transform:translate(-16px);cursor:ew-resize}.draggable-panel .chart-item .resizable .l[data-v-34a94c50]:after{top:0;right:0;height:100%;width:1px}\n')();
		var _export_sfc = (sfc, props) => {
		@@ -21,0 +21,0 @@ const target = sfc.__vccOpts \|\| sfc;

dist/draggable-panel.umd.js

		@@ -1,3 +0,3 @@
		(function(e,l){typeof exports=="object"&&typeof module!="undefined"?module.exports=l(require("vue")):typeof define=="function"&&define.amd?define(["vue"],l):(e=typeof globalThis!="undefined"?globalThis:e\|\|self,e["draggable-panel"]=l(e.Vue))})(this,function(e){"use strict";var V=Object.defineProperty,L=Object.defineProperties;var I=Object.getOwnPropertyDescriptors;var S=Object.getOwnPropertySymbols;var U=Object.prototype.hasOwnProperty,A=Object.prototype.propertyIsEnumerable;var X=(e,l,f)=>l in e?V(e,l,{enumerable:!0,configurable:!0,writable:!0,value:f}):e[l]=f,Y=(e,l)=>{for(var f in l\|\|(l={}))U.call(l,f)&&X(e,f,l[f]);if(S)for(var f of S(l))A.call(l,f)&&X(e,f,l[f]);return e},P=(e,l)=>L(e,I(l));var l=(()=>`*[data-v-34a94c50]{outline:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.draggable-panel[data-v-34a94c50]{position:relative;width:100%;height:100%;overflow:hidden;background:#EEEEEE}.draggable-panel.lock .chart-item[data-v-34a94c50]:hover{filter:none}.draggable-panel.lock .chart-item .resizable[data-v-34a94c50]{display:none}.canvas[data-v-34a94c50]{background:#FFFFFF;box-shadow:0 5px 130px #00000026}.chart-item[data-v-34a94c50]{position:absolute;background:rgba(25,118,210,.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.chart-item .content[data-v-34a94c50]{position:relative;width:100%;height:100%;overflow:hidden;z-index:10}.chart-item[data-v-34a94c50]:hover{filter:brightness(1.05)}.chart-item:hover .resizable[data-v-34a94c50]{display:block}.chart-item.moving .resizable[data-v-34a94c50]{display:none}.chart-item.resizing .resizable[data-v-34a94c50]{display:block}.chart-item .resizable[data-v-34a94c50]{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;z-index:1;display:none}.chart-item .resizable .resizable-point[data-v-34a94c50]{position:absolute;width:16px;height:16px;display:flex;flex-direction:row;justify-content:center;align-items:center;z-index:20}.chart-item .resizable .resizable-point[data-v-34a94c50]:after{content:"";display:block;width:8px;height:8px;border:1px solid #1976D2;background:#FFFFFF}.chart-item .resizable .resizable-line[data-v-34a94c50]{position:absolute;z-index:10}.chart-item .resizable .resizable-line[data-v-34a94c50]:after{content:"";position:absolute;display:block;background:#1976D2}.chart-item .resizable .b[data-v-34a94c50],.chart-item .resizable .d[data-v-34a94c50],.chart-item .resizable .f[data-v-34a94c50],.chart-item .resizable .h[data-v-34a94c50]{pointer-events:none}.chart-item .resizable .a[data-v-34a94c50]{top:0;left:0;transform:translate(-50%,-50%);cursor:nwse-resize}.chart-item .resizable .b[data-v-34a94c50]{top:0;left:50%;margin-left:-8px;transform:translateY(-50%)}.chart-item .resizable .c[data-v-34a94c50]{top:0;right:0;transform:translate(50%,-50%);cursor:nesw-resize}.chart-item .resizable .d[data-v-34a94c50]{top:50%;right:0;margin-top:-8px;transform:translate(50%)}.chart-item .resizable .e[data-v-34a94c50]{bottom:0;right:0;transform:translate(50%,50%);cursor:nwse-resize}.chart-item .resizable .f[data-v-34a94c50]{bottom:0;left:50%;margin-left:-8px;transform:translateY(50%)}.chart-item .resizable .g[data-v-34a94c50]{bottom:0;left:0;transform:translate(-50%,50%);cursor:nesw-resize}.chart-item .resizable .h[data-v-34a94c50]{left:0;top:50%;margin-top:-8px;transform:translate(-50%)}.chart-item .resizable .i[data-v-34a94c50]{top:0;left:0;width:100%;height:16px;transform:translateY(-16px);cursor:ns-resize}.chart-item .resizable .i[data-v-34a94c50]:after{bottom:0;left:0;height:1px;width:100%}.chart-item .resizable .j[data-v-34a94c50]{right:0;top:0;height:100%;width:16px;transform:translate(16px);cursor:ew-resize}.chart-item .resizable .j[data-v-34a94c50]:after{top:0;left:0;height:100%;width:1px}.chart-item .resizable .k[data-v-34a94c50]{bottom:0;left:0;width:100%;height:16px;transform:translateY(16px);cursor:ns-resize}.chart-item .resizable .k[data-v-34a94c50]:after{top:0;left:0;height:1px;width:100%}.chart-item .resizable .l[data-v-34a94c50]{left:0;top:0;height:100%;width:16px;transform:translate(-16px);cursor:ew-resize}.chart-item .resizable .l[data-v-34a94c50]:after{top:0;right:0;height:100%;width:1px}
		`)(),f=(t,a)=>{const r=t.__vccOpts\|\|t;for(const[d,g]of a)r[d]=g;return r};const W=e.defineComponent({name:"draggable-panel",props:{width:{required:!0,type:Number},height:{required:!0,type:Number},data:{required:!0,type:Array},chartMinWidth:{required:!1,type:Number,default:100},chartMinHeight:{required:!1,type:Number,default:100},padding:{required:!1,type:Number,default:32},lock:{required:!1,type:Boolean,default:!1},canvasStyle:{required:!1,type:Object,default:{}},chartStyle:{required:!1,type:Object,default:{}},scaleMin:{required:!1,type:Number,default:.5},scaleMax:{required:!1,type:Number,default:10}},setup(t){const a=e.ref(null),r=e.ref(null),d=e.ref(!1),g=e.ref(!1),p=e.ref(1),i=e.ref(1),h=e.ref(0),c=e.ref(0),m=e.ref(0),s=e.ref(0),n=e.ref(""),o=e.ref(null),b=e.ref(null),u=e.ref({x:0,y:0}),z=e.ref({x:0,y:0}),y=e.ref({x:0,y:0}),w=e.ref({x:0,y:0}),v=e.computed(()=>P(Y({},t.canvasStyle),{width:t.width+"px",height:t.height+"px",transform:[`translate3d(${m.value}px, ${s.value}px, 0)`,`scale(${i.value})`].join(" ")})),T=e.computed(()=>(x,k)=>{const{width:D,height:M,x:B,y:E}=x;return P(Y({},t.chartStyle),{width:D+"px",height:M+"px",transform:`translateX(${B}px) translateY(${E}px)`,"z-index":100+k})});function C(){const{offsetWidth:x,offsetHeight:k}=a.value,D=x-t.padding,M=k-t.padding,B=x/k,E=t.width/t.height;p.value=B<E?D/t.width:M/t.height,h.value=(x-t.width)/2,c.value=(k-t.height)/2,i.value=p.value,m.value=h.value,s.value=c.value}return e.onMounted(()=>{C(),window.addEventListener("resize",C)}),e.onBeforeUnmount(()=>{window.removeEventListener("resize",C)}),{container:a,canvas:r,defaultX:h,defaultY:c,defaultScale:p,scale:i,point:z,lastPointermove:y,diff:u,movingChart:o,resizingChart:b,resizeDirection:n,chartPosition:w,canvasX:m,canvasY:s,canvasStatusMove:d,pointerPressed:g,canvasStyleComputed:v,chartStyleComputed:T}},watch:{scale(t){this.$emit("canvas-scale",t)}},methods:{scaleByWheel(t){if(this.lock)return;let a=1/(1+t.deltaY.001),r=this.scalea;r>this.scaleMax&&(a=this.scaleMax/this.scale,r=this.scaleMax),r<this.scaleMin&&(a=this.scaleMin/this.scale,r=this.scaleMin),this.scale=r;const d={x:(a-1)this.width.5,y:(a-1)this.height.5};this.canvasX-=(a-1)(t.clientX-this.canvasX)-d.x,this.canvasY-=(a-1)(t.clientY-this.canvasY)-d.y},scaleByKeyboard(t){const{key:a}=t;if(["=","-","0"].includes(a)&&this.lock)return t.preventDefault();if(a==="="){t.preventDefault();let r=this.scale+.1;r>this.scaleMax&&(r=this.scaleMax),this.scale=r}if(a==="-"){t.preventDefault();let r=this.scale-.1;r<this.scaleMin&&(r=this.scaleMin),this.scale=r}a==="0"&&(t.preventDefault(),this.scale=this.defaultScale,this.canvasX=this.defaultX,this.canvasY=this.defaultY)},setChartPosition(t){this.chartPosition={x:t.clientX,y:t.clientY}},dragoverContainer(t){const{clientX:a,clientY:r}=t,d=(a-this.chartPosition.x)/this.scale,g=(r-this.chartPosition.y)/this.scale;if(this.chartPosition={x:a,y:r},this.movingChart){const{width:p,height:i,x:h,y:c}=this.movingChart,m=this.width-p,s=this.height-i;let n=h+d,o=c+g;n<0&&(n=0),o<0&&(o=0),n>m&&(n=m),o>s&&(o=s),this.movingChart.x=n,this.movingChart.y=o}if(this.resizingChart){const{width:p,height:i,x:h,y:c}=this.resizingChart,m=this.width-h,s=this.height-c;let n=p,o=i,b=h,u=c;const z=()=>{n+=d,n<this.chartMinWidth&&(n=p),n>m&&(n=m)},y=()=>{o+=g,o<this.chartMinHeight&&(o=i),o>s&&(o=s)},w=()=>{b=h+d,n=p-d,b<0&&(b=0,n=p+h),n<this.chartMinWidth&&(n=p,b=h)},v=()=>{u=c+g,o=i-g,u<0&&(u=0,o=i+c),o<this.chartMinHeight&&(o=i,u=c)};this.resizeDirection==="a"&&(w(),v()),this.resizeDirection==="c"&&(z(),v()),this.resizeDirection==="e"&&(z(),y()),this.resizeDirection==="g"&&(w(),y()),this.resizeDirection==="i"&&v(),this.resizeDirection==="j"&&z(),this.resizeDirection==="k"&&y(),this.resizeDirection==="l"&&w(),this.resizingChart.width=n,this.resizingChart.x=b,this.resizingChart.height=o,this.resizingChart.y=u}},chartDragstart(t,a){if(!t.dataTransfer)return;const r=document.createElement("div");t.dataTransfer.setDragImage(r,0,0),t.dataTransfer.effectAllowed="move",this.movingChart=a},chartDragend(){this.movingChart=null,this.resizingChart=null},resizeStart(t,a,r){if(!t.dataTransfer)return;const d=document.createElement("div");t.dataTransfer.setDragImage(d,0,0),t.dataTransfer.effectAllowed="move",this.resizingChart=a,this.resizeDirection=r},pointerDown(t){if(!this.canvasStatusMove\|\|this.lock)return;this.pointerPressed=!0,this.canvas.setPointerCapture(t.pointerId),this.point={x:t.clientX,y:t.clientY},this.lastPointermove={x:t.clientX,y:t.clientY}},pointermove(t){if(!this.pointerPressed)return;t.preventDefault();const a={x:t.clientX,y:t.clientY};this.diff.x=a.x-this.lastPointermove.x,this.diff.y=a.y-this.lastPointermove.y,this.lastPointermove={x:a.x,y:a.y},this.canvasX+=this.diff.x,this.canvasY+=this.diff.y},pointerUp(){this.pointerPressed=!1},pointerCancel(){this.pointerPressed=!1}}}),F=["data-id","draggable","onDragstart"],$={class:"content"},N={class:"resizable"},q=["onDragstart"],j=["onDragstart"];function H(t,a,r,d,g,p){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["draggable-panel",{lock:t.lock}]),tabindex:-1,ref:"container",autofocus:"",onKeydown:[a[6]\|\|(a[6]=e.withKeys(i=>t.canvasStatusMove=!0,["space"])),a[7]\|\|(a[7]=e.withModifiers((...i)=>t.scaleByKeyboard&&t.scaleByKeyboard(...i),["meta"])),a[8]\|\|(a[8]=e.withModifiers((...i)=>t.scaleByKeyboard&&t.scaleByKeyboard(...i),["ctrl"]))],onKeyup:a[9]\|\|(a[9]=e.withKeys(i=>t.canvasStatusMove=!1,["space"])),onWheel:[a[10]\|\|(a[10]=e.withModifiers((...i)=>t.scaleByWheel&&t.scaleByWheel(...i),["ctrl","prevent"])),a[11]\|\|(a[11]=e.withModifiers((...i)=>t.scaleByWheel&&t.scaleByWheel(...i),["meta","prevent"]))],onDragover:a[12]\|\|(a[12]=e.withModifiers((...i)=>t.dragoverContainer&&t.dragoverContainer(...i),["prevent"]))},[e.createElementVNode("div",{class:"canvas",ref:"canvas",style:e.normalizeStyle(t.canvasStyleComputed),onPointerdown:a[2]\|\|(a[2]=(...i)=>t.pointerDown&&t.pointerDown(...i)),onPointermove:a[3]\|\|(a[3]=(...i)=>t.pointermove&&t.pointermove(...i)),onPointerup:a[4]\|\|(a[4]=(...i)=>t.pointerUp&&t.pointerUp(...i)),onPointercancel:a[5]\|\|(a[5]=(...i)=>t.pointerCancel&&t.pointerCancel(...i))},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.data,(i,h)=>{var c,m;return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["chart-item",{moving:((c=t.movingChart)==null?void 0:c.id)===i.id,resizing:((m=t.resizingChart)==null?void 0:m.id)===i.id}]),key:i.id,style:e.normalizeStyle(t.chartStyleComputed(i,h)),"data-id":i.id,tabindex:"-1",draggable:!t.lock,onMousedown:a[0]\|\|(a[0]=(...s)=>t.setChartPosition&&t.setChartPosition(...s)),onDragstart:s=>t.chartDragstart(s,i),onDragend:a[1]\|\|(a[1]=(...s)=>t.chartDragend&&t.chartDragend(...s))},[e.createElementVNode("div",$,[e.renderSlot(t.$slots,"chart-"+i.id,{chart:i,index:h},()=>[e.renderSlot(t.$slots,"chart",{chart:i,index:h},void 0,!0)],!0)]),e.createElementVNode("div",N,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(["a","c","e","g"],s=>e.createElementVNode("div",{key:s,class:e.normalizeClass(["resizable-point",s]),tabindex:"-1",draggable:"true",onDragstart:e.withModifiers(n=>t.resizeStart(n,i,s),["stop"])},null,42,q)),64)),(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(["b","d","f","h"],s=>e.createElementVNode("div",{key:s,class:e.normalizeClass([s,"resizable-point"])},null,2)),64)),(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(["i","j","k","l"],s=>e.createElementVNode("div",{key:s,class:e.normalizeClass([s,"resizable-line"]),tabindex:"-1",draggable:"true",onDragstart:e.withModifiers(n=>t.resizeStart(n,i,s),["stop"])},null,42,j)),64))])],46,F)}),128))],36)],34)}var K=f(W,[["render",H],["__scopeId","data-v-34a94c50"]]);return K});
		(function(t,o){typeof exports=="object"&&typeof module!="undefined"?module.exports=o(require("vue")):typeof define=="function"&&define.amd?define(["vue"],o):(t=typeof globalThis!="undefined"?globalThis:t\|\|self,t["draggable-panel"]=o(t.Vue))})(this,function(t){"use strict";var V=Object.defineProperty,L=Object.defineProperties;var I=Object.getOwnPropertyDescriptors;var S=Object.getOwnPropertySymbols;var U=Object.prototype.hasOwnProperty,A=Object.prototype.propertyIsEnumerable;var X=(t,o,f)=>o in t?V(t,o,{enumerable:!0,configurable:!0,writable:!0,value:f}):t[o]=f,Y=(t,o)=>{for(var f in o\|\|(o={}))U.call(o,f)&&X(t,f,o[f]);if(S)for(var f of S(o))A.call(o,f)&&X(t,f,o[f]);return t},P=(t,o)=>L(t,I(o));var o=(()=>`.draggable-panel[data-v-34a94c50]{position:relative;width:100%;height:100%;overflow:hidden;background:#EEEEEE;outline:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.draggable-panel.lock .chart-item[data-v-34a94c50]:hover{filter:none}.draggable-panel.lock .chart-item .resizable[data-v-34a94c50]{display:none}.draggable-panel .canvas[data-v-34a94c50]{background:#FFFFFF;box-shadow:0 5px 130px #00000026}.draggable-panel .chart-item[data-v-34a94c50]{position:absolute;background:rgba(25,118,210,.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.draggable-panel .chart-item .content[data-v-34a94c50]{position:relative;width:100%;height:100%;overflow:hidden;z-index:10}.draggable-panel .chart-item[data-v-34a94c50]:hover{filter:brightness(1.05)}.draggable-panel .chart-item:hover .resizable[data-v-34a94c50]{display:block}.draggable-panel .chart-item.moving .resizable[data-v-34a94c50]{display:none}.draggable-panel .chart-item.resizing .resizable[data-v-34a94c50]{display:block}.draggable-panel .chart-item .resizable[data-v-34a94c50]{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;z-index:1;display:none}.draggable-panel .chart-item .resizable .resizable-point[data-v-34a94c50]{position:absolute;width:16px;height:16px;display:flex;flex-direction:row;justify-content:center;align-items:center;z-index:20}.draggable-panel .chart-item .resizable .resizable-point[data-v-34a94c50]:after{content:"";display:block;width:8px;height:8px;border:1px solid #1976D2;background:#FFFFFF}.draggable-panel .chart-item .resizable .resizable-line[data-v-34a94c50]{position:absolute;z-index:10}.draggable-panel .chart-item .resizable .resizable-line[data-v-34a94c50]:after{content:"";position:absolute;display:block;background:#1976D2}.draggable-panel .chart-item .resizable .b[data-v-34a94c50],.draggable-panel .chart-item .resizable .d[data-v-34a94c50],.draggable-panel .chart-item .resizable .f[data-v-34a94c50],.draggable-panel .chart-item .resizable .h[data-v-34a94c50]{pointer-events:none}.draggable-panel .chart-item .resizable .a[data-v-34a94c50]{top:0;left:0;transform:translate(-50%,-50%);cursor:nwse-resize}.draggable-panel .chart-item .resizable .b[data-v-34a94c50]{top:0;left:50%;margin-left:-8px;transform:translateY(-50%)}.draggable-panel .chart-item .resizable .c[data-v-34a94c50]{top:0;right:0;transform:translate(50%,-50%);cursor:nesw-resize}.draggable-panel .chart-item .resizable .d[data-v-34a94c50]{top:50%;right:0;margin-top:-8px;transform:translate(50%)}.draggable-panel .chart-item .resizable .e[data-v-34a94c50]{bottom:0;right:0;transform:translate(50%,50%);cursor:nwse-resize}.draggable-panel .chart-item .resizable .f[data-v-34a94c50]{bottom:0;left:50%;margin-left:-8px;transform:translateY(50%)}.draggable-panel .chart-item .resizable .g[data-v-34a94c50]{bottom:0;left:0;transform:translate(-50%,50%);cursor:nesw-resize}.draggable-panel .chart-item .resizable .h[data-v-34a94c50]{left:0;top:50%;margin-top:-8px;transform:translate(-50%)}.draggable-panel .chart-item .resizable .i[data-v-34a94c50]{top:0;left:0;width:100%;height:16px;transform:translateY(-16px);cursor:ns-resize}.draggable-panel .chart-item .resizable .i[data-v-34a94c50]:after{bottom:0;left:0;height:1px;width:100%}.draggable-panel .chart-item .resizable .j[data-v-34a94c50]{right:0;top:0;height:100%;width:16px;transform:translate(16px);cursor:ew-resize}.draggable-panel .chart-item .resizable .j[data-v-34a94c50]:after{top:0;left:0;height:100%;width:1px}.draggable-panel .chart-item .resizable .k[data-v-34a94c50]{bottom:0;left:0;width:100%;height:16px;transform:translateY(16px);cursor:ns-resize}.draggable-panel .chart-item .resizable .k[data-v-34a94c50]:after{top:0;left:0;height:1px;width:100%}.draggable-panel .chart-item .resizable .l[data-v-34a94c50]{left:0;top:0;height:100%;width:16px;transform:translate(-16px);cursor:ew-resize}.draggable-panel .chart-item .resizable .l[data-v-34a94c50]:after{top:0;right:0;height:100%;width:1px}
		`)(),f=(e,a)=>{const r=e.__vccOpts\|\|e;for(const[h,b]of a)r[h]=b;return r};const W=t.defineComponent({name:"draggable-panel",props:{width:{required:!0,type:Number},height:{required:!0,type:Number},data:{required:!0,type:Array},chartMinWidth:{required:!1,type:Number,default:100},chartMinHeight:{required:!1,type:Number,default:100},padding:{required:!1,type:Number,default:32},lock:{required:!1,type:Boolean,default:!1},canvasStyle:{required:!1,type:Object,default:{}},chartStyle:{required:!1,type:Object,default:{}},scaleMin:{required:!1,type:Number,default:.5},scaleMax:{required:!1,type:Number,default:10}},setup(e){const a=t.ref(null),r=t.ref(null),h=t.ref(!1),b=t.ref(!1),g=t.ref(1),i=t.ref(1),d=t.ref(0),c=t.ref(0),p=t.ref(0),s=t.ref(0),n=t.ref(""),l=t.ref(null),m=t.ref(null),u=t.ref({x:0,y:0}),z=t.ref({x:0,y:0}),y=t.ref({x:0,y:0}),w=t.ref({x:0,y:0}),v=t.computed(()=>P(Y({},e.canvasStyle),{width:e.width+"px",height:e.height+"px",transform:[`translate3d(${p.value}px, ${s.value}px, 0)`,`scale(${i.value})`].join(" ")})),T=t.computed(()=>(x,k)=>{const{width:D,height:M,x:B,y:E}=x;return P(Y({},e.chartStyle),{width:D+"px",height:M+"px",transform:`translateX(${B}px) translateY(${E}px)`,"z-index":100+k})});function C(){const{offsetWidth:x,offsetHeight:k}=a.value,D=x-e.padding,M=k-e.padding,B=x/k,E=e.width/e.height;g.value=B<E?D/e.width:M/e.height,d.value=(x-e.width)/2,c.value=(k-e.height)/2,i.value=g.value,p.value=d.value,s.value=c.value}return t.onMounted(()=>{C(),window.addEventListener("resize",C)}),t.onBeforeUnmount(()=>{window.removeEventListener("resize",C)}),{container:a,canvas:r,defaultX:d,defaultY:c,defaultScale:g,scale:i,point:z,lastPointermove:y,diff:u,movingChart:l,resizingChart:m,resizeDirection:n,chartPosition:w,canvasX:p,canvasY:s,canvasStatusMove:h,pointerPressed:b,canvasStyleComputed:v,chartStyleComputed:T}},watch:{scale(e){this.$emit("canvas-scale",e)}},methods:{scaleByWheel(e){if(this.lock)return;let a=1/(1+e.deltaY.001),r=this.scalea;r>this.scaleMax&&(a=this.scaleMax/this.scale,r=this.scaleMax),r<this.scaleMin&&(a=this.scaleMin/this.scale,r=this.scaleMin),this.scale=r;const h={x:(a-1)this.width.5,y:(a-1)this.height.5};this.canvasX-=(a-1)(e.clientX-this.canvasX)-h.x,this.canvasY-=(a-1)(e.clientY-this.canvasY)-h.y},scaleByKeyboard(e){const{key:a}=e;if(["=","-","0"].includes(a)&&this.lock)return e.preventDefault();if(a==="="){e.preventDefault();let r=this.scale+.1;r>this.scaleMax&&(r=this.scaleMax),this.scale=r}if(a==="-"){e.preventDefault();let r=this.scale-.1;r<this.scaleMin&&(r=this.scaleMin),this.scale=r}a==="0"&&(e.preventDefault(),this.scale=this.defaultScale,this.canvasX=this.defaultX,this.canvasY=this.defaultY)},setChartPosition(e){this.chartPosition={x:e.clientX,y:e.clientY}},dragoverContainer(e){const{clientX:a,clientY:r}=e,h=(a-this.chartPosition.x)/this.scale,b=(r-this.chartPosition.y)/this.scale;if(this.chartPosition={x:a,y:r},this.movingChart){const{width:g,height:i,x:d,y:c}=this.movingChart,p=this.width-g,s=this.height-i;let n=d+h,l=c+b;n<0&&(n=0),l<0&&(l=0),n>p&&(n=p),l>s&&(l=s),this.movingChart.x=n,this.movingChart.y=l}if(this.resizingChart){const{width:g,height:i,x:d,y:c}=this.resizingChart,p=this.width-d,s=this.height-c;let n=g,l=i,m=d,u=c;const z=()=>{n+=h,n<this.chartMinWidth&&(n=g),n>p&&(n=p)},y=()=>{l+=b,l<this.chartMinHeight&&(l=i),l>s&&(l=s)},w=()=>{m=d+h,n=g-h,m<0&&(m=0,n=g+d),n<this.chartMinWidth&&(n=g,m=d)},v=()=>{u=c+b,l=i-b,u<0&&(u=0,l=i+c),l<this.chartMinHeight&&(l=i,u=c)};this.resizeDirection==="a"&&(w(),v()),this.resizeDirection==="c"&&(z(),v()),this.resizeDirection==="e"&&(z(),y()),this.resizeDirection==="g"&&(w(),y()),this.resizeDirection==="i"&&v(),this.resizeDirection==="j"&&z(),this.resizeDirection==="k"&&y(),this.resizeDirection==="l"&&w(),this.resizingChart.width=n,this.resizingChart.x=m,this.resizingChart.height=l,this.resizingChart.y=u}},chartDragstart(e,a){if(!e.dataTransfer)return;const r=document.createElement("div");e.dataTransfer.setDragImage(r,0,0),e.dataTransfer.effectAllowed="move",this.movingChart=a},chartDragend(){this.movingChart=null,this.resizingChart=null},resizeStart(e,a,r){if(!e.dataTransfer)return;const h=document.createElement("div");e.dataTransfer.setDragImage(h,0,0),e.dataTransfer.effectAllowed="move",this.resizingChart=a,this.resizeDirection=r},pointerDown(e){if(!this.canvasStatusMove\|\|this.lock)return;this.pointerPressed=!0,this.canvas.setPointerCapture(e.pointerId),this.point={x:e.clientX,y:e.clientY},this.lastPointermove={x:e.clientX,y:e.clientY}},pointermove(e){if(!this.pointerPressed)return;e.preventDefault();const a={x:e.clientX,y:e.clientY};this.diff.x=a.x-this.lastPointermove.x,this.diff.y=a.y-this.lastPointermove.y,this.lastPointermove={x:a.x,y:a.y},this.canvasX+=this.diff.x,this.canvasY+=this.diff.y},pointerUp(){this.pointerPressed=!1},pointerCancel(){this.pointerPressed=!1}}}),F=["data-id","draggable","onDragstart"],$={class:"content"},N={class:"resizable"},q=["onDragstart"],j=["onDragstart"];function H(e,a,r,h,b,g){return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["draggable-panel",{lock:e.lock}]),tabindex:-1,ref:"container",autofocus:"",onKeydown:[a[6]\|\|(a[6]=t.withKeys(i=>e.canvasStatusMove=!0,["space"])),a[7]\|\|(a[7]=t.withModifiers((...i)=>e.scaleByKeyboard&&e.scaleByKeyboard(...i),["meta"])),a[8]\|\|(a[8]=t.withModifiers((...i)=>e.scaleByKeyboard&&e.scaleByKeyboard(...i),["ctrl"]))],onKeyup:a[9]\|\|(a[9]=t.withKeys(i=>e.canvasStatusMove=!1,["space"])),onWheel:[a[10]\|\|(a[10]=t.withModifiers((...i)=>e.scaleByWheel&&e.scaleByWheel(...i),["ctrl","prevent"])),a[11]\|\|(a[11]=t.withModifiers((...i)=>e.scaleByWheel&&e.scaleByWheel(...i),["meta","prevent"]))],onDragover:a[12]\|\|(a[12]=t.withModifiers((...i)=>e.dragoverContainer&&e.dragoverContainer(...i),["prevent"]))},[t.createElementVNode("div",{class:"canvas",ref:"canvas",style:t.normalizeStyle(e.canvasStyleComputed),onPointerdown:a[2]\|\|(a[2]=(...i)=>e.pointerDown&&e.pointerDown(...i)),onPointermove:a[3]\|\|(a[3]=(...i)=>e.pointermove&&e.pointermove(...i)),onPointerup:a[4]\|\|(a[4]=(...i)=>e.pointerUp&&e.pointerUp(...i)),onPointercancel:a[5]\|\|(a[5]=(...i)=>e.pointerCancel&&e.pointerCancel(...i))},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.data,(i,d)=>{var c,p;return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["chart-item",{moving:((c=e.movingChart)==null?void 0:c.id)===i.id,resizing:((p=e.resizingChart)==null?void 0:p.id)===i.id}]),key:i.id,style:t.normalizeStyle(e.chartStyleComputed(i,d)),"data-id":i.id,tabindex:"-1",draggable:!e.lock,onMousedown:a[0]\|\|(a[0]=(...s)=>e.setChartPosition&&e.setChartPosition(...s)),onDragstart:s=>e.chartDragstart(s,i),onDragend:a[1]\|\|(a[1]=(...s)=>e.chartDragend&&e.chartDragend(...s))},[t.createElementVNode("div",$,[t.renderSlot(e.$slots,"chart-"+i.id,{chart:i,index:d},()=>[t.renderSlot(e.$slots,"chart",{chart:i,index:d},void 0,!0)],!0)]),t.createElementVNode("div",N,[(t.openBlock(),t.createElementBlock(t.Fragment,null,t.renderList(["a","c","e","g"],s=>t.createElementVNode("div",{key:s,class:t.normalizeClass(["resizable-point",s]),tabindex:"-1",draggable:"true",onDragstart:t.withModifiers(n=>e.resizeStart(n,i,s),["stop"])},null,42,q)),64)),(t.openBlock(),t.createElementBlock(t.Fragment,null,t.renderList(["b","d","f","h"],s=>t.createElementVNode("div",{key:s,class:t.normalizeClass([s,"resizable-point"])},null,2)),64)),(t.openBlock(),t.createElementBlock(t.Fragment,null,t.renderList(["i","j","k","l"],s=>t.createElementVNode("div",{key:s,class:t.normalizeClass([s,"resizable-line"]),tabindex:"-1",draggable:"true",onDragstart:t.withModifiers(n=>e.resizeStart(n,i,s),["stop"])},null,42,j)),64))])],46,F)}),128))],36)],34)}var K=f(W,[["render",H],["__scopeId","data-v-34a94c50"]]);return K});
		//# sourceMappingURL=draggable-panel.umd.js.map

package.json

		{
		"name": "draggable-panel",
		"version": "1.0.1",
		"version": "1.0.2",
		"description": "Vue draggable panel",
		@@ -8,8 +8,2 @@ "author": "Cainier <xingrong.dev@gmail.com>",
		"module": "./dist/draggable-panel.es.js",
		"exports": {
		".": {
		"import": "./dist/draggable-panel.es.js",
		"require": "./dist/draggable-panel.umd.js"
		}
		},
		"files": [
		@@ -25,2 +19,3 @@ "dist"
		"dependencies": {
		"draggable-panel": "^1.0.1",
		"sass": "^1.52.2",
		@@ -27,0 +22,0 @@ "typescript": "^4.7.3",

README.md

		# Vue Draggable Panel

		> v1.0.1
		> v1.0.2

		@@ -138,4 +138,5 @@ ---

		<script lang="ts">
		<script>
		import DraggablePanel from 'draggable-panel'
		import 'draggable-panel/dist/style.css'

		@@ -142,0 +143,0 @@ export default defineComponent({

dist/style.css

Sorry, the diff of this file is not supported yet

		@@ -1,3 +0,3 @@
		(function(e,l){typeof exports=="object"&&typeof module!="undefined"?module.exports=l(require("vue")):typeof define=="function"&&define.amd?define(["vue"],l):(e=typeof globalThis!="undefined"?globalThis:e\|\|self,e["draggable-panel"]=l(e.Vue))})(this,function(e){"use strict";var V=Object.defineProperty,L=Object.defineProperties;var I=Object.getOwnPropertyDescriptors;var S=Object.getOwnPropertySymbols;var U=Object.prototype.hasOwnProperty,A=Object.prototype.propertyIsEnumerable;var X=(e,l,f)=>l in e?V(e,l,{enumerable:!0,configurable:!0,writable:!0,value:f}):e[l]=f,Y=(e,l)=>{for(var f in l\|\|(l={}))U.call(l,f)&&X(e,f,l[f]);if(S)for(var f of S(l))A.call(l,f)&&X(e,f,l[f]);return e},P=(e,l)=>L(e,I(l));var l=(()=>`*[data-v-34a94c50]{outline:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.draggable-panel[data-v-34a94c50]{position:relative;width:100%;height:100%;overflow:hidden;background:#EEEEEE}.draggable-panel.lock .chart-item[data-v-34a94c50]:hover{filter:none}.draggable-panel.lock .chart-item .resizable[data-v-34a94c50]{display:none}.canvas[data-v-34a94c50]{background:#FFFFFF;box-shadow:0 5px 130px #00000026}.chart-item[data-v-34a94c50]{position:absolute;background:rgba(25,118,210,.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.chart-item .content[data-v-34a94c50]{position:relative;width:100%;height:100%;overflow:hidden;z-index:10}.chart-item[data-v-34a94c50]:hover{filter:brightness(1.05)}.chart-item:hover .resizable[data-v-34a94c50]{display:block}.chart-item.moving .resizable[data-v-34a94c50]{display:none}.chart-item.resizing .resizable[data-v-34a94c50]{display:block}.chart-item .resizable[data-v-34a94c50]{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;z-index:1;display:none}.chart-item .resizable .resizable-point[data-v-34a94c50]{position:absolute;width:16px;height:16px;display:flex;flex-direction:row;justify-content:center;align-items:center;z-index:20}.chart-item .resizable .resizable-point[data-v-34a94c50]:after{content:"";display:block;width:8px;height:8px;border:1px solid #1976D2;background:#FFFFFF}.chart-item .resizable .resizable-line[data-v-34a94c50]{position:absolute;z-index:10}.chart-item .resizable .resizable-line[data-v-34a94c50]:after{content:"";position:absolute;display:block;background:#1976D2}.chart-item .resizable .b[data-v-34a94c50],.chart-item .resizable .d[data-v-34a94c50],.chart-item .resizable .f[data-v-34a94c50],.chart-item .resizable .h[data-v-34a94c50]{pointer-events:none}.chart-item .resizable .a[data-v-34a94c50]{top:0;left:0;transform:translate(-50%,-50%);cursor:nwse-resize}.chart-item .resizable .b[data-v-34a94c50]{top:0;left:50%;margin-left:-8px;transform:translateY(-50%)}.chart-item .resizable .c[data-v-34a94c50]{top:0;right:0;transform:translate(50%,-50%);cursor:nesw-resize}.chart-item .resizable .d[data-v-34a94c50]{top:50%;right:0;margin-top:-8px;transform:translate(50%)}.chart-item .resizable .e[data-v-34a94c50]{bottom:0;right:0;transform:translate(50%,50%);cursor:nwse-resize}.chart-item .resizable .f[data-v-34a94c50]{bottom:0;left:50%;margin-left:-8px;transform:translateY(50%)}.chart-item .resizable .g[data-v-34a94c50]{bottom:0;left:0;transform:translate(-50%,50%);cursor:nesw-resize}.chart-item .resizable .h[data-v-34a94c50]{left:0;top:50%;margin-top:-8px;transform:translate(-50%)}.chart-item .resizable .i[data-v-34a94c50]{top:0;left:0;width:100%;height:16px;transform:translateY(-16px);cursor:ns-resize}.chart-item .resizable .i[data-v-34a94c50]:after{bottom:0;left:0;height:1px;width:100%}.chart-item .resizable .j[data-v-34a94c50]{right:0;top:0;height:100%;width:16px;transform:translate(16px);cursor:ew-resize}.chart-item .resizable .j[data-v-34a94c50]:after{top:0;left:0;height:100%;width:1px}.chart-item .resizable .k[data-v-34a94c50]{bottom:0;left:0;width:100%;height:16px;transform:translateY(16px);cursor:ns-resize}.chart-item .resizable .k[data-v-34a94c50]:after{top:0;left:0;height:1px;width:100%}.chart-item .resizable .l[data-v-34a94c50]{left:0;top:0;height:100%;width:16px;transform:translate(-16px);cursor:ew-resize}.chart-item .resizable .l[data-v-34a94c50]:after{top:0;right:0;height:100%;width:1px}
		`)(),f=(t,a)=>{const r=t.__vccOpts\|\|t;for(const[d,g]of a)r[d]=g;return r};const W=e.defineComponent({name:"draggable-panel",props:{width:{required:!0,type:Number},height:{required:!0,type:Number},data:{required:!0,type:Array},chartMinWidth:{required:!1,type:Number,default:100},chartMinHeight:{required:!1,type:Number,default:100},padding:{required:!1,type:Number,default:32},lock:{required:!1,type:Boolean,default:!1},canvasStyle:{required:!1,type:Object,default:{}},chartStyle:{required:!1,type:Object,default:{}},scaleMin:{required:!1,type:Number,default:.5},scaleMax:{required:!1,type:Number,default:10}},setup(t){const a=e.ref(null),r=e.ref(null),d=e.ref(!1),g=e.ref(!1),p=e.ref(1),i=e.ref(1),h=e.ref(0),c=e.ref(0),m=e.ref(0),s=e.ref(0),n=e.ref(""),o=e.ref(null),b=e.ref(null),u=e.ref({x:0,y:0}),z=e.ref({x:0,y:0}),y=e.ref({x:0,y:0}),w=e.ref({x:0,y:0}),v=e.computed(()=>P(Y({},t.canvasStyle),{width:t.width+"px",height:t.height+"px",transform:[`translate3d(${m.value}px, ${s.value}px, 0)`,`scale(${i.value})`].join(" ")})),T=e.computed(()=>(x,k)=>{const{width:D,height:M,x:B,y:E}=x;return P(Y({},t.chartStyle),{width:D+"px",height:M+"px",transform:`translateX(${B}px) translateY(${E}px)`,"z-index":100+k})});function C(){const{offsetWidth:x,offsetHeight:k}=a.value,D=x-t.padding,M=k-t.padding,B=x/k,E=t.width/t.height;p.value=B<E?D/t.width:M/t.height,h.value=(x-t.width)/2,c.value=(k-t.height)/2,i.value=p.value,m.value=h.value,s.value=c.value}return e.onMounted(()=>{C(),window.addEventListener("resize",C)}),e.onBeforeUnmount(()=>{window.removeEventListener("resize",C)}),{container:a,canvas:r,defaultX:h,defaultY:c,defaultScale:p,scale:i,point:z,lastPointermove:y,diff:u,movingChart:o,resizingChart:b,resizeDirection:n,chartPosition:w,canvasX:m,canvasY:s,canvasStatusMove:d,pointerPressed:g,canvasStyleComputed:v,chartStyleComputed:T}},watch:{scale(t){this.$emit("canvas-scale",t)}},methods:{scaleByWheel(t){if(this.lock)return;let a=1/(1+t.deltaY.001),r=this.scalea;r>this.scaleMax&&(a=this.scaleMax/this.scale,r=this.scaleMax),r<this.scaleMin&&(a=this.scaleMin/this.scale,r=this.scaleMin),this.scale=r;const d={x:(a-1)this.width.5,y:(a-1)this.height.5};this.canvasX-=(a-1)(t.clientX-this.canvasX)-d.x,this.canvasY-=(a-1)(t.clientY-this.canvasY)-d.y},scaleByKeyboard(t){const{key:a}=t;if(["=","-","0"].includes(a)&&this.lock)return t.preventDefault();if(a==="="){t.preventDefault();let r=this.scale+.1;r>this.scaleMax&&(r=this.scaleMax),this.scale=r}if(a==="-"){t.preventDefault();let r=this.scale-.1;r<this.scaleMin&&(r=this.scaleMin),this.scale=r}a==="0"&&(t.preventDefault(),this.scale=this.defaultScale,this.canvasX=this.defaultX,this.canvasY=this.defaultY)},setChartPosition(t){this.chartPosition={x:t.clientX,y:t.clientY}},dragoverContainer(t){const{clientX:a,clientY:r}=t,d=(a-this.chartPosition.x)/this.scale,g=(r-this.chartPosition.y)/this.scale;if(this.chartPosition={x:a,y:r},this.movingChart){const{width:p,height:i,x:h,y:c}=this.movingChart,m=this.width-p,s=this.height-i;let n=h+d,o=c+g;n<0&&(n=0),o<0&&(o=0),n>m&&(n=m),o>s&&(o=s),this.movingChart.x=n,this.movingChart.y=o}if(this.resizingChart){const{width:p,height:i,x:h,y:c}=this.resizingChart,m=this.width-h,s=this.height-c;let n=p,o=i,b=h,u=c;const z=()=>{n+=d,n<this.chartMinWidth&&(n=p),n>m&&(n=m)},y=()=>{o+=g,o<this.chartMinHeight&&(o=i),o>s&&(o=s)},w=()=>{b=h+d,n=p-d,b<0&&(b=0,n=p+h),n<this.chartMinWidth&&(n=p,b=h)},v=()=>{u=c+g,o=i-g,u<0&&(u=0,o=i+c),o<this.chartMinHeight&&(o=i,u=c)};this.resizeDirection==="a"&&(w(),v()),this.resizeDirection==="c"&&(z(),v()),this.resizeDirection==="e"&&(z(),y()),this.resizeDirection==="g"&&(w(),y()),this.resizeDirection==="i"&&v(),this.resizeDirection==="j"&&z(),this.resizeDirection==="k"&&y(),this.resizeDirection==="l"&&w(),this.resizingChart.width=n,this.resizingChart.x=b,this.resizingChart.height=o,this.resizingChart.y=u}},chartDragstart(t,a){if(!t.dataTransfer)return;const r=document.createElement("div");t.dataTransfer.setDragImage(r,0,0),t.dataTransfer.effectAllowed="move",this.movingChart=a},chartDragend(){this.movingChart=null,this.resizingChart=null},resizeStart(t,a,r){if(!t.dataTransfer)return;const d=document.createElement("div");t.dataTransfer.setDragImage(d,0,0),t.dataTransfer.effectAllowed="move",this.resizingChart=a,this.resizeDirection=r},pointerDown(t){if(!this.canvasStatusMove\|\|this.lock)return;this.pointerPressed=!0,this.canvas.setPointerCapture(t.pointerId),this.point={x:t.clientX,y:t.clientY},this.lastPointermove={x:t.clientX,y:t.clientY}},pointermove(t){if(!this.pointerPressed)return;t.preventDefault();const a={x:t.clientX,y:t.clientY};this.diff.x=a.x-this.lastPointermove.x,this.diff.y=a.y-this.lastPointermove.y,this.lastPointermove={x:a.x,y:a.y},this.canvasX+=this.diff.x,this.canvasY+=this.diff.y},pointerUp(){this.pointerPressed=!1},pointerCancel(){this.pointerPressed=!1}}}),F=["data-id","draggable","onDragstart"],$={class:"content"},N={class:"resizable"},q=["onDragstart"],j=["onDragstart"];function H(t,a,r,d,g,p){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["draggable-panel",{lock:t.lock}]),tabindex:-1,ref:"container",autofocus:"",onKeydown:[a[6]\|\|(a[6]=e.withKeys(i=>t.canvasStatusMove=!0,["space"])),a[7]\|\|(a[7]=e.withModifiers((...i)=>t.scaleByKeyboard&&t.scaleByKeyboard(...i),["meta"])),a[8]\|\|(a[8]=e.withModifiers((...i)=>t.scaleByKeyboard&&t.scaleByKeyboard(...i),["ctrl"]))],onKeyup:a[9]\|\|(a[9]=e.withKeys(i=>t.canvasStatusMove=!1,["space"])),onWheel:[a[10]\|\|(a[10]=e.withModifiers((...i)=>t.scaleByWheel&&t.scaleByWheel(...i),["ctrl","prevent"])),a[11]\|\|(a[11]=e.withModifiers((...i)=>t.scaleByWheel&&t.scaleByWheel(...i),["meta","prevent"]))],onDragover:a[12]\|\|(a[12]=e.withModifiers((...i)=>t.dragoverContainer&&t.dragoverContainer(...i),["prevent"]))},[e.createElementVNode("div",{class:"canvas",ref:"canvas",style:e.normalizeStyle(t.canvasStyleComputed),onPointerdown:a[2]\|\|(a[2]=(...i)=>t.pointerDown&&t.pointerDown(...i)),onPointermove:a[3]\|\|(a[3]=(...i)=>t.pointermove&&t.pointermove(...i)),onPointerup:a[4]\|\|(a[4]=(...i)=>t.pointerUp&&t.pointerUp(...i)),onPointercancel:a[5]\|\|(a[5]=(...i)=>t.pointerCancel&&t.pointerCancel(...i))},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.data,(i,h)=>{var c,m;return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["chart-item",{moving:((c=t.movingChart)==null?void 0:c.id)===i.id,resizing:((m=t.resizingChart)==null?void 0:m.id)===i.id}]),key:i.id,style:e.normalizeStyle(t.chartStyleComputed(i,h)),"data-id":i.id,tabindex:"-1",draggable:!t.lock,onMousedown:a[0]\|\|(a[0]=(...s)=>t.setChartPosition&&t.setChartPosition(...s)),onDragstart:s=>t.chartDragstart(s,i),onDragend:a[1]\|\|(a[1]=(...s)=>t.chartDragend&&t.chartDragend(...s))},[e.createElementVNode("div",$,[e.renderSlot(t.$slots,"chart-"+i.id,{chart:i,index:h},()=>[e.renderSlot(t.$slots,"chart",{chart:i,index:h},void 0,!0)],!0)]),e.createElementVNode("div",N,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(["a","c","e","g"],s=>e.createElementVNode("div",{key:s,class:e.normalizeClass(["resizable-point",s]),tabindex:"-1",draggable:"true",onDragstart:e.withModifiers(n=>t.resizeStart(n,i,s),["stop"])},null,42,q)),64)),(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(["b","d","f","h"],s=>e.createElementVNode("div",{key:s,class:e.normalizeClass([s,"resizable-point"])},null,2)),64)),(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(["i","j","k","l"],s=>e.createElementVNode("div",{key:s,class:e.normalizeClass([s,"resizable-line"]),tabindex:"-1",draggable:"true",onDragstart:e.withModifiers(n=>t.resizeStart(n,i,s),["stop"])},null,42,j)),64))])],46,F)}),128))],36)],34)}var K=f(W,[["render",H],["__scopeId","data-v-34a94c50"]]);return K});
		(function(t,o){typeof exports=="object"&&typeof module!="undefined"?module.exports=o(require("vue")):typeof define=="function"&&define.amd?define(["vue"],o):(t=typeof globalThis!="undefined"?globalThis:t\|\|self,t["draggable-panel"]=o(t.Vue))})(this,function(t){"use strict";var V=Object.defineProperty,L=Object.defineProperties;var I=Object.getOwnPropertyDescriptors;var S=Object.getOwnPropertySymbols;var U=Object.prototype.hasOwnProperty,A=Object.prototype.propertyIsEnumerable;var X=(t,o,f)=>o in t?V(t,o,{enumerable:!0,configurable:!0,writable:!0,value:f}):t[o]=f,Y=(t,o)=>{for(var f in o\|\|(o={}))U.call(o,f)&&X(t,f,o[f]);if(S)for(var f of S(o))A.call(o,f)&&X(t,f,o[f]);return t},P=(t,o)=>L(t,I(o));var o=(()=>`.draggable-panel[data-v-34a94c50]{position:relative;width:100%;height:100%;overflow:hidden;background:#EEEEEE;outline:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.draggable-panel.lock .chart-item[data-v-34a94c50]:hover{filter:none}.draggable-panel.lock .chart-item .resizable[data-v-34a94c50]{display:none}.draggable-panel .canvas[data-v-34a94c50]{background:#FFFFFF;box-shadow:0 5px 130px #00000026}.draggable-panel .chart-item[data-v-34a94c50]{position:absolute;background:rgba(25,118,210,.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.draggable-panel .chart-item .content[data-v-34a94c50]{position:relative;width:100%;height:100%;overflow:hidden;z-index:10}.draggable-panel .chart-item[data-v-34a94c50]:hover{filter:brightness(1.05)}.draggable-panel .chart-item:hover .resizable[data-v-34a94c50]{display:block}.draggable-panel .chart-item.moving .resizable[data-v-34a94c50]{display:none}.draggable-panel .chart-item.resizing .resizable[data-v-34a94c50]{display:block}.draggable-panel .chart-item .resizable[data-v-34a94c50]{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;z-index:1;display:none}.draggable-panel .chart-item .resizable .resizable-point[data-v-34a94c50]{position:absolute;width:16px;height:16px;display:flex;flex-direction:row;justify-content:center;align-items:center;z-index:20}.draggable-panel .chart-item .resizable .resizable-point[data-v-34a94c50]:after{content:"";display:block;width:8px;height:8px;border:1px solid #1976D2;background:#FFFFFF}.draggable-panel .chart-item .resizable .resizable-line[data-v-34a94c50]{position:absolute;z-index:10}.draggable-panel .chart-item .resizable .resizable-line[data-v-34a94c50]:after{content:"";position:absolute;display:block;background:#1976D2}.draggable-panel .chart-item .resizable .b[data-v-34a94c50],.draggable-panel .chart-item .resizable .d[data-v-34a94c50],.draggable-panel .chart-item .resizable .f[data-v-34a94c50],.draggable-panel .chart-item .resizable .h[data-v-34a94c50]{pointer-events:none}.draggable-panel .chart-item .resizable .a[data-v-34a94c50]{top:0;left:0;transform:translate(-50%,-50%);cursor:nwse-resize}.draggable-panel .chart-item .resizable .b[data-v-34a94c50]{top:0;left:50%;margin-left:-8px;transform:translateY(-50%)}.draggable-panel .chart-item .resizable .c[data-v-34a94c50]{top:0;right:0;transform:translate(50%,-50%);cursor:nesw-resize}.draggable-panel .chart-item .resizable .d[data-v-34a94c50]{top:50%;right:0;margin-top:-8px;transform:translate(50%)}.draggable-panel .chart-item .resizable .e[data-v-34a94c50]{bottom:0;right:0;transform:translate(50%,50%);cursor:nwse-resize}.draggable-panel .chart-item .resizable .f[data-v-34a94c50]{bottom:0;left:50%;margin-left:-8px;transform:translateY(50%)}.draggable-panel .chart-item .resizable .g[data-v-34a94c50]{bottom:0;left:0;transform:translate(-50%,50%);cursor:nesw-resize}.draggable-panel .chart-item .resizable .h[data-v-34a94c50]{left:0;top:50%;margin-top:-8px;transform:translate(-50%)}.draggable-panel .chart-item .resizable .i[data-v-34a94c50]{top:0;left:0;width:100%;height:16px;transform:translateY(-16px);cursor:ns-resize}.draggable-panel .chart-item .resizable .i[data-v-34a94c50]:after{bottom:0;left:0;height:1px;width:100%}.draggable-panel .chart-item .resizable .j[data-v-34a94c50]{right:0;top:0;height:100%;width:16px;transform:translate(16px);cursor:ew-resize}.draggable-panel .chart-item .resizable .j[data-v-34a94c50]:after{top:0;left:0;height:100%;width:1px}.draggable-panel .chart-item .resizable .k[data-v-34a94c50]{bottom:0;left:0;width:100%;height:16px;transform:translateY(16px);cursor:ns-resize}.draggable-panel .chart-item .resizable .k[data-v-34a94c50]:after{top:0;left:0;height:1px;width:100%}.draggable-panel .chart-item .resizable .l[data-v-34a94c50]{left:0;top:0;height:100%;width:16px;transform:translate(-16px);cursor:ew-resize}.draggable-panel .chart-item .resizable .l[data-v-34a94c50]:after{top:0;right:0;height:100%;width:1px}
		`)(),f=(e,a)=>{const r=e.__vccOpts\|\|e;for(const[h,b]of a)r[h]=b;return r};const W=t.defineComponent({name:"draggable-panel",props:{width:{required:!0,type:Number},height:{required:!0,type:Number},data:{required:!0,type:Array},chartMinWidth:{required:!1,type:Number,default:100},chartMinHeight:{required:!1,type:Number,default:100},padding:{required:!1,type:Number,default:32},lock:{required:!1,type:Boolean,default:!1},canvasStyle:{required:!1,type:Object,default:{}},chartStyle:{required:!1,type:Object,default:{}},scaleMin:{required:!1,type:Number,default:.5},scaleMax:{required:!1,type:Number,default:10}},setup(e){const a=t.ref(null),r=t.ref(null),h=t.ref(!1),b=t.ref(!1),g=t.ref(1),i=t.ref(1),d=t.ref(0),c=t.ref(0),p=t.ref(0),s=t.ref(0),n=t.ref(""),l=t.ref(null),m=t.ref(null),u=t.ref({x:0,y:0}),z=t.ref({x:0,y:0}),y=t.ref({x:0,y:0}),w=t.ref({x:0,y:0}),v=t.computed(()=>P(Y({},e.canvasStyle),{width:e.width+"px",height:e.height+"px",transform:[`translate3d(${p.value}px, ${s.value}px, 0)`,`scale(${i.value})`].join(" ")})),T=t.computed(()=>(x,k)=>{const{width:D,height:M,x:B,y:E}=x;return P(Y({},e.chartStyle),{width:D+"px",height:M+"px",transform:`translateX(${B}px) translateY(${E}px)`,"z-index":100+k})});function C(){const{offsetWidth:x,offsetHeight:k}=a.value,D=x-e.padding,M=k-e.padding,B=x/k,E=e.width/e.height;g.value=B<E?D/e.width:M/e.height,d.value=(x-e.width)/2,c.value=(k-e.height)/2,i.value=g.value,p.value=d.value,s.value=c.value}return t.onMounted(()=>{C(),window.addEventListener("resize",C)}),t.onBeforeUnmount(()=>{window.removeEventListener("resize",C)}),{container:a,canvas:r,defaultX:d,defaultY:c,defaultScale:g,scale:i,point:z,lastPointermove:y,diff:u,movingChart:l,resizingChart:m,resizeDirection:n,chartPosition:w,canvasX:p,canvasY:s,canvasStatusMove:h,pointerPressed:b,canvasStyleComputed:v,chartStyleComputed:T}},watch:{scale(e){this.$emit("canvas-scale",e)}},methods:{scaleByWheel(e){if(this.lock)return;let a=1/(1+e.deltaY.001),r=this.scalea;r>this.scaleMax&&(a=this.scaleMax/this.scale,r=this.scaleMax),r<this.scaleMin&&(a=this.scaleMin/this.scale,r=this.scaleMin),this.scale=r;const h={x:(a-1)this.width.5,y:(a-1)this.height.5};this.canvasX-=(a-1)(e.clientX-this.canvasX)-h.x,this.canvasY-=(a-1)(e.clientY-this.canvasY)-h.y},scaleByKeyboard(e){const{key:a}=e;if(["=","-","0"].includes(a)&&this.lock)return e.preventDefault();if(a==="="){e.preventDefault();let r=this.scale+.1;r>this.scaleMax&&(r=this.scaleMax),this.scale=r}if(a==="-"){e.preventDefault();let r=this.scale-.1;r<this.scaleMin&&(r=this.scaleMin),this.scale=r}a==="0"&&(e.preventDefault(),this.scale=this.defaultScale,this.canvasX=this.defaultX,this.canvasY=this.defaultY)},setChartPosition(e){this.chartPosition={x:e.clientX,y:e.clientY}},dragoverContainer(e){const{clientX:a,clientY:r}=e,h=(a-this.chartPosition.x)/this.scale,b=(r-this.chartPosition.y)/this.scale;if(this.chartPosition={x:a,y:r},this.movingChart){const{width:g,height:i,x:d,y:c}=this.movingChart,p=this.width-g,s=this.height-i;let n=d+h,l=c+b;n<0&&(n=0),l<0&&(l=0),n>p&&(n=p),l>s&&(l=s),this.movingChart.x=n,this.movingChart.y=l}if(this.resizingChart){const{width:g,height:i,x:d,y:c}=this.resizingChart,p=this.width-d,s=this.height-c;let n=g,l=i,m=d,u=c;const z=()=>{n+=h,n<this.chartMinWidth&&(n=g),n>p&&(n=p)},y=()=>{l+=b,l<this.chartMinHeight&&(l=i),l>s&&(l=s)},w=()=>{m=d+h,n=g-h,m<0&&(m=0,n=g+d),n<this.chartMinWidth&&(n=g,m=d)},v=()=>{u=c+b,l=i-b,u<0&&(u=0,l=i+c),l<this.chartMinHeight&&(l=i,u=c)};this.resizeDirection==="a"&&(w(),v()),this.resizeDirection==="c"&&(z(),v()),this.resizeDirection==="e"&&(z(),y()),this.resizeDirection==="g"&&(w(),y()),this.resizeDirection==="i"&&v(),this.resizeDirection==="j"&&z(),this.resizeDirection==="k"&&y(),this.resizeDirection==="l"&&w(),this.resizingChart.width=n,this.resizingChart.x=m,this.resizingChart.height=l,this.resizingChart.y=u}},chartDragstart(e,a){if(!e.dataTransfer)return;const r=document.createElement("div");e.dataTransfer.setDragImage(r,0,0),e.dataTransfer.effectAllowed="move",this.movingChart=a},chartDragend(){this.movingChart=null,this.resizingChart=null},resizeStart(e,a,r){if(!e.dataTransfer)return;const h=document.createElement("div");e.dataTransfer.setDragImage(h,0,0),e.dataTransfer.effectAllowed="move",this.resizingChart=a,this.resizeDirection=r},pointerDown(e){if(!this.canvasStatusMove\|\|this.lock)return;this.pointerPressed=!0,this.canvas.setPointerCapture(e.pointerId),this.point={x:e.clientX,y:e.clientY},this.lastPointermove={x:e.clientX,y:e.clientY}},pointermove(e){if(!this.pointerPressed)return;e.preventDefault();const a={x:e.clientX,y:e.clientY};this.diff.x=a.x-this.lastPointermove.x,this.diff.y=a.y-this.lastPointermove.y,this.lastPointermove={x:a.x,y:a.y},this.canvasX+=this.diff.x,this.canvasY+=this.diff.y},pointerUp(){this.pointerPressed=!1},pointerCancel(){this.pointerPressed=!1}}}),F=["data-id","draggable","onDragstart"],$={class:"content"},N={class:"resizable"},q=["onDragstart"],j=["onDragstart"];function H(e,a,r,h,b,g){return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["draggable-panel",{lock:e.lock}]),tabindex:-1,ref:"container",autofocus:"",onKeydown:[a[6]\|\|(a[6]=t.withKeys(i=>e.canvasStatusMove=!0,["space"])),a[7]\|\|(a[7]=t.withModifiers((...i)=>e.scaleByKeyboard&&e.scaleByKeyboard(...i),["meta"])),a[8]\|\|(a[8]=t.withModifiers((...i)=>e.scaleByKeyboard&&e.scaleByKeyboard(...i),["ctrl"]))],onKeyup:a[9]\|\|(a[9]=t.withKeys(i=>e.canvasStatusMove=!1,["space"])),onWheel:[a[10]\|\|(a[10]=t.withModifiers((...i)=>e.scaleByWheel&&e.scaleByWheel(...i),["ctrl","prevent"])),a[11]\|\|(a[11]=t.withModifiers((...i)=>e.scaleByWheel&&e.scaleByWheel(...i),["meta","prevent"]))],onDragover:a[12]\|\|(a[12]=t.withModifiers((...i)=>e.dragoverContainer&&e.dragoverContainer(...i),["prevent"]))},[t.createElementVNode("div",{class:"canvas",ref:"canvas",style:t.normalizeStyle(e.canvasStyleComputed),onPointerdown:a[2]\|\|(a[2]=(...i)=>e.pointerDown&&e.pointerDown(...i)),onPointermove:a[3]\|\|(a[3]=(...i)=>e.pointermove&&e.pointermove(...i)),onPointerup:a[4]\|\|(a[4]=(...i)=>e.pointerUp&&e.pointerUp(...i)),onPointercancel:a[5]\|\|(a[5]=(...i)=>e.pointerCancel&&e.pointerCancel(...i))},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.data,(i,d)=>{var c,p;return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["chart-item",{moving:((c=e.movingChart)==null?void 0:c.id)===i.id,resizing:((p=e.resizingChart)==null?void 0:p.id)===i.id}]),key:i.id,style:t.normalizeStyle(e.chartStyleComputed(i,d)),"data-id":i.id,tabindex:"-1",draggable:!e.lock,onMousedown:a[0]\|\|(a[0]=(...s)=>e.setChartPosition&&e.setChartPosition(...s)),onDragstart:s=>e.chartDragstart(s,i),onDragend:a[1]\|\|(a[1]=(...s)=>e.chartDragend&&e.chartDragend(...s))},[t.createElementVNode("div",$,[t.renderSlot(e.$slots,"chart-"+i.id,{chart:i,index:d},()=>[t.renderSlot(e.$slots,"chart",{chart:i,index:d},void 0,!0)],!0)]),t.createElementVNode("div",N,[(t.openBlock(),t.createElementBlock(t.Fragment,null,t.renderList(["a","c","e","g"],s=>t.createElementVNode("div",{key:s,class:t.normalizeClass(["resizable-point",s]),tabindex:"-1",draggable:"true",onDragstart:t.withModifiers(n=>e.resizeStart(n,i,s),["stop"])},null,42,q)),64)),(t.openBlock(),t.createElementBlock(t.Fragment,null,t.renderList(["b","d","f","h"],s=>t.createElementVNode("div",{key:s,class:t.normalizeClass([s,"resizable-point"])},null,2)),64)),(t.openBlock(),t.createElementBlock(t.Fragment,null,t.renderList(["i","j","k","l"],s=>t.createElementVNode("div",{key:s,class:t.normalizeClass([s,"resizable-line"]),tabindex:"-1",draggable:"true",onDragstart:t.withModifiers(n=>e.resizeStart(n,i,s),["stop"])},null,42,j)),64))])],46,F)}),128))],36)],34)}var K=f(W,[["render",H],["__scopeId","data-v-34a94c50"]]);return K});
		//# sourceMappingURL=draggable-panel.umd.js.map

draggable-panel - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics

Dependency changes