pict-section-flow 0.0.1 → 0.0.2

package/example_applications/simple_cards/source/cards/FlowCard-IfThenElse.js

@@ -0,0 +1,47 @@
+const libPictFlowCard = require('pict-section-flow').PictFlowCard;
+
+class FlowCardIfThenElse extends libPictFlowCard
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, Object.assign(
+			{},
+			{
+				Title: 'If-Then-Else',
+				Name: 'Conditional Branch',
+				Code: 'ITE',
+				Description: 'Evaluates a condition and routes to the Then or Else branch.',
+				Icon: '\u2753',
+				Tooltip: 'If-Then-Else: Routes flow based on a boolean condition',
+				Category: 'Control Flow',
+				TitleBarColor: '#e67e22',
+				BodyStyle: { fill: '#fef5e7', stroke: '#e67e22' },
+				Width: 200,
+				Height: 100,
+				Inputs:
+				[
+					{ Name: 'In', Side: 'left', MinimumInputCount: 1, MaximumInputCount: 1 }
+				],
+				Outputs:
+				[
+					{ Name: 'Then', Side: 'right' },
+					{ Name: 'Else', Side: 'bottom' }
+				],
+				PropertiesPanel:
+				{
+					PanelType: 'Markdown',
+					DefaultWidth: 300,
+					DefaultHeight: 200,
+					Title: 'If-Then-Else Info',
+					Configuration:
+					{
+						Markdown: '## Conditional Branch\n\nEvaluates a **boolean condition** and routes the flow:\n\n- **Then** output: condition is *true*\n- **Else** output: condition is *false*\n\nSet the condition expression in the node data.'
+					}
+				}
+			},
+			pOptions),
+			pServiceHash);
+	}
+}
+
+module.exports = FlowCardIfThenElse;

package/example_applications/simple_cards/source/cards/FlowCard-LogValues.js

@@ -0,0 +1,53 @@
+const libPictFlowCard = require('pict-section-flow').PictFlowCard;
+
+class FlowCardLogValues extends libPictFlowCard
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, Object.assign(
+			{},
+			{
+				Title: 'Log Values',
+				Name: 'Log to Console',
+				Code: 'LOG',
+				Description: 'Logs input values to the console or log output.',
+				Icon: '\uD83D\uDCDD',
+				Tooltip: 'Log Values: Output values to the log',
+				Category: 'Debug',
+				TitleBarColor: '#7f8c8d',
+				BodyStyle: { fill: '#f2f3f4', stroke: '#7f8c8d' },
+				Width: 160,
+				Height: 80,
+				Inputs:
+				[
+					{ Name: 'Values', Side: 'left', MinimumInputCount: 1, MaximumInputCount: -1 }
+				],
+				Outputs:
+				[
+					{ Name: 'Pass', Side: 'right' }
+				],
+				PropertiesPanel:
+				{
+					PanelType: 'Template',
+					DefaultWidth: 260,
+					DefaultHeight: 140,
+					Title: 'Log Settings',
+					Configuration:
+					{
+						Templates:
+						[
+							{
+								Hash: 'flow-card-log-panel',
+								Template: '<div style="padding:4px"><label style="font-size:11px;color:#7f8c8d">Log Level</label><div style="font-size:12px;padding:4px 0">{~D:Record.Data.LogLevel~}</div><label style="font-size:11px;color:#7f8c8d">Format</label><div style="font-size:12px;padding:4px 0">{~D:Record.Data.Format~}</div></div>'
+							}
+						],
+						TemplateHash: 'flow-card-log-panel'
+					}
+				}
+			},
+			pOptions),
+			pServiceHash);
+	}
+}
+
+module.exports = FlowCardLogValues;

package/example_applications/simple_cards/source/cards/FlowCard-SetValue.js

