pict-section-flow 0.0.2 → 0.0.3

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

@@ -50,34 +50,71 @@ class PictServiceFlowConnectionRenderer extends libFableServiceProviderBase
 			tmpPath = this._generateBezierPathWithHandle(tmpSourcePos, tmpTargetPos, tmpHandleX, tmpHandleY);
 		}
 
+		// Apply theme noise post-processing to the path
+		if (this._FlowView._ThemeProvider)
+		{
+			tmpPath = this._FlowView._ThemeProvider.processPathString(tmpPath, pConnection.Hash);
+		}
+
+		// Apply stroke-dasharray from theme's ConnectionConfig
+		let tmpStrokeDashArray = null;
+		if (this._FlowView._ThemeProvider)
+		{
+			let tmpActiveTheme = this._FlowView._ThemeProvider.getActiveTheme();
+			if (tmpActiveTheme && tmpActiveTheme.ConnectionConfig && tmpActiveTheme.ConnectionConfig.StrokeDashArray)
+			{
+				tmpStrokeDashArray = tmpActiveTheme.ConnectionConfig.StrokeDashArray;
+			}
+		}
+
 		let tmpViewIdentifier = this._FlowView.options.ViewIdentifier;
 
 		// Hit area (wider invisible path for easier selection)
-		let tmpHitArea = this._FlowView._SVGHelperProvider.createSVGElement('path');
-		tmpHitArea.setAttribute('class', 'pict-flow-connection-hitarea');
-		tmpHitArea.setAttribute('d', tmpPath);
-		tmpHitArea.setAttribute('data-connection-hash', pConnection.Hash);
-		tmpHitArea.setAttribute('data-element-type', 'connection-hitarea');
-		pConnectionsLayer.appendChild(tmpHitArea);
-
-		// Visible connection path
-		let tmpPathElement = this._FlowView._SVGHelperProvider.createSVGElement('path');
-		tmpPathElement.setAttribute('class', `pict-flow-connection ${pIsSelected ? 'selected' : ''}`);
-		tmpPathElement.setAttribute('d', tmpPath);
-		tmpPathElement.setAttribute('data-connection-hash', pConnection.Hash);
-		tmpPathElement.setAttribute('data-element-type', 'connection');
-
-		// Arrow marker
-		if (pIsSelected)
+		let tmpShapeProvider = this._FlowView._ConnectorShapesProvider;
+		if (tmpShapeProvider)
 		{
-			tmpPathElement.setAttribute('marker-end', `url(#flow-arrowhead-selected-${tmpViewIdentifier})`);
+			let tmpHitArea = tmpShapeProvider.createConnectionHitAreaElement(tmpPath, pConnection.Hash);
+			pConnectionsLayer.appendChild(tmpHitArea);
+
+			let tmpPathElement = tmpShapeProvider.createConnectionPathElement(
+				tmpPath, pConnection.Hash, pIsSelected, tmpViewIdentifier);
+			if (tmpStrokeDashArray)
+			{
+				tmpPathElement.setAttribute('stroke-dasharray', tmpStrokeDashArray);
+			}
+			pConnectionsLayer.appendChild(tmpPathElement);
 		}
 		else
 		{
-			tmpPathElement.setAttribute('marker-end', `url(#flow-arrowhead-${tmpViewIdentifier})`);
-		}
+			let tmpHitArea = this._FlowView._SVGHelperProvider.createSVGElement('path');
+			tmpHitArea.setAttribute('class', 'pict-flow-connection-hitarea');
+			tmpHitArea.setAttribute('d', tmpPath);
+			tmpHitArea.setAttribute('data-connection-hash', pConnection.Hash);
+			tmpHitArea.setAttribute('data-element-type', 'connection-hitarea');
+			pConnectionsLayer.appendChild(tmpHitArea);
+
+			let tmpPathElement = this._FlowView._SVGHelperProvider.createSVGElement('path');
+			tmpPathElement.setAttribute('class', `pict-flow-connection ${pIsSelected ? 'selected' : ''}`);
+			tmpPathElement.setAttribute('d', tmpPath);
+			tmpPathElement.setAttribute('data-connection-hash', pConnection.Hash);
+			tmpPathElement.setAttribute('data-element-type', 'connection');
+
+			if (pIsSelected)
+			{
+				tmpPathElement.setAttribute('marker-end', `url(#flow-arrowhead-selected-${tmpViewIdentifier})`);
+			}
+			else
+			{
+				tmpPathElement.setAttribute('marker-end', `url(#flow-arrowhead-${tmpViewIdentifier})`);
+			}
 
