pict-section-flow 1.3.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pict-section-flow",
-    "version": "1.3.0",
+    "version": "2.0.0",
     "description": "Pict Section Flow Diagram",
     "main": "source/Pict-Section-Flow.js",
     "scripts": {
@@ -15,6 +15,8 @@
     "dependencies": {
         "fable-serviceproviderbase": "^3.0.19",
         "pict-provider": "^1.0.13",
+        "pict-provider-graphgeometry": "^1.0.0",
+        "pict-provider-graphlayout": "^1.0.0",
         "pict-section-form": "^1.0.199",
         "pict-view": "^1.0.68"
     },
@@ -25,5 +27,8 @@
         "pict-docuserve": "^1.4.4",
         "pict-router": "^1.0.10",
         "quackage": "^1.3.0"
-    }
+    },
+    "files": [
+        "source"
+    ]
 }

package/source/Pict-Section-Flow.js

@@ -35,30 +35,36 @@ 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 and edge-theme descriptors now live in the standalone
+// pict-provider-graphlayout module. They are re-exported here unchanged so the
+// historical pict-section-flow export surface (LayoutAlgorithms / EdgeThemes) is
+// preserved for consumers.
+const libPictProviderGraphLayout = require('pict-provider-graphlayout');
+
 // 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')
+	Custom:           libPictProviderGraphLayout.Layouts.Custom,
+	Layered:          libPictProviderGraphLayout.Layouts.Layered,
+	ForcedFromCenter: libPictProviderGraphLayout.Layouts.ForcedFromCenter,
+	Grid:             libPictProviderGraphLayout.Layouts.Grid,
+	Circular:         libPictProviderGraphLayout.Layouts.Circular,
+	Tabular:          libPictProviderGraphLayout.Layouts.Tabular,
+	Columnar:         libPictProviderGraphLayout.Layouts.Columnar
 };
 
 // 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')
+	Bezier:               libPictProviderGraphLayout.Edges.Bezier,
+	Orthogonal:           libPictProviderGraphLayout.Edges.Orthogonal,
+	Straight:             libPictProviderGraphLayout.Edges.Straight,
+	OrthogonalSnap:       libPictProviderGraphLayout.Edges.OrthogonalSnap,
+	Perimeter:            libPictProviderGraphLayout.Edges.Perimeter,
+	PerimeterLinear:      libPictProviderGraphLayout.Edges.PerimeterLinear,
+	PerimeterOrthogonal:  libPictProviderGraphLayout.Edges.PerimeterOrthogonal
 };
 
 // FlowCard base class

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

