pict-section-flow 0.0.16 → 0.0.18

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 (84) hide show
  1. package/README.md +18 -18
  2. package/docs/Architecture.md +1 -1
  3. package/docs/Data_Model.md +2 -2
  4. package/docs/Getting_Started.md +5 -5
  5. package/docs/Implementation_Reference.md +6 -6
  6. package/docs/Layout_Persistence.md +3 -3
  7. package/docs/README.md +12 -12
  8. package/docs/_cover.md +1 -1
  9. package/docs/_sidebar.md +6 -6
  10. package/docs/_version.json +7 -0
  11. package/docs/api/PictFlowCard.md +6 -6
  12. package/docs/api/PictFlowCardPropertiesPanel.md +2 -2
  13. package/docs/api/addConnection.md +4 -4
  14. package/docs/api/addNode.md +6 -6
  15. package/docs/api/autoLayout.md +2 -2
  16. package/docs/api/getFlowData.md +5 -5
  17. package/docs/api/marshalToView.md +3 -3
  18. package/docs/api/openPanel.md +2 -2
  19. package/docs/api/registerHandler.md +3 -3
  20. package/docs/api/registerNodeType.md +3 -3
  21. package/docs/api/removeConnection.md +5 -5
  22. package/docs/api/removeNode.md +6 -6
  23. package/docs/api/saveLayout.md +2 -2
  24. package/docs/api/screenToSVGCoords.md +2 -2
  25. package/docs/api/selectNode.md +3 -3
  26. package/docs/api/setTheme.md +2 -2
  27. package/docs/api/setZoom.md +3 -3
  28. package/docs/api/toggleFullscreen.md +2 -2
  29. package/docs/card-help/EACH.md +3 -3
  30. package/docs/card-help/FREAD.md +5 -5
  31. package/docs/card-help/FWRITE.md +5 -5
  32. package/docs/card-help/GET.md +2 -2
  33. package/docs/card-help/ITE.md +3 -3
  34. package/docs/card-help/LOG.md +4 -4
  35. package/docs/card-help/NOTE.md +1 -1
  36. package/docs/card-help/PREV.md +2 -2
  37. package/docs/card-help/SET.md +5 -5
  38. package/docs/card-help/SPKL.md +2 -2
  39. package/docs/card-help/STAT.md +3 -3
  40. package/docs/card-help/SW.md +4 -4
  41. package/docs/css/docuserve.css +277 -23
  42. package/docs/index.html +2 -2
  43. package/docs/retold-catalog.json +1 -1
  44. package/docs/retold-keyword-index.json +1 -1
  45. package/example_applications/simple_cards/css/flowexample.css +2 -2
  46. package/example_applications/simple_cards/source/card-help-content.js +12 -12
  47. package/example_applications/simple_cards/source/cards/FlowCard-DataPreview.js +1 -1
  48. package/example_applications/simple_cards/source/sample-flows.js +410 -0
  49. package/example_applications/simple_cards/source/views/PictView-FlowExample-About.js +5 -5
  50. package/example_applications/simple_cards/source/views/PictView-FlowExample-Documentation.js +5 -5
  51. package/example_applications/simple_cards/source/views/PictView-FlowExample-FileWriteInfo.js +4 -4
  52. package/example_applications/simple_cards/source/views/PictView-FlowExample-MainWorkspace.js +141 -8
  53. package/example_applications/simple_cards/source/views/PictView-FlowExample-TopBar.js +2 -2
  54. package/package.json +3 -2
  55. package/source/Pict-Section-Flow.js +26 -0
  56. package/source/providers/PictProvider-Flow-CSS.js +244 -14
  57. package/source/providers/PictProvider-Flow-Theme.js +7 -7
  58. package/source/providers/edges/Edge-Bezier.js +41 -0
  59. package/source/providers/edges/Edge-Orthogonal.js +37 -0
  60. package/source/providers/edges/Edge-OrthogonalSnap.js +72 -0
  61. package/source/providers/edges/Edge-Perimeter-Linear.js +31 -0
  62. package/source/providers/edges/Edge-Perimeter-Orthogonal.js +39 -0
  63. package/source/providers/edges/Edge-Perimeter.js +48 -0
  64. package/source/providers/edges/Edge-PerimeterMath.js +92 -0
  65. package/source/providers/edges/Edge-Straight.js +24 -0
  66. package/source/providers/layouts/Layout-Circular.js +203 -0
  67. package/source/providers/layouts/Layout-Coerce.js +40 -0
  68. package/source/providers/layouts/Layout-Columnar.js +134 -0
  69. package/source/providers/layouts/Layout-Custom.js +27 -0
  70. package/source/providers/layouts/Layout-ForcedFromCenter.js +256 -0
  71. package/source/providers/layouts/Layout-Grid.js +134 -0
  72. package/source/providers/layouts/Layout-Layered.js +209 -0
  73. package/source/providers/layouts/Layout-Tabular.js +94 -0
  74. package/source/services/PictService-Flow-ConnectionRenderer.js +532 -28
  75. package/source/services/PictService-Flow-DataManager.js +12 -1
  76. package/source/services/PictService-Flow-Layout.js +305 -121
  77. package/source/services/PictService-Flow-PortRenderer.js +122 -26
  78. package/source/services/PictService-Flow-RenderManager.js +41 -11
  79. package/source/views/PictView-Flow-FloatingToolbar.js +3 -3
  80. package/source/views/PictView-Flow-Node.js +28 -0
  81. package/source/views/PictView-Flow-Toolbar.js +715 -10
  82. package/source/views/PictView-Flow.js +272 -5
  83. package/test/Layout_tests.js +1400 -0
  84. package/test/PortRenderer_tests.js +11 -2
