pict-section-flow 0.0.1 → 0.0.2

package/example_application/package.json

@@ -1,41 +0,0 @@
-{
-    "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.js

@@ -1,241 +0,0 @@
-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/views/PictView-FlowExample-MainWorkspace.js

@@ -1,191 +0,0 @@
-const libPictView = require('pict-view');
-const libPictSectionFlow = require('pict-section-flow');
-
-const _ViewConfiguration =
-{
-	ViewIdentifier: "FlowExample-MainWorkspace",
-
-	DefaultRenderable: "FlowExample-MainWorkspace-Content",
-	DefaultDestinationAddress: "#FlowExample-Content-Container",
-
-	AutoRender: false,
-
-	CSS: /*css*/`
-		.flowexample-workspace {
-			padding: 2em;
-			max-width: 1400px;
-			margin: 0 auto;
-		}
-		.flowexample-workspace-header {
-			margin: 0 0 1.5em 0;
-			padding-bottom: 1em;
-			border-bottom: 1px solid #eee;
-		}
-		.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-Flow-Container {
-			min-height: 500px;
-		}
-		.flowexample-hints {
-			margin-top: 1.5em;
-			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">
-		<h1>Flow Diagram</h1>
-		<p>Create, edit, and connect nodes to build flow diagrams. Drag nodes to reposition, drag from output ports to input ports to create connections.</p>
-	</div>
-	<div id="FlowExample-Flow-Container"></div>
-	<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>
-</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;
-	}
-
-	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,
-
-					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();
-
-		return super.onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent);
-	}
-}
-
-module.exports = FlowExampleMainWorkspaceView;
-
-module.exports.default_configuration = _ViewConfiguration;