pict-section-formeditor 1.0.2 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pict-section-formeditor",
-    "version": "1.0.2",
+    "version": "1.0.3",
     "description": "Pict visual editor for pict-section-form configurations",
     "main": "source/Pict-Section-FormEditor.js",
     "scripts": {

package/source/Pict-Section-FormEditor-DefaultConfiguration.js

@@ -696,6 +696,42 @@ module.exports = (
 	outline-offset: -2px;
 	background: rgba(158, 107, 71, 0.05);
 }
+.pict-fe-drag-insert-before
+{
+	position: relative;
+	background: rgba(158, 107, 71, 0.03);
+}
+.pict-fe-drag-insert-before::before
+{
+	content: '';
+	position: absolute;
+	top: -1px;
+	left: 0;
+	right: 0;
+	height: 3px;
+	background: #9E6B47;
+	border-radius: 2px;
+	z-index: 10;
+	pointer-events: none;
+}
+.pict-fe-drag-insert-after
+{
+	position: relative;
+	background: rgba(158, 107, 71, 0.03);
+}
+.pict-fe-drag-insert-after::after
+{
+	content: '';
+	position: absolute;
+	bottom: -1px;
+	left: 0;
+	right: 0;
+	height: 3px;
+	background: #9E6B47;
+	border-radius: 2px;
+	z-index: 10;
+	pointer-events: none;
+}
 
 /* ---- Editor Layout: tab content + toggle + properties panel ---- */
 .pict-fe-editor-layout
@@ -1316,7 +1352,6 @@ module.exports = (
 	width: 100%;
 	height: 100%;
 	z-index: 9999;
-	overflow: hidden;
 }
 .pict-fe-inputtype-picker
 {

package/source/providers/Pict-Provider-FormEditorDragDrop.js

@@ -87,7 +87,24 @@ class FormEditorDragDrop extends libPictProvider
 
 		if (pEvent && pEvent.currentTarget)
 		{
-			pEvent.currentTarget.classList.add('pict-fe-drag-over');
+			// Detect whether the cursor is in the top or bottom half of the target
+			let tmpRect = pEvent.currentTarget.getBoundingClientRect();
+			let tmpMidpoint = tmpRect.top + (tmpRect.height / 2);
+			let tmpIsTopHalf = pEvent.clientY < tmpMidpoint;
+
+			pEvent.currentTarget.classList.remove('pict-fe-drag-insert-before');
+			pEvent.currentTarget.classList.remove('pict-fe-drag-insert-after');
+
+			if (tmpIsTopHalf)
+			{
+				pEvent.currentTarget.classList.add('pict-fe-drag-insert-before');
+			}
+			else
+			{
+				pEvent.currentTarget.classList.add('pict-fe-drag-insert-after');
+			}
+
+			this._ParentFormEditor._DragState.InsertPosition = tmpIsTopHalf ? 'before' : 'after';
 		}
 	}
 
@@ -101,6 +118,8 @@ class FormEditorDragDrop extends libPictProvider
 		if (pEvent && pEvent.currentTarget)
 		{
 			pEvent.currentTarget.classList.remove('pict-fe-drag-over');
+			pEvent.currentTarget.classList.remove('pict-fe-drag-insert-before');
+			pEvent.currentTarget.classList.remove('pict-fe-drag-insert-after');
 		}
 	}
 
@@ -123,6 +142,7 @@ class FormEditorDragDrop extends libPictProvider
 
 		let tmpTargetIndices = [pIndex0, pIndex1, pIndex2, pIndex3].filter((pVal) => { return typeof pVal === 'number'; });
 		let tmpSourceIndices = this._ParentFormEditor._DragState.Indices;
+		let tmpInsertPosition = this._ParentFormEditor._DragState.InsertPosition || 'before';
 		this._ParentFormEditor._DragState = null;
 
 		// Check if source and target are identical
@@ -148,7 +168,8 @@ class FormEditorDragDrop extends libPictProvider
 					return;
 				}
 				let tmpItem = tmpManifest.Sections.splice(tmpFromIdx, 1)[0];
-				tmpManifest.Sections.splice(tmpToIdx, 0, tmpItem);
+				let tmpInsertIdx = this._computeInsertIndex(tmpFromIdx, tmpToIdx, true, tmpInsertPosition);
+				tmpManifest.Sections.splice(tmpInsertIdx, 0, tmpItem);
 				break;
 			}
 			case 'group':
