@extend-ai/react-docx 0.7.2 → 0.7.4

package/dist/index.js

@@ -4581,11 +4581,13 @@ var BASE_DOC_STYLE = {
   transition: "box-shadow 0.2s ease"
 };
 var TRACKED_CHANGE_GUTTER_WIDTH_PX = 300;
-var TRACKED_CHANGE_GUTTER_CARD_LEFT_PX = 14;
+var TRACKED_CHANGE_GUTTER_CARD_LEFT_PX = 48;
 var TRACKED_CHANGE_GUTTER_CARD_RIGHT_PX = 12;
 var TRACKED_CHANGE_GUTTER_CARD_GAP_PX = 4;
 var TRACKED_CHANGE_GUTTER_CARD_MIN_HEIGHT_PX = 30;
 var TRACKED_CHANGE_GUTTER_BEND_OFFSET_PX = 8;
+var TRACKED_CHANGE_GUTTER_CONNECTOR_LANE_GAP_PX = 7;
+var TRACKED_CHANGE_GUTTER_CONNECTOR_LANE_COUNT = 5;
 var INITIAL_PAGINATION_STABILITY_IDLE_MS = 240;
 function scheduleDomWrite(callback) {
   if (typeof window !== "undefined" && typeof window.requestAnimationFrame === "function") {
@@ -18384,6 +18386,51 @@ function estimateTrackedChangeCardHeight(change) {
   const lines = Math.min(2, Math.max(1, Math.ceil(snippet.length / 42)));
   return Math.max(TRACKED_CHANGE_GUTTER_CARD_MIN_HEIGHT_PX, 22 + lines * 11);
 }
+function assignGutterConnectorLanes(entries) {
+  if (entries.length <= 1) {
+    entries.forEach((entry) => {
+      entry.connectorLane = 0;
+    });
+    return;
+  }
+  const intervalPaddingPx = 3;
+  const laneEndY = Array.from(
+    { length: TRACKED_CHANGE_GUTTER_CONNECTOR_LANE_COUNT },
+    () => Number.NEGATIVE_INFINITY
+  );
+  const routedEntries = entries.map((entry, index) => {
+    const cardCenterY = entry.top + entry.heightPx / 2;
+    return {
+      entry,
+      index,
+      startY: Math.min(entry.anchorY, cardCenterY) - intervalPaddingPx,
+      endY: Math.max(entry.anchorY, cardCenterY) + intervalPaddingPx
+    };
+  }).sort((left, right) => {
+    const startDelta = left.startY - right.startY;
+    if (startDelta !== 0) {
+      return startDelta;
+    }
+    const endDelta = left.endY - right.endY;
+    if (endDelta !== 0) {
+      return endDelta;
+    }
+    return left.index - right.index;
+  });
+  routedEntries.forEach((route) => {
+    let laneIndex = laneEndY.findIndex(
+      (laneEnd) => route.startY > laneEnd + intervalPaddingPx
+    );
+    if (laneIndex < 0) {
+      laneIndex = laneEndY.reduce(
+        (bestLane, laneEnd, index) => laneEnd < laneEndY[bestLane] ? index : bestLane,
+        0
+      );
+    }
+    route.entry.connectorLane = laneIndex;
+    laneEndY[laneIndex] = Math.max(laneEndY[laneIndex], route.endY);
+  });
+}
 function layoutTrackedChangesForPage(annotations, anchorByChangeId, cardHeightsByChangeId, pageWidthPx, pageHeightPx) {
   if (annotations.length === 0) {
     return [];
@@ -18419,7 +18466,8 @@ function layoutTrackedChangesForPage(annotations, anchorByChangeId, cardHeightsB
         Math.max(10, pageHeightPx - 10)
       ),
       top: 0,
-      heightPx
+      heightPx,
+      connectorLane: 0
     };
   });
   withAnchors.sort((left, right) => {
@@ -18451,6 +18499,7 @@ function layoutTrackedChangesForPage(annotations, anchorByChangeId, cardHeightsB
       shiftedCursorTopPx = entry.top + entry.heightPx + TRACKED_CHANGE_GUTTER_CARD_GAP_PX;
     });
   }
+  assignGutterConnectorLanes(withAnchors);
   return withAnchors;
 }
 function sameParagraphLocation(a, b) {
@@ -41579,16 +41628,28 @@ ${currentText.slice(end)}`;
             boxSizing: "border-box",
             zIndex: 0
           } : void 0;
+          const pageTrackedChanges = positionedTrackedChangesByPage[pageIndex] ?? [];
+          const pageGutterContentHeightPx = showTrackedChangeGutter && pageTrackedChanges.length > 0 ? pageTrackedChanges.reduce((maxBottomPx, entry) => {
+            return Math.max(
+              maxBottomPx,
+              Math.ceil(
+                entry.top + entry.heightPx + TRACKED_CHANGE_GUTTER_CARD_GAP_PX + 8
+              )
+            );
+          }, pageLayout.pageHeightPx) : pageLayout.pageHeightPx;
+          const pageVisualHeightPx = Math.max(
+            pageLayout.pageHeightPx,
+            pageGutterContentHeightPx
+          );
           const pageSurfaceStyle = {
             ...pageSurfaceBaseStyle,
             width: pageLayout.pageWidthPx,
-            height: pageLayout.pageHeightPx,
-            minHeight: pageLayout.pageHeightPx,
+            height: pageVisualHeightPx,
+            minHeight: pageVisualHeightPx,
             backgroundColor: resolvedPageSurfaceBackgroundColor,
             position: "relative",
             ...pageMarginPaddingStyle(pageLayout.marginsPx)
           };
-          const pageTrackedChanges = positionedTrackedChangesByPage[pageIndex] ?? [];
           const pageCoverBackgroundImages = (() => {
             const collected = /* @__PURE__ */ new Map();
             const pageContentHeightPx = Math.max(
@@ -41636,7 +41697,7 @@ ${currentText.slice(end)}`;
               style: {
                 position: "relative",
                 width: pageWrapperWidthPx,
-                minHeight: pageLayout.pageHeightPx,
+                minHeight: pageVisualHeightPx,
                 margin: "0 auto",
                 // Isolate per-page layout/style recalculation so scrolling and
                 // edits on one page don't force whole-document layout passes.
@@ -42685,7 +42746,7 @@ ${currentText.slice(end)}`;
                       left: pageLayout.pageWidthPx,
                       top: 0,
                       width: TRACKED_CHANGE_GUTTER_WIDTH_PX,
-                      height: pageLayout.pageHeightPx,
+                      height: pageVisualHeightPx,
                       backgroundColor: resolvedPageSurfaceBackgroundColor,
                       pointerEvents: "none",
                       overflow: "visible"
@@ -42708,8 +42769,8 @@ ${currentText.slice(end)}`;
                         "svg",
                         {
                           width: pageLayout.pageWidthPx + TRACKED_CHANGE_GUTTER_WIDTH_PX,
-                          height: pageLayout.pageHeightPx,
-                          viewBox: `0 0 ${pageLayout.pageWidthPx + TRACKED_CHANGE_GUTTER_WIDTH_PX} ${pageLayout.pageHeightPx}`,
+                          height: pageVisualHeightPx,
+                          viewBox: `0 0 ${pageLayout.pageWidthPx + TRACKED_CHANGE_GUTTER_WIDTH_PX} ${pageVisualHeightPx}`,
                           style: {
                             position: "absolute",
                             top: 0,
@@ -42737,11 +42798,19 @@ ${currentText.slice(end)}`;
                               Math.max(8, pageLayout.pageWidthPx - 8)
                             );
                             const cardAttachX = pageLayout.pageWidthPx + TRACKED_CHANGE_GUTTER_CARD_LEFT_PX;
-                            const gutterBendX = pageLayout.pageWidthPx + TRACKED_CHANGE_GUTTER_BEND_OFFSET_PX;
+                            const maxConnectorLaneOffset = Math.max(
+                              TRACKED_CHANGE_GUTTER_BEND_OFFSET_PX,
+                              TRACKED_CHANGE_GUTTER_CARD_LEFT_PX - 6
+                            );
+                            const connectorLaneOffset = Math.min(
+                              TRACKED_CHANGE_GUTTER_BEND_OFFSET_PX + Math.max(0, entry.connectorLane) * TRACKED_CHANGE_GUTTER_CONNECTOR_LANE_GAP_PX,
+                              maxConnectorLaneOffset
+                            );
+                            const gutterBendX = pageLayout.pageWidthPx + connectorLaneOffset;
                             const cardCenterY = clampNumber(
                               Math.round(entry.top + entry.heightPx / 2),
                               8,
-                              Math.max(8, pageLayout.pageHeightPx - 8)
+                              Math.max(8, pageVisualHeightPx - 8)
                             );
                             const connectorPath = Math.abs(cardCenterY - anchorY) <= 2 ? `M ${anchorX} ${anchorY} H ${cardAttachX}` : `M ${anchorX} ${anchorY} H ${gutterBendX} V ${cardCenterY} H ${cardAttachX}`;
                             const revisionBarX = clampNumber(
@@ -42952,6 +43021,7 @@ ${currentText.slice(end)}`;
                             "data-docx-gutter-annotation-id": entry.annotation.id,
                             "data-docx-gutter-anchor-x": Math.round(entry.anchorX),
                             "data-docx-gutter-anchor-y": Math.round(entry.anchorY),
+                            "data-docx-gutter-connector-lane": entry.connectorLane,
                             ref: (element) => {
                               const elementKey = `${pageIndex}:${entry.annotation.id}`;
                               if (element) {