Keep accumulator previews stable when reordered

web/accumulator_preview.js

@@ -82,6 +82,40 @@ function imageEntries(node) {
     return entries.filter((entry) => entry?.has_image).slice(0, previewLimit(node));
 }
 
+function entryKey(entry) {
+    const key = String(entry?.preview_key || "").trim();
+    if (key) return `key:${key}`;
+    const id = String(entry?.id || "").trim();
+    if (id) return `id:${id}`;
+    return `index:${entry?.index ?? ""}`;
+}
+
+function buildImageMap(entries, images, previous = new Map()) {
+    const next = new Map(previous);
+    const imageEntries = asArray(entries).filter((entry) => entry?.has_image);
+    asArray(images).filter(Boolean).forEach((image, index) => {
+        const directKey = String(image?.preview_key || "").trim();
+        if (directKey) {
+            next.set(`key:${directKey}`, image);
+            return;
+        }
+        const entryId = String(image?.entry_id || "").trim();
+        if (entryId) {
+            next.set(`id:${entryId}`, image);
+            return;
+        }
+        const entry = imageEntries[index];
+        if (entry) next.set(entryKey(entry), image);
+    });
+    return next;
+}
+
+function imageParamsForEntry(node, entry, fallbackIndex) {
+    const keyed = node._sxapImageByKey?.get(entryKey(entry));
+    if (keyed) return keyed;
+    return (node._sxapImages || [])[fallbackIndex];
+}
+
 function imageUrl(params) {
     const query = new URLSearchParams(params).toString();
     const preview = app.getPreviewFormatParam?.() || "";
@@ -322,7 +356,6 @@ function renderGrid(node) {
     const grid = node._sxapGridEl;
     if (!grid) return;
     const entries = imageEntries(node);
-    const images = node._sxapImages || [];
     grid.replaceChildren();
 
     if (!entries.length) {
@@ -332,7 +365,7 @@ function renderGrid(node) {
         grid.appendChild(empty);
     } else {
         entries.forEach((entry, index) => {
-            grid.appendChild(renderCell(node, entry, images[index], index));
+            grid.appendChild(renderCell(node, entry, imageParamsForEntry(node, entry, index), index));
         });
     }
 
@@ -364,6 +397,7 @@ function applyData(node, data, status = "") {
     if (Object.prototype.hasOwnProperty.call(data || {}, "images")) {
         node._sxapImages = asArray(data.images).filter(Boolean);
     }
+    node._sxapImageByKey = buildImageMap(node._sxapEntries, node._sxapImages, node._sxapImageByKey);
     setStatus(node, status || data?.status || "");
     renderGrid(node);
 }
@@ -532,6 +566,7 @@ function setupNode(node) {
         node._sxapStatusEl = status;
         node._sxapEntries = node._sxapEntries || [];
         node._sxapImages = node._sxapImages || [];
+        node._sxapImageByKey = node._sxapImageByKey || new Map();
         node._sxapLastCount = -1;
         recomputeSize(node);
         node._sxapWidget = node.addDOMWidget("accumulator_grid", "div", wrap, {