pict-section-flow 1.4.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 (164) 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 +73 -7
  5. package/source/providers/PictProvider-Flow-Geometry.js +11 -421
  6. package/source/providers/PictProvider-Flow-Icons.js +12 -0
  7. package/source/providers/PictProvider-Flow-Layouts.js +107 -0
  8. package/source/services/PictService-Flow-ConnectionRenderer.js +1 -1
  9. package/source/services/PictService-Flow-CursorManager.js +113 -0
  10. package/source/services/PictService-Flow-InteractionManager.js +439 -59
  11. package/source/services/PictService-Flow-Layout.js +21 -16
  12. package/source/services/PictService-Flow-PathGenerator.js +30 -417
  13. package/source/services/PictService-Flow-RenderManager.js +9 -1
  14. package/source/services/PictService-Flow-ViewportManager.js +102 -0
  15. package/source/views/PictView-Flow-FloatingToolbar.js +5 -1
  16. package/source/views/PictView-Flow-Node.js +29 -0
  17. package/source/views/PictView-Flow-Toolbar.js +50 -3
  18. package/source/views/PictView-Flow.js +591 -2
  19. package/.claude/launch.json +0 -11
  20. package/docs/.nojekyll +0 -0
  21. package/docs/Architecture.md +0 -163
  22. package/docs/Custom-Styling.md +0 -275
  23. package/docs/Data_Model.md +0 -149
  24. package/docs/Event_System.md +0 -156
  25. package/docs/Getting_Started.md +0 -237
  26. package/docs/Implementation_Reference.md +0 -528
  27. package/docs/Layout_Persistence.md +0 -117
  28. package/docs/README.md +0 -103
  29. package/docs/Theme_Integration.md +0 -150
  30. package/docs/_brand.json +0 -18
  31. package/docs/_cover.md +0 -17
  32. package/docs/_playground.json +0 -24
  33. package/docs/_sidebar.md +0 -57
  34. package/docs/_topbar.md +0 -8
  35. package/docs/_version.json +0 -7
  36. package/docs/api/PictFlowCard.md +0 -216
  37. package/docs/api/PictFlowCardPropertiesPanel.md +0 -235
  38. package/docs/api/addConnection.md +0 -101
  39. package/docs/api/addNode.md +0 -137
  40. package/docs/api/autoLayout.md +0 -77
  41. package/docs/api/getFlowData.md +0 -112
  42. package/docs/api/marshalToView.md +0 -95
  43. package/docs/api/openPanel.md +0 -128
  44. package/docs/api/registerHandler.md +0 -174
  45. package/docs/api/registerNodeType.md +0 -142
  46. package/docs/api/removeConnection.md +0 -57
  47. package/docs/api/removeNode.md +0 -80
  48. package/docs/api/saveLayout.md +0 -152
  49. package/docs/api/screenToSVGCoords.md +0 -68
  50. package/docs/api/selectNode.md +0 -116
  51. package/docs/api/setTheme.md +0 -168
  52. package/docs/api/setZoom.md +0 -97
  53. package/docs/api/toggleFullscreen.md +0 -68
  54. package/docs/card-help/EACH.md +0 -19
  55. package/docs/card-help/FREAD.md +0 -24
  56. package/docs/card-help/FWRITE.md +0 -24
  57. package/docs/card-help/GET.md +0 -22
  58. package/docs/card-help/ITE.md +0 -23
  59. package/docs/card-help/LOG.md +0 -23
  60. package/docs/card-help/NOTE.md +0 -17
  61. package/docs/card-help/PREV.md +0 -18
  62. package/docs/card-help/SET.md +0 -27
  63. package/docs/card-help/SPKL.md +0 -22
  64. package/docs/card-help/STAT.md +0 -23
  65. package/docs/card-help/SW.md +0 -25
  66. package/docs/diagrams/architecture-at-a-glance.excalidraw +0 -4270
  67. package/docs/diagrams/architecture-at-a-glance.mmd +0 -30
  68. package/docs/diagrams/architecture-at-a-glance.svg +0 -2
  69. package/docs/diagrams/data-flow.excalidraw +0 -1451
  70. package/docs/diagrams/data-flow.mmd +0 -17
  71. package/docs/diagrams/data-flow.svg +0 -2
  72. package/docs/diagrams/high-level-design.excalidraw +0 -5767
  73. package/docs/diagrams/high-level-design.mmd +0 -86
  74. package/docs/diagrams/high-level-design.svg +0 -2
  75. package/docs/diagrams/relationships.excalidraw +0 -3852
  76. package/docs/diagrams/relationships.mmd +0 -9
  77. package/docs/diagrams/relationships.svg +0 -2
  78. package/docs/diagrams/service-initialization-sequence.excalidraw +0 -1466
  79. package/docs/diagrams/service-initialization-sequence.mmd +0 -19
  80. package/docs/diagrams/service-initialization-sequence.svg +0 -2
  81. package/docs/diagrams/svg-layer-structure.excalidraw +0 -1060
  82. package/docs/diagrams/svg-layer-structure.mmd +0 -18
  83. package/docs/diagrams/svg-layer-structure.svg +0 -2
  84. package/docs/examples/README.md +0 -9
  85. package/docs/examples/simple_cards/README.md +0 -677
  86. package/docs/examples/simple_cards/css/flowexample.css +0 -65
  87. package/docs/examples/simple_cards/index.html +0 -32
  88. package/docs/examples/simple_cards/js/pict.min.js +0 -12
  89. package/docs/examples/simple_cards/pict-section-flow-example-simple-cards.compatible.min.js +0 -1
  90. package/docs/index.html +0 -38
  91. package/docs/playground/app.json +0 -6
  92. package/docs/playground/appdata.json +0 -85
  93. package/docs/playground/application.js +0 -23
  94. package/docs/playground/pict.json +0 -17
  95. package/docs/playground/runtime/pict-application.min.js +0 -2
  96. package/docs/playground/runtime/pict-section-flow.min.js +0 -2
  97. package/docs/playground/runtime/pict-section-modal.min.js +0 -2
  98. package/docs/playground/runtime/pict.min.js +0 -12
  99. package/docs/retold-catalog.json +0 -244
  100. package/docs/retold-keyword-index.json +0 -26028
  101. package/example_applications/simple_cards/css/flowexample.css +0 -65
  102. package/example_applications/simple_cards/html/index.html +0 -32
  103. package/example_applications/simple_cards/package.json +0 -52
  104. package/example_applications/simple_cards/source/Pict-Application-FlowExample-Configuration.json +0 -15
  105. package/example_applications/simple_cards/source/Pict-Application-FlowExample.js +0 -539
  106. package/example_applications/simple_cards/source/card-help-content.js +0 -16
  107. package/example_applications/simple_cards/source/cards/FlowCard-Comment.js +0 -38
  108. package/example_applications/simple_cards/source/cards/FlowCard-DataPreview.js +0 -44
  109. package/example_applications/simple_cards/source/cards/FlowCard-Each.js +0 -38
  110. package/example_applications/simple_cards/source/cards/FlowCard-FileRead.js +0 -56
  111. package/example_applications/simple_cards/source/cards/FlowCard-FileWrite.js +0 -50
  112. package/example_applications/simple_cards/source/cards/FlowCard-GetValue.js +0 -37
  113. package/example_applications/simple_cards/source/cards/FlowCard-IfThenElse.js +0 -49
  114. package/example_applications/simple_cards/source/cards/FlowCard-LogValues.js +0 -55
  115. package/example_applications/simple_cards/source/cards/FlowCard-SetValue.js +0 -97
  116. package/example_applications/simple_cards/source/cards/FlowCard-Sparkline.js +0 -100
  117. package/example_applications/simple_cards/source/cards/FlowCard-StatusMonitor.js +0 -46
  118. package/example_applications/simple_cards/source/cards/FlowCard-Switch.js +0 -39
  119. package/example_applications/simple_cards/source/providers/PictRouter-FlowExample-Configuration.json +0 -22
  120. package/example_applications/simple_cards/source/sample-flows.js +0 -410
  121. package/example_applications/simple_cards/source/views/PictView-FlowExample-About.js +0 -184
  122. package/example_applications/simple_cards/source/views/PictView-FlowExample-BottomBar.js +0 -77
  123. package/example_applications/simple_cards/source/views/PictView-FlowExample-Documentation.js +0 -325
  124. package/example_applications/simple_cards/source/views/PictView-FlowExample-FileWriteInfo.js +0 -59
  125. package/example_applications/simple_cards/source/views/PictView-FlowExample-Layout.js +0 -90
  126. package/example_applications/simple_cards/source/views/PictView-FlowExample-MainWorkspace.js +0 -453
  127. package/example_applications/simple_cards/source/views/PictView-FlowExample-TopBar.js +0 -95
  128. package/scripts/generate-card-help.js +0 -214
  129. package/source/providers/edges/Edge-Bezier.js +0 -41
  130. package/source/providers/edges/Edge-Orthogonal.js +0 -37
  131. package/source/providers/edges/Edge-OrthogonalSnap.js +0 -72
  132. package/source/providers/edges/Edge-Perimeter-Linear.js +0 -31
  133. package/source/providers/edges/Edge-Perimeter-Orthogonal.js +0 -39
  134. package/source/providers/edges/Edge-Perimeter.js +0 -48
  135. package/source/providers/edges/Edge-PerimeterMath.js +0 -92
  136. package/source/providers/edges/Edge-Straight.js +0 -24
  137. package/source/providers/layouts/Layout-Circular.js +0 -203
  138. package/source/providers/layouts/Layout-Coerce.js +0 -40
  139. package/source/providers/layouts/Layout-Columnar.js +0 -134
  140. package/source/providers/layouts/Layout-Custom.js +0 -27
  141. package/source/providers/layouts/Layout-ForcedFromCenter.js +0 -256
  142. package/source/providers/layouts/Layout-Grid.js +0 -134
  143. package/source/providers/layouts/Layout-Layered.js +0 -155
  144. package/source/providers/layouts/Layout-Rank.js +0 -141
  145. package/source/providers/layouts/Layout-Staggered.js +0 -131
  146. package/source/providers/layouts/Layout-Tabular.js +0 -94
  147. package/test/CardPalette_tests.js +0 -43
  148. package/test/ConnectionHandleManager_tests.js +0 -717
  149. package/test/ConnectionRenderer_tests.js +0 -591
  150. package/test/ConnectionStyle_tests.js +0 -90
  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
  163. package/test/ToolbarExtraButtons_tests.js +0 -138
  164. package/test/UndirectedConnections_tests.js +0 -70
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');