mirror of
https://github.com/wanglin2/mind-map.git
synced 2026-02-21 16:37:06 +08:00
Compare commits
11 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
4a5980f993 | ||
|
|
fa8ad5c0d0 | ||
|
|
a37fe66e60 | ||
|
|
af622793d8 | ||
|
|
679330663a | ||
|
|
32e027529f | ||
|
|
5be2f561e7 | ||
|
|
3da8070820 | ||
|
|
12c89e6d37 | ||
|
|
fdb292d9b1 | ||
|
|
1083138d8c |
File diff suppressed because one or more lines are too long
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-2d0ab10b.js
vendored
2
dist/js/chunk-2d0ab10b.js
vendored
File diff suppressed because one or more lines are too long
2
dist/js/chunk-2d0c191e.js
vendored
2
dist/js/chunk-2d0c191e.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,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?ce6307fb704926e49985" rel="stylesheet"><link href="dist/css/app.css?ce6307fb704926e49985" 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?e76cdbdcf61c14ff4fc9" rel="stylesheet"><link href="dist/css/app.css?e76cdbdcf61c14ff4fc9" 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?ce6307fb704926e49985"></script><script src="dist/js/app.js?ce6307fb704926e49985"></script></body></html>
|
||||
}</script><script src="dist/js/chunk-vendors.js?e76cdbdcf61c14ff4fc9"></script><script src="dist/js/app.js?e76cdbdcf61c14ff4fc9"></script></body></html>
|
||||
@@ -28,7 +28,7 @@ MindMap.iconList = icons.nodeIconList
|
||||
MindMap.constants = constants
|
||||
MindMap.themes = themes
|
||||
MindMap.defaultTheme = defaultTheme
|
||||
MindMap.version = '0.9.6'
|
||||
MindMap.version = '0.9.7'
|
||||
|
||||
MindMap.usePlugin(MiniMap)
|
||||
.usePlugin(Watermark)
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "simple-mind-map",
|
||||
"version": "0.9.6",
|
||||
"version": "0.9.7",
|
||||
"description": "一个简单的web在线思维导图",
|
||||
"authors": [
|
||||
{
|
||||
|
||||
@@ -28,7 +28,9 @@ import {
|
||||
parseAddGeneralizationNodeList,
|
||||
checkNodeListIsEqual,
|
||||
createSmmFormatData,
|
||||
checkSmmFormatData
|
||||
checkSmmFormatData,
|
||||
checkIsNodeStyleDataKey,
|
||||
removeRichTextStyes
|
||||
} from '../../utils'
|
||||
import { shapeList } from './node/Shape'
|
||||
import { lineStyleProps } from '../../themes/default'
|
||||
@@ -271,6 +273,15 @@ class Render {
|
||||
// 定位节点
|
||||
this.goTargetNode = this.goTargetNode.bind(this)
|
||||
this.mindMap.command.add('GO_TARGET_NODE', this.goTargetNode)
|
||||
// 一键去除节点自定义样式
|
||||
this.removeCustomStyles = this.removeCustomStyles.bind(this)
|
||||
this.mindMap.command.add('REMOVE_CUSTOM_STYLES', this.removeCustomStyles)
|
||||
// 一键去除所有节点自定义样式
|
||||
this.removeAllNodeCustomStyles = this.removeAllNodeCustomStyles.bind(this)
|
||||
this.mindMap.command.add(
|
||||
'REMOVE_ALL_NODE_CUSTOM_STYLES',
|
||||
this.removeAllNodeCustomStyles
|
||||
)
|
||||
}
|
||||
|
||||
// 注册快捷键
|
||||
@@ -905,11 +916,71 @@ class Render {
|
||||
const index = getNodeIndexInNodeList(node, parent.children)
|
||||
const parentIndex = getNodeIndexInNodeList(parent, grandpa.children)
|
||||
// 节点数据
|
||||
this.checkNodeLayerChange(node, parent)
|
||||
parent.nodeData.children.splice(index, 1)
|
||||
grandpa.nodeData.children.splice(parentIndex + 1, 0, node.nodeData)
|
||||
this.mindMap.render()
|
||||
}
|
||||
|
||||
// 移除节点数据的自定义样式的内部方法
|
||||
_handleRemoveCustomStyles(nodeData) {
|
||||
let hasCustomStyles = false
|
||||
Object.keys(nodeData).forEach(key => {
|
||||
if (checkIsNodeStyleDataKey(key)) {
|
||||
hasCustomStyles = true
|
||||
delete nodeData[key]
|
||||
}
|
||||
})
|
||||
// 如果是富文本,那么还要处理富文本内容
|
||||
if (hasCustomStyles && this.mindMap.richText) {
|
||||
nodeData.resetRichText = true
|
||||
nodeData.text = removeRichTextStyes(nodeData.text)
|
||||
}
|
||||
return hasCustomStyles
|
||||
}
|
||||
|
||||
// 一键去除自定义样式
|
||||
removeCustomStyles(node) {
|
||||
node = node || this.activeNodeList[0]
|
||||
if (!node) {
|
||||
return
|
||||
}
|
||||
const hasCustomStyles = this._handleRemoveCustomStyles(node.getData())
|
||||
if (hasCustomStyles) {
|
||||
this.reRenderNodeCheckChange(node)
|
||||
}
|
||||
}
|
||||
|
||||
// 一键去除所有节点自定义样式
|
||||
removeAllNodeCustomStyles(appointNodes) {
|
||||
appointNodes = formatDataToArray(appointNodes)
|
||||
let hasCustomStyles = false
|
||||
// 指定了节点列表,那么遍历该节点列表
|
||||
if (appointNodes.length > 0) {
|
||||
appointNodes.forEach(node => {
|
||||
const _hasCustomStyles = this._handleRemoveCustomStyles(node.getData())
|
||||
if (_hasCustomStyles) hasCustomStyles = true
|
||||
})
|
||||
} else {
|
||||
// 否则遍历整棵树
|
||||
walk(this.renderTree, null, node => {
|
||||
const _hasCustomStyles = this._handleRemoveCustomStyles(node.data)
|
||||
if (_hasCustomStyles) hasCustomStyles = true
|
||||
// 不要忘记概要节点
|
||||
if (node.data.generalization && node.data.generalization.length > 0) {
|
||||
node.data.generalization.forEach(generalizationData => {
|
||||
const _hasCustomStyles =
|
||||
this._handleRemoveCustomStyles(generalizationData)
|
||||
if (_hasCustomStyles) hasCustomStyles = true
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
if (hasCustomStyles) {
|
||||
this.mindMap.reRender()
|
||||
}
|
||||
}
|
||||
|
||||
// 复制节点
|
||||
copy() {
|
||||
this.beingCopyData = this.copyNode()
|
||||
@@ -1110,11 +1181,12 @@ class Render {
|
||||
}
|
||||
|
||||
// 如果是富文本模式,那么某些层级变化需要更新样式
|
||||
checkNodeLayerChange(node, toNode) {
|
||||
checkNodeLayerChange(node, toNode, toNodeIsParent = false) {
|
||||
if (this.mindMap.richText) {
|
||||
const toIndex = toNodeIsParent ? toNode.layerIndex + 1 : toNode.layerIndex
|
||||
let nodeLayerChanged =
|
||||
(node.layerIndex === 1 && toNode.layerIndex !== 1) ||
|
||||
(node.layerIndex !== 1 && toNode.layerIndex === 1)
|
||||
(node.layerIndex === 1 && toIndex !== 1) ||
|
||||
(node.layerIndex !== 1 && toIndex === 1)
|
||||
if (nodeLayerChanged) {
|
||||
node.setData({
|
||||
resetRichText: true
|
||||
@@ -1292,7 +1364,7 @@ class Render {
|
||||
return !item.isRoot
|
||||
})
|
||||
nodeList.forEach(item => {
|
||||
this.checkNodeLayerChange(item, toNode)
|
||||
this.checkNodeLayerChange(item, toNode, true)
|
||||
this.removeNodeFromActiveList(item)
|
||||
removeFromParentNodeData(item)
|
||||
toNode.nodeData.children.push(item.nodeData)
|
||||
@@ -1647,6 +1719,11 @@ class Render {
|
||||
// 设置节点数据,并判断是否渲染
|
||||
setNodeDataRender(node, data, notRender = false) {
|
||||
this.mindMap.execCommand('SET_NODE_DATA', node, data)
|
||||
this.reRenderNodeCheckChange(node, notRender)
|
||||
}
|
||||
|
||||
// 重新节点某个节点,判断节点大小是否发生了改变,是的话触发重绘
|
||||
reRenderNodeCheckChange(node, notRender) {
|
||||
let changed = node.reRender()
|
||||
if (changed) {
|
||||
if (!notRender) this.mindMap.render()
|
||||
|
||||
@@ -326,10 +326,10 @@ class RichText {
|
||||
nodes && nodes.length > 0 ? nodes : this.mindMap.renderer.activeNodeList
|
||||
list.forEach(node => {
|
||||
this.mindMap.execCommand('SET_NODE_TEXT', node, html, true)
|
||||
if (node.isGeneralization) {
|
||||
// if (node.isGeneralization) {
|
||||
// 概要节点
|
||||
node.generalizationBelongNode.updateGeneralization()
|
||||
}
|
||||
// node.generalizationBelongNode.updateGeneralization()
|
||||
// }
|
||||
this.mindMap.render()
|
||||
})
|
||||
this.mindMap.emit('hide_text_edit', this.textEditNode, list)
|
||||
|
||||
@@ -688,6 +688,52 @@ export const textToNodeRichTextWithWrap = html => {
|
||||
.join('')
|
||||
}
|
||||
|
||||
// 去除富文本内容的样式,包括样式标签,比如strong、em、s等
|
||||
// 但要保留数学公式内容
|
||||
let removeRichTextStyesEl = null
|
||||
export const removeRichTextStyes = html => {
|
||||
if (!removeRichTextStyesEl) {
|
||||
removeRichTextStyesEl = document.createElement('div')
|
||||
}
|
||||
removeRichTextStyesEl.innerHTML = html
|
||||
// 首先用占位文本替换掉所有的公式
|
||||
const formulaList = removeRichTextStyesEl.querySelectorAll('.ql-formula')
|
||||
Array.from(formulaList).forEach(el => {
|
||||
const placeholder = document.createTextNode('$smmformula$')
|
||||
el.parentNode.replaceChild(placeholder, el)
|
||||
})
|
||||
// 然后遍历每行节点,去掉内部的所有标签,转为文本
|
||||
const childNodes = removeRichTextStyesEl.childNodes
|
||||
let list = []
|
||||
for (let i = 0; i < childNodes.length; i++) {
|
||||
const node = childNodes[i]
|
||||
if (node.nodeType === 1) {
|
||||
// 元素节点
|
||||
list.push(node.textContent)
|
||||
} else if (node.nodeType === 3) {
|
||||
// 文本节点
|
||||
list.push(node.nodeValue)
|
||||
}
|
||||
}
|
||||
// 拼接文本
|
||||
html = list
|
||||
.map(item => {
|
||||
return `<p><span>${htmlEscape(item)}</span></p>`
|
||||
})
|
||||
.join('')
|
||||
// 将公式添加回去
|
||||
if (formulaList.length > 0) {
|
||||
html = html.replace(/\$smmformula\$/g, '<span class="smmformula"></span>')
|
||||
removeRichTextStyesEl.innerHTML = html
|
||||
const els = removeRichTextStyesEl.querySelectorAll('.smmformula')
|
||||
Array.from(els).forEach((el, index) => {
|
||||
el.parentNode.replaceChild(formulaList[index], el)
|
||||
})
|
||||
html = removeRichTextStyesEl.innerHTML
|
||||
}
|
||||
return html
|
||||
}
|
||||
|
||||
// 判断是否是移动端环境
|
||||
export const isMobile = () => {
|
||||
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
|
||||
|
||||
@@ -94,7 +94,9 @@ export default {
|
||||
fitCanvas: 'Fit canvas',
|
||||
removeImage: 'Remove image',
|
||||
removeHyperlink: 'Remove hyperlink',
|
||||
removeNote: 'Remove note'
|
||||
removeNote: 'Remove note',
|
||||
removeCustomStyles: 'Remove custom styles',
|
||||
removeAllNodeCustomStyles: 'Remove all node custom styles'
|
||||
},
|
||||
count: {
|
||||
words: 'Words',
|
||||
|
||||
@@ -94,7 +94,9 @@ export default {
|
||||
fitCanvas: '适应画布',
|
||||
removeImage: '移除图片',
|
||||
removeHyperlink: '移除超链接',
|
||||
removeNote: '移除备注'
|
||||
removeNote: '移除备注',
|
||||
removeCustomStyles: '一键去除自定义样式',
|
||||
removeAllNodeCustomStyles: '一键去除所有节点自定义样式'
|
||||
},
|
||||
count: {
|
||||
words: '字数',
|
||||
|
||||
@@ -1,5 +1,21 @@
|
||||
# Changelog
|
||||
|
||||
## 0.9.7
|
||||
|
||||
Fix:
|
||||
|
||||
> 1.Fix the issue where the style is not updated when dragging nodes below level 2 to the root node to become level 2 nodes; Fix the issue where the style is not updated when moving nodes with the command to move up one level;
|
||||
>
|
||||
> 2.Fix the issue of losing focus when activating summary nodes and then setting text styles for them;
|
||||
|
||||
New:
|
||||
|
||||
> 1.Add two commands to remove custom styles from nodes;
|
||||
|
||||
Demo:
|
||||
|
||||
> 1.Add a right-click menu button to remove custom styles from nodes.
|
||||
|
||||
## 0.9.6
|
||||
|
||||
Fix:
|
||||
@@ -32,7 +48,7 @@ Demo:
|
||||
>
|
||||
> 4.Add two new themes;
|
||||
>
|
||||
> 5.Fix the issue of text wrapping not taking effect in the outline and displaying the br tag;
|
||||
> 5.Fix the issue of text wrapping not taking effect in the outline and displaying the br tag;
|
||||
|
||||
## 0.9.5
|
||||
|
||||
|
||||
@@ -1,10 +1,27 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Changelog</h1>
|
||||
<h2>0.9.7</h2>
|
||||
<p>Fix:</p>
|
||||
<blockquote>
|
||||
<p>1.Fix the issue where the style is not updated when dragging nodes below level 2 to the root node to become level 2 nodes; Fix the issue where the style is not updated when moving nodes with the command to move up one level;</p>
|
||||
<p>2.Fix the issue of losing focus when activating summary nodes and then setting text styles for them;</p>
|
||||
</blockquote>
|
||||
<p>New:</p>
|
||||
<blockquote>
|
||||
<p>1.Add two commands to remove custom styles from nodes;</p>
|
||||
</blockquote>
|
||||
<p>Demo:</p>
|
||||
<blockquote>
|
||||
<p>1.Add a right-click menu button to remove custom styles from nodes.</p>
|
||||
</blockquote>
|
||||
<h2>0.9.6</h2>
|
||||
<p>Fix:</p>
|
||||
<blockquote>
|
||||
<p>1.Fix the issue where the style of the collapsed nodes remains unchanged when switching themes;</p>
|
||||
<p>2.Fix the issue of losing the new text style when switching themes for text wrapping;</p>
|
||||
<p>3.Fix the issue where the style of the newline text remains unchanged when switching themes;</p>
|
||||
<p>4.Fixed the issue of adding mathematical formulas to nodes and not changing the text style when switching themes;</p>
|
||||
</blockquote>
|
||||
<p>New:</p>
|
||||
<blockquote>
|
||||
@@ -18,6 +35,8 @@
|
||||
<p>1.The outline supports pressing Shift+Tab to move nodes up one level;</p>
|
||||
<p>2.Support setting the position of node arrow display;</p>
|
||||
<p>3.Support setting the starting position of root node connections;</p>
|
||||
<p>4.Add two new themes;</p>
|
||||
<p>5.Fix the issue of text wrapping not taking effect in the outline and displaying the br tag;</p>
|
||||
</blockquote>
|
||||
<h2>0.9.5</h2>
|
||||
<p>Fix:</p>
|
||||
|
||||
@@ -540,6 +540,8 @@ redo. All commands are as follows:
|
||||
| INSERT_PARENT_NODE(v0.8.0+) | Insert a parent node into the specified node, with the operation node being the currently active node or the specified node | openEdit(Activate the newly inserted node and enter editing mode, default to 'true'`)、 appointNodes(Optional, specify the node to insert into the parent node, and specify that multiple nodes can pass an array)、 appointData(Optional, specify the data for the newly created node, such as {text: 'xxx', ...}, Detailed structure can be referenced [exampleData.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js)) |
|
||||
| REMOVE_CURRENT_NODE(v0.8.0+) | Delete only the current node, operate on the currently active node or specified node | appointNodes(Optional, specify the nodes to be deleted, and multiple nodes can be passed as an array) |
|
||||
| MOVE_UP_ONE_LEVEL(v0.9.6+) | Move the specified node up one level | node(Optional, specify the node to move up the hierarchy, if not passed, it will be the first node in the current active node) |
|
||||
| REMOVE_CUSTOM_STYLES(v0.9.7+) | One click removal of custom styles for a node | node(Optional, specify the node to clear the custom style, otherwise it will be the first one in the current active node) |
|
||||
| REMOVE_ALL_NODE_CUSTOM_STYLES(v0.9.7+) | One click removal of multiple nodes or custom styles for all nodes | appointNodes(Optional, node instance array, specifying multiple nodes to remove custom styles from. If not passed, the custom styles of all nodes on the current canvas will be removed) |
|
||||
|
||||
### setData(data)
|
||||
|
||||
|
||||
@@ -1395,6 +1395,16 @@ redo. All commands are as follows:</p>
|
||||
<td>Move the specified node up one level</td>
|
||||
<td>node(Optional, specify the node to move up the hierarchy, if not passed, it will be the first node in the current active node)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>REMOVE_CUSTOM_STYLES(v0.9.7+)</td>
|
||||
<td>One click removal of custom styles for a node</td>
|
||||
<td>node(Optional, specify the node to clear the custom style, otherwise it will be the first one in the current active node)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>REMOVE_ALL_NODE_CUSTOM_STYLES(v0.9.7+)</td>
|
||||
<td>One click removal of multiple nodes or custom styles for all nodes</td>
|
||||
<td>appointNodes(Optional, node instance array, specifying multiple nodes to remove custom styles from. If not passed, the custom styles of all nodes on the current canvas will be removed)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>setData(data)</h3>
|
||||
|
||||
@@ -389,6 +389,19 @@ and copying the <code>data</code> of the data object, example:</p>
|
||||
<p>v0.9.3+</p>
|
||||
</blockquote>
|
||||
<p>Convert flat objects into a tree structure. Reverse operation of the transformTreeDataToObject method.</p>
|
||||
<h4>removeHtmlNodeByClass(html, selector)</h4>
|
||||
<blockquote>
|
||||
<p>v0.9.6+</p>
|
||||
</blockquote>
|
||||
<ul>
|
||||
<li>
|
||||
<p><code>html</code>:html string</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><code>selector</code>:Node selectors, such as class selectors and id selectors</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>Remove the node of the specified selector from the specified HTML string, and then return the processed HTML string.</p>
|
||||
<h2>Simulate CSS background in Canvas</h2>
|
||||
<p>Import:</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">import</span> drawBackgroundImageToCanvas <span class="hljs-keyword">from</span> <span class="hljs-string">'simple-mind-map/src/utils/simulateCSSBackgroundInCanvas'</span>
|
||||
|
||||
@@ -1,5 +1,21 @@
|
||||
# Changelog
|
||||
|
||||
## 0.9.7
|
||||
|
||||
修复:
|
||||
|
||||
> 1.修复二级以下节点拖拽到根节点变成二级节点时样式没有更新的问题;修复上移一个层级命令移动节点时样式没有更新的问题;
|
||||
>
|
||||
> 2.修复激活概要节点,然后给其设置文本样式时概要节点会失去焦点的问题;
|
||||
|
||||
新增:
|
||||
|
||||
> 1.新增两个去除节点自定义样式的命令;
|
||||
|
||||
Demo:
|
||||
|
||||
> 1.新增去除节点自定义样式的右键菜单按钮。
|
||||
|
||||
## 0.9.6
|
||||
|
||||
修复:
|
||||
@@ -20,7 +36,7 @@
|
||||
>
|
||||
> 3.Mac 双指触摸事件移动画布增加一点灵敏度;
|
||||
>
|
||||
> 4.新增 MOVE_UP_ONE_LEVEL 命令,用于将节点上移一个层级;
|
||||
> 4.新增 MOVE_UP_ONE_LEVEL 命令,用于将节点上移一个层级;
|
||||
|
||||
Demo:
|
||||
|
||||
|
||||
@@ -1,23 +1,42 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Changelog</h1>
|
||||
<h2>0.9.7</h2>
|
||||
<p>修复:</p>
|
||||
<blockquote>
|
||||
<p>1.修复二级以下节点拖拽到根节点变成二级节点时样式没有更新的问题;修复上移一个层级命令移动节点时样式没有更新的问题;</p>
|
||||
<p>2.修复激活概要节点,然后给其设置文本样式时概要节点会失去焦点的问题;</p>
|
||||
</blockquote>
|
||||
<p>新增:</p>
|
||||
<blockquote>
|
||||
<p>1.新增两个去除节点自定义样式的命令;</p>
|
||||
</blockquote>
|
||||
<p>Demo:</p>
|
||||
<blockquote>
|
||||
<p>1.新增去除节点自定义样式的右键菜单按钮。</p>
|
||||
</blockquote>
|
||||
<h2>0.9.6</h2>
|
||||
<p>修复:</p>
|
||||
<blockquote>
|
||||
<p>1.修复切换主题时,被收起的节点样式没有改变的问题;</p>
|
||||
<p>2.修复切换主题后进行文本换行时,新换行的文本样式会丢失的问题;</p>
|
||||
<p>3.修复切换主题时,换行的文本样式没有改变的问题;</p>
|
||||
<p>4.修复添加了数学公式的节点,切换主题时文本样式没有改变的问题;</p>
|
||||
</blockquote>
|
||||
<p>新增:</p>
|
||||
<blockquote>
|
||||
<p>1.主题新增字段,用于设置节点连线箭头的显示位置,头部或者尾部;</p>
|
||||
<p>2.主题新增字段,用于设置曲线连接时,根节点连线的起始位置;</p>
|
||||
<p>3.Mac 双指触摸事件移动画布增加一点灵敏度;</p>
|
||||
<p>4.新增 MOVE_UP_ONE_LEVEL 命令,用于将节点上移一个层级;</p>
|
||||
<p>4.新增 MOVE_UP_ONE_LEVEL 命令,用于将节点上移一个层级;</p>
|
||||
</blockquote>
|
||||
<p>Demo:</p>
|
||||
<blockquote>
|
||||
<p>1.大纲支持按 Shift+Tab 键将节点上移一个层级;</p>
|
||||
<p>2.支持设置节点箭头显示的位置;</p>
|
||||
<p>3.支持设置根节点连线的起始位置;</p>
|
||||
<p>4.新增两个主题;</p>
|
||||
<p>5.修复大纲中文本换行不生效,显示br标签的问题;</p>
|
||||
</blockquote>
|
||||
<h2>0.9.5</h2>
|
||||
<p>修复:</p>
|
||||
|
||||
@@ -534,6 +534,8 @@ mindMap.updateConfig({
|
||||
| INSERT_PARENT_NODE(v0.8.0+) | 给指定的节点插入父节点,操作节点为当前激活的节点或指定节点 | openEdit(是否激活新插入的节点并进入编辑模式,默认为`true`)、 appointNodes(可选,指定要插入父节点的节点,指定多个节点可以传一个数组)、 appointData(可选,指定新创建节点的数据,比如{text: 'xxx', ...},详细结构可以参考[exampleData.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js)) |
|
||||
| REMOVE_CURRENT_NODE(v0.8.0+) | 仅删除当前节点,操作节点为当前激活的节点或指定节点 | appointNodes(可选,指定要删除的节点,指定多个节点可以传一个数组) |
|
||||
| MOVE_UP_ONE_LEVEL(v0.9.6+) | 将指定节点上移一个层级 | node(可选,指定要上移层级的节点,不传则为当前激活节点中的第一个) |
|
||||
| REMOVE_CUSTOM_STYLES(v0.9.7+) | 一键去除某个节点的自定义样式 | node(可选,指定要清除自定义样式的节点,不传则为当前激活节点中的第一个) |
|
||||
| REMOVE_ALL_NODE_CUSTOM_STYLES(v0.9.7+) | 一键去除多个节点或所有节点的自定义样式 | appointNodes(可选,节点实例数组,指定要去除自定义样式的多个节点,如果不传则会去除当前画布所有节点的自定义样式) |
|
||||
|
||||
### setData(data)
|
||||
|
||||
|
||||
@@ -1296,6 +1296,16 @@ mindMap.setTheme(<span class="hljs-string">'主题名称'</span>)
|
||||
<td>将指定节点上移一个层级</td>
|
||||
<td>node(可选,指定要上移层级的节点,不传则为当前激活节点中的第一个)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>REMOVE_CUSTOM_STYLES(v0.9.7+)</td>
|
||||
<td>一键去除某个节点的自定义样式</td>
|
||||
<td>node(可选,指定要清除自定义样式的节点,不传则为当前激活节点中的第一个)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>REMOVE_ALL_NODE_CUSTOM_STYLES(v0.9.7+)</td>
|
||||
<td>一键去除多个节点或所有节点的自定义样式</td>
|
||||
<td>appointNodes(可选,节点实例数组,指定要去除自定义样式的多个节点,如果不传则会去除当前画布所有节点的自定义样式)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>setData(data)</h3>
|
||||
|
||||
@@ -25,7 +25,15 @@
|
||||
<p><code>layerIndex</code>:节点层级</p>
|
||||
<p><code>index</code>:节点在同级节点里的索引</p>
|
||||
<p>示例:</p>
|
||||
<pre class="hljs"><code>walk(tree, <span class="hljs-literal">null</span>, <span class="hljs-function">() =></span> {}, <span class="hljs-function">() =></span> {}, <span class="hljs-literal">false</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>)
|
||||
<pre class="hljs"><code>walk(
|
||||
tree,
|
||||
<span class="hljs-literal">null</span>,
|
||||
<span class="hljs-function">() =></span> {},
|
||||
<span class="hljs-function">() =></span> {},
|
||||
<span class="hljs-literal">false</span>,
|
||||
<span class="hljs-number">0</span>,
|
||||
<span class="hljs-number">0</span>
|
||||
)
|
||||
</code></pre>
|
||||
<h4>bfsWalk(root, callback)</h4>
|
||||
<p>广度优先遍历树</p>
|
||||
@@ -50,7 +58,7 @@
|
||||
<p><code>removeActiveState</code>:<code>Boolean</code>,默认为<code>false</code>,是否移除节点的激活状态</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><code>removeId</code>:v0.7.3-fix.1+,是否移除节点数据中的uid,默认为<code>true</code></p>
|
||||
<p><code>removeId</code>:v0.7.3-fix.1+,是否移除节点数据中的 uid,默认为<code>true</code></p>
|
||||
</li>
|
||||
</ul>
|
||||
<blockquote>
|
||||
@@ -62,7 +70,7 @@
|
||||
<pre class="hljs"><code>copyNodeTree({}, node)
|
||||
</code></pre>
|
||||
<h4>imgToDataUrl(src)</h4>
|
||||
<p>图片转成dataURL</p>
|
||||
<p>图片转成 dataURL</p>
|
||||
<h4>downloadFile(file, fileName)</h4>
|
||||
<p>下载文件</p>
|
||||
<h4>throttle(fn, time = 300, ctx)</h4>
|
||||
@@ -89,10 +97,12 @@
|
||||
<p>v0.3.4+</p>
|
||||
</blockquote>
|
||||
<p>测量文本的宽高,返回值:</p>
|
||||
<pre class="hljs"><code>{ width, height }
|
||||
<pre class="hljs"><code>{
|
||||
width, height
|
||||
}
|
||||
</code></pre>
|
||||
<h4>getTextFromHtml(html)</h4>
|
||||
<p>提取html字符串里的纯文本内容。</p>
|
||||
<p>提取 html 字符串里的纯文本内容。</p>
|
||||
<h4>readBlob(blob)</h4>
|
||||
<blockquote>
|
||||
<p>v0.5.9+</p>
|
||||
@@ -104,8 +114,8 @@
|
||||
</blockquote>
|
||||
<p>解析<code>data:url</code>数据,返回:</p>
|
||||
<pre class="hljs"><code>{
|
||||
type,<span class="hljs-comment">// 数据的文件类型</span>
|
||||
base64<span class="hljs-comment">// base64数据</span>
|
||||
type, <span class="hljs-comment">// 数据的文件类型</span>
|
||||
base64 <span class="hljs-comment">// base64数据</span>
|
||||
}
|
||||
</code></pre>
|
||||
<h4>getImageSize(src)</h4>
|
||||
@@ -113,12 +123,11 @@
|
||||
<p>v0.6.6+</p>
|
||||
</blockquote>
|
||||
<ul>
|
||||
<li><code>src</code>:图片的url</li>
|
||||
<li><code>src</code>:图片的 url</li>
|
||||
</ul>
|
||||
<p>获取图片的大小。返回:</p>
|
||||
<pre class="hljs"><code>{
|
||||
width,
|
||||
height
|
||||
width, height
|
||||
}
|
||||
</code></pre>
|
||||
<h4>loadImage(imgFile)</h4>
|
||||
@@ -126,12 +135,12 @@
|
||||
<p>v0.6.8+</p>
|
||||
</blockquote>
|
||||
<ul>
|
||||
<li><code>imgFile</code>:图片类型的File对象</li>
|
||||
<li><code>imgFile</code>:图片类型的 File 对象</li>
|
||||
</ul>
|
||||
<p>加载图片,返回:</p>
|
||||
<pre class="hljs"><code>{
|
||||
url,<span class="hljs-comment">// DataUrl</span>
|
||||
size<span class="hljs-comment">// { width, height } 图片宽高</span>
|
||||
url, <span class="hljs-comment">// DataUrl</span>
|
||||
size <span class="hljs-comment">// { width, height } 图片宽高</span>
|
||||
}
|
||||
</code></pre>
|
||||
<h4>getType(data)</h4>
|
||||
@@ -143,12 +152,12 @@
|
||||
<blockquote>
|
||||
<p>v0.6.10+</p>
|
||||
</blockquote>
|
||||
<p>移除html字符串中节点的内联样式。</p>
|
||||
<p>移除 html 字符串中节点的内联样式。</p>
|
||||
<h4>addHtmlStyle(html, tag, style)</h4>
|
||||
<blockquote>
|
||||
<p>v0.6.10+</p>
|
||||
</blockquote>
|
||||
<p>给html标签中指定的标签添加内联样式。</p>
|
||||
<p>给 html 标签中指定的标签添加内联样式。</p>
|
||||
<h4>checkIsRichText(str)</h4>
|
||||
<blockquote>
|
||||
<p>v0.6.10+</p>
|
||||
@@ -198,7 +207,7 @@
|
||||
<p>v0.7.2+</p>
|
||||
</blockquote>
|
||||
<ul>
|
||||
<li><code>el</code>:DOM节点,可聚焦的元素,一般为输入框元素。</li>
|
||||
<li><code>el</code>:DOM 节点,可聚焦的元素,一般为输入框元素。</li>
|
||||
</ul>
|
||||
<p>聚焦指定输入框。</p>
|
||||
<h4>selectAllInput(el)</h4>
|
||||
@@ -206,7 +215,7 @@
|
||||
<p>v0.7.2+</p>
|
||||
</blockquote>
|
||||
<ul>
|
||||
<li><code>el</code>:DOM节点,可聚焦的元素,一般为输入框元素。</li>
|
||||
<li><code>el</code>:DOM 节点,可聚焦的元素,一般为输入框元素。</li>
|
||||
</ul>
|
||||
<p>聚焦并全选指定输入框。</p>
|
||||
<h4>addDataToAppointNodes(appointNodes, data = {})</h4>
|
||||
@@ -234,7 +243,7 @@
|
||||
<p><code>createNewId</code>:v0.7.3-fix.1+,<code>Boolean</code>,默认为<code>false</code>,即如果节点不存在<code>uid</code>的话,会创建新的<code>uid</code>。如果传<code>true</code>,那么无论节点数据原来是否存在<code>uid</code>,都会创建新的<code>uid</code></p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>给指定的节点列表树数据添加uid(如果uid不存在的话),会修改原数据。</p>
|
||||
<p>给指定的节点列表树数据添加 uid(如果 uid 不存在的话),会修改原数据。</p>
|
||||
<h4>getNodeIndex(node)</h4>
|
||||
<blockquote>
|
||||
<p>v0.7.2+</p>
|
||||
@@ -314,8 +323,7 @@
|
||||
</blockquote>
|
||||
<p>从用户剪贴板中读取文字和图片,返回:</p>
|
||||
<pre class="hljs"><code>{
|
||||
text,
|
||||
img
|
||||
text, img
|
||||
}
|
||||
</code></pre>
|
||||
<h4>removeFromParentNodeData(node)</h4>
|
||||
@@ -333,9 +341,9 @@
|
||||
<p>v0.9.1+</p>
|
||||
</blockquote>
|
||||
<ul>
|
||||
<li><code>str</code>:html字符串</li>
|
||||
<li><code>str</code>:html 字符串</li>
|
||||
</ul>
|
||||
<p>给html自闭合标签添加闭合状态,<code><div><img src="xxx"></div></code> -> <code><div><img src="xxx" /></div></code>。</p>
|
||||
<p>给 html 自闭合标签添加闭合状态,<code><div><img src="xxx"></div></code> -> <code><div><img src="xxx" /></div></code>。</p>
|
||||
<h4>checkNodeListIsEqual(list1, list2)</h4>
|
||||
<blockquote>
|
||||
<p>v0.9.1+</p>
|
||||
@@ -383,8 +391,21 @@
|
||||
<blockquote>
|
||||
<p>v0.9.3+</p>
|
||||
</blockquote>
|
||||
<p>将平级对象转树结构。transformTreeDataToObject方法的反向操作。</p>
|
||||
<h2>在canvas中模拟css的背景属性</h2>
|
||||
<p>将平级对象转树结构。transformTreeDataToObject 方法的反向操作。</p>
|
||||
<h4>removeHtmlNodeByClass(html, selector)</h4>
|
||||
<blockquote>
|
||||
<p>v0.9.6+</p>
|
||||
</blockquote>
|
||||
<ul>
|
||||
<li>
|
||||
<p><code>html</code>:html 字符串</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><code>selector</code>:节点选择器,比如类选择器,id 选择器</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>去除指定 html 字符串中指定选择器的节点,然后返回处理后的 html 字符串。</p>
|
||||
<h2>在 canvas 中模拟 css 的背景属性</h2>
|
||||
<p>引入:</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">import</span> drawBackgroundImageToCanvas <span class="hljs-keyword">from</span> <span class="hljs-string">'simple-mind-map/src/utils/simulateCSSBackgroundInCanvas'</span>
|
||||
</code></pre>
|
||||
@@ -395,19 +416,26 @@
|
||||
<span class="hljs-keyword">let</span> canvas = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">'canvas'</span>)
|
||||
canvas.width = width
|
||||
canvas.height = height
|
||||
drawBackgroundImageToCanvas(ctx, width, height, img, {
|
||||
<span class="hljs-attr">backgroundRepeat</span>: <span class="hljs-string">'repeat-y'</span>,
|
||||
<span class="hljs-attr">backgroundSize</span>: <span class="hljs-string">'60%'</span>,
|
||||
<span class="hljs-attr">backgroundPosition</span>: <span class="hljs-string">'center center'</span>
|
||||
}, <span class="hljs-function">(<span class="hljs-params">err</span>) =></span> {
|
||||
<span class="hljs-keyword">if</span> (err) {
|
||||
<span class="hljs-comment">// 失败</span>
|
||||
} <span class="hljs-keyword">else</span> {
|
||||
<span class="hljs-comment">// 成功</span>
|
||||
drawBackgroundImageToCanvas(
|
||||
ctx,
|
||||
width,
|
||||
height,
|
||||
img,
|
||||
{
|
||||
<span class="hljs-attr">backgroundRepeat</span>: <span class="hljs-string">'repeat-y'</span>,
|
||||
<span class="hljs-attr">backgroundSize</span>: <span class="hljs-string">'60%'</span>,
|
||||
<span class="hljs-attr">backgroundPosition</span>: <span class="hljs-string">'center center'</span>
|
||||
},
|
||||
<span class="hljs-function"><span class="hljs-params">err</span> =></span> {
|
||||
<span class="hljs-keyword">if</span> (err) {
|
||||
<span class="hljs-comment">// 失败</span>
|
||||
} <span class="hljs-keyword">else</span> {
|
||||
<span class="hljs-comment">// 成功</span>
|
||||
}
|
||||
}
|
||||
})
|
||||
)
|
||||
</code></pre>
|
||||
<h2>LRU缓存类</h2>
|
||||
<h2>LRU 缓存类</h2>
|
||||
<blockquote>
|
||||
<p>v0.5.10+</p>
|
||||
</blockquote>
|
||||
|
||||
@@ -88,6 +88,9 @@
|
||||
<div class="item" @click="exec('REMOVE_NOTE')" v-if="hasNote">
|
||||
<span class="name">{{ $t('contextmenu.removeNote') }}</span>
|
||||
</div>
|
||||
<div class="item" @click="exec('REMOVE_CUSTOM_STYLES')">
|
||||
<span class="name">{{ $t('contextmenu.removeCustomStyles') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="type === 'svg'">
|
||||
<div class="item" @click="exec('RETURN_CENTER')">
|
||||
@@ -125,6 +128,11 @@
|
||||
<span class="name">{{ $t('contextmenu.zenMode') }}</span>
|
||||
{{ isZenMode ? '√' : '' }}
|
||||
</div>
|
||||
<div class="item" @click="exec('REMOVE_ALL_NODE_CUSTOM_STYLES')">
|
||||
<span class="name">{{
|
||||
$t('contextmenu.removeAllNodeCustomStyles')
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -149,15 +149,17 @@ export default {
|
||||
this.$confirm(this.$t('theme.coverTip'), this.$t('theme.tip'), {
|
||||
confirmButtonText: this.$t('theme.cover'),
|
||||
cancelButtonText: this.$t('theme.reserve'),
|
||||
type: 'warning'
|
||||
type: 'warning',
|
||||
distinguishCancelAndClose: true,
|
||||
callback: action => {
|
||||
if (action === 'confirm') {
|
||||
this.mindMap.setThemeConfig({}, true)
|
||||
this.changeTheme(theme, {})
|
||||
} else if (action === 'cancel') {
|
||||
this.changeTheme(theme, customThemeConfig)
|
||||
}
|
||||
}
|
||||
})
|
||||
.then(() => {
|
||||
this.mindMap.setThemeConfig({}, true)
|
||||
this.changeTheme(theme, {})
|
||||
})
|
||||
.catch(() => {
|
||||
this.changeTheme(theme, customThemeConfig)
|
||||
})
|
||||
} else {
|
||||
this.changeTheme(theme, customThemeConfig)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user