pict-section-flow 0.0.1 → 0.0.2

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

@@ -7,6 +7,8 @@ const INTERACTION_STATES =
 {
 	IDLE: 'idle',
 	DRAGGING_NODE: 'dragging-node',
+	DRAGGING_PANEL: 'dragging-panel',
+	DRAGGING_HANDLE: 'dragging-handle',
 	CONNECTING: 'connecting',
 	PANNING: 'panning'
 };
@@ -34,6 +36,19 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 		this._DragNodeStartX = 0;
 		this._DragNodeStartY = 0;
 
+		// Panel drag state
+		this._DragPanelHash = null;
+		this._DragPanelStartX = 0;
+		this._DragPanelStartY = 0;
+		this._DragPanelDataStartX = 0;
+		this._DragPanelDataStartY = 0;
+
+		// Handle drag state
+		this._DragHandleConnectionHash = null;
+		this._DragHandlePanelHash = null;
+		this._DragHandleType = null;
+		this._DragHandleIsTether = false;
+
 		// Pan state
 		this._PanStartX = 0;
 		this._PanStartY = 0;
@@ -45,6 +60,16 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 		this._ConnectSourcePortHash = null;
 		this._ConnectDragLine = null;
 
+		// Double-click detection
+		this._LastClickTime = 0;
+		this._LastClickNodeHash = null;
+		this._DoubleClickThreshold = 400;
+
+		// Double-click detection for handles
+		this._LastHandleClickTime = 0;
+		this._LastHandleClickHash = null;
+		this._LastHandleClickType = null;
+
 		// Bound event handlers (for removeEventListener)
 		this._boundOnPointerDown = this._onPointerDown.bind(this);
 		this._boundOnPointerMove = this._onPointerMove.bind(this);
@@ -110,6 +135,12 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 		let tmpTarget = pEvent.target;
 		let tmpElementType = this._getElementType(tmpTarget);
 
+		// Check if click is inside a panel body — let HTML handle its own events
+		if (tmpTarget.closest && tmpTarget.closest('.pict-flow-panel-body'))
+		{
+			return;
+		}
+
 		// Capture pointer for smooth dragging
 		this._SVGElement.setPointerCapture(pEvent.pointerId);
 
@@ -121,8 +152,102 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 
 			case 'node':
 			case 'node-body':
-				this._startNodeDrag(pEvent, tmpTarget);
+			case 'panel-indicator':
+			{
+				let tmpNodeHash = this._getNodeHash(tmpTarget);
+				let tmpNow = Date.now();
+
+				// Check for double-click on same node
+				if (tmpNodeHash && tmpNodeHash === this._LastClickNodeHash
+					&& (tmpNow - this._LastClickTime) < this._DoubleClickThreshold)
+				{
+					// Double-click: toggle panel
+					this._LastClickTime = 0;
+					this._LastClickNodeHash = null;
+					this._FlowView.togglePanel(tmpNodeHash);
+				}
+				else
+				{
+					// Single click: start node drag
+					this._LastClickTime = tmpNow;
+					this._LastClickNodeHash = tmpNodeHash;
+					this._startNodeDrag(pEvent, tmpTarget);
+				}
 				break;
+			}
+
+			case 'panel-titlebar':
+				this._startPanelDrag(pEvent, tmpTarget);
+				break;
+
+			case 'panel-close':
+			{
+				let tmpPanelHash = this._getPanelHash(tmpTarget);
+				if (tmpPanelHash)
+				{
+					this._FlowView.closePanel(tmpPanelHash);
+				}
+				break;
+			}
+
+			case 'connection-handle':
+			{
+				let tmpConnectionHash = this._getConnectionHash(tmpTarget);
+				let tmpHandleType = tmpTarget.getAttribute('data-handle-type');
+				let tmpNow = Date.now();
+
+				// Check for double-click on handle to toggle mode
+				if (tmpConnectionHash === this._LastHandleClickHash
+					&& tmpHandleType === this._LastHandleClickType
+					&& (tmpNow - this._LastHandleClickTime) < this._DoubleClickThreshold)
+				{
+					this._toggleConnectionLineMode(tmpConnectionHash);
+					this._LastHandleClickTime = 0;
+					this._LastHandleClickHash = null;
+					this._LastHandleClickType = null;
+				}
+				else
+				{
+					this._LastHandleClickTime = tmpNow;
+					this._LastHandleClickHash = tmpConnectionHash;
+					this._LastHandleClickType = tmpHandleType;
+					this._startHandleDrag(pEvent, tmpConnectionHash, null, tmpHandleType, false);
+				}
+				pEvent.stopPropagation();
+				break;
+			}
+
+			case 'tether':
+			case 'tether-hitarea':
+				this._selectTether(tmpTarget);
+				break;
+
+			case 'tether-handle':
+			{
+				let tmpPanelHash = this._getPanelHash(tmpTarget);
+				let tmpHandleType = tmpTarget.getAttribute('data-handle-type');
+				let tmpNow = Date.now();
+
+				// Check for double-click on tether handle to toggle mode
+				if (tmpPanelHash === this._LastHandleClickHash
+					&& tmpHandleType === this._LastHandleClickType
+					&& (tmpNow - this._LastHandleClickTime) < this._DoubleClickThreshold)
+				{
+					this._toggleTetherLineMode(tmpPanelHash);
+					this._LastHandleClickTime = 0;
+					this._LastHandleClickHash = null;
+					this._LastHandleClickType = null;
+				}
+				else
+				{
+					this._LastHandleClickTime = tmpNow;
+					this._LastHandleClickHash = tmpPanelHash;
+					this._LastHandleClickType = tmpHandleType;
+					this._startHandleDrag(pEvent, null, tmpPanelHash, tmpHandleType, true);
+				}
+				pEvent.stopPropagation();
+				break;
+			}
 
 			case 'connection':
 			case 'connection-hitarea':