@@ -0,0 +1,95 @@
+const libPictFlowCard = require('pict-section-flow').PictFlowCard;
+
+class FlowCardSetValue extends libPictFlowCard
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, Object.assign(
+			{},
+			{
+				Title: 'Set Value',
+				Name: 'Assign Value',
+				Code: 'SET',
+				Description: 'Sets a named value in the flow context.',
+				Icon: '\u270F\uFE0F',
+				Tooltip: 'Set Value: Assign a value in the context',
+				Category: 'Data',
+				TitleBarColor: '#16a085',
+				BodyStyle: { fill: '#e8f8f5', stroke: '#16a085' },
+				Width: 170,
+				Height: 80,
+				Inputs:
+				[
+					{ Name: 'In', Side: 'left', MinimumInputCount: 1, MaximumInputCount: 1 }
+				],
+				Outputs:
+				[
+					{ Name: 'Out', Side: 'right' }
+				],
+				PropertiesPanel:
+				{
+					PanelType: 'Form',
+					DefaultWidth: 320,
+					DefaultHeight: 200,
+					Title: 'Set Value Properties',
+					Configuration:
+					{
+						Manifest:
+						{
+							Scope: 'FlowCardSetValue',
+							Sections:
+							[
+								{
+									Name: 'Value Assignment',
+									Hash: 'SetValueSection',
+									Groups:
+									[
+										{
+											Name: 'Settings',
+											Hash: 'SetValueGroup'
+										}
+									]
+								}
+							],
+							Descriptors:
+							{
+								'Record.Data.VariableName':
+								{
+									Name: 'Variable Name',
+									Hash: 'VariableName',
+									DataType: 'String',
+									Default: '',
+									PictForm:
+									{
+										Section: 'SetValueSection',
+										Group: 'SetValueGroup',
+										Row: 1,
+										Width: 12
+									}
+								},
+								'Record.Data.Expression':
+								{
+									Name: 'Value Expression',
+									Hash: 'Expression',
+									DataType: 'String',
+									Default: '',
+									PictForm:
+									{
+										Section: 'SetValueSection',
+										Group: 'SetValueGroup',
+										Row: 2,
+										Width: 12,
+										InputType: 'TextArea'
+									}
+								}
+							}
+						}
+					}
+				}
+			},
+			pOptions),
+			pServiceHash);
+	}
+}
+
+module.exports = FlowCardSetValue;

package/example_applications/simple_cards/source/cards/FlowCard-Switch.js

@@ -0,0 +1,37 @@
+const libPictFlowCard = require('pict-section-flow').PictFlowCard;
+
+class FlowCardSwitch extends libPictFlowCard
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, Object.assign(
+			{},
+			{
+				Title: 'Switch',
+				Name: 'Multi-way Branch',
+				Code: 'SW',
+				Description: 'Routes flow to one of multiple cases based on a value.',
+				Icon: '\uD83D\uDD00',
+				Tooltip: 'Switch: Multi-way branch on a value',
+				Category: 'Control Flow',
+				TitleBarColor: '#d35400',
+				BodyStyle: { fill: '#fbeee6', stroke: '#d35400' },
+				Width: 200,
+				Height: 120,
+				Inputs:
+				[
+					{ Name: 'In', Side: 'left', MinimumInputCount: 1, MaximumInputCount: 1 }
+				],
+				Outputs:
+				[
+					{ Name: 'Case A', Side: 'right' },
+					{ Name: 'Case B', Side: 'right' },
+					{ Name: 'Default', Side: 'bottom' }
+				]
+			},
+			pOptions),
+			pServiceHash);
+	}
+}
+
+module.exports = FlowCardSwitch;

package/example_applications/simple_cards/source/views/PictView-FlowExample-FileWriteInfo.js

