Compare commits

...

13 Commits
0.9.3 ... 0.9.4

Author SHA1 Message Date
街角小林
88db910c68 打包0.9.4 2024-01-12 11:12:43 +08:00
街角小林
7a8b83b9b4 Doc: update 2024-01-12 11:05:13 +08:00
街角小林
74b1a082fe Demo:1.基础样式中一些仅支持部分结构的配置根据当前结构进行显示和隐藏。2.导入文件时自动隐藏侧边栏。3.新增连线圆角的配置 2024-01-12 10:23:20 +08:00
街角小林
ac930daa11 Feat:主题配置增加lineRadius属性配置直线连接时的圆角大小 2024-01-12 09:04:33 +08:00
街角小林
836a335d75 Fix 2024-01-11 18:02:30 +08:00
街角小林
b5cfca848a Fix:修复删除含有子节点的节点时,data_change_detail事件报错 2024-01-11 17:55:10 +08:00
街角小林
cd7936a50b Fix:修复节点富文本编辑时清除样式后文字样式丢失并且切换主题也不会恢复的问题 2024-01-11 10:05:56 +08:00
街角小林
ecc15ea572 Demo:大纲里去掉节点的公式内容 2024-01-11 09:10:57 +08:00
街角小林
7c6c6341e8 Doc: update 2024-01-11 08:50:54 +08:00
wanglin2
d7bd57ffac Fix:修复mac上useLeftKeySelectionRightKeyDrag为true 时无法按住ctrl键多选节点的问题 2024-01-10 21:49:30 +08:00
街角小林
69264e3a9d Fix:修复被主题定义了加粗的节点切换主题后文本样式丢失的问题 2024-01-09 16:08:28 +08:00
街角小林
d8fdc37684 Fix:修复渐变色背景的节点富文本编辑时编辑框没有应用渐变的问题 2024-01-05 15:28:55 +08:00
街角小林
b52497b3f6 Fix:修复一些情况下,节点显示时的文本区域宽度和编辑时的宽度不一致导致的文本换行不一致的问题 2024-01-05 15:16:38 +08:00
56 changed files with 940 additions and 156 deletions

View File

@@ -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

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

2
dist/js/app.js vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

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

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-72f53a83.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -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>

View File

@@ -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)

View File

@@ -294,6 +294,7 @@ class MindMap {
if (!notRender) {
this.render(null, CONSTANTS.CHANGE_LAYOUT)
}
this.emit('layout_change', layout)
}
// 执行命令

View File

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

View File

@@ -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

View File

@@ -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
)
}
}
}

View File

@@ -165,6 +165,8 @@ class Event extends EventEmitter {
// 鼠标右键菜单事件
onContextmenu(e) {
e.preventDefault()
// Mac上按住ctrl键点击鼠标左键不知为何触发的是contextmenu事件
if (e.ctrlKey) return
this.emit('contextmenu', e)
}

View File

@@ -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
}

View File

@@ -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)

View File

@@ -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

View File

@@ -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)
})
}

View File

@@ -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)
})
}

View File

@@ -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)
})
}

View File

@@ -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)
}
// 格式化指定范围的文本

View File

@@ -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'
]

View File

@@ -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 {

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

View File

@@ -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'
]

View File

@@ -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',

View File

@@ -10,6 +10,7 @@ export default {
line: '连线',
width: '粗细',
style: '风格',
lineRadius: '圆角大小',
lineOfOutline: '概要的连线',
showArrow: '是否显示箭头',
nodePadding: '节点内边距',

View File

@@ -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

View File

@@ -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>

View File

@@ -421,6 +421,7 @@ Listen to an event. Event list:
| body_mousedownv0.9.2+ | Mousedown event of document.body | eevent object |
| body_click | Click event of document.body | eevent object |
| data_change_detailv0.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 | arrDetail data |
| layout_changev0.9.4+ | Triggered when modifying the structure, i.e. when the mindMap.setLayout() method is called | layoutNew layout |
### emit(event, ...args)

View File

@@ -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>arrDetail data</td>
</tr>
<tr>
<td>layout_changev0.9.4+</td>
<td>Triggered when modifying the structure, i.e. when the mindMap.setLayout() method is called</td>
<td>layoutNew layout</td>
</tr>
</tbody>
</table>
<h3>emit(event, ...args)</h3>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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 = {})

View File

@@ -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">&#x27;#333&#x27;</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>

View File

@@ -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
修复:

View File

@@ -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>

View File

