pict-section-flow 0.0.13 → 0.0.16

package/package.json

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

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

@@ -934,13 +934,6 @@ class PictProviderFlowCSS extends libFableServiceProviderBase
 		.pict-flow-toolbar-btn:active {
 			background-color: var(--pf-button-active-bg);
 		}
-		.pict-flow-toolbar-btn.danger {
-			color: var(--pf-button-danger-text);
-			border-color: var(--pf-button-danger-text);
-		}
-		.pict-flow-toolbar-btn.danger:hover {
-			background-color: var(--pf-button-danger-hover-bg);
-		}
 		.pict-flow-toolbar-btn-icon {
 			display: inline-flex;
 			align-items: center;
@@ -1397,9 +1390,6 @@ class PictProviderFlowCSS extends libFableServiceProviderBase
 		.pict-flow-floating-btn:hover {
 			background-color: var(--pf-button-hover-bg);
 		}
-		.pict-flow-floating-btn.danger:hover {
-			background-color: var(--pf-button-danger-hover-bg);
-		}
 		.pict-flow-floating-separator {
 			height: 1px;
 			background-color: var(--pf-divider-light);

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

@@ -104,8 +104,15 @@ class PictProviderFlowNodeTypes extends libPictProvider
 
 		this._FlowView = (pOptions && pOptions.FlowView) ? pOptions.FlowView : null;
 
-		// Initialize with default node types
-		this._NodeTypes = JSON.parse(JSON.stringify(_DefaultNodeTypes));
+		// Initialize with default node types unless explicitly disabled
+		if (pOptions && pOptions.IncludeDefaultNodeTypes === false)
+		{
+			this._NodeTypes = {};
+		}
+		else
+		{
+			this._NodeTypes = JSON.parse(JSON.stringify(_DefaultNodeTypes));
+		}
 
 		// Merge any additional node types passed in via options
 		if (pOptions && pOptions.AdditionalNodeTypes && typeof pOptions.AdditionalNodeTypes === 'object')

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

@@ -223,6 +223,9 @@ class PictServiceFlowConnectionHandleManager extends libFableServiceProviderBase
 				if (tmpConn.Data && tmpConn.Data.HandleCustomized)
 				{
 					tmpConn.Data.HandleCustomized = false;
+					// Clear multi-handle array (current format)
+					tmpConn.Data.BezierHandles = [];
+					// Clear legacy single-handle fields
 					tmpConn.Data.BezierHandleX = null;
 					tmpConn.Data.BezierHandleY = null;
 					tmpConn.Data.OrthoCorner1X = null;

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

@@ -75,6 +75,10 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 		this._LastConnectionClickTime = 0;
 		this._LastConnectionClickHash = null;
 
+		// Double-click detection for tethers
+		this._LastTetherClickTime = 0;
+		this._LastTetherClickHash = null;
+
 		// Double-click detection for handles
 		this._LastHandleClickTime = 0;
 		this._LastHandleClickHash = null;
@@ -128,6 +132,15 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 				case 'connection-handle':
 					this._removeBezierHandle(tmpTarget);
 					break;
+
+				case 'tether':
+				case 'tether-hitarea':
+					this._addTetherBezierHandle(tmpTarget, pEvent);
+					break;
+
+				case 'tether-handle':
+					this._removeTetherBezierHandle(tmpTarget);
+					break;
 			}
 		});
 	}
@@ -252,8 +265,26 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 
 			case 'tether':
 			case 'tether-hitarea':
-				this._selectTether(tmpTarget);
+			{
+				let tmpPanelHash = this._getPanelHash(tmpTarget);
+				let tmpNow = Date.now();
+
+				// Check for double-click on same tether to add a handle
+				if (tmpPanelHash && tmpPanelHash === this._LastTetherClickHash
+					&& (tmpNow - this._LastTetherClickTime) < this._DoubleClickThreshold)
+				{
+					this._LastTetherClickTime = 0;
+					this._LastTetherClickHash = null;
+					this._addTetherBezierHandle(tmpTarget, pEvent);
+				}
+				else
+				{
+					this._LastTetherClickTime = tmpNow;
+					this._LastTetherClickHash = tmpPanelHash;
+					this._selectTether(tmpTarget);
+				}
 				break;
+			}
 
 			case 'tether-handle':
 			{
@@ -758,6 +789,41 @@ class PictServiceFlowInteractionManager extends libFableServiceProviderBase
 		this._FlowView.removeConnectionHandle(tmpConnectionHash, tmpIndex);
 	}
 