@@ -164,15 +185,9 @@ class FormEditorDragDrop extends libPictProvider
 					tmpTargetSection.Groups = [];
 				}
 
+				let tmpSameContainer = (tmpSourceIndices[0] === tmpTargetIndices[0]);
 				let tmpItem = tmpSourceSection.Groups.splice(tmpSourceIndices[1], 1)[0];
-
-				// If moving within the same section and target index is after source,
-				// adjust for the removal
-				let tmpInsertIdx = tmpTargetIndices[1];
-				if (tmpSourceIndices[0] === tmpTargetIndices[0] && tmpSourceIndices[1] < tmpTargetIndices[1])
-				{
-					tmpInsertIdx--;
-				}
+				let tmpInsertIdx = this._computeInsertIndex(tmpSourceIndices[1], tmpTargetIndices[1], tmpSameContainer, tmpInsertPosition);
 				tmpTargetSection.Groups.splice(tmpInsertIdx, 0, tmpItem);
 				break;
 			}
@@ -197,12 +212,8 @@ class FormEditorDragDrop extends libPictProvider
 
 				let tmpItem = tmpSourceGroup.Rows.splice(tmpSourceIndices[2], 1)[0];
 
-				let tmpInsertIdx = tmpTargetIndices[2];
 				let tmpSameContainer = (tmpSourceIndices[0] === tmpTargetIndices[0]) && (tmpSourceIndices[1] === tmpTargetIndices[1]);
-				if (tmpSameContainer && tmpSourceIndices[2] < tmpTargetIndices[2])
-				{
-					tmpInsertIdx--;
-				}
+				let tmpInsertIdx = this._computeInsertIndex(tmpSourceIndices[2], tmpTargetIndices[2], tmpSameContainer, tmpInsertPosition);
 				tmpTargetGroup.Rows.splice(tmpInsertIdx, 0, tmpItem);
 
 				// Sync row indices on both source and target groups
@@ -240,12 +251,8 @@ class FormEditorDragDrop extends libPictProvider
 
 				let tmpAddress = tmpSourceRow.Inputs.splice(tmpSourceIndices[3], 1)[0];
 
-				let tmpInsertIdx = tmpTargetIndices[3];
 				let tmpSameContainer = (tmpSourceIndices[0] === tmpTargetIndices[0]) && (tmpSourceIndices[1] === tmpTargetIndices[1]) && (tmpSourceIndices[2] === tmpTargetIndices[2]);
-				if (tmpSameContainer && tmpSourceIndices[3] < tmpTargetIndices[3])
-				{
-					tmpInsertIdx--;
-				}
+				let tmpInsertIdx = this._computeInsertIndex(tmpSourceIndices[3], tmpTargetIndices[3], tmpSameContainer, tmpInsertPosition);
 				tmpTargetRow.Inputs.splice(tmpInsertIdx, 0, tmpAddress);
 
 				// Update the Descriptor's PictForm metadata for the new location
@@ -282,10 +289,12 @@ class FormEditorDragDrop extends libPictProvider
 		let tmpContainer = this.pict.ContentAssignment.getElement(`#FormEditor-Panel-Visual-${this._ParentFormEditor.Hash}`);
 		if (tmpContainer && tmpContainer[0])
 		{
-			let tmpHighlighted = tmpContainer[0].querySelectorAll('.pict-fe-drag-over');
+			let tmpHighlighted = tmpContainer[0].querySelectorAll('.pict-fe-drag-over, .pict-fe-drag-insert-before, .pict-fe-drag-insert-after');
 			for (let i = 0; i < tmpHighlighted.length; i++)
 			{
 				tmpHighlighted[i].classList.remove('pict-fe-drag-over');
+				tmpHighlighted[i].classList.remove('pict-fe-drag-insert-before');
+				tmpHighlighted[i].classList.remove('pict-fe-drag-insert-after');
 			}
 		}
 	}
@@ -314,6 +323,31 @@ class FormEditorDragDrop extends libPictProvider
 		return true;
 	}
 
