@myoc/excalidraw 0.19.518 → 0.19.520

package/CHANGELOG.md

@@ -72,6 +72,13 @@ Please add the latest change on the top under the correct section.
 
 ### Breaking changes
 
+- Theme changes initiated by the default UI are now delegated to `<Excalidraw onThemeChange={(theme) => ...} />` when supplied. If `onThemeChange` is not supplied, light/dark theme toggling still falls back to updating the internal editor state.
+
+  - `MainMenu.DefaultItems.ToggleTheme` no longer accepts the item-level `onSelect` callback. Host apps that need to control light/dark/system theme should pass `onThemeChange` to `<Excalidraw />` instead.
+  - `MainMenu.DefaultItems.ToggleTheme` with system theme support now uses `allowSystemTheme` together with `theme={Theme | "system"}` only to render the selected value. For the regular light/dark item, pass `allowSystemTheme={false}`.
+  - `CommandPalette.defaultItems.toggleTheme` was removed. The default theme command is now rendered by the command palette itself when `UIOptions.canvasActions.toggleTheme` enables the action (see below).
+  - `UIOptions.canvasActions.toggleTheme` still controls default theme UI availability. When it is `null`, it defaults to `true` if `props.theme` is omitted or `props.onThemeChange` is supplied, and otherwise defaults to disabled.
+
 - Renamed the `excalidrawAPI` prop to `onExcalidrawAPI`.
   - `onExcalidrawAPI` is now called on mount (instead of during constructor), and later on unmount (with `null` value). The API may be removed altogether in the future (you can use `onMount` & `onUmount` to manage the `ExcalidrawAPI` object (e.g. to cache it to a global state), already).
 
@@ -4760,4 +4767,163 @@ First release of `@excalidraw/excalidraw`## Excalidraw Library
 - Incorrect import for color (was moved to common)
 
 ---
+## Excalidraw Library
+
+**_This section lists the updates made to the excalidraw library and will not affect the integration._**
+
+### Features
+
+- Add ability to turn off compression for files that are smaller than a given size
+
+- Add lock tool to the dropdown and also add the status of the extra tools to be the same icon as the selected tool
+
+- Add view mode button
+
+- Add multiple image copy paste or drag and drop
+
+- Multiple image additions from clipboard
+
+- Add arrange elements action
+
+- Add top picks to appProps for both stoke color and background color
+
+### Fixes
+
+- Issues
+
+- Make mobile mode more myoc looking
+
+- Add normalise functionality
+
+- Update with excalidraw
+
+- Fix imports
+
+- Fix mutateGroup to use scene.mutateGroup
+
+- Imports
+
+- Ensure that fileId is different for compressed vs uncompressed file
+
+- Remove not working prop for dontResizeLimitMBs
+
+- Add smartview for mobile
+
+- Hide the alignment buttons if there is only one group selected (they do nothing if only one group is selected)
+
+- Use css vars already provided instead of hard coding directly from oc-gray
+
+- Remove unused variables
+
+- Pass the new top pick color props properly
+
+- Incorrect import for color (was moved to common)
+
+---
+## Excalidraw Library
+
+**_This section lists the updates made to the excalidraw library and will not affect the integration._**
+
+### Features
+
+- Add ability to turn off compression for files that are smaller than a given size
+
+- Add lock tool to the dropdown and also add the status of the extra tools to be the same icon as the selected tool
+
+- Add view mode button
+
+- Add multiple image copy paste or drag and drop
+
+- Multiple image additions from clipboard
+
+- Add arrange elements action
+
+- Add top picks to appProps for both stoke color and background color
+
+### Fixes
+
+- Issues
+
+- Make mobile mode more myoc looking
+
+- Add normalise functionality
+
+- Update with excalidraw
+
+- Fix imports
+
+- Fix mutateGroup to use scene.mutateGroup
+
+- Imports
+
+- Ensure that fileId is different for compressed vs uncompressed file
+
+- Remove not working prop for dontResizeLimitMBs
+
+- Add smartview for mobile
+
+- Hide the alignment buttons if there is only one group selected (they do nothing if only one group is selected)
+
+- Use css vars already provided instead of hard coding directly from oc-gray
+
+- Remove unused variables
+
+- Pass the new top pick color props properly
+
+- Incorrect import for color (was moved to common)
+
+---
+## Excalidraw Library
+
+**_This section lists the updates made to the excalidraw library and will not affect the integration._**
+
+### Features
+
+- Add ability to turn off compression for files that are smaller than a given size
+
+- Add lock tool to the dropdown and also add the status of the extra tools to be the same icon as the selected tool
+
+- Add view mode button
+
+- Add multiple image copy paste or drag and drop
+
+- Multiple image additions from clipboard
+
+- Add arrange elements action
+
+- Add top picks to appProps for both stoke color and background color
+
+### Fixes
+
+- Issues
+
+- Make mobile mode more myoc looking
+
+- Add normalise functionality
+
+- Update with excalidraw
+
+- Fix imports
+
+- Fix mutateGroup to use scene.mutateGroup
+
+- Imports
+
+- Ensure that fileId is different for compressed vs uncompressed file
+
+- Remove not working prop for dontResizeLimitMBs
+
+- Add smartview for mobile
+
+- Hide the alignment buttons if there is only one group selected (they do nothing if only one group is selected)
+
+- Use css vars already provided instead of hard coding directly from oc-gray
+
+- Remove unused variables
+
+- Pass the new top pick color props properly
+
+- Incorrect import for color (was moved to common)
+
+---
 

