pict-section-flow 1.3.0 → 2.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 (162) hide show
  1. package/package.json +7 -2
  2. package/source/Pict-Section-Flow.js +20 -14
  3. package/source/providers/PictProvider-Flow-Background.js +303 -0
  4. package/source/providers/PictProvider-Flow-CSS.js +99 -7
  5. package/source/providers/PictProvider-Flow-ConnectorShapes.js +8 -0
  6. package/source/providers/PictProvider-Flow-Geometry.js +11 -421
  7. package/source/providers/PictProvider-Flow-Icons.js +20 -0
  8. package/source/providers/PictProvider-Flow-Layouts.js +107 -0
  9. package/source/services/PictService-Flow-ConnectionRenderer.js +77 -5
  10. package/source/services/PictService-Flow-CursorManager.js +113 -0
  11. package/source/services/PictService-Flow-InteractionManager.js +443 -61
  12. package/source/services/PictService-Flow-Layout.js +21 -16
  13. package/source/services/PictService-Flow-PathGenerator.js +30 -417
  14. package/source/services/PictService-Flow-RenderManager.js +9 -1
  15. package/source/services/PictService-Flow-ViewportManager.js +102 -0
  16. package/source/views/PictView-Flow-FloatingToolbar.js +57 -0
  17. package/source/views/PictView-Flow-Node.js +36 -0
  18. package/source/views/PictView-Flow-PropertiesPanel.js +27 -5
  19. package/source/views/PictView-Flow-Toolbar.js +148 -13
  20. package/source/views/PictView-Flow.js +628 -3
  21. package/.claude/launch.json +0 -11
  22. package/docs/.nojekyll +0 -0
  23. package/docs/Architecture.md +0 -163
  24. package/docs/Custom-Styling.md +0 -275
  25. package/docs/Data_Model.md +0 -149
  26. package/docs/Event_System.md +0 -156
  27. package/docs/Getting_Started.md +0 -237
  28. package/docs/Implementation_Reference.md +0 -528
  29. package/docs/Layout_Persistence.md +0 -117
  30. package/docs/README.md +0 -103
  31. package/docs/Theme_Integration.md +0 -150
  32. package/docs/_brand.json +0 -18
  33. package/docs/_cover.md +0 -17
  34. package/docs/_playground.json +0 -24
  35. package/docs/_sidebar.md +0 -57
  36. package/docs/_topbar.md +0 -8
  37. package/docs/_version.json +0 -7
  38. package/docs/api/PictFlowCard.md +0 -216
  39. package/docs/api/PictFlowCardPropertiesPanel.md +0 -235
  40. package/docs/api/addConnection.md +0 -101
  41. package/docs/api/addNode.md +0 -137
  42. package/docs/api/autoLayout.md +0 -77
  43. package/docs/api/getFlowData.md +0 -112
  44. package/docs/api/marshalToView.md +0 -95
  45. package/docs/api/openPanel.md +0 -128
  46. package/docs/api/registerHandler.md +0 -174
  47. package/docs/api/registerNodeType.md +0 -142
  48. package/docs/api/removeConnection.md +0 -57
  49. package/docs/api/removeNode.md +0 -80
  50. package/docs/api/saveLayout.md +0 -152
  51. package/docs/api/screenToSVGCoords.md +0 -68
  52. package/docs/api/selectNode.md +0 -116
  53. package/docs/api/setTheme.md +0 -168
  54. package/docs/api/setZoom.md +0 -97
  55. package/docs/api/toggleFullscreen.md +0 -68
  56. package/docs/card-help/EACH.md +0 -19
  57. package/docs/card-help/FREAD.md +0 -24
  58. package/docs/card-help/FWRITE.md +0 -24
  59. package/docs/card-help/GET.md +0 -22
  60. package/docs/card-help/ITE.md +0 -23
  61. package/docs/card-help/LOG.md +0 -23
  62. package/docs/card-help/NOTE.md +0 -17
  63. package/docs/card-help/PREV.md +0 -18
  64. package/docs/card-help/SET.md +0 -27
  65. package/docs/card-help/SPKL.md +0 -22
  66. package/docs/card-help/STAT.md +0 -23
  67. package/docs/card-help/SW.md +0 -25
  68. package/docs/diagrams/architecture-at-a-glance.excalidraw +0 -4270
  69. package/docs/diagrams/architecture-at-a-glance.mmd +0 -30
  70. package/docs/diagrams/architecture-at-a-glance.svg +0 -2
  71. package/docs/diagrams/data-flow.excalidraw +0 -1451
  72. package/docs/diagrams/data-flow.mmd +0 -17
  73. package/docs/diagrams/data-flow.svg +0 -2
  74. package/docs/diagrams/high-level-design.excalidraw +0 -5767
  75. package/docs/diagrams/high-level-design.mmd +0 -86
  76. package/docs/diagrams/high-level-design.svg +0 -2
  77. package/docs/diagrams/relationships.excalidraw +0 -3852
  78. package/docs/diagrams/relationships.mmd +0 -9
  79. package/docs/diagrams/relationships.svg +0 -2
  80. package/docs/diagrams/service-initialization-sequence.excalidraw +0 -1466
  81. package/docs/diagrams/service-initialization-sequence.mmd +0 -19
  82. package/docs/diagrams/service-initialization-sequence.svg +0 -2
  83. package/docs/diagrams/svg-layer-structure.excalidraw +0 -1060
  84. package/docs/diagrams/svg-layer-structure.mmd +0 -18
  85. package/docs/diagrams/svg-layer-structure.svg +0 -2
  86. package/docs/examples/README.md +0 -9
  87. package/docs/examples/simple_cards/README.md +0 -677
  88. package/docs/examples/simple_cards/css/flowexample.css +0 -65
  89. package/docs/examples/simple_cards/index.html +0 -32
  90. package/docs/examples/simple_cards/js/pict.min.js +0 -12
  91. package/docs/examples/simple_cards/pict-section-flow-example-simple-cards.compatible.min.js +0 -1
  92. package/docs/index.html +0 -38
  93. package/docs/playground/app.json +0 -6
  94. package/docs/playground/appdata.json +0 -85
  95. package/docs/playground/application.js +0 -23
  96. package/docs/playground/pict.json +0 -17
  97. package/docs/playground/runtime/pict-application.min.js +0 -2
  98. package/docs/playground/runtime/pict-section-flow.min.js +0 -2
  99. package/docs/playground/runtime/pict-section-modal.min.js +0 -2
  100. package/docs/playground/runtime/pict.min.js +0 -12
  101. package/docs/retold-catalog.json +0 -244
  102. package/docs/retold-keyword-index.json +0 -26028
  103. package/example_applications/simple_cards/css/flowexample.css +0 -65
  104. package/example_applications/simple_cards/html/index.html +0 -32
  105. package/example_applications/simple_cards/package.json +0 -52
  106. package/example_applications/simple_cards/source/Pict-Application-FlowExample-Configuration.json +0 -15
  107. package/example_applications/simple_cards/source/Pict-Application-FlowExample.js +0 -539
  108. package/example_applications/simple_cards/source/card-help-content.js +0 -16
  109. package/example_applications/simple_cards/source/cards/FlowCard-Comment.js +0 -38
  110. package/example_applications/simple_cards/source/cards/FlowCard-DataPreview.js +0 -44
  111. package/example_applications/simple_cards/source/cards/FlowCard-Each.js +0 -38
  112. package/example_applications/simple_cards/source/cards/FlowCard-FileRead.js +0 -56
  113. package/example_applications/simple_cards/source/cards/FlowCard-FileWrite.js +0 -50
  114. package/example_applications/simple_cards/source/cards/FlowCard-GetValue.js +0 -37
  115. package/example_applications/simple_cards/source/cards/FlowCard-IfThenElse.js +0 -49
  116. package/example_applications/simple_cards/source/cards/FlowCard-LogValues.js +0 -55
  117. package/example_applications/simple_cards/source/cards/FlowCard-SetValue.js +0 -97
  118. package/example_applications/simple_cards/source/cards/FlowCard-Sparkline.js +0 -100
  119. package/example_applications/simple_cards/source/cards/FlowCard-StatusMonitor.js +0 -46
  120. package/example_applications/simple_cards/source/cards/FlowCard-Switch.js +0 -39
  121. package/example_applications/simple_cards/source/providers/PictRouter-FlowExample-Configuration.json +0 -22
  122. package/example_applications/simple_cards/source/sample-flows.js +0 -410
  123. package/example_applications/simple_cards/source/views/PictView-FlowExample-About.js +0 -184
  124. package/example_applications/simple_cards/source/views/PictView-FlowExample-BottomBar.js +0 -77
  125. package/example_applications/simple_cards/source/views/PictView-FlowExample-Documentation.js +0 -325
  126. package/example_applications/simple_cards/source/views/PictView-FlowExample-FileWriteInfo.js +0 -59
  127. package/example_applications/simple_cards/source/views/PictView-FlowExample-Layout.js +0 -90
  128. package/example_applications/simple_cards/source/views/PictView-FlowExample-MainWorkspace.js +0 -453
  129. package/example_applications/simple_cards/source/views/PictView-FlowExample-TopBar.js +0 -95
  130. package/scripts/generate-card-help.js +0 -214
  131. package/source/providers/edges/Edge-Bezier.js +0 -41
  132. package/source/providers/edges/Edge-Orthogonal.js +0 -37
  133. package/source/providers/edges/Edge-OrthogonalSnap.js +0 -72
  134. package/source/providers/edges/Edge-Perimeter-Linear.js +0 -31
  135. package/source/providers/edges/Edge-Perimeter-Orthogonal.js +0 -39
  136. package/source/providers/edges/Edge-Perimeter.js +0 -48
  137. package/source/providers/edges/Edge-PerimeterMath.js +0 -92
  138. package/source/providers/edges/Edge-Straight.js +0 -24
  139. package/source/providers/layouts/Layout-Circular.js +0 -203
  140. package/source/providers/layouts/Layout-Coerce.js +0 -40
  141. package/source/providers/layouts/Layout-Columnar.js +0 -134
  142. package/source/providers/layouts/Layout-Custom.js +0 -27
  143. package/source/providers/layouts/Layout-ForcedFromCenter.js +0 -256
  144. package/source/providers/layouts/Layout-Grid.js +0 -134
  145. package/source/providers/layouts/Layout-Layered.js +0 -155
  146. package/source/providers/layouts/Layout-Rank.js +0 -141
  147. package/source/providers/layouts/Layout-Staggered.js +0 -131
  148. package/source/providers/layouts/Layout-Tabular.js +0 -94
  149. package/test/ConnectionHandleManager_tests.js +0 -717
  150. package/test/ConnectionRenderer_tests.js +0 -591
  151. package/test/DataManager_tests.js +0 -859
  152. package/test/Geometry_tests.js +0 -767
  153. package/test/InteractionManager_tests.js +0 -279
  154. package/test/Layout_tests.js +0 -1604
  155. package/test/NodeView_tests.js +0 -66
  156. package/test/PanelManager_tests.js +0 -172
  157. package/test/PathGenerator_tests.js +0 -978
  158. package/test/PortRenderer_tests.js +0 -376
  159. package/test/RenderManager_tests.js +0 -756
  160. package/test/Renderer_tests.js +0 -133
  161. package/test/SelectionManager_tests.js +0 -185
  162. package/test/StylePresets_tests.js +0 -153
