npm - w-flow-vue - Versions diffs - 1.0.0 - Mend

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

package/.editorconfig +9 -0
package/.eslintignore +3 -0
package/.eslintrc.js +55 -0
package/.jsdoc +25 -0
package/AGENT.md +223 -0
package/LICENSE +21 -0
package/README.md +37 -0
package/SECURITY.md +5 -0
package/babel.config.js +16 -0
package/dist/w-flow-vue.umd.js +15 -0
package/dist/w-flow-vue.umd.js.map +1 -0
package/docs/components_WFlowVue.vue.html +1214 -0
package/docs/examples/app.html +62 -0
package/docs/examples/app.umd.js +20 -0
package/docs/examples/app.umd.js.map +1 -0
package/docs/examples/ex-AppBasic.html +440 -0
package/docs/examples/ex-AppConnectivity.html +131 -0
package/docs/fonts/Montserrat/Montserrat-Bold.eot +0 -0
package/docs/fonts/Montserrat/Montserrat-Bold.ttf +0 -0
package/docs/fonts/Montserrat/Montserrat-Bold.woff +0 -0
package/docs/fonts/Montserrat/Montserrat-Bold.woff2 +0 -0
package/docs/fonts/Montserrat/Montserrat-Regular.eot +0 -0
package/docs/fonts/Montserrat/Montserrat-Regular.ttf +0 -0
package/docs/fonts/Montserrat/Montserrat-Regular.woff +0 -0
package/docs/fonts/Montserrat/Montserrat-Regular.woff2 +0 -0
package/docs/fonts/Source-Sans-Pro/sourcesanspro-light-webfont.eot +0 -0
package/docs/fonts/Source-Sans-Pro/sourcesanspro-light-webfont.svg +978 -0
package/docs/fonts/Source-Sans-Pro/sourcesanspro-light-webfont.ttf +0 -0
package/docs/fonts/Source-Sans-Pro/sourcesanspro-light-webfont.woff +0 -0
package/docs/fonts/Source-Sans-Pro/sourcesanspro-light-webfont.woff2 +0 -0
package/docs/fonts/Source-Sans-Pro/sourcesanspro-regular-webfont.eot +0 -0
package/docs/fonts/Source-Sans-Pro/sourcesanspro-regular-webfont.svg +1049 -0
package/docs/fonts/Source-Sans-Pro/sourcesanspro-regular-webfont.ttf +0 -0
package/docs/fonts/Source-Sans-Pro/sourcesanspro-regular-webfont.woff +0 -0
package/docs/fonts/Source-Sans-Pro/sourcesanspro-regular-webfont.woff2 +0 -0
package/docs/global.html +1919 -0
package/docs/index.html +84 -0
package/docs/js_defaults.mjs.html +105 -0
package/docs/js_edge-path.mjs.html +237 -0
package/docs/js_geometry.mjs.html +298 -0
package/docs/js_graph.mjs.html +103 -0
package/docs/js_step-routing.mjs.html +346 -0
package/docs/module-WFlowVue.html +2790 -0
package/docs/scripts/collapse.js +39 -0
package/docs/scripts/commonNav.js +28 -0
package/docs/scripts/linenumber.js +25 -0
package/docs/scripts/nav.js +12 -0
package/docs/scripts/polyfill.js +4 -0
package/docs/scripts/prettify/Apache-License-2.0.txt +202 -0
package/docs/scripts/prettify/lang-css.js +2 -0
package/docs/scripts/prettify/prettify.js +28 -0
package/docs/scripts/search.js +99 -0
package/docs/styles/jsdoc.css +776 -0
package/docs/styles/prettify.css +80 -0
package/jest.config.js +20 -0
package/package.json +80 -0
package/public/index.html +38 -0
package/script.txt +22 -0
package/src/App.vue +326 -0
package/src/AppBasic.vue +125 -0
package/src/AppConnectivity.vue +186 -0
package/src/components/WFlowVue.vue +1142 -0
package/src/components/canvas/BackgroundLayer.vue +78 -0
package/src/components/canvas/FlowCanvas.vue +64 -0
package/src/components/canvas/SelectionBox.vue +36 -0
package/src/components/canvas/ViewportTransform.vue +35 -0
package/src/components/edges/ConnectionLine.vue +65 -0
package/src/components/edges/EdgeMarkerDefs.vue +76 -0
package/src/components/edges/EdgeRenderer.vue +120 -0
package/src/components/edges/EdgeWrapper.vue +379 -0
package/src/components/nodes/DefaultNode.vue +276 -0
package/src/components/nodes/Handle.vue +101 -0
package/src/components/nodes/InputNode.vue +47 -0
package/src/components/nodes/NodeBody.vue +103 -0
package/src/components/nodes/NodeFace.vue +128 -0
package/src/components/nodes/NodeRenderer.vue +95 -0
package/src/components/nodes/NodeWrapper.vue +475 -0
package/src/components/nodes/OutputNode.vue +47 -0
package/src/components/ui/ConnSettingsForm.vue +158 -0
package/src/components/ui/Controls.vue +83 -0
package/src/components/ui/NodeSettingsForm.vue +185 -0
package/src/js/defaults.mjs +33 -0
package/src/js/edge-path.mjs +165 -0
package/src/js/geometry.mjs +226 -0
package/src/js/graph.mjs +31 -0
package/src/js/step-routing.mjs +274 -0
package/src/main.js +22 -0
package/test/WFlowVue-features.test.mjs +760 -0
package/test/WFlowVue.test.mjs +421 -0
package/test/components-canvas.test.mjs +102 -0
package/test/components-edge.test.mjs +147 -0
package/test/components-node.test.mjs +174 -0
package/test/components-ui.test.mjs +69 -0
package/test/defaults.test.mjs +86 -0
package/test/edge-path.test.mjs +102 -0
package/test/generate-routing-snapshots.mjs +77 -0
package/test/generate-visual-baselines.mjs +206 -0
package/test/geometry.test.mjs +236 -0
package/test/graph.test.mjs +72 -0
package/test/jsons/routing-snapshots.json +24994 -0
package/test/pics/_check2.png +0 -0
package/test/pics/_check3.png +0 -0
package/test/pics/_check4.png +0 -0
package/test/pics/_check5.png +0 -0
package/test/pics/_v1.png +0 -0
package/test/pics/_v2.png +0 -0
package/test/pics/_v3.png +0 -0
package/test/pics/_v4.png +0 -0
package/test/pics/_v5.png +0 -0
package/test/pics/_v6.png +0 -0
package/test/pics/_v7.png +0 -0
package/test/pics/vb-edge-hovered.png +0 -0
package/test/pics/vb-edges-normal.png +0 -0
package/test/pics/vb-locked-edge-hovered.png +0 -0
package/test/pics/vb-locked-node-hovered.png +0 -0
package/test/pics/vb-locked-node-selected.png +0 -0
package/test/pics/vb-locked-overview.png +0 -0
package/test/pics/vb-node-1.png +0 -0
package/test/pics/vb-node-10.png +0 -0
package/test/pics/vb-node-11.png +0 -0
package/test/pics/vb-node-12.png +0 -0
package/test/pics/vb-node-2.png +0 -0
package/test/pics/vb-node-3.png +0 -0
package/test/pics/vb-node-4.png +0 -0
package/test/pics/vb-node-5.png +0 -0
package/test/pics/vb-node-6.png +0 -0
package/test/pics/vb-node-7.png +0 -0
package/test/pics/vb-node-8.png +0 -0
package/test/pics/vb-node-9.png +0 -0
package/test/pics/vb-node-hovered.png +0 -0
package/test/pics/vb-node-selected.png +0 -0
package/test/pics/vb-overview.png +0 -0
package/test/step-routing-connectivity.test.mjs +78 -0
package/test/step-routing.test.mjs +88 -0
package/test/visual-regression.test.mjs +274 -0
package/toolg/addVersion.mjs +4 -0
package/toolg/cleanFolder.mjs +4 -0
package/toolg/gDistApp.mjs +34 -0
package/toolg/gDistRollupComps.mjs +22 -0
package/toolg/gDocExams.mjs +47 -0
package/toolg/gExtractHtml.mjs +179 -0
package/toolg/modifyReadme.mjs +4 -0
package/vue.config.js +9 -0
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/js_geometry.mjs.html ADDED Viewed

