From 1aa092fcc455f840153765b0aaa263767957a8a9 Mon Sep 17 00:00:00 2001 From: Zsolt Viczian Date: Mon, 21 Mar 2022 23:08:50 +0100 Subject: [PATCH] 1.6.20 --- README.md | 7 ++- manifest.json | 2 +- src/EmbeddedFileLoader.ts | 17 +++++-- src/ExcalidrawAutomate.ts | 3 +- src/ExcalidrawData.ts | 6 ++- src/ExcalidrawView.ts | 91 +++++++++++++++++++++--------------- src/MarkdownPostProcessor.ts | 17 +++++-- src/Messages.ts | 23 +++++++++ src/SuggestorInfo.ts | 8 +++- src/Utils.ts | 50 ++++++++++++++++++-- src/constants.ts | 1 + versions.json | 2 +- 12 files changed, 172 insertions(+), 55 deletions(-) diff --git a/README.md b/README.md index fdb60d8..4d247bc 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ Please upgrade to Obsidian v0.12.19 or higher to get the latest release. |[![Script Engine](https://user-images.githubusercontent.com/14358394/145684531-8d9c2992-59ac-4ebc-804a-4cce1777ded2.jpg)](https://youtu.be/hePJcObHIso)|[![sticky notes thumbnail](https://user-images.githubusercontent.com/14358394/147283367-e5689385-ea51-4983-81a3-04d810d39f62.jpg)](https://youtu.be/NOuddK6xrr8)|[![plugin store](https://user-images.githubusercontent.com/14358394/147889174-6c306d0d-2d29-46cc-a53f-3f0013cf14de.jpg)](https://youtu.be/lzYdOQ6z8F0)| |[![fourtfont](https://user-images.githubusercontent.com/14358394/149659524-2a4e0a24-40c9-4e66-a6b1-c92f3b88ecd5.jpg)](https://youtu.be/eKFmrSQhFA4)|[![thumbnail](https://user-images.githubusercontent.com/14358394/151705333-54e9ffd2-0bd7-4d02-b99e-0bd4e4708d4d.jpg)](https://youtu.be/qbPIAZguJeo)|[![Thumbnail](https://user-images.githubusercontent.com/14358394/152585752-7eb0371f-0bab-40f6-a194-3b48e5811735.jpg)](https://youtu.be/2Y8OhkGiTHg)| |[![Thumbnail](https://user-images.githubusercontent.com/14358394/153676009-6f86b2d7-c248-49a2-b802-be21c6999e4f.jpg)](https://youtu.be/2v9TZmQNO8c)|[![Thumbnail](https://user-images.githubusercontent.com/14358394/154821232-a404b6cf-72fb-4ce4-9d53-619132dce491.jpg)](https://youtu.be/xHPGWR3m0c8)|[![Thumbnail](https://user-images.githubusercontent.com/14358394/156931428-b2269fd9-87bd-43ab-8558-5572f40dff93.jpg)](https://youtu.be/gMIKXyhS-dM)| -|[![thumbnail](https://user-images.githubusercontent.com/14358394/156931461-0979b821-315a-41dd-86f1-31d169b7c127.jpg)](https://youtu.be/Etskjw7a5zo)| | | +|[![thumbnail](https://user-images.githubusercontent.com/14358394/156931461-0979b821-315a-41dd-86f1-31d169b7c127.jpg)](https://youtu.be/Etskjw7a5zo)|[![Thumbnail](https://user-images.githubusercontent.com/14358394/158008902-12c6a851-237e-4edd-a631-d48e81c904b2.jpg)](https://youtu.be/4N6efq1DtH0)|[![thumbnail](https://user-images.githubusercontent.com/14358394/159369910-6371f08d-b5fa-454d-9c6c-948f7e7a7d26.jpg)](https://youtu.be/U2LkBRBk4LY)| # Key features - The plugin aims to integrate Excalidraw seamlessly into Obsidian including Command Palette actions, File Explorer features, Option Menu commands, and the Ribbon Button. @@ -65,6 +65,11 @@ Please upgrade to Obsidian v0.12.19 or higher to get the latest release. - `excalidraw-url-prefix: "🌐"` preview prefix for external links - `excalidraw-link-brackets: true|false` whether or not to display brackets around links in preview - `excalidraw-default-mode: view|zen` Open this document in view mode or zen mode by defult. Default view mode is excellent for presentation slides. + - Frontmatter tags to customize image export at a file level [519](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/519). If these keys are present they will override the default excalidraw embed and export settings. + - `excalidraw-export-transparent: true`: true == Transparent / false == with background. + - `excalidraw-export-dark`: true == Dark mode / false == light mode. + - `excalidraw-export-svgpadding`: This only affects export to SVG. Specify the export padding for the image + - `excalidraw-export-pngscale`: This only affects export to PNG. Specify the export scale for the image. The typical range is between 0.5 and 5, but you can experiment with other values as well. - Embed complete markdown files into your drawings - Drag from the desired file from the Obsidian file explorer and hold down CTRL/CMD while dropping the file onto the canvas. - Use the command palette action: `Insert markdown file from vault` diff --git a/manifest.json b/manifest.json index 1287cbf..a41a023 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "id": "obsidian-excalidraw-plugin", "name": "Excalidraw", - "version": "1.6.19", + "version": "1.6.20", "minAppVersion": "0.12.16", "description": "An Obsidian plugin to edit and view Excalidraw drawings", "author": "Zsolt Viczian", diff --git a/src/EmbeddedFileLoader.ts b/src/EmbeddedFileLoader.ts index d5e75b0..a951701 100644 --- a/src/EmbeddedFileLoader.ts +++ b/src/EmbeddedFileLoader.ts @@ -22,9 +22,14 @@ import ExcalidrawPlugin from "./main"; import { errorlog, getDataURL, + getExportTheme, getFontDataURL, getImageSize, getLinkParts, + getSVGPadding, + getWithBackground, + hasExportBackground, + hasExportTheme, LinkParts, svgToBase64, } from "./Utils"; @@ -216,20 +221,26 @@ export class EmbeddedFilesLoader { const getExcalidrawSVG = async (isDark: boolean) => { //debug({where:"EmbeddedFileLoader.getExcalidrawSVG",uid:this.uid,file:file.name}); + const forceTheme = hasExportTheme(this.plugin,file) + ? getExportTheme(this.plugin,file,"light") + : undefined; const exportSettings: ExportSettings = { - withBackground: false, - withTheme: false, + withBackground: hasExportBackground(this.plugin,file) + ? getWithBackground(this.plugin,file) + : false, + withTheme: forceTheme?true:false, }; const svg = await createSVG( file.path, true, exportSettings, this, - null, + forceTheme, null, null, [], this.plugin, + getSVGPadding(this.plugin,file) ); //https://stackoverflow.com/questions/51154171/remove-css-filter-on-child-elements const imageList = svg.querySelectorAll( diff --git a/src/ExcalidrawAutomate.ts b/src/ExcalidrawAutomate.ts index 8d467b9..d7318dd 100644 --- a/src/ExcalidrawAutomate.ts +++ b/src/ExcalidrawAutomate.ts @@ -1677,6 +1677,7 @@ export async function createSVG( canvasBackgroundColor: string = undefined, automateElements: ExcalidrawElement[] = [], plugin: ExcalidrawPlugin, + padding?: number, ): Promise { if (!loader) { loader = new EmbeddedFilesLoader(plugin); @@ -1705,7 +1706,7 @@ export async function createSVG( exportSettings?.withBackground ?? plugin.settings.exportWithBackground, withTheme: exportSettings?.withTheme ?? plugin.settings.exportWithTheme, }, - plugin.settings.exportPaddingSVG, + padding??plugin.settings.exportPaddingSVG, ); if (template?.hasSVGwithBitmap) { svg.setAttribute("hasbitmap", "true"); diff --git a/src/ExcalidrawData.ts b/src/ExcalidrawData.ts index cbedc20..f1595c3 100644 --- a/src/ExcalidrawData.ts +++ b/src/ExcalidrawData.ts @@ -25,7 +25,9 @@ import { getAttachmentsFolderAndFilePath, //getBakPath, getBinaryFileFromDataURL, + getExportTheme, getLinkParts, + hasExportTheme, isObsidianThemeDark, LinkParts, wrapText, @@ -368,7 +370,9 @@ export class ExcalidrawData { this.scene.files = {}; //loading legacy scenes that do not yet have the files attribute. } - if (this.plugin.settings.matchThemeAlways) { + if(hasExportTheme(this.plugin,this.file)) { + this.scene.appState.theme = getExportTheme(this.plugin,this.file,"light"); + } else if (this.plugin.settings.matchThemeAlways) { this.scene.appState.theme = isObsidianThemeDark() ? "dark" : "light"; } diff --git a/src/ExcalidrawView.ts b/src/ExcalidrawView.ts index 5640b2e..67ab6e6 100644 --- a/src/ExcalidrawView.ts +++ b/src/ExcalidrawView.ts @@ -56,13 +56,18 @@ import { download, embedFontsInSVG, errorlog, + getExportTheme, //getBakPath, getIMGFilename, getLinkParts, getNewOrAdjacentLeaf, getNewUniqueFilepath, getPNG, + getPNGScale, getSVG, + getSVGPadding, + getWithBackground, + hasExportTheme, rotatedDimensions, scaleLoadedImage, splitFolderAndFilename, @@ -277,6 +282,26 @@ export default class ExcalidrawView extends TextFileView { ); } + public async svg(scene: any): Promise { + const exportSettings: ExportSettings = { + withBackground: getWithBackground(this.plugin, this.file), + withTheme: true, + }; + return await getSVG( + { + ...scene, + ...{ + appState: { + ...scene.appState, + theme:getExportTheme( this.plugin, this.file,scene.appState.theme ) + } + } + }, + exportSettings, + getSVGPadding(this.plugin,this.file), + ); + } + public async saveSVG(scene?: any) { if (!scene) { if (!this.getScene) { @@ -286,15 +311,8 @@ export default class ExcalidrawView extends TextFileView { } const filepath = getIMGFilename(this.file.path, "svg"); //.substring(0,this.file.path.lastIndexOf(this.compatibilityMode ? '.excalidraw':'.md')) + '.svg'; const file = this.app.vault.getAbstractFileByPath(normalizePath(filepath)); - const exportSettings: ExportSettings = { - withBackground: this.plugin.settings.exportWithBackground, - withTheme: this.plugin.settings.exportWithTheme, - }; - const svg = await getSVG( - scene, - exportSettings, - this.plugin.settings.exportPaddingSVG, - ); + + const svg = await this.svg(scene); if (!svg) { return; } @@ -309,6 +327,26 @@ export default class ExcalidrawView extends TextFileView { } } + public async png (scene: any): Promise { + const exportSettings: ExportSettings = { + withBackground: getWithBackground(this.plugin, this.file), + withTheme: true, + }; + return await getPNG( + { + ...scene, + ...{ + appState: { + ...scene.appState, + theme:getExportTheme( this.plugin, this.file,scene.appState.theme ) + } + } + }, + exportSettings, + getPNGScale(this.plugin, this.file), + ); + } + public async savePNG(scene?: any) { if (!scene) { if (!this.getScene) { @@ -320,15 +358,7 @@ export default class ExcalidrawView extends TextFileView { const filepath = getIMGFilename(this.file.path, "png"); //this.file.path.substring(0,this.file.path.lastIndexOf(this.compatibilityMode ? '.excalidraw':'.md')) + '.png'; const file = this.app.vault.getAbstractFileByPath(normalizePath(filepath)); - const exportSettings: ExportSettings = { - withBackground: this.plugin.settings.exportWithBackground, - withTheme: this.plugin.settings.exportWithTheme, - }; - const png = await getPNG( - scene, - exportSettings, - this.plugin.settings.pngExportScale, - ); + const png = await this.png(scene); if (!png) { return; } @@ -793,6 +823,9 @@ export default class ExcalidrawView extends TextFileView { if (!this.excalidrawRef) { return; } + if(this.file) { //if there is an export theme set, override the theme change + if(hasExportTheme(this.plugin,this.file)) return; + } const st: AppState = this.excalidrawAPI.getAppState(); this.excalidrawData.scene.theme = theme; //debug({where:"ExcalidrawView.setTheme",file:this.file.name,dataTheme:this.excalidrawData.scene.appState.theme,before:"updateScene"}); @@ -1268,16 +1301,7 @@ export default class ExcalidrawView extends TextFileView { return; } if (ev[CTRL_OR_CMD]) { - //.ctrlKey||ev.metaKey) { - const exportSettings: ExportSettings = { - withBackground: this.plugin.settings.exportWithBackground, - withTheme: this.plugin.settings.exportWithTheme, - }; - const png = await getPNG( - this.getScene(), - exportSettings, - this.plugin.settings.pngExportScale, - ); + const png = await this.png(this.getScene()); if (!png) { return; } @@ -1302,16 +1326,7 @@ export default class ExcalidrawView extends TextFileView { return; } if (ev[CTRL_OR_CMD]) { - //.ctrlKey||ev.metaKey) { - const exportSettings: ExportSettings = { - withBackground: this.plugin.settings.exportWithBackground, - withTheme: this.plugin.settings.exportWithTheme, - }; - let svg = await getSVG( - this.getScene(), - exportSettings, - this.plugin.settings.exportPaddingSVG, - ); + let svg = await this.svg(this.getScene()); if (!svg) { return null; } diff --git a/src/MarkdownPostProcessor.ts b/src/MarkdownPostProcessor.ts index 9f8934a..e1b38b6 100644 --- a/src/MarkdownPostProcessor.ts +++ b/src/MarkdownPostProcessor.ts @@ -11,7 +11,11 @@ import { ExportSettings } from "./ExcalidrawView"; import ExcalidrawPlugin from "./main"; import { embedFontsInSVG, + getExportTheme, getIMGFilename, + getSVGPadding, + getWithBackground, + hasExportTheme, isObsidianThemeDark, splitFolderAndFilename, svgToBase64, @@ -63,9 +67,13 @@ const getIMG = async ( // https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/387 imgAttributes.style = imgAttributes.style.replaceAll(" ", "-"); + const forceTheme = hasExportTheme(plugin,file) + ? getExportTheme(plugin,file,"light") + : undefined; + const exportSettings: ExportSettings = { - withBackground: plugin.settings.exportWithBackground, - withTheme: plugin.settings.exportWithTheme, + withBackground: getWithBackground(plugin,file), + withTheme: forceTheme?true:plugin.settings.exportWithTheme, }; const img = createEl("img"); let style = `max-width:${imgAttributes.fwidth}px !important; width:100%;`; @@ -75,13 +83,13 @@ const getIMG = async ( img.setAttribute("style", style); img.addClass(imgAttributes.style); - const theme = plugin.settings.previewMatchObsidianTheme + const theme = forceTheme??(plugin.settings.previewMatchObsidianTheme ? isObsidianThemeDark() ? "dark" : "light" : !plugin.settings.exportWithTheme ? "light" - : undefined; + : undefined); if (theme) { exportSettings.withTheme = true; } @@ -133,6 +141,7 @@ const getIMG = async ( null, [], plugin, + getSVGPadding(plugin,file), ) ).outerHTML; let svg: SVGSVGElement = null; diff --git a/src/Messages.ts b/src/Messages.ts index ddac902..cf8707b 100644 --- a/src/Messages.ts +++ b/src/Messages.ts @@ -17,6 +17,29 @@ I develop this plugin as a hobby, spending most of my free time doing this. If y
`, +"1.6.20": ` +
+ +
+ +## Fixed +- ${String.fromCharCode(96)}ExcalidrawAutomate.create()${String.fromCharCode(96)} threw an error [539](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/539) + +## New Features +### From excalidraw.com +- Bind/unbind text to/from container [4935](https://github.com/excalidraw/excalidraw/pull/4935) + +### Plugin +Frontmatter tags to customize image export at a file level [519](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/519). If these keys are present they will override the default excalidraw embed and export settings. +- ${String.fromCharCode(96)}excalidraw-export-transparent: true${String.fromCharCode(96)} + - true == Transparent / false == with background. +- ${String.fromCharCode(96)}excalidraw-export-dark${String.fromCharCode(96)} + - true == Dark mode / false == light mode. +- ${String.fromCharCode(96)}excalidraw-export-svgpadding${String.fromCharCode(96)} + - This only affects export to SVG. Specify the export padding for the image +- ${String.fromCharCode(96)}excalidraw-export-pngscale${String.fromCharCode(96)} + - This only affects export to PNG. Specify the export scale for the image. The typical range is between 0.5 and 5, but you can experiment with other values as well. +`, "1.6.19": ` This is a minor update fixing left-handed mode on iOS, and deploying improvements to the new Excalidraw Eraser. `, diff --git a/src/SuggestorInfo.ts b/src/SuggestorInfo.ts index 5c5b91b..c31bb58 100644 --- a/src/SuggestorInfo.ts +++ b/src/SuggestorInfo.ts @@ -576,6 +576,12 @@ export const FRONTMATTER_KEYS_INFO: SuggestorInfo[] = [ field: "export-svgpadding", code: null, desc: "If this key is present it will override the default excalidraw embed and export setting. This only affects export to SVG. Specify the export padding for the image.", - after: ": 0", + after: ": 5", + }, + { + field: "export-pngscale", + code: null, + desc: "If this key is present it will override the default excalidraw embed and export setting. This only affects export to PNG. Specify the export scale for the image. The typical range is between 0.5 and 5, but you can experiment with other values as well.", + after: ": 1", }, ]; diff --git a/src/Utils.ts b/src/Utils.ts index be54c7e..13470c2 100644 --- a/src/Utils.ts +++ b/src/Utils.ts @@ -20,6 +20,7 @@ import { FRONTMATTER_KEY_EXPORT_DARK, FRONTMATTER_KEY_EXPORT_TRANSPARENT, FRONTMATTER_KEY_EXPORT_SVGPADDING, + FRONTMATTER_KEY_EXPORT_PNGSCALE, } from "./Constants"; import ExcalidrawPlugin from "./main"; import { ExcalidrawElement } from "@zsviczian/excalidraw/types/element/types"; @@ -607,6 +608,19 @@ export const decompress = (data: string): string => { return decompressFromBase64(data.replaceAll("\n", "").replaceAll("\r", "")); }; +export const hasExportTheme = (plugin: ExcalidrawPlugin, file: TFile):boolean => { + if(file) { + const fileCache = plugin.app.metadataCache.getFileCache(file); + if ( + fileCache?.frontmatter && + fileCache.frontmatter[FRONTMATTER_KEY_EXPORT_DARK] != null + ) { + return true; + } + } + return false; +} + export const getExportTheme = (plugin: ExcalidrawPlugin, file: TFile, theme: string):string => { if(file) { const fileCache = plugin.app.metadataCache.getFileCache(file); @@ -618,8 +632,21 @@ export const getExportTheme = (plugin: ExcalidrawPlugin, file: TFile, theme: str ? "dark" : "light" } - return plugin.settings.exportWithTheme ? theme : "light"; } + return plugin.settings.exportWithTheme ? theme : "light"; +} + +export const hasExportBackground = (plugin: ExcalidrawPlugin, file: TFile):boolean => { + if(file) { + const fileCache = plugin.app.metadataCache.getFileCache(file); + if ( + fileCache?.frontmatter && + fileCache.frontmatter[FRONTMATTER_KEY_EXPORT_TRANSPARENT] != null + ) { + return true; + } + } + return false; } export const getWithBackground = (plugin: ExcalidrawPlugin, file: TFile):boolean => { @@ -633,8 +660,8 @@ export const getWithBackground = (plugin: ExcalidrawPlugin, file: TFile):boolean ? false : true } - return plugin.settings.exportWithBackground; } + return plugin.settings.exportWithBackground; } export const getSVGPadding = (plugin: ExcalidrawPlugin, file: TFile):number => { @@ -645,14 +672,29 @@ export const getSVGPadding = (plugin: ExcalidrawPlugin, file: TFile):number => { fileCache.frontmatter[FRONTMATTER_KEY_EXPORT_SVGPADDING] != null ) { const val = parseInt(fileCache.frontmatter[FRONTMATTER_KEY_EXPORT_SVGPADDING]); - if(val && !isNaN(val)) { + if(!isNaN(val)) { return val; } } - return plugin.settings.exportPaddingSVG; } + return plugin.settings.exportPaddingSVG; } +export const getPNGScale = (plugin: ExcalidrawPlugin, file: TFile):number => { + if(file) { + const fileCache = plugin.app.metadataCache.getFileCache(file); + if ( + fileCache?.frontmatter && + fileCache.frontmatter[FRONTMATTER_KEY_EXPORT_PNGSCALE] != null + ) { + const val = parseFloat(fileCache.frontmatter[FRONTMATTER_KEY_EXPORT_PNGSCALE]); + if(!isNaN(val) && val>0) { + return val; + } + } + } + return plugin.settings.pngExportScale; +} export const errorlog = (data: {}) => { console.error({ plugin: "Excalidraw", ...data }); diff --git a/src/constants.ts b/src/constants.ts index 01e170f..0b1e5c2 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -25,6 +25,7 @@ export const FRONTMATTER_KEY = "excalidraw-plugin"; export const FRONTMATTER_KEY_EXPORT_TRANSPARENT = "excalidraw-export-transparent"; export const FRONTMATTER_KEY_EXPORT_DARK = "excalidraw-export-dark"; export const FRONTMATTER_KEY_EXPORT_SVGPADDING = "excalidraw-export-svgpadding"; +export const FRONTMATTER_KEY_EXPORT_PNGSCALE = "excalidraw-export-pngscale"; export const FRONTMATTER_KEY_CUSTOM_PREFIX = "excalidraw-link-prefix"; export const FRONTMATTER_KEY_CUSTOM_URL_PREFIX = "excalidraw-url-prefix"; export const FRONTMATTER_KEY_CUSTOM_LINK_BRACKETS = "excalidraw-link-brackets"; diff --git a/versions.json b/versions.json index 19a5219..36776f0 100644 --- a/versions.json +++ b/versions.json @@ -1,4 +1,4 @@ { - "1.6.19": "0.12.16", + "1.6.20": "0.12.16", "1.4.2": "0.11.13" }