https://ssseee.love/assets/TmlMasonryGrid.8f0ed4d2.js

1import{f as g}from"./faPlus.b7ccafa3.js";import{D as I,E as S,G as C,h as f}from"./vue.00f7c436.js";import{ao as n,x as v,_ as b,bh as m,bd as y}from"./index.b39fe1b1.js";import{A as R,F as $}from"./animation.69f02f47.js";import{R as P}from"./relativity.fdc9b575.js";import{d as _}from"./debounce.41ca9a8b.js";import"./sentry.09480738.js";class D{constructor({data:e=null,row:t=null}={}){this.data=e,this.row=t}get matrix(){return this.row&&this.row.matrix?this.row.matrix:null}}class z extends Array{constructor({cells:e=[],height:t="static",matrix:i=null}={}){super(e),this.height=t,this.matrix=i}}class H{constructor({data:e=null,size:t=new n(0,0),position:i=new n(0,0),dynamicHeight:s=!1,matrix:r=null}={}){this.data=e,this.size=t,this.position=i,this.dynamicHeight=s,this.matrix=r}}class E{constructor({columns:e}){this.columns=e,this.areas=[],this._matrix=[]}get rows(){return this._matrix.length}get lastArea(){let e=null;return this.areas.forEach(t=>{(!e||t.position.y>e.position.y)&&(e=t)}),e}getRowHeightCSS(e){return this._matrix.map(t=>t.height==="dynamic"?"auto":`${e}px`).join(" ")}getArea(e){return this.areas.find(t=>t.data===e)}getCell(e){return this.validCell(e)?this._matrix[e.y][e.x]:null}getRowHeight(e){let t=null;if(e.height==="static")return 10;e.some(s=>s.data&&s.data.vNode?(t=s.data,!0):!1);let i=10;return t&&t.vNode&&t.vNode.el&&t.vNode.el.getBoundingClientRect&&(t.size.y===0||t.size.x>this.columns/2)&&(i=t.vNode.el.getBoundingClientRect().height),i}setColumns(e){this.columns=e,this.update()}setArea(e,t,i){t=t.copy();let s=!1;t.x>this.columns/2&&(t.x=this.columns,s=!0),t.y===0&&(s=!0),s&&(t.y=1),this._addRows(Math.max(0,e.y+t.y-this.rows),s),this._foreachInArea(e,t,(a,l,d)=>{a&&(a.data=i,a.areaSize=t,a.areaPosition=e,l===e.x&&d===e.y?a.areaTopLeft=!0:a.areaTopLeft=!1)});const r=new H({position:e,size:t,data:i,dynamicHeight:s,matrix:this});return this.areas.push(r),r}validCell(e){return!(!this._matrix.length||e.x<0||e.y<0||e.x>this.columns-1||e.y>this.rows-1)}getCellAlignmentDeltas(e,t){return{top:e.position.y-t.position.y,left:e.position.x-t.position.x,bottom:e.position.y+e.size.y-(t.position.y+t.size.y),right:e.position.x+e.size.x-(t.position.x+t.size.x)}}clearMatrix(){this.areas=[],this._matrix=[]}_addRows(e,t){for(let i=0;i<e;i+=1){const s=new z({height:t?"dynamic":"static",matrix:this});for(let r=0;r<this.columns;r+=1)s.push(new D({row:s}));this._matrix.push(s)}}_foreachInArea(e,t,i){for(let{y:s}=e;s<e.y+t.y;s+=1)for(let{x:r}=e;r<e.x+t.x;r+=1){let a=null;this._matrix[s]&&this._matrix[s][r]&&(a=this._matrix[s][r]);const l=i(a,r,s);if(l!==void 0)return l}return null}findEmptyArea(e,t,i=!0,s=12){if(e.x>=this.columns)return new n(0,this.rows);e.y<=0&&(e=e.copy(),e.y=1);const r=t||new n(0,0);let a=null,l=!1,d=null,u=4e3;do{for(let c=0;c<this.columns;c+=1)if(r.x=c,a){const h=this.getCell(r);if(h&&h.data){this.getCellAlignmentDeltas({position:r,size:e},{position:h.areaPosition,size:h.areaSize}).bottom>s?(a=null,r.x=0,r.y=h.areaPosition.y+h.areaSize.y):l=!0;break}else c===this.columns-1&&(l=!0)}else if(this._hasCollisions(r,e)){const h=this.getCell(r);h&&h.data&&(d=h)}else{if(d){const h=this.getCellAlignmentDeltas({position:r,size:e},{position:d.areaPosition,size:d.areaSize});(h.top===0||h.bottom<=s)&&(a=r.copy())}else a=r.copy();if(!i)break}a||(r.y>=this.rows?a=r.copy():(d=null,r.y+=1)),u--,u===0&&console.error("Limit hit")}while((!a||!l)&&u>0&&r.y<=this.rows);return a}_hasCollisions(e,t){return this._foreachInArea(e,t,(i,s,r)=>{if(s<0||r<0||s>=this.columns||i&&i.data)return!0})||!1}positionToCell(e,t,i=!1){const s=new n(0,0),r={totalHeight:0,rowIndex:0};if(t){const a=t.getBoundingClientRect(),l=e.subtract(new n(a.left,a.top)),d=new n(0,0),u=a.width/this.columns;s.x=Math.floor(l.x/u),this._matrix.map(c=>this.getRowHeight(c)).some((c,h)=>{const p=d.y+c;return d.y<l.y?(r.totalHeight+=c,r.rowIndex=h,d.y=p,s.y=h,!1):!0})}return i?{cell:s,debug:r}:s}cellToPosition(e,t,i=0){const s=new n(0,0);if(t){const a=(t.getBoundingClientRect().width-i*(this.columns-1))/this.columns;s.x=e.x*(a+i),s.y=this._matrix.map(l=>this.getRowHeight(l)).splice(0,e.y).reduce((l,d)=>l+d,0)}return s}findNearestItem(e,t=!1){let i=null,s=e,r=0;const a=[];for(;!i&&s.x>=0&&s.y>=0&&r<2e3;){r++;const l=this.getCell(s);l&&(l.data&&(i=l),s=new n(s.x,s.y-1),t&&a.push(s.copy()))}return t?{item:i,iterations:r,trace:a}:i}getColumnDivisor(e,t=[3,4]){let i=1;return t.forEach(s=>{e/s%1===0&&s<i&&(i=s)}),i}getPossibleSizes(e,t=this.getColumnDivisor(e)){const i=e/t,s=1,r=[];for(let a=i;a>=s;--a)r.push(a*t);return r}findPlaceholderSpaces(){const e=[];return this.areas.forEach(({position:t,size:i,data:s})=>{this.getPossibleSizes(i.x).map(a=>new n(a,i.y)).some(a=>{if(t.x+(i.x+a.x)<=this.columns){const l=t.copy().add(new n(i.x,0));if(!this._hasCollisions(l,a))return e.push({position:l,size:a.copy(),data:s}),!0}return!1})}),e}

1getNaturalDivides(){const e=[];let t,i;return this._matrix.forEach((s,r)=>{s.every(a=>(a.data&&!i&&(i=a.data),!a.data||a.areaPosition.y===r))&&e.push({row:r,currentItem:i,before:t,after:i}),t=i,i=void 0}),e}}class x{constructor(e){this.data=e,this.vNode=null,this.area=null,this.offset=new R("vector"),this.fromPosition=new n(0,0),this.moveDelta=new n(0,0),this.checkLimit=10,this.loaded=!1,this.fixed=!1,e&&e.order?this.order=e.order:this.order=0,e&&e.fixed!==void 0?this.fixed=e.fixed:this.fixed=!1,e&&e.editable!==void 0?this.editable=e.editable:this.editable=!0,e&&e.uid?this.uid=e.uid:(this.uid=v(),e.uid=this.uid)}get component(){return this.vNode?this.vNode.component:null}get componentProps(){return!this.vNode||!this.vNode.props?null:this.vNode.props}get size(){if(!this.componentProps)return this.data&&this.data.size?this.data.size:new n(1,0);const e=new n(this.componentProps.width,this.componentProps.height);return this.component&&this.component.data.correctedHeight&&(e.y=this.component.data.correctedHeight),e}getRelativeDirectionToPosition(e){if(!this.vNode)return null;const t=this.vNode.el.getBoundingClientRect(),i=new n(t.width,t.height),s=e.copy().subtract(new n(t.left,t.top)),r=s.y<i.y/i.x*s.x,a=s.y<-(i.y/i.x)*s.x+i.y;return r&&a?"top":!r&&a?"left":!r&&!a?"bottom":r&&!a?"right":null}resetResizeSensor(){this.component&&this.component.resetResizeSensor()}}const N={name:"TmlMasonryGridItem",inject:["rowHeight","requestUpdate","draggable","matrix"],props:{item:{type:Object},spacing:{type:Number},width:{required:!0,type:Number},height:{type:Number,default:0},fixed:Boolean,editable:Boolean,uid:{type:[String,Number],default:v},autoHeight:{type:Boolean,default:!1},canUpdateSize:{type:Boolean,default:!0}},data(){return{realHeight:0,correctedHeight:null,debug:!1}},watch:{width(){this.requestUpdate()},height(){this.requestUpdate()}},updated(){this.canUpdateSize&&this.onUpdateSize(this.$el),this.$children[0]&&this.$children[0].$once("hook:updated",()=>{this.onUpdateSize(this.$el)})},methods:{resetResizeSensor(){this.$el&&this.$el.resizeSensor&&this.$el.resizeSensor.resetSensor()},onUpdateSize(o){var e;if(this.realHeight=(e=o.firstElementChild)==null?void 0:e.clientHeight,this.realHeight===0&&setTimeout(()=>{this.onUpdateSize(o)},100),this.width<=this.matrix().columns/2&&!this.autoHeight){const t=Math.ceil((this.realHeight+this.spacing)/this.rowHeight);t!==this.correctedHeight&&(this.correctedHeight=t,this.$emit("sizeChanged",new n(this.width,t)),this.requestUpdate())}}}};function T(o,e,t,i,s,r){return I(),S("div",{class:"tml-masonry-grid-item",onClick:e[0]||(e[0]=a=>o.$emit("click",a)),onMousedown:e[1]||(e[1]=a=>o.$emit("mousedown",a)),onTouchstart:e[2]||(e[2]=a=>o.$emit("touchstart",a))},[C(o.$slots,"default",{},void 0,!0)],32)}const M=b(N,[["render",T],["__scopeId","data-v-21945a07"]]);const A=new $,w=250,k={name:"TmlMasonryGrid",components:{TmlPlaceholder:m},provide(){return{rowHeight:this.rowHeight,requestUpdate:this.requestUpdate,draggable:this.draggable,matrix:()=>this.matrix}},model:{prop:"items",event:"updated"},props:{items:{required:!0,type:Array},rowHeight:{type:Number,default:10},ySpacing:{type:Number,default:24},xSpacing:{type:Number,default:24},columns:{type:[Number,Object],default:()=>({xs:6,lg:12})},editable:{type:Boolean,default:!0},draggable:{type:Boolean,default:!1},endOfRowPlaceholder:{type:Boolean,default:!1},startOfGridPlaceholder:{type:Boolean,default:!1},allowNewRowPlaceholder:{type:Boolean,default:!1},gridPlaceholderIcon:{type:Object,default:()=>g.faPlus},gridPlaceholderText:{type:String,default:"Add content"},newRowPlaceholderWidth:{type:Number,default:3},newRowPlaceholderRatio:{type:Number,default:1},placeholderYSpacing:{type:Number},scrollContainer:{type:HTMLDivElement},itemSize:{type:[n,Object,Function],default:()=>new n(1,0)},disableAnimation:Boolean,autoHeight:Boolean},data(){return{faPlus:g.faPlus,matrix:null,relativity:null,animate:!1,updatingItems:!1,internalItems:[],placeholderSpaces:[],lastMovedUid:null,selectedItem:null,naturalDivides:[],blockOverlays:[],debug:!1}},computed:{itemOrder(){const o={};

1return this.internalItems.forEach(e=>{o[e.uid]=e.order}),o}},watch:{items:{immediate:!0,handler(o){this.debug&&(console.log(""),console.log("Masonry Grid Debug:"),console.info("%cDeleted","color: #F44336;",this.internalItems.filter(t=>o.every(i=>i.uid!==t.uid)).map(t=>t.uid.toString().substring(0,2))),console.info("%cUpdated","color: #2196F3;",this.internalItems.filter(t=>o.find(i=>i.uid===t.uid)).map(t=>t.uid.toString().substring(0,2))),console.info("%cAdded  ","color: #4CAF50;",o.filter(t=>this.internalItems.every(i=>t.uid!==i.uid)).map(t=>t.uid?t.uid.toString().substring(0,2):"--")),console.log("")),this.disableAnimation||(this.animate=!0);const e=[];this.internalItems=this.internalItems.filter(t=>o.some(i=>i.uid===t.uid)).map(t=>{const i=o.find(s=>s.uid===t.uid);return i&&(t.order=i.order,t.data=i),t}).concat(o.filter(t=>this.internalItems.every(i=>t.uid!==i.uid)).map(t=>new x(t))).sort((t,i)=>t.order-i.order).filter(t=>t).map((t,i)=>(t.order!==void 0&&t.order!==i&&e.push(t),t.order=i,t)),e.length&&this.$emit("reordered",e,this.internalItems)}},itemOrder:{immediate:!0,handler(){this.$nextTick(()=>{this.requestUpdate()}),this.$emit("updated",this.internalItems)}}},created(){const o=new E({columns:y(this.columns)});

1this.matrix=Object.seal(o),this.relativity=new P({scrollContainer:this.scrollContainer},{onClick:this.onClick,onDrag:this.onDrag,onDrop:this.onDrop},{touchDragDelay:150,autoScroll:!0}),window.addEventListener("resize",this.onResize)},mounted(){this.relativity.setContainer(this.$refs.grid)},unmounted(){window.removeEventListener("resize",this.onResize)},methods:{onMouseDown(o,e){this.internalItems&&this.draggable&&e.editable&&(o.buttons===1||o.buttons===void 0)&&(this.selectedItem=e,e.fixed||(e.offset.stop(),e.offset.startValue=new n(0,0),this.lastMovedUid=e.uid,this.relativity.setElement(e.vNode.el,o,!1)))},onClick(){this.selectedItem&&(this.$emit("clicked-block",this.selectedItem.data),this.selectedItem=null)},onDrag(o){this.selectedItem&&(this.disableAnimation||(this.animate=!0,this.selectedItem.offset.startValue.add(o.mouseMovement),this.selectedItem.offset.endValue.add(o.mouseMovement)),this.$refs.debugger&&this.$refs.debugger.onDrag(o),this.updateOrder())},onDrop(){this.selectedItem&&(this.updateOrder(),this.animate?this.selectedItem.offset.start(null,new n(0,0),w).then(o=>{o.startValue=new n(0,0),o.currentTime=0}):this.selectedItem.offset.startValue=new n(0,0),this.selectedItem=null,this.$emit("drop"))},onResize:_(function(){const e=y(this.columns);e!==this.matrix.columns&&(this.matrix.columns=e),this.requestUpdate()},100,{leading:!0,maxWait:250}),updateOrder(){const o=[],e=this.matrix.positionToCell(this.relativity.mousePosition,this.$refs.grid),t=this.matrix.findNearestItem(e);if(t){const i=t.data,s=i.getRelativeDirectionToPosition(this.relativity.mousePosition,this.$refs.grid);if(i!==this.selectedItem&&!i.fixed){let r=this.selectedItem.order<i.order?i.order-1:i.order;(s==="bottom"||s==="right")&&(r+=1),this.moveGridItem(r,o)}}o.length&&this.$emit("reordered",o,this.internalItems)},moveGridItem(o,e){this.selectedItem.order!==o&&(this.internalItems.splice(o,0,this.internalItems.splice(this.selectedItem.order,1)[0]),this.internalItems.forEach((t,i)=>{t.order!==i&&e.push(t),t.order=i}),this.internalItems.sort((t,i)=>t.order-i.order))},requestUpdate(){this.updatingItems||(this.updatingItems=!0,A.add(()=>{this.reloadMatrix(),this.updatingItems=!1}))},reloadMatrix(){if(this.animate&&this.internalItems.forEach(e=>{e.area&&(e.fromPosition=this.matrix.cellToPosition(e.area.position.copy(),this.$refs.grid,this.ySpacing))}),this.matrix.clearMatrix(),this.startOfGridPlaceholder){const e=new n(1,0);this.matrix.setArea(this.matrix.findEmptyArea(e,new n(0,0)),e,new x({}))}let o=!1;this.internalItems.forEach(e=>{let t=new n(0,0);this.matrix.lastArea&&(t=this.matrix.lastArea.position.copy()),e.component&&this.$nextTick(()=>{e.loaded=!0}),e.loaded||e.checkLimit>0&&(e.checkLimit-=1,o||(o=!0,this.$nextTick(()=>{this.requestUpdate()})));const i=this.matrix.setArea(this.matrix.findEmptyArea(e.size.copy(),t),e.size,e);e.area=i}),this.animate&&this.internalItems.forEach(e=>{if(e.loaded&&e.fromPosition){const t=this.matrix.cellToPosition(e.area.position.copy(),this.$refs.grid,this.ySpacing);this.animateItem(e,e.fromPosition,t)}setTimeout(()=>{this.animate=!1},100)}),this.placeholderSpaces=this.matrix.findPlaceholderSpaces(),this.naturalDivides=this.matrix.getNaturalDivides()},animateItem(o,e,t){o.moveDelta=e.copy().subtract(t),(o.moveDelta.x!==0||o.moveDelta.y!==0)&&(!this.relativity.isHolding||o!==this.selectedItem&&o.uid!==this.lastMovedUid?this.animate&&o.offset.start(o.moveDelta,null,w).then(i=>{i.startValue=new n(0,0),i.currentTime=0}):this.selectedItem&&(o.offset.startValue.add(o.moveDelta),o.offset.endValue.add(o.moveDelta)))}},render(){var o,e;return this.$scopedSlots.template?f("div",{class:{"tml-masonry-grid":!0,dragging:!!this.selectedItem&&this.relativity.isHolding,draggable:this.draggable},style:{gridTemplateColumns:`repeat(${this.matrix.columns}, 1fr)`,gridTemplateRows:`${this.matrix.getRowHeightCSS(this.rowHeight)} auto`,gridGap:`0px ${this.xSpacing}px`},ref:"grid"},[...this.internalItems.filter(t=>t&&t.area).map((t,i,s)=>{var l,d;const r=this.itemSize instanceof Function?this.itemSize(t):this.itemSize,a=f(M,{key:t.uid,width:r==null?void 0:r.x,height:r==null?void 0:r.y,fixed:t.fixed||!1,editable:t.editable||!0,autoHeight:this.autoHeight?this.autoHeight:t.data.autoHeight,spacing:this.ySpacing,canUpdateSize:this.updatingItems,item:t,class:{item:!0,holding:this.relativity.isHolding&&this.selectedItem&&this.selectedItem===t,"editable unclickable":this.editable&&t.editable,"cursor-move":this.editable&&t.editable&&!t.fixed&&this.draggable,"cursor-pointer":this.editable&&t.editable&&(t.fixed||!this.draggable)},style:{gridColumnStart:t.area.position.x+1,gridColumnEnd:t.area.position.x+t.area.size.x+1,gridRowStart:t.area.position.y+1,gridRowEnd:t.area.position.y+t.area.size.y+1,transform:`translate(${t.offset.berp.x}px, ${t.offset.berp.y}px)`,width:"100%",zIndex:t.uid===this.lastMovedUid&&!t.offset.ended?2:null,marginBottom:(d=(l=t.data)==null?void 0:l.properties)!=null&&d.padding?null:`${this.ySpacing}px`},onMousedown:u=>this.onMouseDown(u,t),onTouchstart:u=>this.onMouseDown(u,t),onClick:()=>{(t.fixed||!this.draggable)&&(this.selectedItem=t,this.onClick())}},()=>{var u,c;return[this.$slots.template({item:t.data,before:(u=s[i-1])==null?void 0:u.data,after:(c=s[i+1])==null?void 0:c.data})]});return t.vNode=a,a}),this.selectedItem&&this.draggable?f("div",{class:"placeholder",style:{gridColumnStart:this.selectedItem.area.position.x+1,gridColumnEnd:this.selectedItem.area.position.x+this.selectedItem.area.size.x+1,gridRowStart:this.selectedItem.area.position.y+1,gridRowEnd:this.selectedItem.area.position.y+this.selectedItem.area.size.y+1,marginBottom:(e=(o=this.selectedItem.data)==null?void 0:o.properties)!=null&&e.padding?null:`${this.ySpacing}px`}}):null,...this.$scopedSlots.blockOverlay?this.internalItems.filter(t=>t.area).map((t,i,s)=>{var r,a;return f("div",{class:{"flex justify-center":!0},style:{gridColumnStart:t.area.position.x+1,gridColumnEnd:t.area.position.x+t.area.size.x+1,gridRowStart:t.area.position.y+1,gridRowEnd:t.area.position.y+t.area.size.y+1,position:"relative",zIndex:1}},[this.$scopedSlots.blockOverlay({item:t.data,before:(r=s[i-1])==null?void 0:r.data,after:(a=s[i+1])==null?void 0:a.data})])}

1):[],...this.$scopedSlots.naturalDivider?this.naturalDivides.map(t=>f("div",{style:{gridColumnStart:1,gridColumnEnd:-1,gridRowStart:t.row+1,gridRowEnd:t.row+1,position:"relative",height:0,zIndex:1,pointerEvents:"none"}},[this.$scopedSlots.naturalDivider(t)])):[],...this.endOfRowPlaceholder?this.placeholderSpaces.map(t=>f(m,{style:{gridColumnStart:t.position.x+1,gridColumnEnd:t.position.x+t.size.x+1,gridRowStart:t.position.y+1,gridRowEnd:t.position.y+t.size.y+1,marginBottom:`${this.ySpacing}px`},text:this.gridPlaceholderText,icon:this.gridPlaceholderIcon,height:"1",additive:!1,onClick:()=>{this.$emit("add",{size:t.size,block:t.data.data})}})):[],this.allowNewRowPlaceholder&&this.endOfRowPlaceholder&&this.placeholderSpaces.length===0?f(m,{style:{gridColumnStart:1,gridColumnEnd:this.newRowPlaceholderWidth+1,gridRowStart:this.matrix.rows+1,gridRowEnd:this.matrix.rows+1,marginBottom:`${this.ySpacing}px`},text:this.gridPlaceholderText,icon:this.gridPlaceholderIcon,additive:!1,aspectRatio:this.newRowPlaceholderRatio,onClick:()=>{this.$emit("add")}}):null,this.startOfGridPlaceholder?f(m,{class:"placeholder",ref:"startPlaceholder",style:{gridColumnStart:1,gridColumnEnd:2,gridRowStart:1,gridRowEnd:2,marginBottom:`${this.placeholderYSpacing?this.placeholderYSpacing:this.ySpacing}px`},text:this.gridPlaceholderText,icon:this.gridPlaceholderIcon,additive:!1,aspectRatio:1,bigIcon:!0,onClick:()=>{this.$emit("add")}}):null]):null}},j=b(k,[["__scopeId","data-v-dd6e638f"]]);export{j as default};
2//# sourceMappingURL=TmlMasonryGrid.8f0ed4d2.js.map