@@ -153,6 +278,14 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 				this._onNodeDrag(pEvent);
 				break;
 
+			case INTERACTION_STATES.DRAGGING_PANEL:
+				this._onPanelDrag(pEvent);
+				break;
+
+			case INTERACTION_STATES.DRAGGING_HANDLE:
+				this._onHandleDrag(pEvent);
+				break;
+
 			case INTERACTION_STATES.CONNECTING:
 				this._onConnectionDrag(pEvent);
 				break;
@@ -183,6 +316,14 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 				this._endNodeDrag(pEvent);
 				break;
 
+			case INTERACTION_STATES.DRAGGING_PANEL:
+				this._endPanelDrag(pEvent);
+				break;
+
+			case INTERACTION_STATES.DRAGGING_HANDLE:
+				this._endHandleDrag(pEvent);
+				break;
+
 			case INTERACTION_STATES.CONNECTING:
 				this._endConnection(pEvent);
 				break;
@@ -225,11 +366,15 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 		// Only handle events when the flow is focused/visible
 		if (pEvent.key === 'Delete' || pEvent.key === 'Backspace')
 		{
-			// Don't delete if user is typing in an input
+			// Don't delete if user is typing in an input or inside a panel
 			if (pEvent.target && (pEvent.target.tagName === 'INPUT' || pEvent.target.tagName === 'TEXTAREA' || pEvent.target.tagName === 'SELECT'))
 			{
 				return;
 			}
+			if (pEvent.target && pEvent.target.closest && pEvent.target.closest('.pict-flow-panel'))
+			{
+				return;
+			}
 
 			this._FlowView.deleteSelected();
 			pEvent.preventDefault();
@@ -240,17 +385,31 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 			{
 				this._cancelConnection();
 			}
+
+			// Exit fullscreen if currently in fullscreen mode
+			if (this._FlowView._IsFullscreen)
+			{
+				this._FlowView.exitFullscreen();
+				// Update the toolbar button text
+				if (this._FlowView._ToolbarView)
+				{
+					let tmpFlowViewIdentifier = this._FlowView.options.ViewIdentifier;
+					let tmpBtnElements = this._FlowView.pict.ContentAssignment.getElement(`#Flow-Toolbar-Fullscreen-${tmpFlowViewIdentifier}`);
+					if (tmpBtnElements.length > 0)
+					{
+						tmpBtnElements[0].innerHTML = '&#x26F6; Fullscreen';
+					}
+				}
+				pEvent.preventDefault();
+				return;
+			}
+
 			this._FlowView.deselectAll();
 		}
 	}
 
 	// ---- Node Dragging ----
 