+	/**
+	 * Add a bezier handle to a tether.
+	 * @param {Element} pTarget - The tether SVG element that was right-clicked or double-clicked
+	 * @param {Event} pEvent - The mouse event (for coordinate extraction)
+	 */
+	_addTetherBezierHandle(pTarget, pEvent)
+	{
+		let tmpPanelHash = this._getPanelHash(pTarget);
+		if (!tmpPanelHash) return;
+
+		// Select the tether so handles render after re-render
+		this._FlowView.selectTether(tmpPanelHash);
+
+		let tmpCoords = this._FlowView.screenToSVGCoords(pEvent.clientX, pEvent.clientY);
+		this._FlowView.addTetherHandle(tmpPanelHash, tmpCoords.x, tmpCoords.y);
+	}
+
+	/**
+	 * Remove a bezier handle from a tether.
+	 * @param {Element} pTarget - The tether handle SVG element that was right-clicked
+	 */
+	_removeTetherBezierHandle(pTarget)
+	{
+		let tmpPanelHash = this._getPanelHash(pTarget);
+		if (!tmpPanelHash) return;
+
+		let tmpHandleType = pTarget.getAttribute('data-handle-type');
+		if (!tmpHandleType || !tmpHandleType.startsWith('bezier-handle-')) return;
+
+		let tmpIndex = parseInt(tmpHandleType.replace('bezier-handle-', ''), 10);
+		if (isNaN(tmpIndex)) return;
+
+		this._FlowView.removeTetherHandle(tmpPanelHash, tmpIndex);
+	}
+
 	// ---- Line Mode Toggling ----
 
 	_toggleConnectionLineMode(pConnectionHash)

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

@@ -298,12 +298,74 @@ class PictServiceFlowTether extends libFableServiceProviderBase
 		}
 		else
 		{
+			// Check for multi-handle array first
+			let tmpHandles = this._getTetherBezierHandles(pPanelData);
+			if (tmpHandles.length > 0)
+			{
+				return this.generateMultiBezierPath(pFrom, pTo, tmpHandles);
+			}
+
+			// Single-handle legacy path
 			let tmpHandleX = (pPanelData.TetherHandleCustomized && pPanelData.TetherBezierHandleX != null) ? pPanelData.TetherBezierHandleX : null;
 			let tmpHandleY = (pPanelData.TetherHandleCustomized && pPanelData.TetherBezierHandleY != null) ? pPanelData.TetherBezierHandleY : null;
 			return this.generateBezierPath(pFrom, pTo, tmpHandleX, tmpHandleY);
 		}
 	}
 
