renun/obsidian-excalidraw-plugin
1
0
Fork 0
mirror of https://github.com/zsviczian/obsidian-excalidraw-plugin.git synced 2025-08-06 05:46:28 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

1.6.20

Browse Source
This commit is contained in:
Zsolt Viczian
2022-03-21 23:08:50 +01:00
parent 23e6e2e33f
commit 1aa092fcc4
12 changed files with 172 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
README.md
View File

@@ -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`

2
manifest.json
View File

@@ -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",

17
src/EmbeddedFileLoader.ts
View File

@@ -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(

3
src/ExcalidrawAutomate.ts
View File

@@ -1677,6 +1677,7 @@ export async function createSVG(
canvasBackgroundColor: string = undefined,
automateElements: ExcalidrawElement[] = [],
plugin: ExcalidrawPlugin,
padding?: number,
): Promise<SVGSVGElement> {
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");

6
src/ExcalidrawData.ts
View File

@@ -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";
}

91
src/ExcalidrawView.ts
View File

@@ -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<SVGSVGElement> {
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<Blob> {
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;
}

17
src/MarkdownPostProcessor.ts
View File

@@ -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;

23
src/Messages.ts
View File

@@ -17,6 +17,29 @@ I develop this plugin as a hobby, spending most of my free time doing this. If y
<div class="ex-coffee-div"><a href="https://ko-fi.com/zsolt"><img src="https://cdn.ko-fi.com/cdn/kofi3.png?v=3" height=45></a></div>
`,
"1.6.20": `
<div class="excalidraw-videoWrapper"><div>
<iframe src="https://www.youtube.com/embed/U2LkBRBk4LY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div></div>
## 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.
`,

8
src/SuggestorInfo.ts
View File

@@ -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",
},
];

50
src/Utils.ts
View File

@@ -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 });

1
src/constants.ts
View File

@@ -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";

2
versions.json
View File

@@ -1,4 +1,4 @@
{
"1.6.19": "0.12.16",
"1.6.20": "0.12.16",
"1.4.2": "0.11.13"
}