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/examples/ex-AppBasic.html ADDED Viewed

@@ -0,0 +1,440 @@
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-tw">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+    <meta
+        name="viewport"
+        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"
+    />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>example for AppBasic</title>
+    <!-- @babel/polyfill -->
+    <script
+        nomodule
+        src="https://cdn.jsdelivr.net/npm/@babel/polyfill/dist/polyfill.min.js"
+    ></script>
+    <!-- vue -->
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
+    <!-- extractHtml已自動添加@babel/polyfill與vue -->
+    <!-- fontawesome -->
+    <link
+        href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/css/all.min.css"
+        rel="stylesheet"
+    />
+    <!-- mdi, 各組件使用mdi/js會於轉單頁時改為mdi icon, 故需引用mdi/css -->
+    <link
+        href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css"
+        rel="stylesheet"
+    />
+    <!-- google, 各組件使用mdi/js故不需引用 -->
+    <link
+        _href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
+        rel="stylesheet"
+    />
+    <link
+        _href="https://fonts.googleapis.com/css?family=Material+Icons"
+        rel="stylesheet"
+    />
+    <!-- w-flow-vue -->
+    <script src="https://cdn.jsdelivr.net/npm/w-flow-vue@1.0.0/dist/w-flow-vue.umd.js"></script>
+    <!-- lodash -->
+    <script src="https://cdn.jsdelivr.net/npm/lodash/lodash.min.js"></script>
+    <!-- wsemi -->
+    <script src="https://cdn.jsdelivr.net/npm/wsemi/dist/wsemi.umd.min.js"></script>
+    <!-- w-jsonview-tree -->
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-jsonview-tree@latest/dist/w-jsonview-tree.umd.js"
+    ></script>
+    <script>
+  let jv = window["w-jsonview-tree"];
+    </script>
+    <style>
+  .item-link {
+    display: inline-block;
+    margin: 10px 10px 0px 0px;
+    padding: 5px 10px;
+    font-size: 0.8rem;
+    color: #fff;
+    background-color: #443a65;
+    cursor: pointer;
+    text-decoration: none;
+  }
+  .bkh {
+    /* 寬 */
+    padding: 20px;
+  }
+  @media screen and (max-width: 800px) {
+    /* 中 */
+    .bkh {
+      padding: 10px;
+    }
+  }
+  @media screen and (max-width: 400px) {
+    /* 窄 */
+    .bkh {
+      padding: 5px;
+    }
+  }
+  .bkp {
+    /* 寬 */
+    padding: 0px 20px;
+  }
+  @media screen and (max-width: 800px) {
+    /* 中 */
+    .bkp {
+      padding: 0px 10px;
+    }
+  }
+  @media screen and (max-width: 400px) {
+    /* 窄 */
+    .bkp {
+      padding: 0px 5px;
+    }
+  }
+    </style>
+</head>
+<body
+    style="font-family:'Microsoft JhengHei','Avenir','Helvetica'; padding:0px; margin:0px;"
+>
+    <div id="app" class="bkh" style>
+        <div class="bkh">
+            <div style="font-size:1.5rem;">size</div>
+            <a
+                href="//yuda-lyu.github.io/w-flow-vue/examples/ex-AppBasic.html"
+                target="_blank"
+                class="item-link"
+            >example</a>
+            <a
+                href="//github.com/yuda-lyu/w-flow-vue/blob/master/docs/examples/ex-AppBasic.html"
+                target="_blank"
+                class="item-link"
+            >code</a>
+        </div>
+        <div class="bkp">
+            <div v-if="!loading">
+                <button
+                    style="margin:0px 3px 3px 0px;"
+                    @click="setWidth(800)"
+                >set width to 800</button>
+                <button
+                    style="margin:0px 3px 3px 0px;"
+                    @click="setWidth(300)"
+                >set width to 300</button>
+                <button
+                    style="margin:0px 3px 3px 0px;"
+                    @click="setHeight(600)"
+                >set height to 600</button>
+                <button
+                    style="margin:0px 3px 3px 0px;"
+                    @click="setHeight(300)"
+                >set height to 300</button>
+            </div>
+            <div style="display:flex; padding-bottom:40px; overflow-x:auto;">
+                <div style="position:relative; border:1px solid #ddd;">
+                    <w-flow-vue :opt="opt" @init="loading=false"></w-flow-vue>
+                </div>
+                <div style="padding:0px 20px;">
+                    <div
+                        :style="`border:1px solid #ddd; width:590px; min-width:590px; height:${opt.height}px; overflow-y:auto;`"
+                    >
+                        <div style="padding-left:5px;">
+                            <div id="optjson" style="font-size:10pt;"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+  //install
+  Vue.component("w-flow-vue", window["w-flow-vue"]);
+  //initialize
+  new Vue({
+    el: "#app",
+    data: function() {
+      return {
+        loading: true,
+        opt: {
+          width: 800,
+          height: 600,
+          nodes: [
+            {
+              id: "1",
+              type: "input",
+              name: "資料來源",
+              description: "從外部 API 取得原始資料",
+              position: { x: 260, y: 0 },
+              edgeColor: "#0041d0",
+              width: 100,
+              height: 40
+            },
+            {
+              id: "2",
+              type: "basic",
+              name: "資料驗證",
+              description: "檢查資料格式與完整性",
+              position: { x: 100, y: 120 },
+              width: 100,
+              height: 40
+            },
+            {
+              id: "3",
+              type: "basic",
+              name: "資料轉換",
+              description: "將原始資料轉換為標準格式",
+              position: { x: 400, y: 120 },
+              width: 100,
+              height: 40
+            },
+            {
+              id: "8",
+              type: "basic",
+              name: "條件判斷",
+              description: "根據條件分流處理",
+              position: { x: 100, y: 220 },
+              shape: "diamond",
+              width: 120,
+              height: 80
+            },
+            {
+              id: "4",
+              type: "basic",
+              name: "商業邏輯",
+              description: "執行核心商業規則與計算",
+              position: { x: 80, y: 380 },
+              shape: "ellipse",
+              width: 140,
+              height: 60
+            },
+            {
+              id: "5",
+              type: "basic",
+              name: "資料聚合",
+              description: "合併多個來源的處理結果",
+              position: { x: 280, y: 500 },
+              edgeColor: "#ffa500",
+              edgeWidth: 2,
+              width: 100,
+              height: 40
+            },
+            {
+              id: "6",
+              type: "output",
+              name: "輸出結果",
+              description: "將最終結果寫入資料庫",
+              position: { x: 160, y: 620 },
+              width: 100,
+              height: 40
+            },
+            {
+              id: "7",
+              type: "output",
+              name: "通知服務",
+              description: "發送處理完成通知給相關人員",
+              position: { x: 400, y: 620 },
+              edgeColor: "#ff69b4",
+              width: 100,
+              height: 40
+            },
+            {
+              id: "9",
+              type: "basic",
+              name: "過濾器",
+              description: "過濾不符合條件的資料",
+              position: { x: 620, y: 80 },
+              shape: "triangle",
+              width: 100,
+              height: 80
+            },
+            {
+              id: "10",
+              type: "basic",
+              name: "路由分配",
+              description: "根據規則分配至不同處理管道",
+              position: { x: 620, y: 220 },
+              shape: "triangle-right",
+              width: 100,
+              height: 80
+            },
+            {
+              id: "11",
+              type: "basic",
+              name: "資料壓縮",
+              description: "壓縮資料以減少儲存空間",
+              position: { x: 620, y: 360 },
+              shape: "triangle-down",
+              width: 100,
+              height: 80
+            },
+            {
+              id: "12",
+              type: "basic",
+              name: "快取處理",
+              description: "從快取中讀取或寫入資料",
+              position: { x: 620, y: 500 },
+              shape: "triangle-left",
+              width: 100,
+              height: 80
+            }
+          ],
+          conns: [
+            {
+              id: "e1-2",
+              from: "1",
+              to: "2",
+              type: "bezier",
+              animated: true,
+              name: "原始資料",
+              description: "未經處理的 API 回應"
+            },
+            {
+              id: "e1-3",
+              from: "1",
+              to: "3",
+              type: "bezier",
+              name: "備份資料",
+              description: "同步至轉換流程",
+              markerEnd: "arrowclosed"
+            },
+            {
+              id: "e2-8",
+              from: "2",
+              to: "8",
+              type: "smoothstep",
+              name: "驗證通過",
+              description: "通過格式檢查的資料"
+            },
+            {
+              id: "e8-4",
+              from: "8",
+              to: "4",
+              type: "bezier",
+              name: "條件成立",
+              description: "符合條件進入商業邏輯"
+            },
+            {
+              id: "e8-5",
+              from: "8",
+              to: "5",
+              type: "bezier",
+              name: "條件不成立",
+              description: "不符條件直接聚合"
+            },
+            {
+              id: "e3-5",
+              from: "3",
+              to: "5",
+              type: "step",
+              name: "轉換完成",
+              description: "標準化後的資料"
+            },
+            {
+              id: "e4-5",
+              from: "4",
+              to: "5",
+              type: "bezier",
+              name: "處理結果",
+              description: "商業邏輯計算結果"
+            },
+            {
+              id: "e5-6",
+              from: "5",
+              to: "6",
+              type: "smoothstep",
+              name: "最終資料",
+              description: "聚合後準備寫入的資料"
+            },
+            {
+              id: "e5-7",
+              from: "5",
+              to: "7",
+              type: "bezier",
+              animated: true,
+              name: "觸發通知",
+              description: "處理完成的事件訊號"
+            },
+            {
+              id: "e3-9",
+              from: "3",
+              to: "9",
+              type: "step",
+              name: "轉換副本",
+              description: "備份至過濾流程"
+            },
+            {
+              id: "e9-10",
+              from: "9",
+              to: "10",
+              type: "smoothstep",
+              name: "已過濾",
+              description: "通過過濾條件的資料"
+            },
+            {
+              id: "e10-11",
+              from: "10",
+              to: "11",
+              type: "bezier",
+              name: "管道A",
+              description: "分配至壓縮管道"
+            },
+            {
+              id: "e11-12",
+              from: "11",
+              to: "12",
+              type: "step",
+              name: "已壓縮",
+              description: "壓縮完成的資料"
+            },
+            {
+              id: "e12-7",
+              from: "12",
+              to: "7",
+              type: "bezier",
+              name: "快取完成",
+              description: "快取處理後通知"
+            }
+          ]
+        },
+        action: []
+      };
+    },
+    mounted: function() {
+      let vo = this;
+      vo.showOptJson();
+    },
+    computed: {},
+    methods: {
+      showOptJson: function() {
+        let vo = this;
+        jv(vo.opt, document.querySelector("#optjson"), { expanded: true });
+      },
+      setWidth: function(r) {
+        let vo = this;
+        vo.opt.width = r;
+      },
+      setHeight: function(r) {
+        let vo = this;
+        vo.opt.height = r;
+      }
+    }
+  });
+    </script>
+</body>
+</html>

