pict-section-flow 1.4.0 → 2.0.1

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

@@ -1,23 +1,20 @@
-const libFableServiceProviderBase = require('fable-serviceproviderbase');
+const libPictProviderGraphGeometry = require('pict-provider-graphgeometry');
 
 /**
  * PictProvider-Flow-Geometry
  *
- * Shared geometry utilities for the flow diagram.
- * Provides direction vectors and edge center calculations used by
- * connections, tethers, and other flow components.
+ * Backwards-compatible shim. As of the flow 2.0 plan (Phase 1a) the geometry
+ * math lives in the standalone, dependency-free pict-provider-graphgeometry
+ * module so it can be reused and unit tested on its own. This subclass keeps the
+ * historical `PictProviderFlowGeometry` export and serviceType so the flow
+ * service registry, every caller (PortRenderer, Node view, ConnectionRenderer,
+ * Tether), and the existing Geometry_tests.js are unaffected. All methods are
+ * inherited and delegate to the GraphGeometry core.
  *
- * Port Side values (12 positions):
- *
- *   Top edge:    'top-left'     'top'     'top-right'
- *   Left edge:   'left-top'     'left'    'left-bottom'
- *   Right edge:  'right-top'    'right'   'right-bottom'
- *   Bottom edge: 'bottom-left'  'bottom'  'bottom-right'
- *
- * The old 4-value sides ('left', 'right', 'top', 'bottom') map to
- * the middle position on each edge for backward compatibility.
+ * Port Side values (12 positions) and the full method set are documented in
+ * pict-provider-graphgeometry/source/GraphGeometry-Core.js.
  */
