@extend-ai/react-docx 0.7.2 → 0.7.3

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) {
@@ -42737,7 +42786,15 @@ ${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,
@@ -42952,6 +43009,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) {