openSourceRemote/mind-map
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix：修复移动节点时新位置的提示块过大的问题

Browse Source
This commit is contained in:
wanglin2 2023-08-04 09:11:02 +08:00
parent 5d4c5703bb
commit ef9d8b0ea4
3 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
simple-mind-map/package-lock.json generated
View File

@ -1,11 +1,11 @@
{ {
"name": "simple-mind-map", "name": "simple-mind-map",
"version": "0.6.7", "version": "0.6.11-fix.1",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"version": "0.6.7", "version": "0.6.11-fix.1",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@svgdotjs/svg.js": "^3.0.16", "@svgdotjs/svg.js": "^3.0.16",

4
simple-mind-map/src/constants/defaultOptions.js
View File

@ -124,5 +124,7 @@ export const defaultOpt = {
// 自定义返回节点内容的方法 // 自定义返回节点内容的方法
customCreateNodeContent: null, customCreateNodeContent: null,
// 指定内部一些元素（节点文本编辑元素、节点备注显示元素、关联线文本编辑元素、节点图片调整按钮元素）添加到的位置，默认添加到document.body下 // 指定内部一些元素（节点文本编辑元素、节点备注显示元素、关联线文本编辑元素、节点图片调整按钮元素）添加到的位置，默认添加到document.body下
customInnerElsAppendTo: null customInnerElsAppendTo: null,
// 拖拽元素时，指示元素新位置的块的最大高度
nodeDragPlaceholderMaxSize: 20
} }

14
simple-mind-map/src/plugins/Drag.js
View File

@ -44,6 +44,7 @@ class Drag extends Base {
this.mouseMoveY = 0 this.mouseMoveY = 0
// 鼠标移动的距离距鼠标按下的位置距离多少以上才认为是拖动事件 // 鼠标移动的距离距鼠标按下的位置距离多少以上才认为是拖动事件
this.checkDragOffset = 10 this.checkDragOffset = 10
this.minOffset = 10
} }
// 绑定事件 // 绑定事件
@ -206,6 +207,7 @@ class Drag extends Base {
if (!this.drawTransform) { if (!this.drawTransform) {
return return
} }
const { nodeDragPlaceholderMaxSize } = this.mindMap.opt
let x = this.mouseMoveX let x = this.mouseMoveX
let y = this.mouseMoveY let y = this.mouseMoveY
this.overlapNode = null this.overlapNode = null
@ -247,19 +249,19 @@ class Drag extends Base {
let prevNodeRect = this.getNodeRect(prevBrother) let prevNodeRect = this.getNodeRect(prevBrother)
prevBrotherOffset = nodeRect.top - prevNodeRect.bottom prevBrotherOffset = nodeRect.top - prevNodeRect.bottom
// 间距小于10就当它不存在 // 间距小于10就当它不存在
prevBrotherOffset = prevBrotherOffset >= 10 ? prevBrotherOffset / 2 : 0 prevBrotherOffset = prevBrotherOffset >= this.minOffset ? prevBrotherOffset / 2 : 0
} else { } else {
// 没有前一个兄弟节点，那么假设和前一个节点的距离为20 // 没有前一个兄弟节点，那么假设和前一个节点的距离为20
prevBrotherOffset = 10 prevBrotherOffset = this.minOffset
} }
// 和后一个兄弟节点的距离 // 和后一个兄弟节点的距离
let nextBrotherOffset = 0 let nextBrotherOffset = 0
if (nextBrother) { if (nextBrother) {
let nextNodeRect = this.getNodeRect(nextBrother) let nextNodeRect = this.getNodeRect(nextBrother)
nextBrotherOffset = nextNodeRect.top - nodeRect.bottom nextBrotherOffset = nextNodeRect.top - nodeRect.bottom
nextBrotherOffset = nextBrotherOffset >= 10 ? nextBrotherOffset / 2 : 0 nextBrotherOffset = nextBrotherOffset >= this.minOffset ? nextBrotherOffset / 2 : 0
} else { } else {
nextBrotherOffset = 10 nextBrotherOffset = this.minOffset
} }
if (nodeRect.left <= x && nodeRect.right >= x) { if (nodeRect.left <= x && nodeRect.right >= x) {
// 检测兄弟节点位置 // 检测兄弟节点位置
@ -272,11 +274,11 @@ class Drag extends Base {
y >= nodeRect.top && y <= nodeRect.top + oneFourthHeight y >= nodeRect.top && y <= nodeRect.top + oneFourthHeight
if (checkIsPrevNode) { if (checkIsPrevNode) {
this.prevNode = node this.prevNode = node
let size = nextBrotherOffset > 0 ? nextBrotherOffset : 5 let size = nextBrotherOffset > 0 ? Math.min(nextBrotherOffset, nodeDragPlaceholderMaxSize) : 5
this.placeholder.size(node.width, size).move(nodeRect.originLeft, nodeRect.originBottom) this.placeholder.size(node.width, size).move(nodeRect.originLeft, nodeRect.originBottom)
} else if (checkIsNextNode) { } else if (checkIsNextNode) {
this.nextNode = node this.nextNode = node
let size = prevBrotherOffset > 0 ? prevBrotherOffset : 5 let size = prevBrotherOffset > 0 ? Math.min(prevBrotherOffset, nodeDragPlaceholderMaxSize) : 5
this.placeholder.size(node.width, size).move(nodeRect.originLeft, nodeRect.originTop - size) this.placeholder.size(node.width, size).move(nodeRect.originLeft, nodeRect.originTop - size)
} }
} }