@@ -0,0 +1,298 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>js/geometry.mjs - Documentation</title>
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
+    <script src="scripts/nav.js" defer></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+<input type="checkbox" id="nav-trigger" class="nav-trigger" />
+<label for="nav-trigger" class="navicon-button x">
+  <div class="navicon"></div>
+</label>
+<label for="nav-trigger" class="overlay"></label>
+<nav >
+    <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>
+</nav>
+<div id="main">
+    <h1 class="page-title">js/geometry.mjs</h1>
+    <section>
+        <article>
+            <pre class="prettyprint source linenums"><code>/**
+ * Calculate the absolute position of a handle on the canvas.
+ */
+export function getHandlePosition(node, handlePosition, nodeInternals, handleType) {
+    const internals = nodeInternals || {}
+    const w = (internals.width) || node.width || 150
+    const h = (internals.height) || node.height || 40
+    const x = node.position.x
+    const y = node.position.y
+    const isDiamond = node.shape === 'diamond'
+    const isEllipse = node.shape === 'ellipse'
+    const ns = node.shape
+    const isTriangle = ns === 'triangle' || ns === 'triangle-right' || ns === 'triangle-down' || ns === 'triangle-left'
+    // Check if this is a default node with source and target on the same side
+    const sameSide = node.type === 'basic' &amp;&amp;
+    (node.toPosition || 'bottom') === (node.fromPosition || 'top')
+    let ratio = 0.5
+    if (sameSide &amp;&amp; handleType === 'target') ratio = 0.33
+    if (sameSide &amp;&amp; handleType === 'source') ratio = 0.67
+    // Diamond same-side: position along diamond edges
+    if (isDiamond &amp;&amp; sameSide) {
+        return getDiamondEdgePoint(x, y, w, h, handlePosition, ratio)
+    }
+    // Ellipse: position on the ellipse border
+    if (isEllipse) {
+        return getEllipseEdgePoint(x, y, w, h, handlePosition, ratio)
+    }
+    // Triangle: position on the triangle edges
+    if (isTriangle) {
+        return getTriangleEdgePoint(x, y, w, h, handlePosition, ratio, ns)
+    }
+    switch (handlePosition) {
+    case 'top': return { x: x + w * ratio, y }
+    case 'bottom': return { x: x + w * ratio, y: y + h }
+    case 'left': return { x, y: y + h * ratio }
+    case 'right': return { x: x + w, y: y + h * ratio }
+    default: return { x: x + w / 2, y: y + h }
+    }
+}
+/**
+ * Get a point on the diamond edge for same-side handles.
+ * Each "side" of the diamond is split into two edges meeting at the vertex.
+ * ratio &lt; 0.5: on the first edge, ratio >= 0.5: on the second edge.
+ */
+function getDiamondEdgePoint(x, y, w, h, side, ratio) {
+    let halfW = w / 2
+    let halfH = h / 2
+    switch (side) {
+    case 'top':
+        if (ratio &lt;= 0.5) {
+            let t = ratio * 2
+            return { x: x + t * halfW, y: y + halfH - t * halfH }
+        }
+        else {
+            let t = (ratio - 0.5) * 2
+            return { x: x + halfW + t * halfW, y: y + t * halfH }
+        }
+    case 'bottom':
+        if (ratio &lt;= 0.5) {
+            let t = ratio * 2
+            return { x: x + t * halfW, y: y + halfH + t * halfH }
+        }
+        else {
+            let t = (ratio - 0.5) * 2
+            return { x: x + halfW + t * halfW, y: y + h - t * halfH }
+        }
+    case 'left':
+        if (ratio &lt;= 0.5) {
+            let t = ratio * 2
+            return { x: x + halfW - t * halfW, y: y + t * halfH }
+        }
+        else {
+            let t = (ratio - 0.5) * 2
+            return { x: x + t * halfW, y: y + halfH + t * halfH }
+        }
+    case 'right':
+        if (ratio &lt;= 0.5) {
+            let t = ratio * 2
+            return { x: x + halfW + t * halfW, y: y + t * halfH }
+        }
+        else {
+            let t = (ratio - 0.5) * 2
+            return { x: x + w - t * halfW, y: y + halfH + t * halfH }
+        }
+    default:
+        return { x: x + halfW, y: y + h }
+    }
+}
+/**
+ * Get a point on the ellipse edge for handle positioning.
+ * Maps ratio (0..1) to a parametric angle based on the side.
+ */
+function getEllipseEdgePoint(x, y, w, h, side, ratio) {
+    let cx = x + w / 2
+    let cy = y + h / 2
+    let rx = w / 2
+    let ry = h / 2
+    let angle
+    switch (side) {
+    case 'top':
+        angle = Math.PI * (1 - ratio); break
+    case 'bottom':
+        angle = Math.PI * (ratio - 1); break
+    case 'left':
+        angle = Math.PI * (0.5 + ratio); break
+    case 'right':
+        angle = Math.PI * (0.5 - ratio); break
+    default:
+        angle = 0
+    }
+    return {
+        x: cx + rx * Math.cos(angle),
+        y: cy - ry * Math.sin(angle)
+    }
+}
+/**
+ * Get a point on the triangle edge for handle positioning.
+ * Supports 4 directions: triangle (up), triangle-right, triangle-down, triangle-left.
+ */
+function getTriangleEdgePoint(x, y, w, h, side, ratio, shape) {
+    // Get absolute vertices based on direction
+    let apex, baseA, baseB, apexSide, baseSide, edgeA, edgeB
+    if (shape === 'triangle-right') {
+        apex = { x: x + w, y: y + h / 2 }; baseA = { x, y }; baseB = { x, y: y + h }
+        apexSide = 'right'; baseSide = 'left'; edgeA = 'top'; edgeB = 'bottom'
+    }
+    else if (shape === 'triangle-down') {
+        apex = { x: x + w / 2, y: y + h }; baseA = { x, y }; baseB = { x: x + w, y }
+        apexSide = 'bottom'; baseSide = 'top'; edgeA = 'left'; edgeB = 'right'
+    }
+    else if (shape === 'triangle-left') {
+        apex = { x, y: y + h / 2 }; baseA = { x: x + w, y }; baseB = { x: x + w, y: y + h }
+        apexSide = 'left'; baseSide = 'right'; edgeA = 'top'; edgeB = 'bottom'
+    }
+    else {
+    // triangle (up)
+        apex = { x: x + w / 2, y }; baseA = { x, y: y + h }; baseB = { x: x + w, y: y + h }
+        apexSide = 'top'; baseSide = 'bottom'; edgeA = 'left'; edgeB = 'right'
+    }
+    if (side === apexSide) {
+        if (ratio &lt;= 0.5) {
+            let t = ratio * 2
+            return { x: baseA.x + (apex.x - baseA.x) * t, y: baseA.y + (apex.y - baseA.y) * t }
+        }
+        else {
+            let t2 = (ratio - 0.5) * 2
+            return { x: apex.x + (baseB.x - apex.x) * t2, y: apex.y + (baseB.y - apex.y) * t2 }
+        }
+    }
+    if (side === baseSide) {
+        return { x: baseA.x + (baseB.x - baseA.x) * ratio, y: baseA.y + (baseB.y - baseA.y) * ratio }
+    }
+    if (side === edgeA) {
+        return { x: apex.x + (baseA.x - apex.x) * ratio, y: apex.y + (baseA.y - apex.y) * ratio }
+    }
+    if (side === edgeB) {
+        return { x: apex.x + (baseB.x - apex.x) * ratio, y: apex.y + (baseB.y - apex.y) * ratio }
+    }
+    return { x: x + w / 2, y: y + h / 2 }
+}
+/**
+ * Get all nodes that overlap with a given rectangle.
+ */
+export function getOverlappingNodes(rect, nodes, nodeInternals) {
+    return nodes.filter(node => {
+        const internals = (nodeInternals &amp;&amp; nodeInternals[node.id]) || {}
+        const w = internals.width || node.width || 150
+        const h = internals.height || node.height || 40
+        const nodeRect = {
+            x: node.position.x,
+            y: node.position.y,
+            width: w,
+            height: h,
+        }
+        return rectsOverlap(rect, nodeRect)
+    })
+}
+/**
+ * Check if two rectangles overlap.
+ */
+function rectsOverlap(a, b) {
+    return (
+        a.x &lt; b.x + b.width &amp;&amp;
+    a.x + a.width > b.x &amp;&amp;
+    a.y &lt; b.y + b.height &amp;&amp;
+    a.y + a.height > b.y
+    )
+}
+/**
+ * Clamp a position within a coordinate extent.
+ */
+export function clampPosition(position, extent) {
+    if (!extent) return position
+    return {
+        x: Math.max(extent[0][0], Math.min(extent[1][0], position.x)),
+        y: Math.max(extent[0][1], Math.min(extent[1][1], position.y)),
+    }
+}
+/**
+ * Snap a position to the nearest grid point.
+ * @param {{ x: number, y: number }} position
+ * @param {number|null} gridSize - Grid cell size (single number for both axes)
+ */
+export function snapPosition(position, gridSize) {
+    if (!gridSize) return position
+    return {
+        x: Math.round(position.x / gridSize) * gridSize,
+        y: Math.round(position.y / gridSize) * gridSize,
+    }
+}
+</code></pre>
+        </article>
+    </section>
+</div>
+<br class="clear">
+<footer>
+    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.
+</footer>
+<script>prettyPrint();</script>
+<script src="scripts/polyfill.js"></script>
+<script src="scripts/linenumber.js"></script>
+</body>
+</html>