@@ -0,0 +1,59 @@
+const libPictView = require('pict-view');
+
+const _ViewConfiguration =
+{
+	ViewIdentifier: "FlowExample-FileWriteInfo",
+
+	DefaultRenderable: "FileWriteInfo-Content",
+	DefaultDestinationAddress: "#FileWriteInfo-Container",
+
+	AutoRender: false,
+
+	Templates:
+	[
+		{
+			Hash: "FileWriteInfo-Template",
+			Template: /*html*/`
+<div style="padding:6px;font-size:12px;line-height:1.6;color:#2c3e50">
+	<div style="margin-bottom:8px">
+		<label style="font-weight:600;font-size:11px;color:#7f8c8d;text-transform:uppercase;letter-spacing:0.5px">Output Path</label>
+		<div style="padding:4px 6px;background:#f8f9fa;border:1px solid #e0e0e0;border-radius:3px;margin-top:2px;font-family:monospace;font-size:11px">{~D:Record.Data.OutputPath~}</div>
+	</div>
+	<div style="margin-bottom:8px">
+		<label style="font-weight:600;font-size:11px;color:#7f8c8d;text-transform:uppercase;letter-spacing:0.5px">Write Mode</label>
+		<div style="padding:4px 6px;background:#f8f9fa;border:1px solid #e0e0e0;border-radius:3px;margin-top:2px">{~D:Record.Data.WriteMode~}</div>
+	</div>
+	<div style="margin-bottom:8px">
+		<label style="font-weight:600;font-size:11px;color:#7f8c8d;text-transform:uppercase;letter-spacing:0.5px">Encoding</label>
+		<div style="padding:4px 6px;background:#f8f9fa;border:1px solid #e0e0e0;border-radius:3px;margin-top:2px">{~D:Record.Data.Encoding~}</div>
+	</div>
+	<div style="padding:6px;background:#eafaf1;border:1px solid #27ae60;border-radius:3px;font-size:11px;color:#27ae60">
+		This panel is rendered by a registered pict-view (View panel type).
+	</div>
+</div>
+`
+		}
+	],
+
+	Renderables:
+	[
+		{
+			RenderableHash: "FileWriteInfo-Content",
+			TemplateHash: "FileWriteInfo-Template",
+			DestinationAddress: "#FileWriteInfo-Container",
+			RenderMethod: "replace"
+		}
+	]
+};
+
+class FlowExampleFileWriteInfoView extends libPictView
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+	}
+}
+
+module.exports = FlowExampleFileWriteInfoView;
+
+module.exports.default_configuration = _ViewConfiguration;

package/{example_application → example_applications/simple_cards}/source/views/PictView-FlowExample-Layout.js

@@ -13,13 +13,17 @@ const _ViewConfiguration =
 		#FlowExample-Application-Container {
 			display: flex;
 			flex-direction: column;
-			min-height: 100vh;
+			height: 100vh;
+			overflow: hidden;
 		}
 		#FlowExample-TopBar-Container {
 			flex-shrink: 0;
 		}
 		#FlowExample-Content-Container {
 			flex: 1;
+			display: flex;
+			flex-direction: column;
+			min-height: 0;
 		}
 		#FlowExample-BottomBar-Container {
 			flex-shrink: 0;

package/example_applications/simple_cards/source/views/PictView-FlowExample-MainWorkspace.js