-		pConnectionsLayer.appendChild(tmpPathElement);
+			if (tmpStrokeDashArray)
+			{
+				tmpPathElement.setAttribute('stroke-dasharray', tmpStrokeDashArray);
+			}
+
+			pConnectionsLayer.appendChild(tmpPathElement);
+		}
 
 		// Render drag handles when selected
 		if (pIsSelected)
@@ -434,15 +471,30 @@ class PictServiceFlowConnectionRenderer extends libFableServiceProviderBase
 	 */
 	_createHandle(pLayer, pConnectionHash, pHandleType, pX, pY, pClassName)
 	{
-		let tmpCircle = this._FlowView._SVGHelperProvider.createSVGElement('circle');
-		tmpCircle.setAttribute('class', pClassName);
-		tmpCircle.setAttribute('cx', String(pX));
-		tmpCircle.setAttribute('cy', String(pY));
-		tmpCircle.setAttribute('r', '6');
-		tmpCircle.setAttribute('data-element-type', 'connection-handle');
-		tmpCircle.setAttribute('data-connection-hash', pConnectionHash);
-		tmpCircle.setAttribute('data-handle-type', pHandleType);
-		pLayer.appendChild(tmpCircle);
+		let tmpShapeProvider = this._FlowView._ConnectorShapesProvider;
+		let tmpShapeKey = (pClassName === 'pict-flow-connection-handle-midpoint')
+			? 'connection-handle-midpoint' : 'connection-handle';
+
+		if (tmpShapeProvider)
+		{
+			let tmpHandle = tmpShapeProvider.createHandleElement(
+				pConnectionHash, pHandleType, pX, pY, tmpShapeKey);
+			tmpHandle.setAttribute('data-element-type', 'connection-handle');
+			tmpHandle.setAttribute('data-connection-hash', pConnectionHash);
+			pLayer.appendChild(tmpHandle);
+		}
+		else
+		{
+			let tmpCircle = this._FlowView._SVGHelperProvider.createSVGElement('circle');
+			tmpCircle.setAttribute('class', pClassName);
+			tmpCircle.setAttribute('cx', String(pX));
+			tmpCircle.setAttribute('cy', String(pY));
+			tmpCircle.setAttribute('r', '6');
+			tmpCircle.setAttribute('data-element-type', 'connection-handle');
+			tmpCircle.setAttribute('data-connection-hash', pConnectionHash);
+			tmpCircle.setAttribute('data-handle-type', pHandleType);
+			pLayer.appendChild(tmpCircle);
+		}
 	}
 
 	/**
@@ -476,9 +528,20 @@ class PictServiceFlowConnectionRenderer extends libFableServiceProviderBase
 			{ x: pEndX,   y: pEndY,   side: 'left' }
 		);
 
-		let tmpPathElement = this._FlowView._SVGHelperProvider.createSVGElement('path');
-		tmpPathElement.setAttribute('class', 'pict-flow-drag-connection');
-		tmpPathElement.setAttribute('d', tmpPath);
+		let tmpShapeProvider = this._FlowView._ConnectorShapesProvider;
+		let tmpPathElement;
+
+		if (tmpShapeProvider)
+		{
+			tmpPathElement = tmpShapeProvider.createDragConnectionElement(tmpPath);
+		}
+		else
+		{
+			tmpPathElement = this._FlowView._SVGHelperProvider.createSVGElement('path');
+			tmpPathElement.setAttribute('class', 'pict-flow-drag-connection');
+			tmpPathElement.setAttribute('d', tmpPath);
+		}
+
 		pLayer.appendChild(tmpPathElement);
 
 		return tmpPathElement;

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

@@ -0,0 +1,188 @@
+const libFableServiceProviderBase = require('fable-serviceproviderbase');
+
+/**
+ * PictService-Flow-PanelManager
+ *
+ * Manages the lifecycle of properties panels in the flow diagram:
+ * opening, closing, toggling, and position updates for panels
+ * associated with flow nodes.
+ */
+class PictServiceFlowPanelManager extends libFableServiceProviderBase
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+
+		this.serviceType = 'PictServiceFlowPanelManager';
+
+		this._FlowView = (pOptions && pOptions.FlowView) ? pOptions.FlowView : null;
+	}
+
+	/**
+	 * Open a properties panel for a node.
+	 * @param {string} pNodeHash - The hash of the node to open a panel for
+	 * @returns {Object|false} The panel data, or false if the node was not found
+	 */
+	openPanel(pNodeHash)
+	{
+		let tmpNode = this._FlowView.getNode(pNodeHash);
+		if (!tmpNode) return false;
+
+		let tmpNodeTypeConfig = this._FlowView._NodeTypeProvider.getNodeType(tmpNode.Type);
+		if (!tmpNodeTypeConfig) return false;
+
+		// Check if a panel is already open for this node
+		let tmpExisting = this._FlowView._FlowData.OpenPanels.find((pPanel) => pPanel.NodeHash === pNodeHash);
+		if (tmpExisting) return tmpExisting;
+
+		let tmpPanelConfig = tmpNodeTypeConfig.PropertiesPanel;
+		let tmpPanelHash = `panel-${this.fable.getUUID()}`;
+		let tmpWidth, tmpHeight, tmpPanelType, tmpTitle;
+
+		if (tmpPanelConfig)
+		{
+			tmpWidth = tmpPanelConfig.DefaultWidth || 300;
+			tmpHeight = tmpPanelConfig.DefaultHeight || 200;
+			tmpPanelType = tmpPanelConfig.PanelType || 'Base';
+			tmpTitle = tmpPanelConfig.Title || tmpNodeTypeConfig.Label || 'Properties';
+		}
+		else
+		{
+			// No PropertiesPanel configured — open an auto-generated info panel
+			tmpWidth = 240;
+			tmpHeight = 180;
+			tmpPanelType = 'Info';
+			tmpTitle = tmpNodeTypeConfig.Label || tmpNode.Title || 'Node Info';
+		}
+
+		let tmpPanelData =
+		{
+			Hash: tmpPanelHash,
+			NodeHash: pNodeHash,
+			PanelType: tmpPanelType,
+			Title: tmpTitle,
+			X: tmpNode.X + tmpNode.Width + 30,
+			Y: tmpNode.Y,
+			Width: tmpWidth,
+			Height: tmpHeight
+		};
+
+		this._FlowView._FlowData.OpenPanels.push(tmpPanelData);
+		this._FlowView.renderFlow();
+		this._FlowView.marshalFromView();
+
+		if (this._FlowView._EventHandlerProvider)
+		{
+			this._FlowView._EventHandlerProvider.fireEvent('onPanelOpened', tmpPanelData);
+			this._FlowView._EventHandlerProvider.fireEvent('onFlowChanged', this._FlowView._FlowData);
+		}
+
+		return tmpPanelData;
+	}
+
+	/**
+	 * Close a properties panel by panel hash.
+	 * @param {string} pPanelHash
+	 * @returns {boolean}
+	 */
+	closePanel(pPanelHash)
+	{
+		let tmpIndex = this._FlowView._FlowData.OpenPanels.findIndex((pPanel) => pPanel.Hash === pPanelHash);
+		if (tmpIndex < 0) return false;
+
+		let tmpRemovedPanel = this._FlowView._FlowData.OpenPanels.splice(tmpIndex, 1)[0];
+
+		// Clean up the panel instance
+		if (this._FlowView._PropertiesPanelView)
+		{
+			this._FlowView._PropertiesPanelView.destroyPanel(pPanelHash);
+		}
+
+		this._FlowView.renderFlow();
+		this._FlowView.marshalFromView();
+
+		if (this._FlowView._EventHandlerProvider)
+		{
+			this._FlowView._EventHandlerProvider.fireEvent('onPanelClosed', tmpRemovedPanel);
+			this._FlowView._EventHandlerProvider.fireEvent('onFlowChanged', this._FlowView._FlowData);
+		}
+
+		return true;
+	}
+
+	/**
+	 * Close all panels for a given node.
+	 * @param {string} pNodeHash
+	 * @returns {boolean}
+	 */
+	closePanelForNode(pNodeHash)
+	{
+		let tmpPanelsToClose = this._FlowView._FlowData.OpenPanels.filter((pPanel) => pPanel.NodeHash === pNodeHash);
+		if (tmpPanelsToClose.length === 0) return false;
+
+		for (let i = 0; i < tmpPanelsToClose.length; i++)
+		{
+			let tmpIndex = this._FlowView._FlowData.OpenPanels.indexOf(tmpPanelsToClose[i]);
+			if (tmpIndex >= 0)
+			{
+				this._FlowView._FlowData.OpenPanels.splice(tmpIndex, 1);
+			}
+			if (this._FlowView._PropertiesPanelView)
+			{
+				this._FlowView._PropertiesPanelView.destroyPanel(tmpPanelsToClose[i].Hash);
+			}
+		}
+
+		return true;
+	}
+
+	/**
+	 * Toggle a properties panel for a node (open if closed, close if open).
+	 * @param {string} pNodeHash
+	 * @returns {Object|false}
+	 */
+	togglePanel(pNodeHash)
+	{
+		let tmpExisting = this._FlowView._FlowData.OpenPanels.find((pPanel) => pPanel.NodeHash === pNodeHash);
+		if (tmpExisting)
+		{
+			this.closePanel(tmpExisting.Hash);
+			return false;
+		}
+		return this.openPanel(pNodeHash);
+	}
+
+	/**
+	 * Update a panel's position (for drag).
+	 * @param {string} pPanelHash
+	 * @param {number} pX
+	 * @param {number} pY
+	 */
+	updatePanelPosition(pPanelHash, pX, pY)
+	{
+		let tmpPanel = this._FlowView._FlowData.OpenPanels.find((pPanel) => pPanel.Hash === pPanelHash);
+		if (!tmpPanel) return;
+
+		tmpPanel.X = pX;
+		tmpPanel.Y = pY;
+
+		// Reset tether handle positions when panel moves
+		this._FlowView._resetHandlesForPanel(pPanelHash);
+
+		// Update the foreignObject position directly for smooth dragging
+		if (this._FlowView._PanelsLayer)
+		{
+			let tmpFO = this._FlowView._PanelsLayer.querySelector(`[data-panel-hash="${pPanelHash}"]`);
+			if (tmpFO)
+			{
+				tmpFO.setAttribute('x', String(pX));
+				tmpFO.setAttribute('y', String(pY));
+			}
+		}
+
+		// Update the tether for this panel
+		this._FlowView._renderTethersForNode(tmpPanel.NodeHash);
+	}
+}
+
+module.exports = PictServiceFlowPanelManager;

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

