pict-section-flow 1.0.0 → 1.1.0

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

@@ -15,13 +15,13 @@ const _CHIP_PER_CHAR_PX  = 5;
 // badge borders so the hint bezier matches its port's affinity color.
 const PORT_TYPE_COLORS =
 {
-	'event-in':  '#3498db',
-	'event-out': '#2ecc71',
-	'setting':   '#e67e22',
-	'value':     '#f1c40f',
-	'error':     '#e74c3c'
+	'event-in':  'var(--theme-color-status-info, #3498db)',
+	'event-out': 'var(--theme-color-status-success, #2ecc71)',
+	'setting':   'var(--theme-color-status-warning, #e67e22)',
+	'value':     'var(--theme-color-status-warning, #f1c40f)',
+	'error':     'var(--theme-color-status-error, #e74c3c)'
 };
-const PORT_TYPE_DEFAULT_COLOR = '#95a5a6';
+const PORT_TYPE_DEFAULT_COLOR = 'var(--theme-color-border-default, #95a5a6)';
 
 class PictServiceFlowConnectionRenderer extends libFableServiceProviderBase
 {

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

@@ -328,6 +328,12 @@ class PictServiceFlowDataManager extends libFableServiceProviderBase
 
 		let tmpRemovedConnection = this._FlowView._FlowData.Connections.splice(tmpConnectionIndex, 1)[0];
 
+		// Close any properties panel open for this connection.
+		if (typeof this._FlowView.closePanelForConnection === 'function')
+		{
+			this._FlowView.closePanelForConnection(pConnectionHash);
+		}
+
 		if (this._FlowView._FlowData.ViewState.SelectedConnectionHash === pConnectionHash)
 		{
 			this._FlowView._FlowData.ViewState.SelectedConnectionHash = null;

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

@@ -322,7 +322,16 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 				{
 					this._LastConnectionClickTime = 0;
 					this._LastConnectionClickHash = null;
-					this._addBezierHandle(tmpTarget, pEvent);
+					// When the host configured a connection properties panel, double-click opens it;
+					// otherwise keep the default behavior of adding a bezier handle.
+					if (this._FlowView.options.ConnectionPropertiesPanel && tmpConnectionHash)
+					{
+						this._FlowView.toggleConnectionPanel(tmpConnectionHash);
+					}
+					else
+					{
+						this._addBezierHandle(tmpTarget, pEvent);
+					}
 				}
 				else
 				{

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

@@ -152,6 +152,98 @@ class PictServiceFlowPanelManager extends libFableServiceProviderBase
 		return this.openPanel(pNodeHash);
 	}
 
+	/**
+	 * Open a properties panel for a connection (edge). The panel config comes from the FlowView's
+	 * ConnectionPropertiesPanel option (connections are not typed, so one config serves them all);
+	 * the panel is placed near the connection's midpoint and tethers to it. Returns false when no
+	 * ConnectionPropertiesPanel is configured, so a host that has not opted in keeps the default
+	 * edge behavior (double-click adds a bezier handle).
+	 * @param {string} pConnectionHash
+	 * @returns {Object|false} The panel data, or false
+	 */
+	openConnectionPanel(pConnectionHash)
+	{
+		let tmpConnection = this._FlowView.getConnection(pConnectionHash);
+		if (!tmpConnection) return false;
+
+		let tmpPanelConfig = this._FlowView.options.ConnectionPropertiesPanel;
+		if (!tmpPanelConfig) return false;
+
+		let tmpExisting = this._FlowView._FlowData.OpenPanels.find((pPanel) => pPanel.ConnectionHash === pConnectionHash);
+		if (tmpExisting) return tmpExisting;
+
+		let tmpMidpoint = this._FlowView.getConnectionMidpoint(pConnectionHash) || { x: 0, y: 0 };
+		let tmpWidth = tmpPanelConfig.DefaultWidth || 300;
+		let tmpHeight = tmpPanelConfig.DefaultHeight || 200;
+
+		let tmpPanelData =
+		{
+			Hash: `panel-${this.fable.getUUID()}`,
+			ConnectionHash: pConnectionHash,
+			NodeHash: null,
+			PanelType: tmpPanelConfig.PanelType || 'Base',
+			Title: tmpPanelConfig.Title || 'Connection',
+			X: tmpMidpoint.x + 40,
+			Y: tmpMidpoint.y + 20,
+			Width: tmpWidth,
+			Height: tmpHeight
+		};
+
+		this._FlowView._FlowData.OpenPanels.push(tmpPanelData);
+		this._FlowView.renderFlow();
+		this._FlowView.marshalFromView();
+
+		if (this._FlowView._EventHandlerProvider)
+		{
+			this._FlowView._EventHandlerProvider.fireEvent('onPanelOpened', tmpPanelData);
+			this._FlowView._EventHandlerProvider.fireEvent('onFlowChanged', this._FlowView._FlowData);
+		}
+
+		return tmpPanelData;
+	}
+
+	/**
+	 * Toggle a properties panel for a connection (open if closed, close if open).
+	 * @param {string} pConnectionHash
+	 * @returns {Object|false}
+	 */
+	toggleConnectionPanel(pConnectionHash)
+	{
+		let tmpExisting = this._FlowView._FlowData.OpenPanels.find((pPanel) => pPanel.ConnectionHash === pConnectionHash);
+		if (tmpExisting)
+		{
+			this.closePanel(tmpExisting.Hash);
+			return false;
+		}
+		return this.openConnectionPanel(pConnectionHash);
+	}
+
+	/**
+	 * Close all panels for a given connection.
+	 * @param {string} pConnectionHash
+	 * @returns {boolean}
+	 */
+	closePanelForConnection(pConnectionHash)
+	{
+		let tmpPanelsToClose = this._FlowView._FlowData.OpenPanels.filter((pPanel) => pPanel.ConnectionHash === pConnectionHash);
+		if (tmpPanelsToClose.length === 0) return false;
+
+		for (let i = 0; i < tmpPanelsToClose.length; i++)
+		{
+			let tmpIndex = this._FlowView._FlowData.OpenPanels.indexOf(tmpPanelsToClose[i]);
+			if (tmpIndex >= 0)
+			{
+				this._FlowView._FlowData.OpenPanels.splice(tmpIndex, 1);
+			}
+			if (this._FlowView._PropertiesPanelView)
+			{
+				this._FlowView._PropertiesPanelView.destroyPanel(tmpPanelsToClose[i].Hash);
+			}
+		}
+
+		return true;
+	}
+
 	/**
 	 * Update a panel's position (for drag).
 	 * @param {string} pPanelHash
@@ -180,8 +272,20 @@ class PictServiceFlowPanelManager extends libFableServiceProviderBase
 			}
 		}
 
-		// Update the tether for this panel
-		this._FlowView._renderTethersForNode(tmpPanel.NodeHash);
+		// Update the tether for this panel. A node panel refreshes just its node's tethers; a
+		// connection panel has no node, so reconcile the panels layer (redraws all tethers, which
+		// is where the connection-midpoint tether is recomputed).
+		if (tmpPanel.ConnectionHash)
+		{
+			if (this._FlowView._PropertiesPanelView && this._FlowView._PanelsLayer && this._FlowView._TethersLayer)
+			{
+				this._FlowView._PropertiesPanelView.renderPanels(this._FlowView._FlowData.OpenPanels, this._FlowView._PanelsLayer, this._FlowView._TethersLayer, this._FlowView._FlowData.ViewState.SelectedTetherHash);
+			}
+		}
+		else
+		{
+			this._FlowView._renderTethersForNode(tmpPanel.NodeHash);
+		}
 	}
 }
 

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

@@ -88,13 +88,13 @@ class PictServiceFlowPortRenderer extends libFableServiceProviderBase
 				{
 					let tmpPortTypeColorMap =
 					{
-						'event-in': '#3498db',
-						'event-out': '#2ecc71',
-						'setting': '#e67e22',
-						'value': '#f1c40f',
-						'error': '#e74c3c'
+						'event-in': 'var(--theme-color-status-info, #3498db)',
+						'event-out': 'var(--theme-color-status-success, #2ecc71)',
+						'setting': 'var(--theme-color-status-warning, #e67e22)',
+						'value': 'var(--theme-color-status-warning, #f1c40f)',
+						'error': 'var(--theme-color-status-error, #e74c3c)'
 					};
-					let tmpBorderColor = tmpPort.PortType ? (tmpPortTypeColorMap[tmpPort.PortType] || '#95a5a6') : '#95a5a6';
+					let tmpBorderColor = tmpPort.PortType ? (tmpPortTypeColorMap[tmpPort.PortType] || 'var(--theme-color-border-default, #95a5a6)') : 'var(--theme-color-border-default, #95a5a6)';
 
 					let tmpBadgeHeight = 12;
 					let tmpBadgePadH = 5;

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

@@ -239,7 +239,7 @@ class PictViewFlowNode extends libPictView
 					tmpCodeText.setAttribute('class', 'pict-flow-node-card-code');
 					tmpCodeText.setAttribute('font-size', '10');
 					tmpCodeText.setAttribute('font-family', 'monospace');
-					tmpCodeText.setAttribute('fill', '#7f8c8d');
+					tmpCodeText.setAttribute('fill', 'var(--theme-color-text-secondary, #7f8c8d)');
 					tmpCodeText.setAttribute('text-anchor', 'middle');
 					tmpCodeText.setAttribute('dominant-baseline', 'central');
 					tmpCodeText.setAttribute('pointer-events', 'none');

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

@@ -242,6 +242,13 @@ class PictViewFlowPropertiesPanel extends libPictView
 	 */
 	_renderPanelContent(pPanelData, pBodyContainer)
 	{
+		// Connection (edge) panels resolve their config and data differently from node panels.
+		if (pPanelData.ConnectionHash)
+		{
+			this._renderConnectionPanelContent(pPanelData, pBodyContainer);
+			return;
+		}
+
 		let tmpNodeData = this._FlowView.getNode(pPanelData.NodeHash);
 		if (!tmpNodeData) return;
 
@@ -298,6 +305,54 @@ class PictViewFlowPropertiesPanel extends libPictView
 		this._renderPortSummary(pBodyContainer, tmpNodeTypeConfig);
 	}
 
+	/**
+	 * Render the content of a connection (edge) panel. The config is the FlowView's single
+	 * ConnectionPropertiesPanel (connections are not typed); the panel-type instance renders
+	 * against the connection object, so a Form panel edits Connection.Data.* and a Template panel
+	 * renders against the connection.
+	 *
+	 * @param {Object} pPanelData
+	 * @param {HTMLDivElement} pBodyContainer
+	 */
+	_renderConnectionPanelContent(pPanelData, pBodyContainer)
+	{
+		let tmpConnectionData = this._FlowView.getConnection(pPanelData.ConnectionHash);
+		if (!tmpConnectionData) return;
+
+		let tmpPanelConfig = this._FlowView.options.ConnectionPropertiesPanel;
+		if (!tmpPanelConfig)
+		{
+			pBodyContainer.innerHTML = '<em>No connection properties panel configured.</em>';
+			return;
+		}
+
+		let tmpPanelType = tmpPanelConfig.PanelType || 'Base';
+		let tmpServiceName = `PictFlowCardPropertiesPanel-${tmpPanelType}`;
+		let tmpInstance = this._PanelInstances[pPanelData.Hash];
+
+		if (!tmpInstance)
+		{
+			if (this.fable.servicesMap.hasOwnProperty(tmpServiceName))
+			{
+				tmpInstance = this.fable.instantiateServiceProviderWithoutRegistration(tmpServiceName, tmpPanelConfig);
+			}
+			else if (this.fable.servicesMap.hasOwnProperty('PictFlowCardPropertiesPanel'))
+			{
+				tmpInstance = this.fable.instantiateServiceProviderWithoutRegistration('PictFlowCardPropertiesPanel', tmpPanelConfig);
+			}
+			if (tmpInstance)
+			{
+				tmpInstance._FlowView = this._FlowView;
+				this._PanelInstances[pPanelData.Hash] = tmpInstance;
+			}
+		}
+
+		if (tmpInstance)
+		{
+			tmpInstance.render(pBodyContainer, tmpConnectionData);
+		}
+	}
+
 	/**
 	 * Render an auto-generated info panel for nodes without a configured PropertiesPanel.
 	 * Shows the node type, description, and a summary of input/output ports with
@@ -547,7 +602,7 @@ class PictViewFlowPropertiesPanel extends libPictView
 
 		// Resolve default colors from the node type config or CSS token defaults
 		let tmpNodeTypeConfig = this._FlowView._NodeTypeProvider.getNodeType(tmpNodeData.Type);
-		let tmpDefaultTitleBarColor = '#2c3e50';
+		let tmpDefaultTitleBarColor = 'var(--theme-color-text-primary, #2c3e50)';
 		let tmpDefaultBodyFill = '#ffffff';
 		let tmpDefaultBodyStroke = '#d0d4d8';
 		if (tmpNodeTypeConfig)
@@ -716,11 +771,23 @@ class PictViewFlowPropertiesPanel extends libPictView
 		let tmpTetherService = this._FlowView._TetherService;
 		if (!tmpTetherService) return;
 
-		let tmpNodeData = this._FlowView.getNode(pPanelData.NodeHash);
-		if (!tmpNodeData) return;
+		// A connection panel tethers to the edge midpoint; model it as a zero-size anchor at that
+		// point so the same tether geometry applies. A node panel tethers to its node.
+		let tmpAnchorData;
+		if (pPanelData.ConnectionHash)
+		{
+			let tmpMidpoint = this._FlowView.getConnectionMidpoint(pPanelData.ConnectionHash);
+			if (!tmpMidpoint) return;
+			tmpAnchorData = { X: tmpMidpoint.x, Y: tmpMidpoint.y, Width: 0, Height: 0 };
+		}
+		else
+		{
+			tmpAnchorData = this._FlowView.getNode(pPanelData.NodeHash);
+			if (!tmpAnchorData) return;
+		}
 
 		let tmpViewIdentifier = this._FlowView.options.ViewIdentifier;
-		tmpTetherService.renderTether(pPanelData, tmpNodeData, pTethersLayer, pIsSelected, tmpViewIdentifier);
+		tmpTetherService.renderTether(pPanelData, tmpAnchorData, pTethersLayer, pIsSelected, tmpViewIdentifier);
 	}
 
 	/**

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

@@ -1500,30 +1500,36 @@ class PictViewFlowToolbar extends libPictView
 	 */
 	_buildSettingsPopup(pContainer)
 	{
-		if (!this._FlowView || !this._FlowView._ThemeProvider) return;
+		if (!this._FlowView) return;
 
 		let tmpFlowViewIdentifier = this.options.FlowViewIdentifier;
-		let tmpThemeProvider = this._FlowView._ThemeProvider;
-		let tmpThemeKeys = tmpThemeProvider.getThemeKeys();
-		let tmpActiveKey = tmpThemeProvider.getActiveThemeKey();
+		let tmpPresetsProvider = this._FlowView._StylePresetsProvider;
+		let tmpRendererProvider = this._FlowView._RendererProvider;
+		if (!tmpPresetsProvider || !tmpRendererProvider) return;
+
+		// The single "Style" picker surfaces curated presets — each one bundles
+		// a ColorTheme + Renderer + EdgeTheme. Per-axis overrides live behind
+		// future "Customize" UI; the toolbar shows the preset list only.
+		let tmpPresets = tmpPresetsProvider.listPresets();
+		let tmpActivePreset = tmpPresetsProvider.getActivePresetHash();
 
 		let tmpThemeOptions = [];
-		for (let i = 0; i < tmpThemeKeys.length; i++)
+		for (let i = 0; i < tmpPresets.length; i++)
 		{
-			let tmpTheme = tmpThemeProvider._Themes[tmpThemeKeys[i]];
+			let tmpPreset = tmpPresets[i];
 			tmpThemeOptions.push(
 			{
-				Value: tmpThemeKeys[i],
-				Label: tmpTheme.Label || tmpThemeKeys[i],
-				SelectedAttr: (tmpThemeKeys[i] === tmpActiveKey) ? ' selected="selected"' : ''
+				Value: tmpPreset.Hash,
+				Label: tmpPreset.Label || tmpPreset.Hash,
+				SelectedAttr: (tmpPreset.Hash === tmpActivePreset) ? ' selected="selected"' : ''
 			});
 		}
 
 		let tmpThemeOptionsHTML = this.pict.parseTemplateByHash('Flow-Layout-OptionList', { Options: tmpThemeOptions });
 
-		let tmpNoiseLevel = Math.round(tmpThemeProvider.getNoiseLevel() * 100);
-		let tmpActiveTheme = tmpThemeProvider.getActiveTheme();
-		let tmpNoiseEnabled = !!(tmpActiveTheme && tmpActiveTheme.NoiseConfig && tmpActiveTheme.NoiseConfig.Enabled);
+		let tmpNoiseLevel = Math.round(tmpRendererProvider.getNoiseLevel() * 100);
+		let tmpActiveRenderer = tmpRendererProvider.getActiveRenderer();
+		let tmpNoiseEnabled = !!(tmpActiveRenderer && tmpActiveRenderer.NoiseConfig && tmpActiveRenderer.NoiseConfig.Enabled);
 		let tmpNoiseDisplay = tmpNoiseEnabled ? '' : 'display:none;';
 
 		this.pict.ContentAssignment.assignContent(pContainer,
@@ -1585,16 +1591,18 @@ class PictViewFlowToolbar extends libPictView
 		let tmpNoiseSection = pContainer.querySelector('[data-settings-type="noise"]');
 		if (!tmpNoiseSection) return;
 
-		let tmpTheme = this._FlowView._ThemeProvider.getActiveTheme();
-		if (tmpTheme && tmpTheme.NoiseConfig && tmpTheme.NoiseConfig.Enabled)
+		let tmpRendererProvider = this._FlowView._RendererProvider;
+		if (!tmpRendererProvider) { tmpNoiseSection.style.display = 'none'; return; }
+		let tmpRenderer = tmpRendererProvider.getActiveRenderer();
+		if (tmpRenderer && tmpRenderer.NoiseConfig && tmpRenderer.NoiseConfig.Enabled)
 		{
 			tmpNoiseSection.style.display = '';
-			// Update slider value to reflect theme default
+			// Update slider value to reflect renderer default
 			let tmpSlider = tmpNoiseSection.querySelector('.pict-flow-popup-settings-slider');
 			let tmpValueLabel = tmpNoiseSection.querySelector('.pict-flow-popup-settings-slider-value');
 			if (tmpSlider)
 			{
-				let tmpLevel = Math.round(this._FlowView._ThemeProvider.getNoiseLevel() * 100);
+				let tmpLevel = Math.round(tmpRendererProvider.getNoiseLevel() * 100);
 				tmpSlider.value = String(tmpLevel);
 				if (tmpValueLabel) tmpValueLabel.textContent = tmpLevel + '%';
 			}