rebuilt export PDF using Electron PDF export

imagepath hook

.github/ISSUE_TEMPLATE/How-to.yml

@@ -12,6 +12,8 @@ body:
         Before submitting a support request, please:
         1. **Review the [documentation](https://github.com/zsviczian/obsidian-excalidraw-plugin/wiki)** – your question may already be answered.
         2. **[Search issues](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues) (including closed ones)** to see if your question has already been addressed.
+        3. **[Watch the Feature Walkthrough Video](https://youtu.be/P_Q6avJGoWI)**: As it infact answers 90% of the typical questions I receive
+        4. **[Consult NotebookLM with your question](https://excalidraw-obsidian.online/WIKI/09+Video+Transcripts/Videos/Turn+any+YouTube+Channel+into+your+AI+Mentor+-+Obsidian+is+the+ultimate+automation+workbench+for+PKM)**
 
   - type: markdown
     attributes:
@@ -31,6 +33,13 @@ body:
       options:
         - label: Yes, I have reviewed the documentation and searched for related issues.
 
+  - type: textarea
+    id: notebook_lm
+    attributes:
+      label: "Your NotebookLM query"
+      description: "See point 4) above. Paste the question and answer you received from NotebookLM. This serves partly as proof, partly to help me see where the model is incorrect"
+      placeholder: "Copy/Paste your question and the resulting answer you got from NotebookLM"
+
   - type: textarea
     id: support_question
     attributes:

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,5 +1,5 @@
 name: Bug report
-description: If something is clearly broken, it’s a bug. Everything else is a feature or support request. Most reported “bugs” are actually how-to questions or feature requests.
+description: If something is clearly broken, it’s a bug. **Everything else** is a feature or support request. Most reported “bugs” are actually how-to questions or feature requests.
 title: "BUG: "
 body:
   - type: markdown
@@ -12,6 +12,8 @@ body:
         Before creating a bug report, please:
         1. **Review recent [release notes](https://github.com/zsviczian/obsidian-excalidraw-plugin/releases)** – maybe there is already an answer.
         2. **[Search issues](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues) (including closed ones)** to see if there is anything similar.
+        3. **[Watch the Feature Walkthrough Video](https://youtu.be/P_Q6avJGoWI)**: As it infact answers 90% of the typical questions I receive
+        4. **[Consult NotebookLM with your question](https://excalidraw-obsidian.online/WIKI/09+Video+Transcripts/Videos/Turn+any+YouTube+Channel+into+your+AI+Mentor+-+Obsidian+is+the+ultimate+automation+workbench+for+PKM)**
 
   - type: markdown
     attributes:
@@ -46,6 +48,13 @@ body:
       description: "Run `Command Palette/Show Debug info` in Obsidian and paste the result here."
       placeholder: "Paste your Obsidian debug info here..."
 
+  - type: textarea
+    id: notebook_lm
+    attributes:
+      label: "Your NotebookLM query"
+      description: "See point 4) above. Paste the question and answer you received from NotebookLM. This serves partly as proof, partly to help me see where the model is incorrect"
+      placeholder: "Copy/Paste your question and the resulting answer you got from NotebookLM"
+
   - type: textarea
     id: bug_description
     attributes:

.gitignore

@@ -4,7 +4,6 @@
 
 # npm
 node_modules
-package-lock.json
 
 # build
 main.js
@@ -14,6 +13,7 @@ hot-reload.bat
 data.json
 lib
 dist
+tmp
 
 #VSCode
 .vscode

.nvmrc

@@ -1 +1 @@
-18
+18

MathjaxToSVG/package.json

@@ -13,11 +13,12 @@
   "devDependencies": {
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^11.1.6",
+    "@rollup/plugin-typescript": "^12.1.2",
     "cross-env": "^7.0.3",
     "obsidian": "1.5.7-1",
     "rollup": "^2.70.1",
-    "typescript": "^5.2.2",
-    "rollup-plugin-terser": "^7.0.2"
+    "rollup-plugin-terser": "^7.0.2",
+    "tslib": "^2.8.1",
+    "typescript": "^5.7.3"
   }
-}
+}

MathjaxToSVG/rollup.config.js

@@ -16,10 +16,10 @@ export default {
   },
   plugins: [
     typescript({
-      tsconfig: '../tsconfig.json',
+      tsconfig: 'tsconfig.json',
     }),
     commonjs(),
-    nodeResolve({ 
+    nodeResolve({
       browser: true,
       preferBuiltins: false
     }),
@@ -32,4 +32,4 @@ export default {
       }
     })
   ].filter(Boolean)
-};
+};

MathjaxToSVG/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "sourceMap": false,
+    "module": "es2020",
+    "target": "es2022", //min es2017 because script engine requires for async execution and min es2018 for named capture groups
+    "allowJs": false,
+    "noImplicitAny": true,
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "importHelpers": true,
+    "resolveJsonModule": true,
+    "lib": [
+      "dom",
+      "scripthost",
+      "es2022",
+      "DOM.Iterable"
+    ],
+    "jsx": "react",
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx", "src/shared/Dialogs/OpenDrawing.ts",
+    "src/types/types.d.ts",
+  ]
+}

README-BUILD.md

@@ -1,4 +0,0 @@
-The project runs with `node 18`. 
-
-After running `npm -i` you'll need to make two manual changes:
-

ea-scripts/Add Connector Point.md

@@ -22,4 +22,4 @@ elements.forEach((el)=>{
   );
   ea.addToGroup([el.id,ellipseId]);
 });
-ea.addElementsToView(false,false);
+await ea.addElementsToView(false,false,true);

ea-scripts/Concatenate lines.md

@@ -8,20 +8,76 @@ if(lines.length !== 2) {
   return;
 }
 