@@ -0,0 +1,109 @@
+const libFableServiceProviderBase = require('fable-serviceproviderbase');
+
+/**
+ * PictService-Flow-SelectionManager
+ *
+ * Manages selection state for nodes, connections, and tethers in the flow diagram.
+ * Handles selecting, deselecting, and deleting selected elements.
+ */
+class PictServiceFlowSelectionManager extends libFableServiceProviderBase
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+
+		this.serviceType = 'PictServiceFlowSelectionManager';
+
+		this._FlowView = (pOptions && pOptions.FlowView) ? pOptions.FlowView : null;
+	}
+
+	/**
+	 * Select a node
+	 * @param {string|null} pNodeHash - Hash of the node to select, or null to deselect
+	 */
+	selectNode(pNodeHash)
+	{
+		let tmpPreviousSelection = this._FlowView._FlowData.ViewState.SelectedNodeHash;
+		this._FlowView._FlowData.ViewState.SelectedNodeHash = pNodeHash;
+		this._FlowView._FlowData.ViewState.SelectedConnectionHash = null;
+		this._FlowView._FlowData.ViewState.SelectedTetherHash = null;
+
+		this._FlowView.renderFlow();
+
+		if (this._FlowView._EventHandlerProvider && pNodeHash !== tmpPreviousSelection)
+		{
+			let tmpNode = pNodeHash ? this._FlowView._FlowData.Nodes.find((pNode) => pNode.Hash === pNodeHash) : null;
+			this._FlowView._EventHandlerProvider.fireEvent('onNodeSelected', tmpNode);
+		}
+	}
+
+	/**
+	 * Select a connection
+	 * @param {string|null} pConnectionHash - Hash of the connection to select, or null to deselect
+	 */
+	selectConnection(pConnectionHash)
+	{
+		let tmpPreviousSelection = this._FlowView._FlowData.ViewState.SelectedConnectionHash;
+		this._FlowView._FlowData.ViewState.SelectedConnectionHash = pConnectionHash;
+		this._FlowView._FlowData.ViewState.SelectedNodeHash = null;
+		this._FlowView._FlowData.ViewState.SelectedTetherHash = null;
+
+		this._FlowView.renderFlow();
+
+		if (this._FlowView._EventHandlerProvider && pConnectionHash !== tmpPreviousSelection)
+		{
+			let tmpConnection = pConnectionHash ? this._FlowView._FlowData.Connections.find((pConn) => pConn.Hash === pConnectionHash) : null;
+			this._FlowView._EventHandlerProvider.fireEvent('onConnectionSelected', tmpConnection);
+		}
+	}
+
+	/**
+	 * Select a tether by its panel hash.
+	 * @param {string|null} pPanelHash - Hash of the panel whose tether to select, or null to deselect
+	 */
+	selectTether(pPanelHash)
+	{
+		let tmpPreviousSelection = this._FlowView._FlowData.ViewState.SelectedTetherHash;
+		this._FlowView._FlowData.ViewState.SelectedTetherHash = pPanelHash;
+		this._FlowView._FlowData.ViewState.SelectedNodeHash = null;
+		this._FlowView._FlowData.ViewState.SelectedConnectionHash = null;
+
+		this._FlowView.renderFlow();
+
+		if (this._FlowView._EventHandlerProvider && pPanelHash !== tmpPreviousSelection)
+		{
+			let tmpPanel = pPanelHash ? this._FlowView._FlowData.OpenPanels.find((pPanel) => pPanel.Hash === pPanelHash) : null;
+			this._FlowView._EventHandlerProvider.fireEvent('onTetherSelected', tmpPanel);
+		}
+	}
+
+	/**
+	 * Deselect all nodes and connections
+	 */
+	deselectAll()
+	{
+		this._FlowView._FlowData.ViewState.SelectedNodeHash = null;
+		this._FlowView._FlowData.ViewState.SelectedConnectionHash = null;
+		this._FlowView._FlowData.ViewState.SelectedTetherHash = null;
+		this._FlowView.renderFlow();
+	}
+
+	/**
+	 * Delete the currently selected node or connection
+	 * @returns {boolean}
+	 */
+	deleteSelected()
+	{
+		if (this._FlowView._FlowData.ViewState.SelectedNodeHash)
+		{
+			return this._FlowView.removeNode(this._FlowView._FlowData.ViewState.SelectedNodeHash);
+		}
+		if (this._FlowView._FlowData.ViewState.SelectedConnectionHash)
+		{
+			return this._FlowView.removeConnection(this._FlowView._FlowData.ViewState.SelectedConnectionHash);
+		}
+		return false;
+	}
+}
+
+module.exports = PictServiceFlowSelectionManager;

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

