@michael_home/workflow-engine-vue 1.0.3 → 1.0.5

package/dist/index.js

@@ -1,810 +0,0 @@
-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-ed82a114"]]);
-export {
-  bt as CanvasView
-};