-	/**
-	 * Start dragging a node
-	 * @param {PointerEvent} pEvent
-	 * @param {Element} pTarget
-	 */
 	_startNodeDrag(pEvent, pTarget)
 	{
 		if (!this._FlowView.options.EnableNodeDragging) return;
@@ -258,7 +417,6 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 		let tmpNodeHash = this._getNodeHash(pTarget);
 		if (!tmpNodeHash) return;
 
-		// Select the node
 		this._FlowView.selectNode(tmpNodeHash);
 
 		let tmpNode = this._FlowView.getNode(tmpNodeHash);
@@ -271,7 +429,6 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 		this._DragNodeStartX = tmpNode.X;
 		this._DragNodeStartY = tmpNode.Y;
 
-		// Add dragging class
 		this._SVGElement.classList.add('panning');
 
 		let tmpNodeGroup = this._FlowView._NodesLayer.querySelector(`[data-node-hash="${tmpNodeHash}"]`);
@@ -281,10 +438,6 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 		}
 	}
 
-	/**
-	 * Handle node dragging
-	 * @param {PointerEvent} pEvent
-	 */
 	_onNodeDrag(pEvent)
 	{
 		if (!this._DragNodeHash) return;
@@ -299,10 +452,6 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 		this._FlowView.updateNodePosition(this._DragNodeHash, tmpNewX, tmpNewY);
 	}
 
-	/**
-	 * End node dragging
-	 * @param {PointerEvent} pEvent
-	 */
 	_endNodeDrag(pEvent)
 	{
 		this._SVGElement.classList.remove('panning');
@@ -313,7 +462,6 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 			tmpNodeGroup.classList.remove('dragging');
 		}
 
-		// Full re-render to finalize positions
 		this._FlowView.renderFlow();
 		this._FlowView.marshalFromView();
 
@@ -328,13 +476,196 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 		this._DragNodeHash = null;
 	}
 