@@ -446,22 +446,34 @@ class PictServiceFlowTether extends libFableServiceProviderBase
 
 		let tmpPath = this.generatePath(pPanelData, tmpFrom, tmpTo);
 
-		// Hit area (wider invisible path for easier click targeting)
-		let tmpHitArea = this._FlowView._SVGHelperProvider.createSVGElement('path');
-		tmpHitArea.setAttribute('class', 'pict-flow-tether-hitarea');
-		tmpHitArea.setAttribute('d', tmpPath);
-		tmpHitArea.setAttribute('data-element-type', 'tether-hitarea');
-		tmpHitArea.setAttribute('data-panel-hash', pPanelData.Hash);
-		pTethersLayer.appendChild(tmpHitArea);
-
-		// Visible tether path
-		let tmpPathElement = this._FlowView._SVGHelperProvider.createSVGElement('path');
-		tmpPathElement.setAttribute('class', `pict-flow-tether-line${pIsSelected ? ' selected' : ''}`);
-		tmpPathElement.setAttribute('d', tmpPath);
-		tmpPathElement.setAttribute('marker-end', `url(#flow-tether-arrowhead-${pViewIdentifier})`);
-		tmpPathElement.setAttribute('data-element-type', 'tether');
-		tmpPathElement.setAttribute('data-panel-hash', pPanelData.Hash);
-		pTethersLayer.appendChild(tmpPathElement);
+		// Hit area and visible tether path
+		let tmpShapeProvider = this._FlowView._ConnectorShapesProvider;
+		if (tmpShapeProvider)
+		{
+			let tmpHitArea = tmpShapeProvider.createTetherHitAreaElement(tmpPath, pPanelData.Hash);
+			pTethersLayer.appendChild(tmpHitArea);
+
+			let tmpPathElement = tmpShapeProvider.createTetherPathElement(
+				tmpPath, pPanelData.Hash, pIsSelected, pViewIdentifier);
+			pTethersLayer.appendChild(tmpPathElement);
+		}
+		else
+		{
+			let tmpHitArea = this._FlowView._SVGHelperProvider.createSVGElement('path');
+			tmpHitArea.setAttribute('class', 'pict-flow-tether-hitarea');
+			tmpHitArea.setAttribute('d', tmpPath);
+			tmpHitArea.setAttribute('data-element-type', 'tether-hitarea');
+			tmpHitArea.setAttribute('data-panel-hash', pPanelData.Hash);
+			pTethersLayer.appendChild(tmpHitArea);
+
+			let tmpPathElement = this._FlowView._SVGHelperProvider.createSVGElement('path');
+			tmpPathElement.setAttribute('class', `pict-flow-tether-line${pIsSelected ? ' selected' : ''}`);
+			tmpPathElement.setAttribute('d', tmpPath);
+			tmpPathElement.setAttribute('marker-end', `url(#flow-tether-arrowhead-${pViewIdentifier})`);
+			tmpPathElement.setAttribute('data-element-type', 'tether');
+			tmpPathElement.setAttribute('data-panel-hash', pPanelData.Hash);
+			pTethersLayer.appendChild(tmpPathElement);
+		}
 
 		// Render drag handles when selected
 		if (pIsSelected)
