client: Implement SVG export button for mindmap

This commit is contained in:
Elian Doran 2024-09-01 23:10:58 +03:00
parent 27a287f8ea
commit 61e0678af4
No known key found for this signature in database
3 changed files with 32 additions and 5 deletions

View File

@ -3,7 +3,7 @@ import NoteContextAwareWidget from "../note_context_aware_widget.js";
const TPL = `
<button type="button"
class="export-mermaid-button"
class="export-svg-button"
title="${t('svg_export_button.button_title')}">
<span class="bx bx-export"></span>
</button>
@ -12,7 +12,7 @@ const TPL = `
export default class SvgExportButton extends NoteContextAwareWidget {
isEnabled() {
return super.isEnabled()
&& this.note?.type === 'mermaid'
&& [ "mermaid", "mindMap" ].includes(this.note?.type)
&& this.note.isContentAvailable()
&& this.noteContext?.viewScope.viewMode === 'default';
}
@ -21,7 +21,7 @@ export default class SvgExportButton extends NoteContextAwareWidget {
super.doRender();
this.$widget = $(TPL);
this.$widget.on('click', () => this.triggerEvent('exportMermaid', {ntxId: this.ntxId}));
this.$widget.on('click', () => this.triggerEvent('exportSvg', {ntxId: this.ntxId}));
this.contentSized();
}
}

View File

@ -132,7 +132,7 @@ export default class MermaidWidget extends NoteContextAwareWidget {
}
}
async exportMermaidEvent({ntxId}) {
async exportSvgEvent({ntxId}) {
if (!this.isNoteContext(ntxId)) {
return;
}

View File

@ -83,7 +83,7 @@ export default class MindMapWidget extends TypeWidget {
return;
}
const svgContent = await this.mind.exportSvg().text();
const svgContent = await this.renderSvg();
return {
content: mind.getDataString(),
attachments: [
@ -98,9 +98,36 @@ export default class MindMapWidget extends TypeWidget {
};
}
async renderSvg() {
return await this.mind.exportSvg().text();
}
async entitiesReloadedEvent({loadResults}) {
if (loadResults.isNoteReloaded(this.noteId)) {
this.refresh();
}
}
async exportSvgEvent({ntxId}) {
if (!this.isNoteContext(ntxId)) {
return;
}
const svg = await this.renderSvg();
this.download(`${this.note.title}.svg`, svg);
}
download(filename, text) {
const element = document.createElement('a');
element.setAttribute('href', `data:image/svg+xml;charset=utf-8,${encodeURIComponent(text)}`);
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
}