coosld/mind-map
1
0
Fork 0
mirror of https://github.com/wanglin2/mind-map.git synced 2026-02-21 10:27:44 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix:1.Mac系统触控板缩放方向相反的问题;2.设备像素比不为1时导出图片中富文本节点尺寸变大的问题.Feater:节点抛出鼠标移入和移出事件

Browse Source
This commit is contained in:
wanglin2 2023-02-26 10:07:03 +08:00
parent f66297ff99
commit 0ea618af39
14 changed files with 86 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
simple-mind-map/example/exampleData.js
View File

@ -900,6 +900,17 @@ const data5 = {
}
}
// 富文本数据v0.4.0+，需要使用RichText插件才支持富文本编辑
const richTextData = {
"root": {
"data": {
"text": "<a href='http://lxqnsys.com/' target='_blank'>理想去年实验室</a>",
"richText": true
},
"children": []
}
}
const rootData = {
"root": {
"data": {

6
simple-mind-map/example/exportFullData.json
View File

@ -31,6 +31,12 @@
"isActive": false
},
"children": []
}, {
"data": {
"text": "<a href='http://lxqnsys.com/' target='_blank'>理想去年实验室</a>",
"richText": true
},
"children": []
}]
}]
},

2
simple-mind-map/package.json
View File