@@ -0,0 +1,312 @@
+const libPictView = require('pict-view');
+const libPictSectionFlow = require('pict-section-flow');
+
+// FlowCard definitions
+const libFlowCardIfThenElse = require('../cards/FlowCard-IfThenElse.js');
+const libFlowCardSwitch = require('../cards/FlowCard-Switch.js');
+const libFlowCardEach = require('../cards/FlowCard-Each.js');
+const libFlowCardFileRead = require('../cards/FlowCard-FileRead.js');
+const libFlowCardFileWrite = require('../cards/FlowCard-FileWrite.js');
+const libFlowCardLogValues = require('../cards/FlowCard-LogValues.js');
+const libFlowCardSetValue = require('../cards/FlowCard-SetValue.js');
+const libFlowCardGetValue = require('../cards/FlowCard-GetValue.js');
+
+const _ViewConfiguration =
+{
+	ViewIdentifier: "FlowExample-MainWorkspace",
+
+	DefaultRenderable: "FlowExample-MainWorkspace-Content",
+	DefaultDestinationAddress: "#FlowExample-Content-Container",
+
+	AutoRender: false,
+
+	CSS: /*css*/`
+		.flowexample-workspace {
+			padding: 0.75em;
+			display: flex;
+			flex-direction: column;
+			flex: 1;
+			min-height: 0;
+		}
+		.flowexample-workspace-header {
+			flex-shrink: 0;
+			margin: 0 0 0.75em 0;
+			padding-bottom: 0.75em;
+			border-bottom: 1px solid #eee;
+			display: flex;
+			align-items: flex-start;
+			justify-content: space-between;
+		}
+		.flowexample-workspace-header h1 {
+			margin: 0 0 0.25em 0;
+			font-size: 2em;
+			font-weight: 300;
+			color: #2c3e50;
+		}
+		.flowexample-workspace-header p {
+			margin: 0;
+			color: #7f8c8d;
+			font-size: 1.1em;
+		}
+		.flowexample-help-toggle {
+			flex-shrink: 0;
+			margin-left: 1em;
+			width: 36px;
+			height: 36px;
+			border-radius: 50%;
+			border: 2px solid #3498db;
+			background: #fff;
+			color: #3498db;
+			font-size: 1.2em;
+			font-weight: 700;
+			cursor: pointer;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			transition: background 0.15s, color 0.15s;
+		}
+		.flowexample-help-toggle:hover {
+			background: #3498db;
+			color: #fff;
+		}
+		.flowexample-help-toggle.active {
+			background: #3498db;
+			color: #fff;
+		}
+		#FlowExample-Flow-Container {
+			flex: 1;
+			min-height: 0;
+		}
+		.flowexample-help-panel {
+			flex-shrink: 0;
+			display: none;
+			margin-bottom: 0.75em;
+			padding: 1.5em;
+			background: #f8f9fa;
+			border: 1px solid #dee2e6;
+			border-radius: 8px;
+		}
+		.flowexample-help-panel.visible {
+			display: block;
+		}
+		.flowexample-help-panel h3 {
+			margin: 0 0 1em 0;
+			font-size: 1.1em;
+			font-weight: 600;
+			color: #2c3e50;
+		}
+		.flowexample-hints {
+			display: grid;
+			grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+			gap: 1em;
+		}
+		.flowexample-hint {
+			background: #fff;
+			border: 1px solid #e0e0e0;
+			border-radius: 6px;
+			padding: 1em 1.25em;
+		}
+		.flowexample-hint h4 {
+			margin: 0 0 0.35em 0;
+			font-size: 0.95em;
+			color: #2c3e50;
+		}
+		.flowexample-hint p {
+			margin: 0;
+			color: #666;
+			font-size: 0.85em;
+			line-height: 1.5;
+		}
+		.flowexample-hint code {
+			background: #f4f4f5;
+			padding: 0.1em 0.3em;
+			border-radius: 3px;
+			font-size: 0.9em;
+			color: #e74c3c;
+		}
+	`,
+
+	Templates:
+	[
+		{
+			Hash: "FlowExample-MainWorkspace-Template",
+			Template: /*html*/`
+<div class="flowexample-workspace">
+	<div class="flowexample-workspace-header">
+		<div>
+			<h1>Flow Diagram</h1>
+			<p>Build flow diagrams from cards. Open the Card Palette to browse available cards, or select a node type from the dropdown and click + Add Node.</p>
+		</div>
+		<button class="flowexample-help-toggle" id="FlowExample-HelpToggle" title="Toggle help">?</button>
+	</div>
+	<div class="flowexample-help-panel" id="FlowExample-HelpPanel">
+		<h3>Quick Reference</h3>
+		<div class="flowexample-hints">
+			<div class="flowexample-hint">
+				<h4>Add Nodes</h4>
+				<p>Select a node type from the dropdown and click <code>+ Add Node</code> in the toolbar.</p>
+			</div>
+			<div class="flowexample-hint">
+				<h4>Connect Nodes</h4>
+				<p>Drag from a green output port to a blue input port to create a connection.</p>
+			</div>
+			<div class="flowexample-hint">
+				<h4>Move Nodes</h4>
+				<p>Click and drag any node to reposition it. Connections update automatically.</p>
+			</div>
+			<div class="flowexample-hint">
+				<h4>Pan &amp; Zoom</h4>
+				<p>Click and drag the background to pan. Use the mouse wheel to zoom in and out.</p>
+			</div>
+			<div class="flowexample-hint">
+				<h4>Delete</h4>
+				<p>Select a node or connection and press <code>Delete</code> or click the Delete button.</p>
+			</div>
+			<div class="flowexample-hint">
+				<h4>Auto Layout</h4>
+				<p>Click <code>Auto Layout</code> in the toolbar to automatically arrange nodes left to right.</p>
+			</div>
+			<div class="flowexample-hint">
+				<h4>Properties Panel</h4>
+				<p>Double-click a node to open its properties panel (if the card type defines one).</p>
+			</div>
+			<div class="flowexample-hint">
+				<h4>Save Layouts</h4>
+				<p>Use the Layouts toolbar to save, restore, and delete named arrangement snapshots.</p>
+			</div>
+		</div>
+	</div>
+	<div id="FlowExample-Flow-Container"></div>
+</div>
+`
+		}
+	],
+
+	Renderables:
+	[
+		{
+			RenderableHash: "FlowExample-MainWorkspace-Content",
+			TemplateHash: "FlowExample-MainWorkspace-Template",
+			DestinationAddress: "#FlowExample-Content-Container",
+			RenderMethod: "replace"
+		}
+	]
+};
+
+class FlowExampleMainWorkspaceView extends libPictView
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+
+		this._FlowView = null;
+	}
+
+	/**
+	 * Build a map of FlowCard node type configurations keyed by hash.
+	 * These are passed as NodeTypes in the FlowView options so they
+	 * are available from the moment the NodeTypeProvider is created,
+	 * before the toolbar renders.
+	 */
+	_buildFlowCardNodeTypes()
+	{
+		let tmpCardClasses =
+		[
+			libFlowCardIfThenElse,
+			libFlowCardSwitch,
+			libFlowCardEach,
+			libFlowCardFileRead,
+			libFlowCardFileWrite,
+			libFlowCardLogValues,
+			libFlowCardSetValue,
+			libFlowCardGetValue
+		];
+
+		let tmpNodeTypes = {};
+
+		for (let i = 0; i < tmpCardClasses.length; i++)
+		{
+			let tmpCard = new tmpCardClasses[i](this.fable, {}, `FlowCard-${i}`);
+			let tmpConfig = tmpCard.getNodeTypeConfiguration();
+			tmpNodeTypes[tmpConfig.Hash] = tmpConfig;
+		}
+
+		return tmpNodeTypes;
+	}
+
+	onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent)
+	{
+		// Create and render the flow section view into its container
+		if (!this._FlowView)
+		{
+			this._FlowView = this.pict.addView('FlowExample-FlowDiagram',
+				{
+					ViewIdentifier: 'FlowExample-FlowDiagram',
+
+					DefaultRenderable: 'Flow-Container',
+					DefaultDestinationAddress: '#FlowExample-Flow-Container',
+
+					AutoRender: false,
+
+					FlowDataAddress: 'AppData.FlowExample.SampleFlow',
+
+					TargetElementAddress: '#Flow-SVG-Container',
+
+					EnableToolbar: true,
+					EnablePanning: true,
+					EnableZooming: true,
+					EnableNodeDragging: true,
+					EnableConnectionCreation: true,
+					EnableGridSnap: false,
+					GridSnapSize: 20,
+
+					MinZoom: 0.1,
+					MaxZoom: 5.0,
+					ZoomStep: 0.1,
+
+					DefaultNodeType: 'default',
+					DefaultNodeWidth: 180,
+					DefaultNodeHeight: 80,
+
+					// Pre-register FlowCard node types so they are available
+					// when the NodeTypeProvider is created, before toolbar renders
+					NodeTypes: this._buildFlowCardNodeTypes(),
+
+					Renderables:
+					[
+						{
+							RenderableHash: 'Flow-Container',
+							TemplateHash: 'Flow-Container-Template',
+							DestinationAddress: '#FlowExample-Flow-Container',
+							RenderMethod: 'replace'
+						}
+					]
+				},
+				libPictSectionFlow
+			);
+		}
+
+		// Reset the flow view's render state so it re-initializes SVG elements
+		// when re-rendered (e.g. after navigating away and back)
+		this._FlowView.initialRenderComplete = false;
+		this._FlowView.render();
+
+		// Wire up the help toggle button
+		let tmpHelpToggle = document.getElementById('FlowExample-HelpToggle');
+		let tmpHelpPanel = document.getElementById('FlowExample-HelpPanel');
+		if (tmpHelpToggle && tmpHelpPanel)
+		{
+			tmpHelpToggle.addEventListener('click', function ()
+			{
+				tmpHelpPanel.classList.toggle('visible');
+				tmpHelpToggle.classList.toggle('active');
+			});
+		}
+
+		return super.onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent);
+	}
+}
+
+module.exports = FlowExampleMainWorkspaceView;
+
+module.exports.default_configuration = _ViewConfiguration;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pict-section-flow",
-    "version": "0.0.1",
+    "version": "0.0.2",
     "description": "Pict Section Flow Diagram",
     "main": "source/Pict-Section-Flow.js",
     "scripts": {
@@ -11,12 +11,12 @@
     "author": "steven velozo <steven@velozo.com>",
     "license": "MIT",
     "dependencies": {
-        "pict-view": "^1.0.64",
-        "pict-provider": "^1.0.3",
-        "fable-serviceproviderbase": "^3.0.15"
+        "pict-view": "^1.0.67",
+        "pict-provider": "^1.0.12",
+        "fable-serviceproviderbase": "^3.0.19"
     },
     "devDependencies": {
-        "pict": "^1.0.343",
-        "quackage": "^1.0.42"
+        "pict": "^1.0.354",
+        "quackage": "^1.0.58"
     }
 }

