2.22.0-beta-1, 0.18.0-87

Author: zsviczian

manifest-beta.json

@@ -1,7 +1,7 @@
 {
 	"id": "obsidian-excalidraw-plugin",
 	"name": "Excalidraw",
-  "version": "2.21.2",
+  "version": "2.22.0-beta-1",
   "minAppVersion": "1.5.7",
 	"description": "Sketch Your Mind. An Obsidian plugin to edit and view Excalidraw drawings. Enter the world of 4D Visual PKM.",
 	"author": "Zsolt Viczian",

package-lock.json

@@ -25,7 +25,7 @@
   "license": "MIT",
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "@zsviczian/excalidraw": "0.18.0-86",
+    "@zsviczian/excalidraw": "0.18.0-87",
     "chroma-js": "^3.1.2",
     "clsx": "^2.0.0",
     "@zsviczian/colormaster": "^1.2.2",

package.json

@@ -20,11 +20,14 @@ I build this plugin in my free time, as a labor of love. Curious about the philo
 "2.22.0":`
 ## Fixed
 - Tray-mode panel buttons get misaligned [#2718](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2718) 🙏[@heinrich26](https://github.com/heinrich26)
+- Improved loading of nested Excalidraw files in the Excalidraw scene, plus some limited performance improvement.
 
 ## New from Excalidraw.com
 - Various text element editing improvements, including handle on the right side of wrapped text to enable text auto-resizing (instead of having to open the context menu for this) [#10979](https://github.com/excalidraw/excalidraw/pull/10979)
 - Support for Mermaid state diagrams [#11031](https://github.com/excalidraw/excalidraw/pull/11031)
 
+## New
+- (partial) support for embedding the [Sheet Plus](obsidian://show-plugin?id=sheet-plus) plugin as an active embedded element in Excalidraw.
 `,
 "2.21.2":`
 ## Fixed

src/shared/Dialogs/Messages.ts

@@ -485,8 +485,45 @@ export const getExcalidrawEmbeddedFilesFiletree = (sourceFile: TFile, plugin: Ex
 }
 
 export const hasExcalidrawEmbeddedImagesTreeChanged = (sourceFile: TFile, mtime:number, plugin: ExcalidrawPlugin):boolean => {
-  const fileList = getExcalidrawEmbeddedFilesFiletree(sourceFile, plugin);
-  return fileList.some(f=>f.stat.mtime > mtime);
+  if(!sourceFile || !plugin.isExcalidrawFile(sourceFile)) {
+    return false;
+  }
+
+  const visited = new Set<TFile>();
+  const stack: TFile[] = [sourceFile];
+  const app = plugin.app;
+
+  while (stack.length > 0) {
+    const currentFile = stack.pop();
+    const resolvedLinks = app.metadataCache.resolvedLinks[currentFile.path];
+    if (!resolvedLinks) {
+      continue;
+    }
+
+    const paths = Object.keys(resolvedLinks);
+    for (let i = paths.length - 1; i >= 0; i--) {
+      const file = app.vault.getAbstractFileByPath(paths[i]);
+      if (!file || !(file instanceof TFile)) {
+        continue;
+      }
+
+      const isExcalidraw = plugin.isExcalidrawFile(file);
+      if ((file.extension === "md" && !isExcalidraw) || visited.has(file)) {
+        continue;
+      }
+
+      visited.add(file);
+      if (file.stat.mtime > mtime) {
+        return true;
+      }
+
+      if (isExcalidraw) {
+        stack.push(file);
+      }
+    }
+  }
+
+  return false;
 }
 
 export async function exportImageToFile(view: ExcalidrawView, path: string, content: string | ArrayBuffer | Blob, extension: string): Promise<TFile> {

src/utils/fileUtils.ts

@@ -339,7 +339,7 @@ export function renderWebView (src: string, view: ExcalidrawView, id: string, _:
 //Render WorkspaceLeaf or CanvasNode
 //--------------------------------------------------------------------------------
 function RenderObsidianView(
-  { mdProps, element, linkText, view, containerRef, activeEmbeddable, theme, canvasColor, selectedElementId }:{
+  { mdProps, element, linkText, view, containerRef, activeEmbeddable, theme, canvasColor, selectedElementId, sceneZoom }:{
   mdProps: EmbeddableMDCustomProps;
   element: ExcalidrawEmbeddableElement;
   linkText: string;
@@ -349,6 +349,7 @@ function RenderObsidianView(
   theme: string;
   canvasColor: string;
   selectedElementId: string;
+  sceneZoom: number;
 }): JSX.Element {
 
   const { subpath, file } = processLinkText(linkText, view);
@@ -364,7 +365,6 @@ function RenderObsidianView(
   const isActiveRef = React.useRef(false);
   const viewTypeRef = React.useRef("empty");
   const themeRef = React.useRef(theme);
-  const elementRef = React.useRef(element);
   const pdfObserverRef = React.useRef(null);
   const pdfObserverDisabledRef = React.useRef(false);
   const mobilePatchCleanupRef = React.useRef(null);
@@ -374,11 +374,6 @@ function RenderObsidianView(
   React.useEffect(() => {
     themeRef.current = theme;
   }, [theme]);
-
-  // Update elementRef when element changes
-  React.useEffect(() => {
-    elementRef.current = element;
-  }, [element]);
 
   //--------------------------------------------------------------------------------
   //block propagation of events to the parent if the embeddable element is active
@@ -556,7 +551,24 @@ function RenderObsidianView(
   //--------------------------------------------------------------------------------
   //Set colors of the canvas node
   //--------------------------------------------------------------------------------
+  function roundEmbeddableSize(value: number): number {
+    return Math.round(value * 1000) / 1000;
+  }
+
+  function setEmbeddableSizeVars(canvasNode: HTMLDivElement, element: ExcalidrawEmbeddableElement, sceneZoom: number) {
+    const scaleX = Math.abs(element.scale?.[0] ?? 1);
+    const scaleY = Math.abs(element.scale?.[1] ?? 1);
+    const width = roundEmbeddableSize(element.width / scaleX);
+    const height = roundEmbeddableSize(element.height / scaleY);
+    canvasNode?.style.setProperty("--embeddable-width", `${width}px`);
+    canvasNode?.style.setProperty("--embeddable-height", `${height}px`);
+    canvasNode?.style.setProperty("--embeddable-scaleX", `${roundEmbeddableSize(scaleX)}`);
+    canvasNode?.style.setProperty("--embeddable-scaleY", `${roundEmbeddableSize(scaleY)}`);
+    canvasNode?.style.setProperty("--scene-zoom", `${roundEmbeddableSize(sceneZoom ?? 1)}`);
+  }
+
   function setColors (canvasNode: HTMLDivElement, element: ExcalidrawEmbeddableElement, mdProps: EmbeddableMDCustomProps, canvasColor: string, viewType: string) {
+    setEmbeddableSizeVars(canvasNode, element, sceneZoom);
     if(!mdProps) return;
     if (!leafRef.current?.hasOwnProperty("node")) return;
 
@@ -647,7 +659,6 @@ function RenderObsidianView(
     if(!containerRef.current) {
       return;
     }
-    const element = elementRef.current;
     const canvasNode = containerRef.current;
     if(!canvasNode.hasClass("canvas-node")) return;
     setColors(canvasNode, element, mdProps, canvasColor, viewTypeRef.current);
@@ -660,12 +671,25 @@ function RenderObsidianView(
     mdProps?.borderMatchElement,
     mdProps?.borderColor,
     mdProps?.borderOpacity,
-    elementRef.current,
+    element.backgroundColor,
+    element.strokeColor,
+    element.width,
+    element.height,
+    element.scale?.[0],
+    element.scale?.[1],
+    sceneZoom,
     containerRef.current,
     canvasColor,
     viewTypeRef.current,
   ])
 
+  React.useEffect(() => {
+    if(!containerRef.current) {
+      return;
+    }
+    setEmbeddableSizeVars(containerRef.current, element, sceneZoom);
+  }, [element.width, element.height, element.scale?.[0], element.scale?.[1], sceneZoom]);
+
   //--------------------------------------------------------------------------------
   //Switch to preview mode when the iframe is not active
   //--------------------------------------------------------------------------------
@@ -886,6 +910,7 @@ export const CustomEmbeddable: React.FC<{element: ExcalidrawEmbeddableElement; v
         theme={appState.theme}
         canvasColor={appState.viewBackgroundColor}
         selectedElementId={selectedElementIds.length === 1 ? selectedElementIds[0] : null}
+        sceneZoom={appState.zoom.value}
       />
     </div>
   )

src/view/components/CustomEmbeddable.tsx

@@ -1181,4 +1181,24 @@ textarea.excalidraw-wysiwyg, .excalidraw input {
 
 .is-mobile .excalidraw.excalidraw--mobile .FixedSideContainer.FixedSideContainer_side_top.App-top-bar {
   margin-top: 1rem
-}
+}
+
+/*
+Obsidian Sheets Plus support
+*/
+.excalidraw__embeddable__outer .lj-content-view {
+	width: var(--embeddable-width);
+	height: var(--embeddable-height);
+}
+
+.excalidraw__embeddable__outer #sheet-box {
+	height: calc(var(--embeddable-height) - var(--lj-toolbar-height) + 40px);
+}
+
+.excalidraw__embeddable__outer .lj-univer .univer-relative.univer-grid {
+    width: var(--embeddable-width);
+}
+
+/*
+End Obsidian Sheets Plus support
+*/