pict-section-flow 1.4.0 → 2.0.1

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

@@ -32,6 +32,20 @@ class PictServiceFlowViewportManager extends libFableServiceProviderBase
 		);
 	}
 
+	/**
+	 * Pan the viewport by a delta in screen pixels (added to the current pan).
+	 * Used by wheel-pan and any consumer that wants to nudge the canvas.
+	 * @param {number} pDX
+	 * @param {number} pDY
+	 */
+	panBy(pDX, pDY)
+	{
+		let tmpVS = this._FlowView._FlowData.ViewState;
+		tmpVS.PanX += pDX;
+		tmpVS.PanY += pDY;
+		this.updateViewportTransform();
+	}
+
 	/**
 	 * Set zoom level
 	 * @param {number} pZoom - The zoom level
@@ -95,6 +109,94 @@ class PictServiceFlowViewportManager extends libFableServiceProviderBase
 		this.updateViewportTransform();
 	}
 
+	/**
+	 * Fit the viewport to a content frame box (origin + size in content space),
+	 * centering it with a little padding. Mirrors zoomToFit but for a fixed box
+	 * rather than the node bounds.
+	 * @param {Object} pFrame - { X, Y, Width, Height }
+	 * @returns {boolean}
+	 */
+	fitToFrame(pFrame)
+	{
+		if (!pFrame || !pFrame.Width || !pFrame.Height) return false;
+		if (!this._FlowView._SVGElement) return false;
+
+		let tmpPadding = 20;
+		let tmpFrameWidth = pFrame.Width + tmpPadding * 2;
+		let tmpFrameHeight = pFrame.Height + tmpPadding * 2;
+
+		let tmpSVGRect = this._FlowView._SVGElement.getBoundingClientRect();
+		let tmpScaleX = tmpSVGRect.width / tmpFrameWidth;
+		let tmpScaleY = tmpSVGRect.height / tmpFrameHeight;
+		let tmpZoom = Math.min(tmpScaleX, tmpScaleY);
+		tmpZoom = Math.max(this._FlowView.options.MinZoom, Math.min(this._FlowView.options.MaxZoom, tmpZoom));
+
+		let tmpCenterX = (pFrame.X || 0) + pFrame.Width / 2;
+		let tmpCenterY = (pFrame.Y || 0) + pFrame.Height / 2;
+
+		this._FlowView._FlowData.ViewState.Zoom = tmpZoom;
+		this._FlowView._FlowData.ViewState.PanX = (tmpSVGRect.width / 2) - (tmpCenterX * tmpZoom);
+		this._FlowView._FlowData.ViewState.PanY = (tmpSVGRect.height / 2) - (tmpCenterY * tmpZoom);
+
+		this.updateViewportTransform();
+		return true;
+	}
+
+	/**
+	 * Fit the frame's WIDTH to the container width (vs fitToFrame, which contains the whole
+	 * frame and centers it), anchoring the frame's top-left at the container's top-left plus
+	 * an optional top margin. Content outside the frame bleeds past the edges on purpose;
+	 * vertical overflow is the host's call (a jumbotron clips to the frame height, a
+	 * fullscreen / background view lets the user scroll down).
+	 * @param {Object} pFrame - { X, Y, Width }
+	 * @param {Object} [pOptions] - { TopMargin }
+	 * @returns {boolean}
+	 */
+	fitToFrameWidth(pFrame, pOptions)
+	{
+		if (!pFrame || !pFrame.Width) return false;
+		if (!this._FlowView._SVGElement) return false;
+
+		let tmpRect = this._FlowView._SVGElement.getBoundingClientRect();
+		let tmpResult = PictServiceFlowViewportManager.computeFitToWidth(pFrame, tmpRect.width,
+			{
+				TopMargin: (pOptions && pOptions.TopMargin) || 0,
+				MinZoom: this._FlowView.options.MinZoom,
+				MaxZoom: this._FlowView.options.MaxZoom
+			});
+
+		this._FlowView._FlowData.ViewState.Zoom = tmpResult.Zoom;
+		this._FlowView._FlowData.ViewState.PanX = tmpResult.PanX;
+		this._FlowView._FlowData.ViewState.PanY = tmpResult.PanY;
+
+		this.updateViewportTransform();
+		return true;
+	}
+
+	/**
+	 * Pure fit-to-width math: zoom so the frame's width equals the container width (clamped to
+	 * the view's zoom bounds), and pan so the frame's top-left sits at (0, TopMargin). No DOM,
+	 * so it is unit tested directly.
+	 * @param {Object} pFrame - { X, Y, Width }
+	 * @param {number} pContainerWidth
+	 * @param {Object} [pOptions] - { TopMargin, MinZoom, MaxZoom }
+	 * @returns {{Zoom:number, PanX:number, PanY:number}}
+	 */
+	static computeFitToWidth(pFrame, pContainerWidth, pOptions)
+	{
+		let tmpOptions = pOptions || {};
+		let tmpZoom = (pFrame && pFrame.Width > 0 && pContainerWidth > 0) ? (pContainerWidth / pFrame.Width) : 1;
+		let tmpMin = (typeof tmpOptions.MinZoom === 'number') ? tmpOptions.MinZoom : 0.05;
+		let tmpMax = (typeof tmpOptions.MaxZoom === 'number') ? tmpOptions.MaxZoom : 8;
+		tmpZoom = Math.max(tmpMin, Math.min(tmpMax, tmpZoom));
+		let tmpTopMargin = tmpOptions.TopMargin || 0;
+		return {
+			Zoom: tmpZoom,
+			PanX: -(((pFrame && pFrame.X) || 0) * tmpZoom),
+			PanY: tmpTopMargin - (((pFrame && pFrame.Y) || 0) * tmpZoom)
+		};
+	}
+
 	/**
 	 * Convert screen coordinates to SVG viewport coordinates
 	 * @param {number} pScreenX

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

@@ -81,9 +81,10 @@ const _DefaultConfiguration =
 			Hash: 'Flow-FloatingToolbar-Extra-Button',
 			// Icon-only host button (the floating toolbar is compact). Icon span
 			// is filled post-render by _populateIcons (keyed by Hash).
-			Template: /*html*/`<button class="pict-flow-floating-btn" title="{~D:Record.Tooltip~}" data-flow-action="extra" data-extra-hash="{~D:Record.Hash~}"
+			Template: /*html*/`<button class="pict-flow-floating-btn{~D:Record.ToggleClass~}{~D:Record.ActiveClass~}" title="{~D:Record.Tooltip~}" data-flow-action="extra" data-extra-hash="{~D:Record.Hash~}"
 	onclick="_Pict.views['{~D:Record.FlowViewIdentifier~}']._ToolbarView._FloatingToolbarView._handleExtraClick('{~D:Record.Hash~}', this)">
 	<span id="Flow-FloatingExtraIcon-{~D:Record.Hash~}-{~D:Record.FlowViewIdentifier~}"></span>
