pict-section-flow 0.0.1

package/source/services/PictService-Flow-Layout.js

@@ -0,0 +1,207 @@
+const libFableServiceProviderBase = require('fable-serviceproviderbase');
+
+class PictServiceFlowLayout extends libFableServiceProviderBase
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+
+		this.serviceType = 'PictServiceFlowLayout';
+
+		this._FlowView = (pOptions && pOptions.FlowView) ? pOptions.FlowView : null;
+
+		// Layout configuration
+		this._HorizontalSpacing = 250;
+		this._VerticalSpacing = 120;
+		this._StartX = 100;
+		this._StartY = 100;
+	}
+
+	/**
+	 * Snap a coordinate to the nearest grid point
+	 * @param {number} pValue - The coordinate value
+	 * @param {number} pGridSize - The grid size
+	 * @returns {number}
+	 */
+	snapToGrid(pValue, pGridSize)
+	{
+		if (!pGridSize || pGridSize <= 0) return pValue;
+		return Math.round(pValue / pGridSize) * pGridSize;
+	}
+
+	/**
+	 * Auto-layout nodes using a simple left-to-right topological approach
+	 * @param {Array} pNodes - Array of node data objects
+	 * @param {Array} pConnections - Array of connection data objects
+	 */
+	autoLayout(pNodes, pConnections)
+	{
+		if (!pNodes || pNodes.length === 0) return;
+
+		// Build adjacency information
+		let tmpNodeMap = {};
+		let tmpInDegree = {};
+		let tmpOutEdges = {};
+
+		for (let i = 0; i < pNodes.length; i++)
+		{
+			let tmpNode = pNodes[i];
+			tmpNodeMap[tmpNode.Hash] = tmpNode;
+			tmpInDegree[tmpNode.Hash] = 0;
+			tmpOutEdges[tmpNode.Hash] = [];
+		}
+
+		for (let i = 0; i < pConnections.length; i++)
+		{
+			let tmpConn = pConnections[i];
+			if (tmpInDegree.hasOwnProperty(tmpConn.TargetNodeHash))
+			{
+				tmpInDegree[tmpConn.TargetNodeHash]++;
+			}
+			if (tmpOutEdges.hasOwnProperty(tmpConn.SourceNodeHash))
+			{
+				tmpOutEdges[tmpConn.SourceNodeHash].push(tmpConn.TargetNodeHash);
+			}
+		}
+
+		// Topological sort (Kahn's algorithm)
+		let tmpLayers = [];
+		let tmpQueue = [];
+		let tmpAssigned = {};
+
+		// Start with nodes that have no incoming edges
+		for (let tmpHash in tmpInDegree)
+		{
+			if (tmpInDegree[tmpHash] === 0)
+			{
+				tmpQueue.push(tmpHash);
+			}
+		}
+
+		while (tmpQueue.length > 0)
+		{
+			let tmpCurrentLayer = [];
+
+			let tmpNextQueue = [];
+			for (let i = 0; i < tmpQueue.length; i++)
+			{
+				let tmpNodeHash = tmpQueue[i];
+				if (tmpAssigned[tmpNodeHash]) continue;
+
+				tmpAssigned[tmpNodeHash] = true;
+				tmpCurrentLayer.push(tmpNodeHash);
+
+				// Process outgoing edges
+				let tmpEdges = tmpOutEdges[tmpNodeHash] || [];
+				for (let j = 0; j < tmpEdges.length; j++)
+				{
+					let tmpTargetHash = tmpEdges[j];
+					tmpInDegree[tmpTargetHash]--;
+					if (tmpInDegree[tmpTargetHash] <= 0 && !tmpAssigned[tmpTargetHash])
+					{
+						tmpNextQueue.push(tmpTargetHash);
+					}
+				}
+			}
+
+			if (tmpCurrentLayer.length > 0)
+			{
+				tmpLayers.push(tmpCurrentLayer);
+			}
+
+			tmpQueue = tmpNextQueue;
+		}
+
+		// Handle any remaining unassigned nodes (cycles or disconnected)
+		let tmpRemainingNodes = [];
+		for (let i = 0; i < pNodes.length; i++)
+		{
+			if (!tmpAssigned[pNodes[i].Hash])
+			{
+				tmpRemainingNodes.push(pNodes[i].Hash);
+			}
+		}
+		if (tmpRemainingNodes.length > 0)
+		{
+			tmpLayers.push(tmpRemainingNodes);
+		}
+
+		// Assign positions based on layers
+		let tmpCurrentX = this._StartX;
+
+		for (let tmpLayerIndex = 0; tmpLayerIndex < tmpLayers.length; tmpLayerIndex++)
+		{
+			let tmpLayer = tmpLayers[tmpLayerIndex];
+			let tmpMaxWidth = 0;
+
+			// Calculate the total height for this layer to center vertically
+			let tmpTotalHeight = 0;
+			for (let i = 0; i < tmpLayer.length; i++)
+			{
+				let tmpNode = tmpNodeMap[tmpLayer[i]];
+				if (tmpNode)
+				{
+					tmpTotalHeight += tmpNode.Height || 80;
+					if (i < tmpLayer.length - 1)
+					{
+						tmpTotalHeight += this._VerticalSpacing;
+					}
+				}
+			}
+
+			let tmpCurrentY = this._StartY;
+
+			for (let i = 0; i < tmpLayer.length; i++)
+			{
+				let tmpNode = tmpNodeMap[tmpLayer[i]];
+				if (!tmpNode) continue;
+
+				tmpNode.X = tmpCurrentX;
+				tmpNode.Y = tmpCurrentY;
+
+				let tmpWidth = tmpNode.Width || 180;
+				let tmpHeight = tmpNode.Height || 80;
+
+				tmpMaxWidth = Math.max(tmpMaxWidth, tmpWidth);
+				tmpCurrentY += tmpHeight + this._VerticalSpacing;
+			}
+
+			tmpCurrentX += tmpMaxWidth + this._HorizontalSpacing;
+		}
+	}
+
+	/**
+	 * Center all nodes around a given point
+	 * @param {Array} pNodes
+	 * @param {number} pCenterX
+	 * @param {number} pCenterY
+	 */
+	centerNodes(pNodes, pCenterX, pCenterY)
+	{
+		if (!pNodes || pNodes.length === 0) return;
+
+		let tmpMinX = Infinity, tmpMinY = Infinity;
+		let tmpMaxX = -Infinity, tmpMaxY = -Infinity;
+
+		for (let i = 0; i < pNodes.length; i++)
+		{
+			tmpMinX = Math.min(tmpMinX, pNodes[i].X);
+			tmpMinY = Math.min(tmpMinY, pNodes[i].Y);
+			tmpMaxX = Math.max(tmpMaxX, pNodes[i].X + (pNodes[i].Width || 180));
+			tmpMaxY = Math.max(tmpMaxY, pNodes[i].Y + (pNodes[i].Height || 80));
+		}
+
+		let tmpCurrentCenterX = (tmpMinX + tmpMaxX) / 2;
+		let tmpCurrentCenterY = (tmpMinY + tmpMaxY) / 2;
+		let tmpOffsetX = pCenterX - tmpCurrentCenterX;
+		let tmpOffsetY = pCenterY - tmpCurrentCenterY;
+
+		for (let i = 0; i < pNodes.length; i++)
+		{
+			pNodes[i].X += tmpOffsetX;
+			pNodes[i].Y += tmpOffsetY;
+		}
+	}
+}
+
+module.exports = PictServiceFlowLayout;

