pict-section-flow 0.0.14 → 0.0.16

package/package.json

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