2.5.0-beta-3

manifest-beta.json

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

package.json

@@ -19,7 +19,7 @@
   "license": "MIT",
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "@zsviczian/excalidraw": "0.17.1-obsidian-51",
+    "@zsviczian/excalidraw": "0.17.1-obsidian-52",
     "chroma-js": "^2.4.2",
     "clsx": "^2.0.0",
     "@zsviczian/colormaster": "^1.2.2",

src/ExcalidrawAutomate.ts

@@ -2989,8 +2989,12 @@ async function getTemplate(
         ));
     }
 
-    const fileIDWhiteList = new Set<FileId>();
-    groupElements.filter(el=>el.type==="image").forEach((el:ExcalidrawImageElement)=>fileIDWhiteList.add(el.fileId));
+    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});
@@ -3019,11 +3023,15 @@ async function getTemplate(
     let files:any = {};
     const sceneFilesSize = Object.values(scene.files).length;
     if (sceneFilesSize > 0) {
-      if(sceneFilesSize === fileIDWhiteList.size)
-      Object.values(scene.files).filter((f: any) => fileIDWhiteList.has(f.id)).forEach((f: any) => {
-        files[f.id] = f;
-      });
+      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;
+      }
     }
+
     return {
       elements: convertMarkdownLinksToObsidianURLs
         ? updateElementLinksToObsidianLinks({

src/ExcalidrawView.ts

@@ -2325,14 +2325,35 @@ export default class ExcalidrawView extends TextFileView {
     });
   }
 
-  private getGridColor(bgColor: string, st: AppState):{Bold: string, Regular: string} {
+  private getGridColor(bgColor: string, st: AppState): { Bold: string, Regular: string } {
     (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.getGridColor, "ExcalidrawView.getGridColor", bgColor, st);
+  
     const cm = this.plugin.ea.getCM(bgColor);
     const isDark = cm.isDark();
-    const Regular = (isDark ? cm.lighterBy(7) : cm.darkerBy(7)).stringHEX({alpha: false});
-    const Bold = (isDark ? cm.lighterBy(14) : cm.darkerBy(14)).stringHEX({alpha: false});
-    return {Bold, Regular};
+  
+    let Regular: string;
+    let Bold: string;
+    const opacity = this.plugin.settings.gridSettings.OPACITY/100;
+
+    if (this.plugin.settings.gridSettings.DYNAMIC_COLOR) {
+      // Dynamic color: concatenate opacity to the HEX string  
+      Regular = (isDark ? cm.lighterBy(7) : cm.darkerBy(7)).alphaTo(opacity).stringRGB({ alpha: true });
+      Bold = (isDark ? cm.lighterBy(14) : cm.darkerBy(14)).alphaTo(opacity).stringRGB({ alpha: true });
+    } else {
+      // Custom color handling
+      const customCM = this.plugin.ea.getCM(this.plugin.settings.gridSettings.COLOR);
+      const customIsDark = customCM.isDark();
+      
+      // Regular uses the custom color directly
+      Regular = customCM.alphaTo(opacity).stringRGB({ alpha: true });
+      
+      // Bold is 7 shades lighter or darker based on the custom color's darkness
+      Bold = (customIsDark ? customCM.lighterBy(7) : customCM.darkerBy(7)).alphaTo(opacity).stringRGB({ alpha: true });
+    }
+  
+    return { Bold, Regular };
   }
+  
 
   public activeLoader: EmbeddedFilesLoader = null;
   private nextLoader: EmbeddedFilesLoader = null;
@@ -3744,10 +3765,18 @@ export default class ExcalidrawView extends TextFileView {
     }
   }
 
+  public updateGridColor(canvasColor?: string, st?: any) {
+    if(!canvasColor) {
+      st = (this.excalidrawAPI as ExcalidrawImperativeAPI).getAppState();
+      canvasColor = canvasColor ?? st.viewBackgroundColor === "transparent" ? "white" : st.viewBackgroundColor;
+    }
+    window.setTimeout(()=>this.updateScene({appState:{gridColor: this.getGridColor(canvasColor, st)}, storeAction: "update"}));
+  }
+
   private canvasColorChangeHook(st: AppState) {
     (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.canvasColorChangeHook, "ExcalidrawView.canvasColorChangeHook", st);
     const canvasColor = st.viewBackgroundColor === "transparent" ? "white" : st.viewBackgroundColor;
-    window.setTimeout(()=>this.updateScene({appState:{gridColor: this.getGridColor(canvasColor, st)}, storeAction: "update"}));
+    this.updateGridColor(canvasColor,st);
     setDynamicStyle(this.plugin.ea,this,canvasColor,this.plugin.settings.dynamicStyling);
     if(this.plugin.ea.onCanvasColorChangeHook) {
       try {

src/lang/locale/en.ts

@@ -395,6 +395,14 @@ 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%).",
+  GRID_HEAD: "Grid",
+  GRID_DYNAMIC_COLOR_NAME: "Dynamic grid color",
+  GRID_DYNAMIC_COLOR_DESC:
+    "<b><u>Toggle ON:</u></b>Change grid color to match the canvas color<br><b><u>Toggle OFF:</u></b>Use the color below as the grid color",
+  GRID_COLOR_NAME: "Grid color",
+  GRID_OPACITY_NAME: "Grid opacity",
+  GRID_OPACITY_DESC: "Grid opacity will also control the opacity of the binding box when binding an arrow to an element.<br>" +
+    "Set the opacity of the grid. 0 is transparent, 1 is opaque.",
   LASER_HEAD: "Laser pointer",
   LASER_COLOR: "Laser pointer color",
   LASER_DECAY_TIME_NAME: "Laser pointer decay time",

src/settings.ts

@@ -15,7 +15,7 @@ import ExcalidrawView from "./ExcalidrawView";
 import { t } from "./lang/helpers";
 import type ExcalidrawPlugin from "./main";
 import { PenStyle } from "./PenTypes";
-import { DynamicStyle } from "./types/types";
+import { DynamicStyle, GridSettings } from "./types/types";
 import { PreviewImageType } from "./utils/UtilTypes";
 import { setDynamicStyle } from "./utils/DynamicStyling";
 import {
@@ -179,6 +179,7 @@ export interface ExcalidrawSettings {
   pdfNumRows: number;
   pdfDirection: "down" | "right";
   pdfImportScale: number;
+  gridSettings: GridSettings;
   laserSettings: {
     DECAY_TIME: number,
     DECAY_LENGTH: number,
@@ -355,6 +356,11 @@ export const DEFAULT_SETTINGS: ExcalidrawSettings = {
   pdfNumRows: 1,
   pdfDirection: "right",
   pdfImportScale: 0.3,
+  gridSettings: {
+    DYNAMIC_COLOR: true,
+    COLOR: "#000000",
+    OPACITY: 50,
+  },
   laserSettings: {
     DECAY_LENGTH: 50,
     DECAY_TIME: 1000,
@@ -1310,7 +1316,85 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
         el.innerText = ` ${this.plugin.settings.zoomToFitMaxLevel.toString()}`;
       });
 
-    
+      // ------------------------------------------------
+      // Grid
+      // ------------------------------------------------
+      detailsEl = displayDetailsEl.createEl("details");
+      detailsEl.createEl("summary", {
+        text: t("GRID_HEAD"),
+        cls: "excalidraw-setting-h3",
+      });
+
+      const updateGridColor = () => {
+        const exs =
+          this.app.workspace.getLeavesOfType(VIEW_TYPE_EXCALIDRAW);
+        for (const v of exs) {
+          if (v.view instanceof ExcalidrawView) {
+            v.view.updateGridColor();
+          }
+        }
+      };
+
+      // Dynamic color toggle
+      let gridColorSection: HTMLDivElement;
+      new Setting(detailsEl)
+        .setName(t("GRID_DYNAMIC_COLOR_NAME"))
+        .setDesc(fragWithHTML(t("GRID_DYNAMIC_COLOR_DESC")))
+        .addToggle((toggle) =>
+          toggle
+            .setValue(this.plugin.settings.gridSettings.DYNAMIC_COLOR)
+            .onChange(async (value) => {
+              this.plugin.settings.gridSettings.DYNAMIC_COLOR = value;
+              gridColorSection.style.display = value ? "none" : "block";
+              this.applySettingsUpdate();
+              updateGridColor();
+            }),
+        );
+
+      // Create a div to contain color and opacity settings
+      gridColorSection = detailsEl.createDiv();
+      gridColorSection.style.display = this.plugin.settings.gridSettings.DYNAMIC_COLOR ? "none" : "block";
+
+      // Grid color picker
+      new Setting(gridColorSection)
+        .setName(t("GRID_COLOR_NAME"))
+        .addColorPicker((colorPicker) =>
+          colorPicker
+            .setValue(this.plugin.settings.gridSettings.COLOR)
+            .onChange(async (value) => {
+              this.plugin.settings.gridSettings.COLOR = value;
+              this.applySettingsUpdate();
+              updateGridColor();
+            }),
+        );
+
+      // 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}`;
+        });
+
+
+    // ------------------------------------------------
+    // Laser Pointer
+    // ------------------------------------------------
     detailsEl = displayDetailsEl.createEl("details");
     detailsEl.createEl("summary", { 
       text: t("LASER_HEAD"),

src/types/types.d.ts

@@ -13,6 +13,12 @@ export type ValueOf<T> = T[keyof T];
 
 export type DynamicStyle = "none" | "gray" | "colorful";
 
+export type GridSettings = {
+  DYNAMIC_COLOR: boolean;  // Whether the grid color is dynamic
+  COLOR: string;           // The grid color (in hex format)
+  OPACITY: number;         // The grid opacity (hex value between "00" and "FF")
+};
+
 export type DeviceType = {
   isDesktop: boolean,
   isPhone: boolean,

src/utils/DynamicStyling.ts

@@ -82,6 +82,7 @@ export const setDynamicStyle = (
     [`--color-surface-high`]: str(gray1().lighterBy(step)),
     [`--color-on-primary-container`]: str(!isDark?accent().darkerBy(15):accent().lighterBy(15)),
     [`--color-surface-primary-container`]: str(isDark?accent().darkerBy(step):accent().lighterBy(step)),
+    [`--bold-color`]: str(!isDark?accent().darkerBy(15):accent().lighterBy(15)),
     //[`--color-primary-darker`]: str(accent().darkerBy(step)),
     //[`--color-primary-darkest`]: str(accent().darkerBy(step)),
     [`--button-gray-1`]: str(gray1()),
@@ -96,6 +97,7 @@ export const setDynamicStyle = (
     [`--overlay-bg-color`]: gray2().alphaTo(0.6).stringHEX(),
     [`--popup-bg-color`]: str(gray1()),
     [`--color-on-surface`]: str(text),
+    [`--default-border-color`]: str(text),
     //[`--color-gray-100`]: str(text),
     [`--color-gray-40`]: str(text), //frame
     [`--color-gray-50`]: str(text), //frame
@@ -117,6 +119,8 @@ export const setDynamicStyle = (
     ['--excalidraw-caret-color']: str(isLightTheme ? text : cmBG()),
     [`--select-highlight-color`]: str(gray1()),
     [`--color-gray-80`]: str(isDark?text.darkerBy(40):text.lighterBy(40)), //frame
+    [`--color-gray-90`]: str(isDark?text.darkerBy(5):text.lighterBy(5)), //search background
+    [`--default-bg-color`]: str(text), //search background,
   };
   
     const styleString = Object.keys(styleObject)

styles.css

@@ -634,4 +634,8 @@ textarea.excalidraw-wysiwyg, .excalidraw input {
 
 .excalidraw .color-picker-content input[type="color"] {
   filter: var(--theme-filter);
+}
+
+.ExcTextField__input input::placeholder {
+  color: var(--select-highlight-color);
 }