Compare commits

..

10 Commits
0.6.0 ... 0.6.2

Author SHA1 Message Date
wanglin2
eec736be4d README: update 2023-06-20 16:43:10 +08:00
wanglin2
ffdf53941a Merge branch 'feature' into main 2023-06-20 16:39:55 +08:00
wanglin2
5676e952f3 打包0.6.2 2023-06-20 16:38:29 +08:00
wanglin2
e049ee6260 Doc: update 2023-06-20 16:35:36 +08:00
wanglin2
f1355c9d2a Fix:修复切换主题时节点样式没有随之切换的问题 2023-06-20 16:29:54 +08:00
wanglin2
d696e0fdc1 合并 2023-06-19 22:37:13 +08:00
wanglin2
c8d2f284fd 打包0.6.1 2023-06-19 22:34:19 +08:00
wanglin2
aa8ecd4f60 合并 2023-06-19 22:32:37 +08:00
wanglin2
2323fe9bc0 Fix:修复将鼠标滚动改为移动画布行为后,使用触控板操作时移动灵敏度过高的问题 2023-06-19 22:31:12 +08:00
wanglin2
b9c340afbf Doc:更新文档 2023-06-19 09:28:36 +08:00
27 changed files with 177 additions and 39 deletions

View File

@@ -96,6 +96,8 @@ MIT
> 厚椰乳一盒 + 纯牛奶半盒 + 冰块 + 咖啡液 = 生椰拿铁 yyds
> 转账请备注哦~你的头像和名称会出现在[文档页面](https://wanglin2.github.io/mind-map/#/doc/zh/introduction/%E8%AF%B7%E4%BD%9C%E8%80%85%E5%96%9D%E6%9D%AF%E5%92%96%E5%95%A1)
<p>
<img src="./web/src/assets/img/alipay.jpg" style="width: 300px" />
<img src="./web/src/assets/img/wechat.jpg" style="width: 300px" />

File diff suppressed because one or more lines are too long

View File

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

View File

@@ -259,4 +259,24 @@ export const layoutValueList = [
CONSTANTS.LAYOUT.TIMELINE,
CONSTANTS.LAYOUT.TIMELINE2,
CONSTANTS.LAYOUT.FISHBONE
]
// 节点数据中非样式的字段
export const nodeDataNoStylePropList = [
'text',
'image',
'imageTitle',
'imageSize',
'icon',
'tag',
'hyperlink',
'hyperlinkTitle',
'note',
'expand',
'isActive',
'generalization',
'richText',
'resetRichText',
'uid',
'activeStyle'
]

View File

@@ -140,7 +140,13 @@ class Event extends EventEmitter {
if ((e.wheelDeltaX || e.detail) > 0) dir = CONSTANTS.DIR.LEFT
if ((e.wheelDeltaX || e.detail) < 0) dir = CONSTANTS.DIR.RIGHT
}
this.emit('mousewheel', e, dir, this)
// 判断是否是触控板
let isTouchPad = false
// mac、windows
if (e.wheelDeltaY === e.deltaY * -3 || Math.abs(e.wheelDeltaY) <= 10) {
isTouchPad = true
}
this.emit('mousewheel', e, dir, this, isTouchPad)
}
// 鼠标右键菜单事件

View File

@@ -798,6 +798,11 @@ class Node {
getData(key) {
return key ? this.nodeData.data[key] || '' : this.nodeData.data
}
// 是否存在自定义样式
hasCustomStyle() {
return this.style.hasCustomStyle()
}
}
export default Node

View File

@@ -1,4 +1,4 @@
import { tagColorList } from '../../../constants/constant'
import { tagColorList, nodeDataNoStylePropList } from '../../../constants/constant'
const rootProp = ['paddingX', 'paddingY']
const backgroundStyleProps = ['backgroundColor', 'backgroundImage', 'backgroundRepeat', 'backgroundPosition', 'backgroundSize']
@@ -209,6 +209,17 @@ class Style {
node2.fill({ color: color })
fillNode.fill({ color: fill })
}
// 是否设置了自定义的样式
hasCustomStyle() {
let res = false
Object.keys(this.ctx.nodeData.data).forEach((item) => {
if (!nodeDataNoStylePropList.includes(item)) {
res = true
}
})
return res
}
}
Style.cacheStyle = null

View File

