mirror of
https://github.com/wanglin2/mind-map.git
synced 2026-02-20 07:37:29 +08:00
Compare commits
96 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
0f2aed7e8a | ||
|
|
288ceafa92 | ||
|
|
99dc443142 | ||
|
|
b6440eba1a | ||
|
|
545e46babc | ||
|
|
b95b6af1b1 | ||
|
|
ccef5fc581 | ||
|
|
ed82fe5a61 | ||
|
|
1550f032d9 | ||
|
|
7d2758a21c | ||
|
|
e4fab73017 | ||
|
|
1beb03eaa6 | ||
|
|
20f67efd58 | ||
|
|
8c3d66eb3c | ||
|
|
a4f6006efd | ||
|
|
1d297350cc | ||
|
|
07650f8978 | ||
|
|
b26e5625ce | ||
|
|
1e38731ecb | ||
|
|
ef9b9804cb | ||
|
|
9fe321a127 | ||
|
|
464e57d019 | ||
|
|
50f125471e | ||
|
|
6bbee4a5cc | ||
|
|
5052c0427a | ||
|
|
9528631ed1 | ||
|
|
2a816f62fa | ||
|
|
8596e3356d | ||
|
|
7422af7f3b | ||
|
|
0f047da78b | ||
|
|
f866abb34c | ||
|
|
01d7e36990 | ||
|
|
a9493b9c16 | ||
|
|
a59a283d74 | ||
|
|
aafcba8bb7 | ||
|
|
11ea7d452c | ||
|
|
47d21d85fb | ||
|
|
518b7642a0 | ||
|
|
a9ea4b8e33 | ||
|
|
443465eb86 | ||
|
|
e1172c8d0d | ||
|
|
7a2605fdad | ||
|
|
a97d549d69 | ||
|
|
fcf48ca3dc | ||
|
|
c0ad18cff8 | ||
|
|
73e7855575 | ||
|
|
69ef7faf49 | ||
|
|
036f845968 | ||
|
|
740e2e3410 | ||
|
|
ba44f69f9f | ||
|
|
977799a3ac | ||
|
|
76ddecee50 | ||
|
|
0ab495a161 | ||
|
|
fefbcfbbee | ||
|
|
c77c7403da | ||
|
|
b0044bb5fa | ||
|
|
e61749c1b3 | ||
|
|
43216ed925 | ||
|
|
385873b6e8 | ||
|
|
5583642961 | ||
|
|
e063724ab6 | ||
|
|
19d4788489 | ||
|
|
1452fd2a28 | ||
|
|
c296b99d5a | ||
|
|
e9de1e675f | ||
|
|
b3e254c0ee | ||
|
|
bd3d470e40 | ||
|
|
21564445d6 | ||
|
|
e53d1b1948 | ||
|
|
c428f166a6 | ||
|
|
f19704ec41 | ||
|
|
d47f013f84 | ||
|
|
612d675a19 | ||
|
|
13f571e0b5 | ||
|
|
b09d408ab3 | ||
|
|
ea95ae2b5d | ||
|
|
2590e21807 | ||
|
|
fb41653d79 | ||
|
|
4c9c34a0ea | ||
|
|
0d5602b832 | ||
|
|
af87f84ce8 | ||
|
|
a96c16aa45 | ||
|
|
e29e1c26e5 | ||
|
|
fee38cbe8a | ||
|
|
58ca173234 | ||
|
|
aee10c6810 | ||
|
|
fe43be3451 | ||
|
|
21868c7f44 | ||
|
|
5585d2a4f7 | ||
|
|
1d04038609 | ||
|
|
305c5e9f70 | ||
|
|
4ac91003bb | ||
|
|
44410900aa | ||
|
|
239b369391 | ||
|
|
d9638fef98 | ||
|
|
ecb9482b82 |
34
README.md
34
README.md
@@ -25,17 +25,19 @@ Github:[releases](https://github.com/wanglin2/mind-map/releases)。
|
||||
|
||||
百度云盘:[地址](https://pan.baidu.com/s/1huasEbKsGNH2Af68dvWiOg?pwd=3bp3)。
|
||||
|
||||
> 客户端版本会落后于在线版本,尝试最新功能请优先使用在线版。
|
||||
|
||||
# 特性
|
||||
|
||||
- [x] 插件化架构,除核心功能外,其他功能作为插件提供,按需使用,减小打包体积
|
||||
- [x] 支持逻辑结构图、思维导图、组织结构图、目录组织图、时间轴(横向、竖向)、鱼骨图等结构
|
||||
- [x] 内置多种主题,允许高度自定义样式,支持注册新主题
|
||||
- [x] 节点内容支持文本(普通文本、富文本)、图片、图标、超链接、备注、标签、概要
|
||||
- [x] 节点内容支持文本(普通文本、富文本)、图片、图标、超链接、备注、标签、概要、数学公式
|
||||
- [x] 节点支持拖拽(拖拽移动、自由调整)、多种节点形状,支持使用 DDM 完全自定义节点内容
|
||||
- [x] 支持画布拖动、缩放
|
||||
- [x] 支持鼠标按键拖动选择和Ctrl+左键两种多选节点方式
|
||||
- [x] 支持导出为`json`、`png`、`svg`、`pdf`、`markdown`、`xmind`,支持从`json`、`xmind`、`markdown`导入
|
||||
- [x] 支持快捷键、前进后退、关联线、搜索替换、小地图、水印
|
||||
- [x] 支持快捷键、前进后退、关联线、搜索替换、小地图、水印、滚动条
|
||||
- [x] 提供丰富的配置,满足各种场景各种使用习惯
|
||||
|
||||
# 安装
|
||||
@@ -171,4 +173,32 @@ const mindMap = new MindMap({
|
||||
<img src="./web/src/assets/avatar/南风.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>南风</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/蜉蝣撼大叔.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>蜉蝣撼大叔</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/乙.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>乙</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/敏.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>敏</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/沐风牧草.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>沐风牧草</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/有希.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>有希</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/樊笼.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>樊笼</span>
|
||||
</span>
|
||||
<span>
|
||||
<img src="./web/src/assets/avatar/达仁科技.jpg" style="width: 50px;height: 50px;" />
|
||||
<span>达仁科技</span>
|
||||
</span>
|
||||
</p>
|
||||
@@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><link rel="icon" href="dist/logo.ico"><title>思绪思维导图</title><script>// 自定义静态资源的路径
|
||||
window.externalPublicPath = './dist/'
|
||||
// 接管应用
|
||||
window.takeOverApp = false</script><link href="dist/css/chunk-vendors.css?829fd06748ba83d9ecea" rel="stylesheet"><link href="dist/css/app.css?829fd06748ba83d9ecea" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script>const getDataFromBackend = () => {
|
||||
window.takeOverApp = false</script><link href="dist/css/chunk-vendors.css?29889d7ca2f7c720050d" rel="stylesheet"><link href="dist/css/app.css?29889d7ca2f7c720050d" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script>const getDataFromBackend = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
resolve({
|
||||
@@ -66,4 +66,4 @@
|
||||
// 可以通过window.$bus.$on()来监听应用的一些事件
|
||||
// 实例化页面
|
||||
window.initApp()
|
||||
}</script><script src="dist/js/chunk-vendors.js?829fd06748ba83d9ecea"></script><script src="dist/js/app.js?829fd06748ba83d9ecea"></script></body></html>
|
||||
}</script><script src="dist/js/chunk-vendors.js?29889d7ca2f7c720050d"></script><script src="dist/js/app.js?29889d7ca2f7c720050d"></script></body></html>
|
||||
152
simple-mind-map/bin/wsServer.mjs
Normal file
152
simple-mind-map/bin/wsServer.mjs
Normal file
@@ -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<string, Set<any>>}
|
||||
*/
|
||||
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<string>}
|
||||
*/
|
||||
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<string>} */ ;(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<string>} */ ;(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)
|
||||
@@ -14,6 +14,7 @@ import TouchEvent from './src/plugins/TouchEvent.js'
|
||||
import Search from './src/plugins/Search.js'
|
||||
import Painter from './src/plugins/Painter.js'
|
||||
import Scrollbar from './src/plugins/Scrollbar.js'
|
||||
import Formula from './src/plugins/Formula.js'
|
||||
import xmind from './src/parse/xmind.js'
|
||||
import markdown from './src/parse/markdown.js'
|
||||
import icons from './src/svg/icons.js'
|
||||
@@ -28,8 +29,7 @@ MindMap.constants = constants
|
||||
MindMap.themes = themes
|
||||
MindMap.defaultTheme = defaultTheme
|
||||
|
||||
MindMap
|
||||
.usePlugin(MiniMap)
|
||||
MindMap.usePlugin(MiniMap)
|
||||
.usePlugin(Watermark)
|
||||
.usePlugin(Drag)
|
||||
.usePlugin(KeyboardNavigation)
|
||||
@@ -44,5 +44,6 @@ MindMap
|
||||
.usePlugin(Search)
|
||||
.usePlugin(Painter)
|
||||
.usePlugin(Scrollbar)
|
||||
.usePlugin(Formula)
|
||||
|
||||
export default MindMap
|
||||
export default MindMap
|
||||
|
||||
14
simple-mind-map/index.d.ts
vendored
14
simple-mind-map/index.d.ts
vendored
@@ -1,14 +0,0 @@
|
||||
// declare module "simple-mind-map";
|
||||
declare module 'simple-mind-map'{
|
||||
class MindMap {
|
||||
constructor(opt:any);
|
||||
handleOpt(opt:any):void;
|
||||
render(callback:any, source:string):void;
|
||||
reRender(callback:any, source:string):void;
|
||||
resize():void;
|
||||
on(event:any, fn:any):void;
|
||||
setFullData(data:any):void;
|
||||
getData(withConfig:any):any;
|
||||
}
|
||||
export default MindMap;
|
||||
}
|
||||
@@ -24,6 +24,10 @@ import { defaultOpt } from './src/constants/defaultOptions'
|
||||
// 思维导图
|
||||
class MindMap {
|
||||
// 构造函数
|
||||
/**
|
||||
*
|
||||
* @param {defaultOpt} opt
|
||||
*/
|
||||
constructor(opt = {}) {
|
||||
// 合并选项
|
||||
this.opt = this.handleOpt(merge(defaultOpt, opt))
|
||||
@@ -36,7 +40,8 @@ class MindMap {
|
||||
// 画布宽高
|
||||
this.width = this.elRect.width
|
||||
this.height = this.elRect.height
|
||||
if (this.width <= 0 || this.height <= 0) throw new Error('容器元素el的宽高不能为0')
|
||||
if (this.width <= 0 || this.height <= 0)
|
||||
throw new Error('容器元素el的宽高不能为0')
|
||||
|
||||
// 添加css
|
||||
this.cssEl = null
|
||||
@@ -87,7 +92,7 @@ class MindMap {
|
||||
})
|
||||
|
||||
// 初始渲染
|
||||
this.render()
|
||||
this.render(this.opt.fit ? () => this.view.fit() : () => {})
|
||||
setTimeout(() => {
|
||||
this.command.addHistory()
|
||||
}, 0)
|
||||
@@ -253,15 +258,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)
|
||||
}
|
||||
|
||||
// 动态设置思维导图数据,包括节点数据、布局、主题、视图
|
||||
@@ -360,7 +363,7 @@ class MindMap {
|
||||
// 克隆一份数据
|
||||
let clone = svg.clone()
|
||||
// 添加必要的样式
|
||||
clone.add(SVG(`<style>${ cssContent }</style>`))
|
||||
clone.add(SVG(`<style>${cssContent}</style>`))
|
||||
// 如果实际图形宽高超出了屏幕宽高,且存在水印的话需要重新绘制水印,否则会出现超出部分没有水印的问题
|
||||
if (
|
||||
(rect.width > origWidth || rect.height > origHeight) &&
|
||||
@@ -448,6 +451,7 @@ class MindMap {
|
||||
// 插件列表
|
||||
MindMap.pluginList = []
|
||||
MindMap.usePlugin = (plugin, opt = {}) => {
|
||||
if (MindMap.hasPlugin(plugin) !== -1) return MindMap
|
||||
plugin.pluginOpt = opt
|
||||
MindMap.pluginList.push(plugin)
|
||||
return MindMap
|
||||
|
||||
646
simple-mind-map/package-lock.json
generated
646
simple-mind-map/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "simple-mind-map",
|
||||
"version": "0.7.0",
|
||||
"version": "0.7.3",
|
||||
"description": "一个简单的web在线思维导图",
|
||||
"authors": [
|
||||
{
|
||||
@@ -12,6 +12,8 @@
|
||||
"url": "http://lxqnsys.com/"
|
||||
}
|
||||
],
|
||||
"types": "./types/index.d.ts",
|
||||
"typings": "./types/index.d.ts",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@@ -19,20 +21,26 @@
|
||||
},
|
||||
"scripts": {
|
||||
"lint": "eslint src/",
|
||||
"format": "prettier --write ."
|
||||
"format": "prettier --write .",
|
||||
"types": "npx -p typescript tsc index.js --declaration --allowJs --emitDeclarationOnly --outDir types --target es2017",
|
||||
"wsServe": "node ./bin/wsServer.mjs"
|
||||
},
|
||||
"module": "index.js",
|
||||
"__main": "./dist/simpleMindMap.umd.min.js",
|
||||
"main": "./dist/simpleMindMap.umd.min.js",
|
||||
"dependencies": {
|
||||
"@svgdotjs/svg.js": "^3.0.16",
|
||||
"deepmerge": "^1.5.2",
|
||||
"eventemitter3": "^4.0.7",
|
||||
"jspdf": "^2.5.1",
|
||||
"jszip": "^3.10.1",
|
||||
"katex": "^0.16.8",
|
||||
"mdast-util-from-markdown": "^1.3.0",
|
||||
"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",
|
||||
|
||||
@@ -17,7 +17,7 @@ const transform = dir => {
|
||||
}
|
||||
|
||||
const transformFile = file => {
|
||||
console.log(file);
|
||||
console.log(file)
|
||||
let content = fs.readFileSync(file, 'utf-8')
|
||||
countCodeLines(content)
|
||||
// transformComments(file, content)
|
||||
@@ -25,7 +25,7 @@ const transformFile = file => {
|
||||
|
||||
// 统计代码行数
|
||||
let totalLines = 0
|
||||
const countCodeLines = (content) => {
|
||||
const countCodeLines = content => {
|
||||
totalLines += content.split(/\n/).length
|
||||
}
|
||||
|
||||
@@ -43,4 +43,4 @@ const transformComments = (file, content) => {
|
||||
|
||||
transform(entryPath)
|
||||
transformFile(path.join(__dirname, '../index.js'))
|
||||
console.log(totalLines);
|
||||
console.log(totalLines)
|
||||
|
||||
@@ -1,27 +1,3 @@
|
||||
// 标签颜色列表
|
||||
export const tagColorList = [
|
||||
{
|
||||
color: 'rgb(77, 65, 0)',
|
||||
background: 'rgb(255, 244, 179)'
|
||||
},
|
||||
{
|
||||
color: 'rgb(0, 50, 77)',
|
||||
background: 'rgb(179, 229, 255)'
|
||||
},
|
||||
{
|
||||
color: 'rgb(77, 0, 73)',
|
||||
background: 'rgb(255, 179, 251)'
|
||||
},
|
||||
{
|
||||
color: 'rgb(57, 77, 0)',
|
||||
background: 'rgb(236, 255, 179)'
|
||||
},
|
||||
{
|
||||
color: 'rgb(0, 77, 47)',
|
||||
background: 'rgb(179, 255, 226)'
|
||||
}
|
||||
]
|
||||
|
||||
// 主题列表
|
||||
export const themeList = [
|
||||
{
|
||||
@@ -249,6 +225,10 @@ export const CONSTANTS = {
|
||||
PASTE_TYPE: {
|
||||
CLIP_BOARD: 'clipBoard',
|
||||
CANVAS: 'canvas'
|
||||
},
|
||||
SCROLL_BAR_DIR: {
|
||||
VERTICAL: 'vertical',
|
||||
HORIZONTAL: 'horizontal'
|
||||
}
|
||||
}
|
||||
|
||||
@@ -257,42 +237,42 @@ export const initRootNodePositionMap = {
|
||||
[CONSTANTS.INIT_ROOT_NODE_POSITION.TOP]: 0,
|
||||
[CONSTANTS.INIT_ROOT_NODE_POSITION.RIGHT]: 1,
|
||||
[CONSTANTS.INIT_ROOT_NODE_POSITION.BOTTOM]: 1,
|
||||
[CONSTANTS.INIT_ROOT_NODE_POSITION.CENTER]: 0.5,
|
||||
[CONSTANTS.INIT_ROOT_NODE_POSITION.CENTER]: 0.5
|
||||
}
|
||||
|
||||
// 布局结构列表
|
||||
export const layoutList = [
|
||||
{
|
||||
name: '逻辑结构图',
|
||||
value: CONSTANTS.LAYOUT.LOGICAL_STRUCTURE,
|
||||
value: CONSTANTS.LAYOUT.LOGICAL_STRUCTURE
|
||||
},
|
||||
{
|
||||
name: '思维导图',
|
||||
value: CONSTANTS.LAYOUT.MIND_MAP,
|
||||
value: CONSTANTS.LAYOUT.MIND_MAP
|
||||
},
|
||||
{
|
||||
name: '组织结构图',
|
||||
value: CONSTANTS.LAYOUT.ORGANIZATION_STRUCTURE,
|
||||
value: CONSTANTS.LAYOUT.ORGANIZATION_STRUCTURE
|
||||
},
|
||||
{
|
||||
name: '目录组织图',
|
||||
value: CONSTANTS.LAYOUT.CATALOG_ORGANIZATION,
|
||||
value: CONSTANTS.LAYOUT.CATALOG_ORGANIZATION
|
||||
},
|
||||
{
|
||||
name: '时间轴',
|
||||
value: CONSTANTS.LAYOUT.TIMELINE,
|
||||
value: CONSTANTS.LAYOUT.TIMELINE
|
||||
},
|
||||
{
|
||||
name: '时间轴2',
|
||||
value: CONSTANTS.LAYOUT.TIMELINE2,
|
||||
value: CONSTANTS.LAYOUT.TIMELINE2
|
||||
},
|
||||
{
|
||||
name: '竖向时间轴',
|
||||
value: CONSTANTS.LAYOUT.VERTICAL_TIMELINE,
|
||||
value: CONSTANTS.LAYOUT.VERTICAL_TIMELINE
|
||||
},
|
||||
{
|
||||
name: '鱼骨图',
|
||||
value: CONSTANTS.LAYOUT.FISHBONE,
|
||||
value: CONSTANTS.LAYOUT.FISHBONE
|
||||
}
|
||||
]
|
||||
export const layoutValueList = [
|
||||
@@ -361,7 +341,7 @@ export const cssContent = `
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.smm-node:hover .smm-hover-node{
|
||||
.smm-node:not(.smm-node-dragging):hover .smm-hover-node{
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -370,4 +350,4 @@ export const cssContent = `
|
||||
opacity: 1;
|
||||
stroke-width: 2;
|
||||
}
|
||||
`
|
||||
`
|
||||
|
||||
@@ -182,5 +182,32 @@ export const defaultOpt = {
|
||||
// 节点鼠标hover和激活时显示的矩形边框距节点内容的距离
|
||||
hoverRectPadding: 2,
|
||||
// 双击节点进入节点文本编辑时是否默认选中文本,默认只在创建新节点时会选中
|
||||
selectTextOnEnterEditText: false
|
||||
selectTextOnEnterEditText: false,
|
||||
// 删除节点后激活相邻节点
|
||||
deleteNodeActive: true,
|
||||
// 拖拽节点时鼠标移动到画布边缘是否开启画布自动移动
|
||||
autoMoveWhenMouseInEdgeOnDrag: true,
|
||||
// 是否首次加载fit view
|
||||
fit: false,
|
||||
// 拖拽多个节点时随鼠标移动的示意矩形的样式配置
|
||||
dragMultiNodeRectConfig: {
|
||||
width: 40,
|
||||
height: 20,
|
||||
fill: '' // 填充颜色,如果不传默认使用连线的颜色
|
||||
},
|
||||
// 节点拖拽时新位置的示意矩形的填充颜色,如果不传默认使用连线的颜色
|
||||
dragPlaceholderRectFill: '',
|
||||
// 节点拖拽时的透明度配置
|
||||
dragOpacityConfig: {
|
||||
cloneNodeOpacity: 0.5, // 跟随鼠标移动的克隆节点或矩形的透明度
|
||||
beingDragNodeOpacity: 0.3 // 被拖拽节点的透明度
|
||||
},
|
||||
// 自定义标签的颜色
|
||||
// {pass: 'green, unpass: 'red'}
|
||||
tagsColorMap: {},
|
||||
// 节点协作样式配置
|
||||
cooperateStyle: {
|
||||
avatarSize: 22,// 头像大小
|
||||
fontSize: 12,// 如果是文字头像,那么文字的大小
|
||||
}
|
||||
}
|
||||
|
||||
@@ -37,7 +37,11 @@ class Command {
|
||||
this.commands[name].forEach(fn => {
|
||||
fn(...args)
|
||||
})
|
||||
if (['BACK', 'FORWARD', 'SET_NODE_ACTIVE', 'CLEAR_ACTIVE_NODE'].includes(name)) {
|
||||
if (
|
||||
['BACK', 'FORWARD', 'SET_NODE_ACTIVE', 'CLEAR_ACTIVE_NODE'].includes(
|
||||
name
|
||||
)
|
||||
) {
|
||||
return
|
||||
}
|
||||
this.addHistory()
|
||||
@@ -78,7 +82,11 @@ class Command {
|
||||
}
|
||||
let data = this.getCopyData()
|
||||
// 此次数据和上次一样则不重复添加
|
||||
if (this.history.length > 0 && JSON.stringify(this.history[this.history.length - 1]) === JSON.stringify(data)) {
|
||||
if (
|
||||
this.history.length > 0 &&
|
||||
JSON.stringify(this.history[this.history.length - 1]) ===
|
||||
JSON.stringify(data)
|
||||
) {
|
||||
return
|
||||
}
|
||||
// 删除当前历史指针后面的数据
|
||||
@@ -123,7 +131,11 @@ class Command {
|
||||
let len = this.history.length
|
||||
if (this.activeHistoryIndex + step <= len - 1) {
|
||||
this.activeHistoryIndex += step
|
||||
this.mindMap.emit('back_forward', this.activeHistoryIndex, this.history.length)
|
||||
this.mindMap.emit(
|
||||
'back_forward',
|
||||
this.activeHistoryIndex,
|
||||
this.history.length
|
||||
)
|
||||
let data = simpleDeepClone(this.history[this.activeHistoryIndex])
|
||||
this.mindMap.emit('data_change', data)
|
||||
return data
|
||||
@@ -138,10 +150,10 @@ class Command {
|
||||
// 移除节点数据中的uid
|
||||
removeDataUid(data) {
|
||||
data = simpleDeepClone(data)
|
||||
let walk = (root) => {
|
||||
let walk = root => {
|
||||
delete root.data.uid
|
||||
if (root.children && root.children.length > 0) {
|
||||
root.children.forEach((item) => {
|
||||
root.children.forEach(item => {
|
||||
walk(item)
|
||||
})
|
||||
}
|
||||
|
||||
@@ -46,13 +46,20 @@ export default class KeyCommand {
|
||||
if (this.mindMap.richText && this.mindMap.richText.showTextEdit) {
|
||||
return
|
||||
}
|
||||
if (this.mindMap.renderer.textEdit.showTextEdit || (this.mindMap.associativeLine && this.mindMap.associativeLine.showTextEdit)) {
|
||||
if (
|
||||
this.mindMap.renderer.textEdit.showTextEdit ||
|
||||
(this.mindMap.associativeLine &&
|
||||
this.mindMap.associativeLine.showTextEdit)
|
||||
) {
|
||||
return
|
||||
}
|
||||
this.isInSvg = false
|
||||
})
|
||||
window.addEventListener('keydown', e => {
|
||||
if (this.isPause || (this.mindMap.opt.enableShortcutOnlyWhenMouseInSvg && !this.isInSvg)) {
|
||||
if (
|
||||
this.isPause ||
|
||||
(this.mindMap.opt.enableShortcutOnlyWhenMouseInSvg && !this.isInSvg)
|
||||
) {
|
||||
return
|
||||
}
|
||||
Object.keys(this.shortcutMap).forEach(key => {
|
||||
|
||||
@@ -113,7 +113,7 @@ class Event extends EventEmitter {
|
||||
this.isMiddleMousedown ||
|
||||
(useLeftKeySelectionRightKeyDrag
|
||||
? this.isRightMousedown
|
||||
: this.isLeftMousedown)
|
||||
: this.isLeftMousedown)
|
||||
) {
|
||||
e.preventDefault()
|
||||
this.emit('drag', e, this)
|
||||
|
||||
@@ -13,7 +13,13 @@ import {
|
||||
walk,
|
||||
bfsWalk,
|
||||
loadImage,
|
||||
isUndef
|
||||
isUndef,
|
||||
getTopAncestorsFomNodeList,
|
||||
addDataToAppointNodes,
|
||||
createUidForAppointNodes,
|
||||
formatDataToArray,
|
||||
getNodeIndex,
|
||||
createUid
|
||||
} from '../../utils'
|
||||
import { shapeList } from './node/Shape'
|
||||
import { lineStyleProps } from '../../themes/default'
|
||||
@@ -40,7 +46,6 @@ const layouts = {
|
||||
}
|
||||
|
||||
// 渲染
|
||||
|
||||
class Render {
|
||||
// 构造函数
|
||||
constructor(opt = {}) {
|
||||
@@ -92,6 +97,15 @@ 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() {
|
||||
// 点击事件
|
||||
@@ -132,9 +146,18 @@ class Render {
|
||||
// 插入同级节点
|
||||
this.insertNode = this.insertNode.bind(this)
|
||||
this.mindMap.command.add('INSERT_NODE', this.insertNode)
|
||||
// 插入多个同级节点
|
||||
this.insertMultiNode = this.insertMultiNode.bind(this)
|
||||
this.mindMap.command.add('INSERT_MULTI_NODE', this.insertMultiNode)
|
||||
// 插入子节点
|
||||
this.insertChildNode = this.insertChildNode.bind(this)
|
||||
this.mindMap.command.add('INSERT_CHILD_NODE', this.insertChildNode)
|
||||
// 插入多个子节点
|
||||
this.insertMultiChildNode = this.insertMultiChildNode.bind(this)
|
||||
this.mindMap.command.add(
|
||||
'INSERT_MULTI_CHILD_NODE',
|
||||
this.insertMultiChildNode
|
||||
)
|
||||
// 上移节点
|
||||
this.upNode = this.upNode.bind(this)
|
||||
this.mindMap.command.add('UP_NODE', this.upNode)
|
||||
@@ -202,6 +225,9 @@ class Render {
|
||||
// 设置节点标签
|
||||
this.setNodeTag = this.setNodeTag.bind(this)
|
||||
this.mindMap.command.add('SET_NODE_TAG', this.setNodeTag)
|
||||
// 设置节点公式
|
||||
this.insertFormula = this.insertFormula.bind(this)
|
||||
this.mindMap.command.add('INSERT_FORMULA', this.insertFormula)
|
||||
// 添加节点概要
|
||||
this.addGeneralization = this.addGeneralization.bind(this)
|
||||
this.mindMap.command.add('ADD_GENERALIZATION', this.addGeneralization)
|
||||
@@ -382,19 +408,10 @@ class Render {
|
||||
// 检索某个节点在激活列表里的索引
|
||||
findActiveNodeIndex(node) {
|
||||
return this.activeNodeList.findIndex(item => {
|
||||
return item === node
|
||||
return item.uid === node.uid
|
||||
})
|
||||
}
|
||||
|
||||
// 获取节点在同级里的索引位置
|
||||
getNodeIndex(node) {
|
||||
return node.parent
|
||||
? node.parent.children.findIndex(item => {
|
||||
return item === node
|
||||
})
|
||||
: 0
|
||||
}
|
||||
|
||||
// 全选
|
||||
selectAll() {
|
||||
walk(
|
||||
@@ -439,58 +456,120 @@ class Render {
|
||||
}
|
||||
}
|
||||
|
||||
// 规范指定节点数据
|
||||
formatAppointNodes(appointNodes) {
|
||||
if (!appointNodes) return []
|
||||
return Array.isArray(appointNodes) ? appointNodes : [appointNodes]
|
||||
}
|
||||
|
||||
// 插入同级节点,多个节点只会操作第一个节点
|
||||
// 插入同级节点
|
||||
insertNode(
|
||||
openEdit = true,
|
||||
appointNodes = [],
|
||||
appointData = null,
|
||||
appointChildren = []
|
||||
) {
|
||||
appointNodes = this.formatAppointNodes(appointNodes)
|
||||
appointNodes = formatDataToArray(appointNodes)
|
||||
if (this.activeNodeList.length <= 0 && appointNodes.length <= 0) {
|
||||
return
|
||||
}
|
||||
this.textEdit.hideEditTextBox()
|
||||
let {
|
||||
const {
|
||||
defaultInsertSecondLevelNodeText,
|
||||
defaultInsertBelowSecondLevelNodeText
|
||||
} = this.mindMap.opt
|
||||
let list = appointNodes.length > 0 ? appointNodes : this.activeNodeList
|
||||
let first = list[0]
|
||||
if (first.isGeneralization) {
|
||||
return
|
||||
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 // 如果同时对多个节点插入子节点,那么需要把新增的节点设为激活状态。如果不进入编辑状态,那么也需要手动设为激活状态
|
||||
}
|
||||
if (first.isRoot) {
|
||||
this.insertChildNode(openEdit, appointNodes, appointData)
|
||||
} else {
|
||||
let text =
|
||||
first.layerIndex === 1
|
||||
? defaultInsertSecondLevelNodeText
|
||||
: defaultInsertBelowSecondLevelNodeText
|
||||
if (first.layerIndex === 1) {
|
||||
first.parent.destroy()
|
||||
// 动态指定的子节点数据也需要添加相关属性
|
||||
appointChildren = addDataToAppointNodes(appointChildren, {
|
||||
...params
|
||||
})
|
||||
const needDestroyNodeList = {}
|
||||
list.forEach(node => {
|
||||
if (node.isGeneralization || node.isRoot) {
|
||||
return
|
||||
}
|
||||
let index = this.getNodeIndex(first)
|
||||
let isRichText = !!this.mindMap.richText
|
||||
first.parent.nodeData.children.splice(index + 1, 0, {
|
||||
inserting: openEdit,
|
||||
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 newNodeData = {
|
||||
inserting: handleMultiNodes ? false : openEdit, // 如果同时对多个节点插入子节点,那么无需进入编辑模式,
|
||||
data: {
|
||||
text: text,
|
||||
expand: true,
|
||||
richText: isRichText,
|
||||
resetRichText: isRichText,
|
||||
...params,
|
||||
uid: createUid(),
|
||||
...(appointData || {})
|
||||
},
|
||||
children: [...appointChildren]
|
||||
})
|
||||
this.mindMap.render()
|
||||
children: [...createUidForAppointNodes(appointChildren)]
|
||||
}
|
||||
parent.nodeData.children.splice(index + 1, 0, newNodeData)
|
||||
})
|
||||
Object.keys(needDestroyNodeList).forEach(key => {
|
||||
needDestroyNodeList[key].destroy()
|
||||
})
|
||||
// 如果同时对多个节点插入子节点,需要清除原来激活的节点
|
||||
if (handleMultiNodes || !openEdit) {
|
||||
this.clearActive()
|
||||
}
|
||||
this.mindMap.render()
|
||||
}
|
||||
|
||||
// 插入多个同级节点
|
||||
insertMultiNode(appointNodes, nodeList) {
|
||||
if (!nodeList || nodeList.length <= 0) return
|
||||
appointNodes = formatDataToArray(appointNodes)
|
||||
if (this.activeNodeList.length <= 0 && appointNodes.length <= 0) {
|
||||
return
|
||||
}
|
||||
this.textEdit.hideEditTextBox()
|
||||
const list = appointNodes.length > 0 ? appointNodes : this.activeNodeList
|
||||
const isRichText = !!this.mindMap.richText
|
||||
const params = {
|
||||
expand: true,
|
||||
richText: isRichText,
|
||||
resetRichText: isRichText,
|
||||
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
|
||||
)
|
||||
})
|
||||
Object.keys(needDestroyNodeList).forEach(key => {
|
||||
needDestroyNodeList[key].destroy()
|
||||
})
|
||||
this.clearActive()
|
||||
this.mindMap.render()
|
||||
}
|
||||
|
||||
// 插入子节点
|
||||
@@ -500,16 +579,28 @@ class Render {
|
||||
appointData = null,
|
||||
appointChildren = []
|
||||
) {
|
||||
appointNodes = this.formatAppointNodes(appointNodes)
|
||||
appointNodes = formatDataToArray(appointNodes)
|
||||
if (this.activeNodeList.length <= 0 && appointNodes.length <= 0) {
|
||||
return
|
||||
}
|
||||
this.textEdit.hideEditTextBox()
|
||||
let {
|
||||
const {
|
||||
defaultInsertSecondLevelNodeText,
|
||||
defaultInsertBelowSecondLevelNodeText
|
||||
} = this.mindMap.opt
|
||||
let list = appointNodes.length > 0 ? appointNodes : this.activeNodeList
|
||||
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 // 如果同时对多个节点插入子节点,那么需要把新增的节点设为激活状态。如果不进入编辑状态,那么也需要手动设为激活状态
|
||||
}
|
||||
// 动态指定的子节点数据也需要添加相关属性
|
||||
appointChildren = addDataToAppointNodes(appointChildren, {
|
||||
...params
|
||||
})
|
||||
list.forEach(node => {
|
||||
if (node.isGeneralization) {
|
||||
return
|
||||
@@ -517,27 +608,66 @@ class Render {
|
||||
if (!node.nodeData.children) {
|
||||
node.nodeData.children = []
|
||||
}
|
||||
let text = node.isRoot
|
||||
const text = node.isRoot
|
||||
? defaultInsertSecondLevelNodeText
|
||||
: defaultInsertBelowSecondLevelNodeText
|
||||
let isRichText = !!this.mindMap.richText
|
||||
node.nodeData.children.push({
|
||||
inserting: openEdit,
|
||||
const newNode = {
|
||||
inserting: handleMultiNodes ? false : openEdit, // 如果同时对多个节点插入子节点,那么无需进入编辑模式
|
||||
data: {
|
||||
text: text,
|
||||
expand: true,
|
||||
richText: isRichText,
|
||||
resetRichText: isRichText,
|
||||
uid: createUid(),
|
||||
...params,
|
||||
...(appointData || {})
|
||||
},
|
||||
children: [...appointChildren]
|
||||
})
|
||||
children: [...createUidForAppointNodes(appointChildren)]
|
||||
}
|
||||
node.nodeData.children.push(newNode)
|
||||
// 插入子节点时自动展开子节点
|
||||
node.nodeData.data.expand = true
|
||||
if (node.isRoot) {
|
||||
node.destroy()
|
||||
}
|
||||
})
|
||||
// 如果同时对多个节点插入子节点,需要清除原来激活的节点
|
||||
if (handleMultiNodes || !openEdit) {
|
||||
this.clearActive()
|
||||
}
|
||||
this.mindMap.render()
|
||||
}
|
||||
|
||||
// 插入多个子节点
|
||||
insertMultiChildNode(appointNodes, childList) {
|
||||
if (!childList || childList.length <= 0) return
|
||||
appointNodes = formatDataToArray(appointNodes)
|
||||
if (this.activeNodeList.length <= 0 && appointNodes.length <= 0) {
|
||||
return
|
||||
}
|
||||
this.textEdit.hideEditTextBox()
|
||||
const list = appointNodes.length > 0 ? appointNodes : this.activeNodeList
|
||||
const isRichText = !!this.mindMap.richText
|
||||
const params = {
|
||||
expand: true,
|
||||
richText: isRichText,
|
||||
resetRichText: isRichText,
|
||||
isActive: true
|
||||
}
|
||||
childList = addDataToAppointNodes(childList, params)
|
||||
list.forEach(node => {
|
||||
if (node.isGeneralization) {
|
||||
return
|
||||
}
|
||||
if (!node.nodeData.children) {
|
||||
node.nodeData.children = []
|
||||
}
|
||||
childList = createUidForAppointNodes(childList)
|
||||
node.nodeData.children.push(...childList)
|
||||
// 插入子节点时自动展开子节点
|
||||
node.nodeData.data.expand = true
|
||||
if (node.isRoot) {
|
||||
node.destroy()
|
||||
}
|
||||
})
|
||||
this.clearActive()
|
||||
this.mindMap.render()
|
||||
}
|
||||
|
||||
@@ -553,7 +683,7 @@ class Render {
|
||||
let parent = node.parent
|
||||
let childList = parent.children
|
||||
let index = childList.findIndex(item => {
|
||||
return item === node
|
||||
return item.uid === node.uid
|
||||
})
|
||||
if (index === -1 || index === 0) {
|
||||
return
|
||||
@@ -580,7 +710,7 @@ class Render {
|
||||
let parent = node.parent
|
||||
let childList = parent.children
|
||||
let index = childList.findIndex(item => {
|
||||
return item === node
|
||||
return item.uid === node.uid
|
||||
})
|
||||
if (index === -1 || index === childList.length - 1) {
|
||||
return
|
||||
@@ -598,19 +728,19 @@ class Render {
|
||||
// 复制节点
|
||||
copy() {
|
||||
this.beingCopyData = this.copyNode()
|
||||
this.setCoptyDataToClipboard(this.beingCopyData)
|
||||
this.setCopyDataToClipboard(this.beingCopyData)
|
||||
}
|
||||
|
||||
// 剪切节点
|
||||
cut() {
|
||||
this.mindMap.execCommand('CUT_NODE', copyData => {
|
||||
this.beingCopyData = copyData
|
||||
this.setCoptyDataToClipboard(copyData)
|
||||
this.setCopyDataToClipboard(copyData)
|
||||
})
|
||||
}
|
||||
|
||||
// 将粘贴或剪切的数据设置到用户剪切板中
|
||||
setCoptyDataToClipboard(data) {
|
||||
setCopyDataToClipboard(data) {
|
||||
if (navigator.clipboard) {
|
||||
navigator.clipboard.writeText(
|
||||
JSON.stringify({
|
||||
@@ -701,13 +831,9 @@ class Render {
|
||||
}
|
||||
if (smmData) {
|
||||
this.mindMap.execCommand(
|
||||
'INSERT_CHILD_NODE',
|
||||
false,
|
||||
'INSERT_MULTI_CHILD_NODE',
|
||||
[],
|
||||
{
|
||||
...smmData.data
|
||||
},
|
||||
[...smmData.children]
|
||||
Array.isArray(smmData) ? smmData : [smmData]
|
||||
)
|
||||
} else {
|
||||
this.mindMap.execCommand('INSERT_CHILD_NODE', false, [], {
|
||||
@@ -741,89 +867,75 @@ class Render {
|
||||
|
||||
// 将节点移动到另一个节点的前面
|
||||
insertBefore(node, exist) {
|
||||
if (node.isRoot) {
|
||||
return
|
||||
}
|
||||
// 如果是二级节点变成了下级节点,或是下级节点变成了二级节点,节点样式需要更新
|
||||
let nodeLayerChanged =
|
||||
(node.layerIndex === 1 && exist.layerIndex !== 1) ||
|
||||
(node.layerIndex !== 1 && exist.layerIndex === 1)
|
||||
// 移动节点
|
||||
let nodeParent = node.parent
|
||||
let nodeBorthers = nodeParent.children
|
||||
let nodeIndex = nodeBorthers.findIndex(item => {
|
||||
return item === node
|
||||
})
|
||||
if (nodeIndex === -1) {
|
||||
return
|
||||
}
|
||||
nodeBorthers.splice(nodeIndex, 1)
|
||||
nodeParent.nodeData.children.splice(nodeIndex, 1)
|
||||
|
||||
// 目标节点
|
||||
let existParent = exist.parent
|
||||
let existBorthers = existParent.children
|
||||
let existIndex = existBorthers.findIndex(item => {
|
||||
return item === exist
|
||||
})
|
||||
if (existIndex === -1) {
|
||||
return
|
||||
}
|
||||
existBorthers.splice(existIndex, 0, node)
|
||||
existParent.nodeData.children.splice(existIndex, 0, node.nodeData)
|
||||
this.mindMap.render(() => {
|
||||
if (nodeLayerChanged) {
|
||||
node.reRender()
|
||||
}
|
||||
})
|
||||
this.insertTo(node, exist, 'before')
|
||||
}
|
||||
|
||||
// 将节点移动到另一个节点的后面
|
||||
insertAfter(node, exist) {
|
||||
if (node.isRoot) {
|
||||
return
|
||||
}
|
||||
// 如果是二级节点变成了下级节点,或是下级节点变成了二级节点,节点样式需要更新
|
||||
let nodeLayerChanged =
|
||||
(node.layerIndex === 1 && exist.layerIndex !== 1) ||
|
||||
(node.layerIndex !== 1 && exist.layerIndex === 1)
|
||||
// 移动节点
|
||||
let nodeParent = node.parent
|
||||
let nodeBorthers = nodeParent.children
|
||||
let nodeIndex = nodeBorthers.findIndex(item => {
|
||||
return item === node
|
||||
})
|
||||
if (nodeIndex === -1) {
|
||||
return
|
||||
}
|
||||
nodeBorthers.splice(nodeIndex, 1)
|
||||
nodeParent.nodeData.children.splice(nodeIndex, 1)
|
||||
this.insertTo(node, exist, 'after')
|
||||
}
|
||||
|
||||
// 目标节点
|
||||
let existParent = exist.parent
|
||||
let existBorthers = existParent.children
|
||||
let existIndex = existBorthers.findIndex(item => {
|
||||
return item === exist
|
||||
// 将节点移动到另一个节点的前面或后面
|
||||
insertTo(node, exist, dir = 'before') {
|
||||
let nodeList = formatDataToArray(node)
|
||||
nodeList = nodeList.filter(item => {
|
||||
return !item.isRoot
|
||||
})
|
||||
if (existIndex === -1) {
|
||||
return
|
||||
if (dir === 'after') {
|
||||
nodeList.reverse()
|
||||
}
|
||||
existIndex++
|
||||
existBorthers.splice(existIndex, 0, node)
|
||||
existParent.nodeData.children.splice(existIndex, 0, node.nodeData)
|
||||
this.mindMap.render(() => {
|
||||
if (nodeLayerChanged) {
|
||||
node.reRender()
|
||||
nodeList.forEach(item => {
|
||||
this.checkNodeLayerChange(item, exist)
|
||||
// 移动节点
|
||||
let nodeParent = item.parent
|
||||
let nodeBorthers = nodeParent.children
|
||||
let nodeIndex = nodeBorthers.findIndex(item2 => {
|
||||
return item.uid === item2.uid
|
||||
})
|
||||
if (nodeIndex === -1) {
|
||||
return
|
||||
}
|
||||
nodeBorthers.splice(nodeIndex, 1)
|
||||
nodeParent.nodeData.children.splice(nodeIndex, 1)
|
||||
|
||||
// 目标节点
|
||||
let existParent = exist.parent
|
||||
let existBorthers = existParent.children
|
||||
let existIndex = existBorthers.findIndex(item2 => {
|
||||
return item2.uid === exist.uid
|
||||
})
|
||||
if (existIndex === -1) {
|
||||
return
|
||||
}
|
||||
if (dir === 'after') {
|
||||
existIndex++
|
||||
}
|
||||
existBorthers.splice(existIndex, 0, item)
|
||||
existParent.nodeData.children.splice(existIndex, 0, item.nodeData)
|
||||
})
|
||||
this.mindMap.render()
|
||||
}
|
||||
|
||||
// 如果是富文本模式,那么某些层级变化需要更新样式
|
||||
checkNodeLayerChange(node, toNode) {
|
||||
if (this.mindMap.richText) {
|
||||
let nodeLayerChanged =
|
||||
(node.layerIndex === 1 && toNode.layerIndex !== 1) ||
|
||||
(node.layerIndex !== 1 && toNode.layerIndex === 1)
|
||||
if (nodeLayerChanged) {
|
||||
node.nodeData.data.resetRichText = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 移除节点
|
||||
removeNode(appointNodes = []) {
|
||||
appointNodes = this.formatAppointNodes(appointNodes)
|
||||
appointNodes = formatDataToArray(appointNodes)
|
||||
if (this.activeNodeList.length <= 0 && appointNodes.length <= 0) {
|
||||
return
|
||||
}
|
||||
// 删除节点后需要激活的节点
|
||||
let needActiveNode = null
|
||||
let isAppointNodes = appointNodes.length > 0
|
||||
let list = isAppointNodes ? appointNodes : this.activeNodeList
|
||||
let root = list.find(node => {
|
||||
@@ -837,6 +949,28 @@ class Render {
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
let node = list[i]
|
||||
if (isAppointNodes) list.splice(i, 1)
|
||||
@@ -855,38 +989,53 @@ class Render {
|
||||
}
|
||||
}
|
||||
}
|
||||
this.activeNodeList = []
|
||||
// 激活被删除节点的兄弟节点或父节点
|
||||
if (needActiveNode) {
|
||||
this.activeNodeList.push(needActiveNode)
|
||||
this.setNodeActive(needActiveNode, true)
|
||||
needActiveNode = null
|
||||
}
|
||||
this.mindMap.emit('node_active', null, [...this.activeNodeList])
|
||||
this.mindMap.render()
|
||||
}
|
||||
|
||||
// 移除某个指定节点
|
||||
removeOneNode(node) {
|
||||
let index = this.getNodeIndex(node)
|
||||
let index = getNodeIndex(node)
|
||||
node.remove()
|
||||
node.parent.children.splice(index, 1)
|
||||
node.parent.nodeData.children.splice(index, 1)
|
||||
}
|
||||
|
||||
// 复制节点,多个节点只会操作第一个节点
|
||||
// 复制节点
|
||||
copyNode() {
|
||||
if (this.activeNodeList.length <= 0) {
|
||||
return
|
||||
}
|
||||
return copyNodeTree({}, this.activeNodeList[0], true)
|
||||
const nodeList = getTopAncestorsFomNodeList(this.activeNodeList)
|
||||
return nodeList.map(node => {
|
||||
return copyNodeTree({}, node, true)
|
||||
})
|
||||
}
|
||||
|
||||
// 剪切节点,多个节点只会操作第一个节点
|
||||
// 剪切节点
|
||||
cutNode(callback) {
|
||||
if (this.activeNodeList.length <= 0) {
|
||||
return
|
||||
}
|
||||
let node = this.activeNodeList[0]
|
||||
if (node.isRoot) {
|
||||
return null
|
||||
}
|
||||
let copyData = copyNodeTree({}, node, true)
|
||||
this.removeActiveNode(node)
|
||||
this.removeOneNode(node)
|
||||
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)
|
||||
})
|
||||
this.mindMap.emit('node_active', null, [...this.activeNodeList])
|
||||
this.mindMap.render()
|
||||
if (callback && typeof callback === 'function') {
|
||||
@@ -894,16 +1043,19 @@ class Render {
|
||||
}
|
||||
}
|
||||
|
||||
// 移动一个节点作为另一个节点的子节点
|
||||
// 移动节点作为另一个节点的子节点
|
||||
moveNodeTo(node, toNode) {
|
||||
if (node.isRoot) {
|
||||
return
|
||||
}
|
||||
// let copyData = copyNodeTree({}, node, false, true)
|
||||
this.removeActiveNode(node)
|
||||
this.removeOneNode(node)
|
||||
let nodeList = formatDataToArray(node)
|
||||
nodeList = nodeList.filter(item => {
|
||||
return !item.isRoot
|
||||
})
|
||||
nodeList.forEach(item => {
|
||||
this.checkNodeLayerChange(item, toNode)
|
||||
this.removeActiveNode(item)
|
||||
this.removeOneNode(item)
|
||||
toNode.nodeData.children.push(item.nodeData)
|
||||
})
|
||||
this.mindMap.emit('node_active', null, [...this.activeNodeList])
|
||||
toNode.nodeData.children.push(node.nodeData)
|
||||
this.mindMap.render()
|
||||
if (toNode.isRoot) {
|
||||
toNode.destroy()
|
||||
@@ -912,11 +1064,16 @@ class Render {
|
||||
|
||||
// 粘贴节点到节点
|
||||
pasteNode(data) {
|
||||
if (this.activeNodeList.length <= 0 || !data) {
|
||||
data = formatDataToArray(data)
|
||||
if (this.activeNodeList.length <= 0 || data.length <= 0) {
|
||||
return
|
||||
}
|
||||
this.activeNodeList.forEach(item => {
|
||||
item.nodeData.children.push(simpleDeepClone(data))
|
||||
this.activeNodeList.forEach(node => {
|
||||
node.nodeData.children.push(
|
||||
...data.map(item => {
|
||||
return simpleDeepClone(item)
|
||||
})
|
||||
)
|
||||
})
|
||||
this.mindMap.render()
|
||||
}
|
||||
@@ -1093,7 +1250,13 @@ class Render {
|
||||
|
||||
// 设置节点图片
|
||||
setNodeImage(node, data) {
|
||||
const { url, title, width, height, custom = false } = data || { url: '', title: '', width: 0, height: 0, custom: false }
|
||||
const {
|
||||
url,
|
||||
title,
|
||||
width,
|
||||
height,
|
||||
custom = false
|
||||
} = data || { url: '', title: '', width: 0, height: 0, custom: false }
|
||||
this.setNodeDataRender(node, {
|
||||
image: url,
|
||||
imageTitle: title || '',
|
||||
@@ -1134,6 +1297,17 @@ class Render {
|
||||
})
|
||||
}
|
||||
|
||||
// 设置节点公式
|
||||
insertFormula(formula, appointNodes = []) {
|
||||
// 只在富文本模式下可用,并且需要注册Formula插件
|
||||
if (!this.mindMap.richText || !this.mindMap.formula) return
|
||||
appointNodes = formatDataToArray(appointNodes)
|
||||
const list = appointNodes.length > 0 ? appointNodes : this.activeNodeList
|
||||
list.forEach(node => {
|
||||
this.mindMap.formula.insertFormulaToNode(node, formula)
|
||||
})
|
||||
}
|
||||
|
||||
// 添加节点概要
|
||||
addGeneralization(data) {
|
||||
if (this.activeNodeList.length <= 0) {
|
||||
|
||||
@@ -1,4 +1,10 @@
|
||||
import { getStrWithBrFromHtml, checkNodeOuter } from '../../utils'
|
||||
import {
|
||||
getStrWithBrFromHtml,
|
||||
checkNodeOuter,
|
||||
focusInput,
|
||||
selectAllInput,
|
||||
htmlEscape
|
||||
} from '../../utils'
|
||||
import { ERROR_TYPES } from '../../constants/constant'
|
||||
|
||||
// 节点文字编辑类
|
||||
@@ -167,9 +173,11 @@ 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).split(
|
||||
/\n/gim
|
||||
)
|
||||
let textLines = (this.cacheEditingText || node.nodeData.data.text)
|
||||
.split(/\n/gim)
|
||||
.map(item => {
|
||||
return htmlEscape(item)
|
||||
})
|
||||
let isMultiLine = node._textData.node.attr('data-ismultiLine') === 'true'
|
||||
node.style.domText(this.textEditNode, scale, isMultiLine)
|
||||
this.textEditNode.style.zIndex = nodeTextEditZIndex
|
||||
@@ -188,35 +196,16 @@ export default class TextEdit {
|
||||
this.showTextEdit = true
|
||||
// 选中文本
|
||||
// if (!this.cacheEditingText) {
|
||||
// this.selectNodeText()
|
||||
// selectAllInput(this.textEditNode)
|
||||
// }
|
||||
if (isInserting || (selectTextOnEnterEditText && !isFromKeyDown)) {
|
||||
this.selectNodeText()
|
||||
selectAllInput(this.textEditNode)
|
||||
} else {
|
||||
this.focus()
|
||||
focusInput(this.textEditNode)
|
||||
}
|
||||
this.cacheEditingText = ''
|
||||
}
|
||||
|
||||
// 聚焦
|
||||
focus() {
|
||||
let selection = window.getSelection()
|
||||
let range = document.createRange()
|
||||
range.selectNodeContents(this.textEditNode)
|
||||
range.collapse()
|
||||
selection.removeAllRanges()
|
||||
selection.addRange(range)
|
||||
}
|
||||
|
||||
// 选中文本
|
||||
selectNodeText() {
|
||||
let selection = window.getSelection()
|
||||
let range = document.createRange()
|
||||
range.selectNodeContents(this.textEditNode)
|
||||
selection.removeAllRanges()
|
||||
selection.addRange(range)
|
||||
}
|
||||
|
||||
// 获取当前正在编辑的内容
|
||||
getEditText() {
|
||||
return getStrWithBrFromHtml(this.textEditNode.innerHTML)
|
||||
|
||||
@@ -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'
|
||||
|
||||
// 节点类
|
||||
@@ -14,7 +15,7 @@ class Node {
|
||||
constructor(opt = {}) {
|
||||
// 节点数据
|
||||
this.nodeData = this.handleData(opt.data || {})
|
||||
// id
|
||||
// uid
|
||||
this.uid = opt.uid
|
||||
// 控制实例
|
||||
this.mindMap = opt.mindMap
|
||||
@@ -55,6 +56,8 @@ class Node {
|
||||
this.parent = opt.parent || null
|
||||
// 子节点
|
||||
this.children = opt.children || []
|
||||
// 当前同时操作该节点的用户列表
|
||||
this.userList = []
|
||||
// 节点内容的容器
|
||||
this.group = null
|
||||
this.shapeNode = null // 节点形状节点
|
||||
@@ -74,6 +77,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 +125,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 +293,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)
|
||||
@@ -394,7 +406,11 @@ class Node {
|
||||
this.active(e)
|
||||
})
|
||||
this.group.on('mousedown', e => {
|
||||
const { readonly, enableCtrlKeyNodeSelection, useLeftKeySelectionRightKeyDrag } = this.mindMap.opt
|
||||
const {
|
||||
readonly,
|
||||
enableCtrlKeyNodeSelection,
|
||||
useLeftKeySelectionRightKeyDrag
|
||||
} = this.mindMap.opt
|
||||
// 只读模式不需要阻止冒泡
|
||||
if (!readonly) {
|
||||
if (this.isRoot) {
|
||||
@@ -423,11 +439,9 @@ class Node {
|
||||
this.mindMap.renderer[isActive ? 'removeActiveNode' : 'addActiveNode'](
|
||||
this
|
||||
)
|
||||
this.mindMap.emit(
|
||||
'node_active',
|
||||
isActive ? null : this,
|
||||
[...this.mindMap.renderer.activeNodeList]
|
||||
)
|
||||
this.mindMap.emit('node_active', isActive ? null : this, [
|
||||
...this.mindMap.renderer.activeNodeList
|
||||
])
|
||||
}
|
||||
this.mindMap.emit('node_mousedown', this, e)
|
||||
})
|
||||
@@ -438,12 +452,14 @@ class Node {
|
||||
this.mindMap.emit('node_mouseup', this, e)
|
||||
})
|
||||
this.group.on('mouseenter', e => {
|
||||
if (this.isDrag) return
|
||||
this._isMouseenter = true
|
||||
// 显示展开收起按钮
|
||||
this.showExpandBtn()
|
||||
this.mindMap.emit('node_mouseenter', this, e)
|
||||
})
|
||||
this.group.on('mouseleave', e => {
|
||||
if (!this._isMouseenter) return
|
||||
this._isMouseenter = false
|
||||
this.hideExpandBtn()
|
||||
this.mindMap.emit('node_mouseleave', this, e)
|
||||
@@ -466,7 +482,11 @@ class Node {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
// 如果是多选节点结束,那么不要触发右键菜单事件
|
||||
if(!useLeftKeySelectionRightKeyDrag && this.mindMap.select.hasSelectRange()) {
|
||||
if (
|
||||
this.mindMap.select &&
|
||||
!useLeftKeySelectionRightKeyDrag &&
|
||||
this.mindMap.select.hasSelectRange()
|
||||
) {
|
||||
return
|
||||
}
|
||||
if (this.nodeData.data.isActive) {
|
||||
@@ -519,6 +539,8 @@ class Node {
|
||||
}
|
||||
// 更新概要
|
||||
this.renderGeneralization()
|
||||
// 更新协同头像
|
||||
if (this.updateUserListNode) this.updateUserListNode()
|
||||
// 更新节点位置
|
||||
let t = this.group.transform()
|
||||
// // 如果上次不在可视区内,且本次也不在,那么直接返回
|
||||
@@ -695,6 +717,61 @@ class Node {
|
||||
}
|
||||
}
|
||||
|
||||
// 设置节点透明度
|
||||
// 包括连接线和下级节点
|
||||
setOpacity(val) {
|
||||
// 自身及连线
|
||||
this.group.opacity(val)
|
||||
this._lines.forEach(line => {
|
||||
line.opacity(val)
|
||||
})
|
||||
// 子节点
|
||||
this.children.forEach(item => {
|
||||
item.setOpacity(val)
|
||||
})
|
||||
// 概要节点
|
||||
if (this._generalizationNode) {
|
||||
this._generalizationLine.opacity(val)
|
||||
this._generalizationNode.group.opacity(val)
|
||||
}
|
||||
}
|
||||
|
||||
// 隐藏子节点
|
||||
hideChildren() {
|
||||
this._lines.forEach(item => {
|
||||
item.hide()
|
||||
})
|
||||
if (this.children && this.children.length) {
|
||||
this.children.forEach(item => {
|
||||
item.hide()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 显示子节点
|
||||
showChildren() {
|
||||
this._lines.forEach(item => {
|
||||
item.show()
|
||||
})
|
||||
if (this.children && this.children.length) {
|
||||
this.children.forEach(item => {
|
||||
item.show()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 被拖拽中
|
||||
startDrag() {
|
||||
this.isDrag = true
|
||||
this.group.addClass('smm-node-dragging')
|
||||
}
|
||||
|
||||
// 拖拽结束
|
||||
endDrag() {
|
||||
this.isDrag = false
|
||||
this.group.removeClass('smm-node-dragging')
|
||||
}
|
||||
|
||||
// 连线
|
||||
renderLine(deep = false) {
|
||||
if (this.nodeData.data.expand === false) {
|
||||
@@ -794,12 +871,12 @@ class Node {
|
||||
|
||||
// 检测当前节点是否是某个节点的祖先节点
|
||||
isParent(node) {
|
||||
if (this === node) {
|
||||
if (this.uid === node.uid) {
|
||||
return false
|
||||
}
|
||||
let parent = node.parent
|
||||
while (parent) {
|
||||
if (this === parent) {
|
||||
if (this.uid === parent.uid) {
|
||||
return true
|
||||
}
|
||||
parent = parent.parent
|
||||
@@ -809,11 +886,11 @@ class Node {
|
||||
|
||||
// 检测当前节点是否是某个节点的兄弟节点
|
||||
isBrother(node) {
|
||||
if (!this.parent || this === node) {
|
||||
if (!this.parent || this.uid === node.uid) {
|
||||
return false
|
||||
}
|
||||
return this.parent.children.find(item => {
|
||||
return item === node
|
||||
return item.uid === node.uid
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import {
|
||||
tagColorList,
|
||||
nodeDataNoStylePropList
|
||||
} from '../../../constants/constant'
|
||||
checkIsNodeStyleDataKey,
|
||||
generateColorByContent
|
||||
} from '../../../utils/index'
|
||||
|
||||
const rootProp = ['paddingX', 'paddingY']
|
||||
const backgroundStyleProps = [
|
||||
'backgroundColor',
|
||||
@@ -164,10 +165,10 @@ class Style {
|
||||
}
|
||||
|
||||
// 标签文字
|
||||
tagText(node, index) {
|
||||
tagText(node) {
|
||||
node
|
||||
.fill({
|
||||
color: tagColorList[index].color
|
||||
color: '#fff'
|
||||
})
|
||||
.css({
|
||||
'font-size': '12px'
|
||||
@@ -175,9 +176,9 @@ class Style {
|
||||
}
|
||||
|
||||
// 标签矩形
|
||||
tagRect(node, index) {
|
||||
tagRect(node, text, color) {
|
||||
node.fill({
|
||||
color: tagColorList[index].background
|
||||
color: color || generateColorByContent(text.node.textContent)
|
||||
})
|
||||
}
|
||||
|
||||
@@ -225,7 +226,7 @@ class Style {
|
||||
hasCustomStyle() {
|
||||
let res = false
|
||||
Object.keys(this.ctx.nodeData.data).forEach(item => {
|
||||
if (!nodeDataNoStylePropList.includes(item)) {
|
||||
if (checkIsNodeStyleDataKey(item)) {
|
||||
res = true
|
||||
}
|
||||
})
|
||||
@@ -235,12 +236,9 @@ class Style {
|
||||
// hover和激活节点
|
||||
hoverNode(node) {
|
||||
const { hoverRectColor } = this.ctx.mindMap.opt
|
||||
node
|
||||
.radius(5)
|
||||
.fill('none')
|
||||
.stroke({
|
||||
color: hoverRectColor
|
||||
})
|
||||
node.radius(5).fill('none').stroke({
|
||||
color: hoverRectColor
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
104
simple-mind-map/src/core/render/node/nodeCooperate.js
Normal file
104
simple-mind-map/src/core/render/node/nodeCooperate.js
Normal file
@@ -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
|
||||
}
|
||||
@@ -3,7 +3,8 @@ import {
|
||||
resizeImgSize,
|
||||
removeHtmlStyle,
|
||||
addHtmlStyle,
|
||||
checkIsRichText
|
||||
checkIsRichText,
|
||||
isUndef
|
||||
} from '../../../utils'
|
||||
import { Image, SVG, A, G, Rect, Text, ForeignObject } from '@svgdotjs/svg.js'
|
||||
import iconsSvg from '../../../svg/icons'
|
||||
@@ -164,7 +165,10 @@ function createTextNode() {
|
||||
let lineHeight = this.getStyle('lineHeight', false)
|
||||
// 文本超长自动换行
|
||||
let textStyle = this.style.getTextFontStyle()
|
||||
let textArr = this.nodeData.data.text.split(/\n/gim)
|
||||
let textArr = []
|
||||
if (!isUndef(this.nodeData.data.text)) {
|
||||
textArr = String(this.nodeData.data.text).split(/\n/gim)
|
||||
}
|
||||
let maxWidth = this.mindMap.opt.textAutoWrapWidth
|
||||
let isMultiLine = false
|
||||
textArr.forEach((item, index) => {
|
||||
@@ -249,12 +253,15 @@ function createTagNode() {
|
||||
tagData.slice(0, this.mindMap.opt.maxTag).forEach((item, index) => {
|
||||
let tag = new G()
|
||||
// 标签文本
|
||||
let text = new Text().text(item).x(8).cy(10)
|
||||
let text = new Text().text(item).x(8).cy(8)
|
||||
this.style.tagText(text, index)
|
||||
let { width } = text.bbox()
|
||||
// 标签矩形
|
||||
let rect = new Rect().size(width + 16, 20)
|
||||
this.style.tagRect(rect, index)
|
||||
// 先从自定义的颜色中获取颜色,没有的话就按照内容生成
|
||||
const tagsColorList = this.mindMap.opt.tagsColorMap || {}
|
||||
const color = tagsColorList[text.node.textContent]
|
||||
this.style.tagRect(rect, text, color)
|
||||
tag.add(rect).add(text)
|
||||
nodes.push({
|
||||
node: tag,
|
||||
|
||||
@@ -70,7 +70,8 @@ function updateExpandBtnNode() {
|
||||
|
||||
if (this._expandBtn) {
|
||||
// 如果是收起按钮加上边框
|
||||
let { isShowExpandNum, expandBtnStyle, expandBtnNumHandler } = this.mindMap.opt
|
||||
let { isShowExpandNum, expandBtnStyle, expandBtnNumHandler } =
|
||||
this.mindMap.opt
|
||||
if (isShowExpandNum) {
|
||||
if (!expand) {
|
||||
// 数字按钮添加边框
|
||||
@@ -135,6 +136,7 @@ function renderExpandBtn() {
|
||||
this._expandBtn.on('dblclick', e => {
|
||||
e.stopPropagation()
|
||||
})
|
||||
this._expandBtn.addClass('smm-expand-btn')
|
||||
this.group.add(this._expandBtn)
|
||||
}
|
||||
this._showExpandBtn = true
|
||||
|
||||
@@ -2,12 +2,12 @@ import Node from './Node'
|
||||
import { createUid } from '../../../utils/index'
|
||||
|
||||
// 检查是否存在概要
|
||||
function checkHasGeneralization () {
|
||||
function checkHasGeneralization() {
|
||||
return !!this.nodeData.data.generalization
|
||||
}
|
||||
|
||||
// 创建概要节点
|
||||
function createGeneralizationNode () {
|
||||
function createGeneralizationNode() {
|
||||
if (this.isGeneralization || !this.checkHasGeneralization()) {
|
||||
return
|
||||
}
|
||||
@@ -35,14 +35,14 @@ function createGeneralizationNode () {
|
||||
}
|
||||
|
||||
// 更新概要节点
|
||||
function updateGeneralization () {
|
||||
function updateGeneralization() {
|
||||
if (this.isGeneralization) return
|
||||
this.removeGeneralization()
|
||||
this.createGeneralizationNode()
|
||||
}
|
||||
|
||||
// 渲染概要节点
|
||||
function renderGeneralization () {
|
||||
function renderGeneralization() {
|
||||
if (this.isGeneralization) return
|
||||
if (!this.checkHasGeneralization()) {
|
||||
this.removeGeneralization()
|
||||
@@ -65,7 +65,7 @@ function renderGeneralization () {
|
||||
}
|
||||
|
||||
// 删除概要节点
|
||||
function removeGeneralization () {
|
||||
function removeGeneralization() {
|
||||
if (this.isGeneralization) return
|
||||
if (this._generalizationLine) {
|
||||
this._generalizationLine.remove()
|
||||
@@ -86,7 +86,7 @@ function removeGeneralization () {
|
||||
}
|
||||
|
||||
// 隐藏概要节点
|
||||
function hideGeneralization () {
|
||||
function hideGeneralization() {
|
||||
if (this.isGeneralization) return
|
||||
if (this._generalizationLine) {
|
||||
this._generalizationLine.hide()
|
||||
@@ -97,7 +97,7 @@ function hideGeneralization () {
|
||||
}
|
||||
|
||||
// 显示概要节点
|
||||
function showGeneralization () {
|
||||
function showGeneralization() {
|
||||
if (this.isGeneralization) return
|
||||
if (this._generalizationLine) {
|
||||
this._generalizationLine.show()
|
||||
@@ -108,11 +108,11 @@ function showGeneralization () {
|
||||
}
|
||||
|
||||
export default {
|
||||
checkHasGeneralization,
|
||||
createGeneralizationNode,
|
||||
updateGeneralization,
|
||||
renderGeneralization,
|
||||
removeGeneralization,
|
||||
hideGeneralization,
|
||||
showGeneralization
|
||||
}
|
||||
checkHasGeneralization,
|
||||
createGeneralizationNode,
|
||||
updateGeneralization,
|
||||
renderGeneralization,
|
||||
removeGeneralization,
|
||||
hideGeneralization,
|
||||
showGeneralization
|
||||
}
|
||||
|
||||
@@ -79,7 +79,10 @@ class View {
|
||||
// 鼠标滚轮事件控制缩放
|
||||
if (mousewheelAction === CONSTANTS.MOUSE_WHEEL_ACTION.ZOOM) {
|
||||
if (disableMouseWheelZoom) return
|
||||
const { x: clientX, y: clientY } = this.mindMap.toPos(e.clientX, e.clientY)
|
||||
const { x: clientX, y: clientY } = this.mindMap.toPos(
|
||||
e.clientX,
|
||||
e.clientY
|
||||
)
|
||||
let cx = mouseScaleCenterUseMousePosition ? clientX : undefined
|
||||
let cy = mouseScaleCenterUseMousePosition ? clientY : undefined
|
||||
switch (dir) {
|
||||
@@ -171,7 +174,6 @@ class View {
|
||||
|
||||
// 平移x方式到
|
||||
translateXTo(x) {
|
||||
if (x === 0) return
|
||||
this.x = x
|
||||
this.transform()
|
||||
}
|
||||
@@ -185,7 +187,6 @@ class View {
|
||||
|
||||
// 平移y方向到
|
||||
translateYTo(y) {
|
||||
if (y === 0) return
|
||||
this.y = y
|
||||
this.transform()
|
||||
}
|
||||
|
||||
@@ -129,6 +129,10 @@ class Base {
|
||||
this.renderer.addActiveNode(newNode)
|
||||
}
|
||||
}
|
||||
// 如果当前节点在激活节点列表里,那么添加上激活的状态
|
||||
if (this.mindMap.renderer.findActiveNodeIndex(newNode) !== -1) {
|
||||
newNode.nodeData.data.isActive = true
|
||||
}
|
||||
// 根节点
|
||||
if (isRoot) {
|
||||
newNode.isRoot = true
|
||||
@@ -202,9 +206,13 @@ class Base {
|
||||
}
|
||||
|
||||
// 递归计算节点的宽度
|
||||
getNodeAreaWidth(node) {
|
||||
getNodeAreaWidth(node, withGeneralization = false) {
|
||||
let widthArr = []
|
||||
let totalGeneralizationNodeWidth = 0
|
||||
let loop = (node, width) => {
|
||||
if (withGeneralization && node.checkHasGeneralization()) {
|
||||
totalGeneralizationNodeWidth += node._generalizationNodeWidth
|
||||
}
|
||||
if (node.children.length) {
|
||||
width += node.width / 2
|
||||
node.children.forEach(item => {
|
||||
@@ -216,7 +224,7 @@ class Base {
|
||||
}
|
||||
}
|
||||
loop(node, 0)
|
||||
return Math.max(...widthArr)
|
||||
return Math.max(...widthArr) + totalGeneralizationNodeWidth
|
||||
}
|
||||
|
||||
// 二次贝塞尔曲线
|
||||
|
||||
@@ -87,11 +87,18 @@ class CatalogOrganization extends Base {
|
||||
totalLeft += cur.width + marginX
|
||||
})
|
||||
} else {
|
||||
let totalTop = node.top + node.height + marginY + (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
|
||||
let totalTop =
|
||||
node.top +
|
||||
this.getNodeHeightWithGeneralization(node) +
|
||||
marginY +
|
||||
(this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
|
||||
node.children.forEach(cur => {
|
||||
cur.left = node.left + node.width * 0.5
|
||||
cur.top = totalTop
|
||||
totalTop += cur.height + marginY + (this.getNodeActChildrenLength(cur) > 0 ? cur.expandBtnSize : 0)
|
||||
totalTop +=
|
||||
this.getNodeHeightWithGeneralization(cur) +
|
||||
marginY +
|
||||
(this.getNodeActChildrenLength(cur) > 0 ? cur.expandBtnSize : 0)
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -112,7 +119,7 @@ class CatalogOrganization extends Base {
|
||||
}
|
||||
// 调整left
|
||||
if (parent && parent.isRoot) {
|
||||
let areaWidth = this.getNodeAreaWidth(node)
|
||||
let areaWidth = this.getNodeAreaWidth(node, true)
|
||||
let difference = areaWidth - node.width
|
||||
if (difference > 0) {
|
||||
this.updateBrothersLeft(node, difference)
|
||||
@@ -124,7 +131,13 @@ class CatalogOrganization extends Base {
|
||||
let marginY = this.getMarginY(layerIndex + 1)
|
||||
let totalHeight =
|
||||
node.children.reduce((h, item) => {
|
||||
return h + item.height + (this.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
|
||||
return (
|
||||
h +
|
||||
this.getNodeHeightWithGeneralization(item) +
|
||||
(this.getNodeActChildrenLength(item) > 0
|
||||
? item.expandBtnSize
|
||||
: 0)
|
||||
)
|
||||
}, 0) +
|
||||
len * marginY
|
||||
this.updateBrothersTop(node, totalHeight)
|
||||
@@ -134,7 +147,7 @@ class CatalogOrganization extends Base {
|
||||
if (isRoot) {
|
||||
let { right, left } = this.getNodeBoundaries(node, 'h')
|
||||
let childrenWidth = right - left
|
||||
let offset = (node.left - left) - (childrenWidth - node.width) / 2
|
||||
let offset = node.left - left - (childrenWidth - node.width) / 2
|
||||
this.updateChildren(node.children, 'left', offset)
|
||||
}
|
||||
},
|
||||
@@ -147,7 +160,7 @@ class CatalogOrganization extends Base {
|
||||
if (node.parent) {
|
||||
let childrenList = node.parent.children
|
||||
let index = childrenList.findIndex(item => {
|
||||
return item === node
|
||||
return item.uid === node.uid
|
||||
})
|
||||
childrenList.forEach((item, _index) => {
|
||||
if (item.hasCustomPosition() || _index <= index) {
|
||||
@@ -170,7 +183,7 @@ class CatalogOrganization extends Base {
|
||||
if (node.parent && !node.parent.isRoot) {
|
||||
let childrenList = node.parent.children
|
||||
let index = childrenList.findIndex(item => {
|
||||
return item === node
|
||||
return item.uid === node.uid
|
||||
})
|
||||
childrenList.forEach((item, _index) => {
|
||||
if (item.hasCustomPosition()) {
|
||||
|
||||
@@ -159,7 +159,8 @@ class Fishbone extends Base {
|
||||
let marginY = this.getMarginY(node.layerIndex)
|
||||
totalHeight +=
|
||||
node.height +
|
||||
(this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) + marginY
|
||||
(this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) +
|
||||
marginY
|
||||
if (node.children.length) {
|
||||
node.children.forEach(item => {
|
||||
loop(item)
|
||||
@@ -193,7 +194,7 @@ class Fishbone extends Base {
|
||||
if (node.parent && !node.parent.isRoot) {
|
||||
let childrenList = node.parent.children
|
||||
let index = childrenList.findIndex(item => {
|
||||
return item === node
|
||||
return item.uid === node.uid
|
||||
})
|
||||
childrenList.forEach((item, _index) => {
|
||||
if (item.hasCustomPosition()) {
|
||||
|
||||
@@ -170,7 +170,8 @@ class Fishbone extends Base {
|
||||
item.top += _top
|
||||
// 调整left
|
||||
let offsetLeft =
|
||||
(totalHeight2 + nodeTotalHeight) / Math.tan(degToRad(this.mindMap.opt.fishboneDeg))
|
||||
(totalHeight2 + nodeTotalHeight) /
|
||||
Math.tan(degToRad(this.mindMap.opt.fishboneDeg))
|
||||
item.left += offsetLeft
|
||||
totalHeight += offset
|
||||
totalHeight2 += nodeTotalHeight
|
||||
@@ -237,7 +238,7 @@ class Fishbone extends Base {
|
||||
if (node.parent && !node.parent.isRoot) {
|
||||
let childrenList = node.parent.children
|
||||
let index = childrenList.findIndex(item => {
|
||||
return item === node
|
||||
return item.uid === node.uid
|
||||
})
|
||||
childrenList.forEach((item, _index) => {
|
||||
if (item.hasCustomPosition()) {
|
||||
@@ -312,7 +313,9 @@ class Fishbone extends Base {
|
||||
if (node.parent && node.parent.isRoot) {
|
||||
line.plot(
|
||||
`M ${x},${top + height} L ${x + lineLength},${
|
||||
top + height + Math.tan(degToRad(this.mindMap.opt.fishboneDeg)) * lineLength
|
||||
top +
|
||||
height +
|
||||
Math.tan(degToRad(this.mindMap.opt.fishboneDeg)) * lineLength
|
||||
}`
|
||||
)
|
||||
} else {
|
||||
|
||||
@@ -140,7 +140,8 @@ class Fishbone extends Base {
|
||||
node.top - (item.top - node.top) - nodeTotalHeight + node.height
|
||||
// 调整left
|
||||
let offsetLeft =
|
||||
(nodeTotalHeight + totalHeight) / Math.tan(degToRad(this.mindMap.opt.fishboneDeg))
|
||||
(nodeTotalHeight + totalHeight) /
|
||||
Math.tan(degToRad(this.mindMap.opt.fishboneDeg))
|
||||
item.left += offsetLeft
|
||||
totalHeight += nodeTotalHeight
|
||||
// 同步更新后代节点
|
||||
@@ -206,7 +207,7 @@ class Fishbone extends Base {
|
||||
if (node.parent && !node.parent.isRoot) {
|
||||
let childrenList = node.parent.children
|
||||
let index = childrenList.findIndex(item => {
|
||||
return item === node
|
||||
return item.uid === node.uid
|
||||
})
|
||||
childrenList.forEach((item, _index) => {
|
||||
if (item.hasCustomPosition()) {
|
||||
@@ -285,14 +286,16 @@ class Fishbone extends Base {
|
||||
) {
|
||||
line.plot(
|
||||
`M ${x},${top} L ${x + lineLength},${
|
||||
top - Math.tan(degToRad(this.mindMap.opt.fishboneDeg)) * lineLength
|
||||
top -
|
||||
Math.tan(degToRad(this.mindMap.opt.fishboneDeg)) * lineLength
|
||||
}`
|
||||
)
|
||||
} else {
|
||||
if (node.parent && node.parent.isRoot) {
|
||||
line.plot(
|
||||
`M ${x},${top} L ${x + lineLength},${
|
||||
top - Math.tan(degToRad(this.mindMap.opt.fishboneDeg)) * lineLength
|
||||
top -
|
||||
Math.tan(degToRad(this.mindMap.opt.fishboneDeg)) * lineLength
|
||||
}`
|
||||
)
|
||||
} else {
|
||||
|
||||
@@ -56,6 +56,15 @@ class LogicalStructure extends Base {
|
||||
}, 0) +
|
||||
(len + 1) * this.getMarginY(layerIndex + 1)
|
||||
: 0
|
||||
// 如果存在概要,则和概要的高度取最大值
|
||||
let generalizationNodeHeight = cur._node.checkHasGeneralization()
|
||||
? cur._node._generalizationNodeHeight +
|
||||
this.getMarginY(layerIndex + 1)
|
||||
: 0
|
||||
cur._node.childrenAreaHeight2 = Math.max(
|
||||
cur._node.childrenAreaHeight,
|
||||
generalizationNodeHeight
|
||||
)
|
||||
},
|
||||
true,
|
||||
0
|
||||
@@ -99,7 +108,7 @@ class LogicalStructure extends Base {
|
||||
}
|
||||
// 判断子节点所占的高度之和是否大于该节点自身,大于则需要调整位置
|
||||
let difference =
|
||||
node.childrenAreaHeight -
|
||||
node.childrenAreaHeight2 -
|
||||
this.getMarginY(layerIndex + 1) * 2 -
|
||||
node.height
|
||||
if (difference > 0) {
|
||||
@@ -116,10 +125,10 @@ class LogicalStructure extends Base {
|
||||
if (node.parent) {
|
||||
let childrenList = node.parent.children
|
||||
let index = childrenList.findIndex(item => {
|
||||
return item === node
|
||||
return item.uid === node.uid
|
||||
})
|
||||
childrenList.forEach((item, _index) => {
|
||||
if (item === node || item.hasCustomPosition()) {
|
||||
if (item.uid === node.uid || item.hasCustomPosition()) {
|
||||
// 适配自定义位置
|
||||
return
|
||||
}
|
||||
|
||||
@@ -90,6 +90,20 @@ class MindMap extends Base {
|
||||
cur._node.rightChildrenAreaHeight =
|
||||
rightChildrenAreaHeight +
|
||||
(rightLen + 1) * this.getMarginY(layerIndex + 1)
|
||||
|
||||
// 如果存在概要,则和概要的高度取最大值
|
||||
let generalizationNodeHeight = cur._node.checkHasGeneralization()
|
||||
? cur._node._generalizationNodeHeight +
|
||||
this.getMarginY(layerIndex + 1)
|
||||
: 0
|
||||
cur._node.leftChildrenAreaHeight2 = Math.max(
|
||||
cur._node.leftChildrenAreaHeight,
|
||||
generalizationNodeHeight
|
||||
)
|
||||
cur._node.rightChildrenAreaHeight2 = Math.max(
|
||||
cur._node.rightChildrenAreaHeight,
|
||||
generalizationNodeHeight
|
||||
)
|
||||
},
|
||||
true,
|
||||
0
|
||||
@@ -139,8 +153,8 @@ class MindMap extends Base {
|
||||
}
|
||||
// 判断子节点所占的高度之和是否大于该节点自身,大于则需要调整位置
|
||||
let base = this.getMarginY(layerIndex + 1) * 2 + node.height
|
||||
let leftDifference = node.leftChildrenAreaHeight - base
|
||||
let rightDifference = node.rightChildrenAreaHeight - base
|
||||
let leftDifference = node.leftChildrenAreaHeight2 - base
|
||||
let rightDifference = node.rightChildrenAreaHeight2 - base
|
||||
if (leftDifference > 0 || rightDifference > 0) {
|
||||
this.updateBrothers(node, leftDifference / 2, rightDifference / 2)
|
||||
}
|
||||
@@ -158,7 +172,7 @@ class MindMap extends Base {
|
||||
return item.dir === node.dir
|
||||
})
|
||||
let index = childrenList.findIndex(item => {
|
||||
return item === node
|
||||
return item.uid === node.uid
|
||||
})
|
||||
childrenList.forEach((item, _index) => {
|
||||
if (item.hasCustomPosition()) {
|
||||
|
||||
@@ -57,6 +57,15 @@ class OrganizationStructure extends Base {
|
||||
}, 0) +
|
||||
(len + 1) * this.getMarginY(layerIndex + 1)
|
||||
: 0
|
||||
|
||||
// 如果存在概要,则和概要的高度取最大值
|
||||
let generalizationNodeWidth = cur._node.checkHasGeneralization()
|
||||
? cur._node._generalizationNodeWidth + this.getMarginY(layerIndex + 1)
|
||||
: 0
|
||||
cur._node.childrenAreaWidth2 = Math.max(
|
||||
cur._node.childrenAreaWidth,
|
||||
generalizationNodeWidth
|
||||
)
|
||||
},
|
||||
true,
|
||||
0
|
||||
@@ -100,7 +109,7 @@ class OrganizationStructure extends Base {
|
||||
}
|
||||
// 判断子节点所占的宽度之和是否大于该节点自身,大于则需要调整位置
|
||||
let difference =
|
||||
node.childrenAreaWidth -
|
||||
node.childrenAreaWidth2 -
|
||||
this.getMarginY(layerIndex + 1) * 2 -
|
||||
node.width
|
||||
if (difference > 0) {
|
||||
@@ -117,7 +126,7 @@ class OrganizationStructure extends Base {
|
||||
if (node.parent) {
|
||||
let childrenList = node.parent.children
|
||||
let index = childrenList.findIndex(item => {
|
||||
return item === node
|
||||
return item.uid === node.uid
|
||||
})
|
||||
childrenList.forEach((item, _index) => {
|
||||
if (item.hasCustomPosition()) {
|
||||
|
||||
@@ -209,7 +209,7 @@ class Timeline extends Base {
|
||||
if (node.parent && !node.parent.isRoot) {
|
||||
let childrenList = node.parent.children
|
||||
let index = childrenList.findIndex(item => {
|
||||
return item === node
|
||||
return item.uid === node.uid
|
||||
})
|
||||
childrenList.forEach((item, _index) => {
|
||||
if (item.hasCustomPosition()) {
|
||||
|
||||
@@ -156,13 +156,13 @@ class VerticalTimeline extends Base {
|
||||
if (node.parent) {
|
||||
let childrenList = node.parent.children
|
||||
let index = childrenList.findIndex(item => {
|
||||
return item === node
|
||||
return item.uid === node.uid
|
||||
})
|
||||
childrenList.forEach((item, _index) => {
|
||||
// 自定义节点位置
|
||||
if (item.hasCustomPosition()) return
|
||||
// 三级或三级以下节点自身位置不需要动
|
||||
if (!node.parent.isRoot && item === node) return
|
||||
if (!node.parent.isRoot && item.uid === node.uid) return
|
||||
let _offset = 0
|
||||
// 二级节点上面的兄弟节点不需要移动,自身需要往下移动
|
||||
if (node.parent.isRoot) {
|
||||
@@ -202,7 +202,7 @@ class VerticalTimeline extends Base {
|
||||
if (node.parent && !node.parent.isRoot) {
|
||||
let childrenList = node.parent.children
|
||||
let index = childrenList.findIndex(item => {
|
||||
return item === node
|
||||
return item.uid === node.uid
|
||||
})
|
||||
childrenList.forEach((item, _index) => {
|
||||
if (item.hasCustomPosition()) {
|
||||
|
||||
@@ -52,13 +52,15 @@ export default {
|
||||
let totalTop =
|
||||
node.top +
|
||||
node.height +
|
||||
(ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) + marginY
|
||||
(ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) +
|
||||
marginY
|
||||
node.children.forEach(item => {
|
||||
item.left = startLeft
|
||||
item.top += totalTop
|
||||
totalTop +=
|
||||
item.height +
|
||||
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) + marginY
|
||||
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) +
|
||||
marginY
|
||||
})
|
||||
}
|
||||
},
|
||||
@@ -72,7 +74,8 @@ export default {
|
||||
return (
|
||||
h +
|
||||
item.height +
|
||||
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) + marginY
|
||||
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) +
|
||||
marginY
|
||||
)
|
||||
}, 0)
|
||||
ctx.updateBrothersTop(node, totalHeight)
|
||||
@@ -92,7 +95,11 @@ export default {
|
||||
item.top =
|
||||
node.top - (item.top - node.top) - nodeTotalHeight + node.height
|
||||
// 调整left
|
||||
item.left = node.left + node.width * ctx.indent + (nodeTotalHeight + totalHeight) / Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg))
|
||||
item.left =
|
||||
node.left +
|
||||
node.width * ctx.indent +
|
||||
(nodeTotalHeight + totalHeight) /
|
||||
Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg))
|
||||
totalHeight += nodeTotalHeight
|
||||
// 同步更新后代节点
|
||||
ctx.updateChildrenPro(item.children, {
|
||||
@@ -129,7 +136,9 @@ export default {
|
||||
if (node.parent && node.parent.isRoot) {
|
||||
line.plot(
|
||||
`M ${x},${top + height} L ${x + lineLength},${
|
||||
top + height + Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg)) * lineLength
|
||||
top +
|
||||
height +
|
||||
Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg)) * lineLength
|
||||
}`
|
||||
)
|
||||
} else {
|
||||
@@ -144,7 +153,8 @@ export default {
|
||||
let totalTop =
|
||||
node.top +
|
||||
node.height +
|
||||
(ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) + marginY
|
||||
(ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) +
|
||||
marginY
|
||||
|
||||
node.children.forEach(item => {
|
||||
item.left = startLeft
|
||||
@@ -153,7 +163,8 @@ export default {
|
||||
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
|
||||
totalTop +=
|
||||
item.height +
|
||||
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) + marginY
|
||||
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) +
|
||||
marginY
|
||||
})
|
||||
}
|
||||
if (layerIndex > 1 && node.children) {
|
||||
@@ -161,13 +172,15 @@ export default {
|
||||
let startLeft = node.left + node.width * ctx.childIndent
|
||||
let totalTop =
|
||||
node.top -
|
||||
(ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) - marginY
|
||||
(ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) -
|
||||
marginY
|
||||
node.children.forEach(item => {
|
||||
item.left = startLeft
|
||||
item.top = totalTop - item.height
|
||||
totalTop -=
|
||||
item.height +
|
||||
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) + marginY
|
||||
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) +
|
||||
marginY
|
||||
})
|
||||
}
|
||||
},
|
||||
@@ -180,7 +193,8 @@ export default {
|
||||
return (
|
||||
h +
|
||||
item.height +
|
||||
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) + marginY
|
||||
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) +
|
||||
marginY
|
||||
)
|
||||
}, 0)
|
||||
ctx.updateBrothersTop(node, -totalHeight)
|
||||
@@ -197,18 +211,21 @@ export default {
|
||||
// 调整top
|
||||
let hasChildren = ctx.getNodeActChildrenLength(item) > 0
|
||||
let nodeTotalHeight = ctx.getNodeAreaHeight(item)
|
||||
let offset =
|
||||
hasChildren
|
||||
? nodeTotalHeight -
|
||||
item.height -
|
||||
(hasChildren ? item.expandBtnSize : 0)
|
||||
: 0
|
||||
offset -= (hasChildren ? marginY : 0)
|
||||
let offset = hasChildren
|
||||
? nodeTotalHeight -
|
||||
item.height -
|
||||
(hasChildren ? item.expandBtnSize : 0)
|
||||
: 0
|
||||
offset -= hasChildren ? marginY : 0
|
||||
let _top = totalHeight + offset
|
||||
let _left = item.left
|
||||
item.top += _top
|
||||
// 调整left
|
||||
item.left = node.left + node.width * ctx.indent + (nodeTotalHeight + totalHeight2) / Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg))
|
||||
item.left =
|
||||
node.left +
|
||||
node.width * ctx.indent +
|
||||
(nodeTotalHeight + totalHeight2) /
|
||||
Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg))
|
||||
totalHeight += offset
|
||||
totalHeight2 += nodeTotalHeight
|
||||
// 同步更新后代节点
|
||||
|
||||
@@ -50,4 +50,4 @@ export const transformToMarkdown = root => {
|
||||
true
|
||||
)
|
||||
return content
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,7 +4,8 @@ import {
|
||||
getTextFromHtml,
|
||||
imgToDataUrl,
|
||||
parseDataUrl,
|
||||
getImageSize
|
||||
getImageSize,
|
||||
isUndef
|
||||
} from '../utils/index'
|
||||
|
||||
// 解析.xmind文件
|
||||
@@ -49,7 +50,7 @@ const transformXmind = async (content, files) => {
|
||||
let walk = async (node, newNode) => {
|
||||
newNode.data = {
|
||||
// 节点内容
|
||||
text: node.title
|
||||
text: isUndef(node.title) ? '' : node.title
|
||||
}
|
||||
// 节点备注
|
||||
if (node.notes) {
|
||||
@@ -146,9 +147,10 @@ const transformOldXmind = content => {
|
||||
let walk = (node, newNode) => {
|
||||
let nodeElements = node.elements
|
||||
let nodeTitle = getItemByName(nodeElements, 'title')
|
||||
nodeTitle = nodeTitle && nodeTitle.elements && nodeTitle.elements[0].text
|
||||
newNode.data = {
|
||||
// 节点内容
|
||||
text: nodeTitle && nodeTitle.elements && nodeTitle.elements[0].text
|
||||
text: isUndef(nodeTitle) ? '' : nodeTitle
|
||||
}
|
||||
try {
|
||||
// 节点备注
|
||||
@@ -189,7 +191,7 @@ const transformOldXmind = content => {
|
||||
if (_children && _children.elements && _children.elements.length > 0) {
|
||||
_children.elements.forEach(item => {
|
||||
if (item.name === 'topics') {
|
||||
(item.elements || []).forEach(item2 => {
|
||||
;(item.elements || []).forEach(item2 => {
|
||||
let newChild = {}
|
||||
newNode.children.push(newChild)
|
||||
walk(item2, newChild)
|
||||
@@ -215,6 +217,7 @@ const transformToXmind = async (data, name) => {
|
||||
let waitLoadImageList = []
|
||||
let walk = async (node, newNode, isRoot) => {
|
||||
let newData = {
|
||||
id: node.data.uid,
|
||||
structureClass: 'org.xmind.ui.logic.right',
|
||||
title: getTextFromHtml(node.data.text), // 节点文本
|
||||
children: {
|
||||
@@ -242,20 +245,20 @@ const transformToXmind = async (data, name) => {
|
||||
}
|
||||
// 图片
|
||||
if (node.data.image) {
|
||||
// 处理异步逻辑
|
||||
let resolve = null
|
||||
let promise = new Promise(_resolve => {
|
||||
resolve = _resolve
|
||||
})
|
||||
waitLoadImageList.push(promise)
|
||||
try {
|
||||
// 处理异步逻辑
|
||||
let resolve = null
|
||||
let promise = new Promise(_resolve => {
|
||||
resolve = _resolve
|
||||
})
|
||||
waitLoadImageList.push(promise)
|
||||
let imgName = ''
|
||||
let imgData = node.data.image
|
||||
// 网络图片要先转换成data:url
|
||||
if (/^https?:\/\//.test(node.data.image)) {
|
||||
// base64之外的其他图片要先转换成data:url
|
||||
if (!/^data:/.test(node.data.image)) {
|
||||
imgData = await imgToDataUrl(node.data.image)
|
||||
}
|
||||
// 从data:url中解析出图片类型和base64
|
||||
// 从data:url中解析出图片类型和ase64
|
||||
let dataUrlRes = parseDataUrl(imgData)
|
||||
imgName = 'image_' + imageList.length + '.' + dataUrlRes.type
|
||||
imageList.push({
|
||||
|
||||
@@ -105,7 +105,7 @@ class AssociativeLine {
|
||||
this.markerPath = add.path('M0,0 L2,5 L0,10 L10,5 Z')
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 判断关联线坐标是否变更,有变更则使用变化后的坐标,无则默认坐标
|
||||
updateAllLinesPos(node, toNode, associativeLinePoint) {
|
||||
associativeLinePoint = associativeLinePoint || {}
|
||||
@@ -149,8 +149,8 @@ class AssociativeLine {
|
||||
) {
|
||||
nodeToIds.set(cur, data.associativeLineTargets)
|
||||
}
|
||||
if (data.id) {
|
||||
idToNode.set(data.id, cur)
|
||||
if (data.uid) {
|
||||
idToNode.set(data.uid, cur)
|
||||
}
|
||||
},
|
||||
() => {},
|
||||
@@ -158,8 +158,8 @@ class AssociativeLine {
|
||||
0
|
||||
)
|
||||
nodeToIds.forEach((ids, node) => {
|
||||
ids.forEach((id, index) => {
|
||||
let toNode = idToNode.get(id)
|
||||
ids.forEach((uid, index) => {
|
||||
let toNode = idToNode.get(uid)
|
||||
if (!node || !toNode) return
|
||||
const associativeLinePoint = (node.nodeData.data.associativeLinePoint ||
|
||||
[])[index]
|
||||
@@ -234,6 +234,11 @@ class AssociativeLine {
|
||||
controlPoints
|
||||
})
|
||||
})
|
||||
// 双击进入关联线文本编辑状态
|
||||
clickPath.dblclick(() => {
|
||||
if (!this.activeLine) return
|
||||
this.showEditTextBox(text)
|
||||
})
|
||||
// 渲染关联线文字
|
||||
this.renderText(this.getText(node, toNode), path, text)
|
||||
this.lineList.push([path, clickPath, text, node, toNode])
|
||||
@@ -252,28 +257,25 @@ class AssociativeLine {
|
||||
}) {
|
||||
let { associativeLineActiveColor } = this.mindMap.themeConfig
|
||||
// 如果当前存在激活节点,那么取消激活节点
|
||||
if (this.mindMap.renderer.activeNodeList.length > 0) {
|
||||
this.clearActiveNodes()
|
||||
} else {
|
||||
// 否则清除当前的关联线的激活状态,如果有的话
|
||||
this.clearActiveLine()
|
||||
// 保存当前激活的关联线信息
|
||||
this.activeLine = [path, clickPath, text, node, toNode]
|
||||
// 让不可见的点击线显示
|
||||
clickPath.stroke({ color: associativeLineActiveColor })
|
||||
// 如果没有输入过关联线文字,那么显示默认文字
|
||||
if (!this.getText(node, toNode)) {
|
||||
this.renderText(this.mindMap.opt.defaultAssociativeLineText, path, text)
|
||||
}
|
||||
// 渲染控制点和连线
|
||||
this.renderControls(
|
||||
startPoint,
|
||||
endPoint,
|
||||
controlPoints[0],
|
||||
controlPoints[1]
|
||||
)
|
||||
this.mindMap.emit('associative_line_click', path, clickPath, node, toNode)
|
||||
this.mindMap.execCommand('CLEAR_ACTIVE_NODE')
|
||||
// 否则清除当前的关联线的激活状态,如果有的话
|
||||
this.clearActiveLine()
|
||||
// 保存当前激活的关联线信息
|
||||
this.activeLine = [path, clickPath, text, node, toNode]
|
||||
// 让不可见的点击线显示
|
||||
clickPath.stroke({ color: associativeLineActiveColor })
|
||||
// 如果没有输入过关联线文字,那么显示默认文字
|
||||
if (!this.getText(node, toNode)) {
|
||||
this.renderText(this.mindMap.opt.defaultAssociativeLineText, path, text)
|
||||
}
|
||||
// 渲染控制点和连线
|
||||
this.renderControls(
|
||||
startPoint,
|
||||
endPoint,
|
||||
controlPoints[0],
|
||||
controlPoints[1]
|
||||
)
|
||||
this.mindMap.emit('associative_line_click', path, clickPath, node, toNode)
|
||||
}
|
||||
|
||||
// 移除所有连接线
|
||||
@@ -362,7 +364,7 @@ class AssociativeLine {
|
||||
if (node.nodeData.data.isActive) {
|
||||
this.mindMap.renderer.setNodeActive(node, false)
|
||||
}
|
||||
if (node === this.creatingStartNode || this.overlapNode) {
|
||||
if (node.uid === this.creatingStartNode.uid || this.overlapNode) {
|
||||
return
|
||||
}
|
||||
let { left, top, width, height } = node
|
||||
@@ -379,7 +381,7 @@ class AssociativeLine {
|
||||
|
||||
// 完成创建连接线
|
||||
completeCreateLine(node) {
|
||||
if (this.creatingStartNode === node) return
|
||||
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)
|
||||
@@ -395,21 +397,21 @@ class AssociativeLine {
|
||||
addLine(fromNode, toNode) {
|
||||
if (!fromNode || !toNode) return
|
||||
// 目标节点如果没有id,则生成一个id
|
||||
let id = toNode.nodeData.data.id
|
||||
if (!id) {
|
||||
id = uuid()
|
||||
let uid = toNode.nodeData.data.uid
|
||||
if (!uid) {
|
||||
uid = uuid()
|
||||
this.mindMap.execCommand('SET_NODE_DATA', toNode, {
|
||||
id
|
||||
uid
|
||||
})
|
||||
}
|
||||
// 将目标节点id保存起来
|
||||
let list = fromNode.nodeData.data.associativeLineTargets || []
|
||||
// 连线节点是否存在相同的id,存在则阻止添加关联线
|
||||
const sameLine = list.some(item => item === id)
|
||||
const sameLine = list.some(item => item === uid)
|
||||
if (sameLine) {
|
||||
return
|
||||
}
|
||||
list.push(id)
|
||||
list.push(uid)
|
||||
// 保存控制点
|
||||
let [startPoint, endPoint] = computeNodePoints(fromNode, toNode)
|
||||
let controlPoints = computeCubicBezierPathPoints(
|
||||
@@ -433,7 +435,7 @@ class AssociativeLine {
|
||||
]
|
||||
let associativeLinePoint = fromNode.nodeData.data.associativeLinePoint || []
|
||||
// 记录关联的起始|结束坐标
|
||||
associativeLinePoint[list.length - 1] = [{ startPoint, endPoint }]
|
||||
associativeLinePoint[list.length - 1] = { startPoint, endPoint }
|
||||
this.mindMap.execCommand('SET_NODE_DATA', fromNode, {
|
||||
associativeLineTargets: list,
|
||||
associativeLineTargetControlOffsets: offsetList,
|
||||
@@ -458,7 +460,7 @@ class AssociativeLine {
|
||||
let newAssociativeLineText = {}
|
||||
if (associativeLineText) {
|
||||
Object.keys(associativeLineText).forEach(item => {
|
||||
if (item !== toNode.nodeData.data.id) {
|
||||
if (item !== toNode.nodeData.data.uid) {
|
||||
newAssociativeLineText[item] = associativeLineText[item]
|
||||
}
|
||||
})
|
||||
@@ -483,13 +485,6 @@ class AssociativeLine {
|
||||
})
|
||||
}
|
||||
|
||||
// 清除当前激活的节点
|
||||
clearActiveNodes() {
|
||||
if (this.mindMap.renderer.activeNodeList.length > 0) {
|
||||
this.mindMap.execCommand('CLEAR_ACTIVE_NODE')
|
||||
}
|
||||
}
|
||||
|
||||
// 清除激活的线
|
||||
clearActiveLine() {
|
||||
if (this.activeLine) {
|
||||
|
||||
322
simple-mind-map/src/plugins/Cooperate.js
Normal file
322
simple-mind-map/src/plugins/Cooperate.js
Normal file
@@ -0,0 +1,322 @@
|
||||
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.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.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('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
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 设置用户信息
|
||||
/**
|
||||
* {
|
||||
* 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)
|
||||
if (node) {
|
||||
callback(node, userInfo)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
// 清除之前的数据
|
||||
walk(this.currentAwarenessData, (node, userInfo) => {
|
||||
node.removeUser(userInfo)
|
||||
})
|
||||
// 设置当前数据
|
||||
const data = Array.from(this.awareness.getStates().values())
|
||||
this.currentAwarenessData = data
|
||||
walk(data, (node, userInfo) => {
|
||||
// 不显示自己
|
||||
if (userInfo.id === this.userInfo.id) return
|
||||
node.addUser(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) {
|
||||
if (map[parentUid]) {
|
||||
map[parentUid].children.push(node)
|
||||
} else {
|
||||
map[parentUid] = {
|
||||
data: simpleDeepClone(data[parentUid].data),
|
||||
children: [node]
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
return res
|
||||
}
|
||||
|
||||
// 插件被移除前做的事情
|
||||
beforePluginRemove() {
|
||||
this.unBindEvent()
|
||||
}
|
||||
|
||||
// 插件被卸载前做的事情
|
||||
beforePluginDestroy() {
|
||||
this.unBindEvent()
|
||||
}
|
||||
}
|
||||
|
||||
Cooperate.instanceName = 'cooperate'
|
||||
|
||||
export default Cooperate
|
||||
@@ -1,4 +1,4 @@
|
||||
import { bfsWalk, throttle } from '../utils'
|
||||
import { bfsWalk, throttle, getTopAncestorsFomNodeList } from '../utils'
|
||||
import Base from '../layouts/Base'
|
||||
|
||||
// 节点拖动插件
|
||||
@@ -13,8 +13,14 @@ class Drag extends Base {
|
||||
|
||||
// 复位
|
||||
reset() {
|
||||
// 当前拖拽节点
|
||||
this.node = null
|
||||
// 是否正在跳转中
|
||||
this.isDragging = false
|
||||
// 鼠标按下的节点
|
||||
this.mousedownNode = null
|
||||
// 被拖拽中的节点列表
|
||||
this.beingDragNodeList = []
|
||||
// 当前画布节点列表
|
||||
this.nodeList = []
|
||||
// 当前重叠节点
|
||||
this.overlapNode = null
|
||||
// 当前上一个同级节点
|
||||
@@ -25,16 +31,11 @@ class Drag extends Base {
|
||||
this.drawTransform = null
|
||||
// 克隆节点
|
||||
this.clone = null
|
||||
// 连接线
|
||||
this.line = null
|
||||
// 同级位置占位符
|
||||
this.placeholder = null
|
||||
// 鼠标按下位置和节点左上角的偏移量
|
||||
this.offsetX = 0
|
||||
this.offsetY = 0
|
||||
// 克隆节点左上角的坐标
|
||||
this.cloneNodeLeft = 0
|
||||
this.cloneNodeTop = 0
|
||||
// 当前鼠标是否按下
|
||||
this.isMousedown = false
|
||||
// 拖拽的鼠标位置变量
|
||||
@@ -51,45 +52,43 @@ class Drag extends Base {
|
||||
bindEvent() {
|
||||
this.checkOverlapNode = throttle(this.checkOverlapNode, 300, this)
|
||||
this.mindMap.on('node_mousedown', (node, e) => {
|
||||
if (this.mindMap.opt.readonly || node.isGeneralization) {
|
||||
return
|
||||
}
|
||||
if (e.which !== 1 || node.isRoot) {
|
||||
// 只读模式、不是鼠标左键按下、按下的是概要节点或根节点直接返回
|
||||
if (
|
||||
this.mindMap.opt.readonly ||
|
||||
e.which !== 1 ||
|
||||
node.isGeneralization ||
|
||||
node.isRoot
|
||||
) {
|
||||
return
|
||||
}
|
||||
e.preventDefault()
|
||||
// 计算鼠标按下的位置距离节点左上角的距离
|
||||
this.drawTransform = this.mindMap.draw.transform()
|
||||
let { scaleX, scaleY, translateX, translateY } = this.drawTransform
|
||||
let { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
|
||||
this.offsetX = x - (node.left * scaleX + translateX)
|
||||
this.offsetY = y - (node.top * scaleY + translateY)
|
||||
this.node = node
|
||||
this.isMousedown = true
|
||||
// 记录鼠标按下时的节点
|
||||
this.mousedownNode = node
|
||||
// 记录鼠标按下的坐标
|
||||
const { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
|
||||
this.mouseDownX = x
|
||||
this.mouseDownY = y
|
||||
})
|
||||
this.mindMap.on('mousemove', e => {
|
||||
if (this.mindMap.opt.readonly) {
|
||||
if (this.mindMap.opt.readonly || !this.isMousedown) {
|
||||
return
|
||||
}
|
||||
if (!this.isMousedown) {
|
||||
return
|
||||
}
|
||||
this.mindMap.emit('node_dragging', this.node)
|
||||
e.preventDefault()
|
||||
let { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
|
||||
const { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
|
||||
this.mouseMoveX = x
|
||||
this.mouseMoveY = y
|
||||
// 还没开始移动时鼠标位移过小不认为是拖拽
|
||||
if (
|
||||
!this.isDragging &&
|
||||
Math.abs(x - this.mouseDownX) <= this.checkDragOffset &&
|
||||
Math.abs(y - this.mouseDownY) <= this.checkDragOffset &&
|
||||
!this.node.isDrag
|
||||
Math.abs(y - this.mouseDownY) <= this.checkDragOffset
|
||||
) {
|
||||
return
|
||||
}
|
||||
this.mindMap.renderer.clearAllActive()
|
||||
this.onMove(x, y)
|
||||
this.mindMap.emit('node_dragging')
|
||||
this.handleStartMove()
|
||||
this.onMove(x, y, e)
|
||||
})
|
||||
this.onMouseup = this.onMouseup.bind(this)
|
||||
this.mindMap.on('node_mouseup', this.onMouseup)
|
||||
@@ -102,27 +101,48 @@ class Drag extends Base {
|
||||
return
|
||||
}
|
||||
this.isMousedown = false
|
||||
let _nodeIsDrag = this.node.isDrag
|
||||
this.node.isDrag = false
|
||||
this.node.show()
|
||||
// 恢复被拖拽节点的临时设置
|
||||
this.beingDragNodeList.forEach(node => {
|
||||
node.setOpacity(1)
|
||||
node.showChildren()
|
||||
node.endDrag()
|
||||
})
|
||||
this.removeCloneNode()
|
||||
let overlapNodeUid = this.overlapNode ? this.overlapNode.nodeData.data.uid : ''
|
||||
let overlapNodeUid = this.overlapNode
|
||||
? this.overlapNode.nodeData.data.uid
|
||||
: ''
|
||||
let prevNodeUid = this.prevNode ? this.prevNode.nodeData.data.uid : ''
|
||||
let nextNodeUid = this.nextNode ? this.nextNode.nodeData.data.uid : ''
|
||||
// 存在重叠子节点,则移动作为其子节点
|
||||
if (this.overlapNode) {
|
||||
this.mindMap.renderer.setNodeActive(this.overlapNode, false)
|
||||
this.mindMap.execCommand('MOVE_NODE_TO', this.node, this.overlapNode)
|
||||
this.mindMap.execCommand(
|
||||
'MOVE_NODE_TO',
|
||||
this.beingDragNodeList,
|
||||
this.overlapNode
|
||||
)
|
||||
} else if (this.prevNode) {
|
||||
// 存在前一个相邻节点,作为其下一个兄弟节点
|
||||
this.mindMap.renderer.setNodeActive(this.prevNode, false)
|
||||
this.mindMap.execCommand('INSERT_AFTER', this.node, this.prevNode)
|
||||
this.mindMap.execCommand(
|
||||
'INSERT_AFTER',
|
||||
this.beingDragNodeList,
|
||||
this.prevNode
|
||||
)
|
||||
} else if (this.nextNode) {
|
||||
// 存在下一个相邻节点,作为其前一个兄弟节点
|
||||
this.mindMap.renderer.setNodeActive(this.nextNode, false)
|
||||
this.mindMap.execCommand('INSERT_BEFORE', this.node, this.nextNode)
|
||||
} else if (_nodeIsDrag && this.mindMap.opt.enableFreeDrag) {
|
||||
// 自定义位置
|
||||
this.mindMap.execCommand(
|
||||
'INSERT_BEFORE',
|
||||
this.beingDragNodeList,
|
||||
this.nextNode
|
||||
)
|
||||
} else if (
|
||||
this.clone &&
|
||||
this.mindMap.opt.enableFreeDrag &&
|
||||
this.beingDragNodeList.length === 1
|
||||
) {
|
||||
// 如果只拖拽了一个节点,那么设置自定义位置
|
||||
let { x, y } = this.mindMap.toPos(
|
||||
e.clientX - this.offsetX,
|
||||
e.clientY - this.offsetY
|
||||
@@ -130,11 +150,16 @@ class Drag extends Base {
|
||||
let { scaleX, scaleY, translateX, translateY } = this.drawTransform
|
||||
x = (x - translateX) / scaleX
|
||||
y = (y - translateY) / scaleY
|
||||
this.node.left = x
|
||||
this.node.top = y
|
||||
this.node.customLeft = x
|
||||
this.node.customTop = y
|
||||
this.mindMap.execCommand('SET_NODE_CUSTOM_POSITION', this.node, x, y)
|
||||
this.mousedownNode.left = x
|
||||
this.mousedownNode.top = y
|
||||
this.mousedownNode.customLeft = x
|
||||
this.mousedownNode.customTop = y
|
||||
this.mindMap.execCommand(
|
||||
'SET_NODE_CUSTOM_POSITION',
|
||||
this.mousedownNode,
|
||||
x,
|
||||
y
|
||||
)
|
||||
this.mindMap.render()
|
||||
}
|
||||
this.reset()
|
||||
@@ -145,24 +170,131 @@ class Drag extends Base {
|
||||
})
|
||||
}
|
||||
|
||||
// 拖动中
|
||||
onMove(x, y, e) {
|
||||
if (!this.isMousedown) {
|
||||
return
|
||||
}
|
||||
// 更新克隆节点的位置
|
||||
let { scaleX, scaleY, translateX, translateY } = this.drawTransform
|
||||
let cloneNodeLeft = x - this.offsetX
|
||||
let cloneNodeTop = y - this.offsetY
|
||||
x = (cloneNodeLeft - translateX) / scaleX
|
||||
y = (cloneNodeTop - translateY) / scaleY
|
||||
let t = this.clone.transform()
|
||||
this.clone.translate(x - t.translateX, y - t.translateY)
|
||||
// 检测新位置
|
||||
this.checkOverlapNode()
|
||||
// 如果注册了多选节点插件,那么复用它的边缘自动移动画布功能
|
||||
if (this.mindMap.opt.autoMoveWhenMouseInEdgeOnDrag && this.mindMap.select) {
|
||||
this.drawTransform = this.mindMap.draw.transform()
|
||||
this.mindMap.select.clearAutoMoveTimer()
|
||||
this.mindMap.select.onMove(e.clientX, e.clientY)
|
||||
}
|
||||
}
|
||||
|
||||
// 开始拖拽时初始化一些数据
|
||||
handleStartMove() {
|
||||
if (!this.isDragging) {
|
||||
this.isDragging = true
|
||||
// 鼠标按下的节点
|
||||
let node = this.mousedownNode
|
||||
// 计算鼠标按下的位置距离节点左上角的距离
|
||||
this.drawTransform = this.mindMap.draw.transform()
|
||||
let { scaleX, scaleY, translateX, translateY } = this.drawTransform
|
||||
this.offsetX = this.mouseDownX - (node.left * scaleX + translateX)
|
||||
this.offsetY = this.mouseDownY - (node.top * scaleY + translateY)
|
||||
// 如果鼠标按下的节点是激活节点,那么保存当前所有激活的节点
|
||||
if (node.nodeData.data.isActive) {
|
||||
// 找出这些激活节点中的最顶层节点
|
||||
this.beingDragNodeList = getTopAncestorsFomNodeList(
|
||||
// 过滤掉根节点和概要节点
|
||||
this.mindMap.renderer.activeNodeList.filter(item => {
|
||||
return !item.isRoot && !item.isGeneralization
|
||||
})
|
||||
)
|
||||
} else {
|
||||
// 否则只拖拽按下的节点
|
||||
this.beingDragNodeList = [node]
|
||||
}
|
||||
// 将节点树转为节点数组
|
||||
this.nodeTreeToList()
|
||||
// 创建克隆节点
|
||||
this.createCloneNode()
|
||||
// 清除当前所有激活的节点
|
||||
this.mindMap.renderer.clearAllActive()
|
||||
}
|
||||
}
|
||||
|
||||
// 节点由树转换成数组,从子节点到根节点
|
||||
nodeTreeToList() {
|
||||
const list = []
|
||||
bfsWalk(this.mindMap.renderer.root, node => {
|
||||
// 过滤掉当前被拖拽的节点
|
||||
if (this.checkIsInBeingDragNodeList(node)) {
|
||||
return
|
||||
}
|
||||
if (!list[node.layerIndex]) {
|
||||
list[node.layerIndex] = []
|
||||
}
|
||||
list[node.layerIndex].push(node)
|
||||
})
|
||||
this.nodeList = list.reduceRight((res, cur) => {
|
||||
return [...res, ...cur]
|
||||
}, [])
|
||||
}
|
||||
|
||||
// 创建克隆节点
|
||||
createCloneNode() {
|
||||
if (!this.clone) {
|
||||
// 节点
|
||||
this.clone = this.node.group.clone()
|
||||
this.clone.opacity(0.5)
|
||||
const {
|
||||
dragMultiNodeRectConfig,
|
||||
dragPlaceholderRectFill,
|
||||
dragOpacityConfig
|
||||
} = this.mindMap.opt
|
||||
const {
|
||||
width: rectWidth,
|
||||
height: rectHeight,
|
||||
fill: rectFill
|
||||
} = dragMultiNodeRectConfig
|
||||
const node = this.beingDragNodeList[0]
|
||||
const lineColor = node.style.merge('lineColor', true)
|
||||
// 如果当前被拖拽的节点数量大于1,那么创建一个矩形示意
|
||||
if (this.beingDragNodeList.length > 1) {
|
||||
this.clone = this.draw
|
||||
.rect()
|
||||
.size(rectWidth, rectHeight)
|
||||
.radius(rectHeight / 2)
|
||||
.fill({
|
||||
color: rectFill || lineColor
|
||||
})
|
||||
this.offsetX = rectWidth / 2
|
||||
this.offsetY = rectHeight / 2
|
||||
} else {
|
||||
// 否则克隆当前的节点
|
||||
this.clone = node.group.clone()
|
||||
// 删除展开收起按钮元素
|
||||
const expandEl = this.clone.findOne('.smm-expand-btn')
|
||||
if (expandEl) {
|
||||
expandEl.remove()
|
||||
}
|
||||
this.mindMap.draw.add(this.clone)
|
||||
}
|
||||
this.clone.opacity(dragOpacityConfig.cloneNodeOpacity)
|
||||
this.clone.css('z-index', 99999)
|
||||
this.node.isDrag = true
|
||||
this.node.hide()
|
||||
// 连接线
|
||||
this.line = this.draw.path()
|
||||
this.line.opacity(0.5)
|
||||
this.node.styleLine(this.line, this.node)
|
||||
// 同级位置占位符
|
||||
// 同级位置提示元素
|
||||
this.placeholder = this.draw.rect().fill({
|
||||
color: this.node.style.merge('lineColor', true)
|
||||
color: dragPlaceholderRectFill || lineColor
|
||||
})
|
||||
// 当前被拖拽的节点的临时设置
|
||||
this.beingDragNodeList.forEach(node => {
|
||||
// 降低透明度
|
||||
node.setOpacity(dragOpacityConfig.beingDragNodeOpacity)
|
||||
// 隐藏连线及下级节点
|
||||
node.hideChildren()
|
||||
// 设置拖拽状态
|
||||
node.startDrag()
|
||||
})
|
||||
this.mindMap.draw.add(this.clone)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -172,125 +304,52 @@ class Drag extends Base {
|
||||
return
|
||||
}
|
||||
this.clone.remove()
|
||||
this.line.remove()
|
||||
this.placeholder.remove()
|
||||
}
|
||||
|
||||
// 拖动中
|
||||
onMove(x, y) {
|
||||
if (!this.isMousedown) {
|
||||
return
|
||||
}
|
||||
this.createCloneNode()
|
||||
let { scaleX, scaleY, translateX, translateY } = this.drawTransform
|
||||
this.cloneNodeLeft = x - this.offsetX
|
||||
this.cloneNodeTop = y - this.offsetY
|
||||
x = (this.cloneNodeLeft - translateX) / scaleX
|
||||
y = (this.cloneNodeTop - translateY) / scaleY
|
||||
let t = this.clone.transform()
|
||||
this.clone.translate(x - t.translateX, y - t.translateY)
|
||||
// 连接线
|
||||
let parent = this.node.parent
|
||||
this.line.plot(
|
||||
this.quadraticCurvePath(
|
||||
parent.left + parent.width / 2,
|
||||
parent.top + parent.height / 2,
|
||||
x + this.node.width / 2,
|
||||
y + this.node.height / 2
|
||||
)
|
||||
)
|
||||
this.checkOverlapNode()
|
||||
}
|
||||
|
||||
// 检测重叠节点
|
||||
checkOverlapNode() {
|
||||
if (!this.drawTransform || !this.placeholder) {
|
||||
return
|
||||
}
|
||||
const { nodeDragPlaceholderMaxSize } = this.mindMap.opt
|
||||
let x = this.mouseMoveX
|
||||
let y = this.mouseMoveY
|
||||
this.overlapNode = null
|
||||
this.prevNode = null
|
||||
this.nextNode = null
|
||||
this.placeholder.size(0, 0)
|
||||
bfsWalk(this.mindMap.renderer.root, node => {
|
||||
this.nodeList.forEach(node => {
|
||||
if (node.nodeData.data.isActive) {
|
||||
this.mindMap.renderer.setNodeActive(node, false)
|
||||
}
|
||||
if (node === this.node || this.node.isParent(node)) {
|
||||
return
|
||||
}
|
||||
if (this.overlapNode || (this.prevNode && this.nextNode)) {
|
||||
return
|
||||
}
|
||||
let nodeRect = this.getNodeRect(node)
|
||||
let oneFourthHeight = nodeRect.height / 4
|
||||
// 前一个和后一个节点
|
||||
let checkList = node.parent ? node.parent.children.filter((item) => {
|
||||
return item !== this.node
|
||||
}) : []
|
||||
let index = checkList.findIndex((item) => {
|
||||
return item === node
|
||||
})
|
||||
let prevBrother = null
|
||||
let nextBrother = null
|
||||
if (index !== -1) {
|
||||
if (index - 1 >= 0) {
|
||||
prevBrother = checkList[index - 1]
|
||||
}
|
||||
if (index + 1 <= checkList.length - 1) {
|
||||
nextBrother = checkList[index + 1]
|
||||
}
|
||||
}
|
||||
// 和前一个兄弟节点的距离
|
||||
let prevBrotherOffset = 0
|
||||
if (prevBrother) {
|
||||
let prevNodeRect = this.getNodeRect(prevBrother)
|
||||
prevBrotherOffset = nodeRect.top - prevNodeRect.bottom
|
||||
// 间距小于10就当它不存在
|
||||
prevBrotherOffset = prevBrotherOffset >= this.minOffset ? prevBrotherOffset / 2 : 0
|
||||
} else {
|
||||
// 没有前一个兄弟节点,那么假设和前一个节点的距离为20
|
||||
prevBrotherOffset = this.minOffset
|
||||
}
|
||||
// 和后一个兄弟节点的距离
|
||||
let nextBrotherOffset = 0
|
||||
if (nextBrother) {
|
||||
let nextNodeRect = this.getNodeRect(nextBrother)
|
||||
nextBrotherOffset = nextNodeRect.top - nodeRect.bottom
|
||||
nextBrotherOffset = nextBrotherOffset >= this.minOffset ? nextBrotherOffset / 2 : 0
|
||||
} else {
|
||||
nextBrotherOffset = this.minOffset
|
||||
}
|
||||
if (nodeRect.left <= x && nodeRect.right >= x) {
|
||||
// 检测兄弟节点位置
|
||||
if (!this.overlapNode && !this.prevNode && !this.nextNode && !node.isRoot) {
|
||||
let checkIsPrevNode = nextBrotherOffset > 0 ? // 距离下一个兄弟节点的距离大于0
|
||||
y > nodeRect.bottom && y <= (nodeRect.bottom + nextBrotherOffset) : // 那么在当前节点外底部判断
|
||||
y >= nodeRect.bottom - oneFourthHeight && y <= nodeRect.bottom // 否则在当前节点内底部1/4区间判断
|
||||
let checkIsNextNode = prevBrotherOffset > 0 ? // 距离上一个兄弟节点的距离大于0
|
||||
y < nodeRect.top && y >= (nodeRect.top - prevBrotherOffset) : // 那么在当前节点外底部判断
|
||||
y >= nodeRect.top && y <= nodeRect.top + oneFourthHeight
|
||||
if (checkIsPrevNode) {
|
||||
this.prevNode = node
|
||||
let size = nextBrotherOffset > 0 ? Math.min(nextBrotherOffset, nodeDragPlaceholderMaxSize) : 5
|
||||
this.placeholder.size(node.width, size).move(nodeRect.originLeft, nodeRect.originBottom)
|
||||
} else if (checkIsNextNode) {
|
||||
this.nextNode = node
|
||||
let size = prevBrotherOffset > 0 ? Math.min(prevBrotherOffset, nodeDragPlaceholderMaxSize) : 5
|
||||
this.placeholder.size(node.width, size).move(nodeRect.originLeft, nodeRect.originTop - size)
|
||||
}
|
||||
}
|
||||
// 检测是否重叠
|
||||
if (!this.overlapNode && !this.prevNode && !this.nextNode) {
|
||||
if (
|
||||
nodeRect.top + (prevBrotherOffset > 0 ? 0 : oneFourthHeight) <= y &&
|
||||
nodeRect.bottom - (nextBrotherOffset > 0 ? 0 : oneFourthHeight) >= y
|
||||
) {
|
||||
this.overlapNode = node
|
||||
}
|
||||
}
|
||||
switch (this.mindMap.opt.layout) {
|
||||
case 'logicalStructure':
|
||||
this.handleLogicalStructure(node)
|
||||
break
|
||||
case 'mindMap':
|
||||
this.handleMindMap(node)
|
||||
break
|
||||
case 'organizationStructure':
|
||||
this.handleOrganizationStructure(node)
|
||||
break
|
||||
case 'catalogOrganization':
|
||||
this.handleCatalogOrganization(node)
|
||||
break
|
||||
case 'timeline':
|
||||
this.handleTimeLine(node)
|
||||
break
|
||||
case 'timeline2':
|
||||
this.handleTimeLine2(node)
|
||||
break
|
||||
case 'verticalTimeline':
|
||||
this.handleLogicalStructure(node)
|
||||
break
|
||||
case 'fishbone':
|
||||
this.handleFishbone(node)
|
||||
break
|
||||
default:
|
||||
this.handleLogicalStructure(node)
|
||||
}
|
||||
})
|
||||
if (this.overlapNode) {
|
||||
@@ -298,6 +357,299 @@ class Drag extends Base {
|
||||
}
|
||||
}
|
||||
|
||||
// 垂直方向比较
|
||||
// isReverse:是否反向
|
||||
handleVerticalCheck(node, checkList, isReverse = false) {
|
||||
let x = this.mouseMoveX
|
||||
let y = this.mouseMoveY
|
||||
let nodeRect = this.getNodeRect(node)
|
||||
if (isReverse) {
|
||||
checkList = checkList.reverse()
|
||||
}
|
||||
let oneFourthHeight = nodeRect.height / 4
|
||||
let { prevBrotherOffset, nextBrotherOffset } =
|
||||
this.getNodeDistanceToSiblingNode(checkList, node, nodeRect, 'v')
|
||||
if (nodeRect.left <= x && nodeRect.right >= x) {
|
||||
// 检测兄弟节点位置
|
||||
if (
|
||||
!this.overlapNode &&
|
||||
!this.prevNode &&
|
||||
!this.nextNode &&
|
||||
!node.isRoot
|
||||
) {
|
||||
let checkIsPrevNode =
|
||||
nextBrotherOffset > 0 // 距离下一个兄弟节点的距离大于0
|
||||
? y > nodeRect.bottom && y <= nodeRect.bottom + nextBrotherOffset // 那么在当前节点外底部判断
|
||||
: y >= nodeRect.bottom - oneFourthHeight && y <= nodeRect.bottom // 否则在当前节点内底部1/4区间判断
|
||||
let checkIsNextNode =
|
||||
prevBrotherOffset > 0 // 距离上一个兄弟节点的距离大于0
|
||||
? y < nodeRect.top && y >= nodeRect.top - prevBrotherOffset // 那么在当前节点外底部判断
|
||||
: y >= nodeRect.top && y <= nodeRect.top + oneFourthHeight
|
||||
if (checkIsPrevNode) {
|
||||
if (isReverse) {
|
||||
this.nextNode = node
|
||||
} else {
|
||||
this.prevNode = node
|
||||
}
|
||||
let size = this.formatPlaceholderSize(nextBrotherOffset)
|
||||
this.setPlaceholderRect(
|
||||
node.width,
|
||||
size,
|
||||
nodeRect.originLeft,
|
||||
nodeRect.originBottom
|
||||
)
|
||||
} else if (checkIsNextNode) {
|
||||
if (isReverse) {
|
||||
this.prevNode = node
|
||||
} else {
|
||||
this.nextNode = node
|
||||
}
|
||||
let size = this.formatPlaceholderSize(prevBrotherOffset)
|
||||
this.setPlaceholderRect(
|
||||
node.width,
|
||||
size,
|
||||
nodeRect.originLeft,
|
||||
nodeRect.originTop - size
|
||||
)
|
||||
}
|
||||
}
|
||||
// 检测是否重叠
|
||||
this.checkIsOverlap({
|
||||
node,
|
||||
dir: 'v',
|
||||
prevBrotherOffset,
|
||||
nextBrotherOffset,
|
||||
size: oneFourthHeight,
|
||||
pos: y,
|
||||
nodeRect
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 水平方向比较
|
||||
handleHorizontalCheck(node, checkList) {
|
||||
let x = this.mouseMoveX
|
||||
let y = this.mouseMoveY
|
||||
let nodeRect = this.getNodeRect(node)
|
||||
let oneFourthWidth = nodeRect.width / 4
|
||||
let { prevBrotherOffset, nextBrotherOffset } =
|
||||
this.getNodeDistanceToSiblingNode(checkList, node, nodeRect, 'h')
|
||||
if (nodeRect.top <= y && nodeRect.bottom >= y) {
|
||||
// 检测兄弟节点位置
|
||||
if (
|
||||
!this.overlapNode &&
|
||||
!this.prevNode &&
|
||||
!this.nextNode &&
|
||||
!node.isRoot
|
||||
) {
|
||||
let checkIsPrevNode =
|
||||
nextBrotherOffset > 0 // 距离下一个兄弟节点的距离大于0
|
||||
? x < nodeRect.right + nextBrotherOffset && x >= nodeRect.right // 那么在当前节点外底部判断
|
||||
: x <= nodeRect.right && x >= nodeRect.right - oneFourthWidth // 否则在当前节点内底部1/4区间判断
|
||||
let checkIsNextNode =
|
||||
prevBrotherOffset > 0 // 距离上一个兄弟节点的距离大于0
|
||||
? x > nodeRect.left - prevBrotherOffset && x <= nodeRect.left // 那么在当前节点外底部判断
|
||||
: x <= nodeRect.left + oneFourthWidth && x >= nodeRect.left
|
||||
if (checkIsPrevNode) {
|
||||
this.prevNode = node
|
||||
let size = this.formatPlaceholderSize(nextBrotherOffset)
|
||||
this.setPlaceholderRect(
|
||||
size,
|
||||
node.height,
|
||||
nodeRect.originRight,
|
||||
nodeRect.originTop
|
||||
)
|
||||
} else if (checkIsNextNode) {
|
||||
this.nextNode = node
|
||||
let size = this.formatPlaceholderSize(prevBrotherOffset)
|
||||
this.setPlaceholderRect(
|
||||
size,
|
||||
node.height,
|
||||
nodeRect.originLeft - size,
|
||||
nodeRect.originTop
|
||||
)
|
||||
}
|
||||
}
|
||||
// 检测是否重叠
|
||||
this.checkIsOverlap({
|
||||
node,
|
||||
dir: 'h',
|
||||
prevBrotherOffset,
|
||||
nextBrotherOffset,
|
||||
size: oneFourthWidth,
|
||||
pos: x,
|
||||
nodeRect
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 获取节点距前一个和后一个节点的距离
|
||||
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 prevBrother = null
|
||||
let nextBrother = null
|
||||
if (index !== -1) {
|
||||
if (index - 1 >= 0) {
|
||||
prevBrother = checkList[index - 1]
|
||||
}
|
||||
if (index + 1 <= checkList.length - 1) {
|
||||
nextBrother = checkList[index + 1]
|
||||
}
|
||||
}
|
||||
// 和前一个兄弟节点的距离
|
||||
let prevBrotherOffset = 0
|
||||
if (prevBrother) {
|
||||
let prevNodeRect = this.getNodeRect(prevBrother)
|
||||
prevBrotherOffset = nodeRect[dir1] - prevNodeRect[dir2]
|
||||
// 间距小于10就当它不存在
|
||||
prevBrotherOffset =
|
||||
prevBrotherOffset >= this.minOffset ? prevBrotherOffset / 2 : 0
|
||||
} else {
|
||||
// 没有前一个兄弟节点,那么假设和前一个节点的距离为20
|
||||
prevBrotherOffset = this.minOffset
|
||||
}
|
||||
// 和后一个兄弟节点的距离
|
||||
let nextBrotherOffset = 0
|
||||
if (nextBrother) {
|
||||
let nextNodeRect = this.getNodeRect(nextBrother)
|
||||
nextBrotherOffset = nextNodeRect[dir1] - nodeRect[dir2]
|
||||
nextBrotherOffset =
|
||||
nextBrotherOffset >= this.minOffset ? nextBrotherOffset / 2 : 0
|
||||
} else {
|
||||
nextBrotherOffset = this.minOffset
|
||||
}
|
||||
return {
|
||||
prevBrotherOffset,
|
||||
nextBrotherOffset
|
||||
}
|
||||
}
|
||||
|
||||
// 处理提示元素的大小
|
||||
formatPlaceholderSize(size) {
|
||||
const { nodeDragPlaceholderMaxSize } = this.mindMap.opt
|
||||
return size > 0 ? Math.min(size, nodeDragPlaceholderMaxSize) : 5
|
||||
}
|
||||
|
||||
// 设置提示元素的大小和位置
|
||||
setPlaceholderRect(w, h, x, y) {
|
||||
this.placeholder.size(w, h).move(x, y)
|
||||
}
|
||||
|
||||
// 检测是否重叠
|
||||
checkIsOverlap({
|
||||
node,
|
||||
dir,
|
||||
prevBrotherOffset,
|
||||
nextBrotherOffset,
|
||||
size,
|
||||
pos,
|
||||
nodeRect
|
||||
}) {
|
||||
let dir1 = dir === 'v' ? 'top' : 'left'
|
||||
let dir2 = dir === 'v' ? 'bottom' : 'right'
|
||||
if (!this.overlapNode && !this.prevNode && !this.nextNode) {
|
||||
if (
|
||||
nodeRect[dir1] + (prevBrotherOffset > 0 ? 0 : size) <= pos &&
|
||||
nodeRect[dir2] - (nextBrotherOffset > 0 ? 0 : size) >= pos
|
||||
) {
|
||||
this.overlapNode = node
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 处理逻辑结构图
|
||||
handleLogicalStructure(node) {
|
||||
const checkList = this.commonGetNodeCheckList(node)
|
||||
this.handleVerticalCheck(node, checkList)
|
||||
}
|
||||
|
||||
// 处理思维导图
|
||||
handleMindMap(node) {
|
||||
const checkList = node.parent
|
||||
? node.parent.children.filter(item => {
|
||||
let sameDir = true
|
||||
if (node.layerIndex === 1) {
|
||||
sameDir = item.dir === node.dir
|
||||
}
|
||||
return sameDir && !this.checkIsInBeingDragNodeList(item)
|
||||
})
|
||||
: []
|
||||
this.handleVerticalCheck(node, checkList)
|
||||
}
|
||||
|
||||
// 处理组织结构图
|
||||
handleOrganizationStructure(node) {
|
||||
const checkList = this.commonGetNodeCheckList(node)
|
||||
this.handleHorizontalCheck(node, checkList)
|
||||
}
|
||||
|
||||
// 处理目录组织图
|
||||
handleCatalogOrganization(node) {
|
||||
const checkList = this.commonGetNodeCheckList(node)
|
||||
if (node.layerIndex === 1) {
|
||||
this.handleHorizontalCheck(node, checkList)
|
||||
} else {
|
||||
this.handleVerticalCheck(node, checkList)
|
||||
}
|
||||
}
|
||||
|
||||
// 处理时间轴
|
||||
handleTimeLine(node) {
|
||||
let checkList = this.commonGetNodeCheckList(node)
|
||||
if (node.layerIndex === 1) {
|
||||
this.handleHorizontalCheck(node, checkList)
|
||||
} else {
|
||||
this.handleVerticalCheck(node, checkList)
|
||||
}
|
||||
}
|
||||
|
||||
// 处理时间轴2
|
||||
handleTimeLine2(node) {
|
||||
let checkList = this.commonGetNodeCheckList(node)
|
||||
if (node.layerIndex === 1) {
|
||||
this.handleHorizontalCheck(node, checkList)
|
||||
} else {
|
||||
// 处于上方的三级节点需要特殊处理,因为节点排列方向反向了
|
||||
if (node.dir === 'top' && node.layerIndex === 2) {
|
||||
this.handleVerticalCheck(node, checkList, true)
|
||||
} else {
|
||||
this.handleVerticalCheck(node, checkList)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 处理鱼骨图
|
||||
handleFishbone(node) {
|
||||
let checkList = node.parent
|
||||
? node.parent.children.filter(item => {
|
||||
return item.layerIndex > 1 && !this.checkIsInBeingDragNodeList(item)
|
||||
})
|
||||
: []
|
||||
if (node.layerIndex === 1) {
|
||||
this.handleHorizontalCheck(node, checkList)
|
||||
} else {
|
||||
// 处于上方的三级节点需要特殊处理,因为节点排列方向反向了
|
||||
if (node.dir === 'top' && node.layerIndex === 2) {
|
||||
this.handleVerticalCheck(node, checkList, true)
|
||||
} else {
|
||||
this.handleVerticalCheck(node, checkList)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 获取节点的兄弟节点列表通用方法
|
||||
commonGetNodeCheckList(node) {
|
||||
return node.parent
|
||||
? [...node.parent.children].filter(item => {
|
||||
return !this.checkIsInBeingDragNodeList(item)
|
||||
})
|
||||
: []
|
||||
}
|
||||
|
||||
// 计算节点的位置尺寸信息
|
||||
getNodeRect(node) {
|
||||
let { scaleX, scaleY, translateX, translateY } = this.drawTransform
|
||||
@@ -305,6 +657,7 @@ class Drag extends Base {
|
||||
let originLeft = left
|
||||
let originTop = top
|
||||
let originBottom = top + height
|
||||
let originRight = left + width
|
||||
let right = (left + width) * scaleX + translateX
|
||||
let bottom = (top + height) * scaleY + translateY
|
||||
left = left * scaleX + translateX
|
||||
@@ -318,9 +671,17 @@ class Drag extends Base {
|
||||
bottom,
|
||||
originLeft,
|
||||
originTop,
|
||||
originBottom
|
||||
originBottom,
|
||||
originRight
|
||||
}
|
||||
}
|
||||
|
||||
// 检查某个节点是否在被拖拽节点内
|
||||
checkIsInBeingDragNodeList(node) {
|
||||
return !!this.beingDragNodeList.find(item => {
|
||||
return item.uid === node.uid || item.isParent(node)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
Drag.instanceName = 'drag'
|
||||
|
||||
@@ -41,7 +41,7 @@ class Export {
|
||||
let task = imageList.map(async item => {
|
||||
let imgUlr = item.attr('href') || item.attr('xlink:href')
|
||||
// 已经是data:URL形式不用转换
|
||||
if (/^data:/.test(imgUlr)) {
|
||||
if (/^data:/.test(imgUlr) || imgUlr === 'none') {
|
||||
return
|
||||
}
|
||||
let imgData = await imgToDataUrl(imgUlr)
|
||||
@@ -58,7 +58,13 @@ class Export {
|
||||
}
|
||||
|
||||
// svg转png
|
||||
svgToPng(svgSrc, transparent, checkRotate = () => { return false }) {
|
||||
svgToPng(
|
||||
svgSrc,
|
||||
transparent,
|
||||
checkRotate = () => {
|
||||
return false
|
||||
}
|
||||
) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const img = new Image()
|
||||
// 跨域图片需要添加这个属性,否则画布被污染了无法导出图片
|
||||
@@ -66,7 +72,10 @@ class Export {
|
||||
img.onload = async () => {
|
||||
try {
|
||||
const canvas = document.createElement('canvas')
|
||||
const dpr = Math.max(window.devicePixelRatio, this.mindMap.opt.minExportImgCanvasScale)
|
||||
const dpr = Math.max(
|
||||
window.devicePixelRatio,
|
||||
this.mindMap.opt.minExportImgCanvasScale
|
||||
)
|
||||
const imgWidth = img.width
|
||||
const imgHeight = img.height
|
||||
// 如果宽比高长,那么旋转90度
|
||||
@@ -185,7 +194,9 @@ class Export {
|
||||
// 覆盖html默认的样式
|
||||
let foreignObjectList = node.find('foreignObject')
|
||||
if (foreignObjectList.length > 0) {
|
||||
foreignObjectList[0].add(SVG(`<style>${ this.mindMap.opt.resetCss }</style>`))
|
||||
foreignObjectList[0].add(
|
||||
SVG(`<style>${this.mindMap.opt.resetCss}</style>`)
|
||||
)
|
||||
}
|
||||
str = node.svg()
|
||||
// 使用其他库(html2canvas、dom-to-image-more等)来完成导出
|
||||
@@ -204,11 +215,7 @@ class Export {
|
||||
// 转换成data:url数据
|
||||
let svgUrl = await readBlob(blob)
|
||||
// 绘制到canvas上
|
||||
let res = await this.svgToPng(
|
||||
svgUrl,
|
||||
transparent,
|
||||
checkRotate
|
||||
)
|
||||
let res = await this.svgToPng(svgUrl, transparent, checkRotate)
|
||||
return res
|
||||
}
|
||||
|
||||
@@ -219,7 +226,7 @@ class Export {
|
||||
}
|
||||
let img = await this.png('', false, (width, height) => {
|
||||
if (width <= a4Size.width && height && a4Size.height) return false
|
||||
return (width / height) > 1
|
||||
return width / height > 1
|
||||
})
|
||||
this.mindMap.doExportPDF.pdf(name, img, useMultiPageExport)
|
||||
}
|
||||
@@ -243,7 +250,9 @@ class Export {
|
||||
if (this.mindMap.richText) {
|
||||
let foreignObjectList = node.find('foreignObject')
|
||||
if (foreignObjectList.length > 0) {
|
||||
foreignObjectList[0].add(SVG(`<style>${ this.mindMap.opt.resetCss }</style>`))
|
||||
foreignObjectList[0].add(
|
||||
SVG(`<style>${this.mindMap.opt.resetCss}</style>`)
|
||||
)
|
||||
}
|
||||
}
|
||||
node.first().before(SVG(`<title>${name}</title>`))
|
||||
|
||||
@@ -40,7 +40,14 @@ class ExportPDF {
|
||||
w = a4Size.width
|
||||
h = a4Size.width / imageRatio
|
||||
}
|
||||
pdf.addImage(img, 'PNG', (a4Size.width - w) / 2, (a4Size.height - h) / 2, w, h)
|
||||
pdf.addImage(
|
||||
img,
|
||||
'PNG',
|
||||
(a4Size.width - w) / 2,
|
||||
(a4Size.height - h) / 2,
|
||||
w,
|
||||
h
|
||||
)
|
||||
pdf.save(name)
|
||||
}
|
||||
image.src = img
|
||||
|
||||
53
simple-mind-map/src/plugins/Formula.js
Normal file
53
simple-mind-map/src/plugins/Formula.js
Normal file
@@ -0,0 +1,53 @@
|
||||
import katex from 'katex'
|
||||
import Quill from 'quill'
|
||||
|
||||
// 数学公式支持插件
|
||||
// 该插件在富文本模式下可用
|
||||
class Formula {
|
||||
// 构造函数
|
||||
constructor(opt) {
|
||||
this.opt = opt
|
||||
this.mindMap = opt.mindMap
|
||||
window.katex = katex
|
||||
this.extendQuill()
|
||||
}
|
||||
|
||||
// 修改formula格式工具
|
||||
extendQuill() {
|
||||
const QuillFormula = Quill.import('formats/formula')
|
||||
|
||||
class CustomFormulaBlot extends QuillFormula {
|
||||
static create(value) {
|
||||
let node = super.create(value)
|
||||
if (typeof value === 'string') {
|
||||
katex.render(value, node, {
|
||||
throwOnError: false,
|
||||
errorColor: '#f00',
|
||||
output: 'mathml' // 增加该配置,默认只输出公式
|
||||
})
|
||||
node.setAttribute('data-value', value)
|
||||
}
|
||||
return node
|
||||
}
|
||||
}
|
||||
|
||||
Quill.register('formats/formula', CustomFormulaBlot, true)
|
||||
}
|
||||
|
||||
// 给指定的节点插入指定公式
|
||||
insertFormulaToNode(node, formula) {
|
||||
let richTextPlugin = this.mindMap.richText
|
||||
richTextPlugin.showEditText(node)
|
||||
richTextPlugin.quill.insertEmbed(
|
||||
richTextPlugin.quill.getLength() - 1,
|
||||
'formula',
|
||||
formula
|
||||
)
|
||||
richTextPlugin.setTextStyleIfNotRichText(richTextPlugin.node)
|
||||
richTextPlugin.hideEditText([node])
|
||||
}
|
||||
}
|
||||
|
||||
Formula.instanceName = 'formula'
|
||||
|
||||
export default Formula
|
||||
@@ -94,7 +94,7 @@ class KeyboardNavigation {
|
||||
// 遍历节点树
|
||||
bfsWalk(this.mindMap.renderer.root, node => {
|
||||
// 跳过当前聚焦的节点
|
||||
if (node === currentActiveNode) return
|
||||
if (node.uid === currentActiveNode.uid) return
|
||||
// 当前遍历到的节点的位置信息
|
||||
let rect = this.getNodeRect(node)
|
||||
let { left, top, right, bottom } = rect
|
||||
@@ -131,7 +131,7 @@ class KeyboardNavigation {
|
||||
checkNodeDis
|
||||
}) {
|
||||
bfsWalk(this.mindMap.renderer.root, node => {
|
||||
if (node === currentActiveNode) return
|
||||
if (node.uid === currentActiveNode.uid) return
|
||||
let rect = this.getNodeRect(node)
|
||||
let { left, top, right, bottom } = rect
|
||||
let match = false
|
||||
@@ -173,7 +173,7 @@ class KeyboardNavigation {
|
||||
let cX = (currentActiveNodeRect.right + currentActiveNodeRect.left) / 2
|
||||
let cY = (currentActiveNodeRect.bottom + currentActiveNodeRect.top) / 2
|
||||
bfsWalk(this.mindMap.renderer.root, node => {
|
||||
if (node === currentActiveNode) return
|
||||
if (node.uid === currentActiveNode.uid) return
|
||||
let rect = this.getNodeRect(node)
|
||||
let { left, top, right, bottom } = rect
|
||||
// 遍历到的节点的中心点
|
||||
@@ -232,4 +232,4 @@ class KeyboardNavigation {
|
||||
|
||||
KeyboardNavigation.instanceName = 'keyboardNavigation'
|
||||
|
||||
export default KeyboardNavigation
|
||||
export default KeyboardNavigation
|
||||
|
||||
@@ -1,4 +1,8 @@
|
||||
import { isWhite, isTransparent, getVisibleColorFromTheme } from '../utils/index'
|
||||
import {
|
||||
isWhite,
|
||||
isTransparent,
|
||||
getVisibleColorFromTheme
|
||||
} from '../utils/index'
|
||||
|
||||
// 小地图插件
|
||||
class MiniMap {
|
||||
@@ -78,7 +82,7 @@ class MiniMap {
|
||||
viewBoxStyle.left = miniMapBoxLeft + actWidth
|
||||
}
|
||||
|
||||
Object.keys(viewBoxStyle).forEach((key) => {
|
||||
Object.keys(viewBoxStyle).forEach(key => {
|
||||
viewBoxStyle[key] = viewBoxStyle[key] + 'px'
|
||||
})
|
||||
|
||||
@@ -106,7 +110,7 @@ class MiniMap {
|
||||
}
|
||||
let children = svg.children()
|
||||
if (children && children.length > 0) {
|
||||
children.forEach((node) => {
|
||||
children.forEach(node => {
|
||||
this.removeNodeContent(node)
|
||||
})
|
||||
}
|
||||
|
||||
@@ -49,7 +49,7 @@ class NodeImgAdjust {
|
||||
// 如果当前正在拖动调整中那么直接返回
|
||||
if (this.isMousedown || this.isAdjusted || this.mindMap.opt.readonly) return
|
||||
// 如果在当前节点内移动,以及自定义元素已经是显示状态,那么直接返回
|
||||
if (this.node === node && this.isShowHandleEl) return
|
||||
if (this.node && this.node.uid === node.uid && this.isShowHandleEl) return
|
||||
// 更新当前节点信息
|
||||
this.node = node
|
||||
this.img = img
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { nodeDataNoStylePropList } from '../constants/constant'
|
||||
import { checkIsNodeStyleDataKey } from '../utils/index'
|
||||
|
||||
// 格式刷插件
|
||||
class Painter {
|
||||
@@ -49,13 +49,13 @@ class Painter {
|
||||
!this.isInPainter ||
|
||||
!this.painterNode ||
|
||||
!node ||
|
||||
node === this.painterNode
|
||||
node.uid === this.painterNode.uid
|
||||
)
|
||||
return
|
||||
const style = {}
|
||||
const painterNodeData = this.painterNode.nodeData.data
|
||||
Object.keys(painterNodeData).forEach(key => {
|
||||
if (!nodeDataNoStylePropList.includes(key)) {
|
||||
if (checkIsNodeStyleDataKey(key)) {
|
||||
style[key] = painterNodeData[key]
|
||||
}
|
||||
})
|
||||
|
||||
@@ -5,7 +5,8 @@ import {
|
||||
walk,
|
||||
getTextFromHtml,
|
||||
isWhite,
|
||||
getVisibleColorFromTheme
|
||||
getVisibleColorFromTheme,
|
||||
isUndef
|
||||
} from '../utils'
|
||||
import { CONSTANTS } from '../constants/constant'
|
||||
|
||||
@@ -237,7 +238,10 @@ class RichText {
|
||||
}
|
||||
if (!node.nodeData.data.richText) {
|
||||
// 还不是富文本的情况
|
||||
let text = node.nodeData.data.text.split(/\n/gim).join('<br>')
|
||||
let text = ''
|
||||
if (!isUndef(node.nodeData.data.text)) {
|
||||
text = String(node.nodeData.data.text).split(/\n/gim).join('<br>')
|
||||
}
|
||||
let html = `<p>${text}</p>`
|
||||
this.textEditNode.innerHTML = this.cacheEditingText || html
|
||||
} else {
|
||||
@@ -249,7 +253,9 @@ class RichText {
|
||||
this.showTextEdit = true
|
||||
// 如果是刚创建的节点,那么默认全选,否则普通激活不全选,除非selectTextOnEnterEditText配置为true
|
||||
// 在selectTextOnEnterEditText时,如果是在keydown事件进入的节点编辑,也不需要全选
|
||||
this.focus(isInserting || (selectTextOnEnterEditText && !isFromKeyDown) ? 0 : null)
|
||||
this.focus(
|
||||
isInserting || (selectTextOnEnterEditText && !isFromKeyDown) ? 0 : null
|
||||
)
|
||||
if (!node.nodeData.data.richText) {
|
||||
// 如果是非富文本的情况,需要手动应用文本样式
|
||||
this.setTextStyleIfNotRichText(node)
|
||||
@@ -373,7 +379,7 @@ class RichText {
|
||||
}
|
||||
})
|
||||
// 拦截粘贴,只允许粘贴纯文本
|
||||
this.quill.clipboard.addMatcher(Node.TEXT_NODE, (node) => {
|
||||
this.quill.clipboard.addMatcher(Node.TEXT_NODE, node => {
|
||||
let style = this.getPasteTextStyle()
|
||||
return new Delta().insert(node.data, style)
|
||||
})
|
||||
@@ -614,7 +620,7 @@ class RichText {
|
||||
// 处理导入数据
|
||||
handleSetData(data) {
|
||||
let walk = root => {
|
||||
if (!root.data.richText) {
|
||||
if (root.data && !root.data.richText) {
|
||||
root.data.richText = true
|
||||
root.data.resetRichText = true
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { throttle } from '../utils/index'
|
||||
import { CONSTANTS } from '../constants/constant'
|
||||
|
||||
// 滚动条插件
|
||||
class Scrollbar {
|
||||
@@ -9,45 +10,13 @@ class Scrollbar {
|
||||
width: 0, // 水平滚动条的容器宽度
|
||||
height: 0 // 垂直滚动条的容器高度
|
||||
}
|
||||
// 思维导图实际高度
|
||||
this.chartHeight = 0
|
||||
this.chartWidth = 0
|
||||
this.reset()
|
||||
this.bindEvent()
|
||||
}
|
||||
|
||||
// 绑定事件
|
||||
bindEvent() {
|
||||
this.onMousemove = this.onMousemove.bind(this)
|
||||
this.onMouseup = this.onMouseup.bind(this)
|
||||
this.onNodeTreeRenderEnd = this.onNodeTreeRenderEnd.bind(this)
|
||||
this.onViewDataChange = throttle(this.onViewDataChange, 16, this) // 加个节流
|
||||
this.mindMap.on('mousemove', this.onMousemove)
|
||||
this.mindMap.on('mouseup', this.onMouseup)
|
||||
this.mindMap.on('node_tree_render_end', this.onNodeTreeRenderEnd)
|
||||
this.mindMap.on('view_data_change', this.onViewDataChange)
|
||||
}
|
||||
|
||||
// 解绑事件
|
||||
unBindEvent() {
|
||||
this.mindMap.off('mousemove', this.onMousemove)
|
||||
this.mindMap.off('mouseup', this.onMouseup)
|
||||
this.mindMap.off('node_tree_render_end', this.onNodeTreeRenderEnd)
|
||||
this.mindMap.off('view_data_change', this.onViewDataChange)
|
||||
}
|
||||
|
||||
// 每次渲染后需要更新滚动条
|
||||
onNodeTreeRenderEnd() {
|
||||
this.emitEvent()
|
||||
}
|
||||
|
||||
// 思维导图视图数据改变需要更新滚动条
|
||||
onViewDataChange() {
|
||||
this.emitEvent()
|
||||
}
|
||||
|
||||
// 发送滚动条改变事件
|
||||
emitEvent() {
|
||||
this.mindMap.emit('scrollbar_change')
|
||||
}
|
||||
|
||||
// 复位数据
|
||||
reset() {
|
||||
// 当前拖拽的滚动条类型
|
||||
@@ -57,13 +26,41 @@ class Scrollbar {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
this.startViewPos = {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
// 思维导图实际高度
|
||||
this.chartHeight = 0
|
||||
this.chartWidth = 0
|
||||
// 鼠标按下时,滚动条位置
|
||||
this.mousedownScrollbarPos = 0
|
||||
}
|
||||
|
||||
// 绑定事件
|
||||
bindEvent() {
|
||||
this.onMousemove = this.onMousemove.bind(this)
|
||||
this.onMouseup = this.onMouseup.bind(this)
|
||||
this.updateScrollbar = this.updateScrollbar.bind(this)
|
||||
this.updateScrollbar = throttle(this.updateScrollbar, 16, this) // 加个节流
|
||||
this.mindMap.on('mousemove', this.onMousemove)
|
||||
this.mindMap.on('mouseup', this.onMouseup)
|
||||
this.mindMap.on('node_tree_render_end', this.updateScrollbar)
|
||||
this.mindMap.on('view_data_change', this.updateScrollbar)
|
||||
}
|
||||
|
||||
// 解绑事件
|
||||
unBindEvent() {
|
||||
this.mindMap.off('mousemove', this.onMousemove)
|
||||
this.mindMap.off('mouseup', this.onMouseup)
|
||||
this.mindMap.off('node_tree_render_end', this.updateScrollbar)
|
||||
this.mindMap.off('view_data_change', this.updateScrollbar)
|
||||
}
|
||||
|
||||
// 渲染后、数据改变需要更新滚动条
|
||||
updateScrollbar() {
|
||||
// 当前正在拖拽滚动条时不需要更新
|
||||
if (this.isMousedown) return
|
||||
const res = this.calculationScrollbar()
|
||||
this.emitEvent(res)
|
||||
}
|
||||
|
||||
// 发送滚动条改变事件
|
||||
emitEvent(data) {
|
||||
this.mindMap.emit('scrollbar_change', data)
|
||||
}
|
||||
|
||||
// 设置滚动条容器的大小,指滚动条容器的大小,对于水平滚动条,即宽度,对于垂直滚动条,即高度
|
||||
@@ -78,9 +75,7 @@ class Scrollbar {
|
||||
// 减去画布距离浏览器窗口左上角的距离
|
||||
const elRect = this.mindMap.elRect
|
||||
rect.x -= elRect.left
|
||||
rect.x2 -= elRect.left
|
||||
rect.y -= elRect.top
|
||||
rect.y2 -= elRect.top
|
||||
|
||||
// 垂直滚动条
|
||||
const canvasHeight = this.mindMap.height // 画布高度
|
||||
@@ -129,46 +124,129 @@ class Scrollbar {
|
||||
return res
|
||||
}
|
||||
|
||||
// 滚动条鼠标按下事件处理函数
|
||||
onMousedown(e, type) {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
this.currentScrollType = type
|
||||
this.isMousedown = true
|
||||
this.mousedownPos = {
|
||||
x: e.clientX,
|
||||
y: e.clientY
|
||||
}
|
||||
// 保存视图当前的偏移量
|
||||
let transformData = this.mindMap.view.getTransformData()
|
||||
this.startViewPos = {
|
||||
x: transformData.state.x,
|
||||
y: transformData.state.y
|
||||
// 保存滚动条当前的位置
|
||||
const styles = window.getComputedStyle(e.target)
|
||||
if (type === CONSTANTS.SCROLL_BAR_DIR.VERTICAL) {
|
||||
this.mousedownScrollbarPos = Number.parseFloat(styles.top)
|
||||
} else {
|
||||
this.mousedownScrollbarPos = Number.parseFloat(styles.left)
|
||||
}
|
||||
}
|
||||
|
||||
// 鼠标移动事件处理函数
|
||||
onMousemove(e) {
|
||||
if (!this.isMousedown) {
|
||||
return
|
||||
}
|
||||
if (this.currentScrollType === 'vertical') {
|
||||
const oy = e.clientY - this.mousedownPos.y
|
||||
const oyPercentage = -oy / this.scrollbarWrapSize.height
|
||||
const oyPx = oyPercentage * this.chartHeight
|
||||
// 在视图最初偏移量上累加更新量
|
||||
this.mindMap.view.translateYTo(oyPx + this.startViewPos.y)
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
if (this.currentScrollType === CONSTANTS.SCROLL_BAR_DIR.VERTICAL) {
|
||||
const oy = e.clientY - this.mousedownPos.y + this.mousedownScrollbarPos
|
||||
this.updateMindMapView(CONSTANTS.SCROLL_BAR_DIR.VERTICAL, oy)
|
||||
} else {
|
||||
const ox = e.clientX - this.mousedownPos.x
|
||||
const oxPercentage = -ox / this.scrollbarWrapSize.width
|
||||
const oxPx = oxPercentage * this.chartWidth
|
||||
// 在视图最初偏移量上累加更新量
|
||||
this.mindMap.view.translateXTo(oxPx + this.startViewPos.x)
|
||||
const ox = e.clientX - this.mousedownPos.x + this.mousedownScrollbarPos
|
||||
this.updateMindMapView(CONSTANTS.SCROLL_BAR_DIR.HORIZONTAL, ox)
|
||||
}
|
||||
}
|
||||
|
||||
// 鼠标松开事件处理函数
|
||||
onMouseup() {
|
||||
this.isMousedown = false
|
||||
this.reset()
|
||||
}
|
||||
|
||||
// 更新视图
|
||||
updateMindMapView(type, offset) {
|
||||
const scrollbarData = this.calculationScrollbar()
|
||||
const t = this.mindMap.draw.transform()
|
||||
const drawRect = this.mindMap.draw.rbox()
|
||||
const rootRect = this.mindMap.renderer.root.group.rbox()
|
||||
if (type === CONSTANTS.SCROLL_BAR_DIR.VERTICAL) {
|
||||
// 滚动条新位置
|
||||
let oy = offset
|
||||
// 判断是否达到首尾
|
||||
if (oy <= 0) {
|
||||
oy = 0
|
||||
}
|
||||
let max =
|
||||
((100 - scrollbarData.vertical.height) / 100) *
|
||||
this.scrollbarWrapSize.height
|
||||
if (oy >= max) {
|
||||
oy = max
|
||||
}
|
||||
// 转换成百分比
|
||||
const oyPercentage = (oy / this.scrollbarWrapSize.height) * 100
|
||||
// 转换成相对于图形高度的距离
|
||||
const oyPx = (-oyPercentage / 100) * this.chartHeight
|
||||
// 节点中心点到图形最上方的距离
|
||||
const yOffset = rootRect.y - drawRect.y
|
||||
// 内边距
|
||||
const paddingY = this.mindMap.height / 2
|
||||
// 图形新位置
|
||||
let chartTop = oyPx + yOffset - paddingY * t.scaleY + paddingY
|
||||
this.mindMap.view.translateYTo(chartTop)
|
||||
this.emitEvent({
|
||||
horizontal: scrollbarData.horizontal,
|
||||
vertical: {
|
||||
top: oyPercentage,
|
||||
height: scrollbarData.vertical.height
|
||||
}
|
||||
})
|
||||
} else {
|
||||
// 滚动条新位置
|
||||
let ox = offset
|
||||
// 判断是否达到首尾
|
||||
if (ox <= 0) {
|
||||
ox = 0
|
||||
}
|
||||
let max =
|
||||
((100 - scrollbarData.horizontal.width) / 100) *
|
||||
this.scrollbarWrapSize.width
|
||||
if (ox >= max) {
|
||||
ox = max
|
||||
}
|
||||
// 转换成百分比
|
||||
const oxPercentage = (ox / this.scrollbarWrapSize.width) * 100
|
||||
// 转换成相对于图形高度的距离
|
||||
const oxPx = (-oxPercentage / 100) * this.chartWidth
|
||||
// 节点中心点到图形最左边的距离
|
||||
const xOffset = rootRect.x - drawRect.x
|
||||
// 内边距
|
||||
const paddingX = this.mindMap.width / 2
|
||||
// 图形新位置
|
||||
let chartLeft = oxPx + xOffset - paddingX * t.scaleX + paddingX
|
||||
this.mindMap.view.translateXTo(chartLeft)
|
||||
this.emitEvent({
|
||||
vertical: scrollbarData.vertical,
|
||||
horizontal: {
|
||||
left: oxPercentage,
|
||||
width: scrollbarData.horizontal.width
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 滚动条的点击事件
|
||||
onClick(e, type) {
|
||||
let offset = 0
|
||||
if (type === CONSTANTS.SCROLL_BAR_DIR.VERTICAL) {
|
||||
offset = e.clientY - e.currentTarget.getBoundingClientRect().top
|
||||
} else {
|
||||
offset = e.clientX - e.currentTarget.getBoundingClientRect().left
|
||||
}
|
||||
this.updateMindMapView(type, offset)
|
||||
}
|
||||
|
||||
// 插件被卸载前做的事情
|
||||
beforePluginDestroy() {
|
||||
this.unBindEvent()
|
||||
|
||||
@@ -1,4 +1,9 @@
|
||||
import { bfsWalk, getTextFromHtml, isUndef, replaceHtmlText } from '../utils/index'
|
||||
import {
|
||||
bfsWalk,
|
||||
getTextFromHtml,
|
||||
isUndef,
|
||||
replaceHtmlText
|
||||
} from '../utils/index'
|
||||
|
||||
// 搜索插件
|
||||
class Search {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { bfsWalk, throttle } from '../utils'
|
||||
import { bfsWalk, throttle, checkTwoRectIsOverlap } from '../utils'
|
||||
|
||||
// 节点选择插件
|
||||
class Select {
|
||||
@@ -54,8 +54,40 @@ class Select {
|
||||
) {
|
||||
return
|
||||
}
|
||||
clearTimeout(this.autoMoveTimer)
|
||||
this.onMove(x, y)
|
||||
this.clearAutoMoveTimer()
|
||||
this.onMove(
|
||||
e.clientX,
|
||||
e.clientY,
|
||||
() => {
|
||||
this.isSelecting = true
|
||||
// 绘制矩形
|
||||
this.rect.plot([
|
||||
[this.mouseDownX, this.mouseDownY],
|
||||
[this.mouseMoveX, this.mouseDownY],
|
||||
[this.mouseMoveX, this.mouseMoveY],
|
||||
[this.mouseDownX, this.mouseMoveY]
|
||||
])
|
||||
this.checkInNodes()
|
||||
},
|
||||
(dir, step) => {
|
||||
switch (dir) {
|
||||
case 'left':
|
||||
this.mouseDownX += step
|
||||
break
|
||||
case 'top':
|
||||
this.mouseDownY += step
|
||||
break
|
||||
case 'right':
|
||||
this.mouseDownX -= step
|
||||
break
|
||||
case 'bottom':
|
||||
this.mouseDownY -= step
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
)
|
||||
})
|
||||
this.mindMap.on('mouseup', () => {
|
||||
if (this.mindMap.opt.readonly) {
|
||||
@@ -78,79 +110,78 @@ class Select {
|
||||
|
||||
// 如果激活节点改变了,那么触发事件
|
||||
checkTriggerNodeActiveEvent() {
|
||||
let isNumChange = this.cacheActiveList.length !== this.mindMap.renderer.activeNodeList.length
|
||||
let isNumChange =
|
||||
this.cacheActiveList.length !==
|
||||
this.mindMap.renderer.activeNodeList.length
|
||||
let isNodeChange = false
|
||||
if (!isNumChange) {
|
||||
for(let i = 0; i < this.cacheActiveList.length; i++) {
|
||||
for (let i = 0; i < this.cacheActiveList.length; i++) {
|
||||
let cur = this.cacheActiveList[i]
|
||||
if (!this.mindMap.renderer.activeNodeList.find((item) => {
|
||||
return item.nodeData.data.uid === cur.nodeData.data.uid
|
||||
})){
|
||||
if (
|
||||
!this.mindMap.renderer.activeNodeList.find(item => {
|
||||
return item.nodeData.data.uid === cur.nodeData.data.uid
|
||||
})
|
||||
) {
|
||||
isNodeChange = true
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
if (isNumChange || isNodeChange) {
|
||||
this.mindMap.emit(
|
||||
'node_active',
|
||||
null,
|
||||
[...this.mindMap.renderer.activeNodeList]
|
||||
)
|
||||
this.mindMap.emit('node_active', null, [
|
||||
...this.mindMap.renderer.activeNodeList
|
||||
])
|
||||
}
|
||||
}
|
||||
|
||||
// 鼠标移动事件
|
||||
onMove(x, y) {
|
||||
this.isSelecting = true
|
||||
// 绘制矩形
|
||||
this.rect.plot([
|
||||
[this.mouseDownX, this.mouseDownY],
|
||||
[this.mouseMoveX, this.mouseDownY],
|
||||
[this.mouseMoveX, this.mouseMoveY],
|
||||
[this.mouseDownX, this.mouseMoveY]
|
||||
])
|
||||
this.checkInNodes()
|
||||
onMove(x, y, callback = () => {}, handle = () => {}) {
|
||||
callback()
|
||||
// 检测边缘移动
|
||||
let step = this.mindMap.opt.selectTranslateStep
|
||||
let limit = this.mindMap.opt.selectTranslateLimit
|
||||
let count = 0
|
||||
// 左边缘
|
||||
if (x <= this.mindMap.elRect.left + limit) {
|
||||
this.mouseDownX += step
|
||||
handle('left', step)
|
||||
this.mindMap.view.translateX(step)
|
||||
count++
|
||||
}
|
||||
// 右边缘
|
||||
if (x >= this.mindMap.elRect.right - limit) {
|
||||
this.mouseDownX -= step
|
||||
handle('right', step)
|
||||
this.mindMap.view.translateX(-step)
|
||||
count++
|
||||
}
|
||||
// 上边缘
|
||||
if (y <= this.mindMap.elRect.top + limit) {
|
||||
this.mouseDownY += step
|
||||
handle('top', step)
|
||||
this.mindMap.view.translateY(step)
|
||||
count++
|
||||
}
|
||||
// 下边缘
|
||||
if (y >= this.mindMap.elRect.bottom - limit) {
|
||||
this.mouseDownY -= step
|
||||
handle('bottom', step)
|
||||
this.mindMap.view.translateY(-step)
|
||||
count++
|
||||
}
|
||||
if (count > 0) {
|
||||
this.startAutoMove(x, y)
|
||||
this.startAutoMove(x, y, callback, handle)
|
||||
}
|
||||
}
|
||||
|
||||
// 开启自动移动
|
||||
startAutoMove(x, y) {
|
||||
startAutoMove(x, y, callback, handle) {
|
||||
this.autoMoveTimer = setTimeout(() => {
|
||||
this.onMove(x, y)
|
||||
this.onMove(x, y, callback, handle)
|
||||
}, 20)
|
||||
}
|
||||
|
||||
// 清除自动移动定时器
|
||||
clearAutoMoveTimer() {
|
||||
clearTimeout(this.autoMoveTimer)
|
||||
}
|
||||
|
||||
// 创建矩形
|
||||
createRect(x, y) {
|
||||
this.rect = this.mindMap.svg
|
||||
@@ -179,24 +210,19 @@ class Select {
|
||||
left = left * scaleX + translateX
|
||||
top = top * scaleY + translateY
|
||||
if (
|
||||
((left >= minx && left <= maxx) || (right >= minx && right <= maxx)) &&
|
||||
((top >= miny && top <= maxy) || (bottom >= miny && bottom <= maxy))
|
||||
checkTwoRectIsOverlap(minx, maxx, miny, maxy, left, right, top, bottom)
|
||||
) {
|
||||
// this.mindMap.batchExecution.push('activeNode' + node.uid, () => {
|
||||
if (node.nodeData.data.isActive) {
|
||||
return
|
||||
}
|
||||
this.mindMap.renderer.setNodeActive(node, true)
|
||||
this.mindMap.renderer.addActiveNode(node)
|
||||
// })
|
||||
} else if (node.nodeData.data.isActive) {
|
||||
// this.mindMap.batchExecution.push('activeNode' + node.uid, () => {
|
||||
if (!node.nodeData.data.isActive) {
|
||||
return
|
||||
}
|
||||
this.mindMap.renderer.setNodeActive(node, false)
|
||||
this.mindMap.renderer.removeActiveNode(node)
|
||||
// })
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@@ -109,7 +109,10 @@ class Watermark {
|
||||
|
||||
// 更新水印
|
||||
updateWatermark(config) {
|
||||
this.mindMap.opt.watermarkConfig = merge(this.mindMap.opt.watermarkConfig, config)
|
||||
this.mindMap.opt.watermarkConfig = merge(
|
||||
this.mindMap.opt.watermarkConfig,
|
||||
config
|
||||
)
|
||||
this.handleConfig(config)
|
||||
this.draw()
|
||||
}
|
||||
@@ -117,4 +120,4 @@ class Watermark {
|
||||
|
||||
Watermark.instanceName = 'watermark'
|
||||
|
||||
export default Watermark
|
||||
export default Watermark
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
import { Text } from '@svgdotjs/svg.js'
|
||||
import { getStrWithBrFromHtml } from '../../utils/index'
|
||||
import {
|
||||
getStrWithBrFromHtml,
|
||||
focusInput,
|
||||
selectAllInput
|
||||
} from '../../utils/index'
|
||||
|
||||
// 创建文字节点
|
||||
function createText(data) {
|
||||
@@ -36,7 +40,7 @@ function showEditTextBox(g) {
|
||||
this.mindMap.keyCommand.addShortcut('Enter', () => {
|
||||
this.hideEditTextBox()
|
||||
})
|
||||
|
||||
// 输入框元素没有创建过,则先创建
|
||||
if (!this.textEditNode) {
|
||||
this.textEditNode = document.createElement('div')
|
||||
this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;background-color:#fff;box-shadow: 0 0 20px rgba(0,0,0,.5);padding: 3px 5px;margin-left: -5px;margin-top: -3px;outline: none; word-break: break-all;`
|
||||
@@ -55,20 +59,27 @@ function showEditTextBox(g) {
|
||||
associativeLineTextFontFamily,
|
||||
associativeLineTextLineHeight
|
||||
} = this.mindMap.themeConfig
|
||||
let { defaultAssociativeLineText, nodeTextEditZIndex } = this.mindMap.opt
|
||||
let scale = this.mindMap.view.scale
|
||||
let [, , , node, toNode] = this.activeLine
|
||||
let textLines = (
|
||||
this.getText(node, toNode) || this.mindMap.opt.defaultAssociativeLineText
|
||||
).split(/\n/gim)
|
||||
let text = this.getText(node, toNode)
|
||||
let textLines = (text || defaultAssociativeLineText).split(/\n/gim)
|
||||
this.textEditNode.style.fontFamily = associativeLineTextFontFamily
|
||||
this.textEditNode.style.fontSize = associativeLineTextFontSize * scale + 'px'
|
||||
this.textEditNode.style.lineHeight =
|
||||
textLines.length > 1 ? associativeLineTextLineHeight : 'normal'
|
||||
this.textEditNode.style.zIndex = this.mindMap.opt.nodeTextEditZIndex
|
||||
this.textEditNode.style.zIndex = nodeTextEditZIndex
|
||||
this.textEditNode.innerHTML = textLines.join('<br>')
|
||||
this.textEditNode.style.display = 'block'
|
||||
this.updateTextEditBoxPos(g)
|
||||
this.showTextEdit = true
|
||||
// 如果是默认文本要全选输入框
|
||||
if (text === '' || text === defaultAssociativeLineText) {
|
||||
selectAllInput(this.textEditNode)
|
||||
} else {
|
||||
// 否则聚焦即可
|
||||
focusInput(this.textEditNode)
|
||||
}
|
||||
}
|
||||
|
||||
// 处理画布缩放
|
||||
@@ -94,10 +105,13 @@ function hideEditTextBox() {
|
||||
}
|
||||
let [path, , text, node, toNode] = this.activeLine
|
||||
let str = getStrWithBrFromHtml(this.textEditNode.innerHTML)
|
||||
// 如果是默认文本,那么不保存
|
||||
let isDefaultText = str === this.mindMap.opt.defaultAssociativeLineText
|
||||
str = isDefaultText ? '' : str
|
||||
this.mindMap.execCommand('SET_NODE_DATA', node, {
|
||||
associativeLineText: {
|
||||
...(node.nodeData.data.associativeLineText || {}),
|
||||
[toNode.nodeData.data.id]: str
|
||||
[toNode.nodeData.data.uid]: str
|
||||
}
|
||||
})
|
||||
this.textEditNode.style.display = 'none'
|
||||
@@ -113,16 +127,14 @@ function getText(node, toNode) {
|
||||
if (!obj) {
|
||||
return ''
|
||||
}
|
||||
return obj[toNode.nodeData.data.id] || ''
|
||||
return obj[toNode.nodeData.data.uid] || ''
|
||||
}
|
||||
|
||||
// 渲染关联线文字
|
||||
function renderText(str, path, text) {
|
||||
if (!str) return
|
||||
let {
|
||||
associativeLineTextFontSize,
|
||||
associativeLineTextLineHeight
|
||||
} = this.mindMap.themeConfig
|
||||
let { associativeLineTextFontSize, associativeLineTextLineHeight } =
|
||||
this.mindMap.themeConfig
|
||||
text.clear()
|
||||
let textArr = str.split(/\n/gim)
|
||||
textArr.forEach((item, index) => {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
// 获取目标节点在起始节点的目标数组中的索引
|
||||
export const getAssociativeLineTargetIndex = (node, toNode) => {
|
||||
return node.nodeData.data.associativeLineTargets.findIndex(item => {
|
||||
return item === toNode.nodeData.data.id
|
||||
return item === toNode.nodeData.data.uid
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { mergerIconList } from '../utils'
|
||||
|
||||
// 超链接图标
|
||||
const hyperlink =
|
||||
'<svg t="1624174958075" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7982" ><path d="M435.484444 251.733333v68.892445L295.822222 320.682667a168.504889 168.504889 0 0 0-2.844444 336.952889h142.506666v68.892444H295.822222a237.397333 237.397333 0 0 1 0-474.794667h139.662222z m248.945778 0a237.397333 237.397333 0 0 1 0 474.851556H544.654222v-69.006222l139.776 0.056889a168.504889 168.504889 0 0 0 2.844445-336.952889H544.597333V251.676444h139.776z m-25.827555 203.946667a34.474667 34.474667 0 0 1 0 68.892444H321.649778a34.474667 34.474667 0 0 1 0-68.892444h336.952889z" p-id="7983"></path></svg>'
|
||||
@@ -281,12 +283,21 @@ export const nodeIconList = [
|
||||
// 获取nodeIconList icon内容
|
||||
const getNodeIconListIcon = (name, extendIconList = []) => {
|
||||
let arr = name.split('_')
|
||||
let typeData = [...nodeIconList, ...extendIconList].find(item => {
|
||||
const iconList = mergerIconList([...nodeIconList, ...extendIconList])
|
||||
let typeData = iconList.find(item => {
|
||||
return item.type === arr[0]
|
||||
})
|
||||
return typeData.list.find(item => {
|
||||
return item.name === arr[1]
|
||||
}).icon
|
||||
if (typeData) {
|
||||
let typeName = typeData.list.find(item => {
|
||||
return item.name === arr[1]
|
||||
})
|
||||
if (typeName) {
|
||||
return typeName.icon
|
||||
}
|
||||
return ''
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
|
||||
@@ -161,12 +161,14 @@ const nodeSizeIndependenceList = [
|
||||
'backgroundSize',
|
||||
'rootLineKeepSameInCurve'
|
||||
]
|
||||
export const checkIsNodeSizeIndependenceConfig = (config) => {
|
||||
export const checkIsNodeSizeIndependenceConfig = config => {
|
||||
let keys = Object.keys(config)
|
||||
for(let i = 0; i < keys.length; i++) {
|
||||
if (!nodeSizeIndependenceList.find((item) => {
|
||||
return item === keys[i]
|
||||
})) {
|
||||
for (let i = 0; i < keys.length; i++) {
|
||||
if (
|
||||
!nodeSizeIndependenceList.find(item => {
|
||||
return item === keys[i]
|
||||
})
|
||||
) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,39 +1,38 @@
|
||||
// LRU缓存类
|
||||
export default class CRU {
|
||||
constructor(max) {
|
||||
this.max = max || 1000
|
||||
this.size = 0
|
||||
this.pool = new Map()
|
||||
}
|
||||
export default class Lru {
|
||||
constructor(max) {
|
||||
this.max = max || 1000
|
||||
this.size = 0
|
||||
this.pool = new Map()
|
||||
}
|
||||
|
||||
add(key, value) {
|
||||
// 如果该key是否已经存在,则先删除
|
||||
this.delete(key)
|
||||
this.pool.set(key, value)
|
||||
this.size++
|
||||
// 如果数量超出最大值,则删除最早的
|
||||
if (this.size > this.max) {
|
||||
let keys = this.pool.keys()
|
||||
let last = keys.next()
|
||||
this.delete(last.value)
|
||||
}
|
||||
|
||||
add(key, value) {
|
||||
// 如果该key是否已经存在,则先删除
|
||||
this.delete(key)
|
||||
this.pool.set(key, value)
|
||||
this.size++
|
||||
// 如果数量超出最大值,则删除最早的
|
||||
if (this.size > this.max) {
|
||||
let keys = this.pool.keys()
|
||||
let last = keys.next()
|
||||
this.delete(last.value)
|
||||
}
|
||||
}
|
||||
|
||||
delete(key) {
|
||||
if (this.pool.has(key)) {
|
||||
this.pool.delete(key)
|
||||
this.size--
|
||||
}
|
||||
delete(key) {
|
||||
if (this.pool.has(key)) {
|
||||
this.pool.delete(key)
|
||||
this.size--
|
||||
}
|
||||
}
|
||||
|
||||
has(key) {
|
||||
return this.pool.has(key)
|
||||
}
|
||||
has(key) {
|
||||
return this.pool.has(key)
|
||||
}
|
||||
|
||||
get(key) {
|
||||
if (this.pool.has(key)) {
|
||||
return this.pool.get(key)
|
||||
}
|
||||
get(key) {
|
||||
if (this.pool.has(key)) {
|
||||
return this.pool.get(key)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { v4 as uuidv4 } from 'uuid'
|
||||
|
||||
import { nodeDataNoStylePropList } from '../constants/constant'
|
||||
import MersenneTwister from './mersenneTwister'
|
||||
// 深度优先遍历树
|
||||
export const walk = (
|
||||
root,
|
||||
@@ -169,9 +170,10 @@ export const copyNodeTree = (
|
||||
keepId = false
|
||||
) => {
|
||||
tree.data = simpleDeepClone(root.nodeData ? root.nodeData.data : root.data)
|
||||
// 去除节点id,因为节点id不能重复
|
||||
if (tree.data.id && !keepId) delete tree.data.id
|
||||
if (tree.data.uid) delete tree.data.uid
|
||||
// 重新创建节点uid,因为节点uid不能重复
|
||||
if (!keepId) {
|
||||
tree.data.uid = createUid()
|
||||
}
|
||||
if (removeActiveState) {
|
||||
tree.data.isActive = false
|
||||
}
|
||||
@@ -464,7 +466,7 @@ export const removeHTMLEntities = str => {
|
||||
|
||||
// 获取一个数据的类型
|
||||
export const getType = data => {
|
||||
return Object.prototype.toString.call(data).slice(7, -1)
|
||||
return Object.prototype.toString.call(data).slice(8, -1)
|
||||
}
|
||||
|
||||
// 判断一个数据是否是null和undefined和空字符串
|
||||
@@ -636,7 +638,7 @@ export const isMobile = () => {
|
||||
// 获取对象改变了的的属性
|
||||
export const getObjectChangedProps = (oldObject, newObject) => {
|
||||
const res = {}
|
||||
Object.keys(newObject).forEach((prop) => {
|
||||
Object.keys(newObject).forEach(prop => {
|
||||
const oldVal = oldObject[prop]
|
||||
const newVal = newObject[prop]
|
||||
if (getType(oldVal) !== getType(newVal)) {
|
||||
@@ -656,4 +658,216 @@ export const getObjectChangedProps = (oldObject, newObject) => {
|
||||
}
|
||||
})
|
||||
return res
|
||||
}
|
||||
}
|
||||
|
||||
// 判断一个字段是否是节点数据中的样式字段
|
||||
export const checkIsNodeStyleDataKey = key => {
|
||||
// 用户自定义字段
|
||||
if (/^_/.test(key)) return false
|
||||
// 不在节点非样式字段列表里,那么就是样式字段
|
||||
if (!nodeDataNoStylePropList.includes(key)) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
// 合并图标数组
|
||||
// const data = [
|
||||
// { type: 'priority', name: '优先级图标', list: [{ name: '1', icon: 'a' }, { name: 2, icon: 'b' }] },
|
||||
// { type: 'priority', name: '优先级图标', list: [{ name: '2', icon: 'c' }, { name: 3, icon: 'd' }] },
|
||||
// ];
|
||||
|
||||
// mergerIconList(data) 结果
|
||||
|
||||
// [
|
||||
// { type: 'priority', name: '优先级图标', list: [{ name: '1', icon: 'a' }, { name: 2, icon: 'c' }, { name: 3, icon: 'd' }] },
|
||||
// ]
|
||||
export const mergerIconList = list => {
|
||||
return list.reduce((result, item) => {
|
||||
const existingItem = result.find(x => x.type === item.type)
|
||||
if (existingItem) {
|
||||
item.list.forEach(newObj => {
|
||||
const existingObj = existingItem.list.find(x => x.name === newObj.name)
|
||||
if (existingObj) {
|
||||
existingObj.icon = newObj.icon
|
||||
} else {
|
||||
existingItem.list.push(newObj)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
result.push({ ...item })
|
||||
}
|
||||
return result
|
||||
}, [])
|
||||
}
|
||||
|
||||
// 从节点实例列表里找出顶层的节点
|
||||
export const getTopAncestorsFomNodeList = list => {
|
||||
let res = []
|
||||
list.forEach(node => {
|
||||
if (
|
||||
!list.find(item => {
|
||||
return item.uid !== node.uid && item.isParent(node)
|
||||
})
|
||||
) {
|
||||
res.push(node)
|
||||
}
|
||||
})
|
||||
return res
|
||||
}
|
||||
|
||||
// 判断两个矩形是否重叠
|
||||
export const checkTwoRectIsOverlap = (
|
||||
minx1,
|
||||
maxx1,
|
||||
miny1,
|
||||
maxy1,
|
||||
minx2,
|
||||
maxx2,
|
||||
miny2,
|
||||
maxy2
|
||||
) => {
|
||||
return maxx1 > minx2 && maxx2 > minx1 && maxy1 > miny2 && maxy2 > miny1
|
||||
}
|
||||
|
||||
// 聚焦指定输入框
|
||||
export const focusInput = el => {
|
||||
let selection = window.getSelection()
|
||||
let range = document.createRange()
|
||||
range.selectNodeContents(el)
|
||||
range.collapse()
|
||||
selection.removeAllRanges()
|
||||
selection.addRange(range)
|
||||
}
|
||||
|
||||
// 聚焦全选指定输入框
|
||||
export const selectAllInput = el => {
|
||||
let selection = window.getSelection()
|
||||
let range = document.createRange()
|
||||
range.selectNodeContents(el)
|
||||
selection.removeAllRanges()
|
||||
selection.addRange(range)
|
||||
}
|
||||
|
||||
// 给指定的节点列表树数据添加附加数据,会修改原数据
|
||||
export const addDataToAppointNodes = (appointNodes, data = {}) => {
|
||||
const walk = list => {
|
||||
list.forEach(node => {
|
||||
node.data = {
|
||||
...node.data,
|
||||
...data
|
||||
}
|
||||
if (node.children && node.children.length > 0) {
|
||||
walk(node.children)
|
||||
}
|
||||
})
|
||||
}
|
||||
walk(appointNodes)
|
||||
return appointNodes
|
||||
}
|
||||
|
||||
// 给指定的节点列表树数据添加uid,如果不存在的话,会修改原数据
|
||||
export const createUidForAppointNodes = appointNodes => {
|
||||
const walk = list => {
|
||||
list.forEach(node => {
|
||||
if (!node.data) {
|
||||
node.data = {}
|
||||
}
|
||||
if (isUndef(node.data.uid)) {
|
||||
node.data.uid = createUid()
|
||||
}
|
||||
if (node.children && node.children.length > 0) {
|
||||
walk(node.children)
|
||||
}
|
||||
})
|
||||
}
|
||||
walk(appointNodes)
|
||||
return appointNodes
|
||||
}
|
||||
|
||||
// 传入一个数据,如果该数据是数组,那么返回该数组,否则返回一个以该数据为成员的数组
|
||||
export const formatDataToArray = data => {
|
||||
if (!data) return []
|
||||
return Array.isArray(data) ? data : [data]
|
||||
}
|
||||
|
||||
// 获取节点在同级里的位置索引
|
||||
export const getNodeIndex = node => {
|
||||
return node.parent
|
||||
? node.parent.children.findIndex(item => {
|
||||
return item.uid === node.uid
|
||||
})
|
||||
: 0
|
||||
}
|
||||
|
||||
// 根据内容生成颜色
|
||||
export const generateColorByContent = str => {
|
||||
let hash = 0
|
||||
for (let i = 0; i < str.length; i++) {
|
||||
hash = str.charCodeAt(i) + ((hash << 5) - hash)
|
||||
}
|
||||
// 这里使用伪随机数的原因是因为
|
||||
// 1. 如果字符串的内容差不多,根据hash生产的颜色就比较相近,不好区分,比如v1.1 v1.2,所以需要加入随机数来使得颜色能够区分开
|
||||
// 2. 普通的随机数每次数值不一样,就会导致每次新增标签原来的标签颜色就会发生改变,所以加入了这个方法,使得内容不变随机数也不变
|
||||
const rng = new MersenneTwister(hash)
|
||||
const h = rng.genrand_int32() % 360
|
||||
return 'hsla(' + h + ', 50%, 50%, 1)'
|
||||
}
|
||||
|
||||
// html转义
|
||||
export const htmlEscape = str => {
|
||||
;[
|
||||
['&', '&'],
|
||||
['<', '<'],
|
||||
['>', '>']
|
||||
].forEach(item => {
|
||||
str = str.replace(new RegExp(item[0], 'g'), item[1])
|
||||
})
|
||||
return str
|
||||
}
|
||||
|
||||
// 判断两个对象是否相同,只处理对象或数组
|
||||
export const isSameObject = (a, b) => {
|
||||
const type = getType(a)
|
||||
// a、b类型不一致,那么肯定不相同
|
||||
if (type !== getType(b)) return false
|
||||
// 如果都是对象
|
||||
if (type === 'Object') {
|
||||
const keysa = Object.keys(a)
|
||||
const keysb = Object.keys(b)
|
||||
// 对象字段数量不一样,肯定不相同
|
||||
if (keysa.length !== keysb.length) return false
|
||||
// 字段数量一样,那么需要遍历字段进行判断
|
||||
for (let i = 0; i < keysa.length; i++) {
|
||||
const key = keysa[i]
|
||||
// b没有a的一个字段,那么肯定不相同
|
||||
if (!keysb.includes(key)) return false
|
||||
// 字段名称一样,那么需要递归判断它们的值
|
||||
const isSame = isSameObject(a[key], b[key])
|
||||
if (!isSame) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
return true
|
||||
} else if (type === 'Array') {
|
||||
// 如果都是数组
|
||||
// 数组长度不一样,肯定不相同
|
||||
if (a.length !== b.length) return false
|
||||
// 长度一样,那么需要遍历进行判断
|
||||
for (let i = 0; i < a.length; i++) {
|
||||
const itema = a[i]
|
||||
const itemb = b[i]
|
||||
const typea = getType(itema)
|
||||
const typeb = getType(itemb)
|
||||
if (typea !== typeb) return false
|
||||
const isSame = isSameObject(itema, itemb)
|
||||
if (!isSame) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
return true
|
||||
} else {
|
||||
// 其他类型,直接全等判断
|
||||
return a === b
|
||||
}
|
||||
}
|
||||
|
||||
65
simple-mind-map/src/utils/mersenneTwister.js
Normal file
65
simple-mind-map/src/utils/mersenneTwister.js
Normal file
@@ -0,0 +1,65 @@
|
||||
/**
|
||||
* @description 为了保证相同的内容每次生成的随机数都是一样的,我们可以使用一个伪随机数生成器(PRNG),并使用内容的哈希值作为种子。以下是一个使用Mersenne Twister算法的PRNG的实现:
|
||||
*
|
||||
* @param {*} seed
|
||||
*/
|
||||
|
||||
export default function MersenneTwister(seed) {
|
||||
this.N = 624
|
||||
this.M = 397
|
||||
this.MATRIX_A = 0x9908b0df
|
||||
this.UPPER_MASK = 0x80000000
|
||||
this.LOWER_MASK = 0x7fffffff
|
||||
|
||||
this.mt = new Array(this.N)
|
||||
this.mti = this.N + 1
|
||||
|
||||
this.init_genrand(seed)
|
||||
}
|
||||
|
||||
MersenneTwister.prototype.init_genrand = function (s) {
|
||||
this.mt[0] = s >>> 0
|
||||
for (this.mti = 1; this.mti < this.N; this.mti++) {
|
||||
s = this.mt[this.mti - 1] ^ (this.mt[this.mti - 1] >>> 30)
|
||||
this.mt[this.mti] =
|
||||
((((s & 0xffff0000) >>> 16) * 1812433253) << 16) +
|
||||
(s & 0x0000ffff) * 1812433253 +
|
||||
this.mti
|
||||
this.mt[this.mti] >>>= 0
|
||||
}
|
||||
}
|
||||
|
||||
MersenneTwister.prototype.genrand_int32 = function () {
|
||||
var y
|
||||
var mag01 = new Array(0x0, this.MATRIX_A)
|
||||
|
||||
if (this.mti >= this.N) {
|
||||
var kk
|
||||
|
||||
if (this.mti == this.N + 1) this.init_genrand(5489)
|
||||
|
||||
for (kk = 0; kk < this.N - this.M; kk++) {
|
||||
y = (this.mt[kk] & this.UPPER_MASK) | (this.mt[kk + 1] & this.LOWER_MASK)
|
||||
this.mt[kk] = this.mt[kk + this.M] ^ (y >>> 1) ^ mag01[y & 0x1]
|
||||
}
|
||||
|
||||
for (; kk < this.N - 1; kk++) {
|
||||
y = (this.mt[kk] & this.UPPER_MASK) | (this.mt[kk + 1] & this.LOWER_MASK)
|
||||
this.mt[kk] = this.mt[kk + (this.M - this.N)] ^ (y >>> 1) ^ mag01[y & 0x1]
|
||||
}
|
||||
|
||||
y = (this.mt[this.N - 1] & this.UPPER_MASK) | (this.mt[0] & this.LOWER_MASK)
|
||||
this.mt[this.N - 1] = this.mt[this.M - 1] ^ (y >>> 1) ^ mag01[y & 0x1]
|
||||
|
||||
this.mti = 0
|
||||
}
|
||||
|
||||
y = this.mt[this.mti++]
|
||||
|
||||
y ^= y >>> 11
|
||||
y ^= (y << 7) & 0x9d2c5680
|
||||
y ^= (y << 15) & 0xefc60000
|
||||
y ^= y >>> 18
|
||||
|
||||
return y >>> 0
|
||||
}
|
||||
@@ -351,4 +351,4 @@ const drawBackgroundImageToCanvas = (
|
||||
}
|
||||
}
|
||||
|
||||
export default drawBackgroundImageToCanvas
|
||||
export default drawBackgroundImageToCanvas
|
||||
|
||||
172
simple-mind-map/types/index.d.ts
vendored
Normal file
172
simple-mind-map/types/index.d.ts
vendored
Normal file
@@ -0,0 +1,172 @@
|
||||
export default MindMap;
|
||||
declare class MindMap {
|
||||
/**
|
||||
*
|
||||
* @param {defaultOpt} opt
|
||||
*/
|
||||
constructor(opt?: {
|
||||
readonly: boolean;
|
||||
layout: string;
|
||||
fishboneDeg: number;
|
||||
theme: string;
|
||||
themeConfig: {};
|
||||
scaleRatio: number;
|
||||
mouseScaleCenterUseMousePosition: boolean;
|
||||
maxTag: number;
|
||||
expandBtnSize: number;
|
||||
imgTextMargin: number;
|
||||
textContentMargin: number;
|
||||
selectTranslateStep: number;
|
||||
selectTranslateLimit: number;
|
||||
customNoteContentShow: any;
|
||||
enableFreeDrag: boolean;
|
||||
watermarkConfig: {
|
||||
text: string;
|
||||
lineSpacing: number;
|
||||
textSpacing: number;
|
||||
angle: number;
|
||||
textStyle: {
|
||||
color: string;
|
||||
opacity: number;
|
||||
fontSize: number;
|
||||
};
|
||||
};
|
||||
textAutoWrapWidth: number;
|
||||
customHandleMousewheel: any;
|
||||
mousewheelAction: string;
|
||||
mousewheelMoveStep: number;
|
||||
mousewheelZoomActionReverse: boolean;
|
||||
defaultInsertSecondLevelNodeText: string;
|
||||
defaultInsertBelowSecondLevelNodeText: string;
|
||||
expandBtnStyle: {
|
||||
color: string;
|
||||
fill: string;
|
||||
fontSize: number;
|
||||
strokeColor: string;
|
||||
};
|
||||
expandBtnIcon: {
|
||||
open: string;
|
||||
close: string;
|
||||
};
|
||||
expandBtnNumHandler: (num: any) => any;
|
||||
isShowExpandNum: boolean;
|
||||
enableShortcutOnlyWhenMouseInSvg: boolean;
|
||||
initRootNodePosition: any;
|
||||
exportPaddingX: number;
|
||||
exportPaddingY: number;
|
||||
nodeTextEditZIndex: number;
|
||||
nodeNoteTooltipZIndex: number;
|
||||
isEndNodeTextEditOnClickOuter: boolean;
|
||||
maxHistoryCount: number;
|
||||
alwaysShowExpandBtn: boolean;
|
||||
iconList: any[];
|
||||
maxNodeCacheCount: number;
|
||||
defaultAssociativeLineText: string;
|
||||
fitPadding: number;
|
||||
enableCtrlKeyNodeSelection: boolean;
|
||||
useLeftKeySelectionRightKeyDrag: boolean;
|
||||
beforeTextEdit: any;
|
||||
isUseCustomNodeContent: boolean;
|
||||
customCreateNodeContent: any;
|
||||
customInnerElsAppendTo: any;
|
||||
nodeDragPlaceholderMaxSize: number;
|
||||
enableAutoEnterTextEditWhenKeydown: boolean;
|
||||
richTextEditFakeInPlace: boolean;
|
||||
customHandleClipboardText: any;
|
||||
disableMouseWheelZoom: boolean;
|
||||
errorHandler: (code: any, error: any) => void;
|
||||
resetCss: string;
|
||||
enableDblclickReset: boolean;
|
||||
minExportImgCanvasScale: number;
|
||||
hoverRectColor: string;
|
||||
hoverRectPadding: number;
|
||||
selectTextOnEnterEditText: boolean;
|
||||
deleteNodeActive: boolean;
|
||||
autoMoveWhenMouseInEdgeOnDrag: boolean;
|
||||
fit: boolean;
|
||||
dragMultiNodeRectConfig: {
|
||||
width: number;
|
||||
height: number;
|
||||
fill: string;
|
||||
};
|
||||
dragPlaceholderRectFill: string;
|
||||
dragOpacityConfig: {
|
||||
cloneNodeOpacity: number;
|
||||
beingDragNodeOpacity: number;
|
||||
};
|
||||
tagsColorMap: {};
|
||||
});
|
||||
opt: any;
|
||||
el: any;
|
||||
elRect: any;
|
||||
width: any;
|
||||
height: any;
|
||||
cssEl: HTMLStyleElement;
|
||||
svg: any;
|
||||
draw: any;
|
||||
event: Event;
|
||||
keyCommand: KeyCommand;
|
||||
command: Command;
|
||||
renderer: Render;
|
||||
view: View;
|
||||
batchExecution: BatchExecution;
|
||||
handleOpt(opt: any): any;
|
||||
addCss(): void;
|
||||
removeCss(): void;
|
||||
render(callback: any, source?: string): void;
|
||||
reRender(callback: any, source?: string): void;
|
||||
resize(): void;
|
||||
on(event: any, fn: any): void;
|
||||
emit(event: any, ...args: any[]): void;
|
||||
off(event: any, fn: any): void;
|
||||
initCache(): void;
|
||||
initTheme(): void;
|
||||
themeConfig: any;
|
||||
setTheme(theme: any): void;
|
||||
getTheme(): any;
|
||||
setThemeConfig(config: any): void;
|
||||
getCustomThemeConfig(): any;
|
||||
getThemeConfig(prop: any): any;
|
||||
getConfig(prop: any): any;
|
||||
updateConfig(opt?: {}): void;
|
||||
getLayout(): any;
|
||||
setLayout(layout: any): void;
|
||||
execCommand(...args: any[]): void;
|
||||
setData(data: any): void;
|
||||
setFullData(data: any): void;
|
||||
getData(withConfig: any): any;
|
||||
export(...args: any[]): Promise<any>;
|
||||
toPos(x: any, y: any): {
|
||||
x: number;
|
||||
y: number;
|
||||
};
|
||||
setMode(mode: any): void;
|
||||
getSvgData({ paddingX, paddingY }?: {
|
||||
paddingX?: number;
|
||||
paddingY?: number;
|
||||
}): {
|
||||
svg: any;
|
||||
svgHTML: any;
|
||||
rect: any;
|
||||
origWidth: any;
|
||||
origHeight: any;
|
||||
scaleX: any;
|
||||
scaleY: any;
|
||||
};
|
||||
addPlugin(plugin: any, opt: any): void;
|
||||
removePlugin(plugin: any): void;
|
||||
initPlugin(plugin: any): void;
|
||||
destroy(): void;
|
||||
}
|
||||
declare namespace MindMap {
|
||||
let 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';
|
||||
109
simple-mind-map/types/src/constants/constant.d.ts
vendored
Normal file
109
simple-mind-map/types/src/constants/constant.d.ts
vendored
Normal file
@@ -0,0 +1,109 @@
|
||||
export const themeList: {
|
||||
name: string;
|
||||
value: string;
|
||||
dark: boolean;
|
||||
}[];
|
||||
export namespace CONSTANTS {
|
||||
let CHANGE_THEME: string;
|
||||
let CHANGE_LAYOUT: string;
|
||||
let SET_DATA: string;
|
||||
let TRANSFORM_TO_NORMAL_NODE: string;
|
||||
namespace MODE {
|
||||
let READONLY: string;
|
||||
let 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;
|
||||
}
|
||||
namespace DIR {
|
||||
let UP: string;
|
||||
let LEFT: string;
|
||||
let DOWN: string;
|
||||
let RIGHT: string;
|
||||
}
|
||||
namespace KEY_DIR {
|
||||
let LEFT_1: string;
|
||||
export { LEFT_1 as LEFT };
|
||||
let UP_1: string;
|
||||
export { UP_1 as UP };
|
||||
let RIGHT_1: string;
|
||||
export { RIGHT_1 as RIGHT };
|
||||
let 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;
|
||||
}
|
||||
namespace MOUSE_WHEEL_ACTION {
|
||||
let ZOOM: string;
|
||||
let MOVE: string;
|
||||
}
|
||||
namespace INIT_ROOT_NODE_POSITION {
|
||||
let LEFT_2: string;
|
||||
export { LEFT_2 as LEFT };
|
||||
export let TOP: string;
|
||||
let RIGHT_2: string;
|
||||
export { RIGHT_2 as RIGHT };
|
||||
export let BOTTOM: string;
|
||||
export let CENTER: string;
|
||||
}
|
||||
namespace LAYOUT_GROW_DIR {
|
||||
let LEFT_3: string;
|
||||
export { LEFT_3 as LEFT };
|
||||
let TOP_1: string;
|
||||
export { TOP_1 as TOP };
|
||||
let RIGHT_3: string;
|
||||
export { RIGHT_3 as RIGHT };
|
||||
let BOTTOM_1: string;
|
||||
export { BOTTOM_1 as BOTTOM };
|
||||
}
|
||||
namespace PASTE_TYPE {
|
||||
let CLIP_BOARD: string;
|
||||
let CANVAS: string;
|
||||
}
|
||||
namespace SCROLL_BAR_DIR {
|
||||
let VERTICAL: string;
|
||||
let HORIZONTAL: string;
|
||||
}
|
||||
}
|
||||
export const initRootNodePositionMap: {
|
||||
[x: string]: number;
|
||||
};
|
||||
export const layoutList: {
|
||||
name: string;
|
||||
value: string;
|
||||
}[];
|
||||
export const layoutValueList: string[];
|
||||
export const nodeDataNoStylePropList: string[];
|
||||
export namespace commonCaches {
|
||||
let measureCustomNodeContentSizeEl: any;
|
||||
let 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;
|
||||
}
|
||||
export namespace a4Size {
|
||||
let width: number;
|
||||
let 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";
|
||||
95
simple-mind-map/types/src/constants/defaultOptions.d.ts
vendored
Normal file
95
simple-mind-map/types/src/constants/defaultOptions.d.ts
vendored
Normal file
@@ -0,0 +1,95 @@
|
||||
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;
|
||||
namespace watermarkConfig {
|
||||
let text: string;
|
||||
let lineSpacing: number;
|
||||
let textSpacing: number;
|
||||
let angle: number;
|
||||
namespace textStyle {
|
||||
let color: string;
|
||||
let opacity: number;
|
||||
let fontSize: number;
|
||||
}
|
||||
}
|
||||
let textAutoWrapWidth: number;
|
||||
let customHandleMousewheel: any;
|
||||
let mousewheelAction: string;
|
||||
let mousewheelMoveStep: number;
|
||||
let mousewheelZoomActionReverse: boolean;
|
||||
let defaultInsertSecondLevelNodeText: string;
|
||||
let defaultInsertBelowSecondLevelNodeText: string;
|
||||
namespace expandBtnStyle {
|
||||
let color_1: string;
|
||||
export { color_1 as color };
|
||||
export let fill: string;
|
||||
let fontSize_1: number;
|
||||
export { fontSize_1 as fontSize };
|
||||
export let strokeColor: string;
|
||||
}
|
||||
namespace expandBtnIcon {
|
||||
let open: string;
|
||||
let 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;
|
||||
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;
|
||||
namespace dragMultiNodeRectConfig {
|
||||
export let width: number;
|
||||
export let height: number;
|
||||
let fill_1: string;
|
||||
export { fill_1 as fill };
|
||||
}
|
||||
let dragPlaceholderRectFill: string;
|
||||
namespace dragOpacityConfig {
|
||||
let cloneNodeOpacity: number;
|
||||
let beingDragNodeOpacity: number;
|
||||
}
|
||||
let tagsColorMap: {};
|
||||
}
|
||||
19
simple-mind-map/types/src/core/command/Command.d.ts
vendored
Normal file
19
simple-mind-map/types/src/core/command/Command.d.ts
vendored
Normal file
@@ -0,0 +1,19 @@
|
||||
export default Command;
|
||||
declare class Command {
|
||||
constructor(opt?: {});
|
||||
opt: {};
|
||||
mindMap: any;
|
||||
commands: {};
|
||||
history: any[];
|
||||
activeHistoryIndex: number;
|
||||
addHistory(): void;
|
||||
clearHistory(): void;
|
||||
registerShortcutKeys(): void;
|
||||
exec(name: any, ...args: any[]): void;
|
||||
add(name: any, fn: any): void;
|
||||
remove(name: any, fn: any): void;
|
||||
back(step?: number): any;
|
||||
forward(step?: number): any;
|
||||
getCopyData(): any;
|
||||
removeDataUid(data: any): any;
|
||||
}
|
||||
26
simple-mind-map/types/src/core/command/KeyCommand.d.ts
vendored
Normal file
26
simple-mind-map/types/src/core/command/KeyCommand.d.ts
vendored
Normal file
@@ -0,0 +1,26 @@
|
||||
export default class KeyCommand {
|
||||
constructor(opt: any);
|
||||
opt: any;
|
||||
mindMap: any;
|
||||
shortcutMap: {};
|
||||
shortcutMapCache: {};
|
||||
isPause: boolean;
|
||||
isInSvg: boolean;
|
||||
pause(): void;
|
||||
recovery(): void;
|
||||
save(): void;
|
||||
restore(): void;
|
||||
bindEvent(): void;
|
||||
checkKey(e: any, key: any): boolean;
|
||||
getOriginEventCodeArr(e: any): any[];
|
||||
hasCombinationKey(e: any): any;
|
||||
getKeyCodeArr(key: any): any[];
|
||||
/**
|
||||
* Enter
|
||||
* Tab | Insert
|
||||
* Shift + a
|
||||
*/
|
||||
addShortcut(key: any, fn: any): void;
|
||||
removeShortcut(key: any, fn: any): void;
|
||||
getShortcutFn(key: any): any[];
|
||||
}
|
||||
42
simple-mind-map/types/src/core/command/keyMap.d.ts
vendored
Normal file
42
simple-mind-map/types/src/core/command/keyMap.d.ts
vendored
Normal file
@@ -0,0 +1,42 @@
|
||||
export const keyMap: {
|
||||
Backspace: number;
|
||||
Tab: number;
|
||||
Enter: number;
|
||||
Shift: number;
|
||||
Control: number;
|
||||
Alt: number;
|
||||
CapsLock: number;
|
||||
Esc: number;
|
||||
Spacebar: number;
|
||||
PageUp: number;
|
||||
PageDown: number;
|
||||
End: number;
|
||||
Home: number;
|
||||
Insert: number;
|
||||
Left: number;
|
||||
Up: number;
|
||||
Right: number;
|
||||
Down: number;
|
||||
Del: number;
|
||||
NumLock: number;
|
||||
Cmd: number;
|
||||
CmdFF: number;
|
||||
F1: number;
|
||||
F2: number;
|
||||
F3: number;
|
||||
F4: number;
|
||||
F5: number;
|
||||
F6: number;
|
||||
F7: number;
|
||||
F8: number;
|
||||
F9: number;
|
||||
F10: number;
|
||||
F11: number;
|
||||
F12: number;
|
||||
'`': number;
|
||||
'=': number;
|
||||
'-': number;
|
||||
'/': number;
|
||||
'.': number;
|
||||
};
|
||||
export function isKey(e: any, key: any): boolean;
|
||||
35
simple-mind-map/types/src/core/event/Event.d.ts
vendored
Normal file
35
simple-mind-map/types/src/core/event/Event.d.ts
vendored
Normal file
@@ -0,0 +1,35 @@
|
||||
export default Event;
|
||||
declare class Event {
|
||||
constructor(opt?: {});
|
||||
opt: {};
|
||||
mindMap: any;
|
||||
isLeftMousedown: boolean;
|
||||
isRightMousedown: boolean;
|
||||
isMiddleMousedown: boolean;
|
||||
mousedownPos: {
|
||||
x: number;
|
||||
y: number;
|
||||
};
|
||||
mousemovePos: {
|
||||
x: number;
|
||||
y: number;
|
||||
};
|
||||
mousemoveOffset: {
|
||||
x: number;
|
||||
y: number;
|
||||
};
|
||||
bindFn(): void;
|
||||
onBodyClick(e: any): void;
|
||||
onDrawClick(e: any): void;
|
||||
onMousedown(e: any): void;
|
||||
onMousemove(e: any): void;
|
||||
onMouseup(e: any): void;
|
||||
onMousewheel(e: any): void;
|
||||
onContextmenu(e: any): void;
|
||||
onSvgMousedown(e: any): void;
|
||||
onKeyup(e: any): void;
|
||||
onMouseenter(e: any): void;
|
||||
onMouseleave(e: any): void;
|
||||
bind(): void;
|
||||
unbind(): void;
|
||||
}
|
||||
95
simple-mind-map/types/src/core/render/Render.d.ts
vendored
Normal file
95
simple-mind-map/types/src/core/render/Render.d.ts
vendored
Normal file
@@ -0,0 +1,95 @@
|
||||
export default Render;
|
||||
declare class Render {
|
||||
constructor(opt?: {});
|
||||
opt: {};
|
||||
mindMap: any;
|
||||
themeConfig: any;
|
||||
draw: any;
|
||||
renderTree: any;
|
||||
reRender: boolean;
|
||||
isRendering: boolean;
|
||||
hasWaitRendering: boolean;
|
||||
nodeCache: {};
|
||||
lastNodeCache: {};
|
||||
renderSource: string;
|
||||
activeNodeList: any[];
|
||||
root: any;
|
||||
textEdit: TextEdit;
|
||||
lastBeingCopyData: any;
|
||||
beingCopyData: any;
|
||||
beingPasteText: string;
|
||||
beingPasteImgSize: number;
|
||||
currentBeingPasteType: string;
|
||||
setLayout(): void;
|
||||
layout: MindMap | CatalogOrganization | OrganizationStructure | Timeline | VerticalTimeline;
|
||||
bindEvent(): void;
|
||||
registerCommands(): void;
|
||||
selectAll(): void;
|
||||
back(step: any): void;
|
||||
forward(step: any): void;
|
||||
insertNode(openEdit?: boolean, appointNodes?: any[], appointData?: any, appointChildren?: any[]): void;
|
||||
insertMultiNode(appointNodes: any, nodeList: any): void;
|
||||
insertChildNode(openEdit?: boolean, appointNodes?: any[], appointData?: any, appointChildren?: any[]): void;
|
||||
insertMultiChildNode(appointNodes: any, childList: 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;
|
||||
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;
|
||||
setNodeExpand(node: any, expand: any): void;
|
||||
expandAllNode(): void;
|
||||
unexpandAllNode(): void;
|
||||
expandToLevel(level: any): void;
|
||||
setNodeData(node: any, data: any): void;
|
||||
setNodeText(node: any, text: any, richText: any, resetRichText: any): void;
|
||||
setNodeImage(node: any, data: any): void;
|
||||
setNodeIcon(node: any, icons: any): void;
|
||||
setNodeHyperlink(node: any, link: any, title?: string): void;
|
||||
setNodeNote(node: any, note: any): void;
|
||||
setNodeTag(node: any, tag: any): void;
|
||||
insertFormula(formula: any, appointNodes?: any[]): void;
|
||||
addGeneralization(data: any): void;
|
||||
removeGeneralization(): void;
|
||||
setNodeCustomPosition(node: any, left?: any, top?: any): void;
|
||||
resetLayout(): void;
|
||||
setNodeShape(node: any, shape: any): void;
|
||||
goTargetNode(node: any, callback?: () => void): void;
|
||||
registerShortcutKeys(): void;
|
||||
insertNodeWrap: () => void;
|
||||
toggleActiveExpand(): void;
|
||||
removeNodeWrap: () => void;
|
||||
copy(): void;
|
||||
cut(): 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;
|
||||
paste(): void;
|
||||
onPaste(): Promise<void>;
|
||||
insertTo(node: any, exist: any, dir?: string): void;
|
||||
checkNodeLayerChange(node: any, toNode: any): void;
|
||||
removeOneNode(node: any): void;
|
||||
copyNode(): any;
|
||||
toggleNodeExpand(node: any): void;
|
||||
setNodeDataRender(node: any, data: any, notRender?: boolean): void;
|
||||
moveNodeToCenter(node: any): void;
|
||||
expandToNodeUid(uid: any, callback?: () => void): void;
|
||||
findNodeByUid(uid: any): any;
|
||||
}
|
||||
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';
|
||||
17
simple-mind-map/types/src/core/render/TextEdit.d.ts
vendored
Normal file
17
simple-mind-map/types/src/core/render/TextEdit.d.ts
vendored
Normal file
@@ -0,0 +1,17 @@
|
||||
export default class TextEdit {
|
||||
constructor(renderer: any);
|
||||
renderer: any;
|
||||
mindMap: any;
|
||||
currentNode: any;
|
||||
textEditNode: HTMLDivElement;
|
||||
showTextEdit: boolean;
|
||||
cacheEditingText: string;
|
||||
bindEvent(): void;
|
||||
show(node: any, e: any, isInserting?: boolean, isFromKeyDown?: boolean): Promise<void>;
|
||||
onScale(): void;
|
||||
checkIsAutoEnterTextEditKey(e: any): boolean;
|
||||
registerTmpShortcut(): void;
|
||||
showEditTextBox(node: any, rect: any, isInserting: any, isFromKeyDown: any): void;
|
||||
getEditText(): any;
|
||||
hideEditTextBox(): any;
|
||||
}
|
||||
118
simple-mind-map/types/src/core/render/node/Node.d.ts
vendored
Normal file
118
simple-mind-map/types/src/core/render/node/Node.d.ts
vendored
Normal file
@@ -0,0 +1,118 @@
|
||||
export default Node;
|
||||
declare class Node {
|
||||
constructor(opt?: {});
|
||||
nodeData: any;
|
||||
uid: any;
|
||||
mindMap: any;
|
||||
renderer: any;
|
||||
draw: any;
|
||||
style: Style;
|
||||
shapeInstance: Shape;
|
||||
shapePadding: {
|
||||
paddingX: number;
|
||||
paddingY: number;
|
||||
};
|
||||
isRoot: any;
|
||||
isGeneralization: any;
|
||||
generalizationBelongNode: any;
|
||||
layerIndex: any;
|
||||
width: any;
|
||||
height: any;
|
||||
_left: any;
|
||||
_top: any;
|
||||
customLeft: any;
|
||||
customTop: any;
|
||||
isDrag: boolean;
|
||||
parent: any;
|
||||
children: any;
|
||||
group: any;
|
||||
shapeNode: any;
|
||||
hoverNode: any;
|
||||
_customNodeContent: any;
|
||||
_imgData: any;
|
||||
_iconData: any;
|
||||
_textData: any;
|
||||
_hyperlinkData: any;
|
||||
_tagData: any;
|
||||
_noteData: any;
|
||||
noteEl: any;
|
||||
_expandBtn: any;
|
||||
_lastExpandBtnType: any;
|
||||
_showExpandBtn: boolean;
|
||||
_openExpandNode: any;
|
||||
_closeExpandNode: any;
|
||||
_fillExpandNode: any;
|
||||
_lines: any[];
|
||||
_generalizationLine: any;
|
||||
_generalizationNode: any;
|
||||
_unVisibleRectRegionNode: any;
|
||||
_isMouseenter: boolean;
|
||||
_rectInfo: {
|
||||
imgContentWidth: number;
|
||||
imgContentHeight: number;
|
||||
textContentWidth: number;
|
||||
textContentHeight: number;
|
||||
};
|
||||
_generalizationNodeWidth: number;
|
||||
_generalizationNodeHeight: number;
|
||||
textContentItemMargin: any;
|
||||
blockContentMargin: any;
|
||||
expandBtnSize: any;
|
||||
isMultipleChoice: boolean;
|
||||
needLayout: boolean;
|
||||
isHide: boolean;
|
||||
set left(arg: any);
|
||||
get left(): any;
|
||||
set top(arg: any);
|
||||
get top(): any;
|
||||
reset(): void;
|
||||
handleData(data: any): any;
|
||||
createNodeData(): void;
|
||||
getSize(): boolean;
|
||||
getNodeRect(): {
|
||||
width: any;
|
||||
height: any;
|
||||
};
|
||||
layout(): void;
|
||||
bindGroupEvent(): void;
|
||||
active(e: any): void;
|
||||
update(): void;
|
||||
getNodePosInClient(_left: any, _top: any): {
|
||||
left: any;
|
||||
top: any;
|
||||
};
|
||||
reRender(): boolean;
|
||||
updateNodeActive(): void;
|
||||
render(callback?: () => void): void;
|
||||
remove(): void;
|
||||
destroy(): void;
|
||||
hide(): void;
|
||||
show(): void;
|
||||
setOpacity(val: any): void;
|
||||
hideChildren(): void;
|
||||
showChildren(): void;
|
||||
startDrag(): void;
|
||||
endDrag(): void;
|
||||
renderLine(deep?: boolean): void;
|
||||
getShape(): any;
|
||||
hasCustomPosition(): boolean;
|
||||
ancestorHasCustomPosition(): boolean;
|
||||
addChildren(node: any): void;
|
||||
styleLine(line: any, node: any): void;
|
||||
removeLine(): void;
|
||||
isParent(node: any): boolean;
|
||||
isBrother(node: any): any;
|
||||
getPaddingVale(): {
|
||||
paddingX: any;
|
||||
paddingY: any;
|
||||
};
|
||||
getStyle(prop: any, root: any): any;
|
||||
getSelfStyle(prop: any): any;
|
||||
getParentSelfStyle(prop: any): any;
|
||||
getSelfInhertStyle(prop: any): any;
|
||||
getBorderWidth(): any;
|
||||
getData(key: any): any;
|
||||
hasCustomStyle(): boolean;
|
||||
}
|
||||
import Style from './Style';
|
||||
import Shape from './Shape';
|
||||
23
simple-mind-map/types/src/core/render/node/Shape.d.ts
vendored
Normal file
23
simple-mind-map/types/src/core/render/node/Shape.d.ts
vendored
Normal file
@@ -0,0 +1,23 @@
|
||||
export default class Shape {
|
||||
constructor(node: any);
|
||||
node: any;
|
||||
getShapePadding(width: any, height: any, paddingX: any, paddingY: any): {
|
||||
paddingX: number;
|
||||
paddingY: number;
|
||||
};
|
||||
createShape(): any;
|
||||
getNodeSize(): {
|
||||
width: any;
|
||||
height: any;
|
||||
};
|
||||
createRect(): any;
|
||||
createDiamond(): any;
|
||||
createParallelogram(): any;
|
||||
createRoundedRectangle(): any;
|
||||
createOctagonalRectangle(): any;
|
||||
createOuterTriangularRectangle(): any;
|
||||
createInnerTriangularRectangle(): any;
|
||||
createEllipse(): any;
|
||||
createCircle(): any;
|
||||
}
|
||||
export const shapeList: string[];
|
||||
36
simple-mind-map/types/src/core/render/node/Style.d.ts
vendored
Normal file
36
simple-mind-map/types/src/core/render/node/Style.d.ts
vendored
Normal file
@@ -0,0 +1,36 @@
|
||||
export default Style;
|
||||
declare class Style {
|
||||
static setBackgroundStyle(el: any, themeConfig: any): void;
|
||||
static removeBackgroundStyle(el: any): void;
|
||||
constructor(ctx: any);
|
||||
ctx: any;
|
||||
merge(prop: any, root: any): any;
|
||||
getStyle(prop: any, root: any): any;
|
||||
getSelfStyle(prop: any): any;
|
||||
rect(node: any): void;
|
||||
shape(node: any): void;
|
||||
text(node: any): void;
|
||||
createStyleText(): string;
|
||||
getTextFontStyle(): {
|
||||
italic: boolean;
|
||||
bold: any;
|
||||
fontSize: any;
|
||||
fontFamily: any;
|
||||
};
|
||||
domText(node: any, fontSizeScale: number, isMultiLine: any): void;
|
||||
tagText(node: any): void;
|
||||
tagRect(node: any, text: any, color: any): void;
|
||||
iconNode(node: any): void;
|
||||
line(node: any, { width, color, dasharray }?: {
|
||||
width: any;
|
||||
color: any;
|
||||
dasharray: any;
|
||||
}): void;
|
||||
generalizationLine(node: any): void;
|
||||
iconBtn(node: any, node2: any, fillNode: any): void;
|
||||
hasCustomStyle(): boolean;
|
||||
hoverNode(node: any): void;
|
||||
}
|
||||
declare namespace Style {
|
||||
let cacheStyle: any;
|
||||
}
|
||||
23
simple-mind-map/types/src/core/render/node/nodeCommandWraps.d.ts
vendored
Normal file
23
simple-mind-map/types/src/core/render/node/nodeCommandWraps.d.ts
vendored
Normal file
@@ -0,0 +1,23 @@
|
||||
declare namespace _default {
|
||||
export { setData };
|
||||
export { setText };
|
||||
export { setImage };
|
||||
export { setIcon };
|
||||
export { setHyperlink };
|
||||
export { setNote };
|
||||
export { setTag };
|
||||
export { setShape };
|
||||
export { setStyle };
|
||||
export { setStyles };
|
||||
}
|
||||
export default _default;
|
||||
declare function setData(data?: {}): void;
|
||||
declare function setText(text: any, richText: any, resetRichText: any): void;
|
||||
declare function setImage(imgData: any): void;
|
||||
declare function setIcon(icons: any): void;
|
||||
declare function setHyperlink(link: any, title: any): void;
|
||||
declare function setNote(note: any): void;
|
||||
declare function setTag(tag: any): void;
|
||||
declare function setShape(shape: any): void;
|
||||
declare function setStyle(prop: any, value: any): void;
|
||||
declare function setStyles(style: any): void;
|
||||
45
simple-mind-map/types/src/core/render/node/nodeCreateContents.d.ts
vendored
Normal file
45
simple-mind-map/types/src/core/render/node/nodeCreateContents.d.ts
vendored
Normal file
@@ -0,0 +1,45 @@
|
||||
declare namespace _default {
|
||||
export { createImgNode };
|
||||
export { getImgShowSize };
|
||||
export { createIconNode };
|
||||
export { createRichTextNode };
|
||||
export { createTextNode };
|
||||
export { createHyperlinkNode };
|
||||
export { createTagNode };
|
||||
export { createNoteNode };
|
||||
export { measureCustomNodeContentSize };
|
||||
export { isUseCustomNodeContent };
|
||||
}
|
||||
export default _default;
|
||||
declare function createImgNode(): {
|
||||
node: any;
|
||||
width: any;
|
||||
height: any;
|
||||
};
|
||||
declare function getImgShowSize(): any;
|
||||
declare function createIconNode(): any;
|
||||
declare function createRichTextNode(): {
|
||||
node: any;
|
||||
width: any;
|
||||
height: any;
|
||||
};
|
||||
declare function createTextNode(): any;
|
||||
declare function createHyperlinkNode(): {
|
||||
node: any;
|
||||
width: any;
|
||||
height: any;
|
||||
};
|
||||
declare function createTagNode(): any[];
|
||||
declare function createNoteNode(): {
|
||||
node: any;
|
||||
width: any;
|
||||
height: any;
|
||||
};
|
||||
declare class createNoteNode {
|
||||
noteEl: HTMLDivElement;
|
||||
}
|
||||
declare function measureCustomNodeContentSize(content: any): {
|
||||
width: any;
|
||||
height: any;
|
||||
};
|
||||
declare function isUseCustomNodeContent(): boolean;
|
||||
34
simple-mind-map/types/src/core/render/node/nodeExpandBtn.d.ts
vendored
Normal file
34
simple-mind-map/types/src/core/render/node/nodeExpandBtn.d.ts
vendored
Normal file
@@ -0,0 +1,34 @@
|
||||
declare namespace _default {
|
||||
export { createExpandNodeContent };
|
||||
export { updateExpandBtnNode };
|
||||
export { updateExpandBtnPos };
|
||||
export { renderExpandBtn };
|
||||
export { removeExpandBtn };
|
||||
export { showExpandBtn };
|
||||
export { hideExpandBtn };
|
||||
export { sumNode };
|
||||
}
|
||||
export default _default;
|
||||
declare function createExpandNodeContent(): void;
|
||||
declare class createExpandNodeContent {
|
||||
_openExpandNode: any;
|
||||
_closeExpandNode: any;
|
||||
_fillExpandNode: any;
|
||||
}
|
||||
declare function updateExpandBtnNode(): void;
|
||||
declare class updateExpandBtnNode {
|
||||
_lastExpandBtnType: boolean;
|
||||
}
|
||||
declare function updateExpandBtnPos(): void;
|
||||
declare function renderExpandBtn(): void;
|
||||
declare class renderExpandBtn {
|
||||
_expandBtn: any;
|
||||
_showExpandBtn: boolean;
|
||||
}
|
||||
declare function removeExpandBtn(): void;
|
||||
declare class removeExpandBtn {
|
||||
_showExpandBtn: boolean;
|
||||
}
|
||||
declare function showExpandBtn(): void;
|
||||
declare function hideExpandBtn(): void;
|
||||
declare function sumNode(data?: any[]): any;
|
||||
18
simple-mind-map/types/src/core/render/node/nodeExpandBtnPlaceholderRect.d.ts
vendored
Normal file
18
simple-mind-map/types/src/core/render/node/nodeExpandBtnPlaceholderRect.d.ts
vendored
Normal file
@@ -0,0 +1,18 @@
|
||||
declare namespace _default {
|
||||
export { renderExpandBtnPlaceholderRect };
|
||||
export { clearExpandBtnPlaceholderRect };
|
||||
export { updateExpandBtnPlaceholderRect };
|
||||
}
|
||||
export default _default;
|
||||
declare function renderExpandBtnPlaceholderRect(): void;
|
||||
declare class renderExpandBtnPlaceholderRect {
|
||||
_unVisibleRectRegionNode: any;
|
||||
}
|
||||
declare function clearExpandBtnPlaceholderRect(): void;
|
||||
declare class clearExpandBtnPlaceholderRect {
|
||||
_unVisibleRectRegionNode: any;
|
||||
}
|
||||
declare function updateExpandBtnPlaceholderRect(): void;
|
||||
declare class updateExpandBtnPlaceholderRect {
|
||||
needRerenderExpandBtnPlaceholderRect: boolean;
|
||||
}
|
||||
32
simple-mind-map/types/src/core/render/node/nodeGeneralization.d.ts
vendored
Normal file
32
simple-mind-map/types/src/core/render/node/nodeGeneralization.d.ts
vendored
Normal file
@@ -0,0 +1,32 @@
|
||||
declare namespace _default {
|
||||
export { checkHasGeneralization };
|
||||
export { createGeneralizationNode };
|
||||
export { updateGeneralization };
|
||||
export { renderGeneralization };
|
||||
export { removeGeneralization };
|
||||
export { hideGeneralization };
|
||||
export { showGeneralization };
|
||||
}
|
||||
export default _default;
|
||||
declare function checkHasGeneralization(): boolean;
|
||||
declare function createGeneralizationNode(): void;
|
||||
declare class createGeneralizationNode {
|
||||
_generalizationLine: any;
|
||||
_generalizationNode: Node;
|
||||
_generalizationNodeWidth: any;
|
||||
_generalizationNodeHeight: any;
|
||||
}
|
||||
declare function updateGeneralization(): void;
|
||||
declare function renderGeneralization(): void;
|
||||
declare class renderGeneralization {
|
||||
_generalizationNodeWidth: number;
|
||||
_generalizationNodeHeight: number;
|
||||
}
|
||||
declare function removeGeneralization(): void;
|
||||
declare class removeGeneralization {
|
||||
_generalizationLine: any;
|
||||
_generalizationNode: any;
|
||||
}
|
||||
declare function hideGeneralization(): void;
|
||||
declare function showGeneralization(): void;
|
||||
import Node from './Node';
|
||||
36
simple-mind-map/types/src/core/view/View.d.ts
vendored
Normal file
36
simple-mind-map/types/src/core/view/View.d.ts
vendored
Normal file
@@ -0,0 +1,36 @@
|
||||
export default View;
|
||||
declare class View {
|
||||
constructor(opt?: {});
|
||||
opt: {};
|
||||
mindMap: any;
|
||||
scale: number;
|
||||
sx: number;
|
||||
sy: number;
|
||||
x: number;
|
||||
y: number;
|
||||
firstDrag: boolean;
|
||||
bind(): void;
|
||||
getTransformData(): {
|
||||
transform: any;
|
||||
state: {
|
||||
scale: number;
|
||||
x: number;
|
||||
y: number;
|
||||
sx: number;
|
||||
sy: number;
|
||||
};
|
||||
};
|
||||
setTransformData(viewData: any): void;
|
||||
translateXY(x: any, y: any): void;
|
||||
translateX(step: any): void;
|
||||
translateXTo(x: any): void;
|
||||
translateY(step: any): void;
|
||||
translateYTo(y: any): void;
|
||||
transform(): void;
|
||||
reset(): void;
|
||||
narrow(cx: any, cy: any, isTouchPad: any): void;
|
||||
enlarge(cx: any, cy: any, isTouchPad: any): void;
|
||||
scaleInCenter(scale: any, cx: any, cy: any): void;
|
||||
setScale(scale: any, cx: any, cy: any): void;
|
||||
fit(): void;
|
||||
}
|
||||
43
simple-mind-map/types/src/layouts/Base.d.ts
vendored
Normal file
43
simple-mind-map/types/src/layouts/Base.d.ts
vendored
Normal file
@@ -0,0 +1,43 @@
|
||||
export default Base;
|
||||
declare class Base {
|
||||
constructor(renderer: any);
|
||||
renderer: any;
|
||||
mindMap: any;
|
||||
draw: any;
|
||||
root: any;
|
||||
lru: Lru;
|
||||
doLayout(): void;
|
||||
renderLine(): void;
|
||||
renderExpandBtn(): void;
|
||||
renderGeneralization(): void;
|
||||
cacheNode(uid: any, node: any): void;
|
||||
checkIsNeedResizeSources(): boolean;
|
||||
checkIsLayerTypeChange(oldIndex: any, newIndex: any): boolean;
|
||||
checkIsLayoutChangeRerenderExpandBtnPlaceholderRect(node: any): void;
|
||||
createNode(data: any, parent: any, isRoot: any, layerIndex: any): any;
|
||||
formatPosition(value: any, size: any, nodeSize: any): number;
|
||||
setNodeCenter(node: any): void;
|
||||
updateChildren(children: any, prop: any, offset: any): void;
|
||||
updateChildrenPro(children: any, props: any): void;
|
||||
getNodeAreaWidth(node: any, withGeneralization?: boolean): number;
|
||||
quadraticCurvePath(x1: any, y1: any, x2: any, y2: any): string;
|
||||
cubicBezierPath(x1: any, y1: any, x2: any, y2: any): string;
|
||||
getMarginX(layerIndex: any): any;
|
||||
getMarginY(layerIndex: any): any;
|
||||
getNodeWidthWithGeneralization(node: any): number;
|
||||
getNodeHeightWithGeneralization(node: any): number;
|
||||
/**
|
||||
* dir:生长方向,h(水平)、v(垂直)
|
||||
* isLeft:是否向左生长
|
||||
*/
|
||||
getNodeBoundaries(node: any, dir: any): {
|
||||
left: any;
|
||||
right: any;
|
||||
top: any;
|
||||
bottom: any;
|
||||
generalizationLineMargin: any;
|
||||
generalizationNodeMargin: any;
|
||||
};
|
||||
getNodeActChildrenLength(node: any): any;
|
||||
}
|
||||
import Lru from '../utils/Lru';
|
||||
15
simple-mind-map/types/src/layouts/CatalogOrganization.d.ts
vendored
Normal file
15
simple-mind-map/types/src/layouts/CatalogOrganization.d.ts
vendored
Normal file
@@ -0,0 +1,15 @@
|
||||
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';
|
||||
19
simple-mind-map/types/src/layouts/Fishbone.d.ts
vendored
Normal file
19
simple-mind-map/types/src/layouts/Fishbone.d.ts
vendored
Normal file
@@ -0,0 +1,19 @@
|
||||
export default Fishbone;
|
||||
declare class Fishbone extends Base {
|
||||
constructor(opt?: {});
|
||||
indent: number;
|
||||
childIndent: number;
|
||||
doLayout(callback: any): void;
|
||||
computedBaseValue(): void;
|
||||
computedLeftTopValue(): void;
|
||||
adjustLeftTopValue(): void;
|
||||
getNodeAreaHeight(node: any): number;
|
||||
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';
|
||||
17
simple-mind-map/types/src/layouts/LogicalStructure.d.ts
vendored
Normal file
17
simple-mind-map/types/src/layouts/LogicalStructure.d.ts
vendored
Normal file
@@ -0,0 +1,17 @@
|
||||
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';
|
||||
17
simple-mind-map/types/src/layouts/MindMap.d.ts
vendored
Normal file
17
simple-mind-map/types/src/layouts/MindMap.d.ts
vendored
Normal file
@@ -0,0 +1,17 @@
|
||||
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';
|
||||
16
simple-mind-map/types/src/layouts/OrganizationStructure.d.ts
vendored
Normal file
16
simple-mind-map/types/src/layouts/OrganizationStructure.d.ts
vendored
Normal file
@@ -0,0 +1,16 @@
|
||||
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';
|
||||
17
simple-mind-map/types/src/layouts/Timeline.d.ts
vendored
Normal file
17
simple-mind-map/types/src/layouts/Timeline.d.ts
vendored
Normal file
@@ -0,0 +1,17 @@
|
||||
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';
|
||||
19
simple-mind-map/types/src/layouts/VerticalTimeline.d.ts
vendored
Normal file
19
simple-mind-map/types/src/layouts/VerticalTimeline.d.ts
vendored
Normal file
@@ -0,0 +1,19 @@
|
||||
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';
|
||||
77
simple-mind-map/types/src/layouts/fishboneUtils.d.ts
vendored
Normal file
77
simple-mind-map/types/src/layouts/fishboneUtils.d.ts
vendored
Normal file
@@ -0,0 +1,77 @@
|
||||
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 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 adjustLeftTopValueBefore({ node, parent, ctx, layerIndex }: {
|
||||
node: any;
|
||||
parent: any;
|
||||
ctx: any;
|
||||
layerIndex: 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 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 adjustLeftTopValueBefore({ node, ctx, layerIndex }: {
|
||||
node: any;
|
||||
ctx: any;
|
||||
layerIndex: any;
|
||||
}): void;
|
||||
function adjustLeftTopValueAfter({ parent, node, ctx }: {
|
||||
parent: any;
|
||||
node: any;
|
||||
ctx: any;
|
||||
}): void;
|
||||
}
|
||||
}
|
||||
export default _default;
|
||||
11
simple-mind-map/types/src/svg/btns.d.ts
vendored
Normal file
11
simple-mind-map/types/src/svg/btns.d.ts
vendored
Normal file
@@ -0,0 +1,11 @@
|
||||
declare namespace _default {
|
||||
export { open };
|
||||
export { close };
|
||||
export { remove };
|
||||
export { imgAdjust };
|
||||
}
|
||||
export default _default;
|
||||
declare const open: "<svg t=\"1618141562310\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"13476\" width=\"200\" height=\"200\"><path d=\"M475.136 327.168v147.968h-147.968v74.24h147.968v147.968h74.24v-147.968h147.968v-74.24h-147.968v-147.968h-74.24z m36.864-222.208c225.28 0 407.04 181.76 407.04 407.04s-181.76 407.04-407.04 407.04-407.04-181.76-407.04-407.04 181.76-407.04 407.04-407.04z m0-74.24c-265.216 0-480.768 215.552-480.768 480.768s215.552 480.768 480.768 480.768 480.768-215.552 480.768-480.768-215.552-480.768-480.768-480.768z\" p-id=\"13477\"></path></svg>";
|
||||
declare const close: "<svg t=\"1618141589243\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"13611\" width=\"200\" height=\"200\"><path d=\"M512 105.472c225.28 0 407.04 181.76 407.04 407.04s-181.76 407.04-407.04 407.04-407.04-181.76-407.04-407.04 181.76-407.04 407.04-407.04z m0-74.24c-265.216 0-480.768 215.552-480.768 480.768s215.552 480.768 480.768 480.768 480.768-215.552 480.768-480.768-215.552-480.768-480.768-480.768z\" p-id=\"13612\"></path><path d=\"M252.928 474.624h518.144v74.24h-518.144z\" p-id=\"13613\"></path></svg>";
|
||||
declare const remove: "<svg width=\"14px\" height=\"14px\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"13611\" width=\"200\" height=\"200\"><path fill=\"#ffffff\" d=\"M512 105.472c225.28 0 407.04 181.76 407.04 407.04s-181.76 407.04-407.04 407.04-407.04-181.76-407.04-407.04 181.76-407.04 407.04-407.04z m0-74.24c-265.216 0-480.768 215.552-480.768 480.768s215.552 480.768 480.768 480.768 480.768-215.552 480.768-480.768-215.552-480.768-480.768-480.768z\" p-id=\"13612\"></path><path fill=\"#ffffff\" d=\"M252.928 474.624h518.144v74.24h-518.144z\" p-id=\"13613\"></path></svg>";
|
||||
declare const imgAdjust: "<svg width=\"12px\" height=\"12px\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"#ffffff\" d=\"M1008.128 614.4a25.6 25.6 0 0 0-27.648 5.632l-142.848 142.848L259.072 186.88 401.92 43.52A25.6 25.6 0 0 0 384 0h-358.4a25.6 25.6 0 0 0-25.6 25.6v358.4a25.6 25.6 0 0 0 43.52 17.92l143.36-142.848 578.048 578.048-142.848 142.848a25.6 25.6 0 0 0 17.92 43.52h358.4a25.6 25.6 0 0 0 25.6-25.6v-358.4a25.6 25.6 0 0 0-15.872-25.088z\" /></svg>";
|
||||
18
simple-mind-map/types/src/svg/icons.d.ts
vendored
Normal file
18
simple-mind-map/types/src/svg/icons.d.ts
vendored
Normal file
@@ -0,0 +1,18 @@
|
||||
export const nodeIconList: {
|
||||
name: string;
|
||||
type: string;
|
||||
list: {
|
||||
name: string;
|
||||
icon: string;
|
||||
}[];
|
||||
}[];
|
||||
declare namespace _default {
|
||||
export { hyperlink };
|
||||
export { note };
|
||||
export { nodeIconList };
|
||||
export { getNodeIconListIcon };
|
||||
}
|
||||
export default _default;
|
||||
declare const hyperlink: "<svg t=\"1624174958075\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"7982\" ><path d=\"M435.484444 251.733333v68.892445L295.822222 320.682667a168.504889 168.504889 0 0 0-2.844444 336.952889h142.506666v68.892444H295.822222a237.397333 237.397333 0 0 1 0-474.794667h139.662222z m248.945778 0a237.397333 237.397333 0 0 1 0 474.851556H544.654222v-69.006222l139.776 0.056889a168.504889 168.504889 0 0 0 2.844445-336.952889H544.597333V251.676444h139.776z m-25.827555 203.946667a34.474667 34.474667 0 0 1 0 68.892444H321.649778a34.474667 34.474667 0 0 1 0-68.892444h336.952889z\" p-id=\"7983\"></path></svg>";
|
||||
declare const note: "<svg t=\"1624195132675\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"8792\" ><path d=\"M152.768 985.984 152.768 49.856l434.56 0 66.816 0 234.048 267.392 0 66.816 0 601.92L152.768 985.984 152.768 985.984zM654.144 193.088l0 124.16 108.736 0L654.144 193.088 654.144 193.088zM821.312 384.064l-167.168 0L587.328 384.064 587.328 317.312 587.328 116.736 219.584 116.736 219.584 919.04l601.728 0L821.312 384.064 821.312 384.064zM386.688 517.888 319.808 517.888 319.808 450.944l66.816 0L386.624 517.888 386.688 517.888zM386.688 651.584 319.808 651.584 319.808 584.704l66.816 0L386.624 651.584 386.688 651.584zM386.688 785.344 319.808 785.344l0-66.88 66.816 0L386.624 785.344 386.688 785.344zM721.024 517.888 453.632 517.888 453.632 450.944l267.392 0L721.024 517.888 721.024 517.888zM654.144 651.584 453.632 651.584 453.632 584.704l200.512 0L654.144 651.584 654.144 651.584zM620.672 785.344l-167.04 0 0-66.88 167.04 0L620.672 785.344 620.672 785.344z\" p-id=\"8793\"></path></svg>";
|
||||
declare function getNodeIconListIcon(name: any, extendIconList?: any[]): any;
|
||||
2
simple-mind-map/types/src/themes/autumn.d.ts
vendored
Normal file
2
simple-mind-map/types/src/themes/autumn.d.ts
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
declare const _default: any
|
||||
export default _default
|
||||
2
simple-mind-map/types/src/themes/avocado.d.ts
vendored
Normal file
2
simple-mind-map/types/src/themes/avocado.d.ts
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
declare const _default: any
|
||||
export default _default
|
||||
2
simple-mind-map/types/src/themes/blackGold.d.ts
vendored
Normal file
2
simple-mind-map/types/src/themes/blackGold.d.ts
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
declare const _default: any
|
||||
export default _default
|
||||
2
simple-mind-map/types/src/themes/blackHumour.d.ts
vendored
Normal file
2
simple-mind-map/types/src/themes/blackHumour.d.ts
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
declare const _default: any
|
||||
export default _default
|
||||
2
simple-mind-map/types/src/themes/blueSky.d.ts
vendored
Normal file
2
simple-mind-map/types/src/themes/blueSky.d.ts
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
declare const _default: any
|
||||
export default _default
|
||||
2
simple-mind-map/types/src/themes/brainImpairedPink.d.ts
vendored
Normal file
2
simple-mind-map/types/src/themes/brainImpairedPink.d.ts
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
declare const _default: any
|
||||
export default _default
|
||||
2
simple-mind-map/types/src/themes/classic.d.ts
vendored
Normal file
2
simple-mind-map/types/src/themes/classic.d.ts
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
declare const _default: any
|
||||
export default _default
|
||||
2
simple-mind-map/types/src/themes/classic2.d.ts
vendored
Normal file
2
simple-mind-map/types/src/themes/classic2.d.ts
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
declare const _default: any
|
||||
export default _default
|
||||
2
simple-mind-map/types/src/themes/classic3.d.ts
vendored
Normal file
2
simple-mind-map/types/src/themes/classic3.d.ts
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
declare const _default: any
|
||||
export default _default
|
||||
2
simple-mind-map/types/src/themes/classic4.d.ts
vendored
Normal file
2
simple-mind-map/types/src/themes/classic4.d.ts
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
declare const _default: any
|
||||
export default _default
|
||||
2
simple-mind-map/types/src/themes/classicBlue.d.ts
vendored
Normal file
2
simple-mind-map/types/src/themes/classicBlue.d.ts
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
declare const _default: any
|
||||
export default _default
|
||||
2
simple-mind-map/types/src/themes/classicGreen.d.ts
vendored
Normal file
2
simple-mind-map/types/src/themes/classicGreen.d.ts
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
declare const _default: any
|
||||
export default _default
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user