pict-section-form 1.3.4 → 1.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pict-section-form",
-    "version": "1.3.4",
+    "version": "1.3.5",
     "description": "Pict dynamic forms",
     "main": "source/Pict-Section-Form.js",
     "directories": {

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

@@ -330,7 +330,7 @@ class DynamicTabularData extends libPictProvider
 				// Render (source + dependent views) BEFORE solving so dependent DynamicColumns tables
 				// don't blank until the next edit, and the solve's DOM side effects survive. Matches
 				// the add/delete handlers' order.
-				this._repaintAfterRowReorder(tmpGroup);
+				this._repaintAfterRowReorder(pView, tmpGroup);
 			}
 		}
 	}
@@ -375,7 +375,7 @@ class DynamicTabularData extends libPictProvider
 				// (e.g. SetGroupVisibility hiding a validation message) act on the freshly rebuilt
 				// DOM and survive, and so dependent DynamicColumns tables don't blank until the next
 				// edit. Matches the add/delete handlers' order.
-				this._repaintAfterRowReorder(tmpGroup);
+				this._repaintAfterRowReorder(pView, tmpGroup);
 			}
 		}
 	}
@@ -425,7 +425,7 @@ class DynamicTabularData extends libPictProvider
 				// (e.g. SetGroupVisibility hiding a validation message) act on the freshly rebuilt
 				// DOM and survive, and so dependent DynamicColumns tables don't blank until the next
 				// edit. Matches the add/delete handlers' order.
-				this._repaintAfterRowReorder(tmpGroup);
+				this._repaintAfterRowReorder(pView, tmpGroup);
 			}
 		}
 	}
@@ -843,43 +843,34 @@ class DynamicTabularData extends libPictProvider
 	 *
 	 * @param {Object} pGroup - The reordered group (its RecordSetAddress drives dependents).
 	 */
-	_repaintAfterRowReorder(pGroup)
+	_repaintAfterRowReorder(pView, pGroup)
 	{
-		// Render every view that renders this record set as a table (the source table itself
-		// plus any sibling views bound to the same RecordSetAddress).
-		let tmpViewsToRender = this.pict.views.PictFormMetacontroller.filterViews(
-			(pViewToTestForGroup) =>
-			{
-				if (!pViewToTestForGroup.isPictSectionForm)
-				{
-					return false;
-				}
-				let tmpGroupsToTest = pViewToTestForGroup.getGroups();
-				for (let i = 0; i < tmpGroupsToTest.length; i++)
-				{
-					if (tmpGroupsToTest[i].RecordSetAddress == pGroup.RecordSetAddress)
-					{
-						return true;
-					}
-				}
-				return false;
-			});
-		// Re-rendering an entity-selector table clobbers its selected values in the
-		// model, so preserve them across the render.
-		this._renderViewsPreservingRecordSet(pGroup.RecordSetAddress, tmpViewsToRender);
-
-		// Rebuild any OTHER views whose DynamicColumns are sourced from this record set
-		// HERE, in the render phase -- BEFORE the marshal below -- so the column DOM is
-		// correct (and re-labeled to the new order) when the marshal fills it. Without
-		// this the dependent table is only rebuilt mid-marshal (onDataMarshalToForm),
-		// which renders AFTER the cells were filled and blanks them until the next edit.
+		// A reorder (move up/down/set-index) preserves the row COUNT -- the source table's DOM rows
+		// already exist; only which row holds which value changes. A full source-view render() would
+		// tear down and re-create every cell widget, and each entity-selector select2 re-init costs
+		// roughly O(document size), so on a large form that is SECONDS per move. Skip the source
+		// render and let the marshal below push the reordered model values into the existing DOM rows
+		// in place. (Add/delete change the row count and still render via their own paths.) Skipping
+		// the render also removes the need for the snapshot/restore in _renderViewsPreservingRecordSet:
+		// with no destructive render, the entity values are never clobbered.
+
+		// Dependent DynamicColumns views still need their generated column labels re-resolved for the
+		// new order (cheap -- those tables carry no entity widgets).
 		this._rebuildDependentDynamicColumnViews(pGroup.RecordSetAddress);
 
-		// Run the solver
+		// Run the solver, then marshal the model back out to the existing form DOM.
 		this.pict.providers.DynamicSolver.solveViews();
-
-		// We've re-rendered but we don't know what needs to be marshaled based on the solve that ran above so marshal everything
 		this.pict.views.PictFormMetacontroller.marshalFormSections();
+
+		// marshalFormSections updates simple cells in place, but a stateful widget (an entity
+		// selector's select2) will not switch to a reordered value whose <option> isn't the one it
+		// currently shows. Ask each input provider to repaint its display for the new row order:
+		// entity selectors force their select2 to the row's current value, everything else no-ops.
+		// Cheap (in-place value set, no widget teardown) versus the full re-render this replaced.
+		if (pView && (typeof pView.runInputProviderFunctions === 'function'))
+		{
+			pView.runInputProviderFunctions('onTabularRowReorderRepaint', null, null, this.fable.getUUID());
+		}
 	}
 }
 

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