package/dist/dev/{chunk-36IX6I7U.js → chunk-FQHULQ5P.js}

@@ -1,6 +1,6 @@
 import {
   define_import_meta_env_default
-} from "./chunk-2ZDXTNY7.js";
+} from "./chunk-SJJUXTTF.js";
 import {
   __publicField
 } from "./chunk-XDFCUUT6.js";
@@ -27,6 +27,7 @@ import {
   DEFAULT_ELEMENT_PROPS,
   DEFAULT_FONT_FAMILY,
   DEFAULT_FONT_SIZE,
+  DEFAULT_ELEMENT_STROKE_WIDTH_KEY,
   DEFAULT_TEXT_ALIGN,
   DEFAULT_GRID_SIZE,
   EXPORT_SCALES,
@@ -59,12 +60,13 @@ var getDefaultAppState = () => {
     currentItemFontSize: DEFAULT_FONT_SIZE,
     currentItemOpacity: DEFAULT_ELEMENT_PROPS.opacity,
     currentItemRoughness: DEFAULT_ELEMENT_PROPS.roughness,
+    currentItemStrokeVariability: "constant",
     currentItemStartArrowhead: null,
     currentItemStrokeColor: DEFAULT_ELEMENT_PROPS.strokeColor,
     currentItemRoundness: isTestEnv() ? "sharp" : "round",
     currentItemArrowType: ARROW_TYPE.round,
     currentItemStrokeStyle: DEFAULT_ELEMENT_PROPS.strokeStyle,
-    currentItemStrokeWidth: DEFAULT_ELEMENT_PROPS.strokeWidth,
+    currentItemStrokeWidthKey: DEFAULT_ELEMENT_STROKE_WIDTH_KEY,
     currentItemTextAlign: DEFAULT_TEXT_ALIGN,
     currentHoveredFontFamily: null,
     cursorButton: "up",
@@ -136,6 +138,7 @@ var getDefaultAppState = () => {
       value: 1
     },
     viewModeEnabled: false,
+    viewModeOnly: false,
     showHyperlinkPopup: false,
     selectedLinearElement: null,
     snapLines: [],
@@ -182,10 +185,15 @@ var APP_STATE_STORAGE_CONF = /* @__PURE__ */ ((config) => config)({
   },
   currentItemOpacity: { browser: true, export: false, server: false },
   currentItemRoughness: { browser: true, export: false, server: false },
+  currentItemStrokeVariability: {
+    browser: true,
+    export: false,
+    server: false
+  },
   currentItemStartArrowhead: { browser: true, export: false, server: false },
   currentItemStrokeColor: { browser: true, export: false, server: false },
   currentItemStrokeStyle: { browser: true, export: false, server: false },
-  currentItemStrokeWidth: { browser: true, export: false, server: false },
+  currentItemStrokeWidthKey: { browser: true, export: false, server: false },
   currentItemTextAlign: { browser: true, export: false, server: false },
   currentHoveredFontFamily: { browser: false, export: false, server: false },
   cursorButton: { browser: true, export: false, server: false },
@@ -256,6 +264,7 @@ var APP_STATE_STORAGE_CONF = /* @__PURE__ */ ((config) => config)({
   zenModeEnabled: { browser: true, export: false, server: false },
   zoom: { browser: true, export: false, server: false },
   viewModeEnabled: { browser: false, export: false, server: false },
+  viewModeOnly: { browser: false, export: false, server: false },
   showHyperlinkPopup: { browser: false, export: false, server: false },
   selectedLinearElement: { browser: true, export: false, server: false },
   snapLines: { browser: false, export: false, server: false },
@@ -415,6 +424,7 @@ import {
   hasBackground,
   hasStrokeWidth,
   hasStrokeStyle,
+  hasFreedrawMode,
   canHaveArrowheads,
   canChangeRoundness
 } from "@excalidraw/element";
@@ -3155,7 +3165,10 @@ var bootstrapCanvas = ({
       context.clearRect(0, 0, normalizedWidth, normalizedHeight);
     }
     context.save();
-    context.fillStyle = theme === THEME2.DARK ? applyDarkModeFilter(viewBackgroundColor) : viewBackgroundColor;
+    context.fillStyle = applyDarkModeFilter(
+      viewBackgroundColor,
+      theme === THEME2.DARK
+    );
     context.fillRect(0, 0, normalizedWidth, normalizedHeight);
     context.restore();
   } else {
@@ -3723,6 +3736,11 @@ var renderElementToSvg = (element, elementsMap, rsvg, svgRoot, files, offsetX, o
         );
         offsetX = offsetX || 0;
         offsetY = offsetY || 0;
+        maskPath.setAttribute("maskUnits", "userSpaceOnUse");
+        maskPath.setAttribute("x", "0");
+        maskPath.setAttribute("y", "0");
+        maskPath.setAttribute("width", `${element.width + 100 + offsetX}`);
+        maskPath.setAttribute("height", `${element.height + 100 + offsetY}`);
         maskRectVisible.setAttribute("x", "0");
         maskRectVisible.setAttribute("y", "0");
         maskRectVisible.setAttribute("fill", "#fff");
@@ -3803,7 +3821,10 @@ var renderElementToSvg = (element, elementsMap, rsvg, svgRoot, files, offsetX, o
           const path = svgRoot.ownerDocument.createElementNS(SVG_NS, "path");
           path.setAttribute(
             "fill",
-            renderConfig.theme === THEME4.DARK ? applyDarkModeFilter3(element.strokeColor) : element.strokeColor
+            applyDarkModeFilter3(
+              element.strokeColor,
+              renderConfig.theme === THEME4.DARK
+            )
           );
           path.setAttribute("d", shape);
           wrapper.appendChild(path);
@@ -3974,7 +3995,10 @@ var renderElementToSvg = (element, elementsMap, rsvg, svgRoot, files, offsetX, o
         rect.setAttribute("fill", "none");
         rect.setAttribute(
           "stroke",
-          renderConfig.theme === THEME4.DARK ? applyDarkModeFilter3(FRAME_STYLE2.strokeColor) : FRAME_STYLE2.strokeColor
+          applyDarkModeFilter3(
+            FRAME_STYLE2.strokeColor,
+            renderConfig.theme === THEME4.DARK
+          )
         );
         rect.setAttribute("stroke-width", FRAME_STYLE2.strokeWidth.toString());
         addToRoot(rect, element);
@@ -4014,7 +4038,10 @@ var renderElementToSvg = (element, elementsMap, rsvg, svgRoot, files, offsetX, o
           text.setAttribute("font-size", `${element.fontSize}px`);
           text.setAttribute(
             "fill",
-            renderConfig.theme === THEME4.DARK ? applyDarkModeFilter3(element.strokeColor) : element.strokeColor
+            applyDarkModeFilter3(
+              element.strokeColor,
+              renderConfig.theme === THEME4.DARK
+            )
           );
           text.setAttribute("text-anchor", textAnchor);
           text.setAttribute("style", "white-space: pre;");
@@ -4350,7 +4377,7 @@ var exportToSvg = async (elements, appState, files, opts) => {
     rect.setAttribute("height", `${height}`);
     rect.setAttribute(
       "fill",
-      exportWithDarkMode ? applyDarkModeFilter4(viewBackgroundColor) : viewBackgroundColor
+      applyDarkModeFilter4(viewBackgroundColor, exportWithDarkMode)
     );
     svgRoot.appendChild(rect);
   }
@@ -4440,6 +4467,7 @@ var getExportSize = (elements, exportPadding, scale) => {
 import { isFiniteNumber, isValidPoint, pointFrom as pointFrom2 } from "@excalidraw/math";
 import {
   DEFAULT_FONT_FAMILY as DEFAULT_FONT_FAMILY2,
+  DEFAULT_STROKE_STREAMLINE,
   DEFAULT_TEXT_ALIGN as DEFAULT_TEXT_ALIGN2,
   DEFAULT_VERTICAL_ALIGN,
   FONT_FAMILY as FONT_FAMILY3,
@@ -4454,7 +4482,9 @@ import {
   arrayToMap as arrayToMap2,
   getSizeFromPoints,
   normalizeLink as normalizeLink2,
-  getLineHeight
+  getLineHeight,
+  STROKE_WIDTH,
+  STROKE_WIDTH_KEYS
 } from "@excalidraw/common";
 import {
   calculateFixedPointForNonElbowArrowBinding,
@@ -4485,7 +4515,25 @@ import { syncInvalidIndices as syncInvalidIndices2 } 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: [pointFrom2(0, 0), pointFrom2(100, 100)],
+    isDeleted: true
+  };
+};
 var restoreLinearElementPoints = (points, width, height) => {
   const restoredPoints = Array.isArray(points) ? points.reduce((acc, point) => {
     if (isValidPoint(point)) {
@@ -4544,6 +4592,23 @@ var AllowedExcalidrawActiveTools = {
   laser: false,
   magicframe: false
 };
+var ALLOWED_STROKE_VARIABILITIES = /* @__PURE__ */ new Set([
+  "constant",
+  "variable"
+]);
+var restoreStrokeVariability = (variability, defaultValue) => {
+  return typeof variability === "string" && ALLOWED_STROKE_VARIABILITIES.has(variability) ? variability : defaultValue;
+};
+var getStrokeWidthKey = (strokeWidth) => {
+  return isFiniteNumber(strokeWidth) ? STROKE_WIDTH_KEYS.find((key) => STROKE_WIDTH[key] === strokeWidth) ?? null : null;
+};
+var restoreFreedrawStrokeOptions = (strokeOptions) => {
+  const options = strokeOptions && typeof strokeOptions === "object" ? strokeOptions : null;
+  return {
+    variability: restoreStrokeVariability(options?.variability, "variable"),
+    streamline: isFiniteNumber(options?.streamline) ? options?.streamline : DEFAULT_STROKE_STREAMLINE
+  };
+};
 var getFontFamilyByName = (fontFamilyName) => {
   if (Object.keys(FONT_FAMILY3).includes(fontFamilyName)) {
     return FONT_FAMILY3[fontFamilyName];
@@ -4721,6 +4786,7 @@ var restoreElement = (element, targetElementsMap, existingElementsMap, opts) =>
       return restoreElementWithProperties(element, {
         points: points2,
         simulatePressure: element.simulatePressure,
+        strokeOptions: restoreFreedrawStrokeOptions(element.strokeOptions),
         pressures
       });
     }
@@ -4729,6 +4795,7 @@ var restoreElement = (element, targetElementsMap, existingElementsMap, opts) =>
         status: element.status || "pending",
         fileId: element.fileId,
         fileName: element.fileName ?? null,
+        thumbHash: typeof element.thumbHash === "string" ? element.thumbHash : null,
         scale: element.scale || [1, 1],
         crop: element.crop ?? null
       });
@@ -4751,7 +4818,7 @@ var restoreElement = (element, targetElementsMap, existingElementsMap, opts) =>
           y: y ?? 0
         }));
       }
-      return restoreElementWithProperties(element, {
+      const restoredLine = restoreElementWithProperties(element, {
         type: "line",
         startBinding: null,
         endBinding: null,
@@ -4765,6 +4832,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);
@@ -4818,24 +4886,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":
@@ -5064,6 +5115,9 @@ var restoreAppState = (appState, localAppState) => {
   if (boxSelectionMode !== void 0) {
     nextAppState.boxSelectionMode = boxSelectionMode;
   }
+  if (appState.currentItemStrokeWidth !== void 0) {
+    nextAppState.currentItemStrokeWidthKey = getStrokeWidthKey(appState.currentItemStrokeWidth) ?? defaultAppState.currentItemStrokeWidthKey;
+  }
   return {
     ...nextAppState,
     cursorButton: localAppState?.cursorButton || "up",
@@ -5102,7 +5156,7 @@ var parseFileContents = async (blob) => {
   let contents;
   if (blob.type === MIME_TYPES6.png) {
     try {
-      return await (await import("./data/image-VHQDH63K.js")).decodePngMetadata(blob);
+      return await (await import("./data/image-X3JCQEUX.js")).decodePngMetadata(blob);
     } catch (error) {
       if (error.message === "INVALID") {
         throw new ImageSceneDataError(
@@ -5413,6 +5467,7 @@ export {
   hasBackground,
   hasStrokeWidth,
   hasStrokeStyle,
+  hasFreedrawMode,
   canHaveArrowheads,
   canChangeRoundness,
   AbortError,
@@ -5463,4 +5518,4 @@ export {
   createFile,
   normalizeFile
 };
-//# sourceMappingURL=chunk-36IX6I7U.js.map
+//# sourceMappingURL=chunk-FQHULQ5P.js.map