draggable-panel/dist/draggable-panel.umd.js

Vue draggable panel

(function(a,c){typeof exports=="object"&&typeof module!="undefined"?module.exports=c(require("vue")):typeof define=="function"&&define.amd?define(["vue"],c):(a=typeof globalThis!="undefined"?globalThis:a||self,a["draggable-panel"]=c(a.Vue))})(this,function(a){"use strict";var Xe=Object.defineProperty,Ee=Object.defineProperties;var qe=Object.getOwnPropertyDescriptors;var le=Object.getOwnPropertySymbols;var Se=Object.prototype.hasOwnProperty,We=Object.prototype.propertyIsEnumerable;var ie=(a,c,d)=>c in a?Xe(a,c,{enumerable:!0,configurable:!0,writable:!0,value:d}):a[c]=d,J=(a,c)=>{for(var d in c||(c={}))Se.call(c,d)&&ie(a,d,c[d]);if(le)for(var d of le(c))We.call(c,d)&&ie(a,d,c[d]);return a},Q=(a,c)=>Ee(a,qe(c));var c=(()=>`.draggable-panel{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 *{outline:none}.draggable-panel.lock .chart-item:hover{filter:none}.draggable-panel .canvas{position:relative;background:#FFFFFF;box-shadow:0 5px 130px #00000026}.draggable-panel .canvas.moving{cursor:move}.draggable-panel .canvas:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(25,118,210,.3);visibility:hidden;opacity:0;transition:all .3s;z-index:10000}.draggable-panel .canvas.out-canvas-dragover:after{visibility:visible;opacity:1}.draggable-panel .chart-item{position:absolute;background:rgba(25,118,210,.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.draggable-panel .chart-item .content{position:relative;width:100%;height:100%;overflow:hidden;z-index:10}.draggable-panel .chart-item:hover{filter:brightness(1.05)}.draggable-panel .chart-item.moving .resizable-point{display:none!important}.draggable-panel .chart-item .resizable{left:0;top:0;position:absolute}.draggable-panel .chart-item .resizable .resizable-point{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:after{content:"";display:block;width:8px;height:8px;border:2px solid #1976D2;background:#FFFFFF}.draggable-panel .chart-item .resizable .resizable-line{position:absolute;box-sizing:border-box;z-index:10}.draggable-panel .chart-item .resizable .resizable-line:after{content:"";display:block;width:100%;height:100%;background:#1976D2}.draggable-panel .chart-item .resizable .a{top:0;left:0;transform:translate(-50%,-50%);cursor:nwse-resize}.draggable-panel .chart-item .resizable .b{top:0;right:0;transform:translate(50%,-50%);cursor:nesw-resize}.draggable-panel .chart-item .resizable .c{bottom:0;right:0;transform:translate(50%,50%);cursor:nwse-resize}.draggable-panel .chart-item .resizable .d{bottom:0;left:0;transform:translate(-50%,50%);cursor:nesw-resize}.draggable-panel .chart-item .resizable .e,.draggable-panel .chart-item .resizable .f,.draggable-panel .chart-item .resizable .g,.draggable-panel .chart-item .resizable .h{pointer-events:none}.draggable-panel .chart-item .resizable .e{top:0;left:50%;margin-left:-8px;transform:translateY(-50%)}.draggable-panel .chart-item .resizable .f{top:50%;right:0;margin-top:-8px;transform:translate(50%)}.draggable-panel .chart-item .resizable .g{bottom:0;left:50%;margin-left:-8px;transform:translateY(50%)}.draggable-panel .chart-item .resizable .h{left:0;top:50%;margin-top:-8px;transform:translate(-50%)}.draggable-panel .chart-item .resizable .i{top:0;left:0;width:100%!important;height:2px;cursor:ns-resize}.draggable-panel .chart-item .resizable .j{right:0;top:0;height:100%!important;width:2px;cursor:ew-resize}.draggable-panel .chart-item .resizable .k{bottom:0;left:0;width:100%!important;height:2px;cursor:ns-resize}.draggable-panel .chart-item .resizable .l{left:0;top:0;height:100%!important;width:2px;cursor:ew-resize}
`)(),d=a.markRaw(a.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},chartId:{required:!1,type:Number,default:0}},emits:["canvas-scale","canvas-drop","chart-move","chart-scale"],setup(n,x){const X=a.ref(null),E=a.ref(null),P=a.ref(!1),q=a.ref(!1),S=a.ref(!1),$=a.ref(1),s=a.ref(1),K=a.ref(0),B=a.ref(0),w=a.ref(0),z=a.ref(0),Z=a.ref(""),f=a.ref(null),h=a.ref(null),p=a.ref(null),U=a.ref({x:0,y:0}),re=a.ref({x:0,y:0}),W=a.ref({x:0,y:0}),k=a.ref({x:0,y:0}),A=a.ref(!1);let L=a.ref(0);const oe=a.computed(()=>Q(J({},n.canvasStyle),{width:n.width+"px",height:n.height+"px",transform:[`translate3d(${w.value}px, ${z.value}px, 0)`,`scale(${s.value})`].join(" ")})),se=a.computed(()=>(t,e)=>{const{width:r,height:l,x:o,y:i}=t;return Q(J({},n.chartStyle),{width:r+"px",height:l+"px",transform:`translateX(${o}px) translateY(${i}px)`,"z-index":100+e})}),ce=a.computed(()=>t=>{const{width:e,height:r}=t,l=L.value===t.id&&!n.lock?"block":"none";return{width:e+"px",height:r+"px",display:l}});a.watch(s,t=>x.emit("canvas-scale",t));const ue=t=>{const{ctrlKey:e,metaKey:r}=t;if(!e&&!r||(t.preventDefault(),n.lock))return;let l=1/(1+t.deltaY*.001),o=s.value*l;o>n.scaleMax&&(l=n.scaleMax/s.value,o=n.scaleMax),o<n.scaleMin&&(l=n.scaleMin/s.value,o=n.scaleMin),s.value=o;const i={x:(l-1)*n.width*.5,y:(l-1)*n.height*.5};w.value-=(l-1)*(t.clientX-w.value)-i.x,z.value-=(l-1)*(t.clientY-z.value)-i.y},de=t=>{if(t.preventDefault(),n.lock)return;let e=s.value+.1;e>n.scaleMax&&(e=n.scaleMax),s.value=e},he=t=>{if(t.preventDefault(),n.lock)return;let e=s.value-.1;e<n.scaleMin&&(e=n.scaleMin),s.value=e},fe=()=>{n.lock||(s.value=$.value,w.value=K.value,z.value=B.value)},ge=()=>{if(n.lock)return;const{offsetWidth:t,offsetHeight:e}=X.value;s.value=1,w.value=(t-n.width)/2,z.value=(e-n.height)/2},ve=t=>{(t.srcElement===X.value||t.srcElement===E.value)&&(L.value=0)},be=t=>{!P.value||n.lock||(q.value=!0,E.value.setPointerCapture(t.pointerId),re.value={x:t.clientX,y:t.clientY},W.value={x:t.clientX,y:t.clientY})},me=t=>{if(!q.value)return;t.preventDefault();const e={x:t.clientX,y:t.clientY};U.value={x:e.x-W.value.x,y:e.y-W.value.y},W.value={x:e.x,y:e.y},w.value+=U.value.x,z.value+=U.value.y},pe=()=>{q.value=!1},ye=()=>{q.value=!1},xe=(t,e)=>{P.value||n.lock||(L.value=e.id,f.value=e,k.value={x:t.clientX-e.x*s.value,y:t.clientY-e.y*s.value},p.value={id:e.id,x:e.x,y:e.y,width:e.width,height:e.height},document.onpointermove=r=>{if(!f.value)return!1;r.preventDefault();const{clientX:l,clientY:o}=r,i=(l-k.value.x)/s.value,u=(o-k.value.y)/s.value,{width:M,height:R}=f.value,F=n.width-M,D=n.height-R;let m=i,g=u;m<0&&(m=0),g<0&&(g=0),m>F&&(m=F),g>D&&(g=D),f.value.x=m,f.value.y=g})},we=(t,e)=>{document.onpointermove=null,f.value=null,(p.value.x!==e.x||p.value.y!==e.y)&&x.emit("chart-move",e)},ze=()=>{document.onpointermove=null,f.value=null},_=(t,e,r)=>{if(t.stopPropagation(),P.value)return;const l=e.width,o=e.height,i=e.x,u=e.y;h.value=e,Z.value=r,k.value={x:t.clientX,y:t.clientY},p.value={id:e.id,x:e.x,y:e.y,width:e.width,height:e.height},document.onpointermove=M=>{if(!h.value)return!1;const{clientX:R,clientY:F}=M,D=(R-k.value.x)/s.value,m=(F-k.value.y)/s.value,{width:g,height:H,x:j,y:N}=h.value,ae=n.width-j,ne=n.height-N,y=Z.value;let v=g,b=H,Y=j,C=N;const T=()=>{v=l+D,v<n.chartMinWidth&&(v=g),v>ae&&(v=ae)},V=()=>{b=o+m,b<n.chartMinHeight&&(b=H),b>ne&&(b=ne)},G=()=>{Y=i+D,v=l-D,Y<0&&(Y=0,v=g+j),v<n.chartMinWidth&&(v=g,Y=j)},I=()=>{C=u+m,b=o-m,C<0&&(C=0,b=H+N),b<n.chartMinHeight&&(b=H,C=N)};y==="a"&&(G(),I()),y==="b"&&(T(),I()),y==="c"&&(T(),V()),y==="d"&&(G(),V()),y==="i"&&I(),y==="j"&&T(),y==="k"&&V(),y==="l"&&G(),h.value.width=v,h.value.height=b,h.value.x=Y,h.value.y=C}},ee=(t,e)=>{t.stopPropagation(),document.onpointermove=null,h.value=null,(p.value.x!==e.x||p.value.y!==e.y||p.value.width!==e.width||p.value.height!==e.height)&&x.emit("chart-scale",e)},ke=t=>{t.preventDefault();const{clientX:e,clientY:r}=t;k.value={x:e,y:r}},Me=t=>{f.value||h.value||(A.value=!0,S.value=!1,x.emit("canvas-drop",t,{x:t.offsetX,y:t.offsetY}))},Pe=()=>{f.value||h.value||(S.value=!0)},De=t=>{E.value===t.srcElement&&(S.value=!1)};function O(){const{offsetWidth:t,offsetHeight:e}=X.value,r=t-n.padding,l=e-n.padding,o=t/e,i=n.width/n.height;$.value=o<i?r/n.width:l/n.height,K.value=(t-n.width)/2,B.value=(e-n.height)/2,s.value=$.value,w.value=K.value,z.value=B.value}function Ye(t){const e=["a","b","c","d"],r=["e","f","g","h"],l=["i","j","k","l"],o=[];return e.forEach(i=>{o.push(a.h("div",{class:["resizable-point",i],key:i,onPointerdown:u=>_(u,t,i),onPointerup:u=>ee(u,t)}))}),r.forEach(i=>{o.push(a.h("div",{class:["resizable-point",i],key:i}))}),l.forEach(i=>{o.push(a.h("div",{class:["resizable-line",i],key:i,onPointerdown:u=>_(u,t,i),onPointerup:u=>ee(u,t)}))}),o}function Ce(){const t=[];return A.value&&(L.value=n.chartId,A.value=!1),n.data.forEach((e,r)=>{var i,u;const l=x.slots.chart({chart:e,index:r}),o=x.slots[`chart-${e.id}`]?x.slots[`chart-${e.id}`]({chart:e,index:r}):null;t.push(a.h("div",{class:["chart-item",((i=f.value)==null?void 0:i.id)===e.id?"moving":"",((u=h.value)==null?void 0:u.id)===e.id?"resizing":""],key:e.id,style:se.value(e,r),["data-id"]:e.id,onPointerdown:M=>xe(M,e),onPointerup:M=>we(M,e),onPointercancel:ze},[a.h("div",{class:["content"]},[l,o]),a.h("div",{class:["resizable"],style:ce.value(e)},Ye(e))]))}),t}function te(){document.onpointermove=null,h.value=null,f.value=null}return a.onMounted(()=>{O(),window.addEventListener("resize",O),window.addEventListener("mouseup",te)}),a.onBeforeUnmount(()=>{window.removeEventListener("resize",O),window.removeEventListener("mouseup",te)}),()=>[a.h("div",{class:["draggable-panel",n.lock?"lock":""],tabindex:-1,ref:X,autofocus:!0,onkeydown(t){const{ctrlKey:e,metaKey:r}=t,l=t.code.toLowerCase();if(l==="space")return P.value=!0;if(l==="equal"&&(e||r))return de(t);if(l==="minus"&&(e||r))return he(t);if(l==="digit0")return t.preventDefault(),fe();if(l==="enter")return t.preventDefault(),ge()},onkeyup(t){t.code.toLowerCase()==="space"&&(P.value=!1)},onPointerdown:ve,onwheel:ue,onDragover:ke},a.h("div",{ref:E,class:["canvas",S.value?"out-canvas-dragover":"",P.value?"moving":""],style:oe.value,onPointerdown:be,onPointermove:me,onPointerup:pe,onPointercancel:ye,onDragenter:Pe,onDragleave:De,onDrop:Me},Ce()))]}}));return d});
//# sourceMappingURL=draggable-panel.umd.js.map