package/README.md CHANGED
@@ -5,17 +5,17 @@
5
5
 
6
6
  An interactive flow diagram section view for the Pict application framework. Build node-based visual editors, workflow designers, and data pipeline tools with a declarative, configuration-driven API.
7
7
 
8
- Pict-Section-Flow provides a complete graph editing experience nodes, ports, connections, properties panels, theming, and layout persistence all composable through the Fable service provider pattern.
8
+ Pict-Section-Flow provides a complete graph editing experience -- nodes, ports, connections, properties panels, theming, and layout persistence -- all composable through the Fable service provider pattern.
9
9
 
10
10
  ## Features
11
11
 
12
- - **Node-Based Graph Editor** Drag-and-drop nodes with typed input/output ports and bezier or orthogonal connections
13
- - **Custom Card Types** Define reusable node types with the `PictFlowCard` base class; register categories, icons, port constraints, and body content
14
- - **Properties Panels** On-graph panels with four built-in types: Template, Markdown, Form, and View
15
- - **Theming** Six built-in themes plus a CSS custom properties API with 70+ design tokens
16
- - **Layout Persistence** Save and restore spatial arrangements to localStorage or any backend
17
- - **Event System** Hook into 20+ lifecycle events for custom behavior without modifying core code
18
- - **Viewport Controls** Pan, zoom, fullscreen, grid snap, zoom-to-fit, and auto-layout
12
+ - **Node-Based Graph Editor** -- Drag-and-drop nodes with typed input/output ports and bezier or orthogonal connections
13
+ - **Custom Card Types** -- Define reusable node types with the `PictFlowCard` base class; register categories, icons, port constraints, and body content
14
+ - **Properties Panels** -- On-graph panels with four built-in types: Template, Markdown, Form, and View
15
+ - **Theming** -- Six built-in themes plus a CSS custom properties API with 70+ design tokens
16
+ - **Layout Persistence** -- Save and restore spatial arrangements to localStorage or any backend
17
+ - **Event System** -- Hook into 20+ lifecycle events for custom behavior without modifying core code
18
+ - **Viewport Controls** -- Pan, zoom, fullscreen, grid snap, zoom-to-fit, and auto-layout
19
19
 
20
20
  ## Installation
21
21
 
@@ -128,11 +128,11 @@ The `|| false` fallback ensures the build never fails if a markdown file is miss
128
128
 
