@wbiokr/arrow 1.0.1 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +99 -8
  2. package/dist/bundle.cjs.js +1 -147
  3. package/dist/bundle.cjs.js.map +1 -1
  4. package/dist/bundle.esm.js +1 -507
  5. package/dist/bundle.esm.js.map +1 -1
  6. package/package.json +7 -3
package/README.md CHANGED
@@ -2,6 +2,10 @@
2
2
 
3
3
  箭头绘制编辑器 - 在网页上绘制可编辑的箭头
4
4
 
5
+ ## 环境要求
6
+
7
+ - Node.js >= 20.19.0 或 >= 22.12.0
8
+
5
9
  ## 安装
6
10
 
7
11
  ```bash
@@ -45,10 +49,6 @@ const editor = new ArrowEditor('#container')
45
49
  3. 双击或按 `Enter` 完成绘制
46
50
  4. 按 `Esc` 取消绘制
47
51
 
48
- ### 曲线模式
49
-
50
- 按住 `Ctrl` 或 `Shift` 键绘制曲线箭头
51
-
52
52
  ### 移动箭头
53
53
 
54
54
  1. 点击箭头选中
@@ -64,19 +64,70 @@ const editor = new ArrowEditor('#container')
64
64
  1. 点击箭头选中
65
65
  2. 拖拽右下角的蓝色缩放手柄
66
66
 
67
+ ### 删除箭头
68
+
69
+ 1. 点击箭头选中
70
+ 2. 按 `Delete` 或 `Backspace` 键
71
+
67
72
  ### 取消选中
68
73
 
69
74
  点击空白处或按 `Esc` 键
70
75
 
76
+ ## 配置选项
77
+
78
+ ```javascript
79
+ const editor = new ArrowEditor('#container', {
80
+ // 是否只在按 Ctrl 键时绘制（默认 false）
81
+ isCtrl: false,
82
+
83
+ // 是否阻止事件冒泡（默认 false）
84
+ stopPropagation: false,
85
+
86
+ // 是否阻止默认行为（默认 false）
87
+ preventDefault: false,
88
+
89
+ // 绘制完成回调
90
+ onDrawEnd(data) {
91
+ // data = { arrow: 当前箭头，arrows: 所有箭头数据 }
92
+ console.log('绘制完成:', data)
93
+ },
94
+
95
+ // 删除回调
96
+ onRemove(data) {
97
+ // data = { arrow: 被删除的箭头，arrows: 剩余箭头数据 }
98
+ console.log('删除:', data)
99
+ },
100
+
101
+ // 变更回调（颜色、粗细、曲线率、旋转、缩放）
102
+ onChange(data) {
103
+ // data = { type, arrow, value?, arrows }
104
+ // type: 'color' | 'strokeWidth' | 'curveRate' | 'rotate' | 'scale'
105
+ console.log('变更:', data)
106
+ }
107
+ })
108
+ ```
109
+
110
+ ### 配置说明
111
+
112
+ | 选项 | 类型 | 默认值 | 说明 |
113
+ |------|------|--------|------|
114
+ | `isCtrl` | Boolean | `false` | 是否只在按 Ctrl 键时绘制 |
115
+ | `stopPropagation` | Boolean | `false` | 是否阻止事件冒泡 |
116
+ | `preventDefault` | Boolean | `false` | 是否阻止默认行为 |
117
+ | `onDrawEnd` | Function | `null` | 绘制完成回调，接收 `{ arrow, arrows }` |
118
+ | `onRemove` | Function | `null` | 删除回调，接收 `{ arrow, arrows }` |
119
+ | `onChange` | Function | `null` | 变更回调，接收 `{ type, arrow, value?, arrows }` |
120
+
71
121
  ## API
72
122
 
73
123
  ### 实例化
74
124
 
75
125
  ```javascript
76
- const editor = new ArrowEditor(container)
126
+ const editor = new ArrowEditor(container, options)
77
127
  ```
78
128
 
79
129
  - `container`: CSS 选择器字符串或 DOM 元素
130
+ - `options`: 配置对象（可选）
80
131
 
81
132
  ### 方法
82
133
 
@@ -86,7 +137,7 @@ const editor = new ArrowEditor(container)
86
137
 
87
138
  ```javascript
88
139
  const data = editor.getData()
89
- // 返回：[{ points: [{x, y}, ...], isCurve: boolean }, ...]
140
+ // 返回：[{ points: [{x, y}, ...], curveRate, strokeWidth, color }, ...]
90
141
  ```
91
142
 
92
143
  #### setData(data)
@@ -97,7 +148,9 @@ const data = editor.getData()
97
148
  editor.setData([
98
149
  {
99
150
  points: [{ x: 100, y: 100 }, { x: 200, y: 200 }],
100
- isCurve: false
151
+ curveRate: 0.5,
152
+ strokeWidth: 8,
153
+ color: '#2b8cff'
101
154
  }
102
155
  ])
103
156
  ```