package/example_applications/simple_cards/css/flowexample.css DELETED
@@ -1,65 +0,0 @@
1
- /* ============================================================================
2
- Pict Section Flow Example - Base Styles
3
- ============================================================================ */
4
-
5
- /* Reset and base */
6
- *, *::before, *::after {
7
- box-sizing: border-box;
8
- }
9
-
10
- html, body {
11
- margin: 0;
12
- padding: 0;
13
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
14
- font-size: 16px;
15
- line-height: 1.5;
16
- color: var(--theme-color-text-primary, #333);
17
- background-color: #f5f7fa;
18
- -webkit-font-smoothing: antialiased;
19
- -moz-osx-font-smoothing: grayscale;
20
- }
21
-
22
- /* Typography */
23
- h1, h2, h3, h4, h5, h6 {
24
- margin-top: 0;
25
- line-height: 1.3;
26
- }
27
-
28
- a {
29
- color: #3498db;
30
- text-decoration: none;
31
- }
32
-
33
- a:hover {
34
- color: #2980b9;
35
- }
36
-
37
- /* Application container */
38
- #FlowExample-Application-Container {
39
- min-height: 100vh;
40
- }
41
-
42
- /* Utility: scrollbar styling */
43
- ::-webkit-scrollbar {
44
- width: 8px;
45
- }
46
-
47
- ::-webkit-scrollbar-track {
48
- background: var(--theme-color-background-tertiary, #f1f1f1);
49
- }
50
-
51
- ::-webkit-scrollbar-thumb {
52
- background: #bdc3c7;
53
- border-radius: 4px;
54
- }
55
-
56
- ::-webkit-scrollbar-thumb:hover {
57
- background: #95a5a6;
58
- }
59
-
60
- /* Responsive adjustments */
61
- @media (max-width: 768px) {
62
- html {
63
- font-size: 14px;
64
- }
65
- }
package/example_applications/simple_cards/html/index.html DELETED
@@ -1,32 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7
- <meta name="description" content="Pict Section Flow Example Application">
8
-
9
- <title>Pict Section Flow</title>
10
-
11
- <!-- Application Stylesheet -->
12
- <link href="css/flowexample.css" rel="stylesheet">
13
- <!-- PICT Dynamic View CSS Container -->
14
- <style id="PICT-CSS"></style>
15
-
16
- <!-- Load the PICT library -->
17
- <script src="./js/pict.min.js" type="text/javascript"></script>
18
- <!-- Bootstrap the Application -->
19
- <script type="text/javascript">
20
- //<![CDATA[
21
- Pict.safeOnDocumentReady(() => { Pict.safeLoadPictApplication(PictSectionFlowExampleSimpleCards, 2)});
22
- //]]>
23
- </script>
24
- </head>
25
- <body>
26
- <!-- The root container for the Pict application -->
27
- <div id="FlowExample-Application-Container"></div>
28
-
29
- <!-- Load the FlowExample PICT Application Bundle -->
30
- <script src="./pict-section-flow-example-simple-cards.compatible.min.js" type="text/javascript"></script>
31
- </body>
32
- </html>
package/example_applications/simple_cards/package.json DELETED
@@ -1,52 +0,0 @@
1
- {
2
- "name": "pict-section-flow-example-simple-cards",
3
- "version": "0.0.1",
4
- "description": "Pict Section Flow - Simple Cards Example Application",
5
- "main": "source/Pict-Application-FlowExample.js",
6
- "retold": {
7
- "ExampleApplication": {
8
- "Stage": true,
9
- "Title": "Simple Cards",
10
- "Summary": "Twelve custom PictFlowCard subclasses across six categories — every panel type (Markdown / Template / Form / View), every BodyContent renderer (SVG / HTML / Canvas), wrapped in a multi-page Pict shell with router-driven navigation and a curated sample-graph catalog.",
11
- "Complexity": "Basic"
12
- }
13
- },
14
- "scripts": {
15
- "start": "node source/Pict-Application-FlowExample.js",
16
- "prebuild": "node ../../scripts/generate-card-help.js",
17
- "build": "npx quack build && npx quack copy",
18
- "test": "echo \"Error: no test specified\" && exit 0"
19
- },
20
- "author": "steven velozo <steven@velozo.com>",
21
- "license": "MIT",
22
- "dependencies": {
23
- "pict": "^1.0.343",
24
- "pict-application": "^1.0.28",
25
- "pict-router": "^1.0.4",
26
- "pict-view": "^1.0.64",
27
- "pict-provider": "^1.0.3",
28
- "pict-section-content": "^0.0.6",
29
- "pict-section-form": "^1.0.192",
30
- "pict-section-flow": "^1.0.1"
31
- },
32
- "devDependencies": {
33
- "quackage": "^1.0.58"
34
- },
35
- "copyFilesSettings": {
36
- "whenFileExists": "overwrite"
37
- },
38
- "copyFiles": [
39
- {
40
- "from": "./html/*",
41
- "to": "./dist/"
42
- },
43
- {
44
- "from": "./css/**",
45
- "to": "./dist/css/"
46
- },
47
- {
48
- "from": "./node_modules/pict/dist/*",
49
- "to": "./dist/js/"
50
- }
51
- ]
52
- }
package/example_applications/simple_cards/source/Pict-Application-FlowExample-Configuration.json DELETED
@@ -1,15 +0,0 @@
1
- {
2
- "Name": "Pict Section Flow Example",
3
- "Hash": "FlowExample",
4
-
5
- "MainViewportViewIdentifier": "FlowExample-Layout",
6
-
7
- "AutoSolveAfterInitialize": true,
8
- "AutoRenderMainViewportViewAfterInitialize": false,
9
- "AutoRenderViewsAfterInitialize": false,
10
-
11
- "pict_configuration":
12
- {
13
- "Product": "FlowExample-Pict-Application"
14
- }
15
- }
package/example_applications/simple_cards/source/Pict-Application-FlowExample.js DELETED
@@ -1,539 +0,0 @@
1
- const libPictApplication = require('pict-application');
2
- const libPictRouter = require('pict-router');
3
- const libPictSectionForm = require('pict-section-form');
4
- const libPictSectionContent = require('pict-section-content');
5
-
6
- // Views
7
- const libViewLayout = require('./views/PictView-FlowExample-Layout.js');
8
- const libViewTopBar = require('./views/PictView-FlowExample-TopBar.js');
9
- const libViewBottomBar = require('./views/PictView-FlowExample-BottomBar.js');
10
- const libViewMainWorkspace = require('./views/PictView-FlowExample-MainWorkspace.js');
11
- const libViewAbout = require('./views/PictView-FlowExample-About.js');
12
- const libViewDocumentation = require('./views/PictView-FlowExample-Documentation.js');
13
- const libViewFileWriteInfo = require('./views/PictView-FlowExample-FileWriteInfo.js');
14
-
15
- class FlowExampleApplication extends libPictApplication
16
- {
17
- constructor(pFable, pOptions, pServiceHash)
18
- {
19
- super(pFable, pOptions, pServiceHash);
20
-
21
- // Add the router provider with routes
22
- this.pict.addProvider('PictRouter', require('./providers/PictRouter-FlowExample-Configuration.json'), libPictRouter);
23
-
24
- // Add the layout view (the shell that contains top bar, workspace, bottom bar)
25
- this.pict.addView('FlowExample-Layout', libViewLayout.default_configuration, libViewLayout);
26
-
27
- // Add the top bar and bottom bar views
28
- this.pict.addView('FlowExample-TopBar', libViewTopBar.default_configuration, libViewTopBar);
29
- this.pict.addView('FlowExample-BottomBar', libViewBottomBar.default_configuration, libViewBottomBar);
30
-
31
- // Add the main content workspace view
32
- this.pict.addView('FlowExample-MainWorkspace', libViewMainWorkspace.default_configuration, libViewMainWorkspace);
33
-
34
- // Add the about page view
35
- this.pict.addView('FlowExample-About', libViewAbout.default_configuration, libViewAbout);
36
-
37
- // Add the documentation page view
38
- this.pict.addView('FlowExample-Documentation', libViewDocumentation.default_configuration, libViewDocumentation);
39
-
40
- // Add the file write info view (used by the View panel type example)
41
- this.pict.addView('FlowExample-FileWriteInfo', libViewFileWriteInfo.default_configuration, libViewFileWriteInfo);
42
-
43
- // Register pict-section-form service types so Form panels can use them
44
- this.pict.addServiceType('PictFormMetacontroller', libPictSectionForm.PictFormMetacontroller);
45
-
46
- // Register pict-section-content service types so Markdown panels can render content
47
- this.pict.addServiceType('PictContentProvider', libPictSectionContent.PictContentProvider);
48
- }
49
-
50
- onAfterInitializeAsync(fCallback)
51
- {
52
- // Initialize application state
53
- this.pict.AppData.FlowExample =
54
- {
55
- CurrentRoute: 'home'
56
- };
57
-
58
- // Initialize sample flow data using FlowCard types.
59
- // Includes one of every node type for easy smoke testing:
60
- // start, FREAD, ITE, EACH, GET, SET, SW, LOG (x2), FWRITE, end
61
- this.pict.AppData.FlowExample.SampleFlow =
62
- {
63
- Nodes:
64
- [
65
- // ── Entry ──────────────────────────────────────────────
66
- {
67
- Hash: 'node-start',
68
- Type: 'start',
69
- X: 50,
70
- Y: 180,
71
- Width: 140,
72
- Height: 80,
73
- Title: 'Start',
74
- Ports:
75
- [
76
- { Hash: 'port-start-out', Direction: 'output', Side: 'right', Label: 'Out' }
77
- ],
78
- Data: {}
79
- },
80
- // ── I/O: File Read (Template panel) ────────────────────
81
- {
82
- Hash: 'node-fread',
83
- Type: 'FREAD',
84
- X: 270,
85
- Y: 160,
86
- Width: 180,
87
- Height: 80,
88
- Title: 'Read Config',
89
- Ports:
90
- [
91
- { Hash: 'port-fread-in', Direction: 'input', Side: 'left', Label: 'Path' },
92
- { Hash: 'port-fread-data', Direction: 'output', Side: 'right', Label: 'Data' },
93
- { Hash: 'port-fread-err', Direction: 'output', Side: 'bottom', Label: 'Error' }
94
- ],
95
- Data: {}
96
- },
97
- // ── Control: If-Then-Else (Markdown panel) ─────────────
98
- {
99
- Hash: 'node-check',
100
- Type: 'ITE',
101
- X: 530,
102
- Y: 140,
103
- Width: 200,
104
- Height: 100,
105
- Title: 'Has Items?',
106
- Ports:
107
- [
108
- { Hash: 'port-check-in', Direction: 'input', Side: 'left', Label: 'In' },
109
- { Hash: 'port-check-then', Direction: 'output', Side: 'right', Label: 'Then' },
110
- { Hash: 'port-check-else', Direction: 'output', Side: 'bottom', Label: 'Else' }
111
- ],
112
- Data: {}
113
- },
114
- // ── Control: Each (no panel) ───────────────────────────
115
- {
116
- Hash: 'node-each',
117
- Type: 'EACH',
118
- X: 810,
119
- Y: 120,
120
- Width: 200,
121
- Height: 100,
122
- Title: 'Process Items',
123
- Ports:
124
- [
125
- { Hash: 'port-each-in', Direction: 'input', Side: 'left', Label: 'Collection' },
126
- { Hash: 'port-each-item', Direction: 'output', Side: 'right', Label: 'Item' },
127
- { Hash: 'port-each-done', Direction: 'output', Side: 'bottom', Label: 'Done' }
128
- ],
129
- Data: {}
130
- },
131
- // ── Data: Get Value (no panel) ─────────────────────────
132
- {
133
- Hash: 'node-get',
134
- Type: 'GET',
135
- X: 1090,
136
- Y: 110,
137
- Width: 170,
138
- Height: 80,
139
- Title: 'Read Item',
140
- Ports:
141
- [
142
- { Hash: 'port-get-in', Direction: 'input', Side: 'left', Label: 'In' },
143
- { Hash: 'port-get-value', Direction: 'output', Side: 'right', Label: 'Value' }
144
- ],
145
- Data: {}
146
- },
147
- // ── Data: Set Value (Form panel) ───────────────────────
148
- {
149
- Hash: 'node-set',
150
- Type: 'SET',
151
- X: 1340,
152
- Y: 110,
153
- Width: 170,
154
- Height: 80,
155
- Title: 'Transform',
156
- Ports:
157
- [
158
- { Hash: 'port-set-in', Direction: 'input', Side: 'left', Label: 'In' },
159
- { Hash: 'port-set-out', Direction: 'output', Side: 'right', Label: 'Out' }
160
- ],
161
- Data: {}
162
- },
163
- // ── Control: Switch (no panel) ─────────────────────────
164
- {
165
- Hash: 'node-switch',
166
- Type: 'SW',
167
- X: 1590,
168
- Y: 100,
169
- Width: 200,
170
- Height: 120,
171
- Title: 'Route Output',
172
- Ports:
173
- [
174
- { Hash: 'port-sw-in', Direction: 'input', Side: 'left', Label: 'In' },
175
- { Hash: 'port-sw-a', Direction: 'output', Side: 'right', Label: 'Case A' },
176
- { Hash: 'port-sw-b', Direction: 'output', Side: 'right', Label: 'Case B' },
177
- { Hash: 'port-sw-default', Direction: 'output', Side: 'bottom', Label: 'Default' }
178
- ],
179
- Data: {}
180
- },
181
- // ── Debug: Log Values (Template panel) ─────────────────
182
- {
183
- Hash: 'node-log',
184
- Type: 'LOG',
185
- X: 1590,
186
- Y: 310,
187
- Width: 160,
188
- Height: 80,
189
- Title: 'Log Results',
190
- Ports:
191
- [
192
- { Hash: 'port-log-in', Direction: 'input', Side: 'left', Label: 'Values' },
193
- { Hash: 'port-log-out', Direction: 'output', Side: 'right', Label: 'Pass' }
194
- ],
195
- Data: {}
196
- },
197
- // ── I/O: File Write (View panel) ───────────────────────
198
- {
199
- Hash: 'node-fwrite',
200
- Type: 'FWRITE',
201
- X: 1870,
202
- Y: 160,
203
- Width: 180,
204
- Height: 80,
205
- Title: 'Write Output',
206
- Ports:
207
- [
208
- { Hash: 'port-fwrite-path', Direction: 'input', Side: 'left', Label: 'Path' },
209
- { Hash: 'port-fwrite-data', Direction: 'input', Side: 'left', Label: 'Data' },
210
- { Hash: 'port-fwrite-done', Direction: 'output', Side: 'right', Label: 'Done' },
211
- { Hash: 'port-fwrite-err', Direction: 'output', Side: 'bottom', Label: 'Error' }
212
- ],
213
- Data: {}
214
- },
215
- // ── Exit ───────────────────────────────────────────────
216
- {
217
- Hash: 'node-end',
218
- Type: 'end',
219
- X: 2130,
220
- Y: 180,
221
- Width: 140,
222
- Height: 80,
223
- Title: 'End',
224
- Ports:
225
- [
226
- { Hash: 'port-end-in', Direction: 'input', Side: 'left', Label: 'In' }
227
- ],
228
- Data: {}
229
- },
230
- // ── Debug: Log Error (Template panel, error branch) ────
231
- {
232
- Hash: 'node-log-err',
233
- Type: 'LOG',
234
- X: 530,
235
- Y: 380,
236
- Width: 160,
237
- Height: 80,
238
- Title: 'Log Error',
239
- Ports:
240
- [
241
- { Hash: 'port-logerr-in', Direction: 'input', Side: 'left', Label: 'Values' },
242
- { Hash: 'port-logerr-out', Direction: 'output', Side: 'right', Label: 'Pass' }
243
- ],
244
- Data: {}
245
- },
246
- // ── Halt: premature termination on write error ────
247
- {
248
- Hash: 'node-halt',
249
- Type: 'halt',
250
- X: 1870,
251
- Y: 380,
252
- Width: 140,
253
- Height: 80,
254
- Title: 'Halt',
255
- Ports:
256
- [
257
- { Hash: 'port-halt-in', Direction: 'input', Side: 'left', Label: 'In' }
258
- ],
259
- Data: {}
260
- },
261
- // ── Body Content Examples ──────────────────────────
262
- // SVG body: Status Monitor
263
- {
264
- Hash: 'node-status',
265
- Type: 'STAT',
266
- X: 50,
267
- Y: 530,
268
- Width: 200,
269
- Height: 110,
270
- Title: 'Service Health',
271
- Ports:
272
- [
273
- { Hash: 'port-stat-in', Direction: 'input', Side: 'left', Label: 'Check' },
274
- { Hash: 'port-stat-ok', Direction: 'output', Side: 'right', Label: 'Healthy' },
275
- { Hash: 'port-stat-warn', Direction: 'output', Side: 'bottom', Label: 'Degraded' }
276
- ],
277
- Data: {}
278
- },
279
- // HTML body: Data Preview
280
- {
281
- Hash: 'node-preview',
282
- Type: 'PREV',
283
- X: 340,
284
- Y: 530,
285
- Width: 200,
286
- Height: 120,
287
- Title: 'Inspect Payload',
288
- Ports:
289
- [
290
- { Hash: 'port-prev-in', Direction: 'input', Side: 'left', Label: 'Data' },
291
- { Hash: 'port-prev-out', Direction: 'output', Side: 'right', Label: 'Pass' }
292
- ],
293
- Data: {}
294
- },
295
- // Canvas body: Sparkline
296
- {
297
- Hash: 'node-spark',
298
- Type: 'SPKL',
299
- X: 630,
300
- Y: 530,
301
- Width: 220,
302
- Height: 110,
303
- Title: 'Throughput',
304
- Ports:
305
- [
306
- { Hash: 'port-spark-in', Direction: 'input', Side: 'left', Label: 'Values' },
307
- { Hash: 'port-spark-out', Direction: 'output', Side: 'right', Label: 'Stats' }
308
- ],
309
- Data: {}
310
- },
311
- // HTML body (template): Comment
312
- {
313
- Hash: 'node-comment',
314
- Type: 'NOTE',
315
- X: 940,
316
- Y: 540,
317
- Width: 180,
318
- Height: 100,
319
- Title: 'Note',
320
- Ports: [],
321
- Data: { NoteText: 'These four cards demonstrate the three BodyContent renderer types: SVG, HTML, and Canvas.' }
322
- }
323
- ],
324
- Connections:
325
- [
326
- // Main flow: Start → Read Config
327
- {
328
- Hash: 'conn-1',
329
- SourceNodeHash: 'node-start',
330
- SourcePortHash: 'port-start-out',
331
- TargetNodeHash: 'node-fread',
332
- TargetPortHash: 'port-fread-in',
333
- Data: {}
334
- },
335
- // Read Config → Has Items?
336
- {
337
- Hash: 'conn-2',
338
- SourceNodeHash: 'node-fread',
339
- SourcePortHash: 'port-fread-data',
340
- TargetNodeHash: 'node-check',
341
- TargetPortHash: 'port-check-in',
342
- Data: {}
343
- },
344
- // Has Items? (Then) → Process Items
345
- {
346
- Hash: 'conn-3',
347
- SourceNodeHash: 'node-check',
348
- SourcePortHash: 'port-check-then',
349
- TargetNodeHash: 'node-each',
350
- TargetPortHash: 'port-each-in',
351
- Data: {}
352
- },
353
- // Process Items (Item) → Read Item (GET)
354
- {
355
- Hash: 'conn-4',
356
- SourceNodeHash: 'node-each',
357
- SourcePortHash: 'port-each-item',
358
- TargetNodeHash: 'node-get',
359
- TargetPortHash: 'port-get-in',
360
- Data: {}
361
- },
362
- // Read Item (GET) → Transform (SET)
363
- {
364
- Hash: 'conn-5',
365
- SourceNodeHash: 'node-get',
366
- SourcePortHash: 'port-get-value',
367
- TargetNodeHash: 'node-set',
368
- TargetPortHash: 'port-set-in',
369
- Data: {}
370
- },
371
- // Transform (SET) → Route Output (SW)
372
- {
373
- Hash: 'conn-6',
374
- SourceNodeHash: 'node-set',
375
- SourcePortHash: 'port-set-out',
376
- TargetNodeHash: 'node-switch',
377
- TargetPortHash: 'port-sw-in',
378
- Data: {}
379
- },
380
- // Route Output (SW Case A) → Write Output (data)
381
- {
382
- Hash: 'conn-7',
383
- SourceNodeHash: 'node-switch',
384
- SourcePortHash: 'port-sw-a',
385
- TargetNodeHash: 'node-fwrite',
386
- TargetPortHash: 'port-fwrite-data',
387
- Data: {}
388
- },
389
- // Route Output (SW Case B) → Log Results
390
- {
391
- Hash: 'conn-8',
392
- SourceNodeHash: 'node-switch',
393
- SourcePortHash: 'port-sw-b',
394
- TargetNodeHash: 'node-log',
395
- TargetPortHash: 'port-log-in',
396
- Data: {}
397
- },
398
- // Route Output (SW Default) → Log Error
399
- {
400
- Hash: 'conn-9',
401
- SourceNodeHash: 'node-switch',
402
- SourcePortHash: 'port-sw-default',
403
- TargetNodeHash: 'node-log-err',
404
- TargetPortHash: 'port-logerr-in',
405
- Data: {}
406
- },
407
- // Process Items (Done) → Log Results
408
- {
409
- Hash: 'conn-10',
410
- SourceNodeHash: 'node-each',
411
- SourcePortHash: 'port-each-done',
412
- TargetNodeHash: 'node-log',
413
- TargetPortHash: 'port-log-in',
414
- Data: {}
415
- },
416
- // Log Results → Write Output (path)
417
- {
418
- Hash: 'conn-11',
419
- SourceNodeHash: 'node-log',
420
- SourcePortHash: 'port-log-out',
421
- TargetNodeHash: 'node-fwrite',
422
- TargetPortHash: 'port-fwrite-path',
423
- Data: {}
424
- },
425
- // Write Output → End
426
- {
427
- Hash: 'conn-12',
428
- SourceNodeHash: 'node-fwrite',
429
- SourcePortHash: 'port-fwrite-done',
430
- TargetNodeHash: 'node-end',
431
- TargetPortHash: 'port-end-in',
432
- Data: {}
433
- },
434
- // Error branch: Read Config (Error) → Log Error
435
- {
436
- Hash: 'conn-13',
437
- SourceNodeHash: 'node-fread',
438
- SourcePortHash: 'port-fread-err',
439
- TargetNodeHash: 'node-log-err',
440
- TargetPortHash: 'port-logerr-in',
441
- Data: {}
442
- },
443
- // Error branch: Has Items? (Else) → Log Error
444
- {
445
- Hash: 'conn-14',
446
- SourceNodeHash: 'node-check',
447
- SourcePortHash: 'port-check-else',
448
- TargetNodeHash: 'node-log-err',
449
- TargetPortHash: 'port-logerr-in',
450
- Data: {}
451
- },
452
- // Error branch: Log Error → End
453
- {
454
- Hash: 'conn-15',
455
- SourceNodeHash: 'node-log-err',
456
- SourcePortHash: 'port-logerr-out',
457
- TargetNodeHash: 'node-end',
458
- TargetPortHash: 'port-end-in',
459
- Data: {}
460
- },
461
- // Write error → Halt
462
- {
463
- Hash: 'conn-16',
464
- SourceNodeHash: 'node-fwrite',
465
- SourcePortHash: 'port-fwrite-err',
466
- TargetNodeHash: 'node-halt',
467
- TargetPortHash: 'port-halt-in',
468
- Data: {}
469
- },
470
- // ── Body Content example connections ────────────────
471
- // Service Health → Inspect Payload
472
- {
473
- Hash: 'conn-17',
474
- SourceNodeHash: 'node-status',
475
- SourcePortHash: 'port-stat-ok',
476
- TargetNodeHash: 'node-preview',
477
- TargetPortHash: 'port-prev-in',
478
- Data: {}
479
- },
480
- // Inspect Payload → Throughput
481
- {
482
- Hash: 'conn-18',
483
- SourceNodeHash: 'node-preview',
484
- SourcePortHash: 'port-prev-out',
485
- TargetNodeHash: 'node-spark',
486
- TargetPortHash: 'port-spark-in',
487
- Data: {}
488
- }
489
- ],
490
- ViewState:
491
- {
492
- PanX: 0,
493
- PanY: 0,
494
- Zoom: 1,
495
- SelectedNodeHash: null,
496
- SelectedConnectionHash: null
497
- }
498
- };
499
-
500
- // Render the layout shell first, then the initial content
501
- this.pict.views['FlowExample-Layout'].render();
502
-
503
- return super.onAfterInitializeAsync(fCallback);
504
- }
505
-
506
- /**
507
- * Navigate to a route using the pict-router.
508
- *
509
- * @param {string} pRoute - The route path to navigate to (e.g. '/About')
510
- */
511
- navigateTo(pRoute)
512
- {
513
- this.pict.providers.PictRouter.navigate(pRoute);
514
- }
515
-
516
- /**
517
- * Render a specific content view into the main workspace area.
518
- * This is called by the router when a route is matched.
519
- *
520
- * @param {string} pViewIdentifier - The view identifier to render
521
- */
522
- showView(pViewIdentifier)
523
- {
524
- if (pViewIdentifier in this.pict.views)
525
- {
526
- this.pict.AppData.FlowExample.CurrentRoute = pViewIdentifier;
527
- this.pict.views[pViewIdentifier].render();
528
- }
529
- else
530
- {
531
- this.pict.log.warn(`View [${pViewIdentifier}] not found; falling back to main workspace.`);
532
- this.pict.views['FlowExample-MainWorkspace'].render();
533
- }
534
- }
535
- }
536
-
537
- module.exports = FlowExampleApplication;
538
-
539
- module.exports.default_configuration = require('./Pict-Application-FlowExample-Configuration.json');