grid-layout-plus/lib/components/grid-item.vue.js

<p align="center"> <a href="https://grid-layout-plus.netlify.app/" target="_blank" rel="noopener noreferrer"> <img src="./docs/public/grid-layout-plus.svg" width="180" style="width: 120px;" /> </a> </p>

"use strict";const n=require("vue"),g=require("@vexip-ui/utils"),v=require("../helpers/common.js"),W=require("../helpers/draggable.js"),Ne=require("../helpers/responsive.js"),he=require("../helpers/dom.js"),pe=require("interactjs"),Te=n.defineComponent({__name:"grid-item",props:{isDraggable:{type:Boolean,default:null},isResizable:{type:Boolean,default:null},isBounded:{type:Boolean,default:null},static:{type:Boolean,default:!1},minH:{type:Number,default:1},minW:{type:Number,default:1},maxH:{type:Number,default:1/0},maxW:{type:Number,default:1/0},x:{type:Number,required:!0},y:{type:Number,required:!0},w:{type:Number,required:!0},h:{type:Number,required:!0},i:{type:[Number,String],required:!0},dragIgnoreFrom:{type:String,default:"a, button"},dragAllowFrom:{type:String,default:null},resizeIgnoreFrom:{type:String,default:"a, button"},preserveAspectRatio:{type:Boolean,default:!1},dragOption:{type:Object,default:()=>({})},resizeOption:{type:Object,default:()=>({})}},emits:["container-resized","resize","resized","move","moved"],setup(we,{expose:be,emit:ze}){const i=we,M=ze,c=n.inject(v.LAYOUT_KEY),u=n.inject(v.EMITTER_KEY);if(!c)throw new Error("[grid-layout-plus]: missing layout store, GridItem must under a GridLayout.");const d=n.ref(null),e=n.reactive({cols:1,containerWidth:100,rowHeight:30,margin:[10,10],maxRows:1/0,draggable:null,resizable:null,bounded:null,transformScale:1,useCssTransforms:!0,useStyleCursor:!0,isDragging:!1,dragging:{top:-1,left:-1},isResizing:!1,resizing:{width:-1,height:-1},style:{},rtl:!1});let L=!1,X=!1,_=NaN,j=NaN,D=NaN,O=NaN,$=-1,G=-1,K=-1,V=-1,p=i.x,y=i.y,w=i.w,x=i.h;const N=n.ref(),J=n.reactive({i:n.toRef(i,"i"),state:e,wrapper:N,calcXY:q});function Q(t){Se(t)}function Z(){fe()}function U(t){g.isNull(i.isDraggable)&&(e.draggable=t)}function ee(t){g.isNull(i.isResizable)&&(e.resizable=t)}function te(t){g.isNull(i.isBounded)&&(e.bounded=t)}function ie(t){e.transformScale=t}function re(t){e.rowHeight=t}function ae(t){e.maxRows=t}function ne(){e.rtl=he.getDocumentDir()==="rtl",fe()}function oe(t){e.cols=Math.floor(t)}c.increaseItem(J),n.onBeforeMount(()=>{e.rtl=he.getDocumentDir()==="rtl"}),n.onMounted(()=>{c.responsive&&c.lastBreakpoint?e.cols=Ne.getColsFromBreakpoint(c.lastBreakpoint,c.cols):e.cols=c.colNum,e.rowHeight=c.rowHeight,e.containerWidth=c.width!==null?c.width:100,e.margin=c.margin!==void 0?c.margin.map(Number):[10,10],e.maxRows=c.maxRows,g.isNull(i.isDraggable)?e.draggable=c.isDraggable:e.draggable=i.isDraggable,g.isNull(i.isResizable)?e.resizable=c.isResizable:e.resizable=i.isResizable,g.isNull(i.isBounded)?e.bounded=c.isBounded:e.bounded=i.isBounded,e.transformScale=c.transformScale,e.useCssTransforms=c.useCssTransforms,e.useStyleCursor=c.useStyleCursor,n.watchEffect(()=>{p=i.x,y=i.y,x=i.h,w=i.w,g.nextTickOnce(S)}),u.on("updateWidth",Q),u.on("compact",Z),u.on("setDraggable",U),u.on("setResizable",ee),u.on("setBounded",te),u.on("setTransformScale",ie),u.on("setRowHeight",re),u.on("setMaxRows",ae),u.on("directionchange",ne),u.on("setColNum",oe)}),n.onBeforeUnmount(()=>{u.off("updateWidth",Q),u.off("compact",Z),u.off("setDraggable",U),u.off("setResizable",ee),u.off("setBounded",te),u.off("setTransformScale",ie),u.off("setRowHeight",re),u.off("setMaxRows",ae),u.off("directionchange",ne),u.off("setColNum",oe),d.value&&(d.value.unset(),d.value=null),c.decreaseItem(J)}),be({state:e,wrapper:N});const ye=typeof navigator<"u"?navigator.userAgent.toLowerCase().includes("android"):!1,se=n.computed(()=>e.resizable&&!i.static),h=n.computed(()=>c.isMirrored?!e.rtl:e.rtl),xe=n.computed(()=>(e.draggable||e.resizable)&&!i.static),z=v.useNameHelper("item"),Re=n.computed(()=>({[z.b()]:!0,[z.bm("resizable")]:se.value,[z.bm("static")]:i.static,[z.bm("resizing")]:e.isResizing,[z.bm("dragging")]:e.isDragging,[z.bm("transform")]:e.useCssTransforms,[z.bm("rtl")]:h.value,[z.bm("no-touch")]:ye&&xe.value})),I=n.computed(()=>[z.be("resizer"),h.value&&z.bem("resizer","rtl")].filter(Boolean));n.watch(()=>i.isDraggable,t=>{e.draggable=t}),n.watch(()=>i.static,()=>{g.nextTickOnce(me),g.nextTickOnce(H)}),n.watch(()=>e.draggable,()=>{g.nextTickOnce(me)}),n.watch(()=>i.isResizable,t=>{e.resizable=t}),n.watch(()=>i.isBounded,t=>{e.bounded=t}),n.watch(()=>e.resizable,()=>{g.nextTickOnce(H)}),n.watch(()=>e.rowHeight,()=>{g.nextTickOnce(S),g.nextTickOnce(E)}),n.watch([()=>e.cols,()=>e.containerWidth],()=>{g.nextTickOnce(H),g.nextTickOnce(S),g.nextTickOnce(E)}),n.watch([()=>i.minH,()=>i.maxH,()=>i.minW,()=>i.maxW],()=>{g.nextTickOnce(H)}),n.watch(h,()=>{g.nextTickOnce(H),g.nextTickOnce(S)}),n.watch([()=>c.margin,()=>c.margin[0],()=>c.margin[1]],()=>{const t=c.margin;!t||t[0]===e.margin[0]&&t[1]===e.margin[1]||(e.margin=t.map(Number),g.nextTickOnce(S),g.nextTickOnce(E))});function S(){i.x+i.w>e.cols?(p=0,w=i.w>e.cols?e.cols:i.w):(p=i.x,w=i.w);const t=T(p,y,w,x);e.isDragging&&(t.top=e.dragging.top,h.value?t.right=e.dragging.left:t.left=e.dragging.left),e.isResizing&&(t.width=e.resizing.width,t.height=e.resizing.height);let a;e.useCssTransforms?h.value?a=v.setTransformRtl(t.top,t.right,t.width,t.height):a=v.setTransform(t.top,t.left,t.width,t.height):h.value?a=v.setTopRight(t.top,t.right,t.width,t.height):a=v.setTopLeft(t.top,t.left,t.width,t.height),e.style=a}function E(){const t={};for(const a of["width","height"]){const s=e.style[a].match(/^(\d+)px$/);if(!s)return;t[a]=s[1]}M("container-resized",i.i,i.h,i.w,t.height,t.width)}function le(t){if(i.static)return;const a=t.type;if(a==="resizestart"&&e.isResizing||a!=="resizestart"&&!e.isResizing)return;const l=W.getControlPosition(t);if(g.isNull(l))return;const{x:s,y:f}=l,o={width:0,height:0};let r;switch(a){case"resizestart":{H(),$=w,G=x,r=T(p,y,w,x),o.width=r.width,o.height=r.height,e.resizing=o,e.isResizing=!0;break}case"resizemove":{!t.edges.right&&!t.edges.left&&(D=s),!t.edges.top&&!t.edges.bottom&&(O=f);const m=W.createCoreData(D,O,s,f);h.value?o.width=e.resizing.width-m.deltaX/e.transformScale:o.width=e.resizing.width+m.deltaX/e.transformScale,o.height=e.resizing.height+m.deltaY/e.transformScale,e.resizing=o;break}case"resizeend":{r=T(p,y,w,x),o.width=r.width,o.height=r.height,e.resizing={width:-1,height:-1},e.isResizing=!1;break}}r=ve(o.height,o.width),r.w<i.minW&&(r.w=i.minW),r.w>i.maxW&&(r.w=i.maxW),r.h<i.minH&&(r.h=i.minH),r.h>i.maxH&&(r.h=i.maxH),r.h<1&&(r.h=1),r.w<1&&(r.w=1),D=s,O=f,(w!==r.w||x!==r.h)&&M("resize",i.i,r.h,r.w,o.height,o.width),t.type==="resizeend"&&($!==w||G!==x)&&M("resized",i.i,r.h,r.w,o.height,o.width),u.emit("resizeEvent",t.type,i.i,p,y,r.h,r.w)}function ce(t){if(i.static||e.isResizing)return;const a=t.type;if(a==="dragstart"&&e.isDragging||a!=="dragstart"&&!e.isDragging)return;const l=W.getControlPosition(t);if(g.isNull(l))return;const{x:s,y:f}=l,o=t.target;if(!o.offsetParent)return;const r={top:0,left:0};switch(a){case"dragstart":{K=p,V=y;const b=o.offsetParent.getBoundingClientRect(),R=o.getBoundingClientRect(),k=R.left/e.transformScale,B=b.left/e.transformScale,F=R.right/e.transformScale,P=b.right/e.transformScale,A=R.top/e.transformScale,Y=b.top/e.transformScale;h.value?r.left=(F-P)*-1:r.left=k-B,r.top=A-Y,e.dragging=r,e.isDragging=!0;break}case"dragmove":{const b=W.createCoreData(_,j,s,f);if(h.value?r.left=e.dragging.left-b.deltaX/e.transformScale:r.left=e.dragging.left+b.deltaX/e.transformScale,r.top=e.dragging.top+b.deltaY/e.transformScale,e.bounded){const R=o.offsetParent.clientHeight-ge(i.h,e.rowHeight,e.margin[1]);r.top=ue(r.top,0,R);const k=C(),B=e.containerWidth-ge(i.w,k,e.margin[0]);r.left=ue(r.left,0,B)}e.dragging=r;break}case"dragend":{const b=o.offsetParent.getBoundingClientRect(),R=o.getBoundingClientRect(),k=R.left/e.transformScale,B=b.left/e.transformScale,F=R.right/e.transformScale,P=b.right/e.transformScale,A=R.top/e.transformScale,Y=b.top/e.transformScale;h.value?r.left=(F-P)*-1:r.left=k-B,r.top=A-Y,e.dragging={top:-1,left:-1},e.isDragging=!1;break}}let m;h.value,m=q(r.top,r.left),_=s,j=f,(p!==m.x||y!==m.y)&&M("move",i.i,m.x,m.y),t.type==="dragend"&&(K!==p||V!==y)&&M("moved",i.i,m.x,m.y),u.emit("dragEvent",t.type,i.i,m.x,m.y,x,w)}function T(t,a,l,s){const f=C();let o;return h.value?o={right:Math.round(f*t+(t+1)*e.margin[0]),top:Math.round(e.rowHeight*a+(a+1)*e.margin[1]),width:l===1/0?l:Math.round(f*l+Math.max(0,l-1)*e.margin[0]),height:s===1/0?s:Math.round(e.rowHeight*s+Math.max(0,s-1)*e.margin[1])}:o={left:Math.round(f*t+(t+1)*e.margin[0]),top:Math.round(e.rowHeight*a+(a+1)*e.margin[1]),width:l===1/0?l:Math.round(f*l+Math.max(0,l-1)*e.margin[0]),height:s===1/0?s:Math.round(e.rowHeight*s+Math.max(0,s-1)*e.margin[1])},o}function q(t,a){const l=C();let s=Math.round((a-e.margin[0])/(l+e.margin[0])),f=Math.round((t-e.margin[1])/(e.rowHeight+e.margin[1]));return s=Math.max(Math.min(s,e.cols-w),0),f=Math.max(Math.min(f,e.maxRows-x),0),{x:s,y:f}}function C(){return(e.containerWidth-e.margin[0]*(e.cols+1))/e.cols}function ge(t,a,l){return Number.isFinite(t)?Math.round(a*t+Math.max(0,t-1)*l):t}function ue(t,a,l){return Math.max(Math.min(t,l),a)}function ve(t,a,l=!1){const s=C();let f=Math.round((a+e.margin[0])/(s+e.margin[0])),o=0;return l?o=Math.ceil((t+e.margin[1])/(e.rowHeight+e.margin[1])):o=Math.round((t+e.margin[1])/(e.rowHeight+e.margin[1])),f=Math.max(Math.min(f,e.cols-p),0),o=Math.max(Math.min(o,e.maxRows-y),0),{w:f,h:o}}function Se(t,a){e.containerWidth=t}function fe(){S()}function de(){!d.value&&N.value&&(d.value=pe(N.value),e.useStyleCursor||d.value.styleCursor(!1))}const He=g.throttle(ce);function me(){if(de(),!!d.value)if(e.draggable&&!i.static){const t={ignoreFrom:i.dragIgnoreFrom,allowFrom:i.dragAllowFrom,...i.dragOption};d.value.draggable(t),L||(L=!0,d.value.on("dragstart dragmove dragend",a=>{a.type==="dragmove"?He(a):ce(a)}))}else d.value.draggable({enabled:!1})}const Me=g.throttle(le);function H(){if(de(),!!d.value)if(e.resizable&&!i.static){const t=T(0,0,i.maxW,i.maxH),a=T(0,0,i.minW,i.minH),l={edges:{left:!1,right:`.${I.value[0]}`,bottom:`.${I.value[0]}`,top:!1},ignoreFrom:i.resizeIgnoreFrom,restrictSize:{min:{height:a.height*e.transformScale,width:a.width*e.transformScale},max:{height:t.height*e.transformScale,width:t.width*e.transformScale}},...i.resizeOption};i.preserveAspectRatio&&(l.modifiers=[pe.modifiers.aspectRatio({ratio:"preserve"})]),d.value.resizable(l),X||(X=!0,d.value.on("resizestart resizemove resizeend",s=>{s.type==="resizemove"?Me(s):le(s)}))}else d.value.resizable({enabled:!1})}return(t,a)=>(n.openBlock(),n.createElementBlock("section",{ref_key:"wrapper",ref:N,class:n.normalizeClass(Re.value),style:n.normalizeStyle(e.style)},[n.renderSlot(t.$slots,"default"),se.value?(n.openBlock(),n.createElementBlock("span",{key:0,class:n.normalizeClass(I.value)},null,2)):n.createCommentVNode("",!0)],6))}});module.exports=Te;
//# sourceMappingURL=grid-item.vue.js.map