diff --git a/web/src/pages/Doc/catalogList.js b/web/src/pages/Doc/catalogList.js index df011ec2..08f328fb 100644 --- a/web/src/pages/Doc/catalogList.js +++ b/web/src/pages/Doc/catalogList.js @@ -11,7 +11,7 @@ let langList = [ } ] let StartList = ['introduction', 'start', 'question', 'deploy', 'client', 'translate', 'changelog'] -let CourseList = new Array(29).fill(0).map((_, index) => { +let CourseList = new Array(30).fill(0).map((_, index) => { return 'course' + (index + 1) }) let APIList = [ diff --git a/web/src/pages/Doc/en/constructor/index.md b/web/src/pages/Doc/en/constructor/index.md index dd5a721e..e787c915 100644 --- a/web/src/pages/Doc/en/constructor/index.md +++ b/web/src/pages/Doc/en/constructor/index.md @@ -709,7 +709,7 @@ redo. All commands are as follows: | PASTE_NODE | Paste node to a node, the active node will be the operation node | data (the node data to paste, usually obtained through the renderer.copyNode() and renderer.cutNode() methods) | | SET_NODE_STYLE | Modify node single style | node (the node to set the style of), prop (style property), value (style property value), isActive (v0.7.0+has been abandoned, boolean, whether the style being set is for the active state) | | SET_NODE_STYLEs（v0.6.12+） | Modify multiple styles of nodes | node（the node to set the style of）、style（Style object，key is style prop，value is style value）、isActive（v0.7.0+has been abandoned, boolean, whether the style being set is for the active state） | -| SET_NODE_ACTIVE | Set whether the node is active | node (the node to set), active (boolean, whether to activate) | +| SET_NODE_ACTIVE | Set whether the node is active(This command only updates the activation fields and node activation styles in the node data. If you want to achieve the same effect as clicking on a node with the mouse, please use the 'active()' method of the node instance directly.) | node (the node to set), active (boolean, whether to activate) | | CLEAR_ACTIVE_NODE | Clear the active state of the currently active node(s), the active node will be the operation node | | | SET_NODE_EXPAND | Set whether the node is expanded | node (the node to set), expand (boolean, whether to expand) | | EXPAND_ALL | Expand all nodes | | diff --git a/web/src/pages/Doc/en/constructor/index.vue b/web/src/pages/Doc/en/constructor/index.vue index 96c91b00..19100fc3 100644 --- a/web/src/pages/Doc/en/constructor/index.vue +++ b/web/src/pages/Doc/en/constructor/index.vue @@ -1839,7 +1839,7 @@ redo. All commands are as follows:

SET_NODE_ACTIVE -Set whether the node is active +Set whether the node is active(This command only updates the activation fields and node activation styles in the node data. If you want to achieve the same effect as clicking on a node with the mouse, please use the 'active()' method of the node instance directly.) node (the node to set), active (boolean, whether to activate) diff --git a/web/src/pages/Doc/en/node/index.md b/web/src/pages/Doc/en/node/index.md index 2a0faccc..9cb3eadb 100644 --- a/web/src/pages/Doc/en/node/index.md +++ b/web/src/pages/Doc/en/node/index.md @@ -56,6 +56,10 @@ Whether the node is currently being dragged ## Methods +### active() + +Manually activating this node will cause other activated nodes to lose their activation. + ### checkIsInClient(padding = 0) > v0.10.4+ diff --git a/web/src/pages/Doc/en/node/index.vue b/web/src/pages/Doc/en/node/index.vue index 47665e36..5c494a10 100644 --- a/web/src/pages/Doc/en/node/index.vue +++ b/web/src/pages/Doc/en/node/index.vue @@ -31,6 +31,8 @@

Whether the node is currently being dragged

Methods

+

active()

+

Manually activating this node will cause other activated nodes to lose their activation.

checkIsInClient(padding = 0)

v0.10.4+

diff --git a/web/src/pages/Doc/en/render/index.md b/web/src/pages/Doc/en/render/index.md index d5b80778..66da08ca 100644 --- a/web/src/pages/Doc/en/render/index.md +++ b/web/src/pages/Doc/en/render/index.md @@ -100,7 +100,7 @@ Add a node to the active list. - `notEmitBeforeNodeActiveEvent`：v0.9.12+，is not distribute the 'before_node_active' event, which defaults to 'false' and will be distributed; -Add a node to the active list. +Add a node to the active list. If you want to manually activate a node to achieve the same effect as clicking with a mouse, please directly call the 'active()' method of the node instance. ### removeActiveNode(node) diff --git a/web/src/pages/Doc/en/render/index.vue b/web/src/pages/Doc/en/render/index.vue index 31ec72af..6138121e 100644 --- a/web/src/pages/Doc/en/render/index.vue +++ b/web/src/pages/Doc/en/render/index.vue @@ -84,7 +84,7 @@ disable the enter key and delete key related shortcuts to prevent conflicts.

-

Add a node to the active list.

+

Add a node to the active list. If you want to manually activate a node to achieve the same effect as clicking with a mouse, please directly call the 'active()' method of the node instance.

removeActiveNode(node)

v0.8.0+ abandoned

diff --git a/web/src/pages/Doc/routerList.js b/web/src/pages/Doc/routerList.js index 203ccf7e..dc554660 100644 --- a/web/src/pages/Doc/routerList.js +++ b/web/src/pages/Doc/routerList.js @@ -36,6 +36,7 @@ export default [ { path: 'course27', title: '快捷键操作如何传递自定义参数' }, { path: 'course28', title: '如何动态修改自定义元素的大小' }, { path: 'course29', title: '局域网docker部署解决HTTPS问题的一种方法' }, + { path: 'course30', title: '如何通过代码激活节点' }, { path: 'doExport', title: 'Export 插件' }, { path: 'drag', title: 'Drag插件' }, { path: 'introduction', title: '简介' }, diff --git a/web/src/pages/Doc/zh/constructor/index.md b/web/src/pages/Doc/zh/constructor/index.md index 08faedf8..3d9ccfa9 100644 --- a/web/src/pages/Doc/zh/constructor/index.md +++ b/web/src/pages/Doc/zh/constructor/index.md @@ -706,7 +706,7 @@ mindMap.updateConfig({ | CUT_NODE | 剪切节点，操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效，对根节点使用无效 | callback(回调函数，剪切的节点数据会通过调用该函数并通过参数返回) | | SET_NODE_STYLE | 修改节点单个样式 | node（要设置样式的节点）、style（样式属性）、value（样式属性值）、isActive（v0.7.0+已废弃，布尔值，是否设置的是激活状态的样式） | | SET_NODE_STYLEs（v0.6.12+） | 修改节点多个样式 | node（要设置样式的节点）、style（样式对象，key为样式属性，value为样式值）、isActive（v0.7.0+已废弃，布尔值，是否设置的是激活状态的样式） | -| SET_NODE_ACTIVE | 设置节点是否激活 | node（要设置的节点）、active（布尔值，是否激活） | +| SET_NODE_ACTIVE | 设置节点是否激活（该命令仅更新节点数据中的激活字段和节点激活样式，如果你想实现和鼠标点击节点激活的效果，请直接使用节点实例的`active()`方法） | node（要设置的节点）、active（布尔值，是否激活） | | CLEAR_ACTIVE_NODE | 清除当前已激活节点的激活状态，操作节点为当前激活的节点 | | | SET_NODE_EXPAND | 设置节点是否展开 | node（要设置的节点）、expand（布尔值，是否展开） | | EXPAND_ALL | 展开所有节点 | | diff --git a/web/src/pages/Doc/zh/constructor/index.vue b/web/src/pages/Doc/zh/constructor/index.vue index af913dbe..cb65bed7 100644 --- a/web/src/pages/Doc/zh/constructor/index.vue +++ b/web/src/pages/Doc/zh/constructor/index.vue @@ -1750,7 +1750,7 @@ mindMap.setTheme('主题名称') SET_NODE_ACTIVE -设置节点是否激活 +设置节点是否激活（该命令仅更新节点数据中的激活字段和节点激活样式，如果你想实现和鼠标点击节点激活的效果，请直接使用节点实例的active()方法） node（要设置的节点）、active（布尔值，是否激活） diff --git a/web/src/pages/Doc/zh/course30/index.md b/web/src/pages/Doc/zh/course30/index.md new file mode 100644 index 00000000..145c4d7a --- /dev/null +++ b/web/src/pages/Doc/zh/course30/index.md @@ -0,0 +1,79 @@ +# 如何通过代码激活节点 + +默认可以通过鼠标单击节点来激活单个节点，鼠标拖拽或按住Ctrl键单击进行激活多个节点，那么如何通过代码来激活单个或多个节点，达到和鼠标操作一样的效果呢，请往下看。 + +## 激活单个节点 + +如果已经获取到节点实例，那么直接调用该节点实例的`active()`方法即可： + +```js +node.active() +``` + +如果只知道节点`uid`，那么可以先获取节点实例，再调激活的方法： + +```js +const node = mindMap.renderer.findNodeByUid('uid') +node.active() +``` + +## 激活多个节点 + +如果要激活多个节点，在`v0.10.6`版本以前需要这么做： + +```js +;[id1, id2, id3].forEach(id => { + // 获取节点实例 + const node = mindMap.renderer.findNodeByUid(id) + // 手动派发节点激活前事件 + mindMap.emit( + 'before_node_active', + node, + mindMap.renderer.activeNodeList + ) + // 激活节点，并将该节点添加到激活节点列表里 + mindMap.renderer.addNodeToActiveList(node, true) + // 手动派发节点激活事件 + mindMap.renderer.emitNodeActiveEvent(node) +}) +``` + +在`v0.10.6+`版本，`render`实例新增了激活多个节点的方法，所以可以直接使用： + +```js +const nodeList = [id1, id2, id3, id4].map(id => { + return mindMap.renderer.findNodeByUid(id) +}) +mindMap.renderer.activeMultiNode(nodeList) +``` + +## 取消激活所有节点 + +取消激活所有节点可以直接调用`render`实例的方法： + +```js +mindMap.renderer.clearActiveNode() +``` + +这个方法不会派发`before_node_active`事件，所以如果需要你可以自己手动派发一下。 + +## 取消激活指定节点 + +要取消激活指定的节点，在`v0.10.6`版本以前需要这么做： + +```js +;[id1, id2, id3, id4].forEach(id => { + const node = mindMap.renderer.findNodeByUid(id) + mindMap.renderer.removeNodeFromActiveList(node) + mindMap.renderer.emitNodeActiveEvent(null) +}) +``` + +在`v0.10.6+`版本，`render`实例新增了取消激活多个节点的方法，所以可以直接使用： + +```js +const nodeList = [id1, id2, id3, id4].map(id => { + return mindMap.renderer.findNodeByUid(id) +}) +mindMap.renderer.cancelActiveMultiNode(nodeList) +``` \ No newline at end of file diff --git a/web/src/pages/Doc/zh/course30/index.vue b/web/src/pages/Doc/zh/course30/index.vue new file mode 100644 index 00000000..bacb74e7 --- /dev/null +++ b/web/src/pages/Doc/zh/course30/index.vue @@ -0,0 +1,67 @@ + + + + + \ No newline at end of file diff --git a/web/src/pages/Doc/zh/node/index.md b/web/src/pages/Doc/zh/node/index.md index 92ef8ee8..b10cf9f4 100644 --- a/web/src/pages/Doc/zh/node/index.md +++ b/web/src/pages/Doc/zh/node/index.md @@ -56,6 +56,10 @@ ## 方法 +### active() + +手动激活该节点，当前其他已激活节点会失去激活。 + ### checkIsInClient(padding = 0) > v0.10.4+ diff --git a/web/src/pages/Doc/zh/node/index.vue b/web/src/pages/Doc/zh/node/index.vue index 2f5bc08e..f3fecea2 100644 --- a/web/src/pages/Doc/zh/node/index.vue +++ b/web/src/pages/Doc/zh/node/index.vue @@ -31,6 +31,8 @@

节点是否正在拖拽中

方法

+

active()

+

手动激活该节点，当前其他已激活节点会失去激活。

checkIsInClient(padding = 0)

v0.10.4+

diff --git a/web/src/pages/Doc/zh/render/index.md b/web/src/pages/Doc/zh/render/index.md index fc631483..82a86321 100644 --- a/web/src/pages/Doc/zh/render/index.md +++ b/web/src/pages/Doc/zh/render/index.md @@ -100,7 +100,7 @@ - `notEmitBeforeNodeActiveEvent`：v0.9.12+，是否不要派发`before_node_active`事件，默认为`false`，即会派发； -添加节点到激活列表里。 +添加节点到激活列表里。如果你想要手动激活某个节点，达到和鼠标点击激活一样的效果，请直接调用节点实例的`active()`方法。 ### removeActiveNode(node) diff --git a/web/src/pages/Doc/zh/render/index.vue b/web/src/pages/Doc/zh/render/index.vue index 3584c295..a9cc3be5 100644 --- a/web/src/pages/Doc/zh/render/index.vue +++ b/web/src/pages/Doc/zh/render/index.vue @@ -83,7 +83,7 @@ -

添加节点到激活列表里。

+

添加节点到激活列表里。如果你想要手动激活某个节点，达到和鼠标点击激活一样的效果，请直接调用节点实例的active()方法。

removeActiveNode(node)

v0.8.0+已废弃

diff --git a/web/src/pages/Edit/components/Edit.vue b/web/src/pages/Edit/components/Edit.vue index ecf1c353..ee247099 100644 --- a/web/src/pages/Edit/components/Edit.vue +++ b/web/src/pages/Edit/components/Edit.vue @@ -606,12 +606,26 @@ export default { // console.log(this.mindMap.renderer.root.getRect()) // console.log(this.mindMap.renderer.root.getRectInSvg()) // }, 5000); - // setTimeout(() => { - // this.mindMap.renderer.renderTree.data.fillColor = 'red' - // this.mindMap.render() - // this.mindMap.reRender() - // this.mindMap.render() - // }, 5000) + setTimeout(() => { + const id1 = '907cf148-4418-42a7-ae04-491fc483fe5e' + const id2 = 'd3d9d35a-cfc0-4180-b61e-69ac0dcbed17' + const id3 = '42c49f81-bb5b-46e3-bc20-1fc0abc1d834' + const id4 = '4d63d518-4efc-4765-99a8-af9955c04b40' + // this.mindMap.renderer.clearActiveNode() + // const node = this.mindMap.renderer.findNodeByUid(id2) + // node.active() + + ;[id1, id2, id3, id4].forEach(id => { + const node = this.mindMap.renderer.findNodeByUid(id) + this.mindMap.renderer.removeNodeFromActiveList(node, true) + this.mindMap.renderer.emitNodeActiveEvent(null) + }) + + // const nodeList = [id1, id2, id3, id4].map(id => { + // return this.mindMap.renderer.findNodeByUid(id) + // }) + // this.mindMap.renderer.activeMultiNode(nodeList) + }, 5000) }, // url中是否存在要打开的文件