From dd82bf08793019d85463e22bea6e34a50952e236 Mon Sep 17 00:00:00 2001 From: wanglin2 <1013335014@qq.com> Date: Thu, 10 Aug 2023 10:06:02 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/constants/defaultOptions.js | 5 +- simple-mind-map/src/plugins/RichText.js | 42 +++++++++---- simple-mind-map/src/plugins/TouchEvent.js | 59 ++++++++++++------- 3 files changed, 73 insertions(+), 33 deletions(-) diff --git a/simple-mind-map/src/constants/defaultOptions.js b/simple-mind-map/src/constants/defaultOptions.js index 97560ac6..dfd07c83 100644 --- a/simple-mind-map/src/constants/defaultOptions.js +++ b/simple-mind-map/src/constants/defaultOptions.js @@ -131,5 +131,8 @@ export const defaultOpt = { enableCreateHiddenInput: true, // 是否在存在一个激活节点时，当按下中文、英文、数字按键时自动进入文本编辑模式 // 该配置在enableCreateHiddenInput设为true时生效 - enableAutoEnterTextEditWhenKeydown: true + enableAutoEnterTextEditWhenKeydown: true, + // 设置富文本节点编辑框和节点大小一致，形成伪原地编辑的效果 + // 需要注意的是，只有当节点内只有文本、且形状是矩形才会有比较好的效果 + richTextEditFakeInPlace: false } diff --git a/simple-mind-map/src/plugins/RichText.js b/simple-mind-map/src/plugins/RichText.js index 146bcf88..7b818e4e 100644 --- a/simple-mind-map/src/plugins/RichText.js +++ b/simple-mind-map/src/plugins/RichText.js @@ -155,6 +155,12 @@ class RichText { if (this.showTextEdit) { return } + const { + richTextEditFakeInPlace, + customInnerElsAppendTo, + nodeTextEditZIndex, + textAutoWrapWidth + } = this.mindMap.opt this.node = node this.isInserting = isInserting if (!rect) rect = node._textData.node.node.getBoundingClientRect() @@ -168,20 +174,31 @@ class RichText { let scaleX = rect.width / originWidth let scaleY = rect.height / originHeight // 内边距 - const paddingX = 14 - const paddingY = 4 + let paddingX = 6 + let paddingY = 4 + if (richTextEditFakeInPlace) { + let paddingValue = node.getPaddingVale() + paddingX = paddingValue.paddingX + paddingY = paddingValue.paddingY + } if (!this.textEditNode) { this.textEditNode = document.createElement('div') this.textEditNode.classList.add('smm-richtext-node-edit-wrap') - this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;box-shadow: 0 0 20px rgba(0,0,0,.5);outline: none; word-break: break-all;padding: ${paddingY}px ${paddingX}px;` + this.textEditNode.style.cssText = ` + position:fixed; + box-sizing: border-box; + box-shadow: 0 0 20px rgba(0,0,0,.5); + outline: none; + word-break: + break-all;padding: ${paddingY}px ${paddingX}px; + ` this.textEditNode.addEventListener('click', e => { e.stopPropagation() }) this.textEditNode.addEventListener('mousedown', e => { e.stopPropagation() }) - const targetNode = - this.mindMap.opt.customInnerElsAppendTo || document.body + const targetNode = customInnerElsAppendTo || document.body targetNode.appendChild(this.textEditNode) } // 使用节点的填充色，否则如果节点颜色是白色的话编辑时看不见 @@ -189,7 +206,7 @@ class RichText { let color = node.style.merge('color') this.textEditNode.style.marginLeft = `-${paddingX * scaleX}px` this.textEditNode.style.marginTop = `-${paddingY * scaleY}px` - this.textEditNode.style.zIndex = this.mindMap.opt.nodeTextEditZIndex + this.textEditNode.style.zIndex = nodeTextEditZIndex this.textEditNode.style.backgroundColor = bgColor === 'transparent' ? isWhite(color) @@ -201,15 +218,16 @@ class RichText { this.textEditNode.style.left = rect.left + 'px' this.textEditNode.style.top = rect.top + 'px' this.textEditNode.style.display = 'block' - this.textEditNode.style.maxWidth = - this.mindMap.opt.textAutoWrapWidth + paddingX * 2 + 'px' + this.textEditNode.style.maxWidth = textAutoWrapWidth + paddingX * 2 + 'px' this.textEditNode.style.transform = `scale(${scaleX}, ${scaleY})` this.textEditNode.style.transformOrigin = 'left top' - this.textEditNode.style.borderRadius = (node.style.merge('borderRadius') || 5) + 'px' - if(node.style.merge('shape') == 'roundedRectangle'){ - this.textEditNode.style.borderRadius = '50px'; + if (richTextEditFakeInPlace) { + this.textEditNode.style.borderRadius = + (node.style.merge('borderRadius') || 5) + 'px' + if (node.style.merge('shape') == 'roundedRectangle') { + this.textEditNode.style.borderRadius = (node.height || 50) + 'px' + } } - if (!node.nodeData.data.richText) { // 还不是富文本的情况 let text = node.nodeData.data.text.split(/\n/gim).join('
') diff --git a/simple-mind-map/src/plugins/TouchEvent.js b/simple-mind-map/src/plugins/TouchEvent.js index 67ff6a08..1c91f100 100644 --- a/simple-mind-map/src/plugins/TouchEvent.js +++ b/simple-mind-map/src/plugins/TouchEvent.js @@ -6,7 +6,7 @@ class TouchEvent { this.touchesNum = 0 this.singleTouchstartEvent = null this.clickNum = 0 - this.doubleTouchmoveDistance = 0 + this.touchStartScaleView = null this.bindEvent() } @@ -33,7 +33,7 @@ class TouchEvent { // 手指按下事件 onTouchstart(e) { this.touchesNum = e.touches.length - this.touchScaleViewBefore = false; + this.touchStartScaleView = null if (this.touchesNum === 1) { let touch = e.touches[0] this.singleTouchstartEvent = touch @@ -54,26 +54,46 @@ class TouchEvent { let oy = touch1.clientY - touch2.clientY let distance = Math.sqrt(Math.pow(ox, 2) + Math.pow(oy, 2)) // 以两指中心点进行缩放 - let { x: touch1ClientX, y: touch1ClientY } = this.mindMap.toPos(touch1.clientX, touch1.clientY) - let { x: touch2ClientX, y: touch2ClientY } = this.mindMap.toPos(touch2.clientX, touch2.clientY) + let { x: touch1ClientX, y: touch1ClientY } = this.mindMap.toPos( + touch1.clientX, + touch1.clientY + ) + let { x: touch2ClientX, y: touch2ClientY } = this.mindMap.toPos( + touch2.clientX, + touch2.clientY + ) let cx = (touch1ClientX + touch2ClientX) / 2 let cy = (touch1ClientY + touch2ClientY) / 2 // 手势缩放,基于最开始的位置进行缩放(基于前一个位置缩放不是线性关系); 缩放同时支持位置拖动 - var view = this.mindMap.view; - if(!this.touchScaleViewBefore){ - this.touchScaleViewBefore = {distance:distance,scale:view.scale,x:view.x,y:view.y,cx:cx,cy:cy}; - return; + const view = this.mindMap.view + if (!this.touchStartScaleView) { + this.touchStartScaleView = { + distance: distance, + scale: view.scale, + x: view.x, + y: view.y, + cx: cx, + cy: cy + } + return } - - var viewBefore = this.touchScaleViewBefore; - var scale = viewBefore.scale * (distance / viewBefore.distance); - if(Math.abs(distance - viewBefore.distance) <= 10){scale = viewBefore.scale;} - var ratio = (1 - scale / viewBefore.scale); - view.scale = scale < 0.1 ? 0.1 : scale; - view.x = viewBefore.x + (cx - viewBefore.x) * ratio + (cx - viewBefore.cx)*scale; - view.y = viewBefore.y + (cy - viewBefore.y) * ratio + (cy - viewBefore.cy)*scale; - view.transform(); - this.mindMap.emit('scale',scale); + const viewBefore = this.touchStartScaleView + const scale = viewBefore.scale * (distance / viewBefore.distance) + if (Math.abs(distance - viewBefore.distance) <= 10) { + scale = viewBefore.scale + } + const ratio = 1 - scale / viewBefore.scale + view.scale = scale < 0.1 ? 0.1 : scale + view.x = + viewBefore.x + + (cx - viewBefore.x) * ratio + + (cx - viewBefore.cx) * scale + view.y = + viewBefore.y + + (cy - viewBefore.y) * ratio + + (cy - viewBefore.cy) * scale + view.transform() + this.mindMap.emit('scale', scale) } } @@ -100,8 +120,7 @@ class TouchEvent { } this.touchesNum = 0 this.singleTouchstartEvent = null - this.doubleTouchmoveDistance = 0 - this.touchScaleViewBefore = null; + this.touchStartScaleView = null } // 发送鼠标事件