@excalidraw/excalidraw 0.18.0-2a82821 → 0.18.0-2b1c2a9

package/dist/dev/{chunk-T3GRJXT6.js → chunk-KKZSEXXE.js}

@@ -105,6 +105,7 @@ var getDefaultAppState = () => {
     scrolledOutside: false,
     scrollX: 0,
     scrollY: 0,
+    scrollConstraints: null,
     selectedElementIds: {},
     hoveredElementIds: {},
     selectedGroupIds: {},
@@ -116,6 +117,7 @@ var getDefaultAppState = () => {
       panels: STATS_PANELS.generalStats | STATS_PANELS.elementProperties
     },
     suggestedBinding: null,
+    hoveredArrowTextAnchor: null,
     frameRendering: { enabled: true, clip: true, name: true, outline: true },
     frameToHighlight: null,
     editingFrame: null,
@@ -135,15 +137,18 @@ var getDefaultAppState = () => {
       y: 0
     },
     objectsSnapModeEnabled: false,
-    userToFollow: null,
-    followedBy: /* @__PURE__ */ new Set(),
     isCropping: false,
     croppingElementId: null,
     searchMatches: null,
     lockedMultiSelections: {},
     activeLockedId: null,
     bindMode: "orbit",
-    boxSelectionMode: "contain"
+    boxSelectionMode: "contain",
+    colorTopPicks: {
+      elementStroke: null,
+      elementBackground: null,
+      bucketFill: null
+    }
   };
 };
 var APP_STATE_STORAGE_CONF = /* @__PURE__ */ ((config) => config)({
@@ -224,6 +229,7 @@ var APP_STATE_STORAGE_CONF = /* @__PURE__ */ ((config) => config)({
   scrolledOutside: { browser: true, export: false, server: false },
   scrollX: { browser: true, export: false, server: false },
   scrollY: { browser: true, export: false, server: false },
+  scrollConstraints: { browser: false, export: false, server: false },
   selectedElementIds: { browser: true, export: false, server: false },
   hoveredElementIds: { browser: false, export: false, server: false },
   selectedGroupIds: { browser: true, export: false, server: false },
@@ -236,6 +242,7 @@ var APP_STATE_STORAGE_CONF = /* @__PURE__ */ ((config) => config)({
   shouldCacheIgnoreZoom: { browser: true, export: false, server: false },
   stats: { browser: true, export: false, server: false },
   suggestedBinding: { browser: false, export: false, server: false },
+  hoveredArrowTextAnchor: { browser: false, export: false, server: false },
   frameRendering: { browser: false, export: false, server: false },
   frameToHighlight: { browser: false, export: false, server: false },
   editingFrame: { browser: false, export: false, server: false },
@@ -251,14 +258,13 @@ var APP_STATE_STORAGE_CONF = /* @__PURE__ */ ((config) => config)({
   snapLines: { browser: false, export: false, server: false },
   originSnapOffset: { browser: false, export: false, server: false },
   objectsSnapModeEnabled: { browser: true, export: false, server: false },
-  userToFollow: { browser: false, export: false, server: false },
-  followedBy: { browser: false, export: false, server: false },
   isCropping: { browser: false, export: false, server: false },
   croppingElementId: { browser: false, export: false, server: false },
   searchMatches: { browser: false, export: false, server: false },
   lockedMultiSelections: { browser: true, export: true, server: true },
   activeLockedId: { browser: false, export: false, server: false },
-  bindMode: { browser: true, export: false, server: false }
+  bindMode: { browser: true, export: false, server: false },
+  colorTopPicks: { browser: true, export: false, server: false }
 });
 var _clearAppStateForStorage = (appState, exportType) => {
   const stateForExport = {};
@@ -356,25 +362,202 @@ import {
   getTargetElements
 } from "@excalidraw/element";
 
-// scene/scroll.ts
-import { getVisibleElements } from "@excalidraw/element";
+// viewport.ts
 import {
-  sceneCoordsToViewportCoords,
-  viewportCoordsToSceneCoords
+  arrayToMap,
+  MAX_ZOOM,
+  MIN_ZOOM,
+  viewportCoordsToSceneCoords,
+  ZOOM_STEP
 } from "@excalidraw/common";
-import { getClosestElementBounds } from "@excalidraw/element";
-import { getCommonBounds } from "@excalidraw/element";
-var isOutsideViewPort = (appState, cords) => {
-  const [x1, y1, x2, y2] = cords;
-  const { x: viewportX1, y: viewportY1 } = sceneCoordsToViewportCoords(
-    { sceneX: x1, sceneY: y1 },
-    appState
+import { clamp, pointDistance, pointFrom, roundToStep } from "@excalidraw/math";
+import {
+  CaptureUpdateAction,
+  getCommonBounds,
+  getElementBounds,
+  getVisibleElements
+} from "@excalidraw/element";
+var DEFAULT_OVERSCROLL = 150;
+var constrainScrollAxis = (scroll, boxStart, boxSize, visibleSize, offsetStart, offsetEnd, overscroll) => {
+  const max = -boxStart + offsetStart;
+  const min = visibleSize - (boxStart + boxSize) - offsetEnd;
+  if (min > max) {
+    const center = (min + max) / 2;
+    return clamp(scroll, center - overscroll, center + overscroll);
+  }
+  return clamp(scroll, min - overscroll, max + overscroll);
+};
+var constrainScrollState = (state, overscroll = 0) => {
+  const { scrollConstraints, width, height } = state;
+  if (!scrollConstraints) {
+    return { scrollX: state.scrollX, scrollY: state.scrollY, zoom: state.zoom };
+  }
+  const minZoom = scrollConstraints.lockZoom ? scrollConstraints.zoom : MIN_ZOOM;
+  const zoomValue = getNormalizedZoom(
+    clamp(state.zoom.value, minZoom, MAX_ZOOM)
   );
-  const { x: viewportX2, y: viewportY2 } = sceneCoordsToViewportCoords(
-    { sceneX: x2, sceneY: y2 },
-    appState
+  if (!scrollConstraints.lockScroll) {
+    return {
+      scrollX: state.scrollX,
+      scrollY: state.scrollY,
+      zoom: { value: zoomValue }
+    };
+  }
+  const give = Math.max(overscroll, 0) / zoomValue;
+  const offsets = scrollConstraints.offsets;
+  const offsetTop = (offsets?.top ?? 0) / zoomValue;
+  const offsetRight = (offsets?.right ?? 0) / zoomValue;
+  const offsetBottom = (offsets?.bottom ?? 0) / zoomValue;
+  const offsetLeft = (offsets?.left ?? 0) / zoomValue;
+  return {
+    scrollX: constrainScrollAxis(
+      state.scrollX,
+      scrollConstraints.x,
+      scrollConstraints.width,
+      width / zoomValue,
+      offsetLeft,
+      offsetRight,
+      give
+    ),
+    scrollY: constrainScrollAxis(
+      state.scrollY,
+      scrollConstraints.y,
+      scrollConstraints.height,
+      height / zoomValue,
+      offsetTop,
+      offsetBottom,
+      give
+    ),
+    zoom: { value: zoomValue }
+  };
+};
+var getViewportForZoom = ({ viewportX, viewportY, nextZoom }, appState) => {
+  const appLayerX = viewportX - appState.offsetLeft;
+  const appLayerY = viewportY - appState.offsetTop;
+  const currentZoom = appState.zoom.value;
+  const baseScrollX = appState.scrollX + (appLayerX - appLayerX / currentZoom);
+  const baseScrollY = appState.scrollY + (appLayerY - appLayerY / currentZoom);
+  const zoomOffsetScrollX = -(appLayerX - appLayerX / nextZoom);
+  const zoomOffsetScrollY = -(appLayerY - appLayerY / nextZoom);
+  return {
+    scrollX: baseScrollX + zoomOffsetScrollX,
+    scrollY: baseScrollY + zoomOffsetScrollY,
+    zoom: {
+      value: nextZoom
+    }
+  };
+};
+var getViewportForZoomWithScrollConstraints = (opts, state) => {
+  const restingViewport = constrainScrollState(state);
+  const overscrollX = (state.scrollX - restingViewport.scrollX) * state.zoom.value;
+  const overscrollY = (state.scrollY - restingViewport.scrollY) * state.zoom.value;
+  const zoomedViewport = constrainScrollState({
+    ...state,
+    ...getViewportForZoom(opts, state)
+  });
+  if (!state.scrollConstraints?.lockScroll || !overscrollX && !overscrollY) {
+    return zoomedViewport;
+  }
+  const zoom = zoomedViewport.zoom.value;
+  return constrainScrollState(
+    {
+      ...state,
+      ...zoomedViewport,
+      scrollX: zoomedViewport.scrollX + overscrollX / zoom,
+      scrollY: zoomedViewport.scrollY + overscrollY / zoom
+    },
+    state.scrollConstraints.overscroll
+  );
+};
+var zoomValueToFitBoundsOnViewport = (bounds, viewportDimensions) => {
+  const [x1, y1, x2, y2] = bounds;
+  const commonBoundsWidth = x2 - x1;
+  const zoomValueForWidth = viewportDimensions.width / commonBoundsWidth;
+  const commonBoundsHeight = y2 - y1;
+  const zoomValueForHeight = viewportDimensions.height / commonBoundsHeight;
+  const smallestZoomValue = Math.min(zoomValueForWidth, zoomValueForHeight);
+  return Math.min(smallestZoomValue, 1);
+};
+var zoomToFitBounds = ({
+  bounds,
+  appState,
+  canvasOffsets,
+  fit = "scale-down",
+  minZoom = -Infinity,
+  maxZoom = Infinity,
+  steppedZoom = false
+}) => {
+  const [x1, y1, x2, y2] = bounds;
+  const centerX = (x1 + x2) / 2;
+  const centerY = (y1 + y2) / 2;
+  const canvasOffsetLeft = canvasOffsets?.left ?? 0;
+  const canvasOffsetTop = canvasOffsets?.top ?? 0;
+  const canvasOffsetRight = canvasOffsets?.right ?? 0;
+  const canvasOffsetBottom = canvasOffsets?.bottom ?? 0;
+  const effectiveCanvasWidth = appState.width - canvasOffsetLeft - canvasOffsetRight;
+  const effectiveCanvasHeight = appState.height - canvasOffsetTop - canvasOffsetBottom;
+  let adjustedZoomValue;
+  if (fit === "none") {
+    adjustedZoomValue = appState.zoom.value;
+  } else if (fit === "contain") {
+    const commonBoundsWidth = x2 - x1;
+    const commonBoundsHeight = y2 - y1;
+    adjustedZoomValue = Math.min(
+      effectiveCanvasWidth / commonBoundsWidth,
+      effectiveCanvasHeight / commonBoundsHeight
+    );
+  } else {
+    adjustedZoomValue = zoomValueToFitBoundsOnViewport(bounds, {
+      width: effectiveCanvasWidth,
+      height: effectiveCanvasHeight
+    });
+  }
+  const targetZoomValue = steppedZoom && fit !== "none" ? roundToStep(adjustedZoomValue, ZOOM_STEP, "floor") : adjustedZoomValue;
+  const newZoomValue = getNormalizedZoom(
+    clamp(targetZoomValue, minZoom, maxZoom)
   );
-  return viewportX2 - viewportX1 > appState.width || viewportY2 - viewportY1 > appState.height;
+  const centerScroll = centerScrollOn({
+    scenePoint: { x: centerX, y: centerY },
+    viewportDimensions: {
+      width: appState.width,
+      height: appState.height
+    },
+    offsets: canvasOffsets,
+    zoom: { value: newZoomValue }
+  });
+  return {
+    appState: {
+      ...appState,
+      scrollX: centerScroll.scrollX,
+      scrollY: centerScroll.scrollY,
+      zoom: { value: newZoomValue }
+    },
+    captureUpdate: CaptureUpdateAction.EVENTUALLY
+  };
+};
+var doBoundsExceedViewport = (appState, bounds) => {
+  const [x1, y1, x2, y2] = bounds;
+  return (x2 - x1) * appState.zoom.value > appState.width || (y2 - y1) * appState.zoom.value > appState.height;
+};
+var getClosestElementBounds = (elements, from) => {
+  if (!elements.length) {
+    return [0, 0, 0, 0];
+  }
+  let minDistance = Infinity;
+  let closestElement = elements[0];
+  const elementsMap = arrayToMap(elements);
+  elements.forEach((element) => {
+    const [x1, y1, x2, y2] = getElementBounds(element, elementsMap);
+    const distance2 = pointDistance(
+      pointFrom((x1 + x2) / 2, (y1 + y2) / 2),
+      pointFrom(from.x, from.y)
+    );
+    if (distance2 < minDistance) {
+      minDistance = distance2;
+      closestElement = element;
+    }
+  });
+  return getElementBounds(closestElement, elementsMap);
 };
 var centerScrollOn = ({
   scenePoint,
@@ -391,7 +574,7 @@ var centerScrollOn = ({
     scrollY
   };
 };
-var calculateScrollCenter = (elements, appState) => {
+var getScrollToContentState = (elements, appState) => {
   elements = getVisibleElements(elements);
   if (!elements.length) {
     return {
@@ -400,11 +583,14 @@ var calculateScrollCenter = (elements, appState) => {
     };
   }
   let [x1, y1, x2, y2] = getCommonBounds(elements);
-  if (isOutsideViewPort(appState, [x1, y1, x2, y2])) {
+  if (doBoundsExceedViewport(appState, [x1, y1, x2, y2])) {
     [x1, y1, x2, y2] = getClosestElementBounds(
       elements,
       viewportCoordsToSceneCoords(
-        { clientX: appState.scrollX, clientY: appState.scrollY },
+        {
+          clientX: appState.offsetLeft + appState.width / 2,
+          clientY: appState.offsetTop + appState.height / 2
+        },
         appState
       )
     );
@@ -429,16 +615,16 @@ import {
 } from "@excalidraw/element";
 
 // scene/normalize.ts
-import { MAX_ZOOM, MIN_ZOOM } from "@excalidraw/common";
-import { clamp, round } from "@excalidraw/math";
+import { MAX_ZOOM as MAX_ZOOM2, MIN_ZOOM as MIN_ZOOM2 } from "@excalidraw/common";
+import { clamp as clamp2, round } from "@excalidraw/math";
 var getNormalizedZoom = (zoom) => {
-  return clamp(round(zoom, 6), MIN_ZOOM, MAX_ZOOM);
+  return clamp2(round(zoom, 6), MIN_ZOOM2, MAX_ZOOM2);
 };
 var getNormalizedGridSize = (gridStep) => {
-  return clamp(Math.round(gridStep), 1, 100);
+  return clamp2(Math.round(gridStep), 1, 100);
 };
 var getNormalizedGridStep = (gridStep) => {
-  return clamp(Math.round(gridStep), 1, 100);
+  return clamp2(Math.round(gridStep), 1, 100);
 };
 
 // scene/export.ts
@@ -451,7 +637,7 @@ import {
   THEME as THEME5,
   MIME_TYPES as MIME_TYPES5,
   EXPORT_DATA_TYPES as EXPORT_DATA_TYPES2,
-  arrayToMap,
+  arrayToMap as arrayToMap2,
   distance,
   getFontString as getFontString2,
   toBrandedType,
@@ -2798,8 +2984,9 @@ var XiaolaiFontFaces = [
 
 // fonts/Fonts.ts
 var _Fonts = class _Fonts {
-  constructor(scene) {
+  constructor(scene, ownerDocument = document) {
     __publicField(this, "scene");
+    __publicField(this, "ownerDocument");
     /**
      * Get all the font families for the given scene.
      */
@@ -2851,9 +3038,14 @@ var _Fonts = class _Fonts {
       const charsPerFamily = _Fonts.getCharsPerFamily(
         this.scene.getNonDeletedElements()
       );
-      return _Fonts.loadFontFaces(sceneFamilies, charsPerFamily);
+      return _Fonts.loadFontFaces(
+        sceneFamilies,
+        charsPerFamily,
+        this.ownerDocument
+      );
     });
     this.scene = scene;
+    this.ownerDocument = ownerDocument;
   }
   static get registered() {
     if (!_Fonts._registered) {
@@ -2891,33 +3083,37 @@ var _Fonts = class _Fonts {
     const fontFaces = await new PromisePool(iterator, concurrency).all();
     return Array.from(new Set(fontFaces));
   }
-  static async loadFontFaces(fontFamilies, charsPerFamily) {
+  static async loadFontFaces(fontFamilies, charsPerFamily, ownerDocument) {
     for (const { fontFaces: fontFaces2, metadata } of _Fonts.registered.values()) {
       if (metadata.local) {
         continue;
       }
       for (const { fontFace } of fontFaces2) {
-        if (!window.document.fonts.has(fontFace)) {
-          window.document.fonts.add(fontFace);
+        if (!ownerDocument.fonts.has(fontFace)) {
+          ownerDocument.fonts.add(fontFace);
         }
       }
     }
-    const iterator = _Fonts.fontFacesLoader(fontFamilies, charsPerFamily);
+    const iterator = _Fonts.fontFacesLoader(
+      fontFamilies,
+      charsPerFamily,
+      ownerDocument
+    );
     const concurrency = 10;
     const fontFaces = await new PromisePool(iterator, concurrency).all();
     return fontFaces.flat().filter(Boolean);
   }
-  static *fontFacesLoader(fontFamilies, charsPerFamily) {
+  static *fontFacesLoader(fontFamilies, charsPerFamily, ownerDocument) {
     for (const [index, fontFamily] of fontFamilies.entries()) {
       const font = getFontString({
         fontFamily,
         fontSize: FONT_SIZES.sm
       });
       const text = _Fonts.getCharacters(charsPerFamily, fontFamily);
-      if (!window.document.fonts.check(font, text)) {
+      if (!ownerDocument.fonts.check(font, text)) {
         yield promiseTry3(async () => {
           try {
-            const fontFaces = await window.document.fonts.load(font, text);
+            const fontFaces = await ownerDocument.fonts.load(font, text);
             return [index, fontFaces];
           } catch (e) {
             console.error(
@@ -3060,16 +3256,17 @@ __publicField(_Fonts, "_initialized", false);
 /**
  * Load font faces for passed elements - use when the scene is unavailable (i.e. export).
  */
-__publicField(_Fonts, "loadElementsFonts", async (elements) => {
+__publicField(_Fonts, "loadElementsFonts", async (elements, ownerDocument = document) => {
   const fontFamilies = _Fonts.getUniqueFamilies(elements);
   const charsPerFamily = _Fonts.getCharsPerFamily(elements);
-  return _Fonts.loadFontFaces(fontFamilies, charsPerFamily);
+  return _Fonts.loadFontFaces(fontFamilies, charsPerFamily, ownerDocument);
 });
 var Fonts = _Fonts;
 
 // renderer/staticScene.ts
 import {
   applyDarkModeFilter as applyDarkModeFilter2,
+  COLOR_WHITE as COLOR_WHITE2,
   FRAME_STYLE,
   THEME as THEME3,
   throttleRAF
@@ -3091,7 +3288,7 @@ import { renderElement } from "@excalidraw/element";
 import { getElementAbsoluteCoords as getElementAbsoluteCoords2 } from "@excalidraw/element";
 
 // components/hyperlink/helpers.ts
-import { pointFrom, pointRotateRads } from "@excalidraw/math";
+import { pointFrom as pointFrom2, pointRotateRads } from "@excalidraw/math";
 import { MIME_TYPES as MIME_TYPES3 } from "@excalidraw/common";
 import { getElementAbsoluteCoords } from "@excalidraw/element";
 import { hitElementBoundingBox } from "@excalidraw/element";
@@ -3117,8 +3314,8 @@ var getLinkHandleFromCoords = ([x1, y1, x2, y2], angle, appState) => {
   const x = x2 + dashedLineMargin - centeringOffset;
   const y = y1 - dashedLineMargin - linkMarginY + centeringOffset;
   const [rotatedX, rotatedY] = pointRotateRads(
-    pointFrom(x + linkWidth / 2, y + linkHeight / 2),
-    pointFrom(centerX, centerY),
+    pointFrom2(x + linkWidth / 2, y + linkHeight / 2),
+    pointFrom2(centerX, centerY),
     angle
   );
   return [
@@ -3143,19 +3340,21 @@ var isPointHittingLink = (element, elementsMap, appState, [x, y], isMobile) => {
   if (!element.link || appState.selectedElementIds[element.id]) {
     return false;
   }
-  if (!isMobile && appState.viewModeEnabled && hitElementBoundingBox(pointFrom(x, y), element, elementsMap)) {
+  if (!isMobile && appState.viewModeEnabled && hitElementBoundingBox(pointFrom2(x, y), element, elementsMap)) {
     return true;
   }
   return isPointHittingLinkIcon(
     element,
     elementsMap,
     appState,
-    pointFrom(x, y)
+    pointFrom2(x, y)
   );
 };
 
 // renderer/helpers.ts
-import { THEME as THEME2, applyDarkModeFilter } from "@excalidraw/common";
+import { COLOR_WHITE, THEME as THEME2, applyDarkModeFilter } from "@excalidraw/common";
+var DEFAULT_SELECTION_COLOR = "#6965db";
+var getSelectionColor = (element) => element && getComputedStyle(element).getPropertyValue("--color-selection").trim() || DEFAULT_SELECTION_COLOR;
 var fillCircle = (context, cx, cy, radius, stroke, fill = true) => {
   context.beginPath();
   context.arc(cx, cy, radius, 0, Math.PI * 2);
@@ -3182,19 +3381,20 @@ var bootstrapCanvas = ({
   context.setTransform(1, 0, 0, 1, 0, 0);
   context.scale(scale, scale);
   if (typeof viewBackgroundColor === "string") {
-    const hasTransparence = viewBackgroundColor === "transparent" || viewBackgroundColor.length === 5 || // #RGBA
-    viewBackgroundColor.length === 9 || // #RRGGBBA
-    /(hsla|rgba)\(/.test(viewBackgroundColor);
-    if (hasTransparence) {
+    const isOpaque = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(viewBackgroundColor);
+    if (!isOpaque) {
       context.clearRect(0, 0, normalizedWidth, normalizedHeight);
     }
-    context.save();
-    context.fillStyle = applyDarkModeFilter(
-      viewBackgroundColor,
-      theme === THEME2.DARK
-    );
-    context.fillRect(0, 0, normalizedWidth, normalizedHeight);
-    context.restore();
+    if (viewBackgroundColor !== "transparent") {
+      context.save();
+      context.fillStyle = COLOR_WHITE;
+      context.fillStyle = applyDarkModeFilter(
+        viewBackgroundColor,
+        theme === THEME2.DARK
+      );
+      context.fillRect(0, 0, normalizedWidth, normalizedHeight);
+      context.restore();
+    }
   } else {
     context.clearRect(0, 0, normalizedWidth, normalizedHeight);
   }
@@ -3321,7 +3521,8 @@ var renderLinkIcon = (element, context, appState, elementsMap) => {
         window.devicePixelRatio * appState.zoom.value,
         window.devicePixelRatio * appState.zoom.value
       );
-      linkCanvasCacheContext.fillStyle = appState.viewBackgroundColor || "#fff";
+      linkCanvasCacheContext.fillStyle = COLOR_WHITE2;
+      linkCanvasCacheContext.fillStyle = appState.viewBackgroundColor || COLOR_WHITE2;
       linkCanvasCacheContext.fillRect(0, 0, width, height);
       if (canvasKey === "elementLink") {
         linkCanvasCacheContext.drawImage(ELEMENT_LINK_IMG, 0, 0, width, height);
@@ -3446,7 +3647,7 @@ var _renderStaticScene = ({
         );
       }
       context.restore();
-      if (!isExporting) {
+      if (!isExporting && renderConfig.renderLinks !== false) {
         renderLinkIcon(element, context, appState, elementsMap);
       }
     } catch (error) {
@@ -3484,7 +3685,7 @@ var _renderStaticScene = ({
             appState
           );
         }
-        if (!isExporting) {
+        if (!isExporting && renderConfig.renderLinks !== false) {
           renderLinkIcon(element, context, appState, elementsMap);
         }
       };
@@ -3541,6 +3742,7 @@ var renderStaticScene = (renderConfig, throttle) => {
 
 // renderer/staticSvgScene.ts
 import {
+  BOUND_TEXT_PADDING,
   FRAME_STYLE as FRAME_STYLE2,
   MAX_DECIMALS_FOR_SVG_EXPORT,
   SVG_NS,
@@ -3785,13 +3987,19 @@ var renderElementToSvg = (element, elementsMap, rsvg, svgRoot, files, offsetX, o
           boundText,
           elementsMap
         );
-        const maskX = offsetX + boundTextCoords.x - element.x;
-        const maskY = offsetY + boundTextCoords.y - element.y;
+        const maskX = offsetX + boundTextCoords.x - element.x - BOUND_TEXT_PADDING;
+        const maskY = offsetY + boundTextCoords.y - element.y - BOUND_TEXT_PADDING;
         maskRectInvisible.setAttribute("x", maskX.toString());
         maskRectInvisible.setAttribute("y", maskY.toString());
         maskRectInvisible.setAttribute("fill", "#000");
-        maskRectInvisible.setAttribute("width", `${boundText.width}`);
-        maskRectInvisible.setAttribute("height", `${boundText.height}`);
+        maskRectInvisible.setAttribute(
+          "width",
+          `${boundText.width + BOUND_TEXT_PADDING * 2}`
+        );
+        maskRectInvisible.setAttribute(
+          "height",
+          `${boundText.height + BOUND_TEXT_PADDING * 2}`
+        );
         maskRectInvisible.setAttribute("opacity", "1");
         maskPath.appendChild(maskRectInvisible);
       }
@@ -4107,7 +4315,7 @@ var renderSceneToSvg = (elements, elementsMap, rsvg, svgRoot, files, renderConfi
           renderConfig
         );
         const boundTextElement = getBoundTextElement2(element, elementsMap);
-        if (boundTextElement) {
+        if (boundTextElement?.isDeleted === false) {
           renderElementToSvg(
             boundTextElement,
             elementsMap,
@@ -4118,6 +4326,10 @@ var renderSceneToSvg = (elements, elementsMap, rsvg, svgRoot, files, renderConfi
             boundTextElement.y + renderConfig.offsetY,
             renderConfig
           );
+        } else if (boundTextElement) {
+          console.error(
+            "[NONDELETED][INVARIANT] Skipped rendering deleted bound text element"
+          );
         }
       } catch (error) {
         console.error(error);
@@ -4209,7 +4421,7 @@ var prepareElementsForRender = ({
     nextElements = getElementsOverlappingFrame(
       elements,
       exportingFrame,
-      arrayToMap(elements)
+      arrayToMap2(elements)
     );
   } else if (frameRendering.enabled && frameRendering.name) {
     nextElements = addFrameLabelsAsTextElements(elements, {
@@ -4267,10 +4479,10 @@ var exportToCanvas = async (elements, appState, files, {
     canvas,
     rc: rough.canvas(canvas),
     elementsMap: toBrandedType(
-      arrayToMap(elementsForRender)
+      arrayToMap2(elementsForRender)
     ),
     allElementsMap: toBrandedType(
-      arrayToMap(syncInvalidIndices(elements))
+      arrayToMap2(syncInvalidIndices(elements))
     ),
     visibleElements: elementsForRender,
     scale,
@@ -4359,7 +4571,7 @@ var exportToSvg = async (elements, appState, files, opts) => {
   }
   const frameElements = getFrameLikeElements(elements);
   if (frameElements.length) {
-    const elementsMap = arrayToMap(elements);
+    const elementsMap = arrayToMap2(elements);
     for (const frame of frameElements) {
       const clipPath = svgRoot.ownerDocument.createElementNS(
         SVG_NS2,
@@ -4408,7 +4620,7 @@ var exportToSvg = async (elements, appState, files, opts) => {
   const renderEmbeddables = opts?.renderEmbeddables ?? false;
   renderSceneToSvg(
     elementsForRender,
-    toBrandedType(arrayToMap(elementsForRender)),
+    toBrandedType(arrayToMap2(elementsForRender)),
     rsvg,
     svgRoot,
     files || {},
@@ -4479,16 +4691,17 @@ var getCanvasSize = (elements, exportPadding) => {
   const height = distance(minY, maxY) + exportPadding * 2;
   return [minX, minY, width, height];
 };
-var getExportSize = (elements, exportPadding, scale) => {
-  const [, , width, height] = getCanvasSize(elements, exportPadding).map(
-    (dimension) => Math.trunc(dimension * scale)
-  );
-  return [width, height];
-};
 
 // data/restore.ts
-import { isFiniteNumber, isValidPoint, pointFrom as pointFrom2 } from "@excalidraw/math";
 import {
+  clamp as clamp3,
+  isFiniteNumber,
+  isValidPoint,
+  pointFrom as pointFrom3
+} from "@excalidraw/math";
+import {
+  colorToHex,
+  COLOR_TOP_PICKS_SLOTS,
   DEFAULT_FONT_FAMILY as DEFAULT_FONT_FAMILY2,
   DEFAULT_STROKE_STREAMLINE,
   DEFAULT_TEXT_ALIGN as DEFAULT_TEXT_ALIGN2,
@@ -4502,7 +4715,7 @@ import {
   randomId,
   getUpdatedTimestamp,
   updateActiveTool,
-  arrayToMap as arrayToMap2,
+  arrayToMap as arrayToMap3,
   getSizeFromPoints,
   normalizeLink as normalizeLink2,
   getLineHeight,
@@ -4515,7 +4728,8 @@ import {
   normalizeArrowhead,
   isPointInElement,
   isValidPolygon,
-  projectFixedPointOntoDiagonal
+  projectFixedPointOntoDiagonal,
+  isNonDeletedElement
 } from "@excalidraw/element";
 import { normalizeFixedPoint } from "@excalidraw/element";
 import {
@@ -4535,21 +4749,43 @@ import {
   isTextElement as isTextElement4,
   isUsingAdaptiveRadius
 } from "@excalidraw/element";
-import { syncInvalidIndices as syncInvalidIndices2 } from "@excalidraw/element";
+import {
+  normalizeBoundElementsOrder,
+  syncInvalidIndices as syncInvalidIndices2,
+  syncMovedIndices
+} from "@excalidraw/element";
 import { refreshTextDimensions } from "@excalidraw/element";
 import { getNormalizedDimensions } from "@excalidraw/element";
 import { isInvisiblySmallElement } from "@excalidraw/element";
-var MAX_ARROW_PX = 75e3;
+var MAX_LINEAR_PX = 75e3;
+var handleOversizedLinearElements = (element) => {
+  if (element.width <= MAX_LINEAR_PX && element.height <= MAX_LINEAR_PX) {
+    return element;
+  }
+  const label = element.type === "arrow" ? `${isElbowArrow(element) ? "elbow" : "simple"} arrow` : element.type;
+  console.error(
+    `Removing extremely large ${label} ${element.id} (width: ${element.width}, height: ${element.height}, x: ${element.x}, y: ${element.y})`
+  );
+  return {
+    ...element,
+    x: 0,
+    y: 0,
+    width: 100,
+    height: 100,
+    points: [pointFrom3(0, 0), pointFrom3(100, 100)],
+    isDeleted: true
+  };
+};
 var restoreLinearElementPoints = (points, width, height) => {
   const restoredPoints = Array.isArray(points) ? points.reduce((acc, point) => {
     if (isValidPoint(point)) {
-      acc.push(pointFrom2(point[0], point[1]));
+      acc.push(pointFrom3(point[0], point[1]));
     }
     return acc;
   }, []) : [];
   return restoredPoints.length < 2 ? [
-    pointFrom2(0, 0),
-    pointFrom2(
+    pointFrom3(0, 0),
+    pointFrom3(
       isFiniteNumber(width) ? width : 0,
       isFiniteNumber(height) ? height : 0
     )
@@ -4567,7 +4803,7 @@ var restoreFreedrawPoints = (points, pressures) => {
   const restoredPressures = [];
   points.forEach((point, index) => {
     if (isValidPoint(point)) {
-      restoredPoints.push(pointFrom2(point[0], point[1]));
+      restoredPoints.push(pointFrom3(point[0], point[1]));
       if (index in pressureValues) {
         const pressure = pressureValues[index];
         restoredPressures.push(isFiniteNumber(pressure) ? pressure : 0.5);
@@ -4596,7 +4832,9 @@ var AllowedExcalidrawActiveTools = {
   embeddable: true,
   hand: true,
   laser: false,
-  magicframe: false
+  autoshape: false,
+  magicframe: false,
+  bucketfill: true
 };
 var ALLOWED_STROKE_VARIABILITIES = /* @__PURE__ */ new Set([
   "constant",
@@ -4654,6 +4892,9 @@ var repairBinding = (element, binding, targetElementsMap, existingElementsMap, s
         elementsMap
       );
       const mode = isPointInElement(p, boundElement, elementsMap) ? "inside" : "orbit";
+      if (!isNonDeletedElement(element)) {
+        console.error("[NONDELETED][INVARIANT] Restoring a deleted element");
+      }
       const safeElement = {
         ...element,
         startBinding: element.startBinding?.elementId ? {
@@ -4777,7 +5018,8 @@ var restoreElement = (element, targetElementsMap, existingElementsMap, opts) =>
         containerId: element.containerId ?? null,
         originalText: element.originalText || text,
         autoResize: element.autoResize ?? true,
-        lineHeight
+        lineHeight,
+        labelPosition: isFiniteNumber(element.labelPosition) ? clamp3(element.labelPosition, 0, 1) : null
       });
       if (opts?.deleteInvisibleElements && !text && !element.isDeleted) {
         element = { ...element, originalText: text, isDeleted: true };
@@ -4822,7 +5064,7 @@ var restoreElement = (element, targetElementsMap, existingElementsMap, opts) =>
           y: y ?? 0
         }));
       }
-      return restoreElementWithProperties(element, {
+      const restoredLine = restoreElementWithProperties(element, {
         type: "line",
         startBinding: null,
         endBinding: null,
@@ -4836,6 +5078,7 @@ var restoreElement = (element, targetElementsMap, existingElementsMap, opts) =>
         } : {},
         ...getSizeFromPoints(points)
       });
+      return handleOversizedLinearElements(restoredLine);
     case "arrow": {
       const startArrowhead2 = normalizeArrowhead(element.startArrowhead);
       const endArrowhead2 = element.endArrowhead === void 0 ? "arrow" : normalizeArrowhead(element.endArrowhead);
@@ -4889,24 +5132,7 @@ var restoreElement = (element, targetElementsMap, existingElementsMap, opts) =>
           restoredElement
         )
       };
-      if (normalizedRestoredElement.width > MAX_ARROW_PX || normalizedRestoredElement.height > MAX_ARROW_PX) {
-        console.error(
-          `Removing extremely large arrow ${normalizedRestoredElement.id} (type: ${isElbowArrow(normalizedRestoredElement) ? "elbow" : "simple"}, width: ${normalizedRestoredElement.width}, height: ${normalizedRestoredElement.height}, x: ${normalizedRestoredElement.x}, y: ${normalizedRestoredElement.y})`
-        );
-        return {
-          ...normalizedRestoredElement,
-          x: 0,
-          y: 0,
-          width: 100,
-          height: 100,
-          points: [
-            pointFrom2(0, 0),
-            pointFrom2(100, 100)
-          ],
-          isDeleted: true
-        };
-      }
-      return normalizedRestoredElement;
+      return handleOversizedLinearElements(normalizedRestoredElement);
     }
     case "ellipse":
     case "rectangle":
@@ -4963,6 +5189,19 @@ var repairBoundElement = (boundElement, elementsMap) => {
     container.boundElements = boundElements;
   }
 };
+var repairBoundTextElementOrder = (elements) => {
+  const originalPositions = new Map(
+    elements.map((element, index) => [element.id, index])
+  );
+  const normalizedElements = normalizeBoundElementsOrder(elements);
+  const reorderedBoundTextElements = normalizedElements.filter(
+    (element, index) => isTextElement4(element) && element.containerId && originalPositions.get(element.id) !== index
+  );
+  return reorderedBoundTextElements.length ? syncMovedIndices(
+    normalizedElements,
+    arrayToMap3(reorderedBoundTextElements)
+  ) : normalizedElements;
+};
 var repairFrameMembership = (element, elementsMap) => {
   if (element.frameId) {
     const containingFrame = elementsMap.get(element.frameId);
@@ -4973,8 +5212,8 @@ var repairFrameMembership = (element, elementsMap) => {
 };
 var restoreElements = (targetElements, existingElements, opts) => {
   const existingIds = /* @__PURE__ */ new Set();
-  const targetElementsMap = arrayToMap2(targetElements || []);
-  const existingElementsMap = existingElements ? arrayToMap2(existingElements) : null;
+  const targetElementsMap = arrayToMap3(targetElements || []);
+  const existingElementsMap = existingElements ? arrayToMap3(existingElements) : null;
   const restoredElements = syncInvalidIndices2(
     (targetElements || []).reduce((elements, element) => {
       if (element.type === "selection") {
@@ -5015,7 +5254,7 @@ var restoreElements = (targetElements, existingElements, opts) => {
   if (!opts?.repairBindings) {
     return restoredElements;
   }
-  const restoredElementsMap = arrayToMap2(restoredElements);
+  const restoredElementsMap = arrayToMap3(restoredElements);
   for (const element of restoredElements) {
     if (element.frameId) {
       repairFrameMembership(element, restoredElementsMap);
@@ -5044,7 +5283,8 @@ var restoreElements = (targetElements, existingElements, opts) => {
       }
     }
   }
-  return restoredElements.map((element) => {
+  const repairedElements = repairBoundTextElementOrder(restoredElements);
+  return repairedElements.map((element) => {
     if (isElbowArrow(element) && !isArrowBoundToElement(element) && !validateElbowPoints(element.points)) {
       return {
         ...element,
@@ -5053,7 +5293,7 @@ var restoreElements = (targetElements, existingElements, opts) => {
           restoredElementsMap,
           {
             points: [
-              pointFrom2(0, 0),
+              pointFrom3(0, 0),
               element.points[element.points.length - 1]
             ]
           }
@@ -5082,10 +5322,10 @@ var restoreElements = (targetElements, existingElements, opts) => {
         width: boundElement.width,
         height: boundElement.height,
         points: [
-          pointFrom2(0, 0),
-          pointFrom2(0, -10),
-          pointFrom2(boundElement.width / 2 + 5, -10),
-          pointFrom2(
+          pointFrom3(0, 0),
+          pointFrom3(0, -10),
+          pointFrom3(boundElement.width / 2 + 5, -10),
+          pointFrom3(
             boundElement.width / 2 + 5,
             boundElement.height / 2 + 5
           )
@@ -5111,6 +5351,25 @@ var LegacyAppStateMigrations = {
     ];
   }
 };
+var restoreColorTopPicksList = (value) => {
+  if (!Array.isArray(value)) {
+    return null;
+  }
+  const colors = /* @__PURE__ */ new Map();
+  for (const color of value) {
+    if (typeof color !== "string") {
+      continue;
+    }
+    const normalized = colorToHex(color) ?? color.toLowerCase();
+    if (!colors.has(normalized)) {
+      colors.set(normalized, color);
+    }
+    if (colors.size >= COLOR_TOP_PICKS_SLOTS) {
+      break;
+    }
+  }
+  return colors.size ? [...colors.values()] : null;
+};
 var restoreAppState = (appState, localAppState) => {
   appState = appState || {};
   const defaultAppState = getDefaultAppState();
@@ -5135,6 +5394,17 @@ var restoreAppState = (appState, localAppState) => {
   if (boxSelectionMode !== void 0) {
     nextAppState.boxSelectionMode = boxSelectionMode;
   }
+  nextAppState.colorTopPicks = {
+    elementStroke: restoreColorTopPicksList(
+      nextAppState.colorTopPicks?.elementStroke
+    ),
+    elementBackground: restoreColorTopPicksList(
+      nextAppState.colorTopPicks?.elementBackground
+    ),
+    bucketFill: restoreColorTopPicksList(
+      nextAppState.colorTopPicks?.bucketFill
+    )
+  };
   if (appState.currentItemStrokeWidth !== void 0) {
     nextAppState.currentItemStrokeWidthKey = getStrokeWidthKey(appState.currentItemStrokeWidth) ?? defaultAppState.currentItemStrokeWidthKey;
   }
@@ -5171,9 +5441,8 @@ var restoreAppState = (appState, localAppState) => {
   };
 };
 var restoreLibraryItem = (libraryItem) => {
-  const elements = restoreElements(
-    getNonDeletedElements(libraryItem.elements),
-    null
+  const elements = getNonDeletedElements(
+    restoreElements(libraryItem.elements, null)
   );
   return elements.length ? { ...libraryItem, elements } : null;
 };
@@ -5211,7 +5480,7 @@ var parseFileContents = async (blob) => {
   let contents;
   if (blob.type === MIME_TYPES6.png) {
     try {
-      return await (await import("./data/image-7TCIBRTP.js")).decodePngMetadata(blob);
+      return await (await import("./data/image-ORD6XJVB.js")).decodePngMetadata(blob);
     } catch (error) {
       if (error.message === "INVALID") {
         throw new ImageSceneDataError(
@@ -5303,7 +5572,7 @@ var loadSceneOrLibraryFromBlob = async (blob, localAppState, localElements, file
               theme: localAppState?.theme,
               fileHandle: fileHandle || blob.handle || null,
               ...cleanAppStateForExport(data.appState || {}),
-              ...localAppState ? calculateScrollCenter(data.elements || [], localAppState) : {}
+              ...localAppState ? getScrollToContentState(data.elements || [], localAppState) : {}
             },
             localAppState
           ),
@@ -5615,8 +5884,11 @@ var decodePngMetadata = async (blob) => {
 };
 
 export {
-  centerScrollOn,
-  calculateScrollCenter,
+  DEFAULT_OVERSCROLL,
+  constrainScrollState,
+  getViewportForZoomWithScrollConstraints,
+  zoomToFitBounds,
+  getScrollToContentState,
   getNormalizedZoom,
   getNormalizedGridStep,
   isSomeElementSelected,
@@ -5647,6 +5919,7 @@ export {
   saveLibraryAsJSON,
   getLinkHandleFromCoords,
   isPointHittingLink,
+  getSelectionColor,
   fillCircle,
   getNormalizedCanvasDimensions,
   bootstrapCanvas,
@@ -5656,7 +5929,6 @@ export {
   renderStaticScene,
   exportToCanvas,
   exportToSvg,
-  getExportSize,
   restoreElement,
   restoreElements,
   restoreAppState,
@@ -5685,4 +5957,4 @@ export {
   createFile,
   normalizeFile
 };
-//# sourceMappingURL=chunk-T3GRJXT6.js.map
+//# sourceMappingURL=chunk-KKZSEXXE.js.map