修复画布距窗口左上角不为0时节点拖拽出现偏移的问题
This commit is contained in:
wanglin2
parent
566147c530
commit
47328236f7
@ -93,7 +93,7 @@ npm run build
|
|||||||
|
|
||||||
# 安装
|
# 安装
|
||||||
|
|
||||||
> 当前仓库版本：0.2.19，当前npm版本：0.2.19
|
> 当前仓库版本：0.2.20，当前npm版本：0.2.20
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm i simple-mind-map
|
npm i simple-mind-map
|
||||||
|
|||||||
@ -1 +1 @@
|
|||||||
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-2d20ec02.81d632f4.js" rel="prefetch"><link href="dist/js/chunk-2d216b67.228f2009.js" rel="prefetch"><link href="dist/js/chunk-35b0a040.cb76da7d.js" rel="prefetch"><link href="dist/css/app.2784db23.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.faba1249.css" rel="preload" as="style"><link href="dist/js/app.b7673c6b.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.013a6cea.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.faba1249.css" rel="stylesheet"><link href="dist/css/app.2784db23.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.013a6cea.js"></script><script src="dist/js/app.b7673c6b.js"></script></body></html>
|
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-2d20ec02.10aa67e3.js" rel="prefetch"><link href="dist/js/chunk-2d216b67.2d06497a.js" rel="prefetch"><link href="dist/js/chunk-5397ae43.e756f28b.js" rel="prefetch"><link href="dist/css/app.f735ed26.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.f631d5ff.css" rel="preload" as="style"><link href="dist/js/app.2fa527aa.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.68a34765.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.f631d5ff.css" rel="stylesheet"><link href="dist/css/app.f735ed26.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.68a34765.js"></script><script src="dist/js/app.2fa527aa.js"></script></body></html>
|
||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "simple-mind-map",
|
"name": "simple-mind-map",
|
||||||
"version": "0.2.19",
|
"version": "0.2.20",
|
||||||
"description": "一个简单的web在线思维导图",
|
"description": "一个简单的web在线思维导图",
|
||||||
"authors": [
|
"authors": [
|
||||||
{
|
{
|
||||||
|
|||||||
@ -76,12 +76,11 @@ class Drag extends Base {
|
|||||||
// 计算鼠标按下的位置距离节点左上角的距离
|
// 计算鼠标按下的位置距离节点左上角的距离
|
||||||
this.drawTransform = this.mindMap.draw.transform()
|
this.drawTransform = this.mindMap.draw.transform()
|
||||||
let { scaleX, scaleY, translateX, translateY } = this.drawTransform
|
let { scaleX, scaleY, translateX, translateY } = this.drawTransform
|
||||||
this.offsetX = e.clientX - (node.left * scaleX + translateX)
|
let { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
|
||||||
this.offsetY = e.clientY - (node.top * scaleY + translateY)
|
this.offsetX = x - (node.left * scaleX + translateX)
|
||||||
//
|
this.offsetY = y - (node.top * scaleY + translateY)
|
||||||
this.node = node
|
this.node = node
|
||||||
this.isMousedown = true
|
this.isMousedown = true
|
||||||
let { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
|
|
||||||
this.mouseDownX = x
|
this.mouseDownX = x
|
||||||
this.mouseDownY = y
|
this.mouseDownY = y
|
||||||
})
|
})
|
||||||
@ -275,7 +274,7 @@ class Drag extends Base {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 检测兄弟节点位置
|
// 检测兄弟节点位置
|
||||||
if (!this.prevNode && !this.nextNode && this.node.isBrother(node)) {
|
if (!this.prevNode && !this.nextNode && !node.isRoot) {// && this.node.isBrother(node)
|
||||||
if (left <= checkRight && right >= this.cloneNodeLeft) {
|
if (left <= checkRight && right >= this.cloneNodeLeft) {
|
||||||
if (this.cloneNodeTop > bottom && this.cloneNodeTop <= bottom + 10) {
|
if (this.cloneNodeTop > bottom && this.cloneNodeTop <= bottom + 10) {
|
||||||
this.prevNode = node
|
this.prevNode = node
|
||||||
|
|||||||
@ -549,32 +549,30 @@ class Render {
|
|||||||
if (node.isRoot) {
|
if (node.isRoot) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
let parent = node.parent
|
// 移动节点
|
||||||
let childList = parent.children
|
let nodeParent = node.parent
|
||||||
// 要移动节点的索引
|
let nodeBorthers = nodeParent.children
|
||||||
let index = childList.findIndex(item => {
|
let nodeIndex = nodeBorthers.findIndex(item => {
|
||||||
return item === node
|
return item === node
|
||||||
})
|
})
|
||||||
if (index === -1) {
|
if (nodeIndex === -1) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
// 目标节点的索引
|
nodeBorthers.splice(nodeIndex, 1)
|
||||||
let existIndex = childList.findIndex(item => {
|
nodeParent.nodeData.children.splice(nodeIndex, 1)
|
||||||
|
|
||||||
|
|
||||||
|
// 目标节点
|
||||||
|
let existParent = exist.parent
|
||||||
|
let existBorthers = existParent.children
|
||||||
|
let existIndex = existBorthers.findIndex(item => {
|
||||||
return item === exist
|
return item === exist
|
||||||
})
|
})
|
||||||
if (existIndex === -1) {
|
if (existIndex === -1) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
// 当前节点在目标节点前面
|
existBorthers.splice(existIndex, 0, node)
|
||||||
if (index < existIndex) {
|
existParent.nodeData.children.splice(existIndex, 0, node.nodeData)
|
||||||
existIndex = existIndex - 1
|
|
||||||
}
|
|
||||||
// 节点实例
|
|
||||||
childList.splice(index, 1)
|
|
||||||
childList.splice(existIndex, 0, node)
|
|
||||||
// 节点数据
|
|
||||||
parent.nodeData.children.splice(index, 1)
|
|
||||||
parent.nodeData.children.splice(existIndex, 0, node.nodeData)
|
|
||||||
this.mindMap.render()
|
this.mindMap.render()
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -588,34 +586,31 @@ class Render {
|
|||||||
if (node.isRoot) {
|
if (node.isRoot) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
let parent = node.parent
|
// 移动节点
|
||||||
let childList = parent.children
|
let nodeParent = node.parent
|
||||||
// 要移动节点的索引
|
let nodeBorthers = nodeParent.children
|
||||||
let index = childList.findIndex(item => {
|
let nodeIndex = nodeBorthers.findIndex(item => {
|
||||||
return item === node
|
return item === node
|
||||||
})
|
})
|
||||||
if (index === -1) {
|
if (nodeIndex === -1) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
// 目标节点的索引
|
nodeBorthers.splice(nodeIndex, 1)
|
||||||
let existIndex = childList.findIndex(item => {
|
nodeParent.nodeData.children.splice(nodeIndex, 1)
|
||||||
|
|
||||||
|
|
||||||
|
// 目标节点
|
||||||
|
let existParent = exist.parent
|
||||||
|
let existBorthers = existParent.children
|
||||||
|
let existIndex = existBorthers.findIndex(item => {
|
||||||
return item === exist
|
return item === exist
|
||||||
})
|
})
|
||||||
if (existIndex === -1) {
|
if (existIndex === -1) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
// 当前节点在目标节点前面
|
existIndex++
|
||||||
if (index < existIndex) {
|
existBorthers.splice(existIndex, 0, node)
|
||||||
// do nothing
|
existParent.nodeData.children.splice(existIndex, 0, node.nodeData)
|
||||||
} else {
|
|
||||||
existIndex = existIndex + 1
|
|
||||||
}
|
|
||||||
// 节点实例
|
|
||||||
childList.splice(index, 1)
|
|
||||||
childList.splice(existIndex, 0, node)
|
|
||||||
// 节点数据
|
|
||||||
parent.nodeData.children.splice(index, 1)
|
|
||||||
parent.nodeData.children.splice(existIndex, 0, node.nodeData)
|
|
||||||
this.mindMap.render()
|
this.mindMap.render()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -328,6 +328,11 @@ export default {
|
|||||||
top: 0px;
|
top: 0px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
|
// left: 100px;
|
||||||
|
// top: 100px;
|
||||||
|
// right: 100px;
|
||||||
|
// bottom: 100px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user