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

savePNG, saveSVG, and CreateNewDrawing refactored

Browse Source
This commit is contained in:
Zsolt Viczian
2021-12-29 22:15:56 +01:00
parent db17b91418
commit 2c63a24c81
6 changed files with 88 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
manifest.json
View File

@@ -1,7 +1,7 @@
{
"id": "obsidian-excalidraw-plugin",
"name": "Excalidraw",
"version": "1.5.8",
"version": "1.5.9",
"minAppVersion": "0.12.16",
"description": "An Obsidian plugin to edit and view Excalidraw drawings",
"author": "Zsolt Viczian",

4
src/ExcalidrawAutomate.ts
View File

@@ -431,7 +431,7 @@ export async function initExcalidrawAutomate(
files: template?.files ?? {},
};
return plugin.createDrawing(
return plugin.createAndOpenDrawing(
params?.filename
? `${params.filename}.excalidraw.md`
: this.plugin.getNextDefaultFilename(),
@@ -1503,7 +1503,7 @@ export async function createSVG(
elements = elements.concat(automateElements);
const svg = await getSVG(
{
//createDrawing
//createAndOpenDrawing
type: "excalidraw",
version: 2,
source: "https://excalidraw.com",

115
src/ExcalidrawView.ts
View File

@@ -184,7 +184,7 @@ export default class ExcalidrawView extends TextFileView {
}
}
public saveSVG(scene?: any) {
public async saveSVG(scene?: any) {
if (!scene) {
if (!this.getScene) {
return false;
@@ -193,26 +193,24 @@ 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));
(async () => {
const exportSettings: ExportSettings = {
withBackground: this.plugin.settings.exportWithBackground,
withTheme: this.plugin.settings.exportWithTheme,
};
const svg = await getSVG(scene, exportSettings);
if (!svg) {
return;
}
const serializer = new XMLSerializer();
const svgString = serializer.serializeToString(embedFontsInSVG(svg));
if (file && file instanceof TFile) {
await this.app.vault.modify(file, svgString);
} else {
await this.app.vault.create(filepath, svgString);
}
})();
const exportSettings: ExportSettings = {
withBackground: this.plugin.settings.exportWithBackground,
withTheme: this.plugin.settings.exportWithTheme,
};
const svg = await getSVG(scene, exportSettings);
if (!svg) {
return;
}
const serializer = new XMLSerializer();
const svgString = serializer.serializeToString(embedFontsInSVG(svg));
if (file && file instanceof TFile) {
await this.app.vault.modify(file, svgString);
} else {
await this.app.vault.create(filepath, svgString);
}
}
public savePNG(scene?: any) {
public async savePNG(scene?: any) {
if (!scene) {
if (!this.getScene) {
return false;
@@ -223,25 +221,23 @@ 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));
(async () => {
const exportSettings: ExportSettings = {
withBackground: this.plugin.settings.exportWithBackground,
withTheme: this.plugin.settings.exportWithTheme,
};
const png = await getPNG(
scene,
exportSettings,
this.plugin.settings.pngExportScale,
);
if (!png) {
return;
}
if (file && file instanceof TFile) {
await this.app.vault.modifyBinary(file, await png.arrayBuffer());
} else {
await this.app.vault.createBinary(filepath, await png.arrayBuffer());
}
})();
const exportSettings: ExportSettings = {
withBackground: this.plugin.settings.exportWithBackground,
withTheme: this.plugin.settings.exportWithTheme,
};
const png = await getPNG(
scene,
exportSettings,
this.plugin.settings.pngExportScale,
);
if (!png) {
return;
}
if (file && file instanceof TFile) {
await this.app.vault.modifyBinary(file, await png.arrayBuffer());
} else {
await this.app.vault.createBinary(filepath, await png.arrayBuffer());
}
}
async save(preventReload: boolean = true) {
@@ -265,6 +261,18 @@ export default class ExcalidrawView extends TextFileView {
await this.loadDrawing(false);
}
await super.save();
if (!this.autosaving) {
if (this.plugin.settings.autoexportSVG) {
await this.saveSVG();
}
if (this.plugin.settings.autoexportPNG) {
await this.savePNG();
}
if (!this.compatibilityMode && this.plugin.settings.autoexportExcalidraw) {
this.saveExcalidraw();
}
}
}
// get the new file content
@@ -288,18 +296,6 @@ export default class ExcalidrawView extends TextFileView {
return this.data;
}
if (!this.autosaving) {
if (this.plugin.settings.autoexportSVG) {
this.saveSVG(scene);
}
if (this.plugin.settings.autoexportPNG) {
this.savePNG(scene);
}
if (this.plugin.settings.autoexportExcalidraw) {
this.saveExcalidraw(scene);
}
}
let header = this.data
.substring(0, trimLocation)
.replace(
@@ -319,14 +315,6 @@ export default class ExcalidrawView extends TextFileView {
return header + this.excalidrawData.generateMD();
}
if (this.compatibilityMode) {
if (!this.autosaving) {
if (this.plugin.settings.autoexportSVG) {
this.saveSVG(scene);
}
if (this.plugin.settings.autoexportPNG) {
this.savePNG(scene);
}
}
return JSON.stringify(scene, null, "\t");
}
return this.data;
@@ -1131,6 +1119,10 @@ export default class ExcalidrawView extends TextFileView {
return { id: selectedElement[0].id, text: selectedElement[0].text };
} //a text element was selected. Return text
if (selectedElement[0].type === "image") {
return { id: null, text: null };
}
const boundTextElements = selectedElement[0].boundElements?.filter(
(be: any) => be.type === "text",
);
@@ -1191,6 +1183,11 @@ export default class ExcalidrawView extends TextFileView {
fileId: selectedElement[0].fileId,
};
} //an image element was selected. Return fileId
if (selectedElement[0].type === "text") {
return { id: null, fileId: null };
}
if (selectedElement[0].groupIds.length === 0) {
return { id: null, fileId: null };
} //is the selected element part of a group?
@@ -1202,7 +1199,7 @@ export default class ExcalidrawView extends TextFileView {
if (imageElement.length === 0) {
return { id: null, fileId: null };
} //the group had no image element member
return { id: selectedElement[0].id, fileId: selectedElement[0].fileId }; //return image element fileId
return { id: imageElement[0].id, fileId: imageElement[0].fileId }; //return image element fileId
};
this.addText = (text: string, fontFamily?: 1 | 2 | 3) => {

63
src/main.ts
View File

@@ -685,7 +685,7 @@ export default class ExcalidrawPlugin extends Plugin {
this.insertMDDialog = new InsertMDDialog(this);
this.addRibbonIcon(ICON_NAME, t("CREATE_NEW"), async (e) => {
this.createDrawing(this.getNextDefaultFilename(), e[CTRL_OR_CMD]); //.ctrlKey||e.metaKey);
this.createAndOpenDrawing(this.getNextDefaultFilename(), e[CTRL_OR_CMD]); //.ctrlKey||e.metaKey);
});
const fileMenuHandlerCreateNew = (menu: Menu, file: TFile) => {
@@ -700,7 +700,7 @@ export default class ExcalidrawPlugin extends Plugin {
file.path.substr(0, file.path.lastIndexOf(file.name)),
);
}
this.createDrawing(
this.createAndOpenDrawing(
this.getNextDefaultFilename(),
false,
folderpath,
@@ -832,7 +832,7 @@ export default class ExcalidrawPlugin extends Plugin {
id: "excalidraw-autocreate",
name: t("NEW_IN_NEW_PANE"),
callback: () => {
this.createDrawing(this.getNextDefaultFilename(), true);
this.createAndOpenDrawing(this.getNextDefaultFilename(), true);
},
});
@@ -840,7 +840,7 @@ export default class ExcalidrawPlugin extends Plugin {
id: "excalidraw-autocreate-on-current",
name: t("NEW_IN_ACTIVE_PANE"),
callback: () => {
this.createDrawing(this.getNextDefaultFilename(), false);
this.createAndOpenDrawing(this.getNextDefaultFilename(), false);
},
});
@@ -859,12 +859,12 @@ export default class ExcalidrawPlugin extends Plugin {
activeView.file.path,
filename,
);
this.embedDrawing(fFp.filepath);
this.createDrawing(
const file = await this.createDrawing(
filename,
inNewPane,
fFp.folder === "" ? null : fFp.folder,
);
await this.embedDrawing(fFp.filepath);
this.openDrawing(file,inNewPane);
};
this.addCommand({
@@ -1502,26 +1502,18 @@ export default class ExcalidrawPlugin extends Plugin {
//this.saveSettings();
}
public embedDrawing(data: string) {
public async embedDrawing(data: string) {
const activeView = this.app.workspace.getActiveViewOfType(MarkdownView);
if (activeView) {
const editor = activeView.editor;
switch (this.settings.embedType) {
case "excalidraw":
editor.replaceSelection(`![[${data}]]`);
break;
case "PNG":
editor.replaceSelection(
`![[${data.substr(0, data.lastIndexOf("."))}.png]] ([[${data}|*]])`,
);
break;
case "SVG":
editor.replaceSelection(
`![[${data.substr(0, data.lastIndexOf("."))}.svg]] ([[${data}|*]])`,
);
break;
if(this.settings.embedType === "excalidraw") {
editor.replaceSelection(`![[${data}]]`);
editor.focus();
return;
}
const filename = data.substring(0, data.lastIndexOf("."))+"."+this.settings.embedType.toLowerCase();
await this.app.vault.create(filename,"");
editor.replaceSelection(`![[${filename}]]\n%%[[${data}|🖋 Edit in Excalidraw]]%%`);
editor.focus();
}
}
@@ -1656,27 +1648,26 @@ export default class ExcalidrawPlugin extends Plugin {
public async createDrawing(
filename: string,
onNewPane: boolean,
foldername?: string,
initData?: string,
): Promise<string> {
): Promise<TFile> {
const folderpath = normalizePath(
foldername ? foldername : this.settings.folder,
);
await checkAndCreateFolder(this.app.vault, folderpath); //create folder if it does not exist
const fname = getNewUniqueFilepath(this.app.vault, filename, folderpath);
return await this.app.vault.create(fname, initData??await this.getBlankDrawing());
}
if (initData) {
this.openDrawing(await this.app.vault.create(fname, initData), onNewPane);
return fname;
}
this.openDrawing(
await this.app.vault.create(fname, await this.getBlankDrawing()),
onNewPane,
);
return fname;
public async createAndOpenDrawing(
filename: string,
onNewPane: boolean,
foldername?: string,
initData?: string,
): Promise<string> {
const file = await this.createDrawing(filename,foldername,initData);
this.openDrawing(file, onNewPane);
return file.path;
}
public async setMarkdownView(leaf: WorkspaceLeaf) {

2
src/openDrawing.ts
View File

@@ -31,7 +31,7 @@ export class OpenFileDialog extends FuzzySuggestModal<TFile> {
this.inputEl.onkeyup = (e) => {
if (e.key == "Enter" && this.action == openDialogAction.openFile) {
if (this.containerEl.innerText.includes(EMPTY_MESSAGE)) {
this.plugin.createDrawing(
this.plugin.createAndOpenDrawing(
`${this.plugin.settings.folder}/${this.inputEl.value}.excalidraw.md`,
this.onNewPane,
);

2
versions.json
View File

@@ -1,4 +1,4 @@
{
"1.5.8": "0.12.16",
"1.5.9": "0.12.16",
"1.4.2": "0.11.13"
}