w-flow-vue 1.0.0

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 (144) hide show
  1. package/.editorconfig +9 -0
  2. package/.eslintignore +3 -0
  3. package/.eslintrc.js +55 -0
  4. package/.jsdoc +25 -0
  5. package/AGENT.md +223 -0
  6. package/LICENSE +21 -0
  7. package/README.md +37 -0
  8. package/SECURITY.md +5 -0
  9. package/babel.config.js +16 -0
  10. package/dist/w-flow-vue.umd.js +15 -0
  11. package/dist/w-flow-vue.umd.js.map +1 -0
  12. package/docs/components_WFlowVue.vue.html +1214 -0
  13. package/docs/examples/app.html +62 -0
  14. package/docs/examples/app.umd.js +20 -0
  15. package/docs/examples/app.umd.js.map +1 -0
  16. package/docs/examples/ex-AppBasic.html +440 -0
  17. package/docs/examples/ex-AppConnectivity.html +131 -0
  18. package/docs/fonts/Montserrat/Montserrat-Bold.eot +0 -0
  19. package/docs/fonts/Montserrat/Montserrat-Bold.ttf +0 -0
  20. package/docs/fonts/Montserrat/Montserrat-Bold.woff +0 -0
  21. package/docs/fonts/Montserrat/Montserrat-Bold.woff2 +0 -0
  22. package/docs/fonts/Montserrat/Montserrat-Regular.eot +0 -0
  23. package/docs/fonts/Montserrat/Montserrat-Regular.ttf +0 -0
  24. package/docs/fonts/Montserrat/Montserrat-Regular.woff +0 -0
  25. package/docs/fonts/Montserrat/Montserrat-Regular.woff2 +0 -0
  26. package/docs/fonts/Source-Sans-Pro/sourcesanspro-light-webfont.eot +0 -0
  27. package/docs/fonts/Source-Sans-Pro/sourcesanspro-light-webfont.svg +978 -0
  28. package/docs/fonts/Source-Sans-Pro/sourcesanspro-light-webfont.ttf +0 -0
  29. package/docs/fonts/Source-Sans-Pro/sourcesanspro-light-webfont.woff +0 -0
  30. package/docs/fonts/Source-Sans-Pro/sourcesanspro-light-webfont.woff2 +0 -0
  31. package/docs/fonts/Source-Sans-Pro/sourcesanspro-regular-webfont.eot +0 -0
  32. package/docs/fonts/Source-Sans-Pro/sourcesanspro-regular-webfont.svg +1049 -0
  33. package/docs/fonts/Source-Sans-Pro/sourcesanspro-regular-webfont.ttf +0 -0
  34. package/docs/fonts/Source-Sans-Pro/sourcesanspro-regular-webfont.woff +0 -0
  35. package/docs/fonts/Source-Sans-Pro/sourcesanspro-regular-webfont.woff2 +0 -0
  36. package/docs/global.html +1919 -0
  37. package/docs/index.html +84 -0
  38. package/docs/js_defaults.mjs.html +105 -0
  39. package/docs/js_edge-path.mjs.html +237 -0
  40. package/docs/js_geometry.mjs.html +298 -0
  41. package/docs/js_graph.mjs.html +103 -0
  42. package/docs/js_step-routing.mjs.html +346 -0
  43. package/docs/module-WFlowVue.html +2790 -0
  44. package/docs/scripts/collapse.js +39 -0
  45. package/docs/scripts/commonNav.js +28 -0
  46. package/docs/scripts/linenumber.js +25 -0
  47. package/docs/scripts/nav.js +12 -0
  48. package/docs/scripts/polyfill.js +4 -0
  49. package/docs/scripts/prettify/Apache-License-2.0.txt +202 -0
  50. package/docs/scripts/prettify/lang-css.js +2 -0
  51. package/docs/scripts/prettify/prettify.js +28 -0
  52. package/docs/scripts/search.js +99 -0
  53. package/docs/styles/jsdoc.css +776 -0
  54. package/docs/styles/prettify.css +80 -0
  55. package/jest.config.js +20 -0
  56. package/package.json +80 -0
  57. package/public/index.html +38 -0
  58. package/script.txt +22 -0
  59. package/src/App.vue +326 -0
  60. package/src/AppBasic.vue +125 -0
  61. package/src/AppConnectivity.vue +186 -0
  62. package/src/components/WFlowVue.vue +1142 -0
  63. package/src/components/canvas/BackgroundLayer.vue +78 -0
  64. package/src/components/canvas/FlowCanvas.vue +64 -0
  65. package/src/components/canvas/SelectionBox.vue +36 -0
  66. package/src/components/canvas/ViewportTransform.vue +35 -0
  67. package/src/components/edges/ConnectionLine.vue +65 -0
  68. package/src/components/edges/EdgeMarkerDefs.vue +76 -0
  69. package/src/components/edges/EdgeRenderer.vue +120 -0
  70. package/src/components/edges/EdgeWrapper.vue +379 -0
  71. package/src/components/nodes/DefaultNode.vue +276 -0
  72. package/src/components/nodes/Handle.vue +101 -0
  73. package/src/components/nodes/InputNode.vue +47 -0
  74. package/src/components/nodes/NodeBody.vue +103 -0
  75. package/src/components/nodes/NodeFace.vue +128 -0
  76. package/src/components/nodes/NodeRenderer.vue +95 -0
  77. package/src/components/nodes/NodeWrapper.vue +475 -0
  78. package/src/components/nodes/OutputNode.vue +47 -0
  79. package/src/components/ui/ConnSettingsForm.vue +158 -0
  80. package/src/components/ui/Controls.vue +83 -0
  81. package/src/components/ui/NodeSettingsForm.vue +185 -0
  82. package/src/js/defaults.mjs +33 -0
  83. package/src/js/edge-path.mjs +165 -0
  84. package/src/js/geometry.mjs +226 -0
  85. package/src/js/graph.mjs +31 -0
  86. package/src/js/step-routing.mjs +274 -0
  87. package/src/main.js +22 -0
  88. package/test/WFlowVue-features.test.mjs +760 -0
  89. package/test/WFlowVue.test.mjs +421 -0
  90. package/test/components-canvas.test.mjs +102 -0
  91. package/test/components-edge.test.mjs +147 -0
  92. package/test/components-node.test.mjs +174 -0
  93. package/test/components-ui.test.mjs +69 -0
  94. package/test/defaults.test.mjs +86 -0
  95. package/test/edge-path.test.mjs +102 -0
  96. package/test/generate-routing-snapshots.mjs +77 -0
  97. package/test/generate-visual-baselines.mjs +206 -0
  98. package/test/geometry.test.mjs +236 -0
  99. package/test/graph.test.mjs +72 -0
  100. package/test/jsons/routing-snapshots.json +24994 -0
  101. package/test/pics/_check2.png +0 -0
  102. package/test/pics/_check3.png +0 -0
  103. package/test/pics/_check4.png +0 -0
  104. package/test/pics/_check5.png +0 -0
  105. package/test/pics/_v1.png +0 -0
  106. package/test/pics/_v2.png +0 -0
  107. package/test/pics/_v3.png +0 -0
  108. package/test/pics/_v4.png +0 -0
  109. package/test/pics/_v5.png +0 -0
  110. package/test/pics/_v6.png +0 -0
  111. package/test/pics/_v7.png +0 -0
  112. package/test/pics/vb-edge-hovered.png +0 -0
  113. package/test/pics/vb-edges-normal.png +0 -0
  114. package/test/pics/vb-locked-edge-hovered.png +0 -0
  115. package/test/pics/vb-locked-node-hovered.png +0 -0
  116. package/test/pics/vb-locked-node-selected.png +0 -0
  117. package/test/pics/vb-locked-overview.png +0 -0
  118. package/test/pics/vb-node-1.png +0 -0
  119. package/test/pics/vb-node-10.png +0 -0
  120. package/test/pics/vb-node-11.png +0 -0
  121. package/test/pics/vb-node-12.png +0 -0
  122. package/test/pics/vb-node-2.png +0 -0
  123. package/test/pics/vb-node-3.png +0 -0
  124. package/test/pics/vb-node-4.png +0 -0
  125. package/test/pics/vb-node-5.png +0 -0
  126. package/test/pics/vb-node-6.png +0 -0
  127. package/test/pics/vb-node-7.png +0 -0
  128. package/test/pics/vb-node-8.png +0 -0
  129. package/test/pics/vb-node-9.png +0 -0
  130. package/test/pics/vb-node-hovered.png +0 -0
  131. package/test/pics/vb-node-selected.png +0 -0
  132. package/test/pics/vb-overview.png +0 -0
  133. package/test/step-routing-connectivity.test.mjs +78 -0
  134. package/test/step-routing.test.mjs +88 -0
  135. package/test/visual-regression.test.mjs +274 -0
  136. package/toolg/addVersion.mjs +4 -0
  137. package/toolg/cleanFolder.mjs +4 -0
  138. package/toolg/gDistApp.mjs +34 -0
  139. package/toolg/gDistRollupComps.mjs +22 -0
  140. package/toolg/gDocExams.mjs +47 -0
  141. package/toolg/gExtractHtml.mjs +179 -0
  142. package/toolg/modifyReadme.mjs +4 -0
  143. package/vue.config.js +9 -0
  144. package/vue2/344/271/213foreignObject/345/205/247/346/270/262/346/237/223/345/225/217/351/241/214/350/210/207/344/277/256/346/255/243.md +151 -0
