2.16.0-beta-2, 0.18.0-40

Author: zsviczian

manifest-beta.json

@@ -1,7 +1,7 @@
 {
 	"id": "obsidian-excalidraw-plugin",
 	"name": "Excalidraw",
-  "version": "2.16.0-beta-1",
+  "version": "2.16.0-beta-2",
   "minAppVersion": "1.5.7",
 	"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.18.0-39",
+    "@zsviczian/excalidraw": "0.18.0-40",
     "chroma-js": "^3.1.2",
     "clsx": "^2.0.0",
     "@zsviczian/colormaster": "^1.2.2",

src/core/settings.ts

@@ -29,6 +29,7 @@ import {
   addIframe,
   fragWithHTML,
   setLeftHandedMode,
+  setTrayMode,
 } from "src/utils/utils";
 import { imageCache } from "src/shared/ImageCache";
 import { MultiOptionConfirmationPrompt } from "src/shared/Dialogs/Prompt";
@@ -179,6 +180,7 @@ export interface ExcalidrawSettings {
     }
   };
   defaultTrayMode: boolean;
+  compactModeOnTablets: boolean;
   previousRelease: string;
   showReleaseNotes: boolean;
   compareManifestToPluginVersion: boolean;
@@ -364,6 +366,7 @@ export const DEFAULT_SETTINGS: ExcalidrawSettings = {
   mdCSS: "",
   scriptEngineSettings: {},
   defaultTrayMode: true,
+  compactModeOnTablets: true,
   previousRelease: "0.0.0",
   showReleaseNotes: true,
   compareManifestToPluginVersion: true,
@@ -1243,6 +1246,39 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
           }),
       );
 
+    detailsEl = displayDetailsEl.createEl("details");
+    detailsEl.createEl("summary", {
+      text: t("MODES_HEAD"),
+      cls: "excalidraw-setting-h3",
+    });
+
+    new Setting(detailsEl)
+      .setName(t("TRAY_MODE_NAME"))
+      .setDesc(fragWithHTML(t("ARIA_LABEL_TRAY_MODE")))
+      .addToggle((toggle) =>
+        toggle
+          .setValue(this.plugin.settings.defaultTrayMode)
+          .onChange((value) => {
+            this.plugin.settings.defaultTrayMode = value;
+            setTrayMode(this.app, this.plugin.settings);
+            this.applySettingsUpdate();
+          })
+      );
+
+    new Setting(detailsEl)
+      .setName(t("COMPACT_MODE_NAME"))
+      .setDesc(fragWithHTML(t("COMPACT_MODE_DESC")))
+      .addToggle((toggle) =>
+        toggle
+          .setValue(this.plugin.settings.compactModeOnTablets)
+          .onChange((value) => {
+            this.plugin.settings.compactModeOnTablets = value;
+            setTrayMode(this.app, this.plugin.settings);
+            this.applySettingsUpdate();
+          }),
+      );
+
+
     new Setting(detailsEl)
       .setName(t("LEFTHANDED_MODE_NAME"))
       .setDesc(fragWithHTML(t("LEFTHANDED_MODE_DESC")))

src/lang/locale/en.ts

