@myoc/excalidraw 0.19.512 → 0.19.514

package/CHANGELOG.md

@@ -4442,4 +4442,57 @@ 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)
+
+---
 

package/dist/dev/{chunk-OBLRXIUK.js → chunk-BI6BDZVY.js}

@@ -1,6 +1,6 @@
 import {
   define_import_meta_env_default
-} from "./chunk-QHLG4OQL.js";
+} from "./chunk-FW62QUKV.js";
 import {
   __publicField
 } from "./chunk-XDFCUUT6.js";
@@ -5101,7 +5101,7 @@ var parseFileContents = async (blob) => {
   let contents;
   if (blob.type === MIME_TYPES6.png) {
     try {
-      return await (await import("./data/image-R7FQP7SA.js")).decodePngMetadata(blob);
+      return await (await import("./data/image-WGZL7YPK.js")).decodePngMetadata(blob);
     } catch (error) {
       if (error.message === "INVALID") {
         throw new ImageSceneDataError(
@@ -5462,4 +5462,4 @@ export {
   createFile,
   normalizeFile
 };
-//# sourceMappingURL=chunk-OBLRXIUK.js.map
+//# sourceMappingURL=chunk-BI6BDZVY.js.map

package/dist/dev/{chunk-QHLG4OQL.js → chunk-FW62QUKV.js}

@@ -1,7 +1,7 @@
 // <define:import.meta.env>
-var define_import_meta_env_default = { MODE: "development", VITE_APP_BACKEND_V2_GET_URL: "https://json-dev.excalidraw.com/api/v2/", VITE_APP_BACKEND_V2_POST_URL: "https://json-dev.excalidraw.com/api/v2/post/", VITE_APP_LIBRARY_URL: "https://libraries.excalidraw.com", VITE_APP_LIBRARY_BACKEND: "https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries", VITE_APP_WS_SERVER_URL: "http://localhost:3002", VITE_APP_PLUS_LP: "https://plus.excalidraw.com", VITE_APP_PLUS_APP: "http://localhost:3000", VITE_APP_AI_BACKEND: "http://localhost:3016", VITE_APP_FIREBASE_CONFIG: '{"apiKey":"AIzaSyCMkxA60XIW8KbqMYL7edC4qT5l4qHX2h8","authDomain":"excalidraw-oss-dev.firebaseapp.com","projectId":"excalidraw-oss-dev","storageBucket":"excalidraw-oss-dev.appspot.com","messagingSenderId":"664559512677","appId":"1:664559512677:web:a385181f2928d328a7aa8c"}', VITE_APP_DEV_DISABLE_LIVE_RELOAD: "", VITE_APP_ENABLE_TRACKING: "true", FAST_REFRESH: "false", VITE_APP_PORT: "3001", VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX: "", VITE_APP_COLLAPSE_OVERLAY: "true", VITE_APP_ENABLE_ESLINT: "true", VITE_APP_ENABLE_PWA: "false", VITE_APP_PLUS_EXPORT_PUBLIC_KEY: "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAm2g5T+Rub6Kbf1Mf57t0\n7r2zeHuVg4dla3r5ryXMswtzz6x767octl6oLThn33mQsPSy3GKglFZoCTXJR4ij\nba8SxB04sL/N8eRrKja7TFWjCVtRwTTfyy771NYYNFVJclkxHyE5qw4m27crHF1y\nUNWEjuqNMi/lwAErS9fFa2oJlWyT8U7zzv/5kQREkxZI6y9v0AF3qcbsy2731FnD\ns9ChJvOUW9toIab2gsIdrKW8ZNpu084ZFVKb6LNjvIXI1Se4oMTHeszXzNptzlot\nkdxxjOoaQMAyfljFSot1F1FlU6MQlag7UnFGvFjRHN1JI5q4K+n3a67DX+TMyRqS\nHQIDAQAB", VITE_APP_DISABLE_PREVENT_UNLOAD: "", PKG_NAME: "@myoc/excalidraw", PKG_VERSION: "0.19.511", DEV: true };
+var define_import_meta_env_default = { MODE: "development", VITE_APP_BACKEND_V2_GET_URL: "https://json-dev.excalidraw.com/api/v2/", VITE_APP_BACKEND_V2_POST_URL: "https://json-dev.excalidraw.com/api/v2/post/", VITE_APP_LIBRARY_URL: "https://libraries.excalidraw.com", VITE_APP_LIBRARY_BACKEND: "https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries", VITE_APP_WS_SERVER_URL: "http://localhost:3002", VITE_APP_PLUS_LP: "https://plus.excalidraw.com", VITE_APP_PLUS_APP: "http://localhost:3000", VITE_APP_AI_BACKEND: "http://localhost:3016", VITE_APP_FIREBASE_CONFIG: '{"apiKey":"AIzaSyCMkxA60XIW8KbqMYL7edC4qT5l4qHX2h8","authDomain":"excalidraw-oss-dev.firebaseapp.com","projectId":"excalidraw-oss-dev","storageBucket":"excalidraw-oss-dev.appspot.com","messagingSenderId":"664559512677","appId":"1:664559512677:web:a385181f2928d328a7aa8c"}', VITE_APP_DEV_DISABLE_LIVE_RELOAD: "", VITE_APP_ENABLE_TRACKING: "true", FAST_REFRESH: "false", VITE_APP_PORT: "3001", VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX: "", VITE_APP_COLLAPSE_OVERLAY: "true", VITE_APP_ENABLE_ESLINT: "true", VITE_APP_ENABLE_PWA: "false", VITE_APP_PLUS_EXPORT_PUBLIC_KEY: "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAm2g5T+Rub6Kbf1Mf57t0\n7r2zeHuVg4dla3r5ryXMswtzz6x767octl6oLThn33mQsPSy3GKglFZoCTXJR4ij\nba8SxB04sL/N8eRrKja7TFWjCVtRwTTfyy771NYYNFVJclkxHyE5qw4m27crHF1y\nUNWEjuqNMi/lwAErS9fFa2oJlWyT8U7zzv/5kQREkxZI6y9v0AF3qcbsy2731FnD\ns9ChJvOUW9toIab2gsIdrKW8ZNpu084ZFVKb6LNjvIXI1Se4oMTHeszXzNptzlot\nkdxxjOoaQMAyfljFSot1F1FlU6MQlag7UnFGvFjRHN1JI5q4K+n3a67DX+TMyRqS\nHQIDAQAB", VITE_APP_DISABLE_PREVENT_UNLOAD: "", PKG_NAME: "@myoc/excalidraw", PKG_VERSION: "0.19.512", DEV: true };
 
 export {
   define_import_meta_env_default
 };
-//# sourceMappingURL=chunk-QHLG4OQL.js.map
+//# sourceMappingURL=chunk-FW62QUKV.js.map

package/dist/dev/data/{image-R7FQP7SA.js → image-WGZL7YPK.js}

@@ -2,12 +2,12 @@ import {
   decodePngMetadata,
   encodePngMetadata,
   getTEXtChunk
-} from "../chunk-OBLRXIUK.js";
-import "../chunk-QHLG4OQL.js";
+} from "../chunk-BI6BDZVY.js";
+import "../chunk-FW62QUKV.js";
 import "../chunk-XDFCUUT6.js";
 export {
   decodePngMetadata,
   encodePngMetadata,
   getTEXtChunk
 };
-//# sourceMappingURL=image-R7FQP7SA.js.map
+//# sourceMappingURL=image-WGZL7YPK.js.map

package/dist/dev/index.js

@@ -57,10 +57,10 @@ import {
   saveAsJSON,
   serializeAsJSON,
   strokeRectWithRotation_simple
-} from "./chunk-OBLRXIUK.js";
+} from "./chunk-BI6BDZVY.js";
 import {
   define_import_meta_env_default
-} from "./chunk-QHLG4OQL.js";
+} from "./chunk-FW62QUKV.js";
 import {
   en_default
 } from "./chunk-ZGRXNVW4.js";
@@ -9611,7 +9611,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./data/image-R7FQP7SA.js").then(
+        (blob2) => import("./data/image-WGZL7YPK.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -19881,17 +19881,29 @@ var Popover6 = ({
 // components/ContextMenu.tsx
 import { jsx as jsx62, jsxs as jsxs29 } from "react/jsx-runtime";
 var CONTEXT_MENU_SEPARATOR = "separator";
+var isCustomContextMenuItem = (item) => "onSelect" in item;
 var ContextMenu = React19.memo(
   ({ actionManager, items, top, left, onClose }) => {
     const appState = useExcalidrawAppState();
     const elements = useExcalidrawElements();
     const filteredItems = items.reduce((acc, item) => {
-      if (item && (item === CONTEXT_MENU_SEPARATOR || !item.predicate || item.predicate(
+      if (!item) {
+        return acc;
+      }
+      if (item === CONTEXT_MENU_SEPARATOR) {
+        acc.push(item);
+        return acc;
+      }
+      if (isCustomContextMenuItem(item)) {
+        acc.push(item);
+        return acc;
+      }
+      if (!item.predicate || item.predicate(
         elements,
         appState,
         actionManager.app.props,
         actionManager.app
-      ))) {
+      )) {
         acc.push(item);
       }
       return acc;
@@ -19922,6 +19934,24 @@ var ContextMenu = React19.memo(
                 }
                 return /* @__PURE__ */ jsx62("hr", { className: "context-menu-item-separator" }, idx);
               }
+              if (isCustomContextMenuItem(item)) {
+                return /* @__PURE__ */ jsx62(
+                  "li",
+                  {
+                    "data-testid": item.key,
+                    onClick: () => {
+                      onClose(() => {
+                        item.onSelect();
+                      });
+                    },
+                    children: /* @__PURE__ */ jsxs29("button", { type: "button", className: "context-menu-item", children: [
+                      /* @__PURE__ */ jsx62("div", { className: "context-menu-item__label", children: item.label }),
+                      /* @__PURE__ */ jsx62("kbd", { className: "context-menu-item__shortcut" })
+                    ] })
+                  },
+                  item.key
+                );
+              }
               const actionName = item.name;
               let label = "";
               if (item.label) {
@@ -35625,7 +35655,8 @@ var App = class _App extends React40.Component {
     __publicField(this, "newImagePlaceholder", ({
       sceneX,
       sceneY,
-      addToFrameUnderCursor = true
+      addToFrameUnderCursor = true,
+      customData
     }) => {
       const [gridX, gridY] = getGridPoint2(
         sceneX,
@@ -35652,7 +35683,8 @@ var App = class _App extends React40.Component {
         x: gridX - placeholderSize / 2,
         y: gridY - placeholderSize / 2,
         width: placeholderSize,
-        height: placeholderSize
+        height: placeholderSize,
+        customData
       });
     });
     __publicField(this, "handleLinearElementOnPointerDown", (event, elementType, pointerDownState) => {
@@ -36046,7 +36078,6 @@ var App = class _App extends React40.Component {
       const fileId = await (this.props.generateIdForFile?.(
         imageFile
       ) || generateIdFromFile(imageFile));
-      console.info("Excalidraw File ID:", fileId);
       if (!fileId) {
         console.warn(
           "Couldn't generate file id or the supplied `generateIdForFile` didn't resolve to one."
@@ -36128,7 +36159,13 @@ var App = class _App extends React40.Component {
           ),
           multiple: true
         });
-        this.insertImages(imageFiles, x, y);
+        this.insertImages(
+          imageFiles.map((f) => ({
+            file: f
+          })),
+          x,
+          y
+        );
       } catch (error) {
         if (error.name !== "AbortError") {
           console.error(error);
@@ -36241,7 +36278,9 @@ var App = class _App extends React40.Component {
     __publicField(this, "insertImages", async (imageFiles, sceneX, sceneY) => {
       const gridPadding = 50 / this.state.zoom.value;
       const placeholders = positionElementsOnGrid(
-        imageFiles.map(() => this.newImagePlaceholder({ sceneX, sceneY })),
+        imageFiles.map(
+          ({ customData }) => this.newImagePlaceholder({ sceneX, sceneY, customData })
+        ),
         sceneX,
         sceneY,
         gridPadding
@@ -36252,7 +36291,7 @@ var App = class _App extends React40.Component {
           try {
             return await this.initializeImage(
               placeholder,
-              await normalizeFile(imageFiles[i])
+              await normalizeFile(imageFiles[i].file)
             );
           } catch (error) {
             this.setState({
@@ -36321,7 +36360,13 @@ var App = class _App extends React40.Component {
       }
       const imageFiles = fileItems.map((data) => data.file).filter((file2) => isSupportedImageFile(file2));
       if (imageFiles.length > 0 && this.isToolSupported("image")) {
-        return this.insertImages(imageFiles, sceneX, sceneY);
+        return this.insertImages(
+          imageFiles.map((file2) => ({
+            file: file2
+          })),
+          sceneX,
+          sceneY
+        );
       }
       if (fileItems.length > 0) {
         const { file: file2, fileHandle } = fileItems[0];
@@ -36681,6 +36726,8 @@ var App = class _App extends React40.Component {
     });
     __publicField(this, "getContextMenuItems", (type) => {
       const options = [];
+      const imageContextMenuItems = this.getImageContextMenuItems();
+      const imageContextMenuSection = imageContextMenuItems.length > 0 ? [CONTEXT_MENU_SEPARATOR, ...imageContextMenuItems] : [];
       if (type === "canvas") {
         if (this.state.viewModeEnabled) {
           return [actionToggleGridMode, actionToggleViewMode, actionToggleStats];
@@ -36703,7 +36750,9 @@ var App = class _App extends React40.Component {
       }
       options.push(copyText);
       if (this.state.viewModeEnabled) {
-        return [actionCopy, ...options];
+        const viewModeItems = [actionCopy];
+        viewModeItems.push(...imageContextMenuSection, ...options);
+        return viewModeItems;
       }
       const zIndexActions = this.editorInterface.formFactor === "desktop" ? [
         CONTEXT_MENU_SEPARATOR,
@@ -36712,11 +36761,17 @@ var App = class _App extends React40.Component {
         actionSendToBack,
         actionBringToFront
       ] : [];
-      return [
+      const elementItems = [
         CONTEXT_MENU_SEPARATOR,
         actionCut,
         actionCopy,
-        actionPaste,
+        actionPaste
+      ];
+      elementItems.push(...imageContextMenuSection);
+      if (imageContextMenuItems.length > 0) {
+        elementItems.push(CONTEXT_MENU_SEPARATOR);
+      }
+      elementItems.push(
         CONTEXT_MENU_SEPARATOR,
         actionSelectAllElementsInFrame,
         actionRemoveAllElementsFromFrame,
@@ -36749,6 +36804,21 @@ var App = class _App extends React40.Component {
         actionToggleElementLock,
         CONTEXT_MENU_SEPARATOR,
         actionDeleteSelected
+      );
+      return elementItems;
+    });
+    __publicField(this, "getImageContextMenuItems", () => {
+      if (!this.props.imageContextMenuItems) {
+        return [];
+      }
+      const selectedElements = this.scene.getSelectedElements(this.state);
+      if (selectedElements.length === 0 || !selectedElements.every((element) => isImageElement9(element))) {
+        return [];
+      }
+      return [
+        ...this.props.imageContextMenuItems(
+          selectedElements.map((element) => element.id)
+        )
       ];
     });
     __publicField(this, "handleWheel", withBatchedUpdates(
@@ -38372,7 +38442,13 @@ var App = class _App extends React40.Component {
     }
     if (imageFiles.length > 0) {
       if (this.isToolSupported("image")) {
-        await this.insertImages(imageFiles, sceneX, sceneY);
+        await this.insertImages(
+          imageFiles.map((file2) => ({
+            file: file2
+          })),
+          sceneX,
+          sceneY
+        );
       } else {
         this.setState({ errorMessage: t("errors.imageToolNotSupported") });
       }
@@ -38448,7 +38524,13 @@ var App = class _App extends React40.Component {
         })
       );
       const imageFiles = responses.filter((response) => !!response.file).map((response) => response.file);
-      await this.insertImages(imageFiles, sceneX, sceneY);
+      await this.insertImages(
+        imageFiles.map((file2) => ({
+          file: file2
+        })),
+        sceneX,
+        sceneY
+      );
       const error = responses.find((response) => !!response.errorMessage);
       if (error && error.errorMessage) {
         this.setState({ errorMessage: error.errorMessage });
@@ -41196,6 +41278,7 @@ var ExcalidrawBase = (props) => {
     onPointerUp,
     onScrollChange,
     onDuplicate,
+    imageContextMenuItems,
     children,
     validateEmbeddable,
     renderEmbeddable,
@@ -41291,6 +41374,7 @@ var ExcalidrawBase = (props) => {
       onPointerUp,
       onScrollChange,
       onDuplicate,
+      imageContextMenuItems,
       validateEmbeddable,
       renderEmbeddable,
       showDeprecatedFonts,