refactor: create text container, place image before text

use object property to prevent fixed order

Author: SSShooter

src/index.less

@@ -81,7 +81,7 @@
   me-main {
     // main node
     & > me-wrapper {
-      position: relative; // make subline svg's offsetParent to be the main node
+      position: relative; // make subline svg's offsetParent be the main node
       margin: 20px 65px;
       & > me-parent {
         margin: var(--gap);
@@ -125,12 +125,7 @@
       white-space: pre-wrap;
       padding: var(--topic-padding);
       line-height: 1.2em; // assure the line-height consistency between different languages
-      & > div,
-      & > span,
-      & > img {
-        // tags,icons,images should not response to click event
-        pointer-events: none;
-      }
+
       // drag preview
       .insert-preview {
         position: absolute;
@@ -241,13 +236,19 @@
     pointer-events: all;
   }
 
-  me-tpc > img {
-    pointer-events: none;
-    display: block;
-    margin-top: 8px;
-    object-fit: cover;
+  me-tpc {
+    & > div,
+    & > span,
+    & > img {
+      // tags,icons,images should not response to click event
+      pointer-events: none;
+    }
+    & > img {
+      display: block;
+      margin-bottom: 8px;
+      object-fit: cover;
+    }
   }
-
   .circle {
     position: absolute;
     height: 10px;
@@ -299,8 +300,9 @@
     border-radius: 6px;
     border: #666666 2px solid;
   }
-}
-.selection-area {
-  background: #4f90f22d;
-  border: 1px solid #4f90f2;
+
+  .selection-area {
+    background: #4f90f22d;
+    border: 1px solid #4f90f2;
+  }
 }

src/nodeOperation.ts

@@ -536,7 +536,7 @@ export const beginEdit = function (this: MindElixirInstance, el?: Topic) {
 }
 
 export const setNodeTopic = function (this: MindElixirInstance, el: Topic, topic: string) {
-  el.childNodes[0].textContent = topic
+  el.text.textContent = topic
   el.nodeObj.topic = topic
   this.linkDiv()
 }

src/plugin/exportImage.ts

@@ -144,7 +144,7 @@ const generateSvg = (mei: MindElixirInstance, noForiegnObject = false) => {
   summaries && g.appendChild(summaries)
 
   mapDiv.querySelectorAll('me-tpc').forEach(tpc => {
-    g.appendChild(convertDivToSvg(mei, tpc as Topic, noForiegnObject ? false : true))
+    g.appendChild(convertDivToSvg(mei, (tpc as Topic).text, noForiegnObject ? false : true))
   })
   mapDiv.querySelectorAll('.tags > span').forEach(tag => {
     g.appendChild(convertDivToSvg(mei, tag as HTMLElement))

src/types/dom.ts

@@ -30,12 +30,14 @@ export interface Children extends HTMLElement {
 
 export interface Topic extends HTMLElement {
   nodeObj: NodeObj
-  linkContainer: HTMLElement | null
   parentNode: Parent
   parentElement: Parent
   offsetParent: Parent
 
+  text: HTMLSpanElement
   expander?: Expander
+
+  linkContainer?: HTMLElement
   image?: HTMLImageElement
   icons?: HTMLSpanElement
   tags?: HTMLDivElement

src/utils/dom.ts

@@ -14,15 +14,23 @@ export const findEle = (id: string, instance?: MindElixirInstance) => {
 }
 
 export const shapeTpc = function (tpc: Topic, nodeObj: NodeObj) {
-  tpc.textContent = nodeObj.topic
-
   if (nodeObj.style) {
     tpc.style.color = nodeObj.style.color || ''
     tpc.style.background = nodeObj.style.background || ''
     tpc.style.fontSize = nodeObj.style.fontSize + 'px'
     tpc.style.fontWeight = nodeObj.style.fontWeight || 'normal'
   }
 
+  if (nodeObj.branchColor) {
+    tpc.style.borderColor = nodeObj.branchColor
+  }
+
+  // TODO
+  // if (nodeObj.dangerouslySetInnerHTML) {
+  //   tpc.innerHTML = nodeObj.dangerouslySetInnerHTML
+  //   return
+  // }
+
   if (nodeObj.image) {
     const img = nodeObj.image
     if (img.url && img.width && img.height) {
@@ -35,6 +43,16 @@ export const shapeTpc = function (tpc: Topic, nodeObj: NodeObj) {
     } else {
       console.warn('image url/width/height are required')
     }
+  } else if (tpc.image) {
+    tpc.image = undefined
+  }
+
+  {
+    const textContainer = $d.createElement('span')
+    textContainer.className = 'text'
+    textContainer.textContent = nodeObj.topic
+    tpc.appendChild(textContainer)
+    tpc.text = textContainer
   }
 
   if (nodeObj.hyperLink) {
@@ -46,26 +64,27 @@ export const shapeTpc = function (tpc: Topic, nodeObj: NodeObj) {
     tpc.appendChild(linkContainer)
     tpc.linkContainer = linkContainer
   } else if (tpc.linkContainer) {
-    tpc.linkContainer.remove()
-    tpc.linkContainer = null
+    tpc.linkContainer = undefined
   }
+
   if (nodeObj.icons && nodeObj.icons.length) {
     const iconsContainer = $d.createElement('span')
     iconsContainer.className = 'icons'
     iconsContainer.innerHTML = nodeObj.icons.map(icon => `<span>${encodeHTML(icon)}</span>`).join('')
     tpc.appendChild(iconsContainer)
     tpc.icons = iconsContainer
+  } else if (tpc.icons) {
+    tpc.icons = undefined
   }
+
   if (nodeObj.tags && nodeObj.tags.length) {
     const tagsContainer = $d.createElement('div')
     tagsContainer.className = 'tags'
     tagsContainer.innerHTML = nodeObj.tags.map(tag => `<span>${encodeHTML(tag)}</span>`).join('')
     tpc.appendChild(tagsContainer)
     tpc.tags = tagsContainer
-  }
-
-  if (nodeObj.branchColor) {
-    tpc.style.borderColor = nodeObj.branchColor
+  } else if (tpc.tags) {
+    tpc.tags = undefined
   }
 }
 
@@ -122,7 +141,7 @@ export const editTopic = function (this: MindElixirInstance, el: Topic) {
   console.time('editTopic')
   if (!el) return
   const div = $d.createElement('div')
-  const origin = el.childNodes[0].textContent as string
+  const origin = el.text.textContent as string
   el.appendChild(div)
   div.id = 'input-box'
   div.textContent = origin
@@ -161,7 +180,7 @@ export const editTopic = function (this: MindElixirInstance, el: Topic) {
     else node.topic = topic
     div.remove()
     if (topic === origin) return
-    el.childNodes[0].textContent = node.topic
+    el.text.textContent = node.topic
     this.linkDiv()
     this.bus.fire('operation', {
       name: 'finishEdit',