+	// ---- Panel Dragging ----
+
+	_startPanelDrag(pEvent, pTarget)
+	{
+		let tmpPanelHash = this._getPanelHash(pTarget);
+		if (!tmpPanelHash) return;
+
+		let tmpPanel = this._FlowView._FlowData.OpenPanels.find((pPanel) => pPanel.Hash === tmpPanelHash);
+		if (!tmpPanel) return;
+
+		this._State = INTERACTION_STATES.DRAGGING_PANEL;
+		this._DragPanelHash = tmpPanelHash;
+		this._DragPanelStartX = pEvent.clientX;
+		this._DragPanelStartY = pEvent.clientY;
+		this._DragPanelDataStartX = tmpPanel.X;
+		this._DragPanelDataStartY = tmpPanel.Y;
+
+		this._SVGElement.classList.add('panning');
+	}
+
+	_onPanelDrag(pEvent)
+	{
+		if (!this._DragPanelHash) return;
+
+		let tmpVS = this._FlowView.viewState;
+		let tmpDX = (pEvent.clientX - this._DragPanelStartX) / tmpVS.Zoom;
+		let tmpDY = (pEvent.clientY - this._DragPanelStartY) / tmpVS.Zoom;
+
+		let tmpNewX = this._DragPanelDataStartX + tmpDX;
+		let tmpNewY = this._DragPanelDataStartY + tmpDY;
+
+		this._FlowView.updatePanelPosition(this._DragPanelHash, tmpNewX, tmpNewY);
+	}
+
+	_endPanelDrag(pEvent)
+	{
+		this._SVGElement.classList.remove('panning');
+
+		this._FlowView.marshalFromView();
+
+		let tmpPanel = this._FlowView._FlowData.OpenPanels.find((pPanel) => pPanel.Hash === this._DragPanelHash);
+		if (tmpPanel && this._FlowView._EventHandlerProvider)
+		{
+			this._FlowView._EventHandlerProvider.fireEvent('onPanelMoved', tmpPanel);
+			this._FlowView._EventHandlerProvider.fireEvent('onFlowChanged', this._FlowView.flowData);
+		}
+
+		this._State = INTERACTION_STATES.IDLE;
+		this._DragPanelHash = null;
+	}
+
+	// ---- Handle Dragging ----
+
+	_startHandleDrag(pEvent, pConnectionHash, pPanelHash, pHandleType, pIsTether)
+	{
+		this._State = INTERACTION_STATES.DRAGGING_HANDLE;
+		this._DragHandleConnectionHash = pConnectionHash;
+		this._DragHandlePanelHash = pPanelHash;
+		this._DragHandleType = pHandleType;
+		this._DragHandleIsTether = pIsTether;
+		this._DragStartX = pEvent.clientX;
+		this._DragStartY = pEvent.clientY;
+		this._SVGElement.classList.add('panning');
+	}
+
+	_onHandleDrag(pEvent)
+	{
+		let tmpCoords = this._FlowView.screenToSVGCoords(pEvent.clientX, pEvent.clientY);
+
+		if (this._DragHandleIsTether)
+		{
+			this._FlowView.updateTetherHandle(
+				this._DragHandlePanelHash,
+				this._DragHandleType,
+				tmpCoords.x,
+				tmpCoords.y
+			);
+		}
+		else
+		{
+			this._FlowView.updateConnectionHandle(
+				this._DragHandleConnectionHash,
+				this._DragHandleType,
+				tmpCoords.x,
+				tmpCoords.y
+			);
+		}
+	}
+
+	_endHandleDrag(pEvent)
+	{
+		this._SVGElement.classList.remove('panning');
+
+		this._FlowView.renderFlow();
+		this._FlowView.marshalFromView();
+
+		if (this._FlowView._EventHandlerProvider)
+		{
+			this._FlowView._EventHandlerProvider.fireEvent('onFlowChanged', this._FlowView.flowData);
+
+			if (this._DragHandleIsTether)
+			{
+				let tmpPanel = this._FlowView._FlowData.OpenPanels.find((pPanel) => pPanel.Hash === this._DragHandlePanelHash);
+				if (tmpPanel)
+				{
+					this._FlowView._EventHandlerProvider.fireEvent('onTetherHandleMoved', tmpPanel);
+				}
+			}
+			else
+			{
+				let tmpConnection = this._FlowView.getConnection(this._DragHandleConnectionHash);
+				if (tmpConnection)
+				{
+					this._FlowView._EventHandlerProvider.fireEvent('onConnectionHandleMoved', tmpConnection);
+				}
+			}
+		}
+
+		this._State = INTERACTION_STATES.IDLE;
+		this._DragHandleConnectionHash = null;
+		this._DragHandlePanelHash = null;
+		this._DragHandleType = null;
+		this._DragHandleIsTether = false;
+	}
+
+	// ---- Line Mode Toggling ----
+
+	_toggleConnectionLineMode(pConnectionHash)
+	{
+		let tmpConnection = this._FlowView.getConnection(pConnectionHash);
+		if (!tmpConnection) return;
+
+		if (!tmpConnection.Data) tmpConnection.Data = {};
+
+		let tmpCurrentMode = tmpConnection.Data.LineMode || 'bezier';
+		tmpConnection.Data.LineMode = (tmpCurrentMode === 'bezier') ? 'orthogonal' : 'bezier';
+
+		// Reset handle positions when switching modes
+		tmpConnection.Data.HandleCustomized = false;
+		tmpConnection.Data.BezierHandleX = null;
+		tmpConnection.Data.BezierHandleY = null;
+		tmpConnection.Data.OrthoCorner1X = null;
+		tmpConnection.Data.OrthoCorner1Y = null;
+		tmpConnection.Data.OrthoCorner2X = null;
+		tmpConnection.Data.OrthoCorner2Y = null;
+		tmpConnection.Data.OrthoMidOffset = 0;
+
+		this._FlowView.renderFlow();
+		this._FlowView.marshalFromView();
+
+		if (this._FlowView._EventHandlerProvider)
+		{
+			this._FlowView._EventHandlerProvider.fireEvent('onConnectionModeChanged', tmpConnection);
+			this._FlowView._EventHandlerProvider.fireEvent('onFlowChanged', this._FlowView.flowData);
+		}
+	}
+
+	_toggleTetherLineMode(pPanelHash)
+	{
+		let tmpPanel = this._FlowView._FlowData.OpenPanels.find((pPanel) => pPanel.Hash === pPanelHash);
+		if (!tmpPanel) return;
+
+		if (this._FlowView._TetherService)
+		{
+			this._FlowView._TetherService.toggleLineMode(tmpPanel);
+		}
+
+		this._FlowView.renderFlow();
+		this._FlowView.marshalFromView();
+
+		if (this._FlowView._EventHandlerProvider)
+		{
+			this._FlowView._EventHandlerProvider.fireEvent('onTetherModeChanged', tmpPanel);
+			this._FlowView._EventHandlerProvider.fireEvent('onFlowChanged', this._FlowView.flowData);
+		}
+	}
+
+	// ---- Tether Selection ----
+
+	_selectTether(pTarget)
+	{
+		let tmpPanelHash = this._getPanelHash(pTarget);
+		if (tmpPanelHash)
+		{
+			this._FlowView.selectTether(tmpPanelHash);
+		}
+	}
+
 	// ---- Connection Creation ----
 
