imagepath hook

Pdf crop fix

package-lock.json

@@ -11,7 +11,7 @@
       "dependencies": {
         "@popperjs/core": "^2.11.8",
         "@zsviczian/colormaster": "^1.2.2",
-        "@zsviczian/excalidraw": "0.17.6-25",
+        "@zsviczian/excalidraw": "0.17.6-26",
         "chroma-js": "^2.4.2",
         "clsx": "^2.0.0",
         "es6-promise-pool": "2.5.0",
@@ -3315,9 +3315,9 @@
       "license": "MIT"
     },
     "node_modules/@zsviczian/excalidraw": {
-      "version": "0.17.6-25",
-      "resolved": "https://registry.npmjs.org/@zsviczian/excalidraw/-/excalidraw-0.17.6-25.tgz",
-      "integrity": "sha512-Hq/LVJoQHTc8ECKrqLf1hZRh7xEDI5W7SoVjBhLl5vwbhUxrYPu7j83g01kDiqKxybq8YK0kQULhEck64dyh0A==",
+      "version": "0.17.6-26",
+      "resolved": "https://registry.npmjs.org/@zsviczian/excalidraw/-/excalidraw-0.17.6-26.tgz",
+      "integrity": "sha512-UAqr7b7cxIbOvK1u0NKqgAs0wB9KYUsVc6Q2J+yviM4ae+wkTXp8qW/V4mdWADJ3lTG5RgXCb9ausIKfSkPNRg==",
       "dependencies": {
         "@braintree/sanitize-url": "6.0.2",
         "@excalidraw/random-username": "1.1.0",

src/constants/assets/startupScript.md

@@ -105,6 +105,41 @@
  */
 //ea.onFileCreateHook = (data) => {}; 
 
+/**
+ * If set, this callback is triggered when a image is being saved in Excalidraw.
+ * You can use this callback to customize the naming and path of pasted images to avoid
+ * default names like "Pasted image 123147170.png" being saved in the attachments folder,
+ * and instead use more meaningful names based on the Excalidraw file or other criteria,
+ * plus save the image in a different folder.
+ * 
+ * If the function returns null or undefined, the normal Excalidraw operation will continue
+ * with the excalidraw generated name and default path.
+ * If a filepath is returned, that will be used. Include the full Vault filepath and filename
+ * with the file extension.
+ * The currentImageName is the name of the image generated by excalidraw or provided during paste.
+ * 
+ * @param data - An object containing the following properties:
+ *   @property {string} [currentImageName] - Default name for the image.
+ *   @property {string} drawingFilePath - The file path of the Excalidraw file where the image is being used.
+ * 
+ * @returns {string} - The new filepath for the image including full vault path and extension.
+ * 
+ * Example usage:
+ * ```
+ * onImageFilePathHook: (data) => {
+ *   const { currentImageName, drawingFilePath } = data;
+ *   const ext = currentImageName.split('.').pop();
+ *   // Generate a new filepath based on the drawing file name and other criteria
+ *   return `${drawingFileName} - ${currentImageName || 'image'}.${ext}`;
+ * }
+ * ```
+ *  onImageFilePathHook: (data: {
+ *   currentImageName: string; // Excalidraw generated name of the image, or the name received from the file system.
+ *   drawingFilePath: string; // The full filepath of the Excalidraw file where the image is being used.
+ * }) => string = null;  
+*/
+//ea.onImageFileNameHook = (data) => {};
+
 /**
  * If set, this callback is triggered whenever the active canvas color changes
  *   onCanvasColorChangeHook: (

src/shared/EmbeddedFileLoader.ts

@@ -19,7 +19,7 @@ import { ExportSettings } from "../view/ExcalidrawView";
 import { t } from "../lang/helpers";
 import { tex2dataURL } from "./LaTeX";
 import ExcalidrawPlugin from "../core/main";
-import { blobToBase64, getDataURLFromURL, getMimeType, getPDFDoc, getURLImageExtension, hasExcalidrawEmbeddedImagesTreeChanged, readLocalFileBinary } from "../utils/fileUtils";
+import { blobToBase64, getDataURLFromURL, getMimeType, getPDFDoc, getURLImageExtension, readLocalFileBinary } from "../utils/fileUtils";
 import {
   errorlog,
   getDataURL,
@@ -91,6 +91,7 @@ export type PDFPageViewProps = {
   bottom: number;
   right: number;
   top: number;
+  rotate?: number; //may be undefined in legacy files
 }
 
 export type Size = {
@@ -866,19 +867,58 @@ export class EmbeddedFilesLoader {
         }
         const [left, bottom, right, top] = page.view;
         viewProps = {left, bottom, right, top};
+        viewProps.rotate = page.rotate;
 
         if(validRect) {
-          const pageHeight = top - bottom;
-          width = (cropRect[2] - cropRect[0]) * scale;
-          height = (cropRect[3] - cropRect[1]) * scale;
 
-          const crop = validRect ? {
-            left: (cropRect[0] - left) * scale,
-            top: (bottom + pageHeight - cropRect[3]) * scale,
-            width,
-            height,
-          } : undefined;
-          if(crop) {
+          const pageHeight = top - bottom;
+          const pageWidth = right - left;
+
+          if(!page.rotate || page.rotate === 0) {  
+            width = (cropRect[2] - cropRect[0]) * scale;
+            height = (cropRect[3] - cropRect[1]) * scale;
+
+            const crop = {
+              left: (cropRect[0] - left) * scale,
+              top: (bottom + pageHeight - cropRect[3]) * scale,
+              width,
+              height,
+            };
+            return cropCanvas(canvas, crop);
+          }
+          if(page.rotate === 90) {
+            width = (cropRect[3] - cropRect[1]) * scale;
+            height = (cropRect[2] - cropRect[0]) * scale;
+            const crop = {
+              left: cropRect[1] * scale,
+              top: (pageHeight - cropRect[2]) * scale,
+              width,
+              height,
+            };
+            return cropCanvas(canvas, crop);
+          }
+          
+          if(page.rotate === 180) {
+            width = (cropRect[2] - cropRect[0]) * scale;
+            height = (cropRect[3] - cropRect[1]) * scale;
+            const crop = {
+              left: (pageWidth - cropRect[2]) * scale,
+              top: cropRect[1] * scale,
+              width,
+              height,
+            };
+            return cropCanvas(canvas, crop);
+          }
+          
+          if(page.rotate === 270) {
+            width = (cropRect[3] - cropRect[1]) * scale;
+            height = (cropRect[2] - cropRect[0]) * scale;
+            const crop = {
+              left: (pageWidth - cropRect[3]) * scale,
+              top: cropRect[0] * scale,
+              width,
+              height,
+            };
             return cropCanvas(canvas, crop);
           }
         }

src/shared/ExcalidrawAutomate.ts

@@ -2670,6 +2670,40 @@ export class ExcalidrawAutomate {
     pointerPosition: { x: number; y: number }; //the pointer position on canvas
    }) => boolean = null;
 
+  /**
+   * If set, this callback is triggered when a image is being saved in Excalidraw.
+   * You can use this callback to customize the naming and path of pasted images to avoid
+   * default names like "Pasted image 123147170.png" being saved in the attachments folder,
+   * and instead use more meaningful names based on the Excalidraw file or other criteria,
+   * plus save the image in a different folder.
+   * 
+   * If the function returns null or undefined, the normal Excalidraw operation will continue
+   * with the excalidraw generated name and default path.
+   * If a filepath is returned, that will be used. Include the full Vault filepath and filename
+   * with the file extension.
+   * The currentImageName is the name of the image generated by excalidraw or provided during paste.
+   * 
+   * @param data - An object containing the following properties:
+   *   @property {string} [currentImageName] - Default name for the image.
+   *   @property {string} drawingFilePath - The file path of the Excalidraw file where the image is being used.
+   * 
+   * @returns {string} - The new filepath for the image including full vault path and extension.
+   * 
+   * Example usage:
+   * ```
+   * onImageFilePathHook: (data) => {
+   *   const { currentImageName, drawingFilePath } = data;
+   *   // Generate a new filepath based on the drawing file name and other criteria
+   *   const ext = currentImageName.split('.').pop();
+   *   return `${drawingFileName} - ${currentImageName || 'image'}.${ext}`;
+   * }
+   * ```
+   */
+   onImageFilePathHook: (data: {
+    currentImageName: string; // Excalidraw generated name of the image, or the name received from the file system.
+    drawingFilePath: string; // The full filepath of the Excalidraw file where the image is being used.
+  }) => string = null;  
+
   /**
    * if set, this callback is triggered, when an Excalidraw file is opened
    * You can use this callback in case you want to do something additional when the file is opened.

src/shared/ExcalidrawData.ts

@@ -20,7 +20,7 @@ import {
   loadSceneFonts,
 } from "../constants/constants";
 import ExcalidrawPlugin from "../core/main";
-import { TextMode } from "../view/ExcalidrawView";
+import ExcalidrawView, { TextMode } from "../view/ExcalidrawView";
 import {
   addAppendUpdateCustomData,
   compress,
@@ -52,7 +52,7 @@ import { getMermaidImageElements, getMermaidText, shouldRenderMermaid } from "..
 import { DEBUGGING, debug } from "../utils/debugHelper";
 import { Mutable } from "@zsviczian/excalidraw/types/excalidraw/utility-types";
 import { updateElementIdsInScene } from "../utils/excalidrawSceneUtils";
-import { getNewUniqueFilepath } from "../utils/fileUtils";
+import { getNewUniqueFilepath, splitFolderAndFilename } from "../utils/fileUtils";
 import { t } from "../lang/helpers";
 import { displayFontMessage } from "../utils/excalidrawViewUtils";
 import { getPDFRect } from "../utils/PDFUtils";
@@ -480,7 +480,7 @@ export class ExcalidrawData {
   selectedElementIds: {[key:string]:boolean} = {}; //https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/609
 
   constructor(
-    private plugin: ExcalidrawPlugin,
+    private plugin: ExcalidrawPlugin, private view?: ExcalidrawView,
   ) {
     this.app = this.plugin.app;
     this.files = new Map<FileId, EmbeddedFile>();
@@ -1546,13 +1546,23 @@ export class ExcalidrawData {
       }
     }
 
-    const x = await getAttachmentsFolderAndFilePath(this.app, this.file.path, fname);
-    const filepath = getNewUniqueFilepath(this.app.vault,fname,x.folder);
+    let hookFilepath:string;
+    const ea = this.view?.getHookServer();
+    if(ea?.onImageFilePathHook) {
+      hookFilepath = ea.onImageFilePathHook({
+        currentImageName: fname,
+        drawingFilePath: this.view?.file?.path,
+      })
+    }
 
-    /*
-    const filepath = (
-      await getAttachmentsFolderAndFilePath(this.app, this.file.path, fname)
-    ).filepath;*/
+    let filepath:string;
+    if(hookFilepath) {
+      const {folderpath, filename} = splitFolderAndFilename(hookFilepath);
+      filepath = getNewUniqueFilepath(this.app.vault,filename,folderpath);
+    } else {
+      const x = await getAttachmentsFolderAndFilePath(this.app, this.file.path, fname);
+      filepath = getNewUniqueFilepath(this.app.vault,fname,x.folder);
+    }
 
     const arrayBuffer = await getBinaryFileFromDataURL(dataURL);
     if(!arrayBuffer) return null;

src/utils/PDFUtils.ts

@@ -15,17 +15,76 @@ export function getPDFCropRect (props: {
     return null;
   }
 
+  const rotate = props.pdfPageViewProps.rotate ?? 0;
   const { left, bottom } = props.pdfPageViewProps;
   const R0 = parseInt(rectVal[1]);
   const R1 = parseInt(rectVal[2]);
   const R2 = parseInt(rectVal[3]);
   const R3 = parseInt(rectVal[4]);
 
+  if(rotate === 90) {
+    const _top = R0;
+    const _left = R1;
+    const _bottom = R2;
+    const _right = R3;
+
+    const x = _left * props.scale;
+    const y = _top * props.scale;
+    return {
+      x,
+      y,
+      width: _right*props.scale - x,
+      height: _bottom*props.scale - y,
+      naturalWidth: props.naturalWidth,
+      naturalHeight: props.naturalHeight,
+    }
+  }
+  if(rotate === 180) {
+    const _right = R0;
+    const _top = R1;
+    const _left = R2;
+    const _bottom = R3;
+
+    const y = _top * props.scale;
+    const x = props.naturalWidth - _left * props.scale;
+
+    return {
+      x,
+      y,
+      width: props.naturalWidth - x - _right * props.scale,
+      height: _bottom * props.scale - y,
+      naturalWidth: props.naturalWidth,
+      naturalHeight: props.naturalHeight,
+    }
+  }
+  if(rotate === 270) {
+    const _bottom = R0;
+    const _right = R1;
+    const _top = R2;
+    const _left = R3;
+
+    const x = props.naturalWidth - _left * props.scale;
+    const y = props.naturalHeight - _top * props.scale;
+    return {
+      x,
+      y,
+      width: props.naturalWidth - x - _right * props.scale,
+      height: props.naturalHeight - y - _bottom * props.scale,
+      naturalWidth: props.naturalWidth,
+      naturalHeight: props.naturalHeight,
+    }
+  }
+  // default to 0° rotation
+  const _left = R0;
+  const _bottom = R1;
+  const _right = R2;
+  const _top = R3;
+
   return {
-    x: (R0 - left) * props.scale,
-    y: (bottom + props.naturalHeight/props.scale - R3) * props.scale,
-    width: (R2 - R0) * props.scale,
-    height: (R3 - R1) * props.scale,
+    x: (_left - left) * props.scale,
+    y: props.naturalHeight - (_top - bottom) * props.scale,
+    width: (_right - _left) * props.scale,
+    height: (_top - _bottom) * props.scale,
     naturalWidth: props.naturalWidth,
     naturalHeight: props.naturalHeight,
   }
@@ -34,13 +93,36 @@ export function getPDFCropRect (props: {
 export function getPDFRect({elCrop, scale, customData}:{
   elCrop: ImageCrop, scale: number, customData: Record<string, unknown>
 }): string {
+  const rotate = (customData.pdfPageViewProps as PDFPageViewProps)?.rotate ?? 0;
   const { left, bottom } = (customData && customData.pdfPageViewProps)
     ? customData.pdfPageViewProps as PDFPageViewProps
     : { left: 0, bottom: 0 };
 
-  const R0 = elCrop.x / scale + left;
-  const R2 = elCrop.width / scale + R0;
-  const R3 = bottom + (elCrop.naturalHeight - elCrop.y) / scale;
-  const R1 = R3 - elCrop.height / scale;
-  return `&rect=${Math.round(R0)},${Math.round(R1)},${Math.round(R2)},${Math.round(R3)}`;
-}
+  if(rotate === 90) {
+    const _top = (elCrop.y) / scale;
+    const _left = (elCrop.x) / scale;
+    const _bottom = (elCrop.height + elCrop.y) / scale;
+    const _right = (elCrop.width + elCrop.x) / scale;
+    return `&rect=${Math.round(_top)},${Math.round(_left)},${Math.round(_bottom)},${Math.round(_right)}`;
+  }
+  if(rotate === 180) {
+    const _right = (elCrop.naturalWidth-elCrop.x-elCrop.width) / scale;
+    const _top = (elCrop.y) / scale;
+    const _left = (elCrop.naturalWidth - elCrop.x) / scale;
+    const _bottom = (elCrop.height + elCrop.y) / scale;
+    return `&rect=${Math.round(_right)},${Math.round(_top)},${Math.round(_left)},${Math.round(_bottom)}`;
+    
+  }
+  if(rotate === 270) {
+    const _bottom = (elCrop.naturalHeight - elCrop.height-elCrop.y) / scale;
+    const _right = (elCrop.naturalWidth - elCrop.width - elCrop.x) / scale;
+    const _top = (elCrop.naturalHeight - elCrop.y) / scale;
+    const _left = (elCrop.naturalWidth - elCrop.x) / scale;
+    return `&rect=${Math.round(_bottom)},${Math.round(_right)},${Math.round(_top)},${Math.round(_left)}`;
+  }
+  const _left = elCrop.x / scale + left;
+  const _right = elCrop.width / scale + _left;
+  const _top = bottom + (elCrop.naturalHeight - elCrop.y) / scale;
+  const _bottom = _top - elCrop.height / scale;
+  return `&rect=${Math.round(_left)},${Math.round(_bottom)},${Math.round(_right)},${Math.round(_top)}`;
+}

src/utils/customEmbeddableUtils.ts

@@ -1,7 +1,7 @@
 import { NonDeletedExcalidrawElement } from "@zsviczian/excalidraw/types/excalidraw/element/types";
 import { DEVICE, REG_LINKINDEX_INVALIDCHARS } from "src/constants/constants";
 import { getParentOfClass } from "./obsidianUtils";
-import { TFile, WorkspaceLeaf } from "obsidian";
+import { App, TFile, WorkspaceLeaf } from "obsidian";
 import { getLinkParts } from "./utils";
 import ExcalidrawView from "src/view/ExcalidrawView";
 
@@ -55,4 +55,15 @@ export const generateEmbeddableLink = (src: string, theme: "light" | "dark"):str
     }
   }*/
   return src;
+}
+
+export function setFileToLocalGraph(app: App, file: TFile) {
+  let lgv;
+  app.workspace.iterateAllLeaves((l) => {
+    if (l.view?.getViewType() === "localgraph") lgv = l.view;
+  });
+  if (lgv) {
+    //@ts-ignore
+    lgv.loadFile(file);
+  }
 }

src/view/ExcalidrawView.ts

@@ -368,7 +368,7 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
   constructor(leaf: WorkspaceLeaf, plugin: ExcalidrawPlugin) {
     super(leaf);
     this._plugin = plugin;
-    this.excalidrawData = new ExcalidrawData(plugin);
+    this.excalidrawData = new ExcalidrawData(plugin, this);
     this.canvasNodeFactory = new CanvasNodeFactory(this);
     this.setHookServer();
     this.dropManager = new DropManager(this);

src/view/components/CustomEmbeddable.tsx

@@ -6,7 +6,7 @@ import { ConstructableWorkspaceSplit, getContainerForDocument, isObsidianThemeDa
 import { DEVICE, EXTENDED_EVENT_TYPES, KEYBOARD_EVENT_TYPES } from "src/constants/constants";
 import { ExcalidrawImperativeAPI, UIAppState } from "@zsviczian/excalidraw/types/excalidraw/types";
 import { ObsidianCanvasNode } from "src/view/managers/CanvasNodeFactory";
-import { processLinkText, patchMobileView } from "src/utils/customEmbeddableUtils";
+import { processLinkText, patchMobileView, setFileToLocalGraph } from "src/utils/customEmbeddableUtils";
 import { EmbeddableMDCustomProps } from "src/shared/Dialogs/EmbeddableSettings";
 
 declare module "obsidian" {
@@ -154,6 +154,15 @@ function RenderObsidianView(
     }; //cleanup on unmount
   }, [isActiveRef.current, containerRef.current]);
 
+  //set local graph to view when deactivating embeddables
+  React.useEffect(() => {
+    if(file === view.file) {
+      return;
+    }
+    if(!isActiveRef.current) {
+      setFileToLocalGraph(view.app, view.file);
+    }
+  }, [isActiveRef.current]);
 
   //--------------------------------------------------------------------------------
   //Mount the workspace leaf or the canvas node depending on subpath
@@ -408,6 +417,10 @@ function RenderObsidianView(
       return;
     }
 
+    if(file !== view.file) {
+      setFileToLocalGraph(view.app, file);
+    }
+
     if(leafRef.current.leaf?.view?.getViewType() === "markdown") {
       //Handle markdown leaf
       //@ts-ignore