pict-section-flow 2.0.1 → 2.0.3

package/package.json

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

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

@@ -962,6 +962,14 @@ class PictProviderFlowCSS extends libFableServiceProviderBase
 		.pict-flow-panel-titlebar.dragging {
 			cursor: grabbing;
 		}
+		/* While a panel's foreignObject is dragged or resized, its x/y/height are rewritten on every
+		   pointermove. A box-shadow on the HTML panel bleeds past the foreignObject box, and that bled
+		   region is not in the per-move dirty rect, so the browser smears a copy of the shadow at the
+		   old position (the "stuck shadow"). Drop the shadow for the duration of the gesture so there
+		   is nothing to leave behind; it returns in place the moment the drag ends. */
+		.pict-flow-panel-foreign-object.pict-flow-panel-dragging .pict-flow-panel {
+			box-shadow: none;
+		}
 		.pict-flow-panel-title-text {
 			font-weight: 600;
 			font-size: 12px;

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

@@ -985,6 +985,20 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 
 	// ---- Panel Dragging ----
 
+	// Toggle a "gesture in progress" marker on a panel's foreignObject. The panel CSS drops the
+	// panel box-shadow while this class is present: dragging/resizing rewrites the foreignObject
+	// geometry every pointermove, and the shadow (which bleeds outside the foreignObject box) would
+	// otherwise be smeared in place at each old position. No shadow during the gesture means none to
+	// leave behind; it returns when the class is removed at the end of the drag.
+	_setPanelGestureActive(pPanelHash, pIsActive)
+	{
+		if (!pPanelHash || !this._FlowView || !this._FlowView._PanelsLayer) { return; }
+		let tmpForeignObject = this._FlowView._PanelsLayer.querySelector('[data-panel-hash="' + pPanelHash + '"]');
+		if (!tmpForeignObject) { return; }
+		if (pIsActive) { tmpForeignObject.classList.add('pict-flow-panel-dragging'); }
+		else { tmpForeignObject.classList.remove('pict-flow-panel-dragging'); }
+	}
+
 	_startPanelDrag(pEvent, pTarget)
 	{
 		let tmpPanelHash = this._getPanelHash(pTarget);
@@ -999,6 +1013,7 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 		this._DragPanelStartY = pEvent.clientY;
 		this._DragPanelDataStartX = tmpPanel.X;
 		this._DragPanelDataStartY = tmpPanel.Y;
+		this._setPanelGestureActive(tmpPanelHash, true);
 	}
 
 	_onPanelDrag(pEvent)
@@ -1026,6 +1041,7 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 			this._FlowView._EventHandlerProvider.fireEvent('onFlowChanged', this._FlowView.flowData);
 		}
 
+		this._setPanelGestureActive(this._DragPanelHash, false);
 		this._setState(INTERACTION_STATES.IDLE);
 		this._DragPanelHash = null;
 	}
@@ -1044,6 +1060,7 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 		this._ResizePanelHash = tmpPanelHash;
 		this._ResizeStartY = pEvent.clientY;
 		this._ResizePanelStartHeight = tmpPanel.Height;
+		this._setPanelGestureActive(tmpPanelHash, true);
 	}
 
 	_onPanelResize(pEvent)
@@ -1083,6 +1100,7 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 			this._FlowView._EventHandlerProvider.fireEvent('onFlowChanged', this._FlowView.flowData);
 		}
 
+		this._setPanelGestureActive(this._ResizePanelHash, false);
 		this._setState(INTERACTION_STATES.IDLE);
 		this._ResizePanelHash = null;
 	}

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

@@ -70,9 +70,12 @@ class PictServiceFlowViewportManager extends libFableServiceProviderBase
 	}
 
 	/**
-	 * Zoom to fit all nodes in the viewport
+	 * Zoom to fit all nodes in the viewport.
+	 * @param {boolean} pAllowZoomIn - when true the fit may scale UP past 1.0 (to MaxZoom) so a small board
+	 *   fills the viewport. Default (falsy) keeps the historic behavior: never zoom in past 1.0, so content
+	 *   stays true-to-scale and a sparse map does not balloon. Presentation banners opt in.
 	 */
-	zoomToFit()
+	zoomToFit(pAllowZoomIn)
 	{
 		if (this._FlowView._FlowData.Nodes.length === 0) return;
 		if (!this._FlowView._SVGElement) return;
@@ -96,7 +99,8 @@ class PictServiceFlowViewportManager extends libFableServiceProviderBase
 		let tmpSVGRect = this._FlowView._SVGElement.getBoundingClientRect();
 		let tmpScaleX = tmpSVGRect.width / tmpFlowWidth;
 		let tmpScaleY = tmpSVGRect.height / tmpFlowHeight;
-		let tmpZoom = Math.min(tmpScaleX, tmpScaleY, 1.0); // Don't zoom in past 1.0
+		let tmpZoom = Math.min(tmpScaleX, tmpScaleY);
+		if (!pAllowZoomIn) { tmpZoom = Math.min(tmpZoom, 1.0); } // Don't zoom in past 1.0 unless the caller opts in
 		tmpZoom = Math.max(this._FlowView.options.MinZoom, Math.min(this._FlowView.options.MaxZoom, tmpZoom));
 
 		let tmpCenterX = (tmpMinX + tmpMaxX) / 2;

package/source/views/PictView-Flow.js

@@ -1297,11 +1297,12 @@ class PictViewFlow extends libPictView
 	}
 
 	/**
-	 * Zoom to fit all nodes in the viewport
+	 * Zoom to fit all nodes in the viewport.
+	 * @param {boolean} pAllowZoomIn - when true the fit may scale up past 1.0 (presentation banners opt in).
 	 */
-	zoomToFit()
+	zoomToFit(pAllowZoomIn)
 	{
-		return this._ViewportManager.zoomToFit();
+		return this._ViewportManager.zoomToFit(pAllowZoomIn);
 	}
 
 	/**