headless-vpl 0.1.0

package/dist/headless-vpl.js

@@ -0,0 +1,1107 @@
+var B = Object.defineProperty;
+var R = (n, t, e) => t in n ? B(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
+var r = (n, t, e) => R(n, typeof t != "symbol" ? t + "" : t, e);
+let D = 1;
+function A(n = "vpl") {
+  return `${n}_${D++}`;
+}
+class v {
+  constructor(t, e, i, s) {
+    r(this, "id");
+    /** スナップ接続による親 (型安全) */
+    r(this, "Parent", null);
+    /** スナップ接続による子 (型安全) */
+    r(this, "Children", null);
+    r(this, "workspace");
+    r(this, "position");
+    r(this, "name");
+    r(this, "type");
+    r(this, "selected", !1);
+    this.id = A(s), t && (this.workspace = t), this.position = e, this.name = i, this.type = s;
+  }
+  /**
+   * プロパティ変更を通知する。Renderer が 'update' イベントで再描画する。
+   */
+  update() {
+    this.workspace.eventBus.emit("update", this);
+  }
+  /**
+   * 位置を変更し 'move' イベントを発火する。
+   */
+  move(t, e) {
+    const i = t - this.position.x, s = e - this.position.y;
+    this.position.x = t, this.position.y = e, this.workspace.eventBus.emit("move", this), this.Children && this.Children.move(this.Children.position.x + i, this.Children.position.y + s);
+  }
+  toJSON() {
+    return {
+      id: this.id,
+      type: this.type,
+      name: this.name,
+      position: { x: this.position.x, y: this.position.y },
+      selected: this.selected
+    };
+  }
+}
+class C extends v {
+  constructor({ workspace: t, position: e, name: i, type: s }) {
+    super(t, e, i, s), this.workspace && this.workspace.addElement(this);
+  }
+  toJSON() {
+    return {
+      ...super.toJSON(),
+      connectorType: this.type
+    };
+  }
+}
+class O {
+  constructor() {
+    r(this, "handlers", /* @__PURE__ */ new Map());
+  }
+  on(t, e) {
+    return this.handlers.has(t) || this.handlers.set(t, /* @__PURE__ */ new Set()), this.handlers.get(t).add(e), () => {
+      var i;
+      (i = this.handlers.get(t)) == null || i.delete(e);
+    };
+  }
+  emit(t, e, i) {
+    var o;
+    const s = { type: t, target: e, data: i };
+    (o = this.handlers.get(t)) == null || o.forEach((h) => h(s));
+  }
+}
+class I {
+  constructor(t = 100) {
+    r(this, "_undoStack", []);
+    r(this, "_redoStack", []);
+    r(this, "_maxDepth");
+    this._maxDepth = t;
+  }
+  /**
+   * コマンドを実行し、Undo スタックに追加する。
+   * 新しいコマンド実行時に Redo スタックはクリアされる。
+   */
+  execute(t) {
+    t.execute(), this._undoStack.push(t), this._redoStack = [], this._undoStack.length > this._maxDepth && this._undoStack.shift();
+  }
+  undo() {
+    const t = this._undoStack.pop();
+    t && (t.undo(), this._redoStack.push(t));
+  }
+  redo() {
+    const t = this._redoStack.pop();
+    t && (t.execute(), this._undoStack.push(t));
+  }
+  get canUndo() {
+    return this._undoStack.length > 0;
+  }
+  get canRedo() {
+    return this._redoStack.length > 0;
+  }
+  clear() {
+    this._undoStack = [], this._redoStack = [];
+  }
+}
+class N {
+  constructor(t) {
+    r(this, "_selected", /* @__PURE__ */ new Set());
+    r(this, "eventBus");
+    this.eventBus = t;
+  }
+  select(t) {
+    this._selected.has(t) || (this._selected.add(t), t.selected = !0, this.eventBus.emit("select", t));
+  }
+  deselect(t) {
+    this._selected.has(t) && (this._selected.delete(t), t.selected = !1, this.eventBus.emit("deselect", t));
+  }
+  toggleSelect(t) {
+    this._selected.has(t) ? this.deselect(t) : this.select(t);
+  }
+  selectAll(t) {
+    for (const e of t)
+      this.select(e);
+  }
+  deselectAll() {
+    for (const t of [...this._selected])
+      this.deselect(t);
+  }
+  getSelection() {
+    return [...this._selected];
+  }
+  isSelected(t) {
+    return this._selected.has(t);
+  }
+  get size() {
+    return this._selected.size;
+  }
+}
+class J {
+  constructor() {
+    r(this, "eventBus", new O());
+    r(this, "viewport", { x: 0, y: 0, scale: 1 });
+    r(this, "selection", new N(this.eventBus));
+    r(this, "history", new I());
+    r(this, "_elements", []);
+    r(this, "_edges", []);
+  }
+  addElement(t) {
+    this._elements.push(t), this.eventBus.emit("add", t);
+  }
+  addEdge(t) {
+    this._edges.push(t), this.eventBus.emit("add", t);
+  }
+  removeElement(t) {
+    const e = this._elements.indexOf(t);
+    e !== -1 && (this._elements.splice(e, 1), this.eventBus.emit("remove", t));
+  }
+  removeEdge(t) {
+    const e = this._edges.indexOf(t);
+    e !== -1 && (this._edges.splice(e, 1), this.eventBus.emit("remove", t));
+  }
+  /**
+   * コンテナを削除する。関連 Edge の自動削除、Parent/Children 関係のクリア、
+   * 子要素の再帰削除を行う。
+   * instanceof を使わずダックタイピングで判定し、循環参照を回避する。
+   */
+  removeContainer(t) {
+    const e = /* @__PURE__ */ new Set();
+    if (e.add(t.id), "children" in t) {
+      const o = t.children;
+      for (const h of Object.values(o))
+        h && typeof h == "object" && "id" in h && e.add(h.id);
+    }
+    const i = this._edges.filter((o) => {
+      const h = o;
+      return h.startConnector && e.has(h.startConnector.id) || h.endConnector && e.has(h.endConnector.id);
+    });
+    for (const o of i)
+      this.removeEdge(o);
+    const s = t;
+    if (s.Parent && (s.Parent.Children = null, s.Parent = null), s.Children && (s.Children.Parent = null, s.Children = null), "children" in t) {
+      const o = t.children;
+      for (const h of Object.values(o))
+        h && typeof h == "object" && "id" in h && this.removeElement(h);
+    }
+    "selected" in t && this.selection.deselect(t), this.removeElement(t);
+  }
+  get elements() {
+    return this._elements;
+  }
+  get edges() {
+    return this._edges;
+  }
+  on(t, e) {
+    return this.eventBus.on(t, e);
+  }
+  pan(t, e) {
+    this.viewport.x = t, this.viewport.y = e, this.eventBus.emit("pan", this.viewport);
+  }
+  panBy(t, e) {
+    this.viewport.x += t, this.viewport.y += e, this.eventBus.emit("pan", this.viewport);
+  }
+  zoomAt(t, e, i) {
+    const s = (t - this.viewport.x) / this.viewport.scale, o = (e - this.viewport.y) / this.viewport.scale;
+    this.viewport.scale = i, this.viewport.x = t - s * i, this.viewport.y = e - o * i, this.eventBus.emit("zoom", this.viewport);
+  }
+  setScale(t) {
+    this.viewport.scale = t, this.eventBus.emit("zoom", this.viewport);
+  }
+  /**
+   * 全要素が収まるようにビューポートを自動調整する。
+   * scale は 1.0 を上限とし、過度なズームインを防止する。
+   * canvasWidth/canvasHeight は引数で渡す（DOM 依存回避）。
+   */
+  fitView(t, e, i = 50) {
+    const s = this._elements.filter(
+      (y) => "width" in y && "height" in y
+    );
+    if (s.length === 0) return;
+    let o = 1 / 0, h = 1 / 0, l = -1 / 0, c = -1 / 0;
+    for (const y of s) {
+      const g = y.position.x, w = y.position.y;
+      o = Math.min(o, g), h = Math.min(h, w), l = Math.max(l, g + y.width), c = Math.max(c, w + y.height);
+    }
+    const a = l - o, d = c - h;
+    if (a <= 0 || d <= 0) return;
+    const u = t - i * 2, f = e - i * 2, p = Math.min(1, u / a, f / d);
+    this.viewport.scale = p, this.viewport.x = (t - a * p) / 2 - o * p, this.viewport.y = (e - d * p) / 2 - h * p, this.eventBus.emit("zoom", this.viewport), this.eventBus.emit("pan", this.viewport);
+  }
+}
+class W {
+  constructor(t, e) {
+    r(this, "x");
+    r(this, "y");
+    this.x = t, this.y = e;
+  }
+  setPosition(t, e) {
+    this.x = t, this.y = e;
+  }
+  getPosition() {
+    return { x: this.x, y: this.y };
+  }
+}
+function $(n, t) {
+  return {
+    path: `M ${n.x} ${n.y} L ${t.x} ${t.y}`,
+    labelPosition: {
+      x: (n.x + t.x) / 2,
+      y: (n.y + t.y) / 2
+    }
+  };
+}
+function P(n, t) {
+  const e = Math.abs(t.x - n.x), i = Math.max(e * 0.5, 50), s = n.x + i, o = n.y, h = t.x - i, l = t.y, c = 0.5, a = 1 - c, d = a * a * a * n.x + 3 * a * a * c * s + 3 * a * c * c * h + c * c * c * t.x, u = a * a * a * n.y + 3 * a * a * c * o + 3 * a * c * c * l + c * c * c * t.y;
+  return {
+    path: `M ${n.x} ${n.y} C ${s} ${o}, ${h} ${l}, ${t.x} ${t.y}`,
+    labelPosition: { x: d, y: u }
+  };
+}
+function _(n, t) {
+  const e = (n.x + t.x) / 2;
+  return {
+    path: `M ${n.x} ${n.y} L ${e} ${n.y} L ${e} ${t.y} L ${t.x} ${t.y}`,
+    labelPosition: {
+      x: e,
+      y: (n.y + t.y) / 2
+    }
+  };
+}
+function S(n, t, e = 8) {
+  const i = (n.x + t.x) / 2, s = t.y - n.y, o = Math.min(e, Math.abs(s) / 2, Math.abs(i - n.x), Math.abs(t.x - i));
+  if (o <= 0 || s === 0)
+    return _(n, t);
+  const h = s > 0 ? 1 : -1;
+  return {
+    path: [
+      `M ${n.x} ${n.y}`,
+      `L ${i - o} ${n.y}`,
+      `Q ${i} ${n.y}, ${i} ${n.y + o * h}`,
+      `L ${i} ${t.y - o * h}`,
+      `Q ${i} ${t.y}, ${i + o} ${t.y}`,
+      `L ${t.x} ${t.y}`
+    ].join(" "),
+    labelPosition: {
+      x: i,
+      y: (n.y + t.y) / 2
+    }
+  };
+}
+class k {
+  constructor({ workspace: t, start: e, end: i, edgeType: s, label: o, markerStart: h, markerEnd: l }) {
+    r(this, "id");
+    r(this, "workspace");
+    r(this, "startConnector");
+    r(this, "endConnector");
+    r(this, "edgeType");
+    r(this, "label");
+    r(this, "markerStart");
+    r(this, "markerEnd");
+    this.id = A("edge"), this.workspace = t ?? e.workspace, this.startConnector = e, this.endConnector = i, this.edgeType = s ?? "straight", this.label = o, this.markerStart = h, this.markerEnd = l, this.workspace.addEdge(this);
+  }
+  get startPosition() {
+    return this.startConnector.position;
+  }
+  get endPosition() {
+    return this.endConnector.position;
+  }
+  /**
+   * edgeType に応じたパス文字列とラベル位置を計算する。
+   */
+  computePath() {
+    const t = { x: this.startPosition.x, y: this.startPosition.y }, e = { x: this.endPosition.x, y: this.endPosition.y };
+    switch (this.edgeType) {
+      case "bezier":
+        return P(t, e);
+      case "step":
+        return _(t, e);
+      case "smoothstep":
+        return S(t, e);
+      case "straight":
+      default:
+        return $(t, e);
+    }
+  }
+  /**
+   * ラベルの表示位置を返す。
+   */
+  getLabelPosition() {
+    return this.computePath().labelPosition;
+  }
+  toJSON() {
+    return {
+      id: this.id,
+      type: "edge",
+      edgeType: this.edgeType,
+      startConnectorId: this.startConnector.id,
+      endConnectorId: this.endConnector.id,
+      label: this.label,
+      markerStart: this.markerStart,
+      markerEnd: this.markerEnd
+    };
+  }
+}
+class b {
+  constructor({ workspace: t, position: e, width: i, height: s, direction: o, gap: h, alignment: l, containers: c }) {
+    r(this, "id");
+    r(this, "Children", []);
+    r(this, "position");
+    r(this, "parentContainer", null);
+    r(this, "width", 100);
+    r(this, "height", 100);
+    r(this, "direction");
+    r(this, "gap");
+    r(this, "alignment");
+    r(this, "workspace");
+    r(this, "name", "autoLayout");
+    r(this, "type", "autoLayout");
+    r(this, "frame", 0);
+    this.id = A("autolayout"), t && (this.workspace = t), this.Children = c, this.position = e, this.width = i ?? 100, this.height = s ?? 100, this.direction = o ?? "horizontal", this.gap = h ?? 10, this.alignment = l ?? "center", this.workspace && this.workspace.addElement(this);
+  }
+  get absolutePosition() {
+    var i, s;
+    const t = ((i = this.parentContainer) == null ? void 0 : i.position.x) ?? 0, e = ((s = this.parentContainer) == null ? void 0 : s.position.y) ?? 0;
+    return { x: this.position.x + t, y: this.position.y + e };
+  }
+  setParent(t) {
+    this.parentContainer = t;
+  }
+  addElement(t) {
+    this.Children.push(t), this.update();
+  }
+  update() {
+    if (!this.parentContainer) return;
+    this.Children.forEach((i, s) => {
+      s === 1 && (i.width = 100 + Math.sin(this.frame / 10) * 20), s === 2 && (i.width = 50 + Math.sin(this.frame / 10) * 30);
+    }), this.frame++;
+    const t = this.absolutePosition;
+    this.direction === "horizontal" ? this.layoutHorizontal(t) : this.layoutVertical(t);
+    const e = this.computeContentSize();
+    this.width = e.width, this.height = e.height, this.parentContainer.applyContentSize(e.width, e.height), this.workspace.eventBus.emit("update", this);
+  }
+  layoutHorizontal(t) {
+    let e = t.x;
+    this.Children.forEach((i) => {
+      const s = this.alignCrossAxis(t.y, this.height, i.height);
+      i.move(e, s), e += i.width + this.gap;
+    });
+  }
+  layoutVertical(t) {
+    let e = t.y;
+    this.Children.forEach((i) => {
+      const s = this.alignCrossAxis(t.x, this.width, i.width);
+      i.move(s, e), e += i.height + this.gap;
+    });
+  }
+  alignCrossAxis(t, e, i) {
+    switch (this.alignment) {
+      case "start":
+        return t;
+      case "center":
+        return t + (e - i) / 2;
+      case "end":
+        return t + e - i;
+    }
+  }
+  computeContentSize() {
+    if (this.Children.length === 0) return { width: 0, height: 0 };
+    const t = this.gap * (this.Children.length - 1);
+    if (this.direction === "horizontal") {
+      const e = this.Children.reduce((s, o) => s + o.width, 0) + t, i = Math.max(...this.Children.map((s) => s.height));
+      return { width: e, height: i };
+    } else {
+      const e = Math.max(...this.Children.map((s) => s.width)), i = this.Children.reduce((s, o) => s + o.height, 0) + t;
+      return { width: e, height: i };
+    }
+  }
+  move(t, e) {
+    this.position.x = t, this.position.y = e, this.workspace.eventBus.emit("move", this);
+  }
+  toJSON() {
+    return {
+      id: this.id,
+      type: this.type,
+      name: this.name,
+      position: { x: this.position.x, y: this.position.y },
+      width: this.width,
+      height: this.height,
+      children: this.Children.map((t) => t.toJSON())
+    };
+  }
+}
+class x extends v {
+  constructor({
+    workspace: e,
+    position: i = new W(0, 0),
+    name: s,
+    color: o,
+    width: h,
+    height: l,
+    widthMode: c,
+    heightMode: a,
+    padding: d,
+    minWidth: u,
+    maxWidth: f,
+    minHeight: p,
+    maxHeight: y,
+    resizable: g,
+    children: w
+  }) {
+    super(e, i, s, "container");
+    r(this, "color");
+    r(this, "width");
+    r(this, "height");
+    r(this, "widthMode");
+    r(this, "heightMode");
+    r(this, "padding");
+    r(this, "minWidth");
+    r(this, "maxWidth");
+    r(this, "minHeight");
+    r(this, "maxHeight");
+    r(this, "resizable");
+    r(this, "children");
+    this.color = o || "red", this.width = h || 100, this.height = l || 100, this.widthMode = c || "fixed", this.heightMode = a || "fixed", this.padding = {
+      top: (d == null ? void 0 : d.top) ?? 0,
+      right: (d == null ? void 0 : d.right) ?? 0,
+      bottom: (d == null ? void 0 : d.bottom) ?? 0,
+      left: (d == null ? void 0 : d.left) ?? 0
+    }, this.minWidth = u ?? 0, this.maxWidth = f ?? 1 / 0, this.minHeight = p ?? 0, this.maxHeight = y ?? 1 / 0, this.resizable = g ?? !1, this.children = w || {}, this.workspace && (this.propagateWorkspace(this.workspace), this.workspace.addElement(this), this.move(i.x, i.y), this.updateChildren());
+  }
+  propagateWorkspace(e) {
+    for (const i of Object.values(this.children))
+      this.bindChildWorkspace(i, e);
+  }
+  bindChildWorkspace(e, i) {
+    if (!e.workspace) {
+      if (e.workspace = i, i.addElement(e), e instanceof x)
+        for (const s of Object.values(e.children))
+          this.bindChildWorkspace(s, i);
+      else if (e instanceof b)
+        for (const s of e.Children)
+          this.bindChildWorkspace(s, i);
+    }
+  }
+  setColor(e) {
+    this.color = e, this.update();
+  }
+  applyContentSize(e, i) {
+    let s = !1;
+    if (this.widthMode === "hug") {
+      const o = Math.min(Math.max(e + this.padding.left + this.padding.right, this.minWidth), this.maxWidth);
+      this.width !== o && (this.width = o, s = !0);
+    }
+    if (this.heightMode === "hug") {
+      const o = Math.min(Math.max(i + this.padding.top + this.padding.bottom, this.minHeight), this.maxHeight);
+      this.height !== o && (this.height = o, s = !0);
+    }
+    s && this.update();
+  }
+  updateChildren() {
+    for (const e of Object.values(this.children))
+      this.updateChildPosition(e), this.updateChildLayout(e);
+  }
+  updateChildPosition(e) {
+    this.isMovableObject(e) && e.move(this.position.x + e.position.x, this.position.y - e.position.y);
+  }
+  updateChildLayout(e) {
+    this.isAutoLayout(e) && (e.setParent(this), e.update());
+  }
+  move(e, i) {
+    const s = this.position.x - e, o = this.position.y - i;
+    super.move(e, i), this.updateChildrenPosition({ x: s, y: o });
+  }
+  updateChildrenPosition(e) {
+    for (const i of Object.values(this.children))
+      this.isMovableObject(i) ? i.move(i.position.x - e.x, i.position.y - e.y) : this.isAutoLayout(i) && i.update();
+  }
+  isMovableObject(e) {
+    return e instanceof v;
+  }
+  isAutoLayout(e) {
+    return e instanceof b;
+  }
+  toJSON() {
+    return {
+      ...super.toJSON(),
+      color: this.color,
+      width: this.width,
+      height: this.height,
+      widthMode: this.widthMode,
+      heightMode: this.heightMode,
+      padding: this.padding,
+      children: Object.fromEntries(
+        Object.entries(this.children).map(([e, i]) => {
+          const s = i;
+          return [e, "toJSON" in s ? s.toJSON() : {}];
+        })
+      )
+    };
+  }
+}
+class Y {
+  constructor(t, e, i, s, o) {
+    r(this, "element");
+    r(this, "fromX");
+    r(this, "fromY");
+    r(this, "toX");
+    r(this, "toY");
+    this.element = t, this.fromX = e, this.fromY = i, this.toX = s, this.toY = o;
+  }
+  execute() {
+    this.element.move(this.toX, this.toY);
+  }
+  undo() {
+    this.element.move(this.fromX, this.fromY);
+  }
+}
+class V {
+  constructor(t, e) {
+    r(this, "workspace");
+    r(this, "element");
+    this.workspace = t, this.element = e;
+  }
+  execute() {
+    this.workspace.addElement(this.element);
+  }
+  undo() {
+    this.workspace.removeElement(this.element);
+  }
+}
+class K {
+  constructor(t, e) {
+    r(this, "workspace");
+    r(this, "element");
+    r(this, "relatedEdges", []);
+    r(this, "savedParent", null);
+    r(this, "savedChildren", null);
+    this.workspace = t, this.element = e, this.relatedEdges = this.findRelatedEdges();
+  }
+  findRelatedEdges() {
+    const t = /* @__PURE__ */ new Set();
+    if (t.add(this.element.id), "children" in this.element) {
+      const e = this.element.children;
+      for (const i of Object.values(e))
+        i && typeof i == "object" && "id" in i && t.add(i.id);
+    }
+    return this.workspace.edges.filter((e) => {
+      const i = e;
+      return i.startConnector && t.has(i.startConnector.id) || i.endConnector && t.has(i.endConnector.id);
+    });
+  }
+  execute() {
+    const t = this.element;
+    this.savedParent = t.Parent, this.savedChildren = t.Children;
+    for (const e of this.relatedEdges)
+      this.workspace.removeEdge(e);
+    t.Parent && (t.Parent.Children = null, t.Parent = null), t.Children && (t.Children.Parent = null, t.Children = null), this.workspace.removeElement(this.element);
+  }
+  undo() {
+    this.workspace.addElement(this.element);
+    for (const e of this.relatedEdges)
+      this.workspace.addEdge(e);
+    const t = this.element;
+    this.savedParent && (t.Parent = this.savedParent, this.savedParent.Children = t), this.savedChildren && (t.Children = this.savedChildren, this.savedChildren.Parent = t);
+  }
+}
+class U {
+  constructor(t, e, i) {
+    r(this, "workspace");
+    r(this, "parent");
+    r(this, "child");
+    this.workspace = t, this.parent = e, this.child = i;
+  }
+  execute() {
+    this.child.Parent = this.parent, this.parent.Children = this.child, this.workspace.eventBus.emit("connect", this.child, {
+      parent: this.parent.id,
+      child: this.child.id
+    });
+  }
+  undo() {
+    this.workspace.eventBus.emit("disconnect", this.child, {
+      parent: this.parent.id,
+      child: this.child.id
+    }), this.child.Parent = null, this.parent.Children = null;
+  }
+}
+const m = "http://www.w3.org/2000/svg";
+class q {
+  constructor(t, e) {
+    r(this, "svgRoot");
+    r(this, "viewportGroup");
+    r(this, "defsElement");
+    r(this, "workspace");
+    r(this, "elementMap", /* @__PURE__ */ new Map());
+    r(this, "markerDefs", /* @__PURE__ */ new Set());
+    this.svgRoot = t, this.workspace = e, this.defsElement = document.createElementNS(m, "defs"), this.svgRoot.appendChild(this.defsElement), this.viewportGroup = document.createElementNS(m, "g"), this.viewportGroup.setAttribute("data-role", "viewport"), this.svgRoot.appendChild(this.viewportGroup), e.on("add", (i) => this.onAdd(i)), e.on("move", (i) => this.onMove(i)), e.on("update", (i) => this.onUpdate(i)), e.on("remove", (i) => this.onRemove(i)), e.on("select", (i) => this.onSelect(i)), e.on("deselect", (i) => this.onDeselect(i)), e.on("pan", () => this.updateViewportTransform()), e.on("zoom", () => this.updateViewportTransform());
+  }
+  updateViewportTransform() {
+    const { x: t, y: e, scale: i } = this.workspace.viewport;
+    this.viewportGroup.setAttribute("transform", `translate(${t}, ${e}) scale(${i})`);
+  }
+  // --- Event handlers ---
+  onAdd(t) {
+    const e = t.target;
+    this.ensureElement(e);
+  }
+  onMove(t) {
+    const e = t.target;
+    this.ensureElement(e), this.updateElement(e);
+    for (const i of this.workspace.edges)
+      this.ensureElement(i), this.updateEdgePath(i);
+  }
+  onUpdate(t) {
+    const e = t.target;
+    this.ensureElement(e), this.updateElement(e);
+  }
+  onRemove(t) {
+    const e = t.target, i = this.getId(e);
+    if (!i) return;
+    const s = this.elementMap.get(i);
+    s && (s.remove(), this.elementMap.delete(i));
+  }
+  onSelect(t) {
+    const e = t.target, i = this.getId(e);
+    if (!i) return;
+    const s = this.elementMap.get(i);
+    s && (s.setAttribute("stroke-dasharray", "6 3"), s.setAttribute("stroke-width", "6"));
+  }
+  onDeselect(t) {
+    const e = t.target, i = this.getId(e);
+    if (!i) return;
+    const s = this.elementMap.get(i);
+    s && (s.removeAttribute("stroke-dasharray"), e instanceof x ? s.setAttribute("stroke-width", "4") : e instanceof C && s.removeAttribute("stroke-width"));
+  }
+  // --- Lazy SVG creation ---
+  ensureElement(t) {
+    const e = this.getId(t);
+    return e ? this.elementMap.has(e) ? this.elementMap.get(e) : this.createElement(t, e) : null;
+  }
+  createElement(t, e) {
+    let i = null;
+    return t instanceof x ? i = this.createContainerRect(t) : t instanceof C ? i = this.createConnectorCircle(t) : t instanceof k ? i = this.createEdgeGroup(t) : t instanceof b && (i = this.createAutoLayoutRect(t)), i && (this.elementMap.set(e, i), this.viewportGroup.appendChild(i)), i;
+  }
+  updateElement(t) {
+    t instanceof x ? this.updateContainerRect(t) : t instanceof C ? this.updateConnectorCircle(t) : t instanceof k ? this.updateEdgePath(t) : t instanceof b && this.updateAutoLayoutRect(t);
+  }
+  getId(t) {
+    return t && typeof t == "object" && "id" in t ? t.id : null;
+  }
+  // --- Container ---
+  createContainerRect(t) {
+    const e = document.createElementNS(m, "rect");
+    return e.setAttribute("x", `${t.position.x}`), e.setAttribute("y", `${t.position.y}`), e.setAttribute("width", `${t.width}`), e.setAttribute("height", `${t.height}`), e.setAttribute("stroke-width", "4"), e.setAttribute("rx", "10"), e.setAttribute("ry", "10"), e.setAttribute("stroke", t.color), e.setAttribute("fill", t.color), e.setAttribute("fill-opacity", "0.15"), e;
+  }
+  updateContainerRect(t) {
+    const e = this.elementMap.get(t.id);
+    e && (e.setAttribute("x", `${t.position.x}`), e.setAttribute("y", `${t.position.y}`), e.setAttribute("width", `${t.width}`), e.setAttribute("height", `${t.height}`), e.setAttribute("stroke", t.color), e.setAttribute("fill", t.color));
+  }
+  // --- Connector ---
+  createConnectorCircle(t) {
+    const e = document.createElementNS(m, "circle");
+    return e.setAttribute("cx", `${t.position.x}`), e.setAttribute("cy", `${t.position.y}`), e.setAttribute("r", "10"), e.setAttribute("stroke", "black"), e.setAttribute("fill", "red"), e;
+  }
+  updateConnectorCircle(t) {
+    const e = this.elementMap.get(t.id);
+    e && (e.setAttribute("cx", `${t.position.x}`), e.setAttribute("cy", `${t.position.y}`));
+  }
+  // --- Edge (<g> wrapping <path> + optional <text>) ---
+  getMarkerId(t) {
+    const e = t.color ?? "black", i = t.size ?? 10;
+    return `marker-${t.type}-${e.replace("#", "")}-${i}`;
+  }
+  ensureMarkerDef(t) {
+    const e = this.getMarkerId(t);
+    if (this.markerDefs.has(e)) return e;
+    const i = t.color ?? "black", s = t.size ?? 10, o = document.createElementNS(m, "marker");
+    o.setAttribute("id", e), o.setAttribute("viewBox", `0 0 ${s} ${s}`), o.setAttribute("refX", `${s}`), o.setAttribute("refY", `${s / 2}`), o.setAttribute("markerWidth", `${s}`), o.setAttribute("markerHeight", `${s}`), o.setAttribute("orient", "auto-start-reverse");
+    const h = document.createElementNS(m, "path");
+    return h.setAttribute("d", `M 0 0 L ${s} ${s / 2} L 0 ${s}`), h.setAttribute("fill", t.type === "arrowClosed" ? i : "none"), h.setAttribute("stroke", i), h.setAttribute("stroke-width", "1"), o.appendChild(h), this.defsElement.appendChild(o), this.markerDefs.add(e), e;
+  }
+  createEdgeGroup(t) {
+    const e = document.createElementNS(m, "g");
+    e.setAttribute("data-edge-id", t.id);
+    const i = t.computePath(), s = document.createElementNS(m, "path");
+    if (s.setAttribute("d", i.path), s.setAttribute("stroke", "black"), s.setAttribute("stroke-width", "2"), s.setAttribute("fill", "none"), s.setAttribute("data-role", "edge-path"), t.markerStart && t.markerStart.type !== "none") {
+      const o = this.ensureMarkerDef(t.markerStart);
+      s.setAttribute("marker-start", `url(#${o})`);
+    }
+    if (t.markerEnd && t.markerEnd.type !== "none") {
+      const o = this.ensureMarkerDef(t.markerEnd);
+      s.setAttribute("marker-end", `url(#${o})`);
+    }
+    if (e.appendChild(s), t.label) {
+      const o = document.createElementNS(m, "text");
+      o.setAttribute("x", `${i.labelPosition.x}`), o.setAttribute("y", `${i.labelPosition.y}`), o.setAttribute("text-anchor", "middle"), o.setAttribute("dominant-baseline", "middle"), o.setAttribute("font-size", "12"), o.setAttribute("fill", "#333"), o.setAttribute("data-role", "edge-label"), o.textContent = t.label, e.appendChild(o);
+    }
+    return e;
+  }
+  updateEdgePath(t) {
+    const e = this.elementMap.get(t.id);
+    if (!e) return;
+    const i = t.computePath(), s = e.querySelector('[data-role="edge-path"]');
+    s && s.setAttribute("d", i.path);
+    const o = e.querySelector('[data-role="edge-label"]');
+    o && t.label && (o.setAttribute("x", `${i.labelPosition.x}`), o.setAttribute("y", `${i.labelPosition.y}`), o.textContent = t.label);
+  }
+  // --- AutoLayout ---
+  createAutoLayoutRect(t) {
+    const e = document.createElementNS(m, "rect"), i = t.absolutePosition;
+    return e.setAttribute("x", `${i.x}`), e.setAttribute("y", `${i.y}`), e.setAttribute("width", `${t.width}`), e.setAttribute("height", `${t.height}`), e.setAttribute("stroke-width", "4"), e.setAttribute("stroke", "blue"), e.setAttribute("fill", "none"), e;
+  }
+  updateAutoLayoutRect(t) {
+    const e = this.elementMap.get(t.id);
+    if (!e) return;
+    const i = t.absolutePosition;
+    e.setAttribute("x", `${i.x}`), e.setAttribute("y", `${i.y}`), e.setAttribute("width", `${t.width}`), e.setAttribute("height", `${t.height}`);
+  }
+}
+function E(n, t) {
+  return Math.sqrt((n.x - t.x) ** 2 + (n.y - t.y) ** 2);
+}
+function Q(n, t) {
+  return Math.atan2(t.y - n.y, t.x - n.x);
+}
+function M(n, t) {
+  return {
+    x: (n.x - t.x) / t.scale,
+    y: (n.y - t.y) / t.scale
+  };
+}
+function Z(n, t) {
+  return {
+    x: n.x * t.scale + t.x,
+    y: n.y * t.scale + t.y
+  };
+}
+function L(n, t) {
+  const e = Math.min(n.x, t.x), i = Math.min(n.y, t.y);
+  return {
+    x: e,
+    y: i,
+    width: Math.abs(t.x - n.x),
+    height: Math.abs(t.y - n.y)
+  };
+}
+function H(n, t, e = "full") {
+  const i = t.x, s = t.y, o = t.x + t.width, h = t.y + t.height;
+  return n.filter((l) => {
+    const c = l.position.x, a = l.position.y, d = l.position.x + l.width, u = l.position.y + l.height;
+    return e === "full" ? c >= i && a >= s && d <= o && u <= h : c < o && d > i && a < h && u > s;
+  });
+}
+function F(n, t, e, i, s = "full") {
+  const o = M(t, i), h = M(e, i), l = L(o, h);
+  return H(n, l, s);
+}
+function tt(n, t) {
+  return {
+    x: Math.round(n.x / t) * t,
+    y: Math.round(n.y / t) * t
+  };
+}
+function et(n, t) {
+  return {
+    x: Math.round(n.x / t) * t,
+    y: Math.round(n.y / t) * t
+  };
+}
+function it(n) {
+  return {
+    elements: n.map((t) => t.toJSON())
+  };
+}
+function T(n, t = { x: 20, y: 20 }) {
+  return n.elements.map((e) => {
+    const i = e.position;
+    return {
+      x: ((i == null ? void 0 : i.x) ?? 0) + t.x,
+      y: ((i == null ? void 0 : i.y) ?? 0) + t.y
+    };
+  });
+}
+function st(n, t, e = { x: 20, y: 20 }) {
+  const i = T(n, e);
+  return n.elements.map((s, o) => t(s, i[o]));
+}
+class nt {
+  constructor(t) {
+    r(this, "bindings", []);
+    r(this, "element");
+    r(this, "listener");
+    this.element = t, this.listener = (e) => this.handleKeyDown(e), this.element.addEventListener("keydown", this.listener);
+  }
+  bind(t) {
+    this.bindings.push(t);
+  }
+  unbind(t, e) {
+    this.bindings = this.bindings.filter(
+      (i) => !(i.key === t && this.modifiersMatch(i.modifiers, e))
+    );
+  }
+  destroy() {
+    this.element.removeEventListener("keydown", this.listener), this.bindings = [];
+  }
+  handleKeyDown(t) {
+    for (const e of this.bindings)
+      if (this.matches(t, e)) {
+        t.preventDefault(), e.handler(t);
+        return;
+      }
+  }
+  matches(t, e) {
+    if (t.key.toLowerCase() !== e.key.toLowerCase()) return !1;
+    const i = e.modifiers ?? [], s = i.includes("ctrl"), o = t.ctrlKey || t.metaKey;
+    return !(s !== o || i.includes("shift") !== t.shiftKey || i.includes("alt") !== t.altKey);
+  }
+  modifiersMatch(t, e) {
+    const i = new Set(t ?? []), s = new Set(e ?? []);
+    if (i.size !== s.size) return !1;
+    for (const o of i)
+      if (!s.has(o)) return !1;
+    return !0;
+  }
+}
+function ot(n, t, e, i = 40, s = 10) {
+  if (!e) return { dx: 0, dy: 0, active: !1 };
+  let o = 0, h = 0;
+  const l = n.x - t.x;
+  l < i && l >= 0 && (o = s * (1 - l / i));
+  const c = t.x + t.width - n.x;
+  c < i && c >= 0 && (o = -s * (1 - c / i));
+  const a = n.y - t.y;
+  a < i && a >= 0 && (h = s * (1 - a / i));
+  const d = t.y + t.height - n.y;
+  return d < i && d >= 0 && (h = -s * (1 - d / i)), { dx: o, dy: h, active: o !== 0 || h !== 0 };
+}
+function rt(n, t, e = 8) {
+  const { x: i, y: s } = t.position, { width: o, height: h } = t, l = n.x >= i - e && n.x <= i + e, c = n.x >= i + o - e && n.x <= i + o + e, a = n.y >= s - e && n.y <= s + e, d = n.y >= s + h - e && n.y <= s + h + e, u = n.x >= i - e && n.x <= i + o + e, f = n.y >= s - e && n.y <= s + h + e;
+  return a && l ? "nw" : a && c ? "ne" : d && l ? "sw" : d && c ? "se" : a && u ? "n" : d && u ? "s" : l && f ? "w" : c && f ? "e" : null;
+}
+function ht(n, t, e) {
+  return {
+    handle: n,
+    startMousePos: { x: t.x, y: t.y },
+    startBounds: {
+      x: e.position.x,
+      y: e.position.y,
+      width: e.width,
+      height: e.height
+    }
+  };
+}
+function at(n, t, e = {}) {
+  const i = n.x - t.startMousePos.x, s = n.y - t.startMousePos.y;
+  let { x: o, y: h, width: l, height: c } = t.startBounds;
+  const a = t.handle;
+  a.includes("e") ? l += i : a.includes("w") && (l -= i, o += i), a.includes("s") ? c += s : (a === "n" || a === "ne" || a === "nw") && (c -= s, h += s);
+  const d = e.minWidth ?? 10, u = e.maxWidth ?? 1 / 0, f = e.minHeight ?? 10, p = e.maxHeight ?? 1 / 0;
+  return l < d && (a.includes("w") && (o -= d - l), l = d), l > u && (a.includes("w") && (o -= u - l), l = u), c < f && ((a === "n" || a === "ne" || a === "nw") && (h -= f - c), c = f), c > p && ((a === "n" || a === "ne" || a === "nw") && (h -= p - c), c = p), { x: o, y: h, width: l, height: c };
+}
+function ct(n, t, e = 16) {
+  return E(n, t.position) <= e;
+}
+function lt(n, t, e = 16) {
+  let i = null;
+  for (const s of t) {
+    const o = E(n, s.position);
+    o <= e && (!i || o < i.distance) && (i = { connector: s, distance: o });
+  }
+  return i;
+}
+class dt {
+  constructor(t) {
+    r(this, "workspace");
+    r(this, "hitRadius");
+    r(this, "edgeType");
+    r(this, "onPreview");
+    r(this, "onComplete");
+    r(this, "onCancel");
+    r(this, "_active", !1);
+    r(this, "_startConnector", null);
+    r(this, "_previewPath", null);
+    this.workspace = t.workspace, this.hitRadius = t.hitRadius ?? 16, this.edgeType = t.edgeType ?? "bezier", this.onPreview = t.onPreview, this.onComplete = t.onComplete, this.onCancel = t.onCancel;
+  }
+  get active() {
+    return this._active;
+  }
+  get previewPath() {
+    return this._previewPath;
+  }
+  get startConnector() {
+    return this._startConnector;
+  }
+  /**
+   * ドラッグ開始。出力コネクターからスタート。
+   */
+  start(t) {
+    this._active = !0, this._startConnector = t, this._previewPath = null;
+  }
+  /**
+   * マウス移動ごとにプレビューパスを更新。
+   */
+  update(t) {
+    var s;
+    if (!this._active || !this._startConnector) return;
+    const e = this._startConnector.position, i = t;
+    this._previewPath = this.computePath(e, i), (s = this.onPreview) == null || s.call(this, this._previewPath, e, i);
+  }
+  /**
+   * 入力コネクターにドロップして Edge を作成。
+   */
+  complete(t) {
+    var i;
+    if (!this._active || !this._startConnector) return;
+    if (t === this._startConnector) {
+      this.cancel();
+      return;
+    }
+    const e = new k({
+      workspace: this.workspace,
+      start: this._startConnector,
+      end: t,
+      edgeType: this.edgeType
+    });
+    (i = this.onComplete) == null || i.call(this, e), this.reset();
+  }
+  /**
+   * キャンセル。
+   */
+  cancel() {
+    var t;
+    this._active && ((t = this.onCancel) == null || t.call(this), this.reset());
+  }
+  reset() {
+    this._active = !1, this._startConnector = null, this._previewPath = null;
+  }
+  computePath(t, e) {
+    switch (this.edgeType) {
+      case "bezier":
+        return P(t, e).path;
+      case "step":
+        return _(t, e).path;
+      case "smoothstep":
+        return S(t, e).path;
+      case "straight":
+      default:
+        return $(t, e).path;
+    }
+  }
+}
+function j(n, t) {
+  return {
+    x: n.x - t.x,
+    y: n.y - t.y
+  };
+}
+function z(n, t, e, i, s = 50, o, h, l) {
+  if (i.buttonState.leftButton !== "up")
+    return !1;
+  if (l && !l())
+    return h == null || h(), !1;
+  const c = t, a = e;
+  if (E(c, a) < s) {
+    const u = j(c, a);
+    return n.move(n.position.x - u.x, n.position.y - u.y), o == null || o(), !0;
+  }
+  return h == null || h(), !1;
+}
+const G = (n, t, e) => e.includes(n), ut = (n, t, e) => e.includes(t), pt = (n, t, e) => e.includes(n) || e.includes(t);
+class ft {
+  constructor(t) {
+    r(this, "source");
+    r(this, "sourcePosition");
+    r(this, "target");
+    r(this, "targetPosition");
+    r(this, "workspace");
+    r(this, "snapDistance");
+    r(this, "strategy");
+    r(this, "validator");
+    r(this, "_locked", !1);
+    r(this, "_hasFailed", !1);
+    r(this, "_destroyed", !1);
+    r(this, "_lastDragContainers", []);
+    this.source = t.source, this.sourcePosition = t.sourcePosition, this.target = t.target, this.targetPosition = t.targetPosition, this.workspace = t.workspace, this.snapDistance = t.snapDistance ?? 50, this.strategy = t.strategy ?? G, this.validator = t.validator;
+  }
+  get locked() {
+    return this._locked;
+  }
+  get destroyed() {
+    return this._destroyed;
+  }
+  destroy() {
+    this._destroyed || (this._destroyed = !0, this._locked && (this.source.Parent = null, this.target.Children = null, this.workspace.eventBus.emit("disconnect", this.source, {
+      parent: this.target.id,
+      child: this.source.id
+    })), this._locked = !1);
+  }
+  tick(t, e) {
+    if (this._locked || this._destroyed || (e.length > 0 && (this._lastDragContainers = e), !this.strategy(this.source, this.target, this._lastDragContainers))) return;
+    z(
+      this.source,
+      this.sourcePosition,
+      this.targetPosition,
+      t,
+      this.snapDistance,
+      () => this.onSnap(),
+      () => this.onFail(),
+      this.validator
+    ) && (this._locked = !0);
+  }
+  unlock() {
+    this._locked = !1, this._lastDragContainers = [];
+  }
+  onSnap() {
+    this.source.Parent = this.target, this.target.Children = this.source, this.workspace.eventBus.emit("connect", this.source, {
+      parent: this.target.id,
+      child: this.source.id
+    }), this._hasFailed = !1;
+  }
+  onFail() {
+    this._hasFailed || (this.source.Parent && this.workspace.eventBus.emit("disconnect", this.source, {
+      parent: this.target.id,
+      child: this.source.id
+    }), this.source.Parent = null, this.target.Children = null, this._hasFailed = !0);
+  }
+}
+export {
+  V as AddCommand,
+  b as AutoLayout,
+  U as ConnectCommand,
+  C as Connector,
+  x as Container,
+  k as Edge,
+  dt as EdgeBuilder,
+  O as EventBus,
+  I as History,
+  nt as KeyboardManager,
+  Y as MoveCommand,
+  W as Position,
+  K as RemoveCommand,
+  N as SelectionManager,
+  ft as SnapConnection,
+  q as SvgRenderer,
+  J as Workspace,
+  at as applyResize,
+  ht as beginResize,
+  T as calculatePastePositions,
+  G as childOnly,
+  ot as computeAutoPan,
+  it as copyElements,
+  L as createMarqueeRect,
+  rt as detectResizeHandle,
+  pt as either,
+  lt as findNearestConnector,
+  Q as getAngle,
+  P as getBezierPath,
+  E as getDistance,
+  H as getElementsInMarquee,
+  F as getElementsInScreenMarquee,
+  S as getSmoothStepPath,
+  _ as getStepPath,
+  $ as getStraightPath,
+  ct as isConnectorHit,
+  ut as parentOnly,
+  st as pasteElements,
+  M as screenToWorld,
+  et as snapDeltaToGrid,
+  tt as snapToGrid,
+  Z as worldToScreen
+};