+	<span class="pict-flow-toolbar-btn-led" aria-hidden="true"></span>
 </button>`
 		}
 	],
@@ -132,6 +133,9 @@ class PictViewFlowFloatingToolbar extends libPictView
 			for (let i = 0; i < tmpExtraButtons.length; i++)
 			{
 				tmpExtraButtons[i].FlowViewIdentifier = this.options.FlowViewIdentifier;
+				// Mirror the docked toolbar so toggle buttons show the same status LED here.
+				tmpExtraButtons[i].ToggleClass = tmpExtraButtons[i].Toggle ? ' pict-flow-toolbar-btn-toggle' : '';
+				tmpExtraButtons[i].ActiveClass = tmpExtraButtons[i].Active ? ' pict-flow-toolbar-btn-active' : '';
 			}
 		}
 		return super.render(pRenderableHash, pRenderDestinationAddress, this.options);

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

@@ -346,6 +346,35 @@ class PictViewFlowNode extends libPictView
 			tmpGroup.appendChild(tmpHandle);
 		}
 
+		// Rotate handle: a grip on a short arm above the node, shown when this node is selected, the
+		// flow allows rotation, and we are not read-only. Its data-element-type routes pointer-down to
+		// the InteractionManager's node-rotate path. Lives in node-local space, so it orbits with the card.
+		if (pIsSelected && this._FlowView.options && this._FlowView.options.EnableNodeRotation
+			&& !(typeof this._FlowView.isReadOnly === 'function' && this._FlowView.isReadOnly()))
+		{
+			let tmpArmLength = 22;
+			let tmpRotateCenterX = tmpWidth / 2;
+
+			let tmpArm = this._FlowView._SVGHelperProvider.createSVGElement('line');
+			tmpArm.setAttribute('class', 'pict-flow-node-rotate-arm');
+			tmpArm.setAttribute('x1', String(tmpRotateCenterX));
+			tmpArm.setAttribute('y1', '0');
+			tmpArm.setAttribute('x2', String(tmpRotateCenterX));
+			tmpArm.setAttribute('y2', String(-tmpArmLength));
+			tmpArm.setAttribute('data-node-hash', pNodeData.Hash);
+			tmpArm.setAttribute('data-element-type', 'node-rotate');
+			tmpGroup.appendChild(tmpArm);
+
+			let tmpGrip = this._FlowView._SVGHelperProvider.createSVGElement('circle');
+			tmpGrip.setAttribute('class', 'pict-flow-node-rotate-handle');
+			tmpGrip.setAttribute('cx', String(tmpRotateCenterX));
+			tmpGrip.setAttribute('cy', String(-tmpArmLength - 5));
+			tmpGrip.setAttribute('r', '6');
+			tmpGrip.setAttribute('data-node-hash', pNodeData.Hash);
+			tmpGrip.setAttribute('data-element-type', 'node-rotate');
+			tmpGroup.appendChild(tmpGrip);
+		}
+
 		pNodesLayer.appendChild(tmpGroup);
 	}
 

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

@@ -117,10 +117,11 @@ const _DefaultConfiguration =
 			// _populateToolbarIcons (keyed by Hash), matching how the built-in
 			// button icons are injected. FlowViewIdentifier + ActiveClass are
 			// stamped onto each row in render().
-			Template: /*html*/`<button class="pict-flow-toolbar-btn{~D:Record.ActiveClass~}" id="Flow-Toolbar-Extra-{~D:Record.Hash~}-{~D:Record.FlowViewIdentifier~}" title="{~D:Record.Tooltip~}" data-flow-action="extra" data-extra-hash="{~D:Record.Hash~}"
+			Template: /*html*/`<button class="pict-flow-toolbar-btn{~D:Record.ToggleClass~}{~D:Record.ActiveClass~}" id="Flow-Toolbar-Extra-{~D:Record.Hash~}-{~D:Record.FlowViewIdentifier~}" title="{~D:Record.Tooltip~}" data-flow-action="extra" data-extra-hash="{~D:Record.Hash~}"
 	onclick="_Pict.views['{~D:Record.FlowViewIdentifier~}']._ToolbarView._handleExtraAction('{~D:Record.Hash~}', this)">
 	<span class="pict-flow-toolbar-btn-icon" id="Flow-Toolbar-ExtraIcon-{~D:Record.Hash~}-{~D:Record.FlowViewIdentifier~}"></span>
 	<span class="pict-flow-toolbar-btn-text">{~D:Record.Label~}</span>
+	<span class="pict-flow-toolbar-btn-led" aria-hidden="true"></span>
 </button>`
 		},
 		{
@@ -253,6 +254,9 @@ class PictViewFlowToolbar extends libPictView
 		{
 			tmpExtraButtons[i].FlowViewIdentifier = this.options.FlowViewIdentifier;
 			tmpExtraButtons[i].ActiveClass = tmpExtraButtons[i].Active ? ' pict-flow-toolbar-btn-active' : '';
+			// Toggle buttons (stateful on/off, e.g. a pan or connect toggle) get a status LED that the
+			// ActiveClass fills; plain action buttons (Toggle falsy) render no LED.
+			tmpExtraButtons[i].ToggleClass = tmpExtraButtons[i].Toggle ? ' pict-flow-toolbar-btn-toggle' : '';
 			// A label-less (icon-only) button renders an empty text span; CSS (:empty) collapses it.
 			if (typeof tmpExtraButtons[i].Label !== 'string') { tmpExtraButtons[i].Label = ''; }
 		}
@@ -1602,7 +1606,7 @@ class PictViewFlowToolbar extends libPictView
 		let tmpNoiseEnabled = !!(tmpActiveRenderer && tmpActiveRenderer.NoiseConfig && tmpActiveRenderer.NoiseConfig.Enabled);
 		let tmpNoiseDisplay = tmpNoiseEnabled ? '' : 'display:none;';
 
-		this.pict.ContentAssignment.assignContent(pContainer,
+		let tmpHTML =
 			'<div class="pict-flow-popup-settings-section">'
 			+ '<label class="pict-flow-popup-settings-label">Theme</label>'
 			+ '<select class="pict-flow-popup-settings-select"'
@@ -1621,7 +1625,50 @@ class PictViewFlowToolbar extends libPictView
 			+ ' oninput="_Pict.views[\'' + tmpFlowViewIdentifier + '\']._ToolbarView._handleNoiseSliderInput(this)" />'
 			+ '<span class="pict-flow-popup-settings-slider-value">' + tmpNoiseLevel + '%</span>'
 			+ '</div>'
-			+ '</div>');
+			+ '</div>';
+
+		tmpHTML += this._buildHostSettingsSections();
+
+		this.pict.ContentAssignment.assignContent(pContainer, tmpHTML);
+	}
+
+	/**
+	 * Host-contributed settings sections. A consumer adds entries to the flow view's
+	 * `SettingsSections` option so its own controls (e.g. a whiteboard's background
+	 * picker) live in the gear popup instead of a separate panel. Each entry is
+	 * `{ Label?, HTML? , Build?(flowView) }`; Build is evaluated at open time so a
+	 * section can reflect live state. Returns concatenated section markup ('' when none).
+	 * @returns {string}
+	 */
+	_buildHostSettingsSections()
+	{
+		let tmpSections = (this._FlowView && this._FlowView.options && Array.isArray(this._FlowView.options.SettingsSections))
+			? this._FlowView.options.SettingsSections
+			: [];
+		let tmpOut = '';
+		for (let i = 0; i < tmpSections.length; i++)
+		{
+			let tmpSection = tmpSections[i];
+			let tmpSectionHTML = '';
+			if (typeof tmpSection.Build === 'function')
+			{
+				tmpSectionHTML = tmpSection.Build(this._FlowView) || '';
+			}
+			else if (typeof tmpSection.HTML === 'string')
+			{
+				tmpSectionHTML = tmpSection.HTML;
+			}
+			if (!tmpSectionHTML)
+			{
+				continue;
+			}
+			tmpOut += '<div class="pict-flow-popup-divider"></div>'
+				+ '<div class="pict-flow-popup-settings-section">'
+				+ (tmpSection.Label ? '<label class="pict-flow-popup-settings-label">' + tmpSection.Label + '</label>' : '')
+				+ tmpSectionHTML
+				+ '</div>';
+		}
+		return tmpOut;
 	}
 
 	/**