npm - pict-section-flow - Versions diffs - 0.0.1 - Mend

pict-section-flow 0.0.1

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 (23) hide show

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2026 Steven Velozo
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/example_application/css/flowexample.css ADDED Viewed

@@ -0,0 +1,65 @@
+/* ============================================================================
+   Pict Section Flow Example - Base Styles
+   ============================================================================ */
+/* Reset and base */
+*, *::before, *::after {
+    box-sizing: border-box;
+}
+html, body {
+    margin: 0;
+    padding: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    font-size: 16px;
+    line-height: 1.5;
+    color: #333;
+    background-color: #f5f7fa;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+/* Typography */
+h1, h2, h3, h4, h5, h6 {
+    margin-top: 0;
+    line-height: 1.3;
+}
+a {
+    color: #3498db;
+    text-decoration: none;
+}
+a:hover {
+    color: #2980b9;
+}
+/* Application container */
+#FlowExample-Application-Container {
+    min-height: 100vh;
+}
+/* Utility: scrollbar styling */
+::-webkit-scrollbar {
+    width: 8px;
+}
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+::-webkit-scrollbar-thumb {
+    background: #bdc3c7;
+    border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #95a5a6;
+}
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    html {
+        font-size: 14px;
+    }
+}

package/example_application/html/index.html ADDED Viewed

@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+		<meta name="description" content="Pict Section Flow Example Application">
+		<title>Pict Section Flow</title>
+		<!-- Application Stylesheet -->
+		<link href="css/flowexample.css" rel="stylesheet">
+		<!-- PICT Dynamic View CSS Container -->
+		<style id="PICT-CSS"></style>
+		<!-- Load the PICT library -->
+		<script src="./js/pict.min.js" type="text/javascript"></script>
+		<!-- Bootstrap the Application -->
+		<script type="text/javascript">
+//<![CDATA[
+		Pict.safeOnDocumentReady(() => { Pict.safeLoadPictApplication(PictSectionFlowExample, 2)});
+//]]>
+		</script>
+	</head>
+	<body>
+		<!-- The root container for the Pict application -->
+		<div id="FlowExample-Application-Container"></div>
+		<!-- Load the FlowExample PICT Application Bundle -->
+		<script src="./pict-section-flow-example.compatible.min.js" type="text/javascript"></script>
+	</body>
+</html>

package/example_application/package.json ADDED Viewed

@@ -0,0 +1,41 @@
+{
+    "name": "pict-section-flow-example",
+    "version": "0.0.1",
+    "description": "Pict Section Flow Example Application",
+    "main": "source/Pict-Application-FlowExample.js",
+    "scripts": {
+        "start": "node source/Pict-Application-FlowExample.js",
+        "build": "npx quack build && npx quack copy",
+        "test": "echo \"Error: no test specified\" && exit 0"
+    },
+    "author": "steven velozo <steven@velozo.com>",
+    "license": "MIT",
+    "dependencies": {
+        "pict": "^1.0.343",
+        "pict-application": "^1.0.28",
+        "pict-router": "^1.0.4",
+        "pict-view": "^1.0.64",
+        "pict-provider": "^1.0.3",
+        "pict-section-flow": "file:../"
+    },
+    "devDependencies": {
+        "quackage": "^1.0.42"
+    },
+    "copyFilesSettings": {
+        "whenFileExists": "overwrite"
+    },
+    "copyFiles": [
+        {
+            "from": "./html/*",
+            "to": "./dist/"
+        },
+        {
+            "from": "./css/**",
+            "to": "./dist/css/"
+        },
+        {
+            "from": "./node_modules/pict/dist/*",
+            "to": "./dist/js/"
+        }
+    ]
+}

package/example_application/source/Pict-Application-FlowExample-Configuration.json ADDED Viewed

@@ -0,0 +1,15 @@
+{
+	"Name": "Pict Section Flow Example",
+	"Hash": "FlowExample",
+	"MainViewportViewIdentifier": "FlowExample-Layout",
+	"AutoSolveAfterInitialize": true,
+	"AutoRenderMainViewportViewAfterInitialize": false,
+	"AutoRenderViewsAfterInitialize": false,
+	"pict_configuration":
+		{
+			"Product": "FlowExample-Pict-Application"
+		}
+}

