Update README.md

README.md

@@ -17,8 +17,8 @@ Please upgrade to Obsidian v0.12.19 or higher to get the latest release.
 |[![fourtfont](https://user-images.githubusercontent.com/14358394/149659524-2a4e0a24-40c9-4e66-a6b1-c92f3b88ecd5.jpg)](https://youtu.be/eKFmrSQhFA4)|[![thumbnail](https://user-images.githubusercontent.com/14358394/151705333-54e9ffd2-0bd7-4d02-b99e-0bd4e4708d4d.jpg)](https://youtu.be/qbPIAZguJeo)|[![Thumbnail](https://user-images.githubusercontent.com/14358394/152585752-7eb0371f-0bab-40f6-a194-3b48e5811735.jpg)](https://youtu.be/2Y8OhkGiTHg)|
 |[![Thumbnail](https://user-images.githubusercontent.com/14358394/153676009-6f86b2d7-c248-49a2-b802-be21c6999e4f.jpg)](https://youtu.be/2v9TZmQNO8c)|[![Thumbnail](https://user-images.githubusercontent.com/14358394/154821232-a404b6cf-72fb-4ce4-9d53-619132dce491.jpg)](https://youtu.be/xHPGWR3m0c8)|[![Thumbnail](https://user-images.githubusercontent.com/14358394/156931428-b2269fd9-87bd-43ab-8558-5572f40dff93.jpg)](https://youtu.be/gMIKXyhS-dM)|
 |[![thumbnail](https://user-images.githubusercontent.com/14358394/156931461-0979b821-315a-41dd-86f1-31d169b7c127.jpg)](https://youtu.be/Etskjw7a5zo)|[![Thumbnail](https://user-images.githubusercontent.com/14358394/158008902-12c6a851-237e-4edd-a631-d48e81c904b2.jpg)](https://youtu.be/4N6efq1DtH0)|[![thumbnail](https://user-images.githubusercontent.com/14358394/159369910-6371f08d-b5fa-454d-9c6c-948f7e7a7d26.jpg)](https://youtu.be/U2LkBRBk4LY)|
-| [![6 strategies for linking your visual thoughts v4](https://user-images.githubusercontent.com/14358394/171635214-30533c45-94fa-436e-83a9-b2ec99f190e2.jpg)](https://youtu.be/qiKuqMcNWgU)|[![Video thumbnail small](https://user-images.githubusercontent.com/14358394/185791706-3d9983ab-7cb1-4b27-a016-30c039d84e34.jpg)](https://youtu.be/yZQoJg2RCKI)| |
-
+| [![6 strategies for linking your visual thoughts v4](https://user-images.githubusercontent.com/14358394/171635214-30533c45-94fa-436e-83a9-b2ec99f190e2.jpg)](https://youtu.be/qiKuqMcNWgU)|[![Video thumbnail small](https://user-images.githubusercontent.com/14358394/185791706-3d9983ab-7cb1-4b27-a016-30c039d84e34.jpg)](https://youtu.be/yZQoJg2RCKI)|[![Thumbnail - Colors - Excalidraw Basics (Custom)](https://user-images.githubusercontent.com/14358394/194773147-5418a0ab-6be5-4eb0-a8e4-d6af21b1b483.png)](https://youtu.be/6PLGHBH9VZ4) |
+|[![Thumbnail - Excalidraw color palettes (Custom)](https://user-images.githubusercontent.com/14358394/194773211-9e871be7-0795-4dc7-947e-c6c275e690d0.png)](https://youtu.be/epYNx2FSf2w) | [![Thumbnail (Custom)](https://user-images.githubusercontent.com/14358394/194773268-400cfb1b-6bde-45e0-9e4b-91bbaa461cf0.png)](https://youtu.be/Amhlv6r9WvM) | [![Thumbnail - Simple rules for beautiful sketches (Custom) (1)](https://user-images.githubusercontent.com/14358394/194773527-ef35c8b9-1a6d-4415-9c7e-b667fb17535d.png)](https://youtu.be/r9oB1SlK1GU) |
 
 # Key features
 - The plugin integrates Excalidraw seamlessly into Obsidian including Command Palette actions, File Explorer features, Option Menu commands, and the Ribbon Button.

manifest.json

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "obsidian-excalidraw-plugin",
-  "version": "1.7.11",
+  "version": "1.7.23",
   "description": "This is an Obsidian.md plugin that lets you view and edit Excalidraw drawings",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

src/ExcalidrawAutomate.ts

@@ -7,6 +7,7 @@ import {
   ExcalidrawBindableElement,
   FileId,
   NonDeletedExcalidrawElement,
+  ExcalidrawImageElement,
 } from "@zsviczian/excalidraw/types/element/types";
 import { normalizePath, TFile, WorkspaceLeaf } from "obsidian";
 import ExcalidrawView, { ExportSettings, TextMode } from "./ExcalidrawView";
@@ -24,7 +25,9 @@ import {
   //debug,
   embedFontsInSVG,
   errorlog,
+  getDataURL,
   getEmbeddedFilenameParts,
+  getImageSize,
   getPNG,
   getSVG,
   isVersionNewerThanOther,
@@ -1214,7 +1217,7 @@ export class ExcalidrawAutomate implements ExcalidrawAutomateInterface {
   getViewElements(): ExcalidrawElement[] {
     //@ts-ignore
     if (!this.targetView || !this.targetView?._loaded) {
-      errorMessage("targetView not set", "getViewSelectedElements()");
+      errorMessage("targetView not set", "getViewElements()");
       return [];
     }
     const current = this.targetView?.excalidrawRef?.current;
@@ -1232,7 +1235,7 @@ export class ExcalidrawAutomate implements ExcalidrawAutomateInterface {
   deleteViewElements(elToDelete: ExcalidrawElement[]): boolean {
     //@ts-ignore
     if (!this.targetView || !this.targetView?._loaded) {
-      errorMessage("targetView not set", "getViewSelectedElements()");
+      errorMessage("targetView not set", "deleteViewElements()");
       return false;
     }
     const current = this.targetView?.excalidrawRef?.current;
@@ -1280,7 +1283,7 @@ export class ExcalidrawAutomate implements ExcalidrawAutomateInterface {
   getViewFileForImageElement(el: ExcalidrawElement): TFile | null {
     //@ts-ignore
     if (!this.targetView || !this.targetView?._loaded) {
-      errorMessage("targetView not set", "getViewSelectedElements()");
+      errorMessage("targetView not set", "getViewFileForImageElement()");
       return null;
     }
     if (!el || el.type !== "image") {
@@ -1678,6 +1681,30 @@ export class ExcalidrawAutomate implements ExcalidrawAutomateInterface {
     return { width: size.w ?? 0, height: size.h ?? 0 };
   };
 
+  /**
+   * Returns the size of the image element at 100% (i.e. the original size)
+   * @param imageElement an image element from the active scene on targetView
+   */
+  async getOriginalImageSize(imageElement: ExcalidrawImageElement): Promise<{width: number; height: number}> {
+    //@ts-ignore
+    if (!this.targetView || !this.targetView?._loaded) {
+      errorMessage("targetView not set", "getOriginalImageSize()");
+      return null;
+    }
+    if(!imageElement || imageElement.type !== "image") {
+      errorMessage("Please provide a single image element as input", "getOriginalImageSize()");
+      return null;
+    }
+    const ef = this.targetView.excalidrawData.getFile(imageElement.fileId);
+    if(!ef) {
+      errorMessage("Please provide a single image element as input", "getOriginalImageSize()");
+      return null;
+    }
+    const isDark = this.getExcalidrawAPI().getAppState().theme === "dark";
+    const dataURL = ef.getImage(isDark);
+    return await getImageSize(dataURL);
+  }
+
   /**
    * verifyMinimumPluginVersion returns true if plugin version is >= than required
    * recommended use:

src/dialogs/Messages.ts

@@ -17,6 +17,23 @@ I develop this plugin as a hobby, spending most of my free time doing this. If y
 
 <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>
 `,
+"1.7.23":`
+# New and improved
+- **Updated Chinese translation**. Thanks, @tswwe!
+- **Improved update for TextElement links**: Until now, when you attached a link to a file to a TextElement using the "Create Link" command, this link did not get updated when the file was renamed or moved. Only links created as markdown links in the TextElement text were updated. Now both approaches work. Keep in mind however, that if you have a link in the TextElemenet text, it will override the link attached to the text element using the create link command. [#566](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/566)
+- **Transclusion filters markdown comments**: Text transclusion in a TextElement using the ${String.fromCharCode(96)}![[file]]${String.fromCharCode(96)} or ${String.fromCharCode(96)}![[file#section]]${String.fromCharCode(96)} format did not filter out markdown comments in the file placed ${String.fromCharCode(96)}%% inside a comment block %%${String.fromCharCode(96)}. Now they do.
+- **Remove leading '>' from trancluded quotes**: Added a new option in settings under **Links and Transclusion** to remove the leading ${String.fromCharCode(96)}> ${String.fromCharCode(96)} characters from quotes you transclude as a text element in your drawing. 
+![image](https://user-images.githubusercontent.com/14358394/194755306-6e7bf5f3-4228-44a1-9363-c3241b34865e.png)
+- **Added support for ${String.fromCharCode(96)}webp${String.fromCharCode(96)}, ${String.fromCharCode(96)}bmp${String.fromCharCode(96)}, and ${String.fromCharCode(96)}ico${String.fromCharCode(96)} images**. This extends the already supported formats (${String.fromCharCode(96)}jpg${String.fromCharCode(96)}, ${String.fromCharCode(96)}gif${String.fromCharCode(96)}, ${String.fromCharCode(96)}png${String.fromCharCode(96)}, ${String.fromCharCode(96)}svg${String.fromCharCode(96)}).
+- **Added command palette action to reset images to original size**. Select a single image or embedded Excalidraw drawing on your canvas and choose ${String.fromCharCode(96)}Set selected image element size to 100% of original${String.fromCharCode(96)} from the command palette. This function is especially helpful when you combine atomic drawings on a single canvas, keeping each atomic piece in its original excalidraw file (i.e. the way I create [book on a page summaries](https://www.youtube.com/playlist?list=PL6mqgtMZ4NP1-mbCYc3T7mr-unmsIXpEG))
+- The ${String.fromCharCode(96)}async getOriginalImageSize(imageElement: ExcalidrawImageElement): Promise<{width: number; height: number}>${String.fromCharCode(96)} function is also avaiable via ExcalidrawAutomate. You may use this function to resize images to custom scales (e.g. 50% size, or to fit a certain bounding rectangle).
+
+# Fixed
+- **Upgraded perfect freehand package to resolve unwanted dots on end of lines** [#5727](https://github.com/excalidraw/excalidraw/pull/5727)
+- **Pinch zoom in View mode opens images** resulting in a very annoying behavior [#837](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/837)
+- **Embedded files** such as transcluded markdown documents and images **did not honor the Obsidian "New Link Format" setting** (shortest path, relative path, absolute path). [#829](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/829)
+- **Fixed error with dataview queries involving Excalidraw files**: In case you created a task on an Excalidraw canvas (${String.fromCharCode(96)}docA.md${String.fromCharCode(96)}) by typing ${String.fromCharCode(96)}- [ ] Task [[owner]] #tag${String.fromCharCode(96)}, and then you created a Dataview tasklist in another document (${String.fromCharCode(96)}docB.md${String.fromCharCode(96)}) such that the query criteria matched the task in ${String.fromCharCode(96)}docA.md${String.fromCharCode(96)}, then the task from ${String.fromCharCode(96)}docA.md${String.fromCharCode(96)} only appeared as an empty line when viewing ${String.fromCharCode(96)}docB.md${String.fromCharCode(96)}. If you now embedded ${String.fromCharCode(96)}docB.md${String.fromCharCode(96)} into a third markdown document (${String.fromCharCode(96)}docC.md${String.fromCharCode(96)}), then instead of the contents of ${String.fromCharCode(96)}docB.md${String.fromCharCode(96)} Obsidian rendered ${String.fromCharCode(96)}docA.md${String.fromCharCode(96)}. [#835](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/835)
+`,
 "1.7.22":`
 # Fixed
 - Text size in sticky notes increased when opening the drawing and when editing a sticky note [#824](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/824)

src/lang/locale/en.ts

@@ -60,6 +60,7 @@ export default {
   READ_RELEASE_NOTES: "Read latest release notes",
   TRAY_MODE: "Toggle property-panel tray-mode",
   SEARCH: "Search for text in drawing",
+  RESET_IMG_TO_100: "Set selected image element size to 100% of original",
 
   //ExcalidrawView.ts
   INSTALL_SCRIPT_BUTTON: "Install or update Excalidraw Scripts",

src/main.ts

@@ -89,7 +89,7 @@ import {
 } from "./utils/Utils";
 import { getAttachmentsFolderAndFilePath, getNewOrAdjacentLeaf, getParentOfClass, isObsidianThemeDark } from "./utils/ObsidianUtils";
 //import { OneOffs } from "./OneOffs";
-import { FileId } from "@zsviczian/excalidraw/types/element/types";
+import { ExcalidrawImageElement, FileId } from "@zsviczian/excalidraw/types/element/types";
 import { ScriptEngine } from "./Scripts";
 import {
   hoverEvent,
@@ -1153,6 +1153,42 @@ export default class ExcalidrawPlugin extends Plugin {
       },
     });
 
+    this.addCommand({
+      id: "reset-image-to-100",
+      name: t("RESET_IMG_TO_100"),
+      checkCallback: (checking:boolean) => {
+        const view = this.app.workspace.getActiveViewOfType(ExcalidrawView);
+        if(!view) return false;
+        if(!view.excalidrawAPI) return false;
+        const els = view.getViewSelectedElements().filter(el=>el.type==="image");
+        if(els.length !== 1) {
+          if(checking) return false;
+          new Notice("Select a single image element and try again");
+          return false;
+        }
+        const el = els[0] as ExcalidrawImageElement;
+        const ef = view.excalidrawData.getFile(el.fileId);
+        if(!ef) {
+          if(checking) return false;
+          new Notice("Select a single image element and try again");
+          return false;
+        }
+        if(checking) return true;
+
+        (async () => {
+          const ea = new ExcalidrawAutomate(this,view);
+          const size = await ea.getOriginalImageSize(el);
+          if(size) {
+            ea.copyViewElementsToEAforEditing(els);
+            const eaEl = ea.getElement(el.id);
+            //@ts-ignore
+            eaEl.width = size.width; eaEl.height = size.height;
+            ea.addElementsToView(false,false,false);
+          }
+        })()
+      }
+    })
+
     this.addCommand({
       id: "insert-image",
       name: t("INSERT_IMAGE"),

src/types.d.ts

@@ -1,4 +1,4 @@
-import { ExcalidrawBindableElement, ExcalidrawElement, FileId, FillStyle, NonDeletedExcalidrawElement, StrokeSharpness, StrokeStyle } from "@zsviczian/excalidraw/types/element/types";
+import { ExcalidrawBindableElement, ExcalidrawElement, ExcalidrawImageElement, FileId, FillStyle, NonDeletedExcalidrawElement, StrokeSharpness, StrokeStyle } from "@zsviczian/excalidraw/types/element/types";
 import { Point } from "@zsviczian/excalidraw/types/types";
 import { TFile, WorkspaceLeaf } from "obsidian";
 import { EmbeddedFilesLoader } from "./EmbeddedFileLoader";
@@ -223,6 +223,7 @@ export interface ExcalidrawAutomateInterface {
   //verifyMinimumPluginVersion returns true if plugin version is >= than required
   //recommended use:
   //if(!ea.verifyMinimumPluginVersion || !ea.verifyMinimumPluginVersion("1.5.20")) {new Notice("message");return;}
+  getOriginalImageSize(imageElement: ExcalidrawImageElement): Promise<{width: number; height: number}>;
   verifyMinimumPluginVersion(requiredVersion: string): boolean;
   isExcalidrawView(view: any): boolean;
   selectElementsInView(elements: ExcalidrawElement[]): void; //sets selection in view