diff --git a/manifest.json b/manifest.json index f08c957..d8d9e1e 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "id": "obsidian-excalidraw-plugin", "name": "Excalidraw", - "version": "1.7.24", + "version": "1.7.25", "minAppVersion": "0.15.6", "description": "An Obsidian plugin to edit and view Excalidraw drawings", "author": "Zsolt Viczian", diff --git a/package.json b/package.json index 563486c..c9da068 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "obsidian-excalidraw-plugin", - "version": "1.7.23", + "version": "1.7.25", "description": "This is an Obsidian.md plugin that lets you view and edit Excalidraw drawings", "main": "lib/index.js", "types": "lib/index.d.ts", diff --git a/src/ExcalidrawAutomate.ts b/src/ExcalidrawAutomate.ts index 68f986a..05fd7ff 100644 --- a/src/ExcalidrawAutomate.ts +++ b/src/ExcalidrawAutomate.ts @@ -1491,6 +1491,15 @@ export class ExcalidrawAutomate implements ExcalidrawAutomateInterface { pointerPosition: { x: number; y: number }; //the pointer position on canvas at the time of drop }) => boolean = null; + /** + * If set, this callback is triggered whenever the active canvas color changes + */ + onCanvasColorChangeHook: ( + ea: ExcalidrawAutomate, + view: ExcalidrawView, //the excalidraw view + color: string, + ) => void = null; + /** * utility function to generate EmbeddedFilesLoader object * @param isDark @@ -1858,6 +1867,10 @@ export class ExcalidrawAutomate implements ExcalidrawAutomateInterface { log("Creates a CM object. Visit https://github.com/lbragile/ColorMaster for documentation."); return; } + if(typeof color === "string") { + color = this.colorNameToHex(color); + } + return CM(color); } }; diff --git a/src/ExcalidrawView.ts b/src/ExcalidrawView.ts index 0305b2d..af2a0a3 100644 --- a/src/ExcalidrawView.ts +++ b/src/ExcalidrawView.ts @@ -1441,7 +1441,7 @@ export default class ExcalidrawView extends TextFileView { this.previousSceneVersion = 0; } - private isLoaded: boolean = false; + public isLoaded: boolean = false; async setViewData(data: string, clear: boolean = false) { if(this.plugin.settings.showNewVersionNotification) checkExcalidrawVersion(app); this.isLoaded = false; @@ -2784,6 +2784,15 @@ export default class ExcalidrawView extends TextFileView { libraryReturnUrl: "app://obsidian.md", autoFocus: true, onChange: (et: ExcalidrawElement[], st: AppState) => { + const canvasColorChangeHook = () => { + if(this.plugin.ea.onCanvasColorChangeHook) { + this.plugin.ea.onCanvasColorChangeHook( + this.plugin.ea, + this, + st.viewBackgroundColor + ) + } + } viewModeEnabled = st.viewModeEnabled; if (this.semaphores.justLoaded) { this.semaphores.justLoaded = false; @@ -2792,6 +2801,7 @@ export default class ExcalidrawView extends TextFileView { } this.previousSceneVersion = this.getSceneVersion(et); this.previousBackgroundColor = st.viewBackgroundColor; + canvasColorChangeHook(); return; } if (this.semaphores.dirty) { @@ -2816,6 +2826,7 @@ export default class ExcalidrawView extends TextFileView { this.previousSceneVersion = sceneVersion; this.previousBackgroundColor = st.viewBackgroundColor; this.setDirty(6); + canvasColorChangeHook(); } } }, diff --git a/src/dialogs/Messages.ts b/src/dialogs/Messages.ts index a6c7677..300e880 100644 --- a/src/dialogs/Messages.ts +++ b/src/dialogs/Messages.ts @@ -17,6 +17,31 @@ I develop this plugin as a hobby, spending most of my free time doing this. If y
`, +"1.7.25":`## Fixed +- Tool buttons did not "stick" the first time you clicked them. +- Tray (in tray mode) was higher when the help button was visible. The tray in tablet mode was too large and the help button was missing. +- ExcalidrawAutomate ${String.fromCharCode(96)}getCM(color:TInput): ColorMaster;${String.fromCharCode(96)} function will now properly convert valid [css color names](https://www.w3schools.com/colors/colors_names.asp) to ColorMaster objects. +- The downloaded script icons in the Excalidraw-Obsidian menu were not always correct +- The obsidian mobile navigation bar at the bottom overlapped with Excalidraw + +## New +- Created ExcalidrawAutomate hook for styling script when the canvas color changes. See sample [onCanvasColorChangeHook](https://gist.github.com/zsviczian/c7223c5b4af30d5c88a0cae05300305c) implementation following the link. + +
+ +
+ +${String.fromCharCode(96, 96, 96)}typescript + /** + * If set, this callback is triggered whenever the active canvas color changes + */ + onCanvasColorChangeHook: ( + ea: ExcalidrawAutomate, + view: ExcalidrawView, //the Excalidraw view + color: string, + ) => void = null; +${String.fromCharCode(96, 96, 96)} +`, "1.7.24":` # New and improved - **Updated Chinese translation**. Thanks, @tswwe! diff --git a/src/main.ts b/src/main.ts index 424b564..92bdd9d 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1634,7 +1634,7 @@ export default class ExcalidrawPlugin extends Plugin { const activeLeafChangeEventHandler = async (leaf: WorkspaceLeaf) => { //https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/723 if(self.leafChangeTimeout) { - clearTimeout(this.leafChangeTimeout); + clearTimeout(self.leafChangeTimeout); } self.leafChangeTimeout = setTimeout(()=>{self.leafChangeTimeout = null;},1000); @@ -1647,6 +1647,25 @@ export default class ExcalidrawPlugin extends Plugin { self.lastActiveExcalidrawFilePath = newActiveviewEV.file?.path; } + //!Temporary hack + //https://discord.com/channels/686053708261228577/817515900349448202/1031101635784613968 + if (app.isMobile && newActiveviewEV && !previouslyActiveEV) { + const navbar = document.querySelector("body>.app-container>.mobile-navbar"); + if(navbar && navbar instanceof HTMLDivElement) { + navbar.style.position="relative"; + } + } + + if (app.isMobile && !newActiveviewEV && previouslyActiveEV) { + const navbar = document.querySelector("body>.app-container>.mobile-navbar"); + if(navbar && navbar instanceof HTMLDivElement) { + navbar.style.position=""; + } + } + + //---------------------- + //---------------------- + if (previouslyActiveEV && previouslyActiveEV !== newActiveviewEV) { if (previouslyActiveEV.leaf !== leaf) { //if loading new view to same leaf then don't save. Excalidarw view will take care of saving anyway. @@ -1684,20 +1703,32 @@ export default class ExcalidrawPlugin extends Plugin { } //refresh embedded files } + + if ( //@ts-ignore + newActiveviewEV && newActiveviewEV._loaded && + newActiveviewEV.isLoaded && newActiveviewEV.excalidrawAPI && + self.ea.onCanvasColorChangeHook + ) { + self.ea.onCanvasColorChangeHook( + self.ea, + newActiveviewEV, + newActiveviewEV.excalidrawAPI.getAppState().viewBackgroundColor + ); + } + //https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/300 if (self.popScope) { self.popScope(); self.popScope = null; } if (newActiveviewEV) { - const scope = this.app.keymap.getRootScope(); + const scope = self.app.keymap.getRootScope(); const handler = scope.register(["Mod"], "Enter", () => true); const overridSaveShortcut = ( - this.forceSaveCommand && - this.forceSaveCommand.hotkeys[0].key === "s" && - this.forceSaveCommand.hotkeys[0].modifiers.includes("Ctrl") + self.forceSaveCommand && + self.forceSaveCommand.hotkeys[0].key === "s" && + self.forceSaveCommand.hotkeys[0].modifiers.includes("Ctrl") ) - const self = this; const saveHandler = overridSaveShortcut ? scope.register(["Ctrl"], "s", () => self.forceSaveActiveView(false)) : undefined; diff --git a/src/menu/ActionIcons.tsx b/src/menu/ActionIcons.tsx index 98db831..5dfb7e8 100644 --- a/src/menu/ActionIcons.tsx +++ b/src/menu/ActionIcons.tsx @@ -287,3 +287,15 @@ export const ICONS = { ), }; + +export const stringToSVG = (svg: string) => { + svg = svg + .replace(/stroke\s*=\s*['"][^"']*['"]/g,"") + .replace(/width\s*=\s*['"][^"']*['"]/g,"") + .replace(/height\s*=\s*['"][^"']*['"]/g,"") + .replace(" + ) +} \ No newline at end of file diff --git a/src/menu/ToolsPanel.tsx b/src/menu/ToolsPanel.tsx index e6a82a9..24945cb 100644 --- a/src/menu/ToolsPanel.tsx +++ b/src/menu/ToolsPanel.tsx @@ -2,7 +2,7 @@ import clsx from "clsx"; import { Notice, TFile } from "obsidian"; import * as React from "react"; import { ActionButton } from "./ActionButton"; -import { ICONS } from "./ActionIcons"; +import { ICONS, stringToSVG } from "./ActionIcons"; import { SCRIPT_INSTALL_FOLDER, CTRL_OR_CMD } from "../Constants"; import { insertLaTeXToView, search } from "../ExcalidrawAutomate"; import ExcalidrawView, { TextMode } from "../ExcalidrawView"; @@ -257,6 +257,7 @@ export class ToolsPanel extends React.Component { className="Island App-menu__left scrollbar" style={{ maxHeight: "350px", + backgroundColor: "transparent", //@ts-ignore "--padding": 2, display: this.state.minimized ? "none" : "block", @@ -532,21 +533,9 @@ export class ToolsPanel extends React.Component { } }} icon={ - this.state.scriptIconMap[key].svgString ? ( - - ) : ( + this.state.scriptIconMap[key].svgString + ? stringToSVG(this.state.scriptIconMap[key].svgString) + : ( ICONS.cog ) } diff --git a/styles.css b/styles.css index 8bef246..34b99fb 100644 --- a/styles.css +++ b/styles.css @@ -223,4 +223,8 @@ textarea.excalidraw-wysiwyg { -moz-box-shadow: none; box-shadow: none; border-radius: 0; +} + +.is-tablet .excalidraw button { + padding: initial; } \ No newline at end of file