gepic/dist/core/components/designer/src/modules/editContainer/previewWidgets.vue.cjs

基于vue3的设计器,可视化开发页面表单

"use strict";const t=require("vue"),O=require("../../../../../../utils/manager/pluginManager.cjs"),E=require("../../../../../../hooks/common/element.cjs"),z=require("@vueuse/core"),ee=require("../../../../../../hooks/store/index.cjs"),N=require("../../../../../../utils/common/data.cjs"),V=require("../../../../icon/src/icon.vue.cjs"),te={class:"epic-widget-action-item whitespace-nowrap"},oe={key:0,class:"flex items-center"},ne=t.defineComponent({__name:"previewWidgets",setup(re,{expose:R}){const C=t.inject("pageManager",{}),g=t.inject("pageSchema"),u=t.inject("designer"),H=t.inject("designerProps"),L=t.inject("revoke"),h=t.ref(null),m=t.ref(null),f=t.ref(null),S=t.ref(!1),_=t.ref(!1),B=t.ref(!0),x=t.ref("top"),{canvasScale:T,disabledZoom:$}=ee.useStore();let n=null;const F=t.computed(()=>{const e=u.state.checkedNode;return!(!(e!=null&&e.id)||H.value.lockDefaultSchemaEdit&&C.defaultComponentIds.value.includes(e==null?void 0:e.id))}),b=t.computed(()=>{var s,c,a,i,d,v;const e=C.componentInstances.value,r=(s=u.state.checkedNode)==null?void 0:s.id;if((a=(c=u.state.checkedNode)==null?void 0:c.componentProps)!=null&&a.hidden)return null;const l=O.pluginManager.getComponentConfingByType((i=u.state.checkedNode)==null?void 0:i.type)??null;if(!r||!(e!=null&&e[r]))return null;if(l!=null&&l.defaultSchema.input&&((d=u.state.checkedNode)==null?void 0:d.noFormItem)!==!0)return(v=e[r+"formItem"])==null?void 0:v.$el;const o=e[r];return!(o!=null&&o.$el)||(o==null?void 0:o.$el.nodeName)==="#text"||!(o!=null&&o.$el.getBoundingClientRect)?null:o==null?void 0:o.$el}),k=t.computed(()=>{var c,a;const e=C.componentInstances.value,{hoverNode:r}=u.state;if(!r||(c=r.componentProps)!=null&&c.hidden)return null;const l=r.id,o=O.pluginManager.getComponentConfingByType(r.type)??null;if(!l||!(e!=null&&e[l]))return null;if(o!=null&&o.defaultSchema.input&&r.noFormItem!==!0)return(a=e[l+"formItem"])==null?void 0:a.$el;const s=e[l];return(s==null?void 0:s.$el.nodeName)==="#text"?null:s==null?void 0:s.$el}),{mutationObserver:I,observerConfig:Q}=j(y),{startTimedQuery:W,stopTimedQuery:X}=E.useTimedQuery(y);t.watch(()=>b.value,e=>{if(e){S.value=!0,I.observe(e,Q);const r=e.parentNode;r&&(r.ondragstart=()=>{B.value=!1,W()},r.ondragend=()=>{B.value=!0,X()}),y()}else S.value=!1});const{mutationObserver:Y,observerConfig:A}=j(M);t.watch(()=>k.value,e=>{e&&(Y.observe(e,A),M())});let q=0;t.watch(()=>{var e;return(e=u.state.hoverNode)==null?void 0:e.id},e=>{if(e){_.value=!0,clearTimeout(q);return}q=setTimeout(()=>{_.value=!1},300)});let D=0,P=0;function y(){const e=b.value;if(!e||!n)return;const{top:r,left:l}=n==null?void 0:n.getBoundingClientRect(),{top:o,left:s,width:c,height:a}=e.getBoundingClientRect(),i=$.value?1:T.value,d=o-r+((n==null?void 0:n.scrollTop)??0)*i,v=s-l+((n==null?void 0:n.scrollLeft)??0)*i,p=a/i;h.value&&(h.value.style.width=`${c/i}px`,h.value.style.height=`${p}px`,h.value.style.top=`${d/i}px`,h.value.style.left=`${v/i}px`,Z(d,v)),f.value&&(d<45&&p<100?(f.value.style.top="",f.value.style.bottom="-30px",f.value.style["border-radius"]="0px 0px 4px 4px",x.value="bottom"):d<45?(f.value.style.top="0px",f.value.style["border-radius"]="0px 0px 4px 0",x.value="center"):(f.value.style.top="-30px",f.value.style["border-radius"]="4px 4px 0px 0px",x.value="top"))}function Z(e,r){const l=b.value;if(!n||!l)return;const o=n.getBoundingClientRect(),{width:s}=l.getBoundingClientRect(),c=$.value?1:T.value,a=e/c-o.top;let i=r/c-o.left+s/c;i<o.width&&(i=0);const d=n.scrollTop-o.height/3+60,v=n.scrollTop+o.height/3*2,p=n.scrollLeft-o.width+200,w=n.scrollLeft+o.width-200;Math.abs(a-D)<10&&Math.abs(i-P)<10||(D=a,P=i,!(a>d&&a<v&&i>p&&i<w)&&(n.scrollTop=a,n.scrollLeft=i))}function M(){var p,w;const e=k.value;if(!e)return;const{top:r,left:l}=(n==null?void 0:n.getBoundingClientRect())??{top:0,left:0},{top:o,left:s,width:c,height:a}=((p=e.getBoundingClientRect)==null?void 0:p.call(e))??((w=e.nextElementSibling)==null?void 0:w.getBoundingClientRect()),i=$.value?1:T.value,d=o-r+((n==null?void 0:n.scrollTop)??0)*i,v=s-l+((n==null?void 0:n.scrollLeft)??0)*i;m.value&&(m.value.style.width=`${c/i}px`,m.value.style.height=`${a/i}px`,m.value.style.top=`${d/i}px`,m.value.style.left=`${v/i}px`)}function j(e){const r=window.MutationObserver,l={childList:!0,attributes:!0,subtree:!0};return{mutationObserver:new r(e),observerConfig:l}}function G(){var o;const e=N.findSchemaInfoById(g.schemas,((o=u.state.checkedNode)==null?void 0:o.id)??"root");if(!e)return!1;const{parentSchema:r,schema:l}=e;u.setCheckedNode(r)}function J(){var c;const e=N.findSchemaInfoById(g.schemas,((c=u.state.checkedNode)==null?void 0:c.id)??"root");if(!e)return!1;const{list:r,schema:l,index:o}=e,s=N.generateNewSchema(l);r.splice(o+1,0,s),u.setCheckedNode(s),L.push(g.schemas,"复制组件")}function K(){var s;const e=N.findSchemaInfoById(g.schemas,((s=u.state.checkedNode)==null?void 0:s.id)??"root");if(!e)return!1;let{list:r,schema:l,index:o}=e;r.splice(o,1),o===r.length&&o--,u.setCheckedNode(r[o]),L.push(g.schemas,"删除组件")}function U(e){n=e,n==null||n.addEventListener("scroll",()=>{y()}),z.useResizeObserver(b,y),z.useResizeObserver(k,M)}return R({handleInit:U}),(e,r)=>{var l,o,s,c,a;return t.openBlock(),t.createElementBlock(t.Fragment,null,[t.withDirectives(t.createElementVNode("div",{ref_key:"selectorRef",ref:h,class:t.normalizeClass(["epic-checked-widget absolute pointer-events-none z-999",x.value+" "+(B.value?"transition-all":"")])},[t.createElementVNode("div",{ref_key:"actionBoxRef",ref:f,class:"epic-widget-action-box"},[t.createElementVNode("div",te,t.toDisplayString((o=t.unref(O.pluginManager).getComponentConfingByType(((l=t.unref(u).state.checkedNode)==null?void 0:l.type)??""))==null?void 0:o.defaultSchema.label),1),F.value?(t.openBlock(),t.createElementBlock("div",oe,[t.createElementVNode("div",{title:"选择父节点",class:"epic-widget-action-item pointer-events-auto",onClick:G},[t.createVNode(t.unref(V),{name:"icon--epic--upward"})]),t.createElementVNode("div",{title:"复制",class:"epic-widget-action-item pointer-events-auto",onClick:J},[t.createVNode(t.unref(V),{name:"icon--epic--copy-all-outline-rounded"})]),t.createElementVNode("div",{title:"删除",class:"epic-widget-action-item pointer-events-auto",onClick:K},[t.createVNode(t.unref(V),{name:"icon--epic--delete-outline-rounded"})])])):t.createCommentVNode("",!0)],512)],2),[[t.vShow,S.value&&((s=t.unref(u).state.checkedNode)==null?void 0:s.id)!=="root"]]),t.withDirectives(t.createElementVNode("div",{ref_key:"hoverWidgetRef",ref:m,class:"epic-hover-widget absolute transition-all pointer-events-none z-998"},null,512),[[t.vShow,_.value&&((c=t.unref(u).state.checkedNode)==null?void 0:c.id)!==((a=t.unref(u).state.hoverNode)==null?void 0:a.id)]])],64)}}});module.exports=ne;