@mlightcad/ui-components 0.1.1 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +329 -0
- package/dist/ui-components.es.js +324 -323
- package/dist/ui-components.umd.js +2 -2
- package/package.json +3 -3
- package/src/components/MlToggleButton.vue +1 -1
- package/src/components/MlToolPalette.vue +89 -62
- package/src/components/types.ts +1 -1
- package/src/composables/useResize.ts +3 -3
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode(".ml-dropdown-icon[data-v-3fc33b5d],.ml-dropdown-icon[data-v-3fc33b5d]:hover{outline:none;border:none}.ml-status-bar[data-v-d6a59cf0]{position:fixed;bottom:0;left:0;right:0;height:30px;display:flex;justify-content:space-between;align-items:center;background-color:var(--el-fill-color);box-sizing:border-box;border:1px solid var(--el-border-color)}.ml-status-bar-left[data-v-d6a59cf0],.ml-status-bar-right[data-v-d6a59cf0]{display:flex;align-items:center}.ml-status-bar-left[data-v-d6a59cf0]>*{margin-right:10px}.ml-status-bar-right[data-v-d6a59cf0]>*{margin-left:10px}.ml-toggle-button[data-v-
|
|
2
|
-
(function(M,y){typeof exports=="object"&&typeof module<"u"?y(exports,require("element-plus/es"),require("element-plus/es/components/base/style/css"),require("element-plus/es/components/icon/style/css"),require("vue"),require("element-plus/es/components/dropdown/style/css"),require("element-plus/es/components/dropdown-menu/style/css"),require("element-plus/es/components/dropdown-item/style/css"),require("element-plus/es/components/tooltip/style/css"),require("element-plus/es/components/button/style/css"),require("element-plus/es/components/button-group/style/css"),require("element-plus/es/components/tabs/style/css"),require("element-plus/es/components/tab-pane/style/css")):typeof define=="function"&&define.amd?define(["exports","element-plus/es","element-plus/es/components/base/style/css","element-plus/es/components/icon/style/css","vue","element-plus/es/components/dropdown/style/css","element-plus/es/components/dropdown-menu/style/css","element-plus/es/components/dropdown-item/style/css","element-plus/es/components/tooltip/style/css","element-plus/es/components/button/style/css","element-plus/es/components/button-group/style/css","element-plus/es/components/tabs/style/css","element-plus/es/components/tab-pane/style/css"],y):(M=typeof globalThis<"u"?globalThis:M||self,y(M.UIComponents={},M.es,null,null,M.Vue))})(this,function(M,y,ve,we,e){"use strict";const A={xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 1024 1024"},H=[e.createElementVNode("path",{fill:"currentColor",d:"M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.59 30.59 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.59 30.59 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0"},null,-1)];function X(t,c){return e.openBlock(),e.createElementBlock("svg",A,[...H])}const V={render:X},q={xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 1024 1024"},U=[e.createElementVNode("path",{fill:"currentColor",d:"M340.864 149.312a30.59 30.59 0 0 0 0 42.752L652.736 512 340.864 831.872a30.59 30.59 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"},null,-1)];function F(t,c){return e.openBlock(),e.createElementBlock("svg",q,[...U])}const $={render:F},I=e.defineComponent({__name:"MlCollapse",props:e.mergeModels({size:{default:18},reverse:{type:Boolean,default:!1}},{modelValue:{default:!0},modelModifiers:{}}),emits:e.mergeModels(["change"],["update:modelValue"]),setup(t,{emit:c}){const n=t,s=e.useModel(t,"modelValue"),l=c,o=e.computed(()=>n.reverse?s.value?V:$:s.value?$:V),r=e.computed(()=>`${n.size}px`),h=()=>{l("change",s.value),s.value=!s.value};return(a,u)=>{const m=y.ElIcon;return e.openBlock(),e.createBlock(m,{size:r.value,onClick:h},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.value)))]),_:1},8,["size"])}}}),j=(t=>(e.pushScopeId("data-v-3fc33b5d"),t=t(),e.popScopeId(),t))(()=>e.createElementVNode("svg",{preserveAspectRatio:"xMidYMid meet",viewBox:"0 0 24 24",width:"1.2em",height:"1.2em","data-v-63d067da":""},[e.createElementVNode("path",{fill:"currentColor",d:"m18.5 10l4.4 11h-2.155l-1.201-3h-4.09l-1.199 3h-2.154L16.5 10h2zM10 2v2h6v2h-1.968a18.222 18.222 0 0 1-3.62 6.301a14.864 14.864 0 0 0 2.336 1.707l-.751 1.878A17.015 17.015 0 0 1 9 13.725a16.676 16.676 0 0 1-6.201 3.548l-.536-1.929a14.7 14.7 0 0 0 5.327-3.042A18.078 18.078 0 0 1 4.767 8h2.24A16.032 16.032 0 0 0 9 10.877a16.165 16.165 0 0 0 2.91-4.876L2 6V4h6V2h2zm7.5 10.885L16.253 16h2.492L17.5 12.885z"})],-1)),G=e.defineComponent({__name:"MlDropdown",props:{icon:{},items:{},current:{default:void 0}},emits:{click:null},setup(t,{emit:c}){const n=t,s=c,l=e.computed(()=>n.items.filter(r=>r.name!==n.current)),o=r=>{s("click",r)};return(r,h)=>{const a=y.ElIcon,u=y.ElDropdownItem,m=y.ElDropdownMenu,v=y.ElDropdown;return e.openBlock(),e.createBlock(v,{onCommand:o},{dropdown:e.withCtx(()=>[e.createVNode(m,null,{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value,d=>(e.openBlock(),e.createBlock(u,{key:d.text,command:d.name},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(d.text),1)]),_:2},1032,["command"]))),128))]),_:1})]),default:e.withCtx(()=>[e.createVNode(a,{size:"30",class:"ml-dropdown-icon"},{default:e.withCtx(()=>[j]),_:1})]),_:1})}}}),T=(t,c)=>{const n=t.__vccOpts||t;for(const[s,l]of c)n[s]=l;return n},z=T(G,[["__scopeId","data-v-3fc33b5d"]]),J='<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" width="1.2em" height="1.2em" data-v-63d067da=""><path fill="currentColor" d="m18.5 10l4.4 11h-2.155l-1.201-3h-4.09l-1.199 3h-2.154L16.5 10h2zM10 2v2h6v2h-1.968a18.222 18.222 0 0 1-3.62 6.301a14.864 14.864 0 0 0 2.336 1.707l-.751 1.878A17.015 17.015 0 0 1 9 13.725a16.676 16.676 0 0 1-6.201 3.548l-.536-1.929a14.7 14.7 0 0 0 5.327-3.042A18.078 18.078 0 0 1 4.767 8h2.24A16.032 16.032 0 0 0 9 10.877a16.165 16.165 0 0 0 2.91-4.876L2 6V4h6V2h2zm7.5 10.885L16.253 16h2.492L17.5 12.885z"></path></svg>',S=e.defineComponent({__name:"MlLanguage",props:{languages:{},current:{}},emits:{click:null},setup(t,{emit:c}){const n=t,s=c,l=o=>{s("click",o)};return(o,r)=>(e.openBlock(),e.createBlock(z,{icon:J,items:n.languages,current:n.current,onClick:l},null,8,["items","current"]))}}),K={},Q={class:"ml-status-bar"},Z={class:"ml-status-bar-left"},P={class:"ml-status-bar-right"};function R(t,c){return e.openBlock(),e.createElementBlock("div",Q,[e.createElementVNode("div",Z,[e.renderSlot(t.$slots,"left",{},void 0,!0)]),e.createElementVNode("div",P,[e.renderSlot(t.$slots,"right",{},void 0,!0)])])}const D=T(K,[["render",R],["__scopeId","data-v-d6a59cf0"]]),N=T(e.defineComponent({__name:"MlToggleButton",props:e.mergeModels({size:{default:30},data:{}},{modelValue:{default:!1},modelModifiers:{}}),emits:e.mergeModels(["click"],["update:modelValue"]),setup(t,{emit:c}){e.useCssVars(u=>({"0547f26d":r.value}));const n=t,s=e.useModel(t,"modelValue"),l=c,o=e.computed(()=>s.value?n.data.onIcon:n.data.offIcon),r=e.computed(()=>n.size+"px"),h=e.computed(()=>s.value?n.data.onTooltip:n.data.offTooltip),a=()=>{s.value=!s.value,l("click",s.value)};return(u,m)=>{const v=y.ElButton,d=y.ElTooltip;return e.openBlock(),e.createBlock(d,{content:h.value,"hide-after":0},{default:e.withCtx(()=>[e.createVNode(v,{class:"ml-toggle-button",icon:o.value,onClick:a},null,8,["icon"])]),_:1},8,["content"])}}}),[["__scopeId","data-v-b676e93b"]]),ee={key:0,class:"ml-toolbar-button-text"},W=T(e.defineComponent({__name:"MlToolBar",props:{items:{},size:{default:"large"},direction:{}},emits:{click:null},setup(t,{emit:c}){const n=t,s=c,l=e.computed(()=>n.direction==="vertical"?"ml-vertical-toolbar-button-group":"ml-horizontal-toolbar-button-group"),o=e.computed(()=>n.size==="small"?20:30),r=e.computed(()=>{switch(n.size){case"small":return 30;case"medium":return 50}return 70}),h=m=>m.description?m.description:m.text,a=e.computed(()=>n.size==="large"),u=m=>{s("click",m)};return(m,v)=>{const d=y.ElIcon,f=y.ElButton,p=y.ElTooltip,B=y.ElButtonGroup;return e.openBlock(),e.createBlock(B,{class:e.normalizeClass(l.value)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(m.items,(x,E)=>(e.openBlock(),e.createBlock(p,{key:x.text,content:h(x),"hide-after":0},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(f,{class:"ml-toolbar-button",style:e.normalizeStyle({width:r.value+"px",height:r.value+"px"}),key:E,onClick:C=>u(x.command)},{default:e.withCtx(()=>[e.createElementVNode("div",null,[e.createVNode(d,{size:o.value},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(x.icon)))]),_:2},1032,["size"]),a.value?(e.openBlock(),e.createElementBlock("div",ee,e.toDisplayString(x.text),1)):e.createCommentVNode("",!0)])]),_:2},1032,["style","onClick"]))]),_:2},1032,["content"]))),128))]),_:1},8,["class"])}}}),[["__scopeId","data-v-c6504e33"]]),O=20;function te(t,c,n){const s=e.ref(!1),l=a=>{if(n.value&&t.value){const u=t.value.getBoundingClientRect(),m=a.clientX<u.left||a.clientX>u.right||a.clientY<u.top||a.clientY>u.bottom;s.value=!m}},o=()=>{n.value&&(s.value=!0)},r=()=>{c.value&&c.value.addEventListener("mousemove",o),t.value&&t.value.addEventListener("mousemove",o)},h=()=>{c.value&&c.value.removeEventListener("mousemove",o),t.value&&t.value.removeEventListener("mousemove",o)};return e.onMounted(()=>{window.addEventListener("mousemove",l)}),e.onUnmounted(()=>{window.removeEventListener("mousemove",l)}),e.watch(n,a=>{a&&(s.value=!1)}),e.watch(t,a=>{a?r():h()}),{autoOpened:s}}function ne(t,c,n){const s=e.ref(!1),l=e.ref(null),o=e.ref(null),r={x:0,y:0},h=e.computed(()=>l.value==null||o.value==null?{x:0,y:0}:{x:l.value.x-o.value.x,y:l.value.y-o.value.y}),a=()=>{if(t.value){const p=t.value.getBoundingClientRect();o.value={x:p.left,y:p.top},l.value={x:p.left,y:p.top}}},u=()=>{t.value&&t.value.addEventListener("mousedown",v)},m=()=>{t.value&&t.value.removeEventListener("mousedown",v)},v=p=>{if(t.value!=null){if(c&&c.value){const B=c.value.getBoundingClientRect();if(p.clientX<B.left||p.clientX>B.right||p.clientY<B.top||p.clientY>B.bottom)return}s.value=!0,r.x=p.clientX,r.y=p.clientY,a(),document.addEventListener("mousemove",d),document.addEventListener("mouseup",f)}},d=p=>{if(s.value&&o.value&&l.value){const B=window.innerWidth,x=window.innerHeight,E=t.value,C=E.getBoundingClientRect(),k=C.width,i=C.height,g=o.value.x+(p.clientX-r.x),w=o.value.y+(p.clientY-r.y);l.value.x=Math.max(n?n.value.offset.value.left:0,g);const _=B-k;l.value.x=Math.min(n?_-n.value.offset.value.right:_,l.value.x),l.value.y=Math.max(n?n.value.offset.value.top:0,Math.min(w,x-i));const L=x-i;l.value.y=Math.min(n?L-n.value.offset.value.bottom:L,l.value.y),E.style.left=l.value.x+"px",E.style.top=l.value.y+"px"}},f=()=>{s.value=!1,document.removeEventListener("mousemove",d),document.removeEventListener("mouseup",f)};return e.onMounted(()=>{t.value&&(a(),u())}),e.onUnmounted(()=>{t.value&&t.value.removeEventListener("mousedown",v)}),e.watch(t,p=>{p?(a(),u()):m()}),{isDragging:s,movement:h,position:l}}function oe(t,c,n){const s=e.ref(!1),l=e.ref("left"),{isDragging:o,movement:r,position:h}=ne(t,c,n);return e.watch(r,a=>{if(a&&t.value){const m=t.value.getBoundingClientRect();m.left<=n.value.offset.value.left?(l.value="left",s.value=!0):window.innerWidth-m.left-m.width<=n.value.offset.value.right?(l.value="right",s.value=!0):s.value=!1}}),{docked:s,orientation:l,isDragging:o,movement:r,position:h}}function le(t,c,n,s){const l=e.ref(null),o=e.ref(null),r=e.ref(null),h=e.ref(null);return e.watch(t,(a,u)=>{l.value=u}),e.watch(c,(a,u)=>{o.value=u}),e.watch(n,(a,u)=>{r.value=u}),e.watch(s,(a,u)=>{h.value=u}),{lastLeft:l,lastTop:o,lastWidth:r,lastHeight:h}}function se(t,c,n,s){const l=e.ref(t.value.width),o=e.ref(t.value.left),r=e.computed(()=>t.value.width),h=e.computed(()=>t.value.left),a=e.computed(()=>n.value?n.value.x:null);return e.watch([r,h],([u,m])=>{(l.value==null||o.value==null||c.value)&&(l.value=u,o.value=m)}),e.watch(a,u=>{s.value&&n.value&&(o.value=u)}),{left:o,width:l}}function ae(t,c=e.ref({left:0,right:0,top:0,bottom:0})){const n=e.ref({});let s=!1;const l=()=>{if(!s&&t.value){const o=t.value.getBoundingClientRect();n.value.left=Math.max(o.left,c.value.left),n.value.top=Math.max(o.top,c.value.top),n.value.width=o.width,n.value.height=o.height,s=!0}};return e.onMounted(()=>{t.value&&l()}),e.watch(t,o=>{o&&l()}),{isIntialized:s,initialRect:n}}function ie(t,c=e.ref(!1),n=e.ref(!1),s=e.ref({left:0,right:0,top:0,bottom:0}),l={width:20,height:40}){const{initialRect:o}=ae(t,s),r=e.ref(!1);let h=0,a=0,u=0,m=0,v=0;const d=5,f=e.ref(null),p=k=>{if(!(!t.value||c.value))if(r.value){const i=k.clientX-m,g=k.clientY-v;if(f.value==="left"||f.value==="left-bottom-corner"){const w=a-i;w>l.width&&(o.value.width=w,o.value.left=h+i,t.value.style.left=o.value.left+"px",t.value.style.width=o.value.width+"px")}if(f.value==="right"||f.value==="right-bottom-corner"){const w=a+i;w>l.width&&(o.value.width=w,t.value.style.width=o.value.width+"px")}if(f.value==="bottom"||f.value==="left-bottom-corner"||f.value==="right-bottom-corner"){const w=u+g;w>l.height&&(o.value.height=w,t.value.style.height=o.value.height+"px")}}else{const i=t.value.getBoundingClientRect(),g=k.clientX-i.left,w=k.clientY-i.top,_=g<=d,L=g>=i.width-d,b=w>=i.height-d;_&&b&&n.value?(t.value.style.cursor="nesw-resize",f.value="left-bottom-corner"):L&&b&&!n.value?(t.value.style.cursor="nwse-resize",f.value="right-bottom-corner"):_&&n.value?(t.value.style.cursor="ew-resize",f.value="left"):L&&!n.value?(t.value.style.cursor="ew-resize",f.value="right"):b?(t.value.style.cursor="ns-resize",f.value="bottom"):(t.value.style.cursor="",f.value=null)}},B=k=>{if(!t.value||!f.value)return;const i=t.value.getBoundingClientRect();m=k.clientX,v=k.clientY,a=i.width,u=i.height,h=i.left,o.value.width=a,o.value.height=u,o.value.left=i.left,o.value.top=i.top,r.value=!0,document.addEventListener("mousemove",p),document.addEventListener("mouseup",x)},x=()=>{r.value=!1,f.value=null,t.value&&(t.value.style.cursor=""),document.removeEventListener("mousemove",p),document.removeEventListener("mouseup",x)},E=()=>{t.value&&(t.value.removeEventListener("mousedown",B),t.value.removeEventListener("mousemove",p)),document.removeEventListener("mouseup",x)},C=()=>{t.value&&(t.value.addEventListener("mousedown",B),t.value.addEventListener("mousemove",p))};return e.onMounted(()=>{t.value&&C()}),e.onBeforeUnmount(()=>{E()}),e.watch(t,k=>{k?C():E()}),{rect:o,isResizing:r}}function ce(t,c,n,s){const l=()=>{if(t.value){const a=t.value;c.value?a.style.transition="width 0.3s ease-out, left 0.3s ease-out":a.style.transition="width 0.3s ease"}},o=()=>{t.value&&(t.value.style.transition="")},r=()=>{t.value&&t.value.removeEventListener("transitionend",o)},h=()=>{t.value&&t.value.addEventListener("transitionend",o)};e.onMounted(()=>{t.value&&t.value.addEventListener("transitionend",o)}),e.onBeforeUnmount(()=>{t.value&&t.value.removeEventListener("transitionend",o)}),e.watch(t,a=>{a?h():r()}),e.watch(n,()=>{l()}),e.watch(s,()=>{l()})}function re(t,c,n,s){const l=e.ref(window.innerWidth),o=e.ref(window.innerHeight),{docked:r,orientation:h,movement:a,position:u,isDragging:m}=oe(t,c,s),v=e.computed(()=>h.value==="right"),{rect:d,isResizing:f}=ie(t,n,v,s.value.offset),{width:p,left:B}=se(d,f,u,m),{lastTop:x,lastHeight:E}=le(e.computed(()=>d.value.left),e.computed(()=>d.value.top),e.computed(()=>d.value.width),e.computed(()=>d.value.height)),{autoOpened:C}=te(t,c,n);ce(t,v,n,C);const k=_=>{if(t.value){const L=t.value.getBoundingClientRect(),b=L.left+_;if(v.value){d.value.left=b;const fe=window.innerWidth-L.width-L.left;L.left<=0&&fe>=0&&_<0&&(d.value.left=Math.max(0,b)),window.innerWidth-L.width<=0&&(d.value.left=window.innerWidth-L.width)}else L.left+L.width>=window.innerWidth&&_<0&&(d.value.left=Math.max(0,b))}},i=()=>{const _=window.innerWidth-l.value;l.value=window.innerWidth,o.value=window.innerHeight,k(_)};e.onMounted(()=>{window.addEventListener("resize",i)}),e.onUnmounted(()=>{window.removeEventListener("resize",i)});const g=_=>{_?(d.value.width=O,v.value&&B.value&&p.value&&(d.value.left=B.value+p.value-O)):(d.value.width=p.value,v.value&&B.value&&p.value&&(d.value.left=B.value))},w=()=>{r.value?(d.value.top=s.value.offset.value.top,d.value.height=window.innerHeight-s.value.offset.value.top-s.value.offset.value.bottom):(d.value.top=x.value,d.value.height=E.value)};return e.watch(r,()=>{w()}),e.watch(n,_=>{g(_)}),e.watch(C,_=>{n.value&&!m.value&&g(!_)}),e.watch(a,_=>{if(_&&t.value){const b=t.value.getBoundingClientRect();d.value.left=b.left,d.value.top=b.top}}),{rect:d,orientation:h,reversed:v}}const ue=(t=>(e.pushScopeId("data-v-43098ce9"),t=t(),e.popScopeId(),t))(()=>e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 1024 1024"},[e.createElementVNode("path",{fill:"currentColor",d:"M764.288 214.592L512 466.88L259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512L214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"})],-1)),de={class:"ml-tool-palette-title"},me={class:"ml-tool-palette-content"},pe={key:1,class:"ml-tool-palette-default-content"},Y=T(e.defineComponent({__name:"MlToolPalette",props:e.mergeModels({title:{default:""},tabs:{default:void 0},leftOffset:{default:0},rightOffset:{default:0},topOffset:{default:0},bottomOffset:{default:0}},{modelValue:{default:!0},modelModifiers:{},activeTab:{default:""},activeTabModifiers:{}}),emits:e.mergeModels(["close","tab-change","tab-close"],["update:modelValue","update:activeTab"]),setup(t,{emit:c}){const n=t,s=e.useModel(t,"modelValue"),l=e.useModel(t,"activeTab"),o=c,r=e.computed(()=>n.tabs&&n.tabs.length>0);e.onMounted(()=>{r.value&&!l.value&&n.tabs&&n.tabs.length>0&&(l.value=n.tabs[0].name)}),e.watch(()=>n.tabs,i=>{i&&i.length>0&&!l.value&&(l.value=i[0].name)},{immediate:!0});const h=e.ref(!1),a=e.ref(null),u=e.ref(null),m=e.computed(()=>({offset:e.ref({left:n.leftOffset,right:n.rightOffset,top:n.topOffset,bottom:n.bottomOffset})})),{rect:v,orientation:d,reversed:f}=re(u,a,h,m),p=e.computed(()=>({left:`${v.value.left}px`,top:`${v.value.top}px`,width:`${v.value.width}px`,height:`${v.value.height}px`})),B=e.computed(()=>f.value?{borderLeft:"1px solid var(--el-border-color)",borderRight:null}:{borderLeft:null,borderRight:"1px solid var(--el-border-color)"}),x=e.computed(()=>{if(r.value&&l.value&&n.tabs){const i=n.tabs.find(g=>g.name===l.value);if(i&&i.title)return i.title}return n.title}),E=()=>{s.value=!1;const i=u.value;o("close",{x:i?i.clientLeft:0,y:i?i.clientTop:0})},C=i=>{o("tab-change",i)},k=i=>{if(o("tab-close",i),l.value===i&&n.tabs){const g=n.tabs.findIndex(w=>w.name===i);if(g>=0){const w=n.tabs[g+1]||n.tabs[g-1];w&&(l.value=w.name)}}};return(i,g)=>{const w=y.ElIcon,_=y.ElTabPane,L=y.ElTabs;return s.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"toolPaletteElement",ref:u,style:e.normalizeStyle([p.value]),class:"ml-tool-palette-dialog"},[e.createElementVNode("div",{class:e.normalizeClass(["ml-tool-palette-dialog-layout",e.unref(d)])},[e.createElementVNode("div",{ref_key:"titleBarElement",ref:a,class:"ml-tool-palette-title-bar",style:e.normalizeStyle(B.value)},[e.createVNode(w,{size:18,class:"ml-tool-palette-dialog-icon",onClick:E},{default:e.withCtx(()=>[ue]),_:1}),e.createVNode(I,{class:"ml-tool-palette-dialog-icon",modelValue:h.value,"onUpdate:modelValue":g[0]||(g[0]=b=>h.value=b),reverse:e.unref(f)},null,8,["modelValue","reverse"]),e.createElementVNode("span",de,e.toDisplayString(x.value),1)],4),e.createElementVNode("div",me,[r.value?(e.openBlock(),e.createBlock(L,{key:0,modelValue:l.value,"onUpdate:modelValue":g[1]||(g[1]=b=>l.value=b),type:"border-card",class:"ml-tool-palette-tabs",onTabRemove:k,onTabChange:C},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.tabs,b=>(e.openBlock(),e.createBlock(_,{key:b.name,name:b.name,label:b.label},{label:e.withCtx(()=>[e.createElementVNode("span",null,e.toDisplayString(b.label),1)]),default:e.withCtx(()=>[e.renderSlot(i.$slots,`tab-${b.name}`,{},void 0,!0)]),_:2},1032,["name","label"]))),128))]),_:3},8,["modelValue"])):(e.openBlock(),e.createElementBlock("div",pe,[e.renderSlot(i.$slots,"default",{},void 0,!0)]))])],2)],4)):e.createCommentVNode("",!0)}}}),[["__scopeId","data-v-43098ce9"]]),he={install(t){t.component("MlCollapse",z),t.component("MlDropdown",z),t.component("MlLanguage",S),t.component("MlStatusBar",D),t.component("MlToggleButton",N),t.component("MlToolBar",W),t.component("MlToolPalette",Y)}};M.MlCollapse=I,M.MlDropdown=z,M.MlLanguage=S,M.MlStatusBar=D,M.MlToggleButton=N,M.MlToolBar=W,M.MlToolPalette=Y,M.default=he,Object.defineProperties(M,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode(".ml-dropdown-icon[data-v-3fc33b5d],.ml-dropdown-icon[data-v-3fc33b5d]:hover{outline:none;border:none}.ml-status-bar[data-v-d6a59cf0]{position:fixed;bottom:0;left:0;right:0;height:30px;display:flex;justify-content:space-between;align-items:center;background-color:var(--el-fill-color);box-sizing:border-box;border:1px solid var(--el-border-color)}.ml-status-bar-left[data-v-d6a59cf0],.ml-status-bar-right[data-v-d6a59cf0]{display:flex;align-items:center}.ml-status-bar-left[data-v-d6a59cf0]>*{margin-right:10px}.ml-status-bar-right[data-v-d6a59cf0]>*{margin-left:10px}.ml-toggle-button[data-v-5adaeb5a]{border:none;padding:0;cursor:pointer;width:var(--021a85e9);height:var(--021a85e9)}.ml-vertical-toolbar-button-group[data-v-c6504e33]{display:flex;flex-direction:column;background-color:var(--el-fill-color)}.ml-horizontal-toolbar-button-group[data-v-c6504e33]{display:flex;flex-direction:row;background-color:var(--el-fill-color)}.ml-toolbar-button[data-v-c6504e33]{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px}.ml-toolbar-button-text[data-v-c6504e33]{margin-left:0;margin-top:5px}.ml-tool-palette-dialog[data-v-cd1a3c67]{cursor:default;width:300px;min-width:var(--collapsed-width);position:fixed;box-sizing:border-box;border:1px solid var(--el-border-color)}.ml-tool-palette-disabled[data-v-cd1a3c67]{pointer-events:none;opacity:.6}.ml-tool-palette-dialog-icon[data-v-cd1a3c67]{border-bottom:1px solid var(--el-border-color);cursor:default}.ml-tool-palette-dialog-icon[data-v-cd1a3c67]:hover{color:var(--el-color-primary)}.ml-tool-palette-dialog-layout[data-v-cd1a3c67]{display:flex;height:100%}.ml-tool-palette-title-bar[data-v-cd1a3c67]{width:var(--collapsed-width);display:flex;justify-content:left;align-items:center;cursor:move;writing-mode:vertical-rl;text-align:center;background-color:var(--el-fill-color)}.ml-tool-palette-title[data-v-cd1a3c67]{pointer-events:none;margin-top:10px;margin-bottom:10px;font-size:small;-webkit-user-select:none;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ml-tool-palette-content[data-v-cd1a3c67]{-webkit-user-select:none;user-select:none;flex-grow:1;display:flex;flex-direction:column;background-color:var(--el-fill-color);overflow:hidden}.ml-tool-palette-tabs[data-v-cd1a3c67]{display:flex;flex-direction:column;height:100%;flex:1}.ml-tool-palette-tabs[data-v-cd1a3c67] .el-tabs{display:flex;flex-direction:column;height:100%}.ml-tool-palette-tabs[data-v-cd1a3c67] .el-tabs__header{margin:0;border-bottom:none;order:1;flex-shrink:0;position:relative}.ml-tool-palette-tabs[data-v-cd1a3c67] .el-tabs__content{flex:1;overflow:auto;padding:0;order:2;min-height:0;position:relative}.ml-tool-palette-tabs[data-v-cd1a3c67] .el-tab-pane{height:100%;overflow:auto}.ml-tool-palette-default-content[data-v-cd1a3c67]{flex:1;overflow:auto;display:flex;flex-direction:column}.ml-tool-palette-dialog-layout.left .ml-tool-palette-title-bar[data-v-cd1a3c67]{order:1}.ml-tool-palette-dialog-layout.left .ml-tool-palette-content[data-v-cd1a3c67],.ml-tool-palette-dialog-layout.right .ml-tool-palette-title-bar[data-v-cd1a3c67]{order:2}.ml-tool-palette-dialog-layout.right .ml-tool-palette-content[data-v-cd1a3c67]{order:1}")),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
|
|
2
|
+
(function(k,y){typeof exports=="object"&&typeof module<"u"?y(exports,require("element-plus/es"),require("element-plus/es/components/base/style/css"),require("element-plus/es/components/icon/style/css"),require("vue"),require("element-plus/es/components/dropdown/style/css"),require("element-plus/es/components/dropdown-menu/style/css"),require("element-plus/es/components/dropdown-item/style/css"),require("element-plus/es/components/tooltip/style/css"),require("element-plus/es/components/button/style/css"),require("element-plus/es/components/button-group/style/css"),require("element-plus/es/components/tabs/style/css"),require("element-plus/es/components/tab-pane/style/css")):typeof define=="function"&&define.amd?define(["exports","element-plus/es","element-plus/es/components/base/style/css","element-plus/es/components/icon/style/css","vue","element-plus/es/components/dropdown/style/css","element-plus/es/components/dropdown-menu/style/css","element-plus/es/components/dropdown-item/style/css","element-plus/es/components/tooltip/style/css","element-plus/es/components/button/style/css","element-plus/es/components/button-group/style/css","element-plus/es/components/tabs/style/css","element-plus/es/components/tab-pane/style/css"],y):(k=typeof globalThis<"u"?globalThis:k||self,y(k.UIComponents={},k.es,null,null,k.Vue))})(this,function(k,y,ve,we,e){"use strict";const A={xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 1024 1024"},H=[e.createElementVNode("path",{fill:"currentColor",d:"M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.59 30.59 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.59 30.59 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0"},null,-1)];function X(t,c){return e.openBlock(),e.createElementBlock("svg",A,[...H])}const V={render:X},q={xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 1024 1024"},U=[e.createElementVNode("path",{fill:"currentColor",d:"M340.864 149.312a30.59 30.59 0 0 0 0 42.752L652.736 512 340.864 831.872a30.59 30.59 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"},null,-1)];function F(t,c){return e.openBlock(),e.createElementBlock("svg",q,[...U])}const $={render:F},I=e.defineComponent({__name:"MlCollapse",props:e.mergeModels({size:{default:18},reverse:{type:Boolean,default:!1}},{modelValue:{default:!0},modelModifiers:{}}),emits:e.mergeModels(["change"],["update:modelValue"]),setup(t,{emit:c}){const n=t,s=e.useModel(t,"modelValue"),l=c,o=e.computed(()=>n.reverse?s.value?V:$:s.value?$:V),r=e.computed(()=>`${n.size}px`),h=()=>{l("change",s.value),s.value=!s.value};return(i,d)=>{const m=y.ElIcon;return e.openBlock(),e.createBlock(m,{size:r.value,onClick:h},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.value)))]),_:1},8,["size"])}}}),j=(t=>(e.pushScopeId("data-v-3fc33b5d"),t=t(),e.popScopeId(),t))(()=>e.createElementVNode("svg",{preserveAspectRatio:"xMidYMid meet",viewBox:"0 0 24 24",width:"1.2em",height:"1.2em","data-v-63d067da":""},[e.createElementVNode("path",{fill:"currentColor",d:"m18.5 10l4.4 11h-2.155l-1.201-3h-4.09l-1.199 3h-2.154L16.5 10h2zM10 2v2h6v2h-1.968a18.222 18.222 0 0 1-3.62 6.301a14.864 14.864 0 0 0 2.336 1.707l-.751 1.878A17.015 17.015 0 0 1 9 13.725a16.676 16.676 0 0 1-6.201 3.548l-.536-1.929a14.7 14.7 0 0 0 5.327-3.042A18.078 18.078 0 0 1 4.767 8h2.24A16.032 16.032 0 0 0 9 10.877a16.165 16.165 0 0 0 2.91-4.876L2 6V4h6V2h2zm7.5 10.885L16.253 16h2.492L17.5 12.885z"})],-1)),G=e.defineComponent({__name:"MlDropdown",props:{icon:{},items:{},current:{default:void 0}},emits:{click:null},setup(t,{emit:c}){const n=t,s=c,l=e.computed(()=>n.items.filter(r=>r.name!==n.current)),o=r=>{s("click",r)};return(r,h)=>{const i=y.ElIcon,d=y.ElDropdownItem,m=y.ElDropdownMenu,w=y.ElDropdown;return e.openBlock(),e.createBlock(w,{onCommand:o},{dropdown:e.withCtx(()=>[e.createVNode(m,null,{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value,u=>(e.openBlock(),e.createBlock(d,{key:u.text,command:u.name},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(u.text),1)]),_:2},1032,["command"]))),128))]),_:1})]),default:e.withCtx(()=>[e.createVNode(i,{size:"30",class:"ml-dropdown-icon"},{default:e.withCtx(()=>[j]),_:1})]),_:1})}}}),z=(t,c)=>{const n=t.__vccOpts||t;for(const[s,l]of c)n[s]=l;return n},T=z(G,[["__scopeId","data-v-3fc33b5d"]]),J='<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" width="1.2em" height="1.2em" data-v-63d067da=""><path fill="currentColor" d="m18.5 10l4.4 11h-2.155l-1.201-3h-4.09l-1.199 3h-2.154L16.5 10h2zM10 2v2h6v2h-1.968a18.222 18.222 0 0 1-3.62 6.301a14.864 14.864 0 0 0 2.336 1.707l-.751 1.878A17.015 17.015 0 0 1 9 13.725a16.676 16.676 0 0 1-6.201 3.548l-.536-1.929a14.7 14.7 0 0 0 5.327-3.042A18.078 18.078 0 0 1 4.767 8h2.24A16.032 16.032 0 0 0 9 10.877a16.165 16.165 0 0 0 2.91-4.876L2 6V4h6V2h2zm7.5 10.885L16.253 16h2.492L17.5 12.885z"></path></svg>',S=e.defineComponent({__name:"MlLanguage",props:{languages:{},current:{}},emits:{click:null},setup(t,{emit:c}){const n=t,s=c,l=o=>{s("click",o)};return(o,r)=>(e.openBlock(),e.createBlock(T,{icon:J,items:n.languages,current:n.current,onClick:l},null,8,["items","current"]))}}),K={},Q={class:"ml-status-bar"},Z={class:"ml-status-bar-left"},P={class:"ml-status-bar-right"};function R(t,c){return e.openBlock(),e.createElementBlock("div",Q,[e.createElementVNode("div",Z,[e.renderSlot(t.$slots,"left",{},void 0,!0)]),e.createElementVNode("div",P,[e.renderSlot(t.$slots,"right",{},void 0,!0)])])}const N=z(K,[["render",R],["__scopeId","data-v-d6a59cf0"]]),W=z(e.defineComponent({__name:"MlToggleButton",props:e.mergeModels({size:{default:30},data:{}},{modelValue:{default:!1},modelModifiers:{}}),emits:e.mergeModels(["click"],["update:modelValue"]),setup(t,{emit:c}){e.useCssVars(d=>({"021a85e9":r.value}));const n=t,s=e.useModel(t,"modelValue"),l=c,o=e.computed(()=>s.value?n.data.onIcon:n.data.offIcon),r=e.computed(()=>n.size+"px"),h=e.computed(()=>s.value?n.data.onTooltip:n.data.offTooltip),i=()=>{s.value=!s.value,l("click",s.value)};return(d,m)=>{const w=y.ElButton,u=y.ElTooltip;return e.openBlock(),e.createBlock(u,{content:h.value,"hide-after":0},{default:e.withCtx(()=>[e.createVNode(w,{class:"ml-toggle-button",icon:o.value,onClick:i},null,8,["icon"])]),_:1},8,["content"])}}}),[["__scopeId","data-v-5adaeb5a"]]),ee={key:0,class:"ml-toolbar-button-text"},D=z(e.defineComponent({__name:"MlToolBar",props:{items:{},size:{default:"large"},direction:{}},emits:{click:null},setup(t,{emit:c}){const n=t,s=c,l=e.computed(()=>n.direction==="vertical"?"ml-vertical-toolbar-button-group":"ml-horizontal-toolbar-button-group"),o=e.computed(()=>n.size==="small"?20:30),r=e.computed(()=>{switch(n.size){case"small":return 30;case"medium":return 50}return 70}),h=m=>m.description?m.description:m.text,i=e.computed(()=>n.size==="large"),d=m=>{s("click",m)};return(m,w)=>{const u=y.ElIcon,v=y.ElButton,p=y.ElTooltip,B=y.ElButtonGroup;return e.openBlock(),e.createBlock(B,{class:e.normalizeClass(l.value)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(m.items,(M,x)=>(e.openBlock(),e.createBlock(p,{key:M.text,content:h(M),"hide-after":0},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(v,{class:"ml-toolbar-button",style:e.normalizeStyle({width:r.value+"px",height:r.value+"px"}),key:x,onClick:C=>d(M.command)},{default:e.withCtx(()=>[e.createElementVNode("div",null,[e.createVNode(u,{size:o.value},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(M.icon)))]),_:2},1032,["size"]),i.value?(e.openBlock(),e.createElementBlock("div",ee,e.toDisplayString(M.text),1)):e.createCommentVNode("",!0)])]),_:2},1032,["style","onClick"]))]),_:2},1032,["content"]))),128))]),_:1},8,["class"])}}}),[["__scopeId","data-v-c6504e33"]]),O=20;function te(t,c,n){const s=e.ref(!1),l=i=>{if(n.value&&t.value){const d=t.value.getBoundingClientRect(),m=i.clientX<d.left||i.clientX>d.right||i.clientY<d.top||i.clientY>d.bottom;s.value=!m}},o=()=>{n.value&&(s.value=!0)},r=()=>{c.value&&c.value.addEventListener("mousemove",o),t.value&&t.value.addEventListener("mousemove",o)},h=()=>{c.value&&c.value.removeEventListener("mousemove",o),t.value&&t.value.removeEventListener("mousemove",o)};return e.onMounted(()=>{window.addEventListener("mousemove",l)}),e.onUnmounted(()=>{window.removeEventListener("mousemove",l)}),e.watch(n,i=>{i&&(s.value=!1)}),e.watch(t,i=>{i?r():h()}),{autoOpened:s}}function ne(t,c,n){const s=e.ref(!1),l=e.ref(null),o=e.ref(null),r={x:0,y:0},h=e.computed(()=>l.value==null||o.value==null?{x:0,y:0}:{x:l.value.x-o.value.x,y:l.value.y-o.value.y}),i=()=>{if(t.value){const p=t.value.getBoundingClientRect();o.value={x:p.left,y:p.top},l.value={x:p.left,y:p.top}}},d=()=>{t.value&&t.value.addEventListener("mousedown",w)},m=()=>{t.value&&t.value.removeEventListener("mousedown",w)},w=p=>{if(t.value!=null){if(c&&c.value){const B=c.value.getBoundingClientRect();if(p.clientX<B.left||p.clientX>B.right||p.clientY<B.top||p.clientY>B.bottom)return}s.value=!0,r.x=p.clientX,r.y=p.clientY,i(),document.addEventListener("mousemove",u),document.addEventListener("mouseup",v)}},u=p=>{if(s.value&&o.value&&l.value){const B=window.innerWidth,M=window.innerHeight,x=t.value,C=x.getBoundingClientRect(),E=C.width,a=C.height,f=o.value.x+(p.clientX-r.x),g=o.value.y+(p.clientY-r.y);l.value.x=Math.max(n?n.value.offset.value.left:0,f);const b=B-E;l.value.x=Math.min(n?b-n.value.offset.value.right:b,l.value.x),l.value.y=Math.max(n?n.value.offset.value.top:0,Math.min(g,M-a));const L=M-a;l.value.y=Math.min(n?L-n.value.offset.value.bottom:L,l.value.y),x.style.left=l.value.x+"px",x.style.top=l.value.y+"px"}},v=()=>{s.value=!1,document.removeEventListener("mousemove",u),document.removeEventListener("mouseup",v)};return e.onMounted(()=>{t.value&&(i(),d())}),e.onUnmounted(()=>{t.value&&t.value.removeEventListener("mousedown",w)}),e.watch(t,p=>{p?(i(),d()):m()}),{isDragging:s,movement:h,position:l}}function oe(t,c,n){const s=e.ref(!1),l=e.ref("left"),{isDragging:o,movement:r,position:h}=ne(t,c,n);return e.watch(r,i=>{if(i&&t.value){const m=t.value.getBoundingClientRect();m.left<=n.value.offset.value.left?(l.value="left",s.value=!0):window.innerWidth-m.left-m.width<=n.value.offset.value.right?(l.value="right",s.value=!0):s.value=!1}}),{docked:s,orientation:l,isDragging:o,movement:r,position:h}}function le(t,c,n,s){const l=e.ref(null),o=e.ref(null),r=e.ref(null),h=e.ref(null);return e.watch(t,(i,d)=>{l.value=d}),e.watch(c,(i,d)=>{o.value=d}),e.watch(n,(i,d)=>{r.value=d}),e.watch(s,(i,d)=>{h.value=d}),{lastLeft:l,lastTop:o,lastWidth:r,lastHeight:h}}function se(t,c,n,s){const l=e.ref(t.value.width),o=e.ref(t.value.left),r=e.computed(()=>t.value.width),h=e.computed(()=>t.value.left),i=e.computed(()=>n.value?n.value.x:null);return e.watch([r,h],([d,m])=>{(l.value==null||o.value==null||c.value)&&(l.value=d,o.value=m)}),e.watch(i,d=>{s.value&&n.value&&(o.value=d)}),{left:o,width:l}}function ae(t,c=e.ref({left:0,right:0,top:0,bottom:0})){const n=e.ref({});let s=!1;const l=()=>{if(!s&&t.value){const o=t.value.getBoundingClientRect();n.value.left=Math.max(o.left,c.value.left),n.value.top=Math.max(o.top,c.value.top),n.value.width=o.width,n.value.height=o.height,s=!0}};return e.onMounted(()=>{t.value&&l()}),e.watch(t,o=>{o&&l()}),{isIntialized:s,initialRect:n}}function ie(t,c=e.ref(!1),n=e.ref(!1),s=e.ref({left:0,right:0,top:0,bottom:0}),l={width:20,height:40}){const{initialRect:o}=ae(t,s),r=e.ref(!1);let h=0,i=0,d=0,m=0,w=0;const u=5,v=e.ref(null),p=E=>{if(!(!t.value||c.value))if(r.value){const a=E.clientX-m,f=E.clientY-w;if(v.value==="left"||v.value==="left-bottom-corner"){const g=i-a;g>l.width&&(o.value.width=g,o.value.left=h+a,t.value.style.left=o.value.left+"px",t.value.style.width=o.value.width+"px")}if(v.value==="right"||v.value==="right-bottom-corner"){const g=i+a;g>l.width&&(o.value.width=g,t.value.style.width=o.value.width+"px")}if(v.value==="bottom"||v.value==="left-bottom-corner"||v.value==="right-bottom-corner"){const g=d+f;g>l.height&&(o.value.height=g,t.value.style.height=o.value.height+"px")}}else{const a=t.value.getBoundingClientRect(),f=E.clientX-a.left,g=E.clientY-a.top,b=Math.abs(f)<=u,L=Math.abs(a.width-f)<=u,_=Math.abs(a.height-g)<=u;b&&_&&n.value?(t.value.style.cursor="nesw-resize",v.value="left-bottom-corner"):L&&_&&!n.value?(t.value.style.cursor="nwse-resize",v.value="right-bottom-corner"):b&&n.value?(t.value.style.cursor="ew-resize",v.value="left"):L&&!n.value?(t.value.style.cursor="ew-resize",v.value="right"):_?(t.value.style.cursor="ns-resize",v.value="bottom"):(t.value.style.cursor="",v.value=null)}},B=E=>{if(!t.value||!v.value)return;const a=t.value.getBoundingClientRect();m=E.clientX,w=E.clientY,i=a.width,d=a.height,h=a.left,o.value.width=i,o.value.height=d,o.value.left=a.left,o.value.top=a.top,r.value=!0,document.addEventListener("mousemove",p),document.addEventListener("mouseup",M)},M=()=>{r.value=!1,v.value=null,t.value&&(t.value.style.cursor=""),document.removeEventListener("mousemove",p),document.removeEventListener("mouseup",M)},x=()=>{t.value&&(t.value.removeEventListener("mousedown",B),t.value.removeEventListener("mousemove",p)),document.removeEventListener("mouseup",M)},C=()=>{t.value&&(t.value.addEventListener("mousedown",B),t.value.addEventListener("mousemove",p))};return e.onMounted(()=>{t.value&&C()}),e.onBeforeUnmount(()=>{x()}),e.watch(t,E=>{E?C():x()}),{rect:o,isResizing:r}}function ce(t,c,n,s){const l=()=>{if(t.value){const i=t.value;c.value?i.style.transition="width 0.3s ease-out, left 0.3s ease-out":i.style.transition="width 0.3s ease"}},o=()=>{t.value&&(t.value.style.transition="")},r=()=>{t.value&&t.value.removeEventListener("transitionend",o)},h=()=>{t.value&&t.value.addEventListener("transitionend",o)};e.onMounted(()=>{t.value&&t.value.addEventListener("transitionend",o)}),e.onBeforeUnmount(()=>{t.value&&t.value.removeEventListener("transitionend",o)}),e.watch(t,i=>{i?h():r()}),e.watch(n,()=>{l()}),e.watch(s,()=>{l()})}function re(t,c,n,s){const l=e.ref(window.innerWidth),o=e.ref(window.innerHeight),{docked:r,orientation:h,movement:i,position:d,isDragging:m}=oe(t,c,s),w=e.computed(()=>h.value==="right"),{rect:u,isResizing:v}=ie(t,n,w,s.value.offset),{width:p,left:B}=se(u,v,d,m),{lastTop:M,lastHeight:x}=le(e.computed(()=>u.value.left),e.computed(()=>u.value.top),e.computed(()=>u.value.width),e.computed(()=>u.value.height)),{autoOpened:C}=te(t,c,n);ce(t,w,n,C);const E=b=>{if(t.value){const L=t.value.getBoundingClientRect(),_=L.left+b;if(w.value){u.value.left=_;const fe=window.innerWidth-L.width-L.left;L.left<=0&&fe>=0&&b<0&&(u.value.left=Math.max(0,_)),window.innerWidth-L.width<=0&&(u.value.left=window.innerWidth-L.width)}else L.left+L.width>=window.innerWidth&&b<0&&(u.value.left=Math.max(0,_))}},a=()=>{const b=window.innerWidth-l.value;l.value=window.innerWidth,o.value=window.innerHeight,E(b)};e.onMounted(()=>{window.addEventListener("resize",a)}),e.onUnmounted(()=>{window.removeEventListener("resize",a)});const f=b=>{b?(u.value.width=O,w.value&&B.value&&p.value&&(u.value.left=B.value+p.value-O)):(u.value.width=p.value,w.value&&B.value&&p.value&&(u.value.left=B.value))},g=()=>{r.value?(u.value.top=s.value.offset.value.top,u.value.height=window.innerHeight-s.value.offset.value.top-s.value.offset.value.bottom):(u.value.top=M.value,u.value.height=x.value)};return e.watch(r,()=>{g()}),e.watch(n,b=>{f(b)}),e.watch(C,b=>{n.value&&!m.value&&f(!b)}),e.watch(i,b=>{if(b&&t.value){const _=t.value.getBoundingClientRect();u.value.left=_.left,u.value.top=_.top}}),{rect:u,orientation:h,reversed:w}}const de=(t=>(e.pushScopeId("data-v-cd1a3c67"),t=t(),e.popScopeId(),t))(()=>e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 1024 1024"},[e.createElementVNode("path",{fill:"currentColor",d:"M764.288 214.592L512 466.88L259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512L214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"})],-1)),ue={class:"ml-tool-palette-title"},me={class:"ml-tool-palette-content"},pe={key:1,class:"ml-tool-palette-default-content"},Y=z(e.defineComponent({__name:"MlToolPalette",props:e.mergeModels({title:{default:""},tabs:{default:void 0},leftOffset:{default:0},rightOffset:{default:0},topOffset:{default:0},bottomOffset:{default:0},disabled:{type:Boolean,default:!1}},{modelValue:{default:!0},modelModifiers:{},activeTab:{default:""},activeTabModifiers:{}}),emits:e.mergeModels(["close","tab-change","tab-close"],["update:modelValue","update:activeTab"]),setup(t,{emit:c}){const n=t,s=e.useModel(t,"modelValue"),l=e.useModel(t,"activeTab"),o=c,r=e.computed(()=>n.tabs&&n.tabs.length>0);e.onMounted(()=>{r.value&&!l.value&&n.tabs&&n.tabs.length>0&&(l.value=n.tabs[0].name)}),e.watch(()=>n.tabs,a=>{a&&a.length>0&&!l.value&&(l.value=a[0].name)},{immediate:!0});const h=e.ref(!1),i=e.ref(null),d=e.ref(null),m=e.computed(()=>({offset:e.ref({left:n.leftOffset,right:n.rightOffset,top:n.topOffset,bottom:n.bottomOffset})})),{rect:w,orientation:u,reversed:v}=re(d,i,h,m),p=e.computed(()=>({left:`${w.value.left}px`,top:`${w.value.top}px`,width:`${w.value.width}px`,height:`${w.value.height}px`})),B=e.computed(()=>v.value?{borderLeft:"1px solid var(--el-border-color)",borderRight:null}:{borderLeft:null,borderRight:"1px solid var(--el-border-color)"}),M=e.computed(()=>{if(r.value&&l.value&&n.tabs){const a=n.tabs.find(f=>f.name===l.value);if(a!=null&&a.title)return a.title}return n.title}),x=()=>{s.value=!1;const a=d.value;o("close",{x:a?a.clientLeft:0,y:a?a.clientTop:0})},C=a=>{o("tab-change",a)},E=a=>{if(o("tab-close",a),l.value===a&&n.tabs){const f=n.tabs.findIndex(g=>g.name===a);if(f>=0){const g=n.tabs[f+1]||n.tabs[f-1];g&&(l.value=g.name)}}};return(a,f)=>{const g=y.ElIcon,b=y.ElTabPane,L=y.ElTabs;return s.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"toolPaletteElement",ref:d,style:e.normalizeStyle([p.value]),class:e.normalizeClass(["ml-tool-palette-dialog",{"ml-tool-palette-disabled":a.disabled}])},[e.createElementVNode("div",{class:e.normalizeClass(["ml-tool-palette-dialog-layout",e.unref(u)])},[e.createElementVNode("div",{ref_key:"titleBarElement",ref:i,class:"ml-tool-palette-title-bar",style:e.normalizeStyle(B.value)},[e.createVNode(g,{size:18,class:"ml-tool-palette-dialog-icon",onClick:f[0]||(f[0]=_=>!a.disabled&&x())},{default:e.withCtx(()=>[de]),_:1}),e.createVNode(I,{class:"ml-tool-palette-dialog-icon",modelValue:h.value,"onUpdate:modelValue":f[1]||(f[1]=_=>h.value=_),reverse:e.unref(v),disabled:a.disabled},null,8,["modelValue","reverse","disabled"]),e.createElementVNode("span",ue,e.toDisplayString(M.value),1)],4),e.createElementVNode("div",me,[r.value?(e.openBlock(),e.createBlock(L,{key:0,modelValue:l.value,"onUpdate:modelValue":f[2]||(f[2]=_=>l.value=_),type:"border-card",class:"ml-tool-palette-tabs",onTabRemove:f[3]||(f[3]=_=>!a.disabled&&E),onTabChange:f[4]||(f[4]=_=>!a.disabled&&C)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.tabs,_=>(e.openBlock(),e.createBlock(b,{key:_.name,name:_.name,label:_.label},{label:e.withCtx(()=>[e.createElementVNode("span",null,e.toDisplayString(_.label),1)]),default:e.withCtx(()=>[e.renderSlot(a.$slots,`tab-${_.name}`,{},void 0,!0)]),_:2},1032,["name","label"]))),128))]),_:3},8,["modelValue"])):(e.openBlock(),e.createElementBlock("div",pe,[e.renderSlot(a.$slots,"default",{},void 0,!0)]))])],2)],6)):e.createCommentVNode("",!0)}}}),[["__scopeId","data-v-cd1a3c67"]]),he={install(t){t.component("MlCollapse",T),t.component("MlDropdown",T),t.component("MlLanguage",S),t.component("MlStatusBar",N),t.component("MlToggleButton",W),t.component("MlToolBar",D),t.component("MlToolPalette",Y)}};k.MlCollapse=I,k.MlDropdown=T,k.MlLanguage=S,k.MlStatusBar=N,k.MlToggleButton=W,k.MlToolBar=D,k.MlToolPalette=Y,k.default=he,Object.defineProperties(k,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mlightcad/ui-components",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"description": "One common UI component library based on Element Plus for web-based CAD",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "MLight Lee <mlight.lee@outlook.com>",
|
|
7
7
|
"repository": {
|
|
8
8
|
"type": "git",
|
|
9
|
-
"url": "https://
|
|
9
|
+
"url": "https://github.com/mlightcad/ui-components"
|
|
10
10
|
},
|
|
11
11
|
"keywords": [
|
|
12
12
|
"ui",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"rollup-plugin-peer-deps-external": "^2.2.4"
|
|
35
35
|
},
|
|
36
36
|
"peerDependencies": {
|
|
37
|
-
"element-plus": "^2.
|
|
37
|
+
"element-plus": "^2.12.0",
|
|
38
38
|
"vue": "^3.4.21"
|
|
39
39
|
},
|
|
40
40
|
"scripts": {
|
|
@@ -1,16 +1,25 @@
|
|
|
1
1
|
<template>
|
|
2
|
+
<!-- Main tool palette container -->
|
|
2
3
|
<div
|
|
3
4
|
ref="toolPaletteElement"
|
|
4
5
|
:style="[resizedStyle]"
|
|
5
6
|
class="ml-tool-palette-dialog"
|
|
6
7
|
v-if="visible"
|
|
8
|
+
:class="{ 'ml-tool-palette-disabled': disabled }"
|
|
7
9
|
>
|
|
10
|
+
<!-- Layout container for title bar and content -->
|
|
8
11
|
<div class="ml-tool-palette-dialog-layout" :class="orientation">
|
|
9
|
-
|
|
12
|
+
<!-- Title bar with close button, collapse toggle, and title -->
|
|
13
|
+
<div
|
|
14
|
+
ref="titleBarElement"
|
|
15
|
+
class="ml-tool-palette-title-bar"
|
|
16
|
+
:style="titleBarBorderStyle"
|
|
17
|
+
>
|
|
18
|
+
<!-- Close button (disabled when component is disabled) -->
|
|
10
19
|
<el-icon
|
|
11
20
|
:size="18"
|
|
12
21
|
class="ml-tool-palette-dialog-icon"
|
|
13
|
-
@click="handleClose"
|
|
22
|
+
@click="!disabled && handleClose()"
|
|
14
23
|
>
|
|
15
24
|
<svg
|
|
16
25
|
xmlns="http://www.w3.org/2000/svg"
|
|
@@ -24,21 +33,29 @@
|
|
|
24
33
|
/>
|
|
25
34
|
</svg>
|
|
26
35
|
</el-icon>
|
|
36
|
+
|
|
37
|
+
<!-- Collapse toggle (disabled when component is disabled) -->
|
|
27
38
|
<ml-collapse
|
|
28
39
|
class="ml-tool-palette-dialog-icon"
|
|
29
40
|
v-model="collapsed"
|
|
30
41
|
:reverse="reversed"
|
|
42
|
+
:disabled="disabled"
|
|
31
43
|
/>
|
|
44
|
+
|
|
45
|
+
<!-- Displayed title of the tool palette -->
|
|
32
46
|
<span class="ml-tool-palette-title">{{ displayedTitle }}</span>
|
|
33
47
|
</div>
|
|
48
|
+
|
|
49
|
+
<!-- Main content area -->
|
|
34
50
|
<div class="ml-tool-palette-content">
|
|
51
|
+
<!-- Tabs if provided -->
|
|
35
52
|
<el-tabs
|
|
36
53
|
v-if="hasTabs"
|
|
37
54
|
v-model="activeTab"
|
|
38
55
|
type="border-card"
|
|
39
56
|
class="ml-tool-palette-tabs"
|
|
40
|
-
@tab-remove="handleTabClose"
|
|
41
|
-
@tab-change="handleTabChange"
|
|
57
|
+
@tab-remove="!disabled && handleTabClose"
|
|
58
|
+
@tab-change="!disabled && handleTabChange"
|
|
42
59
|
>
|
|
43
60
|
<el-tab-pane
|
|
44
61
|
v-for="tab in props.tabs"
|
|
@@ -52,6 +69,8 @@
|
|
|
52
69
|
<slot :name="`tab-${tab.name}`" />
|
|
53
70
|
</el-tab-pane>
|
|
54
71
|
</el-tabs>
|
|
72
|
+
|
|
73
|
+
<!-- Default slot content if no tabs -->
|
|
55
74
|
<div v-else class="ml-tool-palette-default-content">
|
|
56
75
|
<slot></slot>
|
|
57
76
|
</div>
|
|
@@ -114,8 +133,11 @@ interface Props {
|
|
|
114
133
|
* The minimum distance from the bottom side of the tool palette to the bottom side of the window
|
|
115
134
|
*/
|
|
116
135
|
bottomOffset?: number
|
|
136
|
+
/** Disable all interactions for this component */
|
|
137
|
+
disabled?: boolean
|
|
117
138
|
}
|
|
118
139
|
|
|
140
|
+
/** Events emitted by the tool palette */
|
|
119
141
|
interface Events {
|
|
120
142
|
/**
|
|
121
143
|
* Trigger this event when the tool palette closed.
|
|
@@ -141,7 +163,8 @@ const props = withDefaults(defineProps<Props>(), {
|
|
|
141
163
|
leftOffset: 0,
|
|
142
164
|
rightOffset: 0,
|
|
143
165
|
topOffset: 0,
|
|
144
|
-
bottomOffset: 0
|
|
166
|
+
bottomOffset: 0,
|
|
167
|
+
disabled: false
|
|
145
168
|
})
|
|
146
169
|
// Flag to control whether the tool palette is visible
|
|
147
170
|
const visible = defineModel({ default: true })
|
|
@@ -156,17 +179,26 @@ const hasTabs = computed(() => {
|
|
|
156
179
|
|
|
157
180
|
// Initialize active tab to first tab if tabs are provided and no active tab is set
|
|
158
181
|
onMounted(() => {
|
|
159
|
-
if (
|
|
182
|
+
if (
|
|
183
|
+
hasTabs.value &&
|
|
184
|
+
!activeTab.value &&
|
|
185
|
+
props.tabs &&
|
|
186
|
+
props.tabs.length > 0
|
|
187
|
+
) {
|
|
160
188
|
activeTab.value = props.tabs[0].name
|
|
161
189
|
}
|
|
162
190
|
})
|
|
163
191
|
|
|
164
192
|
// Watch for tabs prop changes and initialize active tab if needed
|
|
165
|
-
watch(
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
193
|
+
watch(
|
|
194
|
+
() => props.tabs,
|
|
195
|
+
(newTabs: MlToolPaletteTab[] | undefined) => {
|
|
196
|
+
if (newTabs && newTabs.length > 0 && !activeTab.value) {
|
|
197
|
+
activeTab.value = newTabs[0].name
|
|
198
|
+
}
|
|
199
|
+
},
|
|
200
|
+
{ immediate: true }
|
|
201
|
+
)
|
|
170
202
|
|
|
171
203
|
// This varible is used in CSS
|
|
172
204
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
@@ -178,55 +210,49 @@ const titleBarElement = ref<HTMLElement | null>(null)
|
|
|
178
210
|
// Reference to tool palette HTML element
|
|
179
211
|
const toolPaletteElement = ref<HTMLElement | null>(null)
|
|
180
212
|
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
213
|
+
// Drag options
|
|
214
|
+
const dragOptions = computed<DragOptions>(() => ({
|
|
215
|
+
offset: ref({
|
|
216
|
+
left: props.leftOffset,
|
|
217
|
+
right: props.rightOffset,
|
|
218
|
+
top: props.topOffset,
|
|
219
|
+
bottom: props.bottomOffset
|
|
220
|
+
})
|
|
221
|
+
}))
|
|
222
|
+
|
|
223
|
+
// Compute bounding rect and orientation for layout
|
|
191
224
|
const {
|
|
192
225
|
rect: toolPaletteRect,
|
|
193
226
|
orientation,
|
|
194
227
|
reversed
|
|
195
228
|
} = useBoundingRect(toolPaletteElement, titleBarElement, collapsed, dragOptions)
|
|
196
229
|
|
|
197
|
-
// Resized style
|
|
198
|
-
const resizedStyle = computed(() => {
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
borderLeft: '1px solid var(--el-border-color)'
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
borderRight: '1px solid var(--el-border-color)'
|
|
214
|
-
}
|
|
215
|
-
})
|
|
216
|
-
|
|
217
|
-
// Compute the title to display in the title bar
|
|
230
|
+
// Resized style for container
|
|
231
|
+
const resizedStyle = computed(() => ({
|
|
232
|
+
left: `${toolPaletteRect.value.left}px`,
|
|
233
|
+
top: `${toolPaletteRect.value.top}px`,
|
|
234
|
+
width: `${toolPaletteRect.value.width}px`,
|
|
235
|
+
height: `${toolPaletteRect.value.height}px`
|
|
236
|
+
}))
|
|
237
|
+
|
|
238
|
+
// Border style for title bar based on reversed orientation
|
|
239
|
+
const titleBarBorderStyle = computed(() =>
|
|
240
|
+
reversed.value
|
|
241
|
+
? { borderLeft: '1px solid var(--el-border-color)', borderRight: null }
|
|
242
|
+
: { borderLeft: null, borderRight: '1px solid var(--el-border-color)' }
|
|
243
|
+
)
|
|
244
|
+
|
|
245
|
+
// Compute the displayed title (from active tab or component title)
|
|
218
246
|
const displayedTitle = computed(() => {
|
|
219
247
|
// If tabs are provided and there's an active tab, use the active tab's title
|
|
220
248
|
if (hasTabs.value && activeTab.value && props.tabs) {
|
|
221
249
|
const activeTabData = props.tabs.find(tab => tab.name === activeTab.value)
|
|
222
|
-
if (activeTabData
|
|
223
|
-
return activeTabData.title
|
|
224
|
-
}
|
|
250
|
+
if (activeTabData?.title) return activeTabData.title
|
|
225
251
|
}
|
|
226
|
-
// Otherwise, use the component's title prop
|
|
227
252
|
return props.title
|
|
228
253
|
})
|
|
229
254
|
|
|
255
|
+
// Close tool palette
|
|
230
256
|
const handleClose = () => {
|
|
231
257
|
visible.value = false
|
|
232
258
|
const element = toolPaletteElement.value
|
|
@@ -236,28 +262,25 @@ const handleClose = () => {
|
|
|
236
262
|
})
|
|
237
263
|
}
|
|
238
264
|
|
|
239
|
-
//
|
|
265
|
+
// Tab change handler
|
|
240
266
|
const handleTabChange = (tabName: string) => {
|
|
241
267
|
emit('tab-change', tabName)
|
|
242
268
|
}
|
|
243
269
|
|
|
244
|
-
//
|
|
270
|
+
// Tab close handler
|
|
245
271
|
const handleTabClose = (tabName: string) => {
|
|
246
272
|
emit('tab-close', tabName)
|
|
247
|
-
|
|
248
|
-
//
|
|
273
|
+
|
|
274
|
+
// Switch to another tab if active tab is closed
|
|
249
275
|
if (activeTab.value === tabName && props.tabs) {
|
|
250
276
|
const currentIndex = props.tabs.findIndex(t => t.name === tabName)
|
|
251
277
|
if (currentIndex >= 0) {
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
if (nextTab)
|
|
255
|
-
activeTab.value = nextTab.name
|
|
256
|
-
}
|
|
278
|
+
const nextTab =
|
|
279
|
+
props.tabs[currentIndex + 1] || props.tabs[currentIndex - 1]
|
|
280
|
+
if (nextTab) activeTab.value = nextTab.name
|
|
257
281
|
}
|
|
258
282
|
}
|
|
259
283
|
}
|
|
260
|
-
|
|
261
284
|
</script>
|
|
262
285
|
|
|
263
286
|
<style scoped>
|
|
@@ -270,9 +293,15 @@ const handleTabClose = (tabName: string) => {
|
|
|
270
293
|
border: 1px solid var(--el-border-color);
|
|
271
294
|
}
|
|
272
295
|
|
|
296
|
+
/* Disabled overlay to prevent interactions */
|
|
297
|
+
.ml-tool-palette-disabled {
|
|
298
|
+
pointer-events: none;
|
|
299
|
+
opacity: 0.6;
|
|
300
|
+
}
|
|
301
|
+
|
|
273
302
|
.ml-tool-palette-dialog-icon {
|
|
274
303
|
border-bottom: 1px solid var(--el-border-color);
|
|
275
|
-
cursor: default;
|
|
304
|
+
cursor: default;
|
|
276
305
|
}
|
|
277
306
|
|
|
278
307
|
.ml-tool-palette-dialog-icon:hover {
|
|
@@ -289,8 +318,8 @@ const handleTabClose = (tabName: string) => {
|
|
|
289
318
|
display: flex;
|
|
290
319
|
justify-content: left;
|
|
291
320
|
align-items: center;
|
|
292
|
-
cursor: move;
|
|
293
|
-
writing-mode: vertical-rl;
|
|
321
|
+
cursor: move;
|
|
322
|
+
writing-mode: vertical-rl;
|
|
294
323
|
text-align: center;
|
|
295
324
|
background-color: var(--el-fill-color);
|
|
296
325
|
}
|
|
@@ -361,16 +390,14 @@ const handleTabClose = (tabName: string) => {
|
|
|
361
390
|
.ml-tool-palette-dialog-layout.left .ml-tool-palette-title-bar {
|
|
362
391
|
order: 1;
|
|
363
392
|
}
|
|
364
|
-
|
|
365
393
|
.ml-tool-palette-dialog-layout.left .ml-tool-palette-content {
|
|
366
394
|
order: 2;
|
|
367
395
|
}
|
|
368
396
|
|
|
369
|
-
/*
|
|
397
|
+
/* Right orientation */
|
|
370
398
|
.ml-tool-palette-dialog-layout.right .ml-tool-palette-title-bar {
|
|
371
399
|
order: 2;
|
|
372
400
|
}
|
|
373
|
-
|
|
374
401
|
.ml-tool-palette-dialog-layout.right .ml-tool-palette-content {
|
|
375
402
|
order: 1;
|
|
376
403
|
}
|
package/src/components/types.ts
CHANGED
|
@@ -53,9 +53,9 @@ export function useResize(
|
|
|
53
53
|
const offsetY = event.clientY - rect.top
|
|
54
54
|
|
|
55
55
|
// Check if the mouse is near the borders or the corner
|
|
56
|
-
const nearLeft = offsetX <= resizeThreshold
|
|
57
|
-
const nearRight =
|
|
58
|
-
const nearBottom =
|
|
56
|
+
const nearLeft = Math.abs(offsetX) <= resizeThreshold
|
|
57
|
+
const nearRight = Math.abs(rect.width - offsetX) <= resizeThreshold
|
|
58
|
+
const nearBottom = Math.abs(rect.height - offsetY) <= resizeThreshold
|
|
59
59
|
|
|
60
60
|
// Set the resize cursor based on the position
|
|
61
61
|
if (nearLeft && nearBottom && reverse.value) {
|