DEGUGGING in dev build with process.env.NODE_ENV, + this.lastSceneSnapshot

manifest.json

@@ -1,7 +1,7 @@
 {
   "id": "obsidian-excalidraw-plugin",
   "name": "Excalidraw",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "minAppVersion": "1.1.6",
   "description": "An Obsidian plugin to edit and view Excalidraw drawings",
   "author": "Zsolt Viczian",

package.json

@@ -19,7 +19,7 @@
   "license": "MIT",
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "@zsviczian/excalidraw": "0.17.1-obsidian-22",
+    "@zsviczian/excalidraw": "0.17.1-obsidian-23",
     "chroma-js": "^2.4.2",
     "clsx": "^2.0.0",
     "colormaster": "^1.2.1",
@@ -35,6 +35,7 @@
     "js-yaml": "^4.1.0"
   },
   "devDependencies": {
+    "dotenv": "^16.4.5",
     "@babel/core": "^7.22.9",
     "@babel/preset-env": "^7.22.10",
     "@babel/preset-react": "^7.22.5",

rollup.config.js

@@ -1,19 +1,22 @@
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
-import { env } from "process";
 import babel from '@rollup/plugin-babel';
 import replace from "@rollup/plugin-replace";
 import { terser } from "rollup-plugin-terser";
 import copy from "rollup-plugin-copy";
 import typescript2 from "rollup-plugin-typescript2";
 import webWorker from "rollup-plugin-web-worker-loader";
-import fs from'fs';
+import fs from 'fs';
 import LZString from 'lz-string';
 import postprocess from 'rollup-plugin-postprocess';
 import cssnano from 'cssnano';
 
+// Load environment variables
+import dotenv from 'dotenv';
+dotenv.config();
+
 const DIST_FOLDER = 'dist'; 
-const isProd = (process.env.NODE_ENV === "production")
+const isProd = (process.env.NODE_ENV === "production");
 const isLib = (process.env.NODE_ENV === "lib");
 console.log(`Running: ${process.env.NODE_ENV}`);
 
@@ -28,13 +31,13 @@ const reactdom_pkg = isLib ? "" : isProd
   : fs.readFileSync("./node_modules/react-dom/umd/react-dom.development.js", "utf8");
 
 const lzstring_pkg = isLib ? "" : fs.readFileSync("./node_modules/lz-string/libs/lz-string.min.js", "utf8");
-if(!isLib) {
+if (!isLib) {
   const excalidraw_styles = isProd
     ? fs.readFileSync("./node_modules/@zsviczian/excalidraw/dist/styles.production.css", "utf8")
     : fs.readFileSync("./node_modules/@zsviczian/excalidraw/dist/styles.development.css", "utf8");
-  const plugin_styles = fs.readFileSync("./styles.css", "utf8")
+  const plugin_styles = fs.readFileSync("./styles.css", "utf8");
   const styles = plugin_styles + excalidraw_styles;
-  cssnano() 
+  cssnano()
     .process(styles) // Process the CSS
     .then(result => {
       fs.writeFileSync(`./${DIST_FOLDER}/styles.css`, result.css);
@@ -46,16 +49,16 @@ if(!isLib) {
 
 const manifestStr = isLib ? "" : fs.readFileSync("manifest.json", "utf-8");
 const manifest = isLib ? {} : JSON.parse(manifestStr);
-!isLib && console.log(manifest.version);
+if (!isLib) console.log(manifest.version);
 
-const packageString = isLib 
-  ? "" 
+const packageString = isLib
+  ? ""
   : ';' + lzstring_pkg +
     '\nconst EXCALIDRAW_PACKAGES = "' + LZString.compressToBase64(react_pkg + reactdom_pkg + excalidraw_pkg) + '";\n' +
     'const {react, reactDOM, excalidrawLib} = window.eval.call(window, `(function() {' +
     '${LZString.decompressFromBase64(EXCALIDRAW_PACKAGES)};' +
-    'return {react:React, reactDOM:ReactDOM, excalidrawLib: ExcalidrawLib};})();`);\n' +
-    'const PLUGIN_VERSION="'+manifest.version+'";';
+    'return {react: React, reactDOM: ReactDOM, excalidrawLib: ExcalidrawLib};})();`);\n' +
+    'const PLUGIN_VERSION="' + manifest.version + '";';
 
 const BASE_CONFIG = {
   input: 'src/main.ts',
@@ -76,33 +79,30 @@ const BASE_CONFIG = {
     'react',
     'react-dom'
   ],
-}
+};
 
-const getRollupPlugins = (tsconfig, ...plugins) =>
-    [
-        typescript2(tsconfig),
-        nodeResolve({ browser: true }),
-        commonjs(),
-        webWorker({ inline: true, forceInline: true, targetPlatform: "browser" }),
-    ].concat(plugins);
+const getRollupPlugins = (tsconfig, ...plugins) => [
+  typescript2(tsconfig),
+  nodeResolve({ browser: true }),
+  commonjs(),
+  webWorker({ inline: true, forceInline: true, targetPlatform: "browser" }),
+].concat(plugins);
 
 const BUILD_CONFIG = {
   ...BASE_CONFIG,
   output: {
     dir: DIST_FOLDER,
     entryFileNames: 'main.js',
-    //sourcemap: isProd?false:'inline',
     format: 'cjs',
     exports: 'default',
   },
   plugins: [
     typescript2({
       tsconfig: isProd ? "tsconfig.json" : "tsconfig.dev.json",
-      //inlineSources: !isProd
     }),
     replace({
       preventAssignment: true,
-      "process.env.NODE_ENV": JSON.stringify(env.NODE_ENV),
+      "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
     }),
     babel({
       presets: [['@babel/preset-env', {
@@ -110,30 +110,27 @@ const BUILD_CONFIG = {
           esmodules: true,
         },
       }]],
-      exclude: "node_modules/**"
+      exclude: "node_modules/**",
     }),
     commonjs(),
     nodeResolve({ browser: true, preferBuiltins: false }),
-    ...isProd 
-    ? [
+    ...(isProd ? [
       terser({
         toplevel: false,
-        compress: {passes: 2}
+        compress: { passes: 2 },
       }),
       //!postprocess - the version available on npmjs does not work, need this update: 
       //  npm install brettz9/rollup-plugin-postprocess#update --save-dev
       //  https://github.com/developit/rollup-plugin-postprocess/issues/10
       postprocess([
-        //[/,React=require\("react"\);/, packageString],
         [/React=require\("react"\),state=require\("@codemirror\/state"\),view=require\("@codemirror\/view"\)/,
-        `state=require("@codemirror/state"),view=require("@codemirror/view")` + packageString]
-      ])
-    ] 
-    : [
+        `state=require("@codemirror/state"),view=require("@codemirror/view")` + packageString],
+      ]),
+    ] : [
       postprocess([
         [/var React = require\('react'\);/, packageString],
-      ])
-    ],
+      ]),
+    ]),
     copy({
       targets: [
         { src: 'manifest.json', dest: DIST_FOLDER },
@@ -141,7 +138,7 @@ const BUILD_CONFIG = {
       verbose: true, // Optional: To display copied files in the console
     }),
   ],
-}
+};
 
 const LIB_CONFIG = {
   ...BASE_CONFIG,
@@ -153,16 +150,16 @@ const LIB_CONFIG = {
     name: "Excalidraw (Library)",
   },
   plugins: getRollupPlugins(
-      { tsconfig: "tsconfig-lib.json"},
-      copy({ targets: [{ src: "src/*.d.ts", dest: "lib/typings" }] })
-  ),  
-}
+    { tsconfig: "tsconfig-lib.json" },
+    copy({ targets: [{ src: "src/*.d.ts", dest: "lib/typings" }] })
+  ),
+};
 
 let config = [];