-class PictProviderFlowGeometry extends libFableServiceProviderBase
+class PictProviderFlowGeometry extends libPictProviderGraphGeometry
 {
 	constructor(pFable, pOptions, pServiceHash)
 	{
@@ -25,413 +22,6 @@ class PictProviderFlowGeometry extends libFableServiceProviderBase
 
 		this.serviceType = 'PictProviderFlowGeometry';
 	}
-
-	/**
-	 * Extract the edge name from a Side value.
-	 *
-	 * Maps all 12 positions (and the 4 legacy values) back to
-	 * the edge they sit on: 'left', 'right', 'top', or 'bottom'.
-	 *
-	 * @param {string} pSide - Any valid Side value
-	 * @returns {string} The edge: 'left', 'right', 'top', or 'bottom'
-	 */
-	getEdgeFromSide(pSide)
-	{
-		switch (pSide)
-		{
-			case 'left-top':
-			case 'left':
-			case 'left-bottom':
-				return 'left';
-
-			case 'right-top':
-			case 'right':
-			case 'right-bottom':
-				return 'right';
-
-			case 'top-left':
-			case 'top':
-			case 'top-right':
-				return 'top';
-
-			case 'bottom-left':
-			case 'bottom':
-			case 'bottom-right':
-				return 'bottom';
-
-			default:
-				return 'right';
-		}
-	}
-
-	/**
-	 * Get the outward unit direction vector for a given side.
-	 *
-	 * All positions on the same edge share the same direction vector.
-	 *
-	 * @param {string} pSide - Any valid Side value (12 positions or 4 legacy)
-	 * @returns {{dx: number, dy: number}}
-	 */
-	sideDirection(pSide)
-	{
-		switch (this.getEdgeFromSide(pSide))
-		{
-			case 'left':   return { dx: -1, dy: 0 };
-			case 'right':  return { dx: 1, dy: 0 };
-			case 'top':    return { dx: 0, dy: -1 };
-			case 'bottom': return { dx: 0, dy: 1 };
-			default:       return { dx: 1, dy: 0 };
-		}
-	}
-
-	/**
-	 * Get the center point of a rectangle's edge.
-	 * Works for any object with X, Y, Width, Height properties
-	 * (nodes, panels, or any rectangular element).
-	 *
-	 * @param {Object} pRectData - Object with X, Y, Width, Height
-	 * @param {string} pSide - 'left', 'right', 'top', 'bottom'
-	 * @returns {{x: number, y: number}}
-	 */
-	getEdgeCenter(pRectData, pSide)
-	{
-		switch (pSide)
-		{
-			case 'left':
-				return { x: pRectData.X, y: pRectData.Y + pRectData.Height / 2 };
-			case 'right':
-				return { x: pRectData.X + pRectData.Width, y: pRectData.Y + pRectData.Height / 2 };
-			case 'top':
-				return { x: pRectData.X + pRectData.Width / 2, y: pRectData.Y };
-			case 'bottom':
-				return { x: pRectData.X + pRectData.Width / 2, y: pRectData.Y + pRectData.Height };
-			default:
-				return { x: pRectData.X + pRectData.Width, y: pRectData.Y + pRectData.Height / 2 };
-		}
-	}
-
-	/**
-	 * Calculate a port's local position relative to node origin.
-	 *
-	 * Supports 12 positions (3 zones per edge).  For left/right edges,
-	 * the body area below the title bar is divided into vertical zones.
-	 * For top/bottom edges, the full width is divided into horizontal zones.
-	 *
-	 * When pPortCountsBySide is provided, zone fractions are computed
-	 * proportionally based on actual port counts (adaptive zones).
-	 * Otherwise, fixed 1/3 zones are used for backward compatibility.
-	 *
-	 * Multiple ports sharing the same Side value distribute evenly within
-	 * their zone.
-	 *
-	 * @param {string} pSide - Side value (any of 12 positions or 4 legacy)
-	 * @param {number} pIndex - Index of this port within its Side group
-	 * @param {number} pTotal - Total ports with this Side value
-	 * @param {number} pWidth - Node width
-	 * @param {number} pHeight - Node height
-	 * @param {number} pTitleBarHeight - Height of the node title bar
-	 * @param {Object} [pPortCountsBySide] - Optional map of Side → port count
-	 *        for all ports on the node.  Enables adaptive zone sizing.
-	 * @returns {{x: number, y: number}}
-	 */
-	getPortLocalPosition(pSide, pIndex, pTotal, pWidth, pHeight, pTitleBarHeight, pPortCountsBySide)
-	{
-		let tmpEdge = this.getEdgeFromSide(pSide);
-		let tmpZone = pPortCountsBySide
-			? this._computeAdaptiveZone(pSide, pPortCountsBySide)
-			: this._getZoneFromSide(pSide);
-
-		// Use the fixed zone to decide alignment intent (start/center/end)
-		// because adaptive zones shift boundaries when neighbouring zones
-		// are empty, which would break alignment decisions.
-		let tmpFixedZone = this._getZoneFromSide(pSide);
-
-		// Minimum spacing between port centers (px)
-		let tmpMinSpacing = 16;
-
-		// Reserve space at the bottom of the body so that port badges
-		// never overlap the panel-indicator icon (10×10 rect at bottom-right)
-		// and always leave a visible gap above the node bottom edge.
-		let tmpBottomPad = 16;
-
-		// Determine alignment from the fixed zone position:
-		//   start zone  (0.000 – 0.333) → start-align (offset 0)
-		//   middle zone (0.333 – 0.667) → center
-		//   end zone    (0.667 – 1.000) → end-align
-		let tmpAlignment = 'start';
-		if (tmpFixedZone.start >= 0.5)
-		{
-			tmpAlignment = 'end';
-		}
-		else if (tmpFixedZone.start >= 0.17)
-		{
-			tmpAlignment = 'center';
-		}
-
-		if (tmpEdge === 'left' || tmpEdge === 'right')
-		{
-			let tmpX = (tmpEdge === 'left') ? 0 : pWidth;
-			let tmpBodyHeight = pHeight - pTitleBarHeight - tmpBottomPad;
-			let tmpZoneStart = pTitleBarHeight + tmpBodyHeight * tmpZone.start;
-			let tmpZoneHeight = tmpBodyHeight * (tmpZone.end - tmpZone.start);
-
-			// Use fixed spacing so port gaps stay consistent across cards
-			// even when one edge drives the card height beyond what the
-			// other needs.
-			let tmpSpacing = tmpMinSpacing;
-			let tmpGroupHeight = tmpSpacing * (pTotal + 1);
-			let tmpSlack = tmpZoneHeight - tmpGroupHeight;
-			if (tmpSlack < 0)
-			{
-				tmpSlack = 0;
-			}
-
-			let tmpAlignOffset = 0;
-			if (tmpAlignment === 'end')
-			{
-				tmpAlignOffset = tmpSlack;
-			}
-			else if (tmpAlignment === 'center')
-			{
-				tmpAlignOffset = tmpSlack / 2;
-			}
-
-			let tmpY = tmpZoneStart + tmpAlignOffset + tmpSpacing * (pIndex + 1);
-			return { x: tmpX, y: tmpY };
-		}
-
-		// top or bottom
-		let tmpY = (tmpEdge === 'top') ? 0 : pHeight;
-		let tmpZoneStart = pWidth * tmpZone.start;
-		let tmpZoneWidth = pWidth * (tmpZone.end - tmpZone.start);
-
-		let tmpSpacing = tmpMinSpacing;
-		let tmpGroupWidth = tmpSpacing * (pTotal + 1);
-		let tmpSlack = tmpZoneWidth - tmpGroupWidth;
-		if (tmpSlack < 0)
-		{
-			tmpSlack = 0;
-		}
-
-		let tmpAlignOffset = 0;
-		if (tmpAlignment === 'end')
-		{
-			tmpAlignOffset = tmpSlack;
-		}
-		else if (tmpAlignment === 'center')
-		{
-			tmpAlignOffset = tmpSlack / 2;
-		}
-
-		let tmpX = tmpZoneStart + tmpAlignOffset + tmpSpacing * (pIndex + 1);
-		return { x: tmpX, y: tmpY };
-	}
-
-	/**
-	 * Get the zone fraction (start, end) for a Side value.
-	 *
-	 * Each edge is divided into three zones of equal size:
-	 *   start:  0.0 — 0.333
-	 *   middle: 0.333 — 0.667
-	 *   end:    0.667 — 1.0
-	 *
-	 * Used as fallback when adaptive zones are not available.
-	 *
-	 * @param {string} pSide
-	 * @returns {{start: number, end: number}}
-	 */
-	_getZoneFromSide(pSide)
-	{
-		switch (pSide)
-		{
-			// Left edge: top, middle, bottom
-			case 'left-top':     return { start: 0.0,   end: 0.333 };
-			case 'left':         return { start: 0.333, end: 0.667 };
-			case 'left-bottom':  return { start: 0.667, end: 1.0 };
-
-			// Right edge: top, middle, bottom
-			case 'right-top':    return { start: 0.0,   end: 0.333 };
-			case 'right':        return { start: 0.333, end: 0.667 };
-			case 'right-bottom': return { start: 0.667, end: 1.0 };
-
-			// Top edge: left, middle, right
-			case 'top-left':     return { start: 0.0,   end: 0.333 };
-			case 'top':          return { start: 0.333, end: 0.667 };
-			case 'top-right':    return { start: 0.667, end: 1.0 };
-
-			// Bottom edge: left, middle, right
-			case 'bottom-left':  return { start: 0.0,   end: 0.333 };
-			case 'bottom':       return { start: 0.333, end: 0.667 };
-			case 'bottom-right': return { start: 0.667, end: 1.0 };
-
-			// Fallback: full range (legacy behavior)
-			default:             return { start: 0.0,   end: 1.0 };
-		}
-	}
-
-	/**
-	 * Get the three zone Side keys for a given edge, in order.
-	 *
-	 * @param {string} pEdge - 'left', 'right', 'top', or 'bottom'
-	 * @returns {Array<string>} Three Side keys in start-to-end order
-	 */
-	_getZoneKeysForEdge(pEdge)
-	{
-		switch (pEdge)
-		{
-			case 'left':   return ['left-top', 'left', 'left-bottom'];
-			case 'right':  return ['right-top', 'right', 'right-bottom'];
-			case 'top':    return ['top-left', 'top', 'top-right'];
-			case 'bottom': return ['bottom-left', 'bottom', 'bottom-right'];
-			default:       return ['right-top', 'right', 'right-bottom'];
-		}
-	}
-
-	/**
-	 * Compute an adaptive zone fraction for a Side value based on the
-	 * actual port distribution across all zones on the same edge.
-	 *
-	 * Instead of fixed 1/3 splits, zones are sized proportionally to the
-	 * space each zone needs (minSpacing * (portCount + 1)).  Zones with
-	 * zero ports collapse to zero, giving occupied zones more room.
-	 *
-	 * @param {string} pSide - The Side value to compute a zone for
-	 * @param {Object} pPortCountsBySide - Map of Side → number of ports
-	 * @returns {{start: number, end: number}}
-	 */
-	_computeAdaptiveZone(pSide, pPortCountsBySide)
-	{
-		let tmpEdge = this.getEdgeFromSide(pSide);
-		let tmpZoneKeys = this._getZoneKeysForEdge(tmpEdge);
-
-		let tmpMinSpacing = 16;
-
-		// Compute the space each zone needs: minSpacing * (count + 1)
-		// The +1 provides padding at both ends of the zone.
-		let tmpTotalSpace = 0;
-		let tmpSpaceByZone = {};
-		for (let i = 0; i < tmpZoneKeys.length; i++)
-		{
-			let tmpKey = tmpZoneKeys[i];
-			let tmpCount = pPortCountsBySide[tmpKey] || 0;
-			let tmpSpace = (tmpCount > 0) ? (tmpMinSpacing * (tmpCount + 1)) : 0;
-			tmpSpaceByZone[tmpKey] = tmpSpace;
-			tmpTotalSpace += tmpSpace;
-		}
-
-		// If no ports on this edge at all, fall back to fixed zones
-		if (tmpTotalSpace === 0)
-		{
-			return this._getZoneFromSide(pSide);
-		}
-
-		// Compute proportional start/end for the requested zone
-		let tmpCumulativeStart = 0;
-		for (let i = 0; i < tmpZoneKeys.length; i++)
-		{
-			let tmpKey = tmpZoneKeys[i];
-			let tmpFraction = tmpSpaceByZone[tmpKey] / tmpTotalSpace;
-			if (tmpKey === pSide)
-			{
-				return { start: tmpCumulativeStart, end: tmpCumulativeStart + tmpFraction };
-			}
-			tmpCumulativeStart += tmpFraction;
-		}
-
-		// Should not reach here; fall back to fixed zones
-		return this._getZoneFromSide(pSide);
-	}
-
-	/**
-	 * Build a map of Side → port count from an array of port objects.
-	 *
-	 * Convenience method for callers that need to pass port counts
-	 * to getPortLocalPosition or computeMinimumNodeHeight.
-	 *
-	 * @param {Array} pPorts - Array of port objects with Side, Direction
-	 * @returns {Object} Map of Side value → count
-	 */
-	buildPortCountsBySide(pPorts)
-	{
-		let tmpCounts = {};
-		if (!pPorts || !Array.isArray(pPorts))
-		{
-			return tmpCounts;
-		}
-		for (let i = 0; i < pPorts.length; i++)
-		{
-			let tmpSide = pPorts[i].Side || (pPorts[i].Direction === 'input' ? 'left' : 'right');
-			if (!tmpCounts[tmpSide])
-			{
-				tmpCounts[tmpSide] = 0;
-			}
-			tmpCounts[tmpSide]++;
-		}
-		return tmpCounts;
-	}
-
-	/**
-	 * Compute the minimum node height required so that all ports
-	 * (with their badges) fit within the node boundary.
-	 *
-	 * Uses adaptive zone sizing: instead of assuming each zone gets
-	 * a fixed 1/3 of the body, sums the space needed by all occupied
-	 * zones on each left/right edge.  This produces compact cards
-	 * whose height scales linearly with total port count.
-	 *
-	 * @param {Array} pPorts - Array of port objects with Side, Direction
-	 * @param {number} pTitleBarHeight - Height of the title bar
-	 * @returns {number} Minimum node height in pixels (0 if no ports)
-	 */
-	computeMinimumNodeHeight(pPorts, pTitleBarHeight)
-	{
-		if (!pPorts || !Array.isArray(pPorts) || pPorts.length === 0)
-		{
-			return 0;
-		}
-
-		let tmpMinSpacing = 16;
-		let tmpBottomPad = 16;
-
-		// Count ports per Side value
-		let tmpCountBySide = this.buildPortCountsBySide(pPorts);
-
-		// Sum the space needed per edge (left, right) across all zones.
-		// Each zone needs minSpacing * (count + 1) pixels.
-		let tmpSpacePerEdge = {};
-		for (let tmpSide in tmpCountBySide)
-		{
-			let tmpEdge = this.getEdgeFromSide(tmpSide);
-
-			// Only left/right edge zones affect required height
-			if (tmpEdge !== 'left' && tmpEdge !== 'right')
-			{
-				continue;
-			}
-
-			let tmpCount = tmpCountBySide[tmpSide];
-			let tmpZoneSpace = tmpMinSpacing * (tmpCount + 1);
-
-			if (!tmpSpacePerEdge[tmpEdge])
-			{
-				tmpSpacePerEdge[tmpEdge] = 0;
-			}
-			tmpSpacePerEdge[tmpEdge] += tmpZoneSpace;
-		}
-
-		// The minimum height is titleBar + bottomPad + max edge space
-		let tmpMinHeight = 0;
-		for (let tmpEdge in tmpSpacePerEdge)
-		{
-			let tmpRequired = pTitleBarHeight + tmpBottomPad + tmpSpacePerEdge[tmpEdge];
-			if (tmpRequired > tmpMinHeight)
-			{
-				tmpMinHeight = tmpRequired;
-			}
-		}
-
-		return Math.ceil(tmpMinHeight);
-	}
 }
 
 module.exports = PictProviderFlowGeometry;

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

