pict-section-flow 2.0.1 → 2.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pict-section-flow",
-    "version": "2.0.1",
+    "version": "2.0.2",
     "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;
 	}