package/source/views/PictView-Flow-Node.js

@@ -0,0 +1,267 @@
+const libPictView = require('pict-view');
+
+const _DefaultConfiguration =
+{
+	ViewIdentifier: 'Flow-NodeRenderer',
+
+	AutoRender: false,
+
+	// Title bar height for nodes
+	NodeTitleBarHeight: 22
+};
+
+class PictViewFlowNode extends libPictView
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		let tmpOptions = Object.assign({}, JSON.parse(JSON.stringify(_DefaultConfiguration)), pOptions);
+		super(pFable, tmpOptions, pServiceHash);
+
+		this.serviceType = 'PictViewFlowNode';
+
+		this._FlowView = null;
+	}
+
+	/**
+	 * Create the SVG namespace element helper
+	 * @param {string} pTagName
+	 * @returns {SVGElement}
+	 */
+	_createSVGElement(pTagName)
+	{
+		return document.createElementNS('http://www.w3.org/2000/svg', pTagName);
+	}
+
+	/**
+	 * Render a node into the nodes SVG layer
+	 * @param {Object} pNodeData - The node data object
+	 * @param {SVGGElement} pNodesLayer - The SVG <g> element to append to
+	 * @param {boolean} pIsSelected - Whether this node is selected
+	 * @param {Object} pNodeTypeConfig - The node type configuration
+	 */
+	renderNode(pNodeData, pNodesLayer, pIsSelected, pNodeTypeConfig)
+	{
+		let tmpGroup = this._createSVGElement('g');
+		tmpGroup.setAttribute('class', `pict-flow-node ${pIsSelected ? 'selected' : ''} pict-flow-node-${pNodeData.Type || 'default'}`);
+		tmpGroup.setAttribute('transform', `translate(${pNodeData.X}, ${pNodeData.Y})`);
+		tmpGroup.setAttribute('data-node-hash', pNodeData.Hash);
+		tmpGroup.setAttribute('data-element-type', 'node');
+
+		let tmpWidth = pNodeData.Width || 180;
+		let tmpHeight = pNodeData.Height || 80;
+		let tmpTitleBarHeight = this.options.NodeTitleBarHeight;
+
+		// Node body (main rectangle)
+		let tmpBody = this._createSVGElement('rect');
+		tmpBody.setAttribute('class', 'pict-flow-node-body');
+		tmpBody.setAttribute('x', '0');
+		tmpBody.setAttribute('y', '0');
+		tmpBody.setAttribute('width', String(tmpWidth));
+		tmpBody.setAttribute('height', String(tmpHeight));
+		tmpBody.setAttribute('data-node-hash', pNodeData.Hash);
+		tmpBody.setAttribute('data-element-type', 'node-body');
+
+		// Apply custom styles from node type
+		if (pNodeTypeConfig && pNodeTypeConfig.BodyStyle)
+		{
+			for (let tmpStyleKey in pNodeTypeConfig.BodyStyle)
+			{
+				tmpBody.setAttribute(tmpStyleKey, pNodeTypeConfig.BodyStyle[tmpStyleKey]);
+			}
+		}
+
+		tmpGroup.appendChild(tmpBody);
+
+		// Title bar background (top portion)
+		let tmpTitleBar = this._createSVGElement('rect');
+		tmpTitleBar.setAttribute('class', 'pict-flow-node-title-bar');
+		tmpTitleBar.setAttribute('x', '0');
+		tmpTitleBar.setAttribute('y', '0');
+		tmpTitleBar.setAttribute('width', String(tmpWidth));
+		tmpTitleBar.setAttribute('height', String(tmpTitleBarHeight));
+		tmpTitleBar.setAttribute('data-node-hash', pNodeData.Hash);
+		tmpTitleBar.setAttribute('data-element-type', 'node-body');
+
+		// Apply custom title bar color
+		if (pNodeTypeConfig && pNodeTypeConfig.TitleBarColor)
+		{
+			tmpTitleBar.setAttribute('fill', pNodeTypeConfig.TitleBarColor);
+		}
+
+		tmpGroup.appendChild(tmpTitleBar);
+
+		// Title bar bottom fill (to square off the rounded corners at the bottom of the title bar)
+		let tmpTitleBarBottom = this._createSVGElement('rect');
+		tmpTitleBarBottom.setAttribute('class', 'pict-flow-node-title-bar-bottom');
+		tmpTitleBarBottom.setAttribute('x', '0');
+		tmpTitleBarBottom.setAttribute('y', String(tmpTitleBarHeight - 6));
+		tmpTitleBarBottom.setAttribute('width', String(tmpWidth));
+		tmpTitleBarBottom.setAttribute('height', '6');
+		tmpTitleBarBottom.setAttribute('data-node-hash', pNodeData.Hash);
+		tmpTitleBarBottom.setAttribute('data-element-type', 'node-body');
+
+		if (pNodeTypeConfig && pNodeTypeConfig.TitleBarColor)
+		{
+			tmpTitleBarBottom.setAttribute('fill', pNodeTypeConfig.TitleBarColor);
+		}
+
+		tmpGroup.appendChild(tmpTitleBarBottom);
+
+		// Title text
+		let tmpTitle = this._createSVGElement('text');
+		tmpTitle.setAttribute('class', 'pict-flow-node-title');
+		tmpTitle.setAttribute('x', String(tmpWidth / 2));
+		tmpTitle.setAttribute('y', String(tmpTitleBarHeight / 2 + 1));
+		tmpTitle.setAttribute('text-anchor', 'middle');
+		tmpTitle.setAttribute('dominant-baseline', 'central');
+		tmpTitle.textContent = pNodeData.Title || 'Untitled';
+		tmpGroup.appendChild(tmpTitle);
+
+		// Type label (below title bar)
+		if (pNodeTypeConfig && pNodeTypeConfig.Label && pNodeTypeConfig.Label !== pNodeData.Title)
+		{
+			let tmpTypeLabel = this._createSVGElement('text');
+			tmpTypeLabel.setAttribute('class', 'pict-flow-node-type-label');
+			tmpTypeLabel.setAttribute('x', String(tmpWidth / 2));
+			tmpTypeLabel.setAttribute('y', String(tmpTitleBarHeight + 18));
+			tmpTypeLabel.setAttribute('text-anchor', 'middle');
+			tmpTypeLabel.setAttribute('dominant-baseline', 'central');
+			tmpTypeLabel.textContent = pNodeTypeConfig.Label;
+			tmpGroup.appendChild(tmpTypeLabel);
+		}
+
+		// Render ports
+		this._renderPorts(pNodeData, tmpGroup, tmpWidth, tmpHeight);
+
+		pNodesLayer.appendChild(tmpGroup);
+	}
+
+	/**
+	 * Render ports for a node
+	 * @param {Object} pNodeData
+	 * @param {SVGGElement} pGroup - The node's SVG group
+	 * @param {number} pWidth
+	 * @param {number} pHeight
+	 */
+	_renderPorts(pNodeData, pGroup, pWidth, pHeight)
+	{
+		if (!pNodeData.Ports || !Array.isArray(pNodeData.Ports)) return;
+
+		// Group ports by side and direction for positioning
+		let tmpPortsBySide = { left: [], right: [], top: [], bottom: [] };
+		for (let i = 0; i < pNodeData.Ports.length; i++)
+		{
+			let tmpPort = pNodeData.Ports[i];
+			let tmpSide = tmpPort.Side || (tmpPort.Direction === 'input' ? 'left' : 'right');
+			if (tmpPortsBySide[tmpSide])
+			{
+				tmpPortsBySide[tmpSide].push(tmpPort);
+			}
+		}
+
+		for (let tmpSide in tmpPortsBySide)
+		{
+			let tmpPorts = tmpPortsBySide[tmpSide];
+			for (let i = 0; i < tmpPorts.length; i++)
+			{
+				let tmpPort = tmpPorts[i];
+				let tmpPosition = this._getPortLocalPosition(tmpSide, i, tmpPorts.length, pWidth, pHeight);
+
+				// Port circle
+				let tmpCircle = this._createSVGElement('circle');
+				tmpCircle.setAttribute('class', `pict-flow-port ${tmpPort.Direction}`);
+				tmpCircle.setAttribute('cx', String(tmpPosition.x));
+				tmpCircle.setAttribute('cy', String(tmpPosition.y));
+				tmpCircle.setAttribute('r', '5');
+				tmpCircle.setAttribute('data-port-hash', tmpPort.Hash);
+				tmpCircle.setAttribute('data-node-hash', pNodeData.Hash);
+				tmpCircle.setAttribute('data-port-direction', tmpPort.Direction);
+				tmpCircle.setAttribute('data-element-type', 'port');
+				pGroup.appendChild(tmpCircle);
+
+				// Port label
+				if (tmpPort.Label)
+				{
+					let tmpLabel = this._createSVGElement('text');
+					tmpLabel.setAttribute('class', 'pict-flow-port-label');
+					tmpLabel.textContent = tmpPort.Label;
+
+					let tmpLabelOffset = 12;
+					switch (tmpSide)
+					{
+						case 'left':
+							tmpLabel.setAttribute('x', String(tmpPosition.x + tmpLabelOffset));
+							tmpLabel.setAttribute('y', String(tmpPosition.y));
+							tmpLabel.setAttribute('text-anchor', 'start');
+							break;
+						case 'right':
+							tmpLabel.setAttribute('x', String(tmpPosition.x - tmpLabelOffset));
+							tmpLabel.setAttribute('y', String(tmpPosition.y));
+							tmpLabel.setAttribute('text-anchor', 'end');
+							break;
+						case 'top':
+							tmpLabel.setAttribute('x', String(tmpPosition.x));
+							tmpLabel.setAttribute('y', String(tmpPosition.y + tmpLabelOffset));
+							tmpLabel.setAttribute('text-anchor', 'middle');
+							break;
+						case 'bottom':
+							tmpLabel.setAttribute('x', String(tmpPosition.x));
+							tmpLabel.setAttribute('y', String(tmpPosition.y - tmpLabelOffset));
+							tmpLabel.setAttribute('text-anchor', 'middle');
+							break;
+					}
+					tmpLabel.setAttribute('dominant-baseline', 'central');
+					pGroup.appendChild(tmpLabel);
+				}
+			}
+		}
+	}
+
+	/**
+	 * Calculate port position relative to node origin.
+	 *
+	 * For left and right side ports, positioning is offset below the title bar
+	 * so that ports never overlap the header area.
+	 *
+	 * @param {string} pSide - 'left', 'right', 'top', 'bottom'
+	 * @param {number} pIndex - Index of this port on its side
+	 * @param {number} pTotal - Total ports on this side
+	 * @param {number} pWidth - Node width
+	 * @param {number} pHeight - Node height
+	 * @returns {{x: number, y: number}}
+	 */
+	_getPortLocalPosition(pSide, pIndex, pTotal, pWidth, pHeight)
+	{
+		let tmpSpacing;
+		let tmpTitleBarHeight = this.options.NodeTitleBarHeight;
+
+		switch (pSide)
+		{
+			case 'left':
+			{
+				// Distribute ports in the body area below the title bar
+				let tmpBodyHeight = pHeight - tmpTitleBarHeight;
+				tmpSpacing = tmpBodyHeight / (pTotal + 1);
+				return { x: 0, y: tmpTitleBarHeight + tmpSpacing * (pIndex + 1) };
+			}
+			case 'right':
+			{
+				let tmpBodyHeight = pHeight - tmpTitleBarHeight;
+				tmpSpacing = tmpBodyHeight / (pTotal + 1);
+				return { x: pWidth, y: tmpTitleBarHeight + tmpSpacing * (pIndex + 1) };
+			}
+			case 'top':
+				tmpSpacing = pWidth / (pTotal + 1);
+				return { x: tmpSpacing * (pIndex + 1), y: 0 };
+			case 'bottom':
+				tmpSpacing = pWidth / (pTotal + 1);
+				return { x: tmpSpacing * (pIndex + 1), y: pHeight };
+			default:
+				return { x: pWidth, y: pHeight / 2 };
+		}
+	}
+}
+
+module.exports = PictViewFlowNode;
+
+module.exports.default_configuration = _DefaultConfiguration;