package/docs/js_graph.mjs.html ADDED Viewed

@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>js/graph.mjs - Documentation</title>
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
+    <script src="scripts/nav.js" defer></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+<input type="checkbox" id="nav-trigger" class="nav-trigger" />
+<label for="nav-trigger" class="navicon-button x">
+  <div class="navicon"></div>
+</label>
+<label for="nav-trigger" class="overlay"></label>
+<nav >
+    <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>
+</nav>
+<div id="main">
+    <h1 class="page-title">js/graph.mjs</h1>
+    <section>
+        <article>
+            <pre class="prettyprint source linenums"><code>/**
+ * Validate a potential connection.
+ */
+export function isValidConnection(connection, nodes, conns, validator) {
+    if (!connection.from || !connection.to) return false
+    // Self-connection not allowed by default
+    if (connection.from === connection.to) return false
+    // Check duplicate (same from→to path)
+    const duplicate = conns.find(
+        e => e.from === connection.from &amp;&amp; e.to === connection.to
+    )
+    if (duplicate) return false
+    // Custom validator
+    if (validator &amp;&amp; !validator(connection)) return false
+    return true
+}
+let _idCounter = 0
+/**
+ * Generate a unique ID.
+ */
+export function generateId() {
+    _idCounter++
+    return `${Date.now()}-${_idCounter}-${Math.random().toString(36).slice(2, 7)}`
+}
+</code></pre>
+        </article>
+    </section>
+</div>
+<br class="clear">
+<footer>
+    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.
+</footer>
+<script>prettyPrint();</script>
+<script src="scripts/polyfill.js"></script>
+<script src="scripts/linenumber.js"></script>
+</body>
+</html>