diff --git a/README.md b/README.md index 6b76ad40..1db97878 100644 --- a/README.md +++ b/README.md @@ -39,6 +39,7 @@ Github：[releases](https://github.com/wanglin2/mind-map/releases)。 - [x] 支持导出为`json`、`png`、`svg`、`pdf`、`markdown`、`xmind`，支持从`json`、`xmind`、`markdown`导入 - [x] 支持快捷键、前进后退、关联线、搜索替换、小地图、水印、滚动条 - [x] 提供丰富的配置，满足各种场景各种使用习惯 +- [x] 支持协同编辑 # 安装 @@ -93,11 +94,11 @@ const mindMap = new MindMap({ # 请作者喝杯咖啡 -开源不易，如果本项目有帮助到你的话，可以考虑请作者喝杯咖啡哟~ +开源不易，如果本项目有帮助到你的话，可以考虑请作者喝杯咖啡~ > 厚椰乳一盒 + 纯牛奶半盒 + 冰块 + 咖啡液 = 生椰拿铁 yyds -> 推荐使用支付宝，微信获取不到头像。转账请备注【思维导图】。你的头像和名字将会出现在下面和[文档页面](https://wanglin2.github.io/mind-map/#/doc/zh/introduction/%E8%AF%B7%E4%BD%9C%E8%80%85%E5%96%9D%E6%9D%AF%E5%92%96%E5%95%A1) +> 推荐使用支付宝，微信获取不到头像。转账请备注【思维导图】。

@@ -189,4 +190,24 @@ const mindMap = new MindMap({ 沐风牧草 + + + 有希 + + + + 樊笼 + + + + 达仁科技 + + + + 小逗比 + + + + 天清如愿 +

\ No newline at end of file diff --git a/index.html b/index.html index fe8aa9fa..04a072af 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,7 @@ 思绪思维导图
+ } diff --git a/simple-mind-map/bin/wsServer.mjs b/simple-mind-map/bin/wsServer.mjs new file mode 100644 index 00000000..23efb3a7 --- /dev/null +++ b/simple-mind-map/bin/wsServer.mjs @@ -0,0 +1,152 @@ +#!/usr/bin/env node + +import ws from 'ws' +import http from 'http' +import * as map from 'lib0/map' + +const wsReadyStateConnecting = 0 +const wsReadyStateOpen = 1 +const wsReadyStateClosing = 2 // eslint-disable-line +const wsReadyStateClosed = 3 // eslint-disable-line + +const pingTimeout = 30000 + +const port = process.env.PORT || 4444 +// @ts-ignore +const wss = new ws.Server({ noServer: true }) + +const server = http.createServer((request, response) => { + response.writeHead(200, { 'Content-Type': 'text/plain' }) + response.end('okay') +}) + +/** + * Map froms topic-name to set of subscribed clients. + * @type {Map>} + */ +const topics = new Map() + +/** + * @param {any} conn + * @param {object} message + */ +const send = (conn, message) => { + if ( + conn.readyState !== wsReadyStateConnecting && + conn.readyState !== wsReadyStateOpen + ) { + conn.close() + } + try { + conn.send(JSON.stringify(message)) + } catch (e) { + conn.close() + } +} + +/** + * Setup a new client + * @param {any} conn + */ +const onconnection = conn => { + /** + * @type {Set} + */ + const subscribedTopics = new Set() + let closed = false + // Check if connection is still alive + let pongReceived = true + const pingInterval = setInterval(() => { + if (!pongReceived) { + conn.close() + clearInterval(pingInterval) + } else { + pongReceived = false + try { + conn.ping() + } catch (e) { + conn.close() + } + } + }, pingTimeout) + conn.on('pong', () => { + pongReceived = true + }) + conn.on('close', () => { + subscribedTopics.forEach(topicName => { + const subs = topics.get(topicName) || new Set() + subs.delete(conn) + if (subs.size === 0) { + topics.delete(topicName) + } + }) + subscribedTopics.clear() + closed = true + }) + conn.on( + 'message', + /** @param {object} message */ message => { + if (typeof message === 'string') { + message = JSON.parse(message) + } + if (message && message.type && !closed) { + switch (message.type) { + case 'subscribe': + /** @type {Array} */ ;(message.topics || []).forEach( + topicName => { + if (typeof topicName === 'string') { + // add conn to topic + const topic = map.setIfUndefined( + topics, + topicName, + () => new Set() + ) + topic.add(conn) + // add topic to conn + subscribedTopics.add(topicName) + } + } + ) + break + case 'unsubscribe': + /** @type {Array} */ ;(message.topics || []).forEach( + topicName => { + const subs = topics.get(topicName) + if (subs) { + subs.delete(conn) + } + } + ) + break + case 'publish': + if (message.topic) { + const receivers = topics.get(message.topic) + if (receivers) { + message.clients = receivers.size + receivers.forEach(receiver => send(receiver, message)) + } + } + break + case 'ping': + send(conn, { type: 'pong' }) + } + } + } + ) +} +wss.on('connection', onconnection) + +server.on('upgrade', (request, socket, head) => { + // You may check auth of request here.. + /** + * @param {any} ws + */ + const handleAuth = ws => { + wss.emit('connection', ws, request) + } + wss.handleUpgrade(request, socket, head, handleAuth) +}) + +server.listen(port) + +console.log('Signaling server running on localhost:', port) diff --git a/simple-mind-map/index.js b/simple-mind-map/index.js index 031571cc..cd9cd531 100644 --- a/simple-mind-map/index.js +++ b/simple-mind-map/index.js @@ -35,21 +35,16 @@ class MindMap { // 容器元素 this.el = this.opt.el if (!this.el) throw new Error('缺少容器元素el') - this.elRect = this.el.getBoundingClientRect() - // 画布宽高 - this.width = this.elRect.width - this.height = this.elRect.height - if (this.width <= 0 || this.height <= 0) - throw new Error('容器元素el的宽高不能为0') + // 获取容器尺寸位置信息 + this.getElRectInfo() // 添加css this.cssEl = null this.addCss() // 画布 - this.svg = SVG().addTo(this.el).size(this.width, this.height) - this.draw = this.svg.group() + this.initContainer() // 初始化主题 this.initTheme() @@ -79,8 +74,7 @@ class MindMap { // 视图操作类 this.view = new View({ - mindMap: this, - draw: this.draw + mindMap: this }) // 批量执行类 @@ -111,6 +105,46 @@ class MindMap { return opt } + // 创建容器元素 + initContainer() { + const { associativeLineIsAlwaysAboveNode } = this.opt + // 节点关联线容器 + const createAssociativeLineDraw = () => { + this.associativeLineDraw = this.draw.group() + this.associativeLineDraw.addClass('smm-associative-line-container') + } + // 画布 + this.svg = SVG().addTo(this.el).size(this.width, this.height) + // 容器 + this.draw = this.svg.group() + this.draw.addClass('smm-container') + // 节点连线容器 + this.lineDraw = this.draw.group() + this.lineDraw.addClass('smm-line-container') + // 默认处于节点下方 + if (!associativeLineIsAlwaysAboveNode) { + createAssociativeLineDraw() + } + // 节点容器 + this.nodeDraw = this.draw.group() + this.nodeDraw.addClass('smm-node-container') + // 关联线始终处于节点上方 + if (associativeLineIsAlwaysAboveNode) { + createAssociativeLineDraw() + } + // 其他内容的容器 + this.otherDraw = this.draw.group() + this.otherDraw.addClass('smm-other-container') + } + + // 清空各容器 + clearDraw() { + this.lineDraw.clear() + this.associativeLineDraw.clear() + this.nodeDraw.clear() + this.otherDraw.clear() + } + // 添加必要的css样式到页面 addCss() { this.cssEl = document.createElement('style') @@ -136,19 +170,27 @@ class MindMap { // 重新渲染 reRender(callback, source = '') { this.batchExecution.push('render', () => { - this.draw.clear() + this.clearDraw() this.initTheme() this.renderer.reRender = true this.renderer.render(callback, source) }) } - // 容器尺寸变化，调整尺寸 - resize() { + // 获取或更新容器尺寸位置信息 + getElRectInfo() { this.elRect = this.el.getBoundingClientRect() this.width = this.elRect.width this.height = this.elRect.height + if (this.width <= 0 || this.height <= 0) + throw new Error('容器元素el的宽高不能为0') + } + + // 容器尺寸变化，调整尺寸 + resize() { + this.getElRectInfo() this.svg.size(this.width, this.height) + this.emit('resize') } // 监听事件 @@ -192,10 +234,12 @@ class MindMap { } // 设置主题 - setTheme(theme) { - this.renderer.clearAllActive() + setTheme(theme, notRender = false) { + this.execCommand('CLEAR_ACTIVE_NODE') this.opt.theme = theme - this.render(null, CONSTANTS.CHANGE_THEME) + if (!notRender) { + this.render(null, CONSTANTS.CHANGE_THEME) + } this.emit('view_theme_change', theme) } @@ -205,13 +249,15 @@ class MindMap { } // 设置主题配置 - setThemeConfig(config) { + setThemeConfig(config, notRender = false) { // 计算改变了的配置 const changedConfig = getObjectChangedProps(this.themeConfig, config) this.opt.themeConfig = config - // 检查改变的是否是节点大小无关的主题属性 - let res = checkIsNodeSizeIndependenceConfig(changedConfig) - this.render(null, res ? '' : CONSTANTS.CHANGE_THEME) + if (!notRender) { + // 检查改变的是否是节点大小无关的主题属性 + let res = checkIsNodeSizeIndependenceConfig(changedConfig) + this.render(null, res ? '' : CONSTANTS.CHANGE_THEME) + } } // 获取自定义主题配置 @@ -240,7 +286,7 @@ class MindMap { } // 设置布局结构 - setLayout(layout) { + setLayout(layout, notRender = false) { // 检查布局配置 if (!layoutValueList.includes(layout)) { layout = CONSTANTS.LAYOUT.LOGICAL_STRUCTURE @@ -248,7 +294,9 @@ class MindMap { this.opt.layout = layout this.view.reset() this.renderer.setLayout() - this.render(null, CONSTANTS.CHANGE_LAYOUT) + if (!notRender) { + this.render(null, CONSTANTS.CHANGE_LAYOUT) + } } // 执行命令 @@ -258,15 +306,13 @@ class MindMap { // 动态设置思维导图数据，纯节点数据 setData(data) { + data = simpleDeepClone(data || {}) this.execCommand('CLEAR_ACTIVE_NODE') this.command.clearHistory() this.command.addHistory() - if (this.richText) { - this.renderer.renderTree = this.richText.handleSetData(data) - } else { - this.renderer.renderTree = data - } + this.renderer.setData(data) this.reRender(() => {}, CONSTANTS.SET_DATA) + this.emit('set_data', data) } // 动态设置思维导图数据，包括节点数据、布局、主题、视图 @@ -336,20 +382,20 @@ class MindMap { this.opt.readonly = mode === CONSTANTS.MODE.READONLY if (this.opt.readonly) { // 取消当前激活的元素 - this.renderer.clearAllActive() + this.execCommand('CLEAR_ACTIVE_NODE') } this.emit('mode_change', mode) } // 获取svg数据 - getSvgData({ paddingX = 0, paddingY = 0 } = {}) { + getSvgData({ paddingX = 0, paddingY = 0, ignoreWatermark = false } = {}) { const svg = this.svg const draw = this.draw // 保存原始信息 const origWidth = svg.width() const origHeight = svg.height() const origTransform = draw.transform() - const elRect = this.el.getBoundingClientRect() + const elRect = this.elRect // 去除放大缩小的变换效果 draw.scale(1 / origTransform.scaleX, 1 / origTransform.scaleY) // 获取变换后的位置尺寸信息，其实是getBoundingClientRect方法的包装方法 @@ -364,10 +410,9 @@ class MindMap { draw.translate(-rect.x + elRect.left, -rect.y + elRect.top) // 克隆一份数据 let clone = svg.clone() - // 添加必要的样式 - clone.add(SVG(``)) // 如果实际图形宽高超出了屏幕宽高，且存在水印的话需要重新绘制水印，否则会出现超出部分没有水印的问题 if ( + !ignoreWatermark && (rect.width > origWidth || rect.height > origHeight) && this.watermark && this.watermark.hasWatermark() @@ -380,6 +425,16 @@ class MindMap { this.height = origHeight this.watermark.draw() } + // 添加必要的样式 + clone.add(SVG(``)) + // 修正关联线箭头marker的id + const markerList = svg.find('marker') + if (markerList && markerList.length > 0) { + const id = markerList[0].attr('id') + clone.find('marker').forEach(item => { + item.attr('id', id) + }) + } // 恢复原先的大小和变换信息 svg.size(origWidth, origHeight) draw.transform(origTransform) diff --git a/simple-mind-map/package-lock.json b/simple-mind-map/package-lock.json index 5efac16e..f3e0ec0b 100644 --- a/simple-mind-map/package-lock.json +++ b/simple-mind-map/package-lock.json @@ -18,7 +18,9 @@ "quill": "^1.3.6", "tern": "^0.24.3", "uuid": "^9.0.0", - "xml-js": "^1.6.11" + "xml-js": "^1.6.11", + "y-webrtc": "^10.2.5", + "yjs": "^13.6.8" }, "devDependencies": { "eslint": "^8.25.0", @@ -290,6 +292,25 @@ "node": ">= 0.6.0" } }, + "node_modules/base64-js": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz", + "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ] + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -310,6 +331,29 @@ "node": ">= 0.4.0" } }, + "node_modules/buffer": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz", + "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "dependencies": { + "base64-js": "^1.3.1", + "ieee754": "^1.2.1" + } + }, "node_modules/call-bind": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz", @@ -574,6 +618,11 @@ "node": ">=0.6" } }, + "node_modules/err-code": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/err-code/-/err-code-3.0.1.tgz", + "integrity": "sha512-GiaH0KJUewYok+eeY05IIgjtAe4Yltygk9Wqp1V5yVWLdhf0hYZchRjNIT9bb0mSwRcIusT3cx7PJUf3zEIfUA==" + }, "node_modules/errno": { "version": "0.1.8", "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz", @@ -873,6 +922,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/get-browser-rtc": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/get-browser-rtc/-/get-browser-rtc-1.1.0.tgz", + "integrity": "sha512-MghbMJ61EJrRsDe7w1Bvqt3ZsBuqhce5nrn/XAwgwOXhcsz53/ltdxOse1h/8eKXj5slzxdsz56g5rzOFSGwfQ==" + }, "node_modules/get-intrinsic": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz", @@ -1012,6 +1066,25 @@ "node": ">=8.0.0" } }, + "node_modules/ieee754": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz", + "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ] + }, "node_modules/ignore": { "version": "5.2.4", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz", @@ -1150,6 +1223,15 @@ "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==", "dev": true }, + "node_modules/isomorphic.js": { + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/isomorphic.js/-/isomorphic.js-0.2.5.tgz", + "integrity": "sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==", + "funding": { + "type": "GitHub Sponsors ❤", + "url": "https://github.com/sponsors/dmonad" + } + }, "node_modules/js-sdsl": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.2.0.tgz", @@ -1248,6 +1330,25 @@ "node": ">= 0.8.0" } }, + "node_modules/lib0": { + "version": "0.2.86", + "resolved": "https://registry.npmjs.org/lib0/-/lib0-0.2.86.tgz", + "integrity": "sha512-kxigQTM4Q7NwJkEgdqQvU21qiR37twcqqLmh+/SbiGbRLfPlLVbHyY9sWp7PwXh0Xus9ELDSjsUOwcrdt5yZ4w==", + "dependencies": { + "isomorphic.js": "^0.2.4" + }, + "bin": { + "0gentesthtml": "bin/gentesthtml.js", + "0serve": "bin/0serve.js" + }, + "engines": { + "node": ">=16" + }, + "funding": { + "type": "GitHub Sponsors ❤", + "url": "https://github.com/sponsors/dmonad" + } + }, "node_modules/lie": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz", @@ -1960,7 +2061,6 @@ "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==", - "dev": true, "funding": [ { "type": "github", @@ -2016,6 +2116,14 @@ "performance-now": "^2.1.0" } }, + "node_modules/randombytes": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", + "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==", + "dependencies": { + "safe-buffer": "^5.1.0" + } + }, "node_modules/readable-stream": { "version": "2.3.7", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz", @@ -2176,6 +2284,47 @@ "node": ">=8" } }, + "node_modules/simple-peer": { + "version": "9.11.1", + "resolved": "https://registry.npmjs.org/simple-peer/-/simple-peer-9.11.1.tgz", + "integrity": "sha512-D1SaWpOW8afq1CZGWB8xTfrT3FekjQmPValrqncJMX7QFl8YwhrPTZvMCANLtgBwwdS+7zURyqxDDEmY558tTw==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "dependencies": { + "buffer": "^6.0.3", + "debug": "^4.3.2", + "err-code": "^3.0.1", + "get-browser-rtc": "^1.1.0", + "queue-microtask": "^1.2.3", + "randombytes": "^2.1.0", + "readable-stream": "^3.6.0" + } + }, + "node_modules/simple-peer/node_modules/readable-stream": { + "version": "3.6.2", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz", + "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==", + "dependencies": { + "inherits": "^2.0.3", + "string_decoder": "^1.1.1", + "util-deprecate": "^1.0.1" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/stackblur-canvas": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.5.0.tgz", @@ -2410,6 +2559,27 @@ "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==" }, + "node_modules/ws": { + "version": "7.5.9", + "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz", + "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==", + "optional": true, + "engines": { + "node": ">=8.3.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": "^5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, "node_modules/xml-js": { "version": "1.6.11", "resolved": "https://registry.npmjs.org/xml-js/-/xml-js-1.6.11.tgz", @@ -2421,6 +2591,65 @@ "xml-js": "bin/cli.js" } }, + "node_modules/y-protocols": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/y-protocols/-/y-protocols-1.0.6.tgz", + "integrity": "sha512-vHRF2L6iT3rwj1jub/K5tYcTT/mEYDUppgNPXwp8fmLpui9f7Yeq3OEtTLVF012j39QnV+KEQpNqoN7CWU7Y9Q==", + "license": "MIT", + "dependencies": { + "lib0": "^0.2.85" + }, + "engines": { + "node": ">=16.0.0", + "npm": ">=8.0.0" + }, + "funding": { + "type": "GitHub Sponsors ❤", + "url": "https://github.com/sponsors/dmonad" + }, + "peerDependencies": { + "yjs": "^13.0.0" + } + }, + "node_modules/y-webrtc": { + "version": "10.2.5", + "resolved": "https://registry.npmjs.org/y-webrtc/-/y-webrtc-10.2.5.tgz", + "integrity": "sha512-ZyBNvTI5L28sQ2PQI0T/JvyWgvuTq05L21vGkIlcvNLNSJqAaLCBJRe3FHEqXoaogqWmRcEAKGfII4ErNXMnNw==", + "dependencies": { + "lib0": "^0.2.42", + "simple-peer": "^9.11.0", + "y-protocols": "^1.0.5" + }, + "bin": { + "y-webrtc-signaling": "bin/server.js" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "type": "GitHub Sponsors ❤", + "url": "https://github.com/sponsors/dmonad" + }, + "optionalDependencies": { + "ws": "^7.2.0" + } + }, + "node_modules/yjs": { + "version": "13.6.8", + "resolved": "https://registry.npmjs.org/yjs/-/yjs-13.6.8.tgz", + "integrity": "sha512-ZPq0hpJQb6f59B++Ngg4cKexDJTvfOgeiv0sBc4sUm8CaBWH7OQC4kcCgrqbjJ/B2+6vO49exvTmYfdlPtcjbg==", + "dependencies": { + "lib0": "^0.2.74" + }, + "engines": { + "node": ">=16.0.0", + "npm": ">=8.0.0" + }, + "funding": { + "type": "GitHub Sponsors ❤", + "url": "https://github.com/sponsors/dmonad" + } + }, "node_modules/yocto-queue": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", @@ -2628,6 +2857,11 @@ "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==", "optional": true }, + "base64-js": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz", + "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==" + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -2642,6 +2876,15 @@ "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz", "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==" }, + "buffer": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz", + "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==", + "requires": { + "base64-js": "^1.3.1", + "ieee754": "^1.2.1" + } + }, "call-bind": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz", @@ -2834,6 +3077,11 @@ "tapable": "^0.2.3" } }, + "err-code": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/err-code/-/err-code-3.0.1.tgz", + "integrity": "sha512-GiaH0KJUewYok+eeY05IIgjtAe4Yltygk9Wqp1V5yVWLdhf0hYZchRjNIT9bb0mSwRcIusT3cx7PJUf3zEIfUA==" + }, "errno": { "version": "0.1.8", "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz", @@ -3066,6 +3314,11 @@ "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz", "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==" }, + "get-browser-rtc": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/get-browser-rtc/-/get-browser-rtc-1.1.0.tgz", + "integrity": "sha512-MghbMJ61EJrRsDe7w1Bvqt3ZsBuqhce5nrn/XAwgwOXhcsz53/ltdxOse1h/8eKXj5slzxdsz56g5rzOFSGwfQ==" + }, "get-intrinsic": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz", @@ -3163,6 +3416,11 @@ "text-segmentation": "^1.0.3" } }, + "ieee754": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz", + "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==" + }, "ignore": { "version": "5.2.4", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz", @@ -3262,6 +3520,11 @@ "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==", "dev": true }, + "isomorphic.js": { + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/isomorphic.js/-/isomorphic.js-0.2.5.tgz", + "integrity": "sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==" + }, "js-sdsl": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.2.0.tgz", @@ -3338,6 +3601,14 @@ "type-check": "~0.4.0" } }, + "lib0": { + "version": "0.2.86", + "resolved": "https://registry.npmjs.org/lib0/-/lib0-0.2.86.tgz", + "integrity": "sha512-kxigQTM4Q7NwJkEgdqQvU21qiR37twcqqLmh+/SbiGbRLfPlLVbHyY9sWp7PwXh0Xus9ELDSjsUOwcrdt5yZ4w==", + "requires": { + "isomorphic.js": "^0.2.4" + } + }, "lie": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz", @@ -3765,8 +4036,7 @@ "queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", - "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==", - "dev": true + "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==" }, "quill": { "version": "1.3.6", @@ -3807,6 +4077,14 @@ "performance-now": "^2.1.0" } }, + "randombytes": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", + "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==", + "requires": { + "safe-buffer": "^5.1.0" + } + }, "readable-stream": { "version": "2.3.7", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz", @@ -3916,6 +4194,32 @@ "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", "dev": true }, + "simple-peer": { + "version": "9.11.1", + "resolved": "https://registry.npmjs.org/simple-peer/-/simple-peer-9.11.1.tgz", + "integrity": "sha512-D1SaWpOW8afq1CZGWB8xTfrT3FekjQmPValrqncJMX7QFl8YwhrPTZvMCANLtgBwwdS+7zURyqxDDEmY558tTw==", + "requires": { + "buffer": "^6.0.3", + "debug": "^4.3.2", + "err-code": "^3.0.1", + "get-browser-rtc": "^1.1.0", + "queue-microtask": "^1.2.3", + "randombytes": "^2.1.0", + "readable-stream": "^3.6.0" + }, + "dependencies": { + "readable-stream": { + "version": "3.6.2", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz", + "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==", + "requires": { + "inherits": "^2.0.3", + "string_decoder": "^1.1.1", + "util-deprecate": "^1.0.1" + } + } + } + }, "stackblur-canvas": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.5.0.tgz", @@ -4088,6 +4392,13 @@ "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==" }, + "ws": { + "version": "7.5.9", + "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz", + "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==", + "optional": true, + "requires": {} + }, "xml-js": { "version": "1.6.11", "resolved": "https://registry.npmjs.org/xml-js/-/xml-js-1.6.11.tgz", @@ -4096,6 +4407,33 @@ "sax": "^1.2.4" } }, + "y-protocols": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/y-protocols/-/y-protocols-1.0.6.tgz", + "integrity": "sha512-vHRF2L6iT3rwj1jub/K5tYcTT/mEYDUppgNPXwp8fmLpui9f7Yeq3OEtTLVF012j39QnV+KEQpNqoN7CWU7Y9Q==", + "requires": { + "lib0": "^0.2.85" + } + }, + "y-webrtc": { + "version": "10.2.5", + "resolved": "https://registry.npmjs.org/y-webrtc/-/y-webrtc-10.2.5.tgz", + "integrity": "sha512-ZyBNvTI5L28sQ2PQI0T/JvyWgvuTq05L21vGkIlcvNLNSJqAaLCBJRe3FHEqXoaogqWmRcEAKGfII4ErNXMnNw==", + "requires": { + "lib0": "^0.2.42", + "simple-peer": "^9.11.0", + "ws": "^7.2.0", + "y-protocols": "^1.0.5" + } + }, + "yjs": { + "version": "13.6.8", + "resolved": "https://registry.npmjs.org/yjs/-/yjs-13.6.8.tgz", + "integrity": "sha512-ZPq0hpJQb6f59B++Ngg4cKexDJTvfOgeiv0sBc4sUm8CaBWH7OQC4kcCgrqbjJ/B2+6vO49exvTmYfdlPtcjbg==", + "requires": { + "lib0": "^0.2.74" + } + }, "yocto-queue": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", diff --git a/simple-mind-map/package.json b/simple-mind-map/package.json index 506c5f20..03828fbe 100644 --- a/simple-mind-map/package.json +++ b/simple-mind-map/package.json @@ -1,6 +1,6 @@ { "name": "simple-mind-map", - "version": "0.7.2", + "version": "0.8.0", "description": "一个简单的web在线思维导图", "authors": [ { @@ -22,7 +22,8 @@ "scripts": { "lint": "eslint src/", "format": "prettier --write .", - "types": "npx -p typescript tsc index.js --declaration --allowJs --emitDeclarationOnly --outDir types --target es2017" + "types": "npx -p typescript tsc index.js --declaration --allowJs --emitDeclarationOnly --outDir types --target es2017 --skipLibCheck", + "wsServe": "node ./bin/wsServer.mjs" }, "module": "index.js", "main": "./dist/simpleMindMap.umd.min.js", @@ -37,7 +38,9 @@ "quill": "^1.3.6", "tern": "^0.24.3", "uuid": "^9.0.0", - "xml-js": "^1.6.11" + "xml-js": "^1.6.11", + "y-webrtc": "^10.2.5", + "yjs": "^13.6.8" }, "keywords": [ "javascript", diff --git a/simple-mind-map/src/constants/defaultOptions.js b/simple-mind-map/src/constants/defaultOptions.js index 6a4ad674..d658fc83 100644 --- a/simple-mind-map/src/constants/defaultOptions.js +++ b/simple-mind-map/src/constants/defaultOptions.js @@ -173,8 +173,8 @@ export const defaultOpt = { box-sizing: border-box; } `, - // 开启鼠标双击复位思维导图位置及缩放 - enableDblclickReset: false, + // 是否在鼠标双击时回到根节点，也就是让根节点居中显示 + enableDblclickBackToRootNode: false, // 导出图片时canvas的缩放倍数，该配置会和window.devicePixelRatio值取最大值 minExportImgCanvasScale: 2, // 节点鼠标hover和激活时显示的矩形边框的颜色 @@ -204,5 +204,20 @@ export const defaultOpt = { }, // 自定义标签的颜色 // {pass: 'green, unpass: 'red'} - tagsColorMap: {} + tagsColorMap: {}, + // 节点协作样式配置 + cooperateStyle: { + avatarSize: 22,// 头像大小 + fontSize: 12,// 如果是文字头像，那么文字的大小 + }, + // 关联线是否始终显示在节点上层 + // false：即创建关联线和激活关联线时处于最顶层，其他情况下处于节点下方 + associativeLineIsAlwaysAboveNode: true, + // 插入概要的默认文本 + defaultGeneralizationText: '概要', + // 粘贴文本的方式创建新节点时，控制是否按换行自动分割节点，即如果存在换行，那么会根据换行创建多个节点，否则只会创建一个节点 + // 可以传递一个函数，返回promise，resolve代表根据换行分割，reject代表忽略换行 + handleIsSplitByWrapOnPasteCreateNewNode: null, + // 多少时间内只允许添加一次历史记录，避免添加没有必要的中间状态，单位：ms + addHistoryTime: 100 } diff --git a/simple-mind-map/src/core/command/Command.js b/simple-mind-map/src/core/command/Command.js index 8b59b98d..d1638dee 100644 --- a/simple-mind-map/src/core/command/Command.js +++ b/simple-mind-map/src/core/command/Command.js @@ -1,4 +1,4 @@ -import { copyRenderTree, simpleDeepClone, nextTick } from '../../utils' +import { copyRenderTree, simpleDeepClone, throttle } from '../../utils' // 命令类 class Command { @@ -11,7 +11,11 @@ class Command { this.activeHistoryIndex = 0 // 注册快捷键 this.registerShortcutKeys() - this.addHistory = nextTick(this.addHistory, this) + this.addHistory = throttle( + this.addHistory, + this.mindMap.opt.addHistoryTime, + this + ) } // 清空历史数据 diff --git a/simple-mind-map/src/core/render/Render.js b/simple-mind-map/src/core/render/Render.js index 5f53134e..bcc11852 100644 --- a/simple-mind-map/src/core/render/Render.js +++ b/simple-mind-map/src/core/render/Render.js @@ -18,8 +18,12 @@ import { addDataToAppointNodes, createUidForAppointNodes, formatDataToArray, - getNodeIndex, - createUid + removeFromParentNodeData, + createUid, + getNodeDataIndex, + getNodeIndexInNodeList, + setDataToClipboard, + getDataFromClipboard } from '../../utils' import { shapeList } from './node/Shape' import { lineStyleProps } from '../../themes/default' @@ -52,7 +56,6 @@ class Render { this.opt = opt this.mindMap = opt.mindMap this.themeConfig = this.mindMap.themeConfig - this.draw = this.mindMap.draw // 渲染树，操作过程中修改的都是这里的数据 this.renderTree = merge({}, this.mindMap.opt.data || {}) // 是否重新渲染 @@ -61,6 +64,7 @@ class Render { this.isRendering = false // 是否存在等待渲染 this.hasWaitRendering = false + this.waitRenderingParams = [] // 用于缓存节点 this.nodeCache = {} this.lastNodeCache = {} @@ -97,22 +101,29 @@ class Render { )(this, this.mindMap.opt.layout) } + // 重新设置思维导图数据 + setData(data) { + if (this.mindMap.richText) { + this.renderTree = this.mindMap.richText.handleSetData(data) + } else { + this.renderTree = data + } + } + // 绑定事件 bindEvent() { - // 点击事件 + // 画布点击事件清除当前激活节点列表 this.mindMap.on('draw_click', e => { - // 清除激活状态 - let isTrueClick = true - let { useLeftKeySelectionRightKeyDrag } = this.mindMap.opt - if (useLeftKeySelectionRightKeyDrag) { - let mousedownPos = this.mindMap.event.mousedownPos - isTrueClick = - Math.abs(e.clientX - mousedownPos.x) <= 5 && - Math.abs(e.clientY - mousedownPos.y) <= 5 - } - if (isTrueClick && this.activeNodeList.length > 0) { - this.mindMap.execCommand('CLEAR_ACTIVE_NODE') - } + this.clearActiveNodeListOnDrawClick(e, 'click') + }) + // 画布右键事件事件清除当前激活节点列表 + this.mindMap.on('contextmenu', e => { + this.clearActiveNodeListOnDrawClick(e, 'contextmenu') + }) + // 鼠标双击回到根节点 + this.mindMap.svg.on('dblclick', () => { + if (!this.mindMap.opt.enableDblclickBackToRootNode) return + this.setRootNodeCenter() }) // let timer = null // this.mindMap.on('view_data_change', () => { @@ -149,6 +160,9 @@ class Render { 'INSERT_MULTI_CHILD_NODE', this.insertMultiChildNode ) + // 插入父节点 + this.insertParentNode = this.insertParentNode.bind(this) + this.mindMap.command.add('INSERT_PARENT_NODE', this.insertParentNode) // 上移节点 this.upNode = this.upNode.bind(this) this.mindMap.command.add('UP_NODE', this.upNode) @@ -165,6 +179,9 @@ class Render { // 删除节点 this.removeNode = this.removeNode.bind(this) this.mindMap.command.add('REMOVE_NODE', this.removeNode) + // 仅删除当前节点 + this.removeCurrentNode = this.removeCurrentNode.bind(this) + this.mindMap.command.add('REMOVE_CURRENT_NODE', this.removeCurrentNode) // 粘贴节点 this.pasteNode = this.pasteNode.bind(this) this.mindMap.command.add('PASTE_NODE', this.pasteNode) @@ -181,8 +198,8 @@ class Render { this.setNodeActive = this.setNodeActive.bind(this) this.mindMap.command.add('SET_NODE_ACTIVE', this.setNodeActive) // 清除所有激活节点 - this.clearAllActive = this.clearAllActive.bind(this) - this.mindMap.command.add('CLEAR_ACTIVE_NODE', this.clearAllActive) + this.clearActiveNode = this.clearActiveNode.bind(this) + this.mindMap.command.add('CLEAR_ACTIVE_NODE', this.clearActiveNode) // 切换节点是否展开 this.setNodeExpand = this.setNodeExpand.bind(this) this.mindMap.command.add('SET_NODE_EXPAND', this.setNodeExpand) @@ -249,23 +266,31 @@ class Render { this.mindMap.execCommand('INSERT_CHILD_NODE') }) // 插入同级节点 - this.insertNodeWrap = () => { + this.mindMap.keyCommand.addShortcut('Enter', () => { if (this.textEdit.showTextEdit) { return } this.mindMap.execCommand('INSERT_NODE') - } - this.mindMap.keyCommand.addShortcut('Enter', this.insertNodeWrap) + }) + // 插入父节点 + this.mindMap.keyCommand.addShortcut('Shift+Tab', () => { + this.mindMap.execCommand('INSERT_PARENT_NODE') + }) // 插入概要 - this.mindMap.keyCommand.addShortcut('Control+g', this.addGeneralization) + this.mindMap.keyCommand.addShortcut('Control+g', () => { + this.mindMap.execCommand('ADD_GENERALIZATION') + }) // 展开/收起节点 this.toggleActiveExpand = this.toggleActiveExpand.bind(this) this.mindMap.keyCommand.addShortcut('/', this.toggleActiveExpand) // 删除节点 - this.removeNodeWrap = () => { + this.mindMap.keyCommand.addShortcut('Del|Backspace', () => { this.mindMap.execCommand('REMOVE_NODE') - } - this.mindMap.keyCommand.addShortcut('Del|Backspace', this.removeNodeWrap) + }) + // 仅删除当前节点 + this.mindMap.keyCommand.addShortcut('Shift+Backspace', () => { + this.mindMap.execCommand('REMOVE_CURRENT_NODE') + }) // 节点编辑时某些快捷键会存在冲突，需要暂时去除 this.mindMap.on('before_show_text_edit', () => { this.startTextEdit() @@ -278,35 +303,64 @@ class Render { this.mindMap.execCommand('SELECT_ALL') }) // 一键整理布局 - this.mindMap.keyCommand.addShortcut('Control+l', this.resetLayout) + this.mindMap.keyCommand.addShortcut('Control+l', () => { + this.mindMap.execCommand('RESET_LAYOUT', this.resetLayout) + }) // 上移节点 - this.mindMap.keyCommand.addShortcut('Control+Up', this.upNode) + this.mindMap.keyCommand.addShortcut('Control+Up', () => { + this.mindMap.execCommand('UP_NODE') + }) // 下移节点 - this.mindMap.keyCommand.addShortcut('Control+Down', this.downNode) + this.mindMap.keyCommand.addShortcut('Control+Down', () => { + this.mindMap.execCommand('DOWN_NODE') + }) // 复制节点、剪切节点、粘贴节点的快捷键需开发者自行注册实现，可参考demo - this.copy = this.copy.bind(this) - this.mindMap.keyCommand.addShortcut('Control+c', this.copy) + this.mindMap.keyCommand.addShortcut('Control+c', () => { + this.copy() + }) this.mindMap.keyCommand.addShortcut('Control+v', () => { this.onPaste() }) - this.cut = this.cut.bind(this) - this.mindMap.keyCommand.addShortcut('Control+x', this.cut) + this.mindMap.keyCommand.addShortcut('Control+x', () => { + this.cut() + }) + // 根节点居中显示 + this.mindMap.keyCommand.addShortcut('Control+Enter', () => { + this.setRootNodeCenter() + }) + } + + // 鼠标点击画布时清空当前激活节点列表 + clearActiveNodeListOnDrawClick(e, eventType) { + if (this.activeNodeList.length <= 0) return + // 清除激活状态 + let isTrueClick = true + // 是否是左键多选节点，右键拖动画布 + const { useLeftKeySelectionRightKeyDrag } = this.mindMap.opt + // 如果鼠标按下和松开的距离较大，则不认为是点击事件 + if ( + eventType === 'contextmenu' + ? !useLeftKeySelectionRightKeyDrag + : useLeftKeySelectionRightKeyDrag + ) { + const mousedownPos = this.mindMap.event.mousedownPos + isTrueClick = + Math.abs(e.clientX - mousedownPos.x) <= 5 && + Math.abs(e.clientY - mousedownPos.y) <= 5 + } + if (isTrueClick) { + this.mindMap.execCommand('CLEAR_ACTIVE_NODE') + } } // 开启文字编辑，会禁用回车键和删除键相关快捷键防止冲突 startTextEdit() { this.mindMap.keyCommand.save() - // this.mindMap.keyCommand.removeShortcut('Del|Backspace') - // this.mindMap.keyCommand.removeShortcut('/') - // this.mindMap.keyCommand.removeShortcut('Enter', this.insertNodeWrap) } // 结束文字编辑，会恢复回车键和删除键相关快捷键 endTextEdit() { this.mindMap.keyCommand.restore() - // this.mindMap.keyCommand.addShortcut('Del|Backspace', this.removeNodeWrap) - // this.mindMap.keyCommand.addShortcut('/', this.toggleActiveExpand) - // this.mindMap.keyCommand.addShortcut('Enter', this.insertNodeWrap) } // 渲染 @@ -315,6 +369,7 @@ class Render { if (this.isRendering) { // 等待当前渲染完毕后再进行一次渲染 this.hasWaitRendering = true + this.waitRenderingParams = [callback, source] return } this.isRendering = true @@ -325,17 +380,18 @@ class Render { this.nodeCache = {} // 重新渲染需要清除激活状态 if (this.reRender) { - this.clearActive() + this.clearActiveNodeList() } // 计算布局 this.layout.doLayout(root => { // 删除本次渲染时不再需要的节点 Object.keys(this.lastNodeCache).forEach(uid => { if (!this.nodeCache[uid]) { + // 从激活节点列表里删除 + this.removeNodeFromActiveList(this.lastNodeCache[uid]) + this.emitNodeActiveEvent() + // 调用节点的销毁方法 this.lastNodeCache[uid].destroy() - if (this.lastNodeCache[uid].parent) { - this.lastNodeCache[uid].parent.removeLine() - } } }) // 更新根节点 @@ -346,8 +402,10 @@ class Render { this.mindMap.emit('node_tree_render_end') callback && callback() if (this.hasWaitRendering) { + const params = this.waitRenderingParams this.hasWaitRendering = false - this.render(callback, source) + this.waitRenderingParams = [] + this.render(...params) } else { // 触发一次保存，因为修改了渲染树的数据 if ( @@ -359,48 +417,48 @@ class Render { } }) }) - this.mindMap.emit('node_active', null, [...this.activeNodeList]) + this.emitNodeActiveEvent() } - // 清除当前激活的节点 - clearActive() { + // 清除当前所有激活节点，并会触发事件 + clearActiveNode() { + if (this.activeNodeList.length <= 0) { + return + } + this.clearActiveNodeList() + this.mindMap.emit('node_active', null, []) + } + + // 清除当前激活的节点列表 + clearActiveNodeList() { this.activeNodeList.forEach(item => { - this.setNodeActive(item, false) + this.mindMap.execCommand('SET_NODE_ACTIVE', item, false) }) this.activeNodeList = [] } - // 清除当前所有激活节点，并会触发事件 - clearAllActive() { - if (this.activeNodeList.length <= 0) { - return - } - this.clearActive() - this.mindMap.emit('node_active', null, []) - } - - // 添加节点到激活列表里 - addActiveNode(node) { - let index = this.findActiveNodeIndex(node) + // 添加节点到激活列表里 + addNodeToActiveList(node) { + const index = this.findActiveNodeIndex(node) if (index === -1) { + this.mindMap.execCommand('SET_NODE_ACTIVE', node, true) this.activeNodeList.push(node) } } - // 在激活列表里移除某个节点 - removeActiveNode(node) { + // 在激活列表里移除某个节点 + removeNodeFromActiveList(node) { let index = this.findActiveNodeIndex(node) if (index === -1) { return } + this.mindMap.execCommand('SET_NODE_ACTIVE', node, false) this.activeNodeList.splice(index, 1) } // 检索某个节点在激活列表里的索引 findActiveNodeIndex(node) { - return this.activeNodeList.findIndex(item => { - return item.uid === node.uid - }) + return getNodeIndexInNodeList(node, this.activeNodeList) } // 全选 @@ -409,14 +467,8 @@ class Render { this.root, null, node => { - if (!node.nodeData.data.isActive) { - node.nodeData.data.isActive = true - this.addActiveNode(node) - // 激活节点需要显示展开收起按钮 - node.showExpandBtn() - setTimeout(() => { - node.updateNodeActive() - }, 0) + if (!node.getData('isActive')) { + this.addNodeToActiveList(node) } }, null, @@ -424,23 +476,23 @@ class Render { 0, 0 ) - this.mindMap.emit('node_active', null, [...this.activeNodeList]) + this.emitNodeActiveEvent() } // 回退 back(step) { - this.clearAllActive() - let data = this.mindMap.command.back(step) - if (data) { - this.renderTree = data - this.mindMap.render() - } + this.backForward('back', step) } // 前进 forward(step) { - this.clearAllActive() - let data = this.mindMap.command.forward(step) + this.backForward('forward', step) + } + + // 前进回退 + backForward(type, step) { + this.mindMap.execCommand('CLEAR_ACTIVE_NODE') + const data = this.mindMap.command[type](step) if (data) { this.renderTree = data this.mindMap.render() @@ -476,25 +528,18 @@ class Render { appointChildren = addDataToAppointNodes(appointChildren, { ...params }) - const needDestroyNodeList = {} list.forEach(node => { if (node.isGeneralization || node.isRoot) { return } const parent = node.parent const isOneLayer = node.layerIndex === 1 - // 插入二级节点时根节点需要重新渲染 - if (isOneLayer && !needDestroyNodeList[parent.uid]) { - needDestroyNodeList[parent.uid] = parent - } // 新插入节点的默认文本 const text = isOneLayer ? defaultInsertSecondLevelNodeText : defaultInsertBelowSecondLevelNodeText // 计算插入位置 - const index = parent.nodeData.children.findIndex(item => { - return item.data.uid === node.uid - }) + const index = getNodeDataIndex(node) const newNodeData = { inserting: handleMultiNodes ? false : openEdit, // 如果同时对多个节点插入子节点，那么无需进入编辑模式, data: { @@ -503,16 +548,13 @@ class Render { uid: createUid(), ...(appointData || {}) }, - children: [...createUidForAppointNodes(appointChildren)] + children: [...createUidForAppointNodes(appointChildren, true)] } parent.nodeData.children.splice(index + 1, 0, newNodeData) }) - Object.keys(needDestroyNodeList).forEach(key => { - needDestroyNodeList[key].destroy() - }) // 如果同时对多个节点插入子节点，需要清除原来激活的节点 if (handleMultiNodes || !openEdit) { - this.clearActive() + this.clearActiveNodeList() } this.mindMap.render() } @@ -534,32 +576,20 @@ class Render { isActive: true } nodeList = addDataToAppointNodes(nodeList, params) - const needDestroyNodeList = {} list.forEach(node => { if (node.isGeneralization || node.isRoot) { return } const parent = node.parent - const isOneLayer = node.layerIndex === 1 - // 插入二级节点时根节点需要重新渲染 - if (isOneLayer && !needDestroyNodeList[parent.uid]) { - needDestroyNodeList[parent.uid] = parent - } // 计算插入位置 - const index = parent.nodeData.children.findIndex(item => { - return item.data.uid === node.uid - }) - const newNodeList = createUidForAppointNodes(simpleDeepClone(nodeList)) - parent.nodeData.children.splice( - index + 1, - 0, - ...newNodeList + const index = getNodeDataIndex(node) + const newNodeList = createUidForAppointNodes( + simpleDeepClone(nodeList), + true ) + parent.nodeData.children.splice(index + 1, 0, ...newNodeList) }) - Object.keys(needDestroyNodeList).forEach(key => { - needDestroyNodeList[key].destroy() - }) - this.clearActive() + this.clearActiveNodeList() this.mindMap.render() } @@ -610,18 +640,17 @@ class Render { ...params, ...(appointData || {}) }, - children: [...createUidForAppointNodes(appointChildren)] + children: [...createUidForAppointNodes(appointChildren, true)] } node.nodeData.children.push(newNode) // 插入子节点时自动展开子节点 - node.nodeData.data.expand = true - if (node.isRoot) { - node.destroy() - } + node.setData({ + expand: true + }) }) // 如果同时对多个节点插入子节点，需要清除原来激活的节点 if (handleMultiNodes || !openEdit) { - this.clearActive() + this.clearActiveNodeList() } this.mindMap.render() } @@ -650,15 +679,64 @@ class Render { if (!node.nodeData.children) { node.nodeData.children = [] } - childList = createUidForAppointNodes(childList) + childList = createUidForAppointNodes(childList, true) node.nodeData.children.push(...childList) // 插入子节点时自动展开子节点 - node.nodeData.data.expand = true - if (node.isRoot) { - node.destroy() - } + node.setData({ + expand: true + }) }) - this.clearActive() + this.clearActiveNodeList() + this.mindMap.render() + } + + // 插入父节点 + insertParentNode(openEdit = true, appointNodes, appointData) { + appointNodes = formatDataToArray(appointNodes) + if (this.activeNodeList.length <= 0 && appointNodes.length <= 0) { + return + } + this.textEdit.hideEditTextBox() + const { + defaultInsertSecondLevelNodeText, + defaultInsertBelowSecondLevelNodeText + } = this.mindMap.opt + const list = appointNodes.length > 0 ? appointNodes : this.activeNodeList + const handleMultiNodes = list.length > 1 + const isRichText = !!this.mindMap.richText + const params = { + expand: true, + richText: isRichText, + resetRichText: isRichText, + isActive: handleMultiNodes || !openEdit // 如果同时对多个节点插入子节点，那么需要把新增的节点设为激活状态。如果不进入编辑状态，那么也需要手动设为激活状态 + } + list.forEach(node => { + if (node.isGeneralization || node.isRoot) { + return + } + const text = + node.layerIndex === 1 + ? defaultInsertSecondLevelNodeText + : defaultInsertBelowSecondLevelNodeText + const newNode = { + inserting: handleMultiNodes ? false : openEdit, // 如果同时对多个节点插入子节点，那么无需进入编辑模式 + data: { + text: text, + uid: createUid(), + ...params, + ...(appointData || {}) + }, + children: [node.nodeData] + } + const parent = node.parent + // 获取当前节点所在位置 + const index = getNodeDataIndex(node) + parent.nodeData.children.splice(index, 1, newNode) + }) + // 如果同时对多个节点插入子节点，需要清除原来激活的节点 + if (handleMultiNodes || !openEdit) { + this.clearActiveNodeList() + } this.mindMap.render() } @@ -673,9 +751,7 @@ class Render { } let parent = node.parent let childList = parent.children - let index = childList.findIndex(item => { - return item.uid === node.uid - }) + let index = getNodeIndexInNodeList(node, childList) if (index === -1 || index === 0) { return } @@ -700,9 +776,7 @@ class Render { } let parent = node.parent let childList = parent.children - let index = childList.findIndex(item => { - return item.uid === node.uid - }) + let index = getNodeIndexInNodeList(node, childList) if (index === -1 || index === childList.length - 1) { return } @@ -719,29 +793,23 @@ class Render { // 复制节点 copy() { this.beingCopyData = this.copyNode() - this.setCopyDataToClipboard(this.beingCopyData) + setDataToClipboard({ + simpleMindMap: true, + data: this.beingCopyData + }) } // 剪切节点 cut() { this.mindMap.execCommand('CUT_NODE', copyData => { this.beingCopyData = copyData - this.setCopyDataToClipboard(copyData) + setDataToClipboard({ + simpleMindMap: true, + data: copyData + }) }) } - // 将粘贴或剪切的数据设置到用户剪切板中 - setCopyDataToClipboard(data) { - if (navigator.clipboard) { - navigator.clipboard.writeText( - JSON.stringify({ - simpleMindMap: true, - data - }) - ) - } - } - // 粘贴节点 paste() { if (this.beingCopyData) { @@ -751,27 +819,17 @@ class Render { // 粘贴事件 async onPaste() { - const { errorHandler } = this.mindMap.opt + const { errorHandler, handleIsSplitByWrapOnPasteCreateNewNode } = + this.mindMap.opt // 读取剪贴板的文字和图片 let text = null let img = null - if (navigator.clipboard) { - try { - text = await navigator.clipboard.readText() - const items = await navigator.clipboard.read() - if (items && items.length > 0) { - for (const clipboardItem of items) { - for (const type of clipboardItem.types) { - if (/^image\//.test(type)) { - img = await clipboardItem.getType(type) - break - } - } - } - } - } catch (error) { - errorHandler(ERROR_TYPES.READ_CLIPBOARD_ERROR, error) - } + try { + const res = await getDataFromClipboard() + text = res.text + img = res.img + } catch (error) { + errorHandler(ERROR_TYPES.READ_CLIPBOARD_ERROR, error) } // 检查剪切板数据是否有变化 // 通过图片大小来判断图片是否发生变化，可能是不准确的，但是目前没有其他好方法 @@ -827,9 +885,36 @@ class Render { Array.isArray(smmData) ? smmData : [smmData] ) } else { - this.mindMap.execCommand('INSERT_CHILD_NODE', false, [], { - text + const textArr = text.split(/\r?\n|(? { + return !!item }) + // 判断是否需要根据换行自动分割节点 + if (textArr.length > 1 && handleIsSplitByWrapOnPasteCreateNewNode) { + handleIsSplitByWrapOnPasteCreateNewNode() + .then(() => { + this.mindMap.execCommand( + 'INSERT_MULTI_CHILD_NODE', + [], + textArr.map(item => { + return { + data: { + text: item + }, + children: [] + } + }) + ) + }) + .catch(() => { + this.mindMap.execCommand('INSERT_CHILD_NODE', false, [], { + text + }) + }) + } else { + this.mindMap.execCommand('INSERT_CHILD_NODE', false, [], { + text + }) + } } } // 存在图片，则添加到当前激活节点 @@ -880,9 +965,7 @@ class Render { // 移动节点 let nodeParent = item.parent let nodeBorthers = nodeParent.children - let nodeIndex = nodeBorthers.findIndex(item2 => { - return item.uid === item2.uid - }) + let nodeIndex = getNodeIndexInNodeList(item, nodeBorthers) if (nodeIndex === -1) { return } @@ -892,9 +975,7 @@ class Render { // 目标节点 let existParent = exist.parent let existBorthers = existParent.children - let existIndex = existBorthers.findIndex(item2 => { - return item2.uid === exist.uid - }) + let existIndex = getNodeIndexInNodeList(exist, existBorthers) if (existIndex === -1) { return } @@ -914,7 +995,9 @@ class Render { (node.layerIndex === 1 && toNode.layerIndex !== 1) || (node.layerIndex !== 1 && toNode.layerIndex === 1) if (nodeLayerChanged) { - node.nodeData.data.resetRichText = true + node.setData({ + resetRichText: true + }) } } } @@ -933,49 +1016,29 @@ class Render { return node.isRoot }) if (root) { - this.clearActive() - root.children.forEach(child => { - child.remove() - }) + this.clearActiveNodeList() root.children = [] root.nodeData.children = [] } else { // 如果只选中了一个节点，删除后激活其兄弟节点或者父节点 - if ( - this.activeNodeList.length === 1 && - !this.activeNodeList[0].isGeneralization && - this.mindMap.opt.deleteNodeActive - ) { - const node = this.activeNodeList[0] - const broList = node.parent.children - const nodeIndex = broList.findIndex(item => item.uid === node.uid) - // 如果后面有兄弟节点 - if (nodeIndex < broList.length - 1) { - needActiveNode = broList[nodeIndex + 1] - } else { - // 如果前面有兄弟节点 - if (nodeIndex > 0) { - needActiveNode = broList[nodeIndex - 1] - } else { - // 没有兄弟节点 - needActiveNode = node.parent - } - } - } + needActiveNode = this.getNextActiveNode() for (let i = 0; i < list.length; i++) { let node = list[i] if (isAppointNodes) list.splice(i, 1) if (node.isGeneralization) { // 删除概要节点 - this.setNodeData(node.generalizationBelongNode, { - generalization: null - }) - node.generalizationBelongNode.update() - this.removeActiveNode(node) + this.mindMap.execCommand( + 'SET_NODE_DATA', + node.generalizationBelongNode, + { + generalization: null + } + ) + this.removeNodeFromActiveList(node) i-- } else { - this.removeActiveNode(node) - this.removeOneNode(node) + this.removeNodeFromActiveList(node) + removeFromParentNodeData(node) i-- } } @@ -983,20 +1046,80 @@ class Render { this.activeNodeList = [] // 激活被删除节点的兄弟节点或父节点 if (needActiveNode) { - this.activeNodeList.push(needActiveNode) - this.setNodeActive(needActiveNode, true) - needActiveNode = null + this.addNodeToActiveList(needActiveNode) } - this.mindMap.emit('node_active', null, [...this.activeNodeList]) + this.emitNodeActiveEvent() this.mindMap.render() } - // 移除某个指定节点 - removeOneNode(node) { - let index = getNodeIndex(node) - node.remove() - node.parent.children.splice(index, 1) - node.parent.nodeData.children.splice(index, 1) + // 仅删除当前节点 + removeCurrentNode(appointNodes = []) { + appointNodes = formatDataToArray(appointNodes) + if (this.activeNodeList.length <= 0 && appointNodes.length <= 0) { + return + } + // 删除节点后需要激活的节点，如果只选中了一个节点，删除后激活其兄弟节点或者父节点 + let needActiveNode = this.getNextActiveNode() + let isAppointNodes = appointNodes.length > 0 + let list = isAppointNodes ? appointNodes : this.activeNodeList + list = list.filter(node => { + return !node.isRoot + }) + for (let i = 0; i < list.length; i++) { + let node = list[i] + if (node.isGeneralization) { + // 删除概要节点 + this.mindMap.execCommand( + 'SET_NODE_DATA', + node.generalizationBelongNode, + { + generalization: null + } + ) + } else { + const parent = node.parent + const index = getNodeDataIndex(node) + parent.nodeData.children.splice( + index, + 1, + ...(node.nodeData.children || []) + ) + } + } + this.activeNodeList = [] + // 激活被删除节点的兄弟节点或父节点 + if (needActiveNode) { + this.addNodeToActiveList(needActiveNode) + } + this.emitNodeActiveEvent() + this.mindMap.render() + } + + // 计算下一个可激活的节点 + getNextActiveNode() { + let needActiveNode = null + if ( + this.activeNodeList.length === 1 && + !this.activeNodeList[0].isGeneralization && + this.mindMap.opt.deleteNodeActive + ) { + const node = this.activeNodeList[0] + const broList = node.parent.children + const nodeIndex = getNodeIndexInNodeList(node, broList) + // 如果后面有兄弟节点 + if (nodeIndex < broList.length - 1) { + needActiveNode = broList[nodeIndex + 1] + } else { + // 如果前面有兄弟节点 + if (nodeIndex > 0) { + needActiveNode = broList[nodeIndex - 1] + } else { + // 没有兄弟节点 + needActiveNode = node.parent + } + } + } + return needActiveNode } // 复制节点 @@ -1015,19 +1138,22 @@ class Render { if (this.activeNodeList.length <= 0) { return } + // 找出激活节点中的顶层节点列表，并过滤掉根节点 const nodeList = getTopAncestorsFomNodeList(this.activeNodeList).filter( node => { return !node.isRoot } ) + // 复制数据 const copyData = nodeList.map(node => { return copyNodeTree({}, node, true) }) + // 从父节点的数据中移除 nodeList.forEach(node => { - this.removeActiveNode(node) - this.removeOneNode(node) + removeFromParentNodeData(node) }) - this.mindMap.emit('node_active', null, [...this.activeNodeList]) + // 清空激活节点列表 + this.clearActiveNodeList() this.mindMap.render() if (callback && typeof callback === 'function') { callback(copyData) @@ -1042,15 +1168,12 @@ class Render { }) nodeList.forEach(item => { this.checkNodeLayerChange(item, toNode) - this.removeActiveNode(item) - this.removeOneNode(item) + this.removeNodeFromActiveList(item) + removeFromParentNodeData(item) toNode.nodeData.children.push(item.nodeData) }) - this.mindMap.emit('node_active', null, [...this.activeNodeList]) + this.emitNodeActiveEvent() this.mindMap.render() - if (toNode.isRoot) { - toNode.destroy() - } } // 粘贴节点到节点 @@ -1062,7 +1185,9 @@ class Render { this.activeNodeList.forEach(node => { node.nodeData.children.push( ...data.map(item => { - return simpleDeepClone(item) + const newData = simpleDeepClone(item) + createUidForAppointNodes([newData], true) + return newData }) ) }) @@ -1076,14 +1201,9 @@ class Render { } // 如果开启了富文本，则需要应用到富文本上 if (this.mindMap.richText) { - let config = this.mindMap.richText.normalStyleToRichTextStyle({ + this.mindMap.richText.setNotActiveNodeStyle(node, { [prop]: value }) - if (Object.keys(config).length > 0) { - this.mindMap.richText.showEditText(node) - this.mindMap.richText.formatAllText(config) - this.mindMap.richText.hideEditText([node]) - } } this.setNodeDataRender(node, data) // 更新了连线的样式 @@ -1097,12 +1217,7 @@ class Render { let data = { ...style } // 如果开启了富文本，则需要应用到富文本上 if (this.mindMap.richText) { - let config = this.mindMap.richText.normalStyleToRichTextStyle(style) - if (Object.keys(config).length > 0) { - this.mindMap.richText.showEditText(node) - this.mindMap.richText.formatAllText(config) - this.mindMap.richText.hideEditText([node]) - } + this.mindMap.richText.setNotActiveNodeStyle(node, style) } this.setNodeDataRender(node, data) // 更新了连线的样式 @@ -1120,38 +1235,17 @@ class Render { // 设置节点是否激活 setNodeActive(node, active) { - this.setNodeData(node, { + this.mindMap.execCommand('SET_NODE_DATA', node, { isActive: active }) - // 切换激活状态，需要切换展开收起按钮的显隐 - if (active) { - node.showExpandBtn() - } else { - node.hideExpandBtn() - } - node.updateNodeActive() + node.updateNodeByActive(active) } // 设置节点是否展开 setNodeExpand(node, expand) { - this.setNodeData(node, { + this.mindMap.execCommand('SET_NODE_DATA', node, { expand }) - if (expand) { - // 展开 - node.children.forEach(item => { - item.render() - }) - node.renderLine() - // node.updateExpandBtnNode() - } else { - // 收缩 - node.children.forEach(item => { - item.remove() - }) - node.removeLine() - // node.updateExpandBtnNode() - } this.mindMap.render() } @@ -1179,8 +1273,7 @@ class Render { this.renderTree, null, (node, parent, isRoot) => { - node._node = null - if (!isRoot) { + if (!isRoot && node.children && node.children.length > 0) { node.data.expand = false } }, @@ -1200,8 +1293,12 @@ class Render { this.renderTree, null, (node, parent, isRoot, layerIndex) => { - node._node = null - node.data.expand = layerIndex < level + const expand = layerIndex < level + if (expand) { + node.data.expand = true + } else if (!isRoot && node.children && node.children.length > 0) { + node.data.expand = false + } }, null, true, @@ -1223,11 +1320,7 @@ class Render { // 切换节点展开状态 toggleNodeExpand(node) { - this.mindMap.execCommand( - 'SET_NODE_EXPAND', - node, - !node.nodeData.data.expand - ) + this.mindMap.execCommand('SET_NODE_EXPAND', node, !node.getData('expand')) } // 设置节点文本 @@ -1305,15 +1398,18 @@ class Render { return } this.activeNodeList.forEach(node => { - if (node.nodeData.data.generalization || node.isRoot) { + if (node.getData('generalization') || node.isRoot) { return } - this.setNodeData(node, { + this.mindMap.execCommand('SET_NODE_DATA', node, { generalization: data || { - text: '概要' + text: this.mindMap.opt.defaultGeneralizationText } }) - node.update() + // 插入子节点时自动展开子节点 + node.setData({ + expand: true + }) }) this.mindMap.render() } @@ -1324,13 +1420,12 @@ class Render { return } this.activeNodeList.forEach(node => { - if (!node.nodeData.data.generalization) { + if (!node.getData('generalization')) { return } - this.setNodeData(node, { + this.mindMap.execCommand('SET_NODE_DATA', node, { generalization: null }) - node.update() }) this.mindMap.render() } @@ -1339,7 +1434,7 @@ class Render { setNodeCustomPosition(node, left = undefined, top = undefined) { let nodeList = [node] || this.activeNodeList nodeList.forEach(item => { - this.setNodeData(item, { + this.mindMap.execCommand('SET_NODE_DATA', item, { customLeft: left, customTop: top }) @@ -1354,7 +1449,7 @@ class Render { node => { node.customLeft = undefined node.customTop = undefined - this.setNodeData(node, { + this.mindMap.execCommand('SET_NODE_DATA', node, { customLeft: undefined, customTop: undefined }) @@ -1380,7 +1475,7 @@ class Render { // 定位到指定节点 goTargetNode(node, callback = () => {}) { - let uid = typeof node === 'string' ? node : node.nodeData.data.uid + let uid = typeof node === 'string' ? node : node.getData('uid') if (!uid) return this.expandToNodeUid(uid, () => { let targetNode = this.findNodeByUid(uid) @@ -1401,13 +1496,9 @@ class Render { // 设置节点数据，并判断是否渲染 setNodeDataRender(node, data, notRender = false) { - this.setNodeData(node, data) + this.mindMap.execCommand('SET_NODE_DATA', node, data) let changed = node.reRender() if (changed) { - if (node.isGeneralization) { - // 概要节点 - node.generalizationBelongNode.updateGeneralization() - } if (!notRender) this.mindMap.render() } else { this.mindMap.emit('node_tree_render_end') @@ -1431,6 +1522,11 @@ class Render { this.mindMap.view.setScale(1) } + // 回到中心主题，即设置根节点到画布中心 + setRootNodeCenter() { + this.moveNodeToCenter(this.root) + } + // 展开到指定uid的节点 expandToNodeUid(uid, callback = () => {}) { let parentsList = [] @@ -1461,13 +1557,18 @@ class Render { findNodeByUid(uid) { let res = null walk(this.root, null, node => { - if (node.nodeData.data.uid === uid) { + if (node.getData('uid') === uid) { res = node return true } }) return res } + + // 派发节点激活改变事件 + emitNodeActiveEvent() { + this.mindMap.emit('node_active', null, [...this.activeNodeList]) + } } export default Render diff --git a/simple-mind-map/src/core/render/TextEdit.js b/simple-mind-map/src/core/render/TextEdit.js index 19336af2..da828cdf 100644 --- a/simple-mind-map/src/core/render/TextEdit.js +++ b/simple-mind-map/src/core/render/TextEdit.js @@ -173,7 +173,7 @@ export default class TextEdit { let scale = this.mindMap.view.scale let lineHeight = node.style.merge('lineHeight') let fontSize = node.style.merge('fontSize') - let textLines = (this.cacheEditingText || node.nodeData.data.text) + let textLines = (this.cacheEditingText || node.getData('text')) .split(/\n/gim) .map(item => { return htmlEscape(item) diff --git a/simple-mind-map/src/core/render/node/Node.js b/simple-mind-map/src/core/render/node/Node.js index d287755b..f4eb0868 100644 --- a/simple-mind-map/src/core/render/node/Node.js +++ b/simple-mind-map/src/core/render/node/Node.js @@ -6,6 +6,7 @@ import nodeExpandBtnMethods from './nodeExpandBtn' import nodeCommandWrapsMethods from './nodeCommandWraps' import nodeCreateContentsMethods from './nodeCreateContents' import nodeExpandBtnPlaceholderRectMethods from './nodeExpandBtnPlaceholderRect' +import nodeCooperateMethods from './nodeCooperate' import { CONSTANTS } from '../../../constants/constant' // 节点类 @@ -21,7 +22,9 @@ class Node { // 渲染实例 this.renderer = opt.renderer // 渲染器 - this.draw = opt.draw || null + this.draw = this.mindMap.draw + this.nodeDraw = this.mindMap.nodeDraw + this.lineDraw = this.mindMap.lineDraw // 样式实例 this.style = new Style(this) // 形状实例 @@ -55,6 +58,8 @@ class Node { this.parent = opt.parent || null // 子节点 this.children = opt.children || [] + // 当前同时操作该节点的用户列表 + this.userList = [] // 节点内容的容器 this.group = null this.shapeNode = null // 节点形状节点 @@ -74,6 +79,7 @@ class Node { this._openExpandNode = null this._closeExpandNode = null this._fillExpandNode = null + this._userListGroup = null this._lines = [] this._generalizationLine = null this._generalizationNode = null @@ -121,6 +127,12 @@ class Node { Object.keys(nodeCreateContentsMethods).forEach(item => { this[item] = nodeCreateContentsMethods[item].bind(this) }) + // 协同相关 + if (this.mindMap.cooperate) { + Object.keys(nodeCooperateMethods).forEach(item => { + this[item] = nodeCooperateMethods[item].bind(this) + }) + } // 初始化 this.getSize() } @@ -283,6 +295,8 @@ class Node { this.group.add(this.shapeNode) // 渲染一个隐藏的矩形区域，用来触发展开收起按钮的显示 this.renderExpandBtnPlaceholderRect() + // 创建协同头像节点 + if (this.createUserListNode) this.createUserListNode() // 概要节点添加一个带所属节点id的类名 if (this.isGeneralization && this.generalizationBelongNode) { this.group.addClass('generalization_' + this.generalizationBelongNode.uid) @@ -416,17 +430,16 @@ class Node { // 多选和取消多选 if (e.ctrlKey && enableCtrlKeyNodeSelection) { this.isMultipleChoice = true - let isActive = this.nodeData.data.isActive + let isActive = this.getData('isActive') if (!isActive) this.mindMap.emit( 'before_node_active', this, this.renderer.activeNodeList ) - this.mindMap.execCommand('SET_NODE_ACTIVE', this, !isActive) - this.mindMap.renderer[isActive ? 'removeActiveNode' : 'addActiveNode']( - this - ) + this.mindMap.renderer[ + isActive ? 'removeNodeFromActiveList' : 'addNodeToActiveList' + ](this) this.mindMap.emit('node_active', isActive ? null : this, [ ...this.mindMap.renderer.activeNodeList ]) @@ -477,10 +490,13 @@ class Node { ) { return } - if (this.nodeData.data.isActive) { - this.renderer.clearActive() + // 如果有且只有当前节点激活了，那么不需要重新激活 + if ( + !(this.getData('isActive') && this.renderer.activeNodeList.length === 1) + ) { + this.renderer.clearActiveNodeList() + this.active(e) } - this.active(e) this.mindMap.emit('node_contextmenu', e, this) }) } @@ -491,13 +507,12 @@ class Node { return } e && e.stopPropagation() - if (this.nodeData.data.isActive) { + if (this.getData('isActive')) { return } this.mindMap.emit('before_node_active', this, this.renderer.activeNodeList) - this.renderer.clearActive() - this.mindMap.execCommand('SET_NODE_ACTIVE', this, true) - this.renderer.addActiveNode(this) + this.renderer.clearActiveNodeList() + this.renderer.addNodeToActiveList(this) this.mindMap.emit('node_active', this, [...this.renderer.activeNodeList]) } @@ -506,7 +521,7 @@ class Node { if (!this.group) { return } - this.updateNodeActive() + this.updateNodeActiveClass() let { alwaysShowExpandBtn } = this.mindMap.opt if (alwaysShowExpandBtn) { // 需要移除展开收缩按钮 @@ -517,7 +532,7 @@ class Node { this.renderExpandBtn() } } else { - let { isActive, expand } = this.nodeData.data + let { isActive, expand } = this.getData() // 展开状态且非激活状态，且当前鼠标不在它上面，才隐藏 if (expand && !isActive && !this._isMouseenter) { this.hideExpandBtn() @@ -527,6 +542,8 @@ class Node { } // 更新概要 this.renderGeneralization() + // 更新协同头像 + if (this.updateUserListNode) this.updateUserListNode() // 更新节点位置 let t = this.group.transform() // // 如果上次不在可视区内，且本次也不在，那么直接返回 @@ -580,12 +597,25 @@ class Node { } // 更新节点激活状态 - updateNodeActive() { + updateNodeActiveClass() { if (!this.group) return - const isActive = this.nodeData.data.isActive + const isActive = this.getData('isActive') this.group[isActive ? 'addClass' : 'removeClass']('active') } + // 根据是否激活更新节点 + updateNodeByActive(active) { + if (this.group) { + // 切换激活状态，需要切换展开收起按钮的显隐 + if (active) { + this.showExpandBtn() + } else { + this.hideExpandBtn() + } + this.updateNodeActiveClass() + } + } + // 递归渲染 render(callback = () => {}) { // 节点 @@ -599,11 +629,11 @@ class Node { cursor: 'default' }) this.bindGroupEvent() - this.draw.add(this.group) + this.nodeDraw.add(this.group) this.layout() this.update() } else { - this.draw.add(this.group) + this.nodeDraw.add(this.group) if (this.needLayout) { this.needLayout = false this.layout() @@ -615,7 +645,7 @@ class Node { if ( this.children && this.children.length && - this.nodeData.data.expand !== false + this.getData('expand') !== false ) { let index = 0 this.children.forEach(item => { @@ -660,6 +690,9 @@ class Node { this.removeGeneralization() this.removeLine() this.group = null + if (this.parent) { + this.parent.removeLine() + } } // 隐藏节点 @@ -760,7 +793,7 @@ class Node { // 连线 renderLine(deep = false) { - if (this.nodeData.data.expand === false) { + if (this.getData('expand') === false) { return } let childrenLen = this.nodeData.children.length @@ -774,7 +807,7 @@ class Node { if (childrenLen > this._lines.length) { // 创建缺少的线 new Array(childrenLen - this._lines.length).fill(0).forEach(() => { - this._lines.push(this.draw.path()) + this._lines.push(this.lineDraw.path()) }) } else if (childrenLen < this._lines.length) { // 删除多余的线 @@ -882,7 +915,7 @@ class Node { // 获取padding值 getPaddingVale() { - let { isActive } = this.nodeData.data + let { isActive } = this.getData() return { paddingX: this.getStyle('paddingX', true, isActive), paddingY: this.getStyle('paddingY', true, isActive) @@ -925,7 +958,7 @@ class Node { // 获取数据 getData(key) { - return key ? this.nodeData.data[key] || '' : this.nodeData.data + return key ? this.nodeData.data[key] : this.nodeData.data } // 是否存在自定义样式 diff --git a/simple-mind-map/src/core/render/node/Style.js b/simple-mind-map/src/core/render/node/Style.js index b7cb95e4..ecc190f7 100644 --- a/simple-mind-map/src/core/render/node/Style.js +++ b/simple-mind-map/src/core/render/node/Style.js @@ -88,7 +88,7 @@ class Style { // 获取自身自定义样式 getSelfStyle(prop) { - return this.ctx.nodeData.data[prop] + return this.ctx.getData(prop) } // 矩形 @@ -107,7 +107,7 @@ class Style { // !this.ctx.isRoot && // !this.ctx.isGeneralization && // this.ctx.mindMap.themeConfig.nodeUseLineStyle && - // !this.ctx.nodeData.data.isActive + // !this.ctx.getData('isActive') // ) { // return // } @@ -225,7 +225,7 @@ class Style { // 是否设置了自定义的样式 hasCustomStyle() { let res = false - Object.keys(this.ctx.nodeData.data).forEach(item => { + Object.keys(this.ctx.getData()).forEach(item => { if (checkIsNodeStyleDataKey(item)) { res = true } diff --git a/simple-mind-map/src/core/render/node/nodeCooperate.js b/simple-mind-map/src/core/render/node/nodeCooperate.js new file mode 100644 index 00000000..970dfb2c --- /dev/null +++ b/simple-mind-map/src/core/render/node/nodeCooperate.js @@ -0,0 +1,104 @@ +import { Circle, G, Text, Image } from '@svgdotjs/svg.js' +import { generateColorByContent } from '../../../utils/index' + +// 协同相关功能 + +// 创建容器 +function createUserListNode() { + // 如果没有注册协作插件，那么需要创建 + if (!this.mindMap.cooperate) return + this._userListGroup = new G() + this.group.add(this._userListGroup) +} + +// 创建文本头像 +function createTextAvatar(item) { + const { avatarSize, fontSize } = this.mindMap.opt.cooperateStyle + const g = new G() + const str = item.isMore ? item.name : String(item.name)[0] + // 圆 + const circle = new Circle().size(avatarSize, avatarSize) + circle.fill({ + color: item.color || generateColorByContent(str) + }) + // 文本 + const text = new Text() + .text(str) + .fill({ + color: '#fff' + }) + .css({ + 'font-size': fontSize + }) + .dx(-fontSize / 2) + .dy((avatarSize - fontSize) / 2) + g.add(circle).add(text) + return g +} + +// 创建图片头像 +function createImageAvatar(item) { + const { avatarSize } = this.mindMap.opt.cooperateStyle + return new Image().load(item.avatar).size(avatarSize, avatarSize) +} + +// 更新渲染 +function updateUserListNode() { + if (!this._userListGroup) return + const { avatarSize } = this.mindMap.opt.cooperateStyle + this._userListGroup.clear() + // 根据当前节点长度计算最多能显示几个 + const length = this.userList.length + const maxShowCount = Math.floor(this.width / avatarSize) + const list = [] + if (length > maxShowCount) { + // 如果当前用户数量比最多能显示的多，最后需要显示一个提示信息 + list.push(...this.userList.slice(0, maxShowCount - 1), { + isMore: true, + name: '+' + (length - maxShowCount + 1) + }) + } else { + list.push(...this.userList) + } + list.forEach((item, index) => { + let node = null + if (item.avatar) { + node = this.createImageAvatar(item) + } else { + node = this.createTextAvatar(item) + } + node.x(index * avatarSize).cy(-avatarSize / 2) + this._userListGroup.add(node) + }) +} + +// 添加用户 +function addUser(userInfo) { + if ( + this.userList.find(item => { + return item.id == userInfo.id + }) + ) + return + this.userList.push(userInfo) + this.updateUserListNode() +} + +// 移除用户 +function removeUser(userInfo) { + const index = this.userList.findIndex(item => { + return item.id == userInfo.id + }) + if (index === -1) return + this.userList.splice(index, 1) + this.updateUserListNode() +} + +export default { + createUserListNode, + updateUserListNode, + createTextAvatar, + createImageAvatar, + addUser, + removeUser +} diff --git a/simple-mind-map/src/core/render/node/nodeCreateContents.js b/simple-mind-map/src/core/render/node/nodeCreateContents.js index e4487fa6..13e8ce76 100644 --- a/simple-mind-map/src/core/render/node/nodeCreateContents.js +++ b/simple-mind-map/src/core/render/node/nodeCreateContents.js @@ -12,14 +12,14 @@ import { CONSTANTS, commonCaches } from '../../../constants/constant' // 创建图片节点 function createImgNode() { - let img = this.nodeData.data.image + let img = this.getData('image') if (!img) { return } let imgSize = this.getImgShowSize() let node = new Image().load(img).size(...imgSize) - if (this.nodeData.data.imageTitle) { - node.attr('title', this.nodeData.data.imageTitle) + if (this.getData('imageTitle')) { + node.attr('title', this.getData('imageTitle')) } node.on('dblclick', e => { this.mindMap.emit('node_img_dblclick', this, e) @@ -42,7 +42,7 @@ function createImgNode() { // 获取图片显示宽高 function getImgShowSize() { - const { custom, width, height } = this.nodeData.data.imageSize + const { custom, width, height } = this.getData('imageSize') // 如果是自定义了图片的宽高，那么不受最大宽高限制 if (custom) return [width, height] return resizeImgSize( @@ -55,7 +55,7 @@ function getImgShowSize() { // 创建icon节点 function createIconNode() { - let _data = this.nodeData.data + let _data = this.getData() if (!_data.icon || _data.icon.length <= 0) { return [] } @@ -91,7 +91,7 @@ function createRichTextNode() { let g = new G() // 重新设置富文本节点内容 let recoverText = false - if (this.nodeData.data.resetRichText) { + if (this.getData('resetRichText')) { delete this.nodeData.data.resetRichText recoverText = true } @@ -102,7 +102,7 @@ function createRichTextNode() { } } if (recoverText) { - let text = this.nodeData.data.text + let text = this.getData('text') // 判断节点内容是否是富文本 let isRichText = checkIsRichText(text) // 样式字符串 @@ -116,9 +116,11 @@ function createRichTextNode() { // 非富文本 text = `

${text}

` } - this.nodeData.data.text = text + this.setData({ + text: text + }) } - let html = `
${this.nodeData.data.text}
` + let html = `
${this.getData('text')}
` if (!commonCaches.measureRichtextNodeTextSizeEl) { commonCaches.measureRichtextNodeTextSizeEl = document.createElement('div') commonCaches.measureRichtextNodeTextSizeEl.style.position = 'fixed' @@ -157,7 +159,7 @@ function createRichTextNode() { // 创建文本节点 function createTextNode() { - if (this.nodeData.data.richText) { + if (this.getData('richText')) { return this.createRichTextNode() } let g = new G() @@ -166,8 +168,8 @@ function createTextNode() { // 文本超长自动换行 let textStyle = this.style.getTextFontStyle() let textArr = [] - if (!isUndef(this.nodeData.data.text)) { - textArr = String(this.nodeData.data.text).split(/\n/gim) + if (!isUndef(this.getData('text'))) { + textArr = String(this.getData('text')).split(/\n/gim) } let maxWidth = this.mindMap.opt.textAutoWrapWidth let isMultiLine = false @@ -215,7 +217,7 @@ function createTextNode() { // 创建超链接节点 function createHyperlinkNode() { - let { hyperlink, hyperlinkTitle } = this.nodeData.data + let { hyperlink, hyperlinkTitle } = this.getData() if (!hyperlink) { return } @@ -245,7 +247,7 @@ function createHyperlinkNode() { // 创建标签节点 function createTagNode() { - let tagData = this.nodeData.data.tag + let tagData = this.getData('tag') if (!tagData || tagData.length <= 0) { return [] } @@ -274,7 +276,7 @@ function createTagNode() { // 创建备注节点 function createNoteNode() { - if (!this.nodeData.data.note) { + if (!this.getData('note')) { return null } let iconSize = this.mindMap.themeConfig.iconSize @@ -302,7 +304,7 @@ function createNoteNode() { this.mindMap.opt.customInnerElsAppendTo || document.body targetNode.appendChild(this.noteEl) } - this.noteEl.innerText = this.nodeData.data.note + this.noteEl.innerText = this.getData('note') } node.on('mouseover', () => { let { left, top } = node.node.getBoundingClientRect() @@ -312,7 +314,7 @@ function createNoteNode() { this.noteEl.style.display = 'block' } else { this.mindMap.opt.customNoteContentShow.show( - this.nodeData.data.note, + this.getData('note'), left, top + iconSize ) diff --git a/simple-mind-map/src/core/render/node/nodeExpandBtn.js b/simple-mind-map/src/core/render/node/nodeExpandBtn.js index ee79db27..4f4dee14 100644 --- a/simple-mind-map/src/core/render/node/nodeExpandBtn.js +++ b/simple-mind-map/src/core/render/node/nodeExpandBtn.js @@ -52,7 +52,7 @@ function sumNode(data = []) { } // 创建或更新展开收缩按钮内容 function updateExpandBtnNode() { - let { expand } = this.nodeData.data + let { expand } = this.getData() // 如果本次和上次的展开状态一样则返回 if (expand === this._lastExpandBtnType) return if (this._expandBtn) { @@ -129,7 +129,7 @@ function renderExpandBtn() { this.mindMap.execCommand( 'SET_NODE_EXPAND', this, - !this.nodeData.data.expand + !this.getData('expand') ) this.mindMap.emit('expand_btn_click', this) }) @@ -164,7 +164,7 @@ function showExpandBtn() { function hideExpandBtn() { if (this.mindMap.opt.alwaysShowExpandBtn || this._isMouseenter) return // 非激活状态且展开状态鼠标移出才隐藏按钮 - let { isActive, expand } = this.nodeData.data + let { isActive, expand } = this.getData() if (!isActive && expand) { setTimeout(() => { this.removeExpandBtn() diff --git a/simple-mind-map/src/core/render/node/nodeGeneralization.js b/simple-mind-map/src/core/render/node/nodeGeneralization.js index 3459e0e2..61514324 100644 --- a/simple-mind-map/src/core/render/node/nodeGeneralization.js +++ b/simple-mind-map/src/core/render/node/nodeGeneralization.js @@ -3,7 +3,7 @@ import { createUid } from '../../../utils/index' // 检查是否存在概要 function checkHasGeneralization() { - return !!this.nodeData.data.generalization + return !!this.getData('generalization') } // 创建概要节点 @@ -12,24 +12,23 @@ function createGeneralizationNode() { return } if (!this._generalizationLine) { - this._generalizationLine = this.draw.path() + this._generalizationLine = this.lineDraw.path() } if (!this._generalizationNode) { this._generalizationNode = new Node({ data: { - data: this.nodeData.data.generalization + data: this.getData('generalization') }, uid: createUid(), renderer: this.renderer, mindMap: this.mindMap, - draw: this.draw, isGeneralization: true }) this._generalizationNodeWidth = this._generalizationNode.width this._generalizationNodeHeight = this._generalizationNode.height this._generalizationNode.generalizationBelongNode = this - if (this.nodeData.data.generalization.isActive) { - this.renderer.addActiveNode(this._generalizationNode) + if (this.getData('generalization').isActive) { + this.renderer.addNodeToActiveList(this._generalizationNode) } } } @@ -50,7 +49,7 @@ function renderGeneralization() { this._generalizationNodeHeight = 0 return } - if (this.nodeData.data.expand === false) { + if (this.getData('expand') === false) { this.removeGeneralization() return } @@ -73,13 +72,13 @@ function removeGeneralization() { } if (this._generalizationNode) { // 删除概要节点时要同步从激活节点里删除 - this.renderer.removeActiveNode(this._generalizationNode) + this.renderer.removeNodeFromActiveList(this._generalizationNode) this._generalizationNode.remove() this._generalizationNode = null } // hack修复当激活一个节点时创建概要，然后立即激活创建的概要节点后会重复创建概要节点并且无法删除的问题 if (this.generalizationBelongNode) { - this.draw + this.nodeDraw .find('.generalization_' + this.generalizationBelongNode.uid) .remove() } diff --git a/simple-mind-map/src/core/view/View.js b/simple-mind-map/src/core/view/View.js index ac235615..853f9d14 100644 --- a/simple-mind-map/src/core/view/View.js +++ b/simple-mind-map/src/core/view/View.js @@ -25,16 +25,9 @@ class View { this.mindMap.keyCommand.addShortcut('Control+-', () => { this.narrow() }) - this.mindMap.keyCommand.addShortcut('Control+Enter', () => { - this.reset() - }) this.mindMap.keyCommand.addShortcut('Control+i', () => { this.fit() }) - this.mindMap.svg.on('dblclick', () => { - if (!this.mindMap.opt.enableDblclickReset) return - this.reset() - }) // 拖动视图 this.mindMap.event.on('mousedown', () => { this.sx = this.x @@ -267,7 +260,7 @@ class View { let drawHeight = rect.height / origTransform.scaleY let drawRatio = drawWidth / drawHeight let { width: elWidth, height: elHeight } = - this.mindMap.el.getBoundingClientRect() + this.mindMap.elRect elWidth = elWidth - fitPadding * 2 elHeight = elHeight - fitPadding * 2 let elRatio = elWidth / elHeight diff --git a/simple-mind-map/src/layouts/Base.js b/simple-mind-map/src/layouts/Base.js index 6199059f..f8cdc6b0 100644 --- a/simple-mind-map/src/layouts/Base.js +++ b/simple-mind-map/src/layouts/Base.js @@ -13,6 +13,7 @@ class Base { this.mindMap = renderer.mindMap // 绘图对象 this.draw = this.mindMap.draw + this.lineDraw = this.mindMap.lineDraw // 根节点 this.root = null this.lru = new Lru(this.mindMap.opt.maxNodeCacheCount) @@ -90,7 +91,7 @@ class Base { // 数据上没有保存节点引用，但是通过uid找到了缓存的节点，也可以复用 newNode = this.lru.get(data.data.uid) // 保存该节点上一次的数据 - let lastData = JSON.stringify(newNode.nodeData.data) + let lastData = JSON.stringify(newNode.getData()) let isLayerTypeChange = this.checkIsLayerTypeChange( newNode.layerIndex, layerIndex @@ -126,9 +127,15 @@ class Base { // 数据关联实际节点 data._node = newNode if (data.data.isActive) { - this.renderer.addActiveNode(newNode) + this.renderer.addNodeToActiveList(newNode) } } + // 如果当前节点在激活节点列表里，那么添加上激活的状态 + if (this.mindMap.renderer.findActiveNodeIndex(newNode) !== -1) { + newNode.setData({ + isActive: true + }) + } // 根节点 if (isRoot) { newNode.isRoot = true @@ -293,12 +300,12 @@ class Base { let { left, right, top, bottom } = walk(child) // 概要内容的宽度 let generalizationWidth = - child.checkHasGeneralization() && child.nodeData.data.expand + child.checkHasGeneralization() && child.getData('expand') ? child._generalizationNodeWidth + generalizationNodeMargin : 0 // 概要内容的高度 let generalizationHeight = - child.checkHasGeneralization() && child.nodeData.data.expand + child.checkHasGeneralization() && child.getData('expand') ? child._generalizationNodeHeight + generalizationNodeMargin : 0 if (left - (dir === 'h' ? generalizationWidth : 0) < _left) { diff --git a/simple-mind-map/src/layouts/CatalogOrganization.js b/simple-mind-map/src/layouts/CatalogOrganization.js index 0162434c..84092778 100644 --- a/simple-mind-map/src/layouts/CatalogOrganization.js +++ b/simple-mind-map/src/layouts/CatalogOrganization.js @@ -1,5 +1,5 @@ import Base from './Base' -import { walk, asyncRun } from '../utils' +import { walk, asyncRun, getNodeIndexInNodeList } from '../utils' // 目录组织图 class CatalogOrganization extends Base { @@ -73,7 +73,7 @@ class CatalogOrganization extends Base { null, (node, parent, isRoot, layerIndex) => { if ( - node.nodeData.data.expand && + node.getData('expand') && node.children && node.children.length ) { @@ -114,7 +114,7 @@ class CatalogOrganization extends Base { this.root, null, (node, parent, isRoot, layerIndex) => { - if (!node.nodeData.data.expand) { + if (!node.getData('expand')) { return } // 调整left @@ -159,9 +159,7 @@ class CatalogOrganization extends Base { updateBrothersLeft(node, addWidth) { if (node.parent) { let childrenList = node.parent.children - let index = childrenList.findIndex(item => { - return item.uid === node.uid - }) + let index = getNodeIndexInNodeList(node, childrenList) childrenList.forEach((item, _index) => { if (item.hasCustomPosition() || _index <= index) { // 适配自定义位置 @@ -182,9 +180,7 @@ class CatalogOrganization extends Base { updateBrothersTop(node, addHeight) { if (node.parent && !node.parent.isRoot) { let childrenList = node.parent.children - let index = childrenList.findIndex(item => { - return item.uid === node.uid - }) + let index = getNodeIndexInNodeList(node, childrenList) childrenList.forEach((item, _index) => { if (item.hasCustomPosition()) { // 适配自定义位置 @@ -247,14 +243,14 @@ class CatalogOrganization extends Base { minx = Math.min(minx, x1) maxx = Math.max(maxx, x1) // 父节点的竖线 - let line1 = this.draw.path() + let line1 = this.lineDraw.path() node.style.line(line1) line1.plot(`M ${x1},${y1} L ${x1},${y1 + s1}`) node._lines.push(line1) style && style(line1, node) // 水平线 if (len > 0) { - let lin2 = this.draw.path() + let lin2 = this.lineDraw.path() node.style.line(lin2) lin2.plot(`M ${minx},${y1 + s1} L ${maxx},${y1 + s1}`) node._lines.push(lin2) @@ -315,7 +311,7 @@ class CatalogOrganization extends Base { }) // 竖线 if (len > 0) { - let lin2 = this.draw.path() + let lin2 = this.lineDraw.path() expandBtnSize = len > 0 ? expandBtnSize : 0 node.style.line(lin2) if (maxy < y1 + expandBtnSize) { diff --git a/simple-mind-map/src/layouts/Fishbone.js b/simple-mind-map/src/layouts/Fishbone.js index fff92a49..618c9880 100644 --- a/simple-mind-map/src/layouts/Fishbone.js +++ b/simple-mind-map/src/layouts/Fishbone.js @@ -1,5 +1,5 @@ import Base from './Base' -import { walk, asyncRun, degToRad } from '../utils' +import { walk, asyncRun, degToRad, getNodeIndexInNodeList } from '../utils' import { CONSTANTS } from '../constants/constant' import utils from './fishboneUtils' @@ -112,7 +112,7 @@ class Fishbone extends Base { this.root, null, (node, parent, isRoot, layerIndex) => { - if (!node.nodeData.data.expand) { + if (!node.getData('expand')) { return } let params = { node, parent, layerIndex, ctx: this } @@ -193,9 +193,7 @@ class Fishbone extends Base { updateBrothersTop(node, addHeight) { if (node.parent && !node.parent.isRoot) { let childrenList = node.parent.children - let index = childrenList.findIndex(item => { - return item.uid === node.uid - }) + let index = getNodeIndexInNodeList(node, childrenList) childrenList.forEach((item, _index) => { if (item.hasCustomPosition()) { // 适配自定义位置 @@ -252,7 +250,7 @@ class Fishbone extends Base { let nodeLineX = item.left let offset = node.height / 2 + marginY let offsetX = offset / Math.tan(degToRad(this.mindMap.opt.fishboneDeg)) - let line = this.draw.path() + let line = this.lineDraw.path() if (this.checkIsTop(item)) { line.plot( `M ${nodeLineX - offsetX},${item.top + item.height + offset} L ${ @@ -273,7 +271,7 @@ class Fishbone extends Base { // 从根节点出发的水平线 let nodeHalfTop = node.top + node.height / 2 let offset = node.height / 2 + this.getMarginY(node.layerIndex + 1) - let line = this.draw.path() + let line = this.lineDraw.path() line.plot( `M ${node.left + node.width},${nodeHalfTop} L ${ maxx - offset / Math.tan(degToRad(this.mindMap.opt.fishboneDeg)) @@ -308,7 +306,7 @@ class Fishbone extends Base { }) // 斜线 if (len >= 0) { - let line = this.draw.path() + let line = this.lineDraw.path() expandBtnSize = len > 0 ? expandBtnSize : 0 let lineLength = maxx - node.left - node.width * this.indent lineLength = Math.max(lineLength, 0) diff --git a/simple-mind-map/src/layouts/FishboneBottom.js b/simple-mind-map/src/layouts/FishboneBottom.js index c267d62e..54afda6d 100644 --- a/simple-mind-map/src/layouts/FishboneBottom.js +++ b/simple-mind-map/src/layouts/FishboneBottom.js @@ -1,5 +1,5 @@ import Base from './Base' -import { walk, asyncRun } from '../utils' +import { walk, asyncRun, getNodeIndexInNodeList } from '../utils' import { CONSTANTS } from '../utils/constant' const degToRad = deg => { @@ -127,7 +127,7 @@ class Fishbone extends Base { this.root, null, (node, parent, isRoot, layerIndex) => { - if (!node.nodeData.data.expand) { + if (!node.getData('expand')) { return } // 调整top @@ -237,9 +237,7 @@ class Fishbone extends Base { updateBrothersTop(node, addHeight) { if (node.parent && !node.parent.isRoot) { let childrenList = node.parent.children - let index = childrenList.findIndex(item => { - return item.uid === node.uid - }) + let index = getNodeIndexInNodeList(node, childrenList) childrenList.forEach((item, _index) => { if (item.hasCustomPosition()) { // 适配自定义位置 @@ -307,7 +305,7 @@ class Fishbone extends Base { }) // 竖线 if (len > 0) { - let line = this.draw.path() + let line = this.lineDraw.path() expandBtnSize = len > 0 ? expandBtnSize : 0 let lineLength = maxx - node.left - node.width * 0.3 if (node.parent && node.parent.isRoot) { diff --git a/simple-mind-map/src/layouts/FishboneTop.js b/simple-mind-map/src/layouts/FishboneTop.js index fb31e5e6..2e83bf80 100644 --- a/simple-mind-map/src/layouts/FishboneTop.js +++ b/simple-mind-map/src/layouts/FishboneTop.js @@ -1,5 +1,5 @@ import Base from './Base' -import { walk, asyncRun } from '../utils' +import { walk, asyncRun, getNodeIndexInNodeList } from '../utils' import { CONSTANTS } from '../utils/constant' const degToRad = deg => { @@ -110,7 +110,7 @@ class Fishbone extends Base { this.root, null, (node, parent, isRoot, layerIndex) => { - if (!node.nodeData.data.expand) { + if (!node.getData('expand')) { return } // 调整top @@ -206,9 +206,7 @@ class Fishbone extends Base { updateBrothersTop(node, addHeight) { if (node.parent && !node.parent.isRoot) { let childrenList = node.parent.children - let index = childrenList.findIndex(item => { - return item.uid === node.uid - }) + let index = getNodeIndexInNodeList(node, childrenList) childrenList.forEach((item, _index) => { if (item.hasCustomPosition()) { // 适配自定义位置 @@ -276,7 +274,7 @@ class Fishbone extends Base { }) // 竖线 if (len > 0) { - let line = this.draw.path() + let line = this.lineDraw.path() expandBtnSize = len > 0 ? expandBtnSize : 0 let lineLength = maxx - node.left - node.width * 0.3 if ( diff --git a/simple-mind-map/src/layouts/LogicalStructure.js b/simple-mind-map/src/layouts/LogicalStructure.js index 88da77fe..bc7bd793 100644 --- a/simple-mind-map/src/layouts/LogicalStructure.js +++ b/simple-mind-map/src/layouts/LogicalStructure.js @@ -1,5 +1,5 @@ import Base from './Base' -import { walk, asyncRun } from '../utils' +import { walk, asyncRun, getNodeIndexInNodeList } from '../utils' // 逻辑结构图 class LogicalStructure extends Base { @@ -78,7 +78,7 @@ class LogicalStructure extends Base { null, (node, parent, isRoot, layerIndex) => { if ( - node.nodeData.data.expand && + node.getData('expand') && node.children && node.children.length ) { @@ -103,7 +103,7 @@ class LogicalStructure extends Base { this.root, null, (node, parent, isRoot, layerIndex) => { - if (!node.nodeData.data.expand) { + if (!node.getData('expand')) { return } // 判断子节点所占的高度之和是否大于该节点自身，大于则需要调整位置 @@ -124,9 +124,7 @@ class LogicalStructure extends Base { updateBrothers(node, addHeight) { if (node.parent) { let childrenList = node.parent.children - let index = childrenList.findIndex(item => { - return item.uid === node.uid - }) + let index = getNodeIndexInNodeList(node, childrenList) childrenList.forEach((item, _index) => { if (item.uid === node.uid || item.hasCustomPosition()) { // 适配自定义位置 diff --git a/simple-mind-map/src/layouts/MindMap.js b/simple-mind-map/src/layouts/MindMap.js index 3e1b1fbd..36abe5de 100644 --- a/simple-mind-map/src/layouts/MindMap.js +++ b/simple-mind-map/src/layouts/MindMap.js @@ -1,5 +1,5 @@ import Base from './Base' -import { walk, asyncRun } from '../utils' +import { walk, asyncRun, getNodeIndexInNodeList } from '../utils' import { CONSTANTS } from '../constants/constant' // 思维导图 @@ -117,7 +117,7 @@ class MindMap extends Base { null, (node, parent, isRoot, layerIndex) => { if ( - node.nodeData.data.expand && + node.getData('expand') && node.children && node.children.length ) { @@ -148,7 +148,7 @@ class MindMap extends Base { this.root, null, (node, parent, isRoot, layerIndex) => { - if (!node.nodeData.data.expand) { + if (!node.getData('expand')) { return } // 判断子节点所占的高度之和是否大于该节点自身，大于则需要调整位置 @@ -171,9 +171,7 @@ class MindMap extends Base { let childrenList = node.parent.children.filter(item => { return item.dir === node.dir }) - let index = childrenList.findIndex(item => { - return item.uid === node.uid - }) + let index = getNodeIndexInNodeList(node, childrenList) childrenList.forEach((item, _index) => { if (item.hasCustomPosition()) { // 适配自定义位置 diff --git a/simple-mind-map/src/layouts/OrganizationStructure.js b/simple-mind-map/src/layouts/OrganizationStructure.js index ba41a454..93192c7a 100644 --- a/simple-mind-map/src/layouts/OrganizationStructure.js +++ b/simple-mind-map/src/layouts/OrganizationStructure.js @@ -1,5 +1,5 @@ import Base from './Base' -import { walk, asyncRun } from '../utils' +import { walk, asyncRun, getNodeIndexInNodeList } from '../utils' // 组织结构图 // 和逻辑结构图基本一样，只是方向变成向下生长，所以先计算节点的top，后计算节点的left、最后调整节点的left即可 @@ -79,7 +79,7 @@ class OrganizationStructure extends Base { null, (node, parent, isRoot, layerIndex) => { if ( - node.nodeData.data.expand && + node.getData('expand') && node.children && node.children.length ) { @@ -104,7 +104,7 @@ class OrganizationStructure extends Base { this.root, null, (node, parent, isRoot, layerIndex) => { - if (!node.nodeData.data.expand) { + if (!node.getData('expand')) { return } // 判断子节点所占的宽度之和是否大于该节点自身，大于则需要调整位置 @@ -125,9 +125,7 @@ class OrganizationStructure extends Base { updateBrothers(node, addWidth) { if (node.parent) { let childrenList = node.parent.children - let index = childrenList.findIndex(item => { - return item.uid === node.uid - }) + let index = getNodeIndexInNodeList(node, childrenList) childrenList.forEach((item, _index) => { if (item.hasCustomPosition()) { // 适配自定义位置 @@ -218,7 +216,7 @@ class OrganizationStructure extends Base { minx = Math.min(x1, minx) maxx = Math.max(x1, maxx) // 父节点的竖线 - let line1 = this.draw.path() + let line1 = this.lineDraw.path() node.style.line(line1) expandBtnSize = len > 0 && !isRoot ? expandBtnSize : 0 line1.plot(`M ${x1},${y1 + expandBtnSize} L ${x1},${y1 + s1}`) @@ -226,7 +224,7 @@ class OrganizationStructure extends Base { style && style(line1, node) // 水平线 if (len > 0) { - let lin2 = this.draw.path() + let lin2 = this.lineDraw.path() node.style.line(lin2) lin2.plot(`M ${minx},${y1 + s1} L ${maxx},${y1 + s1}`) node._lines.push(lin2) diff --git a/simple-mind-map/src/layouts/Timeline.js b/simple-mind-map/src/layouts/Timeline.js index ee1c0f9b..82fbc9f0 100644 --- a/simple-mind-map/src/layouts/Timeline.js +++ b/simple-mind-map/src/layouts/Timeline.js @@ -1,5 +1,5 @@ import Base from './Base' -import { walk, asyncRun } from '../utils' +import { walk, asyncRun, getNodeIndexInNodeList } from '../utils' import { CONSTANTS } from '../constants/constant' // 时间轴 @@ -81,7 +81,7 @@ class Timeline extends Base { null, (node, parent, isRoot, layerIndex, index) => { if ( - node.nodeData.data.expand && + node.getData('expand') && node.children && node.children.length ) { @@ -122,7 +122,7 @@ class Timeline extends Base { this.root, null, (node, parent, isRoot, layerIndex) => { - if (!node.nodeData.data.expand) { + if (!node.getData('expand')) { return } // 调整left @@ -208,9 +208,7 @@ class Timeline extends Base { updateBrothersTop(node, addHeight) { if (node.parent && !node.parent.isRoot) { let childrenList = node.parent.children - let index = childrenList.findIndex(item => { - return item.uid === node.uid - }) + let index = getNodeIndexInNodeList(node, childrenList) childrenList.forEach((item, _index) => { if (item.hasCustomPosition()) { // 适配自定义位置 @@ -275,7 +273,7 @@ class Timeline extends Base { }) // 竖线 if (len > 0) { - let line = this.draw.path() + let line = this.lineDraw.path() expandBtnSize = len > 0 ? expandBtnSize : 0 if ( node.parent && diff --git a/simple-mind-map/src/layouts/VerticalTimeline.js b/simple-mind-map/src/layouts/VerticalTimeline.js index a8079944..bdd06189 100644 --- a/simple-mind-map/src/layouts/VerticalTimeline.js +++ b/simple-mind-map/src/layouts/VerticalTimeline.js @@ -1,5 +1,5 @@ import Base from './Base' -import { walk, asyncRun } from '../utils' +import { walk, asyncRun, getNodeIndexInNodeList } from '../utils' import { CONSTANTS } from '../constants/constant' // 竖向时间轴 @@ -98,7 +98,7 @@ class VerticalTimeline extends Base { null, (node, parent, isRoot, layerIndex, index) => { if ( - node.nodeData.data.expand && + node.getData('expand') && node.children && node.children.length ) { @@ -135,7 +135,7 @@ class VerticalTimeline extends Base { this.root, null, (node, parent, isRoot, layerIndex) => { - if (!node.nodeData.data.expand) { + if (!node.getData('expand')) { return } if (isRoot) return @@ -155,9 +155,7 @@ class VerticalTimeline extends Base { updateBrothers(node, addHeight) { if (node.parent) { let childrenList = node.parent.children - let index = childrenList.findIndex(item => { - return item.uid === node.uid - }) + let index = getNodeIndexInNodeList(node, childrenList) childrenList.forEach((item, _index) => { // 自定义节点位置 if (item.hasCustomPosition()) return @@ -201,9 +199,7 @@ class VerticalTimeline extends Base { updateBrothersTop(node, addHeight) { if (node.parent && !node.parent.isRoot) { let childrenList = node.parent.children - let index = childrenList.findIndex(item => { - return item.uid === node.uid - }) + let index = getNodeIndexInNodeList(node, childrenList) childrenList.forEach((item, _index) => { if (item.hasCustomPosition()) { // 适配自定义位置 diff --git a/simple-mind-map/src/plugins/AssociativeLine.js b/simple-mind-map/src/plugins/AssociativeLine.js index 51fc51ee..bb6ffa13 100644 --- a/simple-mind-map/src/plugins/AssociativeLine.js +++ b/simple-mind-map/src/plugins/AssociativeLine.js @@ -15,7 +15,7 @@ import associativeLineTextMethods from './associativeLine/associativeLineText' class AssociativeLine { constructor(opt = {}) { this.mindMap = opt.mindMap - this.draw = this.mindMap.draw + this.associativeLineDraw = this.mindMap.associativeLineDraw // 当前所有连接线 this.lineList = [] // 当前激活的连接线 @@ -98,7 +98,7 @@ class AssociativeLine { // 创建箭头 createMarker() { - return this.draw.marker(20, 20, add => { + return this.associativeLineDraw.marker(20, 20, add => { add.ref(12, 5) add.size(10, 10) add.attr('orient', 'auto-start-reverse') @@ -142,7 +142,7 @@ class AssociativeLine { null, cur => { if (!cur) return - let data = cur.nodeData.data + let data = cur.getData() if ( data.associativeLineTargets && data.associativeLineTargets.length > 0 @@ -161,7 +161,7 @@ class AssociativeLine { ids.forEach((uid, index) => { let toNode = idToNode.get(uid) if (!node || !toNode) return - const associativeLinePoint = (node.nodeData.data.associativeLinePoint || + const associativeLinePoint = (node.getData('associativeLinePoint') || [])[index] // 切换结构和布局，都会更新坐标 const [startPoint, endPoint] = this.updateAllLinesPos( @@ -194,7 +194,7 @@ class AssociativeLine { toNode ) // 虚线 - let path = this.draw.path() + let path = this.associativeLineDraw.path() path .stroke({ width: associativeLineWidth, @@ -205,7 +205,7 @@ class AssociativeLine { path.plot(pathStr) path.marker('end', this.marker) // 不可见的点击线 - let clickPath = this.draw.path() + let clickPath = this.associativeLineDraw.path() clickPath .stroke({ width: associativeLineActiveWidth, color: 'transparent' }) .fill({ color: 'none' }) @@ -276,6 +276,7 @@ class AssociativeLine { controlPoints[1] ) this.mindMap.emit('associative_line_click', path, clickPath, node, toNode) + this.front() } // 移除所有连接线 @@ -300,9 +301,10 @@ class AssociativeLine { let { associativeLineWidth, associativeLineColor } = this.mindMap.themeConfig if (this.isCreatingLine || !fromNode) return + this.front() this.isCreatingLine = true this.creatingStartNode = fromNode - this.creatingLine = this.draw.path() + this.creatingLine = this.associativeLineDraw.path() this.creatingLine .stroke({ width: associativeLineWidth, @@ -357,12 +359,13 @@ class AssociativeLine { height } } + // 检测当前移动到的目标节点 checkOverlapNode(x, y) { this.overlapNode = null bfsWalk(this.mindMap.renderer.root, node => { - if (node.nodeData.data.isActive) { - this.mindMap.renderer.setNodeActive(node, false) + if (node.getData('isActive')) { + this.mindMap.execCommand('SET_NODE_ACTIVE', node, false) } if (node.uid === this.creatingStartNode.uid || this.overlapNode) { return @@ -374,8 +377,8 @@ class AssociativeLine { this.overlapNode = node } }) - if (this.overlapNode && !this.overlapNode.nodeData.data.isActive) { - this.mindMap.renderer.setNodeActive(this.overlapNode, true) + if (this.overlapNode && !this.overlapNode.getData('isActive')) { + this.mindMap.execCommand('SET_NODE_ACTIVE', this.overlapNode, true) } } @@ -383,21 +386,22 @@ class AssociativeLine { completeCreateLine(node) { if (this.creatingStartNode.uid === node.uid) return this.addLine(this.creatingStartNode, node) - if (this.overlapNode && this.overlapNode.nodeData.data.isActive) { - this.mindMap.renderer.setNodeActive(this.overlapNode, false) + if (this.overlapNode && this.overlapNode.getData('isActive')) { + this.mindMap.execCommand('SET_NODE_ACTIVE', this.overlapNode, false) } this.isCreatingLine = false this.creatingStartNode = null this.creatingLine.remove() this.creatingLine = null this.overlapNode = null + this.back() } // 添加连接线 addLine(fromNode, toNode) { if (!fromNode || !toNode) return // 目标节点如果没有id，则生成一个id - let uid = toNode.nodeData.data.uid + let uid = toNode.getData('uid') if (!uid) { uid = uuid() this.mindMap.execCommand('SET_NODE_DATA', toNode, { @@ -405,7 +409,7 @@ class AssociativeLine { }) } // 将目标节点id保存起来 - let list = fromNode.nodeData.data.associativeLineTargets || [] + let list = fromNode.getData('associativeLineTargets') || [] // 连线节点是否存在相同的id,存在则阻止添加关联线 const sameLine = list.some(item => item === uid) if (sameLine) { @@ -421,7 +425,7 @@ class AssociativeLine { endPoint.y ) let offsetList = - fromNode.nodeData.data.associativeLineTargetControlOffsets || [] + fromNode.getData('associativeLineTargetControlOffsets') || [] // 保存的实际是控制点和端点的差值，否则当节点位置改变了，控制点还是原来的位置，连线就不对了 offsetList[list.length - 1] = [ { @@ -433,7 +437,7 @@ class AssociativeLine { y: controlPoints[1].y - endPoint.y } ] - let associativeLinePoint = fromNode.nodeData.data.associativeLinePoint || [] + let associativeLinePoint = fromNode.getData('associativeLinePoint') || [] // 记录关联的起始|结束坐标 associativeLinePoint[list.length - 1] = { startPoint, endPoint } this.mindMap.execCommand('SET_NODE_DATA', fromNode, { @@ -453,14 +457,14 @@ class AssociativeLine { associativeLinePoint, associativeLineTargetControlOffsets, associativeLineText - } = node.nodeData.data + } = node.getData() associativeLinePoint = associativeLinePoint || [] let targetIndex = getAssociativeLineTargetIndex(node, toNode) // 更新关联线文本数据 let newAssociativeLineText = {} if (associativeLineText) { Object.keys(associativeLineText).forEach(item => { - if (item !== toNode.nodeData.data.uid) { + if (item !== toNode.getData('uid')) { newAssociativeLineText[item] = associativeLineText[item] } }) @@ -500,6 +504,7 @@ class AssociativeLine { } this.activeLine = null this.removeControls() + this.back() } } @@ -526,6 +531,19 @@ class AssociativeLine { this.showControls() this.isNodeDragging = false } + + // 关联线顶层显示 + front() { + if (this.mindMap.opt.associativeLineIsAlwaysAboveNode) return + this.associativeLineDraw.front() + } + + // 关联线回到原有层级 + back() { + if (this.mindMap.opt.associativeLineIsAlwaysAboveNode) return + this.associativeLineDraw.back() // 最底层 + this.associativeLineDraw.forward() // 连线层上面 + } } AssociativeLine.instanceName = 'associativeLine' diff --git a/simple-mind-map/src/plugins/Cooperate.js b/simple-mind-map/src/plugins/Cooperate.js new file mode 100644 index 00000000..ea3eb2f5 --- /dev/null +++ b/simple-mind-map/src/plugins/Cooperate.js @@ -0,0 +1,345 @@ +import * as Y from 'yjs' +import { WebrtcProvider } from 'y-webrtc' +import { isSameObject, simpleDeepClone, getType, isUndef } from '../utils/index' + +// 协同插件 +class Cooperate { + constructor(opt) { + this.opt = opt + this.mindMap = opt.mindMap + // yjs文档 + this.ydoc = new Y.Doc() + // 共享数据 + this.ymap = null + // 连接提供者 + this.provider = null + // 感知数据 + this.awareness = null + this.currentAwarenessData = [] + this.waitNodeUidMap = {} // 该列表中的uid对应的节点还未渲染完毕 + // 当前的平级对象类型的思维导图数据 + this.currentData = null + // 用户信息 + this.userInfo = null + // 绑定事件 + this.bindEvent() + // 处理实例化时传入的思维导图数据 + if (this.mindMap.opt.data) { + this.initData(this.mindMap.opt.data) + } + } + + // 初始化数据 + initData(data) { + data = simpleDeepClone(data) + // 解绑原来的数据 + if (this.ymap) { + this.ymap.unobserve(this.onObserve) + } + // 创建共享数据 + this.ymap = this.ydoc.getMap() + // 思维导图树结构转平级对象结构 + this.currentData = this.transformTreeDataToObject(data) + // 将思维导图数据添加到共享数据中 + Object.keys(this.currentData).forEach(uid => { + this.ymap.set(uid, this.currentData[uid]) + }) + // 监听数据同步 + this.onObserve = this.onObserve.bind(this) + this.ymap.observe(this.onObserve) + } + + // 获取yjs doc实例 + getDoc() { + return this.ydoc + } + + // 设置连接提供者 + setProvider(provider, webrtcProviderConfig = {}) { + const { roomName, signalingList, ...otherConfig } = webrtcProviderConfig + this.provider = + provider || + new WebrtcProvider(roomName, this.ydoc, { + signaling: signalingList, + ...otherConfig + }) + this.awareness = this.provider.awareness + + // 监听状态同步事件 + this.onAwareness = this.onAwareness.bind(this) + this.awareness.on('change', this.onAwareness) + } + + // 绑定事件 + bindEvent() { + // 监听思维导图改变 + this.onDataChange = this.onDataChange.bind(this) + this.mindMap.on('data_change', this.onDataChange) + + // 监听思维导图节点激活事件 + this.onNodeActive = this.onNodeActive.bind(this) + this.mindMap.on('node_active', this.onNodeActive) + + // 监听思维导图渲染完毕事件 + this.onNodeTreeRenderEnd = this.onNodeTreeRenderEnd.bind(this) + this.mindMap.on('node_tree_render_end', this.onNodeTreeRenderEnd) + + // 监听设置思维导图数据事件 + this.initData = this.initData.bind(this) + this.mindMap.on('set_data', this.initData) + } + + // 解绑事件 + unBindEvent() { + if (this.ymap) { + this.ymap.unobserve(this.onObserve) + } + this.mindMap.off('data_change', this.onDataChange) + this.mindMap.off('node_active', this.onNodeActive) + this.mindMap.off('node_tree_render_end', this.onNodeTreeRenderEnd) + this.mindMap.off('set_data', this.initData) + this.ydoc.destroy() + } + + // 数据同步时的处理，更新当前思维导图 + onObserve(event) { + const data = event.target.toJSON() + // 如果数据没有改变直接返回 + if (isSameObject(data, this.currentData)) return + this.currentData = data + // 平级对象转树结构 + const res = this.transformObjectToTreeData(data) + if (!res) return + // 更新思维导图画布 + this.mindMap.renderer.setData(res) + this.mindMap.render() + this.mindMap.command.addHistory() + } + + // 当前思维导图改变后的处理，触发同步 + onDataChange(data) { + const res = this.transformTreeDataToObject(data) + this.updateChanges(res) + } + + // 找出更新点 + updateChanges(data) { + const oldData = this.currentData + this.currentData = data + this.ydoc.transact(() => { + // 找出新增的或修改的 + Object.keys(data).forEach(uid => { + // 新增的或已经存在的，如果数据发生了改变 + if (!oldData[uid] || !isSameObject(oldData[uid], data[uid])) { + this.ymap.set(uid, data[uid]) + } + }) + // 找出删除的 + Object.keys(oldData).forEach(uid => { + if (!data[uid]) { + this.ymap.delete(uid) + } + }) + }) + } + + // 节点激活状态改变后触发感知数据同步 + onNodeActive(node, nodeList) { + if (this.userInfo) { + this.awareness.setLocalStateField(this.userInfo.name, { + // 用户信息 + userInfo: { + ...this.userInfo + }, + // 当前激活的节点id列表 + nodeIdList: nodeList.map(item => { + return item.uid + }) + }) + } + } + + // 节点树渲染完毕事件 + onNodeTreeRenderEnd() { + Object.keys(this.waitNodeUidMap).forEach(uid => { + const node = this.mindMap.renderer.findNodeByUid(uid) + if (node) { + node.addUser(this.waitNodeUidMap[uid]) + } + }) + this.waitNodeUidMap = {} + } + + // 设置用户信息 + /** + * { + * id: '', // 必传，用户唯一的id + * name: '', // 用户名称。name和avatar两个只传一个即可，如果都传了，会显示avatar + * avatar: '', // 用户头像 + * color: '' // 如果没有传头像，那么会以一个圆形来显示名称的第一个字，文字的颜色为白色，圆的颜色可以通过该字段设置 + * } + **/ + setUserInfo(userInfo) { + if ( + getType(userInfo) !== 'Object' || + isUndef(userInfo.id) || + (isUndef(userInfo.name) && isUndef(userInfo.avatar)) + ) + return + this.userInfo = userInfo || null + } + + // 监听感知数据同步事件 + onAwareness() { + const walk = (list, callback) => { + list.forEach(value => { + const userName = Object.keys(value)[0] + if (!userName) return + const data = value[userName] + const userInfo = data.userInfo + const nodeIdList = data.nodeIdList + nodeIdList.forEach(uid => { + const node = this.mindMap.renderer.findNodeByUid(uid) + callback(uid, node, userInfo) + }) + }) + } + // 清除之前的数据 + walk(this.currentAwarenessData, (uid, node, userInfo) => { + if (node) { + node.removeUser(userInfo) + } + }) + // 设置当前数据 + const data = Array.from(this.awareness.getStates().values()) + this.currentAwarenessData = data + walk(data, (uid, node, userInfo) => { + // 不显示自己 + if (userInfo.id === this.userInfo.id) return + if (node) { + node.addUser(userInfo) + } else { + this.waitNodeUidMap[uid] = userInfo + } + }) + } + + // 将树结构转平级对象 + /* + { + data: { + uid: 'xxx' + }, + children: [ + { + data: { + uid: 'xxx' + }, + children: [] + } + ] + } + 转为： + { + uid: { + children: [uid1, uid2], + data: {} + } + } + */ + transformTreeDataToObject(data) { + const res = {} + const walk = (root, parent) => { + const uid = root.data.uid + if (parent) { + parent.children.push(uid) + } + res[uid] = { + isRoot: !parent, + data: { + ...root.data + }, + children: [] + } + if (root.children && root.children.length > 0) { + root.children.forEach(item => { + walk(item, res[uid]) + }) + } + } + walk(data, null) + return res + } + + // 找到父节点的uid + findParentUid(data, targetUid) { + const uids = Object.keys(data) + let res = '' + uids.forEach(uid => { + const children = data[uid].children + const isParent = + children.findIndex(childUid => { + return childUid === targetUid + }) !== -1 + if (isParent) { + res = uid + } + }) + return res + } + + // 将平级对象转树结构 + transformObjectToTreeData(data) { + const uids = Object.keys(data) + if (uids.length <= 0) return null + const rootKey = uids.find(uid => { + return data[uid].isRoot + }) + if (!rootKey || !data[rootKey]) return null + // 根节点 + const res = { + data: simpleDeepClone(data[rootKey].data), + children: [] + } + const map = {} + map[rootKey] = res + uids.forEach(uid => { + const parentUid = this.findParentUid(data, uid) + const cur = data[uid] + const node = map[uid] || { + data: simpleDeepClone(cur.data), + children: [] + } + if (!map[uid]) { + map[uid] = node + } + if (parentUid) { + const index = data[parentUid].children.findIndex(item => { + return item === uid + }) + if (!map[parentUid]) { + map[parentUid] = { + data: simpleDeepClone(data[parentUid].data), + children: [] + } + } + map[parentUid].children[index] = node + } + }) + return res + } + + // 插件被移除前做的事情 + beforePluginRemove() { + this.unBindEvent() + } + + // 插件被卸载前做的事情 + beforePluginDestroy() { + this.unBindEvent() + } +} + +Cooperate.instanceName = 'cooperate' + +export default Cooperate diff --git a/simple-mind-map/src/plugins/Drag.js b/simple-mind-map/src/plugins/Drag.js index 53d2a1a5..9752022f 100644 --- a/simple-mind-map/src/plugins/Drag.js +++ b/simple-mind-map/src/plugins/Drag.js @@ -1,4 +1,4 @@ -import { bfsWalk, throttle, getTopAncestorsFomNodeList } from '../utils' +import { bfsWalk, throttle, getTopAncestorsFomNodeList, getNodeIndexInNodeList } from '../utils' import Base from '../layouts/Base' // 节点拖动插件 @@ -109,13 +109,13 @@ class Drag extends Base { }) this.removeCloneNode() let overlapNodeUid = this.overlapNode - ? this.overlapNode.nodeData.data.uid + ? this.overlapNode.getData('uid') : '' - let prevNodeUid = this.prevNode ? this.prevNode.nodeData.data.uid : '' - let nextNodeUid = this.nextNode ? this.nextNode.nodeData.data.uid : '' + let prevNodeUid = this.prevNode ? this.prevNode.getData('uid') : '' + let nextNodeUid = this.nextNode ? this.nextNode.getData('uid') : '' // 存在重叠子节点，则移动作为其子节点 if (this.overlapNode) { - this.mindMap.renderer.setNodeActive(this.overlapNode, false) + this.mindMap.execCommand('SET_NODE_ACTIVE', this.overlapNode, false) this.mindMap.execCommand( 'MOVE_NODE_TO', this.beingDragNodeList, @@ -123,7 +123,7 @@ class Drag extends Base { ) } else if (this.prevNode) { // 存在前一个相邻节点，作为其下一个兄弟节点 - this.mindMap.renderer.setNodeActive(this.prevNode, false) + this.mindMap.execCommand('SET_NODE_ACTIVE', this.prevNode, false) this.mindMap.execCommand( 'INSERT_AFTER', this.beingDragNodeList, @@ -131,7 +131,7 @@ class Drag extends Base { ) } else if (this.nextNode) { // 存在下一个相邻节点，作为其前一个兄弟节点 - this.mindMap.renderer.setNodeActive(this.nextNode, false) + this.mindMap.execCommand('SET_NODE_ACTIVE', this.nextNode, false) this.mindMap.execCommand( 'INSERT_BEFORE', this.beingDragNodeList, @@ -205,7 +205,7 @@ class Drag extends Base { this.offsetX = this.mouseDownX - (node.left * scaleX + translateX) this.offsetY = this.mouseDownY - (node.top * scaleY + translateY) // 如果鼠标按下的节点是激活节点，那么保存当前所有激活的节点 - if (node.nodeData.data.isActive) { + if (node.getData('isActive')) { // 找出这些激活节点中的最顶层节点 this.beingDragNodeList = getTopAncestorsFomNodeList( // 过滤掉根节点和概要节点 @@ -222,7 +222,7 @@ class Drag extends Base { // 创建克隆节点 this.createCloneNode() // 清除当前所有激活的节点 - this.mindMap.renderer.clearAllActive() + this.mindMap.execCommand('CLEAR_ACTIVE_NODE') } } @@ -261,7 +261,7 @@ class Drag extends Base { const lineColor = node.style.merge('lineColor', true) // 如果当前被拖拽的节点数量大于1，那么创建一个矩形示意 if (this.beingDragNodeList.length > 1) { - this.clone = this.draw + this.clone = this.mindMap.otherDraw .rect() .size(rectWidth, rectHeight) .radius(rectHeight / 2) @@ -278,12 +278,12 @@ class Drag extends Base { if (expandEl) { expandEl.remove() } - this.mindMap.draw.add(this.clone) + this.mindMap.otherDraw.add(this.clone) } this.clone.opacity(dragOpacityConfig.cloneNodeOpacity) this.clone.css('z-index', 99999) // 同级位置提示元素 - this.placeholder = this.draw.rect().fill({ + this.placeholder = this.mindMap.otherDraw.rect().fill({ color: dragPlaceholderRectFill || lineColor }) // 当前被拖拽的节点的临时设置 @@ -317,8 +317,8 @@ class Drag extends Base { this.nextNode = null this.placeholder.size(0, 0) this.nodeList.forEach(node => { - if (node.nodeData.data.isActive) { - this.mindMap.renderer.setNodeActive(node, false) + if (node.getData('isActive')) { + this.mindMap.execCommand('SET_NODE_ACTIVE', node, false) } if (this.overlapNode || (this.prevNode && this.nextNode)) { return @@ -353,7 +353,7 @@ class Drag extends Base { } }) if (this.overlapNode) { - this.mindMap.renderer.setNodeActive(this.overlapNode, true) + this.mindMap.execCommand('SET_NODE_ACTIVE', this.overlapNode, true) } } @@ -487,9 +487,7 @@ class Drag extends Base { getNodeDistanceToSiblingNode(checkList, node, nodeRect, dir) { let dir1 = dir === 'v' ? 'top' : 'left' let dir2 = dir === 'v' ? 'bottom' : 'right' - let index = checkList.findIndex(item => { - return item.uid === node.uid - }) + let index = getNodeIndexInNodeList(node, checkList) let prevBrother = null let nextBrother = null if (index !== -1) { diff --git a/simple-mind-map/src/plugins/MiniMap.js b/simple-mind-map/src/plugins/MiniMap.js index fe745700..b7763a2a 100644 --- a/simple-mind-map/src/plugins/MiniMap.js +++ b/simple-mind-map/src/plugins/MiniMap.js @@ -1,7 +1,8 @@ import { isWhite, isTransparent, - getVisibleColorFromTheme + getVisibleColorFromTheme, + readBlob } from '../utils/index' // 小地图插件 @@ -27,7 +28,9 @@ class MiniMap { */ calculationMiniMap(boxWidth, boxHeight) { let { svg, rect, origWidth, origHeight, scaleX, scaleY } = - this.mindMap.getSvgData() + this.mindMap.getSvgData({ + ignoreWatermark: true + }) // 计算数据 const elRect = this.mindMap.elRect rect.x -= elRect.left @@ -85,10 +88,18 @@ class MiniMap { Object.keys(viewBoxStyle).forEach(key => { viewBoxStyle[key] = viewBoxStyle[key] + 'px' }) - this.removeNodeContent(svg) + const svgStr = svg.svg() + return { - svgHTML: svg.svg(), // 小地图html + getImgUrl: async callback => { + const blob = new Blob([svgStr], { + type: 'image/svg+xml' + }) + const res = await readBlob(blob) + callback(res) + }, + svgHTML: svgStr, // 小地图html viewBoxStyle, // 视图框的位置信息 miniMapBoxScale, // 视图框的缩放值 miniMapBoxLeft, // 视图框的left值 diff --git a/simple-mind-map/src/plugins/NodeImgAdjust.js b/simple-mind-map/src/plugins/NodeImgAdjust.js index 9913ed33..b3a53816 100644 --- a/simple-mind-map/src/plugins/NodeImgAdjust.js +++ b/simple-mind-map/src/plugins/NodeImgAdjust.js @@ -205,7 +205,7 @@ class NodeImgAdjust { // 隐藏节点实际图片 this.hideNodeImage() // 将节点图片渲染到自定义元素上 - this.handleEl.style.backgroundImage = `url(${this.node.nodeData.data.image})` + this.handleEl.style.backgroundImage = `url(${this.node.getData('image')})` } // 鼠标移动 @@ -214,7 +214,7 @@ class NodeImgAdjust { e.preventDefault() // 计算当前拖拽位置对应的图片的实时大小 let { width: imageOriginWidth, height: imageOriginHeight } = - this.node.nodeData.data.imageSize + this.node.getData('imageSize') let newWidth = e.clientX - this.rect.x let newHeight = e.clientY - this.rect.y if (newWidth <= 0 || newHeight <= 0) return @@ -237,7 +237,7 @@ class NodeImgAdjust { // 隐藏自定义元素 this.hideHandleEl() // 更新节点图片为新的大小 - let { image, imageTitle } = this.node.nodeData.data + let { image, imageTitle } = this.node.getData() let { scaleX, scaleY } = this.mindMap.draw.transform() this.mindMap.execCommand('SET_NODE_IMAGE', this.node, { url: image, diff --git a/simple-mind-map/src/plugins/Painter.js b/simple-mind-map/src/plugins/Painter.js index 5dd0be52..388b4290 100644 --- a/simple-mind-map/src/plugins/Painter.js +++ b/simple-mind-map/src/plugins/Painter.js @@ -53,7 +53,7 @@ class Painter { ) return const style = {} - const painterNodeData = this.painterNode.nodeData.data + const painterNodeData = this.painterNode.getData() Object.keys(painterNodeData).forEach(key => { if (checkIsNodeStyleDataKey(key)) { style[key] = painterNodeData[key] diff --git a/simple-mind-map/src/plugins/RichText.js b/simple-mind-map/src/plugins/RichText.js index 596635c8..f74daf35 100644 --- a/simple-mind-map/src/plugins/RichText.js +++ b/simple-mind-map/src/plugins/RichText.js @@ -236,17 +236,17 @@ class RichText { this.textEditNode.style.borderRadius = (node.height || 50) + 'px' } } - if (!node.nodeData.data.richText) { + if (!node.getData('richText')) { // 还不是富文本的情况 let text = '' - if (!isUndef(node.nodeData.data.text)) { - text = String(node.nodeData.data.text).split(/\n/gim).join('
') + if (!isUndef(node.getData('text'))) { + text = String(node.getData('text')).split(/\n/gim).join('
') } let html = `

${text}

` this.textEditNode.innerHTML = this.cacheEditingText || html } else { this.textEditNode.innerHTML = - this.cacheEditingText || node.nodeData.data.text + this.cacheEditingText || node.getData('text') } this.initQuillEditor() document.querySelector('.ql-editor').style.minHeight = originHeight + 'px' @@ -256,7 +256,7 @@ class RichText { this.focus( isInserting || (selectTextOnEnterEditText && !isFromKeyDown) ? 0 : null ) - if (!node.nodeData.data.richText) { + if (!node.getData('richText')) { // 如果是非富文本的情况，需要手动应用文本样式 this.setTextStyleIfNotRichText(node) } @@ -494,7 +494,7 @@ class RichText { }) } else { let data = this.richTextStyleToNormalStyle(config) - this.mindMap.renderer.setNodeData(this.node, data) + this.mindMap.execCommand('SET_NODE_DATA', this.node, data) } } @@ -564,6 +564,16 @@ class RichText { return data } + // 给未激活的节点设置富文本样式 + setNotActiveNodeStyle(node, style) { + const config = this.normalStyleToRichTextStyle(style) + if (Object.keys(config).length > 0) { + this.showEditText(node) + this.formatAllText(config) + this.hideEditText([node]) + } + } + // 处理导出为图片 async handleExportPng(node) { let el = document.createElement('div') diff --git a/simple-mind-map/src/plugins/Search.js b/simple-mind-map/src/plugins/Search.js index 77afa6df..5609295c 100644 --- a/simple-mind-map/src/plugins/Search.js +++ b/simple-mind-map/src/plugins/Search.js @@ -73,7 +73,7 @@ class Search { this.matchNodeList = [] this.currentIndex = -1 bfsWalk(this.mindMap.renderer.root, node => { - let { richText, text } = node.nodeData.data + let { richText, text } = node.getData() if (richText) { text = getTextFromHtml(text) } @@ -115,7 +115,7 @@ class Search { if (!currentNode) return let text = this.getReplacedText(currentNode, this.searchText, replaceText) this.notResetSearchText = true - currentNode.setText(text, currentNode.nodeData.data.richText, true) + currentNode.setText(text, currentNode.getData('richText'), true) this.matchNodeList = this.matchNodeList.filter(node => { return currentNode !== node }) @@ -143,7 +143,7 @@ class Search { node, { text, - resetRichText: !!node.nodeData.data.richText + resetRichText: !!node.getData('richText') }, true ) @@ -155,7 +155,7 @@ class Search { // 获取某个节点替换后的文本 getReplacedText(node, searchText, replaceText) { - let { richText, text } = node.nodeData.data + let { richText, text } = node.getData() if (richText) { return replaceHtmlText(text, searchText, replaceText) } else { diff --git a/simple-mind-map/src/plugins/Select.js b/simple-mind-map/src/plugins/Select.js index c26ebb58..8ce6d761 100644 --- a/simple-mind-map/src/plugins/Select.js +++ b/simple-mind-map/src/plugins/Select.js @@ -89,23 +89,28 @@ class Select { } ) }) - this.mindMap.on('mouseup', () => { - if (this.mindMap.opt.readonly) { - return - } - if (!this.isMousedown) { - return - } - this.checkTriggerNodeActiveEvent() - clearTimeout(this.autoMoveTimer) - this.isMousedown = false - this.cacheActiveList = [] - if (this.rect) this.rect.remove() - this.rect = null - setTimeout(() => { - this.isSelecting = false - }, 0) - }) + this.onMouseup = this.onMouseup.bind(this) + this.mindMap.on('mouseup', this.onMouseup) + this.mindMap.on('node_mouseup', this.onMouseup) + } + + // 结束框选 + onMouseup() { + if (this.mindMap.opt.readonly) { + return + } + if (!this.isMousedown) { + return + } + this.checkTriggerNodeActiveEvent() + clearTimeout(this.autoMoveTimer) + this.isMousedown = false + this.cacheActiveList = [] + if (this.rect) this.rect.remove() + this.rect = null + setTimeout(() => { + this.isSelecting = false + }, 0) } // 如果激活节点改变了，那么触发事件 @@ -119,7 +124,7 @@ class Select { let cur = this.cacheActiveList[i] if ( !this.mindMap.renderer.activeNodeList.find(item => { - return item.nodeData.data.uid === cur.nodeData.data.uid + return item.getData('uid') === cur.getData('uid') }) ) { isNodeChange = true @@ -184,6 +189,7 @@ class Select { // 创建矩形 createRect(x, y) { + if (this.rect) this.rect.remove() this.rect = this.mindMap.svg .polygon() .stroke({ @@ -212,17 +218,15 @@ class Select { if ( checkTwoRectIsOverlap(minx, maxx, miny, maxy, left, right, top, bottom) ) { - if (node.nodeData.data.isActive) { + if (node.getData('isActive')) { return } - this.mindMap.renderer.setNodeActive(node, true) - this.mindMap.renderer.addActiveNode(node) - } else if (node.nodeData.data.isActive) { - if (!node.nodeData.data.isActive) { + this.mindMap.renderer.addNodeToActiveList(node) + } else if (node.getData('isActive')) { + if (!node.getData('isActive')) { return } - this.mindMap.renderer.setNodeActive(node, false) - this.mindMap.renderer.removeActiveNode(node) + this.mindMap.renderer.removeNodeFromActiveList(node) } }) } diff --git a/simple-mind-map/src/plugins/Watermark.js b/simple-mind-map/src/plugins/Watermark.js index c511be50..b9597598 100644 --- a/simple-mind-map/src/plugins/Watermark.js +++ b/simple-mind-map/src/plugins/Watermark.js @@ -11,13 +11,48 @@ class Watermark { this.angle = 0 // 旋转角度 this.text = '' // 水印文字 this.textStyle = {} // 水印文字样式 + this.watermarkDraw = null // 容器 + this.maxLong = this.getMaxLong() + this.updateWatermark(this.mindMap.opt.watermarkConfig || {}) + this.bindEvent() + } + + getMaxLong() { + return Math.sqrt( + Math.pow(this.mindMap.width, 2) + Math.pow(this.mindMap.height, 2) + ) + } + + bindEvent() { + this.onResize = this.onResize.bind(this) + this.mindMap.on('resize', this.onResize) + } + + unBindEvent() { + this.mindMap.off('resize', this.onResize) + } + + onResize() { + this.maxLong = this.getMaxLong() + this.draw() + } + + // 创建水印容器 + createContainer() { + if (this.watermarkDraw) return this.watermarkDraw = this.mindMap.svg .group() .css({ 'pointer-events': 'none', 'user-select': 'none' }) - this.maxLong = Math.sqrt( - Math.pow(this.mindMap.width, 2) + Math.pow(this.mindMap.height, 2) - ) - this.updateWatermark(this.mindMap.opt.watermarkConfig || {}) + .addClass('smm-water-mark-container') + } + + // 删除水印容器 + removeContainer() { + if (!this.watermarkDraw) { + return + } + this.watermarkDraw.remove() + this.watermarkDraw = null } // 获取是否存在水印 @@ -40,10 +75,14 @@ class Watermark { // 绘制水印 // 非精确绘制，会绘制一些超出可视区域的水印 draw() { - this.watermarkDraw.clear() + // 清空之前的水印 + if (this.watermarkDraw) this.watermarkDraw.clear() + // 如果没有水印数据，那么水印容器也删除掉 if (!this.hasWatermark()) { + this.removeContainer() return } + this.createContainer() let x = 0 while (x < this.mindMap.width) { this.drawText(x) @@ -116,6 +155,16 @@ class Watermark { this.handleConfig(config) this.draw() } + + // 插件被移除前做的事情 + beforePluginRemove() { + this.unBindEvent() + } + + // 插件被卸载前做的事情 + beforePluginDestroy() { + this.unBindEvent() + } } Watermark.instanceName = 'watermark' diff --git a/simple-mind-map/src/plugins/associativeLine/associativeLineControls.js b/simple-mind-map/src/plugins/associativeLine/associativeLineControls.js index a35b4d7c..a2a4bb90 100644 --- a/simple-mind-map/src/plugins/associativeLine/associativeLineControls.js +++ b/simple-mind-map/src/plugins/associativeLine/associativeLineControls.js @@ -9,10 +9,10 @@ import { function createControlNodes() { let { associativeLineActiveColor } = this.mindMap.themeConfig // 连线 - this.controlLine1 = this.draw + this.controlLine1 = this.associativeLineDraw .line() .stroke({ color: associativeLineActiveColor, width: 2 }) - this.controlLine2 = this.draw + this.controlLine2 = this.associativeLineDraw .line() .stroke({ color: associativeLineActiveColor, width: 2 }) // 控制点 @@ -23,7 +23,7 @@ function createControlNodes() { // 创建控制点 function createOneControlNode(pointKey) { let { associativeLineActiveColor } = this.mindMap.themeConfig - return this.draw + return this.associativeLineDraw .circle(this.controlPointDiameter) .stroke({ color: associativeLineActiveColor }) .fill({ color: '#fff' }) @@ -64,7 +64,7 @@ function onControlPointMousemove(e) { let [, , , node, toNode] = this.activeLine let targetIndex = getAssociativeLineTargetIndex(node, toNode) let { associativeLinePoint, associativeLineTargetControlOffsets } = - node.nodeData.data + node.getData() associativeLinePoint = associativeLinePoint || [] const nodePos = this.getNodePos(node) const toNodePos = this.getNodePos(toNode) @@ -160,7 +160,7 @@ function onControlPointMouseup(e) { let [, , , node] = this.activeLine let offsetList = [] let { associativeLinePoint, associativeLineTargetControlOffsets } = - node.nodeData.data + node.getData() if (!associativeLinePoint) { associativeLinePoint = [] } diff --git a/simple-mind-map/src/plugins/associativeLine/associativeLineText.js b/simple-mind-map/src/plugins/associativeLine/associativeLineText.js index 201077f0..e130dc7a 100644 --- a/simple-mind-map/src/plugins/associativeLine/associativeLineText.js +++ b/simple-mind-map/src/plugins/associativeLine/associativeLineText.js @@ -7,7 +7,7 @@ import { // 创建文字节点 function createText(data) { - let g = this.draw.group() + let g = this.associativeLineDraw.group() const setActive = () => { if ( !this.activeLine || @@ -110,8 +110,8 @@ function hideEditTextBox() { str = isDefaultText ? '' : str this.mindMap.execCommand('SET_NODE_DATA', node, { associativeLineText: { - ...(node.nodeData.data.associativeLineText || {}), - [toNode.nodeData.data.uid]: str + ...(node.getData('associativeLineText') || {}), + [toNode.getData('uid')]: str } }) this.textEditNode.style.display = 'none' @@ -123,11 +123,11 @@ function hideEditTextBox() { // 获取某根关联线的文字 function getText(node, toNode) { - let obj = node.nodeData.data.associativeLineText + let obj = node.getData('associativeLineText') if (!obj) { return '' } - return obj[toNode.nodeData.data.uid] || '' + return obj[toNode.getData('uid')] || '' } // 渲染关联线文字 diff --git a/simple-mind-map/src/plugins/associativeLine/associativeLineUtils.js b/simple-mind-map/src/plugins/associativeLine/associativeLineUtils.js index ca46b6f8..38d52ffc 100644 --- a/simple-mind-map/src/plugins/associativeLine/associativeLineUtils.js +++ b/simple-mind-map/src/plugins/associativeLine/associativeLineUtils.js @@ -1,7 +1,7 @@ // 获取目标节点在起始节点的目标数组中的索引 export const getAssociativeLineTargetIndex = (node, toNode) => { - return node.nodeData.data.associativeLineTargets.findIndex(item => { - return item === toNode.nodeData.data.uid + return node.getData('associativeLineTargets').findIndex(item => { + return item === toNode.getData('uid') }) } @@ -202,7 +202,7 @@ export const computeNodePoints = (fromNode, toNode) => { // 中心点坐标的差值 let offsetX = toCx - fromCx let offsetY = toCy - fromCy - if (offsetX === 0 && offsetY === 0) return + if (offsetX === 0 && offsetY === 0) return [] let fromDir = '' let toDir = '' if (offsetX <= 0 && offsetX <= offsetY && offsetX <= -offsetY) { @@ -231,7 +231,7 @@ export const getNodeLinePath = (startPoint, endPoint, node, toNode) => { // 控制点 let controlPoints = [] let associativeLineTargetControlOffsets = - node.nodeData.data.associativeLineTargetControlOffsets + node.getData('associativeLineTargetControlOffsets') if ( associativeLineTargetControlOffsets && associativeLineTargetControlOffsets[targetIndex] diff --git a/simple-mind-map/src/utils/index.js b/simple-mind-map/src/utils/index.js index a882ffcd..984d01c2 100644 --- a/simple-mind-map/src/utils/index.js +++ b/simple-mind-map/src/utils/index.js @@ -167,11 +167,14 @@ export const copyNodeTree = ( tree, root, removeActiveState = false, - keepId = false + removeId = true ) => { tree.data = simpleDeepClone(root.nodeData ? root.nodeData.data : root.data) - // 重新创建节点uid，因为节点uid不能重复 - if (!keepId) { + // 移除节点uid + if (removeId) { + delete tree.data.uid + } else if (!tree.data.uid) { + // 否则保留或生成 tree.data.uid = createUid() } if (removeActiveState) { @@ -180,7 +183,7 @@ export const copyNodeTree = ( tree.children = [] if (root.children && root.children.length > 0) { root.children.forEach((item, index) => { - tree.children[index] = copyNodeTree({}, item, removeActiveState, keepId) + tree.children[index] = copyNodeTree({}, item, removeActiveState, removeId) }) } else if ( root.nodeData && @@ -188,7 +191,7 @@ export const copyNodeTree = ( root.nodeData.children.length > 0 ) { root.nodeData.children.forEach((item, index) => { - tree.children[index] = copyNodeTree({}, item, removeActiveState, keepId) + tree.children[index] = copyNodeTree({}, item, removeActiveState, removeId) }) } return tree @@ -766,14 +769,15 @@ export const addDataToAppointNodes = (appointNodes, data = {}) => { return appointNodes } -// 给指定的节点列表树数据添加uid，如果不存在的话，会修改原数据 -export const createUidForAppointNodes = appointNodes => { +// 给指定的节点列表树数据添加uid，会修改原数据 +// createNewId默认为false，即如果节点不存在uid的话，会创建新的uid。如果传true，那么无论节点数据原来是否存在uid，都会创建新的uid +export const createUidForAppointNodes = (appointNodes, createNewId = false) => { const walk = list => { list.forEach(node => { if (!node.data) { node.data = {} } - if (isUndef(node.data.uid)) { + if (createNewId || isUndef(node.data.uid)) { node.data.uid = createUid() } if (node.children && node.children.length > 0) { @@ -792,14 +796,21 @@ export const formatDataToArray = data => { } // 获取节点在同级里的位置索引 -export const getNodeIndex = node => { +export const getNodeDataIndex = node => { return node.parent - ? node.parent.children.findIndex(item => { - return item.uid === node.uid + ? node.parent.nodeData.children.findIndex(item => { + return item.data.uid === node.uid }) : 0 } +// 从一个节点列表里找出某个节点的索引 +export const getNodeIndexInNodeList = (node, nodeList) => { + return nodeList.findIndex(item => { + return item.uid === node.uid + }) +} + // 根据内容生成颜色 export const generateColorByContent = str => { let hash = 0 @@ -871,3 +882,42 @@ export const isSameObject = (a, b) => { return a === b } } + +// 将数据设置到用户剪切板中 +export const setDataToClipboard = data => { + if (navigator.clipboard) { + navigator.clipboard.writeText(JSON.stringify(data)) + } +} + +// 从用户剪贴板中读取文字和图片 +export const getDataFromClipboard = async () => { + let text = null + let img = null + if (navigator.clipboard) { + text = await navigator.clipboard.readText() + const items = await navigator.clipboard.read() + if (items && items.length > 0) { + for (const clipboardItem of items) { + for (const type of clipboardItem.types) { + if (/^image\//.test(type)) { + img = await clipboardItem.getType(type) + break + } + } + } + } + } + return { + text, + img + } +} + +// 从节点的父节点的nodeData.children列表中移除该节点的数据 +export const removeFromParentNodeData = node => { + if (!node || !node.parent) return + const index = getNodeDataIndex(node) + if (index === -1) return + node.parent.nodeData.children.splice(index, 1) +} diff --git a/simple-mind-map/types/index.d.ts b/simple-mind-map/types/index.d.ts index 31567e7e..e357d95b 100644 --- a/simple-mind-map/types/index.d.ts +++ b/simple-mind-map/types/index.d.ts @@ -76,7 +76,7 @@ declare class MindMap { disableMouseWheelZoom: boolean; errorHandler: (code: any, error: any) => void; resetCss: string; - enableDblclickReset: boolean; + enableDblclickBackToRootNode: boolean; minExportImgCanvasScale: number; hoverRectColor: string; hoverRectPadding: number; @@ -95,15 +95,18 @@ declare class MindMap { beingDragNodeOpacity: number; }; tagsColorMap: {}; + cooperateStyle: { + avatarSize: number; + fontSize: number; + }; + associativeLineIsAlwaysAboveNode: boolean; + defaultGeneralizationText: string; + handleIsSplitByWrapOnPasteCreateNewNode: any; + addHistoryTime: number; }); opt: any; el: any; - elRect: any; - width: any; - height: any; cssEl: HTMLStyleElement; - svg: any; - draw: any; event: Event; keyCommand: KeyCommand; command: Command; @@ -111,10 +114,22 @@ declare class MindMap { view: View; batchExecution: BatchExecution; handleOpt(opt: any): any; + initContainer(): void; + associativeLineDraw: any; + svg: any; + draw: any; + lineDraw: any; + nodeDraw: any; + otherDraw: any; + clearDraw(): void; addCss(): void; removeCss(): void; render(callback: any, source?: string): void; reRender(callback: any, source?: string): void; + getElRectInfo(): void; + elRect: any; + width: any; + height: any; resize(): void; on(event: any, fn: any): void; emit(event: any, ...args: any[]): void; @@ -122,15 +137,15 @@ declare class MindMap { initCache(): void; initTheme(): void; themeConfig: any; - setTheme(theme: any): void; + setTheme(theme: any, notRender?: boolean): void; getTheme(): any; - setThemeConfig(config: any): void; + setThemeConfig(config: any, notRender?: boolean): void; getCustomThemeConfig(): any; getThemeConfig(prop: any): any; getConfig(prop: any): any; updateConfig(opt?: {}): void; getLayout(): any; - setLayout(layout: any): void; + setLayout(layout: any, notRender?: boolean): void; execCommand(...args: any[]): void; setData(data: any): void; setFullData(data: any): void; @@ -141,9 +156,10 @@ declare class MindMap { y: number; }; setMode(mode: any): void; - getSvgData({ paddingX, paddingY }?: { + getSvgData({ paddingX, paddingY, ignoreWatermark }?: { paddingX?: number; paddingY?: number; + ignoreWatermark?: boolean; }): { svg: any; svgHTML: any; @@ -159,14 +175,14 @@ declare class MindMap { destroy(): void; } declare namespace MindMap { - let pluginList: any[]; + const pluginList: any[]; function usePlugin(plugin: any, opt?: {}): typeof MindMap; function hasPlugin(plugin: any): number; function defineTheme(name: any, config?: {}): Error; } -import Event from './src/core/event/Event'; -import KeyCommand from './src/core/command/KeyCommand'; -import Command from './src/core/command/Command'; -import Render from './src/core/render/Render'; -import View from './src/core/view/View'; -import BatchExecution from './src/utils/BatchExecution'; +import Event from "./src/core/event/Event"; +import KeyCommand from "./src/core/command/KeyCommand"; +import Command from "./src/core/command/Command"; +import Render from "./src/core/render/Render"; +import View from "./src/core/view/View"; +import BatchExecution from "./src/utils/BatchExecution"; diff --git a/simple-mind-map/types/src/constants/constant.d.ts b/simple-mind-map/types/src/constants/constant.d.ts index bf00d5b9..3ac64ae7 100644 --- a/simple-mind-map/types/src/constants/constant.d.ts +++ b/simple-mind-map/types/src/constants/constant.d.ts @@ -4,81 +4,81 @@ export const themeList: { dark: boolean; }[]; export namespace CONSTANTS { - let CHANGE_THEME: string; - let CHANGE_LAYOUT: string; - let SET_DATA: string; - let TRANSFORM_TO_NORMAL_NODE: string; + const CHANGE_THEME: string; + const CHANGE_LAYOUT: string; + const SET_DATA: string; + const TRANSFORM_TO_NORMAL_NODE: string; namespace MODE { - let READONLY: string; - let EDIT: string; + const READONLY: string; + const EDIT: string; } namespace LAYOUT { - let LOGICAL_STRUCTURE: string; - let MIND_MAP: string; - let ORGANIZATION_STRUCTURE: string; - let CATALOG_ORGANIZATION: string; - let TIMELINE: string; - let TIMELINE2: string; - let FISHBONE: string; - let VERTICAL_TIMELINE: string; + const LOGICAL_STRUCTURE: string; + const MIND_MAP: string; + const ORGANIZATION_STRUCTURE: string; + const CATALOG_ORGANIZATION: string; + const TIMELINE: string; + const TIMELINE2: string; + const FISHBONE: string; + const VERTICAL_TIMELINE: string; } namespace DIR { - let UP: string; - let LEFT: string; - let DOWN: string; - let RIGHT: string; + const UP: string; + const LEFT: string; + const DOWN: string; + const RIGHT: string; } namespace KEY_DIR { - let LEFT_1: string; + const LEFT_1: string; export { LEFT_1 as LEFT }; - let UP_1: string; + const UP_1: string; export { UP_1 as UP }; - let RIGHT_1: string; + const RIGHT_1: string; export { RIGHT_1 as RIGHT }; - let DOWN_1: string; + const DOWN_1: string; export { DOWN_1 as DOWN }; } namespace SHAPE { - let RECTANGLE: string; - let DIAMOND: string; - let PARALLELOGRAM: string; - let ROUNDED_RECTANGLE: string; - let OCTAGONAL_RECTANGLE: string; - let OUTER_TRIANGULAR_RECTANGLE: string; - let INNER_TRIANGULAR_RECTANGLE: string; - let ELLIPSE: string; - let CIRCLE: string; + const RECTANGLE: string; + const DIAMOND: string; + const PARALLELOGRAM: string; + const ROUNDED_RECTANGLE: string; + const OCTAGONAL_RECTANGLE: string; + const OUTER_TRIANGULAR_RECTANGLE: string; + const INNER_TRIANGULAR_RECTANGLE: string; + const ELLIPSE: string; + const CIRCLE: string; } namespace MOUSE_WHEEL_ACTION { - let ZOOM: string; - let MOVE: string; + const ZOOM: string; + const MOVE: string; } namespace INIT_ROOT_NODE_POSITION { - let LEFT_2: string; + const LEFT_2: string; export { LEFT_2 as LEFT }; - export let TOP: string; - let RIGHT_2: string; + export const TOP: string; + const RIGHT_2: string; export { RIGHT_2 as RIGHT }; - export let BOTTOM: string; - export let CENTER: string; + export const BOTTOM: string; + export const CENTER: string; } namespace LAYOUT_GROW_DIR { - let LEFT_3: string; + const LEFT_3: string; export { LEFT_3 as LEFT }; - let TOP_1: string; + const TOP_1: string; export { TOP_1 as TOP }; - let RIGHT_3: string; + const RIGHT_3: string; export { RIGHT_3 as RIGHT }; - let BOTTOM_1: string; + const BOTTOM_1: string; export { BOTTOM_1 as BOTTOM }; } namespace PASTE_TYPE { - let CLIP_BOARD: string; - let CANVAS: string; + const CLIP_BOARD: string; + const CANVAS: string; } namespace SCROLL_BAR_DIR { - let VERTICAL: string; - let HORIZONTAL: string; + const VERTICAL: string; + const HORIZONTAL: string; } } export const initRootNodePositionMap: { @@ -91,19 +91,19 @@ export const layoutList: { export const layoutValueList: string[]; export const nodeDataNoStylePropList: string[]; export namespace commonCaches { - let measureCustomNodeContentSizeEl: any; - let measureRichtextNodeTextSizeEl: any; + const measureCustomNodeContentSizeEl: any; + const measureRichtextNodeTextSizeEl: any; } export namespace ERROR_TYPES { - let READ_CLIPBOARD_ERROR: string; - let PARSE_PASTE_DATA_ERROR: string; - let CUSTOM_HANDLE_CLIPBOARD_TEXT_ERROR: string; - let LOAD_CLIPBOARD_IMAGE_ERROR: string; - let BEFORE_TEXT_EDIT_ERROR: string; - let EXPORT_ERROR: string; + const READ_CLIPBOARD_ERROR: string; + const PARSE_PASTE_DATA_ERROR: string; + const CUSTOM_HANDLE_CLIPBOARD_TEXT_ERROR: string; + const LOAD_CLIPBOARD_IMAGE_ERROR: string; + const BEFORE_TEXT_EDIT_ERROR: string; + const EXPORT_ERROR: string; } export namespace a4Size { - let width: number; - let height: number; + const width: number; + const height: number; } export const cssContent: "\n /* 鼠标hover和激活时渲染的矩形 */\n .smm-hover-node{\n display: none;\n opacity: 0.6;\n stroke-width: 1;\n }\n\n .smm-node:not(.smm-node-dragging):hover .smm-hover-node{\n display: block;\n }\n\n .smm-node.active .smm-hover-node{\n display: block;\n opacity: 1;\n stroke-width: 2;\n }\n"; diff --git a/simple-mind-map/types/src/constants/defaultOptions.d.ts b/simple-mind-map/types/src/constants/defaultOptions.d.ts index 93dcb638..2541f2a6 100644 --- a/simple-mind-map/types/src/constants/defaultOptions.d.ts +++ b/simple-mind-map/types/src/constants/defaultOptions.d.ts @@ -1,95 +1,104 @@ export namespace defaultOpt { - let readonly: boolean; - let layout: string; - let fishboneDeg: number; - let theme: string; - let themeConfig: {}; - let scaleRatio: number; - let mouseScaleCenterUseMousePosition: boolean; - let maxTag: number; - let expandBtnSize: number; - let imgTextMargin: number; - let textContentMargin: number; - let selectTranslateStep: number; - let selectTranslateLimit: number; - let customNoteContentShow: any; - let enableFreeDrag: boolean; + const readonly: boolean; + const layout: string; + const fishboneDeg: number; + const theme: string; + const themeConfig: {}; + const scaleRatio: number; + const mouseScaleCenterUseMousePosition: boolean; + const maxTag: number; + const expandBtnSize: number; + const imgTextMargin: number; + const textContentMargin: number; + const selectTranslateStep: number; + const selectTranslateLimit: number; + const customNoteContentShow: any; + const enableFreeDrag: boolean; namespace watermarkConfig { - let text: string; - let lineSpacing: number; - let textSpacing: number; - let angle: number; + const text: string; + const lineSpacing: number; + const textSpacing: number; + const angle: number; namespace textStyle { - let color: string; - let opacity: number; - let fontSize: number; + const color: string; + const opacity: number; + const fontSize: number; } } - let textAutoWrapWidth: number; - let customHandleMousewheel: any; - let mousewheelAction: string; - let mousewheelMoveStep: number; - let mousewheelZoomActionReverse: boolean; - let defaultInsertSecondLevelNodeText: string; - let defaultInsertBelowSecondLevelNodeText: string; + const textAutoWrapWidth: number; + const customHandleMousewheel: any; + const mousewheelAction: string; + const mousewheelMoveStep: number; + const mousewheelZoomActionReverse: boolean; + const defaultInsertSecondLevelNodeText: string; + const defaultInsertBelowSecondLevelNodeText: string; namespace expandBtnStyle { - let color_1: string; + const color_1: string; export { color_1 as color }; - export let fill: string; - let fontSize_1: number; + export const fill: string; + const fontSize_1: number; export { fontSize_1 as fontSize }; - export let strokeColor: string; + export const strokeColor: string; } namespace expandBtnIcon { - let open: string; - let close: string; + const open: string; + const close: string; } function expandBtnNumHandler(num: any): any; - let isShowExpandNum: boolean; - let enableShortcutOnlyWhenMouseInSvg: boolean; - let initRootNodePosition: any; - let exportPaddingX: number; - let exportPaddingY: number; - let nodeTextEditZIndex: number; - let nodeNoteTooltipZIndex: number; - let isEndNodeTextEditOnClickOuter: boolean; - let maxHistoryCount: number; - let alwaysShowExpandBtn: boolean; - let iconList: any[]; - let maxNodeCacheCount: number; - let defaultAssociativeLineText: string; - let fitPadding: number; - let enableCtrlKeyNodeSelection: boolean; - let useLeftKeySelectionRightKeyDrag: boolean; - let beforeTextEdit: any; - let isUseCustomNodeContent: boolean; - let customCreateNodeContent: any; - let customInnerElsAppendTo: any; - let nodeDragPlaceholderMaxSize: number; - let enableAutoEnterTextEditWhenKeydown: boolean; - let richTextEditFakeInPlace: boolean; - let customHandleClipboardText: any; - let disableMouseWheelZoom: boolean; + const isShowExpandNum: boolean; + const enableShortcutOnlyWhenMouseInSvg: boolean; + const initRootNodePosition: any; + const exportPaddingX: number; + const exportPaddingY: number; + const nodeTextEditZIndex: number; + const nodeNoteTooltipZIndex: number; + const isEndNodeTextEditOnClickOuter: boolean; + const maxHistoryCount: number; + const alwaysShowExpandBtn: boolean; + const iconList: any[]; + const maxNodeCacheCount: number; + const defaultAssociativeLineText: string; + const fitPadding: number; + const enableCtrlKeyNodeSelection: boolean; + const useLeftKeySelectionRightKeyDrag: boolean; + const beforeTextEdit: any; + const isUseCustomNodeContent: boolean; + const customCreateNodeContent: any; + const customInnerElsAppendTo: any; + const nodeDragPlaceholderMaxSize: number; + const enableAutoEnterTextEditWhenKeydown: boolean; + const richTextEditFakeInPlace: boolean; + const customHandleClipboardText: any; + const disableMouseWheelZoom: boolean; function errorHandler(code: any, error: any): void; - let resetCss: string; - let enableDblclickReset: boolean; - let minExportImgCanvasScale: number; - let hoverRectColor: string; - let hoverRectPadding: number; - let selectTextOnEnterEditText: boolean; - let deleteNodeActive: boolean; - let autoMoveWhenMouseInEdgeOnDrag: boolean; - let fit: boolean; + const resetCss: string; + const enableDblclickBackToRootNode: boolean; + const minExportImgCanvasScale: number; + const hoverRectColor: string; + const hoverRectPadding: number; + const selectTextOnEnterEditText: boolean; + const deleteNodeActive: boolean; + const autoMoveWhenMouseInEdgeOnDrag: boolean; + const fit: boolean; namespace dragMultiNodeRectConfig { - export let width: number; - export let height: number; - let fill_1: string; + export const width: number; + export const height: number; + const fill_1: string; export { fill_1 as fill }; } - let dragPlaceholderRectFill: string; + const dragPlaceholderRectFill: string; namespace dragOpacityConfig { - let cloneNodeOpacity: number; - let beingDragNodeOpacity: number; + const cloneNodeOpacity: number; + const beingDragNodeOpacity: number; } - let tagsColorMap: {}; + const tagsColorMap: {}; + namespace cooperateStyle { + export const avatarSize: number; + const fontSize_2: number; + export { fontSize_2 as fontSize }; + } + const associativeLineIsAlwaysAboveNode: boolean; + const defaultGeneralizationText: string; + const handleIsSplitByWrapOnPasteCreateNewNode: any; + const addHistoryTime: number; } diff --git a/simple-mind-map/types/src/core/render/Render.d.ts b/simple-mind-map/types/src/core/render/Render.d.ts index 346c7709..fe0bf10f 100644 --- a/simple-mind-map/types/src/core/render/Render.d.ts +++ b/simple-mind-map/types/src/core/render/Render.d.ts @@ -4,11 +4,11 @@ declare class Render { opt: {}; mindMap: any; themeConfig: any; - draw: any; renderTree: any; reRender: boolean; isRendering: boolean; hasWaitRendering: boolean; + waitRenderingParams: any[]; nodeCache: {}; lastNodeCache: {}; renderSource: string; @@ -22,6 +22,7 @@ declare class Render { currentBeingPasteType: string; setLayout(): void; layout: MindMap | CatalogOrganization | OrganizationStructure | Timeline | VerticalTimeline; + setData(data: any): void; bindEvent(): void; registerCommands(): void; selectAll(): void; @@ -31,18 +32,20 @@ declare class Render { insertMultiNode(appointNodes: any, nodeList: any): void; insertChildNode(openEdit?: boolean, appointNodes?: any[], appointData?: any, appointChildren?: any[]): void; insertMultiChildNode(appointNodes: any, childList: any): void; + insertParentNode(openEdit: boolean, appointNodes: any, appointData: any): void; upNode(): void; downNode(): void; insertAfter(node: any, exist: any): void; insertBefore(node: any, exist: any): void; moveNodeTo(node: any, toNode: any): void; removeNode(appointNodes?: any[]): void; + removeCurrentNode(appointNodes?: any[]): void; pasteNode(data: any): void; cutNode(callback: any): void; setNodeStyle(node: any, prop: any, value: any): void; setNodeStyles(node: any, style: any): void; setNodeActive(node: any, active: any): void; - clearAllActive(): void; + clearActiveNode(): void; setNodeExpand(node: any, expand: any): void; expandAllNode(): void; unexpandAllNode(): void; @@ -62,34 +65,35 @@ declare class Render { setNodeShape(node: any, shape: any): void; goTargetNode(node: any, callback?: () => void): void; registerShortcutKeys(): void; - insertNodeWrap: () => void; toggleActiveExpand(): void; - removeNodeWrap: () => void; - copy(): void; - cut(): void; + clearActiveNodeListOnDrawClick(e: any, eventType: any): void; startTextEdit(): void; endTextEdit(): void; render(callback: () => void, source: any): void; - clearActive(): void; - addActiveNode(node: any): void; - removeActiveNode(node: any): void; - findActiveNodeIndex(node: any): number; - setCopyDataToClipboard(data: any): void; + clearActiveNodeList(): void; + addNodeToActiveList(node: any): void; + removeNodeFromActiveList(node: any): void; + findActiveNodeIndex(node: any): any; + backForward(type: any, step: any): void; + copy(): void; + cut(): void; paste(): void; onPaste(): Promise; insertTo(node: any, exist: any, dir?: string): void; checkNodeLayerChange(node: any, toNode: any): void; - removeOneNode(node: any): void; + getNextActiveNode(): any; copyNode(): any; toggleNodeExpand(node: any): void; setNodeDataRender(node: any, data: any, notRender?: boolean): void; moveNodeToCenter(node: any): void; + setRootNodeCenter(): void; expandToNodeUid(uid: any, callback?: () => void): void; findNodeByUid(uid: any): any; + emitNodeActiveEvent(): void; } -import TextEdit from './TextEdit'; -import MindMap from '../../layouts/MindMap'; -import CatalogOrganization from '../../layouts/CatalogOrganization'; -import OrganizationStructure from '../../layouts/OrganizationStructure'; -import Timeline from '../../layouts/Timeline'; -import VerticalTimeline from '../../layouts/VerticalTimeline'; +import TextEdit from "./TextEdit"; +import MindMap from "../../layouts/MindMap"; +import CatalogOrganization from "../../layouts/CatalogOrganization"; +import OrganizationStructure from "../../layouts/OrganizationStructure"; +import Timeline from "../../layouts/Timeline"; +import VerticalTimeline from "../../layouts/VerticalTimeline"; diff --git a/simple-mind-map/types/src/core/render/node/Node.d.ts b/simple-mind-map/types/src/core/render/node/Node.d.ts index 0991864c..332fc6b8 100644 --- a/simple-mind-map/types/src/core/render/node/Node.d.ts +++ b/simple-mind-map/types/src/core/render/node/Node.d.ts @@ -6,6 +6,8 @@ declare class Node { mindMap: any; renderer: any; draw: any; + nodeDraw: any; + lineDraw: any; style: Style; shapeInstance: Shape; shapePadding: { @@ -25,6 +27,7 @@ declare class Node { isDrag: boolean; parent: any; children: any; + userList: any[]; group: any; shapeNode: any; hoverNode: any; @@ -42,6 +45,7 @@ declare class Node { _openExpandNode: any; _closeExpandNode: any; _fillExpandNode: any; + _userListGroup: any; _lines: any[]; _generalizationLine: any; _generalizationNode: any; @@ -82,7 +86,8 @@ declare class Node { top: any; }; reRender(): boolean; - updateNodeActive(): void; + updateNodeActiveClass(): void; + updateNodeByActive(active: any): void; render(callback?: () => void): void; remove(): void; destroy(): void; @@ -114,5 +119,5 @@ declare class Node { getData(key: any): any; hasCustomStyle(): boolean; } -import Style from './Style'; -import Shape from './Shape'; +import Style from "./Style"; +import Shape from "./Shape"; diff --git a/simple-mind-map/types/src/core/render/node/Style.d.ts b/simple-mind-map/types/src/core/render/node/Style.d.ts index 3c78574f..35f67b51 100644 --- a/simple-mind-map/types/src/core/render/node/Style.d.ts +++ b/simple-mind-map/types/src/core/render/node/Style.d.ts @@ -32,5 +32,5 @@ declare class Style { hoverNode(node: any): void; } declare namespace Style { - let cacheStyle: any; + const cacheStyle: any; } diff --git a/simple-mind-map/types/src/core/render/node/nodeCooperate.d.ts b/simple-mind-map/types/src/core/render/node/nodeCooperate.d.ts new file mode 100644 index 00000000..61b696ed --- /dev/null +++ b/simple-mind-map/types/src/core/render/node/nodeCooperate.d.ts @@ -0,0 +1,18 @@ +declare namespace _default { + export { createUserListNode }; + export { updateUserListNode }; + export { createTextAvatar }; + export { createImageAvatar }; + export { addUser }; + export { removeUser }; +} +export default _default; +declare function createUserListNode(): void; +declare class createUserListNode { + _userListGroup: any; +} +declare function updateUserListNode(): void; +declare function createTextAvatar(item: any): any; +declare function createImageAvatar(item: any): any; +declare function addUser(userInfo: any): void; +declare function removeUser(userInfo: any): void; diff --git a/simple-mind-map/types/src/core/render/node/nodeGeneralization.d.ts b/simple-mind-map/types/src/core/render/node/nodeGeneralization.d.ts index 9382d87d..7dc71a37 100644 --- a/simple-mind-map/types/src/core/render/node/nodeGeneralization.d.ts +++ b/simple-mind-map/types/src/core/render/node/nodeGeneralization.d.ts @@ -29,4 +29,4 @@ declare class removeGeneralization { } declare function hideGeneralization(): void; declare function showGeneralization(): void; -import Node from './Node'; +import Node from "./Node"; diff --git a/simple-mind-map/types/src/layouts/Base.d.ts b/simple-mind-map/types/src/layouts/Base.d.ts index bf03b37c..8919b4be 100644 --- a/simple-mind-map/types/src/layouts/Base.d.ts +++ b/simple-mind-map/types/src/layouts/Base.d.ts @@ -4,6 +4,7 @@ declare class Base { renderer: any; mindMap: any; draw: any; + lineDraw: any; root: any; lru: Lru; doLayout(): void; @@ -40,4 +41,4 @@ declare class Base { }; getNodeActChildrenLength(node: any): any; } -import Lru from '../utils/Lru'; +import Lru from "../utils/Lru"; diff --git a/simple-mind-map/types/src/layouts/CatalogOrganization.d.ts b/simple-mind-map/types/src/layouts/CatalogOrganization.d.ts index d95995c2..53eb9010 100644 --- a/simple-mind-map/types/src/layouts/CatalogOrganization.d.ts +++ b/simple-mind-map/types/src/layouts/CatalogOrganization.d.ts @@ -1,15 +1,11 @@ export default CatalogOrganization; declare class CatalogOrganization extends Base { constructor(opt?: {}); - doLayout(callback: any): void; computedBaseValue(): void; computedLeftTopValue(): void; adjustLeftTopValue(): void; updateBrothersLeft(node: any, addWidth: any): void; updateBrothersTop(node: any, addHeight: any): void; - renderLine(node: any, lines: any, style: any): any[]; - renderExpandBtn(node: any, btn: any): void; - renderGeneralization(node: any, gLine: any, gNode: any): void; renderExpandBtnRect(rect: any, expandBtnSize: any, width: any, height: any, node: any): void; } -import Base from './Base'; +import Base from "./Base"; diff --git a/simple-mind-map/types/src/layouts/Fishbone.d.ts b/simple-mind-map/types/src/layouts/Fishbone.d.ts index cc213aa8..a3ee6033 100644 --- a/simple-mind-map/types/src/layouts/Fishbone.d.ts +++ b/simple-mind-map/types/src/layouts/Fishbone.d.ts @@ -3,7 +3,6 @@ declare class Fishbone extends Base { constructor(opt?: {}); indent: number; childIndent: number; - doLayout(callback: any): void; computedBaseValue(): void; computedLeftTopValue(): void; adjustLeftTopValue(): void; @@ -11,9 +10,6 @@ declare class Fishbone extends Base { updateBrothersLeft(node: any): void; updateBrothersTop(node: any, addHeight: any): void; checkIsTop(node: any): boolean; - renderLine(node: any, lines: any, style: any): any[]; - renderExpandBtn(node: any, btn: any): void; - renderGeneralization(node: any, gLine: any, gNode: any): void; renderExpandBtnRect(rect: any, expandBtnSize: any, width: any, height: any, node: any): void; } -import Base from './Base'; +import Base from "./Base"; diff --git a/simple-mind-map/types/src/layouts/LogicalStructure.d.ts b/simple-mind-map/types/src/layouts/LogicalStructure.d.ts index fcb0ea59..c7773b2c 100644 --- a/simple-mind-map/types/src/layouts/LogicalStructure.d.ts +++ b/simple-mind-map/types/src/layouts/LogicalStructure.d.ts @@ -1,17 +1,13 @@ export default LogicalStructure; declare class LogicalStructure extends Base { constructor(opt?: {}); - doLayout(callback: any): void; computedBaseValue(): void; computedTopValue(): void; adjustTopValue(): void; updateBrothers(node: any, addHeight: any): void; - renderLine(node: any, lines: any, style: any, lineStyle: any): void; renderLineStraight(node: any, lines: any, style: any): any[]; renderLineDirect(node: any, lines: any, style: any): any[]; renderLineCurve(node: any, lines: any, style: any): any[]; - renderExpandBtn(node: any, btn: any): void; - renderGeneralization(node: any, gLine: any, gNode: any): void; renderExpandBtnRect(rect: any, expandBtnSize: any, width: any, height: any, node: any): void; } -import Base from './Base'; +import Base from "./Base"; diff --git a/simple-mind-map/types/src/layouts/MindMap.d.ts b/simple-mind-map/types/src/layouts/MindMap.d.ts index 492d3b50..bef75a63 100644 --- a/simple-mind-map/types/src/layouts/MindMap.d.ts +++ b/simple-mind-map/types/src/layouts/MindMap.d.ts @@ -1,17 +1,13 @@ export default MindMap; declare class MindMap extends Base { constructor(opt?: {}); - doLayout(callback: any): void; computedBaseValue(): void; computedTopValue(): void; adjustTopValue(): void; updateBrothers(node: any, leftAddHeight: any, rightAddHeight: any): void; - renderLine(node: any, lines: any, style: any, lineStyle: any): void; renderLineStraight(node: any, lines: any, style: any): any[]; renderLineDirect(node: any, lines: any, style: any): any[]; renderLineCurve(node: any, lines: any, style: any): any[]; - renderExpandBtn(node: any, btn: any): void; - renderGeneralization(node: any, gLine: any, gNode: any): void; renderExpandBtnRect(rect: any, expandBtnSize: any, width: any, height: any, node: any): void; } -import Base from './Base'; +import Base from "./Base"; diff --git a/simple-mind-map/types/src/layouts/OrganizationStructure.d.ts b/simple-mind-map/types/src/layouts/OrganizationStructure.d.ts index ae5961c2..316c1400 100644 --- a/simple-mind-map/types/src/layouts/OrganizationStructure.d.ts +++ b/simple-mind-map/types/src/layouts/OrganizationStructure.d.ts @@ -1,16 +1,12 @@ export default OrganizationStructure; declare class OrganizationStructure extends Base { constructor(opt?: {}); - doLayout(callback: any): void; computedBaseValue(): void; computedLeftValue(): void; adjustLeftValue(): void; updateBrothers(node: any, addWidth: any): void; - renderLine(node: any, lines: any, style: any, lineStyle: any): void; renderLineDirect(node: any, lines: any, style: any): any[]; renderLineStraight(node: any, lines: any, style: any): any[]; - renderExpandBtn(node: any, btn: any): void; - renderGeneralization(node: any, gLine: any, gNode: any): void; renderExpandBtnRect(rect: any, expandBtnSize: any, width: any, height: any, node: any): void; } -import Base from './Base'; +import Base from "./Base"; diff --git a/simple-mind-map/types/src/layouts/Timeline.d.ts b/simple-mind-map/types/src/layouts/Timeline.d.ts index ccc17aa6..79120394 100644 --- a/simple-mind-map/types/src/layouts/Timeline.d.ts +++ b/simple-mind-map/types/src/layouts/Timeline.d.ts @@ -2,16 +2,12 @@ export default Timeline; declare class Timeline extends Base { constructor(opt: {}, layout: any); layout: any; - doLayout(callback: any): void; computedBaseValue(): void; computedLeftTopValue(): void; adjustLeftTopValue(): void; getNodeAreaHeight(node: any): number; updateBrothersLeft(node: any): void; updateBrothersTop(node: any, addHeight: any): void; - renderLine(node: any, lines: any, style: any): any[]; - renderExpandBtn(node: any, btn: any): void; - renderGeneralization(node: any, gLine: any, gNode: any): void; renderExpandBtnRect(rect: any, expandBtnSize: any, width: any, height: any, node: any): void; } -import Base from './Base'; +import Base from "./Base"; diff --git a/simple-mind-map/types/src/layouts/VerticalTimeline.d.ts b/simple-mind-map/types/src/layouts/VerticalTimeline.d.ts index 1127a694..64b93e35 100644 --- a/simple-mind-map/types/src/layouts/VerticalTimeline.d.ts +++ b/simple-mind-map/types/src/layouts/VerticalTimeline.d.ts @@ -2,18 +2,14 @@ export default VerticalTimeline; declare class VerticalTimeline extends Base { constructor(opt: {}, layout: any); layout: any; - doLayout(callback: any): void; computedBaseValue(): void; computedTopValue(): void; adjustLeftTopValue(): void; updateBrothers(node: any, addHeight: any): void; updateBrothersTop(node: any, addHeight: any): void; - renderLine(node: any, lines: any, style: any, lineStyle: any): void; renderLineStraight(node: any, lines: any, style: any): any[]; renderLineDirect(node: any, lines: any, style: any): any[]; renderLineCurve(node: any, lines: any, style: any): any[]; - renderExpandBtn(node: any, btn: any): void; - renderGeneralization(node: any, gLine: any, gNode: any): void; renderExpandBtnRect(rect: any, expandBtnSize: any, width: any, height: any, node: any): void; } -import Base from './Base'; +import Base from "./Base"; diff --git a/simple-mind-map/types/src/layouts/fishboneUtils.d.ts b/simple-mind-map/types/src/layouts/fishboneUtils.d.ts index 59e2ebde..1333d94c 100644 --- a/simple-mind-map/types/src/layouts/fishboneUtils.d.ts +++ b/simple-mind-map/types/src/layouts/fishboneUtils.d.ts @@ -1,5 +1,14 @@ declare namespace _default { namespace top { + function renderExpandBtn({ node, btn, expandBtnSize, translateX, translateY, width, height }: { + node: any; + btn: any; + expandBtnSize: any; + translateX: any; + translateY: any; + width: any; + height: any; + }): void; function renderExpandBtn({ node, btn, expandBtnSize, translateX, translateY, width, height }: { node: any; btn: any; @@ -20,11 +29,33 @@ declare namespace _default { maxy: any; ctx: any; }): void; + function renderLine({ node, line, top, x, lineLength, height, expandBtnSize, maxy, ctx }: { + node: any; + line: any; + top: any; + x: any; + lineLength: any; + height: any; + expandBtnSize: any; + maxy: any; + ctx: any; + }): void; function computedLeftTopValue({ layerIndex, node, ctx }: { layerIndex: any; node: any; ctx: any; }): void; + function computedLeftTopValue({ layerIndex, node, ctx }: { + layerIndex: any; + node: any; + ctx: any; + }): void; + function adjustLeftTopValueBefore({ node, parent, ctx, layerIndex }: { + node: any; + parent: any; + ctx: any; + layerIndex: any; + }): void; function adjustLeftTopValueBefore({ node, parent, ctx, layerIndex }: { node: any; parent: any; @@ -36,8 +67,22 @@ declare namespace _default { node: any; ctx: any; }): void; + function adjustLeftTopValueAfter({ parent, node, ctx }: { + parent: any; + node: any; + ctx: any; + }): void; } namespace bottom { + function renderExpandBtn({ node, btn, expandBtnSize, translateX, translateY, width, height }: { + node: any; + btn: any; + expandBtnSize: any; + translateX: any; + translateY: any; + width: any; + height: any; + }): void; function renderExpandBtn({ node, btn, expandBtnSize, translateX, translateY, width, height }: { node: any; btn: any; @@ -57,11 +102,31 @@ declare namespace _default { miny: any; ctx: any; }): void; + function renderLine({ node, line, top, x, lineLength, height, miny, ctx }: { + node: any; + line: any; + top: any; + x: any; + lineLength: any; + height: any; + miny: any; + ctx: any; + }): void; function computedLeftTopValue({ layerIndex, node, ctx }: { layerIndex: any; node: any; ctx: any; }): void; + function computedLeftTopValue({ layerIndex, node, ctx }: { + layerIndex: any; + node: any; + ctx: any; + }): void; + function adjustLeftTopValueBefore({ node, ctx, layerIndex }: { + node: any; + ctx: any; + layerIndex: any; + }): void; function adjustLeftTopValueBefore({ node, ctx, layerIndex }: { node: any; ctx: any; @@ -72,6 +137,11 @@ declare namespace _default { node: any; ctx: any; }): void; + function adjustLeftTopValueAfter({ parent, node, ctx }: { + parent: any; + node: any; + ctx: any; + }): void; } } export default _default; diff --git a/simple-mind-map/types/src/themes/default.d.ts b/simple-mind-map/types/src/themes/default.d.ts index 5d31dd45..011f01f6 100644 --- a/simple-mind-map/types/src/themes/default.d.ts +++ b/simple-mind-map/types/src/themes/default.d.ts @@ -1,139 +1,139 @@ declare namespace _default { - let paddingX: number; - let paddingY: number; - let imgMaxWidth: number; - let imgMaxHeight: number; - let iconSize: number; - let lineWidth: number; - let lineColor: string; - let lineDasharray: string; - let lineStyle: string; - let rootLineKeepSameInCurve: boolean; - let generalizationLineWidth: number; - let generalizationLineColor: string; - let generalizationLineMargin: number; - let generalizationNodeMargin: number; - let associativeLineWidth: number; - let associativeLineColor: string; - let associativeLineActiveWidth: number; - let associativeLineActiveColor: string; - let associativeLineTextColor: string; - let associativeLineTextFontSize: number; - let associativeLineTextLineHeight: number; - let associativeLineTextFontFamily: string; - let backgroundColor: string; - let backgroundImage: string; - let backgroundRepeat: string; - let backgroundPosition: string; - let backgroundSize: string; - let nodeUseLineStyle: boolean; + const paddingX: number; + const paddingY: number; + const imgMaxWidth: number; + const imgMaxHeight: number; + const iconSize: number; + const lineWidth: number; + const lineColor: string; + const lineDasharray: string; + const lineStyle: string; + const rootLineKeepSameInCurve: boolean; + const generalizationLineWidth: number; + const generalizationLineColor: string; + const generalizationLineMargin: number; + const generalizationNodeMargin: number; + const associativeLineWidth: number; + const associativeLineColor: string; + const associativeLineActiveWidth: number; + const associativeLineActiveColor: string; + const associativeLineTextColor: string; + const associativeLineTextFontSize: number; + const associativeLineTextLineHeight: number; + const associativeLineTextFontFamily: string; + const backgroundColor: string; + const backgroundImage: string; + const backgroundRepeat: string; + const backgroundPosition: string; + const backgroundSize: string; + const nodeUseLineStyle: boolean; namespace root { - let shape: string; - let fillColor: string; - let fontFamily: string; - let color: string; - let fontSize: number; - let fontWeight: string; - let fontStyle: string; - let lineHeight: number; - let borderColor: string; - let borderWidth: number; - let borderDasharray: string; - let borderRadius: number; - let textDecoration: string; + const shape: string; + const fillColor: string; + const fontFamily: string; + const color: string; + const fontSize: number; + const fontWeight: string; + const fontStyle: string; + const lineHeight: number; + const borderColor: string; + const borderWidth: number; + const borderDasharray: string; + const borderRadius: number; + const textDecoration: string; } namespace second { - let shape_1: string; + const shape_1: string; export { shape_1 as shape }; - export let marginX: number; - export let marginY: number; - let fillColor_1: string; + export const marginX: number; + export const marginY: number; + const fillColor_1: string; export { fillColor_1 as fillColor }; - let fontFamily_1: string; + const fontFamily_1: string; export { fontFamily_1 as fontFamily }; - let color_1: string; + const color_1: string; export { color_1 as color }; - let fontSize_1: number; + const fontSize_1: number; export { fontSize_1 as fontSize }; - let fontWeight_1: string; + const fontWeight_1: string; export { fontWeight_1 as fontWeight }; - let fontStyle_1: string; + const fontStyle_1: string; export { fontStyle_1 as fontStyle }; - let lineHeight_1: number; + const lineHeight_1: number; export { lineHeight_1 as lineHeight }; - let borderColor_1: string; + const borderColor_1: string; export { borderColor_1 as borderColor }; - let borderWidth_1: number; + const borderWidth_1: number; export { borderWidth_1 as borderWidth }; - let borderDasharray_1: string; + const borderDasharray_1: string; export { borderDasharray_1 as borderDasharray }; - let borderRadius_1: number; + const borderRadius_1: number; export { borderRadius_1 as borderRadius }; - let textDecoration_1: string; + const textDecoration_1: string; export { textDecoration_1 as textDecoration }; } namespace node { - let shape_2: string; + const shape_2: string; export { shape_2 as shape }; - let marginX_1: number; + const marginX_1: number; export { marginX_1 as marginX }; - let marginY_1: number; + const marginY_1: number; export { marginY_1 as marginY }; - let fillColor_2: string; + const fillColor_2: string; export { fillColor_2 as fillColor }; - let fontFamily_2: string; + const fontFamily_2: string; export { fontFamily_2 as fontFamily }; - let color_2: string; + const color_2: string; export { color_2 as color }; - let fontSize_2: number; + const fontSize_2: number; export { fontSize_2 as fontSize }; - let fontWeight_2: string; + const fontWeight_2: string; export { fontWeight_2 as fontWeight }; - let fontStyle_2: string; + const fontStyle_2: string; export { fontStyle_2 as fontStyle }; - let lineHeight_2: number; + const lineHeight_2: number; export { lineHeight_2 as lineHeight }; - let borderColor_2: string; + const borderColor_2: string; export { borderColor_2 as borderColor }; - let borderWidth_2: number; + const borderWidth_2: number; export { borderWidth_2 as borderWidth }; - let borderRadius_2: number; + const borderRadius_2: number; export { borderRadius_2 as borderRadius }; - let borderDasharray_2: string; + const borderDasharray_2: string; export { borderDasharray_2 as borderDasharray }; - let textDecoration_2: string; + const textDecoration_2: string; export { textDecoration_2 as textDecoration }; } namespace generalization { - let shape_3: string; + const shape_3: string; export { shape_3 as shape }; - let marginX_2: number; + const marginX_2: number; export { marginX_2 as marginX }; - let marginY_2: number; + const marginY_2: number; export { marginY_2 as marginY }; - let fillColor_3: string; + const fillColor_3: string; export { fillColor_3 as fillColor }; - let fontFamily_3: string; + const fontFamily_3: string; export { fontFamily_3 as fontFamily }; - let color_3: string; + const color_3: string; export { color_3 as color }; - let fontSize_3: number; + const fontSize_3: number; export { fontSize_3 as fontSize }; - let fontWeight_3: string; + const fontWeight_3: string; export { fontWeight_3 as fontWeight }; - let fontStyle_3: string; + const fontStyle_3: string; export { fontStyle_3 as fontStyle }; - let lineHeight_3: number; + const lineHeight_3: number; export { lineHeight_3 as lineHeight }; - let borderColor_3: string; + const borderColor_3: string; export { borderColor_3 as borderColor }; - let borderWidth_3: number; + const borderWidth_3: number; export { borderWidth_3 as borderWidth }; - let borderDasharray_3: string; + const borderDasharray_3: string; export { borderDasharray_3 as borderDasharray }; - let borderRadius_3: number; + const borderRadius_3: number; export { borderRadius_3 as borderRadius }; - let textDecoration_3: string; + const textDecoration_3: string; export { textDecoration_3 as textDecoration }; } } diff --git a/simple-mind-map/types/src/utils/index.d.ts b/simple-mind-map/types/src/utils/index.d.ts index 615e56b7..dc06f807 100644 --- a/simple-mind-map/types/src/utils/index.d.ts +++ b/simple-mind-map/types/src/utils/index.d.ts @@ -6,7 +6,7 @@ export function resizeImg(imgUrl: any, maxWidth: any, maxHeight: any): Promise; export function parseDataUrl(data: any): any; export function downloadFile(file: any, fileName: any): void; @@ -62,8 +62,16 @@ export function checkTwoRectIsOverlap(minx1: any, maxx1: any, miny1: any, maxy1: export function focusInput(el: any): void; export function selectAllInput(el: any): void; export function addDataToAppointNodes(appointNodes: any, data?: {}): any; -export function createUidForAppointNodes(appointNodes: any): any; +export function createUidForAppointNodes(appointNodes: any, createNewId?: boolean): any; export function formatDataToArray(data: any): any[]; -export function getNodeIndex(node: any): any; +export function getNodeDataIndex(node: any): any; +export function getNodeIndexInNodeList(node: any, nodeList: any): any; export function generateColorByContent(str: any): string; export function htmlEscape(str: any): any; +export function isSameObject(a: any, b: any): boolean; +export function setDataToClipboard(data: any): void; +export function getDataFromClipboard(): Promise<{ + text: string; + img: any; +}>; +export function removeFromParentNodeData(node: any): void; diff --git a/web/src/assets/avatar/天清如愿.jpg b/web/src/assets/avatar/天清如愿.jpg new file mode 100644 index 00000000..f6849963 Binary files /dev/null and b/web/src/assets/avatar/天清如愿.jpg differ diff --git a/web/src/assets/avatar/小逗比.png b/web/src/assets/avatar/小逗比.png new file mode 100644 index 00000000..b2ffd62d Binary files /dev/null and b/web/src/assets/avatar/小逗比.png differ diff --git a/web/src/assets/avatar/有希.jpg b/web/src/assets/avatar/有希.jpg new file mode 100644 index 00000000..b6e3c85c Binary files /dev/null and b/web/src/assets/avatar/有希.jpg differ diff --git a/web/src/assets/avatar/樊笼.jpg b/web/src/assets/avatar/樊笼.jpg new file mode 100644 index 00000000..07da3739 Binary files /dev/null and b/web/src/assets/avatar/樊笼.jpg differ diff --git a/web/src/assets/avatar/达仁科技.jpg b/web/src/assets/avatar/达仁科技.jpg new file mode 100644 index 00000000..b898f07e Binary files /dev/null and b/web/src/assets/avatar/达仁科技.jpg differ diff --git a/web/src/assets/icon-font/iconfont.css b/web/src/assets/icon-font/iconfont.css index 4eae4d8c..2f25af7d 100644 --- a/web/src/assets/icon-font/iconfont.css +++ b/web/src/assets/icon-font/iconfont.css @@ -1,8 +1,8 @@ @font-face { font-family: "iconfont"; /* Project id 2479351 */ - src: url('iconfont.woff2?t=1695365666344') format('woff2'), - url('iconfont.woff?t=1695365666344') format('woff'), - url('iconfont.ttf?t=1695365666344') format('truetype'); + src: url('iconfont.woff2?t=1697073602349') format('woff2'), + url('iconfont.woff?t=1697073602349') format('woff'), + url('iconfont.ttf?t=1697073602349') format('truetype'); } .iconfont { @@ -13,6 +13,10 @@ -moz-osx-font-smoothing: grayscale; } +.icondodeparent:before { + content: "\e70f"; +} + .icongongshi:before { content: "\e617"; } diff --git a/web/src/assets/icon-font/iconfont.ttf b/web/src/assets/icon-font/iconfont.ttf index 2cbfa9ba..f24f96b8 100644 Binary files a/web/src/assets/icon-font/iconfont.ttf and b/web/src/assets/icon-font/iconfont.ttf differ diff --git a/web/src/assets/icon-font/iconfont.woff b/web/src/assets/icon-font/iconfont.woff index 3b4512b7..013d113c 100644 Binary files a/web/src/assets/icon-font/iconfont.woff and b/web/src/assets/icon-font/iconfont.woff differ diff --git a/web/src/assets/icon-font/iconfont.woff2 b/web/src/assets/icon-font/iconfont.woff2 index 4ce591db..04194e88 100644 Binary files a/web/src/assets/icon-font/iconfont.woff2 and b/web/src/assets/icon-font/iconfont.woff2 differ diff --git a/web/src/config/en.js b/web/src/config/en.js index 9d20c2ec..56082bf1 100644 --- a/web/src/config/en.js +++ b/web/src/config/en.js @@ -209,6 +209,11 @@ export const shortcutKeyList = [ name: 'Insert sibling node', value: 'Enter' }, + { + icon: 'icondodeparent', + name: 'Insert parent node', + value: 'Shift + Tab' + }, { icon: 'iconshangyi', name: 'Move up node', @@ -234,6 +239,11 @@ export const shortcutKeyList = [ name: 'Delete node', value: 'Delete | Backspace' }, + { + icon: 'iconshanchu', + name: 'Delete current node', + value: 'Shift + Backspace' + }, { icon: 'iconfuzhi', name: 'Copy node', @@ -306,7 +316,7 @@ export const shortcutKeyList = [ }, { icon: 'icondingwei', - name: 'Reset', + name: 'Back root node', value: 'Ctrl + Enter' }, { diff --git a/web/src/config/zh.js b/web/src/config/zh.js index 08798137..95ba7e95 100644 --- a/web/src/config/zh.js +++ b/web/src/config/zh.js @@ -276,6 +276,11 @@ export const shortcutKeyList = [ name: '插入同级节点', value: 'Enter' }, + { + icon: 'icondodeparent', + name: '插入父节点', + value: 'Shift + Tab' + }, { icon: 'iconshangyi', name: '上移节点', @@ -301,6 +306,11 @@ export const shortcutKeyList = [ name: '删除节点', value: 'Delete | Backspace' }, + { + icon: 'iconshanchu', + name: '仅删除当前节点', + value: 'Shift + Backspace' + }, { icon: 'iconfuzhi', name: '复制节点', @@ -373,7 +383,7 @@ export const shortcutKeyList = [ }, { icon: 'icondingwei', - name: '恢复默认', + name: '回到根节点', value: 'Ctrl + Enter' }, { diff --git a/web/src/lang/en_us.js b/web/src/lang/en_us.js index 65367544..9cea5e73 100644 --- a/web/src/lang/en_us.js +++ b/web/src/lang/en_us.js @@ -59,14 +59,16 @@ export default { contextmenu: { insertSiblingNode: 'Insert sibling node', insertChildNode: 'Insert child node', + insertParentNode: 'Insert parent node', insertSummary: 'Insert summary', moveUpNode: 'Move up node', moveDownNode: 'Move down node', deleteNode: 'Delete node', + deleteCurrentNode: 'Only del cur node', copyNode: 'Copy node', cutNode: 'Cut node', pasteNode: 'Paste node', - backCenter: 'Back center', + backCenter: 'Back root node', expandAll: 'Expand all', unExpandAll: 'Un expand all', expandTo: 'Expand to', @@ -113,7 +115,8 @@ export default { 'If the download is not triggered, check whether it is blocked by the browser', paddingX: 'Padding x', paddingY: 'Padding y', - useMultiPageExport: 'Export multi page' + useMultiPageExport: 'Export multi page', + defaultFileName: 'Mind map' }, fullscreen: { fullscreenShow: 'Full screen show', @@ -122,7 +125,13 @@ export default { import: { title: 'Import', selectFile: 'Select file', - supportFile: 'Support .smm、.json、.xmind、.xlsx、.md file' + supportFile: 'Support .smm、.json、.xmind、.xlsx、.md file', + enableFileTip: 'Please select .smm、.json、.xmind、.xlsx、.md file', + maxFileNum: 'At most one file can be selected', + notSelectTip: 'Please select the file to import', + fileContentError: 'The file content is incorrect', + importSuccess: 'Import success', + fileParsingFailed: 'File parsing failed' }, navigatorToolbar: { openMiniMap: 'Open mini map', @@ -191,13 +200,21 @@ export default { vertical: 'Vertical' }, theme: { - title: 'Theme' + title: 'Theme', + classics: 'Classics', + dark: 'Darkness', + simple: 'Simple', + coverTip: + 'You have currently customized the basic style, do you want to overwrite it?', + tip: 'Tip', + cover: 'Cover', + reserve: 'Reserve' }, toolbar: { undo: 'Undo', redo: 'Redo', - insertSiblingNode: 'Insert sibling node', - insertChildNode: 'Insert child node', + insertSiblingNode: 'Sibling node', + insertChildNode: 'Child node', deleteNode: 'Delete node', image: 'Image', icon: 'Icon', @@ -218,12 +235,28 @@ export default { associativeLine: 'Associative line', save: 'Save', painter: 'Painter', - formula: 'Formula' + formula: 'Formula', + more: 'More', + selectFileTip: 'Please select a file', + notSupportTip: + 'Your browser or network protocol does not support this feature', + tip: 'Tip', + editingLocalFileTipFront: 'Currently editing your local【', + editingLocalFileTipEnd: '】file', + fileContentError: 'File content error', + fileOpenFailed: 'File open failed', + defaultFileName: 'Mind map', + creatingTip: 'Creating file' }, edit: { newFeatureNoticeTitle: 'New feature reminder', newFeatureNoticeMessage: - 'This update supports node rich text editing, But there are some defects, The most important impact is that the time to export the image is proportional to the number of nodes, Therefore, if you are more dependent on export requirements, you can use【Base style】-【Other config】-【Enable node rich text editing】Set to turn off rich text editing mode.' + 'This update supports node rich text editing, But there are some defects, The most important impact is that the time to export the image is proportional to the number of nodes, Therefore, if you are more dependent on export requirements, you can use【Base style】-【Other config】-【Enable node rich text editing】Set to turn off rich text editing mode.', + root: 'Root node', + splitByWrap: 'Is automatically split nodes based on line breaks?', + tip: 'Tip', + yes: 'Yes', + no: 'No' }, mouseAction: { tip1: @@ -247,6 +280,21 @@ export default { title: 'Formula', placeholder: 'Please enter LaText syntax', confirm: 'Confirm', - common: 'Common formulas' + common: 'Common formulas', + tip: 'Inserting formulas is not supported in non rich text mode' + }, + richTextToolbar: { + bold: 'Bold', + italic: 'Italic', + underline: 'Underline', + strike: 'Strike', + fontFamily: 'Font family', + fontSize: 'Font size', + color: 'Color', + backgroundColor: 'Background color', + removeFormat: 'Clear Style' + }, + other: { + loading: 'Loading, please wait...' } } diff --git a/web/src/lang/zh_cn.js b/web/src/lang/zh_cn.js index a13fc37c..36965980 100644 --- a/web/src/lang/zh_cn.js +++ b/web/src/lang/zh_cn.js @@ -59,14 +59,16 @@ export default { contextmenu: { insertSiblingNode: '插入同级节点', insertChildNode: '插入子级节点', + insertParentNode: '插入父节点', insertSummary: '插入概要', moveUpNode: '上移节点', moveDownNode: '下移节点', deleteNode: '删除节点', + deleteCurrentNode: '仅删除当前节点', copyNode: '复制节点', cutNode: '剪切节点', pasteNode: '粘贴节点', - backCenter: '回到中心', + backCenter: '回到根节点', expandAll: '展开所有', unExpandAll: '收起所有', expandTo: '展开到', @@ -111,7 +113,8 @@ export default { notifyMessage: '如果没有触发下载，请检查是否被浏览器拦截了', paddingX: '水平内边距', paddingY: '垂直内边距', - useMultiPageExport: '是否多页导出' + useMultiPageExport: '是否多页导出', + defaultFileName: '思维导图' }, fullscreen: { fullscreenShow: '全屏查看', @@ -120,7 +123,13 @@ export default { import: { title: '导入', selectFile: '选取文件', - supportFile: '支持.smm、.json、.xmind、.xlsx、.md文件' + supportFile: '支持.smm、.json、.xmind、.xlsx、.md文件', + enableFileTip: '请选择.smm、.json、.xmind、.xlsx、.md文件', + maxFileNum: '最多只能选择一个文件', + notSelectTip: '请选择要导入的文件', + fileContentError: '文件内容有误', + importSuccess: '导入成功', + fileParsingFailed: '文件解析失败' }, navigatorToolbar: { openMiniMap: '开启小地图', @@ -189,13 +198,20 @@ export default { vertical: '垂直' }, theme: { - title: '主题' + title: '主题', + classics: '经典', + dark: '深色', + simple: '朴素', + coverTip: '你当前自定义过基础样式，是否覆盖？', + tip: '提示', + cover: '覆盖', + reserve: '保留' }, toolbar: { undo: '回退', redo: '前进', - insertSiblingNode: '插入同级节点', - insertChildNode: '插入子节点', + insertSiblingNode: '同级节点', + insertChildNode: '子节点', deleteNode: '删除节点', image: '图片', icon: '图标', @@ -216,12 +232,27 @@ export default { associativeLine: '关联线', save: '保存', painter: '格式刷', - formula: '公式' + formula: '公式', + more: '更多', + selectFileTip: '请选择文件', + notSupportTip: '你的浏览器或网络协议不支持该功能', + tip: '提示', + editingLocalFileTipFront: '当前正在编辑你本机的【', + editingLocalFileTipEnd: '】文件', + fileContentError: '文件内容有误', + fileOpenFailed: '文件打开失败', + defaultFileName: '思维导图', + creatingTip: '正在创建文件' }, edit: { newFeatureNoticeTitle: '新特性提醒', newFeatureNoticeMessage: - '本次更新支持了节点富文本编辑，但是存在一定缺陷，最主要的影响是导出为图片的时间和节点数量成正比，所以对导出需求比较依赖的话可以通过【基础样式】-【其他配置】-【是否开启节点富文本编辑】设置关掉富文本编辑模式。' + '本次更新支持了节点富文本编辑，但是存在一定缺陷，最主要的影响是导出为图片的时间和节点数量成正比，所以对导出需求比较依赖的话可以通过【基础样式】-【其他配置】-【是否开启节点富文本编辑】设置关掉富文本编辑模式。', + root: '根节点', + splitByWrap: '是否按换行自动分割节点？', + tip: '提示', + yes: '是', + no: '否' }, mouseAction: { tip1: '当前：左键拖动画布，右键框选节点', @@ -243,6 +274,21 @@ export default { title: '公式', placeholder: '请输入 LaText 语法', confirm: '完成', - common: '常用公式' + common: '常用公式', + tip: '非富文本模式下不支持插入公式' + }, + richTextToolbar: { + bold: '加粗', + italic: '斜体', + underline: '下划线', + strike: '删除线', + fontFamily: '字体', + fontSize: '字号', + color: '字体颜色', + backgroundColor: '背景颜色', + removeFormat: '清除样式' + }, + other: { + loading: '正在加载，请稍后...' } } diff --git a/web/src/pages/Doc/catalogList.js b/web/src/pages/Doc/catalogList.js index a774b045..89167f03 100644 --- a/web/src/pages/Doc/catalogList.js +++ b/web/src/pages/Doc/catalogList.js @@ -36,6 +36,7 @@ let APIList = [ 'painter', 'scrollbar', 'formula', + 'cooperate', 'xmind', 'markdown', 'utils' diff --git a/web/src/pages/Doc/en/associativeLine/index.md b/web/src/pages/Doc/en/associativeLine/index.md index 06685ee1..0b81bf04 100644 --- a/web/src/pages/Doc/en/associativeLine/index.md +++ b/web/src/pages/Doc/en/associativeLine/index.md @@ -88,3 +88,15 @@ Deletes the currently active associative line. Clicking on an associated line is ### clearActiveLine() Clears the active state of the currently active association line. + +### front() + +> v0.8.0+ + +The top-level display of the associated line. + +### back() + +> v0.8.0+ + +The associated line returns to its original level. \ No newline at end of file diff --git a/web/src/pages/Doc/en/associativeLine/index.vue b/web/src/pages/Doc/en/associativeLine/index.vue index bc39c6cf..0f645367 100644 --- a/web/src/pages/Doc/en/associativeLine/index.vue +++ b/web/src/pages/Doc/en/associativeLine/index.vue @@ -66,6 +66,16 @@ MindMap.usePlugin(AssociativeLine)

Deletes the currently active associative line. Clicking on an associated line is considered active.

clearActiveLine()

Clears the active state of the currently active association line.

+

front()

+
+

v0.8.0+

+
+

The top-level display of the associated line.

+

back()

+
+

v0.8.0+

+
+

The associated line returns to its original level.

diff --git a/web/src/pages/Doc/en/changelog/index.md b/web/src/pages/Doc/en/changelog/index.md index 3f9372ec..c2c98ca1 100644 --- a/web/src/pages/Doc/en/changelog/index.md +++ b/web/src/pages/Doc/en/changelog/index.md @@ -1,5 +1,95 @@ # Changelog +## 0.8.0 + +Breaking change: Greatly optimize some of the code and slightly improve performance, mainly by using the 'render' class to remove useless logic, adjust unreasonable implementations, and extract duplicate code; Modify function names, functions, etc. + +Fix: + +> 1.Fix the issue of the arrow of the associated line disappearing when exporting images and SVGs. +> +> 2.Fix the issue of abnormal operation returning to the root node after resizing the container. +> +> 3.Fix that the shortcut key operations for inserting summary, moving up, down, and organizing layout with one click did not trigger data_ The issue with the change event. +> +> 4.Fix the issue of each node displaying a border when exporting images, SVGs, and PDFs with watermarks. +> +> 5.Fixed the issue of no watermarks and no redrawing after the container size was changed. +> +> 6.Fix the issue of slow rendering of mini maps with watermarks. +> +> 7.Fixed the issue where the collaboration plugin did not display the creator's avatar when creating a new node. + +New: + +> 1.Optimize the canvas DOM structure and render nodes, lines, and associated lines in layers. +> +> 2.Optimize the watermark plugin. +> +> 3.The setTheme, setThemeConfig, and setLayout functions add parameters that do not trigger re rendering. +> +> 4.Add a command to insert a parent node. +> +> 5.Add a command to only delete the current node. +> +> 6.Automatically expand child nodes when inserting a summary. +> +> 7.Clear the current active node when right-clicking on the canvas. +> +> 8.The folded active nodes are synchronously deleted from the list of active nodes. +> +> 9.Pasting text with line breaks supports controlling whether nodes are split by line breaks. +> +> 10.The mini map plugin supports returning mini maps of image types. +> +> 11.Only one historical record can be added within a specified time period to avoid adding unnecessary intermediate states. + +Demo: + +> 1.Modify the method and copy to return to the root node. +> +> 2.Fix the issue of ineffective first switching when switching themes in overlay mode. +> +> 3.The right-click menu adds the function of inserting parent nodes and deleting only the current node. +> +> 4.The top toolbar supports automatic folding into more according to the window width. +> +> 5.Support manual input of zoom factor. +> +> 6.Improve the English translation of the interface. +> +> 7.Change the mini map to render through images. + +## 0.7.3-fix.2 + +Fix some issues with collaborative editing: + +1.The position of the new node is incorrect when inserting peer nodes; + +2.Moving a position within a peer node did not trigger an update; + +3.The position of the mobile node inserted as a sibling node is incorrect; + +## 0.7.3-fix.1 + +Fix: + +> 1.Fixed some issues where the box selection area did not disappear when multiple nodes were selected. +> +> 2.Fixed an issue where the box selection area does not disappear when releasing the mouse over multiple selected nodes. +> +> 3.Fixed rendering anomalies caused by duplicate node uids when pasting nodes multiple times. + +Demo： + +> 1.Add protocol selection function to the hyperlink input box. + +## 0.7.3 + +New: 1.Add a Cooperate editing plugin. + +Demo: 1.Fix the automatic closing of the sidebar caused by the formula sidebar component. + ## 0.7.2 Fix: diff --git a/web/src/pages/Doc/en/changelog/index.vue b/web/src/pages/Doc/en/changelog/index.vue index 92e3f520..afa5680a 100644 --- a/web/src/pages/Doc/en/changelog/index.vue +++ b/web/src/pages/Doc/en/changelog/index.vue @@ -1,6 +1,61 @@ diff --git a/web/src/pages/Doc/en/miniMap/index.md b/web/src/pages/Doc/en/miniMap/index.md index 68ac2fc0..74a62890 100644 --- a/web/src/pages/Doc/en/miniMap/index.md +++ b/web/src/pages/Doc/en/miniMap/index.md @@ -35,7 +35,8 @@ Function return content: ```js { - svgHTML, // small map html + getImgUrl,// v0.8.0+, An asynchronous function that you can call and pass a callback function. The callback function can receive a parameter representing a small map of the image type, and you can render it through the img tag + svgHTML, // Mini map HTML, it is recommended to use the getImgUrl method to obtain image type mini maps, reduce the number of page DOM, and optimize performance viewBoxStyle, // view box position information miniMapBoxScale, // view box zoom value miniMapBoxLeft, // view box left value diff --git a/web/src/pages/Doc/en/miniMap/index.vue b/web/src/pages/Doc/en/miniMap/index.vue index 5591fbff..0dd90323 100644 --- a/web/src/pages/Doc/en/miniMap/index.vue +++ b/web/src/pages/Doc/en/miniMap/index.vue @@ -25,7 +25,8 @@ MindMap.usePlugin(MiniMap)

boxHeight: the height of the small map container

Function return content:

{
-      svgHTML, // small map html
+      getImgUrl,// v0.8.0+, An asynchronous function that you can call and pass a callback function. The callback function can receive a parameter representing a small map of the image type, and you can render it through the img tag
+      svgHTML, // Mini map HTML, it is recommended to use the getImgUrl method to obtain image type mini maps, reduce the number of page DOM, and optimize performance
       viewBoxStyle, // view box position information
       miniMapBoxScale, // view box zoom value
       miniMapBoxLeft, // view box left value
diff --git a/web/src/pages/Doc/en/node/index.md b/web/src/pages/Doc/en/node/index.md
index c607d23b..7162cfec 100644
--- a/web/src/pages/Doc/en/node/index.md
+++ b/web/src/pages/Doc/en/node/index.md
@@ -56,6 +56,14 @@ Whether the node is currently being dragged
 
 ## Methods
 
+### updateNodeByActive(active)
+
+> v0.8.0+
+
+- `active`：Boolean, active status.
+
+Update nodes based on whether they are activated or not. The main task is to update the display and hiding of the expand and collapse buttons for nodes.
+
 ### setOpacity(val)
 
 > v0.7.2+
diff --git a/web/src/pages/Doc/en/node/index.vue b/web/src/pages/Doc/en/node/index.vue
index 7a89994f..e46ed985 100644
--- a/web/src/pages/Doc/en/node/index.vue
+++ b/web/src/pages/Doc/en/node/index.vue
@@ -31,6 +31,14 @@
 
 
Whether the node is currently being dragged

 
Methods

+
updateNodeByActive(active)

+

+
v0.8.0+

+

+
    
+
  • active：Boolean, active status.
    • 
+

+
Update nodes based on whether they are activated or not. The main task is to update the display and hiding of the expand and collapse buttons for nodes.

 
setOpacity(val)

 

 
v0.7.2+

diff --git a/web/src/pages/Doc/en/render/index.md b/web/src/pages/Doc/en/render/index.md
index a76e1504..fb941c4a 100644
--- a/web/src/pages/Doc/en/render/index.md
+++ b/web/src/pages/Doc/en/render/index.md
@@ -7,59 +7,103 @@ accessed through `mindMap.renderer`.
 
 ### activeNodeList
 
-Gets the current list of active nodes
+Gets the current list of active nodes.
 
 ### root
 
-Gets the root node of the node tree
+Gets the root node of the node tree.
 
 ## Methods
 
+### setRootNodeCenter()
+
+> v0.8.0+
+
+Return to the central theme, that is, set the root node to the center of the canvas.
+
+### setData(data)
+
+> v0.7.3+
+
+Dynamically set mind map data.
+
 ### clearActive()
 
-Clears the currently active node
+> v0.8.0+ abandoned
+
+Clears the currently active node.
 
 ### clearAllActive()
 
-Clears all currently active nodes and triggers the `node_active` event
+> v0.8.0+ abandoned
+
+Clears all currently active nodes and triggers the `node_active` event.
+
+### clearActiveNode()
+
+> v0.8.0+
+
+Clears all currently active nodes and triggers the `node_active` event.
+
+### clearActiveNodeList()
+
+> v0.8.0+
+
+Clears all currently active nodes but not triggers the `node_active` event.
 
 ### startTextEdit()
 
 > v0.1.6+
 
 If there is a text editing requirement, this method can be called to
-disable the enter key and delete key related shortcuts to prevent conflicts
+disable the enter key and delete key related shortcuts to prevent conflicts.
 
 ### endTextEdit()
 
 > v0.1.6+
 
-End text editing, restore enter key and delete key related shortcuts
+End text editing, restore enter key and delete key related shortcuts.
 
 ### addActiveNode(node)
 
-Add a node to the active list
+> v0.8.0+ abandoned
+
+Add a node to the active list.
+
+### addNodeToActiveList(node)
+
+> v0.8.0+
+
+Add a node to the active list.
 
 ### removeActiveNode(node)
 
-Remove a node from the active list
+> v0.8.0+ abandoned
+
+Remove a node from the active list.
+
+### removeNodeFromActiveList(node)
+
+> v0.8.0+
+
+Remove a node from the active list.
 
 ### findActiveNodeIndex(node)
 
-Search for the index of a node in the active list
+Search for the index of a node in the active list.
 
 ### getNodeIndex(node)
 
-Get the position index of a node among its siblings
+Get the position index of a node among its siblings.
 
 ### removeOneNode(node)
 
-Delete a specific node
+Delete a specific node.
 
 ### copyNode()
 
 Copy a node, the active node is the node to be operated on, if there are
-multiple active nodes, only the first node will be operated on
+multiple active nodes, only the first node will be operated on.
 
 ### setNodeDataRender(node, data, notRender)
 
@@ -67,25 +111,25 @@ multiple active nodes, only the first node will be operated on
 
 Set node `data`, i.e. the data in the data field, and will determine whether the
 node needs to be re-rendered based on whether the node size has changed, `data`
-is an object, e.g. `{text: 'I am new text'}`
+is an object, e.g. `{text: 'I am new text'}`.
 
 ### moveNodeTo(node, toNode)
 
 > v0.1.5+
 
-Move a node as a child of another node
+Move a node as a child of another node.
 
 ### insertBefore(node, exist)
 
 > v0.1.5+
 
-Move a node in front of another node
+Move a node in front of another node.
 
 ### insertAfter(node, exist)
 
 > v0.1.5+
 
-Move a node behind another node
+Move a node behind another node.
 
 ### moveNodeToCenter(node)
 
diff --git a/web/src/pages/Doc/en/render/index.vue b/web/src/pages/Doc/en/render/index.vue
index 2819d97d..e1086789 100644
--- a/web/src/pages/Doc/en/render/index.vue
+++ b/web/src/pages/Doc/en/render/index.vue
@@ -5,60 +5,102 @@
 accessed through mindMap.renderer.

 
Properties

 
activeNodeList

-
Gets the current list of active nodes

+
Gets the current list of active nodes.

 
root

-
Gets the root node of the node tree

+
Gets the root node of the node tree.

 
Methods

+
setRootNodeCenter()

+

+
v0.8.0+

+

+
Return to the central theme, that is, set the root node to the center of the canvas.

+
setData(data)

+

+
v0.7.3+

+

+
Dynamically set mind map data.

 
clearActive()

-
Clears the currently active node

+

+
v0.8.0+ abandoned

+

+
Clears the currently active node.

 
clearAllActive()

-
Clears all currently active nodes and triggers the node_active event

+

+
v0.8.0+ abandoned

+

+
Clears all currently active nodes and triggers the node_active event.

+
clearActiveNode()

+

+
v0.8.0+

+

+
Clears all currently active nodes and triggers the node_active event.

+
clearActiveNodeList()

+

+
v0.8.0+

+

+
Clears all currently active nodes but not triggers the node_active event.

 
startTextEdit()

 

 
v0.1.6+

 

 
If there is a text editing requirement, this method can be called to
-disable the enter key and delete key related shortcuts to prevent conflicts

+disable the enter key and delete key related shortcuts to prevent conflicts.

 
endTextEdit()

 

 
v0.1.6+

 

-
End text editing, restore enter key and delete key related shortcuts

+
End text editing, restore enter key and delete key related shortcuts.

 
addActiveNode(node)

-
Add a node to the active list

+

+
v0.8.0+ abandoned

+

+
Add a node to the active list.

+
addNodeToActiveList(node)

+

+
v0.8.0+

+

+
Add a node to the active list.

 
removeActiveNode(node)

-
Remove a node from the active list

+

+
v0.8.0+ abandoned

+

+
Remove a node from the active list.

+
removeNodeFromActiveList(node)

+

+
v0.8.0+

+

+
Remove a node from the active list.

 
findActiveNodeIndex(node)

-
Search for the index of a node in the active list

+
Search for the index of a node in the active list.

 
getNodeIndex(node)

-
Get the position index of a node among its siblings

+
Get the position index of a node among its siblings.

 
removeOneNode(node)

-
Delete a specific node

+
Delete a specific node.

 
copyNode()

 
Copy a node, the active node is the node to be operated on, if there are
-multiple active nodes, only the first node will be operated on

+multiple active nodes, only the first node will be operated on.

 
setNodeDataRender(node, data, notRender)

 
    
 
  • notRender: v0.6.9+, Boolean, Default is false, Do not trigger rendering.
    • 
 

 
Set node data, i.e. the data in the data field, and will determine whether the
 node needs to be re-rendered based on whether the node size has changed, data
-is an object, e.g. {text: 'I am new text'}

+is an object, e.g. {text: 'I am new text'}.

 
moveNodeTo(node, toNode)

 

 
v0.1.5+

 

-
Move a node as a child of another node

+
Move a node as a child of another node.

 
insertBefore(node, exist)

 

 
v0.1.5+

 

-
Move a node in front of another node

+
Move a node in front of another node.

 
insertAfter(node, exist)

 

 
v0.1.5+

 

-
Move a node behind another node

+
Move a node behind another node.

 
moveNodeToCenter(node)

 

 
v0.2.17+

diff --git a/web/src/pages/Doc/en/richText/index.md b/web/src/pages/Doc/en/richText/index.md
index 2b164f09..59f58340 100644
--- a/web/src/pages/Doc/en/richText/index.md
+++ b/web/src/pages/Doc/en/richText/index.md
@@ -2,8 +2,6 @@
 
 > v0.4.0+
 
-> Note: This is a testing nature and imperfect function
-
 This plugin provides the ability to edit rich text of nodes, and takes effect after registration.
 
 By default, node editing can only uniformly apply styles to all text in the node. This plugin can support rich text editing effects. Currently, it supports bold, italic, underline, strikethrough, font, font size, color, and backgroundColor. Underline and line height are not supported.
@@ -20,6 +18,8 @@ The principle of this plugin is to use [Quill](https://github.com/quilljs/quill)
 
 > The compatibility of dom to image more is relatively poor, and exported images are empty on many browsers, so you can replace them with html2canvas according to your own needs.
 
+After version `0.6.16+`, third-party libraries such as 'dom-to-image-more' and 'html2canvas' will no longer be used for export, Compatibility and export are no longer issues.
+
 ## Register
 
 ```js
@@ -68,6 +68,14 @@ Replace the built-in font size list during rich text editing. The built-in list
 
 ## Method
 
+### setNotActiveNodeStyle(node, style)
+
+> v0.8.0+
+
+- `style`：Object, style object.
+
+Set rich text style for inactive nodes.
+
 ### selectAll()
 
 Select All. When the node is being edited, you can select all the text in the node through this method.
diff --git a/web/src/pages/Doc/en/richText/index.vue b/web/src/pages/Doc/en/richText/index.vue
index 9ad311e4..a33c7ec1 100644
--- a/web/src/pages/Doc/en/richText/index.vue
+++ b/web/src/pages/Doc/en/richText/index.vue
@@ -4,9 +4,6 @@
 

 
v0.4.0+

 

-

-
Note: This is a testing nature and imperfect function

-

 
This plugin provides the ability to edit rich text of nodes, and takes effect after registration.

 
By default, node editing can only uniformly apply styles to all text in the node. This plugin can support rich text editing effects. Currently, it supports bold, italic, underline, strikethrough, font, font size, color, and backgroundColor. Underline and line height are not supported.

 
The principle of this plugin is to use Quill editor implements rich text editing, and then uses the edited DOM node directly as the text data of the node, and embeds the DOM node through the svg foreignObject tag during rendering.

@@ -21,6 +18,7 @@
 

 
The compatibility of dom to image more is relatively poor, and exported images are empty on many browsers, so you can replace them with html2canvas according to your own needs.

 

+
After version 0.6.16+, third-party libraries such as 'dom-to-image-more' and 'html2canvas' will no longer be used for export, Compatibility and export are no longer issues.

 
Register

 
import MindMap from 'simple-mind-map'
 import RichText from 'simple-mind-map/src/plugins/RichText.js'
@@ -58,6 +56,14 @@ MindMap.usePlugin(RichText, opt?)
 
[1, 2, 3, ...100]
 

 
Method

+
setNotActiveNodeStyle(node, style)

+

+
v0.8.0+

+

+
    
+
  • style：Object, style object.
    • 
+

+
Set rich text style for inactive nodes.

 
selectAll()

 
Select All. When the node is being edited, you can select all the text in the node through this method.

 
focus()

diff --git a/web/src/pages/Doc/en/select/index.md b/web/src/pages/Doc/en/select/index.md
index 6eb7a088..add2b4cd 100644
--- a/web/src/pages/Doc/en/select/index.md
+++ b/web/src/pages/Doc/en/select/index.md
@@ -1,6 +1,6 @@
 # Select plugin
 
-The `Select` plugin provides the function of right-clicking to select multiple nodes.
+The `Select` plugin provides the function of select multiple nodes.
 
 ## Register
 
diff --git a/web/src/pages/Doc/en/select/index.vue b/web/src/pages/Doc/en/select/index.vue
index aecb9235..a3a3241e 100644
--- a/web/src/pages/Doc/en/select/index.vue
+++ b/web/src/pages/Doc/en/select/index.vue
@@ -1,7 +1,7 @@
 
diff --git a/web/src/pages/Doc/zh/changelog/index.md b/web/src/pages/Doc/zh/changelog/index.md
index 2a6d05fd..b82cfec2 100644
--- a/web/src/pages/Doc/zh/changelog/index.md
+++ b/web/src/pages/Doc/zh/changelog/index.md
@@ -1,5 +1,95 @@
 # Changelog
 
+## 0.8.0
+
+破坏性更新：大幅优化部分代码，小幅提升性能，主要是`render`类，删除无用逻辑、调整不合理的实现、提取重复代码；修改函数名称、函数功能等。
+
+修复：
+
+> 1.修复导出图片和svg时关联线的箭头消失的问题。
+>
+> 2.修复调整容器大小后回到根节点的操作异常的问题。
+>
+> 3.修复插入概要、上移、下移、一键整理布局的快捷键操作没有触发data_change事件的问题。
+>
+> 4.修复存在水印时导出图片、svg、pdf时每个节点都会显示边框的问题。
+>
+> 5.修复容器尺寸改变后没有水印没有重新绘制的问题。
+>
+> 6.修复存在水印时小地图渲染非常慢的问题。
+>
+> 7.修复协同插件当创建新节点时新节点未显示创建人头像的问题。
+
+新增：
+
+> 1.优化画布DOM结构，将节点、连线、关联线分层渲染。
+>
+> 2.优化水印插件。
+>
+> 3.setTheme、setThemeConfig、setLayout函数增加不触发重新渲染的参数。
+>
+> 4.新增插入父节点的命令。
+>
+> 5.新增仅删除当前节点的命令。
+>
+> 6.插入概要时自动展开子节点。
+>
+> 7.鼠标右键单击画布时清除当前激活节点。
+>
+> 8.被收起的激活节点同步从激活节点列表里删除。
+>
+> 9.粘贴带换行的文本支持控制是否按换行分割节点。
+>
+> 10.小地图插件支持返回图片类型的小地图。
+>
+> 11.指定时间内只允许添加一次历史记录，避免添加没有必要的中间状态。
+
+Demo：
+
+> 1.修改回到根节点的方法及文案。
+> 
+> 2.修复覆盖方式切换主题时第一次切换不生效的问题。
+>
+> 3.右键菜单新增插入父节点和仅删除当前节点的功能。
+>
+> 4.顶部工具栏支持根据窗口宽度自动收起到更多中。
+>
+> 5.支持手动输入缩放倍数。
+>
+> 6.完善界面英文翻译。
+>
+> 7.小地图改为通过图片渲染。
+
+## 0.7.3-fix.2
+
+修复协同编辑的一些问题：
+
+1.插入同级节点时新节点位置不正确；
+
+2.在同级节点中移动位置没有触发更新；
+
+3.移动节点作为兄弟节点插入时位置不正确；
+
+## 0.7.3-fix.1
+
+修复：
+
+> 1.修复一些情况下多选节点时的框选区域没有消失的问题。
+>
+> 2.修复多选节点时在节点上松开鼠标时框选区域不会消失的问题。
+>
+> 3.修复多次粘贴节点时由于节点uid重复造成的渲染异常问题。
+
+Demo：
+
+> 1.超链接输入框增加协议选择功能。
+
+## 0.7.3
+
+新增：1.新增协同编辑插件。
+
+Demo：1.修复公式侧边栏组件导致的侧边栏自动关闭问题。
+
 ## 0.7.2
 
 修复：
diff --git a/web/src/pages/Doc/zh/changelog/index.vue b/web/src/pages/Doc/zh/changelog/index.vue
index 36b5ce0c..dc1b3ce1 100644
--- a/web/src/pages/Doc/zh/changelog/index.vue
+++ b/web/src/pages/Doc/zh/changelog/index.vue
@@ -1,6 +1,61 @@