lint

src/components/App.tsx

@@ -2716,7 +2716,7 @@ class App extends React.Component<AppProps, AppState> {
     });
   };
 
-  togglePenMode = (force: boolean | null) => {
+  togglePenMode = (force?: boolean) => {
     this.setState((prevState) => {
       return {
         penMode: force ?? !prevState.penMode,
@@ -4740,13 +4740,9 @@ class App extends React.Component<AppProps, AppState> {
       });
 
       const { x, y } = viewportCoordsToSceneCoords(event, this.state);
-
-      const frame = this.getTopLayerFrameAtSceneCoords({ x, y });
-
       mutateElement(pendingImageElement, {
         x,
         y,
-        frameId: frame ? frame.id : null,
       });
     } else if (this.state.activeTool.type === "freedraw") {
       this.handleFreeDrawElementOnPointerDown(
@@ -5613,11 +5609,9 @@ class App extends React.Component<AppProps, AppState> {
   private createImageElement = ({
     sceneX,
     sceneY,
-    addToFrameUnderCursor = true,
   }: {
     sceneX: number;
     sceneY: number;
-    addToFrameUnderCursor?: boolean;
   }) => {
     const [gridX, gridY] = getGridPoint(
       sceneX,
@@ -5627,12 +5621,10 @@ class App extends React.Component<AppProps, AppState> {
         : this.state.gridSize,
     );
 
-    const topLayerFrame = addToFrameUnderCursor
+    const topLayerFrame = this.getTopLayerFrameAtSceneCoords({
-      ? this.getTopLayerFrameAtSceneCoords({
+      x: gridX,
-          x: gridX,
+      y: gridY,
-          y: gridY,
+    });
-        })
-      : null;
 
     const element = newImageElement({
       type: "image",
@@ -5962,6 +5954,11 @@ class App extends React.Component<AppProps, AppState> {
     pointerDownState: PointerDownState,
   ) {
     return withBatchedUpdatesThrottled((event: PointerEvent) => {
+      //To avoid pointerMove canceling the selection of locked elements on mobile
+      if (Boolean(this.state.contextMenu)) {
+        return;
+      }
+
       // We need to initialize dragOffsetXY only after we've updated
       // `state.selectedElementIds` on pointerDown. Doing it here in pointerMove
       // event handler should hopefully ensure we're already working with
@@ -7562,7 +7559,6 @@ class App extends React.Component<AppProps, AppState> {
       const imageElement = this.createImageElement({
         sceneX: x,
         sceneY: y,
-        addToFrameUnderCursor: false,
       });
 
       if (insertOnCanvasDirectly) {

src/components/LayerUI.tsx

@@ -66,7 +66,7 @@ interface LayerUIProps {
   elements: readonly NonDeletedExcalidrawElement[];
   onLockToggle: () => void;
   onHandToolToggle: () => void;
-  onPenModeToggle: AppClassProperties["togglePenMode"];
+  onPenModeToggle: () => void;
   showExitZenModeBtn: boolean;
   langCode: Language["code"];
   renderTopRightUI?: ExcalidrawProps["renderTopRightUI"];
@@ -258,7 +258,7 @@ const LayerUI = ({
                           <PenModeButton
                             zenModeEnabled={appState.zenModeEnabled}
                             checked={appState.penMode}
-                            onChange={() => onPenModeToggle(null)}
+                            onChange={onPenModeToggle}
                             title={t("toolBar.penMode")}
                             penDetected={appState.penDetected}
                           />

src/components/MobileMenu.tsx

@@ -35,7 +35,7 @@ type MobileMenuProps = {
   elements: readonly NonDeletedExcalidrawElement[];
   onLockToggle: () => void;
   onHandToolToggle: () => void;
-  onPenModeToggle: AppClassProperties["togglePenMode"];
+  onPenModeToggle: () => void;
 
   renderTopRightUI?: (
     isMobile: boolean,
@@ -94,7 +94,7 @@ export const MobileMenu = ({
                   )}
                   <PenModeButton
                     checked={appState.penMode}
-                    onChange={() => onPenModeToggle(null)}
+                    onChange={onPenModeToggle}
                     title={t("toolBar.penMode")}
                     isMobile
                     penDetected={appState.penDetected}

src/cursor.ts

@@ -99,7 +99,7 @@ export const setCursorForShape = (
     interactiveCanvas.style.cursor = `url(${url}), auto`;
   } else if (!["image", "custom"].includes(appState.activeTool.type)) {
     interactiveCanvas.style.cursor = CURSOR_TYPE.CROSSHAIR;
-  } else if (appState.activeTool.type !== "image") {
+  } else {
     interactiveCanvas.style.cursor = CURSOR_TYPE.AUTO;
   }
 };

src/packages/excalidraw/CHANGELOG.md

@@ -37,18 +37,6 @@ Please add the latest change on the top under the correct section.
 
 - [`useDevice`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/utils#usedevice) hook's return value was changed to differentiate between `editor` and `viewport` breakpoints. [#7243](https://github.com/excalidraw/excalidraw/pull/7243)
 
-### Build
-
-- Support Preact [#7255](https://github.com/excalidraw/excalidraw/pull/7255). The host needs to set `process.env.IS_PREACT` to `true`
-
-When using vite, you will have to make sure the variable process.env.IS_PREACT is available at runtime since Vite removes it by default, so you can update the vite config to ensure its available
-
-```json
-define: {
-  "process.env.IS_PREACT": process.env.IS_PREACT,
-}
-```
-
 ## 0.16.1 (2023-09-21)
 
 ## Excalidraw Library

src/packages/excalidraw/main.js

@@ -1,10 +1,4 @@
-if (process.env.IS_PREACT === "true") {
+if (process.env.NODE_ENV === "production") {
-  if (process.env.NODE_ENV === "production") {
-    module.exports = require("./dist/excalidraw-with-preact.production.min.js");
-  } else {
-    module.exports = require("./dist/excalidraw-with-preact.development.js");
-  }
-} else if (process.env.NODE_ENV === "production") {
   module.exports = require("./dist/excalidraw.production.min.js");
 } else {
   module.exports = require("./dist/excalidraw.development.js");

src/packages/excalidraw/package.json

@@ -78,7 +78,7 @@
   "homepage": "https://github.com/excalidraw/excalidraw/tree/master/src/packages/excalidraw",
   "scripts": {
     "gen:types": "tsc --project ../../../tsconfig-types.json",
-    "build:umd": "rm -rf dist && cross-env NODE_ENV=production webpack --config webpack.prod.config.js && cross-env NODE_ENV=development webpack --config webpack.dev.config.js && NODE_ENV=development webpack --config webpack.preact.config.js && NODE_ENV=production webpack --config webpack.preact.config.js && yarn gen:types",
+    "build:umd": "rm -rf dist && cross-env NODE_ENV=production webpack --config webpack.prod.config.js && cross-env NODE_ENV=development webpack --config webpack.dev.config.js && yarn gen:types",
     "build:umd:withAnalyzer": "cross-env NODE_ENV=production ANALYZER=true webpack --config webpack.prod.config.js",
     "pack": "yarn build:umd && yarn pack",
     "start": "webpack serve --config webpack.dev-server.config.js",

src/packages/excalidraw/webpack.preact.config.js

@@ -1,33 +0,0 @@
-const { merge } = require("webpack-merge");
-
-const prodConfig = require("./webpack.prod.config");
-const devConfig = require("./webpack.dev.config");
-
-const isProd = process.env.NODE_ENV === "production";
-
-const config = isProd ? prodConfig : devConfig;
-const outputFile = isProd
-  ? "excalidraw-with-preact.production.min"
-  : "excalidraw-with-preact.development";
-
-const preactWebpackConfig = {
-  entry: {
-    [outputFile]: "./entry.js",
-  },
-  externals: {
-    ...config.externals,
-    "react-dom/client": {
-      root: "ReactDOMClient",
-      commonjs2: "react-dom/client",
-      commonjs: "react-dom/client",
-      amd: "react-dom/client",
-    },
-    "react/jsx-runtime": {
-      root: "ReactJSXRuntime",
-      commonjs2: "react/jsx-runtime",
-      commonjs: "react/jsx-runtime",
-      amd: "react/jsx-runtime",
-    },
-  },
-};
-module.exports = merge(config, preactWebpackConfig);

src/scene/export.ts

@@ -11,7 +11,7 @@ import {
   getElementAbsoluteCoords,
 } from "../element/bounds";
 import { renderSceneToSvg, renderStaticScene } from "../renderer/renderScene";
-import { cloneJSON, distance, getFontString } from "../utils";
+import { distance, getFontString } from "../utils";
 import { AppState, BinaryFiles } from "../types";
 import {
   DEFAULT_EXPORT_PADDING,
@@ -52,9 +52,8 @@ const __createSceneForElementsHack__ = (
   // we can't duplicate elements to regenerate ids because we need the
   // orig ids when embedding. So we do another hack of not mapping element
   // ids to Scene instances so that we don't override the editor elements
-  // mapping.
+  // mapping
-  // We still need to clone the objects themselves to regen references.
+  scene.replaceAllElements(elements, false);
-  scene.replaceAllElements(cloneJSON(elements), false);
   return scene;
 };
 
@@ -141,36 +140,6 @@ const getFrameRenderingConfig = (
   };
 };
 
-const prepareElementsForRender = ({
-  elements,
-  exportingFrame,
-  frameRendering,
-  exportWithDarkMode,
-}: {
-  elements: readonly ExcalidrawElement[];
-  exportingFrame: ExcalidrawFrameElement | null | undefined;
-  frameRendering: AppState["frameRendering"];
-  exportWithDarkMode: AppState["exportWithDarkMode"];
-}) => {
-  let nextElements: readonly ExcalidrawElement[];
-
-  if (exportingFrame) {
-    nextElements = elementsOverlappingBBox({
-      elements,
-      bounds: exportingFrame,
-      type: "overlap",
-    });
-  } else if (frameRendering.enabled && frameRendering.name) {
-    nextElements = addFrameLabelsAsTextElements(elements, {
-      exportWithDarkMode,
-    });
-  } else {
-    nextElements = elements;
-  }
-
-  return nextElements;
-};
-
 export const exportToCanvas = async (
   elements: readonly NonDeletedExcalidrawElement[],
   appState: AppState,
@@ -199,24 +168,21 @@ export const exportToCanvas = async (
   const tempScene = __createSceneForElementsHack__(elements);
   elements = tempScene.getNonDeletedElements();
 
-  const frameRendering = getFrameRenderingConfig(
+  let nextElements: ExcalidrawElement[];
-    exportingFrame ?? null,
-    appState.frameRendering ?? null,
-  );
-
-  const elementsForRender = prepareElementsForRender({
-    elements,
-    exportingFrame,
-    exportWithDarkMode: appState.exportWithDarkMode,
-    frameRendering,
-  });
 
   if (exportingFrame) {
     exportPadding = 0;
+    nextElements = elementsOverlappingBBox({
+      elements,
+      bounds: exportingFrame,
+      type: "overlap",
+    });
+  } else {
+    nextElements = addFrameLabelsAsTextElements(elements, appState);
   }
 
   const [minX, minY, width, height] = getCanvasSize(
-    exportingFrame ? [exportingFrame] : getRootElements(elementsForRender),
+    exportingFrame ? [exportingFrame] : getRootElements(nextElements),
     exportPadding,
   );
 
@@ -226,7 +192,7 @@ export const exportToCanvas = async (
 
   const { imageCache } = await updateImageCache({
     imageCache: new Map(),
-    fileIds: getInitializedImageElements(elementsForRender).map(
+    fileIds: getInitializedImageElements(nextElements).map(
       (element) => element.fileId,
     ),
     files,
@@ -235,12 +201,15 @@ export const exportToCanvas = async (
   renderStaticScene({
     canvas,
     rc: rough.canvas(canvas),
-    elements: elementsForRender,
+    elements: nextElements,
-    visibleElements: elementsForRender,
+    visibleElements: nextElements,
     scale,
     appState: {
       ...appState,
-      frameRendering,
+      frameRendering: getFrameRenderingConfig(
+        exportingFrame ?? null,
+        appState.frameRendering ?? null,
+      ),
       viewBackgroundColor: exportBackground ? viewBackgroundColor : null,
       scrollX: -minX + exportPadding,
       scrollY: -minY + exportPadding,
@@ -280,14 +249,8 @@ export const exportToSvg = async (
   const tempScene = __createSceneForElementsHack__(elements);
   elements = tempScene.getNonDeletedElements();
 
-  const frameRendering = getFrameRenderingConfig(
-    opts?.exportingFrame ?? null,
-    appState.frameRendering ?? null,
-  );
-
   let {
     exportPadding = DEFAULT_EXPORT_PADDING,
-    exportWithDarkMode = false,
     viewBackgroundColor,
     exportScale = 1,
     exportEmbedScene,
@@ -295,15 +258,19 @@ export const exportToSvg = async (
 
   const { exportingFrame = null } = opts || {};
 
-  const elementsForRender = prepareElementsForRender({
+  let nextElements: ExcalidrawElement[] = [];
-    elements,
-    exportingFrame,
-    exportWithDarkMode,
-    frameRendering,
-  });
 
   if (exportingFrame) {
     exportPadding = 0;
+    nextElements = elementsOverlappingBBox({
+      elements,
+      bounds: exportingFrame,
+      type: "overlap",
+    });
+  } else {
+    nextElements = addFrameLabelsAsTextElements(elements, {
+      exportWithDarkMode: appState.exportWithDarkMode ?? false,
+    });
   }
 
   let metadata = "";
@@ -327,7 +294,7 @@ export const exportToSvg = async (
   }
 
   const [minX, minY, width, height] = getCanvasSize(
-    exportingFrame ? [exportingFrame] : getRootElements(elementsForRender),
+    exportingFrame ? [exportingFrame] : getRootElements(nextElements),
     exportPadding,
   );
 
@@ -338,7 +305,7 @@ export const exportToSvg = async (
   svgRoot.setAttribute("viewBox", `0 0 ${width} ${height}`);
   svgRoot.setAttribute("width", `${width * exportScale}`);
   svgRoot.setAttribute("height", `${height * exportScale}`);
-  if (exportWithDarkMode) {
+  if (appState.exportWithDarkMode) {
     svgRoot.setAttribute("filter", THEME_FILTER);
   }
 
@@ -413,12 +380,15 @@ export const exportToSvg = async (
   }
 
   const rsvg = rough.svg(svgRoot);
-  renderSceneToSvg(elementsForRender, rsvg, svgRoot, files || {}, {
+  renderSceneToSvg(nextElements, rsvg, svgRoot, files || {}, {
     offsetX,
     offsetY,
-    exportWithDarkMode,
+    exportWithDarkMode: appState.exportWithDarkMode ?? false,
     renderEmbeddables: opts?.renderEmbeddables ?? false,
-    frameRendering,
+    frameRendering: getFrameRenderingConfig(
+      exportingFrame ?? null,
+      appState.frameRendering ?? null,
+    ),
   });
 
   tempScene.destroy();