feat: add destroy()

fixed #269

Author: SSShooter

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mind-elixir",
-  "version": "4.0.5",
+  "version": "4.1.0",
   "type": "module",
   "description": "Mind elixir is a free open source mind map core.",
   "keywords": [

src/arrow.ts

@@ -308,7 +308,6 @@ export function editArrowLabel(this: MindElixirInstance, el: CustomSvg) {
   console.time('editSummary')
   if (!el) return
   const textEl = el.children[2]
-  console.log(textEl, el)
   editSvgText(this, textEl, div => {
     const node = el.arrowObj
     const text = div.textContent?.trim() || ''

src/dev.ts

@@ -9,11 +9,12 @@ import style from '../index.css?raw'
 import katex from '../katex.css?raw'
 
 interface Window {
-  m: MindElixirInstance
+  m?: MindElixirInstance
   M: MindElixirCtor
   E: typeof MindElixir.E
   downloadPng: ReturnType<typeof download>
   downloadSvg: ReturnType<typeof download>
+  destroy: () => void
 }
 
 declare let window: Window
@@ -58,7 +59,7 @@ const options: Options = {
   },
 }
 
-const mind = new MindElixir(options)
+let mind = new MindElixir(options)
 
 const data = MindElixir.new('new topic')
 mind.init(example)
@@ -73,7 +74,7 @@ function sleep() {
     setTimeout(() => res(), 1000)
   })
 }
-console.log('test E function', E('bd4313fbac40284b'))
+// console.log('test E function', E('bd4313fbac40284b'))
 
 mind.bus.addListener('operation', (operation: Operation) => {
   console.log(operation)
@@ -120,3 +121,11 @@ window.m = mind
 // window.m2 = mind2
 window.M = MindElixir
 window.E = MindElixir.E
+
+window.destroy = () => {
+  mind.destroy()
+  // @ts-expect-error remove reference
+  mind = null
+  // @ts-expect-error remove reference
+  window.m = null
+}

src/index.ts

@@ -39,7 +39,6 @@ function MindElixir(
     theme,
   }: Options
 ): void {
-  console.log('ME_version ' + MindElixir.version, this)
   let ele: HTMLElement | null = null
   const elType = Object.prototype.toString.call(el)
   if (elType === '[object HTMLDivElement]') {
@@ -53,6 +52,7 @@ function MindElixir(
   ele.innerHTML = ''
   ele.style.setProperty('--gap', GAP + 'px')
   this.mindElixirBox = ele as HTMLElement
+  this.disposable = []
   this.before = before || {}
   this.locale = locale || 'en'
   this.contextMenuOption = contextMenuOption
@@ -129,7 +129,7 @@ MindElixir.DARK_THEME = DARK_THEME
  * @memberof MindElixir
  * @static
  */
-MindElixir.version = '4.0.5'
+MindElixir.version = '4.1.0'
 /**
  * @function
  * @memberof MindElixir

src/methods.ts

@@ -91,8 +91,8 @@ const methods = {
       }
       if (isMobile() && this.mobileMenu) {
         mobileMenu(this)
-      } else {
-        this.contextMenu && contextMenu(this, this.contextMenuOption)
+      } else if (this.contextMenu) {
+        this.disposable.push(contextMenu(this, this.contextMenuOption))
       }
       this.draggable && nodeDraggable(this)
       this.allowUndo && operationHistory(this)
@@ -101,6 +101,34 @@ const methods = {
     this.layout()
     this.linkDiv()
   },
+  destroy(this: Partial<MindElixirInstance>) {
+    this.disposable!.forEach(fn => fn())
+    this.mindElixirBox?.remove()
+    this.mindElixirBox = undefined
+    this.nodeData = undefined
+    this.arrows = undefined
+    this.summaries = undefined
+    this.currentArrow = undefined
+    this.currentNode = undefined
+    this.currentNodes = undefined
+    this.currentSummary = undefined
+    this.waitCopy = undefined
+    this.theme = undefined
+    this.direction = undefined
+    this.bus = undefined
+    this.container = undefined
+    this.map = undefined
+    this.lines = undefined
+    this.linkController = undefined
+    this.linkSvgGroup = undefined
+    this.P2 = undefined
+    this.P3 = undefined
+    this.line1 = undefined
+    this.line2 = undefined
+    this.nodes = undefined
+    this.selection?.destroy()
+    this.selection = undefined
+  },
 }
 
 export default methods

src/plugin/contextMenu.ts

@@ -194,4 +194,19 @@ export default function (mind: MindElixirInstance, option: any) {
     mind.createSummary()
     mind.unselectNodes()
   }
+  return () => {
+    // maybe usefull?
+    add_child.onclick = null
+    add_parent.onclick = null
+    add_sibling.onclick = null
+    remove_child.onclick = null
+    focus.onclick = null
+    unfocus.onclick = null
+    up.onclick = null
+    down.onclick = null
+    link.onclick = null
+    summary.onclick = null
+    menuContainer.onclick = null
+    mind.container.oncontextmenu = null
+  }
 }

src/plugin/operationHistory.ts

@@ -62,7 +62,7 @@ export default function (mei: MindElixirInstance) {
       if (h.currentObject.type === 'node') mei.selectNode(findEle(h.currentObject.value))
       else if (h.currentObject.type === 'nodes') mei.selectNodes(h.currentObject.value.map(id => findEle(id)))
       currentIndex--
-      console.log('current', current)
+      // console.log('current', current)
     }
   }
   mei.redo = function () {

src/types/index.ts

@@ -40,6 +40,7 @@ export type Theme = {
  * @public
  */
 export interface MindElixirInstance extends MindElixirMethods {
+  disposable: Array<() => void>
   isFocusMode: boolean
   nodeDataBackup: NodeObj
   mindElixirBox: HTMLElement
@@ -59,7 +60,7 @@ export interface MindElixirInstance extends MindElixirMethods {
   theme: Theme
   userTheme?: Theme
   direction: number
-  locale: string
+  locale: Locale
   draggable: boolean
   editable: boolean
   contextMenu: boolean

src/utils/dom.ts

@@ -172,7 +172,6 @@ export const editTopic = function (this: MindElixirInstance, el: Topic) {
     if (!div) return
     const node = el.nodeObj
     const topic = div.textContent?.trim() || ''
-    console.log(topic)
     if (topic === '') node.topic = origin
     else node.topic = topic
     div.remove()