pict-section-flow 0.0.17 → 0.0.19

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

@@ -17,17 +17,17 @@ const _ViewConfiguration =
 <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 style="padding:4px 6px;background:#f8f9fa;border:1px solid var(--theme-color-border-default, #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 style="padding:4px 6px;background:#f8f9fa;border:1px solid var(--theme-color-border-default, #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 style="padding:4px 6px;background:#f8f9fa;border:1px solid var(--theme-color-border-default, #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">
+	<div style="padding:6px;background:#eafaf1;border:1px solid var(--theme-color-status-success, #27ae60);border-radius:3px;font-size:11px;color:var(--theme-color-status-success, #27ae60)">
 		This panel is rendered by a registered pict-view (View panel type).
 	</div>
 </div>

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

@@ -1,5 +1,6 @@
 const libPictView = require('pict-view');
 const libPictSectionFlow = require('pict-section-flow');
+const libSampleFlows = require('../sample-flows.js');
 
 // FlowCard definitions
 const libFlowCardIfThenElse = require('../cards/FlowCard-IfThenElse.js');
@@ -36,7 +37,7 @@ const _ViewConfiguration =
 			flex-shrink: 0;
 			margin: 0 0 0.75em 0;
 			padding-bottom: 0.75em;
-			border-bottom: 1px solid #eee;
+			border-bottom: 1px solid var(--theme-color-border-light, #eee);
 			display: flex;
 			align-items: flex-start;
 			justify-content: space-between;
@@ -59,7 +60,7 @@ const _ViewConfiguration =
 			height: 36px;
 			border-radius: 50%;
 			border: 2px solid #3498db;
-			background: #fff;
+			background: var(--theme-color-background-panel, #fff);
 			color: #3498db;
 			font-size: 1.2em;
 			font-weight: 700;
@@ -71,16 +72,57 @@ const _ViewConfiguration =
 		}
 		.flowexample-help-toggle:hover {
 			background: #3498db;
-			color: #fff;
+			color: var(--theme-color-background-panel, #fff);
 		}
 		.flowexample-help-toggle.active {
 			background: #3498db;
-			color: #fff;
+			color: var(--theme-color-background-panel, #fff);
 		}
 		#FlowExample-Flow-Container {
 			flex: 1;
 			min-height: 0;
 		}
+		.flowexample-sample-bar {
+			flex-shrink: 0;
+			margin: 0 0 0.75em 0;
+			padding: 0.6em 0.75em;
+			background: var(--theme-color-background-panel, #fff);
+			border: 1px solid var(--theme-color-border-light, #dee2e6);
+			border-radius: 6px;
+			display: flex;
+			align-items: center;
+			gap: 0.6em;
+			flex-wrap: wrap;
+		}
+		.flowexample-sample-bar label {
+			font-weight: 600;
+			color: #2c3e50;
+			font-size: 0.9em;
+		}
+		.flowexample-sample-bar select {
+			padding: 0.35em 0.55em;
+			border: 1px solid #ced4da;
+			border-radius: 4px;
+			background: #fff;
+			font-size: 0.95em;
+			min-width: 220px;
+		}
+		.flowexample-sample-description {
+			flex: 1;
+			min-width: 280px;
+			color: #5a6470;
+			font-size: 0.85em;
+			line-height: 1.4;
+		}
+		.flowexample-sample-recommended {
+			padding: 0.2em 0.55em;
+			background: #eaf6ee;
+			color: #1f7a3f;
+			border-radius: 4px;
+			font-size: 0.8em;
+			font-weight: 600;
+			white-space: nowrap;
+		}
 		.flowexample-help-panel {
 			flex-shrink: 0;
 			display: none;
@@ -105,8 +147,8 @@ const _ViewConfiguration =
 			gap: 1em;
 		}
 		.flowexample-hint {
-			background: #fff;
-			border: 1px solid #e0e0e0;
+			background: var(--theme-color-background-panel, #fff);
+			border: 1px solid var(--theme-color-border-default, #e0e0e0);
 			border-radius: 6px;
 			padding: 1em 1.25em;
 		}
@@ -117,7 +159,7 @@ const _ViewConfiguration =
 		}
 		.flowexample-hint p {
 			margin: 0;
-			color: #666;
+			color: var(--theme-color-text-secondary, #666);
 			font-size: 0.85em;
 			line-height: 1.5;
 		}
@@ -126,7 +168,7 @@ const _ViewConfiguration =
 			padding: 0.1em 0.3em;
 			border-radius: 3px;
 			font-size: 0.9em;
-			color: #e74c3c;
+			color: var(--theme-color-status-error, #e74c3c);
 		}
 	`,
 
@@ -180,6 +222,12 @@ const _ViewConfiguration =
 			</div>
 		</div>
 	</div>
+	<div class="flowexample-sample-bar">
+		<label for="FlowExample-SampleSelect">Sample graph:</label>
+		<select id="FlowExample-SampleSelect"></select>
+		<span class="flowexample-sample-recommended" id="FlowExample-SampleRecommended"></span>
+		<span class="flowexample-sample-description" id="FlowExample-SampleDescription">Pick a sample, then open the <strong>Algorithm</strong> popup in the toolbar to compare layouts.</span>
+	</div>
 	<div id="FlowExample-Flow-Container"></div>
 </div>
 `
@@ -311,8 +359,93 @@ class FlowExampleMainWorkspaceView extends libPictView
 			});
 		}
 
+		// Populate the sample-graph selector and wire its change handler.
+		this._populateSampleSelector();
+
 		return super.onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent);
 	}
+
+	/**
+	 * Populate the sample-graph dropdown above the flow diagram and wire
+	 * the change handler. The first option ("Hello World") is the rich
+	 * default flow that lives in AppData.FlowExample.SampleFlow; the rest
+	 * come from sample-flows.js and showcase a different layout strength.
+	 */
+	_populateSampleSelector()
+	{
+		let tmpSelect = document.getElementById('FlowExample-SampleSelect');
+		let tmpDesc   = document.getElementById('FlowExample-SampleDescription');
+		let tmpReco   = document.getElementById('FlowExample-SampleRecommended');
+		if (!tmpSelect || !tmpDesc || !tmpReco) return;
+
+		// Clear pre-existing options
+		while (tmpSelect.firstChild) tmpSelect.removeChild(tmpSelect.firstChild);
+
+		let tmpHelloOpt = document.createElement('option');
+		tmpHelloOpt.value = '__hello-world__';
+		tmpHelloOpt.textContent = 'Hello World — multi-feature reference';
+		tmpSelect.appendChild(tmpHelloOpt);
+
+		let tmpKeys = libSampleFlows.getSampleNames();
+		for (let i = 0; i < tmpKeys.length; i++)
+		{
+			let tmpSample = libSampleFlows.getSample(tmpKeys[i]);
+			let tmpOpt = document.createElement('option');
+			tmpOpt.value = tmpKeys[i];
+			tmpOpt.textContent = tmpSample.Name;
+			tmpSelect.appendChild(tmpOpt);
+		}
+
+		// Initial description (Hello World)
+		tmpDesc.innerHTML = 'Pick a sample, then open the <strong>Algorithm</strong> popup in the toolbar to compare layouts.';
+		tmpReco.style.display = 'none';
+
+		let tmpView = this;
+		tmpSelect.addEventListener('change', function ()
+		{
+			let tmpKey = tmpSelect.value;
+			tmpView._loadSample(tmpKey, tmpDesc, tmpReco);
+		});
+	}
+
+	/**
+	 * Load a sample flow into the FlowView. `__hello-world__` reloads the
+	 * original AppData-backed flow; everything else comes from sample-flows.
+	 *
+	 * @param {string} pKey
+	 * @param {HTMLElement} pDescEl
+	 * @param {HTMLElement} pRecoEl
+	 */
+	_loadSample(pKey, pDescEl, pRecoEl)
+	{
+		if (!this._FlowView) return;
+
+		if (pKey === '__hello-world__')
+		{
+			this._FlowView.setFlowData(this.pict.AppData.FlowExample.SampleFlow);
+			pDescEl.innerHTML = 'The full reference flow with all card types, properties panels, and an error branch. Originally designed by hand — set <code>LayoutAlgorithm</code> to <em>Layered</em> to see how the auto-layout compares.';
+			pRecoEl.style.display = 'none';
+			return;
+		}
+
+		let tmpSample = libSampleFlows.getSample(pKey);
+		if (!tmpSample) return;
+
+		// setFlowData expects a fresh _FlowData-shaped object — deep clone so
+		// re-loading the same sample doesn't share mutated node references
+		// with prior loads.
+		this._FlowView.setFlowData(JSON.parse(JSON.stringify(tmpSample.Flow)));
+		pDescEl.textContent = tmpSample.Description;
+		if (tmpSample.Recommended)
+		{
+			pRecoEl.style.display = '';
+			pRecoEl.textContent = `Try: ${tmpSample.Recommended}`;
+		}
+		else
+		{
+			pRecoEl.style.display = 'none';
+		}
+	}
 }
 
 module.exports = FlowExampleMainWorkspaceView;

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