package/docs/index.html ADDED
@@ -0,0 +1,84 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+
5
+ <meta charset="utf-8">
6
+ <title>Home - Documentation</title>
7
+
8
+
9
+ <script src="scripts/prettify/prettify.js"></script>
10
+ <script src="scripts/prettify/lang-css.js"></script>
11
+ <!--[if lt IE 9]>
12
+ <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
13
+ <![endif]-->
14
+ <link type="text/css" rel="stylesheet" href="styles/prettify.css">
15
+ <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
16
+ <script src="scripts/nav.js" defer></script>
17
+
18
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
19
+ </head>
20
+ <body>
21
+
22
+ <input type="checkbox" id="nav-trigger" class="nav-trigger" />
23
+ <label for="nav-trigger" class="navicon-button x">
24
+ <div class="navicon"></div>
25
+ </label>
26
+
27
+ <label for="nav-trigger" class="overlay"></label>
28
+
29
+ <nav >
30
+
31
+
32
+ <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-WFlowVue.html">WFlowVue</a></li></ul><h3>Global</h3><ul><li><a href="global.html#NODE_DEFAULTS">NODE_DEFAULTS</a></li><li><a href="global.html#clampPosition">clampPosition</a></li><li><a href="global.html#generateId">generateId</a></li><li><a href="global.html#getBezierPath">getBezierPath</a></li><li><a href="global.html#getControlOffset">getControlOffset</a></li><li><a href="global.html#getDiamondEdgePoint">getDiamondEdgePoint</a></li><li><a href="global.html#getEllipseEdgePoint">getEllipseEdgePoint</a></li><li><a href="global.html#getHandlePosition">getHandlePosition</a></li><li><a href="global.html#getOverlappingNodes">getOverlappingNodes</a></li><li><a href="global.html#getSmoothStepPath">getSmoothStepPath</a></li><li><a href="global.html#getStepPath">getStepPath</a></li><li><a href="global.html#getStraightPath">getStraightPath</a></li><li><a href="global.html#getTriangleEdgePoint">getTriangleEdgePoint</a></li><li><a href="global.html#isValidConnection">isValidConnection</a></li><li><a href="global.html#labelAtHalfLength">labelAtHalfLength</a></li><li><a href="global.html#lookupRoute">lookupRoute</a></li><li><a href="global.html#rectsOverlap">rectsOverlap</a></li><li><a href="global.html#segmentFallback">segmentFallback</a></li><li><a href="global.html#snapPosition">snapPosition</a></li></ul>
33
+
34
+ </nav>
35
+
36
+ <div id="main">
37
+
38
+
39
+
40
+
41
+
42
+
43
+
44
+
45
+
46
+ <section class="package">
47
+ <h3> </h3>
48
+ </section>
49
+
50
+
51
+
52
+
53
+
54
+
55
+
56
+
57
+
58
+
59
+
60
+
61
+
62
+
63
+
64
+
65
+
66
+
67
+
68
+
69
+ </div>
70
+
71
+ <br class="clear">
72
+
73
+ <footer>
74
+ Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.5</a> on Sun Apr 12 2026 22:18:33 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
75
+ </footer>
76
+
77
+ <script>prettyPrint();</script>
78
+ <script src="scripts/polyfill.js"></script>
79
+ <script src="scripts/linenumber.js"></script>
80
+
81
+
82
+
83
+ </body>
84
+ </html>
package/docs/js_defaults.mjs.html ADDED
@@ -0,0 +1,105 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+
5
+ <meta charset="utf-8">
6
+ <title>js/defaults.mjs - Documentation</title>
7
+
8
+
9
+ <script src="scripts/prettify/prettify.js"></script>
10
+ <script src="scripts/prettify/lang-css.js"></script>
11
+ <!--[if lt IE 9]>
12
+ <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
13
+ <![endif]-->
14
+ <link type="text/css" rel="stylesheet" href="styles/prettify.css">
15
+ <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
16
+ <script src="scripts/nav.js" defer></script>
17
+
18
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
19
+ </head>
20
+ <body>
21
+
22
+ <input type="checkbox" id="nav-trigger" class="nav-trigger" />
23
+ <label for="nav-trigger" class="navicon-button x">
24
+ <div class="navicon"></div>
25
+ </label>
26
+
27
+ <label for="nav-trigger" class="overlay"></label>
28
+
29
+ <nav >
30
+
31
+
32
+ <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-WFlowVue.html">WFlowVue</a></li></ul><h3>Global</h3><ul><li><a href="global.html#NODE_DEFAULTS">NODE_DEFAULTS</a></li><li><a href="global.html#clampPosition">clampPosition</a></li><li><a href="global.html#generateId">generateId</a></li><li><a href="global.html#getBezierPath">getBezierPath</a></li><li><a href="global.html#getControlOffset">getControlOffset</a></li><li><a href="global.html#getDiamondEdgePoint">getDiamondEdgePoint</a></li><li><a href="global.html#getEllipseEdgePoint">getEllipseEdgePoint</a></li><li><a href="global.html#getHandlePosition">getHandlePosition</a></li><li><a href="global.html#getOverlappingNodes">getOverlappingNodes</a></li><li><a href="global.html#getSmoothStepPath">getSmoothStepPath</a></li><li><a href="global.html#getStepPath">getStepPath</a></li><li><a href="global.html#getStraightPath">getStraightPath</a></li><li><a href="global.html#getTriangleEdgePoint">getTriangleEdgePoint</a></li><li><a href="global.html#isValidConnection">isValidConnection</a></li><li><a href="global.html#labelAtHalfLength">labelAtHalfLength</a></li><li><a href="global.html#lookupRoute">lookupRoute</a></li><li><a href="global.html#rectsOverlap">rectsOverlap</a></li><li><a href="global.html#segmentFallback">segmentFallback</a></li><li><a href="global.html#snapPosition">snapPosition</a></li></ul>
33
+
34
+ </nav>
35
+
36
+ <div id="main">
37
+
38
+ <h1 class="page-title">js/defaults.mjs</h1>
39
+
40
+
41
+
42
+
43
+
44
+
45
+
46
+ <section>
47
+ <article>
48
+ <pre class="prettyprint source linenums"><code>/**
49
+ * Default values for node and connection properties.
50
+ */
51
+
52
+ export const NODE_DEFAULTS = {
53
+ type: 'basic',
54
+ shape: 'rectangle',
55
+ width: 100,
56
+ height: 40,
57
+ fontSize: 12,
58
+ fontSizeMin: 1,
59
+ fontSizeMax: 72,
60
+ fontColor: '#333333',
61
+ faceColor: '#ffffff',
62
+ edgeColor: '#bbbbbb',
63
+ edgeWidth: 1,
64
+ toPosition: 'bottom',
65
+ fromPosition: 'top',
66
+ popupDirection: 'right',
67
+ }
68
+
69
+ export const CONN_DEFAULTS = {
70
+ type: 'bezier',
71
+ fontSize: 10,
72
+ fontSizeMin: 1,
73
+ fontSizeMax: 72,
74
+ fontColor: '#333333',
75
+ edgeColor: '#b1b1b7',
76
+ edgeWidth: 1,
77
+ markerEnd: '',
78
+ animated: false,
79
+ defOffset: 24,
80
+ }
81
+ </code></pre>
82
+ </article>
83
+ </section>
84
+
85
+
86
+
87
+
88
+
89
+
90
+ </div>
91
+
92
+ <br class="clear">
93
+
94
+ <footer>
95
+ Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.5</a> on Sun Apr 12 2026 22:18:33 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
96
+ </footer>
97
+
98
+ <script>prettyPrint();</script>
99
+ <script src="scripts/polyfill.js"></script>
100
+ <script src="scripts/linenumber.js"></script>
101
+
102
+
103
+
104
+ </body>
105
+ </html>
package/docs/js_edge-path.mjs.html ADDED
@@ -0,0 +1,237 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+
5
+ <meta charset="utf-8">
6
+ <title>js/edge-path.mjs - Documentation</title>
7
+
8
+
9
+ <script src="scripts/prettify/prettify.js"></script>
10
+ <script src="scripts/prettify/lang-css.js"></script>
11
+ <!--[if lt IE 9]>
12
+ <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
13
+ <![endif]-->
14
+ <link type="text/css" rel="stylesheet" href="styles/prettify.css">
15
+ <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
16
+ <script src="scripts/nav.js" defer></script>
17
+
18
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
19
+ </head>
20
+ <body>
21
+
22
+ <input type="checkbox" id="nav-trigger" class="nav-trigger" />
23
+ <label for="nav-trigger" class="navicon-button x">
24
+ <div class="navicon"></div>
25
+ </label>
26
+
27
+ <label for="nav-trigger" class="overlay"></label>
28
+
29
+ <nav >
30
+
31
+
32
+ <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-WFlowVue.html">WFlowVue</a></li></ul><h3>Global</h3><ul><li><a href="global.html#NODE_DEFAULTS">NODE_DEFAULTS</a></li><li><a href="global.html#clampPosition">clampPosition</a></li><li><a href="global.html#generateId">generateId</a></li><li><a href="global.html#getBezierPath">getBezierPath</a></li><li><a href="global.html#getControlOffset">getControlOffset</a></li><li><a href="global.html#getDiamondEdgePoint">getDiamondEdgePoint</a></li><li><a href="global.html#getEllipseEdgePoint">getEllipseEdgePoint</a></li><li><a href="global.html#getHandlePosition">getHandlePosition</a></li><li><a href="global.html#getOverlappingNodes">getOverlappingNodes</a></li><li><a href="global.html#getSmoothStepPath">getSmoothStepPath</a></li><li><a href="global.html#getStepPath">getStepPath</a></li><li><a href="global.html#getStraightPath">getStraightPath</a></li><li><a href="global.html#getTriangleEdgePoint">getTriangleEdgePoint</a></li><li><a href="global.html#isValidConnection">isValidConnection</a></li><li><a href="global.html#labelAtHalfLength">labelAtHalfLength</a></li><li><a href="global.html#lookupRoute">lookupRoute</a></li><li><a href="global.html#rectsOverlap">rectsOverlap</a></li><li><a href="global.html#segmentFallback">segmentFallback</a></li><li><a href="global.html#snapPosition">snapPosition</a></li></ul>
33
+
34
+ </nav>
35
+
36
+ <div id="main">
37
+
38
+ <h1 class="page-title">js/edge-path.mjs</h1>
39
+
40
+
41
+
42
+
43
+
44
+
45
+
46
+ <section>
47
+ <article>
48
+ <pre class="prettyprint source linenums"><code>/**
49
+ * Edge path generators for different edge types.
50
+ */
51
+
52
+ import { calculateStepPoints, clearStepCache } from './step-routing.mjs'
53
+
54
+ export { clearStepCache }
55
+
56
+ /**
57
+ * Calculate the control point offset for bezier curves based on handle position.
58
+ */
59
+ function getControlOffset(distance, position) {
60
+ switch (position) {
61
+ case 'top': return { x: 0, y: -distance }
62
+ case 'bottom': return { x: 0, y: distance }
63
+ case 'left': return { x: -distance, y: 0 }
64
+ case 'right': return { x: distance, y: 0 }
65
+ default: return { x: 0, y: 0 }
66
+ }
67
+ }
68
+
69
+ /**
70
+ * Get bezier curve path.
71
+ * @returns {{ path: string, labelX: number, labelY: number }}
72
+ */
73
+ export function getBezierPath({
74
+ sourceX, sourceY, sourcePosition = 'bottom',
75
+ targetX, targetY, targetPosition = 'top',
76
+ curvature = 0.25,
77
+ }) {
78
+ const dist = Math.sqrt(Math.pow(targetX - sourceX, 2) + Math.pow(targetY - sourceY, 2))
79
+ const offset = Math.max(dist * curvature, 25)
80
+
81
+ const s = getControlOffset(offset, sourcePosition)
82
+ const t = getControlOffset(offset, targetPosition)
83
+
84
+ const controlX1 = sourceX + s.x
85
+ const controlY1 = sourceY + s.y
86
+ const controlX2 = targetX + t.x
87
+ const controlY2 = targetY + t.y
88
+
89
+ const path = `M ${sourceX},${sourceY} C ${controlX1},${controlY1} ${controlX2},${controlY2} ${targetX},${targetY}`
90
+
91
+ const labelX = (sourceX + controlX1 + controlX2 + targetX) / 4
92
+ const labelY = (sourceY + controlY1 + controlY2 + targetY) / 4
93
+
94
+ return { path, labelX, labelY }
95
+ }
96
+
97
+ /**
98
+ * Get straight line path.
99
+ * @returns {{ path: string, labelX: number, labelY: number }}
100
+ */
101
+ export function getStraightPath({ sourceX, sourceY, targetX, targetY }) {
102
+ const path = `M ${sourceX},${sourceY} L ${targetX},${targetY}`
103
+ const labelX = (sourceX + targetX) / 2
104
+ const labelY = (sourceY + targetY) / 2
105
+ return { path, labelX, labelY }
106
+ }
107
+
108
+ /**
109
+ * Get step (right-angle) path.
110
+ * @returns {{ path: string, labelX: number, labelY: number }}
111
+ */
112
+ export function getStepPath({
113
+ sourceX, sourceY, sourcePosition = 'bottom',
114
+ targetX, targetY, targetPosition = 'top',
115
+ offset = 20,
116
+ allNodes, nodeInternals, connFromId, connToId,
117
+ }) {
118
+ const points = calculateStepPoints(
119
+ sourceX, sourceY, sourcePosition,
120
+ targetX, targetY, targetPosition,
121
+ offset, allNodes, nodeInternals, connFromId, connToId
122
+ )
123
+ const path = points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x},${p.y}`).join(' ')
124
+ const label = labelAtHalfLength(points)
125
+ return { path, labelX: label.x, labelY: label.y }
126
+ }
127
+
128
+ /**
129
+ * Get smooth step (rounded right-angle) path.
130
+ * @returns {{ path: string, labelX: number, labelY: number }}
131
+ */
132
+ export function getSmoothStepPath({
133
+ sourceX, sourceY, sourcePosition = 'bottom',
134
+ targetX, targetY, targetPosition = 'top',
135
+ borderRadius = 5,
136
+ offset = 20,
137
+ allNodes, nodeInternals, connFromId, connToId,
138
+ }) {
139
+ const points = calculateStepPoints(
140
+ sourceX, sourceY, sourcePosition,
141
+ targetX, targetY, targetPosition,
142
+ offset, allNodes, nodeInternals, connFromId, connToId
143
+ )
144
+
145
+ if (points.length &lt;= 2) {
146
+ const path = `M ${points[0].x},${points[0].y} L ${points[1].x},${points[1].y}`
147
+ const labelX = (points[0].x + points[1].x) / 2
148
+ const labelY = (points[0].y + points[1].y) / 2
149
+ return { path, labelX, labelY }
150
+ }
151
+
152
+ let path = `M ${points[0].x},${points[0].y}`
153
+
154
+ for (let i = 1; i &lt; points.length - 1; i++) {
155
+ const prev = points[i - 1]
156
+ const curr = points[i]
157
+ const next = points[i + 1]
158
+
159
+ const dx1 = curr.x - prev.x
160
+ const dy1 = curr.y - prev.y
161
+ const dx2 = next.x - curr.x
162
+ const dy2 = next.y - curr.y
163
+
164
+ const len1 = Math.sqrt(dx1 * dx1 + dy1 * dy1)
165
+ const len2 = Math.sqrt(dx2 * dx2 + dy2 * dy2)
166
+
167
+ if (len1 === 0 || len2 === 0) {
168
+ // Zero-length segment — skip rounding, just draw straight line
169
+ path += ` L ${curr.x},${curr.y}`
170
+ continue
171
+ }
172
+
173
+ const r = Math.min(borderRadius, len1 / 2, len2 / 2)
174
+
175
+ const beforeX = curr.x - (dx1 / len1) * r
176
+ const beforeY = curr.y - (dy1 / len1) * r
177
+ const afterX = curr.x + (dx2 / len2) * r
178
+ const afterY = curr.y + (dy2 / len2) * r
179
+
180
+ path += ` L ${beforeX},${beforeY} Q ${curr.x},${curr.y} ${afterX},${afterY}`
181
+ }
182
+
183
+ path += ` L ${points[points.length - 1].x},${points[points.length - 1].y}`
184
+
185
+ const label = labelAtHalfLength(points)
186
+ return { path, labelX: label.x, labelY: label.y }
187
+ }
188
+
189
+ /**
190
+ * Find the point at exactly half the total Manhattan path length.
191
+ */
192
+ function labelAtHalfLength(pts) {
193
+ if (pts.length &lt; 2) return { x: pts[0].x, y: pts[0].y }
194
+ let totalLen = 0
195
+ for (let i = 0; i &lt; pts.length - 1; i++) {
196
+ totalLen += Math.abs(pts[i + 1].x - pts[i].x) + Math.abs(pts[i + 1].y - pts[i].y)
197
+ }
198
+ let half = totalLen / 2
199
+ let acc = 0
200
+ for (let i = 0; i &lt; pts.length - 1; i++) {
201
+ let segLen = Math.abs(pts[i + 1].x - pts[i].x) + Math.abs(pts[i + 1].y - pts[i].y)
202
+ if (acc + segLen >= half) {
203
+ let ratio = segLen > 0 ? (half - acc) / segLen : 0
204
+ return {
205
+ x: pts[i].x + (pts[i + 1].x - pts[i].x) * ratio,
206
+ y: pts[i].y + (pts[i + 1].y - pts[i].y) * ratio,
207
+ }
208
+ }
209
+ acc += segLen
210
+ }
211
+ return { x: pts[pts.length - 1].x, y: pts[pts.length - 1].y }
212
+ }
213
+ </code></pre>
214
+ </article>
215
+ </section>
216
+
217
+
218
+
219
+
220
+
221
+
222
+ </div>
223
+
224
+ <br class="clear">
225
+
226
+ <footer>
227
+ Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.5</a> on Sun Apr 12 2026 22:18:33 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
228
+ </footer>
229
+
230
+ <script>prettyPrint();</script>
231
+ <script src="scripts/polyfill.js"></script>
232
+ <script src="scripts/linenumber.js"></script>
233
+
234
+
235
+
236
+ </body>
237
+ </html>