@michael_home/workflow-engine-vue 1.0.3 → 1.0.5

package/src/EdgeView.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Point } from '@michael_home/workflow-engine-core'
+import { renderSvgEdge } from '@michael_home/workflow-engine-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

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

package/dist/CanvasView.vue.d.ts

@@ -1,108 +0,0 @@
-import type { GraphEdge, GraphNode, Point } from '@michael_home/workflow-engine-core';
-type __VLS_Props = {
-    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;
-};
-declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
-    panX: number;
-    panY: number;
-    zoom: number;
-    snapToGrid: boolean;
-    gridSize: number;
-    alignThreshold: number;
-    portHitRadius: number;
-    portDragThreshold: number;
-}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    selectionChange: (selection: {
-        nodeId?: string;
-        edgeId?: string;
-    }) => void;
-    nodePositionChange: (payload: {
-        nodeId: string;
-        position: Point;
-    }) => void;
-    edgeCreate: (payload: {
-        sourceNodeId: string;
-        sourcePortId: string;
-        targetNodeId: string;
-        targetPortId: string;
-    }) => void;
-    edgeDelete: (payload: {
-        edgeId: string;
-    }) => void;
-    nodeDelete: (payload: {
-        nodeId: string;
-    }) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
-    panX: number;
-    panY: number;
-    zoom: number;
-    snapToGrid: boolean;
-    gridSize: number;
-    alignThreshold: number;
-    portHitRadius: number;
-    portDragThreshold: number;
-}>>> & Readonly<{
-    onSelectionChange?: ((selection: {
-        nodeId?: string;
-        edgeId?: string;
-    }) => any) | undefined;
-    onNodePositionChange?: ((payload: {
-        nodeId: string;
-        position: Point;
-    }) => any) | undefined;
-    onEdgeCreate?: ((payload: {
-        sourceNodeId: string;
-        sourcePortId: string;
-        targetNodeId: string;
-        targetPortId: string;
-    }) => any) | undefined;
-    onEdgeDelete?: ((payload: {
-        edgeId: string;
-    }) => any) | undefined;
-    onNodeDelete?: ((payload: {
-        nodeId: string;
-    }) => any) | undefined;
-}>, {
-    panX: number;
-    panY: number;
-    zoom: number;
-    snapToGrid: boolean;
-    gridSize: number;
-    alignThreshold: number;
-    portHitRadius: number;
-    portDragThreshold: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<Required<T>[K]>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_PrettifyLocal<T> = (T extends any ? {
-    [K in keyof T]: T[K];
-} : {
-    [K in keyof T as K]: T[K];
-}) & {};
-//# sourceMappingURL=CanvasView.vue.d.ts.map

package/dist/CanvasView.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CanvasView.vue.d.ts","sourceRoot":"","sources":["../src/CanvasView.vue"],"names":[],"mappings":"AAqwBA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAQ,MAAM,oCAAoC,CAAA;AAG3F,KAAK,WAAW,GAAG;IACf,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,EAAE,CAAA;IAC3B,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,EAAE,CAAA;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,CAAC;AAwvBJ,QAAA,MAAM,YAAY;;;;;;;;;;;iBAxuBwB,MAAM;iBAAW,MAAM;;;gBACvB,MAAM;kBAAY,KAAK;;;sBACzB,MAAM;sBAAgB,MAAM;sBAAgB,MAAM;sBAAgB,MAAM;;;gBAC9E,MAAM;;;gBACN,MAAM;;;;;;;;;;;;;iBAJE,MAAM;iBAAW,MAAM;;;gBACvB,MAAM;kBAAY,KAAK;;;sBACzB,MAAM;sBAAgB,MAAM;sBAAgB,MAAM;sBAAgB,MAAM;;;gBAC9E,MAAM;;;gBACN,MAAM;;;UA5B7B,MAAM;UACN,MAAM;UACN,MAAM;gBACA,OAAO;cACT,MAAM;oBACA,MAAM;mBACP,MAAM;uBACF,MAAM;4EA4vB5B,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,uBAAuB,CAAC,CAAC,IAAI;KAChC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACpC;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAChD;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CACzD,CAAC;AACF,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAC9B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAC7C,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,CAAC,GAC7C,CAAC,CAAC,CAAC,CAAC;CACP,CAAC;AACF,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}

package/dist/EdgeView.vue.d.ts

@@ -1,41 +0,0 @@
-import type { Point } from '@michael_home/workflow-engine-core';
-type __VLS_Props = {
-    points: Point[];
-    stroke?: string;
-    strokeWidth?: number;
-    fill?: string;
-};
-declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
-    stroke: string;
-    strokeWidth: number;
-    fill: string;
-}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
-    stroke: string;
-    strokeWidth: number;
-    fill: string;
-}>>> & Readonly<{}>, {
-    fill: string;
-    stroke: string;
-    strokeWidth: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<Required<T>[K]>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_PrettifyLocal<T> = (T extends any ? {
-    [K in keyof T]: T[K];
-} : {
-    [K in keyof T as K]: T[K];
-}) & {};
-//# sourceMappingURL=EdgeView.vue.d.ts.map

package/dist/EdgeView.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EdgeView.vue.d.ts","sourceRoot":"","sources":["../src/EdgeView.vue"],"names":[],"mappings":"AAmDA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oCAAoC,CAAA;AAG/D,KAAK,WAAW,GAAG;IACf,MAAM,EAAE,KAAK,EAAE,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAC;AAwDJ,QAAA,MAAM,YAAY;;;;;;;;;UAzDP,MAAM;YAFJ,MAAM;iBACD,MAAM;4EA4DtB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,uBAAuB,CAAC,CAAC,IAAI;KAChC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACpC;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAChD;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CACzD,CAAC;AACF,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAC9B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAC7C,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,CAAC,GAC7C,CAAC,CAAC,CAAC,CAAC;CACP,CAAC;AACF,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}

package/dist/index.cjs

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

package/dist/index.d.ts

@@ -1,2 +0,0 @@
-export { default as CanvasView } from './CanvasView.vue';
-//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAA"}