@@ -139,6 +139,7 @@ export default {
     "3) and paste your work to the new document with CTRL/CMD+V.",
   ARIA_LABEL_TRAY_MODE: "Tray-mode offers an alternative, more spacious canvas",
   TRAY_TRAY_MODE: "Toggle tray-mode",
+  TOGGLE_COMPACT_MODE: "Toggle compact-mode",
   TRAY_SCRIPT_LIBRARY: "Script Library",
   TRAY_SCRIPT_LIBRARY_ARIA: "Explore the Excalidraw Script Library",
   TRAY_EXPORT: "Export Image...",
@@ -449,6 +450,10 @@ export default {
     "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. ⚠️",
+  MODES_HEAD: "Modes",
+  TRAY_MODE_NAME: "Enable tray-mode",
+  COMPACT_MODE_NAME: "Compact-mode on Tablets",
+  COMPACT_MODE_DESC: "Overrides tray-mode on tablets, allowing the native Excalidraw compact-mode to be used instead.",
   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 using Excalidraw, thus " +

src/shared/Dialogs/InsertPDFModal.ts

@@ -439,7 +439,10 @@ export class InsertPDFModal extends Modal {
 
               if(this.frame) {
                 const frameID = ea.addFrame(topX, topY,imgWidth,imgHeight,`${page}`);
-                ea.addElementsToFrame(frameID, [boxID,imageID]);
+                const frameEl = ea.getElement(frameID) as any;
+                frameEl.frameRole = "marker";
+                ea.addToGroup([frameID,boxID,imageID]);
+                //ea.addElementsToFrame(frameID, [boxID,imageID]);
                 ea.getElement(frameID).link = this.pdfFile.path + `#page=${page}`;
               }
 

src/shared/Dialogs/Messages.ts

@@ -21,6 +21,12 @@ I build this plugin in my free time, as a labor of love. Curious about the philo
 # New from Excalidraw.com
 - New library search feature [#9903](https://github.com/excalidraw/excalidraw/pull/9903)
   - You can rename library items by selecting them, then choosing "Rename or publish" from the ... menu.
+- New compact mode for tablets [#9910](https://github.com/excalidraw/excalidraw/pull/9910)
+  - New setting in plugin setting \`Compact-mode on Tablets\` to override tray-mode on tablets in favor of the new compact mode.
+
+# New
+- Embedding PDF as images, frames are now marker frames instead of regular frames. You can reference pages including their markup in markdown notes using this syntax: \`![[drawing#^frame=12]]\` (page 12)
+- Pinned scripts and Obsidian toolbar is now on the right side in all modes: tray-, normal-, and compact. The toolbar moves into view when the sidpanel is openned for the stencil library or for search.
 `,
 "2.15.3":`
 ## Fixed

src/utils/utils.ts

@@ -25,7 +25,7 @@ import { getDataURLFromURL, getIMGFilename, getMimeType, getURLImageExtension }
 import { generateEmbeddableLink } from "./customEmbeddableUtils";
 import { FILENAMEPARTS } from "../types/utilTypes";
 import { Mutable } from "@zsviczian/excalidraw/types/common/src/utility-types";
-import { cleanBlockRef, cleanSectionHeading, getFileCSSClasses } from "./obsidianUtils";
+import { cleanBlockRef, cleanSectionHeading, getExcalidrawViews, getFileCSSClasses } from "./obsidianUtils";
 import { updateElementLinksToObsidianLinks } from "./excalidrawAutomateUtils";
 import { CropImage } from "../shared/CropImage";
 import opentype from 'opentype.js';
@@ -35,6 +35,7 @@ import { FileData } from "../shared/EmbeddedFileLoader";
 import { t } from "src/lang/helpers";
 import { log } from "./debugHelper";
 import { VersionMismatchPrompt } from "src/shared/Dialogs/VersionMismatch";
+import { ExcalidrawSettings } from "src/core/settings";
 
 declare const PLUGIN_VERSION:string;
 declare var LZString: any;
@@ -625,6 +626,19 @@ export function setLeftHandedMode (isLeftHanded: boolean) {
   })  
 };
 
+export function calculateTrayModeValue(settings: ExcalidrawSettings): boolean {
+  const { defaultTrayMode, compactModeOnTablets } = settings;
+  const isTrayMode = DEVICE.isTablet
+    ? (compactModeOnTablets ? false : defaultTrayMode)
+    : defaultTrayMode;
+  return isTrayMode;
+}
+
+export function setTrayMode(app: App, settings: ExcalidrawSettings) {
+  const isTrayMode = calculateTrayModeValue(settings);
+  getExcalidrawViews(app).forEach((view) => view.setTrayMode(isTrayMode));
+}
+
 export type LinkParts = {
   original: string;
   path: string;

src/view/ExcalidrawView.ts

@@ -110,6 +110,8 @@ import {
   getFilePathFromObsidianURL,
   getLinkParts,
   checkVersionMismatch,
+  calculateTrayModeValue,
+  setTrayMode,
 } from "../utils/utils";
 import { cleanBlockRef, cleanSectionHeading, closeLeafView, getAttachmentsFolderAndFilePath, getExcalidraAndMarkdowViewsForFile, getLeaf, getParentOfClass, obsidianPDFQuoteWithRef, openLeaf, setExcalidrawView } from "../utils/obsidianUtils";
 import { splitFolderAndFilename } from "../utils/fileUtils";
@@ -2824,7 +2826,7 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
             zenModeEnabled,
             viewModeEnabled,
             linkOpacity: this.excalidrawData.getLinkOpacity(),
-            trayModeEnabled: this.plugin.settings.defaultTrayMode,
+            trayModeEnabled: calculateTrayModeValue(this.plugin.settings),
             penMode: penEnabled,
             penDetected: penEnabled,
             allowPinchZoom: this.plugin.settings.allowPinchZoom,
@@ -2858,7 +2860,7 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
           zenModeEnabled: om.zenModeEnabled,
           viewModeEnabled: excalidrawData.elements.length > 0 ? om.viewModeEnabled : false,
           linkOpacity: this.excalidrawData.getLinkOpacity(),
-          trayModeEnabled: this.plugin.settings.defaultTrayMode,
+          trayModeEnabled: calculateTrayModeValue(this.plugin.settings),
           penMode: penEnabled,
           penDetected: penEnabled,
           allowPinchZoom: this.plugin.settings.allowPinchZoom,
@@ -5338,7 +5340,17 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
         {              
           icon: ICONS.trayMode,
           "aria-label": t("ARIA_LABEL_TRAY_MODE"),
-          onSelect: ()=> this.toggleTrayMode(),
+          onSelect: ()=> {
+            if(!DEVICE.isTablet) {
+              this.toggleTrayMode();
+              return;
+            }
+            if(this.plugin.settings.defaultTrayMode) {
+              this.toggleCompactMode();
+              return;
+            }
+            this.toggleTrayMode(false);
+          },
         },
         t("TRAY_TRAY_MODE")
       ) : null,
@@ -5804,22 +5816,41 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
     });
   }
 
-  public async toggleTrayMode() {
+  public async toggleCompactMode() {
+    (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.toggleCompactMode, "ExcalidrawView.toggleCompactMode");
+
+    //just in case settings were updated via Obsidian sync
+    const newCompactMode = !this.plugin.settings.compactModeOnTablets;
+    await this.plugin.loadSettings();
+    this.plugin.settings.compactModeOnTablets = newCompactMode;
+    setTrayMode(this.app, this.plugin.settings);
+    await this.plugin.saveSettings();
+  }
+
+  public async toggleTrayMode(compactMode?: boolean) {
     (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.toggleTrayMode, "ExcalidrawView.toggleTrayMode");
+    //just in case settings were updated via Obsidian sync
+    const newTrayMode = !this.plugin.settings.defaultTrayMode;
+    await this.plugin.loadSettings();
+    this.plugin.settings.defaultTrayMode = newTrayMode;
+    if(compactMode!==undefined) {
+      this.plugin.settings.compactModeOnTablets = compactMode;
+    }
+    setTrayMode(this.app, this.plugin.settings);
+    await this.plugin.saveSettings();
+  }
+
+  public setTrayMode(on: boolean) {
+    (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.toggleTrayMode, "ExcalidrawView.setTrayMode");
     const api = this.excalidrawAPI as ExcalidrawImperativeAPI;
     if (!api) {
       return false;
     }
-    const st = api.getAppState();
     api.updateScene({
-      appState: { trayModeEnabled: !st.trayModeEnabled },
+      appState: { trayModeEnabled: on },
       captureUpdate: CaptureUpdateAction.NEVER,
     });
-
-    //just in case settings were updated via Obsidian sync
-    await this.plugin.loadSettings();
-    this.plugin.settings.defaultTrayMode = !st.trayModeEnabled;
-    this.plugin.saveSettings();
+    setTimeout(()=>api.refreshEditorBreakpoints());
   }
 
   /**

styles.css

@@ -329,7 +329,7 @@ label.color-input-container > input {
 .excalidraw .FixedSideContainer_side_top {
   left: 10px !important;
   top: 10px !important;
-  right: 10px !important;
+  right: 10px;
   bottom: 10px !important;
 }