@michael_home/workflow-engine-vue 1.0.2 → 1.0.4

package/dist/style.css

@@ -1 +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}
+.canvas-view[data-v-209f0bd3]{position:relative;overflow:hidden;border:1px solid #dee2e6;background:#f8f9fa}.zoom-controls[data-v-209f0bd3]{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-209f0bd3]{width:24px;height:24px;border:1px solid #cbd5e1;border-radius:4px;background:#f8fafc;cursor:pointer;line-height:1}.zoom-text[data-v-209f0bd3]{min-width:44px;text-align:center;font-size:12px;color:#334155}.canvas-svg[data-v-209f0bd3]{width:100%;height:100%}rect.selected[data-v-209f0bd3],polygon.selected[data-v-209f0bd3]{stroke:#2563eb;stroke-width:2}.port-dot[data-v-209f0bd3]{cursor:crosshair}.edge-path[data-v-209f0bd3],.edge-arrow[data-v-209f0bd3]{cursor:pointer}.edge-flowing[data-v-209f0bd3]{animation:edge-flow-209f0bd3 .8s linear infinite}@keyframes edge-flow-209f0bd3{0%{stroke-dashoffset:0}to{stroke-dashoffset:-13}}.edge-label[data-v-209f0bd3]{font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none}.node-title-foreign[data-v-209f0bd3]{pointer-events:none}.node-title-dom[data-v-209f0bd3]{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-209f0bd3],.node-icon-fallback[data-v-209f0bd3]{flex:0 0 auto}.node-title-text[data-v-209f0bd3]{overflow:hidden;text-overflow:ellipsis}

package/package.json

@@ -1,17 +1,18 @@
 {
   "name": "@michael_home/workflow-engine-vue",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Vue 3 components for workflow engine canvas",
   "type": "module",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "import": "./dist/index.js",
       "require": "./dist/index.cjs",
-      "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"
-    }
+    },
+    "./dist/style.css": "./dist/style.css"
   },
   "files": [
     "dist"
@@ -28,18 +29,19 @@
     "vue": "^3.5.0"
   },
   "dependencies": {
-    "@michael_home/workflow-engine-core": "1.0.2",
-    "@michael_home/workflow-engine-svg-renderer": "1.0.2"
+    "@michael_home/workflow-engine-core": "^1.0.3",
+    "@michael_home/workflow-engine-svg-renderer": "^1.0.3"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.0",
     "typescript": "^5.3.0",
     "vite": "^5.0.0",
-    "vue": "^3.5.0"
+    "vue": "^3.5.0",
+    "vue-tsc": "^3.2.0"
   },
   "scripts": {
-    "build": "vite build",
-    "check": "echo 'Vue package type checking via vite'",
+    "build": "vite build && vue-tsc --emitDeclarationOnly --outDir dist",
+    "check": "echo 'Vue package type checking'",
     "clean": "rm -rf dist"
   }
 }

package/dist/index.mjs

@@ -1,457 +0,0 @@
-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
-};