@excalidraw/common 0.18.0-6135548 → 0.18.0-699826

package/dist/dev/index.js

@@ -1394,7 +1394,10 @@ var cssInvert = (r, g, b, percent) => {
   const invertedB = invertComponent(b);
   return { r: invertedR, g: invertedG, b: invertedB };
 };
-var applyDarkModeFilter = (color) => {
+var applyDarkModeFilter = (color, enable = true) => {
+  if (!enable) {
+    return color;
+  }
   const cached = DARK_MODE_COLORS_CACHE?.get(color);
   if (cached) {
     return cached;
@@ -1562,7 +1565,7 @@ var normalizeInputColor = (color) => {
   }
   const tc = tinycolor(color);
   if (tc.isValid()) {
-    if (tc.getFormat() === "hex" && !color.startsWith("#")) {
+    if (["hex", "hex8"].includes(tc.getFormat()) && !color.startsWith("#")) {
       return `#${color}`;
     }
     return color;
@@ -1659,7 +1662,8 @@ var CLASSES = {
   SEARCH_MENU_INPUT_WRAPPER: "layer-ui__search-inputWrapper",
   CONVERT_ELEMENT_TYPE_POPUP: "ConvertElementTypePopup",
   SHAPE_ACTIONS_THEME_SCOPE: "shape-actions-theme-scope",
-  FRAME_NAME: "frame-name"
+  FRAME_NAME: "frame-name",
+  DROPDOWN_MENU_EVENT_WRAPPER: "dropdown-menu-event-wrapper"
 };
 var FONT_SIZES = {
   sm: 16,
@@ -1718,6 +1722,7 @@ var THEME = {
   LIGHT: "light",
   DARK: "dark"
 };
+var DARK_THEME_FILTER = "invert(93%) hue-rotate(180deg)";
 var FRAME_STYLE = {
   strokeColor: "#bbb",
   strokeWidth: 2,
@@ -1766,6 +1771,7 @@ var STRING_MIME_TYPES = {
   json: "application/json",
   // excalidraw data
   excalidraw: "application/vnd.excalidraw+json",
+  excalidrawClipboard: "application/vnd.excalidraw.clipboard+json",
   // LEGACY: fully-qualified library JSON data
   excalidrawlib: "application/vnd.excalidrawlib+json",
   // list of excalidraw library item ids
@@ -1833,8 +1839,10 @@ var DEFAULT_UI_OPTIONS = {
 var MAX_DECIMALS_FOR_SVG_EXPORT = 2;
 var EXPORT_SCALES = [1, 2, 3];
 var DEFAULT_EXPORT_PADDING = 10;
-var DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT = 1440;
-var MAX_ALLOWED_FILE_BYTES = 4 * 1024 * 1024;
+var DEFAULT_IMAGE_OPTIONS = {
+  maxWidthOrHeight: 1440,
+  maxFileSizeBytes: 4 * 1024 * 1024
+};
 var SVG_NS = "http://www.w3.org/2000/svg";
 var SVG_DOCUMENT_PREAMBLE = `<?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
@@ -2481,7 +2489,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.type === "search");
+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
 }) => {
@@ -2526,32 +2534,23 @@ var debounce = (fn, timeout) => {
   };
   return ret;
 };
-var throttleRAF = (fn, opts) => {
+var throttleRAF = (fn) => {
   let timerId = null;
   let lastArgs = null;
-  let lastArgsTrailing = null;
-  const scheduleFunc = (args) => {
+  const scheduleFunc = () => {
     timerId = window.requestAnimationFrame(() => {
       timerId = null;
-      fn(...args);
+      const args = lastArgs;
       lastArgs = null;
-      if (lastArgsTrailing) {
-        lastArgs = lastArgsTrailing;
-        lastArgsTrailing = null;
-        scheduleFunc(lastArgs);
+      if (args) {
+        fn(...args);
       }
     });
   };
   const ret = (...args) => {
-    if (isTestEnv()) {
-      fn(...args);
-      return;
-    }
     lastArgs = args;
     if (timerId === null) {
-      scheduleFunc(lastArgs);
-    } else if (opts?.trailing) {
-      lastArgsTrailing = args;
+      scheduleFunc();
     }
   };
   ret.flush = () => {
@@ -2560,12 +2559,12 @@ var throttleRAF = (fn, opts) => {
       timerId = null;
     }
     if (lastArgs) {
-      fn(...lastArgsTrailing || lastArgs);
-      lastArgs = lastArgsTrailing = null;
+      fn(...lastArgs);
+      lastArgs = null;
     }
   };
   ret.cancel = () => {
-    lastArgs = lastArgsTrailing = null;
+    lastArgs = null;
     if (timerId !== null) {
       cancelAnimationFrame(timerId);
       timerId = null;
@@ -3156,6 +3155,9 @@ var setFeatureFlag = (flag, value) => {
     console.error("unable to set feature flag", e);
   }
 };
+var oneOf = (needle, haystack) => {
+  return haystack.includes(needle);
+};
 
 // src/random.ts
 var random = new Random(Date.now());
@@ -3229,6 +3231,298 @@ var Emitter = class {
     this.subscribers = [];
   }
 };
+
+// src/appEventBus.ts
+init_define_import_meta_env();
+var AppEventBus = class {
+  constructor(behavior) {
+    this.behavior = behavior;
+  }
+  emitters = /* @__PURE__ */ new Map();
+  lastPayload = /* @__PURE__ */ new Map();
+  emittedOnce = /* @__PURE__ */ new Set();
+  getEmitter(name) {
+    let emitter = this.emitters.get(name);
+    if (!emitter) {
+      emitter = new Emitter();
+      this.emitters.set(name, emitter);
+    }
+    return emitter;
+  }
+  toPromiseValue(args) {
+    return args.length === 1 ? args[0] : args;
+  }
+  on(name, callback) {
+    const eventBehavior = this.behavior[name];
+    const cachedPayload = this.lastPayload.get(name);
+    if (callback) {
+      if (eventBehavior.replay === "last" && cachedPayload) {
+        queueMicrotask(() => callback(...cachedPayload));
+        if (eventBehavior.cardinality === "once") {
+          return () => {
+          };
+        }
+      }
+      return this.getEmitter(name).on(callback);
+    }
+    if (eventBehavior.cardinality !== "once" || eventBehavior.replay !== "last") {
+      throw new Error(`Event "${String(name)}" requires a callback`);
+    }
+    if (cachedPayload) {
+      return Promise.resolve(this.toPromiseValue(cachedPayload));
+    }
+    return new Promise((resolve) => {
+      this.getEmitter(name).once((...args) => {
+        resolve(this.toPromiseValue(args));
+      });
+    });
+  }
+  emit(name, ...args) {
+    const eventBehavior = this.behavior[name];
+    if (!isProdEnv()) {
+      if (eventBehavior.cardinality === "once") {
+        if (this.emittedOnce.has(name)) {
+          throw new Error(`Event "${String(name)}" can only be emitted once`);
+        }
+        this.emittedOnce.add(name);
+      }
+    }
+    if (eventBehavior.replay === "last") {
+      this.lastPayload.set(name, args);
+    }
+    try {
+      this.getEmitter(name).trigger(...args);
+    } finally {
+      if (eventBehavior.cardinality === "once") {
+        this.getEmitter(name).clear();
+      }
+    }
+  }
+  clear() {
+    this.lastPayload.clear();
+    this.emittedOnce.clear();
+    for (const emitter of this.emitters.values()) {
+      emitter.clear();
+    }
+    this.emitters.clear();
+  }
+};
+
+// src/versionedSnapshotStore.ts
+init_define_import_meta_env();
+var VersionedSnapshotStore = class {
+  constructor(initialValue, isEqual = Object.is) {
+    this.isEqual = isEqual;
+    this.value = initialValue;
+  }
+  version = 0;
+  value;
+  waiters = /* @__PURE__ */ new Set();
+  subscribers = /* @__PURE__ */ new Set();
+  getSnapshot() {
+    return { version: this.version, value: this.value };
+  }
+  set(nextValue) {
+    if (this.isEqual(this.value, nextValue)) {
+      return false;
+    }
+    this.value = nextValue;
+    this.version += 1;
+    const snapshot = this.getSnapshot();
+    for (const subscriber of this.subscribers) {
+      subscriber(snapshot);
+    }
+    for (const waiter of this.waiters) {
+      waiter(snapshot);
+    }
+    this.waiters.clear();
+    return true;
+  }
+  update(updater) {
+    return this.set(updater(this.value));
+  }
+  subscribe(subscriber) {
+    this.subscribers.add(subscriber);
+    return () => {
+      this.subscribers.delete(subscriber);
+    };
+  }
+  pull(sinceVersion = -1) {
+    if (this.version !== sinceVersion) {
+      return Promise.resolve(this.getSnapshot());
+    }
+    return new Promise((resolve) => {
+      this.waiters.add(resolve);
+    });
+  }
+};
+
+// debug.ts
+init_define_import_meta_env();
+var lessPrecise = (num, precision = 5) => parseFloat(num.toPrecision(precision));
+var getAvgFrameTime = (times) => lessPrecise(times.reduce((a, b) => a + b) / times.length);
+var Debug = class _Debug {
+  static DEBUG_LOG_TIMES = true;
+  static TIMES_AGGR = {};
+  static TIMES_AVG = {};
+  static LAST_DEBUG_LOG_CALL = 0;
+  static DEBUG_LOG_INTERVAL_ID = null;
+  static LAST_FRAME_TIMESTAMP = 0;
+  static FRAME_COUNT = 0;
+  static ANIMATION_FRAME_ID = null;
+  static scheduleAnimationFrame = () => {
+    if (_Debug.DEBUG_LOG_INTERVAL_ID !== null) {
+      _Debug.ANIMATION_FRAME_ID = requestAnimationFrame((timestamp) => {
+        if (_Debug.LAST_FRAME_TIMESTAMP !== timestamp) {
+          _Debug.LAST_FRAME_TIMESTAMP = timestamp;
+          _Debug.FRAME_COUNT++;
+        }
+        if (_Debug.DEBUG_LOG_INTERVAL_ID !== null) {
+          _Debug.scheduleAnimationFrame();
+        }
+      });
+    }
+  };
+  static setupInterval = () => {
+    if (_Debug.DEBUG_LOG_INTERVAL_ID === null) {
+      console.info("%c(starting perf recording)", "color: lime");
+      _Debug.DEBUG_LOG_INTERVAL_ID = window.setInterval(_Debug.debugLogger, 1e3);
+      _Debug.scheduleAnimationFrame();
+    }
+    _Debug.LAST_DEBUG_LOG_CALL = Date.now();
+  };
+  static debugLogger = () => {
+    if (_Debug.DEBUG_LOG_TIMES) {
+      for (const [name, { t, times }] of Object.entries(_Debug.TIMES_AGGR)) {
+        if (times.length) {
+          console.info(
+            name,
+            lessPrecise(times.reduce((a, b) => a + b)),
+            times.sort((a, b) => a - b).map((x) => lessPrecise(x))
+          );
+          _Debug.TIMES_AGGR[name] = { t, times: [] };
+        }
+      }
+      for (const [name, { t, times, avg }] of Object.entries(_Debug.TIMES_AVG)) {
+        if (times.length) {
+          const totalTime = times.reduce((a, b) => a + b);
+          const avgFrameTime = lessPrecise(totalTime / _Debug.FRAME_COUNT);
+          console.info(
+            name,
+            `- ${times.length} calls - ${avgFrameTime}ms/frame across ${_Debug.FRAME_COUNT} frames (${lessPrecise(
+              avgFrameTime / 16.67 * 100,
+              1
+            )}% of frame budget)`
+          );
+          _Debug.TIMES_AVG[name] = {
+            t,
+            times: [],
+            avg: avg != null ? getAvgFrameTime([avg, avgFrameTime]) : avgFrameTime
+          };
+        }
+      }
+    }
+    _Debug.FRAME_COUNT = 0;
+    if (Date.now() - _Debug.LAST_DEBUG_LOG_CALL > 600 && _Debug.DEBUG_LOG_INTERVAL_ID !== null) {
+      console.info("%c(stopping perf recording)", "color: red");
+      window.clearInterval(_Debug.DEBUG_LOG_INTERVAL_ID);
+      window.cancelAnimationFrame(_Debug.ANIMATION_FRAME_ID);
+      _Debug.ANIMATION_FRAME_ID = null;
+      _Debug.FRAME_COUNT = 0;
+      _Debug.LAST_FRAME_TIMESTAMP = 0;
+      _Debug.DEBUG_LOG_INTERVAL_ID = null;
+      _Debug.TIMES_AGGR = {};
+      _Debug.TIMES_AVG = {};
+    }
+  };
+  static logTime = (time, name = "default") => {
+    _Debug.setupInterval();
+    const now = performance.now();
+    const { t, times } = _Debug.TIMES_AGGR[name] = _Debug.TIMES_AGGR[name] || {
+      t: 0,
+      times: []
+    };
+    if (t) {
+      times.push(time != null ? time : now - t);
+    }
+    _Debug.TIMES_AGGR[name].t = now;
+  };
+  static logTimeAverage = (time, name = "default") => {
+    _Debug.setupInterval();
+    const now = performance.now();
+    const { t, times } = _Debug.TIMES_AVG[name] = _Debug.TIMES_AVG[name] || {
+      t: 0,
+      times: []
+    };
+    if (t) {
+      times.push(time != null ? time : now - t);
+    }
+    _Debug.TIMES_AVG[name].t = now;
+  };
+  static logWrapper = (type) => (fn, name = "default") => {
+    return (...args) => {
+      const t0 = performance.now();
+      const ret = fn(...args);
+      _Debug[type](performance.now() - t0, name);
+      return ret;
+    };
+  };
+  static logTimeWrap = _Debug.logWrapper("logTime");
+  static logTimeAverageWrap = _Debug.logWrapper("logTimeAverage");
+  static perfWrap = (fn, name = "default") => {
+    return (...args) => {
+      console.time(name);
+      const ret = fn(...args);
+      console.timeEnd(name);
+      return ret;
+    };
+  };
+  static CHANGED_CACHE = {};
+  static logChanged(name, obj) {
+    const prev = _Debug.CHANGED_CACHE[name];
+    _Debug.CHANGED_CACHE[name] = obj;
+    if (!prev) {
+      return;
+    }
+    const allKeys = /* @__PURE__ */ new Set([...Object.keys(prev), ...Object.keys(obj)]);
+    const changed = {};
+    for (const key of allKeys) {
+      const prevVal = prev[key];
+      const nextVal = obj[key];
+      if (!deepEqual(prevVal, nextVal)) {
+        changed[key] = { prev: prevVal, next: nextVal };
+      }
+    }
+    if (Object.keys(changed).length > 0) {
+      console.info(`[${name}] changed:`, changed);
+    }
+  }
+};
+function deepEqual(a, b) {
+  if (Object.is(a, b)) {
+    return true;
+  }
+  if (a === null || b === null || typeof a !== "object" || typeof b !== "object") {
+    return false;
+  }
+  if (Array.isArray(a) !== Array.isArray(b)) {
+    return false;
+  }
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+  for (const key of keysA) {
+    if (!deepEqual(
+      a[key],
+      b[key]
+    )) {
+      return false;
+    }
+  }
+  return true;
+}
 export {
   ACTIVE_THRESHOLD,
   ALLOWED_PASTE_MIME_TYPES,
@@ -3236,6 +3530,7 @@ export {
   ARROW_LABEL_FONT_SIZE_TO_MIN_WIDTH_RATIO,
   ARROW_LABEL_WIDTH_FRACTION,
   ARROW_TYPE,
+  AppEventBus,
   BIND_MODE_TIMEOUT,
   BOUND_TEXT_PADDING,
   BinaryHeap,
@@ -3251,6 +3546,7 @@ export {
   COLOR_VOICE_CALL,
   COLOR_WHITE,
   CURSOR_TYPE,
+  DARK_THEME_FILTER,
   DEFAULT_ADAPTIVE_RADIUS,
   DEFAULT_CANVAS_BACKGROUND_PICKS,
   DEFAULT_CHART_COLOR_INDEX,
@@ -3268,8 +3564,8 @@ export {
   DEFAULT_FONT_SIZE,
   DEFAULT_GRID_SIZE,
   DEFAULT_GRID_STEP,
+  DEFAULT_IMAGE_OPTIONS,
   DEFAULT_LASER_COLOR,
-  DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT,
   DEFAULT_PROPORTIONAL_RADIUS,
   DEFAULT_REDUCED_GLOBAL_ALPHA,
   DEFAULT_SIDEBAR,
@@ -3280,6 +3576,7 @@ export {
   DEFAULT_VERTICAL_ALIGN,
   DOUBLE_TAP_POSITION_THRESHOLD,
   DRAGGING_THRESHOLD,
+  Debug,
   EDITOR_LS_KEYS,
   ELEMENT_LINK_KEY,
   ELEMENT_READY_TO_ERASE_OPACITY,
@@ -3311,7 +3608,6 @@ export {
   LINE_CONFIRM_THRESHOLD,
   LINE_POLYGON_POINT_MERGE_DISTANCE,
   LOCAL_FONT_PROTOCOL,
-  MAX_ALLOWED_FILE_BYTES,
   MAX_CUSTOM_COLORS_USED_IN_CANVAS,
   MAX_DECIMALS_FOR_SVG_EXPORT,
   MAX_ZOOM,
@@ -3359,6 +3655,7 @@ export {
   VERSIONS,
   VERSION_TIMEOUT,
   VERTICAL_ALIGN,
+  VersionedSnapshotStore,
   WINDOWS_EMOJI_FALLBACK_FONT,
   YOUTUBE_STATES,
   ZOOM_STEP,
@@ -3452,6 +3749,7 @@ export {
   normalizeEOL,
   normalizeInputColor,
   normalizeLink,
+  oneOf,
   preventUnload,
   promiseTry,
   queryFocusableElements,