-	/**
-	 * Start creating a connection from a port
-	 * @param {PointerEvent} pEvent
-	 * @param {Element} pTarget
-	 */
 	_startConnection(pEvent, pTarget)
 	{
 		if (!this._FlowView.options.EnableConnectionCreation) return;
@@ -345,7 +676,6 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 
 		if (!tmpNodeHash || !tmpPortHash) return;
 
-		// Only allow starting connections from output ports
 		if (tmpPortDirection !== 'output')
 		{
 			return;
@@ -357,25 +687,18 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 
 		this._SVGElement.classList.add('connecting');
 
-		// Create drag line
 		let tmpPortPos = this._FlowView.getPortPosition(tmpNodeHash, tmpPortHash);
 		if (tmpPortPos)
 		{
 			this._ConnectDragLine = document.createElementNS('http://www.w3.org/2000/svg', 'path');
 			this._ConnectDragLine.setAttribute('class', 'pict-flow-drag-connection');
 			this._ConnectDragLine.setAttribute('d', `M ${tmpPortPos.x} ${tmpPortPos.y} L ${tmpPortPos.x} ${tmpPortPos.y}`);
-
-			// Add to viewport (so it transforms with pan/zoom)
 			this._FlowView._ViewportElement.appendChild(this._ConnectDragLine);
 		}
 
 		pEvent.stopPropagation();
 	}
 
-	/**
-	 * Handle connection drag
-	 * @param {PointerEvent} pEvent
-	 */
 	_onConnectionDrag(pEvent)
 	{
 		if (!this._ConnectDragLine) return;
@@ -385,19 +708,13 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 
 		let tmpEndCoords = this._FlowView.screenToSVGCoords(pEvent.clientX, pEvent.clientY);
 
-		// Render a bezier curve for the drag line
 		let tmpDX = Math.abs(tmpEndCoords.x - tmpSourcePos.x) * 0.5;
 		let tmpPath = `M ${tmpSourcePos.x} ${tmpSourcePos.y} C ${tmpSourcePos.x + tmpDX} ${tmpSourcePos.y}, ${tmpEndCoords.x - tmpDX} ${tmpEndCoords.y}, ${tmpEndCoords.x} ${tmpEndCoords.y}`;
 		this._ConnectDragLine.setAttribute('d', tmpPath);
 	}
 
-	/**
-	 * End connection creation
-	 * @param {PointerEvent} pEvent
-	 */
 	_endConnection(pEvent)
 	{
-		// Remove drag line
 		if (this._ConnectDragLine && this._ConnectDragLine.parentNode)
 		{
 			this._ConnectDragLine.parentNode.removeChild(this._ConnectDragLine);
@@ -406,7 +723,6 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 
 		this._SVGElement.classList.remove('connecting');
 
-		// Check if we're over a valid target port
 		let tmpTarget = document.elementFromPoint(pEvent.clientX, pEvent.clientY);
 		if (tmpTarget)
 		{
@@ -430,9 +746,6 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 		this._ConnectSourcePortHash = null;
 	}
 
-	/**
-	 * Cancel connection creation (e.g., on Escape)
-	 */
 	_cancelConnection()
 	{
 		if (this._ConnectDragLine && this._ConnectDragLine.parentNode)
@@ -450,13 +763,8 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 
 	// ---- Panning ----
 
-	/**
-	 * Start panning the viewport
-	 * @param {PointerEvent} pEvent
-	 */
 	_startPanning(pEvent)
 	{
-		// Deselect if clicking on empty space
 		this._FlowView.deselectAll();
 
 		this._State = INTERACTION_STATES.PANNING;
@@ -468,10 +776,6 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 		this._SVGElement.classList.add('panning');
 	}
 
-	/**
-	 * Handle panning
-	 * @param {PointerEvent} pEvent
-	 */
 	_onPan(pEvent)
 	{
 		let tmpDX = pEvent.clientX - this._PanStartX;
@@ -483,10 +787,6 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 		this._FlowView.updateViewportTransform();
 	}
 
-	/**
-	 * End panning
-	 * @param {PointerEvent} pEvent
-	 */
 	_endPanning(pEvent)
 	{
 		this._SVGElement.classList.remove('panning');
@@ -495,13 +795,9 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 
 	// ---- Connection Selection ----
 
-	/**
-	 * Select a connection
-	 * @param {Element} pTarget
-	 */
 	_selectConnection(pTarget)
 	{
-		let tmpConnectionHash = pTarget.getAttribute('data-connection-hash');
+		let tmpConnectionHash = this._getConnectionHash(pTarget);
 		if (tmpConnectionHash)
 		{
 			this._FlowView.selectConnection(tmpConnectionHash);
@@ -510,25 +806,18 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 
 	// ---- Utilities ----
 
-	/**
-	 * Get the element type from a target element (walks up to find data attributes)
-	 * @param {Element} pTarget
-	 * @returns {string} The element type
-	 */
 	_getElementType(pTarget)
 	{
 		if (!pTarget) return 'background';
 
-		// Check the element itself
-		let tmpType = pTarget.getAttribute('data-element-type');
+		let tmpType = pTarget.getAttribute ? pTarget.getAttribute('data-element-type') : null;
 		if (tmpType) return tmpType;
 
-		// Walk up to find the closest element with a data attribute
 		let tmpParent = pTarget.parentElement;
 		let tmpDepth = 0;
 		while (tmpParent && tmpDepth < 5)
 		{
-			tmpType = tmpParent.getAttribute('data-element-type');
+			tmpType = tmpParent.getAttribute ? tmpParent.getAttribute('data-element-type') : null;
 			if (tmpType) return tmpType;
 			tmpParent = tmpParent.parentElement;
 			tmpDepth++;
@@ -537,23 +826,58 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 		return 'background';
 	}
 
-	/**
-	 * Get the node hash from a target element (walks up parents)
-	 * @param {Element} pTarget
-	 * @returns {string|null}
-	 */
 	_getNodeHash(pTarget)
 	{
 		if (!pTarget) return null;
 
-		let tmpHash = pTarget.getAttribute('data-node-hash');
+		let tmpHash = pTarget.getAttribute ? pTarget.getAttribute('data-node-hash') : null;
+		if (tmpHash) return tmpHash;
+
+		let tmpParent = pTarget.parentElement;
+		let tmpDepth = 0;
+		while (tmpParent && tmpDepth < 5)
+		{
+			tmpHash = tmpParent.getAttribute ? tmpParent.getAttribute('data-node-hash') : null;
+			if (tmpHash) return tmpHash;
+			tmpParent = tmpParent.parentElement;
+			tmpDepth++;
+		}
+
+		return null;
+	}
+
+	_getPanelHash(pTarget)
+	{
+		if (!pTarget) return null;
+
+		let tmpHash = pTarget.getAttribute ? pTarget.getAttribute('data-panel-hash') : null;
+		if (tmpHash) return tmpHash;
+
+		let tmpParent = pTarget.parentElement;
+		let tmpDepth = 0;
+		while (tmpParent && tmpDepth < 5)
+		{
+			tmpHash = tmpParent.getAttribute ? tmpParent.getAttribute('data-panel-hash') : null;
+			if (tmpHash) return tmpHash;
+			tmpParent = tmpParent.parentElement;
+			tmpDepth++;
+		}
+
+		return null;
+	}
+
+	_getConnectionHash(pTarget)
+	{
+		if (!pTarget) return null;
+
+		let tmpHash = pTarget.getAttribute ? pTarget.getAttribute('data-connection-hash') : null;
 		if (tmpHash) return tmpHash;
 
 		let tmpParent = pTarget.parentElement;
 		let tmpDepth = 0;
 		while (tmpParent && tmpDepth < 5)
 		{
-			tmpHash = tmpParent.getAttribute('data-node-hash');
+			tmpHash = tmpParent.getAttribute ? tmpParent.getAttribute('data-connection-hash') : null;
 			if (tmpHash) return tmpHash;
 			tmpParent = tmpParent.parentElement;
 			tmpDepth++;