Compare commits

..

11 Commits
0.9.6 ... 0.9.7

Author SHA1 Message Date
街角小林
4a5980f993 打包0.9.7 2024-02-02 17:08:03 +08:00
街角小林
fa8ad5c0d0 Doc: update 2024-02-02 17:02:36 +08:00
街角小林
a37fe66e60 Fix:修复激活概要节点,右侧设置文本样式,概要节点会失去焦点的问题 2024-01-31 18:10:22 +08:00
街角小林
af622793d8 Demo:优化主题设置弹窗 2024-01-31 17:50:28 +08:00
街角小林
679330663a Demo:新增去除节点自定义样式的右键菜单 2024-01-31 17:13:09 +08:00
街角小林
32e027529f Feat:新增两个去除节点自定义样式的命令 2024-01-31 17:12:38 +08:00
wanglin2
5be2f561e7 打包demo 2024-01-29 22:14:24 +08:00
街角小林
3da8070820 Fix:修复二级以下节点拖拽到根节点变成二级节点时样式没有更新的问题;修复上移一个层级命令移动节点时样式没有更新的问题 2024-01-26 13:51:44 +08:00
街角小林
12c89e6d37 打包demo 2024-01-26 12:00:32 +08:00
街角小林
fdb292d9b1 '打包' 2024-01-26 11:52:24 +08:00
街角小林
1083138d8c Doc: update 2024-01-26 11:41:34 +08:00
29 changed files with 353 additions and 81 deletions

File diff suppressed because one or more lines are too long

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

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -94,7 +94,9 @@ export default {
fitCanvas: '适应画布',
removeImage: '移除图片',
removeHyperlink: '移除超链接',
removeNote: '移除备注'
removeNote: '移除备注',
removeCustomStyles: '一键去除自定义样式',
removeAllNodeCustomStyles: '一键去除所有节点自定义样式'
},
count: {
words: '字数',

View File

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

View File

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

View File

@@ -540,6 +540,8 @@ redo. All commands are as follows:
| INSERT_PARENT_NODEv0.8.0+ | Insert a parent node into the specified node, with the operation node being the currently active node or the specified node | openEditActivate the newly inserted node and enter editing mode, default to 'true'`)、 appointNodesOptional, specify the node to insert into the parent node, and specify that multiple nodes can pass an array、 appointDataOptional, 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_NODEv0.8.0+ | Delete only the current node, operate on the currently active node or specified node | appointNodesOptional, specify the nodes to be deleted, and multiple nodes can be passed as an array |
| MOVE_UP_ONE_LEVELv0.9.6+ | Move the specified node up one level | nodeOptional, specify the node to move up the hierarchy, if not passed, it will be the first node in the current active node |
| REMOVE_CUSTOM_STYLESv0.9.7+ | One click removal of custom styles for a node | nodeOptional, specify the node to clear the custom style, otherwise it will be the first one in the current active node |
| REMOVE_ALL_NODE_CUSTOM_STYLESv0.9.7+ | One click removal of multiple nodes or custom styles for all nodes | appointNodesOptional, 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)

View File

@@ -1395,6 +1395,16 @@ redo. All commands are as follows:</p>
<td>Move the specified node up one level</td>
<td>nodeOptional, 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_STYLESv0.9.7+</td>
<td>One click removal of custom styles for a node</td>
<td>nodeOptional, 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_STYLESv0.9.7+</td>
<td>One click removal of multiple nodes or custom styles for all nodes</td>
<td>appointNodesOptional, 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>

View File

@@ -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">&#x27;simple-mind-map/src/utils/simulateCSSBackgroundInCanvas&#x27;</span>

View File

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

View File

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

View File

@@ -534,6 +534,8 @@ mindMap.updateConfig({
| INSERT_PARENT_NODEv0.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_NODEv0.8.0+ | 仅删除当前节点,操作节点为当前激活的节点或指定节点 | appointNodes可选指定要删除的节点指定多个节点可以传一个数组 |
| MOVE_UP_ONE_LEVELv0.9.6+ | 将指定节点上移一个层级 | node可选指定要上移层级的节点不传则为当前激活节点中的第一个 |
| REMOVE_CUSTOM_STYLESv0.9.7+ | 一键去除某个节点的自定义样式 | node可选指定要清除自定义样式的节点不传则为当前激活节点中的第一个 |
| REMOVE_ALL_NODE_CUSTOM_STYLESv0.9.7+ | 一键去除多个节点或所有节点的自定义样式 | appointNodes可选节点实例数组指定要去除自定义样式的多个节点如果不传则会去除当前画布所有节点的自定义样式 |
### setData(data)

View File

@@ -1296,6 +1296,16 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
<td>将指定节点上移一个层级</td>
<td>node可选指定要上移层级的节点不传则为当前激活节点中的第一个</td>
</tr>
<tr>
<td>REMOVE_CUSTOM_STYLESv0.9.7+</td>
<td>一键去除某个节点的自定义样式</td>
<td>node可选指定要清除自定义样式的节点不传则为当前激活节点中的第一个</td>
</tr>
<tr>
<td>REMOVE_ALL_NODE_CUSTOM_STYLESv0.9.7+</td>
<td>一键去除多个节点或所有节点的自定义样式</td>
<td>appointNodes可选节点实例数组指定要去除自定义样式的多个节点如果不传则会去除当前画布所有节点的自定义样式</td>
</tr>
</tbody>
</table>
<h3>setData(data)</h3>

View File

@@ -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">() =&gt;</span> {}, <span class="hljs-function">() =&gt;</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">() =&gt;</span> {},
<span class="hljs-function">() =&gt;</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>&lt;div&gt;&lt;img src=&quot;xxx&quot;&gt;&lt;/div&gt;</code> -&gt; <code>&lt;div&gt;&lt;img src=&quot;xxx&quot; /&gt;&lt;/div&gt;</code></p>
<p> html 自闭合标签添加闭合状态<code>&lt;div&gt;&lt;img src=&quot;xxx&quot;&gt;&lt;/div&gt;</code> -&gt; <code>&lt;div&gt;&lt;img src=&quot;xxx&quot; /&gt;&lt;/div&gt;</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">&#x27;simple-mind-map/src/utils/simulateCSSBackgroundInCanvas&#x27;</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">&#x27;canvas&#x27;</span>)
canvas.width = width
canvas.height = height
drawBackgroundImageToCanvas(ctx, width, height, img, {
<span class="hljs-attr">backgroundRepeat</span>: <span class="hljs-string">&#x27;repeat-y&#x27;</span>,
<span class="hljs-attr">backgroundSize</span>: <span class="hljs-string">&#x27;60%&#x27;</span>,
<span class="hljs-attr">backgroundPosition</span>: <span class="hljs-string">&#x27;center center&#x27;</span>
}, <span class="hljs-function">(<span class="hljs-params">err</span>) =&gt;</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">&#x27;repeat-y&#x27;</span>,
<span class="hljs-attr">backgroundSize</span>: <span class="hljs-string">&#x27;60%&#x27;</span>,
<span class="hljs-attr">backgroundPosition</span>: <span class="hljs-string">&#x27;center center&#x27;</span>
},
<span class="hljs-function"><span class="hljs-params">err</span> =&gt;</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>

View File

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

View File

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