drawui-react 0.1.0

package/dist/index.cjs

@@ -0,0 +1 @@
+'use strict';var react=require('react'),drawuiCore=require('drawui-core'),jsxRuntime=require('react/jsx-runtime');var Ye=[{type:"rectangle",label:"\u77E9\u5F62",icon:jsxRuntime.jsx("rect",{x:"3",y:"5",width:"18",height:"14",rx:"0"})},{type:"rounded-rectangle",label:"\u5706\u89D2\u77E9\u5F62",icon:jsxRuntime.jsx("rect",{x:"3",y:"5",width:"18",height:"14",rx:"4"})},{type:"circle",label:"\u5706\u5F62",icon:jsxRuntime.jsx("circle",{cx:"12",cy:"12",r:"8"})},{type:"ellipse",label:"\u692D\u5706",icon:jsxRuntime.jsx("ellipse",{cx:"12",cy:"12",rx:"9",ry:"6"})},{type:"diamond",label:"\u83F1\u5F62",icon:jsxRuntime.jsx("path",{d:"M12 3L21 12L12 21L3 12Z"})},{type:"triangle",label:"\u4E09\u89D2\u5F62",icon:jsxRuntime.jsx("path",{d:"M12 4L20 19L4 19Z"})},{type:"hexagon",label:"\u516D\u8FB9\u5F62",icon:jsxRuntime.jsx("path",{d:"M12 3L20 7.5V16.5L12 21L4 16.5V7.5Z"})},{type:"parallelogram",label:"\u5E73\u884C\u56DB\u8FB9\u5F62",icon:jsxRuntime.jsx("path",{d:"M7 5L20 5L17 19L4 19Z"})},{type:"trapezoid",label:"\u68AF\u5F62",icon:jsxRuntime.jsx("path",{d:"M6 5L18 5L21 19L3 19Z"})},{type:"pentagon",label:"\u4E94\u8FB9\u5F62",icon:jsxRuntime.jsx("path",{d:"M12 3L21 10L17.5 21L6.5 21L3 10Z"})},{type:"octagon",label:"\u516B\u8FB9\u5F62",icon:jsxRuntime.jsx("path",{d:"M8 3L16 3L21 8L21 16L16 21L8 21L3 16L3 8Z"})},{type:"star",label:"\u661F\u5F62",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"})}],pt=new Set(Ye.map(r=>r.type)),ht=[{type:"arrow",icon:"M5 12h14M12 5l7 7-7 7",label:"\u7BAD\u5934"},{type:"text",icon:"M4 7V4h16v3M9 20h6M12 4v16",label:"\u6587\u672C"}],mt=[{type:"pen",icon:"M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3Z",label:"\u753B\u7B14"},{type:"highlighter",icon:"M14 3l7 7-3 3-7-7 3-3zM9 8L3 14v3h3l6-6",label:"\u8367\u5149\u7B14"}],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",Ae=react.memo(function({activeTool:e,onToolChange:o,showGrid:t,onToggleGrid:c,canUndo:p=false,canRedo:m=false,onUndo:y,onRedo:R}){let[x,C]=react.useState(false),a=react.useRef(null);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:()=>o("select"),title:"\u9009\u62E9 (V)",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:()=>o("hand"),title:"\u62D6\u62FD\u89C6\u53E3 (H)",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:()=>{a.current&&(clearTimeout(a.current),a.current=null),C(true);},onMouseLeave:()=>{a.current=window.setTimeout(()=>{C(false);},200);},children:[jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${pt.has(e)?"active":""}`,onClick:()=>o("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"})})}),x&&jsxRuntime.jsx("div",{className:"drawui-toolbar-shape-grid",children:Ye.map(u=>jsxRuntime.jsx("button",{className:`drawui-toolbar-shape-item ${e===u.type?"active":""}`,onClick:()=>{o(u.type),C(false);},title:u.label,children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:u.icon})},u.type))})]}),jsxRuntime.jsx("div",{className:"drawui-toolbar-divider"}),ht.map(u=>jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${e===u.type?"active":""}`,onClick:()=>o(u.type),title:u.label,children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("path",{d:u.icon})})},u.type)),jsxRuntime.jsx("div",{className:"drawui-toolbar-divider"}),mt.map(u=>jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${e===u.type?"active":""}`,onClick:()=>o(u.type),title:u.label,children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("path",{d:u.icon})})},u.type)),jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${e==="uml-class"?"active":""}`,onClick:()=>o("uml-class"),title:"UML \u7C7B\u56FE",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:()=>o("uml-interface"),title:"UML \u63A5\u53E3",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("div",{className:"drawui-toolbar-divider"}),jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${t?"active":""}`,onClick:c,title:"\u7F51\u683C",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:y,disabled:!p,style:p?void 0:{opacity:.4,cursor:"default"},title:"\u64A4\u9500 (Ctrl+Z)",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:R,disabled:!m,style:m?void 0:{opacity:.4,cursor:"default"},title:"\u91CD\u505A (Ctrl+Shift+Z)",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"})]})})]})})});var Be=react.memo(function({onZoomIn:e,onZoomOut:o,onReset:t,zoomLevel:c=100}){return jsxRuntime.jsxs("div",{className:"drawui-zoom-control",children:[jsxRuntime.jsx("button",{className:"drawui-zoom-button",onClick:e,title:"\u653E\u5927",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:[c,"%"]}),jsxRuntime.jsx("button",{className:"drawui-zoom-button",onClick:o,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:t,title:"\u91CD\u7F6E",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 Ge=["#1f2937","#ef4444","#f97316","#facc15","#22c55e","#3b82f6","#8b5cf6","#ec4899","#9ca3af","#ffffff"],Xe=[{key:"stroke",label:"\u8FB9\u6846",hasTransparent:false},{key:"fill",label:"\u586B\u5145",hasTransparent:true},{key:"text",label:"\u6587\u5B57",hasTransparent:false},{key:"highlight",label:"\u9AD8\u4EAE",hasTransparent:true}],gt=[{type:"straight",label:"\u76F4\u7EBF",icon:"\u2501"},{type:"polyline",label:"\u6298\u7EBF",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",label:"\u76F4\u89D2\u6298\u7EBF",icon:"\u2517"},{type:"curve",label:"\u66F2\u7EBF",icon:"\u223F"}],vt=[{type:"none",label:"\u65E0\u7BAD\u5934",icon:"\u2501"},{type:"end",label:"\u7EC8\u70B9\u7BAD\u5934",icon:"\u2192"},{type:"start",label:"\u8D77\u70B9\u7BAD\u5934",icon:"\u2190"},{type:"both",label:"\u53CC\u7BAD\u5934",icon:"\u21C4"},{type:"inheritance",label:"\u7EE7\u627F",icon:"\u2501\u2501\u25B7"},{type:"composition",label:"\u7EC4\u5408",icon:"\u25C6\u2501\u2501"},{type:"aggregation",label:"\u805A\u5408",icon:"\u25C7\u2501\u2501"}],je=react.memo(function({editor:e,selectedCount:o,hasLineSelection:t,currentConnectionType:c,currentArrowHead:p,currentDashed:m}){if(!e||o===0)return null;let y=(a,b)=>{switch(a){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}},R=a=>{e.updateConnectionType(a);},x=a=>{e.updateArrowHeadType(a);},C=a=>{e.updateArrowDashed(a);};return jsxRuntime.jsxs("div",{className:"drawui-style-panel",children:[jsxRuntime.jsx("div",{className:"drawui-style-col",children:Xe.slice(0,2).map(a=>jsxRuntime.jsxs("div",{className:"drawui-style-group",children:[jsxRuntime.jsx("div",{className:"drawui-style-group-label",children:a.label}),jsxRuntime.jsxs("div",{className:"drawui-color-row",children:[a.hasTransparent&&jsxRuntime.jsx("button",{className:"drawui-color-swatch drawui-color-swatch-transparent",onClick:()=>y(a.key,"transparent"),title:"\u65E0"}),Ge.map(b=>jsxRuntime.jsx("button",{className:"drawui-color-swatch",style:{background:b},onClick:()=>y(a.key,b),title:b},`${a.key}-${b}`))]})]},a.key))}),jsxRuntime.jsx("div",{className:"drawui-style-divider"}),jsxRuntime.jsx("div",{className:"drawui-style-col",children:Xe.slice(2).map(a=>jsxRuntime.jsxs("div",{className:"drawui-style-group",children:[jsxRuntime.jsx("div",{className:"drawui-style-group-label",children:a.label}),jsxRuntime.jsxs("div",{className:"drawui-color-row",children:[a.hasTransparent&&jsxRuntime.jsx("button",{className:"drawui-color-swatch drawui-color-swatch-transparent",onClick:()=>y(a.key,"transparent"),title:"\u65E0"}),Ge.map(b=>jsxRuntime.jsx("button",{className:"drawui-color-swatch",style:{background:b},onClick:()=>y(a.key,b),title:b},`${a.key}-${b}`))]})]},a.key))}),t&&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:"\u8FDE\u7EBF"}),jsxRuntime.jsx("div",{className:"drawui-connection-row",children:gt.map(a=>jsxRuntime.jsxs("button",{className:`drawui-connection-btn${c===a.type?" active":""}`,onClick:()=>R(a.type),title:a.label,children:[jsxRuntime.jsx("span",{className:"drawui-connection-icon",children:a.icon}),jsxRuntime.jsx("span",{className:"drawui-connection-label",children:a.label})]},a.type))})]}),jsxRuntime.jsxs("div",{className:"drawui-style-group",children:[jsxRuntime.jsx("div",{className:"drawui-style-group-label",children:"\u7BAD\u5934"}),jsxRuntime.jsx("div",{className:"drawui-connection-row",children:vt.map(a=>jsxRuntime.jsxs("button",{className:`drawui-connection-btn${p===a.type?" active":""}`,onClick:()=>x(a.type),title:a.label,children:[jsxRuntime.jsx("span",{className:"drawui-connection-icon",children:a.icon}),jsxRuntime.jsx("span",{className:"drawui-connection-label",children:a.label})]},a.type))})]}),jsxRuntime.jsxs("div",{className:"drawui-style-group",children:[jsxRuntime.jsx("div",{className:"drawui-style-group-label",children:"\u865A\u7EBF"}),jsxRuntime.jsxs("div",{className:"drawui-connection-row",children:[jsxRuntime.jsxs("button",{className:`drawui-connection-btn${m?"":" active"}`,onClick:()=>C(false),title:"\u5B9E\u7EBF",children:[jsxRuntime.jsx("span",{className:"drawui-connection-icon",children:"\u2501"}),jsxRuntime.jsx("span",{className:"drawui-connection-label",children:"\u5B9E\u7EBF"})]}),jsxRuntime.jsxs("button",{className:`drawui-connection-btn${m?" active":""}`,onClick:()=>C(true),title:"\u865A\u7EBF",children:[jsxRuntime.jsx("span",{className:"drawui-connection-icon",children:"\u2504"}),jsxRuntime.jsx("span",{className:"drawui-connection-label",children:"\u865A\u7EBF"})]})]})]})]})]})]})});var $e=14,Ke=20,Mt=["#1f2937","#ef4444","#f97316","#facc15","#22c55e","#3b82f6","#8b5cf6","#ec4899","#9ca3af"],Nt=[12,14,16,18,20,24];function Je(r,e,o){let t=r,c=o,p=t.charAt(0);if(t.length>1&&(p==="+"||p==="-"||p==="#"||p==="~")&&t.charAt(1)===" "&&(c=p,t=t.slice(2)),t=t.replace(/^\s+|\s+$/g,""),e==="attribute"){let a=t.indexOf(":");return a===-1?{visibility:c,name:t,type:"",params:"",returnType:""}:{visibility:c,name:t.slice(0,a).replace(/^\s+|\s+$/g,""),type:t.slice(a+1).replace(/^\s+|\s+$/g,""),params:"",returnType:""}}let m=t.indexOf("(");if(m===-1){let a=t.lastIndexOf(":");return a===-1?{visibility:c,name:t,type:"",params:"",returnType:""}:{visibility:c,name:t.slice(0,a).replace(/^\s+|\s+$/g,""),type:"",params:"",returnType:t.slice(a+1).replace(/^\s+|\s+$/g,"")}}let y=t.slice(0,m).replace(/^\s+|\s+$/g,""),R=t.indexOf(")",m);if(R===-1)return {visibility:c,name:y,type:"",params:t.slice(m+1).replace(/^\s+|\s+$/g,""),returnType:""};let x=t.slice(m+1,R).replace(/^\s+|\s+$/g,""),C=t.slice(R+1).replace(/^\s+|\s+$/g,"");return C.startsWith(":")&&(C=C.slice(1).replace(/^\s+|\s+$/g,"")),{visibility:c,name:y,type:"",params:x,returnType:C}}function Rt(r,e){let o=`${e.visibility} `;return r==="attribute"?`${o}${e.name}: ${e.type??""}`:`${o}${e.name}(${e.params??""}): ${e.returnType??""}`}var et=react.memo(function({editor:e,umlClass:o,editing:t}){let[,c]=react.useState(0);react.useEffect(()=>{if(!e)return;let n=e.subscribe(()=>c(f=>f+1));return ()=>{n();}},[e]);let[p,m]=react.useState(null),[y,R]=react.useState(false),x=react.useRef(null),C=react.useRef(null),a=react.useCallback((n,f)=>{x.current&&(clearTimeout(x.current),x.current=null),m({section:n,rowId:f}),R(false);},[]),b=react.useCallback(()=>{x.current&&clearTimeout(x.current),x.current=window.setTimeout(()=>{m(null),R(false);},150);},[]);if(!e||!o||t!==o.id)return null;let U=e.getCamera(),{id:u,x:D,y:z,width:de,height:ue,className:fe,methods:d}=o,g=o.type==="uml-interface",s=g?[]:o.attributes,E=de/2,$=ue/2,W=drawuiCore.UML_HEADER_HEIGHT,Z=drawuiCore.UML_LINE_HEIGHT,ie=drawuiCore.UML_PADDING_X,ae=drawuiCore.UML_PADDING_Y,pe=g?0:s.length>0?s.length*Z+ae*2:ae*2,l=U.zoom,se=(de-ie*2)*l,j=4*l,le=U.pageToScreen({x:D-E+ie,y:z}),Y=U.pageToScreen({x:D,y:z-$+W/2}),ee=n=>U.pageToScreen({x:D,y:n}).y,_=Z*l,ne=n=>z+(-$+W+ae+Z/2+n*Z),v=n=>z+(-$+W+pe+ae+Z/2+n*Z),k=z+(-$+W+pe),F=z+$,G={background:"#ffffff",borderWidth:1,borderStyle:"solid",borderColor:"transparent",outline:"none",padding:0,fontFamily:"sans-serif",boxSizing:"border-box"},V=(n,f)=>{let h=s.find(L=>L.id===n);if(!h)return;let w=Je(f,"attribute",h.visibility);e.updateUmlClass(u,{attributes:s.map(L=>L.id===n?{...L,...w}:L)});},Ne=(n,f)=>{let h=d.find(I=>I.id===n);if(!h)return;let w=Je(f,"method",h.visibility),L=d.map(I=>I.id===n?{...I,...w}:I);g?e.updateUmlInterface(u,{methods:L}):e.updateUmlClass(u,{methods:L});},Re=(n,f,h)=>{C.current={section:n,from:f},h.dataTransfer.effectAllowed="move",h.dataTransfer.setData("text/plain",`${n}:${f}`);},Ee=n=>{n.preventDefault(),n.dataTransfer.dropEffect="move";},Ie=(n,f,h)=>{h.preventDefault();let w=C.current;!w||w.section!==n||(n==="attribute"?e.reorderUmlAttribute(u,w.from,f):e.reorderUmlMethod(u,w.from,f),C.current=null);},be=(n,f,h,w)=>{let L=ee(w),I=p?.section===n&&p.rowId===h.id,ve=(h.fontSize||drawuiCore.UML_FONT_SIZE)*l,q=h.textColor||"#1f2937",K={position:"absolute",left:le.x-$e*l-j,top:L-_/2,width:$e*l+j+se+Ke*l,height:_,display:"flex",alignItems:"center",gap:2,pointerEvents:"none",zIndex:53},we={...G,width:se,height:_-2,fontSize:ve,color:q,textDecoration:h.strikethrough?"line-through":"none",pointerEvents:"auto",...I?{borderColor:"#3b82f6"}:{}},Pe={width:$e*l,height:_-2,cursor:"grab",color:"#9ca3af",display:"flex",alignItems:"center",justifyContent:"center",userSelect:"none",fontSize:12*l,lineHeight:1,opacity:I?1:.55,pointerEvents:"auto"},xe={width:Ke*l,height:_-6,border:"none",background:"transparent",color:"#9ca3af",cursor:"pointer",borderRadius:3,fontSize:14*l,opacity:I?1:.35,pointerEvents:"auto"};return jsxRuntime.jsxs("div",{style:K,onDragOver:Ee,onDrop:J=>Ie(n,f,J),children:[jsxRuntime.jsx("span",{style:Pe,draggable:true,onDragStart:J=>Re(n,f,J),title:"\u62D6\u62FD\u6392\u5E8F",children:"\u22EE\u22EE"}),jsxRuntime.jsx("input",{style:we,value:Rt(n,h),onChange:J=>n==="attribute"?V(h.id,J.target.value):Ne(h.id,J.target.value),onFocus:()=>a(n,h.id),onBlur:b,spellCheck:false}),jsxRuntime.jsx("button",{style:xe,onMouseDown:J=>J.preventDefault(),onClick:()=>{n==="attribute"?e.removeUmlAttribute(u,h.id):e.removeUmlMethod(u,h.id);},title:"\u5220\u9664\u8BE5\u884C",children:"\xD7"})]},h.id)},ge=(n,f,h)=>{let w=ee(f),L=n==="attribute";return jsxRuntime.jsxs("button",{onMouseDown:I=>I.preventDefault(),onClick:()=>L?e.addUmlAttribute(u):e.addUmlMethod(u),className:"drawui-uml-add-row",style:{position:"absolute",left:le.x,top:w-9*l,height:18*l,padding:`0 ${6*l}px`,fontSize:11*l,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:h,children:[jsxRuntime.jsx("span",{style:{fontSize:13*l,lineHeight:1},children:"+"}),jsxRuntime.jsx("span",{children:h})]},`add-${n}`)},He=()=>{if(!p||p.section==="className")return null;let n=p.section,f=p.rowId,h=n==="attribute"?s:d,w=h.find(H=>H.id===f);if(!w)return null;let L=h.findIndex(H=>H.id===f),I=n==="attribute"?ne(L):v(L);ee(I);let q=224*l,K=30*l,we=U.pageToScreen({x:D,y:z}).x,Pe=U.pageToScreen({x:D,y:z-$}).y,xe=20*l,J=Pe-K-xe,at=we-q/2,st=J+K,Ve=w.textColor||"#1f2937",lt=w.fontSize||drawuiCore.UML_FONT_SIZE,Ue=!!w.strikethrough;return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{style:{position:"absolute",left:we-.5,top:st,width:1,height:xe,background:"#d1d5db",pointerEvents:"none",zIndex:59}}),jsxRuntime.jsxs("div",{className:"drawui-uml-toolbar",style:{position:"absolute",left:at,top:J,width:q,height:K,background:"#ffffff",border:"1px solid #e5e7eb",borderRadius:6,boxShadow:"0 4px 12px rgba(0, 0, 0, 0.1)",display:"flex",alignItems:"center",gap:4*l,padding:`0 ${6*l}px`,pointerEvents:"auto",zIndex:60,fontSize:12*l},onMouseDown:H=>H.preventDefault(),children:[jsxRuntime.jsxs("div",{style:{position:"relative"},children:[jsxRuntime.jsxs("button",{onClick:()=>R(H=>!H),className:"drawui-uml-toolbar-btn",title:"\u6587\u5B57\u989C\u8272",style:{border:"none",background:"transparent",cursor:"pointer",padding:2,display:"flex",alignItems:"center",borderRadius:3},children:[jsxRuntime.jsx("span",{style:{fontWeight:700,color:Ve,fontSize:13*l,textDecoration:Ue?"line-through":"none"},children:"A"}),jsxRuntime.jsx("span",{style:{width:10*l,height:2*l,background:Ve,marginLeft:3,borderRadius:1}})]}),y&&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(u,n,w.id,{textColor:null}),R(false);},style:{width:14,height:14,border:"1px solid #e5e7eb",background:"transparent",cursor:"pointer",borderRadius:2},title:"\u9ED8\u8BA4\u989C\u8272"}),Mt.map(H=>jsxRuntime.jsx("button",{onClick:()=>{e.updateUmlRowStyle(u,n,w.id,{textColor:H}),R(false);},style:{width:14,height:14,border:"none",background:H,cursor:"pointer",borderRadius:2},title:H},H))]})]}),jsxRuntime.jsx("select",{value:lt,onChange:H=>e.updateUmlRowStyle(u,n,w.id,{fontSize:Number(H.target.value)}),style:{border:"1px solid #e5e7eb",borderRadius:3,padding:`0 ${2*l}px`,fontSize:12*l,height:20*l,background:"#ffffff"},title:"\u5B57\u53F7",children:Nt.map(H=>jsxRuntime.jsx("option",{value:H,children:H},H))}),jsxRuntime.jsx("button",{onClick:()=>e.updateUmlRowStyle(u,n,w.id,{strikethrough:!Ue}),className:"drawui-uml-toolbar-btn",title:"\u5220\u9664\u7EBF",style:{border:"none",background:Ue?"#e0e7ff":"transparent",cursor:"pointer",padding:2,borderRadius:3},children:jsxRuntime.jsx("span",{style:{fontWeight:700,fontSize:13*l,textDecoration:"line-through"},children:"A"})}),jsxRuntime.jsx("button",{onClick:()=>{n==="attribute"?e.removeUmlAttribute(u,w.id):e.removeUmlMethod(u,w.id),m(null);},className:"drawui-uml-toolbar-btn",title:"\u5220\u9664\u8BE5\u884C",style:{border:"none",background:"transparent",cursor:"pointer",color:"#ef4444",padding:2,marginLeft:"auto",borderRadius:3},children:jsxRuntime.jsxs("svg",{width:14*l,height:14*l,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"})]})})]})]})},T=U.pageToScreen({x:D-E,y:z}).x,X=U.pageToScreen({x:D,y:z-$}).y,oe=de*l,ce=ue*l;return jsxRuntime.jsxs("div",{style:{position:"absolute",inset:0,pointerEvents:"none",zIndex:50},children:[jsxRuntime.jsx("div",{style:{position:"absolute",left:T+1,top:X+1,width:Math.max(0,oe-2),height:Math.max(0,ce-2),background:"#ffffff",pointerEvents:"none",zIndex:51}}),jsxRuntime.jsx("input",{style:{...G,position:"absolute",left:Y.x-se/2,top:Y.y-W*l/2+2,width:se,height:W*l-4,textAlign:"center",fontWeight:700,fontSize:(o.fontSize||drawuiCore.UML_FONT_SIZE)*l,color:o.textColor||"#1f2937",pointerEvents:"auto",zIndex:52,...p?.section==="className"?{borderColor:"#3b82f6"}:{}},value:fe,onChange:n=>g?e.updateUmlInterface(u,{className:n.target.value}):e.updateUmlClass(u,{className:n.target.value}),onFocus:()=>a("className",""),onBlur:b,spellCheck:false}),!g&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[s.map((n,f)=>be("attribute",f,n,ne(f))),ge("attribute",k,"\u5C5E\u6027")]}),d.map((n,f)=>be("method",f,n,v(f))),ge("method",F,"\u65B9\u6CD5"),He()]})});var We=220,Ze=140,Ht="#fafafa",Pt="#cbd5e1",Ut="#3b82f6",At="rgba(59, 130, 246, 0.18)",Bt="rgba(59, 130, 246, 0.85)";function Dt(r,e){let o=Math.min(r.x,e.x),t=Math.min(r.y,e.y),c=Math.max(r.x+r.width,e.x+e.width),p=Math.max(r.y+r.height,e.y+e.height);return {x:o,y:t,width:c-o,height:p-t}}function zt(r){return {x:r.x+r.width/2,y:r.y+r.height/2}}function $t(){return {x:0,y:0,width:0,height:0}}function Wt(r){let e=1/0,o=1/0,t=-1/0,c=-1/0,p=false;for(let m of r){let y=_e(m);y&&(p=true,y.x<e&&(e=y.x),y.y<o&&(o=y.y),y.x+y.width>t&&(t=y.x+y.width),y.y+y.height>c&&(c=y.y+y.height));}return p?{x:e,y:o,width:t-e,height:c-o}:null}function _e(r){switch(r.type){case "rectangle":case "rounded-rectangle":case "ellipse":case "diamond":case "triangle":case "hexagon":case "text":return {x:r.x-r.width/2,y:r.y-r.height/2,width:r.width,height:r.height};case "circle":return {x:r.x-r.radius,y:r.y-r.radius,width:r.radius*2,height:r.radius*2};case "line":case "arrow":case "draw":{let e=r.points;if(!e||e.length===0)return null;let o=1/0,t=1/0,c=-1/0,p=-1/0;for(let m of e)m.x<o&&(o=m.x),m.y<t&&(t=m.y),m.x>c&&(c=m.x),m.y>p&&(p=m.y);return {x:o,y:t,width:c-o,height:p-t}}default:return null}}function Zt(r){let e=r.getCamera(),o=e.screenToPage({x:0,y:0}),t=e.screenToPage({x:window.innerWidth,y:window.innerHeight});return {x:o.x,y:o.y,width:t.x-o.x,height:t.y-o.y}}function Ot(r,e,o){if(r.width<=0||r.height<=0)return {x:r.x-e/2,y:r.y-o/2,width:e,height:o};let t=e/o,c=r.width,p=c/t;p<r.height&&(p=r.height,c=p*t);let m=zt(r);return {x:m.x-c/2,y:m.y-p/2,width:c,height:p}}function Oe(r,e,o,t){let c=(r-o.left)/o.width,p=(e-o.top)/o.height;return {x:t.x+c*t.width,y:t.y+p*t.height}}var ot=react.memo(function({editor:e}){let o=react.useRef(null),t=react.useRef(null),[c,p]=react.useState(false),[m,y]=react.useState(100),[R,x]=react.useState(false),[C,a]=react.useState(false),b=react.useRef(null),U=react.useRef(null);react.useLayoutEffect(()=>{let d=o.current,g=t.current;if(!d||!g)return;let s=window.devicePixelRatio||1;d.width=Math.round(We*s),d.height=Math.round(Ze*s),d.style.width=`${We}px`,d.style.height=`${Ze}px`;},[c]);let u=react.useCallback(()=>{let d=o.current,g=t.current;if(!d||!g||!e)return;let s=d.getContext("2d");if(!s)return;let E=We,$=Ze,W=d.width,Z=d.height,ie=e.getShapes(),ae=new Set(e.getSelectedIds()),pe=Wt(ie),l=Zt(e),se=pe?Dt(pe,l):l.width>0?l:$t(),j=Ot(se,E,$);U.current=j;let le=W/j.width,Y=Z/j.height,ee=E/j.width;s.setTransform(1,0,0,1,0,0),s.fillStyle=Ht,s.fillRect(0,0,W,Z),s.setTransform(le,0,0,Y,-le*j.x,-Y*j.y),s.fillStyle=Pt;for(let v of ie){let k=_e(v);k&&s.fillRect(k.x,k.y,k.width,k.height);}s.fillStyle=Ut;for(let v of ie){if(!ae.has(v.id))continue;let k=_e(v);k&&s.fillRect(k.x,k.y,k.width,k.height);}s.fillStyle=At,s.fillRect(l.x,l.y,l.width,l.height);let _=1.5/ee;s.strokeStyle=Bt,s.lineWidth=_,s.lineJoin="round";let ne=Math.min(l.width/6,l.height/6,6/ee);if(s.beginPath(),ne*ee<1)s.rect(l.x,l.y,l.width,l.height);else {let v=l.x,k=l.y,F=l.width,G=l.height,V=Math.min(ne,F/2,G/2);s.moveTo(v+V,k),s.lineTo(v+F-V,k),s.quadraticCurveTo(v+F,k,v+F,k+V),s.lineTo(v+F,k+G-V),s.quadraticCurveTo(v+F,k+G,v+F-V,k+G),s.lineTo(v+V,k+G),s.quadraticCurveTo(v,k+G,v,k+G-V),s.lineTo(v,k+V),s.quadraticCurveTo(v,k,v+V,k),s.closePath();}s.stroke(),s.setTransform(1,0,0,1,0,0);},[e]);react.useEffect(()=>{if(!e||c)return;u();let d=e.subscribe(u),g=()=>u();return window.addEventListener("resize",g),()=>{d(),window.removeEventListener("resize",g);}},[e,c,u]),react.useEffect(()=>{if(!e)return;let d=()=>{let s=e.getCamera().getZoom();y(Math.round(s*100));};d();let g=e.subscribe(d);return ()=>{g();}},[e]);let D=react.useCallback((d,g)=>{if(!e)return;let s=e.getCamera(),E=s.getZoom(),$=window.innerWidth/2,W=window.innerHeight/2,Z=s;Z.x=$-d*E,Z.y=W-g*E,e.requestRender();},[e]),z=d=>{if(!e||!t.current||d.button!==0)return;let g=t.current.getBoundingClientRect(),s=U.current;if(!s)return;let E=Oe(d.clientX,d.clientY,g,s);b.current={pointerId:d.pointerId,rect:{left:g.left,top:g.top,width:g.width,height:g.height},canvasBox:s},d.currentTarget.setPointerCapture(d.pointerId),a(true),D(E.x,E.y);},de=d=>{if(!C||!e||!b.current||!t.current)return;let g=b.current,s=Oe(d.clientX,d.clientY,g.rect,g.canvasBox);D(s.x,s.y);},ue=d=>{if(C){a(false),b.current=null;try{d.currentTarget.releasePointerCapture(d.pointerId);}catch{}}};return jsxRuntime.jsxs("div",{className:`drawui-minimap ${c?"collapsed":""}`,children:[jsxRuntime.jsx("button",{className:"drawui-minimap-toggle",onClick:()=>p(d=>!d),title:c?"\u5C55\u5F00\u5C0F\u5730\u56FE":"\u6536\u8D77\u5C0F\u5730\u56FE","aria-label":c?"\u5C55\u5F00\u5C0F\u5730\u56FE":"\u6536\u8D77\u5C0F\u5730\u56FE",children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:c?jsxRuntime.jsx("polyline",{points:"9 6 15 12 9 18"}):jsxRuntime.jsx("polyline",{points:"15 6 9 12 15 18"})})}),!c&&jsxRuntime.jsxs("div",{className:"drawui-minimap-panel",children:[jsxRuntime.jsxs("div",{className:"drawui-minimap-header",children:[jsxRuntime.jsx("span",{className:"drawui-minimap-title",children:"\u5C0F\u5730\u56FE"}),jsxRuntime.jsxs("span",{className:"drawui-minimap-zoom",children:[m,"%"]})]}),jsxRuntime.jsx("div",{ref:t,className:"drawui-minimap-canvas-wrap",style:{cursor:C?"grabbing":R?"pointer":"default"},onPointerEnter:()=>x(true),onPointerLeave:()=>x(false),children:jsxRuntime.jsx("canvas",{ref:o,className:"drawui-minimap-canvas",onPointerDown:z,onPointerMove:de,onPointerUp:ue,onPointerCancel:ue,onDoubleClick:d=>{if(!e||!t.current)return;let g=U.current;if(!g)return;let s=t.current.getBoundingClientRect(),E=Oe(d.clientX,d.clientY,s,g);D(E.x,E.y);}})})]})]})});var O=r=>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:r}),Yt=[{type:"rectangle",label:"\u77E9\u5F62",glyph:O(jsxRuntime.jsx("rect",{x:"4",y:"7",width:"16",height:"10",rx:"1"}))},{type:"rounded-rectangle",label:"\u5706\u89D2",glyph:O(jsxRuntime.jsx("rect",{x:"4",y:"7",width:"16",height:"10",rx:"4"}))},{type:"circle",label:"\u5706\u5F62",glyph:O(jsxRuntime.jsx("circle",{cx:"12",cy:"12",r:"5.5"}))},{type:"ellipse",label:"\u692D\u5706",glyph:O(jsxRuntime.jsx("ellipse",{cx:"12",cy:"12",rx:"7",ry:"4.5"}))},{type:"diamond",label:"\u83F1\u5F62",glyph:O(jsxRuntime.jsx("path",{d:"M12 5 L19 12 L12 19 L5 12 Z"}))},{type:"triangle",label:"\u4E09\u89D2",glyph:O(jsxRuntime.jsx("path",{d:"M12 4 L20 19 H4 Z"}))},{type:"hexagon",label:"\u516D\u8FB9\u5F62",glyph:O(jsxRuntime.jsx("path",{d:"M12 3 L19.5 7.5 V16.5 L12 21 L4.5 16.5 V7.5 Z"}))},{type:"parallelogram",label:"\u5E73\u884C",glyph:O(jsxRuntime.jsx("path",{d:"M6 7 L19 7 L16 17 H7 Z"}))},{type:"trapezoid",label:"\u68AF\u5F62",glyph:O(jsxRuntime.jsx("path",{d:"M7 6 H17 L20 18 H4 Z"}))},{type:"pentagon",label:"\u4E94\u8FB9\u5F62",glyph:O(jsxRuntime.jsx("path",{d:"M12 4 L19.5 9.5 L16.5 18.5 H7.5 L4.5 9.5 Z"}))},{type:"octagon",label:"\u516B\u8FB9\u5F62",glyph:O(jsxRuntime.jsx("path",{d:"M8 4 H16 L20 8 V16 L16 20 H8 L4 16 V8 Z"}))},{type:"star",label:"\u661F\u5F62",glyph:O(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",label:"\u7C7B\u56FE",glyph:O(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",label:"\u63A5\u53E3",glyph:O(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"})]}))}];function it({editor:r,x:e,y:o,context:t,existingArrowId:c,defaultShapeType:p,onClose:m}){let y=react.useRef(null),R=x=>{r?.createGeneratedConnection(t,{type:x,existingArrowId:c}),m();};return react.useEffect(()=>{let x=b=>{y.current&&!y.current.contains(b.target)&&m();},C=b=>{b.key==="Escape"&&(b.preventDefault(),m());},a=setTimeout(()=>{window.addEventListener("pointerdown",x,true),window.addEventListener("keydown",C,true);},0);return ()=>{clearTimeout(a),window.removeEventListener("pointerdown",x,true),window.removeEventListener("keydown",C,true);}},[m]),jsxRuntime.jsxs("div",{className:"drawui-gen-menu",ref:y,style:{left:e,top:o},children:[jsxRuntime.jsx("div",{className:"drawui-gen-menu-label",children:"\u9009\u62E9\u65B0\u56FE\u5F62"}),jsxRuntime.jsx("div",{className:"drawui-gen-shape-grid",children:Yt.map(x=>jsxRuntime.jsxs("button",{className:`drawui-gen-shape-btn${x.type===p?" drawui-gen-shape-active":""}`,onClick:()=>R(x.type),title:x.label,children:[x.glyph,jsxRuntime.jsx("span",{className:"drawui-gen-shape-label",children:x.label})]},x.type))}),jsxRuntime.jsx("div",{className:"drawui-gen-menu-hint",children:"\u70B9\u51FB\u7A7A\u767D\u5904\u53D6\u6D88"})]})}var jt={select:"\u9009\u62E9\u5DE5\u5177",hand:"\u62D6\u62FD\u89C6\u53E3",rectangle:"\u77E9\u5F62","rounded-rectangle":"\u5706\u89D2\u77E9\u5F62",circle:"\u5706\u5F62",ellipse:"\u692D\u5706",diamond:"\u83F1\u5F62",triangle:"\u4E09\u89D2\u5F62",hexagon:"\u516D\u8FB9\u5F62",parallelogram:"\u5E73\u884C\u56DB\u8FB9\u5F62",trapezoid:"\u68AF\u5F62",pentagon:"\u4E94\u8FB9\u5F62",octagon:"\u516B\u8FB9\u5F62",star:"\u661F\u5F62","uml-class":"UML \u7C7B\u56FE","uml-interface":"UML \u63A5\u53E3",line:"\u76F4\u7EBF",arrow:"\u7EBF\u6761",text:"\u6587\u672C",draw:"\u753B\u7B14",pen:"\u753B\u7B14",highlighter:"\u8367\u5149\u7B14"};function Ft({initialTool:r="select",className:e=""}){let o=react.useRef(null),t=react.useRef(null),[c,p]=react.useState(null),[m,y]=react.useState(r),[R,x]=react.useState(false),[C,a]=react.useState(0),[b,U]=react.useState(false),[u,D]=react.useState("straight"),[z,de]=react.useState("end"),[ue,fe]=react.useState(false),[d,g]=react.useState(100),[s,E]=react.useState(null),[$,W]=react.useState(null),[Z,ie]=react.useState(false),[ae,pe]=react.useState(false),[l,se]=react.useState(null),[j,le]=react.useState(null),[Y,ee]=react.useState(null),_=react.useRef(null),ne=react.useRef(0),v=react.useRef(null);react.useEffect(()=>{if(!o.current)return;let T=new drawuiCore.Editor(o.current);t.current=T,p(T),window.__drawuiEditor=T,r&&T.setActiveTool(r);let X=T.subscribe(()=>{y(T.getActiveTool());let n=T.getSelectedIds();a(n.length);let h=T.getShapes().filter(L=>n.includes(L.id)&&(L.type==="line"||L.type==="arrow"));if(U(h.length>0),h.length>0&&h[0].connectionType?D(h[0].connectionType):h.length>0&&D("straight"),h.length>0){let L=h.find(I=>I.type==="arrow");L&&(de(L.arrowHead??"end"),fe(L.dashed??false));}g(Math.round(T.getCamera().getZoom()*100)),ie(T.canUndo()),pe(T.canRedo());let w=T.getSelectedUml();se(w),w||le(null);}),oe=T.subscribeNotifications(n=>{W(n),_.current&&clearTimeout(_.current),_.current=setTimeout(()=>W(null),2e3);}),ce=T.subscribeUi(n=>{n.kind==="shapeTypeMenu"&&ee({x:n.screenX,y:n.screenY,context:n.context,existingArrowId:n.existingArrowId,defaultShapeType:n.defaultShapeType});});return ()=>{X(),oe(),ce(),_.current&&clearTimeout(_.current),cancelAnimationFrame(ne.current),T.dispose();}},[r]);let k=react.useCallback(T=>{t.current?.setActiveTool(T);},[]),F=react.useCallback(()=>{t.current?.zoomIn();},[]),G=react.useCallback(()=>{t.current?.zoomOut();},[]),V=react.useCallback(()=>{t.current?.resetZoom();},[]),Ne=react.useCallback(()=>{let T=!R;x(T),t.current?.setShowGrid(T);},[R]),Re=react.useCallback(()=>{t.current?.undo();},[]),Ee=react.useCallback(()=>{t.current?.redo();},[]),Ie=react.useCallback(T=>{let X=t.current,oe=o.current;if(!X||!oe)return;if(X.isPointerDown()){v.current!==null&&(v.current=null,E(null));return}let ce=T.clientX,n=T.clientY;cancelAnimationFrame(ne.current),ne.current=requestAnimationFrame(()=>{let f=oe.getBoundingClientRect(),h=ce-f.left,w=n-f.top,L=h+12,I=w+12,ve=X.getSelectedUml()?.id,q=X.getUmlRowAtScreenPoint({x:h,y:w});if(q&&q.shape.id!==ve&&q.text){v.current!==q.text&&(v.current=q.text,E({text:q.text,x:L,y:I}));return}let K=X.getShapeAtScreenPoint({x:h,y:w});K&&K.text?v.current!==K.text&&(v.current=K.text,E({text:K.text,x:L,y:I})):v.current!==null&&(v.current=null,E(null));});},[]),be=react.useCallback(()=>{E(null);},[]),ge=react.useCallback(T=>{let X=t.current,oe=o.current;if(!X||!oe)return;let ce=oe.getBoundingClientRect(),n=X.getUmlRowAtScreenPoint({x:T.clientX-ce.left,y:T.clientY-ce.top});le(n?n.shape.id:null);},[]),He=react.useCallback(()=>{ee(null);},[]);return jsxRuntime.jsxs("div",{className:`drawui-canvas-board ${e}`,children:[jsxRuntime.jsx("canvas",{ref:o,className:"drawui-canvas",onMouseMove:Ie,onMouseLeave:be,onDoubleClick:ge}),s&&jsxRuntime.jsx("div",{className:"drawui-tooltip",style:{left:s.x,top:s.y},children:s.text}),jsxRuntime.jsx(Ae,{activeTool:m,onToolChange:k,showGrid:R,onToggleGrid:Ne,canUndo:Z,canRedo:ae,onUndo:Re,onRedo:Ee}),jsxRuntime.jsx(Be,{onZoomIn:F,onZoomOut:G,onReset:V,zoomLevel:d}),jsxRuntime.jsx(je,{editor:c,selectedCount:C,hasLineSelection:b,currentConnectionType:u,currentArrowHead:z,currentDashed:ue}),jsxRuntime.jsx(et,{editor:c,umlClass:l,editing:j}),jsxRuntime.jsx(ot,{editor:c}),Y&&jsxRuntime.jsx(it,{editor:c,x:Y.x,y:Y.y,context:Y.context,existingArrowId:Y.existingArrowId,defaultShapeType:Y.defaultShapeType,onClose:He}),jsxRuntime.jsxs("div",{className:"drawui-status-bar",children:[jsxRuntime.jsx("div",{className:"drawui-status-item",children:jsxRuntime.jsx("span",{children:jt[m]})}),jsxRuntime.jsx("div",{className:"drawui-status-item",children:jsxRuntime.jsx("span",{children:C===0?"\u672A\u9009\u62E9":`\u5DF2\u9009\u62E9 ${C} \u4E2A\u56FE\u5F62`})}),jsxRuntime.jsx("div",{className:"drawui-status-item",children:jsxRuntime.jsxs("span",{children:[d,"%"]})})]}),$&&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"})}),$]})]})}exports.CanvasBoard=Ft;exports.Toolbar=Ae;exports.ZoomControl=Be;

package/dist/index.d.cts

@@ -0,0 +1,31 @@
+import * as react from 'react';
+import { ToolType } from 'drawui-core';
+export { ToolType } from 'drawui-core';
+
+interface CanvasBoardProps {
+    initialTool?: ToolType;
+    className?: string;
+}
+declare function CanvasBoard({ initialTool, className }: CanvasBoardProps): react.JSX.Element;
+
+interface ToolbarProps {
+    activeTool: ToolType;
+    onToolChange: (tool: ToolType) => void;
+    showGrid: boolean;
+    onToggleGrid: () => void;
+    canUndo?: boolean;
+    canRedo?: boolean;
+    onUndo?: () => void;
+    onRedo?: () => void;
+}
+declare const Toolbar: react.NamedExoticComponent<ToolbarProps>;
+
+interface ZoomControlProps {
+    onZoomIn: () => void;
+    onZoomOut: () => void;
+    onReset: () => void;
+    zoomLevel?: number;
+}
+declare const ZoomControl: react.NamedExoticComponent<ZoomControlProps>;
+
+export { CanvasBoard, Toolbar, ZoomControl };

package/dist/index.d.ts

@@ -0,0 +1,31 @@
+import * as react from 'react';
+import { ToolType } from 'drawui-core';
+export { ToolType } from 'drawui-core';
+
+interface CanvasBoardProps {
+    initialTool?: ToolType;
+    className?: string;
+}
+declare function CanvasBoard({ initialTool, className }: CanvasBoardProps): react.JSX.Element;
+
+interface ToolbarProps {
+    activeTool: ToolType;
+    onToolChange: (tool: ToolType) => void;
+    showGrid: boolean;
+    onToggleGrid: () => void;
+    canUndo?: boolean;
+    canRedo?: boolean;
+    onUndo?: () => void;
+    onRedo?: () => void;
+}
+declare const Toolbar: react.NamedExoticComponent<ToolbarProps>;
+
+interface ZoomControlProps {
+    onZoomIn: () => void;
+    onZoomOut: () => void;
+    onReset: () => void;
+    zoomLevel?: number;
+}
+declare const ZoomControl: react.NamedExoticComponent<ZoomControlProps>;
+
+export { CanvasBoard, Toolbar, ZoomControl };

package/dist/index.js

@@ -0,0 +1 @@
+import {memo,useState,useRef,useEffect,useCallback,useLayoutEffect}from'react';import {UML_FONT_SIZE,UML_LINE_HEIGHT,UML_PADDING_Y,UML_PADDING_X,UML_HEADER_HEIGHT,Editor}from'drawui-core';import {jsx,jsxs,Fragment}from'react/jsx-runtime';var Ye=[{type:"rectangle",label:"\u77E9\u5F62",icon:jsx("rect",{x:"3",y:"5",width:"18",height:"14",rx:"0"})},{type:"rounded-rectangle",label:"\u5706\u89D2\u77E9\u5F62",icon:jsx("rect",{x:"3",y:"5",width:"18",height:"14",rx:"4"})},{type:"circle",label:"\u5706\u5F62",icon:jsx("circle",{cx:"12",cy:"12",r:"8"})},{type:"ellipse",label:"\u692D\u5706",icon:jsx("ellipse",{cx:"12",cy:"12",rx:"9",ry:"6"})},{type:"diamond",label:"\u83F1\u5F62",icon:jsx("path",{d:"M12 3L21 12L12 21L3 12Z"})},{type:"triangle",label:"\u4E09\u89D2\u5F62",icon:jsx("path",{d:"M12 4L20 19L4 19Z"})},{type:"hexagon",label:"\u516D\u8FB9\u5F62",icon:jsx("path",{d:"M12 3L20 7.5V16.5L12 21L4 16.5V7.5Z"})},{type:"parallelogram",label:"\u5E73\u884C\u56DB\u8FB9\u5F62",icon:jsx("path",{d:"M7 5L20 5L17 19L4 19Z"})},{type:"trapezoid",label:"\u68AF\u5F62",icon:jsx("path",{d:"M6 5L18 5L21 19L3 19Z"})},{type:"pentagon",label:"\u4E94\u8FB9\u5F62",icon:jsx("path",{d:"M12 3L21 10L17.5 21L6.5 21L3 10Z"})},{type:"octagon",label:"\u516B\u8FB9\u5F62",icon:jsx("path",{d:"M8 3L16 3L21 8L21 16L16 21L8 21L3 16L3 8Z"})},{type:"star",label:"\u661F\u5F62",icon:jsx("path",{d:"M12 2L14.5 8.5L21 9L16 13.5L17.5 20L12 16.5L6.5 20L8 13.5L3 9L9.5 8.5Z"})}],pt=new Set(Ye.map(r=>r.type)),ht=[{type:"arrow",icon:"M5 12h14M12 5l7 7-7 7",label:"\u7BAD\u5934"},{type:"text",icon:"M4 7V4h16v3M9 20h6M12 4v16",label:"\u6587\u672C"}],mt=[{type:"pen",icon:"M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3Z",label:"\u753B\u7B14"},{type:"highlighter",icon:"M14 3l7 7-3 3-7-7 3-3zM9 8L3 14v3h3l6-6",label:"\u8367\u5149\u7B14"}],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",Ae=memo(function({activeTool:e,onToolChange:o,showGrid:t,onToggleGrid:c,canUndo:p=false,canRedo:m=false,onUndo:y,onRedo:R}){let[x,C]=useState(false),a=useRef(null);return jsx("div",{className:"drawui-toolbar-container",children:jsxs("div",{className:"drawui-toolbar",children:[jsx("button",{className:`drawui-toolbar-button ${e==="select"?"active":""}`,onClick:()=>o("select"),title:"\u9009\u62E9 (V)",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:()=>o("hand"),title:"\u62D6\u62FD\u89C6\u53E3 (H)",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:()=>{a.current&&(clearTimeout(a.current),a.current=null),C(true);},onMouseLeave:()=>{a.current=window.setTimeout(()=>{C(false);},200);},children:[jsx("button",{className:`drawui-toolbar-button ${pt.has(e)?"active":""}`,onClick:()=>o("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"})})}),x&&jsx("div",{className:"drawui-toolbar-shape-grid",children:Ye.map(u=>jsx("button",{className:`drawui-toolbar-shape-item ${e===u.type?"active":""}`,onClick:()=>{o(u.type),C(false);},title:u.label,children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:u.icon})},u.type))})]}),jsx("div",{className:"drawui-toolbar-divider"}),ht.map(u=>jsx("button",{className:`drawui-toolbar-button ${e===u.type?"active":""}`,onClick:()=>o(u.type),title:u.label,children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("path",{d:u.icon})})},u.type)),jsx("div",{className:"drawui-toolbar-divider"}),mt.map(u=>jsx("button",{className:`drawui-toolbar-button ${e===u.type?"active":""}`,onClick:()=>o(u.type),title:u.label,children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("path",{d:u.icon})})},u.type)),jsx("button",{className:`drawui-toolbar-button ${e==="uml-class"?"active":""}`,onClick:()=>o("uml-class"),title:"UML \u7C7B\u56FE",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:()=>o("uml-interface"),title:"UML \u63A5\u53E3",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("div",{className:"drawui-toolbar-divider"}),jsx("button",{className:`drawui-toolbar-button ${t?"active":""}`,onClick:c,title:"\u7F51\u683C",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:y,disabled:!p,style:p?void 0:{opacity:.4,cursor:"default"},title:"\u64A4\u9500 (Ctrl+Z)",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:R,disabled:!m,style:m?void 0:{opacity:.4,cursor:"default"},title:"\u91CD\u505A (Ctrl+Shift+Z)",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"})]})})]})})});var Be=memo(function({onZoomIn:e,onZoomOut:o,onReset:t,zoomLevel:c=100}){return jsxs("div",{className:"drawui-zoom-control",children:[jsx("button",{className:"drawui-zoom-button",onClick:e,title:"\u653E\u5927",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:[c,"%"]}),jsx("button",{className:"drawui-zoom-button",onClick:o,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:t,title:"\u91CD\u7F6E",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 Ge=["#1f2937","#ef4444","#f97316","#facc15","#22c55e","#3b82f6","#8b5cf6","#ec4899","#9ca3af","#ffffff"],Xe=[{key:"stroke",label:"\u8FB9\u6846",hasTransparent:false},{key:"fill",label:"\u586B\u5145",hasTransparent:true},{key:"text",label:"\u6587\u5B57",hasTransparent:false},{key:"highlight",label:"\u9AD8\u4EAE",hasTransparent:true}],gt=[{type:"straight",label:"\u76F4\u7EBF",icon:"\u2501"},{type:"polyline",label:"\u6298\u7EBF",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",label:"\u76F4\u89D2\u6298\u7EBF",icon:"\u2517"},{type:"curve",label:"\u66F2\u7EBF",icon:"\u223F"}],vt=[{type:"none",label:"\u65E0\u7BAD\u5934",icon:"\u2501"},{type:"end",label:"\u7EC8\u70B9\u7BAD\u5934",icon:"\u2192"},{type:"start",label:"\u8D77\u70B9\u7BAD\u5934",icon:"\u2190"},{type:"both",label:"\u53CC\u7BAD\u5934",icon:"\u21C4"},{type:"inheritance",label:"\u7EE7\u627F",icon:"\u2501\u2501\u25B7"},{type:"composition",label:"\u7EC4\u5408",icon:"\u25C6\u2501\u2501"},{type:"aggregation",label:"\u805A\u5408",icon:"\u25C7\u2501\u2501"}],je=memo(function({editor:e,selectedCount:o,hasLineSelection:t,currentConnectionType:c,currentArrowHead:p,currentDashed:m}){if(!e||o===0)return null;let y=(a,b)=>{switch(a){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}},R=a=>{e.updateConnectionType(a);},x=a=>{e.updateArrowHeadType(a);},C=a=>{e.updateArrowDashed(a);};return jsxs("div",{className:"drawui-style-panel",children:[jsx("div",{className:"drawui-style-col",children:Xe.slice(0,2).map(a=>jsxs("div",{className:"drawui-style-group",children:[jsx("div",{className:"drawui-style-group-label",children:a.label}),jsxs("div",{className:"drawui-color-row",children:[a.hasTransparent&&jsx("button",{className:"drawui-color-swatch drawui-color-swatch-transparent",onClick:()=>y(a.key,"transparent"),title:"\u65E0"}),Ge.map(b=>jsx("button",{className:"drawui-color-swatch",style:{background:b},onClick:()=>y(a.key,b),title:b},`${a.key}-${b}`))]})]},a.key))}),jsx("div",{className:"drawui-style-divider"}),jsx("div",{className:"drawui-style-col",children:Xe.slice(2).map(a=>jsxs("div",{className:"drawui-style-group",children:[jsx("div",{className:"drawui-style-group-label",children:a.label}),jsxs("div",{className:"drawui-color-row",children:[a.hasTransparent&&jsx("button",{className:"drawui-color-swatch drawui-color-swatch-transparent",onClick:()=>y(a.key,"transparent"),title:"\u65E0"}),Ge.map(b=>jsx("button",{className:"drawui-color-swatch",style:{background:b},onClick:()=>y(a.key,b),title:b},`${a.key}-${b}`))]})]},a.key))}),t&&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:"\u8FDE\u7EBF"}),jsx("div",{className:"drawui-connection-row",children:gt.map(a=>jsxs("button",{className:`drawui-connection-btn${c===a.type?" active":""}`,onClick:()=>R(a.type),title:a.label,children:[jsx("span",{className:"drawui-connection-icon",children:a.icon}),jsx("span",{className:"drawui-connection-label",children:a.label})]},a.type))})]}),jsxs("div",{className:"drawui-style-group",children:[jsx("div",{className:"drawui-style-group-label",children:"\u7BAD\u5934"}),jsx("div",{className:"drawui-connection-row",children:vt.map(a=>jsxs("button",{className:`drawui-connection-btn${p===a.type?" active":""}`,onClick:()=>x(a.type),title:a.label,children:[jsx("span",{className:"drawui-connection-icon",children:a.icon}),jsx("span",{className:"drawui-connection-label",children:a.label})]},a.type))})]}),jsxs("div",{className:"drawui-style-group",children:[jsx("div",{className:"drawui-style-group-label",children:"\u865A\u7EBF"}),jsxs("div",{className:"drawui-connection-row",children:[jsxs("button",{className:`drawui-connection-btn${m?"":" active"}`,onClick:()=>C(false),title:"\u5B9E\u7EBF",children:[jsx("span",{className:"drawui-connection-icon",children:"\u2501"}),jsx("span",{className:"drawui-connection-label",children:"\u5B9E\u7EBF"})]}),jsxs("button",{className:`drawui-connection-btn${m?" active":""}`,onClick:()=>C(true),title:"\u865A\u7EBF",children:[jsx("span",{className:"drawui-connection-icon",children:"\u2504"}),jsx("span",{className:"drawui-connection-label",children:"\u865A\u7EBF"})]})]})]})]})]})]})});var $e=14,Ke=20,Mt=["#1f2937","#ef4444","#f97316","#facc15","#22c55e","#3b82f6","#8b5cf6","#ec4899","#9ca3af"],Nt=[12,14,16,18,20,24];function Je(r,e,o){let t=r,c=o,p=t.charAt(0);if(t.length>1&&(p==="+"||p==="-"||p==="#"||p==="~")&&t.charAt(1)===" "&&(c=p,t=t.slice(2)),t=t.replace(/^\s+|\s+$/g,""),e==="attribute"){let a=t.indexOf(":");return a===-1?{visibility:c,name:t,type:"",params:"",returnType:""}:{visibility:c,name:t.slice(0,a).replace(/^\s+|\s+$/g,""),type:t.slice(a+1).replace(/^\s+|\s+$/g,""),params:"",returnType:""}}let m=t.indexOf("(");if(m===-1){let a=t.lastIndexOf(":");return a===-1?{visibility:c,name:t,type:"",params:"",returnType:""}:{visibility:c,name:t.slice(0,a).replace(/^\s+|\s+$/g,""),type:"",params:"",returnType:t.slice(a+1).replace(/^\s+|\s+$/g,"")}}let y=t.slice(0,m).replace(/^\s+|\s+$/g,""),R=t.indexOf(")",m);if(R===-1)return {visibility:c,name:y,type:"",params:t.slice(m+1).replace(/^\s+|\s+$/g,""),returnType:""};let x=t.slice(m+1,R).replace(/^\s+|\s+$/g,""),C=t.slice(R+1).replace(/^\s+|\s+$/g,"");return C.startsWith(":")&&(C=C.slice(1).replace(/^\s+|\s+$/g,"")),{visibility:c,name:y,type:"",params:x,returnType:C}}function Rt(r,e){let o=`${e.visibility} `;return r==="attribute"?`${o}${e.name}: ${e.type??""}`:`${o}${e.name}(${e.params??""}): ${e.returnType??""}`}var et=memo(function({editor:e,umlClass:o,editing:t}){let[,c]=useState(0);useEffect(()=>{if(!e)return;let n=e.subscribe(()=>c(f=>f+1));return ()=>{n();}},[e]);let[p,m]=useState(null),[y,R]=useState(false),x=useRef(null),C=useRef(null),a=useCallback((n,f)=>{x.current&&(clearTimeout(x.current),x.current=null),m({section:n,rowId:f}),R(false);},[]),b=useCallback(()=>{x.current&&clearTimeout(x.current),x.current=window.setTimeout(()=>{m(null),R(false);},150);},[]);if(!e||!o||t!==o.id)return null;let U=e.getCamera(),{id:u,x:D,y:z,width:de,height:ue,className:fe,methods:d}=o,g=o.type==="uml-interface",s=g?[]:o.attributes,E=de/2,$=ue/2,W=UML_HEADER_HEIGHT,Z=UML_LINE_HEIGHT,ie=UML_PADDING_X,ae=UML_PADDING_Y,pe=g?0:s.length>0?s.length*Z+ae*2:ae*2,l=U.zoom,se=(de-ie*2)*l,j=4*l,le=U.pageToScreen({x:D-E+ie,y:z}),Y=U.pageToScreen({x:D,y:z-$+W/2}),ee=n=>U.pageToScreen({x:D,y:n}).y,_=Z*l,ne=n=>z+(-$+W+ae+Z/2+n*Z),v=n=>z+(-$+W+pe+ae+Z/2+n*Z),k=z+(-$+W+pe),F=z+$,G={background:"#ffffff",borderWidth:1,borderStyle:"solid",borderColor:"transparent",outline:"none",padding:0,fontFamily:"sans-serif",boxSizing:"border-box"},V=(n,f)=>{let h=s.find(L=>L.id===n);if(!h)return;let w=Je(f,"attribute",h.visibility);e.updateUmlClass(u,{attributes:s.map(L=>L.id===n?{...L,...w}:L)});},Ne=(n,f)=>{let h=d.find(I=>I.id===n);if(!h)return;let w=Je(f,"method",h.visibility),L=d.map(I=>I.id===n?{...I,...w}:I);g?e.updateUmlInterface(u,{methods:L}):e.updateUmlClass(u,{methods:L});},Re=(n,f,h)=>{C.current={section:n,from:f},h.dataTransfer.effectAllowed="move",h.dataTransfer.setData("text/plain",`${n}:${f}`);},Ee=n=>{n.preventDefault(),n.dataTransfer.dropEffect="move";},Ie=(n,f,h)=>{h.preventDefault();let w=C.current;!w||w.section!==n||(n==="attribute"?e.reorderUmlAttribute(u,w.from,f):e.reorderUmlMethod(u,w.from,f),C.current=null);},be=(n,f,h,w)=>{let L=ee(w),I=p?.section===n&&p.rowId===h.id,ve=(h.fontSize||UML_FONT_SIZE)*l,q=h.textColor||"#1f2937",K={position:"absolute",left:le.x-$e*l-j,top:L-_/2,width:$e*l+j+se+Ke*l,height:_,display:"flex",alignItems:"center",gap:2,pointerEvents:"none",zIndex:53},we={...G,width:se,height:_-2,fontSize:ve,color:q,textDecoration:h.strikethrough?"line-through":"none",pointerEvents:"auto",...I?{borderColor:"#3b82f6"}:{}},Pe={width:$e*l,height:_-2,cursor:"grab",color:"#9ca3af",display:"flex",alignItems:"center",justifyContent:"center",userSelect:"none",fontSize:12*l,lineHeight:1,opacity:I?1:.55,pointerEvents:"auto"},xe={width:Ke*l,height:_-6,border:"none",background:"transparent",color:"#9ca3af",cursor:"pointer",borderRadius:3,fontSize:14*l,opacity:I?1:.35,pointerEvents:"auto"};return jsxs("div",{style:K,onDragOver:Ee,onDrop:J=>Ie(n,f,J),children:[jsx("span",{style:Pe,draggable:true,onDragStart:J=>Re(n,f,J),title:"\u62D6\u62FD\u6392\u5E8F",children:"\u22EE\u22EE"}),jsx("input",{style:we,value:Rt(n,h),onChange:J=>n==="attribute"?V(h.id,J.target.value):Ne(h.id,J.target.value),onFocus:()=>a(n,h.id),onBlur:b,spellCheck:false}),jsx("button",{style:xe,onMouseDown:J=>J.preventDefault(),onClick:()=>{n==="attribute"?e.removeUmlAttribute(u,h.id):e.removeUmlMethod(u,h.id);},title:"\u5220\u9664\u8BE5\u884C",children:"\xD7"})]},h.id)},ge=(n,f,h)=>{let w=ee(f),L=n==="attribute";return jsxs("button",{onMouseDown:I=>I.preventDefault(),onClick:()=>L?e.addUmlAttribute(u):e.addUmlMethod(u),className:"drawui-uml-add-row",style:{position:"absolute",left:le.x,top:w-9*l,height:18*l,padding:`0 ${6*l}px`,fontSize:11*l,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:h,children:[jsx("span",{style:{fontSize:13*l,lineHeight:1},children:"+"}),jsx("span",{children:h})]},`add-${n}`)},He=()=>{if(!p||p.section==="className")return null;let n=p.section,f=p.rowId,h=n==="attribute"?s:d,w=h.find(H=>H.id===f);if(!w)return null;let L=h.findIndex(H=>H.id===f),I=n==="attribute"?ne(L):v(L);ee(I);let q=224*l,K=30*l,we=U.pageToScreen({x:D,y:z}).x,Pe=U.pageToScreen({x:D,y:z-$}).y,xe=20*l,J=Pe-K-xe,at=we-q/2,st=J+K,Ve=w.textColor||"#1f2937",lt=w.fontSize||UML_FONT_SIZE,Ue=!!w.strikethrough;return jsxs(Fragment,{children:[jsx("div",{style:{position:"absolute",left:we-.5,top:st,width:1,height:xe,background:"#d1d5db",pointerEvents:"none",zIndex:59}}),jsxs("div",{className:"drawui-uml-toolbar",style:{position:"absolute",left:at,top:J,width:q,height:K,background:"#ffffff",border:"1px solid #e5e7eb",borderRadius:6,boxShadow:"0 4px 12px rgba(0, 0, 0, 0.1)",display:"flex",alignItems:"center",gap:4*l,padding:`0 ${6*l}px`,pointerEvents:"auto",zIndex:60,fontSize:12*l},onMouseDown:H=>H.preventDefault(),children:[jsxs("div",{style:{position:"relative"},children:[jsxs("button",{onClick:()=>R(H=>!H),className:"drawui-uml-toolbar-btn",title:"\u6587\u5B57\u989C\u8272",style:{border:"none",background:"transparent",cursor:"pointer",padding:2,display:"flex",alignItems:"center",borderRadius:3},children:[jsx("span",{style:{fontWeight:700,color:Ve,fontSize:13*l,textDecoration:Ue?"line-through":"none"},children:"A"}),jsx("span",{style:{width:10*l,height:2*l,background:Ve,marginLeft:3,borderRadius:1}})]}),y&&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(u,n,w.id,{textColor:null}),R(false);},style:{width:14,height:14,border:"1px solid #e5e7eb",background:"transparent",cursor:"pointer",borderRadius:2},title:"\u9ED8\u8BA4\u989C\u8272"}),Mt.map(H=>jsx("button",{onClick:()=>{e.updateUmlRowStyle(u,n,w.id,{textColor:H}),R(false);},style:{width:14,height:14,border:"none",background:H,cursor:"pointer",borderRadius:2},title:H},H))]})]}),jsx("select",{value:lt,onChange:H=>e.updateUmlRowStyle(u,n,w.id,{fontSize:Number(H.target.value)}),style:{border:"1px solid #e5e7eb",borderRadius:3,padding:`0 ${2*l}px`,fontSize:12*l,height:20*l,background:"#ffffff"},title:"\u5B57\u53F7",children:Nt.map(H=>jsx("option",{value:H,children:H},H))}),jsx("button",{onClick:()=>e.updateUmlRowStyle(u,n,w.id,{strikethrough:!Ue}),className:"drawui-uml-toolbar-btn",title:"\u5220\u9664\u7EBF",style:{border:"none",background:Ue?"#e0e7ff":"transparent",cursor:"pointer",padding:2,borderRadius:3},children:jsx("span",{style:{fontWeight:700,fontSize:13*l,textDecoration:"line-through"},children:"A"})}),jsx("button",{onClick:()=>{n==="attribute"?e.removeUmlAttribute(u,w.id):e.removeUmlMethod(u,w.id),m(null);},className:"drawui-uml-toolbar-btn",title:"\u5220\u9664\u8BE5\u884C",style:{border:"none",background:"transparent",cursor:"pointer",color:"#ef4444",padding:2,marginLeft:"auto",borderRadius:3},children:jsxs("svg",{width:14*l,height:14*l,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"})]})})]})]})},T=U.pageToScreen({x:D-E,y:z}).x,X=U.pageToScreen({x:D,y:z-$}).y,oe=de*l,ce=ue*l;return jsxs("div",{style:{position:"absolute",inset:0,pointerEvents:"none",zIndex:50},children:[jsx("div",{style:{position:"absolute",left:T+1,top:X+1,width:Math.max(0,oe-2),height:Math.max(0,ce-2),background:"#ffffff",pointerEvents:"none",zIndex:51}}),jsx("input",{style:{...G,position:"absolute",left:Y.x-se/2,top:Y.y-W*l/2+2,width:se,height:W*l-4,textAlign:"center",fontWeight:700,fontSize:(o.fontSize||UML_FONT_SIZE)*l,color:o.textColor||"#1f2937",pointerEvents:"auto",zIndex:52,...p?.section==="className"?{borderColor:"#3b82f6"}:{}},value:fe,onChange:n=>g?e.updateUmlInterface(u,{className:n.target.value}):e.updateUmlClass(u,{className:n.target.value}),onFocus:()=>a("className",""),onBlur:b,spellCheck:false}),!g&&jsxs(Fragment,{children:[s.map((n,f)=>be("attribute",f,n,ne(f))),ge("attribute",k,"\u5C5E\u6027")]}),d.map((n,f)=>be("method",f,n,v(f))),ge("method",F,"\u65B9\u6CD5"),He()]})});var We=220,Ze=140,Ht="#fafafa",Pt="#cbd5e1",Ut="#3b82f6",At="rgba(59, 130, 246, 0.18)",Bt="rgba(59, 130, 246, 0.85)";function Dt(r,e){let o=Math.min(r.x,e.x),t=Math.min(r.y,e.y),c=Math.max(r.x+r.width,e.x+e.width),p=Math.max(r.y+r.height,e.y+e.height);return {x:o,y:t,width:c-o,height:p-t}}function zt(r){return {x:r.x+r.width/2,y:r.y+r.height/2}}function $t(){return {x:0,y:0,width:0,height:0}}function Wt(r){let e=1/0,o=1/0,t=-1/0,c=-1/0,p=false;for(let m of r){let y=_e(m);y&&(p=true,y.x<e&&(e=y.x),y.y<o&&(o=y.y),y.x+y.width>t&&(t=y.x+y.width),y.y+y.height>c&&(c=y.y+y.height));}return p?{x:e,y:o,width:t-e,height:c-o}:null}function _e(r){switch(r.type){case "rectangle":case "rounded-rectangle":case "ellipse":case "diamond":case "triangle":case "hexagon":case "text":return {x:r.x-r.width/2,y:r.y-r.height/2,width:r.width,height:r.height};case "circle":return {x:r.x-r.radius,y:r.y-r.radius,width:r.radius*2,height:r.radius*2};case "line":case "arrow":case "draw":{let e=r.points;if(!e||e.length===0)return null;let o=1/0,t=1/0,c=-1/0,p=-1/0;for(let m of e)m.x<o&&(o=m.x),m.y<t&&(t=m.y),m.x>c&&(c=m.x),m.y>p&&(p=m.y);return {x:o,y:t,width:c-o,height:p-t}}default:return null}}function Zt(r){let e=r.getCamera(),o=e.screenToPage({x:0,y:0}),t=e.screenToPage({x:window.innerWidth,y:window.innerHeight});return {x:o.x,y:o.y,width:t.x-o.x,height:t.y-o.y}}function Ot(r,e,o){if(r.width<=0||r.height<=0)return {x:r.x-e/2,y:r.y-o/2,width:e,height:o};let t=e/o,c=r.width,p=c/t;p<r.height&&(p=r.height,c=p*t);let m=zt(r);return {x:m.x-c/2,y:m.y-p/2,width:c,height:p}}function Oe(r,e,o,t){let c=(r-o.left)/o.width,p=(e-o.top)/o.height;return {x:t.x+c*t.width,y:t.y+p*t.height}}var ot=memo(function({editor:e}){let o=useRef(null),t=useRef(null),[c,p]=useState(false),[m,y]=useState(100),[R,x]=useState(false),[C,a]=useState(false),b=useRef(null),U=useRef(null);useLayoutEffect(()=>{let d=o.current,g=t.current;if(!d||!g)return;let s=window.devicePixelRatio||1;d.width=Math.round(We*s),d.height=Math.round(Ze*s),d.style.width=`${We}px`,d.style.height=`${Ze}px`;},[c]);let u=useCallback(()=>{let d=o.current,g=t.current;if(!d||!g||!e)return;let s=d.getContext("2d");if(!s)return;let E=We,$=Ze,W=d.width,Z=d.height,ie=e.getShapes(),ae=new Set(e.getSelectedIds()),pe=Wt(ie),l=Zt(e),se=pe?Dt(pe,l):l.width>0?l:$t(),j=Ot(se,E,$);U.current=j;let le=W/j.width,Y=Z/j.height,ee=E/j.width;s.setTransform(1,0,0,1,0,0),s.fillStyle=Ht,s.fillRect(0,0,W,Z),s.setTransform(le,0,0,Y,-le*j.x,-Y*j.y),s.fillStyle=Pt;for(let v of ie){let k=_e(v);k&&s.fillRect(k.x,k.y,k.width,k.height);}s.fillStyle=Ut;for(let v of ie){if(!ae.has(v.id))continue;let k=_e(v);k&&s.fillRect(k.x,k.y,k.width,k.height);}s.fillStyle=At,s.fillRect(l.x,l.y,l.width,l.height);let _=1.5/ee;s.strokeStyle=Bt,s.lineWidth=_,s.lineJoin="round";let ne=Math.min(l.width/6,l.height/6,6/ee);if(s.beginPath(),ne*ee<1)s.rect(l.x,l.y,l.width,l.height);else {let v=l.x,k=l.y,F=l.width,G=l.height,V=Math.min(ne,F/2,G/2);s.moveTo(v+V,k),s.lineTo(v+F-V,k),s.quadraticCurveTo(v+F,k,v+F,k+V),s.lineTo(v+F,k+G-V),s.quadraticCurveTo(v+F,k+G,v+F-V,k+G),s.lineTo(v+V,k+G),s.quadraticCurveTo(v,k+G,v,k+G-V),s.lineTo(v,k+V),s.quadraticCurveTo(v,k,v+V,k),s.closePath();}s.stroke(),s.setTransform(1,0,0,1,0,0);},[e]);useEffect(()=>{if(!e||c)return;u();let d=e.subscribe(u),g=()=>u();return window.addEventListener("resize",g),()=>{d(),window.removeEventListener("resize",g);}},[e,c,u]),useEffect(()=>{if(!e)return;let d=()=>{let s=e.getCamera().getZoom();y(Math.round(s*100));};d();let g=e.subscribe(d);return ()=>{g();}},[e]);let D=useCallback((d,g)=>{if(!e)return;let s=e.getCamera(),E=s.getZoom(),$=window.innerWidth/2,W=window.innerHeight/2,Z=s;Z.x=$-d*E,Z.y=W-g*E,e.requestRender();},[e]),z=d=>{if(!e||!t.current||d.button!==0)return;let g=t.current.getBoundingClientRect(),s=U.current;if(!s)return;let E=Oe(d.clientX,d.clientY,g,s);b.current={pointerId:d.pointerId,rect:{left:g.left,top:g.top,width:g.width,height:g.height},canvasBox:s},d.currentTarget.setPointerCapture(d.pointerId),a(true),D(E.x,E.y);},de=d=>{if(!C||!e||!b.current||!t.current)return;let g=b.current,s=Oe(d.clientX,d.clientY,g.rect,g.canvasBox);D(s.x,s.y);},ue=d=>{if(C){a(false),b.current=null;try{d.currentTarget.releasePointerCapture(d.pointerId);}catch{}}};return jsxs("div",{className:`drawui-minimap ${c?"collapsed":""}`,children:[jsx("button",{className:"drawui-minimap-toggle",onClick:()=>p(d=>!d),title:c?"\u5C55\u5F00\u5C0F\u5730\u56FE":"\u6536\u8D77\u5C0F\u5730\u56FE","aria-label":c?"\u5C55\u5F00\u5C0F\u5730\u56FE":"\u6536\u8D77\u5C0F\u5730\u56FE",children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:c?jsx("polyline",{points:"9 6 15 12 9 18"}):jsx("polyline",{points:"15 6 9 12 15 18"})})}),!c&&jsxs("div",{className:"drawui-minimap-panel",children:[jsxs("div",{className:"drawui-minimap-header",children:[jsx("span",{className:"drawui-minimap-title",children:"\u5C0F\u5730\u56FE"}),jsxs("span",{className:"drawui-minimap-zoom",children:[m,"%"]})]}),jsx("div",{ref:t,className:"drawui-minimap-canvas-wrap",style:{cursor:C?"grabbing":R?"pointer":"default"},onPointerEnter:()=>x(true),onPointerLeave:()=>x(false),children:jsx("canvas",{ref:o,className:"drawui-minimap-canvas",onPointerDown:z,onPointerMove:de,onPointerUp:ue,onPointerCancel:ue,onDoubleClick:d=>{if(!e||!t.current)return;let g=U.current;if(!g)return;let s=t.current.getBoundingClientRect(),E=Oe(d.clientX,d.clientY,s,g);D(E.x,E.y);}})})]})]})});var O=r=>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:r}),Yt=[{type:"rectangle",label:"\u77E9\u5F62",glyph:O(jsx("rect",{x:"4",y:"7",width:"16",height:"10",rx:"1"}))},{type:"rounded-rectangle",label:"\u5706\u89D2",glyph:O(jsx("rect",{x:"4",y:"7",width:"16",height:"10",rx:"4"}))},{type:"circle",label:"\u5706\u5F62",glyph:O(jsx("circle",{cx:"12",cy:"12",r:"5.5"}))},{type:"ellipse",label:"\u692D\u5706",glyph:O(jsx("ellipse",{cx:"12",cy:"12",rx:"7",ry:"4.5"}))},{type:"diamond",label:"\u83F1\u5F62",glyph:O(jsx("path",{d:"M12 5 L19 12 L12 19 L5 12 Z"}))},{type:"triangle",label:"\u4E09\u89D2",glyph:O(jsx("path",{d:"M12 4 L20 19 H4 Z"}))},{type:"hexagon",label:"\u516D\u8FB9\u5F62",glyph:O(jsx("path",{d:"M12 3 L19.5 7.5 V16.5 L12 21 L4.5 16.5 V7.5 Z"}))},{type:"parallelogram",label:"\u5E73\u884C",glyph:O(jsx("path",{d:"M6 7 L19 7 L16 17 H7 Z"}))},{type:"trapezoid",label:"\u68AF\u5F62",glyph:O(jsx("path",{d:"M7 6 H17 L20 18 H4 Z"}))},{type:"pentagon",label:"\u4E94\u8FB9\u5F62",glyph:O(jsx("path",{d:"M12 4 L19.5 9.5 L16.5 18.5 H7.5 L4.5 9.5 Z"}))},{type:"octagon",label:"\u516B\u8FB9\u5F62",glyph:O(jsx("path",{d:"M8 4 H16 L20 8 V16 L16 20 H8 L4 16 V8 Z"}))},{type:"star",label:"\u661F\u5F62",glyph:O(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",label:"\u7C7B\u56FE",glyph:O(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",label:"\u63A5\u53E3",glyph:O(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"})]}))}];function it({editor:r,x:e,y:o,context:t,existingArrowId:c,defaultShapeType:p,onClose:m}){let y=useRef(null),R=x=>{r?.createGeneratedConnection(t,{type:x,existingArrowId:c}),m();};return useEffect(()=>{let x=b=>{y.current&&!y.current.contains(b.target)&&m();},C=b=>{b.key==="Escape"&&(b.preventDefault(),m());},a=setTimeout(()=>{window.addEventListener("pointerdown",x,true),window.addEventListener("keydown",C,true);},0);return ()=>{clearTimeout(a),window.removeEventListener("pointerdown",x,true),window.removeEventListener("keydown",C,true);}},[m]),jsxs("div",{className:"drawui-gen-menu",ref:y,style:{left:e,top:o},children:[jsx("div",{className:"drawui-gen-menu-label",children:"\u9009\u62E9\u65B0\u56FE\u5F62"}),jsx("div",{className:"drawui-gen-shape-grid",children:Yt.map(x=>jsxs("button",{className:`drawui-gen-shape-btn${x.type===p?" drawui-gen-shape-active":""}`,onClick:()=>R(x.type),title:x.label,children:[x.glyph,jsx("span",{className:"drawui-gen-shape-label",children:x.label})]},x.type))}),jsx("div",{className:"drawui-gen-menu-hint",children:"\u70B9\u51FB\u7A7A\u767D\u5904\u53D6\u6D88"})]})}var jt={select:"\u9009\u62E9\u5DE5\u5177",hand:"\u62D6\u62FD\u89C6\u53E3",rectangle:"\u77E9\u5F62","rounded-rectangle":"\u5706\u89D2\u77E9\u5F62",circle:"\u5706\u5F62",ellipse:"\u692D\u5706",diamond:"\u83F1\u5F62",triangle:"\u4E09\u89D2\u5F62",hexagon:"\u516D\u8FB9\u5F62",parallelogram:"\u5E73\u884C\u56DB\u8FB9\u5F62",trapezoid:"\u68AF\u5F62",pentagon:"\u4E94\u8FB9\u5F62",octagon:"\u516B\u8FB9\u5F62",star:"\u661F\u5F62","uml-class":"UML \u7C7B\u56FE","uml-interface":"UML \u63A5\u53E3",line:"\u76F4\u7EBF",arrow:"\u7EBF\u6761",text:"\u6587\u672C",draw:"\u753B\u7B14",pen:"\u753B\u7B14",highlighter:"\u8367\u5149\u7B14"};function Ft({initialTool:r="select",className:e=""}){let o=useRef(null),t=useRef(null),[c,p]=useState(null),[m,y]=useState(r),[R,x]=useState(false),[C,a]=useState(0),[b,U]=useState(false),[u,D]=useState("straight"),[z,de]=useState("end"),[ue,fe]=useState(false),[d,g]=useState(100),[s,E]=useState(null),[$,W]=useState(null),[Z,ie]=useState(false),[ae,pe]=useState(false),[l,se]=useState(null),[j,le]=useState(null),[Y,ee]=useState(null),_=useRef(null),ne=useRef(0),v=useRef(null);useEffect(()=>{if(!o.current)return;let T=new Editor(o.current);t.current=T,p(T),window.__drawuiEditor=T,r&&T.setActiveTool(r);let X=T.subscribe(()=>{y(T.getActiveTool());let n=T.getSelectedIds();a(n.length);let h=T.getShapes().filter(L=>n.includes(L.id)&&(L.type==="line"||L.type==="arrow"));if(U(h.length>0),h.length>0&&h[0].connectionType?D(h[0].connectionType):h.length>0&&D("straight"),h.length>0){let L=h.find(I=>I.type==="arrow");L&&(de(L.arrowHead??"end"),fe(L.dashed??false));}g(Math.round(T.getCamera().getZoom()*100)),ie(T.canUndo()),pe(T.canRedo());let w=T.getSelectedUml();se(w),w||le(null);}),oe=T.subscribeNotifications(n=>{W(n),_.current&&clearTimeout(_.current),_.current=setTimeout(()=>W(null),2e3);}),ce=T.subscribeUi(n=>{n.kind==="shapeTypeMenu"&&ee({x:n.screenX,y:n.screenY,context:n.context,existingArrowId:n.existingArrowId,defaultShapeType:n.defaultShapeType});});return ()=>{X(),oe(),ce(),_.current&&clearTimeout(_.current),cancelAnimationFrame(ne.current),T.dispose();}},[r]);let k=useCallback(T=>{t.current?.setActiveTool(T);},[]),F=useCallback(()=>{t.current?.zoomIn();},[]),G=useCallback(()=>{t.current?.zoomOut();},[]),V=useCallback(()=>{t.current?.resetZoom();},[]),Ne=useCallback(()=>{let T=!R;x(T),t.current?.setShowGrid(T);},[R]),Re=useCallback(()=>{t.current?.undo();},[]),Ee=useCallback(()=>{t.current?.redo();},[]),Ie=useCallback(T=>{let X=t.current,oe=o.current;if(!X||!oe)return;if(X.isPointerDown()){v.current!==null&&(v.current=null,E(null));return}let ce=T.clientX,n=T.clientY;cancelAnimationFrame(ne.current),ne.current=requestAnimationFrame(()=>{let f=oe.getBoundingClientRect(),h=ce-f.left,w=n-f.top,L=h+12,I=w+12,ve=X.getSelectedUml()?.id,q=X.getUmlRowAtScreenPoint({x:h,y:w});if(q&&q.shape.id!==ve&&q.text){v.current!==q.text&&(v.current=q.text,E({text:q.text,x:L,y:I}));return}let K=X.getShapeAtScreenPoint({x:h,y:w});K&&K.text?v.current!==K.text&&(v.current=K.text,E({text:K.text,x:L,y:I})):v.current!==null&&(v.current=null,E(null));});},[]),be=useCallback(()=>{E(null);},[]),ge=useCallback(T=>{let X=t.current,oe=o.current;if(!X||!oe)return;let ce=oe.getBoundingClientRect(),n=X.getUmlRowAtScreenPoint({x:T.clientX-ce.left,y:T.clientY-ce.top});le(n?n.shape.id:null);},[]),He=useCallback(()=>{ee(null);},[]);return jsxs("div",{className:`drawui-canvas-board ${e}`,children:[jsx("canvas",{ref:o,className:"drawui-canvas",onMouseMove:Ie,onMouseLeave:be,onDoubleClick:ge}),s&&jsx("div",{className:"drawui-tooltip",style:{left:s.x,top:s.y},children:s.text}),jsx(Ae,{activeTool:m,onToolChange:k,showGrid:R,onToggleGrid:Ne,canUndo:Z,canRedo:ae,onUndo:Re,onRedo:Ee}),jsx(Be,{onZoomIn:F,onZoomOut:G,onReset:V,zoomLevel:d}),jsx(je,{editor:c,selectedCount:C,hasLineSelection:b,currentConnectionType:u,currentArrowHead:z,currentDashed:ue}),jsx(et,{editor:c,umlClass:l,editing:j}),jsx(ot,{editor:c}),Y&&jsx(it,{editor:c,x:Y.x,y:Y.y,context:Y.context,existingArrowId:Y.existingArrowId,defaultShapeType:Y.defaultShapeType,onClose:He}),jsxs("div",{className:"drawui-status-bar",children:[jsx("div",{className:"drawui-status-item",children:jsx("span",{children:jt[m]})}),jsx("div",{className:"drawui-status-item",children:jsx("span",{children:C===0?"\u672A\u9009\u62E9":`\u5DF2\u9009\u62E9 ${C} \u4E2A\u56FE\u5F62`})}),jsx("div",{className:"drawui-status-item",children:jsxs("span",{children:[d,"%"]})})]}),$&&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"})}),$]})]})}export{Ft as CanvasBoard,Ae as Toolbar,Be as ZoomControl};

package/dist/styles.css

@@ -0,0 +1,657 @@
+:root {
+  --dw-primary: #3b82f6;
+  --dw-primary-hover: #2563eb;
+  --dw-primary-weak: #eff6ff;
+  --dw-primary-contrast: #ffffff;
+  --dw-canvas-bg: #fafafa;
+  --dw-panel-bg: rgba(255, 255, 255, 0.97);
+  --dw-panel-bg-solid: #ffffff;
+  --dw-panel-bg-deep: rgba(255, 255, 255, 0.99);
+  --dw-panel-border: rgba(0, 0, 0, 0.06);
+  --dw-hover-bg: rgba(0, 0, 0, 0.04);
+  --dw-border-strong: #e5e7eb;
+  --dw-dash: #d1d5db;
+  --dw-inset-border: rgba(0, 0, 0, 0.04);
+  --dw-text: #4b5563;
+  --dw-text-strong: #1f2937;
+  --dw-text-ink: #374151;
+  --dw-text-muted: #6b7280;
+  --dw-text-faint: #9ca3af;
+  --dw-success: #10b981;
+  --dw-success-strong: #22c55e;
+  --dw-danger: #ef4444;
+  --dw-swatch-border: rgba(0, 0, 0, 0.1);
+  --dw-swatch-border-hover: rgba(0, 0, 0, 0.25);
+  --dw-tooltip-bg: rgba(31, 41, 55, 0.95);
+  --dw-tooltip-text: #f9fafb;
+  --dw-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.06);
+  --dw-shadow-md: 0 6px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
+  --dw-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
+  --dw-shadow-xl: 0 6px 24px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05);
+  --dw-shadow-tooltip: 0 4px 16px rgba(0, 0, 0, 0.15);
+  --dw-shadow-primary: 0 2px 8px rgba(59, 130, 246, 0.3);
+  --dw-shadow-toggle: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
+  --dw-shadow-toast: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
+}
+[data-theme='dark'] {
+  --dw-primary: #60a5fa;
+  --dw-primary-hover: #93c5fd;
+  --dw-primary-weak: rgba(96, 165, 250, 0.16);
+  --dw-primary-contrast: #0f172a;
+  --dw-canvas-bg: #0f172a;
+  --dw-panel-bg: rgba(30, 41, 59, 0.92);
+  --dw-panel-bg-solid: #1e293b;
+  --dw-panel-bg-deep: rgba(30, 41, 59, 0.98);
+  --dw-panel-border: rgba(255, 255, 255, 0.08);
+  --dw-hover-bg: rgba(255, 255, 255, 0.06);
+  --dw-border-strong: #334155;
+  --dw-dash: #475569;
+  --dw-inset-border: rgba(255, 255, 255, 0.08);
+  --dw-text: #cbd5e1;
+  --dw-text-strong: #f1f5f9;
+  --dw-text-ink: #e2e8f0;
+  --dw-text-muted: #94a3b8;
+  --dw-text-faint: #64748b;
+  --dw-success: #34d399;
+  --dw-success-strong: #4ade80;
+  --dw-danger: #f87171;
+  --dw-swatch-border: rgba(255, 255, 255, 0.18);
+  --dw-swatch-border-hover: rgba(255, 255, 255, 0.4);
+  --dw-tooltip-bg: rgba(226, 232, 240, 0.95);
+  --dw-tooltip-text: #0f172a;
+  --dw-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.4);
+  --dw-shadow-md: 0 6px 24px rgba(0, 0, 0, 0.42), 0 2px 6px rgba(0, 0, 0, 0.24);
+  --dw-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
+  --dw-shadow-xl: 0 6px 24px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.25);
+  --dw-shadow-tooltip: 0 4px 16px rgba(0, 0, 0, 0.5);
+  --dw-shadow-primary: 0 2px 8px rgba(96, 165, 250, 0.35);
+  --dw-shadow-toggle: 0 4px 16px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.24);
+  --dw-shadow-toast: 0 4px 20px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.24);
+}
+.drawui-canvas-board {
+  position: fixed;
+  inset: 0;
+  overflow: hidden;
+  background-color: var(--dw-canvas-bg);
+}
+.drawui-canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+  cursor: default;
+}
+.drawui-toolbar {
+  position: fixed;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px;
+  background: var(--dw-panel-bg);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-radius: 14px;
+  box-shadow: var(--dw-shadow-md);
+  border: 1px solid var(--dw-panel-border);
+  z-index: 100;
+}
+.drawui-toolbar-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  border: none;
+  background: transparent;
+  border-radius: 10px;
+  color: var(--dw-text);
+  cursor: pointer;
+  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.drawui-toolbar-button:hover {
+  background: var(--dw-hover-bg);
+  color: var(--dw-text-strong);
+}
+.drawui-toolbar-button.active {
+  background: var(--dw-primary);
+  color: var(--dw-primary-contrast);
+  box-shadow: var(--dw-shadow-primary);
+}
+.drawui-toolbar-button.active:hover {
+  background: var(--dw-primary-hover);
+}
+.drawui-toolbar-button svg {
+  width: 19px;
+  height: 19px;
+}
+.drawui-toolbar-button path {
+  transition: stroke-dashoffset 0.2s ease;
+}
+.drawui-toolbar-divider {
+  width: 1px;
+  height: 22px;
+  background: var(--dw-border-strong);
+  margin: 0 4px;
+}
+.drawui-toolbar-container {
+  position: fixed;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 100;
+}
+.drawui-toolbar-dropdown {
+  position: relative;
+}
+.drawui-toolbar-shape-grid {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 2px;
+  padding: 6px;
+  background: var(--dw-panel-bg);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-radius: 14px;
+  box-shadow: var(--dw-shadow-lg);
+  border: 1px solid var(--dw-panel-border);
+  background: var(--dw-panel-bg-deep);
+  animation: dropdownFadeIn 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+}
+@keyframes dropdownFadeIn {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+.drawui-toolbar-shape-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border: none;
+  background: transparent;
+  border-radius: 8px;
+  color: var(--dw-text);
+  cursor: pointer;
+  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.drawui-toolbar-shape-item:hover {
+  background: var(--dw-hover-bg);
+  color: var(--dw-text-strong);
+}
+.drawui-toolbar-shape-item.active {
+  background: var(--dw-primary-weak);
+  color: var(--dw-primary);
+}
+.drawui-toolbar-shape-item svg {
+  width: 20px;
+  height: 20px;
+}
+.drawui-zoom-control {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 6px;
+  background: var(--dw-panel-bg);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-radius: 14px;
+  box-shadow: var(--dw-shadow-md);
+  border: 1px solid var(--dw-panel-border);
+  z-index: 100;
+}
+.drawui-zoom-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border: none;
+  background: transparent;
+  border-radius: 10px;
+  color: var(--dw-text);
+  cursor: pointer;
+  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.drawui-zoom-button:hover {
+  background: var(--dw-hover-bg);
+  color: var(--dw-text-strong);
+}
+.drawui-zoom-button svg {
+  width: 17px;
+  height: 17px;
+}
+.drawui-zoom-level {
+  font-size: 12px;
+  color: var(--dw-text-muted);
+  padding: 4px 8px;
+}
+.drawui-status-bar {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 8px 16px;
+  background: var(--dw-panel-bg);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-radius: 10px;
+  box-shadow: var(--dw-shadow-sm);
+  border: 1px solid var(--dw-panel-border);
+  font-size: 12px;
+  color: var(--dw-text-muted);
+  z-index: 100;
+}
+.drawui-status-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.drawui-status-item::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--dw-success);
+}
+.drawui-tooltip {
+  position: absolute;
+  max-width: 280px;
+  padding: 8px 12px;
+  background: var(--dw-tooltip-bg);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  color: var(--dw-tooltip-text);
+  font-size: 13px;
+  line-height: 1.4;
+  border-radius: 8px;
+  box-shadow: var(--dw-shadow-tooltip);
+  z-index: 2000;
+  pointer-events: none;
+  white-space: pre-wrap;
+  word-break: break-word;
+  animation: tooltipFadeIn 0.12s cubic-bezier(0.4, 0, 0.2, 1);
+}
+@keyframes tooltipFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.drawui-toast {
+  position: absolute;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 8px 18px;
+  background: var(--dw-panel-bg);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-radius: 20px;
+  box-shadow: var(--dw-shadow-toast);
+  border: 1px solid var(--dw-panel-border);
+  background: var(--dw-panel-bg-deep);
+  color: var(--dw-text-strong);
+  font-size: 13px;
+  font-weight: 500;
+  z-index: 2000;
+  pointer-events: none;
+  animation: drawui-toast-in 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.drawui-toast-icon {
+  color: var(--dw-success-strong);
+  flex-shrink: 0;
+}
+@keyframes drawui-toast-in {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-6px) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0) scale(1);
+  }
+}
+.drawui-style-panel {
+  position: fixed;
+  bottom: 60px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: stretch;
+  gap: 0;
+  padding: 10px 16px;
+  background: var(--dw-panel-bg);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-radius: 12px;
+  box-shadow: var(--dw-shadow-xl);
+  border: 1px solid var(--dw-panel-border);
+  z-index: 100;
+  animation: drawui-style-panel-in 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+@keyframes drawui-style-panel-in {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(8px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0) scale(1);
+  }
+}
+.drawui-style-col {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 0 12px;
+}
+.drawui-style-col:first-child {
+  padding-left: 0;
+}
+.drawui-style-col:last-child {
+  padding-right: 0;
+}
+.drawui-style-divider {
+  width: 1px;
+  align-self: stretch;
+  background-image: repeating-linear-gradient(to bottom, var(--dw-dash) 0, var(--dw-dash) 4px, transparent 4px, transparent 8px);
+}
+.drawui-style-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.drawui-style-group-label {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--dw-text-muted);
+  line-height: 1;
+}
+.drawui-color-row {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+}
+.drawui-color-swatch {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 1.5px solid var(--dw-swatch-border);
+  cursor: pointer;
+  padding: 0;
+  transition: all 0.12s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.drawui-color-swatch:hover {
+  transform: scale(1.18);
+  border-color: var(--dw-swatch-border-hover);
+}
+.drawui-color-swatch-transparent {
+  position: relative;
+  background: #fff linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%) 0 0 / 6px 6px;
+}
+.drawui-color-swatch-transparent::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 2px;
+  right: 2px;
+  height: 1.5px;
+  background: var(--dw-danger);
+  transform: rotate(-45deg);
+}
+.drawui-connection-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.drawui-connection-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1px;
+  padding: 3px 6px;
+  border: 1px solid var(--dw-border-strong);
+  background: var(--dw-panel-bg-solid);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.12s cubic-bezier(0.4, 0, 0.2, 1);
+  min-width: 32px;
+}
+.drawui-connection-btn:hover {
+  border-color: var(--dw-primary);
+  background: var(--dw-primary-weak);
+}
+.drawui-connection-btn.active {
+  border-color: var(--dw-primary);
+  background: var(--dw-primary);
+  color: var(--dw-primary-contrast);
+}
+.drawui-connection-btn.active .drawui-connection-icon,
+.drawui-connection-btn.active .drawui-connection-label {
+  color: var(--dw-primary-contrast);
+}
+.drawui-connection-icon {
+  font-size: 14px;
+  line-height: 1;
+  color: var(--dw-text-ink);
+}
+.drawui-connection-label {
+  font-size: 9px;
+  font-weight: 500;
+  color: var(--dw-text-muted);
+  line-height: 1;
+}
+.drawui-minimap {
+  position: fixed;
+  bottom: 20px;
+  left: 20px;
+  display: flex;
+  align-items: stretch;
+  gap: 6px;
+  z-index: 100;
+  user-select: none;
+  animation: drawui-minimap-in 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+@keyframes drawui-minimap-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.drawui-minimap-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: var(--dw-panel-bg);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-radius: 10px;
+  box-shadow: var(--dw-shadow-toggle);
+  border: 1px solid var(--dw-panel-border);
+  color: var(--dw-text-muted);
+  cursor: pointer;
+  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  flex-shrink: 0;
+  align-self: flex-end;
+}
+.drawui-minimap-toggle:hover {
+  background: var(--dw-panel-bg-solid);
+  color: var(--dw-text-strong);
+}
+.drawui-minimap-toggle svg {
+  width: 16px;
+  height: 16px;
+}
+.drawui-minimap-panel {
+  display: flex;
+  flex-direction: column;
+  background: var(--dw-panel-bg);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-radius: 12px;
+  box-shadow: var(--dw-shadow-md);
+  border: 1px solid var(--dw-panel-border);
+  padding: 8px;
+  gap: 6px;
+  overflow: hidden;
+}
+.drawui-minimap-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 4px;
+}
+.drawui-minimap-title {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--dw-text-muted);
+  letter-spacing: 0.04em;
+}
+.drawui-minimap-zoom {
+  font-size: 10px;
+  font-variant-numeric: tabular-nums;
+  color: var(--dw-text-faint);
+  letter-spacing: 0.04em;
+}
+.drawui-minimap-canvas-wrap {
+  position: relative;
+  border-radius: 8px;
+  overflow: hidden;
+  width: 220px;
+  height: 140px;
+  background: var(--dw-canvas-bg);
+  box-shadow: inset 0 0 0 1px var(--dw-inset-border);
+}
+.drawui-minimap-canvas {
+  display: block;
+  width: 220px;
+  height: 140px;
+  touch-action: none;
+}
+.drawui-uml-add-row:hover {
+  background: var(--dw-primary-weak);
+  color: var(--dw-primary);
+  border-color: var(--dw-primary);
+}
+.drawui-uml-toolbar-btn:hover {
+  background: var(--dw-hover-bg);
+}
+.drawui-gen-menu {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 8px;
+  background: var(--dw-panel-bg);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-radius: 12px;
+  box-shadow: var(--dw-shadow-xl);
+  border: 1px solid var(--dw-panel-border);
+  z-index: 500;
+  user-select: none;
+  animation: drawui-gen-menu-in 0.18s cubic-bezier(0.4, 0, 0.2, 1);
+  transform: translate(8px, 8px);
+  min-width: 140px;
+}
+@keyframes drawui-gen-menu-in {
+  from {
+    opacity: 0;
+    transform: translate(8px, 8px) scale(0.94);
+  }
+  to {
+    opacity: 1;
+    transform: translate(8px, 8px) scale(1);
+  }
+}
+.drawui-gen-menu-label {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--dw-text-muted);
+  padding: 0 2px;
+}
+.drawui-gen-shape-grid {
+  display: grid;
+  grid-template-columns: repeat(5, auto);
+  gap: 4px;
+}
+.drawui-gen-shape-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  width: 44px;
+  padding: 5px 2px 4px;
+  border: 1px solid var(--dw-border-strong);
+  background: var(--dw-panel-bg-solid);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.12s cubic-bezier(0.4, 0, 0.2, 1);
+  color: var(--dw-text-ink);
+}
+.drawui-gen-shape-btn:hover {
+  border-color: var(--dw-primary);
+  background: var(--dw-primary-weak);
+  color: var(--dw-primary-hover);
+}
+.drawui-gen-shape-btn:active {
+  transform: scale(0.96);
+}
+.drawui-gen-shape-btn.drawui-gen-shape-active {
+  border-color: var(--dw-primary);
+  background: var(--dw-primary-weak);
+  color: var(--dw-primary-hover);
+}
+.drawui-gen-shape-glyph {
+  display: block;
+}
+.drawui-gen-shape-label {
+  font-size: 10px;
+  line-height: 1;
+  color: var(--dw-text-muted);
+  white-space: nowrap;
+}
+.drawui-gen-shape-btn:hover .drawui-gen-shape-label,
+.drawui-gen-shape-btn.drawui-gen-shape-active .drawui-gen-shape-label {
+  color: var(--dw-primary-hover);
+}
+.drawui-gen-menu-hint {
+  font-size: 10px;
+  color: var(--dw-text-faint);
+  padding: 0 2px;
+}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "drawui-react",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "React wrapper for drawui-core canvas drawing",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "scripts": {
+    "build": "tsup && lessc src/styles.less dist/styles.css",
+    "prepublishOnly": "pnpm build",
+    "typecheck": "tsc --noEmit",
+    "dev": "tsup --watch"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "drawui-core": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "less": "^4.9.0",
+    "react": "^18.3.1",
+    "tsup": "^8.4.0",
+    "typescript": "^5.6.3"
+  }
+}