+	/**
+	 * Get the bezier handles array for a tether, respecting the customized flag.
+	 * @param {Object} pPanelData
+	 * @returns {Array<{x: number, y: number}>}
+	 */
+	_getTetherBezierHandles(pPanelData)
+	{
+		if (!pPanelData || !pPanelData.TetherHandleCustomized)
+		{
+			return [];
+		}
+
+		// Multi-handle format
+		if (Array.isArray(pPanelData.TetherBezierHandles) && pPanelData.TetherBezierHandles.length > 0)
+		{
+			return pPanelData.TetherBezierHandles;
+		}
+
+		// Legacy single-handle format
+		if (pPanelData.TetherBezierHandleX != null && pPanelData.TetherBezierHandleY != null)
+		{
+			return [{ x: pPanelData.TetherBezierHandleX, y: pPanelData.TetherBezierHandleY }];
+		}
+
+		return [];
+	}
+
+	/**
+	 * Generate a multi-handle bezier path for a tether.
+	 * Delegates to PathGenerator.buildMultiBezierPathString.
+	 * @param {Object} pFrom - {x, y, side}
+	 * @param {Object} pTo - {x, y, side}
+	 * @param {Array<{x: number, y: number}>} pHandles
+	 * @returns {string} SVG path d attribute
+	 */
+	generateMultiBezierPath(pFrom, pTo, pHandles)
+	{
+		let tmpDepartDist = 20;
+		let tmpFromDir = this._FlowView._GeometryProvider.sideDirection(pFrom.side);
+		let tmpToDir = this._FlowView._GeometryProvider.sideDirection(pTo.side);
+
+		let tmpDepart = {
+			x: pFrom.x + tmpFromDir.dx * tmpDepartDist,
+			y: pFrom.y + tmpFromDir.dy * tmpDepartDist
+		};
+		let tmpApproach = {
+			x: pTo.x + tmpToDir.dx * tmpDepartDist,
+			y: pTo.y + tmpToDir.dy * tmpDepartDist
+		};
+
+		return this._FlowView._PathGenerator.buildMultiBezierPathString(
+			pFrom, tmpDepart, pFrom.side, tmpApproach, pTo.side, pTo, pHandles);
+	}
+
 	// ---- Handle State Management ----
 
 	/**
@@ -317,9 +379,34 @@ class PictServiceFlowTether extends libFableServiceProviderBase
 	{
 		pPanelData.TetherHandleCustomized = true;
 
+		// Multi-handle bezier: handle type is 'bezier-handle-N'
+		if (pHandleType && pHandleType.startsWith('bezier-handle-'))
+		{
+			let tmpIndex = parseInt(pHandleType.replace('bezier-handle-', ''), 10);
+			if (!isNaN(tmpIndex) && Array.isArray(pPanelData.TetherBezierHandles)
+				&& tmpIndex < pPanelData.TetherBezierHandles.length)
+			{
+				pPanelData.TetherBezierHandles[tmpIndex].x = pX;
+				pPanelData.TetherBezierHandles[tmpIndex].y = pY;
+			}
+			return;
+		}
+
 		switch (pHandleType)
 		{
 			case 'bezier-midpoint':
+				// Migrate to multi-handle array
+				if (!Array.isArray(pPanelData.TetherBezierHandles)
+					|| pPanelData.TetherBezierHandles.length === 0)
+				{
+					pPanelData.TetherBezierHandles = [{ x: pX, y: pY }];
+				}
+				else
+				{
+					pPanelData.TetherBezierHandles[0].x = pX;
+					pPanelData.TetherBezierHandles[0].y = pY;
+				}
+				// Keep legacy fields in sync
 				pPanelData.TetherBezierHandleX = pX;
 				pPanelData.TetherBezierHandleY = pY;
 				break;
@@ -353,6 +440,7 @@ class PictServiceFlowTether extends libFableServiceProviderBase
 		if (pPanelData.TetherHandleCustomized)
 		{
 			pPanelData.TetherHandleCustomized = false;
+			pPanelData.TetherBezierHandles = [];
 			pPanelData.TetherBezierHandleX = null;
 			pPanelData.TetherBezierHandleY = null;
 			pPanelData.TetherOrthoCorner1X = null;
@@ -381,6 +469,68 @@ class PictServiceFlowTether extends libFableServiceProviderBase
 		}
 	}
 
+	/**
+	 * Add a bezier handle to a tether at the specified position.
+	 * @param {Object} pPanelData - Panel data
+	 * @param {number} pX
+	 * @param {number} pY
+	 * @param {Object} pFrom - Panel anchor {x, y, side}
+	 * @param {Object} pTo - Node anchor {x, y, side}
+	 */
+	addHandle(pPanelData, pX, pY, pFrom, pTo)
+	{
+		// Ensure bezier mode and multi-handle array
+		pPanelData.TetherLineMode = 'bezier';
+
+		if (!Array.isArray(pPanelData.TetherBezierHandles))
+		{
+			pPanelData.TetherBezierHandles = [];
+			// Migrate legacy single-handle if present
+			if (pPanelData.TetherBezierHandleX != null && pPanelData.TetherBezierHandleY != null)
+			{
+				pPanelData.TetherBezierHandles.push({
+					x: pPanelData.TetherBezierHandleX,
+					y: pPanelData.TetherBezierHandleY
+				});
+			}
+		}
+
+		// Compute insertion index
+		let tmpInsertIndex = 0;
+		if (this._FlowView._ConnectionRenderer && pFrom && pTo)
+		{
+			tmpInsertIndex = this._FlowView._ConnectionRenderer.computeInsertionIndex(
+				pPanelData.TetherBezierHandles,
+				{ x: pX, y: pY },
+				pFrom,
+				pTo
+			);
+		}
+
+		pPanelData.TetherBezierHandles.splice(tmpInsertIndex, 0, { x: pX, y: pY });
+		pPanelData.TetherHandleCustomized = true;
+	}
+
+	/**
+	 * Remove a bezier handle from a tether by index.
+	 * @param {Object} pPanelData - Panel data
+	 * @param {number} pIndex - Index in TetherBezierHandles array
+	 */
+	removeHandle(pPanelData, pIndex)
+	{
+		if (!Array.isArray(pPanelData.TetherBezierHandles)) return;
+		if (pIndex < 0 || pIndex >= pPanelData.TetherBezierHandles.length) return;
+
+		pPanelData.TetherBezierHandles.splice(pIndex, 1);
+
+		if (pPanelData.TetherBezierHandles.length === 0)
+		{
+			pPanelData.TetherHandleCustomized = false;
+			pPanelData.TetherBezierHandleX = null;
+			pPanelData.TetherBezierHandleY = null;
+		}
+	}
+
 	/**
 	 * Toggle tether line mode between bezier and orthogonal.
 	 * Resets handle positions on toggle.
@@ -393,6 +543,7 @@ class PictServiceFlowTether extends libFableServiceProviderBase
 		pPanelData.TetherLineMode = (tmpCurrentMode === 'bezier') ? 'orthogonal' : 'bezier';
 
 		pPanelData.TetherHandleCustomized = false;
+		pPanelData.TetherBezierHandles = [];
 		pPanelData.TetherBezierHandleX = null;
 		pPanelData.TetherBezierHandleY = null;
 		pPanelData.TetherOrthoCorner1X = null;
@@ -491,22 +642,25 @@ class PictServiceFlowTether extends libFableServiceProviderBase
 		}
 		else
 		{
-			// Bezier: single midpoint handle
-			let tmpMidX, tmpMidY;
-			if (pPanelData.TetherHandleCustomized && pPanelData.TetherBezierHandleX != null)
+			// Bezier handles
+			let tmpHandles = this._getTetherBezierHandles(pPanelData);
+
+			if (tmpHandles.length > 0)
 			{
-				tmpMidX = pPanelData.TetherBezierHandleX;
-				tmpMidY = pPanelData.TetherBezierHandleY;
+				// Multi-handle: render each handle as a draggable circle
+				for (let i = 0; i < tmpHandles.length; i++)
+				{
+					this._createHandle(pTethersLayer, pPanelData.Hash, 'bezier-handle-' + i,
+						tmpHandles[i].x, tmpHandles[i].y, 'pict-flow-tether-handle');
+				}
 			}
 			else
 			{
+				// No custom handles: show auto-computed midpoint
 				let tmpMid = this.getAutoMidpoint(pFrom, pTo);
-				tmpMidX = tmpMid.x;
-				tmpMidY = tmpMid.y;
+				this._createHandle(pTethersLayer, pPanelData.Hash, 'bezier-midpoint',
+					tmpMid.x, tmpMid.y, 'pict-flow-tether-handle-midpoint');
 			}
-
-			this._createHandle(pTethersLayer, pPanelData.Hash, 'bezier-midpoint',
-				tmpMidX, tmpMidY, 'pict-flow-tether-handle-midpoint');
 		}
 	}
 

package/source/views/PictView-Flow-FloatingToolbar.js

@@ -25,7 +25,10 @@ const _DefaultConfiguration =
 	<button class="pict-flow-floating-btn" data-flow-action="add-node" title="Add Node">
 		<span id="Flow-FloatingIcon-plus-{~D:Record.FlowViewIdentifier~}"></span>
 	</button>
-	<button class="pict-flow-floating-btn danger" data-flow-action="delete-selected" title="Delete Selected">
+	<button class="pict-flow-floating-btn" data-flow-action="cards-popup" title="Cards">
+		<span id="Flow-FloatingIcon-cards-{~D:Record.FlowViewIdentifier~}"></span>
+	</button>
+	<button class="pict-flow-floating-btn" data-flow-action="delete-selected" title="Delete Selected">
 		<span id="Flow-FloatingIcon-trash-{~D:Record.FlowViewIdentifier~}"></span>
 	</button>
 	<div class="pict-flow-floating-separator"></div>
@@ -42,9 +45,6 @@ const _DefaultConfiguration =
 	<button class="pict-flow-floating-btn" data-flow-action="auto-layout" title="Auto Layout">
 		<span id="Flow-FloatingIcon-auto-layout-{~D:Record.FlowViewIdentifier~}"></span>
 	</button>
-	<button class="pict-flow-floating-btn" data-flow-action="cards-popup" title="Cards">
-		<span id="Flow-FloatingIcon-cards-{~D:Record.FlowViewIdentifier~}"></span>
-	</button>
 	<button class="pict-flow-floating-btn" data-flow-action="layout-popup" title="Layout">
 		<span id="Flow-FloatingIcon-layout-{~D:Record.FlowViewIdentifier~}"></span>
 	</button>
@@ -155,6 +155,27 @@ class PictViewFlowFloatingToolbar extends libPictView
 		// Populate icons
 		this._populateIcons();
 
+		// Hide buttons based on options
+		if (tmpFloatingToolbar.length > 0)
+		{
+			if (this.options.EnableAddNode === false)
+			{
+				let tmpAddNodeBtn = tmpFloatingToolbar[0].querySelector('[data-flow-action="add-node"]');
+				if (tmpAddNodeBtn)
+				{
+					tmpAddNodeBtn.style.display = 'none';
+				}
+			}
+			if (this.options.EnableCardPalette === false)
+			{
+				let tmpCardsBtn = tmpFloatingToolbar[0].querySelector('[data-flow-action="cards-popup"]');
+				if (tmpCardsBtn)
+				{
+					tmpCardsBtn.style.display = 'none';
+				}
+			}
+		}
+
 		return super.onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent);
 	}
 

package/source/views/PictView-Flow-Toolbar.js

@@ -12,6 +12,8 @@ const _DefaultConfiguration =
 	FlowViewIdentifier: 'Pict-Flow',
 
 	EnablePalette: true,
+	EnableAddNode: true,
+	EnableCardPalette: true,
 
 	CSS: false,
 
@@ -26,16 +28,14 @@ const _DefaultConfiguration =
 			<span class="pict-flow-toolbar-btn-icon" id="Flow-Toolbar-Icon-plus-{~D:Record.FlowViewIdentifier~}"></span>
 			<span class="pict-flow-toolbar-btn-text">Node</span>
 		</button>
-		<button class="pict-flow-toolbar-btn danger" data-flow-action="delete-selected" title="Delete Node">
-			<span class="pict-flow-toolbar-btn-icon" id="Flow-Toolbar-Icon-trash-{~D:Record.FlowViewIdentifier~}"></span>
-		</button>
-	</div>
-	<div class="pict-flow-toolbar-group">
 		<button class="pict-flow-toolbar-btn" data-flow-action="cards-popup" id="Flow-Toolbar-Cards-{~D:Record.FlowViewIdentifier~}" title="Card Palette">
 			<span class="pict-flow-toolbar-btn-icon" id="Flow-Toolbar-Icon-cards-{~D:Record.FlowViewIdentifier~}"></span>
 			<span class="pict-flow-toolbar-btn-text">Cards</span>
 			<span class="pict-flow-toolbar-btn-chevron" id="Flow-Toolbar-CardsChevron-{~D:Record.FlowViewIdentifier~}"></span>
 		</button>
+		<button class="pict-flow-toolbar-btn" data-flow-action="delete-selected" title="Delete Node">
+			<span class="pict-flow-toolbar-btn-icon" id="Flow-Toolbar-Icon-trash-{~D:Record.FlowViewIdentifier~}"></span>
+		</button>
 	</div>
 	<div class="pict-flow-toolbar-group">
 		<button class="pict-flow-toolbar-btn" data-flow-action="layout-popup" id="Flow-Toolbar-Layout-{~D:Record.FlowViewIdentifier~}" title="Manage Layouts">
@@ -157,6 +157,24 @@ class PictViewFlowToolbar extends libPictView
 		// Populate SVG icons for toolbar buttons
 		this._populateToolbarIcons();
 
+		// Hide buttons based on options
+		if (this.options.EnableAddNode === false)
+		{
+			let tmpAddNodeBtn = this.pict.ContentAssignment.getElement(`#Flow-Toolbar-AddNode-${tmpFlowViewIdentifier}`);
+			if (tmpAddNodeBtn.length > 0)
+			{
+				tmpAddNodeBtn[0].style.display = 'none';
+			}
+		}
+		if (this.options.EnableCardPalette === false)
+		{
+			let tmpCardsBtn = this.pict.ContentAssignment.getElement(`#Flow-Toolbar-Cards-${tmpFlowViewIdentifier}`);
+			if (tmpCardsBtn.length > 0)
+			{
+				tmpCardsBtn[0].style.display = 'none';
+			}
+		}
+
 		return super.onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent);
 	}
 
@@ -508,38 +526,100 @@ class PictViewFlowToolbar extends libPictView
 	// ── Cards Popup ───────────────────────────────────────────────────────
 
 	/**
-	 * Build the Cards popup content (reuses palette rendering).
+	 * Build the Cards popup content with search and categorized palette.
 	 * @param {HTMLElement} pContainer
 	 */
 	_buildCardsPopup(pContainer)
 	{
-		this._renderPalette(pContainer);
+		// Search wrapper
+		let tmpSearchWrapper = document.createElement('div');
+		tmpSearchWrapper.className = 'pict-flow-popup-search-wrapper';
+
+		let tmpSearchIcon = document.createElement('span');
+		tmpSearchIcon.className = 'pict-flow-popup-search-icon';
+		let tmpIconProvider = this._FlowView ? this._FlowView._IconProvider : null;
+		if (tmpIconProvider)
+		{
+			tmpSearchIcon.innerHTML = tmpIconProvider.getIconSVGMarkup('search', 12);
+		}
+		tmpSearchWrapper.appendChild(tmpSearchIcon);
+
+		let tmpSearchInput = document.createElement('input');
+		tmpSearchInput.className = 'pict-flow-popup-search';
+		tmpSearchInput.setAttribute('type', 'text');
+		tmpSearchInput.setAttribute('placeholder', 'Search cards...');
+		tmpSearchWrapper.appendChild(tmpSearchInput);
+		pContainer.appendChild(tmpSearchWrapper);
+
+		// Palette list container
+		let tmpListDiv = document.createElement('div');
+		tmpListDiv.className = 'pict-flow-popup-node-list';
+		pContainer.appendChild(tmpListDiv);
+
+		// Initial population
+		this._renderPalette(tmpListDiv, '');
+
+		// Filter on input
+		tmpSearchInput.addEventListener('input', () =>
+		{
+			this._renderPalette(tmpListDiv, tmpSearchInput.value);
+		});
+
+		// Focus search input
+		setTimeout(() => { tmpSearchInput.focus(); }, 50);
 	}
 
 	/**
 	 * Render the card palette with categories and card chips into a container.
 	 * @param {HTMLElement} pContainer - The target container element
+	 * @param {string} [pFilter] - Optional search filter text
 	 */
