feat: bind exportImage to ME instance

Author: SSShooter

readme.md

@@ -31,10 +31,12 @@ Mind elixir is a free open source mind map core.
 - High performance
 - Framework agnostic
 - Pluginable
+- Export as SVG or PNG
 - Build-in drag and drop / node edit plugin
 - Summarize nodes
 - Undo / Redo
 - Styling your node with CSS
+- Efficient shortcuts
 
 <details>
 <summary>Table of Contents</summary>
@@ -50,6 +52,7 @@ Mind elixir is a free open source mind map core.
   - [Event Handling](#event-handling)
   - [Data Export And Import](#data-export-and-import)
   - [Operation Guards](#operation-guards)
+- [Export as a Image](#export-as-a-image)
 - [Methods](#methods)
 - [Theme](#theme)
 - [Shortcuts](#shortcuts)
@@ -253,6 +256,24 @@ let mind = new MindElixir({
 })
 ```
 
+## Export as a Image
+
+```typescript
+import { exportPng } from './plugin/exportImage'
+
+const mind = {/** mind elixir instance */}
+const downloadPng = async () => {
+  const blob = await exportPng(mind) // Get a Blob!
+  if (!blob) return
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = 'filename.png'
+  a.click()
+  URL.revokeObjectURL(url)
+}
+```
+
 ## Methods
 
 https://github.com/ssshooter/mind-elixir-core/blob/master/api/mind-elixir.api.md

src/dev.ts

@@ -5,16 +5,13 @@ import example2 from './exampleData/2'
 import example3 from './exampleData/3'
 import type { Options, MindElixirData, MindElixirInstance } from './types/index'
 import type { Operation } from './utils/pubsub'
-import { exportSvg, exportPng } from './plugin/exportImage'
+import { exportPng } from './plugin/exportImage'
 
-window.exportSvg = exportSvg
-window.exportPng = exportPng
 interface Window {
   m: MindElixirInstance
   M: MindElixirCtor
   E: typeof MindElixir.E
-  exportSvg: typeof exportSvg
-  exportPng: typeof exportPng
+  downloadPng: typeof downloadPng
 }
 
 declare let window: Window
@@ -104,6 +101,19 @@ mind.bus.addListener('selectNode', node => {
 mind.bus.addListener('expandNode', node => {
   console.log('expandNode: ', node)
 })
+
+const downloadPng = async () => {
+  const blob = await mind.exportPng()
+  if (!blob) return
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = 'filename.png'
+  a.click()
+  URL.revokeObjectURL(url)
+}
+
+window.downloadPng = downloadPng
 window.m = mind
 // window.m2 = mind2
 window.M = MindElixir

src/methods.ts

@@ -15,6 +15,7 @@ import * as interact from './interact'
 import * as nodeOperation from './nodeOperation'
 import * as customLink from './customLink'
 import * as summaryOperation from './summary'
+import * as exportImage from './plugin/exportImage'
 
 type Operations = keyof typeof nodeOperation
 type NodeOperation = Record<Operations, ReturnType<typeof beforeHook>>
@@ -62,6 +63,7 @@ const methods = {
   ...(nodeOperationHooked as NodeOperation),
   ...customLink,
   ...summaryOperation,
+  ...exportImage,
   init(this: MindElixirInstance, data: MindElixirData) {
     if (!data || !data.nodeData) return new Error('MindElixir: `data` is required')
     if (data.direction !== undefined) {

src/plugin/exportImage.ts

@@ -177,14 +177,14 @@ function blobToUrl(blob: Blob): Promise<string> {
   })
 }
 
-export const exportSvg = (mei: MindElixirInstance) => {
-  const svgString = generateSvg(mei)
+export const exportSvg = function (this: MindElixirInstance) {
+  const svgString = generateSvg(this)
   const blob = new Blob([svgString], { type: 'image/svg+xml' })
   return blob
 }
 
-export const exportPng = async (mei: MindElixirInstance) => {
-  const svgString = generateSvg(mei)
+export const exportPng = async function (this: MindElixirInstance): Promise<Blob | null> {
+  const svgString = generateSvg(this)
   const blob = new Blob([svgString], { type: 'image/svg+xml' })
   // use base64 to bypass canvas taint
   const url = await blobToUrl(blob)