package/example_application/source/Pict-Application-FlowExample.js ADDED Viewed

@@ -0,0 +1,241 @@
+const libPictApplication = require('pict-application');
+const libPictRouter = require('pict-router');
+// Views
+const libViewLayout = require('./views/PictView-FlowExample-Layout.js');
+const libViewTopBar = require('./views/PictView-FlowExample-TopBar.js');
+const libViewBottomBar = require('./views/PictView-FlowExample-BottomBar.js');
+const libViewMainWorkspace = require('./views/PictView-FlowExample-MainWorkspace.js');
+const libViewAbout = require('./views/PictView-FlowExample-About.js');
+const libViewDocumentation = require('./views/PictView-FlowExample-Documentation.js');
+class FlowExampleApplication extends libPictApplication
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+		// Add the router provider with routes
+		this.pict.addProvider('PictRouter', require('./providers/PictRouter-FlowExample-Configuration.json'), libPictRouter);
+		// Add the layout view (the shell that contains top bar, workspace, bottom bar)
+		this.pict.addView('FlowExample-Layout', libViewLayout.default_configuration, libViewLayout);
+		// Add the top bar and bottom bar views
+		this.pict.addView('FlowExample-TopBar', libViewTopBar.default_configuration, libViewTopBar);
+		this.pict.addView('FlowExample-BottomBar', libViewBottomBar.default_configuration, libViewBottomBar);
+		// Add the main content workspace view
+		this.pict.addView('FlowExample-MainWorkspace', libViewMainWorkspace.default_configuration, libViewMainWorkspace);
+		// Add the about page view
+		this.pict.addView('FlowExample-About', libViewAbout.default_configuration, libViewAbout);
+		// Add the documentation page view
+		this.pict.addView('FlowExample-Documentation', libViewDocumentation.default_configuration, libViewDocumentation);
+	}
+	onAfterInitializeAsync(fCallback)
+	{
+		// Initialize application state
+		this.pict.AppData.FlowExample =
+		{
+			CurrentRoute: 'home'
+		};
+		// Initialize sample flow data
+		this.pict.AppData.FlowExample.SampleFlow =
+		{
+			Nodes:
+			[
+				{
+					Hash: 'node-start',
+					Type: 'start',
+					X: 50,
+					Y: 150,
+					Width: 140,
+					Height: 80,
+					Title: 'Start',
+					Ports:
+					[
+						{ Hash: 'port-start-out', Direction: 'output', Side: 'right', Label: 'Out' }
+					],
+					Data: {}
+				},
+				{
+					Hash: 'node-process-1',
+					Type: 'default',
+					X: 300,
+					Y: 80,
+					Width: 180,
+					Height: 80,
+					Title: 'Validate',
+					Ports:
+					[
+						{ Hash: 'port-proc1-in', Direction: 'input', Side: 'left', Label: 'In' },
+						{ Hash: 'port-proc1-out', Direction: 'output', Side: 'right', Label: 'Out' }
+					],
+					Data: {}
+				},
+				{
+					Hash: 'node-decision',
+					Type: 'decision',
+					X: 580,
+					Y: 100,
+					Width: 200,
+					Height: 100,
+					Title: 'Valid?',
+					Ports:
+					[
+						{ Hash: 'port-dec-in', Direction: 'input', Side: 'left', Label: 'In' },
+						{ Hash: 'port-dec-yes', Direction: 'output', Side: 'right', Label: 'Yes' },
+						{ Hash: 'port-dec-no', Direction: 'output', Side: 'bottom', Label: 'No' }
+					],
+					Data: {}
+				},
+				{
+					Hash: 'node-process-2',
+					Type: 'default',
+					X: 880,
+					Y: 80,
+					Width: 180,
+					Height: 80,
+					Title: 'Process',
+					Ports:
+					[
+						{ Hash: 'port-proc2-in', Direction: 'input', Side: 'left', Label: 'In' },
+						{ Hash: 'port-proc2-out', Direction: 'output', Side: 'right', Label: 'Out' }
+					],
+					Data: {}
+				},
+				{
+					Hash: 'node-error',
+					Type: 'default',
+					X: 600,
+					Y: 320,
+					Width: 180,
+					Height: 80,
+					Title: 'Error',
+					Ports:
+					[
+						{ Hash: 'port-err-in', Direction: 'input', Side: 'top', Label: 'In' },
+						{ Hash: 'port-err-out', Direction: 'output', Side: 'right', Label: 'Out' }
+					],
+					Data: {}
+				},
+				{
+					Hash: 'node-end',
+					Type: 'end',
+					X: 1160,
+					Y: 150,
+					Width: 140,
+					Height: 80,
+					Title: 'End',
+					Ports:
+					[
+						{ Hash: 'port-end-in', Direction: 'input', Side: 'left', Label: 'In' }
+					],
+					Data: {}
+				}
+			],
+			Connections:
+			[
+				{
+					Hash: 'conn-1',
+					SourceNodeHash: 'node-start',
+					SourcePortHash: 'port-start-out',
+					TargetNodeHash: 'node-process-1',
+					TargetPortHash: 'port-proc1-in',
+					Data: {}
+				},
+				{
+					Hash: 'conn-2',
+					SourceNodeHash: 'node-process-1',
+					SourcePortHash: 'port-proc1-out',
+					TargetNodeHash: 'node-decision',
+					TargetPortHash: 'port-dec-in',
+					Data: {}
+				},
+				{
+					Hash: 'conn-3',
+					SourceNodeHash: 'node-decision',
+					SourcePortHash: 'port-dec-yes',
+					TargetNodeHash: 'node-process-2',
+					TargetPortHash: 'port-proc2-in',
+					Data: {}
+				},
+				{
+					Hash: 'conn-4',
+					SourceNodeHash: 'node-decision',
+					SourcePortHash: 'port-dec-no',
+					TargetNodeHash: 'node-error',
+					TargetPortHash: 'port-err-in',
+					Data: {}
+				},
+				{
+					Hash: 'conn-5',
+					SourceNodeHash: 'node-process-2',
+					SourcePortHash: 'port-proc2-out',
+					TargetNodeHash: 'node-end',
+					TargetPortHash: 'port-end-in',
+					Data: {}
+				},
+				{
+					Hash: 'conn-6',
+					SourceNodeHash: 'node-error',
+					SourcePortHash: 'port-err-out',
+					TargetNodeHash: 'node-end',
+					TargetPortHash: 'port-end-in',
+					Data: {}
+				}
+			],
+			ViewState:
+			{
+				PanX: 0,
+				PanY: 0,
+				Zoom: 1,
+				SelectedNodeHash: null,
+				SelectedConnectionHash: null
+			}
+		};
+		// Render the layout shell first, then the initial content
+		this.pict.views['FlowExample-Layout'].render();
+		return super.onAfterInitializeAsync(fCallback);
+	}
+	/**
+	 * Navigate to a route using the pict-router.
+	 *
+	 * @param {string} pRoute - The route path to navigate to (e.g. '/About')
+	 */
+	navigateTo(pRoute)
+	{
+		this.pict.providers.PictRouter.navigate(pRoute);
+	}
+	/**
+	 * Render a specific content view into the main workspace area.
+	 * This is called by the router when a route is matched.
+	 *
+	 * @param {string} pViewIdentifier - The view identifier to render
+	 */
+	showView(pViewIdentifier)
+	{
+		if (pViewIdentifier in this.pict.views)
+		{
+			this.pict.AppData.FlowExample.CurrentRoute = pViewIdentifier;
+			this.pict.views[pViewIdentifier].render();
+		}
+		else
+		{
+			this.pict.log.warn(`View [${pViewIdentifier}] not found; falling back to main workspace.`);
+			this.pict.views['FlowExample-MainWorkspace'].render();
+		}
+	}
+}
+module.exports = FlowExampleApplication;
+module.exports.default_configuration = require('./Pict-Application-FlowExample-Configuration.json');