@ -1,6 +1,6 @@
{
"name": "simple-mind-map",
"version": "0.4.0",
"version": "0.4.1",
"description": "一个简单的web在线思维导图",
"authors": [
{

21
simple-mind-map/src/Event.js
View File

@ -43,12 +43,7 @@ class Event extends EventEmitter {
this.mindMap.svg.on('mousedown', this.onSvgMousedown)
window.addEventListener('mousemove', this.onMousemove)
window.addEventListener('mouseup', this.onMouseup)
// 兼容火狐浏览器
if (window.navigator.userAgent.toLowerCase().indexOf('firefox') != -1) {
this.mindMap.el.addEventListener('DOMMouseScroll', this.onMousewheel)
} else {
this.mindMap.el.addEventListener('mousewheel', this.onMousewheel)
}
this.mindMap.el.addEventListener('wheel', this.onMousewheel)
this.mindMap.svg.on('contextmenu', this.onContextmenu)
window.addEventListener('keyup', this.onKeyup)
}
@ -59,7 +54,7 @@ class Event extends EventEmitter {
this.mindMap.el.removeEventListener('mousedown', this.onMousedown)
window.removeEventListener('mousemove', this.onMousemove)
window.removeEventListener('mouseup', this.onMouseup)
this.mindMap.el.removeEventListener('mousewheel', this.onMousewheel)
this.mindMap.el.removeEventListener('wheel', this.onMousewheel)
this.mindMap.svg.off('contextmenu', this.onContextmenu)
window.removeEventListener('keyup', this.onKeyup)
}
@ -110,10 +105,16 @@ class Event extends EventEmitter {
e.stopPropagation()
e.preventDefault()
let dir
if ((e.wheelDeltaY || e.detail) > 0) {
dir = 'up'
// 解决mac触控板双指缩放方向相反的问题
if (e.ctrlKey) {
if (e.deltaY > 0) dir = 'up'
if (e.deltaY < 0) dir = 'down'
} else {
dir = 'down'
if ((e.wheelDeltaY || e.detail) > 0) {
dir = 'up'
} else {
dir = 'down'
}
}
this.emit('mousewheel', e, dir, this)
}

10
simple-mind-map/src/Node.js
View File

@ -191,7 +191,9 @@ class Node {
'dblclick',
'contextmenu',
'mousedown',
'mouseup'
'mouseup',
'mouseenter',
'mouseleave'
])
}
}
@ -677,6 +679,12 @@ class Node {
e.stopPropagation()
this.mindMap.emit('node_mouseup', this, e)
})
this.group.on('mouseenter', e => {
this.mindMap.emit('node_mouseenter', this, e)
})
this.group.on('mouseleave', e => {
this.mindMap.emit('node_mouseleave', this, e)
})
// 双击事件
this.group.on('dblclick', e => {
if (this.mindMap.opt.readonly) {

5
simple-mind-map/src/RichText.js
View File

@ -372,10 +372,13 @@ class RichText {
let canvas = await html2canvas(clone, {
backgroundColor: null
})
// 优先使用原始宽高，因为当设备的window.devicePixelRatio不为1时，html2canvas输出的图片会更大
let imgNodeWidth = parent.attr('data-width') || canvas.width
let imgNodeHeight = parent.attr('data-height') || canvas.height
this.mindMap.el.removeChild(div)
let imgNode = new SvgImage()
.load(canvas.toDataURL())
.size(canvas.width, canvas.height)
.size(imgNodeWidth, imgNodeHeight)
.x((parent ? parent.attr('data-offsetx') : 0) || 0)
item.replace(imgNode)
if (index <= len - 1) {

8
web/src/pages/Doc/en/changelog/index.md
View File

@ -1,12 +1,18 @@
# Changelog
## 0.4.1
New: Add and throw node mouseenter and mouseleave events.
Fix: 1.Mac system touchpad scaling is the opposite problem; 2.When the device window.devicePixelRatio is not 1, the size of the rich text node in the exported image will become larger when there are rich text nodes.
## 0.4.0
New: The node supports rich text editing.
## 0.3.4
New：Automatic line wrapping function is added to node text.
New: Automatic line wrapping function is added to node text.
Fix: 1.Fix the problem of deletion exceptions if there are root nodes in the batch deleted nodes. 2.Fix the problem that high node height will overlap with other nodes in the case of bottom edge style.

5
web/src/pages/Doc/en/changelog/index.vue
View File

@ -1,10 +1,13 @@
<template>
<div>
<h1>Changelog</h1>
<h2>0.4.1</h2>
<p>New: Add and throw node mouseenter and mouseleave events.</p>
<p>Fix: 1.Mac system touchpad scaling is the opposite problem; 2.When the device window.devicePixelRatio is not 1, the size of the rich text node in the exported image will become larger when there are rich text nodes.</p>
<h2>0.4.0</h2>
<p>New: The node supports rich text editing.</p>
<h2>0.3.4</h2>
<p>New：Automatic line wrapping function is added to node text.</p>
<p>New: Automatic line wrapping function is added to node text.</p>
<p>Fix: 1.Fix the problem of deletion exceptions if there are root nodes in the batch deleted nodes. 2.Fix the problem that high node height will overlap with other nodes in the case of bottom edge style.</p>
<h2>0.3.3</h2>
<p>Fix: The root node text cannot wrap.</p>

2
web/src/pages/Doc/en/constructor/index.md
View File

@ -178,6 +178,8 @@ Listen to an event. Event list:
| node_mouseup | Node mouseup event | this (node instance), e (event object) |
| node_dblclick | Node double-click event | this (node instance), e (event object) |
| node_contextmenu | Node right-click menu event | e (event object), this (node instance) |
| node_mouseenter（v0.4.1+） | Node mouseenter event | this (node instance), e (event object) |
| node_mouseleave（v0.4.1+） | Node mouseleave event | this (node instance), e (event object) |
| before_node_active | Event before node activation | this (node instance), activeNodeList (current list of active nodes) |
| node_active | Node activation event | this (node instance), activeNodeList (current list of active nodes) |
| expand_btn_click | Node expand or collapse event | this (node instance) |

10
web/src/pages/Doc/en/constructor/index.vue
View File

@ -367,6 +367,16 @@ poor performance and should be used sparingly.</p>
<td>e (event object), this (node instance)</td>
</tr>
<tr>
<td>node_mouseenter（v0.4.1+）</td>
<td>Node mouseenter event</td>
<td>this (node instance), e (event object)</td>
</tr>
<tr>
<td>node_mouseleave（v0.4.1+）</td>
<td>Node mouseleave event</td>
<td>this (node instance), e (event object)</td>
</tr>
<tr>
<td>before_node_active</td>
<td>Event before node activation</td>
<td>this (node instance), activeNodeList (current list of active nodes)</td>

6
web/src/pages/Doc/zh/changelog/index.md
View File

@ -1,5 +1,11 @@
# Changelog
## 0.4.1
新增：新增抛出节点鼠标移入和移除事件。
修复：1.Mac系统触控板缩放相反的问题；2.设备window.devicePixelRatio不为1时，当存在富文本节点时导出的图片中富文本节点尺寸会变大的问题。
## 0.4.0
新增：节点支持富文本编辑。

3
web/src/pages/Doc/zh/changelog/index.vue
View File

@ -1,6 +1,9 @@
<template>
<div>
<h1>Changelog</h1>
<h2>0.4.1</h2>
<p>新增：新增抛出节点鼠标移入和移除事件。</p>
<p>修复：1.Mac系统触控板缩放相反的问题；2.设备window.devicePixelRatio不为1时，当存在富文本节点时导出的图片中富文本节点尺寸会变大的问题。</p>
<h2>0.4.0</h2>
<p>新增：节点支持富文本编辑。</p>
<h2>0.3.4</h2>

2
web/src/pages/Doc/zh/constructor/index.md
View File

@ -175,6 +175,8 @@ mindMap.setTheme('主题名称')
| node_mouseup | 节点的鼠标松开事件 | this（节点实例）、e（事件对象） |
| node_dblclick | 节点的双击事件 | this（节点实例）、e（事件对象） |
| node_contextmenu | 节点的右键菜单事件 | e（事件对象）、this（节点实例） |
| node_mouseenter（v0.4.1+） | 节点的鼠标移入事件 | this（节点实例）、e（事件对象） |
| node_mouseleave（v0.4.1+） | 节点的鼠标移出事件 | this（节点实例）、e（事件对象） |
| before_node_active | 节点激活前事件 | this（节点实例）、activeNodeList（当前激活的所有节点列表） |
| node_active | 节点激活事件 | this（节点实例）、activeNodeList（当前激活的所有节点列表） |
| expand_btn_click | 节点展开或收缩事件 | this（节点实例） |

10
web/src/pages/Doc/zh/constructor/index.vue
View File

@ -360,6 +360,16 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
<td>e（事件对象）、this（节点实例）</td>
</tr>
<tr>
<td>node_mouseenter（v0.4.1+）</td>
<td>节点的鼠标移入事件</td>
<td>this（节点实例）、e（事件对象）</td>
</tr>
<tr>
<td>node_mouseleave（v0.4.1+）</td>
<td>节点的鼠标移出事件</td>
<td>this（节点实例）、e（事件对象）</td>
</tr>
<tr>
<td>before_node_active</td>
<td>节点激活前事件</td>
<td>this（节点实例）、activeNodeList（当前激活的所有节点列表）</td>