@@ -529,15 +541,30 @@ class PictServiceFlowTether extends libFableServiceProviderBase
 	 */
 	_createHandle(pLayer, pPanelHash, pHandleType, pX, pY, pClassName)
 	{
-		let tmpCircle = this._FlowView._SVGHelperProvider.createSVGElement('circle');
-		tmpCircle.setAttribute('class', pClassName);
-		tmpCircle.setAttribute('cx', String(pX));
-		tmpCircle.setAttribute('cy', String(pY));
-		tmpCircle.setAttribute('r', '6');
-		tmpCircle.setAttribute('data-element-type', 'tether-handle');
-		tmpCircle.setAttribute('data-panel-hash', pPanelHash);
-		tmpCircle.setAttribute('data-handle-type', pHandleType);
-		pLayer.appendChild(tmpCircle);
+		let tmpShapeProvider = this._FlowView._ConnectorShapesProvider;
+		let tmpShapeKey = (pClassName === 'pict-flow-tether-handle-midpoint')
+			? 'tether-handle-midpoint' : 'tether-handle';
+
+		if (tmpShapeProvider)
+		{
+			let tmpHandle = tmpShapeProvider.createHandleElement(
+				pPanelHash, pHandleType, pX, pY, tmpShapeKey);
+			tmpHandle.setAttribute('data-element-type', 'tether-handle');
+			tmpHandle.setAttribute('data-panel-hash', pPanelHash);
+			pLayer.appendChild(tmpHandle);
+		}
+		else
+		{
+			let tmpCircle = this._FlowView._SVGHelperProvider.createSVGElement('circle');
+			tmpCircle.setAttribute('class', pClassName);
+			tmpCircle.setAttribute('cx', String(pX));
+			tmpCircle.setAttribute('cy', String(pY));
+			tmpCircle.setAttribute('r', '6');
+			tmpCircle.setAttribute('data-element-type', 'tether-handle');
+			tmpCircle.setAttribute('data-panel-hash', pPanelHash);
+			tmpCircle.setAttribute('data-handle-type', pHandleType);
+			pLayer.appendChild(tmpCircle);
+		}
 	}
 }