@@ -53,6 +53,18 @@ const _DefaultIcons =
 
 	'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>',
 
+	// Pan / navigate "hand" tool — read-only surfaces use this to toggle pan + zoom on the canvas.
+	'pan': '<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="M18 11V6.5a1.5 1.5 0 0 0-3 0M15 6.5V4.5a1.5 1.5 0 0 0-3 0V6M12 6V5a1.5 1.5 0 0 0-3 0v7M9 12V8.5a1.5 1.5 0 0 0-3 0V14a6 6 0 0 0 6 6h1a5 5 0 0 0 5-5v-4a1.5 1.5 0 0 0-3 0" fill="var(--theme-color-background-secondary, #d5e8f7)" stroke="var(--theme-color-text-primary, #2c3e50)" stroke-width="2"/></svg>',
+
+	// Crop / view-area frame — a host (e.g. a moodboard) uses this to toggle the content-frame drag handles.
+	'frame': '<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="M6 2v16a1 1 0 0 0 1 1h16"/><path d="M2 6h16a1 1 0 0 1 1 1v16"/><rect x="9" y="9" width="6" height="5" rx="1" fill="var(--theme-color-background-secondary, #d5e8f7)" stroke="none"/></svg>',
+
+	// Display-style toggles for a presentation surface (moodboard): canvas (a free board of cards),
+	// jumbotron (a hero band across the top), background (a full-width backdrop behind content).
+	'display-canvas': '<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"><rect x="3" y="4" width="18" height="16" rx="2"/><rect x="6" y="7" width="6" height="5" rx="1" fill="var(--theme-color-background-secondary, #d5e8f7)" stroke="none"/><rect x="14" y="11" width="5" height="6" rx="1" fill="var(--theme-color-background-secondary, #d5e8f7)" stroke="none"/></svg>',
+	'display-jumbotron': '<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"><rect x="3" y="4" width="18" height="16" rx="2"/><rect x="3" y="4" width="18" height="7" rx="2" fill="var(--theme-color-background-secondary, #d5e8f7)" stroke="none"/><path d="M6 15h8M6 18h12"/></svg>',
+	'display-background': '<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"><rect x="3" y="4" width="18" height="16" rx="2" fill="var(--theme-color-background-secondary, #d5e8f7)"/><rect x="8" y="8" width="8" height="8" rx="1" fill="var(--theme-color-background-panel, #ffffff)"/></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/providers/PictProvider-Flow-Layouts.js