129
129
  Full documentation is available at [https://stevenvelozo.github.io/pict-section-flow/](https://stevenvelozo.github.io/pict-section-flow/)
130
130
 
131
- - [Getting Started](https://stevenvelozo.github.io/pict-section-flow/#/Getting_Started) First flow diagram in five minutes
132
- - [Architecture](https://stevenvelozo.github.io/pict-section-flow/#/Architecture) Service/provider design and data flow
133
- - [Implementation Reference](https://stevenvelozo.github.io/pict-section-flow/#/Implementation_Reference) Complete API surface
134
- - [Custom Styling](https://stevenvelozo.github.io/pict-section-flow/#/Custom-Styling) CSS custom properties and theme API
135
- - [Layout Persistence](https://stevenvelozo.github.io/pict-section-flow/#/Layout_Persistence) Save/restore with localStorage or REST
131
+ - [Getting Started](https://stevenvelozo.github.io/pict-section-flow/#/Getting_Started) -- First flow diagram in five minutes
132
+ - [Architecture](https://stevenvelozo.github.io/pict-section-flow/#/Architecture) -- Service/provider design and data flow
133
+ - [Implementation Reference](https://stevenvelozo.github.io/pict-section-flow/#/Implementation_Reference) -- Complete API surface
134
+ - [Custom Styling](https://stevenvelozo.github.io/pict-section-flow/#/Custom-Styling) -- CSS custom properties and theme API
135
+ - [Layout Persistence](https://stevenvelozo.github.io/pict-section-flow/#/Layout_Persistence) -- Save/restore with localStorage or REST
136
136
 
137
137
  ## API Reference (Function Docs)
138
138
 
@@ -161,11 +161,11 @@ Detailed per-function documentation with code snippets:
161
161
 
162
162
  ## Related Packages
163
163
 
164
- - [pict](https://github.com/stevenvelozo/pict) MVC application framework
165
- - [pict-view](https://github.com/stevenvelozo/pict-view) View base class
166
- - [pict-provider](https://github.com/stevenvelozo/pict-provider) Provider base class
167
- - [pict-section-form](https://github.com/stevenvelozo/pict-section-form) Form sections (used for Form panels)
168
- - [fable](https://github.com/stevenvelozo/fable) Service infrastructure
164
+ - [pict](https://github.com/stevenvelozo/pict) -- MVC application framework
165
+ - [pict-view](https://github.com/stevenvelozo/pict-view) -- View base class
166
+ - [pict-provider](https://github.com/stevenvelozo/pict-provider) -- Provider base class
167
+ - [pict-section-form](https://github.com/stevenvelozo/pict-section-form) -- Form sections (used for Form panels)
168
+ - [fable](https://github.com/stevenvelozo/fable) -- Service infrastructure
169
169
 
170
170
  ## License
171
171
 
@@ -1,6 +1,6 @@
1
1
  # Architecture
2
2
 
3
- Pict-Section-Flow follows the standard Pict layered architecture Views for rendering, Services for business logic, and Providers for configuration and stateless utilities. All components register with a Fable instance through the service provider pattern.
3
+ Pict-Section-Flow follows the standard Pict layered architecture -- Views for rendering, Services for business logic, and Providers for configuration and stateless utilities. All components register with a Fable instance through the service provider pattern.
4
4
 
5
5
  ## High-Level Design
6
6
 
@@ -106,8 +106,8 @@ A connection links an output port on one node to an input port on another.
106
106
 
107
107
  Connections support two path modes:
108
108
 
109
- - **Bezier** (default) Smooth curves with one or more control handles. Right-click a connection to add a handle; drag handles to reshape the curve.
110
- - **Orthogonal** Right-angle paths with two corner points. Double-click a connection handle to toggle between bezier and orthogonal modes.
109
+ - **Bezier** (default) -- Smooth curves with one or more control handles. Right-click a connection to add a handle; drag handles to reshape the curve.
110
+ - **Orthogonal** -- Right-angle paths with two corner points. Double-click a connection handle to toggle between bezier and orthogonal modes.
111
111
 
112
112
  ## Panel
113
113
 
@@ -1,6 +1,6 @@
1
1
  # Getting Started
2
2
 
3
- This guide walks you through creating a flow diagram from scratch installing the package, registering a view, adding nodes and connections, and wiring up custom card types.
3
+ This guide walks you through creating a flow diagram from scratch -- installing the package, registering a view, adding nodes and connections, and wiring up custom card types.
4
4
 
5
5
  ## Prerequisites
6
6
 
@@ -231,7 +231,7 @@ This produces a browser bundle in `dist/` that includes pict-section-flow and al
231
231
 
232
232
  ## Next Steps
233
233
 
234
- - **[Architecture](Architecture.md)** Understand the service/provider design
235
- - **[Implementation Reference](Implementation_Reference.md)** Full API for every method
236
- - **[Custom Styling](Custom-Styling.md)** CSS variables and theme configuration
237
- - **[Layout Persistence](Layout_Persistence.md)** Save layouts to localStorage or a REST API
234
+ - **[Architecture](Architecture.md)** -- Understand the service/provider design
235
+ - **[Implementation Reference](Implementation_Reference.md)** -- Full API for every method
236
+ - **[Custom Styling](Custom-Styling.md)** -- CSS variables and theme configuration
237
+ - **[Layout Persistence](Layout_Persistence.md)** -- Save layouts to localStorage or a REST API
@@ -2,7 +2,7 @@
2
2
 
3
3
  Complete API reference for Pict-Section-Flow. This document covers every public method on the main `PictViewFlow` class and the key internal services and providers developers interact with.
4
4
 
5
- ## PictViewFlow Main View API
5
+ ## PictViewFlow -- Main View API
6
6
 
7
7
  The primary class exported by `pict-section-flow`. Extends `pict-view`.
8
8
 
@@ -84,7 +84,7 @@ Delete a node and all its connections.
84
84
  |-----------|------|-------------|
85
85
  | `pNodeHash` | string | Hash of the node to remove |
86
86
 
87
- **Returns:** `boolean` `true` if the node was found and removed.
87
+ **Returns:** `boolean` -- `true` if the node was found and removed.
88
88
 
89
89
  ### addConnection(pSourceNode, pSourcePort, pTargetNode, pTargetPort, pData)
90
90
 
@@ -108,7 +108,7 @@ Delete a connection.
108
108
  |-----------|------|-------------|
109
109
  | `pConnectionHash` | string | Hash of the connection to remove |
110
110
 
111
- **Returns:** `boolean` `true` if the connection was found and removed.
111
+ **Returns:** `boolean` -- `true` if the connection was found and removed.
112
112
 
113
113
  ### getFlowData()
114
114
 
@@ -168,7 +168,7 @@ Clear all selections (node, connection, and tether).
168
168
 
169
169
  Delete the currently selected node or connection.
170
170
 
171
- **Returns:** `boolean` `true` if something was deleted.
171
+ **Returns:** `boolean` -- `true` if something was deleted.
172
172
 
173
173
  ---
174
174
 
@@ -196,7 +196,7 @@ Apply the current pan/zoom state to the SVG viewport group. Called automatically
196
196
 
197
197
  Toggle fullscreen overlay mode.
198
198
 
199
- **Returns:** `boolean` the new fullscreen state.
199
+ **Returns:** `boolean` -- the new fullscreen state.
200
200
 
201
201
  ### exitFullscreen()
202
202
 
@@ -466,7 +466,7 @@ Register a named theme.
466
466
 
467
467
  Activate a registered theme and re-render.
468
468
 
469
- **Returns:** `boolean` `true` if the theme was found and activated.
469
+ **Returns:** `boolean` -- `true` if the theme was found and activated.
470
470
 
471
471
  ### getActiveTheme()
472
472
 
@@ -4,7 +4,7 @@ Pict-Section-Flow can save and restore spatial arrangements of nodes and panels
4
4
 
5
5
  ## How It Works
6
6
 
7
- A **layout** captures the position, size, and viewport state of a flow diagram at a point in time. It does not store the flow's logical content (nodes, connections, data) only where things are on screen.
7
+ A **layout** captures the position, size, and viewport state of a flow diagram at a point in time. It does not store the flow's logical content (nodes, connections, data) -- only where things are on screen.
8
8
 
9
9
  Each saved layout contains:
10
10
 
@@ -79,8 +79,8 @@ layoutProvider.loadPersistedLayouts();
79
79
 
80
80
  ## Configuration Options
81
81
 
82
- - **`StorageKey`** (string) Override the localStorage key. Passed via options when instantiating the provider.
83
- - **`StorageKey: false`** Disable localStorage persistence entirely (useful when using only a remote backend).
82
+ - **`StorageKey`** (string) -- Override the localStorage key. Passed via options when instantiating the provider.
83
+ - **`StorageKey: false`** -- Disable localStorage persistence entirely (useful when using only a remote backend).
84
84
 
85
85
  ## Events
86
86
 
package/docs/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  An interactive flow diagram section view for the [Pict](https://github.com/stevenvelozo/pict) application framework. Build node-based visual editors, workflow designers, and data pipeline tools with a declarative, configuration-driven API.
4
4
 
5
- Pict-Section-Flow provides a complete graph editing experience nodes, ports, connections, properties panels, theming, and layout persistence all composable through the Fable service provider pattern.
5
+ Pict-Section-Flow provides a complete graph editing experience -- nodes, ports, connections, properties panels, theming, and layout persistence -- all composable through the Fable service provider pattern.
6
6
 
7
7
  ## What It Does
8
8
 
@@ -70,7 +70,7 @@ Developers define reusable node types by extending `PictFlowCard`. Each card dec
70
70
 
71
71
  ### Properties Panels
72
72
 
73
- Nodes can open floating panels tethered to them by a line. Four built-in panel types cover common needs Template, Markdown, Form, and View or you can create custom panel types by extending `PictFlowCardPropertiesPanel`.
73
+ Nodes can open floating panels tethered to them by a line. Four built-in panel types cover common needs -- Template, Markdown, Form, and View -- or you can create custom panel types by extending `PictFlowCardPropertiesPanel`.
74
74
 
75
75
  ### Theming
76
76
 
@@ -112,21 +112,21 @@ tmpFlow._EventHandlerProvider.registerHandler('onFlowChanged',
112
112
 
113
113
  ## Learn More
114
114
 
115
- - **[Getting Started](Getting_Started.md)** Build your first flow diagram in five minutes
116
- - **[Architecture](Architecture.md)** Detailed service/provider design with data flow diagrams
117
- - **[Implementation Reference](Implementation_Reference.md)** Complete API surface for every service and provider
118
- - **[Custom Styling](Custom-Styling.md)** CSS custom properties reference and theme API
119
- - **[Layout Persistence](Layout_Persistence.md)** Save and restore layouts with localStorage or REST
115
+ - **[Getting Started](Getting_Started.md)** -- Build your first flow diagram in five minutes
116
+ - **[Architecture](Architecture.md)** -- Detailed service/provider design with data flow diagrams
117
+ - **[Implementation Reference](Implementation_Reference.md)** -- Complete API surface for every service and provider
118
+ - **[Custom Styling](Custom-Styling.md)** -- CSS custom properties reference and theme API
119
+ - **[Layout Persistence](Layout_Persistence.md)** -- Save and restore layouts with localStorage or REST
120
120
 
121
121
  ## Ecosystem
122
122
 
123
123
  Pict-Section-Flow is part of the [Retold](https://github.com/stevenvelozo/retold) module suite:
124
124
 
125
- - [pict](https://github.com/stevenvelozo/pict) Core MVC application framework
126
- - [pict-view](https://github.com/stevenvelozo/pict-view) View base class
127
- - [pict-provider](https://github.com/stevenvelozo/pict-provider) Provider base class
128
- - [pict-section-form](https://github.com/stevenvelozo/pict-section-form) Form sections (used for Form panel type)
129
- - [fable](https://github.com/stevenvelozo/fable) Service infrastructure and dependency injection
125
+ - [pict](https://github.com/stevenvelozo/pict) -- Core MVC application framework
126
+ - [pict-view](https://github.com/stevenvelozo/pict-view) -- View base class
127
+ - [pict-provider](https://github.com/stevenvelozo/pict-provider) -- Provider base class
128
+ - [pict-section-form](https://github.com/stevenvelozo/pict-section-form) -- Form sections (used for Form panel type)
129
+ - [fable](https://github.com/stevenvelozo/fable) -- Service infrastructure and dependency injection
130
130
 
131
131
  ## License
132
132
 
package/docs/_cover.md CHANGED
@@ -1,4 +1,4 @@
1
- # Pict-Section-Flow <small>0</small>
1
+ # Pict-Section-Flow
2
2
 
3
3
  > Interactive flow diagram section view for the Pict application framework
4
4
 
package/docs/_sidebar.md CHANGED
@@ -15,7 +15,7 @@
15
15
  - [Implementation Reference](Implementation_Reference.md)
16
16
  - [Layout Persistence](Layout_Persistence.md)
17
17
 
18
- - API Data Management
18
+ - API -- Data Management
19
19
 
20
20
  - [addNode](api/addNode.md)
21
21
  - [removeNode](api/removeNode.md)
@@ -24,7 +24,7 @@
24
24
  - [getFlowData / setFlowData](api/getFlowData.md)
25
25
  - [marshalToView / marshalFromView](api/marshalToView.md)
26
26
 
27
- - API Selection & Viewport
27
+ - API -- Selection & Viewport
28
28
 
29
29
  - [selectNode / deselectAll](api/selectNode.md)
30
30
  - [setZoom / zoomToFit](api/setZoom.md)
@@ -32,20 +32,20 @@
32
32
  - [screenToSVGCoords](api/screenToSVGCoords.md)
33
33
  - [toggleFullscreen](api/toggleFullscreen.md)
34
34
 
35
- - API Panels
35
+ - API -- Panels
36
36
 
37
37
  - [openPanel / closePanel / togglePanel](api/openPanel.md)
38
38
 
39
- - API Theming & Events
39
+ - API -- Theming & Events
40
40
 
41
41
  - [setTheme / registerTheme](api/setTheme.md)
42
42
  - [registerHandler / fireEvent](api/registerHandler.md)
43
43
 
44
- - API Layout Persistence
44
+ - API -- Layout Persistence
45
45
 
46
46
  - [saveLayout / restoreLayout](api/saveLayout.md)
47
47
 
48
- - API Extension Points
48
+ - API -- Extension Points
49
49
 
50
50
  - [PictFlowCard](api/PictFlowCard.md)
51
51
  - [PictFlowCardPropertiesPanel](api/PictFlowCardPropertiesPanel.md)
@@ -0,0 +1,7 @@
1
+ {
2
+ "Name": "pict-section-flow",
3
+ "Version": "0.0.17",
4
+ "Description": "Pict Section Flow Diagram",
5
+ "GeneratedAt": "2026-04-10T17:25:15.954Z",
6
+ "GitCommit": "90d4cd2"
7
+ }
@@ -60,8 +60,8 @@ Each port object:
60
60
  | `Side` | string | `'left'`/`'right'` | Port side: `'left'`, `'right'`, `'top'`, `'bottom'` |
61
61
  | `MinimumInputCount` | number | `0` | Minimum required connections (inputs only) |
62
62
  | `MaximumInputCount` | number | `-1` | Maximum allowed connections (-1 = unlimited, inputs only) |
63
- | `PortType` | string | | Type for styling: `'event'`, `'setting'`, `'value'`, `'error'` |
64
- | `DataType` | string | | Semantic data type (for validation/display) |
63
+ | `PortType` | string | -- | Type for styling: `'event'`, `'setting'`, `'value'`, `'error'` |
64
+ | `DataType` | string | -- | Semantic data type (for validation/display) |
65
65
 
66
66
  ### Label Display Options
67
67
 
@@ -111,7 +111,7 @@ Register this card with a flow view's node type provider.
111
111
  |-----------|------|-------------|
112
112
  | `pFlowView` | PictViewFlow | The flow view instance |
113
113
 
114
- **Returns:** `boolean` whether registration succeeded.
114
+ **Returns:** `boolean` -- whether registration succeeded.
115
115
 
116
116
  ## Examples
117
117
 
@@ -211,6 +211,6 @@ tmpCard.registerWithFlowView(flowView);
211
211
 
212
212
  ## See Also
213
213
 
214
- - [registerNodeType](registerNodeType.md) Register types directly without PictFlowCard
215
- - [PictFlowCardPropertiesPanel](PictFlowCardPropertiesPanel.md) Custom panel types
216
- - [addNode](addNode.md) Create nodes from registered types
214
+ - [registerNodeType](registerNodeType.md) -- Register types directly without PictFlowCard
215
+ - [PictFlowCardPropertiesPanel](PictFlowCardPropertiesPanel.md) -- Custom panel types
216
+ - [addNode](addNode.md) -- Create nodes from registered types
@@ -231,5 +231,5 @@ class DataPreviewCard extends libPictFlowCard
231
231
 
232
232
  ## See Also
233
233
 
234
- - [PictFlowCard](PictFlowCard.md) Define cards that use panels
235
- - [openPanel / closePanel](openPanel.md) Panel lifecycle methods
234
+ - [PictFlowCard](PictFlowCard.md) -- Define cards that use panels
235
+ - [openPanel / closePanel](openPanel.md) -- Panel lifecycle methods
@@ -45,8 +45,8 @@ The connection object on success, or `false` if validation failed (e.g. duplicat
45
45
 
46
46
  ## Events Fired
47
47
 
48
- - `onConnectionCreated` with the new connection object
49
- - `onFlowChanged` with the complete flow data
48
+ - `onConnectionCreated` -- with the new connection object
49
+ - `onFlowChanged` -- with the complete flow data
50
50
 
51
51
  ## Examples
52
52
 
@@ -97,5 +97,5 @@ flowView.addConnection(tmpDecision.Hash, tmpNoPort.Hash, tmpFailure.Hash, tmpFai
97
97
 
98
98
  ## See Also
99
99
 
100
- - [removeConnection](removeConnection.md) Delete a connection
101
- - [addNode](addNode.md) Create nodes to connect
100
+ - [removeConnection](removeConnection.md) -- Delete a connection
101
+ - [addNode](addNode.md) -- Create nodes to connect
@@ -46,8 +46,8 @@ The newly created node object:
46
46
 
47
47
  ## Events Fired
48
48
 
49
- - `onNodeAdded` with the new node object
50
- - `onFlowChanged` with the complete flow data
49
+ - `onNodeAdded` -- with the new node object
50
+ - `onFlowChanged` -- with the complete flow data
51
51
 
52
52
  ## Examples
53
53
 
@@ -131,7 +131,7 @@ buildPipeline(flowView,
131
131
 
132
132
  ## See Also
133
133
 
134
- - [removeNode](removeNode.md) Delete a node
135
- - [getFlowData](getFlowData.md) Retrieve the full flow state
136
- - [PictFlowCard](PictFlowCard.md) Define custom node types
137
- - [registerNodeType](registerNodeType.md) Register node types directly
134
+ - [removeNode](removeNode.md) -- Delete a node
135
+ - [getFlowData](getFlowData.md) -- Retrieve the full flow state
136
+ - [PictFlowCard](PictFlowCard.md) -- Define custom node types
137
+ - [registerNodeType](registerNodeType.md) -- Register node types directly
@@ -73,5 +73,5 @@ flowView.autoLayout();
73
73
 
74
74
  ## See Also
75
75
 
76
- - [setZoom / zoomToFit](setZoom.md) Fit the result in the viewport
77
- - [saveLayout / restoreLayout](saveLayout.md) Persist spatial arrangements
76
+ - [setZoom / zoomToFit](setZoom.md) -- Fit the result in the viewport
77
+ - [saveLayout / restoreLayout](saveLayout.md) -- Persist spatial arrangements
@@ -47,7 +47,7 @@ A deep clone of the complete flow state:
47
47
 
48
48
  ### Events Fired
49
49
 
50
- - `onFlowChanged` with the new flow data
50
+ - `onFlowChanged` -- with the new flow data
51
51
 
52
52
  ## Examples
53
53
 
@@ -103,10 +103,10 @@ console.log('Zoom:', tmpData.ViewState.Zoom);
103
103
 
104
104
  ## Related Methods
105
105
 
106
- - `getNode(pNodeHash)` Retrieve a single node by hash
107
- - `getConnection(pConnectionHash)` Retrieve a single connection by hash
106
+ - `getNode(pNodeHash)` -- Retrieve a single node by hash
107
+ - `getConnection(pConnectionHash)` -- Retrieve a single connection by hash
108
108
 
109
109
  ## See Also
110
110
 
111
- - [marshalToView / marshalFromView](marshalToView.md) AppData two-way binding
112
- - [addNode](addNode.md) Add individual nodes
111
+ - [marshalToView / marshalFromView](marshalToView.md) -- AppData two-way binding
112
+ - [addNode](addNode.md) -- Add individual nodes
@@ -13,13 +13,13 @@ flowView.marshalFromView();
13
13
 
14
14
  Load flow data from the AppData address specified in `FlowDataAddress` into the view and render it.
15
15
 
16
- This is the "pull" direction: AppData Flow View.
16
+ This is the "pull" direction: AppData -> Flow View.
17
17
 
18
18
  ## marshalFromView
19
19
 
20
20
  Write the current flow data back to the AppData address specified in `FlowDataAddress`.
21
21
 
22
- This is the "push" direction: Flow View AppData.
22
+ This is the "push" direction: Flow View -> AppData.
23
23
 
24
24
  ## Configuration
25
25
 
@@ -92,4 +92,4 @@ tmpFlowView._EventHandlerProvider.registerHandler('onFlowChanged',
92
92
 
93
93
  ## See Also
94
94
 
95
- - [getFlowData / setFlowData](getFlowData.md) Direct get/set without AppData
95
+ - [getFlowData / setFlowData](getFlowData.md) -- Direct get/set without AppData
@@ -124,5 +124,5 @@ flowView._EventHandlerProvider.registerHandler('onPanelClosed',
124
124
 
125
125
  ## See Also
126
126
 
127
- - [PictFlowCard](PictFlowCard.md) Define PropertiesPanel configuration on card types
128
- - [PictFlowCardPropertiesPanel](PictFlowCardPropertiesPanel.md) Custom panel base class
127
+ - [PictFlowCard](PictFlowCard.md) -- Define PropertiesPanel configuration on card types
128
+ - [PictFlowCardPropertiesPanel](PictFlowCardPropertiesPanel.md) -- Custom panel base class
@@ -169,6 +169,6 @@ flowView._EventHandlerProvider.registerHandler('onNodeAdded',
169
169
 
170
170
  ## See Also
171
171
 
172
- - [addNode](addNode.md) Triggers `onNodeAdded` and `onFlowChanged`
173
- - [selectNode](selectNode.md) Triggers `onNodeSelected`
174
- - [setTheme](setTheme.md) Triggers `onThemeChanged`
172
+ - [addNode](addNode.md) -- Triggers `onNodeAdded` and `onFlowChanged`
173
+ - [selectNode](selectNode.md) -- Triggers `onNodeSelected`
174
+ - [setTheme](setTheme.md) -- Triggers `onThemeChanged`
@@ -64,7 +64,7 @@ Retrieve a node type configuration by hash. Returns the default type if the hash
64
64
 
65
65
  ## getNodeTypes
66
66
 
67
- **Returns:** Map of all registered node types (hash config).
67
+ **Returns:** Map of all registered node types (hash -> config).
68
68
 
69
69
  ## getNodeTypeList
70
70
 
@@ -138,5 +138,5 @@ flowView._NodeTypeProvider.removeNodeType('FREAD');
138
138
 
139
139
  ## See Also
140
140
 
141
- - [PictFlowCard](PictFlowCard.md) Higher-level card class (recommended approach)
142
- - [addNode](addNode.md) Create nodes from registered types
141
+ - [PictFlowCard](PictFlowCard.md) -- Higher-level card class (recommended approach)
142
+ - [addNode](addNode.md) -- Create nodes from registered types
@@ -16,12 +16,12 @@ flowView.removeConnection(pConnectionHash)
16
16
 
17
17
  ## Returns
18
18
 
19
- `boolean` `true` if the connection was found and removed, `false` otherwise.
19
+ `boolean` -- `true` if the connection was found and removed, `false` otherwise.
20
20
 
21
21
  ## Events Fired
22
22
 
23
- - `onConnectionRemoved` with the removed connection object
24
- - `onFlowChanged` with the updated flow data
23
+ - `onConnectionRemoved` -- with the removed connection object
24
+ - `onFlowChanged` -- with the updated flow data
25
25
 
26
26
  ## Examples
27
27
 
@@ -53,5 +53,5 @@ tmpFlowData.Connections.forEach((pConn) =>
53
53
 
54
54
  ## See Also
55
55
 
56
- - [addConnection](addConnection.md) Create a connection
57
- - [removeNode](removeNode.md) Remove a node (cascades connections)
56
+ - [addConnection](addConnection.md) -- Create a connection
57
+ - [removeNode](removeNode.md) -- Remove a node (cascades connections)
@@ -16,13 +16,13 @@ flowView.removeNode(pNodeHash)
16
16
 
17
17
  ## Returns
18
18
 
19
- `boolean` `true` if the node was found and removed, `false` otherwise.
19
+ `boolean` -- `true` if the node was found and removed, `false` otherwise.
20
20
 
21
21
  ## Events Fired
22
22
 
23
- - `onNodeRemoved` with the removed node object
24
- - `onConnectionRemoved` for each connection that was cascaded
25
- - `onFlowChanged` with the updated flow data
23
+ - `onNodeRemoved` -- with the removed node object
24
+ - `onConnectionRemoved` -- for each connection that was cascaded
25
+ - `onFlowChanged` -- with the updated flow data
26
26
 
27
27
  ## Examples
28
28
 
@@ -76,5 +76,5 @@ tmpFlowData.Nodes.forEach((pNode) =>
76
76
 
77
77
  ## See Also
78
78
 
79
- - [addNode](addNode.md) Create a node
80
- - [deleteSelected](selectNode.md) Delete the currently selected element
79
+ - [addNode](addNode.md) -- Create a node
80
+ - [deleteSelected](selectNode.md) -- Delete the currently selected element
@@ -148,5 +148,5 @@ tmpLayoutProvider.loadPersistedLayouts();
148
148
 
149
149
  ## See Also
150
150
 
151
- - [Layout Persistence](../Layout_Persistence.md) Detailed guide on storage backends
152
- - [autoLayout](autoLayout.md) Automatic topological layout
151
+ - [Layout Persistence](../Layout_Persistence.md) -- Detailed guide on storage backends
152
+ - [autoLayout](autoLayout.md) -- Automatic topological layout
@@ -64,5 +64,5 @@ document.getElementById('flow-container').addEventListener('mousemove', (pEvent)
64
64
 
65
65
  ## See Also
66
66
 
67
- - [setZoom](setZoom.md) Viewport zoom (affects coordinate mapping)
68
- - [addNode](addNode.md) Create nodes at specific coordinates
67
+ - [setZoom](setZoom.md) -- Viewport zoom (affects coordinate mapping)
68
+ - [addNode](addNode.md) -- Create nodes at specific coordinates
@@ -50,7 +50,7 @@ Clear all selection state (node, connection, and tether).
50
50
 
51
51
  Delete the currently selected node or connection. If a node is selected, its connections are also removed.
52
52
 
53
- **Returns:** `boolean` `true` if something was deleted.
53
+ **Returns:** `boolean` -- `true` if something was deleted.
54
54
 
55
55
  ## Examples
56
56
 
@@ -112,5 +112,5 @@ function handleDelete()
112
112
 
113
113
  ## See Also
114
114
 
115
- - [addNode](addNode.md) / [removeNode](removeNode.md) Node CRUD
116
- - [registerHandler](registerHandler.md) Event hooks
115
+ - [addNode](addNode.md) / [removeNode](removeNode.md) -- Node CRUD
116
+ - [registerHandler](registerHandler.md) -- Event hooks
@@ -164,5 +164,5 @@ flowView._ThemeProvider.registerTheme('corporate',
164
164
 
165
165
  ## See Also
166
166
 
167
- - [Custom Styling](../Custom-Styling.md) Full CSS custom properties reference
168
- - [registerHandler](registerHandler.md) Listen for `onThemeChanged` events
167
+ - [Custom Styling](../Custom-Styling.md) -- Full CSS custom properties reference
168
+ - [registerHandler](registerHandler.md) -- Listen for `onThemeChanged` events
@@ -92,6 +92,6 @@ Zoom bounds are set in the view configuration:
92
92
 
93
93
  ## See Also
94
94
 
95
- - [screenToSVGCoords](screenToSVGCoords.md) Coordinate conversion
96
- - [toggleFullscreen](toggleFullscreen.md) Fullscreen mode
97
- - [autoLayout](autoLayout.md) Automatic node arrangement
95
+ - [screenToSVGCoords](screenToSVGCoords.md) -- Coordinate conversion
96
+ - [toggleFullscreen](toggleFullscreen.md) -- Fullscreen mode
97
+ - [autoLayout](autoLayout.md) -- Automatic node arrangement
@@ -13,7 +13,7 @@ flowView.exitFullscreen();
13
13
 
14
14
  Toggles between normal and fullscreen modes.
15
15
 
16
- **Returns:** `boolean` the new fullscreen state (`true` if now fullscreen).
16
+ **Returns:** `boolean` -- the new fullscreen state (`true` if now fullscreen).
17
17
 
18
18
  ## exitFullscreen
19
19
 
@@ -65,4 +65,4 @@ setTimeout(() =>
65
65
 
66
66
  ## See Also
67
67
 
68
- - [setZoom / zoomToFit](setZoom.md) Viewport controls
68
+ - [setZoom / zoomToFit](setZoom.md) -- Viewport controls
@@ -4,9 +4,9 @@ The **Each** node iterates over a collection, executing connected downstream nod
4
4
 
5
5
  ## Ports
6
6
 
7
- - **Collection** (input) an array or iterable to loop over
8
- - **Item** (output) fires once per element with the current item
9
- - **Done** (output) fires after all items have been processed
7
+ - **Collection** (input) -- an array or iterable to loop over
8
+ - **Item** (output) -- fires once per element with the current item
9
+ - **Done** (output) -- fires after all items have been processed
10
10
 
11
11
  ## Behavior
12
12
 
@@ -4,14 +4,14 @@ The **File Read** node reads the contents of a file from the filesystem and outp
4
4
 
5
5
  ## Ports
6
6
 
7
- - **Path** (input) the filesystem path to read
8
- - **Data** (output) the file contents on success
9
- - **Error** (output) fires if the read operation fails
7
+ - **Path** (input) -- the filesystem path to read
8
+ - **Data** (output) -- the file contents on success
9
+ - **Error** (output) -- fires if the read operation fails
10
10
 
11
11
  ## Properties
12
12
 
13
- - **FilePath** the path to the file to read
14
- - **Encoding** character encoding for text files (e.g. `utf8`, `ascii`)
13
+ - **FilePath** -- the path to the file to read
14
+ - **Encoding** -- character encoding for text files (e.g. `utf8`, `ascii`)
15
15
 
16
16
  ## Behavior
17
17