-// https://math.stackexchange.com/questions/2204520/how-do-i-rotate-a-line-segment-in-a-specific-point-on-the-line
-const rotate = (point, element) => {
-  const [x1, y1] = point;
-  const x2 = element.x + element.width/2;
-  const y2 = element.y - element.height/2;
-  const angle = element.angle;
-  return [
-    (x1 - x2) * Math.cos(angle) - (y1 - y2) * Math.sin(angle) + x2,
-    (x1 - x2) * Math.sin(angle) + (y1 - y2) * Math.cos(angle) + y2,
-  ];
+//Same line but with angle=0
+function getNormalizedLine(originalElement) {
+  if(originalElement.angle === 0) return originalElement;
+
+  // Get absolute coordinates for all points first
+  const pointRotateRads = (point, center, angle) => {
+    const [x, y] = point;
+    const [cx, cy] = center;
+    return [
+      (x - cx) * Math.cos(angle) - (y - cy) * Math.sin(angle) + cx,
+      (x - cx) * Math.sin(angle) + (y - cy) * Math.cos(angle) + cy
+    ];
+  };
+  
+  // Get element absolute coordinates (matching Excalidraw's approach)
+  const getElementAbsoluteCoords = (element) => {
+    const points = element.points;
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+  
+    for (const [x, y] of points) {
+      const absX = x + element.x;
+      const absY = y + element.y;
+      minX = Math.min(minX, absX);
+      minY = Math.min(minY, absY);
+      maxX = Math.max(maxX, absX);
+      maxY = Math.max(maxY, absY);
+    }
+  
+    return [minX, minY, maxX, maxY];
+  };
+  
+  // Calculate center point based on absolute coordinates
+  const [x1, y1, x2, y2] = getElementAbsoluteCoords(originalElement);
+  const centerX = (x1 + x2) / 2;
+  const centerY = (y1 + y2) / 2;
+  
+  // Calculate absolute coordinates of all points
+  const absolutePoints = originalElement.points.map(([x, y]) => [
+    x + originalElement.x,
+    y + originalElement.y
+  ]);
+  
+  // Rotate all points around the center
+  const rotatedPoints = absolutePoints.map(point => 
+    pointRotateRads(point, [centerX, centerY], originalElement.angle)
+  );
+  
+  // Convert back to relative coordinates
+  const newPoints = rotatedPoints.map(([x, y]) => [
+    x - rotatedPoints[0][0],
+    y - rotatedPoints[0][1]
+  ]);
+  
+  const newLineId = ea.addLine(newPoints);
+  
+  // Set the position of the new line to the first rotated point
+  const newLine = ea.getElement(newLineId);
+  newLine.x = rotatedPoints[0][0];
+  newLine.y = rotatedPoints[0][1];
+  newLine.angle = 0;
+  delete ea.elementsDict[newLine.id];
+  return newLine;
 }
 
-const points = lines.map(
-  el=>el.points.map(p=>rotate([p[0]+el.x, p[1]+el.y],el))
+
+const points = lines.map(getNormalizedLine).map(
+  el=>el.points.map(p=>[p[0]+el.x, p[1]+el.y])
 );
 
 const last = (p) => p[p.length-1];
@@ -99,4 +155,4 @@ switch (lineTypes) {
 }
 
 
-ea.addElementsToView();
+await ea.addElementsToView();

ea-scripts/Deconstruct selected elements into new drawing.md

@@ -9,7 +9,7 @@ Select some elements in the scene. The script will take these elements and move
 
 ```javascript
 */
-if(!ea.verifyMinimumPluginVersion || !ea.verifyMinimumPluginVersion("2.0.25")) {
+if(!ea.verifyMinimumPluginVersion || !ea.verifyMinimumPluginVersion("2.7.3")) {
   new Notice("This script requires a newer version of Excalidraw. Please install the latest version.");
   return;
 }
@@ -79,15 +79,19 @@ ea.copyViewElementsToEAforEditing(els);
 ea.getElements().filter(el=>el.type==="image").forEach(el=>{
   const img = ea.targetView.excalidrawData.getFile(el.fileId);
   const path = (img?.linkParts?.original)??(img?.file?.path);
-  if(img && path) {
+  const hyperlink = img?.hyperlink;
+  if(img && (path || hyperlink)) {
+	const colorMap = ea.getColorMapForImageElement(el);
     ea.imagesDict[el.fileId] = {
       mimeType: img.mimeType,
       id: el.fileId,
       dataURL: img.img,
       created: img.mtime,
       file: path,
+      hyperlink,
       hasSVGwithBitmap: img.isSVGwithBitmap,
       latex: null,
+      colorMap,
     };
     return;
   }

ea-scripts/Full-Year Calendar Generator.md

@@ -0,0 +1,157 @@
+/*
+
+This script generates a complete calendar for a specified year, visually distinguishing weekends from weekdays through color coding.
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-full-year-calendar-exemple.excalidraw.png)
+
+## Customizable Colors
+
+You can personalize the calendar’s appearance by defining your own colors:
+
+1. Create two rectangles in your design.
+2. Select both rectangles before running the script:
+	• The **fill and stroke colors of the first rectangle** will be applied to weekdays.
+	• The **fill and stroke colors of the second rectangle** will be used for weekends.
+
+If no rectangle are selected, the default color schema will be used (white and purple).
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-full-year-calendar-customize.excalidraw.png)
+
+```javascript
+*/
+
+ea.reset();
+
+// -------------------------------------
+// Constants initiation
+// -------------------------------------
+
+const RECT_WIDTH = 300; // day width
+const RECT_HEIGHT = 45; // day height
+const START_X = 0; // X start position
+const START_Y = 0; // PY start position
+const MONTH_SPACING = 30; // space between months
+const DAY_SPACING = 0; // space between days
+const DAY_NAME_SPACING = 45; // space between day number and day letters
+const DAY_NAME_AND_NUMBER_X_MARGIN = 5;
+const MONTH_NAME_SPACING = -40;
+const YEAR_X = (RECT_WIDTH + MONTH_SPACING) * 6 - 150;
+const YEAR_Y = -200;
+
+let COLOR_WEEKEND = "#c3abf3";
+let COLOR_WEEKDAY = "#ffffff";
+const COLOR_DAY_STROKE = "none";
+let STROKE_DAY = 4;
+let FILLSTYLE_DAY = "solid";
+
+const FONT_SIZE_MONTH = 60;
+const FONT_SIZE_DAY = 30;
+const FONT_SIZE_YEAR = 100;
+
+const LINE_STROKE_SIZE = 4;
+let LINE_STROKE_COLOR_WEEKDAY = "black";
+let LINE_STROKE_COLOR_WEEKEND = "black";
+
+const SATURDAY = 6;
+const SUNDAY = 0;
+const JANUARY = 0;
+const FIRST_DAY_OF_THE_MONTH = 1;
+
+const DAY_NAME_AND_NUMBER_Y_MARGIN = (RECT_HEIGHT - FONT_SIZE_DAY) / 2; 
+
+// -------------------------------------
+
+// ask for requested Year
+// Default value is the current year
+let requestedYear = parseFloat(new Date().getFullYear());
+requestedYear = parseFloat(await utils.inputPrompt("Year ?", requestedYear, requestedYear));
+if(isNaN(requestedYear)) {
+  new Notice("Invalid number");
+  return;
+}
+
+// -------------------------------------
+// Use selected element for the calendar style
+// -------------------------------------
+
+let elements = ea.getViewSelectedElements();
+if (elements.length>=1){
+	COLOR_WEEKDAY = elements[0].backgroundColor;
+	FILLSTYLE_DAY = elements[0].fillStyle;
+	STROKE_DAY = elements[0].strokeWidth;
+	LINE_STROKE_COLOR_WEEKDAY = elements[0].strokeColor;
+
+}
+if (elements.length>=2){
+	COLOR_WEEKEND = elements[1].backgroundColor;
+	LINE_STROKE_COLOR_WEEKEND = elements[1].strokeColor;
+}
+
+
+
+
+
+
+// get the first day of the current year (01/01)
+var firstDayOfYear = new Date(requestedYear, JANUARY, FIRST_DAY_OF_THE_MONTH);
+
+var currentDay = firstDayOfYear
+
+// write year number
+let calendarYear = firstDayOfYear.getFullYear();
+ea.style.fontSize = FONT_SIZE_YEAR;
+ea.addText(START_X + YEAR_X, START_Y + YEAR_Y, String(calendarYear));
+
+
+// while we do not reach the end of the year iterate on all the day of the current year
+do {
+
+	var curentDayOfTheMonth = currentDay.getDate();
+	var currentMonth = currentDay.getMonth();
+	var isWeekend = currentDay.getDay() == SATURDAY || currentDay.getDay() == SUNDAY;
+
+	// set background color if it's a weekend or weekday
+	ea.style.backgroundColor = isWeekend ? COLOR_WEEKEND : COLOR_WEEKDAY ;
+
+
+	ea.style.strokeColor = COLOR_DAY_STROKE;
+	ea.style.fillStyle = FILLSTYLE_DAY;
+	ea.style.strokeWidth = STROKE_DAY;
+
+
+	let x = START_X + currentMonth * (RECT_WIDTH + MONTH_SPACING);
+	let y = START_Y + curentDayOfTheMonth * (RECT_HEIGHT + DAY_SPACING); 
+
+	// only one time per month
+	if(curentDayOfTheMonth == FIRST_DAY_OF_THE_MONTH) {
+
+		// add month name 
+		ea.style.fontSize = FONT_SIZE_MONTH;
+		ea.addText(x + DAY_NAME_AND_NUMBER_X_MARGIN, START_Y+MONTH_NAME_SPACING, currentDay.toLocaleString('default', { month: 'long' }));
+	}
+
+	// Add day rectangle
+	ea.style.fontSize = FONT_SIZE_DAY;
+	ea.addRect(x, y, RECT_WIDTH, RECT_HEIGHT); 
+
+	// set stroke color based on weekday 
+	ea.style.strokeColor = isWeekend ? LINE_STROKE_COLOR_WEEKEND : LINE_STROKE_COLOR_WEEKDAY;
+
+	// add line between days
+	//ea.style.strokeColor = LINE_STROKE_COLOR_WEEKDAY;
+	ea.style.strokeWidth = LINE_STROKE_SIZE;
+	ea.addLine([[x,y],[x+RECT_WIDTH, y]]); 
+
+	
+	// add day number
+	ea.addText(x + DAY_NAME_AND_NUMBER_X_MARGIN, y + DAY_NAME_AND_NUMBER_Y_MARGIN, String(curentDayOfTheMonth));
+	// add day name
+	ea.addText(x + DAY_NAME_AND_NUMBER_X_MARGIN + DAY_NAME_SPACING, y + DAY_NAME_AND_NUMBER_Y_MARGIN, String(currentDay.toLocaleString('default', { weekday: 'narrow' })));
+
+	// go to the next day
+	currentDay.setDate(currentDay.getDate() + 1);
+
+} while (!(currentDay.getMonth() == JANUARY && currentDay.getDate() == FIRST_DAY_OF_THE_MONTH)) // stop if we reach the 01/01 of the next year
+
+
+await ea.addElementsToView(false, false, true);

ea-scripts/Full-Year Calendar Generator.svg

@@ -0,0 +1,10 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50.097575068473816 56.100231877975375" width="50.097575068473816" height="56.100231877975375" class="excalidraw-svg">
+  <!-- svg-source:excalidraw -->
+  
+  <defs>
+    <style class="style-fonts">
+      @font-face { font-family: Nunito; src: url(data:font/woff2;base64,d09GMgABAAAAAAN4AA8AAAAABswAAAMeAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbgQwcLgZgP1NUQVREAEQRCAqCMIIHCwoAATYCJAMQBCAFhCQHIBuUBcguChxjano4VFxM2vQ1QySkcTXuPsXzT/vRzn0z64qIV7yJJ/EmGSp5Q0EalEiqlgiVyv/L7uv1Qpy/pAfsqfk9Cx44ly4UHRVC2VW+YH51qZj/wAD1eZu/7e/zfzNtkm0LNEs8kV4W4FwgUb7BEox+1s0hcpt7B9o7UD9zWyypoLCgyLAoF3TIGFjCt/9zgmlAiWgimHRUDsvrVQ0d4PV6RpPA690oUcCLFQz/C/KW1hSwQxBdGRfjymFWuCiNpQ7DZwDDscLwyUUTpYlomhJRStJMOi7BBt/PBqzAjvfKyhfW1JZFD4AbvUueQVDCsDDk3yTfBN7BFQ3t838A/UISdgP6BED+1nvsZim+dJYbtD/zgeUIAj7ZZBGCWGbFzydiAggCGUFfAAoNyywFy6ycBsbpAlxRrmEgQGPIthJUmvOuGydAT4H3YPkMSmTbaOxSp3F7M1DceuB47Z4/v7F+08G4H9CV65T/cP2u2BPnHPNo1Njby9l9lqCzm7uyMRu86fNiz8HY2fFxdzcm+/lrt24Fx+vVjuOWhqzPHlHBaqZuP3PXoc7G406+6sZfeO7ufn05DaoJRR5e5HzVrTsP79AzLra5Dm2pRJjYVsGw41e6W67j9sQLnUPzqc0Fimnx1xZHPf0V1+aX3CiUZM329mTN07WNyR3+eb++hXAzh+fUMLjgc9WH8Z3yyaPxrSryLvf0qvAGgKB9DTasXLeHXQv+jTfLj/DT99Yu4E/arcz/tgqsErobMKpAeLRyF0C2LRAeQ88XaXVqd92A/IrQCaF7wtobVgIAumDKFlhKtwe+w49BxmkfyDLrB9lcN1numByxaYAYdVJSCoFpewlG+CpsjU9+k4kD7sNkoxSNaBN4OlktYpSEN64bjcfiEE10Ch6BVZpGaEY1oGqiArsLTWOeiiko6ZJkSZEm3HxNmjWpzFMZbutn6SSjtL1mKvApcDlMNUNDv0uTIlUGSgcOjVL8TAsNJqCNIyildAQH05hRYnAIQmWWJ1kyFl8W6cYkGYfJCxXDbbqExsAUhFky5ZIfyxKLDU8LAgAA); }
+    </style>
+    
+  </defs>
+  <g stroke-linecap="round"><g transform="translate(17.077535418245503 32.086027259866626) rotate(0 -6.0775204356467825 0)"><path d="M0 0 C-2.03 0, -10.13 0, -12.16 0 M0 0 C-2.03 0, -10.13 0, -12.16 0" stroke="#1e1e1e" stroke-width="4" fill="none"></path></g></g><mask></mask><g stroke-linecap="round"><g transform="translate(16.865850031647774 39.07185193521212) rotate(0 -6.077520435646779 0)"><path d="M0 0 C-2.03 0, -10.13 0, -12.16 0 M0 0 C-2.03 0, -10.13 0, -12.16 0" stroke="#1e1e1e" stroke-width="4" fill="none"></path></g></g><mask></mask><g stroke-linecap="round"><g transform="translate(16.946763254178506 46.743160072731996) rotate(0 -6.0775204356467825 0)"><path d="M0 0 C-2.03 0, -10.13 0, -12.16 0 M0 0 C-2.03 0, -10.13 0, -12.16 0" stroke="#1e1e1e" stroke-width="4" fill="none"></path></g></g><mask></mask><g stroke-linecap="round"><g transform="translate(16.680839244467208 53.831041680294504) rotate(0 -6.0775204356467825 0)"><path d="M0 0 C-2.03 0, -10.13 0, -12.16 0 M0 0 C-2.03 0, -10.13 0, -12.16 0" stroke="#1e1e1e" stroke-width="4" fill="none"></path></g></g><mask></mask><g stroke-linecap="round"><g transform="translate(47.41441860670051 32.80666516147113) rotate(0 -6.077520435646779 0)"><path d="M0 0 C-2.03 0, -10.13 0, -12.16 0 M0 0 C-2.03 0, -10.13 0, -12.16 0" stroke="#1e1e1e" stroke-width="4" fill="none"></path></g></g><mask></mask><g stroke-linecap="round"><g transform="translate(47.20273322010279 39.79248983681666) rotate(0 -6.077520435646779 0)"><path d="M0 0 C-2.03 0, -10.13 0, -12.16 0 M0 0 C-2.03 0, -10.13 0, -12.16 0" stroke="#1e1e1e" stroke-width="4" fill="none"></path></g></g><mask></mask><g transform="translate(0 0) rotate(0 25.048787534236908 17.010119812063635)"><text x="0" y="25.30097820935094" font-family="Nunito, Segoe UI Emoji" font-size="25.200177499353526px" fill="#1e1e1e" text-anchor="start" style="white-space: pre;" direction="ltr" dominant-baseline="alphabetic">CAL</text></g><g stroke-linecap="round"><g transform="translate(26.079917947816256 27.03803518092093) rotate(0 0 14.531098348527223)"><path d="M0 0 C0 4.84, 0 24.22, 0 29.06 M0 0 C0 4.84, 0 24.22, 0 29.06" stroke="#1e1e1e" stroke-width="4" fill="none"></path></g></g><mask></mask><g stroke-linecap="round"><g transform="translate(47.199941306131535 47.15190785557627) rotate(0 -6.077520435646779 0)"><path d="M0 0 C-2.03 0, -10.13 0, -12.16 0 M0 0 C-2.03 0, -10.13 0, -12.16 0" stroke="#1e1e1e" stroke-width="4" fill="none"></path></g></g><mask></mask></svg>

ea-scripts/Select Similar Elements.md

@@ -7,29 +7,58 @@ This script enables the selection of elements based on matching properties. Sele
 ```js */
 
 let config = window.ExcalidrawSelectConfig;
-config = Boolean(config) && (Date.now() - config.timestamp < 60000) ? config : null;
+const isValidConfig = config && (Date.now() - config.timestamp < 60000);
+config = isValidConfig ? config : null;
 
 let elements = ea.getViewSelectedElements();
-if(!config && (elements.length !==1)) {
-  new Notice("Select a single element");
-  return;
-} else {
-  if(elements.length === 0) {
-    elements = ea.getViewElements();
+if(!config) {
+
+  async function shouldAbort() {
+    if(elements.length === 1) return false;
+    if(elements.length !== 2) return true;
+
+    //maybe container?
+    const textEl = elements.find(el=>el.type==="text");
+    if(!textEl || !textEl.containerId) return true;
+    
+    const containerEl = elements.find(el=>el.id === textEl.containerId);
+    if(!containerEl) return true;
+    
+    const id = await utils.suggester(
+      elements.map(el=>el.type),
+      elements.map(el=>el.id),
+      "Select container component"
+    );
+    if(!id) return true;
+    elements = elements.filter(el=>el.id === id);
+    return false;
   }
+
+  if(await shouldAbort()) {  
+    new Notice("Select a single element");
+    return;
+  }
+}
+
+if(Boolean(config) && elements.length === 0) {
+  elements = ea.getViewElements();
 }
 
 const {angle, backgroundColor, fillStyle, fontFamily, fontSize, height, width, opacity, roughness, roundness, strokeColor, strokeStyle, strokeWidth, type, startArrowhead, endArrowhead, fileId} = ea.getViewSelectedElement();
 
 const fragWithHTML = (html) => createFragment((frag) => (frag.createDiv().innerHTML = html));
   
+function lc(x) {
+  return x?.toLocaleLowerCase();
+}
+
 //--------------------------
 // RUN
 //--------------------------
 const run = () => {
   selectedElements = elements.filter(el=>
     ((typeof config.angle === "undefined") || (el.angle === config.angle)) &&
-    ((typeof config.backgroundColor === "undefined") || (el.backgroundColor === config.backgroundColor)) &&
+    ((typeof config.backgroundColor === "undefined") || (lc(el.backgroundColor) === lc(config.backgroundColor))) &&
     ((typeof config.fillStyle === "undefined") || (el.fillStyle === config.fillStyle)) &&
     ((typeof config.fontFamily === "undefined") || (el.fontFamily === config.fontFamily)) &&
     ((typeof config.fontSize === "undefined") || (el.fontSize === config.fontSize)) &&
@@ -38,7 +67,7 @@ const run = () => {
     ((typeof config.opacity === "undefined") || (el.opacity === config.opacity)) &&
     ((typeof config.roughness === "undefined") || (el.roughness === config.roughness)) &&
     ((typeof config.roundness === "undefined") || (el.roundness === config.roundness)) &&
-    ((typeof config.strokeColor === "undefined") || (el.strokeColor === config.strokeColor)) &&
+    ((typeof config.strokeColor === "undefined") || (lc(el.strokeColor) === lc(config.strokeColor))) &&
     ((typeof config.strokeStyle === "undefined") || (el.strokeStyle === config.strokeStyle)) &&
     ((typeof config.strokeWidth === "undefined") || (el.strokeWidth === config.strokeWidth)) &&
     ((typeof config.type === "undefined") || (el.type === config.type)) &&

ea-scripts/Set Stroke Width of Selected Elements.md

@@ -17,4 +17,5 @@ if(isNaN(width)) {
 const elements=ea.getViewSelectedElements();
 ea.copyViewElementsToEAforEditing(elements);
 ea.getElements().forEach((el)=>el.strokeWidth=width);
-ea.addElementsToView(false,false);
+await ea.addElementsToView(false,false);
+ea.viewUpdateScene({appState: {currentItemStrokeWidth: width}});

ea-scripts/Shade Master.md

@@ -0,0 +1,729 @@
+/*
+This is an experimental script. If you find bugs, please consider debugging yourself then submitting a PR on github with the fix, instead of raising an issue. Thank you!
+
+This script modifies the color lightness/hue/saturation/transparency of selected Excalidraw elements and  SVG and nested Excalidraw drawings. Select eligible elements in the scene, then run the script.
+
+- The color of Excalidraw elements (lines, ellipses, rectangles, etc.) will be changed by the script.
+- The color of SVG elements and nested Excalidraw drawings will only be mapped. When mapping colors, the original image remains unchanged, only a mapping table is created and the image is recolored during rendering of your Excalidraw screen. In case you want to make manual changes you can also edit the mapping in Markdown View Mode under `## Embedded Files`
+
+If you select only a single SVG or nested Excalidraw element, then the script offers an additional feature. You can map colors one by one in the image. 
+```js*/
+
+const HELP_TEXT = `
+<ul>
+<li dir="auto">Select SVG images, nested Excalidraw drawings and/or regular Excalidraw elements</li>
+<li dir="auto">For a single selected image, you can map colors individually in the color mapping section</li>
+<li dir="auto">For Excalidraw elements: stroke and background colors are modified permanently</li>
+<li dir="auto">For SVG/nested drawings: original files stay unchanged, color mapping is stored under <code>## Embedded Files</code></li>
+<li dir="auto">Using color maps helps maintain links between drawings while allowing different color themes</li>
+<li dir="auto">Sliders work on relative scale - the amount of change is applied to current values</li>
+<li dir="auto">Unlike Excalidraw's opacity setting which affects the whole element:
+<ul>
+<li dir="auto">Shade Master can set different opacity for stroke vs background</li>
+<li dir="auto">Note: SVG/nested drawing colors are mapped at color name level, thus "black" is different from "#000000"</li>
+<li dir="auto">Additionally if the same color is used as fill and stroke the color can only be mapped once</li>
+</ul>
+</li>
+<li dir="auto">This is an experimental script - contributions welcome on GitHub via PRs</li>
+</ul>
+<div class="excalidraw-videoWrapper"><div>
+<iframe src="https://www.youtube.com/embed/ISuORbVKyhQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div></div>
+`;
+
+if(!ea.verifyMinimumPluginVersion || !ea.verifyMinimumPluginVersion("2.7.2")) {
+  new Notice("This script requires a newer version of Excalidraw. Please install the latest version.");
+  return;
+}
+
+/*
+SVGColorInfo is returned by ea.getSVGColorInfoForImgElement. Color info will all the color strings in the SVG file plus "fill" which represents the default fill color for SVG icons set at the SVG root element level. Fill if not set defaults to black:
+
+type SVGColorInfo = Map<string, {
+  mappedTo: string;
+  fill: boolean;
+  stroke: boolean;
+}>;
+
+In the Excalidraw file under `## Embedded Files` the color map is included after the file. That color map implements ColorMap. ea.updateViewSVGImageColorMap takes a ColorMap as input.
+interface ColorMap {
+  [color: string]: string;
+};
+*/
+
+// Main script execution
+const allElements = ea.getViewSelectedElements();
+const svgImageElements = allElements.filter(el => {
+  if(el.type !== "image") return false;
+  const file = ea.getViewFileForImageElement(el);
+  if(!file) return false;
+  return el.type === "image" && (
+    file.extension === "svg" ||
+    ea.isExcalidrawFile(file)
+  );
+});
+
+if(allElements.length === 0) {
+  new Notice("Select at least one rectangle, ellipse, diamond, line, arrow, freedraw, text or SVG image elment");
+  return;
+}
+
+const originalColors = new Map();
+const currentColors = new Map();
+const colorInputs = new Map();
+const sliderResetters = [];
+let terminate = false;
+const FORMAT = "Color Format";
+const STROKE = "Modify Stroke Color";
+const BACKGROUND = "Modify Background Color"
+const ACTIONS = ["Hue", "Lightness", "Saturation", "Transparency"];
+const precision = [1,2,2,3];
+const minLigtness = 1/Math.pow(10,precision[2]);
+const maxLightness = 100 - minLigtness;
+const minSaturation = 1/Math.pow(10,precision[2]);
+
+let settings = ea.getScriptSettings();
+//set default values on first run
+if(!settings[STROKE]) {
+  settings = {};
+  settings[FORMAT] = {
+    value: "HEX",
+    valueset: ["HSL", "RGB", "HEX"],
+    description: "Output color format."
+  };
+  settings[STROKE] = { value: true }
+  settings[BACKGROUND] = {value: true }
+  ea.setScriptSettings(settings);
+}
+
+function getRegularElements() {
+  ea.clear();
+  //loading view elements again as element objects change when colors are updated
+  const allElements = ea.getViewSelectedElements();
+  return allElements.filter(el => 
+    ["rectangle", "ellipse", "diamond", "line", "arrow", "freedraw", "text"].includes(el.type)
+  );
+}
+
+const updatedImageElementColorMaps = new Map();
+let isWaitingForSVGUpdate = false;
+function updateViewImageColors() {
+  if(terminate || isWaitingForSVGUpdate || updatedImageElementColorMaps.size === 0) {
+    return;
+  }
+  isWaitingForSVGUpdate = true;
+  elementArray = Array.from(updatedImageElementColorMaps.keys());
+  colorMapArray = Array.from(updatedImageElementColorMaps.values());
+  updatedImageElementColorMaps.clear();
+  ea.updateViewSVGImageColorMap(elementArray, colorMapArray).then(()=>{
+    isWaitingForSVGUpdate = false;
+    updateViewImageColors();
+  });
+}
+
+async function storeOriginalColors() {
+  // Store colors for regular elements  
+  for (const el of getRegularElements()) {
+    const key = el.id;
+    const colorData = {
+      type: "regular",
+      strokeColor: el.strokeColor,
+      backgroundColor: el.backgroundColor
+    };
+    originalColors.set(key, colorData);
+  }
+
+  // Store colors for SVG elements
+  for (const el of svgImageElements) {
+    const colorInfo = await ea.getSVGColorInfoForImgElement(el);
+    const svgColors = new Map();
+    for (const [color, info] of colorInfo.entries()) {
+      svgColors.set(color, {...info});
+    }
+    
+    originalColors.set(el.id, {type: "svg",colors: svgColors});
+  }
+  copyOriginalsToCurrent();
+}
+
+function copyOriginalsToCurrent() {
+  for (const [key, value] of originalColors.entries()) {
+    if(value.type === "regular") {
+      currentColors.set(key, {...value});
+    } else {
+      const newColorMap = new Map();
+      for (const [color, info] of value.colors.entries()) {
+        newColorMap.set(color, {...info});
+      }
+      currentColors.set(key, {type: "svg", colors: newColorMap});
+    }
+  }
+}
+
+function clearSVGMapping() {
+  for (const resetter of sliderResetters) {
+    resetter();
+  }
+  // Reset SVG elements
+  if (svgImageElements.length === 1) {
+    const el = svgImageElements[0];
+    const original = originalColors.get(el.id);
+    const current = currentColors.get(el.id);
+    if (original && original.type === "svg") {
+      
+      for (const color of original.colors.keys()) {
+        current.colors.get(color).mappedTo = color;
+      }
+    }
+  } else {
+    for (const el of svgImageElements) {
+      const original = originalColors.get(el.id);
+      const current = currentColors.get(el.id);
+      if (original && original.type === "svg") {
+        for (const color of original.colors.keys()) {
+          current.colors.get(color).mappedTo = color;
+        }
+      }
+    }
+  }
+  run("clear");
+}
+
+// Set colors
+async function setColors(colors) {
+  debounceColorPicker = true;
+  const regularElements = getRegularElements();
+  
+  if (regularElements.length > 0) {
+    ea.copyViewElementsToEAforEditing(regularElements);
+    for (const el of ea.getElements()) {
+      const original = colors.get(el.id);
+      if (original && original.type === "regular") {
+        if (original.strokeColor) el.strokeColor = original.strokeColor;
+        if (original.backgroundColor) el.backgroundColor = original.backgroundColor;
+      }
+    }
+    await ea.addElementsToView(false, false);
+  }
+
+  // Reset SVG elements
+  if (svgImageElements.length === 1) {
+    const el = svgImageElements[0];
+    const original = colors.get(el.id);
+    if (original && original.type === "svg") {
+      const newColorMap = {};
+      
+      for (const [color, info] of original.colors.entries()) {
+        newColorMap[color] = info.mappedTo;
+        // Update UI components
+        const inputs = colorInputs.get(color);
+        if (inputs) {
+          if(info.mappedTo === "fill") {
+            info.mappedTo = "black";
+            //"fill" is a special value in case the SVG has no fill color defined (i.e black)
+            inputs.textInput.setValue("black");
+            inputs.colorPicker.setValue("#000000");
+          } else {
+            const cm = ea.getCM(info.mappedTo);
+            inputs.textInput.setValue(info.mappedTo);
+            inputs.colorPicker.setValue(cm.stringHEX({alpha: false}).toLowerCase());
+          }
+        }
+      }
+      updatedImageElementColorMaps.set(el, newColorMap);
+    }
+  } else {
+    for (const el of svgImageElements) {
+      const original = colors.get(el.id);
+      if (original && original.type === "svg") {
+        const newColorMap = {};
+        
+        for (const [color, info] of original.colors.entries()) {
+          newColorMap[color] = info.mappedTo;
+        }  
+        updatedImageElementColorMaps.set(el, newColorMap);
+      }
+    }
+  }
+  updateViewImageColors();
+}
+
+function modifyColor(color, isDecrease, step, action) {
+  if (!color) return null;
+  
+  const cm = ea.getCM(color);
+  if (!cm) return color;
+
+  let modified = cm;
+  if (modified.lightness === 0) modified = modified.lightnessTo(minLigtness);
+  if (modified.lightness === 100) modified = modified.lightnessTo(maxLightness);
+  if (modified.saturation === 0) modified = modified.saturationTo(minSaturation);
+
+  switch(action) {
+    case "Lightness":
+      // handles edge cases where lightness is 0 or 100 would convert saturation and hue to 0
+      let lightness = cm.lightness;
+      const shouldRoundLight = (lightness === minLigtness || lightness === maxLightness);
+      if (shouldRoundLight) lightness = Math.round(lightness);
+      lightness += isDecrease ? -step : step;
+      if (lightness <= 0) lightness = minLigtness;
+      if (lightness >= 100) lightness = maxLightness;
+      modified = modified.lightnessTo(lightness);
+      break;
+    case "Hue":
+      modified = isDecrease ? modified.hueBy(-step) : modified.hueBy(step);
+      break;
+    case "Transparency":
+      modified = isDecrease ? modified.alphaBy(-step) : modified.alphaBy(step);
+      break;
+    default:
+      let saturation = cm.saturation;
+      const shouldRoundSat = saturation === minSaturation;
+      if (shouldRoundSat) saturation = Math.round(saturation);
+      saturation += isDecrease ? -step : step;
+      if (saturation <= 0) saturation = minSaturation;
+      modified = modified.saturationTo(saturation);
+  }
+
+  const hasAlpha = modified.alpha < 1;
+  const opts = { alpha: hasAlpha, precision };
+  
+  const format = settings[FORMAT].value;
+  switch(format) {
+    case "RGB": return modified.stringRGB(opts).toLowerCase();
+    case "HEX": return modified.stringHEX(opts).toLowerCase();
+    default: return modified.stringHSL(opts).toLowerCase();
+  }
+}
+
+function slider(contentEl, action, min, max, step, invert) {
+  let prevValue = (max-min)/2;
+  let debounce = false;
+  let sliderControl;
+  new ea.obsidian.Setting(contentEl)
+  .setName(action)
+  .addSlider(slider => {
+    sliderControl = slider;
+    slider
+      .setLimits(min, max, step)
+      .setValue(prevValue)
+      .onChange(async (value) => {
+        if (debounce) return;
+        const isDecrease = invert ? value > prevValue : value < prevValue;
+        const step = Math.abs(value-prevValue);
+        prevValue = value;
+        if(step>0) {
+          run(action, isDecrease, step);
+        }
+      });
+    }
+  );
+  return () => {
+    debounce = true;
+    prevValue = (max-min)/2;
+    sliderControl.setValue(prevValue);
+    debounce = false;
+  }
+}
+
+function showModal() {
+  let debounceColorPicker = true;
+  const modal = new ea.obsidian.Modal(app);
+  let dirty = false;
+
+  modal.onOpen = async () => {
+    const { contentEl, modalEl } = modal;
+    const { width, height } = ea.getExcalidrawAPI().getAppState();
+    modal.bgOpacity = 0;
+    contentEl.createEl('h2', { text: 'Shade Master' });
+    
+    const helpDiv = contentEl.createEl("details", {
+      attr: { style: "margin-bottom: 1em;background: var(--background-secondary); padding: 1em; border-radius: 4px;" }});
+    helpDiv.createEl("summary", { text: "Help & Usage Guide", attr: { style: "cursor: pointer; color: var(--text-accent);" } });
+    const helpDetailsDiv = helpDiv.createEl("div", {
+      attr: { style: "margin-top: 0em; " }
+    });
+    helpDetailsDiv.innerHTML = HELP_TEXT;
+
+    const component = new ea.obsidian.Setting(contentEl)
+      .setName(FORMAT)
+      .setDesc("Output color format")
+      .addDropdown(dropdown => dropdown
+        .addOptions({
+          "HSL": "HSL",
+          "RGB": "RGB",
+          "HEX": "HEX"
+        })
+        .setValue(settings[FORMAT].value)
+        .onChange(value => {
+          settings[FORMAT].value = value;
+          run();
+          dirty = true;
+        })
+      );
+
+    new ea.obsidian.Setting(contentEl)
+      .setName(STROKE)
+      .addToggle(toggle => toggle
+        .setValue(settings[STROKE].value)
+        .onChange(value => {
+          settings[STROKE].value = value;
+          dirty = true;
+        })
+      );
+
+    new ea.obsidian.Setting(contentEl)
+      .setName(BACKGROUND)
+      .addToggle(toggle => toggle
+        .setValue(settings[BACKGROUND].value)
+        .onChange(value => {
+          settings[BACKGROUND].value = value;
+          dirty = true;
+        })
+      );
+
+    // lightness and saturation are on a scale of 0%-100%
+    // Hue is in degrees, 360 for the full circle
+    // transparency is on a range between 0 and 1 (equivalent to 0%-100%)
+    // The range for lightness, saturation and transparency are double since
+    // the input could be at either end of the scale
+    // The range for Hue is 360 since regarless of the position on the circle moving
+    // the slider to the two extremes will travel the entire circle
+    // To modify blacks and whites, lightness first needs to be changed to value between 1% and 99%
+    sliderResetters.push(slider(contentEl, "Hue", 0, 360, 1, false));
+    sliderResetters.push(slider(contentEl, "Saturation", 0, 200, 1, false));
+    sliderResetters.push(slider(contentEl, "Lightness", 0, 200, 1, false));
+    sliderResetters.push(slider(contentEl, "Transparency", 0, 2, 0.05, true));
+
+    // Add color pickers if a single SVG image is selected
+    if (svgImageElements.length === 1) {
+      const svgElement = svgImageElements[0];
+      //note that the objects in currentColors might get replaced when
+      //colors are reset, thus in the onChange functions I will always
+      //read currentColorInfo from currentColors based on svgElement.id
+      const initialColorInfo = currentColors.get(svgElement.id).colors;
+      const colorSection = contentEl.createDiv();
+      colorSection.createEl('h3', { text: 'SVG Colors' });
+      
+      for (const [color, info] of initialColorInfo.entries()) {
+        const row = new ea.obsidian.Setting(colorSection)
+          .setName(color === "fill" ? "SVG default" : color)
+          .setDesc(`${info.fill ? "Fill" : ""}${info.fill && info.stroke ? " & " : ""}${info.stroke ? "Stroke" : ""}`);
+        row.descEl.style.width = "100px";
+        row.nameEl.style.width = "100px";
+
+        // Create color preview div
+        const previewDiv = row.controlEl.createDiv();
+        previewDiv.style.width = "50px";
+        previewDiv.style.height = "20px";
+        previewDiv.style.border = "1px solid var(--background-modifier-border)";
+        if (color === "transparent") {
+          previewDiv.style.backgroundImage = "linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%)";
+          previewDiv.style.backgroundSize = "10px 10px";
+          previewDiv.style.backgroundPosition = "0 0, 0 5px, 5px -5px, -5px 0px";
+        } else {
+          previewDiv.style.backgroundColor = ea.getCM(color).stringHEX({alpha: false}).toLowerCase();
+        }
+        
+        const resetButton = new ea.obsidian.Setting(row.controlEl)
+          .addButton(button => button
+            .setButtonText(">>")
+            .setClass("reset-color-button")
+            .onClick(async () => {
+              const original = originalColors.get(svgElement.id);
+              const current = currentColors.get(svgElement.id);
+              if (original?.type === "svg") {
+                const originalInfo = original.colors.get(color);
+                const currentInfo = current.colors.get(color);
+                if (originalInfo) {
+                  currentInfo.mappedTo = color;
+                  run("reset single color");
+                }
+              }
+            }))
+          resetButton.settingEl.style.padding = "0";
+          resetButton.settingEl.style.border = "0";
+
+        // Add text input for color value
+        const textInput = new ea.obsidian.TextComponent(row.controlEl)
+          .setValue(info.mappedTo)
+          .setPlaceholder("Color value");
+        textInput.inputEl.style.width = "100%";
+        textInput.onChange(value => {
+          const lower = value.toLowerCase();
+          if (lower === color) return;
+          textInput.setValue(lower);
+        })
+
+        const applyButtonComponent = new ea.obsidian.Setting(row.controlEl)
+          .addButton(button => button
+            .setIcon("check")
+            .setTooltip("Apply")
+            .onClick(async () => {
+              const value = textInput.getValue();
+              try {
+                if(!CSS.supports("color",value)) {
+                  new Notice (`${value} is not a valid color string`);
+                  return;
+                }
+                const cm = ea.getCM(value);
+                if (cm) {
+                  const format = settings[FORMAT].value;
+                  const alpha = cm.alpha < 1 ? true : false;
+                  const newColor = format === "RGB" 
+                    ? cm.stringRGB({alpha , precision }).toLowerCase()
+                    : format === "HEX" 
+                      ? cm.stringHEX({alpha}).toLowerCase()
+                      : cm.stringHSL({alpha, precision }).toLowerCase();
+
+                  textInput.setValue(newColor);
+                  const currentInfo = currentColors.get(svgElement.id).colors;
+                  currentInfo.get(color).mappedTo = newColor;
+                  run("Update SVG color");
+                  debounceColorPicker = true;
+                  colorPicker.setValue(cm.stringHEX({alpha: false}).toLowerCase());
+                }
+              } catch (e) {
+                console.error("Invalid color value:", e);
+              }
+            }));
+          applyButtonComponent.settingEl.style.padding = "0";
+          applyButtonComponent.settingEl.style.border = "0";
+        
+        // Add color picker
+        const colorPicker = new ea.obsidian.ColorComponent(row.controlEl)
+          .setValue(ea.getCM(info.mappedTo).stringHEX({alpha: false}).toLowerCase());
+
+        colorPicker.colorPickerEl.style.maxWidth = "2.5rem";
+  
+        // Store references to the components
+        colorInputs.set(color, {
+          textInput,
+          colorPicker,
+          previewDiv,
+          resetButton
+        });
+
+        colorPicker.colorPickerEl.addEventListener('click', () => {
+          debounceColorPicker = false;
+        });
+
+        colorPicker.onChange(async (value) => {
+          try {
+            if(!debounceColorPicker) {
+              const currentInfo = currentColors.get(svgElement.id).colors.get(color);
+              // Preserve alpha from original color
+              const originalAlpha = ea.getCM(currentInfo.mappedTo).alpha;
+              const cm = ea.getCM(value);
+              cm.alphaTo(originalAlpha);
+              const alpha = originalAlpha < 1 ? true : false;
+              const format = settings[FORMAT].value;
+              const newColor = format === "RGB" 
+                ? cm.stringRGB({alpha, precision }).toLowerCase()
+                : format === "HEX" 
+                  ? cm.stringHEX({alpha}).toLowerCase()
+                  : cm.stringHSL({alpha, precision }).toLowerCase();
+              
+              // Update text input
+              textInput.setValue(newColor);
+              
+              // Update SVG
+              currentInfo.mappedTo = newColor;
+              run("Update SVG color");
+            }
+          } catch (e) {
+            console.error("Invalid color value:", e);
+          } finally {
+            debounceColorPicker = true;
+          }
+        });
+      }
+    }
+
+    const buttons = new ea.obsidian.Setting(contentEl);
+    if(svgImageElements.length > 0) {
+      buttons.addButton(button => button
+        .setButtonText("Initialize SVG Colors")
+        .onClick(() => {
+          debounceColorPicker = true;
+          clearSVGMapping();
+        })
+      );
+    }
+
+    buttons
+      .addButton(button => button
+        .setButtonText("Reset")
+        .onClick(() => {
+          for (const resetter of sliderResetters) {
+            resetter();
+          }
+          copyOriginalsToCurrent();
+          setColors(originalColors);
+        }))
+      .addButton(button => button
+        .setButtonText("Close")
+        .setCta(true)
+        .onClick(() => modal.close()));
+
+    makeModalDraggable(modalEl);
+    
+    const maxHeight = Math.round(height * 0.6);
+    const maxWidth = Math.round(width * 0.9);
+    modalEl.style.maxHeight = `${maxHeight}px`;
+    modalEl.style.maxWidth = `${maxWidth}px`;
+  };
+
+  modal.onClose = () => {
+    terminate = true;
+    if (dirty) {
+      ea.setScriptSettings(settings);
+    }
+    if(ea.targetView.isDirty()) {
+      ea.targetView.save(false);
+    }
+  };
+
+  modal.open();
+}
+
+/**
+ * Add draggable functionality to the modal element.
+ * @param {HTMLElement} modalEl - The modal element to make draggable.
+ */
+function makeModalDraggable(modalEl) {
+  let isDragging = false;
+  let startX, startY, initialX, initialY;
+
+  const header = modalEl.querySelector('.modal-titlebar') || modalEl; // Default to modalEl if no titlebar
+  header.style.cursor = 'move';
+
+  const onPointerDown = (e) => {
+    // Ensure the event target isn't an interactive element like slider, button, or input
+    if (e.target.tagName === 'INPUT' || e.target.tagName === 'BUTTON') return;
+
+    isDragging = true;
+    startX = e.clientX;
+    startY = e.clientY;
+    const rect = modalEl.getBoundingClientRect();
+    initialX = rect.left;
+    initialY = rect.top;
+
+    modalEl.style.position = 'absolute';
+    modalEl.style.margin = '0';
+    modalEl.style.left = `${initialX}px`;
+    modalEl.style.top = `${initialY}px`;
+  };
+
+  const onPointerMove = (e) => {
+    if (!isDragging) return;
+
+    const dx = e.clientX - startX;
+    const dy = e.clientY - startY;
+
+    modalEl.style.left = `${initialX + dx}px`;
+    modalEl.style.top = `${initialY + dy}px`;
+  };
+
+  const onPointerUp = () => {
+    isDragging = false;
+  };
+
+  header.addEventListener('pointerdown', onPointerDown);
+  document.addEventListener('pointermove', onPointerMove);
+  document.addEventListener('pointerup', onPointerUp);
+
+  // Clean up event listeners on modal close
+  modalEl.addEventListener('remove', () => {
+    header.removeEventListener('pointerdown', onPointerDown);
+    document.removeEventListener('pointermove', onPointerMove);
+    document.removeEventListener('pointerup', onPointerUp);
+  });
+}
+
+function executeChange(isDecrease, step, action) {
+  const modifyStroke = settings[STROKE].value;
+  const modifyBackground = settings[BACKGROUND].value;
+  const regularElements = getRegularElements();
+
+  // Process regular elements
+  if (regularElements.length > 0) {
+    for (const el of regularElements) {
+      const currentColor = currentColors.get(el.id);
+
+      if (modifyStroke && currentColor.strokeColor) {
+        currentColor.strokeColor = modifyColor(el.strokeColor, isDecrease, step, action);
+      }
+      
+      if (modifyBackground && currentColor.backgroundColor) {
+        currentColor.backgroundColor = modifyColor(el.backgroundColor, isDecrease, step, action);
+      }
+    }
+  }
+  
+  // Process SVG image elements
+  if (svgImageElements.length === 1) { // Only update UI for single SVG
+    const el = svgImageElements[0];
+    colorInfo = currentColors.get(el.id).colors;
+
+    // Process each color in the SVG
+    for (const [color, info] of colorInfo.entries()) {
+      let shouldModify = (modifyBackground && info.fill) || (modifyStroke && info.stroke);
+      
+      if (shouldModify) {
+        const modifiedColor = modifyColor(info.mappedTo, isDecrease, step, action);
+        colorInfo.get(color).mappedTo = modifiedColor;
+        // Update UI components if they exist
+        const inputs = colorInputs.get(color);
+        if (inputs) {
+          const cm = ea.getCM(modifiedColor);
+          inputs.textInput.setValue(modifiedColor);
+          inputs.colorPicker.setValue(cm.stringHEX({alpha: false}).toLowerCase());
+        }
+      }
+    }
+  } else {
+    if (svgImageElements.length > 0) {
+      for (const el of svgImageElements) {
+        const colorInfo = currentColors.get(el.id).colors;
+    
+        // Process each color in the SVG
+        for (const [color, info] of colorInfo.entries()) {
+          let shouldModify = (modifyBackground && info.fill) || (modifyStroke && info.stroke);
+          
+          if (shouldModify) {
+            const modifiedColor = modifyColor(info.mappedTo, isDecrease, step, action);
+            colorInfo.get(color).mappedTo = modifiedColor;
+          }
+        }
+      }
+    }
+  }
+}
+
+let isRunning = false;
+let queue = false;
+function processQueue() {
+  if (!terminate && !isRunning && queue) {
+    queue = false;
+    isRunning = true;
+    setColors(currentColors).then(() => {
+      isRunning = false;
+      if (queue) processQueue();
+    });
+  }
+}
+
+function run(action="Hue", isDecrease=true, step=0) {
+  // passing invalid action (such as "clear") will bypass rewriting of colors using CM
+  // this is useful when resetting colors to original values
+  if(ACTIONS.includes(action)) { 
+    executeChange(isDecrease, step, action);
+  }
+  queue = true;
+  if (!isRunning) processQueue();
+}
+
+await storeOriginalColors();
+showModal();
+processQueue();

ea-scripts/Shade Master.svg

@@ -0,0 +1 @@
+<svg class="skip" 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"><path d="M11 17a4 4 0 0 1-8 0V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2Z"/><path d="M16.7 13H19a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H7"/><path d="M 7 17h.01"/><path d="m11 8 2.3-2.3a2.4 2.4 0 0 1 3.404.004L18.6 7.6a2.4 2.4 0 0 1 .026 3.434L9.9 19.8"/></svg>

ea-scripts/Slideshow.md

@@ -26,6 +26,10 @@ if(!ea.verifyMinimumPluginVersion || !ea.verifyMinimumPluginVersion("2.1.7")) {
   return;
 }
 
+if(ea.targetView.isDirty()) {
+  ea.targetView.forceSave(true);
+}
+
 const hostLeaf = ea.targetView.leaf;
 const hostView = hostLeaf.view;
 const statusBarElement = document.querySelector("div.status-bar");
@@ -33,7 +37,7 @@ const ctrlKey = ea.targetView.modifierKeyDown.ctrlKey || ea.targetView.modifierK
 const altKey = ea.targetView.modifierKeyDown.altKey || ctrlKey;
 const shiftKey = ea.targetView.modifierKeyDown.shiftKey;
 const shouldStartWithLastSlide = shiftKey && window.ExcalidrawSlideshow &&
-      (window.ExcalidrawSlideshow.script === utils.scriptFile.path) && (typeof window.ExcalidrawSlideshow.slide === "number")
+      (window.ExcalidrawSlideshow.script === utils.scriptFile.path) && (typeof window.ExcalidrawSlideshow.slide?.[ea.targetView.file.path] === "number")
 //-------------------------------
 //constants
 //-------------------------------
@@ -57,8 +61,9 @@ const SVG_LASER_OFF = ea.obsidian.getIcon("lucide-wand").outerHTML;
 //-------------------------------
 //utility & convenience functions
 //-------------------------------
+let shouldSaveAfterThePresentation = false;
 let isLaserOn = false;
-let slide = shouldStartWithLastSlide ? window.ExcalidrawSlideshow.slide : 0;
+let slide = shouldStartWithLastSlide ? window.ExcalidrawSlideshow.slide?.[ea.targetView.file.path] : 0;
 let isFullscreen = false;
 const ownerDocument = ea.targetView.ownerDocument;
 const startFullscreen = !altKey;
@@ -350,8 +355,8 @@ const navigate = async (dir) => {
   }
   if(selectSlideDropdown) selectSlideDropdown.value = slide+1;
   await scrollToNextRect(nextRect);
-  if(window.ExcalidrawSlideshow && (typeof window.ExcalidrawSlideshow.slide === "number")) {
-    window.ExcalidrawSlideshow.slide = slide;
+  if(window.ExcalidrawSlideshow && (typeof window.ExcalidrawSlideshow.slide?.[ea.targetView.file.path] === "number")) {
+    window.ExcalidrawSlideshow.slide[ea.targetView.file.path] = slide;
   }
 }
 
@@ -505,6 +510,7 @@ const createPresentationNavigationPanel = () => {
 		    new ea.obsidian.ToggleComponent(el)
 		      .setValue(isHidden)
 		      .onChange(value => {
+            shouldSaveAfterThePresentation = true;
 		        if(value) {
 		          excalidrawAPI.setToast({
 						    message:"The presentation path remain hidden after the presentation. No need to select the line again. Just click the slideshow button to start the next presentation.",
@@ -730,6 +736,9 @@ const exitPresentation = async (openForEdit = false) => {
     hostView.refreshCanvasOffset();
     excalidrawAPI.setActiveTool({type: "selection"});
   })
+  if(!shouldSaveAfterThePresentation) {
+    ea.targetView.clearDirty();
+  }
 }
 
 //--------------------------
@@ -755,6 +764,7 @@ const start = async () => {
     resetControlPanelElPosition();
   }
   if(presentationPathType === "line") await toggleArrowVisibility(isHidden);
+  ea.targetView.clearDirty();
 }
 
 const timestamp = Date.now();
@@ -769,10 +779,14 @@ if(window.ExcalidrawSlideshow && (window.ExcalidrawSlideshow.script === utils.sc
     window.clearTimeout(window.ExcalidrawSlideshowStartTimer);
     delete window.ExcalidrawSlideshowStartTimer;
   }
-  window.ExcalidrawSlideshow = {
-    script: utils.scriptFile.path,
-    timestamp,
-    slide: 0
-  };
+  if(!window.ExcalidrawSlideshow) {
+    window.ExcalidrawSlideshow = {
+      script: utils.scriptFile.path,
+      slide: {},
+    };
+  }
+  window.ExcalidrawSlideshow.timestamp = timestamp;
+  window.ExcalidrawSlideshow.slide[ea.targetView.file.path] = 0;
+  
   window.ExcalidrawSlideshowStartTimer = window.setTimeout(start,500);
 }

ea-scripts/Split Ellipse.md

@@ -18,6 +18,7 @@ if (!ellipse) return;
 
 let lines = elements.filter(el => el.type == "line" || el.type == "arrow");
 if (lines.length == 0) lines = ea.getViewElements().filter(el => el.type == "line" || el.type == "arrow");
+lines = lines.map(getNormalizedLine);
 const subLines = getSubLines(lines);
 
 const angles = subLines.flatMap(line => {
@@ -206,3 +207,70 @@ function isBetween(num, min, max) {
 function clamp(number, min, max) {
   return Math.max(min, Math.min(number, max));
 }
+
+//Same line but with angle=0
+function getNormalizedLine(originalElement) {
+  if(originalElement.angle === 0) return originalElement;
+
+  // Get absolute coordinates for all points first
+  const pointRotateRads = (point, center, angle) => {
+    const [x, y] = point;
+    const [cx, cy] = center;
+    return [
+      (x - cx) * Math.cos(angle) - (y - cy) * Math.sin(angle) + cx,
+      (x - cx) * Math.sin(angle) + (y - cy) * Math.cos(angle) + cy
+    ];
+  };
+  
+  // Get element absolute coordinates (matching Excalidraw's approach)
+  const getElementAbsoluteCoords = (element) => {
+    const points = element.points;
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+  
+    for (const [x, y] of points) {
+      const absX = x + element.x;
+      const absY = y + element.y;
+      minX = Math.min(minX, absX);
+      minY = Math.min(minY, absY);
+      maxX = Math.max(maxX, absX);
+      maxY = Math.max(maxY, absY);
+    }
+  
+    return [minX, minY, maxX, maxY];
+  };
+  
+  // Calculate center point based on absolute coordinates
+  const [x1, y1, x2, y2] = getElementAbsoluteCoords(originalElement);
+  const centerX = (x1 + x2) / 2;
+  const centerY = (y1 + y2) / 2;
+  
+  // Calculate absolute coordinates of all points
+  const absolutePoints = originalElement.points.map(([x, y]) => [
+    x + originalElement.x,
+    y + originalElement.y
+  ]);
+  
+  // Rotate all points around the center
+  const rotatedPoints = absolutePoints.map(point => 
+    pointRotateRads(point, [centerX, centerY], originalElement.angle)
+  );
+  
+  // Convert back to relative coordinates
+  const newPoints = rotatedPoints.map(([x, y]) => [
+    x - rotatedPoints[0][0],
+    y - rotatedPoints[0][1]
+  ]);
+  
+  const newLineId = ea.addLine(newPoints);
+  
+  // Set the position of the new line to the first rotated point
+  const newLine = ea.getElement(newLineId);
+  newLine.x = rotatedPoints[0][0];
+  newLine.y = rotatedPoints[0][1];
+  newLine.angle = 0;
+  delete ea.elementsDict[newLine.id];
+  return newLine;
+}

ea-scripts/index-new.md

@@ -94,6 +94,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/Set%20Dimensions.svg"/></div>|[[#Set Dimensions]]|
 |<div><img src="https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Set%20Grid.svg"/></div>|[[#Set Grid]]|
 |<div><img src="https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Set%20Stroke%20Width%20of%20Selected%20Elements.svg"/></div>|[[#Set Stroke Width of Selected Elements]]|
+|<div><img src="https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Shade%20Master.svg"/></div>|[[#Shade Master]]|
 |<div><img src="https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Toggle%20Grid.svg"/></div>|[[#Toggle Grid]]|
 |<div><img src="https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Uniform%20size.svg"/></div>|[[#Uniform Size]]|
 
@@ -147,6 +148,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/Add%20Next%20Step%20in%20Process.svg"/></div>|[[#Add Next Step in Process]]|
 |<div><img src="https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Convert%20freedraw%20to%20line.svg"/></div>|[[#Convert freedraw to line]]|
 |<div><img src="https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Deconstruct%20selected%20elements%20into%20new%20drawing.svg"/></div>|[[#Deconstruct selected elements into new drawing]]|
+|<div><img src="https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Full-Year%20Calendar%20Generator.svg"/></div>|[[#Full-Year Calendar Generator]]|
 
 ## Masking and cropping
 **Keywords**: Crop, Mask, Transform images
@@ -393,6 +395,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/Excalidraw%20Writing%20Machine.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">Creates a hierarchical Markdown document out of a visual layout of an article that can be fed to Templater and converted into an article using AI for Templater.<br>Watch this video to understand how the script is intended to work:<br><iframe width="400" height="225" src="https://www.youtube.com/embed/zvRpCOZAUSs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><br>You can download the sample Obsidian Templater file from <a href="https://gist.github.com/zsviczian/bf49d4b2d401f5749aaf8c2fa8a513d9">here</a>. You can download the demo PDF document showcased in the video from <a href="https://zsviczian.github.io/DemoArticle-AtomicHabits.pdf">here</a>.</td></tr></table>
 
+## Full-Year Calendar Generator
+```excalidraw-script-install
+https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Full-Year%20Calendar%20Generator.md
+```
+<table><tr  valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/simonperet'>@simonperet</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/Full-Year%20Calendar%20Generator.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">Generates a complete calendar for a specified year.<br><img src='https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-full-year-calendar-exemple.excalidraw.png'></td></tr></table>
+
 ## GPT Draw-a-UI
 ```excalidraw-script-install
 https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/GPT-Draw-a-UI.md
@@ -563,6 +571,13 @@ 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/Set%20Text%20Alignment.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">Sets text alignment of text block (cetner, right, left). Useful if you want to set a keyboard shortcut for selecting text alignment.<br><img src='https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-text-align.jpg'></td></tr></table>
 
+## Shade Master
+```excalidraw-script-install
+https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Shade%20Master.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/Shade%20Master.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">You can modify the colors of SVG images, embedded files, and Excalidraw elements in a drawing by changing Hue, Saturation, Lightness and Transparency; and if only a single SVG or nested Excalidraw drawing is selected, then you can remap image colors.<br><iframe width="560" height="315" src="https://www.youtube.com/embed/ISuORbVKyhQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></td></tr></table>
+
+
 ## Slideshow
 ```excalidraw-script-install
 https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Slideshow.md

manifest-beta.json

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

manifest.json

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

package.json

@@ -24,7 +24,7 @@
   "license": "MIT",
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "@zsviczian/excalidraw": "0.17.6-22",
+    "@zsviczian/excalidraw": "0.17.6-27",
     "chroma-js": "^2.4.2",
     "clsx": "^2.0.0",
     "@zsviczian/colormaster": "^1.2.2",
@@ -58,7 +58,8 @@
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.2",
-    "@rollup/plugin-typescript": "^11.1.6",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@rollup/plugin-json": "^6.1.0",
     "@types/chroma-js": "^2.4.0",
     "@types/js-beautify": "^1.14.0",
     "@types/js-yaml": "^4.0.9",
@@ -79,10 +80,10 @@
     "rollup-plugin-copy": "^3.5.0",
     "@zsviczian/rollup-plugin-postprocess": "^1.0.3",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.34.1",
-    "tslib": "^2.6.1",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "tslib": "^2.8.1",
     "ttypescript": "^1.5.15",
-    "typescript": "^5.2.2",
+    "typescript": "^5.7.3",
     "fs-extra": "^11.2.0",
     "uglify-js": "^3.19.3"
   },

rollup.config.js

@@ -5,17 +5,21 @@ import { terser } from "rollup-plugin-terser";
 import copy from "rollup-plugin-copy";
 import typescript2 from "rollup-plugin-typescript2";
 import fs from 'fs';
+import path from 'path';
 import LZString from 'lz-string';
 import postprocess from '@zsviczian/rollup-plugin-postprocess';
 import cssnano from 'cssnano';
 import jsesc from 'jsesc';
 import { minify } from 'uglify-js';
+import json from '@rollup/plugin-json';
 
 // Load environment variables
 import dotenv from 'dotenv';
 dotenv.config();
 
 const DIST_FOLDER = 'dist';
+const absolutePath = path.resolve(DIST_FOLDER);
+fs.mkdirSync(absolutePath, { recursive: true });
 const isProd = (process.env.NODE_ENV === "production");
 const isLib = (process.env.NODE_ENV === "lib");
 console.log(`Running: ${process.env.NODE_ENV}; isProd: ${isProd}; isLib: ${isLib}`);
@@ -32,13 +36,16 @@ function trimLastSemicolon(input) {
 }
 
 function minifyCode(code) {
-  const minified = minify(code,{
-    compress: true,
+  const minified = minify(code, {
+    compress: {
+      //https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2170
+      reduce_vars: false,
+    },
     mangle: true,
     output: {
       comments: false,
       beautify: false,
-    },
+    }
   });
 
   if (minified.error) {
@@ -55,7 +62,7 @@ function compressLanguageFile(lang) {
   return LZString.compressToBase64(minifyCode(`x = ${content};`));
 }
 
-const excalidraw_pkg = isLib ? "" : minifyCode( isProd
+const excalidraw_pkg = isLib ? "" : minifyCode(isProd
   ? fs.readFileSync("./node_modules/@zsviczian/excalidraw/dist/excalidraw.production.min.js", "utf8")
   : fs.readFileSync("./node_modules/@zsviczian/excalidraw/dist/excalidraw.development.js", "utf8"));
 const react_pkg = isLib ? "" : minifyCode(isProd
@@ -124,6 +131,7 @@ const BASE_CONFIG = {
 
 const getRollupPlugins = (tsconfig, ...plugins) => [
   typescript2(tsconfig),
+  json(),
   replace({
     preventAssignment: true,
     "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
@@ -139,13 +147,14 @@ const BUILD_CONFIG = {
     entryFileNames: 'main.js',
     format: 'cjs',
     exports: 'default',
+    inlineDynamicImports: true, // Add this line only
   },
   plugins: getRollupPlugins(
     {
       tsconfig: isProd ? "tsconfig.json" : "tsconfig.dev.json",
       sourcemap: !isProd,
       clean: true,
-      verbosity: isProd ? 1 : 2,
+      //verbosity: isProd ? 1 : 2,
     },
     ...(isProd ? [
       terser({

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.onImageFilePathHook = (data) => {};
+
 /**
  * If set, this callback is triggered whenever the active canvas color changes
  *   onCanvasColorChangeHook: (

src/constants/constants.ts

@@ -198,7 +198,7 @@ export const REG_BLOCK_REF_CLEAN = /[!"#$%&()*+,.:;<=>?@^`{|}~\/\[\]\\\r\n]/g;
 //                                 /[!"#$%&()*+,.:;<=>?@^`{|}~\/\[\]\\]/g; 
 // https://discord.com/channels/686053708261228577/989603365606531104/1000128926619816048
 // /\+|\/|~|=|%|\(|\)|{|}|,|&|\.|\$|!|\?|;|\[|]|\^|#|\*|<|>|&|@|\||\\|"|:|\s/g;
-export const IMAGE_TYPES = ["jpeg", "jpg", "png", "gif", "svg", "webp", "bmp", "ico", "jtif", "tif"];
+export const IMAGE_TYPES = ["jpeg", "jpg", "png", "gif", "svg", "webp", "bmp", "ico", "jtif", "tif", "jfif", "avif"];
 export const ANIMATED_IMAGE_TYPES = ["gif", "webp", "apng", "svg"];
 export const EXPORT_TYPES = ["svg", "dark.svg", "light.svg", "png", "dark.png", "light.png"];
 export const MAX_IMAGE_SIZE = 500;

src/core/main.ts

@@ -35,12 +35,12 @@ import {
   DEVICE,
   FONTS_STYLE_ID,
   CJK_STYLE_ID,
-  updateExcalidrawLib,
   loadMermaid,
   setRootElementSize,
 } from "../constants/constants";
 import { ExcalidrawSettings, DEFAULT_SETTINGS, ExcalidrawSettingTab } from "./settings";
-import { initExcalidrawAutomate, ExcalidrawAutomate } from "../shared/ExcalidrawAutomate";
+import { ExcalidrawAutomate } from "../shared/ExcalidrawAutomate";
+import { initExcalidrawAutomate } from "src/utils/excalidrawAutomateUtils";
 import { around, dedupe } from "monkey-around";
 import { t } from "../lang/helpers";
 import {
@@ -92,6 +92,15 @@ import { EventManager } from "./managers/EventManager";
 declare const PLUGIN_VERSION:string;
 declare const INITIAL_TIMESTAMP: number;
 
+type FileMasterInfo = {
+  isHyperLink: boolean;
+  isLocalLink: boolean;
+  path: string;
+  hasSVGwithBitmap: boolean;
+  blockrefData: string,
+  colorMapJSON?: string
+}
+
 export default class ExcalidrawPlugin extends Plugin {
   private fileManager: PluginFileManager;
   private observerManager: ObserverManager;
@@ -114,7 +123,7 @@ export default class ExcalidrawPlugin extends Plugin {
   public opencount: number = 0;
   public ea: ExcalidrawAutomate;
   //A master list of fileIds to facilitate copy / paste
-  public filesMaster: Map<FileId, { isHyperLink: boolean; isLocalLink: boolean; path: string; hasSVGwithBitmap: boolean; blockrefData: string, colorMapJSON?: string}> =
+  public filesMaster: Map<FileId, FileMasterInfo> =
     null; //fileId, path
   public equationsMaster: Map<FileId, string> = null; //fileId, formula
   public mermaidsMaster: Map<FileId, string> = null; //fileId, mermaidText

src/core/managers/CommandManager.ts

@@ -16,6 +16,7 @@ import {
   IMAGE_TYPES,
   DEVICE,
   sceneCoordsToViewportCoords,
+  fileid,
 } from "../../constants/constants";
 import ExcalidrawView, { TextMode } from "../../view/ExcalidrawView";
 import {
@@ -28,11 +29,8 @@ import { InsertCommandDialog } from "../../shared/Dialogs/InsertCommandDialog";
 import { InsertImageDialog } from "../../shared/Dialogs/InsertImageDialog";
 import { ImportSVGDialog } from "../../shared/Dialogs/ImportSVGDialog";
 import { InsertMDDialog } from "../../shared/Dialogs/InsertMDDialog";
-import {
-  ExcalidrawAutomate,
-  insertLaTeXToView,
-  search,
-} from "../../shared/ExcalidrawAutomate";
+import { ExcalidrawAutomate } from "../../shared/ExcalidrawAutomate";
+import { insertLaTeXToView, search } from "src/utils/excalidrawAutomateUtils";
 import { templatePromt } from "../../shared/Dialogs/Prompt";
 import { t } from "../../lang/helpers";
 import {
@@ -53,7 +51,7 @@ import {
   getImageSize,
 } from "../../utils/utils";
 import { extractSVGPNGFileName, getActivePDFPageNumberFromPDFView, getAttachmentsFolderAndFilePath, isObsidianThemeDark, mergeMarkdownFiles, setExcalidrawView } from "../../utils/obsidianUtils";
-import { ExcalidrawElement, ExcalidrawEmbeddableElement, ExcalidrawImageElement, ExcalidrawTextElement } from "@zsviczian/excalidraw/types/excalidraw/element/types";
+import { ExcalidrawElement, ExcalidrawEmbeddableElement, ExcalidrawImageElement, ExcalidrawTextElement, FileId } from "@zsviczian/excalidraw/types/excalidraw/element/types";
 import { ReleaseNotes } from "../../shared/Dialogs/ReleaseNotes";
 import { ScriptInstallPrompt } from "../../shared/Dialogs/ScriptInstallPrompt";
 import Taskbone from "../../shared/OCR/Taskbone";
@@ -71,6 +69,7 @@ import { carveOutImage, carveOutPDF, createImageCropperFile } from "../../utils/
 import { showFrameSettings } from "../../shared/Dialogs/FrameSettings";
 import { insertImageToView } from "../../utils/excalidrawViewUtils";
 import ExcalidrawPlugin from "src/core/main";
+import { get } from "http";
 
 declare const PLUGIN_VERSION:string;
 
@@ -1044,6 +1043,43 @@ export class CommandManager {
       }
     })
 
+    this.addCommand({
+      id: "duplicate-image",
+      name: t("DUPLICATE_IMAGE"),
+      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?.file) return false;
+        if(checking) return true;
+        (async()=>{
+          const ea = getEA(view) as ExcalidrawAutomate;
+          const isAnchored = Boolean(el.customData?.isAnchored); 
+          const imgId = await ea.addImage(el.x+el.width/5, el.y+el.height/5, ef.file,!isAnchored, isAnchored);
+          const img = ea.getElement(imgId) as Mutable<ExcalidrawImageElement>;
+          img.width = el.width;
+          img.height = el.height;
+          if(el.crop) img.crop = {...el.crop};
+          const newFileId = fileid() as FileId;
+          ea.imagesDict[newFileId] = ea.imagesDict[img.fileId];
+          ea.imagesDict[newFileId].id = newFileId;
+          delete ea.imagesDict[img.fileId]
+          img.fileId = newFileId;
+          await ea.addElementsToView(false, false, true);
+          ea.selectElementsInView([imgId]);
+          ea.destroy();
+        })();
+      }
+    })
+
     this.addCommand({
       id: "reset-image-to-100",
       name: t("RESET_IMG_TO_100"),

src/core/managers/EventManager.ts

@@ -1,7 +1,7 @@
 import { WorkspaceLeaf, TFile, Editor, MarkdownView, MarkdownFileInfo, MetadataCache, App, EventRef, Menu, FileView } from "obsidian";
 import { ExcalidrawElement } from "@zsviczian/excalidraw/types/excalidraw/element/types";
 import { getLink } from "../../utils/fileUtils";
-import { editorInsertText, getParentOfClass, setExcalidrawView } from "../../utils/obsidianUtils";
+import { editorInsertText, getExcalidrawViews, getParentOfClass, setExcalidrawView } from "../../utils/obsidianUtils";
 import ExcalidrawPlugin from "src/core/main";
 import { DEBUGGING, debug } from "src/utils/debugHelper";
 import { ExcalidrawAutomate } from "src/shared/ExcalidrawAutomate";
@@ -81,6 +81,8 @@ export class EventManager {
     //save Excalidraw leaf and update embeds when switching to another leaf
     this.registerEvent(this.plugin.app.workspace.on("active-leaf-change", this.onActiveLeafChangeHandler.bind(this)));
 
+    this.registerEvent(this.app.workspace.on("layout-change", this.onLayoutChangeHandler.bind(this)));
+
     //File Save Trigger Handlers
     //Save the drawing if the user clicks outside the Excalidraw Canvas
     const onClickEventSaveActiveDrawing = this.onClickSaveActiveDrawing.bind(this);
@@ -101,6 +103,10 @@ export class EventManager {
     this.plugin.registerEvent(this.plugin.app.workspace.on("editor-menu", this.onEditorMenuHandler.bind(this)));
   }
 
+  private onLayoutChangeHandler() {
+    getExcalidrawViews(this.app).forEach(excalidrawView=>excalidrawView.refresh());
+  }
+
   private onPasteHandler (evt: ClipboardEvent, editor: Editor, info: MarkdownView | MarkdownFileInfo ) {
     if(evt.defaultPrevented) return
     const data = evt.clipboardData.getData("text/plain");

src/core/managers/MarkdownPostProcessor.ts

@@ -8,7 +8,7 @@ import {
 } from "obsidian";
 import { DEVICE, RERENDER_EVENT } from "../../constants/constants";
 import { EmbeddedFilesLoader } from "../../shared/EmbeddedFileLoader";
-import { createPNG, createSVG } from "../../shared/ExcalidrawAutomate";
+import { createPNG, createSVG } from "../../utils/excalidrawAutomateUtils";
 import { ExportSettings } from "../../view/ExcalidrawView";
 import ExcalidrawPlugin from "../main";
 import {getIMGFilename,} from "../../utils/fileUtils";
@@ -801,15 +801,16 @@ const tmpObsidianWYSIWYG = async (
     if(Boolean(ctx.frontmatter)) {
       el.empty();
     } else {
-      const warningEl = el.querySelector("div>h3[data-heading^='Unable to find section #^");
+      //Obsidian changed this at some point from h3 to h5 and also the text...
+      const warningEl = el.querySelector("div>*[data-heading^='Unable to find ");
       if(warningEl) {
-        const ref = warningEl.getAttr("data-heading").match(/Unable to find section (#\^(?:group=|area=|frame=|clippedframe=)[^ ]*)/)?.[1];
+        const dataHeading = warningEl.getAttr("data-heading");
+        const ref = warningEl.getAttr("data-heading").match(/Unable to find[^^]+(\^(?:group=|area=|frame=|clippedframe=)[^ ”]+)/)?.[1];
         if(ref) {
-          attr.fname = file.path + ref;
+          attr.fname = file.path + "#" +ref;
           areaPreview = true;
         }
       }
-
     }
     if(!isFrontmatterDiv && !areaPreview) {
       if(el.parentElement === containerEl) containerEl.removeChild(el);
@@ -893,7 +894,12 @@ export const markdownPostProcessor = async (
     el.firstElementChild?.hasClass("frontmatter") ||
     el.firstElementChild?.hasClass("block-language-yaml");
   if(isPrinting && isFrontmatter) {
-    return;
+    //https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2184
+    const file = app.vault.getAbstractFileByPath(ctx.sourcePath);
+    const isDrawing = file && file instanceof TFile && plugin.isExcalidrawFile(file);
+    if(isDrawing) {
+      return;
+    }
   }
   
   //@ts-ignore

src/core/settings.ts

@@ -41,6 +41,8 @@ import { Rank } from "src/constants/actionIcons";
 import { TAG_AUTOEXPORT, TAG_MDREADINGMODE, TAG_PDFEXPORT } from "src/constants/constSettingsTags";
 import { HotkeyEditor } from "src/shared/Dialogs/HotkeyEditor";
 import { getExcalidrawViews } from "src/utils/obsidianUtils";
+import { createSliderWithText } from "src/utils/sliderUtils";
+import { PDFExportSettingsComponent, PDFExportSettings } from "src/shared/Dialogs/PDFExportSettingsComponent";
 
 export interface ExcalidrawSettings {
   folder: string;
@@ -70,6 +72,7 @@ export interface ExcalidrawSettings {
   annotatePreserveSize: boolean;
   displaySVGInPreview: boolean; //No longer used since 1.9.13
   previewImageType: PreviewImageType; //Introduced with 1.9.13
+  renderingConcurrency: number;
   allowImageCache: boolean;
   allowImageCacheInScene: boolean;
   displayExportedImageIfAvailable: boolean;
@@ -216,6 +219,7 @@ export interface ExcalidrawSettings {
   rank: Rank;
   modifierKeyOverrides: {modifiers: Modifier[], key: string}[];
   showSplashscreen: boolean;
+  pdfSettings: PDFExportSettings;
 }
 
 declare const PLUGIN_VERSION:string;
@@ -248,6 +252,7 @@ export const DEFAULT_SETTINGS: ExcalidrawSettings = {
   annotatePreserveSize: false,
   displaySVGInPreview: undefined,
   previewImageType: undefined,
+  renderingConcurrency: 3,
   allowImageCache: true,
   allowImageCacheInScene: true,
   displayExportedImageIfAvailable: false,
@@ -494,6 +499,15 @@ export const DEFAULT_SETTINGS: ExcalidrawSettings = {
     {modifiers: ["Mod"], key:"G"},
   ],
   showSplashscreen: true,
+  pdfSettings: {
+    pageSize: "A4",
+    pageOrientation: "portrait",
+    fitToPage: 1,
+    paperColor: "white",
+    customPaperColor: "#ffffff",
+    alignment: "center",
+    margin: "normal",
+  },
 };
 
 export class ExcalidrawSettingTab extends PluginSettingTab {
@@ -1053,55 +1067,6 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
       cls: "excalidraw-setting-h1",
     });
 
-    new Setting(detailsEl)
-    .setName(t("DEFAULT_PEN_MODE_NAME"))
-    .setDesc(fragWithHTML(t("DEFAULT_PEN_MODE_DESC")))
-    .addDropdown((dropdown) =>
-      dropdown
-        .addOption("never", "Never")
-        .addOption("mobile", "On Obsidian Mobile")
-        .addOption("always", "Always")
-        .setValue(this.plugin.settings.defaultPenMode)
-        .onChange(async (value: "never" | "always" | "mobile") => {
-          this.plugin.settings.defaultPenMode = value;
-          this.applySettingsUpdate();
-        }),
-    );
-
-    new Setting(detailsEl)
-      .setName(t("DISABLE_DOUBLE_TAP_ERASER_NAME"))
-      .addToggle((toggle) =>
-        toggle
-          .setValue(this.plugin.settings.penModeDoubleTapEraser)
-          .onChange(async (value) => {
-            this.plugin.settings.penModeDoubleTapEraser = value;
-            this.applySettingsUpdate();
-          }),
-      );
-    
-    new Setting(detailsEl)
-      .setName(t("DISABLE_SINGLE_FINGER_PANNING_NAME"))
-      .addToggle((toggle) =>
-        toggle
-          .setValue(this.plugin.settings.penModeSingleFingerPanning)
-          .onChange(async (value) => {
-            this.plugin.settings.penModeSingleFingerPanning = value;
-            this.applySettingsUpdate();
-          }),
-      );
-
-    new Setting(detailsEl)
-      .setName(t("SHOW_PEN_MODE_FREEDRAW_CROSSHAIR_NAME"))
-      .setDesc(fragWithHTML(t("SHOW_PEN_MODE_FREEDRAW_CROSSHAIR_DESC")))
-      .addToggle((toggle) =>
-        toggle
-          .setValue(this.plugin.settings.penModeCrosshairVisible)
-          .onChange(async (value) => {
-            this.plugin.settings.penModeCrosshairVisible = value;
-            this.applySettingsUpdate();
-          }),
-      );
-
     const readingModeEl = new Setting(detailsEl)
       .setName(t("SHOW_DRAWING_OR_MD_IN_READING_MODE_NAME"))
       .setDesc(fragWithHTML(t("SHOW_DRAWING_OR_MD_IN_READING_MODE_DESC")))
@@ -1328,27 +1293,77 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
           }),
       );
 
-    let zoomText: HTMLDivElement;
 
-    new Setting(detailsEl)
-      .setName(t("ZOOM_TO_FIT_MAX_LEVEL_NAME"))
-      .setDesc(fragWithHTML(t("ZOOM_TO_FIT_MAX_LEVEL_DESC")))
-      .addSlider((slider) =>
-        slider
-          .setLimits(0.5, 10, 0.5)
-          .setValue(this.plugin.settings.zoomToFitMaxLevel)
-          .onChange(async (value) => {
-            zoomText.innerText = ` ${value.toString()}`;
-            this.plugin.settings.zoomToFitMaxLevel = value;
+    createSliderWithText(detailsEl, {
+      name: t("ZOOM_TO_FIT_MAX_LEVEL_NAME"),
+      desc: t("ZOOM_TO_FIT_MAX_LEVEL_DESC"),
+      value: this.plugin.settings.zoomToFitMaxLevel,
+      min: 0.5,
+      max: 10,
+      step: 0.5,
+      onChange: (value) => {
+        this.plugin.settings.zoomToFitMaxLevel = value;
+        this.applySettingsUpdate();
+      }
+    })
+
+      // ------------------------------------------------
+      // Pen
+      // ------------------------------------------------
+      detailsEl = displayDetailsEl.createEl("details");
+      detailsEl.createEl("summary", {
+        text: t("PEN_HEAD"),
+        cls: "excalidraw-setting-h3",
+      });
+
+      new Setting(detailsEl)
+      .setName(t("DEFAULT_PEN_MODE_NAME"))
+      .setDesc(fragWithHTML(t("DEFAULT_PEN_MODE_DESC")))
+      .addDropdown((dropdown) =>
+        dropdown
+          .addOption("never", "Never")
+          .addOption("mobile", "On Obsidian Mobile")
+          .addOption("always", "Always")
+          .setValue(this.plugin.settings.defaultPenMode)
+          .onChange(async (value: "never" | "always" | "mobile") => {
+            this.plugin.settings.defaultPenMode = value;
             this.applySettingsUpdate();
           }),
-      )
-      .settingEl.createDiv("", (el) => {
-        zoomText = el;
-        el.style.minWidth = "2.3em";
-        el.style.textAlign = "right";
-        el.innerText = ` ${this.plugin.settings.zoomToFitMaxLevel.toString()}`;
-      });
+      );
+  
+      new Setting(detailsEl)
+        .setName(t("DISABLE_DOUBLE_TAP_ERASER_NAME"))
+        .addToggle((toggle) =>
+          toggle
+            .setValue(this.plugin.settings.penModeDoubleTapEraser)
+            .onChange(async (value) => {
+              this.plugin.settings.penModeDoubleTapEraser = value;
+              this.applySettingsUpdate();
+            }),
+        );
+      
+      new Setting(detailsEl)
+        .setName(t("DISABLE_SINGLE_FINGER_PANNING_NAME"))
+        .addToggle((toggle) =>
+          toggle
+            .setValue(this.plugin.settings.penModeSingleFingerPanning)
+            .onChange(async (value) => {
+              this.plugin.settings.penModeSingleFingerPanning = value;
+              this.applySettingsUpdate();
+            }),
+        );
+  
+      new Setting(detailsEl)
+        .setName(t("SHOW_PEN_MODE_FREEDRAW_CROSSHAIR_NAME"))
+        .setDesc(fragWithHTML(t("SHOW_PEN_MODE_FREEDRAW_CROSSHAIR_DESC")))
+        .addToggle((toggle) =>
+          toggle
+            .setValue(this.plugin.settings.penModeCrosshairVisible)
+            .onChange(async (value) => {
+              this.plugin.settings.penModeCrosshairVisible = value;
+              this.applySettingsUpdate();
+            }),
+        );
 
       // ------------------------------------------------
       // Grid
@@ -1397,28 +1412,20 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
         );
 
       // Grid opacity slider (hex value between 00 and FF)
-      let opacityValue: HTMLDivElement;
-      new Setting(detailsEl)
-        .setName(t("GRID_OPACITY_NAME"))
-        .setDesc(fragWithHTML(t("GRID_OPACITY_DESC")))
-        .addSlider((slider) =>
-          slider
-            .setLimits(0, 100, 1) // 0 to 100 in decimal
-            .setValue(this.plugin.settings.gridSettings.OPACITY)
-            .onChange(async (value) => {
-              opacityValue.innerText = ` ${value.toString()}`;
-              this.plugin.settings.gridSettings.OPACITY = value;
-              this.applySettingsUpdate();
-              updateGridColor();
-            }),
-        )
-        .settingEl.createDiv("", (el) => {
-          opacityValue = el;
-          el.style.minWidth = "3em";
-          el.style.textAlign = "right";
-          el.innerText = ` ${this.plugin.settings.gridSettings.OPACITY}`;
-        });
-
+      createSliderWithText(detailsEl, {
+        name: t("GRID_OPACITY_NAME"),
+        desc: t("GRID_OPACITY_DESC"),
+        value: this.plugin.settings.gridSettings.OPACITY,
+        min: 0,
+        max: 100,
+        step: 1,
+        onChange: (value) => {
+          this.plugin.settings.gridSettings.OPACITY = value;
+          this.applySettingsUpdate();
+          updateGridColor();
+        },
+        minWidth: "3em",
+      })
 
     // ------------------------------------------------
     // Laser Pointer
@@ -1439,47 +1446,33 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
           }),
       );
     
-    let decayTime: HTMLDivElement;
-    new Setting(detailsEl)
-      .setName(t("LASER_DECAY_TIME_NAME"))
-      .setDesc(fragWithHTML(t("LASER_DECAY_TIME_DESC")))
-      .addSlider((slider) =>
-        slider
-          .setLimits(500, 20000, 500)
-          .setValue(this.plugin.settings.laserSettings.DECAY_TIME)
-          .onChange(async (value) => {
-            decayTime.innerText = ` ${value.toString()}`;
-            this.plugin.settings.laserSettings.DECAY_TIME = value;
-            this.applySettingsUpdate();
-          }),
-      )
-      .settingEl.createDiv("", (el) => {
-        decayTime = el;
-        el.style.minWidth = "3em";
-        el.style.textAlign = "right";
-        el.innerText = ` ${this.plugin.settings.laserSettings.DECAY_TIME.toString()}`;
-      });
+    createSliderWithText(detailsEl, {
+      name: t("LASER_DECAY_TIME_NAME"),
+      desc: t("LASER_DECAY_TIME_DESC"),
+      value: this.plugin.settings.laserSettings.DECAY_TIME,
+      min: 500,
+      max: 20000,
+      step: 500,
+      onChange: (value) => {
+        this.plugin.settings.laserSettings.DECAY_TIME = value;
+        this.applySettingsUpdate();
+      },
+      minWidth: "3em",
+    })
 
-      let decayLength: HTMLDivElement;
-      new Setting(detailsEl)
-        .setName(t("LASER_DECAY_LENGTH_NAME"))
-        .setDesc(fragWithHTML(t("LASER_DECAY_LENGTH_DESC")))
-        .addSlider((slider) =>
-          slider
-            .setLimits(25, 2000, 25)
-            .setValue(this.plugin.settings.laserSettings.DECAY_LENGTH)
-            .onChange(async (value) => {
-              decayLength.innerText = ` ${value.toString()}`;
-              this.plugin.settings.laserSettings.DECAY_LENGTH = value;
-              this.applySettingsUpdate();
-            }),
-        )
-        .settingEl.createDiv("", (el) => {
-          decayLength = el;
-          el.style.minWidth = "3em";
-          el.style.textAlign = "right";
-          el.innerText = ` ${this.plugin.settings.laserSettings.DECAY_LENGTH.toString()}`;
-        });
+    createSliderWithText(detailsEl, {
+      name: t("LASER_DECAY_LENGTH_NAME"),
+      desc: t("LASER_DECAY_LENGTH_DESC"),
+      value: this.plugin.settings.laserSettings.DECAY_LENGTH,
+      min: 25,
+      max: 2000,
+      step: 25,
+      onChange: (value) => {
+        this.plugin.settings.laserSettings.DECAY_LENGTH = value;
+        this.applySettingsUpdate();
+      },
+      minWidth: "3em",
+    })
 
     detailsEl = displayDetailsEl.createEl("details");
     detailsEl.createEl("summary", { 
@@ -1488,47 +1481,31 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
     });
     detailsEl.createDiv({ text: t("DRAG_MODIFIER_DESC"), cls: "setting-item-description" });
 
-    let longPressDesktop: HTMLDivElement;
-    new Setting(detailsEl)
-      .setName(t("LONG_PRESS_DESKTOP_NAME"))
-      .setDesc(fragWithHTML(t("LONG_PRESS_DESKTOP_DESC")))
-      .addSlider((slider) =>
-        slider
-          .setLimits(300, 3000, 100)
-          .setValue(this.plugin.settings.longPressDesktop)
-          .onChange(async (value) => {
-            longPressDesktop.innerText = ` ${value.toString()}`;
-            this.plugin.settings.longPressDesktop = value;
-            this.applySettingsUpdate(true);
-          }),
-      )
-      .settingEl.createDiv("", (el) => {
-        longPressDesktop = el;
-        el.style.minWidth = "2.3em";
-        el.style.textAlign = "right";
-        el.innerText = ` ${this.plugin.settings.longPressDesktop.toString()}`;
-      });
+    createSliderWithText(detailsEl, {
+      name: t("LONG_PRESS_DESKTOP_NAME"),
+      desc: t("LONG_PRESS_DESKTOP_DESC"),
+      value: this.plugin.settings.longPressDesktop,
+      min: 300,
+      max: 3000,
+      step: 100,
+      onChange: (value) => {
+        this.plugin.settings.longPressDesktop = value;
+        this.applySettingsUpdate(true);
+      },
+    })
 
-    let longPressMobile: HTMLDivElement;
-    new Setting(detailsEl)
-      .setName(t("LONG_PRESS_MOBILE_NAME"))
-      .setDesc(fragWithHTML(t("LONG_PRESS_MOBILE_DESC")))
-      .addSlider((slider) =>
-        slider
-          .setLimits(300, 3000, 100)
-          .setValue(this.plugin.settings.longPressMobile)
-          .onChange(async (value) => {
-            longPressMobile.innerText = ` ${value.toString()}`;
-            this.plugin.settings.longPressMobile = value;
-            this.applySettingsUpdate(true);
-          }),
-      )
-      .settingEl.createDiv("", (el) => {
-        longPressMobile = el;
-        el.style.minWidth = "2.3em";
-        el.style.textAlign = "right";
-        el.innerText = ` ${this.plugin.settings.longPressMobile.toString()}`;
-      });
+    createSliderWithText(detailsEl, {
+      name: t("LONG_PRESS_MOBILE_NAME"),
+      desc: t("LONG_PRESS_MOBILE_DESC"),
+      value: this.plugin.settings.longPressMobile,
+      min: 300,
+      max: 3000,
+      step: 100,
+      onChange: (value) => {
+        this.plugin.settings.longPressMobile = value;
+        this.applySettingsUpdate(true);
+      },
+    })
 
     new Setting(detailsEl)
       .setName(t("DOUBLE_CLICK_LINK_OPEN_VIEW_MODE"))
@@ -1700,26 +1677,18 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
       );
     donePrefixSetting.setDisabled(!this.plugin.settings.parseTODO);
 
-    let opacityText: HTMLDivElement;
-    new Setting(detailsEl)
-      .setName(t("LINKOPACITY_NAME"))
-      .setDesc(fragWithHTML(t("LINKOPACITY_DESC")))
-      .addSlider((slider) =>
-        slider
-          .setLimits(0, 1, 0.05)
-          .setValue(this.plugin.settings.linkOpacity)
-          .onChange(async (value) => {
-            opacityText.innerText = ` ${value.toString()}`;
-            this.plugin.settings.linkOpacity = value;
-            this.applySettingsUpdate(true);
-          }),
-      )
-      .settingEl.createDiv("", (el) => {
-        opacityText = el;
-        el.style.minWidth = "2.3em";
-        el.style.textAlign = "right";
-        el.innerText = ` ${this.plugin.settings.linkOpacity.toString()}`;
-      });
+    createSliderWithText(detailsEl, {
+      name: t("LINKOPACITY_NAME"),
+      desc: t("LINKOPACITY_DESC"),
+      value: this.plugin.settings.linkOpacity,
+      min: 0,
+      max: 1,
+      step: 0.05,
+      onChange: (value) => {
+        this.plugin.settings.linkOpacity = value;
+        this.applySettingsUpdate(true);
+      },
+    });
 
     new Setting(detailsEl)
       .setName(t("HOVERPREVIEW_NAME"))
@@ -1953,6 +1922,19 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
       cls: "excalidraw-setting-h3",
     });
 
+    createSliderWithText(detailsEl, {
+      name: t("RENDERING_CONCURRENCY_NAME"),
+      desc: t("RENDERING_CONCURRENCY_DESC"),
+      min: 1,
+      max: 5,
+      step: 1,
+      value: this.plugin.settings.renderingConcurrency,
+      onChange: (value) => {
+        this.plugin.settings.renderingConcurrency = value;
+        this.applySettingsUpdate();
+      }
+    });
+
     new Setting(detailsEl)
       .setName(t("EMBED_IMAGE_CACHE_NAME"))
       .setDesc(fragWithHTML(t("EMBED_IMAGE_CACHE_DESC")))
@@ -2077,49 +2059,31 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
           }),
       );
 
-    let scaleText: HTMLDivElement;
+    createSliderWithText(detailsEl, {
+      name: t("EXPORT_PNG_SCALE_NAME"),
+      desc: t("EXPORT_PNG_SCALE_DESC"),
+      value: this.plugin.settings.pngExportScale,
+      min: 1,
+      max: 5,
+      step: 0.5,
+      onChange: (value) => {
+        this.plugin.settings.pngExportScale = value;
+        this.applySettingsUpdate();
+      }
+    });
 
-    new Setting(detailsEl)
-      .setName(t("EXPORT_PNG_SCALE_NAME"))
-      .setDesc(fragWithHTML(t("EXPORT_PNG_SCALE_DESC")))
-      .addSlider((slider) =>
-        slider
-          .setLimits(1, 5, 0.5)
-          .setValue(this.plugin.settings.pngExportScale)
-          .onChange(async (value) => {
-            scaleText.innerText = ` ${value.toString()}`;
-            this.plugin.settings.pngExportScale = value;
-            this.applySettingsUpdate();
-          }),
-      )
-      .settingEl.createDiv("", (el) => {
-        scaleText = el;
-        el.style.minWidth = "2.3em";
-        el.style.textAlign = "right";
-        el.innerText = ` ${this.plugin.settings.pngExportScale.toString()}`;
-      });
-
-    let exportPadding: HTMLDivElement;
-    
-    new Setting(detailsEl)
-      .setName(t("EXPORT_PADDING_NAME"))
-      .setDesc(fragWithHTML(t("EXPORT_PADDING_DESC")))
-      .addSlider((slider) =>
-        slider
-          .setLimits(0, 50, 5)
-          .setValue(this.plugin.settings.exportPaddingSVG)
-          .onChange(async (value) => {
-            exportPadding.innerText = ` ${value.toString()}`;
-            this.plugin.settings.exportPaddingSVG = value;
-            this.applySettingsUpdate();
-          }),
-      )
-      .settingEl.createDiv("", (el) => {
-        exportPadding = el;
-        el.style.minWidth = "2.3em";
-        el.style.textAlign = "right";
-        el.innerText = ` ${this.plugin.settings.exportPaddingSVG.toString()}`;
-      });
+    createSliderWithText(detailsEl, {
+      name: t("EXPORT_PADDING_NAME"),
+      desc: fragWithHTML(t("EXPORT_PADDING_DESC")),
+      value: this.plugin.settings.exportPaddingSVG,
+      min: 0,
+      max: 50,
+      step: 5,
+      onChange: (value) => {
+        this.plugin.settings.exportPaddingSVG = value;
+        this.applySettingsUpdate();
+      }
+    });
 
     detailsEl = exportDetailsEl.createEl("details");
     detailsEl.createEl("summary", { 
@@ -2165,6 +2129,20 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
           }),
       );
 
+    detailsEl = exportDetailsEl.createEl("details");
+    detailsEl.createEl("summary", { 
+      text: t("PDF_EXPORT_SETTINGS"),
+      cls: "excalidraw-setting-h4",
+    });
+
+    new PDFExportSettingsComponent(
+      detailsEl,
+      this.plugin.settings.pdfSettings,
+      () => {
+        this.applySettingsUpdate();
+      }
+    ).render();
+
     detailsEl = exportDetailsEl.createEl("details");
     detailsEl.createEl("summary", { 
       text: t("EXPORT_HEAD"),
@@ -2309,9 +2287,6 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
       el.innerHTML = t("MD_EMBED_CUSTOMDATA_HEAD_DESC");
     });
 
-
-
-
     new EmbeddalbeMDFileCustomDataSettingsComponent(
       detailsEl,
       this.plugin.settings.embeddableMarkdownDefaults,
@@ -2460,27 +2435,19 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
       cls: "excalidraw-setting-h3",
     });
     
-    let areaZoomText: HTMLDivElement;
 
-    new Setting(detailsEl)
-    .setName(t("MAX_IMAGE_ZOOM_IN_NAME"))
-    .setDesc(fragWithHTML(t("MAX_IMAGE_ZOOM_IN_DESC")))
-    .addSlider((slider) =>
-      slider
-        .setLimits(1, 10, 0.5)
-        .setValue(this.plugin.settings.areaZoomLimit)
-        .onChange(async (value) => {
-          areaZoomText.innerText = ` ${value.toString()}`;
-          this.plugin.settings.areaZoomLimit = value;
-          this.applySettingsUpdate();
-          this.plugin.excalidrawConfig.updateValues(this.plugin);
-        }),
-    )
-    .settingEl.createDiv("", (el) => {
-      areaZoomText = el;
-      el.style.minWidth = "2.3em";
-      el.style.textAlign = "right";
-      el.innerText = ` ${this.plugin.settings.areaZoomLimit.toString()}`;
+    createSliderWithText(detailsEl, {
+      name: t("MAX_IMAGE_ZOOM_IN_NAME"),
+      desc: fragWithHTML(t("MAX_IMAGE_ZOOM_IN_DESC")),
+      value: this.plugin.settings.areaZoomLimit,
+      min: 1,
+      max: 10,
+      step: 0.5,
+      onChange: (value) => {
+        this.plugin.settings.areaZoomLimit = value;
+        this.applySettingsUpdate();
+        this.plugin.excalidrawConfig.updateValues(this.plugin);
+      },
     });
 
     detailsEl = nonstandardDetailsEl.createEl("details");
@@ -2541,6 +2508,9 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
             this.requestReloadDrawings = true;
             this.plugin.settings.experimentalEnableFourthFont = value;
             this.applySettingsUpdate();
+            if(value) {
+              this.plugin.initializeFonts();
+            }
           }),
       );
     

src/lang/locale/en.ts

@@ -30,6 +30,7 @@ export default {
     "Script is up to date - Click to reinstall",
   OPEN_AS_EXCALIDRAW: "Open as Excalidraw Drawing",
   TOGGLE_MODE: "Toggle between Excalidraw and Markdown mode",
+  DUPLICATE_IMAGE: "Duplicate selected image with a different image ID",
   CONVERT_NOTE_TO_EXCALIDRAW: "Convert markdown note to Excalidraw Drawing",
   CONVERT_EXCALIDRAW: "Convert *.excalidraw to *.md files",
   CREATE_NEW: "Create new drawing",
@@ -385,13 +386,14 @@ FILENAME_HEAD: "Filename",
     "This setting will not affect the display of the drawing when you are in Excalidraw mode or when you embed the drawing into a markdown document or when rendering hover preview.<br><ul>" +
     "<li>See other related setting for <a href='#"+TAG_PDFEXPORT+"'>PDF Export</a> under 'Embedding and Exporting' further below.</li></ul><br>" +
     "You must close the active excalidraw/markdown file and reopen it for this change to take effect.",
-  SHOW_DRAWING_OR_MD_IN_EXPORTPDF_NAME: "Render the file as an image when exporting an Excalidraw file to PDF",
+  SHOW_DRAWING_OR_MD_IN_EXPORTPDF_NAME: "Render Excalidraw as Image in Obsidian PDF Export",
   SHOW_DRAWING_OR_MD_IN_EXPORTPDF_DESC:
-    "This setting controls the behavior of Excalidraw when exporting an Excalidraw file to PDF in markdown view mode using Obsidian's <b>Export to PDF</b> feature.<br>" +
-    "<ul><li>When <b>enabled</b> the PDF will show the Excalidraw drawing only;</li>" +
-    "<li>When <b>disabled</b> the PDF will show the markdown side of the document.</li></ul>" +
-    "See the other related setting for <a href='#"+TAG_MDREADINGMODE+"'>Markdown Reading Mode</a> under 'Appearnace and Behavior' further above.<br>" +
-    "⚠️ Note, you must close the active excalidraw/markdown file and reopen for this change to take effect. ⚠️",
+    "This setting controls how Excalidraw files are exported to PDF using Obsidian's built-in <b>Export to PDF</b> feature.<br>" +
+    "<ul><li><b>Enabled:</b> The PDF will include the Excalidraw drawing as an image.</li>" +
+    "<li><b>Disabled:</b> The PDF will include the markdown content as text.</li></ul>" +
+    "Note: This setting does not affect the PDF export feature within Excalidraw itself.<br>" +
+    "See the other related setting for <a href='#"+TAG_MDREADINGMODE+"'>Markdown Reading Mode</a> under 'Appearance and Behavior' further above.<br>" +
+    "⚠️ You must close and reopen the Excalidraw/markdown file for changes to take effect. ⚠️",
   HOTKEY_OVERRIDE_HEAD: "Hotkey overrides",
   HOTKEY_OVERRIDE_DESC: `Some of the Excalidraw hotkeys such as <code>${labelCTRL()}+Enter</code> to edit text or <code>${labelCTRL()}+K</code> to create an element link ` +
     "conflict with Obsidian hotkey settings. The hotkey combinations you add below will override Obsidian's hotkey settings while useing Excalidraw, thus " +
@@ -416,6 +418,7 @@ FILENAME_HEAD: "Filename",
   ZOOM_TO_FIT_MAX_LEVEL_NAME: "Zoom to fit max ZOOM level",
   ZOOM_TO_FIT_MAX_LEVEL_DESC:
     "Set the maximum level to which zoom to fit will enlarge the drawing. Minimum is 0.5 (50%) and maximum is 10 (1000%).",
+  PEN_HEAD: "Pen",
   GRID_HEAD: "Grid",
   GRID_DYNAMIC_COLOR_NAME: "Dynamic grid color",
   GRID_DYNAMIC_COLOR_DESC:
@@ -578,7 +581,11 @@ FILENAME_HEAD: "Filename",
   EMBED_CANVAS_DESC: 
     "Hide canvas node border and background when embedding an Excalidraw drawing to Canvas. " +
     "Note that for a full transparent background for your image, you will still need to configure Excalidraw to export images with transparent background.",
-  EMBED_CACHING: "Image caching",
+  EMBED_CACHING: "Image caching and rendering optimization",
+  RENDERING_CONCURRENCY_NAME: "Image rendering concurrency",
+  RENDERING_CONCURRENCY_DESC:
+    "Number of parallel workers to use for image rendering. Increasing this number will speed up the rendering process, but may slow down the rest of the system. " +
+    "The default value is 3. You can increase this number if you have a powerful system.",
   EXPORT_SUBHEAD: "Export Settings",
   EMBED_SIZING: "Image sizing",
   EMBED_THEME_BACKGROUND: "Image theme and background color",
@@ -655,6 +662,7 @@ FILENAME_HEAD: "Filename",
   EXPORT_EMBED_SCENE_DESC:
     "Embed Excalidraw scene in exported image. Can be overridden at a file level by adding the <code>excalidraw-export-embed-scene: true/false<code> frontmatter key. " +
     "The setting only takes effect the next time you (re)open drawings.",
+  PDF_EXPORT_SETTINGS: "PDF Export Settings",
   EXPORT_HEAD: "Auto-export Settings",
   EXPORT_SYNC_NAME:
     "Keep the .SVG and/or .PNG filenames in sync with the drawing file",
@@ -1000,4 +1008,87 @@ FILENAME_HEAD: "Filename",
   LINK_CLICK_POPOUT: "Open in a popout window",
   LINK_CLICK_NEW_TAB: "Open in a new tab",
   LINK_CLICK_MD_PROPS: "Show the Markdown image-properties dialog (only relevant if you have embedded a markdown document as an image)",
+
+  //ExportDialog
+  // Dialog and tabs
+  EXPORTDIALOG_TITLE: "Export Drawing",
+  EXPORTDIALOG_TAB_IMAGE: "Image",
+  EXPORTDIALOG_TAB_PDF: "PDF",
+  // Settings persistence
+  EXPORTDIALOG_SAVE_SETTINGS: "Save image settings to file doc.properties?",
+  EXPORTDIALOG_SAVE_SETTINGS_SAVE: "Save as preset",
+  EXPORTDIALOG_SAVE_SETTINGS_ONETIME: "One-time use",
+  // Image settings
+  EXPORTDIALOG_IMAGE_SETTINGS: "Image",
+  EXPORTDIALOG_IMAGE_DESC: "PNG supports transparency. External files can include Excalidraw scene data.",
+  EXPORTDIALOG_PADDING: "Padding",
+  EXPORTDIALOG_SCALE: "Scale",
+  EXPORTDIALOG_CURRENT_PADDING: "Current padding:",
+  EXPORTDIALOG_SIZE_DESC: "Scale affects output size",
+  EXPORTDIALOG_SCALE_VALUE: "Scale:",
+  EXPORTDIALOG_IMAGE_SIZE: "Size:",
+  // Theme and background
+  EXPORTDIALOG_EXPORT_THEME: "Theme",
+  EXPORTDIALOG_THEME_LIGHT: "Light",
+  EXPORTDIALOG_THEME_DARK: "Dark",
+  EXPORTDIALOG_BACKGROUND: "Background",
+  EXPORTDIALOG_BACKGROUND_TRANSPARENT: "Transparent",
+  EXPORTDIALOG_BACKGROUND_USE_COLOR: "Use scene color",
+  // Selection
+  EXPORTDIALOG_SELECTED_ELEMENTS: "Export",
+  EXPORTDIALOG_SELECTED_ALL: "Entire scene",
+  EXPORTDIALOG_SELECTED_SELECTED: "Selection only",
+  // Export options
+  EXPORTDIALOG_EMBED_SCENE: "Include scene data?",
+  EXPORTDIALOG_EMBED_YES: "Yes",
+  EXPORTDIALOG_EMBED_NO: "No",
+  // PDF settings
+  EXPORTDIALOG_PDF_SETTINGS: "PDF",
+  EXPORTDIALOG_PAGE_SIZE: "Size",
+  EXPORTDIALOG_PAGE_ORIENTATION: "Orientation",
+  EXPORTDIALOG_ORIENTATION_PORTRAIT: "Portrait",
+  EXPORTDIALOG_ORIENTATION_LANDSCAPE: "Landscape",
+  EXPORTDIALOG_PDF_FIT_TO_PAGE: "Page Fitting",
+  EXPORTDIALOG_PDF_FIT_OPTION: "Fit to page",
+  EXPORTDIALOG_PDF_FIT_2_OPTION: "Fit to 2-pages",
+  EXPORTDIALOG_PDF_FIT_4_OPTION: "Fit to 4-pages",
+  EXPORTDIALOG_PDF_FIT_6_OPTION: "Fit to 6-pages",
+  EXPORTDIALOG_PDF_FIT_8_OPTION: "Fit to 8-pages",
+  EXPORTDIALOG_PDF_FIT_12_OPTION: "Fit to 12-pages",
+  EXPORTDIALOG_PDF_FIT_16_OPTION: "Fit to 16-pages",
+  EXPORTDIALOG_PDF_SCALE_OPTION: "Use image scale (may span multiple pages)",
+  EXPORTDIALOG_PDF_PAPER_COLOR: "Paper Color",
+  EXPORTDIALOG_PDF_PAPER_WHITE: "White",
+  EXPORTDIALOG_PDF_PAPER_SCENE: "Use scene color",
+  EXPORTDIALOG_PDF_PAPER_CUSTOM: "Custom color",
+  EXPORTDIALOG_PDF_ALIGNMENT: "Position on Page",
+  EXPORTDIALOG_PDF_ALIGN_CENTER: "Center",
+  EXPORTDIALOG_PDF_ALIGN_TOP_LEFT: "Top Left",
+  EXPORTDIALOG_PDF_ALIGN_TOP_CENTER: "Top Center", 
+  EXPORTDIALOG_PDF_ALIGN_TOP_RIGHT: "Top Right",
+  EXPORTDIALOG_PDF_ALIGN_BOTTOM_LEFT: "Bottom Left",
+  EXPORTDIALOG_PDF_ALIGN_BOTTOM_CENTER: "Bottom Center",
+  EXPORTDIALOG_PDF_ALIGN_BOTTOM_RIGHT: "Bottom Right",
+  EXPORTDIALOG_PDF_MARGIN: "Margin",
+  EXPORTDIALOG_PDF_MARGIN_NONE: "None",
+  EXPORTDIALOG_PDF_MARGIN_TINY: "Small",
+  EXPORTDIALOG_PDF_MARGIN_NORMAL: "Normal",
+  EXPORTDIALOG_SAVE_PDF_SETTINGS: "Save PDF settings",
+  EXPORTDIALOG_SAVE_CONFIRMATION: "PDF config saved to plugin settings as default",
+  // Buttons
+  EXPORTDIALOG_PNGTOFILE : "Export PNG",
+  EXPORTDIALOG_SVGTOFILE : "Export SVG",
+  EXPORTDIALOG_PNGTOVAULT : "PNG to Vault",
+  EXPORTDIALOG_SVGTOVAULT : "SVG to Vault",
+  EXPORTDIALOG_EXCALIDRAW: "Excalidraw",
+  EXPORTDIALOG_PNGTOCLIPBOARD : "PNG to Clipboard",
+  EXPORTDIALOG_SVGTOCLIPBOARD : "SVG to Clipboard",
+  EXPORTDIALOG_PDF: "Export PDF",
+
+  EXPORTDIALOG_PDF_PROGRESS_NOTICE: "Exporting PDF. If this image is large, it may take a while.",
+  EXPORTDIALOG_PDF_PROGRESS_DONE: "Export complete",
+  EXPORTDIALOG_PDF_PROGRESS_ERROR: "Error exporting PDF, check developer console for details",
+
+  //exportUtils.ts
+  PDF_EXPORT_DESKTOP_ONLY: "PDF export is only available on desktop",
 };

src/lang/locale/zh-cn.ts

@@ -30,6 +30,7 @@ export default {
     "脚本已是最新 - 点击重新安装",
   OPEN_AS_EXCALIDRAW: "打开为 Excalidraw 绘图",
   TOGGLE_MODE: "在 Excalidraw 和 Markdown 模式之间切换",
+  DUPLICATE_IMAGE : "复制选定的图像，并分配一个不同的图像 ID",
   CONVERT_NOTE_TO_EXCALIDRAW: "转换：空白 Markdown 文档 => Excalidraw 绘图文件",
   CONVERT_EXCALIDRAW: "转换： *.excalidraw => *.md",
   CREATE_NEW: "新建绘图文件",
@@ -196,7 +197,7 @@ export default {
   NEWVERSION_NOTIFICATION_DESC:
       "<b>开启：</b>当本插件存在可用更新时，显示通知。<br>" +
       "<b>关闭：</b>您需要手动检查本插件的更新（设置 - 第三方插件 - 检查更新）。",
-  
+
   BASIC_HEAD: "基本",
   BASIC_DESC: `包括：更新说明，更新提示，新绘图文件、模板文件、脚本文件的存储路径等的设置。`,
   FOLDER_NAME: "Excalidraw 文件夹（區分大小寫！）",
@@ -385,13 +386,14 @@ FILENAME_HEAD: "文件名",
     "此设置不会影响您在 Excalidraw 模式下的绘图显示，或者在将绘图嵌入 Markdown 文档时，或在渲染悬停预览时。<br><ul>" +
     "<li>请参阅下面‘嵌入和导出’部分的 <a href='#"+TAG_PDFEXPORT+"'>PDF 导出</a> 相关设置。</li></ul><br>" +
     "您必须关闭当前的 Excalidraw/Markdown 文件并重新打开，以使此更改生效。",
-  SHOW_DRAWING_OR_MD_IN_EXPORTPDF_NAME: "在将 Excalidraw 文件导出为 PDF 时将文件渲染为图像",
+  SHOW_DRAWING_OR_MD_IN_EXPORTPDF_NAME : "在 Obsidian 中导出为 PDF 格式时将 Excalidraw 渲染为图像" ,
   SHOW_DRAWING_OR_MD_IN_EXPORTPDF_DESC:
-    "处于 Markdown 视图模式时，此设置控制 Excalidraw 在使用 Obsidian 的 <b>导出为 PDF</b> 功能时，将 Excalidraw 文件导出为 PDF 的行为。<br>" +
-    "<ul><li>当 <b>启用</b> 时，PDF 将仅显示 Excalidraw 绘图；</li>" +
-    "<li>当 <b>禁用</b> 时，PDF 将显示文档的 Markdown 部分（背景笔记）。</li></ul>" +
-    "请参阅上面‘外观和行为’部分的 <<a href='#"+TAG_MDREADINGMODE+"'>>Markdown 阅读模式</a> 相关设置。" +
-    "⚠️ 注意，您必须关闭当前的 Excalidraw/Markdown 文件并重新打开，以使此更改生效。⚠️",
+    "此设置控制在使用 Obsidian 内置的<b>导出为 PDF</b>功能，如何将 Excalidraw 文件导出为 PDF。<br>" +
+    "<ul><li><b>启用：</b>PDF 将包含图像格式的 Excalidraw 绘图。</li>" +
+    "<li><b>禁用：</b>PDF 将包含作为文本的 Markdown 内容。</li></ul>" +
+    "注意：此设置不会影响 Excalidraw 本身的 PDF 导出功能。<br>" +
+    "请参阅上方“外观和行为”部分中与<a href='#" + TAG_MDREADINGMODE + "'>Markdown 阅读模式</a>相关的其他设置。<br>" +
+    "⚠️ 您必须关闭并重新打开 Excalidraw/Markdown 文件，设置更改才会生效。⚠️",
   HOTKEY_OVERRIDE_HEAD: "热键覆盖",
   HOTKEY_OVERRIDE_DESC: `一些 Excalidraw 的热键，例如 ${labelCTRL()}+Enter 用于编辑文本，或 ${labelCTRL()}+K 用于创建元素链接。` +
     "与 Obsidian 的热键设置发生冲突。您在下面添加的热键组合将在使用 Excalidraw 时覆盖 Obsidian 的热键设置，" +
@@ -406,7 +408,7 @@ FILENAME_HEAD: "文件名",
   DEFAULT_WHEELZOOM_NAME: "鼠标滚轮缩放页面",
   DEFAULT_WHEELZOOM_DESC:
     `<b>开启：</b>鼠标滚轮为缩放页面，${labelCTRL()}+鼠标滚轮为滚动页面</br><b>关闭：</b>鼠标滚轮为滚动页面，${labelCTRL()}+鼠标滚轮为缩放页面`,
-    
+
   ZOOM_TO_FIT_NAME: "调节面板尺寸后自动缩放页面",
   ZOOM_TO_FIT_DESC: "调节面板尺寸后，自适应地缩放页面" +
     "<br><b>开启：</b>自动缩放。<br><b>关闭：</b>禁用自动缩放。",
@@ -416,6 +418,7 @@ FILENAME_HEAD: "文件名",
   ZOOM_TO_FIT_MAX_LEVEL_NAME: "自动缩放的最高级别",
   ZOOM_TO_FIT_MAX_LEVEL_DESC:
     "自动缩放画布时，允许放大的最高级别。该值不能低于 0.5（50%）且不能超过 10（1000%）。",
+  PEN_HEAD: "手写笔",
   GRID_HEAD: "网格",
   GRID_DYNAMIC_COLOR_NAME: "动态网格颜色",
   GRID_DYNAMIC_COLOR_DESC:
@@ -575,10 +578,14 @@ FILENAME_HEAD: "文件名",
     此外，还有自动导出 SVG 或 PNG 文件并保持与绘图文件状态同步的设置。`,
   EMBED_CANVAS: "Obsidian 白板支持",
   EMBED_CANVAS_NAME: "沉浸式嵌入",
-  EMBED_CANVAS_DESC: 
+  EMBED_CANVAS_DESC:
     "当嵌入绘图到 Obsidian 白板中时，隐藏元素的边界和背景。" +
     "注意：如果想要背景完全透明，您依然需要在 Excalidraw 中设置“导出的图像不包含背景”。",
-  EMBED_CACHING: "预览图缓存",
+  EMBED_CACHING : "图像缓存和渲染优化" ,
+  RENDERING_CONCURRENCY_NAME : "图像渲染并发性" ,
+  RENDERING_CONCURRENCY_DESC :
+    "用于图像渲染的并行工作线程数。增加此数值可以加快渲染速度，但可能会减慢系统的其他部分运行速度。" +
+    "默认值为 3。如果您的系统性能强大，可以增加此数值。" ,
   EXPORT_SUBHEAD: "导出",
   EMBED_SIZING: "图像尺寸",
   EMBED_THEME_BACKGROUND: "图像的主题和背景色",
@@ -586,7 +593,7 @@ FILENAME_HEAD: "文件名",
   EMBED_IMAGE_CACHE_DESC: "可提高下次嵌入的速度。" +
     "但如果绘图中又嵌入了子绘图，当子绘图改变时，您需要打开子绘图并手动保存，才能够更新父绘图的预览图。",
   SCENE_IMAGE_CACHE_NAME: "缓存场景中嵌套的 Excalidraw",
-  SCENE_IMAGE_CACHE_DESC: "缓存场景中嵌套的 Excalidraw 以加快场景渲染速度。这将加快渲染过程，特别是在您的场景中有深度嵌套的 Excalidraw 时。" + 
+  SCENE_IMAGE_CACHE_DESC: "缓存场景中嵌套的 Excalidraw 以加快场景渲染速度。这将加快渲染过程，特别是在您的场景中有深度嵌套的 Excalidraw 时。" +
     "Excalidraw 将智能地尝试识别嵌套 Excalidraw 的子元素是否发生变化，并更新缓存。 " +
     "如果您怀疑缓存未能正确更新，您可能需要关闭此功能。",
   EMBED_IMAGE_CACHE_CLEAR: "清除缓存",
@@ -630,7 +637,7 @@ FILENAME_HEAD: "文件名",
     "如果您选择了 PNG 或 SVG 副本，当副本不存在时，该命令将会插入一条损坏的链接，您需要打开绘图文件并手动导出副本才能修复 —— " +
     "也就是说，该选项不会自动帮您生成 PNG/SVG 副本，而只会引用已有的 PNG/SVG 副本。",
   EMBED_MARKDOWN_COMMENT_NAME: "将链接作为注释嵌入",
-  EMBED_MARKDOWN_COMMENT_DESC: 
+  EMBED_MARKDOWN_COMMENT_DESC:
     "在图像下方以 Markdown 链接的形式嵌入原始 Excalidraw 文件的链接，例如：<code>%%[[drawing.excalidraw]]%%</code>。<br>" +
     "除了添加 Markdown 注释之外，您还可以选择嵌入的 SVG 或 PNG，并使用命令面板：" +
     "'<code>Excalidraw: 打开 Excalidraw 绘图</code>'来打开该绘图",
@@ -655,6 +662,7 @@ FILENAME_HEAD: "文件名",
   EXPORT_EMBED_SCENE_DESC:
     "在导出的图像中嵌入 Excalidraw 场景。可以通过在文件级别添加 <code>excalidraw-export-embed-scene: true/false</code> frontmatter 元数据键来覆盖此设置。" +
     "此设置仅在您下次(重新)打开绘图时生效。",
+  PDF_EXPORT_SETTINGS : "PDF 导出设置",
   EXPORT_HEAD: "导出设置",
   EXPORT_SYNC_NAME:
     "保持 SVG/PNG 文件名与绘图文件同步",
@@ -709,7 +717,7 @@ FILENAME_HEAD: "文件名",
     "文件浏览器等创建的绘图都将是旧格式（*.excalidraw）。" +
     "此外，您打开旧格式绘图文件时将不再收到警告消息。",
   MATHJAX_NAME: "MathJax (LaTeX) 的 javascript 库服务器",
-  MATHJAX_DESC: "如果您在绘图中使用 LaTeX，插件需要从服务器获取并加载一个 javascript 库。" + 
+  MATHJAX_DESC: "如果您在绘图中使用 LaTeX，插件需要从服务器获取并加载一个 javascript 库。" +
     "如果您的网络无法访问某些库服务器，可以尝试通过此选项更换库服务器。"+
     "更改此选项后，您可能需要重启 Obsidian 来使其生效。",
   LATEX_DEFAULT_NAME: "插入 LaTeX 时的默认表达式",
@@ -728,7 +736,7 @@ FILENAME_HEAD: "文件名",
   EXPERIMENTAL_HEAD: "杂项",
   EXPERIMENTAL_DESC: `包括：默认的 LaTeX 公式，字段建议，绘图文件的类型标识符，OCR 等设置。`,
   EA_HEAD: "Excalidraw 自动化",
-  EA_DESC: 
+  EA_DESC:
     "ExcalidrawAutomate 是用于 Excalidraw 自动化脚本的 API，但是目前说明文档还不够完善，" +
     "建议阅读 <a href='https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/docs/API/ExcalidrawAutomate.d.ts'>ExcalidrawAutomate.d.ts</a> 文件源码，" +
     "参考 <a href='https://zsviczian.github.io/obsidian-excalidraw-plugin/'>ExcalidrawAutomate How-to</a> 网页（不过该网页" +
@@ -791,7 +799,7 @@ FILENAME_HEAD: "文件名",
   CJK_ASSETS_FOLDER_NAME: "CJK 字体文件夹（區分大小寫！）",
   CJK_ASSETS_FOLDER_DESC: `您可以在此设置 CJK 字体文件夹的位置。例如，您可以选择将其放置在 <code>Excalidraw/CJK Fonts</code> 下。<br><br>
     <strong>重要：</strong> 请勿将此文件夹设置为 Vault 根目录！请勿在此文件夹中放置其他字体。<br><br>
-    <strong>注意：</strong> 如果您使用 Obsidian Sync 并希望在设备之间同步这些字体文件，请确保 Obsidian Sync 设置为同步“所有其他文件类型”。`, 
+    <strong>注意：</strong> 如果您使用 Obsidian Sync 并希望在设备之间同步这些字体文件，请确保 Obsidian Sync 设置为同步“所有其他文件类型”。`,
   LOAD_CHINESE_FONTS_NAME: "启动时从文件加载中文字体",
   LOAD_JAPANESE_FONTS_NAME: "启动时从文件加载日文字体",
   LOAD_KOREAN_FONTS_NAME: "启动时从文件加载韩文字体",
@@ -806,7 +814,7 @@ FILENAME_HEAD: "文件名",
   TASKBONE_ENABLE_DESC: "启用意味着您同意 Taskbone <a href='https://www.taskbone.com/legal/terms/' target='_blank'>条款及细则</a> 以及 " +
     "<a href='https://www.taskbone.com/legal/privacy/' target='_blank'>隐私政策</a>。",
   TASKBONE_APIKEY_NAME: "Taskbone API Key",
-  TASKBONE_APIKEY_DESC: "Taskbone 的免费 API key 提供了一定数量的每月识别次数。如果您非常频繁地使用此功能，或者想要支持 " + 
+  TASKBONE_APIKEY_DESC: "Taskbone 的免费 API key 提供了一定数量的每月识别次数。如果您非常频繁地使用此功能，或者想要支持 " +
     "Taskbone 的开发者（您懂的，没有人能用爱发电，Taskbone 开发者也需要投入资金来维持这项 OCR 服务）您可以" +
     "到 <a href='https://www.taskbone.com/' target='_blank'>taskbone.com</a> 购买一个商用 API key。购买后请将它填写到旁边这个文本框里，替换掉原本自动生成的免费 API key。",
 
@@ -1000,4 +1008,86 @@ FILENAME_HEAD: "文件名",
   LINK_CLICK_POPOUT : "在弹出窗口中打开" ,
   LINK_CLICK_NEW_TAB : "在新标签页中打开" ,
   LINK_CLICK_MD_PROPS : "显示 Markdown 图片属性对话框（仅在嵌入 Markdown 文档为图片时适用）" ,
+
+// 导出对话框
+// 对话框和标签页
+EXPORTDIALOG_TITLE : "导出图形",
+EXPORTDIALOG_TAB_IMAGE : "图像",
+EXPORTDIALOG_TAB_PDF : "PDF",
+// 设置持久化
+EXPORTDIALOG_SAVE_SETTINGS : "将图像设置保存到文件 doc.properties 吗？",
+EXPORTDIALOG_SAVE_SETTINGS_SAVE : "保存为预设",
+EXPORTDIALOG_SAVE_SETTINGS_ONETIME : "仅本次使用",
+// 图像设置
+EXPORTDIALOG_IMAGE_SETTINGS : "图像",
+EXPORTDIALOG_IMAGE_DESC : "PNG 支持透明。外部文件可以包含 Excalidraw 场景数据。",
+EXPORTDIALOG_PADDING : "边距",
+EXPORTDIALOG_SCALE : "缩放",
+EXPORTDIALOG_CURRENT_PADDING : "当前边距：",
+EXPORTDIALOG_SIZE_DESC : "缩放会影响输出大小",
+EXPORTDIALOG_SCALE_VALUE : "缩放：",
+EXPORTDIALOG_IMAGE_SIZE : "大小：",
+// 主题和背景
+EXPORTDIALOG_EXPORT_THEME : "主题",
+EXPORTDIALOG_THEME_LIGHT : "浅色",
+EXPORTDIALOG_THEME_DARK : "深色",
+EXPORTDIALOG_BACKGROUND : "背景",
+EXPORTDIALOG_BACKGROUND_TRANSPARENT : "透明",
+EXPORTDIALOG_BACKGROUND_USE_COLOR : "使用场景颜色",
+// 选择
+EXPORTDIALOG_SELECTED_ELEMENTS : "导出",
+EXPORTDIALOG_SELECTED_ALL : "整个场景",
+EXPORTDIALOG_SELECTED_SELECTED : "仅选中部分",
+// 导出选项
+EXPORTDIALOG_EMBED_SCENE : "包含场景数据吗？",
+EXPORTDIALOG_EMBED_YES : "是",
+EXPORTDIALOG_EMBED_NO : "否",
+// PDF 设置
+EXPORTDIALOG_PDF_SETTINGS : "PDF",
+EXPORTDIALOG_PAGE_SIZE : "页面大小",
+EXPORTDIALOG_PAGE_ORIENTATION : "方向",
+EXPORTDIALOG_ORIENTATION_PORTRAIT : "纵向",
+EXPORTDIALOG_ORIENTATION_LANDSCAPE : "横向",
+EXPORTDIALOG_PDF_DPI : "图像质量 [DPI]",
+EXPORTDIALOG_PDF_FIT_TO_PAGE : "页面适配",
+EXPORTDIALOG_PDF_FIT_OPTION : "适配页面",
+EXPORTDIALOG_PDF_FIT_2_OPTION : "适配至 2 页" ,
+EXPORTDIALOG_PDF_FIT_4_OPTION : "适配至 4 页" ,
+EXPORTDIALOG_PDF_FIT_6_OPTION : "适配至 6 页" ,
+EXPORTDIALOG_PDF_FIT_8_OPTION : "适配至 8 页" ,
+EXPORTDIALOG_PDF_FIT_12_OPTION : "适配至 12 页" ,
+EXPORTDIALOG_PDF_FIT_16_OPTION : "适配至 16 页" ,
+EXPORTDIALOG_PDF_SCALE_OPTION : "使用图像缩放（可能跨多页）",
+EXPORTDIALOG_PDF_PAPER_COLOR : "纸张颜色",
+EXPORTDIALOG_PDF_PAPER_WHITE : "白色",
+EXPORTDIALOG_PDF_PAPER_SCENE : "使用场景颜色",
+EXPORTDIALOG_PDF_PAPER_CUSTOM : "自定义颜色",
+EXPORTDIALOG_PDF_ALIGNMENT : "页面位置",
+EXPORTDIALOG_PDF_ALIGN_CENTER : "居中",
+EXPORTDIALOG_PDF_ALIGN_TOP_LEFT : "左上角",
+EXPORTDIALOG_PDF_ALIGN_TOP_CENTER : "顶部居中",
+EXPORTDIALOG_PDF_ALIGN_TOP_RIGHT : "右上角",
+EXPORTDIALOG_PDF_ALIGN_BOTTOM_LEFT : "左下角",
+EXPORTDIALOG_PDF_ALIGN_BOTTOM_CENTER : "底部居中",
+EXPORTDIALOG_PDF_ALIGN_BOTTOM_RIGHT : "右下角",
+EXPORTDIALOG_PDF_MARGIN : "边距",
+EXPORTDIALOG_PDF_MARGIN_NONE : "无",
+EXPORTDIALOG_PDF_MARGIN_TINY : "小",
+EXPORTDIALOG_PDF_MARGIN_NORMAL : "正常",
+EXPORTDIALOG_SAVE_PDF_SETTINGS : "保存 PDF 设置",
+EXPORTDIALOG_SAVE_CONFIRMATION : "PDF 配置已保存为插件默认设置",
+// 按钮
+EXPORTDIALOG_PNGTOFILE : "导出 PNG 文件",
+EXPORTDIALOG_SVGTOFILE : "导出 SVG 文件",
+EXPORTDIALOG_PNGTOVAULT : "PNG 保存到 Vault",
+EXPORTDIALOG_SVGTOVAULT : "SVG 保存到 Vault",
+EXPORTDIALOG_EXCALIDRAW : "Excalidraw",
+EXPORTDIALOG_PNGTOCLIPBOARD : "PNG 复制到剪贴板",
+EXPORTDIALOG_SVGTOCLIPBOARD : "SVG 复制到剪贴板",
+EXPORTDIALOG_PDF : "导出 PDF 文件",
+EXPORTDIALOG_PDFTOVAULT : "PDF 保存到 Vault",
+
+EXPORTDIALOG_PDF_PROGRESS_NOTICE : "正在导出页面" ,
+EXPORTDIALOG_PDF_PROGRESS_IMAGE : "的图像" ,
+EXPORTDIALOG_PDF_PROGRESS_DONE : "导出完成" ,
 };

src/shared/CropImage.ts

@@ -4,11 +4,36 @@ import { Mutable } from "@zsviczian/excalidraw/types/excalidraw/utility-types";
 import { Notice } from "obsidian";
 
 import { getEA } from "src/core";
-import { ExcalidrawAutomate, cloneElement } from "src/shared/ExcalidrawAutomate";
+import { ExcalidrawAutomate } from "src/shared/ExcalidrawAutomate";
+import { cloneElement } from "src/utils/excalidrawAutomateUtils";
 import { ExportSettings } from "src/view/ExcalidrawView";
 import { nanoid } from "src/constants/constants";
 import { svgToBase64 } from "../utils/utils";
 
+/**
+ * Creates a masked image from an Excalidraw scene.
+ * 
+ * The scene must contain:
+ * - One element.type="frame" element that defines the crop area
+ * - One or more element.type="image" elements
+ * - Zero or more non-image shape elements (rectangles, ellipses etc) that define the mask
+ * 
+ * The class splits the scene into two parts:
+ * 1. Images (managed in imageEA)
+ * 2. Mask shapes (managed in maskEA)
+ * 
+ * A transparent rectangle matching the combined bounding box is added to both
+ * imageEA and maskEA to ensure consistent sizing between image and mask.
+ * 
+ * For performance, if there is only one image, it is not rotated, and
+ * its size matches the bounding box,
+ * the image data is used directly from cache rather than regenerating.
+ * 
+ * @example
+ * const cropper = new CropImage(elements, files);
+ * const pngBlob = await cropper.getCroppedPNG();
+ * cropper.destroy();
+ */
 export class CropImage {
   private imageEA: ExcalidrawAutomate;
   private maskEA: ExcalidrawAutomate;
@@ -106,10 +131,15 @@ export class CropImage {
       withTheme: false,
       isMask: false,
     }
-    const isRotated = this.imageEA.getElements().some(el=>el.type === "image" && el.angle !== 0);
-    const images = Object.values(this.imageEA.imagesDict);
-    if(!isRotated && (images.length === 1)) {
-      return images[0].dataURL;
+    const images = this.imageEA.getElements().filter(el=>el.type === "image" && el.isDeleted === false);
+    const isRotated = images.some(el=>el.angle !== 0);
+    const imageDataURLs = Object.values(this.imageEA.imagesDict);
+    if(!isRotated && images.length === 1 && imageDataURLs.length === 1) {
+      const { width, height } = this.bbox;
+      if(images[0].width === width && images[0].height === height) {
+        //get image from the cache if mask is not bigger than the image, and if there is a single image element
+        return imageDataURLs[0].dataURL;
+      }
     }
     return await this.imageEA.createPNGBase64(null,1,exportSettings,null,null,0);
   }

src/shared/Dialogs/ExportDialog.ts

@@ -1,11 +1,16 @@
 import { ExcalidrawImperativeAPI } from "@zsviczian/excalidraw/types/excalidraw/types";
-import { Modal, Setting, TFile } from "obsidian";
+import { Modal, Notice, Setting, TFile, ButtonComponent } from "obsidian";
 import { getEA } from "src/core";
 import { DEVICE } from "src/constants/constants";
 import { ExcalidrawAutomate } from "src/shared/ExcalidrawAutomate";
 import ExcalidrawView from "src/view/ExcalidrawView";
 import ExcalidrawPlugin from "src/core/main";
 import { fragWithHTML, getExportPadding, getExportTheme, getPNGScale, getWithBackground, shouldEmbedScene } from "src/utils/utils";
+import { PageOrientation, PageSize, PDFPageAlignment, PDFPageMarginString, exportSVGToClipboard } from "src/utils/exportUtils";
+import { t } from "src/lang/helpers";
+import { PDFExportSettings, PDFExportSettingsComponent } from "./PDFExportSettingsComponent";
+
+
 
 export class ExportDialog extends Modal {
   private ea: ExcalidrawAutomate;
@@ -27,6 +32,17 @@ export class ExportDialog extends Modal {
   public embedScene: boolean;
   public exportSelectedOnly: boolean;
   public saveToVault: boolean;
+  public pageSize: PageSize = "A4";
+  public pageOrientation: PageOrientation = "portrait";
+  private activeTab: "image" | "pdf" = "image";
+  private contentContainer: HTMLDivElement;
+  private buttonContainerRow1: HTMLDivElement;
+  private buttonContainerRow2: HTMLDivElement;
+  public fitToPage: number = 1;
+  public paperColor: "white" | "scene" | "custom" = "white";
+  public customPaperColor: string = "#ffffff";
+  public alignment: PDFPageAlignment = "center";
+  public margin: PDFPageMarginString = "normal";
 
   constructor(
     private plugin: ExcalidrawPlugin,
@@ -44,6 +60,15 @@ export class ExportDialog extends Modal {
     this.exportSelectedOnly = false;
     this.saveToVault = true;
     this.transparent = !getWithBackground(this.plugin, this.file);
+
+    this.pageSize = plugin.settings.pdfSettings.pageSize;
+    this.pageOrientation = plugin.settings.pdfSettings.pageOrientation;
+    this.fitToPage = plugin.settings.pdfSettings.fitToPage;
+    this.paperColor = plugin.settings.pdfSettings.paperColor;
+    this.customPaperColor = plugin.settings.pdfSettings.customPaperColor;
+    this.alignment = plugin.settings.pdfSettings.alignment;
+    this.margin = plugin.settings.pdfSettings.margin;
+
     this.saveSettings = false;
   }
 
@@ -62,7 +87,7 @@ export class ExportDialog extends Modal {
 
   onOpen(): void {
     this.containerEl.classList.add("excalidraw-release");
-    this.titleEl.setText(`Export Image`);
+    this.titleEl.setText(t("EXPORTDIALOG_TITLE"));
     this.hasSelectedElements = this.view.getViewSelectedElements().length > 0;
     //@ts-ignore
     this.selectedOnlySetting.setVisibility(this.hasSelectedElements);
@@ -73,28 +98,100 @@ export class ExportDialog extends Modal {
   }
 
   async createForm() {
-    let scaleSetting:Setting;
-    let paddingSetting: Setting;
+    if(DEVICE.isDesktop) {
+      // Create tab container
+      const tabContainer = this.contentEl.createDiv("nav-buttons-container");
+      const imageTab = tabContainer.createEl("button", { 
+        text: t("EXPORTDIALOG_TAB_IMAGE"),
+        cls: `nav-button ${this.activeTab === "image" ? "is-active" : ""}`
+      });
 
-    this.contentEl.createEl("h1",{text: "Image settings"});
-    this.contentEl.createEl("p",{text: "Transparency only affects PNGs. Excalidraw files can only be exported outside the Vault. PNGs copied to clipboard may not include the scene."})
+      
+      const pdfTab = tabContainer.createEl("button", { 
+        text: t("EXPORTDIALOG_TAB_PDF"),
+        cls: `nav-button ${this.activeTab === "pdf" ? "is-active" : ""}`
+      });
+
+      // Tab click handlers
+      imageTab.onclick = () => {
+        this.activeTab = "image";
+        imageTab.addClass("is-active");
+        pdfTab.removeClass("is-active");
+        this.renderContent();
+      };
+
+      pdfTab.onclick = () => {
+        this.activeTab = "pdf";
+        pdfTab.addClass("is-active");
+        imageTab.removeClass("is-active");
+        this.renderContent();
+      };
+    }
+
+    // Create content container
+    this.contentContainer = this.contentEl.createDiv();
+    this.buttonContainerRow1 = this.contentEl.createDiv({cls: "excalidraw-export-buttons-div"});
+    this.buttonContainerRow2 = this.contentEl.createDiv({cls: "excalidraw-export-buttons-div"});
+    this.buttonContainerRow2.style.marginTop = "10px";
+
+    this.renderContent();
+  }
+
+  private createSaveSettingsDropdown() {
+    new Setting(this.contentContainer)
+      .setName(t("EXPORTDIALOG_SAVE_SETTINGS"))
+      .addDropdown(dropdown => 
+        dropdown
+          .addOption("save", t("EXPORTDIALOG_SAVE_SETTINGS_SAVE"))
+          .addOption("one-time", t("EXPORTDIALOG_SAVE_SETTINGS_ONETIME"))
+          .setValue(this.saveSettings ? "save" : "one-time")
+          .onChange(value => {
+            this.saveSettings = value === "save";
+          })
+      );
+  }
+
+  private renderContent() {
+    this.contentContainer.empty();
+    this.buttonContainerRow1.empty();
+    this.buttonContainerRow2.empty();
+
+    if (this.activeTab === "image") {
+      this.createImageSettings();
+      this.createExportSettings();
+      this.createImageButtons();
+    } else {
+      this.createImageSettings();
+      this.createPDFSettings();
+      this.createPDFButton();
+    }
+  }
+  
+  private createImageSettings() {
+    let scaleSetting:Setting;
+    let paddingSetting: Setting;   
+
+    this.contentContainer.createEl("h1",{text: t("EXPORTDIALOG_IMAGE_SETTINGS")});
+    this.contentContainer.createEl("p",{text: t("EXPORTDIALOG_IMAGE_DESC")})
+
+    this.createSaveSettingsDropdown();
 
     const size = ():DocumentFragment => {
       const width = Math.round(this.scale*this.boundingBox.width + this.padding*2);
       const height = Math.round(this.scale*this.boundingBox.height + this.padding*2);
-      return fragWithHTML(`The lager the scale, the larger the image.<br>Scale: <b>${this.scale}</b><br>Image size: <b>${width}x${height}</b>`);
+      return fragWithHTML(`${t("EXPORTDIALOG_SIZE_DESC")}<br>${t("EXPORTDIALOG_SCALE_VALUE")} <b>${this.scale}</b><br>${t("EXPORTDIALOG_IMAGE_SIZE")} <b>${width}x${height}</b>`);
     }
 
     const padding = ():DocumentFragment => {
-      return fragWithHTML(`Current image padding is <b>${this.padding}</b>`);
+      return fragWithHTML(`${t("EXPORTDIALOG_CURRENT_PADDING")} <b>${this.padding}</b>`);
     }
 
-    paddingSetting = new Setting(this.contentEl)
-      .setName("Image padding")
+    paddingSetting = new Setting(this.contentContainer)
+      .setName(t("EXPORTDIALOG_PADDING"))
       .setDesc(padding())
       .addSlider(slider => {
         slider
-          .setLimits(0,50,1)
+          .setLimits(0,100,1)
           .setValue(this.padding)
           .onChange(value => {
             this.padding = value;
@@ -103,12 +200,12 @@ export class ExportDialog extends Modal {
           })
         })
     
-    scaleSetting = new Setting(this.contentEl)
-      .setName("PNG Scale")
+    scaleSetting = new Setting(this.contentContainer)
+      .setName(t("EXPORTDIALOG_SCALE"))
       .setDesc(size())
       .addSlider(slider => 
         slider
-          .setLimits(0.5,5,0.5)
+          .setLimits(0.2,7,0.1)
           .setValue(this.scale)
           .onChange(value => {
             this.scale = value;
@@ -116,109 +213,199 @@ export class ExportDialog extends Modal {
           })
       )
   
-    new Setting(this.contentEl)
-      .setName("Export theme")
+    new Setting(this.contentContainer)
+      .setName(t("EXPORTDIALOG_EXPORT_THEME"))
       .addDropdown(dropdown => 
         dropdown
-          .addOption("light","Light")
-          .addOption("dark","Dark")
+          .addOption("light", t("EXPORTDIALOG_THEME_LIGHT"))
+          .addOption("dark", t("EXPORTDIALOG_THEME_DARK"))
           .setValue(this.theme)
           .onChange(value => {
             this.theme = value;
           })
       )
 
-    new Setting(this.contentEl)
-      .setName("Background color")
+    new Setting(this.contentContainer)
+      .setName(t("EXPORTDIALOG_BACKGROUND"))
       .addDropdown(dropdown => 
         dropdown
-          .addOption("transparent","Transparent")
-          .addOption("with-color","Use scene background color")
+          .addOption("transparent", t("EXPORTDIALOG_BACKGROUND_TRANSPARENT"))
+          .addOption("with-color", t("EXPORTDIALOG_BACKGROUND_USE_COLOR"))
           .setValue(this.transparent?"transparent":"with-color")
           .onChange(value => {
             this.transparent = value === "transparent";
           })
       )
-    
-    new Setting(this.contentEl)
-      .setName("Save or one-time settings?")
+
+    this.selectedOnlySetting = new Setting(this.contentContainer)
+      .setName(t("EXPORTDIALOG_SELECTED_ELEMENTS"))
       .addDropdown(dropdown => 
         dropdown
-          .addOption("save","Save these settings as the preset for this image")
-          .addOption("one-time","These are one-time settings")
-          .setValue(this.saveSettings?"save":"one-time")
+          .addOption("all", t("EXPORTDIALOG_SELECTED_ALL"))
+          .addOption("selected", t("EXPORTDIALOG_SELECTED_SELECTED"))
+          .setValue(this.exportSelectedOnly?"selected":"all")
           .onChange(value => {
-            this.saveSettings = value === "save";
+            this.exportSelectedOnly = value === "selected";
           })
-      )
+      );
+  }
 
-    this.contentEl.createEl("h1",{text:"Export settings"});
-
-    new Setting(this.contentEl)
-      .setName("Embed the Excalidraw scene in the exported file?")
+  private createExportSettings() {
+    new Setting(this.contentContainer)
+      .setName(t("EXPORTDIALOG_EMBED_SCENE"))
       .addDropdown(dropdown => 
         dropdown
-          .addOption("embed","Embed scene")
-          .addOption("no-embed","Do not embed scene")
+          .addOption("embed",t("EXPORTDIALOG_EMBED_YES"))
+          .addOption("no-embed",t("EXPORTDIALOG_EMBED_NO"))
           .setValue(this.embedScene?"embed":"no-embed")
           .onChange(value => {
             this.embedScene = value === "embed";
           })
       )
+  }
 
+  private createPDFSettings() {
+    if (!DEVICE.isDesktop) return;
+
+    this.contentContainer.createEl("h1", { text: t("EXPORTDIALOG_PDF_SETTINGS") });
+
+    const pdfSettings: PDFExportSettings = {
+      pageSize: this.pageSize,
+      pageOrientation: this.pageOrientation,
+      fitToPage: this.fitToPage,
+      paperColor: this.paperColor,
+      customPaperColor: this.customPaperColor,
+      alignment: this.alignment,
+      margin: this.margin,
+    };
+
+    new PDFExportSettingsComponent(
+      this.contentContainer,
+      pdfSettings,
+      () => {
+        this.pageSize = pdfSettings.pageSize;
+        this.pageOrientation = pdfSettings.pageOrientation;
+        this.fitToPage = pdfSettings.fitToPage;
+        this.paperColor = pdfSettings.paperColor;
+        this.customPaperColor = pdfSettings.customPaperColor;
+        this.alignment = pdfSettings.alignment;
+        this.margin = pdfSettings.margin;
+      }
+    ).render();
+  }
+
+  private createImageButtons() {
     if(DEVICE.isDesktop) {
-      new Setting(this.contentEl)
-      .setName("Where to save the image?")
-      .addDropdown(dropdown => 
-        dropdown
-          .addOption("vault","Save image to your Vault")
-          .addOption("outside","Export image outside your Vault")
-          .setValue(this.saveToVault?"vault":"outside")
-          .onChange(value => {
-            this.saveToVault = value === "vault";
-          })
-      )
-    }
-
-    this.selectedOnlySetting = new Setting(this.contentEl)
-      .setName("Export entire scene or just selected elements?")
-      .addDropdown(dropdown => 
-        dropdown
-          .addOption("all","Export entire scene")
-          .addOption("selected","Export selected elements")
-          .setValue(this.exportSelectedOnly?"selected":"all")
-          .onChange(value => {
-            this.exportSelectedOnly = value === "selected";
-          })
-      )
-
-
-    const div = this.contentEl.createDiv({cls: "excalidraw-prompt-buttons-div"});
-    const bPNG = div.createEl("button", { text: "PNG to File", cls: "excalidraw-prompt-button"});
-    bPNG.onclick = () => {
-      this.saveToVault 
-        ? this.view.savePNG(this.view.getScene(this.hasSelectedElements && this.exportSelectedOnly))
-        : this.view.exportPNG(this.embedScene,this.hasSelectedElements && this.exportSelectedOnly);
-      this.close();
-    };
-    const bSVG = div.createEl("button", { text: "SVG to File", cls: "excalidraw-prompt-button" });
-    bSVG.onclick = () => {
-      this.saveToVault
-        ? this.view.saveSVG(this.view.getScene(this.hasSelectedElements && this.exportSelectedOnly))
-        : this.view.exportSVG(this.embedScene,this.hasSelectedElements && this.exportSelectedOnly);
-      this.close();
-    };
-    const bExcalidraw = div.createEl("button", { text: "Excalidraw", cls: "excalidraw-prompt-button" });
-    bExcalidraw.onclick = () => {
-      this.view.exportExcalidraw(this.hasSelectedElements && this.exportSelectedOnly);
-      this.close();
-    };
-    if(DEVICE.isDesktop) {
-      const bPNGClipboard = div.createEl("button", { text: "PNG to Clipboard", cls: "excalidraw-prompt-button" });
-      bPNGClipboard.onclick = () => {
-        this.view.exportPNGToClipboard(this.embedScene, this.hasSelectedElements && this.exportSelectedOnly);
+      const bPNG = this.buttonContainerRow1.createEl("button", { 
+        text: t("EXPORTDIALOG_PNGTOFILE"), 
+        cls: "excalidraw-export-button"
+      });
+      bPNG.onclick = () => {
+        this.view.exportPNG(this.embedScene, this.hasSelectedElements && this.exportSelectedOnly);
         this.close();
       };
     }
+
+    const bPNGVault = this.buttonContainerRow1.createEl("button", { 
+      text: t("EXPORTDIALOG_PNGTOVAULT"), 
+      cls: "excalidraw-export-button"
+    });
+    bPNGVault.onclick = () => {
+      this.view.savePNG(this.view.getScene(this.hasSelectedElements && this.exportSelectedOnly));
+      this.close();
+    };
+
+    const bPNGClipboard = this.buttonContainerRow1.createEl("button", { 
+      text: t("EXPORTDIALOG_PNGTOCLIPBOARD"), 
+      cls: "excalidraw-export-button"
+    });
+    bPNGClipboard.onclick = async () => {
+      this.view.exportPNGToClipboard(this.embedScene, this.hasSelectedElements && this.exportSelectedOnly);
+      this.close();
+    };
+
+    if(DEVICE.isDesktop) {
+      const bExcalidraw = this.buttonContainerRow2.createEl("button", { 
+        text: t("EXPORTDIALOG_EXCALIDRAW"), 
+        cls: "excalidraw-export-button" 
+      });
+      bExcalidraw.onclick = () => {
+        this.view.exportExcalidraw();
+        this.close();
+      };
+
+      const bSVG = this.buttonContainerRow2.createEl("button", { 
+        text: t("EXPORTDIALOG_SVGTOFILE"), 
+        cls: "excalidraw-export-button" 
+      });
+      bSVG.onclick = () => {
+        this.view.exportSVG(this.embedScene, this.hasSelectedElements && this.exportSelectedOnly);
+        this.close();
+      };
+    }
+
+    const bSVGVault = this.buttonContainerRow2.createEl("button", { 
+      text: t("EXPORTDIALOG_SVGTOVAULT"), 
+      cls: "excalidraw-export-button" 
+    });
+    bSVGVault.onclick = () => {
+      this.view.saveSVG(this.view.getScene(this.hasSelectedElements && this.exportSelectedOnly));
+      this.close();
+    };
+
+    const bSVGClipboard = this.buttonContainerRow2.createEl("button", { 
+      text: t("EXPORTDIALOG_SVGTOCLIPBOARD"), 
+      cls: "excalidraw-export-button" 
+    });
+    bSVGClipboard.onclick = async () => {
+      const svg = await this.view.getSVG(this.embedScene, this.hasSelectedElements && this.exportSelectedOnly);
+      exportSVGToClipboard(svg);
+      this.close();
+    };
+  }
+
+  private createPDFButton() {
+    const bSavePDFSettings = this.buttonContainerRow1.createEl("button",
+      { text: t("EXPORTDIALOG_SAVE_PDF_SETTINGS"), cls: "excalidraw-export-button" }
+    );
+    bSavePDFSettings.onclick = async () => {
+      //in case sync loaded a new version of settings in the mean time
+      await this.plugin.loadSettings();
+      this.plugin.settings.pdfSettings = {
+        pageSize: this.pageSize,
+        pageOrientation: this.pageOrientation,
+        fitToPage: this.fitToPage,
+        paperColor: this.paperColor,
+        customPaperColor: this.customPaperColor,
+        alignment: this.alignment,
+        margin: this.margin,
+      };
+      await this.plugin.saveSettings();
+      new Notice(t("EXPORTDIALOG_SAVE_CONFIRMATION"));
+    };
+
+    if (!DEVICE.isDesktop) return;
+    const bPDFExport = this.buttonContainerRow1.createEl("button", { 
+      text: t("EXPORTDIALOG_PDF"), 
+      cls: "excalidraw-export-button" 
+    });
+    bPDFExport.onclick = () => {
+      this.view.exportPDF(
+        false,
+        this.hasSelectedElements && this.exportSelectedOnly,
+        this.pageSize,
+        this.pageOrientation
+      );
+      this.close();
+    };
+  }
+
+  public getPaperColor(): string {
+    switch (this.paperColor) {
+      case "white": return "#ffffff";
+      case "scene": return this.api.getAppState().viewBackgroundColor;
+      case "custom": return this.customPaperColor;
+      default: return "#ffffff";
+    }
   }
 }

src/shared/Dialogs/Messages.ts

@@ -17,6 +17,119 @@ 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://storage.ko-fi.com/cdn/kofi6.png?v=6" border="0" alt="Buy Me a Coffee at ko-fi.com"  height=45></a></div>
 `,
+"2.7.5":`
+## Fixed
+- PDF export scenario described in [#2184](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2184)
+- Elbow arrows do not work within frames [#2187](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2187)
+- Embedding images into Excalidraw with areaRef links did not work as expected due to conflicting SVG viewbox and width and height values
+- Can't exit full-screen mode in popout windows using the Command Palette toggle action [#2188](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2188)
+- If the image mask extended beyond the image in "Mask and Crop" image mode, the mask got misaligned from the image.
+- PDF image embedding fixes that impacted some PDF files (not all):
+    - When cropping the PDF page in the scene (by double-clicking the image to crop), the size and position of the PDF cutout drifted.
+    - Using PDF++ there was a small offset in the position of the cutout in PDF++ and the image in Excalidraw.
+ - Updated a number of scripts including Split Ellipse, Select Similar Elements, and Concatenate Lines
+
+## New in ExcalidrawAutomate
+${String.fromCharCode(96,96,96)}
+  /**
+   * Add, modify, or delete keys in element.customData and preserve existing keys.
+   * Creates customData={} if it does not exist.
+   * Takes the element id for an element in ea.elementsDict and the newData to add or modify.
+   * To delete keys set key value in newData to undefined. So {keyToBeDeleted:undefined} will be deleted.
+   * @param id
+   * @param newData 
+   * @returns undefined if element does not exist in elementsDict, returns the modified element otherwise.
+   */
+  public addAppendUpdateCustomData(id:string, newData: Partial<Record<string, unknown>>);
+${String.fromCharCode(96,96,96)}
+`,
+"2.7.4":`
+## Fixed
+- Regression from 2.7.3 where image fileId got overwritten in some cases
+- White flash when opening a dark drawing [#2178](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2178)
+`,
+"2.7.3":`
+<div class="excalidraw-videoWrapper"><div>
+<iframe src="https://www.youtube.com/embed/ISuORbVKyhQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div></div>
+
+## Fixed
+- Toggling image size anchoring on and off by modifying the image link did not update the image in the view until the user forced saved it or closed and opened the drawing again. This was a side-effect of the less frequent view save introduced in 2.7.1
+
+## New
+- **Shade Master Script**: A new script that allows you to modify the color lightness, hue, saturation, and transparency of selected Excalidraw elements, SVG images, and nested Excalidraw drawings. When a single image is selected, you can map colors individually. The original image remains unchanged, and a mapping table is added under ${String.fromCharCode(96)}## Embedded Files${String.fromCharCode(96)} for SVG and nested drawings. This helps maintain links between drawings while allowing different color themes.
+- New Command Palette Command: "Duplicate selected image with a different image ID". Creates a copy of the selected image with a new image ID. This allows you to add multiple color mappings to the same image. In the scene, the image will be treated as if a different image, but loaded from the same file in the Vault.
+
+## QoL Improvements
+- New setting under ${String.fromCharCode(96)}Embedding Excalidraw into your notes and Exporting${String.fromCharCode(96)} > ${String.fromCharCode(96)}Image Caching and rendering optimization${String.fromCharCode(96)}. You can now set the number of concurrent workers that render your embedded images. Increasing the number will increase the speed but temporarily reduce the responsiveness of your system in case of large drawings.
+- Moved pen-related settings under ${String.fromCharCode(96)}Excalidraw appearance and behavior${String.fromCharCode(96)} to their sub-heading called ${String.fromCharCode(96)}Pen${String.fromCharCode(96)}.
+- Minor error fixing and performance optimizations when loading and updating embedded images.
+- Color maps in ${String.fromCharCode(96)}## Embedded Files${String.fromCharCode(96)} may now include color keys "stroke" and "fill". If set, these will change the fill and stroke attributes of the SVG root element of the relevant file.
+
+## New in ExcalidrawAutomate
+${String.fromCharCode(96,96,96)}ts
+// Updates the color map of an SVG image element in the view. If a ColorMap is provided, it will be used directly.
+// If an SVGColorInfo is provided, it will be converted to a ColorMap.
+// The view will be marked as dirty and the image will be reset using the color map.
+updateViewSVGImageColorMap(
+  elements: ExcalidrawImageElement | ExcalidrawImageElement[],
+  colors: ColorMap | SVGColorInfo | ColorMap[] | SVGColorInfo[]
+): Promise<void>;
+
+// Retrieves the color map for an image element.
+// The color map contains information about the mapping of colors used in the image.
+// If the element already has a color map, it will be returned.
+getColorMapForImageElement(el: ExcalidrawElement): ColorMap;
+
+// Retrieves the color map for an SVG image element.
+// The color map contains information about the fill and stroke colors used in the SVG.
+// If the element already has a color map, it will be merged with the colors extracted from the SVG.
+getColorMapForImgElement(el: ExcalidrawElement): Promise<SVGColorInfo>;
+
+// Extracts the fill (background) and stroke colors from an Excalidraw file and returns them as an SVGColorInfo.
+getColosFromExcalidrawFile(file:TFile, img: ExcalidrawImageElement): Promise<SVGColorInfo>;
+
+// Extracts the fill and stroke colors from an SVG string and returns them as an SVGColorInfo.
+getColorsFromSVGString(svgString: string): SVGColorInfo;
+
+// upgraded the addImage function.
+// 1. It now accepts an object as the input parameter, making your scripts more readable
+// 2. AddImageOptions now includes colorMap as an optional parameter, this will only have an effect in case of SVGs and nested Excalidraws
+// 3. The API function is backwards compatible, but I recommend new implementations to use the object based input
+addImage(opts: AddImageOptions}): Promise<string>;
+
+interface AddImageOptions {
+  topX: number;
+  topY: number;
+  imageFile: TFile | string;
+  scale?: boolean; 
+  anchor?: boolean;
+  colorMap?: ColorMap;
+}
+
+type SVGColorInfo = Map<string, {
+  mappedTo: string;
+  fill: boolean;
+  stroke: boolean;
+}>;
+
+interface ColorMap {
+  [color: string]: string;
+};
+${String.fromCharCode(96,96,96)}
+`,
+"2.7.2":`
+## Fixed
+- The plugin did not load on **iOS 16 and older**. [#2170](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2170)
+- Added empty line between ${String.fromCharCode(96)}# Excalidraw Data${String.fromCharCode(96)} and ${String.fromCharCode(96)}## Text Elements${String.fromCharCode(96)}. This will now follow **correct markdown linting**. [#2168](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2168)
+- Adding an **embeddable** to view did not **honor the element background and element stroke colors**, even if it was configured in plugin settings. [#2172](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2172)
+- **Deconstruct selected elements script** did not copy URLs and URIs for images embedded from outside Obsidian. Please update your script from the script library. 
+- When **rearranging tabs in Obsidian**, e.g. having two tabs side by side, and moving one of them to another location, if the tab was an Excalidraw tab, it appeared as non-responsive after the move, until the tab was resized.
+
+## Source Code Refactoring
+- Updated filenames, file locations, and file name letter-casing across the project
+- Extracted onDrop, onDragover, etc. handlers to DropManger in ExcalidrawView
+`,
 "2.7.1":`
 ## Fixed
 - Deleting excalidraw file from file system while it is open in fullscreen mode in Obsidian causes Obsidian to be stuck in full-screen view [#2161](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2161)
@@ -78,56 +191,4 @@ I misread a line in the Excalidraw package code... ended up breaking image loadi
 ## Fixed
 - Error saving when cropping images embedded from a URL (not from a file in the Vault) [#2096](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2096)
 `,
-"2.6.3":`
-<div class="excalidraw-videoWrapper"><div>
-<iframe src="https://www.youtube.com/embed/OfUWAvCgbXk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-</div></div>
-
-## New
-- **Cropping PDF Pages**  
-  - Improved PDF++ cropping: You can now double-click cropped images in Excalidraw to adjust the crop area, which will also appear as a highlight in PDF++. This feature applies to PDF cut-outs created in version 2.6.3 and beyond.
-- **Insert Last Active PDF Page as Image**  
-  - New command palette action lets you insert the currently active PDF page into Excalidraw. Ideal for setups with PDF and Excalidraw side-by-side. You can assign a hotkey for quicker access. Cropped areas in Excalidraw will show as highlights in PDF++.
-
-## Fixed
-- Fixed **Close Settings** button toggle behavior [#2085](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2085)
-- Resolved text wrapping issues causing layout shifts due to trailing whitespaces [#8714](https://github.com/excalidraw/excalidraw/pull/8714)
-- **Aspect Ratio and Size Reset** commands now function correctly with cropped images.
-- **Cropped Drawings**: Adjustments to cropped Excalidraw drawings are now supported. However, for nested Excalidraw drawings, it's recommended to use area, group, and frame references instead of cropping.
-
-## Refactoring
-- Further font loading optimizations on Excalidraw.com; no impact expected in Obsidian [#8693](https://github.com/excalidraw/excalidraw/pull/8693)
-- Text wrapping improvements [#8715](https://github.com/excalidraw/excalidraw/pull/8715)
-- Plugin initiation and error handling
-`,
-"2.6.2":`
-## Fixed
-- Image scaling issue with SVGs that miss the width and height property. [#8729](https://github.com/excalidraw/excalidraw/issues/8729)
-`,
-"2.6.1":`
-## New
-- Pen-mode single-finger panning enabled also for the "Selection" tool.
-- You can disable pen-mode single-finger panning in Plugin Settings under Excalidraw Appearance and Behavior [#2080](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2080)
-
-## Fixed
-- Text tool did not work in pen-mode using finger [#2080](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2080)
-- Pasting images to Excalidraw from the web resulted in filenames of "image_1.png", "image_2.png" instead of "Pasted Image TIMESTAMP" [#2081](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2081)
-`,
-"2.6.0":`
-## Performance
-- Much faster plugin initialization. Down from 1000-3000ms to 100-300ms. According to my testing speed varies on a wide spectrum depending on device, size of Vault and other plugins being loaded. I measured values ranging from 84ms up to 782ms [#2068](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2068)
-- Faster loading of scenes with many embedded illustrations or PDF pages.
-- SVG export results in even smaller files by further optimizing which characters are included in the embedded fonts. [#8641](https://github.com/excalidraw/excalidraw/pull/8641)
-
-## New
-- Image cropping tool. Double click the image to crop it. [#8613](https://github.com/excalidraw/excalidraw/pull/8613)
-- Single finger panning in pen mode.
-- Native handwritten CJK Font support [8530](https://github.com/excalidraw/excalidraw/pull/8530) 
-  - Created a new **Fonts** section in settings. This includes configuration of the "Local Font" and downloading of the CJK fonts in case you need them offline.
-- Option under **Appearance and Behavior / Link Click** to disable double-click link navigation in view mode. [#2075](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2075)
-- New RU translation 🙏[@tovBender](https://github.com/tovBender)
-
-## Updated
-- CN translation 🙏[@dmscode](https://github.com/dmscode)
-`,
 };

src/shared/Dialogs/PDFExportSettingsComponent.ts

@@ -0,0 +1,146 @@
+import { Setting } from "obsidian";
+import { PageOrientation, PageSize, PDFPageAlignment, PDFPageMarginString, STANDARD_PAGE_SIZES } from "src/utils/exportUtils";
+import { t } from "src/lang/helpers";
+
+export interface PDFExportSettings {
+  pageSize: PageSize;
+  pageOrientation: PageOrientation;
+  fitToPage: number;
+  paperColor: "white" | "scene" | "custom";
+  customPaperColor: string;
+  alignment: PDFPageAlignment;
+  margin: PDFPageMarginString;
+}
+
+export class PDFExportSettingsComponent {
+  constructor(
+    private contentEl: HTMLElement,
+    private settings: PDFExportSettings,
+    private update?: Function,
+  ) {
+    if (!update) this.update = () => {};
+  }
+
+  render() {
+    const pageSizeOptions: Record<string, string> = Object.keys(STANDARD_PAGE_SIZES)
+      .reduce((acc, key) => ({
+        ...acc,
+        [key]: key
+      }), {});
+
+    new Setting(this.contentEl)
+      .setName(t("EXPORTDIALOG_PAGE_SIZE"))
+      .addDropdown(dropdown => 
+        dropdown
+          .addOptions(pageSizeOptions)
+          .setValue(this.settings.pageSize)
+          .onChange(value => {
+            this.settings.pageSize = value as PageSize;
+            this.update();
+          })
+      );
+
+    new Setting(this.contentEl)
+      .setName(t("EXPORTDIALOG_PAGE_ORIENTATION"))
+      .addDropdown(dropdown => 
+        dropdown
+          .addOptions({
+            "portrait": t("EXPORTDIALOG_ORIENTATION_PORTRAIT"),
+            "landscape": t("EXPORTDIALOG_ORIENTATION_LANDSCAPE")
+          })
+          .setValue(this.settings.pageOrientation)
+          .onChange(value => {
+            this.settings.pageOrientation = value as PageOrientation;
+            this.update();
+          })
+      );
+    
+    new Setting(this.contentEl)
+      .setName(t("EXPORTDIALOG_PDF_FIT_TO_PAGE"))
+      .addDropdown(dropdown => 
+        dropdown
+          .addOptions({
+            "scale": t("EXPORTDIALOG_PDF_SCALE_OPTION"),
+            "fit": t("EXPORTDIALOG_PDF_FIT_OPTION"),
+            "fit-2": t("EXPORTDIALOG_PDF_FIT_2_OPTION"),
+            "fit-4": t("EXPORTDIALOG_PDF_FIT_4_OPTION"),
+            "fit-6": t("EXPORTDIALOG_PDF_FIT_6_OPTION"),
+            "fit-8": t("EXPORTDIALOG_PDF_FIT_8_OPTION"),
+            "fit-12": t("EXPORTDIALOG_PDF_FIT_12_OPTION"),
+            "fit-16": t("EXPORTDIALOG_PDF_FIT_16_OPTION")
+          })
+          .setValue(this.settings.fitToPage === 1 ? "fit" : 
+            (typeof this.settings.fitToPage === "number" ? `fit-${this.settings.fitToPage}` : "scale"))
+          .onChange(value => {
+            this.settings.fitToPage = value === "scale" ? 0 : 
+              (value === "fit" ? 1 : parseInt(value.split("-")[1]));
+            this.update();
+          })
+      );
+
+    new Setting(this.contentEl)
+      .setName(t("EXPORTDIALOG_PDF_MARGIN"))
+      .addDropdown(dropdown => 
+        dropdown
+          .addOptions({
+            "none": t("EXPORTDIALOG_PDF_MARGIN_NONE"),
+            "tiny": t("EXPORTDIALOG_PDF_MARGIN_TINY"),
+            "normal": t("EXPORTDIALOG_PDF_MARGIN_NORMAL")
+          })
+          .setValue(this.settings.margin)
+          .onChange(value => {
+            this.settings.margin = value as PDFPageMarginString;
+            this.update();
+          })
+      );
+
+    const paperColorSetting = new Setting(this.contentEl)
+      .setName(t("EXPORTDIALOG_PDF_PAPER_COLOR"))
+      .addDropdown(dropdown => 
+        dropdown
+          .addOptions({
+            "white": t("EXPORTDIALOG_PDF_PAPER_WHITE"),
+            "scene": t("EXPORTDIALOG_PDF_PAPER_SCENE"),
+            "custom": t("EXPORTDIALOG_PDF_PAPER_CUSTOM")
+          })
+          .setValue(this.settings.paperColor)
+          .onChange(value => {
+            this.settings.paperColor = value as typeof this.settings.paperColor;
+            colorInput.style.display = (value === "custom") ? "block" : "none";
+            this.update();
+          })
+      );
+
+    const colorInput = paperColorSetting.controlEl.createEl("input", {
+      type: "color",
+      value: this.settings.customPaperColor
+    });
+    colorInput.style.width = "50px";
+    colorInput.style.marginLeft = "10px";
+    colorInput.style.display = this.settings.paperColor === "custom" ? "block" : "none";
+    colorInput.addEventListener("change", (e) => {
+      this.settings.customPaperColor = (e.target as HTMLInputElement).value;
+      this.update();
+    });
+
+    new Setting(this.contentEl)
+      .setName(t("EXPORTDIALOG_PDF_ALIGNMENT"))
+      .addDropdown(dropdown => 
+        dropdown
+          .addOptions({
+            "center": t("EXPORTDIALOG_PDF_ALIGN_CENTER"),
+            "top-left": t("EXPORTDIALOG_PDF_ALIGN_TOP_LEFT"),
+            "top-center": t("EXPORTDIALOG_PDF_ALIGN_TOP_CENTER"),
+            "top-right": t("EXPORTDIALOG_PDF_ALIGN_TOP_RIGHT"),
+            "bottom-left": t("EXPORTDIALOG_PDF_ALIGN_BOTTOM_LEFT"),
+            "bottom-center": t("EXPORTDIALOG_PDF_ALIGN_BOTTOM_CENTER"),
+            "bottom-right": t("EXPORTDIALOG_PDF_ALIGN_BOTTOM_RIGHT")
+          })
+          .setValue(this.settings.alignment)
+          .onChange(value => {
+            this.settings.alignment = value as PDFPageAlignment;
+            this.update();
+          })
+      );
+  }
+}

src/shared/Dialogs/SelectCard.ts

@@ -1,4 +1,4 @@
-import { App, FuzzySuggestModal, Notice, TFile } from "obsidian";
+import { App, FuzzySuggestModal, Notice } from "obsidian";
 import { t } from "../../lang/helpers";
 import ExcalidrawView from "src/view/ExcalidrawView";
 import { getEA } from "src/core";

src/shared/Dialogs/SuggesterInfo.ts

@@ -157,6 +157,15 @@ export const EXCALIDRAW_AUTOMATE_INFO: SuggesterInfo[] = [
     desc: "Set ea.style.roundness. 0: is the legacy value, 3: is the current default value, null is sharp",
     after: "",
   },
+  {
+    field: "addAppendUpdateCustomData",
+    code: "addAppendUpdateCustomData(id: string, newData: Partial<Record<string, unknown>>)",
+    desc: "Add, modify keys in element customData and preserve existing keys.\n" +
+      "Creates customData={} if it does not exist.\n" +
+      "Takes the element ID for an element in the elementsDict and the new data to add or modify.\n" +
+      "To delete keys set key value in newData to undefined. so {keyToBeDeleted:undefined} will be deleted.",
+    after: "",
+  },
   {
     field: "addToGroup",
     code: "addToGroup(objectIds: []): string;",
@@ -215,6 +224,64 @@ export const EXCALIDRAW_AUTOMATE_INFO: SuggesterInfo[] = [
     desc: "Use ExcalidrawAutomate.getExportSettings(boolean,boolean) to create an ExportSettings object.\nUse ExcalidrawAutomate.getEmbeddedFilesLoader(boolean?) to create an EmbeddedFilesLoader object.",
     after: "",
   },
+  {
+    field: "createPDF",
+    code: "async createPDF({SVG: SVGSVGElement[], scale?: PDFExportScale, pageProps?: PDFPageProperties}): Promise<ArrayBuffer>",
+    desc: "",
+    after: "Creates a PDF from the provided SVG elements with specified scaling and page properties.\n" +
+        "\n" +
+        "@param {Object} params - The parameters for creating the PDF.\n" +
+        "@param {SVGSVGElement[]} params.SVG - An array of SVG elements to be included in the PDF. If multiple SVGs are provided, each will be added to a new page.\n" +
+        "@param {PDFExportScale} [params.scale={ fitToPage: true, zoom: 1 }] - The scaling options for the SVG elements.\n" +
+        "@param {PDFPageProperties} [params.pageProps] - The properties for the PDF pages.\n" +
+        "@returns {Promise<ArrayBuffer>} - A promise that resolves to an ArrayBuffer containing the PDF data.\n" +
+        "\n" +
+        "@typedef {Object} PDFExportScale\n" +
+        "@property {boolean} fitToPage - Whether to fit the SVG to the page.\n" +
+        "@property {number} [zoom=1] - The zoom level for the SVG. Used only if fitToPage is false. If the SVG does not fit the page, it will be tiled over multiple pages.\n" +
+        "\n" +
+        "@typedef {Object} PDFPageProperties\n" +
+        "@property {{width: number, height: number}} [dimensions] - The dimensions of the PDF pages. Use getPageDimensions to get standard page sizes.\n" +
+        "@property {string} [backgroundColor] - The background color of the PDF pages.\n" +
+        "@property {PDFMargin} margin - The margins of the PDF pages.\n" +
+        "@property {PDFPageAlignment} alignment - The alignment of the SVG on the PDF pages.\n" +
+        "@property {number} exportDPI - The DPI of the exported PDF (150/300/600/1200).\n" +
+        "\n" +
+        "@example\n" +
+        "const pdfData = await createPDF({\n" +
+        "  SVG: [svgElement1, svgElement2],\n" +
+        "  scale: { fitToPage: true },\n" +
+        "  pageProps: {\n" +
+        "    dimensions: { width: 595.28, height: 841.89 },\n" +
+        "    backgroundColor: \"#ffffff\",\n" +
+        "    margin: { left: 20, right: 20, top: 20, bottom: 20 },\n" +
+        "    alignment: \"center\"\n" +
+        "    exportDPI: 300\n" +
+        "  }\n" +
+        "});",
+  },
+  {
+    field: "getPagePDFDimensions",
+    code: "getPagePDFDimensions(pageSize: PageSize, orientation: PageOrientation): PageDimensions",
+    desc: "Returns the dimensions of a standard page size in points (pt).\n" +
+          "\n" +
+          "@param {PageSize} pageSize - The standard page size. Possible values are \"A0\", \"A1\", \"A2\", \"A3\", \"A4\", \"A5\", \"Letter\", \"Legal\", \"Tabloid\".\n" +
+          "@param {PageOrientation} orientation - The orientation of the page. Possible values are \"portrait\" and \"landscape\".\n" +
+          "@returns {PageDimensions} - An object containing the width and height of the page in points (pt).\n" +
+          "\n" +
+          "@typedef {Object} PageDimensions\n" +
+          "@property {number} width - The width of the page in points (pt).\n" +
+          "@property {number} height - The height of the page in points (pt).\n" +
+          "\n" +
+          "@typedef {\"A0\" | \"A1\" | \"A2\" | \"A3\" | \"A4\" | \"A5\" | \"Letter\" | \"Legal\" | \"Tabloid\"} PageSize\n" +
+          "\n" +
+          "@typedef {\"portrait\" | \"landscape\"} PageOrientation\n" +
+          "\n" +
+          "@example\n" +
+          "const dimensions = getPDFPageDimensions(\"A4\", \"portrait\");\n" +
+          "console.log(dimensions); // { width: 595.28, height: 841.89 }",
+    after: "",
+  },
   {
     field: "createPNG",
     code: "async createPNG(templatePath?: string, scale?: number, exportSettings?: ExportSettings, loader?: EmbeddedFilesLoader, theme?: string,padding?: number): Promise<any>;",
@@ -297,8 +364,13 @@ export const EXCALIDRAW_AUTOMATE_INFO: SuggesterInfo[] = [
   },
   {
     field: "addImage",
-    code: "async addImage(topX: number, topY: number, imageFile: TFile|string, scale?: boolean, anchor?: boolean): Promise<string>;",
-    desc: "imageFile may be a TFile or a string that contains a hyperlink. imageFile may also be an obsidian filepath including a reference eg.: 'path/my.pdf#page=3'\nSet scale to false if you want to embed the image at 100% of its original size. Default is true which will insert a scaled image.\nanchor will only be evaluated if scale is false. anchor true will add |100% to the end of the filename, resulting in an image that will always pop back to 100% when the source file is updated or when the Excalidraw file is reopened.",
+    code: "async addImage(opts: {topX: number, topY: number, imageFile: TFile|string, scale?: boolean, anchor?: boolean, colorMap?: ColorMap}): Promise<string>;",
+    desc: "imageFile may be a TFile or a string that contains a hyperlink.\n"+
+      "imageFile may also be an obsidian filepath including a reference eg.: 'path/my.pdf#page=3'\n"+
+      "Set scale to false if you want to embed the image at 100% of its original size. Default is true which will insert a scaled image.\n"+
+      "anchor will only be evaluated if scale is false. anchor true will add |100% to the end of the filename, resulting in an image that will always pop back to 100% when the source file is updated or when the Excalidraw file is reopened.\n"+
+      "colorMap is only used for SVG images and nested Excalidraw images. See the Shade Master script and the Deconstruct Selected Elements script for examples using colorMap.\n"+
+      "type ColorMap = { [color: string]: string; }",
     after: "",
   },
   {
@@ -415,6 +487,47 @@ export const EXCALIDRAW_AUTOMATE_INFO: SuggesterInfo[] = [
     desc: "Returns the TFile file handle for the image element",
     after: "",
   },
+  {
+    field: "updateViewSVGImageColorMap",
+    code: "async updateViewSVGImageColorMap(elements: ExcalidrawImageElement | ExcalidrawImageElement[], colors: ColorMap | SVGColorInfo | ColorMap[] | SVGColorInfo[]): Promise<void>;",
+    desc: 'Updates the color map of an SVG image element in the view. If a ColorMap is provided, it will be used directly. If an SVGColorInfo is provided, it will be converted to a ColorMap. The view will be marked as dirty (i.e. will be saved at next scheduled time) and the image will be reset using the color map.\n'+
+          'See "Shade Master" scritp in Script Library for an example of using this function.\n\n' +
+          'type SVGColorInfo = Map<string, { mappedTo: string; fill: boolean; stroke: boolean; }>\n' +
+          'type ColorMap = { [color: string]: string; }',
+    after: "",
+  },
+  {
+    field: "getColorMapForImageElement",
+    code: "getColorMapForImageElement(el: ExcalidrawElement): ColorMap",
+    desc: 'Retrieves the color map for an image element. The color map contains information about the mapping of colors used in the image. If the element already has a color map, it will be returned. The colorMap does not include all colors in the image, only those that have been mapped.\n' +
+          'See "Shade Master" scritp in Script Library for an example of using this function.\n\n' +
+          'type ColorMap = { [color: string]: string; }',
+    after: "",
+  },
+  {
+    field: "getSVGColorInfoForImgElement",
+    code: "async getColorMapForImgElement(el: ExcalidrawElement): Promise<SVGColorInfo>",
+    desc: 'This function must be awaited. Retrieves the color map for an SVG image element. The color map contains information about the fill and stroke colors used in the SVG. If the element already has a color map, it will be merged with the colors extracted from the SVG.\n' +
+          'See "Shade Master" scritp in Script Library for an example of using this function.\n\n' +
+          'type SVGColorInfo = Map<string, { mappedTo: string; fill: boolean; stroke: boolean; }>',
+    after: "",
+  },
+  {
+    field: "getColosFromExcalidrawFile",
+    code: "async getColosFromExcalidrawFile(file:TFile, img: ExcalidrawImageElement): Promise<SVGColorInfo>",
+    desc: 'Must be awaited. Extracts the fill (background) and stroke colors from an excalidraw file and returns them as an SVGColorInfo. The SVGColorInfo is a map where the keys are the colors used in the SVG and the values contain information about whether the color is used for fill, stroke, or both.\n' +
+          'See "Shade Master" scritp in Script Library for an example of using this function.\n\n' +
+          'type SVGColorInfo = Map<string, { mappedTo: string; fill: boolean; stroke: boolean; }>',
+    after: "",
+  },
+  {
+    field: "getColorsFromSVGString",
+    code: "getColorsFromSVGString(svgString: string): SVGColorInfo",
+    desc: 'Extracts the fill and stroke colors from an SVG string and returns them as an SVGColorInfo. The SVGColorInfo is a map where the keys are the colors used in the SVG and the values contain information about whether the color is used for fill, stroke, or both.\n' +
+          'See "Shade Master" scritp in Script Library for an example of using this function.\n\n' +
+          'type SVGColorInfo = Map<string, { mappedTo: string; fill: boolean; stroke: boolean; }>',
+    after: "",
+  },
   {
     field: "copyViewElementsToEAforEditing",
     code: "copyViewElementsToEAforEditing(elements: ExcalidrawElement[], copyImages: boolean = false): void;",
@@ -445,6 +558,21 @@ export const EXCALIDRAW_AUTOMATE_INFO: SuggesterInfo[] = [
     desc: "If set Excalidraw will call this function onDrop events.\nA return of true will stop the default onDrop processing in Excalidraw.\n\ndraggable is the Obsidian draggable object\nfiles is the array of dropped files\nexcalidrawFile is the file receiving the drop event\nview is the excalidraw view receiving the drop.\npointerPosition is the pointer position on canvas at the time of drop.",
     after: "",
   },
+  {
+    field: "onImageFilePathHook",
+    code: `onImageFilePathHook: (data: {currentImageName: string; drawingFilePath: string;}): string;`,
+    desc: "If set, this callback is triggered when an image is being saved in Excalidraw.\n"
+      + "You can use this callback to customize the naming and path of pasted images to avoid\n"
+      + 'default names like "Pasted image 123147170.png" being saved in the attachments folder,\n'
+      + "and instead use more meaningful names based on the Excalidraw file or other criteria,\n"
+      + "plus save the image in a different folder.\n\n"
+      + "If the function returns null or undefined, the normal Excalidraw operation will continue\n"
+      + "with the excalidraw generated name and default path.\n"
+      + "If a filepath is returned, that will be used. Include the full Vault filepath and filename\n"
+      + "with the file extension.\n"
+      + "The currentImageName is the name of the image generated by excalidraw or provided during paste.",
+    after: "",
+  },
   {
     field: "mostRecentMarkdownSVG",
     code: "mostRecentMarkdownSVG: SVGSVGElement;",

src/shared/EmbeddedFileLoader.ts

@@ -13,13 +13,13 @@ import {
   FRONTMATTER_KEYS,
   getCSSFontDefinition,
 } from "../constants/constants";
-import { createSVG } from "./ExcalidrawAutomate";
+import { createSVG } from "src/utils/excalidrawAutomateUtils";
 import { ExcalidrawData, getTransclusion } from "./ExcalidrawData";
 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,
@@ -73,7 +73,8 @@ type ImgData = {
   dataURL: DataURL;
   created: number;
   hasSVGwithBitmap: boolean;
-  size: { height: number; width: number };
+  size: Size;
+  pdfPageViewProps?: PDFPageViewProps;
 };
 
 export declare type MimeType = ValueOf<typeof IMAGE_MIME_TYPES> | "application/octet-stream";
@@ -82,8 +83,17 @@ export type FileData = BinaryFileData & {
   size: Size;
   hasSVGwithBitmap: boolean;
   shouldScale: boolean; //true if image should maintain its area, false if image should display at 100% its size
+  pdfPageViewProps?: PDFPageViewProps;
 };
 
+export type PDFPageViewProps = {
+  left: number;
+  bottom: number;
+  right: number;
+  top: number;
+  rotate?: number; //may be undefined in legacy files
+}
+
 export type Size = {
   height: number;
   width: number;
@@ -107,6 +117,20 @@ const replaceSVGColors = (svg: SVGSVGElement | string, colorMap: ColorMap | null
   if(typeof svg === 'string') {
     // Replace colors in the SVG string
     for (const [oldColor, newColor] of Object.entries(colorMap)) {
+      if(oldColor === "stroke" || oldColor === "fill") {
+        const [svgTag, prefix, suffix] = (svg.match(/(<svg[^>]*)(>)/i) || []) as string[];
+        if (!svgTag) continue;
+        
+        svg = svg.replace(
+          svgTag,
+          svgTag.match(new RegExp(`${oldColor}=["'][^"']*["']`))
+            ? prefix.replace(
+                new RegExp(`${oldColor}=["'][^"']*["']`,'i'), 
+                `${oldColor}="${newColor}"`) + suffix
+            : `${prefix} ${oldColor}="${newColor}"${suffix}`
+        );
+        continue;
+      }
       const fillRegex = new RegExp(`fill="${oldColor}"`, 'gi');
       svg = svg.replaceAll(fillRegex, `fill="${newColor}"`);
       const fillStyleRegex = new RegExp(`fill:${oldColor}`, 'gi');
@@ -137,6 +161,8 @@ const replaceSVGColors = (svg: SVGSVGElement | string, colorMap: ColorMap | null
     }
   }
 
+  if("fill" in colorMap) svg.setAttribute("fill", colorMap.fill);
+  if("stroke" in colorMap) svg.setAttribute("stroke", colorMap.stroke);
   for (const child of svg.childNodes) {
     childNodes(child);
   }
@@ -161,6 +187,7 @@ export class EmbeddedFile {
   public isLocalLink: boolean = false;
   public hyperlink:DataURL;
   public colorMap: ColorMap | null = null;
+  public pdfPageViewProps: PDFPageViewProps;
 
   constructor(plugin: ExcalidrawPlugin, hostPath: string, imgPath: string, colorMapJSON?: string) {
     this.plugin = plugin;
@@ -236,12 +263,14 @@ export class EmbeddedFile {
     return this.mtime !== this.file.stat.mtime;
   }
 
-  public setImage(
-    imgBase64: string,
-    mimeType: MimeType,
-    size: Size,
-    isDark: boolean,
-    isSVGwithBitmap: boolean,
+  public setImage({ imgBase64, mimeType, size, isDark, isSVGwithBitmap, pdfPageViewProps } : {
+    imgBase64: string;
+    mimeType: MimeType;
+    size: Size;
+    isDark: boolean;
+    isSVGwithBitmap: boolean;
+    pdfPageViewProps?: PDFPageViewProps;
+  }
   ) {
     if (!this.file && !this.isHyperLink && !this.isLocalLink) {
       return;
@@ -250,6 +279,7 @@ export class EmbeddedFile {
       this.imgInverted = this.img = "";
     }
     this.mtime = this.isHyperLink || this.isLocalLink ? 0 : this.file.stat.mtime;
+    this.pdfPageViewProps = pdfPageViewProps;
     this.size = size;
     this.mimeType = mimeType;
     switch (isDark && isSVGwithBitmap) {
@@ -329,6 +359,7 @@ export class EmbeddedFilesLoader {
     created: number;
     hasSVGwithBitmap: boolean;
     size: { height: number; width: number };
+    pdfPageViewProps?: PDFPageViewProps;
   }> {
     const result = await this._getObsidianImage(inFile, depth);
     this.emptyPDFDocsMap();
@@ -515,7 +546,7 @@ export class EmbeddedFilesLoader {
     ) {
       return null;
     }
-    const ab = isHyperLink || isPDF
+    const ab = isHyperLink || isPDF || isExcalidrawFile
       ? null
       : isLocalLink
         ? await readLocalFileBinary(this.getLocalPath((inFile as EmbeddedFile).hyperlink))
@@ -536,9 +567,9 @@ export class EmbeddedFilesLoader {
 
     const excalidrawSVG = isExcalidrawFile ? dURL : null;
 
-    const [pdfDataURL, pdfSize] = isPDF
+    const [pdfDataURL, pdfSize, pdfPageViewProps] = isPDF
       ? await this.pdfToDataURL(file,linkParts)
-      : [null, null];
+      : [null, null, null];
 
     let mimeType: MimeType = isPDF
       ? "image/png"
@@ -577,26 +608,33 @@ export class EmbeddedFilesLoader {
       return {
         mimeType,
         fileId: await generateIdFromFile(
-          isHyperLink || isPDF ? (new TextEncoder()).encode(dataURL as string) : ab,
+          isHyperLink || isPDF || isExcalidrawFile ? (new TextEncoder()).encode(dataURL as string) : ab,
           inFile instanceof EmbeddedFile ? inFile.filenameparts?.linkpartReference : undefined
         ),
         dataURL,
         created: isHyperLink || isLocalLink ? 0 : file.stat.mtime,
         hasSVGwithBitmap,
         size,
+        pdfPageViewProps,
       };
     } catch(e) {
       return null;
     }
   }
 
-  public async loadSceneFiles(
-    excalidrawData: ExcalidrawData,
-    addFiles: (files: FileData[], isDark: boolean, final?: boolean) => void,
-    depth:number,
-    isThemeChange:boolean = false,
-    fileIDWhiteList?: Set<FileId>,
-  ) {
+  public async loadSceneFiles({
+    excalidrawData,
+    addFiles,
+    depth,
+    isThemeChange = false,
+    fileIDWhiteList,
+  }: {
+    excalidrawData: ExcalidrawData;
+    addFiles: (files: FileData[], isDark: boolean, final?: boolean) => void;
+    depth: number;
+    isThemeChange?: boolean;
+    fileIDWhiteList?: Set<FileId>;
+  }) {
     
     if(depth > 7) {
       new Notice(t("INFINITE_LOOP_WARNING")+depth.toString(), 6000);
@@ -612,7 +650,7 @@ export class EmbeddedFilesLoader {
     files.push([]);
     let batch = 0;
 
-    function* loadIterator():Generator<Promise<void>> {
+    function* loadIterator(this: EmbeddedFilesLoader):Generator<Promise<void>> {
       while (!(entry = entries.next()).done) {
         if(fileIDWhiteList && !fileIDWhiteList.has(entry.value[0])) continue;
         const embeddedFile: EmbeddedFile = entry.value[1];
@@ -632,20 +670,22 @@ export class EmbeddedFilesLoader {
                 created: data.created,
                 size: data.size,
                 hasSVGwithBitmap: data.hasSVGwithBitmap,
-                shouldScale: embeddedFile.shouldScale()
+                shouldScale: embeddedFile.shouldScale(),
+                pdfPageViewProps: data.pdfPageViewProps,
               };
               files[batch].push(fileData);
             }
           } else if (embeddedFile.isSVGwithBitmap && (depth !== 0 || isThemeChange)) {
             //this will reload the image in light/dark mode when switching themes
-            const fileData = {
+            const fileData: FileData = {
               mimeType: embeddedFile.mimeType,
               id: id,
               dataURL: embeddedFile.getImage(this.isDark) as DataURL,
               created: embeddedFile.mtime,
               size: embeddedFile.size,
               hasSVGwithBitmap: embeddedFile.isSVGwithBitmap,
-              shouldScale: embeddedFile.shouldScale()
+              shouldScale: embeddedFile.shouldScale(),
+              pdfPageViewProps: embeddedFile.pdfPageViewProps,
             };
             files[batch].push(fileData);
           }
@@ -759,13 +799,14 @@ export class EmbeddedFilesLoader {
     }, 1200);
 
     const iterator = loadIterator.bind(this)();
-    const concurency = 3;
+    const concurency = this.plugin.settings.renderingConcurrency;
     await new PromisePool(iterator, concurency).all();
     
     clearInterval(addFilesTimer);
 
     this.emptyPDFDocsMap();
     if (this.terminate) {
+      addFiles(undefined, this.isDark, true);
       return;
     }
     //debug({where:"EmbeddedFileLoader.loadSceneFiles",uid:this.uid,status:"add Files"});
@@ -780,7 +821,7 @@ export class EmbeddedFilesLoader {
   private async pdfToDataURL(
     file: TFile,
     linkParts: LinkParts,
-  ): Promise<[DataURL,{width:number, height:number}]> {
+  ): Promise<[DataURL,Size, PDFPageViewProps]> {
     try {
       let width = 0, height = 0;
       const pdfDoc = this.pdfDocsMap.get(file.path) ?? await getPDFDoc(file);
@@ -791,6 +832,7 @@ export class EmbeddedFilesLoader {
       const scale = this.plugin.settings.pdfScale;
       const cropRect = linkParts.ref.split("rect=")[1]?.split(",").map(x=>parseInt(x));
       const validRect = cropRect && cropRect.length === 4 && cropRect.every(x=>!isNaN(x));
+      let viewProps: PDFPageViewProps;
 
       // Render the page
       const renderPage = async (num:number) => {
@@ -801,8 +843,8 @@ export class EmbeddedFilesLoader {
         const page = await pdfDoc.getPage(num);
         // Set scale
         const viewport = page.getViewport({ scale });
-        height = canvas.height = viewport.height;
-        width = canvas.width = viewport.width;
+        height = canvas.height = Math.round(viewport.height);
+        width = canvas.width = Math.round(viewport.width);
 
         const renderCtx = {
           canvasContext: ctx,
@@ -810,21 +852,73 @@ export class EmbeddedFilesLoader {
           viewport
         };
 
-        await page.render(renderCtx).promise;
-        if(validRect) {
-          const [left, bottom, _, top] = page.view;
-        
-          const pageHeight = top - bottom;
-          width = (cropRect[2] - cropRect[0]) * scale;
-          height = (cropRect[3] - cropRect[1]) * scale;
+        //when obsidian loads there seems to be an occasional race condition where the rendering is cancelled
+        //this is a workaround for that
+        const maxRetries = 4;
+        for (let i = 0; i < maxRetries; i++) {
+          try {
+            await page.render(renderCtx).promise;
+            break;
+          } catch (e) {
+            if (i === maxRetries - 1) throw e; // Throw on last retry
+            await sleep(50*(i+1)); 
+            continue;
+          }
+        }
+        const [left, bottom, right, top] = page.view;
+        viewProps = {left, bottom, right, top};
+        viewProps.rotate = page.rotate;
 
-          const crop = validRect ? {
-            left: (cropRect[0] - left) * scale,
-            top: (bottom + pageHeight - cropRect[3]) * scale,
-            width,
-            height,
-          } : undefined;
-          if(crop) {
+        if(validRect) {
+
+          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);
           }
         }
@@ -833,19 +927,19 @@ export class EmbeddedFilesLoader {
 
       const canvas = await renderPage(pageNum); 
       if(canvas) {
-        const result: [DataURL,{width:number, height:number}] = [`data:image/png;base64,${await new Promise((resolve, reject) => {
+        const result: [DataURL,Size, PDFPageViewProps] = [`data:image/png;base64,${await new Promise((resolve, reject) => {
           canvas.toBlob(async (blob) => {
             const dataURL = await blobToBase64(blob);
             resolve(dataURL);
           });
-        })}` as DataURL, {width, height}];
+        })}` as DataURL, {width, height}, viewProps];
         canvas.width = 0; //free memory iOS bug
         canvas.height = 0;
         return result;
       }
     } catch(e) {
       console.log(e);
-      return [null,null];
+      return [null, null, null];
     }
   }
 

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,10 +52,11 @@ 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 { checkAndCreateFolder, getNewUniqueFilepath, splitFolderAndFilename } from "../utils/fileUtils";
 import { t } from "../lang/helpers";
 import { displayFontMessage } from "../utils/excalidrawViewUtils";
 import { getPDFRect } from "../utils/PDFUtils";
+import { create } from "domain";
 
 type SceneDataWithFiles = SceneData & { files: BinaryFiles };
 
@@ -480,7 +481,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>();
@@ -649,7 +650,6 @@ export class ExcalidrawData {
       containers.forEach((container: any) => {
         if(ellipseAndRhombusContainerWrapping && !container.customData?.legacyTextWrap) {
           addAppendUpdateCustomData(container, {legacyTextWrap: true});
-          //container.customData = {...container.customData, legacyTextWrap: true};
         }
         const filteredBoundElements = container.boundElements.filter(
           (boundEl: any) => elements.some((el: any) => el.id === boundEl.id),
@@ -1547,13 +1547,24 @@ 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);
+      await checkAndCreateFolder(folderpath);
+      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;
@@ -1569,13 +1580,13 @@ export class ExcalidrawData {
       filepath,
     );
     
-    embeddedFile.setImage(
-      dataURL,
+    embeddedFile.setImage({
+      imgBase64: dataURL,
       mimeType,
-      { height: 0, width: 0 },
-      scene.appState?.theme === "dark",
-      mimeType === "image/svg+xml", //this treat all SVGs as if they had embedded images REF:addIMAGE
-    );
+      size: { height: 0, width: 0 },
+      isDark: scene.appState?.theme === "dark",
+      isSVGwithBitmap: mimeType === "image/svg+xml", //this treat all SVGs as if they had embedded images REF:addIMAGE
+    });
     this.setFile(key as FileId, embeddedFile);
     return file;
   }
@@ -1593,7 +1604,9 @@ export class ExcalidrawData {
       const pageRef = ef.linkParts.original.split("#")?.[1];
       if(!pageRef || !pageRef.startsWith("page=") || pageRef.includes("rect")) return;
       const restOfLink = el.link ? el.link.match(/&rect=\d*,\d*,\d*,\d*(.*)/)?.[1] : "";
-      const link = ef.linkParts.original + getPDFRect(el.crop, pdfScale) + (restOfLink ? restOfLink : "]]");
+      const link = ef.linkParts.original +
+        getPDFRect({elCrop: el.crop, scale: pdfScale, customData: el.customData}) +
+        (restOfLink ? restOfLink : "]]");
       el.link = `[[${link}`;
       this.elementLinks.set(el.id, el.link);
       dirty = true;
@@ -1992,7 +2005,7 @@ export class ExcalidrawData {
         isLocalLink: data.isLocalLink,
         path: data.hyperlink,
         blockrefData: null,
-        hasSVGwithBitmap: data.isSVGwithBitmap
+        hasSVGwithBitmap: data.isSVGwithBitmap,
       });
       return;
     }
@@ -2028,7 +2041,8 @@ export class ExcalidrawData {
       this.file.path,
       masterFile.blockrefData
         ? masterFile.path + "#" + masterFile.blockrefData
-        : masterFile.path
+        : masterFile.path,
+      masterFile.colorMapJSON
     );
     this.files.set(fileId,embeddedFile);
     return embeddedFile;

src/shared/Scripts.ts

@@ -253,6 +253,12 @@ export class ScriptEngine {
     if (!view || !script || !title) {
       return;
     }
+    //addresses the situation when after paste text element IDs are not updated to 8 characters
+    //linked to onPaste save issue with the false parameter
+    if(view.getScene().elements.some(el=>!el.isDeleted && el.type === "text" && el.id.length > 8)) {
+      await view.save(false, true);
+    }
+
     script = script.replace(/^---.*?---\n/gs, "");
     const ea = getEA(view);
     this.eaInstances.push(ea);

src/types/excalidrawAutomateTypes.ts

@@ -0,0 +1,34 @@
+import { DataURL } from "@zsviczian/excalidraw/types/excalidraw/types";
+import { TFile } from "obsidian";
+import { FileId } from "src/core";
+import { ColorMap, MimeType, PDFPageViewProps, Size } from "src/shared/EmbeddedFileLoader";
+
+export type SVGColorInfo = Map<string, {
+  mappedTo: string;
+  fill: boolean;
+  stroke: boolean;
+}>;
+
+export type ImageInfo = {
+  mimeType: MimeType,
+  id: FileId,
+  dataURL: DataURL,
+  created: number,
+  isHyperLink?: boolean,
+  hyperlink?: string,
+  file?:string | TFile,
+  hasSVGwithBitmap: boolean,
+  latex?: string,
+  size?: Size,
+  colorMap?: ColorMap,
+  pdfPageViewProps?: PDFPageViewProps,
+}
+
+export interface AddImageOptions {
+  topX: number;
+  topY: number;
+  imageFile: TFile | string;
+  scale?: boolean; 
+  anchor?: boolean;
+  colorMap?: ColorMap;
+}

src/types/excalidrawViewTypes.ts

@@ -4,18 +4,7 @@ import { WorkspaceLeaf } from "obsidian";
 import { FileId } from "@zsviczian/excalidraw/types/excalidraw/element/types";
 import { ObsidianCanvasNode } from "../view/managers/CanvasNodeFactory";
 
-export interface DropData {
-  files?: File[];
-  text?: string;
-  html?: string;
-  uri?: string;
-}
-
-export interface DropContext {
-  event: DragEvent;
-  position: {x: number; y: number};
-  modifierAction: string;
-}
+export type Position = { x: number; y: number };
 
 export interface SelectedElementWithLink {
   id: string | null;

src/utils/AIUtils.ts

@@ -1,4 +1,4 @@
-import { Notice, RequestUrlResponse, requestUrl } from "obsidian";
+import { Notice, RequestUrlResponse } from "obsidian";
 import ExcalidrawPlugin from "src/core/main";
 
 type MessageContent =

src/utils/PDFUtils.ts

@@ -1,37 +1,128 @@
 //for future use, not used currently
 
 import { ImageCrop } from "@zsviczian/excalidraw/types/excalidraw/element/types";
+import { PDFPageViewProps } from "src/shared/EmbeddedFileLoader";
 
 export function getPDFCropRect (props: {
   scale: number,
   link: string,
   naturalHeight: number, 
   naturalWidth: number,
+  pdfPageViewProps: PDFPageViewProps,
 }) : ImageCrop | null {
   const rectVal = props.link.match(/&rect=(\d*),(\d*),(\d*),(\d*)/);
   if (!rectVal || rectVal.length !== 5) {
     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 * props.scale,
-    y: (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,
   }
 }
 
-export function getPDFRect(elCrop: ImageCrop, scale: number): string {
-  const R0 = elCrop.x / scale;
-  const R2 = elCrop.width / scale + R0;
-  const R3 = (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)}`;
-}
+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 };
+
+  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/utils/dynamicStyling.ts

@@ -3,7 +3,7 @@ import { ColorMaster } from "@zsviczian/colormaster";
 import { ExcalidrawAutomate } from "src/shared/ExcalidrawAutomate";
 import ExcalidrawView from "src/view/ExcalidrawView";
 import { DynamicStyle } from "src/types/types";
-import { cloneElement } from "src/shared/ExcalidrawAutomate";
+import { cloneElement } from "./excalidrawAutomateUtils";
 import { ExcalidrawFrameElement } from "@zsviczian/excalidraw/types/excalidraw/element/types";
 import { addAppendUpdateCustomData } from "./utils";
 import { mutateElement } from "src/constants/constants";

src/utils/excalidrawAutomateUtils.ts

@@ -0,0 +1,820 @@
+import { ExcalidrawAutomate } from "src/shared/ExcalidrawAutomate";
+import { DataURL } from "@zsviczian/excalidraw/types/excalidraw/types";
+import ExcalidrawPlugin from "src/core/main";
+import {
+  ExcalidrawElement,
+  ExcalidrawImageElement,
+  FileId,
+} from "@zsviczian/excalidraw/types/excalidraw/element/types";
+import { normalizePath, TFile } from "obsidian";
+
+import ExcalidrawView, { ExportSettings, getTextMode } from "src/view/ExcalidrawView";
+import {
+  GITHUB_RELEASES,
+  getCommonBoundingBox,
+  restore,
+  REG_LINKINDEX_INVALIDCHARS,
+  THEME_FILTER,
+  EXCALIDRAW_PLUGIN,
+  getFontFamilyString,
+  getLineHeight,
+  measureText,
+} from "src/constants/constants";
+import {
+  //debug,
+  errorlog,
+  getEmbeddedFilenameParts,
+  getLinkParts,
+  getPNG,
+  getSVG,
+  isVersionNewerThanOther,
+  scaleLoadedImage,
+} from "src/utils/utils";
+import { GenericInputPrompt, NewFileActions } from "src/shared/Dialogs/Prompt";
+import { t } from "src/lang/helpers";
+import { Mutable } from "@zsviczian/excalidraw/types/excalidraw/utility-types";
+import {
+  postOpenAI as _postOpenAI,
+  extractCodeBlocks as _extractCodeBlocks,
+} from "../utils/AIUtils";
+import { ColorMap, EmbeddedFilesLoader, FileData } from "src/shared/EmbeddedFileLoader";
+import { SVGColorInfo } from "src/types/excalidrawAutomateTypes";
+import { ExcalidrawData, getExcalidrawMarkdownHeaderSection, REGEX_LINK } from "src/shared/ExcalidrawData";
+import { getFrameBasedOnFrameNameOrId } from "./excalidrawViewUtils";
+import { ScriptEngine } from "src/shared/Scripts";
+
+declare const PLUGIN_VERSION:string;
+
+export function isSVGColorInfo(obj: ColorMap | SVGColorInfo): boolean {
+  return (
+    typeof obj === 'object' && 
+    obj !== null &&
+    'stroke' in obj &&
+    'fill' in obj &&
+    'mappedTo' in obj
+  );
+}
+
+export function mergeColorMapIntoSVGColorInfo(
+  colorMap: ColorMap,
+  svgColorInfo: SVGColorInfo
+): SVGColorInfo {
+  if(colorMap) {
+    for(const key of Object.keys(colorMap)) {
+      if(svgColorInfo.has(key)) {
+        svgColorInfo.get(key).mappedTo = colorMap[key];
+      }
+    }
+  }
+  return svgColorInfo;
+}
+export function svgColorInfoToColorMap(svgColorInfo: SVGColorInfo): ColorMap {
+  const colorMap: ColorMap = {};
+  svgColorInfo.forEach((info, color) => {
+    if (info.fill || info.stroke) {
+      colorMap[color] = info.mappedTo;
+    }
+  });
+  return colorMap;
+}
+
+//Remove identical key-value pairs from a ColorMap
+export function filterColorMap(colorMap: ColorMap): ColorMap {
+  return Object.fromEntries(
+    Object.entries(colorMap).filter(([key, value]) => key.toLocaleLowerCase() !== value?.toLocaleLowerCase())
+  );
+}
+
+export function updateOrAddSVGColorInfo(
+  svgColorInfo: SVGColorInfo,
+  color: string,
+  info: {fill?: boolean, stroke?: boolean, mappedTo?: string}
+): SVGColorInfo {
+  const {fill, stroke, mappedTo} = info;
+  color = color.toLocaleLowerCase();
+  const colorData = svgColorInfo.get(color) || {mappedTo: color, fill: false, stroke: false};
+  if(fill !== undefined) {
+    colorData.fill = fill;
+  }
+  if(stroke !== undefined) {
+    colorData.stroke = stroke;
+  }
+  if(mappedTo !== undefined) {
+    colorData.mappedTo = mappedTo;
+  }
+  return svgColorInfo.set(color, colorData);
+}
+
+export function getEmbeddedFileForImageElment(ea: ExcalidrawAutomate, el: ExcalidrawElement) {
+  if (!ea.targetView || !ea.targetView?._loaded) {
+    errorMessage("targetView not set", "getViewFileForImageElement()");
+    return null;
+  }
+
+  if (!el || el.type !== "image") {
+    errorMessage(
+      "Must provide an image element as input",
+      "getViewFileForImageElement()",
+    );
+    return null;
+  }
+  return ea.targetView?.excalidrawData?.getFile(el.fileId);
+}
+
+export function errorMessage(message: string, source: string):void {
+  switch (message) {
+    case "targetView not set":
+      errorlog({
+        where: "ExcalidrawAutomate",
+        source,
+        message:
+          "targetView not set, or no longer active. Use setView before calling this function",
+      });
+      break;
+    case "mobile not supported":
+      errorlog({
+        where: "ExcalidrawAutomate",
+        source,
+        message: "this function is not available on Obsidian Mobile",
+      });
+      break;
+    default:
+      errorlog({
+        where: "ExcalidrawAutomate",
+        source,
+        message: message??"unknown error",
+      });
+  }
+}
+
+export function isColorStringTransparent(color: string): boolean {
+  const rgbaHslaTransparentRegex = /^(rgba|hsla)\(.*?,.*?,.*?,\s*0(\.0+)?\)$/i;
+  const hexTransparentRegex = /^#[a-fA-F0-9]{8}00$/i;
+
+  return rgbaHslaTransparentRegex.test(color) || hexTransparentRegex.test(color);
+}
+
+export function initExcalidrawAutomate(
+  plugin: ExcalidrawPlugin,
+): ExcalidrawAutomate {
+  const ea = new ExcalidrawAutomate(plugin);
+  //@ts-ignore
+  window.ExcalidrawAutomate = ea;
+  return ea;
+}
+
+export function normalizeLinePoints(
+  points: [x: number, y: number][],
+  //box: { x: number; y: number; w: number; h: number },
+): number[][] {
+  const p = [];
+  const [x, y] = points[0];
+  for (let i = 0; i < points.length; i++) {
+    p.push([points[i][0] - x, points[i][1] - y]);
+  }
+  return p;
+}
+
+export function getLineBox(
+  points: [x: number, y: number][]
+):{x:number, y:number, w: number, h:number} {
+  const [x1, y1, x2, y2] = estimateLineBound(points);
+  return {
+    x: x1,
+    y: y1,
+    w: x2 - x1, //Math.abs(points[points.length-1][0]-points[0][0]),
+    h: y2 - y1, //Math.abs(points[points.length-1][1]-points[0][1])
+  };
+}
+
+export function getFontFamily(id: number):string {
+  return getFontFamilyString({fontFamily:id})
+}
+
+export function _measureText(
+  newText: string,
+  fontSize: number,
+  fontFamily: number,
+  lineHeight: number,
+): {w: number, h:number} {
+  //following odd error with mindmap on iPad while synchornizing with desktop.
+  if (!fontSize) {
+    fontSize = 20;
+  }
+  if (!fontFamily) {
+    fontFamily = 1;
+    lineHeight = getLineHeight(fontFamily);
+  }
+  const metrics = measureText(
+    newText,
+    `${fontSize.toString()}px ${getFontFamily(fontFamily)}` as any,
+    lineHeight
+  );
+  return { w: metrics.width, h: metrics.height };
+}
+
+export async function getTemplate(
+  plugin: ExcalidrawPlugin,
+  fileWithPath: string,
+  loadFiles: boolean = false,
+  loader: EmbeddedFilesLoader,
+  depth: number,
+  convertMarkdownLinksToObsidianURLs: boolean = false,
+): Promise<{
+  elements: any;
+  appState: any;
+  frontmatter: string;
+  files: any;
+  hasSVGwithBitmap: boolean;
+  plaintext: string; //markdown data above Excalidraw data and below YAML frontmatter
+}> {
+  const app = plugin.app;
+  const vault = app.vault;
+  const filenameParts = getEmbeddedFilenameParts(fileWithPath);
+  const templatePath = normalizePath(filenameParts.filepath);
+  const file = app.metadataCache.getFirstLinkpathDest(templatePath, "");
+  let hasSVGwithBitmap = false;
+  if (file && file instanceof TFile) {
+    const data = (await vault.read(file))
+      .replaceAll("\r\n", "\n")
+      .replaceAll("\r", "\n");
+    const excalidrawData: ExcalidrawData = new ExcalidrawData(plugin);
+
+    if (file.extension === "excalidraw") {
+      await excalidrawData.loadLegacyData(data, file);
+      return {
+        elements: convertMarkdownLinksToObsidianURLs
+          ? updateElementLinksToObsidianLinks({
+            elements: excalidrawData.scene.elements,
+            hostFile: file,
+          }) : excalidrawData.scene.elements,
+        appState: excalidrawData.scene.appState,
+        frontmatter: "",
+        files: excalidrawData.scene.files,
+        hasSVGwithBitmap,
+        plaintext: "",
+      };
+    }
+
+    const textMode = getTextMode(data);
+    await excalidrawData.loadData(
+      data,
+      file,
+      textMode,
+    );
+
+    let trimLocation = data.search(/^##? Text Elements$/m);
+    if (trimLocation == -1) {
+      trimLocation = data.search(/##? Drawing\n/);
+    }
+
+    let scene = excalidrawData.scene;
+
+    let groupElements:ExcalidrawElement[] = scene.elements;
+    if(filenameParts.hasGroupref) {
+      const el = filenameParts.hasSectionref
+      ? getTextElementsMatchingQuery(scene.elements,["# "+filenameParts.sectionref],true)
+      : scene.elements.filter((el: ExcalidrawElement)=>el.id===filenameParts.blockref);
+      if(el.length > 0) {
+        groupElements = plugin.ea.getElementsInTheSameGroupWithElement(el[0],scene.elements,true)
+      }
+    }
+    if(filenameParts.hasFrameref || filenameParts.hasClippedFrameref) {
+      const el = getFrameBasedOnFrameNameOrId(filenameParts.blockref,scene.elements);     
+      
+      if(el) {
+        groupElements = plugin.ea.getElementsInFrame(el,scene.elements, filenameParts.hasClippedFrameref);
+      }
+    }
+
+    if(filenameParts.hasTaskbone) {
+      groupElements = groupElements.filter( el => 
+        el.type==="freedraw" || 
+        ( el.type==="image" &&
+          !plugin.isExcalidrawFile(excalidrawData.getFile(el.fileId)?.file)
+        ));
+    }
+
+    let fileIDWhiteList:Set<FileId>;
+
+    if(groupElements.length < scene.elements.length) {
+      fileIDWhiteList = new Set<FileId>();
+      groupElements.filter(el=>el.type==="image").forEach((el:ExcalidrawImageElement)=>fileIDWhiteList.add(el.fileId));
+    }
+
+    if (loadFiles) {
+      //debug({where:"getTemplate",template:file.name,loader:loader.uid});
+      await loader.loadSceneFiles({
+        excalidrawData, 
+        addFiles: (fileArray: FileData[]) => {
+          //, isDark: boolean) => {
+          if (!fileArray || fileArray.length === 0) {
+            return;
+          }
+          for (const f of fileArray) {
+            if (f.hasSVGwithBitmap) {
+              hasSVGwithBitmap = true;
+            }
+            excalidrawData.scene.files[f.id] = {
+              mimeType: f.mimeType,
+              id: f.id,
+              dataURL: f.dataURL,
+              created: f.created,
+            };
+          }
+          scene = scaleLoadedImage(excalidrawData.scene, fileArray).scene;
+        },
+        depth,
+        fileIDWhiteList
+      });
+    }
+
+    excalidrawData.destroy();
+    const filehead = getExcalidrawMarkdownHeaderSection(data); // data.substring(0, trimLocation);
+    let files:any = {};
+    const sceneFilesSize = Object.values(scene.files).length;
+    if (sceneFilesSize > 0) {
+      if(fileIDWhiteList && (sceneFilesSize > fileIDWhiteList.size)) {
+          Object.values(scene.files).filter((f: any) => fileIDWhiteList.has(f.id)).forEach((f: any) => {
+            files[f.id] = f;
+          });
+      } else {
+        files = scene.files;
+      }
+    }
+
+    const frontmatter = filehead.match(/^---\n.*\n---\n/ms)?.[0] ?? filehead;
+    return {
+      elements: convertMarkdownLinksToObsidianURLs
+        ? updateElementLinksToObsidianLinks({
+          elements: groupElements,
+          hostFile: file,
+        }) : groupElements,
+      appState: scene.appState,
+      frontmatter,
+      plaintext: frontmatter !== filehead
+        ? (filehead.split(/^---\n.*\n---\n/ms)?.[1] ?? "")
+        : "",
+      files,
+      hasSVGwithBitmap,
+    };
+  }
+  return {
+    elements: [],
+    appState: {},
+    frontmatter: null,
+    files: [],
+    hasSVGwithBitmap,
+    plaintext: "",
+  };
+}
+
+export const generatePlaceholderDataURL = (width: number, height: number): DataURL => {
+  const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}"><rect width="100%" height="100%" fill="#E7E7E7" /><text x="${width / 2}" y="${height / 2}" dominant-baseline="middle" text-anchor="middle" font-family="Arial" font-size="${Math.min(width, height) / 5}" fill="#888">Placeholder</text></svg>`;
+  return `data:image/svg+xml;base64,${btoa(svgString)}` as DataURL;
+};
+
+export async function createPNG(
+  templatePath: string = undefined,
+  scale: number = 1,
+  exportSettings: ExportSettings,
+  loader: EmbeddedFilesLoader,
+  forceTheme: string = undefined,
+  canvasTheme: string = undefined,
+  canvasBackgroundColor: string = undefined,
+  automateElements: ExcalidrawElement[] = [],
+  plugin: ExcalidrawPlugin,
+  depth: number,
+  padding?: number,
+  imagesDict?: any,
+): Promise<Blob> {
+  if (!loader) {
+    loader = new EmbeddedFilesLoader(plugin);
+  }
+  padding = padding ?? plugin.settings.exportPaddingSVG;
+  const template = templatePath
+    ? await getTemplate(plugin, templatePath, true, loader, depth)
+    : null;
+  let elements = template?.elements ?? [];
+  elements = elements.concat(automateElements);
+  const files = imagesDict ?? {};
+  if(template?.files) {
+    Object.values(template.files).forEach((f:any)=>{
+      if(!f.dataURL.startsWith("http")) {
+        files[f.id]=f;
+      };
+    });
+  }
+  
+  return await getPNG(
+    {
+      type: "excalidraw",
+      version: 2,
+      source: GITHUB_RELEASES+PLUGIN_VERSION,
+      elements,
+      appState: {
+        theme: forceTheme ?? template?.appState?.theme ?? canvasTheme,
+        viewBackgroundColor:
+          template?.appState?.viewBackgroundColor ?? canvasBackgroundColor,
+        ...template?.appState?.frameRendering ? {frameRendering: template.appState.frameRendering} : {},
+      },
+      files,
+    },
+    {
+      withBackground:
+        exportSettings?.withBackground ?? plugin.settings.exportWithBackground,
+      withTheme: exportSettings?.withTheme ?? plugin.settings.exportWithTheme,
+      isMask: exportSettings?.isMask ?? false,
+    },
+    padding,
+    scale,
+  );
+}
+
+export const updateElementLinksToObsidianLinks = ({elements, hostFile}:{
+  elements: ExcalidrawElement[];
+  hostFile: TFile;
+}): ExcalidrawElement[] => {
+  return elements.map((el)=>{
+    if(el.link && el.link.startsWith("[")) {
+      const partsArray = REGEX_LINK.getResList(el.link)[0];
+      if(!partsArray?.value) return el;
+      let linkText = REGEX_LINK.getLink(partsArray);
+      if (linkText.search("#") > -1) {
+        const linkParts = getLinkParts(linkText, hostFile);
+        linkText = linkParts.path;
+      }
+      if (linkText.match(REG_LINKINDEX_INVALIDCHARS)) {
+        return el;
+      }
+      const file = EXCALIDRAW_PLUGIN.app.metadataCache.getFirstLinkpathDest(
+        linkText,
+        hostFile.path,
+      );
+      if(!file) {
+        return el;
+      }
+      let link = EXCALIDRAW_PLUGIN.app.getObsidianUrl(file);
+      if(window.ExcalidrawAutomate?.onUpdateElementLinkForExportHook) {
+        link = window.ExcalidrawAutomate.onUpdateElementLinkForExportHook({
+          originalLink: el.link,
+          obsidianLink: link,
+          linkedFile: file,
+          hostFile: hostFile
+       });
+      }
+      const newElement: Mutable<ExcalidrawElement> = cloneElement(el);
+      newElement.link = link;
+      return newElement;
+    }
+    return el;
+  })
+}
+
+function addFilterToForeignObjects(svg:SVGSVGElement):void {
+  const foreignObjects = svg.querySelectorAll("foreignObject");
+  foreignObjects.forEach((foreignObject) => {
+    foreignObject.setAttribute("filter", THEME_FILTER);
+  });
+}
+
+export async function createSVG(
+  templatePath: string = undefined,
+  embedFont: boolean = false,
+  exportSettings: ExportSettings,
+  loader: EmbeddedFilesLoader,
+  forceTheme: string = undefined,
+  canvasTheme: string = undefined,
+  canvasBackgroundColor: string = undefined,
+  automateElements: ExcalidrawElement[] = [],
+  plugin: ExcalidrawPlugin,
+  depth: number,
+  padding?: number,
+  imagesDict?: any,
+  convertMarkdownLinksToObsidianURLs: boolean = false,
+): Promise<SVGSVGElement> {
+  if (!loader) {
+    loader = new EmbeddedFilesLoader(plugin);
+  }
+  if(typeof exportSettings.skipInliningFonts === "undefined") {
+    exportSettings.skipInliningFonts = !embedFont;
+  }
+  const template = templatePath
+    ? await getTemplate(plugin, templatePath, true, loader, depth, convertMarkdownLinksToObsidianURLs)
+    : null;
+  let elements = template?.elements ?? [];
+  elements = elements.concat(automateElements);
+  padding = padding ?? plugin.settings.exportPaddingSVG;
+  const files = imagesDict ?? {};
+  if(template?.files) {
+    Object.values(template.files).forEach((f:any)=>{
+      files[f.id]=f;
+    });
+  }
+
+  const theme = forceTheme ?? template?.appState?.theme ?? canvasTheme;
+  const withTheme = exportSettings?.withTheme ?? plugin.settings.exportWithTheme;
+
+  const filenameParts = getEmbeddedFilenameParts(templatePath);
+  const svg = await getSVG(
+    {
+      //createAndOpenDrawing
+      type: "excalidraw",
+      version: 2,
+      source: GITHUB_RELEASES+PLUGIN_VERSION,
+      elements,
+      appState: {
+        theme,
+        viewBackgroundColor:
+          template?.appState?.viewBackgroundColor ?? canvasBackgroundColor,
+        ...template?.appState?.frameRendering ? {frameRendering: template.appState.frameRendering} : {},
+      },
+      files,
+    },
+    {
+      withBackground:
+        exportSettings?.withBackground ?? plugin.settings.exportWithBackground,
+      withTheme,
+      isMask: exportSettings?.isMask ?? false,
+      ...filenameParts?.hasClippedFrameref
+      ? {frameRendering: {enabled: true, name: false, outline: false, clip: true}}
+      : {},
+    },
+    padding,
+    null,
+  );
+
+  if (withTheme && theme === "dark") addFilterToForeignObjects(svg);
+
+  if(
+    !(filenameParts.hasGroupref || filenameParts.hasFrameref || filenameParts.hasClippedFrameref) && 
+    (filenameParts.hasBlockref || filenameParts.hasSectionref)
+  ) {
+    let el = filenameParts.hasSectionref
+      ? getTextElementsMatchingQuery(elements,["# "+filenameParts.sectionref],true)
+      : elements.filter((el: ExcalidrawElement)=>el.id===filenameParts.blockref);
+    if(el.length>0) {
+      const containerId = el[0].containerId;
+      if(containerId) {
+        el = el.concat(elements.filter((el: ExcalidrawElement)=>el.id === containerId));
+      }
+      const elBB = plugin.ea.getBoundingBox(el);
+      const drawingBB = plugin.ea.getBoundingBox(elements);
+      svg.viewBox.baseVal.x = elBB.topX - drawingBB.topX;
+      svg.viewBox.baseVal.y = elBB.topY - drawingBB.topY;
+      const width = elBB.width + 2*padding;
+      svg.viewBox.baseVal.width = width;
+      const height = elBB.height + 2*padding;
+      svg.viewBox.baseVal.height = height;
+      svg.setAttribute("width", `${width}`);
+      svg.setAttribute("height", `${height}`);
+    }
+  }
+  if (template?.hasSVGwithBitmap) {
+    svg.setAttribute("hasbitmap", "true");
+  }
+  return svg;
+}
+
+function estimateLineBound(points: any): [number, number, number, number] {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+
+  for (const [x, y] of points) {
+    minX = Math.min(minX, x);
+    minY = Math.min(minY, y);
+    maxX = Math.max(maxX, x);
+    maxY = Math.max(maxY, y);
+  }
+
+  return [minX, minY, maxX, maxY];
+}
+
+export function estimateBounds(
+  elements: ExcalidrawElement[],
+): [number, number, number, number] {
+  const bb = getCommonBoundingBox(elements);
+  return [bb.minX, bb.minY, bb.maxX, bb.maxY];
+}
+
+export function repositionElementsToCursor(
+  elements: ExcalidrawElement[],
+  newPosition: { x: number; y: number },
+  center: boolean = false,
+): ExcalidrawElement[] {
+  const [x1, y1, x2, y2] = estimateBounds(elements);
+  let [offsetX, offsetY] = [0, 0];
+  if (center) {
+    [offsetX, offsetY] = [
+      newPosition.x - (x1 + x2) / 2,
+      newPosition.y - (y1 + y2) / 2,
+    ];
+  } else {
+    [offsetX, offsetY] = [newPosition.x - x1, newPosition.y - y1];
+  }
+
+  elements.forEach((element: any) => {
+    //using any so I can write read-only propery x & y
+    element.x = element.x + offsetX;
+    element.y = element.y + offsetY;
+  });
+  
+  return restore({elements}, null, null).elements;
+}
+
+export const insertLaTeXToView = (view: ExcalidrawView) => {
+  const app = view.plugin.app;
+  const ea = view.plugin.ea;
+  GenericInputPrompt.Prompt(
+    view,
+    view.plugin,
+    app,
+    t("ENTER_LATEX"),
+    "\\color{red}\\oint_S {E_n dA = \\frac{1}{{\\varepsilon _0 }}} Q_{inside}",
+    view.plugin.settings.latexBoilerplate,
+    undefined,
+    3
+  ).then(async (formula: string) => {
+    if (!formula) {
+      return;
+    }
+    ea.reset();
+    await ea.addLaTex(0, 0, formula);
+    ea.setView(view);
+    ea.addElementsToView(true, false, true);
+  });
+};
+
+export const search = async (view: ExcalidrawView) => {
+  const ea = view.plugin.ea;
+  ea.reset();
+  ea.setView(view);
+  const elements = ea.getViewElements().filter((el) => el.type === "text" || el.type === "frame" || el.link || el.type === "image");
+  if (elements.length === 0) {
+    return;
+  }
+  let text = await ScriptEngine.inputPrompt(
+    view,
+    view.plugin,
+    view.plugin.app,
+    "Search for",
+    "use quotation marks for exact match",
+    "",
+  );
+  if (!text) {
+    return;
+  }
+  const res = text.matchAll(/"(.*?)"/g);
+  let query: string[] = [];
+  let parts;
+  while (!(parts = res.next()).done) {
+    query.push(parts.value[1]);
+  }
+  text = text.replaceAll(/"(.*?)"/g, "");
+  query = query.concat(text.split(" ").filter((s:string) => s.length !== 0));
+
+  ea.targetView.selectElementsMatchingQuery(elements, query);
+};
+
+/**
+ * 
+ * @param elements 
+ * @param query 
+ * @param exactMatch - when searching for section header exactMatch should be set to true
+ * @returns the elements matching the query
+ */
+export const getTextElementsMatchingQuery = (
+  elements: ExcalidrawElement[],
+  query: string[],
+  exactMatch: boolean = false, //https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/530
+): ExcalidrawElement[] => {
+  if (!elements || elements.length === 0 || !query || query.length === 0) {
+    return [];
+  }
+
+  return elements.filter((el: any) =>
+    el.type === "text" && 
+    query.some((q) => {
+      if (exactMatch) {
+        const text = el.rawText.toLowerCase().split("\n")[0].trim();
+        const m = text.match(/^#*(# .*)/);
+        if (!m || m.length !== 2) {
+          return false;
+        }
+        return m[1] === q.toLowerCase();
+      }
+      const text = el.rawText.toLowerCase().replaceAll("\n", " ").trim();
+      return text.match(q.toLowerCase()); //to distinguish between "# frame" and "# frame 1" https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/530
+    }));
+}
+
+/**
+ * 
+ * @param elements 
+ * @param query 
+ * @param exactMatch - when searching for section header exactMatch should be set to true
+ * @returns the elements matching the query
+ */
+export const getFrameElementsMatchingQuery = (
+  elements: ExcalidrawElement[],
+  query: string[],
+  exactMatch: boolean = false, //https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/530
+): ExcalidrawElement[] => {
+  if (!elements || elements.length === 0 || !query || query.length === 0) {
+    return [];
+  }
+
+  return elements.filter((el: any) =>
+    el.type === "frame" && 
+    query.some((q) => {
+      if (exactMatch) {
+        const text = el.name?.toLowerCase().split("\n")[0].trim() ?? "";
+        const m = text.match(/^#*(# .*)/);
+        if (!m || m.length !== 2) {
+          return false;
+        }
+        return m[1] === q.toLowerCase();
+      }
+      const text = el.name
+       ? el.name.toLowerCase().replaceAll("\n", " ").trim()
+       : "";
+
+      return text.match(q.toLowerCase()); //to distinguish between "# frame" and "# frame 1" https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/530
+    }));
+}
+
+/**
+ * 
+ * @param elements 
+ * @param query 
+ * @param exactMatch - when searching for section header exactMatch should be set to true
+ * @returns the elements matching the query
+ */
+export const getElementsWithLinkMatchingQuery = (
+  elements: ExcalidrawElement[],
+  query: string[],
+  exactMatch: boolean = false, //https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/530
+): ExcalidrawElement[] => {
+  if (!elements || elements.length === 0 || !query || query.length === 0) {
+    return [];
+  }
+
+  return elements.filter((el: any) =>
+    el.link && 
+    query.some((q) => {
+      const text = el.link.toLowerCase().trim();
+      return exactMatch
+        ? (text === q.toLowerCase())
+        : text.match(q.toLowerCase());
+    }));
+}
+
+/**
+ * 
+ * @param elements 
+ * @param query 
+ * @param exactMatch - when searching for section header exactMatch should be set to true
+ * @returns the elements matching the query
+ */
+export const getImagesMatchingQuery = (
+  elements: ExcalidrawElement[],
+  query: string[],
+  excalidrawData: ExcalidrawData,
+  exactMatch: boolean = false, //https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/530
+): ExcalidrawElement[] => {
+  if (!elements || elements.length === 0 || !query || query.length === 0) {
+    return [];
+  }
+
+  return elements.filter((el: ExcalidrawElement) => 
+    el.type === "image" &&
+    query.some((q) => {
+      const filename = excalidrawData.getFile(el.fileId)?.file?.basename.toLowerCase().trim();
+      const equation = excalidrawData.getEquation(el.fileId)?.latex?.toLocaleLowerCase().trim();
+      const text = filename ?? equation;
+      if(!text) return false;
+      return exactMatch
+        ? (text === q.toLowerCase())
+        : text.match(q.toLowerCase());
+    }));
+  }
+
+export const cloneElement = (el: ExcalidrawElement):any => {
+  const newEl = JSON.parse(JSON.stringify(el));
+  newEl.version = el.version + 1;
+  newEl.updated = Date.now();
+  newEl.versionNonce = Math.floor(Math.random() * 1000000000);
+  return newEl;
+}
+
+export const verifyMinimumPluginVersion = (requiredVersion: string): boolean => {
+  return PLUGIN_VERSION === requiredVersion || isVersionNewerThanOther(PLUGIN_VERSION,requiredVersion);
+}
+
+export const getBoundTextElementId = (container: ExcalidrawElement | null) => {
+  return container?.boundElements?.length
+    ? container?.boundElements?.find((ele) => ele.type === "text")?.id || null
+    : null;
+};

src/utils/excalidrawViewUtils.ts

@@ -4,7 +4,7 @@ import { App, Modal, Notice, TFile, WorkspaceLeaf } from "obsidian";
 import { ExcalidrawAutomate } from "src/shared/ExcalidrawAutomate";
 import { REGEX_LINK, REG_LINKINDEX_HYPERLINK, getExcalidrawMarkdownHeaderSection, REGEX_TAGS } from "../shared/ExcalidrawData";
 import ExcalidrawView from "src/view/ExcalidrawView";
-import { ExcalidrawElement, ExcalidrawFrameElement } from "@zsviczian/excalidraw/types/excalidraw/element/types";
+import { ExcalidrawElement, ExcalidrawFrameElement, ExcalidrawImageElement } from "@zsviczian/excalidraw/types/excalidraw/element/types";
 import { getEmbeddedFilenameParts, getLinkParts, isImagePartRef } from "./utils";
 import { cleanSectionHeading } from "./obsidianUtils";
 import { getEA } from "src/core";
@@ -12,6 +12,8 @@ import { ExcalidrawImperativeAPI } from "@zsviczian/excalidraw/types/excalidraw/
 import { EmbeddableMDCustomProps } from "src/shared/Dialogs/EmbeddableSettings";
 import { nanoid } from "nanoid";
 import { t } from "src/lang/helpers";
+import { Mutable } from "@zsviczian/excalidraw/types/excalidraw/utility-types";
+import { EmbeddedFile } from "src/shared/EmbeddedFileLoader";
 
 export async function insertImageToView(
   ea: ExcalidrawAutomate,
@@ -44,8 +46,21 @@ export async function insertEmbeddableToView (
   shouldInsertToView: boolean = true,
 ):Promise<string> {
   if(shouldInsertToView) {ea.clear();}
-  ea.style.strokeColor = "transparent";
-  ea.style.backgroundColor = "transparent";
+  const api = ea.getExcalidrawAPI() as ExcalidrawImperativeAPI;
+  const st = api.getAppState();
+  
+  if(ea.plugin.settings.embeddableMarkdownDefaults.backgroundMatchElement) {
+    ea.style.backgroundColor = st.currentItemBackgroundColor;
+  } else {
+    ea.style.backgroundColor = "transparent";
+  }
+
+  if(ea.plugin.settings.embeddableMarkdownDefaults.borderMatchElement) {
+    ea.style.strokeColor = st.currentItemStrokeColor;
+  } else {
+    ea.style.strokeColor = "transparent";
+  }
+  
   if(file && (IMAGE_TYPES.contains(file.extension) || ea.isExcalidrawFile(file)) && !ANIMATED_IMAGE_TYPES.contains(file.extension)) {
     return await insertImageToView(ea, position, link??file, undefined, shouldInsertToView);
   } else {
@@ -418,4 +433,35 @@ export function displayFontMessage(app: App) {
   }
 
   modal.open();
+}
+
+export async function toggleImageAnchoring(
+  el: ExcalidrawImageElement,
+  view: ExcalidrawView,
+  shouldAnchor: boolean,
+  ef: EmbeddedFile,
+) {
+  const ea = getEA(view) as ExcalidrawAutomate;
+  let imgEl = view.getViewElements().find((x:ExcalidrawElement)=>x.id === el.id) as Mutable<ExcalidrawImageElement>;
+  if(!imgEl) {
+    ea.destroy();
+    return;
+  }
+  ea.copyViewElementsToEAforEditing([imgEl]);
+  imgEl = ea.getElements()[0] as Mutable<ExcalidrawImageElement>;
+  if(!imgEl.customData) {
+    imgEl.customData = {};
+  }
+  imgEl.customData.isAnchored = shouldAnchor;
+  if(shouldAnchor) {
+    const {height, width} = ef.size;
+    const dX = width - imgEl.width;
+    const dY = height - imgEl.height;
+    imgEl.height = height;
+    imgEl.width = width;
+    imgEl.x -= dX/2;
+    imgEl.y -= dY/2;
+  }
+  await ea.addElementsToView(false, false);
+  ea.destroy();
 }

src/utils/exportUtils.ts

@@ -0,0 +1,427 @@
+import { Notice } from 'obsidian';
+import { DEVICE } from 'src/constants/constants';
+import { t } from 'src/lang/helpers';
+
+const DPI = 96;
+
+export type PDFPageAlignment = "center" | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+export type PDFPageMarginString = "none" | "tiny" | "normal";
+
+export interface PDFExportScale {
+  fitToPage: number; // 0 means use zoom, >1 means fit to that many pages exactly
+  zoom?: number;
+}
+
+export interface PDFMargin {
+  left: number;
+  right: number;
+  top: number;
+  bottom: number;
+}
+
+export interface PDFPageProperties {
+  dimensions?: {width: number; height: number};
+  backgroundColor?: string;
+  margin: PDFMargin;
+  alignment: PDFPageAlignment;
+}
+
+export interface PageDimensions {
+  width: number;
+  height: number;
+}
+
+export type PageOrientation = "portrait" | "landscape";
+
+// All dimensions in points (pt)
+export const STANDARD_PAGE_SIZES = {
+  "A0": { width: 2383.94, height: 3370.39 },
+  "A1": { width: 1683.78, height: 2383.94 },
+  "A2": { width: 1190.55, height: 1683.78 },
+  "A3": { width: 841.89, height: 1190.55 },
+  "A4": { width: 595.28, height: 841.89 },
+  "A5": { width: 419.53, height: 595.28 },
+  "Letter": { width: 612, height: 792 },
+  "Legal": { width: 612, height: 1008 },
+  "Tabloid": { width: 792, height: 1224 },
+} as const;
+
+export type PageSize = keyof typeof STANDARD_PAGE_SIZES;
+
+export function getMarginValue(margin:PDFPageMarginString): PDFMargin {
+  switch(margin) {
+    case "none": return { left: 0, right: 0, top: 0, bottom: 0 };
+    case "tiny": return { left: 5, right: 5, top: 5, bottom: 5 };
+    case "normal": return { left: 25, right: 25, top: 25, bottom: 25 };
+    default: return { left: 25, right: 25, top: 25, bottom: 25 };
+  }
+}
+
+export function getPageDimensions(pageSize: PageSize, orientation: PageOrientation): PageDimensions {
+  const dimensions = STANDARD_PAGE_SIZES[pageSize];
+  return orientation === "portrait" 
+    ? { width: dimensions.width, height: dimensions.height }
+    : { width: dimensions.height, height: dimensions.width };
+}
+
+// Electron IPC interfaces
+interface PrintToPDFOptions {
+  includeName: boolean;
+  pageSize: string | { width: number; height: number };
+  landscape: boolean;
+  margins: { top: number; left: number; right: number; bottom: number };
+  scaleFactor: number;
+  scale: number;
+  open: boolean;
+  filepath: string;
+}
+
+interface SaveDialogOptions {
+  defaultPath: string;
+  filters: { name: string; extensions: string[] }[];
+  properties: string[];
+}
+
+interface SaveDialogReturnValue {
+  canceled: boolean;
+  filePath?: string;
+}
+
+interface ElectronAPI {
+  ipcRenderer: {
+    send(channel: string, ...args: any[]): void;
+    once(channel: string, func: (...args: any[]) => void): void;
+  };
+  remote: {
+    dialog: {
+      showSaveDialog(options: SaveDialogOptions): Promise<SaveDialogReturnValue>;
+    };
+  };
+}
+
+declare global {
+  interface Window {
+    electron: ElectronAPI;
+  }
+}
+
+function getPageSizePixels(pageSize: PageSize | PageDimensions, landscape = false): PageDimensions {
+  if (typeof pageSize === "object") return pageSize;
+  
+  const pageDimensions = STANDARD_PAGE_SIZES[pageSize];
+  if (!pageDimensions) {
+    throw new Error(`Unsupported page size: ${pageSize}`);
+  }
+
+  return landscape 
+    ? { width: pageDimensions.height, height: pageDimensions.width }
+    : { width: pageDimensions.width, height: pageDimensions.height };
+}
+
+function getPageSize(pageSize: PageSize | PageDimensions): string | { width: number; height: number } {
+  if (typeof pageSize === "string") return pageSize;
+
+  if (!pageSize || typeof pageSize !== "object" || 
+      typeof pageSize.width !== "number" || typeof pageSize.height !== "number") {
+    throw new Error("Invalid page dimensions");
+  }
+
+  return {
+    width: (pageSize.width / DPI),
+    height: (pageSize.height / DPI)
+  };
+}
+
+async function getSavePath(defaultPath: string): Promise<string | undefined> {
+  const result = await window.electron.remote.dialog.showSaveDialog({
+    defaultPath,
+    filters: [
+      { name: "PDF Files", extensions: ["pdf"] },
+      { name: "All Files", extensions: ["*"] }
+    ],
+    properties: ["showOverwriteConfirmation"]
+  });
+  return result.filePath;
+}
+
+async function printPdf(
+  elementToPrint: HTMLElement,
+  pdfPath: string,
+  bgColor: string,
+  pageSize: PageSize | PageDimensions,
+  isLandscape: boolean,
+  margins: { top: number; left: number; right: number; bottom: number }
+): Promise<void> {
+  const styleTag = document.createElement('style');
+  styleTag.textContent = `
+    @media print {
+      .print {
+        background-color: ${bgColor} !important;
+        display: flex !important;
+        justify-content: center !important;
+        align-items: center !important;
+        -webkit-print-color-adjust: exact !important;
+        print-color-adjust: exact !important;
+        flex-direction: column !important;
+        page-break-before: always;
+        margin: 0px !important;
+        padding: 0px !important;
+      }
+    }
+  `;
+  document.head.appendChild(styleTag);
+
+  const printDiv = document.body.createDiv('print');
+  printDiv.style.top = "0";
+  printDiv.style.left = "0";
+  printDiv.style.display = "flex";
+  printDiv.appendChild(elementToPrint);
+
+  const options: PrintToPDFOptions = {
+    includeName: false,
+    pageSize: getPageSize(pageSize),
+    landscape: isLandscape,
+    margins,
+    scaleFactor: 100,
+    scale: 1,
+    open: true,
+    filepath: pdfPath,
+  };
+
+  try {
+    await new Promise<void>((resolve) => {
+      window.electron.ipcRenderer.once('print-to-pdf', resolve);
+      window.electron.ipcRenderer.send('print-to-pdf', options);
+    });
+  } finally {
+    printDiv.remove();
+    styleTag.remove();
+  }
+}
+
+function calculateDimensions(
+  svgWidth: number,
+  svgHeight: number,
+  pageDim: PageDimensions,
+  margin: PDFMargin,
+  scale: PDFExportScale,
+  alignment: PDFPageAlignment
+): {
+  tiles: {
+    viewBox: string,
+    width: number,
+    height: number,
+    x: number,
+    y: number
+  }[],
+  pages: number
+} {
+  const availableWidth = pageDim.width - margin.left - margin.right;
+  const availableHeight = pageDim.height - margin.top - margin.bottom;
+
+  // If fitToPage is specified, find optimal zoom using binary search
+  if (scale.fitToPage > 0) {
+    let low = 0;
+    let high = 100;
+    let bestZoom = 1;
+    const tolerance = 0.000001;
+
+    while (high - low > tolerance) {
+      const mid = (low + high) / 2;
+      const scaledWidth = svgWidth * mid;
+      const scaledHeight = svgHeight * mid;
+      const pages = Math.ceil(scaledWidth / availableWidth) * 
+                   Math.ceil(scaledHeight / availableHeight);
+
+      if (pages > scale.fitToPage) {
+        high = mid;
+      } else {
+        bestZoom = mid;
+        low = mid;
+      }
+    }
+    scale.zoom = Math.round(bestZoom * 0.99999 * 1000000) / 1000000;
+  }
+
+  const finalWidth = svgWidth * (scale.zoom || 1);
+  const finalHeight = svgHeight * (scale.zoom || 1);
+
+  if (finalWidth <= availableWidth && finalHeight <= availableHeight) {
+    // Content fits on one page
+    const position = calculatePosition(
+      finalWidth,
+      finalHeight,
+      pageDim.width,
+      pageDim.height,
+      margin,
+      alignment
+    );
+
+    return {
+      tiles: [{
+        viewBox: `0 0 ${svgWidth} ${svgHeight}`,
+        width: finalWidth,
+        height: finalHeight,
+        x: position.x,
+        y: position.y
+      }],
+      pages: 1
+    };
+  }
+
+  // Content needs to be tiled
+  const tiles = [];
+  const cols = Math.ceil(finalWidth / availableWidth);
+  const rows = Math.ceil(finalHeight / availableHeight);
+
+  for (let row = 0; row < rows; row++) {
+    for (let col = 0; col < cols; col++) {
+      const tileX = (col * availableWidth) / (scale.zoom || 1);
+      const tileY = (row * availableHeight) / (scale.zoom || 1);
+      const tileWidth = Math.min(svgWidth - tileX, availableWidth / (scale.zoom || 1));
+      const tileHeight = Math.min(svgHeight - tileY, availableHeight / (scale.zoom || 1));
+      const scaledTileWidth = tileWidth * (scale.zoom || 1);
+      const scaledTileHeight = tileHeight * (scale.zoom || 1);
+
+      // Calculate position for each tile
+      const position = calculatePosition(
+        scaledTileWidth,
+        scaledTileHeight,
+        pageDim.width,
+        pageDim.height,
+        margin,
+        alignment
+      );
+
+      tiles.push({
+        viewBox: `${tileX} ${tileY} ${tileWidth} ${tileHeight}`,
+        width: scaledTileWidth,
+        height: scaledTileHeight,
+        x: position.x,
+        y: position.y
+      });
+    }
+  }
+
+  return { tiles, pages: tiles.length };
+}
+
+function calculatePosition(
+  svgWidth: number, 
+  svgHeight: number,
+  pageWidth: number,
+  pageHeight: number,
+  margin: PDFMargin,
+  alignment: PDFPageAlignment,
+): {x: number, y: number} {
+  const availableWidth = pageWidth - margin.left - margin.right;
+  const availableHeight = pageHeight - margin.top - margin.bottom;
+
+  let x = margin.left;
+  let y = margin.top;
+
+  // Handle horizontal alignment
+  if (alignment.includes('center')) {
+    x = margin.left + (availableWidth - svgWidth) / 2;
+  } else if (alignment.includes('right')) {
+    x = margin.left + availableWidth - svgWidth;
+  }
+
+  // Handle vertical alignment
+  if (alignment.startsWith('center')) {
+    y = margin.top + (availableHeight - svgHeight) / 2;
+  } else if (alignment.startsWith('bottom')) {
+    y = margin.top + availableHeight - svgHeight;
+  }
+
+  return {x, y};
+}
+
+export async function exportToPDF({
+  SVG,
+  scale = { fitToPage: 1, zoom: 1 },
+  pageProps,
+  filename
+}: {
+  SVG: SVGSVGElement[];
+  scale: PDFExportScale;
+  pageProps: PDFPageProperties;
+  filename: string;
+}): Promise<void> {
+  if (!DEVICE.isDesktop) {
+    new Notice(t("PDF_EXPORT_DESKTOP_ONLY"));
+    return;
+  }
+
+  const savePath = await getSavePath(filename);
+  if (!savePath) return;
+
+  const {width, height} = getPageSizePixels(pageProps.dimensions, false);
+  const allPagesDiv = createDiv();
+  allPagesDiv.style.width = "100%";
+  allPagesDiv.style.height = "fit-content";
+
+  let j = 1;
+  for (const svg of SVG) {
+    const svgWidth = parseFloat(svg.getAttribute('width') || '0');
+    const svgHeight = parseFloat(svg.getAttribute('height') || '0');
+    
+    const {tiles} = calculateDimensions(
+      svgWidth,
+      svgHeight,
+      pageProps.dimensions,
+      pageProps.margin,
+      scale,
+      pageProps.alignment
+    );
+
+    let i = 1;
+    for (const tile of tiles) {
+      const pageDiv = createDiv();
+      pageDiv.style.width = `${width}px`;
+      pageDiv.style.height = `${height}px`;
+      pageDiv.style.display = "flex";
+      pageDiv.style.justifyContent = "start";
+      pageDiv.style.alignItems = "left";
+      pageDiv.style.padding = `${pageProps.margin.top}px ${pageProps.margin.right}px ${pageProps.margin.bottom}px ${pageProps.margin.left}px`;
+
+      const clonedSVG = svg.cloneNode(true) as SVGSVGElement;
+      clonedSVG.setAttribute('viewBox', tile.viewBox);
+      clonedSVG.style.width = `${tile.width}px`;
+      clonedSVG.style.height = `${tile.height}px`;
+      clonedSVG.style.position = 'relative';
+      clonedSVG.style.left = `${tile.x}px`;
+      clonedSVG.style.top = `${tile.y}px`;
+
+      pageDiv.appendChild(clonedSVG);
+      allPagesDiv.appendChild(pageDiv);
+      i++;
+    }
+    j++;
+  }
+
+  new Notice(t("EXPORTDIALOG_PDF_PROGRESS_NOTICE"));
+  try {
+    await printPdf(
+      allPagesDiv,
+      savePath,
+      pageProps.backgroundColor || "#ffffff",
+      pageProps.dimensions,
+      false,
+      { top: 0, right: 0, bottom: 0, left: 0 }
+    );
+  } catch (error) {
+    console.error("Failed to export to PDF: ", error);
+    new Notice(t("EXPORTDIALOG_PDF_PROGRESS_ERROR"));
+  }
+  new Notice(t("EXPORTDIALOG_PDF_PROGRESS_DONE"));
+}
+
+export async function exportSVGToClipboard(svg: SVGSVGElement) {
+  try {
+    const svgString = svg.outerHTML;
+    await navigator.clipboard.writeText(svgString);
+  } catch (error) {
+    console.error("Failed to copy SVG to clipboard: ", error);
+  }
+}

src/utils/fileUtils.ts

@@ -290,6 +290,17 @@ export const blobToBase64 = async (blob: Blob): Promise<string> => {
   return btoa(binary);
 }
 
+export const arrayBufferToBase64 = (arrayBuffer: ArrayBuffer): string => {
+  const bytes = new Uint8Array(arrayBuffer);
+  let binary = '';
+  
+  for (let i = 0; i < bytes.length; i++) {
+    binary += String.fromCharCode(bytes[i]);
+  }
+
+  return btoa(binary);
+};
+
 export const getPDFDoc = async (f: TFile): Promise<any> => {
   if(typeof window.pdfjsLib === "undefined") await loadPdfJs();
   return await window.pdfjsLib.getDocument(EXCALIDRAW_PLUGIN.app.vault.getResourcePath(f)).promise;
@@ -482,3 +493,22 @@ export const hasExcalidrawEmbeddedImagesTreeChanged = (sourceFile: TFile, mtime:
   const fileList = getExcalidrawEmbeddedFilesFiletree(sourceFile, plugin);
   return fileList.some(f=>f.stat.mtime > mtime);
 }
+
+export async function createOrOverwriteFile(app: App, path: string, content: string | ArrayBuffer): Promise<TFile> {
+  const file = app.vault.getAbstractFileByPath(normalizePath(path));
+  if(content instanceof ArrayBuffer) {
+    if(file && file instanceof TFile) {
+      await app.vault.modifyBinary(file, content);
+      return file;
+    } else {
+      return await app.vault.createBinary(path, content);
+    }
+  }
+
+  if (file && file instanceof TFile) {
+    await app.vault.modify(file, content);
+    return file;
+  } else {
+    return await app.vault.create(path, content);
+  }
+}

src/utils/getElementAtPointer.ts

@@ -2,7 +2,7 @@ import { ExcalidrawElement, ExcalidrawImageElement, ExcalidrawTextElement } from
 import { REGEX_LINK, REG_LINKINDEX_HYPERLINK } from "../shared/ExcalidrawData";
 import ExcalidrawView, { TextMode } from "src/view/ExcalidrawView";
 import { rotatedDimensions } from "./utils";
-import { getBoundTextElementId } from "src/shared/ExcalidrawAutomate";
+import { getBoundTextElementId } from "src/utils/excalidrawAutomateUtils";
 
 export const getElementsAtPointer = (
   pointer: any,

src/utils/sliderUtils.ts

@@ -0,0 +1,38 @@
+import { Setting } from "obsidian";
+
+export type SliderSetting = {
+  name: string;
+  desc?: string | DocumentFragment; 
+  min: number;
+  max: number;
+  step: number;
+  value: number;
+  minWidth?: string;
+  onChange: (value: number) => void;
+}
+
+export const createSliderWithText = (
+  container: HTMLElement, 
+  settings: SliderSetting
+): void => {
+  let valueText: HTMLDivElement;
+
+  new Setting(container)
+    .setName(settings.name)
+    .setDesc(settings.desc || '')
+    .addSlider((slider) =>
+      slider
+        .setLimits(settings.min, settings.max, settings.step)
+        .setValue(settings.value)
+        .onChange(async (value) => {
+          valueText.innerText = ` ${value.toString()}`;
+          settings.onChange(value);
+        }),
+    )
+    .settingEl.createDiv("", (el) => {
+      valueText = el;
+      el.style.minWidth = settings.minWidth || '2.3em';
+      el.style.textAlign = "right";
+      el.innerText = ` ${settings.value.toString()}`;
+    });
+}

src/utils/utils.ts

@@ -18,20 +18,21 @@ import {
   getContainerElement,
 } from "../constants/constants";
 import ExcalidrawPlugin from "../core/main";
-import { ExcalidrawElement, ExcalidrawTextElement, ImageCrop } from "@zsviczian/excalidraw/types/excalidraw/element/types";
+import { ExcalidrawElement, ExcalidrawImageElement, ExcalidrawTextElement, ImageCrop } from "@zsviczian/excalidraw/types/excalidraw/element/types";
 import { ExportSettings } from "../view/ExcalidrawView";
 import { getDataURLFromURL, getIMGFilename, getMimeType, getURLImageExtension } from "./fileUtils";
 import { generateEmbeddableLink } from "./customEmbeddableUtils";
 import { FILENAMEPARTS } from "../types/utilTypes";
 import { Mutable } from "@zsviczian/excalidraw/types/excalidraw/utility-types";
 import { cleanBlockRef, cleanSectionHeading, getFileCSSClasses } from "./obsidianUtils";
-import { updateElementLinksToObsidianLinks } from "src/shared/ExcalidrawAutomate";
+import { updateElementLinksToObsidianLinks } from "./excalidrawAutomateUtils";
 import { CropImage } from "../shared/CropImage";
 import opentype from 'opentype.js';
 import { runCompressionWorker } from "src/shared/Workers/compression-worker";
 import Pool from "es6-promise-pool";
 import { FileData } from "../shared/EmbeddedFileLoader";
 import { t } from "src/lang/helpers";
+import ExcalidrawScene from "src/shared/svgToExcalidraw/elements/ExcalidrawScene";
 
 declare const PLUGIN_VERSION:string;
 declare var LZString: any;
@@ -415,11 +416,17 @@ export async function getImageSize (
   });
 };
 
-export function addAppendUpdateCustomData (el: Mutable<ExcalidrawElement>, newData: any): ExcalidrawElement {
+export function addAppendUpdateCustomData (
+  el: Mutable<ExcalidrawElement>,
+  newData: Partial<Record<string, unknown>>
+): ExcalidrawElement {
   if(!newData) return el;
   if(!el.customData) el.customData = {};
   for (const key in newData) {
-    if(typeof newData[key] === "undefined") continue;
+    if(typeof newData[key] === "undefined") {
+      delete el.customData[key];
+      continue;
+    }
     el.customData[key] = newData[key];
   }
   return el;
@@ -447,7 +454,7 @@ export function scaleLoadedImage (
 
     scene.elements
       .filter((e: any) => e.type === "image" && e.fileId === img.id)
-      .forEach((el: any) => {
+      .forEach((el: Mutable<ExcalidrawImageElement>) => {
         const [elWidth, elHeight] = [el.width, el.height];
         const maintainArea = img.shouldScale; //true if image should maintain its area, false if image should display at 100% its size
         const elCrop: ImageCrop = el.crop;

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

src/view/components/menu/ToolsPanel.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { ActionButton } from "./ActionButton";
 import { ICONS, saveIcon, stringToSVG } from "../../../constants/actionIcons";
 import { DEVICE, SCRIPT_INSTALL_FOLDER } from "../../../constants/constants";
-import { insertLaTeXToView, search } from "../../../shared/ExcalidrawAutomate";
+import { insertLaTeXToView, search } from "../../../utils/excalidrawAutomateUtils";
 import ExcalidrawView, { TextMode } from "../../ExcalidrawView";
 import { t } from "../../../lang/helpers";
 import { ReleaseNotes } from "../../../shared/Dialogs/ReleaseNotes";

src/view/managers/DropManager.ts

@@ -0,0 +1,628 @@
+
+import { DEBUGGING, debug } from "src/utils/debugHelper";
+import ExcalidrawView from "../ExcalidrawView";
+import { App, Notice, TFile } from "obsidian";
+import { AppState, ExcalidrawImperativeAPI } from "@zsviczian/excalidraw/types/excalidraw/types";
+import { DEVICE, IMAGE_TYPES, REG_LINKINDEX_INVALIDCHARS, viewportCoordsToSceneCoords } from "src/constants/constants";
+import { internalDragModifierType, isWinCTRLorMacCMD, localFileDragModifierType, modifierKeyTooltipMessages, webbrowserDragModifierType } from "src/utils/modifierkeyHelper";
+import { errorlog, hyperlinkIsImage, hyperlinkIsYouTubeLink } from "src/utils/utils";
+import { InsertPDFModal } from "src/shared/Dialogs/InsertPDFModal";
+import { ExcalidrawAutomate } from "src/shared/ExcalidrawAutomate";
+import { getEA } from "src/core";
+import { insertEmbeddableToView, insertImageToView } from "src/utils/excalidrawViewUtils";
+import { t } from "src/lang/helpers";
+import ExcalidrawPlugin from "src/core/main";
+import { getInternalLinkOrFileURLLink, getNewUniqueFilepath, getURLImageExtension, splitFolderAndFilename } from "src/utils/fileUtils";
+import { getAttachmentsFolderAndFilePath } from "src/utils/obsidianUtils";
+import { ScriptEngine } from "src/shared/Scripts";
+import { UniversalInsertFileModal } from "src/shared/Dialogs/UniversalInsertFileModal";
+import { Position } from "src/types/excalidrawViewTypes";
+
+/*
+static getDropAction(event: DragEvent): string {
+  // Get modifier action
+}
+
+static parseDropData(event: DragEvent): DropData {
+  // Parse drop data into clean format
+}
+
+static handleInternalDrop(data: DropData, context: DropContext): boolean {
+  // Handle Obsidian internal file drops
+}
+
+static handleExternalFileDrop(data: DropData, context: DropContext): boolean {
+  // Handle external file drops
+}
+
+static handleTextDrop(data: DropData, context: DropContext): boolean {
+  // Handle text/url drops
+}*/
+
+export class DropManager {
+  private view: ExcalidrawView;
+  private app: App;
+  private draginfoDiv: HTMLDivElement;
+  
+  constructor(view: ExcalidrawView) {
+    this.view = view;
+    this.app = this.view.app;
+  }
+
+  public destroy() {
+    if(this.draginfoDiv) {
+      this.ownerDocument.body.removeChild(this.draginfoDiv);
+      delete this.draginfoDiv;
+    }
+  }
+
+  get ownerDocument(): Document {
+    return this.view.ownerDocument;
+  }
+
+  get currentPosition(): Position {
+    return this.view.currentPosition;
+  }
+
+  set currentPosition(pos: Position) {
+    this.view.currentPosition = pos;
+  }
+
+  get excalidrawAPI():ExcalidrawImperativeAPI {
+    return this.view.excalidrawAPI;
+  }
+
+  get plugin(): ExcalidrawPlugin {
+    return this.view.plugin;
+  }
+
+  get file(): TFile {
+    return this.view.file;
+  }
+
+  public onDrop (event: React.DragEvent<HTMLDivElement>): boolean {
+    (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.onDrop, "ExcalidrawView.onDrop", event);
+    if(this.draginfoDiv) {
+      this.ownerDocument.body.removeChild(this.draginfoDiv);
+      delete this.draginfoDiv;
+    }
+    const api = this.excalidrawAPI;
+    if (!api) {
+      return false;
+    }
+    const st: AppState = api.getAppState();
+    this.currentPosition = viewportCoordsToSceneCoords(
+      { clientX: event.clientX, clientY: event.clientY },
+      st,
+    );
+    const draggable = (this.app as any).dragManager.draggable;
+    const internalDragAction = internalDragModifierType(event);
+    const externalDragAction = webbrowserDragModifierType(event);
+    const localFileDragAction = localFileDragModifierType(event);
+
+    //Call Excalidraw Automate onDropHook
+    const onDropHook = (
+      type: "file" | "text" | "unknown",
+      files: TFile[],
+      text: string,
+    ): boolean => {
+      if (this.view.getHookServer().onDropHook) {
+        try {
+          return this.view.getHookServer().onDropHook({
+            ea: this.view.getHookServer(), //the ExcalidrawAutomate object
+            event, //React.DragEvent<HTMLDivElement>
+            draggable, //Obsidian draggable object
+            type, //"file"|"text"
+            payload: {
+              files, //TFile[] array of dropped files
+              text, //string
+            },
+            excalidrawFile: this.file, //the file receiving the drop event
+            view: this.view, //the excalidraw view receiving the drop
+            pointerPosition: this.currentPosition, //the pointer position on canvas at the time of drop
+          });
+        } catch (e) {
+          new Notice("on drop hook error. See console log for details");
+          errorlog({ where: "ExcalidrawView.onDrop", error: e });
+          return false;
+        }
+      } else {
+        return false;
+      }
+    };
+
+    //---------------------------------------------------------------------------------
+    // Obsidian internal drag event
+    //---------------------------------------------------------------------------------
+    switch (draggable?.type) {
+      case "file":
+        if (!onDropHook("file", [draggable.file], null)) {
+          const file:TFile = draggable.file;
+          //https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/422
+          if (file.path.match(REG_LINKINDEX_INVALIDCHARS)) {
+            new Notice(t("FILENAME_INVALID_CHARS"), 4000);
+            return false;
+          }
+          if (
+            ["image", "image-fullsize"].contains(internalDragAction) && 
+            (IMAGE_TYPES.contains(file.extension) ||
+              file.extension === "md"  ||
+              file.extension.toLowerCase() === "pdf" )
+          ) {
+            if(file.extension.toLowerCase() === "pdf") {
+              const insertPDFModal = new InsertPDFModal(this.plugin, this.view);
+              insertPDFModal.open(file);
+            } else {
+              (async () => {
+                const ea: ExcalidrawAutomate = getEA(this.view);
+                ea.selectElementsInView([
+                  await insertImageToView(
+                    ea,
+                    this.currentPosition,
+                    file,
+                    !(internalDragAction==="image-fullsize")
+                  )
+                ]);
+                ea.destroy();
+              })();
+            }
+            return false;
+          }
+          
+          if (internalDragAction === "embeddable") {
+            (async () => {
+              const ea: ExcalidrawAutomate = getEA(this.view);
+              ea.selectElementsInView([
+                await insertEmbeddableToView(
+                  ea,
+                  this.currentPosition,
+                  file,
+                )
+              ]);
+              ea.destroy();
+            })();
+            return false;
+          }
+
+          //internalDragAction === "link"
+          this.view.addText(
+            `[[${this.app.metadataCache.fileToLinktext(
+              draggable.file,
+              this.file.path,
+              true,
+            )}]]`,
+          );
+        }
+        return false;
+      case "files":
+        if (!onDropHook("file", draggable.files, null)) {
+          (async () => {
+            if (["image", "image-fullsize"].contains(internalDragAction)) {
+              const ea:ExcalidrawAutomate = getEA(this.view);
+              ea.canvas.theme = api.getAppState().theme;
+              let counter:number = 0;
+              const ids:string[] = [];
+              for (const f of draggable.files) {
+                if ((IMAGE_TYPES.contains(f.extension) || f.extension === "md")) {
+                  ids.push(await ea.addImage(
+                    this.currentPosition.x + counter*50,
+                    this.currentPosition.y + counter*50,
+                    f,
+                    !(internalDragAction==="image-fullsize"),
+                  ));
+                  counter++;
+                  await ea.addElementsToView(false, false, true);
+                  ea.selectElementsInView(ids);
+                }
+                if (f.extension.toLowerCase() === "pdf") {
+                  const insertPDFModal = new InsertPDFModal(this.plugin, this.view);
+                  insertPDFModal.open(f);
+                }
+              }
+              ea.destroy();
+              return;
+            }
+
+            if (internalDragAction === "embeddable") {
+              const ea:ExcalidrawAutomate = getEA(this.view);
+              let column:number = 0;
+              let row:number = 0;
+              const ids:string[] = [];
+              for (const f of draggable.files) {
+                ids.push(await insertEmbeddableToView(
+                  ea,
+                  {
+                    x:this.currentPosition.x + column*500,
+                    y:this.currentPosition.y + row*550
+                  },
+                  f,
+                ));
+                column = (column + 1) % 3;
+                if(column === 0) {
+                  row++;
+                }
+              }
+              ea.destroy();
+              return false;
+            }
+
+            //internalDragAction === "link"
+            for (const f of draggable.files) {
+              await this.view.addText(
+                `[[${this.app.metadataCache.fileToLinktext(
+                  f,
+                  this.file.path,
+                  true,
+                )}]]`, undefined,false
+              );
+              this.currentPosition.y += st.currentItemFontSize * 2;
+            }
+            this.view.save(false);
+          })();
+        }
+        return false;
+    }
+
+    //---------------------------------------------------------------------------------
+    // externalDragAction
+    //---------------------------------------------------------------------------------
+    if (event.dataTransfer.types.includes("Files")) {
+      if (event.dataTransfer.types.includes("text/plain")) {
+        const text: string = event.dataTransfer.getData("text");
+        if (text && onDropHook("text", null, text)) {
+          return false;
+        }
+        if(text && (externalDragAction === "image-url") && hyperlinkIsImage(text)) {
+          this.view.addImageWithURL(text);
+          return false;
+        }
+        if(text && (externalDragAction === "link")) {
+          if (
+            this.plugin.settings.iframelyAllowed &&
+            text.match(/^https?:\/\/\S*$/)
+          ) {
+            this.view.addTextWithIframely(text);
+            return false;
+          } else {
+            this.view.addText(text);
+            return false;
+          }
+        }
+        if(text && (externalDragAction === "embeddable")) {
+          const ea = getEA(this.view) as ExcalidrawAutomate;
+          insertEmbeddableToView(
+            ea,
+            this.currentPosition,
+            undefined,
+            text,
+          ).then(()=>ea.destroy());
+          return false;
+        }
+      }
+
+      if(event.dataTransfer.types.includes("text/html")) {
+        const html = event.dataTransfer.getData("text/html");
+        const src = html.match(/src=["']([^"']*)["']/)
+        if(src && (externalDragAction === "image-url") && hyperlinkIsImage(src[1])) {
+          this.view.addImageWithURL(src[1]);
+          return false;
+        }
+        if(src && (externalDragAction === "link")) {
+          if (
+            this.plugin.settings.iframelyAllowed &&
+            src[1].match(/^https?:\/\/\S*$/)
+          ) {
+            this.view.addTextWithIframely(src[1]);
+            return false;
+          } else {
+            this.view.addText(src[1]);
+            return false;
+          }
+        }
+        if(src && (externalDragAction === "embeddable")) {
+          const ea = getEA(this.view) as ExcalidrawAutomate;
+          insertEmbeddableToView(
+            ea,
+            this.currentPosition,
+            undefined,
+            src[1],
+          ).then(ea.destroy);
+          return false;
+        }
+      }
+      
+      if (event.dataTransfer.types.length >= 1 && ["image-url","image-import","embeddable"].contains(localFileDragAction)) {
+        const files = Array.from(event.dataTransfer.files || []);
+        
+        for(let i = 0; i < files.length; i++) {
+          // Try multiple ways to get file path
+          const file = files[i];
+          let path = file?.path
+
+          if(!path && file && DEVICE.isDesktop) {
+            //https://www.electronjs.org/docs/latest/breaking-changes#removed-filepath
+            const { webUtils } = require('electron');
+            if(webUtils && webUtils.getPathForFile) {
+              path = webUtils.getPathForFile(file);
+            }
+          }
+          if(!path) {            
+            new Notice(t("ERROR_CANT_READ_FILEPATH"),6000);
+            return true; //excalidarw to continue processing
+          }
+          const link = getInternalLinkOrFileURLLink(path, this.plugin, event.dataTransfer.files[i].name, this.file);
+          const {x,y} = this.currentPosition;
+          const pos = {x:x+i*300, y:y+i*300};
+          if(link.isInternal) {
+            if(localFileDragAction === "embeddable") {
+              const ea = getEA(this.view) as ExcalidrawAutomate;
+              insertEmbeddableToView(ea, pos, link.file).then(()=>ea.destroy());
+            } else {
+              if(link.file.extension === "pdf") {
+                const insertPDFModal = new InsertPDFModal(this.plugin, this.view);
+                insertPDFModal.open(link.file);
+              }
+              const ea = getEA(this.view) as ExcalidrawAutomate;
+              insertImageToView(ea, pos, link.file).then(()=>ea.destroy()) ;
+            }
+          } else {
+            const extension = getURLImageExtension(link.url);
+            if(localFileDragAction === "image-import") {
+              if (IMAGE_TYPES.contains(extension)) {
+                (async () => {
+                  const droppedFilename = event.dataTransfer.files[i].name;
+                  const fileToImport = await event.dataTransfer.files[i].arrayBuffer();
+                  let {folder:_, filepath} = await getAttachmentsFolderAndFilePath(this.app, this.file.path, droppedFilename);
+                  const maybeFile = this.app.vault.getAbstractFileByPath(filepath);
+                  if(maybeFile && maybeFile instanceof TFile) {
+                    const action = await ScriptEngine.suggester(
+                      this.app,[
+                        "Use the file already in the Vault instead of importing",
+                        "Overwrite existing file in the Vault",
+                        "Import the file with a new name",
+                      ],[
+                        "Use",
+                        "Overwrite",
+                        "Import",
+                      ],
+                      "A file with the same name/path already exists in the Vault",
+                    );
+                    switch(action) {
+                      case "Import":
+                        const {folderpath,filename,basename:_,extension:__} = splitFolderAndFilename(filepath);
+                        filepath = getNewUniqueFilepath(this.app.vault, filename, folderpath);
+                        break;
+                        case "Overwrite":
+                          await this.app.vault.modifyBinary(maybeFile, fileToImport);
+                          // there is deliberately no break here
+                      case "Use":
+                      default:
+                        const ea = getEA(this.view) as ExcalidrawAutomate;
+                        await insertImageToView(ea, pos, maybeFile);
+                        ea.destroy();
+                        return false;
+                    }
+                  }
+                  const file = await this.app.vault.createBinary(filepath, fileToImport)
+                  const ea = getEA(this.view) as ExcalidrawAutomate;
+                  await insertImageToView(ea, pos, file);
+                  ea.destroy();
+                })();
+              } else if(extension === "excalidraw") {
+                return true; //excalidarw to continue processing
+              } else {
+                (async () => {
+                  const {folder:_, filepath} = await getAttachmentsFolderAndFilePath(this.app, this.file.path,event.dataTransfer.files[i].name);
+                  const file = await this.app.vault.createBinary(filepath, await event.dataTransfer.files[i].arrayBuffer());
+                  const modal = new UniversalInsertFileModal(this.plugin, this.view);
+                  modal.open(file, pos);
+                })();
+              }
+            }
+            else if(localFileDragAction === "embeddable" || !IMAGE_TYPES.contains(extension)) {
+              const ea = getEA(this.view) as ExcalidrawAutomate;
+              insertEmbeddableToView(ea, pos, null, link.url).then(()=>ea.destroy());
+              if(localFileDragAction !== "embeddable") {
+                new Notice("Not imported to Vault. Embedded with local URI");
+              }
+            } else {
+              const ea = getEA(this.view) as ExcalidrawAutomate;
+              insertImageToView(ea, pos, link.url).then(()=>ea.destroy());
+            }
+          }
+        };
+        return false;
+      }
+
+      if(event.dataTransfer.types.length >= 1 && localFileDragAction === "link") {
+        const ea = getEA(this.view) as ExcalidrawAutomate;
+        for(let i=0;i<event.dataTransfer.files.length;i++) {
+          const file = event.dataTransfer.files[i];
+          let path = file?.path;
+          const name = file?.name;
+          if(!path && file && DEVICE.isDesktop) {
+            //https://www.electronjs.org/docs/latest/breaking-changes#removed-filepath
+            const { webUtils } = require('electron');
+            if(webUtils && webUtils.getPathForFile) {
+              path = webUtils.getPathForFile(file);
+            }
+          }
+          if(!path || !name) {
+            new Notice(t("ERROR_CANT_READ_FILEPATH"),6000);
+            ea.destroy();
+            return true; //excalidarw to continue processing
+          }
+          const link = getInternalLinkOrFileURLLink(path, this.plugin, name, this.file);
+          const id = ea.addText(
+            this.currentPosition.x+i*40,
+            this.currentPosition.y+i*20,
+            link.isInternal ? link.link :`📂 ${name}`);
+          if(!link.isInternal) {
+            ea.getElement(id).link = link.link;
+          }
+        }
+        ea.addElementsToView().then(()=>ea.destroy());
+        return false;
+      }
+
+      return true;
+    }
+
+    if (event.dataTransfer.types.includes("text/plain") || event.dataTransfer.types.includes("text/uri-list") || event.dataTransfer.types.includes("text/html")) {
+
+      const html = event.dataTransfer.getData("text/html");
+      const src = html.match(/src=["']([^"']*)["']/);
+      const htmlText = src ? src[1] : "";
+      const textText = event.dataTransfer.getData("text");
+      const uriText = event.dataTransfer.getData("text/uri-list");
+
+      let text: string = src ? htmlText : textText;
+      if (!text || text === "") {
+        text = uriText
+      }
+      if (!text || text === "") {
+        return true;
+      }
+      if (!onDropHook("text", null, text)) {
+        if(text && (externalDragAction==="embeddable") && /^(blob:)?(http|https):\/\/[^\s/$.?#].[^\s]*$/.test(text)) {
+          return true;
+        }
+        if(text && (externalDragAction==="image-url") && hyperlinkIsYouTubeLink(text)) {
+          this.view.addYouTubeThumbnail(text);
+          return false;
+        }
+        if(uriText && (externalDragAction==="image-url") && hyperlinkIsYouTubeLink(uriText)) {
+          this.view.addYouTubeThumbnail(uriText);
+          return false;
+        }
+        if(text && (externalDragAction==="image-url") && hyperlinkIsImage(text)) {
+          this.view.addImageWithURL(text);
+          return false;
+        }
+        if(uriText && (externalDragAction==="image-url") && hyperlinkIsImage(uriText)) {
+          this.view.addImageWithURL(uriText);
+          return false;
+        }
+        if(text && (externalDragAction==="image-import") && hyperlinkIsImage(text)) {
+          this.view.addImageSaveToVault(text);
+          return false;
+        }
+        if(uriText && (externalDragAction==="image-import") && hyperlinkIsImage(uriText)) {
+          this.view.addImageSaveToVault(uriText);
+          return false;
+        }
+        if (
+          this.plugin.settings.iframelyAllowed &&
+          text.match(/^https?:\/\/\S*$/)
+        ) {
+          this.view.addTextWithIframely(text);
+          return false;
+        }
+        //https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/599
+        if(text.startsWith("obsidian://open?vault=")) {
+          const html = event.dataTransfer.getData("text/html");
+          if(html) {
+            const path = html.match(/href="app:\/\/obsidian\.md\/(.*?)"/);
+            if(path.length === 2) {
+              const link = decodeURIComponent(path[1]).split("#");
+              const f = this.app.vault.getAbstractFileByPath(link[0]);
+              if(f && f instanceof TFile) {
+                const path = this.app.metadataCache.fileToLinktext(f,this.file.path);
+                this.view.addText(`[[${
+                  path +
+                  (link.length>1 ? "#" + link[1] + "|" + path : "")
+                }]]`);
+                return;
+              }
+              this.view.addText(`[[${decodeURIComponent(path[1])}]]`);
+              return false;  
+            }
+          }
+          const path = text.split("file=");
+          if(path.length === 2) {
+            this.view.addText(`[[${decodeURIComponent(path[1])}]]`);
+            return false;
+          }
+        }
+        this.view.addText(text.replace(/(!\[\[.*#[^\]]*\]\])/g, "$1{40}"));
+      }
+      return false;
+    }
+    if (onDropHook("unknown", null, null)) {
+      return false;
+    }
+    return true;
+  }
+
+  public onDragOver(e: any) {
+    const action = this.dropAction(e.dataTransfer);
+    if (action) {
+      if(!this.draginfoDiv) {
+        this.draginfoDiv = createDiv({cls:"excalidraw-draginfo"});
+        this.ownerDocument.body.appendChild(this.draginfoDiv);
+      }
+      let msg: string = "";
+      if((this.app as any).dragManager.draggable) {
+        //drag from Obsidian file manager
+        msg = modifierKeyTooltipMessages().InternalDragAction[internalDragModifierType(e)];
+      } else if(e.dataTransfer.types.length === 1 && e.dataTransfer.types.includes("Files")) {
+        //drag from OS file manager
+        msg = modifierKeyTooltipMessages().LocalFileDragAction[localFileDragModifierType(e)];
+        if(DEVICE.isMacOS && isWinCTRLorMacCMD(e)) {
+          msg = "CMD is reserved by MacOS for file system drag actions.\nCan't use it in Obsidian.\nUse a combination of SHIFT, CTRL, OPT instead."
+        }
+      } else {
+        //drag from Internet
+        msg = modifierKeyTooltipMessages().WebBrowserDragAction[webbrowserDragModifierType(e)];
+      }
+      if(!e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
+        msg += DEVICE.isMacOS || DEVICE.isIOS
+        ? "\nTry SHIFT, OPT, CTRL combinations for other drop actions" 
+        : "\nTry SHIFT, CTRL, ALT, Meta combinations for other drop actions";
+      }
+      if(this.draginfoDiv.innerText !== msg) this.draginfoDiv.innerText = msg;
+      const top = `${e.clientY-parseFloat(getComputedStyle(this.draginfoDiv).fontSize)*8}px`;
+      const left = `${e.clientX-this.draginfoDiv.clientWidth/2}px`;
+      if(this.draginfoDiv.style.top !== top) this.draginfoDiv.style.top = top;
+      if(this.draginfoDiv.style.left !== left) this.draginfoDiv.style.left = left;
+      e.dataTransfer.dropEffect = action;
+      e.preventDefault();
+      return false;
+    }
+  }
+
+  public onDragLeave() {
+    if(this.draginfoDiv) {
+      this.ownerDocument.body.removeChild(this.draginfoDiv);
+      delete this.draginfoDiv;
+    }
+  }
+
+  private dropAction(transfer: DataTransfer) {
+    (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.dropAction, "ExcalidrawView.dropAction");
+    // Return a 'copy' or 'link' action according to the content types, or undefined if no recognized type
+    const files = (this.app as any).dragManager.draggable?.files;
+    if (files) {
+      if (files[0] == this.file) {
+        files.shift();
+        (
+          this.app as any
+        ).dragManager.draggable.title = `${files.length} files`;
+      }
+    }
+    if (
+      ["file", "files"].includes(
+        (this.app as any).dragManager.draggable?.type,
+      )
+    ) {
+      return "link";
+    }
+    if (
+      transfer.types?.includes("text/html") ||
+      transfer.types?.includes("text/plain") ||
+      transfer.types?.includes("Files")
+    ) {
+      return "copy";
+    }
+  };
+}

styles.css

@@ -6,7 +6,7 @@
   .excalidraw-wrapper {
     height: 100%;
     margin: 0px;
-    background-color: white;
+    background-color: var(--background-primary);
     position:relative;
   }
   
@@ -80,6 +80,11 @@ button.ToolIcon_type_button[title="Export"] {
   width: 9em;
 }
 
+.excalidraw-export-button {
+  width: 9em;
+  margin-left: 10px;
+}
+
 .excalidraw-prompt-buttons-div {
   display: flex;
   flex-direction: row;
@@ -87,6 +92,13 @@ button.ToolIcon_type_button[title="Export"] {
   justify-content: space-evenly;
 }
 
+.excalidraw-export-buttons-div {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: right;
+}
+
 li[data-testid] {
   border: 0 !important;
   margin: 0 !important;
@@ -104,6 +116,7 @@ li[data-testid] {
   border: 0 !important;
   box-shadow: 0 !important;
   background-color: transparent !important;
+  overflow-y: auto !important;
 } 
 
 .excalidraw .popover {
@@ -324,6 +337,16 @@ label.color-input-container > input {
   display: none !important;
 }
 
+.excalidraw .App-toolbar-content .dropdown-menu {
+  max-height: 70vh;
+  overflow-y: auto;
+}
+
+.excalidraw .panelColumn {
+  max-height: 70vh;
+  overflow-y: auto;
+}
+
 .excalidraw .panelColumn .buttonList {
   max-width: 13rem;
 }
@@ -361,9 +384,16 @@ div.excalidraw-draginfo {
 }
 
 .excalidraw [data-radix-popper-content-wrapper] {
+  /*Overrides position:fixed in popover*/
   position: absolute !important;
 }
 
+.excalidraw .Island .App-mobile-menu,
+.excalidraw .Island.App-menu__left {
+  /*Arrow Picker Popover Overflow*/
+	overflow: visible;
+}
+
 .excalidraw__embeddable-container .view-header {
   display: none !important;
 }
@@ -664,4 +694,22 @@ textarea.excalidraw-wysiwyg, .excalidraw input {
 .excalidraw-setting-desc:hover {
   background-color: var(--background-modifier-hover);
   color: var(--text-accent);
+}
+
+.excalidraw-release .nav-buttons-container {
+  display: flex;
+  margin-bottom: 20px;
+  border-bottom: 2px solid var(--background-modifier-border);
+}
+
+.excalidraw-release .nav-button {
+  padding: 8px 16px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
+
+.excalidraw-release .nav-button.is-active {
+  border-bottom: 2px solid var(--interactive-accent);
+  margin-bottom: -2px;
 }