diff --git a/simple-mind-map/src/constants/defaultOptions.js b/simple-mind-map/src/constants/defaultOptions.js index 99777253..14ef4dba 100644 --- a/simple-mind-map/src/constants/defaultOptions.js +++ b/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 } diff --git a/simple-mind-map/src/plugins/NodeImgAdjust.js b/simple-mind-map/src/plugins/NodeImgAdjust.js index eb7e13ce..cf808516 100644 --- a/simple-mind-map/src/plugins/NodeImgAdjust.js +++ b/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 newHeight = e.clientY - this.rect.y - if (newWidth <= 0 || newHeight <= 0) return - let [actWidth, actHeight] = resizeImgSizeByOriginRatio( + let newWidth = Math.abs(e.clientX - this.rect.x - this.mousedownOffset.x) + let newHeight = Math.abs(e.clientY - this.rect.y - this.mousedownOffset.y) + // 限制最大值 + 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() - let { scaleX, scaleY } = this.mindMap.draw.transform() + const { image, imageTitle, imageSize } = this.node.getData() + 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 } // 渲染完成事件 diff --git a/web/src/pages/Edit/components/BaseStyle.vue b/web/src/pages/Edit/components/BaseStyle.vue index 9f84894a..8c1750df 100644 --- a/web/src/pages/Edit/components/BaseStyle.vue +++ b/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)