@wbiokr/arrow 1.0.0 → 1.0.2

package/dist/bundle.esm.js

@@ -1,5 +1,5 @@
-import { Keybinding as P } from "@wbiokr/keybinding";
-const S = `
+import { Keybinding as A } from "@wbiokr/keybinding";
+const E = `
 .ae-d2-container {
   position: relative;
   width: 1000px;
@@ -14,7 +14,7 @@ const S = `
   position: absolute;
   left: 0;
   top: 0;
-  z-index: 100000;
+  z-index: 10;
 }
 
 
@@ -75,7 +75,7 @@ const S = `
   border: 1px solid #ddd;
   border-radius: 8px;
   box-shadow: 0 2px 12px rgba(0,0,0,0.15);
-  z-index: 1000000;
+  z-index: 20;
   pointer-events: auto;
   min-width: 140px;
 }
@@ -132,25 +132,25 @@ const S = `
 }
 `;
 if (typeof document < "u") {
-  const y = document.createElement("style");
-  y.textContent = S, document.head.appendChild(y);
+  const v = document.createElement("style");
+  v.textContent = E, document.head.appendChild(v);
 }
-class L {
-  constructor(t, s = {}) {
-    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 = s.isCtrl || !1, this.stopPropagation = s.stopPropagation || !1, this.preventDefault = s.preventDefault || !1, 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();
+class M {
+  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() {
-    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 s = document.createElementNS("http://www.w3.org/2000/svg", "defs");
-    this.svg.appendChild(s);
+    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 o = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
-    o.setAttribute("points", "0,0 10,5 0,10 2,5"), o.setAttribute("fill", this._defaultColor), e.appendChild(o), s.appendChild(e);
+    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, s = this.selected.strokeWidth || this._strokeWidth, e = this.selected.curveRate ?? this.selected.cornerRoundness ?? 0;
+    const t = this.selected.color || this._defaultColor, e = this.selected.strokeWidth || this._strokeWidth, s = this.selected.curveRate ?? this.selected.cornerRoundness ?? 0;
     this._toolbar.innerHTML = `
       <div class="ae-toolbar-drag-handle">:::</div>
       <div class="ae-toolbar-item">
@@ -159,44 +159,44 @@ class L {
       </div>
       <div class="ae-toolbar-item">
         <span class="ae-toolbar-label">粗细</span>
-        <input type="range" class="ae-stroke-input" min="1" max="60" value="${s}" />
-        <span class="ae-toolbar-value">${s}px</span>
+        <input type="range" class="ae-stroke-input" min="1" max="60" value="${e}" />
+        <span class="ae-toolbar-value">${e}px</span>
       </div>
       <div class="ae-toolbar-item">
         <span class="ae-toolbar-label">曲线率</span>
-        <input type="range" class="ae-round-input" min="0" max="1" step="0.1" value="${e}" />
+        <input type="range" class="ae-round-input" min="0" max="1" step="0.1" value="${s}" />
       </div>
-    `, this._toolbar.querySelector(".ae-color-input").addEventListener("input", (i) => {
-      this.selected && (this.selected.color = i.target.value, this._defaultColor = i.target.value, this._updateMarkerColor(i.target.value), this.render());
+    `, 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 r = this._toolbar.querySelector(".ae-stroke-input"), n = this._toolbar.querySelector(".ae-stroke-input + .ae-toolbar-value");
-    r.addEventListener("input", (i) => {
-      this.selected && (this.selected.strokeWidth = parseInt(i.target.value), n.textContent = i.target.value + "px", this.render());
-    }), this._toolbar.querySelector(".ae-round-input").addEventListener("input", (i) => {
-      this.selected && (this.selected.curveRate = parseFloat(i.target.value), this.render());
+    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", (i) => {
-      i.stopPropagation();
-    }), this._toolbar.addEventListener("mouseup", (i) => {
-      i.stopPropagation();
+    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 s = !1, e = { x: 0, y: 0 };
+    let e = !1, s = { x: 0, y: 0 };
     t.addEventListener("mousedown", (o) => {
-      s = !0, this._toolbarDragging = !0;
-      const r = this._toolbar.getBoundingClientRect();
-      e.x = o.clientX - r.left, e.y = o.clientY - r.top, o.preventDefault(), o.stopPropagation();
+      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 (!s) return;
-        const i = this.container.getBoundingClientRect();
-        let h = l.clientX - i.left - e.x, c = l.clientY - i.top - e.y;
+        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, i.width - d)), c = Math.max(0, Math.min(c, i.height - u)), this._toolbar.style.left = h + "px", this._toolbar.style.top = c + "px";
+        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) => {
-        s = !1, this._toolbarDragging = !1, document.removeEventListener("mousemove", n), document.removeEventListener("mouseup", a), this._toolbar.removeEventListener("mouseup", a), l.preventDefault(), l.stopPropagation();
+        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);
     });
@@ -204,11 +204,11 @@ class L {
   _showToolbar() {
     if (this.selected) {
       this._toolbar || this._createToolbar(), this._toolbar.style.display = "flex";
-      const t = this.selected.color || this._defaultColor, s = this.selected.strokeWidth || this._strokeWidth, e = this.selected.curveRate ?? this.selected.cornerRoundness ?? 0, o = this._toolbar.querySelector(".ae-color-input"), r = 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), r && (r.value = s, n.textContent = s + "px"), a && (a.value = e);
-      const l = this._getArrowBBox(this.selected), i = this._toolbar.offsetWidth || 150, h = this._toolbar.offsetHeight || 120;
+      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 + i > this.container.offsetWidth && (c = l.minX - i - 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";
     }
@@ -217,14 +217,18 @@ class L {
     this._toolbar && (this._toolbar.style.display = "none");
   }
   _updateMarkerColor(t) {
-    const s = this.svg.querySelector("#ae-arrowhead polygon");
-    s && s.setAttribute("fill", t);
+    const e = this.svg.querySelector("#ae-arrowhead polygon");
+    e && e.setAttribute("fill", t);
   }
   _initKeybindings() {
-    this._kb = new P("arrow-editor"), this._kb.on("enter", () => {
+    this._kb = new A("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() {
@@ -232,128 +236,132 @@ class L {
       if (this._toolbar && (t.target === this._toolbar || this._toolbar.contains(t.target)))
         return;
       this.preventDefault && t.preventDefault(), this.stopPropagation && t.stopPropagation();
-      const s = this._mousePos(t);
-      this._handleClick(s, t);
+      const e = this._mousePos(t);
+      this._handleClick(e, t);
     }, this.container.onmousemove = (t) => {
       this.preventDefault && t.preventDefault(), this.stopPropagation && t.stopPropagation();
-      const s = this._mousePos(t);
-      this._handleMouseMove(t, s);
+      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 s = t.target.getAttribute("data-handle");
-        if (s) {
-          this._transformMode = s, this._transformHandle = s;
-          const e = this._mousePos(t);
-          if (this._transformStartPos = e, this._transformStartPoints = this.selected.points.map((o) => ({ x: o.x, y: o.y })), this._transformCenter = this._getArrowBBox(this.selected), s === "rotate") {
-            const o = this._transformCenter, r = e.x - o.centerX, n = e.y - o.centerY;
-            this._transformStartAngle = Math.atan2(n, r), this._rotationOffset = 0;
+        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 = () => {
-      this.mode = null, this._transformMode = null, this._transformHandle = null;
+    }, 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 s = this.container.getBoundingClientRect();
+    const e = this.container.getBoundingClientRect();
     return {
-      x: t.clientX - s.left,
-      y: t.clientY - s.top
+      x: t.clientX - e.left,
+      y: t.clientY - e.top
     };
   }
-  _generatePath(t, s = 0) {
+  _generatePath(t, e = 0) {
     if (t.length < 2) return "";
-    if (s === 0) {
+    if (e === 0) {
       let o = `M ${t[0].x} ${t[0].y}`;
-      for (let r = 1; r < t.length; r++)
-        o += ` L ${t[r].x} ${t[r].y}`;
+      for (let i = 1; i < t.length; i++)
+        o += ` L ${t[i].x} ${t[i].y}`;
       return o;
     }
-    let e = `M ${t[0].x} ${t[0].y}`;
+    let s = `M ${t[0].x} ${t[0].y}`;
     for (let o = 0; o < t.length - 1; o++) {
-      const r = t[o], n = t[o + 1], a = n.x - r.x, l = n.y - r.y, i = Math.hypot(a, l);
-      if (i === 0) continue;
+      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 m = t[o - 1];
-        h = r.x - m.x, c = r.y - m.y;
+        h = i.x - m.x, c = i.y - m.y;
       }
       let d = a, u = l;
       if (o < t.length - 2) {
         const m = t[o + 2];
         d = m.x - n.x, u = m.y - n.y;
       }
-      const p = Math.hypot(h, c) || 1, f = Math.hypot(d, u) || 1, v = h / p, w = c / p, b = d / f, _ = u / f, g = i * s * 0.3, x = r.x + v * g, k = r.y + w * g, C = n.x - b * g, A = n.y - _ * g;
-      e += ` C ${x} ${k} ${C} ${A} ${n.x} ${n.y}`;
+      const p = Math.hypot(h, c) || 1, f = Math.hypot(d, u) || 1, w = h / p, y = c / p, _ = d / f, b = u / f, g = r * e * 0.3, x = i.x + w * g, k = i.y + y * g, C = n.x - _ * g, P = n.y - b * g;
+      s += ` C ${x} ${k} ${C} ${P} ${n.x} ${n.y}`;
     }
-    return e;
+    return s;
   }
-  _generateArrowHead(t, s = 8) {
+  _generateArrowHead(t, e = 8) {
     if (t.length < 2) return "";
-    const e = t[t.length - 1];
+    const s = t[t.length - 1];
     let o = t[t.length - 2];
-    t.length >= 3 && Math.hypot(e.x - o.x, e.y - o.y) < 5 && (o = t[t.length - 3]);
-    const r = e.x - o.x, n = e.y - o.y, a = Math.hypot(r, n);
+    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 = r / a, i = n / a, h = e.x, c = e.y, d = s / 8, u = 40 * d, p = 20 * d, f = 20 * d, v = e.x + l * f, w = e.y + i * f, b = e.x - l * (u - f), _ = e.y - i * (u - f), g = -i, x = l, k = b + g * p, C = _ + x * p, A = b - g * p, m = _ - x * p;
-    return `M ${v} ${w} L ${k} ${C} L ${h} ${c} L ${A} ${m} Z`;
-  }
-  _createArrowGroup(t, s) {
-    const e = document.createElementNS("http://www.w3.org/2000/svg", "g");
-    e.setAttribute("data-index", s);
-    const o = t.color || this._defaultColor, r = 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 = r + "px", a.setAttribute("d", this._generatePath(t.points, n)), e.appendChild(a);
+    const l = i / a, r = n / a, h = s.x, c = s.y, d = e / 8, u = 40 * d, p = 20 * d, f = 20 * d, w = s.x + l * f, y = s.y + r * f, _ = s.x - l * (u - f), b = s.y - r * (u - f), g = -r, x = l, k = _ + g * p, C = b + x * p, P = _ - g * p, m = b - x * p;
+    return `M ${w} ${y} L ${k} ${C} L ${h} ${c} L ${P} ${m} 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, r)), e.appendChild(l), t === this.selected) {
-      const i = this._getArrowBBox(t), h = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-      h.setAttribute("class", "ae-transform-box"), h.setAttribute("x", i.minX - 10), h.setAttribute("y", i.minY - 10), h.setAttribute("width", i.width + 20), h.setAttribute("height", i.height + 20), e.appendChild(h);
+    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", i.maxX + 10), c.setAttribute("cy", i.maxY + 10), c.setAttribute("r", 6), c.setAttribute("data-handle", "scale"), e.appendChild(c);
-      const d = i.minY - 30, u = i.centerX, p = document.createElementNS("http://www.w3.org/2000/svg", "line");
-      p.setAttribute("class", "ae-rotate-line"), p.setAttribute("x1", i.centerX), p.setAttribute("y1", i.minY - 10), p.setAttribute("x2", u), p.setAttribute("y2", d), e.appendChild(p);
+      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, p = document.createElementNS("http://www.w3.org/2000/svg", "line");
+      p.setAttribute("class", "ae-rotate-line"), p.setAttribute("x1", r.centerX), p.setAttribute("y1", r.minY - 10), p.setAttribute("x2", u), p.setAttribute("y2", d), s.appendChild(p);
       const f = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-      f.setAttribute("class", "ae-rotate-handle"), f.setAttribute("cx", u), f.setAttribute("cy", d), f.setAttribute("r", 8), f.setAttribute("data-handle", "rotate"), e.appendChild(f);
+      f.setAttribute("class", "ae-rotate-handle"), f.setAttribute("cx", u), f.setAttribute("cy", d), f.setAttribute("r", 8), f.setAttribute("data-handle", "rotate"), s.appendChild(f);
     }
-    return e;
+    return s;
   }
   render() {
-    if (this.svg.querySelectorAll("g").forEach((t) => t.remove()), this.arrows.forEach((t, s) => {
-      const e = this._createArrowGroup(t, s);
-      this.svg.appendChild(e);
+    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 s = Date.now(), e = s - this.lastClickTime;
-    return this.lastClickTime = s, e < 300 && this.lastClickPos && Math.hypot(t.x - this.lastClickPos.x, t.y - this.lastClickPos.y) < 10 ? (this.lastClickPos = null, !0) : (this.lastClickPos = t, !1);
+    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, s) {
-    if (!(this.isCtrl && !s.ctrlKey)) {
+  _handleClick(t, e) {
+    if (!(this.isCtrl && !e.ctrlKey)) {
       if (this._shouldBlockClick) {
         this._shouldBlockClick = !1;
         return;
       }
       if (this._isDoubleClick(t)) {
-        this.drawing && this.current && this.current.points.length >= 2 && (this.drawing = !1, this.arrows.push(this.current), this.current = null, this.svg.classList.remove("ae-d2-svg-fixed"), this.render());
+        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 e of this.arrows)
-          if (this._hitArrow(e, t)) {
+        for (const s of this.arrows)
+          if (this._hitArrow(s, t)) {
             this.render();
             return;
           }
         this.selected = null, this._hideToolbar(), this.render();
         return;
       }
-      for (const e of this.arrows)
-        if (this._hitArrow(e, t)) {
-          this.selected = e, this._showToolbar(), this.render();
+      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 = {
@@ -363,31 +371,41 @@ class L {
     }
   }
   _handleEnter() {
-    this.drawing && this.current && this.current.points.length >= 2 && (this.drawing = !1, this.arrows.push(this.current), this.current = null, this.svg.classList.remove("ae-d2-svg-fixed"), this.render());
+    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 s = document.createElement("div");
-    s.className = "ae-color-picker-popup";
-    const e = document.createElement("span");
-    e.textContent = "选择颜色", e.style.cssText = "font-size: 12px; color: #666;";
+    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(), s.appendChild(e), s.appendChild(o);
-    const r = this.container.getBoundingClientRect(), n = this._getArrowBBox(this.selected), a = r.left + n.minX - 50, l = r.top + n.maxY + 15;
-    s.style.left = a + "px", s.style.top = l + "px", o.addEventListener("input", (h) => {
-      this.selected.color = h.target.value, this._defaultColor = h.target.value, this.render();
+    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 i = (h) => {
-      s.contains(h.target) || (this._hideColorPicker(), document.removeEventListener("click", i));
+    const r = (h) => {
+      e.contains(h.target) || (this._hideColorPicker(), document.removeEventListener("click", r));
     };
-    document.body.appendChild(s), this._colorPickerPopup = s, document.addEventListener("click", i);
+    document.body.appendChild(e), this._colorPickerPopup = e, document.addEventListener("click", r);
   }
   _hideColorPicker() {
     this._colorPickerPopup && (this._colorPickerPopup.remove(), this._colorPickerPopup = null), this._showingColorPicker = !1;
@@ -396,62 +414,66 @@ class L {
   deleteSelected() {
     this.selected && (this.arrows = this.arrows.filter((t) => t !== this.selected), this.selected = null, this.render());
   }
-  _handleMouseMove(t, s) {
+  _handleMouseMove(t, e) {
     if (!this._toolbarDragging && !(this._toolbar && (t.target === this._toolbar || this._toolbar.contains(t.target)))) {
       if (this.isCtrl && !t.ctrlKey) {
-        this.drawing && this.current && this.current.points.length >= 2 && (this.drawing = !1, this.arrows.push(this.current), this.current = null, this.svg.classList.remove("ae-d2-svg-fixed"), this.render());
+        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] = s, this.render()), this._transformMode && this.selected) {
-        this._transformMode === "rotate" ? this._handleRotate(s) : this._transformMode === "scale" && this._handleScale(s), this.render();
+      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 e = t.movementX, o = t.movementY;
-        (e !== 0 || o !== 0) && (this._shouldBlockClick = !0), this.selected.points.forEach((r) => {
-          r.x += e, r.y += o;
+        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 s = t.points;
-    let e = 1 / 0, o = 1 / 0, r = -1 / 0, n = -1 / 0;
-    for (const a of s)
-      e = Math.min(e, a.x), o = Math.min(o, a.y), r = Math.max(r, a.x), n = Math.max(n, a.y);
+    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: e,
+      minX: s,
       minY: o,
-      maxX: r,
+      maxX: i,
       maxY: n,
-      width: r - e,
+      width: i - s,
       height: n - o,
-      centerX: (e + r) / 2,
+      centerX: (s + i) / 2,
       centerY: (o + n) / 2
     };
   }
   _handleRotate(t) {
-    const s = this._transformCenter, e = s.centerX, o = s.centerY, r = Math.atan2(t.y - o, t.x - e), n = Math.atan2(this._transformStartPos.y - o, this._transformStartPos.x - e), a = r - n, l = Math.cos(a), i = Math.sin(a);
+    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 - e, u = this._transformStartPoints[c].y - o;
-      h.x = e + d * l - u * i, h.y = o + d * i + u * l;
+      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 s = this._transformCenter, e = s.centerX, o = s.centerY, r = this._transformStartPoints, n = this._transformStartPos, a = t.x - e, l = t.y - o, i = n.x - e, h = n.y - o, c = Math.hypot(a, l), d = Math.hypot(i, h), u = c / d;
+    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((p, f) => {
-      p.x = e + (r[f].x - e) * u, p.y = o + (r[f].y - o) * u;
+      p.x = s + (i[f].x - s) * u, p.y = o + (i[f].y - o) * u;
     });
   }
-  _hitArrow(t, s) {
-    for (let e = 0; e < t.points.length - 1; e++)
-      if (this._dist(s, t.points[e], t.points[e + 1]) < 15)
+  _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, s, e) {
-    const o = e.x - s.x, r = e.y - s.y, n = ((t.x - s.x) * o + (t.y - s.y) * r) / (o * o + r * r), a = Math.max(0, Math.min(1, n)), l = s.x + a * o, i = s.y + a * r;
-    return Math.hypot(t.x - l, t.y - i);
+  _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() {
@@ -464,19 +486,23 @@ class L {
   }
   // 设置箭头数据
   setData(t) {
-    this.arrows = t.map((s) => ({
-      points: s.points,
-      curveRate: s.curveRate ?? 0,
-      strokeWidth: s.strokeWidth ?? 8,
-      color: s.color
+    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;
+  }
 }
 export {
-  L as ArrowEditor
+  M as ArrowEditor
 };
 //# sourceMappingURL=bundle.esm.js.map