drawui-react 0.3.0 → 0.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +72 -1
- package/dist/index.cjs +1 -1
- package/dist/index.d.cts +6 -1
- package/dist/index.d.ts +6 -1
- package/dist/index.js +1 -1
- package/dist/styles.css +130 -5
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
# drawui-react
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
**简体中文** | [English](#english)
|
|
4
|
+
|
|
5
|
+
基于 [drawui-core](https://www.npmjs.com/package/drawui-core) 的 React 封装,提供开箱即用的画布组件。
|
|
4
6
|
|
|
5
7
|
## 安装
|
|
6
8
|
|
|
@@ -51,6 +53,75 @@ export function App() {
|
|
|
51
53
|
- `react` / `react-dom` ^18.3(peerDependencies)
|
|
52
54
|
- `drawui-core`(自动安装)
|
|
53
55
|
|
|
56
|
+
## 使用 drawui 的项目
|
|
57
|
+
|
|
58
|
+
- **[myBookEditor](https://github.com/weishell/myBookEditor)** — 基于 [Slate.js](https://github.com/ianstormtaylor/slate) 的富文本 / 文档编辑器,已接入 drawui 画板:可在文档中直接插入并编辑画板,用于绘制图示、UML 类图、思维导图等,并随文档一起导出 / 下载。
|
|
59
|
+
|
|
60
|
+
## License
|
|
61
|
+
|
|
62
|
+
MIT
|
|
63
|
+
|
|
64
|
+
---
|
|
65
|
+
|
|
66
|
+
# English
|
|
67
|
+
|
|
68
|
+
[简体中文](#drawui-react) | **English**
|
|
69
|
+
|
|
70
|
+
React wrapper for [drawui-core](https://www.npmjs.com/package/drawui-core), with drop-in canvas components.
|
|
71
|
+
|
|
72
|
+
## Install
|
|
73
|
+
|
|
74
|
+
```bash
|
|
75
|
+
npm install drawui-react # installs drawui-core automatically
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
## Usage
|
|
79
|
+
|
|
80
|
+
```tsx
|
|
81
|
+
import { CanvasBoard } from 'drawui-react'
|
|
82
|
+
import 'drawui-react/styles.css'
|
|
83
|
+
import type { Editor, EditorData } from 'drawui-core'
|
|
84
|
+
|
|
85
|
+
export function App() {
|
|
86
|
+
return (
|
|
87
|
+
<CanvasBoard
|
|
88
|
+
themeColor="#3b82f6"
|
|
89
|
+
language="en-US"
|
|
90
|
+
onChange={(data: EditorData) => console.log(data.shapes.length)}
|
|
91
|
+
onReady={(editor: Editor) => editor.setShapes([])}
|
|
92
|
+
/>
|
|
93
|
+
)
|
|
94
|
+
}
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
> The stylesheet must be imported separately: `import 'drawui-react/styles.css'`
|
|
98
|
+
|
|
99
|
+
## `<CanvasBoard>` props
|
|
100
|
+
|
|
101
|
+
| Prop | Type | Description |
|
|
102
|
+
| --- | --- | --- |
|
|
103
|
+
| `initialTool` | `ToolType` | Initial tool, defaults to `'select'` |
|
|
104
|
+
| `themeColor` | `string` | Theme accent (selection / handles / highlights), defaults to `#3b82f6` |
|
|
105
|
+
| `language` | `'zh-CN' \| 'en-US'` | UI language, defaults to `'zh-CN'` |
|
|
106
|
+
| `data` | `Shape[]` | Initial shapes; when provided, localStorage is not read or written |
|
|
107
|
+
| `onChange` | `(data: EditorData) => void` | Called when shapes / camera change |
|
|
108
|
+
| `onReady` | `(editor: Editor) => void` | Called once the editor is ready (full `Editor` access) |
|
|
109
|
+
|
|
110
|
+
## Exported components
|
|
111
|
+
|
|
112
|
+
- `CanvasBoard` — the main board (toolbar / zoom / style panel / mind-map panel, …)
|
|
113
|
+
- `Toolbar` — the toolbar
|
|
114
|
+
- `ZoomControl` — the zoom control
|
|
115
|
+
|
|
116
|
+
## Dependencies
|
|
117
|
+
|
|
118
|
+
- `react` / `react-dom` ^18.3 (peerDependencies)
|
|
119
|
+
- `drawui-core` (installed automatically)
|
|
120
|
+
|
|
121
|
+
## Projects using drawui
|
|
122
|
+
|
|
123
|
+
- **[myBookEditor](https://github.com/weishell/myBookEditor)** — a rich-text / document editor built on [Slate.js](https://github.com/ianstormtaylor/slate). It embeds drawui boards: insert and edit a board right inside a document to draw diagrams, UML class diagrams and mind maps, and export / download them along with the document.
|
|
124
|
+
|
|
54
125
|
## License
|
|
55
126
|
|
|
56
127
|
MIT
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
'use strict';var react=require('react'),drawuiCore=require('drawui-core'),jsxRuntime=require('react/jsx-runtime');function X(){let[a,e]=react.useState(drawuiCore.getLanguage());return react.useEffect(()=>drawuiCore.subscribeLanguage(()=>e(drawuiCore.getLanguage())),[]),a}var Lt=[{type:"rectangle",icon:jsxRuntime.jsx("rect",{x:"3",y:"5",width:"18",height:"14",rx:"0"})},{type:"rounded-rectangle",icon:jsxRuntime.jsx("rect",{x:"3",y:"5",width:"18",height:"14",rx:"4"})},{type:"circle",icon:jsxRuntime.jsx("circle",{cx:"12",cy:"12",r:"8"})},{type:"ellipse",icon:jsxRuntime.jsx("ellipse",{cx:"12",cy:"12",rx:"9",ry:"6"})},{type:"diamond",icon:jsxRuntime.jsx("path",{d:"M12 3L21 12L12 21L3 12Z"})},{type:"triangle",icon:jsxRuntime.jsx("path",{d:"M12 4L20 19L4 19Z"})},{type:"hexagon",icon:jsxRuntime.jsx("path",{d:"M12 3L20 7.5V16.5L12 21L4 16.5V7.5Z"})},{type:"parallelogram",icon:jsxRuntime.jsx("path",{d:"M7 5L20 5L17 19L4 19Z"})},{type:"trapezoid",icon:jsxRuntime.jsx("path",{d:"M6 5L18 5L21 19L3 19Z"})},{type:"pentagon",icon:jsxRuntime.jsx("path",{d:"M12 3L21 10L17.5 21L6.5 21L3 10Z"})},{type:"octagon",icon:jsxRuntime.jsx("path",{d:"M8 3L16 3L21 8L21 16L16 21L8 21L3 16L3 8Z"})},{type:"star",icon:jsxRuntime.jsx("path",{d:"M12 2L14.5 8.5L21 9L16 13.5L17.5 20L12 16.5L6.5 20L8 13.5L3 9L9.5 8.5Z"})}],Jt=new Set(Lt.map(a=>a.type)),Qt=[{type:"arrow",icon:"M5 12h14M12 5l7 7-7 7",labelKey:"toolbar.arrow"},{type:"text",icon:"M4 7V4h16v3M9 20h6M12 4v16",labelKey:"toolbar.text"}],en=[{type:"pen",icon:"M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3Z",labelKey:"toolbar.pen"},{type:"highlighter",icon:"M14 3l7 7-3 3-7-7 3-3zM9 8L3 14v3h3l6-6",labelKey:"toolbar.highlighter"}],tn=[{type:"eraser",icon:"M7 21l-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21M22 21H7M5 11l9 9",labelKey:"toolbar.eraser"}],nn="M18 11V6.5a1.5 1.5 0 0 0-3 0v3.5a1.5 1.5 0 0 0-3 0V3.5a1.5 1.5 0 0 0-3 0v6.5a1.5 1.5 0 0 0-3 0V14a8 8 0 0 0 16 0v-3a1.5 1.5 0 0 0-3 0",it=react.memo(function({activeTool:e,onToolChange:n,showGrid:i,onToggleGrid:u,canUndo:p=false,canRedo:y=false,onUndo:l,onRedo:C,onExport:f}){let[c,v]=react.useState(false),[B,I]=react.useState(false),b=react.useRef(null),z=react.useRef(null);X();let k=[{format:"png",labelKey:"toolbar.export.png"},{format:"svg",labelKey:"toolbar.export.svg"},{format:"pdf",labelKey:"toolbar.export.pdf"}],D=()=>{b.current&&(clearTimeout(b.current),b.current=null),I(true);},P=()=>{b.current=window.setTimeout(()=>I(false),200);},ue=()=>{z.current&&(clearTimeout(z.current),z.current=null),v(true);},o=()=>{z.current=window.setTimeout(()=>{v(false);},200);};return jsxRuntime.jsx("div",{className:"drawui-toolbar-container",children:jsxRuntime.jsxs("div",{className:"drawui-toolbar",children:[jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${e==="select"?"active":""}`,onClick:()=>n("select"),"data-drawui-tip":drawuiCore.t("toolbar.select"),children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("circle",{cx:"12",cy:"12",r:"3"})})}),jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${e==="hand"?"active":""}`,onClick:()=>n("hand"),"data-drawui-tip":drawuiCore.t("toolbar.hand"),children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("path",{d:nn})})}),jsxRuntime.jsx("div",{className:"drawui-toolbar-divider"}),jsxRuntime.jsxs("div",{className:"drawui-toolbar-dropdown",onMouseEnter:ue,onMouseLeave:o,children:[jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${Jt.has(e)?"active":""}`,onClick:()=>n("rounded-rectangle"),"data-drawui-tip":drawuiCore.t("toolbar.shapes"),children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("rect",{x:"3",y:"5",width:"18",height:"14",rx:"4",ry:"4"})})}),c&&jsxRuntime.jsx("div",{className:"drawui-toolbar-shape-grid",children:Lt.map(s=>jsxRuntime.jsx("button",{className:`drawui-toolbar-shape-item ${e===s.type?"active":""}`,onClick:()=>{n(s.type),v(false);},"data-drawui-tip":drawuiCore.t("tool."+s.type),children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:s.icon})},s.type))})]}),jsxRuntime.jsx("div",{className:"drawui-toolbar-divider"}),Qt.map(s=>jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${e===s.type?"active":""}`,onClick:()=>n(s.type),"data-drawui-tip":drawuiCore.t(s.labelKey),children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("path",{d:s.icon})})},s.type)),jsxRuntime.jsx("div",{className:"drawui-toolbar-divider"}),en.map(s=>jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${e===s.type?"active":""}`,onClick:()=>n(s.type),"data-drawui-tip":drawuiCore.t(s.labelKey),children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("path",{d:s.icon})})},s.type)),jsxRuntime.jsx("div",{className:"drawui-toolbar-divider"}),tn.map(s=>jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${e===s.type?"active":""}`,onClick:()=>n(s.type),"data-drawui-tip":drawuiCore.t(s.labelKey),children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("path",{d:s.icon})})},s.type)),jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${e==="uml-class"?"active":""}`,onClick:()=>n("uml-class"),"data-drawui-tip":drawuiCore.t("toolbar.uml-class"),children:jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("rect",{x:"3",y:"3",width:"18",height:"18",rx:"2"}),jsxRuntime.jsx("line",{x1:"3",y1:"9",x2:"21",y2:"9"}),jsxRuntime.jsx("line",{x1:"3",y1:"15",x2:"21",y2:"15"}),jsxRuntime.jsx("line",{x1:"7",y1:"6",x2:"17",y2:"6"}),jsxRuntime.jsx("line",{x1:"7",y1:"12",x2:"13",y2:"12"}),jsxRuntime.jsx("line",{x1:"7",y1:"18",x2:"11",y2:"18"})]})}),jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${e==="uml-interface"?"active":""}`,onClick:()=>n("uml-interface"),"data-drawui-tip":drawuiCore.t("toolbar.uml-interface"),children:jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("rect",{x:"3",y:"3",width:"18",height:"18",rx:"2"}),jsxRuntime.jsx("line",{x1:"3",y1:"9",x2:"21",y2:"9"}),jsxRuntime.jsx("line",{x1:"7",y1:"6",x2:"17",y2:"6"}),jsxRuntime.jsx("line",{x1:"7",y1:"12",x2:"13",y2:"12"})]})}),jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${e==="mind-map"?"active":""}`,onClick:()=>n("mind-map"),"data-drawui-tip":drawuiCore.t("toolbar.mind-map"),children:jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("circle",{cx:"5",cy:"12",r:"2.4"}),jsxRuntime.jsx("path",{d:"M7.4 12h3.6"}),jsxRuntime.jsx("path",{d:"M11 12c0-2.6 1.6-4.4 3.4-4.4"}),jsxRuntime.jsx("path",{d:"M11 12c0 2.6 1.6 4.4 3.4 4.4"}),jsxRuntime.jsx("circle",{cx:"17.4",cy:"7.6",r:"1.7"}),jsxRuntime.jsx("circle",{cx:"17.4",cy:"16.4",r:"1.7"}),jsxRuntime.jsx("circle",{cx:"15.6",cy:"12",r:"1.7"})]})}),jsxRuntime.jsx("div",{className:"drawui-toolbar-divider"}),jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${i?"active":""}`,onClick:u,"data-drawui-tip":drawuiCore.t("toolbar.grid"),children:jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("rect",{x:"3",y:"3",width:"7",height:"7",rx:"1"}),jsxRuntime.jsx("rect",{x:"14",y:"3",width:"7",height:"7",rx:"1"}),jsxRuntime.jsx("rect",{x:"14",y:"14",width:"7",height:"7",rx:"1"}),jsxRuntime.jsx("rect",{x:"3",y:"14",width:"7",height:"7",rx:"1"})]})}),jsxRuntime.jsx("div",{className:"drawui-toolbar-divider"}),jsxRuntime.jsx("button",{className:"drawui-toolbar-button",onClick:l,disabled:!p,style:p?void 0:{opacity:.4,cursor:"default"},"data-drawui-tip":drawuiCore.t("toolbar.undo"),children:jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("path",{d:"M3 7v6h6"}),jsxRuntime.jsx("path",{d:"M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"})]})}),jsxRuntime.jsx("button",{className:"drawui-toolbar-button",onClick:C,disabled:!y,style:y?void 0:{opacity:.4,cursor:"default"},"data-drawui-tip":drawuiCore.t("toolbar.redo"),children:jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("path",{d:"M21 7v6h-6"}),jsxRuntime.jsx("path",{d:"M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3L21 13"})]})}),jsxRuntime.jsx("div",{className:"drawui-toolbar-divider"}),jsxRuntime.jsxs("div",{className:"drawui-toolbar-dropdown",onMouseEnter:D,onMouseLeave:P,children:[jsxRuntime.jsx("button",{className:"drawui-toolbar-button","data-drawui-tip":drawuiCore.t("toolbar.export"),children:jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("path",{d:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"}),jsxRuntime.jsx("polyline",{points:"7 10 12 15 17 10"}),jsxRuntime.jsx("line",{x1:"12",y1:"15",x2:"12",y2:"3"})]})}),B&&jsxRuntime.jsx("div",{className:"drawui-toolbar-shape-grid drawui-toolbar-export-grid",children:k.map(s=>jsxRuntime.jsx("button",{className:"drawui-toolbar-shape-item drawui-toolbar-export-item",onClick:()=>{f?.(s.format),I(false);},"data-drawui-tip":drawuiCore.t(s.labelKey),children:drawuiCore.t(s.labelKey)},s.format))})]})]})})});var lt=react.memo(function({onZoomIn:e,onZoomOut:n,onReset:i,zoomLevel:u=100}){return X(),jsxRuntime.jsxs("div",{className:"drawui-zoom-control",children:[jsxRuntime.jsx("button",{className:"drawui-zoom-button",onClick:e,"data-drawui-tip":drawuiCore.t("zoom.in"),children:jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("line",{x1:"12",y1:"5",x2:"12",y2:"19"}),jsxRuntime.jsx("line",{x1:"5",y1:"12",x2:"19",y2:"12"})]})}),jsxRuntime.jsxs("div",{className:"drawui-zoom-level",children:[u,"%"]}),jsxRuntime.jsx("button",{className:"drawui-zoom-button",onClick:n,"data-drawui-tip":drawuiCore.t("zoom.out"),children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("line",{x1:"12",y1:"5",x2:"12",y2:"19"})})}),jsxRuntime.jsx("button",{className:"drawui-zoom-button",onClick:i,"data-drawui-tip":drawuiCore.t("zoom.reset"),children:jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("path",{d:"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"}),jsxRuntime.jsx("path",{d:"M3 3v5h5"})]})})]})});var cn=["#ffffff","#f1f5f9","#ede9fe","#dbeafe","#dcfce7","#fef3c7","#fee2e2"],dn=["#0f172a","#475569","#94a3b8","#8b5cf6","#3b82f6","#16a34a","#d97706","#dc2626"],un=[...cn,...dn],Et=15,Rt="drawui:customColors";function pn(){if(typeof window>"u")return [];try{let a=window.localStorage.getItem(Rt);if(!a)return [];let e=JSON.parse(a);return Array.isArray(e)?e.filter(n=>typeof n=="string").slice(-Et):[]}catch{return []}}function hn(a){if(!(typeof window>"u"))try{window.localStorage.setItem(Rt,JSON.stringify(a));}catch{}}var Tt=[{key:"fill",labelKey:"style.fill",hasTransparent:true,hasOpacity:true},{key:"stroke",labelKey:"style.stroke",hasTransparent:false,hasOpacity:true},{key:"text",labelKey:"style.text",hasTransparent:false},{key:"highlight",labelKey:"style.highlight",hasTransparent:true,hasOpacity:true}],Nt=(a,e)=>!!a&&!!e&&a.toLowerCase()===e.toLowerCase(),yn=[{type:"straight",labelKey:"style.connection.straight",icon:"\u2501"},{type:"polyline",labelKey:"style.connection.polyline",icon:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",width:"16",height:"16",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("path",{d:"M4 8 C 12 8, 12 16, 20 16"})})},{type:"orthogonal",labelKey:"style.connection.orthogonal",icon:"\u2517"},{type:"curve",labelKey:"style.connection.curve",icon:"\u223F"}],fn=[{type:"none",labelKey:"style.arrowhead.none",icon:"\u2501"},{type:"end",labelKey:"style.arrowhead.end",icon:"\u2192"},{type:"start",labelKey:"style.arrowhead.start",icon:"\u2190"},{type:"both",labelKey:"style.arrowhead.both",icon:"\u21C4"},{type:"inheritance",labelKey:"style.arrowhead.inheritance",icon:"\u2501\u2501\u25B7"},{type:"composition",labelKey:"style.arrowhead.composition",icon:"\u25C6\u2501\u2501"},{type:"aggregation",labelKey:"style.arrowhead.aggregation",icon:"\u25C7\u2501\u2501"}],_e=10,Re=12,Te=a=>!a||a==="transparent",It=react.memo(function({editor:e,selectedCount:n,hasLineSelection:i,currentConnectionType:u,currentArrowHead:p,currentDashed:y}){X();let l=!!e?.getEditingShapeId(),[C,f]=react.useState(null),[c,v]=react.useState(null),[,B]=react.useState(0),I=react.useRef(null),b=react.useRef(null),z=react.useRef(null),[k,D]=react.useState({tw:168,th:42,pw:228,ph:160}),[P,ue]=react.useState(pn),o=react.useRef(null),s=react.useCallback(t=>{let g=t.trim().toLowerCase();/^#[0-9a-f]{6}$/.test(g)&&ue(Y=>{let R=Y.filter(H=>H!==g);for(R.push(g);R.length>Et;)R.shift();return hn(R),R});},[]);if(react.useEffect(()=>{let t=o.current;if(!t)return;let g=()=>{t.value&&s(t.value);};return t.addEventListener("change",g),()=>t.removeEventListener("change",g)},[s,c]),react.useEffect(()=>{if(!e)return;let t=e.subscribe(()=>B(g=>(g+1)%1e6));return ()=>{t();}},[e]),react.useEffect(()=>{v(null);},[n,l]),react.useEffect(()=>{if(!c)return;let t=g=>{I.current&&!I.current.contains(g.target)&&v(null);};return document.addEventListener("pointerdown",t,true),()=>document.removeEventListener("pointerdown",t,true)},[c]),react.useLayoutEffect(()=>{let t=b.current?.offsetWidth??k.tw,g=b.current?.offsetHeight??k.th,Y=z.current?.offsetWidth??k.pw,R=z.current?.offsetHeight??k.ph;D(H=>H.tw===t&&H.th===g&&H.pw===Y&&H.ph===R?H:{tw:t,th:g,pw:Y,ph:R});}),!e||n===0||l)return null;let d=e.getSelectedIds(),Z=e.getShapes().filter(t=>d.includes(t.id)),A=Z[0],V=A?.id??"",se=A?.style.fillColor,_=A?.style.strokeColor??"#1f2937",ee=A?.textColor??"#1f2937",m=A?.highlightColor,le={fill:se,stroke:_,text:ee,highlight:m},Ne={fill:A?.style.fillOpacity??1,stroke:A?.style.strokeOpacity??1,highlight:A?.highlightOpacity??1},Se=t=>C&&C.key===`${V}:${t}`?C.value:Ne[t]??1,pe=(t,g)=>{switch(t){case "stroke":e.updateSelectedShapesStyle({strokeColor:g});break;case "fill":e.updateSelectedShapesStyle({fillColor:g});break;case "text":e.updateSelectedShapesText({textColor:g});break;case "highlight":e.updateSelectedShapesText({highlightColor:g});break}},K=(t,g)=>{f({key:`${V}:${t}`,value:g}),t==="highlight"?e.updateSelectedShapesText({highlightOpacity:g}):t==="stroke"?e.updateSelectedShapesStyle({strokeOpacity:g}):e.updateSelectedShapesStyle({fillOpacity:g});},he=t=>e.updateConnectionType(t),ce=t=>e.updateArrowHeadType(t),Ce=t=>e.updateArrowDashed(t),ye=!!i&&Z.length>0&&Z.every(t=>t.type==="line"||t.type==="arrow"),fe=Z.length>0&&Z.every(t=>t.type==="text"),me=ye?Tt.filter(t=>t.key==="stroke"):Tt,Me=t=>t.key==="stroke"&&ye?"style.line":t.labelKey,w=c&&c!=="more"?me.find(t=>t.key===c):void 0,x=!!c&&(c==="more"||c==="prefix"||!!w),oe=e.getCamera(),O=drawuiCore.getContentBounds(Z,0),G=oe.pageToScreen({x:O.x,y:O.y}),ie=oe.pageToScreen({x:O.x+O.width,y:O.y+O.height}),ze=window.innerWidth,Be=window.innerHeight,Ae=ie.y+_e,Oe=G.y-_e,Ue=k.th+(x?_e+k.ph:0),h=Ae+Ue<=Be-Re,N=Oe-Ue>=Re,L=h||!N,E=(G.x+ie.x)/2,$=(t,g,Y)=>Math.max(g,Math.min(t,Math.max(g,Y))),F=$(E-k.tw/2,Re,ze-k.tw-Re),ge=L?Ae:Oe-k.th,Ke=$(E-k.pw/2,Re,ze-k.pw-Re),Ee=x?$(L?ge+k.th+_e:ge-_e-k.ph,Re,Be-k.ph-Re):0;return jsxRuntime.jsxs("div",{className:"drawui-style-floating",ref:I,children:[jsxRuntime.jsxs("div",{className:"drawui-style-toolbar",ref:b,style:{left:F,top:ge},children:[me.map(t=>jsxRuntime.jsxs("button",{className:`drawui-style-tool-btn${c===t.key?" active":""}`,onClick:()=>v(c===t.key?null:t.key),"data-drawui-tip":drawuiCore.t(Me(t)),type:"button",children:[t.key==="fill"&&jsxRuntime.jsx("span",{className:`drawui-st-swatch${Te(se)?" drawui-st-none":""}`,style:Te(se)?void 0:{background:se}}),t.key==="stroke"&&(ye?jsxRuntime.jsx("span",{className:`drawui-st-line${Te(_)?" drawui-st-line-none":""}`,style:Te(_)?void 0:{background:_}}):jsxRuntime.jsx("span",{className:`drawui-st-frame${Te(_)?" drawui-st-frame-none":""}`,style:Te(_)?void 0:{borderColor:_}})),t.key==="text"&&jsxRuntime.jsx("span",{className:"drawui-st-text",style:{color:ee},children:"A"}),t.key==="highlight"&&jsxRuntime.jsx("span",{className:`drawui-st-hl${Te(m)?" drawui-st-none":""}`,style:Te(m)?void 0:{background:m},children:"A"})]},t.key)),i&&jsxRuntime.jsx("button",{className:`drawui-style-tool-btn${c==="more"?" active":""}`,onClick:()=>v(c==="more"?null:"more"),"data-drawui-tip":drawuiCore.t("style.connection"),type:"button",children:"\u22EF"}),fe&&jsxRuntime.jsx("button",{className:`drawui-style-tool-btn${c==="prefix"?" active":""}`,onClick:()=>v(c==="prefix"?null:"prefix"),"data-drawui-tip":drawuiCore.t("style.prefix"),type:"button",children:jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",width:"18",height:"18",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",children:[jsxRuntime.jsx("circle",{cx:"5",cy:"8",r:"1.7",fill:"currentColor",stroke:"none"}),jsxRuntime.jsx("circle",{cx:"5",cy:"16",r:"1.7",fill:"currentColor",stroke:"none"}),jsxRuntime.jsx("line",{x1:"10.5",y1:"8",x2:"20",y2:"8"}),jsxRuntime.jsx("line",{x1:"10.5",y1:"16",x2:"20",y2:"16"})]})})]}),x&&jsxRuntime.jsx("div",{className:"drawui-style-popover",ref:z,style:{left:Ke,top:Ee},children:c==="prefix"?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:"drawui-style-popover-title",children:drawuiCore.t("style.prefix")}),jsxRuntime.jsx("div",{className:"drawui-muted-hint",children:drawuiCore.t("style.prefix.soon")})]}):w?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:"drawui-style-popover-title",children:drawuiCore.t(Me(w))}),jsxRuntime.jsxs("div",{className:"drawui-color-row",children:[w.hasTransparent&&jsxRuntime.jsx("button",{className:`drawui-color-swatch drawui-color-swatch-transparent${Te(le[w.key])?" active":""}`,onClick:()=>pe(w.key,"transparent"),"aria-label":drawuiCore.t("style.none"),type:"button"}),un.map(t=>jsxRuntime.jsx("button",{className:`drawui-color-swatch${Nt(t,le[w.key])?" active":""}`,style:{background:t},onClick:()=>pe(w.key,t),"aria-label":t,type:"button"},t)),P.map(t=>jsxRuntime.jsx("button",{className:`drawui-color-swatch drawui-color-custom${Nt(t,le[w.key])?" active":""}`,style:{background:t},onClick:()=>pe(w.key,t),"aria-label":t,type:"button"},`custom-${t}`)),jsxRuntime.jsxs("span",{className:"drawui-color-swatch drawui-color-add","data-drawui-tip":drawuiCore.t("style.addColor"),children:["+",jsxRuntime.jsx("input",{ref:o,type:"color",defaultValue:"#3b82f6",className:"drawui-color-add-input","aria-label":drawuiCore.t("style.addColor")})]})]}),w.hasOpacity&&jsxRuntime.jsxs("div",{className:"drawui-opacity-row",children:[jsxRuntime.jsx("span",{className:"drawui-opacity-label",children:drawuiCore.t("style.opacity")}),jsxRuntime.jsx("input",{type:"range",min:0,max:100,value:Math.round(Se(w.key)*100),onChange:t=>K(w.key,Number(t.target.value)/100),className:"drawui-opacity-slider"}),jsxRuntime.jsxs("span",{className:"drawui-opacity-value",children:[Math.round(Se(w.key)*100),"%"]})]})]}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:"drawui-style-popover-title",children:drawuiCore.t("style.connection")}),jsxRuntime.jsx("div",{className:"drawui-connection-row",children:yn.map(t=>jsxRuntime.jsxs("button",{className:`drawui-connection-btn${u===t.type?" active":""}`,onClick:()=>he(t.type),"data-drawui-tip":drawuiCore.t(t.labelKey),type:"button",children:[jsxRuntime.jsx("span",{className:"drawui-connection-icon",children:t.icon}),jsxRuntime.jsx("span",{className:"drawui-connection-label",children:drawuiCore.t(t.labelKey)})]},t.type))}),jsxRuntime.jsx("div",{className:"drawui-style-popover-title",children:drawuiCore.t("style.arrow")}),jsxRuntime.jsx("div",{className:"drawui-connection-row",children:fn.map(t=>jsxRuntime.jsxs("button",{className:`drawui-connection-btn${p===t.type?" active":""}`,onClick:()=>ce(t.type),"data-drawui-tip":drawuiCore.t(t.labelKey),type:"button",children:[jsxRuntime.jsx("span",{className:"drawui-connection-icon",children:t.icon}),jsxRuntime.jsx("span",{className:"drawui-connection-label",children:drawuiCore.t(t.labelKey)})]},t.type))}),jsxRuntime.jsx("div",{className:"drawui-style-popover-title",children:drawuiCore.t("style.dashed")}),jsxRuntime.jsxs("div",{className:"drawui-connection-row",children:[jsxRuntime.jsxs("button",{className:`drawui-connection-btn${y?"":" active"}`,onClick:()=>Ce(false),"data-drawui-tip":drawuiCore.t("style.solid"),type:"button",children:[jsxRuntime.jsx("span",{className:"drawui-connection-icon",children:"\u2501"}),jsxRuntime.jsx("span",{className:"drawui-connection-label",children:drawuiCore.t("style.solid")})]}),jsxRuntime.jsxs("button",{className:`drawui-connection-btn${y?" active":""}`,onClick:()=>Ce(true),"data-drawui-tip":drawuiCore.t("style.dashed"),type:"button",children:[jsxRuntime.jsx("span",{className:"drawui-connection-icon",children:"\u2504"}),jsxRuntime.jsx("span",{className:"drawui-connection-label",children:drawuiCore.t("style.dashed")})]})]})]})})]})});var pt=14,zt=20,kn=["#1f2937","#ef4444","#f97316","#facc15","#22c55e","#3b82f6","#8b5cf6","#ec4899","#9ca3af"],Sn=[12,14,16,18,20,24];function Bt(a,e,n){let i=a,u=n,p=i.charAt(0);if(i.length>1&&(p==="+"||p==="-"||p==="#"||p==="~")&&i.charAt(1)===" "&&(u=p,i=i.slice(2)),i=i.replace(/^\s+|\s+$/g,""),e==="attribute"){let v=i.indexOf(":");return v===-1?{visibility:u,name:i,type:"",params:"",returnType:""}:{visibility:u,name:i.slice(0,v).replace(/^\s+|\s+$/g,""),type:i.slice(v+1).replace(/^\s+|\s+$/g,""),params:"",returnType:""}}let y=i.indexOf("(");if(y===-1){let v=i.lastIndexOf(":");return v===-1?{visibility:u,name:i,type:"",params:"",returnType:""}:{visibility:u,name:i.slice(0,v).replace(/^\s+|\s+$/g,""),type:"",params:"",returnType:i.slice(v+1).replace(/^\s+|\s+$/g,"")}}let l=i.slice(0,y).replace(/^\s+|\s+$/g,""),C=i.indexOf(")",y);if(C===-1)return {visibility:u,name:l,type:"",params:i.slice(y+1).replace(/^\s+|\s+$/g,""),returnType:""};let f=i.slice(y+1,C).replace(/^\s+|\s+$/g,""),c=i.slice(C+1).replace(/^\s+|\s+$/g,"");return c.startsWith(":")&&(c=c.slice(1).replace(/^\s+|\s+$/g,"")),{visibility:u,name:l,type:"",params:f,returnType:c}}function Cn(a,e){let n=`${e.visibility} `;return a==="attribute"?`${n}${e.name}: ${e.type??""}`:`${n}${e.name}(${e.params??""}): ${e.returnType??""}`}var Dt=react.memo(function({editor:e,umlClass:n,editing:i}){let[,u]=react.useState(0);X(),react.useEffect(()=>{if(!e)return;let h=e.subscribe(()=>u(N=>N+1));return ()=>{h();}},[e]);let[p,y]=react.useState(null),[l,C]=react.useState(false),f=react.useRef(null),c=react.useRef(null),v=react.useCallback((h,N)=>{f.current&&(clearTimeout(f.current),f.current=null),y({section:h,rowId:N}),C(false);},[]),B=react.useCallback(()=>{f.current&&clearTimeout(f.current),f.current=window.setTimeout(()=>{y(null),C(false);},150);},[]);if(!e||!n||i!==n.id)return null;let I=e.getCamera(),{id:b,x:z,y:k,width:D,height:P,className:ue,methods:o}=n,s=n.type==="uml-interface",d=s?[]:n.attributes,q=D/2,Z=P/2,A=drawuiCore.UML_HEADER_HEIGHT,V=drawuiCore.UML_LINE_HEIGHT,se=drawuiCore.UML_PADDING_X,_=drawuiCore.UML_PADDING_Y,ee=s?0:d.length>0?d.length*V+_*2:_*2,m=I.zoom,le=(D-se*2)*m,Ne=4*m,Se=I.pageToScreen({x:z-q+se,y:k}),pe=I.pageToScreen({x:z,y:k-Z+A/2}),K=h=>I.pageToScreen({x:z,y:h}).y,he=V*m,ce=h=>k+(-Z+A+_+V/2+h*V),Ce=h=>k+(-Z+A+ee+_+V/2+h*V),ye=k+(-Z+A+ee),fe=k+Z,me={background:"#ffffff",borderWidth:1,borderStyle:"solid",borderColor:"transparent",outline:"none",padding:0,fontFamily:"sans-serif",boxSizing:"border-box"},Me=(h,N)=>{let L=d.find($=>$.id===h);if(!L)return;let E=Bt(N,"attribute",L.visibility);e.updateUmlClass(b,{attributes:d.map($=>$.id===h?{...$,...E}:$)});},w=(h,N)=>{let L=o.find(F=>F.id===h);if(!L)return;let E=Bt(N,"method",L.visibility),$=o.map(F=>F.id===h?{...F,...E}:F);s?e.updateUmlInterface(b,{methods:$}):e.updateUmlClass(b,{methods:$});},x=(h,N,L)=>{c.current={section:h,from:N},L.dataTransfer.effectAllowed="move",L.dataTransfer.setData("text/plain",`${h}:${N}`);},oe=h=>{h.preventDefault(),h.dataTransfer.dropEffect="move";},O=(h,N,L)=>{L.preventDefault();let E=c.current;!E||E.section!==h||(h==="attribute"?e.reorderUmlAttribute(b,E.from,N):e.reorderUmlMethod(b,E.from,N),c.current=null);},G=(h,N,L,E)=>{let $=K(E),F=p?.section===h&&p.rowId===L.id,ge=(L.fontSize||drawuiCore.UML_FONT_SIZE)*m,Ke=L.textColor||"#1f2937",Ee={position:"absolute",left:Se.x-pt*m-Ne,top:$-he/2,width:pt*m+Ne+le+zt*m,height:he,display:"flex",alignItems:"center",gap:2,pointerEvents:"none",zIndex:53},t={...me,width:le,height:he-2,fontSize:ge,color:Ke,textDecoration:L.strikethrough?"line-through":"none",pointerEvents:"auto",...F?{borderColor:"var(--dw-primary)"}:{}},g={width:pt*m,height:he-2,cursor:"grab",color:"#9ca3af",display:"flex",alignItems:"center",justifyContent:"center",userSelect:"none",fontSize:12*m,lineHeight:1,opacity:F?1:.55,pointerEvents:"auto"},Y={width:zt*m,height:he-6,border:"none",background:"transparent",color:"#9ca3af",cursor:"pointer",borderRadius:3,fontSize:14*m,opacity:F?1:.35,pointerEvents:"auto"};return jsxRuntime.jsxs("div",{style:Ee,onDragOver:oe,onDrop:R=>O(h,N,R),children:[jsxRuntime.jsx("span",{style:g,draggable:true,onDragStart:R=>x(h,N,R),"data-drawui-tip":drawuiCore.t("uml.drag"),children:"\u22EE\u22EE"}),jsxRuntime.jsx("input",{style:t,value:Cn(h,L),onChange:R=>h==="attribute"?Me(L.id,R.target.value):w(L.id,R.target.value),onFocus:()=>v(h,L.id),onBlur:B,spellCheck:false}),jsxRuntime.jsx("button",{style:Y,onMouseDown:R=>R.preventDefault(),onClick:()=>{h==="attribute"?e.removeUmlAttribute(b,L.id):e.removeUmlMethod(b,L.id);},"data-drawui-tip":drawuiCore.t("uml.delete"),children:"\xD7"})]},L.id)},ie=(h,N,L)=>{let E=K(N),$=h==="attribute";return jsxRuntime.jsxs("button",{onMouseDown:F=>F.preventDefault(),onClick:()=>$?e.addUmlAttribute(b):e.addUmlMethod(b),className:"drawui-uml-add-row",style:{position:"absolute",left:Se.x,top:E-9*m,height:18*m,padding:`0 ${6*m}px`,fontSize:11*m,lineHeight:1,border:"1px dashed #cbd5e1",background:"rgba(255,255,255,0.85)",color:"#64748b",borderRadius:3,cursor:"pointer",pointerEvents:"auto",display:"flex",alignItems:"center",gap:3,whiteSpace:"nowrap",zIndex:53},"data-drawui-tip":L,children:[jsxRuntime.jsx("span",{style:{fontSize:13*m,lineHeight:1},children:"+"}),jsxRuntime.jsx("span",{children:L})]},`add-${h}`)},ze=()=>{if(!p||p.section==="className")return null;let h=p.section,N=p.rowId,E=(h==="attribute"?d:o).find(T=>T.id===N);if(!E)return null;let $=224*m,F=30*m,ge=I.pageToScreen({x:z,y:k}).x,Ke=I.pageToScreen({x:z,y:k-Z}).y,Ee=20*m,t=Ke-F-Ee,g=ge-$/2,Y=t+F,R=E.textColor||"#1f2937",H=E.fontSize||drawuiCore.UML_FONT_SIZE,be=!!E.strikethrough;return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{style:{position:"absolute",left:ge-.5,top:Y,width:1,height:Ee,background:"#d1d5db",pointerEvents:"none",zIndex:59}}),jsxRuntime.jsxs("div",{className:"drawui-uml-toolbar",style:{position:"absolute",left:g,top:t,width:$,height:F,background:"#ffffff",border:"1px solid #e5e7eb",borderRadius:6,boxShadow:"0 4px 12px rgba(0, 0, 0, 0.1)",display:"flex",alignItems:"center",gap:4*m,padding:`0 ${6*m}px`,pointerEvents:"auto",zIndex:60,fontSize:12*m},onMouseDown:T=>T.preventDefault(),children:[jsxRuntime.jsxs("div",{style:{position:"relative"},children:[jsxRuntime.jsxs("button",{onClick:()=>C(T=>!T),className:"drawui-uml-toolbar-btn","data-drawui-tip":drawuiCore.t("uml.textColor"),style:{border:"none",background:"transparent",cursor:"pointer",padding:2,display:"flex",alignItems:"center",borderRadius:3},children:[jsxRuntime.jsx("span",{style:{fontWeight:700,color:R,fontSize:13*m,textDecoration:be?"line-through":"none"},children:"A"}),jsxRuntime.jsx("span",{style:{width:10*m,height:2*m,background:R,marginLeft:3,borderRadius:1}})]}),l&&jsxRuntime.jsxs("div",{style:{position:"absolute",top:"100%",left:0,marginTop:4,background:"#ffffff",border:"1px solid #e5e7eb",borderRadius:4,padding:4,display:"flex",gap:2,boxShadow:"0 2px 8px rgba(0, 0, 0, 0.1)",zIndex:61},children:[jsxRuntime.jsx("button",{onClick:()=>{e.updateUmlRowStyle(b,h,E.id,{textColor:null}),C(false);},style:{width:14,height:14,border:"1px solid #e5e7eb",background:"transparent",cursor:"pointer",borderRadius:2},"data-drawui-tip":drawuiCore.t("uml.defaultColor")}),kn.map(T=>jsxRuntime.jsx("button",{onClick:()=>{e.updateUmlRowStyle(b,h,E.id,{textColor:T}),C(false);},style:{width:14,height:14,border:"none",background:T,cursor:"pointer",borderRadius:2},"data-drawui-tip":T},T))]})]}),jsxRuntime.jsx("select",{value:H,onChange:T=>e.updateUmlRowStyle(b,h,E.id,{fontSize:Number(T.target.value)}),style:{border:"1px solid #e5e7eb",borderRadius:3,padding:`0 ${2*m}px`,fontSize:12*m,height:20*m,background:"#ffffff"},"data-drawui-tip":drawuiCore.t("uml.fontSize"),children:Sn.map(T=>jsxRuntime.jsx("option",{value:T,children:T},T))}),jsxRuntime.jsx("button",{onClick:()=>e.updateUmlRowStyle(b,h,E.id,{strikethrough:!be}),className:"drawui-uml-toolbar-btn","data-drawui-tip":drawuiCore.t("uml.strikethrough"),style:{border:"none",background:be?"var(--dw-primary-weak)":"transparent",cursor:"pointer",padding:2,borderRadius:3},children:jsxRuntime.jsx("span",{style:{fontWeight:700,fontSize:13*m,textDecoration:"line-through"},children:"A"})}),jsxRuntime.jsx("button",{onClick:()=>{h==="attribute"?e.removeUmlAttribute(b,E.id):e.removeUmlMethod(b,E.id),y(null);},className:"drawui-uml-toolbar-btn","data-drawui-tip":drawuiCore.t("uml.delete"),style:{border:"none",background:"transparent",cursor:"pointer",color:"#ef4444",padding:2,marginLeft:"auto",borderRadius:3},children:jsxRuntime.jsxs("svg",{width:14*m,height:14*m,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("polyline",{points:"3 6 5 6 21 6"}),jsxRuntime.jsx("path",{d:"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"}),jsxRuntime.jsx("path",{d:"M10 11v6"}),jsxRuntime.jsx("path",{d:"M14 11v6"}),jsxRuntime.jsx("path",{d:"M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"})]})})]})]})},Be=I.pageToScreen({x:z-q,y:k}).x,Ae=I.pageToScreen({x:z,y:k-Z}).y,Oe=D*m,Ue=P*m;return jsxRuntime.jsxs("div",{style:{position:"absolute",inset:0,pointerEvents:"none",zIndex:50},children:[jsxRuntime.jsx("div",{style:{position:"absolute",left:Be+1,top:Ae+1,width:Math.max(0,Oe-2),height:Math.max(0,Ue-2),background:"#ffffff",pointerEvents:"none",zIndex:51}}),jsxRuntime.jsx("input",{style:{...me,position:"absolute",left:pe.x-le/2,top:pe.y-A*m/2+2,width:le,height:A*m-4,textAlign:"center",fontWeight:700,fontSize:(n.fontSize||drawuiCore.UML_FONT_SIZE)*m,color:n.textColor||"#1f2937",pointerEvents:"auto",zIndex:52,...p?.section==="className"?{borderColor:"var(--dw-primary)"}:{}},value:ue,onChange:h=>s?e.updateUmlInterface(b,{className:h.target.value}):e.updateUmlClass(b,{className:h.target.value}),onFocus:()=>v("className",""),onBlur:B,spellCheck:false}),!s&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[d.map((h,N)=>G("attribute",N,h,ce(N))),ie("attribute",ye,"\u5C5E\u6027")]}),o.map((h,N)=>G("method",N,h,Ce(N))),ie("method",fe,drawuiCore.t("uml.method")),ze()]})});var Ut=react.memo(function({editor:e,panelOpen:n,onOpenPanel:i}){let[,u]=react.useState(0);X(),react.useEffect(()=>{if(!e)return;let D=e.subscribe(()=>u(P=>P+1));return ()=>{D();}},[e]);let p=react.useRef(false),y=react.useRef(false);if(!e)return null;let l=e.getMindMapEditingShapeId();if(!l||n)return null;let C=e.getMindMapSelectedNode();if(!C||C.shapeId!==l)return null;let f=e.getMindMapNode(l,C.nodeId),c=e.getMindMapNodeScreenRect(l,C.nodeId);if(!f||!c)return null;let v=e.getCamera().getZoom(),B=drawuiCore.MINDMAP_FONT_SIZE*v,I=Math.max(100,c.width+24),b=c.height+8,z={position:"absolute",left:c.x+c.width/2,top:c.y-4,transform:"translateX(-50%)",width:I,height:b,border:"1.5px solid var(--dw-primary, #3b82f6)",borderRadius:6,background:"#ffffff",boxShadow:"0 2px 10px rgba(0,0,0,0.15)",outline:"none",padding:`0 ${(f.icon?24:12)*v}px`,fontFamily:"sans-serif",fontSize:B,color:"#1f2937",boxSizing:"border-box",pointerEvents:"auto",zIndex:55},k={position:"absolute",left:c.x+c.width+12,top:c.y+c.height/2-11,width:22,height:22,border:"1px solid #e5e7eb",background:"#ffffff",borderRadius:"50%",cursor:"pointer",color:"#6b7280",fontSize:13,lineHeight:1,display:"flex",alignItems:"center",justifyContent:"center",boxShadow:"0 1px 4px rgba(0,0,0,0.12)",pointerEvents:"auto",zIndex:55};return jsxRuntime.jsxs("div",{style:{position:"absolute",inset:0,pointerEvents:"none",zIndex:50},children:[jsxRuntime.jsx("input",{autoFocus:true,style:z,value:f.text,spellCheck:false,onChange:D=>{let P=!p.current;p.current=true,e.updateMindMapNode(l,C.nodeId,{text:D.target.value},P);},onBlur:()=>{if(y.current){y.current=false;return}e.exitMindMapEdit();},onKeyDown:D=>{D.key==="Enter"?D.target.blur():D.key==="Escape"&&e.exitMindMapEdit();}}),jsxRuntime.jsx("button",{style:k,"data-drawui-tip":drawuiCore.t("mindmap.more"),onMouseDown:D=>{D.preventDefault(),y.current=true,setTimeout(()=>{y.current=false;},300);},onClick:i,children:"\u22EF"})]})});var $t=[...drawuiCore.MINDMAP_COLORS,"#1f2937","#9ca3af"],Wt=["\u{1F4A1}","\u2B50","\u{1F525}","\u{1F4CC}","\u2705","\u2757","\u26A0\uFE0F","\u{1F3F7}\uFE0F"],Dn={position:"absolute",width:232,background:"rgba(255,255,255,0.96)",border:"1px solid #e5e7eb",borderRadius:8,boxShadow:"0 6px 20px rgba(0,0,0,0.12)",padding:"10px 12px",fontSize:12,color:"#1f2937",zIndex:70,boxSizing:"border-box",fontFamily:"sans-serif"},ht={fontSize:11,color:"#6b7280",marginBottom:4,display:"block"},qe={display:"flex",gap:4,alignItems:"center",flexWrap:"wrap"},Je={border:"1px solid #e5e7eb",background:"#ffffff",borderRadius:5,padding:"3px 8px",fontSize:12,color:"#374151",cursor:"pointer",lineHeight:1.5},yt={width:"100%",border:"1px solid #e5e7eb",borderRadius:5,padding:"4px 8px",fontSize:12,outline:"none",boxSizing:"border-box",background:"#ffffff",color:"#1f2937"},Zt=react.memo(function({editor:e,mindMap:n}){let[,i]=react.useState(0);X(),react.useEffect(()=>{if(!e)return;let o=e.subscribe(()=>i(s=>s+1));return ()=>{o();}},[e]);let u=react.useRef(null);if(!e||!n||e.getMindMapEditingShapeId()!==n.id)return null;let p=e.getMindMapSelectedNode();if(!p||p.shapeId!==n.id)return null;let y=o=>{if(o.id===p.nodeId)return o;for(let s of o.children??[]){let d=y(s);if(d)return d}return null},l=y(n.root);if(!l)return null;let C=e.getCamera(),c=drawuiCore.layoutMindMap(n.root).positions.get(l.id);if(!c)return null;let v=C.zoom,B=C.pageToScreen({x:n.x+c.x,y:n.y+c.y}),I=B.x+c.width*v/2+14,b=B.y-80,k=Math.max(8,Math.min(I,(window.innerWidth||1024)-232-8)),D=Math.max(8,Math.min(b,(window.innerHeight||768)-320)),P=o=>{e.updateMindMapNode(n.id,l.id,o);},ue=!!l.id&&l.id!==n.root.id;return jsxRuntime.jsxs("div",{ref:u,style:{...Dn,left:k,top:D},onMouseDown:o=>o.stopPropagation(),children:[jsxRuntime.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:8},children:[jsxRuntime.jsx("span",{style:{fontWeight:600,fontSize:12},children:drawuiCore.t("mindmap.nodeText")}),jsxRuntime.jsx("button",{onClick:()=>e.exitMindMapEdit(),"data-drawui-tip":drawuiCore.t("mindmap.close"),style:{border:"none",background:"transparent",cursor:"pointer",color:"#9ca3af",fontSize:14,lineHeight:1,padding:2},children:"\xD7"})]}),jsxRuntime.jsx("input",{style:{...yt,marginBottom:8},value:l.text,onChange:o=>P({text:o.target.value}),spellCheck:false}),jsxRuntime.jsxs("div",{style:{...qe,marginBottom:10},children:[jsxRuntime.jsxs("button",{style:Je,onClick:()=>e.addMindMapChild(n.id,l.id),children:["+ ",drawuiCore.t("mindmap.addChild")]}),ue&&jsxRuntime.jsxs("button",{style:Je,onClick:()=>e.addMindMapSibling(n.id,l.id),children:["+ ",drawuiCore.t("mindmap.addSibling")]}),!!l.children?.length&&jsxRuntime.jsx("button",{style:Je,onClick:()=>e.toggleMindMapCollapse(n.id,l.id),children:l.collapsed?drawuiCore.t("mindmap.expand"):drawuiCore.t("mindmap.collapse")}),jsxRuntime.jsx("button",{style:{...Je,color:"#ef4444",borderColor:"#fecaca",marginLeft:"auto"},onClick:()=>e.deleteMindMapNode(n.id,l.id),children:drawuiCore.t("mindmap.deleteNode")})]}),jsxRuntime.jsx("span",{style:ht,children:drawuiCore.t("mindmap.color")}),jsxRuntime.jsxs("div",{style:{...qe,marginBottom:10},children:[jsxRuntime.jsx("button",{"data-drawui-tip":drawuiCore.t("mindmap.levelColor"),onClick:()=>P({color:void 0}),style:{width:18,height:18,borderRadius:4,border:"1.5px solid #d1d5db",background:"conic-gradient(#ef4444, #f59e0b, #10b981, #3b82f6, #8b5cf6, #ec4899, #ef4444)",cursor:"pointer",flexShrink:0}}),$t.map(o=>jsxRuntime.jsx("button",{"data-drawui-tip":o,onClick:()=>P({color:o}),style:{width:18,height:18,borderRadius:4,border:l.color===o?"2px solid #111827":"1px solid #d1d5db",background:o,cursor:"pointer",flexShrink:0}},o))]}),jsxRuntime.jsx("span",{style:ht,children:drawuiCore.t("mindmap.icon")}),jsxRuntime.jsxs("div",{style:{...qe,marginBottom:10},children:[jsxRuntime.jsx("button",{"data-drawui-tip":drawuiCore.t("mindmap.noIcon"),onClick:()=>P({icon:void 0}),style:{width:22,height:22,borderRadius:4,border:l.icon?"1px solid #d1d5db":"2px solid #111827",background:"#f9fafb",cursor:"pointer",fontSize:11,color:"#9ca3af",lineHeight:1},children:"\u2205"}),Wt.map(o=>jsxRuntime.jsx("button",{onClick:()=>P({icon:o}),style:{width:22,height:22,borderRadius:4,border:l.icon===o?"2px solid #111827":"1px solid #d1d5db",background:"#f9fafb",cursor:"pointer",fontSize:13,lineHeight:1},children:o},o)),jsxRuntime.jsx("input",{placeholder:"\u270F\uFE0F",defaultValue:l.icon&&!Wt.includes(l.icon)?l.icon:"",onKeyDown:o=>{if(o.key==="Enter"){let s=o.target.value.trim();P({icon:s||void 0});}},onBlur:o=>{let s=o.target.value.trim();s!==l.icon&&P({icon:s||void 0});},style:{...yt,width:56,padding:"2px 4px",textAlign:"center"}})]}),jsxRuntime.jsx("span",{style:ht,children:drawuiCore.t("mindmap.note")}),jsxRuntime.jsx("input",{style:{...yt,marginBottom:6},value:l.note??"",placeholder:drawuiCore.t("mindmap.notePlaceholder"),onChange:o=>P({note:o.target.value||void 0}),spellCheck:false}),!!l.note&&jsxRuntime.jsxs("div",{style:{...qe,marginTop:4},children:[jsxRuntime.jsx("span",{style:{fontSize:11,color:"#6b7280"},children:drawuiCore.t("mindmap.noteColor")}),jsxRuntime.jsx("button",{"data-drawui-tip":drawuiCore.t("mindmap.noteColorDefault"),onClick:()=>P({noteColor:void 0}),style:{width:16,height:16,borderRadius:3,border:l.noteColor?"1px solid #d1d5db":"2px solid #111827",background:"repeating-conic-gradient(#ef4444 0% 25%, #f59e0b 0% 50%, #10b981 0% 75%, #3b82f6 0% 100%)",cursor:"pointer"}}),$t.map(o=>jsxRuntime.jsx("button",{onClick:()=>P({noteColor:o}),style:{width:16,height:16,borderRadius:3,border:l.noteColor===o?"2px solid #111827":"1px solid #d1d5db",background:o,cursor:"pointer"}},o))]})]})});var mt=220,gt=140,Wn="#fafafa";function Zn(a,e){let n=Math.min(a.x,e.x),i=Math.min(a.y,e.y),u=Math.max(a.x+a.width,e.x+e.width),p=Math.max(a.y+a.height,e.y+e.height);return {x:n,y:i,width:u-n,height:p-i}}function _n(a){return {x:a.x+a.width/2,y:a.y+a.height/2}}function Gn(){return {x:0,y:0,width:0,height:0}}function Fn(a){let e=1/0,n=1/0,i=-1/0,u=-1/0,p=false;for(let y of a){let l=wt(y);l&&(p=true,l.x<e&&(e=l.x),l.y<n&&(n=l.y),l.x+l.width>i&&(i=l.x+l.width),l.y+l.height>u&&(u=l.y+l.height));}return p?{x:e,y:n,width:i-e,height:u-n}:null}function wt(a){switch(a.type){case "rectangle":case "rounded-rectangle":case "ellipse":case "diamond":case "triangle":case "hexagon":case "parallelogram":case "trapezoid":case "pentagon":case "octagon":case "star":case "uml-class":case "uml-interface":case "mind-map":case "text":return {x:a.x-a.width/2,y:a.y-a.height/2,width:a.width,height:a.height};case "circle":return {x:a.x-a.radius,y:a.y-a.radius,width:a.radius*2,height:a.radius*2};case "line":case "arrow":{let e=a.points;if(!e||e.length===0)return null;let n=1/0,i=1/0,u=-1/0,p=-1/0;for(let y of e)y.x<n&&(n=y.x),y.y<i&&(i=y.y),y.x>u&&(u=y.x),y.y>p&&(p=y.y);return {x:n,y:i,width:u-n,height:p-i}}case "draw":{let e=a,n=e.width,i=e.height;if(typeof n=="number"&&typeof i=="number")return {x:e.x-n/2,y:e.y-i/2,width:n,height:i};let u=e.points;if(!u||u.length===0)return null;let p=1/0,y=1/0,l=-1/0,C=-1/0;for(let f of u){let c=f.x+e.x,v=f.y+e.y;c<p&&(p=c),v<y&&(y=v),c>l&&(l=c),v>C&&(C=v);}return {x:p,y,width:l-p,height:C-y}}default:return null}}function Vn(a){let e=a.getCamera(),n=e.screenToPage({x:0,y:0}),i=e.screenToPage({x:window.innerWidth,y:window.innerHeight});return {x:n.x,y:n.y,width:i.x-n.x,height:i.y-n.y}}function Yn(a,e,n){if(a.width<=0||a.height<=0)return {x:a.x-e/2,y:a.y-n/2,width:e,height:n};let i=e/n,u=a.width,p=u/i;p<a.height&&(p=a.height,u=p*i);let y=_n(a);return {x:y.x-u/2,y:y.y-p/2,width:u,height:p}}function bt(a,e,n,i){let u=(a-n.left)/n.width,p=(e-n.top)/n.height;return {x:i.x+u*i.width,y:i.y+p*i.height}}var Ft=react.memo(function({editor:e}){let n=react.useRef(null),i=react.useRef(null),[u,p]=react.useState(false),[y,l]=react.useState(100),[C,f]=react.useState(false),[c,v]=react.useState(false);X();let B=react.useRef(null),I=react.useRef(null);react.useLayoutEffect(()=>{let o=n.current,s=i.current;if(!o||!s)return;let d=window.devicePixelRatio||1;o.width=Math.round(mt*d),o.height=Math.round(gt*d),o.style.width=`${mt}px`,o.style.height=`${gt}px`;},[u]);let b=react.useCallback(()=>{let o=n.current,s=i.current;if(!o||!s||!e)return;let d=o.getContext("2d");if(!d)return;let q=mt,Z=gt,A=o.width,V=o.height,se=e.getShapes(),_=new Set(e.getSelectedIds()),ee=drawuiCore.getTheme(),m=drawuiCore.hexToRgba(ee.text,.16),le=ee.primary,Ne=drawuiCore.hexToRgba(ee.primary,.18),Se=drawuiCore.hexToRgba(ee.primary,.85),pe=Fn(se),K=Vn(e),he=pe?Zn(pe,K):K.width>0?K:Gn(),ce=Yn(he,q,Z);I.current=ce;let Ce=A/ce.width,ye=V/ce.height,fe=q/ce.width;d.setTransform(1,0,0,1,0,0),d.fillStyle=Wn,d.fillRect(0,0,A,V),d.setTransform(Ce,0,0,ye,-Ce*ce.x,-ye*ce.y),d.fillStyle=m;for(let w of se){let x=wt(w);x&&d.fillRect(x.x,x.y,x.width,x.height);}d.fillStyle=le;for(let w of se){if(!_.has(w.id))continue;let x=wt(w);x&&d.fillRect(x.x,x.y,x.width,x.height);}d.fillStyle=Ne,d.fillRect(K.x,K.y,K.width,K.height);let me=1.5/fe;d.strokeStyle=Se,d.lineWidth=me,d.lineJoin="round";let Me=Math.min(K.width/6,K.height/6,6/fe);if(d.beginPath(),Me*fe<1)d.rect(K.x,K.y,K.width,K.height);else {let w=K.x,x=K.y,oe=K.width,O=K.height,G=Math.min(Me,oe/2,O/2);d.moveTo(w+G,x),d.lineTo(w+oe-G,x),d.quadraticCurveTo(w+oe,x,w+oe,x+G),d.lineTo(w+oe,x+O-G),d.quadraticCurveTo(w+oe,x+O,w+oe-G,x+O),d.lineTo(w+G,x+O),d.quadraticCurveTo(w,x+O,w,x+O-G),d.lineTo(w,x+G),d.quadraticCurveTo(w,x,w+G,x),d.closePath();}d.stroke(),d.setTransform(1,0,0,1,0,0);},[e]);react.useEffect(()=>{if(!e||u)return;b();let o=e.subscribe(b),s=drawuiCore.subscribeTheme(b),d=()=>b();return window.addEventListener("resize",d),()=>{o(),s(),window.removeEventListener("resize",d);}},[e,u,b]),react.useEffect(()=>{if(!e)return;let o=()=>{let d=e.getCamera().getZoom();l(Math.round(d*100));};o();let s=e.subscribe(o);return ()=>{s();}},[e]);let z=react.useCallback((o,s)=>{if(!e)return;let d=e.getCamera(),q=d.getZoom(),Z=window.innerWidth/2,A=window.innerHeight/2,V=d;V.x=Z-o*q,V.y=A-s*q,e.requestRender();},[e]),k=o=>{if(!e||!i.current||o.button!==0)return;let s=i.current.getBoundingClientRect(),d=I.current;if(!d)return;let q=bt(o.clientX,o.clientY,s,d);B.current={pointerId:o.pointerId,rect:{left:s.left,top:s.top,width:s.width,height:s.height},canvasBox:d},o.currentTarget.setPointerCapture(o.pointerId),v(true),z(q.x,q.y);},D=o=>{if(!c||!e||!B.current||!i.current)return;let s=B.current,d=bt(o.clientX,o.clientY,s.rect,s.canvasBox);z(d.x,d.y);},P=o=>{if(c){v(false),B.current=null;try{o.currentTarget.releasePointerCapture(o.pointerId);}catch{}}},ue=o=>{if(!e||!i.current)return;let s=I.current;if(!s)return;let d=i.current.getBoundingClientRect(),q=bt(o.clientX,o.clientY,d,s);z(q.x,q.y);};return jsxRuntime.jsxs("div",{className:`drawui-minimap ${u?"collapsed":""}`,children:[jsxRuntime.jsx("button",{className:"drawui-minimap-toggle",onClick:()=>p(o=>!o),"data-drawui-tip":u?drawuiCore.t("minimap.expand"):drawuiCore.t("minimap.collapse"),"data-drawui-tip-pos":"top","aria-label":u?drawuiCore.t("minimap.expand"):drawuiCore.t("minimap.collapse"),children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:u?jsxRuntime.jsx("polyline",{points:"9 6 15 12 9 18"}):jsxRuntime.jsx("polyline",{points:"15 6 9 12 15 18"})})}),!u&&jsxRuntime.jsxs("div",{className:"drawui-minimap-panel",children:[jsxRuntime.jsxs("div",{className:"drawui-minimap-header",children:[jsxRuntime.jsx("span",{className:"drawui-minimap-title",children:drawuiCore.t("minimap.title")}),jsxRuntime.jsxs("span",{className:"drawui-minimap-zoom",children:[y,"%"]})]}),jsxRuntime.jsx("div",{ref:i,className:"drawui-minimap-canvas-wrap",style:{cursor:c?"grabbing":C?"pointer":"default"},onPointerEnter:()=>f(true),onPointerLeave:()=>f(false),children:jsxRuntime.jsx("canvas",{ref:n,className:"drawui-minimap-canvas",onPointerDown:k,onPointerMove:D,onPointerUp:P,onPointerCancel:P,onDoubleClick:ue})})]})]})});var ae=a=>jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",width:"18",height:"18",className:"drawui-gen-shape-glyph",fill:"none",stroke:"currentColor",strokeWidth:"1.6",strokeLinecap:"round",strokeLinejoin:"round",children:a}),qn=[{type:"rectangle",labelKey:"shape.rectangle",glyph:ae(jsxRuntime.jsx("rect",{x:"4",y:"7",width:"16",height:"10",rx:"1"}))},{type:"rounded-rectangle",labelKey:"shape.rounded-rectangle",glyph:ae(jsxRuntime.jsx("rect",{x:"4",y:"7",width:"16",height:"10",rx:"4"}))},{type:"circle",labelKey:"shape.circle",glyph:ae(jsxRuntime.jsx("circle",{cx:"12",cy:"12",r:"5.5"}))},{type:"ellipse",labelKey:"shape.ellipse",glyph:ae(jsxRuntime.jsx("ellipse",{cx:"12",cy:"12",rx:"7",ry:"4.5"}))},{type:"diamond",labelKey:"shape.diamond",glyph:ae(jsxRuntime.jsx("path",{d:"M12 5 L19 12 L12 19 L5 12 Z"}))},{type:"triangle",labelKey:"shape.triangle",glyph:ae(jsxRuntime.jsx("path",{d:"M12 4 L20 19 H4 Z"}))},{type:"hexagon",labelKey:"shape.hexagon",glyph:ae(jsxRuntime.jsx("path",{d:"M12 3 L19.5 7.5 V16.5 L12 21 L4.5 16.5 V7.5 Z"}))},{type:"parallelogram",labelKey:"shape.parallelogram",glyph:ae(jsxRuntime.jsx("path",{d:"M6 7 L19 7 L16 17 H7 Z"}))},{type:"trapezoid",labelKey:"shape.trapezoid",glyph:ae(jsxRuntime.jsx("path",{d:"M7 6 H17 L20 18 H4 Z"}))},{type:"pentagon",labelKey:"shape.pentagon",glyph:ae(jsxRuntime.jsx("path",{d:"M12 4 L19.5 9.5 L16.5 18.5 H7.5 L4.5 9.5 Z"}))},{type:"octagon",labelKey:"shape.octagon",glyph:ae(jsxRuntime.jsx("path",{d:"M8 4 H16 L20 8 V16 L16 20 H8 L4 16 V8 Z"}))},{type:"star",labelKey:"shape.star",glyph:ae(jsxRuntime.jsx("path",{d:"M12 3 L14 9.5 L20.5 10 L15.5 14 L17.5 20.5 L12 16.8 L6.5 20.5 L8.5 14 L3.5 10 L10 9.5 Z"}))},{type:"uml-class",labelKey:"shape.uml-class",glyph:ae(jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("rect",{x:"3",y:"4",width:"18",height:"16",rx:"1"}),jsxRuntime.jsx("path",{d:"M3 9 H21"}),jsxRuntime.jsx("path",{d:"M3 15 H21"}),jsxRuntime.jsx("path",{d:"M6 6.5 H10"}),jsxRuntime.jsx("path",{d:"M6 12.5 H12"})]}))},{type:"uml-interface",labelKey:"shape.uml-interface",glyph:ae(jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("rect",{x:"3",y:"4",width:"18",height:"16",rx:"1"}),jsxRuntime.jsx("path",{d:"M3 9 H21"}),jsxRuntime.jsx("path",{d:"M6 6.5 H10"}),jsxRuntime.jsx("path",{d:"M6 12.5 H12"})]}))},{type:"mind-map",labelKey:"shape.mind-map",glyph:ae(jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("circle",{cx:"5",cy:"12",r:"2"}),jsxRuntime.jsx("path",{d:"M7 12h2.6"}),jsxRuntime.jsx("path",{d:"M9.6 12c0-2 1.2-3.4 2.6-3.4"}),jsxRuntime.jsx("path",{d:"M9.6 12c0 2 1.2 3.4 2.6 3.4"}),jsxRuntime.jsx("circle",{cx:"15.2",cy:"8.6",r:"1.3"}),jsxRuntime.jsx("circle",{cx:"15.2",cy:"15.4",r:"1.3"}),jsxRuntime.jsx("circle",{cx:"13.6",cy:"12",r:"1.3"})]}))}];function Vt({editor:a,x:e,y:n,context:i,existingArrowId:u,defaultShapeType:p,onClose:y}){let l=react.useRef(null);X();let C=f=>{a?.createGeneratedConnection(i,{type:f,existingArrowId:u}),y();};return react.useEffect(()=>{let f=B=>{l.current&&!l.current.contains(B.target)&&y();},c=B=>{B.key==="Escape"&&(B.preventDefault(),y());},v=setTimeout(()=>{window.addEventListener("pointerdown",f,true),window.addEventListener("keydown",c,true);},0);return ()=>{clearTimeout(v),window.removeEventListener("pointerdown",f,true),window.removeEventListener("keydown",c,true);}},[y]),jsxRuntime.jsxs("div",{className:"drawui-gen-menu",ref:l,style:{left:e,top:n},children:[jsxRuntime.jsx("div",{className:"drawui-gen-menu-label",children:drawuiCore.t("menu.title")}),jsxRuntime.jsx("div",{className:"drawui-gen-shape-grid",children:qn.map(f=>jsxRuntime.jsxs("button",{className:`drawui-gen-shape-btn${f.type===p?" drawui-gen-shape-active":""}`,onClick:()=>C(f.type),"data-drawui-tip":drawuiCore.t(f.labelKey),children:[f.glyph,jsxRuntime.jsx("span",{className:"drawui-gen-shape-label",children:drawuiCore.t(f.labelKey)})]},f.type))}),jsxRuntime.jsx("div",{className:"drawui-gen-menu-hint",children:drawuiCore.t("menu.cancel")})]})}var to={select:"tool.select",hand:"tool.hand",rectangle:"tool.rectangle","rounded-rectangle":"tool.rounded-rectangle",circle:"tool.circle",ellipse:"tool.ellipse",diamond:"tool.diamond",triangle:"tool.triangle",hexagon:"tool.hexagon",parallelogram:"tool.parallelogram",trapezoid:"tool.trapezoid",pentagon:"tool.pentagon",octagon:"tool.octagon",star:"tool.star","uml-class":"tool.uml-class","uml-interface":"tool.uml-interface",line:"tool.line",arrow:"tool.arrow",text:"tool.text",draw:"tool.draw",pen:"tool.pen",highlighter:"tool.highlighter",eraser:"tool.eraser","mind-map":"tool.mind-map"};function no({initialTool:a="select",className:e="",themeColor:n,language:i="zh-CN",data:u,onChange:p,onReady:y}){let l=react.useRef(null),C=react.useRef(null),f=react.useRef(null),[c,v]=react.useState(null);X();let[B,I]=react.useState(a),[b,z]=react.useState(false),[k,D]=react.useState(0),[P,ue]=react.useState(false),[o,s]=react.useState("straight"),[d,q]=react.useState("end"),[Z,A]=react.useState(false),[V,se]=react.useState(100),[_,ee]=react.useState(null),[m,le]=react.useState(null),[Ne,Se]=react.useState(false),[pe,K]=react.useState(false),[he,ce]=react.useState(null),[Ce,ye]=react.useState(null),[fe,me]=react.useState(false),[Me,w]=react.useState(null),[x,oe]=react.useState(null),O=react.useRef(null),G=react.useRef(0),ie=react.useRef(null),ze=react.useRef(p);ze.current=p;let Be=react.useRef(y);Be.current=y,react.useEffect(()=>{if(!l.current)return;let t=new drawuiCore.Editor(l.current,{theme:n?{primary:n,editBorder:n,selection:{outline:n,handleStroke:n,handleFill:"#ffffff",outlineFill:drawuiCore.hexToRgba(n,.1),shadow:n}}:void 0,language:i,shapes:u,persist:!u});f.current=t,v(t),window.__drawuiEditor=t,Be.current?.(t),a&&t.setActiveTool(a);let g=t.subscribe(()=>{I(t.getActiveTool());let H=t.getSelectedIds();D(H.length);let T=t.getShapes().filter(xe=>H.includes(xe.id)&&(xe.type==="line"||xe.type==="arrow"));if(ue(T.length>0),T.length>0&&T[0].connectionType?s(T[0].connectionType):T.length>0&&s("straight"),T.length>0){let xe=T.find(at=>at.type==="arrow");xe&&(q(xe.arrowHead??"end"),A(xe.dashed??false));}se(Math.round(t.getCamera().getZoom()*100)),Se(t.canUndo()),K(t.canRedo());let we=t.getSelectedUml();ce(we),we||w(null);let Ve=t.getSelectedMindMap();ye(Ve),t.getMindMapEditingShapeId()||me(false),ze.current?.(t.getData());}),Y=t.subscribeNotifications(H=>{le(H),O.current&&clearTimeout(O.current),O.current=setTimeout(()=>le(null),2e3);}),R=t.subscribeUi(H=>{H.kind==="shapeTypeMenu"&&oe({x:H.screenX,y:H.screenY,context:H.context,existingArrowId:H.existingArrowId,defaultShapeType:H.defaultShapeType});});return ()=>{g(),Y(),R(),O.current&&clearTimeout(O.current),cancelAnimationFrame(G.current),t.dispose();}},[a]),react.useEffect(()=>{if(!n)return;let t=C.current;t&&(t.style.setProperty("--dw-primary",n),t.style.setProperty("--dw-primary-hover",drawuiCore.shadeColor(n,-0.12)),t.style.setProperty("--dw-primary-weak",drawuiCore.hexToRgba(n,.1)),t.style.setProperty("--dw-primary-contrast","#ffffff"),t.style.setProperty("--dw-shadow-primary",`0 2px 8px ${drawuiCore.hexToRgba(n,.3)}`)),f.current?.setTheme({primary:n,editBorder:n,selection:{outline:n,handleStroke:n,handleFill:"#ffffff",outlineFill:drawuiCore.hexToRgba(n,.1),shadow:n}});},[n]),react.useEffect(()=>{drawuiCore.setLanguage(i),f.current?.setLanguage(i);},[i]);let Ae=react.useCallback(t=>{f.current?.setActiveTool(t);},[]),Oe=react.useCallback(()=>{f.current?.zoomIn();},[]),Ue=react.useCallback(()=>{f.current?.zoomOut();},[]),h=react.useCallback(()=>{f.current?.resetZoom();},[]),N=react.useCallback(()=>{let t=!b;z(t),f.current?.setShowGrid(t);},[b]),L=react.useCallback(()=>{f.current?.undo();},[]),E=react.useCallback(()=>{f.current?.redo();},[]),$=react.useCallback(t=>{f.current?.downloadImage("drawui",t,{background:"#ffffff"});},[]),F=react.useCallback(t=>{let g=f.current,Y=l.current;if(!g||!Y)return;if(g.isPointerDown()){ie.current!==null&&(ie.current=null,ee(null));return}let R=t.clientX,H=t.clientY;cancelAnimationFrame(G.current),G.current=requestAnimationFrame(()=>{let be=Y.getBoundingClientRect(),T=R-be.left,we=H-be.top,Ve=T+12,xe=we+12,at=g.getSelectedUml()?.id,$e=g.getUmlRowAtScreenPoint({x:T,y:we});if($e&&$e.shape.id!==at&&$e.text){ie.current!==$e.text&&(ie.current=$e.text,ee({text:$e.text,x:Ve,y:xe}));return}let We=g.getShapeAtScreenPoint({x:T,y:we});We&&We.text?ie.current!==We.text&&(ie.current=We.text,ee({text:We.text,x:Ve,y:xe})):ie.current!==null&&(ie.current=null,ee(null));});},[]),ge=react.useCallback(()=>{ee(null);},[]),Ke=react.useCallback(t=>{let g=f.current,Y=l.current;if(!g||!Y)return;let R=Y.getBoundingClientRect(),H=t.clientX-R.left,be=t.clientY-R.top,T=g.getUmlRowAtScreenPoint({x:H,y:be});if(T){w(T.shape.id);return}let we=g.getMindMapNodeAtScreenPoint({x:H,y:be});we&&g.beginMindMapEdit(we.shapeId,we.nodeId);},[]),Ee=react.useCallback(()=>{oe(null);},[]);return jsxRuntime.jsxs("div",{ref:C,className:`drawui-canvas-board ${e}`,children:[jsxRuntime.jsx("canvas",{ref:l,className:"drawui-canvas",onMouseMove:F,onMouseLeave:ge,onDoubleClick:Ke}),_&&jsxRuntime.jsx("div",{className:"drawui-tooltip",style:{left:_.x,top:_.y},children:_.text}),jsxRuntime.jsx(it,{activeTool:B,onToolChange:Ae,showGrid:b,onToggleGrid:N,canUndo:Ne,canRedo:pe,onUndo:L,onRedo:E,onExport:$}),jsxRuntime.jsx(lt,{onZoomIn:Oe,onZoomOut:Ue,onReset:h,zoomLevel:V}),jsxRuntime.jsx(It,{editor:c,selectedCount:k,hasLineSelection:P,currentConnectionType:o,currentArrowHead:d,currentDashed:Z}),jsxRuntime.jsx(Dt,{editor:c,umlClass:he,editing:Me}),jsxRuntime.jsx(Ut,{editor:c,panelOpen:fe,onOpenPanel:()=>me(true)}),fe&&jsxRuntime.jsx(Zt,{editor:c,mindMap:Ce}),jsxRuntime.jsx(Ft,{editor:c}),x&&jsxRuntime.jsx(Vt,{editor:c,x:x.x,y:x.y,context:x.context,existingArrowId:x.existingArrowId,defaultShapeType:x.defaultShapeType,onClose:Ee}),jsxRuntime.jsxs("div",{className:"drawui-status-bar",children:[jsxRuntime.jsx("div",{className:"drawui-status-item",children:jsxRuntime.jsx("span",{children:drawuiCore.t(to[B])})}),jsxRuntime.jsx("div",{className:"drawui-status-item",children:jsxRuntime.jsx("span",{children:k===0?drawuiCore.t("status.none"):drawuiCore.t("status.selected",{n:k})})}),jsxRuntime.jsx("div",{className:"drawui-status-item",children:jsxRuntime.jsxs("span",{children:[V,"%"]})})]}),m&&jsxRuntime.jsxs("div",{className:"drawui-toast",children:[jsxRuntime.jsx("svg",{className:"drawui-toast-icon",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("polyline",{points:"20 6 9 17 4 12"})}),m]})]})}exports.CanvasBoard=no;exports.Toolbar=it;exports.ZoomControl=lt;
|
|
1
|
+
'use strict';var react=require('react'),drawuiCore=require('drawui-core'),jsxRuntime=require('react/jsx-runtime');function q(){let[n,e]=react.useState(drawuiCore.getLanguage());return react.useEffect(()=>drawuiCore.subscribeLanguage(()=>e(drawuiCore.getLanguage())),[]),n}var Wt=["#ffeb3b","#22c55e","#3b82f6","#ec4899","#8b5cf6","#f97316"],_t="drawui:highlighterColor";function rt(){if(typeof window>"u")return drawuiCore.DEFAULT_HIGHLIGHTER_COLOR;try{let n=window.localStorage.getItem(_t);return n&&/^#[0-9a-fA-F]{6}$/.test(n)?n.toLowerCase():drawuiCore.DEFAULT_HIGHLIGHTER_COLOR}catch{return drawuiCore.DEFAULT_HIGHLIGHTER_COLOR}}function Zt(n){if(!(typeof window>"u"))try{window.localStorage.setItem(_t,n);}catch{}}var ye=n=>`${n.x.toFixed(1)},${n.y.toFixed(1)}`,Gt=(n,e)=>{let t=e*Math.PI/180;return {x:n.x*Math.cos(t)-n.y*Math.sin(t),y:n.x*Math.sin(t)+n.y*Math.cos(t)}},Ye={x:Math.SQRT1_2,y:-Math.SQRT1_2},kt={x:4.6,y:19.4},Je={x:19,y:5};function Mt(n,e,t){let r={x:-t.y,y:t.x},u=s=>({x:e.x-t.x*s,y:e.y-t.y*s}),p=(s,i)=>({x:s.x+r.x*i,y:s.y+r.y*i});switch(n){case "end":{let s=u(5.6);return jsxRuntime.jsx("polygon",{points:`${ye(e)} ${ye(p(s,2.7))} ${ye(p(s,-2.7))}`,fill:"currentColor",stroke:"none"})}case "inheritance":case "realization":{let s=u(8.6);return jsxRuntime.jsx("polygon",{points:`${ye(e)} ${ye(p(s,3.5))} ${ye(p(s,-3.5))}`,fill:"none"})}case "aggregation":case "composition":{let s=u(4.3),i=u(8.6);return jsxRuntime.jsx("polygon",{points:`${ye(e)} ${ye(p(s,2.7))} ${ye(i)} ${ye(p(s,-2.7))}`,fill:n==="composition"?"currentColor":"none",stroke:"currentColor"})}case "dependency":{let s=Gt({x:-t.x,y:-t.y},30),i=Gt({x:-t.x,y:-t.y},-30);return jsxRuntime.jsx("path",{d:`M ${ye({x:e.x+s.x*5.8,y:e.y+s.y*5.8})} L ${ye(e)} L ${ye({x:e.x+i.x*5.8,y:e.y+i.y*5.8})}`,fill:"none"})}default:return null}}function Me(n,e){let t=e||n==="dependency"||n==="realization",r=t?{x:Je.x-Ye.x*8.6,y:Je.y-Ye.y*8.6}:Je,u={x:-Ye.x,y:-Ye.y};return jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",width:"18",height:"18",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("line",{x1:kt.x,y1:kt.y,x2:r.x,y2:r.y,strokeDasharray:t?"3 2.6":void 0}),(n==="end"||n==="both")&&Mt("end",Je,Ye),(n==="start"||n==="both")&&Mt("end",kt,u),n!=="none"&&n!=="start"&&n!=="end"&&n!=="both"?Mt(n,Je,Ye):null]})}var at=n=>jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",width:"18",height:"18",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("path",{d:n})}),So=[{type:"straight",labelKey:"style.connection.straight",icon:at("M3 12h18")},{type:"polyline",labelKey:"style.connection.polyline",icon:at("M4 8 C 12 8, 12 16, 20 16")},{type:"orthogonal",labelKey:"style.connection.orthogonal",icon:at("M5 5v14h14")},{type:"curve",labelKey:"style.connection.curve",icon:at("M3 13 C 6 7, 9 7, 12 12 C 15 17, 18 17, 21 11")}],Ft=[{key:"none",arrowHead:"none",dashed:false,labelKey:"style.arrowhead.none",icon:Me("none",false)},{key:"end",arrowHead:"end",dashed:false,labelKey:"style.arrowhead.end",icon:Me("end",false)},{key:"start",arrowHead:"start",dashed:false,labelKey:"style.arrowhead.start",icon:Me("start",false)},{key:"both",arrowHead:"both",dashed:false,labelKey:"style.arrowhead.both",icon:Me("both",false)},{key:"none-dashed",arrowHead:"none",dashed:true,labelKey:"style.arrowhead.none-dashed",icon:Me("none",true)},{key:"both-dashed",arrowHead:"both",dashed:true,labelKey:"style.arrowhead.both-dashed",icon:Me("both",true)}],Yt=[{key:"inheritance",arrowHead:"inheritance",dashed:false,labelKey:"style.arrowhead.inheritance",icon:Me("inheritance",false)},{key:"composition",arrowHead:"composition",dashed:false,labelKey:"style.arrowhead.composition",icon:Me("composition",false)},{key:"aggregation",arrowHead:"aggregation",dashed:false,labelKey:"style.arrowhead.aggregation",icon:Me("aggregation",false)},{key:"dependency",arrowHead:"dependency",dashed:true,labelKey:"style.arrowhead.dependency",icon:Me("dependency",true)},{key:"realization",arrowHead:"realization",dashed:true,labelKey:"style.arrowhead.realization",icon:Me("realization",true)}],Vt=[...Ft,...Yt];function Co(n,e){let t=Vt.find(r=>r.arrowHead===n&&r.dashed===e);return t?t.key:Vt.find(r=>r.arrowHead===n)?.key}var st=react.memo(function({connectionType:e,arrowHead:t,dashed:r,onConnectionTypeChange:u,onArrowStyleChange:p,onOptionHover:s,onOptionLeave:i}){q();let M=Co(t,r),f=c=>jsxRuntime.jsx("div",{className:"drawui-connection-row",children:c.map(b=>jsxRuntime.jsxs("button",{className:`drawui-connection-btn${M===b.key?" active":""}`,onClick:()=>p(b),"data-drawui-tip":s?void 0:drawuiCore.t(b.labelKey),onMouseEnter:s?P=>s(b.labelKey,P.currentTarget):void 0,onMouseLeave:s?i:void 0,"aria-label":drawuiCore.t(b.labelKey),type:"button",children:[jsxRuntime.jsx("span",{className:"drawui-connection-icon",children:b.icon}),jsxRuntime.jsx("span",{className:"drawui-connection-label",children:drawuiCore.t(b.labelKey)})]},b.key))});return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:"drawui-style-popover-title",children:drawuiCore.t("style.connection")}),jsxRuntime.jsx("div",{className:"drawui-connection-row",children:So.map(c=>jsxRuntime.jsxs("button",{className:`drawui-connection-btn${e===c.type?" active":""}`,onClick:()=>u(c.type),"data-drawui-tip":s?void 0:drawuiCore.t(c.labelKey),onMouseEnter:s?b=>s(c.labelKey,b.currentTarget):void 0,onMouseLeave:s?i:void 0,"aria-label":drawuiCore.t(c.labelKey),type:"button",children:[jsxRuntime.jsx("span",{className:"drawui-connection-icon",children:c.icon}),jsxRuntime.jsx("span",{className:"drawui-connection-label",children:drawuiCore.t(c.labelKey)})]},c.type))}),jsxRuntime.jsx("div",{className:"drawui-style-popover-title",children:drawuiCore.t("style.arrow")}),f(Ft),jsxRuntime.jsx("div",{className:"drawui-style-popover-title",children:drawuiCore.t("style.uml")}),f(Yt)]})});var Xt=[{type:"rectangle",icon:jsxRuntime.jsx("rect",{x:"3",y:"5",width:"18",height:"14",rx:"0"})},{type:"rounded-rectangle",icon:jsxRuntime.jsx("rect",{x:"3",y:"5",width:"18",height:"14",rx:"4"})},{type:"circle",icon:jsxRuntime.jsx("circle",{cx:"12",cy:"12",r:"8"})},{type:"ellipse",icon:jsxRuntime.jsx("ellipse",{cx:"12",cy:"12",rx:"9",ry:"6"})},{type:"diamond",icon:jsxRuntime.jsx("path",{d:"M12 3L21 12L12 21L3 12Z"})},{type:"triangle",icon:jsxRuntime.jsx("path",{d:"M12 4L20 19L4 19Z"})},{type:"hexagon",icon:jsxRuntime.jsx("path",{d:"M12 3L20 7.5V16.5L12 21L4 16.5V7.5Z"})},{type:"parallelogram",icon:jsxRuntime.jsx("path",{d:"M7 5L20 5L17 19L4 19Z"})},{type:"trapezoid",icon:jsxRuntime.jsx("path",{d:"M6 5L18 5L21 19L3 19Z"})},{type:"pentagon",icon:jsxRuntime.jsx("path",{d:"M12 3L21 10L17.5 21L6.5 21L3 10Z"})},{type:"octagon",icon:jsxRuntime.jsx("path",{d:"M8 3L16 3L21 8L21 16L16 21L8 21L3 16L3 8Z"})},{type:"star",icon:jsxRuntime.jsx("path",{d:"M12 2L14.5 8.5L21 9L16 13.5L17.5 20L12 16.5L6.5 20L8 13.5L3 9L9.5 8.5Z"})},{type:"cylinder",icon:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("ellipse",{cx:"12",cy:"6.5",rx:"6",ry:"2.8"}),jsxRuntime.jsx("path",{d:"M6 6.5v11c0 1.5 2.7 2.8 6 2.8s6-1.3 6-2.8v-11"})]})},{type:"cloud",icon:jsxRuntime.jsx("path",{d:"M7 18.5h9.4a3.4 3.4 0 0 0 .3-6.8 5 5 0 0 0-9.5-1.2A3.9 3.9 0 0 0 7 18.5Z"})},{type:"heart",icon:jsxRuntime.jsx("path",{d:"M12 20.3S4.6 15.7 4.6 10.5A4.1 4.1 0 0 1 12 7.6a4.1 4.1 0 0 1 7.4 2.9c0 5.2-7.4 9.8-7.4 9.8Z"})},{type:"block-arrow-right",icon:jsxRuntime.jsx("path",{d:"M3 9h9V5l9 7-9 7v-4H3Z"})},{type:"block-arrow-left",icon:jsxRuntime.jsx("path",{d:"M21 9h-9V5L3 12l9 7v-4h9Z"})},{type:"block-arrow-up",icon:jsxRuntime.jsx("path",{d:"M9 21v-9H5l7-9 7 9h-4v9Z"})},{type:"block-arrow-down",icon:jsxRuntime.jsx("path",{d:"M9 3v9H5l7 9 7-9h-4V3Z"})},{type:"block-arrow-double",icon:jsxRuntime.jsx("path",{d:"M2 12l4.5-6v3.5h11V6L22 12l-4.5 6v-3.5h-11V18Z"})},{type:"right-triangle",icon:jsxRuntime.jsx("path",{d:"M4 4v16h16Z"})},{type:"cross",icon:jsxRuntime.jsx("path",{d:"M9.5 3h5v6.5H21v5h-6.5V21h-5v-6.5H3v-5h6.5Z"})},{type:"speech-rect",icon:jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsx("path",{d:"M3 5h18v11H8l-3.2 3.2V16H3Z"})})},{type:"speech-round",icon:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("ellipse",{cx:"12",cy:"10.5",rx:"9",ry:"6.5"}),jsxRuntime.jsx("path",{d:"M8 16.2 6 21l5-3.4"})]})},{type:"cube",icon:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("path",{d:"M12 3 20 7.5v9L12 21 4 16.5v-9Z"}),jsxRuntime.jsx("path",{d:"M4 7.5 12 12l8-4.5M12 12v9"})]})},{type:"sector",icon:jsxRuntime.jsx("path",{d:"M12 3a9 9 0 1 0 9 9h-9Z"})},{type:"delay",icon:jsxRuntime.jsx("path",{d:"M3 5h12a7 7 0 0 1 0 14H3Z"})},{type:"predefined-process",icon:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("rect",{x:"3",y:"5",width:"18",height:"14"}),jsxRuntime.jsx("path",{d:"M6.5 5v14M17.5 5v14"})]})},{type:"document",icon:jsxRuntime.jsx("path",{d:"M3 5h18v10.5c-5 3.5-13-3.5-18 0Z"})},{type:"stadium",icon:jsxRuntime.jsx("rect",{x:"3",y:"6.5",width:"18",height:"11",rx:"5.5"})},{type:"chevron",icon:jsxRuntime.jsx("path",{d:"M2 4h9l9 8-9 8H2l8-8Z"})},{type:"brace-left",icon:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("path",{d:"M1 1C3.9 1 5.1 2.4 5.1 5.1c0 3.7 1.2 6.9 2.9 6.9-1.7 0-2.9 3.2-2.9 6.9 0 2.7-1.2 4.1-4.1 4.1"}),jsxRuntime.jsx("path",{d:"M12 9.6h10M12 14.4h10"})]})},{type:"brace-right",icon:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("path",{d:"M23 1c-2.9 0-4.1 1.4-4.1 4.1 0 3.7-1.2 6.9-2.9 6.9 1.7 0 2.9 3.2 2.9 6.9 0 2.7 1.2 4.1 4.1 4.1"}),jsxRuntime.jsx("path",{d:"M2 9.6h10M2 14.4h10"})]})},{type:"uml-class",icon:jsxRuntime.jsxs(jsxRuntime.Fragment,{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"})]})},{type:"uml-interface",icon:jsxRuntime.jsxs(jsxRuntime.Fragment,{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"})]})},{type:"class-catalog",icon:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("rect",{x:"3",y:"5",width:"18",height:"14",rx:"1.5"}),jsxRuntime.jsx("line",{x1:"6.6",y1:"5",x2:"6.6",y2:"19"}),jsxRuntime.jsx("line",{x1:"17.4",y1:"5",x2:"17.4",y2:"19"})]})}],No=[{key:"basic",labelKey:"shapeGroup.basic",items:[{type:"rectangle"},{type:"rounded-rectangle"},{type:"stadium"},{type:"circle"},{type:"ellipse"},{type:"diamond"},{type:"triangle"},{type:"right-triangle"},{type:"hexagon"},{type:"parallelogram"},{type:"trapezoid"},{type:"pentagon"},{type:"octagon"},{type:"star"}]},{key:"flowchart",labelKey:"shapeGroup.flowchart",items:[{type:"rectangle",labelKey:"flow.process"},{type:"rounded-rectangle",labelKey:"flow.step"},{type:"stadium",labelKey:"flow.startEnd"},{type:"diamond",labelKey:"flow.decision"},{type:"parallelogram",labelKey:"flow.data"},{type:"trapezoid",labelKey:"flow.manual"},{type:"hexagon",labelKey:"flow.preparation"},{type:"cylinder",labelKey:"flow.database"},{type:"delay",labelKey:"flow.delay"},{type:"predefined-process"},{type:"document"},{type:"block-arrow-right"},{type:"block-arrow-left"},{type:"block-arrow-up"},{type:"block-arrow-down"},{type:"block-arrow-double"}]},{key:"uml",labelKey:"shapeGroup.uml",items:[{type:"uml-class"},{type:"uml-interface"},{type:"rounded-rectangle",labelKey:"class.plain"},{type:"class-catalog"}]},{key:"other",labelKey:"shapeGroup.other",items:[{type:"cylinder"},{type:"cloud"},{type:"heart"},{type:"cross"},{type:"cube"},{type:"sector"},{type:"chevron"},{type:"speech-rect"},{type:"speech-round"},{type:"brace-left"},{type:"brace-right"}]}],Eo=new Map(Xt.map(n=>[n.type,n.icon])),Ro=new Set(Xt.map(n=>n.type)),Ho=[{type:"arrow",icon:"M5 12h14M12 5l7 7-7 7",labelKey:"toolbar.arrow"},{type:"text",icon:"M4 7V4h16v3M9 20h6M12 4v16",labelKey:"toolbar.text"}],Io="M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3Z",Po="M14 3l7 7-3 3-7-7 3-3zM9 8L3 14v3h3l6-6",Ao=[{type:"eraser",icon:"M7 21l-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21M22 21H7M5 11l9 9",labelKey:"toolbar.eraser"}],Ko="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",St=react.memo(function({activeTool:e,onToolChange:t,showGrid:r,onToggleGrid:u,canUndo:p=false,canRedo:s=false,onUndo:i,onRedo:M,onExport:f,onHighlighterColorChange:c,arrowStyle:b,onArrowStyleChange:P}){let[B,v]=react.useState(false),[$,x]=react.useState(false),[A,K]=react.useState(null),[fe,a]=react.useState(false),[w,d]=react.useState(false),[j,_]=react.useState(rt),O=react.useRef(null),Z=react.useRef(null),ee=react.useRef(null),G=react.useRef(null);q();let ce=[{format:"png",labelKey:"toolbar.export.png"},{format:"svg",labelKey:"toolbar.export.svg"},{format:"pdf",labelKey:"toolbar.export.pdf"}],g=()=>{O.current&&(clearTimeout(O.current),O.current=null),a(true);},te=()=>{O.current=window.setTimeout(()=>a(false),200);},ve=()=>{Z.current&&(clearTimeout(Z.current),Z.current=null),v(true);},me=()=>{Z.current=window.setTimeout(()=>{v(false),D();},200);},pe=()=>{ee.current&&(clearTimeout(ee.current),ee.current=null),x(true);},z=()=>{ee.current=window.setTimeout(()=>{x(false),D();},200);},de=(y,S)=>{let C=y.closest(".drawui-toolbar");if(!C)return;let k=y.getBoundingClientRect(),U=C.getBoundingClientRect(),V=k.bottom+46>window.innerHeight;K({label:S,x:k.left-U.left+k.width/2,y:V?k.top-U.top-8:k.bottom-U.top+8,above:V});},D=()=>K(null),ge=()=>{G.current&&(clearTimeout(G.current),G.current=null),d(true);},Se=()=>{G.current=window.setTimeout(()=>d(false),200);},be=y=>{_(y),Zt(y),c?.(y),t("highlighter");};return jsxRuntime.jsx("div",{className:"drawui-toolbar-container",children:jsxRuntime.jsxs("div",{className:"drawui-toolbar",children:[jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${e==="select"?"active":""}`,onClick:()=>t("select"),"data-drawui-tip":drawuiCore.t("toolbar.select"),children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("circle",{cx:"12",cy:"12",r:"3"})})}),jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${e==="hand"?"active":""}`,onClick:()=>t("hand"),"data-drawui-tip":drawuiCore.t("toolbar.hand"),children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("path",{d:Ko})})}),jsxRuntime.jsx("div",{className:"drawui-toolbar-divider"}),jsxRuntime.jsxs("div",{className:"drawui-toolbar-dropdown",onMouseEnter:ve,onMouseLeave:me,children:[jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${Ro.has(e)?"active":""}`,onClick:()=>{t("rounded-rectangle"),v(false),D();},"data-drawui-tip":B?void 0:drawuiCore.t("toolbar.shapes"),children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("rect",{x:"3",y:"5",width:"18",height:"14",rx:"4",ry:"4"})})}),B&&jsxRuntime.jsx("div",{className:"drawui-toolbar-shape-grid drawui-shape-menu",children:jsxRuntime.jsx("div",{className:"drawui-shape-menu-scroll",children:No.map(y=>jsxRuntime.jsxs("div",{className:"drawui-shape-group",children:[jsxRuntime.jsx("div",{className:"drawui-shape-group-title",children:drawuiCore.t(y.labelKey)}),jsxRuntime.jsx("div",{className:"drawui-shape-group-grid",children:y.items.map(S=>{let C=S.labelKey??`tool.${S.type}`;return jsxRuntime.jsx("button",{type:"button",className:`drawui-toolbar-shape-item ${e===S.type?"active":""}`,onClick:()=>{t(S.type),v(false),D();},onMouseEnter:k=>de(k.currentTarget,C),onMouseLeave:D,"aria-label":drawuiCore.t(C),children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:Eo.get(S.type)})},`${y.key}-${S.type}`)})})]},y.key))})})]}),jsxRuntime.jsx("div",{className:"drawui-toolbar-divider"}),jsxRuntime.jsxs("div",{className:"drawui-toolbar-dropdown",onMouseEnter:pe,onMouseLeave:z,children:[jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${e==="arrow"?"active":""}`,onClick:()=>{t("arrow"),x(false),D();},"data-drawui-tip":$?void 0:drawuiCore.t("toolbar.arrow"),children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("path",{d:"M5 12h14M12 5l7 7-7 7"})})}),$&&jsxRuntime.jsx("div",{className:"drawui-toolbar-shape-grid drawui-arrow-menu",onPointerDown:y=>{y.target.closest("button")||(x(false),D());},children:jsxRuntime.jsx(st,{connectionType:b?.connectionType??"straight",arrowHead:b?.arrowHead??"end",dashed:!!b?.dashed,onConnectionTypeChange:y=>{P?.({connectionType:y}),t("arrow"),x(false),D();},onArrowStyleChange:y=>{P?.({arrowHead:y.arrowHead,dashed:y.dashed}),t("arrow"),x(false),D();},onOptionHover:(y,S)=>de(S,y),onOptionLeave:D})})]}),Ho.filter(y=>y.type!=="arrow").map(y=>jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${e===y.type?"active":""}`,onClick:()=>t(y.type),"data-drawui-tip":drawuiCore.t(y.labelKey),children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("path",{d:y.icon})})},y.type)),jsxRuntime.jsx("div",{className:"drawui-toolbar-divider"}),jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${e==="pen"?"active":""}`,onClick:()=>t("pen"),"data-drawui-tip":drawuiCore.t("toolbar.pen"),children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("path",{d:Io})})}),jsxRuntime.jsxs("div",{className:"drawui-toolbar-dropdown",onMouseEnter:ge,onMouseLeave:Se,children:[jsxRuntime.jsxs("button",{className:`drawui-toolbar-button ${e==="highlighter"?"active":""}`,onClick:()=>t("highlighter"),"data-drawui-tip":w?void 0:drawuiCore.t("toolbar.highlighter"),children:[jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("path",{d:Po})}),jsxRuntime.jsx("span",{className:"drawui-toolbar-color-chip",style:{background:j}})]}),w&&jsxRuntime.jsx("div",{className:"drawui-toolbar-shape-grid drawui-toolbar-highlighter-grid",children:Wt.map(y=>jsxRuntime.jsx("button",{type:"button","aria-label":y,className:`drawui-highlighter-swatch${j.toLowerCase()===y.toLowerCase()?" active":""}`,style:{background:y},onClick:()=>be(y)},y))})]}),jsxRuntime.jsx("div",{className:"drawui-toolbar-divider"}),Ao.map(y=>jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${e===y.type?"active":""}`,onClick:()=>t(y.type),"data-drawui-tip":drawuiCore.t(y.labelKey),children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("path",{d:y.icon})})},y.type)),jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${e==="mind-map"?"active":""}`,onClick:()=>t("mind-map"),"data-drawui-tip":drawuiCore.t("toolbar.mind-map"),children:jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("circle",{cx:"5",cy:"12",r:"2.4"}),jsxRuntime.jsx("path",{d:"M7.4 12h3.6"}),jsxRuntime.jsx("path",{d:"M11 12c0-2.6 1.6-4.4 3.4-4.4"}),jsxRuntime.jsx("path",{d:"M11 12c0 2.6 1.6 4.4 3.4 4.4"}),jsxRuntime.jsx("circle",{cx:"17.4",cy:"7.6",r:"1.7"}),jsxRuntime.jsx("circle",{cx:"17.4",cy:"16.4",r:"1.7"}),jsxRuntime.jsx("circle",{cx:"15.6",cy:"12",r:"1.7"})]})}),jsxRuntime.jsx("div",{className:"drawui-toolbar-divider"}),jsxRuntime.jsx("button",{className:`drawui-toolbar-button ${r?"active":""}`,onClick:u,"data-drawui-tip":drawuiCore.t("toolbar.grid"),children:jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("rect",{x:"3",y:"3",width:"7",height:"7",rx:"1"}),jsxRuntime.jsx("rect",{x:"14",y:"3",width:"7",height:"7",rx:"1"}),jsxRuntime.jsx("rect",{x:"14",y:"14",width:"7",height:"7",rx:"1"}),jsxRuntime.jsx("rect",{x:"3",y:"14",width:"7",height:"7",rx:"1"})]})}),jsxRuntime.jsx("div",{className:"drawui-toolbar-divider"}),jsxRuntime.jsx("button",{className:"drawui-toolbar-button",onClick:i,disabled:!p,style:p?void 0:{opacity:.4,cursor:"default"},"data-drawui-tip":drawuiCore.t("toolbar.undo"),children:jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("path",{d:"M3 7v6h6"}),jsxRuntime.jsx("path",{d:"M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"})]})}),jsxRuntime.jsx("button",{className:"drawui-toolbar-button",onClick:M,disabled:!s,style:s?void 0:{opacity:.4,cursor:"default"},"data-drawui-tip":drawuiCore.t("toolbar.redo"),children:jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("path",{d:"M21 7v6h-6"}),jsxRuntime.jsx("path",{d:"M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3L21 13"})]})}),jsxRuntime.jsx("div",{className:"drawui-toolbar-divider"}),jsxRuntime.jsxs("div",{className:"drawui-toolbar-dropdown",onMouseEnter:g,onMouseLeave:te,children:[jsxRuntime.jsx("button",{className:"drawui-toolbar-button","data-drawui-tip":fe?void 0:drawuiCore.t("toolbar.export"),children:jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("path",{d:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"}),jsxRuntime.jsx("polyline",{points:"7 10 12 15 17 10"}),jsxRuntime.jsx("line",{x1:"12",y1:"15",x2:"12",y2:"3"})]})}),fe&&jsxRuntime.jsx("div",{className:"drawui-toolbar-shape-grid drawui-toolbar-export-grid",children:ce.map(y=>jsxRuntime.jsx("button",{className:"drawui-toolbar-shape-item drawui-toolbar-export-item",onClick:()=>{f?.(y.format),a(false);},"data-drawui-tip":drawuiCore.t(y.labelKey),children:drawuiCore.t(y.labelKey)},y.format))})]}),A&&jsxRuntime.jsx("div",{className:`drawui-shape-tip ${A.above?"is-above":"is-below"}`,style:{left:A.x,top:A.y},children:drawuiCore.t(A.label)})]})})});var Lt=react.memo(function({onZoomIn:e,onZoomOut:t,onReset:r,zoomLevel:u=100}){return q(),jsxRuntime.jsxs("div",{className:"drawui-zoom-control",children:[jsxRuntime.jsx("button",{className:"drawui-zoom-button",onClick:e,"data-drawui-tip":drawuiCore.t("zoom.in"),children:jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("line",{x1:"12",y1:"5",x2:"12",y2:"19"}),jsxRuntime.jsx("line",{x1:"5",y1:"12",x2:"19",y2:"12"})]})}),jsxRuntime.jsxs("div",{className:"drawui-zoom-level",children:[u,"%"]}),jsxRuntime.jsx("button",{className:"drawui-zoom-button",onClick:t,"data-drawui-tip":drawuiCore.t("zoom.out"),children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsxRuntime.jsx("line",{x1:"12",y1:"5",x2:"12",y2:"19"})})}),jsxRuntime.jsx("button",{className:"drawui-zoom-button",onClick:r,"data-drawui-tip":drawuiCore.t("zoom.reset"),children:jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("path",{d:"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"}),jsxRuntime.jsx("path",{d:"M3 3v5h5"})]})})]})});var Jt=["#ffffff","#f1f5f9","#e2e8f0","#ede9fe","#dbeafe","#e0e7ff","#dcfce7","#fef9c3","#fee2e2"],Qt=["#0f172a","#475569","#94a3b8","#8b5cf6","#3b82f6","#1d4ed8","#16a34a","#eab308","#dc2626"],Uo=Jt.filter(n=>n!=="#f1f5f9"),Wo=[...Uo,...Qt],_o=[...Jt,...Qt],eo=15,to="drawui:customColors";function Zo(){if(typeof window>"u")return [];try{let n=window.localStorage.getItem(to);if(!n)return [];let e=JSON.parse(n);return Array.isArray(e)?e.filter(t=>typeof t=="string").slice(-eo):[]}catch{return []}}function Go(n){if(!(typeof window>"u"))try{window.localStorage.setItem(to,JSON.stringify(n));}catch{}}var jt=[{key:"fill",labelKey:"style.fill",hasTransparent:true,hasOpacity:true},{key:"stroke",labelKey:"style.stroke",hasTransparent:false,hasOpacity:true},{key:"text",labelKey:"style.text",hasTransparent:false},{key:"highlight",labelKey:"style.highlight",hasTransparent:true,hasOpacity:true}],qt=(n,e)=>!!n&&!!e&&n.toLowerCase()===e.toLowerCase(),et=10,Be=12,Ke=n=>!n||n==="transparent",oo=react.memo(function({editor:e,selectedCount:t,hasLineSelection:r,currentConnectionType:u,currentArrowHead:p,currentDashed:s}){q();let i=!!e?.getEditingShapeId(),[M,f]=react.useState(null),[c,b]=react.useState(null),[,P]=react.useState(0),B=react.useRef(null),v=react.useRef(null),$=react.useRef(null),[x,A]=react.useState({tw:168,th:42,pw:228,ph:160}),[K,fe]=react.useState(Zo),a=react.useRef(null),w=react.useCallback(l=>{let L=l.trim().toLowerCase();/^#[0-9a-f]{6}$/.test(L)&&fe(we=>{let h=we.filter(E=>E!==L);for(h.push(L);h.length>eo;)h.shift();return Go(h),h});},[]);if(react.useEffect(()=>{let l=a.current;if(!l)return;let L=()=>{l.value&&w(l.value);};return l.addEventListener("change",L),()=>l.removeEventListener("change",L)},[w,c]),react.useEffect(()=>{if(!e)return;let l=e.subscribe(()=>P(L=>(L+1)%1e6));return ()=>{l();}},[e]),react.useEffect(()=>{b(null);},[t,i]),react.useEffect(()=>{if(!c)return;let l=L=>{B.current&&!B.current.contains(L.target)&&b(null);};return document.addEventListener("pointerdown",l,true),()=>document.removeEventListener("pointerdown",l,true)},[c]),react.useLayoutEffect(()=>{let l=v.current?.offsetWidth??x.tw,L=v.current?.offsetHeight??x.th,we=$.current?.offsetWidth??x.pw,h=$.current?.offsetHeight??x.ph;A(E=>E.tw===l&&E.th===L&&E.pw===we&&E.ph===h?E:{tw:l,th:L,pw:we,ph:h});}),!e||t===0||i)return null;let d=e.getSelectedIds(),_=e.getShapes().filter(l=>d.includes(l.id)),O=_[0],Z=O?.id??"",ee=O?.style.fillColor,G=O?.style.strokeColor??"#1f2937",ce=O?.textColor??"#1f2937",g=O?.highlightColor,te={fill:ee,stroke:G,text:ce,highlight:g},ve={fill:O?.style.fillOpacity??1,stroke:O?.style.strokeOpacity??1,highlight:O?.highlightOpacity??1},me=l=>M&&M.key===`${Z}:${l}`?M.value:ve[l]??1,pe=(l,L)=>{switch(l){case "stroke":e.updateSelectedShapesStyle({strokeColor:L});break;case "fill":e.updateSelectedShapesStyle({fillColor:L});break;case "text":e.updateSelectedShapesText({textColor:L});break;case "highlight":e.updateSelectedShapesText({highlightColor:L});break}},z=(l,L)=>{f({key:`${Z}:${l}`,value:L}),l==="highlight"?e.updateSelectedShapesText({highlightOpacity:L}):l==="stroke"?e.updateSelectedShapesStyle({strokeOpacity:L}):e.updateSelectedShapesStyle({fillOpacity:L});},de=l=>e.updateConnectionType(l),D=l=>e.updateArrowStyle({arrowHead:l.arrowHead,dashed:l.dashed}),ge=!!r&&_.length>0&&_.every(l=>l.type==="line"||l.type==="arrow"),Se=_.length>0&&_.every(l=>l.type==="text"),be=ge?jt.filter(l=>l.key==="stroke"):jt,y=l=>l.key==="stroke"&&ge?"style.line":l.labelKey,S=c&&c!=="more"?be.find(l=>l.key===c):void 0,C=!!c&&(c==="more"||c==="prefix"||!!S),k=e.getCamera(),U=drawuiCore.getContentBounds(_,0),V=k.pageToScreen({x:U.x,y:U.y}),oe=k.pageToScreen({x:U.x+U.width,y:U.y+U.height}),ke=window.innerWidth,Oe=window.innerHeight,he=oe.y+et,We=V.y-et,_e=x.th+(C?et+x.ph:0),je=he+_e<=Oe-Be,m=We-_e>=Be,R=je||!m,H=(V.x+oe.x)/2,I=(l,L,we)=>Math.max(L,Math.min(l,Math.max(L,we))),J=I(H-x.tw/2,Be,ke-x.tw-Be),Y=R?he:We-x.th,ze=I(H-x.pw/2,Be,ke-x.pw-Be),Ze=C?I(R?Y+x.th+et:Y-et-x.ph,Be,Oe-x.ph-Be):0;return jsxRuntime.jsxs("div",{className:"drawui-style-floating",ref:B,children:[jsxRuntime.jsxs("div",{className:"drawui-style-toolbar",ref:v,style:{left:J,top:Y},children:[be.map(l=>jsxRuntime.jsxs("button",{className:`drawui-style-tool-btn${c===l.key?" active":""}`,onClick:()=>b(c===l.key?null:l.key),"data-drawui-tip":drawuiCore.t(y(l)),type:"button",children:[l.key==="fill"&&jsxRuntime.jsx("span",{className:`drawui-st-swatch${Ke(ee)?" drawui-st-none":""}`,style:Ke(ee)?void 0:{background:ee}}),l.key==="stroke"&&(ge?jsxRuntime.jsx("span",{className:`drawui-st-line${Ke(G)?" drawui-st-line-none":""}`,style:Ke(G)?void 0:{background:G}}):jsxRuntime.jsx("span",{className:`drawui-st-frame${Ke(G)?" drawui-st-frame-none":""}`,style:Ke(G)?void 0:{borderColor:G}})),l.key==="text"&&jsxRuntime.jsx("span",{className:"drawui-st-text",style:{color:ce},children:"A"}),l.key==="highlight"&&jsxRuntime.jsx("span",{className:`drawui-st-hl${Ke(g)?" drawui-st-none":""}`,style:Ke(g)?void 0:{background:g},children:"A"})]},l.key)),r&&jsxRuntime.jsx("button",{className:`drawui-style-tool-btn${c==="more"?" active":""}`,onClick:()=>b(c==="more"?null:"more"),"data-drawui-tip":drawuiCore.t("style.connection"),type:"button",children:"\u22EF"}),Se&&jsxRuntime.jsx("button",{className:`drawui-style-tool-btn${c==="prefix"?" active":""}`,onClick:()=>b(c==="prefix"?null:"prefix"),"data-drawui-tip":drawuiCore.t("style.prefix"),type:"button",children:jsxRuntime.jsxs("svg",{viewBox:"0 0 24 24",width:"18",height:"18",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",children:[jsxRuntime.jsx("circle",{cx:"5",cy:"8",r:"1.7",fill:"currentColor",stroke:"none"}),jsxRuntime.jsx("circle",{cx:"5",cy:"16",r:"1.7",fill:"currentColor",stroke:"none"}),jsxRuntime.jsx("line",{x1:"10.5",y1:"8",x2:"20",y2:"8"}),jsxRuntime.jsx("line",{x1:"10.5",y1:"16",x2:"20",y2:"16"})]})})]}),C&&jsxRuntime.jsx("div",{className:"drawui-style-popover",ref:$,style:{left:ze,top:Ze},children:c==="prefix"?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:"drawui-style-popover-title",children:drawuiCore.t("style.prefix")}),jsxRuntime.jsx("div",{className:"drawui-muted-hint",children:drawuiCore.t("style.prefix.soon")})]}):S?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:"drawui-style-popover-title",children:drawuiCore.t(y(S))}),jsxRuntime.jsxs("div",{className:"drawui-color-row",children:[S.hasTransparent&&jsxRuntime.jsx("button",{className:`drawui-color-swatch drawui-color-swatch-transparent${Ke(te[S.key])?" active":""}`,onClick:()=>pe(S.key,"transparent"),"aria-label":drawuiCore.t("style.none"),type:"button"}),(S.hasTransparent?Wo:_o).map(l=>jsxRuntime.jsx("button",{className:`drawui-color-swatch${qt(l,te[S.key])?" active":""}`,style:{background:l},onClick:()=>pe(S.key,l),"aria-label":l,type:"button"},l)),K.map(l=>jsxRuntime.jsx("button",{className:`drawui-color-swatch drawui-color-custom${qt(l,te[S.key])?" active":""}`,style:{background:l},onClick:()=>pe(S.key,l),"aria-label":l,type:"button"},`custom-${l}`)),jsxRuntime.jsxs("span",{className:"drawui-color-swatch drawui-color-add","data-drawui-tip":drawuiCore.t("style.addColor"),children:["+",jsxRuntime.jsx("input",{ref:a,type:"color",defaultValue:"#3b82f6",className:"drawui-color-add-input","aria-label":drawuiCore.t("style.addColor")})]})]}),S.hasOpacity&&jsxRuntime.jsxs("div",{className:"drawui-opacity-row",children:[jsxRuntime.jsx("span",{className:"drawui-opacity-label",children:drawuiCore.t("style.opacity")}),jsxRuntime.jsx("input",{type:"range",min:0,max:100,value:Math.round(me(S.key)*100),onChange:l=>z(S.key,Number(l.target.value)/100),className:"drawui-opacity-slider"}),jsxRuntime.jsxs("span",{className:"drawui-opacity-value",children:[Math.round(me(S.key)*100),"%"]})]})]}):jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsx(st,{connectionType:u??"straight",arrowHead:p??"end",dashed:!!s,onConnectionTypeChange:de,onArrowStyleChange:D})})})]})});var Rt=14,ao=20,Jo=["#1f2937","#ef4444","#f97316","#facc15","#22c55e","#3b82f6","#8b5cf6","#ec4899","#9ca3af"],Qo=[12,14,16,18,20,24];function io(n,e,t){let r=n,u=t,p=r.charAt(0);if(r.length>1&&(p==="+"||p==="-"||p==="#"||p==="~")&&r.charAt(1)===" "&&(u=p,r=r.slice(2)),r=r.replace(/^\s+|\s+$/g,""),e==="attribute"){let b=r.indexOf(":");return b===-1?{visibility:u,name:r,type:"",params:"",returnType:""}:{visibility:u,name:r.slice(0,b).replace(/^\s+|\s+$/g,""),type:r.slice(b+1).replace(/^\s+|\s+$/g,""),params:"",returnType:""}}let s=r.indexOf("(");if(s===-1){let b=r.lastIndexOf(":");return b===-1?{visibility:u,name:r,type:"",params:"",returnType:""}:{visibility:u,name:r.slice(0,b).replace(/^\s+|\s+$/g,""),type:"",params:"",returnType:r.slice(b+1).replace(/^\s+|\s+$/g,"")}}let i=r.slice(0,s).replace(/^\s+|\s+$/g,""),M=r.indexOf(")",s);if(M===-1)return {visibility:u,name:i,type:"",params:r.slice(s+1).replace(/^\s+|\s+$/g,""),returnType:""};let f=r.slice(s+1,M).replace(/^\s+|\s+$/g,""),c=r.slice(M+1).replace(/^\s+|\s+$/g,"");return c.startsWith(":")&&(c=c.slice(1).replace(/^\s+|\s+$/g,"")),{visibility:u,name:i,type:"",params:f,returnType:c}}function en(n,e){let t=`${e.visibility} `;return n==="attribute"?`${t}${e.name}: ${e.type??""}`:`${t}${e.name}(${e.params??""}): ${e.returnType??""}`}var lo=react.memo(function({editor:e,umlClass:t,editing:r}){let[,u]=react.useState(0);q(),react.useEffect(()=>{if(!e)return;let m=e.subscribe(()=>u(R=>R+1));return ()=>{m();}},[e]);let[p,s]=react.useState(null),[i,M]=react.useState(false),f=react.useRef(null),c=react.useRef(null),b=react.useCallback((m,R)=>{f.current&&(clearTimeout(f.current),f.current=null),s({section:m,rowId:R}),M(false);},[]),P=react.useCallback(()=>{f.current&&clearTimeout(f.current),f.current=window.setTimeout(()=>{s(null),M(false);},150);},[]);if(!e||!t||r!==t.id)return null;let B=e.getCamera(),{id:v,x:$,y:x,width:A,height:K,className:fe,methods:a}=t,w=t.type==="uml-interface",d=w?[]:t.attributes,j=A/2,_=K/2,O=drawuiCore.UML_HEADER_HEIGHT,Z=drawuiCore.UML_LINE_HEIGHT,ee=drawuiCore.UML_PADDING_X,G=drawuiCore.UML_PADDING_Y,ce=w?0:d.length>0?d.length*Z+G*2:G*2,g=B.zoom,te=(A-ee*2)*g,ve=4*g,me=B.pageToScreen({x:$-j+ee,y:x}),pe=B.pageToScreen({x:$,y:x-_+O/2}),z=m=>B.pageToScreen({x:$,y:m}).y,de=Z*g,D=m=>x+(-_+O+G+Z/2+m*Z),ge=m=>x+(-_+O+ce+G+Z/2+m*Z),Se=x+(-_+O+ce),be=x+_,y={background:"#ffffff",borderWidth:1,borderStyle:"solid",borderColor:"transparent",outline:"none",padding:0,fontFamily:"sans-serif",boxSizing:"border-box"},S=(m,R)=>{let H=d.find(J=>J.id===m);if(!H)return;let I=io(R,"attribute",H.visibility);e.updateUmlClass(v,{attributes:d.map(J=>J.id===m?{...J,...I}:J)});},C=(m,R)=>{let H=a.find(Y=>Y.id===m);if(!H)return;let I=io(R,"method",H.visibility),J=a.map(Y=>Y.id===m?{...Y,...I}:Y);w?e.updateUmlInterface(v,{methods:J}):e.updateUmlClass(v,{methods:J});},k=(m,R,H)=>{c.current={section:m,from:R},H.dataTransfer.effectAllowed="move",H.dataTransfer.setData("text/plain",`${m}:${R}`);},U=m=>{m.preventDefault(),m.dataTransfer.dropEffect="move";},V=(m,R,H)=>{H.preventDefault();let I=c.current;!I||I.section!==m||(m==="attribute"?e.reorderUmlAttribute(v,I.from,R):e.reorderUmlMethod(v,I.from,R),c.current=null);},oe=(m,R,H,I)=>{let J=z(I),Y=p?.section===m&&p.rowId===H.id,ze=(H.fontSize||drawuiCore.UML_FONT_SIZE)*g,Ze=H.textColor||"#1f2937",l={position:"absolute",left:me.x-Rt*g-ve,top:J-de/2,width:Rt*g+ve+te+ao*g,height:de,display:"flex",alignItems:"center",gap:2,pointerEvents:"none",zIndex:53},L={...y,width:te,height:de-2,fontSize:ze,color:Ze,textDecoration:H.strikethrough?"line-through":"none",pointerEvents:"auto",...Y?{borderColor:"var(--dw-primary)"}:{}},we={width:Rt*g,height:de-2,cursor:"grab",color:"#9ca3af",display:"flex",alignItems:"center",justifyContent:"center",userSelect:"none",fontSize:12*g,lineHeight:1,opacity:Y?1:.55,pointerEvents:"auto"},h={width:ao*g,height:de-6,border:"none",background:"transparent",color:"#9ca3af",cursor:"pointer",borderRadius:3,fontSize:14*g,opacity:Y?1:.35,pointerEvents:"auto"};return jsxRuntime.jsxs("div",{style:l,onDragOver:U,onDrop:E=>V(m,R,E),children:[jsxRuntime.jsx("span",{style:we,draggable:true,onDragStart:E=>k(m,R,E),"data-drawui-tip":drawuiCore.t("uml.drag"),children:"\u22EE\u22EE"}),jsxRuntime.jsx("input",{style:L,value:en(m,H),onChange:E=>m==="attribute"?S(H.id,E.target.value):C(H.id,E.target.value),onFocus:()=>b(m,H.id),onBlur:P,spellCheck:false}),jsxRuntime.jsx("button",{style:h,onMouseDown:E=>E.preventDefault(),onClick:()=>{m==="attribute"?e.removeUmlAttribute(v,H.id):e.removeUmlMethod(v,H.id);},"data-drawui-tip":drawuiCore.t("uml.delete"),children:"\xD7"})]},H.id)},ke=(m,R,H)=>{let I=z(R),J=m==="attribute";return jsxRuntime.jsxs("button",{onMouseDown:Y=>Y.preventDefault(),onClick:()=>J?e.addUmlAttribute(v):e.addUmlMethod(v),className:"drawui-uml-add-row",style:{position:"absolute",left:me.x,top:I-9*g,height:18*g,padding:`0 ${6*g}px`,fontSize:11*g,lineHeight:1,border:"1px dashed #cbd5e1",background:"rgba(255,255,255,0.85)",color:"#64748b",borderRadius:3,cursor:"pointer",pointerEvents:"auto",display:"flex",alignItems:"center",gap:3,whiteSpace:"nowrap",zIndex:53},"data-drawui-tip":H,children:[jsxRuntime.jsx("span",{style:{fontSize:13*g,lineHeight:1},children:"+"}),jsxRuntime.jsx("span",{children:H})]},`add-${m}`)},Oe=()=>{if(!p||p.section==="className")return null;let m=p.section,R=p.rowId,I=(m==="attribute"?d:a).find(T=>T.id===R);if(!I)return null;let J=224*g,Y=30*g,ze=B.pageToScreen({x:$,y:x}).x,Ze=B.pageToScreen({x:$,y:x-_}).y,l=20*g,L=Ze-Y-l,we=ze-J/2,h=L+Y,E=I.textColor||"#1f2937",Ie=I.fontSize||drawuiCore.UML_FONT_SIZE,Ce=!!I.strikethrough;return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{style:{position:"absolute",left:ze-.5,top:h,width:1,height:l,background:"#d1d5db",pointerEvents:"none",zIndex:59}}),jsxRuntime.jsxs("div",{className:"drawui-uml-toolbar",style:{position:"absolute",left:we,top:L,width:J,height:Y,background:"#ffffff",border:"1px solid #e5e7eb",borderRadius:6,boxShadow:"0 4px 12px rgba(0, 0, 0, 0.1)",display:"flex",alignItems:"center",gap:4*g,padding:`0 ${6*g}px`,pointerEvents:"auto",zIndex:60,fontSize:12*g},onMouseDown:T=>T.preventDefault(),children:[jsxRuntime.jsxs("div",{style:{position:"relative"},children:[jsxRuntime.jsxs("button",{onClick:()=>M(T=>!T),className:"drawui-uml-toolbar-btn","data-drawui-tip":drawuiCore.t("uml.textColor"),style:{border:"none",background:"transparent",cursor:"pointer",padding:2,display:"flex",alignItems:"center",borderRadius:3},children:[jsxRuntime.jsx("span",{style:{fontWeight:700,color:E,fontSize:13*g,textDecoration:Ce?"line-through":"none"},children:"A"}),jsxRuntime.jsx("span",{style:{width:10*g,height:2*g,background:E,marginLeft:3,borderRadius:1}})]}),i&&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(v,m,I.id,{textColor:null}),M(false);},style:{width:14,height:14,border:"1px solid #e5e7eb",background:"transparent",cursor:"pointer",borderRadius:2},"data-drawui-tip":drawuiCore.t("uml.defaultColor")}),Jo.map(T=>jsxRuntime.jsx("button",{onClick:()=>{e.updateUmlRowStyle(v,m,I.id,{textColor:T}),M(false);},style:{width:14,height:14,border:"none",background:T,cursor:"pointer",borderRadius:2},"data-drawui-tip":T},T))]})]}),jsxRuntime.jsx("select",{value:Ie,onChange:T=>e.updateUmlRowStyle(v,m,I.id,{fontSize:Number(T.target.value)}),style:{border:"1px solid #e5e7eb",borderRadius:3,padding:`0 ${2*g}px`,fontSize:12*g,height:20*g,background:"#ffffff"},"data-drawui-tip":drawuiCore.t("uml.fontSize"),children:Qo.map(T=>jsxRuntime.jsx("option",{value:T,children:T},T))}),jsxRuntime.jsx("button",{onClick:()=>e.updateUmlRowStyle(v,m,I.id,{strikethrough:!Ce}),className:"drawui-uml-toolbar-btn","data-drawui-tip":drawuiCore.t("uml.strikethrough"),style:{border:"none",background:Ce?"var(--dw-primary-weak)":"transparent",cursor:"pointer",padding:2,borderRadius:3},children:jsxRuntime.jsx("span",{style:{fontWeight:700,fontSize:13*g,textDecoration:"line-through"},children:"A"})}),jsxRuntime.jsx("button",{onClick:()=>{m==="attribute"?e.removeUmlAttribute(v,I.id):e.removeUmlMethod(v,I.id),s(null);},className:"drawui-uml-toolbar-btn","data-drawui-tip":drawuiCore.t("uml.delete"),style:{border:"none",background:"transparent",cursor:"pointer",color:"#ef4444",padding:2,marginLeft:"auto",borderRadius:3},children:jsxRuntime.jsxs("svg",{width:14*g,height:14*g,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsxRuntime.jsx("polyline",{points:"3 6 5 6 21 6"}),jsxRuntime.jsx("path",{d:"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"}),jsxRuntime.jsx("path",{d:"M10 11v6"}),jsxRuntime.jsx("path",{d:"M14 11v6"}),jsxRuntime.jsx("path",{d:"M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"})]})})]})]})},he=B.pageToScreen({x:$-j,y:x}).x,We=B.pageToScreen({x:$,y:x-_}).y,_e=A*g,je=K*g;return jsxRuntime.jsxs("div",{style:{position:"absolute",inset:0,pointerEvents:"none",zIndex:50},children:[jsxRuntime.jsx("div",{style:{position:"absolute",left:he+1,top:We+1,width:Math.max(0,_e-2),height:Math.max(0,je-2),background:"#ffffff",pointerEvents:"none",zIndex:51}}),jsxRuntime.jsx("input",{style:{...y,position:"absolute",left:pe.x-te/2,top:pe.y-O*g/2+2,width:te,height:O*g-4,textAlign:"center",fontWeight:700,fontSize:(t.fontSize||drawuiCore.UML_FONT_SIZE)*g,color:t.textColor||"#1f2937",pointerEvents:"auto",zIndex:52,...p?.section==="className"?{borderColor:"var(--dw-primary)"}:{}},value:fe,onChange:m=>w?e.updateUmlInterface(v,{className:m.target.value}):e.updateUmlClass(v,{className:m.target.value}),onFocus:()=>b("className",""),onBlur:P,spellCheck:false}),!w&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[d.map((m,R)=>oe("attribute",R,m,D(R))),ke("attribute",Se,"\u5C5E\u6027")]}),a.map((m,R)=>oe("method",R,m,ge(R))),ke("method",be,drawuiCore.t("uml.method")),Oe()]})});var po=react.memo(function({editor:e,panelOpen:t,onOpenPanel:r}){let[,u]=react.useState(0);q(),react.useEffect(()=>{if(!e)return;let A=e.subscribe(()=>u(K=>K+1));return ()=>{A();}},[e]);let p=react.useRef(false),s=react.useRef(false);if(!e)return null;let i=e.getMindMapEditingShapeId();if(!i||t)return null;let M=e.getMindMapSelectedNode();if(!M||M.shapeId!==i)return null;let f=e.getMindMapNode(i,M.nodeId),c=e.getMindMapNodeScreenRect(i,M.nodeId);if(!f||!c)return null;let b=e.getCamera().getZoom(),P=drawuiCore.MINDMAP_FONT_SIZE*b,B=Math.max(100,c.width+24),v=c.height+8,$={position:"absolute",left:c.x+c.width/2,top:c.y-4,transform:"translateX(-50%)",width:B,height:v,border:"1.5px solid var(--dw-primary, #3b82f6)",borderRadius:6,background:"#ffffff",boxShadow:"0 2px 10px rgba(0,0,0,0.15)",outline:"none",padding:`0 ${(f.icon?24:12)*b}px`,fontFamily:"sans-serif",fontSize:P,color:"#1f2937",boxSizing:"border-box",pointerEvents:"auto",zIndex:55},x={position:"absolute",left:c.x+c.width+12,top:c.y+c.height/2-11,width:22,height:22,border:"1px solid #e5e7eb",background:"#ffffff",borderRadius:"50%",cursor:"pointer",color:"#6b7280",fontSize:13,lineHeight:1,display:"flex",alignItems:"center",justifyContent:"center",boxShadow:"0 1px 4px rgba(0,0,0,0.12)",pointerEvents:"auto",zIndex:55};return jsxRuntime.jsxs("div",{style:{position:"absolute",inset:0,pointerEvents:"none",zIndex:50},children:[jsxRuntime.jsx("input",{autoFocus:true,style:$,value:f.text,spellCheck:false,onChange:A=>{let K=!p.current;p.current=true,e.updateMindMapNode(i,M.nodeId,{text:A.target.value},K);},onBlur:()=>{if(s.current){s.current=false;return}e.exitMindMapEdit();},onKeyDown:A=>{A.key==="Enter"?A.target.blur():A.key==="Escape"&&e.exitMindMapEdit();}}),jsxRuntime.jsx("button",{style:x,"data-drawui-tip":drawuiCore.t("mindmap.more"),onMouseDown:A=>{A.preventDefault(),s.current=true,setTimeout(()=>{s.current=false;},300);},onClick:r,children:"\u22EF"})]})});var ho=[...drawuiCore.MINDMAP_COLORS,"#1f2937","#9ca3af"],yo=["\u{1F4A1}","\u2B50","\u{1F525}","\u{1F4CC}","\u2705","\u2757","\u26A0\uFE0F","\u{1F3F7}\uFE0F"],yn={position:"absolute",width:232,background:"rgba(255,255,255,0.96)",border:"1px solid #e5e7eb",borderRadius:8,boxShadow:"0 6px 20px rgba(0,0,0,0.12)",padding:"10px 12px",fontSize:12,color:"#1f2937",zIndex:70,boxSizing:"border-box",fontFamily:"sans-serif"},Ht={fontSize:11,color:"#6b7280",marginBottom:4,display:"block"},pt={display:"flex",gap:4,alignItems:"center",flexWrap:"wrap"},ht={border:"1px solid #e5e7eb",background:"#ffffff",borderRadius:5,padding:"3px 8px",fontSize:12,color:"#374151",cursor:"pointer",lineHeight:1.5},It={width:"100%",border:"1px solid #e5e7eb",borderRadius:5,padding:"4px 8px",fontSize:12,outline:"none",boxSizing:"border-box",background:"#ffffff",color:"#1f2937"},fo=react.memo(function({editor:e,mindMap:t}){let[,r]=react.useState(0);q(),react.useEffect(()=>{if(!e)return;let a=e.subscribe(()=>r(w=>w+1));return ()=>{a();}},[e]);let u=react.useRef(null);if(!e||!t||e.getMindMapEditingShapeId()!==t.id)return null;let p=e.getMindMapSelectedNode();if(!p||p.shapeId!==t.id)return null;let s=a=>{if(a.id===p.nodeId)return a;for(let w of a.children??[]){let d=s(w);if(d)return d}return null},i=s(t.root);if(!i)return null;let M=e.getCamera(),c=drawuiCore.layoutMindMap(t.root).positions.get(i.id);if(!c)return null;let b=M.zoom,P=M.pageToScreen({x:t.x+c.x,y:t.y+c.y}),B=P.x+c.width*b/2+14,v=P.y-80,x=Math.max(8,Math.min(B,(window.innerWidth||1024)-232-8)),A=Math.max(8,Math.min(v,(window.innerHeight||768)-320)),K=a=>{e.updateMindMapNode(t.id,i.id,a);},fe=!!i.id&&i.id!==t.root.id;return jsxRuntime.jsxs("div",{ref:u,style:{...yn,left:x,top:A},onMouseDown:a=>a.stopPropagation(),children:[jsxRuntime.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:8},children:[jsxRuntime.jsx("span",{style:{fontWeight:600,fontSize:12},children:drawuiCore.t("mindmap.nodeText")}),jsxRuntime.jsx("button",{onClick:()=>e.exitMindMapEdit(),"data-drawui-tip":drawuiCore.t("mindmap.close"),style:{border:"none",background:"transparent",cursor:"pointer",color:"#9ca3af",fontSize:14,lineHeight:1,padding:2},children:"\xD7"})]}),jsxRuntime.jsx("input",{style:{...It,marginBottom:8},value:i.text,onChange:a=>K({text:a.target.value}),spellCheck:false}),jsxRuntime.jsxs("div",{style:{...pt,marginBottom:10},children:[jsxRuntime.jsxs("button",{style:ht,onClick:()=>e.addMindMapChild(t.id,i.id),children:["+ ",drawuiCore.t("mindmap.addChild")]}),fe&&jsxRuntime.jsxs("button",{style:ht,onClick:()=>e.addMindMapSibling(t.id,i.id),children:["+ ",drawuiCore.t("mindmap.addSibling")]}),!!i.children?.length&&jsxRuntime.jsx("button",{style:ht,onClick:()=>e.toggleMindMapCollapse(t.id,i.id),children:i.collapsed?drawuiCore.t("mindmap.expand"):drawuiCore.t("mindmap.collapse")}),jsxRuntime.jsx("button",{style:{...ht,color:"#ef4444",borderColor:"#fecaca",marginLeft:"auto"},onClick:()=>e.deleteMindMapNode(t.id,i.id),children:drawuiCore.t("mindmap.deleteNode")})]}),jsxRuntime.jsx("span",{style:Ht,children:drawuiCore.t("mindmap.color")}),jsxRuntime.jsxs("div",{style:{...pt,marginBottom:10},children:[jsxRuntime.jsx("button",{"data-drawui-tip":drawuiCore.t("mindmap.levelColor"),onClick:()=>K({color:void 0}),style:{width:18,height:18,borderRadius:4,border:"1.5px solid #d1d5db",background:"conic-gradient(#ef4444, #f59e0b, #10b981, #3b82f6, #8b5cf6, #ec4899, #ef4444)",cursor:"pointer",flexShrink:0}}),ho.map(a=>jsxRuntime.jsx("button",{"data-drawui-tip":a,onClick:()=>K({color:a}),style:{width:18,height:18,borderRadius:4,border:i.color===a?"2px solid #111827":"1px solid #d1d5db",background:a,cursor:"pointer",flexShrink:0}},a))]}),jsxRuntime.jsx("span",{style:Ht,children:drawuiCore.t("mindmap.icon")}),jsxRuntime.jsxs("div",{style:{...pt,marginBottom:10},children:[jsxRuntime.jsx("button",{"data-drawui-tip":drawuiCore.t("mindmap.noIcon"),onClick:()=>K({icon:void 0}),style:{width:22,height:22,borderRadius:4,border:i.icon?"1px solid #d1d5db":"2px solid #111827",background:"#f9fafb",cursor:"pointer",fontSize:11,color:"#9ca3af",lineHeight:1},children:"\u2205"}),yo.map(a=>jsxRuntime.jsx("button",{onClick:()=>K({icon:a}),style:{width:22,height:22,borderRadius:4,border:i.icon===a?"2px solid #111827":"1px solid #d1d5db",background:"#f9fafb",cursor:"pointer",fontSize:13,lineHeight:1},children:a},a)),jsxRuntime.jsx("input",{placeholder:"\u270F\uFE0F",defaultValue:i.icon&&!yo.includes(i.icon)?i.icon:"",onKeyDown:a=>{if(a.key==="Enter"){let w=a.target.value.trim();K({icon:w||void 0});}},onBlur:a=>{let w=a.target.value.trim();w!==i.icon&&K({icon:w||void 0});},style:{...It,width:56,padding:"2px 4px",textAlign:"center"}})]}),jsxRuntime.jsx("span",{style:Ht,children:drawuiCore.t("mindmap.note")}),jsxRuntime.jsx("input",{style:{...It,marginBottom:6},value:i.note??"",placeholder:drawuiCore.t("mindmap.notePlaceholder"),onChange:a=>K({note:a.target.value||void 0}),spellCheck:false}),!!i.note&&jsxRuntime.jsxs("div",{style:{...pt,marginTop:4},children:[jsxRuntime.jsx("span",{style:{fontSize:11,color:"#6b7280"},children:drawuiCore.t("mindmap.noteColor")}),jsxRuntime.jsx("button",{"data-drawui-tip":drawuiCore.t("mindmap.noteColorDefault"),onClick:()=>K({noteColor:void 0}),style:{width:16,height:16,borderRadius:3,border:i.noteColor?"1px solid #d1d5db":"2px solid #111827",background:"repeating-conic-gradient(#ef4444 0% 25%, #f59e0b 0% 50%, #10b981 0% 75%, #3b82f6 0% 100%)",cursor:"pointer"}}),ho.map(a=>jsxRuntime.jsx("button",{onClick:()=>K({noteColor:a}),style:{width:16,height:16,borderRadius:3,border:i.noteColor===a?"2px solid #111827":"1px solid #d1d5db",background:a,cursor:"pointer"}},a))]})]})});var At=220,Kt=140,wn="#fafafa";function xn(n,e){let t=Math.min(n.x,e.x),r=Math.min(n.y,e.y),u=Math.max(n.x+n.width,e.x+e.width),p=Math.max(n.y+n.height,e.y+e.height);return {x:t,y:r,width:u-t,height:p-r}}function vn(n){return {x:n.x+n.width/2,y:n.y+n.height/2}}function kn(){return {x:0,y:0,width:0,height:0}}function Mn(n){let e=1/0,t=1/0,r=-1/0,u=-1/0,p=false;for(let s of n){let i=zt(s);i&&(p=true,i.x<e&&(e=i.x),i.y<t&&(t=i.y),i.x+i.width>r&&(r=i.x+i.width),i.y+i.height>u&&(u=i.y+i.height));}return p?{x:e,y:t,width:r-e,height:u-t}:null}function zt(n){switch(n.type){case "rectangle":case "rounded-rectangle":case "ellipse":case "diamond":case "triangle":case "hexagon":case "parallelogram":case "trapezoid":case "pentagon":case "octagon":case "star":case "cylinder":case "cloud":case "heart":case "block-arrow-right":case "block-arrow-left":case "block-arrow-up":case "block-arrow-down":case "block-arrow-double":case "right-triangle":case "cross":case "speech-rect":case "speech-round":case "cube":case "sector":case "delay":case "predefined-process":case "document":case "stadium":case "class-catalog":case "chevron":case "brace-left":case "brace-right":case "uml-class":case "uml-interface":case "mind-map":case "text":return {x:n.x-n.width/2,y:n.y-n.height/2,width:n.width,height:n.height};case "circle":return {x:n.x-n.radius,y:n.y-n.radius,width:n.radius*2,height:n.radius*2};case "line":case "arrow":{let e=n.points;if(!e||e.length===0)return null;let t=1/0,r=1/0,u=-1/0,p=-1/0;for(let s of e)s.x<t&&(t=s.x),s.y<r&&(r=s.y),s.x>u&&(u=s.x),s.y>p&&(p=s.y);return {x:t,y:r,width:u-t,height:p-r}}case "draw":{let e=n,t=e.width,r=e.height;if(typeof t=="number"&&typeof r=="number")return {x:e.x-t/2,y:e.y-r/2,width:t,height:r};let u=e.points;if(!u||u.length===0)return null;let p=1/0,s=1/0,i=-1/0,M=-1/0;for(let f of u){let c=f.x+e.x,b=f.y+e.y;c<p&&(p=c),b<s&&(s=b),c>i&&(i=c),b>M&&(M=b);}return {x:p,y:s,width:i-p,height:M-s}}default:return null}}function Sn(n){let e=n.getCamera(),t=e.screenToPage({x:0,y:0}),r=e.screenToPage({x:window.innerWidth,y:window.innerHeight});return {x:t.x,y:t.y,width:r.x-t.x,height:r.y-t.y}}function Cn(n,e,t){if(n.width<=0||n.height<=0)return {x:n.x-e/2,y:n.y-t/2,width:e,height:t};let r=e/t,u=n.width,p=u/r;p<n.height&&(p=n.height,u=p*r);let s=vn(n);return {x:s.x-u/2,y:s.y-p/2,width:u,height:p}}function Ot(n,e,t,r){let u=(n-t.left)/t.width,p=(e-t.top)/t.height;return {x:r.x+u*r.width,y:r.y+p*r.height}}var bo=react.memo(function({editor:e}){let t=react.useRef(null),r=react.useRef(null),[u,p]=react.useState(false),[s,i]=react.useState(100),[M,f]=react.useState(false),[c,b]=react.useState(false);q();let P=react.useRef(null),B=react.useRef(null);react.useLayoutEffect(()=>{let a=t.current,w=r.current;if(!a||!w)return;let d=window.devicePixelRatio||1;a.width=Math.round(At*d),a.height=Math.round(Kt*d),a.style.width=`${At}px`,a.style.height=`${Kt}px`;},[u]);let v=react.useCallback(()=>{let a=t.current,w=r.current;if(!a||!w||!e)return;let d=a.getContext("2d");if(!d)return;let j=At,_=Kt,O=a.width,Z=a.height,ee=e.getShapes(),G=new Set(e.getSelectedIds()),ce=drawuiCore.getTheme(),g=drawuiCore.hexToRgba(ce.text,.16),te=ce.primary,ve=drawuiCore.hexToRgba(ce.primary,.18),me=drawuiCore.hexToRgba(ce.primary,.85),pe=Mn(ee),z=Sn(e),de=pe?xn(pe,z):z.width>0?z:kn(),D=Cn(de,j,_);B.current=D;let ge=O/D.width,Se=Z/D.height,be=j/D.width;d.setTransform(1,0,0,1,0,0),d.fillStyle=wn,d.fillRect(0,0,O,Z),d.setTransform(ge,0,0,Se,-ge*D.x,-Se*D.y),d.fillStyle=g;for(let C of ee){let k=zt(C);k&&d.fillRect(k.x,k.y,k.width,k.height);}d.fillStyle=te;for(let C of ee){if(!G.has(C.id))continue;let k=zt(C);k&&d.fillRect(k.x,k.y,k.width,k.height);}d.fillStyle=ve,d.fillRect(z.x,z.y,z.width,z.height);let y=1.5/be;d.strokeStyle=me,d.lineWidth=y,d.lineJoin="round";let S=Math.min(z.width/6,z.height/6,6/be);if(d.beginPath(),S*be<1)d.rect(z.x,z.y,z.width,z.height);else {let C=z.x,k=z.y,U=z.width,V=z.height,oe=Math.min(S,U/2,V/2);d.moveTo(C+oe,k),d.lineTo(C+U-oe,k),d.quadraticCurveTo(C+U,k,C+U,k+oe),d.lineTo(C+U,k+V-oe),d.quadraticCurveTo(C+U,k+V,C+U-oe,k+V),d.lineTo(C+oe,k+V),d.quadraticCurveTo(C,k+V,C,k+V-oe),d.lineTo(C,k+oe),d.quadraticCurveTo(C,k,C+oe,k),d.closePath();}d.stroke(),d.setTransform(1,0,0,1,0,0);},[e]);react.useEffect(()=>{if(!e||u)return;v();let a=e.subscribe(v),w=drawuiCore.subscribeTheme(v),d=()=>v();return window.addEventListener("resize",d),()=>{a(),w(),window.removeEventListener("resize",d);}},[e,u,v]),react.useEffect(()=>{if(!e)return;let a=()=>{let d=e.getCamera().getZoom();i(Math.round(d*100));};a();let w=e.subscribe(a);return ()=>{w();}},[e]);let $=react.useCallback((a,w)=>{if(!e)return;let d=e.getCamera(),j=d.getZoom(),_=window.innerWidth/2,O=window.innerHeight/2,Z=d;Z.x=_-a*j,Z.y=O-w*j,e.requestRender();},[e]),x=a=>{if(!e||!r.current||a.button!==0)return;let w=r.current.getBoundingClientRect(),d=B.current;if(!d)return;let j=Ot(a.clientX,a.clientY,w,d);P.current={pointerId:a.pointerId,rect:{left:w.left,top:w.top,width:w.width,height:w.height},canvasBox:d},a.currentTarget.setPointerCapture(a.pointerId),b(true),$(j.x,j.y);},A=a=>{if(!c||!e||!P.current||!r.current)return;let w=P.current,d=Ot(a.clientX,a.clientY,w.rect,w.canvasBox);$(d.x,d.y);},K=a=>{if(c){b(false),P.current=null;try{a.currentTarget.releasePointerCapture(a.pointerId);}catch{}}},fe=a=>{if(!e||!r.current)return;let w=B.current;if(!w)return;let d=r.current.getBoundingClientRect(),j=Ot(a.clientX,a.clientY,d,w);$(j.x,j.y);};return jsxRuntime.jsxs("div",{className:`drawui-minimap ${u?"collapsed":""}`,children:[jsxRuntime.jsx("button",{className:"drawui-minimap-toggle",onClick:()=>p(a=>!a),"data-drawui-tip":u?drawuiCore.t("minimap.expand"):drawuiCore.t("minimap.collapse"),"data-drawui-tip-pos":"top","aria-label":u?drawuiCore.t("minimap.expand"):drawuiCore.t("minimap.collapse"),children:jsxRuntime.jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:u?jsxRuntime.jsx("polyline",{points:"9 6 15 12 9 18"}):jsxRuntime.jsx("polyline",{points:"15 6 9 12 15 18"})})}),!u&&jsxRuntime.jsxs("div",{className:"drawui-minimap-panel",children:[jsxRuntime.jsxs("div",{className:"drawui-minimap-header",children:[jsxRuntime.jsx("span",{className:"drawui-minimap-title",children:drawuiCore.t("minimap.title")}),jsxRuntime.jsxs("span",{className:"drawui-minimap-zoom",children:[s,"%"]})]}),jsxRuntime.jsx("div",{ref:r,className:"drawui-minimap-canvas-wrap",style:{cursor:c?"grabbing":M?"pointer":"default"},onPointerEnter:()=>f(true),onPointerLeave:()=>f(false),children:jsxRuntime.jsx("canvas",{ref:t,className:"drawui-minimap-canvas",onPointerDown:x,onPointerMove:A,onPointerUp:K,onPointerCancel:K,onDoubleClick:fe})})]})]})});var le=n=>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:n}),Nn=[{type:"rectangle",labelKey:"shape.rectangle",glyph:le(jsxRuntime.jsx("rect",{x:"4",y:"7",width:"16",height:"10",rx:"1"}))},{type:"rounded-rectangle",labelKey:"shape.rounded-rectangle",glyph:le(jsxRuntime.jsx("rect",{x:"4",y:"7",width:"16",height:"10",rx:"4"}))},{type:"circle",labelKey:"shape.circle",glyph:le(jsxRuntime.jsx("circle",{cx:"12",cy:"12",r:"5.5"}))},{type:"ellipse",labelKey:"shape.ellipse",glyph:le(jsxRuntime.jsx("ellipse",{cx:"12",cy:"12",rx:"7",ry:"4.5"}))},{type:"diamond",labelKey:"shape.diamond",glyph:le(jsxRuntime.jsx("path",{d:"M12 5 L19 12 L12 19 L5 12 Z"}))},{type:"triangle",labelKey:"shape.triangle",glyph:le(jsxRuntime.jsx("path",{d:"M12 4 L20 19 H4 Z"}))},{type:"hexagon",labelKey:"shape.hexagon",glyph:le(jsxRuntime.jsx("path",{d:"M12 3 L19.5 7.5 V16.5 L12 21 L4.5 16.5 V7.5 Z"}))},{type:"parallelogram",labelKey:"shape.parallelogram",glyph:le(jsxRuntime.jsx("path",{d:"M6 7 L19 7 L16 17 H7 Z"}))},{type:"trapezoid",labelKey:"shape.trapezoid",glyph:le(jsxRuntime.jsx("path",{d:"M7 6 H17 L20 18 H4 Z"}))},{type:"pentagon",labelKey:"shape.pentagon",glyph:le(jsxRuntime.jsx("path",{d:"M12 4 L19.5 9.5 L16.5 18.5 H7.5 L4.5 9.5 Z"}))},{type:"octagon",labelKey:"shape.octagon",glyph:le(jsxRuntime.jsx("path",{d:"M8 4 H16 L20 8 V16 L16 20 H8 L4 16 V8 Z"}))},{type:"star",labelKey:"shape.star",glyph:le(jsxRuntime.jsx("path",{d:"M12 3 L14 9.5 L20.5 10 L15.5 14 L17.5 20.5 L12 16.8 L6.5 20.5 L8.5 14 L3.5 10 L10 9.5 Z"}))},{type:"uml-class",labelKey:"shape.uml-class",glyph:le(jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("rect",{x:"3",y:"4",width:"18",height:"16",rx:"1"}),jsxRuntime.jsx("path",{d:"M3 9 H21"}),jsxRuntime.jsx("path",{d:"M3 15 H21"}),jsxRuntime.jsx("path",{d:"M6 6.5 H10"}),jsxRuntime.jsx("path",{d:"M6 12.5 H12"})]}))},{type:"uml-interface",labelKey:"shape.uml-interface",glyph:le(jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("rect",{x:"3",y:"4",width:"18",height:"16",rx:"1"}),jsxRuntime.jsx("path",{d:"M3 9 H21"}),jsxRuntime.jsx("path",{d:"M6 6.5 H10"}),jsxRuntime.jsx("path",{d:"M6 12.5 H12"})]}))},{type:"mind-map",labelKey:"shape.mind-map",glyph:le(jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("circle",{cx:"5",cy:"12",r:"2"}),jsxRuntime.jsx("path",{d:"M7 12h2.6"}),jsxRuntime.jsx("path",{d:"M9.6 12c0-2 1.2-3.4 2.6-3.4"}),jsxRuntime.jsx("path",{d:"M9.6 12c0 2 1.2 3.4 2.6 3.4"}),jsxRuntime.jsx("circle",{cx:"15.2",cy:"8.6",r:"1.3"}),jsxRuntime.jsx("circle",{cx:"15.2",cy:"15.4",r:"1.3"}),jsxRuntime.jsx("circle",{cx:"13.6",cy:"12",r:"1.3"})]}))}];function wo({editor:n,x:e,y:t,context:r,existingArrowId:u,defaultShapeType:p,onClose:s}){let i=react.useRef(null);q();let M=f=>{n?.createGeneratedConnection(r,{type:f,existingArrowId:u}),s();};return react.useEffect(()=>{let f=P=>{i.current&&!i.current.contains(P.target)&&s();},c=P=>{P.key==="Escape"&&(P.preventDefault(),s());},b=setTimeout(()=>{window.addEventListener("pointerdown",f,true),window.addEventListener("keydown",c,true);},0);return ()=>{clearTimeout(b),window.removeEventListener("pointerdown",f,true),window.removeEventListener("keydown",c,true);}},[s]),jsxRuntime.jsxs("div",{className:"drawui-gen-menu",ref:i,style:{left:e,top:t},children:[jsxRuntime.jsx("div",{className:"drawui-gen-menu-label",children:drawuiCore.t("menu.title")}),jsxRuntime.jsx("div",{className:"drawui-gen-shape-grid",children:Nn.map(f=>jsxRuntime.jsxs("button",{className:`drawui-gen-shape-btn${f.type===p?" drawui-gen-shape-active":""}`,onClick:()=>M(f.type),"data-drawui-tip":drawuiCore.t(f.labelKey),children:[f.glyph,jsxRuntime.jsx("span",{className:"drawui-gen-shape-label",children:drawuiCore.t(f.labelKey)})]},f.type))}),jsxRuntime.jsx("div",{className:"drawui-gen-menu-hint",children:drawuiCore.t("menu.cancel")})]})}var In={select:"tool.select",hand:"tool.hand",rectangle:"tool.rectangle","rounded-rectangle":"tool.rounded-rectangle",circle:"tool.circle",ellipse:"tool.ellipse",diamond:"tool.diamond",triangle:"tool.triangle",hexagon:"tool.hexagon",parallelogram:"tool.parallelogram",trapezoid:"tool.trapezoid",pentagon:"tool.pentagon",octagon:"tool.octagon",star:"tool.star",cylinder:"tool.cylinder",cloud:"tool.cloud",heart:"tool.heart","block-arrow-right":"tool.block-arrow-right","block-arrow-left":"tool.block-arrow-left","block-arrow-up":"tool.block-arrow-up","block-arrow-down":"tool.block-arrow-down","block-arrow-double":"tool.block-arrow-double","right-triangle":"tool.right-triangle",cross:"tool.cross","speech-rect":"tool.speech-rect","speech-round":"tool.speech-round",cube:"tool.cube",sector:"tool.sector",delay:"tool.delay","predefined-process":"tool.predefined-process",document:"tool.document",stadium:"tool.stadium","class-catalog":"tool.class-catalog",chevron:"tool.chevron","brace-left":"tool.brace-left","brace-right":"tool.brace-right","uml-class":"tool.uml-class","uml-interface":"tool.uml-interface",line:"tool.line",arrow:"tool.arrow",text:"tool.text",draw:"tool.draw",pen:"tool.pen",highlighter:"tool.highlighter",eraser:"tool.eraser","mind-map":"tool.mind-map"};function Pn({initialTool:n="select",className:e="",themeColor:t,language:r="zh-CN",data:u,onChange:p,onReady:s}){let i=react.useRef(null),M=react.useRef(null),f=react.useRef(null),[c,b]=react.useState(null);q();let[P,B]=react.useState(n),[v,$]=react.useState(false),[x,A]=react.useState(0),[K,fe]=react.useState(false),[a,w]=react.useState("straight"),[d,j]=react.useState("end"),[_,O]=react.useState(false),[Z,ee]=react.useState(void 0),[G,ce]=react.useState(100),[g,te]=react.useState(null),[ve,me]=react.useState(null),[pe,z]=react.useState(false),[de,D]=react.useState(false),[ge,Se]=react.useState(null),[be,y]=react.useState(null),[S,C]=react.useState(false),[k,U]=react.useState(null),[V,oe]=react.useState(null),ke=react.useRef(null),Oe=react.useRef(0),he=react.useRef(null),We=react.useRef(p);We.current=p;let _e=react.useRef(s);_e.current=s,react.useEffect(()=>{if(!i.current)return;let h=new drawuiCore.Editor(i.current,{theme:t?{primary:t,editBorder:t,selection:{outline:t,handleStroke:t,handleFill:"#ffffff",outlineFill:drawuiCore.hexToRgba(t,.1),shadow:t}}:void 0,language:r,shapes:u,persist:!u});f.current=h,b(h),window.__drawuiEditor=h,h.setHighlighterColor(rt()),_e.current?.(h),n&&h.setActiveTool(n);let E=h.subscribe(()=>{B(h.getActiveTool());let T=h.getSelectedIds();A(T.length);let ue=h.getShapes().filter(Te=>T.includes(Te.id)&&(Te.type==="line"||Te.type==="arrow"));if(fe(ue.length>0),ue.length>0&&ue[0].connectionType?w(ue[0].connectionType):ue.length>0&&w("straight"),ue.length>0){let Te=ue.find(xt=>xt.type==="arrow");Te&&(j(Te.arrowHead??"end"),O(Te.dashed??false));}ce(Math.round(h.getCamera().getZoom()*100)),ee(h.getArrowStyle()),z(h.canUndo()),D(h.canRedo());let Le=h.getSelectedUml();Se(Le),Le||U(null);let nt=h.getSelectedMindMap();y(nt),h.getMindMapEditingShapeId()||C(false),We.current?.(h.getData());}),Ie=h.subscribeNotifications(T=>{me(T),ke.current&&clearTimeout(ke.current),ke.current=setTimeout(()=>me(null),2e3);}),Ce=h.subscribeUi(T=>{T.kind==="shapeTypeMenu"&&oe({x:T.screenX,y:T.screenY,context:T.context,existingArrowId:T.existingArrowId,defaultShapeType:T.defaultShapeType});});return ()=>{E(),Ie(),Ce(),ke.current&&clearTimeout(ke.current),cancelAnimationFrame(Oe.current),h.dispose();}},[n]),react.useEffect(()=>{if(!t)return;let h=M.current;h&&(h.style.setProperty("--dw-primary",t),h.style.setProperty("--dw-primary-hover",drawuiCore.shadeColor(t,-0.12)),h.style.setProperty("--dw-primary-weak",drawuiCore.hexToRgba(t,.1)),h.style.setProperty("--dw-primary-contrast","#ffffff"),h.style.setProperty("--dw-shadow-primary",`0 2px 8px ${drawuiCore.hexToRgba(t,.3)}`)),f.current?.setTheme({primary:t,editBorder:t,selection:{outline:t,handleStroke:t,handleFill:"#ffffff",outlineFill:drawuiCore.hexToRgba(t,.1),shadow:t}});},[t]),react.useEffect(()=>{drawuiCore.setLanguage(r),f.current?.setLanguage(r);},[r]);let je=react.useCallback(h=>{f.current?.setActiveTool(h);},[]),m=react.useCallback(()=>{f.current?.zoomIn();},[]),R=react.useCallback(()=>{f.current?.zoomOut();},[]),H=react.useCallback(()=>{f.current?.resetZoom();},[]),I=react.useCallback(()=>{let h=!v;$(h),f.current?.setShowGrid(h);},[v]),J=react.useCallback(()=>{f.current?.undo();},[]),Y=react.useCallback(()=>{f.current?.redo();},[]),ze=react.useCallback(h=>{f.current?.downloadImage("drawui",h,{background:"#ffffff"});},[]),Ze=react.useCallback(h=>{let E=f.current,Ie=i.current;if(!E||!Ie)return;if(E.isPointerDown()){he.current!==null&&(he.current=null,te(null));return}let Ce=h.clientX,T=h.clientY;cancelAnimationFrame(Oe.current),Oe.current=requestAnimationFrame(()=>{let Ve=Ie.getBoundingClientRect(),ue=Ce-Ve.left,Le=T-Ve.top,nt=ue+12,Te=Le+12,xt=E.getSelectedUml()?.id,Fe=E.getUmlRowAtScreenPoint({x:ue,y:Le});if(Fe&&Fe.shape.id!==xt&&Fe.text){he.current!==Fe.text&&(he.current=Fe.text,te({text:Fe.text,x:nt,y:Te}));return}let qe=E.getShapeAtScreenPoint({x:ue,y:Le});qe&&qe.text?he.current!==qe.text&&(he.current=qe.text,te({text:qe.text,x:nt,y:Te})):he.current!==null&&(he.current=null,te(null));});},[]),l=react.useCallback(()=>{te(null);},[]),L=react.useCallback(h=>{let E=f.current,Ie=i.current;if(!E||!Ie)return;let Ce=Ie.getBoundingClientRect(),T=h.clientX-Ce.left,Ve=h.clientY-Ce.top,ue=E.getUmlRowAtScreenPoint({x:T,y:Ve});if(ue){U(ue.shape.id);return}let Le=E.getMindMapNodeAtScreenPoint({x:T,y:Ve});Le&&E.beginMindMapEdit(Le.shapeId,Le.nodeId);},[]),we=react.useCallback(()=>{oe(null);},[]);return jsxRuntime.jsxs("div",{ref:M,className:`drawui-canvas-board ${e}`,children:[jsxRuntime.jsx("canvas",{ref:i,className:"drawui-canvas",onMouseMove:Ze,onMouseLeave:l,onDoubleClick:L}),g&&jsxRuntime.jsx("div",{className:"drawui-tooltip",style:{left:g.x,top:g.y},children:g.text}),jsxRuntime.jsx(St,{activeTool:P,onToolChange:je,showGrid:v,onToggleGrid:I,canUndo:pe,canRedo:de,onUndo:J,onRedo:Y,onExport:ze,onHighlighterColorChange:h=>f.current?.setHighlighterColor(h),arrowStyle:Z,onArrowStyleChange:h=>f.current?.setArrowStyle(h)}),jsxRuntime.jsx(Lt,{onZoomIn:m,onZoomOut:R,onReset:H,zoomLevel:G}),jsxRuntime.jsx(oo,{editor:c,selectedCount:x,hasLineSelection:K,currentConnectionType:a,currentArrowHead:d,currentDashed:_}),jsxRuntime.jsx(lo,{editor:c,umlClass:ge,editing:k}),jsxRuntime.jsx(po,{editor:c,panelOpen:S,onOpenPanel:()=>C(true)}),S&&jsxRuntime.jsx(fo,{editor:c,mindMap:be}),jsxRuntime.jsx(bo,{editor:c}),V&&jsxRuntime.jsx(wo,{editor:c,x:V.x,y:V.y,context:V.context,existingArrowId:V.existingArrowId,defaultShapeType:V.defaultShapeType,onClose:we}),jsxRuntime.jsxs("div",{className:"drawui-status-bar",children:[jsxRuntime.jsx("div",{className:"drawui-status-item",children:jsxRuntime.jsx("span",{children:drawuiCore.t(In[P])})}),jsxRuntime.jsx("div",{className:"drawui-status-item",children:jsxRuntime.jsx("span",{children:x===0?drawuiCore.t("status.none"):drawuiCore.t("status.selected",{n:x})})}),jsxRuntime.jsx("div",{className:"drawui-status-item",children:jsxRuntime.jsxs("span",{children:[G,"%"]})})]}),ve&&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"})}),ve]})]})}exports.CanvasBoard=Pn;exports.Toolbar=St;exports.ZoomControl=Lt;
|
package/dist/index.d.cts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { ToolType, Language, Shape, EditorData, Editor, ExportFormat } from 'drawui-core';
|
|
2
|
+
import { ToolType, Language, Shape, EditorData, Editor, ExportFormat, ArrowStyle } from 'drawui-core';
|
|
3
3
|
export { ToolType } from 'drawui-core';
|
|
4
4
|
|
|
5
5
|
interface CanvasBoardProps {
|
|
@@ -28,6 +28,11 @@ interface ToolbarProps {
|
|
|
28
28
|
onUndo?: () => void;
|
|
29
29
|
onRedo?: () => void;
|
|
30
30
|
onExport?: (format: ExportFormat) => void;
|
|
31
|
+
/** 荧光笔选色后回调(宿主据此同步给 editor) */
|
|
32
|
+
onHighlighterColorChange?: (color: string) => void;
|
|
33
|
+
/** 新建箭头的默认样式(工具栏「箭头」下拉里展示/修改) */
|
|
34
|
+
arrowStyle?: ArrowStyle;
|
|
35
|
+
onArrowStyleChange?: (updates: Partial<ArrowStyle>) => void;
|
|
31
36
|
}
|
|
32
37
|
declare const Toolbar: react.NamedExoticComponent<ToolbarProps>;
|
|
33
38
|
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { ToolType, Language, Shape, EditorData, Editor, ExportFormat } from 'drawui-core';
|
|
2
|
+
import { ToolType, Language, Shape, EditorData, Editor, ExportFormat, ArrowStyle } from 'drawui-core';
|
|
3
3
|
export { ToolType } from 'drawui-core';
|
|
4
4
|
|
|
5
5
|
interface CanvasBoardProps {
|
|
@@ -28,6 +28,11 @@ interface ToolbarProps {
|
|
|
28
28
|
onUndo?: () => void;
|
|
29
29
|
onRedo?: () => void;
|
|
30
30
|
onExport?: (format: ExportFormat) => void;
|
|
31
|
+
/** 荧光笔选色后回调(宿主据此同步给 editor) */
|
|
32
|
+
onHighlighterColorChange?: (color: string) => void;
|
|
33
|
+
/** 新建箭头的默认样式(工具栏「箭头」下拉里展示/修改) */
|
|
34
|
+
arrowStyle?: ArrowStyle;
|
|
35
|
+
onArrowStyleChange?: (updates: Partial<ArrowStyle>) => void;
|
|
31
36
|
}
|
|
32
37
|
declare const Toolbar: react.NamedExoticComponent<ToolbarProps>;
|
|
33
38
|
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import {memo,useState,useRef,useCallback,useEffect,useLayoutEffect}from'react';import {t,getContentBounds,UML_FONT_SIZE,MINDMAP_COLORS,layoutMindMap,getTheme,hexToRgba,subscribeTheme,getLanguage,subscribeLanguage,UML_LINE_HEIGHT,UML_PADDING_Y,UML_PADDING_X,UML_HEADER_HEIGHT,MINDMAP_FONT_SIZE,Editor,shadeColor,setLanguage}from'drawui-core';import {jsx,jsxs,Fragment}from'react/jsx-runtime';function X(){let[a,e]=useState(getLanguage());return useEffect(()=>subscribeLanguage(()=>e(getLanguage())),[]),a}var Lt=[{type:"rectangle",icon:jsx("rect",{x:"3",y:"5",width:"18",height:"14",rx:"0"})},{type:"rounded-rectangle",icon:jsx("rect",{x:"3",y:"5",width:"18",height:"14",rx:"4"})},{type:"circle",icon:jsx("circle",{cx:"12",cy:"12",r:"8"})},{type:"ellipse",icon:jsx("ellipse",{cx:"12",cy:"12",rx:"9",ry:"6"})},{type:"diamond",icon:jsx("path",{d:"M12 3L21 12L12 21L3 12Z"})},{type:"triangle",icon:jsx("path",{d:"M12 4L20 19L4 19Z"})},{type:"hexagon",icon:jsx("path",{d:"M12 3L20 7.5V16.5L12 21L4 16.5V7.5Z"})},{type:"parallelogram",icon:jsx("path",{d:"M7 5L20 5L17 19L4 19Z"})},{type:"trapezoid",icon:jsx("path",{d:"M6 5L18 5L21 19L3 19Z"})},{type:"pentagon",icon:jsx("path",{d:"M12 3L21 10L17.5 21L6.5 21L3 10Z"})},{type:"octagon",icon:jsx("path",{d:"M8 3L16 3L21 8L21 16L16 21L8 21L3 16L3 8Z"})},{type:"star",icon:jsx("path",{d:"M12 2L14.5 8.5L21 9L16 13.5L17.5 20L12 16.5L6.5 20L8 13.5L3 9L9.5 8.5Z"})}],Jt=new Set(Lt.map(a=>a.type)),Qt=[{type:"arrow",icon:"M5 12h14M12 5l7 7-7 7",labelKey:"toolbar.arrow"},{type:"text",icon:"M4 7V4h16v3M9 20h6M12 4v16",labelKey:"toolbar.text"}],en=[{type:"pen",icon:"M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3Z",labelKey:"toolbar.pen"},{type:"highlighter",icon:"M14 3l7 7-3 3-7-7 3-3zM9 8L3 14v3h3l6-6",labelKey:"toolbar.highlighter"}],tn=[{type:"eraser",icon:"M7 21l-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21M22 21H7M5 11l9 9",labelKey:"toolbar.eraser"}],nn="M18 11V6.5a1.5 1.5 0 0 0-3 0v3.5a1.5 1.5 0 0 0-3 0V3.5a1.5 1.5 0 0 0-3 0v6.5a1.5 1.5 0 0 0-3 0V14a8 8 0 0 0 16 0v-3a1.5 1.5 0 0 0-3 0",it=memo(function({activeTool:e,onToolChange:n,showGrid:i,onToggleGrid:u,canUndo:p=false,canRedo:y=false,onUndo:l,onRedo:C,onExport:f}){let[c,v]=useState(false),[B,I]=useState(false),b=useRef(null),z=useRef(null);X();let k=[{format:"png",labelKey:"toolbar.export.png"},{format:"svg",labelKey:"toolbar.export.svg"},{format:"pdf",labelKey:"toolbar.export.pdf"}],D=()=>{b.current&&(clearTimeout(b.current),b.current=null),I(true);},P=()=>{b.current=window.setTimeout(()=>I(false),200);},ue=()=>{z.current&&(clearTimeout(z.current),z.current=null),v(true);},o=()=>{z.current=window.setTimeout(()=>{v(false);},200);};return jsx("div",{className:"drawui-toolbar-container",children:jsxs("div",{className:"drawui-toolbar",children:[jsx("button",{className:`drawui-toolbar-button ${e==="select"?"active":""}`,onClick:()=>n("select"),"data-drawui-tip":t("toolbar.select"),children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("circle",{cx:"12",cy:"12",r:"3"})})}),jsx("button",{className:`drawui-toolbar-button ${e==="hand"?"active":""}`,onClick:()=>n("hand"),"data-drawui-tip":t("toolbar.hand"),children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("path",{d:nn})})}),jsx("div",{className:"drawui-toolbar-divider"}),jsxs("div",{className:"drawui-toolbar-dropdown",onMouseEnter:ue,onMouseLeave:o,children:[jsx("button",{className:`drawui-toolbar-button ${Jt.has(e)?"active":""}`,onClick:()=>n("rounded-rectangle"),"data-drawui-tip":t("toolbar.shapes"),children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("rect",{x:"3",y:"5",width:"18",height:"14",rx:"4",ry:"4"})})}),c&&jsx("div",{className:"drawui-toolbar-shape-grid",children:Lt.map(s=>jsx("button",{className:`drawui-toolbar-shape-item ${e===s.type?"active":""}`,onClick:()=>{n(s.type),v(false);},"data-drawui-tip":t("tool."+s.type),children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:s.icon})},s.type))})]}),jsx("div",{className:"drawui-toolbar-divider"}),Qt.map(s=>jsx("button",{className:`drawui-toolbar-button ${e===s.type?"active":""}`,onClick:()=>n(s.type),"data-drawui-tip":t(s.labelKey),children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("path",{d:s.icon})})},s.type)),jsx("div",{className:"drawui-toolbar-divider"}),en.map(s=>jsx("button",{className:`drawui-toolbar-button ${e===s.type?"active":""}`,onClick:()=>n(s.type),"data-drawui-tip":t(s.labelKey),children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("path",{d:s.icon})})},s.type)),jsx("div",{className:"drawui-toolbar-divider"}),tn.map(s=>jsx("button",{className:`drawui-toolbar-button ${e===s.type?"active":""}`,onClick:()=>n(s.type),"data-drawui-tip":t(s.labelKey),children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("path",{d:s.icon})})},s.type)),jsx("button",{className:`drawui-toolbar-button ${e==="uml-class"?"active":""}`,onClick:()=>n("uml-class"),"data-drawui-tip":t("toolbar.uml-class"),children:jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("rect",{x:"3",y:"3",width:"18",height:"18",rx:"2"}),jsx("line",{x1:"3",y1:"9",x2:"21",y2:"9"}),jsx("line",{x1:"3",y1:"15",x2:"21",y2:"15"}),jsx("line",{x1:"7",y1:"6",x2:"17",y2:"6"}),jsx("line",{x1:"7",y1:"12",x2:"13",y2:"12"}),jsx("line",{x1:"7",y1:"18",x2:"11",y2:"18"})]})}),jsx("button",{className:`drawui-toolbar-button ${e==="uml-interface"?"active":""}`,onClick:()=>n("uml-interface"),"data-drawui-tip":t("toolbar.uml-interface"),children:jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("rect",{x:"3",y:"3",width:"18",height:"18",rx:"2"}),jsx("line",{x1:"3",y1:"9",x2:"21",y2:"9"}),jsx("line",{x1:"7",y1:"6",x2:"17",y2:"6"}),jsx("line",{x1:"7",y1:"12",x2:"13",y2:"12"})]})}),jsx("button",{className:`drawui-toolbar-button ${e==="mind-map"?"active":""}`,onClick:()=>n("mind-map"),"data-drawui-tip":t("toolbar.mind-map"),children:jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("circle",{cx:"5",cy:"12",r:"2.4"}),jsx("path",{d:"M7.4 12h3.6"}),jsx("path",{d:"M11 12c0-2.6 1.6-4.4 3.4-4.4"}),jsx("path",{d:"M11 12c0 2.6 1.6 4.4 3.4 4.4"}),jsx("circle",{cx:"17.4",cy:"7.6",r:"1.7"}),jsx("circle",{cx:"17.4",cy:"16.4",r:"1.7"}),jsx("circle",{cx:"15.6",cy:"12",r:"1.7"})]})}),jsx("div",{className:"drawui-toolbar-divider"}),jsx("button",{className:`drawui-toolbar-button ${i?"active":""}`,onClick:u,"data-drawui-tip":t("toolbar.grid"),children:jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("rect",{x:"3",y:"3",width:"7",height:"7",rx:"1"}),jsx("rect",{x:"14",y:"3",width:"7",height:"7",rx:"1"}),jsx("rect",{x:"14",y:"14",width:"7",height:"7",rx:"1"}),jsx("rect",{x:"3",y:"14",width:"7",height:"7",rx:"1"})]})}),jsx("div",{className:"drawui-toolbar-divider"}),jsx("button",{className:"drawui-toolbar-button",onClick:l,disabled:!p,style:p?void 0:{opacity:.4,cursor:"default"},"data-drawui-tip":t("toolbar.undo"),children:jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("path",{d:"M3 7v6h6"}),jsx("path",{d:"M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"})]})}),jsx("button",{className:"drawui-toolbar-button",onClick:C,disabled:!y,style:y?void 0:{opacity:.4,cursor:"default"},"data-drawui-tip":t("toolbar.redo"),children:jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("path",{d:"M21 7v6h-6"}),jsx("path",{d:"M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3L21 13"})]})}),jsx("div",{className:"drawui-toolbar-divider"}),jsxs("div",{className:"drawui-toolbar-dropdown",onMouseEnter:D,onMouseLeave:P,children:[jsx("button",{className:"drawui-toolbar-button","data-drawui-tip":t("toolbar.export"),children:jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("path",{d:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"}),jsx("polyline",{points:"7 10 12 15 17 10"}),jsx("line",{x1:"12",y1:"15",x2:"12",y2:"3"})]})}),B&&jsx("div",{className:"drawui-toolbar-shape-grid drawui-toolbar-export-grid",children:k.map(s=>jsx("button",{className:"drawui-toolbar-shape-item drawui-toolbar-export-item",onClick:()=>{f?.(s.format),I(false);},"data-drawui-tip":t(s.labelKey),children:t(s.labelKey)},s.format))})]})]})})});var lt=memo(function({onZoomIn:e,onZoomOut:n,onReset:i,zoomLevel:u=100}){return X(),jsxs("div",{className:"drawui-zoom-control",children:[jsx("button",{className:"drawui-zoom-button",onClick:e,"data-drawui-tip":t("zoom.in"),children:jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("line",{x1:"12",y1:"5",x2:"12",y2:"19"}),jsx("line",{x1:"5",y1:"12",x2:"19",y2:"12"})]})}),jsxs("div",{className:"drawui-zoom-level",children:[u,"%"]}),jsx("button",{className:"drawui-zoom-button",onClick:n,"data-drawui-tip":t("zoom.out"),children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("line",{x1:"12",y1:"5",x2:"12",y2:"19"})})}),jsx("button",{className:"drawui-zoom-button",onClick:i,"data-drawui-tip":t("zoom.reset"),children:jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("path",{d:"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"}),jsx("path",{d:"M3 3v5h5"})]})})]})});var cn=["#ffffff","#f1f5f9","#ede9fe","#dbeafe","#dcfce7","#fef3c7","#fee2e2"],dn=["#0f172a","#475569","#94a3b8","#8b5cf6","#3b82f6","#16a34a","#d97706","#dc2626"],un=[...cn,...dn],Et=15,Rt="drawui:customColors";function pn(){if(typeof window>"u")return [];try{let a=window.localStorage.getItem(Rt);if(!a)return [];let e=JSON.parse(a);return Array.isArray(e)?e.filter(n=>typeof n=="string").slice(-Et):[]}catch{return []}}function hn(a){if(!(typeof window>"u"))try{window.localStorage.setItem(Rt,JSON.stringify(a));}catch{}}var Tt=[{key:"fill",labelKey:"style.fill",hasTransparent:true,hasOpacity:true},{key:"stroke",labelKey:"style.stroke",hasTransparent:false,hasOpacity:true},{key:"text",labelKey:"style.text",hasTransparent:false},{key:"highlight",labelKey:"style.highlight",hasTransparent:true,hasOpacity:true}],Nt=(a,e)=>!!a&&!!e&&a.toLowerCase()===e.toLowerCase(),yn=[{type:"straight",labelKey:"style.connection.straight",icon:"\u2501"},{type:"polyline",labelKey:"style.connection.polyline",icon:jsx("svg",{viewBox:"0 0 24 24",width:"16",height:"16",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("path",{d:"M4 8 C 12 8, 12 16, 20 16"})})},{type:"orthogonal",labelKey:"style.connection.orthogonal",icon:"\u2517"},{type:"curve",labelKey:"style.connection.curve",icon:"\u223F"}],fn=[{type:"none",labelKey:"style.arrowhead.none",icon:"\u2501"},{type:"end",labelKey:"style.arrowhead.end",icon:"\u2192"},{type:"start",labelKey:"style.arrowhead.start",icon:"\u2190"},{type:"both",labelKey:"style.arrowhead.both",icon:"\u21C4"},{type:"inheritance",labelKey:"style.arrowhead.inheritance",icon:"\u2501\u2501\u25B7"},{type:"composition",labelKey:"style.arrowhead.composition",icon:"\u25C6\u2501\u2501"},{type:"aggregation",labelKey:"style.arrowhead.aggregation",icon:"\u25C7\u2501\u2501"}],_e=10,Re=12,Te=a=>!a||a==="transparent",It=memo(function({editor:e,selectedCount:n,hasLineSelection:i,currentConnectionType:u,currentArrowHead:p,currentDashed:y}){X();let l=!!e?.getEditingShapeId(),[C,f]=useState(null),[c,v]=useState(null),[,B]=useState(0),I=useRef(null),b=useRef(null),z=useRef(null),[k,D]=useState({tw:168,th:42,pw:228,ph:160}),[P,ue]=useState(pn),o=useRef(null),s=useCallback(t=>{let g=t.trim().toLowerCase();/^#[0-9a-f]{6}$/.test(g)&&ue(Y=>{let R=Y.filter(H=>H!==g);for(R.push(g);R.length>Et;)R.shift();return hn(R),R});},[]);if(useEffect(()=>{let t=o.current;if(!t)return;let g=()=>{t.value&&s(t.value);};return t.addEventListener("change",g),()=>t.removeEventListener("change",g)},[s,c]),useEffect(()=>{if(!e)return;let t=e.subscribe(()=>B(g=>(g+1)%1e6));return ()=>{t();}},[e]),useEffect(()=>{v(null);},[n,l]),useEffect(()=>{if(!c)return;let t=g=>{I.current&&!I.current.contains(g.target)&&v(null);};return document.addEventListener("pointerdown",t,true),()=>document.removeEventListener("pointerdown",t,true)},[c]),useLayoutEffect(()=>{let t=b.current?.offsetWidth??k.tw,g=b.current?.offsetHeight??k.th,Y=z.current?.offsetWidth??k.pw,R=z.current?.offsetHeight??k.ph;D(H=>H.tw===t&&H.th===g&&H.pw===Y&&H.ph===R?H:{tw:t,th:g,pw:Y,ph:R});}),!e||n===0||l)return null;let d=e.getSelectedIds(),Z=e.getShapes().filter(t=>d.includes(t.id)),A=Z[0],V=A?.id??"",se=A?.style.fillColor,_=A?.style.strokeColor??"#1f2937",ee=A?.textColor??"#1f2937",m=A?.highlightColor,le={fill:se,stroke:_,text:ee,highlight:m},Ne={fill:A?.style.fillOpacity??1,stroke:A?.style.strokeOpacity??1,highlight:A?.highlightOpacity??1},Se=t=>C&&C.key===`${V}:${t}`?C.value:Ne[t]??1,pe=(t,g)=>{switch(t){case "stroke":e.updateSelectedShapesStyle({strokeColor:g});break;case "fill":e.updateSelectedShapesStyle({fillColor:g});break;case "text":e.updateSelectedShapesText({textColor:g});break;case "highlight":e.updateSelectedShapesText({highlightColor:g});break}},K=(t,g)=>{f({key:`${V}:${t}`,value:g}),t==="highlight"?e.updateSelectedShapesText({highlightOpacity:g}):t==="stroke"?e.updateSelectedShapesStyle({strokeOpacity:g}):e.updateSelectedShapesStyle({fillOpacity:g});},he=t=>e.updateConnectionType(t),ce=t=>e.updateArrowHeadType(t),Ce=t=>e.updateArrowDashed(t),ye=!!i&&Z.length>0&&Z.every(t=>t.type==="line"||t.type==="arrow"),fe=Z.length>0&&Z.every(t=>t.type==="text"),me=ye?Tt.filter(t=>t.key==="stroke"):Tt,Me=t=>t.key==="stroke"&&ye?"style.line":t.labelKey,w=c&&c!=="more"?me.find(t=>t.key===c):void 0,x=!!c&&(c==="more"||c==="prefix"||!!w),oe=e.getCamera(),O=getContentBounds(Z,0),G=oe.pageToScreen({x:O.x,y:O.y}),ie=oe.pageToScreen({x:O.x+O.width,y:O.y+O.height}),ze=window.innerWidth,Be=window.innerHeight,Ae=ie.y+_e,Oe=G.y-_e,Ue=k.th+(x?_e+k.ph:0),h=Ae+Ue<=Be-Re,N=Oe-Ue>=Re,L=h||!N,E=(G.x+ie.x)/2,$=(t,g,Y)=>Math.max(g,Math.min(t,Math.max(g,Y))),F=$(E-k.tw/2,Re,ze-k.tw-Re),ge=L?Ae:Oe-k.th,Ke=$(E-k.pw/2,Re,ze-k.pw-Re),Ee=x?$(L?ge+k.th+_e:ge-_e-k.ph,Re,Be-k.ph-Re):0;return jsxs("div",{className:"drawui-style-floating",ref:I,children:[jsxs("div",{className:"drawui-style-toolbar",ref:b,style:{left:F,top:ge},children:[me.map(t$1=>jsxs("button",{className:`drawui-style-tool-btn${c===t$1.key?" active":""}`,onClick:()=>v(c===t$1.key?null:t$1.key),"data-drawui-tip":t(Me(t$1)),type:"button",children:[t$1.key==="fill"&&jsx("span",{className:`drawui-st-swatch${Te(se)?" drawui-st-none":""}`,style:Te(se)?void 0:{background:se}}),t$1.key==="stroke"&&(ye?jsx("span",{className:`drawui-st-line${Te(_)?" drawui-st-line-none":""}`,style:Te(_)?void 0:{background:_}}):jsx("span",{className:`drawui-st-frame${Te(_)?" drawui-st-frame-none":""}`,style:Te(_)?void 0:{borderColor:_}})),t$1.key==="text"&&jsx("span",{className:"drawui-st-text",style:{color:ee},children:"A"}),t$1.key==="highlight"&&jsx("span",{className:`drawui-st-hl${Te(m)?" drawui-st-none":""}`,style:Te(m)?void 0:{background:m},children:"A"})]},t$1.key)),i&&jsx("button",{className:`drawui-style-tool-btn${c==="more"?" active":""}`,onClick:()=>v(c==="more"?null:"more"),"data-drawui-tip":t("style.connection"),type:"button",children:"\u22EF"}),fe&&jsx("button",{className:`drawui-style-tool-btn${c==="prefix"?" active":""}`,onClick:()=>v(c==="prefix"?null:"prefix"),"data-drawui-tip":t("style.prefix"),type:"button",children:jsxs("svg",{viewBox:"0 0 24 24",width:"18",height:"18",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",children:[jsx("circle",{cx:"5",cy:"8",r:"1.7",fill:"currentColor",stroke:"none"}),jsx("circle",{cx:"5",cy:"16",r:"1.7",fill:"currentColor",stroke:"none"}),jsx("line",{x1:"10.5",y1:"8",x2:"20",y2:"8"}),jsx("line",{x1:"10.5",y1:"16",x2:"20",y2:"16"})]})})]}),x&&jsx("div",{className:"drawui-style-popover",ref:z,style:{left:Ke,top:Ee},children:c==="prefix"?jsxs(Fragment,{children:[jsx("div",{className:"drawui-style-popover-title",children:t("style.prefix")}),jsx("div",{className:"drawui-muted-hint",children:t("style.prefix.soon")})]}):w?jsxs(Fragment,{children:[jsx("div",{className:"drawui-style-popover-title",children:t(Me(w))}),jsxs("div",{className:"drawui-color-row",children:[w.hasTransparent&&jsx("button",{className:`drawui-color-swatch drawui-color-swatch-transparent${Te(le[w.key])?" active":""}`,onClick:()=>pe(w.key,"transparent"),"aria-label":t("style.none"),type:"button"}),un.map(t=>jsx("button",{className:`drawui-color-swatch${Nt(t,le[w.key])?" active":""}`,style:{background:t},onClick:()=>pe(w.key,t),"aria-label":t,type:"button"},t)),P.map(t=>jsx("button",{className:`drawui-color-swatch drawui-color-custom${Nt(t,le[w.key])?" active":""}`,style:{background:t},onClick:()=>pe(w.key,t),"aria-label":t,type:"button"},`custom-${t}`)),jsxs("span",{className:"drawui-color-swatch drawui-color-add","data-drawui-tip":t("style.addColor"),children:["+",jsx("input",{ref:o,type:"color",defaultValue:"#3b82f6",className:"drawui-color-add-input","aria-label":t("style.addColor")})]})]}),w.hasOpacity&&jsxs("div",{className:"drawui-opacity-row",children:[jsx("span",{className:"drawui-opacity-label",children:t("style.opacity")}),jsx("input",{type:"range",min:0,max:100,value:Math.round(Se(w.key)*100),onChange:t=>K(w.key,Number(t.target.value)/100),className:"drawui-opacity-slider"}),jsxs("span",{className:"drawui-opacity-value",children:[Math.round(Se(w.key)*100),"%"]})]})]}):jsxs(Fragment,{children:[jsx("div",{className:"drawui-style-popover-title",children:t("style.connection")}),jsx("div",{className:"drawui-connection-row",children:yn.map(t$1=>jsxs("button",{className:`drawui-connection-btn${u===t$1.type?" active":""}`,onClick:()=>he(t$1.type),"data-drawui-tip":t(t$1.labelKey),type:"button",children:[jsx("span",{className:"drawui-connection-icon",children:t$1.icon}),jsx("span",{className:"drawui-connection-label",children:t(t$1.labelKey)})]},t$1.type))}),jsx("div",{className:"drawui-style-popover-title",children:t("style.arrow")}),jsx("div",{className:"drawui-connection-row",children:fn.map(t$1=>jsxs("button",{className:`drawui-connection-btn${p===t$1.type?" active":""}`,onClick:()=>ce(t$1.type),"data-drawui-tip":t(t$1.labelKey),type:"button",children:[jsx("span",{className:"drawui-connection-icon",children:t$1.icon}),jsx("span",{className:"drawui-connection-label",children:t(t$1.labelKey)})]},t$1.type))}),jsx("div",{className:"drawui-style-popover-title",children:t("style.dashed")}),jsxs("div",{className:"drawui-connection-row",children:[jsxs("button",{className:`drawui-connection-btn${y?"":" active"}`,onClick:()=>Ce(false),"data-drawui-tip":t("style.solid"),type:"button",children:[jsx("span",{className:"drawui-connection-icon",children:"\u2501"}),jsx("span",{className:"drawui-connection-label",children:t("style.solid")})]}),jsxs("button",{className:`drawui-connection-btn${y?" active":""}`,onClick:()=>Ce(true),"data-drawui-tip":t("style.dashed"),type:"button",children:[jsx("span",{className:"drawui-connection-icon",children:"\u2504"}),jsx("span",{className:"drawui-connection-label",children:t("style.dashed")})]})]})]})})]})});var pt=14,zt=20,kn=["#1f2937","#ef4444","#f97316","#facc15","#22c55e","#3b82f6","#8b5cf6","#ec4899","#9ca3af"],Sn=[12,14,16,18,20,24];function Bt(a,e,n){let i=a,u=n,p=i.charAt(0);if(i.length>1&&(p==="+"||p==="-"||p==="#"||p==="~")&&i.charAt(1)===" "&&(u=p,i=i.slice(2)),i=i.replace(/^\s+|\s+$/g,""),e==="attribute"){let v=i.indexOf(":");return v===-1?{visibility:u,name:i,type:"",params:"",returnType:""}:{visibility:u,name:i.slice(0,v).replace(/^\s+|\s+$/g,""),type:i.slice(v+1).replace(/^\s+|\s+$/g,""),params:"",returnType:""}}let y=i.indexOf("(");if(y===-1){let v=i.lastIndexOf(":");return v===-1?{visibility:u,name:i,type:"",params:"",returnType:""}:{visibility:u,name:i.slice(0,v).replace(/^\s+|\s+$/g,""),type:"",params:"",returnType:i.slice(v+1).replace(/^\s+|\s+$/g,"")}}let l=i.slice(0,y).replace(/^\s+|\s+$/g,""),C=i.indexOf(")",y);if(C===-1)return {visibility:u,name:l,type:"",params:i.slice(y+1).replace(/^\s+|\s+$/g,""),returnType:""};let f=i.slice(y+1,C).replace(/^\s+|\s+$/g,""),c=i.slice(C+1).replace(/^\s+|\s+$/g,"");return c.startsWith(":")&&(c=c.slice(1).replace(/^\s+|\s+$/g,"")),{visibility:u,name:l,type:"",params:f,returnType:c}}function Cn(a,e){let n=`${e.visibility} `;return a==="attribute"?`${n}${e.name}: ${e.type??""}`:`${n}${e.name}(${e.params??""}): ${e.returnType??""}`}var Dt=memo(function({editor:e,umlClass:n,editing:i}){let[,u]=useState(0);X(),useEffect(()=>{if(!e)return;let h=e.subscribe(()=>u(N=>N+1));return ()=>{h();}},[e]);let[p,y]=useState(null),[l,C]=useState(false),f=useRef(null),c=useRef(null),v=useCallback((h,N)=>{f.current&&(clearTimeout(f.current),f.current=null),y({section:h,rowId:N}),C(false);},[]),B=useCallback(()=>{f.current&&clearTimeout(f.current),f.current=window.setTimeout(()=>{y(null),C(false);},150);},[]);if(!e||!n||i!==n.id)return null;let I=e.getCamera(),{id:b,x:z,y:k,width:D,height:P,className:ue,methods:o}=n,s=n.type==="uml-interface",d=s?[]:n.attributes,q=D/2,Z=P/2,A=UML_HEADER_HEIGHT,V=UML_LINE_HEIGHT,se=UML_PADDING_X,_=UML_PADDING_Y,ee=s?0:d.length>0?d.length*V+_*2:_*2,m=I.zoom,le=(D-se*2)*m,Ne=4*m,Se=I.pageToScreen({x:z-q+se,y:k}),pe=I.pageToScreen({x:z,y:k-Z+A/2}),K=h=>I.pageToScreen({x:z,y:h}).y,he=V*m,ce=h=>k+(-Z+A+_+V/2+h*V),Ce=h=>k+(-Z+A+ee+_+V/2+h*V),ye=k+(-Z+A+ee),fe=k+Z,me={background:"#ffffff",borderWidth:1,borderStyle:"solid",borderColor:"transparent",outline:"none",padding:0,fontFamily:"sans-serif",boxSizing:"border-box"},Me=(h,N)=>{let L=d.find($=>$.id===h);if(!L)return;let E=Bt(N,"attribute",L.visibility);e.updateUmlClass(b,{attributes:d.map($=>$.id===h?{...$,...E}:$)});},w=(h,N)=>{let L=o.find(F=>F.id===h);if(!L)return;let E=Bt(N,"method",L.visibility),$=o.map(F=>F.id===h?{...F,...E}:F);s?e.updateUmlInterface(b,{methods:$}):e.updateUmlClass(b,{methods:$});},x=(h,N,L)=>{c.current={section:h,from:N},L.dataTransfer.effectAllowed="move",L.dataTransfer.setData("text/plain",`${h}:${N}`);},oe=h=>{h.preventDefault(),h.dataTransfer.dropEffect="move";},O=(h,N,L)=>{L.preventDefault();let E=c.current;!E||E.section!==h||(h==="attribute"?e.reorderUmlAttribute(b,E.from,N):e.reorderUmlMethod(b,E.from,N),c.current=null);},G=(h,N,L,E)=>{let $=K(E),F=p?.section===h&&p.rowId===L.id,ge=(L.fontSize||UML_FONT_SIZE)*m,Ke=L.textColor||"#1f2937",Ee={position:"absolute",left:Se.x-pt*m-Ne,top:$-he/2,width:pt*m+Ne+le+zt*m,height:he,display:"flex",alignItems:"center",gap:2,pointerEvents:"none",zIndex:53},t$1={...me,width:le,height:he-2,fontSize:ge,color:Ke,textDecoration:L.strikethrough?"line-through":"none",pointerEvents:"auto",...F?{borderColor:"var(--dw-primary)"}:{}},g={width:pt*m,height:he-2,cursor:"grab",color:"#9ca3af",display:"flex",alignItems:"center",justifyContent:"center",userSelect:"none",fontSize:12*m,lineHeight:1,opacity:F?1:.55,pointerEvents:"auto"},Y={width:zt*m,height:he-6,border:"none",background:"transparent",color:"#9ca3af",cursor:"pointer",borderRadius:3,fontSize:14*m,opacity:F?1:.35,pointerEvents:"auto"};return jsxs("div",{style:Ee,onDragOver:oe,onDrop:R=>O(h,N,R),children:[jsx("span",{style:g,draggable:true,onDragStart:R=>x(h,N,R),"data-drawui-tip":t("uml.drag"),children:"\u22EE\u22EE"}),jsx("input",{style:t$1,value:Cn(h,L),onChange:R=>h==="attribute"?Me(L.id,R.target.value):w(L.id,R.target.value),onFocus:()=>v(h,L.id),onBlur:B,spellCheck:false}),jsx("button",{style:Y,onMouseDown:R=>R.preventDefault(),onClick:()=>{h==="attribute"?e.removeUmlAttribute(b,L.id):e.removeUmlMethod(b,L.id);},"data-drawui-tip":t("uml.delete"),children:"\xD7"})]},L.id)},ie=(h,N,L)=>{let E=K(N),$=h==="attribute";return jsxs("button",{onMouseDown:F=>F.preventDefault(),onClick:()=>$?e.addUmlAttribute(b):e.addUmlMethod(b),className:"drawui-uml-add-row",style:{position:"absolute",left:Se.x,top:E-9*m,height:18*m,padding:`0 ${6*m}px`,fontSize:11*m,lineHeight:1,border:"1px dashed #cbd5e1",background:"rgba(255,255,255,0.85)",color:"#64748b",borderRadius:3,cursor:"pointer",pointerEvents:"auto",display:"flex",alignItems:"center",gap:3,whiteSpace:"nowrap",zIndex:53},"data-drawui-tip":L,children:[jsx("span",{style:{fontSize:13*m,lineHeight:1},children:"+"}),jsx("span",{children:L})]},`add-${h}`)},ze=()=>{if(!p||p.section==="className")return null;let h=p.section,N=p.rowId,E=(h==="attribute"?d:o).find(T=>T.id===N);if(!E)return null;let $=224*m,F=30*m,ge=I.pageToScreen({x:z,y:k}).x,Ke=I.pageToScreen({x:z,y:k-Z}).y,Ee=20*m,t$1=Ke-F-Ee,g=ge-$/2,Y=t$1+F,R=E.textColor||"#1f2937",H=E.fontSize||UML_FONT_SIZE,be=!!E.strikethrough;return jsxs(Fragment,{children:[jsx("div",{style:{position:"absolute",left:ge-.5,top:Y,width:1,height:Ee,background:"#d1d5db",pointerEvents:"none",zIndex:59}}),jsxs("div",{className:"drawui-uml-toolbar",style:{position:"absolute",left:g,top:t$1,width:$,height:F,background:"#ffffff",border:"1px solid #e5e7eb",borderRadius:6,boxShadow:"0 4px 12px rgba(0, 0, 0, 0.1)",display:"flex",alignItems:"center",gap:4*m,padding:`0 ${6*m}px`,pointerEvents:"auto",zIndex:60,fontSize:12*m},onMouseDown:T=>T.preventDefault(),children:[jsxs("div",{style:{position:"relative"},children:[jsxs("button",{onClick:()=>C(T=>!T),className:"drawui-uml-toolbar-btn","data-drawui-tip":t("uml.textColor"),style:{border:"none",background:"transparent",cursor:"pointer",padding:2,display:"flex",alignItems:"center",borderRadius:3},children:[jsx("span",{style:{fontWeight:700,color:R,fontSize:13*m,textDecoration:be?"line-through":"none"},children:"A"}),jsx("span",{style:{width:10*m,height:2*m,background:R,marginLeft:3,borderRadius:1}})]}),l&&jsxs("div",{style:{position:"absolute",top:"100%",left:0,marginTop:4,background:"#ffffff",border:"1px solid #e5e7eb",borderRadius:4,padding:4,display:"flex",gap:2,boxShadow:"0 2px 8px rgba(0, 0, 0, 0.1)",zIndex:61},children:[jsx("button",{onClick:()=>{e.updateUmlRowStyle(b,h,E.id,{textColor:null}),C(false);},style:{width:14,height:14,border:"1px solid #e5e7eb",background:"transparent",cursor:"pointer",borderRadius:2},"data-drawui-tip":t("uml.defaultColor")}),kn.map(T=>jsx("button",{onClick:()=>{e.updateUmlRowStyle(b,h,E.id,{textColor:T}),C(false);},style:{width:14,height:14,border:"none",background:T,cursor:"pointer",borderRadius:2},"data-drawui-tip":T},T))]})]}),jsx("select",{value:H,onChange:T=>e.updateUmlRowStyle(b,h,E.id,{fontSize:Number(T.target.value)}),style:{border:"1px solid #e5e7eb",borderRadius:3,padding:`0 ${2*m}px`,fontSize:12*m,height:20*m,background:"#ffffff"},"data-drawui-tip":t("uml.fontSize"),children:Sn.map(T=>jsx("option",{value:T,children:T},T))}),jsx("button",{onClick:()=>e.updateUmlRowStyle(b,h,E.id,{strikethrough:!be}),className:"drawui-uml-toolbar-btn","data-drawui-tip":t("uml.strikethrough"),style:{border:"none",background:be?"var(--dw-primary-weak)":"transparent",cursor:"pointer",padding:2,borderRadius:3},children:jsx("span",{style:{fontWeight:700,fontSize:13*m,textDecoration:"line-through"},children:"A"})}),jsx("button",{onClick:()=>{h==="attribute"?e.removeUmlAttribute(b,E.id):e.removeUmlMethod(b,E.id),y(null);},className:"drawui-uml-toolbar-btn","data-drawui-tip":t("uml.delete"),style:{border:"none",background:"transparent",cursor:"pointer",color:"#ef4444",padding:2,marginLeft:"auto",borderRadius:3},children:jsxs("svg",{width:14*m,height:14*m,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("polyline",{points:"3 6 5 6 21 6"}),jsx("path",{d:"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"}),jsx("path",{d:"M10 11v6"}),jsx("path",{d:"M14 11v6"}),jsx("path",{d:"M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"})]})})]})]})},Be=I.pageToScreen({x:z-q,y:k}).x,Ae=I.pageToScreen({x:z,y:k-Z}).y,Oe=D*m,Ue=P*m;return jsxs("div",{style:{position:"absolute",inset:0,pointerEvents:"none",zIndex:50},children:[jsx("div",{style:{position:"absolute",left:Be+1,top:Ae+1,width:Math.max(0,Oe-2),height:Math.max(0,Ue-2),background:"#ffffff",pointerEvents:"none",zIndex:51}}),jsx("input",{style:{...me,position:"absolute",left:pe.x-le/2,top:pe.y-A*m/2+2,width:le,height:A*m-4,textAlign:"center",fontWeight:700,fontSize:(n.fontSize||UML_FONT_SIZE)*m,color:n.textColor||"#1f2937",pointerEvents:"auto",zIndex:52,...p?.section==="className"?{borderColor:"var(--dw-primary)"}:{}},value:ue,onChange:h=>s?e.updateUmlInterface(b,{className:h.target.value}):e.updateUmlClass(b,{className:h.target.value}),onFocus:()=>v("className",""),onBlur:B,spellCheck:false}),!s&&jsxs(Fragment,{children:[d.map((h,N)=>G("attribute",N,h,ce(N))),ie("attribute",ye,"\u5C5E\u6027")]}),o.map((h,N)=>G("method",N,h,Ce(N))),ie("method",fe,t("uml.method")),ze()]})});var Ut=memo(function({editor:e,panelOpen:n,onOpenPanel:i}){let[,u]=useState(0);X(),useEffect(()=>{if(!e)return;let D=e.subscribe(()=>u(P=>P+1));return ()=>{D();}},[e]);let p=useRef(false),y=useRef(false);if(!e)return null;let l=e.getMindMapEditingShapeId();if(!l||n)return null;let C=e.getMindMapSelectedNode();if(!C||C.shapeId!==l)return null;let f=e.getMindMapNode(l,C.nodeId),c=e.getMindMapNodeScreenRect(l,C.nodeId);if(!f||!c)return null;let v=e.getCamera().getZoom(),B=MINDMAP_FONT_SIZE*v,I=Math.max(100,c.width+24),b=c.height+8,z={position:"absolute",left:c.x+c.width/2,top:c.y-4,transform:"translateX(-50%)",width:I,height:b,border:"1.5px solid var(--dw-primary, #3b82f6)",borderRadius:6,background:"#ffffff",boxShadow:"0 2px 10px rgba(0,0,0,0.15)",outline:"none",padding:`0 ${(f.icon?24:12)*v}px`,fontFamily:"sans-serif",fontSize:B,color:"#1f2937",boxSizing:"border-box",pointerEvents:"auto",zIndex:55},k={position:"absolute",left:c.x+c.width+12,top:c.y+c.height/2-11,width:22,height:22,border:"1px solid #e5e7eb",background:"#ffffff",borderRadius:"50%",cursor:"pointer",color:"#6b7280",fontSize:13,lineHeight:1,display:"flex",alignItems:"center",justifyContent:"center",boxShadow:"0 1px 4px rgba(0,0,0,0.12)",pointerEvents:"auto",zIndex:55};return jsxs("div",{style:{position:"absolute",inset:0,pointerEvents:"none",zIndex:50},children:[jsx("input",{autoFocus:true,style:z,value:f.text,spellCheck:false,onChange:D=>{let P=!p.current;p.current=true,e.updateMindMapNode(l,C.nodeId,{text:D.target.value},P);},onBlur:()=>{if(y.current){y.current=false;return}e.exitMindMapEdit();},onKeyDown:D=>{D.key==="Enter"?D.target.blur():D.key==="Escape"&&e.exitMindMapEdit();}}),jsx("button",{style:k,"data-drawui-tip":t("mindmap.more"),onMouseDown:D=>{D.preventDefault(),y.current=true,setTimeout(()=>{y.current=false;},300);},onClick:i,children:"\u22EF"})]})});var $t=[...MINDMAP_COLORS,"#1f2937","#9ca3af"],Wt=["\u{1F4A1}","\u2B50","\u{1F525}","\u{1F4CC}","\u2705","\u2757","\u26A0\uFE0F","\u{1F3F7}\uFE0F"],Dn={position:"absolute",width:232,background:"rgba(255,255,255,0.96)",border:"1px solid #e5e7eb",borderRadius:8,boxShadow:"0 6px 20px rgba(0,0,0,0.12)",padding:"10px 12px",fontSize:12,color:"#1f2937",zIndex:70,boxSizing:"border-box",fontFamily:"sans-serif"},ht={fontSize:11,color:"#6b7280",marginBottom:4,display:"block"},qe={display:"flex",gap:4,alignItems:"center",flexWrap:"wrap"},Je={border:"1px solid #e5e7eb",background:"#ffffff",borderRadius:5,padding:"3px 8px",fontSize:12,color:"#374151",cursor:"pointer",lineHeight:1.5},yt={width:"100%",border:"1px solid #e5e7eb",borderRadius:5,padding:"4px 8px",fontSize:12,outline:"none",boxSizing:"border-box",background:"#ffffff",color:"#1f2937"},Zt=memo(function({editor:e,mindMap:n}){let[,i]=useState(0);X(),useEffect(()=>{if(!e)return;let o=e.subscribe(()=>i(s=>s+1));return ()=>{o();}},[e]);let u=useRef(null);if(!e||!n||e.getMindMapEditingShapeId()!==n.id)return null;let p=e.getMindMapSelectedNode();if(!p||p.shapeId!==n.id)return null;let y=o=>{if(o.id===p.nodeId)return o;for(let s of o.children??[]){let d=y(s);if(d)return d}return null},l=y(n.root);if(!l)return null;let C=e.getCamera(),c=layoutMindMap(n.root).positions.get(l.id);if(!c)return null;let v=C.zoom,B=C.pageToScreen({x:n.x+c.x,y:n.y+c.y}),I=B.x+c.width*v/2+14,b=B.y-80,k=Math.max(8,Math.min(I,(window.innerWidth||1024)-232-8)),D=Math.max(8,Math.min(b,(window.innerHeight||768)-320)),P=o=>{e.updateMindMapNode(n.id,l.id,o);},ue=!!l.id&&l.id!==n.root.id;return jsxs("div",{ref:u,style:{...Dn,left:k,top:D},onMouseDown:o=>o.stopPropagation(),children:[jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:8},children:[jsx("span",{style:{fontWeight:600,fontSize:12},children:t("mindmap.nodeText")}),jsx("button",{onClick:()=>e.exitMindMapEdit(),"data-drawui-tip":t("mindmap.close"),style:{border:"none",background:"transparent",cursor:"pointer",color:"#9ca3af",fontSize:14,lineHeight:1,padding:2},children:"\xD7"})]}),jsx("input",{style:{...yt,marginBottom:8},value:l.text,onChange:o=>P({text:o.target.value}),spellCheck:false}),jsxs("div",{style:{...qe,marginBottom:10},children:[jsxs("button",{style:Je,onClick:()=>e.addMindMapChild(n.id,l.id),children:["+ ",t("mindmap.addChild")]}),ue&&jsxs("button",{style:Je,onClick:()=>e.addMindMapSibling(n.id,l.id),children:["+ ",t("mindmap.addSibling")]}),!!l.children?.length&&jsx("button",{style:Je,onClick:()=>e.toggleMindMapCollapse(n.id,l.id),children:l.collapsed?t("mindmap.expand"):t("mindmap.collapse")}),jsx("button",{style:{...Je,color:"#ef4444",borderColor:"#fecaca",marginLeft:"auto"},onClick:()=>e.deleteMindMapNode(n.id,l.id),children:t("mindmap.deleteNode")})]}),jsx("span",{style:ht,children:t("mindmap.color")}),jsxs("div",{style:{...qe,marginBottom:10},children:[jsx("button",{"data-drawui-tip":t("mindmap.levelColor"),onClick:()=>P({color:void 0}),style:{width:18,height:18,borderRadius:4,border:"1.5px solid #d1d5db",background:"conic-gradient(#ef4444, #f59e0b, #10b981, #3b82f6, #8b5cf6, #ec4899, #ef4444)",cursor:"pointer",flexShrink:0}}),$t.map(o=>jsx("button",{"data-drawui-tip":o,onClick:()=>P({color:o}),style:{width:18,height:18,borderRadius:4,border:l.color===o?"2px solid #111827":"1px solid #d1d5db",background:o,cursor:"pointer",flexShrink:0}},o))]}),jsx("span",{style:ht,children:t("mindmap.icon")}),jsxs("div",{style:{...qe,marginBottom:10},children:[jsx("button",{"data-drawui-tip":t("mindmap.noIcon"),onClick:()=>P({icon:void 0}),style:{width:22,height:22,borderRadius:4,border:l.icon?"1px solid #d1d5db":"2px solid #111827",background:"#f9fafb",cursor:"pointer",fontSize:11,color:"#9ca3af",lineHeight:1},children:"\u2205"}),Wt.map(o=>jsx("button",{onClick:()=>P({icon:o}),style:{width:22,height:22,borderRadius:4,border:l.icon===o?"2px solid #111827":"1px solid #d1d5db",background:"#f9fafb",cursor:"pointer",fontSize:13,lineHeight:1},children:o},o)),jsx("input",{placeholder:"\u270F\uFE0F",defaultValue:l.icon&&!Wt.includes(l.icon)?l.icon:"",onKeyDown:o=>{if(o.key==="Enter"){let s=o.target.value.trim();P({icon:s||void 0});}},onBlur:o=>{let s=o.target.value.trim();s!==l.icon&&P({icon:s||void 0});},style:{...yt,width:56,padding:"2px 4px",textAlign:"center"}})]}),jsx("span",{style:ht,children:t("mindmap.note")}),jsx("input",{style:{...yt,marginBottom:6},value:l.note??"",placeholder:t("mindmap.notePlaceholder"),onChange:o=>P({note:o.target.value||void 0}),spellCheck:false}),!!l.note&&jsxs("div",{style:{...qe,marginTop:4},children:[jsx("span",{style:{fontSize:11,color:"#6b7280"},children:t("mindmap.noteColor")}),jsx("button",{"data-drawui-tip":t("mindmap.noteColorDefault"),onClick:()=>P({noteColor:void 0}),style:{width:16,height:16,borderRadius:3,border:l.noteColor?"1px solid #d1d5db":"2px solid #111827",background:"repeating-conic-gradient(#ef4444 0% 25%, #f59e0b 0% 50%, #10b981 0% 75%, #3b82f6 0% 100%)",cursor:"pointer"}}),$t.map(o=>jsx("button",{onClick:()=>P({noteColor:o}),style:{width:16,height:16,borderRadius:3,border:l.noteColor===o?"2px solid #111827":"1px solid #d1d5db",background:o,cursor:"pointer"}},o))]})]})});var mt=220,gt=140,Wn="#fafafa";function Zn(a,e){let n=Math.min(a.x,e.x),i=Math.min(a.y,e.y),u=Math.max(a.x+a.width,e.x+e.width),p=Math.max(a.y+a.height,e.y+e.height);return {x:n,y:i,width:u-n,height:p-i}}function _n(a){return {x:a.x+a.width/2,y:a.y+a.height/2}}function Gn(){return {x:0,y:0,width:0,height:0}}function Fn(a){let e=1/0,n=1/0,i=-1/0,u=-1/0,p=false;for(let y of a){let l=wt(y);l&&(p=true,l.x<e&&(e=l.x),l.y<n&&(n=l.y),l.x+l.width>i&&(i=l.x+l.width),l.y+l.height>u&&(u=l.y+l.height));}return p?{x:e,y:n,width:i-e,height:u-n}:null}function wt(a){switch(a.type){case "rectangle":case "rounded-rectangle":case "ellipse":case "diamond":case "triangle":case "hexagon":case "parallelogram":case "trapezoid":case "pentagon":case "octagon":case "star":case "uml-class":case "uml-interface":case "mind-map":case "text":return {x:a.x-a.width/2,y:a.y-a.height/2,width:a.width,height:a.height};case "circle":return {x:a.x-a.radius,y:a.y-a.radius,width:a.radius*2,height:a.radius*2};case "line":case "arrow":{let e=a.points;if(!e||e.length===0)return null;let n=1/0,i=1/0,u=-1/0,p=-1/0;for(let y of e)y.x<n&&(n=y.x),y.y<i&&(i=y.y),y.x>u&&(u=y.x),y.y>p&&(p=y.y);return {x:n,y:i,width:u-n,height:p-i}}case "draw":{let e=a,n=e.width,i=e.height;if(typeof n=="number"&&typeof i=="number")return {x:e.x-n/2,y:e.y-i/2,width:n,height:i};let u=e.points;if(!u||u.length===0)return null;let p=1/0,y=1/0,l=-1/0,C=-1/0;for(let f of u){let c=f.x+e.x,v=f.y+e.y;c<p&&(p=c),v<y&&(y=v),c>l&&(l=c),v>C&&(C=v);}return {x:p,y,width:l-p,height:C-y}}default:return null}}function Vn(a){let e=a.getCamera(),n=e.screenToPage({x:0,y:0}),i=e.screenToPage({x:window.innerWidth,y:window.innerHeight});return {x:n.x,y:n.y,width:i.x-n.x,height:i.y-n.y}}function Yn(a,e,n){if(a.width<=0||a.height<=0)return {x:a.x-e/2,y:a.y-n/2,width:e,height:n};let i=e/n,u=a.width,p=u/i;p<a.height&&(p=a.height,u=p*i);let y=_n(a);return {x:y.x-u/2,y:y.y-p/2,width:u,height:p}}function bt(a,e,n,i){let u=(a-n.left)/n.width,p=(e-n.top)/n.height;return {x:i.x+u*i.width,y:i.y+p*i.height}}var Ft=memo(function({editor:e}){let n=useRef(null),i=useRef(null),[u,p]=useState(false),[y,l]=useState(100),[C,f]=useState(false),[c,v]=useState(false);X();let B=useRef(null),I=useRef(null);useLayoutEffect(()=>{let o=n.current,s=i.current;if(!o||!s)return;let d=window.devicePixelRatio||1;o.width=Math.round(mt*d),o.height=Math.round(gt*d),o.style.width=`${mt}px`,o.style.height=`${gt}px`;},[u]);let b=useCallback(()=>{let o=n.current,s=i.current;if(!o||!s||!e)return;let d=o.getContext("2d");if(!d)return;let q=mt,Z=gt,A=o.width,V=o.height,se=e.getShapes(),_=new Set(e.getSelectedIds()),ee=getTheme(),m=hexToRgba(ee.text,.16),le=ee.primary,Ne=hexToRgba(ee.primary,.18),Se=hexToRgba(ee.primary,.85),pe=Fn(se),K=Vn(e),he=pe?Zn(pe,K):K.width>0?K:Gn(),ce=Yn(he,q,Z);I.current=ce;let Ce=A/ce.width,ye=V/ce.height,fe=q/ce.width;d.setTransform(1,0,0,1,0,0),d.fillStyle=Wn,d.fillRect(0,0,A,V),d.setTransform(Ce,0,0,ye,-Ce*ce.x,-ye*ce.y),d.fillStyle=m;for(let w of se){let x=wt(w);x&&d.fillRect(x.x,x.y,x.width,x.height);}d.fillStyle=le;for(let w of se){if(!_.has(w.id))continue;let x=wt(w);x&&d.fillRect(x.x,x.y,x.width,x.height);}d.fillStyle=Ne,d.fillRect(K.x,K.y,K.width,K.height);let me=1.5/fe;d.strokeStyle=Se,d.lineWidth=me,d.lineJoin="round";let Me=Math.min(K.width/6,K.height/6,6/fe);if(d.beginPath(),Me*fe<1)d.rect(K.x,K.y,K.width,K.height);else {let w=K.x,x=K.y,oe=K.width,O=K.height,G=Math.min(Me,oe/2,O/2);d.moveTo(w+G,x),d.lineTo(w+oe-G,x),d.quadraticCurveTo(w+oe,x,w+oe,x+G),d.lineTo(w+oe,x+O-G),d.quadraticCurveTo(w+oe,x+O,w+oe-G,x+O),d.lineTo(w+G,x+O),d.quadraticCurveTo(w,x+O,w,x+O-G),d.lineTo(w,x+G),d.quadraticCurveTo(w,x,w+G,x),d.closePath();}d.stroke(),d.setTransform(1,0,0,1,0,0);},[e]);useEffect(()=>{if(!e||u)return;b();let o=e.subscribe(b),s=subscribeTheme(b),d=()=>b();return window.addEventListener("resize",d),()=>{o(),s(),window.removeEventListener("resize",d);}},[e,u,b]),useEffect(()=>{if(!e)return;let o=()=>{let d=e.getCamera().getZoom();l(Math.round(d*100));};o();let s=e.subscribe(o);return ()=>{s();}},[e]);let z=useCallback((o,s)=>{if(!e)return;let d=e.getCamera(),q=d.getZoom(),Z=window.innerWidth/2,A=window.innerHeight/2,V=d;V.x=Z-o*q,V.y=A-s*q,e.requestRender();},[e]),k=o=>{if(!e||!i.current||o.button!==0)return;let s=i.current.getBoundingClientRect(),d=I.current;if(!d)return;let q=bt(o.clientX,o.clientY,s,d);B.current={pointerId:o.pointerId,rect:{left:s.left,top:s.top,width:s.width,height:s.height},canvasBox:d},o.currentTarget.setPointerCapture(o.pointerId),v(true),z(q.x,q.y);},D=o=>{if(!c||!e||!B.current||!i.current)return;let s=B.current,d=bt(o.clientX,o.clientY,s.rect,s.canvasBox);z(d.x,d.y);},P=o=>{if(c){v(false),B.current=null;try{o.currentTarget.releasePointerCapture(o.pointerId);}catch{}}},ue=o=>{if(!e||!i.current)return;let s=I.current;if(!s)return;let d=i.current.getBoundingClientRect(),q=bt(o.clientX,o.clientY,d,s);z(q.x,q.y);};return jsxs("div",{className:`drawui-minimap ${u?"collapsed":""}`,children:[jsx("button",{className:"drawui-minimap-toggle",onClick:()=>p(o=>!o),"data-drawui-tip":u?t("minimap.expand"):t("minimap.collapse"),"data-drawui-tip-pos":"top","aria-label":u?t("minimap.expand"):t("minimap.collapse"),children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:u?jsx("polyline",{points:"9 6 15 12 9 18"}):jsx("polyline",{points:"15 6 9 12 15 18"})})}),!u&&jsxs("div",{className:"drawui-minimap-panel",children:[jsxs("div",{className:"drawui-minimap-header",children:[jsx("span",{className:"drawui-minimap-title",children:t("minimap.title")}),jsxs("span",{className:"drawui-minimap-zoom",children:[y,"%"]})]}),jsx("div",{ref:i,className:"drawui-minimap-canvas-wrap",style:{cursor:c?"grabbing":C?"pointer":"default"},onPointerEnter:()=>f(true),onPointerLeave:()=>f(false),children:jsx("canvas",{ref:n,className:"drawui-minimap-canvas",onPointerDown:k,onPointerMove:D,onPointerUp:P,onPointerCancel:P,onDoubleClick:ue})})]})]})});var ae=a=>jsx("svg",{viewBox:"0 0 24 24",width:"18",height:"18",className:"drawui-gen-shape-glyph",fill:"none",stroke:"currentColor",strokeWidth:"1.6",strokeLinecap:"round",strokeLinejoin:"round",children:a}),qn=[{type:"rectangle",labelKey:"shape.rectangle",glyph:ae(jsx("rect",{x:"4",y:"7",width:"16",height:"10",rx:"1"}))},{type:"rounded-rectangle",labelKey:"shape.rounded-rectangle",glyph:ae(jsx("rect",{x:"4",y:"7",width:"16",height:"10",rx:"4"}))},{type:"circle",labelKey:"shape.circle",glyph:ae(jsx("circle",{cx:"12",cy:"12",r:"5.5"}))},{type:"ellipse",labelKey:"shape.ellipse",glyph:ae(jsx("ellipse",{cx:"12",cy:"12",rx:"7",ry:"4.5"}))},{type:"diamond",labelKey:"shape.diamond",glyph:ae(jsx("path",{d:"M12 5 L19 12 L12 19 L5 12 Z"}))},{type:"triangle",labelKey:"shape.triangle",glyph:ae(jsx("path",{d:"M12 4 L20 19 H4 Z"}))},{type:"hexagon",labelKey:"shape.hexagon",glyph:ae(jsx("path",{d:"M12 3 L19.5 7.5 V16.5 L12 21 L4.5 16.5 V7.5 Z"}))},{type:"parallelogram",labelKey:"shape.parallelogram",glyph:ae(jsx("path",{d:"M6 7 L19 7 L16 17 H7 Z"}))},{type:"trapezoid",labelKey:"shape.trapezoid",glyph:ae(jsx("path",{d:"M7 6 H17 L20 18 H4 Z"}))},{type:"pentagon",labelKey:"shape.pentagon",glyph:ae(jsx("path",{d:"M12 4 L19.5 9.5 L16.5 18.5 H7.5 L4.5 9.5 Z"}))},{type:"octagon",labelKey:"shape.octagon",glyph:ae(jsx("path",{d:"M8 4 H16 L20 8 V16 L16 20 H8 L4 16 V8 Z"}))},{type:"star",labelKey:"shape.star",glyph:ae(jsx("path",{d:"M12 3 L14 9.5 L20.5 10 L15.5 14 L17.5 20.5 L12 16.8 L6.5 20.5 L8.5 14 L3.5 10 L10 9.5 Z"}))},{type:"uml-class",labelKey:"shape.uml-class",glyph:ae(jsxs(Fragment,{children:[jsx("rect",{x:"3",y:"4",width:"18",height:"16",rx:"1"}),jsx("path",{d:"M3 9 H21"}),jsx("path",{d:"M3 15 H21"}),jsx("path",{d:"M6 6.5 H10"}),jsx("path",{d:"M6 12.5 H12"})]}))},{type:"uml-interface",labelKey:"shape.uml-interface",glyph:ae(jsxs(Fragment,{children:[jsx("rect",{x:"3",y:"4",width:"18",height:"16",rx:"1"}),jsx("path",{d:"M3 9 H21"}),jsx("path",{d:"M6 6.5 H10"}),jsx("path",{d:"M6 12.5 H12"})]}))},{type:"mind-map",labelKey:"shape.mind-map",glyph:ae(jsxs(Fragment,{children:[jsx("circle",{cx:"5",cy:"12",r:"2"}),jsx("path",{d:"M7 12h2.6"}),jsx("path",{d:"M9.6 12c0-2 1.2-3.4 2.6-3.4"}),jsx("path",{d:"M9.6 12c0 2 1.2 3.4 2.6 3.4"}),jsx("circle",{cx:"15.2",cy:"8.6",r:"1.3"}),jsx("circle",{cx:"15.2",cy:"15.4",r:"1.3"}),jsx("circle",{cx:"13.6",cy:"12",r:"1.3"})]}))}];function Vt({editor:a,x:e,y:n,context:i,existingArrowId:u,defaultShapeType:p,onClose:y}){let l=useRef(null);X();let C=f=>{a?.createGeneratedConnection(i,{type:f,existingArrowId:u}),y();};return useEffect(()=>{let f=B=>{l.current&&!l.current.contains(B.target)&&y();},c=B=>{B.key==="Escape"&&(B.preventDefault(),y());},v=setTimeout(()=>{window.addEventListener("pointerdown",f,true),window.addEventListener("keydown",c,true);},0);return ()=>{clearTimeout(v),window.removeEventListener("pointerdown",f,true),window.removeEventListener("keydown",c,true);}},[y]),jsxs("div",{className:"drawui-gen-menu",ref:l,style:{left:e,top:n},children:[jsx("div",{className:"drawui-gen-menu-label",children:t("menu.title")}),jsx("div",{className:"drawui-gen-shape-grid",children:qn.map(f=>jsxs("button",{className:`drawui-gen-shape-btn${f.type===p?" drawui-gen-shape-active":""}`,onClick:()=>C(f.type),"data-drawui-tip":t(f.labelKey),children:[f.glyph,jsx("span",{className:"drawui-gen-shape-label",children:t(f.labelKey)})]},f.type))}),jsx("div",{className:"drawui-gen-menu-hint",children:t("menu.cancel")})]})}var to={select:"tool.select",hand:"tool.hand",rectangle:"tool.rectangle","rounded-rectangle":"tool.rounded-rectangle",circle:"tool.circle",ellipse:"tool.ellipse",diamond:"tool.diamond",triangle:"tool.triangle",hexagon:"tool.hexagon",parallelogram:"tool.parallelogram",trapezoid:"tool.trapezoid",pentagon:"tool.pentagon",octagon:"tool.octagon",star:"tool.star","uml-class":"tool.uml-class","uml-interface":"tool.uml-interface",line:"tool.line",arrow:"tool.arrow",text:"tool.text",draw:"tool.draw",pen:"tool.pen",highlighter:"tool.highlighter",eraser:"tool.eraser","mind-map":"tool.mind-map"};function no({initialTool:a="select",className:e="",themeColor:n,language:i="zh-CN",data:u,onChange:p,onReady:y}){let l=useRef(null),C=useRef(null),f=useRef(null),[c,v]=useState(null);X();let[B,I]=useState(a),[b,z]=useState(false),[k,D]=useState(0),[P,ue]=useState(false),[o,s]=useState("straight"),[d,q]=useState("end"),[Z,A]=useState(false),[V,se]=useState(100),[_,ee]=useState(null),[m,le]=useState(null),[Ne,Se]=useState(false),[pe,K]=useState(false),[he,ce]=useState(null),[Ce,ye]=useState(null),[fe,me]=useState(false),[Me,w]=useState(null),[x,oe]=useState(null),O=useRef(null),G=useRef(0),ie=useRef(null),ze=useRef(p);ze.current=p;let Be=useRef(y);Be.current=y,useEffect(()=>{if(!l.current)return;let t=new Editor(l.current,{theme:n?{primary:n,editBorder:n,selection:{outline:n,handleStroke:n,handleFill:"#ffffff",outlineFill:hexToRgba(n,.1),shadow:n}}:void 0,language:i,shapes:u,persist:!u});f.current=t,v(t),window.__drawuiEditor=t,Be.current?.(t),a&&t.setActiveTool(a);let g=t.subscribe(()=>{I(t.getActiveTool());let H=t.getSelectedIds();D(H.length);let T=t.getShapes().filter(xe=>H.includes(xe.id)&&(xe.type==="line"||xe.type==="arrow"));if(ue(T.length>0),T.length>0&&T[0].connectionType?s(T[0].connectionType):T.length>0&&s("straight"),T.length>0){let xe=T.find(at=>at.type==="arrow");xe&&(q(xe.arrowHead??"end"),A(xe.dashed??false));}se(Math.round(t.getCamera().getZoom()*100)),Se(t.canUndo()),K(t.canRedo());let we=t.getSelectedUml();ce(we),we||w(null);let Ve=t.getSelectedMindMap();ye(Ve),t.getMindMapEditingShapeId()||me(false),ze.current?.(t.getData());}),Y=t.subscribeNotifications(H=>{le(H),O.current&&clearTimeout(O.current),O.current=setTimeout(()=>le(null),2e3);}),R=t.subscribeUi(H=>{H.kind==="shapeTypeMenu"&&oe({x:H.screenX,y:H.screenY,context:H.context,existingArrowId:H.existingArrowId,defaultShapeType:H.defaultShapeType});});return ()=>{g(),Y(),R(),O.current&&clearTimeout(O.current),cancelAnimationFrame(G.current),t.dispose();}},[a]),useEffect(()=>{if(!n)return;let t=C.current;t&&(t.style.setProperty("--dw-primary",n),t.style.setProperty("--dw-primary-hover",shadeColor(n,-0.12)),t.style.setProperty("--dw-primary-weak",hexToRgba(n,.1)),t.style.setProperty("--dw-primary-contrast","#ffffff"),t.style.setProperty("--dw-shadow-primary",`0 2px 8px ${hexToRgba(n,.3)}`)),f.current?.setTheme({primary:n,editBorder:n,selection:{outline:n,handleStroke:n,handleFill:"#ffffff",outlineFill:hexToRgba(n,.1),shadow:n}});},[n]),useEffect(()=>{setLanguage(i),f.current?.setLanguage(i);},[i]);let Ae=useCallback(t=>{f.current?.setActiveTool(t);},[]),Oe=useCallback(()=>{f.current?.zoomIn();},[]),Ue=useCallback(()=>{f.current?.zoomOut();},[]),h=useCallback(()=>{f.current?.resetZoom();},[]),N=useCallback(()=>{let t=!b;z(t),f.current?.setShowGrid(t);},[b]),L=useCallback(()=>{f.current?.undo();},[]),E=useCallback(()=>{f.current?.redo();},[]),$=useCallback(t=>{f.current?.downloadImage("drawui",t,{background:"#ffffff"});},[]),F=useCallback(t=>{let g=f.current,Y=l.current;if(!g||!Y)return;if(g.isPointerDown()){ie.current!==null&&(ie.current=null,ee(null));return}let R=t.clientX,H=t.clientY;cancelAnimationFrame(G.current),G.current=requestAnimationFrame(()=>{let be=Y.getBoundingClientRect(),T=R-be.left,we=H-be.top,Ve=T+12,xe=we+12,at=g.getSelectedUml()?.id,$e=g.getUmlRowAtScreenPoint({x:T,y:we});if($e&&$e.shape.id!==at&&$e.text){ie.current!==$e.text&&(ie.current=$e.text,ee({text:$e.text,x:Ve,y:xe}));return}let We=g.getShapeAtScreenPoint({x:T,y:we});We&&We.text?ie.current!==We.text&&(ie.current=We.text,ee({text:We.text,x:Ve,y:xe})):ie.current!==null&&(ie.current=null,ee(null));});},[]),ge=useCallback(()=>{ee(null);},[]),Ke=useCallback(t=>{let g=f.current,Y=l.current;if(!g||!Y)return;let R=Y.getBoundingClientRect(),H=t.clientX-R.left,be=t.clientY-R.top,T=g.getUmlRowAtScreenPoint({x:H,y:be});if(T){w(T.shape.id);return}let we=g.getMindMapNodeAtScreenPoint({x:H,y:be});we&&g.beginMindMapEdit(we.shapeId,we.nodeId);},[]),Ee=useCallback(()=>{oe(null);},[]);return jsxs("div",{ref:C,className:`drawui-canvas-board ${e}`,children:[jsx("canvas",{ref:l,className:"drawui-canvas",onMouseMove:F,onMouseLeave:ge,onDoubleClick:Ke}),_&&jsx("div",{className:"drawui-tooltip",style:{left:_.x,top:_.y},children:_.text}),jsx(it,{activeTool:B,onToolChange:Ae,showGrid:b,onToggleGrid:N,canUndo:Ne,canRedo:pe,onUndo:L,onRedo:E,onExport:$}),jsx(lt,{onZoomIn:Oe,onZoomOut:Ue,onReset:h,zoomLevel:V}),jsx(It,{editor:c,selectedCount:k,hasLineSelection:P,currentConnectionType:o,currentArrowHead:d,currentDashed:Z}),jsx(Dt,{editor:c,umlClass:he,editing:Me}),jsx(Ut,{editor:c,panelOpen:fe,onOpenPanel:()=>me(true)}),fe&&jsx(Zt,{editor:c,mindMap:Ce}),jsx(Ft,{editor:c}),x&&jsx(Vt,{editor:c,x:x.x,y:x.y,context:x.context,existingArrowId:x.existingArrowId,defaultShapeType:x.defaultShapeType,onClose:Ee}),jsxs("div",{className:"drawui-status-bar",children:[jsx("div",{className:"drawui-status-item",children:jsx("span",{children:t(to[B])})}),jsx("div",{className:"drawui-status-item",children:jsx("span",{children:k===0?t("status.none"):t("status.selected",{n:k})})}),jsx("div",{className:"drawui-status-item",children:jsxs("span",{children:[V,"%"]})})]}),m&&jsxs("div",{className:"drawui-toast",children:[jsx("svg",{className:"drawui-toast-icon",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("polyline",{points:"20 6 9 17 4 12"})}),m]})]})}export{no as CanvasBoard,it as Toolbar,lt as ZoomControl};
|
|
1
|
+
import {memo,useState,useRef,useCallback,useEffect,useLayoutEffect}from'react';import {t,getContentBounds,UML_FONT_SIZE,MINDMAP_COLORS,layoutMindMap,getTheme,hexToRgba,subscribeTheme,getLanguage,subscribeLanguage,DEFAULT_HIGHLIGHTER_COLOR,UML_LINE_HEIGHT,UML_PADDING_Y,UML_PADDING_X,UML_HEADER_HEIGHT,MINDMAP_FONT_SIZE,Editor,shadeColor,setLanguage}from'drawui-core';import {jsxs,Fragment,jsx}from'react/jsx-runtime';function q(){let[n,e]=useState(getLanguage());return useEffect(()=>subscribeLanguage(()=>e(getLanguage())),[]),n}var Wt=["#ffeb3b","#22c55e","#3b82f6","#ec4899","#8b5cf6","#f97316"],_t="drawui:highlighterColor";function rt(){if(typeof window>"u")return DEFAULT_HIGHLIGHTER_COLOR;try{let n=window.localStorage.getItem(_t);return n&&/^#[0-9a-fA-F]{6}$/.test(n)?n.toLowerCase():DEFAULT_HIGHLIGHTER_COLOR}catch{return DEFAULT_HIGHLIGHTER_COLOR}}function Zt(n){if(!(typeof window>"u"))try{window.localStorage.setItem(_t,n);}catch{}}var ye=n=>`${n.x.toFixed(1)},${n.y.toFixed(1)}`,Gt=(n,e)=>{let t=e*Math.PI/180;return {x:n.x*Math.cos(t)-n.y*Math.sin(t),y:n.x*Math.sin(t)+n.y*Math.cos(t)}},Ye={x:Math.SQRT1_2,y:-Math.SQRT1_2},kt={x:4.6,y:19.4},Je={x:19,y:5};function Mt(n,e,t){let r={x:-t.y,y:t.x},u=s=>({x:e.x-t.x*s,y:e.y-t.y*s}),p=(s,i)=>({x:s.x+r.x*i,y:s.y+r.y*i});switch(n){case "end":{let s=u(5.6);return jsx("polygon",{points:`${ye(e)} ${ye(p(s,2.7))} ${ye(p(s,-2.7))}`,fill:"currentColor",stroke:"none"})}case "inheritance":case "realization":{let s=u(8.6);return jsx("polygon",{points:`${ye(e)} ${ye(p(s,3.5))} ${ye(p(s,-3.5))}`,fill:"none"})}case "aggregation":case "composition":{let s=u(4.3),i=u(8.6);return jsx("polygon",{points:`${ye(e)} ${ye(p(s,2.7))} ${ye(i)} ${ye(p(s,-2.7))}`,fill:n==="composition"?"currentColor":"none",stroke:"currentColor"})}case "dependency":{let s=Gt({x:-t.x,y:-t.y},30),i=Gt({x:-t.x,y:-t.y},-30);return jsx("path",{d:`M ${ye({x:e.x+s.x*5.8,y:e.y+s.y*5.8})} L ${ye(e)} L ${ye({x:e.x+i.x*5.8,y:e.y+i.y*5.8})}`,fill:"none"})}default:return null}}function Me(n,e){let t=e||n==="dependency"||n==="realization",r=t?{x:Je.x-Ye.x*8.6,y:Je.y-Ye.y*8.6}:Je,u={x:-Ye.x,y:-Ye.y};return jsxs("svg",{viewBox:"0 0 24 24",width:"18",height:"18",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("line",{x1:kt.x,y1:kt.y,x2:r.x,y2:r.y,strokeDasharray:t?"3 2.6":void 0}),(n==="end"||n==="both")&&Mt("end",Je,Ye),(n==="start"||n==="both")&&Mt("end",kt,u),n!=="none"&&n!=="start"&&n!=="end"&&n!=="both"?Mt(n,Je,Ye):null]})}var at=n=>jsx("svg",{viewBox:"0 0 24 24",width:"18",height:"18",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("path",{d:n})}),So=[{type:"straight",labelKey:"style.connection.straight",icon:at("M3 12h18")},{type:"polyline",labelKey:"style.connection.polyline",icon:at("M4 8 C 12 8, 12 16, 20 16")},{type:"orthogonal",labelKey:"style.connection.orthogonal",icon:at("M5 5v14h14")},{type:"curve",labelKey:"style.connection.curve",icon:at("M3 13 C 6 7, 9 7, 12 12 C 15 17, 18 17, 21 11")}],Ft=[{key:"none",arrowHead:"none",dashed:false,labelKey:"style.arrowhead.none",icon:Me("none",false)},{key:"end",arrowHead:"end",dashed:false,labelKey:"style.arrowhead.end",icon:Me("end",false)},{key:"start",arrowHead:"start",dashed:false,labelKey:"style.arrowhead.start",icon:Me("start",false)},{key:"both",arrowHead:"both",dashed:false,labelKey:"style.arrowhead.both",icon:Me("both",false)},{key:"none-dashed",arrowHead:"none",dashed:true,labelKey:"style.arrowhead.none-dashed",icon:Me("none",true)},{key:"both-dashed",arrowHead:"both",dashed:true,labelKey:"style.arrowhead.both-dashed",icon:Me("both",true)}],Yt=[{key:"inheritance",arrowHead:"inheritance",dashed:false,labelKey:"style.arrowhead.inheritance",icon:Me("inheritance",false)},{key:"composition",arrowHead:"composition",dashed:false,labelKey:"style.arrowhead.composition",icon:Me("composition",false)},{key:"aggregation",arrowHead:"aggregation",dashed:false,labelKey:"style.arrowhead.aggregation",icon:Me("aggregation",false)},{key:"dependency",arrowHead:"dependency",dashed:true,labelKey:"style.arrowhead.dependency",icon:Me("dependency",true)},{key:"realization",arrowHead:"realization",dashed:true,labelKey:"style.arrowhead.realization",icon:Me("realization",true)}],Vt=[...Ft,...Yt];function Co(n,e){let t=Vt.find(r=>r.arrowHead===n&&r.dashed===e);return t?t.key:Vt.find(r=>r.arrowHead===n)?.key}var st=memo(function({connectionType:e,arrowHead:t$1,dashed:r,onConnectionTypeChange:u,onArrowStyleChange:p,onOptionHover:s,onOptionLeave:i}){q();let M=Co(t$1,r),f=c=>jsx("div",{className:"drawui-connection-row",children:c.map(b=>jsxs("button",{className:`drawui-connection-btn${M===b.key?" active":""}`,onClick:()=>p(b),"data-drawui-tip":s?void 0:t(b.labelKey),onMouseEnter:s?P=>s(b.labelKey,P.currentTarget):void 0,onMouseLeave:s?i:void 0,"aria-label":t(b.labelKey),type:"button",children:[jsx("span",{className:"drawui-connection-icon",children:b.icon}),jsx("span",{className:"drawui-connection-label",children:t(b.labelKey)})]},b.key))});return jsxs(Fragment,{children:[jsx("div",{className:"drawui-style-popover-title",children:t("style.connection")}),jsx("div",{className:"drawui-connection-row",children:So.map(c=>jsxs("button",{className:`drawui-connection-btn${e===c.type?" active":""}`,onClick:()=>u(c.type),"data-drawui-tip":s?void 0:t(c.labelKey),onMouseEnter:s?b=>s(c.labelKey,b.currentTarget):void 0,onMouseLeave:s?i:void 0,"aria-label":t(c.labelKey),type:"button",children:[jsx("span",{className:"drawui-connection-icon",children:c.icon}),jsx("span",{className:"drawui-connection-label",children:t(c.labelKey)})]},c.type))}),jsx("div",{className:"drawui-style-popover-title",children:t("style.arrow")}),f(Ft),jsx("div",{className:"drawui-style-popover-title",children:t("style.uml")}),f(Yt)]})});var Xt=[{type:"rectangle",icon:jsx("rect",{x:"3",y:"5",width:"18",height:"14",rx:"0"})},{type:"rounded-rectangle",icon:jsx("rect",{x:"3",y:"5",width:"18",height:"14",rx:"4"})},{type:"circle",icon:jsx("circle",{cx:"12",cy:"12",r:"8"})},{type:"ellipse",icon:jsx("ellipse",{cx:"12",cy:"12",rx:"9",ry:"6"})},{type:"diamond",icon:jsx("path",{d:"M12 3L21 12L12 21L3 12Z"})},{type:"triangle",icon:jsx("path",{d:"M12 4L20 19L4 19Z"})},{type:"hexagon",icon:jsx("path",{d:"M12 3L20 7.5V16.5L12 21L4 16.5V7.5Z"})},{type:"parallelogram",icon:jsx("path",{d:"M7 5L20 5L17 19L4 19Z"})},{type:"trapezoid",icon:jsx("path",{d:"M6 5L18 5L21 19L3 19Z"})},{type:"pentagon",icon:jsx("path",{d:"M12 3L21 10L17.5 21L6.5 21L3 10Z"})},{type:"octagon",icon:jsx("path",{d:"M8 3L16 3L21 8L21 16L16 21L8 21L3 16L3 8Z"})},{type:"star",icon:jsx("path",{d:"M12 2L14.5 8.5L21 9L16 13.5L17.5 20L12 16.5L6.5 20L8 13.5L3 9L9.5 8.5Z"})},{type:"cylinder",icon:jsxs(Fragment,{children:[jsx("ellipse",{cx:"12",cy:"6.5",rx:"6",ry:"2.8"}),jsx("path",{d:"M6 6.5v11c0 1.5 2.7 2.8 6 2.8s6-1.3 6-2.8v-11"})]})},{type:"cloud",icon:jsx("path",{d:"M7 18.5h9.4a3.4 3.4 0 0 0 .3-6.8 5 5 0 0 0-9.5-1.2A3.9 3.9 0 0 0 7 18.5Z"})},{type:"heart",icon:jsx("path",{d:"M12 20.3S4.6 15.7 4.6 10.5A4.1 4.1 0 0 1 12 7.6a4.1 4.1 0 0 1 7.4 2.9c0 5.2-7.4 9.8-7.4 9.8Z"})},{type:"block-arrow-right",icon:jsx("path",{d:"M3 9h9V5l9 7-9 7v-4H3Z"})},{type:"block-arrow-left",icon:jsx("path",{d:"M21 9h-9V5L3 12l9 7v-4h9Z"})},{type:"block-arrow-up",icon:jsx("path",{d:"M9 21v-9H5l7-9 7 9h-4v9Z"})},{type:"block-arrow-down",icon:jsx("path",{d:"M9 3v9H5l7 9 7-9h-4V3Z"})},{type:"block-arrow-double",icon:jsx("path",{d:"M2 12l4.5-6v3.5h11V6L22 12l-4.5 6v-3.5h-11V18Z"})},{type:"right-triangle",icon:jsx("path",{d:"M4 4v16h16Z"})},{type:"cross",icon:jsx("path",{d:"M9.5 3h5v6.5H21v5h-6.5V21h-5v-6.5H3v-5h6.5Z"})},{type:"speech-rect",icon:jsx(Fragment,{children:jsx("path",{d:"M3 5h18v11H8l-3.2 3.2V16H3Z"})})},{type:"speech-round",icon:jsxs(Fragment,{children:[jsx("ellipse",{cx:"12",cy:"10.5",rx:"9",ry:"6.5"}),jsx("path",{d:"M8 16.2 6 21l5-3.4"})]})},{type:"cube",icon:jsxs(Fragment,{children:[jsx("path",{d:"M12 3 20 7.5v9L12 21 4 16.5v-9Z"}),jsx("path",{d:"M4 7.5 12 12l8-4.5M12 12v9"})]})},{type:"sector",icon:jsx("path",{d:"M12 3a9 9 0 1 0 9 9h-9Z"})},{type:"delay",icon:jsx("path",{d:"M3 5h12a7 7 0 0 1 0 14H3Z"})},{type:"predefined-process",icon:jsxs(Fragment,{children:[jsx("rect",{x:"3",y:"5",width:"18",height:"14"}),jsx("path",{d:"M6.5 5v14M17.5 5v14"})]})},{type:"document",icon:jsx("path",{d:"M3 5h18v10.5c-5 3.5-13-3.5-18 0Z"})},{type:"stadium",icon:jsx("rect",{x:"3",y:"6.5",width:"18",height:"11",rx:"5.5"})},{type:"chevron",icon:jsx("path",{d:"M2 4h9l9 8-9 8H2l8-8Z"})},{type:"brace-left",icon:jsxs(Fragment,{children:[jsx("path",{d:"M1 1C3.9 1 5.1 2.4 5.1 5.1c0 3.7 1.2 6.9 2.9 6.9-1.7 0-2.9 3.2-2.9 6.9 0 2.7-1.2 4.1-4.1 4.1"}),jsx("path",{d:"M12 9.6h10M12 14.4h10"})]})},{type:"brace-right",icon:jsxs(Fragment,{children:[jsx("path",{d:"M23 1c-2.9 0-4.1 1.4-4.1 4.1 0 3.7-1.2 6.9-2.9 6.9 1.7 0 2.9 3.2 2.9 6.9 0 2.7 1.2 4.1 4.1 4.1"}),jsx("path",{d:"M2 9.6h10M2 14.4h10"})]})},{type:"uml-class",icon:jsxs(Fragment,{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"})]})},{type:"uml-interface",icon:jsxs(Fragment,{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"})]})},{type:"class-catalog",icon:jsxs(Fragment,{children:[jsx("rect",{x:"3",y:"5",width:"18",height:"14",rx:"1.5"}),jsx("line",{x1:"6.6",y1:"5",x2:"6.6",y2:"19"}),jsx("line",{x1:"17.4",y1:"5",x2:"17.4",y2:"19"})]})}],No=[{key:"basic",labelKey:"shapeGroup.basic",items:[{type:"rectangle"},{type:"rounded-rectangle"},{type:"stadium"},{type:"circle"},{type:"ellipse"},{type:"diamond"},{type:"triangle"},{type:"right-triangle"},{type:"hexagon"},{type:"parallelogram"},{type:"trapezoid"},{type:"pentagon"},{type:"octagon"},{type:"star"}]},{key:"flowchart",labelKey:"shapeGroup.flowchart",items:[{type:"rectangle",labelKey:"flow.process"},{type:"rounded-rectangle",labelKey:"flow.step"},{type:"stadium",labelKey:"flow.startEnd"},{type:"diamond",labelKey:"flow.decision"},{type:"parallelogram",labelKey:"flow.data"},{type:"trapezoid",labelKey:"flow.manual"},{type:"hexagon",labelKey:"flow.preparation"},{type:"cylinder",labelKey:"flow.database"},{type:"delay",labelKey:"flow.delay"},{type:"predefined-process"},{type:"document"},{type:"block-arrow-right"},{type:"block-arrow-left"},{type:"block-arrow-up"},{type:"block-arrow-down"},{type:"block-arrow-double"}]},{key:"uml",labelKey:"shapeGroup.uml",items:[{type:"uml-class"},{type:"uml-interface"},{type:"rounded-rectangle",labelKey:"class.plain"},{type:"class-catalog"}]},{key:"other",labelKey:"shapeGroup.other",items:[{type:"cylinder"},{type:"cloud"},{type:"heart"},{type:"cross"},{type:"cube"},{type:"sector"},{type:"chevron"},{type:"speech-rect"},{type:"speech-round"},{type:"brace-left"},{type:"brace-right"}]}],Eo=new Map(Xt.map(n=>[n.type,n.icon])),Ro=new Set(Xt.map(n=>n.type)),Ho=[{type:"arrow",icon:"M5 12h14M12 5l7 7-7 7",labelKey:"toolbar.arrow"},{type:"text",icon:"M4 7V4h16v3M9 20h6M12 4v16",labelKey:"toolbar.text"}],Io="M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3Z",Po="M14 3l7 7-3 3-7-7 3-3zM9 8L3 14v3h3l6-6",Ao=[{type:"eraser",icon:"M7 21l-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21M22 21H7M5 11l9 9",labelKey:"toolbar.eraser"}],Ko="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",St=memo(function({activeTool:e,onToolChange:t$1,showGrid:r,onToggleGrid:u,canUndo:p=false,canRedo:s=false,onUndo:i,onRedo:M,onExport:f,onHighlighterColorChange:c,arrowStyle:b,onArrowStyleChange:P}){let[B,v]=useState(false),[$,x]=useState(false),[A,K]=useState(null),[fe,a]=useState(false),[w,d]=useState(false),[j,_]=useState(rt),O=useRef(null),Z=useRef(null),ee=useRef(null),G=useRef(null);q();let ce=[{format:"png",labelKey:"toolbar.export.png"},{format:"svg",labelKey:"toolbar.export.svg"},{format:"pdf",labelKey:"toolbar.export.pdf"}],g=()=>{O.current&&(clearTimeout(O.current),O.current=null),a(true);},te=()=>{O.current=window.setTimeout(()=>a(false),200);},ve=()=>{Z.current&&(clearTimeout(Z.current),Z.current=null),v(true);},me=()=>{Z.current=window.setTimeout(()=>{v(false),D();},200);},pe=()=>{ee.current&&(clearTimeout(ee.current),ee.current=null),x(true);},z=()=>{ee.current=window.setTimeout(()=>{x(false),D();},200);},de=(y,S)=>{let C=y.closest(".drawui-toolbar");if(!C)return;let k=y.getBoundingClientRect(),U=C.getBoundingClientRect(),V=k.bottom+46>window.innerHeight;K({label:S,x:k.left-U.left+k.width/2,y:V?k.top-U.top-8:k.bottom-U.top+8,above:V});},D=()=>K(null),ge=()=>{G.current&&(clearTimeout(G.current),G.current=null),d(true);},Se=()=>{G.current=window.setTimeout(()=>d(false),200);},be=y=>{_(y),Zt(y),c?.(y),t$1("highlighter");};return jsx("div",{className:"drawui-toolbar-container",children:jsxs("div",{className:"drawui-toolbar",children:[jsx("button",{className:`drawui-toolbar-button ${e==="select"?"active":""}`,onClick:()=>t$1("select"),"data-drawui-tip":t("toolbar.select"),children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("circle",{cx:"12",cy:"12",r:"3"})})}),jsx("button",{className:`drawui-toolbar-button ${e==="hand"?"active":""}`,onClick:()=>t$1("hand"),"data-drawui-tip":t("toolbar.hand"),children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("path",{d:Ko})})}),jsx("div",{className:"drawui-toolbar-divider"}),jsxs("div",{className:"drawui-toolbar-dropdown",onMouseEnter:ve,onMouseLeave:me,children:[jsx("button",{className:`drawui-toolbar-button ${Ro.has(e)?"active":""}`,onClick:()=>{t$1("rounded-rectangle"),v(false),D();},"data-drawui-tip":B?void 0:t("toolbar.shapes"),children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("rect",{x:"3",y:"5",width:"18",height:"14",rx:"4",ry:"4"})})}),B&&jsx("div",{className:"drawui-toolbar-shape-grid drawui-shape-menu",children:jsx("div",{className:"drawui-shape-menu-scroll",children:No.map(y=>jsxs("div",{className:"drawui-shape-group",children:[jsx("div",{className:"drawui-shape-group-title",children:t(y.labelKey)}),jsx("div",{className:"drawui-shape-group-grid",children:y.items.map(S=>{let C=S.labelKey??`tool.${S.type}`;return jsx("button",{type:"button",className:`drawui-toolbar-shape-item ${e===S.type?"active":""}`,onClick:()=>{t$1(S.type),v(false),D();},onMouseEnter:k=>de(k.currentTarget,C),onMouseLeave:D,"aria-label":t(C),children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:Eo.get(S.type)})},`${y.key}-${S.type}`)})})]},y.key))})})]}),jsx("div",{className:"drawui-toolbar-divider"}),jsxs("div",{className:"drawui-toolbar-dropdown",onMouseEnter:pe,onMouseLeave:z,children:[jsx("button",{className:`drawui-toolbar-button ${e==="arrow"?"active":""}`,onClick:()=>{t$1("arrow"),x(false),D();},"data-drawui-tip":$?void 0:t("toolbar.arrow"),children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("path",{d:"M5 12h14M12 5l7 7-7 7"})})}),$&&jsx("div",{className:"drawui-toolbar-shape-grid drawui-arrow-menu",onPointerDown:y=>{y.target.closest("button")||(x(false),D());},children:jsx(st,{connectionType:b?.connectionType??"straight",arrowHead:b?.arrowHead??"end",dashed:!!b?.dashed,onConnectionTypeChange:y=>{P?.({connectionType:y}),t$1("arrow"),x(false),D();},onArrowStyleChange:y=>{P?.({arrowHead:y.arrowHead,dashed:y.dashed}),t$1("arrow"),x(false),D();},onOptionHover:(y,S)=>de(S,y),onOptionLeave:D})})]}),Ho.filter(y=>y.type!=="arrow").map(y=>jsx("button",{className:`drawui-toolbar-button ${e===y.type?"active":""}`,onClick:()=>t$1(y.type),"data-drawui-tip":t(y.labelKey),children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("path",{d:y.icon})})},y.type)),jsx("div",{className:"drawui-toolbar-divider"}),jsx("button",{className:`drawui-toolbar-button ${e==="pen"?"active":""}`,onClick:()=>t$1("pen"),"data-drawui-tip":t("toolbar.pen"),children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("path",{d:Io})})}),jsxs("div",{className:"drawui-toolbar-dropdown",onMouseEnter:ge,onMouseLeave:Se,children:[jsxs("button",{className:`drawui-toolbar-button ${e==="highlighter"?"active":""}`,onClick:()=>t$1("highlighter"),"data-drawui-tip":w?void 0:t("toolbar.highlighter"),children:[jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("path",{d:Po})}),jsx("span",{className:"drawui-toolbar-color-chip",style:{background:j}})]}),w&&jsx("div",{className:"drawui-toolbar-shape-grid drawui-toolbar-highlighter-grid",children:Wt.map(y=>jsx("button",{type:"button","aria-label":y,className:`drawui-highlighter-swatch${j.toLowerCase()===y.toLowerCase()?" active":""}`,style:{background:y},onClick:()=>be(y)},y))})]}),jsx("div",{className:"drawui-toolbar-divider"}),Ao.map(y=>jsx("button",{className:`drawui-toolbar-button ${e===y.type?"active":""}`,onClick:()=>t$1(y.type),"data-drawui-tip":t(y.labelKey),children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("path",{d:y.icon})})},y.type)),jsx("button",{className:`drawui-toolbar-button ${e==="mind-map"?"active":""}`,onClick:()=>t$1("mind-map"),"data-drawui-tip":t("toolbar.mind-map"),children:jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("circle",{cx:"5",cy:"12",r:"2.4"}),jsx("path",{d:"M7.4 12h3.6"}),jsx("path",{d:"M11 12c0-2.6 1.6-4.4 3.4-4.4"}),jsx("path",{d:"M11 12c0 2.6 1.6 4.4 3.4 4.4"}),jsx("circle",{cx:"17.4",cy:"7.6",r:"1.7"}),jsx("circle",{cx:"17.4",cy:"16.4",r:"1.7"}),jsx("circle",{cx:"15.6",cy:"12",r:"1.7"})]})}),jsx("div",{className:"drawui-toolbar-divider"}),jsx("button",{className:`drawui-toolbar-button ${r?"active":""}`,onClick:u,"data-drawui-tip":t("toolbar.grid"),children:jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("rect",{x:"3",y:"3",width:"7",height:"7",rx:"1"}),jsx("rect",{x:"14",y:"3",width:"7",height:"7",rx:"1"}),jsx("rect",{x:"14",y:"14",width:"7",height:"7",rx:"1"}),jsx("rect",{x:"3",y:"14",width:"7",height:"7",rx:"1"})]})}),jsx("div",{className:"drawui-toolbar-divider"}),jsx("button",{className:"drawui-toolbar-button",onClick:i,disabled:!p,style:p?void 0:{opacity:.4,cursor:"default"},"data-drawui-tip":t("toolbar.undo"),children:jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("path",{d:"M3 7v6h6"}),jsx("path",{d:"M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"})]})}),jsx("button",{className:"drawui-toolbar-button",onClick:M,disabled:!s,style:s?void 0:{opacity:.4,cursor:"default"},"data-drawui-tip":t("toolbar.redo"),children:jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("path",{d:"M21 7v6h-6"}),jsx("path",{d:"M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3L21 13"})]})}),jsx("div",{className:"drawui-toolbar-divider"}),jsxs("div",{className:"drawui-toolbar-dropdown",onMouseEnter:g,onMouseLeave:te,children:[jsx("button",{className:"drawui-toolbar-button","data-drawui-tip":fe?void 0:t("toolbar.export"),children:jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("path",{d:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"}),jsx("polyline",{points:"7 10 12 15 17 10"}),jsx("line",{x1:"12",y1:"15",x2:"12",y2:"3"})]})}),fe&&jsx("div",{className:"drawui-toolbar-shape-grid drawui-toolbar-export-grid",children:ce.map(y=>jsx("button",{className:"drawui-toolbar-shape-item drawui-toolbar-export-item",onClick:()=>{f?.(y.format),a(false);},"data-drawui-tip":t(y.labelKey),children:t(y.labelKey)},y.format))})]}),A&&jsx("div",{className:`drawui-shape-tip ${A.above?"is-above":"is-below"}`,style:{left:A.x,top:A.y},children:t(A.label)})]})})});var Lt=memo(function({onZoomIn:e,onZoomOut:t$1,onReset:r,zoomLevel:u=100}){return q(),jsxs("div",{className:"drawui-zoom-control",children:[jsx("button",{className:"drawui-zoom-button",onClick:e,"data-drawui-tip":t("zoom.in"),children:jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("line",{x1:"12",y1:"5",x2:"12",y2:"19"}),jsx("line",{x1:"5",y1:"12",x2:"19",y2:"12"})]})}),jsxs("div",{className:"drawui-zoom-level",children:[u,"%"]}),jsx("button",{className:"drawui-zoom-button",onClick:t$1,"data-drawui-tip":t("zoom.out"),children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("line",{x1:"12",y1:"5",x2:"12",y2:"19"})})}),jsx("button",{className:"drawui-zoom-button",onClick:r,"data-drawui-tip":t("zoom.reset"),children:jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("path",{d:"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"}),jsx("path",{d:"M3 3v5h5"})]})})]})});var Jt=["#ffffff","#f1f5f9","#e2e8f0","#ede9fe","#dbeafe","#e0e7ff","#dcfce7","#fef9c3","#fee2e2"],Qt=["#0f172a","#475569","#94a3b8","#8b5cf6","#3b82f6","#1d4ed8","#16a34a","#eab308","#dc2626"],Uo=Jt.filter(n=>n!=="#f1f5f9"),Wo=[...Uo,...Qt],_o=[...Jt,...Qt],eo=15,to="drawui:customColors";function Zo(){if(typeof window>"u")return [];try{let n=window.localStorage.getItem(to);if(!n)return [];let e=JSON.parse(n);return Array.isArray(e)?e.filter(t=>typeof t=="string").slice(-eo):[]}catch{return []}}function Go(n){if(!(typeof window>"u"))try{window.localStorage.setItem(to,JSON.stringify(n));}catch{}}var jt=[{key:"fill",labelKey:"style.fill",hasTransparent:true,hasOpacity:true},{key:"stroke",labelKey:"style.stroke",hasTransparent:false,hasOpacity:true},{key:"text",labelKey:"style.text",hasTransparent:false},{key:"highlight",labelKey:"style.highlight",hasTransparent:true,hasOpacity:true}],qt=(n,e)=>!!n&&!!e&&n.toLowerCase()===e.toLowerCase(),et=10,Be=12,Ke=n=>!n||n==="transparent",oo=memo(function({editor:e,selectedCount:t$1,hasLineSelection:r,currentConnectionType:u,currentArrowHead:p,currentDashed:s}){q();let i=!!e?.getEditingShapeId(),[M,f]=useState(null),[c,b]=useState(null),[,P]=useState(0),B=useRef(null),v=useRef(null),$=useRef(null),[x,A]=useState({tw:168,th:42,pw:228,ph:160}),[K,fe]=useState(Zo),a=useRef(null),w=useCallback(l=>{let L=l.trim().toLowerCase();/^#[0-9a-f]{6}$/.test(L)&&fe(we=>{let h=we.filter(E=>E!==L);for(h.push(L);h.length>eo;)h.shift();return Go(h),h});},[]);if(useEffect(()=>{let l=a.current;if(!l)return;let L=()=>{l.value&&w(l.value);};return l.addEventListener("change",L),()=>l.removeEventListener("change",L)},[w,c]),useEffect(()=>{if(!e)return;let l=e.subscribe(()=>P(L=>(L+1)%1e6));return ()=>{l();}},[e]),useEffect(()=>{b(null);},[t$1,i]),useEffect(()=>{if(!c)return;let l=L=>{B.current&&!B.current.contains(L.target)&&b(null);};return document.addEventListener("pointerdown",l,true),()=>document.removeEventListener("pointerdown",l,true)},[c]),useLayoutEffect(()=>{let l=v.current?.offsetWidth??x.tw,L=v.current?.offsetHeight??x.th,we=$.current?.offsetWidth??x.pw,h=$.current?.offsetHeight??x.ph;A(E=>E.tw===l&&E.th===L&&E.pw===we&&E.ph===h?E:{tw:l,th:L,pw:we,ph:h});}),!e||t$1===0||i)return null;let d=e.getSelectedIds(),_=e.getShapes().filter(l=>d.includes(l.id)),O=_[0],Z=O?.id??"",ee=O?.style.fillColor,G=O?.style.strokeColor??"#1f2937",ce=O?.textColor??"#1f2937",g=O?.highlightColor,te={fill:ee,stroke:G,text:ce,highlight:g},ve={fill:O?.style.fillOpacity??1,stroke:O?.style.strokeOpacity??1,highlight:O?.highlightOpacity??1},me=l=>M&&M.key===`${Z}:${l}`?M.value:ve[l]??1,pe=(l,L)=>{switch(l){case "stroke":e.updateSelectedShapesStyle({strokeColor:L});break;case "fill":e.updateSelectedShapesStyle({fillColor:L});break;case "text":e.updateSelectedShapesText({textColor:L});break;case "highlight":e.updateSelectedShapesText({highlightColor:L});break}},z=(l,L)=>{f({key:`${Z}:${l}`,value:L}),l==="highlight"?e.updateSelectedShapesText({highlightOpacity:L}):l==="stroke"?e.updateSelectedShapesStyle({strokeOpacity:L}):e.updateSelectedShapesStyle({fillOpacity:L});},de=l=>e.updateConnectionType(l),D=l=>e.updateArrowStyle({arrowHead:l.arrowHead,dashed:l.dashed}),ge=!!r&&_.length>0&&_.every(l=>l.type==="line"||l.type==="arrow"),Se=_.length>0&&_.every(l=>l.type==="text"),be=ge?jt.filter(l=>l.key==="stroke"):jt,y=l=>l.key==="stroke"&&ge?"style.line":l.labelKey,S=c&&c!=="more"?be.find(l=>l.key===c):void 0,C=!!c&&(c==="more"||c==="prefix"||!!S),k=e.getCamera(),U=getContentBounds(_,0),V=k.pageToScreen({x:U.x,y:U.y}),oe=k.pageToScreen({x:U.x+U.width,y:U.y+U.height}),ke=window.innerWidth,Oe=window.innerHeight,he=oe.y+et,We=V.y-et,_e=x.th+(C?et+x.ph:0),je=he+_e<=Oe-Be,m=We-_e>=Be,R=je||!m,H=(V.x+oe.x)/2,I=(l,L,we)=>Math.max(L,Math.min(l,Math.max(L,we))),J=I(H-x.tw/2,Be,ke-x.tw-Be),Y=R?he:We-x.th,ze=I(H-x.pw/2,Be,ke-x.pw-Be),Ze=C?I(R?Y+x.th+et:Y-et-x.ph,Be,Oe-x.ph-Be):0;return jsxs("div",{className:"drawui-style-floating",ref:B,children:[jsxs("div",{className:"drawui-style-toolbar",ref:v,style:{left:J,top:Y},children:[be.map(l=>jsxs("button",{className:`drawui-style-tool-btn${c===l.key?" active":""}`,onClick:()=>b(c===l.key?null:l.key),"data-drawui-tip":t(y(l)),type:"button",children:[l.key==="fill"&&jsx("span",{className:`drawui-st-swatch${Ke(ee)?" drawui-st-none":""}`,style:Ke(ee)?void 0:{background:ee}}),l.key==="stroke"&&(ge?jsx("span",{className:`drawui-st-line${Ke(G)?" drawui-st-line-none":""}`,style:Ke(G)?void 0:{background:G}}):jsx("span",{className:`drawui-st-frame${Ke(G)?" drawui-st-frame-none":""}`,style:Ke(G)?void 0:{borderColor:G}})),l.key==="text"&&jsx("span",{className:"drawui-st-text",style:{color:ce},children:"A"}),l.key==="highlight"&&jsx("span",{className:`drawui-st-hl${Ke(g)?" drawui-st-none":""}`,style:Ke(g)?void 0:{background:g},children:"A"})]},l.key)),r&&jsx("button",{className:`drawui-style-tool-btn${c==="more"?" active":""}`,onClick:()=>b(c==="more"?null:"more"),"data-drawui-tip":t("style.connection"),type:"button",children:"\u22EF"}),Se&&jsx("button",{className:`drawui-style-tool-btn${c==="prefix"?" active":""}`,onClick:()=>b(c==="prefix"?null:"prefix"),"data-drawui-tip":t("style.prefix"),type:"button",children:jsxs("svg",{viewBox:"0 0 24 24",width:"18",height:"18",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",children:[jsx("circle",{cx:"5",cy:"8",r:"1.7",fill:"currentColor",stroke:"none"}),jsx("circle",{cx:"5",cy:"16",r:"1.7",fill:"currentColor",stroke:"none"}),jsx("line",{x1:"10.5",y1:"8",x2:"20",y2:"8"}),jsx("line",{x1:"10.5",y1:"16",x2:"20",y2:"16"})]})})]}),C&&jsx("div",{className:"drawui-style-popover",ref:$,style:{left:ze,top:Ze},children:c==="prefix"?jsxs(Fragment,{children:[jsx("div",{className:"drawui-style-popover-title",children:t("style.prefix")}),jsx("div",{className:"drawui-muted-hint",children:t("style.prefix.soon")})]}):S?jsxs(Fragment,{children:[jsx("div",{className:"drawui-style-popover-title",children:t(y(S))}),jsxs("div",{className:"drawui-color-row",children:[S.hasTransparent&&jsx("button",{className:`drawui-color-swatch drawui-color-swatch-transparent${Ke(te[S.key])?" active":""}`,onClick:()=>pe(S.key,"transparent"),"aria-label":t("style.none"),type:"button"}),(S.hasTransparent?Wo:_o).map(l=>jsx("button",{className:`drawui-color-swatch${qt(l,te[S.key])?" active":""}`,style:{background:l},onClick:()=>pe(S.key,l),"aria-label":l,type:"button"},l)),K.map(l=>jsx("button",{className:`drawui-color-swatch drawui-color-custom${qt(l,te[S.key])?" active":""}`,style:{background:l},onClick:()=>pe(S.key,l),"aria-label":l,type:"button"},`custom-${l}`)),jsxs("span",{className:"drawui-color-swatch drawui-color-add","data-drawui-tip":t("style.addColor"),children:["+",jsx("input",{ref:a,type:"color",defaultValue:"#3b82f6",className:"drawui-color-add-input","aria-label":t("style.addColor")})]})]}),S.hasOpacity&&jsxs("div",{className:"drawui-opacity-row",children:[jsx("span",{className:"drawui-opacity-label",children:t("style.opacity")}),jsx("input",{type:"range",min:0,max:100,value:Math.round(me(S.key)*100),onChange:l=>z(S.key,Number(l.target.value)/100),className:"drawui-opacity-slider"}),jsxs("span",{className:"drawui-opacity-value",children:[Math.round(me(S.key)*100),"%"]})]})]}):jsx(Fragment,{children:jsx(st,{connectionType:u??"straight",arrowHead:p??"end",dashed:!!s,onConnectionTypeChange:de,onArrowStyleChange:D})})})]})});var Rt=14,ao=20,Jo=["#1f2937","#ef4444","#f97316","#facc15","#22c55e","#3b82f6","#8b5cf6","#ec4899","#9ca3af"],Qo=[12,14,16,18,20,24];function io(n,e,t){let r=n,u=t,p=r.charAt(0);if(r.length>1&&(p==="+"||p==="-"||p==="#"||p==="~")&&r.charAt(1)===" "&&(u=p,r=r.slice(2)),r=r.replace(/^\s+|\s+$/g,""),e==="attribute"){let b=r.indexOf(":");return b===-1?{visibility:u,name:r,type:"",params:"",returnType:""}:{visibility:u,name:r.slice(0,b).replace(/^\s+|\s+$/g,""),type:r.slice(b+1).replace(/^\s+|\s+$/g,""),params:"",returnType:""}}let s=r.indexOf("(");if(s===-1){let b=r.lastIndexOf(":");return b===-1?{visibility:u,name:r,type:"",params:"",returnType:""}:{visibility:u,name:r.slice(0,b).replace(/^\s+|\s+$/g,""),type:"",params:"",returnType:r.slice(b+1).replace(/^\s+|\s+$/g,"")}}let i=r.slice(0,s).replace(/^\s+|\s+$/g,""),M=r.indexOf(")",s);if(M===-1)return {visibility:u,name:i,type:"",params:r.slice(s+1).replace(/^\s+|\s+$/g,""),returnType:""};let f=r.slice(s+1,M).replace(/^\s+|\s+$/g,""),c=r.slice(M+1).replace(/^\s+|\s+$/g,"");return c.startsWith(":")&&(c=c.slice(1).replace(/^\s+|\s+$/g,"")),{visibility:u,name:i,type:"",params:f,returnType:c}}function en(n,e){let t=`${e.visibility} `;return n==="attribute"?`${t}${e.name}: ${e.type??""}`:`${t}${e.name}(${e.params??""}): ${e.returnType??""}`}var lo=memo(function({editor:e,umlClass:t$1,editing:r}){let[,u]=useState(0);q(),useEffect(()=>{if(!e)return;let m=e.subscribe(()=>u(R=>R+1));return ()=>{m();}},[e]);let[p,s]=useState(null),[i,M]=useState(false),f=useRef(null),c=useRef(null),b=useCallback((m,R)=>{f.current&&(clearTimeout(f.current),f.current=null),s({section:m,rowId:R}),M(false);},[]),P=useCallback(()=>{f.current&&clearTimeout(f.current),f.current=window.setTimeout(()=>{s(null),M(false);},150);},[]);if(!e||!t$1||r!==t$1.id)return null;let B=e.getCamera(),{id:v,x:$,y:x,width:A,height:K,className:fe,methods:a}=t$1,w=t$1.type==="uml-interface",d=w?[]:t$1.attributes,j=A/2,_=K/2,O=UML_HEADER_HEIGHT,Z=UML_LINE_HEIGHT,ee=UML_PADDING_X,G=UML_PADDING_Y,ce=w?0:d.length>0?d.length*Z+G*2:G*2,g=B.zoom,te=(A-ee*2)*g,ve=4*g,me=B.pageToScreen({x:$-j+ee,y:x}),pe=B.pageToScreen({x:$,y:x-_+O/2}),z=m=>B.pageToScreen({x:$,y:m}).y,de=Z*g,D=m=>x+(-_+O+G+Z/2+m*Z),ge=m=>x+(-_+O+ce+G+Z/2+m*Z),Se=x+(-_+O+ce),be=x+_,y={background:"#ffffff",borderWidth:1,borderStyle:"solid",borderColor:"transparent",outline:"none",padding:0,fontFamily:"sans-serif",boxSizing:"border-box"},S=(m,R)=>{let H=d.find(J=>J.id===m);if(!H)return;let I=io(R,"attribute",H.visibility);e.updateUmlClass(v,{attributes:d.map(J=>J.id===m?{...J,...I}:J)});},C=(m,R)=>{let H=a.find(Y=>Y.id===m);if(!H)return;let I=io(R,"method",H.visibility),J=a.map(Y=>Y.id===m?{...Y,...I}:Y);w?e.updateUmlInterface(v,{methods:J}):e.updateUmlClass(v,{methods:J});},k=(m,R,H)=>{c.current={section:m,from:R},H.dataTransfer.effectAllowed="move",H.dataTransfer.setData("text/plain",`${m}:${R}`);},U=m=>{m.preventDefault(),m.dataTransfer.dropEffect="move";},V=(m,R,H)=>{H.preventDefault();let I=c.current;!I||I.section!==m||(m==="attribute"?e.reorderUmlAttribute(v,I.from,R):e.reorderUmlMethod(v,I.from,R),c.current=null);},oe=(m,R,H,I)=>{let J=z(I),Y=p?.section===m&&p.rowId===H.id,ze=(H.fontSize||UML_FONT_SIZE)*g,Ze=H.textColor||"#1f2937",l={position:"absolute",left:me.x-Rt*g-ve,top:J-de/2,width:Rt*g+ve+te+ao*g,height:de,display:"flex",alignItems:"center",gap:2,pointerEvents:"none",zIndex:53},L={...y,width:te,height:de-2,fontSize:ze,color:Ze,textDecoration:H.strikethrough?"line-through":"none",pointerEvents:"auto",...Y?{borderColor:"var(--dw-primary)"}:{}},we={width:Rt*g,height:de-2,cursor:"grab",color:"#9ca3af",display:"flex",alignItems:"center",justifyContent:"center",userSelect:"none",fontSize:12*g,lineHeight:1,opacity:Y?1:.55,pointerEvents:"auto"},h={width:ao*g,height:de-6,border:"none",background:"transparent",color:"#9ca3af",cursor:"pointer",borderRadius:3,fontSize:14*g,opacity:Y?1:.35,pointerEvents:"auto"};return jsxs("div",{style:l,onDragOver:U,onDrop:E=>V(m,R,E),children:[jsx("span",{style:we,draggable:true,onDragStart:E=>k(m,R,E),"data-drawui-tip":t("uml.drag"),children:"\u22EE\u22EE"}),jsx("input",{style:L,value:en(m,H),onChange:E=>m==="attribute"?S(H.id,E.target.value):C(H.id,E.target.value),onFocus:()=>b(m,H.id),onBlur:P,spellCheck:false}),jsx("button",{style:h,onMouseDown:E=>E.preventDefault(),onClick:()=>{m==="attribute"?e.removeUmlAttribute(v,H.id):e.removeUmlMethod(v,H.id);},"data-drawui-tip":t("uml.delete"),children:"\xD7"})]},H.id)},ke=(m,R,H)=>{let I=z(R),J=m==="attribute";return jsxs("button",{onMouseDown:Y=>Y.preventDefault(),onClick:()=>J?e.addUmlAttribute(v):e.addUmlMethod(v),className:"drawui-uml-add-row",style:{position:"absolute",left:me.x,top:I-9*g,height:18*g,padding:`0 ${6*g}px`,fontSize:11*g,lineHeight:1,border:"1px dashed #cbd5e1",background:"rgba(255,255,255,0.85)",color:"#64748b",borderRadius:3,cursor:"pointer",pointerEvents:"auto",display:"flex",alignItems:"center",gap:3,whiteSpace:"nowrap",zIndex:53},"data-drawui-tip":H,children:[jsx("span",{style:{fontSize:13*g,lineHeight:1},children:"+"}),jsx("span",{children:H})]},`add-${m}`)},Oe=()=>{if(!p||p.section==="className")return null;let m=p.section,R=p.rowId,I=(m==="attribute"?d:a).find(T=>T.id===R);if(!I)return null;let J=224*g,Y=30*g,ze=B.pageToScreen({x:$,y:x}).x,Ze=B.pageToScreen({x:$,y:x-_}).y,l=20*g,L=Ze-Y-l,we=ze-J/2,h=L+Y,E=I.textColor||"#1f2937",Ie=I.fontSize||UML_FONT_SIZE,Ce=!!I.strikethrough;return jsxs(Fragment,{children:[jsx("div",{style:{position:"absolute",left:ze-.5,top:h,width:1,height:l,background:"#d1d5db",pointerEvents:"none",zIndex:59}}),jsxs("div",{className:"drawui-uml-toolbar",style:{position:"absolute",left:we,top:L,width:J,height:Y,background:"#ffffff",border:"1px solid #e5e7eb",borderRadius:6,boxShadow:"0 4px 12px rgba(0, 0, 0, 0.1)",display:"flex",alignItems:"center",gap:4*g,padding:`0 ${6*g}px`,pointerEvents:"auto",zIndex:60,fontSize:12*g},onMouseDown:T=>T.preventDefault(),children:[jsxs("div",{style:{position:"relative"},children:[jsxs("button",{onClick:()=>M(T=>!T),className:"drawui-uml-toolbar-btn","data-drawui-tip":t("uml.textColor"),style:{border:"none",background:"transparent",cursor:"pointer",padding:2,display:"flex",alignItems:"center",borderRadius:3},children:[jsx("span",{style:{fontWeight:700,color:E,fontSize:13*g,textDecoration:Ce?"line-through":"none"},children:"A"}),jsx("span",{style:{width:10*g,height:2*g,background:E,marginLeft:3,borderRadius:1}})]}),i&&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(v,m,I.id,{textColor:null}),M(false);},style:{width:14,height:14,border:"1px solid #e5e7eb",background:"transparent",cursor:"pointer",borderRadius:2},"data-drawui-tip":t("uml.defaultColor")}),Jo.map(T=>jsx("button",{onClick:()=>{e.updateUmlRowStyle(v,m,I.id,{textColor:T}),M(false);},style:{width:14,height:14,border:"none",background:T,cursor:"pointer",borderRadius:2},"data-drawui-tip":T},T))]})]}),jsx("select",{value:Ie,onChange:T=>e.updateUmlRowStyle(v,m,I.id,{fontSize:Number(T.target.value)}),style:{border:"1px solid #e5e7eb",borderRadius:3,padding:`0 ${2*g}px`,fontSize:12*g,height:20*g,background:"#ffffff"},"data-drawui-tip":t("uml.fontSize"),children:Qo.map(T=>jsx("option",{value:T,children:T},T))}),jsx("button",{onClick:()=>e.updateUmlRowStyle(v,m,I.id,{strikethrough:!Ce}),className:"drawui-uml-toolbar-btn","data-drawui-tip":t("uml.strikethrough"),style:{border:"none",background:Ce?"var(--dw-primary-weak)":"transparent",cursor:"pointer",padding:2,borderRadius:3},children:jsx("span",{style:{fontWeight:700,fontSize:13*g,textDecoration:"line-through"},children:"A"})}),jsx("button",{onClick:()=>{m==="attribute"?e.removeUmlAttribute(v,I.id):e.removeUmlMethod(v,I.id),s(null);},className:"drawui-uml-toolbar-btn","data-drawui-tip":t("uml.delete"),style:{border:"none",background:"transparent",cursor:"pointer",color:"#ef4444",padding:2,marginLeft:"auto",borderRadius:3},children:jsxs("svg",{width:14*g,height:14*g,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("polyline",{points:"3 6 5 6 21 6"}),jsx("path",{d:"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"}),jsx("path",{d:"M10 11v6"}),jsx("path",{d:"M14 11v6"}),jsx("path",{d:"M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"})]})})]})]})},he=B.pageToScreen({x:$-j,y:x}).x,We=B.pageToScreen({x:$,y:x-_}).y,_e=A*g,je=K*g;return jsxs("div",{style:{position:"absolute",inset:0,pointerEvents:"none",zIndex:50},children:[jsx("div",{style:{position:"absolute",left:he+1,top:We+1,width:Math.max(0,_e-2),height:Math.max(0,je-2),background:"#ffffff",pointerEvents:"none",zIndex:51}}),jsx("input",{style:{...y,position:"absolute",left:pe.x-te/2,top:pe.y-O*g/2+2,width:te,height:O*g-4,textAlign:"center",fontWeight:700,fontSize:(t$1.fontSize||UML_FONT_SIZE)*g,color:t$1.textColor||"#1f2937",pointerEvents:"auto",zIndex:52,...p?.section==="className"?{borderColor:"var(--dw-primary)"}:{}},value:fe,onChange:m=>w?e.updateUmlInterface(v,{className:m.target.value}):e.updateUmlClass(v,{className:m.target.value}),onFocus:()=>b("className",""),onBlur:P,spellCheck:false}),!w&&jsxs(Fragment,{children:[d.map((m,R)=>oe("attribute",R,m,D(R))),ke("attribute",Se,"\u5C5E\u6027")]}),a.map((m,R)=>oe("method",R,m,ge(R))),ke("method",be,t("uml.method")),Oe()]})});var po=memo(function({editor:e,panelOpen:t$1,onOpenPanel:r}){let[,u]=useState(0);q(),useEffect(()=>{if(!e)return;let A=e.subscribe(()=>u(K=>K+1));return ()=>{A();}},[e]);let p=useRef(false),s=useRef(false);if(!e)return null;let i=e.getMindMapEditingShapeId();if(!i||t$1)return null;let M=e.getMindMapSelectedNode();if(!M||M.shapeId!==i)return null;let f=e.getMindMapNode(i,M.nodeId),c=e.getMindMapNodeScreenRect(i,M.nodeId);if(!f||!c)return null;let b=e.getCamera().getZoom(),P=MINDMAP_FONT_SIZE*b,B=Math.max(100,c.width+24),v=c.height+8,$={position:"absolute",left:c.x+c.width/2,top:c.y-4,transform:"translateX(-50%)",width:B,height:v,border:"1.5px solid var(--dw-primary, #3b82f6)",borderRadius:6,background:"#ffffff",boxShadow:"0 2px 10px rgba(0,0,0,0.15)",outline:"none",padding:`0 ${(f.icon?24:12)*b}px`,fontFamily:"sans-serif",fontSize:P,color:"#1f2937",boxSizing:"border-box",pointerEvents:"auto",zIndex:55},x={position:"absolute",left:c.x+c.width+12,top:c.y+c.height/2-11,width:22,height:22,border:"1px solid #e5e7eb",background:"#ffffff",borderRadius:"50%",cursor:"pointer",color:"#6b7280",fontSize:13,lineHeight:1,display:"flex",alignItems:"center",justifyContent:"center",boxShadow:"0 1px 4px rgba(0,0,0,0.12)",pointerEvents:"auto",zIndex:55};return jsxs("div",{style:{position:"absolute",inset:0,pointerEvents:"none",zIndex:50},children:[jsx("input",{autoFocus:true,style:$,value:f.text,spellCheck:false,onChange:A=>{let K=!p.current;p.current=true,e.updateMindMapNode(i,M.nodeId,{text:A.target.value},K);},onBlur:()=>{if(s.current){s.current=false;return}e.exitMindMapEdit();},onKeyDown:A=>{A.key==="Enter"?A.target.blur():A.key==="Escape"&&e.exitMindMapEdit();}}),jsx("button",{style:x,"data-drawui-tip":t("mindmap.more"),onMouseDown:A=>{A.preventDefault(),s.current=true,setTimeout(()=>{s.current=false;},300);},onClick:r,children:"\u22EF"})]})});var ho=[...MINDMAP_COLORS,"#1f2937","#9ca3af"],yo=["\u{1F4A1}","\u2B50","\u{1F525}","\u{1F4CC}","\u2705","\u2757","\u26A0\uFE0F","\u{1F3F7}\uFE0F"],yn={position:"absolute",width:232,background:"rgba(255,255,255,0.96)",border:"1px solid #e5e7eb",borderRadius:8,boxShadow:"0 6px 20px rgba(0,0,0,0.12)",padding:"10px 12px",fontSize:12,color:"#1f2937",zIndex:70,boxSizing:"border-box",fontFamily:"sans-serif"},Ht={fontSize:11,color:"#6b7280",marginBottom:4,display:"block"},pt={display:"flex",gap:4,alignItems:"center",flexWrap:"wrap"},ht={border:"1px solid #e5e7eb",background:"#ffffff",borderRadius:5,padding:"3px 8px",fontSize:12,color:"#374151",cursor:"pointer",lineHeight:1.5},It={width:"100%",border:"1px solid #e5e7eb",borderRadius:5,padding:"4px 8px",fontSize:12,outline:"none",boxSizing:"border-box",background:"#ffffff",color:"#1f2937"},fo=memo(function({editor:e,mindMap:t$1}){let[,r]=useState(0);q(),useEffect(()=>{if(!e)return;let a=e.subscribe(()=>r(w=>w+1));return ()=>{a();}},[e]);let u=useRef(null);if(!e||!t$1||e.getMindMapEditingShapeId()!==t$1.id)return null;let p=e.getMindMapSelectedNode();if(!p||p.shapeId!==t$1.id)return null;let s=a=>{if(a.id===p.nodeId)return a;for(let w of a.children??[]){let d=s(w);if(d)return d}return null},i=s(t$1.root);if(!i)return null;let M=e.getCamera(),c=layoutMindMap(t$1.root).positions.get(i.id);if(!c)return null;let b=M.zoom,P=M.pageToScreen({x:t$1.x+c.x,y:t$1.y+c.y}),B=P.x+c.width*b/2+14,v=P.y-80,x=Math.max(8,Math.min(B,(window.innerWidth||1024)-232-8)),A=Math.max(8,Math.min(v,(window.innerHeight||768)-320)),K=a=>{e.updateMindMapNode(t$1.id,i.id,a);},fe=!!i.id&&i.id!==t$1.root.id;return jsxs("div",{ref:u,style:{...yn,left:x,top:A},onMouseDown:a=>a.stopPropagation(),children:[jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:8},children:[jsx("span",{style:{fontWeight:600,fontSize:12},children:t("mindmap.nodeText")}),jsx("button",{onClick:()=>e.exitMindMapEdit(),"data-drawui-tip":t("mindmap.close"),style:{border:"none",background:"transparent",cursor:"pointer",color:"#9ca3af",fontSize:14,lineHeight:1,padding:2},children:"\xD7"})]}),jsx("input",{style:{...It,marginBottom:8},value:i.text,onChange:a=>K({text:a.target.value}),spellCheck:false}),jsxs("div",{style:{...pt,marginBottom:10},children:[jsxs("button",{style:ht,onClick:()=>e.addMindMapChild(t$1.id,i.id),children:["+ ",t("mindmap.addChild")]}),fe&&jsxs("button",{style:ht,onClick:()=>e.addMindMapSibling(t$1.id,i.id),children:["+ ",t("mindmap.addSibling")]}),!!i.children?.length&&jsx("button",{style:ht,onClick:()=>e.toggleMindMapCollapse(t$1.id,i.id),children:i.collapsed?t("mindmap.expand"):t("mindmap.collapse")}),jsx("button",{style:{...ht,color:"#ef4444",borderColor:"#fecaca",marginLeft:"auto"},onClick:()=>e.deleteMindMapNode(t$1.id,i.id),children:t("mindmap.deleteNode")})]}),jsx("span",{style:Ht,children:t("mindmap.color")}),jsxs("div",{style:{...pt,marginBottom:10},children:[jsx("button",{"data-drawui-tip":t("mindmap.levelColor"),onClick:()=>K({color:void 0}),style:{width:18,height:18,borderRadius:4,border:"1.5px solid #d1d5db",background:"conic-gradient(#ef4444, #f59e0b, #10b981, #3b82f6, #8b5cf6, #ec4899, #ef4444)",cursor:"pointer",flexShrink:0}}),ho.map(a=>jsx("button",{"data-drawui-tip":a,onClick:()=>K({color:a}),style:{width:18,height:18,borderRadius:4,border:i.color===a?"2px solid #111827":"1px solid #d1d5db",background:a,cursor:"pointer",flexShrink:0}},a))]}),jsx("span",{style:Ht,children:t("mindmap.icon")}),jsxs("div",{style:{...pt,marginBottom:10},children:[jsx("button",{"data-drawui-tip":t("mindmap.noIcon"),onClick:()=>K({icon:void 0}),style:{width:22,height:22,borderRadius:4,border:i.icon?"1px solid #d1d5db":"2px solid #111827",background:"#f9fafb",cursor:"pointer",fontSize:11,color:"#9ca3af",lineHeight:1},children:"\u2205"}),yo.map(a=>jsx("button",{onClick:()=>K({icon:a}),style:{width:22,height:22,borderRadius:4,border:i.icon===a?"2px solid #111827":"1px solid #d1d5db",background:"#f9fafb",cursor:"pointer",fontSize:13,lineHeight:1},children:a},a)),jsx("input",{placeholder:"\u270F\uFE0F",defaultValue:i.icon&&!yo.includes(i.icon)?i.icon:"",onKeyDown:a=>{if(a.key==="Enter"){let w=a.target.value.trim();K({icon:w||void 0});}},onBlur:a=>{let w=a.target.value.trim();w!==i.icon&&K({icon:w||void 0});},style:{...It,width:56,padding:"2px 4px",textAlign:"center"}})]}),jsx("span",{style:Ht,children:t("mindmap.note")}),jsx("input",{style:{...It,marginBottom:6},value:i.note??"",placeholder:t("mindmap.notePlaceholder"),onChange:a=>K({note:a.target.value||void 0}),spellCheck:false}),!!i.note&&jsxs("div",{style:{...pt,marginTop:4},children:[jsx("span",{style:{fontSize:11,color:"#6b7280"},children:t("mindmap.noteColor")}),jsx("button",{"data-drawui-tip":t("mindmap.noteColorDefault"),onClick:()=>K({noteColor:void 0}),style:{width:16,height:16,borderRadius:3,border:i.noteColor?"1px solid #d1d5db":"2px solid #111827",background:"repeating-conic-gradient(#ef4444 0% 25%, #f59e0b 0% 50%, #10b981 0% 75%, #3b82f6 0% 100%)",cursor:"pointer"}}),ho.map(a=>jsx("button",{onClick:()=>K({noteColor:a}),style:{width:16,height:16,borderRadius:3,border:i.noteColor===a?"2px solid #111827":"1px solid #d1d5db",background:a,cursor:"pointer"}},a))]})]})});var At=220,Kt=140,wn="#fafafa";function xn(n,e){let t=Math.min(n.x,e.x),r=Math.min(n.y,e.y),u=Math.max(n.x+n.width,e.x+e.width),p=Math.max(n.y+n.height,e.y+e.height);return {x:t,y:r,width:u-t,height:p-r}}function vn(n){return {x:n.x+n.width/2,y:n.y+n.height/2}}function kn(){return {x:0,y:0,width:0,height:0}}function Mn(n){let e=1/0,t=1/0,r=-1/0,u=-1/0,p=false;for(let s of n){let i=zt(s);i&&(p=true,i.x<e&&(e=i.x),i.y<t&&(t=i.y),i.x+i.width>r&&(r=i.x+i.width),i.y+i.height>u&&(u=i.y+i.height));}return p?{x:e,y:t,width:r-e,height:u-t}:null}function zt(n){switch(n.type){case "rectangle":case "rounded-rectangle":case "ellipse":case "diamond":case "triangle":case "hexagon":case "parallelogram":case "trapezoid":case "pentagon":case "octagon":case "star":case "cylinder":case "cloud":case "heart":case "block-arrow-right":case "block-arrow-left":case "block-arrow-up":case "block-arrow-down":case "block-arrow-double":case "right-triangle":case "cross":case "speech-rect":case "speech-round":case "cube":case "sector":case "delay":case "predefined-process":case "document":case "stadium":case "class-catalog":case "chevron":case "brace-left":case "brace-right":case "uml-class":case "uml-interface":case "mind-map":case "text":return {x:n.x-n.width/2,y:n.y-n.height/2,width:n.width,height:n.height};case "circle":return {x:n.x-n.radius,y:n.y-n.radius,width:n.radius*2,height:n.radius*2};case "line":case "arrow":{let e=n.points;if(!e||e.length===0)return null;let t=1/0,r=1/0,u=-1/0,p=-1/0;for(let s of e)s.x<t&&(t=s.x),s.y<r&&(r=s.y),s.x>u&&(u=s.x),s.y>p&&(p=s.y);return {x:t,y:r,width:u-t,height:p-r}}case "draw":{let e=n,t=e.width,r=e.height;if(typeof t=="number"&&typeof r=="number")return {x:e.x-t/2,y:e.y-r/2,width:t,height:r};let u=e.points;if(!u||u.length===0)return null;let p=1/0,s=1/0,i=-1/0,M=-1/0;for(let f of u){let c=f.x+e.x,b=f.y+e.y;c<p&&(p=c),b<s&&(s=b),c>i&&(i=c),b>M&&(M=b);}return {x:p,y:s,width:i-p,height:M-s}}default:return null}}function Sn(n){let e=n.getCamera(),t=e.screenToPage({x:0,y:0}),r=e.screenToPage({x:window.innerWidth,y:window.innerHeight});return {x:t.x,y:t.y,width:r.x-t.x,height:r.y-t.y}}function Cn(n,e,t){if(n.width<=0||n.height<=0)return {x:n.x-e/2,y:n.y-t/2,width:e,height:t};let r=e/t,u=n.width,p=u/r;p<n.height&&(p=n.height,u=p*r);let s=vn(n);return {x:s.x-u/2,y:s.y-p/2,width:u,height:p}}function Ot(n,e,t,r){let u=(n-t.left)/t.width,p=(e-t.top)/t.height;return {x:r.x+u*r.width,y:r.y+p*r.height}}var bo=memo(function({editor:e}){let t$1=useRef(null),r=useRef(null),[u,p]=useState(false),[s,i]=useState(100),[M,f]=useState(false),[c,b]=useState(false);q();let P=useRef(null),B=useRef(null);useLayoutEffect(()=>{let a=t$1.current,w=r.current;if(!a||!w)return;let d=window.devicePixelRatio||1;a.width=Math.round(At*d),a.height=Math.round(Kt*d),a.style.width=`${At}px`,a.style.height=`${Kt}px`;},[u]);let v=useCallback(()=>{let a=t$1.current,w=r.current;if(!a||!w||!e)return;let d=a.getContext("2d");if(!d)return;let j=At,_=Kt,O=a.width,Z=a.height,ee=e.getShapes(),G=new Set(e.getSelectedIds()),ce=getTheme(),g=hexToRgba(ce.text,.16),te=ce.primary,ve=hexToRgba(ce.primary,.18),me=hexToRgba(ce.primary,.85),pe=Mn(ee),z=Sn(e),de=pe?xn(pe,z):z.width>0?z:kn(),D=Cn(de,j,_);B.current=D;let ge=O/D.width,Se=Z/D.height,be=j/D.width;d.setTransform(1,0,0,1,0,0),d.fillStyle=wn,d.fillRect(0,0,O,Z),d.setTransform(ge,0,0,Se,-ge*D.x,-Se*D.y),d.fillStyle=g;for(let C of ee){let k=zt(C);k&&d.fillRect(k.x,k.y,k.width,k.height);}d.fillStyle=te;for(let C of ee){if(!G.has(C.id))continue;let k=zt(C);k&&d.fillRect(k.x,k.y,k.width,k.height);}d.fillStyle=ve,d.fillRect(z.x,z.y,z.width,z.height);let y=1.5/be;d.strokeStyle=me,d.lineWidth=y,d.lineJoin="round";let S=Math.min(z.width/6,z.height/6,6/be);if(d.beginPath(),S*be<1)d.rect(z.x,z.y,z.width,z.height);else {let C=z.x,k=z.y,U=z.width,V=z.height,oe=Math.min(S,U/2,V/2);d.moveTo(C+oe,k),d.lineTo(C+U-oe,k),d.quadraticCurveTo(C+U,k,C+U,k+oe),d.lineTo(C+U,k+V-oe),d.quadraticCurveTo(C+U,k+V,C+U-oe,k+V),d.lineTo(C+oe,k+V),d.quadraticCurveTo(C,k+V,C,k+V-oe),d.lineTo(C,k+oe),d.quadraticCurveTo(C,k,C+oe,k),d.closePath();}d.stroke(),d.setTransform(1,0,0,1,0,0);},[e]);useEffect(()=>{if(!e||u)return;v();let a=e.subscribe(v),w=subscribeTheme(v),d=()=>v();return window.addEventListener("resize",d),()=>{a(),w(),window.removeEventListener("resize",d);}},[e,u,v]),useEffect(()=>{if(!e)return;let a=()=>{let d=e.getCamera().getZoom();i(Math.round(d*100));};a();let w=e.subscribe(a);return ()=>{w();}},[e]);let $=useCallback((a,w)=>{if(!e)return;let d=e.getCamera(),j=d.getZoom(),_=window.innerWidth/2,O=window.innerHeight/2,Z=d;Z.x=_-a*j,Z.y=O-w*j,e.requestRender();},[e]),x=a=>{if(!e||!r.current||a.button!==0)return;let w=r.current.getBoundingClientRect(),d=B.current;if(!d)return;let j=Ot(a.clientX,a.clientY,w,d);P.current={pointerId:a.pointerId,rect:{left:w.left,top:w.top,width:w.width,height:w.height},canvasBox:d},a.currentTarget.setPointerCapture(a.pointerId),b(true),$(j.x,j.y);},A=a=>{if(!c||!e||!P.current||!r.current)return;let w=P.current,d=Ot(a.clientX,a.clientY,w.rect,w.canvasBox);$(d.x,d.y);},K=a=>{if(c){b(false),P.current=null;try{a.currentTarget.releasePointerCapture(a.pointerId);}catch{}}},fe=a=>{if(!e||!r.current)return;let w=B.current;if(!w)return;let d=r.current.getBoundingClientRect(),j=Ot(a.clientX,a.clientY,d,w);$(j.x,j.y);};return jsxs("div",{className:`drawui-minimap ${u?"collapsed":""}`,children:[jsx("button",{className:"drawui-minimap-toggle",onClick:()=>p(a=>!a),"data-drawui-tip":u?t("minimap.expand"):t("minimap.collapse"),"data-drawui-tip-pos":"top","aria-label":u?t("minimap.expand"):t("minimap.collapse"),children:jsx("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:u?jsx("polyline",{points:"9 6 15 12 9 18"}):jsx("polyline",{points:"15 6 9 12 15 18"})})}),!u&&jsxs("div",{className:"drawui-minimap-panel",children:[jsxs("div",{className:"drawui-minimap-header",children:[jsx("span",{className:"drawui-minimap-title",children:t("minimap.title")}),jsxs("span",{className:"drawui-minimap-zoom",children:[s,"%"]})]}),jsx("div",{ref:r,className:"drawui-minimap-canvas-wrap",style:{cursor:c?"grabbing":M?"pointer":"default"},onPointerEnter:()=>f(true),onPointerLeave:()=>f(false),children:jsx("canvas",{ref:t$1,className:"drawui-minimap-canvas",onPointerDown:x,onPointerMove:A,onPointerUp:K,onPointerCancel:K,onDoubleClick:fe})})]})]})});var le=n=>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:n}),Nn=[{type:"rectangle",labelKey:"shape.rectangle",glyph:le(jsx("rect",{x:"4",y:"7",width:"16",height:"10",rx:"1"}))},{type:"rounded-rectangle",labelKey:"shape.rounded-rectangle",glyph:le(jsx("rect",{x:"4",y:"7",width:"16",height:"10",rx:"4"}))},{type:"circle",labelKey:"shape.circle",glyph:le(jsx("circle",{cx:"12",cy:"12",r:"5.5"}))},{type:"ellipse",labelKey:"shape.ellipse",glyph:le(jsx("ellipse",{cx:"12",cy:"12",rx:"7",ry:"4.5"}))},{type:"diamond",labelKey:"shape.diamond",glyph:le(jsx("path",{d:"M12 5 L19 12 L12 19 L5 12 Z"}))},{type:"triangle",labelKey:"shape.triangle",glyph:le(jsx("path",{d:"M12 4 L20 19 H4 Z"}))},{type:"hexagon",labelKey:"shape.hexagon",glyph:le(jsx("path",{d:"M12 3 L19.5 7.5 V16.5 L12 21 L4.5 16.5 V7.5 Z"}))},{type:"parallelogram",labelKey:"shape.parallelogram",glyph:le(jsx("path",{d:"M6 7 L19 7 L16 17 H7 Z"}))},{type:"trapezoid",labelKey:"shape.trapezoid",glyph:le(jsx("path",{d:"M7 6 H17 L20 18 H4 Z"}))},{type:"pentagon",labelKey:"shape.pentagon",glyph:le(jsx("path",{d:"M12 4 L19.5 9.5 L16.5 18.5 H7.5 L4.5 9.5 Z"}))},{type:"octagon",labelKey:"shape.octagon",glyph:le(jsx("path",{d:"M8 4 H16 L20 8 V16 L16 20 H8 L4 16 V8 Z"}))},{type:"star",labelKey:"shape.star",glyph:le(jsx("path",{d:"M12 3 L14 9.5 L20.5 10 L15.5 14 L17.5 20.5 L12 16.8 L6.5 20.5 L8.5 14 L3.5 10 L10 9.5 Z"}))},{type:"uml-class",labelKey:"shape.uml-class",glyph:le(jsxs(Fragment,{children:[jsx("rect",{x:"3",y:"4",width:"18",height:"16",rx:"1"}),jsx("path",{d:"M3 9 H21"}),jsx("path",{d:"M3 15 H21"}),jsx("path",{d:"M6 6.5 H10"}),jsx("path",{d:"M6 12.5 H12"})]}))},{type:"uml-interface",labelKey:"shape.uml-interface",glyph:le(jsxs(Fragment,{children:[jsx("rect",{x:"3",y:"4",width:"18",height:"16",rx:"1"}),jsx("path",{d:"M3 9 H21"}),jsx("path",{d:"M6 6.5 H10"}),jsx("path",{d:"M6 12.5 H12"})]}))},{type:"mind-map",labelKey:"shape.mind-map",glyph:le(jsxs(Fragment,{children:[jsx("circle",{cx:"5",cy:"12",r:"2"}),jsx("path",{d:"M7 12h2.6"}),jsx("path",{d:"M9.6 12c0-2 1.2-3.4 2.6-3.4"}),jsx("path",{d:"M9.6 12c0 2 1.2 3.4 2.6 3.4"}),jsx("circle",{cx:"15.2",cy:"8.6",r:"1.3"}),jsx("circle",{cx:"15.2",cy:"15.4",r:"1.3"}),jsx("circle",{cx:"13.6",cy:"12",r:"1.3"})]}))}];function wo({editor:n,x:e,y:t$1,context:r,existingArrowId:u,defaultShapeType:p,onClose:s}){let i=useRef(null);q();let M=f=>{n?.createGeneratedConnection(r,{type:f,existingArrowId:u}),s();};return useEffect(()=>{let f=P=>{i.current&&!i.current.contains(P.target)&&s();},c=P=>{P.key==="Escape"&&(P.preventDefault(),s());},b=setTimeout(()=>{window.addEventListener("pointerdown",f,true),window.addEventListener("keydown",c,true);},0);return ()=>{clearTimeout(b),window.removeEventListener("pointerdown",f,true),window.removeEventListener("keydown",c,true);}},[s]),jsxs("div",{className:"drawui-gen-menu",ref:i,style:{left:e,top:t$1},children:[jsx("div",{className:"drawui-gen-menu-label",children:t("menu.title")}),jsx("div",{className:"drawui-gen-shape-grid",children:Nn.map(f=>jsxs("button",{className:`drawui-gen-shape-btn${f.type===p?" drawui-gen-shape-active":""}`,onClick:()=>M(f.type),"data-drawui-tip":t(f.labelKey),children:[f.glyph,jsx("span",{className:"drawui-gen-shape-label",children:t(f.labelKey)})]},f.type))}),jsx("div",{className:"drawui-gen-menu-hint",children:t("menu.cancel")})]})}var In={select:"tool.select",hand:"tool.hand",rectangle:"tool.rectangle","rounded-rectangle":"tool.rounded-rectangle",circle:"tool.circle",ellipse:"tool.ellipse",diamond:"tool.diamond",triangle:"tool.triangle",hexagon:"tool.hexagon",parallelogram:"tool.parallelogram",trapezoid:"tool.trapezoid",pentagon:"tool.pentagon",octagon:"tool.octagon",star:"tool.star",cylinder:"tool.cylinder",cloud:"tool.cloud",heart:"tool.heart","block-arrow-right":"tool.block-arrow-right","block-arrow-left":"tool.block-arrow-left","block-arrow-up":"tool.block-arrow-up","block-arrow-down":"tool.block-arrow-down","block-arrow-double":"tool.block-arrow-double","right-triangle":"tool.right-triangle",cross:"tool.cross","speech-rect":"tool.speech-rect","speech-round":"tool.speech-round",cube:"tool.cube",sector:"tool.sector",delay:"tool.delay","predefined-process":"tool.predefined-process",document:"tool.document",stadium:"tool.stadium","class-catalog":"tool.class-catalog",chevron:"tool.chevron","brace-left":"tool.brace-left","brace-right":"tool.brace-right","uml-class":"tool.uml-class","uml-interface":"tool.uml-interface",line:"tool.line",arrow:"tool.arrow",text:"tool.text",draw:"tool.draw",pen:"tool.pen",highlighter:"tool.highlighter",eraser:"tool.eraser","mind-map":"tool.mind-map"};function Pn({initialTool:n="select",className:e="",themeColor:t$1,language:r="zh-CN",data:u,onChange:p,onReady:s}){let i=useRef(null),M=useRef(null),f=useRef(null),[c,b]=useState(null);q();let[P,B]=useState(n),[v,$]=useState(false),[x,A]=useState(0),[K,fe]=useState(false),[a,w]=useState("straight"),[d,j]=useState("end"),[_,O]=useState(false),[Z,ee]=useState(void 0),[G,ce]=useState(100),[g,te]=useState(null),[ve,me]=useState(null),[pe,z]=useState(false),[de,D]=useState(false),[ge,Se]=useState(null),[be,y]=useState(null),[S,C]=useState(false),[k,U]=useState(null),[V,oe]=useState(null),ke=useRef(null),Oe=useRef(0),he=useRef(null),We=useRef(p);We.current=p;let _e=useRef(s);_e.current=s,useEffect(()=>{if(!i.current)return;let h=new Editor(i.current,{theme:t$1?{primary:t$1,editBorder:t$1,selection:{outline:t$1,handleStroke:t$1,handleFill:"#ffffff",outlineFill:hexToRgba(t$1,.1),shadow:t$1}}:void 0,language:r,shapes:u,persist:!u});f.current=h,b(h),window.__drawuiEditor=h,h.setHighlighterColor(rt()),_e.current?.(h),n&&h.setActiveTool(n);let E=h.subscribe(()=>{B(h.getActiveTool());let T=h.getSelectedIds();A(T.length);let ue=h.getShapes().filter(Te=>T.includes(Te.id)&&(Te.type==="line"||Te.type==="arrow"));if(fe(ue.length>0),ue.length>0&&ue[0].connectionType?w(ue[0].connectionType):ue.length>0&&w("straight"),ue.length>0){let Te=ue.find(xt=>xt.type==="arrow");Te&&(j(Te.arrowHead??"end"),O(Te.dashed??false));}ce(Math.round(h.getCamera().getZoom()*100)),ee(h.getArrowStyle()),z(h.canUndo()),D(h.canRedo());let Le=h.getSelectedUml();Se(Le),Le||U(null);let nt=h.getSelectedMindMap();y(nt),h.getMindMapEditingShapeId()||C(false),We.current?.(h.getData());}),Ie=h.subscribeNotifications(T=>{me(T),ke.current&&clearTimeout(ke.current),ke.current=setTimeout(()=>me(null),2e3);}),Ce=h.subscribeUi(T=>{T.kind==="shapeTypeMenu"&&oe({x:T.screenX,y:T.screenY,context:T.context,existingArrowId:T.existingArrowId,defaultShapeType:T.defaultShapeType});});return ()=>{E(),Ie(),Ce(),ke.current&&clearTimeout(ke.current),cancelAnimationFrame(Oe.current),h.dispose();}},[n]),useEffect(()=>{if(!t$1)return;let h=M.current;h&&(h.style.setProperty("--dw-primary",t$1),h.style.setProperty("--dw-primary-hover",shadeColor(t$1,-0.12)),h.style.setProperty("--dw-primary-weak",hexToRgba(t$1,.1)),h.style.setProperty("--dw-primary-contrast","#ffffff"),h.style.setProperty("--dw-shadow-primary",`0 2px 8px ${hexToRgba(t$1,.3)}`)),f.current?.setTheme({primary:t$1,editBorder:t$1,selection:{outline:t$1,handleStroke:t$1,handleFill:"#ffffff",outlineFill:hexToRgba(t$1,.1),shadow:t$1}});},[t$1]),useEffect(()=>{setLanguage(r),f.current?.setLanguage(r);},[r]);let je=useCallback(h=>{f.current?.setActiveTool(h);},[]),m=useCallback(()=>{f.current?.zoomIn();},[]),R=useCallback(()=>{f.current?.zoomOut();},[]),H=useCallback(()=>{f.current?.resetZoom();},[]),I=useCallback(()=>{let h=!v;$(h),f.current?.setShowGrid(h);},[v]),J=useCallback(()=>{f.current?.undo();},[]),Y=useCallback(()=>{f.current?.redo();},[]),ze=useCallback(h=>{f.current?.downloadImage("drawui",h,{background:"#ffffff"});},[]),Ze=useCallback(h=>{let E=f.current,Ie=i.current;if(!E||!Ie)return;if(E.isPointerDown()){he.current!==null&&(he.current=null,te(null));return}let Ce=h.clientX,T=h.clientY;cancelAnimationFrame(Oe.current),Oe.current=requestAnimationFrame(()=>{let Ve=Ie.getBoundingClientRect(),ue=Ce-Ve.left,Le=T-Ve.top,nt=ue+12,Te=Le+12,xt=E.getSelectedUml()?.id,Fe=E.getUmlRowAtScreenPoint({x:ue,y:Le});if(Fe&&Fe.shape.id!==xt&&Fe.text){he.current!==Fe.text&&(he.current=Fe.text,te({text:Fe.text,x:nt,y:Te}));return}let qe=E.getShapeAtScreenPoint({x:ue,y:Le});qe&&qe.text?he.current!==qe.text&&(he.current=qe.text,te({text:qe.text,x:nt,y:Te})):he.current!==null&&(he.current=null,te(null));});},[]),l=useCallback(()=>{te(null);},[]),L=useCallback(h=>{let E=f.current,Ie=i.current;if(!E||!Ie)return;let Ce=Ie.getBoundingClientRect(),T=h.clientX-Ce.left,Ve=h.clientY-Ce.top,ue=E.getUmlRowAtScreenPoint({x:T,y:Ve});if(ue){U(ue.shape.id);return}let Le=E.getMindMapNodeAtScreenPoint({x:T,y:Ve});Le&&E.beginMindMapEdit(Le.shapeId,Le.nodeId);},[]),we=useCallback(()=>{oe(null);},[]);return jsxs("div",{ref:M,className:`drawui-canvas-board ${e}`,children:[jsx("canvas",{ref:i,className:"drawui-canvas",onMouseMove:Ze,onMouseLeave:l,onDoubleClick:L}),g&&jsx("div",{className:"drawui-tooltip",style:{left:g.x,top:g.y},children:g.text}),jsx(St,{activeTool:P,onToolChange:je,showGrid:v,onToggleGrid:I,canUndo:pe,canRedo:de,onUndo:J,onRedo:Y,onExport:ze,onHighlighterColorChange:h=>f.current?.setHighlighterColor(h),arrowStyle:Z,onArrowStyleChange:h=>f.current?.setArrowStyle(h)}),jsx(Lt,{onZoomIn:m,onZoomOut:R,onReset:H,zoomLevel:G}),jsx(oo,{editor:c,selectedCount:x,hasLineSelection:K,currentConnectionType:a,currentArrowHead:d,currentDashed:_}),jsx(lo,{editor:c,umlClass:ge,editing:k}),jsx(po,{editor:c,panelOpen:S,onOpenPanel:()=>C(true)}),S&&jsx(fo,{editor:c,mindMap:be}),jsx(bo,{editor:c}),V&&jsx(wo,{editor:c,x:V.x,y:V.y,context:V.context,existingArrowId:V.existingArrowId,defaultShapeType:V.defaultShapeType,onClose:we}),jsxs("div",{className:"drawui-status-bar",children:[jsx("div",{className:"drawui-status-item",children:jsx("span",{children:t(In[P])})}),jsx("div",{className:"drawui-status-item",children:jsx("span",{children:x===0?t("status.none"):t("status.selected",{n:x})})}),jsx("div",{className:"drawui-status-item",children:jsxs("span",{children:[G,"%"]})})]}),ve&&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"})}),ve]})]})}export{Pn as CanvasBoard,St as Toolbar,Lt as ZoomControl};
|
package/dist/styles.css
CHANGED
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
}
|
|
83
83
|
.drawui-toolbar {
|
|
84
84
|
position: fixed;
|
|
85
|
-
top:
|
|
85
|
+
top: 5px;
|
|
86
86
|
left: 50%;
|
|
87
87
|
transform: translateX(-50%);
|
|
88
88
|
display: flex;
|
|
@@ -98,6 +98,7 @@
|
|
|
98
98
|
z-index: 100;
|
|
99
99
|
}
|
|
100
100
|
.drawui-toolbar-button {
|
|
101
|
+
position: relative;
|
|
101
102
|
display: flex;
|
|
102
103
|
align-items: center;
|
|
103
104
|
justify-content: center;
|
|
@@ -137,7 +138,7 @@
|
|
|
137
138
|
}
|
|
138
139
|
.drawui-toolbar-container {
|
|
139
140
|
position: fixed;
|
|
140
|
-
top:
|
|
141
|
+
top: 5px;
|
|
141
142
|
left: 50%;
|
|
142
143
|
transform: translateX(-50%);
|
|
143
144
|
z-index: 100;
|
|
@@ -147,7 +148,7 @@
|
|
|
147
148
|
}
|
|
148
149
|
.drawui-toolbar-shape-grid {
|
|
149
150
|
position: absolute;
|
|
150
|
-
top: calc(100% +
|
|
151
|
+
top: calc(100% + 14px);
|
|
151
152
|
left: 50%;
|
|
152
153
|
transform: translateX(-50%);
|
|
153
154
|
display: grid;
|
|
@@ -162,6 +163,87 @@
|
|
|
162
163
|
border: 1px solid var(--dw-panel-border);
|
|
163
164
|
background: var(--dw-panel-bg-deep);
|
|
164
165
|
animation: dropdownFadeIn 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
166
|
+
z-index: 500;
|
|
167
|
+
}
|
|
168
|
+
.drawui-shape-menu {
|
|
169
|
+
display: flex;
|
|
170
|
+
flex-direction: column;
|
|
171
|
+
width: max-content;
|
|
172
|
+
max-height: min(72vh, 560px);
|
|
173
|
+
padding: 8px;
|
|
174
|
+
}
|
|
175
|
+
.drawui-shape-menu-scroll {
|
|
176
|
+
flex: 1 1 auto;
|
|
177
|
+
min-height: 0;
|
|
178
|
+
overflow-y: auto;
|
|
179
|
+
overflow-x: hidden;
|
|
180
|
+
scrollbar-gutter: stable;
|
|
181
|
+
padding-right: 6px;
|
|
182
|
+
}
|
|
183
|
+
.drawui-shape-menu-scroll::-webkit-scrollbar {
|
|
184
|
+
width: 6px;
|
|
185
|
+
}
|
|
186
|
+
.drawui-shape-menu-scroll::-webkit-scrollbar-track {
|
|
187
|
+
background: transparent;
|
|
188
|
+
}
|
|
189
|
+
.drawui-shape-menu-scroll::-webkit-scrollbar-thumb {
|
|
190
|
+
background: var(--dw-dash);
|
|
191
|
+
border-radius: 3px;
|
|
192
|
+
}
|
|
193
|
+
.drawui-shape-menu-scroll::-webkit-scrollbar-thumb:hover {
|
|
194
|
+
background: var(--dw-text-muted);
|
|
195
|
+
}
|
|
196
|
+
.drawui-shape-tip {
|
|
197
|
+
position: absolute;
|
|
198
|
+
z-index: 2000;
|
|
199
|
+
transform: translateX(-50%);
|
|
200
|
+
width: max-content;
|
|
201
|
+
max-width: 240px;
|
|
202
|
+
padding: 5px 9px;
|
|
203
|
+
font-size: 12px;
|
|
204
|
+
line-height: 1.4;
|
|
205
|
+
white-space: nowrap;
|
|
206
|
+
color: var(--dw-tooltip-text);
|
|
207
|
+
background: var(--dw-tooltip-bg);
|
|
208
|
+
border-radius: 8px;
|
|
209
|
+
box-shadow: var(--dw-shadow-tooltip);
|
|
210
|
+
pointer-events: none;
|
|
211
|
+
}
|
|
212
|
+
.drawui-shape-tip::after {
|
|
213
|
+
content: '';
|
|
214
|
+
position: absolute;
|
|
215
|
+
left: 50%;
|
|
216
|
+
margin-left: -4px;
|
|
217
|
+
border: 4px solid transparent;
|
|
218
|
+
}
|
|
219
|
+
.drawui-shape-tip.is-below::after {
|
|
220
|
+
top: -8px;
|
|
221
|
+
border-bottom-color: var(--dw-tooltip-bg);
|
|
222
|
+
}
|
|
223
|
+
.drawui-shape-tip.is-above {
|
|
224
|
+
transform: translate(-50%, -100%);
|
|
225
|
+
}
|
|
226
|
+
.drawui-shape-tip.is-above::after {
|
|
227
|
+
bottom: -8px;
|
|
228
|
+
border-top-color: var(--dw-tooltip-bg);
|
|
229
|
+
}
|
|
230
|
+
.drawui-shape-group + .drawui-shape-group {
|
|
231
|
+
margin-top: 8px;
|
|
232
|
+
padding-top: 8px;
|
|
233
|
+
border-top: 1px solid var(--dw-dash);
|
|
234
|
+
}
|
|
235
|
+
.drawui-shape-group-title {
|
|
236
|
+
margin: 0 0 4px 2px;
|
|
237
|
+
font-size: 11px;
|
|
238
|
+
font-weight: 500;
|
|
239
|
+
line-height: 1;
|
|
240
|
+
color: var(--dw-text-muted);
|
|
241
|
+
user-select: none;
|
|
242
|
+
}
|
|
243
|
+
.drawui-shape-group-grid {
|
|
244
|
+
display: grid;
|
|
245
|
+
grid-template-columns: repeat(6, 36px);
|
|
246
|
+
gap: 2px;
|
|
165
247
|
}
|
|
166
248
|
@keyframes dropdownFadeIn {
|
|
167
249
|
from {
|
|
@@ -210,9 +292,41 @@
|
|
|
210
292
|
white-space: nowrap;
|
|
211
293
|
justify-content: flex-start;
|
|
212
294
|
}
|
|
295
|
+
.drawui-toolbar-color-chip {
|
|
296
|
+
position: absolute;
|
|
297
|
+
right: 4px;
|
|
298
|
+
bottom: 4px;
|
|
299
|
+
width: 10px;
|
|
300
|
+
height: 10px;
|
|
301
|
+
border-radius: 50%;
|
|
302
|
+
border: 1.5px solid #fff;
|
|
303
|
+
box-shadow: 0 0 0 1px var(--dw-swatch-border);
|
|
304
|
+
pointer-events: none;
|
|
305
|
+
}
|
|
306
|
+
.drawui-toolbar-highlighter-grid {
|
|
307
|
+
grid-template-columns: repeat(3, 26px);
|
|
308
|
+
gap: 8px;
|
|
309
|
+
padding: 10px;
|
|
310
|
+
}
|
|
311
|
+
.drawui-highlighter-swatch {
|
|
312
|
+
box-sizing: border-box;
|
|
313
|
+
width: 26px;
|
|
314
|
+
height: 26px;
|
|
315
|
+
border-radius: 50%;
|
|
316
|
+
border: 1px solid rgba(0, 0, 0, 0.08);
|
|
317
|
+
cursor: pointer;
|
|
318
|
+
padding: 0;
|
|
319
|
+
transition: transform 0.12s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.12s cubic-bezier(0.4, 0, 0.2, 1);
|
|
320
|
+
}
|
|
321
|
+
.drawui-highlighter-swatch:hover {
|
|
322
|
+
transform: scale(1.1);
|
|
323
|
+
}
|
|
324
|
+
.drawui-highlighter-swatch.active {
|
|
325
|
+
box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--dw-primary);
|
|
326
|
+
}
|
|
213
327
|
.drawui-zoom-control {
|
|
214
328
|
position: fixed;
|
|
215
|
-
top:
|
|
329
|
+
top: 5px;
|
|
216
330
|
right: 20px;
|
|
217
331
|
display: flex;
|
|
218
332
|
flex-direction: column;
|
|
@@ -504,6 +618,17 @@
|
|
|
504
618
|
line-height: 1.5;
|
|
505
619
|
color: var(--dw-text-muted);
|
|
506
620
|
}
|
|
621
|
+
.drawui-arrow-menu {
|
|
622
|
+
display: block;
|
|
623
|
+
width: max-content;
|
|
624
|
+
padding: 10px 12px;
|
|
625
|
+
}
|
|
626
|
+
.drawui-arrow-menu .drawui-style-popover-title {
|
|
627
|
+
margin-bottom: 6px;
|
|
628
|
+
}
|
|
629
|
+
.drawui-arrow-menu .drawui-connection-row + .drawui-style-popover-title {
|
|
630
|
+
margin-top: 10px;
|
|
631
|
+
}
|
|
507
632
|
@keyframes drawui-style-toolbar-in {
|
|
508
633
|
from {
|
|
509
634
|
opacity: 0;
|
|
@@ -524,7 +649,7 @@
|
|
|
524
649
|
}
|
|
525
650
|
.drawui-color-row {
|
|
526
651
|
display: grid;
|
|
527
|
-
grid-template-columns: repeat(
|
|
652
|
+
grid-template-columns: repeat(9, 20px);
|
|
528
653
|
gap: 6px;
|
|
529
654
|
}
|
|
530
655
|
.drawui-color-swatch {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "drawui-react",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "React wrapper for drawui-core canvas drawing (PNG / SVG / PDF export, UML, mind map)",
|
|
6
6
|
"license": "MIT",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"access": "public"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"drawui-core": "0.3.
|
|
33
|
+
"drawui-core": "0.3.2"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
36
36
|
"react": "^18.3.1"
|