@@ -67,6 +67,20 @@ class PictProviderFlowLayouts extends libPictProvider
 		}
 	}
 
+	/**
+	 * Resolve a host-supplied storage backend, if one was passed as the flow's
+	 * `LayoutStorage` option: `{ read(cb), write(layouts, cb), delete(cb) }` with
+	 * Node-style callbacks. Lets a host wire a REST API / IndexedDB by config
+	 * instead of overriding the three storage hooks. Returns null to fall back to
+	 * localStorage.
+	 * @returns {Object|null}
+	 */
+	_resolveLayoutStorage()
+	{
+		let tmpStorage = (this._FlowView && this._FlowView.options) ? this._FlowView.options.LayoutStorage : null;
+		return (tmpStorage && typeof tmpStorage === 'object') ? tmpStorage : null;
+	}
+
 	// ── Storage Hooks ─────────────────────────────────────────────────────
 	// These three methods form the persistence contract.  The default
 	// implementation uses localStorage.  Override them on the instance or
@@ -84,6 +98,11 @@ class PictProviderFlowLayouts extends libPictProvider
 	 */
 	storageWrite(pLayouts, fCallback)
 	{
+		let tmpStorage = this._resolveLayoutStorage();
+		if (tmpStorage && typeof tmpStorage.write === 'function')
+		{
+			return tmpStorage.write(pLayouts, fCallback);
+		}
 		if (this._StorageKey === false)
 		{
 			return fCallback(null);
@@ -113,6 +132,11 @@ class PictProviderFlowLayouts extends libPictProvider
 	 */
 	storageRead(fCallback)
 	{
+		let tmpStorage = this._resolveLayoutStorage();
+		if (tmpStorage && typeof tmpStorage.read === 'function')
+		{
+			return tmpStorage.read(fCallback);
+		}
 		if (this._StorageKey === false)
 		{
 			return fCallback(null, []);
@@ -149,6 +173,11 @@ class PictProviderFlowLayouts extends libPictProvider
 	 */
 	storageDelete(fCallback)
 	{
+		let tmpStorage = this._resolveLayoutStorage();
+		if (tmpStorage && typeof tmpStorage.delete === 'function')
+		{
+			return tmpStorage.delete(fCallback);
+		}
 		if (this._StorageKey === false)
 		{
 			return fCallback(null);
@@ -489,6 +518,84 @@ class PictProviderFlowLayouts extends libPictProvider
 			(pLayout) => pLayout.Hash === pLayoutHash
 		) || null;
 	}
+
+	// ── Default layout ─────────────────────────────────────────────────────
+	// One saved layout can be marked the default arrangement for a graph. The
+	// mark is an IsDefault flag on the layout object, so it rides inside
+	// SavedLayouts and persists through both the storage hooks and
+	// getFlowData/setFlowData with no storage-shape change.
+
+	/**
+	 * Mark a saved layout as the default (clearing any previous default). Pass a
+	 * falsy hash to clear the default entirely. Persists the change.
+	 * @param {string} pLayoutHash
+	 * @returns {boolean} true on success; false if a given hash was not found
+	 */
+	setDefaultLayout(pLayoutHash)
+	{
+		if (!this._FlowView)
+		{
+			this.log.warn('PictProviderFlowLayouts setDefaultLayout: no FlowView reference');
+			return false;
+		}
+
+		let tmpFlowData = this._FlowView._FlowData;
+		let tmpFound = false;
+		for (let i = 0; i < tmpFlowData.SavedLayouts.length; i++)
+		{
+			let tmpIsMatch = (!!pLayoutHash && tmpFlowData.SavedLayouts[i].Hash === pLayoutHash);
+			tmpFlowData.SavedLayouts[i].IsDefault = tmpIsMatch;
+			if (tmpIsMatch) { tmpFound = true; }
+		}
+
+		// A falsy hash clears the default (every IsDefault now false); a non-matching hash is an error.
+		if (pLayoutHash && !tmpFound)
+		{
+			this.log.warn(`PictProviderFlowLayouts setDefaultLayout: layout '${pLayoutHash}' not found`);
+			return false;
+		}
+
+		this._FlowView.marshalFromView();
+		this.storageWrite(tmpFlowData.SavedLayouts, (pError) =>
+		{
+			if (pError)
+			{
+				this.log.warn(`PictProviderFlowLayouts: failed to persist default: ${pError.message}`);
+			}
+		});
+
+		if (this._FlowView._EventHandlerProvider)
+		{
+			this._FlowView._EventHandlerProvider.fireEvent('onLayoutDefaultChanged', this.getDefaultLayout());
+			this._FlowView._EventHandlerProvider.fireEvent('onFlowChanged', tmpFlowData);
+		}
+
+		return true;
+	}
+
+	/**
+	 * The layout currently marked default, or null if none.
+	 * @returns {Object|null}
+	 */
+	getDefaultLayout()
+	{
+		if (!this._FlowView) return null;
+		return this._FlowView._FlowData.SavedLayouts.find((pLayout) => pLayout.IsDefault === true) || null;
+	}
+
+	/**
+	 * Restore the default layout if one is set.
+	 * @returns {boolean} true if a default existed and was restored
+	 */
+	applyDefaultLayout()
+	{
+		let tmpDefault = this.getDefaultLayout();
+		if (!tmpDefault)
+		{
+			return false;
+		}
+		return this.restoreLayout(tmpDefault.Hash);
+	}
 }
 
 module.exports = PictProviderFlowLayouts;

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

@@ -1,5 +1,5 @@
 const libFableServiceProviderBase = require('fable-serviceproviderbase');
-const libPerimeterMath = require('../providers/edges/Edge-PerimeterMath.js');
+const libPerimeterMath = require('pict-provider-graphlayout').Edges.PerimeterMath;
 
 // Chip (port-label badge) geometry — must mirror PortRenderer's badge
 // dimensions exactly so hint paths land on the chip's actual outer