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

package/dist/dev/index.js

@@ -1356,6 +1356,8 @@ function validateWCAG2Parms(parms) {
 import { clamp } from "@excalidraw/math";
 import { degreesToRadians } from "@excalidraw/math";
 var DARK_MODE_COLORS_CACHE = typeof window !== "undefined" ? /* @__PURE__ */ new Map() : null;
+var DARK_MODE_FILTER_INVERT_PERCENT = 93;
+var DARK_MODE_FILTER_HUE_ROTATE_DEGREES = 180;
 function cssHueRotate(red, green, blue, degrees) {
   const r = red / 255;
   const g = green / 255;
@@ -1405,12 +1407,17 @@ var applyDarkModeFilter = (color, enable = true) => {
   const tc = tinycolor(color);
   const alpha = tc.getAlpha();
   const rgb = tc.toRgb();
-  const inverted = cssInvert(rgb.r, rgb.g, rgb.b, 93);
+  const inverted = cssInvert(
+    rgb.r,
+    rgb.g,
+    rgb.b,
+    DARK_MODE_FILTER_INVERT_PERCENT
+  );
   const rotated = cssHueRotate(
     inverted.r,
     inverted.g,
     inverted.b,
-    180
+    DARK_MODE_FILTER_HUE_ROTATE_DEGREES
   );
   const result = rgbToHex2(rotated.r, rotated.g, rotated.b, alpha);
   if (DARK_MODE_COLORS_CACHE) {
@@ -1418,6 +1425,33 @@ var applyDarkModeFilter = (color, enable = true) => {
   }
   return result;
 };
+var _reverseDarkModeInvert = (r, g, b) => {
+  const p = DARK_MODE_FILTER_INVERT_PERCENT / 100;
+  const denominator = 1 - 2 * p;
+  const restore = (color) => Math.round(clamp((color - 255 * p) / denominator, 0, 255));
+  return {
+    r: restore(r),
+    g: restore(g),
+    b: restore(b)
+  };
+};
+var removeDarkModeFilter = (color) => {
+  const tc = tinycolor(color);
+  const alpha = tc.getAlpha();
+  const rgb = tc.toRgb();
+  const rotatedBack = cssHueRotate(
+    rgb.r,
+    rgb.g,
+    rgb.b,
+    DARK_MODE_FILTER_HUE_ROTATE_DEGREES
+  );
+  const restored = _reverseDarkModeInvert(
+    rotatedBack.r,
+    rotatedBack.g,
+    rotatedBack.b
+  );
+  return rgbToHex2(restored.r, restored.g, restored.b, alpha);
+};
 var pick = (source, keys) => {
   return keys.reduce((acc, key) => {
     if (key in source) {
@@ -1463,6 +1497,7 @@ var COMMON_ELEMENT_SHADES = pick(COLOR_PALETTE, [
   "orange",
   "red"
 ]);
+var COLOR_TOP_PICKS_SLOTS = 5;
 var DEFAULT_ELEMENT_STROKE_PICKS = [
   COLOR_PALETTE.black,
   COLOR_PALETTE.red[DEFAULT_ELEMENT_STROKE_COLOR_INDEX],
@@ -1477,6 +1512,13 @@ var DEFAULT_ELEMENT_BACKGROUND_PICKS = [
   COLOR_PALETTE.blue[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX],
   COLOR_PALETTE.yellow[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX]
 ];
+var BUCKET_FILL_BACKGROUND_PICKS = [
+  COLOR_PALETTE.white,
+  COLOR_PALETTE.red[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX],
+  COLOR_PALETTE.green[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX],
+  COLOR_PALETTE.blue[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX],
+  COLOR_PALETTE.yellow[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX]
+];
 var DEFAULT_CANVAS_BACKGROUND_PICKS = [
   COLOR_PALETTE.white,
   // radix slate2
@@ -1528,6 +1570,14 @@ var rgbToHex2 = (r, g, b, a) => {
   }
   return hex6;
 };
+var setColorAlpha = (color, alpha) => {
+  const tc = tinycolor(color);
+  if (!tc.isValid()) {
+    return color;
+  }
+  const { r, g, b } = tc.toRgb();
+  return rgbToHex2(r, g, b, alpha);
+};
 var colorToHex = (color) => {
   const tc = tinycolor(color);
   if (!tc.isValid()) {
@@ -1539,6 +1589,9 @@ var colorToHex = (color) => {
 var isTransparent = (color) => {
   return tinycolor(color).getAlpha() === 0;
 };
+var isOpaqueColor = (color) => {
+  return tinycolor(color).getAlpha() === 1;
+};
 var COLOR_OUTLINE_CONTRAST_THRESHOLD = 240;
 var calculateContrast = (r, g, b) => {
   const yiq = (r * 299 + g * 587 + b * 114) / 1e3;
@@ -1866,6 +1919,7 @@ var TEXT_ALIGN = {
   RIGHT: "right"
 };
 var ELEMENT_READY_TO_ERASE_OPACITY = 20;
+var ELEMENT_PENDING_DRAW_SHAPE_OPACITY = 70;
 var DEFAULT_PROPORTIONAL_RADIUS = 0.25;
 var DEFAULT_ADAPTIVE_RADIUS = 32;
 var ROUNDNESS = {
@@ -1949,7 +2003,9 @@ var TOOL_TYPE = {
   frame: "frame",
   magicframe: "magicframe",
   embeddable: "embeddable",
-  laser: "laser"
+  laser: "laser",
+  autoshape: "autoshape",
+  bucketfill: "bucketfill"
 };
 var EDITOR_LS_KEYS = {
   OAI_API_KEY: "excalidraw-oai-api-key",
@@ -2311,6 +2367,7 @@ var KEYS = {
   SUBTRACT: "-",
   SLASH: "/",
   A: "a",
+  B: "b",
   C: "c",
   D: "d",
   E: "e",
@@ -2362,6 +2419,7 @@ var shouldRotateWithDiscreteAngle = (event) => event.shiftKey;
 // src/points.ts
 init_define_import_meta_env();
 import {
+  pointFrom,
   pointFromPair
 } from "@excalidraw/math";
 var getSizeFromPoints = (points) => {
@@ -2406,12 +2464,12 @@ var rescalePoints = (dimension, newSize, points, normalize) => {
 };
 var getGridPoint = (x, y, gridSize) => {
   if (gridSize) {
-    return [
+    return pointFrom(
       Math.round(x / gridSize) * gridSize,
       Math.round(y / gridSize) * gridSize
-    ];
+    );
   }
-  return [x, y];
+  return pointFrom(x, y);
 };
 
 // src/promise-pool.ts
@@ -2502,14 +2560,25 @@ var getDateTime = () => {
   return `${year}-${month}-${day}-${hr}${min}`;
 };
 var capitalizeString = (str) => str.charAt(0).toUpperCase() + str.slice(1);
-var isToolIcon = (target) => target instanceof HTMLElement && target.className.includes("ToolIcon");
-var isInputLike = (target) => target instanceof HTMLElement && target.dataset.type === "wysiwyg" || target instanceof HTMLBRElement || // newline in wysiwyg
-target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement;
+var getTargetWindow = (target) => target?.ownerDocument?.defaultView ?? (typeof window === "undefined" ? null : window);
+var isToolIcon = (target) => {
+  const targetWindow = getTargetWindow(target);
+  return !!targetWindow && target instanceof targetWindow.HTMLElement && target.className.includes("ToolIcon");
+};
+var isInputLike = (target) => {
+  const targetWindow = getTargetWindow(target);
+  return !!targetWindow && (target instanceof targetWindow.HTMLElement && target.dataset.type === "wysiwyg" || target instanceof targetWindow.HTMLBRElement || // newline in wysiwyg
+  target instanceof targetWindow.HTMLInputElement || target instanceof targetWindow.HTMLTextAreaElement || target instanceof targetWindow.HTMLSelectElement);
+};
 var isInteractive = (target) => {
-  return isInputLike(target) || target instanceof Element && !!target.closest("label, button");
+  const targetWindow = getTargetWindow(target);
+  return isInputLike(target) || !!targetWindow && target instanceof targetWindow.Element && !!target.closest("label, button");
+};
+var isWritableElement = (target) => {
+  const targetWindow = getTargetWindow(target);
+  return !!targetWindow && (target instanceof targetWindow.HTMLElement && target.dataset.type === "wysiwyg" || target instanceof targetWindow.HTMLBRElement || // newline in wysiwyg
+  target instanceof targetWindow.HTMLTextAreaElement || target instanceof targetWindow.HTMLInputElement && (target.type === "text" || target.type === "number" || target.type === "password" || target.type === "search") || target instanceof targetWindow.HTMLElement && target.closest(".cm-editor") !== null);
 };
-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.type === "search") || target instanceof HTMLElement && target.closest(".cm-editor") !== null;
 var getFontFamilyString = ({
   fontFamily
 }) => {
@@ -2595,67 +2664,6 @@ var throttleRAF = (fn) => {
 var easeOut = (k) => {
   return 1 - Math.pow(1 - k, 4);
 };
-var easeOutInterpolate = (from, to, progress) => {
-  return (to - from) * easeOut(progress) + from;
-};
-var easeToValuesRAF = ({
-  fromValues,
-  toValues,
-  onStep,
-  duration = 250,
-  interpolateValue,
-  onStart,
-  onEnd,
-  onCancel
-}) => {
-  let canceled = false;
-  let frameId = 0;
-  let startTime;
-  function step(timestamp) {
-    if (canceled) {
-      return;
-    }
-    if (startTime === void 0) {
-      startTime = timestamp;
-      onStart?.();
-    }
-    const elapsed = Math.min(timestamp - startTime, duration);
-    const factor = easeOut(elapsed / duration);
-    const newValues = {};
-    Object.keys(fromValues).forEach((key) => {
-      const _key = key;
-      const result = (toValues[_key] - fromValues[_key]) * factor + fromValues[_key];
-      newValues[_key] = result;
-    });
-    onStep(newValues);
-    if (elapsed < duration) {
-      const progress = elapsed / duration;
-      const newValues2 = {};
-      Object.keys(fromValues).forEach((key) => {
-        const _key = key;
-        const startValue = fromValues[_key];
-        const endValue = toValues[_key];
-        let result;
-        result = interpolateValue ? interpolateValue(startValue, endValue, progress, _key) : easeOutInterpolate(startValue, endValue, progress);
-        if (result == null) {
-          result = easeOutInterpolate(startValue, endValue, progress);
-        }
-        newValues2[_key] = result;
-      });
-      onStep(newValues2);
-      frameId = window.requestAnimationFrame(step);
-    } else {
-      onStep(toValues);
-      onEnd?.();
-    }
-  }
-  frameId = window.requestAnimationFrame(step);
-  return () => {
-    onCancel?.();
-    canceled = true;
-    window.cancelAnimationFrame(frameId);
-  };
-};
 var chunk = (array, size) => {
   if (!array.length || size < 1) {
     return [];
@@ -2698,7 +2706,7 @@ var updateActiveTool = (appState, data) => {
   }
   return {
     ...appState.activeTool,
-    lastActiveTool: data.lastActiveToolBeforeEraser === void 0 ? appState.activeTool.lastActiveTool : data.lastActiveToolBeforeEraser,
+    lastActiveTool: data.lastActiveTool === void 0 ? appState.activeTool.lastActiveTool : data.lastActiveTool,
     type: data.type,
     customType: null,
     locked: data.locked ?? appState.activeTool.locked,
@@ -2825,19 +2833,21 @@ var supportsEmoji = () => {
   return ctx.getImageData(offset, offset, 1, 1).data[0] !== 0;
 };
 var getNearestScrollableContainer = (element) => {
+  const ownerDocument = element.ownerDocument;
+  const ownerWindow = ownerDocument.defaultView ?? window;
   let parent = element.parentElement;
   while (parent) {
-    if (parent === document.body) {
-      return document;
+    if (parent === ownerDocument.body) {
+      return ownerDocument;
     }
-    const { overflowY } = window.getComputedStyle(parent);
+    const { overflowY } = ownerWindow.getComputedStyle(parent);
     const hasScrollableContent = parent.scrollHeight > parent.clientHeight;
     if (hasScrollableContent && (overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay")) {
       return parent;
     }
     parent = parent.parentElement;
   }
-  return document;
+  return ownerDocument;
 };
 var focusNearestParent = (element) => {
   let parent = element.parentElement;
@@ -3553,6 +3563,7 @@ export {
   AppEventBus,
   BIND_MODE_TIMEOUT,
   BOUND_TEXT_PADDING,
+  BUCKET_FILL_BACKGROUND_PICKS,
   BinaryHeap,
   CANVAS_ONLY_ACTIONS,
   CANVAS_SEARCH_TAB,
@@ -3563,6 +3574,7 @@ export {
   COLOR_CHARCOAL_BLACK,
   COLOR_OUTLINE_CONTRAST_THRESHOLD,
   COLOR_PALETTE,
+  COLOR_TOP_PICKS_SLOTS,
   COLOR_VOICE_CALL,
   COLOR_WHITE,
   CURSOR_TYPE,
@@ -3602,6 +3614,7 @@ export {
   Debug,
   EDITOR_LS_KEYS,
   ELEMENT_LINK_KEY,
+  ELEMENT_PENDING_DRAW_SHAPE_OPACITY,
   ELEMENT_READY_TO_ERASE_OPACITY,
   ELEMENT_SHIFT_TRANSLATE_AMOUNT,
   ELEMENT_TRANSLATE_AMOUNT,
@@ -3704,7 +3717,6 @@ export {
   deriveStylesPanelMode,
   distance,
   easeOut,
-  easeToValuesRAF,
   escapeDoubleQuotes,
   exitFullScreen,
   findIndex,
@@ -3749,6 +3761,7 @@ export {
   isLocalLink,
   isMemberOf,
   isMobileBreakpoint,
+  isOpaqueColor,
   isPrimitive,
   isProdEnv,
   isPromiseLike,
@@ -3782,6 +3795,7 @@ export {
   randomId,
   randomInteger,
   reduceToCommonValue,
+  removeDarkModeFilter,
   removeSelection,
   rescalePoints,
   reseed,
@@ -3790,6 +3804,7 @@ export {
   safelyParseJSON,
   sceneCoordsToViewportCoords,
   selectNode,
+  setColorAlpha,
   setDateTimeForTests,
   setDesktopUIMode,
   setFeatureFlag,