npm - @michael_home/workflow-engine-vue - Versions diffs - 1.0.1 → 1.0.2 - Mend

@michael_home/workflow-engine-vue 1.0.1 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/index.cjs ADDED Viewed

@@ -0,0 +1 @@

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { DefineComponent } from 'vue'
+export declare const CanvasView: DefineComponent<{}, {}, any>

package/dist/index.mjs ADDED Viewed

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

package/dist/style.css ADDED Viewed

@@ -0,0 +1 @@

+ .canvas-view[data-v-72a1e4d3]{position:relative;overflow:hidden;border:1px solid #dee2e6;background:#f8f9fa}.zoom-controls[data-v-72a1e4d3]{position:absolute;top:8px;right:8px;z-index:2;display:inline-flex;align-items:center;gap:4px;background:#fffffff2;border:1px solid #cbd5e1;border-radius:6px;padding:4px 6px}.zoom-btn[data-v-72a1e4d3]{width:24px;height:24px;border:1px solid #cbd5e1;border-radius:4px;background:#f8fafc;cursor:pointer;line-height:1}.zoom-text[data-v-72a1e4d3]{min-width:44px;text-align:center;font-size:12px;color:#334155}.canvas-svg[data-v-72a1e4d3]{width:100%;height:100%}rect.selected[data-v-72a1e4d3],polygon.selected[data-v-72a1e4d3]{stroke:#2563eb;stroke-width:2}.port-dot[data-v-72a1e4d3]{cursor:crosshair}.edge-path[data-v-72a1e4d3],.edge-arrow[data-v-72a1e4d3]{cursor:pointer}.edge-flowing[data-v-72a1e4d3]{animation:edge-flow-72a1e4d3 .8s linear infinite}@keyframes edge-flow-72a1e4d3{0%{stroke-dashoffset:0}to{stroke-dashoffset:-13}}.edge-label[data-v-72a1e4d3]{font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none}.node-title-foreign[data-v-72a1e4d3]{pointer-events:none}.node-title-dom[data-v-72a1e4d3]{width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;-webkit-user-select:none;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.node-icon-dom[data-v-72a1e4d3],.node-icon-fallback[data-v-72a1e4d3]{flex:0 0 auto}.node-title-text[data-v-72a1e4d3]{overflow:hidden;text-overflow:ellipsis}

package/package.json CHANGED Viewed

@@ -1,18 +1,20 @@
 {
   "name": "@michael_home/workflow-engine-vue",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Vue 3 components for workflow engine canvas",
   "type": "module",
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./src/index.ts",
-      "types": "./src/index.ts"
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
     }
   },
   "files": [
-    "src"
+    "dist"
   ],
   "keywords": [
     "workflow",
@@ -36,8 +38,8 @@
     "vue": "^3.5.0"
   },
   "scripts": {
-    "build": "echo 'Vue package uses source files directly'",
-    "check": "echo 'Vue package skips type checking'",
-    "clean": "echo 'Nothing to clean'"
+    "build": "vite build",
+    "check": "echo 'Vue package type checking via vite'",
+    "clean": "rm -rf dist"
   }
 }

package/src/CanvasView.vue DELETED Viewed

