@excalidraw/common 0.18.0-4872083 → 0.18.0-4ce38fb

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],
@@ -1484,6 +1519,15 @@ var BUCKET_FILL_BACKGROUND_PICKS = [
   COLOR_PALETTE.blue[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX],
   COLOR_PALETTE.yellow[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX]
 ];
+var DEFAULT_STICKY_NOTE_BG = "#ffdf6b";
+var STICKY_NOTE_STROKE_PICKS = DEFAULT_ELEMENT_STROKE_PICKS;
+var STICKY_NOTE_BACKGROUND_PICKS = [
+  DEFAULT_STICKY_NOTE_BG,
+  COLOR_PALETTE.pink[1],
+  COLOR_PALETTE.green[1],
+  COLOR_PALETTE.blue[1],
+  COLOR_PALETTE.orange[1]
+];
 var DEFAULT_CANVAS_BACKGROUND_PICKS = [
   COLOR_PALETTE.white,
   // radix slate2
@@ -1513,7 +1557,6 @@ var DEFAULT_ELEMENT_BACKGROUND_COLOR_PALETTE = {
   bronze: COLOR_PALETTE.bronze,
   ...COMMON_ELEMENT_SHADES
 };
-var getBucketFillBackgroundColor = (backgroundColor) => isTransparent(backgroundColor) ? COLOR_PALETTE.green[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX] : backgroundColor;
 var getAllColorsSpecificShade = (index) => [
   // 2nd row
   COLOR_PALETTE.cyan[index],
@@ -1536,6 +1579,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()) {
@@ -1589,6 +1640,8 @@ init_define_import_meta_env();
 var supportsResizeObserver = typeof window !== "undefined" && "ResizeObserver" in window;
 var APP_NAME = "Excalidraw";
 var TEXT_AUTOWRAP_THRESHOLD = 36;
+var TEXT_VIEWPORT_PADDING = 20;
+var TEXT_MAX_WRAP_WIDTH = 800;
 var DRAGGING_THRESHOLD = 10;
 var MINIMUM_ARROW_SIZE = 20;
 var LINE_CONFIRM_THRESHOLD = 8;
@@ -1640,6 +1693,7 @@ var EVENT = /* @__PURE__ */ ((EVENT2) => {
   EVENT2["POINTER_MOVE"] = "pointermove";
   EVENT2["POINTER_DOWN"] = "pointerdown";
   EVENT2["POINTER_UP"] = "pointerup";
+  EVENT2["POINTER_CANCEL"] = "pointercancel";
   EVENT2["STATE_CHANGE"] = "statechange";
   EVENT2["WHEEL"] = "wheel";
   EVENT2["TOUCH_START"] = "touchstart";
@@ -1751,7 +1805,28 @@ var FRAME_STYLE = {
 };
 var MIN_FONT_SIZE = 1;
 var DEFAULT_FONT_SIZE = 20;
+var STICKY_NOTE_MIN_FONT_SIZE = 16;
+var STICKY_NOTE_MAX_FONT_SIZE = 512;
+var STICKY_NOTE_FALLBACK_FONT_SIZE = 28;
+var STICKY_NOTE_FONT_STEP = 2;
+var STICKY_NOTE_PADDING = 16;
+var STICKY_NOTE_FOOTER = {
+  height: 20,
+  fontSize: 12,
+  fontFamily: "Helvetica, Arial, sans-serif",
+  baselineFromBottom: 14,
+  opacity: 1,
+  minBodyWidthForYear: 80
+};
+var STICKY_NOTE_BODY_INSET_Y = STICKY_NOTE_PADDING * 2 + STICKY_NOTE_FOOTER.height;
+var DEFAULT_STICKY_NOTE_SIZE = 250;
+var STICKY_NOTE_MIN_SIZE = 75;
+var STICKY_NOTE_SHADOW_OFFSET = 3;
+var STICKY_NOTE_SHADOW_OPACITY = 0.16;
+var STICKY_NOTE_EDGE_SHADOW_WIDTH = 0.5;
+var STICKY_NOTE_EDGE_SHADOW_OPACITY = 0.08;
 var DEFAULT_FONT_FAMILY = FONT_FAMILY.Excalifont;
+var FONT_TOP_PICKS_SLOTS = 3;
 var DEFAULT_TEXT_ALIGN = "left";
 var DEFAULT_VERTICAL_ALIGN = "top";
 var DEFAULT_VERSION = "{version}";
@@ -1821,9 +1896,13 @@ var TOUCH_CTX_MENU_TIMEOUT = 500;
 var TITLE_TIMEOUT = 1e4;
 var VERSION_TIMEOUT = 3e4;
 var SCROLL_TIMEOUT = 100;
+var ZEN_MODE_TRANSITION_DURATION = 250;
 var ZOOM_STEP = 0.1;
 var MIN_ZOOM = 0.1;
 var MAX_ZOOM = 30;
+var DEFAULT_ZOOM = Object.freeze({
+  value: 1
+});
 var HYPERLINK_TOOLTIP_DELAY = 300;
 var IDLE_THRESHOLD = 6e4;
 var ACTIVE_THRESHOLD = 3e3;
@@ -1960,6 +2039,7 @@ var TOOL_TYPE = {
   hand: "hand",
   frame: "frame",
   magicframe: "magicframe",
+  stickynote: "stickynote",
   embeddable: "embeddable",
   laser: "laser",
   autoshape: "autoshape",
@@ -2334,6 +2414,7 @@ var KEYS = {
   H: "h",
   I: "i",
   L: "l",
+  N: "n",
   O: "o",
   P: "p",
   Q: "q",
@@ -2518,14 +2599,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
 }) => {
@@ -2690,6 +2782,8 @@ var RS_LTR_CHARS = "A-Za-z\xC0-\xD6\xD8-\xF6\xF8-\u02B8\u0300-\u0590\u0800-\u1FF
 var RS_RTL_CHARS = "\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC";
 var RE_RTL_CHECK = new RegExp(`^[^${RS_LTR_CHARS}]*[${RS_RTL_CHARS}]`);
 var isRTL = (text) => RE_RTL_CHECK.test(text);
+var RE_RTL_CHARS = new RegExp(`[${RS_RTL_CHARS}]`);
+var hasRTLChars = (text) => RE_RTL_CHARS.test(text);
 var tupleToCoors = (xyTuple) => {
   const [x, y] = xyTuple;
   return { x, y };
@@ -2780,19 +2874,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;
@@ -3143,6 +3239,16 @@ var reseed = (seed) => {
   testIdBase = 0;
 };
 var randomId = () => isTestEnv() ? `id${testIdBase++}` : nanoid();
+var seededRandom = (seed) => {
+  let value = seed >>> 0;
+  return () => {
+    value += 1831565813;
+    let next = value;
+    next = Math.imul(next ^ next >>> 15, next | 1);
+    next ^= next + Math.imul(next ^ next >>> 7, next | 61);
+    return ((next ^ next >>> 14) >>> 0) / 4294967296;
+  };
+};
 
 // src/url.ts
 init_define_import_meta_env();
@@ -3519,6 +3625,7 @@ export {
   COLOR_CHARCOAL_BLACK,
   COLOR_OUTLINE_CONTRAST_THRESHOLD,
   COLOR_PALETTE,
+  COLOR_TOP_PICKS_SLOTS,
   COLOR_VOICE_CALL,
   COLOR_WHITE,
   CURSOR_TYPE,
@@ -3546,6 +3653,8 @@ export {
   DEFAULT_PROPORTIONAL_RADIUS,
   DEFAULT_REDUCED_GLOBAL_ALPHA,
   DEFAULT_SIDEBAR,
+  DEFAULT_STICKY_NOTE_BG,
+  DEFAULT_STICKY_NOTE_SIZE,
   DEFAULT_STROKE_STREAMLINE,
   DEFAULT_STROKE_STREAMLINE_PRECISE,
   DEFAULT_TEXT_ALIGN,
@@ -3553,6 +3662,7 @@ export {
   DEFAULT_UI_OPTIONS,
   DEFAULT_VERSION,
   DEFAULT_VERTICAL_ALIGN,
+  DEFAULT_ZOOM,
   DOUBLE_TAP_POSITION_THRESHOLD,
   DRAGGING_THRESHOLD,
   Debug,
@@ -3575,6 +3685,7 @@ export {
   FONT_FAMILY_GENERIC_FALLBACKS,
   FONT_METADATA,
   FONT_SIZES,
+  FONT_TOP_PICKS_SLOTS,
   FRAME_STYLE,
   FREEDRAW_STROKE_WIDTH,
   GOOGLE_FONTS_RANGES,
@@ -3618,6 +3729,20 @@ export {
   SHIFT_LOCKING_ANGLE,
   SIDE_RESIZING_THRESHOLD,
   STATS_PANELS,
+  STICKY_NOTE_BACKGROUND_PICKS,
+  STICKY_NOTE_BODY_INSET_Y,
+  STICKY_NOTE_EDGE_SHADOW_OPACITY,
+  STICKY_NOTE_EDGE_SHADOW_WIDTH,
+  STICKY_NOTE_FALLBACK_FONT_SIZE,
+  STICKY_NOTE_FONT_STEP,
+  STICKY_NOTE_FOOTER,
+  STICKY_NOTE_MAX_FONT_SIZE,
+  STICKY_NOTE_MIN_FONT_SIZE,
+  STICKY_NOTE_MIN_SIZE,
+  STICKY_NOTE_PADDING,
+  STICKY_NOTE_SHADOW_OFFSET,
+  STICKY_NOTE_SHADOW_OPACITY,
+  STICKY_NOTE_STROKE_PICKS,
   STRING_MIME_TYPES,
   STROKE_WIDTH,
   STROKE_WIDTH_KEYS,
@@ -3626,7 +3751,9 @@ export {
   TAP_TWICE_TIMEOUT,
   TEXT_ALIGN,
   TEXT_AUTOWRAP_THRESHOLD,
+  TEXT_MAX_WRAP_WIDTH,
   TEXT_TO_CENTER_SNAP_THRESHOLD,
+  TEXT_VIEWPORT_PADDING,
   THEME,
   TITLE_TIMEOUT,
   TOOL_TYPE,
@@ -3640,6 +3767,7 @@ export {
   VersionedSnapshotStore,
   WINDOWS_EMOJI_FALLBACK_FONT,
   YOUTUBE_STATES,
+  ZEN_MODE_TRANSITION_DURATION,
   ZOOM_STEP,
   addEventListener,
   allowFullScreen,
@@ -3667,7 +3795,6 @@ export {
   findLastIndex,
   focusNearestParent,
   getAllColorsSpecificShade,
-  getBucketFillBackgroundColor,
   getDateTime,
   getExportSource,
   getFeatureFlag,
@@ -3687,6 +3814,7 @@ export {
   getUpdatedTimestamp,
   getVersion,
   getVerticalOffset,
+  hasRTLChars,
   invariant,
   isAndroid,
   isAnyTrue,
@@ -3740,6 +3868,7 @@ export {
   randomId,
   randomInteger,
   reduceToCommonValue,
+  removeDarkModeFilter,
   removeSelection,
   rescalePoints,
   reseed,
@@ -3747,7 +3876,9 @@ export {
   rgbToHex2 as rgbToHex,
   safelyParseJSON,
   sceneCoordsToViewportCoords,
+  seededRandom,
   selectNode,
+  setColorAlpha,
   setDateTimeForTests,
   setDesktopUIMode,
   setFeatureFlag,