pict-section-flow 1.2.0 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pict-section-flow",
-    "version": "1.2.0",
+    "version": "1.4.0",
     "description": "Pict Section Flow Diagram",
     "main": "source/Pict-Section-Flow.js",
     "scripts": {

package/source/providers/PictProvider-Flow-CSS.js

@@ -270,6 +270,29 @@ class PictProviderFlowCSS extends libFableServiceProviderBase
 		.pict-flow-node-title-bar-bottom {
 			fill: var(--pf-node-title-bar-color);
 		}
+		.pict-flow-node-resize-handle {
+			fill: var(--theme-color-brand-primary, #2880a6);
+			stroke: var(--theme-color-background-panel, #ffffff);
+			stroke-width: 1.5;
+			cursor: nwse-resize;
+			opacity: 0.85;
+		}
+		.pict-flow-node-resize-handle:hover { opacity: 1; }
+		.pict-flow-marquee {
+			fill: var(--theme-color-brand-primary, #2880a6);
+			fill-opacity: 0.10;
+			stroke: var(--theme-color-brand-primary, #2880a6);
+			stroke-width: 1;
+			stroke-dasharray: 4 3;
+			pointer-events: none;
+		}
+		.pict-flow-align-guide {
+			stroke: #e5397f;
+			stroke-width: 1;
+			stroke-dasharray: 3 2;
+			pointer-events: none;
+			shape-rendering: crispEdges;
+		}
 		.pict-flow-node-title {
 			fill: var(--pf-node-title-fill);
 			font-size: var(--pf-node-title-size);
@@ -745,6 +768,19 @@ class PictProviderFlowCSS extends libFableServiceProviderBase
 			cursor: pointer;
 			transition: stroke 0.15s;
 		}
+		/* A connection's label (Data.Label), drawn at the midpoint. The white halo (paint-order) keeps it
+		   legible where it crosses the line. */
+		.pict-flow-connection-label {
+			font-size: 12px;
+			font-family: inherit;
+			fill: var(--pf-text-primary, #2c3e50);
+			paint-order: stroke;
+			stroke: var(--theme-color-background-primary, #ffffff);
+			stroke-width: 3px;
+			stroke-linejoin: round;
+			pointer-events: none;
+			user-select: none;
+		}
 		.pict-flow-connection:hover {
 			stroke: var(--pf-connection-stroke-hover);
 			stroke-width: 3;
@@ -1262,6 +1298,19 @@ class PictProviderFlowCSS extends libFableServiceProviderBase
 			border-right: none;
 			padding-right: 0;
 		}
+		/* The host-supplied extra-button group (ToolbarExtraButtons) renders even
+		   when empty; collapse it so consumers that pass no buttons see no gap. */
+		.pict-flow-toolbar-group:empty {
+			display: none;
+		}
+		.pict-flow-toolbar-btn-active {
+			background-color: var(--pf-button-active-bg);
+			border-color: var(--pf-button-hover-border);
+		}
+		/* An icon-only host button (ToolbarExtraButtons with no Label) renders an empty text span. */
+		.pict-flow-toolbar-btn-text:empty {
+			display: none;
+		}
 		.pict-flow-toolbar-btn {
 			display: inline-flex;
 			align-items: center;

package/source/providers/PictProvider-Flow-ConnectorShapes.js

@@ -465,6 +465,14 @@ class PictProviderFlowConnectorShapes extends libFableServiceProviderBase
 			+ '<polygon class="pict-flow-arrowhead pict-flow-arrowhead-tether" points="' + tmpTetherMarker.Points + '" fill="' + tmpTetherMarker.Fill + '" />'
 			+ '</marker>';
 
+		// Generic per-connection end markers, selectable per connection via Data.SourceMarker /
+		// Data.TargetMarker (a host like a moodboard styles its own edges). fill="context-stroke" makes
+		// each marker take the connection's own stroke color, so a recolored line recolors its markers.
+		tmpMarkup += '<marker id="flow-marker-arrow-end-' + pViewIdentifier + '" markerWidth="10" markerHeight="10" refX="8.5" refY="5" orient="auto" markerUnits="strokeWidth"><path d="M1,1 L9,5 L1,9 z" fill="context-stroke" /></marker>';
+		tmpMarkup += '<marker id="flow-marker-arrow-start-' + pViewIdentifier + '" markerWidth="10" markerHeight="10" refX="1.5" refY="5" orient="auto-start-reverse" markerUnits="strokeWidth"><path d="M1,1 L9,5 L1,9 z" fill="context-stroke" /></marker>';
+		tmpMarkup += '<marker id="flow-marker-dot-' + pViewIdentifier + '" markerWidth="8" markerHeight="8" refX="4" refY="4" orient="auto" markerUnits="strokeWidth"><circle cx="4" cy="4" r="3" fill="context-stroke" /></marker>';
+		tmpMarkup += '<marker id="flow-marker-square-' + pViewIdentifier + '" markerWidth="8" markerHeight="8" refX="4" refY="4" orient="auto" markerUnits="strokeWidth"><rect x="1" y="1" width="6" height="6" fill="context-stroke" /></marker>';
+
 		return tmpMarkup;
 	}
 }

package/source/providers/PictProvider-Flow-Icons.js

@@ -45,6 +45,14 @@ const _DefaultIcons =
 
 	// ── UI Icons ───────────────────────────────────────────────────────────
 
+	'edit': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z"/></svg>',
+
+	'check': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>',
+
+	'background': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z" fill="var(--theme-color-background-secondary, #d5e8f7)" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/></svg>',
+
+	'connect': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M8 8l8 8" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><circle cx="6" cy="6" r="3" fill="var(--theme-color-background-secondary, #d5e8f7)" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/><circle cx="18" cy="18" r="3" fill="var(--theme-color-background-secondary, #d5e8f7)" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/></svg>',
+
 	'fullscreen': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6"/><path d="M9 21H3v-6"/><path d="M21 3l-7 7"/><path d="M3 21l7-7"/></svg>',
 
 	'exit-fullscreen': '<svg xmlns="http://www.w3.org/2000/svg" width="{FlowIconSize}" height="{FlowIconSize}" viewBox="0 0 24 24" fill="none" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14h6v6"/><path d="M20 10h-6V4"/><path d="M14 10l7-7"/><path d="M3 21l7-7"/></svg>',

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

@@ -116,12 +116,13 @@ class PictServiceFlowConnectionRenderer extends libFableServiceProviderBase
 
 		// Hit area (wider invisible path for easier selection)
 		let tmpShapeProvider = this._FlowView._ConnectorShapesProvider;
+		let tmpPathElement = null;
 		if (tmpShapeProvider)
 		{
 			let tmpHitArea = tmpShapeProvider.createConnectionHitAreaElement(tmpPath, pConnection.Hash);
 			pConnectionsLayer.appendChild(tmpHitArea);
 
-			let tmpPathElement = tmpShapeProvider.createConnectionPathElement(
+			tmpPathElement = tmpShapeProvider.createConnectionPathElement(
 				tmpPath, pConnection.Hash, pIsSelected, tmpViewIdentifier);
 			if (tmpConnTypeClass)
 			{
@@ -145,7 +146,7 @@ class PictServiceFlowConnectionRenderer extends libFableServiceProviderBase
 			tmpHitArea.setAttribute('data-element-type', 'connection-hitarea');
 			pConnectionsLayer.appendChild(tmpHitArea);
 
-			let tmpPathElement = this._FlowView._SVGHelperProvider.createSVGElement('path');
+			tmpPathElement = this._FlowView._SVGHelperProvider.createSVGElement('path');
 			tmpPathElement.setAttribute('class', `pict-flow-connection${tmpConnTypeClass} ${pIsSelected ? 'selected' : ''}`);
 			tmpPathElement.setAttribute('d', tmpPath);
 			tmpPathElement.setAttribute('data-connection-hash', pConnection.Hash);
@@ -160,14 +161,25 @@ class PictServiceFlowConnectionRenderer extends libFableServiceProviderBase
 			pConnectionsLayer.appendChild(tmpPathElement);
 		}
 
+		// Per-connection host styling (a moodboard styles its own edges): stroke color / width / dash and
+		// the end markers, applied only when the connection's Data carries them so default (workflow)
+		// connections are untouched. A label, when set, is drawn at the midpoint.
+		let tmpHasMarkers = (typeof tmpData.SourceMarker !== 'undefined' || typeof tmpData.TargetMarker !== 'undefined');
+		this._applyConnectionStyle(tmpPathElement, tmpData, tmpViewIdentifier);
+		this._renderConnectionLabel(pConnection, tmpData, pConnectionsLayer, tmpSourcePos, tmpTargetPos);
+
 		// Render the colored endpoint dot at each end of the connection
 		// into the dedicated endpoints layer (sits *above* the nodes
 		// layer so the dot doesn't get hidden under the card chrome
 		// when an edge theme places it on the node's perimeter).
 		// PortRenderer suppresses its own circle for any port that
-		// participates in a connection — we own the dot here.
+		// participates in a connection — we own the dot here. Skipped when the
+		// connection supplies its own end markers (those own the endpoints).
 		let tmpEndpointsLayer = this._FlowView._EndpointsLayer || pConnectionsLayer;
-		this._renderEndpointDots(pConnection, tmpEndpointsLayer, tmpSourcePos, tmpTargetPos);
+		if (!tmpHasMarkers)
+		{
+			this._renderEndpointDots(pConnection, tmpEndpointsLayer, tmpSourcePos, tmpTargetPos);
+		}
 
 		// When the resolved attachment differs from the card-defined port
 		// position (e.g. a Perimeter theme moved the dot to the edge of the
@@ -187,6 +199,66 @@ class PictServiceFlowConnectionRenderer extends libFableServiceProviderBase
 		}
 	}
 
+	// Apply per-connection host styling to the path element from the connection's Data: StrokeColor,
+	// StrokeWidth, StrokeStyle ('solid' | 'dashed' | 'dotted') and SourceMarker / TargetMarker
+	// ('none' | 'arrow' | 'dot' | 'square'). Each is applied only when present, so connections that do
+	// not carry these keys render exactly as before.
+	_applyConnectionStyle(pPathElement, pData, pViewIdentifier)
+	{
+		if (!pPathElement || !pData || !pPathElement.style) { return; }
+		// Stroke color / width / dash go through inline style, NOT SVG presentation attributes: the
+		// .pict-flow-connection CSS rule sets stroke + stroke-width, and a stylesheet rule beats a
+		// presentation attribute, so an attribute would be silently ignored. Inline style outranks the
+		// stylesheet, so the per-connection appearance wins.
+		if (pData.StrokeColor) { pPathElement.style.stroke = pData.StrokeColor; }
+		if (pData.StrokeWidth) { pPathElement.style.strokeWidth = String(pData.StrokeWidth); }
+		if (pData.StrokeStyle)
+		{
+			pPathElement.style.strokeDasharray = (pData.StrokeStyle === 'dashed') ? '7,5' : ((pData.StrokeStyle === 'dotted') ? '1.5,4' : 'none');
+		}
+		// Markers are not styled by CSS, so attributes are correct (they reference the marker defs).
+		if (typeof pData.TargetMarker !== 'undefined')
+		{
+			let tmpEnd = this._connectionMarkerId(pData.TargetMarker, 'end', pViewIdentifier);
+			if (tmpEnd) { pPathElement.setAttribute('marker-end', 'url(#' + tmpEnd + ')'); }
+			else { pPathElement.removeAttribute('marker-end'); }
+		}
+		if (typeof pData.SourceMarker !== 'undefined')
+		{
+			let tmpStart = this._connectionMarkerId(pData.SourceMarker, 'start', pViewIdentifier);
+			if (tmpStart) { pPathElement.setAttribute('marker-start', 'url(#' + tmpStart + ')'); }
+			else { pPathElement.removeAttribute('marker-start'); }
+		}
+	}
+
+	// Resolve a marker name + end ('start' | 'end') to its SVG marker def id; null for 'none'/unknown.
+	_connectionMarkerId(pMarker, pEnd, pViewIdentifier)
+	{
+		if (pMarker === 'arrow') { return 'flow-marker-arrow-' + pEnd + '-' + pViewIdentifier; }
+		if (pMarker === 'dot') { return 'flow-marker-dot-' + pViewIdentifier; }
+		if (pMarker === 'square') { return 'flow-marker-square-' + pViewIdentifier; }
+		return null;
+	}
+
+	// Draw a connection's label (Data.Label) at the midpoint of its endpoints. A white halo (paint-order
+	// stroke, set in CSS) keeps it legible over the line. Skipped when there is no label.
+	_renderConnectionLabel(pConnection, pData, pLayer, pSourcePos, pTargetPos)
+	{
+		// Render when a Label key is present (even ''), so a host that edits the label in place has an
+		// element to update; a connection with no Label key (a default workflow edge) gets none.
+		if (!pData || typeof pData.Label === 'undefined' || !pSourcePos || !pTargetPos) { return; }
+		if (!this._FlowView._SVGHelperProvider) { return; }
+		let tmpText = this._FlowView._SVGHelperProvider.createSVGElement('text');
+		tmpText.setAttribute('class', 'pict-flow-connection-label');
+		tmpText.setAttribute('x', String((pSourcePos.x + pTargetPos.x) / 2));
+		tmpText.setAttribute('y', String((pSourcePos.y + pTargetPos.y) / 2));
+		tmpText.setAttribute('text-anchor', 'middle');
+		tmpText.setAttribute('dominant-baseline', 'middle');
+		tmpText.setAttribute('data-connection-hash', pConnection.Hash);
+		tmpText.textContent = pData.Label;
+		pLayer.appendChild(tmpText);
+	}
+
 	/**
 	 * Append the colored endpoint dots for both ends of a connection
 	 * onto the destination layer (absolute coords). Reuses

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

@@ -106,7 +106,7 @@ class PictServiceFlowDataManager extends libFableServiceProviderBase
 			OpenPanels: Array.isArray(pFlowData.OpenPanels) ? pFlowData.OpenPanels : [],
 			SavedLayouts: Array.isArray(pFlowData.SavedLayouts) ? pFlowData.SavedLayouts : [],
 			ViewState: Object.assign(
-				{ PanX: 0, PanY: 0, Zoom: 1, SelectedNodeHash: null, SelectedConnectionHash: null, SelectedTetherHash: null },
+				{ PanX: 0, PanY: 0, Zoom: 1, SelectedNodeHash: null, SelectedNodeHashes: [], SelectedConnectionHash: null, SelectedTetherHash: null },
 				pFlowData.ViewState || {}
 			),
 			LayoutAlgorithm: (typeof pFlowData.LayoutAlgorithm === 'string' && pFlowData.LayoutAlgorithm !== '') ? pFlowData.LayoutAlgorithm : tmpDefaultAlgorithm,