@@ -1,759 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
-import {
-  PortDirection,
-  buildPreviewRoute,
-  getPortPoint,
-  resolveLinkCompletion,
-  resolveLinkSource,
-  resolveNodeDragPosition,
-  shouldActivateLinkDrag
-} from '@michael_home/workflow-engine-core'
-import type { GraphEdge, GraphNode, Point, Port } from '@michael_home/workflow-engine-core'
-import { renderSvgEdge } from '@michael_home/workflow-engine-svg-renderer'
-const props = withDefaults(
-  defineProps<{
-    nodes: GraphNode<unknown>[]
-    edges: GraphEdge<unknown>[]
-    selectedNodeId?: string
-    selectedEdgeId?: string
-    width?: number
-    height?: number
-    panX?: number
-    panY?: number
-    zoom?: number
-    snapToGrid?: boolean
-    gridSize?: number
-    alignThreshold?: number
-    portHitRadius?: number
-    portDragThreshold?: number
-  }>(),
-  {
-    panX: 0,
-    panY: 0,
-    zoom: 1,
-    snapToGrid: true,
-    gridSize: 10,
-    alignThreshold: 10,
-    portHitRadius: 14,
-    portDragThreshold: 4
-  }
-)
-const emit = defineEmits<{
-  selectionChange: [selection: { nodeId?: string; edgeId?: string }]
-  nodePositionChange: [payload: { nodeId: string; position: Point }]
-  edgeCreate: [payload: { sourceNodeId: string; sourcePortId: string; targetNodeId: string; targetPortId: string }]
-  edgeDelete: [payload: { edgeId: string }]
-  nodeDelete: [payload: { nodeId: string }]
-}>()
-const zoomLevel = ref(props.zoom)
-const clampZoom = (value: number) => Math.min(2, Math.max(0.4, Number(value.toFixed(2))))
-const zoomIn = () => {
-  zoomLevel.value = clampZoom(zoomLevel.value + 0.1)
-}
-const zoomOut = () => {
-  zoomLevel.value = clampZoom(zoomLevel.value - 0.1)
-}
-watch(
-  () => props.zoom,
-  (value) => {
-    zoomLevel.value = clampZoom(value)
-  }
-)
-const viewportTransform = computed(
-  () => `translate(${props.panX} ${props.panY}) scale(${zoomLevel.value})`
-)
-const containerRef = ref<HTMLElement>()
-const svgRef = ref<SVGSVGElement>()
-const sizeState = reactive({ width: 700, height: 240 })
-let resizeObserver: ResizeObserver | undefined
-const canvasWidth = computed(() => props.width ?? sizeState.width)
-const canvasHeight = computed(() => props.height ?? sizeState.height)
-const dragState = reactive({
-  active: false,
-  nodeId: '',
-  offsetX: 0,
-  offsetY: 0,
-  latestClientX: 0,
-  latestClientY: 0
-})
-const linkState = reactive({
-  active: false,
-  sourceNodeId: '',
-  sourcePortId: '',
-  pendingClick: false,
-  pressedClientX: 0,
-  pressedClientY: 0,
-  currentX: 0,
-  currentY: 0
-})
-const frameState = reactive({ rafId: 0, scheduled: false })
-const resolveEdgeLabel = (edge: GraphEdge<unknown>): string => {
-  const data = edge.data as { text?: string } | undefined
-  return data?.text ?? ''
-}
-const resolveEdgeLineColor = (edge: GraphEdge<unknown>): string => {
-  const data = edge.data as { lineColor?: string } | undefined
-  return data?.lineColor ?? '#1c7ed6'
-}
-const resolveEdgeFontColor = (edge: GraphEdge<unknown>): string => {
-  const data = edge.data as { fontColor?: string } | undefined
-  return data?.fontColor ?? '#0f172a'
-}
-const resolveEdgeLineDasharray = (edge: GraphEdge<unknown>): string | undefined => {
-  const data = edge.data as { lineStyle?: 'solid' | 'dashed' } | undefined
-  return data?.lineStyle === 'dashed' ? '6 4' : undefined
-}
-const edgeRuntimeStatusOf = (edge: GraphEdge<unknown>): 'idle' | 'pending' | 'completed' | 'disabled' => {
-  const data = edge.data as { runtimeStatus?: 'idle' | 'pending' | 'completed' | 'disabled' } | undefined
-  return data?.runtimeStatus ?? 'idle'
-}
-const isFlowingEdge = (edge: GraphEdge<unknown>): boolean => edgeRuntimeStatusOf(edge) === 'pending'
-const getEdgeLabelPoint = (points: Point[]): Point | undefined => {
-  if (points.length < 2) return undefined
-  const segments: Array<{ start: Point; end: Point; length: number }> = []
-  let totalLength = 0
-  for (let i = 1; i < points.length; i += 1) {
-    const start = points[i - 1]
-    const end = points[i]
-    const length = Math.hypot(end.x - start.x, end.y - start.y)
-    if (length === 0) continue
-    segments.push({ start, end, length })
-    totalLength += length
-  }
-  if (segments.length === 0 || totalLength === 0) return undefined
-  const half = totalLength / 2
-  let acc = 0
-  for (const segment of segments) {
-    if (acc + segment.length >= half) {
-      const ratio = (half - acc) / segment.length
-      return {
-        x: segment.start.x + (segment.end.x - segment.start.x) * ratio,
-        y: segment.start.y + (segment.end.y - segment.start.y) * ratio
-      }
-    }
-    acc += segment.length
-  }
-  const last = segments[segments.length - 1]
-  return { x: last.end.x, y: last.end.y }
-}
-const renderedEdges = computed(() =>
-  props.edges.map((edge) => {
-    const points: Point[] = edge.points ?? []
-    const render = renderSvgEdge(points, { pixelSnap: true })
-    return {
-      edge,
-      edgeId: edge.id,
-      path: render.path,
-      arrow: render.arrow,
-      label: resolveEdgeLabel(edge),
-      lineColor: resolveEdgeLineColor(edge),
-      lineDasharray: resolveEdgeLineDasharray(edge),
-      labelColor: resolveEdgeFontColor(edge),
-      labelPoint: getEdgeLabelPoint(points),
-      flowing: isFlowingEdge(edge)
-    }
-  })
-)
-const titleOf = (node: GraphNode<unknown>): string => {
-  const data = node.data as { title?: string } | undefined
-  return data?.title ?? node.id
-}
-const iconOf = (node: GraphNode<unknown>): string => {
-  const data = node.data as { icon?: string } | undefined
-  return data?.icon ?? ''
-}
-const iconSymbolHrefOf = (node: GraphNode<unknown>): string => {
-  const icon = iconOf(node)
-  if (!icon || !icon.startsWith('icon-')) return ''
-  return `#${icon}`
-}
-const resolveNodeFillColor = (node: GraphNode<unknown>): string => {
-  const data = node.data as
-    | { nodeColor?: string; runtimeStatus?: 'idle' | 'active' | 'completed'; completedFillColor?: string }
-    | undefined
-  if (data?.runtimeStatus === 'completed') {
-    return data.completedFillColor ?? '#bbf7d0'
-  }
-  if (data?.runtimeStatus === 'active') {
-    return '#dcfce7'
-  }
-  return data?.nodeColor ?? '#ffffff'
-}
-const resolveNodeFontColor = (node: GraphNode<unknown>): string => {
-  const data = node.data as { fontColor?: string } | undefined
-  return data?.fontColor ?? '#0f172a'
-}
-const resolveNodeShape = (node: GraphNode<unknown>): 'rect' | 'ellipse' | 'diamond' => {
-  const data = node.data as { nodeShape?: 'rect' | 'ellipse' | 'diamond' } | undefined
-  return data?.nodeShape ?? 'rect'
-}
-const diamondPointsOf = (node: GraphNode<unknown>): string => {
-  const halfW = node.size.width / 2
-  const halfH = node.size.height / 2
-  return `0,${-halfH} ${halfW},0 0,${halfH} ${-halfW},0`
-}
-const portsOf = (node: GraphNode<unknown>) => {
-  const byDirection = new Map(node.ports.map((port) => [port.direction, port]))
-  return [
-    { direction: PortDirection.Top, dx: 0, dy: -node.size.height / 2 },
-    { direction: PortDirection.Right, dx: node.size.width / 2, dy: 0 },
-    { direction: PortDirection.Bottom, dx: 0, dy: node.size.height / 2 },
-    { direction: PortDirection.Left, dx: -node.size.width / 2, dy: 0 }
-  ]
-    .map((entry) => ({
-      ...entry,
-      port: byDirection.get(entry.direction)
-    }))
-    .filter((entry): entry is typeof entry & { port: Port } => Boolean(entry.port))
-}
-const toCanvasPoint = (event: MouseEvent): Point => {
-  const svg = svgRef.value
-  if (!svg) {
-    return { x: event.clientX, y: event.clientY }
-  }
-  const rect = svg.getBoundingClientRect()
-  return {
-    x: event.clientX - rect.left,
-    y: event.clientY - rect.top
-  }
-}
-const toViewportPoint = (point: Point): Point => ({
-  x: (point.x - props.panX) / zoomLevel.value,
-  y: (point.y - props.panY) / zoomLevel.value
-})
-const applyDragFrame = () => {
-  frameState.scheduled = false
-  if (!dragState.active) return
-  const currentNode = props.nodes.find((node) => node.id === dragState.nodeId)
-  if (!currentNode) return
-  const position = resolveNodeDragPosition({
-    node: currentNode,
-    nodes: props.nodes,
-    alignThreshold: props.alignThreshold,
-    clientX: dragState.latestClientX,
-    clientY: dragState.latestClientY,
-    offsetX: dragState.offsetX,
-    offsetY: dragState.offsetY,
-    canvasWidth: canvasWidth.value / zoomLevel.value,
-    canvasHeight: canvasHeight.value / zoomLevel.value,
-    gridSize: props.gridSize,
-    snapToGrid: props.snapToGrid
-  })
-  emit('nodePositionChange', { nodeId: dragState.nodeId, position })
-}
-const resetLinkState = () => {
-  linkState.active = false
-  linkState.pendingClick = false
-  linkState.sourceNodeId = ''
-  linkState.sourcePortId = ''
-}
-const stopDrag = () => {
-  dragState.active = false
-  dragState.nodeId = ''
-  if (frameState.rafId) {
-    window.cancelAnimationFrame(frameState.rafId)
-    frameState.rafId = 0
-  }
-  frameState.scheduled = false
-}
-const stopLink = () => {
-  if (!linkState.active && !linkState.pendingClick) return
-  const source = resolveLinkSource({
-    sourceNodeId: linkState.sourceNodeId,
-    sourcePortId: linkState.sourcePortId,
-    nodes: props.nodes
-  })
-  if (source) {
-    const completion = resolveLinkCompletion({
-      sourceNodeId: source.sourceNode.id,
-      sourcePortId: source.sourcePort.id,
-      sourceNode: source.sourceNode,
-      sourcePort: source.sourcePort,
-      nodes: props.nodes,
-      mode: linkState.pendingClick ? 'click' : 'drag',
-      currentPoint: { x: linkState.currentX, y: linkState.currentY },
-      hitRadius: props.portHitRadius
-    })
-    if (completion.targetNodeId && completion.targetPortId) {
-      emit('edgeCreate', {
-        sourceNodeId: completion.sourceNodeId,
-        sourcePortId: completion.sourcePortId,
-        targetNodeId: completion.targetNodeId,
-        targetPortId: completion.targetPortId
-      })
-    }
-  }
-  resetLinkState()
-}
-const previewPoints = computed(() => {
-  if (!linkState.active) return []
-  const source = resolveLinkSource({
-    sourceNodeId: linkState.sourceNodeId,
-    sourcePortId: linkState.sourcePortId,
-    nodes: props.nodes
-  })
-  if (!source) return []
-  return buildPreviewRoute({
-    sourceNode: source.sourceNode,
-    sourcePort: source.sourcePort,
-    nodes: props.nodes,
-    currentPoint: { x: linkState.currentX, y: linkState.currentY },
-    hitRadius: props.portHitRadius
-  }).points
-})
-const renderedPreview = computed(() => renderSvgEdge(previewPoints.value, { pixelSnap: true }))
-const onNodeMousedown = (node: GraphNode<unknown>, event: MouseEvent) => {
-  if (linkState.active) return
-  event.preventDefault()
-  emit('selectionChange', { nodeId: node.id })
-  dragState.active = true
-  dragState.nodeId = node.id
-  const viewportPoint = toViewportPoint(toCanvasPoint(event))
-  dragState.offsetX = viewportPoint.x - node.position.x
-  dragState.offsetY = viewportPoint.y - node.position.y
-  dragState.latestClientX = viewportPoint.x
-  dragState.latestClientY = viewportPoint.y
-}
-const onPortMousedown = (node: GraphNode<unknown>, port: Port, event: MouseEvent) => {
-  event.preventDefault()
-  emit('selectionChange', { nodeId: node.id })
-  const start = getPortPoint(node, port)
-  linkState.active = false
-  linkState.pendingClick = true
-  linkState.pressedClientX = event.clientX
-  linkState.pressedClientY = event.clientY
-  linkState.sourceNodeId = node.id
-  linkState.sourcePortId = port.id
-  linkState.currentX = start.x
-  linkState.currentY = start.y
-}
-const onEdgeMousedown = (edge: GraphEdge<unknown>, event: MouseEvent) => {
-  event.preventDefault()
-  event.stopPropagation()
-  emit('selectionChange', { edgeId: edge.id })
-}
-const onCanvasMousedown = () => {
-  if (linkState.active || dragState.active) return
-  emit('selectionChange', {})
-}
-const onWindowMouseMove = (event: MouseEvent) => {
-  const canvasPoint = toCanvasPoint(event)
-  if (linkState.pendingClick && !linkState.active) {
-    const shouldActivate = shouldActivateLinkDrag({
-      pressedClientX: linkState.pressedClientX,
-      pressedClientY: linkState.pressedClientY,
-      currentClientX: event.clientX,
-      currentClientY: event.clientY,
-      threshold: props.portDragThreshold
-    })
-    if (shouldActivate) {
-      linkState.active = true
-      linkState.pendingClick = false
-    }
-  }
-  if (linkState.active) {
-    const viewportPoint = toViewportPoint(canvasPoint)
-    linkState.currentX = viewportPoint.x
-    linkState.currentY = viewportPoint.y
-    return
-  }
-  if (!dragState.active) return
-  const viewportPoint = toViewportPoint(canvasPoint)
-  dragState.latestClientX = viewportPoint.x
-  dragState.latestClientY = viewportPoint.y
-  if (frameState.scheduled) return
-  frameState.scheduled = true
-  frameState.rafId = window.requestAnimationFrame(applyDragFrame)
-}
-const onWindowMouseUp = () => {
-  stopDrag()
-  stopLink()
-}
-const onWindowKeyDown = (event: KeyboardEvent) => {
-  if (event.key !== 'Delete' && event.key !== 'Backspace') return
-  const target = event.target as HTMLElement | null
-  if (target) {
-    const tagName = target.tagName
-    if (tagName === 'INPUT' || tagName === 'TEXTAREA' || target.isContentEditable) {
-      return
-    }
-  }
-  if (props.selectedEdgeId) {
-    event.preventDefault()
-    emit('edgeDelete', { edgeId: props.selectedEdgeId })
-    return
-  }
-  if (props.selectedNodeId) {
-    event.preventDefault()
-    emit('nodeDelete', { nodeId: props.selectedNodeId })
-  }
-}
-onMounted(() => {
-  const updateSize = () => {
-    const host = containerRef.value
-    if (!host) return
-    const rect = host.getBoundingClientRect()
-    if (rect.width > 0) sizeState.width = rect.width
-    if (rect.height > 0) sizeState.height = rect.height
-  }
-  updateSize()
-  resizeObserver = new ResizeObserver(updateSize)
-  if (containerRef.value) resizeObserver.observe(containerRef.value)
-  window.addEventListener('mousemove', onWindowMouseMove)
-  window.addEventListener('mouseup', onWindowMouseUp)
-  window.addEventListener('keydown', onWindowKeyDown)
-})
-onUnmounted(() => {
-  stopDrag()
-  resizeObserver?.disconnect()
-  window.removeEventListener('mousemove', onWindowMouseMove)
-  window.removeEventListener('mouseup', onWindowMouseUp)
-  window.removeEventListener('keydown', onWindowKeyDown)
-})
-</script>
-<template>
-  <section ref="containerRef" class="canvas-view" :style="{ width: '100%', height: '100%' }">
-    <div class="zoom-controls">
-      <button type="button" class="zoom-btn" @click="zoomOut">-</button>
-      <span class="zoom-text">{{ Math.round(zoomLevel * 100) }}%</span>
-      <button type="button" class="zoom-btn" @click="zoomIn">+</button>
-    </div>
-    <svg
-      ref="svgRef"
-      class="canvas-svg"
-      xmlns="http://www.w3.org/2000/svg"
-      :viewBox="`0 0 ${canvasWidth} ${canvasHeight}`"
-      @mousedown.self="onCanvasMousedown"
-    >
-      <g :transform="viewportTransform">
-        <g class="edge-layer">
-          <template v-for="item in renderedEdges" :key="item.edgeId">
-            <path
-              :d="item.path"
-              fill="none"
-              stroke="transparent"
-              stroke-width="15"
-              vector-effect="non-scaling-stroke"
-              class="edge-hit"
-              @mousedown.stop="(event) => onEdgeMousedown(item.edge, event)"
-            />
-            <path
-              :d="item.path"
-              :stroke="selectedEdgeId === item.edgeId ? '#2563eb' : item.lineColor"
-              stroke-width="1"
-              fill="none"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              vector-effect="non-scaling-stroke"
-              shape-rendering="geometricPrecision"
-              class="edge-path"
-              :class="{ 'edge-flowing': item.flowing }"
-              :stroke-dasharray="item.lineDasharray ?? (item.flowing ? '7 6' : undefined)"
-              @mousedown.stop="(event) => onEdgeMousedown(item.edge, event)"
-            />
-            <polygon
-              :points="item.arrow"
-              :fill="selectedEdgeId === item.edgeId ? '#2563eb' : item.lineColor"
-              :stroke="selectedEdgeId === item.edgeId ? '#2563eb' : item.lineColor"
-              vector-effect="non-scaling-stroke"
-              shape-rendering="geometricPrecision"
-              class="edge-arrow"
-              @mousedown.stop="(event) => onEdgeMousedown(item.edge, event)"
-            />
-            <text
-              v-if="item.label && item.labelPoint"
-              :x="item.labelPoint.x"
-              :y="item.labelPoint.y"
-              class="edge-label"
-              :fill="item.labelColor"
-              text-anchor="middle"
-              dominant-baseline="central"
-            >
-              {{ item.label }}
-            </text>
-          </template>
-          <template v-if="previewPoints.length > 1">
-            <path
-              :d="renderedPreview.path"
-              stroke="#94a3b8"
-              stroke-width="2"
-              fill="none"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              vector-effect="non-scaling-stroke"
-              shape-rendering="geometricPrecision"
-            />
-            <polygon
-              :points="renderedPreview.arrow"
-              fill="#94a3b8"
-              stroke="#94a3b8"
-              vector-effect="non-scaling-stroke"
-              shape-rendering="geometricPrecision"
-            />
-          </template>
-        </g>
-        <g class="node-layer">
-          <g
-            v-for="node in nodes"
-            :key="node.id"
-            class="node-group"
-            :transform="`translate(${node.position.x + node.size.width / 2} ${node.position.y + node.size.height / 2})`"
-          >
-            <rect
-              v-if="resolveNodeShape(node) === 'rect'"
-              :x="-node.size.width / 2"
-              :y="-node.size.height / 2"
-              :width="node.size.width"
-              :height="node.size.height"
-              rx="4"
-              ry="4"
-              :fill="resolveNodeFillColor(node)"
-              stroke="#0f172a"
-              :class="{ selected: selectedNodeId === node.id }"
-              @mousedown.stop="(event) => onNodeMousedown(node, event)"
-            />
-            <rect
-              v-else-if="resolveNodeShape(node) === 'ellipse'"
-              :x="-node.size.width / 2"
-              :y="-node.size.height / 2"
-              :width="node.size.width"
-              :height="node.size.height"
-              :rx="node.size.height / 2"
-              :ry="node.size.height / 2"
-              :fill="resolveNodeFillColor(node)"
-              stroke="#0f172a"
-              :class="{ selected: selectedNodeId === node.id }"
-              @mousedown.stop="(event) => onNodeMousedown(node, event)"
-            />
-            <polygon
-              v-else
-              :points="diamondPointsOf(node)"
-              :fill="resolveNodeFillColor(node)"
-              stroke="#0f172a"
-              :class="{ selected: selectedNodeId === node.id }"
-              @mousedown.stop="(event) => onNodeMousedown(node, event)"
-            />
-            <foreignObject
-              :x="-node.size.width / 2"
-              :y="-node.size.height / 2"
-              :width="node.size.width"
-              :height="node.size.height"
-              class="node-title-foreign"
-            >
-              <div xmlns="http://www.w3.org/1999/xhtml" class="node-title-dom" :style="{ color: resolveNodeFontColor(node) }">
-                <svg v-if="iconSymbolHrefOf(node)" width="14" height="14" class="node-icon-dom" aria-hidden="true">
-                  <use :href="iconSymbolHrefOf(node)" :fill="resolveNodeFontColor(node)" />
-                </svg>
-                <span v-else-if="iconOf(node)" class="node-icon-fallback">{{ iconOf(node) }}</span>
-                <span class="node-title-text">{{ titleOf(node) }}</span>
-              </div>
-            </foreignObject>
-            <circle
-              v-for="item in portsOf(node)"
-              v-show="selectedNodeId === node.id"
-              :key="item.port.id"
-              :cx="item.dx"
-              :cy="item.dy"
-              r="5"
-              fill="#ffffff"
-              stroke="#1d4ed8"
-              class="port-dot"
-              @mousedown.stop="(event) => onPortMousedown(node, item.port, event)"
-            />
-          </g>
-        </g>
-      </g>
-    </svg>
-  </section>
-</template>
-<style scoped>
-.canvas-view {
-  position: relative;
-  overflow: hidden;
-  border: 1px solid #dee2e6;
-  background: #f8f9fa;
-}
-.zoom-controls {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  z-index: 2;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  background: rgba(255, 255, 255, 0.95);
-  border: 1px solid #cbd5e1;
-  border-radius: 6px;
-  padding: 4px 6px;
-}
-.zoom-btn {
-  width: 24px;
-  height: 24px;
-  border: 1px solid #cbd5e1;
-  border-radius: 4px;
-  background: #f8fafc;
-  cursor: pointer;
-  line-height: 1;
-}
-.zoom-text {
-  min-width: 44px;
-  text-align: center;
-  font-size: 12px;
-  color: #334155;
-}
-.canvas-svg {
-  width: 100%;
-  height: 100%;
-}
-rect.selected,
-polygon.selected {
-  stroke: #2563eb;
-  stroke-width: 2;
-}
-.port-dot {
-  cursor: crosshair;
-}
-.edge-path,
-.edge-arrow {
-  cursor: pointer;
-}
-.edge-flowing {
-  animation: edge-flow 0.8s linear infinite;
-}
-@keyframes edge-flow {
-  from {
-    stroke-dashoffset: 0;
-  }
-  to {
-    stroke-dashoffset: -13;
-  }
-}
-.edge-label {
-  font-size: 12px;
-  pointer-events: none;
-  user-select: none;
-}
-.node-title-foreign {
-  pointer-events: none;
-}
-.node-title-dom {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  font-size: 13px;
-  user-select: none;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.node-icon-dom,
-.node-icon-fallback {
-  flex: 0 0 auto;
-}
-.node-title-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-</style>

package/src/EdgeView.vue DELETED Viewed

@@ -1,46 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { Point } from '@workflow/core'
-import { renderSvgEdge } from '@workflow/svg-renderer'
-const props = withDefaults(
-  defineProps<{
-    points: Point[]
-    stroke?: string
-    strokeWidth?: number
-    fill?: string
-  }>(),
-  {
-    stroke: '#0b7285',
-    strokeWidth: 1,
-    fill: '#0b7285'
-  }
-)
-const render = computed(() => renderSvgEdge(props.points))
-</script>
-<template>
-  <svg class="edge-view" xmlns="http://www.w3.org/2000/svg">
-    <path
-      :d="render.path"
-      :stroke="stroke"
-      :stroke-width="strokeWidth"
-      fill="none"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-    <polygon :points="render.arrow" :fill="fill" :stroke="stroke" />
-  </svg>
-</template>
-<style scoped>
-.edge-view {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  overflow: visible;
-  pointer-events: none;
-}
-</style>

package/src/index.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export { default as CanvasView } from './CanvasView.vue'