feat: enhance image handling and update Topic interface

Author: SSShooter

package.json

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

src/exampleData/1.ts

@@ -18,8 +18,9 @@ const aboutMindElixir: MindElixirData = {
             topic: 'mind-elixir',
             image: {
               url: 'https://raw.githubusercontent.com/ssshooter/mind-elixir-core/master/images/logo2.png',
-              height: 90,
+              height: 100,
               width: 90,
+              fit: 'contain',
             },
           },
         ],

src/nodeOperation.ts

@@ -17,7 +17,7 @@ export const rmSubline = function (tpc: Topic) {
   if (lc?.tagName === 'svg') lc?.remove() // clear svg group of main node
 }
 
-export const reshapeNode = function (this: MindElixirInstance, tpc: Topic, patchData: NodeObj) {
+export const reshapeNode = function (this: MindElixirInstance, tpc: Topic, patchData: Partial<NodeObj>) {
   const nodeObj = tpc.nodeObj
   const origin = deepClone(nodeObj)
   // merge styles

src/types/dom.ts

@@ -37,7 +37,7 @@ export interface Topic extends HTMLElement {
   text: HTMLSpanElement
   expander?: Expander
 
-  linkContainer?: HTMLElement
+  link?: HTMLElement
   image?: HTMLImageElement
   icons?: HTMLSpanElement
   tags?: HTMLDivElement

src/types/index.ts

@@ -174,6 +174,7 @@ export type NodeObj = {
     url: string
     width: number
     height: number
+    fit?: 'fill' | 'contain' | 'cover'
   }
   // main node specific properties
   branchColor?: string

src/utils/dom.ts

@@ -31,55 +31,56 @@ export const shapeTpc = function (tpc: Topic, nodeObj: NodeObj) {
   if (nodeObj.image) {
     const img = nodeObj.image
     if (img.url && img.width && img.height) {
-      const imgContainer = $d.createElement('img')
-      imgContainer.src = img.url
-      imgContainer.style.width = img.width + 'px'
-      imgContainer.style.height = img.height + 'px'
-      tpc.appendChild(imgContainer)
-      tpc.image = imgContainer
+      const imgEl = $d.createElement('img')
+      imgEl.src = img.url
+      imgEl.style.width = img.width + 'px'
+      imgEl.style.height = img.height + 'px'
+      if (img.fit) imgEl.style.objectFit = img.fit
+      tpc.appendChild(imgEl)
+      tpc.image = imgEl
     } else {
-      console.warn('image url/width/height are required')
+      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
+    const textEl = $d.createElement('span')
+    textEl.className = 'text'
+    textEl.textContent = nodeObj.topic
+    tpc.appendChild(textEl)
+    tpc.text = textEl
   }
 
   if (nodeObj.hyperLink) {
-    const linkContainer = $d.createElement('a')
-    linkContainer.className = 'hyper-link'
-    linkContainer.target = '_blank'
-    linkContainer.innerText = '🔗'
-    linkContainer.href = nodeObj.hyperLink
-    tpc.appendChild(linkContainer)
-    tpc.linkContainer = linkContainer
-  } else if (tpc.linkContainer) {
-    tpc.linkContainer = undefined
+    const linkEl = $d.createElement('a')
+    linkEl.className = 'hyper-link'
+    linkEl.target = '_blank'
+    linkEl.innerText = '🔗'
+    linkEl.href = nodeObj.hyperLink
+    tpc.appendChild(linkEl)
+    tpc.link = linkEl
+  } else if (tpc.link) {
+    tpc.link = 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
+    const iconsEl = $d.createElement('span')
+    iconsEl.className = 'icons'
+    iconsEl.innerHTML = nodeObj.icons.map(icon => `<span>${encodeHTML(icon)}</span>`).join('')
+    tpc.appendChild(iconsEl)
+    tpc.icons = iconsEl
   } 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
+    const tagsEl = $d.createElement('div')
+    tagsEl.className = 'tags'
+    tagsEl.innerHTML = nodeObj.tags.map(tag => `<span>${encodeHTML(tag)}</span>`).join('')
+    tpc.appendChild(tagsEl)
+    tpc.tags = tagsEl
   } else if (tpc.tags) {
     tpc.tags = undefined
   }