gepic
Version:
基于vue3的设计器,可视化开发页面表单
2 lines (1 loc) • 2.97 kB
JavaScript
;const e=require("vue"),f=require("@vueuse/core"),T=require("../../../../../../utils/common/common.cjs"),_=require("../../../../../../hooks/common/element.cjs"),M=require("../../../../../../hooks/store/index.cjs"),j=require("./toolbar.vue.cjs"),O={class:"h-full flex flex-col relative"},Z=["draggable"],A=e.defineComponent({__name:"editScreenContainer",setup(P){const p=e.inject("designerProps"),S=e.inject("pageSchema"),o=e.ref(null),c=e.ref(null),u=e.ref(null),{pressSpace:z,disabledZoom:B}=M.useStore(),{handleElementDragStart:k,handleElementDrag:D,handleElementDragEnd:w}=_.useElementDrag(o),{width:x,height:H}=f.useElementSize(o),{canvasScale:b,handleZoom:y}=_.useElementZoom(c),i=e.computed(()=>z.value&&p.value.draggable);let d=0,v=0;const E=e.ref({}),C=e.ref({}),g=e.ref({}),a=e.shallowRef({width:0,height:0}),W=e.computed(()=>p.value.draggable?E.value:{width:"100%",height:"100%"});e.watchEffect(N),e.onMounted(()=>{e.watch(g,()=>{e.nextTick(q)},{immediate:!0})});function q(){u.value&&(a.value={width:u.value.clientWidth,height:u.value.clientHeight})}function N(){var l,t;g.value={width:((l=S.canvas)==null?void 0:l.width)??"0",height:((t=S.canvas)==null?void 0:t.height)??"0"}}f.watchOnce(x,m),e.watch(a,m);function m(){let l=a.value.width||d,t=a.value.height||v;E.value={width:x.value+l+"px",height:H.value+t+"px"},C.value={width:l+"px",height:t+"px"},V()}function V(){e.nextTick(()=>{var h;let l=a.value.width||d;const n=(a.value.height||v)/2,r=l/2;(h=o.value)==null||h.scrollTo(r,n)})}f.useResizeObserver(o,R),f.useResizeObserver(c,R);function R(){var t;if(!o.value)return;const l=o.value.getBoundingClientRect();if(d=l.width-60,v=l.height-80,!B.value)if(a.value.width===0)b.value=1;else{const n=(d-20)/a.value.width,r=v/(a.value.height||((t=c.value)==null?void 0:t.clientHeight)||1),h=Math.abs(n-1)<Math.abs(r-1);let s=1;h?s=n:s=r,(n<1||r<1)&&(s=Math.min(n,r)),s<1.4&&s>.5&&(b.value=s)}T.debounce(m,50)()}return(l,t)=>(e.openBlock(),e.createElementBlock("div",O,[e.createVNode(j),e.createElementVNode("div",{ref_key:"editScreenContainerRef",ref:o,class:e.normalizeClass(["epic-edit-screen-container flex-1 overflow-auto overflow-y-hidden",{"cursor-grab":i.value}]),draggable:i.value,onWheel:t[0]||(t[0]=(...n)=>e.unref(y)&&e.unref(y)(...n)),onDragstart:t[1]||(t[1]=n=>e.unref(k)(n,i.value)),onDrag:t[2]||(t[2]=n=>e.unref(D)(n,i.value)),onDragend:t[3]||(t[3]=(...n)=>e.unref(w)&&e.unref(w)(...n))},[e.createElementVNode("div",{id:"canvasContainer",class:"flex items-center justify-center",style:e.normalizeStyle(W.value)},[e.createElementVNode("div",{ref_key:"draggableElRef",ref:c,class:"transition-all"},[e.createElementVNode("div",{class:e.normalizeClass({"pointer-events-none":i.value}),style:e.normalizeStyle(C.value)},[e.renderSlot(l.$slots,"default")],6)],512)],4)],42,Z),e.createElementVNode("div",{ref_key:"sizeBoxRef",ref:u,class:"absolute top-0 pointer-events-none",style:e.normalizeStyle(g.value)},null,4)]))}});module.exports=A;