package/example_application/source/providers/PictRouter-FlowExample-Configuration.json ADDED Viewed

@@ -0,0 +1,22 @@
+{
+	"ProviderIdentifier": "Pict-Router",
+	"AutoInitialize": true,
+	"AutoInitializeOrdinal": 0,
+	"Routes":
+	[
+		{
+			"path": "/Home",
+			"template": "{~LV:Pict.PictApplication.showView(`FlowExample-MainWorkspace`)~}"
+		},
+		{
+			"path": "/About",
+			"template": "{~LV:Pict.PictApplication.showView(`FlowExample-About`)~}"
+		},
+		{
+			"path": "/Documentation",
+			"template": "{~LV:Pict.PictApplication.showView(`FlowExample-Documentation`)~}"
+		}
+	]
+}

package/example_application/source/views/PictView-FlowExample-About.js ADDED Viewed

@@ -0,0 +1,184 @@
+const libPictView = require('pict-view');
+const _ViewConfiguration =
+{
+	ViewIdentifier: "FlowExample-About",
+	DefaultRenderable: "FlowExample-About-Content",
+	DefaultDestinationAddress: "#FlowExample-Content-Container",
+	AutoRender: false,
+	CSS: /*css*/`
+		.flowexample-about {
+			padding: 2em;
+			max-width: 800px;
+			margin: 0 auto;
+		}
+		.flowexample-about-header {
+			text-align: center;
+			padding-bottom: 1.5em;
+			border-bottom: 1px solid #eee;
+			margin-bottom: 2em;
+		}
+		.flowexample-about-header h1 {
+			margin: 0 0 0.25em 0;
+			font-size: 2em;
+			font-weight: 300;
+			color: #2c3e50;
+		}
+		.flowexample-about-header p {
+			margin: 0;
+			color: #7f8c8d;
+			font-size: 1.1em;
+		}
+		.flowexample-about h2 {
+			margin: 1.5em 0 0.5em 0;
+			font-weight: 400;
+			color: #2c3e50;
+			font-size: 1.3em;
+		}
+		.flowexample-about p {
+			color: #555;
+			line-height: 1.7;
+		}
+		.flowexample-about-tech {
+			display: grid;
+			grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+			gap: 1em;
+			margin-top: 1em;
+		}
+		.flowexample-about-tech-item {
+			background: #f8f9fa;
+			border: 1px solid #e9ecef;
+			border-radius: 4px;
+			padding: 1em;
+			text-align: center;
+		}
+		.flowexample-about-tech-item strong {
+			display: block;
+			margin-bottom: 0.25em;
+			color: #2c3e50;
+		}
+		.flowexample-about-tech-item span {
+			font-size: 0.85em;
+			color: #666;
+		}
+		.flowexample-about-features {
+			display: grid;
+			grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+			gap: 1em;
+			margin-top: 1em;
+		}
+		.flowexample-about-feature {
+			background: #fff;
+			border: 1px solid #e0e0e0;
+			border-radius: 6px;
+			padding: 1.25em;
+		}
+		.flowexample-about-feature h3 {
+			margin: 0 0 0.35em 0;
+			font-size: 1em;
+			color: #2c3e50;
+		}
+		.flowexample-about-feature p {
+			margin: 0;
+			font-size: 0.9em;
+		}
+	`,
+	Templates:
+	[
+		{
+			Hash: "FlowExample-About-Template",
+			Template: /*html*/`
+<div class="flowexample-about">
+	<div class="flowexample-about-header">
+		<h1>About Pict Section Flow</h1>
+		<p>A pure SVG flow diagram component for the Pict framework</p>
+	</div>
+	<h2>What It Does</h2>
+	<p>Pict Section Flow provides a self-contained, extensible flow diagram view for Pict applications. It renders nodes and connections as SVG elements, supports drag-and-drop node positioning, interactive connection creation between ports, and viewport panning and zooming &mdash; all with zero external diagram library dependencies.</p>
+	<h2>Key Features</h2>
+	<div class="flowexample-about-features">
+		<div class="flowexample-about-feature">
+			<h3>Pure SVG Rendering</h3>
+			<p>All diagram elements are rendered as standard SVG, providing native DOM events and CSS styling with no canvas or external libraries required.</p>
+		</div>
+		<div class="flowexample-about-feature">
+			<h3>Drag &amp; Drop Nodes</h3>
+			<p>Click and drag nodes to reposition them. Connections update in real time with smooth cubic bezier curves.</p>
+		</div>
+		<div class="flowexample-about-feature">
+			<h3>Interactive Connections</h3>
+			<p>Drag from an output port to an input port to create connections visually. Validation prevents self-connections and duplicates.</p>
+		</div>
+		<div class="flowexample-about-feature">
+			<h3>Pan &amp; Zoom</h3>
+			<p>Navigate large diagrams with background panning and mouse wheel zoom. Zoom-to-fit centers all nodes automatically.</p>
+		</div>
+		<div class="flowexample-about-feature">
+			<h3>Extensible Node Types</h3>
+			<p>Register custom node types with different shapes, colors, port configurations, and styles through the Node Type Provider.</p>
+		</div>
+		<div class="flowexample-about-feature">
+			<h3>Event Hooks</h3>
+			<p>Listen for node selection, movement, connection creation and removal through the Event Handler Provider for full extensibility.</p>
+		</div>
+	</div>
+	<h2>Built With</h2>
+	<div class="flowexample-about-tech">
+		<div class="flowexample-about-tech-item">
+			<strong>Pict</strong>
+			<span>Application Framework</span>
+		</div>
+		<div class="flowexample-about-tech-item">
+			<strong>Pict-View</strong>
+			<span>View Lifecycle</span>
+		</div>
+		<div class="flowexample-about-tech-item">
+			<strong>Pict-Router</strong>
+			<span>Hash Routing</span>
+		</div>
+		<div class="flowexample-about-tech-item">
+			<strong>SVG</strong>
+			<span>Diagram Rendering</span>
+		</div>
+		<div class="flowexample-about-tech-item">
+			<strong>Fable</strong>
+			<span>Service Architecture</span>
+		</div>
+	</div>
+	<h2>License</h2>
+	<p>This project is released under the MIT License. It is part of the Retold ecosystem of tools for building complex data-driven applications.</p>
+</div>
+`
+		}
+	],
+	Renderables:
+	[
+		{
+			RenderableHash: "FlowExample-About-Content",
+			TemplateHash: "FlowExample-About-Template",
+			DestinationAddress: "#FlowExample-Content-Container",
+			RenderMethod: "replace"
+		}
+	]
+};
+class FlowExampleAboutView extends libPictView
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+	}
+}
+module.exports = FlowExampleAboutView;
+module.exports.default_configuration = _ViewConfiguration;