@@ -64,8 +64,18 @@ function createIconNode() {
function createRichTextNode() {
let g = new G()
// 重新设置富文本节点内容
if (this.nodeData.data.resetRichText || [CONSTANTS.CHANGE_THEME].includes(this.mindMap.renderer.renderSource)) {
let recoverText = false
if (this.nodeData.data.resetRichText) {
delete this.nodeData.data.resetRichText
recoverText = true
}
if ([CONSTANTS.CHANGE_THEME].includes(this.mindMap.renderer.renderSource)) {
// 如果自定义过样式则不允许覆盖
if (!this.hasCustomStyle()) {
recoverText = true
}
}
if (recoverText) {
let text = getTextFromHtml(this.nodeData.data.text)
this.nodeData.data.text = `<p><span style="${this.style.createStyleText()}">${text}</span></p>`
}

View File

@@ -59,7 +59,7 @@ class View {
this.firstDrag = true
})
// 放大缩小视图
this.mindMap.event.on('mousewheel', (e, dir) => {
this.mindMap.event.on('mousewheel', (e, dir, event, isTouchPad) => {
if (
this.mindMap.opt.customHandleMousewheel &&
typeof this.mindMap.opt.customHandleMousewheel === 'function'
@@ -82,22 +82,26 @@ class View {
break
}
} else {
let step = this.mindMap.opt.mousewheelMoveStep
if (isTouchPad) {
step = 5
}
switch (dir) {
// 上移
case CONSTANTS.DIR.DOWN:
this.translateY(-this.mindMap.opt.mousewheelMoveStep)
this.translateY(-step)
break
// 下移
case CONSTANTS.DIR.UP:
this.translateY(this.mindMap.opt.mousewheelMoveStep)
this.translateY(step)
break
// 右移
case CONSTANTS.DIR.LEFT:
this.translateX(-this.mindMap.opt.mousewheelMoveStep)
this.translateX(-step)
break
// 左移
case CONSTANTS.DIR.RIGHT:
this.translateX(this.mindMap.opt.mousewheelMoveStep)
this.translateX(step)
break
}
}

View File

@@ -219,7 +219,7 @@ class RichText {
underline: node.style.merge('textDecoration') === 'underline',
strike: node.style.merge('textDecoration') === 'line-through'
}
this.formatAllText(style)
this.pureFormatAllText(style)
}
// 获取当前正在编辑的内容
@@ -325,7 +325,7 @@ class RichText {
// 中文输入结束
onCompositionEnd() {
if (!this.showTextEdit) {
if (!this.showTextEdit || !this.lostStyle) {
return
}
this.isCompositing = false
@@ -372,6 +372,11 @@ class RichText {
// 格式化所有文本
formatAllText(config = {}) {
this.syncFormatToNodeConfig(config)
this.pureFormatAllText(config)
}
// 纯粹的格式化所有文本
pureFormatAllText(config = {}) {
this.quill.formatText(0, this.quill.getLength(), config)
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

View File

@@ -1,8 +1,16 @@
# Changelog
## 0.6.2
Fix: 1.Fixed the problem that the new node does not change with the theme in rich Text mode.
## 0.6.1
Fix: 1.Fixed the issue of high movement sensitivity when using the touchpad when changing mouse scrolling to moving the canvas behavior.
## 0.6.0-fix.1
1.Fixed the issue of destroying mind maps without setting a background style and reporting errors.
Fix: 1.Fixed the issue of destroying mind maps without setting a background style and reporting errors.
## 0.6.0

View File

@@ -1,8 +1,12 @@
<template>
<div>
<h1>Changelog</h1>
<h2>0.6.2</h2>
<p>Fix: 1.Fixed the problem that the new node does not change with the theme in rich Text mode.</p>
<h2>0.6.1</h2>
<p>Fix: 1.Fixed the issue of high movement sensitivity when using the touchpad when changing mouse scrolling to moving the canvas behavior.</p>
<h2>0.6.0-fix.1</h2>
<p>1.Fixed the issue of destroying mind maps without setting a background style and reporting errors.</p>
<p>Fix: 1.Fixed the issue of destroying mind maps without setting a background style and reporting errors.</p>
<h2>0.6.0</h2>
<p>Breaking change: Adjusted the directory structure of the simple-mind-map source code, Main impact: 1. The introduction path of the plugin needs to be modified. The constant file path needs to be modified.</p>
<p>New: 1.Supports one click zoom to fit the canvas function. 2.Press and hold the Ctrl key to activate the multi selection function on demand through configuration. 3.Support setting to left click to select multiple nodes and right click to drag the canvas. 4. Support controlling whether nodes are allowed to be edited. 5.Add a method for destroying mind maps. 6.Added touch event support plugin.</p>

View File

@@ -214,7 +214,7 @@ Listen to an event. Event list:
| mousemove | el element mouse move event | e (event object), this (Event event class instance) |
| drag | If it is a drag event while holding down the left button | e (event object), this (Event event class instance) |
| mouseup | el element mouse up event | e (event object), this (Event event class instance) |
| mousewheel | Mouse scroll event | e (event object), dir (up or down scroll), this (Event event class instance) |
| mousewheel | Mouse scroll event | e (event object), dir (up or down scroll), this (Event event class instance) 、isTouchPadv0.6.1+, Is it an event triggered by the touchpad |
| contextmenu | svg canvas right mouse button menu event | e (event object) |
| node_click | Node click event | this (node instance), e (event object) |
| node_mousedown | Node mouse down event | this (node instance), e (event object) |

View File

@@ -549,7 +549,7 @@ poor performance and should be used sparingly.</p>
<tr>
<td>mousewheel</td>
<td>Mouse scroll event</td>
<td>e (event object), dir (up or down scroll), this (Event event class instance)</td>
<td>e (event object), dir (up or down scroll), this (Event event class instance) isTouchPadv0.6.1+, Is it an event triggered by the touchpad</td>
</tr>
<tr>
<td>contextmenu</td>

View File

@@ -125,4 +125,15 @@ Open source is not easy. If this project is helpful to you, you can invite the a
<img src="../../../../assets/img/alipay.jpg" style="width: 300px" />
<img src="../../../../assets/img/wechat.jpg" style="width: 300px" />
<img src="../../../../assets/img/wechat.jpg" style="width: 300px" />
<div style="display: flex;">
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
<img src="../../../../assets/avatar/Think.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
<p>Think</p>
</div>
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
<img src="../../../../assets/avatar/志斌.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
<p>志斌</p>
</div>
</div>

View File

@@ -86,6 +86,16 @@ full screen, support mini map</li>
</blockquote>
<img src="../../../../assets/img/alipay.jpg" style="width: 300px" />
<img src="../../../../assets/img/wechat.jpg" style="width: 300px" />
<div style="display: flex;">
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
<img src="../../../../assets/avatar/Think.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
<p>Think</p>
</div>
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
<img src="../../../../assets/avatar/志斌.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
<p>志斌</p>
</div>
</div>
</div>
</template>

View File

@@ -56,6 +56,12 @@ Whether the node is currently being dragged
## Methods
### hasCustomStyle()
> v0.6.2+
Gets whether a custom style has been set.
### getSize()
Update the width and height of the node by recreating the node content, and return a Boolean value indicating whether the width and height have changed

View File

@@ -31,6 +31,11 @@
</blockquote>
<p>Whether the node is currently being dragged</p>
<h2>Methods</h2>
<h3>hasCustomStyle()</h3>
<blockquote>
<p>v0.6.2+</p>
</blockquote>
<p>Gets whether a custom style has been set.</p>
<h3>getSize()</h3>
<p>Update the width and height of the node by recreating the node content, and return a Boolean value indicating whether the width and height have changed</p>
<h3>render()</h3>

View File

@@ -1,8 +1,16 @@
# Changelog
## 0.6.2
修复1.修复富文本模式下,新建节点不随主题变化而变化的问题。
## 0.6.1
修复1.修复将鼠标滚动改为移动画布行为后,使用触控板操作时移动灵敏度过高的问题。
## 0.6.0-fix.1
1.修复没有设置过背景样式的情况下销毁思维导图报错的问题。
修复:1.修复没有设置过背景样式的情况下销毁思维导图报错的问题。
## 0.6.0

View File

@@ -1,8 +1,12 @@
<template>
<div>
<h1>Changelog</h1>
<h2>0.6.2</h2>
<p>修复1.修复富文本模式下新建节点不随主题变化而变化的问题</p>
<h2>0.6.1</h2>
<p>修复1.修复将鼠标滚动改为移动画布行为后使用触控板操作时移动灵敏度过高的问题</p>
<h2>0.6.0-fix.1</h2>
<p>1.修复没有设置过背景样式的情况下销毁思维导图报错的问题</p>
<p>修复1.修复没有设置过背景样式的情况下销毁思维导图报错的问题</p>
<h2>0.6.0</h2>
<p>破坏性更新调整了simple-mind-map源码的目录结构主要影响1.插件的引入路径需要修改2.constant文件路径需要修改</p>
<p>新增1.支持一键缩放至适应画布功能 2.按住Ctrl键多选功能可通过配置按需开启 3.支持设置为左键多选节点右键拖动画布 4.支持控制节点是否允许编辑 5.新增销毁思维导图的方法 6.新增触摸事件支持插件</p>

View File

@@ -210,7 +210,7 @@ mindMap.setTheme('主题名称')
| mousemove | el元素的鼠标移动事件 | e事件对象、thisEvent事件类实例 |
| drag | 如果是按住左键拖动的话会触发拖动事件 | e事件对象、thisEvent事件类实例 |
| mouseup | el元素的鼠标松开事件 | e事件对象、thisEvent事件类实例 |
| mousewheel | 鼠标滚动事件 | e事件对象、dir向上up还是向下down滚动、thisEvent事件类实例 |
| mousewheel | 鼠标滚动事件 | e事件对象、dir向上up还是向下down滚动、thisEvent事件类实例、isTouchPadv0.6.1+,是否是触控板触发的事件) |
| contextmenu | svg画布的鼠标右键菜单事件 | e事件对象 |
| node_click | 节点的单击事件 | this节点实例、e事件对象 |
| node_mousedown | 节点的鼠标按下事件 | this节点实例、e事件对象 |

View File

@@ -547,7 +547,7 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
<tr>
<td>mousewheel</td>
<td>鼠标滚动事件</td>
<td>e事件对象dir向上up还是向下down滚动thisEvent事件类实例</td>
<td>e事件对象dir向上up还是向下down滚动thisEvent事件类实例isTouchPadv0.6.1+是否是触控板触发的事件</td>
</tr>
<tr>
<td>contextmenu</td>

View File

@@ -121,4 +121,8 @@
<img src="../../../../assets/avatar/Think.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
<p>Think</p>
</div>
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
<img src="../../../../assets/avatar/志斌.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
<p>志斌</p>
</div>
</div>

View File

@@ -8,19 +8,19 @@
</blockquote>
<h2>特性</h2>
<ul>
<li><input type="checkbox" id="checkbox0" checked="true" /><label for="checkbox0">插件化架构除核心功能外其他功能作为插件提供按需使用减小整体体积</label></li>
<li><input type="checkbox" id="checkbox1" checked="true" /><label for="checkbox1">支持逻辑结构图思维导图组织结构图目录组织图时间轴鱼骨图六种结构</label></li>
<li><input type="checkbox" id="checkbox2" checked="true" /><label for="checkbox2">内置多种主题允许高度自定义样式支持注册新主题</label></li>
<li><input type="checkbox" id="checkbox3" checked="true" /><label for="checkbox3">支持快捷键</label></li>
<li><input type="checkbox" id="checkbox4" checked="true" /><label for="checkbox4">节点内容支持图片图标超链接备注标签概要</label></li>
<li><input type="checkbox" id="checkbox5" checked="true" /><label for="checkbox5">支持前进后退</label></li>
<li><input type="checkbox" id="checkbox6" checked="true" /><label for="checkbox6">支持拖动缩放</label></li>
<li><input type="checkbox" id="checkbox7" checked="true" /><label for="checkbox7">支持右键和Ctrl+左键两种多选方式</label></li>
<li><input type="checkbox" id="checkbox8" checked="true" /><label for="checkbox8">支持节点自由拖拽拖拽调整</label></li>
<li><input type="checkbox" id="checkbox9" checked="true" /><label for="checkbox9">支持多种节点形状</label></li>
<li><input type="checkbox" id="checkbox10" checked="true" /><label for="checkbox10">支持导出为</label><code>json</code><code>png</code><code>svg</code><code>pdf</code><code>markdown</code>支持从<code>json</code><code>xmind</code><code>markdown</code>导入</li>
<li><input type="checkbox" id="checkbox11" checked="true" /><label for="checkbox11">支持小地图支持水印</label></li>
<li><input type="checkbox" id="checkbox12" checked="true" /><label for="checkbox12">支持关联线</label></li>
<li><input type="checkbox" id="checkbox36" checked="true" /><label for="checkbox36">插件化架构除核心功能外其他功能作为插件提供按需使用减小整体体积</label></li>
<li><input type="checkbox" id="checkbox37" checked="true" /><label for="checkbox37">支持逻辑结构图思维导图组织结构图目录组织图时间轴鱼骨图六种结构</label></li>
<li><input type="checkbox" id="checkbox38" checked="true" /><label for="checkbox38">内置多种主题允许高度自定义样式支持注册新主题</label></li>
<li><input type="checkbox" id="checkbox39" checked="true" /><label for="checkbox39">支持快捷键</label></li>
<li><input type="checkbox" id="checkbox40" checked="true" /><label for="checkbox40">节点内容支持图片图标超链接备注标签概要</label></li>
<li><input type="checkbox" id="checkbox41" checked="true" /><label for="checkbox41">支持前进后退</label></li>
<li><input type="checkbox" id="checkbox42" checked="true" /><label for="checkbox42">支持拖动缩放</label></li>
<li><input type="checkbox" id="checkbox43" checked="true" /><label for="checkbox43">支持右键和Ctrl+左键两种多选方式</label></li>
<li><input type="checkbox" id="checkbox44" checked="true" /><label for="checkbox44">支持节点自由拖拽拖拽调整</label></li>
<li><input type="checkbox" id="checkbox45" checked="true" /><label for="checkbox45">支持多种节点形状</label></li>
<li><input type="checkbox" id="checkbox46" checked="true" /><label for="checkbox46">支持导出为</label><code>json</code><code>png</code><code>svg</code><code>pdf</code><code>markdown</code>支持从<code>json</code><code>xmind</code><code>markdown</code>导入</li>
<li><input type="checkbox" id="checkbox47" checked="true" /><label for="checkbox47">支持小地图支持水印</label></li>
<li><input type="checkbox" id="checkbox48" checked="true" /><label for="checkbox48">支持关联线</label></li>
</ul>
<h2>仓库目录介绍</h2>
<p>1.<code>simple-mind-map</code></p>
@@ -28,11 +28,11 @@
<p>2.<code>web</code></p>
<p>使用<code>simple-mind-map</code>基于<code>vue2.x</code><code>ElementUI</code>搭建的在线思维导图特性</p>
<ul>
<li><input type="checkbox" id="checkbox13" checked="true" /><label for="checkbox13">工具栏支持插入节点删除节点编辑节点图片图标超链接备注标签概要</label></li>
<li><input type="checkbox" id="checkbox14" checked="true" /><label for="checkbox14">侧边栏基础样式设置面板节点样式设置面板大纲面板主题选择面板结构选择面板</label></li>
<li><input type="checkbox" id="checkbox15" checked="true" /><label for="checkbox15">导入导出功能数据默认保存在浏览器本地存储也支持直接创建打开编辑电脑本地文件</label></li>
<li><input type="checkbox" id="checkbox16" checked="true" /><label for="checkbox16">右键菜单支持展开收起整理布局等操作</label></li>
<li><input type="checkbox" id="checkbox17" checked="true" /><label for="checkbox17">底部栏支持节点数量字数统计支持切换编辑和只读模式支持放大缩小支持全屏切换支持小地图</label></li>
<li><input type="checkbox" id="checkbox49" checked="true" /><label for="checkbox49">工具栏支持插入节点删除节点编辑节点图片图标超链接备注标签概要</label></li>
<li><input type="checkbox" id="checkbox50" checked="true" /><label for="checkbox50">侧边栏基础样式设置面板节点样式设置面板大纲面板主题选择面板结构选择面板</label></li>
<li><input type="checkbox" id="checkbox51" checked="true" /><label for="checkbox51">导入导出功能数据默认保存在浏览器本地存储也支持直接创建打开编辑电脑本地文件</label></li>
<li><input type="checkbox" id="checkbox52" checked="true" /><label for="checkbox52">右键菜单支持展开收起整理布局等操作</label></li>
<li><input type="checkbox" id="checkbox53" checked="true" /><label for="checkbox53">底部栏支持节点数量字数统计支持切换编辑和只读模式支持放大缩小支持全屏切换支持小地图</label></li>
</ul>
<p>提供文档页面服务</p>
<p>3.<code>dist</code></p>
@@ -80,6 +80,10 @@
<img src="../../../../assets/avatar/Think.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
<p>Think</p>
</div>
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
<img src="../../../../assets/avatar/志斌.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
<p>志斌</p>
</div>
</div>
</div>
</template>

View File

@@ -56,6 +56,12 @@
## 方法
### hasCustomStyle()
> v0.6.2+
获取是否设置了自定义样式。
### getSize()
通过重新创建节点内容更新节点的宽高,返回一个布尔值,代表是否宽高发生了变化

View File

@@ -31,6 +31,11 @@
</blockquote>
<p>节点是否正在拖拽中</p>
<h2>方法</h2>
<h3>hasCustomStyle()</h3>
<blockquote>
<p>v0.6.2+</p>
</blockquote>
<p>获取是否设置了自定义样式</p>
<h3>getSize()</h3>
<p>通过重新创建节点内容更新节点的宽高返回一个布尔值代表是否宽高发生了变化</p>
<h3>render()</h3>