package/docs/examples/ex-AppConnectivity.html ADDED Viewed

@@ -0,0 +1,131 @@
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-tw">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+    <meta
+        name="viewport"
+        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"
+    />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>example for AppConnectivity</title>
+    <!-- @babel/polyfill -->
+    <script
+        nomodule
+        src="https://cdn.jsdelivr.net/npm/@babel/polyfill/dist/polyfill.min.js"
+    ></script>
+    <!-- vue -->
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
+    <!-- extractHtml已自動添加@babel/polyfill與vue -->
+    <!-- fontawesome -->
+    <link
+        href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/css/all.min.css"
+        rel="stylesheet"
+    />
+    <!-- mdi, 各組件使用mdi/js會於轉單頁時改為mdi icon, 故需引用mdi/css -->
+    <link
+        href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css"
+        rel="stylesheet"
+    />
+    <!-- google, 各組件使用mdi/js故不需引用 -->
+    <link
+        _href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
+        rel="stylesheet"
+    />
+    <link
+        _href="https://fonts.googleapis.com/css?family=Material+Icons"
+        rel="stylesheet"
+    />
+    <!-- w-flow-vue -->
+    <script src="https://cdn.jsdelivr.net/npm/w-flow-vue@1.0.0/dist/w-flow-vue.umd.js"></script>
+    <!-- lodash -->
+    <script src="https://cdn.jsdelivr.net/npm/lodash/lodash.min.js"></script>
+    <!-- wsemi -->
+    <script src="https://cdn.jsdelivr.net/npm/wsemi/dist/wsemi.umd.min.js"></script>
+    <!-- w-jsonview-tree -->
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-jsonview-tree@latest/dist/w-jsonview-tree.umd.js"
+    ></script>
+    <script>
+  let jv = window["w-jsonview-tree"];
+    </script>
+    <style>
+  .item-link {
+    display: inline-block;
+    margin: 10px 10px 0px 0px;
+    padding: 5px 10px;
+    font-size: 0.8rem;
+    color: #fff;
+    background-color: #443a65;
+    cursor: pointer;
+    text-decoration: none;
+  }
+  .bkh {
+    /* 寬 */
+    padding: 20px;
+  }
+  @media screen and (max-width: 800px) {
+    /* 中 */
+    .bkh {
+      padding: 10px;
+    }
+  }
+  @media screen and (max-width: 400px) {
+    /* 窄 */
+    .bkh {
+      padding: 5px;
+    }
+  }
+  .bkp {
+    /* 寬 */
+    padding: 0px 20px;
+  }
+  @media screen and (max-width: 800px) {
+    /* 中 */
+    .bkp {
+      padding: 0px 10px;
+    }
+  }
+  @media screen and (max-width: 400px) {
+    /* 窄 */
+    .bkp {
+      padding: 0px 5px;
+    }
+  }
+    </style>
+</head>
+<body
+    style="font-family:'Microsoft JhengHei','Avenir','Helvetica'; padding:0px; margin:0px;"
+>
+    <div id="app" class="bkh" style></div>
+    <script>
+  //install
+  Vue.component("w-flow-vue", window["w-flow-vue"]);
+  //initialize
+  new Vue({
+    el: "#app",
+    data: function() {
+      return {};
+    },
+    mounted: function() {
+      return {};
+    },
+    computed: {},
+    methods: {}
+  });
+    </script>
+</body>
+</html>