@@ -110,13 +163,51 @@ editor.setData([
110
163
  editor.clear()
111
164
  ```
112
165
 
166
+ #### destroy()
167
+
168
+ 销毁编辑器，移除所有事件监听器和 DOM 元素
169
+
170
+ ```javascript
171
+ editor.destroy()
172
+ ```
173
+
174
+ ## 工具条
175
+
176
+ 选中箭头后会弹出工具条，可以调整：
177
+
178
+ - **颜色**：点击颜色选择器
179
+ - **粗细**：拖动滑块（1-60px）
180
+ - **曲线率**：拖动滑块（0-1，0=直线，1=最弯曲）
181
+
182
+ 工具条可以拖拽到任意位置。
183
+
113
184
  ## 键盘快捷键
114
185
 
115
186
  | 快捷键 | 功能 |
116
187
  |--------|------|
117
188
  | `Enter` | 完成绘制 |
118
189
  | `Esc` | 取消绘制 / 取消选中 |
119
- | `Ctrl` / `Shift` | 曲线模式（按住） |
190
+ | `Delete` / `Backspace` | 删除选中的箭头 |
191
+
192
+ ## 数据存储示例
193
+
194
+ ```javascript
195
+ // 保存数据
196
+ const editor = new ArrowEditor('#container', {
197
+ onDrawEnd(data) {
198
+ localStorage.setItem('arrows', JSON.stringify(data.arrows))
199
+ },
200
+ onChange(data) {
201
+ localStorage.setItem('arrows', JSON.stringify(data.arrows))
202
+ },
203
+ onRemove(data) {
204
+ localStorage.setItem('arrows', JSON.stringify(data.arrows))
205
+ }
206
+ })
207
+
208
+ // 加载数据
209
+ editor.setData(JSON.parse(localStorage.getItem('arrows')) || [])
210
+ ```
120
211
 
121
212
  ## 开发
122
213
 
package/dist/bundle.cjs.js CHANGED
@@ -1,148 +1,2 @@
1
- (function(g,_){typeof exports=="object"&&typeof module<"u"?_(exports,require("@wbiokr/keybinding")):typeof define=="function"&&define.amd?define(["exports","@wbiokr/keybinding"],_):(g=typeof globalThis<"u"?globalThis:g||self,_(g.ArrowEditor={},g.Keybinding))})(this,(function(g,_){"use strict";const D=`
2
- .ae-d2-container {
3
- position: relative;
4
- width: 1000px;
5
- height: 600px;
6
- background: #fff;
7
- margin: auto;
8
- }
9
-
10
- .ae-d2-svg {
11
- width: 100%;
12
- height: 100%;
13
- position: absolute;
14
- left: 0;
15
- top: 0;
16
- z-index: 100000;
17
- }
18
-
19
-
20
- .ae-arrow-path {
21
- fill: none;
22
- stroke-linecap: round;
23
- stroke-linejoin: round;
24
- cursor: pointer;
25
- }
26
-
27
- .ae-arrow-path:hover {
28
- stroke: #00aaff;
29
- }
30
-
31
- .ae-transform-box {
32
- fill: none;
33
- stroke: #00aaff;
34
- stroke-width: 2;
35
- stroke-dasharray: 4;
36
- }
37
-
38
- .ae-transform-handle {
39
- fill: #fff;
40
- stroke: #00aaff;
41
- stroke-width: 2;
42
- cursor: pointer;
43
- }
44
-
45
- .ae-transform-handle:hover {
46
- fill: #00aaff;
47
- }
48
-
49
- .ae-rotate-handle {
50
- fill: #fff;
51
- stroke: #ff6600;
52
- stroke-width: 2;
53
- cursor: grab;
54
- }
55
-
56
- .ae-rotate-handle:hover {
57
- fill: #ff6600;
58
- }
59
-
60
- .ae-rotate-line {
61
- stroke: #ff6600;
62
- stroke-width: 1;
63
- stroke-dasharray: 4;
64
- }
65
-
66
- /* 工具条样式 */
67
- .ae-toolbar {
68
- position: absolute;
69
- display: none;
70
- flex-direction: column;
71
- gap: 10px;
72
- padding: 12px;
73
- background: #fff;
74
- border: 1px solid #ddd;
75
- border-radius: 8px;
76
- box-shadow: 0 2px 12px rgba(0,0,0,0.15);
77
- z-index: 1000000;
78
- pointer-events: auto;
79
- min-width: 140px;
80
- }
81
-
82
- .ae-toolbar-drag-handle {
83
- cursor: grab;
84
- text-align: center;
85
- padding: 4px;
86
- color: #999;
87
- font-size: 14px;
88
- line-height: 1;
89
- user-select: none;
90
- border-bottom: 1px solid #eee;
91
- margin: -12px -12px 8px -12px;
92
- padding-top: 8px;
93
- padding-bottom: 8px;
94
- border-radius: 8px 8px 0 0;
95
- }
96
-
97
- .ae-toolbar-drag-handle:active {
98
- cursor: grabbing;
99
- }
100
-
101
- .ae-toolbar-item {
102
- display: flex;
103
- flex-direction: column;
104
- gap: 4px;
105
- }
106
-
107
- .ae-toolbar-label {
108
- font-size: 11px;
109
- color: #666;
110
- }
111
-
112
- .ae-toolbar input[type="color"] {
113
- width: 40px;
114
- height: 30px;
115
- border: 1px solid #ddd;
116
- border-radius: 4px;
117
- cursor: pointer;
118
- padding: 0;
119
- background: none;
120
- }
121
-
122
- .ae-toolbar input[type="range"] {
123
- width: 120px;
124
- cursor: pointer;
125
- }
126
-
127
- .ae-toolbar-value {
128
- font-size: 10px;
129
- color: #999;
130
- text-align: right;
131
- }
132
- `;if(typeof document<"u"){const w=document.createElement("style");w.textContent=D,document.head.appendChild(w)}class S{constructor(t,e={}){this.container=typeof t=="string"?document.querySelector(t):t,this.svg=null,this.arrows=[],this.drawing=!1,this.current=null,this.selected=null,this.mode=null,this.lastClickTime=0,this.lastClickPos=null,this._shouldBlockClick=!1,this._defaultColor="#2b8cff",this.isCtrl=e.isCtrl||!1,this.stopPropagation=e.stopPropagation||!1,this.preventDefault=e.preventDefault||!1,this.onDrawEnd=e.onDrawEnd||null,this.onRemove=e.onRemove||null,this.onChange=e.onChange||null,this._transformMode=null,this._transformHandle=null,this._transformStartPos=null,this._transformStartPoints=null,this._transformCenter=null,this._transformStartAngle=null,this._rotationOffset=0,this._toolbar=null,this._strokeWidth=8,this._curveRate=0,this._createSVG(),this._initKeybindings(),this._initEvents()}_createSVG(){typeof getComputedStyle<"u"&&getComputedStyle(this.container).position==="static"&&(this.container.style.position="relative"),this.svg=document.createElementNS("http://www.w3.org/2000/svg","svg"),this.svg.setAttribute("class","ae-d2-svg"),this.container.appendChild(this.svg);const t=document.createElementNS("http://www.w3.org/2000/svg","defs");this.svg.appendChild(t);const e=document.createElementNS("http://www.w3.org/2000/svg","marker");e.setAttribute("id","ae-arrowhead"),e.setAttribute("markerWidth","10"),e.setAttribute("markerHeight","10"),e.setAttribute("refX","9"),e.setAttribute("refY","5"),e.setAttribute("orient","auto");const s=document.createElementNS("http://www.w3.org/2000/svg","polygon");s.setAttribute("points","0,0 10,5 0,10 2,5"),s.setAttribute("fill",this._defaultColor),e.appendChild(s),t.appendChild(e)}_createToolbar(){this._toolbar&&this._toolbar.remove(),this._toolbar=document.createElement("div"),this._toolbar.className="ae-toolbar";const t=this.selected.color||this._defaultColor,e=this.selected.strokeWidth||this._strokeWidth,s=this.selected.curveRate??this.selected.cornerRoundness??0;this._toolbar.innerHTML=`
133
- <div class="ae-toolbar-drag-handle">:::</div>
134
- <div class="ae-toolbar-item">
135
- <span class="ae-toolbar-label">颜色</span>
136
- <input type="color" class="ae-color-input" value="${t}" />
137
- </div>
138
- <div class="ae-toolbar-item">
139
- <span class="ae-toolbar-label">粗细</span>
140
- <input type="range" class="ae-stroke-input" min="1" max="60" value="${e}" />
141
- <span class="ae-toolbar-value">${e}px</span>
142
- </div>
143
- <div class="ae-toolbar-item">
144
- <span class="ae-toolbar-label">曲线率</span>
145
- <input type="range" class="ae-round-input" min="0" max="1" step="0.1" value="${s}" />
146
- </div>
147
- `,this._toolbar.querySelector(".ae-color-input").addEventListener("input",r=>{this.selected&&(this.selected.color=r.target.value,this._defaultColor=r.target.value,this._updateMarkerColor(r.target.value),this.render(),this.onChange&&this.onChange({type:"color",arrow:this.selected,value:r.target.value,arrows:this.getData()}))});const i=this._toolbar.querySelector(".ae-stroke-input"),n=this._toolbar.querySelector(".ae-stroke-input + .ae-toolbar-value");i.addEventListener("input",r=>{this.selected&&(this.selected.strokeWidth=parseInt(r.target.value),n.textContent=r.target.value+"px",this.render(),this.onChange&&this.onChange({type:"strokeWidth",arrow:this.selected,value:parseInt(r.target.value),arrows:this.getData()}))}),this._toolbar.querySelector(".ae-round-input").addEventListener("input",r=>{this.selected&&(this.selected.curveRate=parseFloat(r.target.value),this.render(),this.onChange&&this.onChange({type:"curveRate",arrow:this.selected,value:parseFloat(r.target.value),arrows:this.getData()}))});const l=this._toolbar.querySelector(".ae-toolbar-drag-handle");this._setupToolbarDrag(l),this._toolbar.addEventListener("mousedown",r=>{r.stopPropagation()}),this._toolbar.addEventListener("mouseup",r=>{r.stopPropagation()}),this.container.appendChild(this._toolbar)}_setupToolbarDrag(t){let e=!1,s={x:0,y:0};t.addEventListener("mousedown",o=>{e=!0,this._toolbarDragging=!0;const i=this._toolbar.getBoundingClientRect();s.x=o.clientX-i.left,s.y=o.clientY-i.top,o.preventDefault(),o.stopPropagation();const n=l=>{if(!e)return;const r=this.container.getBoundingClientRect();let h=l.clientX-r.left-s.x,c=l.clientY-r.top-s.y;const d=this._toolbar.offsetWidth,u=this._toolbar.offsetHeight;h=Math.max(0,Math.min(h,r.width-d)),c=Math.max(0,Math.min(c,r.height-u)),this._toolbar.style.left=h+"px",this._toolbar.style.top=c+"px"},a=l=>{e=!1,this._toolbarDragging=!1,document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",a),this._toolbar.removeEventListener("mouseup",a),l.preventDefault(),l.stopPropagation()};document.addEventListener("mousemove",n),document.addEventListener("mouseup",a),this._toolbar.addEventListener("mouseup",a)})}_showToolbar(){if(this.selected){this._toolbar||this._createToolbar(),this._toolbar.style.display="flex";const t=this.selected.color||this._defaultColor,e=this.selected.strokeWidth||this._strokeWidth,s=this.selected.curveRate??this.selected.cornerRoundness??0,o=this._toolbar.querySelector(".ae-color-input"),i=this._toolbar.querySelector(".ae-stroke-input"),n=this._toolbar.querySelector(".ae-stroke-input + .ae-toolbar-value"),a=this._toolbar.querySelector(".ae-round-input");o&&(o.value=t),i&&(i.value=e,n.textContent=e+"px"),a&&(a.value=s);const l=this._getArrowBBox(this.selected),r=this._toolbar.offsetWidth||150,h=this._toolbar.offsetHeight||120;let c=l.maxX+20;c+r>this.container.offsetWidth&&(c=l.minX-r-20);let d=l.centerY-h/2;d<0&&(d=0),d+h>this.container.offsetHeight&&(d=this.container.offsetHeight-h),this._toolbar.style.left=c+"px",this._toolbar.style.top=d+"px"}}_hideToolbar(){this._toolbar&&(this._toolbar.style.display="none")}_updateMarkerColor(t){const e=this.svg.querySelector("#ae-arrowhead polygon");e&&e.setAttribute("fill",t)}_initKeybindings(){this._kb=new _.Keybinding("arrow-editor"),this._kb.on("enter",()=>{this._handleEnter()}),this._kb.on("esc",()=>{this._handleEsc()}),this._kb.on("delete",()=>{this._handleDelete()}),this._kb.on("backspace",()=>{this._handleDelete()})}_initEvents(){this.container.onclick=t=>{if(this._toolbar&&(t.target===this._toolbar||this._toolbar.contains(t.target)))return;this.preventDefault&&t.preventDefault(),this.stopPropagation&&t.stopPropagation();const e=this._mousePos(t);this._handleClick(e,t)},this.container.onmousemove=t=>{this.preventDefault&&t.preventDefault(),this.stopPropagation&&t.stopPropagation();const e=this._mousePos(t);this._handleMouseMove(t,e)},this.container.onmousedown=t=>{if(!(this._toolbar&&(t.target===this._toolbar||this._toolbar.contains(t.target)))&&(this.preventDefault&&t.preventDefault(),this.stopPropagation&&t.stopPropagation(),this.selected)){const e=t.target.getAttribute("data-handle");if(e){this._transformMode=e,this._transformHandle=e;const s=this._mousePos(t);if(this._transformStartPos=s,this._transformStartPoints=this.selected.points.map(o=>({x:o.x,y:o.y})),this._transformCenter=this._getArrowBBox(this.selected),e==="rotate"){const o=this._transformCenter,i=s.x-o.centerX,n=s.y-o.centerY;this._transformStartAngle=Math.atan2(n,i),this._rotationOffset=0}t.stopPropagation();return}this.mode="move"}},this.container.onmouseup=t=>{this._transformMode&&this.selected&&this.onChange&&this.onChange({type:this._transformMode,arrow:this.selected,arrows:this.getData()}),this.mode=null,this._transformMode=null,this._transformHandle=null}}_mousePos(t){const e=this.container.getBoundingClientRect();return{x:t.clientX-e.left,y:t.clientY-e.top}}_generatePath(t,e=0){if(t.length<2)return"";if(e===0){let o=`M ${t[0].x} ${t[0].y}`;for(let i=1;i<t.length;i++)o+=` L ${t[i].x} ${t[i].y}`;return o}let s=`M ${t[0].x} ${t[0].y}`;for(let o=0;o<t.length-1;o++){const i=t[o],n=t[o+1],a=n.x-i.x,l=n.y-i.y,r=Math.hypot(a,l);if(r===0)continue;let h=a,c=l;if(o>0){const b=t[o-1];h=i.x-b.x,c=i.y-b.y}let d=a,u=l;if(o<t.length-2){const b=t[o+2];d=b.x-n.x,u=b.y-n.y}const f=Math.hypot(h,c)||1,p=Math.hypot(d,u)||1,k=h/f,C=c/f,x=d/p,v=u/p,m=r*e*.3,y=i.x+k*m,P=i.y+C*m,A=n.x-x*m,E=n.y-v*m;s+=` C ${y} ${P} ${A} ${E} ${n.x} ${n.y}`}return s}_generateArrowHead(t,e=8){if(t.length<2)return"";const s=t[t.length-1];let o=t[t.length-2];t.length>=3&&Math.hypot(s.x-o.x,s.y-o.y)<5&&(o=t[t.length-3]);const i=s.x-o.x,n=s.y-o.y,a=Math.hypot(i,n);if(a<1)return"";const l=i/a,r=n/a,h=s.x,c=s.y,d=e/8,u=40*d,f=20*d,p=20*d,k=s.x+l*p,C=s.y+r*p,x=s.x-l*(u-p),v=s.y-r*(u-p),m=-r,y=l,P=x+m*f,A=v+y*f,E=x-m*f,b=v-y*f;return`M ${k} ${C} L ${P} ${A} L ${h} ${c} L ${E} ${b} Z`}_createArrowGroup(t,e){const s=document.createElementNS("http://www.w3.org/2000/svg","g");s.setAttribute("data-index",e);const o=t.color||this._defaultColor,i=t.strokeWidth||this._strokeWidth,n=t.curveRate??t.cornerRoundness??0,a=document.createElementNS("http://www.w3.org/2000/svg","path");a.setAttribute("class","ae-arrow-path"),a.style.stroke=o,a.style.strokeWidth=i+"px",a.setAttribute("d",this._generatePath(t.points,n)),s.appendChild(a);const l=document.createElementNS("http://www.w3.org/2000/svg","path");if(l.setAttribute("fill",o),l.setAttribute("d",this._generateArrowHead(t.points,i)),s.appendChild(l),t===this.selected){const r=this._getArrowBBox(t),h=document.createElementNS("http://www.w3.org/2000/svg","rect");h.setAttribute("class","ae-transform-box"),h.setAttribute("x",r.minX-10),h.setAttribute("y",r.minY-10),h.setAttribute("width",r.width+20),h.setAttribute("height",r.height+20),s.appendChild(h);const c=document.createElementNS("http://www.w3.org/2000/svg","circle");c.setAttribute("class","ae-transform-handle"),c.setAttribute("cx",r.maxX+10),c.setAttribute("cy",r.maxY+10),c.setAttribute("r",6),c.setAttribute("data-handle","scale"),s.appendChild(c);const d=r.minY-30,u=r.centerX,f=document.createElementNS("http://www.w3.org/2000/svg","line");f.setAttribute("class","ae-rotate-line"),f.setAttribute("x1",r.centerX),f.setAttribute("y1",r.minY-10),f.setAttribute("x2",u),f.setAttribute("y2",d),s.appendChild(f);const p=document.createElementNS("http://www.w3.org/2000/svg","circle");p.setAttribute("class","ae-rotate-handle"),p.setAttribute("cx",u),p.setAttribute("cy",d),p.setAttribute("r",8),p.setAttribute("data-handle","rotate"),s.appendChild(p)}return s}render(){if(this.svg.querySelectorAll("g").forEach(t=>t.remove()),this.arrows.forEach((t,e)=>{const s=this._createArrowGroup(t,e);this.svg.appendChild(s)}),this.current){const t=this._createArrowGroup(this.current,this.arrows.length);this.svg.appendChild(t)}}_isDoubleClick(t){const e=Date.now(),s=e-this.lastClickTime;return this.lastClickTime=e,s<300&&this.lastClickPos&&Math.hypot(t.x-this.lastClickPos.x,t.y-this.lastClickPos.y)<10?(this.lastClickPos=null,!0):(this.lastClickPos=t,!1)}_handleClick(t,e){if(!(this.isCtrl&&!e.ctrlKey)){if(this._shouldBlockClick){this._shouldBlockClick=!1;return}if(this._isDoubleClick(t)){if(this.drawing&&this.current&&this.current.points.length>=2){this.drawing=!1,this.arrows.push(this.current);const s=this.current;this.current=null,this.svg.classList.remove("ae-d2-svg-fixed"),this.render(),this.onDrawEnd&&this.onDrawEnd({arrow:s,arrows:this.getData()})}return}if(this.selected){for(const s of this.arrows)if(this._hitArrow(s,t)){this.render();return}this.selected=null,this._hideToolbar(),this.render();return}for(const s of this.arrows)if(this._hitArrow(s,t)){this.selected=s,this._showToolbar(),this.render();return}this.drawing?this.current.points.push(t):(this.drawing=!0,this.current={points:[t,t],color:this._defaultColor},this.svg.classList.add("ae-d2-svg-fixed")),this.render()}}_handleEnter(){if(this.drawing&&this.current&&this.current.points.length>=2){this.drawing=!1,this.arrows.push(this.current);const t=this.current;this.current=null,this.svg.classList.remove("ae-d2-svg-fixed"),this.render(),this.onDrawEnd&&this.onDrawEnd({arrow:t,arrows:this.getData()})}}_handleEsc(){this.drawing&&(this.drawing=!1,this.current=null,this.svg.classList.remove("ae-d2-svg-fixed")),this.selected&&(this.selected=null),this._hideColorPicker(),this._hideToolbar(),this.render()}_handleDelete(){if(this.selected){const t=this.selected,e=this.arrows.indexOf(this.selected);e>-1&&this.arrows.splice(e,1),this.selected=null,this._hideToolbar(),this.render(),this.onRemove&&this.onRemove({arrow:t,arrows:this.getData()})}}_showColorPicker(t){if(this._showingColorPicker){this._hideColorPicker();return}this._showingColorPicker=!0;const e=document.createElement("div");e.className="ae-color-picker-popup";const s=document.createElement("span");s.textContent="选择颜色",s.style.cssText="font-size: 12px; color: #666;";const o=document.createElement("input");o.type="color",o.value=this.selected.color||this._defaultColor,o.showPicker(),e.appendChild(s),e.appendChild(o);const i=this.container.getBoundingClientRect(),n=this._getArrowBBox(this.selected),a=i.left+n.minX-50,l=i.top+n.maxY+15;e.style.left=a+"px",e.style.top=l+"px",o.addEventListener("input",h=>{this.selected.color=h.target.value,this._defaultColor=h.target.value,this.render(),this.onChange&&this.onChange({type:"color",arrow:this.selected,value:h.target.value,arrows:this.getData()})});const r=h=>{e.contains(h.target)||(this._hideColorPicker(),document.removeEventListener("click",r))};document.body.appendChild(e),this._colorPickerPopup=e,document.addEventListener("click",r)}_hideColorPicker(){this._colorPickerPopup&&(this._colorPickerPopup.remove(),this._colorPickerPopup=null),this._showingColorPicker=!1}deleteSelected(){this.selected&&(this.arrows=this.arrows.filter(t=>t!==this.selected),this.selected=null,this.render())}_handleMouseMove(t,e){if(!this._toolbarDragging&&!(this._toolbar&&(t.target===this._toolbar||this._toolbar.contains(t.target)))){if(this.isCtrl&&!t.ctrlKey){if(this.drawing&&this.current&&this.current.points.length>=2){this.drawing=!1,this.arrows.push(this.current);const s=this.current;this.current=null,this.svg.classList.remove("ae-d2-svg-fixed"),this.render(),this.onDrawEnd&&this.onDrawEnd({arrow:s,arrows:this.getData()})}return}if(this.drawing&&(this.current.points[this.current.points.length-1]=e,this.render()),this._transformMode&&this.selected){this._transformMode==="rotate"?this._handleRotate(e):this._transformMode==="scale"&&this._handleScale(e),this.render();return}if(this.selected&&this.mode==="move"){const s=t.movementX,o=t.movementY;(s!==0||o!==0)&&(this._shouldBlockClick=!0),this.selected.points.forEach(i=>{i.x+=s,i.y+=o}),this.render()}}}_getArrowBBox(t){const e=t.points;let s=1/0,o=1/0,i=-1/0,n=-1/0;for(const a of e)s=Math.min(s,a.x),o=Math.min(o,a.y),i=Math.max(i,a.x),n=Math.max(n,a.y);return{minX:s,minY:o,maxX:i,maxY:n,width:i-s,height:n-o,centerX:(s+i)/2,centerY:(o+n)/2}}_handleRotate(t){const e=this._transformCenter,s=e.centerX,o=e.centerY,i=Math.atan2(t.y-o,t.x-s),n=Math.atan2(this._transformStartPos.y-o,this._transformStartPos.x-s),a=i-n,l=Math.cos(a),r=Math.sin(a);this.selected.points.forEach((h,c)=>{const d=this._transformStartPoints[c].x-s,u=this._transformStartPoints[c].y-o;h.x=s+d*l-u*r,h.y=o+d*r+u*l})}_handleScale(t){const e=this._transformCenter,s=e.centerX,o=e.centerY,i=this._transformStartPoints,n=this._transformStartPos,a=t.x-s,l=t.y-o,r=n.x-s,h=n.y-o,c=Math.hypot(a,l),d=Math.hypot(r,h),u=c/d;this.selected.points.forEach((f,p)=>{f.x=s+(i[p].x-s)*u,f.y=o+(i[p].y-o)*u})}_hitArrow(t,e){for(let s=0;s<t.points.length-1;s++)if(this._dist(e,t.points[s],t.points[s+1])<15)return!0;return!1}_dist(t,e,s){const o=s.x-e.x,i=s.y-e.y,n=((t.x-e.x)*o+(t.y-e.y)*i)/(o*o+i*i),a=Math.max(0,Math.min(1,n)),l=e.x+a*o,r=e.y+a*i;return Math.hypot(t.x-l,t.y-r)}getData(){return this.arrows.map(t=>({points:t.points,curveRate:t.curveRate??t.cornerRoundness??0,strokeWidth:t.strokeWidth,color:t.color}))}setData(t){this.arrows=t.map(e=>({points:e.points,curveRate:e.curveRate??0,strokeWidth:e.strokeWidth??8,color:e.color})),this.render()}clear(){this.arrows=[],this.drawing=!1,this.current=null,this.selected=null,this.render()}destroy(){this._kb&&this._kb.destroy&&this._kb.destroy(),this.container.onclick=null,this.container.onmousemove=null,this.container.onmousedown=null,this.container.onmouseup=null,this.container.ondblclick=null,this.svg&&(this.svg.remove(),this.svg=null),this._toolbar&&(this._toolbar.remove(),this._toolbar=null),this._colorPickerPopup&&(this._colorPickerPopup.remove(),this._colorPickerPopup=null),this.arrows=[],this.drawing=!1,this.current=null,this.selected=null,this.mode=null,this._transformMode=null,this._transformHandle=null}}g.ArrowEditor=S,Object.defineProperty(g,Symbol.toStringTag,{value:"Module"})}));
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@wbiokr/keybinding");if("undefined"!=typeof document){const t=document.createElement("style");t.textContent='\n.ae-d2-container {\n position: relative;\n width: 1000px;\n height: 600px;\n background: #fff;\n margin: auto;\n}\n\n.ae-d2-svg {\n width: 100%;\n height: 100%;\n position: absolute;\n left: 0;\n top: 0;\n z-index: 10;\n}\n\n\n.ae-arrow-path {\n fill: none;\n stroke-linecap: round;\n stroke-linejoin: round;\n cursor: pointer;\n}\n\n.ae-arrow-path:hover {\n stroke: #00aaff;\n}\n\n.ae-transform-box {\n fill: none;\n stroke: #00aaff;\n stroke-width: 2;\n stroke-dasharray: 4;\n}\n\n.ae-transform-handle {\n fill: #fff;\n stroke: #00aaff;\n stroke-width: 2;\n cursor: pointer;\n}\n\n.ae-transform-handle:hover {\n fill: #00aaff;\n}\n\n.ae-rotate-handle {\n fill: #fff;\n stroke: #ff6600;\n stroke-width: 2;\n cursor: grab;\n}\n\n.ae-rotate-handle:hover {\n fill: #ff6600;\n}\n\n.ae-rotate-line {\n stroke: #ff6600;\n stroke-width: 1;\n stroke-dasharray: 4;\n}\n\n/* 工具条样式 */\n.ae-toolbar {\n position: absolute;\n display: none;\n flex-direction: column;\n gap: 10px;\n padding: 12px;\n background: #fff;\n border: 1px solid #ddd;\n border-radius: 8px;\n box-shadow: 0 2px 12px rgba(0,0,0,0.15);\n z-index: 20;\n pointer-events: auto;\n min-width: 140px;\n}\n\n.ae-toolbar-drag-handle {\n cursor: grab;\n text-align: center;\n padding: 4px;\n color: #999;\n font-size: 14px;\n line-height: 1;\n user-select: none;\n border-bottom: 1px solid #eee;\n margin: -12px -12px 8px -12px;\n padding-top: 8px;\n padding-bottom: 8px;\n border-radius: 8px 8px 0 0;\n}\n\n.ae-toolbar-drag-handle:active {\n cursor: grabbing;\n}\n\n.ae-toolbar-item {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.ae-toolbar-label {\n font-size: 11px;\n color: #666;\n}\n\n.ae-toolbar input[type="color"] {\n width: 40px;\n height: 30px;\n border: 1px solid #ddd;\n border-radius: 4px;\n cursor: pointer;\n padding: 0;\n background: none;\n}\n\n.ae-toolbar input[type="range"] {\n width: 120px;\n cursor: pointer;\n}\n\n.ae-toolbar-value {\n font-size: 10px;\n color: #999;\n text-align: right;\n}\n',document.head.appendChild(t)}exports.ArrowEditor=class{constructor(t,e={}){this.container="string"==typeof t?document.querySelector(t):t,this.svg=null,this.arrows=[],this.drawing=!1,this.current=null,this.selected=null,this.mode=null,this.lastClickTime=0,this.lastClickPos=null,this._shouldBlockClick=!1,this._defaultColor="#2b8cff",this.isCtrl=e.isCtrl||!1,this.stopPropagation=e.stopPropagation||!1,this.preventDefault=e.preventDefault||!1,this.onDrawEnd=e.onDrawEnd||null,this.onRemove=e.onRemove||null,this.onChange=e.onChange||null,this._transformMode=null,this._transformHandle=null,this._transformStartPos=null,this._transformStartPoints=null,this._transformCenter=null,this._transformStartAngle=null,this._rotationOffset=0,this._toolbar=null,this._strokeWidth=8,this._curveRate=0,this._createSVG(),this._initKeybindings(),this._initEvents()}_createSVG(){if("undefined"!=typeof getComputedStyle){"static"===getComputedStyle(this.container).position&&(this.container.style.position="relative")}this.svg=document.createElementNS("http://www.w3.org/2000/svg","svg"),this.svg.setAttribute("class","ae-d2-svg"),this.container.appendChild(this.svg);const t=document.createElementNS("http://www.w3.org/2000/svg","defs");this.svg.appendChild(t);const e=document.createElementNS("http://www.w3.org/2000/svg","marker");e.setAttribute("id","ae-arrowhead"),e.setAttribute("markerWidth","10"),e.setAttribute("markerHeight","10"),e.setAttribute("refX","9"),e.setAttribute("refY","5"),e.setAttribute("orient","auto");const s=document.createElementNS("http://www.w3.org/2000/svg","polygon");s.setAttribute("points","0,0 10,5 0,10 2,5"),s.setAttribute("fill",this._defaultColor),e.appendChild(s),t.appendChild(e)}_createToolbar(){var t,e;this._toolbar&&this._toolbar.remove(),this._toolbar=document.createElement("div"),this._toolbar.className="ae-toolbar";const s=this.selected.color||this._defaultColor,r=this.selected.strokeWidth||this._strokeWidth,o=null!=(e=null!=(t=this.selected.curveRate)?t:this.selected.cornerRoundness)?e:0;this._toolbar.innerHTML=`\n <div class="ae-toolbar-drag-handle">:::</div>\n <div class="ae-toolbar-item">\n <span class="ae-toolbar-label">颜色</span>\n <input type="color" class="ae-color-input" value="${s}" />\n </div>\n <div class="ae-toolbar-item">\n <span class="ae-toolbar-label">粗细</span>\n <input type="range" class="ae-stroke-input" min="1" max="60" value="${r}" />\n <span class="ae-toolbar-value">${r}px</span>\n </div>\n <div class="ae-toolbar-item">\n <span class="ae-toolbar-label">曲线率</span>\n <input type="range" class="ae-round-input" min="0" max="1" step="0.1" value="${o}" />\n </div>\n `;this._toolbar.querySelector(".ae-color-input").addEventListener("input",t=>{this.selected&&(this.selected.color=t.target.value,this._defaultColor=t.target.value,this._updateMarkerColor(t.target.value),this.render(),this.onChange&&this.onChange({type:"color",arrow:this.selected,value:t.target.value,arrows:this.getData()}))});const n=this._toolbar.querySelector(".ae-stroke-input"),i=this._toolbar.querySelector(".ae-stroke-input + .ae-toolbar-value");n.addEventListener("input",t=>{this.selected&&(this.selected.strokeWidth=parseInt(t.target.value),i.textContent=t.target.value+"px",this.render(),this.onChange&&this.onChange({type:"strokeWidth",arrow:this.selected,value:parseInt(t.target.value),arrows:this.getData()}))});this._toolbar.querySelector(".ae-round-input").addEventListener("input",t=>{this.selected&&(this.selected.curveRate=parseFloat(t.target.value),this.render(),this.onChange&&this.onChange({type:"curveRate",arrow:this.selected,value:parseFloat(t.target.value),arrows:this.getData()}))});const a=this._toolbar.querySelector(".ae-toolbar-drag-handle");this._setupToolbarDrag(a),this._toolbar.addEventListener("mousedown",t=>{t.stopPropagation()}),this._toolbar.addEventListener("mouseup",t=>{t.stopPropagation()}),this.container.appendChild(this._toolbar)}_setupToolbarDrag(t){let e=!1,s={x:0,y:0};t.addEventListener("mousedown",t=>{e=!0,this._toolbarDragging=!0;const r=this._toolbar.getBoundingClientRect();s.x=t.clientX-r.left,s.y=t.clientY-r.top,t.preventDefault(),t.stopPropagation();const o=t=>{if(!e)return;const r=this.container.getBoundingClientRect();let o=t.clientX-r.left-s.x,n=t.clientY-r.top-s.y;const i=this._toolbar.offsetWidth,a=this._toolbar.offsetHeight;o=Math.max(0,Math.min(o,r.width-i)),n=Math.max(0,Math.min(n,r.height-a)),this._toolbar.style.left=o+"px",this._toolbar.style.top=n+"px"},n=t=>{e=!1,this._toolbarDragging=!1,document.removeEventListener("mousemove",o),document.removeEventListener("mouseup",n),this._toolbar.removeEventListener("mouseup",n),t.preventDefault(),t.stopPropagation()};document.addEventListener("mousemove",o),document.addEventListener("mouseup",n),this._toolbar.addEventListener("mouseup",n)})}_showToolbar(){var t,e;if(this.selected){this._toolbar||this._createToolbar(),this._toolbar.style.display="flex";const s=this.selected.color||this._defaultColor,r=this.selected.strokeWidth||this._strokeWidth,o=null!=(e=null!=(t=this.selected.curveRate)?t:this.selected.cornerRoundness)?e:0,n=this._toolbar.querySelector(".ae-color-input"),i=this._toolbar.querySelector(".ae-stroke-input"),a=this._toolbar.querySelector(".ae-stroke-input + .ae-toolbar-value"),l=this._toolbar.querySelector(".ae-round-input");n&&(n.value=s),i&&(i.value=r,a.textContent=r+"px"),l&&(l.value=o);const h=this._getArrowBBox(this.selected),c=this._toolbar.offsetWidth||150,d=this._toolbar.offsetHeight||120;let u=h.maxX+20;u+c>this.container.offsetWidth&&(u=h.minX-c-20);let p=h.centerY-d/2;p<0&&(p=0),p+d>this.container.offsetHeight&&(p=this.container.offsetHeight-d),this._toolbar.style.left=u+"px",this._toolbar.style.top=p+"px"}}_hideToolbar(){this._toolbar&&(this._toolbar.style.display="none")}_updateMarkerColor(t){const e=this.svg.querySelector("#ae-arrowhead polygon");e&&e.setAttribute("fill",t)}_initKeybindings(){this._kb=new t.Keybinding("arrow-editor"),this._kb.on("enter",()=>{this._handleEnter()}),this._kb.on("esc",()=>{this._handleEsc()}),this._kb.on("delete",()=>{this._handleDelete()}),this._kb.on("backspace",()=>{this._handleDelete()})}_initEvents(){this.container.onclick=t=>{if(this._toolbar&&(t.target===this._toolbar||this._toolbar.contains(t.target)))return;this.preventDefault&&t.preventDefault(),this.stopPropagation&&t.stopPropagation();const e=this._mousePos(t);this._handleClick(e,t)},this.container.onmousemove=t=>{this.preventDefault&&t.preventDefault(),this.stopPropagation&&t.stopPropagation();const e=this._mousePos(t);this._handleMouseMove(t,e)},this.container.onmousedown=t=>{if((!this._toolbar||t.target!==this._toolbar&&!this._toolbar.contains(t.target))&&(this.preventDefault&&t.preventDefault(),this.stopPropagation&&t.stopPropagation(),this.selected)){const e=t.target.getAttribute("data-handle");if(e){this._transformMode=e,this._transformHandle=e;const s=this._mousePos(t);if(this._transformStartPos=s,this._transformStartPoints=this.selected.points.map(t=>({x:t.x,y:t.y})),this._transformCenter=this._getArrowBBox(this.selected),"rotate"===e){const t=this._transformCenter,e=s.x-t.centerX,r=s.y-t.centerY;this._transformStartAngle=Math.atan2(r,e),this._rotationOffset=0}return void t.stopPropagation()}this.mode="move"}},this.container.onmouseup=t=>{this._transformMode&&this.selected&&this.onChange&&this.onChange({type:this._transformMode,arrow:this.selected,arrows:this.getData()}),this.mode=null,this._transformMode=null,this._transformHandle=null}}_mousePos(t){const e=this.container.getBoundingClientRect();return{x:t.clientX-e.left,y:t.clientY-e.top}}_generatePath(t,e=0){if(t.length<2)return"";if(0===e){let e=`M ${t[0].x} ${t[0].y}`;for(let s=1;s<t.length;s++)e+=` L ${t[s].x} ${t[s].y}`;return e}let s=`M ${t[0].x} ${t[0].y}`;for(let r=0;r<t.length-1;r++){const o=t[r],n=t[r+1],i=n.x-o.x,a=n.y-o.y,l=Math.hypot(i,a);if(0===l)continue;let h=i,c=a;if(r>0){const e=t[r-1];h=o.x-e.x,c=o.y-e.y}let d=i,u=a;if(r<t.length-2){const e=t[r+2];d=e.x-n.x,u=e.y-n.y}const p=Math.hypot(h,c)||1,g=Math.hypot(d,u)||1,f=h/p,m=c/p,_=d/g,b=u/g,v=l*e*.3;s+=` C ${o.x+f*v} ${o.y+m*v} ${n.x-_*v} ${n.y-b*v} ${n.x} ${n.y}`}return s}_generateArrowHead(t,e=8){if(t.length<2)return"";const s=t[t.length-1];let r=t[t.length-2];if(t.length>=3){Math.hypot(s.x-r.x,s.y-r.y)<5&&(r=t[t.length-3])}const o=s.x-r.x,n=s.y-r.y,i=Math.hypot(o,n);if(i<1)return"";const a=o/i,l=n/i,h=s.x,c=s.y,d=e/8,u=40*d,p=20*d,g=20*d,f=s.x+a*g,m=s.y+l*g,_=s.x-a*(u-g),b=s.y-l*(u-g),v=-l;return`M ${f} ${m} L ${_+v*p} ${b+a*p} L ${h} ${c} L ${_-v*p} ${b-a*p} Z`}_createArrowGroup(t,e){var s,r;const o=document.createElementNS("http://www.w3.org/2000/svg","g");o.setAttribute("data-index",e);const n=t.color||this._defaultColor,i=t.strokeWidth||this._strokeWidth,a=null!=(r=null!=(s=t.curveRate)?s:t.cornerRoundness)?r:0,l=document.createElementNS("http://www.w3.org/2000/svg","path");l.setAttribute("class","ae-arrow-path"),l.style.stroke=n,l.style.strokeWidth=i+"px",l.setAttribute("d",this._generatePath(t.points,a)),o.appendChild(l);const h=document.createElementNS("http://www.w3.org/2000/svg","path");if(h.setAttribute("fill",n),h.setAttribute("d",this._generateArrowHead(t.points,i)),o.appendChild(h),t===this.selected){const e=this._getArrowBBox(t),s=document.createElementNS("http://www.w3.org/2000/svg","rect");s.setAttribute("class","ae-transform-box"),s.setAttribute("x",e.minX-10),s.setAttribute("y",e.minY-10),s.setAttribute("width",e.width+20),s.setAttribute("height",e.height+20),o.appendChild(s);const r=document.createElementNS("http://www.w3.org/2000/svg","circle");r.setAttribute("class","ae-transform-handle"),r.setAttribute("cx",e.maxX+10),r.setAttribute("cy",e.maxY+10),r.setAttribute("r",6),r.setAttribute("data-handle","scale"),o.appendChild(r);const n=e.minY-30,i=e.centerX,a=document.createElementNS("http://www.w3.org/2000/svg","line");a.setAttribute("class","ae-rotate-line"),a.setAttribute("x1",e.centerX),a.setAttribute("y1",e.minY-10),a.setAttribute("x2",i),a.setAttribute("y2",n),o.appendChild(a);const l=document.createElementNS("http://www.w3.org/2000/svg","circle");l.setAttribute("class","ae-rotate-handle"),l.setAttribute("cx",i),l.setAttribute("cy",n),l.setAttribute("r",8),l.setAttribute("data-handle","rotate"),o.appendChild(l)}return o}render(){if(this.svg.querySelectorAll("g").forEach(t=>t.remove()),this.arrows.forEach((t,e)=>{const s=this._createArrowGroup(t,e);this.svg.appendChild(s)}),this.current){const t=this._createArrowGroup(this.current,this.arrows.length);this.svg.appendChild(t)}}_isDoubleClick(t){const e=Date.now(),s=e-this.lastClickTime;return this.lastClickTime=e,s<300&&this.lastClickPos&&Math.hypot(t.x-this.lastClickPos.x,t.y-this.lastClickPos.y)<10?(this.lastClickPos=null,!0):(this.lastClickPos=t,!1)}_handleClick(t,e){if(!this.isCtrl||e.ctrlKey)if(this._shouldBlockClick)this._shouldBlockClick=!1;else if(this._isDoubleClick(t)){if(this.drawing&&this.current&&this.current.points.length>=2){this.drawing=!1,this.arrows.push(this.current);const t=this.current;this.current=null,this.svg.classList.remove("ae-d2-svg-fixed"),this.render(),this.onDrawEnd&&this.onDrawEnd({arrow:t,arrows:this.getData()})}}else{if(this.selected){for(const e of this.arrows)if(this._hitArrow(e,t))return void this.render();return this.selected=null,this._hideToolbar(),void this.render()}for(const e of this.arrows)if(this._hitArrow(e,t))return this.selected=e,this._showToolbar(),void this.render();this.drawing?this.current.points.push(t):(this.drawing=!0,this.current={points:[t,t],color:this._defaultColor},this.svg.classList.add("ae-d2-svg-fixed")),this.render()}}_handleEnter(){if(this.drawing&&this.current&&this.current.points.length>=2){this.drawing=!1,this.arrows.push(this.current);const t=this.current;this.current=null,this.svg.classList.remove("ae-d2-svg-fixed"),this.render(),this.onDrawEnd&&this.onDrawEnd({arrow:t,arrows:this.getData()})}}_handleEsc(){this.drawing&&(this.drawing=!1,this.current=null,this.svg.classList.remove("ae-d2-svg-fixed")),this.selected&&(this.selected=null),this._hideColorPicker(),this._hideToolbar(),this.render()}_handleDelete(){if(this.selected){const t=this.selected,e=this.arrows.indexOf(this.selected);e>-1&&this.arrows.splice(e,1),this.selected=null,this._hideToolbar(),this.render(),this.onRemove&&this.onRemove({arrow:t,arrows:this.getData()})}}_showColorPicker(t){if(this._showingColorPicker)return void this._hideColorPicker();this._showingColorPicker=!0;const e=document.createElement("div");e.className="ae-color-picker-popup";const s=document.createElement("span");s.textContent="选择颜色",s.style.cssText="font-size: 12px; color: #666;";const r=document.createElement("input");r.type="color",r.value=this.selected.color||this._defaultColor,r.showPicker(),e.appendChild(s),e.appendChild(r);const o=this.container.getBoundingClientRect(),n=this._getArrowBBox(this.selected),i=o.left+n.minX-50,a=o.top+n.maxY+15;e.style.left=i+"px",e.style.top=a+"px",r.addEventListener("input",t=>{this.selected.color=t.target.value,this._defaultColor=t.target.value,this.render(),this.onChange&&this.onChange({type:"color",arrow:this.selected,value:t.target.value,arrows:this.getData()})});const l=t=>{e.contains(t.target)||(this._hideColorPicker(),document.removeEventListener("click",l))};document.body.appendChild(e),this._colorPickerPopup=e,document.addEventListener("click",l)}_hideColorPicker(){this._colorPickerPopup&&(this._colorPickerPopup.remove(),this._colorPickerPopup=null),this._showingColorPicker=!1}deleteSelected(){this.selected&&(this.arrows=this.arrows.filter(t=>t!==this.selected),this.selected=null,this.render())}_handleMouseMove(t,e){if(!this._toolbarDragging&&(!this._toolbar||t.target!==this._toolbar&&!this._toolbar.contains(t.target)))if(!this.isCtrl||t.ctrlKey){if(this.drawing&&(this.current.points[this.current.points.length-1]=e,this.render()),this._transformMode&&this.selected)return"rotate"===this._transformMode?this._handleRotate(e):"scale"===this._transformMode&&this._handleScale(e),void this.render();if(this.selected&&"move"===this.mode){const e=t.movementX,s=t.movementY;0===e&&0===s||(this._shouldBlockClick=!0),this.selected.points.forEach(t=>{t.x+=e,t.y+=s}),this.render()}}else if(this.drawing&&this.current&&this.current.points.length>=2){this.drawing=!1,this.arrows.push(this.current);const t=this.current;this.current=null,this.svg.classList.remove("ae-d2-svg-fixed"),this.render(),this.onDrawEnd&&this.onDrawEnd({arrow:t,arrows:this.getData()})}}_getArrowBBox(t){const e=t.points;let s=1/0,r=1/0,o=-1/0,n=-1/0;for(const i of e)s=Math.min(s,i.x),r=Math.min(r,i.y),o=Math.max(o,i.x),n=Math.max(n,i.y);return{minX:s,minY:r,maxX:o,maxY:n,width:o-s,height:n-r,centerX:(s+o)/2,centerY:(r+n)/2}}_handleRotate(t){const e=this._transformCenter,s=e.centerX,r=e.centerY,o=Math.atan2(t.y-r,t.x-s)-Math.atan2(this._transformStartPos.y-r,this._transformStartPos.x-s),n=Math.cos(o),i=Math.sin(o);this.selected.points.forEach((t,e)=>{const o=this._transformStartPoints[e].x-s,a=this._transformStartPoints[e].y-r;t.x=s+o*n-a*i,t.y=r+o*i+a*n})}_handleScale(t){const e=this._transformCenter,s=e.centerX,r=e.centerY,o=this._transformStartPoints,n=this._transformStartPos,i=t.x-s,a=t.y-r,l=n.x-s,h=n.y-r,c=Math.hypot(i,a)/Math.hypot(l,h);this.selected.points.forEach((t,e)=>{t.x=s+(o[e].x-s)*c,t.y=r+(o[e].y-r)*c})}_hitArrow(t,e){for(let s=0;s<t.points.length-1;s++)if(this._dist(e,t.points[s],t.points[s+1])<15)return!0;return!1}_dist(t,e,s){const r=s.x-e.x,o=s.y-e.y,n=((t.x-e.x)*r+(t.y-e.y)*o)/(r*r+o*o),i=Math.max(0,Math.min(1,n)),a=e.x+i*r,l=e.y+i*o;return Math.hypot(t.x-a,t.y-l)}getData(){return this.arrows.map(t=>{var e,s;return{points:t.points,curveRate:null!=(s=null!=(e=t.curveRate)?e:t.cornerRoundness)?s:0,strokeWidth:t.strokeWidth,color:t.color}})}setData(t){this.arrows=t.map(t=>{var e,s;return{points:t.points,curveRate:null!=(e=t.curveRate)?e:0,strokeWidth:null!=(s=t.strokeWidth)?s:8,color:t.color}}),this.render()}clear(){this.arrows=[],this.drawing=!1,this.current=null,this.selected=null,this.render()}destroy(){this._kb&&this._kb.destroy&&this._kb.destroy(),this.container.onclick=null,this.container.onmousemove=null,this.container.onmousedown=null,this.container.onmouseup=null,this.container.ondblclick=null,this.svg&&(this.svg.remove(),this.svg=null),this._toolbar&&(this._toolbar.remove(),this._toolbar=null),this._colorPickerPopup&&(this._colorPickerPopup.remove(),this._colorPickerPopup=null),this.arrows=[],this.drawing=!1,this.current=null,this.selected=null,this.mode=null,this._transformMode=null,this._transformHandle=null}};
148
2
  //# sourceMappingURL=bundle.cjs.js.map