publish custom zoom script

ea-scripts/Custom Zoom.md

@@ -0,0 +1,15 @@
+/*
+You can set a custom zoom level with this script. This allows you to set a zoom level below 10% or set the zoom level to a specific value.  Note however, that Excalidraw has a bug under 10% zoom, and a phantom copy of your image may appear on screen. If this happens, increase the zoom and the phantom should disappear, if it doesn't then close and open the drawing.
+
+```js*/
+const api = ea.getExcalidrawAPI();
+const appState = api.getAppState();
+const zoomStr = await utils.inputPrompt("Zoom [%]",null,`${appState.zoom.value*100}%`);
+if(!zoomStr) return;
+const zoomNum = parseFloat(zoomStr.match(/^\d*/)[0]);
+if(isNaN(zoomNum)) {
+  new Notice("You must provide a number");
+  return;
+}
+
+ea.getExcalidrawAPI().updateScene({appState:{zoom:{value: zoomNum/100 }}});

ea-scripts/Custom Zoom.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scan-search"><g stroke-width="2"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><circle cx="12" cy="12" r="3"/><path d="m16 16-1.9-1.9"/></g></svg>

ea-scripts/index-new.md

@@ -116,6 +116,7 @@ I would love to include your contribution in the script library. If you have a s
 |----|-----|
 |<div><img src="https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Auto%20Draw%20for%20Pen.svg"/></div>|[[#Auto Draw for Pen]]|
 |<div><img src="https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Boolean%20Operations.svg"/></div>|[[#Boolean Operations]]|
+|<div><img src="https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Custom%20Zoom.svg"/></div>|[[#Custom Zoom]]|
 |<div><img src="https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Copy%20Selected%20Element%20Styles%20to%20Global.svg"/></div>|[[#Copy Selected Element Styles to Global]]|
 |<div><img src="https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/ExcaliAI.svg"/></div>|[[#ExcaliAI]]|
 |<div><img src="https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/GPT-Draw-a-UI.svg"/></div>|[[#GPT Draw-a-UI]]|
@@ -272,6 +273,12 @@ https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea
 ```
 <table><tr  valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/zsviczian'>@zsviczian</a></td></tr><tr valign='top'><td class="label">Source</td><td class="data"><a href='https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Crop%20Vintage%20Mask.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">Adds a rounded mask to the image by adding a full cover black mask and a rounded rectangle white mask. The script is also useful for adding just a black mask. In this case, run the script, then delete the white mask and add your custom white mask.<br><img src='https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-crop-vintage.jpg'></td></tr></table>
 
+## Custom Zoom
+```excalidraw-script-install
+https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Custom%20Zoom.md
+```
+<table><tr  valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/zsviczian'>@zsviczian</a></td></tr><tr valign='top'><td class="label">Source</td><td class="data"><a href='https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Custom%20Zoom.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">You can set a custom zoom level with this script. This allows you to set a zoom level below 10% or set the zoom level to a specific value.  Note however, that Excalidraw has a bug under 10% zoom... a phantom copy of your image may appear on screen. If this happens, increase the zoom and the phantom should disappear, if it doesn't, then close and open the drawing.</td></tr></table>
+
 ## Darken background color
 ```excalidraw-script-install
 https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Darken%20background%20color.md

manifest.json

@@ -1,7 +1,7 @@
 {
   "id": "obsidian-excalidraw-plugin",
   "name": "Excalidraw",
-  "version": "2.0.23",
+  "version": "2.0.24",
   "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-16",
+    "@zsviczian/excalidraw": "0.17.1-obsidian-17",
     "chroma-js": "^2.4.2",
     "clsx": "^2.0.0",
     "colormaster": "^1.2.1",

src/EmbeddedFileLoader.ts

@@ -563,7 +563,7 @@ export class EmbeddedFilesLoader {
           }
           //files.push(fileData);
         }
-      } else if (embeddedFile.isSVGwithBitmap) {
+      } /*else if (embeddedFile.isSVGwithBitmap) {
         const fileData = {
           mimeType: embeddedFile.mimeType,
           id: entry.value[0],
@@ -580,7 +580,7 @@ export class EmbeddedFilesLoader {
         catch(e) {
           errorlog({ where: "EmbeddedFileLoader.loadSceneFiles", error: e });
         }
-      }
+      }*/
     }
 
     let equation;

src/ExcalidrawView.ts

@@ -50,6 +50,7 @@ import {
   obsidianToExcalidrawMap,
   MAX_IMAGE_SIZE,
   fileid,
+  sceneCoordsToViewportCoords,
 } from "./constants/constants";
 import ExcalidrawPlugin from "./main";
 import { 
@@ -134,8 +135,6 @@ import { nanoid } from "nanoid";
 import { CustomMutationObserver, isDebugMode } from "./utils/DebugHelper";
 import { extractCodeBlocks, postOpenAI } from "./utils/AIUtils";
 import { Mutable } from "@zsviczian/excalidraw/types/excalidraw/utility-types";
-import no from "./lang/locale/no";
-import { carveOutImage } from "./utils/CarveOut";
 
 declare const PLUGIN_VERSION:string;
 
@@ -261,6 +260,7 @@ export default class ExcalidrawView extends TextFileView {
   public canvasNodeFactory: CanvasNodeFactory;
   private embeddableRefs = new Map<ExcalidrawElement["id"], HTMLIFrameElement | HTMLWebViewElement>();
   private embeddableLeafRefs = new Map<ExcalidrawElement["id"], any>();
+//  private scrollYBeforeKeyboard: number = null;
 
   public semaphores: {
     popoutUnload: boolean; //the unloaded Excalidraw view was the last leaf in the popout window
@@ -4471,6 +4471,7 @@ export default class ExcalidrawView extends TextFileView {
         height: undefined,
       });
 
+
       React.useEffect(() => {
         this.toolsPanelRef = toolsPanelRef;
         this.embeddableMenuRef = embeddableMenuRef;
@@ -4479,6 +4480,7 @@ export default class ExcalidrawView extends TextFileView {
         this.excalidrawWrapperRef = excalidrawWrapperRef;
       }, []);
 
+
       React.useEffect(() => {
         setDimensions({
           width: this.contentEl.clientWidth,
@@ -4490,7 +4492,54 @@ export default class ExcalidrawView extends TextFileView {
             const width = this.contentEl.clientWidth;
             const height = this.contentEl.clientHeight;
             if(width === 0 || height === 0) return;
+            
+            //this is an aweful hack to prevent the keyboard pushing the canvas out of view.
+            //The issue is that contrary to Excalidraw.com where the page is simply pushed up, in 
+            //Obsidian the leaf has a fixed top. As a consequence the top of excalidrawWrapperDiv does not get pushed out of view
+            //but shirnks. But the text area is positioned relative to excalidrawWrapperDiv and consequently does not fit, which
+            //the distorts the whole layout.
+            //I hope to grow up one day and clean up this mess of a workaround, that resets the top of excalidrawWrapperDiv
+            //to a negative value, and manually scrolls back elements that were scrolled off screen
+            //I tried updating setDimensions with the value for top... but setting top and height using setDimensions did not do the trick
+            //I found that adding and removing this style solves the issue.
+            //...again, just aweful, but works.
+            const st = this.excalidrawAPI.getAppState();
+            const isKeyboardOutEvent = st.editingElement?.type === "text";
+            const isKeyboardBackEvent = this.semaphores.isEditingText && !isKeyboardOutEvent;
+            if(isKeyboardOutEvent) {
+              const self = this;
+                const appToolHeight = (self.contentEl.querySelector(".Island.App-toolbar") as HTMLElement)?.clientHeight ?? 0;
+                const editingElViewY = sceneCoordsToViewportCoords({sceneX:0, sceneY:st.editingElement.y}, st).y;
+                const scrollViewY = sceneCoordsToViewportCoords({sceneX:0, sceneY:-st.scrollY}, st).y;
+                const delta = editingElViewY - scrollViewY;
+                const isElementAboveKeyboard = height > (delta + appToolHeight*2)
+                const excalidrawWrapper = this.excalidrawWrapperRef.current;
+                console.log({isElementAboveKeyboard});
+                if(excalidrawWrapper && !isElementAboveKeyboard) {
+                  excalidrawWrapper.style.top = `${-(st.height - height)}px`;
+                  excalidrawWrapper.style.height = `${st.height}px`;
+                  self.excalidrawContainer?.querySelector(".App-bottom-bar")?.scrollIntoView();
+                  //@ts-ignore
+                  self.headerEl?.scrollIntoView();
+                }
+            }
+            if(isKeyboardBackEvent) {
+              const excalidrawWrapper = this.excalidrawWrapperRef.current;
+              const appButtonBar = this.excalidrawContainer?.querySelector(".App-bottom-bar");
+              //@ts-ignore
+              const headerEl = this.headerEl;
+              if(excalidrawWrapper) {
+                excalidrawWrapper.style.top = "";
+                excalidrawWrapper.style.height = "";
+                appButtonBar?.scrollIntoView();
+                headerEl?.scrollIntoView();
+              }
+            }
+            //end of aweful hack
+
+
             setDimensions({ width, height });
+            
             if (this.toolsPanelRef && this.toolsPanelRef.current) {
               this.toolsPanelRef.current.updatePosition();
             }

src/MarkdownPostProcessor.ts

@@ -45,11 +45,20 @@ let metadataCache: MetadataCache;
 const getDefaultWidth = (plugin: ExcalidrawPlugin): string => {
   const width = parseInt(plugin.settings.width);
   if (isNaN(width) || width === 0 || width === null) {
+    if(getDefaultHeight(plugin)!=="") return "";
     return "400";
   }
   return plugin.settings.width;
 };
 
+const getDefaultHeight = (plugin: ExcalidrawPlugin): string => {
+  const height = parseInt(plugin.settings.height);
+  if (isNaN(height) || height === 0 || height === null) {
+    return "";
+  }
+  return plugin.settings.height;
+};
+
 export const initializeMarkdownPostProcessor = (p: ExcalidrawPlugin) => {
   plugin = p;
   vault = p.app.vault;
@@ -123,9 +132,14 @@ const setStyle = ({element,imgAttributes,onCanvas}:{
   onCanvas: boolean,
 }
 ) => {
-  let style = `max-width:${imgAttributes.fwidth}${imgAttributes.fwidth.match(/\d$/) ? "px":""}; `; //width:100%;`; //removed !important https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/886
+  let style = "";
+  if(imgAttributes.fwidth) {
+    style = `max-width:${imgAttributes.fwidth}${imgAttributes.fwidth.match(/\d$/) ? "px":""}; `; //width:100%;`; //removed !important https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/886
+  } else {
+    style = "width: fit-content;"
+  }
   if (imgAttributes.fheight) {
-    style += `height:${imgAttributes.fheight}px;`;
+    style += `${imgAttributes.fwidth?"min-":"max-"}height:${imgAttributes.fheight}px;`;
   }
   if(!onCanvas) element.setAttribute("style", style);
   element.classList.add(...Array.from(imgAttributes.style))
@@ -363,7 +377,7 @@ const createImgElement = async (
         const linkModifier = linkClickModifierType(ev);
         if (plugin.isExcalidrawFile(f) && isMaskFile(plugin, f)) {
           (async () => {
-              const linkString = `[[${f.path}${srcParts[2]?"#"+srcParts[2]:""}]] ${getExcalidrawFileForwardLinks(plugin.app, f)}`;
+              const linkString = `[[${f.path}${srcParts[2]?"#"+srcParts[2]:""}]] ${getExcalidrawFileForwardLinks(plugin.app, f, new Set<string>())}`;
               const result = await linkPrompt(linkString, plugin.app);
               if(!result) return;
               const [file, linkText, subpath] = result;
@@ -510,9 +524,11 @@ const processInternalEmbed = async (internalEmbedEl: Element, file: TFile ):Prom
   internalEmbedEl.addClass("image-embed");
 
   attr.fwidth = internalEmbedEl.getAttribute("width")
-  ? internalEmbedEl.getAttribute("width")
-  : getDefaultWidth(plugin);
-  attr.fheight = internalEmbedEl.getAttribute("height");
+    ? internalEmbedEl.getAttribute("width")
+    : getDefaultWidth(plugin);
+  attr.fheight = internalEmbedEl.getAttribute("height")
+    ? internalEmbedEl.getAttribute("height")
+    : getDefaultHeight(plugin);
   let alt = internalEmbedEl.getAttribute("alt");
   attr.style = ["excalidraw-svg"];
   processAltText(src.split("#")[0],alt,attr);
@@ -596,7 +612,7 @@ const tmpObsidianWYSIWYG = async (
 
   const attr: imgElementAttributes = {
     fname: ctx.sourcePath,
-    fheight: "",
+    fheight: getDefaultHeight(plugin),
     fwidth: getDefaultWidth(plugin),
     style: ["excalidraw-svg"],
   };
@@ -609,8 +625,21 @@ const tmpObsidianWYSIWYG = async (
     //We are processing the markdown preview of an actual Excalidraw file
     //the excalidraw file in markdown preview mode
     const isFrontmatterDiv = Boolean(el.querySelector(".frontmatter"));
-    el.empty();
-    if(!isFrontmatterDiv) {
+    let areaPreview = false;
+    if(Boolean(ctx.frontmatter)) {
+      el.empty();
+    } else {
+      const warningEl = el.querySelector("div>h3[data-heading^='Unable to find section #^");
+      if(warningEl) {
+        const ref = warningEl.getAttr("data-heading").match(/Unable to find section (#\^(?:group=|area=|frame=)[^ ]*)/)?.[1];
+        if(ref) {
+          attr.fname = file.path + ref;
+          areaPreview = true;
+        }
+      }
+
+    }
+    if(!isFrontmatterDiv && !areaPreview) {
       if(el.parentElement === containerEl) containerEl.removeChild(el);
       return;
     }

src/dialogs/Messages.ts

@@ -17,6 +17,20 @@ 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.0.24":`
+Quality of Life Fixes!
+
+## Fixed
+- Text editing issue on mobile devices with an on-screen keyboard is now fixed 🥳. Previously, Excalidraw's UI fell apart when the keyboard was activated, and often even after you stopped editing, the canvas positioning was off. I hope to have solved the issue (we'll see after your testing and feedback!). This is one of those cases that seems insignificant but took enormous effort. It took me 2.5 full days of net time to figure out the root cause and the solution (this is not an exaggeration).
+- Tool buttons did not get selected on the first click.
+- Images flicker on Forced Save.
+- Hover preview fixes:
+  - ${String.fromCharCode(96)}area=${String.fromCharCode(96)}, ${String.fromCharCode(96)}group=${String.fromCharCode(96)}, ${String.fromCharCode(96)}frame=${String.fromCharCode(96)} references now display the part of the image as expected in hover preview (showed an empty preview until now).
+  - Block and section references to notes on the "back side of the drawing" now correctly show up in hover preview (showed an empty preview until now).
+
+## New
+- Default height setting in Plugin Settings. Thanks @leoccyao! [#1612](https://github.com/zsviczian/obsidian-excalidraw-plugin/pull/1612)
+`,
 "2.0.23":`
 ## New
 - Additional arrowheads (Circle, Circle Outline, Diamond, Diamond Outline, Triangle Outline) are now available via element properties.

src/lang/locale/en.ts

@@ -469,6 +469,11 @@ FILENAME_HEAD: "Filename",
     "The default width of an embedded drawing. This applies to live preview edit and reading mode, as well as to hover previews. You can specify a custom " +
     "width when embedding an image using the <code>![[drawing.excalidraw|100]]</code> or " +
     "<code>[[drawing.excalidraw|100x100]]</code> format.",
+  EMBED_HEIGHT_NAME: "Default height of embedded (transcluded) image",
+  EMBED_HEIGHT_DESC:
+    "The default height of an embedded drawing. This applies to live preview edit and reading mode, as well as to hover previews. You can specify a custom " +
+    "height when embedding an image using the <code>![[drawing.excalidraw|100]]</code> or " +
+    "<code>[[drawing.excalidraw|100x100]]</code> format.",
   EMBED_TYPE_NAME: "Type of file to insert into the document",
   EMBED_TYPE_DESC:
     "When you embed an image into a document using the command palette this setting will specify if Excalidraw should embed the original Excalidraw file " +

src/settings.ts

@@ -58,6 +58,7 @@ export interface ExcalidrawSettings {
   displayExportedImageIfAvailable: boolean;
   previewMatchObsidianTheme: boolean;
   width: string;
+  height: string;
   dynamicStyling: DynamicStyle;
   isLeftHanded: boolean;
   iframeMatchExcalidrawTheme: boolean;
@@ -203,6 +204,7 @@ export const DEFAULT_SETTINGS: ExcalidrawSettings = {
   displayExportedImageIfAvailable: false,
   previewMatchObsidianTheme: false,
   width: "400",
+  height: "",
   dynamicStyling: "colorful",
   isLeftHanded: false,
   iframeMatchExcalidrawTheme: true,
@@ -1630,6 +1632,20 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
           }),
       );
 
+    new Setting(detailsEl)
+      .setName(t("EMBED_HEIGHT_NAME"))
+      .setDesc(fragWithHTML(t("EMBED_HEIGHT_DESC")))
+      .addText((text) =>
+        text
+          .setPlaceholder("e.g.: 400")
+          .setValue(this.plugin.settings.height)
+          .onChange(async (value) => {
+            this.plugin.settings.height = value;
+            this.applySettingsUpdate();
+            this.requestEmbedUpdate = true;
+          }),
+      );
+
     let scaleText: HTMLDivElement;
 
     new Setting(detailsEl)