package/source/Pict-Section-Flow.js

@@ -12,8 +12,27 @@ module.exports.PictViewFlowToolbar = require('./views/PictView-Flow-Toolbar.js')
 // Services
 module.exports.PictServiceFlowInteractionManager = require('./services/PictService-Flow-InteractionManager.js');
 module.exports.PictServiceFlowConnectionRenderer = require('./services/PictService-Flow-ConnectionRenderer.js');
+module.exports.PictServiceFlowTether = require('./services/PictService-Flow-Tether.js');
 module.exports.PictServiceFlowLayout = require('./services/PictService-Flow-Layout.js');
+module.exports.PictServiceFlowPathGenerator = require('./services/PictService-Flow-PathGenerator.js');
 
 // Providers
 module.exports.PictProviderFlowNodeTypes = require('./providers/PictProvider-Flow-NodeTypes.js');
 module.exports.PictProviderFlowEventHandler = require('./providers/PictProvider-Flow-EventHandler.js');
+module.exports.PictProviderFlowLayouts = require('./providers/PictProvider-Flow-Layouts.js');
+module.exports.PictProviderFlowSVGHelpers = require('./providers/PictProvider-Flow-SVGHelpers.js');
+module.exports.PictProviderFlowGeometry = require('./providers/PictProvider-Flow-Geometry.js');
+module.exports.PictProviderFlowPanelChrome = require('./providers/PictProvider-Flow-PanelChrome.js');
+
+// FlowCard base class
+module.exports.PictFlowCard = require('./PictFlowCard.js');
+
+// FlowCardPropertiesPanel base class and panel types
+module.exports.PictFlowCardPropertiesPanel = require('./PictFlowCardPropertiesPanel.js');
+module.exports.FlowCardPropertiesPanelTemplate = require('./panels/FlowCardPropertiesPanel-Template.js');
+module.exports.FlowCardPropertiesPanelMarkdown = require('./panels/FlowCardPropertiesPanel-Markdown.js');
+module.exports.FlowCardPropertiesPanelForm = require('./panels/FlowCardPropertiesPanel-Form.js');
+module.exports.FlowCardPropertiesPanelView = require('./panels/FlowCardPropertiesPanel-View.js');
+
+// Properties panel renderer view
+module.exports.PictViewFlowPropertiesPanel = require('./views/PictView-Flow-PropertiesPanel.js');