pict-section-flow 0.0.17 → 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.
- package/README.md +18 -18
- package/docs/Architecture.md +1 -1
- package/docs/Data_Model.md +2 -2
- package/docs/Getting_Started.md +5 -5
- package/docs/Implementation_Reference.md +6 -6
- package/docs/Layout_Persistence.md +3 -3
- package/docs/README.md +12 -12
- package/docs/_cover.md +1 -1
- package/docs/_sidebar.md +6 -6
- package/docs/_version.json +7 -0
- package/docs/api/PictFlowCard.md +6 -6
- package/docs/api/PictFlowCardPropertiesPanel.md +2 -2
- package/docs/api/addConnection.md +4 -4
- package/docs/api/addNode.md +6 -6
- package/docs/api/autoLayout.md +2 -2
- package/docs/api/getFlowData.md +5 -5
- package/docs/api/marshalToView.md +3 -3
- package/docs/api/openPanel.md +2 -2
- package/docs/api/registerHandler.md +3 -3
- package/docs/api/registerNodeType.md +3 -3
- package/docs/api/removeConnection.md +5 -5
- package/docs/api/removeNode.md +6 -6
- package/docs/api/saveLayout.md +2 -2
- package/docs/api/screenToSVGCoords.md +2 -2
- package/docs/api/selectNode.md +3 -3
- package/docs/api/setTheme.md +2 -2
- package/docs/api/setZoom.md +3 -3
- package/docs/api/toggleFullscreen.md +2 -2
- package/docs/card-help/EACH.md +3 -3
- package/docs/card-help/FREAD.md +5 -5
- package/docs/card-help/FWRITE.md +5 -5
- package/docs/card-help/GET.md +2 -2
- package/docs/card-help/ITE.md +3 -3
- package/docs/card-help/LOG.md +4 -4
- package/docs/card-help/NOTE.md +1 -1
- package/docs/card-help/PREV.md +2 -2
- package/docs/card-help/SET.md +5 -5
- package/docs/card-help/SPKL.md +2 -2
- package/docs/card-help/STAT.md +3 -3
- package/docs/card-help/SW.md +4 -4
- package/docs/css/docuserve.css +277 -23
- package/docs/index.html +2 -2
- package/docs/retold-catalog.json +1 -1
- package/docs/retold-keyword-index.json +1 -1
- package/example_applications/simple_cards/css/flowexample.css +2 -2
- package/example_applications/simple_cards/source/card-help-content.js +12 -12
- package/example_applications/simple_cards/source/cards/FlowCard-DataPreview.js +1 -1
- package/example_applications/simple_cards/source/sample-flows.js +410 -0
- package/example_applications/simple_cards/source/views/PictView-FlowExample-About.js +5 -5
- package/example_applications/simple_cards/source/views/PictView-FlowExample-Documentation.js +5 -5
- package/example_applications/simple_cards/source/views/PictView-FlowExample-FileWriteInfo.js +4 -4
- package/example_applications/simple_cards/source/views/PictView-FlowExample-MainWorkspace.js +141 -8
- package/example_applications/simple_cards/source/views/PictView-FlowExample-TopBar.js +2 -2
- package/package.json +3 -2
- package/source/Pict-Section-Flow.js +26 -0
- package/source/providers/PictProvider-Flow-CSS.js +238 -14
- package/source/providers/PictProvider-Flow-Theme.js +7 -7
- package/source/providers/edges/Edge-Bezier.js +41 -0
- package/source/providers/edges/Edge-Orthogonal.js +37 -0
- package/source/providers/edges/Edge-OrthogonalSnap.js +72 -0
- package/source/providers/edges/Edge-Perimeter-Linear.js +31 -0
- package/source/providers/edges/Edge-Perimeter-Orthogonal.js +39 -0
- package/source/providers/edges/Edge-Perimeter.js +48 -0
- package/source/providers/edges/Edge-PerimeterMath.js +92 -0
- package/source/providers/edges/Edge-Straight.js +24 -0
- package/source/providers/layouts/Layout-Circular.js +203 -0
- package/source/providers/layouts/Layout-Coerce.js +40 -0
- package/source/providers/layouts/Layout-Columnar.js +134 -0
- package/source/providers/layouts/Layout-Custom.js +27 -0
- package/source/providers/layouts/Layout-ForcedFromCenter.js +256 -0
- package/source/providers/layouts/Layout-Grid.js +134 -0
- package/source/providers/layouts/Layout-Layered.js +209 -0
- package/source/providers/layouts/Layout-Tabular.js +94 -0
- package/source/services/PictService-Flow-ConnectionRenderer.js +532 -28
- package/source/services/PictService-Flow-DataManager.js +12 -1
- package/source/services/PictService-Flow-Layout.js +305 -121
- package/source/services/PictService-Flow-PortRenderer.js +122 -26
- package/source/services/PictService-Flow-RenderManager.js +41 -11
- package/source/views/PictView-Flow-Node.js +28 -0
- package/source/views/PictView-Flow-Toolbar.js +712 -7
- package/source/views/PictView-Flow.js +272 -5
- package/test/Layout_tests.js +1400 -0
- 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
|
|
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**
|
|
13
|
-
- **Custom Card Types**
|
|
14
|
-
- **Properties Panels**
|
|
15
|
-
- **Theming**
|
|
16
|
-
- **Layout Persistence**
|
|
17
|
-
- **Event System**
|
|
18
|
-
- **Viewport Controls**
|
|
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)
|
|
132
|
-
- [Architecture](https://stevenvelozo.github.io/pict-section-flow/#/Architecture)
|
|
133
|
-
- [Implementation Reference](https://stevenvelozo.github.io/pict-section-flow/#/Implementation_Reference)
|
|
134
|
-
- [Custom Styling](https://stevenvelozo.github.io/pict-section-flow/#/Custom-Styling)
|
|
135
|
-
- [Layout Persistence](https://stevenvelozo.github.io/pict-section-flow/#/Layout_Persistence)
|
|
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)
|
|
165
|
-
- [pict-view](https://github.com/stevenvelozo/pict-view)
|
|
166
|
-
- [pict-provider](https://github.com/stevenvelozo/pict-provider)
|
|
167
|
-
- [pict-section-form](https://github.com/stevenvelozo/pict-section-form)
|
|
168
|
-
- [fable](https://github.com/stevenvelozo/fable)
|
|
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
|
|
package/docs/Architecture.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Architecture
|
|
2
2
|
|
|
3
|
-
Pict-Section-Flow follows the standard Pict layered architecture
|
|
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
|
|
package/docs/Data_Model.md
CHANGED
|
@@ -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)
|
|
110
|
-
- **Orthogonal**
|
|
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
|
|
package/docs/Getting_Started.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Getting Started
|
|
2
2
|
|
|
3
|
-
This guide walks you through creating a flow diagram from scratch
|
|
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)**
|
|
235
|
-
- **[Implementation Reference](Implementation_Reference.md)**
|
|
236
|
-
- **[Custom Styling](Custom-Styling.md)**
|
|
237
|
-
- **[Layout Persistence](Layout_Persistence.md)**
|
|
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
|
|
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`
|
|
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`
|
|
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`
|
|
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`
|
|
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`
|
|
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)
|
|
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)
|
|
83
|
-
- **`StorageKey: false`**
|
|
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
|
|
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
|
|
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)**
|
|
116
|
-
- **[Architecture](Architecture.md)**
|
|
117
|
-
- **[Implementation Reference](Implementation_Reference.md)**
|
|
118
|
-
- **[Custom Styling](Custom-Styling.md)**
|
|
119
|
-
- **[Layout Persistence](Layout_Persistence.md)**
|
|
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)
|
|
126
|
-
- [pict-view](https://github.com/stevenvelozo/pict-view)
|
|
127
|
-
- [pict-provider](https://github.com/stevenvelozo/pict-provider)
|
|
128
|
-
- [pict-section-form](https://github.com/stevenvelozo/pict-section-form)
|
|
129
|
-
- [fable](https://github.com/stevenvelozo/fable)
|
|
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
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
|
|
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
|
|
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
|
|
35
|
+
- API -- Panels
|
|
36
36
|
|
|
37
37
|
- [openPanel / closePanel / togglePanel](api/openPanel.md)
|
|
38
38
|
|
|
39
|
-
- API
|
|
39
|
+
- API -- Theming & Events
|
|
40
40
|
|
|
41
41
|
- [setTheme / registerTheme](api/setTheme.md)
|
|
42
42
|
- [registerHandler / fireEvent](api/registerHandler.md)
|
|
43
43
|
|
|
44
|
-
- API
|
|
44
|
+
- API -- Layout Persistence
|
|
45
45
|
|
|
46
46
|
- [saveLayout / restoreLayout](api/saveLayout.md)
|
|
47
47
|
|
|
48
|
-
- API
|
|
48
|
+
- API -- Extension Points
|
|
49
49
|
|
|
50
50
|
- [PictFlowCard](api/PictFlowCard.md)
|
|
51
51
|
- [PictFlowCardPropertiesPanel](api/PictFlowCardPropertiesPanel.md)
|
package/docs/api/PictFlowCard.md
CHANGED
|
@@ -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 |
|
|
64
|
-
| `DataType` | string |
|
|
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`
|
|
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)
|
|
215
|
-
- [PictFlowCardPropertiesPanel](PictFlowCardPropertiesPanel.md)
|
|
216
|
-
- [addNode](addNode.md)
|
|
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)
|
|
235
|
-
- [openPanel / closePanel](openPanel.md)
|
|
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`
|
|
49
|
-
- `onFlowChanged`
|
|
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)
|
|
101
|
-
- [addNode](addNode.md)
|
|
100
|
+
- [removeConnection](removeConnection.md) -- Delete a connection
|
|
101
|
+
- [addNode](addNode.md) -- Create nodes to connect
|
package/docs/api/addNode.md
CHANGED
|
@@ -46,8 +46,8 @@ The newly created node object:
|
|
|
46
46
|
|
|
47
47
|
## Events Fired
|
|
48
48
|
|
|
49
|
-
- `onNodeAdded`
|
|
50
|
-
- `onFlowChanged`
|
|
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)
|
|
135
|
-
- [getFlowData](getFlowData.md)
|
|
136
|
-
- [PictFlowCard](PictFlowCard.md)
|
|
137
|
-
- [registerNodeType](registerNodeType.md)
|
|
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
|
package/docs/api/autoLayout.md
CHANGED
|
@@ -73,5 +73,5 @@ flowView.autoLayout();
|
|
|
73
73
|
|
|
74
74
|
## See Also
|
|
75
75
|
|
|
76
|
-
- [setZoom / zoomToFit](setZoom.md)
|
|
77
|
-
- [saveLayout / restoreLayout](saveLayout.md)
|
|
76
|
+
- [setZoom / zoomToFit](setZoom.md) -- Fit the result in the viewport
|
|
77
|
+
- [saveLayout / restoreLayout](saveLayout.md) -- Persist spatial arrangements
|
package/docs/api/getFlowData.md
CHANGED
|
@@ -47,7 +47,7 @@ A deep clone of the complete flow state:
|
|
|
47
47
|
|
|
48
48
|
### Events Fired
|
|
49
49
|
|
|
50
|
-
- `onFlowChanged`
|
|
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)`
|
|
107
|
-
- `getConnection(pConnectionHash)`
|
|
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)
|
|
112
|
-
- [addNode](addNode.md)
|
|
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
|
|
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
|
|
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)
|
|
95
|
+
- [getFlowData / setFlowData](getFlowData.md) -- Direct get/set without AppData
|
package/docs/api/openPanel.md
CHANGED
|
@@ -124,5 +124,5 @@ flowView._EventHandlerProvider.registerHandler('onPanelClosed',
|
|
|
124
124
|
|
|
125
125
|
## See Also
|
|
126
126
|
|
|
127
|
-
- [PictFlowCard](PictFlowCard.md)
|
|
128
|
-
- [PictFlowCardPropertiesPanel](PictFlowCardPropertiesPanel.md)
|
|
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)
|
|
173
|
-
- [selectNode](selectNode.md)
|
|
174
|
-
- [setTheme](setTheme.md)
|
|
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
|
|
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)
|
|
142
|
-
- [addNode](addNode.md)
|
|
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`
|
|
19
|
+
`boolean` -- `true` if the connection was found and removed, `false` otherwise.
|
|
20
20
|
|
|
21
21
|
## Events Fired
|
|
22
22
|
|
|
23
|
-
- `onConnectionRemoved`
|
|
24
|
-
- `onFlowChanged`
|
|
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)
|
|
57
|
-
- [removeNode](removeNode.md)
|
|
56
|
+
- [addConnection](addConnection.md) -- Create a connection
|
|
57
|
+
- [removeNode](removeNode.md) -- Remove a node (cascades connections)
|
package/docs/api/removeNode.md
CHANGED
|
@@ -16,13 +16,13 @@ flowView.removeNode(pNodeHash)
|
|
|
16
16
|
|
|
17
17
|
## Returns
|
|
18
18
|
|
|
19
|
-
`boolean`
|
|
19
|
+
`boolean` -- `true` if the node was found and removed, `false` otherwise.
|
|
20
20
|
|
|
21
21
|
## Events Fired
|
|
22
22
|
|
|
23
|
-
- `onNodeRemoved`
|
|
24
|
-
- `onConnectionRemoved`
|
|
25
|
-
- `onFlowChanged`
|
|
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)
|
|
80
|
-
- [deleteSelected](selectNode.md)
|
|
79
|
+
- [addNode](addNode.md) -- Create a node
|
|
80
|
+
- [deleteSelected](selectNode.md) -- Delete the currently selected element
|
package/docs/api/saveLayout.md
CHANGED
|
@@ -148,5 +148,5 @@ tmpLayoutProvider.loadPersistedLayouts();
|
|
|
148
148
|
|
|
149
149
|
## See Also
|
|
150
150
|
|
|
151
|
-
- [Layout Persistence](../Layout_Persistence.md)
|
|
152
|
-
- [autoLayout](autoLayout.md)
|
|
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)
|
|
68
|
-
- [addNode](addNode.md)
|
|
67
|
+
- [setZoom](setZoom.md) -- Viewport zoom (affects coordinate mapping)
|
|
68
|
+
- [addNode](addNode.md) -- Create nodes at specific coordinates
|
package/docs/api/selectNode.md
CHANGED
|
@@ -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`
|
|
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)
|
|
116
|
-
- [registerHandler](registerHandler.md)
|
|
115
|
+
- [addNode](addNode.md) / [removeNode](removeNode.md) -- Node CRUD
|
|
116
|
+
- [registerHandler](registerHandler.md) -- Event hooks
|
package/docs/api/setTheme.md
CHANGED
|
@@ -164,5 +164,5 @@ flowView._ThemeProvider.registerTheme('corporate',
|
|
|
164
164
|
|
|
165
165
|
## See Also
|
|
166
166
|
|
|
167
|
-
- [Custom Styling](../Custom-Styling.md)
|
|
168
|
-
- [registerHandler](registerHandler.md)
|
|
167
|
+
- [Custom Styling](../Custom-Styling.md) -- Full CSS custom properties reference
|
|
168
|
+
- [registerHandler](registerHandler.md) -- Listen for `onThemeChanged` events
|
package/docs/api/setZoom.md
CHANGED
|
@@ -92,6 +92,6 @@ Zoom bounds are set in the view configuration:
|
|
|
92
92
|
|
|
93
93
|
## See Also
|
|
94
94
|
|
|
95
|
-
- [screenToSVGCoords](screenToSVGCoords.md)
|
|
96
|
-
- [toggleFullscreen](toggleFullscreen.md)
|
|
97
|
-
- [autoLayout](autoLayout.md)
|
|
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`
|
|
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)
|
|
68
|
+
- [setZoom / zoomToFit](setZoom.md) -- Viewport controls
|
package/docs/card-help/EACH.md
CHANGED
|
@@ -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)
|
|
8
|
-
- **Item** (output)
|
|
9
|
-
- **Done** (output)
|
|
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
|
|
package/docs/card-help/FREAD.md
CHANGED
|
@@ -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)
|
|
8
|
-
- **Data** (output)
|
|
9
|
-
- **Error** (output)
|
|
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**
|
|
14
|
-
- **Encoding**
|
|
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
|
|