@excalidraw/common 0.18.0-b9d27d3 → 0.18.0-c141960

package/dist/dev/index.js

@@ -281,49 +281,48 @@ var BinaryHeap = class {
   content = [];
   sinkDown(idx) {
     const node = this.content[idx];
+    const nodeScore = this.scoreFunction(node);
     while (idx > 0) {
       const parentN = (idx + 1 >> 1) - 1;
       const parent = this.content[parentN];
-      if (this.scoreFunction(node) < this.scoreFunction(parent)) {
-        this.content[parentN] = node;
+      if (nodeScore < this.scoreFunction(parent)) {
         this.content[idx] = parent;
         idx = parentN;
       } else {
         break;
       }
     }
+    this.content[idx] = node;
   }
   bubbleUp(idx) {
     const length = this.content.length;
     const node = this.content[idx];
     const score = this.scoreFunction(node);
     while (true) {
-      const child2N = idx + 1 << 1;
-      const child1N = child2N - 1;
-      let swap = null;
-      let child1Score = 0;
+      const child1N = (idx + 1 << 1) - 1;
+      const child2N = child1N + 1;
+      let smallestIdx = idx;
+      let smallestScore = score;
       if (child1N < length) {
-        const child1 = this.content[child1N];
-        child1Score = this.scoreFunction(child1);
-        if (child1Score < score) {
-          swap = child1N;
+        const child1Score = this.scoreFunction(this.content[child1N]);
+        if (child1Score < smallestScore) {
+          smallestIdx = child1N;
+          smallestScore = child1Score;
         }
       }
       if (child2N < length) {
-        const child2 = this.content[child2N];
-        const child2Score = this.scoreFunction(child2);
-        if (child2Score < (swap === null ? score : child1Score)) {
-          swap = child2N;
+        const child2Score = this.scoreFunction(this.content[child2N]);
+        if (child2Score < smallestScore) {
+          smallestIdx = child2N;
         }
       }
-      if (swap !== null) {
-        this.content[idx] = this.content[swap];
-        this.content[swap] = node;
-        idx = swap;
-      } else {
+      if (smallestIdx === idx) {
         break;
       }
+      this.content[idx] = this.content[smallestIdx];
+      idx = smallestIdx;
     }
+    this.content[idx] = node;
   }
   push(node) {
     this.content.push(node);
@@ -641,18 +640,6 @@ var rgbToHex = (r, g, b) => `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(
 
 // src/constants.ts
 init_define_import_meta_env();
-var isDarwin = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
-var isWindows = /^Win/.test(navigator.platform);
-var isAndroid = /\b(android)\b/i.test(navigator.userAgent);
-var isFirefox = typeof window !== "undefined" && "netscape" in window && navigator.userAgent.indexOf("rv:") > 1 && navigator.userAgent.indexOf("Gecko") > 1;
-var isChrome = navigator.userAgent.indexOf("Chrome") !== -1;
-var isSafari = !isChrome && navigator.userAgent.indexOf("Safari") !== -1;
-var isIOS = /iPad|iPhone/i.test(navigator.platform) || // iPadOS 13+
-navigator.userAgent.includes("Mac") && "ontouchend" in document;
-var isBrave = () => navigator.brave?.isBrave?.name === "isBrave";
-var isMobile = isIOS || /android|webos|ipod|blackberry|iemobile|opera mini/i.test(
-  navigator.userAgent
-) || /android|ios|ipod|blackberry|windows phone/i.test(navigator.platform);
 var supportsResizeObserver = typeof window !== "undefined" && "ResizeObserver" in window;
 var APP_NAME = "Excalidraw";
 var TEXT_AUTOWRAP_THRESHOLD = 36;
@@ -734,10 +721,13 @@ var ENV = {
   PRODUCTION: "production"
 };
 var CLASSES = {
+  SIDEBAR: "sidebar",
   SHAPE_ACTIONS_MENU: "App-menu__left",
   ZOOM_ACTIONS: "zoom-actions",
   SEARCH_MENU_INPUT_WRAPPER: "layer-ui__search-inputWrapper",
-  CONVERT_ELEMENT_TYPE_POPUP: "ConvertElementTypePopup"
+  CONVERT_ELEMENT_TYPE_POPUP: "ConvertElementTypePopup",
+  SHAPE_ACTIONS_THEME_SCOPE: "shape-actions-theme-scope",
+  FRAME_NAME: "frame-name"
 };
 var CJK_HAND_DRAWN_FALLBACK_FONT = "Xiaolai";
 var WINDOWS_EMOJI_FALLBACK_FONT = "Segoe UI Emoji";
@@ -838,7 +828,10 @@ var STRING_MIME_TYPES = {
   json: "application/json",
   // excalidraw data
   excalidraw: "application/vnd.excalidraw+json",
-  excalidrawlib: "application/vnd.excalidrawlib+json"
+  // LEGACY: fully-qualified library JSON data
+  excalidrawlib: "application/vnd.excalidrawlib+json",
+  // list of excalidraw library item ids
+  excalidrawlibIds: "application/vnd.excalidrawlib.ids+json"
 };
 var MIME_TYPES = {
   ...STRING_MIME_TYPES,
@@ -900,10 +893,6 @@ var DEFAULT_UI_OPTIONS = {
     image: true
   }
 };
-var MQ_MAX_WIDTH_PORTRAIT = 730;
-var MQ_MAX_WIDTH_LANDSCAPE = 1e3;
-var MQ_MAX_HEIGHT_LANDSCAPE = 500;
-var MQ_RIGHT_SIDEBAR_MIN_WIDTH = 1229;
 var MAX_DECIMALS_FOR_SVG_EXPORT = 2;
 var EXPORT_SCALES = [1, 2, 3];
 var DEFAULT_EXPORT_PADDING = 10;
@@ -1024,6 +1013,10 @@ var UserIdleState = /* @__PURE__ */ ((UserIdleState2) => {
 })(UserIdleState || {});
 var LINE_POLYGON_POINT_MERGE_DISTANCE = 20;
 var DOUBLE_TAP_POSITION_THRESHOLD = 35;
+var BIND_MODE_TIMEOUT = 700;
+var MOBILE_ACTION_BUTTON_BG = {
+  background: "var(--mobile-action-button-bg)"
+};
 
 // src/font-metadata.ts
 init_define_import_meta_env();
@@ -1179,6 +1172,133 @@ var Queue = class {
 
 // src/keys.ts
 init_define_import_meta_env();
+
+// src/editorInterface.ts
+init_define_import_meta_env();
+var DESKTOP_UI_MODE_STORAGE_KEY = "excalidraw.desktopUIMode";
+var MQ_MAX_MOBILE = 599;
+var MQ_MAX_WIDTH_LANDSCAPE = 1e3;
+var MQ_MAX_HEIGHT_LANDSCAPE = 500;
+var MQ_MIN_TABLET = MQ_MAX_MOBILE + 1;
+var MQ_MAX_TABLET = 1400;
+var MQ_MIN_WIDTH_DESKTOP = 1440;
+var MQ_RIGHT_SIDEBAR_MIN_WIDTH = 1229;
+var isDarwin = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
+var isWindows = /^Win/.test(navigator.platform);
+var isAndroid = /\b(android)\b/i.test(navigator.userAgent);
+var isFirefox = typeof window !== "undefined" && "netscape" in window && navigator.userAgent.indexOf("rv:") > 1 && navigator.userAgent.indexOf("Gecko") > 1;
+var isChrome = navigator.userAgent.indexOf("Chrome") !== -1;
+var isSafari = !isChrome && navigator.userAgent.indexOf("Safari") !== -1;
+var isIOS = /iPad|iPhone/i.test(navigator.platform) || // iPadOS 13+
+navigator.userAgent.includes("Mac") && "ontouchend" in document;
+var isBrave = () => navigator.brave?.isBrave?.name === "isBrave";
+var isMobileBreakpoint = (width, height) => {
+  return width <= MQ_MAX_MOBILE || height < MQ_MAX_HEIGHT_LANDSCAPE && width < MQ_MAX_WIDTH_LANDSCAPE;
+};
+var isTabletBreakpoint = (editorWidth, editorHeight) => {
+  const minSide = Math.min(editorWidth, editorHeight);
+  const maxSide = Math.max(editorWidth, editorHeight);
+  return minSide >= MQ_MIN_TABLET && maxSide <= MQ_MAX_TABLET;
+};
+var isMobileOrTablet = () => {
+  const ua = navigator.userAgent || "";
+  const platform = navigator.platform || "";
+  const uaData = navigator.userAgentData;
+  if (uaData) {
+    const plat = (uaData.platform || "").toLowerCase();
+    const isDesktopOS = plat === "windows" || plat === "macos" || plat === "linux" || plat === "chrome os";
+    if (uaData.mobile === true) {
+      return true;
+    }
+    if (uaData.mobile === false && plat === "android") {
+      const looksTouchTablet = matchMedia?.("(hover: none)").matches && matchMedia?.("(pointer: coarse)").matches;
+      return looksTouchTablet;
+    }
+    if (isDesktopOS) {
+      return false;
+    }
+  }
+  if (isIOS) {
+    return true;
+  }
+  if (isAndroid) {
+    const isAndroidPhone = /Mobile/i.test(ua);
+    const isAndroidTablet = !isAndroidPhone;
+    if (isAndroidPhone || isAndroidTablet) {
+      const looksTouchTablet = matchMedia?.("(hover: none)").matches && matchMedia?.("(pointer: coarse)").matches;
+      return looksTouchTablet;
+    }
+  }
+  const looksDesktopPlatform = /Win|Linux|CrOS|Mac/.test(platform) || /Windows NT|X11|CrOS|Macintosh/.test(ua);
+  if (looksDesktopPlatform) {
+    return false;
+  }
+  return false;
+};
+var getFormFactor = (editorWidth, editorHeight) => {
+  if (isMobileBreakpoint(editorWidth, editorHeight)) {
+    return "phone";
+  }
+  if (isTabletBreakpoint(editorWidth, editorHeight)) {
+    return "tablet";
+  }
+  return "desktop";
+};
+var deriveStylesPanelMode = (editorInterface) => {
+  if (editorInterface.formFactor === "phone") {
+    return "mobile";
+  }
+  if (editorInterface.formFactor === "tablet") {
+    return "compact";
+  }
+  return editorInterface.desktopUIMode;
+};
+var createUserAgentDescriptor = (userAgentString) => {
+  const normalizedUA = userAgentString ?? "";
+  let platform = "unknown";
+  if (isIOS) {
+    platform = "ios";
+  } else if (isAndroid) {
+    platform = "android";
+  } else if (normalizedUA) {
+    platform = "other";
+  }
+  return {
+    isMobileDevice: isMobileOrTablet(),
+    platform
+  };
+};
+var loadDesktopUIModePreference = () => {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  try {
+    const stored = window.localStorage.getItem(DESKTOP_UI_MODE_STORAGE_KEY);
+    if (stored === "compact" || stored === "full") {
+      return stored;
+    }
+  } catch (error) {
+  }
+  return null;
+};
+var persistDesktopUIMode = (mode) => {
+  if (typeof window === "undefined") {
+    return;
+  }
+  try {
+    window.localStorage.setItem(DESKTOP_UI_MODE_STORAGE_KEY, mode);
+  } catch (error) {
+  }
+};
+var setDesktopUIMode = (mode) => {
+  if (mode !== "compact" && mode !== "full") {
+    return;
+  }
+  persistDesktopUIMode(mode);
+  return mode;
+};
+
+// src/keys.ts
 var CODES = {
   EQUAL: "Equal",
   MINUS: "Minus",
@@ -1424,7 +1544,7 @@ var isInteractive = (target) => {
   return isInputLike(target) || target instanceof Element && !!target.closest("label, button");
 };
 var isWritableElement = (target) => target instanceof HTMLElement && target.dataset.type === "wysiwyg" || target instanceof HTMLBRElement || // newline in wysiwyg
-target instanceof HTMLTextAreaElement || target instanceof HTMLInputElement && (target.type === "text" || target.type === "number" || target.type === "password");
+target instanceof HTMLTextAreaElement || target instanceof HTMLInputElement && (target.type === "text" || target.type === "number" || target.type === "password" || target.type === "search");
 var getFontFamilyString = ({
   fontFamily
 }) => {
@@ -1441,6 +1561,9 @@ var getFontString = ({
 }) => {
   return `${fontSize}px ${getFontFamilyString({ fontFamily })}`;
 };
+var nextAnimationFrame = async (cb) => {
+  requestAnimationFrame(() => requestAnimationFrame(cb));
+};
 var debounce = (fn, timeout) => {
   let handle = 0;
   let lastArgs = null;
@@ -1605,6 +1728,9 @@ var removeSelection = () => {
   }
 };
 var distance = (x, y) => Math.abs(x - y);
+var isSelectionLikeTool = (type) => {
+  return type === "selection" || type === "lasso";
+};
 var updateActiveTool = (appState, data) => {
   if (data.type === "custom") {
     return {
@@ -1626,13 +1752,6 @@ var updateActiveTool = (appState, data) => {
 var isFullScreen = () => document.fullscreenElement?.nodeName === "HTML";
 var allowFullScreen = () => document.documentElement.requestFullscreen();
 var exitFullScreen = () => document.exitFullscreen();
-var getShortcutKey = (shortcut) => {
-  shortcut = shortcut.replace(/\bAlt\b/i, "Alt").replace(/\bShift\b/i, "Shift").replace(/\b(Enter|Return)\b/i, "Enter");
-  if (isDarwin) {
-    return shortcut.replace(/\bCtrlOrCmd\b/gi, "Cmd").replace(/\bAlt\b/i, "Option");
-  }
-  return shortcut.replace(/\bCtrlOrCmd\b/gi, "Ctrl");
-};
 var viewportCoordsToSceneCoords = ({ clientX, clientY }, {
   zoom,
   offsetLeft,
@@ -1711,7 +1830,6 @@ var isTransparent = (color) => {
   const isRRGGBBTransparent = color.length === 9 && color.substr(7, 2) === "00";
   return isRGBTransparent || isRRGGBBTransparent || color === COLOR_PALETTE.transparent;
 };
-var isBindingFallthroughEnabled = (el) => el.fillStyle !== "solid" || isTransparent(el.backgroundColor);
 var resolvablePromise = () => {
   let resolve;
   let reject;
@@ -2074,6 +2192,38 @@ var reduceToCommonValue = (collection, getValue) => {
   }
   return commonValue;
 };
+var FEATURE_FLAGS_STORAGE_KEY = "excalidraw-feature-flags";
+var DEFAULT_FEATURE_FLAGS = {
+  COMPLEX_BINDINGS: false
+};
+var featureFlags = null;
+var getFeatureFlag = (flag) => {
+  if (!featureFlags) {
+    try {
+      const serializedFlags = localStorage.getItem(FEATURE_FLAGS_STORAGE_KEY);
+      if (serializedFlags) {
+        const flags = JSON.parse(serializedFlags);
+        featureFlags = flags ?? DEFAULT_FEATURE_FLAGS;
+      }
+    } catch {
+    }
+  }
+  return (featureFlags || DEFAULT_FEATURE_FLAGS)[flag];
+};
+var setFeatureFlag = (flag, value) => {
+  try {
+    featureFlags = {
+      ...featureFlags || DEFAULT_FEATURE_FLAGS,
+      [flag]: value
+    };
+    localStorage.setItem(
+      FEATURE_FLAGS_STORAGE_KEY,
+      JSON.stringify(featureFlags)
+    );
+  } catch (e) {
+    console.error("unable to set feature flag", e);
+  }
+};
 
 // src/random.ts
 var random = new Random(Date.now());
@@ -2147,6 +2297,107 @@ var Emitter = class {
     this.subscribers = [];
   }
 };
+
+// src/visualdebug.ts
+init_define_import_meta_env();
+import {
+  isLineSegment,
+  lineSegment,
+  pointFrom
+} from "@excalidraw/math";
+import { isBounds } from "@excalidraw/element";
+var debugDrawCubicBezier = (c, opts) => {
+  addToCurrentFrame({
+    color: opts?.color ?? "purple",
+    permanent: !!opts?.permanent,
+    data: c
+  });
+};
+var debugDrawLine = (segment, opts) => {
+  const segments = isLineSegment(segment) ? [segment] : segment;
+  segments.forEach(
+    (data) => addToCurrentFrame({
+      color: opts?.color ?? "red",
+      data,
+      permanent: !!opts?.permanent
+    })
+  );
+};
+var debugDrawPoint = (p, opts) => {
+  const xOffset = opts?.fuzzy ? Math.random() * 3 : 0;
+  const yOffset = opts?.fuzzy ? Math.random() * 3 : 0;
+  debugDrawLine(
+    lineSegment(
+      pointFrom(p[0] + xOffset - 10, p[1] + yOffset - 10),
+      pointFrom(p[0] + xOffset + 10, p[1] + yOffset + 10)
+    ),
+    {
+      color: opts?.color ?? "cyan",
+      permanent: opts?.permanent
+    }
+  );
+  debugDrawLine(
+    lineSegment(
+      pointFrom(p[0] + xOffset - 10, p[1] + yOffset + 10),
+      pointFrom(p[0] + xOffset + 10, p[1] + yOffset - 10)
+    ),
+    {
+      color: opts?.color ?? "cyan",
+      permanent: opts?.permanent
+    }
+  );
+};
+var debugDrawBounds = (box, opts) => {
+  (isBounds(box) ? [box] : box).forEach(
+    (bbox) => debugDrawLine(
+      [
+        lineSegment(
+          pointFrom(bbox[0], bbox[1]),
+          pointFrom(bbox[2], bbox[1])
+        ),
+        lineSegment(
+          pointFrom(bbox[2], bbox[1]),
+          pointFrom(bbox[2], bbox[3])
+        ),
+        lineSegment(
+          pointFrom(bbox[2], bbox[3]),
+          pointFrom(bbox[0], bbox[3])
+        ),
+        lineSegment(
+          pointFrom(bbox[0], bbox[3]),
+          pointFrom(bbox[0], bbox[1])
+        )
+      ],
+      {
+        color: opts?.color ?? "green",
+        permanent: !!opts?.permanent
+      }
+    )
+  );
+};
+var debugDrawPoints = ({
+  x,
+  y,
+  points
+}, options) => {
+  points.forEach(
+    (p) => debugDrawPoint(pointFrom(x + p[0], y + p[1]), options)
+  );
+};
+var debugCloseFrame = () => {
+  window.visualDebug?.data.push([]);
+};
+var debugClear = () => {
+  if (window.visualDebug?.data) {
+    window.visualDebug.data = [];
+  }
+};
+var addToCurrentFrame = (element) => {
+  if (window.visualDebug?.data && window.visualDebug.data.length === 0) {
+    window.visualDebug.data[0] = [];
+  }
+  window.visualDebug?.data && window.visualDebug.data[window.visualDebug.data.length - 1].push(element);
+};
 export {
   ACTIVE_THRESHOLD,
   ALLOWED_PASTE_MIME_TYPES,
@@ -2154,6 +2405,7 @@ export {
   ARROW_LABEL_FONT_SIZE_TO_MIN_WIDTH_RATIO,
   ARROW_LABEL_WIDTH_FRACTION,
   ARROW_TYPE,
+  BIND_MODE_TIMEOUT,
   BOUND_TEXT_PADDING,
   BinaryHeap,
   CANVAS_ONLY_ACTIONS,
@@ -2238,10 +2490,14 @@ export {
   MIN_FONT_SIZE,
   MIN_WIDTH_OR_HEIGHT,
   MIN_ZOOM,
+  MOBILE_ACTION_BUTTON_BG,
   MONOSPACE_GENERIC_FONT,
   MQ_MAX_HEIGHT_LANDSCAPE,
+  MQ_MAX_MOBILE,
+  MQ_MAX_TABLET,
   MQ_MAX_WIDTH_LANDSCAPE,
-  MQ_MAX_WIDTH_PORTRAIT,
+  MQ_MIN_TABLET,
+  MQ_MIN_WIDTH_DESKTOP,
   MQ_RIGHT_SIDEBAR_MIN_WIDTH,
   ORIG_ID,
   POINTER_BUTTON,
@@ -2290,7 +2546,16 @@ export {
   chunk,
   cloneJSON,
   composeEventHandlers,
+  createUserAgentDescriptor,
   debounce,
+  debugClear,
+  debugCloseFrame,
+  debugDrawBounds,
+  debugDrawCubicBezier,
+  debugDrawLine,
+  debugDrawPoint,
+  debugDrawPoints,
+  deriveStylesPanelMode,
   distance,
   easeOut,
   easeToValuesRAF,
@@ -2302,16 +2567,17 @@ export {
   getAllColorsSpecificShade,
   getDateTime,
   getExportSource,
+  getFeatureFlag,
   getFontFamilyFallbacks,
   getFontFamilyString,
   getFontString,
+  getFormFactor,
   getFrame,
   getGenericFontFamilyFallback,
   getGlobalCSSVariable,
   getGridPoint,
   getLineHeight,
   getNearestScrollableContainer,
-  getShortcutKey,
   getSizeFromPoints,
   getSpecificColorShades,
   getSvgPathFromStroke,
@@ -2322,7 +2588,6 @@ export {
   isAndroid,
   isAnyTrue,
   isArrowKey,
-  isBindingFallthroughEnabled,
   isBrave,
   isChrome,
   isDarwin,
@@ -2335,7 +2600,7 @@ export {
   isLatinChar,
   isLocalLink,
   isMemberOf,
-  isMobile,
+  isMobileBreakpoint,
   isPrimitive,
   isProdEnv,
   isPromiseLike,
@@ -2343,18 +2608,22 @@ export {
   isReadonlyArray,
   isRunningInIframe,
   isSafari,
+  isSelectionLikeTool,
   isServerEnv,
   isShallowEqual,
+  isTabletBreakpoint,
   isTestEnv,
   isToolIcon,
   isTransparent,
   isWindows,
   isWritableElement,
+  loadDesktopUIModePreference,
   mapFind,
   matchKey,
   memoize,
   muteFSAbortError,
   nFormatter,
+  nextAnimationFrame,
   normalizeEOL,
   normalizeLink,
   preventUnload,
@@ -2372,6 +2641,8 @@ export {
   sceneCoordsToViewportCoords,
   selectNode,
   setDateTimeForTests,
+  setDesktopUIMode,
+  setFeatureFlag,
   shouldMaintainAspectRatio,
   shouldResizeFromCenter,
   shouldRotateWithDiscreteAngle,