@extend-ai/react-xlsx 0.16.3 → 0.16.4

package/dist/index.cjs

@@ -3114,6 +3114,17 @@ function applyChartOrigins(chartsByWorkbookSheetIndex, chartOriginsById, archive
     });
   }
 }
+function hydrateWorkbookChartStyles(chartsByWorkbookSheetIndex, imageAssets) {
+  const chartOriginsById = /* @__PURE__ */ new Map();
+  applyChartOrigins(chartsByWorkbookSheetIndex, chartOriginsById, imageAssets.archive, imageAssets.sheetOrigins);
+  for (const charts of chartsByWorkbookSheetIndex) {
+    for (const chart of charts) {
+      applyChartStyleFromXml(chart, chart.chartPath, imageAssets.archive, imageAssets.themePalette);
+      applyBuiltinChartDefaults(chart, imageAssets.themePalette);
+    }
+  }
+  return chartOriginsById;
+}
 function loadWorkbookChartAssets(workbook, imageAssets, visibleSheetIndexByWorkbookSheetIndex, showHiddenSheets = false) {
   const excludedChartIds = /* @__PURE__ */ new Set();
   const chartsByWorkbookSheetIndex = Array.from({ length: workbook.sheetCount }, (_, workbookSheetIndex) => {
@@ -3214,21 +3225,14 @@ function loadWorkbookChartAssets(workbook, imageAssets, visibleSheetIndexByWorkb
   });
   const chartsheets = Array.isArray(workbook.chartsheets) ? workbook.chartsheets.map((entry, index) => normalizeChartsheet(entry, index)) : [];
   const tabs = buildTabs(workbook, chartsheets, visibleSheetIndexByWorkbookSheetIndex, showHiddenSheets);
-  const chartOriginsById = /* @__PURE__ */ new Map();
+  const chartOriginsById = imageAssets ? hydrateWorkbookChartStyles(chartsByWorkbookSheetIndex, imageAssets) : /* @__PURE__ */ new Map();
   if (imageAssets) {
-    applyChartOrigins(chartsByWorkbookSheetIndex, chartOriginsById, imageAssets.archive, imageAssets.sheetOrigins);
     for (let index = 0; index < chartsByWorkbookSheetIndex.length; index += 1) {
       chartsByWorkbookSheetIndex[index] = (chartsByWorkbookSheetIndex[index] ?? []).filter((chart) => !excludedChartIds.has(chart.id));
     }
     for (const id of excludedChartIds) {
       chartOriginsById.delete(id);
     }
-    for (const charts of chartsByWorkbookSheetIndex) {
-      for (const chart of charts) {
-        applyChartStyleFromXml(chart, chart.chartPath, imageAssets.archive, imageAssets.themePalette);
-        applyBuiltinChartDefaults(chart, imageAssets.themePalette);
-      }
-    }
   } else {
     for (let index = 0; index < chartsByWorkbookSheetIndex.length; index += 1) {
       chartsByWorkbookSheetIndex[index] = (chartsByWorkbookSheetIndex[index] ?? []).filter((chart) => !excludedChartIds.has(chart.id));
@@ -5942,11 +5946,11 @@ function parseShapeNode(shapeNode, fallbackAnchor, drawingRelationships, theme,
     zIndex
   };
 }
-function parseAnchorContents(anchorNode, fallbackAnchor, drawingRelationships, archive, contentTypes, objectUrls, workbookSheetIndex, theme, ids, imageOriginsById, anchorIndex, sheetState, parentGroup = null) {
+function parseAnchorContents(anchorNode, fallbackAnchor, drawingRelationships, archive, contentTypes, objectUrls, workbookSheetIndex, theme, ids, imageOriginsById, anchorIndex, sheetState, drawingPath, parentGroup = null, picturePath = []) {
   const images = [];
   const shapes = [];
   const mediaPaths = /* @__PURE__ */ new Set();
-  Array.from(anchorNode.childNodes).filter(isElementNode2).forEach((child) => {
+  Array.from(anchorNode.childNodes).filter(isElementNode2).forEach((child, childIndex) => {
     if (child.localName === "pic") {
       const imageId = `sheet-${workbookSheetIndex}-${ids.image}`;
       const parsed = parsePictureNode(
@@ -5967,6 +5971,8 @@ function parseAnchorContents(anchorNode, fallbackAnchor, drawingRelationships, a
         mediaPaths.add(parsed.mediaPath);
         imageOriginsById.set(imageId, {
           anchorIndex,
+          drawingPath,
+          picturePath: [...picturePath, childIndex],
           workbookSheetIndex
         });
       }
@@ -6026,7 +6032,9 @@ function parseAnchorContents(anchorNode, fallbackAnchor, drawingRelationships, a
       imageOriginsById,
       anchorIndex,
       sheetState,
-      nextGroup
+      drawingPath,
+      nextGroup,
+      [...picturePath, childIndex]
     );
     parsedGroup.images.forEach((image) => images.push(image));
     parsedGroup.shapes.forEach((shape) => shapes.push(shape));
@@ -6082,7 +6090,8 @@ function parseDrawingObjects(archive, contentTypes, drawingPath, objectUrls, wor
       ids,
       imageOriginsById,
       anchorIndex,
-      sheetState
+      sheetState,
+      drawingPath
     );
     parsed.images.forEach((image) => images.push(image));
     parsed.shapes.forEach((shape) => shapes.push(shape));
@@ -6241,6 +6250,9 @@ function updateWorkbookImageAnchor(assets, imageId, anchor) {
   }
   const attachments = assets.sheetOrigins[origin.workbookSheetIndex]?.attachments ?? [];
   for (const attachment of attachments) {
+    if (attachment.drawingPath !== origin.drawingPath) {
+      continue;
+    }
     const drawingXml = readArchiveText2(assets.archive, attachment.drawingPath);
     if (!drawingXml) {
       continue;
@@ -6251,10 +6263,45 @@ function updateWorkbookImageAnchor(assets, imageId, anchor) {
     }
     const anchorNodes = createImageAnchorNodes(drawingDocument);
     const anchorNode = anchorNodes[origin.anchorIndex];
-    if (!anchorNode || !getFirstChild(anchorNode, "pic")) {
+    if (!anchorNode) {
       continue;
     }
-    updateAnchorNode2(anchorNode, anchor);
+    let pictureNode = anchorNode;
+    let parentGroup = null;
+    let groupAnchor = parseAnchor(anchorNode);
+    for (const childIndex of origin.picturePath) {
+      const child = Array.from(pictureNode.childNodes).filter(isElementNode2)[childIndex];
+      if (!child || !groupAnchor) {
+        break;
+      }
+      pictureNode = child;
+      if (child.localName === "grpSp") {
+        parentGroup = parseGroupTransform(
+          child,
+          parentGroup,
+          groupAnchor,
+          assets.sheetStatesByWorkbookSheetIndex[origin.workbookSheetIndex] ?? null
+        );
+        groupAnchor = rectToAbsoluteAnchor(parentGroup);
+      }
+    }
+    if (pictureNode.localName !== "pic") {
+      continue;
+    }
+    if (parentGroup) {
+      const transform = getFirstDescendant(pictureNode, "xfrm");
+      const off = transform ? getFirstChild(transform, "off") : null;
+      const ext = transform ? getFirstChild(transform, "ext") : null;
+      if (anchor.kind !== "absolute" || !off || !ext || !parentGroup.scaleX || !parentGroup.scaleY) {
+        continue;
+      }
+      off.setAttribute("x", String(Math.round(parentGroup.chX + (anchor.positionEmu.x - parentGroup.x) / parentGroup.scaleX)));
+      off.setAttribute("y", String(Math.round(parentGroup.chY + (anchor.positionEmu.y - parentGroup.y) / parentGroup.scaleY)));
+      ext.setAttribute("cx", String(Math.max(0, Math.round(anchor.sizeEmu.cx / parentGroup.scaleX))));
+      ext.setAttribute("cy", String(Math.max(0, Math.round(anchor.sizeEmu.cy / parentGroup.scaleY))));
+    } else {
+      updateAnchorNode2(anchorNode, anchor);
+    }
     assets.archive[attachment.drawingPath] = (0, import_fflate2.strToU8)(serializeXml2(drawingDocument));
     assets.dirtyArchivePaths.add(normalizeArchivePath2(attachment.drawingPath));
     const imageList = assets.imagesByWorkbookSheetIndex[origin.workbookSheetIndex] ?? [];
@@ -6365,15 +6412,21 @@ function appendSheetDrawingReference(sheetDocument, relationshipId) {
   }
   const drawingNode = sheetDocument.createElementNS(SPREADSHEET_NS, "drawing");
   drawingNode.setAttributeNS(REL_NS, "r:id", relationshipId);
-  const extLst = getFirstChild(worksheet, "extLst");
-  if (extLst) {
-    worksheet.insertBefore(drawingNode, extLst);
-    return;
-  }
-  worksheet.appendChild(drawingNode);
+  const successorNames = /* @__PURE__ */ new Set([
+    "legacyDrawing",
+    "legacyDrawingHF",
+    "picture",
+    "oleObjects",
+    "controls",
+    "webPublishItems",
+    "tableParts",
+    "extLst"
+  ]);
+  const successor = Array.from(worksheet.childNodes).find((node) => isElementNode2(node) && node.namespaceURI === SPREADSHEET_NS && successorNames.has(node.localName));
+  worksheet.insertBefore(drawingNode, successor ?? null);
 }
 function mergeWorkbookImageAssets(savedBytes, sourceAssets, sheetOrigins) {
-  if (!sourceAssets || sourceAssets.dirtyArchivePaths.size === 0) {
+  if (!sourceAssets) {
     return cloneBytes(savedBytes);
   }
   try {
@@ -6384,9 +6437,31 @@ function mergeWorkbookImageAssets(savedBytes, sourceAssets, sheetOrigins) {
     if (!targetContentTypesDocument) {
       return cloneBytes(savedBytes);
     }
+    const copiedParts = /* @__PURE__ */ new Set();
+    const copyDrawingPart = (path) => {
+      const normalizedPath = normalizeArchivePath2(path);
+      const bytes = sourceAssets.archive[normalizedPath];
+      if (!bytes || copiedParts.has(normalizedPath)) {
+        return;
+      }
+      copiedParts.add(normalizedPath);
+      archive[normalizedPath] = cloneBytes(bytes);
+      mergeContentTypeForPath(targetContentTypesDocument, originalContentTypesDocument, normalizedPath);
+      const relsPath = relsPathForDocument(normalizedPath);
+      const relsBytes = sourceAssets.archive[relsPath];
+      if (!relsBytes) {
+        return;
+      }
+      archive[relsPath] = cloneBytes(relsBytes);
+      mergeContentTypeForPath(targetContentTypesDocument, originalContentTypesDocument, relsPath);
+      for (const relationship of parseRelationships(sourceAssets.archive, relsPath, normalizedPath).values()) {
+        if (relationship.targetMode !== "External" && !relationship.type.endsWith("/hyperlink")) {
+          copyDrawingPart(relationship.target);
+        }
+      }
+    };
     sheetOrigins.forEach((origin, workbookSheetIndex) => {
-      const hasDirtyAttachment = origin?.attachments.some((attachment) => sourceAssets.dirtyArchivePaths.has(normalizeArchivePath2(attachment.drawingPath)) || attachment.drawingRelsPath && sourceAssets.dirtyArchivePaths.has(normalizeArchivePath2(attachment.drawingRelsPath)) || attachment.mediaPaths.some((path) => sourceAssets.dirtyArchivePaths.has(normalizeArchivePath2(path))));
-      if (!origin?.attachments.length || !hasDirtyAttachment) {
+      if (!origin?.attachments.length) {
         return;
       }
       const currentSheet = workbookSheets[workbookSheetIndex];
@@ -6409,23 +6484,7 @@ function mergeWorkbookImageAssets(savedBytes, sourceAssets, sheetOrigins) {
         if (!drawingBytes) {
           return;
         }
-        archive[attachment.drawingPath] = cloneBytes(drawingBytes);
-        mergeContentTypeForPath(targetContentTypesDocument, originalContentTypesDocument, attachment.drawingPath);
-        if (attachment.drawingRelsPath) {
-          const drawingRelsBytes = sourceAssets.archive[attachment.drawingRelsPath];
-          if (drawingRelsBytes) {
-            archive[attachment.drawingRelsPath] = cloneBytes(drawingRelsBytes);
-            mergeContentTypeForPath(targetContentTypesDocument, originalContentTypesDocument, attachment.drawingRelsPath);
-          }
-        }
-        attachment.mediaPaths.forEach((mediaPath) => {
-          const mediaBytes = sourceAssets.archive[mediaPath];
-          if (!mediaBytes) {
-            return;
-          }
-          archive[mediaPath] = cloneBytes(mediaBytes);
-          mergeContentTypeForPath(targetContentTypesDocument, originalContentTypesDocument, mediaPath);
-        });
+        copyDrawingPart(attachment.drawingPath);
         const relationshipId = nextRelationshipId(relDocument);
         const relationshipNode = relDocument.createElementNS(PKG_REL_NS, "Relationship");
         relationshipNode.setAttribute("Id", relationshipId);
@@ -6487,7 +6546,7 @@ function markerFromOffset(offsetPx, getSizePx) {
   let remaining = Math.max(0, offsetPx);
   let index = 0;
   while (remaining > 0) {
-    const size = Math.max(1, getSizePx(index));
+    const size = Math.max(0, getSizePx(index));
     if (remaining < size) {
       break;
     }
@@ -8524,6 +8583,10 @@ function useXlsxViewerController(options) {
       if (requestToken !== chartLoadRequestTokenRef.current) {
         return;
       }
+      if (imageAssetsRef.current && !effectiveSkipXmlParsing) {
+        const chartOriginsById = hydrateWorkbookChartStyles(result.chartsByWorkbookSheetIndex, imageAssetsRef.current);
+        chartAssetsRef.current = { ...result, chartOriginsById };
+      }
       setChartsByWorkbookSheetIndex(result.chartsByWorkbookSheetIndex);
       setChartsheets(result.chartsheets);
       setTabs(result.tabs);
@@ -8739,13 +8802,14 @@ function useXlsxViewerController(options) {
             return;
           }
           setImageAssets(workerImageAssets);
+          const chartOriginsById = workerImageAssets ? hydrateWorkbookChartStyles(snapshot.chartsByWorkbookSheetIndex, workerImageAssets) : /* @__PURE__ */ new Map();
           setFormControlsByWorkbookSheetIndex(snapshot.formControlsByWorkbookSheetIndex);
           setWorkbook(null);
           setSheets(snapshot.sheets);
           setChartsByWorkbookSheetIndex(snapshot.chartsByWorkbookSheetIndex);
           setChartsheets(snapshot.chartsheets);
           setTabs(snapshot.tabs);
-          chartAssetsRef.current = null;
+          chartAssetsRef.current = { ...snapshot, chartOriginsById };
           setWorkerTablesByWorkbookSheetIndex(snapshot.tablesByWorkbookSheetIndex);
           setShouldAutoCalculate(false);
           setIsWorkerBacked(true);
@@ -8957,6 +9021,9 @@ function useXlsxViewerController(options) {
         if (!effectiveSkipXmlParsing && hasIncompleteWorkerChartSnapshot(snapshot)) {
           throw new Error("Worker chart payload incomplete");
         }
+        const workerImageAssets = effectiveSkipXmlParsing ? null : parseWorkbookImageAssets(new Uint8Array(deferredBuffer));
+        setImageAssets(workerImageAssets);
+        const chartOriginsById = workerImageAssets ? hydrateWorkbookChartStyles(snapshot.chartsByWorkbookSheetIndex, workerImageAssets) : /* @__PURE__ */ new Map();
         deferredBufferRef.current = null;
         setDeferredLoadFileSize(null);
         setWorkbook(null);
@@ -8964,7 +9031,7 @@ function useXlsxViewerController(options) {
         setChartsByWorkbookSheetIndex(snapshot.chartsByWorkbookSheetIndex);
         setChartsheets(snapshot.chartsheets);
         setTabs(snapshot.tabs);
-        chartAssetsRef.current = null;
+        chartAssetsRef.current = { ...snapshot, chartOriginsById };
         setFormControlsByWorkbookSheetIndex(snapshot.formControlsByWorkbookSheetIndex);
         setWorkerTablesByWorkbookSheetIndex(snapshot.tablesByWorkbookSheetIndex);
         setShouldAutoCalculate(false);
@@ -10055,7 +10122,7 @@ function useXlsxViewerController(options) {
       width: Math.max(1, right - left)
     };
   }, [getColumnWidthPx, getRowHeightPx]);
-  const setChartRect = React.useCallback((id, rect) => {
+  const setChartRect = React.useCallback((id, rect, layout) => {
     const hydratedChartAssets = ensureChartAssetsHydrated(workbook, sheets);
     console.info("[react-xlsx debug] setChartRect", {
       hasActiveSheet: Boolean(activeSheet),
@@ -10084,8 +10151,8 @@ function useXlsxViewerController(options) {
     const nextAnchor = rectToImageAnchor(rect, currentChart.anchor, {
       contentOffsetLeft: GRID_ROW_HEADER_WIDTH,
       contentOffsetTop: GRID_HEADER_HEIGHT,
-      getColumnWidthPx: (col) => getColumnWidthPx(worksheet, col),
-      getRowHeightPx: (row) => getRowHeightPx(worksheet, row)
+      getColumnWidthPx: (col) => layout?.columnWidths[col] ?? getColumnWidthPx(worksheet, col),
+      getRowHeightPx: (row) => layout?.rowHeights[row] ?? getRowHeightPx(worksheet, row)
     });
     recordHistoryBeforeMutation();
     const didUpdateAnchor = updateWorkbookChartAnchor(imageAssetsRef.current, hydratedChartAssets, id, nextAnchor);
@@ -10104,7 +10171,7 @@ function useXlsxViewerController(options) {
     sheets,
     workbook
   ]);
-  const setImageRect = React.useCallback((id, rect) => {
+  const setImageRect = React.useCallback((id, rect, layout) => {
     if (readOnly || !workbook || !activeSheet || !imageAssetsRef.current) {
       return;
     }
@@ -10116,8 +10183,8 @@ function useXlsxViewerController(options) {
     const nextAnchor = rectToImageAnchor(rect, currentImage.anchor, {
       contentOffsetLeft: GRID_ROW_HEADER_WIDTH,
       contentOffsetTop: GRID_HEADER_HEIGHT,
-      getColumnWidthPx: (col) => getColumnWidthPx(worksheet, col),
-      getRowHeightPx: (row) => getRowHeightPx(worksheet, row)
+      getColumnWidthPx: (col) => layout?.columnWidths[col] ?? getColumnWidthPx(worksheet, col),
+      getRowHeightPx: (row) => layout?.rowHeights[row] ?? getRowHeightPx(worksheet, row)
     });
     recordHistoryBeforeMutation();
     if (!updateWorkbookImageAnchor(imageAssetsRef.current, id, nextAnchor)) {
@@ -24197,6 +24264,8 @@ function XlsxGrid({
   const pendingSelectionDragCleanupRef = React4.useRef(null);
   const fillDragCleanupRef = React4.useRef(null);
   const cachedScrollerRectRef = React4.useRef(null);
+  const installImageInteractionListenersRef = React4.useRef(installImageInteractionListeners);
+  const installChartInteractionListenersRef = React4.useRef(installChartInteractionListeners);
   const imageInteractionCleanupRef = React4.useRef(null);
   const imageInteractionRef = React4.useRef(null);
   const chartInteractionCleanupRef = React4.useRef(null);
@@ -25184,6 +25253,10 @@ function XlsxGrid({
   React4.useEffect(() => {
     readOnlyRef.current = readOnly;
   }, [readOnly]);
+  React4.useLayoutEffect(() => {
+    installImageInteractionListenersRef.current = installImageInteractionListeners;
+    installChartInteractionListenersRef.current = installChartInteractionListeners;
+  });
   React4.useEffect(() => {
     chartPreviewRectRef.current = chartPreviewRect;
   }, [chartPreviewRect]);
@@ -29297,7 +29370,7 @@ function XlsxGrid({
     setInteractionMode("select");
     document.body.style.cursor = "move";
     document.body.style.userSelect = "none";
-    installChartInteractionListeners(event.pointerId);
+    installChartInteractionListenersRef.current(event.pointerId);
   }, [focusGrid, selectChart]);
   const startChartResize = React4.useCallback((event, chart, rect, handle) => {
     if (readOnlyRef.current || chart.editable === false || event.button !== 0) {
@@ -29323,7 +29396,7 @@ function XlsxGrid({
     setInteractionMode("select");
     document.body.style.cursor = String(IMAGE_HANDLE_CURSOR[handle]);
     document.body.style.userSelect = "none";
-    installChartInteractionListeners(event.pointerId);
+    installChartInteractionListenersRef.current(event.pointerId);
   }, [focusGrid, selectChart]);
   const startImageMove = React4.useCallback((event, image, rect) => {
     if (event.button !== 0) {
@@ -29351,7 +29424,7 @@ function XlsxGrid({
     setInteractionMode("select");
     document.body.style.cursor = "move";
     document.body.style.userSelect = "none";
-    installImageInteractionListeners(event.pointerId);
+    installImageInteractionListenersRef.current(event.pointerId);
   }, [focusGrid, selectImage]);
   const startImageResize = React4.useCallback((event, image, rect, handle) => {
     if (readOnlyRef.current || image.editable === false || event.button !== 0) {
@@ -29377,7 +29450,7 @@ function XlsxGrid({
     setInteractionMode("select");
     document.body.style.cursor = String(IMAGE_HANDLE_CURSOR[handle]);
     document.body.style.userSelect = "none";
-    installImageInteractionListeners(event.pointerId);
+    installImageInteractionListenersRef.current(event.pointerId);
   }, [focusGrid, selectImage]);
   const handleImageClick = React4.useCallback((image) => {
     if (skipNextImageClickRef.current === image.id) {
@@ -30745,7 +30818,10 @@ function XlsxGrid({
           skipNextImageClickRef.current = interaction.imageId;
         }
         if (interaction.didMove && finalRect) {
-          setImageRect(interaction.imageId, toLogicalRect(finalRect));
+          setImageRect(interaction.imageId, toLogicalRect(finalRect), {
+            columnWidths: actualColWidths,
+            rowHeights: actualRowHeights
+          });
         }
       }
       imagePreviewRectRef.current = null;
@@ -30822,7 +30898,10 @@ function XlsxGrid({
           skipNextChartClickRef.current = interaction.chartId;
         }
         if (interaction.didMove && finalRect) {
-          setChartRect(interaction.chartId, toLogicalRect(finalRect));
+          setChartRect(interaction.chartId, toLogicalRect(finalRect), {
+            columnWidths: actualColWidths,
+            rowHeights: actualRowHeights
+          });
         }
       }
       chartPreviewRectRef.current = null;