@@ -156,6 +156,45 @@ class PictInputExtensionProvider extends libPictProvider
 		return true;
 	}
 
+	/**
+	 * Repaint this input's rendered display from the model after a tabular row REORDER
+	 * (move up/down/set-index), which preserves the row count but changes which row holds
+	 * which value. A plain marshal updates simple inputs in place, but stateful widgets
+	 * (e.g. an entity-selector's select2) will not switch to a value whose option isn't the
+	 * one currently shown; those providers override this to force their display to the row's
+	 * current value. Default is a no-op.
+	 *
+	 * @param {Object} pView - The view object.
+	 * @param {Object} pGroup - The group definition object.
+	 * @param {number} pRow - The row index.
+	 * @param {Object} pInput - The input object.
+	 * @param {any} pValue - The value to display.
+	 * @param {string} pHTMLSelector - The HTML selector.
+	 * @param {string} pTransactionGUID - The transaction GUID for the event dispatch.
+	 * @returns {boolean} - Returns true.
+	 */
+	onTabularRowReorderRepaint(pView, pGroup, pRow, pInput, pValue, pHTMLSelector, pTransactionGUID)
+	{
+		return true;
+	}
+
+	/**
+	 * Tabular sibling of onTabularRowReorderRepaint. Default is a no-op.
+	 *
+	 * @param {Object} pView - The view object.
+	 * @param {Object} pGroup - The group definition object.
+	 * @param {Object} pInput - The input object.
+	 * @param {any} pValue - The value to display.
+	 * @param {string} pHTMLSelector - The HTML selector.
+	 * @param {number} pRowIndex - The row index of the tabular data.
+	 * @param {string} pTransactionGUID - The transaction GUID for the event dispatch.
+	 * @returns {boolean} - Returns true.
+	 */
+	onTabularRowReorderRepaintTabular(pView, pGroup, pInput, pValue, pHTMLSelector, pRowIndex, pTransactionGUID)
+	{
+		return true;
+	}
+
 	/**
 	 * Handles data requests for the Pict-Provider-InputExtension.
 	 *

package/test/PictSectionForm-Tabular-Features_tests.js

@@ -1764,4 +1764,55 @@ suite('PictSectionForm Tabular Features', () =>
 			}, fDone);
 		});
 	});
+
+	suite('Row reorder performance (move skips the full source re-render)', () =>
+	{
+		test('moveDynamicTableRowUp reorders in place without full-rendering the source view, and repaints inputs via the hook', (fDone) =>
+		{
+			let App = makeApplication({
+				Hash: 'Students',
+				Layout: 'Tabular',
+				RecordSetAddress: 'Students',
+				RecordManifest: 'StudentEditor'
+			});
+			bootstrap(App, (_Pict) =>
+			{
+				let tmpView = _Pict.views['PictSectionForm-Class'];
+				let tmpDTD = _Pict.providers.DynamicTabularData;
+
+				// A move must NOT go through the expensive full source-view render -- that path tears
+				// down and re-initializes every cell widget (each entity-selector select2 re-init is
+				// what made BatchSheetCombined take seconds per move)...
+				let tmpFullRenderCalls = 0;
+				let tmpOriginalRender = tmpDTD._renderViewsPreservingRecordSet;
+				tmpDTD._renderViewsPreservingRecordSet = function (...pArgs)
+				{
+					tmpFullRenderCalls++;
+					return tmpOriginalRender.apply(this, pArgs);
+				};
+				// ...and it MUST ask the input providers to repaint their display for the new order.
+				let tmpRepaintHookCalls = 0;
+				let tmpOriginalRun = tmpView.runInputProviderFunctions;
+				tmpView.runInputProviderFunctions = function (pFunctionName)
+				{
+					if (pFunctionName === 'onTabularRowReorderRepaint') { tmpRepaintHookCalls++; }
+					return tmpOriginalRun.apply(this, arguments);
+				};
+
+				let tmpBefore = _Pict.AppData.Students.map((pRow) => pRow.StudentName);
+				tmpDTD.moveDynamicTableRowUp(tmpView, 0, 1); // 'Bob' (index 1) moves up to index 0
+
+				let tmpAfter = _Pict.AppData.Students.map((pRow) => pRow.StudentName);
+
+				tmpDTD._renderViewsPreservingRecordSet = tmpOriginalRender;
+				tmpView.runInputProviderFunctions = tmpOriginalRun;
+
+				Expect(tmpBefore[0]).to.equal('Alice', 'sanity: row 0 started as Alice');
+				Expect(tmpAfter[0]).to.equal('Bob', 'moved row is now first in the model');
+				Expect(tmpAfter[1]).to.equal('Alice', 'displaced row shifted down');
+				Expect(tmpFullRenderCalls).to.equal(0, 'a reorder must not full-render the source view (the slow select2 teardown)');
+				Expect(tmpRepaintHookCalls).to.equal(1, 'a reorder repaints inputs in place via the onTabularRowReorderRepaint hook');
+			}, fDone);
+		});
+	});
 });