@@ -0,0 +1,303 @@
+const libPictProvider = require('pict-provider');
+
+/**
+ * PictProvider-Flow-Background
+ *
+ * Native canvas background for the flow diagram. The container template ships a
+ * default grid; this provider lets a host pick a background through config or
+ * ViewState instead of hand-painting the SVG from outside (which moodboard used
+ * to do). When no background is configured the provider is a no-op and the
+ * template grid stands, so existing diagrams are unchanged.
+ *
+ * Background shape:
+ *   { Style: 'grid' | 'dots' | 'graph' | 'solid' | 'image' | 'none',
+ *     Color?: string,        // line / dot color (minor lines for 'graph')
+ *     MajorColor?: string,   // 'graph' only: the heavier every-Nth line color
+ *     Paper?: string,        // grid/dots/graph: solid fill painted behind the pattern
+ *     Image?: string,
+ *     GridSize?: number,     // cell spacing (minor cell for 'graph')
+ *     MajorEvery?: number,   // 'graph' only: heavier line every N cells (default 10)
+ *     DotSize?: number,
+ *     LineWidth?: number,    // grid/graph minor line width
+ *     MajorLineWidth?: number } // 'graph' major line width
+ *
+ * Named presets (smaller / lighter / darker dots, grids, blue graph paper,
+ * blueprint, ...) live in PRESETS and are fetched with preset(name).
+ *
+ * The markup generators are pure (string in, string out) and unit tested; only
+ * apply() touches the DOM.
+ */
+const _ProviderConfiguration =
+{
+	ProviderIdentifier: 'PictProviderFlowBackground'
+};
+
+const _DEFAULT_GRID_SIZE = 20;
+const _DEFAULT_DOT_SIZE = 2;
+const _DEFAULT_DOT_FILL = 'var(--theme-color-text-secondary, #b0b0b0)';
+const _DEFAULT_MAJOR_EVERY = 10;
+// Concrete fallback line color for 'graph' (var() does not resolve in an SVG
+// presentation attribute, and graph lines are drawn with stroke="...").
+const _DEFAULT_GRID_LINE = '#cbd5e1';
+
+// Named, ready-to-use backgrounds. preset(name) returns a fresh clone so callers
+// can tweak one without mutating the catalog.
+const _PRESETS =
+{
+	'dots':       { Style: 'dots', GridSize: 20, DotSize: 2 },
+	'dots-small': { Style: 'dots', GridSize: 14, DotSize: 1 },
+	'dots-light': { Style: 'dots', GridSize: 20, DotSize: 2, Color: '#dcdcdc' },
+	'dots-dark':  { Style: 'dots', GridSize: 22, DotSize: 2.4, Color: '#64748b' },
+	'grid':       { Style: 'grid', GridSize: 20 },
+	'grid-fine':  { Style: 'grid', GridSize: 12, Color: '#e2e8f0' },
+	// "10-square grid with light and more-light-blue lines": minor light-blue lines
+	// every 16px, a heavier sky-blue line every 10 cells, on white paper.
+	'graph-blue': { Style: 'graph', GridSize: 16, MajorEvery: 10, Color: '#dbeafe', MajorColor: '#93c5fd', LineWidth: 1, MajorLineWidth: 1.5, Paper: '#ffffff' },
+	// Classic dark blueprint: light-blue lines on deep navy paper.
+	'blueprint':  { Style: 'graph', GridSize: 16, MajorEvery: 10, Color: '#3b6ea5', MajorColor: '#6fa8dc', LineWidth: 1, MajorLineWidth: 1.5, Paper: '#0f2a4a' },
+	'solid':      { Style: 'solid', Color: '#faf7f2' },
+	'none':       { Style: 'none' }
+};
+
+class PictProviderFlowBackground extends libPictProvider
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		let tmpOptions = Object.assign({}, _ProviderConfiguration, pOptions);
+		super(pFable, tmpOptions, pServiceHash);
+
+		this.serviceType = 'PictProviderFlowBackground';
+
+		this._FlowView = (pOptions && pOptions.FlowView) ? pOptions.FlowView : null;
+	}
+
+	/**
+	 * The pattern element id for a view + style.
+	 * @param {string} pViewIdentifier
+	 * @param {string} pStyle
+	 * @returns {string}
+	 */
+	patternId(pViewIdentifier, pStyle)
+	{
+		return `flow-bg-${pStyle}-${pViewIdentifier}`;
+	}
+
+	/**
+	 * Generate the <pattern> markup for grid/dots backgrounds. Returns '' for
+	 * styles that need no pattern (solid, image, none) or when nothing is set.
+	 * Pure.
+	 * @param {string} pViewIdentifier
+	 * @param {Object} pBackground
+	 * @returns {string}
+	 */
+	generatePatternMarkup(pViewIdentifier, pBackground)
+	{
+		if (!pBackground || !pBackground.Style)
+		{
+			return '';
+		}
+
+		// Optional solid fill painted behind the pattern (paper color). Empty unless set.
+		let tmpPaper = function (pW, pH)
+		{
+			return pBackground.Paper ? `<rect width="${pW}" height="${pH}" fill="${pBackground.Paper}" />` : '';
+		};
+
+		if (pBackground.Style === 'grid')
+		{
+			let tmpSize = (typeof pBackground.GridSize === 'number') ? pBackground.GridSize : _DEFAULT_GRID_SIZE;
+			// With no explicit Color the lines inherit the theme via the existing
+			// CSS class, matching the template grid; a Color overrides inline.
+			let tmpStroke = pBackground.Color ? ` style="stroke:${pBackground.Color}"` : '';
+			let tmpWidth = (typeof pBackground.LineWidth === 'number') ? ` stroke-width="${pBackground.LineWidth}"` : '';
+			let tmpId = this.patternId(pViewIdentifier, 'grid');
+			return `<pattern id="${tmpId}" width="${tmpSize}" height="${tmpSize}" patternUnits="userSpaceOnUse">`
+				+ tmpPaper(tmpSize, tmpSize)
+				+ `<line x1="${tmpSize}" y1="0" x2="${tmpSize}" y2="${tmpSize}" class="pict-flow-grid-pattern"${tmpStroke}${tmpWidth} />`
+				+ `<line x1="0" y1="${tmpSize}" x2="${tmpSize}" y2="${tmpSize}" class="pict-flow-grid-pattern"${tmpStroke}${tmpWidth} />`
+				+ `</pattern>`;
+		}
+
+		if (pBackground.Style === 'dots')
+		{
+			let tmpSize = (typeof pBackground.GridSize === 'number') ? pBackground.GridSize : _DEFAULT_GRID_SIZE;
+			let tmpDot = (typeof pBackground.DotSize === 'number') ? pBackground.DotSize : _DEFAULT_DOT_SIZE;
+			let tmpFill = pBackground.Color ? pBackground.Color : _DEFAULT_DOT_FILL;
+			let tmpId = this.patternId(pViewIdentifier, 'dots');
+			return `<pattern id="${tmpId}" width="${tmpSize}" height="${tmpSize}" patternUnits="userSpaceOnUse">`
+				+ tmpPaper(tmpSize, tmpSize)
+				+ `<circle cx="${tmpSize / 2}" cy="${tmpSize / 2}" r="${tmpDot}" fill="${tmpFill}" />`
+				+ `</pattern>`;
+		}
+
+		if (pBackground.Style === 'graph')
+		{
+			// Graph paper: a fine minor grid tiled inside a heavier major grid drawn
+			// every MajorEvery cells. Two patterns — the major one fills itself with the
+			// minor pattern, then strokes the heavier lines on top.
+			let tmpMinor = (typeof pBackground.GridSize === 'number') ? pBackground.GridSize : _DEFAULT_GRID_SIZE;
+			let tmpMajorEvery = (typeof pBackground.MajorEvery === 'number') ? pBackground.MajorEvery : _DEFAULT_MAJOR_EVERY;
+			let tmpMajor = tmpMinor * tmpMajorEvery;
+			let tmpMinorColor = pBackground.Color || _DEFAULT_GRID_LINE;
+			let tmpMajorColor = pBackground.MajorColor || tmpMinorColor;
+			let tmpMinorWidth = (typeof pBackground.LineWidth === 'number') ? pBackground.LineWidth : 1;
+			let tmpMajorWidth = (typeof pBackground.MajorLineWidth === 'number') ? pBackground.MajorLineWidth : 1.5;
+			let tmpMinorId = this.patternId(pViewIdentifier, 'graph-minor');
+			let tmpId = this.patternId(pViewIdentifier, 'graph');
+
+			let tmpMinorPattern = `<pattern id="${tmpMinorId}" width="${tmpMinor}" height="${tmpMinor}" patternUnits="userSpaceOnUse">`
+				+ `<line x1="${tmpMinor}" y1="0" x2="${tmpMinor}" y2="${tmpMinor}" stroke="${tmpMinorColor}" stroke-width="${tmpMinorWidth}" />`
+				+ `<line x1="0" y1="${tmpMinor}" x2="${tmpMinor}" y2="${tmpMinor}" stroke="${tmpMinorColor}" stroke-width="${tmpMinorWidth}" />`
+				+ `</pattern>`;
+			let tmpMajorPattern = `<pattern id="${tmpId}" width="${tmpMajor}" height="${tmpMajor}" patternUnits="userSpaceOnUse">`
+				+ tmpPaper(tmpMajor, tmpMajor)
+				+ `<rect width="${tmpMajor}" height="${tmpMajor}" fill="url(#${tmpMinorId})" />`
+				+ `<line x1="${tmpMajor}" y1="0" x2="${tmpMajor}" y2="${tmpMajor}" stroke="${tmpMajorColor}" stroke-width="${tmpMajorWidth}" />`
+				+ `<line x1="0" y1="${tmpMajor}" x2="${tmpMajor}" y2="${tmpMajor}" stroke="${tmpMajorColor}" stroke-width="${tmpMajorWidth}" />`
+				+ `</pattern>`;
+			return tmpMinorPattern + tmpMajorPattern;
+		}
+
+		return '';
+	}
+
+	/**
+	 * Resolve the fill value for the background rect. Pure.
+	 *   grid/dots -> url(#pattern); solid -> Color; image -> url(Image);
+	 *   none -> 'none'. Returns null when nothing is configured.
+	 * @param {string} pViewIdentifier
+	 * @param {Object} pBackground
+	 * @returns {string|null}
+	 */
+	resolveFill(pViewIdentifier, pBackground)
+	{
+		if (!pBackground || !pBackground.Style)
+		{
+			return null;
+		}
+
+		switch (pBackground.Style)
+		{
+			case 'grid':  return `url(#${this.patternId(pViewIdentifier, 'grid')})`;
+			case 'dots':  return `url(#${this.patternId(pViewIdentifier, 'dots')})`;
+			case 'graph': return `url(#${this.patternId(pViewIdentifier, 'graph')})`;
+			case 'solid': return pBackground.Color || 'transparent';
+			case 'image': return pBackground.Image ? `url(${pBackground.Image})` : 'none';
+			case 'none':  return 'none';
+			default:      return null;
+		}
+	}
+
+	/**
+	 * Resolve the effective background for a flow view: ViewState wins, then the
+	 * static option. Returns null/false when none is configured.
+	 * @param {Object} pFlowView
+	 */
+	resolveBackground(pFlowView)
+	{
+		if (!pFlowView)
+		{
+			return null;
+		}
+		let tmpViewStateBackground = (pFlowView._FlowData && pFlowView._FlowData.ViewState)
+			? pFlowView._FlowData.ViewState.Background
+			: null;
+		if (tmpViewStateBackground)
+		{
+			return tmpViewStateBackground;
+		}
+		return (pFlowView.options && pFlowView.options.Background) ? pFlowView.options.Background : null;
+	}
+
+	/**
+	 * Fetch a named background preset as a fresh object (safe to tweak / store on
+	 * ViewState). Unknown names return null.
+	 * @param {string} pName
+	 * @returns {Object|null}
+	 */
+	preset(pName)
+	{
+		let tmpPreset = _PRESETS[pName];
+		return tmpPreset ? JSON.parse(JSON.stringify(tmpPreset)) : null;
+	}
+
+	/**
+	 * The available preset names, in catalog order.
+	 * @returns {string[]}
+	 */
+	presetNames()
+	{
+		return Object.keys(_PRESETS);
+	}
+
+	/**
+	 * Apply the configured background to the live SVG. No-op when nothing is
+	 * configured (the template grid stands). DOM-touching; verified in browser.
+	 * @param {Object} [pFlowView]
+	 * @returns {boolean} true when a background was applied
+	 */
+	apply(pFlowView)
+	{
+		let tmpFlowView = pFlowView || this._FlowView;
+		if (!tmpFlowView || !tmpFlowView._SVGElement)
+		{
+			return false;
+		}
+
+		let tmpBackground = this.resolveBackground(tmpFlowView);
+		if (!tmpBackground || !tmpBackground.Style)
+		{
+			return false;
+		}
+
+		let tmpViewIdentifier = tmpFlowView.options.ViewIdentifier;
+		let tmpSVG = tmpFlowView._SVGElement;
+
+		// Replace any pattern we previously injected, then add the new one.
+		let tmpDefs = tmpSVG.querySelector('defs');
+		if (tmpDefs)
+		{
+			let tmpOld = tmpDefs.querySelectorAll('[data-flow-bg-pattern]');
+			for (let i = 0; i < tmpOld.length; i++)
+			{
+				tmpOld[i].remove();
+			}
+			let tmpMarkup = this.generatePatternMarkup(tmpViewIdentifier, tmpBackground);
+			if (tmpMarkup)
+			{
+				let tmpScratch = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+				tmpScratch.innerHTML = tmpMarkup;
+				while (tmpScratch.firstChild)
+				{
+					let tmpChild = tmpScratch.firstChild;
+					if (tmpChild.setAttribute)
+					{
+						tmpChild.setAttribute('data-flow-bg-pattern', 'true');
+					}
+					tmpDefs.appendChild(tmpChild);
+				}
+			}
+		}
+
+		let tmpFill = this.resolveFill(tmpViewIdentifier, tmpBackground);
+		let tmpRect = tmpSVG.querySelector('.pict-flow-grid-background');
+		if (tmpRect && tmpFill !== null)
+		{
+			tmpRect.setAttribute('fill', tmpFill);
+		}
+
+		// A solid color also tints the container behind the (transparent) rect.
+		let tmpContainer = (typeof tmpSVG.closest === 'function') ? tmpSVG.closest('.pict-flow-svg-container') : null;
+		if (tmpContainer)
+		{
+			tmpContainer.style.backgroundColor = (tmpBackground.Style === 'solid' && tmpBackground.Color) ? tmpBackground.Color : '';
+		}
+
+		return true;
+	}
+}
+
+module.exports = PictProviderFlowBackground;
+
+module.exports.default_configuration = _ProviderConfiguration;
+module.exports.PRESETS = _PRESETS;

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