package/source/views/PictView-Flow-Toolbar.js

@@ -0,0 +1,223 @@
+const libPictView = require('pict-view');
+
+const _DefaultConfiguration =
+{
+	ViewIdentifier: 'Flow-Toolbar',
+
+	DefaultRenderable: 'Flow-Toolbar-Content',
+	DefaultDestinationAddress: '#Flow-Toolbar-Container',
+
+	AutoRender: false,
+
+	FlowViewIdentifier: 'Pict-Flow',
+
+	CSS: /*css*/`
+		.pict-flow-toolbar {
+			display: flex;
+			align-items: center;
+			gap: 0.5em;
+			padding: 0.5em 0.75em;
+			background-color: #ffffff;
+			border-bottom: 1px solid #e0e0e0;
+			flex-wrap: wrap;
+		}
+		.pict-flow-toolbar-group {
+			display: flex;
+			align-items: center;
+			gap: 0.25em;
+			padding-right: 0.75em;
+			border-right: 1px solid #e0e0e0;
+		}
+		.pict-flow-toolbar-group:last-child {
+			border-right: none;
+			padding-right: 0;
+		}
+		.pict-flow-toolbar-btn {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			padding: 0.35em 0.65em;
+			border: 1px solid #bdc3c7;
+			border-radius: 4px;
+			background-color: #fff;
+			color: #2c3e50;
+			font-size: 0.85em;
+			cursor: pointer;
+			transition: background-color 0.15s, border-color 0.15s;
+			user-select: none;
+			-webkit-user-select: none;
+		}
+		.pict-flow-toolbar-btn:hover {
+			background-color: #ecf0f1;
+			border-color: #95a5a6;
+		}
+		.pict-flow-toolbar-btn:active {
+			background-color: #d5dbdb;
+		}
+		.pict-flow-toolbar-btn.danger {
+			color: #e74c3c;
+			border-color: #e74c3c;
+		}
+		.pict-flow-toolbar-btn.danger:hover {
+			background-color: #fdedec;
+		}
+		.pict-flow-toolbar-label {
+			font-size: 0.8em;
+			color: #7f8c8d;
+			margin-right: 0.25em;
+		}
+		.pict-flow-toolbar-select {
+			padding: 0.3em 0.5em;
+			border: 1px solid #bdc3c7;
+			border-radius: 4px;
+			font-size: 0.85em;
+			background-color: #fff;
+			color: #2c3e50;
+		}
+	`,
+
+	Templates:
+	[
+		{
+			Hash: 'Flow-Toolbar-Template',
+			Template: /*html*/`
+<div class="pict-flow-toolbar">
+	<div class="pict-flow-toolbar-group">
+		<span class="pict-flow-toolbar-label">Node:</span>
+		<select class="pict-flow-toolbar-select" id="Flow-Toolbar-NodeType-{~D:Record.FlowViewIdentifier~}">
+			<option value="default">Default</option>
+			<option value="start">Start</option>
+			<option value="end">End</option>
+			<option value="decision">Decision</option>
+		</select>
+		<button class="pict-flow-toolbar-btn" data-flow-action="add-node">+ Add Node</button>
+	</div>
+	<div class="pict-flow-toolbar-group">
+		<button class="pict-flow-toolbar-btn danger" data-flow-action="delete-selected">Delete</button>
+	</div>
+	<div class="pict-flow-toolbar-group">
+		<button class="pict-flow-toolbar-btn" data-flow-action="zoom-in">Zoom +</button>
+		<button class="pict-flow-toolbar-btn" data-flow-action="zoom-out">Zoom −</button>
+		<button class="pict-flow-toolbar-btn" data-flow-action="zoom-fit">Fit</button>
+	</div>
+	<div class="pict-flow-toolbar-group">
+		<button class="pict-flow-toolbar-btn" data-flow-action="auto-layout">Auto Layout</button>
+	</div>
+</div>
+`
+		}
+	],
+
+	Renderables:
+	[
+		{
+			RenderableHash: 'Flow-Toolbar-Content',
+			TemplateHash: 'Flow-Toolbar-Template',
+			DestinationAddress: '#Flow-Toolbar-Container',
+			RenderMethod: 'replace'
+		}
+	]
+};
+
+class PictViewFlowToolbar extends libPictView
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		let tmpOptions = Object.assign({}, JSON.parse(JSON.stringify(_DefaultConfiguration)), pOptions);
+		super(pFable, tmpOptions, pServiceHash);
+
+		this.serviceType = 'PictViewFlowToolbar';
+
+		this._FlowView = null;
+	}
+
+	onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent)
+	{
+		// Bind toolbar button events via event delegation
+		let tmpToolbarElements = this.pict.ContentAssignment.getElement(`.pict-flow-toolbar`);
+		if (tmpToolbarElements.length > 0)
+		{
+			let tmpToolbar = tmpToolbarElements[0];
+			tmpToolbar.addEventListener('click', (pEvent) =>
+			{
+				let tmpTarget = pEvent.target;
+				if (!tmpTarget) return;
+
+				// Walk up to find the button with the action
+				let tmpButton = tmpTarget.closest('[data-flow-action]');
+				if (!tmpButton) return;
+
+				let tmpAction = tmpButton.getAttribute('data-flow-action');
+				this._handleToolbarAction(tmpAction);
+			});
+		}
+
+		return super.onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent);
+	}
+
+	/**
+	 * Handle a toolbar action
+	 * @param {string} pAction
+	 */
+	_handleToolbarAction(pAction)
+	{
+		if (!this._FlowView) return;
+
+		let tmpFlowViewIdentifier = this.options.FlowViewIdentifier;
+
+		switch (pAction)
+		{
+			case 'add-node':
+				{
+					// Get selected node type from dropdown
+					let tmpSelectElements = this.pict.ContentAssignment.getElement(`#Flow-Toolbar-NodeType-${tmpFlowViewIdentifier}`);
+					let tmpNodeType = 'default';
+					if (tmpSelectElements.length > 0)
+					{
+						tmpNodeType = tmpSelectElements[0].value;
+					}
+
+					// Place the new node at a reasonable position
+					let tmpVS = this._FlowView.viewState;
+					let tmpX = (-tmpVS.PanX + 200) / tmpVS.Zoom;
+					let tmpY = (-tmpVS.PanY + 200) / tmpVS.Zoom;
+
+					// Offset if there are existing nodes to avoid overlap
+					let tmpNodeCount = this._FlowView.flowData.Nodes.length;
+					tmpX += (tmpNodeCount % 5) * 40;
+					tmpY += (tmpNodeCount % 5) * 40;
+
+					this._FlowView.addNode(tmpNodeType, tmpX, tmpY);
+				}
+				break;
+
+			case 'delete-selected':
+				this._FlowView.deleteSelected();
+				break;
+
+			case 'zoom-in':
+				this._FlowView.setZoom(this._FlowView.viewState.Zoom + this._FlowView.options.ZoomStep);
+				break;
+
+			case 'zoom-out':
+				this._FlowView.setZoom(this._FlowView.viewState.Zoom - this._FlowView.options.ZoomStep);
+				break;
+
+			case 'zoom-fit':
+				this._FlowView.zoomToFit();
+				break;
+
+			case 'auto-layout':
+				this._FlowView.autoLayout();
+				break;
+
+			default:
+				this.log.warn(`PictViewFlowToolbar: unknown action '${pAction}'`);
+				break;
+		}
+	}
+}
+
+module.exports = PictViewFlowToolbar;
+
+module.exports.default_configuration = _DefaultConfiguration;