-	_renderPalette(pContainer)
+	_renderPalette(pContainer, pFilter)
 	{
 		if (!this._FlowView || !this._FlowView._NodeTypeProvider) return;
 
-		let tmpCategories = this._FlowView._NodeTypeProvider.getCardsByCategory();
-		let tmpCategoryKeys = Object.keys(tmpCategories);
-
-		if (tmpCategoryKeys.length === 0)
+		// Clear existing content
+		while (pContainer.firstChild)
 		{
-			let tmpEmpty = document.createElement('div');
-			tmpEmpty.className = 'pict-flow-popup-list-empty';
-			tmpEmpty.textContent = 'No card types available';
-			pContainer.appendChild(tmpEmpty);
-			return;
+			pContainer.removeChild(pContainer.firstChild);
 		}
 
+		let tmpCategories = this._FlowView._NodeTypeProvider.getCardsByCategory();
+		let tmpCategoryKeys = Object.keys(tmpCategories);
+		let tmpFilter = (pFilter || '').toLowerCase().trim();
+		let tmpTotalMatchCount = 0;
+
 		for (let i = 0; i < tmpCategoryKeys.length; i++)
 		{
 			let tmpCategoryName = tmpCategoryKeys[i];
 			let tmpCards = tmpCategories[tmpCategoryName];
+			let tmpMatchingCards = [];
+
+			// Filter cards within this category
+			for (let j = 0; j < tmpCards.length; j++)
+			{
+				let tmpCardConfig = tmpCards[j];
+				let tmpMeta = tmpCardConfig.CardMetadata || {};
+
+				if (tmpFilter)
+				{
+					let tmpLabel = (tmpCardConfig.Label || '').toLowerCase();
+					let tmpCode = (tmpMeta.Code || '').toLowerCase();
+					let tmpCategory = tmpCategoryName.toLowerCase();
+					if (tmpLabel.indexOf(tmpFilter) < 0 &&
+						tmpCode.indexOf(tmpFilter) < 0 &&
+						tmpCategory.indexOf(tmpFilter) < 0)
+					{
+						continue;
+					}
+				}
+
+				tmpMatchingCards.push(tmpCardConfig);
+			}
+
+			if (tmpMatchingCards.length === 0) continue;
+
+			tmpTotalMatchCount += tmpMatchingCards.length;
 
 			let tmpCategoryDiv = document.createElement('div');
 			tmpCategoryDiv.className = 'pict-flow-palette-category';
@@ -553,9 +633,9 @@ class PictViewFlowToolbar extends libPictView
 			let tmpCardsDiv = document.createElement('div');
 			tmpCardsDiv.className = 'pict-flow-palette-cards';
 
-			for (let j = 0; j < tmpCards.length; j++)
+			for (let j = 0; j < tmpMatchingCards.length; j++)
 			{
-				let tmpCardConfig = tmpCards[j];
+				let tmpCardConfig = tmpMatchingCards[j];
 				let tmpMeta = tmpCardConfig.CardMetadata || {};
 
 				let tmpCardEl = document.createElement('div');
@@ -635,6 +715,14 @@ class PictViewFlowToolbar extends libPictView
 			tmpCategoryDiv.appendChild(tmpCardsDiv);
 			pContainer.appendChild(tmpCategoryDiv);
 		}
+
+		if (tmpTotalMatchCount === 0)
+		{
+			let tmpEmpty = document.createElement('div');
+			tmpEmpty.className = 'pict-flow-popup-list-empty';
+			tmpEmpty.textContent = tmpFilter ? 'No matching cards' : 'No card types available';
+			pContainer.appendChild(tmpEmpty);
+		}
 	}
 
 	// ── Layout Popup ──────────────────────────────────────────────────────
@@ -1018,7 +1106,9 @@ class PictViewFlowToolbar extends libPictView
 				'PictViewFlowFloatingToolbar',
 				{
 					FlowViewIdentifier: tmpFlowViewIdentifier,
-					DefaultDestinationAddress: `#Flow-FloatingToolbar-Container-${tmpFlowViewIdentifier}`
+					DefaultDestinationAddress: `#Flow-FloatingToolbar-Container-${tmpFlowViewIdentifier}`,
+					EnableAddNode: this.options.EnableAddNode,
+					EnableCardPalette: this.options.EnableCardPalette
 				}
 			);
 			this._FloatingToolbarView._ToolbarView = this;

