@michael_home/workflow-engine-vue 1.0.2 → 1.0.4

package/dist/index.js

@@ -0,0 +1,810 @@
+import { defineComponent as Pe, ref as Q, watch as Ce, computed as Y, reactive as B, onMounted as Ne, onUnmounted as ze, openBlock as k, createElementBlock as I, createElementVNode as M, toDisplayString as H, withModifiers as z, Fragment as E, renderList as q, normalizeClass as V, createCommentVNode as K, normalizeStyle as _e, withDirectives as Le, vShow as Te } from "vue";
+const f = {
+  Top: "TOP",
+  Right: "RIGHT",
+  Bottom: "BOTTOM",
+  Left: "LEFT"
+}, N = 20, S = (s, h) => {
+  const c = s.position.x + s.size.width / 2, u = s.position.y + s.size.height / 2;
+  switch (h.direction) {
+    case f.Top:
+      return { x: c, y: s.position.y };
+    case f.Right:
+      return { x: s.position.x + s.size.width, y: u };
+    case f.Bottom:
+      return { x: c, y: s.position.y + s.size.height };
+    case f.Left:
+      return { x: s.position.x, y: u };
+  }
+}, Ye = (s, h, c, u) => {
+  for (const e of h)
+    if (e.id !== s)
+      for (const t of e.ports) {
+        const n = S(e, t);
+        if (Math.hypot(n.x - c.x, n.y - c.y) <= u)
+          return { node: e, port: t, point: n };
+      }
+}, Re = (s, h, c) => {
+  switch (h) {
+    case f.Top:
+      return c.y < s.y - N ? f.Bottom : f.Top;
+    case f.Bottom:
+      return c.y > s.y + N ? f.Top : f.Bottom;
+    case f.Left:
+      return c.x < s.x - N ? f.Right : f.Left;
+    case f.Right:
+      return c.x > s.x + N ? f.Left : f.Right;
+  }
+}, R = (s, h, c) => {
+  const u = [];
+  for (const t of s) {
+    const n = u[u.length - 1];
+    (!n || n.x !== t.x || n.y !== t.y) && u.push(t);
+  }
+  const e = u.slice();
+  for (let t = 1; t <= e.length - 3; t += 1) {
+    const n = e[t - 1], i = e[t], o = e[t + 1], l = e[t + 2];
+    if (n.x === i.x && i.y === o.y && o.x === l.x) {
+      const p = Math.abs(o.x - i.x), b = i.y - n.y, v = l.y - o.y;
+      p <= N / 2 && Math.sign(b) !== 0 && Math.sign(v) !== 0 && Math.sign(b) !== Math.sign(v) && (e.splice(t, 2, { x: n.x, y: l.y }), t = Math.max(0, t - 2));
+      continue;
+    }
+    if (n.y === i.y && i.x === o.x && o.y === l.y) {
+      const p = Math.abs(o.y - i.y), b = i.x - n.x, v = l.x - o.x;
+      p <= N / 2 && Math.sign(b) !== 0 && Math.sign(v) !== 0 && Math.sign(b) !== Math.sign(v) && (e.splice(t, 2, { x: l.x, y: n.y }), t = Math.max(0, t - 2));
+    }
+  }
+  for (let t = e.length - 1; t >= 2; t -= 1) {
+    const n = e[t - 2], i = e[t - 1], o = e[t];
+    (n.x === i.x && i.x === o.x || n.y === i.y && i.y === o.y) && e.splice(t - 1, 1);
+  }
+  if (h !== void 0 && c !== void 0 && h === c && e.length >= 4)
+    if (h === f.Top || h === f.Bottom)
+      for (let n = 1; n <= e.length - 3; n += 1) {
+        const i = e[n - 1], o = e[n], l = e[n + 1], y = e[n + 2];
+        if (!(i.x === o.x && o.y === l.y && l.x === y.x))
+          continue;
+        Math.abs(l.x - o.x) <= N && (e.splice(n, 2), n = Math.max(0, n - 2));
+      }
+    else
+      for (let n = 1; n <= e.length - 3; n += 1) {
+        const i = e[n - 1], o = e[n], l = e[n + 1], y = e[n + 2];
+        if (!(i.y === o.y && o.x === l.x && l.y === y.y))
+          continue;
+        Math.abs(l.y - o.y) <= N && (e.splice(n, 2), n = Math.max(0, n - 2));
+      }
+  return e;
+}, Xe = (s, h, c) => {
+  switch (c) {
+    case f.Right:
+      return s > 0;
+    case f.Left:
+      return s < 0;
+    case f.Bottom:
+      return h > 0;
+    case f.Top:
+      return h < 0;
+  }
+}, Ee = (s, h, c) => {
+  switch (c) {
+    case f.Right:
+    case f.Left:
+      return Math.abs(h);
+    case f.Bottom:
+    case f.Top:
+      return Math.abs(s);
+  }
+}, Se = (s, h, c, u) => {
+  const e = s.x, t = s.y, n = c.x, i = c.y, o = N, l = [s], y = Math.round((e + n) / 2), x = Math.round((t + i) / 2), p = n >= e && i <= t, b = n < e && i <= t, v = n < e && i > t;
+  if (e === n && t === i && h === u) {
+    switch (h) {
+      case f.Left:
+        l.push({ x: e - o, y: t });
+        break;
+      case f.Right:
+        l.push({ x: e + o, y: t });
+        break;
+      case f.Top:
+        l.push({ x: e, y: t - o });
+        break;
+      case f.Bottom:
+        l.push({ x: e, y: t + o });
+        break;
+    }
+    return l.push(c), R(l, h, u);
+  }
+  const m = h === f.Top || h === f.Bottom, g = u === f.Top || u === f.Bottom, C = h === f.Left || h === f.Right, A = u === f.Left || u === f.Right;
+  if (h === u) {
+    if (m && Math.abs(n - e) <= o)
+      return l.push({ x: e, y: i }, c), R(l, h, u);
+    if (C && Math.abs(i - t) <= o)
+      return l.push({ x: n, y: t }, c), R(l, h, u);
+  }
+  const $ = Math.abs(n - e) <= o * 2 && Math.abs(i - t) <= o * 8;
+  if ($ && m && g)
+    return l.push({ x: e, y: x }, { x: n, y: x }, c), R(l, h, u);
+  if ($ && C && A)
+    return l.push({ x: y, y: t }, { x: y, y: i }, c), R(l, h, u);
+  switch (h) {
+    case f.Top:
+      switch (u) {
+        case f.Left:
+          p ? l.push({ x: e, y: i }) : b ? l.push({ x: e, y: x }, { x: n - o, y: x }, { x: n - o, y: i }) : v ? l.push({ x: e, y: t - o }, { x: n - o, y: t - o }, { x: n - o, y: i }) : l.push({ x: e, y: t - o }, { x: y, y: t - o }, { x: y, y: i });
+          break;
+        case f.Bottom:
+          if (n === e && i < t)
+            break;
+          i < t - o ? l.push({ x: e, y: x }, { x: n, y: x }) : l.push({ x: e, y: t - o }, { x: y, y: t - o }, { x: y, y: i + o }, { x: n, y: i + o });
+          break;
+        case f.Right:
+          p ? l.push({ x: e, y: x }, { x: n + o, y: x }, { x: n + o, y: i }) : b ? l.push({ x: e, y: i }) : v ? l.push({ x: e, y: t - o }, { x: y, y: t - o }, { x: y, y: i }) : l.push({ x: e, y: t - o }, { x: n + o, y: t - o }, { x: n + o, y: i });
+          break;
+        case f.Top: {
+          const _ = i < t ? i - o : t - o;
+          if (Math.abs(i - t) <= o * 3) {
+            const L = Math.round((t + i) / 2);
+            l.push({ x: e, y: L }, { x: n, y: L });
+          } else
+            l.push({ x: e, y: _ }, { x: n, y: _ });
+          break;
+        }
+      }
+      break;
+    case f.Bottom:
+      switch (u) {
+        case f.Left:
+          b ? l.push({ x: e, y: t + o }, { x: n - o, y: t + o }, { x: n - o, y: i }) : v ? l.push({ x: e, y: x }, { x: n - o, y: x }, { x: n - o, y: i }) : p ? l.push({ x: e, y: t + o }, { x: y, y: t + o }, { x: y, y: i }) : l.push({ x: e, y: i });
+          break;
+        case f.Bottom: {
+          const _ = i < t ? t + o : i + o;
+          if (Math.abs(i - t) <= o * 3) {
+            const L = Math.round((t + i) / 2);
+            l.push({ x: e, y: L }, { x: n, y: L });
+          } else
+            l.push({ x: e, y: _ }, { x: n, y: _ });
+          break;
+        }
+        case f.Right:
+          b ? l.push({ x: e, y: t + o }, { x: y, y: t + o }, { x: y, y: i }) : v ? l.push({ x: e, y: i }) : p ? l.push({ x: e, y: t + o }, { x: n + o, y: t + o }, { x: n + o, y: i }) : l.push({ x: e, y: x }, { x: n + o, y: x }, { x: n + o, y: i });
+          break;
+        case f.Top:
+          if (n === e && i > t)
+            break;
+          i - o < t ? l.push({ x: e, y: t + o }, { x: y, y: t + o }, { x: y, y: i - o }, { x: n, y: i - o }) : l.push({ x: e, y: x }, { x: n, y: x });
+          break;
+      }
+      break;
+    case f.Left:
+      switch (u) {
+        case f.Left:
+          n < e ? l.push({ x: n - o, y: t }, { x: n - o, y: i }) : l.push({ x: e - o, y: t }, { x: e - o, y: i });
+          break;
+        case f.Bottom:
+          b ? l.push({ x: n, y: t }) : v ? l.push({ x: y, y: t }, { x: y, y: i + o }, { x: n, y: i + o }) : p ? l.push({ x: e - o, y: t }, { x: e - o, y: x }, { x: n, y: x }) : l.push({ x: e - o, y: t }, { x: e - o, y: i + o }, { x: n, y: i + o });
+          break;
+        case f.Right:
+          if (n < e - o)
+            l.push({ x: y, y: t }, { x: y, y: i });
+          else {
+            if (n < e && i === t)
+              break;
+            l.push({ x: e - o, y: t }, { x: e - o, y: x }, { x: n + o, y: x }, { x: n + o, y: i });
+          }
+          break;
+        case f.Top:
+          p ? l.push({ x: e - o, y: t }, { x: e - o, y: i - o }, { x: n, y: i - o }) : b ? l.push({ x: y, y: t }, { x: y, y: i - o }, { x: n, y: i - o }) : v ? l.push({ x: n, y: t }) : l.push({ x: e - o, y: t }, { x: e - o, y: x }, { x: n, y: x });
+          break;
+      }
+      break;
+    case f.Right:
+      switch (u) {
+        case f.Left:
+          if (n - o < e)
+            l.push({ x: e + o, y: t }, { x: e + o, y: x }, { x: n - o, y: x }, { x: n - o, y: i });
+          else {
+            if (n > e && i === t)
+              break;
+            l.push({ x: y, y: t }, { x: y, y: i });
+          }
+          break;
+        case f.Bottom:
+          b ? l.push({ x: e + o, y: t }, { x: e + o, y: x }, { x: n, y: x }) : v ? l.push({ x: e + o, y: t }, { x: e + o, y: i + o }, { x: n, y: i + o }) : p ? l.push({ x: n, y: t }) : l.push({ x: y, y: t }, { x: y, y: i + o }, { x: n, y: i + o });
+          break;
+        case f.Right:
+          n < e ? l.push({ x: e + o, y: t }, { x: e + o, y: i }) : l.push({ x: n + o, y: t }, { x: n + o, y: i });
+          break;
+        case f.Top:
+          n > e && i < t ? l.push({ x: y, y: t }, { x: y, y: i - o }, { x: n, y: i - o }) : n <= e && i <= t ? l.push({ x: e + o, y: t }, { x: e + o, y: i - o }, { x: n, y: i - o }) : n < e && i > t ? l.push({ x: e + o, y: t }, { x: e + o, y: x }, { x: n, y: x }) : l.push({ x: n, y: t });
+          break;
+      }
+      break;
+  }
+  return l.push(c), R(l);
+}, ue = (s) => {
+  const h = S(s.sourceNode, s.sourcePort), c = Ye(s.sourceNode.id, s.nodes, s.currentPoint, s.hitRadius), u = (c == null ? void 0 : c.point) ?? s.currentPoint, e = (c == null ? void 0 : c.port.direction) ?? Re(h, s.sourcePort.direction, u);
+  return {
+    points: Se(h, s.sourcePort.direction, u, e),
+    snappedTarget: c
+  };
+}, $e = (s, h, c) => {
+  const u = S(s, h);
+  let e;
+  for (const t of c)
+    if (t.id !== s.id)
+      for (const n of t.ports) {
+        const i = S(t, n), o = i.x - u.x, l = i.y - u.y;
+        if (!Xe(o, l, h.direction))
+          continue;
+        const y = Math.hypot(o, l), x = Ee(o, l, h.direction);
+        (!e || x < e.axisDistance || x === e.axisDistance && y < e.distance) && (e = { node: t, port: n, distance: y, axisDistance: x });
+      }
+  if (e)
+    return { node: e.node, port: e.port };
+}, Be = (s) => {
+  if (s.mode === "click")
+    return $e(s.sourceNode, s.sourcePort, s.nodes);
+  if (!s.currentPoint || s.hitRadius === void 0)
+    return;
+  const c = ue({
+    sourceNode: s.sourceNode,
+    sourcePort: s.sourcePort,
+    nodes: s.nodes,
+    currentPoint: s.currentPoint,
+    hitRadius: s.hitRadius
+  }).snappedTarget;
+  if (c)
+    return { node: c.node, port: c.port };
+}, le = (s) => {
+  const h = s.nodes.find((u) => u.id === s.sourceNodeId);
+  if (!h)
+    return;
+  const c = h.ports.find((u) => u.id === s.sourcePortId);
+  if (c)
+    return { sourceNode: h, sourcePort: c };
+}, He = (s) => {
+  const h = Be(s);
+  return h ? {
+    sourceNodeId: s.sourceNodeId,
+    sourcePortId: s.sourcePortId,
+    targetNodeId: h.node.id,
+    targetPortId: h.port.id
+  } : {
+    sourceNodeId: s.sourceNodeId,
+    sourcePortId: s.sourcePortId
+  };
+}, Ve = (s) => Math.hypot(s.currentClientX - s.pressedClientX, s.currentClientY - s.pressedClientY) >= s.threshold, Ae = (s) => {
+  let h = s.clientX - s.offsetX, c = s.clientY - s.offsetY;
+  s.snapToGrid && (h = Math.round(h / s.gridSize) * s.gridSize, c = Math.round(c / s.gridSize) * s.gridSize);
+  const u = s.alignThreshold ?? 10, e = h + s.node.size.width / 2, t = c + s.node.size.height / 2;
+  if (s.nodes && s.nodes.length > 1 && u > 0) {
+    let n, i = Number.POSITIVE_INFINITY, o, l = Number.POSITIVE_INFINITY;
+    for (const y of s.nodes) {
+      if (y.id === s.node.id)
+        continue;
+      const x = y.position.x + y.size.width / 2, p = y.position.y + y.size.height / 2, b = Math.abs(x - e);
+      b <= u && b < i && (i = b, n = x - s.node.size.width / 2);
+      const v = Math.abs(p - t);
+      v <= u && v < l && (l = v, o = p - s.node.size.height / 2);
+    }
+    n !== void 0 && (h = n), o !== void 0 && (c = o);
+  }
+  return h = Math.min(s.canvasWidth - s.node.size.width, Math.max(0, h)), c = Math.min(s.canvasHeight - s.node.size.height, Math.max(0, c)), { x: h, y: c };
+}, Oe = 10, Fe = 6, We = 3, de = (s) => Math.round(s), De = (s) => ({
+  x: de(s.x),
+  y: de(s.y)
+}), Ge = (s, h, c, u) => {
+  const e = Math.hypot(h.x - s.x, h.y - s.y), t = Math.hypot(c.x - h.x, c.y - h.y);
+  return e === 0 || t === 0 ? 0 : Math.min(u, e / 2, t / 2);
+}, Ue = (s) => {
+  if (s.length === 0)
+    return "";
+  if (s.length < 3) {
+    const [u, ...e] = s, t = [`M ${u.x} ${u.y}`];
+    for (const n of e)
+      t.push(`L ${n.x} ${n.y}`);
+    return t.join(" ");
+  }
+  const h = [`M ${s[0].x} ${s[0].y}`];
+  for (let u = 1; u < s.length - 1; u += 1) {
+    const e = s[u - 1], t = s[u], n = s[u + 1];
+    if (!(e.x === t.x && t.y === n.y || e.y === t.y && t.x === n.x)) {
+      h.push(`L ${t.x} ${t.y}`);
+      continue;
+    }
+    const o = Ge(e, t, n, We);
+    if (o <= 0) {
+      h.push(`L ${t.x} ${t.y}`);
+      continue;
+    }
+    const l = t.x + Math.sign(e.x - t.x) * o, y = t.y + Math.sign(e.y - t.y) * o, x = t.x + Math.sign(n.x - t.x) * o, p = t.y + Math.sign(n.y - t.y) * o, v = (t.x - e.x) * (n.y - t.y) - (t.y - e.y) * (n.x - t.x) > 0 ? 1 : 0;
+    h.push(`L ${l} ${y}`), h.push(`A ${o} ${o} 0 0 ${v} ${x} ${p}`);
+  }
+  const c = s[s.length - 1];
+  return h.push(`L ${c.x} ${c.y}`), h.join(" ");
+}, je = (s, h, c) => {
+  const u = s.x - h.x, e = s.y - h.y, t = Math.hypot(u, e);
+  if (t === 0)
+    return s;
+  const n = u / t, i = e / t;
+  return {
+    x: s.x - n * c,
+    y: s.y - i * c
+  };
+}, Qe = (s, h) => {
+  if (s.length < 2)
+    return "";
+  const c = s[s.length - 1], u = s[s.length - 2], e = c.x - u.x, t = c.y - u.y, n = Math.hypot(e, t);
+  if (n === 0)
+    return "";
+  const i = e / n, o = t / n, l = c.x - i * h.arrowLength, y = c.y - o * h.arrowLength, x = -o, p = i, b = l + x * (h.arrowWidth / 2), v = y + p * (h.arrowWidth / 2), m = l - x * (h.arrowWidth / 2), g = y - p * (h.arrowWidth / 2);
+  return `${c.x},${c.y} ${b},${v} ${m},${g}`;
+}, he = (s, h = {}) => {
+  const c = {
+    arrowLength: h.arrowLength ?? Oe,
+    arrowWidth: h.arrowWidth ?? Fe,
+    pixelSnap: h.pixelSnap ?? !0
+  }, u = Qe(s, c);
+  let e = s.slice();
+  if (e.length >= 2) {
+    const t = e[e.length - 1], n = e[e.length - 2];
+    e[e.length - 1] = je(t, n, c.arrowLength);
+  }
+  return c.pixelSnap && (e = e.map((t) => De(t))), {
+    points: s,
+    path: Ue(e),
+    arrow: u
+  };
+}, qe = { class: "zoom-controls" }, Ke = { class: "zoom-text" }, Ze = ["viewBox"], Je = ["transform"], et = { class: "edge-layer" }, tt = ["d", "onMousedown"], ot = ["d", "stroke", "stroke-dasharray", "onMousedown"], st = ["points", "fill", "stroke", "onMousedown"], nt = ["x", "y", "fill"], rt = ["d"], it = ["points"], ct = { class: "node-layer" }, at = ["transform"], lt = ["x", "y", "width", "height", "fill", "onMousedown"], dt = ["x", "y", "width", "height", "rx", "ry", "fill", "onMousedown"], ht = ["points", "fill", "onMousedown"], ut = ["x", "y", "width", "height"], ft = {
+  key: 0,
+  width: "14",
+  height: "14",
+  class: "node-icon-dom",
+  "aria-hidden": "true"
+}, yt = ["href", "fill"], xt = {
+  key: 1,
+  class: "node-icon-fallback"
+}, gt = { class: "node-title-text" }, pt = ["cx", "cy", "onMousedown"], wt = /* @__PURE__ */ Pe({
+  __name: "CanvasView",
+  props: {
+    nodes: {},
+    edges: {},
+    selectedNodeId: {},
+    selectedEdgeId: {},
+    width: {},
+    height: {},
+    panX: { default: 0 },
+    panY: { default: 0 },
+    zoom: { default: 1 },
+    snapToGrid: { type: Boolean, default: !0 },
+    gridSize: { default: 10 },
+    alignThreshold: { default: 10 },
+    portHitRadius: { default: 14 },
+    portDragThreshold: { default: 4 }
+  },
+  emits: ["selectionChange", "nodePositionChange", "edgeCreate", "edgeDelete", "nodeDelete"],
+  setup(s, { emit: h }) {
+    const c = s, u = h, e = Q(c.zoom), t = (a) => Math.min(2, Math.max(0.4, Number(a.toFixed(2)))), n = () => {
+      e.value = t(e.value + 0.1);
+    }, i = () => {
+      e.value = t(e.value - 0.1);
+    };
+    Ce(
+      () => c.zoom,
+      (a) => {
+        e.value = t(a);
+      }
+    );
+    const o = Y(
+      () => `translate(${c.panX} ${c.panY}) scale(${e.value})`
+    ), l = Q(), y = Q(), x = B({ width: 700, height: 240 });
+    let p;
+    const b = Y(() => c.width ?? x.width), v = Y(() => c.height ?? x.height), m = B({
+      active: !1,
+      nodeId: "",
+      offsetX: 0,
+      offsetY: 0,
+      latestClientX: 0,
+      latestClientY: 0
+    }), g = B({
+      active: !1,
+      sourceNodeId: "",
+      sourcePortId: "",
+      pendingClick: !1,
+      pressedClientX: 0,
+      pressedClientY: 0,
+      currentX: 0,
+      currentY: 0
+    }), C = B({ rafId: 0, scheduled: !1 }), A = (a) => {
+      const d = a.data;
+      return (d == null ? void 0 : d.text) ?? "";
+    }, $ = (a) => {
+      const d = a.data;
+      return (d == null ? void 0 : d.lineColor) ?? "#1c7ed6";
+    }, _ = (a) => {
+      const d = a.data;
+      return (d == null ? void 0 : d.fontColor) ?? "#0f172a";
+    }, L = (a) => {
+      const d = a.data;
+      return (d == null ? void 0 : d.lineStyle) === "dashed" ? "6 4" : void 0;
+    }, fe = (a) => {
+      const d = a.data;
+      return (d == null ? void 0 : d.runtimeStatus) ?? "idle";
+    }, ye = (a) => fe(a) === "pending", xe = (a) => {
+      if (a.length < 2) return;
+      const d = [];
+      let r = 0;
+      for (let P = 1; P < a.length; P += 1) {
+        const T = a[P - 1], U = a[P], j = Math.hypot(U.x - T.x, U.y - T.y);
+        j !== 0 && (d.push({ start: T, end: U, length: j }), r += j);
+      }
+      if (d.length === 0 || r === 0) return;
+      const w = r / 2;
+      let X = 0;
+      for (const P of d) {
+        if (X + P.length >= w) {
+          const T = (w - X) / P.length;
+          return {
+            x: P.start.x + (P.end.x - P.start.x) * T,
+            y: P.start.y + (P.end.y - P.start.y) * T
+          };
+        }
+        X += P.length;
+      }
+      const ae = d[d.length - 1];
+      return { x: ae.end.x, y: ae.end.y };
+    }, ge = Y(
+      () => c.edges.map((a) => {
+        const d = a.points ?? [], r = he(d, { pixelSnap: !0 });
+        return {
+          edge: a,
+          edgeId: a.id,
+          path: r.path,
+          arrow: r.arrow,
+          label: A(a),
+          lineColor: $(a),
+          lineDasharray: L(a),
+          labelColor: _(a),
+          labelPoint: xe(d),
+          flowing: ye(a)
+        };
+      })
+    ), pe = (a) => {
+      const d = a.data;
+      return (d == null ? void 0 : d.title) ?? a.id;
+    }, O = (a) => {
+      const d = a.data;
+      return (d == null ? void 0 : d.icon) ?? "";
+    }, Z = (a) => {
+      const d = O(a);
+      return !d || !d.startsWith("icon-") ? "" : `#${d}`;
+    }, F = (a) => {
+      const d = a.data;
+      return (d == null ? void 0 : d.runtimeStatus) === "completed" ? d.completedFillColor ?? "#bbf7d0" : (d == null ? void 0 : d.runtimeStatus) === "active" ? "#dcfce7" : (d == null ? void 0 : d.nodeColor) ?? "#ffffff";
+    }, J = (a) => {
+      const d = a.data;
+      return (d == null ? void 0 : d.fontColor) ?? "#0f172a";
+    }, ee = (a) => {
+      const d = a.data;
+      return (d == null ? void 0 : d.nodeShape) ?? "rect";
+    }, we = (a) => {
+      const d = a.size.width / 2, r = a.size.height / 2;
+      return `0,${-r} ${d},0 0,${r} ${-d},0`;
+    }, ve = (a) => {
+      const d = new Map(a.ports.map((r) => [r.direction, r]));
+      return [
+        { direction: f.Top, dx: 0, dy: -a.size.height / 2 },
+        { direction: f.Right, dx: a.size.width / 2, dy: 0 },
+        { direction: f.Bottom, dx: 0, dy: a.size.height / 2 },
+        { direction: f.Left, dx: -a.size.width / 2, dy: 0 }
+      ].map((r) => ({
+        ...r,
+        port: d.get(r.direction)
+      })).filter((r) => !!r.port);
+    }, te = (a) => {
+      const d = y.value;
+      if (!d)
+        return { x: a.clientX, y: a.clientY };
+      const r = d.getBoundingClientRect();
+      return {
+        x: a.clientX - r.left,
+        y: a.clientY - r.top
+      };
+    }, W = (a) => ({
+      x: (a.x - c.panX) / e.value,
+      y: (a.y - c.panY) / e.value
+    }), me = () => {
+      if (C.scheduled = !1, !m.active) return;
+      const a = c.nodes.find((r) => r.id === m.nodeId);
+      if (!a) return;
+      const d = Ae({
+        node: a,
+        nodes: c.nodes,
+        alignThreshold: c.alignThreshold,
+        clientX: m.latestClientX,
+        clientY: m.latestClientY,
+        offsetX: m.offsetX,
+        offsetY: m.offsetY,
+        canvasWidth: b.value / e.value,
+        canvasHeight: v.value / e.value,
+        gridSize: c.gridSize,
+        snapToGrid: c.snapToGrid
+      });
+      u("nodePositionChange", { nodeId: m.nodeId, position: d });
+    }, be = () => {
+      g.active = !1, g.pendingClick = !1, g.sourceNodeId = "", g.sourcePortId = "";
+    }, oe = () => {
+      m.active = !1, m.nodeId = "", C.rafId && (window.cancelAnimationFrame(C.rafId), C.rafId = 0), C.scheduled = !1;
+    }, ke = () => {
+      if (!g.active && !g.pendingClick) return;
+      const a = le({
+        sourceNodeId: g.sourceNodeId,
+        sourcePortId: g.sourcePortId,
+        nodes: c.nodes
+      });
+      if (a) {
+        const d = He({
+          sourceNodeId: a.sourceNode.id,
+          sourcePortId: a.sourcePort.id,
+          sourceNode: a.sourceNode,
+          sourcePort: a.sourcePort,
+          nodes: c.nodes,
+          mode: g.pendingClick ? "click" : "drag",
+          currentPoint: { x: g.currentX, y: g.currentY },
+          hitRadius: c.portHitRadius
+        });
+        d.targetNodeId && d.targetPortId && u("edgeCreate", {
+          sourceNodeId: d.sourceNodeId,
+          sourcePortId: d.sourcePortId,
+          targetNodeId: d.targetNodeId,
+          targetPortId: d.targetPortId
+        });
+      }
+      be();
+    }, se = Y(() => {
+      if (!g.active) return [];
+      const a = le({
+        sourceNodeId: g.sourceNodeId,
+        sourcePortId: g.sourcePortId,
+        nodes: c.nodes
+      });
+      return a ? ue({
+        sourceNode: a.sourceNode,
+        sourcePort: a.sourcePort,
+        nodes: c.nodes,
+        currentPoint: { x: g.currentX, y: g.currentY },
+        hitRadius: c.portHitRadius
+      }).points : [];
+    }), ne = Y(() => he(se.value, { pixelSnap: !0 })), D = (a, d) => {
+      if (g.active) return;
+      d.preventDefault(), u("selectionChange", { nodeId: a.id }), m.active = !0, m.nodeId = a.id;
+      const r = W(te(d));
+      m.offsetX = r.x - a.position.x, m.offsetY = r.y - a.position.y, m.latestClientX = r.x, m.latestClientY = r.y;
+    }, Ie = (a, d, r) => {
+      r.preventDefault(), u("selectionChange", { nodeId: a.id });
+      const w = S(a, d);
+      g.active = !1, g.pendingClick = !0, g.pressedClientX = r.clientX, g.pressedClientY = r.clientY, g.sourceNodeId = a.id, g.sourcePortId = d.id, g.currentX = w.x, g.currentY = w.y;
+    }, G = (a, d) => {
+      d.preventDefault(), d.stopPropagation(), u("selectionChange", { edgeId: a.id });
+    }, Me = () => {
+      g.active || m.active || u("selectionChange", {});
+    }, re = (a) => {
+      const d = te(a);
+      if (g.pendingClick && !g.active && Ve({
+        pressedClientX: g.pressedClientX,
+        pressedClientY: g.pressedClientY,
+        currentClientX: a.clientX,
+        currentClientY: a.clientY,
+        threshold: c.portDragThreshold
+      }) && (g.active = !0, g.pendingClick = !1), g.active) {
+        const w = W(d);
+        g.currentX = w.x, g.currentY = w.y;
+        return;
+      }
+      if (!m.active) return;
+      const r = W(d);
+      m.latestClientX = r.x, m.latestClientY = r.y, !C.scheduled && (C.scheduled = !0, C.rafId = window.requestAnimationFrame(me));
+    }, ie = () => {
+      oe(), ke();
+    }, ce = (a) => {
+      if (a.key !== "Delete" && a.key !== "Backspace") return;
+      const d = a.target;
+      if (d) {
+        const r = d.tagName;
+        if (r === "INPUT" || r === "TEXTAREA" || d.isContentEditable)
+          return;
+      }
+      if (c.selectedEdgeId) {
+        a.preventDefault(), u("edgeDelete", { edgeId: c.selectedEdgeId });
+        return;
+      }
+      c.selectedNodeId && (a.preventDefault(), u("nodeDelete", { nodeId: c.selectedNodeId }));
+    };
+    return Ne(() => {
+      const a = () => {
+        const d = l.value;
+        if (!d) return;
+        const r = d.getBoundingClientRect();
+        r.width > 0 && (x.width = r.width), r.height > 0 && (x.height = r.height);
+      };
+      a(), p = new ResizeObserver(a), l.value && p.observe(l.value), window.addEventListener("mousemove", re), window.addEventListener("mouseup", ie), window.addEventListener("keydown", ce);
+    }), ze(() => {
+      oe(), p == null || p.disconnect(), window.removeEventListener("mousemove", re), window.removeEventListener("mouseup", ie), window.removeEventListener("keydown", ce);
+    }), (a, d) => (k(), I("section", {
+      ref_key: "containerRef",
+      ref: l,
+      class: "canvas-view",
+      style: { width: "100%", height: "100%" }
+    }, [
+      M("div", qe, [
+        M("button", {
+          type: "button",
+          class: "zoom-btn",
+          onClick: i
+        }, "-"),
+        M("span", Ke, H(Math.round(e.value * 100)) + "%", 1),
+        M("button", {
+          type: "button",
+          class: "zoom-btn",
+          onClick: n
+        }, "+")
+      ]),
+      (k(), I("svg", {
+        ref_key: "svgRef",
+        ref: y,
+        class: "canvas-svg",
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: `0 0 ${b.value} ${v.value}`,
+        onMousedown: z(Me, ["self"])
+      }, [
+        M("g", { transform: o.value }, [
+          M("g", et, [
+            (k(!0), I(E, null, q(ge.value, (r) => (k(), I(E, {
+              key: r.edgeId
+            }, [
+              M("path", {
+                d: r.path,
+                fill: "none",
+                stroke: "transparent",
+                "stroke-width": "15",
+                "vector-effect": "non-scaling-stroke",
+                class: "edge-hit",
+                onMousedown: z((w) => G(r.edge, w), ["stop"])
+              }, null, 40, tt),
+              M("path", {
+                d: r.path,
+                stroke: s.selectedEdgeId === r.edgeId ? "#2563eb" : r.lineColor,
+                "stroke-width": "1",
+                fill: "none",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                "vector-effect": "non-scaling-stroke",
+                "shape-rendering": "geometricPrecision",
+                class: V(["edge-path", { "edge-flowing": r.flowing }]),
+                "stroke-dasharray": r.lineDasharray ?? (r.flowing ? "7 6" : void 0),
+                onMousedown: z((w) => G(r.edge, w), ["stop"])
+              }, null, 42, ot),
+              M("polygon", {
+                points: r.arrow,
+                fill: s.selectedEdgeId === r.edgeId ? "#2563eb" : r.lineColor,
+                stroke: s.selectedEdgeId === r.edgeId ? "#2563eb" : r.lineColor,
+                "vector-effect": "non-scaling-stroke",
+                "shape-rendering": "geometricPrecision",
+                class: "edge-arrow",
+                onMousedown: z((w) => G(r.edge, w), ["stop"])
+              }, null, 40, st),
+              r.label && r.labelPoint ? (k(), I("text", {
+                key: 0,
+                x: r.labelPoint.x,
+                y: r.labelPoint.y,
+                class: "edge-label",
+                fill: r.labelColor,
+                "text-anchor": "middle",
+                "dominant-baseline": "central"
+              }, H(r.label), 9, nt)) : K("", !0)
+            ], 64))), 128)),
+            se.value.length > 1 ? (k(), I(E, { key: 0 }, [
+              M("path", {
+                d: ne.value.path,
+                stroke: "#94a3b8",
+                "stroke-width": "2",
+                fill: "none",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                "vector-effect": "non-scaling-stroke",
+                "shape-rendering": "geometricPrecision"
+              }, null, 8, rt),
+              M("polygon", {
+                points: ne.value.arrow,
+                fill: "#94a3b8",
+                stroke: "#94a3b8",
+                "vector-effect": "non-scaling-stroke",
+                "shape-rendering": "geometricPrecision"
+              }, null, 8, it)
+            ], 64)) : K("", !0)
+          ]),
+          M("g", ct, [
+            (k(!0), I(E, null, q(s.nodes, (r) => (k(), I("g", {
+              key: r.id,
+              class: "node-group",
+              transform: `translate(${r.position.x + r.size.width / 2} ${r.position.y + r.size.height / 2})`
+            }, [
+              ee(r) === "rect" ? (k(), I("rect", {
+                key: 0,
+                x: -r.size.width / 2,
+                y: -r.size.height / 2,
+                width: r.size.width,
+                height: r.size.height,
+                rx: "4",
+                ry: "4",
+                fill: F(r),
+                stroke: "#0f172a",
+                class: V({ selected: s.selectedNodeId === r.id }),
+                onMousedown: z((w) => D(r, w), ["stop"])
+              }, null, 42, lt)) : ee(r) === "ellipse" ? (k(), I("rect", {
+                key: 1,
+                x: -r.size.width / 2,
+                y: -r.size.height / 2,
+                width: r.size.width,
+                height: r.size.height,
+                rx: r.size.height / 2,
+                ry: r.size.height / 2,
+                fill: F(r),
+                stroke: "#0f172a",
+                class: V({ selected: s.selectedNodeId === r.id }),
+                onMousedown: z((w) => D(r, w), ["stop"])
+              }, null, 42, dt)) : (k(), I("polygon", {
+                key: 2,
+                points: we(r),
+                fill: F(r),
+                stroke: "#0f172a",
+                class: V({ selected: s.selectedNodeId === r.id }),
+                onMousedown: z((w) => D(r, w), ["stop"])
+              }, null, 42, ht)),
+              (k(), I("foreignObject", {
+                x: -r.size.width / 2,
+                y: -r.size.height / 2,
+                width: r.size.width,
+                height: r.size.height,
+                class: "node-title-foreign"
+              }, [
+                M("div", {
+                  xmlns: "http://www.w3.org/1999/xhtml",
+                  class: "node-title-dom",
+                  style: _e({ color: J(r) })
+                }, [
+                  Z(r) ? (k(), I("svg", ft, [
+                    M("use", {
+                      href: Z(r),
+                      fill: J(r)
+                    }, null, 8, yt)
+                  ])) : O(r) ? (k(), I("span", xt, H(O(r)), 1)) : K("", !0),
+                  M("span", gt, H(pe(r)), 1)
+                ], 4)
+              ], 8, ut)),
+              (k(!0), I(E, null, q(ve(r), (w) => Le((k(), I("circle", {
+                key: w.port.id,
+                cx: w.dx,
+                cy: w.dy,
+                r: "5",
+                fill: "#ffffff",
+                stroke: "#1d4ed8",
+                class: "port-dot",
+                onMousedown: z((X) => Ie(r, w.port, X), ["stop"])
+              }, null, 40, pt)), [
+                [Te, s.selectedNodeId === r.id]
+              ])), 128))
+            ], 8, at))), 128))
+          ])
+        ], 8, Je)
+      ], 40, Ze))
+    ], 512));
+  }
+}), vt = (s, h) => {
+  const c = s.__vccOpts || s;
+  for (const [u, e] of h)
+    c[u] = e;
+  return c;
+}, bt = /* @__PURE__ */ vt(wt, [["__scopeId", "data-v-209f0bd3"]]);
+export {
+  bt as CanvasView
+};