package/example_application/source/views/PictView-FlowExample-BottomBar.js ADDED Viewed

@@ -0,0 +1,77 @@
+const libPictView = require('pict-view');
+const _ViewConfiguration =
+{
+	ViewIdentifier: "FlowExample-BottomBar",
+	DefaultRenderable: "FlowExample-BottomBar-Content",
+	DefaultDestinationAddress: "#FlowExample-BottomBar-Container",
+	AutoRender: false,
+	CSS: /*css*/`
+		.flowexample-bottombar {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			background-color: #2c3e50;
+			color: #7f8c8d;
+			padding: 0.75em 1.5em;
+			font-size: 0.8em;
+			border-top: 1px solid #34495e;
+		}
+		.flowexample-bottombar a {
+			color: #95a5a6;
+			text-decoration: none;
+			margin-left: 1em;
+			transition: color 0.15s;
+		}
+		.flowexample-bottombar a:hover {
+			color: #ecf0f1;
+		}
+		.flowexample-bottombar-links {
+			display: flex;
+			align-items: center;
+			gap: 0.5em;
+		}
+	`,
+	Templates:
+	[
+		{
+			Hash: "FlowExample-BottomBar-Template",
+			Template: /*html*/`
+<div class="flowexample-bottombar">
+	<span>Pict Section Flow Example &copy; 2025</span>
+	<div class="flowexample-bottombar-links">
+		<a href="https://github.com/stevenvelozo/pict" target="_blank">Pict</a>
+		<a href="https://github.com/stevenvelozo/fable" target="_blank">Fable</a>
+		<a onclick="{~P~}.PictApplication.navigateTo('/About')">About</a>
+	</div>
+</div>
+`
+		}
+	],
+	Renderables:
+	[
+		{
+			RenderableHash: "FlowExample-BottomBar-Content",
+			TemplateHash: "FlowExample-BottomBar-Template",
+			DestinationAddress: "#FlowExample-BottomBar-Container",
+			RenderMethod: "replace"
+		}
+	]
+};
+class FlowExampleBottomBarView extends libPictView
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+	}
+}
+module.exports = FlowExampleBottomBarView;
+module.exports.default_configuration = _ViewConfiguration;