@wbiokr/arrow 1.0.2 → 1.0.3

package/dist/bundle.esm.js

@@ -1,508 +1,2 @@
-import { Keybinding as A } from "@wbiokr/keybinding";
-const E = `
-.ae-d2-container {
-  position: relative;
-  width: 1000px;
-  height: 600px;
-  background: #fff;
-  margin: auto;
-}
-
-.ae-d2-svg {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 10;
-}
-
-
-.ae-arrow-path {
-  fill: none;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  cursor: pointer;
-}
-
-.ae-arrow-path:hover {
-  stroke: #00aaff;
-}
-
-.ae-transform-box {
-  fill: none;
-  stroke: #00aaff;
-  stroke-width: 2;
-  stroke-dasharray: 4;
-}
-
-.ae-transform-handle {
-  fill: #fff;
-  stroke: #00aaff;
-  stroke-width: 2;
-  cursor: pointer;
-}
-
-.ae-transform-handle:hover {
-  fill: #00aaff;
-}
-
-.ae-rotate-handle {
-  fill: #fff;
-  stroke: #ff6600;
-  stroke-width: 2;
-  cursor: grab;
-}
-
-.ae-rotate-handle:hover {
-  fill: #ff6600;
-}
-
-.ae-rotate-line {
-  stroke: #ff6600;
-  stroke-width: 1;
-  stroke-dasharray: 4;
-}
-
-/* 工具条样式 */
-.ae-toolbar {
-  position: absolute;
-  display: none;
-  flex-direction: column;
-  gap: 10px;
-  padding: 12px;
-  background: #fff;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
-  z-index: 20;
-  pointer-events: auto;
-  min-width: 140px;
-}
-
-.ae-toolbar-drag-handle {
-  cursor: grab;
-  text-align: center;
-  padding: 4px;
-  color: #999;
-  font-size: 14px;
-  line-height: 1;
-  user-select: none;
-  border-bottom: 1px solid #eee;
-  margin: -12px -12px 8px -12px;
-  padding-top: 8px;
-  padding-bottom: 8px;
-  border-radius: 8px 8px 0 0;
-}
-
-.ae-toolbar-drag-handle:active {
-  cursor: grabbing;
-}
-
-.ae-toolbar-item {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.ae-toolbar-label {
-  font-size: 11px;
-  color: #666;
-}
-
-.ae-toolbar input[type="color"] {
-  width: 40px;
-  height: 30px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  cursor: pointer;
-  padding: 0;
-  background: none;
-}
-
-.ae-toolbar input[type="range"] {
-  width: 120px;
-  cursor: pointer;
-}
-
-.ae-toolbar-value {
-  font-size: 10px;
-  color: #999;
-  text-align: right;
-}
-`;
-if (typeof document < "u") {
-  const v = document.createElement("style");
-  v.textContent = E, document.head.appendChild(v);
-}
-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() {
-    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 = `
-      <div class="ae-toolbar-drag-handle">:::</div>
-      <div class="ae-toolbar-item">
-        <span class="ae-toolbar-label">颜色</span>
-        <input type="color" class="ae-color-input" value="${t}" />
-      </div>
-      <div class="ae-toolbar-item">
-        <span class="ae-toolbar-label">粗细</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="${s}" />
-      </div>
-    `, 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 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() {
-    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 m = t[o - 1];
-        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, 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 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, 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, 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, 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"), s.appendChild(f);
-    }
-    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((p, f) => {
-      p.x = s + (i[f].x - s) * u, p.y = o + (i[f].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;
-  }
-}
-export {
-  M as ArrowEditor
-};
+import{Keybinding as t}from"@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)}class e{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("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}}export{e as ArrowEditor};
 //# sourceMappingURL=bundle.esm.js.map