@@ -32,7 +32,7 @@ const _ViewConfiguration =
 			cursor: pointer;
 		}
 		.flowexample-topbar-brand:hover {
-			color: #fff;
+			color: var(--theme-color-background-panel, #fff);
 		}
 		.flowexample-topbar-nav {
 			display: flex;
@@ -50,7 +50,7 @@ const _ViewConfiguration =
 		}
 		.flowexample-topbar-nav a:hover {
 			background-color: #34495e;
-			color: #fff;
+			color: var(--theme-color-background-panel, #fff);
 		}
 	`,
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pict-section-flow",
-    "version": "0.0.17",
+    "version": "0.0.19",
     "description": "Pict Section Flow Diagram",
     "main": "source/Pict-Section-Flow.js",
     "scripts": {
@@ -14,15 +14,16 @@
     "license": "MIT",
     "dependencies": {
         "fable-serviceproviderbase": "^3.0.19",
-        "pict-provider": "^1.0.12",
-        "pict-section-form": "^1.0.195",
-        "pict-view": "^1.0.67"
+        "pict-provider": "^1.0.13",
+        "pict-section-form": "^1.0.196",
+        "pict-view": "^1.0.68"
     },
     "devDependencies": {
         "chai": "^6.2.2",
         "mocha": "^11.7.5",
-        "pict": "^1.0.359",
-        "pict-router": "^1.0.9",
-        "quackage": "^1.0.65"
+        "pict": "^1.0.367",
+        "pict-docuserve": "^0.1.6",
+        "pict-router": "^1.0.10",
+        "quackage": "^1.2.3"
     }
 }

package/source/Pict-Section-Flow.js

@@ -35,6 +35,32 @@ module.exports.PictProviderFlowCSS = require('./providers/PictProvider-Flow-CSS.
 module.exports.PictProviderFlowIcons = require('./providers/PictProvider-Flow-Icons.js');
 module.exports.PictProviderFlowConnectorShapes = require('./providers/PictProvider-Flow-ConnectorShapes.js');
 
+// Layout algorithm descriptors (consumers can register custom algorithms via
+// _LayoutService.registerAlgorithm({ Name, Apply, DefaultParameters, ParameterSchema }))
+module.exports.LayoutAlgorithms =
+{
+	Custom:           require('./providers/layouts/Layout-Custom.js'),
+	Layered:          require('./providers/layouts/Layout-Layered.js'),
+	ForcedFromCenter: require('./providers/layouts/Layout-ForcedFromCenter.js'),
+	Grid:             require('./providers/layouts/Layout-Grid.js'),
+	Circular:         require('./providers/layouts/Layout-Circular.js'),
+	Tabular:          require('./providers/layouts/Layout-Tabular.js'),
+	Columnar:         require('./providers/layouts/Layout-Columnar.js')
+};
+
+// Edge-theme descriptors (consumers can register custom edge themes via
+// _LayoutService.registerEdgeTheme({ Name, GeneratePath, AdjustLayout?, ResolveAttachment?, ... }))
+module.exports.EdgeThemes =
+{
+	Bezier:               require('./providers/edges/Edge-Bezier.js'),
+	Orthogonal:           require('./providers/edges/Edge-Orthogonal.js'),
+	Straight:             require('./providers/edges/Edge-Straight.js'),
+	OrthogonalSnap:       require('./providers/edges/Edge-OrthogonalSnap.js'),
+	Perimeter:            require('./providers/edges/Edge-Perimeter.js'),
+	PerimeterLinear:      require('./providers/edges/Edge-Perimeter-Linear.js'),
+	PerimeterOrthogonal:  require('./providers/edges/Edge-Perimeter-Orthogonal.js')
+};
+
 // FlowCard base class
 module.exports.PictFlowCard = require('./PictFlowCard.js');