mirror of
https://github.com/wanglin2/mind-map.git
synced 2026-03-02 23:08:03 +08:00
Break change：节点激活样式只能修改形状相关样式
This commit is contained in:
wanglin2
parent
747a781ad8
commit
1795773af9
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "simple-mind-map",
|
||||
"version": "0.4.7",
|
||||
"version": "0.5.0",
|
||||
"description": "一个简单的web在线思维导图",
|
||||
"authors": [
|
||||
{
|
||||
|
||||
@ -55,6 +55,7 @@ class Node {
|
||||
this.children = opt.children || []
|
||||
// 节点内容的容器
|
||||
this.group = null
|
||||
this.shapeNode = null// 节点形状节点
|
||||
// 节点内容对象
|
||||
this._imgData = null
|
||||
this._iconData = null
|
||||
@ -426,7 +427,6 @@ class Node {
|
||||
}
|
||||
|
||||
// 创建超链接节点
|
||||
|
||||
createHyperlinkNode() {
|
||||
let { hyperlink, hyperlinkTitle } = this.nodeData.data
|
||||
if (!hyperlink) {
|
||||
@ -561,10 +561,8 @@ class Node {
|
||||
this.draw.add(this.group)
|
||||
this.update(true)
|
||||
// 节点形状
|
||||
const shape = this.getShape()
|
||||
this.style[shape === 'rectangle' ? 'rect' : 'shape'](
|
||||
this.shapeInstance.createShape()
|
||||
)
|
||||
this.shapeNode = this.shapeInstance.createShape()
|
||||
this.updateNodeShape()
|
||||
// 图片节点
|
||||
let imgHeight = 0
|
||||
if (this._imgData) {
|
||||
@ -751,6 +749,12 @@ class Node {
|
||||
}
|
||||
}
|
||||
|
||||
// 更新节点形状样式
|
||||
updateNodeShape() {
|
||||
const shape = this.getShape()
|
||||
this.style[shape === 'rectangle' ? 'rect' : 'shape'](this.shapeNode)
|
||||
}
|
||||
|
||||
// 递归渲染
|
||||
render(callback = () => {}) {
|
||||
// 节点
|
||||
|
||||
@ -305,7 +305,7 @@ class Render {
|
||||
node.nodeData.data.isActive = true
|
||||
this.addActiveNode(node)
|
||||
setTimeout(() => {
|
||||
node.renderNode()
|
||||
node.updateNodeShape()
|
||||
}, 0)
|
||||
}
|
||||
},
|
||||
@ -676,7 +676,7 @@ class Render {
|
||||
this.setNodeData(node, {
|
||||
isActive: active
|
||||
})
|
||||
node.renderNode()
|
||||
node.updateNodeShape()
|
||||
}
|
||||
|
||||
// 设置节点是否展开
|
||||
|
||||
@ -142,14 +142,10 @@ export default {
|
||||
// 简单来说，会改变节点大小的都不支持在激活时设置，为了性能考虑，节点切换激活态时不会重新计算节点大小
|
||||
export const supportActiveStyle = [
|
||||
'fillColor',
|
||||
'color',
|
||||
'fontWeight',
|
||||
'fontStyle',
|
||||
'borderColor',
|
||||
'borderWidth',
|
||||
'borderDasharray',
|
||||
'borderRadius',
|
||||
'textDecoration'
|
||||
'borderRadius'
|
||||
]
|
||||
|
||||
export const lineStyleProps = ['lineColor', 'lineDasharray', 'lineWidth']
|
||||
|
||||
@ -1,5 +1,19 @@
|
||||
# Changelog
|
||||
|
||||
## 0.5.0
|
||||
|
||||
modify: Starting from version 0.5.0, considering performance issues, the node activation state can only modify shape related styles:
|
||||
|
||||
```js
|
||||
[
|
||||
'fillColor',
|
||||
'borderColor',
|
||||
'borderWidth',
|
||||
'borderDasharray',
|
||||
'borderRadius'
|
||||
]
|
||||
```
|
||||
|
||||
## 0.4.7
|
||||
|
||||
optimization: 1.During rich text editing, when initially focusing, all are no longer selected by default; 2.When editing rich text, use the node fill color as the background color to avoid being invisible when the node color is white. 3.Node activation state switching no longer triggers history. 4.Triggering history multiple times in a short time will only add the last data. 5.Optimize the addition of historical records. When there is a rollback, delete the historical data after the current pointer when adding a new record again.
|
||||
|
||||
@ -1,6 +1,16 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Changelog</h1>
|
||||
<h2>0.5.0</h2>
|
||||
<p>modify: Starting from version 0.5.0, considering performance issues, the node activation state can only modify shape related styles:</p>
|
||||
<pre class="hljs"><code>[
|
||||
<span class="hljs-string">'fillColor'</span>,
|
||||
<span class="hljs-string">'borderColor'</span>,
|
||||
<span class="hljs-string">'borderWidth'</span>,
|
||||
<span class="hljs-string">'borderDasharray'</span>,
|
||||
<span class="hljs-string">'borderRadius'</span>
|
||||
]
|
||||
</code></pre>
|
||||
<h2>0.4.7</h2>
|
||||
<p>optimization: 1.During rich text editing, when initially focusing, all are no longer selected by default; 2.When editing rich text, use the node fill color as the background color to avoid being invisible when the node color is white. 3.Node activation state switching no longer triggers history. 4.Triggering history multiple times in a short time will only add the last data. 5.Optimize the addition of historical records. When there is a rollback, delete the historical data after the current pointer when adding a new record again.</p>
|
||||
<p>New: 1.Support for importing and exporting Markdown format files. 2.Support for configuring initial text when inserting nodes. 3.Expand the commands for inserting and deleting nodes to support specifying nodes.</p>
|
||||
|
||||
@ -76,6 +76,12 @@ Recursively render this node and all its child nodes. The first call will create
|
||||
the node content, subsequent calls will only update the node position. To
|
||||
re-render the content, set the `initRender` attribute to `true` first.
|
||||
|
||||
### updateNodeShape()
|
||||
|
||||
> v0.5.0+
|
||||
|
||||
Update node shape nodes. For example, when the node status changes, call this method to display or deactivate the style.
|
||||
|
||||
### remove()
|
||||
|
||||
Recursively delete this node and all its child nodes
|
||||
|
||||
@ -43,6 +43,11 @@ one</p>
|
||||
<p>Recursively render this node and all its child nodes. The first call will create
|
||||
the node content, subsequent calls will only update the node position. To
|
||||
re-render the content, set the <code>initRender</code> attribute to <code>true</code> first.</p>
|
||||
<h3>updateNodeShape()</h3>
|
||||
<blockquote>
|
||||
<p>v0.5.0+</p>
|
||||
</blockquote>
|
||||
<p>Update node shape nodes. For example, when the node status changes, call this method to display or deactivate the style.</p>
|
||||
<h3>remove()</h3>
|
||||
<p>Recursively delete this node and all its child nodes</p>
|
||||
<h3>renderLine()</h3>
|
||||
|
||||
@ -1,5 +1,19 @@
|
||||
# Changelog
|
||||
|
||||
## 0.5.0
|
||||
|
||||
修改：从0.5.0版本开始，考虑性能问题，节点激活状态只能修改形状相关的样式：
|
||||
|
||||
```js
|
||||
[
|
||||
'fillColor',
|
||||
'borderColor',
|
||||
'borderWidth',
|
||||
'borderDasharray',
|
||||
'borderRadius'
|
||||
]
|
||||
```
|
||||
|
||||
## 0.4.7
|
||||
|
||||
优化：1.富文本编辑时初始聚焦时不再默认全选；2.富文本编辑时使用节点填充色作为背景色，避免节点颜色为白色时看不见。 3.节点激活状态切换不再触发历史记录。 4.短时间多次触发历史记录，只会添加最后一次的数据。 5.优化历史记录添加，当有回退时，再次添加新记录时删除当前指针后面的历史数据。
|
||||
|
||||
@ -1,6 +1,16 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Changelog</h1>
|
||||
<h2>0.5.0</h2>
|
||||
<p>修改：从0.5.0版本开始，考虑性能问题，节点激活状态只能修改形状相关的样式：</p>
|
||||
<pre class="hljs"><code>[
|
||||
<span class="hljs-string">'fillColor'</span>,
|
||||
<span class="hljs-string">'borderColor'</span>,
|
||||
<span class="hljs-string">'borderWidth'</span>,
|
||||
<span class="hljs-string">'borderDasharray'</span>,
|
||||
<span class="hljs-string">'borderRadius'</span>
|
||||
]
|
||||
</code></pre>
|
||||
<h2>0.4.7</h2>
|
||||
<p>优化：1.富文本编辑时初始聚焦时不再默认全选；2.富文本编辑时使用节点填充色作为背景色，避免节点颜色为白色时看不见。 3.节点激活状态切换不再触发历史记录。 4.短时间多次触发历史记录，只会添加最后一次的数据。 5.优化历史记录添加，当有回退时，再次添加新记录时删除当前指针后面的历史数据。</p>
|
||||
<p>新增：1.支持导入和导出Markdown格式文件。 2.支持配置插入节点时的初始文字。 3.扩展插入节点和删除节点的命令，支持指定节点。</p>
|
||||
|
||||
@ -72,6 +72,12 @@
|
||||
|
||||
递归渲染该节点及其所有子节点，第一次调用会创建节点内容，后续只会更新节点位置，想要重新渲染内容，可以先把`initRender`属性设为`true`
|
||||
|
||||
### updateNodeShape()
|
||||
|
||||
> v0.5.0+
|
||||
|
||||
更新节点形状节点。比如当节点状态改变后，调用该方法显示或取消激活样式。
|
||||
|
||||
### remove()
|
||||
|
||||
递归删除该节点及其所有子节点
|
||||
|
||||
@ -39,6 +39,11 @@
|
||||
<p>渲染节点到画布，会移除旧的内容节点，创建新的</p>
|
||||
<h3>render()</h3>
|
||||
<p>递归渲染该节点及其所有子节点，第一次调用会创建节点内容，后续只会更新节点位置，想要重新渲染内容，可以先把<code>initRender</code>属性设为<code>true</code></p>
|
||||
<h3>updateNodeShape()</h3>
|
||||
<blockquote>
|
||||
<p>v0.5.0+</p>
|
||||
</blockquote>
|
||||
<p>更新节点形状节点。比如当节点状态改变后，调用该方法显示或取消激活样式。</p>
|
||||
<h3>remove()</h3>
|
||||
<p>递归删除该节点及其所有子节点</p>
|
||||
<h3>renderLine()</h3>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user