pict-section-flow 2.0.0 → 2.0.2

package/package.json

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

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

@@ -192,11 +192,23 @@ class PictServiceFlowRenderManager extends libFableServiceProviderBase
 		// Reset customized handle positions for connections/tethers involving this node
 		this._FlowView._resetHandlesForNode(pNodeHash);
 
-		// Update the node's SVG group transform for smooth dragging
+		// Update the node's SVG group transform for smooth dragging. PRESERVE the node's rotation -- a bare
+		// translate here flattened a rotated card back to upright the instant you started dragging (matches
+		// PictViewFlowNode.nodeTransform: rotate about the node center).
 		let tmpNodeGroup = this._FlowView._NodesLayer.querySelector(`[data-node-hash="${pNodeHash}"]`);
 		if (tmpNodeGroup)
 		{
-			tmpNodeGroup.setAttribute('transform', `translate(${pX}, ${pY})`);
+			let tmpRotation = (typeof tmpNode.Rotation === 'number') ? tmpNode.Rotation : 0;
+			if (tmpRotation)
+			{
+				let tmpW = (typeof tmpNode.Width === 'number') ? tmpNode.Width : (this._FlowView.options.DefaultNodeWidth || 180);
+				let tmpH = (typeof tmpNode.Height === 'number') ? tmpNode.Height : (this._FlowView.options.DefaultNodeHeight || 80);
+				tmpNodeGroup.setAttribute('transform', `translate(${pX}, ${pY}) rotate(${tmpRotation} ${tmpW / 2} ${tmpH / 2})`);
+			}
+			else
+			{
+				tmpNodeGroup.setAttribute('transform', `translate(${pX}, ${pY})`);
+			}
 		}
 
 		// Re-render connections that involve this node