diff --git a/simple-mind-map/index.js b/simple-mind-map/index.js index 4e918905..41a0ded9 100644 --- a/simple-mind-map/index.js +++ b/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) } // 渲染,部分渲染 diff --git a/simple-mind-map/src/plugins/NodeImgAdjust.js b/simple-mind-map/src/plugins/NodeImgAdjust.js index fd7dbb2c..eb7e13ce 100644 --- a/simple-mind-map/src/plugins/NodeImgAdjust.js +++ b/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; - height: ${this.resizeBtnSize}px; + width: ${imgResizeBtnSize}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; - height: ${this.resizeBtnSize}px; + width: ${imgResizeBtnSize}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, { - url: image, - title: imageTitle, - width: this.currentImgWidth / scaleX, - height: this.currentImgHeight / scaleY, - custom: true // 代表自定义了图片大小 - }) - this.isAdjusted = true + const newWidth = this.currentImgWidth / scaleX + const newHeight = this.currentImgHeight / scaleY + if (newWidth !== imageSize.width || newHeight !== imageSize.height) { + this.mindMap.execCommand('SET_NODE_IMAGE', this.node, { + url: image, + title: imageTitle, + width: newWidth, + height: newHeight, + custom: true // 代表自定义了图片大小 + }) + this.isAdjusted = true + } + this.isMousedown = false } diff --git a/simple-mind-map/src/theme/default.js b/simple-mind-map/src/theme/default.js index 67e69bae..1cf3f7bd 100644 --- a/simple-mind-map/src/theme/default.js +++ b/simple-mind-map/src/theme/default.js @@ -4,7 +4,7 @@ export default { paddingX: 15, paddingY: 5, // 图片显示的最大宽度 - imgMaxWidth: 100, + imgMaxWidth: 200, // 图片显示的最大高度 imgMaxHeight: 100, // icon的大小 diff --git a/simple-mind-map/src/utils/index.js b/simple-mind-map/src/utils/index.js index 4c0fb3c1..df42fd23 100644 --- a/simple-mind-map/src/utils/index.js +++ b/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) {