Feat：支持设置拖拽调整图片大小的最大值

simple-mind-map/src/constants/defaultOptions.js

@@ -438,5 +438,12 @@ export const defaultOpt = {
 
   // 【NodeImgAdjust】插件
   // 拦截节点图片的删除，点击节点图片上的删除按钮删除图片前会调用该函数，如果函数返回true则取消删除
-  beforeDeleteNodeImg: null
+  beforeDeleteNodeImg: null,
+  // 删除和调整两个按钮的大小
+  imgResizeBtnSize: 25,
+  // 最大允许缩放的尺寸依据主题的配置，即主题的imgMaxWidth和imgMaxHeight配置，如果设置为false，那么使用maxImgResizeWidth和maxImgResizeHeight选项
+  maxImgResizeWidthInheritTheme: true,
+  // 最大允许缩放的尺寸，maxImgResizeWidthInheritTheme选项设置为false时生效，不限制最大值可传递Infinity
+  maxImgResizeWidth: Infinity,
+  maxImgResizeHeight: Infinity
 }

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

@@ -12,6 +12,12 @@ class NodeImgAdjust {
     this.img = null // 当前节点的图片节点
     this.rect = null // 当前图片节点的尺寸信息
     this.isMousedown = false // 当前是否是按住调整按钮状态
+    this.mousedownDrawTransform = null //鼠标按下时对当前画布的变换
+    this.mousedownOffset = {
+      // 鼠标按下时位置和图片右下角相差的距离
+      x: 0,
+      y: 0
+    }
     this.currentImgWidth = 0 // 当前拖拽实时图片的大小
     this.currentImgHeight = 0
     this.isAdjusted = false // 是否是拖拽结束后的渲染期间
@@ -207,10 +213,13 @@ class NodeImgAdjust {
   }
 
   // 鼠标按钮按下事件
-  onMousedown() {
+  onMousedown(e) {
     this.isMousedown = true
+    this.mousedownDrawTransform = this.mindMap.draw.transform()
     // 隐藏节点实际图片
     this.hideNodeImage()
+    this.mousedownOffset.x = e.clientX - this.rect.x2
+    this.mousedownOffset.y = e.clientY - this.rect.y2
     // 将节点图片渲染到自定义元素上
     this.handleEl.style.backgroundImage = `url(${this.node.getData('image')})`
   }
@@ -219,13 +228,32 @@ class NodeImgAdjust {
   onMousemove(e) {
     if (!this.isMousedown) return
     e.preventDefault()
+    const { scaleX, scaleY } = this.mousedownDrawTransform
+    const {
+      maxImgResizeWidthInheritTheme,
+      maxImgResizeWidth,
+      maxImgResizeHeight
+    } = this.mindMap.opt
+    // 主题设置的最大图片宽高
+    let imgMaxWidth, imgMaxHeight
+    if (maxImgResizeWidthInheritTheme) {
+      imgMaxWidth = this.mindMap.getThemeConfig('imgMaxWidth')
+      imgMaxHeight = this.mindMap.getThemeConfig('imgMaxHeight')
+    } else {
+      imgMaxWidth = maxImgResizeWidth
+      imgMaxHeight = maxImgResizeHeight
+    }
+    imgMaxWidth = imgMaxWidth * scaleX
+    imgMaxHeight = imgMaxHeight * scaleY
     // 计算当前拖拽位置对应的图片的实时大小
-    let { width: imageOriginWidth, height: imageOriginHeight } =
+    const { width: imageOriginWidth, height: imageOriginHeight } =
       this.node.getData('imageSize')
-    let newWidth = e.clientX - this.rect.x
+    let newWidth = Math.abs(e.clientX - this.rect.x - this.mousedownOffset.x)
-    let newHeight = e.clientY - this.rect.y
+    let newHeight = Math.abs(e.clientY - this.rect.y - this.mousedownOffset.y)
-    if (newWidth <= 0 || newHeight <= 0) return
+    // 限制最大值
-    let [actWidth, actHeight] = resizeImgSizeByOriginRatio(
+    if (newWidth > imgMaxWidth) newWidth = imgMaxWidth
+    if (newHeight > imgMaxHeight) newHeight = imgMaxHeight
+    const [actWidth, actHeight] = resizeImgSizeByOriginRatio(
       imageOriginWidth,
       imageOriginHeight,
       newWidth,
@@ -244,8 +272,8 @@ class NodeImgAdjust {
     // 隐藏自定义元素
     this.hideHandleEl()
     // 更新节点图片为新的大小
-    let { image, imageTitle, imageSize } = this.node.getData()
+    const { image, imageTitle, imageSize } = this.node.getData()
-    let { scaleX, scaleY } = this.mindMap.draw.transform()
+    const { scaleX, scaleY } = this.mousedownDrawTransform
     const newWidth = this.currentImgWidth / scaleX
     const newHeight = this.currentImgHeight / scaleY
     if (newWidth !== imageSize.width || newHeight !== imageSize.height) {
@@ -258,8 +286,10 @@ class NodeImgAdjust {
       })
       this.isAdjusted = true
     }
-
     this.isMousedown = false
+    this.mousedownDrawTransform = null
+    this.mousedownOffset.x = 0
+    this.mousedownOffset.y = 0
   }
 
   // 渲染完成事件

web/src/pages/Edit/components/BaseStyle.vue

@@ -627,7 +627,7 @@
             style="width: 140px"
             v-model="style.imgMaxWidth"
             :min="10"
-            :max="300"
+            :max="500"
             @change="
               value => {
                 update('imgMaxWidth', value)
@@ -643,7 +643,7 @@
             style="width: 140px"
             v-model="style.imgMaxHeight"
             :min="10"
-            :max="300"
+            :max="500"
             @change="
               value => {
                 update('imgMaxHeight', value)