package/source/views/PictView-Flow.js

@@ -50,6 +50,9 @@ const _DefaultConfiguration =
 	TargetElementAddress: '#Flow-SVG-Container',
 
 	EnableToolbar: true,
+	EnableAddNode: true,
+	EnableCardPalette: true,
+	IncludeDefaultNodeTypes: true,
 	EnablePanning: true,
 	EnableZooming: true,
 	EnableNodeDragging: true,
@@ -145,7 +148,7 @@ class PictViewFlow extends libPictView
 			{ ServiceType: 'PictProviderFlowIcons',         Library: libPictProviderFlowIcons,         Property: '_IconProvider',         PostInit: 'registerIconTemplates' },
 			{ ServiceType: 'PictProviderFlowConnectorShapes', Library: libPictProviderFlowConnectorShapes, Property: '_ConnectorShapesProvider' },
 			{ ServiceType: 'PictProviderFlowPanelChrome',   Library: libPictProviderFlowPanelChrome,   Property: '_PanelChromeProvider' },
-			{ ServiceType: 'PictProviderFlowNodeTypes',     Library: libPictProviderFlowNodeTypes,     Property: '_NodeTypeProvider',   ExtraOptions: () => ({ AdditionalNodeTypes: this.options.NodeTypes }) },
+			{ ServiceType: 'PictProviderFlowNodeTypes',     Library: libPictProviderFlowNodeTypes,     Property: '_NodeTypeProvider',   ExtraOptions: () => ({ AdditionalNodeTypes: this.options.NodeTypes, IncludeDefaultNodeTypes: this.options.IncludeDefaultNodeTypes }) },
 			{ ServiceType: 'PictProviderFlowEventHandler',  Library: libPictProviderFlowEventHandler,  Property: '_EventHandlerProvider' },
 			{ ServiceType: 'PictProviderFlowLayouts',       Library: libPictProviderFlowLayouts,       Property: '_LayoutProvider',       PostInit: 'loadPersistedLayouts' },
 