@@ -205,16 +205,19 @@ class PictProviderFlowCSS extends libFableServiceProviderBase
 		.pict-flow-svg {
 			width: 100%;
 			height: 100%;
-			cursor: grab;
+			cursor: default;
 			user-select: none;
 			-webkit-user-select: none;
 		}
-		.pict-flow-svg.panning {
-			cursor: grabbing;
-		}
-		.pict-flow-svg.connecting {
-			cursor: crosshair;
-		}
+		/* The canvas cursor is owned by the CursorManager: it sets data-flow-cursor
+		   on the SVG from the interaction state + view mode, and these map the
+		   tokens to real cursors. Element-scoped hover cursors (ports, handles,
+		   panel chrome, toolbar buttons) still win for their own elements. */
+		.pict-flow-svg[data-flow-cursor="grab"] { cursor: grab; }
+		.pict-flow-svg[data-flow-cursor="grabbing"] { cursor: grabbing; }
+		.pict-flow-svg[data-flow-cursor="crosshair"] { cursor: crosshair; }
+		.pict-flow-svg[data-flow-cursor="resize"] { cursor: nwse-resize; }
+		.pict-flow-svg[data-flow-cursor="default"] { cursor: default; }
 		.pict-flow-grid-pattern line {
 			stroke: var(--pf-grid-stroke);
 			stroke-width: 0.5;
@@ -768,6 +771,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;
@@ -1285,6 +1301,46 @@ 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);
+		}
+		/* Toggle-state LED: a status dot in the corner of a toggle button (one marked
+		   Toggle:true). Action buttons render no LED; a toggle shows an empty outline
+		   when off and a filled green dot when on (the .active class). Works on the
+		   docked and floating toolbars. */
+		.pict-flow-toolbar-btn, .pict-flow-floating-btn {
+			position: relative;
+		}
+		.pict-flow-toolbar-btn-led {
+			display: none;
+			position: absolute;
+			right: 2px;
+			bottom: 2px;
+			width: 7px;
+			height: 7px;
+			box-sizing: border-box;
+			border-radius: 50%;
+			border: 1.5px solid var(--pf-button-border, #c2cad6);
+			background: transparent;
+			pointer-events: none;
+		}
+		.pict-flow-toolbar-btn-toggle .pict-flow-toolbar-btn-led {
+			display: block;
+		}
+		.pict-flow-toolbar-btn-toggle.pict-flow-toolbar-btn-active .pict-flow-toolbar-btn-led {
+			background: var(--theme-color-status-success, #27ae60);
+			border-color: var(--theme-color-status-success, #27ae60);
+		}
+		/* 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;
@@ -1993,6 +2049,12 @@ class PictProviderFlowCSS extends libFableServiceProviderBase
 			// Remove existing CSS first so we can re-register with updated theme overrides
 			this.fable.CSSMap.removeCSS('PictSectionFlow-CSS');
 			this.fable.CSSMap.addCSS('PictSectionFlow-CSS', this.generateCSS(), 500, 'PictProviderFlowCSS');
+
+			// Supplemental CSS (read-only chrome hiding + content frame), at a
+			// priority above the base so the hides win.
+			this.fable.CSSMap.removeCSS('PictSectionFlow-Supplemental-CSS');
+			this.fable.CSSMap.addCSS('PictSectionFlow-Supplemental-CSS', this._supplementalCSS(), 502, 'PictProviderFlowCSS');
+
 			// Re-inject into the DOM to apply the updated CSS
 			this.fable.CSSMap.injectCSS();
 		}
@@ -2027,6 +2089,36 @@ class PictProviderFlowCSS extends libFableServiceProviderBase
 		this.fable.CSSMap.addCSS('PictSectionFlow-Renderer-CSS', tmpCSS, 501, 'PictProviderFlowCSS');
 		this.fable.CSSMap.injectCSS();
 	}
+
+	/**
+	 * Supplemental CSS: hides editing chrome when the container carries the
+	 * 'pict-flow-readonly' class (set by PictView-Flow.setReadOnly), and styles
+	 * the content-frame rectangle. Replaces the ad-hoc CSS consumers (e.g.
+	 * moodboard) used to inject for a read-only look or a board frame.
+	 * @returns {string}
+	 */
+	_supplementalCSS()
+	{
+		return /*css*/`
+		.pict-flow-readonly .pict-flow-port,
+		.pict-flow-readonly .pict-flow-port-hint,
+		.pict-flow-readonly .pict-flow-node-resize-handle { display: none; }
+		.pict-flow-readonly [data-flow-action="add-node"],
+		.pict-flow-readonly [data-flow-action="delete-selected"],
+		.pict-flow-readonly [data-flow-action="cards-popup"] { display: none; }
+		.pict-flow-frame { fill: none; stroke: var(--theme-color-border, #9aa3ab); stroke-width: 1.5; stroke-dasharray: 8 6; pointer-events: none; }
+		.pict-flow-frame-handle { fill: var(--theme-color-background-panel, #ffffff); stroke: var(--theme-color-brand-primary, #2e7d74); stroke-width: 1.5; }
+		.pict-flow-frame-handle:hover { fill: var(--theme-color-brand-primary, #2e7d74); }
+		.pict-flow-frame-handle-n, .pict-flow-frame-handle-s { cursor: ns-resize; }
+		.pict-flow-frame-handle-e, .pict-flow-frame-handle-w { cursor: ew-resize; }
+		.pict-flow-frame-move-handle { cursor: move; rx: 6; }
+		.pict-flow-node-rotate-arm { stroke: var(--theme-color-brand-primary, #2e7d74); stroke-width: 1.5; }
+		.pict-flow-node-rotate-handle { fill: var(--theme-color-background-panel, #ffffff); stroke: var(--theme-color-brand-primary, #2e7d74); stroke-width: 1.5; cursor: grab; }
+		.pict-flow-node-rotate-handle:hover { fill: var(--theme-color-brand-primary, #2e7d74); }
+		.pict-flow-readonly .pict-flow-node-rotate-arm,
+		.pict-flow-readonly .pict-flow-node-rotate-handle { display: none; }
+		`;
+	}
 }
 
 module.exports = PictProviderFlowCSS;

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;
 	}
 }