-if(process.env.NODE_ENV === "lib") {
+if (process.env.NODE_ENV === "lib") {
   config.push(LIB_CONFIG);
 } else {
   config.push(BUILD_CONFIG);
 }
 
-export default config;
+export default config;

src/EmbeddedFileLoader.ts

@@ -361,7 +361,7 @@ export class EmbeddedFilesLoader {
       isMask,
     };
 
-    const shouldUseCache = file && imageCache.isReady();
+    const shouldUseCache = this.plugin.settings.allowImageCacheInScene && file && imageCache.isReady();
     const cacheKey:ImageKey = {
       filepath: file.path,
       blockref: null,
@@ -380,7 +380,9 @@ export class EmbeddedFilesLoader {
       linkpartAlias: null,
     }
 
-    const maybeSVG = await imageCache.getImageFromCache(cacheKey);
+    const maybeSVG = shouldUseCache
+    ? await imageCache.getImageFromCache(cacheKey)
+    : undefined;
 
     const svg = (maybeSVG && (maybeSVG instanceof SVGSVGElement))
     ? maybeSVG

src/ExcalidrawData.ts

@@ -11,10 +11,7 @@ import {
   fileid,
   DEVICE,
   EMBEDDABLE_THEME_FRONTMATTER_VALUES,
-  getBoundTextMaxWidth,
   getDefaultLineHeight,
-  getFontString,
-  wrapText,
   ERROR_IFRAME_CONVERSION_CANCELED,
   JSON_parse,
   FRONTMATTER_KEYS,
@@ -51,7 +48,7 @@ import { BinaryFiles, DataURL, SceneData } from "@zsviczian/excalidraw/types/exc
 import { EmbeddedFile, MimeType } from "./EmbeddedFileLoader";
 import { ConfirmationPrompt } from "./dialogs/Prompt";
 import { getMermaidImageElements, getMermaidText, shouldRenderMermaid } from "./utils/MermaidUtils";
-import { debug } from "./utils/DebugHelper";
+import { DEBUGGING, debug } from "./utils/DebugHelper";
 import { Mutable } from "@zsviczian/excalidraw/types/excalidraw/utility-types";
 
 type SceneDataWithFiles = SceneData & { files: BinaryFiles };
@@ -262,7 +259,7 @@ const RE_TEXTELEMENTS_FALLBACK_1 = new RegExp(`(.*)%%\n##? Text Elements(?:\n|$)
 const RE_TEXTELEMENTS_FALLBACK_2 = new RegExp(`(.*)##? Text Elements(?:\n|$)`, "m");
 
 
-const RE_DRAWING = new RegExp(`(%%\n)?##? Drawing\n`);
+const RE_DRAWING = new RegExp(`^(%%\n)?##? Drawing\n`, "m");
 
 export const getExcalidrawMarkdownHeaderSection = (data:string, keys?:[string,string][]):string => {
   //The base case scenario is at the top, continued with fallbacks in order of likelihood and file structure
@@ -274,6 +271,13 @@ export const getExcalidrawMarkdownHeaderSection = (data:string, keys?:[string,st
   %%
   # Excalidraw Data
   */
+
+  //trimming the json because in legacy excalidraw files the JSON was a single string resulting in very slow regexp parsing
+  const drawingTrimLocation = data.search(RE_DRAWING);
+  if(drawingTrimLocation>0) { 
+    data = data.substring(0, drawingTrimLocation);
+  }
+
   let trimLocation = data.search(RE_EXCALIDRAWDATA_WITHSECTION_OK);
   let shouldFixTrailingHashtag = false;
   if(trimLocation > 0) {
@@ -386,7 +390,9 @@ export const getExcalidrawMarkdownHeaderSection = (data:string, keys?:[string,st
     # Drawing
   */
   if (trimLocation === -1) {
-    trimLocation = data.search(RE_DRAWING);
+    if (drawingTrimLocation > 0) {
+      trimLocation = drawingTrimLocation;
+    }
   }
   if (trimLocation === -1) {
     return data.endsWith("\n") ? data : (data + "\n");
@@ -515,6 +521,18 @@ export class ExcalidrawData {
       if (el.fontSize === null) {
         el.fontSize = 20;
       }
+
+      if (el.type === "text" && !el.hasOwnProperty("autoResize")) {
+        el.autoResize = true;
+      }
+
+      if (el.type === "text" && !el.hasOwnProperty("lineHeight")) {
+        el.lineHeight = getDefaultLineHeight(el.fontFamily);
+      }
+
+      if (el.type === "image" && !el.hasOwnProperty("roundness")) {
+        el.roundness = null;
+      }
     }
 
     //https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/569
@@ -952,7 +970,7 @@ export class ExcalidrawData {
     //update text in scene based on textElements Map
     //first get scene text elements
     const elementsMap = arrayToMap(this.scene.elements);
-    const texts = this.scene.elements?.filter((el: any) => el.type === "text") as Mutable<ExcalidrawTextElement>[];
+    const texts = this.scene.elements?.filter((el: any) => el.type === "text" && !el.isDeleted) as Mutable<ExcalidrawTextElement>[];
     for (const te of texts) {
       const container = getContainerElement(te, elementsMap);
       const originalText =
@@ -971,7 +989,7 @@ export class ExcalidrawData {
         te.width = width;
         te.height = height;
       } catch(e) {
-        debug(`ExcalidrawData.updateSceneTextElements, textElement: ${te?.id}`, te, this.updateSceneTextElements);
+        (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.updateSceneTextElements, `ExcalidrawData.updateSceneTextElements, textElement:${te?.id}`, te, this.updateSceneTextElements);
       }
     }
   }

src/MarkdownPostProcessor.ts

@@ -26,7 +26,7 @@ import { getParentOfClass, isObsidianThemeDark, getFileCSSClasses } from "./util
 import { linkClickModifierType } from "./utils/ModifierkeyHelper";
 import { ImageKey, imageCache } from "./utils/ImageCache";
 import { FILENAMEPARTS, PreviewImageType } from "./utils/UtilTypes";
-import { CustomMutationObserver, isDebugMode } from "./utils/DebugHelper";
+import { CustomMutationObserver, DEBUGGING } from "./utils/DebugHelper";
 import { getExcalidrawFileForwardLinks } from "./utils/ExcalidrawViewUtils";
 import { linkPrompt } from "./dialogs/Prompt";
 
@@ -714,7 +714,7 @@ const tmpObsidianWYSIWYG = async (
       internalEmbedDiv.appendChild(imgDiv);    
     }, 500);
   }
-  const observer = isDebugMode()
+  const observer = DEBUGGING
     ? new CustomMutationObserver(markdownObserverFn, "markdowPostProcessorObserverFn")
     : new MutationObserver(markdownObserverFn);
   observer.observe(internalEmbedDiv, {
@@ -848,7 +848,7 @@ const legacyExcalidrawPopoverObserverFn: MutationCallback = async (m) => {
   node.appendChild(div);
 };
 
-export const legacyExcalidrawPopoverObserver = isDebugMode()
+export const legacyExcalidrawPopoverObserver = DEBUGGING
   ? new CustomMutationObserver(legacyExcalidrawPopoverObserverFn, "legacyExcalidrawPopoverObserverFn")
   : new MutationObserver(legacyExcalidrawPopoverObserverFn);
 

src/dialogs/Messages.ts

@@ -17,6 +17,19 @@ I develop this plugin as a hobby, spending my free time doing this. If you find
 
 <div class="ex-coffee-div"><a href="https://ko-fi.com/zsolt"><img src="https://cdn.ko-fi.com/cdn/kofi3.png?v=3" height=45></a></div>
 `,
+"2.2.2":`
+## Fixed
+- ExcaliBrain stopped working with 2.2.0
+
+![I apologize](https://github.com/zsviczian/obsidian-excalidraw-plugin/assets/14358394/3b05aa28-788d-4329-9721-798ad58a6ca2)
+`,
+"2.2.1":`
+## Fixed
+- Text height becomes unreadable after 2.2.0 update [#1784](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/1784)
+- Images are loaded with a rounded border when loading old Excalidraw files
+- Embedded Excalidraw images cache gets stuck with old version of the image
+- Extremely long loading times with legacy (3+ years old) Excalidraw files
+`,
 "2.2.0":`
 <div class="excalidraw-videoWrapper"><div>
 <iframe src="https://www.youtube.com/embed/dV0NEOwn5NM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

src/lang/locale/en.ts

@@ -489,6 +489,10 @@ FILENAME_HEAD: "Filename",
   EMBED_IMAGE_CACHE_NAME: "Cache images for embedding in markdown",
   EMBED_IMAGE_CACHE_DESC: "Cache images for embedding in markdown. This will speed up the embedding process, but in case you compose images of several sub-component drawings, " +
     "the embedded image in Markdown won't update until you open the drawing and save it to trigger an update of the cache.",
+  SCENE_IMAGE_CACHE_NAME: "Cache nested Excalidraws in Scene",
+  SCENE_IMAGE_CACHE_DESC: "Cache nested Excalidraws in the Scene for faster scene rendering. This will speed up the rendering process, especially if you have deeply nested Excalidraws in your scene. " + 
+    "Excalidraw will try to intelligently identify if any children of a nested Excalidraw have changed and will update the cache accordingly. " +
+    "You may want to turn this off, in case you are suspecting that the cache is not updating properly.",
   EMBED_IMAGE_CACHE_CLEAR: "Purge Cache",
   BACKUP_CACHE_CLEAR: "Purge Backups",
   BACKUP_CACHE_CLEAR_CONFIRMATION: "This action will delete all Excalidraw drawing backups. Backups are used as a safety measure in case your drawing file gets damaged. Each time you open Obsidian the plugin automatically deletes backups for files that no longer exist in your Vault. Are you sure you want to clear all backups?",

src/main.ts

@@ -132,11 +132,10 @@ import { processLinkText } from "./utils/CustomEmbeddableUtils";
 import { getEA } from "src";
 import { ExcalidrawImperativeAPI } from "@zsviczian/excalidraw/types/excalidraw/types";
 import { Mutable } from "@zsviczian/excalidraw/types/excalidraw/utility-types";
-import { CustomMutationObserver, debug, durationTreshold, log } from "./utils/DebugHelper";
-import { carveOutImage, carveOutPDF, createImageCropperFile, CROPPED_PREFIX } from "./utils/CarveOut";
+import { CustomMutationObserver, debug, durationTreshold, log, DEBUGGING, setDebugging } from "./utils/DebugHelper";
+import { carveOutImage, carveOutPDF, createImageCropperFile } from "./utils/CarveOut";
 import { ExcalidrawConfig } from "./utils/ExcalidrawConfig";
 import { EditorHandler } from "./CodeMirrorExtension/EditorHandler";
-import de from "./lang/locale/de";
 
 declare const EXCALIDRAW_PACKAGES:string;
 declare const react:any;
@@ -214,6 +213,7 @@ export default class ExcalidrawPlugin extends Plugin {
   };
 
   public getPackage(win:Window):Packages {
+    (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.getPackage, `ExcalidrawPlugin.getPackage`, win);
     if(win===window) {
       return {react, reactDOM, excalidrawLib};
     }
@@ -232,35 +232,39 @@ export default class ExcalidrawPlugin extends Plugin {
   }
 
   public registerEvent(event: any) {
-    if(!this.settings.isDebugMode) {
+    if (process.env.NODE_ENV !== 'development') {
       super.registerEvent(event);
       return;
-    }
+    } else {
+      if(!DEBUGGING) {
+        super.registerEvent(event);
+        return;
+      }
+      const originalHandler = event.fn;
 
-    const originalHandler = event.fn;
-
-    // Wrap the original event handler
-    const wrappedHandler = async (...args: any[]) => {
-      const startTime = performance.now(); // Get start time
-  
-      // Invoke the original event handler
-      const result = await originalHandler(...args);
-  
-      const endTime = performance.now(); // Get end time
-      const executionTime = endTime - startTime;
-  
-      if(executionTime > durationTreshold) {
-        console.log(`Excalidraw Event '${event.name}' took ${executionTime}ms to execute`);
+      // Wrap the original event handler
+      const wrappedHandler = async (...args: any[]) => {
+        const startTime = performance.now(); // Get start time
+    
+        // Invoke the original event handler
+        const result = await originalHandler(...args);
+    
+        const endTime = performance.now(); // Get end time
+        const executionTime = endTime - startTime;
+    
+        if(executionTime > durationTreshold) {
+          console.log(`Excalidraw Event '${event.name}' took ${executionTime}ms to execute`);
+        }
+    
+        return result;
       }
   
-      return result;
+      // Replace the original event handler with the wrapped one
+      event.fn = wrappedHandler;
+    
+      // Register the modified event
+      super.registerEvent(event);
     };
-  
-    // Replace the original event handler with the wrapped one
-    event.fn = wrappedHandler;
-  
-    // Register the modified event
-    super.registerEvent(event);
   }
   
   async onload() {
@@ -328,7 +332,7 @@ export default class ExcalidrawPlugin extends Plugin {
 
     const self = this;
     this.app.workspace.onLayoutReady(() => {
-      debug(`ExcalidrawPlugin.onload.app.workspace.onLayoutReady`);
+      (process.env.NODE_ENV === 'development') && DEBUGGING && debug(self.onload,"ExcalidrawPlugin.onload > app.workspace.onLayoutReady");
       this.scriptEngine = new ScriptEngine(self);
       imageCache.initializeDB(self);
     });
@@ -337,8 +341,9 @@ export default class ExcalidrawPlugin extends Plugin {
 
   private setPropertyTypes() {
     const app = this.app;
+    const self = this;
     this.app.workspace.onLayoutReady(() => {
-      debug(`ExcalidrawPlugin.setPropertyTypes app.workspace.onLayoutReady`);
+      (process.env.NODE_ENV === 'development') && DEBUGGING && debug(self.setPropertyTypes, `ExcalidrawPlugin.setPropertyTypes > app.workspace.onLayoutReady`);
       Object.keys(FRONTMATTER_KEYS).forEach((key) => {
         if(FRONTMATTER_KEYS[key].depricated === true) return;
         const {name, type} = FRONTMATTER_KEYS[key];
@@ -348,8 +353,9 @@ export default class ExcalidrawPlugin extends Plugin {
   }
 
   public initializeFonts() {
+    const self = this;
     this.app.workspace.onLayoutReady(async () => {
-      debug(`ExcalidrawPlugin.initializeFonts app.workspace.onLayoutReady`);
+      (process.env.NODE_ENV === 'development') && DEBUGGING && debug(self.initializeFonts,`ExcalidrawPlugin.initializeFonts > app.workspace.onLayoutReady`);
       const font = await getFontDataURL(
         this.app,
         this.settings.experimantalFourthFont,
@@ -391,6 +397,7 @@ export default class ExcalidrawPlugin extends Plugin {
   }
   
   private getOpenObsidianDocuments(): Document[] {
+    (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.getOpenObsidianDocuments,`ExcalidrawPlugin.getOpenObsidianDocuments`);
     const visitedDocs = new Set<Document>();
     this.app.workspace.iterateAllLeaves((leaf)=>{
       const ownerDocument = DEVICE.isMobile?document:leaf.view.containerEl.ownerDocument;   
@@ -404,7 +411,7 @@ export default class ExcalidrawPlugin extends Plugin {
   private switchToExcalidarwAfterLoad() {
     const self = this;
     this.app.workspace.onLayoutReady(() => {
-      debug(`ExcalidrawPlugin.switchToExcalidarwAfterLoad app.workspace.onLayoutReady`);
+      (process.env.NODE_ENV === 'development') && DEBUGGING && debug(self.switchToExcalidarwAfterLoad, `ExcalidrawPlugin.switchToExcalidarwAfterLoad > app.workspace.onLayoutReady`);
       let leaf: WorkspaceLeaf;
       for (leaf of this.app.workspace.getLeavesOfType("markdown")) {
         if ( leaf.view instanceof MarkdownView && self.isExcalidrawFile(leaf.view.file)) {
@@ -638,7 +645,7 @@ export default class ExcalidrawPlugin extends Plugin {
     
     const self = this;
     this.app.workspace.onLayoutReady(() => {
-      debug(`ExcalidrawPlugin.addMarkdownPostProcessor app.workspace.onLayoutReady`);
+      (process.env.NODE_ENV === 'development') && DEBUGGING && debug(self.addMarkdownPostProcessor, `ExcalidrawPlugin.addMarkdownPostProcessor > app.workspace.onLayoutReady`);
 
       // internal-link quick preview
       self.registerEvent(self.app.workspace.on("hover-link", hoverEvent));
@@ -652,6 +659,7 @@ export default class ExcalidrawPlugin extends Plugin {
 
   public enableLegacyFilePopoverObserver() {
     if(!this.legacyExcalidrawPopoverObserver) {
+      (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.enableLegacyFilePopoverObserver, `ExcalidrawPlugin.enableLegacyFilePopoverObserver > enabling`)
       //monitoring for div.popover.hover-popover.file-embed.is-loaded to be added to the DOM tree
       this.legacyExcalidrawPopoverObserver = legacyExcalidrawPopoverObserver;
       this.legacyExcalidrawPopoverObserver.observe(document.body, { childList: true, subtree: false });
@@ -664,6 +672,7 @@ export default class ExcalidrawPlugin extends Plugin {
     if (!matchThemeTrigger) return;
 
     const themeObserverFn:MutationCallback = async (mutations: MutationRecord[]) => {
+      (process.env.NODE_ENV === 'development') && DEBUGGING && debug(themeObserverFn, `ExcalidrawPlugin.addThemeObserver`, mutations);
       const { matchThemeTrigger } = this.settings;
       if (!matchThemeTrigger) return;
 
@@ -687,7 +696,7 @@ export default class ExcalidrawPlugin extends Plugin {
       });
     };
 
-    this.themeObserver = this.settings.isDebugMode
+    this.themeObserver = DEBUGGING
       ? new CustomMutationObserver(themeObserverFn, "themeObserver")
       : new MutationObserver(themeObserverFn);
   
@@ -718,6 +727,7 @@ export default class ExcalidrawPlugin extends Plugin {
    * Display characters configured in settings, in front of the filename, if the markdown file is an excalidraw drawing
    */
   private experimentalFileTypeDisplay() {
+    (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.experimentalFileTypeDisplay, `ExcalidrawPlugin.experimentalFileTypeDisplay`);
     const insertFiletype = (el: HTMLElement) => {
       if (el.childElementCount !== 1) {
         return;
@@ -742,6 +752,7 @@ export default class ExcalidrawPlugin extends Plugin {
     };
 
     const fileExplorerObserverFn:MutationCallback = (mutationsList) => {
+      (process.env.NODE_ENV === 'development') && DEBUGGING && debug(fileExplorerObserverFn, `ExcalidrawPlugin.experimentalFileTypeDisplay > fileExplorerObserverFn`, mutationsList);
       const mutationsWithNodes = mutationsList.filter((mutation) => mutation.addedNodes.length > 0);
       mutationsWithNodes.forEach((mutationNode) => {
         mutationNode.addedNodes.forEach((node) => {
@@ -753,13 +764,13 @@ export default class ExcalidrawPlugin extends Plugin {
       });
     };
 
-    this.fileExplorerObserver = this.settings.isDebugMode
+    this.fileExplorerObserver = DEBUGGING
       ? new CustomMutationObserver(fileExplorerObserverFn, "fileExplorerObserver")
       : new MutationObserver(fileExplorerObserverFn);
 
     const self = this;
     this.app.workspace.onLayoutReady(() => {
-      debug(`ExcalidrawPlugin.experimentalFileTypeDisplay app.workspace.onLayoutReady`);
+      (process.env.NODE_ENV === 'development') && DEBUGGING && debug(self.experimentalFileTypeDisplay, `ExcalidrawPlugin.experimentalFileTypeDisplay > app.workspace.onLayoutReady`);
       document.querySelectorAll(".nav-file-title").forEach(insertFiletype); //apply filetype to files already displayed
       const container = document.querySelector(".nav-files-container");
       if (container) {
@@ -2324,7 +2335,8 @@ export default class ExcalidrawPlugin extends Plugin {
     this.register(
       around(Workspace.prototype, {
         getActiveViewOfType(old) {
-          return dedupe(key, old, function(...args) {        
+          return dedupe(key, old, function(...args) {
+            (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.registerMonkeyPatches, `ExcalidrawPlugin.MonkeyPatch >getActiveViewOfType`, key, old, ...args);
             const result = old && old.apply(this, args);
             const maybeEAView = self.app?.workspace?.activeLeaf?.view;
             if(!maybeEAView || !(maybeEAView instanceof ExcalidrawView)) return result;
@@ -2343,7 +2355,7 @@ export default class ExcalidrawPlugin extends Plugin {
       })
     );
     //@ts-ignore
-    if(!app.plugins?.plugins?.["obsidian-hover-editor"]) {
+    if(!this.app.plugins?.plugins?.["obsidian-hover-editor"]) {
       this.register( //stolen from hover editor
         around(WorkspaceLeaf.prototype, {
           getRoot(old) {
@@ -2379,6 +2391,7 @@ export default class ExcalidrawPlugin extends Plugin {
 
     this.registerEvent(      
       app.workspace.on("file-menu", (menu, file, source, leaf) => {
+        (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.registerMonkeyPatches, `ExcalidrawPlugin.MonkeyPatch > file-menu`, file, source, leaf);
         if (!leaf) return;
         const view = leaf.view;
         if(!view || !(view instanceof MarkdownView)) return;
@@ -2426,6 +2439,7 @@ export default class ExcalidrawPlugin extends Plugin {
 
         setViewState(next) {
           return function (state: ViewState, ...rest: any[]) {
+            (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.registerMonkeyPatches, `ExcalidrawPlugin.MonkeyPatch > setViewState`, next);
             const markdownViewLoaded = 
               self._loaded && // Don't force excalidraw mode during shutdown
               state.type === "markdown" && // If we have a markdown file
@@ -2468,12 +2482,13 @@ export default class ExcalidrawPlugin extends Plugin {
   }
 
   private runStartupScript() {
+    (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.runStartupScript, `ExcalidrawPlugin.runStartupScript`);
     if(!this.settings.startupScriptPath || this.settings.startupScriptPath === "") {
       return;
     }
     const self = this;
     this.app.workspace.onLayoutReady(async () => {
-      debug(`ExcalidrawPlugin.runStartupScript app.workspace.onLayoutReady: ${self.settings?.startupScriptPath}`);
+      (process.env.NODE_ENV === 'development') && DEBUGGING && debug(self.runStartupScript, `ExcalidrawPlugin.runStartupScript > app.workspace.onLayoutReady, scriptPath:${self.settings?.startupScriptPath}`);
       const path = self.settings.startupScriptPath.endsWith(".md")
         ? self.settings.startupScriptPath
         : `${self.settings.startupScriptPath}.md`;
@@ -2496,7 +2511,7 @@ export default class ExcalidrawPlugin extends Plugin {
   private registerEventListeners() {
     const self: ExcalidrawPlugin = this;
     this.app.workspace.onLayoutReady(async () => {
-      debug("ExcalidrawPlugin.registerEventListeners app.workspace.onLayoutReady");
+      (process.env.NODE_ENV === 'development') && DEBUGGING && debug(self.registerEventListeners,`ExcalidrawPlugin.registerEventListeners > app.workspace.onLayoutReady`);
       const onPasteHandler = (
         evt: ClipboardEvent,
         editor: Editor,
@@ -2548,6 +2563,7 @@ export default class ExcalidrawPlugin extends Plugin {
         file: TAbstractFile,
         oldPath: string,
       ) => {
+        (process.env.NODE_ENV === 'development') && DEBUGGING && debug(renameEventHandler,`ExcalidrawPlugin.renameEventHandler`, file, oldPath);
         if (!(file instanceof TFile)) {
           return;
         }
@@ -2571,6 +2587,7 @@ export default class ExcalidrawPlugin extends Plugin {
       self.registerEvent(app.vault.on("rename", renameEventHandler));
 
       const modifyEventHandler = async (file: TFile) => {
+        (process.env.NODE_ENV === 'development') && DEBUGGING && debug(modifyEventHandler,`ExcalidrawPlugin.modifyEventHandler`, file);
         const leaves = this.app.workspace.getLeavesOfType(VIEW_TYPE_EXCALIDRAW);
         leaves.forEach(async (leaf: WorkspaceLeaf) => {
           const excalidrawView = leaf.view as ExcalidrawView;
@@ -2617,6 +2634,7 @@ export default class ExcalidrawPlugin extends Plugin {
 
       //watch file delete and delete corresponding .svg and .png
       const deleteEventHandler = async (file: TFile) => {
+        (process.env.NODE_ENV === 'development') && DEBUGGING && debug(deleteEventHandler,`ExcalidrawPlugin.deleteEventHandler`, file);
         if (!(file instanceof TFile)) {
           return;
         }
@@ -2667,6 +2685,7 @@ export default class ExcalidrawPlugin extends Plugin {
 
       //save Excalidraw leaf and update embeds when switching to another leaf
       const activeLeafChangeEventHandler = async (leaf: WorkspaceLeaf) => {
+        (process.env.NODE_ENV === 'development') && DEBUGGING && debug(activeLeafChangeEventHandler,`ExcalidrawPlugin.activeLeafChangeEventHandler`, leaf);
         //https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/723
         if(self.leafChangeTimeout) {
           clearTimeout(self.leafChangeTimeout);
@@ -2847,6 +2866,7 @@ export default class ExcalidrawPlugin extends Plugin {
     });
 
     const onFileMenuEventSaveActiveDrawing = () => {
+      (process.env.NODE_ENV === 'development') && DEBUGGING && debug(onFileMenuEventSaveActiveDrawing,`ExcalidrawPlugin.onFileMenuEventSaveActiveDrawing`);
       if (
         !this.activeExcalidrawView ||
         !this.activeExcalidrawView.semaphores.dirty
@@ -2885,14 +2905,14 @@ export default class ExcalidrawPlugin extends Plugin {
       };
 
       if (leftWorkspaceDrawer) {
-        this.workspaceDrawerLeftObserver = this.settings.isDebugMode
+        this.workspaceDrawerLeftObserver = DEBUGGING
           ? new CustomMutationObserver(action, "slidingDrawerLeftObserver")
           : new MutationObserver(action);
         this.workspaceDrawerLeftObserver.observe(leftWorkspaceDrawer, options);
       }
 
       if (rightWorkspaceDrawer) {
-        this.workspaceDrawerRightObserver = this.settings.isDebugMode
+        this.workspaceDrawerRightObserver = DEBUGGING
           ? new CustomMutationObserver(action, "slidingDrawerRightObserver")
           : new MutationObserver(action);
         this.workspaceDrawerRightObserver.observe(
@@ -2914,6 +2934,7 @@ export default class ExcalidrawPlugin extends Plugin {
     }
     //The user clicks settings, or "open another vault", or the command palette
     const modalContainerObserverFn: MutationCallback = async (m: MutationRecord[]) => {
+      (process.env.NODE_ENV === 'development') && DEBUGGING && debug(modalContainerObserverFn,`ExcalidrawPlugin.modalContainerObserverFn`, m);
       if (
         (m.length !== 1) ||
         (m[0].type !== "childList") ||
@@ -2926,7 +2947,7 @@ export default class ExcalidrawPlugin extends Plugin {
       this.activeExcalidrawView.save();
     };
 
-    this.modalContainerObserver = this.settings.isDebugMode
+    this.modalContainerObserver = DEBUGGING
       ? new CustomMutationObserver(modalContainerObserverFn, "modalContainerObserver")
       : new MutationObserver(modalContainerObserverFn);
     this.activeViewDoc = this.activeExcalidrawView.ownerDocument;
@@ -2949,6 +2970,7 @@ export default class ExcalidrawPlugin extends Plugin {
     frontmatter?: FrontMatterCache,
     deleted: boolean = false,
   ) {
+    (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.updateFileCache,`ExcalidrawPlugin.updateFileCache`, file, frontmatter, deleted);
     if (frontmatter && typeof frontmatter[FRONTMATTER_KEYS["plugin"].name] !== "undefined") {
       this.excalidrawFiles.add(file);
       return;
@@ -2964,10 +2986,10 @@ export default class ExcalidrawPlugin extends Plugin {
     const excalidrawLeaves = this.app.workspace.getLeavesOfType(VIEW_TYPE_EXCALIDRAW);
     excalidrawLeaves.forEach(async (leaf) => {
       const ev: ExcalidrawView = leaf.view as ExcalidrawView;
-      console.log(ev.file.name, ev.semaphores.dirty);
+      //console.log(ev.file.name, ev.semaphores.dirty);
       await this.setMarkdownView(leaf);
       //@ts-ignore
-      console.log(leaf?.view?.file);
+      //console.log(leaf?.view?.file);
     });
 
     document.body.removeChild(this.textMeasureDiv);
@@ -3085,6 +3107,7 @@ export default class ExcalidrawPlugin extends Plugin {
     reEnableAutosave?: boolean
   } = {applyLefthandedMode: true, reEnableAutosave: false}
   ) {
+    (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.loadSettings,`ExcalidrawPlugin.loadSettings`, opts);
     if(typeof opts.applyLefthandedMode === "undefined") opts.applyLefthandedMode = true;
     if(typeof opts.reEnableAutosave === "undefined") opts.reEnableAutosave = false;
     this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
@@ -3100,15 +3123,18 @@ export default class ExcalidrawPlugin extends Plugin {
     if(opts.applyLefthandedMode) setLeftHandedMode(this.settings.isLeftHanded);
     if(opts.reEnableAutosave) this.settings.autosave = true;
     this.settings.autosaveInterval = DEVICE.isMobile
-    ? this.settings.autosaveIntervalMobile
-    : this.settings.autosaveIntervalDesktop;
+      ? this.settings.autosaveIntervalMobile
+      : this.settings.autosaveIntervalDesktop;
+    setDebugging(this.settings.isDebugMode);
   }
 
   async saveSettings() {
+    (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.saveSettings,`ExcalidrawPlugin.saveSettings`);
     await this.saveData(this.settings);
   }
 
   public getStencilLibrary(): {} {
+    (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.getStencilLibrary,`ExcalidrawPlugin.getStencilLibrary`);
     if (
       this.settings.library === "" ||
       this.settings.library === "deprecated"
@@ -3119,13 +3145,15 @@ export default class ExcalidrawPlugin extends Plugin {
   }
 
   public setStencilLibrary(library: {}) {
+    (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.setStencilLibrary,`ExcalidrawPlugin.setStencilLibrary`, library);
     this.settings.library = "deprecated";
     this.settings.library2 = library;
   }
 
   public triggerEmbedUpdates(filepath?: string) {
+    (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.triggerEmbedUpdates,`ExcalidrawPlugin.triggerEmbedUpdates`, filepath);
     const visitedDocs = new Set<Document>();
-    app.workspace.iterateAllLeaves((leaf)=>{
+    this.app.workspace.iterateAllLeaves((leaf)=>{
       const ownerDocument = DEVICE.isMobile?document:leaf.view.containerEl.ownerDocument;
       if(!ownerDocument) return;
       if(visitedDocs.has(ownerDocument)) return;
@@ -3330,6 +3358,7 @@ export default class ExcalidrawPlugin extends Plugin {
   }
 
   public async setExcalidrawView(leaf: WorkspaceLeaf) {
+    (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.setExcalidrawView,`ExcalidrawPlugin.setExcalidrawView`, leaf);
     await leaf.setViewState({
       type: VIEW_TYPE_EXCALIDRAW,
       state: leaf.view.getState(),

src/menu/ToolsPanel.tsx

@@ -16,6 +16,7 @@ import { InsertPDFModal } from "src/dialogs/InsertPDFModal";
 import { ExportDialog } from "src/dialogs/ExportDialog";
 import { openExternalLink } from "src/utils/ExcalidrawViewUtils";
 import { UniversalInsertFileModal } from "src/dialogs/UniversalInsertFileModal";
+import { DEBUGGING, debug } from "src/utils/DebugHelper";
 
 declare const PLUGIN_VERSION:string;
 const dark = '<svg style="stroke:#ced4da;#212529;color:#ced4da;fill:#ced4da" ';
@@ -74,12 +75,14 @@ export class ToolsPanel extends React.Component<PanelProps, PanelState> {
   }
 
   updateScriptIconMap(scriptIconMap: ScriptIconMap) {
+    (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.updateScriptIconMap,"ToolsPanel.updateScriptIconMap()");
     this.setState(() => {
       return { scriptIconMap };
     });
   }
 
   setPreviewMode(isPreviewMode: boolean) {
+    (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.setPreviewMode,"ToolsPanel.setPreviewMode()");
     this.setState(() => {
       return {
         isPreviewMode,
@@ -88,6 +91,7 @@ export class ToolsPanel extends React.Component<PanelProps, PanelState> {
   }
 
   setFullscreen(isFullscreen: boolean) {
+    (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.setFullscreen,"ToolsPanel.setFullscreen()");
     this.setState(() => {
       return {
         isFullscreen,
@@ -96,6 +100,7 @@ export class ToolsPanel extends React.Component<PanelProps, PanelState> {
   }
 
   setDirty(isDirty: boolean) {
+    (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.setDirty,"ToolsPanel.setDirty()");
     this.setState(()=> {
       return {
         isDirty,
@@ -104,6 +109,7 @@ export class ToolsPanel extends React.Component<PanelProps, PanelState> {
   }
 
   setExcalidrawViewMode(isViewModeEnabled: boolean) {
+    (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.setExcalidrawViewMode,"ToolsPanel.setExcalidrawViewMode()");
     this.setState(() => {
       return {
         excalidrawViewMode: isViewModeEnabled,
@@ -112,6 +118,7 @@ export class ToolsPanel extends React.Component<PanelProps, PanelState> {
   }
 
   toggleVisibility(isMobileOrZen: boolean) {
+    (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.toggleVisibility,"ToolsPanel.toggleVisibility()");
     this.setTopCenter(isMobileOrZen);
     this.setState((prevState: PanelState) => {
       return {
@@ -121,6 +128,7 @@ export class ToolsPanel extends React.Component<PanelProps, PanelState> {
   }
 
   setTheme(theme: "dark" | "light") {
+    (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.setTheme,"ToolsPanel.setTheme()");
     this.setState((prevState: PanelState) => {
       return {
         theme,
@@ -129,6 +137,7 @@ export class ToolsPanel extends React.Component<PanelProps, PanelState> {
   }
 
   setTopCenter(isMobileOrZen: boolean) {
+    (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.setTopCenter,"ToolsPanel.setTopCenter()");
     this.setState(() => {
       return {
         left:
@@ -144,6 +153,7 @@ export class ToolsPanel extends React.Component<PanelProps, PanelState> {
   }
 
   updatePosition(deltaY: number = 0, deltaX: number = 0) {
+    (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.updatePosition,"ToolsPanel.updatePosition()");
     this.setState(() => {
       const {
         offsetTop,
@@ -185,6 +195,7 @@ export class ToolsPanel extends React.Component<PanelProps, PanelState> {
   }
 
   render() {
+    (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.render,"ToolsPanel.render()");
     return (
       <div
         ref={this.containerRef}
@@ -596,6 +607,7 @@ export class ToolsPanel extends React.Component<PanelProps, PanelState> {
   }
 
   private renderScriptButtons(isDownloaded: boolean) {
+    (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.renderScriptButtons,"ToolsPanel.renderScriptButtons()");
     if (Object.keys(this.state.scriptIconMap).length === 0) {
       return "";
     }

src/settings.ts

@@ -35,6 +35,7 @@ import { ModifierKeySet, ModifierSetType } from "./utils/ModifierkeyHelper";
 import { ModifierKeySettingsComponent } from "./dialogs/ModifierKeySettings";
 import { ANNOTATED_PREFIX, CROPPED_PREFIX } from "./utils/CarveOut";
 import { EDITOR_FADEOUT } from "./CodeMirrorExtension/EditorHandler";
+import { setDebugging } from "./utils/DebugHelper";
 
 export interface ExcalidrawSettings {
   folder: string;
@@ -61,6 +62,7 @@ export interface ExcalidrawSettings {
   displaySVGInPreview: boolean; //No longer used since 1.9.13
   previewImageType: PreviewImageType; //Introduced with 1.9.13
   allowImageCache: boolean;
+  allowImageCacheInScene: boolean;
   displayExportedImageIfAvailable: boolean;
   previewMatchObsidianTheme: boolean;
   width: string;
@@ -220,6 +222,7 @@ export const DEFAULT_SETTINGS: ExcalidrawSettings = {
   displaySVGInPreview: undefined,
   previewImageType: undefined,
   allowImageCache: true,
+  allowImageCacheInScene: true,
   displayExportedImageIfAvailable: false,
   previewMatchObsidianTheme: false,
   width: "400",
@@ -1720,6 +1723,19 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
             this.applySettingsUpdate();
           })
       )
+    new Setting(detailsEl)
+      .setName(t("SCENE_IMAGE_CACHE_NAME"))
+      .setDesc(fragWithHTML(t("SCENE_IMAGE_CACHE_DESC")))
+      .addToggle((toggle) =>
+        toggle
+          .setValue(this.plugin.settings.allowImageCacheInScene)
+          .onChange((value) => {
+            this.plugin.settings.allowImageCacheInScene = value;
+            this.applySettingsUpdate();
+          })
+      )
+    new Setting(detailsEl)
+      .setName(t("EMBED_IMAGE_CACHE_CLEAR"))
       .addButton((button) =>
         button
           .setButtonText(t("EMBED_IMAGE_CACHE_CLEAR"))
@@ -1727,6 +1743,8 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
             imageCache.clearImageCache();
           })
       )
+    new Setting(detailsEl)
+      .setName(t("BACKUP_CACHE_CLEAR"))
       .addButton((button) =>
         button
           .setButtonText(t("BACKUP_CACHE_CLEAR"))
@@ -2479,17 +2497,20 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
       cls: "excalidraw-setting-h1",
     });
 
-    new Setting(detailsEl)
-    .setName(t("DEBUGMODE_NAME"))
-    .setDesc(fragWithHTML(t("DEBUGMODE_DESC")))
-    .addToggle((toggle) =>
-      toggle
-        .setValue(this.plugin.settings.isDebugMode)
-        .onChange((value) => {
-          this.plugin.settings.isDebugMode = value;
-          this.applySettingsUpdate();
-        }),
-    );
+    if (process.env.NODE_ENV === 'development') {
+      new Setting(detailsEl)
+      .setName(t("DEBUGMODE_NAME"))
+      .setDesc(fragWithHTML(t("DEBUGMODE_DESC")))
+      .addToggle((toggle) =>
+        toggle
+          .setValue(this.plugin.settings.isDebugMode)
+          .onChange((value) => {
+            this.plugin.settings.isDebugMode = value;
+            setDebugging(value);
+            this.applySettingsUpdate();
+          }),
+      );
+    }
 
 
     new Setting(detailsEl)

src/utils/CanvasNodeFactory.ts

@@ -11,7 +11,7 @@ container.appendChild(node.contentEl)
 import { TFile, WorkspaceLeaf, WorkspaceSplit } from "obsidian";
 import ExcalidrawView from "src/ExcalidrawView";
 import { getContainerForDocument, ConstructableWorkspaceSplit, isObsidianThemeDark } from "./ObsidianUtils";
-import { CustomMutationObserver, isDebugMode } from "./DebugHelper";
+import { CustomMutationObserver, DEBUGGING } from "./DebugHelper";
 
 declare module "obsidian" {
   interface Workspace {
@@ -110,7 +110,7 @@ export class CanvasNodeFactory {
           }
         }
       };
-      const observer = isDebugMode()
+      const observer = DEBUGGING
         ? new CustomMutationObserver(nodeObserverFn, "CanvasNodeFactory")
         : new MutationObserver(nodeObserverFn);
   

src/utils/DebugHelper.ts

@@ -1,14 +1,16 @@
-import { EXCALIDRAW_PLUGIN } from "src/constants/constants";
-
-
 export const durationTreshold = 0; //0.05; //ms
-export const isDebugMode = () => EXCALIDRAW_PLUGIN && EXCALIDRAW_PLUGIN.settings?.isDebugMode;
+
+export function setDebugging(value: boolean) {
+  DEBUGGING = (process.env.NODE_ENV === 'development') 
+  ? value
+  : false;
+}
+
+export let DEBUGGING = false;
 
 export const log = console.log.bind(window.console);
-export const debug = (...messages: unknown[]) => {
-  if(isDebugMode()) {
-    console.log(...messages);
-  }
+export const debug = (fn: Function, fnName: string, ...messages: unknown[]) => {
+  console.log(fnName,fn,...messages);
 };
 
 export class CustomMutationObserver {
@@ -29,7 +31,7 @@ export class CustomMutationObserver {
       const endTime = performance.now(); // Get end time
       const executionTime = endTime - startTime;
       if (executionTime > durationTreshold) {
-        console.log(`Excalidraw ${this.name} MutationObserver callback took ${executionTime}ms to execute`);
+        console.log(`Excalidraw ${this.name} MutationObserver callback took ${executionTime}ms to execute`, observer);
       }
     };
 

src/utils/ImageCache.ts

@@ -156,7 +156,7 @@ class ImageCache {
           const filepath = key.split("#")[0];
           const fileExists = files.some((f: TFile) => f.path === filepath);
           const file = fileExists ? files.find((f: TFile) => f.path === filepath) : null;
-          if (isLegacyKey || !file || (file && file.stat.mtime > cursor.value.mtime) || (!cursor.value.blob && !cursor.value.svg)) {
+          if (isLegacyKey || !file || (file && (file.stat.mtime > cursor.value.mtime)) || (!cursor.value.blob && !cursor.value.svg)) {
             deletePromises.push(
               new Promise<void>((innerResolve, innerReject) => {
                 const deleteRequest = store.delete(cursor.primaryKey);
@@ -293,7 +293,7 @@ class ImageCache {
 
       const file = this.app.vault.getAbstractFileByPath(key_.filepath.split("#")[0]);
       if (!file || !(file instanceof TFile)) return undefined;
-      if (cachedData && cachedData.mtime >= file.stat.mtime) {
+      if (cachedData && (cachedData.mtime >= file.stat.mtime)) {
         if(hasExcalidrawEmbeddedImagesTreeChanged(file, cachedData.mtime, this.plugin)) {
           return undefined;
         }

src/utils/StylesManager.ts

@@ -1,7 +1,7 @@
 import { WorkspaceWindow } from "obsidian";
 import ExcalidrawPlugin from "src/main";
 import { getAllWindowDocuments } from "./ObsidianUtils";
-import { debug } from "./DebugHelper";
+import { DEBUGGING, debug } from "./DebugHelper";
 
 const STYLE_VARIABLES = ["--background-modifier-cover","--background-primary-alt","--background-secondary","--background-secondary-alt","--background-modifier-border","--text-normal","--text-muted","--text-accent","--text-accent-hover","--text-faint","--text-highlight-bg","--text-highlight-bg-active","--text-selection","--interactive-normal","--interactive-hover","--interactive-accent","--interactive-accent-hover","--scrollbar-bg","--scrollbar-thumb-bg","--scrollbar-active-thumb-bg"];
 const EXCALIDRAW_CONTAINER_CLASS = "excalidraw__embeddable__outer";
@@ -12,12 +12,11 @@ export class StylesManager {
   private styleDark: string;
   private plugin: ExcalidrawPlugin;
 
-  
-
   constructor(plugin: ExcalidrawPlugin) {
     this.plugin = plugin;
+    const self = this;
     plugin.app.workspace.onLayoutReady(async () => {
-      debug("StylesManager.constructor app.workspace.onLayoutReady");
+      (process.env.NODE_ENV === 'development') && DEBUGGING && debug(undefined, "StylesManager.constructor > app.workspace.onLayoutReady", self);
       await this.harvestStyles();
       getAllWindowDocuments(plugin.app).forEach(doc => {
         this.copyPropertiesToTheme(doc);