@@ -418,6 +418,7 @@ mindMap.setTheme('主题名称')
| body_mousedownv0.9.2+ | document.body的鼠标按下事件 | e事件对象 |
| body_click | document.body的点击事件 | e事件对象 |
| data_change_detailv0.9.3+ | 渲染树数据变化的明细,会返回一个数组,每一项代表一个更新点,每一项都是一个对象,存在一个`type`属性,代表明细的类型,包含`create`(创建节点)、`update`(更新节点)、`delete`(删除节点),存在一个`data`属性,代表当前更新的节点数据,如果是`update`类型,还会存在一个`oldData`属性,保存了更新前该节点的数据 | arr明细数据 |
| layout_changev0.9.4+ | 修改结构时触发即调用了mindMap.setLayout()方法时触发 | layout新的结构 |
### emit(event, ...args)

View File

@@ -1022,6 +1022,11 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</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_changev0.9.4+</td>
<td>修改结构时触发即调用了mindMap.setLayout()方法时触发</td>
<td>layout新的结构</td>
</tr>
</tbody>
</table>
<h3>emit(event, ...args)</h3>

View File

@@ -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`原有的值。
## 定义新主题
除了可以使用内置的主题外,你也可以自定义新主题:

View File

@@ -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">&#x27;#549688&#x27;</span>,
<span class="hljs-comment">// 连线样式</span>
<span class="hljs-attr">lineDasharray</span>: <span class="hljs-string">&#x27;none&#x27;</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">&#x27;straight&#x27;</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">&#x27;#549688&#x27;</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">&#x27;rgb(51, 51, 51)&#x27;</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">&#x27;rgba(2, 167, 240, 1)&#x27;</span>,
<span class="hljs-comment">// 关联线文字颜色</span>
<span class="hljs-attr">associativeLineTextColor</span>: <span class="hljs-string">&#x27;rgb(51, 51, 51)&#x27;</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">&#x27;微软雅黑, Microsoft YaHei&#x27;</span>,
<span class="hljs-comment">// 背景颜色</span>
<span class="hljs-attr">backgroundColor</span>: <span class="hljs-string">&#x27;#fafafa&#x27;</span>,
<span class="hljs-comment">// 背景图片</span>
<span class="hljs-attr">backgroundImage</span>: <span class="hljs-string">&#x27;none&#x27;</span>,
<span class="hljs-comment">// 背景重复</span>
<span class="hljs-attr">backgroundRepeat</span>: <span class="hljs-string">&#x27;no-repeat&#x27;</span>,
<span class="hljs-comment">// 设置背景图像的起始位置</span>
<span class="hljs-attr">backgroundPosition</span>: <span class="hljs-string">&#x27;center center&#x27;</span>,
<span class="hljs-comment">// 设置背景图片大小</span>
<span class="hljs-attr">backgroundSize</span>: <span class="hljs-string">&#x27;cover&#x27;</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">&#x27;rectangle&#x27;</span>,
<span class="hljs-comment">// 背景颜色</span>
<span class="hljs-attr">fillColor</span>: <span class="hljs-string">&#x27;#549688&#x27;</span>,
<span class="hljs-attr">fontFamily</span>: <span class="hljs-string">&#x27;微软雅黑, Microsoft YaHei&#x27;</span>,
<span class="hljs-attr">color</span>: <span class="hljs-string">&#x27;#fff&#x27;</span>,
<span class="hljs-attr">fontSize</span>: <span class="hljs-number">16</span>,
<span class="hljs-attr">fontWeight</span>: <span class="hljs-string">&#x27;bold&#x27;</span>,
<span class="hljs-attr">fontStyle</span>: <span class="hljs-string">&#x27;normal&#x27;</span>,
<span class="hljs-attr">lineHeight</span>: <span class="hljs-number">1.5</span>,
<span class="hljs-attr">borderColor</span>: <span class="hljs-string">&#x27;transparent&#x27;</span>,
<span class="hljs-attr">borderWidth</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">borderDasharray</span>: <span class="hljs-string">&#x27;none&#x27;</span>,
<span class="hljs-attr">borderRadius</span>: <span class="hljs-number">5</span>,
<span class="hljs-attr">textDecoration</span>: <span class="hljs-string">&#x27;none&#x27;</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">&#x27;#549688&#x27;</span>,
<span class="hljs-attr">endColor</span>: <span class="hljs-string">&#x27;#fff&#x27;</span>
},
<span class="hljs-comment">// 二级节点样式</span>
<span class="hljs-attr">second</span>: {
<span class="hljs-attr">shape</span>: <span class="hljs-string">&#x27;rectangle&#x27;</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">&#x27;#fff&#x27;</span>,
<span class="hljs-attr">fontFamily</span>: <span class="hljs-string">&#x27;微软雅黑, Microsoft YaHei&#x27;</span>,
<span class="hljs-attr">color</span>: <span class="hljs-string">&#x27;#565656&#x27;</span>,
<span class="hljs-attr">fontSize</span>: <span class="hljs-number">16</span>,
<span class="hljs-attr">fontWeight</span>: <span class="hljs-string">&#x27;noraml&#x27;</span>,
<span class="hljs-attr">fontStyle</span>: <span class="hljs-string">&#x27;normal&#x27;</span>,
<span class="hljs-attr">lineHeight</span>: <span class="hljs-number">1.5</span>,
<span class="hljs-attr">borderColor</span>: <span class="hljs-string">&#x27;#549688&#x27;</span>,
<span class="hljs-attr">borderWidth</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">borderDasharray</span>: <span class="hljs-string">&#x27;none&#x27;</span>,
<span class="hljs-attr">borderRadius</span>: <span class="hljs-number">5</span>,
<span class="hljs-attr">textDecoration</span>: <span class="hljs-string">&#x27;none&#x27;</span>,
<span class="hljs-attr">gradientStyle</span>: <span class="hljs-literal">false</span>,
<span class="hljs-attr">startColor</span>: <span class="hljs-string">&#x27;#549688&#x27;</span>,
<span class="hljs-attr">endColor</span>: <span class="hljs-string">&#x27;#fff&#x27;</span>
},
<span class="hljs-comment">// 三级及以下节点样式</span>
<span class="hljs-attr">node</span>: {
<span class="hljs-attr">shape</span>: <span class="hljs-string">&#x27;rectangle&#x27;</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">&#x27;transparent&#x27;</span>,
<span class="hljs-attr">fontFamily</span>: <span class="hljs-string">&#x27;微软雅黑, Microsoft YaHei&#x27;</span>,
<span class="hljs-attr">color</span>: <span class="hljs-string">&#x27;#6a6d6c&#x27;</span>,
<span class="hljs-attr">fontSize</span>: <span class="hljs-number">14</span>,
<span class="hljs-attr">fontWeight</span>: <span class="hljs-string">&#x27;noraml&#x27;</span>,
<span class="hljs-attr">fontStyle</span>: <span class="hljs-string">&#x27;normal&#x27;</span>,
<span class="hljs-attr">lineHeight</span>: <span class="hljs-number">1.5</span>,
<span class="hljs-attr">borderColor</span>: <span class="hljs-string">&#x27;transparent&#x27;</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">&#x27;none&#x27;</span>,
<span class="hljs-attr">textDecoration</span>: <span class="hljs-string">&#x27;none&#x27;</span>,
<span class="hljs-attr">gradientStyle</span>: <span class="hljs-literal">false</span>,
<span class="hljs-attr">startColor</span>: <span class="hljs-string">&#x27;#549688&#x27;</span>,
<span class="hljs-attr">endColor</span>: <span class="hljs-string">&#x27;#fff&#x27;</span>
},
<span class="hljs-comment">// 概要节点样式</span>
<span class="hljs-attr">generalization</span>: {
<span class="hljs-attr">shape</span>: <span class="hljs-string">&#x27;rectangle&#x27;</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">&#x27;#fff&#x27;</span>,
<span class="hljs-attr">fontFamily</span>: <span class="hljs-string">&#x27;微软雅黑, Microsoft YaHei&#x27;</span>,
<span class="hljs-attr">color</span>: <span class="hljs-string">&#x27;#565656&#x27;</span>,
<span class="hljs-attr">fontSize</span>: <span class="hljs-number">16</span>,
<span class="hljs-attr">fontWeight</span>: <span class="hljs-string">&#x27;noraml&#x27;</span>,
<span class="hljs-attr">fontStyle</span>: <span class="hljs-string">&#x27;normal&#x27;</span>,
<span class="hljs-attr">lineHeight</span>: <span class="hljs-number">1.5</span>,
<span class="hljs-attr">borderColor</span>: <span class="hljs-string">&#x27;#549688&#x27;</span>,
<span class="hljs-attr">borderWidth</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">borderDasharray</span>: <span class="hljs-string">&#x27;none&#x27;</span>,
<span class="hljs-attr">borderRadius</span>: <span class="hljs-number">5</span>,
<span class="hljs-attr">textDecoration</span>: <span class="hljs-string">&#x27;none&#x27;</span>,
<span class="hljs-attr">gradientStyle</span>: <span class="hljs-literal">false</span>,
<span class="hljs-attr">startColor</span>: <span class="hljs-string">&#x27;#549688&#x27;</span>,
<span class="hljs-attr">endColor</span>: <span class="hljs-string">&#x27;#fff&#x27;</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">&#x27;simple-mind-map/src/constants/constant&#x27;</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">&#x27;simple-mind-map&#x27;</span>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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 = {})

View File

@@ -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">&#x27;#333&#x27;</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>

View File

@@ -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',

View File

@@ -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)
},
/**