@@ -410,7 +413,9 @@ class PictViewFlow extends libPictView
 					{
 						ViewIdentifier: `Flow-Toolbar-${tmpViewIdentifier}`,
 						DefaultDestinationAddress: `#Flow-Toolbar-${tmpViewIdentifier}`,
-						FlowViewIdentifier: tmpViewIdentifier
+						FlowViewIdentifier: tmpViewIdentifier,
+						EnableAddNode: this.options.EnableAddNode,
+						EnableCardPalette: this.options.EnableCardPalette
 					}
 				));
 			// Use the toolbar's render method after it's set up
@@ -689,6 +694,54 @@ class PictViewFlow extends libPictView
 	_resetHandlesForNode(pNodeHash) { return this._ConnectionHandleManager.resetHandlesForNode(pNodeHash); }
 	_resetHandlesForPanel(pPanelHash) { return this._ConnectionHandleManager.resetHandlesForPanel(pPanelHash); }
 
+	/**
+	 * Add a bezier handle to a tether at the specified SVG position.
+	 * @param {string} pPanelHash
+	 * @param {number} pX
+	 * @param {number} pY
+	 */
+	addTetherHandle(pPanelHash, pX, pY)
+	{
+		let tmpPanel = this._FlowData.OpenPanels.find((pPanel) => pPanel.Hash === pPanelHash);
+		if (!tmpPanel || !this._TetherService) return;
+
+		let tmpNode = this.getNode(tmpPanel.NodeHash);
+		if (!tmpNode) return;
+
+		let tmpAnchors = this._TetherService.getSmartAnchors(tmpPanel, tmpNode);
+
+		this._TetherService.addHandle(tmpPanel, pX, pY, tmpAnchors.panelAnchor, tmpAnchors.nodeAnchor);
+
+		this.renderFlow();
+		this.marshalFromView();
+
+		if (this._EventHandlerProvider)
+		{
+			this._EventHandlerProvider.fireEvent('onFlowChanged', this._FlowData);
+		}
+	}
+
+	/**
+	 * Remove a bezier handle from a tether by index.
+	 * @param {string} pPanelHash
+	 * @param {number} pIndex
+	 */
+	removeTetherHandle(pPanelHash, pIndex)
+	{
+		let tmpPanel = this._FlowData.OpenPanels.find((pPanel) => pPanel.Hash === pPanelHash);
+		if (!tmpPanel || !this._TetherService) return;
+
+		this._TetherService.removeHandle(tmpPanel, pIndex);
+
+		this.renderFlow();
+		this.marshalFromView();
+
+		if (this._EventHandlerProvider)
+		{
+			this._EventHandlerProvider.fireEvent('onFlowChanged', this._FlowData);
+		}
+	}
+
 	/**
 	 * Update a tether handle position during drag (for real-time feedback).
 	 * Delegates state update to the TetherService.