drawui-react 0.2.2 → 0.3.0
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/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/dist/styles.css +276 -45
- package/package.json +2 -2
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
'use strict';var react=require('react'),drawuiCore=require('drawui-core'),jsxRuntime=require('react/jsx-runtime');function A(){let[s,e]=react.useState(drawuiCore.getLanguage());return react.useEffect(()=>drawuiCore.subscribeLanguage(()=>e(drawuiCore.getLanguage())),[]),s}var bt=[{type:"rectangle",icon:jsxRuntime.jsx("rect",{x:"3",y:"5",width:"18",height:"14",rx:"0"})},{type:"rounded-rectangle",icon:jsxRuntime.jsx("rect",{x:"3",y:"5",width:"18",height:"14",rx:"4"})},{type:"circle",icon:jsxRuntime.jsx("circle",{cx:"12",cy:"12",r:"8"})},{type:"ellipse",icon:jsxRuntime.jsx("ellipse",{cx:"12",cy:"12",rx:"9",ry:"6"})},{type:"diamond",icon:jsxRuntime.jsx("path",{d:"M12 3L21 12L12 21L3 12Z"})},{type:"triangle",icon:jsxRuntime.jsx("path",{d:"M12 4L20 19L4 19Z"})},{type:"hexagon",icon:jsxRuntime.jsx("path",{d:"M12 3L20 7.5V16.5L12 21L4 16.5V7.5Z"})},{type:"parallelogram",icon:jsxRuntime.jsx("path",{d:"M7 5L20 5L17 19L4 19Z"})},{type:"trapezoid",icon:jsxRuntime.jsx("path",{d:"M6 5L18 5L21 19L3 19Z"})},{type:"pentagon",icon:jsxRuntime.jsx("path",{d:"M12 3L21 10L17.5 21L6.5 21L3 10Z"})},{type:"octagon",icon:jsxRuntime.jsx("path",{d:"M8 3L16 3L21 8L21 16L16 21L8 21L3 16L3 8Z"})},{type:"star",icon:jsxRuntime.jsx("path",{d:"M12 2L14.5 8.5L21 9L16 13.5L17.5 20L12 16.5L6.5 20L8 13.5L3 9L9.5 8.5Z"})}],Ot=new Set(bt.map(s=>s.type)),_t=[{type:"arrow",icon:"M5 12h14M12 5l7 7-7 7",labelKey:"toolbar.arrow"},{type:"text",icon:"M4 7V4h16v3M9 20h6M12 4v16",labelKey:"toolbar.text"}],Ft=[{type:"pen",icon:"M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3Z",labelKey:"toolbar.pen"},{type:"highlighter",icon:"M14 3l7 7-3 3-7-7 3-3zM9 8L3 14v3h3l6-6",labelKey:"toolbar.highlighter"}],Vt=[{type:"eraser",icon:"M7 21l-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21M22 21H7M5 11l9 9",labelKey:"toolbar.eraser"}],Yt="M18 11V6.5a1.5 1.5 0 0 0-3 0v3.5a1.5 1.5 0 0 0-3 0V3.5a1.5 1.5 0 0 0-3 0v6.5a1.5 1.5 0 0 0-3 0V14a8 8 0 0 0 16 0v-3a1.5 1.5 0 0 0-3 0",et=react.memo(function({activeTool:e,onToolChange:t,showGrid:r,onToggleGrid:u,canUndo:p=false,canRedo:m=false,onUndo:a,onRedo:S,onExport:h}){let[f,l]=react.useState(false),[b,R]=react.useState(false),x=react.useRef(null),K=react.useRef(null);A();let I=[{format:"png",labelKey:"toolbar.export.png"},{format:"svg",labelKey:"toolbar.export.svg"},{format:"pdf",labelKey:"toolbar.export.pdf"}],z=()=>{x.current&&(clearTimeout(x.current),x.current=null),R(true);},N=()=>{x.current=window.setTimeout(()=>R(false),200);},he=()=>{K.current&&(clearTimeout(K.current),K.current=null),l(true);},n=()=>{K.current=window.setTimeout(()=>{l(false);},200);};return jsxRuntime.jsx("div",{className:"drawui-toolbar-container",children:jsxRuntime.jsxs("div",{className:"drawui-toolbar",children:[jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${e==="select"?"active":""}`,onClick:()=>t("select"),title:drawuiCore.t("toolbar.select"),children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("circle",{cx:"12",cy:"12",r:"3"})})}),jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${e==="hand"?"active":""}`,onClick:()=>t("hand"),title:drawuiCore.t("toolbar.hand"),children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("path",{d:Yt})})}),jsxRuntime.jsx("div",{className:"drawui-toolbar-divider"}),jsxRuntime.jsxs("div",{className:"drawui-toolbar-dropdown",onMouseEnter:he,onMouseLeave:n,children:[jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${Ot.has(e)?"active":""}`,onClick:()=>t("rounded-rectangle"),title:"\u5F62\u72B6",children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("rect",{x:"3",y:"5",width:"18",height:"14",rx:"4",ry:"4"})})}),f&&jsxRuntime.jsx("div",{className:"drawui-toolbar-shape-grid",children:bt.map(i=>jsxRuntime.jsx("button",{className:`drawui-toolbar-shape-item ${e===i.type?"active":""}`,onClick:()=>{t(i.type),l(false);},title:drawuiCore.t("tool."+i.type),children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:i.icon})},i.type))})]}),jsxRuntime.jsx("div",{className:"drawui-toolbar-divider"}),_t.map(i=>jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${e===i.type?"active":""}`,onClick:()=>t(i.type),title:drawuiCore.t(i.labelKey),children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("path",{d:i.icon})})},i.type)),jsxRuntime.jsx("div",{className:"drawui-toolbar-divider"}),Ft.map(i=>jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${e===i.type?"active":""}`,onClick:()=>t(i.type),title:drawuiCore.t(i.labelKey),children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("path",{d:i.icon})})},i.type)),jsxRuntime.jsx("div",{className:"drawui-toolbar-divider"}),Vt.map(i=>jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${e===i.type?"active":""}`,onClick:()=>t(i.type),title:drawuiCore.t(i.labelKey),children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("path",{d:i.icon})})},i.type)),jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${e==="uml-class"?"active":""}`,onClick:()=>t("uml-class"),title:drawuiCore.t("toolbar.uml-class"),children:jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("rect",{x:"3",y:"3",width:"18",height:"18",rx:"2"}),jsxRuntime.jsx("line",{x1:"3",y1:"9",x2:"21",y2:"9"}),jsxRuntime.jsx("line",{x1:"3",y1:"15",x2:"21",y2:"15"}),jsxRuntime.jsx("line",{x1:"7",y1:"6",x2:"17",y2:"6"}),jsxRuntime.jsx("line",{x1:"7",y1:"12",x2:"13",y2:"12"}),jsxRuntime.jsx("line",{x1:"7",y1:"18",x2:"11",y2:"18"})]})}),jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${e==="uml-interface"?"active":""}`,onClick:()=>t("uml-interface"),title:drawuiCore.t("toolbar.uml-interface"),children:jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("rect",{x:"3",y:"3",width:"18",height:"18",rx:"2"}),jsxRuntime.jsx("line",{x1:"3",y1:"9",x2:"21",y2:"9"}),jsxRuntime.jsx("line",{x1:"7",y1:"6",x2:"17",y2:"6"}),jsxRuntime.jsx("line",{x1:"7",y1:"12",x2:"13",y2:"12"})]})}),jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${e==="mind-map"?"active":""}`,onClick:()=>t("mind-map"),title:drawuiCore.t("toolbar.mind-map"),children:jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("circle",{cx:"5",cy:"12",r:"2.4"}),jsxRuntime.jsx("path",{d:"M7.4 12h3.6"}),jsxRuntime.jsx("path",{d:"M11 12c0-2.6 1.6-4.4 3.4-4.4"}),jsxRuntime.jsx("path",{d:"M11 12c0 2.6 1.6 4.4 3.4 4.4"}),jsxRuntime.jsx("circle",{cx:"17.4",cy:"7.6",r:"1.7"}),jsxRuntime.jsx("circle",{cx:"17.4",cy:"16.4",r:"1.7"}),jsxRuntime.jsx("circle",{cx:"15.6",cy:"12",r:"1.7"})]})}),jsxRuntime.jsx("div",{className:"drawui-toolbar-divider"}),jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${r?"active":""}`,onClick:u,title:drawuiCore.t("toolbar.grid"),children:jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("rect",{x:"3",y:"3",width:"7",height:"7",rx:"1"}),jsxRuntime.jsx("rect",{x:"14",y:"3",width:"7",height:"7",rx:"1"}),jsxRuntime.jsx("rect",{x:"14",y:"14",width:"7",height:"7",rx:"1"}),jsxRuntime.jsx("rect",{x:"3",y:"14",width:"7",height:"7",rx:"1"})]})}),jsxRuntime.jsx("div",{className:"drawui-toolbar-divider"}),jsxRuntime.jsx("button",{className:"drawui-toolbar-button",onClick:a,disabled:!p,style:p?void 0:{opacity:.4,cursor:"default"},title:drawuiCore.t("toolbar.undo"),children:jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("path",{d:"M3 7v6h6"}),jsxRuntime.jsx("path",{d:"M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"})]})}),jsxRuntime.jsx("button",{className:"drawui-toolbar-button",onClick:S,disabled:!m,style:m?void 0:{opacity:.4,cursor:"default"},title:drawuiCore.t("toolbar.redo"),children:jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("path",{d:"M21 7v6h-6"}),jsxRuntime.jsx("path",{d:"M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3L21 13"})]})}),jsxRuntime.jsx("div",{className:"drawui-toolbar-divider"}),jsxRuntime.jsxs("div",{className:"drawui-toolbar-dropdown",onMouseEnter:z,onMouseLeave:N,children:[jsxRuntime.jsx("button",{className:"drawui-toolbar-button",title:drawuiCore.t("toolbar.export"),children:jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("path",{d:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"}),jsxRuntime.jsx("polyline",{points:"7 10 12 15 17 10"}),jsxRuntime.jsx("line",{x1:"12",y1:"15",x2:"12",y2:"3"})]})}),b&&jsxRuntime.jsx("div",{className:"drawui-toolbar-shape-grid drawui-toolbar-export-grid",children:I.map(i=>jsxRuntime.jsx("button",{className:"drawui-toolbar-shape-item drawui-toolbar-export-item",onClick:()=>{h?.(i.format),R(false);},title:drawuiCore.t(i.labelKey),children:drawuiCore.t(i.labelKey)},i.format))})]})]})})});var tt=react.memo(function({onZoomIn:e,onZoomOut:t,onReset:r,zoomLevel:u=100}){return A(),jsxRuntime.jsxs("div",{className:"drawui-zoom-control",children:[jsxRuntime.jsx("button",{className:"drawui-zoom-button",onClick:e,title:drawuiCore.t("zoom.in"),children:jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("line",{x1:"12",y1:"5",x2:"12",y2:"19"}),jsxRuntime.jsx("line",{x1:"5",y1:"12",x2:"19",y2:"12"})]})}),jsxRuntime.jsxs("div",{className:"drawui-zoom-level",children:[u,"%"]}),jsxRuntime.jsx("button",{className:"drawui-zoom-button",onClick:t,title:"\u7F29\u5C0F",children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("line",{x1:"12",y1:"5",x2:"12",y2:"19"})})}),jsxRuntime.jsx("button",{className:"drawui-zoom-button",onClick:r,title:drawuiCore.t("zoom.reset"),children:jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("path",{d:"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"}),jsxRuntime.jsx("path",{d:"M3 3v5h5"})]})})]})});var wt=["#1f2937","#ef4444","#f97316","#facc15","#22c55e","#3b82f6","#8b5cf6","#ec4899","#9ca3af","#ffffff"],vt=[{key:"stroke",labelKey:"style.stroke",hasTransparent:false},{key:"fill",labelKey:"style.fill",hasTransparent:true},{key:"text",labelKey:"style.text",hasTransparent:false},{key:"highlight",labelKey:"style.highlight",hasTransparent:true}],jt=[{type:"straight",labelKey:"style.connection.straight",icon:"\u2501"},{type:"polyline",labelKey:"style.connection.polyline",icon:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",width:"16",height:"16",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("path",{d:"M4 8 C 12 8, 12 16, 20 16"})})},{type:"orthogonal",labelKey:"style.connection.orthogonal",icon:"\u2517"},{type:"curve",labelKey:"style.connection.curve",icon:"\u223F"}],qt=[{type:"none",labelKey:"style.arrowhead.none",icon:"\u2501"},{type:"end",labelKey:"style.arrowhead.end",icon:"\u2192"},{type:"start",labelKey:"style.arrowhead.start",icon:"\u2190"},{type:"both",labelKey:"style.arrowhead.both",icon:"\u21C4"},{type:"inheritance",labelKey:"style.arrowhead.inheritance",icon:"\u2501\u2501\u25B7"},{type:"composition",labelKey:"style.arrowhead.composition",icon:"\u25C6\u2501\u2501"},{type:"aggregation",labelKey:"style.arrowhead.aggregation",icon:"\u25C7\u2501\u2501"}],kt=react.memo(function({editor:e,selectedCount:t,hasLineSelection:r,currentConnectionType:u,currentArrowHead:p,currentDashed:m}){if(A(),!e||t===0)return null;let a=(l,b)=>{switch(l){case "stroke":e.updateSelectedShapesStyle({strokeColor:b});break;case "fill":e.updateSelectedShapesStyle({fillColor:b});break;case "text":e.updateSelectedShapesText({textColor:b});break;case "highlight":e.updateSelectedShapesText({highlightColor:b});break}},S=l=>{e.updateConnectionType(l);},h=l=>{e.updateArrowHeadType(l);},f=l=>{e.updateArrowDashed(l);};return jsxRuntime.jsxs("div",{className:"drawui-style-panel",children:[jsxRuntime.jsx("div",{className:"drawui-style-col",children:vt.slice(0,2).map(l=>jsxRuntime.jsxs("div",{className:"drawui-style-group",children:[jsxRuntime.jsx("div",{className:"drawui-style-group-label",children:drawuiCore.t(l.labelKey)}),jsxRuntime.jsxs("div",{className:"drawui-color-row",children:[l.hasTransparent&&jsxRuntime.jsx("button",{className:"drawui-color-swatch drawui-color-swatch-transparent",onClick:()=>a(l.key,"transparent"),title:drawuiCore.t("style.none")}),wt.map(b=>jsxRuntime.jsx("button",{className:"drawui-color-swatch",style:{background:b},onClick:()=>a(l.key,b),title:b},`${l.key}-${b}`))]})]},l.key))}),jsxRuntime.jsx("div",{className:"drawui-style-divider"}),jsxRuntime.jsx("div",{className:"drawui-style-col",children:vt.slice(2).map(l=>jsxRuntime.jsxs("div",{className:"drawui-style-group",children:[jsxRuntime.jsx("div",{className:"drawui-style-group-label",children:drawuiCore.t(l.labelKey)}),jsxRuntime.jsxs("div",{className:"drawui-color-row",children:[l.hasTransparent&&jsxRuntime.jsx("button",{className:"drawui-color-swatch drawui-color-swatch-transparent",onClick:()=>a(l.key,"transparent"),title:drawuiCore.t("style.none")}),wt.map(b=>jsxRuntime.jsx("button",{className:"drawui-color-swatch",style:{background:b},onClick:()=>a(l.key,b),title:b},`${l.key}-${b}`))]})]},l.key))}),r&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:"drawui-style-divider"}),jsxRuntime.jsxs("div",{className:"drawui-style-col",children:[jsxRuntime.jsxs("div",{className:"drawui-style-group",children:[jsxRuntime.jsx("div",{className:"drawui-style-group-label",children:drawuiCore.t("style.connection")}),jsxRuntime.jsx("div",{className:"drawui-connection-row",children:jt.map(l=>jsxRuntime.jsxs("button",{className:`drawui-connection-btn${u===l.type?" active":""}`,onClick:()=>S(l.type),title:drawuiCore.t(l.labelKey),children:[jsxRuntime.jsx("span",{className:"drawui-connection-icon",children:l.icon}),jsxRuntime.jsx("span",{className:"drawui-connection-label",children:drawuiCore.t(l.labelKey)})]},l.type))})]}),jsxRuntime.jsxs("div",{className:"drawui-style-group",children:[jsxRuntime.jsx("div",{className:"drawui-style-group-label",children:drawuiCore.t("style.arrow")}),jsxRuntime.jsx("div",{className:"drawui-connection-row",children:qt.map(l=>jsxRuntime.jsxs("button",{className:`drawui-connection-btn${p===l.type?" active":""}`,onClick:()=>h(l.type),title:drawuiCore.t(l.labelKey),children:[jsxRuntime.jsx("span",{className:"drawui-connection-icon",children:l.icon}),jsxRuntime.jsx("span",{className:"drawui-connection-label",children:drawuiCore.t(l.labelKey)})]},l.type))})]}),jsxRuntime.jsxs("div",{className:"drawui-style-group",children:[jsxRuntime.jsx("div",{className:"drawui-style-group-label",children:drawuiCore.t("style.dashed")}),jsxRuntime.jsxs("div",{className:"drawui-connection-row",children:[jsxRuntime.jsxs("button",{className:`drawui-connection-btn${m?"":" active"}`,onClick:()=>f(false),title:drawuiCore.t("style.solid"),children:[jsxRuntime.jsx("span",{className:"drawui-connection-icon",children:"\u2501"}),jsxRuntime.jsx("span",{className:"drawui-connection-label",children:drawuiCore.t("style.solid")})]}),jsxRuntime.jsxs("button",{className:`drawui-connection-btn${m?" active":""}`,onClick:()=>f(true),title:drawuiCore.t("style.dashed"),children:[jsxRuntime.jsx("span",{className:"drawui-connection-icon",children:"\u2504"}),jsxRuntime.jsx("span",{className:"drawui-connection-label",children:drawuiCore.t("style.dashed")})]})]})]})]})]})]})});var rt=14,Ct=20,an=["#1f2937","#ef4444","#f97316","#facc15","#22c55e","#3b82f6","#8b5cf6","#ec4899","#9ca3af"],sn=[12,14,16,18,20,24];function Lt(s,e,t){let r=s,u=t,p=r.charAt(0);if(r.length>1&&(p==="+"||p==="-"||p==="#"||p==="~")&&r.charAt(1)===" "&&(u=p,r=r.slice(2)),r=r.replace(/^\s+|\s+$/g,""),e==="attribute"){let l=r.indexOf(":");return l===-1?{visibility:u,name:r,type:"",params:"",returnType:""}:{visibility:u,name:r.slice(0,l).replace(/^\s+|\s+$/g,""),type:r.slice(l+1).replace(/^\s+|\s+$/g,""),params:"",returnType:""}}let m=r.indexOf("(");if(m===-1){let l=r.lastIndexOf(":");return l===-1?{visibility:u,name:r,type:"",params:"",returnType:""}:{visibility:u,name:r.slice(0,l).replace(/^\s+|\s+$/g,""),type:"",params:"",returnType:r.slice(l+1).replace(/^\s+|\s+$/g,"")}}let a=r.slice(0,m).replace(/^\s+|\s+$/g,""),S=r.indexOf(")",m);if(S===-1)return {visibility:u,name:a,type:"",params:r.slice(m+1).replace(/^\s+|\s+$/g,""),returnType:""};let h=r.slice(m+1,S).replace(/^\s+|\s+$/g,""),f=r.slice(S+1).replace(/^\s+|\s+$/g,"");return f.startsWith(":")&&(f=f.slice(1).replace(/^\s+|\s+$/g,"")),{visibility:u,name:a,type:"",params:h,returnType:f}}function ln(s,e){let t=`${e.visibility} `;return s==="attribute"?`${t}${e.name}: ${e.type??""}`:`${t}${e.name}(${e.params??""}): ${e.returnType??""}`}var Nt=react.memo(function({editor:e,umlClass:t,editing:r}){let[,u]=react.useState(0);A(),react.useEffect(()=>{if(!e)return;let d=e.subscribe(()=>u(M=>M+1));return ()=>{d();}},[e]);let[p,m]=react.useState(null),[a,S]=react.useState(false),h=react.useRef(null),f=react.useRef(null),l=react.useCallback((d,M)=>{h.current&&(clearTimeout(h.current),h.current=null),m({section:d,rowId:M}),S(false);},[]),b=react.useCallback(()=>{h.current&&clearTimeout(h.current),h.current=window.setTimeout(()=>{m(null),S(false);},150);},[]);if(!e||!t||r!==t.id)return null;let R=e.getCamera(),{id:x,x:K,y:I,width:z,height:N,className:he,methods:n}=t,i=t.type==="uml-interface",c=i?[]:t.attributes,_=z/2,ee=N/2,te=drawuiCore.UML_HEADER_HEIGHT,Y=drawuiCore.UML_LINE_HEIGHT,be=drawuiCore.UML_PADDING_X,ie=drawuiCore.UML_PADDING_Y,ne=i?0:c.length>0?c.length*Y+ie*2:ie*2,g=R.zoom,ye=(z-be*2)*g,Le=4*g,Te=R.pageToScreen({x:K-_+be,y:I}),Se=R.pageToScreen({x:K,y:I-ee+te/2}),P=d=>R.pageToScreen({x:K,y:d}).y,fe=Y*g,le=d=>I+(-ee+te+ie+Y/2+d*Y),Ne=d=>I+(-ee+te+ne+ie+Y/2+d*Y),Ee=I+(-ee+te+ne),xe=I+ee,Me={background:"#ffffff",borderWidth:1,borderStyle:"solid",borderColor:"transparent",outline:"none",padding:0,fontFamily:"sans-serif",boxSizing:"border-box"},Re=(d,M)=>{let C=c.find($=>$.id===d);if(!C)return;let L=Lt(M,"attribute",C.visibility);e.updateUmlClass(x,{attributes:c.map($=>$.id===d?{...$,...L}:$)});},E=(d,M)=>{let C=n.find(W=>W.id===d);if(!C)return;let L=Lt(M,"method",C.visibility),$=n.map(W=>W.id===d?{...W,...L}:W);i?e.updateUmlInterface(x,{methods:$}):e.updateUmlClass(x,{methods:$});},w=(d,M,C)=>{f.current={section:d,from:M},C.dataTransfer.effectAllowed="move",C.dataTransfer.setData("text/plain",`${d}:${M}`);},oe=d=>{d.preventDefault(),d.dataTransfer.dropEffect="move";},G=(d,M,C)=>{C.preventDefault();let L=f.current;!L||L.section!==d||(d==="attribute"?e.reorderUmlAttribute(x,L.from,M):e.reorderUmlMethod(x,L.from,M),f.current=null);},F=(d,M,C,L)=>{let $=P(L),W=p?.section===d&&p.rowId===C.id,Ie=(C.fontSize||drawuiCore.UML_FONT_SIZE)*g,Ke=C.textColor||"#1f2937",Pe={position:"absolute",left:Te.x-rt*g-Le,top:$-fe/2,width:rt*g+Le+ye+Ct*g,height:fe,display:"flex",alignItems:"center",gap:2,pointerEvents:"none",zIndex:53},y={...Me,width:ye,height:fe-2,fontSize:Ie,color:Ke,textDecoration:C.strikethrough?"line-through":"none",pointerEvents:"auto",...W?{borderColor:"var(--dw-primary)"}:{}},V={width:rt*g,height:fe-2,cursor:"grab",color:"#9ca3af",display:"flex",alignItems:"center",justifyContent:"center",userSelect:"none",fontSize:12*g,lineHeight:1,opacity:W?1:.55,pointerEvents:"auto"},se={width:Ct*g,height:fe-6,border:"none",background:"transparent",color:"#9ca3af",cursor:"pointer",borderRadius:3,fontSize:14*g,opacity:W?1:.35,pointerEvents:"auto"};return jsxRuntime.jsxs("div",{style:Pe,onDragOver:oe,onDrop:B=>G(d,M,B),children:[jsxRuntime.jsx("span",{style:V,draggable:true,onDragStart:B=>w(d,M,B),title:drawuiCore.t("uml.drag"),children:"\u22EE\u22EE"}),jsxRuntime.jsx("input",{style:y,value:ln(d,C),onChange:B=>d==="attribute"?Re(C.id,B.target.value):E(C.id,B.target.value),onFocus:()=>l(d,C.id),onBlur:b,spellCheck:false}),jsxRuntime.jsx("button",{style:se,onMouseDown:B=>B.preventDefault(),onClick:()=>{d==="attribute"?e.removeUmlAttribute(x,C.id):e.removeUmlMethod(x,C.id);},title:drawuiCore.t("uml.delete"),children:"\xD7"})]},C.id)},ae=(d,M,C)=>{let L=P(M),$=d==="attribute";return jsxRuntime.jsxs("button",{onMouseDown:W=>W.preventDefault(),onClick:()=>$?e.addUmlAttribute(x):e.addUmlMethod(x),className:"drawui-uml-add-row",style:{position:"absolute",left:Te.x,top:L-9*g,height:18*g,padding:`0 ${6*g}px`,fontSize:11*g,lineHeight:1,border:"1px dashed #cbd5e1",background:"rgba(255,255,255,0.85)",color:"#64748b",borderRadius:3,cursor:"pointer",pointerEvents:"auto",display:"flex",alignItems:"center",gap:3,whiteSpace:"nowrap",zIndex:53},title:C,children:[jsxRuntime.jsx("span",{style:{fontSize:13*g,lineHeight:1},children:"+"}),jsxRuntime.jsx("span",{children:C})]},`add-${d}`)},Ae=()=>{if(!p||p.section==="className")return null;let d=p.section,M=p.rowId,L=(d==="attribute"?c:n).find(k=>k.id===M);if(!L)return null;let $=224*g,W=30*g,Ie=R.pageToScreen({x:K,y:I}).x,Ke=R.pageToScreen({x:K,y:I-ee}).y,Pe=20*g,y=Ke-W-Pe,V=Ie-$/2,se=y+W,B=L.textColor||"#1f2937",D=L.fontSize||drawuiCore.UML_FONT_SIZE,ce=!!L.strikethrough;return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{style:{position:"absolute",left:Ie-.5,top:se,width:1,height:Pe,background:"#d1d5db",pointerEvents:"none",zIndex:59}}),jsxRuntime.jsxs("div",{className:"drawui-uml-toolbar",style:{position:"absolute",left:V,top:y,width:$,height:W,background:"#ffffff",border:"1px solid #e5e7eb",borderRadius:6,boxShadow:"0 4px 12px rgba(0, 0, 0, 0.1)",display:"flex",alignItems:"center",gap:4*g,padding:`0 ${6*g}px`,pointerEvents:"auto",zIndex:60,fontSize:12*g},onMouseDown:k=>k.preventDefault(),children:[jsxRuntime.jsxs("div",{style:{position:"relative"},children:[jsxRuntime.jsxs("button",{onClick:()=>S(k=>!k),className:"drawui-uml-toolbar-btn",title:drawuiCore.t("uml.textColor"),style:{border:"none",background:"transparent",cursor:"pointer",padding:2,display:"flex",alignItems:"center",borderRadius:3},children:[jsxRuntime.jsx("span",{style:{fontWeight:700,color:B,fontSize:13*g,textDecoration:ce?"line-through":"none"},children:"A"}),jsxRuntime.jsx("span",{style:{width:10*g,height:2*g,background:B,marginLeft:3,borderRadius:1}})]}),a&&jsxRuntime.jsxs("div",{style:{position:"absolute",top:"100%",left:0,marginTop:4,background:"#ffffff",border:"1px solid #e5e7eb",borderRadius:4,padding:4,display:"flex",gap:2,boxShadow:"0 2px 8px rgba(0, 0, 0, 0.1)",zIndex:61},children:[jsxRuntime.jsx("button",{onClick:()=>{e.updateUmlRowStyle(x,d,L.id,{textColor:null}),S(false);},style:{width:14,height:14,border:"1px solid #e5e7eb",background:"transparent",cursor:"pointer",borderRadius:2},title:drawuiCore.t("uml.defaultColor")}),an.map(k=>jsxRuntime.jsx("button",{onClick:()=>{e.updateUmlRowStyle(x,d,L.id,{textColor:k}),S(false);},style:{width:14,height:14,border:"none",background:k,cursor:"pointer",borderRadius:2},title:k},k))]})]}),jsxRuntime.jsx("select",{value:D,onChange:k=>e.updateUmlRowStyle(x,d,L.id,{fontSize:Number(k.target.value)}),style:{border:"1px solid #e5e7eb",borderRadius:3,padding:`0 ${2*g}px`,fontSize:12*g,height:20*g,background:"#ffffff"},title:drawuiCore.t("uml.fontSize"),children:sn.map(k=>jsxRuntime.jsx("option",{value:k,children:k},k))}),jsxRuntime.jsx("button",{onClick:()=>e.updateUmlRowStyle(x,d,L.id,{strikethrough:!ce}),className:"drawui-uml-toolbar-btn",title:drawuiCore.t("uml.strikethrough"),style:{border:"none",background:ce?"var(--dw-primary-weak)":"transparent",cursor:"pointer",padding:2,borderRadius:3},children:jsxRuntime.jsx("span",{style:{fontWeight:700,fontSize:13*g,textDecoration:"line-through"},children:"A"})}),jsxRuntime.jsx("button",{onClick:()=>{d==="attribute"?e.removeUmlAttribute(x,L.id):e.removeUmlMethod(x,L.id),m(null);},className:"drawui-uml-toolbar-btn",title:drawuiCore.t("uml.delete"),style:{border:"none",background:"transparent",cursor:"pointer",color:"#ef4444",padding:2,marginLeft:"auto",borderRadius:3},children:jsxRuntime.jsxs("svg",{width:14*g,height:14*g,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("polyline",{points:"3 6 5 6 21 6"}),jsxRuntime.jsx("path",{d:"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"}),jsxRuntime.jsx("path",{d:"M10 11v6"}),jsxRuntime.jsx("path",{d:"M14 11v6"}),jsxRuntime.jsx("path",{d:"M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"})]})})]})]})},Ue=R.pageToScreen({x:K-_,y:I}).x,je=R.pageToScreen({x:K,y:I-ee}).y,qe=z*g,Je=N*g;return jsxRuntime.jsxs("div",{style:{position:"absolute",inset:0,pointerEvents:"none",zIndex:50},children:[jsxRuntime.jsx("div",{style:{position:"absolute",left:Ue+1,top:je+1,width:Math.max(0,qe-2),height:Math.max(0,Je-2),background:"#ffffff",pointerEvents:"none",zIndex:51}}),jsxRuntime.jsx("input",{style:{...Me,position:"absolute",left:Se.x-ye/2,top:Se.y-te*g/2+2,width:ye,height:te*g-4,textAlign:"center",fontWeight:700,fontSize:(t.fontSize||drawuiCore.UML_FONT_SIZE)*g,color:t.textColor||"#1f2937",pointerEvents:"auto",zIndex:52,...p?.section==="className"?{borderColor:"var(--dw-primary)"}:{}},value:he,onChange:d=>i?e.updateUmlInterface(x,{className:d.target.value}):e.updateUmlClass(x,{className:d.target.value}),onFocus:()=>l("className",""),onBlur:b,spellCheck:false}),!i&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[c.map((d,M)=>F("attribute",M,d,le(M))),ae("attribute",Ee,"\u5C5E\u6027")]}),n.map((d,M)=>F("method",M,d,Ne(M))),ae("method",xe,drawuiCore.t("uml.method")),Ae()]})});var It=react.memo(function({editor:e,panelOpen:t,onOpenPanel:r}){let[,u]=react.useState(0);A(),react.useEffect(()=>{if(!e)return;let z=e.subscribe(()=>u(N=>N+1));return ()=>{z();}},[e]);let p=react.useRef(false),m=react.useRef(false);if(!e)return null;let a=e.getMindMapEditingShapeId();if(!a||t)return null;let S=e.getMindMapSelectedNode();if(!S||S.shapeId!==a)return null;let h=e.getMindMapNode(a,S.nodeId),f=e.getMindMapNodeScreenRect(a,S.nodeId);if(!h||!f)return null;let l=e.getCamera().getZoom(),b=drawuiCore.MINDMAP_FONT_SIZE*l,R=Math.max(100,f.width+24),x=f.height+8,K={position:"absolute",left:f.x+f.width/2,top:f.y-4,transform:"translateX(-50%)",width:R,height:x,border:"1.5px solid var(--dw-primary, #3b82f6)",borderRadius:6,background:"#ffffff",boxShadow:"0 2px 10px rgba(0,0,0,0.15)",outline:"none",padding:`0 ${(h.icon?24:12)*l}px`,fontFamily:"sans-serif",fontSize:b,color:"#1f2937",boxSizing:"border-box",pointerEvents:"auto",zIndex:55},I={position:"absolute",left:f.x+f.width+12,top:f.y+f.height/2-11,width:22,height:22,border:"1px solid #e5e7eb",background:"#ffffff",borderRadius:"50%",cursor:"pointer",color:"#6b7280",fontSize:13,lineHeight:1,display:"flex",alignItems:"center",justifyContent:"center",boxShadow:"0 1px 4px rgba(0,0,0,0.12)",pointerEvents:"auto",zIndex:55};return jsxRuntime.jsxs("div",{style:{position:"absolute",inset:0,pointerEvents:"none",zIndex:50},children:[jsxRuntime.jsx("input",{autoFocus:true,style:K,value:h.text,spellCheck:false,onChange:z=>{let N=!p.current;p.current=true,e.updateMindMapNode(a,S.nodeId,{text:z.target.value},N);},onBlur:()=>{if(m.current){m.current=false;return}e.exitMindMapEdit();},onKeyDown:z=>{z.key==="Enter"?z.target.blur():z.key==="Escape"&&e.exitMindMapEdit();}}),jsxRuntime.jsx("button",{style:I,title:drawuiCore.t("mindmap.more"),onMouseDown:z=>{z.preventDefault(),m.current=true,setTimeout(()=>{m.current=false;},300);},onClick:r,children:"\u22EF"})]})});var Pt=[...drawuiCore.MINDMAP_COLORS,"#1f2937","#9ca3af"],Ht=["\u{1F4A1}","\u2B50","\u{1F525}","\u{1F4CC}","\u2705","\u2757","\u26A0\uFE0F","\u{1F3F7}\uFE0F"],vn={position:"absolute",width:232,background:"rgba(255,255,255,0.96)",border:"1px solid #e5e7eb",borderRadius:8,boxShadow:"0 6px 20px rgba(0,0,0,0.12)",padding:"10px 12px",fontSize:12,color:"#1f2937",zIndex:70,boxSizing:"border-box",fontFamily:"sans-serif"},it={fontSize:11,color:"#6b7280",marginBottom:4,display:"block"},Ze={display:"flex",gap:4,alignItems:"center",flexWrap:"wrap"},Oe={border:"1px solid #e5e7eb",background:"#ffffff",borderRadius:5,padding:"3px 8px",fontSize:12,color:"#374151",cursor:"pointer",lineHeight:1.5},at={width:"100%",border:"1px solid #e5e7eb",borderRadius:5,padding:"4px 8px",fontSize:12,outline:"none",boxSizing:"border-box",background:"#ffffff",color:"#1f2937"},Kt=react.memo(function({editor:e,mindMap:t}){let[,r]=react.useState(0);A(),react.useEffect(()=>{if(!e)return;let n=e.subscribe(()=>r(i=>i+1));return ()=>{n();}},[e]);let u=react.useRef(null);if(!e||!t||e.getMindMapEditingShapeId()!==t.id)return null;let p=e.getMindMapSelectedNode();if(!p||p.shapeId!==t.id)return null;let m=n=>{if(n.id===p.nodeId)return n;for(let i of n.children??[]){let c=m(i);if(c)return c}return null},a=m(t.root);if(!a)return null;let S=e.getCamera(),f=drawuiCore.layoutMindMap(t.root).positions.get(a.id);if(!f)return null;let l=S.zoom,b=S.pageToScreen({x:t.x+f.x,y:t.y+f.y}),R=b.x+f.width*l/2+14,x=b.y-80,I=Math.max(8,Math.min(R,(window.innerWidth||1024)-232-8)),z=Math.max(8,Math.min(x,(window.innerHeight||768)-320)),N=n=>{e.updateMindMapNode(t.id,a.id,n);},he=!!a.id&&a.id!==t.root.id;return jsxRuntime.jsxs("div",{ref:u,style:{...vn,left:I,top:z},onMouseDown:n=>n.stopPropagation(),children:[jsxRuntime.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:8},children:[jsxRuntime.jsx("span",{style:{fontWeight:600,fontSize:12},children:drawuiCore.t("mindmap.nodeText")}),jsxRuntime.jsx("button",{onClick:()=>e.exitMindMapEdit(),title:drawuiCore.t("mindmap.close"),style:{border:"none",background:"transparent",cursor:"pointer",color:"#9ca3af",fontSize:14,lineHeight:1,padding:2},children:"\xD7"})]}),jsxRuntime.jsx("input",{style:{...at,marginBottom:8},value:a.text,onChange:n=>N({text:n.target.value}),spellCheck:false}),jsxRuntime.jsxs("div",{style:{...Ze,marginBottom:10},children:[jsxRuntime.jsxs("button",{style:Oe,onClick:()=>e.addMindMapChild(t.id,a.id),children:["+ ",drawuiCore.t("mindmap.addChild")]}),he&&jsxRuntime.jsxs("button",{style:Oe,onClick:()=>e.addMindMapSibling(t.id,a.id),children:["+ ",drawuiCore.t("mindmap.addSibling")]}),!!a.children?.length&&jsxRuntime.jsx("button",{style:Oe,onClick:()=>e.toggleMindMapCollapse(t.id,a.id),children:a.collapsed?drawuiCore.t("mindmap.expand"):drawuiCore.t("mindmap.collapse")}),jsxRuntime.jsx("button",{style:{...Oe,color:"#ef4444",borderColor:"#fecaca",marginLeft:"auto"},onClick:()=>e.deleteMindMapNode(t.id,a.id),children:drawuiCore.t("mindmap.deleteNode")})]}),jsxRuntime.jsx("span",{style:it,children:drawuiCore.t("mindmap.color")}),jsxRuntime.jsxs("div",{style:{...Ze,marginBottom:10},children:[jsxRuntime.jsx("button",{title:drawuiCore.t("mindmap.levelColor"),onClick:()=>N({color:void 0}),style:{width:18,height:18,borderRadius:4,border:"1.5px solid #d1d5db",background:"conic-gradient(#ef4444, #f59e0b, #10b981, #3b82f6, #8b5cf6, #ec4899, #ef4444)",cursor:"pointer",flexShrink:0}}),Pt.map(n=>jsxRuntime.jsx("button",{title:n,onClick:()=>N({color:n}),style:{width:18,height:18,borderRadius:4,border:a.color===n?"2px solid #111827":"1px solid #d1d5db",background:n,cursor:"pointer",flexShrink:0}},n))]}),jsxRuntime.jsx("span",{style:it,children:drawuiCore.t("mindmap.icon")}),jsxRuntime.jsxs("div",{style:{...Ze,marginBottom:10},children:[jsxRuntime.jsx("button",{title:drawuiCore.t("mindmap.noIcon"),onClick:()=>N({icon:void 0}),style:{width:22,height:22,borderRadius:4,border:a.icon?"1px solid #d1d5db":"2px solid #111827",background:"#f9fafb",cursor:"pointer",fontSize:11,color:"#9ca3af",lineHeight:1},children:"\u2205"}),Ht.map(n=>jsxRuntime.jsx("button",{onClick:()=>N({icon:n}),style:{width:22,height:22,borderRadius:4,border:a.icon===n?"2px solid #111827":"1px solid #d1d5db",background:"#f9fafb",cursor:"pointer",fontSize:13,lineHeight:1},children:n},n)),jsxRuntime.jsx("input",{placeholder:"\u270F\uFE0F",defaultValue:a.icon&&!Ht.includes(a.icon)?a.icon:"",onKeyDown:n=>{if(n.key==="Enter"){let i=n.target.value.trim();N({icon:i||void 0});}},onBlur:n=>{let i=n.target.value.trim();i!==a.icon&&N({icon:i||void 0});},style:{...at,width:56,padding:"2px 4px",textAlign:"center"}})]}),jsxRuntime.jsx("span",{style:it,children:drawuiCore.t("mindmap.note")}),jsxRuntime.jsx("input",{style:{...at,marginBottom:6},value:a.note??"",placeholder:drawuiCore.t("mindmap.notePlaceholder"),onChange:n=>N({note:n.target.value||void 0}),spellCheck:false}),!!a.note&&jsxRuntime.jsxs("div",{style:{...Ze,marginTop:4},children:[jsxRuntime.jsx("span",{style:{fontSize:11,color:"#6b7280"},children:drawuiCore.t("mindmap.noteColor")}),jsxRuntime.jsx("button",{title:drawuiCore.t("mindmap.noteColorDefault"),onClick:()=>N({noteColor:void 0}),style:{width:16,height:16,borderRadius:3,border:a.noteColor?"1px solid #d1d5db":"2px solid #111827",background:"repeating-conic-gradient(#ef4444 0% 25%, #f59e0b 0% 50%, #10b981 0% 75%, #3b82f6 0% 100%)",cursor:"pointer"}}),Pt.map(n=>jsxRuntime.jsx("button",{onClick:()=>N({noteColor:n}),style:{width:16,height:16,borderRadius:3,border:a.noteColor===n?"2px solid #111827":"1px solid #d1d5db",background:n,cursor:"pointer"}},n))]})]})});var lt=220,ct=140,Ln="#fafafa";function Tn(s,e){let t=Math.min(s.x,e.x),r=Math.min(s.y,e.y),u=Math.max(s.x+s.width,e.x+e.width),p=Math.max(s.y+s.height,e.y+e.height);return {x:t,y:r,width:u-t,height:p-r}}function Nn(s){return {x:s.x+s.width/2,y:s.y+s.height/2}}function En(){return {x:0,y:0,width:0,height:0}}function Rn(s){let e=1/0,t=1/0,r=-1/0,u=-1/0,p=false;for(let m of s){let a=ut(m);a&&(p=true,a.x<e&&(e=a.x),a.y<t&&(t=a.y),a.x+a.width>r&&(r=a.x+a.width),a.y+a.height>u&&(u=a.y+a.height));}return p?{x:e,y:t,width:r-e,height:u-t}:null}function ut(s){switch(s.type){case "rectangle":case "rounded-rectangle":case "ellipse":case "diamond":case "triangle":case "hexagon":case "text":return {x:s.x-s.width/2,y:s.y-s.height/2,width:s.width,height:s.height};case "circle":return {x:s.x-s.radius,y:s.y-s.radius,width:s.radius*2,height:s.radius*2};case "line":case "arrow":case "draw":{let e=s.points;if(!e||e.length===0)return null;let t=1/0,r=1/0,u=-1/0,p=-1/0;for(let m of e)m.x<t&&(t=m.x),m.y<r&&(r=m.y),m.x>u&&(u=m.x),m.y>p&&(p=m.y);return {x:t,y:r,width:u-t,height:p-r}}default:return null}}function In(s){let e=s.getCamera(),t=e.screenToPage({x:0,y:0}),r=e.screenToPage({x:window.innerWidth,y:window.innerHeight});return {x:t.x,y:t.y,width:r.x-t.x,height:r.y-t.y}}function Pn(s,e,t){if(s.width<=0||s.height<=0)return {x:s.x-e/2,y:s.y-t/2,width:e,height:t};let r=e/t,u=s.width,p=u/r;p<s.height&&(p=s.height,u=p*r);let m=Nn(s);return {x:m.x-u/2,y:m.y-p/2,width:u,height:p}}function dt(s,e,t,r){let u=(s-t.left)/t.width,p=(e-t.top)/t.height;return {x:r.x+u*r.width,y:r.y+p*r.height}}var Dt=react.memo(function({editor:e}){let t=react.useRef(null),r=react.useRef(null),[u,p]=react.useState(false),[m,a]=react.useState(100),[S,h]=react.useState(false),[f,l]=react.useState(false);A();let b=react.useRef(null),R=react.useRef(null);react.useLayoutEffect(()=>{let n=t.current,i=r.current;if(!n||!i)return;let c=window.devicePixelRatio||1;n.width=Math.round(lt*c),n.height=Math.round(ct*c),n.style.width=`${lt}px`,n.style.height=`${ct}px`;},[u]);let x=react.useCallback(()=>{let n=t.current,i=r.current;if(!n||!i||!e)return;let c=n.getContext("2d");if(!c)return;let _=lt,ee=ct,te=n.width,Y=n.height,be=e.getShapes(),ie=new Set(e.getSelectedIds()),ne=drawuiCore.getTheme(),g=drawuiCore.hexToRgba(ne.text,.16),ye=ne.primary,Le=drawuiCore.hexToRgba(ne.primary,.18),Te=drawuiCore.hexToRgba(ne.primary,.85),Se=Rn(be),P=In(e),fe=Se?Tn(Se,P):P.width>0?P:En(),le=Pn(fe,_,ee);R.current=le;let Ne=te/le.width,Ee=Y/le.height,xe=_/le.width;c.setTransform(1,0,0,1,0,0),c.fillStyle=Ln,c.fillRect(0,0,te,Y),c.setTransform(Ne,0,0,Ee,-Ne*le.x,-Ee*le.y),c.fillStyle=g;for(let E of be){let w=ut(E);w&&c.fillRect(w.x,w.y,w.width,w.height);}c.fillStyle=ye;for(let E of be){if(!ie.has(E.id))continue;let w=ut(E);w&&c.fillRect(w.x,w.y,w.width,w.height);}c.fillStyle=Le,c.fillRect(P.x,P.y,P.width,P.height);let Me=1.5/xe;c.strokeStyle=Te,c.lineWidth=Me,c.lineJoin="round";let Re=Math.min(P.width/6,P.height/6,6/xe);if(c.beginPath(),Re*xe<1)c.rect(P.x,P.y,P.width,P.height);else {let E=P.x,w=P.y,oe=P.width,G=P.height,F=Math.min(Re,oe/2,G/2);c.moveTo(E+F,w),c.lineTo(E+oe-F,w),c.quadraticCurveTo(E+oe,w,E+oe,w+F),c.lineTo(E+oe,w+G-F),c.quadraticCurveTo(E+oe,w+G,E+oe-F,w+G),c.lineTo(E+F,w+G),c.quadraticCurveTo(E,w+G,E,w+G-F),c.lineTo(E,w+F),c.quadraticCurveTo(E,w,E+F,w),c.closePath();}c.stroke(),c.setTransform(1,0,0,1,0,0);},[e]);react.useEffect(()=>{if(!e||u)return;x();let n=e.subscribe(x),i=drawuiCore.subscribeTheme(x),c=()=>x();return window.addEventListener("resize",c),()=>{n(),i(),window.removeEventListener("resize",c);}},[e,u,x]),react.useEffect(()=>{if(!e)return;let n=()=>{let c=e.getCamera().getZoom();a(Math.round(c*100));};n();let i=e.subscribe(n);return ()=>{i();}},[e]);let K=react.useCallback((n,i)=>{if(!e)return;let c=e.getCamera(),_=c.getZoom(),ee=window.innerWidth/2,te=window.innerHeight/2,Y=c;Y.x=ee-n*_,Y.y=te-i*_,e.requestRender();},[e]),I=n=>{if(!e||!r.current||n.button!==0)return;let i=r.current.getBoundingClientRect(),c=R.current;if(!c)return;let _=dt(n.clientX,n.clientY,i,c);b.current={pointerId:n.pointerId,rect:{left:i.left,top:i.top,width:i.width,height:i.height},canvasBox:c},n.currentTarget.setPointerCapture(n.pointerId),l(true),K(_.x,_.y);},z=n=>{if(!f||!e||!b.current||!r.current)return;let i=b.current,c=dt(n.clientX,n.clientY,i.rect,i.canvasBox);K(c.x,c.y);},N=n=>{if(f){l(false),b.current=null;try{n.currentTarget.releasePointerCapture(n.pointerId);}catch{}}},he=n=>{if(!e||!r.current)return;let i=R.current;if(!i)return;let c=r.current.getBoundingClientRect(),_=dt(n.clientX,n.clientY,c,i);K(_.x,_.y);};return jsxRuntime.jsxs("div",{className:`drawui-minimap ${u?"collapsed":""}`,children:[jsxRuntime.jsx("button",{className:"drawui-minimap-toggle",onClick:()=>p(n=>!n),title:u?drawuiCore.t("minimap.expand"):drawuiCore.t("minimap.collapse"),"aria-label":u?drawuiCore.t("minimap.expand"):drawuiCore.t("minimap.collapse"),children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:u?jsxRuntime.jsx("polyline",{points:"9 6 15 12 9 18"}):jsxRuntime.jsx("polyline",{points:"15 6 9 12 15 18"})})}),!u&&jsxRuntime.jsxs("div",{className:"drawui-minimap-panel",children:[jsxRuntime.jsxs("div",{className:"drawui-minimap-header",children:[jsxRuntime.jsx("span",{className:"drawui-minimap-title",children:drawuiCore.t("minimap.title")}),jsxRuntime.jsxs("span",{className:"drawui-minimap-zoom",children:[m,"%"]})]}),jsxRuntime.jsx("div",{ref:r,className:"drawui-minimap-canvas-wrap",style:{cursor:f?"grabbing":S?"pointer":"default"},onPointerEnter:()=>h(true),onPointerLeave:()=>h(false),children:jsxRuntime.jsx("canvas",{ref:t,className:"drawui-minimap-canvas",onPointerDown:I,onPointerMove:z,onPointerUp:N,onPointerCancel:N,onDoubleClick:he})})]})]})});var Q=s=>jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",width:"18",height:"18",className:"drawui-gen-shape-glyph",fill:"none",stroke:"currentColor",strokeWidth:"1.6",strokeLinecap:"round",strokeLinejoin:"round",children:s}),zn=[{type:"rectangle",labelKey:"shape.rectangle",glyph:Q(jsxRuntime.jsx("rect",{x:"4",y:"7",width:"16",height:"10",rx:"1"}))},{type:"rounded-rectangle",labelKey:"shape.rounded-rectangle",glyph:Q(jsxRuntime.jsx("rect",{x:"4",y:"7",width:"16",height:"10",rx:"4"}))},{type:"circle",labelKey:"shape.circle",glyph:Q(jsxRuntime.jsx("circle",{cx:"12",cy:"12",r:"5.5"}))},{type:"ellipse",labelKey:"shape.ellipse",glyph:Q(jsxRuntime.jsx("ellipse",{cx:"12",cy:"12",rx:"7",ry:"4.5"}))},{type:"diamond",labelKey:"shape.diamond",glyph:Q(jsxRuntime.jsx("path",{d:"M12 5 L19 12 L12 19 L5 12 Z"}))},{type:"triangle",labelKey:"shape.triangle",glyph:Q(jsxRuntime.jsx("path",{d:"M12 4 L20 19 H4 Z"}))},{type:"hexagon",labelKey:"shape.hexagon",glyph:Q(jsxRuntime.jsx("path",{d:"M12 3 L19.5 7.5 V16.5 L12 21 L4.5 16.5 V7.5 Z"}))},{type:"parallelogram",labelKey:"shape.parallelogram",glyph:Q(jsxRuntime.jsx("path",{d:"M6 7 L19 7 L16 17 H7 Z"}))},{type:"trapezoid",labelKey:"shape.trapezoid",glyph:Q(jsxRuntime.jsx("path",{d:"M7 6 H17 L20 18 H4 Z"}))},{type:"pentagon",labelKey:"shape.pentagon",glyph:Q(jsxRuntime.jsx("path",{d:"M12 4 L19.5 9.5 L16.5 18.5 H7.5 L4.5 9.5 Z"}))},{type:"octagon",labelKey:"shape.octagon",glyph:Q(jsxRuntime.jsx("path",{d:"M8 4 H16 L20 8 V16 L16 20 H8 L4 16 V8 Z"}))},{type:"star",labelKey:"shape.star",glyph:Q(jsxRuntime.jsx("path",{d:"M12 3 L14 9.5 L20.5 10 L15.5 14 L17.5 20.5 L12 16.8 L6.5 20.5 L8.5 14 L3.5 10 L10 9.5 Z"}))},{type:"uml-class",labelKey:"shape.uml-class",glyph:Q(jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("rect",{x:"3",y:"4",width:"18",height:"16",rx:"1"}),jsxRuntime.jsx("path",{d:"M3 9 H21"}),jsxRuntime.jsx("path",{d:"M3 15 H21"}),jsxRuntime.jsx("path",{d:"M6 6.5 H10"}),jsxRuntime.jsx("path",{d:"M6 12.5 H12"})]}))},{type:"uml-interface",labelKey:"shape.uml-interface",glyph:Q(jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("rect",{x:"3",y:"4",width:"18",height:"16",rx:"1"}),jsxRuntime.jsx("path",{d:"M3 9 H21"}),jsxRuntime.jsx("path",{d:"M6 6.5 H10"}),jsxRuntime.jsx("path",{d:"M6 12.5 H12"})]}))},{type:"mind-map",labelKey:"shape.mind-map",glyph:Q(jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("circle",{cx:"5",cy:"12",r:"2"}),jsxRuntime.jsx("path",{d:"M7 12h2.6"}),jsxRuntime.jsx("path",{d:"M9.6 12c0-2 1.2-3.4 2.6-3.4"}),jsxRuntime.jsx("path",{d:"M9.6 12c0 2 1.2 3.4 2.6 3.4"}),jsxRuntime.jsx("circle",{cx:"15.2",cy:"8.6",r:"1.3"}),jsxRuntime.jsx("circle",{cx:"15.2",cy:"15.4",r:"1.3"}),jsxRuntime.jsx("circle",{cx:"13.6",cy:"12",r:"1.3"})]}))}];function At({editor:s,x:e,y:t,context:r,existingArrowId:u,defaultShapeType:p,onClose:m}){let a=react.useRef(null);A();let S=h=>{s?.createGeneratedConnection(r,{type:h,existingArrowId:u}),m();};return react.useEffect(()=>{let h=b=>{a.current&&!a.current.contains(b.target)&&m();},f=b=>{b.key==="Escape"&&(b.preventDefault(),m());},l=setTimeout(()=>{window.addEventListener("pointerdown",h,true),window.addEventListener("keydown",f,true);},0);return ()=>{clearTimeout(l),window.removeEventListener("pointerdown",h,true),window.removeEventListener("keydown",f,true);}},[m]),jsxRuntime.jsxs("div",{className:"drawui-gen-menu",ref:a,style:{left:e,top:t},children:[jsxRuntime.jsx("div",{className:"drawui-gen-menu-label",children:drawuiCore.t("menu.title")}),jsxRuntime.jsx("div",{className:"drawui-gen-shape-grid",children:zn.map(h=>jsxRuntime.jsxs("button",{className:`drawui-gen-shape-btn${h.type===p?" drawui-gen-shape-active":""}`,onClick:()=>S(h.type),title:drawuiCore.t(h.labelKey),children:[h.glyph,jsxRuntime.jsx("span",{className:"drawui-gen-shape-label",children:drawuiCore.t(h.labelKey)})]},h.type))}),jsxRuntime.jsx("div",{className:"drawui-gen-menu-hint",children:drawuiCore.t("menu.cancel")})]})}var Un={select:"tool.select",hand:"tool.hand",rectangle:"tool.rectangle","rounded-rectangle":"tool.rounded-rectangle",circle:"tool.circle",ellipse:"tool.ellipse",diamond:"tool.diamond",triangle:"tool.triangle",hexagon:"tool.hexagon",parallelogram:"tool.parallelogram",trapezoid:"tool.trapezoid",pentagon:"tool.pentagon",octagon:"tool.octagon",star:"tool.star","uml-class":"tool.uml-class","uml-interface":"tool.uml-interface",line:"tool.line",arrow:"tool.arrow",text:"tool.text",draw:"tool.draw",pen:"tool.pen",highlighter:"tool.highlighter",eraser:"tool.eraser","mind-map":"tool.mind-map"};function $n({initialTool:s="select",className:e="",themeColor:t,language:r="zh-CN",data:u,onChange:p,onReady:m}){let a=react.useRef(null),S=react.useRef(null),h=react.useRef(null),[f,l]=react.useState(null);A();let[b,R]=react.useState(s),[x,K]=react.useState(false),[I,z]=react.useState(0),[N,he]=react.useState(false),[n,i]=react.useState("straight"),[c,_]=react.useState("end"),[ee,te]=react.useState(false),[Y,be]=react.useState(100),[ie,ne]=react.useState(null),[g,ye]=react.useState(null),[Le,Te]=react.useState(false),[Se,P]=react.useState(false),[fe,le]=react.useState(null),[Ne,Ee]=react.useState(null),[xe,Me]=react.useState(false),[Re,E]=react.useState(null),[w,oe]=react.useState(null),G=react.useRef(null),F=react.useRef(0),ae=react.useRef(null),Ae=react.useRef(p);Ae.current=p;let Ue=react.useRef(m);Ue.current=m,react.useEffect(()=>{if(!a.current)return;let y=new drawuiCore.Editor(a.current,{theme:t?{primary:t,editBorder:t,selection:{outline:t,handleStroke:t,handleFill:"#ffffff",outlineFill:drawuiCore.hexToRgba(t,.1),shadow:t}}:void 0,language:r,shapes:u,persist:!u});h.current=y,l(y),window.__drawuiEditor=y,Ue.current?.(y),s&&y.setActiveTool(s);let V=y.subscribe(()=>{R(y.getActiveTool());let D=y.getSelectedIds();z(D.length);let k=y.getShapes().filter(ue=>D.includes(ue.id)&&(ue.type==="line"||ue.type==="arrow"));if(he(k.length>0),k.length>0&&k[0].connectionType?i(k[0].connectionType):k.length>0&&i("straight"),k.length>0){let ue=k.find(Qe=>Qe.type==="arrow");ue&&(_(ue.arrowHead??"end"),te(ue.dashed??false));}be(Math.round(y.getCamera().getZoom()*100)),Te(y.canUndo()),P(y.canRedo());let de=y.getSelectedUml();le(de),de||E(null);let $e=y.getSelectedMindMap();Ee($e),y.getMindMapEditingShapeId()||Me(false),Ae.current?.(y.getData());}),se=y.subscribeNotifications(D=>{ye(D),G.current&&clearTimeout(G.current),G.current=setTimeout(()=>ye(null),2e3);}),B=y.subscribeUi(D=>{D.kind==="shapeTypeMenu"&&oe({x:D.screenX,y:D.screenY,context:D.context,existingArrowId:D.existingArrowId,defaultShapeType:D.defaultShapeType});});return ()=>{V(),se(),B(),G.current&&clearTimeout(G.current),cancelAnimationFrame(F.current),y.dispose();}},[s]),react.useEffect(()=>{if(!t)return;let y=S.current;y&&(y.style.setProperty("--dw-primary",t),y.style.setProperty("--dw-primary-hover",drawuiCore.shadeColor(t,-0.12)),y.style.setProperty("--dw-primary-weak",drawuiCore.hexToRgba(t,.1)),y.style.setProperty("--dw-primary-contrast","#ffffff"),y.style.setProperty("--dw-shadow-primary",`0 2px 8px ${drawuiCore.hexToRgba(t,.3)}`)),h.current?.setTheme({primary:t,editBorder:t,selection:{outline:t,handleStroke:t,handleFill:"#ffffff",outlineFill:drawuiCore.hexToRgba(t,.1),shadow:t}});},[t]),react.useEffect(()=>{drawuiCore.setLanguage(r),h.current?.setLanguage(r);},[r]);let je=react.useCallback(y=>{h.current?.setActiveTool(y);},[]),qe=react.useCallback(()=>{h.current?.zoomIn();},[]),Je=react.useCallback(()=>{h.current?.zoomOut();},[]),d=react.useCallback(()=>{h.current?.resetZoom();},[]),M=react.useCallback(()=>{let y=!x;K(y),h.current?.setShowGrid(y);},[x]),C=react.useCallback(()=>{h.current?.undo();},[]),L=react.useCallback(()=>{h.current?.redo();},[]),$=react.useCallback(y=>{h.current?.downloadImage("drawui",y,{background:"#ffffff"});},[]),W=react.useCallback(y=>{let V=h.current,se=a.current;if(!V||!se)return;if(V.isPointerDown()){ae.current!==null&&(ae.current=null,ne(null));return}let B=y.clientX,D=y.clientY;cancelAnimationFrame(F.current),F.current=requestAnimationFrame(()=>{let ce=se.getBoundingClientRect(),k=B-ce.left,de=D-ce.top,$e=k+12,ue=de+12,Qe=V.getSelectedUml()?.id,He=V.getUmlRowAtScreenPoint({x:k,y:de});if(He&&He.shape.id!==Qe&&He.text){ae.current!==He.text&&(ae.current=He.text,ne({text:He.text,x:$e,y:ue}));return}let ze=V.getShapeAtScreenPoint({x:k,y:de});ze&&ze.text?ae.current!==ze.text&&(ae.current=ze.text,ne({text:ze.text,x:$e,y:ue})):ae.current!==null&&(ae.current=null,ne(null));});},[]),Ie=react.useCallback(()=>{ne(null);},[]),Ke=react.useCallback(y=>{let V=h.current,se=a.current;if(!V||!se)return;let B=se.getBoundingClientRect(),D=y.clientX-B.left,ce=y.clientY-B.top,k=V.getUmlRowAtScreenPoint({x:D,y:ce});if(k){E(k.shape.id);return}let de=V.getMindMapNodeAtScreenPoint({x:D,y:ce});de&&V.beginMindMapEdit(de.shapeId,de.nodeId);},[]),Pe=react.useCallback(()=>{oe(null);},[]);return jsxRuntime.jsxs("div",{ref:S,className:`drawui-canvas-board ${e}`,children:[jsxRuntime.jsx("canvas",{ref:a,className:"drawui-canvas",onMouseMove:W,onMouseLeave:Ie,onDoubleClick:Ke}),ie&&jsxRuntime.jsx("div",{className:"drawui-tooltip",style:{left:ie.x,top:ie.y},children:ie.text}),jsxRuntime.jsx(et,{activeTool:b,onToolChange:je,showGrid:x,onToggleGrid:M,canUndo:Le,canRedo:Se,onUndo:C,onRedo:L,onExport:$}),jsxRuntime.jsx(tt,{onZoomIn:qe,onZoomOut:Je,onReset:d,zoomLevel:Y}),jsxRuntime.jsx(kt,{editor:f,selectedCount:I,hasLineSelection:N,currentConnectionType:n,currentArrowHead:c,currentDashed:ee}),jsxRuntime.jsx(Nt,{editor:f,umlClass:fe,editing:Re}),jsxRuntime.jsx(It,{editor:f,panelOpen:xe,onOpenPanel:()=>Me(true)}),xe&&jsxRuntime.jsx(Kt,{editor:f,mindMap:Ne}),jsxRuntime.jsx(Dt,{editor:f}),w&&jsxRuntime.jsx(At,{editor:f,x:w.x,y:w.y,context:w.context,existingArrowId:w.existingArrowId,defaultShapeType:w.defaultShapeType,onClose:Pe}),jsxRuntime.jsxs("div",{className:"drawui-status-bar",children:[jsxRuntime.jsx("div",{className:"drawui-status-item",children:jsxRuntime.jsx("span",{children:drawuiCore.t(Un[b])})}),jsxRuntime.jsx("div",{className:"drawui-status-item",children:jsxRuntime.jsx("span",{children:I===0?drawuiCore.t("status.none"):drawuiCore.t("status.selected",{n:I})})}),jsxRuntime.jsx("div",{className:"drawui-status-item",children:jsxRuntime.jsxs("span",{children:[Y,"%"]})})]}),g&&jsxRuntime.jsxs("div",{className:"drawui-toast",children:[jsxRuntime.jsx("svg",{className:"drawui-toast-icon",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("polyline",{points:"20 6 9 17 4 12"})}),g]})]})}exports.CanvasBoard=$n;exports.Toolbar=et;exports.ZoomControl=tt;
|
|
1
|
+
'use strict';var react=require('react'),drawuiCore=require('drawui-core'),jsxRuntime=require('react/jsx-runtime');function X(){let[a,e]=react.useState(drawuiCore.getLanguage());return react.useEffect(()=>drawuiCore.subscribeLanguage(()=>e(drawuiCore.getLanguage())),[]),a}var Lt=[{type:"rectangle",icon:jsxRuntime.jsx("rect",{x:"3",y:"5",width:"18",height:"14",rx:"0"})},{type:"rounded-rectangle",icon:jsxRuntime.jsx("rect",{x:"3",y:"5",width:"18",height:"14",rx:"4"})},{type:"circle",icon:jsxRuntime.jsx("circle",{cx:"12",cy:"12",r:"8"})},{type:"ellipse",icon:jsxRuntime.jsx("ellipse",{cx:"12",cy:"12",rx:"9",ry:"6"})},{type:"diamond",icon:jsxRuntime.jsx("path",{d:"M12 3L21 12L12 21L3 12Z"})},{type:"triangle",icon:jsxRuntime.jsx("path",{d:"M12 4L20 19L4 19Z"})},{type:"hexagon",icon:jsxRuntime.jsx("path",{d:"M12 3L20 7.5V16.5L12 21L4 16.5V7.5Z"})},{type:"parallelogram",icon:jsxRuntime.jsx("path",{d:"M7 5L20 5L17 19L4 19Z"})},{type:"trapezoid",icon:jsxRuntime.jsx("path",{d:"M6 5L18 5L21 19L3 19Z"})},{type:"pentagon",icon:jsxRuntime.jsx("path",{d:"M12 3L21 10L17.5 21L6.5 21L3 10Z"})},{type:"octagon",icon:jsxRuntime.jsx("path",{d:"M8 3L16 3L21 8L21 16L16 21L8 21L3 16L3 8Z"})},{type:"star",icon:jsxRuntime.jsx("path",{d:"M12 2L14.5 8.5L21 9L16 13.5L17.5 20L12 16.5L6.5 20L8 13.5L3 9L9.5 8.5Z"})}],Jt=new Set(Lt.map(a=>a.type)),Qt=[{type:"arrow",icon:"M5 12h14M12 5l7 7-7 7",labelKey:"toolbar.arrow"},{type:"text",icon:"M4 7V4h16v3M9 20h6M12 4v16",labelKey:"toolbar.text"}],en=[{type:"pen",icon:"M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3Z",labelKey:"toolbar.pen"},{type:"highlighter",icon:"M14 3l7 7-3 3-7-7 3-3zM9 8L3 14v3h3l6-6",labelKey:"toolbar.highlighter"}],tn=[{type:"eraser",icon:"M7 21l-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21M22 21H7M5 11l9 9",labelKey:"toolbar.eraser"}],nn="M18 11V6.5a1.5 1.5 0 0 0-3 0v3.5a1.5 1.5 0 0 0-3 0V3.5a1.5 1.5 0 0 0-3 0v6.5a1.5 1.5 0 0 0-3 0V14a8 8 0 0 0 16 0v-3a1.5 1.5 0 0 0-3 0",it=react.memo(function({activeTool:e,onToolChange:n,showGrid:i,onToggleGrid:u,canUndo:p=false,canRedo:y=false,onUndo:l,onRedo:C,onExport:f}){let[c,v]=react.useState(false),[B,I]=react.useState(false),b=react.useRef(null),z=react.useRef(null);X();let k=[{format:"png",labelKey:"toolbar.export.png"},{format:"svg",labelKey:"toolbar.export.svg"},{format:"pdf",labelKey:"toolbar.export.pdf"}],D=()=>{b.current&&(clearTimeout(b.current),b.current=null),I(true);},P=()=>{b.current=window.setTimeout(()=>I(false),200);},ue=()=>{z.current&&(clearTimeout(z.current),z.current=null),v(true);},o=()=>{z.current=window.setTimeout(()=>{v(false);},200);};return jsxRuntime.jsx("div",{className:"drawui-toolbar-container",children:jsxRuntime.jsxs("div",{className:"drawui-toolbar",children:[jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${e==="select"?"active":""}`,onClick:()=>n("select"),"data-drawui-tip":drawuiCore.t("toolbar.select"),children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("circle",{cx:"12",cy:"12",r:"3"})})}),jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${e==="hand"?"active":""}`,onClick:()=>n("hand"),"data-drawui-tip":drawuiCore.t("toolbar.hand"),children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("path",{d:nn})})}),jsxRuntime.jsx("div",{className:"drawui-toolbar-divider"}),jsxRuntime.jsxs("div",{className:"drawui-toolbar-dropdown",onMouseEnter:ue,onMouseLeave:o,children:[jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${Jt.has(e)?"active":""}`,onClick:()=>n("rounded-rectangle"),"data-drawui-tip":drawuiCore.t("toolbar.shapes"),children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("rect",{x:"3",y:"5",width:"18",height:"14",rx:"4",ry:"4"})})}),c&&jsxRuntime.jsx("div",{className:"drawui-toolbar-shape-grid",children:Lt.map(s=>jsxRuntime.jsx("button",{className:`drawui-toolbar-shape-item ${e===s.type?"active":""}`,onClick:()=>{n(s.type),v(false);},"data-drawui-tip":drawuiCore.t("tool."+s.type),children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:s.icon})},s.type))})]}),jsxRuntime.jsx("div",{className:"drawui-toolbar-divider"}),Qt.map(s=>jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${e===s.type?"active":""}`,onClick:()=>n(s.type),"data-drawui-tip":drawuiCore.t(s.labelKey),children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("path",{d:s.icon})})},s.type)),jsxRuntime.jsx("div",{className:"drawui-toolbar-divider"}),en.map(s=>jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${e===s.type?"active":""}`,onClick:()=>n(s.type),"data-drawui-tip":drawuiCore.t(s.labelKey),children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("path",{d:s.icon})})},s.type)),jsxRuntime.jsx("div",{className:"drawui-toolbar-divider"}),tn.map(s=>jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${e===s.type?"active":""}`,onClick:()=>n(s.type),"data-drawui-tip":drawuiCore.t(s.labelKey),children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("path",{d:s.icon})})},s.type)),jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${e==="uml-class"?"active":""}`,onClick:()=>n("uml-class"),"data-drawui-tip":drawuiCore.t("toolbar.uml-class"),children:jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("rect",{x:"3",y:"3",width:"18",height:"18",rx:"2"}),jsxRuntime.jsx("line",{x1:"3",y1:"9",x2:"21",y2:"9"}),jsxRuntime.jsx("line",{x1:"3",y1:"15",x2:"21",y2:"15"}),jsxRuntime.jsx("line",{x1:"7",y1:"6",x2:"17",y2:"6"}),jsxRuntime.jsx("line",{x1:"7",y1:"12",x2:"13",y2:"12"}),jsxRuntime.jsx("line",{x1:"7",y1:"18",x2:"11",y2:"18"})]})}),jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${e==="uml-interface"?"active":""}`,onClick:()=>n("uml-interface"),"data-drawui-tip":drawuiCore.t("toolbar.uml-interface"),children:jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("rect",{x:"3",y:"3",width:"18",height:"18",rx:"2"}),jsxRuntime.jsx("line",{x1:"3",y1:"9",x2:"21",y2:"9"}),jsxRuntime.jsx("line",{x1:"7",y1:"6",x2:"17",y2:"6"}),jsxRuntime.jsx("line",{x1:"7",y1:"12",x2:"13",y2:"12"})]})}),jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${e==="mind-map"?"active":""}`,onClick:()=>n("mind-map"),"data-drawui-tip":drawuiCore.t("toolbar.mind-map"),children:jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("circle",{cx:"5",cy:"12",r:"2.4"}),jsxRuntime.jsx("path",{d:"M7.4 12h3.6"}),jsxRuntime.jsx("path",{d:"M11 12c0-2.6 1.6-4.4 3.4-4.4"}),jsxRuntime.jsx("path",{d:"M11 12c0 2.6 1.6 4.4 3.4 4.4"}),jsxRuntime.jsx("circle",{cx:"17.4",cy:"7.6",r:"1.7"}),jsxRuntime.jsx("circle",{cx:"17.4",cy:"16.4",r:"1.7"}),jsxRuntime.jsx("circle",{cx:"15.6",cy:"12",r:"1.7"})]})}),jsxRuntime.jsx("div",{className:"drawui-toolbar-divider"}),jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${i?"active":""}`,onClick:u,"data-drawui-tip":drawuiCore.t("toolbar.grid"),children:jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("rect",{x:"3",y:"3",width:"7",height:"7",rx:"1"}),jsxRuntime.jsx("rect",{x:"14",y:"3",width:"7",height:"7",rx:"1"}),jsxRuntime.jsx("rect",{x:"14",y:"14",width:"7",height:"7",rx:"1"}),jsxRuntime.jsx("rect",{x:"3",y:"14",width:"7",height:"7",rx:"1"})]})}),jsxRuntime.jsx("div",{className:"drawui-toolbar-divider"}),jsxRuntime.jsx("button",{className:"drawui-toolbar-button",onClick:l,disabled:!p,style:p?void 0:{opacity:.4,cursor:"default"},"data-drawui-tip":drawuiCore.t("toolbar.undo"),children:jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("path",{d:"M3 7v6h6"}),jsxRuntime.jsx("path",{d:"M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"})]})}),jsxRuntime.jsx("button",{className:"drawui-toolbar-button",onClick:C,disabled:!y,style:y?void 0:{opacity:.4,cursor:"default"},"data-drawui-tip":drawuiCore.t("toolbar.redo"),children:jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("path",{d:"M21 7v6h-6"}),jsxRuntime.jsx("path",{d:"M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3L21 13"})]})}),jsxRuntime.jsx("div",{className:"drawui-toolbar-divider"}),jsxRuntime.jsxs("div",{className:"drawui-toolbar-dropdown",onMouseEnter:D,onMouseLeave:P,children:[jsxRuntime.jsx("button",{className:"drawui-toolbar-button","data-drawui-tip":drawuiCore.t("toolbar.export"),children:jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("path",{d:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"}),jsxRuntime.jsx("polyline",{points:"7 10 12 15 17 10"}),jsxRuntime.jsx("line",{x1:"12",y1:"15",x2:"12",y2:"3"})]})}),B&&jsxRuntime.jsx("div",{className:"drawui-toolbar-shape-grid drawui-toolbar-export-grid",children:k.map(s=>jsxRuntime.jsx("button",{className:"drawui-toolbar-shape-item drawui-toolbar-export-item",onClick:()=>{f?.(s.format),I(false);},"data-drawui-tip":drawuiCore.t(s.labelKey),children:drawuiCore.t(s.labelKey)},s.format))})]})]})})});var lt=react.memo(function({onZoomIn:e,onZoomOut:n,onReset:i,zoomLevel:u=100}){return X(),jsxRuntime.jsxs("div",{className:"drawui-zoom-control",children:[jsxRuntime.jsx("button",{className:"drawui-zoom-button",onClick:e,"data-drawui-tip":drawuiCore.t("zoom.in"),children:jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("line",{x1:"12",y1:"5",x2:"12",y2:"19"}),jsxRuntime.jsx("line",{x1:"5",y1:"12",x2:"19",y2:"12"})]})}),jsxRuntime.jsxs("div",{className:"drawui-zoom-level",children:[u,"%"]}),jsxRuntime.jsx("button",{className:"drawui-zoom-button",onClick:n,"data-drawui-tip":drawuiCore.t("zoom.out"),children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("line",{x1:"12",y1:"5",x2:"12",y2:"19"})})}),jsxRuntime.jsx("button",{className:"drawui-zoom-button",onClick:i,"data-drawui-tip":drawuiCore.t("zoom.reset"),children:jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("path",{d:"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"}),jsxRuntime.jsx("path",{d:"M3 3v5h5"})]})})]})});var cn=["#ffffff","#f1f5f9","#ede9fe","#dbeafe","#dcfce7","#fef3c7","#fee2e2"],dn=["#0f172a","#475569","#94a3b8","#8b5cf6","#3b82f6","#16a34a","#d97706","#dc2626"],un=[...cn,...dn],Et=15,Rt="drawui:customColors";function pn(){if(typeof window>"u")return [];try{let a=window.localStorage.getItem(Rt);if(!a)return [];let e=JSON.parse(a);return Array.isArray(e)?e.filter(n=>typeof n=="string").slice(-Et):[]}catch{return []}}function hn(a){if(!(typeof window>"u"))try{window.localStorage.setItem(Rt,JSON.stringify(a));}catch{}}var Tt=[{key:"fill",labelKey:"style.fill",hasTransparent:true,hasOpacity:true},{key:"stroke",labelKey:"style.stroke",hasTransparent:false,hasOpacity:true},{key:"text",labelKey:"style.text",hasTransparent:false},{key:"highlight",labelKey:"style.highlight",hasTransparent:true,hasOpacity:true}],Nt=(a,e)=>!!a&&!!e&&a.toLowerCase()===e.toLowerCase(),yn=[{type:"straight",labelKey:"style.connection.straight",icon:"\u2501"},{type:"polyline",labelKey:"style.connection.polyline",icon:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",width:"16",height:"16",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("path",{d:"M4 8 C 12 8, 12 16, 20 16"})})},{type:"orthogonal",labelKey:"style.connection.orthogonal",icon:"\u2517"},{type:"curve",labelKey:"style.connection.curve",icon:"\u223F"}],fn=[{type:"none",labelKey:"style.arrowhead.none",icon:"\u2501"},{type:"end",labelKey:"style.arrowhead.end",icon:"\u2192"},{type:"start",labelKey:"style.arrowhead.start",icon:"\u2190"},{type:"both",labelKey:"style.arrowhead.both",icon:"\u21C4"},{type:"inheritance",labelKey:"style.arrowhead.inheritance",icon:"\u2501\u2501\u25B7"},{type:"composition",labelKey:"style.arrowhead.composition",icon:"\u25C6\u2501\u2501"},{type:"aggregation",labelKey:"style.arrowhead.aggregation",icon:"\u25C7\u2501\u2501"}],_e=10,Re=12,Te=a=>!a||a==="transparent",It=react.memo(function({editor:e,selectedCount:n,hasLineSelection:i,currentConnectionType:u,currentArrowHead:p,currentDashed:y}){X();let l=!!e?.getEditingShapeId(),[C,f]=react.useState(null),[c,v]=react.useState(null),[,B]=react.useState(0),I=react.useRef(null),b=react.useRef(null),z=react.useRef(null),[k,D]=react.useState({tw:168,th:42,pw:228,ph:160}),[P,ue]=react.useState(pn),o=react.useRef(null),s=react.useCallback(t=>{let g=t.trim().toLowerCase();/^#[0-9a-f]{6}$/.test(g)&&ue(Y=>{let R=Y.filter(H=>H!==g);for(R.push(g);R.length>Et;)R.shift();return hn(R),R});},[]);if(react.useEffect(()=>{let t=o.current;if(!t)return;let g=()=>{t.value&&s(t.value);};return t.addEventListener("change",g),()=>t.removeEventListener("change",g)},[s,c]),react.useEffect(()=>{if(!e)return;let t=e.subscribe(()=>B(g=>(g+1)%1e6));return ()=>{t();}},[e]),react.useEffect(()=>{v(null);},[n,l]),react.useEffect(()=>{if(!c)return;let t=g=>{I.current&&!I.current.contains(g.target)&&v(null);};return document.addEventListener("pointerdown",t,true),()=>document.removeEventListener("pointerdown",t,true)},[c]),react.useLayoutEffect(()=>{let t=b.current?.offsetWidth??k.tw,g=b.current?.offsetHeight??k.th,Y=z.current?.offsetWidth??k.pw,R=z.current?.offsetHeight??k.ph;D(H=>H.tw===t&&H.th===g&&H.pw===Y&&H.ph===R?H:{tw:t,th:g,pw:Y,ph:R});}),!e||n===0||l)return null;let d=e.getSelectedIds(),Z=e.getShapes().filter(t=>d.includes(t.id)),A=Z[0],V=A?.id??"",se=A?.style.fillColor,_=A?.style.strokeColor??"#1f2937",ee=A?.textColor??"#1f2937",m=A?.highlightColor,le={fill:se,stroke:_,text:ee,highlight:m},Ne={fill:A?.style.fillOpacity??1,stroke:A?.style.strokeOpacity??1,highlight:A?.highlightOpacity??1},Se=t=>C&&C.key===`${V}:${t}`?C.value:Ne[t]??1,pe=(t,g)=>{switch(t){case "stroke":e.updateSelectedShapesStyle({strokeColor:g});break;case "fill":e.updateSelectedShapesStyle({fillColor:g});break;case "text":e.updateSelectedShapesText({textColor:g});break;case "highlight":e.updateSelectedShapesText({highlightColor:g});break}},K=(t,g)=>{f({key:`${V}:${t}`,value:g}),t==="highlight"?e.updateSelectedShapesText({highlightOpacity:g}):t==="stroke"?e.updateSelectedShapesStyle({strokeOpacity:g}):e.updateSelectedShapesStyle({fillOpacity:g});},he=t=>e.updateConnectionType(t),ce=t=>e.updateArrowHeadType(t),Ce=t=>e.updateArrowDashed(t),ye=!!i&&Z.length>0&&Z.every(t=>t.type==="line"||t.type==="arrow"),fe=Z.length>0&&Z.every(t=>t.type==="text"),me=ye?Tt.filter(t=>t.key==="stroke"):Tt,Me=t=>t.key==="stroke"&&ye?"style.line":t.labelKey,w=c&&c!=="more"?me.find(t=>t.key===c):void 0,x=!!c&&(c==="more"||c==="prefix"||!!w),oe=e.getCamera(),O=drawuiCore.getContentBounds(Z,0),G=oe.pageToScreen({x:O.x,y:O.y}),ie=oe.pageToScreen({x:O.x+O.width,y:O.y+O.height}),ze=window.innerWidth,Be=window.innerHeight,Ae=ie.y+_e,Oe=G.y-_e,Ue=k.th+(x?_e+k.ph:0),h=Ae+Ue<=Be-Re,N=Oe-Ue>=Re,L=h||!N,E=(G.x+ie.x)/2,$=(t,g,Y)=>Math.max(g,Math.min(t,Math.max(g,Y))),F=$(E-k.tw/2,Re,ze-k.tw-Re),ge=L?Ae:Oe-k.th,Ke=$(E-k.pw/2,Re,ze-k.pw-Re),Ee=x?$(L?ge+k.th+_e:ge-_e-k.ph,Re,Be-k.ph-Re):0;return jsxRuntime.jsxs("div",{className:"drawui-style-floating",ref:I,children:[jsxRuntime.jsxs("div",{className:"drawui-style-toolbar",ref:b,style:{left:F,top:ge},children:[me.map(t=>jsxRuntime.jsxs("button",{className:`drawui-style-tool-btn${c===t.key?" active":""}`,onClick:()=>v(c===t.key?null:t.key),"data-drawui-tip":drawuiCore.t(Me(t)),type:"button",children:[t.key==="fill"&&jsxRuntime.jsx("span",{className:`drawui-st-swatch${Te(se)?" drawui-st-none":""}`,style:Te(se)?void 0:{background:se}}),t.key==="stroke"&&(ye?jsxRuntime.jsx("span",{className:`drawui-st-line${Te(_)?" drawui-st-line-none":""}`,style:Te(_)?void 0:{background:_}}):jsxRuntime.jsx("span",{className:`drawui-st-frame${Te(_)?" drawui-st-frame-none":""}`,style:Te(_)?void 0:{borderColor:_}})),t.key==="text"&&jsxRuntime.jsx("span",{className:"drawui-st-text",style:{color:ee},children:"A"}),t.key==="highlight"&&jsxRuntime.jsx("span",{className:`drawui-st-hl${Te(m)?" drawui-st-none":""}`,style:Te(m)?void 0:{background:m},children:"A"})]},t.key)),i&&jsxRuntime.jsx("button",{className:`drawui-style-tool-btn${c==="more"?" active":""}`,onClick:()=>v(c==="more"?null:"more"),"data-drawui-tip":drawuiCore.t("style.connection"),type:"button",children:"\u22EF"}),fe&&jsxRuntime.jsx("button",{className:`drawui-style-tool-btn${c==="prefix"?" active":""}`,onClick:()=>v(c==="prefix"?null:"prefix"),"data-drawui-tip":drawuiCore.t("style.prefix"),type:"button",children:jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",width:"18",height:"18",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",children:[jsxRuntime.jsx("circle",{cx:"5",cy:"8",r:"1.7",fill:"currentColor",stroke:"none"}),jsxRuntime.jsx("circle",{cx:"5",cy:"16",r:"1.7",fill:"currentColor",stroke:"none"}),jsxRuntime.jsx("line",{x1:"10.5",y1:"8",x2:"20",y2:"8"}),jsxRuntime.jsx("line",{x1:"10.5",y1:"16",x2:"20",y2:"16"})]})})]}),x&&jsxRuntime.jsx("div",{className:"drawui-style-popover",ref:z,style:{left:Ke,top:Ee},children:c==="prefix"?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:"drawui-style-popover-title",children:drawuiCore.t("style.prefix")}),jsxRuntime.jsx("div",{className:"drawui-muted-hint",children:drawuiCore.t("style.prefix.soon")})]}):w?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:"drawui-style-popover-title",children:drawuiCore.t(Me(w))}),jsxRuntime.jsxs("div",{className:"drawui-color-row",children:[w.hasTransparent&&jsxRuntime.jsx("button",{className:`drawui-color-swatch drawui-color-swatch-transparent${Te(le[w.key])?" active":""}`,onClick:()=>pe(w.key,"transparent"),"aria-label":drawuiCore.t("style.none"),type:"button"}),un.map(t=>jsxRuntime.jsx("button",{className:`drawui-color-swatch${Nt(t,le[w.key])?" active":""}`,style:{background:t},onClick:()=>pe(w.key,t),"aria-label":t,type:"button"},t)),P.map(t=>jsxRuntime.jsx("button",{className:`drawui-color-swatch drawui-color-custom${Nt(t,le[w.key])?" active":""}`,style:{background:t},onClick:()=>pe(w.key,t),"aria-label":t,type:"button"},`custom-${t}`)),jsxRuntime.jsxs("span",{className:"drawui-color-swatch drawui-color-add","data-drawui-tip":drawuiCore.t("style.addColor"),children:["+",jsxRuntime.jsx("input",{ref:o,type:"color",defaultValue:"#3b82f6",className:"drawui-color-add-input","aria-label":drawuiCore.t("style.addColor")})]})]}),w.hasOpacity&&jsxRuntime.jsxs("div",{className:"drawui-opacity-row",children:[jsxRuntime.jsx("span",{className:"drawui-opacity-label",children:drawuiCore.t("style.opacity")}),jsxRuntime.jsx("input",{type:"range",min:0,max:100,value:Math.round(Se(w.key)*100),onChange:t=>K(w.key,Number(t.target.value)/100),className:"drawui-opacity-slider"}),jsxRuntime.jsxs("span",{className:"drawui-opacity-value",children:[Math.round(Se(w.key)*100),"%"]})]})]}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:"drawui-style-popover-title",children:drawuiCore.t("style.connection")}),jsxRuntime.jsx("div",{className:"drawui-connection-row",children:yn.map(t=>jsxRuntime.jsxs("button",{className:`drawui-connection-btn${u===t.type?" active":""}`,onClick:()=>he(t.type),"data-drawui-tip":drawuiCore.t(t.labelKey),type:"button",children:[jsxRuntime.jsx("span",{className:"drawui-connection-icon",children:t.icon}),jsxRuntime.jsx("span",{className:"drawui-connection-label",children:drawuiCore.t(t.labelKey)})]},t.type))}),jsxRuntime.jsx("div",{className:"drawui-style-popover-title",children:drawuiCore.t("style.arrow")}),jsxRuntime.jsx("div",{className:"drawui-connection-row",children:fn.map(t=>jsxRuntime.jsxs("button",{className:`drawui-connection-btn${p===t.type?" active":""}`,onClick:()=>ce(t.type),"data-drawui-tip":drawuiCore.t(t.labelKey),type:"button",children:[jsxRuntime.jsx("span",{className:"drawui-connection-icon",children:t.icon}),jsxRuntime.jsx("span",{className:"drawui-connection-label",children:drawuiCore.t(t.labelKey)})]},t.type))}),jsxRuntime.jsx("div",{className:"drawui-style-popover-title",children:drawuiCore.t("style.dashed")}),jsxRuntime.jsxs("div",{className:"drawui-connection-row",children:[jsxRuntime.jsxs("button",{className:`drawui-connection-btn${y?"":" active"}`,onClick:()=>Ce(false),"data-drawui-tip":drawuiCore.t("style.solid"),type:"button",children:[jsxRuntime.jsx("span",{className:"drawui-connection-icon",children:"\u2501"}),jsxRuntime.jsx("span",{className:"drawui-connection-label",children:drawuiCore.t("style.solid")})]}),jsxRuntime.jsxs("button",{className:`drawui-connection-btn${y?" active":""}`,onClick:()=>Ce(true),"data-drawui-tip":drawuiCore.t("style.dashed"),type:"button",children:[jsxRuntime.jsx("span",{className:"drawui-connection-icon",children:"\u2504"}),jsxRuntime.jsx("span",{className:"drawui-connection-label",children:drawuiCore.t("style.dashed")})]})]})]})})]})});var pt=14,zt=20,kn=["#1f2937","#ef4444","#f97316","#facc15","#22c55e","#3b82f6","#8b5cf6","#ec4899","#9ca3af"],Sn=[12,14,16,18,20,24];function Bt(a,e,n){let i=a,u=n,p=i.charAt(0);if(i.length>1&&(p==="+"||p==="-"||p==="#"||p==="~")&&i.charAt(1)===" "&&(u=p,i=i.slice(2)),i=i.replace(/^\s+|\s+$/g,""),e==="attribute"){let v=i.indexOf(":");return v===-1?{visibility:u,name:i,type:"",params:"",returnType:""}:{visibility:u,name:i.slice(0,v).replace(/^\s+|\s+$/g,""),type:i.slice(v+1).replace(/^\s+|\s+$/g,""),params:"",returnType:""}}let y=i.indexOf("(");if(y===-1){let v=i.lastIndexOf(":");return v===-1?{visibility:u,name:i,type:"",params:"",returnType:""}:{visibility:u,name:i.slice(0,v).replace(/^\s+|\s+$/g,""),type:"",params:"",returnType:i.slice(v+1).replace(/^\s+|\s+$/g,"")}}let l=i.slice(0,y).replace(/^\s+|\s+$/g,""),C=i.indexOf(")",y);if(C===-1)return {visibility:u,name:l,type:"",params:i.slice(y+1).replace(/^\s+|\s+$/g,""),returnType:""};let f=i.slice(y+1,C).replace(/^\s+|\s+$/g,""),c=i.slice(C+1).replace(/^\s+|\s+$/g,"");return c.startsWith(":")&&(c=c.slice(1).replace(/^\s+|\s+$/g,"")),{visibility:u,name:l,type:"",params:f,returnType:c}}function Cn(a,e){let n=`${e.visibility} `;return a==="attribute"?`${n}${e.name}: ${e.type??""}`:`${n}${e.name}(${e.params??""}): ${e.returnType??""}`}var Dt=react.memo(function({editor:e,umlClass:n,editing:i}){let[,u]=react.useState(0);X(),react.useEffect(()=>{if(!e)return;let h=e.subscribe(()=>u(N=>N+1));return ()=>{h();}},[e]);let[p,y]=react.useState(null),[l,C]=react.useState(false),f=react.useRef(null),c=react.useRef(null),v=react.useCallback((h,N)=>{f.current&&(clearTimeout(f.current),f.current=null),y({section:h,rowId:N}),C(false);},[]),B=react.useCallback(()=>{f.current&&clearTimeout(f.current),f.current=window.setTimeout(()=>{y(null),C(false);},150);},[]);if(!e||!n||i!==n.id)return null;let I=e.getCamera(),{id:b,x:z,y:k,width:D,height:P,className:ue,methods:o}=n,s=n.type==="uml-interface",d=s?[]:n.attributes,q=D/2,Z=P/2,A=drawuiCore.UML_HEADER_HEIGHT,V=drawuiCore.UML_LINE_HEIGHT,se=drawuiCore.UML_PADDING_X,_=drawuiCore.UML_PADDING_Y,ee=s?0:d.length>0?d.length*V+_*2:_*2,m=I.zoom,le=(D-se*2)*m,Ne=4*m,Se=I.pageToScreen({x:z-q+se,y:k}),pe=I.pageToScreen({x:z,y:k-Z+A/2}),K=h=>I.pageToScreen({x:z,y:h}).y,he=V*m,ce=h=>k+(-Z+A+_+V/2+h*V),Ce=h=>k+(-Z+A+ee+_+V/2+h*V),ye=k+(-Z+A+ee),fe=k+Z,me={background:"#ffffff",borderWidth:1,borderStyle:"solid",borderColor:"transparent",outline:"none",padding:0,fontFamily:"sans-serif",boxSizing:"border-box"},Me=(h,N)=>{let L=d.find($=>$.id===h);if(!L)return;let E=Bt(N,"attribute",L.visibility);e.updateUmlClass(b,{attributes:d.map($=>$.id===h?{...$,...E}:$)});},w=(h,N)=>{let L=o.find(F=>F.id===h);if(!L)return;let E=Bt(N,"method",L.visibility),$=o.map(F=>F.id===h?{...F,...E}:F);s?e.updateUmlInterface(b,{methods:$}):e.updateUmlClass(b,{methods:$});},x=(h,N,L)=>{c.current={section:h,from:N},L.dataTransfer.effectAllowed="move",L.dataTransfer.setData("text/plain",`${h}:${N}`);},oe=h=>{h.preventDefault(),h.dataTransfer.dropEffect="move";},O=(h,N,L)=>{L.preventDefault();let E=c.current;!E||E.section!==h||(h==="attribute"?e.reorderUmlAttribute(b,E.from,N):e.reorderUmlMethod(b,E.from,N),c.current=null);},G=(h,N,L,E)=>{let $=K(E),F=p?.section===h&&p.rowId===L.id,ge=(L.fontSize||drawuiCore.UML_FONT_SIZE)*m,Ke=L.textColor||"#1f2937",Ee={position:"absolute",left:Se.x-pt*m-Ne,top:$-he/2,width:pt*m+Ne+le+zt*m,height:he,display:"flex",alignItems:"center",gap:2,pointerEvents:"none",zIndex:53},t={...me,width:le,height:he-2,fontSize:ge,color:Ke,textDecoration:L.strikethrough?"line-through":"none",pointerEvents:"auto",...F?{borderColor:"var(--dw-primary)"}:{}},g={width:pt*m,height:he-2,cursor:"grab",color:"#9ca3af",display:"flex",alignItems:"center",justifyContent:"center",userSelect:"none",fontSize:12*m,lineHeight:1,opacity:F?1:.55,pointerEvents:"auto"},Y={width:zt*m,height:he-6,border:"none",background:"transparent",color:"#9ca3af",cursor:"pointer",borderRadius:3,fontSize:14*m,opacity:F?1:.35,pointerEvents:"auto"};return jsxRuntime.jsxs("div",{style:Ee,onDragOver:oe,onDrop:R=>O(h,N,R),children:[jsxRuntime.jsx("span",{style:g,draggable:true,onDragStart:R=>x(h,N,R),"data-drawui-tip":drawuiCore.t("uml.drag"),children:"\u22EE\u22EE"}),jsxRuntime.jsx("input",{style:t,value:Cn(h,L),onChange:R=>h==="attribute"?Me(L.id,R.target.value):w(L.id,R.target.value),onFocus:()=>v(h,L.id),onBlur:B,spellCheck:false}),jsxRuntime.jsx("button",{style:Y,onMouseDown:R=>R.preventDefault(),onClick:()=>{h==="attribute"?e.removeUmlAttribute(b,L.id):e.removeUmlMethod(b,L.id);},"data-drawui-tip":drawuiCore.t("uml.delete"),children:"\xD7"})]},L.id)},ie=(h,N,L)=>{let E=K(N),$=h==="attribute";return jsxRuntime.jsxs("button",{onMouseDown:F=>F.preventDefault(),onClick:()=>$?e.addUmlAttribute(b):e.addUmlMethod(b),className:"drawui-uml-add-row",style:{position:"absolute",left:Se.x,top:E-9*m,height:18*m,padding:`0 ${6*m}px`,fontSize:11*m,lineHeight:1,border:"1px dashed #cbd5e1",background:"rgba(255,255,255,0.85)",color:"#64748b",borderRadius:3,cursor:"pointer",pointerEvents:"auto",display:"flex",alignItems:"center",gap:3,whiteSpace:"nowrap",zIndex:53},"data-drawui-tip":L,children:[jsxRuntime.jsx("span",{style:{fontSize:13*m,lineHeight:1},children:"+"}),jsxRuntime.jsx("span",{children:L})]},`add-${h}`)},ze=()=>{if(!p||p.section==="className")return null;let h=p.section,N=p.rowId,E=(h==="attribute"?d:o).find(T=>T.id===N);if(!E)return null;let $=224*m,F=30*m,ge=I.pageToScreen({x:z,y:k}).x,Ke=I.pageToScreen({x:z,y:k-Z}).y,Ee=20*m,t=Ke-F-Ee,g=ge-$/2,Y=t+F,R=E.textColor||"#1f2937",H=E.fontSize||drawuiCore.UML_FONT_SIZE,be=!!E.strikethrough;return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{style:{position:"absolute",left:ge-.5,top:Y,width:1,height:Ee,background:"#d1d5db",pointerEvents:"none",zIndex:59}}),jsxRuntime.jsxs("div",{className:"drawui-uml-toolbar",style:{position:"absolute",left:g,top:t,width:$,height:F,background:"#ffffff",border:"1px solid #e5e7eb",borderRadius:6,boxShadow:"0 4px 12px rgba(0, 0, 0, 0.1)",display:"flex",alignItems:"center",gap:4*m,padding:`0 ${6*m}px`,pointerEvents:"auto",zIndex:60,fontSize:12*m},onMouseDown:T=>T.preventDefault(),children:[jsxRuntime.jsxs("div",{style:{position:"relative"},children:[jsxRuntime.jsxs("button",{onClick:()=>C(T=>!T),className:"drawui-uml-toolbar-btn","data-drawui-tip":drawuiCore.t("uml.textColor"),style:{border:"none",background:"transparent",cursor:"pointer",padding:2,display:"flex",alignItems:"center",borderRadius:3},children:[jsxRuntime.jsx("span",{style:{fontWeight:700,color:R,fontSize:13*m,textDecoration:be?"line-through":"none"},children:"A"}),jsxRuntime.jsx("span",{style:{width:10*m,height:2*m,background:R,marginLeft:3,borderRadius:1}})]}),l&&jsxRuntime.jsxs("div",{style:{position:"absolute",top:"100%",left:0,marginTop:4,background:"#ffffff",border:"1px solid #e5e7eb",borderRadius:4,padding:4,display:"flex",gap:2,boxShadow:"0 2px 8px rgba(0, 0, 0, 0.1)",zIndex:61},children:[jsxRuntime.jsx("button",{onClick:()=>{e.updateUmlRowStyle(b,h,E.id,{textColor:null}),C(false);},style:{width:14,height:14,border:"1px solid #e5e7eb",background:"transparent",cursor:"pointer",borderRadius:2},"data-drawui-tip":drawuiCore.t("uml.defaultColor")}),kn.map(T=>jsxRuntime.jsx("button",{onClick:()=>{e.updateUmlRowStyle(b,h,E.id,{textColor:T}),C(false);},style:{width:14,height:14,border:"none",background:T,cursor:"pointer",borderRadius:2},"data-drawui-tip":T},T))]})]}),jsxRuntime.jsx("select",{value:H,onChange:T=>e.updateUmlRowStyle(b,h,E.id,{fontSize:Number(T.target.value)}),style:{border:"1px solid #e5e7eb",borderRadius:3,padding:`0 ${2*m}px`,fontSize:12*m,height:20*m,background:"#ffffff"},"data-drawui-tip":drawuiCore.t("uml.fontSize"),children:Sn.map(T=>jsxRuntime.jsx("option",{value:T,children:T},T))}),jsxRuntime.jsx("button",{onClick:()=>e.updateUmlRowStyle(b,h,E.id,{strikethrough:!be}),className:"drawui-uml-toolbar-btn","data-drawui-tip":drawuiCore.t("uml.strikethrough"),style:{border:"none",background:be?"var(--dw-primary-weak)":"transparent",cursor:"pointer",padding:2,borderRadius:3},children:jsxRuntime.jsx("span",{style:{fontWeight:700,fontSize:13*m,textDecoration:"line-through"},children:"A"})}),jsxRuntime.jsx("button",{onClick:()=>{h==="attribute"?e.removeUmlAttribute(b,E.id):e.removeUmlMethod(b,E.id),y(null);},className:"drawui-uml-toolbar-btn","data-drawui-tip":drawuiCore.t("uml.delete"),style:{border:"none",background:"transparent",cursor:"pointer",color:"#ef4444",padding:2,marginLeft:"auto",borderRadius:3},children:jsxRuntime.jsxs("svg",{width:14*m,height:14*m,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("polyline",{points:"3 6 5 6 21 6"}),jsxRuntime.jsx("path",{d:"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"}),jsxRuntime.jsx("path",{d:"M10 11v6"}),jsxRuntime.jsx("path",{d:"M14 11v6"}),jsxRuntime.jsx("path",{d:"M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"})]})})]})]})},Be=I.pageToScreen({x:z-q,y:k}).x,Ae=I.pageToScreen({x:z,y:k-Z}).y,Oe=D*m,Ue=P*m;return jsxRuntime.jsxs("div",{style:{position:"absolute",inset:0,pointerEvents:"none",zIndex:50},children:[jsxRuntime.jsx("div",{style:{position:"absolute",left:Be+1,top:Ae+1,width:Math.max(0,Oe-2),height:Math.max(0,Ue-2),background:"#ffffff",pointerEvents:"none",zIndex:51}}),jsxRuntime.jsx("input",{style:{...me,position:"absolute",left:pe.x-le/2,top:pe.y-A*m/2+2,width:le,height:A*m-4,textAlign:"center",fontWeight:700,fontSize:(n.fontSize||drawuiCore.UML_FONT_SIZE)*m,color:n.textColor||"#1f2937",pointerEvents:"auto",zIndex:52,...p?.section==="className"?{borderColor:"var(--dw-primary)"}:{}},value:ue,onChange:h=>s?e.updateUmlInterface(b,{className:h.target.value}):e.updateUmlClass(b,{className:h.target.value}),onFocus:()=>v("className",""),onBlur:B,spellCheck:false}),!s&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[d.map((h,N)=>G("attribute",N,h,ce(N))),ie("attribute",ye,"\u5C5E\u6027")]}),o.map((h,N)=>G("method",N,h,Ce(N))),ie("method",fe,drawuiCore.t("uml.method")),ze()]})});var Ut=react.memo(function({editor:e,panelOpen:n,onOpenPanel:i}){let[,u]=react.useState(0);X(),react.useEffect(()=>{if(!e)return;let D=e.subscribe(()=>u(P=>P+1));return ()=>{D();}},[e]);let p=react.useRef(false),y=react.useRef(false);if(!e)return null;let l=e.getMindMapEditingShapeId();if(!l||n)return null;let C=e.getMindMapSelectedNode();if(!C||C.shapeId!==l)return null;let f=e.getMindMapNode(l,C.nodeId),c=e.getMindMapNodeScreenRect(l,C.nodeId);if(!f||!c)return null;let v=e.getCamera().getZoom(),B=drawuiCore.MINDMAP_FONT_SIZE*v,I=Math.max(100,c.width+24),b=c.height+8,z={position:"absolute",left:c.x+c.width/2,top:c.y-4,transform:"translateX(-50%)",width:I,height:b,border:"1.5px solid var(--dw-primary, #3b82f6)",borderRadius:6,background:"#ffffff",boxShadow:"0 2px 10px rgba(0,0,0,0.15)",outline:"none",padding:`0 ${(f.icon?24:12)*v}px`,fontFamily:"sans-serif",fontSize:B,color:"#1f2937",boxSizing:"border-box",pointerEvents:"auto",zIndex:55},k={position:"absolute",left:c.x+c.width+12,top:c.y+c.height/2-11,width:22,height:22,border:"1px solid #e5e7eb",background:"#ffffff",borderRadius:"50%",cursor:"pointer",color:"#6b7280",fontSize:13,lineHeight:1,display:"flex",alignItems:"center",justifyContent:"center",boxShadow:"0 1px 4px rgba(0,0,0,0.12)",pointerEvents:"auto",zIndex:55};return jsxRuntime.jsxs("div",{style:{position:"absolute",inset:0,pointerEvents:"none",zIndex:50},children:[jsxRuntime.jsx("input",{autoFocus:true,style:z,value:f.text,spellCheck:false,onChange:D=>{let P=!p.current;p.current=true,e.updateMindMapNode(l,C.nodeId,{text:D.target.value},P);},onBlur:()=>{if(y.current){y.current=false;return}e.exitMindMapEdit();},onKeyDown:D=>{D.key==="Enter"?D.target.blur():D.key==="Escape"&&e.exitMindMapEdit();}}),jsxRuntime.jsx("button",{style:k,"data-drawui-tip":drawuiCore.t("mindmap.more"),onMouseDown:D=>{D.preventDefault(),y.current=true,setTimeout(()=>{y.current=false;},300);},onClick:i,children:"\u22EF"})]})});var $t=[...drawuiCore.MINDMAP_COLORS,"#1f2937","#9ca3af"],Wt=["\u{1F4A1}","\u2B50","\u{1F525}","\u{1F4CC}","\u2705","\u2757","\u26A0\uFE0F","\u{1F3F7}\uFE0F"],Dn={position:"absolute",width:232,background:"rgba(255,255,255,0.96)",border:"1px solid #e5e7eb",borderRadius:8,boxShadow:"0 6px 20px rgba(0,0,0,0.12)",padding:"10px 12px",fontSize:12,color:"#1f2937",zIndex:70,boxSizing:"border-box",fontFamily:"sans-serif"},ht={fontSize:11,color:"#6b7280",marginBottom:4,display:"block"},qe={display:"flex",gap:4,alignItems:"center",flexWrap:"wrap"},Je={border:"1px solid #e5e7eb",background:"#ffffff",borderRadius:5,padding:"3px 8px",fontSize:12,color:"#374151",cursor:"pointer",lineHeight:1.5},yt={width:"100%",border:"1px solid #e5e7eb",borderRadius:5,padding:"4px 8px",fontSize:12,outline:"none",boxSizing:"border-box",background:"#ffffff",color:"#1f2937"},Zt=react.memo(function({editor:e,mindMap:n}){let[,i]=react.useState(0);X(),react.useEffect(()=>{if(!e)return;let o=e.subscribe(()=>i(s=>s+1));return ()=>{o();}},[e]);let u=react.useRef(null);if(!e||!n||e.getMindMapEditingShapeId()!==n.id)return null;let p=e.getMindMapSelectedNode();if(!p||p.shapeId!==n.id)return null;let y=o=>{if(o.id===p.nodeId)return o;for(let s of o.children??[]){let d=y(s);if(d)return d}return null},l=y(n.root);if(!l)return null;let C=e.getCamera(),c=drawuiCore.layoutMindMap(n.root).positions.get(l.id);if(!c)return null;let v=C.zoom,B=C.pageToScreen({x:n.x+c.x,y:n.y+c.y}),I=B.x+c.width*v/2+14,b=B.y-80,k=Math.max(8,Math.min(I,(window.innerWidth||1024)-232-8)),D=Math.max(8,Math.min(b,(window.innerHeight||768)-320)),P=o=>{e.updateMindMapNode(n.id,l.id,o);},ue=!!l.id&&l.id!==n.root.id;return jsxRuntime.jsxs("div",{ref:u,style:{...Dn,left:k,top:D},onMouseDown:o=>o.stopPropagation(),children:[jsxRuntime.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:8},children:[jsxRuntime.jsx("span",{style:{fontWeight:600,fontSize:12},children:drawuiCore.t("mindmap.nodeText")}),jsxRuntime.jsx("button",{onClick:()=>e.exitMindMapEdit(),"data-drawui-tip":drawuiCore.t("mindmap.close"),style:{border:"none",background:"transparent",cursor:"pointer",color:"#9ca3af",fontSize:14,lineHeight:1,padding:2},children:"\xD7"})]}),jsxRuntime.jsx("input",{style:{...yt,marginBottom:8},value:l.text,onChange:o=>P({text:o.target.value}),spellCheck:false}),jsxRuntime.jsxs("div",{style:{...qe,marginBottom:10},children:[jsxRuntime.jsxs("button",{style:Je,onClick:()=>e.addMindMapChild(n.id,l.id),children:["+ ",drawuiCore.t("mindmap.addChild")]}),ue&&jsxRuntime.jsxs("button",{style:Je,onClick:()=>e.addMindMapSibling(n.id,l.id),children:["+ ",drawuiCore.t("mindmap.addSibling")]}),!!l.children?.length&&jsxRuntime.jsx("button",{style:Je,onClick:()=>e.toggleMindMapCollapse(n.id,l.id),children:l.collapsed?drawuiCore.t("mindmap.expand"):drawuiCore.t("mindmap.collapse")}),jsxRuntime.jsx("button",{style:{...Je,color:"#ef4444",borderColor:"#fecaca",marginLeft:"auto"},onClick:()=>e.deleteMindMapNode(n.id,l.id),children:drawuiCore.t("mindmap.deleteNode")})]}),jsxRuntime.jsx("span",{style:ht,children:drawuiCore.t("mindmap.color")}),jsxRuntime.jsxs("div",{style:{...qe,marginBottom:10},children:[jsxRuntime.jsx("button",{"data-drawui-tip":drawuiCore.t("mindmap.levelColor"),onClick:()=>P({color:void 0}),style:{width:18,height:18,borderRadius:4,border:"1.5px solid #d1d5db",background:"conic-gradient(#ef4444, #f59e0b, #10b981, #3b82f6, #8b5cf6, #ec4899, #ef4444)",cursor:"pointer",flexShrink:0}}),$t.map(o=>jsxRuntime.jsx("button",{"data-drawui-tip":o,onClick:()=>P({color:o}),style:{width:18,height:18,borderRadius:4,border:l.color===o?"2px solid #111827":"1px solid #d1d5db",background:o,cursor:"pointer",flexShrink:0}},o))]}),jsxRuntime.jsx("span",{style:ht,children:drawuiCore.t("mindmap.icon")}),jsxRuntime.jsxs("div",{style:{...qe,marginBottom:10},children:[jsxRuntime.jsx("button",{"data-drawui-tip":drawuiCore.t("mindmap.noIcon"),onClick:()=>P({icon:void 0}),style:{width:22,height:22,borderRadius:4,border:l.icon?"1px solid #d1d5db":"2px solid #111827",background:"#f9fafb",cursor:"pointer",fontSize:11,color:"#9ca3af",lineHeight:1},children:"\u2205"}),Wt.map(o=>jsxRuntime.jsx("button",{onClick:()=>P({icon:o}),style:{width:22,height:22,borderRadius:4,border:l.icon===o?"2px solid #111827":"1px solid #d1d5db",background:"#f9fafb",cursor:"pointer",fontSize:13,lineHeight:1},children:o},o)),jsxRuntime.jsx("input",{placeholder:"\u270F\uFE0F",defaultValue:l.icon&&!Wt.includes(l.icon)?l.icon:"",onKeyDown:o=>{if(o.key==="Enter"){let s=o.target.value.trim();P({icon:s||void 0});}},onBlur:o=>{let s=o.target.value.trim();s!==l.icon&&P({icon:s||void 0});},style:{...yt,width:56,padding:"2px 4px",textAlign:"center"}})]}),jsxRuntime.jsx("span",{style:ht,children:drawuiCore.t("mindmap.note")}),jsxRuntime.jsx("input",{style:{...yt,marginBottom:6},value:l.note??"",placeholder:drawuiCore.t("mindmap.notePlaceholder"),onChange:o=>P({note:o.target.value||void 0}),spellCheck:false}),!!l.note&&jsxRuntime.jsxs("div",{style:{...qe,marginTop:4},children:[jsxRuntime.jsx("span",{style:{fontSize:11,color:"#6b7280"},children:drawuiCore.t("mindmap.noteColor")}),jsxRuntime.jsx("button",{"data-drawui-tip":drawuiCore.t("mindmap.noteColorDefault"),onClick:()=>P({noteColor:void 0}),style:{width:16,height:16,borderRadius:3,border:l.noteColor?"1px solid #d1d5db":"2px solid #111827",background:"repeating-conic-gradient(#ef4444 0% 25%, #f59e0b 0% 50%, #10b981 0% 75%, #3b82f6 0% 100%)",cursor:"pointer"}}),$t.map(o=>jsxRuntime.jsx("button",{onClick:()=>P({noteColor:o}),style:{width:16,height:16,borderRadius:3,border:l.noteColor===o?"2px solid #111827":"1px solid #d1d5db",background:o,cursor:"pointer"}},o))]})]})});var mt=220,gt=140,Wn="#fafafa";function Zn(a,e){let n=Math.min(a.x,e.x),i=Math.min(a.y,e.y),u=Math.max(a.x+a.width,e.x+e.width),p=Math.max(a.y+a.height,e.y+e.height);return {x:n,y:i,width:u-n,height:p-i}}function _n(a){return {x:a.x+a.width/2,y:a.y+a.height/2}}function Gn(){return {x:0,y:0,width:0,height:0}}function Fn(a){let e=1/0,n=1/0,i=-1/0,u=-1/0,p=false;for(let y of a){let l=wt(y);l&&(p=true,l.x<e&&(e=l.x),l.y<n&&(n=l.y),l.x+l.width>i&&(i=l.x+l.width),l.y+l.height>u&&(u=l.y+l.height));}return p?{x:e,y:n,width:i-e,height:u-n}:null}function wt(a){switch(a.type){case "rectangle":case "rounded-rectangle":case "ellipse":case "diamond":case "triangle":case "hexagon":case "parallelogram":case "trapezoid":case "pentagon":case "octagon":case "star":case "uml-class":case "uml-interface":case "mind-map":case "text":return {x:a.x-a.width/2,y:a.y-a.height/2,width:a.width,height:a.height};case "circle":return {x:a.x-a.radius,y:a.y-a.radius,width:a.radius*2,height:a.radius*2};case "line":case "arrow":{let e=a.points;if(!e||e.length===0)return null;let n=1/0,i=1/0,u=-1/0,p=-1/0;for(let y of e)y.x<n&&(n=y.x),y.y<i&&(i=y.y),y.x>u&&(u=y.x),y.y>p&&(p=y.y);return {x:n,y:i,width:u-n,height:p-i}}case "draw":{let e=a,n=e.width,i=e.height;if(typeof n=="number"&&typeof i=="number")return {x:e.x-n/2,y:e.y-i/2,width:n,height:i};let u=e.points;if(!u||u.length===0)return null;let p=1/0,y=1/0,l=-1/0,C=-1/0;for(let f of u){let c=f.x+e.x,v=f.y+e.y;c<p&&(p=c),v<y&&(y=v),c>l&&(l=c),v>C&&(C=v);}return {x:p,y,width:l-p,height:C-y}}default:return null}}function Vn(a){let e=a.getCamera(),n=e.screenToPage({x:0,y:0}),i=e.screenToPage({x:window.innerWidth,y:window.innerHeight});return {x:n.x,y:n.y,width:i.x-n.x,height:i.y-n.y}}function Yn(a,e,n){if(a.width<=0||a.height<=0)return {x:a.x-e/2,y:a.y-n/2,width:e,height:n};let i=e/n,u=a.width,p=u/i;p<a.height&&(p=a.height,u=p*i);let y=_n(a);return {x:y.x-u/2,y:y.y-p/2,width:u,height:p}}function bt(a,e,n,i){let u=(a-n.left)/n.width,p=(e-n.top)/n.height;return {x:i.x+u*i.width,y:i.y+p*i.height}}var Ft=react.memo(function({editor:e}){let n=react.useRef(null),i=react.useRef(null),[u,p]=react.useState(false),[y,l]=react.useState(100),[C,f]=react.useState(false),[c,v]=react.useState(false);X();let B=react.useRef(null),I=react.useRef(null);react.useLayoutEffect(()=>{let o=n.current,s=i.current;if(!o||!s)return;let d=window.devicePixelRatio||1;o.width=Math.round(mt*d),o.height=Math.round(gt*d),o.style.width=`${mt}px`,o.style.height=`${gt}px`;},[u]);let b=react.useCallback(()=>{let o=n.current,s=i.current;if(!o||!s||!e)return;let d=o.getContext("2d");if(!d)return;let q=mt,Z=gt,A=o.width,V=o.height,se=e.getShapes(),_=new Set(e.getSelectedIds()),ee=drawuiCore.getTheme(),m=drawuiCore.hexToRgba(ee.text,.16),le=ee.primary,Ne=drawuiCore.hexToRgba(ee.primary,.18),Se=drawuiCore.hexToRgba(ee.primary,.85),pe=Fn(se),K=Vn(e),he=pe?Zn(pe,K):K.width>0?K:Gn(),ce=Yn(he,q,Z);I.current=ce;let Ce=A/ce.width,ye=V/ce.height,fe=q/ce.width;d.setTransform(1,0,0,1,0,0),d.fillStyle=Wn,d.fillRect(0,0,A,V),d.setTransform(Ce,0,0,ye,-Ce*ce.x,-ye*ce.y),d.fillStyle=m;for(let w of se){let x=wt(w);x&&d.fillRect(x.x,x.y,x.width,x.height);}d.fillStyle=le;for(let w of se){if(!_.has(w.id))continue;let x=wt(w);x&&d.fillRect(x.x,x.y,x.width,x.height);}d.fillStyle=Ne,d.fillRect(K.x,K.y,K.width,K.height);let me=1.5/fe;d.strokeStyle=Se,d.lineWidth=me,d.lineJoin="round";let Me=Math.min(K.width/6,K.height/6,6/fe);if(d.beginPath(),Me*fe<1)d.rect(K.x,K.y,K.width,K.height);else {let w=K.x,x=K.y,oe=K.width,O=K.height,G=Math.min(Me,oe/2,O/2);d.moveTo(w+G,x),d.lineTo(w+oe-G,x),d.quadraticCurveTo(w+oe,x,w+oe,x+G),d.lineTo(w+oe,x+O-G),d.quadraticCurveTo(w+oe,x+O,w+oe-G,x+O),d.lineTo(w+G,x+O),d.quadraticCurveTo(w,x+O,w,x+O-G),d.lineTo(w,x+G),d.quadraticCurveTo(w,x,w+G,x),d.closePath();}d.stroke(),d.setTransform(1,0,0,1,0,0);},[e]);react.useEffect(()=>{if(!e||u)return;b();let o=e.subscribe(b),s=drawuiCore.subscribeTheme(b),d=()=>b();return window.addEventListener("resize",d),()=>{o(),s(),window.removeEventListener("resize",d);}},[e,u,b]),react.useEffect(()=>{if(!e)return;let o=()=>{let d=e.getCamera().getZoom();l(Math.round(d*100));};o();let s=e.subscribe(o);return ()=>{s();}},[e]);let z=react.useCallback((o,s)=>{if(!e)return;let d=e.getCamera(),q=d.getZoom(),Z=window.innerWidth/2,A=window.innerHeight/2,V=d;V.x=Z-o*q,V.y=A-s*q,e.requestRender();},[e]),k=o=>{if(!e||!i.current||o.button!==0)return;let s=i.current.getBoundingClientRect(),d=I.current;if(!d)return;let q=bt(o.clientX,o.clientY,s,d);B.current={pointerId:o.pointerId,rect:{left:s.left,top:s.top,width:s.width,height:s.height},canvasBox:d},o.currentTarget.setPointerCapture(o.pointerId),v(true),z(q.x,q.y);},D=o=>{if(!c||!e||!B.current||!i.current)return;let s=B.current,d=bt(o.clientX,o.clientY,s.rect,s.canvasBox);z(d.x,d.y);},P=o=>{if(c){v(false),B.current=null;try{o.currentTarget.releasePointerCapture(o.pointerId);}catch{}}},ue=o=>{if(!e||!i.current)return;let s=I.current;if(!s)return;let d=i.current.getBoundingClientRect(),q=bt(o.clientX,o.clientY,d,s);z(q.x,q.y);};return jsxRuntime.jsxs("div",{className:`drawui-minimap ${u?"collapsed":""}`,children:[jsxRuntime.jsx("button",{className:"drawui-minimap-toggle",onClick:()=>p(o=>!o),"data-drawui-tip":u?drawuiCore.t("minimap.expand"):drawuiCore.t("minimap.collapse"),"data-drawui-tip-pos":"top","aria-label":u?drawuiCore.t("minimap.expand"):drawuiCore.t("minimap.collapse"),children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:u?jsxRuntime.jsx("polyline",{points:"9 6 15 12 9 18"}):jsxRuntime.jsx("polyline",{points:"15 6 9 12 15 18"})})}),!u&&jsxRuntime.jsxs("div",{className:"drawui-minimap-panel",children:[jsxRuntime.jsxs("div",{className:"drawui-minimap-header",children:[jsxRuntime.jsx("span",{className:"drawui-minimap-title",children:drawuiCore.t("minimap.title")}),jsxRuntime.jsxs("span",{className:"drawui-minimap-zoom",children:[y,"%"]})]}),jsxRuntime.jsx("div",{ref:i,className:"drawui-minimap-canvas-wrap",style:{cursor:c?"grabbing":C?"pointer":"default"},onPointerEnter:()=>f(true),onPointerLeave:()=>f(false),children:jsxRuntime.jsx("canvas",{ref:n,className:"drawui-minimap-canvas",onPointerDown:k,onPointerMove:D,onPointerUp:P,onPointerCancel:P,onDoubleClick:ue})})]})]})});var ae=a=>jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",width:"18",height:"18",className:"drawui-gen-shape-glyph",fill:"none",stroke:"currentColor",strokeWidth:"1.6",strokeLinecap:"round",strokeLinejoin:"round",children:a}),qn=[{type:"rectangle",labelKey:"shape.rectangle",glyph:ae(jsxRuntime.jsx("rect",{x:"4",y:"7",width:"16",height:"10",rx:"1"}))},{type:"rounded-rectangle",labelKey:"shape.rounded-rectangle",glyph:ae(jsxRuntime.jsx("rect",{x:"4",y:"7",width:"16",height:"10",rx:"4"}))},{type:"circle",labelKey:"shape.circle",glyph:ae(jsxRuntime.jsx("circle",{cx:"12",cy:"12",r:"5.5"}))},{type:"ellipse",labelKey:"shape.ellipse",glyph:ae(jsxRuntime.jsx("ellipse",{cx:"12",cy:"12",rx:"7",ry:"4.5"}))},{type:"diamond",labelKey:"shape.diamond",glyph:ae(jsxRuntime.jsx("path",{d:"M12 5 L19 12 L12 19 L5 12 Z"}))},{type:"triangle",labelKey:"shape.triangle",glyph:ae(jsxRuntime.jsx("path",{d:"M12 4 L20 19 H4 Z"}))},{type:"hexagon",labelKey:"shape.hexagon",glyph:ae(jsxRuntime.jsx("path",{d:"M12 3 L19.5 7.5 V16.5 L12 21 L4.5 16.5 V7.5 Z"}))},{type:"parallelogram",labelKey:"shape.parallelogram",glyph:ae(jsxRuntime.jsx("path",{d:"M6 7 L19 7 L16 17 H7 Z"}))},{type:"trapezoid",labelKey:"shape.trapezoid",glyph:ae(jsxRuntime.jsx("path",{d:"M7 6 H17 L20 18 H4 Z"}))},{type:"pentagon",labelKey:"shape.pentagon",glyph:ae(jsxRuntime.jsx("path",{d:"M12 4 L19.5 9.5 L16.5 18.5 H7.5 L4.5 9.5 Z"}))},{type:"octagon",labelKey:"shape.octagon",glyph:ae(jsxRuntime.jsx("path",{d:"M8 4 H16 L20 8 V16 L16 20 H8 L4 16 V8 Z"}))},{type:"star",labelKey:"shape.star",glyph:ae(jsxRuntime.jsx("path",{d:"M12 3 L14 9.5 L20.5 10 L15.5 14 L17.5 20.5 L12 16.8 L6.5 20.5 L8.5 14 L3.5 10 L10 9.5 Z"}))},{type:"uml-class",labelKey:"shape.uml-class",glyph:ae(jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("rect",{x:"3",y:"4",width:"18",height:"16",rx:"1"}),jsxRuntime.jsx("path",{d:"M3 9 H21"}),jsxRuntime.jsx("path",{d:"M3 15 H21"}),jsxRuntime.jsx("path",{d:"M6 6.5 H10"}),jsxRuntime.jsx("path",{d:"M6 12.5 H12"})]}))},{type:"uml-interface",labelKey:"shape.uml-interface",glyph:ae(jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("rect",{x:"3",y:"4",width:"18",height:"16",rx:"1"}),jsxRuntime.jsx("path",{d:"M3 9 H21"}),jsxRuntime.jsx("path",{d:"M6 6.5 H10"}),jsxRuntime.jsx("path",{d:"M6 12.5 H12"})]}))},{type:"mind-map",labelKey:"shape.mind-map",glyph:ae(jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("circle",{cx:"5",cy:"12",r:"2"}),jsxRuntime.jsx("path",{d:"M7 12h2.6"}),jsxRuntime.jsx("path",{d:"M9.6 12c0-2 1.2-3.4 2.6-3.4"}),jsxRuntime.jsx("path",{d:"M9.6 12c0 2 1.2 3.4 2.6 3.4"}),jsxRuntime.jsx("circle",{cx:"15.2",cy:"8.6",r:"1.3"}),jsxRuntime.jsx("circle",{cx:"15.2",cy:"15.4",r:"1.3"}),jsxRuntime.jsx("circle",{cx:"13.6",cy:"12",r:"1.3"})]}))}];function Vt({editor:a,x:e,y:n,context:i,existingArrowId:u,defaultShapeType:p,onClose:y}){let l=react.useRef(null);X();let C=f=>{a?.createGeneratedConnection(i,{type:f,existingArrowId:u}),y();};return react.useEffect(()=>{let f=B=>{l.current&&!l.current.contains(B.target)&&y();},c=B=>{B.key==="Escape"&&(B.preventDefault(),y());},v=setTimeout(()=>{window.addEventListener("pointerdown",f,true),window.addEventListener("keydown",c,true);},0);return ()=>{clearTimeout(v),window.removeEventListener("pointerdown",f,true),window.removeEventListener("keydown",c,true);}},[y]),jsxRuntime.jsxs("div",{className:"drawui-gen-menu",ref:l,style:{left:e,top:n},children:[jsxRuntime.jsx("div",{className:"drawui-gen-menu-label",children:drawuiCore.t("menu.title")}),jsxRuntime.jsx("div",{className:"drawui-gen-shape-grid",children:qn.map(f=>jsxRuntime.jsxs("button",{className:`drawui-gen-shape-btn${f.type===p?" drawui-gen-shape-active":""}`,onClick:()=>C(f.type),"data-drawui-tip":drawuiCore.t(f.labelKey),children:[f.glyph,jsxRuntime.jsx("span",{className:"drawui-gen-shape-label",children:drawuiCore.t(f.labelKey)})]},f.type))}),jsxRuntime.jsx("div",{className:"drawui-gen-menu-hint",children:drawuiCore.t("menu.cancel")})]})}var to={select:"tool.select",hand:"tool.hand",rectangle:"tool.rectangle","rounded-rectangle":"tool.rounded-rectangle",circle:"tool.circle",ellipse:"tool.ellipse",diamond:"tool.diamond",triangle:"tool.triangle",hexagon:"tool.hexagon",parallelogram:"tool.parallelogram",trapezoid:"tool.trapezoid",pentagon:"tool.pentagon",octagon:"tool.octagon",star:"tool.star","uml-class":"tool.uml-class","uml-interface":"tool.uml-interface",line:"tool.line",arrow:"tool.arrow",text:"tool.text",draw:"tool.draw",pen:"tool.pen",highlighter:"tool.highlighter",eraser:"tool.eraser","mind-map":"tool.mind-map"};function no({initialTool:a="select",className:e="",themeColor:n,language:i="zh-CN",data:u,onChange:p,onReady:y}){let l=react.useRef(null),C=react.useRef(null),f=react.useRef(null),[c,v]=react.useState(null);X();let[B,I]=react.useState(a),[b,z]=react.useState(false),[k,D]=react.useState(0),[P,ue]=react.useState(false),[o,s]=react.useState("straight"),[d,q]=react.useState("end"),[Z,A]=react.useState(false),[V,se]=react.useState(100),[_,ee]=react.useState(null),[m,le]=react.useState(null),[Ne,Se]=react.useState(false),[pe,K]=react.useState(false),[he,ce]=react.useState(null),[Ce,ye]=react.useState(null),[fe,me]=react.useState(false),[Me,w]=react.useState(null),[x,oe]=react.useState(null),O=react.useRef(null),G=react.useRef(0),ie=react.useRef(null),ze=react.useRef(p);ze.current=p;let Be=react.useRef(y);Be.current=y,react.useEffect(()=>{if(!l.current)return;let t=new drawuiCore.Editor(l.current,{theme:n?{primary:n,editBorder:n,selection:{outline:n,handleStroke:n,handleFill:"#ffffff",outlineFill:drawuiCore.hexToRgba(n,.1),shadow:n}}:void 0,language:i,shapes:u,persist:!u});f.current=t,v(t),window.__drawuiEditor=t,Be.current?.(t),a&&t.setActiveTool(a);let g=t.subscribe(()=>{I(t.getActiveTool());let H=t.getSelectedIds();D(H.length);let T=t.getShapes().filter(xe=>H.includes(xe.id)&&(xe.type==="line"||xe.type==="arrow"));if(ue(T.length>0),T.length>0&&T[0].connectionType?s(T[0].connectionType):T.length>0&&s("straight"),T.length>0){let xe=T.find(at=>at.type==="arrow");xe&&(q(xe.arrowHead??"end"),A(xe.dashed??false));}se(Math.round(t.getCamera().getZoom()*100)),Se(t.canUndo()),K(t.canRedo());let we=t.getSelectedUml();ce(we),we||w(null);let Ve=t.getSelectedMindMap();ye(Ve),t.getMindMapEditingShapeId()||me(false),ze.current?.(t.getData());}),Y=t.subscribeNotifications(H=>{le(H),O.current&&clearTimeout(O.current),O.current=setTimeout(()=>le(null),2e3);}),R=t.subscribeUi(H=>{H.kind==="shapeTypeMenu"&&oe({x:H.screenX,y:H.screenY,context:H.context,existingArrowId:H.existingArrowId,defaultShapeType:H.defaultShapeType});});return ()=>{g(),Y(),R(),O.current&&clearTimeout(O.current),cancelAnimationFrame(G.current),t.dispose();}},[a]),react.useEffect(()=>{if(!n)return;let t=C.current;t&&(t.style.setProperty("--dw-primary",n),t.style.setProperty("--dw-primary-hover",drawuiCore.shadeColor(n,-0.12)),t.style.setProperty("--dw-primary-weak",drawuiCore.hexToRgba(n,.1)),t.style.setProperty("--dw-primary-contrast","#ffffff"),t.style.setProperty("--dw-shadow-primary",`0 2px 8px ${drawuiCore.hexToRgba(n,.3)}`)),f.current?.setTheme({primary:n,editBorder:n,selection:{outline:n,handleStroke:n,handleFill:"#ffffff",outlineFill:drawuiCore.hexToRgba(n,.1),shadow:n}});},[n]),react.useEffect(()=>{drawuiCore.setLanguage(i),f.current?.setLanguage(i);},[i]);let Ae=react.useCallback(t=>{f.current?.setActiveTool(t);},[]),Oe=react.useCallback(()=>{f.current?.zoomIn();},[]),Ue=react.useCallback(()=>{f.current?.zoomOut();},[]),h=react.useCallback(()=>{f.current?.resetZoom();},[]),N=react.useCallback(()=>{let t=!b;z(t),f.current?.setShowGrid(t);},[b]),L=react.useCallback(()=>{f.current?.undo();},[]),E=react.useCallback(()=>{f.current?.redo();},[]),$=react.useCallback(t=>{f.current?.downloadImage("drawui",t,{background:"#ffffff"});},[]),F=react.useCallback(t=>{let g=f.current,Y=l.current;if(!g||!Y)return;if(g.isPointerDown()){ie.current!==null&&(ie.current=null,ee(null));return}let R=t.clientX,H=t.clientY;cancelAnimationFrame(G.current),G.current=requestAnimationFrame(()=>{let be=Y.getBoundingClientRect(),T=R-be.left,we=H-be.top,Ve=T+12,xe=we+12,at=g.getSelectedUml()?.id,$e=g.getUmlRowAtScreenPoint({x:T,y:we});if($e&&$e.shape.id!==at&&$e.text){ie.current!==$e.text&&(ie.current=$e.text,ee({text:$e.text,x:Ve,y:xe}));return}let We=g.getShapeAtScreenPoint({x:T,y:we});We&&We.text?ie.current!==We.text&&(ie.current=We.text,ee({text:We.text,x:Ve,y:xe})):ie.current!==null&&(ie.current=null,ee(null));});},[]),ge=react.useCallback(()=>{ee(null);},[]),Ke=react.useCallback(t=>{let g=f.current,Y=l.current;if(!g||!Y)return;let R=Y.getBoundingClientRect(),H=t.clientX-R.left,be=t.clientY-R.top,T=g.getUmlRowAtScreenPoint({x:H,y:be});if(T){w(T.shape.id);return}let we=g.getMindMapNodeAtScreenPoint({x:H,y:be});we&&g.beginMindMapEdit(we.shapeId,we.nodeId);},[]),Ee=react.useCallback(()=>{oe(null);},[]);return jsxRuntime.jsxs("div",{ref:C,className:`drawui-canvas-board ${e}`,children:[jsxRuntime.jsx("canvas",{ref:l,className:"drawui-canvas",onMouseMove:F,onMouseLeave:ge,onDoubleClick:Ke}),_&&jsxRuntime.jsx("div",{className:"drawui-tooltip",style:{left:_.x,top:_.y},children:_.text}),jsxRuntime.jsx(it,{activeTool:B,onToolChange:Ae,showGrid:b,onToggleGrid:N,canUndo:Ne,canRedo:pe,onUndo:L,onRedo:E,onExport:$}),jsxRuntime.jsx(lt,{onZoomIn:Oe,onZoomOut:Ue,onReset:h,zoomLevel:V}),jsxRuntime.jsx(It,{editor:c,selectedCount:k,hasLineSelection:P,currentConnectionType:o,currentArrowHead:d,currentDashed:Z}),jsxRuntime.jsx(Dt,{editor:c,umlClass:he,editing:Me}),jsxRuntime.jsx(Ut,{editor:c,panelOpen:fe,onOpenPanel:()=>me(true)}),fe&&jsxRuntime.jsx(Zt,{editor:c,mindMap:Ce}),jsxRuntime.jsx(Ft,{editor:c}),x&&jsxRuntime.jsx(Vt,{editor:c,x:x.x,y:x.y,context:x.context,existingArrowId:x.existingArrowId,defaultShapeType:x.defaultShapeType,onClose:Ee}),jsxRuntime.jsxs("div",{className:"drawui-status-bar",children:[jsxRuntime.jsx("div",{className:"drawui-status-item",children:jsxRuntime.jsx("span",{children:drawuiCore.t(to[B])})}),jsxRuntime.jsx("div",{className:"drawui-status-item",children:jsxRuntime.jsx("span",{children:k===0?drawuiCore.t("status.none"):drawuiCore.t("status.selected",{n:k})})}),jsxRuntime.jsx("div",{className:"drawui-status-item",children:jsxRuntime.jsxs("span",{children:[V,"%"]})})]}),m&&jsxRuntime.jsxs("div",{className:"drawui-toast",children:[jsxRuntime.jsx("svg",{className:"drawui-toast-icon",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("polyline",{points:"20 6 9 17 4 12"})}),m]})]})}exports.CanvasBoard=no;exports.Toolbar=it;exports.ZoomControl=lt;
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import {memo,useState,useRef,useEffect,useCallback,useLayoutEffect}from'react';import {t,UML_FONT_SIZE,MINDMAP_COLORS,layoutMindMap,getTheme,hexToRgba,subscribeTheme,getLanguage,subscribeLanguage,UML_LINE_HEIGHT,UML_PADDING_Y,UML_PADDING_X,UML_HEADER_HEIGHT,MINDMAP_FONT_SIZE,Editor,shadeColor,setLanguage}from'drawui-core';import {jsx,jsxs,Fragment}from'react/jsx-runtime';function A(){let[s,e]=useState(getLanguage());return useEffect(()=>subscribeLanguage(()=>e(getLanguage())),[]),s}var bt=[{type:"rectangle",icon:jsx("rect",{x:"3",y:"5",width:"18",height:"14",rx:"0"})},{type:"rounded-rectangle",icon:jsx("rect",{x:"3",y:"5",width:"18",height:"14",rx:"4"})},{type:"circle",icon:jsx("circle",{cx:"12",cy:"12",r:"8"})},{type:"ellipse",icon:jsx("ellipse",{cx:"12",cy:"12",rx:"9",ry:"6"})},{type:"diamond",icon:jsx("path",{d:"M12 3L21 12L12 21L3 12Z"})},{type:"triangle",icon:jsx("path",{d:"M12 4L20 19L4 19Z"})},{type:"hexagon",icon:jsx("path",{d:"M12 3L20 7.5V16.5L12 21L4 16.5V7.5Z"})},{type:"parallelogram",icon:jsx("path",{d:"M7 5L20 5L17 19L4 19Z"})},{type:"trapezoid",icon:jsx("path",{d:"M6 5L18 5L21 19L3 19Z"})},{type:"pentagon",icon:jsx("path",{d:"M12 3L21 10L17.5 21L6.5 21L3 10Z"})},{type:"octagon",icon:jsx("path",{d:"M8 3L16 3L21 8L21 16L16 21L8 21L3 16L3 8Z"})},{type:"star",icon:jsx("path",{d:"M12 2L14.5 8.5L21 9L16 13.5L17.5 20L12 16.5L6.5 20L8 13.5L3 9L9.5 8.5Z"})}],Ot=new Set(bt.map(s=>s.type)),_t=[{type:"arrow",icon:"M5 12h14M12 5l7 7-7 7",labelKey:"toolbar.arrow"},{type:"text",icon:"M4 7V4h16v3M9 20h6M12 4v16",labelKey:"toolbar.text"}],Ft=[{type:"pen",icon:"M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3Z",labelKey:"toolbar.pen"},{type:"highlighter",icon:"M14 3l7 7-3 3-7-7 3-3zM9 8L3 14v3h3l6-6",labelKey:"toolbar.highlighter"}],Vt=[{type:"eraser",icon:"M7 21l-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21M22 21H7M5 11l9 9",labelKey:"toolbar.eraser"}],Yt="M18 11V6.5a1.5 1.5 0 0 0-3 0v3.5a1.5 1.5 0 0 0-3 0V3.5a1.5 1.5 0 0 0-3 0v6.5a1.5 1.5 0 0 0-3 0V14a8 8 0 0 0 16 0v-3a1.5 1.5 0 0 0-3 0",et=memo(function({activeTool:e,onToolChange:t$1,showGrid:r,onToggleGrid:u,canUndo:p=false,canRedo:m=false,onUndo:a,onRedo:S,onExport:h}){let[f,l]=useState(false),[b,R]=useState(false),x=useRef(null),K=useRef(null);A();let I=[{format:"png",labelKey:"toolbar.export.png"},{format:"svg",labelKey:"toolbar.export.svg"},{format:"pdf",labelKey:"toolbar.export.pdf"}],z=()=>{x.current&&(clearTimeout(x.current),x.current=null),R(true);},N=()=>{x.current=window.setTimeout(()=>R(false),200);},he=()=>{K.current&&(clearTimeout(K.current),K.current=null),l(true);},n=()=>{K.current=window.setTimeout(()=>{l(false);},200);};return jsx("div",{className:"drawui-toolbar-container",children:jsxs("div",{className:"drawui-toolbar",children:[jsx("button",{className:`drawui-toolbar-button ${e==="select"?"active":""}`,onClick:()=>t$1("select"),title:t("toolbar.select"),children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("circle",{cx:"12",cy:"12",r:"3"})})}),jsx("button",{className:`drawui-toolbar-button ${e==="hand"?"active":""}`,onClick:()=>t$1("hand"),title:t("toolbar.hand"),children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("path",{d:Yt})})}),jsx("div",{className:"drawui-toolbar-divider"}),jsxs("div",{className:"drawui-toolbar-dropdown",onMouseEnter:he,onMouseLeave:n,children:[jsx("button",{className:`drawui-toolbar-button ${Ot.has(e)?"active":""}`,onClick:()=>t$1("rounded-rectangle"),title:"\u5F62\u72B6",children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("rect",{x:"3",y:"5",width:"18",height:"14",rx:"4",ry:"4"})})}),f&&jsx("div",{className:"drawui-toolbar-shape-grid",children:bt.map(i=>jsx("button",{className:`drawui-toolbar-shape-item ${e===i.type?"active":""}`,onClick:()=>{t$1(i.type),l(false);},title:t("tool."+i.type),children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:i.icon})},i.type))})]}),jsx("div",{className:"drawui-toolbar-divider"}),_t.map(i=>jsx("button",{className:`drawui-toolbar-button ${e===i.type?"active":""}`,onClick:()=>t$1(i.type),title:t(i.labelKey),children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("path",{d:i.icon})})},i.type)),jsx("div",{className:"drawui-toolbar-divider"}),Ft.map(i=>jsx("button",{className:`drawui-toolbar-button ${e===i.type?"active":""}`,onClick:()=>t$1(i.type),title:t(i.labelKey),children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("path",{d:i.icon})})},i.type)),jsx("div",{className:"drawui-toolbar-divider"}),Vt.map(i=>jsx("button",{className:`drawui-toolbar-button ${e===i.type?"active":""}`,onClick:()=>t$1(i.type),title:t(i.labelKey),children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("path",{d:i.icon})})},i.type)),jsx("button",{className:`drawui-toolbar-button ${e==="uml-class"?"active":""}`,onClick:()=>t$1("uml-class"),title:t("toolbar.uml-class"),children:jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("rect",{x:"3",y:"3",width:"18",height:"18",rx:"2"}),jsx("line",{x1:"3",y1:"9",x2:"21",y2:"9"}),jsx("line",{x1:"3",y1:"15",x2:"21",y2:"15"}),jsx("line",{x1:"7",y1:"6",x2:"17",y2:"6"}),jsx("line",{x1:"7",y1:"12",x2:"13",y2:"12"}),jsx("line",{x1:"7",y1:"18",x2:"11",y2:"18"})]})}),jsx("button",{className:`drawui-toolbar-button ${e==="uml-interface"?"active":""}`,onClick:()=>t$1("uml-interface"),title:t("toolbar.uml-interface"),children:jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("rect",{x:"3",y:"3",width:"18",height:"18",rx:"2"}),jsx("line",{x1:"3",y1:"9",x2:"21",y2:"9"}),jsx("line",{x1:"7",y1:"6",x2:"17",y2:"6"}),jsx("line",{x1:"7",y1:"12",x2:"13",y2:"12"})]})}),jsx("button",{className:`drawui-toolbar-button ${e==="mind-map"?"active":""}`,onClick:()=>t$1("mind-map"),title:t("toolbar.mind-map"),children:jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("circle",{cx:"5",cy:"12",r:"2.4"}),jsx("path",{d:"M7.4 12h3.6"}),jsx("path",{d:"M11 12c0-2.6 1.6-4.4 3.4-4.4"}),jsx("path",{d:"M11 12c0 2.6 1.6 4.4 3.4 4.4"}),jsx("circle",{cx:"17.4",cy:"7.6",r:"1.7"}),jsx("circle",{cx:"17.4",cy:"16.4",r:"1.7"}),jsx("circle",{cx:"15.6",cy:"12",r:"1.7"})]})}),jsx("div",{className:"drawui-toolbar-divider"}),jsx("button",{className:`drawui-toolbar-button ${r?"active":""}`,onClick:u,title:t("toolbar.grid"),children:jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("rect",{x:"3",y:"3",width:"7",height:"7",rx:"1"}),jsx("rect",{x:"14",y:"3",width:"7",height:"7",rx:"1"}),jsx("rect",{x:"14",y:"14",width:"7",height:"7",rx:"1"}),jsx("rect",{x:"3",y:"14",width:"7",height:"7",rx:"1"})]})}),jsx("div",{className:"drawui-toolbar-divider"}),jsx("button",{className:"drawui-toolbar-button",onClick:a,disabled:!p,style:p?void 0:{opacity:.4,cursor:"default"},title:t("toolbar.undo"),children:jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("path",{d:"M3 7v6h6"}),jsx("path",{d:"M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"})]})}),jsx("button",{className:"drawui-toolbar-button",onClick:S,disabled:!m,style:m?void 0:{opacity:.4,cursor:"default"},title:t("toolbar.redo"),children:jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("path",{d:"M21 7v6h-6"}),jsx("path",{d:"M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3L21 13"})]})}),jsx("div",{className:"drawui-toolbar-divider"}),jsxs("div",{className:"drawui-toolbar-dropdown",onMouseEnter:z,onMouseLeave:N,children:[jsx("button",{className:"drawui-toolbar-button",title:t("toolbar.export"),children:jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("path",{d:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"}),jsx("polyline",{points:"7 10 12 15 17 10"}),jsx("line",{x1:"12",y1:"15",x2:"12",y2:"3"})]})}),b&&jsx("div",{className:"drawui-toolbar-shape-grid drawui-toolbar-export-grid",children:I.map(i=>jsx("button",{className:"drawui-toolbar-shape-item drawui-toolbar-export-item",onClick:()=>{h?.(i.format),R(false);},title:t(i.labelKey),children:t(i.labelKey)},i.format))})]})]})})});var tt=memo(function({onZoomIn:e,onZoomOut:t$1,onReset:r,zoomLevel:u=100}){return A(),jsxs("div",{className:"drawui-zoom-control",children:[jsx("button",{className:"drawui-zoom-button",onClick:e,title:t("zoom.in"),children:jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("line",{x1:"12",y1:"5",x2:"12",y2:"19"}),jsx("line",{x1:"5",y1:"12",x2:"19",y2:"12"})]})}),jsxs("div",{className:"drawui-zoom-level",children:[u,"%"]}),jsx("button",{className:"drawui-zoom-button",onClick:t$1,title:"\u7F29\u5C0F",children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("line",{x1:"12",y1:"5",x2:"12",y2:"19"})})}),jsx("button",{className:"drawui-zoom-button",onClick:r,title:t("zoom.reset"),children:jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("path",{d:"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"}),jsx("path",{d:"M3 3v5h5"})]})})]})});var wt=["#1f2937","#ef4444","#f97316","#facc15","#22c55e","#3b82f6","#8b5cf6","#ec4899","#9ca3af","#ffffff"],vt=[{key:"stroke",labelKey:"style.stroke",hasTransparent:false},{key:"fill",labelKey:"style.fill",hasTransparent:true},{key:"text",labelKey:"style.text",hasTransparent:false},{key:"highlight",labelKey:"style.highlight",hasTransparent:true}],jt=[{type:"straight",labelKey:"style.connection.straight",icon:"\u2501"},{type:"polyline",labelKey:"style.connection.polyline",icon:jsx("svg",{viewBox:"0 0 24 24",width:"16",height:"16",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("path",{d:"M4 8 C 12 8, 12 16, 20 16"})})},{type:"orthogonal",labelKey:"style.connection.orthogonal",icon:"\u2517"},{type:"curve",labelKey:"style.connection.curve",icon:"\u223F"}],qt=[{type:"none",labelKey:"style.arrowhead.none",icon:"\u2501"},{type:"end",labelKey:"style.arrowhead.end",icon:"\u2192"},{type:"start",labelKey:"style.arrowhead.start",icon:"\u2190"},{type:"both",labelKey:"style.arrowhead.both",icon:"\u21C4"},{type:"inheritance",labelKey:"style.arrowhead.inheritance",icon:"\u2501\u2501\u25B7"},{type:"composition",labelKey:"style.arrowhead.composition",icon:"\u25C6\u2501\u2501"},{type:"aggregation",labelKey:"style.arrowhead.aggregation",icon:"\u25C7\u2501\u2501"}],kt=memo(function({editor:e,selectedCount:t$1,hasLineSelection:r,currentConnectionType:u,currentArrowHead:p,currentDashed:m}){if(A(),!e||t$1===0)return null;let a=(l,b)=>{switch(l){case "stroke":e.updateSelectedShapesStyle({strokeColor:b});break;case "fill":e.updateSelectedShapesStyle({fillColor:b});break;case "text":e.updateSelectedShapesText({textColor:b});break;case "highlight":e.updateSelectedShapesText({highlightColor:b});break}},S=l=>{e.updateConnectionType(l);},h=l=>{e.updateArrowHeadType(l);},f=l=>{e.updateArrowDashed(l);};return jsxs("div",{className:"drawui-style-panel",children:[jsx("div",{className:"drawui-style-col",children:vt.slice(0,2).map(l=>jsxs("div",{className:"drawui-style-group",children:[jsx("div",{className:"drawui-style-group-label",children:t(l.labelKey)}),jsxs("div",{className:"drawui-color-row",children:[l.hasTransparent&&jsx("button",{className:"drawui-color-swatch drawui-color-swatch-transparent",onClick:()=>a(l.key,"transparent"),title:t("style.none")}),wt.map(b=>jsx("button",{className:"drawui-color-swatch",style:{background:b},onClick:()=>a(l.key,b),title:b},`${l.key}-${b}`))]})]},l.key))}),jsx("div",{className:"drawui-style-divider"}),jsx("div",{className:"drawui-style-col",children:vt.slice(2).map(l=>jsxs("div",{className:"drawui-style-group",children:[jsx("div",{className:"drawui-style-group-label",children:t(l.labelKey)}),jsxs("div",{className:"drawui-color-row",children:[l.hasTransparent&&jsx("button",{className:"drawui-color-swatch drawui-color-swatch-transparent",onClick:()=>a(l.key,"transparent"),title:t("style.none")}),wt.map(b=>jsx("button",{className:"drawui-color-swatch",style:{background:b},onClick:()=>a(l.key,b),title:b},`${l.key}-${b}`))]})]},l.key))}),r&&jsxs(Fragment,{children:[jsx("div",{className:"drawui-style-divider"}),jsxs("div",{className:"drawui-style-col",children:[jsxs("div",{className:"drawui-style-group",children:[jsx("div",{className:"drawui-style-group-label",children:t("style.connection")}),jsx("div",{className:"drawui-connection-row",children:jt.map(l=>jsxs("button",{className:`drawui-connection-btn${u===l.type?" active":""}`,onClick:()=>S(l.type),title:t(l.labelKey),children:[jsx("span",{className:"drawui-connection-icon",children:l.icon}),jsx("span",{className:"drawui-connection-label",children:t(l.labelKey)})]},l.type))})]}),jsxs("div",{className:"drawui-style-group",children:[jsx("div",{className:"drawui-style-group-label",children:t("style.arrow")}),jsx("div",{className:"drawui-connection-row",children:qt.map(l=>jsxs("button",{className:`drawui-connection-btn${p===l.type?" active":""}`,onClick:()=>h(l.type),title:t(l.labelKey),children:[jsx("span",{className:"drawui-connection-icon",children:l.icon}),jsx("span",{className:"drawui-connection-label",children:t(l.labelKey)})]},l.type))})]}),jsxs("div",{className:"drawui-style-group",children:[jsx("div",{className:"drawui-style-group-label",children:t("style.dashed")}),jsxs("div",{className:"drawui-connection-row",children:[jsxs("button",{className:`drawui-connection-btn${m?"":" active"}`,onClick:()=>f(false),title:t("style.solid"),children:[jsx("span",{className:"drawui-connection-icon",children:"\u2501"}),jsx("span",{className:"drawui-connection-label",children:t("style.solid")})]}),jsxs("button",{className:`drawui-connection-btn${m?" active":""}`,onClick:()=>f(true),title:t("style.dashed"),children:[jsx("span",{className:"drawui-connection-icon",children:"\u2504"}),jsx("span",{className:"drawui-connection-label",children:t("style.dashed")})]})]})]})]})]})]})});var rt=14,Ct=20,an=["#1f2937","#ef4444","#f97316","#facc15","#22c55e","#3b82f6","#8b5cf6","#ec4899","#9ca3af"],sn=[12,14,16,18,20,24];function Lt(s,e,t){let r=s,u=t,p=r.charAt(0);if(r.length>1&&(p==="+"||p==="-"||p==="#"||p==="~")&&r.charAt(1)===" "&&(u=p,r=r.slice(2)),r=r.replace(/^\s+|\s+$/g,""),e==="attribute"){let l=r.indexOf(":");return l===-1?{visibility:u,name:r,type:"",params:"",returnType:""}:{visibility:u,name:r.slice(0,l).replace(/^\s+|\s+$/g,""),type:r.slice(l+1).replace(/^\s+|\s+$/g,""),params:"",returnType:""}}let m=r.indexOf("(");if(m===-1){let l=r.lastIndexOf(":");return l===-1?{visibility:u,name:r,type:"",params:"",returnType:""}:{visibility:u,name:r.slice(0,l).replace(/^\s+|\s+$/g,""),type:"",params:"",returnType:r.slice(l+1).replace(/^\s+|\s+$/g,"")}}let a=r.slice(0,m).replace(/^\s+|\s+$/g,""),S=r.indexOf(")",m);if(S===-1)return {visibility:u,name:a,type:"",params:r.slice(m+1).replace(/^\s+|\s+$/g,""),returnType:""};let h=r.slice(m+1,S).replace(/^\s+|\s+$/g,""),f=r.slice(S+1).replace(/^\s+|\s+$/g,"");return f.startsWith(":")&&(f=f.slice(1).replace(/^\s+|\s+$/g,"")),{visibility:u,name:a,type:"",params:h,returnType:f}}function ln(s,e){let t=`${e.visibility} `;return s==="attribute"?`${t}${e.name}: ${e.type??""}`:`${t}${e.name}(${e.params??""}): ${e.returnType??""}`}var Nt=memo(function({editor:e,umlClass:t$1,editing:r}){let[,u]=useState(0);A(),useEffect(()=>{if(!e)return;let d=e.subscribe(()=>u(M=>M+1));return ()=>{d();}},[e]);let[p,m]=useState(null),[a,S]=useState(false),h=useRef(null),f=useRef(null),l=useCallback((d,M)=>{h.current&&(clearTimeout(h.current),h.current=null),m({section:d,rowId:M}),S(false);},[]),b=useCallback(()=>{h.current&&clearTimeout(h.current),h.current=window.setTimeout(()=>{m(null),S(false);},150);},[]);if(!e||!t$1||r!==t$1.id)return null;let R=e.getCamera(),{id:x,x:K,y:I,width:z,height:N,className:he,methods:n}=t$1,i=t$1.type==="uml-interface",c=i?[]:t$1.attributes,_=z/2,ee=N/2,te=UML_HEADER_HEIGHT,Y=UML_LINE_HEIGHT,be=UML_PADDING_X,ie=UML_PADDING_Y,ne=i?0:c.length>0?c.length*Y+ie*2:ie*2,g=R.zoom,ye=(z-be*2)*g,Le=4*g,Te=R.pageToScreen({x:K-_+be,y:I}),Se=R.pageToScreen({x:K,y:I-ee+te/2}),P=d=>R.pageToScreen({x:K,y:d}).y,fe=Y*g,le=d=>I+(-ee+te+ie+Y/2+d*Y),Ne=d=>I+(-ee+te+ne+ie+Y/2+d*Y),Ee=I+(-ee+te+ne),xe=I+ee,Me={background:"#ffffff",borderWidth:1,borderStyle:"solid",borderColor:"transparent",outline:"none",padding:0,fontFamily:"sans-serif",boxSizing:"border-box"},Re=(d,M)=>{let C=c.find($=>$.id===d);if(!C)return;let L=Lt(M,"attribute",C.visibility);e.updateUmlClass(x,{attributes:c.map($=>$.id===d?{...$,...L}:$)});},E=(d,M)=>{let C=n.find(W=>W.id===d);if(!C)return;let L=Lt(M,"method",C.visibility),$=n.map(W=>W.id===d?{...W,...L}:W);i?e.updateUmlInterface(x,{methods:$}):e.updateUmlClass(x,{methods:$});},w=(d,M,C)=>{f.current={section:d,from:M},C.dataTransfer.effectAllowed="move",C.dataTransfer.setData("text/plain",`${d}:${M}`);},oe=d=>{d.preventDefault(),d.dataTransfer.dropEffect="move";},G=(d,M,C)=>{C.preventDefault();let L=f.current;!L||L.section!==d||(d==="attribute"?e.reorderUmlAttribute(x,L.from,M):e.reorderUmlMethod(x,L.from,M),f.current=null);},F=(d,M,C,L)=>{let $=P(L),W=p?.section===d&&p.rowId===C.id,Ie=(C.fontSize||UML_FONT_SIZE)*g,Ke=C.textColor||"#1f2937",Pe={position:"absolute",left:Te.x-rt*g-Le,top:$-fe/2,width:rt*g+Le+ye+Ct*g,height:fe,display:"flex",alignItems:"center",gap:2,pointerEvents:"none",zIndex:53},y={...Me,width:ye,height:fe-2,fontSize:Ie,color:Ke,textDecoration:C.strikethrough?"line-through":"none",pointerEvents:"auto",...W?{borderColor:"var(--dw-primary)"}:{}},V={width:rt*g,height:fe-2,cursor:"grab",color:"#9ca3af",display:"flex",alignItems:"center",justifyContent:"center",userSelect:"none",fontSize:12*g,lineHeight:1,opacity:W?1:.55,pointerEvents:"auto"},se={width:Ct*g,height:fe-6,border:"none",background:"transparent",color:"#9ca3af",cursor:"pointer",borderRadius:3,fontSize:14*g,opacity:W?1:.35,pointerEvents:"auto"};return jsxs("div",{style:Pe,onDragOver:oe,onDrop:B=>G(d,M,B),children:[jsx("span",{style:V,draggable:true,onDragStart:B=>w(d,M,B),title:t("uml.drag"),children:"\u22EE\u22EE"}),jsx("input",{style:y,value:ln(d,C),onChange:B=>d==="attribute"?Re(C.id,B.target.value):E(C.id,B.target.value),onFocus:()=>l(d,C.id),onBlur:b,spellCheck:false}),jsx("button",{style:se,onMouseDown:B=>B.preventDefault(),onClick:()=>{d==="attribute"?e.removeUmlAttribute(x,C.id):e.removeUmlMethod(x,C.id);},title:t("uml.delete"),children:"\xD7"})]},C.id)},ae=(d,M,C)=>{let L=P(M),$=d==="attribute";return jsxs("button",{onMouseDown:W=>W.preventDefault(),onClick:()=>$?e.addUmlAttribute(x):e.addUmlMethod(x),className:"drawui-uml-add-row",style:{position:"absolute",left:Te.x,top:L-9*g,height:18*g,padding:`0 ${6*g}px`,fontSize:11*g,lineHeight:1,border:"1px dashed #cbd5e1",background:"rgba(255,255,255,0.85)",color:"#64748b",borderRadius:3,cursor:"pointer",pointerEvents:"auto",display:"flex",alignItems:"center",gap:3,whiteSpace:"nowrap",zIndex:53},title:C,children:[jsx("span",{style:{fontSize:13*g,lineHeight:1},children:"+"}),jsx("span",{children:C})]},`add-${d}`)},Ae=()=>{if(!p||p.section==="className")return null;let d=p.section,M=p.rowId,L=(d==="attribute"?c:n).find(k=>k.id===M);if(!L)return null;let $=224*g,W=30*g,Ie=R.pageToScreen({x:K,y:I}).x,Ke=R.pageToScreen({x:K,y:I-ee}).y,Pe=20*g,y=Ke-W-Pe,V=Ie-$/2,se=y+W,B=L.textColor||"#1f2937",D=L.fontSize||UML_FONT_SIZE,ce=!!L.strikethrough;return jsxs(Fragment,{children:[jsx("div",{style:{position:"absolute",left:Ie-.5,top:se,width:1,height:Pe,background:"#d1d5db",pointerEvents:"none",zIndex:59}}),jsxs("div",{className:"drawui-uml-toolbar",style:{position:"absolute",left:V,top:y,width:$,height:W,background:"#ffffff",border:"1px solid #e5e7eb",borderRadius:6,boxShadow:"0 4px 12px rgba(0, 0, 0, 0.1)",display:"flex",alignItems:"center",gap:4*g,padding:`0 ${6*g}px`,pointerEvents:"auto",zIndex:60,fontSize:12*g},onMouseDown:k=>k.preventDefault(),children:[jsxs("div",{style:{position:"relative"},children:[jsxs("button",{onClick:()=>S(k=>!k),className:"drawui-uml-toolbar-btn",title:t("uml.textColor"),style:{border:"none",background:"transparent",cursor:"pointer",padding:2,display:"flex",alignItems:"center",borderRadius:3},children:[jsx("span",{style:{fontWeight:700,color:B,fontSize:13*g,textDecoration:ce?"line-through":"none"},children:"A"}),jsx("span",{style:{width:10*g,height:2*g,background:B,marginLeft:3,borderRadius:1}})]}),a&&jsxs("div",{style:{position:"absolute",top:"100%",left:0,marginTop:4,background:"#ffffff",border:"1px solid #e5e7eb",borderRadius:4,padding:4,display:"flex",gap:2,boxShadow:"0 2px 8px rgba(0, 0, 0, 0.1)",zIndex:61},children:[jsx("button",{onClick:()=>{e.updateUmlRowStyle(x,d,L.id,{textColor:null}),S(false);},style:{width:14,height:14,border:"1px solid #e5e7eb",background:"transparent",cursor:"pointer",borderRadius:2},title:t("uml.defaultColor")}),an.map(k=>jsx("button",{onClick:()=>{e.updateUmlRowStyle(x,d,L.id,{textColor:k}),S(false);},style:{width:14,height:14,border:"none",background:k,cursor:"pointer",borderRadius:2},title:k},k))]})]}),jsx("select",{value:D,onChange:k=>e.updateUmlRowStyle(x,d,L.id,{fontSize:Number(k.target.value)}),style:{border:"1px solid #e5e7eb",borderRadius:3,padding:`0 ${2*g}px`,fontSize:12*g,height:20*g,background:"#ffffff"},title:t("uml.fontSize"),children:sn.map(k=>jsx("option",{value:k,children:k},k))}),jsx("button",{onClick:()=>e.updateUmlRowStyle(x,d,L.id,{strikethrough:!ce}),className:"drawui-uml-toolbar-btn",title:t("uml.strikethrough"),style:{border:"none",background:ce?"var(--dw-primary-weak)":"transparent",cursor:"pointer",padding:2,borderRadius:3},children:jsx("span",{style:{fontWeight:700,fontSize:13*g,textDecoration:"line-through"},children:"A"})}),jsx("button",{onClick:()=>{d==="attribute"?e.removeUmlAttribute(x,L.id):e.removeUmlMethod(x,L.id),m(null);},className:"drawui-uml-toolbar-btn",title:t("uml.delete"),style:{border:"none",background:"transparent",cursor:"pointer",color:"#ef4444",padding:2,marginLeft:"auto",borderRadius:3},children:jsxs("svg",{width:14*g,height:14*g,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("polyline",{points:"3 6 5 6 21 6"}),jsx("path",{d:"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"}),jsx("path",{d:"M10 11v6"}),jsx("path",{d:"M14 11v6"}),jsx("path",{d:"M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"})]})})]})]})},Ue=R.pageToScreen({x:K-_,y:I}).x,je=R.pageToScreen({x:K,y:I-ee}).y,qe=z*g,Je=N*g;return jsxs("div",{style:{position:"absolute",inset:0,pointerEvents:"none",zIndex:50},children:[jsx("div",{style:{position:"absolute",left:Ue+1,top:je+1,width:Math.max(0,qe-2),height:Math.max(0,Je-2),background:"#ffffff",pointerEvents:"none",zIndex:51}}),jsx("input",{style:{...Me,position:"absolute",left:Se.x-ye/2,top:Se.y-te*g/2+2,width:ye,height:te*g-4,textAlign:"center",fontWeight:700,fontSize:(t$1.fontSize||UML_FONT_SIZE)*g,color:t$1.textColor||"#1f2937",pointerEvents:"auto",zIndex:52,...p?.section==="className"?{borderColor:"var(--dw-primary)"}:{}},value:he,onChange:d=>i?e.updateUmlInterface(x,{className:d.target.value}):e.updateUmlClass(x,{className:d.target.value}),onFocus:()=>l("className",""),onBlur:b,spellCheck:false}),!i&&jsxs(Fragment,{children:[c.map((d,M)=>F("attribute",M,d,le(M))),ae("attribute",Ee,"\u5C5E\u6027")]}),n.map((d,M)=>F("method",M,d,Ne(M))),ae("method",xe,t("uml.method")),Ae()]})});var It=memo(function({editor:e,panelOpen:t$1,onOpenPanel:r}){let[,u]=useState(0);A(),useEffect(()=>{if(!e)return;let z=e.subscribe(()=>u(N=>N+1));return ()=>{z();}},[e]);let p=useRef(false),m=useRef(false);if(!e)return null;let a=e.getMindMapEditingShapeId();if(!a||t$1)return null;let S=e.getMindMapSelectedNode();if(!S||S.shapeId!==a)return null;let h=e.getMindMapNode(a,S.nodeId),f=e.getMindMapNodeScreenRect(a,S.nodeId);if(!h||!f)return null;let l=e.getCamera().getZoom(),b=MINDMAP_FONT_SIZE*l,R=Math.max(100,f.width+24),x=f.height+8,K={position:"absolute",left:f.x+f.width/2,top:f.y-4,transform:"translateX(-50%)",width:R,height:x,border:"1.5px solid var(--dw-primary, #3b82f6)",borderRadius:6,background:"#ffffff",boxShadow:"0 2px 10px rgba(0,0,0,0.15)",outline:"none",padding:`0 ${(h.icon?24:12)*l}px`,fontFamily:"sans-serif",fontSize:b,color:"#1f2937",boxSizing:"border-box",pointerEvents:"auto",zIndex:55},I={position:"absolute",left:f.x+f.width+12,top:f.y+f.height/2-11,width:22,height:22,border:"1px solid #e5e7eb",background:"#ffffff",borderRadius:"50%",cursor:"pointer",color:"#6b7280",fontSize:13,lineHeight:1,display:"flex",alignItems:"center",justifyContent:"center",boxShadow:"0 1px 4px rgba(0,0,0,0.12)",pointerEvents:"auto",zIndex:55};return jsxs("div",{style:{position:"absolute",inset:0,pointerEvents:"none",zIndex:50},children:[jsx("input",{autoFocus:true,style:K,value:h.text,spellCheck:false,onChange:z=>{let N=!p.current;p.current=true,e.updateMindMapNode(a,S.nodeId,{text:z.target.value},N);},onBlur:()=>{if(m.current){m.current=false;return}e.exitMindMapEdit();},onKeyDown:z=>{z.key==="Enter"?z.target.blur():z.key==="Escape"&&e.exitMindMapEdit();}}),jsx("button",{style:I,title:t("mindmap.more"),onMouseDown:z=>{z.preventDefault(),m.current=true,setTimeout(()=>{m.current=false;},300);},onClick:r,children:"\u22EF"})]})});var Pt=[...MINDMAP_COLORS,"#1f2937","#9ca3af"],Ht=["\u{1F4A1}","\u2B50","\u{1F525}","\u{1F4CC}","\u2705","\u2757","\u26A0\uFE0F","\u{1F3F7}\uFE0F"],vn={position:"absolute",width:232,background:"rgba(255,255,255,0.96)",border:"1px solid #e5e7eb",borderRadius:8,boxShadow:"0 6px 20px rgba(0,0,0,0.12)",padding:"10px 12px",fontSize:12,color:"#1f2937",zIndex:70,boxSizing:"border-box",fontFamily:"sans-serif"},it={fontSize:11,color:"#6b7280",marginBottom:4,display:"block"},Ze={display:"flex",gap:4,alignItems:"center",flexWrap:"wrap"},Oe={border:"1px solid #e5e7eb",background:"#ffffff",borderRadius:5,padding:"3px 8px",fontSize:12,color:"#374151",cursor:"pointer",lineHeight:1.5},at={width:"100%",border:"1px solid #e5e7eb",borderRadius:5,padding:"4px 8px",fontSize:12,outline:"none",boxSizing:"border-box",background:"#ffffff",color:"#1f2937"},Kt=memo(function({editor:e,mindMap:t$1}){let[,r]=useState(0);A(),useEffect(()=>{if(!e)return;let n=e.subscribe(()=>r(i=>i+1));return ()=>{n();}},[e]);let u=useRef(null);if(!e||!t$1||e.getMindMapEditingShapeId()!==t$1.id)return null;let p=e.getMindMapSelectedNode();if(!p||p.shapeId!==t$1.id)return null;let m=n=>{if(n.id===p.nodeId)return n;for(let i of n.children??[]){let c=m(i);if(c)return c}return null},a=m(t$1.root);if(!a)return null;let S=e.getCamera(),f=layoutMindMap(t$1.root).positions.get(a.id);if(!f)return null;let l=S.zoom,b=S.pageToScreen({x:t$1.x+f.x,y:t$1.y+f.y}),R=b.x+f.width*l/2+14,x=b.y-80,I=Math.max(8,Math.min(R,(window.innerWidth||1024)-232-8)),z=Math.max(8,Math.min(x,(window.innerHeight||768)-320)),N=n=>{e.updateMindMapNode(t$1.id,a.id,n);},he=!!a.id&&a.id!==t$1.root.id;return jsxs("div",{ref:u,style:{...vn,left:I,top:z},onMouseDown:n=>n.stopPropagation(),children:[jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:8},children:[jsx("span",{style:{fontWeight:600,fontSize:12},children:t("mindmap.nodeText")}),jsx("button",{onClick:()=>e.exitMindMapEdit(),title:t("mindmap.close"),style:{border:"none",background:"transparent",cursor:"pointer",color:"#9ca3af",fontSize:14,lineHeight:1,padding:2},children:"\xD7"})]}),jsx("input",{style:{...at,marginBottom:8},value:a.text,onChange:n=>N({text:n.target.value}),spellCheck:false}),jsxs("div",{style:{...Ze,marginBottom:10},children:[jsxs("button",{style:Oe,onClick:()=>e.addMindMapChild(t$1.id,a.id),children:["+ ",t("mindmap.addChild")]}),he&&jsxs("button",{style:Oe,onClick:()=>e.addMindMapSibling(t$1.id,a.id),children:["+ ",t("mindmap.addSibling")]}),!!a.children?.length&&jsx("button",{style:Oe,onClick:()=>e.toggleMindMapCollapse(t$1.id,a.id),children:a.collapsed?t("mindmap.expand"):t("mindmap.collapse")}),jsx("button",{style:{...Oe,color:"#ef4444",borderColor:"#fecaca",marginLeft:"auto"},onClick:()=>e.deleteMindMapNode(t$1.id,a.id),children:t("mindmap.deleteNode")})]}),jsx("span",{style:it,children:t("mindmap.color")}),jsxs("div",{style:{...Ze,marginBottom:10},children:[jsx("button",{title:t("mindmap.levelColor"),onClick:()=>N({color:void 0}),style:{width:18,height:18,borderRadius:4,border:"1.5px solid #d1d5db",background:"conic-gradient(#ef4444, #f59e0b, #10b981, #3b82f6, #8b5cf6, #ec4899, #ef4444)",cursor:"pointer",flexShrink:0}}),Pt.map(n=>jsx("button",{title:n,onClick:()=>N({color:n}),style:{width:18,height:18,borderRadius:4,border:a.color===n?"2px solid #111827":"1px solid #d1d5db",background:n,cursor:"pointer",flexShrink:0}},n))]}),jsx("span",{style:it,children:t("mindmap.icon")}),jsxs("div",{style:{...Ze,marginBottom:10},children:[jsx("button",{title:t("mindmap.noIcon"),onClick:()=>N({icon:void 0}),style:{width:22,height:22,borderRadius:4,border:a.icon?"1px solid #d1d5db":"2px solid #111827",background:"#f9fafb",cursor:"pointer",fontSize:11,color:"#9ca3af",lineHeight:1},children:"\u2205"}),Ht.map(n=>jsx("button",{onClick:()=>N({icon:n}),style:{width:22,height:22,borderRadius:4,border:a.icon===n?"2px solid #111827":"1px solid #d1d5db",background:"#f9fafb",cursor:"pointer",fontSize:13,lineHeight:1},children:n},n)),jsx("input",{placeholder:"\u270F\uFE0F",defaultValue:a.icon&&!Ht.includes(a.icon)?a.icon:"",onKeyDown:n=>{if(n.key==="Enter"){let i=n.target.value.trim();N({icon:i||void 0});}},onBlur:n=>{let i=n.target.value.trim();i!==a.icon&&N({icon:i||void 0});},style:{...at,width:56,padding:"2px 4px",textAlign:"center"}})]}),jsx("span",{style:it,children:t("mindmap.note")}),jsx("input",{style:{...at,marginBottom:6},value:a.note??"",placeholder:t("mindmap.notePlaceholder"),onChange:n=>N({note:n.target.value||void 0}),spellCheck:false}),!!a.note&&jsxs("div",{style:{...Ze,marginTop:4},children:[jsx("span",{style:{fontSize:11,color:"#6b7280"},children:t("mindmap.noteColor")}),jsx("button",{title:t("mindmap.noteColorDefault"),onClick:()=>N({noteColor:void 0}),style:{width:16,height:16,borderRadius:3,border:a.noteColor?"1px solid #d1d5db":"2px solid #111827",background:"repeating-conic-gradient(#ef4444 0% 25%, #f59e0b 0% 50%, #10b981 0% 75%, #3b82f6 0% 100%)",cursor:"pointer"}}),Pt.map(n=>jsx("button",{onClick:()=>N({noteColor:n}),style:{width:16,height:16,borderRadius:3,border:a.noteColor===n?"2px solid #111827":"1px solid #d1d5db",background:n,cursor:"pointer"}},n))]})]})});var lt=220,ct=140,Ln="#fafafa";function Tn(s,e){let t=Math.min(s.x,e.x),r=Math.min(s.y,e.y),u=Math.max(s.x+s.width,e.x+e.width),p=Math.max(s.y+s.height,e.y+e.height);return {x:t,y:r,width:u-t,height:p-r}}function Nn(s){return {x:s.x+s.width/2,y:s.y+s.height/2}}function En(){return {x:0,y:0,width:0,height:0}}function Rn(s){let e=1/0,t=1/0,r=-1/0,u=-1/0,p=false;for(let m of s){let a=ut(m);a&&(p=true,a.x<e&&(e=a.x),a.y<t&&(t=a.y),a.x+a.width>r&&(r=a.x+a.width),a.y+a.height>u&&(u=a.y+a.height));}return p?{x:e,y:t,width:r-e,height:u-t}:null}function ut(s){switch(s.type){case "rectangle":case "rounded-rectangle":case "ellipse":case "diamond":case "triangle":case "hexagon":case "text":return {x:s.x-s.width/2,y:s.y-s.height/2,width:s.width,height:s.height};case "circle":return {x:s.x-s.radius,y:s.y-s.radius,width:s.radius*2,height:s.radius*2};case "line":case "arrow":case "draw":{let e=s.points;if(!e||e.length===0)return null;let t=1/0,r=1/0,u=-1/0,p=-1/0;for(let m of e)m.x<t&&(t=m.x),m.y<r&&(r=m.y),m.x>u&&(u=m.x),m.y>p&&(p=m.y);return {x:t,y:r,width:u-t,height:p-r}}default:return null}}function In(s){let e=s.getCamera(),t=e.screenToPage({x:0,y:0}),r=e.screenToPage({x:window.innerWidth,y:window.innerHeight});return {x:t.x,y:t.y,width:r.x-t.x,height:r.y-t.y}}function Pn(s,e,t){if(s.width<=0||s.height<=0)return {x:s.x-e/2,y:s.y-t/2,width:e,height:t};let r=e/t,u=s.width,p=u/r;p<s.height&&(p=s.height,u=p*r);let m=Nn(s);return {x:m.x-u/2,y:m.y-p/2,width:u,height:p}}function dt(s,e,t,r){let u=(s-t.left)/t.width,p=(e-t.top)/t.height;return {x:r.x+u*r.width,y:r.y+p*r.height}}var Dt=memo(function({editor:e}){let t$1=useRef(null),r=useRef(null),[u,p]=useState(false),[m,a]=useState(100),[S,h]=useState(false),[f,l]=useState(false);A();let b=useRef(null),R=useRef(null);useLayoutEffect(()=>{let n=t$1.current,i=r.current;if(!n||!i)return;let c=window.devicePixelRatio||1;n.width=Math.round(lt*c),n.height=Math.round(ct*c),n.style.width=`${lt}px`,n.style.height=`${ct}px`;},[u]);let x=useCallback(()=>{let n=t$1.current,i=r.current;if(!n||!i||!e)return;let c=n.getContext("2d");if(!c)return;let _=lt,ee=ct,te=n.width,Y=n.height,be=e.getShapes(),ie=new Set(e.getSelectedIds()),ne=getTheme(),g=hexToRgba(ne.text,.16),ye=ne.primary,Le=hexToRgba(ne.primary,.18),Te=hexToRgba(ne.primary,.85),Se=Rn(be),P=In(e),fe=Se?Tn(Se,P):P.width>0?P:En(),le=Pn(fe,_,ee);R.current=le;let Ne=te/le.width,Ee=Y/le.height,xe=_/le.width;c.setTransform(1,0,0,1,0,0),c.fillStyle=Ln,c.fillRect(0,0,te,Y),c.setTransform(Ne,0,0,Ee,-Ne*le.x,-Ee*le.y),c.fillStyle=g;for(let E of be){let w=ut(E);w&&c.fillRect(w.x,w.y,w.width,w.height);}c.fillStyle=ye;for(let E of be){if(!ie.has(E.id))continue;let w=ut(E);w&&c.fillRect(w.x,w.y,w.width,w.height);}c.fillStyle=Le,c.fillRect(P.x,P.y,P.width,P.height);let Me=1.5/xe;c.strokeStyle=Te,c.lineWidth=Me,c.lineJoin="round";let Re=Math.min(P.width/6,P.height/6,6/xe);if(c.beginPath(),Re*xe<1)c.rect(P.x,P.y,P.width,P.height);else {let E=P.x,w=P.y,oe=P.width,G=P.height,F=Math.min(Re,oe/2,G/2);c.moveTo(E+F,w),c.lineTo(E+oe-F,w),c.quadraticCurveTo(E+oe,w,E+oe,w+F),c.lineTo(E+oe,w+G-F),c.quadraticCurveTo(E+oe,w+G,E+oe-F,w+G),c.lineTo(E+F,w+G),c.quadraticCurveTo(E,w+G,E,w+G-F),c.lineTo(E,w+F),c.quadraticCurveTo(E,w,E+F,w),c.closePath();}c.stroke(),c.setTransform(1,0,0,1,0,0);},[e]);useEffect(()=>{if(!e||u)return;x();let n=e.subscribe(x),i=subscribeTheme(x),c=()=>x();return window.addEventListener("resize",c),()=>{n(),i(),window.removeEventListener("resize",c);}},[e,u,x]),useEffect(()=>{if(!e)return;let n=()=>{let c=e.getCamera().getZoom();a(Math.round(c*100));};n();let i=e.subscribe(n);return ()=>{i();}},[e]);let K=useCallback((n,i)=>{if(!e)return;let c=e.getCamera(),_=c.getZoom(),ee=window.innerWidth/2,te=window.innerHeight/2,Y=c;Y.x=ee-n*_,Y.y=te-i*_,e.requestRender();},[e]),I=n=>{if(!e||!r.current||n.button!==0)return;let i=r.current.getBoundingClientRect(),c=R.current;if(!c)return;let _=dt(n.clientX,n.clientY,i,c);b.current={pointerId:n.pointerId,rect:{left:i.left,top:i.top,width:i.width,height:i.height},canvasBox:c},n.currentTarget.setPointerCapture(n.pointerId),l(true),K(_.x,_.y);},z=n=>{if(!f||!e||!b.current||!r.current)return;let i=b.current,c=dt(n.clientX,n.clientY,i.rect,i.canvasBox);K(c.x,c.y);},N=n=>{if(f){l(false),b.current=null;try{n.currentTarget.releasePointerCapture(n.pointerId);}catch{}}},he=n=>{if(!e||!r.current)return;let i=R.current;if(!i)return;let c=r.current.getBoundingClientRect(),_=dt(n.clientX,n.clientY,c,i);K(_.x,_.y);};return jsxs("div",{className:`drawui-minimap ${u?"collapsed":""}`,children:[jsx("button",{className:"drawui-minimap-toggle",onClick:()=>p(n=>!n),title:u?t("minimap.expand"):t("minimap.collapse"),"aria-label":u?t("minimap.expand"):t("minimap.collapse"),children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:u?jsx("polyline",{points:"9 6 15 12 9 18"}):jsx("polyline",{points:"15 6 9 12 15 18"})})}),!u&&jsxs("div",{className:"drawui-minimap-panel",children:[jsxs("div",{className:"drawui-minimap-header",children:[jsx("span",{className:"drawui-minimap-title",children:t("minimap.title")}),jsxs("span",{className:"drawui-minimap-zoom",children:[m,"%"]})]}),jsx("div",{ref:r,className:"drawui-minimap-canvas-wrap",style:{cursor:f?"grabbing":S?"pointer":"default"},onPointerEnter:()=>h(true),onPointerLeave:()=>h(false),children:jsx("canvas",{ref:t$1,className:"drawui-minimap-canvas",onPointerDown:I,onPointerMove:z,onPointerUp:N,onPointerCancel:N,onDoubleClick:he})})]})]})});var Q=s=>jsx("svg",{viewBox:"0 0 24 24",width:"18",height:"18",className:"drawui-gen-shape-glyph",fill:"none",stroke:"currentColor",strokeWidth:"1.6",strokeLinecap:"round",strokeLinejoin:"round",children:s}),zn=[{type:"rectangle",labelKey:"shape.rectangle",glyph:Q(jsx("rect",{x:"4",y:"7",width:"16",height:"10",rx:"1"}))},{type:"rounded-rectangle",labelKey:"shape.rounded-rectangle",glyph:Q(jsx("rect",{x:"4",y:"7",width:"16",height:"10",rx:"4"}))},{type:"circle",labelKey:"shape.circle",glyph:Q(jsx("circle",{cx:"12",cy:"12",r:"5.5"}))},{type:"ellipse",labelKey:"shape.ellipse",glyph:Q(jsx("ellipse",{cx:"12",cy:"12",rx:"7",ry:"4.5"}))},{type:"diamond",labelKey:"shape.diamond",glyph:Q(jsx("path",{d:"M12 5 L19 12 L12 19 L5 12 Z"}))},{type:"triangle",labelKey:"shape.triangle",glyph:Q(jsx("path",{d:"M12 4 L20 19 H4 Z"}))},{type:"hexagon",labelKey:"shape.hexagon",glyph:Q(jsx("path",{d:"M12 3 L19.5 7.5 V16.5 L12 21 L4.5 16.5 V7.5 Z"}))},{type:"parallelogram",labelKey:"shape.parallelogram",glyph:Q(jsx("path",{d:"M6 7 L19 7 L16 17 H7 Z"}))},{type:"trapezoid",labelKey:"shape.trapezoid",glyph:Q(jsx("path",{d:"M7 6 H17 L20 18 H4 Z"}))},{type:"pentagon",labelKey:"shape.pentagon",glyph:Q(jsx("path",{d:"M12 4 L19.5 9.5 L16.5 18.5 H7.5 L4.5 9.5 Z"}))},{type:"octagon",labelKey:"shape.octagon",glyph:Q(jsx("path",{d:"M8 4 H16 L20 8 V16 L16 20 H8 L4 16 V8 Z"}))},{type:"star",labelKey:"shape.star",glyph:Q(jsx("path",{d:"M12 3 L14 9.5 L20.5 10 L15.5 14 L17.5 20.5 L12 16.8 L6.5 20.5 L8.5 14 L3.5 10 L10 9.5 Z"}))},{type:"uml-class",labelKey:"shape.uml-class",glyph:Q(jsxs(Fragment,{children:[jsx("rect",{x:"3",y:"4",width:"18",height:"16",rx:"1"}),jsx("path",{d:"M3 9 H21"}),jsx("path",{d:"M3 15 H21"}),jsx("path",{d:"M6 6.5 H10"}),jsx("path",{d:"M6 12.5 H12"})]}))},{type:"uml-interface",labelKey:"shape.uml-interface",glyph:Q(jsxs(Fragment,{children:[jsx("rect",{x:"3",y:"4",width:"18",height:"16",rx:"1"}),jsx("path",{d:"M3 9 H21"}),jsx("path",{d:"M6 6.5 H10"}),jsx("path",{d:"M6 12.5 H12"})]}))},{type:"mind-map",labelKey:"shape.mind-map",glyph:Q(jsxs(Fragment,{children:[jsx("circle",{cx:"5",cy:"12",r:"2"}),jsx("path",{d:"M7 12h2.6"}),jsx("path",{d:"M9.6 12c0-2 1.2-3.4 2.6-3.4"}),jsx("path",{d:"M9.6 12c0 2 1.2 3.4 2.6 3.4"}),jsx("circle",{cx:"15.2",cy:"8.6",r:"1.3"}),jsx("circle",{cx:"15.2",cy:"15.4",r:"1.3"}),jsx("circle",{cx:"13.6",cy:"12",r:"1.3"})]}))}];function At({editor:s,x:e,y:t$1,context:r,existingArrowId:u,defaultShapeType:p,onClose:m}){let a=useRef(null);A();let S=h=>{s?.createGeneratedConnection(r,{type:h,existingArrowId:u}),m();};return useEffect(()=>{let h=b=>{a.current&&!a.current.contains(b.target)&&m();},f=b=>{b.key==="Escape"&&(b.preventDefault(),m());},l=setTimeout(()=>{window.addEventListener("pointerdown",h,true),window.addEventListener("keydown",f,true);},0);return ()=>{clearTimeout(l),window.removeEventListener("pointerdown",h,true),window.removeEventListener("keydown",f,true);}},[m]),jsxs("div",{className:"drawui-gen-menu",ref:a,style:{left:e,top:t$1},children:[jsx("div",{className:"drawui-gen-menu-label",children:t("menu.title")}),jsx("div",{className:"drawui-gen-shape-grid",children:zn.map(h=>jsxs("button",{className:`drawui-gen-shape-btn${h.type===p?" drawui-gen-shape-active":""}`,onClick:()=>S(h.type),title:t(h.labelKey),children:[h.glyph,jsx("span",{className:"drawui-gen-shape-label",children:t(h.labelKey)})]},h.type))}),jsx("div",{className:"drawui-gen-menu-hint",children:t("menu.cancel")})]})}var Un={select:"tool.select",hand:"tool.hand",rectangle:"tool.rectangle","rounded-rectangle":"tool.rounded-rectangle",circle:"tool.circle",ellipse:"tool.ellipse",diamond:"tool.diamond",triangle:"tool.triangle",hexagon:"tool.hexagon",parallelogram:"tool.parallelogram",trapezoid:"tool.trapezoid",pentagon:"tool.pentagon",octagon:"tool.octagon",star:"tool.star","uml-class":"tool.uml-class","uml-interface":"tool.uml-interface",line:"tool.line",arrow:"tool.arrow",text:"tool.text",draw:"tool.draw",pen:"tool.pen",highlighter:"tool.highlighter",eraser:"tool.eraser","mind-map":"tool.mind-map"};function $n({initialTool:s="select",className:e="",themeColor:t$1,language:r="zh-CN",data:u,onChange:p,onReady:m}){let a=useRef(null),S=useRef(null),h=useRef(null),[f,l]=useState(null);A();let[b,R]=useState(s),[x,K]=useState(false),[I,z]=useState(0),[N,he]=useState(false),[n,i]=useState("straight"),[c,_]=useState("end"),[ee,te]=useState(false),[Y,be]=useState(100),[ie,ne]=useState(null),[g,ye]=useState(null),[Le,Te]=useState(false),[Se,P]=useState(false),[fe,le]=useState(null),[Ne,Ee]=useState(null),[xe,Me]=useState(false),[Re,E]=useState(null),[w,oe]=useState(null),G=useRef(null),F=useRef(0),ae=useRef(null),Ae=useRef(p);Ae.current=p;let Ue=useRef(m);Ue.current=m,useEffect(()=>{if(!a.current)return;let y=new Editor(a.current,{theme:t$1?{primary:t$1,editBorder:t$1,selection:{outline:t$1,handleStroke:t$1,handleFill:"#ffffff",outlineFill:hexToRgba(t$1,.1),shadow:t$1}}:void 0,language:r,shapes:u,persist:!u});h.current=y,l(y),window.__drawuiEditor=y,Ue.current?.(y),s&&y.setActiveTool(s);let V=y.subscribe(()=>{R(y.getActiveTool());let D=y.getSelectedIds();z(D.length);let k=y.getShapes().filter(ue=>D.includes(ue.id)&&(ue.type==="line"||ue.type==="arrow"));if(he(k.length>0),k.length>0&&k[0].connectionType?i(k[0].connectionType):k.length>0&&i("straight"),k.length>0){let ue=k.find(Qe=>Qe.type==="arrow");ue&&(_(ue.arrowHead??"end"),te(ue.dashed??false));}be(Math.round(y.getCamera().getZoom()*100)),Te(y.canUndo()),P(y.canRedo());let de=y.getSelectedUml();le(de),de||E(null);let $e=y.getSelectedMindMap();Ee($e),y.getMindMapEditingShapeId()||Me(false),Ae.current?.(y.getData());}),se=y.subscribeNotifications(D=>{ye(D),G.current&&clearTimeout(G.current),G.current=setTimeout(()=>ye(null),2e3);}),B=y.subscribeUi(D=>{D.kind==="shapeTypeMenu"&&oe({x:D.screenX,y:D.screenY,context:D.context,existingArrowId:D.existingArrowId,defaultShapeType:D.defaultShapeType});});return ()=>{V(),se(),B(),G.current&&clearTimeout(G.current),cancelAnimationFrame(F.current),y.dispose();}},[s]),useEffect(()=>{if(!t$1)return;let y=S.current;y&&(y.style.setProperty("--dw-primary",t$1),y.style.setProperty("--dw-primary-hover",shadeColor(t$1,-0.12)),y.style.setProperty("--dw-primary-weak",hexToRgba(t$1,.1)),y.style.setProperty("--dw-primary-contrast","#ffffff"),y.style.setProperty("--dw-shadow-primary",`0 2px 8px ${hexToRgba(t$1,.3)}`)),h.current?.setTheme({primary:t$1,editBorder:t$1,selection:{outline:t$1,handleStroke:t$1,handleFill:"#ffffff",outlineFill:hexToRgba(t$1,.1),shadow:t$1}});},[t$1]),useEffect(()=>{setLanguage(r),h.current?.setLanguage(r);},[r]);let je=useCallback(y=>{h.current?.setActiveTool(y);},[]),qe=useCallback(()=>{h.current?.zoomIn();},[]),Je=useCallback(()=>{h.current?.zoomOut();},[]),d=useCallback(()=>{h.current?.resetZoom();},[]),M=useCallback(()=>{let y=!x;K(y),h.current?.setShowGrid(y);},[x]),C=useCallback(()=>{h.current?.undo();},[]),L=useCallback(()=>{h.current?.redo();},[]),$=useCallback(y=>{h.current?.downloadImage("drawui",y,{background:"#ffffff"});},[]),W=useCallback(y=>{let V=h.current,se=a.current;if(!V||!se)return;if(V.isPointerDown()){ae.current!==null&&(ae.current=null,ne(null));return}let B=y.clientX,D=y.clientY;cancelAnimationFrame(F.current),F.current=requestAnimationFrame(()=>{let ce=se.getBoundingClientRect(),k=B-ce.left,de=D-ce.top,$e=k+12,ue=de+12,Qe=V.getSelectedUml()?.id,He=V.getUmlRowAtScreenPoint({x:k,y:de});if(He&&He.shape.id!==Qe&&He.text){ae.current!==He.text&&(ae.current=He.text,ne({text:He.text,x:$e,y:ue}));return}let ze=V.getShapeAtScreenPoint({x:k,y:de});ze&&ze.text?ae.current!==ze.text&&(ae.current=ze.text,ne({text:ze.text,x:$e,y:ue})):ae.current!==null&&(ae.current=null,ne(null));});},[]),Ie=useCallback(()=>{ne(null);},[]),Ke=useCallback(y=>{let V=h.current,se=a.current;if(!V||!se)return;let B=se.getBoundingClientRect(),D=y.clientX-B.left,ce=y.clientY-B.top,k=V.getUmlRowAtScreenPoint({x:D,y:ce});if(k){E(k.shape.id);return}let de=V.getMindMapNodeAtScreenPoint({x:D,y:ce});de&&V.beginMindMapEdit(de.shapeId,de.nodeId);},[]),Pe=useCallback(()=>{oe(null);},[]);return jsxs("div",{ref:S,className:`drawui-canvas-board ${e}`,children:[jsx("canvas",{ref:a,className:"drawui-canvas",onMouseMove:W,onMouseLeave:Ie,onDoubleClick:Ke}),ie&&jsx("div",{className:"drawui-tooltip",style:{left:ie.x,top:ie.y},children:ie.text}),jsx(et,{activeTool:b,onToolChange:je,showGrid:x,onToggleGrid:M,canUndo:Le,canRedo:Se,onUndo:C,onRedo:L,onExport:$}),jsx(tt,{onZoomIn:qe,onZoomOut:Je,onReset:d,zoomLevel:Y}),jsx(kt,{editor:f,selectedCount:I,hasLineSelection:N,currentConnectionType:n,currentArrowHead:c,currentDashed:ee}),jsx(Nt,{editor:f,umlClass:fe,editing:Re}),jsx(It,{editor:f,panelOpen:xe,onOpenPanel:()=>Me(true)}),xe&&jsx(Kt,{editor:f,mindMap:Ne}),jsx(Dt,{editor:f}),w&&jsx(At,{editor:f,x:w.x,y:w.y,context:w.context,existingArrowId:w.existingArrowId,defaultShapeType:w.defaultShapeType,onClose:Pe}),jsxs("div",{className:"drawui-status-bar",children:[jsx("div",{className:"drawui-status-item",children:jsx("span",{children:t(Un[b])})}),jsx("div",{className:"drawui-status-item",children:jsx("span",{children:I===0?t("status.none"):t("status.selected",{n:I})})}),jsx("div",{className:"drawui-status-item",children:jsxs("span",{children:[Y,"%"]})})]}),g&&jsxs("div",{className:"drawui-toast",children:[jsx("svg",{className:"drawui-toast-icon",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("polyline",{points:"20 6 9 17 4 12"})}),g]})]})}export{$n as CanvasBoard,et as Toolbar,tt as ZoomControl};
|
|
1
|
+
import {memo,useState,useRef,useCallback,useEffect,useLayoutEffect}from'react';import {t,getContentBounds,UML_FONT_SIZE,MINDMAP_COLORS,layoutMindMap,getTheme,hexToRgba,subscribeTheme,getLanguage,subscribeLanguage,UML_LINE_HEIGHT,UML_PADDING_Y,UML_PADDING_X,UML_HEADER_HEIGHT,MINDMAP_FONT_SIZE,Editor,shadeColor,setLanguage}from'drawui-core';import {jsx,jsxs,Fragment}from'react/jsx-runtime';function X(){let[a,e]=useState(getLanguage());return useEffect(()=>subscribeLanguage(()=>e(getLanguage())),[]),a}var Lt=[{type:"rectangle",icon:jsx("rect",{x:"3",y:"5",width:"18",height:"14",rx:"0"})},{type:"rounded-rectangle",icon:jsx("rect",{x:"3",y:"5",width:"18",height:"14",rx:"4"})},{type:"circle",icon:jsx("circle",{cx:"12",cy:"12",r:"8"})},{type:"ellipse",icon:jsx("ellipse",{cx:"12",cy:"12",rx:"9",ry:"6"})},{type:"diamond",icon:jsx("path",{d:"M12 3L21 12L12 21L3 12Z"})},{type:"triangle",icon:jsx("path",{d:"M12 4L20 19L4 19Z"})},{type:"hexagon",icon:jsx("path",{d:"M12 3L20 7.5V16.5L12 21L4 16.5V7.5Z"})},{type:"parallelogram",icon:jsx("path",{d:"M7 5L20 5L17 19L4 19Z"})},{type:"trapezoid",icon:jsx("path",{d:"M6 5L18 5L21 19L3 19Z"})},{type:"pentagon",icon:jsx("path",{d:"M12 3L21 10L17.5 21L6.5 21L3 10Z"})},{type:"octagon",icon:jsx("path",{d:"M8 3L16 3L21 8L21 16L16 21L8 21L3 16L3 8Z"})},{type:"star",icon:jsx("path",{d:"M12 2L14.5 8.5L21 9L16 13.5L17.5 20L12 16.5L6.5 20L8 13.5L3 9L9.5 8.5Z"})}],Jt=new Set(Lt.map(a=>a.type)),Qt=[{type:"arrow",icon:"M5 12h14M12 5l7 7-7 7",labelKey:"toolbar.arrow"},{type:"text",icon:"M4 7V4h16v3M9 20h6M12 4v16",labelKey:"toolbar.text"}],en=[{type:"pen",icon:"M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3Z",labelKey:"toolbar.pen"},{type:"highlighter",icon:"M14 3l7 7-3 3-7-7 3-3zM9 8L3 14v3h3l6-6",labelKey:"toolbar.highlighter"}],tn=[{type:"eraser",icon:"M7 21l-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21M22 21H7M5 11l9 9",labelKey:"toolbar.eraser"}],nn="M18 11V6.5a1.5 1.5 0 0 0-3 0v3.5a1.5 1.5 0 0 0-3 0V3.5a1.5 1.5 0 0 0-3 0v6.5a1.5 1.5 0 0 0-3 0V14a8 8 0 0 0 16 0v-3a1.5 1.5 0 0 0-3 0",it=memo(function({activeTool:e,onToolChange:n,showGrid:i,onToggleGrid:u,canUndo:p=false,canRedo:y=false,onUndo:l,onRedo:C,onExport:f}){let[c,v]=useState(false),[B,I]=useState(false),b=useRef(null),z=useRef(null);X();let k=[{format:"png",labelKey:"toolbar.export.png"},{format:"svg",labelKey:"toolbar.export.svg"},{format:"pdf",labelKey:"toolbar.export.pdf"}],D=()=>{b.current&&(clearTimeout(b.current),b.current=null),I(true);},P=()=>{b.current=window.setTimeout(()=>I(false),200);},ue=()=>{z.current&&(clearTimeout(z.current),z.current=null),v(true);},o=()=>{z.current=window.setTimeout(()=>{v(false);},200);};return jsx("div",{className:"drawui-toolbar-container",children:jsxs("div",{className:"drawui-toolbar",children:[jsx("button",{className:`drawui-toolbar-button ${e==="select"?"active":""}`,onClick:()=>n("select"),"data-drawui-tip":t("toolbar.select"),children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("circle",{cx:"12",cy:"12",r:"3"})})}),jsx("button",{className:`drawui-toolbar-button ${e==="hand"?"active":""}`,onClick:()=>n("hand"),"data-drawui-tip":t("toolbar.hand"),children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("path",{d:nn})})}),jsx("div",{className:"drawui-toolbar-divider"}),jsxs("div",{className:"drawui-toolbar-dropdown",onMouseEnter:ue,onMouseLeave:o,children:[jsx("button",{className:`drawui-toolbar-button ${Jt.has(e)?"active":""}`,onClick:()=>n("rounded-rectangle"),"data-drawui-tip":t("toolbar.shapes"),children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("rect",{x:"3",y:"5",width:"18",height:"14",rx:"4",ry:"4"})})}),c&&jsx("div",{className:"drawui-toolbar-shape-grid",children:Lt.map(s=>jsx("button",{className:`drawui-toolbar-shape-item ${e===s.type?"active":""}`,onClick:()=>{n(s.type),v(false);},"data-drawui-tip":t("tool."+s.type),children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:s.icon})},s.type))})]}),jsx("div",{className:"drawui-toolbar-divider"}),Qt.map(s=>jsx("button",{className:`drawui-toolbar-button ${e===s.type?"active":""}`,onClick:()=>n(s.type),"data-drawui-tip":t(s.labelKey),children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("path",{d:s.icon})})},s.type)),jsx("div",{className:"drawui-toolbar-divider"}),en.map(s=>jsx("button",{className:`drawui-toolbar-button ${e===s.type?"active":""}`,onClick:()=>n(s.type),"data-drawui-tip":t(s.labelKey),children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("path",{d:s.icon})})},s.type)),jsx("div",{className:"drawui-toolbar-divider"}),tn.map(s=>jsx("button",{className:`drawui-toolbar-button ${e===s.type?"active":""}`,onClick:()=>n(s.type),"data-drawui-tip":t(s.labelKey),children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("path",{d:s.icon})})},s.type)),jsx("button",{className:`drawui-toolbar-button ${e==="uml-class"?"active":""}`,onClick:()=>n("uml-class"),"data-drawui-tip":t("toolbar.uml-class"),children:jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("rect",{x:"3",y:"3",width:"18",height:"18",rx:"2"}),jsx("line",{x1:"3",y1:"9",x2:"21",y2:"9"}),jsx("line",{x1:"3",y1:"15",x2:"21",y2:"15"}),jsx("line",{x1:"7",y1:"6",x2:"17",y2:"6"}),jsx("line",{x1:"7",y1:"12",x2:"13",y2:"12"}),jsx("line",{x1:"7",y1:"18",x2:"11",y2:"18"})]})}),jsx("button",{className:`drawui-toolbar-button ${e==="uml-interface"?"active":""}`,onClick:()=>n("uml-interface"),"data-drawui-tip":t("toolbar.uml-interface"),children:jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("rect",{x:"3",y:"3",width:"18",height:"18",rx:"2"}),jsx("line",{x1:"3",y1:"9",x2:"21",y2:"9"}),jsx("line",{x1:"7",y1:"6",x2:"17",y2:"6"}),jsx("line",{x1:"7",y1:"12",x2:"13",y2:"12"})]})}),jsx("button",{className:`drawui-toolbar-button ${e==="mind-map"?"active":""}`,onClick:()=>n("mind-map"),"data-drawui-tip":t("toolbar.mind-map"),children:jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("circle",{cx:"5",cy:"12",r:"2.4"}),jsx("path",{d:"M7.4 12h3.6"}),jsx("path",{d:"M11 12c0-2.6 1.6-4.4 3.4-4.4"}),jsx("path",{d:"M11 12c0 2.6 1.6 4.4 3.4 4.4"}),jsx("circle",{cx:"17.4",cy:"7.6",r:"1.7"}),jsx("circle",{cx:"17.4",cy:"16.4",r:"1.7"}),jsx("circle",{cx:"15.6",cy:"12",r:"1.7"})]})}),jsx("div",{className:"drawui-toolbar-divider"}),jsx("button",{className:`drawui-toolbar-button ${i?"active":""}`,onClick:u,"data-drawui-tip":t("toolbar.grid"),children:jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("rect",{x:"3",y:"3",width:"7",height:"7",rx:"1"}),jsx("rect",{x:"14",y:"3",width:"7",height:"7",rx:"1"}),jsx("rect",{x:"14",y:"14",width:"7",height:"7",rx:"1"}),jsx("rect",{x:"3",y:"14",width:"7",height:"7",rx:"1"})]})}),jsx("div",{className:"drawui-toolbar-divider"}),jsx("button",{className:"drawui-toolbar-button",onClick:l,disabled:!p,style:p?void 0:{opacity:.4,cursor:"default"},"data-drawui-tip":t("toolbar.undo"),children:jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("path",{d:"M3 7v6h6"}),jsx("path",{d:"M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"})]})}),jsx("button",{className:"drawui-toolbar-button",onClick:C,disabled:!y,style:y?void 0:{opacity:.4,cursor:"default"},"data-drawui-tip":t("toolbar.redo"),children:jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("path",{d:"M21 7v6h-6"}),jsx("path",{d:"M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3L21 13"})]})}),jsx("div",{className:"drawui-toolbar-divider"}),jsxs("div",{className:"drawui-toolbar-dropdown",onMouseEnter:D,onMouseLeave:P,children:[jsx("button",{className:"drawui-toolbar-button","data-drawui-tip":t("toolbar.export"),children:jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("path",{d:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"}),jsx("polyline",{points:"7 10 12 15 17 10"}),jsx("line",{x1:"12",y1:"15",x2:"12",y2:"3"})]})}),B&&jsx("div",{className:"drawui-toolbar-shape-grid drawui-toolbar-export-grid",children:k.map(s=>jsx("button",{className:"drawui-toolbar-shape-item drawui-toolbar-export-item",onClick:()=>{f?.(s.format),I(false);},"data-drawui-tip":t(s.labelKey),children:t(s.labelKey)},s.format))})]})]})})});var lt=memo(function({onZoomIn:e,onZoomOut:n,onReset:i,zoomLevel:u=100}){return X(),jsxs("div",{className:"drawui-zoom-control",children:[jsx("button",{className:"drawui-zoom-button",onClick:e,"data-drawui-tip":t("zoom.in"),children:jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("line",{x1:"12",y1:"5",x2:"12",y2:"19"}),jsx("line",{x1:"5",y1:"12",x2:"19",y2:"12"})]})}),jsxs("div",{className:"drawui-zoom-level",children:[u,"%"]}),jsx("button",{className:"drawui-zoom-button",onClick:n,"data-drawui-tip":t("zoom.out"),children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("line",{x1:"12",y1:"5",x2:"12",y2:"19"})})}),jsx("button",{className:"drawui-zoom-button",onClick:i,"data-drawui-tip":t("zoom.reset"),children:jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("path",{d:"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"}),jsx("path",{d:"M3 3v5h5"})]})})]})});var cn=["#ffffff","#f1f5f9","#ede9fe","#dbeafe","#dcfce7","#fef3c7","#fee2e2"],dn=["#0f172a","#475569","#94a3b8","#8b5cf6","#3b82f6","#16a34a","#d97706","#dc2626"],un=[...cn,...dn],Et=15,Rt="drawui:customColors";function pn(){if(typeof window>"u")return [];try{let a=window.localStorage.getItem(Rt);if(!a)return [];let e=JSON.parse(a);return Array.isArray(e)?e.filter(n=>typeof n=="string").slice(-Et):[]}catch{return []}}function hn(a){if(!(typeof window>"u"))try{window.localStorage.setItem(Rt,JSON.stringify(a));}catch{}}var Tt=[{key:"fill",labelKey:"style.fill",hasTransparent:true,hasOpacity:true},{key:"stroke",labelKey:"style.stroke",hasTransparent:false,hasOpacity:true},{key:"text",labelKey:"style.text",hasTransparent:false},{key:"highlight",labelKey:"style.highlight",hasTransparent:true,hasOpacity:true}],Nt=(a,e)=>!!a&&!!e&&a.toLowerCase()===e.toLowerCase(),yn=[{type:"straight",labelKey:"style.connection.straight",icon:"\u2501"},{type:"polyline",labelKey:"style.connection.polyline",icon:jsx("svg",{viewBox:"0 0 24 24",width:"16",height:"16",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("path",{d:"M4 8 C 12 8, 12 16, 20 16"})})},{type:"orthogonal",labelKey:"style.connection.orthogonal",icon:"\u2517"},{type:"curve",labelKey:"style.connection.curve",icon:"\u223F"}],fn=[{type:"none",labelKey:"style.arrowhead.none",icon:"\u2501"},{type:"end",labelKey:"style.arrowhead.end",icon:"\u2192"},{type:"start",labelKey:"style.arrowhead.start",icon:"\u2190"},{type:"both",labelKey:"style.arrowhead.both",icon:"\u21C4"},{type:"inheritance",labelKey:"style.arrowhead.inheritance",icon:"\u2501\u2501\u25B7"},{type:"composition",labelKey:"style.arrowhead.composition",icon:"\u25C6\u2501\u2501"},{type:"aggregation",labelKey:"style.arrowhead.aggregation",icon:"\u25C7\u2501\u2501"}],_e=10,Re=12,Te=a=>!a||a==="transparent",It=memo(function({editor:e,selectedCount:n,hasLineSelection:i,currentConnectionType:u,currentArrowHead:p,currentDashed:y}){X();let l=!!e?.getEditingShapeId(),[C,f]=useState(null),[c,v]=useState(null),[,B]=useState(0),I=useRef(null),b=useRef(null),z=useRef(null),[k,D]=useState({tw:168,th:42,pw:228,ph:160}),[P,ue]=useState(pn),o=useRef(null),s=useCallback(t=>{let g=t.trim().toLowerCase();/^#[0-9a-f]{6}$/.test(g)&&ue(Y=>{let R=Y.filter(H=>H!==g);for(R.push(g);R.length>Et;)R.shift();return hn(R),R});},[]);if(useEffect(()=>{let t=o.current;if(!t)return;let g=()=>{t.value&&s(t.value);};return t.addEventListener("change",g),()=>t.removeEventListener("change",g)},[s,c]),useEffect(()=>{if(!e)return;let t=e.subscribe(()=>B(g=>(g+1)%1e6));return ()=>{t();}},[e]),useEffect(()=>{v(null);},[n,l]),useEffect(()=>{if(!c)return;let t=g=>{I.current&&!I.current.contains(g.target)&&v(null);};return document.addEventListener("pointerdown",t,true),()=>document.removeEventListener("pointerdown",t,true)},[c]),useLayoutEffect(()=>{let t=b.current?.offsetWidth??k.tw,g=b.current?.offsetHeight??k.th,Y=z.current?.offsetWidth??k.pw,R=z.current?.offsetHeight??k.ph;D(H=>H.tw===t&&H.th===g&&H.pw===Y&&H.ph===R?H:{tw:t,th:g,pw:Y,ph:R});}),!e||n===0||l)return null;let d=e.getSelectedIds(),Z=e.getShapes().filter(t=>d.includes(t.id)),A=Z[0],V=A?.id??"",se=A?.style.fillColor,_=A?.style.strokeColor??"#1f2937",ee=A?.textColor??"#1f2937",m=A?.highlightColor,le={fill:se,stroke:_,text:ee,highlight:m},Ne={fill:A?.style.fillOpacity??1,stroke:A?.style.strokeOpacity??1,highlight:A?.highlightOpacity??1},Se=t=>C&&C.key===`${V}:${t}`?C.value:Ne[t]??1,pe=(t,g)=>{switch(t){case "stroke":e.updateSelectedShapesStyle({strokeColor:g});break;case "fill":e.updateSelectedShapesStyle({fillColor:g});break;case "text":e.updateSelectedShapesText({textColor:g});break;case "highlight":e.updateSelectedShapesText({highlightColor:g});break}},K=(t,g)=>{f({key:`${V}:${t}`,value:g}),t==="highlight"?e.updateSelectedShapesText({highlightOpacity:g}):t==="stroke"?e.updateSelectedShapesStyle({strokeOpacity:g}):e.updateSelectedShapesStyle({fillOpacity:g});},he=t=>e.updateConnectionType(t),ce=t=>e.updateArrowHeadType(t),Ce=t=>e.updateArrowDashed(t),ye=!!i&&Z.length>0&&Z.every(t=>t.type==="line"||t.type==="arrow"),fe=Z.length>0&&Z.every(t=>t.type==="text"),me=ye?Tt.filter(t=>t.key==="stroke"):Tt,Me=t=>t.key==="stroke"&&ye?"style.line":t.labelKey,w=c&&c!=="more"?me.find(t=>t.key===c):void 0,x=!!c&&(c==="more"||c==="prefix"||!!w),oe=e.getCamera(),O=getContentBounds(Z,0),G=oe.pageToScreen({x:O.x,y:O.y}),ie=oe.pageToScreen({x:O.x+O.width,y:O.y+O.height}),ze=window.innerWidth,Be=window.innerHeight,Ae=ie.y+_e,Oe=G.y-_e,Ue=k.th+(x?_e+k.ph:0),h=Ae+Ue<=Be-Re,N=Oe-Ue>=Re,L=h||!N,E=(G.x+ie.x)/2,$=(t,g,Y)=>Math.max(g,Math.min(t,Math.max(g,Y))),F=$(E-k.tw/2,Re,ze-k.tw-Re),ge=L?Ae:Oe-k.th,Ke=$(E-k.pw/2,Re,ze-k.pw-Re),Ee=x?$(L?ge+k.th+_e:ge-_e-k.ph,Re,Be-k.ph-Re):0;return jsxs("div",{className:"drawui-style-floating",ref:I,children:[jsxs("div",{className:"drawui-style-toolbar",ref:b,style:{left:F,top:ge},children:[me.map(t$1=>jsxs("button",{className:`drawui-style-tool-btn${c===t$1.key?" active":""}`,onClick:()=>v(c===t$1.key?null:t$1.key),"data-drawui-tip":t(Me(t$1)),type:"button",children:[t$1.key==="fill"&&jsx("span",{className:`drawui-st-swatch${Te(se)?" drawui-st-none":""}`,style:Te(se)?void 0:{background:se}}),t$1.key==="stroke"&&(ye?jsx("span",{className:`drawui-st-line${Te(_)?" drawui-st-line-none":""}`,style:Te(_)?void 0:{background:_}}):jsx("span",{className:`drawui-st-frame${Te(_)?" drawui-st-frame-none":""}`,style:Te(_)?void 0:{borderColor:_}})),t$1.key==="text"&&jsx("span",{className:"drawui-st-text",style:{color:ee},children:"A"}),t$1.key==="highlight"&&jsx("span",{className:`drawui-st-hl${Te(m)?" drawui-st-none":""}`,style:Te(m)?void 0:{background:m},children:"A"})]},t$1.key)),i&&jsx("button",{className:`drawui-style-tool-btn${c==="more"?" active":""}`,onClick:()=>v(c==="more"?null:"more"),"data-drawui-tip":t("style.connection"),type:"button",children:"\u22EF"}),fe&&jsx("button",{className:`drawui-style-tool-btn${c==="prefix"?" active":""}`,onClick:()=>v(c==="prefix"?null:"prefix"),"data-drawui-tip":t("style.prefix"),type:"button",children:jsxs("svg",{viewBox:"0 0 24 24",width:"18",height:"18",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",children:[jsx("circle",{cx:"5",cy:"8",r:"1.7",fill:"currentColor",stroke:"none"}),jsx("circle",{cx:"5",cy:"16",r:"1.7",fill:"currentColor",stroke:"none"}),jsx("line",{x1:"10.5",y1:"8",x2:"20",y2:"8"}),jsx("line",{x1:"10.5",y1:"16",x2:"20",y2:"16"})]})})]}),x&&jsx("div",{className:"drawui-style-popover",ref:z,style:{left:Ke,top:Ee},children:c==="prefix"?jsxs(Fragment,{children:[jsx("div",{className:"drawui-style-popover-title",children:t("style.prefix")}),jsx("div",{className:"drawui-muted-hint",children:t("style.prefix.soon")})]}):w?jsxs(Fragment,{children:[jsx("div",{className:"drawui-style-popover-title",children:t(Me(w))}),jsxs("div",{className:"drawui-color-row",children:[w.hasTransparent&&jsx("button",{className:`drawui-color-swatch drawui-color-swatch-transparent${Te(le[w.key])?" active":""}`,onClick:()=>pe(w.key,"transparent"),"aria-label":t("style.none"),type:"button"}),un.map(t=>jsx("button",{className:`drawui-color-swatch${Nt(t,le[w.key])?" active":""}`,style:{background:t},onClick:()=>pe(w.key,t),"aria-label":t,type:"button"},t)),P.map(t=>jsx("button",{className:`drawui-color-swatch drawui-color-custom${Nt(t,le[w.key])?" active":""}`,style:{background:t},onClick:()=>pe(w.key,t),"aria-label":t,type:"button"},`custom-${t}`)),jsxs("span",{className:"drawui-color-swatch drawui-color-add","data-drawui-tip":t("style.addColor"),children:["+",jsx("input",{ref:o,type:"color",defaultValue:"#3b82f6",className:"drawui-color-add-input","aria-label":t("style.addColor")})]})]}),w.hasOpacity&&jsxs("div",{className:"drawui-opacity-row",children:[jsx("span",{className:"drawui-opacity-label",children:t("style.opacity")}),jsx("input",{type:"range",min:0,max:100,value:Math.round(Se(w.key)*100),onChange:t=>K(w.key,Number(t.target.value)/100),className:"drawui-opacity-slider"}),jsxs("span",{className:"drawui-opacity-value",children:[Math.round(Se(w.key)*100),"%"]})]})]}):jsxs(Fragment,{children:[jsx("div",{className:"drawui-style-popover-title",children:t("style.connection")}),jsx("div",{className:"drawui-connection-row",children:yn.map(t$1=>jsxs("button",{className:`drawui-connection-btn${u===t$1.type?" active":""}`,onClick:()=>he(t$1.type),"data-drawui-tip":t(t$1.labelKey),type:"button",children:[jsx("span",{className:"drawui-connection-icon",children:t$1.icon}),jsx("span",{className:"drawui-connection-label",children:t(t$1.labelKey)})]},t$1.type))}),jsx("div",{className:"drawui-style-popover-title",children:t("style.arrow")}),jsx("div",{className:"drawui-connection-row",children:fn.map(t$1=>jsxs("button",{className:`drawui-connection-btn${p===t$1.type?" active":""}`,onClick:()=>ce(t$1.type),"data-drawui-tip":t(t$1.labelKey),type:"button",children:[jsx("span",{className:"drawui-connection-icon",children:t$1.icon}),jsx("span",{className:"drawui-connection-label",children:t(t$1.labelKey)})]},t$1.type))}),jsx("div",{className:"drawui-style-popover-title",children:t("style.dashed")}),jsxs("div",{className:"drawui-connection-row",children:[jsxs("button",{className:`drawui-connection-btn${y?"":" active"}`,onClick:()=>Ce(false),"data-drawui-tip":t("style.solid"),type:"button",children:[jsx("span",{className:"drawui-connection-icon",children:"\u2501"}),jsx("span",{className:"drawui-connection-label",children:t("style.solid")})]}),jsxs("button",{className:`drawui-connection-btn${y?" active":""}`,onClick:()=>Ce(true),"data-drawui-tip":t("style.dashed"),type:"button",children:[jsx("span",{className:"drawui-connection-icon",children:"\u2504"}),jsx("span",{className:"drawui-connection-label",children:t("style.dashed")})]})]})]})})]})});var pt=14,zt=20,kn=["#1f2937","#ef4444","#f97316","#facc15","#22c55e","#3b82f6","#8b5cf6","#ec4899","#9ca3af"],Sn=[12,14,16,18,20,24];function Bt(a,e,n){let i=a,u=n,p=i.charAt(0);if(i.length>1&&(p==="+"||p==="-"||p==="#"||p==="~")&&i.charAt(1)===" "&&(u=p,i=i.slice(2)),i=i.replace(/^\s+|\s+$/g,""),e==="attribute"){let v=i.indexOf(":");return v===-1?{visibility:u,name:i,type:"",params:"",returnType:""}:{visibility:u,name:i.slice(0,v).replace(/^\s+|\s+$/g,""),type:i.slice(v+1).replace(/^\s+|\s+$/g,""),params:"",returnType:""}}let y=i.indexOf("(");if(y===-1){let v=i.lastIndexOf(":");return v===-1?{visibility:u,name:i,type:"",params:"",returnType:""}:{visibility:u,name:i.slice(0,v).replace(/^\s+|\s+$/g,""),type:"",params:"",returnType:i.slice(v+1).replace(/^\s+|\s+$/g,"")}}let l=i.slice(0,y).replace(/^\s+|\s+$/g,""),C=i.indexOf(")",y);if(C===-1)return {visibility:u,name:l,type:"",params:i.slice(y+1).replace(/^\s+|\s+$/g,""),returnType:""};let f=i.slice(y+1,C).replace(/^\s+|\s+$/g,""),c=i.slice(C+1).replace(/^\s+|\s+$/g,"");return c.startsWith(":")&&(c=c.slice(1).replace(/^\s+|\s+$/g,"")),{visibility:u,name:l,type:"",params:f,returnType:c}}function Cn(a,e){let n=`${e.visibility} `;return a==="attribute"?`${n}${e.name}: ${e.type??""}`:`${n}${e.name}(${e.params??""}): ${e.returnType??""}`}var Dt=memo(function({editor:e,umlClass:n,editing:i}){let[,u]=useState(0);X(),useEffect(()=>{if(!e)return;let h=e.subscribe(()=>u(N=>N+1));return ()=>{h();}},[e]);let[p,y]=useState(null),[l,C]=useState(false),f=useRef(null),c=useRef(null),v=useCallback((h,N)=>{f.current&&(clearTimeout(f.current),f.current=null),y({section:h,rowId:N}),C(false);},[]),B=useCallback(()=>{f.current&&clearTimeout(f.current),f.current=window.setTimeout(()=>{y(null),C(false);},150);},[]);if(!e||!n||i!==n.id)return null;let I=e.getCamera(),{id:b,x:z,y:k,width:D,height:P,className:ue,methods:o}=n,s=n.type==="uml-interface",d=s?[]:n.attributes,q=D/2,Z=P/2,A=UML_HEADER_HEIGHT,V=UML_LINE_HEIGHT,se=UML_PADDING_X,_=UML_PADDING_Y,ee=s?0:d.length>0?d.length*V+_*2:_*2,m=I.zoom,le=(D-se*2)*m,Ne=4*m,Se=I.pageToScreen({x:z-q+se,y:k}),pe=I.pageToScreen({x:z,y:k-Z+A/2}),K=h=>I.pageToScreen({x:z,y:h}).y,he=V*m,ce=h=>k+(-Z+A+_+V/2+h*V),Ce=h=>k+(-Z+A+ee+_+V/2+h*V),ye=k+(-Z+A+ee),fe=k+Z,me={background:"#ffffff",borderWidth:1,borderStyle:"solid",borderColor:"transparent",outline:"none",padding:0,fontFamily:"sans-serif",boxSizing:"border-box"},Me=(h,N)=>{let L=d.find($=>$.id===h);if(!L)return;let E=Bt(N,"attribute",L.visibility);e.updateUmlClass(b,{attributes:d.map($=>$.id===h?{...$,...E}:$)});},w=(h,N)=>{let L=o.find(F=>F.id===h);if(!L)return;let E=Bt(N,"method",L.visibility),$=o.map(F=>F.id===h?{...F,...E}:F);s?e.updateUmlInterface(b,{methods:$}):e.updateUmlClass(b,{methods:$});},x=(h,N,L)=>{c.current={section:h,from:N},L.dataTransfer.effectAllowed="move",L.dataTransfer.setData("text/plain",`${h}:${N}`);},oe=h=>{h.preventDefault(),h.dataTransfer.dropEffect="move";},O=(h,N,L)=>{L.preventDefault();let E=c.current;!E||E.section!==h||(h==="attribute"?e.reorderUmlAttribute(b,E.from,N):e.reorderUmlMethod(b,E.from,N),c.current=null);},G=(h,N,L,E)=>{let $=K(E),F=p?.section===h&&p.rowId===L.id,ge=(L.fontSize||UML_FONT_SIZE)*m,Ke=L.textColor||"#1f2937",Ee={position:"absolute",left:Se.x-pt*m-Ne,top:$-he/2,width:pt*m+Ne+le+zt*m,height:he,display:"flex",alignItems:"center",gap:2,pointerEvents:"none",zIndex:53},t$1={...me,width:le,height:he-2,fontSize:ge,color:Ke,textDecoration:L.strikethrough?"line-through":"none",pointerEvents:"auto",...F?{borderColor:"var(--dw-primary)"}:{}},g={width:pt*m,height:he-2,cursor:"grab",color:"#9ca3af",display:"flex",alignItems:"center",justifyContent:"center",userSelect:"none",fontSize:12*m,lineHeight:1,opacity:F?1:.55,pointerEvents:"auto"},Y={width:zt*m,height:he-6,border:"none",background:"transparent",color:"#9ca3af",cursor:"pointer",borderRadius:3,fontSize:14*m,opacity:F?1:.35,pointerEvents:"auto"};return jsxs("div",{style:Ee,onDragOver:oe,onDrop:R=>O(h,N,R),children:[jsx("span",{style:g,draggable:true,onDragStart:R=>x(h,N,R),"data-drawui-tip":t("uml.drag"),children:"\u22EE\u22EE"}),jsx("input",{style:t$1,value:Cn(h,L),onChange:R=>h==="attribute"?Me(L.id,R.target.value):w(L.id,R.target.value),onFocus:()=>v(h,L.id),onBlur:B,spellCheck:false}),jsx("button",{style:Y,onMouseDown:R=>R.preventDefault(),onClick:()=>{h==="attribute"?e.removeUmlAttribute(b,L.id):e.removeUmlMethod(b,L.id);},"data-drawui-tip":t("uml.delete"),children:"\xD7"})]},L.id)},ie=(h,N,L)=>{let E=K(N),$=h==="attribute";return jsxs("button",{onMouseDown:F=>F.preventDefault(),onClick:()=>$?e.addUmlAttribute(b):e.addUmlMethod(b),className:"drawui-uml-add-row",style:{position:"absolute",left:Se.x,top:E-9*m,height:18*m,padding:`0 ${6*m}px`,fontSize:11*m,lineHeight:1,border:"1px dashed #cbd5e1",background:"rgba(255,255,255,0.85)",color:"#64748b",borderRadius:3,cursor:"pointer",pointerEvents:"auto",display:"flex",alignItems:"center",gap:3,whiteSpace:"nowrap",zIndex:53},"data-drawui-tip":L,children:[jsx("span",{style:{fontSize:13*m,lineHeight:1},children:"+"}),jsx("span",{children:L})]},`add-${h}`)},ze=()=>{if(!p||p.section==="className")return null;let h=p.section,N=p.rowId,E=(h==="attribute"?d:o).find(T=>T.id===N);if(!E)return null;let $=224*m,F=30*m,ge=I.pageToScreen({x:z,y:k}).x,Ke=I.pageToScreen({x:z,y:k-Z}).y,Ee=20*m,t$1=Ke-F-Ee,g=ge-$/2,Y=t$1+F,R=E.textColor||"#1f2937",H=E.fontSize||UML_FONT_SIZE,be=!!E.strikethrough;return jsxs(Fragment,{children:[jsx("div",{style:{position:"absolute",left:ge-.5,top:Y,width:1,height:Ee,background:"#d1d5db",pointerEvents:"none",zIndex:59}}),jsxs("div",{className:"drawui-uml-toolbar",style:{position:"absolute",left:g,top:t$1,width:$,height:F,background:"#ffffff",border:"1px solid #e5e7eb",borderRadius:6,boxShadow:"0 4px 12px rgba(0, 0, 0, 0.1)",display:"flex",alignItems:"center",gap:4*m,padding:`0 ${6*m}px`,pointerEvents:"auto",zIndex:60,fontSize:12*m},onMouseDown:T=>T.preventDefault(),children:[jsxs("div",{style:{position:"relative"},children:[jsxs("button",{onClick:()=>C(T=>!T),className:"drawui-uml-toolbar-btn","data-drawui-tip":t("uml.textColor"),style:{border:"none",background:"transparent",cursor:"pointer",padding:2,display:"flex",alignItems:"center",borderRadius:3},children:[jsx("span",{style:{fontWeight:700,color:R,fontSize:13*m,textDecoration:be?"line-through":"none"},children:"A"}),jsx("span",{style:{width:10*m,height:2*m,background:R,marginLeft:3,borderRadius:1}})]}),l&&jsxs("div",{style:{position:"absolute",top:"100%",left:0,marginTop:4,background:"#ffffff",border:"1px solid #e5e7eb",borderRadius:4,padding:4,display:"flex",gap:2,boxShadow:"0 2px 8px rgba(0, 0, 0, 0.1)",zIndex:61},children:[jsx("button",{onClick:()=>{e.updateUmlRowStyle(b,h,E.id,{textColor:null}),C(false);},style:{width:14,height:14,border:"1px solid #e5e7eb",background:"transparent",cursor:"pointer",borderRadius:2},"data-drawui-tip":t("uml.defaultColor")}),kn.map(T=>jsx("button",{onClick:()=>{e.updateUmlRowStyle(b,h,E.id,{textColor:T}),C(false);},style:{width:14,height:14,border:"none",background:T,cursor:"pointer",borderRadius:2},"data-drawui-tip":T},T))]})]}),jsx("select",{value:H,onChange:T=>e.updateUmlRowStyle(b,h,E.id,{fontSize:Number(T.target.value)}),style:{border:"1px solid #e5e7eb",borderRadius:3,padding:`0 ${2*m}px`,fontSize:12*m,height:20*m,background:"#ffffff"},"data-drawui-tip":t("uml.fontSize"),children:Sn.map(T=>jsx("option",{value:T,children:T},T))}),jsx("button",{onClick:()=>e.updateUmlRowStyle(b,h,E.id,{strikethrough:!be}),className:"drawui-uml-toolbar-btn","data-drawui-tip":t("uml.strikethrough"),style:{border:"none",background:be?"var(--dw-primary-weak)":"transparent",cursor:"pointer",padding:2,borderRadius:3},children:jsx("span",{style:{fontWeight:700,fontSize:13*m,textDecoration:"line-through"},children:"A"})}),jsx("button",{onClick:()=>{h==="attribute"?e.removeUmlAttribute(b,E.id):e.removeUmlMethod(b,E.id),y(null);},className:"drawui-uml-toolbar-btn","data-drawui-tip":t("uml.delete"),style:{border:"none",background:"transparent",cursor:"pointer",color:"#ef4444",padding:2,marginLeft:"auto",borderRadius:3},children:jsxs("svg",{width:14*m,height:14*m,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("polyline",{points:"3 6 5 6 21 6"}),jsx("path",{d:"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"}),jsx("path",{d:"M10 11v6"}),jsx("path",{d:"M14 11v6"}),jsx("path",{d:"M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"})]})})]})]})},Be=I.pageToScreen({x:z-q,y:k}).x,Ae=I.pageToScreen({x:z,y:k-Z}).y,Oe=D*m,Ue=P*m;return jsxs("div",{style:{position:"absolute",inset:0,pointerEvents:"none",zIndex:50},children:[jsx("div",{style:{position:"absolute",left:Be+1,top:Ae+1,width:Math.max(0,Oe-2),height:Math.max(0,Ue-2),background:"#ffffff",pointerEvents:"none",zIndex:51}}),jsx("input",{style:{...me,position:"absolute",left:pe.x-le/2,top:pe.y-A*m/2+2,width:le,height:A*m-4,textAlign:"center",fontWeight:700,fontSize:(n.fontSize||UML_FONT_SIZE)*m,color:n.textColor||"#1f2937",pointerEvents:"auto",zIndex:52,...p?.section==="className"?{borderColor:"var(--dw-primary)"}:{}},value:ue,onChange:h=>s?e.updateUmlInterface(b,{className:h.target.value}):e.updateUmlClass(b,{className:h.target.value}),onFocus:()=>v("className",""),onBlur:B,spellCheck:false}),!s&&jsxs(Fragment,{children:[d.map((h,N)=>G("attribute",N,h,ce(N))),ie("attribute",ye,"\u5C5E\u6027")]}),o.map((h,N)=>G("method",N,h,Ce(N))),ie("method",fe,t("uml.method")),ze()]})});var Ut=memo(function({editor:e,panelOpen:n,onOpenPanel:i}){let[,u]=useState(0);X(),useEffect(()=>{if(!e)return;let D=e.subscribe(()=>u(P=>P+1));return ()=>{D();}},[e]);let p=useRef(false),y=useRef(false);if(!e)return null;let l=e.getMindMapEditingShapeId();if(!l||n)return null;let C=e.getMindMapSelectedNode();if(!C||C.shapeId!==l)return null;let f=e.getMindMapNode(l,C.nodeId),c=e.getMindMapNodeScreenRect(l,C.nodeId);if(!f||!c)return null;let v=e.getCamera().getZoom(),B=MINDMAP_FONT_SIZE*v,I=Math.max(100,c.width+24),b=c.height+8,z={position:"absolute",left:c.x+c.width/2,top:c.y-4,transform:"translateX(-50%)",width:I,height:b,border:"1.5px solid var(--dw-primary, #3b82f6)",borderRadius:6,background:"#ffffff",boxShadow:"0 2px 10px rgba(0,0,0,0.15)",outline:"none",padding:`0 ${(f.icon?24:12)*v}px`,fontFamily:"sans-serif",fontSize:B,color:"#1f2937",boxSizing:"border-box",pointerEvents:"auto",zIndex:55},k={position:"absolute",left:c.x+c.width+12,top:c.y+c.height/2-11,width:22,height:22,border:"1px solid #e5e7eb",background:"#ffffff",borderRadius:"50%",cursor:"pointer",color:"#6b7280",fontSize:13,lineHeight:1,display:"flex",alignItems:"center",justifyContent:"center",boxShadow:"0 1px 4px rgba(0,0,0,0.12)",pointerEvents:"auto",zIndex:55};return jsxs("div",{style:{position:"absolute",inset:0,pointerEvents:"none",zIndex:50},children:[jsx("input",{autoFocus:true,style:z,value:f.text,spellCheck:false,onChange:D=>{let P=!p.current;p.current=true,e.updateMindMapNode(l,C.nodeId,{text:D.target.value},P);},onBlur:()=>{if(y.current){y.current=false;return}e.exitMindMapEdit();},onKeyDown:D=>{D.key==="Enter"?D.target.blur():D.key==="Escape"&&e.exitMindMapEdit();}}),jsx("button",{style:k,"data-drawui-tip":t("mindmap.more"),onMouseDown:D=>{D.preventDefault(),y.current=true,setTimeout(()=>{y.current=false;},300);},onClick:i,children:"\u22EF"})]})});var $t=[...MINDMAP_COLORS,"#1f2937","#9ca3af"],Wt=["\u{1F4A1}","\u2B50","\u{1F525}","\u{1F4CC}","\u2705","\u2757","\u26A0\uFE0F","\u{1F3F7}\uFE0F"],Dn={position:"absolute",width:232,background:"rgba(255,255,255,0.96)",border:"1px solid #e5e7eb",borderRadius:8,boxShadow:"0 6px 20px rgba(0,0,0,0.12)",padding:"10px 12px",fontSize:12,color:"#1f2937",zIndex:70,boxSizing:"border-box",fontFamily:"sans-serif"},ht={fontSize:11,color:"#6b7280",marginBottom:4,display:"block"},qe={display:"flex",gap:4,alignItems:"center",flexWrap:"wrap"},Je={border:"1px solid #e5e7eb",background:"#ffffff",borderRadius:5,padding:"3px 8px",fontSize:12,color:"#374151",cursor:"pointer",lineHeight:1.5},yt={width:"100%",border:"1px solid #e5e7eb",borderRadius:5,padding:"4px 8px",fontSize:12,outline:"none",boxSizing:"border-box",background:"#ffffff",color:"#1f2937"},Zt=memo(function({editor:e,mindMap:n}){let[,i]=useState(0);X(),useEffect(()=>{if(!e)return;let o=e.subscribe(()=>i(s=>s+1));return ()=>{o();}},[e]);let u=useRef(null);if(!e||!n||e.getMindMapEditingShapeId()!==n.id)return null;let p=e.getMindMapSelectedNode();if(!p||p.shapeId!==n.id)return null;let y=o=>{if(o.id===p.nodeId)return o;for(let s of o.children??[]){let d=y(s);if(d)return d}return null},l=y(n.root);if(!l)return null;let C=e.getCamera(),c=layoutMindMap(n.root).positions.get(l.id);if(!c)return null;let v=C.zoom,B=C.pageToScreen({x:n.x+c.x,y:n.y+c.y}),I=B.x+c.width*v/2+14,b=B.y-80,k=Math.max(8,Math.min(I,(window.innerWidth||1024)-232-8)),D=Math.max(8,Math.min(b,(window.innerHeight||768)-320)),P=o=>{e.updateMindMapNode(n.id,l.id,o);},ue=!!l.id&&l.id!==n.root.id;return jsxs("div",{ref:u,style:{...Dn,left:k,top:D},onMouseDown:o=>o.stopPropagation(),children:[jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:8},children:[jsx("span",{style:{fontWeight:600,fontSize:12},children:t("mindmap.nodeText")}),jsx("button",{onClick:()=>e.exitMindMapEdit(),"data-drawui-tip":t("mindmap.close"),style:{border:"none",background:"transparent",cursor:"pointer",color:"#9ca3af",fontSize:14,lineHeight:1,padding:2},children:"\xD7"})]}),jsx("input",{style:{...yt,marginBottom:8},value:l.text,onChange:o=>P({text:o.target.value}),spellCheck:false}),jsxs("div",{style:{...qe,marginBottom:10},children:[jsxs("button",{style:Je,onClick:()=>e.addMindMapChild(n.id,l.id),children:["+ ",t("mindmap.addChild")]}),ue&&jsxs("button",{style:Je,onClick:()=>e.addMindMapSibling(n.id,l.id),children:["+ ",t("mindmap.addSibling")]}),!!l.children?.length&&jsx("button",{style:Je,onClick:()=>e.toggleMindMapCollapse(n.id,l.id),children:l.collapsed?t("mindmap.expand"):t("mindmap.collapse")}),jsx("button",{style:{...Je,color:"#ef4444",borderColor:"#fecaca",marginLeft:"auto"},onClick:()=>e.deleteMindMapNode(n.id,l.id),children:t("mindmap.deleteNode")})]}),jsx("span",{style:ht,children:t("mindmap.color")}),jsxs("div",{style:{...qe,marginBottom:10},children:[jsx("button",{"data-drawui-tip":t("mindmap.levelColor"),onClick:()=>P({color:void 0}),style:{width:18,height:18,borderRadius:4,border:"1.5px solid #d1d5db",background:"conic-gradient(#ef4444, #f59e0b, #10b981, #3b82f6, #8b5cf6, #ec4899, #ef4444)",cursor:"pointer",flexShrink:0}}),$t.map(o=>jsx("button",{"data-drawui-tip":o,onClick:()=>P({color:o}),style:{width:18,height:18,borderRadius:4,border:l.color===o?"2px solid #111827":"1px solid #d1d5db",background:o,cursor:"pointer",flexShrink:0}},o))]}),jsx("span",{style:ht,children:t("mindmap.icon")}),jsxs("div",{style:{...qe,marginBottom:10},children:[jsx("button",{"data-drawui-tip":t("mindmap.noIcon"),onClick:()=>P({icon:void 0}),style:{width:22,height:22,borderRadius:4,border:l.icon?"1px solid #d1d5db":"2px solid #111827",background:"#f9fafb",cursor:"pointer",fontSize:11,color:"#9ca3af",lineHeight:1},children:"\u2205"}),Wt.map(o=>jsx("button",{onClick:()=>P({icon:o}),style:{width:22,height:22,borderRadius:4,border:l.icon===o?"2px solid #111827":"1px solid #d1d5db",background:"#f9fafb",cursor:"pointer",fontSize:13,lineHeight:1},children:o},o)),jsx("input",{placeholder:"\u270F\uFE0F",defaultValue:l.icon&&!Wt.includes(l.icon)?l.icon:"",onKeyDown:o=>{if(o.key==="Enter"){let s=o.target.value.trim();P({icon:s||void 0});}},onBlur:o=>{let s=o.target.value.trim();s!==l.icon&&P({icon:s||void 0});},style:{...yt,width:56,padding:"2px 4px",textAlign:"center"}})]}),jsx("span",{style:ht,children:t("mindmap.note")}),jsx("input",{style:{...yt,marginBottom:6},value:l.note??"",placeholder:t("mindmap.notePlaceholder"),onChange:o=>P({note:o.target.value||void 0}),spellCheck:false}),!!l.note&&jsxs("div",{style:{...qe,marginTop:4},children:[jsx("span",{style:{fontSize:11,color:"#6b7280"},children:t("mindmap.noteColor")}),jsx("button",{"data-drawui-tip":t("mindmap.noteColorDefault"),onClick:()=>P({noteColor:void 0}),style:{width:16,height:16,borderRadius:3,border:l.noteColor?"1px solid #d1d5db":"2px solid #111827",background:"repeating-conic-gradient(#ef4444 0% 25%, #f59e0b 0% 50%, #10b981 0% 75%, #3b82f6 0% 100%)",cursor:"pointer"}}),$t.map(o=>jsx("button",{onClick:()=>P({noteColor:o}),style:{width:16,height:16,borderRadius:3,border:l.noteColor===o?"2px solid #111827":"1px solid #d1d5db",background:o,cursor:"pointer"}},o))]})]})});var mt=220,gt=140,Wn="#fafafa";function Zn(a,e){let n=Math.min(a.x,e.x),i=Math.min(a.y,e.y),u=Math.max(a.x+a.width,e.x+e.width),p=Math.max(a.y+a.height,e.y+e.height);return {x:n,y:i,width:u-n,height:p-i}}function _n(a){return {x:a.x+a.width/2,y:a.y+a.height/2}}function Gn(){return {x:0,y:0,width:0,height:0}}function Fn(a){let e=1/0,n=1/0,i=-1/0,u=-1/0,p=false;for(let y of a){let l=wt(y);l&&(p=true,l.x<e&&(e=l.x),l.y<n&&(n=l.y),l.x+l.width>i&&(i=l.x+l.width),l.y+l.height>u&&(u=l.y+l.height));}return p?{x:e,y:n,width:i-e,height:u-n}:null}function wt(a){switch(a.type){case "rectangle":case "rounded-rectangle":case "ellipse":case "diamond":case "triangle":case "hexagon":case "parallelogram":case "trapezoid":case "pentagon":case "octagon":case "star":case "uml-class":case "uml-interface":case "mind-map":case "text":return {x:a.x-a.width/2,y:a.y-a.height/2,width:a.width,height:a.height};case "circle":return {x:a.x-a.radius,y:a.y-a.radius,width:a.radius*2,height:a.radius*2};case "line":case "arrow":{let e=a.points;if(!e||e.length===0)return null;let n=1/0,i=1/0,u=-1/0,p=-1/0;for(let y of e)y.x<n&&(n=y.x),y.y<i&&(i=y.y),y.x>u&&(u=y.x),y.y>p&&(p=y.y);return {x:n,y:i,width:u-n,height:p-i}}case "draw":{let e=a,n=e.width,i=e.height;if(typeof n=="number"&&typeof i=="number")return {x:e.x-n/2,y:e.y-i/2,width:n,height:i};let u=e.points;if(!u||u.length===0)return null;let p=1/0,y=1/0,l=-1/0,C=-1/0;for(let f of u){let c=f.x+e.x,v=f.y+e.y;c<p&&(p=c),v<y&&(y=v),c>l&&(l=c),v>C&&(C=v);}return {x:p,y,width:l-p,height:C-y}}default:return null}}function Vn(a){let e=a.getCamera(),n=e.screenToPage({x:0,y:0}),i=e.screenToPage({x:window.innerWidth,y:window.innerHeight});return {x:n.x,y:n.y,width:i.x-n.x,height:i.y-n.y}}function Yn(a,e,n){if(a.width<=0||a.height<=0)return {x:a.x-e/2,y:a.y-n/2,width:e,height:n};let i=e/n,u=a.width,p=u/i;p<a.height&&(p=a.height,u=p*i);let y=_n(a);return {x:y.x-u/2,y:y.y-p/2,width:u,height:p}}function bt(a,e,n,i){let u=(a-n.left)/n.width,p=(e-n.top)/n.height;return {x:i.x+u*i.width,y:i.y+p*i.height}}var Ft=memo(function({editor:e}){let n=useRef(null),i=useRef(null),[u,p]=useState(false),[y,l]=useState(100),[C,f]=useState(false),[c,v]=useState(false);X();let B=useRef(null),I=useRef(null);useLayoutEffect(()=>{let o=n.current,s=i.current;if(!o||!s)return;let d=window.devicePixelRatio||1;o.width=Math.round(mt*d),o.height=Math.round(gt*d),o.style.width=`${mt}px`,o.style.height=`${gt}px`;},[u]);let b=useCallback(()=>{let o=n.current,s=i.current;if(!o||!s||!e)return;let d=o.getContext("2d");if(!d)return;let q=mt,Z=gt,A=o.width,V=o.height,se=e.getShapes(),_=new Set(e.getSelectedIds()),ee=getTheme(),m=hexToRgba(ee.text,.16),le=ee.primary,Ne=hexToRgba(ee.primary,.18),Se=hexToRgba(ee.primary,.85),pe=Fn(se),K=Vn(e),he=pe?Zn(pe,K):K.width>0?K:Gn(),ce=Yn(he,q,Z);I.current=ce;let Ce=A/ce.width,ye=V/ce.height,fe=q/ce.width;d.setTransform(1,0,0,1,0,0),d.fillStyle=Wn,d.fillRect(0,0,A,V),d.setTransform(Ce,0,0,ye,-Ce*ce.x,-ye*ce.y),d.fillStyle=m;for(let w of se){let x=wt(w);x&&d.fillRect(x.x,x.y,x.width,x.height);}d.fillStyle=le;for(let w of se){if(!_.has(w.id))continue;let x=wt(w);x&&d.fillRect(x.x,x.y,x.width,x.height);}d.fillStyle=Ne,d.fillRect(K.x,K.y,K.width,K.height);let me=1.5/fe;d.strokeStyle=Se,d.lineWidth=me,d.lineJoin="round";let Me=Math.min(K.width/6,K.height/6,6/fe);if(d.beginPath(),Me*fe<1)d.rect(K.x,K.y,K.width,K.height);else {let w=K.x,x=K.y,oe=K.width,O=K.height,G=Math.min(Me,oe/2,O/2);d.moveTo(w+G,x),d.lineTo(w+oe-G,x),d.quadraticCurveTo(w+oe,x,w+oe,x+G),d.lineTo(w+oe,x+O-G),d.quadraticCurveTo(w+oe,x+O,w+oe-G,x+O),d.lineTo(w+G,x+O),d.quadraticCurveTo(w,x+O,w,x+O-G),d.lineTo(w,x+G),d.quadraticCurveTo(w,x,w+G,x),d.closePath();}d.stroke(),d.setTransform(1,0,0,1,0,0);},[e]);useEffect(()=>{if(!e||u)return;b();let o=e.subscribe(b),s=subscribeTheme(b),d=()=>b();return window.addEventListener("resize",d),()=>{o(),s(),window.removeEventListener("resize",d);}},[e,u,b]),useEffect(()=>{if(!e)return;let o=()=>{let d=e.getCamera().getZoom();l(Math.round(d*100));};o();let s=e.subscribe(o);return ()=>{s();}},[e]);let z=useCallback((o,s)=>{if(!e)return;let d=e.getCamera(),q=d.getZoom(),Z=window.innerWidth/2,A=window.innerHeight/2,V=d;V.x=Z-o*q,V.y=A-s*q,e.requestRender();},[e]),k=o=>{if(!e||!i.current||o.button!==0)return;let s=i.current.getBoundingClientRect(),d=I.current;if(!d)return;let q=bt(o.clientX,o.clientY,s,d);B.current={pointerId:o.pointerId,rect:{left:s.left,top:s.top,width:s.width,height:s.height},canvasBox:d},o.currentTarget.setPointerCapture(o.pointerId),v(true),z(q.x,q.y);},D=o=>{if(!c||!e||!B.current||!i.current)return;let s=B.current,d=bt(o.clientX,o.clientY,s.rect,s.canvasBox);z(d.x,d.y);},P=o=>{if(c){v(false),B.current=null;try{o.currentTarget.releasePointerCapture(o.pointerId);}catch{}}},ue=o=>{if(!e||!i.current)return;let s=I.current;if(!s)return;let d=i.current.getBoundingClientRect(),q=bt(o.clientX,o.clientY,d,s);z(q.x,q.y);};return jsxs("div",{className:`drawui-minimap ${u?"collapsed":""}`,children:[jsx("button",{className:"drawui-minimap-toggle",onClick:()=>p(o=>!o),"data-drawui-tip":u?t("minimap.expand"):t("minimap.collapse"),"data-drawui-tip-pos":"top","aria-label":u?t("minimap.expand"):t("minimap.collapse"),children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:u?jsx("polyline",{points:"9 6 15 12 9 18"}):jsx("polyline",{points:"15 6 9 12 15 18"})})}),!u&&jsxs("div",{className:"drawui-minimap-panel",children:[jsxs("div",{className:"drawui-minimap-header",children:[jsx("span",{className:"drawui-minimap-title",children:t("minimap.title")}),jsxs("span",{className:"drawui-minimap-zoom",children:[y,"%"]})]}),jsx("div",{ref:i,className:"drawui-minimap-canvas-wrap",style:{cursor:c?"grabbing":C?"pointer":"default"},onPointerEnter:()=>f(true),onPointerLeave:()=>f(false),children:jsx("canvas",{ref:n,className:"drawui-minimap-canvas",onPointerDown:k,onPointerMove:D,onPointerUp:P,onPointerCancel:P,onDoubleClick:ue})})]})]})});var ae=a=>jsx("svg",{viewBox:"0 0 24 24",width:"18",height:"18",className:"drawui-gen-shape-glyph",fill:"none",stroke:"currentColor",strokeWidth:"1.6",strokeLinecap:"round",strokeLinejoin:"round",children:a}),qn=[{type:"rectangle",labelKey:"shape.rectangle",glyph:ae(jsx("rect",{x:"4",y:"7",width:"16",height:"10",rx:"1"}))},{type:"rounded-rectangle",labelKey:"shape.rounded-rectangle",glyph:ae(jsx("rect",{x:"4",y:"7",width:"16",height:"10",rx:"4"}))},{type:"circle",labelKey:"shape.circle",glyph:ae(jsx("circle",{cx:"12",cy:"12",r:"5.5"}))},{type:"ellipse",labelKey:"shape.ellipse",glyph:ae(jsx("ellipse",{cx:"12",cy:"12",rx:"7",ry:"4.5"}))},{type:"diamond",labelKey:"shape.diamond",glyph:ae(jsx("path",{d:"M12 5 L19 12 L12 19 L5 12 Z"}))},{type:"triangle",labelKey:"shape.triangle",glyph:ae(jsx("path",{d:"M12 4 L20 19 H4 Z"}))},{type:"hexagon",labelKey:"shape.hexagon",glyph:ae(jsx("path",{d:"M12 3 L19.5 7.5 V16.5 L12 21 L4.5 16.5 V7.5 Z"}))},{type:"parallelogram",labelKey:"shape.parallelogram",glyph:ae(jsx("path",{d:"M6 7 L19 7 L16 17 H7 Z"}))},{type:"trapezoid",labelKey:"shape.trapezoid",glyph:ae(jsx("path",{d:"M7 6 H17 L20 18 H4 Z"}))},{type:"pentagon",labelKey:"shape.pentagon",glyph:ae(jsx("path",{d:"M12 4 L19.5 9.5 L16.5 18.5 H7.5 L4.5 9.5 Z"}))},{type:"octagon",labelKey:"shape.octagon",glyph:ae(jsx("path",{d:"M8 4 H16 L20 8 V16 L16 20 H8 L4 16 V8 Z"}))},{type:"star",labelKey:"shape.star",glyph:ae(jsx("path",{d:"M12 3 L14 9.5 L20.5 10 L15.5 14 L17.5 20.5 L12 16.8 L6.5 20.5 L8.5 14 L3.5 10 L10 9.5 Z"}))},{type:"uml-class",labelKey:"shape.uml-class",glyph:ae(jsxs(Fragment,{children:[jsx("rect",{x:"3",y:"4",width:"18",height:"16",rx:"1"}),jsx("path",{d:"M3 9 H21"}),jsx("path",{d:"M3 15 H21"}),jsx("path",{d:"M6 6.5 H10"}),jsx("path",{d:"M6 12.5 H12"})]}))},{type:"uml-interface",labelKey:"shape.uml-interface",glyph:ae(jsxs(Fragment,{children:[jsx("rect",{x:"3",y:"4",width:"18",height:"16",rx:"1"}),jsx("path",{d:"M3 9 H21"}),jsx("path",{d:"M6 6.5 H10"}),jsx("path",{d:"M6 12.5 H12"})]}))},{type:"mind-map",labelKey:"shape.mind-map",glyph:ae(jsxs(Fragment,{children:[jsx("circle",{cx:"5",cy:"12",r:"2"}),jsx("path",{d:"M7 12h2.6"}),jsx("path",{d:"M9.6 12c0-2 1.2-3.4 2.6-3.4"}),jsx("path",{d:"M9.6 12c0 2 1.2 3.4 2.6 3.4"}),jsx("circle",{cx:"15.2",cy:"8.6",r:"1.3"}),jsx("circle",{cx:"15.2",cy:"15.4",r:"1.3"}),jsx("circle",{cx:"13.6",cy:"12",r:"1.3"})]}))}];function Vt({editor:a,x:e,y:n,context:i,existingArrowId:u,defaultShapeType:p,onClose:y}){let l=useRef(null);X();let C=f=>{a?.createGeneratedConnection(i,{type:f,existingArrowId:u}),y();};return useEffect(()=>{let f=B=>{l.current&&!l.current.contains(B.target)&&y();},c=B=>{B.key==="Escape"&&(B.preventDefault(),y());},v=setTimeout(()=>{window.addEventListener("pointerdown",f,true),window.addEventListener("keydown",c,true);},0);return ()=>{clearTimeout(v),window.removeEventListener("pointerdown",f,true),window.removeEventListener("keydown",c,true);}},[y]),jsxs("div",{className:"drawui-gen-menu",ref:l,style:{left:e,top:n},children:[jsx("div",{className:"drawui-gen-menu-label",children:t("menu.title")}),jsx("div",{className:"drawui-gen-shape-grid",children:qn.map(f=>jsxs("button",{className:`drawui-gen-shape-btn${f.type===p?" drawui-gen-shape-active":""}`,onClick:()=>C(f.type),"data-drawui-tip":t(f.labelKey),children:[f.glyph,jsx("span",{className:"drawui-gen-shape-label",children:t(f.labelKey)})]},f.type))}),jsx("div",{className:"drawui-gen-menu-hint",children:t("menu.cancel")})]})}var to={select:"tool.select",hand:"tool.hand",rectangle:"tool.rectangle","rounded-rectangle":"tool.rounded-rectangle",circle:"tool.circle",ellipse:"tool.ellipse",diamond:"tool.diamond",triangle:"tool.triangle",hexagon:"tool.hexagon",parallelogram:"tool.parallelogram",trapezoid:"tool.trapezoid",pentagon:"tool.pentagon",octagon:"tool.octagon",star:"tool.star","uml-class":"tool.uml-class","uml-interface":"tool.uml-interface",line:"tool.line",arrow:"tool.arrow",text:"tool.text",draw:"tool.draw",pen:"tool.pen",highlighter:"tool.highlighter",eraser:"tool.eraser","mind-map":"tool.mind-map"};function no({initialTool:a="select",className:e="",themeColor:n,language:i="zh-CN",data:u,onChange:p,onReady:y}){let l=useRef(null),C=useRef(null),f=useRef(null),[c,v]=useState(null);X();let[B,I]=useState(a),[b,z]=useState(false),[k,D]=useState(0),[P,ue]=useState(false),[o,s]=useState("straight"),[d,q]=useState("end"),[Z,A]=useState(false),[V,se]=useState(100),[_,ee]=useState(null),[m,le]=useState(null),[Ne,Se]=useState(false),[pe,K]=useState(false),[he,ce]=useState(null),[Ce,ye]=useState(null),[fe,me]=useState(false),[Me,w]=useState(null),[x,oe]=useState(null),O=useRef(null),G=useRef(0),ie=useRef(null),ze=useRef(p);ze.current=p;let Be=useRef(y);Be.current=y,useEffect(()=>{if(!l.current)return;let t=new Editor(l.current,{theme:n?{primary:n,editBorder:n,selection:{outline:n,handleStroke:n,handleFill:"#ffffff",outlineFill:hexToRgba(n,.1),shadow:n}}:void 0,language:i,shapes:u,persist:!u});f.current=t,v(t),window.__drawuiEditor=t,Be.current?.(t),a&&t.setActiveTool(a);let g=t.subscribe(()=>{I(t.getActiveTool());let H=t.getSelectedIds();D(H.length);let T=t.getShapes().filter(xe=>H.includes(xe.id)&&(xe.type==="line"||xe.type==="arrow"));if(ue(T.length>0),T.length>0&&T[0].connectionType?s(T[0].connectionType):T.length>0&&s("straight"),T.length>0){let xe=T.find(at=>at.type==="arrow");xe&&(q(xe.arrowHead??"end"),A(xe.dashed??false));}se(Math.round(t.getCamera().getZoom()*100)),Se(t.canUndo()),K(t.canRedo());let we=t.getSelectedUml();ce(we),we||w(null);let Ve=t.getSelectedMindMap();ye(Ve),t.getMindMapEditingShapeId()||me(false),ze.current?.(t.getData());}),Y=t.subscribeNotifications(H=>{le(H),O.current&&clearTimeout(O.current),O.current=setTimeout(()=>le(null),2e3);}),R=t.subscribeUi(H=>{H.kind==="shapeTypeMenu"&&oe({x:H.screenX,y:H.screenY,context:H.context,existingArrowId:H.existingArrowId,defaultShapeType:H.defaultShapeType});});return ()=>{g(),Y(),R(),O.current&&clearTimeout(O.current),cancelAnimationFrame(G.current),t.dispose();}},[a]),useEffect(()=>{if(!n)return;let t=C.current;t&&(t.style.setProperty("--dw-primary",n),t.style.setProperty("--dw-primary-hover",shadeColor(n,-0.12)),t.style.setProperty("--dw-primary-weak",hexToRgba(n,.1)),t.style.setProperty("--dw-primary-contrast","#ffffff"),t.style.setProperty("--dw-shadow-primary",`0 2px 8px ${hexToRgba(n,.3)}`)),f.current?.setTheme({primary:n,editBorder:n,selection:{outline:n,handleStroke:n,handleFill:"#ffffff",outlineFill:hexToRgba(n,.1),shadow:n}});},[n]),useEffect(()=>{setLanguage(i),f.current?.setLanguage(i);},[i]);let Ae=useCallback(t=>{f.current?.setActiveTool(t);},[]),Oe=useCallback(()=>{f.current?.zoomIn();},[]),Ue=useCallback(()=>{f.current?.zoomOut();},[]),h=useCallback(()=>{f.current?.resetZoom();},[]),N=useCallback(()=>{let t=!b;z(t),f.current?.setShowGrid(t);},[b]),L=useCallback(()=>{f.current?.undo();},[]),E=useCallback(()=>{f.current?.redo();},[]),$=useCallback(t=>{f.current?.downloadImage("drawui",t,{background:"#ffffff"});},[]),F=useCallback(t=>{let g=f.current,Y=l.current;if(!g||!Y)return;if(g.isPointerDown()){ie.current!==null&&(ie.current=null,ee(null));return}let R=t.clientX,H=t.clientY;cancelAnimationFrame(G.current),G.current=requestAnimationFrame(()=>{let be=Y.getBoundingClientRect(),T=R-be.left,we=H-be.top,Ve=T+12,xe=we+12,at=g.getSelectedUml()?.id,$e=g.getUmlRowAtScreenPoint({x:T,y:we});if($e&&$e.shape.id!==at&&$e.text){ie.current!==$e.text&&(ie.current=$e.text,ee({text:$e.text,x:Ve,y:xe}));return}let We=g.getShapeAtScreenPoint({x:T,y:we});We&&We.text?ie.current!==We.text&&(ie.current=We.text,ee({text:We.text,x:Ve,y:xe})):ie.current!==null&&(ie.current=null,ee(null));});},[]),ge=useCallback(()=>{ee(null);},[]),Ke=useCallback(t=>{let g=f.current,Y=l.current;if(!g||!Y)return;let R=Y.getBoundingClientRect(),H=t.clientX-R.left,be=t.clientY-R.top,T=g.getUmlRowAtScreenPoint({x:H,y:be});if(T){w(T.shape.id);return}let we=g.getMindMapNodeAtScreenPoint({x:H,y:be});we&&g.beginMindMapEdit(we.shapeId,we.nodeId);},[]),Ee=useCallback(()=>{oe(null);},[]);return jsxs("div",{ref:C,className:`drawui-canvas-board ${e}`,children:[jsx("canvas",{ref:l,className:"drawui-canvas",onMouseMove:F,onMouseLeave:ge,onDoubleClick:Ke}),_&&jsx("div",{className:"drawui-tooltip",style:{left:_.x,top:_.y},children:_.text}),jsx(it,{activeTool:B,onToolChange:Ae,showGrid:b,onToggleGrid:N,canUndo:Ne,canRedo:pe,onUndo:L,onRedo:E,onExport:$}),jsx(lt,{onZoomIn:Oe,onZoomOut:Ue,onReset:h,zoomLevel:V}),jsx(It,{editor:c,selectedCount:k,hasLineSelection:P,currentConnectionType:o,currentArrowHead:d,currentDashed:Z}),jsx(Dt,{editor:c,umlClass:he,editing:Me}),jsx(Ut,{editor:c,panelOpen:fe,onOpenPanel:()=>me(true)}),fe&&jsx(Zt,{editor:c,mindMap:Ce}),jsx(Ft,{editor:c}),x&&jsx(Vt,{editor:c,x:x.x,y:x.y,context:x.context,existingArrowId:x.existingArrowId,defaultShapeType:x.defaultShapeType,onClose:Ee}),jsxs("div",{className:"drawui-status-bar",children:[jsx("div",{className:"drawui-status-item",children:jsx("span",{children:t(to[B])})}),jsx("div",{className:"drawui-status-item",children:jsx("span",{children:k===0?t("status.none"):t("status.selected",{n:k})})}),jsx("div",{className:"drawui-status-item",children:jsxs("span",{children:[V,"%"]})})]}),m&&jsxs("div",{className:"drawui-toast",children:[jsx("svg",{className:"drawui-toast-icon",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("polyline",{points:"20 6 9 17 4 12"})}),m]})]})}export{no as CanvasBoard,it as Toolbar,lt as ZoomControl};
|
package/dist/styles.css
CHANGED
|
@@ -255,9 +255,8 @@
|
|
|
255
255
|
}
|
|
256
256
|
.drawui-status-bar {
|
|
257
257
|
position: fixed;
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
transform: translateX(-50%);
|
|
258
|
+
right: 20px;
|
|
259
|
+
bottom: calc(20px + var(--dw-status-bar-lift, 0px));
|
|
261
260
|
display: flex;
|
|
262
261
|
align-items: center;
|
|
263
262
|
gap: 16px;
|
|
@@ -312,6 +311,43 @@
|
|
|
312
311
|
transform: translateY(0);
|
|
313
312
|
}
|
|
314
313
|
}
|
|
314
|
+
[data-drawui-tip] {
|
|
315
|
+
position: relative;
|
|
316
|
+
}
|
|
317
|
+
[data-drawui-tip]::after {
|
|
318
|
+
content: attr(data-drawui-tip);
|
|
319
|
+
position: absolute;
|
|
320
|
+
left: 50%;
|
|
321
|
+
top: calc(100% + 8px);
|
|
322
|
+
transform: translateX(-50%);
|
|
323
|
+
width: max-content;
|
|
324
|
+
max-width: 240px;
|
|
325
|
+
padding: 5px 9px;
|
|
326
|
+
font-size: 12px;
|
|
327
|
+
font-weight: 400;
|
|
328
|
+
line-height: 1.4;
|
|
329
|
+
text-align: center;
|
|
330
|
+
word-break: break-word;
|
|
331
|
+
color: var(--dw-tooltip-text);
|
|
332
|
+
background: var(--dw-tooltip-bg);
|
|
333
|
+
backdrop-filter: blur(8px);
|
|
334
|
+
-webkit-backdrop-filter: blur(8px);
|
|
335
|
+
border-radius: 8px;
|
|
336
|
+
box-shadow: var(--dw-shadow-tooltip);
|
|
337
|
+
opacity: 0;
|
|
338
|
+
pointer-events: none;
|
|
339
|
+
transition: opacity 0.12s cubic-bezier(0.4, 0, 0.2, 1);
|
|
340
|
+
z-index: 2000;
|
|
341
|
+
}
|
|
342
|
+
[data-drawui-tip]:hover::after,
|
|
343
|
+
[data-drawui-tip]:focus-visible::after {
|
|
344
|
+
opacity: 1;
|
|
345
|
+
transition-delay: 0.35s;
|
|
346
|
+
}
|
|
347
|
+
[data-drawui-tip][data-drawui-tip-pos='top']::after {
|
|
348
|
+
top: auto;
|
|
349
|
+
bottom: calc(100% + 8px);
|
|
350
|
+
}
|
|
315
351
|
.drawui-toast {
|
|
316
352
|
position: absolute;
|
|
317
353
|
top: 20px;
|
|
@@ -349,80 +385,209 @@
|
|
|
349
385
|
transform: translateX(-50%) translateY(0) scale(1);
|
|
350
386
|
}
|
|
351
387
|
}
|
|
352
|
-
.drawui-style-
|
|
388
|
+
.drawui-style-floating {
|
|
353
389
|
position: fixed;
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
390
|
+
inset: 0;
|
|
391
|
+
z-index: 100;
|
|
392
|
+
pointer-events: none;
|
|
393
|
+
}
|
|
394
|
+
.drawui-style-toolbar {
|
|
395
|
+
position: absolute;
|
|
357
396
|
display: flex;
|
|
358
|
-
align-items:
|
|
359
|
-
gap:
|
|
360
|
-
padding:
|
|
397
|
+
align-items: center;
|
|
398
|
+
gap: 2px;
|
|
399
|
+
padding: 5px;
|
|
361
400
|
background: var(--dw-panel-bg);
|
|
362
401
|
backdrop-filter: blur(16px);
|
|
363
402
|
-webkit-backdrop-filter: blur(16px);
|
|
364
403
|
border-radius: 12px;
|
|
365
|
-
box-shadow: var(--dw-shadow-
|
|
404
|
+
box-shadow: var(--dw-shadow-lg);
|
|
366
405
|
border: 1px solid var(--dw-panel-border);
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
@keyframes drawui-style-panel-in {
|
|
371
|
-
from {
|
|
372
|
-
opacity: 0;
|
|
373
|
-
transform: translateX(-50%) translateY(8px) scale(0.97);
|
|
374
|
-
}
|
|
375
|
-
to {
|
|
376
|
-
opacity: 1;
|
|
377
|
-
transform: translateX(-50%) translateY(0) scale(1);
|
|
378
|
-
}
|
|
406
|
+
pointer-events: auto;
|
|
407
|
+
/* 只做淡入、不做位移/缩放,避免出现"抖动一下"的观感 */
|
|
408
|
+
animation: drawui-style-toolbar-in 0.12s cubic-bezier(0.4, 0, 0.2, 1);
|
|
379
409
|
}
|
|
380
|
-
.drawui-style-
|
|
410
|
+
.drawui-style-tool-btn {
|
|
381
411
|
display: flex;
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
412
|
+
align-items: center;
|
|
413
|
+
justify-content: center;
|
|
414
|
+
width: 32px;
|
|
415
|
+
height: 32px;
|
|
416
|
+
padding: 0;
|
|
417
|
+
border: none;
|
|
418
|
+
background: transparent;
|
|
419
|
+
border-radius: 8px;
|
|
420
|
+
color: var(--dw-text-ink);
|
|
421
|
+
font-size: 15px;
|
|
422
|
+
line-height: 1;
|
|
423
|
+
cursor: pointer;
|
|
424
|
+
transition: background 0.12s cubic-bezier(0.4, 0, 0.2, 1);
|
|
385
425
|
}
|
|
386
|
-
.drawui-style-
|
|
387
|
-
|
|
426
|
+
.drawui-style-tool-btn:hover {
|
|
427
|
+
background: var(--dw-hover-bg);
|
|
388
428
|
}
|
|
389
|
-
.drawui-style-
|
|
390
|
-
|
|
429
|
+
.drawui-style-tool-btn.active {
|
|
430
|
+
background: var(--dw-primary-weak);
|
|
391
431
|
}
|
|
392
|
-
.drawui-
|
|
393
|
-
width:
|
|
394
|
-
|
|
395
|
-
|
|
432
|
+
.drawui-st-swatch {
|
|
433
|
+
width: 18px;
|
|
434
|
+
height: 18px;
|
|
435
|
+
border-radius: 5px;
|
|
436
|
+
border: 1.5px solid var(--dw-swatch-border);
|
|
437
|
+
}
|
|
438
|
+
.drawui-st-none {
|
|
439
|
+
background: #fff linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%) 0 0 / 6px 6px;
|
|
440
|
+
}
|
|
441
|
+
.drawui-st-frame {
|
|
442
|
+
box-sizing: border-box;
|
|
443
|
+
width: 18px;
|
|
444
|
+
height: 18px;
|
|
445
|
+
border-radius: 4px;
|
|
446
|
+
border-width: 3px;
|
|
447
|
+
border-style: solid;
|
|
448
|
+
}
|
|
449
|
+
/* 无色边框:白底 + 格纹,避免图标看起来是"空的" */
|
|
450
|
+
.drawui-st-frame-none {
|
|
451
|
+
border-color: var(--dw-border-strong);
|
|
452
|
+
background: #fff linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%) 0 0 / 6px 6px;
|
|
453
|
+
}
|
|
454
|
+
.drawui-st-line {
|
|
455
|
+
width: 18px;
|
|
456
|
+
height: 4px;
|
|
457
|
+
border-radius: 2px;
|
|
458
|
+
}
|
|
459
|
+
.drawui-st-line-none {
|
|
460
|
+
background: var(--dw-border-strong);
|
|
461
|
+
}
|
|
462
|
+
.drawui-st-text {
|
|
463
|
+
font-size: 16px;
|
|
464
|
+
font-weight: 700;
|
|
465
|
+
}
|
|
466
|
+
.drawui-st-hl {
|
|
467
|
+
display: flex;
|
|
468
|
+
align-items: center;
|
|
469
|
+
justify-content: center;
|
|
470
|
+
width: 18px;
|
|
471
|
+
height: 18px;
|
|
472
|
+
border-radius: 5px;
|
|
473
|
+
border: 1.5px solid var(--dw-swatch-border);
|
|
474
|
+
font-size: 11px;
|
|
475
|
+
font-weight: 700;
|
|
476
|
+
color: #1f2937;
|
|
396
477
|
}
|
|
397
|
-
.drawui-style-
|
|
478
|
+
.drawui-style-popover {
|
|
479
|
+
position: absolute;
|
|
398
480
|
display: flex;
|
|
399
481
|
flex-direction: column;
|
|
400
|
-
gap:
|
|
482
|
+
gap: 8px;
|
|
483
|
+
min-width: 228px;
|
|
484
|
+
padding: 10px 12px;
|
|
485
|
+
background: var(--dw-panel-bg);
|
|
486
|
+
backdrop-filter: blur(16px);
|
|
487
|
+
-webkit-backdrop-filter: blur(16px);
|
|
488
|
+
border-radius: 12px;
|
|
489
|
+
box-shadow: var(--dw-shadow-xl);
|
|
490
|
+
border: 1px solid var(--dw-panel-border);
|
|
491
|
+
background: var(--dw-panel-bg-deep);
|
|
492
|
+
pointer-events: auto;
|
|
493
|
+
animation: drawui-style-pop-in 0.12s cubic-bezier(0.4, 0, 0.2, 1);
|
|
401
494
|
}
|
|
402
|
-
.drawui-style-
|
|
495
|
+
.drawui-style-popover-title {
|
|
403
496
|
font-size: 11px;
|
|
404
497
|
font-weight: 500;
|
|
405
498
|
color: var(--dw-text-muted);
|
|
406
499
|
line-height: 1;
|
|
407
500
|
}
|
|
501
|
+
.drawui-muted-hint {
|
|
502
|
+
max-width: 180px;
|
|
503
|
+
font-size: 11px;
|
|
504
|
+
line-height: 1.5;
|
|
505
|
+
color: var(--dw-text-muted);
|
|
506
|
+
}
|
|
507
|
+
@keyframes drawui-style-toolbar-in {
|
|
508
|
+
from {
|
|
509
|
+
opacity: 0;
|
|
510
|
+
}
|
|
511
|
+
to {
|
|
512
|
+
opacity: 1;
|
|
513
|
+
}
|
|
514
|
+
}
|
|
515
|
+
@keyframes drawui-style-pop-in {
|
|
516
|
+
from {
|
|
517
|
+
opacity: 0;
|
|
518
|
+
transform: scale(0.97);
|
|
519
|
+
}
|
|
520
|
+
to {
|
|
521
|
+
opacity: 1;
|
|
522
|
+
transform: scale(1);
|
|
523
|
+
}
|
|
524
|
+
}
|
|
408
525
|
.drawui-color-row {
|
|
409
|
-
display:
|
|
410
|
-
|
|
411
|
-
gap:
|
|
526
|
+
display: grid;
|
|
527
|
+
grid-template-columns: repeat(8, 20px);
|
|
528
|
+
gap: 6px;
|
|
412
529
|
}
|
|
413
530
|
.drawui-color-swatch {
|
|
414
|
-
|
|
415
|
-
|
|
531
|
+
box-sizing: border-box;
|
|
532
|
+
width: 20px;
|
|
533
|
+
height: 20px;
|
|
416
534
|
border-radius: 50%;
|
|
417
535
|
border: 1.5px solid var(--dw-swatch-border);
|
|
418
536
|
cursor: pointer;
|
|
419
537
|
padding: 0;
|
|
420
|
-
transition:
|
|
538
|
+
transition: transform 0.12s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.12s cubic-bezier(0.4, 0, 0.2, 1);
|
|
539
|
+
/* 当前选中色:内白环 + 主色外环 */
|
|
421
540
|
}
|
|
422
541
|
.drawui-color-swatch:hover {
|
|
423
|
-
transform: scale(1.
|
|
542
|
+
transform: scale(1.14);
|
|
424
543
|
border-color: var(--dw-swatch-border-hover);
|
|
425
544
|
}
|
|
545
|
+
.drawui-color-swatch.active {
|
|
546
|
+
box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--dw-primary);
|
|
547
|
+
}
|
|
548
|
+
/* 自定义色:右下角小三角标记,区分内置色 */
|
|
549
|
+
.drawui-color-custom {
|
|
550
|
+
position: relative;
|
|
551
|
+
}
|
|
552
|
+
.drawui-color-custom::before {
|
|
553
|
+
content: '';
|
|
554
|
+
position: absolute;
|
|
555
|
+
right: 0;
|
|
556
|
+
bottom: 0;
|
|
557
|
+
width: 0;
|
|
558
|
+
height: 0;
|
|
559
|
+
border-style: solid;
|
|
560
|
+
border-width: 0 0 7px 7px;
|
|
561
|
+
border-color: transparent transparent var(--dw-primary) transparent;
|
|
562
|
+
border-bottom-right-radius: 50%;
|
|
563
|
+
}
|
|
564
|
+
/* 添加颜色:内嵌原生取色器 */
|
|
565
|
+
.drawui-color-add {
|
|
566
|
+
position: relative;
|
|
567
|
+
display: flex;
|
|
568
|
+
align-items: center;
|
|
569
|
+
justify-content: center;
|
|
570
|
+
background: var(--dw-panel-bg-solid);
|
|
571
|
+
border-style: dashed;
|
|
572
|
+
color: var(--dw-text-muted);
|
|
573
|
+
font-size: 15px;
|
|
574
|
+
line-height: 1;
|
|
575
|
+
}
|
|
576
|
+
.drawui-color-add:hover {
|
|
577
|
+
color: var(--dw-primary);
|
|
578
|
+
border-color: var(--dw-primary);
|
|
579
|
+
transform: scale(1.06);
|
|
580
|
+
}
|
|
581
|
+
.drawui-color-add-input {
|
|
582
|
+
position: absolute;
|
|
583
|
+
inset: 0;
|
|
584
|
+
width: 100%;
|
|
585
|
+
height: 100%;
|
|
586
|
+
padding: 0;
|
|
587
|
+
border: none;
|
|
588
|
+
opacity: 0;
|
|
589
|
+
cursor: pointer;
|
|
590
|
+
}
|
|
426
591
|
.drawui-color-swatch-transparent {
|
|
427
592
|
position: relative;
|
|
428
593
|
background: #fff linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%) 0 0 / 6px 6px;
|
|
@@ -437,6 +602,72 @@
|
|
|
437
602
|
background: var(--dw-danger);
|
|
438
603
|
transform: rotate(-45deg);
|
|
439
604
|
}
|
|
605
|
+
.drawui-opacity-row {
|
|
606
|
+
display: flex;
|
|
607
|
+
align-items: center;
|
|
608
|
+
gap: 8px;
|
|
609
|
+
margin-top: 2px;
|
|
610
|
+
}
|
|
611
|
+
.drawui-opacity-label {
|
|
612
|
+
font-size: 11px;
|
|
613
|
+
color: var(--dw-text-muted);
|
|
614
|
+
white-space: nowrap;
|
|
615
|
+
}
|
|
616
|
+
.drawui-opacity-value {
|
|
617
|
+
font-size: 11px;
|
|
618
|
+
color: var(--dw-text-muted);
|
|
619
|
+
min-width: 34px;
|
|
620
|
+
text-align: right;
|
|
621
|
+
}
|
|
622
|
+
.drawui-opacity-slider {
|
|
623
|
+
flex: 1;
|
|
624
|
+
-webkit-appearance: none;
|
|
625
|
+
appearance: none;
|
|
626
|
+
/* 关键:把 input 本身撑高到 16px,否则命中区域只有 4px 高 → 滑块基本拖不动 */
|
|
627
|
+
height: 16px;
|
|
628
|
+
margin: 0;
|
|
629
|
+
background: transparent;
|
|
630
|
+
outline: none;
|
|
631
|
+
cursor: pointer;
|
|
632
|
+
}
|
|
633
|
+
.drawui-opacity-slider::-webkit-slider-runnable-track {
|
|
634
|
+
height: 4px;
|
|
635
|
+
border-radius: 2px;
|
|
636
|
+
background: var(--dw-border-strong);
|
|
637
|
+
}
|
|
638
|
+
.drawui-opacity-slider::-moz-range-track {
|
|
639
|
+
height: 4px;
|
|
640
|
+
border-radius: 2px;
|
|
641
|
+
background: var(--dw-border-strong);
|
|
642
|
+
}
|
|
643
|
+
.drawui-opacity-slider::-webkit-slider-thumb {
|
|
644
|
+
-webkit-appearance: none;
|
|
645
|
+
appearance: none;
|
|
646
|
+
width: 14px;
|
|
647
|
+
height: 14px;
|
|
648
|
+
/* (轨道高 4 - 滑块高 14) / 2,使滑块在轨道上垂直居中 */
|
|
649
|
+
margin-top: -5px;
|
|
650
|
+
border-radius: 50%;
|
|
651
|
+
background: #ffffff;
|
|
652
|
+
border: 2px solid var(--dw-primary);
|
|
653
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
|
|
654
|
+
transition: transform 0.12s cubic-bezier(0.4, 0, 0.2, 1);
|
|
655
|
+
}
|
|
656
|
+
.drawui-opacity-slider::-moz-range-thumb {
|
|
657
|
+
width: 14px;
|
|
658
|
+
height: 14px;
|
|
659
|
+
border-radius: 50%;
|
|
660
|
+
background: #ffffff;
|
|
661
|
+
border: 2px solid var(--dw-primary);
|
|
662
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
|
|
663
|
+
transition: transform 0.12s cubic-bezier(0.4, 0, 0.2, 1);
|
|
664
|
+
}
|
|
665
|
+
.drawui-opacity-slider:hover::-webkit-slider-thumb {
|
|
666
|
+
transform: scale(1.1);
|
|
667
|
+
}
|
|
668
|
+
.drawui-opacity-slider:hover::-moz-range-thumb {
|
|
669
|
+
transform: scale(1.1);
|
|
670
|
+
}
|
|
440
671
|
.drawui-connection-row {
|
|
441
672
|
display: flex;
|
|
442
673
|
align-items: center;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "drawui-react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "React wrapper for drawui-core canvas drawing (PNG / SVG / PDF export, UML, mind map)",
|
|
6
6
|
"license": "MIT",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"access": "public"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"drawui-core": "0.
|
|
33
|
+
"drawui-core": "0.3.0"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
36
36
|
"react": "^18.3.1"
|