+	/**
+	 * Compute the final insert index for a position-aware drag-and-drop.
+	 *
+	 * After removing the source item from its array, this method determines the
+	 * correct splice index based on the user's cursor position (insert before or
+	 * after the target).
+	 *
+	 * @param {number} pSourceIdx - The source item's index within its container
+	 * @param {number} pTargetIdx - The target item's index within its container
+	 * @param {boolean} pSameContainer - Whether source and target share the same parent
+	 * @param {string} pInsertPosition - 'before' or 'after'
+	 * @returns {number} The index to use with Array.splice after removing the source
+	 */
+	_computeInsertIndex(pSourceIdx, pTargetIdx, pSameContainer, pInsertPosition)
+	{
+		let tmpLogicalTarget = (pInsertPosition === 'before') ? pTargetIdx : pTargetIdx + 1;
+
+		if (pSameContainer && pSourceIdx < tmpLogicalTarget)
+		{
+			tmpLogicalTarget--;
+		}
+
+		return tmpLogicalTarget;
+	}
+
 	/**
 	 * Build the drag attribute string for a container element.
 	 * Returns an empty string when drag-and-drop is disabled.

package/source/providers/Pict-Provider-FormEditorManifestOps.js

@@ -167,8 +167,13 @@ class FormEditorManifestOps extends libPictProvider
 				tmpGroup.Rows = [];
 			}
 
-			// PictForm.Row is 1-based; pad with empty rows if necessary
-			let tmpRowNumber = (typeof tmpPictForm.Row === 'number' && tmpPictForm.Row > 0) ? tmpPictForm.Row : 1;
+			// PictForm.Row is 1-based; pad with empty rows if necessary.
+			// Row may be a number or a string (e.g. "2") in real-world manifests.
+			let tmpRowNumber = parseInt(tmpPictForm.Row, 10);
+			if (isNaN(tmpRowNumber) || tmpRowNumber < 1)
+			{
+				tmpRowNumber = 1;
+			}
 			let tmpRowIndex = tmpRowNumber - 1;
 			while (tmpGroup.Rows.length <= tmpRowIndex)
 			{

package/source/views/PictView-FormEditor-InputTypePicker.js

@@ -103,8 +103,10 @@ class PictViewFormEditorInputTypePicker extends libPictView
 				}
 			}, { passive: false });
 
-			tmpOverlay.appendChild(tmpPickerContainer);
+			// Append overlay and picker as siblings on document.body so the picker
+			// is not inside the overlay's stacking context (which can trap pointer events).
 			document.body.appendChild(tmpOverlay);
+			document.body.appendChild(tmpPickerContainer);
 
 			// Position the picker using fixed viewport coordinates
 			// anchored below the InputType chip (or properties panel button as fallback)
@@ -320,7 +322,9 @@ class PictViewFormEditorInputTypePicker extends libPictView
 	{
 		let tmpHash = this._ParentFormEditor.Hash;
 		let tmpOverlayId = `FormEditor-InputTypePicker-${tmpHash}-Overlay`;
+		let tmpPickerId = `FormEditor-InputTypePicker-${tmpHash}`;
 
+		// Remove the overlay
 		let tmpOverlaySet = this.pict.ContentAssignment.getElement(`#${tmpOverlayId}`);
 		let tmpOverlay = (Array.isArray(tmpOverlaySet) && tmpOverlaySet.length > 0) ? tmpOverlaySet[0] : tmpOverlaySet;
 		if (tmpOverlay && tmpOverlay.parentNode)
@@ -328,6 +332,14 @@ class PictViewFormEditorInputTypePicker extends libPictView
 			tmpOverlay.parentNode.removeChild(tmpOverlay);
 		}
 
+		// Remove the picker container (now a sibling of the overlay, not a child)
+		let tmpPickerSet = this.pict.ContentAssignment.getElement(`#${tmpPickerId}`);
+		let tmpPicker = (Array.isArray(tmpPickerSet) && tmpPickerSet.length > 0) ? tmpPickerSet[0] : tmpPickerSet;
+		if (tmpPicker && tmpPicker.parentNode)
+		{
+			tmpPicker.parentNode.removeChild(tmpPicker);
+		}
+
 		this._InputTypePickerContext = null;
 	}
 
@@ -491,8 +503,10 @@ class PictViewFormEditorInputTypePicker extends libPictView
 				}
 			}, { passive: false });
 
-			tmpOverlay.appendChild(tmpPickerContainer);
+			// Append overlay and picker as siblings on document.body so the picker
+			// is not inside the overlay's stacking context (which can trap pointer events).
 			document.body.appendChild(tmpOverlay);
+			document.body.appendChild(tmpPickerContainer);
 
 			// Position anchored to the InputType button in the properties panel
 			let tmpAnchorEl = document.getElementById(`FormEditor-PropsInputTypeBtn-${tmpHash}`);

package/source/views/PictView-FormEditor.js

@@ -991,6 +991,24 @@ class PictViewFormEditor extends libPictView
 	{
 		return `${this.pict.browserAddress}.views['${this.Hash}']`;
 	}
+
+	// Proxy methods for the InputType picker child view.
+	// The picker's inline onclick handlers reference the parent form editor's
+	// browser view ref, so these must exist on the parent to route calls through.
+	commitEditInputType(pInputTypeHash)
+	{
+		this._InputTypePickerView.commitEditInputType(pInputTypeHash);
+	}
+
+	closeInputTypePicker()
+	{
+		this._InputTypePickerView.closeInputTypePicker();
+	}
+
+	_onInputTypePickerSearch(pQuery)
+	{
+		this._InputTypePickerView._onInputTypePickerSearch(pQuery);
+	}
 }
 
 module.exports = PictViewFormEditor;

package/test/Pict-Section-FormEditor_tests.js

@@ -2192,6 +2192,212 @@ suite
 						fDone();
 					}
 				);
+				test
+				(
+					'Should insert before target when InsertPosition is before (same container)',
+					function (fDone)
+					{
+						let tmpPict = new libPict({ Product: 'TestFormEditor' });
+						tmpPict.AppData.FormConfig =
+						{
+							Scope: 'TestInsertBefore',
+							Sections:
+							[
+								{ Name: 'A', Hash: 'A', Groups: [] },
+								{ Name: 'B', Hash: 'B', Groups: [] },
+								{ Name: 'C', Hash: 'C', Groups: [] }
+							],
+							Descriptors: {}
+						};
+
+						let tmpView = tmpPict.addView('TestInsertBefore',
+						{
+							ViewIdentifier: 'TestInsertBefore',
+							ManifestDataAddress: 'AppData.FormConfig',
+							DefaultDestinationAddress: '#FormEditor-Container',
+							Renderables:
+							[
+								{
+									RenderableHash: 'FormEditor-Container',
+									TemplateHash: 'FormEditor-Container-Template',
+									DestinationAddress: '#FormEditor-Container',
+									RenderMethod: 'replace'
+								}
+							]
+						}, libPictSectionFormEditor);
+
+						tmpView.initialize();
+						tmpView.render();
+						tmpView._DragAndDropEnabled = true;
+
+						// Drag C(2) to A(0), InsertPosition=before → [C, A, B]
+						tmpView._DragState = { Type: 'section', Indices: [2], InsertPosition: 'before' };
+						tmpView._DragDropProvider.onDrop(
+							{ preventDefault: function() {} },
+							'section', 0
+						);
+
+						var tmpManifest = tmpPict.AppData.FormConfig;
+						Expect(tmpManifest.Sections[0].Hash).to.equal('C');
+						Expect(tmpManifest.Sections[1].Hash).to.equal('A');
+						Expect(tmpManifest.Sections[2].Hash).to.equal('B');
+
+						fDone();
+					}
+				);
+				test
+				(
+					'Should insert after target when InsertPosition is after (same container)',
+					function (fDone)
+					{
+						let tmpPict = new libPict({ Product: 'TestFormEditor' });
+						tmpPict.AppData.FormConfig =
+						{
+							Scope: 'TestInsertAfter',
+							Sections:
+							[
+								{ Name: 'A', Hash: 'A', Groups: [] },
+								{ Name: 'B', Hash: 'B', Groups: [] },
+								{ Name: 'C', Hash: 'C', Groups: [] }
+							],
+							Descriptors: {}
+						};
+
+						let tmpView = tmpPict.addView('TestInsertAfter',
+						{
+							ViewIdentifier: 'TestInsertAfter',
+							ManifestDataAddress: 'AppData.FormConfig',
+							DefaultDestinationAddress: '#FormEditor-Container',
+							Renderables:
+							[
+								{
+									RenderableHash: 'FormEditor-Container',
+									TemplateHash: 'FormEditor-Container-Template',
+									DestinationAddress: '#FormEditor-Container',
+									RenderMethod: 'replace'
+								}
+							]
+						}, libPictSectionFormEditor);
+
+						tmpView.initialize();
+						tmpView.render();
+						tmpView._DragAndDropEnabled = true;
+
+						// Drag C(2) to A(0), InsertPosition=after → [A, C, B]
+						tmpView._DragState = { Type: 'section', Indices: [2], InsertPosition: 'after' };
+						tmpView._DragDropProvider.onDrop(
+							{ preventDefault: function() {} },
+							'section', 0
+						);
+
+						var tmpManifest = tmpPict.AppData.FormConfig;
+						Expect(tmpManifest.Sections[0].Hash).to.equal('A');
+						Expect(tmpManifest.Sections[1].Hash).to.equal('C');
+						Expect(tmpManifest.Sections[2].Hash).to.equal('B');
+
+						fDone();
+					}
+				);
+				test
+				(
+					'Should handle forward drag with before and after positions',
+					function (fDone)
+					{
+						// Test forward drag A(0) to C(2) with before → [B, A, C]
+						let tmpPict = new libPict({ Product: 'TestFormEditor' });
+						tmpPict.AppData.FormConfig =
+						{
+							Scope: 'TestForwardBefore',
+							Sections:
+							[
+								{ Name: 'A', Hash: 'A', Groups: [] },
+								{ Name: 'B', Hash: 'B', Groups: [] },
+								{ Name: 'C', Hash: 'C', Groups: [] }
+							],
+							Descriptors: {}
+						};
+
+						let tmpView = tmpPict.addView('TestForwardBefore',
+						{
+							ViewIdentifier: 'TestForwardBefore',
+							ManifestDataAddress: 'AppData.FormConfig',
+							DefaultDestinationAddress: '#FormEditor-Container',
+							Renderables:
+							[
+								{
+									RenderableHash: 'FormEditor-Container',
+									TemplateHash: 'FormEditor-Container-Template',
+									DestinationAddress: '#FormEditor-Container',
+									RenderMethod: 'replace'
+								}
+							]
+						}, libPictSectionFormEditor);
+
+						tmpView.initialize();
+						tmpView.render();
+						tmpView._DragAndDropEnabled = true;
+
+						// Drag A(0) to C(2), InsertPosition=before → [B, A, C]
+						tmpView._DragState = { Type: 'section', Indices: [0], InsertPosition: 'before' };
+						tmpView._DragDropProvider.onDrop(
+							{ preventDefault: function() {} },
+							'section', 2
+						);
+
+						var tmpManifest = tmpPict.AppData.FormConfig;
+						Expect(tmpManifest.Sections[0].Hash).to.equal('B');
+						Expect(tmpManifest.Sections[1].Hash).to.equal('A');
+						Expect(tmpManifest.Sections[2].Hash).to.equal('C');
+
+						// Now test forward drag with after: reset
+						tmpManifest.Sections = [
+							{ Name: 'A', Hash: 'A', Groups: [] },
+							{ Name: 'B', Hash: 'B', Groups: [] },
+							{ Name: 'C', Hash: 'C', Groups: [] }
+						];
+
+						// Drag A(0) to C(2), InsertPosition=after → [B, C, A]
+						tmpView._DragState = { Type: 'section', Indices: [0], InsertPosition: 'after' };
+						tmpView._DragDropProvider.onDrop(
+							{ preventDefault: function() {} },
+							'section', 2
+						);
+
+						Expect(tmpManifest.Sections[0].Hash).to.equal('B');
+						Expect(tmpManifest.Sections[1].Hash).to.equal('C');
+						Expect(tmpManifest.Sections[2].Hash).to.equal('A');
+
+						fDone();
+					}
+				);
+				test
+				(
+					'Should compute insert index correctly via _computeInsertIndex helper',
+					function ()
+					{
+						let tmpPict = new libPict({ Product: 'TestFormEditor' });
+						let tmpView = tmpPict.addView('TestComputeIdx',
+						{
+							ViewIdentifier: 'TestComputeIdx'
+						}, libPictSectionFormEditor);
+						tmpView.initialize();
+
+						let tmpDD = tmpView._DragDropProvider;
+
+						// Same container, backward drag, insert before
+						Expect(tmpDD._computeInsertIndex(2, 0, true, 'before')).to.equal(0);
+						// Same container, backward drag, insert after
+						Expect(tmpDD._computeInsertIndex(2, 0, true, 'after')).to.equal(1);
+						// Same container, forward drag, insert before
+						Expect(tmpDD._computeInsertIndex(0, 2, true, 'before')).to.equal(1);
+						// Same container, forward drag, insert after
+						Expect(tmpDD._computeInsertIndex(0, 2, true, 'after')).to.equal(2);
+						// Cross container, insert before
+						Expect(tmpDD._computeInsertIndex(1, 0, false, 'before')).to.equal(0);
+						// Cross container, insert after
+						Expect(tmpDD._computeInsertIndex(1, 0, false, 'after')).to.equal(1);
+					}
+				);
 			}
 		);
 		suite