mirror of
https://github.com/wanglin2/mind-map.git
synced 2026-02-19 23:08:32 +08:00
Compare commits
13 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
88db910c68 | ||
|
|
7a8b83b9b4 | ||
|
|
74b1a082fe | ||
|
|
ac930daa11 | ||
|
|
836a335d75 | ||
|
|
b5cfca848a | ||
|
|
cd7936a50b | ||
|
|
ecc15ea572 | ||
|
|
7c6c6341e8 | ||
|
|
d7bd57ffac | ||
|
|
69264e3a9d | ||
|
|
d8fdc37684 | ||
|
|
b52497b3f6 |
10
README.md
10
README.md
@@ -27,7 +27,7 @@ Github:[releases](https://github.com/wanglin2/mind-map/releases)。
|
||||
|
||||
> 客户端版本会落后于在线版本,尝试最新功能请优先使用在线版。
|
||||
|
||||
> 如果访问 github 比较慢,可以使用:http://lxqnsys.com/simple-mind-map/#/index
|
||||
> 如果访问 github 比较慢,可以使用【更新可能会滞后】:http://lxqnsys.com/simple-mind-map/#/index
|
||||
|
||||
# 特性
|
||||
|
||||
@@ -252,4 +252,12 @@ const mindMap = new MindMap({
|
||||
<img src="./web/src/assets/avatar/default.png" style="width: 50px;height: 50px;" />
|
||||
<span>易空小易</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/国发.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>国发</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/default.png" style="width: 50px;height: 50px;" />
|
||||
<span>建明</span>
|
||||
</span>
|
||||
</p>
|
||||
|
||||
File diff suppressed because one or more lines are too long
BIN
dist/img/国发.jpg
vendored
Normal file
BIN
dist/img/国发.jpg
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
2
dist/js/app.js
vendored
2
dist/js/app.js
vendored
File diff suppressed because one or more lines are too long
2
dist/js/chunk-2d0ba309.js
vendored
2
dist/js/chunk-2d0ba309.js
vendored
File diff suppressed because one or more lines are too long
2
dist/js/chunk-2d0c20be.js
vendored
2
dist/js/chunk-2d0c20be.js
vendored
File diff suppressed because one or more lines are too long
2
dist/js/chunk-2d0c5538.js
vendored
2
dist/js/chunk-2d0c5538.js
vendored
File diff suppressed because one or more lines are too long
2
dist/js/chunk-2d0d9fbc.js
vendored
2
dist/js/chunk-2d0d9fbc.js
vendored
File diff suppressed because one or more lines are too long
2
dist/js/chunk-2d0dad5f.js
vendored
2
dist/js/chunk-2d0dad5f.js
vendored
File diff suppressed because one or more lines are too long
2
dist/js/chunk-2d0f026c.js
vendored
2
dist/js/chunk-2d0f026c.js
vendored
File diff suppressed because one or more lines are too long
2
dist/js/chunk-2d208ffa.js
vendored
2
dist/js/chunk-2d208ffa.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
dist/js/chunk-68ef25b7.js
vendored
Normal file
1
dist/js/chunk-68ef25b7.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dist/js/chunk-69cd0684.js
vendored
1
dist/js/chunk-69cd0684.js
vendored
File diff suppressed because one or more lines are too long
1
dist/js/chunk-72f53a83.js
vendored
Normal file
1
dist/js/chunk-72f53a83.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dist/js/chunk-76a82238.js
vendored
1
dist/js/chunk-76a82238.js
vendored
File diff suppressed because one or more lines are too long
@@ -1,7 +1,7 @@
|
||||
<!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,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><link rel="icon" href="dist/logo.ico"><title>思绪思维导图</title><script>// 自定义静态资源的路径
|
||||
window.externalPublicPath = './dist/'
|
||||
// 接管应用
|
||||
window.takeOverApp = false</script><link href="dist/css/chunk-vendors.css?b288d0464b34253181aa" rel="stylesheet"><link href="dist/css/app.css?b288d0464b34253181aa" 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>const getDataFromBackend = () => {
|
||||
window.takeOverApp = false</script><link href="dist/css/chunk-vendors.css?f0979c57ec2369021c42" rel="stylesheet"><link href="dist/css/app.css?f0979c57ec2369021c42" 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>const getDataFromBackend = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
resolve({
|
||||
@@ -66,4 +66,4 @@
|
||||
// 可以通过window.$bus.$on()来监听应用的一些事件
|
||||
// 实例化页面
|
||||
window.initApp()
|
||||
}</script><script src="dist/js/chunk-vendors.js?b288d0464b34253181aa"></script><script src="dist/js/app.js?b288d0464b34253181aa"></script></body></html>
|
||||
}</script><script src="dist/js/chunk-vendors.js?f0979c57ec2369021c42"></script><script src="dist/js/app.js?f0979c57ec2369021c42"></script></body></html>
|
||||
@@ -28,7 +28,7 @@ MindMap.iconList = icons.nodeIconList
|
||||
MindMap.constants = constants
|
||||
MindMap.themes = themes
|
||||
MindMap.defaultTheme = defaultTheme
|
||||
MindMap.version = '0.9.3'
|
||||
MindMap.version = '0.9.4'
|
||||
|
||||
MindMap.usePlugin(MiniMap)
|
||||
.usePlugin(Watermark)
|
||||
|
||||
@@ -294,6 +294,7 @@ class MindMap {
|
||||
if (!notRender) {
|
||||
this.render(null, CONSTANTS.CHANGE_LAYOUT)
|
||||
}
|
||||
this.emit('layout_change', layout)
|
||||
}
|
||||
|
||||
// 执行命令
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "simple-mind-map",
|
||||
"version": "0.9.3",
|
||||
"version": "0.9.4",
|
||||
"description": "一个简单的web在线思维导图",
|
||||
"authors": [
|
||||
{
|
||||
|
||||
@@ -329,7 +329,8 @@ export const ERROR_TYPES = {
|
||||
LOAD_CLIPBOARD_IMAGE_ERROR: 'load_clipboard_image_error',
|
||||
BEFORE_TEXT_EDIT_ERROR: 'before_text_edit_error',
|
||||
EXPORT_ERROR: 'export_error',
|
||||
EXPORT_LOAD_IMAGE_ERROR: 'export_load_image_error'
|
||||
EXPORT_LOAD_IMAGE_ERROR: 'export_load_image_error',
|
||||
DATA_CHANGE_DETAIL_EVENT_ERROR: 'data_change_detail_event_error'
|
||||
}
|
||||
|
||||
// css
|
||||
|
||||
@@ -5,6 +5,7 @@ import {
|
||||
isSameObject,
|
||||
transformTreeDataToObject
|
||||
} from '../../utils'
|
||||
import { ERROR_TYPES } from '../../constants/constant'
|
||||
|
||||
// 命令类
|
||||
class Command {
|
||||
@@ -177,48 +178,58 @@ class Command {
|
||||
|
||||
// 派发思维导图更新明细事件
|
||||
emitDataUpdatesEvent(lastData, data) {
|
||||
// 如果data_change_detail没有监听者,那么不进行计算,节省性能
|
||||
const eventName = 'data_change_detail'
|
||||
const count = this.mindMap.event.listenerCount(eventName)
|
||||
if (count > 0 && lastData && data) {
|
||||
const lastDataObj = simpleDeepClone(transformTreeDataToObject(lastData))
|
||||
const dataObj = simpleDeepClone(transformTreeDataToObject(data))
|
||||
const res = []
|
||||
const walkReplace = (root, obj) => {
|
||||
if (root.children && root.children.length > 0) {
|
||||
root.children.forEach((childUid, index) => {
|
||||
root.children[index] = obj[childUid]
|
||||
walkReplace(root.children[index], obj)
|
||||
})
|
||||
try {
|
||||
// 如果data_change_detail没有监听者,那么不进行计算,节省性能
|
||||
const eventName = 'data_change_detail'
|
||||
const count = this.mindMap.event.listenerCount(eventName)
|
||||
if (count > 0 && lastData && data) {
|
||||
const lastDataObj = simpleDeepClone(transformTreeDataToObject(lastData))
|
||||
const dataObj = simpleDeepClone(transformTreeDataToObject(data))
|
||||
const res = []
|
||||
const walkReplace = (root, obj) => {
|
||||
if (root.children && root.children.length > 0) {
|
||||
root.children.forEach((childUid, index) => {
|
||||
root.children[index] =
|
||||
typeof childUid === 'string'
|
||||
? obj[childUid]
|
||||
: obj[childUid.data.uid]
|
||||
walkReplace(root.children[index], obj)
|
||||
})
|
||||
}
|
||||
return root
|
||||
}
|
||||
return root
|
||||
// 找出新增的或修改的
|
||||
Object.keys(dataObj).forEach(uid => {
|
||||
// 新增的或已经存在的,如果数据发生了改变
|
||||
if (!lastDataObj[uid]) {
|
||||
res.push({
|
||||
action: 'create',
|
||||
data: walkReplace(dataObj[uid], dataObj)
|
||||
})
|
||||
} else if (!isSameObject(lastDataObj[uid], dataObj[uid])) {
|
||||
res.push({
|
||||
action: 'update',
|
||||
oldData: walkReplace(lastDataObj[uid], lastDataObj),
|
||||
data: walkReplace(dataObj[uid], dataObj)
|
||||
})
|
||||
}
|
||||
})
|
||||
// 找出删除的
|
||||
Object.keys(lastDataObj).forEach(uid => {
|
||||
if (!dataObj[uid]) {
|
||||
res.push({
|
||||
action: 'delete',
|
||||
data: walkReplace(lastDataObj[uid], lastDataObj)
|
||||
})
|
||||
}
|
||||
})
|
||||
this.mindMap.emit(eventName, res)
|
||||
}
|
||||
// 找出新增的或修改的
|
||||
Object.keys(dataObj).forEach(uid => {
|
||||
// 新增的或已经存在的,如果数据发生了改变
|
||||
if (!lastDataObj[uid]) {
|
||||
res.push({
|
||||
action: 'create',
|
||||
data: walkReplace(dataObj[uid], dataObj)
|
||||
})
|
||||
} else if (!isSameObject(lastDataObj[uid], dataObj[uid])) {
|
||||
res.push({
|
||||
action: 'update',
|
||||
oldData: walkReplace(lastDataObj[uid], lastDataObj),
|
||||
data: walkReplace(dataObj[uid], dataObj)
|
||||
})
|
||||
}
|
||||
})
|
||||
// 找出删除的
|
||||
Object.keys(lastDataObj).forEach(uid => {
|
||||
if (!dataObj[uid]) {
|
||||
res.push({
|
||||
action: 'delete',
|
||||
data: walkReplace(lastDataObj[uid], lastDataObj)
|
||||
})
|
||||
}
|
||||
})
|
||||
this.mindMap.emit(eventName, res)
|
||||
} catch (error) {
|
||||
this.mindMap.opt.errorHandler(
|
||||
ERROR_TYPES.DATA_CHANGE_DETAIL_EVENT_ERROR,
|
||||
error
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -165,6 +165,8 @@ class Event extends EventEmitter {
|
||||
// 鼠标右键菜单事件
|
||||
onContextmenu(e) {
|
||||
e.preventDefault()
|
||||
// Mac上按住ctrl键点击鼠标左键不知为何触发的是contextmenu事件
|
||||
if (e.ctrlKey) return
|
||||
this.emit('contextmenu', e)
|
||||
}
|
||||
|
||||
|
||||
@@ -495,7 +495,7 @@ class Node {
|
||||
// 右键菜单事件
|
||||
this.group.on('contextmenu', e => {
|
||||
const { readonly, useLeftKeySelectionRightKeyDrag } = this.mindMap.opt
|
||||
// 按住ctrl键点击鼠标左键不知为何触发的是contextmenu事件
|
||||
// Mac上按住ctrl键点击鼠标左键不知为何触发的是contextmenu事件
|
||||
if (readonly || e.ctrlKey) {
|
||||
return
|
||||
}
|
||||
|
||||
@@ -128,7 +128,12 @@ function createRichTextNode() {
|
||||
// 如果是富文本那么线移除内联样式
|
||||
text = removeHtmlStyle(text)
|
||||
// 再添加新的内联样式
|
||||
let _text = text
|
||||
text = addHtmlStyle(text, 'span', style)
|
||||
// 给span添加样式没有成功,则尝试给strong标签添加样式
|
||||
if (text === _text) {
|
||||
text = addHtmlStyle(text, 'strong', style)
|
||||
}
|
||||
} else {
|
||||
// 非富文本
|
||||
text = `<p><span style="${style}">${text}</span></p>`
|
||||
@@ -159,7 +164,7 @@ function createRichTextNode() {
|
||||
height = elTmp.getBoundingClientRect().height
|
||||
div.innerHTML = html
|
||||
}
|
||||
width = Math.ceil(width) + 1 // 修复getBoundingClientRect方法对实际宽度是小数的元素获取到的值是整数,导致宽度不够文本发生换行的问题
|
||||
width = Math.min(Math.ceil(width) + 1, textAutoWrapWidth) // 修复getBoundingClientRect方法对实际宽度是小数的元素获取到的值是整数,导致宽度不够文本发生换行的问题
|
||||
height = Math.ceil(height)
|
||||
g.attr('data-width', width)
|
||||
g.attr('data-height', height)
|
||||
@@ -222,7 +227,7 @@ function createTextNode() {
|
||||
g.add(node)
|
||||
})
|
||||
let { width, height } = g.bbox()
|
||||
width = Math.ceil(width)
|
||||
width = Math.min(Math.ceil(width), maxWidth)
|
||||
height = Math.ceil(height)
|
||||
g.attr('data-width', width)
|
||||
g.attr('data-height', height)
|
||||
|
||||
@@ -295,6 +295,65 @@ class Base {
|
||||
return `M ${x1},${y1} C ${cx1},${cy1} ${cx2},${cy2} ${x2},${y2}`
|
||||
}
|
||||
|
||||
// 根据a,b两个点的位置,计算去除圆角大小后的新的b点
|
||||
computeNewPoint(a, b, radius = 0) {
|
||||
// x坐标相同
|
||||
if (a[0] === b[0]) {
|
||||
// b在a下方
|
||||
if (b[1] > a[1]) {
|
||||
return [b[0], b[1] - radius]
|
||||
} else {
|
||||
// b在a上方
|
||||
return [b[0], b[1] + radius]
|
||||
}
|
||||
} else if (a[1] === b[1]) {
|
||||
// y坐标相同
|
||||
// b在a右边
|
||||
if (b[0] > a[0]) {
|
||||
return [b[0] - radius, b[1]]
|
||||
} else {
|
||||
return [b[0] + radius, b[1]]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 创建一段折线路径
|
||||
// 最后一个拐角支持圆角
|
||||
createFoldLine(list) {
|
||||
const { lineRadius } = this.mindMap.themeConfig
|
||||
const len = list.length
|
||||
let path = ''
|
||||
let radiusPath = ''
|
||||
if (len >= 3 && lineRadius > 0) {
|
||||
const start = list[len - 3]
|
||||
const center = list[len - 2]
|
||||
const end = list[len - 1]
|
||||
// 如果三点在一条直线,那么不用处理
|
||||
const isOneLine =
|
||||
(start[0] === center[0] && center[0] === end[0]) ||
|
||||
(start[1] === center[1] && center[1] === end[1])
|
||||
if (!isOneLine) {
|
||||
const cStart = this.computeNewPoint(start, center, lineRadius)
|
||||
const cEnd = this.computeNewPoint(end, center, lineRadius)
|
||||
radiusPath = `Q ${center[0]},${center[1]} ${cEnd[0]},${cEnd[1]}`
|
||||
list.splice(len - 2, 1, cStart, radiusPath)
|
||||
}
|
||||
}
|
||||
list.forEach((item, index) => {
|
||||
if (typeof item === 'string') {
|
||||
path += item
|
||||
} else {
|
||||
const [x, y] = item
|
||||
if (index === 0) {
|
||||
path += `M ${x},${y}`
|
||||
} else {
|
||||
path += `L ${x},${y}`
|
||||
}
|
||||
}
|
||||
})
|
||||
return path
|
||||
}
|
||||
|
||||
// 获取节点的marginX
|
||||
getMarginX(layerIndex) {
|
||||
const { themeConfig, opt } = this.mindMap
|
||||
|
||||
@@ -178,9 +178,12 @@ class LogicalStructure extends Base {
|
||||
let nodeUseLineStyleOffset = nodeUseLineStyle ? item.width : 0
|
||||
y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
|
||||
y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
|
||||
let path = `M ${x1},${y1} L ${x1 + s1},${y1} L ${x1 + s1},${y2} L ${
|
||||
x2 + nodeUseLineStyleOffset
|
||||
},${y2}`
|
||||
let path = this.createFoldLine([
|
||||
[x1, y1],
|
||||
[x1 + s1, y1],
|
||||
[x1 + s1, y2],
|
||||
[x2 + nodeUseLineStyleOffset, y2]
|
||||
])
|
||||
this.setLineStyle(style, lines[index], path, item)
|
||||
})
|
||||
}
|
||||
|
||||
@@ -240,9 +240,12 @@ class MindMap extends Base {
|
||||
let y2 = item.top + item.height / 2
|
||||
y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
|
||||
y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
|
||||
let path = `M ${x1},${y1} L ${x1 + _s},${y1} L ${x1 + _s},${y2} L ${
|
||||
x2 + nodeUseLineStyleOffset
|
||||
},${y2}`
|
||||
let path = this.createFoldLine([
|
||||
[x1, y1],
|
||||
[x1 + _s, y1],
|
||||
[x1 + _s, y2],
|
||||
[x2 + nodeUseLineStyleOffset, y2]
|
||||
])
|
||||
this.setLineStyle(style, lines[index], path, item)
|
||||
})
|
||||
}
|
||||
|
||||
@@ -259,11 +259,12 @@ class VerticalTimeline extends Base {
|
||||
node.children.forEach((item, index) => {
|
||||
let itemLeft = item.left
|
||||
let itemYCenter = item.top + item.height / 2
|
||||
let path = `
|
||||
M ${nodeRight},${nodeYCenter}
|
||||
L ${nodeRight + offset},${nodeYCenter}
|
||||
L ${nodeRight + offset},${itemYCenter}
|
||||
L ${itemLeft},${itemYCenter}`
|
||||
let path = this.createFoldLine([
|
||||
[nodeRight, nodeYCenter],
|
||||
[nodeRight + offset, nodeYCenter],
|
||||
[nodeRight + offset, itemYCenter],
|
||||
[itemLeft, itemYCenter]
|
||||
])
|
||||
this.setLineStyle(style, lines[index], path, item)
|
||||
})
|
||||
} else {
|
||||
@@ -274,11 +275,12 @@ class VerticalTimeline extends Base {
|
||||
node.children.forEach((item, index) => {
|
||||
let itemRight = item.left + item.width
|
||||
let itemYCenter = item.top + item.height / 2
|
||||
let path = `
|
||||
M ${nodeLeft},${nodeYCenter}
|
||||
L ${nodeLeft - offset},${nodeYCenter}
|
||||
L ${nodeLeft - offset},${itemYCenter}
|
||||
L ${itemRight},${itemYCenter}`
|
||||
let path = this.createFoldLine([
|
||||
[nodeLeft, nodeYCenter],
|
||||
[nodeLeft - offset, nodeYCenter],
|
||||
[nodeLeft - offset, itemYCenter],
|
||||
[itemRight, itemYCenter]
|
||||
])
|
||||
this.setLineStyle(style, lines[index], path, item)
|
||||
})
|
||||
}
|
||||
|
||||
@@ -201,7 +201,8 @@ class RichText {
|
||||
box-shadow: 0 0 20px rgba(0,0,0,.5);
|
||||
outline: none;
|
||||
word-break:
|
||||
break-all;padding: ${paddingY}px ${paddingX}px;
|
||||
break-all;
|
||||
padding: ${paddingY}px ${paddingX}px;
|
||||
`
|
||||
this.textEditNode.addEventListener('click', e => {
|
||||
e.stopPropagation()
|
||||
@@ -217,18 +218,10 @@ class RichText {
|
||||
const targetNode = customInnerElsAppendTo || document.body
|
||||
targetNode.appendChild(this.textEditNode)
|
||||
}
|
||||
// 使用节点的填充色,否则如果节点颜色是白色的话编辑时看不见
|
||||
let bgColor = node.style.merge('fillColor')
|
||||
let color = node.style.merge('color')
|
||||
this.textEditNode.style.marginLeft = `-${paddingX * scaleX}px`
|
||||
this.textEditNode.style.marginTop = `-${paddingY * scaleY}px`
|
||||
this.textEditNode.style.zIndex = nodeTextEditZIndex
|
||||
this.textEditNode.style.backgroundColor =
|
||||
bgColor === 'transparent'
|
||||
? isWhite(color)
|
||||
? getVisibleColorFromTheme(this.mindMap.themeConfig)
|
||||
: '#fff'
|
||||
: bgColor
|
||||
this.textEditNode.style.background = this.getBackground(node)
|
||||
this.textEditNode.style.minWidth = originWidth + paddingX * 2 + 'px'
|
||||
this.textEditNode.style.minHeight = originHeight + 'px'
|
||||
this.textEditNode.style.left = rect.left + 'px'
|
||||
@@ -278,6 +271,27 @@ class RichText {
|
||||
this.cacheEditingText = ''
|
||||
}
|
||||
|
||||
// 获取编辑区域的背景填充
|
||||
getBackground(node) {
|
||||
const gradientStyle = node.style.merge('gradientStyle')
|
||||
// 当前使用的是渐变色背景
|
||||
if (gradientStyle) {
|
||||
const startColor = node.style.merge('startColor')
|
||||
const endColor = node.style.merge('endColor')
|
||||
return `linear-gradient(to right, ${startColor}, ${endColor})`
|
||||
} else {
|
||||
// 单色背景
|
||||
const bgColor = node.style.merge('fillColor')
|
||||
const color = node.style.merge('color')
|
||||
// 默认使用节点的填充色,否则如果节点颜色是白色的话编辑时看不见
|
||||
return bgColor === 'transparent'
|
||||
? isWhite(color)
|
||||
? getVisibleColorFromTheme(this.mindMap.themeConfig)
|
||||
: '#fff'
|
||||
: bgColor
|
||||
}
|
||||
}
|
||||
|
||||
// 如果是非富文本的情况,需要手动应用文本样式
|
||||
setTextStyleIfNotRichText(node) {
|
||||
let style = {
|
||||
@@ -472,9 +486,9 @@ class RichText {
|
||||
}
|
||||
|
||||
// 格式化当前选中的文本
|
||||
formatText(config = {}, clear = false) {
|
||||
formatText(config = {}, clear = false, pure = false) {
|
||||
if (!this.range && !this.lastRange) return
|
||||
this.syncFormatToNodeConfig(config, clear)
|
||||
if(!pure) this.syncFormatToNodeConfig(config, clear)
|
||||
let rangeLost = !this.range
|
||||
let range = rangeLost ? this.lastRange : this.range
|
||||
clear
|
||||
@@ -487,7 +501,24 @@ class RichText {
|
||||
|
||||
// 清除当前选中文本的样式
|
||||
removeFormat() {
|
||||
// 先移除全部样式
|
||||
this.formatText({}, true)
|
||||
// 再将样式恢复为当前主题改节点的默认样式
|
||||
const style = {}
|
||||
if (this.node) {
|
||||
;[
|
||||
'fontFamily',
|
||||
'fontSize',
|
||||
'fontWeight',
|
||||
'fontStyle',
|
||||
'textDecoration',
|
||||
'color'
|
||||
].forEach(key => {
|
||||
style[key] = this.node.style.merge(key)
|
||||
})
|
||||
}
|
||||
const config = this.normalStyleToRichTextStyle(style)
|
||||
this.formatText(config, false, true)
|
||||
}
|
||||
|
||||
// 格式化指定范围的文本
|
||||
|
||||
@@ -17,9 +17,11 @@ export default {
|
||||
// 连线样式
|
||||
lineDasharray: 'none',
|
||||
// 连线风格
|
||||
lineStyle: 'straight', // 针对logicalStructure、mindMap两种结构。曲线(curve)、直线(straight)、直连(direct)
|
||||
// 曲线连接时,根节点和其他节点的连接线样式保持统一,默认根节点为 ( 型,其他节点为 { 型,设为true后,都为 { 型
|
||||
lineStyle: 'straight', // 曲线(curve)【仅支持logicalStructure、mindMap、verticalTimeline三种结构】、直线(straight)、直连(direct)【仅支持logicalStructure、mindMap、organizationStructure、verticalTimeline四种结构】
|
||||
// 曲线连接时,根节点和其他节点的连接线样式保持统一,默认根节点为 ( 型,其他节点为 { 型,设为true后,都为 { 型。仅支持logicalStructure、mindMap两种结构
|
||||
rootLineKeepSameInCurve: true,
|
||||
// 直线连接(straight)时,连线的圆角大小,设置为0代表没有圆角,仅支持logicalStructure、mindMap、verticalTimeline三种结构
|
||||
lineRadius: 5,
|
||||
// 连线尾部是否显示标记,目前只支持箭头
|
||||
showLineMarker: false,
|
||||
// 概要连线的粗细
|
||||
@@ -56,7 +58,7 @@ export default {
|
||||
backgroundPosition: 'center center',
|
||||
// 设置背景图片大小
|
||||
backgroundSize: 'cover',
|
||||
// 节点使用横线样式
|
||||
// 节点使用只有底边横线的样式,仅支持logicalStructure、mindMap、catalogOrganization、organizationStructure四种结构
|
||||
nodeUseLineStyle: false,
|
||||
// 根节点样式
|
||||
root: {
|
||||
@@ -176,6 +178,7 @@ const nodeSizeIndependenceList = [
|
||||
'rootLineKeepSameInCurve',
|
||||
'showLineMarker',
|
||||
'gradientStyle',
|
||||
'lineRadius',
|
||||
'startColor',
|
||||
'endColor'
|
||||
]
|
||||
|
||||
@@ -576,7 +576,25 @@ export const getVisibleColorFromTheme = themeConfig => {
|
||||
}
|
||||
}
|
||||
|
||||
// 去掉DOM节点中的公式标签
|
||||
export const removeFormulaTags = node => {
|
||||
const walk = root => {
|
||||
const childNodes = root.childNodes
|
||||
childNodes.forEach(node => {
|
||||
if (node.nodeType === 1) {
|
||||
if (node.classList.contains('ql-formula')) {
|
||||
node.parentNode.removeChild(node)
|
||||
} else {
|
||||
walk(node)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
walk(node)
|
||||
}
|
||||
|
||||
// 将<p><span></span><p>形式的节点富文本内容转换成\n换行的文本
|
||||
// 会过滤掉节点中的格式节点
|
||||
let nodeRichTextToTextWithWrapEl = null
|
||||
export const nodeRichTextToTextWithWrap = html => {
|
||||
if (!nodeRichTextToTextWithWrapEl) {
|
||||
@@ -589,6 +607,7 @@ export const nodeRichTextToTextWithWrap = html => {
|
||||
const node = childNodes[i]
|
||||
if (node.nodeType === 1) {
|
||||
// 元素节点
|
||||
removeFormulaTags(node)
|
||||
if (node.tagName.toLowerCase() === 'p') {
|
||||
res += node.textContent + '\n'
|
||||
} else {
|
||||
|
||||
BIN
web/src/assets/avatar/国发.jpg
Normal file
BIN
web/src/assets/avatar/国发.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
@@ -81,3 +81,31 @@ export const formulaList = [
|
||||
'\\begin{matrix}x & y \\\\z & v\\end{matrix}',
|
||||
'\\begin{cases}3x + 5y + z \\\\7x - 2y + 4z \\\\-6x + 3y + 2z\\end{cases}'
|
||||
]
|
||||
|
||||
export const supportLineStyleLayoutsMap = {
|
||||
curve: ['logicalStructure', 'mindMap', 'verticalTimeline'],
|
||||
direct: [
|
||||
'logicalStructure',
|
||||
'mindMap',
|
||||
'organizationStructure',
|
||||
'verticalTimeline'
|
||||
]
|
||||
}
|
||||
|
||||
export const supportLineRadiusLayouts = [
|
||||
'logicalStructure',
|
||||
'mindMap',
|
||||
'verticalTimeline'
|
||||
]
|
||||
|
||||
export const supportNodeUseLineStyleLayouts = [
|
||||
'logicalStructure',
|
||||
'mindMap',
|
||||
'catalogOrganization',
|
||||
'organizationStructure'
|
||||
]
|
||||
|
||||
export const supportRootLineKeepSameInCurveLayouts = [
|
||||
'logicalStructure',
|
||||
'mindMap'
|
||||
]
|
||||
|
||||
@@ -10,6 +10,7 @@ export default {
|
||||
line: 'Line',
|
||||
width: 'Width',
|
||||
style: 'Style',
|
||||
lineRadius: 'Radius',
|
||||
lineOfOutline: 'Line of outline',
|
||||
showArrow: 'Is show arrow',
|
||||
nodePadding: 'Node padding',
|
||||
|
||||
@@ -10,6 +10,7 @@ export default {
|
||||
line: '连线',
|
||||
width: '粗细',
|
||||
style: '风格',
|
||||
lineRadius: '圆角大小',
|
||||
lineOfOutline: '概要的连线',
|
||||
showArrow: '是否显示箭头',
|
||||
nodePadding: '节点内边距',
|
||||
|
||||
@@ -1,5 +1,35 @@
|
||||
# Changelog
|
||||
|
||||
## 0.9.4
|
||||
|
||||
Fix:
|
||||
|
||||
> 1.Fix the issue of inconsistent text wrapping caused by inconsistent text area width during node display and editing in some cases.
|
||||
>
|
||||
> 2.Fixed the issue where gradients were not applied to the edit box during rich text editing for nodes with gradient backgrounds.
|
||||
>
|
||||
> 3.Fix the issue of text style loss after switching themes for nodes defined in bold by the theme.
|
||||
>
|
||||
> 4.Fix the issue on Mac where the useLeftKeySelectionRightKeyDrag option is set to true and cannot hold down the Ctrl key to select multiple nodes.
|
||||
>
|
||||
> 5.Fix the issue where text styles are lost after clearing styles during node rich text editing, and switching themes does not restore them.
|
||||
>
|
||||
> 6.Fix data issue when deleting nodes with child nodes_ Change_ The issue of error reporting in detail events.
|
||||
|
||||
New:
|
||||
|
||||
> 1.Add the lineRadius property to the theme configuration to set the size of the rounded corners when connecting straight lines.
|
||||
|
||||
Demo:
|
||||
|
||||
> 1.Remove the display of formulas from the outline.
|
||||
>
|
||||
> 2.Some configurations in the basic style that only support partial structures are displayed and hidden based on the current structure.
|
||||
>
|
||||
> 3.Add configuration for connecting rounded corners.
|
||||
>
|
||||
> 4.Automatically hide the sidebar when importing files.
|
||||
|
||||
## 0.9.3
|
||||
|
||||
Fix
|
||||
|
||||
@@ -1,6 +1,27 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Changelog</h1>
|
||||
<h2>0.9.4</h2>
|
||||
<p>Fix:</p>
|
||||
<blockquote>
|
||||
<p>1.Fix the issue of inconsistent text wrapping caused by inconsistent text area width during node display and editing in some cases.</p>
|
||||
<p>2.Fixed the issue where gradients were not applied to the edit box during rich text editing for nodes with gradient backgrounds.</p>
|
||||
<p>3.Fix the issue of text style loss after switching themes for nodes defined in bold by the theme.</p>
|
||||
<p>4.Fix the issue on Mac where the useLeftKeySelectionRightKeyDrag option is set to true and cannot hold down the Ctrl key to select multiple nodes.</p>
|
||||
<p>5.Fix the issue where text styles are lost after clearing styles during node rich text editing, and switching themes does not restore them.</p>
|
||||
<p>6.Fix data issue when deleting nodes with child nodes_ Change_ The issue of error reporting in detail events.</p>
|
||||
</blockquote>
|
||||
<p>New:</p>
|
||||
<blockquote>
|
||||
<p>1.Add the lineRadius property to the theme configuration to set the size of the rounded corners when connecting straight lines.</p>
|
||||
</blockquote>
|
||||
<p>Demo:</p>
|
||||
<blockquote>
|
||||
<p>1.Remove the display of formulas from the outline.</p>
|
||||
<p>2.Some configurations in the basic style that only support partial structures are displayed and hidden based on the current structure.</p>
|
||||
<p>3.Add configuration for connecting rounded corners.</p>
|
||||
<p>4.Automatically hide the sidebar when importing files.</p>
|
||||
</blockquote>
|
||||
<h2>0.9.3</h2>
|
||||
<p>Fix</p>
|
||||
<blockquote>
|
||||
|
||||
@@ -421,6 +421,7 @@ Listen to an event. Event list:
|
||||
| body_mousedown(v0.9.2+) | Mousedown event of document.body | e(event object) |
|
||||
| body_click | Click event of document.body | e(event object) |
|
||||
| data_change_detail(v0.9.3+) | The detailed changes in rendering tree data will return an array, with each item representing an update point and each item being an object, There is a 'type' attribute that represents the type of detail, Including 'create' (create node), 'update' (update node), 'delete' (delete node), There is a 'data' attribute that represents the current updated node data. If it is of the 'update' type, there will also be an 'oldData' attribute that saves the data of the node before the update | arr(Detail data) |
|
||||
| layout_change(v0.9.4+) | Triggered when modifying the structure, i.e. when the mindMap.setLayout() method is called | layout(New layout) |
|
||||
|
||||
### emit(event, ...args)
|
||||
|
||||
|
||||
@@ -1114,6 +1114,11 @@ poor performance and should be used sparingly.</p>
|
||||
<td>The detailed changes in rendering tree data will return an array, with each item representing an update point and each item being an object, There is a 'type' attribute that represents the type of detail, Including 'create' (create node), 'update' (update node), 'delete' (delete node), There is a 'data' attribute that represents the current updated node data. If it is of the 'update' type, there will also be an 'oldData' attribute that saves the data of the node before the update</td>
|
||||
<td>arr(Detail data)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>layout_change(v0.9.4+)</td>
|
||||
<td>Triggered when modifying the structure, i.e. when the mindMap.setLayout() method is called</td>
|
||||
<td>layout(New layout)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>emit(event, ...args)</h3>
|
||||
|
||||
@@ -277,4 +277,12 @@ Open source is not easy. If this project is helpful to you, you can invite the a
|
||||
<img src="../../../../assets/avatar/default.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>易空小易</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 style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
|
||||
<img src="../../../../assets/avatar/default.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>建明</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -8,17 +8,17 @@
|
||||
</blockquote>
|
||||
<h2>Features</h2>
|
||||
<ul>
|
||||
<li><input type="checkbox" id="checkbox16" checked="true" /><label for="checkbox16">Pluggable architecture, in addition to core functions, other functions are provided as plugins, which can be used as needed to reduce packaging volume</label></li>
|
||||
<li><input type="checkbox" id="checkbox17" checked="true" /><label for="checkbox17">Support logical structure chart, mind map, Organizational chart, directory organization chart, timeline (horizontal and vertical), fishbone chart and other structures</label></li>
|
||||
<li><input type="checkbox" id="checkbox18" checked="true" /><label for="checkbox18">Built-in multiple themes, allowing for highly customizable styles, and supporting registration of new themes</label></li>
|
||||
<li><input type="checkbox" id="checkbox19" checked="true" /><label for="checkbox19">Node content supports text (regular text, rich text), images, icons, hyperlinks, notes, labels, summaries, and math formulas</label></li>
|
||||
<li><input type="checkbox" id="checkbox20" checked="true" /><label for="checkbox20">Nodes support drag and drop (drag and move, freely adjust), multiple node shapes, and fully customize node content using DDM</label></li>
|
||||
<li><input type="checkbox" id="checkbox21" checked="true" /><label for="checkbox21">Support canvas dragging and scaling</label></li>
|
||||
<li><input type="checkbox" id="checkbox22" checked="true" /><label for="checkbox22">Supports two multi node selection methods: mouse button drag selection and Ctrl+left button selection</label></li>
|
||||
<li><input type="checkbox" id="checkbox23" checked="true" /><label for="checkbox23">Supoorts to export as </label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>, support import from <code>json</code>、<code>xmind</code>、<code>markdown</code></li>
|
||||
<li><input type="checkbox" id="checkbox24" checked="true" /><label for="checkbox24">Support shortcut keys, forward and backward, correlation lines, search and replacement, small maps, watermarks, and scrollbar</label></li>
|
||||
<li><input type="checkbox" id="checkbox25" checked="true" /><label for="checkbox25">Provide rich configurations to meet various scenarios and usage habits</label></li>
|
||||
<li><input type="checkbox" id="checkbox26" checked="true" /><label for="checkbox26">Support collaborative editing</label></li>
|
||||
<li><input type="checkbox" id="checkbox48" checked="true" /><label for="checkbox48">Pluggable architecture, in addition to core functions, other functions are provided as plugins, which can be used as needed to reduce packaging volume</label></li>
|
||||
<li><input type="checkbox" id="checkbox49" checked="true" /><label for="checkbox49">Support logical structure chart, mind map, Organizational chart, directory organization chart, timeline (horizontal and vertical), fishbone chart and other structures</label></li>
|
||||
<li><input type="checkbox" id="checkbox50" checked="true" /><label for="checkbox50">Built-in multiple themes, allowing for highly customizable styles, and supporting registration of new themes</label></li>
|
||||
<li><input type="checkbox" id="checkbox51" checked="true" /><label for="checkbox51">Node content supports text (regular text, rich text), images, icons, hyperlinks, notes, labels, summaries, and math formulas</label></li>
|
||||
<li><input type="checkbox" id="checkbox52" checked="true" /><label for="checkbox52">Nodes support drag and drop (drag and move, freely adjust), multiple node shapes, and fully customize node content using DDM</label></li>
|
||||
<li><input type="checkbox" id="checkbox53" checked="true" /><label for="checkbox53">Support canvas dragging and scaling</label></li>
|
||||
<li><input type="checkbox" id="checkbox54" checked="true" /><label for="checkbox54">Supports two multi node selection methods: mouse button drag selection and Ctrl+left button selection</label></li>
|
||||
<li><input type="checkbox" id="checkbox55" checked="true" /><label for="checkbox55">Supoorts to export as </label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>, support import from <code>json</code>、<code>xmind</code>、<code>markdown</code></li>
|
||||
<li><input type="checkbox" id="checkbox56" checked="true" /><label for="checkbox56">Support shortcut keys, forward and backward, correlation lines, search and replacement, small maps, watermarks, and scrollbar</label></li>
|
||||
<li><input type="checkbox" id="checkbox57" checked="true" /><label for="checkbox57">Provide rich configurations to meet various scenarios and usage habits</label></li>
|
||||
<li><input type="checkbox" id="checkbox58" checked="true" /><label for="checkbox58">Support collaborative editing</label></li>
|
||||
</ul>
|
||||
<h2>Repository Catalog Introduction</h2>
|
||||
<p>1.<code>simple-mind-map</code></p>
|
||||
@@ -28,16 +28,16 @@ frameworks such as Vue and React, or without a framework.</p>
|
||||
<p>This is an online mind map built using the <code>simple-mind-map</code> library and based
|
||||
on <code>Vue2.x</code> and <code>ElementUI</code>. Features include:</p>
|
||||
<ul>
|
||||
<li><input type="checkbox" id="checkbox27" checked="true" /><label for="checkbox27">Toolbar, which supports inserting and deleting nodes, and editing node</label>
|
||||
<li><input type="checkbox" id="checkbox59" checked="true" /><label for="checkbox59">Toolbar, which supports inserting and deleting nodes, and editing node</label>
|
||||
images, icons, hyperlinks, notes, tags, and summaries</li>
|
||||
<li><input type="checkbox" id="checkbox28" checked="true" /><label for="checkbox28">Sidebar, with panels for basic style settings, node style settings,</label>
|
||||
<li><input type="checkbox" id="checkbox60" checked="true" /><label for="checkbox60">Sidebar, with panels for basic style settings, node style settings,</label>
|
||||
outline, theme selection, and structure selection</li>
|
||||
<li><input type="checkbox" id="checkbox29" checked="true" /><label for="checkbox29">Import and export functionality; data is saved in the browser's local</label>
|
||||
<li><input type="checkbox" id="checkbox61" checked="true" /><label for="checkbox61">Import and export functionality; data is saved in the browser's local</label>
|
||||
storage by default, but it also supports creating, opening, and editing
|
||||
local files on the computer directly</li>
|
||||
<li><input type="checkbox" id="checkbox30" checked="true" /><label for="checkbox30">Right-click menu, which supports operations such as expanding, collapsing,</label>
|
||||
<li><input type="checkbox" id="checkbox62" checked="true" /><label for="checkbox62">Right-click menu, which supports operations such as expanding, collapsing,</label>
|
||||
and organizing layout</li>
|
||||
<li><input type="checkbox" id="checkbox31" checked="true" /><label for="checkbox31">Bottom bar, which supports node and word count statistics, switching</label>
|
||||
<li><input type="checkbox" id="checkbox63" checked="true" /><label for="checkbox63">Bottom bar, which supports node and word count statistics, switching</label>
|
||||
between edit and read-only modes, zooming in and out, and switching to
|
||||
full screen, support mini map</li>
|
||||
</ul>
|
||||
@@ -233,6 +233,14 @@ full screen, support mini map</li>
|
||||
<img src="../../../../assets/avatar/default.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>易空小易</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 style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
|
||||
<img src="../../../../assets/avatar/default.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>建明</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -86,7 +86,7 @@ Select All. When the node is being edited, you can select all the text in the no
|
||||
|
||||
Focus.
|
||||
|
||||
### formatText(config = {})
|
||||
### formatText(config = {}, clear = false, pure = false)
|
||||
|
||||
- `config`:Object. The key is the style attribute and the value is the style value. The complete configuration is as follows:
|
||||
|
||||
@@ -102,7 +102,11 @@ Focus.
|
||||
}
|
||||
```
|
||||
|
||||
Formats the currently selected text.
|
||||
- `clear`:Is clear style
|
||||
|
||||
- `pure`:v0.9.4+, If set to true, only the text style will be formatted and will not be synchronized to the node's data
|
||||
|
||||
Formats the currently selected text. The style settings will be synchronized to the data of the node.
|
||||
|
||||
### formatRangeText(range, config = {})
|
||||
|
||||
|
||||
@@ -71,7 +71,7 @@ MindMap.usePlugin(RichText, opt?)
|
||||
<p>v0.4.7+</p>
|
||||
</blockquote>
|
||||
<p>Focus.</p>
|
||||
<h3>formatText(config = {})</h3>
|
||||
<h3>formatText(config = {}, clear = false, pure = false)</h3>
|
||||
<ul>
|
||||
<li><code>config</code>:Object. The key is the style attribute and the value is the style value. The complete configuration is as follows:</li>
|
||||
</ul>
|
||||
@@ -85,7 +85,15 @@ MindMap.usePlugin(RichText, opt?)
|
||||
<span class="hljs-attr">color</span>: <span class="hljs-string">'#333'</span> <span class="hljs-comment">// color</span>
|
||||
}
|
||||
</code></pre>
|
||||
<p>Formats the currently selected text.</p>
|
||||
<ul>
|
||||
<li>
|
||||
<p><code>clear</code>:Is clear style</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><code>pure</code>:v0.9.4+, If set to true, only the text style will be formatted and will not be synchronized to the node's data</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>Formats the currently selected text. The style settings will be synchronized to the data of the node.</p>
|
||||
<h3>formatRangeText(range, config = {})</h3>
|
||||
<ul>
|
||||
<li><code>range</code>:The range object of <code>Quill</code>, has the following format:</li>
|
||||
|
||||
@@ -1,5 +1,35 @@
|
||||
# Changelog
|
||||
|
||||
## 0.9.4
|
||||
|
||||
修复:
|
||||
|
||||
> 1.修复一些情况下,节点显示时的文本区域宽度和编辑时的宽度不一致导致的文本换行不一致的问题。
|
||||
>
|
||||
> 2.修复存在渐变色背景的节点富文本编辑时编辑框没有应用渐变的问题。
|
||||
>
|
||||
> 3.修复被主题定义了加粗的节点切换主题后文本样式丢失的问题。
|
||||
>
|
||||
> 4.修复mac上useLeftKeySelectionRightKeyDrag选项设为true时无法按住ctrl键多选节点的问题。
|
||||
>
|
||||
> 5.修复节点富文本编辑时清除样式后文字样式丢失并且切换主题也不会恢复的问题。
|
||||
>
|
||||
> 6.修复删除含有子节点的节点时,data_change_detail事件报错的问题。
|
||||
|
||||
新增:
|
||||
|
||||
> 1.主题配置增加lineRadius属性设置直线连接时的圆角大小。
|
||||
|
||||
Demo:
|
||||
|
||||
> 1.大纲里去掉公式的显示。
|
||||
>
|
||||
> 2.基础样式中一些仅支持部分结构的配置根据当前结构进行显示和隐藏。
|
||||
>
|
||||
> 3.新增连线圆角的配置。
|
||||
>
|
||||
> 4.导入文件时自动隐藏侧边栏。
|
||||
|
||||
## 0.9.3
|
||||
|
||||
修复:
|
||||
|
||||
@@ -1,6 +1,27 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Changelog</h1>
|
||||
<h2>0.9.4</h2>
|
||||
<p>修复:</p>
|
||||
<blockquote>
|
||||
<p>1.修复一些情况下,节点显示时的文本区域宽度和编辑时的宽度不一致导致的文本换行不一致的问题。</p>
|
||||
<p>2.修复存在渐变色背景的节点富文本编辑时编辑框没有应用渐变的问题。</p>
|
||||
<p>3.修复被主题定义了加粗的节点切换主题后文本样式丢失的问题。</p>
|
||||
<p>4.修复mac上useLeftKeySelectionRightKeyDrag选项设为true时无法按住ctrl键多选节点的问题。</p>
|
||||
<p>5.修复节点富文本编辑时清除样式后文字样式丢失并且切换主题也不会恢复的问题。</p>
|
||||
<p>6.修复删除含有子节点的节点时,data_change_detail事件报错的问题。</p>
|
||||
</blockquote>
|
||||
<p>新增:</p>
|
||||
<blockquote>
|
||||
<p>1.主题配置增加lineRadius属性设置直线连接时的圆角大小。</p>
|
||||
</blockquote>
|
||||
<p>Demo:</p>
|
||||
<blockquote>
|
||||
<p>1.大纲里去掉公式的显示。</p>
|
||||
<p>2.基础样式中一些仅支持部分结构的配置根据当前结构进行显示和隐藏。</p>
|
||||
<p>3.新增连线圆角的配置。</p>
|
||||
<p>4.导入文件时自动隐藏侧边栏。</p>
|
||||
</blockquote>
|
||||
<h2>0.9.3</h2>
|
||||
<p>修复:</p>
|
||||
<blockquote>
|
||||
|
||||
@@ -418,6 +418,7 @@ mindMap.setTheme('主题名称')
|
||||
| body_mousedown(v0.9.2+) | document.body的鼠标按下事件 | e(事件对象) |
|
||||
| body_click | document.body的点击事件 | e(事件对象) |
|
||||
| data_change_detail(v0.9.3+) | 渲染树数据变化的明细,会返回一个数组,每一项代表一个更新点,每一项都是一个对象,存在一个`type`属性,代表明细的类型,包含`create`(创建节点)、`update`(更新节点)、`delete`(删除节点),存在一个`data`属性,代表当前更新的节点数据,如果是`update`类型,还会存在一个`oldData`属性,保存了更新前该节点的数据 | arr(明细数据) |
|
||||
| layout_change(v0.9.4+) | 修改结构时触发,即调用了mindMap.setLayout()方法时触发 | layout(新的结构) |
|
||||
|
||||
### emit(event, ...args)
|
||||
|
||||
|
||||
@@ -1022,6 +1022,11 @@ mindMap.setTheme(<span class="hljs-string">'主题名称'</span>)
|
||||
<td>渲染树数据变化的明细,会返回一个数组,每一项代表一个更新点,每一项都是一个对象,存在一个<code>type</code>属性,代表明细的类型,包含<code>create</code>(创建节点)、<code>update</code>(更新节点)、<code>delete</code>(删除节点),存在一个<code>data</code>属性,代表当前更新的节点数据,如果是<code>update</code>类型,还会存在一个<code>oldData</code>属性,保存了更新前该节点的数据</td>
|
||||
<td>arr(明细数据)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>layout_change(v0.9.4+)</td>
|
||||
<td>修改结构时触发,即调用了mindMap.setLayout()方法时触发</td>
|
||||
<td>layout(新的结构)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>emit(event, ...args)</h3>
|
||||
|
||||
@@ -1,5 +1,165 @@
|
||||
# 主题
|
||||
|
||||
## 主题配置属性一览
|
||||
|
||||
此处的配置可能未及时更新,完整的主题配置可以参考:[default.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js)。
|
||||
|
||||
如果某个属性的值你不知道如何传,可以去在线demo中设置一下,然后导出json或smm文件查看对应的值。也可以参考demo项目中的配置[zh.js](https://github.com/wanglin2/mind-map/blob/main/web/src/config/zh.js)。
|
||||
|
||||
```js
|
||||
{
|
||||
// 节点内边距
|
||||
paddingX: 15,
|
||||
paddingY: 5,
|
||||
// 图片显示的最大宽度
|
||||
imgMaxWidth: 100,
|
||||
// 图片显示的最大高度
|
||||
imgMaxHeight: 100,
|
||||
// icon的大小
|
||||
iconSize: 20,
|
||||
// 连线的粗细
|
||||
lineWidth: 1,
|
||||
// 连线的颜色
|
||||
lineColor: '#549688',
|
||||
// 连线样式
|
||||
lineDasharray: 'none',
|
||||
// 连线风格,支持三种
|
||||
// 1.曲线(curve)。仅logicalStructure、mindMap、verticalTimeline三种结构支持。
|
||||
// 2.直线(straight)。
|
||||
// 3.直连(direct)。仅logicalStructure、mindMap、organizationStructure、verticalTimeline四种结构支持。
|
||||
lineStyle: 'straight',
|
||||
// 曲线连接时,根节点和其他节点的连接线样式保持统一,默认根节点为 ( 型,其他节点为 { 型,设为true后,都为 { 型。仅logicalStructure、mindMap两种结构支持。
|
||||
rootLineKeepSameInCurve: true,
|
||||
// 直线连接(straight)时,连线的圆角大小,设置为0代表没有圆角,仅支持logicalStructure、mindMap、verticalTimeline三种结构
|
||||
lineRadius: 5,
|
||||
// 连线尾部是否显示标记,目前只支持箭头
|
||||
showLineMarker: false,
|
||||
// 概要连线的粗细
|
||||
generalizationLineWidth: 1,
|
||||
// 概要连线的颜色
|
||||
generalizationLineColor: '#549688',
|
||||
// 概要曲线距节点的距离
|
||||
generalizationLineMargin: 0,
|
||||
// 概要节点距节点的距离
|
||||
generalizationNodeMargin: 20,
|
||||
// 关联线默认状态的粗细
|
||||
associativeLineWidth: 2,
|
||||
// 关联线默认状态的颜色
|
||||
associativeLineColor: 'rgb(51, 51, 51)',
|
||||
// 关联线激活状态的粗细
|
||||
associativeLineActiveWidth: 8,
|
||||
// 关联线激活状态的颜色
|
||||
associativeLineActiveColor: 'rgba(2, 167, 240, 1)',
|
||||
// 关联线文字颜色
|
||||
associativeLineTextColor: 'rgb(51, 51, 51)',
|
||||
// 关联线文字大小
|
||||
associativeLineTextFontSize: 14,
|
||||
// 关联线文字行高
|
||||
associativeLineTextLineHeight: 1.2,
|
||||
// 关联线文字字体
|
||||
associativeLineTextFontFamily: '微软雅黑, Microsoft YaHei',
|
||||
// 背景颜色
|
||||
backgroundColor: '#fafafa',
|
||||
// 背景图片
|
||||
backgroundImage: 'none',
|
||||
// 背景重复
|
||||
backgroundRepeat: 'no-repeat',
|
||||
// 设置背景图像的起始位置
|
||||
backgroundPosition: 'center center',
|
||||
// 设置背景图片大小
|
||||
backgroundSize: 'cover',
|
||||
// 节点使用只有底边横线的样式,仅logicalStructure、mindMap、catalogOrganization、organizationStructure四种结构支持。
|
||||
nodeUseLineStyle: false,
|
||||
// 根节点样式
|
||||
root: {
|
||||
// 形状
|
||||
shape: 'rectangle',
|
||||
// 背景颜色
|
||||
fillColor: '#549688',
|
||||
fontFamily: '微软雅黑, Microsoft YaHei',
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
fontStyle: 'normal',
|
||||
lineHeight: 1.5,
|
||||
borderColor: 'transparent',
|
||||
borderWidth: 0,
|
||||
borderDasharray: 'none',
|
||||
borderRadius: 5,
|
||||
textDecoration: 'none',
|
||||
// 是否使用渐变背景,如果设为true,则会忽略fillColor配置
|
||||
gradientStyle: false,
|
||||
// 如果gradientStyle为true,那么可以通过这两个字段来定义渐变的起止颜色
|
||||
startColor: '#549688',
|
||||
endColor: '#fff'
|
||||
},
|
||||
// 二级节点样式
|
||||
second: {
|
||||
shape: 'rectangle',
|
||||
// 外边距
|
||||
marginX: 100,
|
||||
marginY: 40,
|
||||
fillColor: '#fff',
|
||||
fontFamily: '微软雅黑, Microsoft YaHei',
|
||||
color: '#565656',
|
||||
fontSize: 16,
|
||||
fontWeight: 'noraml',
|
||||
fontStyle: 'normal',
|
||||
lineHeight: 1.5,
|
||||
borderColor: '#549688',
|
||||
borderWidth: 1,
|
||||
borderDasharray: 'none',
|
||||
borderRadius: 5,
|
||||
textDecoration: 'none',
|
||||
gradientStyle: false,
|
||||
startColor: '#549688',
|
||||
endColor: '#fff'
|
||||
},
|
||||
// 三级及以下节点样式
|
||||
node: {
|
||||
shape: 'rectangle',
|
||||
marginX: 50,
|
||||
marginY: 0,
|
||||
fillColor: 'transparent',
|
||||
fontFamily: '微软雅黑, Microsoft YaHei',
|
||||
color: '#6a6d6c',
|
||||
fontSize: 14,
|
||||
fontWeight: 'noraml',
|
||||
fontStyle: 'normal',
|
||||
lineHeight: 1.5,
|
||||
borderColor: 'transparent',
|
||||
borderWidth: 0,
|
||||
borderRadius: 5,
|
||||
borderDasharray: 'none',
|
||||
textDecoration: 'none',
|
||||
gradientStyle: false,
|
||||
startColor: '#549688',
|
||||
endColor: '#fff'
|
||||
},
|
||||
// 概要节点样式
|
||||
generalization: {
|
||||
shape: 'rectangle',
|
||||
marginX: 100,
|
||||
marginY: 40,
|
||||
fillColor: '#fff',
|
||||
fontFamily: '微软雅黑, Microsoft YaHei',
|
||||
color: '#565656',
|
||||
fontSize: 16,
|
||||
fontWeight: 'noraml',
|
||||
fontStyle: 'normal',
|
||||
lineHeight: 1.5,
|
||||
borderColor: '#549688',
|
||||
borderWidth: 1,
|
||||
borderDasharray: 'none',
|
||||
borderRadius: 5,
|
||||
textDecoration: 'none',
|
||||
gradientStyle: false,
|
||||
startColor: '#549688',
|
||||
endColor: '#fff'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 使用和切换主题
|
||||
|
||||
`simple-mind-map`内置了很多主题,可以通过如下方式获取到所有的内置主题列表:
|
||||
@@ -31,6 +191,31 @@ mindMap.setTheme('classic')
|
||||
const theme = mindMap.getTheme()
|
||||
```
|
||||
|
||||
## 修改主题的部分配置
|
||||
|
||||
要修改主题的部分配置,可以在实例化时通过`themeConfig`选项设置:
|
||||
|
||||
```js
|
||||
new MindMap({
|
||||
themeConfig: {
|
||||
paddingX: 20,
|
||||
// ...
|
||||
}
|
||||
})
|
||||
```
|
||||
具体的主题属性可以参考前面小节,最终渲染时,`themeConfig`配置会和当前主题配置进行合并。
|
||||
|
||||
如果实例化后想动态设置,可以使用`setThemeConfig`方法:
|
||||
|
||||
```js
|
||||
mindMap.setThemeConfig({
|
||||
paddingX: 20,
|
||||
// ...
|
||||
})
|
||||
```
|
||||
|
||||
注意,你传入的这个对象会替换掉配置中的`themeConfig`原有的值。
|
||||
|
||||
## 定义新主题
|
||||
|
||||
除了可以使用内置的主题外,你也可以自定义新主题:
|
||||
|
||||
@@ -1,6 +1,161 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>主题</h1>
|
||||
<h2>主题配置属性一览</h2>
|
||||
<p>此处的配置可能未及时更新,完整的主题配置可以参考:<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js">default.js</a>。</p>
|
||||
<p>如果某个属性的值你不知道如何传,可以去在线demo中设置一下,然后导出json或smm文件查看对应的值。也可以参考demo项目中的配置<a href="https://github.com/wanglin2/mind-map/blob/main/web/src/config/zh.js">zh.js</a>。</p>
|
||||
<pre class="hljs"><code>{
|
||||
<span class="hljs-comment">// 节点内边距</span>
|
||||
<span class="hljs-attr">paddingX</span>: <span class="hljs-number">15</span>,
|
||||
<span class="hljs-attr">paddingY</span>: <span class="hljs-number">5</span>,
|
||||
<span class="hljs-comment">// 图片显示的最大宽度</span>
|
||||
<span class="hljs-attr">imgMaxWidth</span>: <span class="hljs-number">100</span>,
|
||||
<span class="hljs-comment">// 图片显示的最大高度</span>
|
||||
<span class="hljs-attr">imgMaxHeight</span>: <span class="hljs-number">100</span>,
|
||||
<span class="hljs-comment">// icon的大小</span>
|
||||
<span class="hljs-attr">iconSize</span>: <span class="hljs-number">20</span>,
|
||||
<span class="hljs-comment">// 连线的粗细</span>
|
||||
<span class="hljs-attr">lineWidth</span>: <span class="hljs-number">1</span>,
|
||||
<span class="hljs-comment">// 连线的颜色</span>
|
||||
<span class="hljs-attr">lineColor</span>: <span class="hljs-string">'#549688'</span>,
|
||||
<span class="hljs-comment">// 连线样式</span>
|
||||
<span class="hljs-attr">lineDasharray</span>: <span class="hljs-string">'none'</span>,
|
||||
<span class="hljs-comment">// 连线风格,支持三种</span>
|
||||
<span class="hljs-comment">// 1.曲线(curve)。仅logicalStructure、mindMap、verticalTimeline三种结构支持。</span>
|
||||
<span class="hljs-comment">// 2.直线(straight)。</span>
|
||||
<span class="hljs-comment">// 3.直连(direct)。仅logicalStructure、mindMap、organizationStructure、verticalTimeline四种结构支持。</span>
|
||||
<span class="hljs-attr">lineStyle</span>: <span class="hljs-string">'straight'</span>,
|
||||
<span class="hljs-comment">// 曲线连接时,根节点和其他节点的连接线样式保持统一,默认根节点为 ( 型,其他节点为 { 型,设为true后,都为 { 型。仅logicalStructure、mindMap两种结构支持。</span>
|
||||
<span class="hljs-attr">rootLineKeepSameInCurve</span>: <span class="hljs-literal">true</span>,
|
||||
<span class="hljs-comment">// 直线连接(straight)时,连线的圆角大小,设置为0代表没有圆角,仅支持logicalStructure、mindMap、verticalTimeline三种结构</span>
|
||||
<span class="hljs-attr">lineRadius</span>: <span class="hljs-number">5</span>,
|
||||
<span class="hljs-comment">// 连线尾部是否显示标记,目前只支持箭头</span>
|
||||
<span class="hljs-attr">showLineMarker</span>: <span class="hljs-literal">false</span>,
|
||||
<span class="hljs-comment">// 概要连线的粗细</span>
|
||||
<span class="hljs-attr">generalizationLineWidth</span>: <span class="hljs-number">1</span>,
|
||||
<span class="hljs-comment">// 概要连线的颜色</span>
|
||||
<span class="hljs-attr">generalizationLineColor</span>: <span class="hljs-string">'#549688'</span>,
|
||||
<span class="hljs-comment">// 概要曲线距节点的距离</span>
|
||||
<span class="hljs-attr">generalizationLineMargin</span>: <span class="hljs-number">0</span>,
|
||||
<span class="hljs-comment">// 概要节点距节点的距离</span>
|
||||
<span class="hljs-attr">generalizationNodeMargin</span>: <span class="hljs-number">20</span>,
|
||||
<span class="hljs-comment">// 关联线默认状态的粗细</span>
|
||||
<span class="hljs-attr">associativeLineWidth</span>: <span class="hljs-number">2</span>,
|
||||
<span class="hljs-comment">// 关联线默认状态的颜色</span>
|
||||
<span class="hljs-attr">associativeLineColor</span>: <span class="hljs-string">'rgb(51, 51, 51)'</span>,
|
||||
<span class="hljs-comment">// 关联线激活状态的粗细</span>
|
||||
<span class="hljs-attr">associativeLineActiveWidth</span>: <span class="hljs-number">8</span>,
|
||||
<span class="hljs-comment">// 关联线激活状态的颜色</span>
|
||||
<span class="hljs-attr">associativeLineActiveColor</span>: <span class="hljs-string">'rgba(2, 167, 240, 1)'</span>,
|
||||
<span class="hljs-comment">// 关联线文字颜色</span>
|
||||
<span class="hljs-attr">associativeLineTextColor</span>: <span class="hljs-string">'rgb(51, 51, 51)'</span>,
|
||||
<span class="hljs-comment">// 关联线文字大小</span>
|
||||
<span class="hljs-attr">associativeLineTextFontSize</span>: <span class="hljs-number">14</span>,
|
||||
<span class="hljs-comment">// 关联线文字行高</span>
|
||||
<span class="hljs-attr">associativeLineTextLineHeight</span>: <span class="hljs-number">1.2</span>,
|
||||
<span class="hljs-comment">// 关联线文字字体</span>
|
||||
<span class="hljs-attr">associativeLineTextFontFamily</span>: <span class="hljs-string">'微软雅黑, Microsoft YaHei'</span>,
|
||||
<span class="hljs-comment">// 背景颜色</span>
|
||||
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">'#fafafa'</span>,
|
||||
<span class="hljs-comment">// 背景图片</span>
|
||||
<span class="hljs-attr">backgroundImage</span>: <span class="hljs-string">'none'</span>,
|
||||
<span class="hljs-comment">// 背景重复</span>
|
||||
<span class="hljs-attr">backgroundRepeat</span>: <span class="hljs-string">'no-repeat'</span>,
|
||||
<span class="hljs-comment">// 设置背景图像的起始位置</span>
|
||||
<span class="hljs-attr">backgroundPosition</span>: <span class="hljs-string">'center center'</span>,
|
||||
<span class="hljs-comment">// 设置背景图片大小</span>
|
||||
<span class="hljs-attr">backgroundSize</span>: <span class="hljs-string">'cover'</span>,
|
||||
<span class="hljs-comment">// 节点使用只有底边横线的样式,仅logicalStructure、mindMap、catalogOrganization、organizationStructure四种结构支持。</span>
|
||||
<span class="hljs-attr">nodeUseLineStyle</span>: <span class="hljs-literal">false</span>,
|
||||
<span class="hljs-comment">// 根节点样式</span>
|
||||
<span class="hljs-attr">root</span>: {
|
||||
<span class="hljs-comment">// 形状</span>
|
||||
<span class="hljs-attr">shape</span>: <span class="hljs-string">'rectangle'</span>,
|
||||
<span class="hljs-comment">// 背景颜色</span>
|
||||
<span class="hljs-attr">fillColor</span>: <span class="hljs-string">'#549688'</span>,
|
||||
<span class="hljs-attr">fontFamily</span>: <span class="hljs-string">'微软雅黑, Microsoft YaHei'</span>,
|
||||
<span class="hljs-attr">color</span>: <span class="hljs-string">'#fff'</span>,
|
||||
<span class="hljs-attr">fontSize</span>: <span class="hljs-number">16</span>,
|
||||
<span class="hljs-attr">fontWeight</span>: <span class="hljs-string">'bold'</span>,
|
||||
<span class="hljs-attr">fontStyle</span>: <span class="hljs-string">'normal'</span>,
|
||||
<span class="hljs-attr">lineHeight</span>: <span class="hljs-number">1.5</span>,
|
||||
<span class="hljs-attr">borderColor</span>: <span class="hljs-string">'transparent'</span>,
|
||||
<span class="hljs-attr">borderWidth</span>: <span class="hljs-number">0</span>,
|
||||
<span class="hljs-attr">borderDasharray</span>: <span class="hljs-string">'none'</span>,
|
||||
<span class="hljs-attr">borderRadius</span>: <span class="hljs-number">5</span>,
|
||||
<span class="hljs-attr">textDecoration</span>: <span class="hljs-string">'none'</span>,
|
||||
<span class="hljs-comment">// 是否使用渐变背景,如果设为true,则会忽略fillColor配置</span>
|
||||
<span class="hljs-attr">gradientStyle</span>: <span class="hljs-literal">false</span>,
|
||||
<span class="hljs-comment">// 如果gradientStyle为true,那么可以通过这两个字段来定义渐变的起止颜色</span>
|
||||
<span class="hljs-attr">startColor</span>: <span class="hljs-string">'#549688'</span>,
|
||||
<span class="hljs-attr">endColor</span>: <span class="hljs-string">'#fff'</span>
|
||||
},
|
||||
<span class="hljs-comment">// 二级节点样式</span>
|
||||
<span class="hljs-attr">second</span>: {
|
||||
<span class="hljs-attr">shape</span>: <span class="hljs-string">'rectangle'</span>,
|
||||
<span class="hljs-comment">// 外边距</span>
|
||||
<span class="hljs-attr">marginX</span>: <span class="hljs-number">100</span>,
|
||||
<span class="hljs-attr">marginY</span>: <span class="hljs-number">40</span>,
|
||||
<span class="hljs-attr">fillColor</span>: <span class="hljs-string">'#fff'</span>,
|
||||
<span class="hljs-attr">fontFamily</span>: <span class="hljs-string">'微软雅黑, Microsoft YaHei'</span>,
|
||||
<span class="hljs-attr">color</span>: <span class="hljs-string">'#565656'</span>,
|
||||
<span class="hljs-attr">fontSize</span>: <span class="hljs-number">16</span>,
|
||||
<span class="hljs-attr">fontWeight</span>: <span class="hljs-string">'noraml'</span>,
|
||||
<span class="hljs-attr">fontStyle</span>: <span class="hljs-string">'normal'</span>,
|
||||
<span class="hljs-attr">lineHeight</span>: <span class="hljs-number">1.5</span>,
|
||||
<span class="hljs-attr">borderColor</span>: <span class="hljs-string">'#549688'</span>,
|
||||
<span class="hljs-attr">borderWidth</span>: <span class="hljs-number">1</span>,
|
||||
<span class="hljs-attr">borderDasharray</span>: <span class="hljs-string">'none'</span>,
|
||||
<span class="hljs-attr">borderRadius</span>: <span class="hljs-number">5</span>,
|
||||
<span class="hljs-attr">textDecoration</span>: <span class="hljs-string">'none'</span>,
|
||||
<span class="hljs-attr">gradientStyle</span>: <span class="hljs-literal">false</span>,
|
||||
<span class="hljs-attr">startColor</span>: <span class="hljs-string">'#549688'</span>,
|
||||
<span class="hljs-attr">endColor</span>: <span class="hljs-string">'#fff'</span>
|
||||
},
|
||||
<span class="hljs-comment">// 三级及以下节点样式</span>
|
||||
<span class="hljs-attr">node</span>: {
|
||||
<span class="hljs-attr">shape</span>: <span class="hljs-string">'rectangle'</span>,
|
||||
<span class="hljs-attr">marginX</span>: <span class="hljs-number">50</span>,
|
||||
<span class="hljs-attr">marginY</span>: <span class="hljs-number">0</span>,
|
||||
<span class="hljs-attr">fillColor</span>: <span class="hljs-string">'transparent'</span>,
|
||||
<span class="hljs-attr">fontFamily</span>: <span class="hljs-string">'微软雅黑, Microsoft YaHei'</span>,
|
||||
<span class="hljs-attr">color</span>: <span class="hljs-string">'#6a6d6c'</span>,
|
||||
<span class="hljs-attr">fontSize</span>: <span class="hljs-number">14</span>,
|
||||
<span class="hljs-attr">fontWeight</span>: <span class="hljs-string">'noraml'</span>,
|
||||
<span class="hljs-attr">fontStyle</span>: <span class="hljs-string">'normal'</span>,
|
||||
<span class="hljs-attr">lineHeight</span>: <span class="hljs-number">1.5</span>,
|
||||
<span class="hljs-attr">borderColor</span>: <span class="hljs-string">'transparent'</span>,
|
||||
<span class="hljs-attr">borderWidth</span>: <span class="hljs-number">0</span>,
|
||||
<span class="hljs-attr">borderRadius</span>: <span class="hljs-number">5</span>,
|
||||
<span class="hljs-attr">borderDasharray</span>: <span class="hljs-string">'none'</span>,
|
||||
<span class="hljs-attr">textDecoration</span>: <span class="hljs-string">'none'</span>,
|
||||
<span class="hljs-attr">gradientStyle</span>: <span class="hljs-literal">false</span>,
|
||||
<span class="hljs-attr">startColor</span>: <span class="hljs-string">'#549688'</span>,
|
||||
<span class="hljs-attr">endColor</span>: <span class="hljs-string">'#fff'</span>
|
||||
},
|
||||
<span class="hljs-comment">// 概要节点样式</span>
|
||||
<span class="hljs-attr">generalization</span>: {
|
||||
<span class="hljs-attr">shape</span>: <span class="hljs-string">'rectangle'</span>,
|
||||
<span class="hljs-attr">marginX</span>: <span class="hljs-number">100</span>,
|
||||
<span class="hljs-attr">marginY</span>: <span class="hljs-number">40</span>,
|
||||
<span class="hljs-attr">fillColor</span>: <span class="hljs-string">'#fff'</span>,
|
||||
<span class="hljs-attr">fontFamily</span>: <span class="hljs-string">'微软雅黑, Microsoft YaHei'</span>,
|
||||
<span class="hljs-attr">color</span>: <span class="hljs-string">'#565656'</span>,
|
||||
<span class="hljs-attr">fontSize</span>: <span class="hljs-number">16</span>,
|
||||
<span class="hljs-attr">fontWeight</span>: <span class="hljs-string">'noraml'</span>,
|
||||
<span class="hljs-attr">fontStyle</span>: <span class="hljs-string">'normal'</span>,
|
||||
<span class="hljs-attr">lineHeight</span>: <span class="hljs-number">1.5</span>,
|
||||
<span class="hljs-attr">borderColor</span>: <span class="hljs-string">'#549688'</span>,
|
||||
<span class="hljs-attr">borderWidth</span>: <span class="hljs-number">1</span>,
|
||||
<span class="hljs-attr">borderDasharray</span>: <span class="hljs-string">'none'</span>,
|
||||
<span class="hljs-attr">borderRadius</span>: <span class="hljs-number">5</span>,
|
||||
<span class="hljs-attr">textDecoration</span>: <span class="hljs-string">'none'</span>,
|
||||
<span class="hljs-attr">gradientStyle</span>: <span class="hljs-literal">false</span>,
|
||||
<span class="hljs-attr">startColor</span>: <span class="hljs-string">'#549688'</span>,
|
||||
<span class="hljs-attr">endColor</span>: <span class="hljs-string">'#fff'</span>
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
<h2>使用和切换主题</h2>
|
||||
<p><code>simple-mind-map</code>内置了很多主题,可以通过如下方式获取到所有的内置主题列表:</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">import</span> { themeList } <span class="hljs-keyword">from</span> <span class="hljs-string">'simple-mind-map/src/constants/constant'</span>
|
||||
@@ -20,6 +175,23 @@
|
||||
<p>如果要获取当前使用的主题名称可以使用:</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">const</span> theme = mindMap.getTheme()
|
||||
</code></pre>
|
||||
<h2>修改主题的部分配置</h2>
|
||||
<p>要修改主题的部分配置,可以在实例化时通过<code>themeConfig</code>选项设置:</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">new</span> MindMap({
|
||||
<span class="hljs-attr">themeConfig</span>: {
|
||||
<span class="hljs-attr">paddingX</span>: <span class="hljs-number">20</span>,
|
||||
<span class="hljs-comment">// ...</span>
|
||||
}
|
||||
})
|
||||
</code></pre>
|
||||
<p>具体的主题属性可以参考前面小节,最终渲染时,<code>themeConfig</code>配置会和当前主题配置进行合并。</p>
|
||||
<p>如果实例化后想动态设置,可以使用<code>setThemeConfig</code>方法:</p>
|
||||
<pre class="hljs"><code>mindMap.setThemeConfig({
|
||||
<span class="hljs-attr">paddingX</span>: <span class="hljs-number">20</span>,
|
||||
<span class="hljs-comment">// ...</span>
|
||||
})
|
||||
</code></pre>
|
||||
<p>注意,你传入的这个对象会替换掉配置中的<code>themeConfig</code>原有的值。</p>
|
||||
<h2>定义新主题</h2>
|
||||
<p>除了可以使用内置的主题外,你也可以自定义新主题:</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">'simple-mind-map'</span>
|
||||
|
||||
@@ -270,4 +270,12 @@
|
||||
<img src="../../../../assets/avatar/default.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>易空小易</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 style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
|
||||
<img src="../../../../assets/avatar/default.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>建明</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -8,17 +8,17 @@
|
||||
</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">节点支持拖拽(拖拽移动、自由调整)、多种节点形状,支持使用 DDM 完全自定义节点内容</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">支持鼠标按键拖动选择和Ctrl+左键两种多选节点方式</label></li>
|
||||
<li><input type="checkbox" id="checkbox7" checked="true" /><label for="checkbox7">支持导出为</label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>,支持从<code>json</code>、<code>xmind</code>、<code>markdown</code>导入</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></li>
|
||||
<li><input type="checkbox" id="checkbox32" checked="true" /><label for="checkbox32">插件化架构,除核心功能外,其他功能作为插件提供,按需使用,减小打包体积</label></li>
|
||||
<li><input type="checkbox" id="checkbox33" checked="true" /><label for="checkbox33">支持逻辑结构图、思维导图、组织结构图、目录组织图、时间轴(横向、竖向)、鱼骨图等结构</label></li>
|
||||
<li><input type="checkbox" id="checkbox34" checked="true" /><label for="checkbox34">内置多种主题,允许高度自定义样式,支持注册新主题</label></li>
|
||||
<li><input type="checkbox" id="checkbox35" checked="true" /><label for="checkbox35">节点内容支持文本(普通文本、富文本)、图片、图标、超链接、备注、标签、概要、数学公式</label></li>
|
||||
<li><input type="checkbox" id="checkbox36" checked="true" /><label for="checkbox36">节点支持拖拽(拖拽移动、自由调整)、多种节点形状,支持使用 DDM 完全自定义节点内容</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">支持鼠标按键拖动选择和Ctrl+左键两种多选节点方式</label></li>
|
||||
<li><input type="checkbox" id="checkbox39" checked="true" /><label for="checkbox39">支持导出为</label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>,支持从<code>json</code>、<code>xmind</code>、<code>markdown</code>导入</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>
|
||||
</ul>
|
||||
<h2>仓库目录介绍</h2>
|
||||
<p>1.<code>simple-mind-map</code></p>
|
||||
@@ -26,11 +26,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="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="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="checkbox43" checked="true" /><label for="checkbox43">工具栏,支持插入节点、删除节点;编辑节点图片、图标、超链接、备注、标签、概要</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></li>
|
||||
<li><input type="checkbox" id="checkbox47" checked="true" /><label for="checkbox47">底部栏,支持节点数量、字数统计;支持切换编辑和只读模式;支持放大缩小;支持全屏切换;支持小地图</label></li>
|
||||
</ul>
|
||||
<p>提供文档页面服务。</p>
|
||||
<p>3.<code>dist</code></p>
|
||||
@@ -227,6 +227,14 @@
|
||||
<img src="../../../../assets/avatar/default.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>易空小易</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 style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
|
||||
<img src="../../../../assets/avatar/default.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
|
||||
<p>建明</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -86,7 +86,7 @@ MindMap.usePlugin(RichText, opt?)
|
||||
|
||||
聚焦。
|
||||
|
||||
### formatText(config = {})
|
||||
### formatText(config = {}, clear = false, pure = false)
|
||||
|
||||
- `config`:对象,键为样式属性,值为样式值,完整的配置如下:
|
||||
|
||||
@@ -102,7 +102,11 @@ MindMap.usePlugin(RichText, opt?)
|
||||
}
|
||||
```
|
||||
|
||||
格式化当前选中的文本。
|
||||
- `clear`:是否是清除样式
|
||||
|
||||
- `pure`:v0.9.4+,如果设为true,那么仅会格式化文本样式,不会同步到节点的数据中
|
||||
|
||||
格式化当前选中的文本。会将样式设置同步到节点的数据中。
|
||||
|
||||
### formatRangeText(range, config = {})
|
||||
|
||||
|
||||
@@ -71,7 +71,7 @@ MindMap.usePlugin(RichText, opt?)
|
||||
<p>v0.4.7+</p>
|
||||
</blockquote>
|
||||
<p>聚焦。</p>
|
||||
<h3>formatText(config = {})</h3>
|
||||
<h3>formatText(config = {}, clear = false, pure = false)</h3>
|
||||
<ul>
|
||||
<li><code>config</code>:对象,键为样式属性,值为样式值,完整的配置如下:</li>
|
||||
</ul>
|
||||
@@ -85,7 +85,15 @@ MindMap.usePlugin(RichText, opt?)
|
||||
<span class="hljs-attr">color</span>: <span class="hljs-string">'#333'</span> <span class="hljs-comment">// 颜色</span>
|
||||
}
|
||||
</code></pre>
|
||||
<p>格式化当前选中的文本。</p>
|
||||
<ul>
|
||||
<li>
|
||||
<p><code>clear</code>:是否是清除样式</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><code>pure</code>:v0.9.4+,如果设为true,那么仅会格式化文本样式,不会同步到节点的数据中</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>格式化当前选中的文本。会将样式设置同步到节点的数据中。</p>
|
||||
<h3>formatRangeText(range, config = {})</h3>
|
||||
<ul>
|
||||
<li><code>range</code>:<code>Quill</code>的范围对象,格式如下:</li>
|
||||
|
||||
@@ -148,7 +148,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="rowItem">
|
||||
<div class="rowItem" v-if="lineStyleListShow.length > 1">
|
||||
<span class="name">{{ $t('baseStyle.style') }}</span>
|
||||
<el-select
|
||||
size="mini"
|
||||
@@ -162,7 +162,7 @@
|
||||
"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in lineStyleList"
|
||||
v-for="item in lineStyleListShow"
|
||||
:key="item.value"
|
||||
:label="item.name"
|
||||
:value="item.value"
|
||||
@@ -176,7 +176,12 @@
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="rowItem" v-if="style.lineStyle === 'curve'">
|
||||
<div
|
||||
class="rowItem"
|
||||
v-if="
|
||||
style.lineStyle === 'curve' && showRootLineKeepSameInCurveLayouts
|
||||
"
|
||||
>
|
||||
<span class="name">{{ $t('baseStyle.rootStyle') }}</span>
|
||||
<el-select
|
||||
size="mini"
|
||||
@@ -198,6 +203,28 @@
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="rowItem" v-if="showLineRadius">
|
||||
<span class="name">{{ $t('baseStyle.lineRadius') }}</span>
|
||||
<el-select
|
||||
size="mini"
|
||||
style="width: 80px"
|
||||
v-model="style.lineRadius"
|
||||
placeholder=""
|
||||
@change="
|
||||
value => {
|
||||
update('lineRadius', value)
|
||||
}
|
||||
"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in [0, 2, 5, 7, 10, 12, 15]"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="rowItem">
|
||||
@@ -426,20 +453,22 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 节点边框风格 -->
|
||||
<div class="title noTop">{{ $t('baseStyle.nodeBorderType') }}</div>
|
||||
<div class="row">
|
||||
<div class="rowItem">
|
||||
<el-checkbox
|
||||
v-model="style.nodeUseLineStyle"
|
||||
@change="
|
||||
value => {
|
||||
update('nodeUseLineStyle', value)
|
||||
}
|
||||
"
|
||||
>{{ $t('baseStyle.nodeUseLineStyle') }}</el-checkbox
|
||||
>
|
||||
<template v-if="showNodeUseLineStyle">
|
||||
<div class="title noTop">{{ $t('baseStyle.nodeBorderType') }}</div>
|
||||
<div class="row">
|
||||
<div class="rowItem">
|
||||
<el-checkbox
|
||||
v-model="style.nodeUseLineStyle"
|
||||
@change="
|
||||
value => {
|
||||
update('nodeUseLineStyle', value)
|
||||
}
|
||||
"
|
||||
>{{ $t('baseStyle.nodeUseLineStyle') }}</el-checkbox
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 内边距 -->
|
||||
<div class="title noTop">{{ $t('baseStyle.nodePadding') }}</div>
|
||||
<div class="row">
|
||||
@@ -837,6 +866,12 @@ import {
|
||||
import ImgUpload from '@/components/ImgUpload'
|
||||
import { storeConfig } from '@/api'
|
||||
import { mapState, mapMutations } from 'vuex'
|
||||
import {
|
||||
supportLineStyleLayoutsMap,
|
||||
supportLineRadiusLayouts,
|
||||
supportNodeUseLineStyleLayouts,
|
||||
supportRootLineKeepSameInCurveLayouts
|
||||
} from '@/config/constant'
|
||||
|
||||
/**
|
||||
* @Author: 王林
|
||||
@@ -872,6 +907,7 @@ export default {
|
||||
lineStyle: '',
|
||||
showLineMarker: '',
|
||||
rootLineKeepSameInCurve: '',
|
||||
lineRadius: 0,
|
||||
generalizationLineWidth: '',
|
||||
generalizationLineColor: '',
|
||||
associativeLineColor: '',
|
||||
@@ -917,12 +953,12 @@ export default {
|
||||
enableNodeRichText: true,
|
||||
localConfigs: {
|
||||
isShowScrollbar: false
|
||||
}
|
||||
},
|
||||
currentLayout: '' // 当前结构
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['activeSidebar', 'localConfig', 'isDark']),
|
||||
|
||||
lineStyleList() {
|
||||
return lineStyleList[this.$i18n.locale] || lineStyleList.zh
|
||||
},
|
||||
@@ -948,6 +984,32 @@ export default {
|
||||
},
|
||||
lineStyleMap() {
|
||||
return lineStyleMap[this.$i18n.locale] || lineStyleMap.zh
|
||||
},
|
||||
showNodeUseLineStyle() {
|
||||
return supportNodeUseLineStyleLayouts.includes(this.currentLayout)
|
||||
},
|
||||
showLineRadius() {
|
||||
return (
|
||||
this.style.lineStyle === 'straight' &&
|
||||
supportLineRadiusLayouts.includes(this.currentLayout)
|
||||
)
|
||||
},
|
||||
lineStyleListShow() {
|
||||
const res = []
|
||||
this.lineStyleList.forEach(item => {
|
||||
const list = supportLineStyleLayoutsMap[item.value]
|
||||
if (list) {
|
||||
if (list.includes(this.currentLayout)) {
|
||||
res.push(item)
|
||||
}
|
||||
} else {
|
||||
res.push(item)
|
||||
}
|
||||
})
|
||||
return res
|
||||
},
|
||||
showRootLineKeepSameInCurveLayouts() {
|
||||
return supportRootLineKeepSameInCurveLayouts.includes(this.currentLayout)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@@ -957,9 +1019,21 @@ export default {
|
||||
this.initStyle()
|
||||
this.initConfig()
|
||||
this.initWatermark()
|
||||
this.currentLayout = this.mindMap.getLayout()
|
||||
} else {
|
||||
this.$refs.sidebar.show = false
|
||||
}
|
||||
},
|
||||
lineStyleListShow: {
|
||||
deep: true,
|
||||
handler() {
|
||||
const has = this.lineStyleListShow.find(item => {
|
||||
return item.value === this.style.lineStyle
|
||||
})
|
||||
if (!has) {
|
||||
this.style.lineStyle = this.lineStyleListShow[0].value
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@@ -991,6 +1065,7 @@ export default {
|
||||
'lineStyle',
|
||||
'showLineMarker',
|
||||
'rootLineKeepSameInCurve',
|
||||
'lineRadius',
|
||||
'lineColor',
|
||||
'generalizationLineWidth',
|
||||
'generalizationLineColor',
|
||||
|
||||
@@ -36,6 +36,7 @@ import xmind from 'simple-mind-map/src/parse/xmind.js'
|
||||
import markdown from 'simple-mind-map/src/parse/markdown.js'
|
||||
import { fileToBuffer } from '@/utils'
|
||||
import { read, utils } from 'xlsx'
|
||||
import { mapMutations } from 'vuex'
|
||||
|
||||
/**
|
||||
* @Author: 王林
|
||||
@@ -66,6 +67,8 @@ export default {
|
||||
this.$bus.$off('handle_file_url', this.handleFileURL)
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['setActiveSidebar']),
|
||||
|
||||
handleShowImport() {
|
||||
this.dialogVisible = true
|
||||
},
|
||||
@@ -153,6 +156,7 @@ export default {
|
||||
this.handleMd(file)
|
||||
}
|
||||
this.cancel()
|
||||
this.setActiveSidebar(null)
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user