Fix：修复缩放图片工具方法有误的问题；Feat：默认主题的最大图片宽度改为200；Feat：缩放节点图片按钮大小支持配置

simple-mind-map/index.js

@@ -207,13 +207,12 @@ class MindMap {
     this.cssEl = document.createElement('style')
     this.cssEl.type = 'text/css'
     this.cssEl.innerHTML = this.joinCss()
-
     document.head.appendChild(this.cssEl)
   }
 
   // 移除css
   removeCss() {
-    document.head.removeChild(this.cssEl)
+    if (this.cssEl) document.head.removeChild(this.cssEl)
   }
 
   //  渲染，部分渲染

simple-mind-map/src/plugins/NodeImgAdjust.js

@@ -6,7 +6,6 @@ class NodeImgAdjust {
   //  构造函数
   constructor({ mindMap }) {
     this.mindMap = mindMap
-    this.resizeBtnSize = 26 // 调整按钮的大小
     this.handleEl = null // 自定义元素，用来渲染临时图片、调整按钮
     this.isShowHandleEl = false // 自定义元素是否在显示中
     this.node = null // 当前节点实例
@@ -116,6 +115,7 @@ class NodeImgAdjust {
 
   // 创建调整按钮元素
   createResizeBtnEl() {
+    const { imgResizeBtnSize } = this.mindMap.opt
     // 容器元素
     this.handleEl = document.createElement('div')
     this.handleEl.style.cssText = `
@@ -134,8 +134,8 @@ class NodeImgAdjust {
       bottom: 0;
       pointer-events: auto;
       background-color: rgba(0, 0, 0, 0.3);
-      width: ${this.resizeBtnSize}px;
+      width: ${imgResizeBtnSize}px;
-      height: ${this.resizeBtnSize}px;
+      height: ${imgResizeBtnSize}px;
       display: flex;
       justify-content: center;
       align-items: center;
@@ -178,8 +178,8 @@ class NodeImgAdjust {
       right: 0;top:0;color:#fff;
       pointer-events: auto;
       background-color: rgba(0, 0, 0, 0.3);
-      width: ${this.resizeBtnSize}px;
+      width: ${imgResizeBtnSize}px;
-      height: ${this.resizeBtnSize}px;
+      height: ${imgResizeBtnSize}px;
       display: flex;
       justify-content: center;
       align-items: center;
@@ -244,16 +244,21 @@ class NodeImgAdjust {
     // 隐藏自定义元素
     this.hideHandleEl()
     // 更新节点图片为新的大小
-    let { image, imageTitle } = this.node.getData()
+    let { image, imageTitle, imageSize } = this.node.getData()
     let { scaleX, scaleY } = this.mindMap.draw.transform()
-    this.mindMap.execCommand('SET_NODE_IMAGE', this.node, {
+    const newWidth = this.currentImgWidth / scaleX
-      url: image,
+    const newHeight = this.currentImgHeight / scaleY
-      title: imageTitle,
+    if (newWidth !== imageSize.width || newHeight !== imageSize.height) {
-      width: this.currentImgWidth / scaleX,
+      this.mindMap.execCommand('SET_NODE_IMAGE', this.node, {
-      height: this.currentImgHeight / scaleY,
+        url: image,
-      custom: true // 代表自定义了图片大小
+        title: imageTitle,
-    })
+        width: newWidth,
-    this.isAdjusted = true
+        height: newHeight,
+        custom: true // 代表自定义了图片大小
+      })
+      this.isAdjusted = true
+    }
+
     this.isMousedown = false
   }
 

simple-mind-map/src/theme/default.js

@@ -4,7 +4,7 @@ export default {
   paddingX: 15,
   paddingY: 5,
   // 图片显示的最大宽度
-  imgMaxWidth: 100,
+  imgMaxWidth: 200,
   // 图片显示的最大高度
   imgMaxHeight: 100,
   // icon的大小

simple-mind-map/src/utils/index.js

@@ -76,11 +76,11 @@ export const resizeImgSizeByOriginRatio = (
   let nRatio = width / height
   let mRatio = newWidth / newHeight
   if (nRatio > mRatio) {
-    // 固定高度
-    arr = [nRatio * newHeight, newHeight]
-  } else {
     // 固定宽度
     arr = [newWidth, newWidth / nRatio]
+  } else {
+    // 固定高度
+    arr = [nRatio * newHeight, newHeight]
   }
   return arr
 }
@@ -95,11 +95,11 @@ export const resizeImgSize = (width, height, maxWidth, maxHeight) => {
     } else {
       let mRatio = maxWidth / maxHeight
       if (nRatio > mRatio) {
-        // 固定高度
-        arr = [nRatio * maxHeight, maxHeight]
-      } else {
         // 固定宽度
         arr = [maxWidth, maxWidth / nRatio]
+      } else {
+        // 固定高度
+        arr = [nRatio * maxHeight, maxHeight]
       }
     }
   } else if (maxWidth) {