chore: import upstream snapshot with attribution
This commit is contained in:
wehub-resource-sync
@@ -0,0 +1,17 @@
|
||||
module.exports = {
|
||||
"env": {
|
||||
"browser": true,
|
||||
"es2021": true
|
||||
},
|
||||
"extends": "eslint:recommended",
|
||||
"overrides": [
|
||||
],
|
||||
"parserOptions": {
|
||||
"parser": 'babel-eslint',
|
||||
"ecmaVersion": 12,
|
||||
"sourceType": "module",
|
||||
"allowImportExportEverywhere": true
|
||||
},
|
||||
"rules": {
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
src/assets
|
||||
*/.DS_Store
|
||||
dist
|
||||
example
|
||||
node_modules
|
||||
*.json
|
||||
*.md
|
||||
.eslintrc.js
|
||||
.prettierignore
|
||||
.prettierrc
|
||||
@@ -0,0 +1,5 @@
|
||||
semi: false
|
||||
singleQuote: true
|
||||
printWidth: 80
|
||||
trailingComma: 'none'
|
||||
arrowParens: 'avoid'
|
||||
@@ -0,0 +1,3 @@
|
||||
# 一个web思维导图的简单实现
|
||||
|
||||
详细文档见：[https://github.com/wanglin2/mind-map](https://github.com/wanglin2/mind-map)
|
||||
@@ -0,0 +1,21 @@
|
||||
const { exec } = require('child_process')
|
||||
const fs = require('fs')
|
||||
|
||||
const base = './src/plugins/'
|
||||
const list = fs.readdirSync(base)
|
||||
const files = []
|
||||
list.forEach(item => {
|
||||
const stat = fs.statSync(base + item)
|
||||
if (stat.isFile()) {
|
||||
files.push(item)
|
||||
}
|
||||
})
|
||||
const str = files
|
||||
.map(item => {
|
||||
return base + item
|
||||
})
|
||||
.join(' ')
|
||||
|
||||
exec(
|
||||
`tsc ${str} --declaration --allowJs --emitDeclarationOnly --outDir types/src/ --target es2017 --skipLibCheck `
|
||||
)
|
||||
@@ -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)
|
||||
@@ -0,0 +1,936 @@
|
||||
const createFullData = () => {
|
||||
return {
|
||||
"image": "/enJFNMHnedQTYTESGfDkctCp2.jpeg",
|
||||
"imageTitle": "图片名称",
|
||||
"imageSize": {
|
||||
"width": 1000,
|
||||
"height": 563
|
||||
},
|
||||
"icon": ['priority_1'],
|
||||
"tag": ["标签1", "标签2"],
|
||||
"hyperlink": "https://sxmind.cn/",
|
||||
"hyperlinkTitle": "思绪思维导图",
|
||||
"note": "思绪思维导图\n一个强大的思维导图工具",
|
||||
// 自定义位置
|
||||
// "customLeft": 1318,
|
||||
// "customTop": 374.5
|
||||
};
|
||||
}
|
||||
|
||||
// 节点较多示例数据
|
||||
const data1 = {
|
||||
"root": {
|
||||
"data": {
|
||||
"text": "根节点"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "二级节点1",
|
||||
"expand": true,
|
||||
},
|
||||
"children": [{
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
...createFullData()
|
||||
},
|
||||
"children": [{
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
"children": [{
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
...createFullData()
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
"children": [{
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
"children": [{
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
"children": [{
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
"children": [{
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}]
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}]
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}]
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}]
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}]
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}]
|
||||
}]
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "二级节点2",
|
||||
"expand": true,
|
||||
},
|
||||
"children": [{
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
"children": [{
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}]
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}]
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "二级节点3",
|
||||
"expand": true,
|
||||
},
|
||||
"children": [{
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
"children": [{
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
"children": [{
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}]
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}]
|
||||
}]
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "二级节点4",
|
||||
"expand": true,
|
||||
},
|
||||
"children": [{
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
"children": [{
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
"children": [{
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
"children": [{
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}]
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}]
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
"children": [{
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
"children": [{
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
"children": [{
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}]
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
"children": [{
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
"children": [{
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}]
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}]
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
"children": [{
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
"children": [{
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
"children": [{
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}]
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}]
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
"children": [{
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}]
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
"children": [{
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
},
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* javascript comment
|
||||
* @Author: 王林25
|
||||
* @Date: 2021-07-12 13:49:43
|
||||
* @Desc: 真实场景数据
|
||||
*/
|
||||
const data2 = {
|
||||
"root": {
|
||||
"data": {
|
||||
"text": "一周安排"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "生活"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "锻炼"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "晨跑"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "7:00-8:00"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "夜跑"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "20:00-21:00"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "饮食"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "早餐"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "8:30"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "午餐"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "11:30"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "晚餐"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "19:00"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "休息"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "午休"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "12:30-13:00"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "晚休"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "23:00-6:30"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "工作日\n周一至周五"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "日常工作"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "9:00-18:00"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "工作总结"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "21:00-22:00"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "学习"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "工作日"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "早间新闻"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "8:00-8:30"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "阅读"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "21:00-23:00"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "休息日"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "财务管理"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "9:00-10:30"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "职场技能"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "14:00-15:30"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "其他书籍"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "16:00-18:00"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "休闲娱乐"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "看电影"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "1~2部"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "逛街"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "1~2次"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* javascript comment
|
||||
* @Author: 王林25
|
||||
* @Date: 2021-07-12 14:29:10
|
||||
* @Desc: 极简数据
|
||||
*/
|
||||
const data3 = {
|
||||
"root": {
|
||||
"data": {
|
||||
"text": "根节点"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "二级节点"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "分支主题"
|
||||
},
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "分支主题"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
const data4 = {
|
||||
"root": {
|
||||
"data": {
|
||||
"text": "根节点"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "二级节点1"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点1-1"
|
||||
},
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点1-2"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点1-2-1"
|
||||
},
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点1-2-2"
|
||||
},
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点1-2-3"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "二级节点2"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点2-1"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点2-1-1"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点2-1-1-1"
|
||||
},
|
||||
"children": []
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "子节点2-2"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
// 带概要
|
||||
const data5 = {
|
||||
"root": {
|
||||
"data": {
|
||||
"text": "根节点"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "二级节点",
|
||||
"generalization": {
|
||||
"text": "概要",
|
||||
}
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"data": {
|
||||
"text": "分支主题"
|
||||
},
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text": "分支主题"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
// 富文本数据v0.4.0+，需要使用RichText插件才支持富文本编辑
|
||||
const richTextData = {
|
||||
"root": {
|
||||
"data": {
|
||||
"text": "<a href='https://sxmind.cn/' target='_blank'>思绪思维导图</a>",
|
||||
"richText": true
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
}
|
||||
|
||||
const rootData = {
|
||||
"root": {
|
||||
"data": {
|
||||
"text": "根节点"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
// ...data1,
|
||||
// ...data2,
|
||||
// ...data3,
|
||||
// ...data4,
|
||||
...data5,
|
||||
// ...rootData,
|
||||
"theme": {
|
||||
"template": "classic4",
|
||||
"config": {
|
||||
// 自定义配置...
|
||||
}
|
||||
},
|
||||
"layout": "logicalStructure",
|
||||
// "layout": "mindMap",
|
||||
// "layout": "catalogOrganization"
|
||||
// "layout": "organizationStructure"
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
{
|
||||
"layout": "logicalStructure",
|
||||
"root": {
|
||||
"data": {
|
||||
"text": "根节点",
|
||||
"expand": true,
|
||||
"isActive": false
|
||||
},
|
||||
"children": [{
|
||||
"data": {
|
||||
"text": "二级节点",
|
||||
"generalization": {
|
||||
"text": "概要",
|
||||
"expand": true,
|
||||
"isActive": false
|
||||
},
|
||||
"expand": true,
|
||||
"isActive": false
|
||||
},
|
||||
"children": [{
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
"expand": true,
|
||||
"isActive": false
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"data": {
|
||||
"text": "分支主题",
|
||||
"expand": true,
|
||||
"isActive": false
|
||||
},
|
||||
"children": []
|
||||
}, {
|
||||
"data": {
|
||||
"text": "<a href='https://sxmind.cn/' target='_blank'>思绪思维导图</a>",
|
||||
"richText": true
|
||||
},
|
||||
"children": []
|
||||
}]
|
||||
}]
|
||||
},
|
||||
"theme": {
|
||||
"template": "classic4",
|
||||
"config": {}
|
||||
},
|
||||
"view": {
|
||||
"transform": {
|
||||
"scaleX": 1,
|
||||
"scaleY": 1,
|
||||
"shear": 0,
|
||||
"rotate": 0,
|
||||
"translateX": 0,
|
||||
"translateY": 0,
|
||||
"originX": 0,
|
||||
"originY": 0,
|
||||
"a": 1,
|
||||
"b": 0,
|
||||
"c": 0,
|
||||
"d": 1,
|
||||
"e": 0,
|
||||
"f": 0
|
||||
},
|
||||
"state": {
|
||||
"scale": 1,
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"sx": 0,
|
||||
"sy": 0
|
||||
}
|
||||
},
|
||||
"config": {}
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
import MindMap from './index'
|
||||
import MiniMap from './src/plugins/MiniMap.js'
|
||||
import Watermark from './src/plugins/Watermark.js'
|
||||
import KeyboardNavigation from './src/plugins/KeyboardNavigation.js'
|
||||
import ExportXMind from './src/plugins/ExportXMind.js'
|
||||
import ExportPDF from './src/plugins/ExportPDF.js'
|
||||
import Export from './src/plugins/Export.js'
|
||||
import Drag from './src/plugins/Drag.js'
|
||||
import Select from './src/plugins/Select.js'
|
||||
import AssociativeLine from './src/plugins/AssociativeLine'
|
||||
import RichText from './src/plugins/RichText'
|
||||
import NodeImgAdjust from './src/plugins/NodeImgAdjust.js'
|
||||
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 RainbowLines from './src/plugins/RainbowLines.js'
|
||||
import Demonstrate from './src/plugins/Demonstrate.js'
|
||||
import OuterFrame from './src/plugins/OuterFrame.js'
|
||||
import MindMapLayoutPro from './src/plugins/MindMapLayoutPro.js'
|
||||
import NodeBase64ImageStorage from './src/plugins/NodeBase64ImageStorage.js'
|
||||
import xmind from './src/parse/xmind.js'
|
||||
import markdown from './src/parse/markdown.js'
|
||||
import icons from './src/svg/icons.js'
|
||||
import * as constants from './src/constants/constant.js'
|
||||
import * as defaultTheme from './src/theme/default.js'
|
||||
|
||||
MindMap.xmind = xmind
|
||||
MindMap.markdown = markdown
|
||||
MindMap.iconList = icons.nodeIconList
|
||||
MindMap.constants = constants
|
||||
MindMap.defaultTheme = defaultTheme
|
||||
MindMap.version = '0.14.0-fix.3'
|
||||
|
||||
MindMap.usePlugin(MiniMap)
|
||||
.usePlugin(Watermark)
|
||||
.usePlugin(Drag)
|
||||
.usePlugin(KeyboardNavigation)
|
||||
.usePlugin(ExportXMind)
|
||||
.usePlugin(ExportPDF)
|
||||
.usePlugin(Export)
|
||||
.usePlugin(Select)
|
||||
.usePlugin(AssociativeLine)
|
||||
.usePlugin(RichText)
|
||||
.usePlugin(TouchEvent)
|
||||
.usePlugin(NodeImgAdjust)
|
||||
.usePlugin(Search)
|
||||
.usePlugin(Painter)
|
||||
.usePlugin(Scrollbar)
|
||||
.usePlugin(Formula)
|
||||
.usePlugin(RainbowLines)
|
||||
.usePlugin(Demonstrate)
|
||||
.usePlugin(OuterFrame)
|
||||
.usePlugin(MindMapLayoutPro)
|
||||
.usePlugin(NodeBase64ImageStorage)
|
||||
|
||||
export default MindMap
|
||||
@@ -0,0 +1,849 @@
|
||||
import View from './src/core/view/View'
|
||||
import Event from './src/core/event/Event'
|
||||
import Render from './src/core/render/Render'
|
||||
import merge from 'deepmerge'
|
||||
import theme from './src/theme'
|
||||
import Style from './src/core/render/node/Style'
|
||||
import KeyCommand from './src/core/command/KeyCommand'
|
||||
import Command from './src/core/command/Command'
|
||||
import BatchExecution from './src/utils/BatchExecution'
|
||||
import {
|
||||
layoutValueList,
|
||||
CONSTANTS,
|
||||
ERROR_TYPES,
|
||||
cssContent,
|
||||
nodeDataNoStylePropList
|
||||
} from './src/constants/constant'
|
||||
import { SVG, G, Rect } from '@svgdotjs/svg.js'
|
||||
import {
|
||||
simpleDeepClone,
|
||||
getObjectChangedProps,
|
||||
isUndef,
|
||||
handleGetSvgDataExtraContent,
|
||||
getNodeTreeBoundingRect,
|
||||
mergeTheme,
|
||||
createUidForAppointNodes
|
||||
} from './src/utils'
|
||||
import defaultTheme, {
|
||||
checkIsNodeSizeIndependenceConfig
|
||||
} from './src/theme/default'
|
||||
import { defaultOpt } from './src/constants/defaultOptions'
|
||||
|
||||
// 思维导图
|
||||
class MindMap {
|
||||
// 构造函数
|
||||
/**
|
||||
*
|
||||
* @param {defaultOpt} opt
|
||||
*/
|
||||
constructor(opt = {}) {
|
||||
MindMap.instanceCount++
|
||||
// 合并选项
|
||||
this.opt = this.handleOpt(merge(defaultOpt, opt))
|
||||
// 预处理节点数据
|
||||
this.opt.data = this.handleData(this.opt.data)
|
||||
|
||||
// 容器元素
|
||||
this.el = this.opt.el
|
||||
if (!this.el) throw new Error('缺少容器元素el')
|
||||
|
||||
// 获取容器尺寸位置信息
|
||||
this.getElRectInfo()
|
||||
|
||||
// 画布初始大小
|
||||
this.initWidth = this.width
|
||||
this.initHeight = this.height
|
||||
|
||||
// 必要的css样式
|
||||
this.cssEl = null
|
||||
this.cssTextMap = {} // 该样式在实例化时会动态添加到页面，同时导出为svg时也会添加到svg源码中
|
||||
|
||||
// 节点前置/后置内容列表
|
||||
/*
|
||||
{
|
||||
name: '',// 一个唯一的类型标识
|
||||
// 创建节点的显示内容：节点元素、宽高
|
||||
createContent: (node) => {
|
||||
return {
|
||||
node: null,
|
||||
width: 0,
|
||||
height: 0
|
||||
}
|
||||
},
|
||||
// 创建保存到节点实例的opt对象中的数据
|
||||
createNodeData: () => {},
|
||||
// 更新节点实例的opt数据，返回数据是否改变了
|
||||
updateNodeData: () => {},
|
||||
}
|
||||
*/
|
||||
this.nodeInnerPrefixList = []
|
||||
this.nodeInnerPostfixList = []
|
||||
|
||||
// 编辑节点的类名列表，快捷键响应会检查事件目标是否是body或该列表中的元素，是的话才会响应
|
||||
// 该检查可以通过customCheckEnableShortcut选项来覆盖
|
||||
this.editNodeClassList = []
|
||||
|
||||
// 扩展的节点形状列表
|
||||
/*
|
||||
{
|
||||
createShape: (node) => {
|
||||
return path
|
||||
},
|
||||
getPadding: ({ node, width, height, paddingX, paddingY }) => {
|
||||
return {
|
||||
paddingX: 0,
|
||||
paddingY: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
*/
|
||||
this.extendShapeList = []
|
||||
|
||||
// 画布
|
||||
this.initContainer()
|
||||
|
||||
// 初始化主题
|
||||
this.initTheme()
|
||||
|
||||
// 初始化缓存数据
|
||||
this.initCache()
|
||||
|
||||
// 注册插件
|
||||
MindMap.pluginList
|
||||
.filter(plugin => {
|
||||
return plugin.preload
|
||||
})
|
||||
.forEach(plugin => {
|
||||
this.initPlugin(plugin)
|
||||
})
|
||||
|
||||
// 事件类
|
||||
this.event = new Event({
|
||||
mindMap: this
|
||||
})
|
||||
|
||||
// 按键类
|
||||
this.keyCommand = new KeyCommand({
|
||||
mindMap: this
|
||||
})
|
||||
|
||||
// 命令类
|
||||
this.command = new Command({
|
||||
mindMap: this
|
||||
})
|
||||
|
||||
// 渲染类
|
||||
this.renderer = new Render({
|
||||
mindMap: this
|
||||
})
|
||||
|
||||
// 视图操作类
|
||||
this.view = new View({
|
||||
mindMap: this
|
||||
})
|
||||
|
||||
// 批量执行类
|
||||
this.batchExecution = new BatchExecution()
|
||||
|
||||
// 注册插件
|
||||
MindMap.pluginList
|
||||
.filter(plugin => {
|
||||
return !plugin.preload
|
||||
})
|
||||
.forEach(plugin => {
|
||||
this.initPlugin(plugin)
|
||||
})
|
||||
|
||||
// 添加必要的css样式
|
||||
this.addCss()
|
||||
|
||||
// 初始渲染
|
||||
this.render(this.opt.fit ? () => this.view.fit() : () => {})
|
||||
|
||||
// 将初始数据添加到历史记录堆栈中
|
||||
if (this.opt.addHistoryOnInit && this.opt.data) {
|
||||
this.command.addHistory()
|
||||
}
|
||||
}
|
||||
|
||||
// 配置参数处理
|
||||
handleOpt(opt) {
|
||||
// 检查布局配置
|
||||
if (!layoutValueList.includes(opt.layout)) {
|
||||
opt.layout = CONSTANTS.LAYOUT.LOGICAL_STRUCTURE
|
||||
}
|
||||
// 检查主题配置
|
||||
opt.theme = opt.theme && theme[opt.theme] ? opt.theme : 'default'
|
||||
return opt
|
||||
}
|
||||
|
||||
// 预处理节点数据
|
||||
handleData(data) {
|
||||
if (isUndef(data) || Object.keys(data).length <= 0) return null
|
||||
data = simpleDeepClone(data || {})
|
||||
// 根节点不能收起
|
||||
if (data.data && !data.data.expand) {
|
||||
data.data.expand = true
|
||||
}
|
||||
// 给没有uid的节点添加uid
|
||||
createUidForAppointNodes([data], false, null, true)
|
||||
return data
|
||||
}
|
||||
|
||||
// 创建容器元素
|
||||
initContainer() {
|
||||
const { associativeLineIsAlwaysAboveNode } = this.opt
|
||||
// 给容器元素添加一个类名
|
||||
this.el.classList.add('smm-mind-map-container')
|
||||
// 节点关联线容器
|
||||
const createAssociativeLineDraw = () => {
|
||||
this.associativeLineDraw = this.draw.group()
|
||||
this.associativeLineDraw.addClass('smm-associative-line-container')
|
||||
}
|
||||
// 画布
|
||||
this.svg = SVG().addTo(this.el).size(this.width, this.height)
|
||||
|
||||
// 容器
|
||||
this.draw = this.svg.group()
|
||||
this.draw.addClass('smm-container')
|
||||
// 节点连线容器
|
||||
this.lineDraw = this.draw.group()
|
||||
this.lineDraw.addClass('smm-line-container')
|
||||
// 默认处于节点下方
|
||||
if (!associativeLineIsAlwaysAboveNode) {
|
||||
createAssociativeLineDraw()
|
||||
}
|
||||
// 节点容器
|
||||
this.nodeDraw = this.draw.group()
|
||||
this.nodeDraw.addClass('smm-node-container')
|
||||
// 关联线始终处于节点上方
|
||||
if (associativeLineIsAlwaysAboveNode) {
|
||||
createAssociativeLineDraw()
|
||||
}
|
||||
// 其他内容的容器
|
||||
this.otherDraw = this.draw.group()
|
||||
this.otherDraw.addClass('smm-other-container')
|
||||
}
|
||||
|
||||
// 清空各容器
|
||||
clearDraw() {
|
||||
this.lineDraw.clear()
|
||||
this.associativeLineDraw.clear()
|
||||
this.nodeDraw.clear()
|
||||
this.otherDraw.clear()
|
||||
}
|
||||
|
||||
// 追加必要的css样式
|
||||
// 该样式在实例化时会动态添加到页面，同时导出为svg时也会添加到svg源码中
|
||||
appendCss(key, str) {
|
||||
this.cssTextMap[key] = str
|
||||
this.removeCss()
|
||||
this.addCss()
|
||||
}
|
||||
|
||||
// 移除追加的css样式
|
||||
removeAppendCss(key) {
|
||||
if (this.cssTextMap[key]) {
|
||||
delete this.cssTextMap[key]
|
||||
this.removeCss()
|
||||
this.addCss()
|
||||
}
|
||||
}
|
||||
|
||||
// 拼接必要的css样式
|
||||
joinCss() {
|
||||
return (
|
||||
cssContent +
|
||||
Object.keys(this.cssTextMap)
|
||||
.map(key => {
|
||||
return this.cssTextMap[key]
|
||||
})
|
||||
.join('\n')
|
||||
)
|
||||
}
|
||||
|
||||
// 添加必要的css样式到页面
|
||||
addCss() {
|
||||
this.cssEl = document.createElement('style')
|
||||
this.cssEl.type = 'text/css'
|
||||
this.cssEl.innerHTML = this.joinCss()
|
||||
document.head.appendChild(this.cssEl)
|
||||
}
|
||||
|
||||
// 移除css
|
||||
removeCss() {
|
||||
if (this.cssEl) document.head.removeChild(this.cssEl)
|
||||
}
|
||||
|
||||
// 检查某个编辑节点类名是否存在，返回索引
|
||||
checkEditNodeClassIndex(className) {
|
||||
return this.editNodeClassList.findIndex(item => {
|
||||
return item === className
|
||||
})
|
||||
}
|
||||
|
||||
// 添加一个编辑节点类名
|
||||
addEditNodeClass(className) {
|
||||
const index = this.checkEditNodeClassIndex(className)
|
||||
if (index === -1) {
|
||||
this.editNodeClassList.push(className)
|
||||
}
|
||||
}
|
||||
|
||||
// 删除一个编辑节点类名
|
||||
deleteEditNodeClass(className) {
|
||||
const index = this.checkEditNodeClassIndex(className)
|
||||
if (index !== -1) {
|
||||
this.editNodeClassList.splice(index, 1)
|
||||
}
|
||||
}
|
||||
|
||||
// 渲染，部分渲染
|
||||
render(callback, source = '') {
|
||||
this.initTheme()
|
||||
this.renderer.render(callback, source)
|
||||
}
|
||||
|
||||
// 重新渲染
|
||||
reRender(callback, source = '') {
|
||||
this.renderer.reRender = true // 标记为重新渲染
|
||||
this.renderer.clearCache() // 清空节点缓存池
|
||||
this.clearDraw() // 清空画布
|
||||
this.render(callback, source)
|
||||
}
|
||||
|
||||
// 获取或更新容器尺寸位置信息
|
||||
getElRectInfo() {
|
||||
this.elRect = this.el.getBoundingClientRect()
|
||||
this.width = this.elRect.width
|
||||
this.height = this.elRect.height
|
||||
if (this.width <= 0 || this.height <= 0)
|
||||
throw new Error('容器元素el的宽高不能为0')
|
||||
}
|
||||
|
||||
// 容器尺寸变化，调整尺寸
|
||||
resize() {
|
||||
const oldWidth = this.width
|
||||
const oldHeight = this.height
|
||||
this.getElRectInfo()
|
||||
this.svg.size(this.width, this.height)
|
||||
if (oldWidth !== this.width || oldHeight !== this.height) {
|
||||
// 如果画布宽高改变了需要触发一次渲染
|
||||
if (this.demonstrate) {
|
||||
// 如果存在演示插件，并且正在演示中，那么不需要触发重新渲染，否则会冲突
|
||||
if (!this.demonstrate.isInDemonstrate) {
|
||||
this.render()
|
||||
}
|
||||
} else {
|
||||
this.render()
|
||||
}
|
||||
}
|
||||
this.emit('resize')
|
||||
}
|
||||
|
||||
// 监听事件
|
||||
on(event, fn) {
|
||||
this.event.on(event, fn)
|
||||
}
|
||||
|
||||
// 触发事件
|
||||
emit(event, ...args) {
|
||||
this.event.emit(event, ...args)
|
||||
}
|
||||
|
||||
// 解绑事件
|
||||
off(event, fn) {
|
||||
this.event.off(event, fn)
|
||||
}
|
||||
|
||||
// 初始化缓存数据
|
||||
initCache() {
|
||||
this.commonCaches = {
|
||||
measureCustomNodeContentSizeEl: null,
|
||||
measureRichtextNodeTextSizeEl: null
|
||||
}
|
||||
}
|
||||
|
||||
// 设置主题
|
||||
initTheme() {
|
||||
// 合并主题配置
|
||||
this.themeConfig = mergeTheme(
|
||||
theme[this.opt.theme] || theme.default,
|
||||
this.opt.themeConfig
|
||||
)
|
||||
// 设置背景样式
|
||||
Style.setBackgroundStyle(this.el, this.themeConfig)
|
||||
}
|
||||
|
||||
// 设置主题
|
||||
setTheme(theme, notRender = false) {
|
||||
this.execCommand('CLEAR_ACTIVE_NODE')
|
||||
this.opt.theme = theme
|
||||
if (!notRender) {
|
||||
this.render(null, CONSTANTS.CHANGE_THEME)
|
||||
}
|
||||
this.emit('view_theme_change', theme)
|
||||
}
|
||||
|
||||
// 获取当前主题
|
||||
getTheme() {
|
||||
return this.opt.theme
|
||||
}
|
||||
|
||||
// 设置主题配置
|
||||
setThemeConfig(config, notRender = false) {
|
||||
// 计算改变了的配置
|
||||
const changedConfig = getObjectChangedProps(this.themeConfig, config)
|
||||
this.opt.themeConfig = config
|
||||
if (!notRender) {
|
||||
// 检查改变的是否是节点大小无关的主题属性
|
||||
const res = checkIsNodeSizeIndependenceConfig(changedConfig)
|
||||
this.render(null, res ? '' : CONSTANTS.CHANGE_THEME)
|
||||
}
|
||||
}
|
||||
|
||||
// 获取自定义主题配置
|
||||
getCustomThemeConfig() {
|
||||
return this.opt.themeConfig
|
||||
}
|
||||
|
||||
// 获取某个主题配置值
|
||||
getThemeConfig(prop) {
|
||||
return prop === undefined ? this.themeConfig : this.themeConfig[prop]
|
||||
}
|
||||
|
||||
// 获取配置
|
||||
getConfig(prop) {
|
||||
return prop === undefined ? this.opt : this.opt[prop]
|
||||
}
|
||||
|
||||
// 更新配置
|
||||
updateConfig(opt = {}) {
|
||||
this.emit('before_update_config', this.opt)
|
||||
const lastOpt = {
|
||||
...this.opt
|
||||
}
|
||||
this.opt = this.handleOpt(merge.all([defaultOpt, this.opt, opt]))
|
||||
this.emit('after_update_config', this.opt, lastOpt)
|
||||
}
|
||||
|
||||
// 获取当前布局结构
|
||||
getLayout() {
|
||||
return this.opt.layout
|
||||
}
|
||||
|
||||
// 设置布局结构
|
||||
setLayout(layout, notRender = false) {
|
||||
// 检查布局配置
|
||||
if (!layoutValueList.includes(layout)) {
|
||||
layout = CONSTANTS.LAYOUT.LOGICAL_STRUCTURE
|
||||
}
|
||||
this.opt.layout = layout
|
||||
this.view.reset()
|
||||
this.renderer.setLayout()
|
||||
if (!notRender) {
|
||||
this.render(null, CONSTANTS.CHANGE_LAYOUT)
|
||||
}
|
||||
this.emit('layout_change', layout)
|
||||
}
|
||||
|
||||
// 执行命令
|
||||
execCommand(...args) {
|
||||
this.command.exec(...args)
|
||||
}
|
||||
|
||||
// 更新画布数据，如果新的数据是在当前画布节点数据基础上增删改查后形成的，那么可以使用该方法来更新画布数据
|
||||
updateData(data) {
|
||||
data = this.handleData(data)
|
||||
this.emit('before_update_data', data)
|
||||
this.renderer.setData(data)
|
||||
this.render()
|
||||
this.command.addHistory()
|
||||
this.emit('update_data', data)
|
||||
}
|
||||
|
||||
// 动态设置思维导图数据，纯节点数据
|
||||
setData(data) {
|
||||
data = this.handleData(data)
|
||||
this.emit('before_set_data', data)
|
||||
this.opt.data = data
|
||||
this.execCommand('CLEAR_ACTIVE_NODE')
|
||||
this.command.clearHistory()
|
||||
this.command.addHistory()
|
||||
this.renderer.setData(data)
|
||||
this.reRender()
|
||||
this.emit('set_data', data)
|
||||
}
|
||||
|
||||
// 动态设置思维导图数据，包括节点数据、布局、主题、视图
|
||||
setFullData(data) {
|
||||
if (data.root) {
|
||||
this.setData(data.root)
|
||||
}
|
||||
if (data.layout) {
|
||||
this.setLayout(data.layout)
|
||||
}
|
||||
if (data.theme) {
|
||||
if (data.theme.template) {
|
||||
this.setTheme(data.theme.template)
|
||||
}
|
||||
if (data.theme.config) {
|
||||
this.setThemeConfig(data.theme.config)
|
||||
}
|
||||
}
|
||||
if (data.view) {
|
||||
this.view.setTransformData(data.view)
|
||||
}
|
||||
}
|
||||
|
||||
// 获取思维导图数据，节点树、主题、布局等
|
||||
getData(withConfig) {
|
||||
let nodeData = this.command.getCopyData()
|
||||
let data = {}
|
||||
if (withConfig) {
|
||||
data = {
|
||||
layout: this.getLayout(),
|
||||
root: nodeData,
|
||||
theme: {
|
||||
template: this.getTheme(),
|
||||
config: this.getCustomThemeConfig()
|
||||
},
|
||||
view: this.view.getTransformData()
|
||||
}
|
||||
} else {
|
||||
data = nodeData
|
||||
}
|
||||
return simpleDeepClone(data)
|
||||
}
|
||||
|
||||
// 导出
|
||||
async export(...args) {
|
||||
try {
|
||||
if (!this.doExport) {
|
||||
throw new Error('请注册Export插件！')
|
||||
}
|
||||
let result = await this.doExport.export(...args)
|
||||
return result
|
||||
} catch (error) {
|
||||
this.opt.errorHandler(ERROR_TYPES.EXPORT_ERROR, error)
|
||||
}
|
||||
}
|
||||
|
||||
// 转换位置
|
||||
toPos(x, y) {
|
||||
return {
|
||||
x: x - this.elRect.left,
|
||||
y: y - this.elRect.top
|
||||
}
|
||||
}
|
||||
|
||||
// 设置只读模式、编辑模式
|
||||
setMode(mode) {
|
||||
if (![CONSTANTS.MODE.READONLY, CONSTANTS.MODE.EDIT].includes(mode)) {
|
||||
return
|
||||
}
|
||||
const isReadonly = mode === CONSTANTS.MODE.READONLY
|
||||
if (isReadonly === this.opt.readonly) return
|
||||
if (isReadonly) {
|
||||
// 如果处于编辑态，要隐藏所有的编辑框
|
||||
if (this.renderer.textEdit.isShowTextEdit()) {
|
||||
this.renderer.textEdit.hideEditTextBox()
|
||||
this.command.originAddHistory()
|
||||
}
|
||||
// 取消当前激活的元素
|
||||
this.execCommand('CLEAR_ACTIVE_NODE')
|
||||
}
|
||||
this.opt.readonly = isReadonly
|
||||
// 切换为编辑模式时，如果历史记录堆栈是空的，那么进行一次入栈操作
|
||||
if (!isReadonly && this.command.history.length <= 0) {
|
||||
this.command.originAddHistory()
|
||||
}
|
||||
this.emit('mode_change', mode)
|
||||
}
|
||||
|
||||
// 获取svg数据
|
||||
getSvgData({
|
||||
paddingX = 0,
|
||||
paddingY = 0,
|
||||
ignoreWatermark = false,
|
||||
addContentToHeader,
|
||||
addContentToFooter,
|
||||
node
|
||||
} = {}) {
|
||||
const { watermarkConfig, openPerformance } = this.opt
|
||||
// 如果开启了性能模式，那么需要先渲染所有节点
|
||||
if (openPerformance) {
|
||||
this.renderer.forceLoadNode(node)
|
||||
}
|
||||
const { cssTextList, header, headerHeight, footer, footerHeight } =
|
||||
handleGetSvgDataExtraContent({
|
||||
addContentToHeader,
|
||||
addContentToFooter
|
||||
})
|
||||
const svg = this.svg
|
||||
const draw = this.draw
|
||||
// 保存原始信息
|
||||
const origWidth = svg.width()
|
||||
const origHeight = svg.height()
|
||||
const origTransform = draw.transform()
|
||||
const elRect = this.elRect
|
||||
// 去除放大缩小的变换效果
|
||||
draw.scale(1 / origTransform.scaleX, 1 / origTransform.scaleY)
|
||||
// 获取变换后的位置尺寸信息，其实是getBoundingClientRect方法的包装方法
|
||||
const rect = draw.rbox()
|
||||
// 需要裁减的区域
|
||||
let clipData = null
|
||||
if (node) {
|
||||
clipData = getNodeTreeBoundingRect(
|
||||
node,
|
||||
rect.x,
|
||||
rect.y,
|
||||
paddingX,
|
||||
paddingY
|
||||
)
|
||||
}
|
||||
// 内边距
|
||||
const fixHeight = 0
|
||||
rect.width += paddingX * 2
|
||||
rect.height += paddingY * 2 + fixHeight + headerHeight + footerHeight
|
||||
draw.translate(paddingX, paddingY)
|
||||
// 将svg设置为实际内容的宽高
|
||||
svg.size(rect.width, rect.height)
|
||||
// 把实际内容变换
|
||||
draw.translate(-rect.x + elRect.left, -rect.y + elRect.top)
|
||||
// 克隆一份数据
|
||||
let clone = svg.clone()
|
||||
// 是否存在水印
|
||||
const hasWatermark = this.watermark && this.watermark.hasWatermark()
|
||||
if (!ignoreWatermark && hasWatermark) {
|
||||
this.watermark.isInExport = true
|
||||
// 是否是仅导出时需要水印
|
||||
const { onlyExport } = watermarkConfig
|
||||
// 是否需要重新绘制水印
|
||||
const needReDrawWatermark =
|
||||
rect.width > origWidth || rect.height > origHeight
|
||||
// 如果实际图形宽高超出了屏幕宽高，且存在水印的话需要重新绘制水印，否则会出现超出部分没有水印的问题
|
||||
if (needReDrawWatermark) {
|
||||
this.width = rect.width
|
||||
this.height = rect.height
|
||||
this.watermark.onResize()
|
||||
clone = svg.clone()
|
||||
this.width = origWidth
|
||||
this.height = origHeight
|
||||
this.watermark.onResize()
|
||||
} else if (onlyExport) {
|
||||
// 如果是仅导出时需要水印，那么需要进行绘制
|
||||
this.watermark.onResize()
|
||||
clone = svg.clone()
|
||||
}
|
||||
// 如果是仅导出时需要水印，需要清除
|
||||
if (onlyExport) {
|
||||
this.watermark.clear()
|
||||
}
|
||||
this.watermark.isInExport = false
|
||||
}
|
||||
// 添加必要的样式
|
||||
[this.joinCss(), ...cssTextList].forEach(s => {
|
||||
clone.add(SVG(`<style>${s}</style>`))
|
||||
})
|
||||
// 附加内容
|
||||
if (header && headerHeight > 0) {
|
||||
clone.findOne('.smm-container').translate(0, headerHeight)
|
||||
header.width(rect.width)
|
||||
header.y(paddingY)
|
||||
clone.add(header, 0)
|
||||
}
|
||||
if (footer && footerHeight > 0) {
|
||||
footer.width(rect.width)
|
||||
footer.y(rect.height - paddingY - footerHeight)
|
||||
clone.add(footer)
|
||||
}
|
||||
// 修正defs里定义的元素的id，因为clone时defs里的元素的id会继续递增，导致和内容中引用的id对不上
|
||||
const defs = svg.find('defs')
|
||||
const defs2 = clone.find('defs')
|
||||
defs.forEach((def, defIndex) => {
|
||||
const def2 = defs2[defIndex]
|
||||
if (!def2) return
|
||||
const children = def.children()
|
||||
const children2 = def2.children()
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
const child = children[i]
|
||||
const child2 = children2[i]
|
||||
if (child && child2) {
|
||||
child2.attr('id', child.attr('id'))
|
||||
}
|
||||
}
|
||||
})
|
||||
// 恢复原先的大小和变换信息
|
||||
svg.size(origWidth, origHeight)
|
||||
draw.transform(origTransform)
|
||||
return {
|
||||
svg: clone, // 思维导图图形的整体svg元素，包括：svg（画布容器）、g（实际的思维导图组）
|
||||
svgHTML: clone.svg(), // svg字符串
|
||||
clipData,
|
||||
rect: {
|
||||
...rect, // 思维导图图形未缩放时的位置尺寸等信息
|
||||
ratio: rect.width / rect.height // 思维导图图形的宽高比
|
||||
},
|
||||
origWidth, // 画布宽度
|
||||
origHeight, // 画布高度
|
||||
scaleX: origTransform.scaleX, // 思维导图图形的水平缩放值
|
||||
scaleY: origTransform.scaleY // 思维导图图形的垂直缩放值
|
||||
}
|
||||
}
|
||||
|
||||
// 扩展节点形状
|
||||
addShape(shape) {
|
||||
if (!shape) return
|
||||
const exist = this.extendShapeList.find(item => {
|
||||
return item.name === shape.name
|
||||
})
|
||||
if (exist) return
|
||||
this.extendShapeList.push(shape)
|
||||
}
|
||||
|
||||
// 删除扩展的形状
|
||||
removeShape(name) {
|
||||
const index = this.extendShapeList.findIndex(item => {
|
||||
return item.name === name
|
||||
})
|
||||
if (index !== -1) {
|
||||
this.extendShapeList.splice(index, 1)
|
||||
}
|
||||
}
|
||||
|
||||
// 获取SVG.js库的一些对象
|
||||
getSvgObjects() {
|
||||
return {
|
||||
SVG,
|
||||
G,
|
||||
Rect
|
||||
}
|
||||
}
|
||||
|
||||
// 添加插件
|
||||
addPlugin(plugin, opt) {
|
||||
let index = MindMap.hasPlugin(plugin)
|
||||
if (index === -1) {
|
||||
MindMap.usePlugin(plugin, opt)
|
||||
}
|
||||
this.initPlugin(plugin)
|
||||
}
|
||||
|
||||
// 移除插件
|
||||
removePlugin(plugin) {
|
||||
let index = MindMap.hasPlugin(plugin)
|
||||
if (index !== -1) {
|
||||
MindMap.pluginList.splice(index, 1)
|
||||
if (this[plugin.instanceName]) {
|
||||
if (this[plugin.instanceName].beforePluginRemove) {
|
||||
this[plugin.instanceName].beforePluginRemove()
|
||||
}
|
||||
delete this[plugin.instanceName]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 实例化插件
|
||||
initPlugin(plugin) {
|
||||
if (this[plugin.instanceName]) return
|
||||
this[plugin.instanceName] = new plugin({
|
||||
mindMap: this,
|
||||
pluginOpt: plugin.pluginOpt
|
||||
})
|
||||
}
|
||||
|
||||
// 销毁
|
||||
destroy() {
|
||||
this.emit('beforeDestroy')
|
||||
// 清除节点编辑框
|
||||
this.renderer.textEdit.hideEditTextBox()
|
||||
this.renderer.textEdit.removeTextEditEl()
|
||||
// 移除插件
|
||||
;[...MindMap.pluginList].forEach(plugin => {
|
||||
if (
|
||||
this[plugin.instanceName] &&
|
||||
this[plugin.instanceName].beforePluginDestroy
|
||||
) {
|
||||
this[plugin.instanceName].beforePluginDestroy()
|
||||
}
|
||||
this[plugin.instanceName] = null
|
||||
})
|
||||
// 解绑事件
|
||||
this.event.unbind()
|
||||
// 移除画布节点
|
||||
this.svg.remove()
|
||||
// 去除给容器元素设置的背景样式
|
||||
Style.removeBackgroundStyle(this.el)
|
||||
// 移除给容器元素添加的类名
|
||||
this.el.classList.remove('smm-mind-map-container')
|
||||
this.el.innerHTML = ''
|
||||
this.el = null
|
||||
this.removeCss()
|
||||
MindMap.instanceCount--
|
||||
}
|
||||
}
|
||||
|
||||
// 扩展节点数据中非样式的字段列表
|
||||
// 内部会根据这个列表判断，如果不在这个列表里的字段都会认为是样式字段
|
||||
/*
|
||||
比如一个节点的数据为：
|
||||
|
||||
{
|
||||
data: {
|
||||
text: '',
|
||||
note: '',
|
||||
color: ''
|
||||
},
|
||||
children: []
|
||||
}
|
||||
|
||||
color字段不在nodeDataNoStylePropList列表中，所以是样式，内部一些操作的方法会用到，所以如果你新增了自定义的节点数据，并且不是`_`开头的，那么需要通过该方法扩展
|
||||
*/
|
||||
let _extendNodeDataNoStylePropList = []
|
||||
MindMap.extendNodeDataNoStylePropList = (list = []) => {
|
||||
_extendNodeDataNoStylePropList.push(...list)
|
||||
nodeDataNoStylePropList.push(...list)
|
||||
}
|
||||
MindMap.resetNodeDataNoStylePropList = () => {
|
||||
_extendNodeDataNoStylePropList.forEach(item => {
|
||||
const index = nodeDataNoStylePropList.findIndex(item2 => {
|
||||
return item2 === item
|
||||
})
|
||||
if (index !== -1) {
|
||||
nodeDataNoStylePropList.splice(index, 1)
|
||||
}
|
||||
})
|
||||
_extendNodeDataNoStylePropList = []
|
||||
}
|
||||
|
||||
// 插件列表
|
||||
MindMap.pluginList = []
|
||||
MindMap.usePlugin = (plugin, opt = {}) => {
|
||||
if (MindMap.hasPlugin(plugin) !== -1) return MindMap
|
||||
plugin.pluginOpt = opt
|
||||
MindMap.pluginList.push(plugin)
|
||||
return MindMap
|
||||
}
|
||||
MindMap.hasPlugin = plugin => {
|
||||
return MindMap.pluginList.findIndex(item => {
|
||||
return item === plugin
|
||||
})
|
||||
}
|
||||
MindMap.instanceCount = 0
|
||||
|
||||
// 定义新主题
|
||||
MindMap.defineTheme = (name, config = {}) => {
|
||||
if (theme[name]) {
|
||||
return new Error('该主题名称已存在')
|
||||
}
|
||||
theme[name] = mergeTheme(defaultTheme, config)
|
||||
}
|
||||
// 移除主题
|
||||
MindMap.removeTheme = name => {
|
||||
if (theme[name]) {
|
||||
theme[name] = null
|
||||
}
|
||||
}
|
||||
|
||||
export default MindMap
|
||||
Generated
+3897
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,53 @@
|
||||
{
|
||||
"name": "simple-mind-map",
|
||||
"version": "0.14.0-fix.3",
|
||||
"description": "一个简单的web在线思维导图",
|
||||
"authors": [
|
||||
{
|
||||
"name": "思绪思维导图",
|
||||
"url": "https://sxmind.cn/"
|
||||
}
|
||||
],
|
||||
"types": "./types/index.d.ts",
|
||||
"typings": "./types/index.d.ts",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/wanglin2/mind-map"
|
||||
},
|
||||
"scripts": {
|
||||
"lint": "eslint src/",
|
||||
"format": "prettier --write .",
|
||||
"types": "npx -p typescript tsc index.js --declaration --allowJs --emitDeclarationOnly --outDir types --target es2017 --skipLibCheck & node ./bin/createPluginsTypeFiles.js",
|
||||
"wsServe": "node ./bin/wsServer.mjs"
|
||||
},
|
||||
"module": "index.js",
|
||||
"main": "./dist/simpleMindMap.umd.min.js",
|
||||
"dependencies": {
|
||||
"@svgdotjs/svg.js": "3.2.0",
|
||||
"deepmerge": "^1.5.2",
|
||||
"eventemitter3": "^4.0.7",
|
||||
"jszip": "^3.10.1",
|
||||
"katex": "^0.16.8",
|
||||
"mdast-util-from-markdown": "^1.3.0",
|
||||
"pdf-lib": "^1.17.1",
|
||||
"quill": "^2.0.3",
|
||||
"tern": "^0.24.3",
|
||||
"uuid": "^9.0.0",
|
||||
"ws": "^7.5.9",
|
||||
"xml-js": "^1.6.11",
|
||||
"y-webrtc": "^10.2.5",
|
||||
"yjs": "^13.6.8"
|
||||
},
|
||||
"keywords": [
|
||||
"javascript",
|
||||
"svg",
|
||||
"mind-map",
|
||||
"mindMap",
|
||||
"MindMap"
|
||||
],
|
||||
"devDependencies": {
|
||||
"eslint": "^8.25.0",
|
||||
"prettier": "^2.7.1"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
// 遍历所有js文件
|
||||
const path = require('path')
|
||||
const fs = require('fs')
|
||||
|
||||
const entryPath = path.resolve(__dirname, '../src')
|
||||
|
||||
const transform = dir => {
|
||||
let dirs = fs.readdirSync(dir)
|
||||
dirs.forEach(item => {
|
||||
let file = path.join(dir, item)
|
||||
if (fs.statSync(file).isDirectory()) {
|
||||
transform(file)
|
||||
} else if (/\.js$/.test(file)) {
|
||||
transformFile(file)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const transformFile = file => {
|
||||
console.log(file)
|
||||
let content = fs.readFileSync(file, 'utf-8')
|
||||
countCodeLines(content)
|
||||
// transformComments(file, content)
|
||||
}
|
||||
|
||||
// 统计代码行数
|
||||
let totalLines = 0
|
||||
const countCodeLines = content => {
|
||||
totalLines += content.split(/\n/).length
|
||||
}
|
||||
|
||||
// 转换注释类型
|
||||
const transformComments = (file, content) => {
|
||||
console.log('当前转换文件：', file)
|
||||
content = content.replace(/\/\*\*[^/]+\*\//g, str => {
|
||||
let res = /@Desc:([^\n]+)\n/g.exec(str)
|
||||
if (res.length > 0) {
|
||||
return '// ' + res[1]
|
||||
}
|
||||
})
|
||||
fs.writeFileSync(file, content)
|
||||
}
|
||||
|
||||
transform(entryPath)
|
||||
transformFile(path.join(__dirname, '../index.js'))
|
||||
console.log(totalLines)
|
||||
@@ -0,0 +1,271 @@
|
||||
// 常量
|
||||
export const CONSTANTS = {
|
||||
CHANGE_THEME: 'changeTheme',
|
||||
CHANGE_LAYOUT: 'changeLayout',
|
||||
MODE: {
|
||||
READONLY: 'readonly',
|
||||
EDIT: 'edit'
|
||||
},
|
||||
LAYOUT: {
|
||||
LOGICAL_STRUCTURE: 'logicalStructure',
|
||||
LOGICAL_STRUCTURE_LEFT: 'logicalStructureLeft',
|
||||
MIND_MAP: 'mindMap',
|
||||
ORGANIZATION_STRUCTURE: 'organizationStructure',
|
||||
CATALOG_ORGANIZATION: 'catalogOrganization',
|
||||
TIMELINE: 'timeline',
|
||||
TIMELINE2: 'timeline2',
|
||||
FISHBONE: 'fishbone',
|
||||
FISHBONE2: 'fishbone2',
|
||||
RIGHT_FISHBONE: 'rightFishbone',
|
||||
RIGHT_FISHBONE2: 'rightFishbone2',
|
||||
VERTICAL_TIMELINE: 'verticalTimeline',
|
||||
VERTICAL_TIMELINE2: 'verticalTimeline2',
|
||||
VERTICAL_TIMELINE3: 'verticalTimeline3'
|
||||
},
|
||||
DIR: {
|
||||
UP: 'up',
|
||||
LEFT: 'left',
|
||||
DOWN: 'down',
|
||||
RIGHT: 'right'
|
||||
},
|
||||
KEY_DIR: {
|
||||
LEFT: 'Left',
|
||||
UP: 'Up',
|
||||
RIGHT: 'Right',
|
||||
DOWN: 'Down'
|
||||
},
|
||||
SHAPE: {
|
||||
RECTANGLE: 'rectangle',
|
||||
DIAMOND: 'diamond',
|
||||
PARALLELOGRAM: 'parallelogram',
|
||||
ROUNDED_RECTANGLE: 'roundedRectangle',
|
||||
OCTAGONAL_RECTANGLE: 'octagonalRectangle',
|
||||
OUTER_TRIANGULAR_RECTANGLE: 'outerTriangularRectangle',
|
||||
INNER_TRIANGULAR_RECTANGLE: 'innerTriangularRectangle',
|
||||
ELLIPSE: 'ellipse',
|
||||
CIRCLE: 'circle'
|
||||
},
|
||||
MOUSE_WHEEL_ACTION: {
|
||||
ZOOM: 'zoom',
|
||||
MOVE: 'move'
|
||||
},
|
||||
INIT_ROOT_NODE_POSITION: {
|
||||
LEFT: 'left',
|
||||
TOP: 'top',
|
||||
RIGHT: 'right',
|
||||
BOTTOM: 'bottom',
|
||||
CENTER: 'center'
|
||||
},
|
||||
LAYOUT_GROW_DIR: {
|
||||
LEFT: 'left',
|
||||
TOP: 'top',
|
||||
RIGHT: 'right',
|
||||
BOTTOM: 'bottom'
|
||||
},
|
||||
PASTE_TYPE: {
|
||||
CLIP_BOARD: 'clipBoard',
|
||||
CANVAS: 'canvas'
|
||||
},
|
||||
SCROLL_BAR_DIR: {
|
||||
VERTICAL: 'vertical',
|
||||
HORIZONTAL: 'horizontal'
|
||||
},
|
||||
CREATE_NEW_NODE_BEHAVIOR: {
|
||||
DEFAULT: 'default',
|
||||
NOT_ACTIVE: 'notActive',
|
||||
ACTIVE_ONLY: 'activeOnly'
|
||||
},
|
||||
TAG_PLACEMENT: {
|
||||
RIGHT: 'right',
|
||||
BOTTOM: 'bottom'
|
||||
},
|
||||
IMG_PLACEMENT: {
|
||||
LEFT: 'left',
|
||||
TOP: 'top',
|
||||
RIGHT: 'right',
|
||||
BOTTOM: 'bottom'
|
||||
}
|
||||
}
|
||||
|
||||
export const initRootNodePositionMap = {
|
||||
[CONSTANTS.INIT_ROOT_NODE_POSITION.LEFT]: 0,
|
||||
[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
|
||||
}
|
||||
|
||||
// 布局结构列表
|
||||
export const layoutList = [
|
||||
{
|
||||
name: '逻辑结构图',
|
||||
value: CONSTANTS.LAYOUT.LOGICAL_STRUCTURE
|
||||
},
|
||||
{
|
||||
name: '向左逻辑结构图',
|
||||
value: CONSTANTS.LAYOUT.LOGICAL_STRUCTURE_LEFT
|
||||
},
|
||||
{
|
||||
name: '思维导图',
|
||||
value: CONSTANTS.LAYOUT.MIND_MAP
|
||||
},
|
||||
{
|
||||
name: '组织结构图',
|
||||
value: CONSTANTS.LAYOUT.ORGANIZATION_STRUCTURE
|
||||
},
|
||||
{
|
||||
name: '目录组织图',
|
||||
value: CONSTANTS.LAYOUT.CATALOG_ORGANIZATION
|
||||
},
|
||||
{
|
||||
name: '时间轴',
|
||||
value: CONSTANTS.LAYOUT.TIMELINE
|
||||
},
|
||||
{
|
||||
name: '时间轴2',
|
||||
value: CONSTANTS.LAYOUT.TIMELINE2
|
||||
},
|
||||
{
|
||||
name: '竖向时间轴',
|
||||
value: CONSTANTS.LAYOUT.VERTICAL_TIMELINE
|
||||
},
|
||||
{
|
||||
name: '竖向时间轴2',
|
||||
value: CONSTANTS.LAYOUT.VERTICAL_TIMELINE2
|
||||
},
|
||||
{
|
||||
name: '竖向时间轴3',
|
||||
value: CONSTANTS.LAYOUT.VERTICAL_TIMELINE3
|
||||
},
|
||||
{
|
||||
name: '鱼骨图',
|
||||
value: CONSTANTS.LAYOUT.FISHBONE
|
||||
},
|
||||
{
|
||||
name: '鱼骨图2',
|
||||
value: CONSTANTS.LAYOUT.FISHBONE2
|
||||
},
|
||||
{
|
||||
name: '向右鱼骨图',
|
||||
value: CONSTANTS.LAYOUT.RIGHT_FISHBONE
|
||||
},
|
||||
{
|
||||
name: '向右鱼骨图2',
|
||||
value: CONSTANTS.LAYOUT.RIGHT_FISHBONE2
|
||||
}
|
||||
]
|
||||
export const layoutValueList = [
|
||||
CONSTANTS.LAYOUT.LOGICAL_STRUCTURE,
|
||||
CONSTANTS.LAYOUT.LOGICAL_STRUCTURE_LEFT,
|
||||
CONSTANTS.LAYOUT.MIND_MAP,
|
||||
CONSTANTS.LAYOUT.CATALOG_ORGANIZATION,
|
||||
CONSTANTS.LAYOUT.ORGANIZATION_STRUCTURE,
|
||||
CONSTANTS.LAYOUT.TIMELINE,
|
||||
CONSTANTS.LAYOUT.TIMELINE2,
|
||||
CONSTANTS.LAYOUT.VERTICAL_TIMELINE,
|
||||
CONSTANTS.LAYOUT.VERTICAL_TIMELINE2,
|
||||
CONSTANTS.LAYOUT.VERTICAL_TIMELINE3,
|
||||
CONSTANTS.LAYOUT.FISHBONE,
|
||||
CONSTANTS.LAYOUT.FISHBONE2,
|
||||
CONSTANTS.LAYOUT.RIGHT_FISHBONE,
|
||||
CONSTANTS.LAYOUT.RIGHT_FISHBONE2
|
||||
]
|
||||
|
||||
// 节点数据中非样式的字段
|
||||
export const nodeDataNoStylePropList = [
|
||||
'text',
|
||||
'image',
|
||||
'imageTitle',
|
||||
'imageSize',
|
||||
'icon',
|
||||
'tag',
|
||||
'hyperlink',
|
||||
'hyperlinkTitle',
|
||||
'note',
|
||||
'expand',
|
||||
'isActive',
|
||||
'generalization',
|
||||
'richText',
|
||||
'resetRichText', // 重新创建富文本内容，去掉原有样式
|
||||
'uid',
|
||||
'activeStyle',
|
||||
'associativeLineTargets',
|
||||
'associativeLineTargetControlOffsets',
|
||||
'associativeLinePoint',
|
||||
'associativeLineText',
|
||||
'attachmentUrl',
|
||||
'attachmentName',
|
||||
'notation',
|
||||
'outerFrame',
|
||||
'number',
|
||||
'range',
|
||||
'customLeft',
|
||||
'customTop',
|
||||
'customTextWidth',
|
||||
'checkbox',
|
||||
'dir',
|
||||
'needUpdate', // 重新创建节点内容
|
||||
'imgMap',
|
||||
'nodeLink'
|
||||
]
|
||||
|
||||
// 错误类型
|
||||
export const ERROR_TYPES = {
|
||||
READ_CLIPBOARD_ERROR: 'read_clipboard_error',
|
||||
PARSE_PASTE_DATA_ERROR: 'parse_paste_data_error',
|
||||
CUSTOM_HANDLE_CLIPBOARD_TEXT_ERROR: 'custom_handle_clipboard_text_error',
|
||||
LOAD_CLIPBOARD_IMAGE_ERROR: 'load_clipboard_image_error',
|
||||
BEFORE_TEXT_EDIT_ERROR: 'before_text_edit_error',
|
||||
EXPORT_ERROR: 'export_error',
|
||||
EXPORT_LOAD_IMAGE_ERROR: 'export_load_image_error',
|
||||
DATA_CHANGE_DETAIL_EVENT_ERROR: 'data_change_detail_event_error'
|
||||
}
|
||||
|
||||
// css
|
||||
export const cssContent = `
|
||||
/* 鼠标hover和激活时渲染的矩形 */
|
||||
.smm-hover-node{
|
||||
display: none;
|
||||
opacity: 0.6;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.smm-node:not(.smm-node-dragging):hover .smm-hover-node{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.smm-node.active .smm-hover-node, .smm-node-highlight .smm-hover-node{
|
||||
display: block;
|
||||
opacity: 1;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.smm-text-node-wrap, .smm-expand-btn-text {
|
||||
user-select: none;
|
||||
}
|
||||
`
|
||||
|
||||
// html自闭合标签列表
|
||||
export const selfCloseTagList = [
|
||||
'img',
|
||||
'br',
|
||||
'hr',
|
||||
'input',
|
||||
'link',
|
||||
'meta',
|
||||
'area'
|
||||
]
|
||||
|
||||
// 非富文本模式下的节点文本行高
|
||||
export const noneRichTextNodeLineHeight = 1.2
|
||||
|
||||
// 富文本支持的样式列表
|
||||
export const richTextSupportStyleList = [
|
||||
'fontFamily',
|
||||
'fontSize',
|
||||
'fontWeight',
|
||||
'fontStyle',
|
||||
'textDecoration',
|
||||
'color',
|
||||
'textAlign'
|
||||
]
|
||||
@@ -0,0 +1,523 @@
|
||||
import { CONSTANTS } from './constant'
|
||||
|
||||
// 默认选项配置
|
||||
export const defaultOpt = {
|
||||
// 【基本】
|
||||
// 容器元素，必传，必须为DOM元素
|
||||
el: null,
|
||||
// 思维导图回显数据
|
||||
data: null,
|
||||
// 要恢复的视图数据，一般通过mindMap.view.getTransformData()方法获取
|
||||
viewData: null,
|
||||
// 是否只读
|
||||
readonly: false,
|
||||
// 布局
|
||||
layout: CONSTANTS.LAYOUT.LOGICAL_STRUCTURE,
|
||||
// 如果结构为鱼骨图，那么可以通过该选项控制倾斜角度
|
||||
fishboneDeg: 45,
|
||||
// 主题
|
||||
theme: 'default', // 内置主题：default（默认主题）
|
||||
// 主题配置，会和所选择的主题进行合并
|
||||
themeConfig: {},
|
||||
// 放大缩小的增量比例
|
||||
scaleRatio: 0.2,
|
||||
// 平移的步长比例，只在鼠标滚轮和触控板触发的平移中应用
|
||||
translateRatio: 1,
|
||||
// 最小缩小值，百分数，最小为0，该选项只会影响view.narrow方法（影响的行为为Ctrl+-快捷键、鼠标滚轮及触控板），不会影响其他方法，比如view.setScale，所以需要你自行限制大小
|
||||
minZoomRatio: 20,
|
||||
// 最大放大值，百分数，传-1代表不限制，否则传0以上数字，，该选项只会影响view.enlarge方法
|
||||
maxZoomRatio: 400,
|
||||
// 自定义判断wheel事件是否来自电脑的触控板
|
||||
// 默认是通过判断e.deltaY的值是否小于10，显然这种方法是不准确的，当鼠标滚动的很慢，或者触摸移动的很快时判断就失效了，如果你有更好的方法，欢迎提交issue
|
||||
// 如果你希望自己来判断，那么传递一个函数，接收一个参数e（事件对象），需要返回true或false，代表是否是来自触控板
|
||||
customCheckIsTouchPad: null,
|
||||
// 鼠标缩放是否以鼠标当前位置为中心点，否则以画布中心点
|
||||
mouseScaleCenterUseMousePosition: true,
|
||||
// 最多显示几个标签
|
||||
maxTag: 5,
|
||||
// 展开收缩按钮尺寸
|
||||
expandBtnSize: 20,
|
||||
// 节点里图片和文字的间距
|
||||
imgTextMargin: 5,
|
||||
// 节点里各种文字信息的间距，如图标和文字的间距
|
||||
textContentMargin: 2,
|
||||
// 自定义节点备注内容显示
|
||||
customNoteContentShow: null,
|
||||
/*
|
||||
{
|
||||
show(){},
|
||||
hide(){}
|
||||
}
|
||||
*/
|
||||
// 达到该宽度文本自动换行
|
||||
textAutoWrapWidth: 500,
|
||||
// 自定义鼠标滚轮事件处理
|
||||
// 可以传一个函数，回调参数为事件对象
|
||||
customHandleMousewheel: null,
|
||||
// 鼠标滚动的行为，如果customHandleMousewheel传了自定义函数，这个属性不生效
|
||||
mousewheelAction: CONSTANTS.MOUSE_WHEEL_ACTION.MOVE, // zoom（放大缩小）、move（上下移动）
|
||||
// 当mousewheelAction设为move时，可以通过该属性控制鼠标滚动一下视图移动的步长，单位px
|
||||
mousewheelMoveStep: 100,
|
||||
// 当mousewheelAction设为zoom时，或者按住Ctrl键时，默认向前滚动是缩小，向后滚动是放大，如果该属性设为true，那么会反过来
|
||||
mousewheelZoomActionReverse: true,
|
||||
// 默认插入的二级节点的文字
|
||||
defaultInsertSecondLevelNodeText: '二级节点',
|
||||
// 默认插入的二级以下节点的文字
|
||||
defaultInsertBelowSecondLevelNodeText: '分支主题',
|
||||
// 展开收起按钮的颜色
|
||||
expandBtnStyle: {
|
||||
color: '#808080',
|
||||
fill: '#fff',
|
||||
fontSize: 13,
|
||||
strokeColor: '#333333'
|
||||
},
|
||||
// 自定义展开收起按钮的图标
|
||||
expandBtnIcon: {
|
||||
open: '', // svg字符串
|
||||
close: ''
|
||||
},
|
||||
// 处理收起节点数量
|
||||
expandBtnNumHandler: null,
|
||||
// 是否显示带数量的收起按钮
|
||||
isShowExpandNum: true,
|
||||
// 是否只有当鼠标在画布内才响应快捷键事件
|
||||
enableShortcutOnlyWhenMouseInSvg: true,
|
||||
// 自定义判断是否响应快捷键事件，优先级比enableShortcutOnlyWhenMouseInSvg选项高
|
||||
// 可以传递一个函数，接收事件对象e为参数，需要返回true或false，返回true代表允许响应快捷键事件，反之不允许，库默认当事件目标为body，或为文本编辑框元素（普通文本编辑框、富文本编辑框、关联线文本编辑框）时响应快捷键，其他不响应
|
||||
customCheckEnableShortcut: null,
|
||||
// 初始根节点的位置
|
||||
initRootNodePosition: null,
|
||||
// 节点文本编辑框的z-index
|
||||
nodeTextEditZIndex: 3000,
|
||||
// 节点备注浮层的z-index
|
||||
nodeNoteTooltipZIndex: 3000,
|
||||
// 是否在点击了画布外的区域时结束节点文本的编辑状态
|
||||
isEndNodeTextEditOnClickOuter: true,
|
||||
// 最大历史记录数
|
||||
maxHistoryCount: 500,
|
||||
// 是否一直显示节点的展开收起按钮，默认为鼠标移上去和激活时才显示
|
||||
alwaysShowExpandBtn: false,
|
||||
// 不显示展开收起按钮，优先级比alwaysShowExpandBtn配置高
|
||||
notShowExpandBtn: false,
|
||||
// 扩展节点可插入的图标
|
||||
iconList: [
|
||||
// {
|
||||
// name: '',// 分组名称
|
||||
// type: '',// 分组的值
|
||||
// list: [// 分组下的图标列表
|
||||
// {
|
||||
// name: '',// 图标名称
|
||||
// icon:''// 图标，可以传svg或图片
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
],
|
||||
// 节点最大缓存数量
|
||||
maxNodeCacheCount: 1000,
|
||||
// 思维导图适应画布大小时的内边距
|
||||
fitPadding: 50,
|
||||
// 是否开启按住ctrl键多选节点功能
|
||||
enableCtrlKeyNodeSelection: true,
|
||||
// 设置为左键多选节点，右键拖动画布
|
||||
useLeftKeySelectionRightKeyDrag: false,
|
||||
// 节点即将进入编辑前的回调方法，如果该方法返回true以外的值，那么将取消编辑，函数可以返回一个值，或一个Promise，回调参数为节点实例
|
||||
beforeTextEdit: null,
|
||||
// 是否开启自定义节点内容
|
||||
isUseCustomNodeContent: false,
|
||||
// 自定义返回节点内容的方法
|
||||
customCreateNodeContent: null,
|
||||
// 指定内部一些元素（节点文本编辑元素、节点备注显示元素、关联线文本编辑元素、节点图片调整按钮元素）添加到的位置，默认添加到document.body下
|
||||
customInnerElsAppendTo: null,
|
||||
// 是否在存在一个激活节点时，当按下中文、英文、数字按键时自动进入文本编辑模式
|
||||
// 开启该特性后，需要给你的输入框绑定keydown事件，并禁止冒泡
|
||||
enableAutoEnterTextEditWhenKeydown: false,
|
||||
// 当enableAutoEnterTextEditWhenKeydown选项开启时生效，当通过按键进入文本编辑时是否自动清空原有文本
|
||||
autoEmptyTextWhenKeydownEnterEdit: false,
|
||||
// 自定义对剪贴板文本的处理。当按ctrl+v粘贴时会读取用户剪贴板中的文本和图片，默认只会判断文本是否是普通文本和simple-mind-map格式的节点数据，如果你想处理其他思维导图的数据，比如processon、zhixi等，那么可以传递一个函数，接受当前剪贴板中的文本为参数，返回处理后的数据，可以返回两种类型：
|
||||
/*
|
||||
1.返回一个纯文本，那么会直接以该文本创建一个子节点
|
||||
|
||||
2.返回一个节点对象，格式如下：
|
||||
{
|
||||
// 代表是simple-mind-map格式的数据
|
||||
simpleMindMap: true,
|
||||
// 节点数据，同simple-mind-map节点数据格式
|
||||
data: {
|
||||
data: {
|
||||
text: ''
|
||||
},
|
||||
children: []
|
||||
}
|
||||
}
|
||||
*/
|
||||
// 如果你的处理逻辑存在异步逻辑，也可以返回一个promise
|
||||
customHandleClipboardText: null,
|
||||
// 禁止鼠标滚轮缩放，你仍旧可以使用api进行缩放
|
||||
disableMouseWheelZoom: false,
|
||||
// 错误处理函数
|
||||
errorHandler: (code, error) => {
|
||||
console.error(code, error)
|
||||
},
|
||||
// 是否在鼠标双击时回到根节点，也就是让根节点居中显示
|
||||
enableDblclickBackToRootNode: false,
|
||||
// 节点鼠标hover和激活时显示的矩形边框的颜色
|
||||
hoverRectColor: 'rgb(94, 200, 248)',
|
||||
// 节点鼠标hover和激活时显示的矩形边框距节点内容的距离
|
||||
hoverRectPadding: 2,
|
||||
// 双击节点进入节点文本编辑时是否默认选中文本，默认只在创建新节点时会选中
|
||||
selectTextOnEnterEditText: false,
|
||||
// 删除节点后激活相邻节点
|
||||
deleteNodeActive: true,
|
||||
// 是否首次加载fit view
|
||||
fit: false,
|
||||
// 自定义标签的颜色
|
||||
// {pass: 'green, unpass: 'red'}
|
||||
tagsColorMap: {},
|
||||
// 节点协作样式配置
|
||||
cooperateStyle: {
|
||||
avatarSize: 22, // 头像大小
|
||||
fontSize: 12 // 如果是文字头像，那么文字的大小
|
||||
},
|
||||
// 协同编辑时，同一个节点不能同时被多人选中
|
||||
onlyOneEnableActiveNodeOnCooperate: false,
|
||||
// 插入概要的默认文本
|
||||
defaultGeneralizationText: '概要',
|
||||
// 粘贴文本的方式创建新节点时，控制是否按换行自动分割节点，即如果存在换行，那么会根据换行创建多个节点，否则只会创建一个节点
|
||||
// 可以传递一个函数，返回promise，resolve代表根据换行分割，reject代表忽略换行
|
||||
handleIsSplitByWrapOnPasteCreateNewNode: null,
|
||||
// 多少时间内只允许添加一次历史记录，避免添加没有必要的中间状态，单位：ms
|
||||
addHistoryTime: 100,
|
||||
// 是否禁止拖动画布
|
||||
isDisableDrag: false,
|
||||
// 创建新节点时的行为
|
||||
/*
|
||||
DEFAULT ：默认会激活新创建的节点，并且进入编辑模式。如果同时创建了多个新节点，那么只会激活而不会进入编辑模式
|
||||
NOT_ACTIVE : 不激活新创建的节点
|
||||
ACTIVE_ONLY : 只激活新创建的节点，不进入编辑模式
|
||||
*/
|
||||
createNewNodeBehavior: CONSTANTS.CREATE_NEW_NODE_BEHAVIOR.DEFAULT,
|
||||
// 当节点图片加载失败时显示的默认图片
|
||||
defaultNodeImage: '',
|
||||
// 是否将思维导图限制在画布内
|
||||
// 比如向右拖动时，思维导图图形的最左侧到达画布中心时将无法继续向右拖动，其他同理
|
||||
isLimitMindMapInCanvas: false,
|
||||
// 在节点上粘贴剪贴板中的图片的处理方法，默认是转换为data:url数据插入到节点中，你可以通过该方法来将图片数据上传到服务器，实现保存图片的url
|
||||
// 可以传递一个异步方法，接收Blob类型的图片数据，需要返回如下结构：
|
||||
/*
|
||||
{
|
||||
url, // 图片url
|
||||
size: {
|
||||
width, // 图片的宽度
|
||||
height //图片的高度
|
||||
}
|
||||
}
|
||||
*/
|
||||
handleNodePasteImg: null,
|
||||
// 自定义创建节点形状的方法，可以传一个函数，均接收一个参数
|
||||
// 矩形、圆角矩形、椭圆、圆等形状会调用该方法
|
||||
// 接收svg path字符串，返回svg节点
|
||||
customCreateNodePath: null,
|
||||
// 菱形、平行四边形、八角矩形、外三角矩形、内三角矩形等形状会调用该方法
|
||||
// 接收points数组点位，返回svg节点
|
||||
customCreateNodePolygon: null,
|
||||
// 自定义转换节点连线路径的方法
|
||||
// 接收svg path字符串，返回转换后的svg path字符串
|
||||
customTransformNodeLinePath: null,
|
||||
// 快捷键操作即将执行前的生命周期函数，返回true可以阻止操作执行
|
||||
// 函数接收两个参数：key（快捷键）、activeNodeList（当前激活的节点列表）
|
||||
beforeShortcutRun: null,
|
||||
// 移动节点到画布中心、回到根节点等操作时是否将缩放层级复位为100%
|
||||
// 该选项实际影响的是render.moveNodeToCenter方法，moveNodeToCenter方法本身也存在第二个参数resetScale来设置是否复位，如果resetScale参数没有传递，那么使用resetScaleOnMoveNodeToCenter配置，否则使用resetScale配置
|
||||
resetScaleOnMoveNodeToCenter: false,
|
||||
// 添加附加的节点前置内容，前置内容指和文本同一行的区域中的前置内容，不包括节点图片部分。如果存在编号、任务勾选框内容，这里添加的前置内容会在这两者之后
|
||||
createNodePrefixContent: null,
|
||||
// 添加附加的节点后置内容，后置内容指和文本同一行的区域中的后置内容，不包括节点图片部分
|
||||
createNodePostfixContent: null,
|
||||
// 禁止粘贴用户剪贴板中的数据，禁止将复制的数据写入用户的剪贴板中
|
||||
disabledClipboard: false,
|
||||
// 自定义超链接的跳转
|
||||
// 如果不传，默认会以新窗口的方式打开超链接，可以传递一个函数，函数接收两个参数：link（超链接的url）、node（所属节点实例），只要传递了函数，就会阻止默认的跳转
|
||||
customHyperlinkJump: null,
|
||||
// 是否开启性能模式，默认情况下所有节点都会直接渲染，无论是否处于画布可视区域，这样当节点数量比较多时（1000+）会比较卡，如果你的数据量比较大，那么可以通过该配置开启性能模式，即只渲染画布可视区域内的节点，超出的节点不渲染，这样会大幅提高渲染速度，当然同时也会带来一些其他问题，比如：1.当拖动或是缩放画布时会实时计算并渲染未节点的节点，所以会带来一定卡顿；2.导出图片、svg、pdf时需要先渲染全部节点，所以会比较慢；3.其他目前未发现的问题
|
||||
openPerformance: false,
|
||||
// 性能优化模式配置
|
||||
performanceConfig: {
|
||||
time: 250, // 当视图改变后多久刷新一次节点，单位：ms，
|
||||
padding: 100, // 超出画布四周指定范围内依旧渲染节点
|
||||
removeNodeWhenOutCanvas: true // 节点移除画布可视区域后从画布删除
|
||||
},
|
||||
// 如果节点文本为空，那么为了避免空白节点高度塌陷，会用该字段指定的文本测量一个高度
|
||||
emptyTextMeasureHeightText: 'abc123我和你',
|
||||
// 是否在进行节点文本编辑时实时更新节点大小和节点位置，开启后当节点数量比较多时可能会造成卡顿
|
||||
openRealtimeRenderOnNodeTextEdit: false,
|
||||
// 默认会给容器元素el绑定mousedown事件，可通过该选项设置是否阻止其默认事件
|
||||
// 如果设置为true，会带来一定问题，比如你聚焦在思维导图外的其他输入框，点击画布就不会触发其失焦
|
||||
mousedownEventPreventDefault: false,
|
||||
// 在激活上粘贴用户剪贴板中的数据时，如果同时存在文本和图片，那么只粘贴文本，忽略图片
|
||||
onlyPasteTextWhenHasImgAndText: true,
|
||||
// 是否允许拖拽调整节点的宽度，实际上压缩的是节点里面文本内容的宽度，当节点文本内容宽度压缩到最小时无法继续压缩。如果节点存在图片，那么最小值以图片宽度和文本内容最小宽度的最大值为准（目前该特性仅在两种情况下可用：1.开启了富文本模式，即注册了RichText插件；2.自定义节点内容）
|
||||
enableDragModifyNodeWidth: true,
|
||||
// 当允许拖拽调整节点的宽度时，可以通过该选项设置节点文本内容允许压缩的最小宽度
|
||||
minNodeTextModifyWidth: 20,
|
||||
// 同minNodeTextModifyWidth，最大值，传-1代表不限制
|
||||
maxNodeTextModifyWidth: -1,
|
||||
// 自定义处理节点的连线方法，可以传递一个函数，函数接收三个参数：node（节点实例）、line（节点的某条连线，@svgjs库的path对象）, { width, color, dasharray }，dasharray（该条连线的虚线样式，为none代表实线），你可以修改line对象来达到修改节点连线样式的效果，比如增加流动效果
|
||||
customHandleLine: null,
|
||||
// 实例化完后是否立刻进行一次历史数据入栈操作
|
||||
// 即调用mindMap.command.addHistory方法
|
||||
addHistoryOnInit: true,
|
||||
// 自定义节点备注图标
|
||||
noteIcon: {
|
||||
icon: '', // svg字符串，如果不是确定要使用svg自带的样式，否则请去除其中的fill等样式属性
|
||||
style: {
|
||||
// size: 20,// 图标大小，不手动设置则会使用主题的iconSize配置
|
||||
// color: '',// 图标颜色，不手动设置则会使用节点文本的颜色
|
||||
}
|
||||
},
|
||||
// 自定义节点超链接图标
|
||||
hyperlinkIcon: {
|
||||
icon: '', // svg字符串，如果不是确定要使用svg自带的样式，否则请去除其中的fill等样式属性
|
||||
style: {
|
||||
// size: 20,// 图标大小，不手动设置则会使用主题的iconSize配置
|
||||
// color: '',// 图标颜色，不手动设置则会使用节点文本的颜色
|
||||
}
|
||||
},
|
||||
// 自定义节点附件图标
|
||||
attachmentIcon: {
|
||||
icon: '', // svg字符串，如果不是确定要使用svg自带的样式，否则请去除其中的fill等样式属性
|
||||
style: {
|
||||
// size: 20,// 图标大小，不手动设置则会使用主题的iconSize配置
|
||||
// color: '',// 图标颜色，不手动设置则会使用节点文本的颜色
|
||||
}
|
||||
},
|
||||
// 是否显示快捷创建子节点按钮
|
||||
isShowCreateChildBtnIcon: true,
|
||||
// 自定义快捷创建子节点按钮图标
|
||||
quickCreateChildBtnIcon: {
|
||||
icon: '', // svg字符串，如果不是确定要使用svg自带的样式，否则请去除其中的fill等样式属性
|
||||
style: {
|
||||
// 图标大小使用的是expandBtnSize选项
|
||||
// color: '',// 图标颜色，不手动设置则会使用expandBtnStyle选项的color字段
|
||||
}
|
||||
},
|
||||
// 自定义快捷创建子节点按钮的点击操作，
|
||||
customQuickCreateChildBtnClick: null,
|
||||
// 添加自定义的节点内容
|
||||
// 可传递一个对象，格式如下：
|
||||
/*
|
||||
{
|
||||
// 返回要添加的DOM元素详细
|
||||
create: (node) => {
|
||||
return {
|
||||
el, // DOM节点
|
||||
width: 20, // 宽高
|
||||
height: 20
|
||||
}
|
||||
},
|
||||
// 处理生成的@svgdotjs/svg.js库的ForeignObject节点实例，可以设置其在节点内的位置
|
||||
handle: ({ content, element, node }) => {
|
||||
|
||||
}
|
||||
}
|
||||
*/
|
||||
addCustomContentToNode: null,
|
||||
// 节点连线样式是否允许继承祖先的连线样式
|
||||
enableInheritAncestorLineStyle: true,
|
||||
|
||||
// 【Select插件】
|
||||
// 多选节点时鼠标移动到边缘时的画布移动偏移量
|
||||
selectTranslateStep: 3,
|
||||
// 多选节点时鼠标移动距边缘多少距离时开始偏移
|
||||
selectTranslateLimit: 20,
|
||||
|
||||
// 【Drag插件】
|
||||
// 是否开启节点自由拖拽
|
||||
enableFreeDrag: false,
|
||||
// 拖拽节点时鼠标移动到画布边缘是否开启画布自动移动
|
||||
autoMoveWhenMouseInEdgeOnDrag: true,
|
||||
// 拖拽多个节点时随鼠标移动的示意矩形的样式配置
|
||||
dragMultiNodeRectConfig: {
|
||||
width: 40,
|
||||
height: 20,
|
||||
fill: 'rgb(94, 200, 248)' // 填充颜色
|
||||
},
|
||||
// 节点拖拽时新位置的示意矩形的填充颜色
|
||||
dragPlaceholderRectFill: 'rgb(94, 200, 248)',
|
||||
// 节点拖拽时新位置的示意连线的样式配置
|
||||
dragPlaceholderLineConfig: {
|
||||
color: 'rgb(94, 200, 248)',
|
||||
width: 2
|
||||
},
|
||||
// 节点拖拽时的透明度配置
|
||||
dragOpacityConfig: {
|
||||
cloneNodeOpacity: 0.5, // 跟随鼠标移动的克隆节点或矩形的透明度
|
||||
beingDragNodeOpacity: 0.3 // 被拖拽节点的透明度
|
||||
},
|
||||
// 拖拽单个节点时会克隆被拖拽节点，如果想修改该克隆节点，那么可以通过该选项提供一个处理函数，函数接收克隆节点对象
|
||||
// 需要注意的是节点对象指的是@svgdotjs/svg.js库的元素对象，所以你需要阅读该库的文档来操作该对象
|
||||
handleDragCloneNode: null,
|
||||
// 即将拖拽完成前调用该函数，函数接收一个对象作为参数：{overlapNodeUid,prevNodeUid,nextNodeUid}，代表拖拽信息，如果要阻止本次拖拽，那么可以返回true，此时node_dragend事件不会再触发。函数可以是异步函数，返回Promise实例
|
||||
beforeDragEnd: null,
|
||||
// 即将开始调整节点前调用该函数，函数接收当前即将被拖拽的节点实例列表作为参数，如果要阻止本次拖拽，那么可以返回true
|
||||
beforeDragStart: null,
|
||||
|
||||
// 【Watermark插件】
|
||||
// 水印配置
|
||||
watermarkConfig: {
|
||||
onlyExport: false, // 是否仅在导出时添加水印
|
||||
text: '',
|
||||
lineSpacing: 100,
|
||||
textSpacing: 100,
|
||||
angle: 30,
|
||||
textStyle: {
|
||||
color: '#999',
|
||||
opacity: 0.5,
|
||||
fontSize: 14
|
||||
},
|
||||
belowNode: false
|
||||
},
|
||||
|
||||
// 【Export插件】
|
||||
// 导出png、svg、pdf时的图形内边距，注意是单侧内边距
|
||||
exportPaddingX: 10,
|
||||
exportPaddingY: 10,
|
||||
// 设置导出图片和svg时，针对富文本节点内容，也就是嵌入到svg中的html节点的默认样式覆盖
|
||||
// 如果不覆盖，会发生偏移问题
|
||||
resetCss: `
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
`,
|
||||
// 导出图片时canvas的缩放倍数，该配置会和window.devicePixelRatio值取最大值
|
||||
minExportImgCanvasScale: 2,
|
||||
// 导出png、svg、pdf时在头部和尾部添加自定义内容
|
||||
// 可传递一个函数，这个函数可以返回null代表不添加内容，也可以返回如下数据：
|
||||
/*
|
||||
{
|
||||
el,// 要追加的自定义DOM节点，样式可内联
|
||||
cssText,// 可选，如果样式不想内联，可以传递该值，一个css字符串
|
||||
height: 50// 返回的DOM节点的高度，必须传递
|
||||
}
|
||||
*/
|
||||
addContentToHeader: null,
|
||||
addContentToFooter: null,
|
||||
// 导出png、svg、pdf时会获取画布上的svg数据进行克隆，然后通过该克隆的元素进行导出，如果你想对该克隆元素做一些处理，比如新增、替换、修改其中的一些元素，那么可以通过该参数传递一个处理函数，接收svg元素对象，处理后，需要返回原svg元素对象。
|
||||
// 需要注意的是svg对象指的是@svgdotjs/svg.js库的元素对象，所以你需要阅读该库的文档来操作该对象
|
||||
handleBeingExportSvg: null,
|
||||
// 导出图片或pdf都是通过canvas将svg绘制出来，再导出，所以如果思维导图特别大，宽高可能会超出canvas支持的上限，所以会进行缩放，这个上限可以通过该参数设置，代表canvas宽和高的最大宽度
|
||||
maxCanvasSize: 16384,
|
||||
|
||||
// 【AssociativeLine插件】
|
||||
// 关联线默认文字
|
||||
defaultAssociativeLineText: '关联',
|
||||
// 关联线是否始终显示在节点上层
|
||||
// false：即创建关联线和激活关联线时处于最顶层，其他情况下处于节点下方
|
||||
associativeLineIsAlwaysAboveNode: true,
|
||||
// 默认情况下，新创建的关联线两个端点的位置是根据两个节点中心点的相对位置来计算的，如果你想固定位置，可以通过这个属性来配置
|
||||
// from和to都不传，则都自动计算，如果只传一个，另一个则会自动计算
|
||||
associativeLineInitPointsPosition: {
|
||||
// from和to可选值：left、top、bottom、right
|
||||
from: '', // 关联线起始节点上端点的位置
|
||||
to: '' // 关联线目标节点上端点的位置
|
||||
},
|
||||
// 是否允许调整关联线两个端点的位置
|
||||
enableAdjustAssociativeLinePoints: true,
|
||||
// 关联线连接即将完成时执行，如果要阻止本次连接可以返回true，函数接收一个参数：node（目标节点实例）
|
||||
beforeAssociativeLineConnection: null,
|
||||
|
||||
// 【TouchEvent插件】
|
||||
// 禁止双指缩放，你仍旧可以使用api进行缩放
|
||||
// 需要注册TouchEvent插件后生效
|
||||
disableTouchZoom: false,
|
||||
// 允许最大和最小的缩放值，百分数
|
||||
// 传-1代表不限制
|
||||
minTouchZoomScale: 20,
|
||||
maxTouchZoomScale: -1,
|
||||
|
||||
// 【Scrollbar插件】
|
||||
// 当注册了滚动条插件（Scrollbar）时，是否将思维导图限制在画布内，isLimitMindMapInCanvas不再起作用
|
||||
isLimitMindMapInCanvasWhenHasScrollbar: true,
|
||||
|
||||
// 【Search插件】
|
||||
// 是否仅搜索当前渲染的节点，被收起的节点不会被搜索到
|
||||
isOnlySearchCurrentRenderNodes: false,
|
||||
|
||||
// 【Cooperate插件】
|
||||
// 协同编辑时，节点操作即将更新到其他客户端前的生命周期函数
|
||||
// 函数接收一个对象作为参数：
|
||||
/*
|
||||
{
|
||||
type: createOrUpdate（创建节点或更新节点）、delete（删除节点）
|
||||
data: 1.当type=createOrUpdate时，代表被创建或被更新的节点数据，即将同步到其他客户端，所以你可以修改该数据；2.当type=delete时，代表被删除的节点数据
|
||||
}
|
||||
*/
|
||||
beforeCooperateUpdate: null,
|
||||
|
||||
// 【RainbowLines插件】
|
||||
// 彩虹线条配置，需要先注册RainbowLines插件
|
||||
rainbowLinesConfig: {
|
||||
open: false, // 是否开启彩虹线条
|
||||
colorsList: [] // 自定义彩虹线条的颜色列表，如果不设置，会使用默认颜色列表
|
||||
/*
|
||||
[
|
||||
'rgb(255, 213, 73)',
|
||||
'rgb(255, 136, 126)',
|
||||
'rgb(107, 225, 141)',
|
||||
'rgb(151, 171, 255)',
|
||||
'rgb(129, 220, 242)',
|
||||
'rgb(255, 163, 125)',
|
||||
'rgb(152, 132, 234)'
|
||||
]
|
||||
*/
|
||||
},
|
||||
|
||||
// 【Demonstrate插件】
|
||||
// 演示插件配置
|
||||
demonstrateConfig: null,
|
||||
|
||||
// 【Formula插件】
|
||||
// 是否开启在富文本编辑框中直接编辑数学公式
|
||||
enableEditFormulaInRichTextEdit: true,
|
||||
// katex库的字体文件的请求路径。仅当katex的output配置为html时才会请求字体文件。可以通过mindMap.formula.getKatexConfig()方法来获取当前的配置
|
||||
// 字体文件可以从node_modules中找到：katex/dist/fonts/。可以上传到你的服务器或cdn
|
||||
// 最终的字体请求路径为`${katexFontPath}fonts/KaTeX_AMS-Regular.woff2`，可以自行拼接进行测试是否可以访问
|
||||
katexFontPath: 'https://unpkg.com/katex@0.16.11/dist/',
|
||||
// 自定义katex库的输出模式。默认当Chrome内核100以下会使用html方式，否则使用mathml方式，如果你有自己的规则，那么可以传递一个函数，函数返回值为：mathml或html
|
||||
getKatexOutputType: null,
|
||||
|
||||
// 【RichText插件】
|
||||
// 转换富文本内容，当进入富文本编辑时，可以通过该参数传递一个函数，函数接收文本内容，需要返回你处理后的文本内容
|
||||
transformRichTextOnEnterEdit: null,
|
||||
// 可以传递一个函数，即将结束富文本编辑前会执行该函数，函数接收richText实例，所以你可以在此时机更新quill文档数据
|
||||
beforeHideRichTextEdit: null,
|
||||
|
||||
// 【OuterFrame】插件
|
||||
outerFramePaddingX: 10,
|
||||
outerFramePaddingY: 10,
|
||||
defaultOuterFrameText: '外框',
|
||||
|
||||
// 【Painter】插件
|
||||
// 是否只格式刷节点手动设置的样式，不考虑节点通过主题的应用的样式
|
||||
onlyPainterNodeCustomStyles: false,
|
||||
|
||||
// 【NodeImgAdjust】插件
|
||||
// 拦截节点图片的删除，点击节点图片上的删除按钮删除图片前会调用该函数，如果函数返回true则取消删除
|
||||
beforeDeleteNodeImg: null,
|
||||
// 删除和调整两个按钮的大小
|
||||
imgResizeBtnSize: 25,
|
||||
// 最小允许缩放的尺寸，请传入>=0的数字
|
||||
minImgResizeWidth: 50,
|
||||
minImgResizeHeight: 50,
|
||||
// 最大允许缩放的尺寸依据主题的配置，即主题的imgMaxWidth和imgMaxHeight配置，如果设置为false，那么使用maxImgResizeWidth和maxImgResizeHeight选项
|
||||
maxImgResizeWidthInheritTheme: false,
|
||||
// 最大允许缩放的尺寸，maxImgResizeWidthInheritTheme选项设置为false时生效，不限制最大值可传递Infinity
|
||||
maxImgResizeWidth: Infinity,
|
||||
maxImgResizeHeight: Infinity,
|
||||
// 自定义删除按钮和尺寸调整按钮的内容
|
||||
// 默认为内置图标，你可以传递一个svg字符串，或者其他的html字符串
|
||||
// 整体大小请使用上面的minImgResizeWidth和minImgResizeHeight选项设置
|
||||
customDeleteBtnInnerHTML: '',
|
||||
customResizeBtnInnerHTML: ''
|
||||
}
|
||||
@@ -0,0 +1,259 @@
|
||||
import {
|
||||
copyRenderTree,
|
||||
simpleDeepClone,
|
||||
throttle,
|
||||
isSameObject,
|
||||
transformTreeDataToObject
|
||||
} from '../../utils'
|
||||
import { ERROR_TYPES } from '../../constants/constant'
|
||||
import pkg from '../../../package.json'
|
||||
|
||||
// 命令类
|
||||
class Command {
|
||||
// 构造函数
|
||||
constructor(opt = {}) {
|
||||
this.opt = opt
|
||||
this.mindMap = opt.mindMap
|
||||
this.commands = {}
|
||||
this.history = [] // 字符串形式存储
|
||||
this.activeHistoryIndex = 0
|
||||
// 注册快捷键
|
||||
this.registerShortcutKeys()
|
||||
this.originAddHistory = this.addHistory.bind(this)
|
||||
this.addHistory = throttle(
|
||||
this.addHistory,
|
||||
this.mindMap.opt.addHistoryTime,
|
||||
this
|
||||
)
|
||||
// 是否暂停收集历史数据
|
||||
this.isPause = false
|
||||
}
|
||||
|
||||
// 暂停收集历史数据
|
||||
pause() {
|
||||
this.isPause = true
|
||||
}
|
||||
|
||||
// 恢复收集历史数据
|
||||
recovery() {
|
||||
this.isPause = false
|
||||
}
|
||||
|
||||
// 清空历史数据
|
||||
clearHistory() {
|
||||
this.history = []
|
||||
this.activeHistoryIndex = 0
|
||||
this.mindMap.emit('back_forward', 0, 0)
|
||||
}
|
||||
|
||||
// 注册快捷键
|
||||
registerShortcutKeys() {
|
||||
this.mindMap.keyCommand.addShortcut('Control+z', () => {
|
||||
this.mindMap.execCommand('BACK')
|
||||
})
|
||||
this.mindMap.keyCommand.addShortcut('Control+y', () => {
|
||||
this.mindMap.execCommand('FORWARD')
|
||||
})
|
||||
}
|
||||
|
||||
// 执行命令
|
||||
exec(name, ...args) {
|
||||
if (this.commands[name]) {
|
||||
this.commands[name].forEach(fn => {
|
||||
fn(...args)
|
||||
})
|
||||
this.mindMap.emit('afterExecCommand', name, ...args)
|
||||
if (
|
||||
['BACK', 'FORWARD', 'SET_NODE_ACTIVE', 'CLEAR_ACTIVE_NODE'].includes(
|
||||
name
|
||||
)
|
||||
) {
|
||||
return
|
||||
}
|
||||
this.addHistory()
|
||||
}
|
||||
}
|
||||
|
||||
// 添加命令
|
||||
add(name, fn) {
|
||||
if (this.commands[name]) {
|
||||
this.commands[name].push(fn)
|
||||
} else {
|
||||
this.commands[name] = [fn]
|
||||
}
|
||||
}
|
||||
|
||||
// 移除命令
|
||||
remove(name, fn) {
|
||||
if (!this.commands[name]) {
|
||||
return
|
||||
}
|
||||
if (!fn) {
|
||||
this.commands[name] = []
|
||||
delete this.commands[name]
|
||||
} else {
|
||||
let index = this.commands[name].find(item => {
|
||||
return item === fn
|
||||
})
|
||||
if (index !== -1) {
|
||||
this.commands[name].splice(index, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 添加回退数据
|
||||
addHistory() {
|
||||
if (this.mindMap.opt.readonly || this.isPause) {
|
||||
return
|
||||
}
|
||||
this.mindMap.emit('beforeAddHistory')
|
||||
const lastDataStr =
|
||||
this.history.length > 0 ? this.history[this.activeHistoryIndex] : null
|
||||
const data = this.getCopyData()
|
||||
const dataStr = JSON.stringify(data)
|
||||
// 此次数据和上次一样则不重复添加
|
||||
if (lastDataStr && lastDataStr === dataStr) {
|
||||
return
|
||||
}
|
||||
this.emitDataUpdatesEvent(lastDataStr, dataStr)
|
||||
// 删除当前历史指针后面的数据
|
||||
this.history = this.history.slice(0, this.activeHistoryIndex + 1)
|
||||
this.history.push(dataStr)
|
||||
// 历史记录数超过最大数量
|
||||
if (this.history.length > this.mindMap.opt.maxHistoryCount) {
|
||||
this.history.shift()
|
||||
}
|
||||
this.activeHistoryIndex = this.history.length - 1
|
||||
this.mindMap.emit('data_change', data)
|
||||
this.mindMap.emit(
|
||||
'back_forward',
|
||||
this.activeHistoryIndex,
|
||||
this.history.length
|
||||
)
|
||||
}
|
||||
|
||||
// 回退
|
||||
back(step = 1) {
|
||||
if (this.mindMap.opt.readonly) {
|
||||
return
|
||||
}
|
||||
if (this.activeHistoryIndex - step >= 0) {
|
||||
const lastDataStr = this.history[this.activeHistoryIndex]
|
||||
this.activeHistoryIndex -= step
|
||||
this.mindMap.emit(
|
||||
'back_forward',
|
||||
this.activeHistoryIndex,
|
||||
this.history.length
|
||||
)
|
||||
const dataStr = this.history[this.activeHistoryIndex]
|
||||
const data = JSON.parse(dataStr)
|
||||
this.emitDataUpdatesEvent(lastDataStr, dataStr)
|
||||
return data
|
||||
}
|
||||
}
|
||||
|
||||
// 前进
|
||||
forward(step = 1) {
|
||||
if (this.mindMap.opt.readonly) {
|
||||
return
|
||||
}
|
||||
let len = this.history.length
|
||||
if (this.activeHistoryIndex + step <= len - 1) {
|
||||
const lastDataStr = this.history[this.activeHistoryIndex]
|
||||
this.activeHistoryIndex += step
|
||||
this.mindMap.emit(
|
||||
'back_forward',
|
||||
this.activeHistoryIndex,
|
||||
this.history.length
|
||||
)
|
||||
const dataStr = this.history[this.activeHistoryIndex]
|
||||
const data = JSON.parse(dataStr)
|
||||
this.emitDataUpdatesEvent(lastDataStr, dataStr)
|
||||
return data
|
||||
}
|
||||
}
|
||||
|
||||
// 获取渲染树数据副本
|
||||
getCopyData() {
|
||||
if (!this.mindMap.renderer.renderTree) return null
|
||||
const res = copyRenderTree({}, this.mindMap.renderer.renderTree, true)
|
||||
res.smmVersion = pkg.version
|
||||
return res
|
||||
}
|
||||
|
||||
// 移除节点数据中的uid
|
||||
removeDataUid(data) {
|
||||
data = simpleDeepClone(data)
|
||||
let walk = root => {
|
||||
delete root.data.uid
|
||||
if (root.children && root.children.length > 0) {
|
||||
root.children.forEach(item => {
|
||||
walk(item)
|
||||
})
|
||||
}
|
||||
}
|
||||
walk(data)
|
||||
return data
|
||||
}
|
||||
|
||||
// 派发思维导图更新明细事件
|
||||
emitDataUpdatesEvent(lastDataStr, dataStr) {
|
||||
try {
|
||||
// 如果data_change_detail没有监听者，那么不进行计算，节省性能
|
||||
const eventName = 'data_change_detail'
|
||||
const count = this.mindMap.event.listenerCount(eventName)
|
||||
if (count > 0 && lastDataStr && dataStr) {
|
||||
const lastData = JSON.parse(lastDataStr)
|
||||
const data = JSON.parse(dataStr)
|
||||
const lastDataObj = simpleDeepClone(transformTreeDataToObject(lastData))
|
||||
const dataObj = simpleDeepClone(transformTreeDataToObject(data))
|
||||
const res = []
|
||||
const walkReplace = (root, obj) => {
|
||||
if (root.children && root.children.length > 0) {
|
||||
root.children.forEach((childUid, index) => {
|
||||
root.children[index] =
|
||||
typeof childUid === 'string'
|
||||
? obj[childUid]
|
||||
: obj[childUid.data.uid]
|
||||
walkReplace(root.children[index], obj)
|
||||
})
|
||||
}
|
||||
return root
|
||||
}
|
||||
// 找出新增的或修改的
|
||||
Object.keys(dataObj).forEach(uid => {
|
||||
// 新增的或已经存在的，如果数据发生了改变
|
||||
if (!lastDataObj[uid]) {
|
||||
res.push({
|
||||
action: 'create',
|
||||
data: walkReplace(dataObj[uid], dataObj)
|
||||
})
|
||||
} else if (!isSameObject(lastDataObj[uid], dataObj[uid])) {
|
||||
res.push({
|
||||
action: 'update',
|
||||
oldData: walkReplace(lastDataObj[uid], lastDataObj),
|
||||
data: walkReplace(dataObj[uid], dataObj)
|
||||
})
|
||||
}
|
||||
})
|
||||
// 找出删除的
|
||||
Object.keys(lastDataObj).forEach(uid => {
|
||||
if (!dataObj[uid]) {
|
||||
res.push({
|
||||
action: 'delete',
|
||||
data: walkReplace(lastDataObj[uid], lastDataObj)
|
||||
})
|
||||
}
|
||||
})
|
||||
this.mindMap.emit(eventName, res)
|
||||
}
|
||||
} catch (error) {
|
||||
this.mindMap.opt.errorHandler(
|
||||
ERROR_TYPES.DATA_CHANGE_DETAIL_EVENT_ERROR,
|
||||
error
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default Command
|
||||
@@ -0,0 +1,248 @@
|
||||
import { keyMap } from './keyMap'
|
||||
|
||||
// 快捷按键、命令处理类
|
||||
export default class KeyCommand {
|
||||
// 构造函数
|
||||
constructor(opt) {
|
||||
this.opt = opt
|
||||
this.mindMap = opt.mindMap
|
||||
this.shortcutMap = {
|
||||
//Enter: [fn]
|
||||
}
|
||||
this.shortcutMapCache = {}
|
||||
this.isPause = false
|
||||
this.isInSvg = false
|
||||
this.isStopCheckInSvg = false
|
||||
this.defaultEnableCheck = this.defaultEnableCheck.bind(this)
|
||||
this.bindEvent()
|
||||
}
|
||||
|
||||
// 扩展按键映射
|
||||
extendKeyMap(key, code) {
|
||||
keyMap[key] = code
|
||||
}
|
||||
|
||||
// 从按键映射中删除某个键
|
||||
removeKeyMap(key) {
|
||||
if (typeof keyMap[key] !== 'undefined') {
|
||||
delete keyMap[key]
|
||||
}
|
||||
}
|
||||
|
||||
// 暂停快捷键响应
|
||||
pause() {
|
||||
this.isPause = true
|
||||
}
|
||||
|
||||
// 恢复快捷键响应
|
||||
recovery() {
|
||||
this.isPause = false
|
||||
}
|
||||
|
||||
// 保存当前注册的快捷键数据，然后清空快捷键数据
|
||||
save() {
|
||||
// 当前已经存在缓存数据了，那么直接返回
|
||||
if (Object.keys(this.shortcutMapCache).length > 0) {
|
||||
return
|
||||
}
|
||||
this.shortcutMapCache = this.shortcutMap
|
||||
this.shortcutMap = {}
|
||||
}
|
||||
|
||||
// 恢复保存的快捷键数据，然后清空缓存数据
|
||||
restore() {
|
||||
// 当前不存在缓存数据，那么直接返回
|
||||
if (Object.keys(this.shortcutMapCache).length <= 0) {
|
||||
return
|
||||
}
|
||||
this.shortcutMap = this.shortcutMapCache
|
||||
this.shortcutMapCache = {}
|
||||
}
|
||||
|
||||
// 停止对鼠标是否在画布内的检查，前提是开启了enableShortcutOnlyWhenMouseInSvg选项
|
||||
// 库内部节点文本编辑、关联线文本编辑、外框文本编辑前都会暂停检查，否则无法响应回车快捷键用于结束编辑
|
||||
// 如果你新增了额外的文本编辑，也可以在编辑前调用此方法
|
||||
stopCheckInSvg() {
|
||||
const { enableShortcutOnlyWhenMouseInSvg } = this.mindMap.opt
|
||||
if (!enableShortcutOnlyWhenMouseInSvg) return
|
||||
this.isStopCheckInSvg = true
|
||||
}
|
||||
|
||||
// 恢复对鼠标是否在画布内的检查
|
||||
recoveryCheckInSvg() {
|
||||
const { enableShortcutOnlyWhenMouseInSvg } = this.mindMap.opt
|
||||
if (!enableShortcutOnlyWhenMouseInSvg) return
|
||||
this.isStopCheckInSvg = true
|
||||
}
|
||||
|
||||
// 绑定事件
|
||||
bindEvent() {
|
||||
this.onKeydown = this.onKeydown.bind(this)
|
||||
// 只有当鼠标在画布内才响应快捷键
|
||||
this.mindMap.on('svg_mouseenter', () => {
|
||||
this.isInSvg = true
|
||||
})
|
||||
this.mindMap.on('svg_mouseleave', () => {
|
||||
this.isInSvg = false
|
||||
})
|
||||
window.addEventListener('keydown', this.onKeydown)
|
||||
this.mindMap.on('beforeDestroy', () => {
|
||||
this.unBindEvent()
|
||||
})
|
||||
}
|
||||
|
||||
// 解绑事件
|
||||
unBindEvent() {
|
||||
window.removeEventListener('keydown', this.onKeydown)
|
||||
}
|
||||
|
||||
// 根据事件目标判断是否响应快捷键事件
|
||||
defaultEnableCheck(e) {
|
||||
const target = e.target
|
||||
if (target === document.body) return true
|
||||
for (let i = 0; i < this.mindMap.editNodeClassList.length; i++) {
|
||||
const cur = this.mindMap.editNodeClassList[i]
|
||||
if (target.classList.contains(cur)) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
// 按键事件
|
||||
onKeydown(e) {
|
||||
const {
|
||||
enableShortcutOnlyWhenMouseInSvg,
|
||||
beforeShortcutRun,
|
||||
customCheckEnableShortcut
|
||||
} = this.mindMap.opt
|
||||
const checkFn =
|
||||
typeof customCheckEnableShortcut === 'function'
|
||||
? customCheckEnableShortcut
|
||||
: this.defaultEnableCheck
|
||||
if (!checkFn(e)) return
|
||||
if (
|
||||
this.isPause ||
|
||||
(enableShortcutOnlyWhenMouseInSvg &&
|
||||
!this.isStopCheckInSvg &&
|
||||
!this.isInSvg)
|
||||
) {
|
||||
return
|
||||
}
|
||||
Object.keys(this.shortcutMap).forEach(key => {
|
||||
if (this.checkKey(e, key)) {
|
||||
// 粘贴事件不组织，因为要监听paste事件
|
||||
if (!this.checkKey(e, 'Control+v')) {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
}
|
||||
if (typeof beforeShortcutRun === 'function') {
|
||||
const isStop = beforeShortcutRun(key, [
|
||||
...this.mindMap.renderer.activeNodeList
|
||||
])
|
||||
if (isStop) return
|
||||
}
|
||||
this.shortcutMap[key].forEach(fn => {
|
||||
fn()
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 检查键值是否符合
|
||||
checkKey(e, key) {
|
||||
let o = this.getOriginEventCodeArr(e)
|
||||
let k = this.getKeyCodeArr(key)
|
||||
if (o.length !== k.length) {
|
||||
return false
|
||||
}
|
||||
for (let i = 0; i < o.length; i++) {
|
||||
let index = k.findIndex(item => {
|
||||
return item === o[i]
|
||||
})
|
||||
if (index === -1) {
|
||||
return false
|
||||
} else {
|
||||
k.splice(index, 1)
|
||||
}
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
// 获取事件对象里的键值数组
|
||||
getOriginEventCodeArr(e) {
|
||||
let arr = []
|
||||
if (e.ctrlKey || e.metaKey) {
|
||||
arr.push(keyMap['Control'])
|
||||
}
|
||||
if (e.altKey) {
|
||||
arr.push(keyMap['Alt'])
|
||||
}
|
||||
if (e.shiftKey) {
|
||||
arr.push(keyMap['Shift'])
|
||||
}
|
||||
if (!arr.includes(e.keyCode)) {
|
||||
arr.push(e.keyCode)
|
||||
}
|
||||
return arr
|
||||
}
|
||||
|
||||
// 判断是否按下了组合键
|
||||
hasCombinationKey(e) {
|
||||
return e.ctrlKey || e.metaKey || e.altKey || e.shiftKey
|
||||
}
|
||||
|
||||
// 获取快捷键对应的键值数组
|
||||
getKeyCodeArr(key) {
|
||||
let keyArr = key.split(/\s*\+\s*/)
|
||||
let arr = []
|
||||
keyArr.forEach(item => {
|
||||
arr.push(keyMap[item])
|
||||
})
|
||||
return arr
|
||||
}
|
||||
|
||||
// 添加快捷键命令
|
||||
/**
|
||||
* Enter
|
||||
* Tab | Insert
|
||||
* Shift + a
|
||||
*/
|
||||
addShortcut(key, fn) {
|
||||
key.split(/\s*\|\s*/).forEach(item => {
|
||||
if (this.shortcutMap[item]) {
|
||||
this.shortcutMap[item].push(fn)
|
||||
} else {
|
||||
this.shortcutMap[item] = [fn]
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 移除快捷键命令
|
||||
removeShortcut(key, fn) {
|
||||
key.split(/\s*\|\s*/).forEach(item => {
|
||||
if (this.shortcutMap[item]) {
|
||||
if (fn) {
|
||||
let index = this.shortcutMap[item].findIndex(f => {
|
||||
return f === fn
|
||||
})
|
||||
if (index !== -1) {
|
||||
this.shortcutMap[item].splice(index, 1)
|
||||
}
|
||||
} else {
|
||||
this.shortcutMap[item] = []
|
||||
delete this.shortcutMap[item]
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 获取指定快捷键的处理函数
|
||||
getShortcutFn(key) {
|
||||
let res = []
|
||||
key.split(/\s*\|\s*/).forEach(item => {
|
||||
res = this.shortcutMap[item] || []
|
||||
})
|
||||
return res
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
const map = {
|
||||
Backspace: 8,
|
||||
Tab: 9,
|
||||
Enter: 13,
|
||||
|
||||
Shift: 16,
|
||||
Control: 17,
|
||||
Alt: 18,
|
||||
CapsLock: 20,
|
||||
|
||||
Esc: 27,
|
||||
|
||||
Spacebar: 32,
|
||||
|
||||
PageUp: 33,
|
||||
PageDown: 34,
|
||||
End: 35,
|
||||
Home: 36,
|
||||
|
||||
Insert: 45,
|
||||
|
||||
Left: 37,
|
||||
Up: 38,
|
||||
Right: 39,
|
||||
Down: 40,
|
||||
|
||||
Del: 46,
|
||||
|
||||
NumLock: 144,
|
||||
|
||||
Cmd: 91,
|
||||
CmdFF: 224,
|
||||
F1: 112,
|
||||
F2: 113,
|
||||
F3: 114,
|
||||
F4: 115,
|
||||
F5: 116,
|
||||
F6: 117,
|
||||
F7: 118,
|
||||
F8: 119,
|
||||
F9: 120,
|
||||
F10: 121,
|
||||
F11: 122,
|
||||
F12: 123,
|
||||
|
||||
'`': 192,
|
||||
'=': 187,
|
||||
'-': 189,
|
||||
|
||||
'/': 191,
|
||||
'.': 190
|
||||
}
|
||||
|
||||
// 数字
|
||||
for (let i = 0; i <= 9; i++) {
|
||||
map[i] = i + 48
|
||||
}
|
||||
|
||||
// 字母
|
||||
'abcdefghijklmnopqrstuvwxyz'.split('').forEach((n, index) => {
|
||||
map[n] = index + 65
|
||||
})
|
||||
|
||||
export const keyMap = map
|
||||
|
||||
export const isKey = (e, key) => {
|
||||
let code = typeof e === 'object' ? e.keyCode : e
|
||||
return map[key] === code
|
||||
}
|
||||
@@ -0,0 +1,195 @@
|
||||
import EventEmitter from 'eventemitter3'
|
||||
import { CONSTANTS } from '../../constants/constant'
|
||||
|
||||
// 事件类
|
||||
class Event extends EventEmitter {
|
||||
// 构造函数
|
||||
constructor(opt = {}) {
|
||||
super()
|
||||
this.opt = opt
|
||||
this.mindMap = opt.mindMap
|
||||
this.isLeftMousedown = false
|
||||
this.isRightMousedown = false
|
||||
this.isMiddleMousedown = false
|
||||
this.mousedownPos = {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
this.mousemovePos = {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
this.mousemoveOffset = {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
this.bindFn()
|
||||
this.bind()
|
||||
}
|
||||
|
||||
// 绑定函数上下文
|
||||
bindFn() {
|
||||
this.onBodyMousedown = this.onBodyMousedown.bind(this)
|
||||
this.onBodyClick = this.onBodyClick.bind(this)
|
||||
this.onDrawClick = this.onDrawClick.bind(this)
|
||||
this.onMousedown = this.onMousedown.bind(this)
|
||||
this.onMousemove = this.onMousemove.bind(this)
|
||||
this.onMouseup = this.onMouseup.bind(this)
|
||||
this.onNodeMouseup = this.onNodeMouseup.bind(this)
|
||||
this.onMousewheel = this.onMousewheel.bind(this)
|
||||
this.onContextmenu = this.onContextmenu.bind(this)
|
||||
this.onSvgMousedown = this.onSvgMousedown.bind(this)
|
||||
this.onKeyup = this.onKeyup.bind(this)
|
||||
this.onMouseenter = this.onMouseenter.bind(this)
|
||||
this.onMouseleave = this.onMouseleave.bind(this)
|
||||
}
|
||||
|
||||
// 绑定事件
|
||||
bind() {
|
||||
document.body.addEventListener('mousedown', this.onBodyMousedown)
|
||||
document.body.addEventListener('click', this.onBodyClick)
|
||||
this.mindMap.svg.on('click', this.onDrawClick)
|
||||
this.mindMap.el.addEventListener('mousedown', this.onMousedown)
|
||||
this.mindMap.svg.on('mousedown', this.onSvgMousedown)
|
||||
window.addEventListener('mousemove', this.onMousemove)
|
||||
window.addEventListener('mouseup', this.onMouseup)
|
||||
this.on('node_mouseup', this.onNodeMouseup)
|
||||
this.mindMap.el.addEventListener('wheel', this.onMousewheel)
|
||||
this.mindMap.svg.on('contextmenu', this.onContextmenu)
|
||||
this.mindMap.svg.on('mouseenter', this.onMouseenter)
|
||||
this.mindMap.svg.on('mouseleave', this.onMouseleave)
|
||||
window.addEventListener('keyup', this.onKeyup)
|
||||
}
|
||||
|
||||
// 解绑事件
|
||||
unbind() {
|
||||
document.body.removeEventListener('mousedown', this.onBodyMousedown)
|
||||
document.body.removeEventListener('click', this.onBodyClick)
|
||||
this.mindMap.svg.off('click', this.onDrawClick)
|
||||
this.mindMap.el.removeEventListener('mousedown', this.onMousedown)
|
||||
window.removeEventListener('mousemove', this.onMousemove)
|
||||
window.removeEventListener('mouseup', this.onMouseup)
|
||||
this.off('node_mouseup', this.onNodeMouseup)
|
||||
this.mindMap.el.removeEventListener('wheel', this.onMousewheel)
|
||||
this.mindMap.svg.off('contextmenu', this.onContextmenu)
|
||||
this.mindMap.svg.off('mouseenter', this.onMouseenter)
|
||||
this.mindMap.svg.off('mouseleave', this.onMouseleave)
|
||||
window.removeEventListener('keyup', this.onKeyup)
|
||||
}
|
||||
|
||||
// 画布的单击事件
|
||||
onDrawClick(e) {
|
||||
this.emit('draw_click', e)
|
||||
}
|
||||
|
||||
// 页面的鼠标按下事件
|
||||
onBodyMousedown(e) {
|
||||
this.emit('body_mousedown', e)
|
||||
}
|
||||
|
||||
// 页面的单击事件
|
||||
onBodyClick(e) {
|
||||
this.emit('body_click', e)
|
||||
}
|
||||
|
||||
// svg画布的鼠标按下事件
|
||||
onSvgMousedown(e) {
|
||||
this.emit('svg_mousedown', e)
|
||||
}
|
||||
|
||||
// 鼠标按下事件
|
||||
onMousedown(e) {
|
||||
// 鼠标左键
|
||||
if (e.which === 1) {
|
||||
this.isLeftMousedown = true
|
||||
} else if (e.which === 3) {
|
||||
this.isRightMousedown = true
|
||||
} else if (e.which === 2) {
|
||||
this.isMiddleMousedown = true
|
||||
}
|
||||
this.mousedownPos.x = e.clientX
|
||||
this.mousedownPos.y = e.clientY
|
||||
this.emit('mousedown', e, this)
|
||||
}
|
||||
|
||||
// 鼠标移动事件
|
||||
onMousemove(e) {
|
||||
let { useLeftKeySelectionRightKeyDrag } = this.mindMap.opt
|
||||
this.mousemovePos.x = e.clientX
|
||||
this.mousemovePos.y = e.clientY
|
||||
this.mousemoveOffset.x = e.clientX - this.mousedownPos.x
|
||||
this.mousemoveOffset.y = e.clientY - this.mousedownPos.y
|
||||
this.emit('mousemove', e, this)
|
||||
if (
|
||||
this.isMiddleMousedown ||
|
||||
(useLeftKeySelectionRightKeyDrag
|
||||
? this.isRightMousedown
|
||||
: this.isLeftMousedown)
|
||||
) {
|
||||
e.preventDefault()
|
||||
this.emit('drag', e, this)
|
||||
}
|
||||
}
|
||||
|
||||
// 鼠标松开事件
|
||||
onMouseup(e) {
|
||||
this.onNodeMouseup()
|
||||
this.emit('mouseup', e, this)
|
||||
}
|
||||
|
||||
// 节点鼠标松开事件
|
||||
onNodeMouseup() {
|
||||
this.isLeftMousedown = false
|
||||
this.isRightMousedown = false
|
||||
this.isMiddleMousedown = false
|
||||
}
|
||||
|
||||
// 鼠标滚动/触控板滑动
|
||||
onMousewheel(e) {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
const dirs = []
|
||||
if (e.deltaY < 0) dirs.push(CONSTANTS.DIR.UP)
|
||||
if (e.deltaY > 0) dirs.push(CONSTANTS.DIR.DOWN)
|
||||
if (e.deltaX < 0) dirs.push(CONSTANTS.DIR.LEFT)
|
||||
if (e.deltaX > 0) dirs.push(CONSTANTS.DIR.RIGHT)
|
||||
// 判断是否是触控板
|
||||
let isTouchPad = false
|
||||
// mac、windows
|
||||
// if (e.wheelDeltaY === e.deltaY * -3 || Math.abs(e.wheelDeltaY) <= 10) {
|
||||
// isTouchPad = true
|
||||
// }
|
||||
const { customCheckIsTouchPad } = this.mindMap.opt
|
||||
if (typeof customCheckIsTouchPad === 'function') {
|
||||
isTouchPad = customCheckIsTouchPad(e)
|
||||
} else {
|
||||
isTouchPad = Math.abs(e.deltaY) <= 10
|
||||
}
|
||||
this.emit('mousewheel', e, dirs, this, isTouchPad)
|
||||
}
|
||||
|
||||
// 鼠标右键菜单事件
|
||||
onContextmenu(e) {
|
||||
e.preventDefault()
|
||||
// Mac上按住ctrl键点击鼠标左键不知为何触发的是contextmenu事件
|
||||
if (e.ctrlKey) return
|
||||
this.emit('contextmenu', e)
|
||||
}
|
||||
|
||||
// 按键松开事件
|
||||
onKeyup(e) {
|
||||
this.emit('keyup', e)
|
||||
}
|
||||
|
||||
// 进入
|
||||
onMouseenter(e) {
|
||||
this.emit('svg_mouseenter', e)
|
||||
}
|
||||
|
||||
// 离开
|
||||
onMouseleave(e) {
|
||||
this.emit('svg_mouseleave', e)
|
||||
}
|
||||
}
|
||||
|
||||
export default Event
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,513 @@
|
||||
import {
|
||||
getStrWithBrFromHtml,
|
||||
checkNodeOuter,
|
||||
focusInput,
|
||||
selectAllInput,
|
||||
htmlEscape,
|
||||
handleInputPasteText,
|
||||
checkSmmFormatData,
|
||||
getTextFromHtml,
|
||||
isWhite,
|
||||
getVisibleColorFromTheme
|
||||
} from '../../utils'
|
||||
import {
|
||||
ERROR_TYPES,
|
||||
CONSTANTS,
|
||||
noneRichTextNodeLineHeight
|
||||
} from '../../constants/constant'
|
||||
|
||||
const SMM_NODE_EDIT_WRAP = 'smm-node-edit-wrap'
|
||||
|
||||
// 节点文字编辑类
|
||||
export default class TextEdit {
|
||||
// 构造函数
|
||||
constructor(renderer) {
|
||||
this.renderer = renderer
|
||||
this.mindMap = renderer.mindMap
|
||||
// 当前编辑的节点
|
||||
this.currentNode = null
|
||||
// 文本编辑框
|
||||
this.textEditNode = null
|
||||
// 文本编辑框是否显示
|
||||
this.showTextEdit = false
|
||||
// 如果编辑过程中缩放画布了，那么缓存当前编辑的内容
|
||||
this.cacheEditingText = ''
|
||||
this.hasBodyMousedown = false
|
||||
this.textNodePaddingX = 5
|
||||
this.textNodePaddingY = 3
|
||||
this.isNeedUpdateTextEditNode = false
|
||||
this.mindMap.addEditNodeClass(SMM_NODE_EDIT_WRAP)
|
||||
this.bindEvent()
|
||||
}
|
||||
|
||||
// 事件
|
||||
bindEvent() {
|
||||
this.show = this.show.bind(this)
|
||||
this.onScale = this.onScale.bind(this)
|
||||
this.onKeydown = this.onKeydown.bind(this)
|
||||
// 节点双击事件
|
||||
this.mindMap.on('node_dblclick', (node, e, isInserting) => {
|
||||
this.show({ node, e, isInserting })
|
||||
})
|
||||
// 点击事件
|
||||
this.mindMap.on('draw_click', () => {
|
||||
// 隐藏文本编辑框
|
||||
this.hideEditTextBox()
|
||||
})
|
||||
this.mindMap.on('body_mousedown', () => {
|
||||
this.hasBodyMousedown = true
|
||||
})
|
||||
this.mindMap.on('body_click', () => {
|
||||
if (!this.hasBodyMousedown) return
|
||||
this.hasBodyMousedown = false
|
||||
// 隐藏文本编辑框
|
||||
if (this.mindMap.opt.isEndNodeTextEditOnClickOuter) {
|
||||
this.hideEditTextBox()
|
||||
}
|
||||
})
|
||||
this.mindMap.on('svg_mousedown', () => {
|
||||
// 隐藏文本编辑框
|
||||
this.hideEditTextBox()
|
||||
})
|
||||
// 展开收缩按钮点击事件
|
||||
this.mindMap.on('expand_btn_click', () => {
|
||||
this.hideEditTextBox()
|
||||
})
|
||||
// 节点激活前事件
|
||||
this.mindMap.on('before_node_active', () => {
|
||||
this.hideEditTextBox()
|
||||
})
|
||||
// 鼠标滚动事件
|
||||
this.mindMap.on('mousewheel', () => {
|
||||
if (
|
||||
this.mindMap.opt.mousewheelAction === CONSTANTS.MOUSE_WHEEL_ACTION.MOVE
|
||||
) {
|
||||
this.hideEditTextBox()
|
||||
}
|
||||
})
|
||||
// 注册编辑快捷键
|
||||
this.mindMap.keyCommand.addShortcut('F2', () => {
|
||||
if (this.renderer.activeNodeList.length <= 0) {
|
||||
return
|
||||
}
|
||||
this.show({
|
||||
node: this.renderer.activeNodeList[0]
|
||||
})
|
||||
})
|
||||
this.mindMap.on('scale', this.onScale)
|
||||
// 监听按键事件，判断是否自动进入文本编辑模式
|
||||
if (this.mindMap.opt.enableAutoEnterTextEditWhenKeydown) {
|
||||
window.addEventListener('keydown', this.onKeydown)
|
||||
}
|
||||
this.mindMap.on('beforeDestroy', () => {
|
||||
this.unBindEvent()
|
||||
})
|
||||
this.mindMap.on('after_update_config', (opt, lastOpt) => {
|
||||
if (
|
||||
opt.openRealtimeRenderOnNodeTextEdit !==
|
||||
lastOpt.openRealtimeRenderOnNodeTextEdit
|
||||
) {
|
||||
if (this.mindMap.richText) {
|
||||
this.mindMap.richText.onOpenRealtimeRenderOnNodeTextEditConfigUpdate(
|
||||
opt.openRealtimeRenderOnNodeTextEdit
|
||||
)
|
||||
} else {
|
||||
this.onOpenRealtimeRenderOnNodeTextEditConfigUpdate(
|
||||
opt.openRealtimeRenderOnNodeTextEdit
|
||||
)
|
||||
}
|
||||
}
|
||||
if (
|
||||
opt.enableAutoEnterTextEditWhenKeydown !==
|
||||
lastOpt.enableAutoEnterTextEditWhenKeydown
|
||||
) {
|
||||
window[
|
||||
opt.enableAutoEnterTextEditWhenKeydown
|
||||
? 'addEventListener'
|
||||
: 'removeEventListener'
|
||||
]('keydown', this.onKeydown)
|
||||
}
|
||||
})
|
||||
// 正在编辑文本时，给节点添加了图标等其他内容时需要更新编辑框的位置
|
||||
this.mindMap.on('afterExecCommand', () => {
|
||||
if (!this.isShowTextEdit()) return
|
||||
this.isNeedUpdateTextEditNode = true
|
||||
})
|
||||
this.mindMap.on('node_tree_render_end', () => {
|
||||
if (!this.isShowTextEdit()) return
|
||||
if (this.isNeedUpdateTextEditNode) {
|
||||
this.isNeedUpdateTextEditNode = false
|
||||
this.updateTextEditNode()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 解绑事件
|
||||
unBindEvent() {
|
||||
window.removeEventListener('keydown', this.onKeydown)
|
||||
}
|
||||
|
||||
// 按键事件
|
||||
onKeydown(e) {
|
||||
if (e.target !== document.body) return
|
||||
const activeNodeList = this.mindMap.renderer.activeNodeList
|
||||
if (activeNodeList.length <= 0 || activeNodeList.length > 1) return
|
||||
const node = activeNodeList[0]
|
||||
// 当正在输入中文或英文或数字时，如果没有按下组合键，那么自动进入文本编辑模式
|
||||
if (node && this.checkIsAutoEnterTextEditKey(e)) {
|
||||
// 忽略第一个键值，避免中文输入法时进入编辑会导致第一个键值变成字母的问题
|
||||
// 带来的问题是按的第一下纯粹是进入文本编辑，但没有变成输入
|
||||
e.preventDefault()
|
||||
this.show({
|
||||
node,
|
||||
e,
|
||||
isInserting: false,
|
||||
isFromKeyDown: true
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 判断是否是自动进入文本编模式的按钮
|
||||
checkIsAutoEnterTextEditKey(e) {
|
||||
const keyCode = e.keyCode
|
||||
return (
|
||||
(keyCode === 229 ||
|
||||
(keyCode >= 65 && keyCode <= 90) ||
|
||||
(keyCode >= 48 && keyCode <= 57)) &&
|
||||
!this.mindMap.keyCommand.hasCombinationKey(e)
|
||||
)
|
||||
}
|
||||
|
||||
// 注册临时快捷键
|
||||
registerTmpShortcut() {
|
||||
this.mindMap.keyCommand.addShortcut('Enter', () => {
|
||||
this.hideEditTextBox()
|
||||
})
|
||||
this.mindMap.keyCommand.addShortcut('Tab', () => {
|
||||
this.hideEditTextBox()
|
||||
})
|
||||
}
|
||||
|
||||
// 获取当前文本编辑框是否处于显示状态，也就是是否处在文本编辑状态
|
||||
isShowTextEdit() {
|
||||
if (this.mindMap.richText) {
|
||||
return this.mindMap.richText.showTextEdit
|
||||
}
|
||||
return this.showTextEdit
|
||||
}
|
||||
|
||||
// 设置文本编辑框是否处于显示状态
|
||||
setIsShowTextEdit(val) {
|
||||
this.showTextEdit = val
|
||||
if (val) {
|
||||
this.mindMap.keyCommand.stopCheckInSvg()
|
||||
} else {
|
||||
this.mindMap.keyCommand.recoveryCheckInSvg()
|
||||
}
|
||||
}
|
||||
|
||||
// 显示文本编辑框
|
||||
// isInserting：是否是刚创建的节点
|
||||
// isFromKeyDown：是否是在按键事件进入的编辑
|
||||
async show({
|
||||
node,
|
||||
isInserting = false,
|
||||
isFromKeyDown = false,
|
||||
isFromScale = false
|
||||
}) {
|
||||
// 使用了自定义节点内容那么不响应编辑事件
|
||||
if (node.isUseCustomNodeContent()) {
|
||||
return
|
||||
}
|
||||
// 如果有正在编辑中的节点，那么先结束它
|
||||
const currentEditNode = this.getCurrentEditNode()
|
||||
if (currentEditNode) {
|
||||
this.hideEditTextBox()
|
||||
}
|
||||
const { beforeTextEdit, openRealtimeRenderOnNodeTextEdit } =
|
||||
this.mindMap.opt
|
||||
if (typeof beforeTextEdit === 'function') {
|
||||
let isShow = false
|
||||
try {
|
||||
isShow = await beforeTextEdit(node, isInserting)
|
||||
} catch (error) {
|
||||
isShow = false
|
||||
this.mindMap.opt.errorHandler(ERROR_TYPES.BEFORE_TEXT_EDIT_ERROR, error)
|
||||
}
|
||||
if (!isShow) return
|
||||
}
|
||||
const { offsetLeft, offsetTop } = checkNodeOuter(this.mindMap, node)
|
||||
this.mindMap.view.translateXY(offsetLeft, offsetTop)
|
||||
const g = node._textData.node
|
||||
// 需要先显示，不然宽高获取到的可能是0
|
||||
if (openRealtimeRenderOnNodeTextEdit) {
|
||||
g.show()
|
||||
}
|
||||
const rect = g.node.getBoundingClientRect()
|
||||
// 如果开启了大小实时更新，那么直接隐藏节点原文本
|
||||
if (openRealtimeRenderOnNodeTextEdit) {
|
||||
g.hide()
|
||||
}
|
||||
const params = {
|
||||
node,
|
||||
rect,
|
||||
isInserting,
|
||||
isFromKeyDown,
|
||||
isFromScale
|
||||
}
|
||||
if (this.mindMap.richText) {
|
||||
this.mindMap.richText.showEditText(params)
|
||||
return
|
||||
}
|
||||
this.currentNode = node
|
||||
this.showEditTextBox(params)
|
||||
}
|
||||
|
||||
// 当openRealtimeRenderOnNodeTextEdit配置更新后需要更新编辑框样式
|
||||
onOpenRealtimeRenderOnNodeTextEditConfigUpdate(
|
||||
openRealtimeRenderOnNodeTextEdit
|
||||
) {
|
||||
if (!this.textEditNode) return
|
||||
this.textEditNode.style.background = openRealtimeRenderOnNodeTextEdit
|
||||
? 'transparent'
|
||||
: this.currentNode
|
||||
? this.getBackground(this.currentNode)
|
||||
: ''
|
||||
this.textEditNode.style.boxShadow = openRealtimeRenderOnNodeTextEdit
|
||||
? 'none'
|
||||
: '0 0 20px rgba(0,0,0,.5)'
|
||||
}
|
||||
|
||||
// 处理画布缩放
|
||||
onScale() {
|
||||
const node = this.getCurrentEditNode()
|
||||
if (!node) return
|
||||
if (this.mindMap.richText) {
|
||||
this.mindMap.richText.cacheEditingText =
|
||||
this.mindMap.richText.getEditText()
|
||||
this.mindMap.richText.showTextEdit = false
|
||||
} else {
|
||||
this.cacheEditingText = this.getEditText()
|
||||
this.setIsShowTextEdit(false)
|
||||
}
|
||||
this.show({
|
||||
node,
|
||||
isFromScale: true
|
||||
})
|
||||
}
|
||||
|
||||
// 显示文本编辑框
|
||||
showEditTextBox({ node, rect, isInserting, isFromKeyDown, isFromScale }) {
|
||||
if (this.showTextEdit) return
|
||||
const {
|
||||
nodeTextEditZIndex,
|
||||
textAutoWrapWidth,
|
||||
selectTextOnEnterEditText,
|
||||
openRealtimeRenderOnNodeTextEdit,
|
||||
autoEmptyTextWhenKeydownEnterEdit
|
||||
} = this.mindMap.opt
|
||||
if (!isFromScale) {
|
||||
this.mindMap.emit('before_show_text_edit')
|
||||
}
|
||||
this.registerTmpShortcut()
|
||||
if (!this.textEditNode) {
|
||||
this.textEditNode = document.createElement('div')
|
||||
this.textEditNode.classList.add(SMM_NODE_EDIT_WRAP)
|
||||
this.textEditNode.style.cssText = `
|
||||
position: fixed;
|
||||
box-sizing: border-box;
|
||||
${
|
||||
openRealtimeRenderOnNodeTextEdit
|
||||
? ''
|
||||
: `box-shadow: 0 0 20px rgba(0,0,0,.5);`
|
||||
}
|
||||
padding: ${this.textNodePaddingY}px ${this.textNodePaddingX}px;
|
||||
margin-left: -${this.textNodePaddingX}px;
|
||||
margin-top: -${this.textNodePaddingY}px;
|
||||
outline: none;
|
||||
word-break: break-all;
|
||||
line-break: anywhere;
|
||||
`
|
||||
this.textEditNode.setAttribute('contenteditable', true)
|
||||
this.textEditNode.addEventListener('keyup', e => {
|
||||
e.stopPropagation()
|
||||
})
|
||||
this.textEditNode.addEventListener('click', e => {
|
||||
e.stopPropagation()
|
||||
})
|
||||
this.textEditNode.addEventListener('mousedown', e => {
|
||||
e.stopPropagation()
|
||||
})
|
||||
this.textEditNode.addEventListener('keydown', e => {
|
||||
if (this.checkIsAutoEnterTextEditKey(e)) {
|
||||
e.stopPropagation()
|
||||
}
|
||||
})
|
||||
this.textEditNode.addEventListener('paste', e => {
|
||||
const text = e.clipboardData.getData('text')
|
||||
const { isSmm, data } = checkSmmFormatData(text)
|
||||
if (isSmm && data[0] && data[0].data) {
|
||||
// 只取第一个节点的纯文本
|
||||
handleInputPasteText(e, getTextFromHtml(data[0].data.text))
|
||||
} else {
|
||||
handleInputPasteText(e)
|
||||
}
|
||||
this.emitTextChangeEvent()
|
||||
})
|
||||
this.textEditNode.addEventListener('input', () => {
|
||||
this.emitTextChangeEvent()
|
||||
})
|
||||
const targetNode =
|
||||
this.mindMap.opt.customInnerElsAppendTo || document.body
|
||||
targetNode.appendChild(this.textEditNode)
|
||||
}
|
||||
const scale = this.mindMap.view.scale
|
||||
const fontSize = node.style.merge('fontSize')
|
||||
const textLines = (this.cacheEditingText || node.getData('text'))
|
||||
.split(/\n/gim)
|
||||
.map(item => {
|
||||
return htmlEscape(item)
|
||||
})
|
||||
const isMultiLine = node._textData.node.attr('data-ismultiLine') === 'true'
|
||||
node.style.domText(this.textEditNode, scale)
|
||||
if (!openRealtimeRenderOnNodeTextEdit) {
|
||||
this.textEditNode.style.background = this.getBackground(node)
|
||||
}
|
||||
this.textEditNode.style.zIndex = nodeTextEditZIndex
|
||||
if (isFromKeyDown && autoEmptyTextWhenKeydownEnterEdit) {
|
||||
this.textEditNode.innerHTML = ''
|
||||
} else {
|
||||
this.textEditNode.innerHTML = textLines.join('<br>')
|
||||
}
|
||||
this.textEditNode.style.minWidth =
|
||||
rect.width + this.textNodePaddingX * 2 + 'px'
|
||||
this.textEditNode.style.minHeight = rect.height + 'px'
|
||||
this.textEditNode.style.left = Math.floor(rect.left) + 'px'
|
||||
this.textEditNode.style.top = Math.floor(rect.top) + 'px'
|
||||
this.textEditNode.style.display = 'block'
|
||||
this.textEditNode.style.maxWidth = textAutoWrapWidth * scale + 'px'
|
||||
if (isMultiLine) {
|
||||
this.textEditNode.style.lineHeight = noneRichTextNodeLineHeight
|
||||
this.textEditNode.style.transform = `translateY(${
|
||||
(((noneRichTextNodeLineHeight - 1) * fontSize) / 2) * scale
|
||||
}px)`
|
||||
} else {
|
||||
this.textEditNode.style.lineHeight = 'normal'
|
||||
}
|
||||
this.setIsShowTextEdit(true)
|
||||
// 选中文本
|
||||
// if (!this.cacheEditingText) {
|
||||
// selectAllInput(this.textEditNode)
|
||||
// }
|
||||
if (isInserting || (selectTextOnEnterEditText && !isFromKeyDown)) {
|
||||
selectAllInput(this.textEditNode)
|
||||
} else {
|
||||
focusInput(this.textEditNode)
|
||||
}
|
||||
this.cacheEditingText = ''
|
||||
}
|
||||
|
||||
// 派发节点文本编辑事件
|
||||
emitTextChangeEvent() {
|
||||
this.mindMap.emit('node_text_edit_change', {
|
||||
node: this.currentNode,
|
||||
text: this.getEditText(),
|
||||
richText: false
|
||||
})
|
||||
}
|
||||
|
||||
// 更新文本编辑框的大小和位置
|
||||
updateTextEditNode() {
|
||||
if (this.mindMap.richText) {
|
||||
this.mindMap.richText.updateTextEditNode()
|
||||
return
|
||||
}
|
||||
if (!this.showTextEdit || !this.currentNode) {
|
||||
return
|
||||
}
|
||||
const rect = this.currentNode._textData.node.node.getBoundingClientRect()
|
||||
this.textEditNode.style.minWidth =
|
||||
rect.width + this.textNodePaddingX * 2 + 'px'
|
||||
this.textEditNode.style.minHeight =
|
||||
rect.height + this.textNodePaddingY * 2 + 'px'
|
||||
this.textEditNode.style.left = Math.floor(rect.left) + 'px'
|
||||
this.textEditNode.style.top = Math.floor(rect.top) + 'px'
|
||||
}
|
||||
|
||||
// 获取编辑区域的背景填充
|
||||
getBackground(node) {
|
||||
const gradientStyle = node.style.merge('gradientStyle')
|
||||
// 当前使用的是渐变色背景
|
||||
if (gradientStyle) {
|
||||
const startColor = node.style.merge('startColor')
|
||||
const endColor = node.style.merge('endColor')
|
||||
return `linear-gradient(to right, ${startColor}, ${endColor})`
|
||||
} else {
|
||||
// 单色背景
|
||||
const bgColor = node.style.merge('fillColor')
|
||||
const color = node.style.merge('color')
|
||||
// 默认使用节点的填充色，否则如果节点颜色是白色的话编辑时看不见
|
||||
return bgColor === 'transparent'
|
||||
? isWhite(color)
|
||||
? getVisibleColorFromTheme(this.mindMap.themeConfig)
|
||||
: '#fff'
|
||||
: bgColor
|
||||
}
|
||||
}
|
||||
|
||||
// 删除文本编辑元素
|
||||
removeTextEditEl() {
|
||||
if (this.mindMap.richText) {
|
||||
this.mindMap.richText.removeTextEditEl()
|
||||
return
|
||||
}
|
||||
if (!this.textEditNode) return
|
||||
const targetNode = this.mindMap.opt.customInnerElsAppendTo || document.body
|
||||
targetNode.removeChild(this.textEditNode)
|
||||
}
|
||||
|
||||
// 获取当前正在编辑的内容
|
||||
getEditText() {
|
||||
return getStrWithBrFromHtml(this.textEditNode.innerHTML)
|
||||
}
|
||||
|
||||
// 隐藏文本编辑框
|
||||
hideEditTextBox() {
|
||||
if (this.mindMap.richText) {
|
||||
return this.mindMap.richText.hideEditText()
|
||||
}
|
||||
if (!this.showTextEdit) {
|
||||
return
|
||||
}
|
||||
const currentNode = this.currentNode
|
||||
const text = this.getEditText()
|
||||
this.currentNode = null
|
||||
this.textEditNode.style.display = 'none'
|
||||
this.textEditNode.innerHTML = ''
|
||||
this.textEditNode.style.fontFamily = 'inherit'
|
||||
this.textEditNode.style.fontSize = 'inherit'
|
||||
this.textEditNode.style.fontWeight = 'normal'
|
||||
this.textEditNode.style.transform = 'translateY(0)'
|
||||
this.setIsShowTextEdit(false)
|
||||
this.mindMap.execCommand('SET_NODE_TEXT', currentNode, text)
|
||||
// if (currentNode.isGeneralization) {
|
||||
// // 概要节点
|
||||
// currentNode.generalizationBelongNode.updateGeneralization()
|
||||
// }
|
||||
this.mindMap.render()
|
||||
this.mindMap.emit(
|
||||
'hide_text_edit',
|
||||
this.textEditNode,
|
||||
this.renderer.activeNodeList,
|
||||
currentNode
|
||||
)
|
||||
}
|
||||
|
||||
// 获取当前正在编辑中的节点实例
|
||||
getCurrentEditNode() {
|
||||
if (this.mindMap.richText) {
|
||||
return this.mindMap.richText.node
|
||||
}
|
||||
return this.currentNode
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,316 @@
|
||||
import { Polygon, Path, SVG } from '@svgdotjs/svg.js'
|
||||
import { CONSTANTS } from '../../../constants/constant'
|
||||
|
||||
// 节点形状类
|
||||
export default class Shape {
|
||||
constructor(node) {
|
||||
this.node = node
|
||||
this.mindMap = node.mindMap
|
||||
}
|
||||
|
||||
// 形状需要的padding
|
||||
getShapePadding(width, height, paddingX, paddingY) {
|
||||
const shape = this.node.getShape()
|
||||
const defaultPaddingX = 15
|
||||
const defaultPaddingY = 5
|
||||
const actWidth = width + paddingX * 2
|
||||
const actHeight = height + paddingY * 2
|
||||
const actOffset = Math.abs(actWidth - actHeight)
|
||||
switch (shape) {
|
||||
case CONSTANTS.SHAPE.ROUNDED_RECTANGLE:
|
||||
return {
|
||||
paddingX: height > width ? (height - width) / 2 : 0,
|
||||
paddingY: 0
|
||||
}
|
||||
case CONSTANTS.SHAPE.DIAMOND:
|
||||
return {
|
||||
paddingX: width / 2,
|
||||
paddingY: height / 2
|
||||
}
|
||||
case CONSTANTS.SHAPE.PARALLELOGRAM:
|
||||
return {
|
||||
paddingX: paddingX <= 0 ? defaultPaddingX : 0,
|
||||
paddingY: 0
|
||||
}
|
||||
case CONSTANTS.SHAPE.OUTER_TRIANGULAR_RECTANGLE:
|
||||
return {
|
||||
paddingX: paddingX <= 0 ? defaultPaddingX : 0,
|
||||
paddingY: 0
|
||||
}
|
||||
case CONSTANTS.SHAPE.INNER_TRIANGULAR_RECTANGLE:
|
||||
return {
|
||||
paddingX: paddingX <= 0 ? defaultPaddingX : 0,
|
||||
paddingY: 0
|
||||
}
|
||||
case CONSTANTS.SHAPE.ELLIPSE:
|
||||
return {
|
||||
paddingX: paddingX <= 0 ? defaultPaddingX : 0,
|
||||
paddingY: paddingY <= 0 ? defaultPaddingY : 0
|
||||
}
|
||||
case CONSTANTS.SHAPE.CIRCLE:
|
||||
return {
|
||||
paddingX: actHeight > actWidth ? actOffset / 2 : 0,
|
||||
paddingY: actHeight < actWidth ? actOffset / 2 : 0
|
||||
}
|
||||
}
|
||||
const extendShape = this.getShapeFromExtendList(shape)
|
||||
if (extendShape) {
|
||||
return (
|
||||
extendShape.getPadding({
|
||||
node: this.node,
|
||||
width,
|
||||
height,
|
||||
paddingX,
|
||||
paddingY
|
||||
}) || {
|
||||
paddingX: 0,
|
||||
paddingY: 0
|
||||
}
|
||||
)
|
||||
} else {
|
||||
return {
|
||||
paddingX: 0,
|
||||
paddingY: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 从形状扩展列表里获取指定名称的形状
|
||||
getShapeFromExtendList(shape) {
|
||||
return this.mindMap.extendShapeList.find(item => {
|
||||
return item.name === shape
|
||||
})
|
||||
}
|
||||
|
||||
// 创建形状节点
|
||||
createShape() {
|
||||
const shape = this.node.getShape()
|
||||
let node = null
|
||||
// 矩形
|
||||
if (shape === CONSTANTS.SHAPE.RECTANGLE) {
|
||||
node = this.createRect()
|
||||
} else if (shape === CONSTANTS.SHAPE.DIAMOND) {
|
||||
// 菱形
|
||||
node = this.createDiamond()
|
||||
} else if (shape === CONSTANTS.SHAPE.PARALLELOGRAM) {
|
||||
// 平行四边形
|
||||
node = this.createParallelogram()
|
||||
} else if (shape === CONSTANTS.SHAPE.ROUNDED_RECTANGLE) {
|
||||
// 圆角矩形
|
||||
node = this.createRoundedRectangle()
|
||||
} else if (shape === CONSTANTS.SHAPE.OCTAGONAL_RECTANGLE) {
|
||||
// 八角矩形
|
||||
node = this.createOctagonalRectangle()
|
||||
} else if (shape === CONSTANTS.SHAPE.OUTER_TRIANGULAR_RECTANGLE) {
|
||||
// 外三角矩形
|
||||
node = this.createOuterTriangularRectangle()
|
||||
} else if (shape === CONSTANTS.SHAPE.INNER_TRIANGULAR_RECTANGLE) {
|
||||
// 内三角矩形
|
||||
node = this.createInnerTriangularRectangle()
|
||||
} else if (shape === CONSTANTS.SHAPE.ELLIPSE) {
|
||||
// 椭圆
|
||||
node = this.createEllipse()
|
||||
} else if (shape === CONSTANTS.SHAPE.CIRCLE) {
|
||||
// 圆
|
||||
node = this.createCircle()
|
||||
}
|
||||
if (!node) {
|
||||
const extendShape = this.getShapeFromExtendList(shape)
|
||||
if (extendShape) {
|
||||
node = extendShape.createShape(this.node)
|
||||
}
|
||||
}
|
||||
return node || this.createRect()
|
||||
}
|
||||
|
||||
// 获取节点减去节点边框宽度、hover节点边框宽度后的尺寸
|
||||
getNodeSize() {
|
||||
const borderWidth = this.node.getBorderWidth()
|
||||
let { width, height } = this.node
|
||||
width -= borderWidth
|
||||
height -= borderWidth
|
||||
return {
|
||||
width,
|
||||
height
|
||||
}
|
||||
}
|
||||
|
||||
// 创建路径节点
|
||||
createPath(pathStr) {
|
||||
const { customCreateNodePath } = this.mindMap.opt
|
||||
if (customCreateNodePath) {
|
||||
return SVG(customCreateNodePath(pathStr))
|
||||
}
|
||||
return new Path().plot(pathStr)
|
||||
}
|
||||
|
||||
// 创建多边形节点
|
||||
createPolygon(points) {
|
||||
const { customCreateNodePolygon } = this.mindMap.opt
|
||||
if (customCreateNodePolygon) {
|
||||
return SVG(customCreateNodePolygon(points))
|
||||
}
|
||||
return new Polygon().plot(points)
|
||||
}
|
||||
|
||||
// 创建矩形
|
||||
createRect() {
|
||||
let { width, height } = this.getNodeSize()
|
||||
let borderRadius = this.node.style.merge('borderRadius')
|
||||
const pathStr = `
|
||||
M${borderRadius},0
|
||||
L${width - borderRadius},0
|
||||
C${width - borderRadius},0 ${width},${0} ${width},${borderRadius}
|
||||
L${width},${height - borderRadius}
|
||||
C${width},${height - borderRadius} ${width},${height} ${
|
||||
width - borderRadius
|
||||
},${height}
|
||||
L${borderRadius},${height}
|
||||
C${borderRadius},${height} ${0},${height} ${0},${height - borderRadius}
|
||||
L${0},${borderRadius}
|
||||
C${0},${borderRadius} ${0},${0} ${borderRadius},${0}
|
||||
Z
|
||||
`
|
||||
return this.createPath(pathStr)
|
||||
}
|
||||
|
||||
// 创建菱形
|
||||
createDiamond() {
|
||||
let { width, height } = this.getNodeSize()
|
||||
let halfWidth = width / 2
|
||||
let halfHeight = height / 2
|
||||
let topX = halfWidth
|
||||
let topY = 0
|
||||
let rightX = width
|
||||
let rightY = halfHeight
|
||||
let bottomX = halfWidth
|
||||
let bottomY = height
|
||||
let leftX = 0
|
||||
let leftY = halfHeight
|
||||
const points = [
|
||||
[topX, topY],
|
||||
[rightX, rightY],
|
||||
[bottomX, bottomY],
|
||||
[leftX, leftY]
|
||||
]
|
||||
return this.createPolygon(points)
|
||||
}
|
||||
|
||||
// 创建平行四边形
|
||||
createParallelogram() {
|
||||
let { paddingX } = this.node.getPaddingVale()
|
||||
paddingX = paddingX || this.node.shapePadding.paddingX
|
||||
let { width, height } = this.getNodeSize()
|
||||
const points = [
|
||||
[paddingX, 0],
|
||||
[width, 0],
|
||||
[width - paddingX, height],
|
||||
[0, height]
|
||||
]
|
||||
return this.createPolygon(points)
|
||||
}
|
||||
|
||||
// 创建圆角矩形
|
||||
createRoundedRectangle() {
|
||||
let { width, height } = this.getNodeSize()
|
||||
let halfHeight = height / 2
|
||||
const pathStr = `
|
||||
M${halfHeight},0
|
||||
L${width - halfHeight},0
|
||||
A${height / 2},${height / 2} 0 0,1 ${width - halfHeight},${height}
|
||||
L${halfHeight},${height}
|
||||
A${height / 2},${height / 2} 0 0,1 ${halfHeight},${0}
|
||||
`
|
||||
return this.createPath(pathStr)
|
||||
}
|
||||
|
||||
// 创建八角矩形
|
||||
createOctagonalRectangle() {
|
||||
let w = 5
|
||||
let { width, height } = this.getNodeSize()
|
||||
const points = [
|
||||
[0, w],
|
||||
[w, 0],
|
||||
[width - w, 0],
|
||||
[width, w],
|
||||
[width, height - w],
|
||||
[width - w, height],
|
||||
[w, height],
|
||||
[0, height - w]
|
||||
]
|
||||
return this.createPolygon(points)
|
||||
}
|
||||
|
||||
// 创建外三角矩形
|
||||
createOuterTriangularRectangle() {
|
||||
let { paddingX } = this.node.getPaddingVale()
|
||||
paddingX = paddingX || this.node.shapePadding.paddingX
|
||||
let { width, height } = this.getNodeSize()
|
||||
const points = [
|
||||
[paddingX, 0],
|
||||
[width - paddingX, 0],
|
||||
[width, height / 2],
|
||||
[width - paddingX, height],
|
||||
[paddingX, height],
|
||||
[0, height / 2]
|
||||
]
|
||||
return this.createPolygon(points)
|
||||
}
|
||||
|
||||
// 创建内三角矩形
|
||||
createInnerTriangularRectangle() {
|
||||
let { paddingX } = this.node.getPaddingVale()
|
||||
paddingX = paddingX || this.node.shapePadding.paddingX
|
||||
let { width, height } = this.getNodeSize()
|
||||
const points = [
|
||||
[0, 0],
|
||||
[width, 0],
|
||||
[width - paddingX / 2, height / 2],
|
||||
[width, height],
|
||||
[0, height],
|
||||
[paddingX / 2, height / 2]
|
||||
]
|
||||
return this.createPolygon(points)
|
||||
}
|
||||
|
||||
// 创建椭圆
|
||||
createEllipse() {
|
||||
let { width, height } = this.getNodeSize()
|
||||
let halfWidth = width / 2
|
||||
let halfHeight = height / 2
|
||||
const pathStr = `
|
||||
M${halfWidth},0
|
||||
A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${height}
|
||||
M${halfWidth},${height}
|
||||
A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${0}
|
||||
`
|
||||
return this.createPath(pathStr)
|
||||
}
|
||||
|
||||
// 创建圆
|
||||
createCircle() {
|
||||
let { width, height } = this.getNodeSize()
|
||||
let halfWidth = width / 2
|
||||
let halfHeight = height / 2
|
||||
const pathStr = `
|
||||
M${halfWidth},0
|
||||
A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${height}
|
||||
M${halfWidth},${height}
|
||||
A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${0}
|
||||
`
|
||||
return this.createPath(pathStr)
|
||||
}
|
||||
}
|
||||
|
||||
// 形状列表
|
||||
export const shapeList = [
|
||||
CONSTANTS.SHAPE.RECTANGLE,
|
||||
CONSTANTS.SHAPE.DIAMOND,
|
||||
CONSTANTS.SHAPE.PARALLELOGRAM,
|
||||
CONSTANTS.SHAPE.ROUNDED_RECTANGLE,
|
||||
CONSTANTS.SHAPE.OCTAGONAL_RECTANGLE,
|
||||
CONSTANTS.SHAPE.OUTER_TRIANGULAR_RECTANGLE,
|
||||
CONSTANTS.SHAPE.INNER_TRIANGULAR_RECTANGLE,
|
||||
CONSTANTS.SHAPE.ELLIPSE,
|
||||
CONSTANTS.SHAPE.CIRCLE
|
||||
]
|
||||
@@ -0,0 +1,372 @@
|
||||
import { checkIsNodeStyleDataKey } from '../../../utils/index'
|
||||
|
||||
const backgroundStyleProps = [
|
||||
'backgroundColor',
|
||||
'backgroundImage',
|
||||
'backgroundRepeat',
|
||||
'backgroundPosition',
|
||||
'backgroundSize'
|
||||
]
|
||||
|
||||
export const shapeStyleProps = [
|
||||
'gradientStyle',
|
||||
'startColor',
|
||||
'endColor',
|
||||
'startDir',
|
||||
'endDir',
|
||||
'fillColor',
|
||||
'borderColor',
|
||||
'borderWidth',
|
||||
'borderDasharray'
|
||||
]
|
||||
|
||||
// 样式类
|
||||
class Style {
|
||||
// 设置背景样式
|
||||
static setBackgroundStyle(el, themeConfig) {
|
||||
if (!el) return
|
||||
// 缓存容器元素原本的样式
|
||||
if (!Style.cacheStyle) {
|
||||
Style.cacheStyle = {}
|
||||
let style = window.getComputedStyle(el)
|
||||
backgroundStyleProps.forEach(prop => {
|
||||
Style.cacheStyle[prop] = style[prop]
|
||||
})
|
||||
}
|
||||
// 设置新样式
|
||||
let {
|
||||
backgroundColor,
|
||||
backgroundImage,
|
||||
backgroundRepeat,
|
||||
backgroundPosition,
|
||||
backgroundSize
|
||||
} = themeConfig
|
||||
el.style.backgroundColor = backgroundColor
|
||||
if (backgroundImage && backgroundImage !== 'none') {
|
||||
el.style.backgroundImage = `url(${backgroundImage})`
|
||||
el.style.backgroundRepeat = backgroundRepeat
|
||||
el.style.backgroundPosition = backgroundPosition
|
||||
el.style.backgroundSize = backgroundSize
|
||||
} else {
|
||||
el.style.backgroundImage = 'none'
|
||||
}
|
||||
}
|
||||
|
||||
// 移除背景样式
|
||||
static removeBackgroundStyle(el) {
|
||||
if (!Style.cacheStyle) return
|
||||
backgroundStyleProps.forEach(prop => {
|
||||
el.style[prop] = Style.cacheStyle[prop]
|
||||
})
|
||||
Style.cacheStyle = null
|
||||
}
|
||||
|
||||
// 构造函数
|
||||
constructor(ctx) {
|
||||
this.ctx = ctx
|
||||
// 箭头图标
|
||||
this._markerPath = null
|
||||
this._marker = null
|
||||
// 渐变背景
|
||||
this._gradient = null
|
||||
}
|
||||
|
||||
// 合并样式
|
||||
merge(prop, root) {
|
||||
let themeConfig = this.ctx.mindMap.themeConfig
|
||||
let defaultConfig = null
|
||||
let useRoot = false
|
||||
if (root) {
|
||||
// 使用最外层样式
|
||||
useRoot = true
|
||||
defaultConfig = themeConfig
|
||||
} else if (this.ctx.isGeneralization) {
|
||||
// 概要节点
|
||||
defaultConfig = themeConfig.generalization
|
||||
} else if (this.ctx.layerIndex === 0) {
|
||||
// 根节点
|
||||
defaultConfig = themeConfig.root
|
||||
} else if (this.ctx.layerIndex === 1) {
|
||||
// 二级节点
|
||||
defaultConfig = themeConfig.second
|
||||
} else {
|
||||
// 三级及以下节点
|
||||
defaultConfig = themeConfig.node
|
||||
}
|
||||
let value = ''
|
||||
// 优先使用节点本身的样式
|
||||
if (this.getSelfStyle(prop) !== undefined) {
|
||||
value = this.getSelfStyle(prop)
|
||||
} else if (defaultConfig[prop] !== undefined) {
|
||||
// 否则使用对应层级的样式
|
||||
value = defaultConfig[prop]
|
||||
} else {
|
||||
// 否则使用最外层样式
|
||||
value = themeConfig[prop]
|
||||
}
|
||||
if (!useRoot) {
|
||||
this.addToEffectiveStyles({
|
||||
[prop]: value
|
||||
})
|
||||
}
|
||||
return value
|
||||
}
|
||||
|
||||
// 获取某个样式值
|
||||
getStyle(prop, root) {
|
||||
return this.merge(prop, root)
|
||||
}
|
||||
|
||||
// 获取自身自定义样式
|
||||
getSelfStyle(prop) {
|
||||
return this.ctx.getData(prop)
|
||||
}
|
||||
|
||||
// 更新当前节点生效的样式数据
|
||||
addToEffectiveStyles(styles) {
|
||||
// effectiveStyles目前只提供给格式刷插件使用，所以如果没有注册该插件，那么不需要保存该数据
|
||||
if (!this.ctx.mindMap.painter) return
|
||||
this.ctx.effectiveStyles = {
|
||||
...this.ctx.effectiveStyles,
|
||||
...styles
|
||||
}
|
||||
}
|
||||
|
||||
// 矩形
|
||||
rect(node) {
|
||||
this.shape(node)
|
||||
node.radius(this.merge('borderRadius'))
|
||||
}
|
||||
|
||||
// 形状
|
||||
shape(node) {
|
||||
const styles = {}
|
||||
shapeStyleProps.forEach(key => {
|
||||
styles[key] = this.merge(key)
|
||||
})
|
||||
if (styles.gradientStyle) {
|
||||
if (!this._gradient) {
|
||||
this._gradient = this.ctx.nodeDraw.gradient('linear')
|
||||
}
|
||||
this._gradient.update(add => {
|
||||
add.stop(0, styles.startColor)
|
||||
add.stop(1, styles.endColor)
|
||||
})
|
||||
this._gradient.from(...styles.startDir).to(...styles.endDir)
|
||||
node.fill(this._gradient)
|
||||
} else {
|
||||
node.fill({
|
||||
color: styles.fillColor
|
||||
})
|
||||
}
|
||||
// 节点使用横线样式，不需要渲染非激活状态的边框样式
|
||||
// if (
|
||||
// !this.ctx.isRoot &&
|
||||
// !this.ctx.isGeneralization &&
|
||||
// this.ctx.mindMap.themeConfig.nodeUseLineStyle &&
|
||||
// !this.ctx.getData('isActive')
|
||||
// ) {
|
||||
// return
|
||||
// }
|
||||
node.stroke({
|
||||
color: styles.borderColor,
|
||||
width: styles.borderWidth,
|
||||
dasharray: styles.borderDasharray
|
||||
})
|
||||
}
|
||||
|
||||
// 文字
|
||||
text(node) {
|
||||
const styles = {
|
||||
color: this.merge('color'),
|
||||
fontFamily: this.merge('fontFamily'),
|
||||
fontSize: this.merge('fontSize'),
|
||||
fontWeight: this.merge('fontWeight'),
|
||||
fontStyle: this.merge('fontStyle'),
|
||||
textDecoration: this.merge('textDecoration')
|
||||
}
|
||||
node
|
||||
.fill({
|
||||
color: styles.color
|
||||
})
|
||||
.css({
|
||||
'font-family': styles.fontFamily,
|
||||
'font-size': styles.fontSize + 'px',
|
||||
'font-weight': styles.fontWeight,
|
||||
'font-style': styles.fontStyle,
|
||||
'text-decoration': styles.textDecoration
|
||||
})
|
||||
}
|
||||
|
||||
// html文字节点
|
||||
domText(node, fontSizeScale = 1) {
|
||||
const styles = {
|
||||
color: this.merge('color'),
|
||||
fontFamily: this.merge('fontFamily'),
|
||||
fontSize: this.merge('fontSize'),
|
||||
fontWeight: this.merge('fontWeight'),
|
||||
fontStyle: this.merge('fontStyle'),
|
||||
textDecoration: this.merge('textDecoration'),
|
||||
textAlign: this.merge('textAlign')
|
||||
}
|
||||
node.style.color = styles.color
|
||||
node.style.textDecoration = styles.textDecoration
|
||||
node.style.fontFamily = styles.fontFamily
|
||||
node.style.fontSize = styles.fontSize * fontSizeScale + 'px'
|
||||
node.style.fontWeight = styles.fontWeight || 'normal'
|
||||
node.style.fontStyle = styles.fontStyle
|
||||
node.style.textAlign = styles.textAlign
|
||||
}
|
||||
|
||||
// 标签文字
|
||||
tagText(node, style) {
|
||||
node
|
||||
.fill({
|
||||
color: '#fff'
|
||||
})
|
||||
.css({
|
||||
'font-size': style.fontSize + 'px'
|
||||
})
|
||||
}
|
||||
|
||||
// 标签矩形
|
||||
tagRect(node, style) {
|
||||
node.fill({
|
||||
color: style.fill
|
||||
})
|
||||
if (style.radius) {
|
||||
node.radius(style.radius)
|
||||
}
|
||||
}
|
||||
|
||||
// 内置图标
|
||||
iconNode(node, color) {
|
||||
node.attr({
|
||||
fill: color || this.merge('color')
|
||||
})
|
||||
}
|
||||
|
||||
// 连线
|
||||
line(line, { width, color, dasharray } = {}, enableMarker, childNode) {
|
||||
const { customHandleLine } = this.ctx.mindMap.opt
|
||||
if (typeof customHandleLine === 'function') {
|
||||
customHandleLine(this.ctx, line, { width, color, dasharray })
|
||||
}
|
||||
line.stroke({ color, dasharray, width }).fill({ color: 'none' })
|
||||
// 可以显示箭头
|
||||
if (enableMarker) {
|
||||
const showMarker = this.merge('showLineMarker', true)
|
||||
const childNodeStyle = childNode.style
|
||||
// 显示箭头
|
||||
if (showMarker) {
|
||||
// 创建子节点箭头标记
|
||||
childNodeStyle._marker =
|
||||
childNodeStyle._marker || childNodeStyle.createMarker()
|
||||
// 设置样式
|
||||
childNodeStyle._markerPath.stroke({ color }).fill({ color })
|
||||
// 箭头位置可能会发生改变，所以需要先删除
|
||||
line.attr('marker-start', '')
|
||||
line.attr('marker-end', '')
|
||||
const dir = childNodeStyle.merge('lineMarkerDir')
|
||||
line.marker(dir, childNodeStyle._marker)
|
||||
} else if (childNodeStyle._marker) {
|
||||
// 不显示箭头，则删除该子节点的箭头标记
|
||||
line.attr('marker-start', '')
|
||||
line.attr('marker-end', '')
|
||||
childNodeStyle._marker.remove()
|
||||
childNodeStyle._marker = null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 创建箭头
|
||||
createMarker() {
|
||||
return this.ctx.lineDraw.marker(20, 20, add => {
|
||||
add.ref(8, 5)
|
||||
add.size(20, 20)
|
||||
add.attr('markerUnits', 'userSpaceOnUse')
|
||||
add.attr('orient', 'auto-start-reverse')
|
||||
this._markerPath = add.path('M0,0 L2,5 L0,10 L10,5 Z')
|
||||
})
|
||||
}
|
||||
|
||||
// 概要连线
|
||||
generalizationLine(node) {
|
||||
node
|
||||
.stroke({
|
||||
width: this.merge('generalizationLineWidth', true),
|
||||
color: this.merge('generalizationLineColor', true)
|
||||
})
|
||||
.fill({ color: 'none' })
|
||||
}
|
||||
|
||||
// 展开收起按钮
|
||||
iconBtn(node, node2, fillNode) {
|
||||
let { color, fill, fontSize, fontColor } = this.ctx.mindMap.opt
|
||||
.expandBtnStyle || {
|
||||
color: '#808080',
|
||||
fill: '#fff',
|
||||
fontSize: 12,
|
||||
strokeColor: '#333333',
|
||||
fontColor: '#333333'
|
||||
}
|
||||
node.fill({ color: color })
|
||||
node2.fill({ color: color })
|
||||
fillNode.fill({ color: fill })
|
||||
if (this.ctx.mindMap.opt.isShowExpandNum) {
|
||||
node.attr({ 'font-size': fontSize + 'px', 'font-color': fontColor })
|
||||
}
|
||||
}
|
||||
|
||||
// 是否设置了自定义的样式
|
||||
hasCustomStyle() {
|
||||
let res = false
|
||||
Object.keys(this.ctx.getData()).forEach(item => {
|
||||
if (checkIsNodeStyleDataKey(item)) {
|
||||
res = true
|
||||
}
|
||||
})
|
||||
return res
|
||||
}
|
||||
|
||||
// 获取自定义的样式
|
||||
getCustomStyle() {
|
||||
const customStyle = {}
|
||||
Object.keys(this.ctx.getData()).forEach(item => {
|
||||
if (checkIsNodeStyleDataKey(item)) {
|
||||
customStyle[item] = this.ctx.getData(item)
|
||||
}
|
||||
})
|
||||
return customStyle
|
||||
}
|
||||
|
||||
// hover和激活节点
|
||||
hoverNode(node) {
|
||||
const hoverRectColor =
|
||||
this.merge('hoverRectColor') || this.ctx.mindMap.opt.hoverRectColor
|
||||
const hoverRectRadius = this.merge('hoverRectRadius')
|
||||
node.radius(hoverRectRadius).fill('none').stroke({
|
||||
color: hoverRectColor
|
||||
})
|
||||
}
|
||||
|
||||
// 所属节点被删除时的操作
|
||||
onRemove() {
|
||||
if (this._marker) {
|
||||
this._marker.remove()
|
||||
this._marker = null
|
||||
}
|
||||
if (this._markerPath) {
|
||||
this._markerPath.remove()
|
||||
this._markerPath = null
|
||||
}
|
||||
if (this._gradient) {
|
||||
this._gradient.remove()
|
||||
this._gradient = null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Style.cacheStyle = null
|
||||
|
||||
export default Style
|
||||
@@ -0,0 +1,68 @@
|
||||
// 设置数据
|
||||
function setData(data = {}) {
|
||||
this.mindMap.execCommand('SET_NODE_DATA', this, data)
|
||||
}
|
||||
|
||||
// 设置文本
|
||||
function setText(text, richText, resetRichText) {
|
||||
this.mindMap.execCommand('SET_NODE_TEXT', this, text, richText, resetRichText)
|
||||
}
|
||||
|
||||
// 设置图片
|
||||
function setImage(imgData) {
|
||||
this.mindMap.execCommand('SET_NODE_IMAGE', this, imgData)
|
||||
}
|
||||
|
||||
// 设置图标
|
||||
function setIcon(icons) {
|
||||
this.mindMap.execCommand('SET_NODE_ICON', this, icons)
|
||||
}
|
||||
|
||||
// 设置超链接
|
||||
function setHyperlink(link, title) {
|
||||
this.mindMap.execCommand('SET_NODE_HYPERLINK', this, link, title)
|
||||
}
|
||||
|
||||
// 设置备注
|
||||
function setNote(note) {
|
||||
this.mindMap.execCommand('SET_NODE_NOTE', this, note)
|
||||
}
|
||||
|
||||
// 设置附件
|
||||
function setAttachment(url, name) {
|
||||
this.mindMap.execCommand('SET_NODE_ATTACHMENT', this, url, name)
|
||||
}
|
||||
|
||||
// 设置标签
|
||||
function setTag(tag) {
|
||||
this.mindMap.execCommand('SET_NODE_TAG', this, tag)
|
||||
}
|
||||
|
||||
// 设置形状
|
||||
function setShape(shape) {
|
||||
this.mindMap.execCommand('SET_NODE_SHAPE', this, shape)
|
||||
}
|
||||
|
||||
// 修改某个样式
|
||||
function setStyle(prop, value) {
|
||||
this.mindMap.execCommand('SET_NODE_STYLE', this, prop, value)
|
||||
}
|
||||
|
||||
// 修改多个样式
|
||||
function setStyles(style) {
|
||||
this.mindMap.execCommand('SET_NODE_STYLES', this, style)
|
||||
}
|
||||
|
||||
export default {
|
||||
setData,
|
||||
setText,
|
||||
setImage,
|
||||
setIcon,
|
||||
setHyperlink,
|
||||
setNote,
|
||||
setAttachment,
|
||||
setTag,
|
||||
setShape,
|
||||
setStyle,
|
||||
setStyles
|
||||
}
|
||||
@@ -0,0 +1,120 @@
|
||||
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 + 'px'
|
||||
})
|
||||
.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.on('click', (e) => {
|
||||
this.mindMap.emit('node_cooperate_avatar_click', item, this, node, e)
|
||||
})
|
||||
node.on('mouseenter', (e) => {
|
||||
this.mindMap.emit('node_cooperate_avatar_mouseenter', item, this, node, e)
|
||||
})
|
||||
node.on('mouseleave', (e) => {
|
||||
this.mindMap.emit('node_cooperate_avatar_mouseleave', item, this, node, e)
|
||||
})
|
||||
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()
|
||||
}
|
||||
|
||||
// 清空用户
|
||||
function emptyUser() {
|
||||
this.userList = []
|
||||
this.updateUserListNode()
|
||||
}
|
||||
|
||||
export default {
|
||||
createUserListNode,
|
||||
updateUserListNode,
|
||||
createTextAvatar,
|
||||
createImageAvatar,
|
||||
addUser,
|
||||
removeUser,
|
||||
emptyUser
|
||||
}
|
||||
@@ -0,0 +1,594 @@
|
||||
import {
|
||||
resizeImgSize,
|
||||
removeRichTextStyes,
|
||||
checkIsRichText,
|
||||
isUndef,
|
||||
createForeignObjectNode,
|
||||
addXmlns,
|
||||
generateColorByContent,
|
||||
camelCaseToHyphen,
|
||||
getNodeRichTextStyles
|
||||
} from '../../../utils'
|
||||
import { Image as SVGImage, SVG, A, G, Rect, Text } from '@svgdotjs/svg.js'
|
||||
import iconsSvg from '../../../svg/icons'
|
||||
import { noneRichTextNodeLineHeight } from '../../../constants/constant'
|
||||
|
||||
// 测量svg文本宽高
|
||||
const measureText = (text, style) => {
|
||||
const g = new G()
|
||||
const node = new Text().text(text)
|
||||
style.text(node)
|
||||
g.add(node)
|
||||
return g.bbox()
|
||||
}
|
||||
|
||||
// 标签默认的样式
|
||||
const defaultTagStyle = {
|
||||
radius: 3, // 标签矩形的圆角大小
|
||||
fontSize: 12, // 字号，建议文字高度不要大于height
|
||||
fill: '', // 标签矩形的背景颜色
|
||||
height: 20, // 标签矩形的高度
|
||||
paddingX: 8 // 水平内边距，如果设置了width，将忽略该配置
|
||||
//width: 30 // 标签矩形的宽度，如果不设置，默认以文字的宽度+paddingX*2为宽度
|
||||
}
|
||||
|
||||
// 获取图片的真实url
|
||||
// 因为如果注册了NodeBase64ImageStorage插件，那么节点图片字段保存的实际是一个id，所以如果要获取图片真实的url可以通过该方法
|
||||
function getImageUrl() {
|
||||
const img = this.getData('image')
|
||||
return (this.mindMap.renderer.renderTree.data.imgMap || {})[img] || img
|
||||
}
|
||||
|
||||
// 创建图片节点
|
||||
function createImgNode() {
|
||||
let img = this.getImageUrl()
|
||||
if (!img) {
|
||||
return
|
||||
}
|
||||
img = (this.mindMap.renderer.renderTree.data.imgMap || {})[img] || img
|
||||
const imgSize = this.getImgShowSize()
|
||||
const node = new SVGImage().load(img).size(...imgSize)
|
||||
// 如果指定了加载失败显示的图片，那么加载一下图片检测是否失败
|
||||
const { defaultNodeImage } = this.mindMap.opt
|
||||
if (defaultNodeImage) {
|
||||
const imgEl = new Image()
|
||||
imgEl.onerror = () => {
|
||||
node.load(defaultNodeImage)
|
||||
}
|
||||
imgEl.src = img
|
||||
}
|
||||
if (this.getData('imageTitle')) {
|
||||
node.attr('title', this.getData('imageTitle'))
|
||||
}
|
||||
node.on('click', e => {
|
||||
this.mindMap.emit('node_img_click', this, node, e)
|
||||
})
|
||||
node.on('dblclick', e => {
|
||||
this.mindMap.emit('node_img_dblclick', this, e, node)
|
||||
})
|
||||
node.on('mouseenter', e => {
|
||||
this.mindMap.emit('node_img_mouseenter', this, node, e)
|
||||
})
|
||||
node.on('mouseleave', e => {
|
||||
this.mindMap.emit('node_img_mouseleave', this, node, e)
|
||||
})
|
||||
node.on('mousemove', e => {
|
||||
this.mindMap.emit('node_img_mousemove', this, node, e)
|
||||
})
|
||||
return {
|
||||
node,
|
||||
width: imgSize[0],
|
||||
height: imgSize[1]
|
||||
}
|
||||
}
|
||||
|
||||
// 获取图片显示宽高
|
||||
function getImgShowSize() {
|
||||
const { custom, width, height } = this.getData('imageSize')
|
||||
// 如果是自定义了图片的宽高，那么不受最大宽高限制
|
||||
if (custom) return [width, height]
|
||||
return resizeImgSize(
|
||||
width,
|
||||
height,
|
||||
this.mindMap.themeConfig.imgMaxWidth,
|
||||
this.mindMap.themeConfig.imgMaxHeight
|
||||
)
|
||||
}
|
||||
|
||||
// 创建icon节点
|
||||
function createIconNode() {
|
||||
let _data = this.getData()
|
||||
if (!_data.icon || _data.icon.length <= 0) {
|
||||
return []
|
||||
}
|
||||
let iconSize = this.mindMap.themeConfig.iconSize
|
||||
return _data.icon.map(item => {
|
||||
let src = iconsSvg.getNodeIconListIcon(
|
||||
item,
|
||||
this.mindMap.opt.iconList || []
|
||||
)
|
||||
let node = null
|
||||
// svg图标
|
||||
if (/^<svg/.test(src)) {
|
||||
node = SVG(src)
|
||||
} else {
|
||||
// 图片图标
|
||||
node = new SVGImage().load(src)
|
||||
}
|
||||
node.size(iconSize, iconSize)
|
||||
node.on('click', e => {
|
||||
this.mindMap.emit('node_icon_click', this, item, e, node)
|
||||
})
|
||||
node.on('mouseenter', e => {
|
||||
this.mindMap.emit('node_icon_mouseenter', this, item, e, node)
|
||||
})
|
||||
node.on('mouseleave', e => {
|
||||
this.mindMap.emit('node_icon_mouseleave', this, item, e, node)
|
||||
})
|
||||
return {
|
||||
node,
|
||||
width: iconSize,
|
||||
height: iconSize
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 创建富文本节点
|
||||
function createRichTextNode(specifyText) {
|
||||
const hasCustomWidth = this.hasCustomWidth()
|
||||
let text =
|
||||
typeof specifyText === 'string' ? specifyText : this.getData('text')
|
||||
let { textAutoWrapWidth, emptyTextMeasureHeightText } = this.mindMap.opt
|
||||
textAutoWrapWidth = hasCustomWidth ? this.customTextWidth : textAutoWrapWidth
|
||||
const g = new G()
|
||||
// 创建富文本结构，或复位富文本样式
|
||||
let recoverText = false
|
||||
if (this.getData('resetRichText')) {
|
||||
delete this.nodeData.data.resetRichText
|
||||
recoverText = true
|
||||
}
|
||||
if (recoverText && !isUndef(text)) {
|
||||
if (checkIsRichText(text)) {
|
||||
// 如果是富文本那么移除内联样式
|
||||
text = removeRichTextStyes(text)
|
||||
} else {
|
||||
// 非富文本则改为富文本结构
|
||||
text = `<p>${text}</p>`
|
||||
}
|
||||
this.setData({
|
||||
text
|
||||
})
|
||||
}
|
||||
// 节点的富文本样式数据
|
||||
const nodeTextStyleList = []
|
||||
const nodeRichTextStyles = getNodeRichTextStyles(this)
|
||||
Object.keys(nodeRichTextStyles).forEach(prop => {
|
||||
nodeTextStyleList.push([prop, nodeRichTextStyles[prop]])
|
||||
})
|
||||
// 测量文本大小
|
||||
if (!this.mindMap.commonCaches.measureRichtextNodeTextSizeEl) {
|
||||
this.mindMap.commonCaches.measureRichtextNodeTextSizeEl =
|
||||
document.createElement('div')
|
||||
this.mindMap.commonCaches.measureRichtextNodeTextSizeEl.style.position =
|
||||
'fixed'
|
||||
this.mindMap.commonCaches.measureRichtextNodeTextSizeEl.style.left =
|
||||
'-999999px'
|
||||
this.mindMap.el.appendChild(
|
||||
this.mindMap.commonCaches.measureRichtextNodeTextSizeEl
|
||||
)
|
||||
}
|
||||
const div = this.mindMap.commonCaches.measureRichtextNodeTextSizeEl
|
||||
// 应用节点的文本样式
|
||||
nodeTextStyleList.forEach(([prop, value]) => {
|
||||
div.style[prop] = value
|
||||
})
|
||||
div.style.lineHeight = 1.2
|
||||
const html = `<div>${text}</div>`
|
||||
div.innerHTML = html
|
||||
const el = div.children[0]
|
||||
el.classList.add('smm-richtext-node-wrap')
|
||||
addXmlns(el)
|
||||
el.style.maxWidth = textAutoWrapWidth + 'px'
|
||||
if (hasCustomWidth) {
|
||||
el.style.width = this.customTextWidth + 'px'
|
||||
} else {
|
||||
el.style.width = ''
|
||||
}
|
||||
let { width, height } = el.getBoundingClientRect()
|
||||
// 如果文本为空，那么需要计算一个默认高度
|
||||
if (height <= 0) {
|
||||
div.innerHTML = `<p>${emptyTextMeasureHeightText}</p>`
|
||||
let elTmp = div.children[0]
|
||||
elTmp.classList.add('smm-richtext-node-wrap')
|
||||
height = elTmp.getBoundingClientRect().height
|
||||
div.innerHTML = html
|
||||
}
|
||||
width = Math.min(Math.ceil(width) + 1, textAutoWrapWidth) // 修复getBoundingClientRect方法对实际宽度是小数的元素获取到的值是整数，导致宽度不够文本发生换行的问题
|
||||
height = Math.ceil(height)
|
||||
g.attr('data-width', width)
|
||||
g.attr('data-height', height)
|
||||
const foreignObject = createForeignObjectNode({
|
||||
el: div.children[0],
|
||||
width,
|
||||
height
|
||||
})
|
||||
// 应用节点文本样式
|
||||
// 进入文本编辑时，这个样式也会同样添加到文本编辑框的元素上
|
||||
const foreignObjectStyle = {
|
||||
'line-height': 1.2
|
||||
}
|
||||
nodeTextStyleList.forEach(([prop, value]) => {
|
||||
foreignObjectStyle[camelCaseToHyphen(prop)] = value
|
||||
})
|
||||
foreignObject.css(foreignObjectStyle)
|
||||
g.add(foreignObject)
|
||||
return {
|
||||
node: g,
|
||||
nodeContent: foreignObject,
|
||||
width,
|
||||
height
|
||||
}
|
||||
}
|
||||
|
||||
// 创建文本节点
|
||||
function createTextNode(specifyText) {
|
||||
if (this.getData('needUpdate')) {
|
||||
delete this.nodeData.data.needUpdate
|
||||
}
|
||||
// 如果是富文本内容，那么转给富文本函数
|
||||
if (this.getData('richText')) {
|
||||
return this.createRichTextNode(specifyText)
|
||||
}
|
||||
const text =
|
||||
typeof specifyText === 'string' ? specifyText : this.getData('text')
|
||||
if (this.getData('resetRichText')) {
|
||||
delete this.nodeData.data.resetRichText
|
||||
}
|
||||
const g = new G()
|
||||
const fontSize = this.getStyle('fontSize', false)
|
||||
const textAlign = this.getStyle('textAlign', false)
|
||||
// 文本超长自动换行
|
||||
let textArr = []
|
||||
if (!isUndef(text)) {
|
||||
textArr = String(text).split(/\n/gim)
|
||||
}
|
||||
const { textAutoWrapWidth: maxWidth, emptyTextMeasureHeightText } =
|
||||
this.mindMap.opt
|
||||
let isMultiLine = textArr.length > 1
|
||||
textArr.forEach((item, index) => {
|
||||
let arr = item.split('')
|
||||
let lines = []
|
||||
let line = []
|
||||
while (arr.length) {
|
||||
let str = arr.shift()
|
||||
let text = [...line, str].join('')
|
||||
if (measureText(text, this.style).width <= maxWidth) {
|
||||
line.push(str)
|
||||
} else {
|
||||
lines.push(line.join(''))
|
||||
line = [str]
|
||||
}
|
||||
}
|
||||
if (line.length > 0) {
|
||||
lines.push(line.join(''))
|
||||
}
|
||||
if (lines.length > 1) {
|
||||
isMultiLine = true
|
||||
}
|
||||
textArr[index] = lines.join('\n')
|
||||
})
|
||||
textArr = textArr.join('\n').replace(/\n$/g, '').split(/\n/gim)
|
||||
textArr.forEach((item, index) => {
|
||||
// 避免尾部的空行不占宽度
|
||||
// 同时解决该问题：https://github.com/wanglin2/mind-map/issues/1037
|
||||
if (item === '') {
|
||||
item = ''
|
||||
}
|
||||
const node = new Text().text(item)
|
||||
node.addClass('smm-text-node-wrap')
|
||||
node.attr(
|
||||
'text-anchor',
|
||||
{
|
||||
left: 'start',
|
||||
center: 'middle',
|
||||
right: 'end'
|
||||
}[textAlign] || 'start'
|
||||
)
|
||||
this.style.text(node)
|
||||
node.y(
|
||||
fontSize * noneRichTextNodeLineHeight * index +
|
||||
((noneRichTextNodeLineHeight - 1) * fontSize) / 2
|
||||
)
|
||||
g.add(node)
|
||||
})
|
||||
let { width, height } = g.bbox()
|
||||
// 如果文本为空，那么需要计算一个默认高度
|
||||
if (height <= 0) {
|
||||
const tmpNode = new Text().text(emptyTextMeasureHeightText)
|
||||
this.style.text(tmpNode)
|
||||
const tmpBbox = tmpNode.bbox()
|
||||
height = tmpBbox.height
|
||||
}
|
||||
width = Math.min(Math.ceil(width), maxWidth)
|
||||
height = Math.ceil(height)
|
||||
g.attr('data-width', width)
|
||||
g.attr('data-height', height)
|
||||
g.attr('data-ismultiLine', isMultiLine || textArr.length > 1)
|
||||
return {
|
||||
node: g,
|
||||
width,
|
||||
height
|
||||
}
|
||||
}
|
||||
|
||||
// 创建超链接节点
|
||||
function createHyperlinkNode() {
|
||||
const { hyperlink, hyperlinkTitle } = this.getData()
|
||||
if (!hyperlink) {
|
||||
return
|
||||
}
|
||||
const { customHyperlinkJump, hyperlinkIcon } = this.mindMap.opt
|
||||
const { icon, style } = hyperlinkIcon
|
||||
const iconSize = this.getNodeIconSize('hyperlinkIcon')
|
||||
const node = new SVG().size(iconSize, iconSize)
|
||||
// 超链接节点
|
||||
const a = new A().to(hyperlink).target('_blank')
|
||||
a.node.addEventListener('click', e => {
|
||||
if (typeof customHyperlinkJump === 'function') {
|
||||
e.preventDefault()
|
||||
customHyperlinkJump(hyperlink, this)
|
||||
}
|
||||
})
|
||||
if (hyperlinkTitle) {
|
||||
node.add(SVG(`<title>${hyperlinkTitle}</title>`))
|
||||
}
|
||||
// 添加一个透明的层，作为鼠标区域
|
||||
a.rect(iconSize, iconSize).fill({ color: 'transparent' })
|
||||
// 超链接图标
|
||||
const iconNode = SVG(icon || iconsSvg.hyperlink).size(iconSize, iconSize)
|
||||
this.style.iconNode(iconNode, style.color)
|
||||
a.add(iconNode)
|
||||
node.add(a)
|
||||
return {
|
||||
node,
|
||||
width: iconSize,
|
||||
height: iconSize
|
||||
}
|
||||
}
|
||||
|
||||
// 创建标签节点
|
||||
function createTagNode() {
|
||||
const tagData = this.getData('tag')
|
||||
if (!tagData || tagData.length <= 0) {
|
||||
return []
|
||||
}
|
||||
let { maxTag, tagsColorMap } = this.mindMap.opt
|
||||
tagsColorMap = tagsColorMap || {}
|
||||
const nodes = []
|
||||
tagData.slice(0, maxTag).forEach((item, index) => {
|
||||
let str = ''
|
||||
let style = {
|
||||
...defaultTagStyle
|
||||
}
|
||||
// 旧版只支持字符串类型
|
||||
if (typeof item === 'string') {
|
||||
str = item
|
||||
} else {
|
||||
// v0.10.3+版本支持对象类型
|
||||
str = item.text
|
||||
style = { ...defaultTagStyle, ...item.style }
|
||||
}
|
||||
// 是否手动设置了标签宽度
|
||||
const hasCustomWidth = typeof style.width !== 'undefined'
|
||||
// 创建容器节点
|
||||
const tag = new G()
|
||||
tag.on('click', () => {
|
||||
this.mindMap.emit('node_tag_click', this, item, index, tag)
|
||||
})
|
||||
// 标签文本
|
||||
const text = new Text().text(str)
|
||||
this.style.tagText(text, style)
|
||||
// 获取文本宽高
|
||||
const { width: textWidth, height: textHeight } = text.bbox()
|
||||
// 矩形宽度
|
||||
const rectWidth = hasCustomWidth
|
||||
? style.width
|
||||
: textWidth + style.paddingX * 2
|
||||
// 取文本和矩形最大宽高作为标签宽高
|
||||
const maxWidth = hasCustomWidth ? Math.max(rectWidth, textWidth) : rectWidth
|
||||
const maxHeight = Math.max(style.height, textHeight)
|
||||
// 文本居中
|
||||
if (hasCustomWidth) {
|
||||
text.x((maxWidth - textWidth) / 2)
|
||||
} else {
|
||||
text.x(hasCustomWidth ? 0 : style.paddingX)
|
||||
}
|
||||
text.cy(-maxHeight / 2)
|
||||
// 标签矩形
|
||||
const rect = new Rect().size(rectWidth, style.height).cy(-maxHeight / 2)
|
||||
if (hasCustomWidth) {
|
||||
rect.x((maxWidth - rectWidth) / 2)
|
||||
}
|
||||
this.style.tagRect(rect, {
|
||||
...style,
|
||||
fill:
|
||||
style.fill || // 优先节点自身配置
|
||||
tagsColorMap[text.node.textContent] || // 否则尝试从实例化选项tagsColorMap映射中获取颜色
|
||||
generateColorByContent(text.node.textContent) // 否则按照标签内容生成
|
||||
})
|
||||
tag.add(rect).add(text)
|
||||
nodes.push({
|
||||
node: tag,
|
||||
width: maxWidth,
|
||||
height: maxHeight
|
||||
})
|
||||
})
|
||||
return nodes
|
||||
}
|
||||
|
||||
// 创建备注节点
|
||||
function createNoteNode() {
|
||||
if (!this.getData('note')) {
|
||||
return null
|
||||
}
|
||||
const { icon, style } = this.mindMap.opt.noteIcon
|
||||
const iconSize = this.getNodeIconSize('noteIcon')
|
||||
const node = new SVG()
|
||||
.attr('cursor', 'pointer')
|
||||
.addClass('smm-node-note')
|
||||
.size(iconSize, iconSize)
|
||||
// 透明的层，用来作为鼠标区域
|
||||
node.add(new Rect().size(iconSize, iconSize).fill({ color: 'transparent' }))
|
||||
// 备注图标
|
||||
const iconNode = SVG(icon || iconsSvg.note).size(iconSize, iconSize)
|
||||
this.style.iconNode(iconNode, style.color)
|
||||
node.add(iconNode)
|
||||
// 备注tooltip
|
||||
if (!this.mindMap.opt.customNoteContentShow) {
|
||||
if (!this.noteEl) {
|
||||
this.noteEl = document.createElement('div')
|
||||
this.noteEl.style.cssText = `
|
||||
position: fixed;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
|
||||
display: none;
|
||||
background-color: #fff;
|
||||
z-index: ${this.mindMap.opt.nodeNoteTooltipZIndex}
|
||||
`
|
||||
const targetNode =
|
||||
this.mindMap.opt.customInnerElsAppendTo || document.body
|
||||
targetNode.appendChild(this.noteEl)
|
||||
}
|
||||
this.noteEl.innerText = this.getData('note')
|
||||
}
|
||||
node.on('mouseover', () => {
|
||||
const { left, top } = this.getNoteContentPosition()
|
||||
if (!this.mindMap.opt.customNoteContentShow) {
|
||||
this.noteEl.style.left = left + 'px'
|
||||
this.noteEl.style.top = top + 'px'
|
||||
this.noteEl.style.display = 'block'
|
||||
} else {
|
||||
this.mindMap.opt.customNoteContentShow.show(
|
||||
this.getData('note'),
|
||||
left,
|
||||
top,
|
||||
this
|
||||
)
|
||||
}
|
||||
})
|
||||
node.on('mouseout', () => {
|
||||
if (!this.mindMap.opt.customNoteContentShow) {
|
||||
this.noteEl.style.display = 'none'
|
||||
} else {
|
||||
this.mindMap.opt.customNoteContentShow.hide()
|
||||
}
|
||||
})
|
||||
node.on('click', e => {
|
||||
this.mindMap.emit('node_note_click', this, e, node)
|
||||
})
|
||||
node.on('dblclick', e => {
|
||||
this.mindMap.emit('node_note_dblclick', this, e, node)
|
||||
})
|
||||
return {
|
||||
node,
|
||||
width: iconSize,
|
||||
height: iconSize
|
||||
}
|
||||
}
|
||||
|
||||
// 创建附件节点
|
||||
function createAttachmentNode() {
|
||||
const { attachmentUrl, attachmentName } = this.getData()
|
||||
if (!attachmentUrl) {
|
||||
return
|
||||
}
|
||||
const iconSize = this.getNodeIconSize('attachmentIcon')
|
||||
const { icon, style } = this.mindMap.opt.attachmentIcon
|
||||
const node = new SVG().attr('cursor', 'pointer').size(iconSize, iconSize)
|
||||
if (attachmentName) {
|
||||
node.add(SVG(`<title>${attachmentName}</title>`))
|
||||
}
|
||||
// 透明的层，用来作为鼠标区域
|
||||
node.add(new Rect().size(iconSize, iconSize).fill({ color: 'transparent' }))
|
||||
// 备注图标
|
||||
const iconNode = SVG(icon || iconsSvg.attachment).size(iconSize, iconSize)
|
||||
this.style.iconNode(iconNode, style.color)
|
||||
node.add(iconNode)
|
||||
node.on('click', e => {
|
||||
this.mindMap.emit('node_attachmentClick', this, e, node)
|
||||
})
|
||||
node.on('contextmenu', e => {
|
||||
this.mindMap.emit('node_attachmentContextmenu', this, e, node)
|
||||
})
|
||||
return {
|
||||
node,
|
||||
width: iconSize,
|
||||
height: iconSize
|
||||
}
|
||||
}
|
||||
|
||||
// 获取节点图标大小
|
||||
function getNodeIconSize(prop) {
|
||||
const { style } = this.mindMap.opt[prop]
|
||||
return isUndef(style.size) ? this.mindMap.themeConfig.iconSize : style.size
|
||||
}
|
||||
|
||||
// 获取节点备注显示位置
|
||||
function getNoteContentPosition() {
|
||||
const iconSize = this.getNodeIconSize('noteIcon')
|
||||
const { scaleY } = this.mindMap.view.getTransformData().transform
|
||||
const iconSizeAddScale = iconSize * scaleY
|
||||
let { left, top } = this._noteData.node.node.getBoundingClientRect()
|
||||
top += iconSizeAddScale
|
||||
return {
|
||||
left,
|
||||
top
|
||||
}
|
||||
}
|
||||
|
||||
// 测量自定义节点内容元素的宽高
|
||||
function measureCustomNodeContentSize(content) {
|
||||
if (!this.mindMap.commonCaches.measureCustomNodeContentSizeEl) {
|
||||
this.mindMap.commonCaches.measureCustomNodeContentSizeEl =
|
||||
document.createElement('div')
|
||||
this.mindMap.commonCaches.measureCustomNodeContentSizeEl.style.cssText = `
|
||||
position: fixed;
|
||||
left: -99999px;
|
||||
top: -99999px;
|
||||
`
|
||||
this.mindMap.el.appendChild(
|
||||
this.mindMap.commonCaches.measureCustomNodeContentSizeEl
|
||||
)
|
||||
}
|
||||
this.mindMap.commonCaches.measureCustomNodeContentSizeEl.innerHTML = ''
|
||||
this.mindMap.commonCaches.measureCustomNodeContentSizeEl.appendChild(content)
|
||||
let rect =
|
||||
this.mindMap.commonCaches.measureCustomNodeContentSizeEl.getBoundingClientRect()
|
||||
return {
|
||||
width: rect.width,
|
||||
height: rect.height
|
||||
}
|
||||
}
|
||||
|
||||
// 是否使用的是自定义节点内容
|
||||
function isUseCustomNodeContent() {
|
||||
return !!this._customNodeContent
|
||||
}
|
||||
|
||||
export default {
|
||||
getImageUrl,
|
||||
createImgNode,
|
||||
getImgShowSize,
|
||||
createIconNode,
|
||||
createRichTextNode,
|
||||
createTextNode,
|
||||
createHyperlinkNode,
|
||||
createTagNode,
|
||||
createNoteNode,
|
||||
createAttachmentNode,
|
||||
getNoteContentPosition,
|
||||
getNodeIconSize,
|
||||
measureCustomNodeContentSize,
|
||||
isUseCustomNodeContent
|
||||
}
|
||||
@@ -0,0 +1,184 @@
|
||||
import btnsSvg from '../../../svg/btns'
|
||||
import { SVG, Circle, G, Text } from '@svgdotjs/svg.js'
|
||||
import { isUndef } from '../../../utils'
|
||||
|
||||
// 创建展开收起按钮的内容节点
|
||||
function createExpandNodeContent() {
|
||||
if (this._openExpandNode) {
|
||||
return
|
||||
}
|
||||
const { expandBtnSize, expandBtnIcon, isShowExpandNum } = this.mindMap.opt
|
||||
let { close, open } = expandBtnIcon || {}
|
||||
// 根据配置判断是否显示数量按钮
|
||||
if (isShowExpandNum) {
|
||||
// 展开的节点
|
||||
this._openExpandNode = new Text()
|
||||
this._openExpandNode.addClass('smm-expand-btn-text')
|
||||
// 文本垂直居中
|
||||
this._openExpandNode.attr({
|
||||
'text-anchor': 'middle',
|
||||
'dominant-baseline': 'middle',
|
||||
x: expandBtnSize / 2,
|
||||
y: 2
|
||||
})
|
||||
} else {
|
||||
this._openExpandNode = SVG(open || btnsSvg.open).size(
|
||||
expandBtnSize,
|
||||
expandBtnSize
|
||||
)
|
||||
this._openExpandNode.x(0).y(-expandBtnSize / 2)
|
||||
}
|
||||
// 收起的节点
|
||||
this._closeExpandNode = SVG(close || btnsSvg.close).size(
|
||||
expandBtnSize,
|
||||
expandBtnSize
|
||||
)
|
||||
this._closeExpandNode.x(0).y(-expandBtnSize / 2)
|
||||
// 填充节点
|
||||
this._fillExpandNode = new Circle().size(expandBtnSize)
|
||||
this._fillExpandNode.x(0).y(-expandBtnSize / 2)
|
||||
|
||||
// 设置样式
|
||||
this.style.iconBtn(
|
||||
this._openExpandNode,
|
||||
this._closeExpandNode,
|
||||
this._fillExpandNode
|
||||
)
|
||||
}
|
||||
function sumNode(data = []) {
|
||||
return data.reduce(
|
||||
(total, cur) => total + this.sumNode(cur.children || []),
|
||||
data.length
|
||||
)
|
||||
}
|
||||
// 创建或更新展开收缩按钮内容
|
||||
function updateExpandBtnNode() {
|
||||
let { expand } = this.getData()
|
||||
// 如果本次和上次的展开状态一样则返回
|
||||
if (expand === this._lastExpandBtnType) return
|
||||
if (this._expandBtn) {
|
||||
this._expandBtn.clear()
|
||||
}
|
||||
this.createExpandNodeContent()
|
||||
let node
|
||||
if (expand === false) {
|
||||
node = this._openExpandNode
|
||||
this._lastExpandBtnType = false
|
||||
} else {
|
||||
node = this._closeExpandNode
|
||||
this._lastExpandBtnType = true
|
||||
}
|
||||
|
||||
if (this._expandBtn) {
|
||||
// 如果是收起按钮加上边框
|
||||
let { isShowExpandNum, expandBtnStyle, expandBtnNumHandler } =
|
||||
this.mindMap.opt
|
||||
if (isShowExpandNum) {
|
||||
if (!expand) {
|
||||
// 数字按钮添加边框
|
||||
this._fillExpandNode.stroke({
|
||||
color: expandBtnStyle.strokeColor
|
||||
})
|
||||
// 计算子节点数量
|
||||
let count = this.sumNode(this.nodeData.children || [])
|
||||
if (typeof expandBtnNumHandler === 'function') {
|
||||
const res = expandBtnNumHandler(count, this)
|
||||
if (!isUndef(res)) {
|
||||
count = res
|
||||
}
|
||||
}
|
||||
node.text(String(count))
|
||||
} else {
|
||||
this._fillExpandNode.stroke('none')
|
||||
}
|
||||
}
|
||||
this._expandBtn.add(this._fillExpandNode).add(node)
|
||||
}
|
||||
}
|
||||
|
||||
// 更新展开收缩按钮位置
|
||||
function updateExpandBtnPos() {
|
||||
if (!this._expandBtn) {
|
||||
return
|
||||
}
|
||||
this.renderer.layout.renderExpandBtn(this, this._expandBtn)
|
||||
}
|
||||
|
||||
// 创建展开收缩按钮
|
||||
function renderExpandBtn() {
|
||||
if (this.getChildrenLength() <= 0 || this.isRoot) {
|
||||
return
|
||||
}
|
||||
if (this._expandBtn) {
|
||||
this.group.add(this._expandBtn)
|
||||
} else {
|
||||
this._expandBtn = new G()
|
||||
this._expandBtn.on('mouseover', e => {
|
||||
e.stopPropagation()
|
||||
this._expandBtn.css({
|
||||
cursor: 'pointer'
|
||||
})
|
||||
})
|
||||
this._expandBtn.on('mouseout', e => {
|
||||
e.stopPropagation()
|
||||
this._expandBtn.css({
|
||||
cursor: 'auto'
|
||||
})
|
||||
})
|
||||
this._expandBtn.on('click', e => {
|
||||
e.stopPropagation()
|
||||
// 展开收缩
|
||||
this.mindMap.execCommand('SET_NODE_EXPAND', this, !this.getData('expand'))
|
||||
this.mindMap.emit('expand_btn_click', this)
|
||||
})
|
||||
this._expandBtn.on('dblclick', e => {
|
||||
e.stopPropagation()
|
||||
})
|
||||
this._expandBtn.addClass('smm-expand-btn')
|
||||
this.group.add(this._expandBtn)
|
||||
}
|
||||
this._showExpandBtn = true
|
||||
this.updateExpandBtnNode()
|
||||
this.updateExpandBtnPos()
|
||||
}
|
||||
|
||||
// 移除展开收缩按钮
|
||||
function removeExpandBtn() {
|
||||
if (this._expandBtn && this._showExpandBtn) {
|
||||
this._expandBtn.remove()
|
||||
this._showExpandBtn = false
|
||||
}
|
||||
}
|
||||
|
||||
// 显示展开收起按钮
|
||||
function showExpandBtn() {
|
||||
const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
|
||||
if (alwaysShowExpandBtn || notShowExpandBtn) return
|
||||
setTimeout(() => {
|
||||
this.renderExpandBtn()
|
||||
}, 0)
|
||||
}
|
||||
|
||||
// 隐藏展开收起按钮
|
||||
function hideExpandBtn() {
|
||||
const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
|
||||
if (alwaysShowExpandBtn || this._isMouseenter || notShowExpandBtn) return
|
||||
// 非激活状态且展开状态鼠标移出才隐藏按钮
|
||||
let { isActive, expand } = this.getData()
|
||||
if (!isActive && expand) {
|
||||
setTimeout(() => {
|
||||
this.removeExpandBtn()
|
||||
}, 0)
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
createExpandNodeContent,
|
||||
updateExpandBtnNode,
|
||||
updateExpandBtnPos,
|
||||
renderExpandBtn,
|
||||
removeExpandBtn,
|
||||
showExpandBtn,
|
||||
hideExpandBtn,
|
||||
sumNode
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import { Rect } from '@svgdotjs/svg.js'
|
||||
|
||||
// 渲染展开收起按钮的隐藏占位元素
|
||||
function renderExpandBtnPlaceholderRect() {
|
||||
// 根节点或没有子节点不需要渲染
|
||||
if (this.getChildrenLength() <= 0 || this.isRoot) {
|
||||
return
|
||||
}
|
||||
// 默认显示展开按钮的情况下或不显示展开收起按钮的情况下不需要渲染
|
||||
const { alwaysShowExpandBtn, notShowExpandBtn, expandBtnSize } =
|
||||
this.mindMap.opt
|
||||
if (!alwaysShowExpandBtn && !notShowExpandBtn) {
|
||||
let { width, height } = this
|
||||
if (!this._unVisibleRectRegionNode) {
|
||||
this._unVisibleRectRegionNode = new Rect()
|
||||
this._unVisibleRectRegionNode.fill({
|
||||
color: 'transparent'
|
||||
})
|
||||
}
|
||||
this.group.add(this._unVisibleRectRegionNode)
|
||||
this.renderer.layout.renderExpandBtnRect(
|
||||
this._unVisibleRectRegionNode,
|
||||
expandBtnSize,
|
||||
width,
|
||||
height,
|
||||
this
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// 删除展开收起按钮的隐藏占位元素
|
||||
function clearExpandBtnPlaceholderRect() {
|
||||
if (!this._unVisibleRectRegionNode) {
|
||||
return
|
||||
}
|
||||
this._unVisibleRectRegionNode.remove()
|
||||
this._unVisibleRectRegionNode = null
|
||||
}
|
||||
|
||||
// 更新展开收起按钮的隐藏占位元素
|
||||
function updateExpandBtnPlaceholderRect() {
|
||||
// 布局改变需要重新渲染
|
||||
if (this.needRerenderExpandBtnPlaceholderRect) {
|
||||
this.needRerenderExpandBtnPlaceholderRect = false
|
||||
this.renderExpandBtnPlaceholderRect()
|
||||
}
|
||||
// 没有子节点到有子节点需要渲染
|
||||
if (this.getChildrenLength() > 0) {
|
||||
if (!this._unVisibleRectRegionNode) {
|
||||
this.renderExpandBtnPlaceholderRect()
|
||||
}
|
||||
} else {
|
||||
// 有子节点到没子节点，需要删除
|
||||
if (this._unVisibleRectRegionNode) {
|
||||
this.clearExpandBtnPlaceholderRect()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
renderExpandBtnPlaceholderRect,
|
||||
clearExpandBtnPlaceholderRect,
|
||||
updateExpandBtnPlaceholderRect
|
||||
}
|
||||
@@ -0,0 +1,235 @@
|
||||
import MindMapNode from './MindMapNode'
|
||||
import { createUid } from '../../../utils/index'
|
||||
|
||||
// 获取节点概要数据
|
||||
function formatGetGeneralization() {
|
||||
const data = this.getData('generalization')
|
||||
return Array.isArray(data) ? data : data ? [data] : []
|
||||
}
|
||||
|
||||
// 检查是否存在概要
|
||||
function checkHasGeneralization() {
|
||||
return this.formatGetGeneralization().length > 0
|
||||
}
|
||||
|
||||
// 检查是否存在自身的概要，非子节点区间
|
||||
function checkHasSelfGeneralization() {
|
||||
const list = this.formatGetGeneralization()
|
||||
return !!list.find(item => {
|
||||
return !item.range || item.range.length <= 0
|
||||
})
|
||||
}
|
||||
|
||||
// 获取概要节点所在的概要列表里的索引
|
||||
function getGeneralizationNodeIndex(node) {
|
||||
return this._generalizationList.findIndex(item => {
|
||||
return item.generalizationNode.uid === node.uid
|
||||
})
|
||||
}
|
||||
|
||||
// 创建概要节点
|
||||
function createGeneralizationNode() {
|
||||
if (this.isGeneralization || !this.checkHasGeneralization()) {
|
||||
return
|
||||
}
|
||||
let maxWidth = 0
|
||||
let maxHeight = 0
|
||||
const list = this.formatGetGeneralization()
|
||||
list.forEach((item, index) => {
|
||||
let cur = this._generalizationList[index]
|
||||
if (!cur) {
|
||||
cur = this._generalizationList[index] = {}
|
||||
}
|
||||
// 所属节点
|
||||
cur.node = this
|
||||
// 区间范围
|
||||
cur.range = item.range
|
||||
// 线和节点
|
||||
if (!cur.generalizationLine) {
|
||||
cur.generalizationLine = this.lineDraw.path()
|
||||
}
|
||||
if (!cur.generalizationNode) {
|
||||
cur.generalizationNode = new MindMapNode({
|
||||
data: {
|
||||
inserting: item.inserting,
|
||||
data: item
|
||||
},
|
||||
uid: createUid(),
|
||||
renderer: this.renderer,
|
||||
mindMap: this.mindMap,
|
||||
isGeneralization: true
|
||||
})
|
||||
}
|
||||
delete item.inserting
|
||||
// 关联所属节点
|
||||
cur.generalizationNode.generalizationBelongNode = this
|
||||
// 大小
|
||||
if (cur.generalizationNode.width > maxWidth)
|
||||
maxWidth = cur.generalizationNode.width
|
||||
if (cur.generalizationNode.height > maxHeight)
|
||||
maxHeight = cur.generalizationNode.height
|
||||
// 如果该概要为激活状态，那么加入激活节点列表
|
||||
if (item.isActive) {
|
||||
this.renderer.addNodeToActiveList(cur.generalizationNode)
|
||||
}
|
||||
})
|
||||
this._generalizationNodeWidth = maxWidth
|
||||
this._generalizationNodeHeight = maxHeight
|
||||
}
|
||||
|
||||
// 更新概要节点
|
||||
function updateGeneralization() {
|
||||
if (this.isGeneralization) return
|
||||
this.removeGeneralization()
|
||||
this.createGeneralizationNode()
|
||||
}
|
||||
|
||||
// 渲染概要节点
|
||||
function renderGeneralization(forceRender) {
|
||||
if (this.isGeneralization) return
|
||||
this.updateGeneralizationData()
|
||||
const list = this.formatGetGeneralization()
|
||||
if (list.length <= 0 || this.getData('expand') === false) {
|
||||
this.removeGeneralization()
|
||||
return
|
||||
}
|
||||
if (list.length !== this._generalizationList.length) {
|
||||
this.removeGeneralization()
|
||||
}
|
||||
this.createGeneralizationNode()
|
||||
this.renderer.layout.renderGeneralization(this._generalizationList)
|
||||
this._generalizationList.forEach(item => {
|
||||
this.style.generalizationLine(item.generalizationLine)
|
||||
item.generalizationNode.render(() => {}, forceRender)
|
||||
})
|
||||
}
|
||||
|
||||
// 更新节点概要数据
|
||||
function updateGeneralizationData() {
|
||||
const childrenLength = this.getChildrenLength()
|
||||
const list = this.formatGetGeneralization()
|
||||
const newList = []
|
||||
list.forEach(item => {
|
||||
if (!item.range) {
|
||||
newList.push(item)
|
||||
return
|
||||
}
|
||||
if (
|
||||
item.range.length > 0 &&
|
||||
item.range[0] <= childrenLength - 1 &&
|
||||
item.range[1] <= childrenLength - 1
|
||||
) {
|
||||
newList.push(item)
|
||||
}
|
||||
})
|
||||
if (newList.length !== list.length) {
|
||||
this.setData({
|
||||
generalization: newList
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 删除概要节点
|
||||
function removeGeneralization() {
|
||||
if (this.isGeneralization) return
|
||||
this._generalizationList.forEach(item => {
|
||||
item.generalizationNode.style.onRemove()
|
||||
if (item.generalizationLine) {
|
||||
item.generalizationLine.remove()
|
||||
item.generalizationLine = null
|
||||
}
|
||||
if (item.generalizationNode) {
|
||||
// 删除概要节点时要同步从激活节点里删除
|
||||
this.renderer.removeNodeFromActiveList(item.generalizationNode)
|
||||
item.generalizationNode.remove()
|
||||
item.generalizationNode = null
|
||||
}
|
||||
})
|
||||
this._generalizationList = []
|
||||
// hack修复当激活一个节点时创建概要，然后立即激活创建的概要节点后会重复创建概要节点并且无法删除的问题
|
||||
if (this.generalizationBelongNode) {
|
||||
this.nodeDraw
|
||||
.find('.generalization_' + this.generalizationBelongNode.uid)
|
||||
.remove()
|
||||
}
|
||||
}
|
||||
|
||||
// 隐藏概要节点
|
||||
function hideGeneralization() {
|
||||
if (this.isGeneralization) return
|
||||
this._generalizationList.forEach(item => {
|
||||
if (item.generalizationLine) item.generalizationLine.hide()
|
||||
if (item.generalizationNode) item.generalizationNode.hide()
|
||||
})
|
||||
}
|
||||
|
||||
// 显示概要节点
|
||||
function showGeneralization() {
|
||||
if (this.isGeneralization) return
|
||||
this._generalizationList.forEach(item => {
|
||||
if (item.generalizationLine) item.generalizationLine.show()
|
||||
if (item.generalizationNode) item.generalizationNode.show()
|
||||
})
|
||||
}
|
||||
|
||||
// 设置概要节点的透明度
|
||||
function setGeneralizationOpacity(val) {
|
||||
this._generalizationList.forEach(item => {
|
||||
item.generalizationLine.opacity(val)
|
||||
item.generalizationNode.group.opacity(val)
|
||||
})
|
||||
}
|
||||
|
||||
// 处理概要节点鼠标移入事件
|
||||
function handleGeneralizationMouseenter() {
|
||||
const belongNode = this.generalizationBelongNode
|
||||
const list = belongNode.formatGetGeneralization()
|
||||
const index = belongNode.getGeneralizationNodeIndex(this)
|
||||
const generalizationData = list[index]
|
||||
// 如果主题中设置了hoverRectColor颜色，那么使用该颜色
|
||||
// 否则使用hoverRectColor实例化选项的颜色
|
||||
// 兜底使用highlightNode方法的默认颜色
|
||||
const hoverRectColor = this.getStyle('hoverRectColor')
|
||||
const color = hoverRectColor || this.mindMap.opt.hoverRectColor
|
||||
const style = color
|
||||
? {
|
||||
stroke: color
|
||||
}
|
||||
: null
|
||||
// 区间概要，框子节点
|
||||
if (
|
||||
Array.isArray(generalizationData.range) &&
|
||||
generalizationData.range.length > 0
|
||||
) {
|
||||
this.mindMap.renderer.highlightNode(
|
||||
belongNode,
|
||||
generalizationData.range,
|
||||
style
|
||||
)
|
||||
} else {
|
||||
// 否则框自己
|
||||
this.mindMap.renderer.highlightNode(belongNode, null, style)
|
||||
}
|
||||
}
|
||||
|
||||
// 处理概要节点鼠标移出事件
|
||||
function handleGeneralizationMouseleave() {
|
||||
this.mindMap.renderer.closeHighlightNode()
|
||||
}
|
||||
|
||||
export default {
|
||||
formatGetGeneralization,
|
||||
checkHasGeneralization,
|
||||
checkHasSelfGeneralization,
|
||||
getGeneralizationNodeIndex,
|
||||
createGeneralizationNode,
|
||||
updateGeneralization,
|
||||
updateGeneralizationData,
|
||||
renderGeneralization,
|
||||
removeGeneralization,
|
||||
hideGeneralization,
|
||||
showGeneralization,
|
||||
setGeneralizationOpacity,
|
||||
handleGeneralizationMouseenter,
|
||||
handleGeneralizationMouseleave
|
||||
}
|
||||
@@ -0,0 +1,516 @@
|
||||
import { CONSTANTS } from '../../../constants/constant'
|
||||
import { G, Rect } from '@svgdotjs/svg.js'
|
||||
import { createForeignObjectNode } from '../../../utils/index'
|
||||
|
||||
// 根据图片放置位置返回图片和文本的间距值
|
||||
function getImgTextMarin(dir, imgWidth, textWidth, imgHeight, textHeight) {
|
||||
// 图片和文字节点的间距
|
||||
const { imgTextMargin } = this.mindMap.opt
|
||||
if (dir === 'v') {
|
||||
// 垂直
|
||||
return imgHeight > 0 && textHeight > 0 ? imgTextMargin : 0
|
||||
} else {
|
||||
// 水平
|
||||
return imgWidth > 0 && textWidth > 0 ? imgTextMargin : 0
|
||||
}
|
||||
}
|
||||
|
||||
// 获取标签内容的大小
|
||||
function getTagContentSize(space) {
|
||||
let maxTagHeight = 0
|
||||
let width = this._tagData.reduce((sum, cur) => {
|
||||
maxTagHeight = Math.max(maxTagHeight, cur.height)
|
||||
return (sum += cur.width)
|
||||
}, 0)
|
||||
width += (this._tagData.length - 1) * space
|
||||
return {
|
||||
width,
|
||||
height: maxTagHeight
|
||||
}
|
||||
}
|
||||
|
||||
// 计算节点尺寸信息
|
||||
function getNodeRect() {
|
||||
// 自定义节点内容
|
||||
if (this.isUseCustomNodeContent()) {
|
||||
const rect = this.measureCustomNodeContentSize(
|
||||
this._customNodeContent.cloneNode(true)
|
||||
)
|
||||
return {
|
||||
width: this.hasCustomWidth() ? this.customTextWidth : rect.width,
|
||||
height: rect.height
|
||||
}
|
||||
}
|
||||
const { TAG_PLACEMENT, IMG_PLACEMENT } = CONSTANTS
|
||||
const { textContentMargin } = this.mindMap.opt
|
||||
const tagPlacement = this.getStyle('tagPlacement') || TAG_PLACEMENT.RIGHT
|
||||
const tagIsBottom = tagPlacement === TAG_PLACEMENT.BOTTOM
|
||||
const imgPlacement = this.getStyle('imgPlacement') || IMG_PLACEMENT.TOP
|
||||
// 宽高
|
||||
let imgContentWidth = 0
|
||||
let imgContentHeight = 0
|
||||
let textContentWidth = 0
|
||||
let textContentHeight = 0
|
||||
let tagContentWidth = 0
|
||||
let tagContentHeight = 0
|
||||
let spaceCount = 0
|
||||
// 存在图片
|
||||
if (this._imgData) {
|
||||
imgContentWidth = this._imgData.width
|
||||
imgContentHeight = this._imgData.height
|
||||
}
|
||||
// 库前置内容
|
||||
this.mindMap.nodeInnerPrefixList.forEach(item => {
|
||||
const itemData = this[`_${item.name}Data`]
|
||||
if (itemData) {
|
||||
textContentWidth += itemData.width
|
||||
textContentHeight = Math.max(textContentHeight, itemData.height)
|
||||
spaceCount++
|
||||
}
|
||||
})
|
||||
// 自定义前置内容
|
||||
if (this._prefixData) {
|
||||
textContentWidth += this._prefixData.width
|
||||
textContentHeight = Math.max(textContentHeight, this._prefixData.height)
|
||||
spaceCount++
|
||||
}
|
||||
// 图标
|
||||
if (this._iconData.length > 0) {
|
||||
textContentWidth +=
|
||||
this._iconData.reduce((sum, cur) => {
|
||||
textContentHeight = Math.max(textContentHeight, cur.height)
|
||||
return (sum += cur.width)
|
||||
}, 0) +
|
||||
(this._iconData.length - 1) * textContentMargin
|
||||
spaceCount++
|
||||
}
|
||||
// 文字
|
||||
if (this._textData) {
|
||||
textContentWidth += this._textData.width
|
||||
textContentHeight = Math.max(textContentHeight, this._textData.height)
|
||||
spaceCount++
|
||||
}
|
||||
// 超链接
|
||||
if (this._hyperlinkData) {
|
||||
textContentWidth += this._hyperlinkData.width
|
||||
textContentHeight = Math.max(textContentHeight, this._hyperlinkData.height)
|
||||
spaceCount++
|
||||
}
|
||||
// 标签
|
||||
if (this._tagData.length > 0) {
|
||||
const { width: totalTagWidth, height: maxTagHeight } =
|
||||
this.getTagContentSize(textContentMargin)
|
||||
if (tagIsBottom) {
|
||||
// 文字下方
|
||||
tagContentWidth = totalTagWidth
|
||||
tagContentHeight = maxTagHeight
|
||||
} else {
|
||||
// 否则在右侧
|
||||
textContentWidth += totalTagWidth
|
||||
textContentHeight = Math.max(textContentHeight, maxTagHeight)
|
||||
spaceCount++
|
||||
}
|
||||
}
|
||||
// 备注
|
||||
if (this._noteData) {
|
||||
textContentWidth += this._noteData.width
|
||||
textContentHeight = Math.max(textContentHeight, this._noteData.height)
|
||||
spaceCount++
|
||||
}
|
||||
// 附件
|
||||
if (this._attachmentData) {
|
||||
textContentWidth += this._attachmentData.width
|
||||
textContentHeight = Math.max(textContentHeight, this._attachmentData.height)
|
||||
spaceCount++
|
||||
}
|
||||
// 自定义后置内容
|
||||
if (this._postfixData) {
|
||||
textContentWidth += this._postfixData.width
|
||||
textContentHeight = Math.max(textContentHeight, this._postfixData.height)
|
||||
spaceCount++
|
||||
}
|
||||
// 库后置内容
|
||||
this.mindMap.nodeInnerPostfixList.forEach(item => {
|
||||
const itemData = this[`_${item.name}Data`]
|
||||
if (itemData) {
|
||||
textContentWidth += itemData.width
|
||||
textContentHeight = Math.max(textContentHeight, itemData.height)
|
||||
spaceCount++
|
||||
}
|
||||
})
|
||||
textContentWidth += (spaceCount - 1) * textContentMargin
|
||||
// 文字内容部分的尺寸
|
||||
if (tagIsBottom && textContentWidth > 0 && tagContentHeight > 0) {
|
||||
this._rectInfo.textContentWidthWithoutTag = textContentWidth
|
||||
textContentWidth = Math.max(textContentWidth, tagContentWidth)
|
||||
textContentHeight = textContentHeight + textContentMargin + tagContentHeight
|
||||
}
|
||||
this._rectInfo.textContentWidth = textContentWidth
|
||||
this._rectInfo.textContentHeight = textContentHeight
|
||||
|
||||
// 纯内容宽高
|
||||
let _width = 0
|
||||
let _height = 0
|
||||
if ([IMG_PLACEMENT.TOP, IMG_PLACEMENT.BOTTOM].includes(imgPlacement)) {
|
||||
// 图片在上下
|
||||
_width = Math.max(imgContentWidth, textContentWidth)
|
||||
_height =
|
||||
imgContentHeight +
|
||||
textContentHeight +
|
||||
this.getImgTextMarin('v', 0, 0, imgContentHeight, textContentHeight)
|
||||
} else {
|
||||
// 图片在左右
|
||||
_width =
|
||||
imgContentWidth +
|
||||
textContentWidth +
|
||||
this.getImgTextMarin('h', imgContentWidth, textContentWidth)
|
||||
_height = Math.max(imgContentHeight, textContentHeight)
|
||||
}
|
||||
const { paddingX, paddingY } = this.getPaddingVale()
|
||||
// 计算节点形状需要的附加内边距
|
||||
const { paddingX: shapePaddingX, paddingY: shapePaddingY } =
|
||||
this.shapeInstance.getShapePadding(_width, _height, paddingX, paddingY)
|
||||
this.shapePadding.paddingX = shapePaddingX
|
||||
this.shapePadding.paddingY = shapePaddingY
|
||||
// 边框宽度，因为边框是以中线向两端发散，所以边框会超出节点
|
||||
const borderWidth = this.getBorderWidth()
|
||||
return {
|
||||
width: _width + paddingX * 2 + shapePaddingX * 2 + borderWidth,
|
||||
height: _height + paddingY * 2 + shapePaddingY * 2 + borderWidth
|
||||
}
|
||||
}
|
||||
|
||||
// 激活hover和激活边框
|
||||
function addHoverNode(width, height) {
|
||||
const { hoverRectPadding } = this.mindMap.opt
|
||||
this.hoverNode = new Rect()
|
||||
.size(width + hoverRectPadding * 2, height + hoverRectPadding * 2)
|
||||
.x(-hoverRectPadding)
|
||||
.y(-hoverRectPadding)
|
||||
this.hoverNode.addClass('smm-hover-node')
|
||||
this.style.hoverNode(this.hoverNode, width, height)
|
||||
this.group.add(this.hoverNode)
|
||||
}
|
||||
|
||||
// 当使用了完全自定义节点内容后，可以通过该方法实时更新节点大小
|
||||
function customNodeContentRealtimeLayout() {
|
||||
if (!this.group) return
|
||||
if (!this.isUseCustomNodeContent()) return
|
||||
// 删除除foreignObject外的其他元素
|
||||
if (this.shapeNode) this.shapeNode.remove()
|
||||
if (this._unVisibleRectRegionNode) this._unVisibleRectRegionNode.remove()
|
||||
if (this.hoverNode) this.hoverNode.remove()
|
||||
const { width, height } = this
|
||||
const halfBorderWidth = this.getBorderWidth() / 2
|
||||
// 节点形状
|
||||
this.shapeNode = this.shapeInstance.createShape()
|
||||
this.shapeNode.addClass('smm-node-shape')
|
||||
this.shapeNode.translate(halfBorderWidth, halfBorderWidth)
|
||||
this.style.shape(this.shapeNode)
|
||||
this.group.add(this.shapeNode)
|
||||
// 渲染一个隐藏的矩形区域，用来触发展开收起按钮的显示
|
||||
this.renderExpandBtnPlaceholderRect()
|
||||
// 概要节点添加一个带所属节点id的类名
|
||||
if (this.isGeneralization && this.generalizationBelongNode) {
|
||||
this.group.addClass('generalization_' + this.generalizationBelongNode.uid)
|
||||
}
|
||||
// 激活hover和激活边框
|
||||
this.addHoverNode(width, height)
|
||||
// 将形状元素移至底层，避免遮挡foreignObject
|
||||
this.shapeNode.back()
|
||||
// 更新foreignObject元素大小
|
||||
this.group.findOne('foreignObject').size(width, height)
|
||||
}
|
||||
|
||||
// 定位节点内容
|
||||
function layout() {
|
||||
if (!this.group) return
|
||||
// 清除之前的内容
|
||||
this.group.clear()
|
||||
const {
|
||||
openRealtimeRenderOnNodeTextEdit,
|
||||
textContentMargin,
|
||||
addCustomContentToNode
|
||||
} = this.mindMap.opt
|
||||
// 避免编辑过程中展开收起按钮闪烁的问题
|
||||
// 暂时去掉，带来的问题太多
|
||||
// if (
|
||||
// openRealtimeRenderOnNodeTextEdit &&
|
||||
// this._expandBtn &&
|
||||
// this.getChildrenLength() > 0
|
||||
// ) {
|
||||
// this.group.add(this._expandBtn)
|
||||
// }
|
||||
const { width, height } = this
|
||||
let { paddingX, paddingY } = this.getPaddingVale()
|
||||
const halfBorderWidth = this.getBorderWidth() / 2
|
||||
paddingX += this.shapePadding.paddingX + halfBorderWidth
|
||||
paddingY += this.shapePadding.paddingY + halfBorderWidth
|
||||
// 节点形状
|
||||
this.shapeNode = this.shapeInstance.createShape()
|
||||
this.shapeNode.addClass('smm-node-shape')
|
||||
this.shapeNode.translate(halfBorderWidth, halfBorderWidth)
|
||||
this.style.shape(this.shapeNode)
|
||||
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)
|
||||
}
|
||||
// 如果存在自定义节点内容，那么使用自定义节点内容
|
||||
if (this.isUseCustomNodeContent()) {
|
||||
const foreignObject = createForeignObjectNode({
|
||||
el: this._customNodeContent,
|
||||
width,
|
||||
height
|
||||
})
|
||||
this.group.add(foreignObject)
|
||||
this.addHoverNode(width, height)
|
||||
return
|
||||
}
|
||||
const { IMG_PLACEMENT, TAG_PLACEMENT } = CONSTANTS
|
||||
const imgPlacement = this.getStyle('imgPlacement') || IMG_PLACEMENT.TOP
|
||||
const tagPlacement = this.getStyle('tagPlacement') || TAG_PLACEMENT.RIGHT
|
||||
const tagIsBottom = tagPlacement === TAG_PLACEMENT.BOTTOM
|
||||
let { textContentWidth, textContentHeight, textContentWidthWithoutTag } =
|
||||
this._rectInfo
|
||||
const textContentHeightWithTag = textContentHeight
|
||||
// 如果存在显示在文本下方的标签，那么非标签内容的整体高度需要减去标签高度
|
||||
let totalTagWidth = 0
|
||||
let maxTagHeight = 0
|
||||
const hasTagContent = this._tagData && this._tagData.length > 0
|
||||
if (hasTagContent) {
|
||||
const res = this.getTagContentSize(textContentMargin)
|
||||
totalTagWidth = res.width
|
||||
maxTagHeight = res.height
|
||||
if (tagIsBottom) {
|
||||
textContentHeight -= maxTagHeight + textContentMargin
|
||||
}
|
||||
}
|
||||
// 图片节点
|
||||
let imgWidth = 0
|
||||
let imgHeight = 0
|
||||
if (this._imgData) {
|
||||
imgWidth = this._imgData.width
|
||||
imgHeight = this._imgData.height
|
||||
this.group.add(this._imgData.node)
|
||||
switch (imgPlacement) {
|
||||
case IMG_PLACEMENT.TOP:
|
||||
this._imgData.node.cx(width / 2).y(paddingY)
|
||||
break
|
||||
case IMG_PLACEMENT.BOTTOM:
|
||||
this._imgData.node.cx(width / 2).y(height - paddingY - imgHeight)
|
||||
break
|
||||
case IMG_PLACEMENT.LEFT:
|
||||
this._imgData.node.x(paddingX).cy(height / 2)
|
||||
break
|
||||
case IMG_PLACEMENT.RIGHT:
|
||||
this._imgData.node.x(width - paddingX - imgWidth).cy(height / 2)
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
// 内容节点
|
||||
let textContentNested = new G()
|
||||
let textContentOffsetX = 0
|
||||
if (hasTagContent && tagIsBottom) {
|
||||
textContentOffsetX =
|
||||
textContentWidthWithoutTag < textContentWidth
|
||||
? (textContentWidth - textContentWidthWithoutTag) / 2
|
||||
: 0
|
||||
}
|
||||
// 库前置内容
|
||||
this.mindMap.nodeInnerPrefixList.forEach(item => {
|
||||
const itemData = this[`_${item.name}Data`]
|
||||
if (itemData) {
|
||||
itemData.node
|
||||
.x(textContentOffsetX)
|
||||
.y((textContentHeight - itemData.height) / 2)
|
||||
textContentNested.add(itemData.node)
|
||||
textContentOffsetX += itemData.width + textContentMargin
|
||||
}
|
||||
})
|
||||
// 自定义前置内容
|
||||
if (this._prefixData) {
|
||||
const foreignObject = createForeignObjectNode({
|
||||
el: this._prefixData.el,
|
||||
width: this._prefixData.width,
|
||||
height: this._prefixData.height
|
||||
})
|
||||
foreignObject
|
||||
.x(textContentOffsetX)
|
||||
.y((textContentHeight - this._prefixData.height) / 2)
|
||||
textContentNested.add(foreignObject)
|
||||
textContentOffsetX += this._prefixData.width + textContentMargin
|
||||
}
|
||||
// icon
|
||||
let iconNested = new G()
|
||||
if (this._iconData && this._iconData.length > 0) {
|
||||
let iconLeft = 0
|
||||
this._iconData.forEach(item => {
|
||||
item.node
|
||||
.x(textContentOffsetX + iconLeft)
|
||||
.y((textContentHeight - item.height) / 2)
|
||||
iconNested.add(item.node)
|
||||
iconLeft += item.width + textContentMargin
|
||||
})
|
||||
textContentNested.add(iconNested)
|
||||
textContentOffsetX += iconLeft
|
||||
}
|
||||
// 文字
|
||||
if (this._textData) {
|
||||
const oldX = this._textData.node.attr('data-offsetx') || 0
|
||||
this._textData.node.attr('data-offsetx', textContentOffsetX)
|
||||
// 修复safari浏览器节点存在图标时文字位置不正确的问题
|
||||
;(this._textData.nodeContent || this._textData.node)
|
||||
.x(-oldX) // 修复非富文本模式下同时存在图标和换行的文本时，被收起和展开时图标与文字距离会逐渐拉大的问题
|
||||
.x(textContentOffsetX)
|
||||
.y((textContentHeight - this._textData.height) / 2)
|
||||
// 如果开启了文本编辑实时渲染，需要判断当前渲染的节点是否是正在编辑的节点，是的话将透明度设置为0不显示
|
||||
if (openRealtimeRenderOnNodeTextEdit) {
|
||||
this._textData.node.opacity(
|
||||
this.mindMap.renderer.textEdit.getCurrentEditNode() === this ? 0 : 1
|
||||
)
|
||||
}
|
||||
textContentNested.add(this._textData.node)
|
||||
textContentOffsetX += this._textData.width + textContentMargin
|
||||
}
|
||||
// 超链接
|
||||
if (this._hyperlinkData) {
|
||||
this._hyperlinkData.node
|
||||
.x(textContentOffsetX)
|
||||
.y((textContentHeight - this._hyperlinkData.height) / 2)
|
||||
textContentNested.add(this._hyperlinkData.node)
|
||||
textContentOffsetX += this._hyperlinkData.width + textContentMargin
|
||||
}
|
||||
// 标签
|
||||
let tagNested = new G()
|
||||
if (hasTagContent) {
|
||||
if (tagIsBottom) {
|
||||
// 标签显示在文字下方
|
||||
let tagLeft = 0
|
||||
this._tagData.forEach(item => {
|
||||
item.node.x(tagLeft).y((maxTagHeight - item.height) / 2)
|
||||
tagNested.add(item.node)
|
||||
tagLeft += item.width + textContentMargin
|
||||
})
|
||||
tagNested
|
||||
.x((textContentWidth - totalTagWidth) / 2)
|
||||
.y(textContentHeightWithTag - maxTagHeight)
|
||||
textContentNested.add(tagNested)
|
||||
} else {
|
||||
// 标签显示在文字右侧
|
||||
let tagLeft = 0
|
||||
this._tagData.forEach(item => {
|
||||
item.node
|
||||
.x(textContentOffsetX + tagLeft)
|
||||
.y((textContentHeight - item.height) / 2)
|
||||
tagNested.add(item.node)
|
||||
tagLeft += item.width + textContentMargin
|
||||
})
|
||||
textContentNested.add(tagNested)
|
||||
textContentOffsetX += tagLeft
|
||||
}
|
||||
}
|
||||
// 备注
|
||||
if (this._noteData) {
|
||||
this._noteData.node
|
||||
.x(textContentOffsetX)
|
||||
.y((textContentHeight - this._noteData.height) / 2)
|
||||
textContentNested.add(this._noteData.node)
|
||||
textContentOffsetX += this._noteData.width + textContentMargin
|
||||
}
|
||||
// 附件
|
||||
if (this._attachmentData) {
|
||||
this._attachmentData.node
|
||||
.x(textContentOffsetX)
|
||||
.y((textContentHeight - this._attachmentData.height) / 2)
|
||||
textContentNested.add(this._attachmentData.node)
|
||||
textContentOffsetX += this._attachmentData.width + textContentMargin
|
||||
}
|
||||
// 自定义后置内容
|
||||
if (this._postfixData) {
|
||||
const foreignObject = createForeignObjectNode({
|
||||
el: this._postfixData.el,
|
||||
width: this._postfixData.width,
|
||||
height: this._postfixData.height
|
||||
})
|
||||
foreignObject
|
||||
.x(textContentOffsetX)
|
||||
.y((textContentHeight - this._postfixData.height) / 2)
|
||||
textContentNested.add(foreignObject)
|
||||
textContentOffsetX += this._postfixData.width + textContentMargin
|
||||
}
|
||||
// 库后置内容
|
||||
this.mindMap.nodeInnerPostfixList.forEach(item => {
|
||||
const itemData = this[`_${item.name}Data`]
|
||||
if (itemData) {
|
||||
itemData.node
|
||||
.x(textContentOffsetX)
|
||||
.y((textContentHeight - itemData.height) / 2)
|
||||
textContentNested.add(itemData.node)
|
||||
textContentOffsetX += itemData.width + textContentMargin
|
||||
}
|
||||
})
|
||||
this.group.add(textContentNested)
|
||||
// 文字内容整体
|
||||
const { width: bboxWidth, height: bboxHeight } = textContentNested.bbox()
|
||||
let translateX = 0
|
||||
let translateY = 0
|
||||
switch (imgPlacement) {
|
||||
case IMG_PLACEMENT.TOP:
|
||||
translateX = width / 2 - bboxWidth / 2
|
||||
translateY =
|
||||
paddingY + // 内边距
|
||||
imgHeight + // 图片高度
|
||||
this.getImgTextMarin('v', 0, 0, imgHeight, textContentHeightWithTag) // 和图片的间距
|
||||
break
|
||||
case IMG_PLACEMENT.BOTTOM:
|
||||
translateX = width / 2 - bboxWidth / 2
|
||||
translateY = paddingY
|
||||
break
|
||||
case IMG_PLACEMENT.LEFT:
|
||||
translateX =
|
||||
imgWidth +
|
||||
paddingX +
|
||||
this.getImgTextMarin('h', imgWidth, textContentWidth)
|
||||
translateY = height / 2 - bboxHeight / 2
|
||||
break
|
||||
case IMG_PLACEMENT.RIGHT:
|
||||
translateX = paddingX
|
||||
translateY = height / 2 - bboxHeight / 2
|
||||
break
|
||||
}
|
||||
textContentNested.translate(translateX, translateY)
|
||||
this.addHoverNode(width, height)
|
||||
if (this._customContentAddToNodeAdd && this._customContentAddToNodeAdd.el) {
|
||||
const foreignObject = createForeignObjectNode(
|
||||
this._customContentAddToNodeAdd
|
||||
)
|
||||
this.group.add(foreignObject)
|
||||
if (
|
||||
addCustomContentToNode &&
|
||||
typeof addCustomContentToNode.handle === 'function'
|
||||
) {
|
||||
addCustomContentToNode.handle({
|
||||
content: this._customContentAddToNodeAdd,
|
||||
element: foreignObject,
|
||||
node: this
|
||||
})
|
||||
}
|
||||
}
|
||||
this.mindMap.emit('node_layout_end', this)
|
||||
}
|
||||
|
||||
export default {
|
||||
getImgTextMarin,
|
||||
getTagContentSize,
|
||||
getNodeRect,
|
||||
addHoverNode,
|
||||
layout,
|
||||
customNodeContentRealtimeLayout
|
||||
}
|
||||
@@ -0,0 +1,153 @@
|
||||
import { Rect } from '@svgdotjs/svg.js'
|
||||
|
||||
// 初始化拖拽
|
||||
function initDragHandle() {
|
||||
if (!this.checkEnableDragModifyNodeWidth()) {
|
||||
return
|
||||
}
|
||||
// 拖拽手柄元素
|
||||
this._dragHandleNodes = null
|
||||
// 手柄元素的宽度
|
||||
this.dragHandleWidth = 4
|
||||
// 鼠标按下时的x坐标
|
||||
this.dragHandleMousedownX = 0
|
||||
// 鼠标是否处于按下状态
|
||||
this.isDragHandleMousedown = false
|
||||
// 当前拖拽的手柄序号
|
||||
this.dragHandleIndex = 0
|
||||
// 鼠标按下时记录当前的customTextWidth值
|
||||
this.dragHandleMousedownCustomTextWidth = 0
|
||||
// 鼠标按下时记录当前的手型样式
|
||||
this.dragHandleMousedownBodyCursor = ''
|
||||
// 鼠标按下时记录当前节点的left值
|
||||
this.dragHandleMousedownLeft = 0
|
||||
|
||||
this.onDragMousemoveHandle = this.onDragMousemoveHandle.bind(this)
|
||||
window.addEventListener('mousemove', this.onDragMousemoveHandle)
|
||||
this.onDragMouseupHandle = this.onDragMouseupHandle.bind(this)
|
||||
window.addEventListener('mouseup', this.onDragMouseupHandle)
|
||||
this.mindMap.on('node_mouseup', this.onDragMouseupHandle)
|
||||
}
|
||||
|
||||
// 鼠标移动事件
|
||||
function onDragMousemoveHandle(e) {
|
||||
if (!this.isDragHandleMousedown) return
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
let {
|
||||
minNodeTextModifyWidth,
|
||||
maxNodeTextModifyWidth,
|
||||
isUseCustomNodeContent,
|
||||
customCreateNodeContent
|
||||
} = this.mindMap.opt
|
||||
const useCustomContent =
|
||||
isUseCustomNodeContent && customCreateNodeContent && this._customNodeContent
|
||||
document.body.style.cursor = 'ew-resize'
|
||||
this.group.css({
|
||||
cursor: 'ew-resize'
|
||||
})
|
||||
const { scaleX } = this.mindMap.draw.transform()
|
||||
const ox = e.clientX - this.dragHandleMousedownX
|
||||
let newWidth =
|
||||
this.dragHandleMousedownCustomTextWidth +
|
||||
(this.dragHandleIndex === 0 ? -ox : ox) / scaleX
|
||||
newWidth = Math.max(newWidth, minNodeTextModifyWidth)
|
||||
if (maxNodeTextModifyWidth !== -1) {
|
||||
newWidth = Math.min(newWidth, maxNodeTextModifyWidth)
|
||||
}
|
||||
// 如果存在图片，那么最小值需要考虑图片宽度
|
||||
if (!useCustomContent && this.getData('image')) {
|
||||
const imgSize = this.getImgShowSize()
|
||||
if (
|
||||
this._rectInfo.textContentWidth - this.customTextWidth + newWidth <=
|
||||
imgSize[0]
|
||||
) {
|
||||
newWidth =
|
||||
imgSize[0] + this.customTextWidth - this._rectInfo.textContentWidth
|
||||
}
|
||||
}
|
||||
this.customTextWidth = newWidth
|
||||
if (this.dragHandleIndex === 0) {
|
||||
this.left = this.dragHandleMousedownLeft + ox / scaleX
|
||||
}
|
||||
// 自定义内容不重新渲染，交给开发者
|
||||
this.reRender(useCustomContent ? [] : ['text'], {
|
||||
ignoreUpdateCustomTextWidth: true
|
||||
})
|
||||
}
|
||||
|
||||
// 鼠标松开事件
|
||||
function onDragMouseupHandle() {
|
||||
if (!this.isDragHandleMousedown) return
|
||||
document.body.style.cursor = this.dragHandleMousedownBodyCursor
|
||||
this.group.css({
|
||||
cursor: 'default'
|
||||
})
|
||||
this.isDragHandleMousedown = false
|
||||
this.dragHandleMousedownX = 0
|
||||
this.dragHandleIndex = 0
|
||||
this.dragHandleMousedownCustomTextWidth = 0
|
||||
this.setData({
|
||||
customTextWidth: this.customTextWidth
|
||||
})
|
||||
this.mindMap.render()
|
||||
this.mindMap.emit('dragModifyNodeWidthEnd', this)
|
||||
}
|
||||
|
||||
// 插件拖拽手柄元素
|
||||
function createDragHandleNode() {
|
||||
const list = [new Rect(), new Rect()]
|
||||
list.forEach((node, index) => {
|
||||
node
|
||||
.size(this.dragHandleWidth, this.height)
|
||||
.fill({
|
||||
color: 'transparent'
|
||||
})
|
||||
.css({
|
||||
cursor: 'ew-resize'
|
||||
})
|
||||
node.on('mousedown', e => {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
this.dragHandleMousedownX = e.clientX
|
||||
this.dragHandleIndex = index
|
||||
this.dragHandleMousedownCustomTextWidth =
|
||||
this.customTextWidth === undefined
|
||||
? this._textData
|
||||
? this._textData.width
|
||||
: this.width
|
||||
: this.customTextWidth
|
||||
this.dragHandleMousedownBodyCursor = document.body.style.cursor
|
||||
this.dragHandleMousedownLeft = this.left
|
||||
this.isDragHandleMousedown = true
|
||||
})
|
||||
})
|
||||
return list
|
||||
}
|
||||
|
||||
// 更新拖拽按钮的显隐和位置尺寸
|
||||
function updateDragHandle() {
|
||||
if (!this.checkEnableDragModifyNodeWidth()) return
|
||||
if (!this._dragHandleNodes) {
|
||||
this._dragHandleNodes = this.createDragHandleNode()
|
||||
}
|
||||
if (this.getData('isActive')) {
|
||||
this._dragHandleNodes.forEach(node => {
|
||||
node.height(this.height)
|
||||
this.group.add(node)
|
||||
})
|
||||
this._dragHandleNodes[1].x(this.width - this.dragHandleWidth)
|
||||
} else {
|
||||
this._dragHandleNodes.forEach(node => {
|
||||
node.remove()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
initDragHandle,
|
||||
onDragMousemoveHandle,
|
||||
onDragMouseupHandle,
|
||||
createDragHandleNode,
|
||||
updateDragHandle
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
import btnsSvg from '../../../svg/btns'
|
||||
import { SVG, Circle, G } from '@svgdotjs/svg.js'
|
||||
|
||||
function initQuickCreateChildBtn() {
|
||||
if (this.isGeneralization) return
|
||||
this._quickCreateChildBtn = null
|
||||
this._showQuickCreateChildBtn = false
|
||||
}
|
||||
|
||||
// 显示按钮
|
||||
function showQuickCreateChildBtn() {
|
||||
if (this.isGeneralization || this.getChildrenLength() > 0) return
|
||||
// 创建按钮
|
||||
if (this._quickCreateChildBtn) {
|
||||
this.group.add(this._quickCreateChildBtn)
|
||||
} else {
|
||||
const { quickCreateChildBtnIcon, expandBtnStyle, expandBtnSize } =
|
||||
this.mindMap.opt
|
||||
const { icon, style } = quickCreateChildBtnIcon
|
||||
let { color, fill } = expandBtnStyle || {
|
||||
color: '#808080',
|
||||
fill: '#fff'
|
||||
}
|
||||
color = style.color || color
|
||||
// 图标节点
|
||||
const iconNode = SVG(icon || btnsSvg.quickCreateChild).size(
|
||||
expandBtnSize,
|
||||
expandBtnSize
|
||||
)
|
||||
iconNode.css({
|
||||
cursor: 'pointer'
|
||||
})
|
||||
iconNode.x(0).y(-expandBtnSize / 2)
|
||||
this.style.iconNode(iconNode, color)
|
||||
// 填充节点
|
||||
const fillNode = new Circle().size(expandBtnSize)
|
||||
fillNode.x(0).y(-expandBtnSize / 2)
|
||||
fillNode.fill({ color: fill }).css({
|
||||
cursor: 'pointer'
|
||||
})
|
||||
// 容器节点
|
||||
this._quickCreateChildBtn = new G()
|
||||
this._quickCreateChildBtn.add(fillNode).add(iconNode)
|
||||
this._quickCreateChildBtn.on('click', e => {
|
||||
e.stopPropagation()
|
||||
this.mindMap.emit('quick_create_btn_click', this)
|
||||
const { customQuickCreateChildBtnClick } = this.mindMap.opt
|
||||
if (typeof customQuickCreateChildBtnClick === 'function') {
|
||||
customQuickCreateChildBtnClick(this)
|
||||
return
|
||||
}
|
||||
this.mindMap.execCommand('INSERT_CHILD_NODE', true, [this])
|
||||
})
|
||||
this._quickCreateChildBtn.on('dblclick', e => {
|
||||
e.stopPropagation()
|
||||
})
|
||||
this._quickCreateChildBtn.addClass('smm-quick-create-child-btn')
|
||||
this.group.add(this._quickCreateChildBtn)
|
||||
}
|
||||
this._showQuickCreateChildBtn = true
|
||||
// 更新按钮
|
||||
this.renderer.layout.renderExpandBtn(this, this._quickCreateChildBtn)
|
||||
}
|
||||
|
||||
// 移除按钮
|
||||
function removeQuickCreateChildBtn() {
|
||||
if (this.isGeneralization) return
|
||||
if (this._quickCreateChildBtn && this._showQuickCreateChildBtn) {
|
||||
this._quickCreateChildBtn.remove()
|
||||
this._showQuickCreateChildBtn = false
|
||||
}
|
||||
}
|
||||
|
||||
// 隐藏按钮
|
||||
function hideQuickCreateChildBtn() {
|
||||
if (this.isGeneralization) return
|
||||
const { isActive } = this.getData()
|
||||
if (!isActive) {
|
||||
this.removeQuickCreateChildBtn()
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
initQuickCreateChildBtn,
|
||||
showQuickCreateChildBtn,
|
||||
removeQuickCreateChildBtn,
|
||||
hideQuickCreateChildBtn
|
||||
}
|
||||
@@ -0,0 +1,448 @@
|
||||
import { CONSTANTS } from '../../constants/constant'
|
||||
|
||||
// 视图操作类
|
||||
class View {
|
||||
// 构造函数
|
||||
constructor(opt = {}) {
|
||||
this.opt = opt
|
||||
this.mindMap = this.opt.mindMap
|
||||
this.scale = 1
|
||||
this.sx = 0
|
||||
this.sy = 0
|
||||
this.x = 0
|
||||
this.y = 0
|
||||
this.firstDrag = true
|
||||
this.setTransformData(this.mindMap.opt.viewData)
|
||||
this.bind()
|
||||
}
|
||||
|
||||
// 绑定
|
||||
bind() {
|
||||
// 快捷键
|
||||
this.mindMap.keyCommand.addShortcut('Control+=', () => {
|
||||
this.enlarge()
|
||||
})
|
||||
this.mindMap.keyCommand.addShortcut('Control+-', () => {
|
||||
this.narrow()
|
||||
})
|
||||
this.mindMap.keyCommand.addShortcut('Control+i', () => {
|
||||
this.fit()
|
||||
})
|
||||
// 拖动视图
|
||||
this.mindMap.event.on('mousedown', e => {
|
||||
const { isDisableDrag, mousedownEventPreventDefault } = this.mindMap.opt
|
||||
if (isDisableDrag) return
|
||||
if (mousedownEventPreventDefault) {
|
||||
e.preventDefault()
|
||||
}
|
||||
this.sx = this.x
|
||||
this.sy = this.y
|
||||
})
|
||||
this.mindMap.event.on('drag', (e, event) => {
|
||||
// 按住ctrl键拖动为多选
|
||||
// 禁用拖拽
|
||||
if (e.ctrlKey || e.metaKey || this.mindMap.opt.isDisableDrag) {
|
||||
return
|
||||
}
|
||||
if (this.firstDrag) {
|
||||
this.firstDrag = false
|
||||
// 清除激活节点
|
||||
if (this.mindMap.renderer.activeNodeList.length > 0) {
|
||||
this.mindMap.execCommand('CLEAR_ACTIVE_NODE')
|
||||
}
|
||||
}
|
||||
this.x = this.sx + event.mousemoveOffset.x
|
||||
this.y = this.sy + event.mousemoveOffset.y
|
||||
this.transform()
|
||||
})
|
||||
this.mindMap.event.on('mouseup', () => {
|
||||
this.firstDrag = true
|
||||
})
|
||||
// 放大缩小视图
|
||||
this.mindMap.event.on('mousewheel', (e, dirs, event, isTouchPad) => {
|
||||
const {
|
||||
customHandleMousewheel,
|
||||
mousewheelAction,
|
||||
mouseScaleCenterUseMousePosition,
|
||||
mousewheelMoveStep,
|
||||
mousewheelZoomActionReverse,
|
||||
disableMouseWheelZoom,
|
||||
translateRatio
|
||||
} = this.mindMap.opt
|
||||
// 是否自定义鼠标滚轮事件
|
||||
if (
|
||||
customHandleMousewheel &&
|
||||
typeof customHandleMousewheel === 'function'
|
||||
) {
|
||||
return customHandleMousewheel(e)
|
||||
}
|
||||
// 1.鼠标滚轮事件控制缩放
|
||||
if (
|
||||
mousewheelAction === CONSTANTS.MOUSE_WHEEL_ACTION.ZOOM ||
|
||||
e.ctrlKey ||
|
||||
e.metaKey
|
||||
) {
|
||||
if (disableMouseWheelZoom) return
|
||||
const { x: clientX, y: clientY } = this.mindMap.toPos(
|
||||
e.clientX,
|
||||
e.clientY
|
||||
)
|
||||
const cx = mouseScaleCenterUseMousePosition ? clientX : undefined
|
||||
const cy = mouseScaleCenterUseMousePosition ? clientY : undefined
|
||||
// 如果来自触控板，那么过滤掉左右的移动
|
||||
if (
|
||||
isTouchPad &&
|
||||
(dirs.includes(CONSTANTS.DIR.LEFT) ||
|
||||
dirs.includes(CONSTANTS.DIR.RIGHT))
|
||||
) {
|
||||
dirs = dirs.filter(dir => {
|
||||
return ![CONSTANTS.DIR.LEFT, CONSTANTS.DIR.RIGHT].includes(dir)
|
||||
})
|
||||
}
|
||||
switch (true) {
|
||||
// 鼠标滚轮，向上和向左，都是缩小
|
||||
case dirs.includes(CONSTANTS.DIR.UP || CONSTANTS.DIR.LEFT):
|
||||
mousewheelZoomActionReverse
|
||||
? this.enlarge(cx, cy, isTouchPad)
|
||||
: this.narrow(cx, cy, isTouchPad)
|
||||
break
|
||||
// 鼠标滚轮，向下和向右，都是放大
|
||||
case dirs.includes(CONSTANTS.DIR.DOWN || CONSTANTS.DIR.RIGHT):
|
||||
mousewheelZoomActionReverse
|
||||
? this.narrow(cx, cy, isTouchPad)
|
||||
: this.enlarge(cx, cy, isTouchPad)
|
||||
break
|
||||
}
|
||||
} else {
|
||||
// 2.鼠标滚轮事件控制画布移动
|
||||
let stepX = 0
|
||||
let stepY = 0
|
||||
if (isTouchPad) {
|
||||
// 如果是触控板，那么直接使用触控板滑动距离
|
||||
stepX = Math.abs(e.wheelDeltaX)
|
||||
stepY = Math.abs(e.wheelDeltaY)
|
||||
} else {
|
||||
stepX = stepY = mousewheelMoveStep
|
||||
}
|
||||
let mx = 0
|
||||
let my = 0
|
||||
// 上移
|
||||
if (dirs.includes(CONSTANTS.DIR.DOWN)) {
|
||||
my = -stepY
|
||||
}
|
||||
// 下移
|
||||
if (dirs.includes(CONSTANTS.DIR.UP)) {
|
||||
my = stepY
|
||||
}
|
||||
// 右移
|
||||
if (dirs.includes(CONSTANTS.DIR.LEFT)) {
|
||||
mx = stepX
|
||||
}
|
||||
// 左移
|
||||
if (dirs.includes(CONSTANTS.DIR.RIGHT)) {
|
||||
mx = -stepX
|
||||
}
|
||||
this.translateXY(mx * translateRatio, my * translateRatio)
|
||||
}
|
||||
})
|
||||
this.mindMap.on('resize', () => {
|
||||
if (!this.checkNeedMindMapInCanvas()) return
|
||||
this.transform()
|
||||
})
|
||||
}
|
||||
|
||||
// 获取当前变换状态数据
|
||||
getTransformData() {
|
||||
return {
|
||||
transform: this.mindMap.draw.transform(),
|
||||
state: {
|
||||
scale: this.scale,
|
||||
x: this.x,
|
||||
y: this.y,
|
||||
sx: this.sx,
|
||||
sy: this.sy
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 动态设置变换状态数据
|
||||
setTransformData(viewData) {
|
||||
if (viewData) {
|
||||
Object.keys(viewData.state).forEach(prop => {
|
||||
this[prop] = viewData.state[prop]
|
||||
})
|
||||
this.mindMap.draw.transform({
|
||||
...viewData.transform
|
||||
})
|
||||
this.mindMap.emit('view_data_change', this.getTransformData())
|
||||
this.emitEvent('scale')
|
||||
this.emitEvent('translate')
|
||||
}
|
||||
}
|
||||
|
||||
// 平移x,y方向
|
||||
translateXY(x, y) {
|
||||
if (x === 0 && y === 0) return
|
||||
this.x += x
|
||||
this.y += y
|
||||
this.transform()
|
||||
this.emitEvent('translate')
|
||||
}
|
||||
|
||||
// 平移x方向
|
||||
translateX(step) {
|
||||
if (step === 0) return
|
||||
this.x += step
|
||||
this.transform()
|
||||
this.emitEvent('translate')
|
||||
}
|
||||
|
||||
// 平移x方式到
|
||||
translateXTo(x) {
|
||||
this.x = x
|
||||
this.transform()
|
||||
this.emitEvent('translate')
|
||||
}
|
||||
|
||||
// 平移y方向
|
||||
translateY(step) {
|
||||
if (step === 0) return
|
||||
this.y += step
|
||||
this.transform()
|
||||
this.emitEvent('translate')
|
||||
}
|
||||
|
||||
// 平移y方向到
|
||||
translateYTo(y) {
|
||||
this.y = y
|
||||
this.transform()
|
||||
this.emitEvent('translate')
|
||||
}
|
||||
|
||||
// 应用变换
|
||||
transform() {
|
||||
try {
|
||||
this.limitMindMapInCanvas()
|
||||
} catch (error) {}
|
||||
this.mindMap.draw.transform({
|
||||
origin: [0, 0],
|
||||
scale: this.scale,
|
||||
translate: [this.x, this.y]
|
||||
})
|
||||
this.mindMap.emit('view_data_change', this.getTransformData())
|
||||
}
|
||||
|
||||
// 恢复
|
||||
reset() {
|
||||
const scaleChange = this.scale !== 1
|
||||
const translateChange = this.x !== 0 || this.y !== 0
|
||||
this.scale = 1
|
||||
this.x = 0
|
||||
this.y = 0
|
||||
this.transform()
|
||||
if (scaleChange) {
|
||||
this.emitEvent('scale')
|
||||
}
|
||||
if (translateChange) {
|
||||
this.emitEvent('translate')
|
||||
}
|
||||
}
|
||||
|
||||
// 缩小
|
||||
narrow(cx, cy, isTouchPad) {
|
||||
let { scaleRatio, minZoomRatio } = this.mindMap.opt
|
||||
scaleRatio = scaleRatio / (isTouchPad ? 5 : 1)
|
||||
const scale = Math.max(this.scale - scaleRatio, minZoomRatio / 100)
|
||||
this.scaleInCenter(scale, cx, cy)
|
||||
this.transform()
|
||||
this.emitEvent('scale')
|
||||
}
|
||||
|
||||
// 放大
|
||||
enlarge(cx, cy, isTouchPad) {
|
||||
let { scaleRatio, maxZoomRatio } = this.mindMap.opt
|
||||
scaleRatio = scaleRatio / (isTouchPad ? 5 : 1)
|
||||
let scale = 0
|
||||
if (maxZoomRatio === -1) {
|
||||
scale = this.scale + scaleRatio
|
||||
} else {
|
||||
scale = Math.min(this.scale + scaleRatio, maxZoomRatio / 100)
|
||||
}
|
||||
this.scaleInCenter(scale, cx, cy)
|
||||
this.transform()
|
||||
this.emitEvent('scale')
|
||||
}
|
||||
|
||||
// 基于指定中心进行缩放，cx，cy 可不指定，此时会使用画布中心点
|
||||
scaleInCenter(scale, cx, cy) {
|
||||
if (cx === undefined || cy === undefined) {
|
||||
cx = this.mindMap.width / 2
|
||||
cy = this.mindMap.height / 2
|
||||
}
|
||||
const prevScale = this.scale
|
||||
const ratio = 1 - scale / prevScale
|
||||
const dx = (cx - this.x) * ratio
|
||||
const dy = (cy - this.y) * ratio
|
||||
this.x += dx
|
||||
this.y += dy
|
||||
this.scale = scale
|
||||
}
|
||||
|
||||
// 设置缩放
|
||||
setScale(scale, cx, cy) {
|
||||
if (cx !== undefined && cy !== undefined) {
|
||||
this.scaleInCenter(scale, cx, cy)
|
||||
} else {
|
||||
this.scale = scale
|
||||
}
|
||||
this.transform()
|
||||
this.emitEvent('scale')
|
||||
}
|
||||
|
||||
// 适应画布大小
|
||||
fit(getRbox = () => {}, enlarge = false, fitPadding) {
|
||||
fitPadding =
|
||||
fitPadding === undefined ? this.mindMap.opt.fitPadding : fitPadding
|
||||
const draw = this.mindMap.draw
|
||||
const origTransform = draw.transform()
|
||||
const rect = getRbox() || draw.rbox()
|
||||
const drawWidth = rect.width / origTransform.scaleX
|
||||
const drawHeight = rect.height / origTransform.scaleY
|
||||
const drawRatio = drawWidth / drawHeight
|
||||
let { width: elWidth, height: elHeight } = this.mindMap.elRect
|
||||
elWidth = elWidth - fitPadding * 2
|
||||
elHeight = elHeight - fitPadding * 2
|
||||
const elRatio = elWidth / elHeight
|
||||
let newScale = 0
|
||||
let flag = ''
|
||||
if (drawWidth <= elWidth && drawHeight <= elHeight && !enlarge) {
|
||||
newScale = 1
|
||||
flag = 1
|
||||
} else {
|
||||
let newWidth = 0
|
||||
let newHeight = 0
|
||||
if (drawRatio > elRatio) {
|
||||
newWidth = elWidth
|
||||
newHeight = elWidth / drawRatio
|
||||
flag = 2
|
||||
} else {
|
||||
newHeight = elHeight
|
||||
newWidth = elHeight * drawRatio
|
||||
flag = 3
|
||||
}
|
||||
newScale = newWidth / drawWidth
|
||||
}
|
||||
this.setScale(newScale)
|
||||
const newRect = getRbox() || draw.rbox()
|
||||
// 需要考虑画布容器距浏览器窗口左上角的距离
|
||||
newRect.x -= this.mindMap.elRect.left
|
||||
newRect.y -= this.mindMap.elRect.top
|
||||
let newX = 0
|
||||
let newY = 0
|
||||
if (flag === 1) {
|
||||
newX = -newRect.x + fitPadding + (elWidth - newRect.width) / 2
|
||||
newY = -newRect.y + fitPadding + (elHeight - newRect.height) / 2
|
||||
} else if (flag === 2) {
|
||||
newX = -newRect.x + fitPadding
|
||||
newY = -newRect.y + fitPadding + (elHeight - newRect.height) / 2
|
||||
} else if (flag === 3) {
|
||||
newX = -newRect.x + fitPadding + (elWidth - newRect.width) / 2
|
||||
newY = -newRect.y + fitPadding
|
||||
}
|
||||
this.translateXY(newX, newY)
|
||||
}
|
||||
|
||||
// 判断是否需要将思维导图限制在画布内
|
||||
checkNeedMindMapInCanvas() {
|
||||
// 如果当前在演示模式，那么不需要限制
|
||||
if (this.mindMap.demonstrate && this.mindMap.demonstrate.isInDemonstrate) {
|
||||
return false
|
||||
}
|
||||
const { isLimitMindMapInCanvasWhenHasScrollbar, isLimitMindMapInCanvas } =
|
||||
this.mindMap.opt
|
||||
// 如果注册了滚动条插件，那么使用isLimitMindMapInCanvasWhenHasScrollbar配置
|
||||
if (this.mindMap.scrollbar) {
|
||||
return isLimitMindMapInCanvasWhenHasScrollbar
|
||||
} else {
|
||||
// 否则使用isLimitMindMapInCanvas配置
|
||||
return isLimitMindMapInCanvas
|
||||
}
|
||||
}
|
||||
|
||||
// 将思维导图限制在画布内
|
||||
limitMindMapInCanvas() {
|
||||
if (!this.checkNeedMindMapInCanvas()) return
|
||||
|
||||
let { scale, left, top, right, bottom } = this.getPositionLimit()
|
||||
|
||||
// 画布宽高改变了，但是思维导图元素变换的中心点依旧是原有位置，所以需要加上中心点变化量
|
||||
const centerXChange =
|
||||
((this.mindMap.width - this.mindMap.initWidth) / 2) * scale
|
||||
const centerYChange =
|
||||
((this.mindMap.height - this.mindMap.initHeight) / 2) * scale
|
||||
|
||||
// 如果缩放值改变了
|
||||
const scaleRatio = this.scale / scale
|
||||
left *= scaleRatio
|
||||
right *= scaleRatio
|
||||
top *= scaleRatio
|
||||
bottom *= scaleRatio
|
||||
|
||||
// 加上画布中心点距离
|
||||
const centerX = this.mindMap.width / 2
|
||||
const centerY = this.mindMap.height / 2
|
||||
const scaleOffset = this.scale - 1
|
||||
left -= scaleOffset * centerX - centerXChange
|
||||
right -= scaleOffset * centerX - centerXChange
|
||||
top -= scaleOffset * centerY - centerYChange
|
||||
bottom -= scaleOffset * centerY - centerYChange
|
||||
|
||||
// 判断是否超出边界
|
||||
if (this.x > left) {
|
||||
this.x = left
|
||||
}
|
||||
if (this.x < right) {
|
||||
this.x = right
|
||||
}
|
||||
if (this.y > top) {
|
||||
this.y = top
|
||||
}
|
||||
if (this.y < bottom) {
|
||||
this.y = bottom
|
||||
}
|
||||
}
|
||||
|
||||
// 计算图形四个方向的位置边界值
|
||||
getPositionLimit() {
|
||||
const { scaleX, scaleY } = this.mindMap.draw.transform()
|
||||
const drawRect = this.mindMap.draw.rbox()
|
||||
const rootRect = this.mindMap.renderer.root.group.rbox()
|
||||
const rootCenterOffset = this.mindMap.renderer.layout.getRootCenterOffset(
|
||||
rootRect.width,
|
||||
rootRect.height
|
||||
)
|
||||
const left = rootRect.x - drawRect.x - rootCenterOffset.x * scaleX
|
||||
const right = rootRect.x - drawRect.x2 - rootCenterOffset.x * scaleX
|
||||
const top = rootRect.y - drawRect.y - rootCenterOffset.y * scaleY
|
||||
const bottom = rootRect.y - drawRect.y2 - rootCenterOffset.y * scaleY
|
||||
return {
|
||||
scale: scaleX,
|
||||
left,
|
||||
right,
|
||||
top,
|
||||
bottom
|
||||
}
|
||||
}
|
||||
|
||||
// 派发事件
|
||||
emitEvent(type) {
|
||||
switch (type) {
|
||||
case 'scale':
|
||||
this.mindMap.emit('scale', this.scale)
|
||||
case 'translate':
|
||||
this.mindMap.emit('translate', this.x, this.y)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default View
|
||||
@@ -0,0 +1,682 @@
|
||||
import MindMapNode from '../core/render/node/MindMapNode'
|
||||
import { CONSTANTS, initRootNodePositionMap } from '../constants/constant'
|
||||
import Lru from '../utils/Lru'
|
||||
import { createUid } from '../utils/index'
|
||||
|
||||
// 布局基类
|
||||
class Base {
|
||||
// 构造函数
|
||||
constructor(renderer) {
|
||||
// 渲染实例
|
||||
this.renderer = renderer
|
||||
// 控制实例
|
||||
this.mindMap = renderer.mindMap
|
||||
// 绘图对象
|
||||
this.draw = this.mindMap.draw
|
||||
this.lineDraw = this.mindMap.lineDraw
|
||||
// 根节点
|
||||
this.root = null
|
||||
this.lru = new Lru(this.mindMap.opt.maxNodeCacheCount)
|
||||
// 当initRootNodePosition不为默认的值时，根节点的位置距默认的配置时根节点距离的差值
|
||||
this.rootNodeCenterOffset = null
|
||||
}
|
||||
|
||||
// 计算节点位置
|
||||
doLayout() {
|
||||
throw new Error('【computed】方法为必要方法，需要子类进行重写！')
|
||||
}
|
||||
|
||||
// 连线
|
||||
renderLine() {
|
||||
throw new Error('【renderLine】方法为必要方法，需要子类进行重写！')
|
||||
}
|
||||
|
||||
// 定位展开收缩按钮
|
||||
renderExpandBtn() {
|
||||
throw new Error('【renderExpandBtn】方法为必要方法，需要子类进行重写！')
|
||||
}
|
||||
|
||||
// 概要节点
|
||||
renderGeneralization() {}
|
||||
|
||||
// 通过uid缓存节点
|
||||
cacheNode(uid, node) {
|
||||
// 记录本次渲染时的节点
|
||||
this.renderer.nodeCache[uid] = node
|
||||
// 缓存所有渲染过的节点
|
||||
this.lru.add(uid, node)
|
||||
}
|
||||
|
||||
// 检查当前来源是否需要重新计算节点大小
|
||||
checkIsNeedResizeSources() {
|
||||
return this.renderer.checkHasRenderSource(CONSTANTS.CHANGE_THEME)
|
||||
}
|
||||
|
||||
// 层级类型改变
|
||||
checkIsLayerTypeChange(oldIndex, newIndex) {
|
||||
if (oldIndex >= 2 && newIndex >= 2) return false
|
||||
if (oldIndex >= 2 && newIndex < 2) return true
|
||||
if (oldIndex < 2 && newIndex >= 2) return true
|
||||
}
|
||||
|
||||
// 检查是否是结构布局改变重新渲染展开收起按钮占位元素
|
||||
checkIsLayoutChangeRerenderExpandBtnPlaceholderRect(node) {
|
||||
if (this.renderer.checkHasRenderSource(CONSTANTS.CHANGE_LAYOUT)) {
|
||||
node.needRerenderExpandBtnPlaceholderRect = true
|
||||
}
|
||||
}
|
||||
|
||||
// 节点节点数据是否发生了改变
|
||||
checkIsNodeDataChange(lastData, curData) {
|
||||
if (lastData) {
|
||||
// 对比忽略激活状态和展开收起状态
|
||||
lastData = typeof lastData === 'string' ? JSON.parse(lastData) : lastData
|
||||
lastData.isActive = curData.isActive
|
||||
lastData.expand = curData.expand
|
||||
lastData = JSON.stringify(lastData)
|
||||
} else {
|
||||
// 只在都有数据时才进行对比
|
||||
return false
|
||||
}
|
||||
return lastData !== JSON.stringify(curData)
|
||||
}
|
||||
|
||||
// 检查库前置或后置内容是否改变了
|
||||
checkNodeFixChange(newNode, nodeInnerPrefixData, nodeInnerPostfixData) {
|
||||
// 库前置内容是否改变了
|
||||
let isNodeInnerPrefixChange = false
|
||||
this.mindMap.nodeInnerPrefixList.forEach(item => {
|
||||
if (item.updateNodeData) {
|
||||
const isChange = item.updateNodeData(newNode, nodeInnerPrefixData)
|
||||
if (isChange) {
|
||||
isNodeInnerPrefixChange = isChange
|
||||
}
|
||||
}
|
||||
})
|
||||
// 库后置内容是否改变了
|
||||
let isNodeInnerPostfixChange = false
|
||||
this.mindMap.nodeInnerPostfixList.forEach(item => {
|
||||
if (item.updateNodeData) {
|
||||
const isChange = item.updateNodeData(newNode, nodeInnerPostfixData)
|
||||
if (isChange) {
|
||||
isNodeInnerPostfixChange = isChange
|
||||
}
|
||||
}
|
||||
})
|
||||
return isNodeInnerPrefixChange || isNodeInnerPostfixChange
|
||||
}
|
||||
|
||||
// 创建节点实例
|
||||
createNode(data, parent, isRoot, layerIndex, index, ancestors) {
|
||||
// 创建节点
|
||||
// 库前置内容数据
|
||||
const nodeInnerPrefixData = {}
|
||||
this.mindMap.nodeInnerPrefixList.forEach(item => {
|
||||
if (item.createNodeData) {
|
||||
const [key, value] = item.createNodeData({
|
||||
data,
|
||||
parent,
|
||||
ancestors,
|
||||
layerIndex,
|
||||
index
|
||||
})
|
||||
nodeInnerPrefixData[key] = value
|
||||
}
|
||||
})
|
||||
// 库后置内容数据
|
||||
const nodeInnerPostfixData = {}
|
||||
this.mindMap.nodeInnerPostfixList.forEach(item => {
|
||||
if (item.createNodeData) {
|
||||
const [key, value] = item.createNodeData({
|
||||
data,
|
||||
parent,
|
||||
ancestors,
|
||||
layerIndex,
|
||||
index
|
||||
})
|
||||
nodeInnerPostfixData[key] = value
|
||||
}
|
||||
})
|
||||
const uid = data.data.uid
|
||||
let newNode = null
|
||||
// 数据上保存了节点引用，那么直接复用节点
|
||||
if (data && data._node && !this.renderer.reRender) {
|
||||
newNode = data._node
|
||||
// 节点层级改变了
|
||||
const isLayerTypeChange = this.checkIsLayerTypeChange(
|
||||
newNode.layerIndex,
|
||||
layerIndex
|
||||
)
|
||||
newNode.reset()
|
||||
newNode.layerIndex = layerIndex
|
||||
if (isRoot) {
|
||||
newNode.isRoot = true
|
||||
} else {
|
||||
newNode.parent = parent._node
|
||||
}
|
||||
this.cacheNode(data._node.uid, newNode)
|
||||
this.checkIsLayoutChangeRerenderExpandBtnPlaceholderRect(newNode)
|
||||
// 库前置或后置内容是否改变了
|
||||
const isNodeInnerFixChange = this.checkNodeFixChange(
|
||||
newNode,
|
||||
nodeInnerPrefixData,
|
||||
nodeInnerPostfixData
|
||||
)
|
||||
// 主题或主题配置改变了
|
||||
const isResizeSource = this.checkIsNeedResizeSources()
|
||||
// 节点数据改变了
|
||||
const isNodeDataChange = this.checkIsNodeDataChange(
|
||||
data._node.nodeDataSnapshot,
|
||||
data.data
|
||||
)
|
||||
// 重新计算节点大小和布局
|
||||
if (
|
||||
isResizeSource ||
|
||||
isNodeDataChange ||
|
||||
isLayerTypeChange ||
|
||||
(newNode.getData('resetRichText') && // 自定义节点内容可以直接忽略resetRichText
|
||||
!newNode.isUseCustomNodeContent()) ||
|
||||
newNode.getData('needUpdate') ||
|
||||
isNodeInnerFixChange
|
||||
) {
|
||||
newNode.getSize()
|
||||
newNode.needLayout = true
|
||||
}
|
||||
this.checkGetGeneralizationChange(newNode, isResizeSource)
|
||||
} else if (
|
||||
(this.lru.has(uid) || this.renderer.lastNodeCache[uid]) &&
|
||||
!this.renderer.reRender
|
||||
) {
|
||||
// 节点数据上没有节点实例
|
||||
// 但是通过uid在节点缓存池中找到了缓存的节点
|
||||
// 或者在上一次渲染缓存对象中找到了节点
|
||||
// 也可以直接复用
|
||||
newNode = this.lru.get(uid) || this.renderer.lastNodeCache[uid]
|
||||
// 保存该节点上一次的数据
|
||||
const lastData = JSON.stringify(newNode.getData())
|
||||
// 节点层级改变了
|
||||
const isLayerTypeChange = this.checkIsLayerTypeChange(
|
||||
newNode.layerIndex,
|
||||
layerIndex
|
||||
)
|
||||
newNode.reset()
|
||||
newNode.nodeData = newNode.handleData(data || {})
|
||||
newNode.layerIndex = layerIndex
|
||||
if (isRoot) {
|
||||
newNode.isRoot = true
|
||||
} else {
|
||||
newNode.parent = parent._node
|
||||
}
|
||||
this.cacheNode(uid, newNode)
|
||||
this.checkIsLayoutChangeRerenderExpandBtnPlaceholderRect(newNode)
|
||||
data._node = newNode
|
||||
// 主题或主题配置改变了需要重新计算节点大小和布局
|
||||
const isResizeSource = this.checkIsNeedResizeSources()
|
||||
// 点数据改变了
|
||||
const isNodeDataChange = this.checkIsNodeDataChange(lastData, data.data)
|
||||
// 库前置或后置内容是否改变了
|
||||
const isNodeInnerFixChange = this.checkNodeFixChange(
|
||||
newNode,
|
||||
nodeInnerPrefixData,
|
||||
nodeInnerPostfixData
|
||||
)
|
||||
// 重新计算节点大小和布局
|
||||
if (
|
||||
isResizeSource ||
|
||||
isNodeDataChange ||
|
||||
isLayerTypeChange ||
|
||||
(newNode.getData('resetRichText') &&
|
||||
!newNode.isUseCustomNodeContent()) ||
|
||||
newNode.getData('needUpdate') ||
|
||||
isNodeInnerFixChange
|
||||
) {
|
||||
newNode.getSize()
|
||||
newNode.needLayout = true
|
||||
}
|
||||
this.checkGetGeneralizationChange(newNode, isResizeSource)
|
||||
} else {
|
||||
// 创建新节点
|
||||
const newUid = uid || createUid()
|
||||
newNode = new MindMapNode({
|
||||
data,
|
||||
uid: newUid,
|
||||
renderer: this.renderer,
|
||||
mindMap: this.mindMap,
|
||||
draw: this.draw,
|
||||
layerIndex,
|
||||
isRoot,
|
||||
parent: !isRoot ? parent._node : null,
|
||||
...nodeInnerPrefixData
|
||||
})
|
||||
// uid保存到数据上，为了节点复用
|
||||
data.data.uid = newUid
|
||||
this.cacheNode(newUid, newNode)
|
||||
// 数据关联实际节点
|
||||
data._node = newNode
|
||||
}
|
||||
// 如果该节点数据是已激活状态，那么添加到激活节点列表里
|
||||
if (data.data.isActive) {
|
||||
this.renderer.addNodeToActiveList(newNode)
|
||||
}
|
||||
// 如果当前节点在激活节点列表里，那么添加上激活的状态
|
||||
if (this.mindMap.renderer.findActiveNodeIndex(newNode) !== -1) {
|
||||
newNode.setData({
|
||||
isActive: true
|
||||
})
|
||||
}
|
||||
// 根节点
|
||||
if (isRoot) {
|
||||
this.root = newNode
|
||||
} else {
|
||||
// 互相收集
|
||||
parent._node.addChildren(newNode)
|
||||
}
|
||||
return newNode
|
||||
}
|
||||
|
||||
// 检查概要节点是否需要更新
|
||||
checkGetGeneralizationChange(node, isResizeSource) {
|
||||
const generalizationList = node.getData('generalization')
|
||||
if (
|
||||
generalizationList &&
|
||||
node._generalizationList &&
|
||||
node._generalizationList.length > 0
|
||||
) {
|
||||
node._generalizationList.forEach((item, index) => {
|
||||
const gNode = item.generalizationNode
|
||||
const oldData = gNode.getData()
|
||||
const newData = generalizationList[index]
|
||||
if (
|
||||
isResizeSource ||
|
||||
(newData && JSON.stringify(oldData) !== JSON.stringify(newData))
|
||||
) {
|
||||
if (newData) {
|
||||
gNode.nodeData.data = newData
|
||||
}
|
||||
gNode.getSize()
|
||||
gNode.needLayout = true
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 格式化节点位置
|
||||
formatPosition(value, size, nodeSize) {
|
||||
if (typeof value === 'number') {
|
||||
return value
|
||||
} else if (initRootNodePositionMap[value] !== undefined) {
|
||||
return size * initRootNodePositionMap[value]
|
||||
} else if (/^\d\d*%$/.test(value)) {
|
||||
return (Number.parseFloat(value) / 100) * size
|
||||
} else {
|
||||
return (size - nodeSize) / 2
|
||||
}
|
||||
}
|
||||
|
||||
// 规范initRootNodePosition配置
|
||||
formatInitRootNodePosition(pos) {
|
||||
const { CENTER } = CONSTANTS.INIT_ROOT_NODE_POSITION
|
||||
if (!pos || !Array.isArray(pos) || pos.length < 2) {
|
||||
pos = [CENTER, CENTER]
|
||||
}
|
||||
return pos
|
||||
}
|
||||
|
||||
// 定位节点到画布中间
|
||||
setNodeCenter(node, position) {
|
||||
let { initRootNodePosition } = this.mindMap.opt
|
||||
initRootNodePosition = this.formatInitRootNodePosition(
|
||||
position || initRootNodePosition
|
||||
)
|
||||
node.left = this.formatPosition(
|
||||
initRootNodePosition[0],
|
||||
this.mindMap.width,
|
||||
node.width
|
||||
)
|
||||
node.top = this.formatPosition(
|
||||
initRootNodePosition[1],
|
||||
this.mindMap.height,
|
||||
node.height
|
||||
)
|
||||
}
|
||||
|
||||
// 当initRootNodePosition配置不为默认的['center','center']时，计算当前配置和默认配置情况下，根节点位置的差值
|
||||
getRootCenterOffset(width, height) {
|
||||
// 因为根节点的大小不会影响这个差值，所以计算一次就足够了
|
||||
if (this.rootNodeCenterOffset) return this.rootNodeCenterOffset
|
||||
let { initRootNodePosition } = this.mindMap.opt
|
||||
const { CENTER } = CONSTANTS.INIT_ROOT_NODE_POSITION
|
||||
initRootNodePosition = this.formatInitRootNodePosition(initRootNodePosition)
|
||||
if (
|
||||
initRootNodePosition[0] === CENTER &&
|
||||
initRootNodePosition[1] === CENTER
|
||||
) {
|
||||
// 如果initRootNodePosition是默认的，那么不需要计算
|
||||
this.rootNodeCenterOffset = {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
} else {
|
||||
// 否则需要计算当前配置和默认配置的差值
|
||||
const tmpNode = {
|
||||
width: width,
|
||||
height: height
|
||||
}
|
||||
const tmpNode2 = {
|
||||
width: width,
|
||||
height: height
|
||||
}
|
||||
this.setNodeCenter(tmpNode, [CENTER, CENTER])
|
||||
this.setNodeCenter(tmpNode2)
|
||||
this.rootNodeCenterOffset = {
|
||||
x: tmpNode2.left - tmpNode.left,
|
||||
y: tmpNode2.top - tmpNode.top
|
||||
}
|
||||
}
|
||||
return this.rootNodeCenterOffset
|
||||
}
|
||||
|
||||
// 更新子节点属性
|
||||
updateChildren(children, prop, offset) {
|
||||
children.forEach(item => {
|
||||
item[prop] += offset
|
||||
if (item.children && item.children.length && !item.hasCustomPosition()) {
|
||||
// 适配自定义位置
|
||||
this.updateChildren(item.children, prop, offset)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 更新子节点多个属性
|
||||
updateChildrenPro(children, props) {
|
||||
children.forEach(item => {
|
||||
Object.keys(props).forEach(prop => {
|
||||
item[prop] += props[prop]
|
||||
})
|
||||
if (item.children && item.children.length && !item.hasCustomPosition()) {
|
||||
// 适配自定义位置
|
||||
this.updateChildrenPro(item.children, props)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 递归计算节点的宽度
|
||||
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 => {
|
||||
loop(item, width)
|
||||
})
|
||||
} else {
|
||||
width += node.width
|
||||
widthArr.push(width)
|
||||
}
|
||||
}
|
||||
loop(node, 0)
|
||||
return Math.max(...widthArr) + totalGeneralizationNodeWidth
|
||||
}
|
||||
|
||||
// 二次贝塞尔曲线
|
||||
quadraticCurvePath(x1, y1, x2, y2, v = false) {
|
||||
let cx, cy
|
||||
if (v) {
|
||||
cx = x1 + (x2 - x1) * 0.8
|
||||
cy = y1 + (y2 - y1) * 0.2
|
||||
} else {
|
||||
cx = x1 + (x2 - x1) * 0.2
|
||||
cy = y1 + (y2 - y1) * 0.8
|
||||
}
|
||||
return `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
|
||||
}
|
||||
|
||||
// 三次贝塞尔曲线
|
||||
cubicBezierPath(x1, y1, x2, y2, v = false) {
|
||||
let cx1, cy1, cx2, cy2
|
||||
if (v) {
|
||||
cx1 = x1
|
||||
cy1 = y1 + (y2 - y1) / 2
|
||||
cx2 = x2
|
||||
cy2 = cy1
|
||||
} else {
|
||||
cx1 = x1 + (x2 - x1) / 2
|
||||
cy1 = y1
|
||||
cx2 = cx1
|
||||
cy2 = y2
|
||||
}
|
||||
return `M ${x1},${y1} C ${cx1},${cy1} ${cx2},${cy2} ${x2},${y2}`
|
||||
}
|
||||
|
||||
// 根据a,b两个点的位置，计算去除圆角大小后的新的b点
|
||||
computeNewPoint(a, b, radius = 0) {
|
||||
// x坐标相同
|
||||
if (a[0] === b[0]) {
|
||||
// b在a下方
|
||||
if (b[1] > a[1]) {
|
||||
return [b[0], b[1] - radius]
|
||||
} else {
|
||||
// b在a上方
|
||||
return [b[0], b[1] + radius]
|
||||
}
|
||||
} else if (a[1] === b[1]) {
|
||||
// y坐标相同
|
||||
// b在a右边
|
||||
if (b[0] > a[0]) {
|
||||
return [b[0] - radius, b[1]]
|
||||
} else {
|
||||
return [b[0] + radius, b[1]]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 创建一段折线路径
|
||||
// 最后一个拐角支持圆角
|
||||
createFoldLine(list) {
|
||||
const { lineRadius } = this.mindMap.themeConfig
|
||||
const len = list.length
|
||||
let path = ''
|
||||
let radiusPath = ''
|
||||
if (len >= 3 && lineRadius > 0) {
|
||||
const start = list[len - 3]
|
||||
const center = list[len - 2]
|
||||
const end = list[len - 1]
|
||||
// 如果三点在一条直线，那么不用处理
|
||||
const isOneLine =
|
||||
(start[0].toFixed(0) === center[0].toFixed(0) &&
|
||||
center[0].toFixed(0) === end[0].toFixed(0)) ||
|
||||
(start[1].toFixed(0) === center[1].toFixed(0) &&
|
||||
center[1].toFixed(0) === end[1].toFixed(0))
|
||||
if (!isOneLine) {
|
||||
const cStart = this.computeNewPoint(start, center, lineRadius)
|
||||
const cEnd = this.computeNewPoint(end, center, lineRadius)
|
||||
radiusPath = `Q ${center[0]},${center[1]} ${cEnd[0]},${cEnd[1]}`
|
||||
list.splice(len - 2, 1, cStart, radiusPath)
|
||||
}
|
||||
}
|
||||
list.forEach((item, index) => {
|
||||
if (typeof item === 'string') {
|
||||
path += item
|
||||
} else {
|
||||
const [x, y] = item
|
||||
if (index === 0) {
|
||||
path += `M ${x},${y}`
|
||||
} else {
|
||||
path += `L ${x},${y}`
|
||||
}
|
||||
}
|
||||
})
|
||||
return path
|
||||
}
|
||||
|
||||
// 获取节点的marginX
|
||||
getMarginX(layerIndex) {
|
||||
const { themeConfig, opt } = this.mindMap
|
||||
const { second, node } = themeConfig
|
||||
const hoverRectPadding = opt.hoverRectPadding * 2
|
||||
return layerIndex === 1
|
||||
? second.marginX + hoverRectPadding
|
||||
: node.marginX + hoverRectPadding
|
||||
}
|
||||
|
||||
// 获取节点的marginY
|
||||
getMarginY(layerIndex) {
|
||||
const { themeConfig, opt } = this.mindMap
|
||||
const { second, node } = themeConfig
|
||||
const hoverRectPadding = opt.hoverRectPadding * 2
|
||||
return layerIndex === 1
|
||||
? second.marginY + hoverRectPadding
|
||||
: node.marginY + hoverRectPadding
|
||||
}
|
||||
|
||||
// 获取节点包括概要在内的宽度
|
||||
getNodeWidthWithGeneralization(node) {
|
||||
return Math.max(
|
||||
node.width,
|
||||
node.checkHasGeneralization() ? node._generalizationNodeWidth : 0
|
||||
)
|
||||
}
|
||||
|
||||
// 获取节点包括概要在内的高度
|
||||
getNodeHeightWithGeneralization(node) {
|
||||
return Math.max(
|
||||
node.height,
|
||||
node.checkHasGeneralization() ? node._generalizationNodeHeight : 0
|
||||
)
|
||||
}
|
||||
|
||||
// 获取节点的边界值
|
||||
/**
|
||||
* dir：生长方向，h（水平）、v（垂直）
|
||||
* isLeft：是否向左生长
|
||||
*/
|
||||
getNodeBoundaries(node, dir) {
|
||||
let { generalizationLineMargin, generalizationNodeMargin } =
|
||||
this.mindMap.themeConfig
|
||||
let walk = root => {
|
||||
let _left = Infinity
|
||||
let _right = -Infinity
|
||||
let _top = Infinity
|
||||
let _bottom = -Infinity
|
||||
if (root.children && root.children.length > 0) {
|
||||
root.children.forEach(child => {
|
||||
let { left, right, top, bottom } = walk(child)
|
||||
// 概要内容的宽度
|
||||
let generalizationWidth =
|
||||
child.checkHasGeneralization() && child.getData('expand')
|
||||
? child._generalizationNodeWidth + generalizationNodeMargin
|
||||
: 0
|
||||
// 概要内容的高度
|
||||
let generalizationHeight =
|
||||
child.checkHasGeneralization() && child.getData('expand')
|
||||
? child._generalizationNodeHeight + generalizationNodeMargin
|
||||
: 0
|
||||
if (left - (dir === 'h' ? generalizationWidth : 0) < _left) {
|
||||
_left = left - (dir === 'h' ? generalizationWidth : 0)
|
||||
}
|
||||
if (right + (dir === 'h' ? generalizationWidth : 0) > _right) {
|
||||
_right = right + (dir === 'h' ? generalizationWidth : 0)
|
||||
}
|
||||
if (top < _top) {
|
||||
_top = top
|
||||
}
|
||||
if (bottom + (dir === 'v' ? generalizationHeight : 0) > _bottom) {
|
||||
_bottom = bottom + (dir === 'v' ? generalizationHeight : 0)
|
||||
}
|
||||
})
|
||||
}
|
||||
let cur = {
|
||||
left: root.left,
|
||||
right: root.left + root.width,
|
||||
top: root.top,
|
||||
bottom: root.top + root.height
|
||||
}
|
||||
return {
|
||||
left: cur.left < _left ? cur.left : _left,
|
||||
right: cur.right > _right ? cur.right : _right,
|
||||
top: cur.top < _top ? cur.top : _top,
|
||||
bottom: cur.bottom > _bottom ? cur.bottom : _bottom
|
||||
}
|
||||
}
|
||||
let { left, right, top, bottom } = walk(node)
|
||||
return {
|
||||
left,
|
||||
right,
|
||||
top,
|
||||
bottom,
|
||||
generalizationLineMargin,
|
||||
generalizationNodeMargin
|
||||
}
|
||||
}
|
||||
|
||||
// 获取指定索引区间的子节点的边界范围
|
||||
getChildrenBoundaries(node, dir, startIndex = 0, endIndex) {
|
||||
let { generalizationLineMargin, generalizationNodeMargin } =
|
||||
this.mindMap.themeConfig
|
||||
const children = node.children.slice(startIndex, endIndex + 1)
|
||||
let left = Infinity
|
||||
let right = -Infinity
|
||||
let top = Infinity
|
||||
let bottom = -Infinity
|
||||
children.forEach(item => {
|
||||
const cur = this.getNodeBoundaries(item, dir)
|
||||
left = cur.left < left ? cur.left : left
|
||||
right = cur.right > right ? cur.right : right
|
||||
top = cur.top < top ? cur.top : top
|
||||
bottom = cur.bottom > bottom ? cur.bottom : bottom
|
||||
})
|
||||
return {
|
||||
left,
|
||||
right,
|
||||
top,
|
||||
bottom,
|
||||
generalizationLineMargin,
|
||||
generalizationNodeMargin
|
||||
}
|
||||
}
|
||||
|
||||
// 获取节点概要的渲染边界
|
||||
getNodeGeneralizationRenderBoundaries(item, dir) {
|
||||
let res = null
|
||||
// 区间
|
||||
if (item.range) {
|
||||
res = this.getChildrenBoundaries(
|
||||
item.node,
|
||||
dir,
|
||||
item.range[0],
|
||||
item.range[1]
|
||||
)
|
||||
} else {
|
||||
// 整体概要
|
||||
res = this.getNodeBoundaries(item.node, dir)
|
||||
}
|
||||
return res
|
||||
}
|
||||
|
||||
// 获取节点实际存在几个子节点
|
||||
getNodeActChildrenLength(node) {
|
||||
return node.nodeData.children && node.nodeData.children.length
|
||||
}
|
||||
|
||||
// 设置连线样式
|
||||
setLineStyle(style, line, path, childNode) {
|
||||
line.plot(this.transformPath(path))
|
||||
style && style(line, childNode, true)
|
||||
}
|
||||
|
||||
// 转换路径，可以转换成特殊风格的线条样式
|
||||
transformPath(path) {
|
||||
const { customTransformNodeLinePath } = this.mindMap.opt
|
||||
if (customTransformNodeLinePath) {
|
||||
return customTransformNodeLinePath(path)
|
||||
} else {
|
||||
return path
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default Base
|
||||
@@ -0,0 +1,368 @@
|
||||
import Base from './Base'
|
||||
import { walk, asyncRun, getNodeIndexInNodeList } from '../utils'
|
||||
|
||||
// 目录组织图
|
||||
class CatalogOrganization extends Base {
|
||||
// 构造函数
|
||||
constructor(opt = {}) {
|
||||
super(opt)
|
||||
}
|
||||
|
||||
// 布局
|
||||
doLayout(callback) {
|
||||
let task = [
|
||||
() => {
|
||||
this.computedBaseValue()
|
||||
},
|
||||
() => {
|
||||
this.computedLeftTopValue()
|
||||
},
|
||||
() => {
|
||||
this.adjustLeftTopValue()
|
||||
},
|
||||
() => {
|
||||
callback(this.root)
|
||||
}
|
||||
]
|
||||
asyncRun(task)
|
||||
}
|
||||
|
||||
// 遍历数据计算节点的left、width、height
|
||||
computedBaseValue() {
|
||||
walk(
|
||||
this.renderer.renderTree,
|
||||
null,
|
||||
(cur, parent, isRoot, layerIndex, index, ancestors) => {
|
||||
let newNode = this.createNode(cur, parent, isRoot, layerIndex, index, ancestors)
|
||||
// 根节点定位在画布中心位置
|
||||
if (isRoot) {
|
||||
this.setNodeCenter(newNode)
|
||||
} else {
|
||||
// 非根节点
|
||||
if (parent._node.isRoot) {
|
||||
newNode.top =
|
||||
parent._node.top +
|
||||
parent._node.height +
|
||||
this.getMarginX(layerIndex)
|
||||
}
|
||||
}
|
||||
if (!cur.data.expand) {
|
||||
return true
|
||||
}
|
||||
},
|
||||
(cur, parent, isRoot, layerIndex) => {
|
||||
if (isRoot) {
|
||||
let len = cur.data.expand === false ? 0 : cur._node.children.length
|
||||
cur._node.childrenAreaWidth = len
|
||||
? cur._node.children.reduce((h, item) => {
|
||||
return h + item.width
|
||||
}, 0) +
|
||||
(len + 1) * this.getMarginX(layerIndex + 1)
|
||||
: 0
|
||||
}
|
||||
},
|
||||
true,
|
||||
0
|
||||
)
|
||||
}
|
||||
|
||||
// 遍历节点树计算节点的left、top
|
||||
computedLeftTopValue() {
|
||||
walk(
|
||||
this.root,
|
||||
null,
|
||||
(node, parent, isRoot, layerIndex) => {
|
||||
if (node.getData('expand') && node.children && node.children.length) {
|
||||
let marginX = this.getMarginX(layerIndex + 1)
|
||||
let marginY = this.getMarginY(layerIndex + 1)
|
||||
if (isRoot) {
|
||||
let left = node.left + node.width / 2 - node.childrenAreaWidth / 2
|
||||
let totalLeft = left + marginX
|
||||
node.children.forEach(cur => {
|
||||
cur.left = totalLeft
|
||||
totalLeft += cur.width + marginX
|
||||
})
|
||||
} else {
|
||||
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 +=
|
||||
this.getNodeHeightWithGeneralization(cur) +
|
||||
marginY +
|
||||
(this.getNodeActChildrenLength(cur) > 0 ? cur.expandBtnSize : 0)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
null,
|
||||
true
|
||||
)
|
||||
}
|
||||
|
||||
// 调整节点left、top
|
||||
adjustLeftTopValue() {
|
||||
walk(
|
||||
this.root,
|
||||
null,
|
||||
(node, parent, isRoot, layerIndex) => {
|
||||
if (!node.getData('expand')) {
|
||||
return
|
||||
}
|
||||
// 调整left
|
||||
if (parent && parent.isRoot) {
|
||||
let areaWidth = this.getNodeAreaWidth(node, true)
|
||||
let difference = areaWidth - node.width
|
||||
if (difference > 0) {
|
||||
this.updateBrothersLeft(node, difference)
|
||||
}
|
||||
}
|
||||
// 调整top
|
||||
let len = node.children.length
|
||||
if (parent && !parent.isRoot && len > 0) {
|
||||
let marginY = this.getMarginY(layerIndex + 1)
|
||||
let totalHeight =
|
||||
node.children.reduce((h, item) => {
|
||||
return (
|
||||
h +
|
||||
this.getNodeHeightWithGeneralization(item) +
|
||||
(this.getNodeActChildrenLength(item) > 0
|
||||
? item.expandBtnSize
|
||||
: 0)
|
||||
)
|
||||
}, 0) +
|
||||
len * marginY
|
||||
this.updateBrothersTop(node, totalHeight)
|
||||
}
|
||||
},
|
||||
(node, parent, isRoot) => {
|
||||
if (isRoot) {
|
||||
let { right, left } = this.getNodeBoundaries(node, 'h')
|
||||
let childrenWidth = right - left
|
||||
let offset = node.left - left - (childrenWidth - node.width) / 2
|
||||
this.updateChildren(node.children, 'left', offset)
|
||||
}
|
||||
},
|
||||
true
|
||||
)
|
||||
}
|
||||
|
||||
// 调整兄弟节点的left
|
||||
updateBrothersLeft(node, addWidth) {
|
||||
if (node.parent) {
|
||||
let childrenList = node.parent.children
|
||||
let index = getNodeIndexInNodeList(node, childrenList)
|
||||
childrenList.forEach((item, _index) => {
|
||||
if (item.hasCustomPosition() || _index <= index) {
|
||||
// 适配自定义位置
|
||||
return
|
||||
}
|
||||
item.left += addWidth
|
||||
// 同步更新子节点的位置
|
||||
if (item.children && item.children.length) {
|
||||
this.updateChildren(item.children, 'left', addWidth)
|
||||
}
|
||||
})
|
||||
// 更新父节点的位置
|
||||
this.updateBrothersLeft(node.parent, addWidth)
|
||||
}
|
||||
}
|
||||
|
||||
// 调整兄弟节点的top
|
||||
updateBrothersTop(node, addHeight) {
|
||||
if (node.parent && !node.parent.isRoot) {
|
||||
let childrenList = node.parent.children
|
||||
let index = getNodeIndexInNodeList(node, childrenList)
|
||||
childrenList.forEach((item, _index) => {
|
||||
if (item.hasCustomPosition()) {
|
||||
// 适配自定义位置
|
||||
return
|
||||
}
|
||||
let _offset = 0
|
||||
// 下面的节点往下移
|
||||
if (_index > index) {
|
||||
_offset = addHeight
|
||||
}
|
||||
item.top += _offset
|
||||
// 同步更新子节点的位置
|
||||
if (item.children && item.children.length) {
|
||||
this.updateChildren(item.children, 'top', _offset)
|
||||
}
|
||||
})
|
||||
// 更新父节点的位置
|
||||
this.updateBrothersTop(node.parent, addHeight)
|
||||
}
|
||||
}
|
||||
|
||||
// 绘制连线，连接该节点到其子节点
|
||||
renderLine(node, lines, style) {
|
||||
if (node.children.length <= 0) {
|
||||
return []
|
||||
}
|
||||
let { left, top, width, height, expandBtnSize } = node
|
||||
const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
|
||||
if (!alwaysShowExpandBtn || notShowExpandBtn) {
|
||||
expandBtnSize = 0
|
||||
}
|
||||
let len = node.children.length
|
||||
let marginX = this.getMarginX(node.layerIndex + 1)
|
||||
if (node.isRoot) {
|
||||
// 根节点
|
||||
let x1 = left + width / 2
|
||||
let y1 = top + height
|
||||
let s1 = marginX * 0.7
|
||||
let minx = Infinity
|
||||
let maxx = -Infinity
|
||||
node.children.forEach((item, index) => {
|
||||
let x2 = item.left + item.width / 2
|
||||
let y2 = item.top
|
||||
if (x2 < minx) {
|
||||
minx = x2
|
||||
}
|
||||
if (x2 > maxx) {
|
||||
maxx = x2
|
||||
}
|
||||
// 节点使用横线风格，需要额外渲染横线
|
||||
let nodeUseLineStylePath = this.mindMap.themeConfig.nodeUseLineStyle
|
||||
? ` L ${item.left},${y2} L ${item.left + item.width},${y2}`
|
||||
: ''
|
||||
let path =
|
||||
`M ${x2},${y1 + s1} L ${x2},${y1 + s1 > y2 ? y2 + item.height : y2}` +
|
||||
nodeUseLineStylePath
|
||||
// 竖线
|
||||
this.setLineStyle(style, lines[index], path, item)
|
||||
})
|
||||
minx = Math.min(minx, x1)
|
||||
maxx = Math.max(maxx, x1)
|
||||
// 父节点的竖线
|
||||
let line1 = this.lineDraw.path()
|
||||
node.style.line(line1)
|
||||
line1.plot(this.transformPath(`M ${x1},${y1} L ${x1},${y1 + s1}`))
|
||||
node._lines.push(line1)
|
||||
style && style(line1, node)
|
||||
// 水平线
|
||||
if (len > 0) {
|
||||
let lin2 = this.lineDraw.path()
|
||||
node.style.line(lin2)
|
||||
lin2.plot(this.transformPath(`M ${minx},${y1 + s1} L ${maxx},${y1 + s1}`))
|
||||
node._lines.push(lin2)
|
||||
style && style(lin2, node)
|
||||
}
|
||||
} else {
|
||||
// 非根节点
|
||||
let y1 = top + height
|
||||
let maxy = -Infinity
|
||||
let x2 = node.left + node.width * 0.3
|
||||
node.children.forEach((item, index) => {
|
||||
// 为了适配自定义位置，下面做了各种位置的兼容
|
||||
let y2 = item.top + item.height / 2
|
||||
if (y2 > maxy) {
|
||||
maxy = y2
|
||||
}
|
||||
// 水平线
|
||||
let path = ''
|
||||
let _left = item.left
|
||||
let _isLeft = item.left + item.width < x2
|
||||
let _isXCenter = false
|
||||
if (_isLeft) {
|
||||
// 水平位置在父节点左边
|
||||
_left = item.left + item.width
|
||||
} else if (item.left < x2 && item.left + item.width > x2) {
|
||||
// 水平位置在父节点之间
|
||||
_isXCenter = true
|
||||
y2 = item.top
|
||||
maxy = y2
|
||||
}
|
||||
if (y2 > top && y2 < y1) {
|
||||
// 自定义位置的情况：垂直位置节点在父节点之间
|
||||
path = `M ${
|
||||
_isLeft ? node.left : node.left + node.width
|
||||
},${y2} L ${_left},${y2}`
|
||||
} else if (y2 < y1) {
|
||||
// 自定义位置的情况：垂直位置节点在父节点上面
|
||||
if (_isXCenter) {
|
||||
y2 = item.top + item.height
|
||||
_left = x2
|
||||
}
|
||||
path = `M ${x2},${top} L ${x2},${y2} L ${_left},${y2}`
|
||||
} else {
|
||||
if (_isXCenter) {
|
||||
_left = x2
|
||||
}
|
||||
path = `M ${x2},${y2} L ${_left},${y2}`
|
||||
}
|
||||
// 节点使用横线风格，需要额外渲染横线
|
||||
let nodeUseLineStylePath = this.mindMap.themeConfig.nodeUseLineStyle
|
||||
? ` L ${_left},${y2 - item.height / 2} L ${_left},${
|
||||
y2 + item.height / 2
|
||||
}`
|
||||
: ''
|
||||
path += nodeUseLineStylePath
|
||||
this.setLineStyle(style, lines[index], path, item)
|
||||
})
|
||||
// 竖线
|
||||
if (len > 0) {
|
||||
let lin2 = this.lineDraw.path()
|
||||
expandBtnSize = len > 0 ? expandBtnSize : 0
|
||||
node.style.line(lin2)
|
||||
if (maxy < y1 + expandBtnSize) {
|
||||
lin2.hide()
|
||||
} else {
|
||||
lin2.plot(
|
||||
this.transformPath(`M ${x2},${y1 + expandBtnSize} L ${x2},${maxy}`)
|
||||
)
|
||||
lin2.show()
|
||||
}
|
||||
node._lines.push(lin2)
|
||||
style && style(lin2, node)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 渲染按钮
|
||||
renderExpandBtn(node, btn) {
|
||||
let { width, height, expandBtnSize, isRoot } = node
|
||||
if (!isRoot) {
|
||||
let { translateX, translateY } = btn.transform()
|
||||
btn.translate(
|
||||
width * 0.3 - expandBtnSize / 2 - translateX,
|
||||
height + expandBtnSize / 2 - translateY
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// 创建概要节点
|
||||
renderGeneralization(list) {
|
||||
list.forEach(item => {
|
||||
let {
|
||||
top,
|
||||
bottom,
|
||||
right,
|
||||
generalizationLineMargin,
|
||||
generalizationNodeMargin
|
||||
} = this.getNodeGeneralizationRenderBoundaries(item, 'h')
|
||||
let x1 = right + generalizationLineMargin
|
||||
let y1 = top
|
||||
let x2 = right + generalizationLineMargin
|
||||
let y2 = bottom
|
||||
let cx = x1 + 20
|
||||
let cy = y1 + (y2 - y1) / 2
|
||||
let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
|
||||
item.generalizationLine.plot(this.transformPath(path))
|
||||
item.generalizationNode.left = right + generalizationNodeMargin
|
||||
item.generalizationNode.top =
|
||||
top + (bottom - top - item.generalizationNode.height) / 2
|
||||
})
|
||||
}
|
||||
|
||||
// 渲染展开收起按钮的隐藏占位元素
|
||||
renderExpandBtnRect(rect, expandBtnSize, width, height, node) {
|
||||
rect.size(width, expandBtnSize).x(0).y(height)
|
||||
}
|
||||
}
|
||||
|
||||
export default CatalogOrganization
|
||||
@@ -0,0 +1,567 @@
|
||||
import Base from './Base'
|
||||
import { walk, asyncRun, degToRad, getNodeIndexInNodeList } from '../utils'
|
||||
import { CONSTANTS } from '../constants/constant'
|
||||
import utils from './fishboneUtils'
|
||||
import { SVG } from '@svgdotjs/svg.js'
|
||||
import { shapeStyleProps } from '../core/render/node/Style'
|
||||
|
||||
// 鱼骨图
|
||||
class Fishbone extends Base {
|
||||
// 构造函数
|
||||
constructor(opt = {}, layout) {
|
||||
super(opt)
|
||||
this.layout = layout
|
||||
this.indent = 0.3
|
||||
this.childIndent = 0.5
|
||||
this.fishTail = null
|
||||
this.maxx = 0
|
||||
this.headRatio = 1
|
||||
this.tailRatio = 0.6
|
||||
this.paddingXRatio = 0.3
|
||||
this.fishHeadPathStr =
|
||||
'M4,181 C4,181, 0,177, 4,173 Q 96.09523809523809,0, 288.2857142857143,0 L 288.2857142857143,354 Q 48.047619047619044,354, 8,218.18367346938777 C8,218.18367346938777, 6,214.18367346938777, 8,214.18367346938777 L 41.183673469387756,214.18367346938777 Z'
|
||||
this.fishTailPathStr =
|
||||
'M 606.9342905223708 0 Q 713.1342905223709 -177 819.3342905223708 -177 L 766.2342905223709 0 L 819.3342905223708 177 Q 713.1342905223709 177 606.9342905223708 0 z'
|
||||
this.bindEvent()
|
||||
this.extendShape()
|
||||
this.beforeChange = this.beforeChange.bind(this)
|
||||
}
|
||||
|
||||
// 重新渲染时，节点连线是否全部删除
|
||||
// 鱼尾鱼骨图会多渲染一些连线，按需删除无法删除掉，只能全部删除重新创建
|
||||
nodeIsRemoveAllLines(node) {
|
||||
return node.isRoot || node.layerIndex === 1
|
||||
}
|
||||
|
||||
// 是否是带鱼头鱼尾的鱼骨图
|
||||
isFishbone2() {
|
||||
return this.layout === CONSTANTS.LAYOUT.FISHBONE2
|
||||
}
|
||||
|
||||
bindEvent() {
|
||||
if (!this.isFishbone2()) return
|
||||
this.onCheckUpdateFishTail = this.onCheckUpdateFishTail.bind(this)
|
||||
this.mindMap.on('afterExecCommand', this.onCheckUpdateFishTail)
|
||||
}
|
||||
|
||||
unBindEvent() {
|
||||
this.mindMap.off('afterExecCommand', this.onCheckUpdateFishTail)
|
||||
}
|
||||
|
||||
// 扩展节点形状
|
||||
extendShape() {
|
||||
if (!this.isFishbone2()) return
|
||||
// 扩展鱼头形状
|
||||
this.mindMap.addShape({
|
||||
name: 'fishHead',
|
||||
createShape: node => {
|
||||
const rect = SVG(`<path d="${this.fishHeadPathStr}"></path>`)
|
||||
const { width, height } = node.shapeInstance.getNodeSize()
|
||||
rect.size(width, height)
|
||||
return rect
|
||||
},
|
||||
getPadding: ({ width, height, paddingX, paddingY }) => {
|
||||
width += paddingX * 2
|
||||
height += paddingY * 2
|
||||
let shapePaddingX = this.paddingXRatio * width
|
||||
let shapePaddingY = 0
|
||||
width += shapePaddingX * 2
|
||||
const newHeight = width / this.headRatio
|
||||
shapePaddingY = (newHeight - height) / 2
|
||||
return {
|
||||
paddingX: shapePaddingX,
|
||||
paddingY: shapePaddingY
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 布局
|
||||
doLayout(callback) {
|
||||
let task = [
|
||||
() => {
|
||||
this.computedBaseValue()
|
||||
this.addFishTail()
|
||||
},
|
||||
() => {
|
||||
this.computedLeftTopValue()
|
||||
},
|
||||
() => {
|
||||
this.adjustLeftTopValue()
|
||||
this.updateFishTailPosition()
|
||||
},
|
||||
() => {
|
||||
callback(this.root)
|
||||
}
|
||||
]
|
||||
asyncRun(task)
|
||||
}
|
||||
|
||||
// 创建鱼尾
|
||||
addFishTail() {
|
||||
if (!this.isFishbone2()) return
|
||||
const exist = this.mindMap.lineDraw.findOne('.smm-layout-fishbone-tail')
|
||||
if (!exist) {
|
||||
this.fishTail = SVG(`<path d="${this.fishTailPathStr}"></path>`)
|
||||
this.fishTail.addClass('smm-layout-fishbone-tail')
|
||||
} else {
|
||||
this.fishTail = exist
|
||||
}
|
||||
const tailHeight = this.root.height
|
||||
const tailWidth = tailHeight * this.tailRatio
|
||||
this.fishTail.size(tailWidth, tailHeight)
|
||||
this.styleFishTail()
|
||||
this.mindMap.lineDraw.add(this.fishTail)
|
||||
}
|
||||
|
||||
// 如果根节点更新了形状样式，那么鱼尾也要更新
|
||||
onCheckUpdateFishTail(name, node, data) {
|
||||
if (name === 'SET_NODE_DATA') {
|
||||
let hasShapeProp = false
|
||||
Object.keys(data).forEach(key => {
|
||||
if (shapeStyleProps.includes(key)) {
|
||||
hasShapeProp = true
|
||||
}
|
||||
})
|
||||
if (hasShapeProp) {
|
||||
this.styleFishTail()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
styleFishTail() {
|
||||
this.root.style.shape(this.fishTail)
|
||||
}
|
||||
|
||||
// 删除鱼尾
|
||||
removeFishTail() {
|
||||
const exist = this.mindMap.lineDraw.findOne('.smm-layout-fishbone-tail')
|
||||
if (exist) {
|
||||
exist.remove()
|
||||
}
|
||||
}
|
||||
|
||||
// 更新鱼尾形状位置
|
||||
updateFishTailPosition() {
|
||||
if (!this.isFishbone2()) return
|
||||
this.fishTail.x(this.maxx).cy(this.root.top + this.root.height / 2)
|
||||
}
|
||||
|
||||
// 遍历数据创建节点、计算根节点的位置，计算根节点的子节点的top值
|
||||
computedBaseValue() {
|
||||
walk(
|
||||
this.renderer.renderTree,
|
||||
null,
|
||||
(node, parent, isRoot, layerIndex, index, ancestors) => {
|
||||
if (isRoot && this.isFishbone2()) {
|
||||
// 将根节点形状强制修改为鱼头
|
||||
node.data.shape = 'fishHead'
|
||||
}
|
||||
// 创建节点
|
||||
let newNode = this.createNode(
|
||||
node,
|
||||
parent,
|
||||
isRoot,
|
||||
layerIndex,
|
||||
index,
|
||||
ancestors
|
||||
)
|
||||
// 根节点定位在画布中心位置
|
||||
if (isRoot) {
|
||||
this.setNodeCenter(newNode)
|
||||
} else {
|
||||
// 非根节点
|
||||
// 三级及以下节点以上级方向为准
|
||||
if (parent._node.dir) {
|
||||
newNode.dir = parent._node.dir
|
||||
} else {
|
||||
// 节点生长方向
|
||||
newNode.dir =
|
||||
index % 2 === 0
|
||||
? CONSTANTS.LAYOUT_GROW_DIR.TOP
|
||||
: CONSTANTS.LAYOUT_GROW_DIR.BOTTOM
|
||||
}
|
||||
// 计算二级节点的top值
|
||||
if (parent._node.isRoot) {
|
||||
let marginY = this.getMarginY(layerIndex)
|
||||
// 带鱼头鱼尾的鱼骨图因为根节点高度比较大，所以二级节点需要向中间靠一点
|
||||
const topOffset = this.isFishbone2() ? parent._node.height / 4 : 0
|
||||
if (this.checkIsTop(newNode)) {
|
||||
newNode.top =
|
||||
parent._node.top - newNode.height - marginY + topOffset
|
||||
} else {
|
||||
newNode.top =
|
||||
parent._node.top + parent._node.height + marginY - topOffset
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!node.data.expand) {
|
||||
return true
|
||||
}
|
||||
},
|
||||
null,
|
||||
true,
|
||||
0
|
||||
)
|
||||
}
|
||||
|
||||
// 遍历节点树计算节点的left、top
|
||||
computedLeftTopValue() {
|
||||
walk(
|
||||
this.root,
|
||||
null,
|
||||
(node, parent, isRoot, layerIndex) => {
|
||||
if (node.isRoot) {
|
||||
let marginX = this.getMarginX(layerIndex + 1)
|
||||
const heightOffsetRatio = this.isFishbone2() ? 2 : 1
|
||||
let topTotalLeft =
|
||||
node.left + node.width + node.height / heightOffsetRatio + marginX
|
||||
let bottomTotalLeft =
|
||||
node.left + node.width + node.height / heightOffsetRatio + marginX
|
||||
node.children.forEach(item => {
|
||||
if (this.checkIsTop(item)) {
|
||||
item.left = topTotalLeft
|
||||
topTotalLeft += item.width + marginX
|
||||
} else {
|
||||
item.left = bottomTotalLeft + 20
|
||||
bottomTotalLeft += item.width + marginX
|
||||
}
|
||||
})
|
||||
}
|
||||
let params = { layerIndex, node, ctx: this }
|
||||
if (this.checkIsTop(node)) {
|
||||
utils.top.computedLeftTopValue(params)
|
||||
} else {
|
||||
utils.bottom.computedLeftTopValue(params)
|
||||
}
|
||||
},
|
||||
null,
|
||||
true
|
||||
)
|
||||
}
|
||||
|
||||
// 调整节点left、top
|
||||
adjustLeftTopValue() {
|
||||
walk(
|
||||
this.root,
|
||||
null,
|
||||
(node, parent, isRoot, layerIndex) => {
|
||||
if (!node.getData('expand')) {
|
||||
return
|
||||
}
|
||||
let params = { node, parent, layerIndex, ctx: this }
|
||||
if (this.checkIsTop(node)) {
|
||||
utils.top.adjustLeftTopValueBefore(params)
|
||||
} else {
|
||||
utils.bottom.adjustLeftTopValueBefore(params)
|
||||
}
|
||||
},
|
||||
(node, parent) => {
|
||||
let params = { parent, node, ctx: this }
|
||||
if (this.checkIsTop(node)) {
|
||||
utils.top.adjustLeftTopValueAfter(params)
|
||||
} else {
|
||||
utils.bottom.adjustLeftTopValueAfter(params)
|
||||
}
|
||||
// 调整二级节点的子节点的left值
|
||||
if (node.isRoot) {
|
||||
let topTotalLeft = 0
|
||||
let bottomTotalLeft = 0
|
||||
let maxx = -Infinity
|
||||
node.children.forEach(item => {
|
||||
if (this.checkIsTop(item)) {
|
||||
item.left += topTotalLeft
|
||||
this.updateChildren(item.children, 'left', topTotalLeft)
|
||||
let { left, right } = this.getNodeBoundaries(item, 'h')
|
||||
if (right > maxx) {
|
||||
maxx = right
|
||||
}
|
||||
topTotalLeft += right - left
|
||||
} else {
|
||||
item.left += bottomTotalLeft
|
||||
this.updateChildren(item.children, 'left', bottomTotalLeft)
|
||||
let { left, right } = this.getNodeBoundaries(item, 'h')
|
||||
if (right > maxx) {
|
||||
maxx = right
|
||||
}
|
||||
bottomTotalLeft += right - left
|
||||
}
|
||||
})
|
||||
this.maxx = maxx
|
||||
}
|
||||
},
|
||||
true
|
||||
)
|
||||
}
|
||||
|
||||
// 递归计算节点的宽度
|
||||
getNodeAreaHeight(node) {
|
||||
let totalHeight = 0
|
||||
let loop = node => {
|
||||
let marginY = this.getMarginY(node.layerIndex)
|
||||
totalHeight +=
|
||||
node.height +
|
||||
(this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) +
|
||||
marginY
|
||||
if (node.children.length) {
|
||||
node.children.forEach(item => {
|
||||
loop(item)
|
||||
})
|
||||
}
|
||||
}
|
||||
loop(node)
|
||||
return totalHeight
|
||||
}
|
||||
|
||||
// 调整兄弟节点的left
|
||||
updateBrothersLeft(node) {
|
||||
let childrenList = node.children
|
||||
let totalAddWidth = 0
|
||||
childrenList.forEach(item => {
|
||||
item.left += totalAddWidth
|
||||
if (item.children && item.children.length) {
|
||||
this.updateChildren(item.children, 'left', totalAddWidth)
|
||||
}
|
||||
let { left, right } = this.getNodeBoundaries(item, 'h')
|
||||
let areaWidth = right - left
|
||||
let difference = areaWidth - item.width
|
||||
if (difference > 0) {
|
||||
totalAddWidth += difference
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 调整兄弟节点的top
|
||||
updateBrothersTop(node, addHeight) {
|
||||
if (node.parent && !node.parent.isRoot) {
|
||||
let childrenList = node.parent.children
|
||||
let index = getNodeIndexInNodeList(node, childrenList)
|
||||
childrenList.forEach((item, _index) => {
|
||||
if (item.hasCustomPosition()) {
|
||||
// 适配自定义位置
|
||||
return
|
||||
}
|
||||
let _offset = 0
|
||||
// 下面的节点往下移
|
||||
if (_index > index) {
|
||||
_offset = addHeight
|
||||
}
|
||||
item.top += _offset
|
||||
// 同步更新子节点的位置
|
||||
if (item.children && item.children.length) {
|
||||
this.updateChildren(item.children, 'top', _offset)
|
||||
}
|
||||
})
|
||||
// 更新父节点的位置
|
||||
if (this.checkIsTop(node)) {
|
||||
this.updateBrothersTop(node.parent, addHeight)
|
||||
} else {
|
||||
this.updateBrothersTop(
|
||||
node.parent,
|
||||
node.layerIndex === 3 ? 0 : addHeight
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 检查节点是否是上方节点
|
||||
checkIsTop(node) {
|
||||
return node.dir === CONSTANTS.LAYOUT_GROW_DIR.TOP
|
||||
}
|
||||
|
||||
// 绘制连线，连接该节点到其子节点
|
||||
renderLine(node, lines, style) {
|
||||
if (node.layerIndex !== 1 && node.children.length <= 0) {
|
||||
return []
|
||||
}
|
||||
let { top, height, expandBtnSize } = node
|
||||
const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
|
||||
if (!alwaysShowExpandBtn || notShowExpandBtn) {
|
||||
expandBtnSize = 0
|
||||
}
|
||||
let len = node.children.length
|
||||
if (node.isRoot) {
|
||||
// 当前节点是根节点
|
||||
// 根节点的子节点是和根节点同一水平线排列
|
||||
let maxx = -Infinity
|
||||
node.children.forEach(item => {
|
||||
if (item.left > maxx) {
|
||||
maxx = item.left
|
||||
}
|
||||
// 水平线段到二级节点的连线
|
||||
let marginY = this.getMarginY(item.layerIndex)
|
||||
let nodeLineX = item.left
|
||||
let offset =
|
||||
node.height / 2 + marginY - (this.isFishbone2() ? node.height / 4 : 0)
|
||||
let offsetX = offset / Math.tan(degToRad(this.mindMap.opt.fishboneDeg))
|
||||
let line = this.lineDraw.path()
|
||||
if (this.checkIsTop(item)) {
|
||||
line.plot(
|
||||
this.transformPath(
|
||||
`M ${nodeLineX - offsetX},${item.top + item.height + offset} L ${
|
||||
item.left
|
||||
},${item.top + item.height}`
|
||||
)
|
||||
)
|
||||
} else {
|
||||
line.plot(
|
||||
this.transformPath(
|
||||
`M ${nodeLineX - offsetX},${item.top - offset} L ${nodeLineX},${
|
||||
item.top
|
||||
}`
|
||||
)
|
||||
)
|
||||
}
|
||||
node.style.line(line)
|
||||
node._lines.push(line)
|
||||
style && style(line, node)
|
||||
})
|
||||
// 从根节点出发的水平线
|
||||
let nodeHalfTop = node.top + node.height / 2
|
||||
let offset = node.height / 2 + this.getMarginY(node.layerIndex + 1)
|
||||
let line = this.lineDraw.path()
|
||||
const lineEndX = this.isFishbone2()
|
||||
? this.maxx
|
||||
: maxx - offset / Math.tan(degToRad(this.mindMap.opt.fishboneDeg))
|
||||
line.plot(
|
||||
this.transformPath(
|
||||
`M ${
|
||||
node.left + node.width
|
||||
},${nodeHalfTop} L ${lineEndX},${nodeHalfTop}`
|
||||
)
|
||||
)
|
||||
node.style.line(line)
|
||||
node._lines.push(line)
|
||||
style && style(line, node)
|
||||
} else {
|
||||
// 当前节点为非根节点
|
||||
let maxy = -Infinity
|
||||
let miny = Infinity
|
||||
let maxx = -Infinity
|
||||
let x = node.left + node.width * this.indent
|
||||
node.children.forEach((item, index) => {
|
||||
if (item.left > maxx) {
|
||||
maxx = item.left
|
||||
}
|
||||
let y = item.top + item.height / 2
|
||||
if (y > maxy) {
|
||||
maxy = y
|
||||
}
|
||||
if (y < miny) {
|
||||
miny = y
|
||||
}
|
||||
// 水平线
|
||||
if (node.layerIndex > 1) {
|
||||
let path = `M ${x},${y} L ${item.left},${y}`
|
||||
this.setLineStyle(style, lines[index], path, item)
|
||||
}
|
||||
})
|
||||
// 斜线
|
||||
if (len >= 0) {
|
||||
let line = this.lineDraw.path()
|
||||
expandBtnSize = len > 0 ? expandBtnSize : 0
|
||||
let lineLength = maxx - node.left - node.width * this.indent
|
||||
lineLength = Math.max(lineLength, 0)
|
||||
let params = {
|
||||
node,
|
||||
line,
|
||||
top,
|
||||
x,
|
||||
lineLength,
|
||||
height,
|
||||
expandBtnSize,
|
||||
maxy,
|
||||
miny,
|
||||
ctx: this
|
||||
}
|
||||
if (this.checkIsTop(node)) {
|
||||
utils.top.renderLine(params)
|
||||
} else {
|
||||
utils.bottom.renderLine(params)
|
||||
}
|
||||
node.style.line(line)
|
||||
node._lines.push(line)
|
||||
style && style(line, node)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 渲染按钮
|
||||
renderExpandBtn(node, btn) {
|
||||
let { width, height, expandBtnSize, isRoot } = node
|
||||
if (!isRoot) {
|
||||
let { translateX, translateY } = btn.transform()
|
||||
let params = {
|
||||
node,
|
||||
btn,
|
||||
expandBtnSize,
|
||||
translateX,
|
||||
translateY,
|
||||
width,
|
||||
height
|
||||
}
|
||||
if (this.checkIsTop(node)) {
|
||||
utils.top.renderExpandBtn(params)
|
||||
} else {
|
||||
utils.bottom.renderExpandBtn(params)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 创建概要节点
|
||||
renderGeneralization(list) {
|
||||
list.forEach(item => {
|
||||
let {
|
||||
top,
|
||||
bottom,
|
||||
right,
|
||||
generalizationLineMargin,
|
||||
generalizationNodeMargin
|
||||
} = this.getNodeGeneralizationRenderBoundaries(item, 'h')
|
||||
let x1 = right + generalizationLineMargin
|
||||
let y1 = top
|
||||
let x2 = right + generalizationLineMargin
|
||||
let y2 = bottom
|
||||
let cx = x1 + 20
|
||||
let cy = y1 + (y2 - y1) / 2
|
||||
let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
|
||||
item.generalizationLine.plot(this.transformPath(path))
|
||||
item.generalizationNode.left = right + generalizationNodeMargin
|
||||
item.generalizationNode.top =
|
||||
top + (bottom - top - item.generalizationNode.height) / 2
|
||||
})
|
||||
}
|
||||
|
||||
// 渲染展开收起按钮的隐藏占位元素
|
||||
renderExpandBtnRect(rect, expandBtnSize, width, height, node) {
|
||||
let dir = ''
|
||||
if (node.dir === CONSTANTS.LAYOUT_GROW_DIR.TOP) {
|
||||
dir =
|
||||
node.layerIndex === 1
|
||||
? CONSTANTS.LAYOUT_GROW_DIR.TOP
|
||||
: CONSTANTS.LAYOUT_GROW_DIR.BOTTOM
|
||||
} else {
|
||||
dir =
|
||||
node.layerIndex === 1
|
||||
? CONSTANTS.LAYOUT_GROW_DIR.BOTTOM
|
||||
: CONSTANTS.LAYOUT_GROW_DIR.TOP
|
||||
}
|
||||
if (dir === CONSTANTS.LAYOUT_GROW_DIR.TOP) {
|
||||
rect.size(width, expandBtnSize).x(0).y(-expandBtnSize)
|
||||
} else {
|
||||
rect.size(width, expandBtnSize).x(0).y(height)
|
||||
}
|
||||
}
|
||||
|
||||
// 切换切换为其他结构时的处理
|
||||
beforeChange() {
|
||||
// 删除鱼尾
|
||||
if (!this.isFishbone2()) return
|
||||
this.root.nodeData.data.shape = CONSTANTS.SHAPE.RECTANGLE
|
||||
this.removeFishTail()
|
||||
this.unBindEvent()
|
||||
this.mindMap.removeShape('fishHead')
|
||||
}
|
||||
}
|
||||
|
||||
export default Fishbone
|
||||
@@ -0,0 +1,363 @@
|
||||
import Base from './Base'
|
||||
import { walk, asyncRun, getNodeIndexInNodeList } from '../utils'
|
||||
import { CONSTANTS } from '../constants/constant'
|
||||
|
||||
// 逻辑结构图
|
||||
class LogicalStructure extends Base {
|
||||
// 构造函数
|
||||
constructor(opt = {}, layout) {
|
||||
super(opt)
|
||||
this.isUseLeft = layout === CONSTANTS.LAYOUT.LOGICAL_STRUCTURE_LEFT
|
||||
}
|
||||
|
||||
// 布局
|
||||
doLayout(callback) {
|
||||
let task = [
|
||||
() => {
|
||||
this.computedBaseValue()
|
||||
},
|
||||
() => {
|
||||
this.computedTopValue()
|
||||
},
|
||||
() => {
|
||||
this.adjustTopValue()
|
||||
},
|
||||
() => {
|
||||
callback(this.root)
|
||||
}
|
||||
]
|
||||
asyncRun(task)
|
||||
}
|
||||
|
||||
// 遍历数据计算节点的left、width、height
|
||||
computedBaseValue() {
|
||||
let sortIndex = 0
|
||||
walk(
|
||||
this.renderer.renderTree,
|
||||
null,
|
||||
(cur, parent, isRoot, layerIndex, index, ancestors) => {
|
||||
let newNode = this.createNode(cur, parent, isRoot, layerIndex, index, ancestors)
|
||||
newNode.sortIndex = sortIndex
|
||||
sortIndex++
|
||||
// 根节点定位在画布中心位置
|
||||
if (isRoot) {
|
||||
this.setNodeCenter(newNode)
|
||||
} else {
|
||||
// 非根节点
|
||||
// 定位到父节点右侧
|
||||
if (this.isUseLeft) {
|
||||
newNode.left =
|
||||
parent._node.left - newNode.width - this.getMarginX(layerIndex)
|
||||
} else {
|
||||
newNode.left =
|
||||
parent._node.left +
|
||||
parent._node.width +
|
||||
this.getMarginX(layerIndex)
|
||||
}
|
||||
}
|
||||
if (!cur.data.expand) {
|
||||
return true
|
||||
}
|
||||
},
|
||||
(cur, parent, isRoot, layerIndex) => {
|
||||
// 返回时计算节点的areaHeight，也就是子节点所占的高度之和，包括外边距
|
||||
let len = cur.data.expand === false ? 0 : cur._node.children.length
|
||||
cur._node.childrenAreaHeight = len
|
||||
? cur._node.children.reduce((h, item) => {
|
||||
return h + item.height
|
||||
}, 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
|
||||
)
|
||||
}
|
||||
|
||||
// 遍历节点树计算节点的top
|
||||
computedTopValue() {
|
||||
walk(
|
||||
this.root,
|
||||
null,
|
||||
(node, parent, isRoot, layerIndex) => {
|
||||
if (node.getData('expand') && node.children && node.children.length) {
|
||||
let marginY = this.getMarginY(layerIndex + 1)
|
||||
// 第一个子节点的top值 = 该节点中心的top值 - 子节点的高度之和的一半
|
||||
let top = node.top + node.height / 2 - node.childrenAreaHeight / 2
|
||||
let totalTop = top + marginY
|
||||
node.children.forEach(cur => {
|
||||
cur.top = totalTop
|
||||
totalTop += cur.height + marginY
|
||||
})
|
||||
}
|
||||
},
|
||||
null,
|
||||
true
|
||||
)
|
||||
}
|
||||
|
||||
// 调整节点top
|
||||
adjustTopValue() {
|
||||
walk(
|
||||
this.root,
|
||||
null,
|
||||
(node, parent, isRoot, layerIndex) => {
|
||||
if (!node.getData('expand')) {
|
||||
return
|
||||
}
|
||||
// 判断子节点所占的高度之和是否大于该节点自身，大于则需要调整位置
|
||||
let difference =
|
||||
node.childrenAreaHeight2 -
|
||||
this.getMarginY(layerIndex + 1) * 2 -
|
||||
node.height
|
||||
if (difference > 0) {
|
||||
this.updateBrothers(node, difference / 2)
|
||||
}
|
||||
},
|
||||
null,
|
||||
true
|
||||
)
|
||||
}
|
||||
|
||||
// 更新兄弟节点的top
|
||||
updateBrothers(node, addHeight) {
|
||||
if (node.parent) {
|
||||
let childrenList = node.parent.children
|
||||
let index = getNodeIndexInNodeList(node, childrenList)
|
||||
childrenList.forEach((item, _index) => {
|
||||
if (item.uid === node.uid || item.hasCustomPosition()) {
|
||||
// 适配自定义位置
|
||||
return
|
||||
}
|
||||
let _offset = 0
|
||||
// 上面的节点往上移
|
||||
if (_index < index) {
|
||||
_offset = -addHeight
|
||||
} else if (_index > index) {
|
||||
// 下面的节点往下移
|
||||
_offset = addHeight
|
||||
}
|
||||
item.top += _offset
|
||||
// 同步更新子节点的位置
|
||||
if (item.children && item.children.length) {
|
||||
this.updateChildren(item.children, 'top', _offset)
|
||||
}
|
||||
})
|
||||
// 更新父节点的位置
|
||||
this.updateBrothers(node.parent, addHeight)
|
||||
}
|
||||
}
|
||||
|
||||
// 绘制连线，连接该节点到其子节点
|
||||
renderLine(node, lines, style, lineStyle) {
|
||||
if (lineStyle === 'curve') {
|
||||
this.renderLineCurve(node, lines, style)
|
||||
} else if (lineStyle === 'direct') {
|
||||
this.renderLineDirect(node, lines, style)
|
||||
} else {
|
||||
this.renderLineStraight(node, lines, style)
|
||||
}
|
||||
}
|
||||
|
||||
// 直线风格连线
|
||||
renderLineStraight(node, lines, style) {
|
||||
if (node.children.length <= 0) {
|
||||
return []
|
||||
}
|
||||
let { left, top, width, height, expandBtnSize } = node
|
||||
const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
|
||||
if (!alwaysShowExpandBtn || notShowExpandBtn) {
|
||||
expandBtnSize = 0
|
||||
}
|
||||
let marginX = this.getMarginX(node.layerIndex + 1)
|
||||
let s1 = (marginX - expandBtnSize) * 0.6
|
||||
if (this.isUseLeft) {
|
||||
s1 *= -1
|
||||
}
|
||||
let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
|
||||
node.children.forEach((item, index) => {
|
||||
let x1
|
||||
if (this.isUseLeft) {
|
||||
x1 = node.layerIndex === 0 ? left : left - expandBtnSize
|
||||
} else {
|
||||
x1 = node.layerIndex === 0 ? left + width : left + width + expandBtnSize
|
||||
}
|
||||
let y1 = top + height / 2
|
||||
let x2 = this.isUseLeft ? item.left + item.width : item.left
|
||||
let y2 = item.top + item.height / 2
|
||||
// 节点使用横线风格，需要额外渲染横线
|
||||
let nodeUseLineStyleOffset = nodeUseLineStyle
|
||||
? item.width * (this.isUseLeft ? -1 : 1)
|
||||
: 0
|
||||
y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
|
||||
y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
|
||||
let path = this.createFoldLine([
|
||||
[x1, y1],
|
||||
[x1 + s1, y1],
|
||||
[x1 + s1, y2],
|
||||
[x2 + nodeUseLineStyleOffset, y2]
|
||||
])
|
||||
this.setLineStyle(style, lines[index], path, item)
|
||||
})
|
||||
}
|
||||
|
||||
// 直连风格
|
||||
renderLineDirect(node, lines, style) {
|
||||
if (node.children.length <= 0) {
|
||||
return []
|
||||
}
|
||||
let { left, top, width, height, expandBtnSize } = node
|
||||
const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
|
||||
if (!alwaysShowExpandBtn || notShowExpandBtn) {
|
||||
expandBtnSize = 0
|
||||
}
|
||||
const { nodeUseLineStyle } = this.mindMap.themeConfig
|
||||
node.children.forEach((item, index) => {
|
||||
if (node.layerIndex === 0) {
|
||||
expandBtnSize = 0
|
||||
}
|
||||
let x1 = this.isUseLeft
|
||||
? left - expandBtnSize
|
||||
: left + width + expandBtnSize
|
||||
let y1 = top + height / 2
|
||||
let x2 = this.isUseLeft ? item.left + item.width : item.left
|
||||
let y2 = item.top + item.height / 2
|
||||
y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
|
||||
y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
|
||||
// 节点使用横线风格，需要额外渲染横线
|
||||
let nodeUseLineStylePath = nodeUseLineStyle
|
||||
? ` L ${this.isUseLeft ? item.left : item.left + item.width},${y2}`
|
||||
: ''
|
||||
let path = `M ${x1},${y1} L ${x2},${y2}` + nodeUseLineStylePath
|
||||
this.setLineStyle(style, lines[index], path, item)
|
||||
})
|
||||
}
|
||||
|
||||
// 曲线风格连线
|
||||
renderLineCurve(node, lines, style) {
|
||||
if (node.children.length <= 0) {
|
||||
return []
|
||||
}
|
||||
let { left, top, width, height, expandBtnSize } = node
|
||||
const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
|
||||
if (!alwaysShowExpandBtn || notShowExpandBtn) {
|
||||
expandBtnSize = 0
|
||||
}
|
||||
const {
|
||||
nodeUseLineStyle,
|
||||
rootLineStartPositionKeepSameInCurve,
|
||||
rootLineKeepSameInCurve
|
||||
} = this.mindMap.themeConfig
|
||||
node.children.forEach((item, index) => {
|
||||
if (node.layerIndex === 0) {
|
||||
expandBtnSize = 0
|
||||
}
|
||||
let x1
|
||||
if (this.isUseLeft) {
|
||||
x1 =
|
||||
node.layerIndex === 0 && !rootLineStartPositionKeepSameInCurve
|
||||
? left + width / 2
|
||||
: left - expandBtnSize
|
||||
} else {
|
||||
x1 =
|
||||
node.layerIndex === 0 && !rootLineStartPositionKeepSameInCurve
|
||||
? left + width / 2
|
||||
: left + width + expandBtnSize
|
||||
}
|
||||
let y1 = top + height / 2
|
||||
let x2 = this.isUseLeft ? item.left + item.width : item.left
|
||||
let y2 = item.top + item.height / 2
|
||||
let path = ''
|
||||
y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
|
||||
y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
|
||||
// 节点使用横线风格，需要额外渲染横线
|
||||
let nodeUseLineStylePath
|
||||
if (this.isUseLeft) {
|
||||
nodeUseLineStylePath = nodeUseLineStyle ? ` L ${item.left},${y2}` : ''
|
||||
} else {
|
||||
nodeUseLineStylePath = nodeUseLineStyle
|
||||
? ` L ${item.left + item.width},${y2}`
|
||||
: ''
|
||||
}
|
||||
if (node.isRoot && !rootLineKeepSameInCurve) {
|
||||
path = this.quadraticCurvePath(x1, y1, x2, y2) + nodeUseLineStylePath
|
||||
} else {
|
||||
path = this.cubicBezierPath(x1, y1, x2, y2) + nodeUseLineStylePath
|
||||
}
|
||||
this.setLineStyle(style, lines[index], path, item)
|
||||
})
|
||||
}
|
||||
|
||||
// 渲染按钮
|
||||
renderExpandBtn(node, btn) {
|
||||
let { width, height, expandBtnSize, layerIndex } = node
|
||||
if (layerIndex === 0) {
|
||||
expandBtnSize = 0
|
||||
}
|
||||
let { translateX, translateY } = btn.transform()
|
||||
// 节点使用横线风格，需要调整展开收起按钮位置
|
||||
let nodeUseLineStyleOffset = this.mindMap.themeConfig.nodeUseLineStyle
|
||||
? height / 2
|
||||
: 0
|
||||
// 位置没有变化则返回
|
||||
let _x = this.isUseLeft ? 0 - expandBtnSize : width
|
||||
let _y = height / 2 + nodeUseLineStyleOffset
|
||||
if (_x === translateX && _y === translateY) {
|
||||
return
|
||||
}
|
||||
btn.translate(_x - translateX, _y - translateY)
|
||||
}
|
||||
|
||||
// 创建概要节点
|
||||
renderGeneralization(list) {
|
||||
list.forEach(item => {
|
||||
let {
|
||||
left,
|
||||
top,
|
||||
bottom,
|
||||
right,
|
||||
generalizationLineMargin,
|
||||
generalizationNodeMargin
|
||||
} = this.getNodeGeneralizationRenderBoundaries(item, 'h')
|
||||
let x = this.isUseLeft
|
||||
? left - generalizationLineMargin
|
||||
: right + generalizationLineMargin
|
||||
let x1 = x
|
||||
let y1 = top
|
||||
let x2 = x
|
||||
let y2 = bottom
|
||||
let cx = x1 + (this.isUseLeft ? -20 : 20)
|
||||
let cy = y1 + (y2 - y1) / 2
|
||||
let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
|
||||
item.generalizationLine.plot(path)
|
||||
item.generalizationNode.left =
|
||||
x +
|
||||
(this.isUseLeft
|
||||
? -generalizationNodeMargin
|
||||
: generalizationNodeMargin) -
|
||||
(this.isUseLeft ? item.generalizationNode.width : 0)
|
||||
item.generalizationNode.top =
|
||||
top + (bottom - top - item.generalizationNode.height) / 2
|
||||
})
|
||||
}
|
||||
|
||||
// 渲染展开收起按钮的隐藏占位元素
|
||||
renderExpandBtnRect(rect, expandBtnSize, width, height) {
|
||||
if (this.isUseLeft) {
|
||||
rect.size(expandBtnSize, height).x(-expandBtnSize).y(0)
|
||||
} else {
|
||||
rect.size(expandBtnSize, height).x(width).y(0)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default LogicalStructure
|
||||
@@ -0,0 +1,417 @@
|
||||
import Base from './Base'
|
||||
import { walk, asyncRun, getNodeIndexInNodeList } from '../utils'
|
||||
import { CONSTANTS } from '../constants/constant'
|
||||
|
||||
// 思维导图
|
||||
class MindMap extends Base {
|
||||
// 构造函数
|
||||
// 在逻辑结构图的基础上增加一个变量来记录生长方向，向左还是向右，同时在计算left的时候根据方向来计算、调整top时只考虑同方向的节点即可
|
||||
constructor(opt = {}) {
|
||||
super(opt)
|
||||
}
|
||||
|
||||
// 布局
|
||||
doLayout(callback) {
|
||||
let task = [
|
||||
() => {
|
||||
this.computedBaseValue()
|
||||
},
|
||||
() => {
|
||||
this.computedTopValue()
|
||||
},
|
||||
() => {
|
||||
this.adjustTopValue()
|
||||
},
|
||||
() => {
|
||||
callback(this.root)
|
||||
}
|
||||
]
|
||||
asyncRun(task)
|
||||
}
|
||||
|
||||
// 遍历数据计算节点的left、width、height
|
||||
computedBaseValue() {
|
||||
walk(
|
||||
this.renderer.renderTree,
|
||||
null,
|
||||
(cur, parent, isRoot, layerIndex, index, ancestors) => {
|
||||
let newNode = this.createNode(
|
||||
cur,
|
||||
parent,
|
||||
isRoot,
|
||||
layerIndex,
|
||||
index,
|
||||
ancestors
|
||||
)
|
||||
// 根节点定位在画布中心位置
|
||||
if (isRoot) {
|
||||
this.setNodeCenter(newNode)
|
||||
} else {
|
||||
// 非根节点
|
||||
// 三级及以下节点以上级为准
|
||||
if (parent._node.dir) {
|
||||
newNode.dir = parent._node.dir
|
||||
} else {
|
||||
// 节点生长方向
|
||||
newNode.dir =
|
||||
newNode.getData('dir') ||
|
||||
(index % 2 === 0
|
||||
? CONSTANTS.LAYOUT_GROW_DIR.RIGHT
|
||||
: CONSTANTS.LAYOUT_GROW_DIR.LEFT)
|
||||
}
|
||||
// 根据生长方向定位到父节点的左侧或右侧
|
||||
newNode.left =
|
||||
newNode.dir === CONSTANTS.LAYOUT_GROW_DIR.RIGHT
|
||||
? parent._node.left +
|
||||
parent._node.width +
|
||||
this.getMarginX(layerIndex)
|
||||
: parent._node.left - this.getMarginX(layerIndex) - newNode.width
|
||||
}
|
||||
if (!cur.data.expand) {
|
||||
return true
|
||||
}
|
||||
},
|
||||
(cur, parent, isRoot, layerIndex) => {
|
||||
// 返回时计算节点的leftChildrenAreaHeight和rightChildrenAreaHeight，也就是左侧和右侧子节点所占的高度之和，包括外边距
|
||||
if (!cur.data.expand) {
|
||||
cur._node.leftChildrenAreaHeight = 0
|
||||
cur._node.rightChildrenAreaHeight = 0
|
||||
return
|
||||
}
|
||||
// 理论上只有根节点是存在两个方向的子节点的，其他节点的子节点一定全都是同方向，但是为了逻辑统一，就不按特殊处理的方式来写了
|
||||
let leftLen = 0
|
||||
let rightLen = 0
|
||||
let leftChildrenAreaHeight = 0
|
||||
let rightChildrenAreaHeight = 0
|
||||
cur._node.children.forEach(item => {
|
||||
if (item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT) {
|
||||
leftLen++
|
||||
leftChildrenAreaHeight += item.height
|
||||
} else {
|
||||
rightLen++
|
||||
rightChildrenAreaHeight += item.height
|
||||
}
|
||||
})
|
||||
cur._node.leftChildrenAreaHeight =
|
||||
leftChildrenAreaHeight +
|
||||
(leftLen + 1) * this.getMarginY(layerIndex + 1)
|
||||
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
|
||||
)
|
||||
}
|
||||
|
||||
// 遍历节点树计算节点的top
|
||||
computedTopValue() {
|
||||
walk(
|
||||
this.root,
|
||||
null,
|
||||
(node, parent, isRoot, layerIndex) => {
|
||||
if (node.getData('expand') && node.children && node.children.length) {
|
||||
let marginY = this.getMarginY(layerIndex + 1)
|
||||
let baseTop = node.top + node.height / 2 + marginY
|
||||
// 第一个子节点的top值 = 该节点中心的top值 - 子节点的高度之和的一半
|
||||
let leftTotalTop = baseTop - node.leftChildrenAreaHeight / 2
|
||||
let rightTotalTop = baseTop - node.rightChildrenAreaHeight / 2
|
||||
node.children.forEach(cur => {
|
||||
if (cur.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT) {
|
||||
cur.top = leftTotalTop
|
||||
leftTotalTop += cur.height + marginY
|
||||
} else {
|
||||
cur.top = rightTotalTop
|
||||
rightTotalTop += cur.height + marginY
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
null,
|
||||
true
|
||||
)
|
||||
}
|
||||
|
||||
// 调整节点top
|
||||
adjustTopValue() {
|
||||
walk(
|
||||
this.root,
|
||||
null,
|
||||
(node, parent, isRoot, layerIndex) => {
|
||||
if (!node.getData('expand')) {
|
||||
return
|
||||
}
|
||||
// 判断子节点所占的高度之和是否大于该节点自身，大于则需要调整位置
|
||||
let base = this.getMarginY(layerIndex + 1) * 2 + node.height
|
||||
let leftDifference = node.leftChildrenAreaHeight2 - base
|
||||
let rightDifference = node.rightChildrenAreaHeight2 - base
|
||||
if (leftDifference > 0 || rightDifference > 0) {
|
||||
this.updateBrothers(node, leftDifference / 2, rightDifference / 2)
|
||||
}
|
||||
},
|
||||
null,
|
||||
true
|
||||
)
|
||||
}
|
||||
|
||||
// 更新兄弟节点的top
|
||||
updateBrothers(node, leftAddHeight, rightAddHeight) {
|
||||
if (node.parent) {
|
||||
// 过滤出和自己同方向的节点
|
||||
let childrenList = node.parent.children.filter(item => {
|
||||
return item.dir === node.dir
|
||||
})
|
||||
let index = getNodeIndexInNodeList(node, childrenList)
|
||||
childrenList.forEach((item, _index) => {
|
||||
if (item.hasCustomPosition()) {
|
||||
// 适配自定义位置
|
||||
return
|
||||
}
|
||||
let _offset = 0
|
||||
let addHeight =
|
||||
item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
|
||||
? leftAddHeight
|
||||
: rightAddHeight
|
||||
// 上面的节点往上移
|
||||
if (_index < index) {
|
||||
_offset = -addHeight
|
||||
} else if (_index > index) {
|
||||
// 下面的节点往下移
|
||||
_offset = addHeight
|
||||
}
|
||||
item.top += _offset
|
||||
// 同步更新子节点的位置
|
||||
if (item.children && item.children.length) {
|
||||
this.updateChildren(item.children, 'top', _offset)
|
||||
}
|
||||
})
|
||||
// 更新父节点的位置
|
||||
this.updateBrothers(node.parent, leftAddHeight, rightAddHeight)
|
||||
}
|
||||
}
|
||||
|
||||
// 绘制连线，连接该节点到其子节点
|
||||
renderLine(node, lines, style, lineStyle) {
|
||||
if (lineStyle === 'curve') {
|
||||
this.renderLineCurve(node, lines, style)
|
||||
} else if (lineStyle === 'direct') {
|
||||
this.renderLineDirect(node, lines, style)
|
||||
} else {
|
||||
this.renderLineStraight(node, lines, style)
|
||||
}
|
||||
}
|
||||
|
||||
// 直线风格连线
|
||||
renderLineStraight(node, lines, style) {
|
||||
if (node.children.length <= 0) {
|
||||
return []
|
||||
}
|
||||
let { left, top, width, height, expandBtnSize } = node
|
||||
const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
|
||||
if (!alwaysShowExpandBtn || notShowExpandBtn) {
|
||||
expandBtnSize = 0
|
||||
}
|
||||
let marginX = this.getMarginX(node.layerIndex + 1)
|
||||
let s1 = (marginX - expandBtnSize) * 0.6
|
||||
let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
|
||||
node.children.forEach((item, index) => {
|
||||
let x1 = 0
|
||||
let _s = 0
|
||||
// 节点使用横线风格，需要额外渲染横线
|
||||
let nodeUseLineStyleOffset = nodeUseLineStyle ? item.width : 0
|
||||
if (item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT) {
|
||||
_s = -s1
|
||||
x1 = node.layerIndex === 0 ? left : left - expandBtnSize
|
||||
nodeUseLineStyleOffset = -nodeUseLineStyleOffset
|
||||
} else {
|
||||
_s = s1
|
||||
x1 = node.layerIndex === 0 ? left + width : left + width + expandBtnSize
|
||||
}
|
||||
let y1 = top + height / 2
|
||||
let x2 =
|
||||
item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
|
||||
? item.left + item.width
|
||||
: item.left
|
||||
let y2 = item.top + item.height / 2
|
||||
y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
|
||||
y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
|
||||
let path = this.createFoldLine([
|
||||
[x1, y1],
|
||||
[x1 + _s, y1],
|
||||
[x1 + _s, y2],
|
||||
[x2 + nodeUseLineStyleOffset, y2]
|
||||
])
|
||||
this.setLineStyle(style, lines[index], path, item)
|
||||
})
|
||||
}
|
||||
|
||||
// 直连风格
|
||||
renderLineDirect(node, lines, style) {
|
||||
if (node.children.length <= 0) {
|
||||
return []
|
||||
}
|
||||
let { left, top, width, height, expandBtnSize } = node
|
||||
const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
|
||||
if (!alwaysShowExpandBtn || notShowExpandBtn) {
|
||||
expandBtnSize = 0
|
||||
}
|
||||
const { nodeUseLineStyle } = this.mindMap.themeConfig
|
||||
node.children.forEach((item, index) => {
|
||||
if (node.layerIndex === 0) {
|
||||
expandBtnSize = 0
|
||||
}
|
||||
let x1 =
|
||||
item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
|
||||
? left - expandBtnSize
|
||||
: left + width + expandBtnSize
|
||||
let y1 = top + height / 2
|
||||
let x2 =
|
||||
item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
|
||||
? item.left + item.width
|
||||
: item.left
|
||||
let y2 = item.top + item.height / 2
|
||||
y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
|
||||
y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
|
||||
// 节点使用横线风格，需要额外渲染横线
|
||||
let nodeUseLineStylePath = ''
|
||||
if (nodeUseLineStyle) {
|
||||
if (item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT) {
|
||||
nodeUseLineStylePath = ` L ${item.left},${y2}`
|
||||
} else {
|
||||
nodeUseLineStylePath = ` L ${item.left + item.width},${y2}`
|
||||
}
|
||||
}
|
||||
let path = `M ${x1},${y1} L ${x2},${y2}` + nodeUseLineStylePath
|
||||
this.setLineStyle(style, lines[index], path, item)
|
||||
})
|
||||
}
|
||||
|
||||
// 曲线风格连线
|
||||
renderLineCurve(node, lines, style) {
|
||||
if (node.children.length <= 0) {
|
||||
return []
|
||||
}
|
||||
let { left, top, width, height, expandBtnSize } = node
|
||||
const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
|
||||
if (!alwaysShowExpandBtn || notShowExpandBtn) {
|
||||
expandBtnSize = 0
|
||||
}
|
||||
const {
|
||||
nodeUseLineStyle,
|
||||
rootLineKeepSameInCurve,
|
||||
rootLineStartPositionKeepSameInCurve
|
||||
} = this.mindMap.themeConfig
|
||||
node.children.forEach((item, index) => {
|
||||
if (node.layerIndex === 0) {
|
||||
expandBtnSize = 0
|
||||
}
|
||||
let x1 =
|
||||
node.layerIndex === 0 && !rootLineStartPositionKeepSameInCurve
|
||||
? left + width / 2
|
||||
: item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
|
||||
? left - expandBtnSize
|
||||
: left + width + expandBtnSize
|
||||
let y1 = top + height / 2
|
||||
let x2 =
|
||||
item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
|
||||
? item.left + item.width
|
||||
: item.left
|
||||
let y2 = item.top + item.height / 2
|
||||
let path = ''
|
||||
y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
|
||||
y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
|
||||
// 节点使用横线风格，需要额外渲染横线
|
||||
let nodeUseLineStylePath = ''
|
||||
if (nodeUseLineStyle) {
|
||||
if (item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT) {
|
||||
nodeUseLineStylePath = ` L ${item.left},${y2}`
|
||||
} else {
|
||||
nodeUseLineStylePath = ` L ${item.left + item.width},${y2}`
|
||||
}
|
||||
}
|
||||
if (node.isRoot && !rootLineKeepSameInCurve) {
|
||||
path = this.quadraticCurvePath(x1, y1, x2, y2) + nodeUseLineStylePath
|
||||
} else {
|
||||
path = this.cubicBezierPath(x1, y1, x2, y2) + nodeUseLineStylePath
|
||||
}
|
||||
this.setLineStyle(style, lines[index], path, item)
|
||||
})
|
||||
}
|
||||
|
||||
// 渲染按钮
|
||||
renderExpandBtn(node, btn) {
|
||||
let { width, height, expandBtnSize } = node
|
||||
let { translateX, translateY } = btn.transform()
|
||||
// 节点使用横线风格，需要调整展开收起按钮位置
|
||||
let nodeUseLineStyleOffset = this.mindMap.themeConfig.nodeUseLineStyle
|
||||
? height / 2
|
||||
: 0
|
||||
// 位置没有变化则返回
|
||||
let _x =
|
||||
node.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT ? 0 - expandBtnSize : width
|
||||
let _y = height / 2 + nodeUseLineStyleOffset
|
||||
if (_x === translateX && _y === translateY) {
|
||||
return
|
||||
}
|
||||
let x = _x - translateX
|
||||
let y = _y - translateY
|
||||
btn.translate(x, y)
|
||||
}
|
||||
|
||||
// 创建概要节点
|
||||
renderGeneralization(list) {
|
||||
list.forEach(item => {
|
||||
let isLeft = item.node.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
|
||||
let {
|
||||
top,
|
||||
bottom,
|
||||
left,
|
||||
right,
|
||||
generalizationLineMargin,
|
||||
generalizationNodeMargin
|
||||
} = this.getNodeGeneralizationRenderBoundaries(item, 'h')
|
||||
let x = isLeft
|
||||
? left - generalizationLineMargin
|
||||
: right + generalizationLineMargin
|
||||
let x1 = x
|
||||
let y1 = top
|
||||
let x2 = x
|
||||
let y2 = bottom
|
||||
let cx = x1 + (isLeft ? -20 : 20)
|
||||
let cy = y1 + (y2 - y1) / 2
|
||||
let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
|
||||
item.generalizationLine.plot(path)
|
||||
item.generalizationNode.left =
|
||||
x +
|
||||
(isLeft ? -generalizationNodeMargin : generalizationNodeMargin) -
|
||||
(isLeft ? item.generalizationNode.width : 0)
|
||||
item.generalizationNode.top =
|
||||
top + (bottom - top - item.generalizationNode.height) / 2
|
||||
})
|
||||
}
|
||||
|
||||
// 渲染展开收起按钮的隐藏占位元素
|
||||
renderExpandBtnRect(rect, expandBtnSize, width, height, node) {
|
||||
if (node.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT) {
|
||||
rect.size(expandBtnSize, height).x(-expandBtnSize).y(0)
|
||||
} else {
|
||||
rect.size(expandBtnSize, height).x(width).y(0)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default MindMap
|
||||
@@ -0,0 +1,323 @@
|
||||
import Base from './Base'
|
||||
import { walk, asyncRun, getNodeIndexInNodeList } from '../utils'
|
||||
|
||||
// 组织结构图
|
||||
// 和逻辑结构图基本一样，只是方向变成向下生长，所以先计算节点的top，后计算节点的left、最后调整节点的left即可
|
||||
class OrganizationStructure extends Base {
|
||||
// 构造函数
|
||||
constructor(opt = {}) {
|
||||
super(opt)
|
||||
}
|
||||
|
||||
// 布局
|
||||
doLayout(callback) {
|
||||
let task = [
|
||||
() => {
|
||||
this.computedBaseValue()
|
||||
},
|
||||
() => {
|
||||
this.computedLeftValue()
|
||||
},
|
||||
() => {
|
||||
this.adjustLeftValue()
|
||||
},
|
||||
() => {
|
||||
callback(this.root)
|
||||
}
|
||||
]
|
||||
asyncRun(task)
|
||||
}
|
||||
|
||||
// 遍历数据计算节点的left、width、height
|
||||
computedBaseValue() {
|
||||
walk(
|
||||
this.renderer.renderTree,
|
||||
null,
|
||||
(cur, parent, isRoot, layerIndex, index, ancestors) => {
|
||||
let newNode = this.createNode(
|
||||
cur,
|
||||
parent,
|
||||
isRoot,
|
||||
layerIndex,
|
||||
index,
|
||||
ancestors
|
||||
)
|
||||
// 根节点定位在画布中心位置
|
||||
if (isRoot) {
|
||||
this.setNodeCenter(newNode)
|
||||
} else {
|
||||
// 非根节点
|
||||
// 定位到父节点下方
|
||||
newNode.top =
|
||||
parent._node.top + parent._node.height + this.getMarginX(layerIndex)
|
||||
}
|
||||
if (!cur.data.expand) {
|
||||
return true
|
||||
}
|
||||
},
|
||||
(cur, parent, isRoot, layerIndex) => {
|
||||
// 返回时计算节点的areaWidth，也就是子节点所占的宽度之和，包括外边距
|
||||
let len = cur.data.expand === false ? 0 : cur._node.children.length
|
||||
cur._node.childrenAreaWidth = len
|
||||
? cur._node.children.reduce((h, item) => {
|
||||
return h + item.width
|
||||
}, 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
|
||||
)
|
||||
}
|
||||
|
||||
// 遍历节点树计算节点的left
|
||||
computedLeftValue() {
|
||||
walk(
|
||||
this.root,
|
||||
null,
|
||||
(node, parent, isRoot, layerIndex) => {
|
||||
if (node.getData('expand') && node.children && node.children.length) {
|
||||
let marginX = this.getMarginY(layerIndex + 1)
|
||||
// 第一个子节点的left值 = 该节点中心的left值 - 子节点的宽度之和的一半
|
||||
let left = node.left + node.width / 2 - node.childrenAreaWidth / 2
|
||||
let totalLeft = left + marginX
|
||||
node.children.forEach(cur => {
|
||||
cur.left = totalLeft
|
||||
totalLeft += cur.width + marginX
|
||||
})
|
||||
}
|
||||
},
|
||||
null,
|
||||
true
|
||||
)
|
||||
}
|
||||
|
||||
// 调整节点left
|
||||
adjustLeftValue() {
|
||||
walk(
|
||||
this.root,
|
||||
null,
|
||||
(node, parent, isRoot, layerIndex) => {
|
||||
if (!node.getData('expand')) {
|
||||
return
|
||||
}
|
||||
// 判断子节点所占的宽度之和是否大于该节点自身，大于则需要调整位置
|
||||
let difference =
|
||||
node.childrenAreaWidth2 -
|
||||
this.getMarginY(layerIndex + 1) * 2 -
|
||||
node.width
|
||||
if (difference > 0) {
|
||||
this.updateBrothers(node, difference / 2)
|
||||
}
|
||||
},
|
||||
null,
|
||||
true
|
||||
)
|
||||
}
|
||||
|
||||
// 更新兄弟节点的left
|
||||
updateBrothers(node, addWidth) {
|
||||
if (node.parent) {
|
||||
let childrenList = node.parent.children
|
||||
let index = getNodeIndexInNodeList(node, childrenList)
|
||||
childrenList.forEach((item, _index) => {
|
||||
if (item.hasCustomPosition()) {
|
||||
// 适配自定义位置
|
||||
return
|
||||
}
|
||||
let _offset = 0
|
||||
// 上面的节点往上移
|
||||
if (_index < index) {
|
||||
_offset = -addWidth
|
||||
} else if (_index > index) {
|
||||
// 下面的节点往下移
|
||||
_offset = addWidth
|
||||
}
|
||||
item.left += _offset
|
||||
// 同步更新子节点的位置
|
||||
if (item.children && item.children.length) {
|
||||
this.updateChildren(item.children, 'left', _offset)
|
||||
}
|
||||
})
|
||||
// 更新父节点的位置
|
||||
this.updateBrothers(node.parent, addWidth)
|
||||
}
|
||||
}
|
||||
|
||||
// 绘制连线，连接该节点到其子节点
|
||||
renderLine(node, lines, style, lineStyle) {
|
||||
if (lineStyle === 'curve') {
|
||||
this.renderLineCurve(node, lines, style)
|
||||
} else if (lineStyle === 'direct') {
|
||||
this.renderLineDirect(node, lines, style)
|
||||
} else {
|
||||
this.renderLineStraight(node, lines, style)
|
||||
}
|
||||
}
|
||||
|
||||
// 曲线风格连线
|
||||
renderLineCurve(node, lines, style) {
|
||||
if (node.children.length <= 0) {
|
||||
return []
|
||||
}
|
||||
let { left, top, width, height, expandBtnSize } = node
|
||||
const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
|
||||
if (!alwaysShowExpandBtn || notShowExpandBtn) {
|
||||
expandBtnSize = 0
|
||||
}
|
||||
const {
|
||||
nodeUseLineStyle,
|
||||
rootLineStartPositionKeepSameInCurve,
|
||||
rootLineKeepSameInCurve
|
||||
} = this.mindMap.themeConfig
|
||||
node.children.forEach((item, index) => {
|
||||
if (node.layerIndex === 0) {
|
||||
expandBtnSize = 0
|
||||
}
|
||||
let x1 = left + width / 2
|
||||
let y1 =
|
||||
node.layerIndex === 0 && !rootLineStartPositionKeepSameInCurve
|
||||
? top + height / 2
|
||||
: top + height + expandBtnSize
|
||||
let x2 = item.left + item.width / 2
|
||||
let y2 = item.top
|
||||
let path = ''
|
||||
// 节点使用横线风格，需要额外渲染横线
|
||||
let nodeUseLineStylePath = nodeUseLineStyle
|
||||
? ` L ${item.left},${y2} L ${item.left + item.width},${y2}`
|
||||
: ''
|
||||
if (node.isRoot && !rootLineKeepSameInCurve) {
|
||||
path =
|
||||
this.quadraticCurvePath(x1, y1, x2, y2, true) + nodeUseLineStylePath
|
||||
} else {
|
||||
path = this.cubicBezierPath(x1, y1, x2, y2, true) + nodeUseLineStylePath
|
||||
}
|
||||
this.setLineStyle(style, lines[index], path, item)
|
||||
})
|
||||
}
|
||||
|
||||
// 直连风格
|
||||
renderLineDirect(node, lines, style) {
|
||||
if (node.children.length <= 0) {
|
||||
return []
|
||||
}
|
||||
let { left, top, width, height } = node
|
||||
const { nodeUseLineStyle } = this.mindMap.themeConfig
|
||||
let x1 = left + width / 2
|
||||
let y1 = top + height
|
||||
node.children.forEach((item, index) => {
|
||||
let x2 = item.left + item.width / 2
|
||||
let y2 = item.top
|
||||
// 节点使用横线风格，需要额外渲染横线
|
||||
let nodeUseLineStylePath = nodeUseLineStyle
|
||||
? ` L ${item.left},${y2} L ${item.left + item.width},${y2}`
|
||||
: ''
|
||||
let path = `M ${x1},${y1} L ${x2},${y2}` + nodeUseLineStylePath
|
||||
this.setLineStyle(style, lines[index], path, item)
|
||||
})
|
||||
}
|
||||
|
||||
// 直线风格连线
|
||||
renderLineStraight(node, lines, style) {
|
||||
if (node.children.length <= 0) {
|
||||
return []
|
||||
}
|
||||
let { left, top, width, height, expandBtnSize, isRoot } = node
|
||||
const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
|
||||
if (!alwaysShowExpandBtn || notShowExpandBtn) {
|
||||
expandBtnSize = 0
|
||||
}
|
||||
let x1 = left + width / 2
|
||||
let y1 = top + height
|
||||
let marginX = this.getMarginX(node.layerIndex + 1)
|
||||
let s1 = marginX * 0.7
|
||||
let minx = Infinity
|
||||
let maxx = -Infinity
|
||||
let len = node.children.length
|
||||
node.children.forEach((item, index) => {
|
||||
let x2 = item.left + item.width / 2
|
||||
let y2 = y1 + s1 > item.top ? item.top + item.height : item.top
|
||||
if (x2 < minx) {
|
||||
minx = x2
|
||||
}
|
||||
if (x2 > maxx) {
|
||||
maxx = x2
|
||||
}
|
||||
// 节点使用横线风格，需要额外渲染横线
|
||||
let nodeUseLineStylePath = this.mindMap.themeConfig.nodeUseLineStyle
|
||||
? ` L ${item.left},${y2} L ${item.left + item.width},${y2}`
|
||||
: ''
|
||||
let path = `M ${x2},${y1 + s1} L ${x2},${y2}` + nodeUseLineStylePath
|
||||
this.setLineStyle(style, lines[index], path, item)
|
||||
})
|
||||
minx = Math.min(x1, minx)
|
||||
maxx = Math.max(x1, maxx)
|
||||
// 父节点的竖线
|
||||
let line1 = this.lineDraw.path()
|
||||
node.style.line(line1)
|
||||
expandBtnSize = len > 0 && !isRoot ? expandBtnSize : 0
|
||||
line1.plot(
|
||||
this.transformPath(`M ${x1},${y1 + expandBtnSize} L ${x1},${y1 + s1}`)
|
||||
)
|
||||
node._lines.push(line1)
|
||||
style && style(line1, node)
|
||||
// 水平线
|
||||
if (len > 0) {
|
||||
let lin2 = this.lineDraw.path()
|
||||
node.style.line(lin2)
|
||||
lin2.plot(this.transformPath(`M ${minx},${y1 + s1} L ${maxx},${y1 + s1}`))
|
||||
node._lines.push(lin2)
|
||||
style && style(lin2, node)
|
||||
}
|
||||
}
|
||||
|
||||
// 渲染按钮
|
||||
renderExpandBtn(node, btn) {
|
||||
let { width, height, expandBtnSize } = node
|
||||
let { translateX, translateY } = btn.transform()
|
||||
btn.translate(
|
||||
width / 2 - expandBtnSize / 2 - translateX,
|
||||
height + expandBtnSize / 2 - translateY
|
||||
)
|
||||
}
|
||||
|
||||
// 创建概要节点
|
||||
renderGeneralization(list) {
|
||||
list.forEach(item => {
|
||||
let {
|
||||
bottom,
|
||||
left,
|
||||
right,
|
||||
generalizationLineMargin,
|
||||
generalizationNodeMargin
|
||||
} = this.getNodeGeneralizationRenderBoundaries(item, 'v')
|
||||
let x1 = left
|
||||
let y1 = bottom + generalizationLineMargin
|
||||
let x2 = right
|
||||
let y2 = bottom + generalizationLineMargin
|
||||
let cx = x1 + (x2 - x1) / 2
|
||||
let cy = y1 + 20
|
||||
let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
|
||||
item.generalizationLine.plot(this.transformPath(path))
|
||||
item.generalizationNode.top = bottom + generalizationNodeMargin
|
||||
item.generalizationNode.left =
|
||||
left + (right - left - item.generalizationNode.width) / 2
|
||||
})
|
||||
}
|
||||
|
||||
// 渲染展开收起按钮的隐藏占位元素
|
||||
renderExpandBtnRect(rect, expandBtnSize, width, height, node) {
|
||||
rect.size(width, expandBtnSize).x(0).y(height)
|
||||
}
|
||||
}
|
||||
|
||||
export default OrganizationStructure
|
||||
@@ -0,0 +1,363 @@
|
||||
import Base from './Base'
|
||||
import { walk, asyncRun, getNodeIndexInNodeList } from '../utils'
|
||||
import { CONSTANTS } from '../constants/constant'
|
||||
|
||||
// 时间轴
|
||||
class Timeline extends Base {
|
||||
// 构造函数
|
||||
constructor(opt = {}, layout) {
|
||||
super(opt)
|
||||
this.layout = layout
|
||||
}
|
||||
|
||||
// 布局
|
||||
doLayout(callback) {
|
||||
let task = [
|
||||
() => {
|
||||
this.computedBaseValue()
|
||||
},
|
||||
() => {
|
||||
this.computedLeftTopValue()
|
||||
},
|
||||
() => {
|
||||
this.adjustLeftTopValue()
|
||||
},
|
||||
() => {
|
||||
callback(this.root)
|
||||
}
|
||||
]
|
||||
asyncRun(task)
|
||||
}
|
||||
|
||||
// 遍历数据创建节点、计算根节点的位置，计算根节点的子节点的top值
|
||||
computedBaseValue() {
|
||||
walk(
|
||||
this.renderer.renderTree,
|
||||
null,
|
||||
(cur, parent, isRoot, layerIndex, index, ancestors) => {
|
||||
let newNode = this.createNode(cur, parent, isRoot, layerIndex, index, ancestors)
|
||||
// 根节点定位在画布中心位置
|
||||
if (isRoot) {
|
||||
this.setNodeCenter(newNode)
|
||||
} else {
|
||||
// 非根节点
|
||||
// 时间轴2类型需要交替显示
|
||||
if (this.layout === CONSTANTS.LAYOUT.TIMELINE2) {
|
||||
// 三级及以下节点以上级为准
|
||||
if (parent._node.dir) {
|
||||
newNode.dir = parent._node.dir
|
||||
} else {
|
||||
// 节点生长方向
|
||||
newNode.dir =
|
||||
index % 2 === 0
|
||||
? CONSTANTS.LAYOUT_GROW_DIR.BOTTOM
|
||||
: CONSTANTS.LAYOUT_GROW_DIR.TOP
|
||||
}
|
||||
} else {
|
||||
newNode.dir = ''
|
||||
}
|
||||
if (parent._node.isRoot) {
|
||||
newNode.top =
|
||||
parent._node.top +
|
||||
(cur._node.height > parent._node.height
|
||||
? -(cur._node.height - parent._node.height) / 2
|
||||
: (parent._node.height - cur._node.height) / 2)
|
||||
}
|
||||
}
|
||||
if (!cur.data.expand) {
|
||||
return true
|
||||
}
|
||||
},
|
||||
null,
|
||||
true,
|
||||
0
|
||||
)
|
||||
}
|
||||
|
||||
// 遍历节点树计算节点的left、top
|
||||
computedLeftTopValue() {
|
||||
walk(
|
||||
this.root,
|
||||
null,
|
||||
(node, parent, isRoot, layerIndex, index) => {
|
||||
if (node.getData('expand') && node.children && node.children.length) {
|
||||
let marginX = this.getMarginX(layerIndex + 1)
|
||||
let marginY = this.getMarginY(layerIndex + 1)
|
||||
if (isRoot) {
|
||||
let left = node.left + node.width
|
||||
let totalLeft = left + marginX
|
||||
node.children.forEach(cur => {
|
||||
cur.left = totalLeft
|
||||
totalLeft += cur.width + marginX
|
||||
})
|
||||
} else {
|
||||
let totalTop =
|
||||
node.top +
|
||||
node.height +
|
||||
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)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
null,
|
||||
true
|
||||
)
|
||||
}
|
||||
|
||||
// 调整节点left、top
|
||||
adjustLeftTopValue() {
|
||||
walk(
|
||||
this.root,
|
||||
null,
|
||||
(node, parent, isRoot, layerIndex) => {
|
||||
if (!node.getData('expand')) {
|
||||
return
|
||||
}
|
||||
// 调整left
|
||||
if (node.isRoot) {
|
||||
this.updateBrothersLeft(node)
|
||||
}
|
||||
// 调整top
|
||||
let len = node.children.length
|
||||
if (parent && !parent.isRoot && len > 0) {
|
||||
let marginY = this.getMarginY(layerIndex + 1)
|
||||
let totalHeight =
|
||||
node.children.reduce((h, item) => {
|
||||
return (
|
||||
h +
|
||||
item.height +
|
||||
(this.getNodeActChildrenLength(item) > 0
|
||||
? item.expandBtnSize
|
||||
: 0)
|
||||
)
|
||||
}, 0) +
|
||||
len * marginY
|
||||
this.updateBrothersTop(node, totalHeight)
|
||||
}
|
||||
},
|
||||
(node, parent, isRoot, layerIndex) => {
|
||||
if (
|
||||
parent &&
|
||||
parent.isRoot &&
|
||||
node.dir === CONSTANTS.LAYOUT_GROW_DIR.TOP
|
||||
) {
|
||||
// 遍历二级节点的子节点
|
||||
node.children.forEach(item => {
|
||||
let totalHeight = this.getNodeAreaHeight(item)
|
||||
let _top = item.top
|
||||
item.top =
|
||||
node.top - (item.top - node.top) - totalHeight + node.height
|
||||
this.updateChildren(item.children, 'top', item.top - _top)
|
||||
})
|
||||
}
|
||||
},
|
||||
true
|
||||
)
|
||||
}
|
||||
|
||||
// 递归计算节点的宽度
|
||||
getNodeAreaHeight(node) {
|
||||
let totalHeight = 0
|
||||
let loop = node => {
|
||||
totalHeight +=
|
||||
node.height +
|
||||
(this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) +
|
||||
this.getMarginY(node.layerIndex)
|
||||
if (node.children.length) {
|
||||
node.children.forEach(item => {
|
||||
loop(item)
|
||||
})
|
||||
}
|
||||
}
|
||||
loop(node)
|
||||
return totalHeight
|
||||
}
|
||||
|
||||
// 调整兄弟节点的left
|
||||
updateBrothersLeft(node) {
|
||||
let childrenList = node.children
|
||||
let totalAddWidth = 0
|
||||
childrenList.forEach(item => {
|
||||
item.left += totalAddWidth
|
||||
if (item.children && item.children.length) {
|
||||
this.updateChildren(item.children, 'left', totalAddWidth)
|
||||
}
|
||||
// let areaWidth = this.getNodeAreaWidth(item)
|
||||
let { left, right } = this.getNodeBoundaries(item, 'h')
|
||||
let areaWidth = right - left
|
||||
let difference = areaWidth - item.width
|
||||
if (difference > 0) {
|
||||
totalAddWidth += difference
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 调整兄弟节点的top
|
||||
updateBrothersTop(node, addHeight) {
|
||||
if (node.parent && !node.parent.isRoot) {
|
||||
let childrenList = node.parent.children
|
||||
let index = getNodeIndexInNodeList(node, childrenList)
|
||||
childrenList.forEach((item, _index) => {
|
||||
if (item.hasCustomPosition()) {
|
||||
// 适配自定义位置
|
||||
return
|
||||
}
|
||||
let _offset = 0
|
||||
// 下面的节点往下移
|
||||
if (_index > index) {
|
||||
_offset = addHeight
|
||||
}
|
||||
item.top += _offset
|
||||
// 同步更新子节点的位置
|
||||
if (item.children && item.children.length) {
|
||||
this.updateChildren(item.children, 'top', _offset)
|
||||
}
|
||||
})
|
||||
// 更新父节点的位置
|
||||
this.updateBrothersTop(node.parent, addHeight)
|
||||
}
|
||||
}
|
||||
|
||||
// 绘制连线，连接该节点到其子节点
|
||||
renderLine(node, lines, style) {
|
||||
if (node.children.length <= 0) {
|
||||
return []
|
||||
}
|
||||
let { left, top, width, height, expandBtnSize } = node
|
||||
const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
|
||||
if (!alwaysShowExpandBtn || notShowExpandBtn) {
|
||||
expandBtnSize = 0
|
||||
}
|
||||
let len = node.children.length
|
||||
if (node.isRoot) {
|
||||
// 当前节点是根节点
|
||||
let prevBother = node
|
||||
// 根节点的子节点是和根节点同一水平线排列
|
||||
node.children.forEach((item, index) => {
|
||||
let x1 = prevBother.left + prevBother.width
|
||||
let x2 = item.left
|
||||
let y = node.top + node.height / 2
|
||||
let path = `M ${x1},${y} L ${x2},${y}`
|
||||
this.setLineStyle(style, lines[index], path, item)
|
||||
prevBother = item
|
||||
})
|
||||
} else {
|
||||
// 当前节点为非根节点
|
||||
let maxy = -Infinity
|
||||
let miny = Infinity
|
||||
let x = node.left + node.width * 0.3
|
||||
node.children.forEach((item, index) => {
|
||||
let y = item.top + item.height / 2
|
||||
if (y > maxy) {
|
||||
maxy = y
|
||||
}
|
||||
if (y < miny) {
|
||||
miny = y
|
||||
}
|
||||
// 水平线
|
||||
let path = `M ${x},${y} L ${item.left},${y}`
|
||||
this.setLineStyle(style, lines[index], path, item)
|
||||
})
|
||||
// 竖线
|
||||
if (len > 0) {
|
||||
let line = this.lineDraw.path()
|
||||
expandBtnSize = len > 0 ? expandBtnSize : 0
|
||||
if (
|
||||
node.parent &&
|
||||
node.parent.isRoot &&
|
||||
node.dir === CONSTANTS.LAYOUT_GROW_DIR.TOP
|
||||
) {
|
||||
line.plot(this.transformPath(`M ${x},${top} L ${x},${miny}`))
|
||||
} else {
|
||||
line.plot(
|
||||
this.transformPath(
|
||||
`M ${x},${top + height + expandBtnSize} L ${x},${maxy}`
|
||||
)
|
||||
)
|
||||
}
|
||||
node.style.line(line)
|
||||
node._lines.push(line)
|
||||
style && style(line, node)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 渲染按钮
|
||||
renderExpandBtn(node, btn) {
|
||||
let { width, height, expandBtnSize, isRoot } = node
|
||||
if (!isRoot) {
|
||||
let { translateX, translateY } = btn.transform()
|
||||
if (
|
||||
node.parent &&
|
||||
node.parent.isRoot &&
|
||||
node.dir === CONSTANTS.LAYOUT_GROW_DIR.TOP
|
||||
) {
|
||||
btn.translate(
|
||||
width * 0.3 - expandBtnSize / 2 - translateX,
|
||||
-expandBtnSize / 2 - translateY
|
||||
)
|
||||
} else {
|
||||
btn.translate(
|
||||
width * 0.3 - expandBtnSize / 2 - translateX,
|
||||
height + expandBtnSize / 2 - translateY
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 创建概要节点
|
||||
renderGeneralization(list) {
|
||||
list.forEach(item => {
|
||||
let {
|
||||
top,
|
||||
bottom,
|
||||
right,
|
||||
generalizationLineMargin,
|
||||
generalizationNodeMargin
|
||||
} = this.getNodeGeneralizationRenderBoundaries(item, 'h')
|
||||
let x1 = right + generalizationLineMargin
|
||||
let y1 = top
|
||||
let x2 = right + generalizationLineMargin
|
||||
let y2 = bottom
|
||||
let cx = x1 + 20
|
||||
let cy = y1 + (y2 - y1) / 2
|
||||
let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
|
||||
item.generalizationLine.plot(this.transformPath(path))
|
||||
item.generalizationNode.left = right + generalizationNodeMargin
|
||||
item.generalizationNode.top =
|
||||
top + (bottom - top - item.generalizationNode.height) / 2
|
||||
})
|
||||
}
|
||||
|
||||
// 渲染展开收起按钮的隐藏占位元素
|
||||
renderExpandBtnRect(rect, expandBtnSize, width, height, node) {
|
||||
if (this.layout === CONSTANTS.LAYOUT.TIMELINE) {
|
||||
rect.size(width, expandBtnSize).x(0).y(height)
|
||||
} else {
|
||||
let dir = ''
|
||||
if (node.dir === CONSTANTS.LAYOUT_GROW_DIR.TOP) {
|
||||
dir =
|
||||
node.layerIndex === 1
|
||||
? CONSTANTS.LAYOUT_GROW_DIR.TOP
|
||||
: CONSTANTS.LAYOUT_GROW_DIR.BOTTOM
|
||||
} else {
|
||||
dir = CONSTANTS.LAYOUT_GROW_DIR.BOTTOM
|
||||
}
|
||||
if (dir === CONSTANTS.LAYOUT_GROW_DIR.TOP) {
|
||||
rect.size(width, expandBtnSize).x(0).y(-expandBtnSize)
|
||||
} else {
|
||||
rect.size(width, expandBtnSize).x(0).y(height)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default Timeline
|
||||
@@ -0,0 +1,437 @@
|
||||
import Base from './Base'
|
||||
import { walk, asyncRun, getNodeIndexInNodeList } from '../utils'
|
||||
import { CONSTANTS } from '../constants/constant'
|
||||
|
||||
// 竖向时间轴
|
||||
class VerticalTimeline extends Base {
|
||||
// 构造函数
|
||||
constructor(opt = {}, layout) {
|
||||
super(opt)
|
||||
this.layout = layout
|
||||
}
|
||||
|
||||
// 布局
|
||||
doLayout(callback) {
|
||||
let task = [
|
||||
() => {
|
||||
this.computedBaseValue()
|
||||
},
|
||||
() => {
|
||||
this.computedTopValue()
|
||||
},
|
||||
() => {
|
||||
this.adjustLeftTopValue()
|
||||
},
|
||||
() => {
|
||||
callback(this.root)
|
||||
}
|
||||
]
|
||||
asyncRun(task)
|
||||
}
|
||||
|
||||
// 遍历数据创建节点、计算根节点的位置，计算根节点的子节点的top值
|
||||
computedBaseValue() {
|
||||
walk(
|
||||
this.renderer.renderTree,
|
||||
null,
|
||||
(cur, parent, isRoot, layerIndex, index, ancestors) => {
|
||||
let newNode = this.createNode(
|
||||
cur,
|
||||
parent,
|
||||
isRoot,
|
||||
layerIndex,
|
||||
index,
|
||||
ancestors
|
||||
)
|
||||
// 根节点定位在画布中心位置
|
||||
if (isRoot) {
|
||||
this.setNodeCenter(newNode)
|
||||
} else {
|
||||
// 非根节点
|
||||
// 节点生长方向
|
||||
// 三级及以下节点以上级为准
|
||||
if (parent._node.dir) {
|
||||
newNode.dir = parent._node.dir
|
||||
} else {
|
||||
if (this.layout === CONSTANTS.LAYOUT.VERTICAL_TIMELINE2) {
|
||||
newNode.dir = CONSTANTS.LAYOUT_GROW_DIR.LEFT
|
||||
} else if (this.layout === CONSTANTS.LAYOUT.VERTICAL_TIMELINE3) {
|
||||
newNode.dir = CONSTANTS.LAYOUT_GROW_DIR.RIGHT
|
||||
} else {
|
||||
newNode.dir =
|
||||
index % 2 === 0
|
||||
? CONSTANTS.LAYOUT_GROW_DIR.RIGHT
|
||||
: CONSTANTS.LAYOUT_GROW_DIR.LEFT
|
||||
}
|
||||
}
|
||||
// 定位二级节点的left
|
||||
if (parent._node.isRoot) {
|
||||
newNode.left =
|
||||
parent._node.left +
|
||||
(cur._node.width > parent._node.width
|
||||
? -(cur._node.width - parent._node.width) / 2
|
||||
: (parent._node.width - cur._node.width) / 2)
|
||||
} else {
|
||||
newNode.left =
|
||||
newNode.dir === CONSTANTS.LAYOUT_GROW_DIR.RIGHT
|
||||
? parent._node.left +
|
||||
parent._node.width +
|
||||
this.getMarginX(layerIndex)
|
||||
: parent._node.left -
|
||||
this.getMarginX(layerIndex) -
|
||||
newNode.width
|
||||
}
|
||||
}
|
||||
if (!cur.data.expand) {
|
||||
return true
|
||||
}
|
||||
},
|
||||
(cur, parent, isRoot, layerIndex) => {
|
||||
// 返回时计算节点的areaHeight，也就是子节点所占的高度之和，包括外边距
|
||||
if (isRoot) {
|
||||
return
|
||||
}
|
||||
let len = cur.data.expand === false ? 0 : cur._node.children.length
|
||||
cur._node.childrenAreaHeight = len
|
||||
? cur._node.children.reduce((h, item) => {
|
||||
return h + item.height
|
||||
}, 0) +
|
||||
(len + 1) * this.getMarginY(layerIndex + 1)
|
||||
: 0
|
||||
},
|
||||
true,
|
||||
0
|
||||
)
|
||||
}
|
||||
|
||||
// 遍历节点树计算节点的top
|
||||
computedTopValue() {
|
||||
walk(
|
||||
this.root,
|
||||
null,
|
||||
(node, parent, isRoot, layerIndex, index) => {
|
||||
if (node.getData('expand') && node.children && node.children.length) {
|
||||
let marginY = this.getMarginY(layerIndex + 1)
|
||||
// 定位二级节点的top
|
||||
if (isRoot) {
|
||||
let top = node.top + node.height
|
||||
let totalTop = top + marginY
|
||||
node.children.forEach(cur => {
|
||||
cur.top = totalTop
|
||||
totalTop += cur.height + marginY
|
||||
})
|
||||
} else {
|
||||
// 定位三级及以下节点的top
|
||||
let marginY = this.getMarginY(layerIndex + 1)
|
||||
let baseTop = node.top + node.height / 2 + marginY
|
||||
// 第一个子节点的top值 = 该节点中心的top值 - 子节点的高度之和的一半
|
||||
let totalTop = baseTop - node.childrenAreaHeight / 2
|
||||
node.children.forEach(cur => {
|
||||
cur.top = totalTop
|
||||
totalTop += cur.height + marginY
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
null,
|
||||
true
|
||||
)
|
||||
}
|
||||
|
||||
// 调整节点left、top
|
||||
adjustLeftTopValue() {
|
||||
walk(
|
||||
this.root,
|
||||
null,
|
||||
(node, parent, isRoot, layerIndex) => {
|
||||
if (!node.getData('expand')) {
|
||||
return
|
||||
}
|
||||
if (isRoot) return
|
||||
// 判断子节点所占的高度之和是否大于该节点自身，大于则需要调整位置
|
||||
let base = this.getMarginY(layerIndex + 1) * 2 + node.height
|
||||
let difference = node.childrenAreaHeight - base
|
||||
if (difference > 0) {
|
||||
this.updateBrothers(node, difference / 2)
|
||||
}
|
||||
},
|
||||
null,
|
||||
true
|
||||
)
|
||||
}
|
||||
|
||||
// 更新兄弟节点的top
|
||||
updateBrothers(node, addHeight) {
|
||||
if (node.parent) {
|
||||
let childrenList = node.parent.children
|
||||
let index = getNodeIndexInNodeList(node, childrenList)
|
||||
childrenList.forEach((item, _index) => {
|
||||
// 自定义节点位置
|
||||
if (item.hasCustomPosition()) return
|
||||
// 三级或三级以下节点自身位置不需要动
|
||||
if (!node.parent.isRoot && item.uid === node.uid) return
|
||||
let _offset = 0
|
||||
// 二级节点上面的兄弟节点不需要移动，自身需要往下移动
|
||||
if (node.parent.isRoot) {
|
||||
// 上面的节点不用移
|
||||
if (_index < index) {
|
||||
_offset = 0
|
||||
} else if (_index > index) {
|
||||
// 下面的节点往下移
|
||||
_offset = addHeight * 2
|
||||
} else {
|
||||
// 自身也要移动
|
||||
_offset = addHeight
|
||||
}
|
||||
} else {
|
||||
// 三级或三级以下节点两侧的兄弟节点向两侧移动
|
||||
// 上面的节点往上移
|
||||
if (_index < index) {
|
||||
_offset = -addHeight
|
||||
} else if (_index > index) {
|
||||
// 下面的节点往下移
|
||||
_offset = addHeight
|
||||
}
|
||||
}
|
||||
item.top += _offset
|
||||
// 同步更新子节点的位置
|
||||
if (item.children && item.children.length) {
|
||||
this.updateChildren(item.children, 'top', _offset)
|
||||
}
|
||||
})
|
||||
// 更新父节点的位置
|
||||
this.updateBrothers(node.parent, addHeight)
|
||||
}
|
||||
}
|
||||
|
||||
// 调整兄弟节点的top
|
||||
updateBrothersTop(node, addHeight) {
|
||||
if (node.parent && !node.parent.isRoot) {
|
||||
let childrenList = node.parent.children
|
||||
let index = getNodeIndexInNodeList(node, childrenList)
|
||||
childrenList.forEach((item, _index) => {
|
||||
if (item.hasCustomPosition()) {
|
||||
// 适配自定义位置
|
||||
return
|
||||
}
|
||||
let _offset = 0
|
||||
// 下面的节点往下移
|
||||
if (_index > index) {
|
||||
_offset = addHeight
|
||||
}
|
||||
item.top += _offset
|
||||
// 同步更新子节点的位置
|
||||
if (item.children && item.children.length) {
|
||||
this.updateChildren(item.children, 'top', _offset)
|
||||
}
|
||||
})
|
||||
// 更新父节点的位置
|
||||
this.updateBrothersTop(node.parent, addHeight)
|
||||
}
|
||||
}
|
||||
|
||||
// 绘制连线，连接该节点到其子节点
|
||||
renderLine(node, lines, style, lineStyle) {
|
||||
if (lineStyle === 'curve') {
|
||||
this.renderLineCurve(node, lines, style)
|
||||
} else if (lineStyle === 'direct') {
|
||||
this.renderLineDirect(node, lines, style)
|
||||
} else {
|
||||
this.renderLineStraight(node, lines, style)
|
||||
}
|
||||
}
|
||||
|
||||
// 直线连接
|
||||
renderLineStraight(node, lines, style) {
|
||||
if (node.children.length <= 0) {
|
||||
return []
|
||||
}
|
||||
let { expandBtnSize } = node
|
||||
const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
|
||||
if (!alwaysShowExpandBtn || notShowExpandBtn) {
|
||||
expandBtnSize = 0
|
||||
}
|
||||
if (node.isRoot) {
|
||||
// 当前节点是根节点
|
||||
let prevBother = node
|
||||
// 根节点的子节点是和根节点同一水平线排列
|
||||
node.children.forEach((item, index) => {
|
||||
let y1 = prevBother.top + prevBother.height
|
||||
let y2 = item.top
|
||||
let x = node.left + node.width / 2
|
||||
let path = `M ${x},${y1} L ${x},${y2}`
|
||||
this.setLineStyle(style, lines[index], path, item)
|
||||
prevBother = item
|
||||
})
|
||||
} else {
|
||||
// 当前节点为非根节点
|
||||
if (node.dir === CONSTANTS.LAYOUT_GROW_DIR.RIGHT) {
|
||||
let nodeRight = node.left + node.width
|
||||
let nodeYCenter = node.top + node.height / 2
|
||||
let marginX = this.getMarginX(node.layerIndex + 1)
|
||||
let offset = (marginX - expandBtnSize) * 0.6
|
||||
node.children.forEach((item, index) => {
|
||||
let itemLeft = item.left
|
||||
let itemYCenter = item.top + item.height / 2
|
||||
let path = this.createFoldLine([
|
||||
[nodeRight, nodeYCenter],
|
||||
[nodeRight + offset, nodeYCenter],
|
||||
[nodeRight + offset, itemYCenter],
|
||||
[itemLeft, itemYCenter]
|
||||
])
|
||||
this.setLineStyle(style, lines[index], path, item)
|
||||
})
|
||||
} else {
|
||||
let nodeLeft = node.left
|
||||
let nodeYCenter = node.top + node.height / 2
|
||||
let marginX = this.getMarginX(node.layerIndex + 1)
|
||||
let offset = (marginX - expandBtnSize) * 0.6
|
||||
node.children.forEach((item, index) => {
|
||||
let itemRight = item.left + item.width
|
||||
let itemYCenter = item.top + item.height / 2
|
||||
let path = this.createFoldLine([
|
||||
[nodeLeft, nodeYCenter],
|
||||
[nodeLeft - offset, nodeYCenter],
|
||||
[nodeLeft - offset, itemYCenter],
|
||||
[itemRight, itemYCenter]
|
||||
])
|
||||
this.setLineStyle(style, lines[index], path, item)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 直连
|
||||
renderLineDirect(node, lines, style) {
|
||||
if (node.children.length <= 0) {
|
||||
return []
|
||||
}
|
||||
let { left, top, width, height, expandBtnSize } = node
|
||||
const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
|
||||
if (!alwaysShowExpandBtn || notShowExpandBtn) {
|
||||
expandBtnSize = 0
|
||||
}
|
||||
node.children.forEach((item, index) => {
|
||||
if (node.isRoot) {
|
||||
let prevBother = node
|
||||
// 根节点的子节点是和根节点同一水平线排列
|
||||
node.children.forEach((item, index) => {
|
||||
let y1 = prevBother.top + prevBother.height
|
||||
let y2 = item.top
|
||||
let x = node.left + node.width / 2
|
||||
let path = `M ${x},${y1} L ${x},${y2}`
|
||||
this.setLineStyle(style, lines[index], path, item)
|
||||
prevBother = item
|
||||
})
|
||||
} else {
|
||||
let x1 =
|
||||
item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
|
||||
? left - expandBtnSize
|
||||
: left + width + expandBtnSize
|
||||
let y1 = top + height / 2
|
||||
let x2 =
|
||||
item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
|
||||
? item.left + item.width
|
||||
: item.left
|
||||
let y2 = item.top + item.height / 2
|
||||
let path = `M ${x1},${y1} L ${x2},${y2}`
|
||||
this.setLineStyle(style, lines[index], path, item)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 曲线风格连线
|
||||
renderLineCurve(node, lines, style) {
|
||||
if (node.children.length <= 0) {
|
||||
return []
|
||||
}
|
||||
let { left, top, width, height, expandBtnSize } = node
|
||||
const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
|
||||
if (!alwaysShowExpandBtn || notShowExpandBtn) {
|
||||
expandBtnSize = 0
|
||||
}
|
||||
node.children.forEach((item, index) => {
|
||||
if (node.isRoot) {
|
||||
let prevBother = node
|
||||
// 根节点的子节点是和根节点同一水平线排列
|
||||
node.children.forEach((item, index) => {
|
||||
let y1 = prevBother.top + prevBother.height
|
||||
let y2 = item.top
|
||||
let x = node.left + node.width / 2
|
||||
let path = `M ${x},${y1} L ${x},${y2}`
|
||||
this.setLineStyle(style, lines[index], path, item)
|
||||
prevBother = item
|
||||
})
|
||||
} else {
|
||||
let x1 =
|
||||
item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
|
||||
? left - expandBtnSize
|
||||
: left + width + expandBtnSize
|
||||
let y1 = top + height / 2
|
||||
let x2 =
|
||||
item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
|
||||
? item.left + item.width
|
||||
: item.left
|
||||
let y2 = item.top + item.height / 2
|
||||
let path = this.cubicBezierPath(x1, y1, x2, y2)
|
||||
this.setLineStyle(style, lines[index], path, item)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 渲染按钮
|
||||
renderExpandBtn(node, btn) {
|
||||
let { width, height, expandBtnSize, isRoot } = node
|
||||
if (!isRoot) {
|
||||
let { translateX, translateY } = btn.transform()
|
||||
if (node.dir === CONSTANTS.LAYOUT_GROW_DIR.RIGHT) {
|
||||
btn.translate(width - translateX, height / 2 - translateY)
|
||||
} else {
|
||||
btn.translate(-expandBtnSize - translateX, height / 2 - translateY)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 创建概要节点
|
||||
renderGeneralization(list) {
|
||||
list.forEach(item => {
|
||||
let isLeft = item.node.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
|
||||
let {
|
||||
top,
|
||||
bottom,
|
||||
left,
|
||||
right,
|
||||
generalizationLineMargin,
|
||||
generalizationNodeMargin
|
||||
} = this.getNodeGeneralizationRenderBoundaries(item, 'h')
|
||||
let x = isLeft
|
||||
? left - generalizationLineMargin
|
||||
: right + generalizationLineMargin
|
||||
let x1 = x
|
||||
let y1 = top
|
||||
let x2 = x
|
||||
let y2 = bottom
|
||||
let cx = x1 + (isLeft ? -20 : 20)
|
||||
let cy = y1 + (y2 - y1) / 2
|
||||
let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
|
||||
item.generalizationLine.plot(this.transformPath(path))
|
||||
item.generalizationNode.left =
|
||||
x +
|
||||
(isLeft ? -generalizationNodeMargin : generalizationNodeMargin) -
|
||||
(isLeft ? item.generalizationNode.width : 0)
|
||||
item.generalizationNode.top =
|
||||
top + (bottom - top - item.generalizationNode.height) / 2
|
||||
})
|
||||
}
|
||||
|
||||
// 渲染展开收起按钮的隐藏占位元素
|
||||
renderExpandBtnRect(rect, expandBtnSize, width, height, node) {
|
||||
if (node.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT) {
|
||||
rect.size(expandBtnSize, height).x(-expandBtnSize).y(0)
|
||||
} else {
|
||||
rect.size(expandBtnSize, height).x(width).y(0)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default VerticalTimeline
|
||||
@@ -0,0 +1,248 @@
|
||||
import { degToRad } from '../utils/'
|
||||
|
||||
export default {
|
||||
top: {
|
||||
renderExpandBtn({
|
||||
node,
|
||||
btn,
|
||||
expandBtnSize,
|
||||
translateX,
|
||||
translateY,
|
||||
width,
|
||||
height
|
||||
}) {
|
||||
if (node.parent && node.parent.isRoot) {
|
||||
btn.translate(
|
||||
width * 0.3 - expandBtnSize / 2 - translateX,
|
||||
-expandBtnSize / 2 - translateY
|
||||
)
|
||||
} else {
|
||||
btn.translate(
|
||||
width * 0.3 - expandBtnSize / 2 - translateX,
|
||||
height + expandBtnSize / 2 - translateY
|
||||
)
|
||||
}
|
||||
},
|
||||
renderLine({
|
||||
node,
|
||||
line,
|
||||
top,
|
||||
x,
|
||||
lineLength,
|
||||
height,
|
||||
expandBtnSize,
|
||||
maxy,
|
||||
ctx
|
||||
}) {
|
||||
if (node.parent && node.parent.isRoot) {
|
||||
line.plot(
|
||||
ctx.transformPath(
|
||||
`M ${x},${top} L ${x + lineLength},${
|
||||
top - Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg)) * lineLength
|
||||
}`
|
||||
)
|
||||
)
|
||||
} else {
|
||||
line.plot(
|
||||
ctx.transformPath(
|
||||
`M ${x},${top + height + expandBtnSize} L ${x},${maxy}`
|
||||
)
|
||||
)
|
||||
}
|
||||
},
|
||||
computedLeftTopValue({ layerIndex, node, ctx }) {
|
||||
if (layerIndex >= 1 && node.children) {
|
||||
// 遍历三级及以下节点的子节点
|
||||
let marginY = ctx.getMarginY(layerIndex + 1)
|
||||
let startLeft = node.left + node.width * ctx.childIndent
|
||||
let totalTop =
|
||||
node.top +
|
||||
node.height +
|
||||
(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
|
||||
})
|
||||
}
|
||||
},
|
||||
adjustLeftTopValueBefore({ node, parent, ctx, layerIndex }) {
|
||||
// 调整top
|
||||
let len = node.children.length
|
||||
let marginY = ctx.getMarginY(layerIndex + 1)
|
||||
// 调整三级及以下节点的top
|
||||
if (parent && !parent.isRoot && len > 0) {
|
||||
let totalHeight = node.children.reduce((h, item) => {
|
||||
return (
|
||||
h +
|
||||
item.height +
|
||||
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) +
|
||||
marginY
|
||||
)
|
||||
}, 0)
|
||||
ctx.updateBrothersTop(node, totalHeight)
|
||||
}
|
||||
},
|
||||
adjustLeftTopValueAfter({ parent, node, ctx }) {
|
||||
// 将二级节点的子节点移到上方
|
||||
if (parent && parent.isRoot) {
|
||||
// 遍历二级节点的子节点
|
||||
let marginY = ctx.getMarginY(node.layerIndex + 1)
|
||||
let totalHeight = node.expandBtnSize + marginY
|
||||
node.children.forEach(item => {
|
||||
// 调整top
|
||||
let nodeTotalHeight = ctx.getNodeAreaHeight(item)
|
||||
let _top = item.top
|
||||
let _left = item.left
|
||||
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))
|
||||
totalHeight += nodeTotalHeight
|
||||
// 同步更新后代节点
|
||||
ctx.updateChildrenPro(item.children, {
|
||||
top: item.top - _top,
|
||||
left: item.left - _left
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
bottom: {
|
||||
renderExpandBtn({
|
||||
node,
|
||||
btn,
|
||||
expandBtnSize,
|
||||
translateX,
|
||||
translateY,
|
||||
width,
|
||||
height
|
||||
}) {
|
||||
if (node.parent && node.parent.isRoot) {
|
||||
btn.translate(
|
||||
width * 0.3 - expandBtnSize / 2 - translateX,
|
||||
height + expandBtnSize / 2 - translateY
|
||||
)
|
||||
} else {
|
||||
btn.translate(
|
||||
width * 0.3 - expandBtnSize / 2 - translateX,
|
||||
-expandBtnSize / 2 - translateY
|
||||
)
|
||||
}
|
||||
},
|
||||
renderLine({ node, line, top, x, lineLength, height, miny, ctx }) {
|
||||
if (node.parent && node.parent.isRoot) {
|
||||
line.plot(
|
||||
ctx.transformPath(
|
||||
`M ${x},${top + height} L ${x + lineLength},${
|
||||
top +
|
||||
height +
|
||||
Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg)) * lineLength
|
||||
}`
|
||||
)
|
||||
)
|
||||
} else {
|
||||
line.plot(ctx.transformPath(`M ${x},${top} L ${x},${miny}`))
|
||||
}
|
||||
},
|
||||
computedLeftTopValue({ layerIndex, node, ctx }) {
|
||||
let marginY = ctx.getMarginY(layerIndex + 1)
|
||||
if (layerIndex === 1 && node.children) {
|
||||
// 遍历二级节点的子节点
|
||||
let startLeft = node.left + node.width * ctx.childIndent
|
||||
let totalTop =
|
||||
node.top +
|
||||
node.height +
|
||||
(ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) +
|
||||
marginY
|
||||
|
||||
node.children.forEach(item => {
|
||||
item.left = startLeft
|
||||
item.top =
|
||||
totalTop +
|
||||
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
|
||||
totalTop +=
|
||||
item.height +
|
||||
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) +
|
||||
marginY
|
||||
})
|
||||
}
|
||||
if (layerIndex > 1 && node.children) {
|
||||
// 遍历三级及以下节点的子节点
|
||||
let startLeft = node.left + node.width * ctx.childIndent
|
||||
let totalTop =
|
||||
node.top -
|
||||
(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
|
||||
})
|
||||
}
|
||||
},
|
||||
adjustLeftTopValueBefore({ node, ctx, layerIndex }) {
|
||||
// 调整top
|
||||
let marginY = ctx.getMarginY(layerIndex + 1)
|
||||
let len = node.children.length
|
||||
if (layerIndex > 2 && len > 0) {
|
||||
let totalHeight = node.children.reduce((h, item) => {
|
||||
return (
|
||||
h +
|
||||
item.height +
|
||||
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) +
|
||||
marginY
|
||||
)
|
||||
}, 0)
|
||||
ctx.updateBrothersTop(node, -totalHeight)
|
||||
}
|
||||
},
|
||||
adjustLeftTopValueAfter({ parent, node, ctx }) {
|
||||
// 将二级节点的子节点移到上方
|
||||
if (parent && parent.isRoot) {
|
||||
// 遍历二级节点的子节点
|
||||
let marginY = ctx.getMarginY(node.layerIndex + 1)
|
||||
let totalHeight = 0
|
||||
let totalHeight2 = node.expandBtnSize
|
||||
node.children.forEach(item => {
|
||||
// 调整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 _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))
|
||||
totalHeight += offset
|
||||
totalHeight2 += nodeTotalHeight
|
||||
// 同步更新后代节点
|
||||
ctx.updateChildrenPro(item.children, {
|
||||
top: _top,
|
||||
left: item.left - _left
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
import { transformToMarkdown } from './toMarkdown'
|
||||
import { transformMarkdownTo } from './markdownTo'
|
||||
|
||||
export default {
|
||||
transformToMarkdown,
|
||||
transformMarkdownTo
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
import { fromMarkdown } from 'mdast-util-from-markdown'
|
||||
|
||||
const getNodeText = node => {
|
||||
if (node.type === 'list') return ''
|
||||
let textStr = ''
|
||||
|
||||
;(node.children || []).forEach(item => {
|
||||
if (['inlineCode', 'text'].includes(item.type)) {
|
||||
textStr += item.value || ''
|
||||
} else {
|
||||
textStr += getNodeText(item)
|
||||
}
|
||||
})
|
||||
|
||||
return textStr
|
||||
}
|
||||
|
||||
// 处理list的情况
|
||||
const handleList = node => {
|
||||
let list = []
|
||||
let walk = (arr, newArr) => {
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
let cur = arr[i]
|
||||
let node = {}
|
||||
node.data = {
|
||||
// 节点内容
|
||||
text: getNodeText(cur)
|
||||
}
|
||||
node.children = []
|
||||
newArr.push(node)
|
||||
if (cur.children.length > 1) {
|
||||
for (let j = 1; j < cur.children.length; j++) {
|
||||
let cur2 = cur.children[j]
|
||||
if (cur2.type === 'list') {
|
||||
walk(cur2.children, node.children)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
walk(node.children, list)
|
||||
return list
|
||||
}
|
||||
|
||||
// 将markdown转换成节点树
|
||||
export const transformMarkdownTo = md => {
|
||||
const tree = fromMarkdown(md)
|
||||
let root = {
|
||||
children: []
|
||||
}
|
||||
let childrenQueue = [root.children]
|
||||
let currentChildren = root.children
|
||||
let depthQueue = [-1]
|
||||
let currentDepth = -1
|
||||
for (let i = 0; i < tree.children.length; i++) {
|
||||
let cur = tree.children[i]
|
||||
if (cur.type === 'heading') {
|
||||
if (!cur.children[0]) continue
|
||||
// 创建新节点
|
||||
let node = {}
|
||||
node.data = {
|
||||
// 节点内容
|
||||
text: getNodeText(cur)
|
||||
}
|
||||
node.children = []
|
||||
// 如果当前的层级大于上一个节点的层级，那么是其子节点
|
||||
if (cur.depth > currentDepth) {
|
||||
// 添加到上一个节点的子节点列表里
|
||||
currentChildren.push(node)
|
||||
// 更新当前栈和数据
|
||||
childrenQueue.push(node.children)
|
||||
currentChildren = node.children
|
||||
depthQueue.push(cur.depth)
|
||||
currentDepth = cur.depth
|
||||
} else if (cur.depth === currentDepth) {
|
||||
// 如果当前层级等于上一个节点的层级，说明它们是同级节点
|
||||
// 将上一个节点出栈
|
||||
childrenQueue.pop()
|
||||
currentChildren = childrenQueue[childrenQueue.length - 1]
|
||||
depthQueue.pop()
|
||||
currentDepth = depthQueue[depthQueue.length - 1]
|
||||
// 追加到上上个节点的子节点列表里
|
||||
currentChildren.push(node)
|
||||
// 更新当前栈和数据
|
||||
childrenQueue.push(node.children)
|
||||
currentChildren = node.children
|
||||
depthQueue.push(cur.depth)
|
||||
currentDepth = cur.depth
|
||||
} else {
|
||||
// 如果当前层级小于上一个节点的层级，那么一直出栈，直到遇到比当前层级小的节点
|
||||
while (depthQueue.length) {
|
||||
childrenQueue.pop()
|
||||
currentChildren = childrenQueue[childrenQueue.length - 1]
|
||||
depthQueue.pop()
|
||||
currentDepth = depthQueue[depthQueue.length - 1]
|
||||
if (currentDepth < cur.depth) {
|
||||
// 追加到该节点的子节点列表里
|
||||
currentChildren.push(node)
|
||||
// 更新当前栈和数据
|
||||
childrenQueue.push(node.children)
|
||||
currentChildren = node.children
|
||||
depthQueue.push(cur.depth)
|
||||
currentDepth = cur.depth
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (cur.type === 'list') {
|
||||
currentChildren.push(...handleList(cur))
|
||||
}
|
||||
}
|
||||
return root.children[0]
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import { walk, nodeRichTextToTextWithWrap } from '../utils'
|
||||
|
||||
const getNodeText = data => {
|
||||
return data.richText ? nodeRichTextToTextWithWrap(data.text) : data.text
|
||||
}
|
||||
|
||||
const getTitleMark = level => {
|
||||
return new Array(level).fill('#').join('')
|
||||
}
|
||||
|
||||
const getIndentMark = level => {
|
||||
return new Array(level - 6).fill(' ').join('') + '*'
|
||||
}
|
||||
|
||||
// 转换成markdown格式
|
||||
export const transformToMarkdown = root => {
|
||||
let content = ''
|
||||
walk(
|
||||
root,
|
||||
null,
|
||||
(node, parent, isRoot, layerIndex) => {
|
||||
const level = layerIndex + 1
|
||||
if (level <= 6) {
|
||||
content += getTitleMark(level)
|
||||
} else {
|
||||
content += getIndentMark(level)
|
||||
}
|
||||
content += ' ' + getNodeText(node.data)
|
||||
// 概要
|
||||
const generalization = node.data.generalization
|
||||
if (Array.isArray(generalization)) {
|
||||
content += generalization.map(item => {
|
||||
return ` [${getNodeText(item)}]`
|
||||
})
|
||||
} else if (generalization && generalization.text) {
|
||||
const generalizationText = getNodeText(generalization)
|
||||
content += ` [${generalizationText}]`
|
||||
}
|
||||
content += '\n\n'
|
||||
// 备注
|
||||
if (node.data.note) {
|
||||
content += node.data.note + '\n\n'
|
||||
}
|
||||
},
|
||||
() => {},
|
||||
true
|
||||
)
|
||||
return content
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
import { walk, nodeRichTextToTextWithWrap } from '../utils'
|
||||
|
||||
const getNodeText = data => {
|
||||
return data.richText ? nodeRichTextToTextWithWrap(data.text) : data.text
|
||||
}
|
||||
|
||||
const getIndent = level => {
|
||||
return new Array(level).fill(' ').join('')
|
||||
}
|
||||
|
||||
// 转换成txt格式
|
||||
export const transformToTxt = root => {
|
||||
let content = ''
|
||||
walk(
|
||||
root,
|
||||
null,
|
||||
(node, parent, isRoot, layerIndex) => {
|
||||
content += getIndent(layerIndex)
|
||||
content += ' ' + getNodeText(node.data)
|
||||
// 概要
|
||||
const generalization = node.data.generalization
|
||||
if (Array.isArray(generalization)) {
|
||||
content += generalization.map(item => {
|
||||
return ` [${getNodeText(item)}]`
|
||||
})
|
||||
} else if (generalization && generalization.text) {
|
||||
content += ` [${getNodeText(generalization)}]`
|
||||
}
|
||||
content += '\n\n'
|
||||
},
|
||||
() => {},
|
||||
true
|
||||
)
|
||||
return content
|
||||
}
|
||||
@@ -0,0 +1,337 @@
|
||||
import JSZip from 'jszip'
|
||||
import xmlConvert from 'xml-js'
|
||||
import { getTextFromHtml, isUndef } from '../utils/index'
|
||||
import {
|
||||
getSummaryText,
|
||||
getSummaryText2,
|
||||
getRoot,
|
||||
getItemByName,
|
||||
getElementsByType,
|
||||
addSummaryData,
|
||||
handleNodeImageFromXmind,
|
||||
handleNodeImageToXmind,
|
||||
getXmindContentXmlData,
|
||||
parseNodeGeneralizationToXmind
|
||||
} from '../utils/xmind'
|
||||
|
||||
// 解析.xmind文件
|
||||
const parseXmindFile = (file, handleMultiCanvas) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
JSZip.loadAsync(file).then(
|
||||
async zip => {
|
||||
try {
|
||||
let content = ''
|
||||
let jsonFile = zip.files['content.json']
|
||||
let xmlFile = zip.files['content.xml'] || zip.files['/content.xml']
|
||||
if (jsonFile) {
|
||||
let json = await jsonFile.async('string')
|
||||
content = await transformXmind(json, zip.files, handleMultiCanvas)
|
||||
} else if (xmlFile) {
|
||||
let xml = await xmlFile.async('string')
|
||||
let json = xmlConvert.xml2json(xml)
|
||||
content = transformOldXmind(json)
|
||||
}
|
||||
if (content) {
|
||||
resolve(content)
|
||||
} else {
|
||||
reject(new Error('解析失败'))
|
||||
}
|
||||
} catch (error) {
|
||||
reject(error)
|
||||
}
|
||||
},
|
||||
e => {
|
||||
reject(e)
|
||||
}
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
// 转换xmind数据
|
||||
const transformXmind = async (content, files, handleMultiCanvas) => {
|
||||
content = JSON.parse(content)
|
||||
let data = null
|
||||
if (content.length > 1 && typeof handleMultiCanvas === 'function') {
|
||||
data = await handleMultiCanvas(content)
|
||||
}
|
||||
if (!data) {
|
||||
data = content[0]
|
||||
}
|
||||
const nodeTree = data.rootTopic
|
||||
const newTree = {}
|
||||
const waitLoadImageList = []
|
||||
const walk = async (node, newNode) => {
|
||||
newNode.data = {
|
||||
// 节点内容
|
||||
text: isUndef(node.title) ? '' : node.title
|
||||
}
|
||||
// 节点备注
|
||||
if (node.notes) {
|
||||
const notesData = node.notes.realHTML || node.notes.plain
|
||||
newNode.data.note = notesData ? notesData.content || '' : ''
|
||||
}
|
||||
// 超链接
|
||||
if (node.href && /^https?:\/\//.test(node.href)) {
|
||||
newNode.data.hyperlink = node.href
|
||||
}
|
||||
// 标签
|
||||
if (node.labels && node.labels.length > 0) {
|
||||
newNode.data.tag = node.labels
|
||||
}
|
||||
// 图片
|
||||
handleNodeImageFromXmind(node, newNode, waitLoadImageList, files)
|
||||
// 概要
|
||||
const selfSummary = []
|
||||
const childrenSummary = []
|
||||
if (newNode._summary) {
|
||||
selfSummary.push(newNode._summary)
|
||||
}
|
||||
if (Array.isArray(node.summaries) && node.summaries.length > 0) {
|
||||
node.summaries.forEach(item => {
|
||||
addSummaryData(
|
||||
selfSummary,
|
||||
childrenSummary,
|
||||
() => {
|
||||
return getSummaryText(node, item.topicId)
|
||||
},
|
||||
item.range
|
||||
)
|
||||
})
|
||||
}
|
||||
newNode.data.generalization = selfSummary
|
||||
// 子节点
|
||||
newNode.children = []
|
||||
if (
|
||||
node.children &&
|
||||
node.children.attached &&
|
||||
node.children.attached.length > 0
|
||||
) {
|
||||
node.children.attached.forEach((item, index) => {
|
||||
const newChild = {}
|
||||
newNode.children.push(newChild)
|
||||
if (childrenSummary[index]) {
|
||||
newChild._summary = childrenSummary[index]
|
||||
}
|
||||
walk(item, newChild)
|
||||
})
|
||||
}
|
||||
}
|
||||
walk(nodeTree, newTree)
|
||||
await Promise.all(waitLoadImageList)
|
||||
return newTree
|
||||
}
|
||||
|
||||
// 转换旧版xmind数据，xmind8
|
||||
const transformOldXmind = content => {
|
||||
const data = JSON.parse(content)
|
||||
const elements = data.elements
|
||||
const root = getRoot(elements)
|
||||
const newTree = {}
|
||||
const walk = (node, newNode) => {
|
||||
const nodeElements = node.elements
|
||||
let nodeTitle = getItemByName(nodeElements, 'title')
|
||||
nodeTitle = nodeTitle && nodeTitle.elements && nodeTitle.elements[0].text
|
||||
// 节点内容
|
||||
newNode.data = {
|
||||
text: isUndef(nodeTitle) ? '' : nodeTitle
|
||||
}
|
||||
// 节点备注
|
||||
try {
|
||||
const notesElement = getItemByName(nodeElements, 'notes')
|
||||
if (notesElement) {
|
||||
newNode.data.note =
|
||||
notesElement.elements[0].elements[0].elements[0].text
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
// 超链接
|
||||
try {
|
||||
if (
|
||||
node.attributes &&
|
||||
node.attributes['xlink:href'] &&
|
||||
/^https?:\/\//.test(node.attributes['xlink:href'])
|
||||
) {
|
||||
newNode.data.hyperlink = node.attributes['xlink:href']
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
// 标签
|
||||
try {
|
||||
const labelsElement = getItemByName(nodeElements, 'labels')
|
||||
if (labelsElement) {
|
||||
newNode.data.tag = labelsElement.elements.map(item => {
|
||||
return item.elements[0].text
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
const childrenItem = getItemByName(nodeElements, 'children')
|
||||
// 概要
|
||||
const selfSummary = []
|
||||
const childrenSummary = []
|
||||
try {
|
||||
if (newNode._summary) {
|
||||
selfSummary.push(newNode._summary)
|
||||
}
|
||||
const summariesItem = getItemByName(nodeElements, 'summaries')
|
||||
if (
|
||||
summariesItem &&
|
||||
Array.isArray(summariesItem.elements) &&
|
||||
summariesItem.elements.length > 0
|
||||
) {
|
||||
summariesItem.elements.forEach(item => {
|
||||
addSummaryData(
|
||||
selfSummary,
|
||||
childrenSummary,
|
||||
() => {
|
||||
return getSummaryText2(childrenItem, item.attributes['topic-id'])
|
||||
},
|
||||
item.attributes.range
|
||||
)
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
newNode.data.generalization = selfSummary
|
||||
// 子节点
|
||||
newNode.children = []
|
||||
if (
|
||||
childrenItem &&
|
||||
childrenItem.elements &&
|
||||
childrenItem.elements.length > 0
|
||||
) {
|
||||
const children = getElementsByType(childrenItem.elements, 'attached')
|
||||
;(children || []).forEach((item, index) => {
|
||||
const newChild = {}
|
||||
newNode.children.push(newChild)
|
||||
if (childrenSummary[index]) {
|
||||
newChild._summary = childrenSummary[index]
|
||||
}
|
||||
walk(item, newChild)
|
||||
})
|
||||
}
|
||||
}
|
||||
walk(root, newTree)
|
||||
return newTree
|
||||
}
|
||||
|
||||
// 数据转换为xmind文件
|
||||
// 直接转换为最新版本的xmind文件 2023.09.11172
|
||||
const transformToXmind = async (data, name) => {
|
||||
const id = 'simpleMindMap_' + Date.now()
|
||||
const imageList = []
|
||||
// 转换核心数据
|
||||
let newTree = {}
|
||||
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: {
|
||||
attached: []
|
||||
}
|
||||
}
|
||||
// 备注
|
||||
if (node.data.note !== undefined) {
|
||||
newData.notes = {
|
||||
realHTML: {
|
||||
content: node.data.note
|
||||
},
|
||||
plain: {
|
||||
content: node.data.note
|
||||
}
|
||||
}
|
||||
}
|
||||
// 超链接
|
||||
if (node.data.hyperlink !== undefined) {
|
||||
newData.href = node.data.hyperlink
|
||||
}
|
||||
// 标签
|
||||
if (node.data.tag !== undefined) {
|
||||
newData.labels = (node.data.tag || []).map(item => {
|
||||
return typeof item === 'object' && item !== null ? item.text : item
|
||||
})
|
||||
}
|
||||
// 图片
|
||||
handleNodeImageToXmind(node, newNode, waitLoadImageList, imageList)
|
||||
// 样式
|
||||
// 暂时不考虑样式
|
||||
if (isRoot) {
|
||||
newData.class = 'topic'
|
||||
newNode.id = id
|
||||
newNode.class = 'sheet'
|
||||
newNode.title = name
|
||||
newNode.extensions = []
|
||||
newNode.topicPositioning = 'fixed'
|
||||
newNode.topicOverlapping = 'overlap'
|
||||
newNode.coreVersion = '2.100.0'
|
||||
newNode.rootTopic = newData
|
||||
} else {
|
||||
Object.keys(newData).forEach(key => {
|
||||
newNode[key] = newData[key]
|
||||
})
|
||||
}
|
||||
// 概要
|
||||
const { summary, summaries } = parseNodeGeneralizationToXmind(node)
|
||||
if (isRoot) {
|
||||
if (summaries.length > 0) {
|
||||
newNode.rootTopic.children.summary = summary
|
||||
newNode.rootTopic.summaries = summaries
|
||||
}
|
||||
} else {
|
||||
if (summaries.length > 0) {
|
||||
newNode.children.summary = summary
|
||||
newNode.summaries = summaries
|
||||
}
|
||||
}
|
||||
// 子节点
|
||||
if (node.children && node.children.length > 0) {
|
||||
node.children.forEach(child => {
|
||||
let newChild = {}
|
||||
walk(child, newChild)
|
||||
newData.children.attached.push(newChild)
|
||||
})
|
||||
}
|
||||
}
|
||||
walk(data, newTree, true)
|
||||
await Promise.all(waitLoadImageList)
|
||||
const contentData = [newTree]
|
||||
// 创建压缩包
|
||||
const zip = new JSZip()
|
||||
zip.file('content.json', JSON.stringify(contentData))
|
||||
zip.file(
|
||||
'metadata.json',
|
||||
`{"modifier":"","dataStructureVersion":"2","creator":{"name":"mind-map"},"layoutEngineVersion":"3","activeSheetId":"${id}"}`
|
||||
)
|
||||
zip.file('content.xml', getXmindContentXmlData())
|
||||
const manifestData = {
|
||||
'file-entries': {
|
||||
'content.json': {},
|
||||
'metadata.json': {},
|
||||
'Thumbnails/thumbnail.png': {}
|
||||
}
|
||||
}
|
||||
// 图片
|
||||
if (imageList.length > 0) {
|
||||
imageList.forEach(item => {
|
||||
manifestData['file-entries']['resources/' + item.name] = {}
|
||||
const img = zip.folder('resources')
|
||||
img.file(item.name, item.data, { base64: true })
|
||||
})
|
||||
}
|
||||
zip.file('manifest.json', JSON.stringify(manifestData))
|
||||
const zipData = await zip.generateAsync({ type: 'blob' })
|
||||
return zipData
|
||||
}
|
||||
|
||||
export default {
|
||||
parseXmindFile,
|
||||
transformXmind,
|
||||
transformOldXmind,
|
||||
transformToXmind
|
||||
}
|
||||
@@ -0,0 +1,765 @@
|
||||
import { walk, bfsWalk, throttle } from '../utils'
|
||||
import { v4 as uuid } from 'uuid'
|
||||
import {
|
||||
getAssociativeLineTargetIndex,
|
||||
computeCubicBezierPathPoints,
|
||||
cubicBezierPath,
|
||||
getNodePoint,
|
||||
computeNodePoints,
|
||||
getNodeLinePath
|
||||
} from './associativeLine/associativeLineUtils'
|
||||
import associativeLineControlsMethods from './associativeLine/associativeLineControls'
|
||||
import associativeLineTextMethods from './associativeLine/associativeLineText'
|
||||
|
||||
const styleProps = [
|
||||
'associativeLineWidth',
|
||||
'associativeLineColor',
|
||||
'associativeLineActiveWidth',
|
||||
'associativeLineActiveColor',
|
||||
'associativeLineDasharray',
|
||||
'associativeLineTextColor',
|
||||
'associativeLineTextFontSize',
|
||||
'associativeLineTextLineHeight',
|
||||
'associativeLineTextFontFamily'
|
||||
]
|
||||
|
||||
const ASSOCIATIVE_LINE_TEXT_EDIT_WRAP = 'associative-line-text-edit-warp'
|
||||
|
||||
// 关联线插件
|
||||
class AssociativeLine {
|
||||
constructor(opt = {}) {
|
||||
this.mindMap = opt.mindMap
|
||||
this.associativeLineDraw = this.mindMap.associativeLineDraw
|
||||
// 本次不要重新渲染连线
|
||||
this.isNotRenderAllLines = false
|
||||
// 当前所有连接线
|
||||
this.lineList = []
|
||||
// 当前激活的连接线
|
||||
this.activeLine = null
|
||||
// 当前正在创建连接线
|
||||
this.isCreatingLine = false // 是否正在创建连接线中
|
||||
this.creatingStartNode = null // 起始节点
|
||||
this.creatingLine = null // 创建过程中的连接线
|
||||
this.overlapNode = null // 创建过程中的目标节点
|
||||
// 是否有节点正在被拖拽
|
||||
this.isNodeDragging = false
|
||||
// 控制点
|
||||
this.controlLine1 = null
|
||||
this.controlLine2 = null
|
||||
this.controlPoint1 = null
|
||||
this.controlPoint2 = null
|
||||
this.controlPointDiameter = 10
|
||||
this.isControlPointMousedown = false
|
||||
this.mousedownControlPointKey = ''
|
||||
this.controlPointMousemoveState = {
|
||||
pos: null,
|
||||
startPoint: null,
|
||||
endPoint: null,
|
||||
targetIndex: ''
|
||||
}
|
||||
// 节流一下，不然很卡
|
||||
this.checkOverlapNode = throttle(this.checkOverlapNode, 100, this)
|
||||
// 控制点相关方法
|
||||
Object.keys(associativeLineControlsMethods).forEach(item => {
|
||||
this[item] = associativeLineControlsMethods[item].bind(this)
|
||||
})
|
||||
// 关联线文字相关方法
|
||||
this.showTextEdit = false
|
||||
Object.keys(associativeLineTextMethods).forEach(item => {
|
||||
this[item] = associativeLineTextMethods[item].bind(this)
|
||||
})
|
||||
this.mindMap.addEditNodeClass(ASSOCIATIVE_LINE_TEXT_EDIT_WRAP)
|
||||
this.bindEvent()
|
||||
}
|
||||
|
||||
// 监听事件
|
||||
bindEvent() {
|
||||
this.renderAllLines = this.renderAllLines.bind(this)
|
||||
this.onDrawClick = this.onDrawClick.bind(this)
|
||||
this.onNodeClick = this.onNodeClick.bind(this)
|
||||
this.removeLine = this.removeLine.bind(this)
|
||||
this.addLine = this.addLine.bind(this)
|
||||
this.onMousemove = this.onMousemove.bind(this)
|
||||
this.onNodeDragging = this.onNodeDragging.bind(this)
|
||||
this.onNodeDragend = this.onNodeDragend.bind(this)
|
||||
this.onControlPointMouseup = this.onControlPointMouseup.bind(this)
|
||||
this.onBeforeDestroy = this.onBeforeDestroy.bind(this)
|
||||
|
||||
// 节点树渲染完毕后渲染连接线
|
||||
this.mindMap.on('node_tree_render_end', this.renderAllLines)
|
||||
// 状态改变后重新渲染连接线
|
||||
this.mindMap.on('data_change', this.renderAllLines)
|
||||
// 监听画布和节点点击事件，用于清除当前激活的连接线
|
||||
this.mindMap.on('draw_click', this.onDrawClick)
|
||||
this.mindMap.on('node_click', this.onNodeClick)
|
||||
this.mindMap.on('contextmenu', this.onDrawClick)
|
||||
// 注册删除快捷键
|
||||
this.mindMap.keyCommand.addShortcut('Del|Backspace', this.removeLine)
|
||||
// 注册添加连接线的命令
|
||||
this.mindMap.command.add('ADD_ASSOCIATIVE_LINE', this.addLine)
|
||||
// 监听鼠标移动事件
|
||||
this.mindMap.on('mousemove', this.onMousemove)
|
||||
// 节点拖拽事件
|
||||
this.mindMap.on('node_dragging', this.onNodeDragging)
|
||||
this.mindMap.on('node_dragend', this.onNodeDragend)
|
||||
// 拖拽控制点
|
||||
this.mindMap.on('mouseup', this.onControlPointMouseup)
|
||||
// 缩放事件
|
||||
this.mindMap.on('scale', this.onScale)
|
||||
// 实例销毁事件
|
||||
this.mindMap.on('beforeDestroy', this.onBeforeDestroy)
|
||||
}
|
||||
|
||||
// 解绑事件
|
||||
unBindEvent() {
|
||||
this.mindMap.off('node_tree_render_end', this.renderAllLines)
|
||||
this.mindMap.off('data_change', this.renderAllLines)
|
||||
this.mindMap.off('draw_click', this.onDrawClick)
|
||||
this.mindMap.off('node_click', this.onNodeClick)
|
||||
this.mindMap.off('contextmenu', this.onDrawClick)
|
||||
this.mindMap.keyCommand.removeShortcut('Del|Backspace', this.removeLine)
|
||||
this.mindMap.command.remove('ADD_ASSOCIATIVE_LINE', this.addLine)
|
||||
this.mindMap.off('mousemove', this.onMousemove)
|
||||
this.mindMap.off('node_dragging', this.onNodeDragging)
|
||||
this.mindMap.off('node_dragend', this.onNodeDragend)
|
||||
this.mindMap.off('mouseup', this.onControlPointMouseup)
|
||||
this.mindMap.off('scale', this.onScale)
|
||||
this.mindMap.off('beforeDestroy', this.onBeforeDestroy)
|
||||
}
|
||||
|
||||
// 获取关联线的样式配置
|
||||
// 优先级：关联线自定义样式、节点自定义样式、主题的节点层级样式、主题的最外层样式
|
||||
getStyleConfig(node, toNode) {
|
||||
let lineStyle = {}
|
||||
if (toNode) {
|
||||
const associativeLineStyle = node.getData('associativeLineStyle') || {}
|
||||
lineStyle = associativeLineStyle[toNode.getData('uid')] || {}
|
||||
}
|
||||
const res = {}
|
||||
styleProps.forEach(prop => {
|
||||
if (typeof lineStyle[prop] !== 'undefined') {
|
||||
res[prop] = lineStyle[prop]
|
||||
} else {
|
||||
res[prop] = node.getStyle(prop)
|
||||
}
|
||||
})
|
||||
return res
|
||||
}
|
||||
|
||||
// 实例销毁时清除关联线文字编辑框
|
||||
onBeforeDestroy() {
|
||||
this.hideEditTextBox()
|
||||
this.removeTextEditEl()
|
||||
}
|
||||
|
||||
// 画布点击事件
|
||||
onDrawClick() {
|
||||
// 取消创建关联线
|
||||
if (this.isCreatingLine) {
|
||||
this.cancelCreateLine()
|
||||
}
|
||||
// 取消激活关联线
|
||||
if (!this.isControlPointMousedown) {
|
||||
this.clearActiveLine()
|
||||
this.renderAllLines()
|
||||
}
|
||||
}
|
||||
|
||||
// 节点点击事件
|
||||
onNodeClick(node) {
|
||||
if (this.isCreatingLine) {
|
||||
this.completeCreateLine(node)
|
||||
} else {
|
||||
this.clearActiveLine()
|
||||
this.renderAllLines()
|
||||
}
|
||||
}
|
||||
|
||||
// 创建箭头
|
||||
createMarker(callback = () => {}) {
|
||||
return this.associativeLineDraw.marker(20, 20, add => {
|
||||
add.ref(12, 5)
|
||||
add.size(10, 10)
|
||||
add.attr('orient', 'auto-start-reverse')
|
||||
callback(add.path('M0,0 L2,5 L0,10 L10,5 Z'))
|
||||
})
|
||||
}
|
||||
|
||||
// 判断关联线坐标是否变更，有变更则使用变化后的坐标，无则默认坐标
|
||||
updateAllLinesPos(node, toNode, associativeLinePoint) {
|
||||
associativeLinePoint = associativeLinePoint || {}
|
||||
let [startPoint, endPoint] = computeNodePoints(node, toNode)
|
||||
let nodeRange = 0
|
||||
let nodeDir = ''
|
||||
let toNodeRange = 0
|
||||
let toNodeDir = ''
|
||||
if (associativeLinePoint.startPoint) {
|
||||
nodeRange = associativeLinePoint.startPoint.range || 0
|
||||
nodeDir = associativeLinePoint.startPoint.dir || 'right'
|
||||
startPoint = getNodePoint(node, nodeDir, nodeRange)
|
||||
}
|
||||
if (associativeLinePoint.endPoint) {
|
||||
toNodeRange = associativeLinePoint.endPoint.range || 0
|
||||
toNodeDir = associativeLinePoint.endPoint.dir || 'right'
|
||||
endPoint = getNodePoint(toNode, toNodeDir, toNodeRange)
|
||||
}
|
||||
return [startPoint, endPoint]
|
||||
}
|
||||
|
||||
// 渲染所有连线
|
||||
renderAllLines() {
|
||||
if (this.isNotRenderAllLines) {
|
||||
this.isNotRenderAllLines = false
|
||||
return
|
||||
}
|
||||
// 先移除
|
||||
this.removeAllLines()
|
||||
this.removeControls()
|
||||
this.clearActiveLine()
|
||||
let tree = this.mindMap.renderer.root
|
||||
if (!tree) return
|
||||
let idToNode = new Map()
|
||||
let nodeToIds = new Map()
|
||||
walk(
|
||||
tree,
|
||||
null,
|
||||
cur => {
|
||||
if (!cur) return
|
||||
let data = cur.getData()
|
||||
if (
|
||||
data.associativeLineTargets &&
|
||||
data.associativeLineTargets.length > 0
|
||||
) {
|
||||
nodeToIds.set(cur, data.associativeLineTargets)
|
||||
}
|
||||
if (data.uid) {
|
||||
idToNode.set(data.uid, cur)
|
||||
}
|
||||
},
|
||||
() => {},
|
||||
true,
|
||||
0
|
||||
)
|
||||
nodeToIds.forEach((ids, node) => {
|
||||
ids.forEach((uid, index) => {
|
||||
let toNode = idToNode.get(uid)
|
||||
if (!node || !toNode) return
|
||||
const associativeLinePoint = (node.getData('associativeLinePoint') ||
|
||||
[])[index]
|
||||
// 切换结构和布局，都会更新坐标
|
||||
const [startPoint, endPoint] = this.updateAllLinesPos(
|
||||
node,
|
||||
toNode,
|
||||
associativeLinePoint
|
||||
)
|
||||
this.drawLine(startPoint, endPoint, node, toNode)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 绘制连接线
|
||||
drawLine(startPoint, endPoint, node, toNode) {
|
||||
let {
|
||||
associativeLineWidth,
|
||||
associativeLineColor,
|
||||
associativeLineActiveWidth,
|
||||
associativeLineDasharray
|
||||
} = this.getStyleConfig(node, toNode)
|
||||
// 箭头
|
||||
let markerPath = null
|
||||
const marker = this.createMarker(p => {
|
||||
markerPath = p
|
||||
})
|
||||
markerPath
|
||||
.stroke({ color: associativeLineColor })
|
||||
.fill({ color: associativeLineColor })
|
||||
// 路径
|
||||
let { path: pathStr, controlPoints } = getNodeLinePath(
|
||||
startPoint,
|
||||
endPoint,
|
||||
node,
|
||||
toNode
|
||||
)
|
||||
// 虚线
|
||||
let path = this.associativeLineDraw.path()
|
||||
path
|
||||
.stroke({
|
||||
width: associativeLineWidth,
|
||||
color: associativeLineColor,
|
||||
dasharray: associativeLineDasharray || '6,4'
|
||||
})
|
||||
.fill({ color: 'none' })
|
||||
path.plot(pathStr)
|
||||
path.marker('end', marker)
|
||||
// 不可见的点击线
|
||||
let clickPath = this.associativeLineDraw.path()
|
||||
clickPath
|
||||
.stroke({ width: associativeLineActiveWidth, color: 'transparent' })
|
||||
.fill({ color: 'none' })
|
||||
clickPath.plot(pathStr)
|
||||
// 文字
|
||||
let text = this.createText({
|
||||
path,
|
||||
clickPath,
|
||||
markerPath,
|
||||
node,
|
||||
toNode,
|
||||
startPoint,
|
||||
endPoint,
|
||||
controlPoints
|
||||
})
|
||||
// 点击事件
|
||||
clickPath.click(e => {
|
||||
e.stopPropagation()
|
||||
this.setActiveLine({
|
||||
path,
|
||||
clickPath,
|
||||
markerPath,
|
||||
text,
|
||||
node,
|
||||
toNode,
|
||||
startPoint,
|
||||
endPoint,
|
||||
controlPoints
|
||||
})
|
||||
})
|
||||
// 双击进入关联线文本编辑状态
|
||||
clickPath.dblclick(() => {
|
||||
if (!this.activeLine) return
|
||||
this.showEditTextBox(text)
|
||||
})
|
||||
// 渲染关联线文字
|
||||
this.renderText(this.getText(node, toNode), path, text, node, toNode)
|
||||
this.lineList.push([path, clickPath, text, node, toNode])
|
||||
}
|
||||
|
||||
// 更新当前激活连线的样式，一般在自定义了节点关联线的样式后调用
|
||||
// 直接调用node.setStyle方法更新样式会直接触发关联线更新，但是关联线的激活状态会丢失
|
||||
// 所以可以调用node.setData方法更新数据，然后再调用该方法更新样式，这样关联线激活状态不会丢失
|
||||
updateActiveLineStyle() {
|
||||
if (!this.activeLine) return
|
||||
this.isNotRenderAllLines = true
|
||||
const [path, clickPath, text, node, toNode, markerPath] = this.activeLine
|
||||
const {
|
||||
associativeLineWidth,
|
||||
associativeLineColor,
|
||||
associativeLineDasharray,
|
||||
associativeLineActiveWidth,
|
||||
associativeLineActiveColor,
|
||||
associativeLineTextColor,
|
||||
associativeLineTextFontFamily,
|
||||
associativeLineTextFontSize
|
||||
} = this.getStyleConfig(node, toNode)
|
||||
path
|
||||
.stroke({
|
||||
width: associativeLineWidth,
|
||||
color: associativeLineColor,
|
||||
dasharray: associativeLineDasharray || '6,4'
|
||||
})
|
||||
.fill({ color: 'none' })
|
||||
clickPath
|
||||
.stroke({
|
||||
width: associativeLineActiveWidth,
|
||||
color: associativeLineActiveColor
|
||||
})
|
||||
.fill({ color: 'none' })
|
||||
markerPath
|
||||
.stroke({ color: associativeLineColor })
|
||||
.fill({ color: associativeLineColor })
|
||||
text.find('text').forEach(textNode => {
|
||||
textNode
|
||||
.fill({
|
||||
color: associativeLineTextColor
|
||||
})
|
||||
.css({
|
||||
'font-family': associativeLineTextFontFamily,
|
||||
'font-size': associativeLineTextFontSize + 'px'
|
||||
})
|
||||
})
|
||||
if (this.controlLine1) {
|
||||
this.controlLine1.stroke({ color: associativeLineActiveColor })
|
||||
}
|
||||
if (this.controlLine2) {
|
||||
this.controlLine2.stroke({ color: associativeLineActiveColor })
|
||||
}
|
||||
if (this.controlPoint1) {
|
||||
this.controlPoint1.stroke({ color: associativeLineActiveColor })
|
||||
}
|
||||
if (this.controlPoint2) {
|
||||
this.controlPoint2.stroke({ color: associativeLineActiveColor })
|
||||
}
|
||||
this.updateTextPos(path, text)
|
||||
}
|
||||
|
||||
// 激活某根关联线
|
||||
setActiveLine({
|
||||
path,
|
||||
clickPath,
|
||||
markerPath,
|
||||
text,
|
||||
node,
|
||||
toNode,
|
||||
startPoint,
|
||||
endPoint,
|
||||
controlPoints
|
||||
}) {
|
||||
let { associativeLineActiveColor } = this.getStyleConfig(node, toNode)
|
||||
// 如果当前存在激活节点，那么取消激活节点
|
||||
this.mindMap.execCommand('CLEAR_ACTIVE_NODE')
|
||||
// 否则清除当前的关联线的激活状态，如果有的话
|
||||
this.clearActiveLine()
|
||||
// 保存当前激活的关联线信息
|
||||
this.activeLine = [path, clickPath, text, node, toNode, markerPath]
|
||||
// 让不可见的点击线显示
|
||||
clickPath.stroke({ color: associativeLineActiveColor })
|
||||
// 如果没有输入过关联线文字，那么显示默认文字
|
||||
if (!this.getText(node, toNode)) {
|
||||
this.renderText(
|
||||
this.mindMap.opt.defaultAssociativeLineText,
|
||||
path,
|
||||
text,
|
||||
node,
|
||||
toNode
|
||||
)
|
||||
}
|
||||
// 渲染控制点和连线
|
||||
this.renderControls(
|
||||
startPoint,
|
||||
endPoint,
|
||||
controlPoints[0],
|
||||
controlPoints[1],
|
||||
node,
|
||||
toNode
|
||||
)
|
||||
this.mindMap.emit('associative_line_click', path, clickPath, node, toNode)
|
||||
this.front()
|
||||
}
|
||||
|
||||
// 移除所有连接线
|
||||
removeAllLines() {
|
||||
this.lineList.forEach(line => {
|
||||
line[0].remove()
|
||||
line[1].remove()
|
||||
line[2].remove()
|
||||
})
|
||||
this.lineList = []
|
||||
}
|
||||
|
||||
// 从当前激活节点开始创建连接线
|
||||
createLineFromActiveNode() {
|
||||
if (this.mindMap.renderer.activeNodeList.length <= 0) return
|
||||
let node = this.mindMap.renderer.activeNodeList[0]
|
||||
this.createLine(node)
|
||||
}
|
||||
|
||||
// 创建连接线
|
||||
createLine(fromNode) {
|
||||
let {
|
||||
associativeLineWidth,
|
||||
associativeLineColor,
|
||||
associativeLineDasharray
|
||||
} = this.getStyleConfig(fromNode)
|
||||
if (this.isCreatingLine || !fromNode) return
|
||||
this.front()
|
||||
this.isCreatingLine = true
|
||||
this.creatingStartNode = fromNode
|
||||
this.creatingLine = this.associativeLineDraw.path()
|
||||
this.creatingLine
|
||||
.stroke({
|
||||
width: associativeLineWidth,
|
||||
color: associativeLineColor,
|
||||
dasharray: associativeLineDasharray || '6,4'
|
||||
})
|
||||
.fill({ color: 'none' })
|
||||
// 箭头
|
||||
let markerPath = null
|
||||
const marker = this.createMarker(p => {
|
||||
markerPath = p
|
||||
})
|
||||
markerPath
|
||||
.stroke({ color: associativeLineColor })
|
||||
.fill({ color: associativeLineColor })
|
||||
this.creatingLine.marker('end', marker)
|
||||
}
|
||||
|
||||
// 取消创建关联线
|
||||
cancelCreateLine() {
|
||||
this.isCreatingLine = false
|
||||
this.creatingStartNode = null
|
||||
this.creatingLine.remove()
|
||||
this.creatingLine = null
|
||||
this.overlapNode = null
|
||||
this.back()
|
||||
}
|
||||
|
||||
// 鼠标移动事件
|
||||
onMousemove(e) {
|
||||
this.onControlPointMousemove(e)
|
||||
this.updateCreatingLine(e)
|
||||
}
|
||||
|
||||
// 更新创建过程中的连接线
|
||||
updateCreatingLine(e) {
|
||||
if (!this.isCreatingLine) return
|
||||
let { x, y } = this.getTransformedEventPos(e)
|
||||
let startPoint = getNodePoint(this.creatingStartNode)
|
||||
let offsetX = x > startPoint.x ? -10 : 10
|
||||
let pathStr = cubicBezierPath(startPoint.x, startPoint.y, x + offsetX, y)
|
||||
this.creatingLine.plot(pathStr)
|
||||
this.checkOverlapNode(x, y)
|
||||
}
|
||||
|
||||
// 获取转换后的鼠标事件对象的坐标
|
||||
getTransformedEventPos(e) {
|
||||
let { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
|
||||
let { scaleX, scaleY, translateX, translateY } =
|
||||
this.mindMap.draw.transform()
|
||||
return {
|
||||
x: (x - translateX) / scaleX,
|
||||
y: (y - translateY) / scaleY
|
||||
}
|
||||
}
|
||||
|
||||
// 计算节点偏移位置
|
||||
getNodePos(node) {
|
||||
const { scaleX, scaleY, translateX, translateY } =
|
||||
this.mindMap.draw.transform()
|
||||
const { left, top, width, height } = node
|
||||
let translateLeft = left * scaleX + translateX
|
||||
let translateTop = top * scaleY + translateY
|
||||
return {
|
||||
left,
|
||||
top,
|
||||
translateLeft,
|
||||
translateTop,
|
||||
width,
|
||||
height
|
||||
}
|
||||
}
|
||||
|
||||
// 检测当前移动到的目标节点
|
||||
checkOverlapNode(x, y) {
|
||||
this.overlapNode = null
|
||||
bfsWalk(this.mindMap.renderer.root, node => {
|
||||
if (node.getData('isActive')) {
|
||||
this.mindMap.execCommand('SET_NODE_ACTIVE', node, false)
|
||||
}
|
||||
if (node.uid === this.creatingStartNode.uid || this.overlapNode) {
|
||||
return
|
||||
}
|
||||
let { left, top, width, height } = node
|
||||
let right = left + width
|
||||
let bottom = top + height
|
||||
if (x >= left && x <= right && y >= top && y <= bottom) {
|
||||
this.overlapNode = node
|
||||
}
|
||||
})
|
||||
if (this.overlapNode && !this.overlapNode.getData('isActive')) {
|
||||
this.mindMap.execCommand('SET_NODE_ACTIVE', this.overlapNode, true)
|
||||
}
|
||||
}
|
||||
|
||||
// 完成创建连接线
|
||||
completeCreateLine(node) {
|
||||
if (this.creatingStartNode.uid === node.uid) return
|
||||
const { beforeAssociativeLineConnection } = this.mindMap.opt
|
||||
let stop = false
|
||||
if (typeof beforeAssociativeLineConnection === 'function') {
|
||||
stop = beforeAssociativeLineConnection(node)
|
||||
}
|
||||
if (stop) return
|
||||
this.addLine(this.creatingStartNode, node)
|
||||
if (this.overlapNode && this.overlapNode.getData('isActive')) {
|
||||
this.mindMap.execCommand('SET_NODE_ACTIVE', this.overlapNode, false)
|
||||
}
|
||||
this.cancelCreateLine()
|
||||
}
|
||||
|
||||
// 添加连接线
|
||||
addLine(fromNode, toNode) {
|
||||
if (!fromNode || !toNode) return
|
||||
// 目标节点如果没有id，则生成一个id
|
||||
let uid = toNode.getData('uid')
|
||||
if (!uid) {
|
||||
uid = uuid()
|
||||
this.mindMap.execCommand('SET_NODE_DATA', toNode, {
|
||||
uid
|
||||
})
|
||||
}
|
||||
// 将目标节点id保存起来
|
||||
let list = fromNode.getData('associativeLineTargets') || []
|
||||
// 连线节点是否存在相同的id,存在则阻止添加关联线
|
||||
const sameLine = list.some(item => item === uid)
|
||||
if (sameLine) {
|
||||
return
|
||||
}
|
||||
list.push(uid)
|
||||
// 保存控制点
|
||||
let [startPoint, endPoint] = computeNodePoints(fromNode, toNode)
|
||||
let controlPoints = computeCubicBezierPathPoints(
|
||||
startPoint.x,
|
||||
startPoint.y,
|
||||
endPoint.x,
|
||||
endPoint.y
|
||||
)
|
||||
// 检查是否存在固定位置的配置
|
||||
const { associativeLineInitPointsPosition } = this.mindMap.opt
|
||||
if (associativeLineInitPointsPosition) {
|
||||
const { from, to } = associativeLineInitPointsPosition
|
||||
if (from) {
|
||||
startPoint.dir = from
|
||||
}
|
||||
if (to) {
|
||||
endPoint.dir = to
|
||||
}
|
||||
}
|
||||
let offsetList =
|
||||
fromNode.getData('associativeLineTargetControlOffsets') || []
|
||||
// 保存的实际是控制点和端点的差值，否则当节点位置改变了，控制点还是原来的位置，连线就不对了
|
||||
offsetList[list.length - 1] = [
|
||||
{
|
||||
x: controlPoints[0].x - startPoint.x,
|
||||
y: controlPoints[0].y - startPoint.y
|
||||
},
|
||||
{
|
||||
x: controlPoints[1].x - endPoint.x,
|
||||
y: controlPoints[1].y - endPoint.y
|
||||
}
|
||||
]
|
||||
let associativeLinePoint = fromNode.getData('associativeLinePoint') || []
|
||||
// 记录关联的起始|结束坐标
|
||||
associativeLinePoint[list.length - 1] = { startPoint, endPoint }
|
||||
this.mindMap.execCommand('SET_NODE_DATA', fromNode, {
|
||||
associativeLineTargets: list,
|
||||
associativeLineTargetControlOffsets: offsetList,
|
||||
associativeLinePoint
|
||||
})
|
||||
}
|
||||
|
||||
// 删除连接线
|
||||
removeLine() {
|
||||
if (!this.activeLine) return
|
||||
let [, , , node, toNode] = this.activeLine
|
||||
this.removeControls()
|
||||
let {
|
||||
associativeLineTargets,
|
||||
associativeLinePoint,
|
||||
associativeLineTargetControlOffsets,
|
||||
associativeLineText,
|
||||
associativeLineStyle
|
||||
} = node.getData()
|
||||
associativeLinePoint = associativeLinePoint || []
|
||||
let targetIndex = getAssociativeLineTargetIndex(node, toNode)
|
||||
// 更新关联线文本数据
|
||||
let newAssociativeLineText = {}
|
||||
if (associativeLineText) {
|
||||
Object.keys(associativeLineText).forEach(item => {
|
||||
if (item !== toNode.getData('uid')) {
|
||||
newAssociativeLineText[item] = associativeLineText[item]
|
||||
}
|
||||
})
|
||||
}
|
||||
// 更新关联线样式数据
|
||||
let newAssociativeLineStyle = {}
|
||||
if (associativeLineStyle) {
|
||||
Object.keys(associativeLineStyle).forEach(item => {
|
||||
if (item !== toNode.getData('uid')) {
|
||||
newAssociativeLineStyle[item] = associativeLineStyle[item]
|
||||
}
|
||||
})
|
||||
}
|
||||
this.mindMap.execCommand('SET_NODE_DATA', node, {
|
||||
// 目标
|
||||
associativeLineTargets: associativeLineTargets.filter((_, index) => {
|
||||
return index !== targetIndex
|
||||
}),
|
||||
// 连接线坐标
|
||||
associativeLinePoint: associativeLinePoint.filter((_, index) => {
|
||||
return index !== targetIndex
|
||||
}),
|
||||
// 偏移量
|
||||
associativeLineTargetControlOffsets: associativeLineTargetControlOffsets
|
||||
? associativeLineTargetControlOffsets.filter((_, index) => {
|
||||
return index !== targetIndex
|
||||
})
|
||||
: [],
|
||||
// 文本
|
||||
associativeLineText: newAssociativeLineText,
|
||||
// 样式
|
||||
associativeLineStyle: newAssociativeLineStyle
|
||||
})
|
||||
}
|
||||
|
||||
// 清除激活的线
|
||||
clearActiveLine() {
|
||||
if (this.activeLine) {
|
||||
let [, clickPath, text, node, toNode] = this.activeLine
|
||||
clickPath.stroke({
|
||||
color: 'transparent'
|
||||
})
|
||||
// 隐藏关联线文本编辑框
|
||||
this.hideEditTextBox()
|
||||
// 如果当前关联线没有文字，则清空文字节点
|
||||
if (!this.getText(node, toNode)) {
|
||||
text.clear()
|
||||
}
|
||||
this.activeLine = null
|
||||
this.removeControls()
|
||||
this.back()
|
||||
this.mindMap.emit('associative_line_deactivate')
|
||||
}
|
||||
}
|
||||
|
||||
// 处理节点正在拖拽事件
|
||||
onNodeDragging() {
|
||||
if (this.isNodeDragging) return
|
||||
this.isNodeDragging = true
|
||||
this.lineList.forEach(line => {
|
||||
line[0].hide()
|
||||
line[1].hide()
|
||||
line[2].hide()
|
||||
})
|
||||
this.hideControls()
|
||||
}
|
||||
|
||||
// 处理节点拖拽完成事件
|
||||
onNodeDragend() {
|
||||
if (!this.isNodeDragging) return
|
||||
this.lineList.forEach(line => {
|
||||
line[0].show()
|
||||
line[1].show()
|
||||
line[2].show()
|
||||
})
|
||||
this.showControls()
|
||||
this.isNodeDragging = false
|
||||
}
|
||||
|
||||
// 关联线顶层显示
|
||||
front() {
|
||||
if (this.mindMap.opt.associativeLineIsAlwaysAboveNode) return
|
||||
this.associativeLineDraw.front()
|
||||
}
|
||||
|
||||
// 关联线回到原有层级
|
||||
back() {
|
||||
if (this.mindMap.opt.associativeLineIsAlwaysAboveNode) return
|
||||
this.associativeLineDraw.back() // 最底层
|
||||
this.associativeLineDraw.forward() // 连线层上面
|
||||
}
|
||||
|
||||
// 插件被移除前做的事情
|
||||
beforePluginRemove() {
|
||||
this.mindMap.deleteEditNodeClass(ASSOCIATIVE_LINE_TEXT_EDIT_WRAP)
|
||||
this.unBindEvent()
|
||||
}
|
||||
|
||||
// 插件被卸载前做的事情
|
||||
beforePluginDestroy() {
|
||||
this.mindMap.deleteEditNodeClass(ASSOCIATIVE_LINE_TEXT_EDIT_WRAP)
|
||||
this.unBindEvent()
|
||||
}
|
||||
}
|
||||
|
||||
AssociativeLine.instanceName = 'associativeLine'
|
||||
|
||||
export default AssociativeLine
|
||||
@@ -0,0 +1,284 @@
|
||||
import * as Y from 'yjs'
|
||||
import { WebrtcProvider } from 'y-webrtc'
|
||||
import {
|
||||
isSameObject,
|
||||
simpleDeepClone,
|
||||
getType,
|
||||
isUndef,
|
||||
transformTreeDataToObject,
|
||||
transformObjectToTreeData
|
||||
} from '../utils/index'
|
||||
|
||||
// 协同插件
|
||||
class Cooperate {
|
||||
constructor(opt) {
|
||||
this.opt = opt
|
||||
this.mindMap = opt.mindMap
|
||||
// yjs文档
|
||||
this.ydoc = new Y.Doc()
|
||||
// 共享数据
|
||||
this.ymap = null
|
||||
// 连接提供者
|
||||
this.provider = null
|
||||
// 感知数据
|
||||
this.awareness = null
|
||||
this.currentAwarenessData = []
|
||||
this.waitNodeUidMap = {} // 该列表中的uid对应的节点还未渲染完毕
|
||||
// 当前的平级对象类型的思维导图数据
|
||||
this.currentData = null
|
||||
// 用户信息
|
||||
this.userInfo = null
|
||||
// 是否正在重新设置思维导图数据
|
||||
this.isSetData = false
|
||||
// 绑定事件
|
||||
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 = transformTreeDataToObject(data)
|
||||
// 将思维导图数据添加到共享数据中
|
||||
Object.keys(this.currentData).forEach(uid => {
|
||||
this.ymap.set(uid, this.currentData[uid])
|
||||
})
|
||||
// 监听数据同步
|
||||
this.onObserve = this.onObserve.bind(this)
|
||||
this.ymap.observe(this.onObserve)
|
||||
}
|
||||
|
||||
// 获取yjs doc实例
|
||||
getDoc() {
|
||||
return this.ydoc
|
||||
}
|
||||
|
||||
// 设置连接提供者
|
||||
setProvider(provider, webrtcProviderConfig = {}) {
|
||||
const { roomName, signalingList, ...otherConfig } = webrtcProviderConfig
|
||||
this.provider =
|
||||
provider ||
|
||||
new WebrtcProvider(roomName, this.ydoc, {
|
||||
signaling: signalingList,
|
||||
...otherConfig
|
||||
})
|
||||
this.awareness = this.provider.awareness
|
||||
|
||||
// 监听状态同步事件
|
||||
this.onAwareness = this.onAwareness.bind(this)
|
||||
this.awareness.on('change', this.onAwareness)
|
||||
}
|
||||
|
||||
// 绑定事件
|
||||
bindEvent() {
|
||||
// 监听思维导图改变
|
||||
this.onDataChange = this.onDataChange.bind(this)
|
||||
this.mindMap.on('data_change', this.onDataChange)
|
||||
|
||||
// 监听思维导图节点激活事件
|
||||
this.onNodeActive = this.onNodeActive.bind(this)
|
||||
this.mindMap.on('node_active', this.onNodeActive)
|
||||
|
||||
// 监听思维导图渲染完毕事件
|
||||
this.onNodeTreeRenderEnd = this.onNodeTreeRenderEnd.bind(this)
|
||||
this.mindMap.on('node_tree_render_end', this.onNodeTreeRenderEnd)
|
||||
|
||||
// 监听设置思维导图数据事件
|
||||
this.onSetData = this.onSetData.bind(this)
|
||||
this.mindMap.on('set_data', this.onSetData)
|
||||
}
|
||||
|
||||
// 解绑事件
|
||||
unBindEvent() {
|
||||
if (this.ymap) {
|
||||
this.ymap.unobserve(this.onObserve)
|
||||
}
|
||||
this.mindMap.off('data_change', this.onDataChange)
|
||||
this.mindMap.off('node_active', this.onNodeActive)
|
||||
this.mindMap.off('node_tree_render_end', this.onNodeTreeRenderEnd)
|
||||
this.mindMap.off('set_data', this.onSetData)
|
||||
this.ydoc.destroy()
|
||||
}
|
||||
|
||||
// 数据同步时的处理，更新当前思维导图
|
||||
onObserve(event) {
|
||||
const data = event.target.toJSON()
|
||||
// 如果数据没有改变直接返回
|
||||
if (isSameObject(data, this.currentData)) return
|
||||
this.currentData = data
|
||||
// 平级对象转树结构
|
||||
const res = transformObjectToTreeData(data)
|
||||
if (!res) return
|
||||
// 更新思维导图画布
|
||||
this.mindMap.updateData(res)
|
||||
}
|
||||
|
||||
// 当前思维导图改变后的处理，触发同步
|
||||
onDataChange(data) {
|
||||
if (this.isSetData) {
|
||||
this.isSetData = false
|
||||
return
|
||||
}
|
||||
const res = transformTreeDataToObject(data)
|
||||
this.updateChanges(res)
|
||||
}
|
||||
|
||||
// 找出更新点
|
||||
updateChanges(data) {
|
||||
const { beforeCooperateUpdate } = this.mindMap.opt
|
||||
const oldData = this.currentData
|
||||
this.currentData = data
|
||||
this.ydoc.transact(() => {
|
||||
// 找出新增的或修改的
|
||||
const createOrUpdateList = []
|
||||
Object.keys(data).forEach(uid => {
|
||||
// 新增的或已经存在的，如果数据发生了改变
|
||||
if (!oldData[uid] || !isSameObject(oldData[uid], data[uid])) {
|
||||
createOrUpdateList.push({
|
||||
uid,
|
||||
data: data[uid],
|
||||
oldData: oldData[uid]
|
||||
})
|
||||
}
|
||||
})
|
||||
if (beforeCooperateUpdate && createOrUpdateList.length > 0) {
|
||||
beforeCooperateUpdate({
|
||||
type: 'createOrUpdate',
|
||||
list: createOrUpdateList,
|
||||
data
|
||||
})
|
||||
}
|
||||
createOrUpdateList.forEach(item => {
|
||||
this.ymap.set(item.uid, item.data)
|
||||
})
|
||||
// 找出删除的
|
||||
const deleteList = []
|
||||
Object.keys(oldData).forEach(uid => {
|
||||
if (!data[uid]) {
|
||||
deleteList.push({ uid, data: oldData[uid] })
|
||||
}
|
||||
})
|
||||
if (beforeCooperateUpdate && deleteList.length > 0) {
|
||||
beforeCooperateUpdate({
|
||||
type: 'delete',
|
||||
list: deleteList
|
||||
})
|
||||
}
|
||||
deleteList.forEach(item => {
|
||||
this.ymap.delete(item.uid)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 节点激活状态改变后触发感知数据同步
|
||||
onNodeActive(node, nodeList) {
|
||||
if (this.userInfo) {
|
||||
this.awareness.setLocalStateField(this.userInfo.name, {
|
||||
// 用户信息
|
||||
userInfo: {
|
||||
...this.userInfo
|
||||
},
|
||||
// 当前激活的节点id列表
|
||||
nodeIdList: nodeList.map(item => {
|
||||
return item.uid
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 节点树渲染完毕事件
|
||||
onNodeTreeRenderEnd() {
|
||||
Object.keys(this.waitNodeUidMap).forEach(uid => {
|
||||
const node = this.mindMap.renderer.findNodeByUid(uid)
|
||||
if (node) {
|
||||
node.addUser(this.waitNodeUidMap[uid])
|
||||
}
|
||||
})
|
||||
this.waitNodeUidMap = {}
|
||||
}
|
||||
|
||||
// 监听思维导图数据的重新设置事件
|
||||
onSetData(data) {
|
||||
this.isSetData = true
|
||||
this.initData(data)
|
||||
}
|
||||
|
||||
// 设置用户信息
|
||||
/**
|
||||
* {
|
||||
* id: '', // 必传，用户唯一的id
|
||||
* name: '', // 用户名称。name和avatar两个只传一个即可，如果都传了，会显示avatar
|
||||
* avatar: '', // 用户头像
|
||||
* color: '' // 如果没有传头像，那么会以一个圆形来显示名称的第一个字，文字的颜色为白色，圆的颜色可以通过该字段设置
|
||||
* }
|
||||
**/
|
||||
setUserInfo(userInfo) {
|
||||
if (
|
||||
getType(userInfo) !== 'Object' ||
|
||||
isUndef(userInfo.id) ||
|
||||
(isUndef(userInfo.name) && isUndef(userInfo.avatar))
|
||||
)
|
||||
return
|
||||
this.userInfo = userInfo || null
|
||||
}
|
||||
|
||||
// 监听感知数据同步事件
|
||||
onAwareness() {
|
||||
const walk = (list, callback) => {
|
||||
list.forEach(value => {
|
||||
const userName = Object.keys(value)[0]
|
||||
if (!userName) return
|
||||
const data = value[userName]
|
||||
const userInfo = data.userInfo
|
||||
const nodeIdList = data.nodeIdList
|
||||
nodeIdList.forEach(uid => {
|
||||
const node = this.mindMap.renderer.findNodeByUid(uid)
|
||||
callback(uid, node, userInfo)
|
||||
})
|
||||
})
|
||||
}
|
||||
// 清除之前的数据
|
||||
walk(this.currentAwarenessData, (uid, node, userInfo) => {
|
||||
if (node) {
|
||||
node.removeUser(userInfo)
|
||||
}
|
||||
})
|
||||
// 设置当前数据
|
||||
const data = Array.from(this.awareness.getStates().values())
|
||||
this.currentAwarenessData = data
|
||||
this.waitNodeUidMap = {}
|
||||
walk(data, (uid, node, userInfo) => {
|
||||
// 不显示自己
|
||||
if (userInfo.id === this.userInfo.id) return
|
||||
if (node) {
|
||||
node.addUser(userInfo)
|
||||
} else {
|
||||
this.waitNodeUidMap[uid] = userInfo
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 插件被移除前做的事情
|
||||
beforePluginRemove() {
|
||||
this.unBindEvent()
|
||||
}
|
||||
|
||||
// 插件被卸载前做的事情
|
||||
beforePluginDestroy() {
|
||||
this.unBindEvent()
|
||||
}
|
||||
}
|
||||
|
||||
Cooperate.instanceName = 'cooperate'
|
||||
|
||||
export default Cooperate
|
||||
@@ -0,0 +1,444 @@
|
||||
import {
|
||||
walk,
|
||||
getNodeTreeBoundingRect,
|
||||
fullscrrenEvent,
|
||||
fullScreen,
|
||||
exitFullScreen,
|
||||
formatGetNodeGeneralization
|
||||
} from '../utils/index'
|
||||
import { keyMap } from '../core/command/keyMap'
|
||||
|
||||
const defaultConfig = {
|
||||
boxShadowColor: 'rgba(0, 0, 0, 0.8)', // 高亮框四周的区域颜色
|
||||
borderRadius: '5px', // 高亮框的圆角大小
|
||||
transition: 'all 0.3s ease-out', // 高亮框动画的过渡
|
||||
zIndex: 9999, // 高亮框元素的层级
|
||||
padding: 20, // 高亮框的内边距
|
||||
margin: 50, // 高亮框的外边距
|
||||
openBlankMode: true // 是否开启填空模式，即带下划线的文本默认不显示，按回车键才依次显示
|
||||
}
|
||||
|
||||
// 演示插件
|
||||
class Demonstrate {
|
||||
constructor(opt) {
|
||||
this.mindMap = opt.mindMap
|
||||
// 是否正在演示中
|
||||
this.isInDemonstrate = false
|
||||
// 演示的步骤列表
|
||||
this.stepList = []
|
||||
// 当前所在步骤
|
||||
this.currentStepIndex = 0
|
||||
// 当前所在步骤对应的节点实例
|
||||
this.currentStepNode = null
|
||||
// 当前所在步骤节点的下划线文本数据
|
||||
this.currentUnderlineTextData = null
|
||||
// 临时的样式剩余
|
||||
this.tmpStyleEl = null
|
||||
// 高亮样式元素
|
||||
this.highlightEl = null
|
||||
this.transformState = null
|
||||
this.renderTree = null
|
||||
this.config = Object.assign(
|
||||
{ ...defaultConfig },
|
||||
this.mindMap.opt.demonstrateConfig || {}
|
||||
)
|
||||
this.needRestorePerformanceMode = false
|
||||
this.onConfigUpdate = this.onConfigUpdate.bind(this)
|
||||
this.mindMap.on('after_update_config', this.onConfigUpdate)
|
||||
}
|
||||
|
||||
// 监听配置更新
|
||||
onConfigUpdate(opt) {
|
||||
if (typeof opt.demonstrateConfig !== 'undefined') {
|
||||
this.config = {
|
||||
...this.config,
|
||||
...opt.demonstrateConfig
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 进入演示模式
|
||||
enter() {
|
||||
// 全屏
|
||||
this.bindFullscreenEvent()
|
||||
// 如果已经全屏了
|
||||
if (document.fullscreenElement === this.mindMap.el) {
|
||||
this._enter()
|
||||
} else {
|
||||
// 否则申请全屏
|
||||
fullScreen(this.mindMap.el)
|
||||
}
|
||||
}
|
||||
|
||||
_enter() {
|
||||
this.isInDemonstrate = true
|
||||
// 如果开启了性能模式，那么需要暂停
|
||||
this.pausePerformanceMode()
|
||||
// 添加演示用的临时的样式
|
||||
this.addTmpStyles()
|
||||
// 记录演示前的画布状态
|
||||
this.transformState = this.mindMap.view.getTransformData()
|
||||
// 记录演示前的画布数据
|
||||
this.renderTree = this.mindMap.getData()
|
||||
// 暂停收集历史记录
|
||||
this.mindMap.command.pause()
|
||||
// 暂停思维导图快捷键响应
|
||||
this.mindMap.keyCommand.pause()
|
||||
// 创建高亮元素
|
||||
this.createHighlightEl()
|
||||
// 计算步骤数据
|
||||
this.getStepList()
|
||||
// 收起所有节点
|
||||
let wait = false
|
||||
if (this.mindMap.renderer.isRendering) {
|
||||
wait = true
|
||||
}
|
||||
this.mindMap.execCommand('UNEXPAND_ALL', false)
|
||||
const onRenderEnd = () => {
|
||||
if (wait) {
|
||||
wait = false
|
||||
return
|
||||
}
|
||||
this.mindMap.off('node_tree_render_end', onRenderEnd)
|
||||
// 聚焦到第一步
|
||||
this.jump(this.currentStepIndex)
|
||||
this.bindEvent()
|
||||
}
|
||||
this.mindMap.on('node_tree_render_end', onRenderEnd)
|
||||
}
|
||||
|
||||
// 退出演示模式
|
||||
exit() {
|
||||
exitFullScreen(this.mindMap.el)
|
||||
this.mindMap.updateData(this.renderTree)
|
||||
this.mindMap.view.setTransformData(this.transformState)
|
||||
this.renderTree = null
|
||||
this.transformState = null
|
||||
this.stepList = []
|
||||
this.currentStepIndex = 0
|
||||
this.currentStepNode = null
|
||||
this.currentUnderlineTextData = null
|
||||
this.unBindEvent()
|
||||
this.removeTmpStyles()
|
||||
this.removeHighlightEl()
|
||||
this.mindMap.command.recovery()
|
||||
this.mindMap.keyCommand.recovery()
|
||||
this.restorePerformanceMode()
|
||||
this.mindMap.emit('exit_demonstrate')
|
||||
this.isInDemonstrate = false
|
||||
}
|
||||
|
||||
// 暂停性能模式
|
||||
pausePerformanceMode() {
|
||||
const { openPerformance } = this.mindMap.opt
|
||||
if (openPerformance) {
|
||||
this.needRestorePerformanceMode = true
|
||||
this.mindMap.opt.openPerformance = false
|
||||
this.mindMap.renderer.forceLoadNode()
|
||||
}
|
||||
}
|
||||
|
||||
// 恢复性能模式
|
||||
restorePerformanceMode() {
|
||||
if (!this.needRestorePerformanceMode) return
|
||||
this.mindMap.opt.openPerformance = true
|
||||
this.mindMap.renderer.forceLoadNode()
|
||||
}
|
||||
|
||||
// 添加临时的样式
|
||||
addTmpStyles() {
|
||||
this.tmpStyleEl = document.createElement('style')
|
||||
let cssText = `
|
||||
/* 画布所有元素禁止响应鼠标事件 */
|
||||
.smm-mind-map-container {
|
||||
pointer-events: none;
|
||||
}
|
||||
/* 超链接图标允许响应鼠标事件 */
|
||||
.smm-node a {
|
||||
pointer-events: all;
|
||||
}
|
||||
/* 备注图标允许响应鼠标事件 */
|
||||
.smm-node .smm-node-note {
|
||||
pointer-events: all;
|
||||
}
|
||||
`
|
||||
if (this.config.openBlankMode) {
|
||||
cssText += `
|
||||
/* 带下划线的文本内容全部隐藏 */
|
||||
.smm-richtext-node-wrap u {
|
||||
opacity: 0;
|
||||
}
|
||||
`
|
||||
}
|
||||
this.tmpStyleEl.innerText = cssText
|
||||
document.head.appendChild(this.tmpStyleEl)
|
||||
}
|
||||
|
||||
// 移除临时的样式
|
||||
removeTmpStyles() {
|
||||
if (this.tmpStyleEl) document.head.removeChild(this.tmpStyleEl)
|
||||
}
|
||||
|
||||
// 创建高亮元素
|
||||
createHighlightEl() {
|
||||
if (!this.highlightEl) {
|
||||
// 高亮元素
|
||||
this.highlightEl = document.createElement('div')
|
||||
this.highlightEl.style.cssText = `
|
||||
position: absolute;
|
||||
box-shadow: 0 0 0 5000px ${this.config.boxShadowColor};
|
||||
border-radius: ${this.config.borderRadius};
|
||||
transition: ${this.config.transition};
|
||||
z-index: ${this.config.zIndex + 1};
|
||||
pointer-events: none;
|
||||
`
|
||||
this.mindMap.el.appendChild(this.highlightEl)
|
||||
}
|
||||
}
|
||||
|
||||
// 移除高亮元素
|
||||
removeHighlightEl() {
|
||||
if (this.highlightEl) {
|
||||
this.mindMap.el.removeChild(this.highlightEl)
|
||||
this.highlightEl = null
|
||||
}
|
||||
}
|
||||
|
||||
// 更新高亮元素的位置和大小
|
||||
updateHighlightEl({ left, top, width, height }) {
|
||||
const padding = this.config.padding
|
||||
if (left) {
|
||||
this.highlightEl.style.left = left - padding + 'px'
|
||||
}
|
||||
if (top) {
|
||||
this.highlightEl.style.top = top - padding + 'px'
|
||||
}
|
||||
if (width) {
|
||||
this.highlightEl.style.width = width + padding * 2 + 'px'
|
||||
}
|
||||
if (height) {
|
||||
this.highlightEl.style.height = height + padding * 2 + 'px'
|
||||
}
|
||||
}
|
||||
|
||||
// 绑定事件
|
||||
bindEvent() {
|
||||
this.onKeydown = this.onKeydown.bind(this)
|
||||
window.addEventListener('keydown', this.onKeydown)
|
||||
}
|
||||
|
||||
// 绑定全屏事件
|
||||
bindFullscreenEvent() {
|
||||
this.onFullscreenChange = this.onFullscreenChange.bind(this)
|
||||
document.addEventListener(fullscrrenEvent, this.onFullscreenChange)
|
||||
}
|
||||
|
||||
// 解绑事件
|
||||
unBindEvent() {
|
||||
window.removeEventListener('keydown', this.onKeydown)
|
||||
document.removeEventListener(fullscrrenEvent, this.onFullscreenChange)
|
||||
}
|
||||
|
||||
// 全屏状态改变
|
||||
onFullscreenChange() {
|
||||
if (!document.fullscreenElement) {
|
||||
this.exit()
|
||||
} else if (document.fullscreenElement === this.mindMap.el) {
|
||||
this._enter()
|
||||
}
|
||||
}
|
||||
|
||||
// 按键事件
|
||||
onKeydown(e) {
|
||||
// 上一个
|
||||
if (e.keyCode === keyMap.Left) {
|
||||
this.prev()
|
||||
} else if (e.keyCode === keyMap.Right) {
|
||||
// 下一个
|
||||
this.next()
|
||||
} else if (e.keyCode === keyMap.Esc) {
|
||||
// 退出演示
|
||||
this.exit()
|
||||
} else if (e.keyCode === keyMap.Enter) {
|
||||
// 回车键显示隐藏的下划线文本
|
||||
this.showNextUnderlineText()
|
||||
}
|
||||
}
|
||||
|
||||
// 上一张
|
||||
prev() {
|
||||
if (this.currentStepIndex > 0) {
|
||||
this.jump(this.currentStepIndex - 1)
|
||||
}
|
||||
}
|
||||
|
||||
// 下一张
|
||||
next() {
|
||||
const stepLength = this.stepList.length
|
||||
if (this.currentStepIndex < stepLength - 1) {
|
||||
this.jump(this.currentStepIndex + 1)
|
||||
}
|
||||
}
|
||||
|
||||
// 显示隐藏的下划线文本
|
||||
showNextUnderlineText() {
|
||||
if (
|
||||
!this.config.openBlankMode ||
|
||||
!this.currentStepNode ||
|
||||
!this.currentUnderlineTextData
|
||||
)
|
||||
return
|
||||
const { index, list, length } = this.currentUnderlineTextData
|
||||
if (index >= length) return
|
||||
const node = list[index]
|
||||
this.currentUnderlineTextData.index++
|
||||
node.node.style.opacity = 1
|
||||
}
|
||||
|
||||
// 跳转到某一张
|
||||
jump(index) {
|
||||
// 移除该当前下划线元素设置的样式
|
||||
if (this.currentUnderlineTextData) {
|
||||
this.currentUnderlineTextData.list.forEach(item => {
|
||||
item.node.style.opacity = ''
|
||||
})
|
||||
this.currentUnderlineTextData = null
|
||||
}
|
||||
this.currentStepNode = null
|
||||
this.currentStepIndex = index
|
||||
this.mindMap.emit(
|
||||
'demonstrate_jump',
|
||||
this.currentStepIndex,
|
||||
this.stepList.length
|
||||
)
|
||||
const step = this.stepList[index]
|
||||
// 这一步的节点数据
|
||||
const nodeData = step.node
|
||||
// 该节点的uid
|
||||
const uid = nodeData.data.uid
|
||||
// 根据uid在画布上找到该节点实例
|
||||
const node = this.mindMap.renderer.findNodeByUid(uid)
|
||||
// 如果该节点实例不存在，那么先展开到该节点
|
||||
if (!node) {
|
||||
this.mindMap.renderer.expandToNodeUid(uid, () => {
|
||||
const node = this.mindMap.renderer.findNodeByUid(uid)
|
||||
// 展开后还是没找到，那么就别进入了，否则会死循环
|
||||
if (node) {
|
||||
this.jump(index)
|
||||
}
|
||||
})
|
||||
return
|
||||
}
|
||||
// 1.聚焦到某个节点
|
||||
if (step.type === 'node') {
|
||||
this.currentStepNode = node
|
||||
// 当前节点存在带下划线的文本内容
|
||||
const uNodeList = this.config.openBlankMode ? node.group.find('u') : null
|
||||
if (uNodeList && uNodeList.length > 0) {
|
||||
this.currentUnderlineTextData = {
|
||||
index: 0,
|
||||
list: uNodeList,
|
||||
length: uNodeList.length
|
||||
}
|
||||
}
|
||||
// 适应画布大小
|
||||
this.mindMap.view.fit(
|
||||
() => {
|
||||
return node.group.rbox()
|
||||
},
|
||||
true,
|
||||
this.config.padding + this.config.margin
|
||||
)
|
||||
const rect = node.group.rbox()
|
||||
this.updateHighlightEl({
|
||||
left: rect.x,
|
||||
top: rect.y,
|
||||
width: rect.width,
|
||||
height: rect.height
|
||||
})
|
||||
} else {
|
||||
// 2.聚焦到某个节点的所有子节点
|
||||
// 聚焦该节点的所有子节点
|
||||
const task = () => {
|
||||
// 先收起该节点所有子节点的子节点
|
||||
nodeData.children.forEach(item => {
|
||||
item.data.expand = false
|
||||
})
|
||||
this.mindMap.render(() => {
|
||||
// 适应画布大小
|
||||
this.mindMap.view.fit(
|
||||
() => {
|
||||
const res = getNodeTreeBoundingRect(node, 0, 0, 0, 0, true)
|
||||
return {
|
||||
...res,
|
||||
x: res.left,
|
||||
y: res.top
|
||||
}
|
||||
},
|
||||
true,
|
||||
this.config.padding + this.config.margin
|
||||
)
|
||||
const res = getNodeTreeBoundingRect(node, 0, 0, 0, 0, true)
|
||||
this.updateHighlightEl(res)
|
||||
})
|
||||
}
|
||||
// 如果该节点是收起状态，那么需要先展开
|
||||
if (!nodeData.data.expand) {
|
||||
this.mindMap.execCommand('SET_NODE_EXPAND', node, true)
|
||||
const onRenderEnd = () => {
|
||||
this.mindMap.off('node_tree_render_end', onRenderEnd)
|
||||
task()
|
||||
}
|
||||
this.mindMap.on('node_tree_render_end', onRenderEnd)
|
||||
} else {
|
||||
// 否则直接聚焦
|
||||
task()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 深度度优先遍历所有节点，返回步骤列表
|
||||
getStepList() {
|
||||
walk(this.mindMap.renderer.renderTree, null, node => {
|
||||
this.stepList.push({
|
||||
type: 'node',
|
||||
node
|
||||
})
|
||||
// 添加概要步骤
|
||||
const generalizationList = formatGetNodeGeneralization(node.data)
|
||||
generalizationList.forEach(item => {
|
||||
// 没有uid的直接过滤掉，否则会死循环
|
||||
if (item.uid) {
|
||||
this.stepList.push({
|
||||
type: 'node',
|
||||
node: {
|
||||
data: item
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
if (node.children.length > 1) {
|
||||
this.stepList.push({
|
||||
type: 'children',
|
||||
node
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 插件被移除前做的事情
|
||||
beforePluginRemove() {
|
||||
this.unBindEvent()
|
||||
this.mindMap.off('after_update_config', this.onConfigUpdate)
|
||||
}
|
||||
|
||||
// 插件被卸载前做的事情
|
||||
beforePluginDestroy() {
|
||||
this.unBindEvent()
|
||||
this.mindMap.off('after_update_config', this.onConfigUpdate)
|
||||
}
|
||||
}
|
||||
|
||||
Demonstrate.instanceName = 'demonstrate'
|
||||
|
||||
export default Demonstrate
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,460 @@
|
||||
import {
|
||||
imgToDataUrl,
|
||||
downloadFile,
|
||||
readBlob,
|
||||
removeHTMLEntities,
|
||||
resizeImgSize,
|
||||
handleSelfCloseTags,
|
||||
addXmlns
|
||||
} from '../utils'
|
||||
import { SVG } from '@svgdotjs/svg.js'
|
||||
import drawBackgroundImageToCanvas from '../utils/simulateCSSBackgroundInCanvas'
|
||||
import { transformToMarkdown } from '../parse/toMarkdown'
|
||||
import { ERROR_TYPES } from '../constants/constant'
|
||||
import { transformToTxt } from '../parse/toTxt'
|
||||
|
||||
// 导出插件
|
||||
class Export {
|
||||
// 构造函数
|
||||
constructor(opt) {
|
||||
this.mindMap = opt.mindMap
|
||||
}
|
||||
|
||||
// 导出
|
||||
async export(type, isDownload = true, name = '思维导图', ...args) {
|
||||
if (this[type]) {
|
||||
const result = await this[type](name, ...args)
|
||||
if (isDownload) {
|
||||
downloadFile(result, name + '.' + type)
|
||||
}
|
||||
return result
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
// 创建图片url转换任务
|
||||
createTransformImgTaskList(svg, tagName, propName, getUrlFn) {
|
||||
const imageList = svg.find(tagName)
|
||||
return imageList.map(async item => {
|
||||
const imgUlr = getUrlFn(item)
|
||||
// 已经是data:URL形式不用转换
|
||||
if (/^data:/.test(imgUlr) || imgUlr === 'none') {
|
||||
return
|
||||
}
|
||||
const imgData = await imgToDataUrl(imgUlr)
|
||||
item.attr(propName, imgData)
|
||||
})
|
||||
}
|
||||
|
||||
// 获取svg数据
|
||||
async getSvgData(node) {
|
||||
let {
|
||||
exportPaddingX,
|
||||
exportPaddingY,
|
||||
errorHandler,
|
||||
resetCss,
|
||||
addContentToHeader,
|
||||
addContentToFooter,
|
||||
handleBeingExportSvg
|
||||
} = this.mindMap.opt
|
||||
let { svg, svgHTML, clipData } = this.mindMap.getSvgData({
|
||||
paddingX: exportPaddingX,
|
||||
paddingY: exportPaddingY,
|
||||
addContentToHeader,
|
||||
addContentToFooter,
|
||||
node
|
||||
})
|
||||
if (clipData) {
|
||||
clipData.paddingX = exportPaddingX
|
||||
clipData.paddingY = exportPaddingY
|
||||
}
|
||||
let svgIsChange = false
|
||||
// svg的image标签，把图片的url转换成data:url类型，否则导出会丢失图片
|
||||
const task1 = this.createTransformImgTaskList(
|
||||
svg,
|
||||
'image',
|
||||
'href',
|
||||
item => {
|
||||
return item.attr('href') || item.attr('xlink:href')
|
||||
}
|
||||
)
|
||||
// html的img标签
|
||||
const task2 = this.createTransformImgTaskList(svg, 'img', 'src', item => {
|
||||
return item.attr('src')
|
||||
})
|
||||
const taskList = [...task1, ...task2]
|
||||
try {
|
||||
await Promise.all(taskList)
|
||||
} catch (error) {
|
||||
errorHandler(ERROR_TYPES.EXPORT_LOAD_IMAGE_ERROR, error)
|
||||
}
|
||||
// 开启了节点富文本编辑，需要增加一些样式
|
||||
if (this.mindMap.richText) {
|
||||
const foreignObjectList = svg.find('foreignObject')
|
||||
if (foreignObjectList.length > 0) {
|
||||
foreignObjectList[0].add(SVG(`<style>${resetCss}</style>`))
|
||||
svgIsChange = true
|
||||
}
|
||||
// 如果还开启了数学公式，还要插入katex库的样式
|
||||
if (this.mindMap.formula) {
|
||||
const formulaList = svg.find('.ql-formula')
|
||||
if (formulaList.length > 0) {
|
||||
const styleText = this.mindMap.formula.getStyleText()
|
||||
if (styleText) {
|
||||
const styleEl = document.createElement('style')
|
||||
styleEl.innerHTML = styleText
|
||||
addXmlns(styleEl)
|
||||
foreignObjectList[0].add(styleEl)
|
||||
svgIsChange = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 自定义处理svg的方法
|
||||
if (typeof handleBeingExportSvg === 'function') {
|
||||
svgIsChange = true
|
||||
svg = handleBeingExportSvg(svg)
|
||||
}
|
||||
// svg节点内容有变，需要重新获取html字符串
|
||||
if (taskList.length > 0 || svgIsChange) {
|
||||
svgHTML = svg.svg()
|
||||
}
|
||||
return {
|
||||
node: svg,
|
||||
str: svgHTML,
|
||||
clipData
|
||||
}
|
||||
}
|
||||
|
||||
// svg转png
|
||||
svgToPng(
|
||||
svgSrc,
|
||||
transparent,
|
||||
clipData = null,
|
||||
fitBg = false,
|
||||
format = 'image/png'
|
||||
) {
|
||||
const { maxCanvasSize, minExportImgCanvasScale } = this.mindMap.opt
|
||||
return new Promise((resolve, reject) => {
|
||||
const img = new Image()
|
||||
// 跨域图片需要添加这个属性，否则画布被污染了无法导出图片
|
||||
img.setAttribute('crossOrigin', 'anonymous')
|
||||
img.onload = async () => {
|
||||
try {
|
||||
const canvas = document.createElement('canvas')
|
||||
const dpr = Math.max(window.devicePixelRatio, minExportImgCanvasScale)
|
||||
// 图片原始大小
|
||||
let imgWidth = img.width
|
||||
let imgHeight = img.height
|
||||
// 如果是裁减操作的话，那么需要手动添加内边距，及调整图片大小为实际的裁减区域的大小，不要忘了内边距哦
|
||||
let paddingX = 0
|
||||
let paddingY = 0
|
||||
if (clipData) {
|
||||
paddingX = clipData.paddingX
|
||||
paddingY = clipData.paddingY
|
||||
imgWidth = clipData.width + paddingX * 2
|
||||
imgHeight = clipData.height + paddingY * 2
|
||||
}
|
||||
// 适配背景图片的大小
|
||||
let fitBgImgWidth = 0
|
||||
let fitBgImgHeight = 0
|
||||
const { backgroundImage } = this.mindMap.themeConfig
|
||||
if (fitBg && backgroundImage && !transparent) {
|
||||
const bgImgSize = await new Promise(resolve => {
|
||||
const bgImg = new Image()
|
||||
bgImg.onload = () => {
|
||||
resolve([bgImg.width, bgImg.height])
|
||||
}
|
||||
bgImg.onerror = () => {
|
||||
resolve(null)
|
||||
}
|
||||
bgImg.src = backgroundImage
|
||||
})
|
||||
if (bgImgSize) {
|
||||
const imgRatio = imgWidth / imgHeight
|
||||
const bgRatio = bgImgSize[0] / bgImgSize[1]
|
||||
if (imgRatio > bgRatio) {
|
||||
fitBgImgWidth = imgWidth
|
||||
fitBgImgHeight = imgWidth / bgRatio
|
||||
} else {
|
||||
fitBgImgHeight = imgHeight
|
||||
fitBgImgWidth = imgHeight * bgRatio
|
||||
}
|
||||
}
|
||||
}
|
||||
// 检查是否超出canvas支持的像素上限
|
||||
// canvas大小需要乘以dpr
|
||||
let scaleX = 1
|
||||
let scaleY = 1
|
||||
let canvasWidth = (fitBgImgWidth || imgWidth) * dpr
|
||||
let canvasHeight = (fitBgImgHeight || imgHeight) * dpr
|
||||
if (canvasWidth > maxCanvasSize || canvasHeight > maxCanvasSize) {
|
||||
let newWidth = null
|
||||
let newHeight = null
|
||||
if (canvasWidth > maxCanvasSize) {
|
||||
// 如果宽度超出限制，那么调整为上限值
|
||||
newWidth = maxCanvasSize
|
||||
} else if (canvasHeight > maxCanvasSize) {
|
||||
// 高度同理
|
||||
newHeight = maxCanvasSize
|
||||
}
|
||||
// 计算缩放后的宽高
|
||||
const res = resizeImgSize(
|
||||
canvasWidth,
|
||||
canvasHeight,
|
||||
newWidth,
|
||||
newHeight
|
||||
)
|
||||
scaleX = res[0] / canvasWidth
|
||||
scaleY = res[1] / canvasHeight
|
||||
canvasWidth = res[0]
|
||||
canvasHeight = res[1]
|
||||
}
|
||||
canvas.width = canvasWidth
|
||||
canvas.height = canvasHeight
|
||||
const styleWidth = canvasWidth / dpr
|
||||
const styleHeight = canvasHeight / dpr
|
||||
// canvas元素实际上的大小
|
||||
canvas.style.width = styleWidth + 'px'
|
||||
canvas.style.height = styleHeight + 'px'
|
||||
const ctx = canvas.getContext('2d')
|
||||
ctx.scale(dpr, dpr)
|
||||
// 绘制背景
|
||||
if (!transparent) {
|
||||
await this.drawBackgroundToCanvas(ctx, styleWidth, styleHeight)
|
||||
}
|
||||
// 图片绘制到canvas里
|
||||
// 如果有裁减数据，那么需要进行裁减
|
||||
const fitBgLeft =
|
||||
(fitBgImgWidth > 0 ? (fitBgImgWidth - imgWidth) / 2 : 0) * scaleX
|
||||
const fitBgTop =
|
||||
(fitBgImgHeight > 0 ? (fitBgImgHeight - imgHeight) / 2 : 0) * scaleY
|
||||
if (clipData) {
|
||||
ctx.drawImage(
|
||||
img,
|
||||
clipData.left,
|
||||
clipData.top,
|
||||
clipData.width,
|
||||
clipData.height,
|
||||
paddingX * scaleX + fitBgLeft,
|
||||
paddingY * scaleY + fitBgTop,
|
||||
clipData.width * scaleX,
|
||||
clipData.height * scaleY
|
||||
)
|
||||
} else {
|
||||
ctx.drawImage(
|
||||
img,
|
||||
fitBgLeft,
|
||||
fitBgTop,
|
||||
imgWidth * scaleX,
|
||||
imgHeight * scaleY
|
||||
)
|
||||
}
|
||||
resolve(canvas.toDataURL(format))
|
||||
} catch (error) {
|
||||
reject(error)
|
||||
}
|
||||
}
|
||||
img.onerror = e => {
|
||||
reject(e)
|
||||
}
|
||||
img.src = svgSrc
|
||||
})
|
||||
}
|
||||
|
||||
// 在canvas上绘制思维导图背景
|
||||
drawBackgroundToCanvas(ctx, width, height) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const {
|
||||
backgroundColor = '#fff',
|
||||
backgroundImage,
|
||||
backgroundRepeat = 'no-repeat',
|
||||
backgroundPosition = 'center center',
|
||||
backgroundSize = 'cover'
|
||||
} = this.mindMap.themeConfig
|
||||
// 背景颜色
|
||||
ctx.save()
|
||||
ctx.rect(0, 0, width, height)
|
||||
ctx.fillStyle = backgroundColor
|
||||
ctx.fill()
|
||||
ctx.restore()
|
||||
// 背景图片
|
||||
if (backgroundImage && backgroundImage !== 'none') {
|
||||
ctx.save()
|
||||
drawBackgroundImageToCanvas(
|
||||
ctx,
|
||||
width,
|
||||
height,
|
||||
backgroundImage,
|
||||
{
|
||||
backgroundRepeat,
|
||||
backgroundPosition,
|
||||
backgroundSize
|
||||
},
|
||||
err => {
|
||||
if (err) {
|
||||
reject(err)
|
||||
} else {
|
||||
resolve()
|
||||
}
|
||||
ctx.restore()
|
||||
}
|
||||
)
|
||||
} else {
|
||||
resolve()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 在svg上绘制思维导图背景
|
||||
drawBackgroundToSvg(svg) {
|
||||
return new Promise(async resolve => {
|
||||
const {
|
||||
backgroundColor = '#fff',
|
||||
backgroundImage,
|
||||
backgroundRepeat = 'repeat'
|
||||
} = this.mindMap.themeConfig
|
||||
// 背景颜色
|
||||
svg.css('background-color', backgroundColor)
|
||||
// 背景图片
|
||||
if (backgroundImage && backgroundImage !== 'none') {
|
||||
const imgDataUrl = await imgToDataUrl(backgroundImage)
|
||||
svg.css('background-image', `url(${imgDataUrl})`)
|
||||
svg.css('background-repeat', backgroundRepeat)
|
||||
resolve()
|
||||
} else {
|
||||
resolve()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 导出为指定格式的图片
|
||||
async _image(format, name, transparent = false, node = null, fitBg = false) {
|
||||
this.mindMap.renderer.textEdit.hideEditTextBox()
|
||||
this.handleNodeExport(node)
|
||||
const { str, clipData } = await this.getSvgData(node)
|
||||
const svgUrl = await this.fixSvgStrAndToBlob(str)
|
||||
const res = await this.svgToPng(
|
||||
svgUrl,
|
||||
transparent,
|
||||
clipData,
|
||||
fitBg,
|
||||
format
|
||||
)
|
||||
return res
|
||||
}
|
||||
|
||||
// 导出为png
|
||||
/**
|
||||
* 方法1.把svg的图片都转化成data:url格式，再转换
|
||||
* 方法2.把svg的图片提取出来再挨个绘制到canvas里，最后一起转换
|
||||
*/
|
||||
async png(...args) {
|
||||
const res = await this._image('image/png', ...args)
|
||||
return res
|
||||
}
|
||||
|
||||
// 导出为jpg
|
||||
async jpg(...args) {
|
||||
const res = await this._image('image/jpg', ...args)
|
||||
return res
|
||||
}
|
||||
|
||||
// 导出指定节点，如果该节点是激活状态，那么取消激活和隐藏展开收起按钮
|
||||
handleNodeExport(node) {
|
||||
if (node && node.getData('isActive')) {
|
||||
node.deactivate()
|
||||
const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
|
||||
if (!alwaysShowExpandBtn && !notShowExpandBtn && node.getData('expand')) {
|
||||
node.removeExpandBtn()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 导出为pdf
|
||||
async pdf(name, transparent = false, fitBg = false) {
|
||||
if (!this.mindMap.doExportPDF) {
|
||||
throw new Error('请注册ExportPDF插件')
|
||||
}
|
||||
const img = await this.png(name, transparent, null, fitBg)
|
||||
// 使用jspdf库
|
||||
// await this.mindMap.doExportPDF.pdf(name, img)
|
||||
// 使用pdf-lib库
|
||||
const res = await this.mindMap.doExportPDF.pdf(img)
|
||||
return res
|
||||
}
|
||||
|
||||
// 导出为xmind
|
||||
async xmind(name) {
|
||||
if (!this.mindMap.doExportXMind) {
|
||||
throw new Error('请注册ExportXMind插件')
|
||||
}
|
||||
const data = this.mindMap.getData()
|
||||
const blob = await this.mindMap.doExportXMind.xmind(data, name)
|
||||
const res = await readBlob(blob)
|
||||
return res
|
||||
}
|
||||
|
||||
// 导出为svg
|
||||
async svg(name) {
|
||||
this.mindMap.renderer.textEdit.hideEditTextBox()
|
||||
const { node } = await this.getSvgData()
|
||||
node.first().before(SVG(`<title>${name}</title>`))
|
||||
await this.drawBackgroundToSvg(node)
|
||||
const str = node.svg()
|
||||
const res = await this.fixSvgStrAndToBlob(str)
|
||||
return res
|
||||
}
|
||||
|
||||
// 修复svg字符串，并且转换为blob数据
|
||||
async fixSvgStrAndToBlob(str) {
|
||||
// 移除字符串中的html实体
|
||||
str = removeHTMLEntities(str)
|
||||
// 给html自闭合标签添加闭合状态
|
||||
str = handleSelfCloseTags(str)
|
||||
// 转换成blob数据
|
||||
const blob = new Blob([str], {
|
||||
type: 'image/svg+xml'
|
||||
})
|
||||
const res = await readBlob(blob)
|
||||
return res
|
||||
}
|
||||
|
||||
// 导出为json
|
||||
async json(name, withConfig = true) {
|
||||
const data = this.mindMap.getData(withConfig)
|
||||
const str = JSON.stringify(data)
|
||||
const blob = new Blob([str])
|
||||
const res = await readBlob(blob)
|
||||
return res
|
||||
}
|
||||
|
||||
// 专有文件，其实就是json文件
|
||||
async smm(name, withConfig) {
|
||||
const res = await this.json(name, withConfig)
|
||||
return res
|
||||
}
|
||||
|
||||
// markdown文件
|
||||
async md() {
|
||||
const data = this.mindMap.getData()
|
||||
const content = transformToMarkdown(data)
|
||||
const blob = new Blob([content])
|
||||
const res = await readBlob(blob)
|
||||
return res
|
||||
}
|
||||
|
||||
// txt文件
|
||||
async txt() {
|
||||
const data = this.mindMap.getData()
|
||||
const content = transformToTxt(data)
|
||||
const blob = new Blob([content])
|
||||
const res = await readBlob(blob)
|
||||
return res
|
||||
}
|
||||
}
|
||||
|
||||
Export.instanceName = 'doExport'
|
||||
|
||||
export default Export
|
||||
@@ -0,0 +1,71 @@
|
||||
// import JsPDF from '../utils/jspdf'
|
||||
import { PDFDocument } from 'pdf-lib'
|
||||
import { readBlob } from '../utils/index'
|
||||
|
||||
// 导出PDF插件，需要通过Export插件使用
|
||||
class ExportPDF {
|
||||
// 构造函数
|
||||
constructor(opt) {
|
||||
this.mindMap = opt.mindMap
|
||||
}
|
||||
|
||||
// 使用pdf-lib库导出为pdf
|
||||
async pdf(img) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const image = new Image()
|
||||
image.onload = async () => {
|
||||
const imageWidth = image.width
|
||||
const imageHeight = image.height
|
||||
// 创建pdf页面，尺寸设置为图片的大小
|
||||
const pdfDoc = await PDFDocument.create()
|
||||
const page = pdfDoc.addPage()
|
||||
page.setSize(imageWidth, imageHeight)
|
||||
// 添加图片到pdf
|
||||
const pngImage = await pdfDoc.embedPng(img)
|
||||
page.drawImage(pngImage, {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: imageWidth,
|
||||
height: imageHeight
|
||||
})
|
||||
const pdfBytes = await pdfDoc.save()
|
||||
const blob = new Blob([pdfBytes])
|
||||
const res = await readBlob(blob)
|
||||
resolve(res)
|
||||
}
|
||||
image.onerror = e => {
|
||||
reject(e)
|
||||
}
|
||||
image.src = img
|
||||
})
|
||||
}
|
||||
|
||||
// 使用jspdf库导出为pdf
|
||||
// async pdf(name, img) {
|
||||
// return new Promise((resolve, reject) => {
|
||||
// const image = new Image()
|
||||
// image.onload = () => {
|
||||
// const imageWidth = image.width
|
||||
// const imageHeight = image.height
|
||||
// const pdf = new JsPDF({
|
||||
// unit: 'px',
|
||||
// format: [imageWidth, imageHeight],
|
||||
// compress: true,
|
||||
// hotfixes: ['px_scaling'],
|
||||
// orientation: imageWidth > imageHeight ? 'landscape' : 'portrait'
|
||||
// })
|
||||
// pdf.addImage(img, 'PNG', 0, 0, imageWidth, imageHeight)
|
||||
// pdf.save(name)
|
||||
// resolve()
|
||||
// }
|
||||
// image.onerror = e => {
|
||||
// reject(e)
|
||||
// }
|
||||
// image.src = img
|
||||
// })
|
||||
// }
|
||||
}
|
||||
|
||||
ExportPDF.instanceName = 'doExportPDF'
|
||||
|
||||
export default ExportPDF
|
||||
@@ -0,0 +1,24 @@
|
||||
import xmind from '../parse/xmind'
|
||||
|
||||
// 导出XMind插件，需要通过Export插件使用
|
||||
class ExportXMind {
|
||||
// 构造函数
|
||||
constructor(opt) {
|
||||
this.mindMap = opt.mindMap
|
||||
}
|
||||
|
||||
// 导出xmind
|
||||
async xmind(data, name) {
|
||||
const zipData = await xmind.transformToXmind(data, name)
|
||||
return zipData
|
||||
}
|
||||
|
||||
// 获取解析器
|
||||
getXmind() {
|
||||
return xmind
|
||||
}
|
||||
}
|
||||
|
||||
ExportXMind.instanceName = 'doExportXMind'
|
||||
|
||||
export default ExportXMind
|
||||
@@ -0,0 +1,209 @@
|
||||
import katex from 'katex'
|
||||
import Quill from 'quill'
|
||||
import { getChromeVersion, htmlEscape } from '../utils/index'
|
||||
import { getBaseStyleText, getFontStyleText } from './FormulaStyle'
|
||||
|
||||
let extended = false
|
||||
const QuillFormula = Quill.import('formats/formula')
|
||||
|
||||
// 数学公式支持插件
|
||||
// 该插件在富文本模式下可用
|
||||
class Formula {
|
||||
// 构造函数
|
||||
constructor(opt) {
|
||||
this.opt = opt
|
||||
this.mindMap = opt.mindMap
|
||||
window.katex = katex
|
||||
this.init()
|
||||
this.config = this.getKatexConfig()
|
||||
this.cssEl = null
|
||||
this.addStyle()
|
||||
this.extendQuill()
|
||||
this.onDestroy = this.onDestroy.bind(this)
|
||||
this.mindMap.on('beforeDestroy', this.onDestroy)
|
||||
}
|
||||
|
||||
onDestroy() {
|
||||
const instanceCount = Object.getPrototypeOf(this.mindMap).constructor
|
||||
.instanceCount
|
||||
// 如果思维导图实例数量变成0了，那么就恢复成默认的
|
||||
if (instanceCount <= 1) {
|
||||
extended = false
|
||||
Quill.register('formats/formula', QuillFormula, true)
|
||||
}
|
||||
}
|
||||
|
||||
init() {
|
||||
if (this.mindMap.opt.enableEditFormulaInRichTextEdit) {
|
||||
this.mindMap.opt.transformRichTextOnEnterEdit =
|
||||
this.latexRichToText.bind(this)
|
||||
this.mindMap.opt.beforeHideRichTextEdit = this.formatLatex.bind(this)
|
||||
}
|
||||
}
|
||||
|
||||
// 获取katex配置
|
||||
getKatexConfig() {
|
||||
const config = {
|
||||
throwOnError: false,
|
||||
errorColor: '#f00',
|
||||
output: 'mathml' // 默认只输出公式
|
||||
}
|
||||
let { getKatexOutputType } = this.mindMap.opt
|
||||
getKatexOutputType =
|
||||
getKatexOutputType ||
|
||||
function () {
|
||||
// Chrome内核100以下，mathml配置公式无法正确渲染
|
||||
const chromeVersion = getChromeVersion()
|
||||
if (chromeVersion && chromeVersion <= 100) {
|
||||
return 'html'
|
||||
}
|
||||
}
|
||||
const output = getKatexOutputType() || 'mathml'
|
||||
config.output = ['mathml', 'html'].includes(output) ? output : 'mathml'
|
||||
return config
|
||||
}
|
||||
|
||||
// 修改formula格式工具
|
||||
extendQuill() {
|
||||
if (extended) return
|
||||
extended = true
|
||||
|
||||
const self = this
|
||||
|
||||
class CustomFormulaBlot extends QuillFormula {
|
||||
static create(value) {
|
||||
let node = super.create(value)
|
||||
if (typeof value === 'string') {
|
||||
katex.render(value, node, self.config)
|
||||
node.setAttribute('data-value', htmlEscape(value))
|
||||
}
|
||||
return node
|
||||
}
|
||||
}
|
||||
|
||||
Quill.register('formats/formula', CustomFormulaBlot, true)
|
||||
}
|
||||
|
||||
getStyleText() {
|
||||
const { katexFontPath } = this.mindMap.opt
|
||||
let text = ''
|
||||
if (this.config.output === 'html') {
|
||||
text = getFontStyleText(katexFontPath)
|
||||
}
|
||||
text += getBaseStyleText()
|
||||
return text
|
||||
}
|
||||
|
||||
addStyle() {
|
||||
this.cssEl = document.createElement('style')
|
||||
this.cssEl.type = 'text/css'
|
||||
this.cssEl.innerHTML = this.getStyleText()
|
||||
document.head.appendChild(this.cssEl)
|
||||
}
|
||||
|
||||
removeStyle() {
|
||||
document.head.removeChild(this.cssEl)
|
||||
}
|
||||
|
||||
// 给指定的节点插入指定公式
|
||||
insertFormulaToNode(node, formula) {
|
||||
const richTextPlugin = this.mindMap.richText
|
||||
richTextPlugin.showEditText({ node })
|
||||
richTextPlugin.quill.insertEmbed(
|
||||
richTextPlugin.quill.getLength() - 1,
|
||||
'formula',
|
||||
formula
|
||||
)
|
||||
richTextPlugin.hideEditText([node])
|
||||
}
|
||||
|
||||
// 将公式富文本转换为公式源码
|
||||
latexRichToText(nodeText) {
|
||||
if (nodeText.indexOf('class="ql-formula"') !== -1) {
|
||||
const parser = new DOMParser()
|
||||
const doc = parser.parseFromString(nodeText, 'text/html')
|
||||
const els = doc.getElementsByClassName('ql-formula')
|
||||
for (const el of els)
|
||||
nodeText = nodeText.replace(
|
||||
el.outerHTML,
|
||||
`$${el.getAttribute('data-value')}$`
|
||||
)
|
||||
// 如果开启了实时渲染，那么意味公式转换为源码时会影响节点尺寸，需要派发事件触发渲染
|
||||
if (this.mindMap.opt.openRealtimeRenderOnNodeTextEdit) {
|
||||
setTimeout(() => {
|
||||
this.mindMap.emit('node_text_edit_change', {
|
||||
node: this.mindMap.richText.node,
|
||||
text: this.mindMap.richText.getEditText(),
|
||||
richText: true
|
||||
})
|
||||
}, 0)
|
||||
}
|
||||
}
|
||||
return nodeText
|
||||
}
|
||||
|
||||
// 使用格式化的 latex 字符串内容更新 quill 内容：输入 $*****$
|
||||
formatLatex(richText) {
|
||||
const contents = richText.quill.getContents()
|
||||
const ops = contents.ops
|
||||
let mod = false
|
||||
for (let i = ops.length - 1; i >= 0; i--) {
|
||||
const op = ops[i]
|
||||
const insert = op.insert
|
||||
if (insert && typeof insert !== 'object' && insert !== '\n') {
|
||||
if (/\$.+?\$/g.test(insert)) {
|
||||
const m = [...insert.matchAll(/\$.+?\$/g)]
|
||||
const arr = insert.split(/\$.+?\$/g)
|
||||
for (let j = m.length - 1; j >= 0; j--) {
|
||||
const exp = m[j] && m[j][0] ? m[j][0].slice(1, -1) || null : null // $...$ 之间的表达式
|
||||
if (exp !== null && exp.trim().length > 0) {
|
||||
const isLegal = this.checkFormulaIsLegal(exp)
|
||||
if (isLegal) {
|
||||
arr.splice(j + 1, 0, { insert: { formula: exp } }) // 添加到对应位置之后
|
||||
mod = true
|
||||
} else {
|
||||
arr.splice(j + 1, 0, '')
|
||||
}
|
||||
} else arr.splice(j + 1, 0, '') // 表达式为空时，占位
|
||||
}
|
||||
while (arr.length > 0) {
|
||||
let v = arr.pop()
|
||||
if (typeof v === 'string') {
|
||||
if (v.length < 1) continue
|
||||
v = { insert: v }
|
||||
}
|
||||
v['attributes'] = ops[i]['attributes']
|
||||
ops.splice(i + 1, 0, v)
|
||||
}
|
||||
ops.splice(i, 1) // 删除原来的字符串
|
||||
}
|
||||
}
|
||||
}
|
||||
if (mod) richText.quill.setContents(contents)
|
||||
}
|
||||
|
||||
checkFormulaIsLegal(str) {
|
||||
try {
|
||||
katex.renderToString(str)
|
||||
return true
|
||||
} catch (e) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
// 插件被移除前做的事情
|
||||
beforePluginRemove() {
|
||||
this.removeStyle()
|
||||
this.mindMap.off('beforeDestroy', this.onDestroy)
|
||||
}
|
||||
|
||||
// 插件被卸载前做的事情
|
||||
beforePluginDestroy() {
|
||||
this.removeStyle()
|
||||
this.mindMap.off('beforeDestroy', this.onDestroy)
|
||||
}
|
||||
}
|
||||
|
||||
Formula.instanceName = 'formula'
|
||||
|
||||
export default Formula
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,287 @@
|
||||
import { bfsWalk } from '../utils'
|
||||
import { CONSTANTS } from '../constants/constant'
|
||||
|
||||
// 键盘导航插件
|
||||
class KeyboardNavigation {
|
||||
// 构造函数
|
||||
constructor(opt) {
|
||||
this.opt = opt
|
||||
this.mindMap = opt.mindMap
|
||||
|
||||
this.addShortcut()
|
||||
}
|
||||
|
||||
addShortcut() {
|
||||
this.onLeftKeyUp = this.onLeftKeyUp.bind(this)
|
||||
this.onUpKeyUp = this.onUpKeyUp.bind(this)
|
||||
this.onRightKeyUp = this.onRightKeyUp.bind(this)
|
||||
this.onDownKeyUp = this.onDownKeyUp.bind(this)
|
||||
|
||||
this.mindMap.keyCommand.addShortcut(
|
||||
CONSTANTS.KEY_DIR.LEFT,
|
||||
this.onLeftKeyUp
|
||||
)
|
||||
this.mindMap.keyCommand.addShortcut(CONSTANTS.KEY_DIR.UP, this.onUpKeyUp)
|
||||
this.mindMap.keyCommand.addShortcut(
|
||||
CONSTANTS.KEY_DIR.RIGHT,
|
||||
this.onRightKeyUp
|
||||
)
|
||||
this.mindMap.keyCommand.addShortcut(
|
||||
CONSTANTS.KEY_DIR.DOWN,
|
||||
this.onDownKeyUp
|
||||
)
|
||||
}
|
||||
|
||||
removeShortcut() {
|
||||
this.mindMap.keyCommand.removeShortcut(
|
||||
CONSTANTS.KEY_DIR.LEFT,
|
||||
this.onLeftKeyUp
|
||||
)
|
||||
this.mindMap.keyCommand.removeShortcut(CONSTANTS.KEY_DIR.UP, this.onUpKeyUp)
|
||||
this.mindMap.keyCommand.removeShortcut(
|
||||
CONSTANTS.KEY_DIR.RIGHT,
|
||||
this.onRightKeyUp
|
||||
)
|
||||
this.mindMap.keyCommand.removeShortcut(
|
||||
CONSTANTS.KEY_DIR.DOWN,
|
||||
this.onDownKeyUp
|
||||
)
|
||||
}
|
||||
|
||||
onLeftKeyUp() {
|
||||
this.onKeyup(CONSTANTS.KEY_DIR.LEFT)
|
||||
}
|
||||
|
||||
onUpKeyUp() {
|
||||
this.onKeyup(CONSTANTS.KEY_DIR.UP)
|
||||
}
|
||||
|
||||
onRightKeyUp() {
|
||||
this.onKeyup(CONSTANTS.KEY_DIR.RIGHT)
|
||||
}
|
||||
|
||||
onDownKeyUp() {
|
||||
this.onKeyup(CONSTANTS.KEY_DIR.DOWN)
|
||||
}
|
||||
|
||||
// 处理按键事件
|
||||
onKeyup(dir) {
|
||||
if (this.mindMap.renderer.activeNodeList.length > 0) {
|
||||
this.focus(dir)
|
||||
} else {
|
||||
let root = this.mindMap.renderer.root
|
||||
this.mindMap.execCommand('GO_TARGET_NODE', root)
|
||||
}
|
||||
}
|
||||
|
||||
// 聚焦到下一个节点
|
||||
focus(dir) {
|
||||
// 当前聚焦的节点
|
||||
let currentActiveNode = this.mindMap.renderer.activeNodeList[0]
|
||||
// 当前聚焦节点的位置信息
|
||||
let currentActiveNodeRect = this.getNodeRect(currentActiveNode)
|
||||
// 寻找的下一个聚焦节点
|
||||
let targetNode = null
|
||||
let targetDis = Infinity
|
||||
// 保存并维护距离最近的节点
|
||||
let checkNodeDis = (rect, node) => {
|
||||
let dis = this.getDistance(currentActiveNodeRect, rect)
|
||||
if (dis < targetDis) {
|
||||
targetNode = node
|
||||
targetDis = dis
|
||||
}
|
||||
}
|
||||
|
||||
// 第一优先级：阴影算法
|
||||
this.getFocusNodeByShadowAlgorithm({
|
||||
currentActiveNode,
|
||||
currentActiveNodeRect,
|
||||
dir,
|
||||
checkNodeDis
|
||||
})
|
||||
|
||||
// 第二优先级：区域算法
|
||||
if (!targetNode) {
|
||||
this.getFocusNodeByAreaAlgorithm({
|
||||
currentActiveNode,
|
||||
currentActiveNodeRect,
|
||||
dir,
|
||||
checkNodeDis
|
||||
})
|
||||
}
|
||||
|
||||
// 第三优先级：简单算法
|
||||
if (!targetNode) {
|
||||
this.getFocusNodeBySimpleAlgorithm({
|
||||
currentActiveNode,
|
||||
currentActiveNodeRect,
|
||||
dir,
|
||||
checkNodeDis
|
||||
})
|
||||
}
|
||||
|
||||
// 找到了则让目标节点聚焦
|
||||
if (targetNode) {
|
||||
this.mindMap.execCommand('GO_TARGET_NODE', targetNode)
|
||||
}
|
||||
}
|
||||
|
||||
// 1.简单算法
|
||||
getFocusNodeBySimpleAlgorithm({
|
||||
currentActiveNode,
|
||||
currentActiveNodeRect,
|
||||
dir,
|
||||
checkNodeDis
|
||||
}) {
|
||||
// 遍历节点树
|
||||
bfsWalk(this.mindMap.renderer.root, node => {
|
||||
// 跳过当前聚焦的节点
|
||||
if (node.uid === currentActiveNode.uid) return
|
||||
// 当前遍历到的节点的位置信息
|
||||
let rect = this.getNodeRect(node)
|
||||
let { left, top, right, bottom } = rect
|
||||
let match = false
|
||||
// 按下了左方向键
|
||||
if (dir === CONSTANTS.KEY_DIR.LEFT) {
|
||||
// 判断节点是否在当前节点的左侧
|
||||
match = right <= currentActiveNodeRect.left
|
||||
// 按下了右方向键
|
||||
} else if (dir === CONSTANTS.KEY_DIR.RIGHT) {
|
||||
// 判断节点是否在当前节点的右侧
|
||||
match = left >= currentActiveNodeRect.right
|
||||
// 按下了上方向键
|
||||
} else if (dir === CONSTANTS.KEY_DIR.UP) {
|
||||
// 判断节点是否在当前节点的上面
|
||||
match = bottom <= currentActiveNodeRect.top
|
||||
// 按下了下方向键
|
||||
} else if (dir === CONSTANTS.KEY_DIR.DOWN) {
|
||||
// 判断节点是否在当前节点的下面
|
||||
match = top >= currentActiveNodeRect.bottom
|
||||
}
|
||||
// 符合要求，判断是否是最近的节点
|
||||
if (match) {
|
||||
checkNodeDis(rect, node)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 2.阴影算法
|
||||
getFocusNodeByShadowAlgorithm({
|
||||
currentActiveNode,
|
||||
currentActiveNodeRect,
|
||||
dir,
|
||||
checkNodeDis
|
||||
}) {
|
||||
bfsWalk(this.mindMap.renderer.root, node => {
|
||||
if (node.uid === currentActiveNode.uid) return
|
||||
let rect = this.getNodeRect(node)
|
||||
let { left, top, right, bottom } = rect
|
||||
let match = false
|
||||
if (dir === CONSTANTS.KEY_DIR.LEFT) {
|
||||
match =
|
||||
left < currentActiveNodeRect.left &&
|
||||
top < currentActiveNodeRect.bottom &&
|
||||
bottom > currentActiveNodeRect.top
|
||||
} else if (dir === CONSTANTS.KEY_DIR.RIGHT) {
|
||||
match =
|
||||
right > currentActiveNodeRect.right &&
|
||||
top < currentActiveNodeRect.bottom &&
|
||||
bottom > currentActiveNodeRect.top
|
||||
} else if (dir === CONSTANTS.KEY_DIR.UP) {
|
||||
match =
|
||||
top < currentActiveNodeRect.top &&
|
||||
left < currentActiveNodeRect.right &&
|
||||
right > currentActiveNodeRect.left
|
||||
} else if (dir === CONSTANTS.KEY_DIR.DOWN) {
|
||||
match =
|
||||
bottom > currentActiveNodeRect.bottom &&
|
||||
left < currentActiveNodeRect.right &&
|
||||
right > currentActiveNodeRect.left
|
||||
}
|
||||
if (match) {
|
||||
checkNodeDis(rect, node)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 3.区域算法
|
||||
getFocusNodeByAreaAlgorithm({
|
||||
currentActiveNode,
|
||||
currentActiveNodeRect,
|
||||
dir,
|
||||
checkNodeDis
|
||||
}) {
|
||||
// 当前聚焦节点的中心点
|
||||
let cX = (currentActiveNodeRect.right + currentActiveNodeRect.left) / 2
|
||||
let cY = (currentActiveNodeRect.bottom + currentActiveNodeRect.top) / 2
|
||||
bfsWalk(this.mindMap.renderer.root, node => {
|
||||
if (node.uid === currentActiveNode.uid) return
|
||||
let rect = this.getNodeRect(node)
|
||||
let { left, top, right, bottom } = rect
|
||||
// 遍历到的节点的中心点
|
||||
let ccX = (right + left) / 2
|
||||
let ccY = (bottom + top) / 2
|
||||
// 节点的中心点坐标和当前聚焦节点的中心点坐标的差值
|
||||
let offsetX = ccX - cX
|
||||
let offsetY = ccY - cY
|
||||
if (offsetX === 0 && offsetY === 0) return
|
||||
let match = false
|
||||
if (dir === CONSTANTS.KEY_DIR.LEFT) {
|
||||
match = offsetX <= 0 && offsetX <= offsetY && offsetX <= -offsetY
|
||||
} else if (dir === CONSTANTS.KEY_DIR.RIGHT) {
|
||||
match = offsetX > 0 && offsetX >= -offsetY && offsetX >= offsetY
|
||||
} else if (dir === CONSTANTS.KEY_DIR.UP) {
|
||||
match = offsetY <= 0 && offsetY < offsetX && offsetY < -offsetX
|
||||
} else if (dir === CONSTANTS.KEY_DIR.DOWN) {
|
||||
match = offsetY > 0 && -offsetY < offsetX && offsetY > offsetX
|
||||
}
|
||||
if (match) {
|
||||
checkNodeDis(rect, node)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 获取节点的位置信息
|
||||
getNodeRect(node) {
|
||||
let { scaleX, scaleY, translateX, translateY } =
|
||||
this.mindMap.draw.transform()
|
||||
let { left, top, width, height } = node
|
||||
return {
|
||||
right: (left + width) * scaleX + translateX,
|
||||
bottom: (top + height) * scaleY + translateY,
|
||||
left: left * scaleX + translateX,
|
||||
top: top * scaleY + translateY
|
||||
}
|
||||
}
|
||||
|
||||
// 获取两个节点的距离
|
||||
getDistance(node1Rect, node2Rect) {
|
||||
let center1 = this.getCenter(node1Rect)
|
||||
let center2 = this.getCenter(node2Rect)
|
||||
return Math.sqrt(
|
||||
Math.pow(center1.x - center2.x, 2) + Math.pow(center1.y - center2.y, 2)
|
||||
)
|
||||
}
|
||||
|
||||
// 获取节点的中心点
|
||||
getCenter({ left, right, top, bottom }) {
|
||||
return {
|
||||
x: (left + right) / 2,
|
||||
y: (top + bottom) / 2
|
||||
}
|
||||
}
|
||||
|
||||
// 插件被移除前做的事情
|
||||
beforePluginRemove() {
|
||||
this.removeShortcut()
|
||||
}
|
||||
|
||||
// 插件被卸载前做的事情
|
||||
beforePluginDestroy() {
|
||||
this.removeShortcut()
|
||||
}
|
||||
}
|
||||
|
||||
KeyboardNavigation.instanceName = 'keyboardNavigation'
|
||||
|
||||
export default KeyboardNavigation
|
||||
@@ -0,0 +1,117 @@
|
||||
import { CONSTANTS } from '../constants/constant'
|
||||
|
||||
// 该插件会向节点数据的data中添加dir字段
|
||||
/*
|
||||
需要更新数据的情况：
|
||||
|
||||
1.实例化时的数据
|
||||
2.调用setData和updateData方法
|
||||
3.执行完命令
|
||||
4.切换结构
|
||||
*/
|
||||
|
||||
class MindMapLayoutPro {
|
||||
constructor(opt) {
|
||||
this.opt = opt
|
||||
this.mindMap = opt.mindMap
|
||||
this.init()
|
||||
}
|
||||
|
||||
init() {
|
||||
this.updateNodeTree = this.updateNodeTree.bind(this)
|
||||
this.afterExecCommand = this.afterExecCommand.bind(this)
|
||||
this.layoutChange = this.layoutChange.bind(this)
|
||||
|
||||
// 处理实例化时传入的数据
|
||||
if (this.mindMap.opt.data && this.isMindMapLayout()) {
|
||||
this.updateNodeTree(this.mindMap.opt.data)
|
||||
}
|
||||
|
||||
this.mindMap.on('layout_change', this.layoutChange)
|
||||
this.mindMap.on('afterExecCommand', this.afterExecCommand)
|
||||
this.mindMap.on('before_update_data', this.updateNodeTree)
|
||||
this.mindMap.on('before_set_data', this.updateNodeTree)
|
||||
}
|
||||
|
||||
restore() {
|
||||
this.mindMap.off('layout_change', this.layoutChange)
|
||||
this.mindMap.off('afterExecCommand', this.afterExecCommand)
|
||||
this.mindMap.off('before_update_data', this.updateNodeTree)
|
||||
this.mindMap.off('before_set_data', this.updateNodeTree)
|
||||
}
|
||||
|
||||
// 监听命令执行后的事件
|
||||
afterExecCommand(name) {
|
||||
if (!this.isMindMapLayout()) return
|
||||
if (
|
||||
![
|
||||
'BACK',
|
||||
'FORWARD',
|
||||
'INSERT_NODE',
|
||||
'INSERT_MULTI_NODE',
|
||||
'INSERT_CHILD_NODE',
|
||||
'INSERT_MULTI_CHILD_NODE',
|
||||
'INSERT_PARENT_NODE',
|
||||
'UP_NODE',
|
||||
'DOWN_NODE',
|
||||
'MOVE_UP_ONE_LEVEL',
|
||||
'INSERT_AFTER',
|
||||
'INSERT_BEFORE',
|
||||
'MOVE_NODE_TO',
|
||||
'REMOVE_NODE',
|
||||
'REMOVE_CURRENT_NODE',
|
||||
'PASTE_NODE',
|
||||
'CUT_NODE'
|
||||
].includes(name)
|
||||
)
|
||||
return
|
||||
this.updateRenderTree()
|
||||
}
|
||||
|
||||
// 更新布局结构
|
||||
layoutChange(layout) {
|
||||
if (layout === CONSTANTS.LAYOUT.MIND_MAP) {
|
||||
this.updateRenderTree()
|
||||
}
|
||||
}
|
||||
|
||||
// 更新当前的渲染树
|
||||
updateRenderTree() {
|
||||
this.updateNodeTree(this.mindMap.renderer.renderTree)
|
||||
}
|
||||
|
||||
// 更新节点树，修改二级节点的排列位置
|
||||
updateNodeTree(tree) {
|
||||
if (!this.isMindMapLayout()) return
|
||||
const root = tree
|
||||
const childrenLength = root.children.length
|
||||
if (childrenLength <= 0) return
|
||||
const center = Math.ceil(childrenLength / 2)
|
||||
root.children.forEach((item, index) => {
|
||||
if (index + 1 <= center) {
|
||||
item.data.dir = CONSTANTS.LAYOUT_GROW_DIR.RIGHT
|
||||
} else {
|
||||
item.data.dir = CONSTANTS.LAYOUT_GROW_DIR.LEFT
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 判断当前是否是思维导图布局结构
|
||||
isMindMapLayout() {
|
||||
return this.mindMap.opt.layout === CONSTANTS.LAYOUT.MIND_MAP
|
||||
}
|
||||
|
||||
// 插件被移除前做的事情
|
||||
beforePluginRemove() {
|
||||
this.restore()
|
||||
}
|
||||
|
||||
// 插件被卸载前做的事情
|
||||
beforePluginDestroy() {
|
||||
this.restore()
|
||||
}
|
||||
}
|
||||
|
||||
MindMapLayoutPro.instanceName = 'mindMapLayoutPro'
|
||||
|
||||
export default MindMapLayoutPro
|
||||
@@ -0,0 +1,223 @@
|
||||
import {
|
||||
isWhite,
|
||||
isTransparent,
|
||||
getVisibleColorFromTheme
|
||||
} from '../utils/index'
|
||||
|
||||
// 小地图插件
|
||||
class MiniMap {
|
||||
// 构造函数
|
||||
constructor(opt) {
|
||||
this.mindMap = opt.mindMap
|
||||
this.isMousedown = false
|
||||
this.mousedownPos = {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
this.startViewPos = {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
this.currentState = null
|
||||
}
|
||||
|
||||
// 计算小地图的渲染数据
|
||||
/**
|
||||
* boxWidth：小地图容器的宽度
|
||||
* boxHeight：小地图容器的高度
|
||||
*/
|
||||
calculationMiniMap(boxWidth, boxHeight) {
|
||||
let { svg, rect, origWidth, origHeight, scaleX, scaleY } =
|
||||
this.mindMap.getSvgData({
|
||||
ignoreWatermark: true
|
||||
})
|
||||
// 计算数据
|
||||
const elRect = this.mindMap.elRect
|
||||
rect.x -= elRect.left
|
||||
rect.x2 -= elRect.left
|
||||
rect.y -= elRect.top
|
||||
rect.y2 -= elRect.top
|
||||
let boxRatio = boxWidth / boxHeight
|
||||
let actWidth = 0
|
||||
let actHeight = 0
|
||||
if (boxRatio > rect.ratio) {
|
||||
// 高度以box为准，缩放宽度
|
||||
actHeight = boxHeight
|
||||
actWidth = rect.ratio * actHeight
|
||||
} else {
|
||||
// 宽度以box为准，缩放高度
|
||||
actWidth = boxWidth
|
||||
actHeight = actWidth / rect.ratio
|
||||
}
|
||||
// svg图形的缩放及位置
|
||||
let miniMapBoxScale = actWidth / rect.width
|
||||
let miniMapBoxLeft = (boxWidth - actWidth) / 2
|
||||
let miniMapBoxTop = (boxHeight - actHeight) / 2
|
||||
// 当前思维导图图形实际的宽高，即在缩放后的宽高
|
||||
let _rectWidth = rect.width * scaleX
|
||||
let _rectHeight = rect.height * scaleY
|
||||
// 视口框大小及位置
|
||||
let _rectWidthOffsetHalf = (_rectWidth - rect.width) / 2
|
||||
let _rectHeightOffsetHalf = (_rectHeight - rect.height) / 2
|
||||
let _rectX = rect.x - _rectWidthOffsetHalf
|
||||
let _rectX2 = rect.x2 + _rectWidthOffsetHalf
|
||||
let _rectY = rect.y - _rectHeightOffsetHalf
|
||||
let _rectY2 = rect.y2 + _rectHeightOffsetHalf
|
||||
let viewBoxStyle = {
|
||||
left: 0,
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0
|
||||
}
|
||||
viewBoxStyle.left =
|
||||
Math.max(0, (-_rectX / _rectWidth) * actWidth) + miniMapBoxLeft
|
||||
viewBoxStyle.right =
|
||||
Math.max(0, ((_rectX2 - origWidth) / _rectWidth) * actWidth) +
|
||||
miniMapBoxLeft
|
||||
|
||||
viewBoxStyle.top =
|
||||
Math.max(0, (-_rectY / _rectHeight) * actHeight) + miniMapBoxTop
|
||||
viewBoxStyle.bottom =
|
||||
Math.max(0, ((_rectY2 - origHeight) / _rectHeight) * actHeight) +
|
||||
miniMapBoxTop
|
||||
|
||||
if (viewBoxStyle.top > miniMapBoxTop + actHeight) {
|
||||
viewBoxStyle.top = miniMapBoxTop + actHeight
|
||||
}
|
||||
if (viewBoxStyle.left > miniMapBoxLeft + actWidth) {
|
||||
viewBoxStyle.left = miniMapBoxLeft + actWidth
|
||||
}
|
||||
|
||||
Object.keys(viewBoxStyle).forEach(key => {
|
||||
viewBoxStyle[key] = viewBoxStyle[key] + 'px'
|
||||
})
|
||||
this.removeNodeContent(svg)
|
||||
const svgStr = svg.svg()
|
||||
this.currentState = {
|
||||
viewBoxStyle: {
|
||||
...viewBoxStyle
|
||||
},
|
||||
miniMapBoxScale,
|
||||
miniMapBoxLeft,
|
||||
miniMapBoxTop
|
||||
}
|
||||
return {
|
||||
getImgUrl: async callback => {
|
||||
const res = await this.mindMap.doExport.fixSvgStrAndToBlob(svgStr)
|
||||
callback(res)
|
||||
},
|
||||
svgHTML: svgStr, // 小地图html
|
||||
viewBoxStyle, // 视图框的位置信息
|
||||
miniMapBoxScale, // 视图框的缩放值
|
||||
miniMapBoxLeft, // 视图框的left值
|
||||
miniMapBoxTop // 视图框的top值
|
||||
}
|
||||
}
|
||||
|
||||
// 移除节点的内容
|
||||
removeNodeContent(svg) {
|
||||
if (svg.hasClass('smm-node')) {
|
||||
let shape = svg.findOne('.smm-node-shape')
|
||||
let fill = shape.attr('fill')
|
||||
if (isWhite(fill) || isTransparent(fill)) {
|
||||
shape.attr('fill', getVisibleColorFromTheme(this.mindMap.themeConfig))
|
||||
}
|
||||
svg.clear()
|
||||
svg.add(shape)
|
||||
return
|
||||
}
|
||||
let children = svg.children()
|
||||
if (children && children.length > 0) {
|
||||
children.forEach(node => {
|
||||
this.removeNodeContent(node)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 小地图鼠标按下事件
|
||||
onMousedown(e) {
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
// 小地图鼠标移动事件
|
||||
onMousemove(e, sensitivityNum = 5) {
|
||||
if (!this.isMousedown || this.isViewBoxMousedown) {
|
||||
return
|
||||
}
|
||||
let ox = e.clientX - this.mousedownPos.x
|
||||
let oy = e.clientY - this.mousedownPos.y
|
||||
// 在视图最初偏移量上累加更新量
|
||||
this.mindMap.view.translateXTo(ox * sensitivityNum + this.startViewPos.x)
|
||||
this.mindMap.view.translateYTo(oy * sensitivityNum + this.startViewPos.y)
|
||||
}
|
||||
|
||||
// 小地图鼠标松开事件
|
||||
onMouseup() {
|
||||
this.isMousedown = false
|
||||
this.isViewBoxMousedown = false
|
||||
}
|
||||
|
||||
// 视口框鼠标按下事件
|
||||
onViewBoxMousedown(e) {
|
||||
this.isViewBoxMousedown = 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
|
||||
}
|
||||
}
|
||||
|
||||
// 视口框鼠标移动事件
|
||||
onViewBoxMousemove(e) {
|
||||
if (!this.isViewBoxMousedown || !this.currentState || this.isMousedown)
|
||||
return
|
||||
let ox = e.clientX - this.mousedownPos.x
|
||||
let oy = e.clientY - this.mousedownPos.y
|
||||
const { viewBoxStyle, miniMapBoxScale, miniMapBoxLeft, miniMapBoxTop } =
|
||||
this.currentState
|
||||
const left = Math.max(
|
||||
miniMapBoxLeft,
|
||||
Number.parseFloat(viewBoxStyle.left) + ox
|
||||
)
|
||||
const right = Math.max(
|
||||
miniMapBoxLeft,
|
||||
Number.parseFloat(viewBoxStyle.right) - ox
|
||||
)
|
||||
const top = Math.max(
|
||||
miniMapBoxTop,
|
||||
Number.parseFloat(viewBoxStyle.top) + oy
|
||||
)
|
||||
const bottom = Math.max(
|
||||
miniMapBoxTop,
|
||||
Number.parseFloat(viewBoxStyle.bottom) - oy
|
||||
)
|
||||
this.mindMap.emit('mini_map_view_box_position_change', {
|
||||
left: left + 'px',
|
||||
right: right + 'px',
|
||||
top: top + 'px',
|
||||
bottom: bottom + 'px'
|
||||
})
|
||||
// 在视图最初偏移量上累加更新量
|
||||
this.mindMap.view.translateXTo(-ox / miniMapBoxScale + this.startViewPos.x)
|
||||
this.mindMap.view.translateYTo(-oy / miniMapBoxScale + this.startViewPos.y)
|
||||
}
|
||||
}
|
||||
|
||||
MiniMap.instanceName = 'miniMap'
|
||||
|
||||
export default MiniMap
|
||||
@@ -0,0 +1,100 @@
|
||||
import { walk, createUid } from '../utils/index'
|
||||
|
||||
// 修改base64格式的节点图片在数据中的存储方式
|
||||
// 将base64格式的图片以key-map的形式存储在根节点的imgMap字段里，其他节点只保存key，避免不同的节点引用相同的图片重复存储的问题，普通url格式的图片不处理
|
||||
class NodeBase64ImageStorage {
|
||||
constructor(opt) {
|
||||
this.opt = opt
|
||||
this.mindMap = opt.mindMap
|
||||
this.bindEvent()
|
||||
}
|
||||
|
||||
bindEvent() {
|
||||
this.onBeforeAddHistory = this.onBeforeAddHistory.bind(this)
|
||||
this.mindMap.on('beforeAddHistory', this.onBeforeAddHistory)
|
||||
}
|
||||
|
||||
unBindEvent() {
|
||||
this.mindMap.off('beforeAddHistory', this.onBeforeAddHistory)
|
||||
}
|
||||
|
||||
isBase64ImgUrl(url) {
|
||||
return /^data:/.test(url)
|
||||
}
|
||||
|
||||
isImageKey(url) {
|
||||
return /^smm_img_key_/.test(url)
|
||||
}
|
||||
|
||||
createImageKey() {
|
||||
return 'smm_img_key_' + createUid()
|
||||
}
|
||||
|
||||
onBeforeAddHistory() {
|
||||
const renderTree = this.mindMap.renderer.renderTree
|
||||
if (!renderTree) return
|
||||
let imgMap = renderTree.data.imgMap
|
||||
if (!imgMap) {
|
||||
imgMap = renderTree.data.imgMap = {}
|
||||
}
|
||||
const useIds = []
|
||||
|
||||
const getImgIds = () => {
|
||||
return Object.keys(imgMap)
|
||||
}
|
||||
|
||||
const getImgId = image => {
|
||||
return getImgIds().find(id => {
|
||||
return imgMap[id] === image
|
||||
})
|
||||
}
|
||||
|
||||
walk(renderTree, null, node => {
|
||||
const image = node.data.image
|
||||
if (image) {
|
||||
// 如果是base64图片url
|
||||
if (this.isBase64ImgUrl(image)) {
|
||||
// 检查该图片是否已存在
|
||||
const hasId = getImgId(image)
|
||||
if (hasId) {
|
||||
// 已存在则直接使用现有的key
|
||||
useIds.push(hasId)
|
||||
node.data.image = hasId
|
||||
} else {
|
||||
// 不存在则生成key，并存储
|
||||
const newId = this.createImageKey()
|
||||
node.data.image = newId
|
||||
imgMap[newId] = image
|
||||
useIds.push(newId)
|
||||
}
|
||||
} else if (this.isImageKey(image)) {
|
||||
// 如果是key，那么收集一下
|
||||
if (getImgIds().includes(image)) {
|
||||
useIds.push(image)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 删除已无节点引用的图片
|
||||
getImgIds().forEach(id => {
|
||||
if (!useIds.includes(id)) {
|
||||
delete imgMap[id]
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 插件被移除前做的事情
|
||||
beforePluginRemove() {
|
||||
this.unBindEvent()
|
||||
}
|
||||
|
||||
// 插件被卸载前做的事情
|
||||
beforePluginDestroy() {
|
||||
this.unBindEvent()
|
||||
}
|
||||
}
|
||||
|
||||
NodeBase64ImageStorage.instanceName = 'nodeBase64ImageStorage'
|
||||
|
||||
export default NodeBase64ImageStorage
|
||||
@@ -0,0 +1,354 @@
|
||||
// 节点图片大小调整插件
|
||||
import { resizeImgSizeByOriginRatio } from '../utils/index'
|
||||
import btnsSvg from '../svg/btns'
|
||||
|
||||
class NodeImgAdjust {
|
||||
// 构造函数
|
||||
constructor({ mindMap }) {
|
||||
this.mindMap = mindMap
|
||||
this.handleEl = null // 自定义元素，用来渲染临时图片、调整按钮
|
||||
this.isShowHandleEl = false // 自定义元素是否在显示中
|
||||
this.node = null // 当前节点实例
|
||||
this.img = null // 当前节点的图片节点
|
||||
this.rect = null // 当前图片节点的尺寸信息
|
||||
this.isMousedown = false // 当前是否是按住调整按钮状态
|
||||
this.mousedownDrawTransform = null //鼠标按下时对当前画布的变换
|
||||
this.mousedownOffset = {
|
||||
// 鼠标按下时位置和图片右下角相差的距离
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
this.currentImgWidth = 0 // 当前拖拽实时图片的大小
|
||||
this.currentImgHeight = 0
|
||||
this.isAdjusted = false // 是否是拖拽结束后的渲染期间
|
||||
this.bindEvent()
|
||||
}
|
||||
|
||||
// 监听事件
|
||||
bindEvent() {
|
||||
this.onNodeImgMouseleave = this.onNodeImgMouseleave.bind(this)
|
||||
this.onNodeImgMousemove = this.onNodeImgMousemove.bind(this)
|
||||
this.onMousemove = this.onMousemove.bind(this)
|
||||
this.onMouseup = this.onMouseup.bind(this)
|
||||
this.onRenderEnd = this.onRenderEnd.bind(this)
|
||||
this.onScale = this.onScale.bind(this)
|
||||
this.mindMap.on('node_img_mouseleave', this.onNodeImgMouseleave)
|
||||
this.mindMap.on('node_img_mousemove', this.onNodeImgMousemove)
|
||||
this.mindMap.on('mousemove', this.onMousemove)
|
||||
this.mindMap.on('mouseup', this.onMouseup)
|
||||
this.mindMap.on('node_mouseup', this.onMouseup)
|
||||
this.mindMap.on('node_tree_render_end', this.onRenderEnd)
|
||||
this.mindMap.on('scale', this.onScale)
|
||||
}
|
||||
|
||||
// 解绑事件
|
||||
unBindEvent() {
|
||||
this.mindMap.off('node_img_mouseleave', this.onNodeImgMouseleave)
|
||||
this.mindMap.off('node_img_mousemove', this.onNodeImgMousemove)
|
||||
this.mindMap.off('mousemove', this.onMousemove)
|
||||
this.mindMap.off('mouseup', this.onMouseup)
|
||||
this.mindMap.off('node_mouseup', this.onMouseup)
|
||||
this.mindMap.off('node_tree_render_end', this.onRenderEnd)
|
||||
this.mindMap.off('scale', this.onScale)
|
||||
}
|
||||
|
||||
// 如果当前操作按钮正在显示时缩放了画布，那么需要更新位置
|
||||
onScale() {
|
||||
if (this.node && this.img && this.isShowHandleEl) {
|
||||
this.rect = this.img.rbox()
|
||||
this.setHandleElRect()
|
||||
}
|
||||
}
|
||||
|
||||
// 节点图片鼠标移动事件
|
||||
onNodeImgMousemove(node, img) {
|
||||
// 如果当前正在拖动调整中那么直接返回
|
||||
if (this.isMousedown || this.isAdjusted || this.mindMap.opt.readonly) return
|
||||
// 如果在当前节点内移动，以及自定义元素已经是显示状态，那么直接返回
|
||||
if (this.node && this.node.uid === node.uid && this.isShowHandleEl) return
|
||||
// 更新当前节点信息
|
||||
this.node = node
|
||||
this.img = img
|
||||
this.rect = this.img.rbox()
|
||||
// 显示自定义元素
|
||||
this.showHandleEl()
|
||||
}
|
||||
|
||||
// 节点图片鼠标移出事件
|
||||
onNodeImgMouseleave() {
|
||||
if (this.isMousedown) return
|
||||
this.hideHandleEl()
|
||||
}
|
||||
|
||||
// 隐藏节点实际的图片
|
||||
hideNodeImage() {
|
||||
if (!this.img) return
|
||||
this.img.hide()
|
||||
}
|
||||
|
||||
// 显示节点实际的图片
|
||||
showNodeImage() {
|
||||
if (!this.img) return
|
||||
this.img.show()
|
||||
}
|
||||
|
||||
// 显示自定义元素
|
||||
showHandleEl() {
|
||||
if (this.isShowHandleEl) return
|
||||
if (!this.handleEl) {
|
||||
this.createResizeBtnEl()
|
||||
}
|
||||
this.setHandleElRect()
|
||||
this.handleEl.style.display = 'block'
|
||||
this.isShowHandleEl = true
|
||||
}
|
||||
|
||||
// 隐藏自定义元素
|
||||
hideHandleEl() {
|
||||
if (!this.isShowHandleEl) return
|
||||
this.isShowHandleEl = false
|
||||
this.handleEl.style.display = 'none'
|
||||
this.handleEl.style.backgroundImage = ``
|
||||
this.handleEl.style.width = 0
|
||||
this.handleEl.style.height = 0
|
||||
this.handleEl.style.left = 0
|
||||
this.handleEl.style.top = 0
|
||||
}
|
||||
|
||||
// 设置自定义元素尺寸位置信息
|
||||
setHandleElRect() {
|
||||
let { width, height, x, y } = this.rect
|
||||
this.handleEl.style.left = `${x}px`
|
||||
this.handleEl.style.top = `${y}px`
|
||||
this.currentImgWidth = width
|
||||
this.currentImgHeight = height
|
||||
this.updateHandleElSize()
|
||||
}
|
||||
|
||||
// 更新自定义元素宽高
|
||||
updateHandleElSize() {
|
||||
this.handleEl.style.width = `${this.currentImgWidth}px`
|
||||
this.handleEl.style.height = `${this.currentImgHeight}px`
|
||||
}
|
||||
|
||||
// 创建调整按钮元素
|
||||
createResizeBtnEl() {
|
||||
const {
|
||||
imgResizeBtnSize,
|
||||
customResizeBtnInnerHTML,
|
||||
customDeleteBtnInnerHTML
|
||||
} = this.mindMap.opt
|
||||
// 容器元素
|
||||
this.handleEl = document.createElement('div')
|
||||
this.handleEl.style.cssText = `
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
display:none;
|
||||
background-size: cover;
|
||||
`
|
||||
this.handleEl.className = 'node-img-handle'
|
||||
// 调整按钮元素
|
||||
const btnEl = document.createElement('div')
|
||||
btnEl.innerHTML = customResizeBtnInnerHTML || btnsSvg.imgAdjust
|
||||
btnEl.style.cssText = `
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: auto;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
width: ${imgResizeBtnSize}px;
|
||||
height: ${imgResizeBtnSize}px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: nwse-resize;
|
||||
`
|
||||
btnEl.className = 'node-image-resize'
|
||||
// 给按钮元素绑定事件
|
||||
btnEl.addEventListener('mouseenter', () => {
|
||||
// 移入按钮，会触发节点图片的移出事件，所以需要再次显示按钮
|
||||
this.showHandleEl()
|
||||
})
|
||||
btnEl.addEventListener('mouseleave', () => {
|
||||
// 移除按钮，需要隐藏按钮
|
||||
if (this.isMousedown) return
|
||||
this.hideHandleEl()
|
||||
})
|
||||
btnEl.addEventListener('mousedown', e => {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
this.onMousedown(e)
|
||||
})
|
||||
btnEl.addEventListener('mouseup', e => {
|
||||
setTimeout(() => {
|
||||
//点击后直接松开异常处理; 其他事件响应之后处理
|
||||
this.hideHandleEl()
|
||||
this.isAdjusted = false
|
||||
}, 0)
|
||||
})
|
||||
btnEl.addEventListener('click', e => {
|
||||
e.stopPropagation()
|
||||
})
|
||||
this.handleEl.appendChild(btnEl)
|
||||
// 删除按钮
|
||||
const btnRemove = document.createElement('div')
|
||||
this.handleEl.prepend(btnRemove)
|
||||
btnRemove.className = 'node-image-remove'
|
||||
btnRemove.innerHTML = customDeleteBtnInnerHTML || btnsSvg.remove
|
||||
btnRemove.style.cssText = `
|
||||
position: absolute;
|
||||
right: 0;top:0;color:#fff;
|
||||
pointer-events: auto;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
width: ${imgResizeBtnSize}px;
|
||||
height: ${imgResizeBtnSize}px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
`
|
||||
btnRemove.addEventListener('mouseenter', e => {
|
||||
this.showHandleEl()
|
||||
})
|
||||
btnRemove.addEventListener('mouseleave', e => {
|
||||
if (this.isMousedown) return
|
||||
this.hideHandleEl()
|
||||
})
|
||||
btnRemove.addEventListener('click', async e => {
|
||||
let stop = false
|
||||
if (typeof this.mindMap.opt.beforeDeleteNodeImg === 'function') {
|
||||
stop = await this.mindMap.opt.beforeDeleteNodeImg(this.node)
|
||||
}
|
||||
if (!stop) {
|
||||
this.mindMap.execCommand('SET_NODE_IMAGE', this.node, { url: null })
|
||||
this.mindMap.emit('delete_node_img_from_delete_btn', this.node)
|
||||
}
|
||||
})
|
||||
// 添加元素到页面
|
||||
const targetNode = this.mindMap.opt.customInnerElsAppendTo || document.body
|
||||
targetNode.appendChild(this.handleEl)
|
||||
}
|
||||
|
||||
// 鼠标按钮按下事件
|
||||
onMousedown(e) {
|
||||
this.mindMap.emit('node_img_adjust_btn_mousedown', this.node)
|
||||
this.isMousedown = true
|
||||
this.mousedownDrawTransform = this.mindMap.draw.transform()
|
||||
// 隐藏节点实际图片
|
||||
this.hideNodeImage()
|
||||
this.mousedownOffset.x = e.clientX - this.rect.x2
|
||||
this.mousedownOffset.y = e.clientY - this.rect.y2
|
||||
// 将节点图片渲染到自定义元素上
|
||||
this.handleEl.style.backgroundImage = `url(${this.node.getData('image')})`
|
||||
}
|
||||
|
||||
// 鼠标移动
|
||||
onMousemove(e) {
|
||||
if (!this.isMousedown) return
|
||||
e.preventDefault()
|
||||
const { scaleX, scaleY } = this.mousedownDrawTransform
|
||||
// 图片原始大小
|
||||
const { width: imageOriginWidth, height: imageOriginHeight } =
|
||||
this.node.getData('imageSize')
|
||||
let {
|
||||
minImgResizeWidth,
|
||||
minImgResizeHeight,
|
||||
maxImgResizeWidthInheritTheme,
|
||||
maxImgResizeWidth,
|
||||
maxImgResizeHeight
|
||||
} = this.mindMap.opt
|
||||
// 主题设置的最小图片宽高
|
||||
const minRatio = minImgResizeWidth / minImgResizeHeight
|
||||
const oRatio = imageOriginWidth / imageOriginHeight
|
||||
if (minRatio > oRatio) {
|
||||
// 如果最小值比例大于图片原始比例，那么要调整高度最小值
|
||||
minImgResizeHeight = minImgResizeWidth / oRatio
|
||||
} else {
|
||||
// 否则调整宽度最小值
|
||||
minImgResizeWidth = minImgResizeHeight * oRatio
|
||||
}
|
||||
// 主题设置的最大图片宽高
|
||||
let imgMaxWidth, imgMaxHeight
|
||||
if (maxImgResizeWidthInheritTheme) {
|
||||
imgMaxWidth = this.mindMap.getThemeConfig('imgMaxWidth')
|
||||
imgMaxHeight = this.mindMap.getThemeConfig('imgMaxHeight')
|
||||
} else {
|
||||
imgMaxWidth = maxImgResizeWidth
|
||||
imgMaxHeight = maxImgResizeHeight
|
||||
}
|
||||
imgMaxWidth = imgMaxWidth * scaleX
|
||||
imgMaxHeight = imgMaxHeight * scaleY
|
||||
// 计算当前拖拽位置对应的图片的实时大小
|
||||
let newWidth = Math.abs(e.clientX - this.rect.x - this.mousedownOffset.x)
|
||||
let newHeight = Math.abs(e.clientY - this.rect.y - this.mousedownOffset.y)
|
||||
// 限制最小值
|
||||
if (newWidth < minImgResizeWidth) newWidth = minImgResizeWidth
|
||||
if (newHeight < minImgResizeHeight) newHeight = minImgResizeHeight
|
||||
// 限制最大值
|
||||
if (newWidth > imgMaxWidth) newWidth = imgMaxWidth
|
||||
if (newHeight > imgMaxHeight) newHeight = imgMaxHeight
|
||||
const [actWidth, actHeight] = resizeImgSizeByOriginRatio(
|
||||
imageOriginWidth,
|
||||
imageOriginHeight,
|
||||
newWidth,
|
||||
newHeight
|
||||
)
|
||||
this.currentImgWidth = actWidth
|
||||
this.currentImgHeight = actHeight
|
||||
this.updateHandleElSize()
|
||||
}
|
||||
|
||||
// 鼠标松开
|
||||
onMouseup() {
|
||||
if (!this.isMousedown) return
|
||||
// 显示节点实际图片
|
||||
this.showNodeImage()
|
||||
// 隐藏自定义元素
|
||||
this.hideHandleEl()
|
||||
// 更新节点图片为新的大小
|
||||
const { image, imageTitle } = this.node.getData()
|
||||
const { scaleX, scaleY } = this.mousedownDrawTransform
|
||||
const newWidth = this.currentImgWidth / scaleX
|
||||
const newHeight = this.currentImgHeight / scaleY
|
||||
if (
|
||||
Math.abs(newWidth - this.rect.width) > 1 ||
|
||||
Math.abs(newHeight - this.rect.height) > 1
|
||||
) {
|
||||
this.mindMap.execCommand('SET_NODE_IMAGE', this.node, {
|
||||
url: image,
|
||||
title: imageTitle,
|
||||
width: newWidth,
|
||||
height: newHeight,
|
||||
custom: true // 代表自定义了图片大小
|
||||
})
|
||||
this.isAdjusted = true
|
||||
}
|
||||
this.isMousedown = false
|
||||
this.mousedownDrawTransform = null
|
||||
this.mousedownOffset.x = 0
|
||||
this.mousedownOffset.y = 0
|
||||
}
|
||||
|
||||
// 渲染完成事件
|
||||
onRenderEnd() {
|
||||
if (!this.isAdjusted) {
|
||||
this.hideHandleEl()
|
||||
return
|
||||
}
|
||||
this.isAdjusted = false
|
||||
}
|
||||
|
||||
// 插件被移除前做的事情
|
||||
beforePluginRemove() {
|
||||
this.unBindEvent()
|
||||
}
|
||||
|
||||
// 插件被卸载前做的事情
|
||||
beforePluginDestroy() {
|
||||
this.unBindEvent()
|
||||
}
|
||||
}
|
||||
|
||||
NodeImgAdjust.instanceName = 'nodeImgAdjust'
|
||||
|
||||
export default NodeImgAdjust
|
||||
@@ -0,0 +1,413 @@
|
||||
import {
|
||||
formatDataToArray,
|
||||
walk,
|
||||
getNodeListBoundingRect,
|
||||
createUid
|
||||
} from '../utils'
|
||||
import {
|
||||
parseAddNodeList,
|
||||
getNodeOuterFrameList
|
||||
} from './outerFrame/outerFrameUtils'
|
||||
import outerFrameTextMethods from './outerFrame/outerFrameText'
|
||||
|
||||
// 默认外框样式
|
||||
const defaultStyle = {
|
||||
// 外框圆角大小
|
||||
radius: 5,
|
||||
// 外框边框宽度
|
||||
strokeWidth: 2,
|
||||
// 外框边框颜色
|
||||
strokeColor: '#0984e3',
|
||||
// 外框边框虚线样式
|
||||
strokeDasharray: '5,5',
|
||||
// 外框填充颜色
|
||||
fill: 'rgba(9,132,227,0.05)',
|
||||
// 外框文字字号
|
||||
fontSize: 14,
|
||||
// 外框文字字体
|
||||
fontFamily: '微软雅黑, Microsoft YaHei',
|
||||
// 加粗
|
||||
fontWeight: 'normal', // bold
|
||||
// 斜体
|
||||
fontStyle: 'normal', // italic
|
||||
// 外框文字颜色
|
||||
color: '#fff',
|
||||
// 外框文字行高
|
||||
lineHeight: 1.2,
|
||||
// 外框文字背景
|
||||
textFill: '#0984e3',
|
||||
// 外框文字圆角
|
||||
textFillRadius: 5,
|
||||
// 外框文字矩内边距，左上右下
|
||||
textFillPadding: [5, 5, 5, 5],
|
||||
// 外框文字水平显示位置，相对于外框
|
||||
textAlign: 'left' // left、center、right
|
||||
}
|
||||
|
||||
const OUTER_FRAME_TEXT_EDIT_WRAP = 'outer-frame-text-edit-warp'
|
||||
|
||||
// 外框插件
|
||||
class OuterFrame {
|
||||
constructor(opt = {}) {
|
||||
this.mindMap = opt.mindMap
|
||||
this.draw = null
|
||||
this.createDrawContainer()
|
||||
this.isNotRenderOuterFrames = false
|
||||
this.textNodeList = []
|
||||
this.outerFrameElList = []
|
||||
this.activeOuterFrame = null
|
||||
// 文字相关方法
|
||||
this.textEditNode = null
|
||||
this.showTextEdit = false
|
||||
Object.keys(outerFrameTextMethods).forEach(item => {
|
||||
this[item] = outerFrameTextMethods[item].bind(this)
|
||||
})
|
||||
this.mindMap.addEditNodeClass(OUTER_FRAME_TEXT_EDIT_WRAP)
|
||||
this.bindEvent()
|
||||
}
|
||||
|
||||
// 创建容器
|
||||
createDrawContainer() {
|
||||
this.draw = this.mindMap.draw.group()
|
||||
this.draw.addClass('smm-outer-frame-container')
|
||||
this.draw.back() // 最底层
|
||||
this.draw.forward() // 连线层上面
|
||||
}
|
||||
|
||||
// 绑定事件
|
||||
bindEvent() {
|
||||
this.renderOuterFrames = this.renderOuterFrames.bind(this)
|
||||
this.mindMap.on('node_tree_render_end', this.renderOuterFrames)
|
||||
this.mindMap.on('data_change', this.renderOuterFrames)
|
||||
// 监听画布和节点点击事件，用于清除当前激活的连接线
|
||||
this.clearActiveOuterFrame = this.clearActiveOuterFrame.bind(this)
|
||||
this.mindMap.on('draw_click', this.clearActiveOuterFrame)
|
||||
this.mindMap.on('node_click', this.clearActiveOuterFrame)
|
||||
// 缩放事件
|
||||
this.mindMap.on('scale', this.onScale)
|
||||
// 实例销毁事件
|
||||
this.onBeforeDestroy = this.onBeforeDestroy.bind(this)
|
||||
this.mindMap.on('beforeDestroy', this.onBeforeDestroy)
|
||||
|
||||
this.addOuterFrame = this.addOuterFrame.bind(this)
|
||||
this.mindMap.command.add('ADD_OUTER_FRAME', this.addOuterFrame)
|
||||
|
||||
this.removeActiveOuterFrame = this.removeActiveOuterFrame.bind(this)
|
||||
this.mindMap.keyCommand.addShortcut(
|
||||
'Del|Backspace',
|
||||
this.removeActiveOuterFrame
|
||||
)
|
||||
}
|
||||
|
||||
// 解绑事件
|
||||
unBindEvent() {
|
||||
this.mindMap.off('node_tree_render_end', this.renderOuterFrames)
|
||||
this.mindMap.off('data_change', this.renderOuterFrames)
|
||||
this.mindMap.off('draw_click', this.clearActiveOuterFrame)
|
||||
this.mindMap.off('node_click', this.clearActiveOuterFrame)
|
||||
this.mindMap.off('scale', this.onScale)
|
||||
this.mindMap.off('beforeDestroy', this.onBeforeDestroy)
|
||||
this.mindMap.command.remove('ADD_OUTER_FRAME', this.addOuterFrame)
|
||||
this.mindMap.keyCommand.removeShortcut(
|
||||
'Del|Backspace',
|
||||
this.removeActiveOuterFrame
|
||||
)
|
||||
}
|
||||
|
||||
// 实例销毁时清除关联线文字编辑框
|
||||
onBeforeDestroy() {
|
||||
this.hideEditTextBox()
|
||||
this.removeTextEditEl()
|
||||
}
|
||||
|
||||
// 给节点添加外框数据
|
||||
/*
|
||||
config: {
|
||||
text: '',
|
||||
radius: 5,
|
||||
strokeWidth: 2,
|
||||
strokeColor: '#0984e3',
|
||||
strokeDasharray: '5,5',
|
||||
fill: 'rgba(9,132,227,0.05)'
|
||||
}
|
||||
*/
|
||||
addOuterFrame(appointNodes, config = {}) {
|
||||
appointNodes = formatDataToArray(appointNodes)
|
||||
const activeNodeList = this.mindMap.renderer.activeNodeList
|
||||
if (activeNodeList.length <= 0 && appointNodes.length <= 0) {
|
||||
return
|
||||
}
|
||||
let nodeList = appointNodes.length > 0 ? appointNodes : activeNodeList
|
||||
nodeList = nodeList.filter(node => {
|
||||
return !node.isRoot && !node.isGeneralization
|
||||
})
|
||||
const list = parseAddNodeList(nodeList)
|
||||
list.forEach(({ node, range }) => {
|
||||
const childNodeList = node.children.slice(range[0], range[1] + 1)
|
||||
const groupId = createUid()
|
||||
childNodeList.forEach(child => {
|
||||
let outerFrame = child.getData('outerFrame')
|
||||
// 检查该外框是否已存在
|
||||
if (outerFrame) {
|
||||
outerFrame = {
|
||||
...outerFrame,
|
||||
...config,
|
||||
groupId
|
||||
}
|
||||
} else {
|
||||
outerFrame = {
|
||||
...config,
|
||||
groupId
|
||||
}
|
||||
}
|
||||
this.mindMap.execCommand('SET_NODE_DATA', child, {
|
||||
outerFrame
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 获取当前激活的外框
|
||||
getActiveOuterFrame() {
|
||||
return this.activeOuterFrame
|
||||
? {
|
||||
...this.activeOuterFrame
|
||||
}
|
||||
: null
|
||||
}
|
||||
|
||||
// 删除当前激活的外框
|
||||
removeActiveOuterFrame() {
|
||||
if (!this.activeOuterFrame) return
|
||||
const { node, range } = this.activeOuterFrame
|
||||
this.getRangeNodeList(node, range).forEach(child => {
|
||||
this.mindMap.execCommand('SET_NODE_DATA', child, {
|
||||
outerFrame: null
|
||||
})
|
||||
})
|
||||
this.mindMap.emit('outer_frame_delete')
|
||||
}
|
||||
|
||||
// 删除当前激活外框的文字
|
||||
removeActiveOuterFrameText() {
|
||||
this.updateActiveOuterFrame({
|
||||
text: ''
|
||||
})
|
||||
}
|
||||
|
||||
// 更新当前激活的外框
|
||||
updateActiveOuterFrame(config = {}) {
|
||||
if (!this.activeOuterFrame) return
|
||||
this.isNotRenderOuterFrames = true
|
||||
const { el, node, range } = this.activeOuterFrame
|
||||
let newStrokeDasharray = ''
|
||||
this.getRangeNodeList(node, range).forEach(node => {
|
||||
const outerFrame = node.getData('outerFrame')
|
||||
const newData = {
|
||||
...outerFrame,
|
||||
...config
|
||||
}
|
||||
newStrokeDasharray = newData.strokeDasharray
|
||||
this.mindMap.execCommand('SET_NODE_DATA', node, {
|
||||
outerFrame: newData
|
||||
})
|
||||
})
|
||||
el.cacheStyle = {
|
||||
dasharray: newStrokeDasharray
|
||||
}
|
||||
this.updateOuterFrameStyle()
|
||||
}
|
||||
|
||||
// 更新当前激活外框的样式
|
||||
updateOuterFrameStyle() {
|
||||
const { el, node, range, textNode } = this.activeOuterFrame
|
||||
const firstNode = this.getNodeRangeFirstNode(node, range)
|
||||
const styleConfig = this.getStyle(firstNode)
|
||||
this.styleOuterFrame(el, {
|
||||
...styleConfig,
|
||||
strokeDasharray: 'none'
|
||||
})
|
||||
const text = this.getText(firstNode)
|
||||
this.renderText(text, el, textNode, node, range)
|
||||
}
|
||||
|
||||
// 获取某个节点指定范围的带外框的子节点列表
|
||||
getRangeNodeList(node, range) {
|
||||
return node.children.slice(range[0], range[1] + 1).filter(child => {
|
||||
return child.getData('outerFrame')
|
||||
})
|
||||
}
|
||||
|
||||
// 获取某个节点指定范围的带外框的第一个子节点
|
||||
getNodeRangeFirstNode(node, range) {
|
||||
return node.children[range[0]]
|
||||
}
|
||||
|
||||
// 渲染外框
|
||||
renderOuterFrames() {
|
||||
if (this.isNotRenderOuterFrames) {
|
||||
this.isNotRenderOuterFrames = false
|
||||
return
|
||||
}
|
||||
this.clearActiveOuterFrame()
|
||||
this.clearTextNodes()
|
||||
this.clearOuterFrameElList()
|
||||
let tree = this.mindMap.renderer.root
|
||||
if (!tree) return
|
||||
const t = this.mindMap.draw.transform()
|
||||
const { outerFramePaddingX, outerFramePaddingY } = this.mindMap.opt
|
||||
walk(
|
||||
tree,
|
||||
null,
|
||||
cur => {
|
||||
if (!cur) return
|
||||
const outerFrameList = getNodeOuterFrameList(cur)
|
||||
if (outerFrameList && outerFrameList.length > 0) {
|
||||
outerFrameList.forEach(({ nodeList, range }) => {
|
||||
if (range[0] === -1 || range[1] === -1) return
|
||||
const { left, top, width, height } =
|
||||
getNodeListBoundingRect(nodeList)
|
||||
if (
|
||||
!Number.isFinite(left) ||
|
||||
!Number.isFinite(top) ||
|
||||
!Number.isFinite(width) ||
|
||||
!Number.isFinite(height)
|
||||
)
|
||||
return
|
||||
const el = this.createOuterFrameEl(
|
||||
(left -
|
||||
outerFramePaddingX -
|
||||
this.mindMap.elRect.left -
|
||||
t.translateX) /
|
||||
t.scaleX,
|
||||
(top -
|
||||
outerFramePaddingY -
|
||||
this.mindMap.elRect.top -
|
||||
t.translateY) /
|
||||
t.scaleY,
|
||||
(width + outerFramePaddingX * 2) / t.scaleX,
|
||||
(height + outerFramePaddingY * 2) / t.scaleY,
|
||||
this.getStyle(nodeList[0]) // 使用第一个节点的外框样式
|
||||
)
|
||||
// 渲染文字，如果有的话
|
||||
const textNode = this.createText(el, cur, range)
|
||||
this.textNodeList.push(textNode)
|
||||
this.renderText(this.getText(nodeList[0]), el, textNode, cur, range)
|
||||
el.on('click', e => {
|
||||
e.stopPropagation()
|
||||
this.setActiveOuterFrame(el, cur, range, textNode)
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
() => {},
|
||||
true,
|
||||
0
|
||||
)
|
||||
}
|
||||
|
||||
// 激活外框
|
||||
setActiveOuterFrame(el, node, range, textNode) {
|
||||
this.mindMap.execCommand('CLEAR_ACTIVE_NODE')
|
||||
this.clearActiveOuterFrame()
|
||||
this.activeOuterFrame = {
|
||||
el,
|
||||
node,
|
||||
range,
|
||||
textNode
|
||||
}
|
||||
el.stroke({
|
||||
dasharray: 'none'
|
||||
})
|
||||
// 如果没有输入过文字，那么显示默认文字
|
||||
if (!this.getText(this.getNodeRangeFirstNode(node, range))) {
|
||||
this.renderText(
|
||||
this.mindMap.opt.defaultOuterFrameText,
|
||||
el,
|
||||
textNode,
|
||||
node,
|
||||
range
|
||||
)
|
||||
}
|
||||
this.mindMap.emit('outer_frame_active', el, node, range)
|
||||
}
|
||||
|
||||
// 清除当前激活的外框
|
||||
clearActiveOuterFrame() {
|
||||
if (!this.activeOuterFrame) return
|
||||
const { el, textNode, node, range } = this.activeOuterFrame
|
||||
el.stroke({
|
||||
dasharray: el.cacheStyle.dasharray || defaultStyle.strokeDasharray
|
||||
})
|
||||
// 隐藏文本编辑框
|
||||
this.hideEditTextBox()
|
||||
// 如果没有输入过文字，那么隐藏
|
||||
if (!this.getText(this.getNodeRangeFirstNode(node, range))) {
|
||||
textNode.clear()
|
||||
}
|
||||
this.activeOuterFrame = null
|
||||
this.mindMap.emit('outer_frame_deactivate')
|
||||
}
|
||||
|
||||
// 获取指定外框的样式
|
||||
getStyle(node) {
|
||||
return { ...defaultStyle, ...(node.getData('outerFrame') || {}) }
|
||||
}
|
||||
|
||||
// 创建外框元素
|
||||
createOuterFrameEl(x, y, width, height, styleConfig = {}) {
|
||||
const el = this.draw.rect().size(width, height).x(x).y(y)
|
||||
this.styleOuterFrame(el, styleConfig)
|
||||
el.cacheStyle = {
|
||||
dasharray: styleConfig.strokeDasharray
|
||||
}
|
||||
this.outerFrameElList.push(el)
|
||||
return el
|
||||
}
|
||||
|
||||
// 设置外框样式
|
||||
styleOuterFrame(el, styleConfig) {
|
||||
el.radius(styleConfig.radius)
|
||||
.stroke({
|
||||
width: styleConfig.strokeWidth,
|
||||
color: styleConfig.strokeColor,
|
||||
dasharray: styleConfig.strokeDasharray
|
||||
})
|
||||
.fill({
|
||||
color: styleConfig.fill
|
||||
})
|
||||
}
|
||||
|
||||
// 清除文本元素
|
||||
clearTextNodes() {
|
||||
this.textNodeList.forEach(item => {
|
||||
item.remove()
|
||||
})
|
||||
}
|
||||
|
||||
// 清除外框元素
|
||||
clearOuterFrameElList() {
|
||||
this.outerFrameElList.forEach(item => {
|
||||
item.remove()
|
||||
})
|
||||
this.outerFrameElList = []
|
||||
this.activeOuterFrame = null
|
||||
}
|
||||
|
||||
// 插件被移除前做的事情
|
||||
beforePluginRemove() {
|
||||
this.mindMap.deleteEditNodeClass(OUTER_FRAME_TEXT_EDIT_WRAP)
|
||||
this.unBindEvent()
|
||||
}
|
||||
|
||||
// 插件被卸载前做的事情
|
||||
beforePluginDestroy() {
|
||||
this.mindMap.deleteEditNodeClass(OUTER_FRAME_TEXT_EDIT_WRAP)
|
||||
this.unBindEvent()
|
||||
}
|
||||
}
|
||||
|
||||
OuterFrame.instanceName = 'outerFrame'
|
||||
OuterFrame.defaultStyle = defaultStyle
|
||||
|
||||
export default OuterFrame
|
||||
@@ -0,0 +1,87 @@
|
||||
import { checkIsNodeStyleDataKey } from '../utils/index'
|
||||
|
||||
// 格式刷插件
|
||||
class Painter {
|
||||
constructor({ mindMap }) {
|
||||
this.mindMap = mindMap
|
||||
this.isInPainter = false
|
||||
this.painterNode = null
|
||||
this.bindEvent()
|
||||
}
|
||||
|
||||
bindEvent() {
|
||||
this.painterOneNode = this.painterOneNode.bind(this)
|
||||
this.onEndPainter = this.onEndPainter.bind(this)
|
||||
this.mindMap.on('node_click', this.painterOneNode)
|
||||
this.mindMap.on('draw_click', this.onEndPainter)
|
||||
}
|
||||
|
||||
unBindEvent() {
|
||||
this.mindMap.off('node_click', this.painterOneNode)
|
||||
this.mindMap.off('draw_click', this.onEndPainter)
|
||||
}
|
||||
|
||||
// 开始格式刷
|
||||
startPainter() {
|
||||
if (this.mindMap.opt.readonly) return
|
||||
let activeNodeList = this.mindMap.renderer.activeNodeList
|
||||
if (activeNodeList.length <= 0) return
|
||||
this.painterNode = activeNodeList[0]
|
||||
this.isInPainter = true
|
||||
this.mindMap.emit('painter_start')
|
||||
}
|
||||
|
||||
// 结束格式刷
|
||||
endPainter() {
|
||||
this.painterNode = null
|
||||
this.isInPainter = false
|
||||
}
|
||||
|
||||
onEndPainter() {
|
||||
if (!this.isInPainter) return
|
||||
this.endPainter()
|
||||
this.mindMap.emit('painter_end')
|
||||
}
|
||||
|
||||
// 格式刷某个节点
|
||||
painterOneNode(node) {
|
||||
if (
|
||||
!node ||
|
||||
!this.isInPainter ||
|
||||
!this.painterNode ||
|
||||
!node ||
|
||||
node.uid === this.painterNode.uid
|
||||
)
|
||||
return
|
||||
let style = {}
|
||||
// 格式刷节点所有生效的样式
|
||||
if (!this.mindMap.opt.onlyPainterNodeCustomStyles) {
|
||||
style = {
|
||||
...this.painterNode.effectiveStyles
|
||||
}
|
||||
}
|
||||
const painterNodeData = this.painterNode.getData()
|
||||
Object.keys(painterNodeData).forEach(key => {
|
||||
if (checkIsNodeStyleDataKey(key)) {
|
||||
style[key] = painterNodeData[key]
|
||||
}
|
||||
})
|
||||
// 先去除目标节点的样式
|
||||
this.mindMap.renderer._handleRemoveCustomStyles(node.getData())
|
||||
node.setStyles(style)
|
||||
}
|
||||
|
||||
// 插件被移除前做的事情
|
||||
beforePluginRemove() {
|
||||
this.unBindEvent()
|
||||
}
|
||||
|
||||
// 插件被卸载前做的事情
|
||||
beforePluginDestroy() {
|
||||
this.unBindEvent()
|
||||
}
|
||||
}
|
||||
|
||||
Painter.instanceName = 'painter'
|
||||
|
||||
export default Painter
|
||||
@@ -0,0 +1,92 @@
|
||||
import { walk, getNodeDataIndex } from '../utils/index'
|
||||
|
||||
const defaultColorsList = [
|
||||
'rgb(255, 213, 73)',
|
||||
'rgb(255, 136, 126)',
|
||||
'rgb(107, 225, 141)',
|
||||
'rgb(151, 171, 255)',
|
||||
'rgb(129, 220, 242)',
|
||||
'rgb(255, 163, 125)',
|
||||
'rgb(152, 132, 234)'
|
||||
]
|
||||
|
||||
// 彩虹线条插件
|
||||
class RainbowLines {
|
||||
constructor({ mindMap }) {
|
||||
this.mindMap = mindMap
|
||||
}
|
||||
|
||||
// 更新彩虹线条配置
|
||||
updateRainLinesConfig(config = {}) {
|
||||
const newConfig = this.mindMap.opt.rainbowLinesConfig || {}
|
||||
newConfig.open = !!config.open
|
||||
newConfig.colorsList = Array.isArray(config.colorsList)
|
||||
? config.colorsList
|
||||
: []
|
||||
// 如果开启彩虹线条，那么先移除所有节点的自定义连线颜色配置
|
||||
if (this.mindMap.opt.rainbowLinesConfig.open) {
|
||||
this.removeNodeLineColor()
|
||||
}
|
||||
this.mindMap.render()
|
||||
}
|
||||
|
||||
// 删除所有节点的连线颜色
|
||||
removeNodeLineColor() {
|
||||
const tree = this.mindMap.renderer.renderTree
|
||||
if (!tree) return
|
||||
walk(
|
||||
tree,
|
||||
null,
|
||||
cur => {
|
||||
delete cur.data.lineColor
|
||||
},
|
||||
null,
|
||||
true
|
||||
)
|
||||
this.mindMap.command.addHistory()
|
||||
}
|
||||
|
||||
// 获取一个节点的第二层级的祖先节点
|
||||
getSecondLayerAncestor(node) {
|
||||
if (node.layerIndex === 0) {
|
||||
return null
|
||||
} else if (node.layerIndex === 1) {
|
||||
return node
|
||||
} else {
|
||||
let res = null
|
||||
let parent = node.parent
|
||||
while (parent) {
|
||||
if (parent.layerIndex === 1) {
|
||||
return parent
|
||||
}
|
||||
parent = parent.parent
|
||||
}
|
||||
return res
|
||||
}
|
||||
}
|
||||
|
||||
// 获取颜色列表
|
||||
getColorsList() {
|
||||
const { rainbowLinesConfig } = this.mindMap.opt
|
||||
return rainbowLinesConfig &&
|
||||
Array.isArray(rainbowLinesConfig.colorsList) &&
|
||||
rainbowLinesConfig.colorsList.length > 0
|
||||
? rainbowLinesConfig.colorsList
|
||||
: [...defaultColorsList]
|
||||
}
|
||||
|
||||
// 获取一个节点的彩虹线条颜色
|
||||
getNodeColor(node) {
|
||||
const { rainbowLinesConfig } = this.mindMap.opt
|
||||
if (!rainbowLinesConfig || !rainbowLinesConfig.open) return ''
|
||||
const ancestor = this.getSecondLayerAncestor(node)
|
||||
if (!ancestor) return
|
||||
const index = getNodeDataIndex(ancestor)
|
||||
const colorsList = this.getColorsList()
|
||||
return colorsList[index % colorsList.length]
|
||||
}
|
||||
}
|
||||
|
||||
RainbowLines.instanceName = 'rainbowLines'
|
||||
|
||||
export default RainbowLines
|
||||
@@ -0,0 +1,884 @@
|
||||
import Quill from 'quill'
|
||||
import Delta from 'quill-delta'
|
||||
import 'quill/dist/quill.snow.css'
|
||||
import {
|
||||
walk,
|
||||
getTextFromHtml,
|
||||
isUndef,
|
||||
checkSmmFormatData,
|
||||
formatGetNodeGeneralization,
|
||||
nodeRichTextToTextWithWrap,
|
||||
getNodeRichTextStyles,
|
||||
htmlEscape,
|
||||
compareVersion
|
||||
} from '../utils'
|
||||
import { richTextSupportStyleList } from '../constants/constant'
|
||||
import MindMapNode from '../core/render/node/MindMapNode'
|
||||
import { Scope } from 'parchment'
|
||||
|
||||
let extended = false
|
||||
|
||||
// 扩展quill的字体列表
|
||||
let fontFamilyList = [
|
||||
'宋体, SimSun, Songti SC',
|
||||
'微软雅黑, Microsoft YaHei',
|
||||
'楷体, 楷体_GB2312, SimKai, STKaiti',
|
||||
'黑体, SimHei, Heiti SC',
|
||||
'隶书, SimLi',
|
||||
'andale mono',
|
||||
'arial, helvetica, sans-serif',
|
||||
'arial black, avant garde',
|
||||
'comic sans ms',
|
||||
'impact, chicago',
|
||||
'times new roman',
|
||||
'sans-serif',
|
||||
'serif'
|
||||
]
|
||||
|
||||
// 扩展quill的字号列表
|
||||
let fontSizeList = new Array(100).fill(0).map((_, index) => {
|
||||
return index + 'px'
|
||||
})
|
||||
|
||||
const RICH_TEXT_EDIT_WRAP = 'ql-editor'
|
||||
|
||||
// 富文本编辑插件
|
||||
class RichText {
|
||||
constructor({ mindMap, pluginOpt }) {
|
||||
this.mindMap = mindMap
|
||||
this.pluginOpt = pluginOpt
|
||||
this.textEditNode = null
|
||||
this.showTextEdit = false
|
||||
this.quill = null
|
||||
this.range = null
|
||||
this.lastRange = null
|
||||
this.pasteUseRange = null
|
||||
this.node = null
|
||||
this.isInserting = false
|
||||
this.styleEl = null
|
||||
this.cacheEditingText = ''
|
||||
this.isCompositing = false
|
||||
this.textNodePaddingX = 6
|
||||
this.textNodePaddingY = 4
|
||||
this.mindMap.addEditNodeClass(RICH_TEXT_EDIT_WRAP)
|
||||
this.initOpt()
|
||||
this.extendQuill()
|
||||
this.appendCss()
|
||||
this.bindEvent()
|
||||
|
||||
this.handleDataToRichTextOnInit()
|
||||
}
|
||||
|
||||
// 绑定事件
|
||||
bindEvent() {
|
||||
this.onCompositionStart = this.onCompositionStart.bind(this)
|
||||
this.onCompositionUpdate = this.onCompositionUpdate.bind(this)
|
||||
this.onCompositionEnd = this.onCompositionEnd.bind(this)
|
||||
this.handleSetData = this.handleSetData.bind(this)
|
||||
window.addEventListener('compositionstart', this.onCompositionStart)
|
||||
window.addEventListener('compositionupdate', this.onCompositionUpdate)
|
||||
window.addEventListener('compositionend', this.onCompositionEnd)
|
||||
this.mindMap.on('before_update_data', this.handleSetData)
|
||||
this.mindMap.on('before_set_data', this.handleSetData)
|
||||
}
|
||||
|
||||
// 解绑事件
|
||||
unbindEvent() {
|
||||
window.removeEventListener('compositionstart', this.onCompositionStart)
|
||||
window.removeEventListener('compositionupdate', this.onCompositionUpdate)
|
||||
window.removeEventListener('compositionend', this.onCompositionEnd)
|
||||
this.mindMap.off('before_update_data', this.handleSetData)
|
||||
this.mindMap.off('before_set_data', this.handleSetData)
|
||||
}
|
||||
|
||||
// 插入样式
|
||||
appendCss() {
|
||||
this.mindMap.appendCss(
|
||||
'richText',
|
||||
`
|
||||
.smm-richtext-node-wrap {
|
||||
word-break: break-all;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.ql-editor .ql-align-left,
|
||||
.smm-richtext-node-wrap .ql-align-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.smm-richtext-node-wrap .ql-align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.smm-richtext-node-wrap .ql-align-center {
|
||||
text-align: center;
|
||||
}
|
||||
`
|
||||
)
|
||||
let cssText = `
|
||||
.${RICH_TEXT_EDIT_WRAP} {
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
height: auto;
|
||||
line-height: 1.2;
|
||||
-webkit-user-select: text;
|
||||
text-align: inherit;
|
||||
}
|
||||
|
||||
.ql-container {
|
||||
height: auto;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.ql-container.ql-snow {
|
||||
border: none;
|
||||
}
|
||||
`
|
||||
this.styleEl = document.createElement('style')
|
||||
this.styleEl.type = 'text/css'
|
||||
this.styleEl.innerHTML = cssText
|
||||
document.head.appendChild(this.styleEl)
|
||||
}
|
||||
|
||||
// 处理选项参数
|
||||
initOpt() {
|
||||
if (
|
||||
this.pluginOpt.fontFamilyList &&
|
||||
Array.isArray(this.pluginOpt.fontFamilyList)
|
||||
) {
|
||||
fontFamilyList = this.pluginOpt.fontFamilyList
|
||||
}
|
||||
if (
|
||||
this.pluginOpt.fontSizeList &&
|
||||
Array.isArray(this.pluginOpt.fontSizeList)
|
||||
) {
|
||||
fontSizeList = this.pluginOpt.fontSizeList
|
||||
}
|
||||
}
|
||||
|
||||
// 扩展quill编辑器
|
||||
extendQuill() {
|
||||
if (extended) {
|
||||
return
|
||||
}
|
||||
extended = true
|
||||
|
||||
this.extendFont([])
|
||||
|
||||
this.extendAlign()
|
||||
|
||||
// 扩展quill的字号列表
|
||||
const SizeAttributor = Quill.import('attributors/class/size')
|
||||
SizeAttributor.whitelist = fontSizeList
|
||||
Quill.register(SizeAttributor, true)
|
||||
|
||||
const SizeStyle = Quill.import('attributors/style/size')
|
||||
SizeStyle.whitelist = fontSizeList
|
||||
Quill.register(SizeStyle, true)
|
||||
}
|
||||
|
||||
// 扩展字体列表
|
||||
extendFont(list = [], cover = false) {
|
||||
fontFamilyList = cover ? [...list] : [...fontFamilyList, ...list]
|
||||
|
||||
// 扩展quill的字体列表
|
||||
const FontAttributor = Quill.import('attributors/class/font')
|
||||
FontAttributor.whitelist = fontFamilyList
|
||||
Quill.register(FontAttributor, true)
|
||||
|
||||
const FontStyle = Quill.import('attributors/style/font')
|
||||
FontStyle.whitelist = fontFamilyList
|
||||
Quill.register(FontStyle, true)
|
||||
}
|
||||
|
||||
// 扩展文本对齐方式
|
||||
extendAlign() {
|
||||
const AlignFormat = Quill.import('formats/align')
|
||||
AlignFormat.whitelist = ['right', 'center', 'justify', 'left']
|
||||
Quill.register(AlignFormat, true)
|
||||
}
|
||||
|
||||
// 显示文本编辑控件
|
||||
showEditText({ node, rect, isInserting, isFromKeyDown, isFromScale }) {
|
||||
if (this.showTextEdit) {
|
||||
return
|
||||
}
|
||||
let {
|
||||
customInnerElsAppendTo,
|
||||
nodeTextEditZIndex,
|
||||
textAutoWrapWidth,
|
||||
selectTextOnEnterEditText,
|
||||
transformRichTextOnEnterEdit,
|
||||
openRealtimeRenderOnNodeTextEdit,
|
||||
autoEmptyTextWhenKeydownEnterEdit
|
||||
} = this.mindMap.opt
|
||||
textAutoWrapWidth = node.hasCustomWidth()
|
||||
? node.customTextWidth
|
||||
: textAutoWrapWidth
|
||||
this.node = node
|
||||
this.isInserting = isInserting
|
||||
if (!rect) rect = node._textData.node.node.getBoundingClientRect()
|
||||
if (!isFromScale) {
|
||||
this.mindMap.emit('before_show_text_edit')
|
||||
}
|
||||
this.mindMap.renderer.textEdit.registerTmpShortcut()
|
||||
// 原始宽高
|
||||
let g = node._textData.node
|
||||
let originWidth = g.attr('data-width')
|
||||
let originHeight = g.attr('data-height')
|
||||
// 缩放值
|
||||
const scaleX = Math.ceil(rect.width) / originWidth
|
||||
const scaleY = Math.ceil(rect.height) / originHeight
|
||||
// 内边距
|
||||
let paddingX = this.textNodePaddingX
|
||||
let paddingY = this.textNodePaddingY
|
||||
if (!this.textEditNode) {
|
||||
this.textEditNode = document.createElement('div')
|
||||
this.textEditNode.classList.add('smm-richtext-node-edit-wrap')
|
||||
this.textEditNode.style.cssText = `
|
||||
position:fixed;
|
||||
box-sizing: border-box;
|
||||
${
|
||||
openRealtimeRenderOnNodeTextEdit
|
||||
? ''
|
||||
: 'box-shadow: 0 0 20px rgba(0,0,0,.5);'
|
||||
}
|
||||
outline: none;
|
||||
word-break: break-all;
|
||||
padding: ${paddingY}px ${paddingX}px;
|
||||
line-height: 1.2;
|
||||
`
|
||||
this.textEditNode.addEventListener('click', e => {
|
||||
e.stopPropagation()
|
||||
})
|
||||
this.textEditNode.addEventListener('mousedown', e => {
|
||||
e.stopPropagation()
|
||||
})
|
||||
this.textEditNode.addEventListener('keydown', e => {
|
||||
if (this.mindMap.renderer.textEdit.checkIsAutoEnterTextEditKey(e)) {
|
||||
e.stopPropagation()
|
||||
}
|
||||
})
|
||||
const targetNode = customInnerElsAppendTo || document.body
|
||||
targetNode.appendChild(this.textEditNode)
|
||||
}
|
||||
this.addNodeTextStyleToTextEditNode(node)
|
||||
this.textEditNode.style.marginLeft = `-${paddingX * scaleX}px`
|
||||
this.textEditNode.style.marginTop = `-${paddingY * scaleY}px`
|
||||
this.textEditNode.style.zIndex = nodeTextEditZIndex
|
||||
if (!openRealtimeRenderOnNodeTextEdit) {
|
||||
this.textEditNode.style.background =
|
||||
this.mindMap.renderer.textEdit.getBackground(node)
|
||||
}
|
||||
this.textEditNode.style.minWidth = originWidth + paddingX * 2 + 'px'
|
||||
this.textEditNode.style.minHeight = originHeight + 'px'
|
||||
this.textEditNode.style.left = rect.left + 'px'
|
||||
this.textEditNode.style.top = rect.top + 'px'
|
||||
this.textEditNode.style.display = 'block'
|
||||
this.textEditNode.style.maxWidth = textAutoWrapWidth + paddingX * 2 + 'px'
|
||||
this.textEditNode.style.transform = `scale(${scaleX}, ${scaleY})`
|
||||
this.textEditNode.style.transformOrigin = 'left top'
|
||||
// 节点文本内容
|
||||
let nodeText = node.getData('text')
|
||||
if (typeof transformRichTextOnEnterEdit === 'function') {
|
||||
nodeText = transformRichTextOnEnterEdit(nodeText)
|
||||
}
|
||||
// 是否是空文本
|
||||
const isEmptyText = isUndef(nodeText)
|
||||
// 是否是非空的非富文本
|
||||
const noneEmptyNoneRichText = !node.getData('richText') && !isEmptyText
|
||||
if (isFromKeyDown && autoEmptyTextWhenKeydownEnterEdit) {
|
||||
this.textEditNode.innerHTML = ''
|
||||
} else if (noneEmptyNoneRichText) {
|
||||
// 还不是富文本
|
||||
let text = String(nodeText).split(/\n/gim).join('<br>')
|
||||
let html = `<p>${text}</p>`
|
||||
this.textEditNode.innerHTML = this.cacheEditingText || html
|
||||
} else {
|
||||
// 已经是富文本
|
||||
this.textEditNode.innerHTML = this.cacheEditingText || nodeText
|
||||
}
|
||||
this.initQuillEditor()
|
||||
this.setQuillContainerMinHeight(originHeight)
|
||||
this.setIsShowTextEdit(true)
|
||||
// 如果是刚创建的节点，那么默认全选，否则普通激活不全选，除非selectTextOnEnterEditText配置为true
|
||||
// 在selectTextOnEnterEditText时，如果是在keydown事件进入的节点编辑，也不需要全选
|
||||
this.focus(
|
||||
isInserting || (selectTextOnEnterEditText && !isFromKeyDown) ? 0 : null
|
||||
)
|
||||
this.cacheEditingText = ''
|
||||
}
|
||||
|
||||
// 当openRealtimeRenderOnNodeTextEdit配置更新后需要更新编辑框样式
|
||||
onOpenRealtimeRenderOnNodeTextEditConfigUpdate(
|
||||
openRealtimeRenderOnNodeTextEdit
|
||||
) {
|
||||
if (!this.textEditNode) return
|
||||
this.textEditNode.style.background = openRealtimeRenderOnNodeTextEdit
|
||||
? 'transparent'
|
||||
: this.node
|
||||
? this.mindMap.renderer.textEdit.getBackground(this.node)
|
||||
: ''
|
||||
this.textEditNode.style.boxShadow = openRealtimeRenderOnNodeTextEdit
|
||||
? 'none'
|
||||
: '0 0 20px rgba(0,0,0,.5)'
|
||||
}
|
||||
|
||||
// 将指定节点的文本样式添加到编辑框元素上
|
||||
addNodeTextStyleToTextEditNode(node) {
|
||||
const style = getNodeRichTextStyles(node)
|
||||
Object.keys(style).forEach(prop => {
|
||||
this.textEditNode.style[prop] = style[prop]
|
||||
})
|
||||
}
|
||||
|
||||
// 设置quill编辑器容器的最小高度
|
||||
setQuillContainerMinHeight(minHeight) {
|
||||
document.querySelector('.' + RICH_TEXT_EDIT_WRAP).style.minHeight =
|
||||
minHeight + 'px'
|
||||
}
|
||||
|
||||
// 更新文本编辑框的大小和位置
|
||||
updateTextEditNode() {
|
||||
if (!this.node) return
|
||||
const g = this.node._textData.node
|
||||
const rect = g.node.getBoundingClientRect()
|
||||
const originWidth = g.attr('data-width')
|
||||
const originHeight = g.attr('data-height')
|
||||
this.textEditNode.style.minWidth =
|
||||
originWidth + this.textNodePaddingX * 2 + 'px'
|
||||
this.textEditNode.style.minHeight = originHeight + 'px'
|
||||
this.textEditNode.style.left = rect.left + 'px'
|
||||
this.textEditNode.style.top = rect.top + 'px'
|
||||
this.setQuillContainerMinHeight(originHeight)
|
||||
}
|
||||
|
||||
// 删除文本编辑框元素
|
||||
removeTextEditEl() {
|
||||
if (!this.textEditNode) return
|
||||
const targetNode = this.mindMap.opt.customInnerElsAppendTo || document.body
|
||||
targetNode.removeChild(this.textEditNode)
|
||||
}
|
||||
|
||||
// 获取当前正在编辑的内容
|
||||
getEditText() {
|
||||
// https://github.com/slab/quill/issues/4509
|
||||
return this.quill.container.firstChild.innerHTML.replace(/ +/g, match =>
|
||||
' '.repeat(match.length)
|
||||
)
|
||||
// 去除ql-cursor节点
|
||||
// https://github.com/wanglin2/mind-map/commit/138cc4b3e824671143f0bf70e5c46796f48520d0
|
||||
// https://github.com/wanglin2/mind-map/commit/0760500cebe8ec4e8ad84ab63f877b8b2a193aa1
|
||||
// html = removeHtmlNodeByClass(html, '.ql-cursor')
|
||||
// 去除最后的空行
|
||||
// return html.replace(/<p><br><\/p>$/, '')
|
||||
}
|
||||
|
||||
// 隐藏文本编辑控件，即完成编辑
|
||||
hideEditText(nodes) {
|
||||
if (!this.showTextEdit) {
|
||||
return
|
||||
}
|
||||
const { beforeHideRichTextEdit } = this.mindMap.opt
|
||||
if (typeof beforeHideRichTextEdit === 'function') {
|
||||
beforeHideRichTextEdit(this)
|
||||
}
|
||||
const html = this.getEditText()
|
||||
const list = nodes && nodes.length > 0 ? nodes : [this.node]
|
||||
const node = this.node
|
||||
this.textEditNode.style.display = 'none'
|
||||
this.setIsShowTextEdit(false)
|
||||
this.mindMap.emit('rich_text_selection_change', false)
|
||||
this.node = null
|
||||
this.isInserting = false
|
||||
list.forEach(node => {
|
||||
this.mindMap.execCommand('SET_NODE_TEXT', node, html, true)
|
||||
// if (node.isGeneralization) {
|
||||
// 概要节点
|
||||
// node.generalizationBelongNode.updateGeneralization()
|
||||
// }
|
||||
this.mindMap.render()
|
||||
})
|
||||
this.mindMap.emit('hide_text_edit', this.textEditNode, list, node)
|
||||
}
|
||||
|
||||
// 初始化Quill富文本编辑器
|
||||
initQuillEditor() {
|
||||
this.quill = new Quill(this.textEditNode, {
|
||||
modules: {
|
||||
toolbar: false,
|
||||
keyboard: {
|
||||
bindings: {
|
||||
enter: {
|
||||
key: 'Enter',
|
||||
handler: function () {
|
||||
// 覆盖默认的回车键，禁止换行
|
||||
}
|
||||
},
|
||||
shiftEnter: {
|
||||
key: 'Enter',
|
||||
shiftKey: true,
|
||||
handler: function (range, context) {
|
||||
// 覆盖默认的换行，默认情况下新行的样式会丢失
|
||||
const lineFormats = Object.keys(context.format).reduce(
|
||||
(formats, format) => {
|
||||
if (
|
||||
this.quill.scroll.query(format, Scope.BLOCK) &&
|
||||
!Array.isArray(context.format[format])
|
||||
) {
|
||||
formats[format] = context.format[format]
|
||||
}
|
||||
return formats
|
||||
},
|
||||
{}
|
||||
)
|
||||
const delta = new Delta()
|
||||
.retain(range.index)
|
||||
.delete(range.length)
|
||||
.insert('\n', lineFormats)
|
||||
this.quill.updateContents(delta, Quill.sources.USER)
|
||||
this.quill.setSelection(range.index + 1, Quill.sources.SILENT)
|
||||
this.quill.focus()
|
||||
Object.keys(context.format).forEach(name => {
|
||||
if (lineFormats[name] != null) return
|
||||
if (Array.isArray(context.format[name])) return
|
||||
if (name === 'code' || name === 'link') return
|
||||
this.quill.format(
|
||||
name,
|
||||
context.format[name],
|
||||
Quill.sources.USER
|
||||
)
|
||||
})
|
||||
}
|
||||
},
|
||||
tab: {
|
||||
key: 9,
|
||||
handler: function () {
|
||||
// 覆盖默认的tab键
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
formats: [
|
||||
'bold',
|
||||
'italic',
|
||||
'underline',
|
||||
'strike',
|
||||
'color',
|
||||
'background',
|
||||
'font',
|
||||
'size',
|
||||
'formula',
|
||||
'align'
|
||||
], // 明确指定允许的格式，不包含有序列表，无序列表等
|
||||
theme: 'snow'
|
||||
})
|
||||
// 拦截复制事件，即Ctrl + c，去除多余的空行
|
||||
this.quill.root.addEventListener('copy', event => {
|
||||
event.preventDefault()
|
||||
const sel = window.getSelection()
|
||||
const originStr = sel.toString()
|
||||
try {
|
||||
const range = sel.getRangeAt(0)
|
||||
const div = document.createElement('div')
|
||||
div.appendChild(range.cloneContents())
|
||||
const text = nodeRichTextToTextWithWrap(div.innerHTML)
|
||||
event.clipboardData.setData('text/plain', text)
|
||||
} catch (e) {
|
||||
event.clipboardData.setData('text/plain', originStr)
|
||||
}
|
||||
})
|
||||
this.quill.on('selection-change', range => {
|
||||
// 刚创建的节点全选不需要显示操作条
|
||||
if (this.isInserting) {
|
||||
this.isInserting = false
|
||||
return
|
||||
}
|
||||
this.lastRange = this.range
|
||||
this.range = null
|
||||
if (range) {
|
||||
this.pasteUseRange = range
|
||||
let bounds = this.quill.getBounds(range.index, range.length)
|
||||
let rect = this.textEditNode.getBoundingClientRect()
|
||||
let rectInfo = {
|
||||
left: bounds.left + rect.left,
|
||||
top: bounds.top + rect.top,
|
||||
right: bounds.right + rect.left,
|
||||
bottom: bounds.bottom + rect.top,
|
||||
width: bounds.width
|
||||
}
|
||||
let formatInfo = this.quill.getFormat(range.index, range.length)
|
||||
let hasRange = false
|
||||
if (range.length == 0) {
|
||||
hasRange = false
|
||||
} else {
|
||||
this.range = range
|
||||
hasRange = true
|
||||
}
|
||||
this.mindMap.emit(
|
||||
'rich_text_selection_change',
|
||||
hasRange,
|
||||
rectInfo,
|
||||
formatInfo
|
||||
)
|
||||
} else {
|
||||
this.mindMap.emit('rich_text_selection_change', false, null, null)
|
||||
}
|
||||
})
|
||||
this.quill.on('text-change', () => {
|
||||
this.mindMap.emit('node_text_edit_change', {
|
||||
node: this.node,
|
||||
text: this.getEditText(),
|
||||
richText: true
|
||||
})
|
||||
})
|
||||
// 拦截粘贴，只允许粘贴纯文本
|
||||
// this.quill.clipboard.addMatcher(Node.TEXT_NODE, node => {
|
||||
// let style = this.getPasteTextStyle()
|
||||
// return new Delta().insert(this.formatPasteText(node.data), style)
|
||||
// })
|
||||
// 剪贴板里只要存在文本就会走这里，所以当剪贴板里是纯文本，或文本+图片都可以监听到和拦截，但是只有纯图片时不会走这里，所以无法拦截
|
||||
this.quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
|
||||
let ops = []
|
||||
let style = this.getPasteTextStyle()
|
||||
delta.ops.forEach(op => {
|
||||
// 过滤出文本内容，过滤掉换行
|
||||
if (op.insert && typeof op.insert === 'string') {
|
||||
ops.push({
|
||||
attributes: { ...style },
|
||||
insert: this.formatPasteText(op.insert)
|
||||
})
|
||||
}
|
||||
})
|
||||
delta.ops = ops
|
||||
return delta
|
||||
})
|
||||
// 拦截图片的粘贴，当剪贴板里是纯图片，或文本+图片都可以拦截到，但是带来的问题是文本+图片时里面的文本也无法粘贴
|
||||
this.quill.root.addEventListener(
|
||||
'paste',
|
||||
e => {
|
||||
if (
|
||||
e.clipboardData &&
|
||||
e.clipboardData.files &&
|
||||
e.clipboardData.files.length
|
||||
) {
|
||||
e.preventDefault()
|
||||
}
|
||||
},
|
||||
true
|
||||
)
|
||||
}
|
||||
|
||||
// 获取粘贴的文本的样式
|
||||
getPasteTextStyle() {
|
||||
// 粘贴的数据使用当前光标位置处的文本样式
|
||||
if (this.pasteUseRange) {
|
||||
return this.quill.getFormat(
|
||||
this.pasteUseRange.index,
|
||||
this.pasteUseRange.length
|
||||
)
|
||||
}
|
||||
return {}
|
||||
}
|
||||
|
||||
// 处理粘贴的文本内容
|
||||
formatPasteText(text) {
|
||||
const { isSmm, data } = checkSmmFormatData(text)
|
||||
if (isSmm && data[0] && data[0].data) {
|
||||
// 只取第一个节点的纯文本
|
||||
return getTextFromHtml(data[0].data.text)
|
||||
} else {
|
||||
return text
|
||||
}
|
||||
}
|
||||
|
||||
// 正则输入中文
|
||||
onCompositionStart() {
|
||||
if (!this.showTextEdit) {
|
||||
return
|
||||
}
|
||||
this.isCompositing = true
|
||||
}
|
||||
|
||||
// 中文输入中
|
||||
onCompositionUpdate() {
|
||||
if (!this.showTextEdit || !this.node) return
|
||||
this.mindMap.emit('node_text_edit_change', {
|
||||
node: this.node,
|
||||
text: this.getEditText(),
|
||||
richText: true
|
||||
})
|
||||
}
|
||||
|
||||
// 中文输入结束
|
||||
onCompositionEnd() {
|
||||
if (!this.showTextEdit) {
|
||||
return
|
||||
}
|
||||
this.isCompositing = false
|
||||
}
|
||||
|
||||
// 设置文本编辑框是否处于显示状态
|
||||
setIsShowTextEdit(val) {
|
||||
this.showTextEdit = val
|
||||
if (val) {
|
||||
this.mindMap.keyCommand.stopCheckInSvg()
|
||||
} else {
|
||||
this.mindMap.keyCommand.recoveryCheckInSvg()
|
||||
}
|
||||
}
|
||||
|
||||
// 选中全部
|
||||
selectAll() {
|
||||
this.quill.setSelection(0, this.quill.getLength())
|
||||
}
|
||||
|
||||
// 聚焦
|
||||
focus(start) {
|
||||
const len = this.quill.getLength()
|
||||
this.quill.setSelection(typeof start === 'number' ? start : len, len)
|
||||
}
|
||||
|
||||
// 格式化当前选中的文本
|
||||
formatText(config = {}, clear = false) {
|
||||
if (!this.range && !this.lastRange) return
|
||||
const rangeLost = !this.range
|
||||
const range = rangeLost ? this.lastRange : this.range
|
||||
if (clear) {
|
||||
this.quill.removeFormat(range.index, range.length)
|
||||
} else {
|
||||
const { align, ...rest } = config
|
||||
// 文本对齐需要对行进行格式化
|
||||
if (align) {
|
||||
this.quill.formatLine(range.index, range.length, 'align', align)
|
||||
}
|
||||
// 其他内容对文本
|
||||
if (Object.keys(rest).length > 0) {
|
||||
this.quill.formatText(range.index, range.length, rest)
|
||||
}
|
||||
}
|
||||
if (rangeLost) {
|
||||
this.quill.setSelection(this.lastRange.index, this.lastRange.length)
|
||||
}
|
||||
}
|
||||
|
||||
// 清除当前选中文本的样式
|
||||
removeFormat() {
|
||||
this.formatText({}, true)
|
||||
}
|
||||
|
||||
// 格式化指定范围的文本
|
||||
formatRangeText(range, config = {}) {
|
||||
if (!range) return
|
||||
this.quill.formatText(range.index, range.length, config)
|
||||
}
|
||||
|
||||
// 格式化所有文本
|
||||
formatAllText(config = {}) {
|
||||
this.quill.formatText(0, this.quill.getLength(), config)
|
||||
}
|
||||
|
||||
// 将普通节点样式对象转换成富文本样式对象
|
||||
normalStyleToRichTextStyle(style) {
|
||||
const config = {}
|
||||
Object.keys(style).forEach(prop => {
|
||||
const value = style[prop]
|
||||
switch (prop) {
|
||||
case 'fontFamily':
|
||||
config.font = value
|
||||
break
|
||||
case 'fontSize':
|
||||
config.size = value + 'px'
|
||||
break
|
||||
case 'fontWeight':
|
||||
config.bold = value === 'bold'
|
||||
break
|
||||
case 'fontStyle':
|
||||
config.italic = value === 'italic'
|
||||
break
|
||||
case 'textDecoration':
|
||||
config.underline = value === 'underline'
|
||||
config.strike = value === 'line-through'
|
||||
break
|
||||
case 'color':
|
||||
config.color = value
|
||||
break
|
||||
case 'textAlign':
|
||||
config.align = value
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
})
|
||||
return config
|
||||
}
|
||||
|
||||
// 将富文本样式对象转换成普通节点样式对象
|
||||
richTextStyleToNormalStyle(config) {
|
||||
const data = {}
|
||||
Object.keys(config).forEach(prop => {
|
||||
const value = config[prop]
|
||||
switch (prop) {
|
||||
case 'font':
|
||||
data.fontFamily = value
|
||||
break
|
||||
case 'size':
|
||||
data.fontSize = parseFloat(value)
|
||||
break
|
||||
case 'bold':
|
||||
data.fontWeight = value ? 'bold' : 'normal'
|
||||
break
|
||||
case 'italic':
|
||||
data.fontStyle = value ? 'italic' : 'normal'
|
||||
break
|
||||
case 'underline':
|
||||
data.textDecoration = value ? 'underline' : 'none'
|
||||
break
|
||||
case 'strike':
|
||||
data.textDecoration = value ? 'line-through' : 'none'
|
||||
break
|
||||
case 'color':
|
||||
data.color = value
|
||||
break
|
||||
case 'align':
|
||||
data.textAlign = value
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
})
|
||||
return data
|
||||
}
|
||||
|
||||
// 判断一个对象是否包含了富文本支持的样式字段
|
||||
isHasRichTextStyle(obj) {
|
||||
const keys = Object.keys(obj)
|
||||
for (let i = 0; i < keys.length; i++) {
|
||||
const key = keys[i]
|
||||
if (richTextSupportStyleList.includes(key)) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
// 检查指定节点是否存在自定义的富文本样式
|
||||
checkNodeHasCustomRichTextStyle(node) {
|
||||
const nodeData = node instanceof MindMapNode ? node.getData() : node
|
||||
for (let i = 0; i < richTextSupportStyleList.length; i++) {
|
||||
if (nodeData[richTextSupportStyleList[i]] !== undefined) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
// 转换数据后的渲染操作
|
||||
afterHandleData() {
|
||||
// 清空历史数据，并且触发数据变化
|
||||
this.mindMap.command.clearHistory()
|
||||
this.mindMap.command.addHistory()
|
||||
this.mindMap.render()
|
||||
}
|
||||
|
||||
// 插件实例化时处理思维导图数据，转换为富文本数据
|
||||
handleDataToRichTextOnInit() {
|
||||
// 处理数据，转成富文本格式
|
||||
if (this.mindMap.renderer.renderTree) {
|
||||
// 如果已经存在渲染树了，那么直接更新渲染树，并且触发重新渲染
|
||||
this.handleSetData(this.mindMap.renderer.renderTree)
|
||||
this.afterHandleData()
|
||||
} else if (this.mindMap.opt.data) {
|
||||
this.handleSetData(this.mindMap.opt.data)
|
||||
}
|
||||
}
|
||||
|
||||
// 将所有节点转换成非富文本节点
|
||||
transformAllNodesToNormalNode() {
|
||||
const renderTree = this.mindMap.renderer.renderTree
|
||||
if (!renderTree) return
|
||||
walk(
|
||||
renderTree,
|
||||
null,
|
||||
node => {
|
||||
if (node.data.richText) {
|
||||
node.data.richText = false
|
||||
node.data.text = getTextFromHtml(node.data.text)
|
||||
}
|
||||
// 概要
|
||||
if (node.data) {
|
||||
const generalizationList = formatGetNodeGeneralization(node.data)
|
||||
generalizationList.forEach(item => {
|
||||
item.richText = false
|
||||
item.text = getTextFromHtml(item.text)
|
||||
})
|
||||
}
|
||||
},
|
||||
null,
|
||||
true,
|
||||
0,
|
||||
0
|
||||
)
|
||||
this.afterHandleData()
|
||||
}
|
||||
|
||||
handleDataToRichText(data) {
|
||||
const oldIsRichText = data.richText
|
||||
data.richText = true
|
||||
data.resetRichText = true
|
||||
// 如果原本就是富文本，那么不能转换
|
||||
if (!oldIsRichText) {
|
||||
data.text = htmlEscape(data.text)
|
||||
}
|
||||
}
|
||||
|
||||
// 处理导入数据
|
||||
handleSetData(data) {
|
||||
if (!data) return
|
||||
// 短期处理，为了兼容老数据，长期会去除
|
||||
const isOldRichTextVersion =
|
||||
!data.smmVersion || compareVersion(data.smmVersion, '0.13.0') === '<'
|
||||
const walk = root => {
|
||||
if (root.data && (!root.data.richText || isOldRichTextVersion)) {
|
||||
this.handleDataToRichText(root.data)
|
||||
}
|
||||
// 概要
|
||||
if (root.data) {
|
||||
const generalizationList = formatGetNodeGeneralization(root.data)
|
||||
generalizationList.forEach(item => {
|
||||
if (!item.richText || isOldRichTextVersion) {
|
||||
this.handleDataToRichText(item)
|
||||
}
|
||||
})
|
||||
}
|
||||
if (root.children && root.children.length > 0) {
|
||||
Array.from(root.children).forEach(item => {
|
||||
walk(item)
|
||||
})
|
||||
}
|
||||
}
|
||||
walk(data)
|
||||
return data
|
||||
}
|
||||
|
||||
// 插件被移除前做的事情
|
||||
beforePluginRemove() {
|
||||
this.transformAllNodesToNormalNode()
|
||||
document.head.removeChild(this.styleEl)
|
||||
this.unbindEvent()
|
||||
this.mindMap.removeAppendCss('richText')
|
||||
this.mindMap.deleteEditNodeClass(RICH_TEXT_EDIT_WRAP)
|
||||
}
|
||||
|
||||
// 插件被卸载前做的事情
|
||||
beforePluginDestroy() {
|
||||
document.head.removeChild(this.styleEl)
|
||||
this.unbindEvent()
|
||||
this.mindMap.deleteEditNodeClass(RICH_TEXT_EDIT_WRAP)
|
||||
}
|
||||
}
|
||||
|
||||
RichText.instanceName = 'richText'
|
||||
|
||||
export default RichText
|
||||
@@ -0,0 +1,281 @@
|
||||
import { throttle } from '../utils/index'
|
||||
import { CONSTANTS } from '../constants/constant'
|
||||
|
||||
// 滚动条插件
|
||||
class Scrollbar {
|
||||
// 构造函数
|
||||
constructor(opt) {
|
||||
this.mindMap = opt.mindMap
|
||||
this.scrollbarWrapSize = {
|
||||
width: 0, // 水平滚动条的容器宽度
|
||||
height: 0 // 垂直滚动条的容器高度
|
||||
}
|
||||
// 思维导图实际高度
|
||||
this.chartHeight = 0
|
||||
this.chartWidth = 0
|
||||
this.reset()
|
||||
this.bindEvent()
|
||||
}
|
||||
|
||||
// 复位数据
|
||||
reset() {
|
||||
// 当前拖拽的滚动条类型
|
||||
this.currentScrollType = ''
|
||||
this.isMousedown = false
|
||||
this.mousedownPos = {
|
||||
x: 0,
|
||||
y: 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)
|
||||
this.mindMap.on('resize', 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)
|
||||
this.mindMap.off('resize', this.updateScrollbar)
|
||||
}
|
||||
|
||||
// 渲染后、数据改变需要更新滚动条
|
||||
updateScrollbar() {
|
||||
// 当前正在拖拽滚动条时不需要更新
|
||||
if (this.isMousedown) return
|
||||
const res = this.calculationScrollbar()
|
||||
this.emitEvent(res)
|
||||
}
|
||||
|
||||
// 发送滚动条改变事件
|
||||
emitEvent(data) {
|
||||
this.mindMap.emit('scrollbar_change', data)
|
||||
}
|
||||
|
||||
// 设置滚动条容器的大小，指滚动条容器的大小，对于水平滚动条，即宽度，对于垂直滚动条，即高度
|
||||
setScrollBarWrapSize(width, height) {
|
||||
this.scrollbarWrapSize.width = width
|
||||
this.scrollbarWrapSize.height = height
|
||||
}
|
||||
|
||||
// 计算滚动条大小和位置
|
||||
calculationScrollbar() {
|
||||
const rect = this.mindMap.draw.rbox()
|
||||
// 减去画布距离浏览器窗口左上角的距离
|
||||
const elRect = this.mindMap.elRect
|
||||
rect.x -= elRect.left
|
||||
rect.y -= elRect.top
|
||||
|
||||
// 垂直滚动条
|
||||
const canvasHeight = this.mindMap.height // 画布高度
|
||||
const paddingY = canvasHeight / 2 // 首尾允许超出的距离，默认为高度的一半
|
||||
const chartHeight = rect.height + paddingY * 2 // 思维导图高度
|
||||
this.chartHeight = chartHeight
|
||||
const chartTop = rect.y - paddingY // 思维导图顶部距画布顶部的距离
|
||||
const height = Math.min((canvasHeight / chartHeight) * 100, 100) // 滚动条高度 = 画布高度 / 思维导图高度
|
||||
let top = (-chartTop / chartHeight) * 100 // 滚动条距离 = 思维导图顶部距画布顶部的距离 / 思维导图高度
|
||||
// 判断是否到达边界
|
||||
if (top < 0) {
|
||||
top = 0
|
||||
}
|
||||
if (top > 100 - height) {
|
||||
top = 100 - height
|
||||
}
|
||||
|
||||
// 水平滚动条
|
||||
const canvasWidth = this.mindMap.width
|
||||
const paddingX = canvasWidth / 2
|
||||
const chartWidth = rect.width + paddingX * 2
|
||||
this.chartWidth = chartWidth
|
||||
const chartLeft = rect.x - paddingX
|
||||
const width = Math.min((canvasWidth / chartWidth) * 100, 100)
|
||||
let left = (-chartLeft / chartWidth) * 100
|
||||
if (left < 0) {
|
||||
left = 0
|
||||
}
|
||||
if (left > 100 - width) {
|
||||
left = 100 - width
|
||||
}
|
||||
|
||||
const res = {
|
||||
// 垂直滚动条
|
||||
vertical: {
|
||||
top,
|
||||
height
|
||||
},
|
||||
// 水平滚动条
|
||||
horizontal: {
|
||||
left,
|
||||
width
|
||||
}
|
||||
}
|
||||
|
||||
return res
|
||||
}
|
||||
|
||||
// 滚动条鼠标按下事件处理函数
|
||||
onMousedown(e, type) {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
this.currentScrollType = type
|
||||
this.isMousedown = true
|
||||
this.mousedownPos = {
|
||||
x: e.clientX,
|
||||
y: e.clientY
|
||||
}
|
||||
// 保存滚动条当前的位置
|
||||
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
|
||||
}
|
||||
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 + 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()
|
||||
const rootCenterOffset = this.mindMap.renderer.layout.getRootCenterOffset(
|
||||
rootRect.width,
|
||||
rootRect.height
|
||||
)
|
||||
if (type === CONSTANTS.SCROLL_BAR_DIR.VERTICAL) {
|
||||
// 滚动条新位置
|
||||
let oy = offset
|
||||
// 判断是否达到首尾
|
||||
if (oy <= 0) {
|
||||
oy = 0
|
||||
}
|
||||
const 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
|
||||
// 图形新位置
|
||||
const chartTop =
|
||||
oyPx +
|
||||
yOffset -
|
||||
paddingY * t.scaleY +
|
||||
paddingY -
|
||||
rootCenterOffset.y * t.scaleY +
|
||||
((this.mindMap.height - this.mindMap.initHeight) / 2) * t.scaleY // 画布宽高改变了，但是思维导图元素变换的中心点依旧是原有位置，所以需要加上中心点变化量
|
||||
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
|
||||
}
|
||||
const 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
|
||||
// 图形新位置
|
||||
const chartLeft =
|
||||
oxPx +
|
||||
xOffset -
|
||||
paddingX * t.scaleX +
|
||||
paddingX -
|
||||
rootCenterOffset.x * t.scaleX +
|
||||
((this.mindMap.width - this.mindMap.initWidth) / 2) * t.scaleX // 画布宽高改变了，但是思维导图元素变换的中心点依旧是原有位置，所以需要加上中心点变化量
|
||||
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)
|
||||
}
|
||||
|
||||
// 插件被移除前做的事情
|
||||
beforePluginRemove() {
|
||||
this.unBindEvent()
|
||||
}
|
||||
|
||||
// 插件被卸载前做的事情
|
||||
beforePluginDestroy() {
|
||||
this.unBindEvent()
|
||||
}
|
||||
}
|
||||
|
||||
Scrollbar.instanceName = 'scrollbar'
|
||||
|
||||
export default Scrollbar
|
||||
@@ -0,0 +1,325 @@
|
||||
import {
|
||||
bfsWalk,
|
||||
getTextFromHtml,
|
||||
isUndef,
|
||||
replaceHtmlText,
|
||||
formatGetNodeGeneralization
|
||||
} from '../utils/index'
|
||||
import MindMapNode from '../core/render/node/MindMapNode'
|
||||
import { CONSTANTS } from '../constants/constant'
|
||||
|
||||
// 搜索插件
|
||||
class Search {
|
||||
// 构造函数
|
||||
constructor({ mindMap }) {
|
||||
this.mindMap = mindMap
|
||||
// 是否正在搜索
|
||||
this.isSearching = false
|
||||
// 搜索文本
|
||||
this.searchText = ''
|
||||
// 匹配的节点列表
|
||||
this.matchNodeList = []
|
||||
// 当前所在的节点列表索引
|
||||
this.currentIndex = -1
|
||||
// 不要复位搜索文本
|
||||
this.notResetSearchText = false
|
||||
// 是否自动跳转下一个匹配节点
|
||||
this.isJumpNext = false
|
||||
|
||||
this.bindEvent()
|
||||
}
|
||||
|
||||
bindEvent() {
|
||||
this.onDataChange = this.onDataChange.bind(this)
|
||||
this.onModeChange = this.onModeChange.bind(this)
|
||||
this.mindMap.on('data_change', this.onDataChange)
|
||||
this.mindMap.on('mode_change', this.onModeChange)
|
||||
}
|
||||
|
||||
unBindEvent() {
|
||||
this.mindMap.off('data_change', this.onDataChange)
|
||||
this.mindMap.off('mode_change', this.onModeChange)
|
||||
}
|
||||
|
||||
// 节点数据改变了，需要重新搜索
|
||||
onDataChange() {
|
||||
if (this.isJumpNext) {
|
||||
this.isJumpNext = false
|
||||
this.search(this.searchText)
|
||||
return
|
||||
}
|
||||
if (this.notResetSearchText) {
|
||||
this.notResetSearchText = false
|
||||
return
|
||||
}
|
||||
this.searchText = ''
|
||||
}
|
||||
|
||||
// 监听只读模式切换
|
||||
onModeChange(mode) {
|
||||
const isReadonly = mode === CONSTANTS.MODE.READONLY
|
||||
// 如果是由只读模式切换为非只读模式，需要清除只读模式下的节点高亮
|
||||
if (
|
||||
!isReadonly &&
|
||||
this.isSearching &&
|
||||
this.matchNodeList[this.currentIndex]
|
||||
) {
|
||||
this.matchNodeList[this.currentIndex].closeHighlight()
|
||||
}
|
||||
}
|
||||
|
||||
// 搜索
|
||||
search(text, callback = () => {}) {
|
||||
if (isUndef(text)) return this.endSearch()
|
||||
text = String(text)
|
||||
this.isSearching = true
|
||||
if (this.searchText === text) {
|
||||
// 和上一次搜索文本一样，那么搜索下一个
|
||||
this.searchNext(callback)
|
||||
} else {
|
||||
// 和上次搜索文本不一样，那么重新开始
|
||||
this.searchText = text
|
||||
this.doSearch()
|
||||
this.searchNext(callback)
|
||||
}
|
||||
this.emitEvent()
|
||||
}
|
||||
|
||||
// 更新匹配节点列表
|
||||
updateMatchNodeList(list) {
|
||||
this.matchNodeList = list
|
||||
this.mindMap.emit('search_match_node_list_change', list)
|
||||
}
|
||||
|
||||
// 结束搜索
|
||||
endSearch() {
|
||||
if (!this.isSearching) return
|
||||
if (this.mindMap.opt.readonly && this.matchNodeList[this.currentIndex]) {
|
||||
this.matchNodeList[this.currentIndex].closeHighlight()
|
||||
}
|
||||
this.searchText = ''
|
||||
this.updateMatchNodeList([])
|
||||
this.currentIndex = -1
|
||||
this.notResetSearchText = false
|
||||
this.isSearching = false
|
||||
this.emitEvent()
|
||||
}
|
||||
|
||||
// 搜索匹配的节点
|
||||
doSearch() {
|
||||
this.clearHighlightOnReadonly()
|
||||
this.updateMatchNodeList([])
|
||||
this.currentIndex = -1
|
||||
const { isOnlySearchCurrentRenderNodes } = this.mindMap.opt
|
||||
// 如果要搜索收起来的节点，那么要遍历渲染树而不是节点树
|
||||
const tree = isOnlySearchCurrentRenderNodes
|
||||
? this.mindMap.renderer.root
|
||||
: this.mindMap.renderer.renderTree
|
||||
if (!tree) return
|
||||
const matchList = []
|
||||
bfsWalk(tree, node => {
|
||||
let { richText, text, generalization } = isOnlySearchCurrentRenderNodes
|
||||
? node.getData()
|
||||
: node.data
|
||||
if (richText) {
|
||||
text = getTextFromHtml(text)
|
||||
}
|
||||
if (text.includes(this.searchText)) {
|
||||
matchList.push(node)
|
||||
}
|
||||
// 概要节点
|
||||
const generalizationList = formatGetNodeGeneralization({
|
||||
generalization
|
||||
})
|
||||
generalizationList.forEach(gNode => {
|
||||
let { richText, text, uid } = gNode
|
||||
if (
|
||||
isOnlySearchCurrentRenderNodes &&
|
||||
!this.mindMap.renderer.findNodeByUid(uid)
|
||||
) {
|
||||
return
|
||||
}
|
||||
if (richText) {
|
||||
text = getTextFromHtml(text)
|
||||
}
|
||||
if (text.includes(this.searchText)) {
|
||||
matchList.push({
|
||||
data: gNode
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
this.updateMatchNodeList(matchList)
|
||||
}
|
||||
|
||||
// 判断对象是否是节点实例
|
||||
isNodeInstance(node) {
|
||||
return node instanceof MindMapNode
|
||||
}
|
||||
|
||||
// 搜索下一个或指定索引，定位到下一个匹配节点
|
||||
searchNext(callback, index) {
|
||||
if (!this.isSearching || this.matchNodeList.length <= 0) return
|
||||
if (
|
||||
index !== undefined &&
|
||||
Number.isInteger(index) &&
|
||||
index >= 0 &&
|
||||
index < this.matchNodeList.length
|
||||
) {
|
||||
this.currentIndex = index
|
||||
} else {
|
||||
if (this.currentIndex < this.matchNodeList.length - 1) {
|
||||
this.currentIndex++
|
||||
} else {
|
||||
this.currentIndex = 0
|
||||
}
|
||||
}
|
||||
const { readonly } = this.mindMap.opt
|
||||
// 只读模式下需要清除之前节点的高亮
|
||||
this.clearHighlightOnReadonly()
|
||||
const currentNode = this.matchNodeList[this.currentIndex]
|
||||
this.notResetSearchText = true
|
||||
const uid = this.isNodeInstance(currentNode)
|
||||
? currentNode.getData('uid')
|
||||
: currentNode.data.uid
|
||||
if (!uid) {
|
||||
callback()
|
||||
return
|
||||
}
|
||||
const targetNode = this.mindMap.renderer.findNodeByUid(uid)
|
||||
this.mindMap.execCommand('GO_TARGET_NODE', uid, node => {
|
||||
if (!this.isNodeInstance(currentNode)) {
|
||||
this.matchNodeList[this.currentIndex] = node
|
||||
this.updateMatchNodeList(this.matchNodeList)
|
||||
}
|
||||
callback()
|
||||
// 只读模式下节点无法激活，所以通过高亮的方式
|
||||
if (readonly) {
|
||||
node.highlight()
|
||||
}
|
||||
// 如果当前节点实例已经存在，则不会触发data_change事件，那么需要手动把标志复位
|
||||
if (targetNode) {
|
||||
this.notResetSearchText = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 只读模式下清除现有匹配节点的高亮
|
||||
clearHighlightOnReadonly() {
|
||||
const { readonly } = this.mindMap.opt
|
||||
if (readonly) {
|
||||
this.matchNodeList.forEach(node => {
|
||||
if (this.isNodeInstance(node)) {
|
||||
node.closeHighlight()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 定位到指定搜索结果索引的节点
|
||||
jump(index, callback = () => {}) {
|
||||
this.searchNext(callback, index)
|
||||
}
|
||||
|
||||
// 替换当前节点
|
||||
replace(replaceText, jumpNext = false) {
|
||||
if (
|
||||
replaceText === null ||
|
||||
replaceText === undefined ||
|
||||
!this.isSearching ||
|
||||
this.matchNodeList.length <= 0
|
||||
)
|
||||
return
|
||||
// 自动跳转下一个匹配节点
|
||||
this.isJumpNext = jumpNext
|
||||
replaceText = String(replaceText)
|
||||
let currentNode = this.matchNodeList[this.currentIndex]
|
||||
if (!currentNode) return
|
||||
// 如果当前搜索文本是替换文本的子串，那么该节点还是符合搜索结果的
|
||||
const keep = replaceText.includes(this.searchText)
|
||||
const text = this.getReplacedText(currentNode, this.searchText, replaceText)
|
||||
this.notResetSearchText = true
|
||||
currentNode.setText(text, currentNode.getData('richText'))
|
||||
if (keep) {
|
||||
this.updateMatchNodeList(this.matchNodeList)
|
||||
return
|
||||
}
|
||||
const newList = this.matchNodeList.filter(node => {
|
||||
return currentNode !== node
|
||||
})
|
||||
this.updateMatchNodeList(newList)
|
||||
if (this.currentIndex > this.matchNodeList.length - 1) {
|
||||
this.currentIndex = -1
|
||||
} else {
|
||||
this.currentIndex--
|
||||
}
|
||||
this.emitEvent()
|
||||
}
|
||||
|
||||
// 替换所有
|
||||
replaceAll(replaceText) {
|
||||
if (
|
||||
replaceText === null ||
|
||||
replaceText === undefined ||
|
||||
!this.isSearching ||
|
||||
this.matchNodeList.length <= 0
|
||||
)
|
||||
return
|
||||
replaceText = String(replaceText)
|
||||
// 如果当前搜索文本是替换文本的子串，那么该节点还是符合搜索结果的
|
||||
const keep = replaceText.includes(this.searchText)
|
||||
this.notResetSearchText = true
|
||||
this.matchNodeList.forEach(node => {
|
||||
const text = this.getReplacedText(node, this.searchText, replaceText)
|
||||
if (this.isNodeInstance(node)) {
|
||||
const data = {
|
||||
text
|
||||
}
|
||||
this.mindMap.renderer.setNodeDataRender(node, data, true)
|
||||
} else {
|
||||
node.data.text = text
|
||||
}
|
||||
})
|
||||
this.mindMap.render()
|
||||
this.mindMap.command.addHistory()
|
||||
if (keep) {
|
||||
this.updateMatchNodeList(this.matchNodeList)
|
||||
} else {
|
||||
this.endSearch()
|
||||
}
|
||||
}
|
||||
|
||||
// 获取某个节点替换后的文本
|
||||
getReplacedText(node, searchText, replaceText) {
|
||||
let { richText, text } = this.isNodeInstance(node)
|
||||
? node.getData()
|
||||
: node.data
|
||||
if (richText) {
|
||||
return replaceHtmlText(text, searchText, replaceText)
|
||||
} else {
|
||||
return text.replace(new RegExp(searchText, 'g'), replaceText)
|
||||
}
|
||||
}
|
||||
|
||||
// 发送事件
|
||||
emitEvent() {
|
||||
this.mindMap.emit('search_info_change', {
|
||||
currentIndex: this.currentIndex,
|
||||
total: this.matchNodeList.length
|
||||
})
|
||||
}
|
||||
|
||||
// 插件被移除前做的事情
|
||||
beforePluginRemove() {
|
||||
this.unBindEvent()
|
||||
}
|
||||
|
||||
// 插件被卸载前做的事情
|
||||
beforePluginDestroy() {
|
||||
this.unBindEvent()
|
||||
}
|
||||
}
|
||||
|
||||
Search.instanceName = 'search'
|
||||
|
||||
export default Search
|
||||
@@ -0,0 +1,239 @@
|
||||
import { bfsWalk, throttle, checkTwoRectIsOverlap } from '../utils'
|
||||
import AutoMove from '../utils/AutoMove'
|
||||
|
||||
// 节点选择插件
|
||||
class Select {
|
||||
// 构造函数
|
||||
constructor({ mindMap }) {
|
||||
this.mindMap = mindMap
|
||||
this.rect = null
|
||||
this.isMousedown = false
|
||||
this.mouseDownX = 0
|
||||
this.mouseDownY = 0
|
||||
this.mouseMoveX = 0
|
||||
this.mouseMoveY = 0
|
||||
this.isSelecting = false
|
||||
this.cacheActiveList = []
|
||||
this.autoMove = new AutoMove(mindMap)
|
||||
this.bindEvent()
|
||||
}
|
||||
|
||||
// 绑定事件
|
||||
bindEvent() {
|
||||
this.onMousedown = this.onMousedown.bind(this)
|
||||
this.onMousemove = this.onMousemove.bind(this)
|
||||
this.onMouseup = this.onMouseup.bind(this)
|
||||
this.checkInNodes = throttle(this.checkInNodes, 300, this)
|
||||
|
||||
this.mindMap.on('mousedown', this.onMousedown)
|
||||
this.mindMap.on('mousemove', this.onMousemove)
|
||||
this.mindMap.on('mouseup', this.onMouseup)
|
||||
this.mindMap.on('node_mouseup', this.onMouseup)
|
||||
}
|
||||
|
||||
// 解绑事件
|
||||
unBindEvent() {
|
||||
this.mindMap.off('mousedown', this.onMousedown)
|
||||
this.mindMap.off('mousemove', this.onMousemove)
|
||||
this.mindMap.off('mouseup', this.onMouseup)
|
||||
this.mindMap.off('node_mouseup', this.onMouseup)
|
||||
}
|
||||
|
||||
// 鼠标按下
|
||||
onMousedown(e) {
|
||||
const { readonly, mousedownEventPreventDefault } = this.mindMap.opt
|
||||
if (readonly) {
|
||||
return
|
||||
}
|
||||
let { useLeftKeySelectionRightKeyDrag } = this.mindMap.opt
|
||||
if (
|
||||
!(e.ctrlKey || e.metaKey) &&
|
||||
(useLeftKeySelectionRightKeyDrag ? e.which !== 1 : e.which !== 3)
|
||||
) {
|
||||
return
|
||||
}
|
||||
if (mousedownEventPreventDefault) {
|
||||
e.preventDefault()
|
||||
}
|
||||
this.isMousedown = true
|
||||
this.cacheActiveList = [...this.mindMap.renderer.activeNodeList]
|
||||
let { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
|
||||
this.mouseDownX = x
|
||||
this.mouseDownY = y
|
||||
this.createRect(x, y)
|
||||
}
|
||||
|
||||
// 鼠标移动
|
||||
onMousemove(e) {
|
||||
if (this.mindMap.opt.readonly) {
|
||||
return
|
||||
}
|
||||
if (!this.isMousedown) {
|
||||
return
|
||||
}
|
||||
let { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
|
||||
this.mouseMoveX = x
|
||||
this.mouseMoveY = y
|
||||
if (
|
||||
Math.abs(x - this.mouseDownX) <= 10 &&
|
||||
Math.abs(y - this.mouseDownY) <= 10
|
||||
) {
|
||||
return
|
||||
}
|
||||
this.autoMove.clearAutoMoveTimer()
|
||||
this.autoMove.onMove(
|
||||
e.clientX,
|
||||
e.clientY,
|
||||
() => {
|
||||
this.isSelecting = true
|
||||
// 绘制矩形
|
||||
if (this.rect) {
|
||||
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
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
// 结束框选
|
||||
onMouseup() {
|
||||
if (this.mindMap.opt.readonly) {
|
||||
return
|
||||
}
|
||||
if (!this.isMousedown) {
|
||||
return
|
||||
}
|
||||
this.checkTriggerNodeActiveEvent()
|
||||
this.autoMove.clearAutoMoveTimer()
|
||||
this.isMousedown = false
|
||||
this.cacheActiveList = []
|
||||
if (this.rect) this.rect.remove()
|
||||
this.rect = null
|
||||
setTimeout(() => {
|
||||
this.isSelecting = false
|
||||
}, 0)
|
||||
}
|
||||
|
||||
// 如果激活节点改变了，那么触发事件
|
||||
checkTriggerNodeActiveEvent() {
|
||||
let isNumChange =
|
||||
this.cacheActiveList.length !==
|
||||
this.mindMap.renderer.activeNodeList.length
|
||||
let isNodeChange = false
|
||||
if (!isNumChange) {
|
||||
for (let i = 0; i < this.cacheActiveList.length; i++) {
|
||||
let cur = this.cacheActiveList[i]
|
||||
if (
|
||||
!this.mindMap.renderer.activeNodeList.find(item => {
|
||||
return item.getData('uid') === cur.getData('uid')
|
||||
})
|
||||
) {
|
||||
isNodeChange = true
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
if (isNumChange || isNodeChange) {
|
||||
this.mindMap.renderer.emitNodeActiveEvent()
|
||||
}
|
||||
}
|
||||
|
||||
// 创建矩形
|
||||
createRect(x, y) {
|
||||
if (this.rect) this.rect.remove()
|
||||
this.rect = this.mindMap.svg
|
||||
.polygon()
|
||||
.stroke({
|
||||
color: '#0984e3'
|
||||
})
|
||||
.fill({
|
||||
color: 'rgba(9,132,227,0.3)'
|
||||
})
|
||||
.plot([[x, y]])
|
||||
}
|
||||
|
||||
// 检测在选区里的节点
|
||||
checkInNodes() {
|
||||
let { scaleX, scaleY, translateX, translateY } =
|
||||
this.mindMap.draw.transform()
|
||||
let minx = Math.min(this.mouseDownX, this.mouseMoveX)
|
||||
let miny = Math.min(this.mouseDownY, this.mouseMoveY)
|
||||
let maxx = Math.max(this.mouseDownX, this.mouseMoveX)
|
||||
let maxy = Math.max(this.mouseDownY, this.mouseMoveY)
|
||||
|
||||
const check = node => {
|
||||
let { left, top, width, height } = node
|
||||
let right = (left + width) * scaleX + translateX
|
||||
let bottom = (top + height) * scaleY + translateY
|
||||
left = left * scaleX + translateX
|
||||
top = top * scaleY + translateY
|
||||
if (
|
||||
checkTwoRectIsOverlap(minx, maxx, miny, maxy, left, right, top, bottom)
|
||||
) {
|
||||
if (node.getData('isActive')) {
|
||||
return
|
||||
}
|
||||
this.mindMap.renderer.addNodeToActiveList(node)
|
||||
this.mindMap.renderer.emitNodeActiveEvent()
|
||||
} else if (node.getData('isActive')) {
|
||||
if (!node.getData('isActive')) {
|
||||
return
|
||||
}
|
||||
this.mindMap.renderer.removeNodeFromActiveList(node)
|
||||
this.mindMap.renderer.emitNodeActiveEvent()
|
||||
}
|
||||
}
|
||||
|
||||
bfsWalk(this.mindMap.renderer.root, node => {
|
||||
check(node)
|
||||
// 概要节点
|
||||
if (node._generalizationList && node._generalizationList.length > 0) {
|
||||
node._generalizationList.forEach(item => {
|
||||
check(item.generalizationNode)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 是否存在选区
|
||||
hasSelectRange() {
|
||||
return this.isSelecting
|
||||
}
|
||||
|
||||
// 插件被移除前做的事情
|
||||
beforePluginRemove() {
|
||||
this.unBindEvent()
|
||||
}
|
||||
|
||||
// 插件被卸载前做的事情
|
||||
beforePluginDestroy() {
|
||||
this.unBindEvent()
|
||||
}
|
||||
}
|
||||
|
||||
Select.instanceName = 'select'
|
||||
|
||||
export default Select
|
||||
@@ -0,0 +1,193 @@
|
||||
import { getTwoPointDistance } from '../utils'
|
||||
|
||||
// 手势事件支持插件
|
||||
class TouchEvent {
|
||||
// 构造函数
|
||||
constructor({ mindMap }) {
|
||||
this.mindMap = mindMap
|
||||
this.touchesNum = 0
|
||||
this.singleTouchstartEvent = null
|
||||
this.clickNum = 0
|
||||
this.touchStartScaleView = null
|
||||
this.lastTouchStartPosition = null
|
||||
this.lastTouchStartDistance = 0
|
||||
this.bindEvent()
|
||||
}
|
||||
|
||||
// 绑定事件
|
||||
bindEvent() {
|
||||
this.onTouchstart = this.onTouchstart.bind(this)
|
||||
this.onTouchmove = this.onTouchmove.bind(this)
|
||||
this.onTouchcancel = this.onTouchcancel.bind(this)
|
||||
this.onTouchend = this.onTouchend.bind(this)
|
||||
window.addEventListener('touchstart', this.onTouchstart, { passive: false })
|
||||
window.addEventListener('touchmove', this.onTouchmove, { passive: false })
|
||||
window.addEventListener('touchcancel', this.onTouchcancel, {
|
||||
passive: false
|
||||
})
|
||||
window.addEventListener('touchend', this.onTouchend, { passive: false })
|
||||
}
|
||||
|
||||
// 解绑事件
|
||||
unBindEvent() {
|
||||
window.removeEventListener('touchstart', this.onTouchstart)
|
||||
window.removeEventListener('touchmove', this.onTouchmove)
|
||||
window.removeEventListener('touchcancel', this.onTouchcancel)
|
||||
window.removeEventListener('touchend', this.onTouchend)
|
||||
}
|
||||
|
||||
// 手指按下事件
|
||||
onTouchstart(e) {
|
||||
this.touchesNum = e.touches.length
|
||||
this.touchStartScaleView = null
|
||||
if (this.touchesNum === 1) {
|
||||
let touch = e.touches[0]
|
||||
if (this.lastTouchStartPosition) {
|
||||
this.lastTouchStartDistance = getTwoPointDistance(
|
||||
this.lastTouchStartPosition.x,
|
||||
this.lastTouchStartPosition.y,
|
||||
touch.clientX,
|
||||
touch.clientY
|
||||
)
|
||||
}
|
||||
this.lastTouchStartPosition = {
|
||||
x: touch.clientX,
|
||||
y: touch.clientY
|
||||
}
|
||||
this.singleTouchstartEvent = touch
|
||||
this.dispatchMouseEvent('mousedown', touch.target, touch)
|
||||
}
|
||||
}
|
||||
|
||||
// 手指移动事件
|
||||
onTouchmove(e) {
|
||||
let len = e.touches.length
|
||||
if (len === 1) {
|
||||
let touch = e.touches[0]
|
||||
this.dispatchMouseEvent('mousemove', touch.target, touch)
|
||||
} else if (len === 2) {
|
||||
let { disableTouchZoom, minTouchZoomScale, maxTouchZoomScale } =
|
||||
this.mindMap.opt
|
||||
if (disableTouchZoom) return
|
||||
minTouchZoomScale =
|
||||
minTouchZoomScale === -1 ? -Infinity : minTouchZoomScale / 100
|
||||
maxTouchZoomScale =
|
||||
maxTouchZoomScale === -1 ? Infinity : maxTouchZoomScale / 100
|
||||
let touch1 = e.touches[0]
|
||||
let touch2 = e.touches[1]
|
||||
let ox = touch1.clientX - touch2.clientX
|
||||
let oy = touch1.clientY - touch2.clientY
|
||||
let distance = Math.sqrt(Math.pow(ox, 2) + Math.pow(oy, 2))
|
||||
// 以两指中心点进行缩放
|
||||
let { x: touch1ClientX, y: touch1ClientY } = this.mindMap.toPos(
|
||||
touch1.clientX,
|
||||
touch1.clientY
|
||||
)
|
||||
let { x: touch2ClientX, y: touch2ClientY } = this.mindMap.toPos(
|
||||
touch2.clientX,
|
||||
touch2.clientY
|
||||
)
|
||||
let cx = (touch1ClientX + touch2ClientX) / 2
|
||||
let cy = (touch1ClientY + touch2ClientY) / 2
|
||||
// 手势缩放,基于最开始的位置进行缩放(基于前一个位置缩放不是线性关系); 缩放同时支持位置拖动
|
||||
const view = this.mindMap.view
|
||||
if (!this.touchStartScaleView) {
|
||||
this.touchStartScaleView = {
|
||||
distance: distance,
|
||||
scale: view.scale,
|
||||
x: view.x,
|
||||
y: view.y,
|
||||
cx: cx,
|
||||
cy: cy
|
||||
}
|
||||
return
|
||||
}
|
||||
const viewBefore = this.touchStartScaleView
|
||||
let scale = viewBefore.scale * (distance / viewBefore.distance)
|
||||
if (Math.abs(distance - viewBefore.distance) <= 10) {
|
||||
scale = viewBefore.scale
|
||||
}
|
||||
scale =
|
||||
scale < minTouchZoomScale
|
||||
? minTouchZoomScale
|
||||
: scale > maxTouchZoomScale
|
||||
? maxTouchZoomScale
|
||||
: scale
|
||||
const ratio = 1 - scale / viewBefore.scale
|
||||
view.scale = scale
|
||||
view.x =
|
||||
viewBefore.x +
|
||||
(cx - viewBefore.x) * ratio +
|
||||
(cx - viewBefore.cx) * scale
|
||||
view.y =
|
||||
viewBefore.y +
|
||||
(cy - viewBefore.y) * ratio +
|
||||
(cy - viewBefore.cy) * scale
|
||||
view.transform()
|
||||
this.mindMap.emit('scale', scale)
|
||||
}
|
||||
}
|
||||
|
||||
// 手指取消事件
|
||||
onTouchcancel(e) {}
|
||||
|
||||
// 手指松开事件
|
||||
onTouchend(e) {
|
||||
this.dispatchMouseEvent('mouseup', e.target)
|
||||
if (this.touchesNum === 1) {
|
||||
// 模拟双击事件
|
||||
this.clickNum++
|
||||
setTimeout(() => {
|
||||
this.clickNum = 0
|
||||
this.lastTouchStartPosition = null
|
||||
this.lastTouchStartDistance = 0
|
||||
}, 300)
|
||||
let ev = this.singleTouchstartEvent
|
||||
if (this.clickNum > 1 && this.lastTouchStartDistance <= 5) {
|
||||
this.clickNum = 0
|
||||
this.dispatchMouseEvent('dblclick', ev.target, ev)
|
||||
} else {
|
||||
// 点击事件应该不用模拟
|
||||
// this.dispatchMouseEvent('click', ev.target, ev)
|
||||
}
|
||||
}
|
||||
this.touchesNum = 0
|
||||
this.singleTouchstartEvent = null
|
||||
this.touchStartScaleView = null
|
||||
}
|
||||
|
||||
// 发送鼠标事件
|
||||
dispatchMouseEvent(eventName, target, e) {
|
||||
let opt = {}
|
||||
if (e) {
|
||||
opt = {
|
||||
screenX: e.screenX,
|
||||
screenY: e.screenY,
|
||||
clientX: e.clientX,
|
||||
clientY: e.clientY,
|
||||
which: 1
|
||||
}
|
||||
}
|
||||
let event = new MouseEvent(eventName, {
|
||||
view: document.defaultView,
|
||||
bubbles: true,
|
||||
cancelable: true,
|
||||
...opt
|
||||
})
|
||||
target.dispatchEvent(event)
|
||||
}
|
||||
|
||||
// 插件被移除前做的事情
|
||||
beforePluginRemove() {
|
||||
this.unBindEvent()
|
||||
}
|
||||
|
||||
// 插件被卸载前做的事情
|
||||
beforePluginDestroy() {
|
||||
this.unBindEvent()
|
||||
}
|
||||
}
|
||||
|
||||
TouchEvent.instanceName = 'touchEvent'
|
||||
|
||||
export default TouchEvent
|
||||
@@ -0,0 +1,194 @@
|
||||
import { Text, G } from '@svgdotjs/svg.js'
|
||||
import { degToRad, camelCaseToHyphen } from '../utils'
|
||||
import merge from 'deepmerge'
|
||||
|
||||
// 水印插件
|
||||
class Watermark {
|
||||
constructor(opt = {}) {
|
||||
this.mindMap = opt.mindMap
|
||||
this.lineSpacing = 0 // 水印行间距
|
||||
this.textSpacing = 0 // 行内水印间距
|
||||
this.angle = 0 // 旋转角度
|
||||
this.text = '' // 水印文字
|
||||
this.textStyle = {} // 水印文字样式
|
||||
this.watermarkDraw = null // 容器
|
||||
this.isInExport = false // 是否是在导出过程中
|
||||
this.maxLong = this.getMaxLong()
|
||||
this.updateWatermark(this.mindMap.opt.watermarkConfig || {})
|
||||
this.bindEvent()
|
||||
}
|
||||
|
||||
getMaxLong() {
|
||||
return Math.sqrt(
|
||||
Math.pow(this.mindMap.width, 2) + Math.pow(this.mindMap.height, 2)
|
||||
)
|
||||
}
|
||||
|
||||
bindEvent() {
|
||||
this.onResize = this.onResize.bind(this)
|
||||
this.mindMap.on('resize', this.onResize)
|
||||
}
|
||||
|
||||
unBindEvent() {
|
||||
this.mindMap.off('resize', this.onResize)
|
||||
}
|
||||
|
||||
onResize() {
|
||||
this.maxLong = this.getMaxLong()
|
||||
this.draw()
|
||||
}
|
||||
|
||||
// 创建水印容器
|
||||
createContainer() {
|
||||
if (this.watermarkDraw) return
|
||||
this.watermarkDraw = new G()
|
||||
.css({ 'pointer-events': 'none', 'user-select': 'none' })
|
||||
.addClass('smm-water-mark-container')
|
||||
this.updateLayer()
|
||||
}
|
||||
|
||||
// 更新水印容器层级
|
||||
updateLayer() {
|
||||
if (!this.watermarkDraw) return
|
||||
const { belowNode } = this.mindMap.opt.watermarkConfig
|
||||
if (belowNode) {
|
||||
this.watermarkDraw.insertBefore(this.mindMap.draw)
|
||||
} else {
|
||||
this.mindMap.svg.add(this.watermarkDraw)
|
||||
}
|
||||
}
|
||||
|
||||
// 删除水印容器
|
||||
removeContainer() {
|
||||
if (!this.watermarkDraw) {
|
||||
return
|
||||
}
|
||||
this.watermarkDraw.remove()
|
||||
this.watermarkDraw = null
|
||||
}
|
||||
|
||||
// 获取是否存在水印
|
||||
hasWatermark() {
|
||||
return !!this.text.trim()
|
||||
}
|
||||
|
||||
// 处理水印配置
|
||||
handleConfig({ text, lineSpacing, textSpacing, angle, textStyle }) {
|
||||
this.text = text === undefined ? '' : String(text).trim()
|
||||
this.lineSpacing =
|
||||
typeof lineSpacing === 'number' && lineSpacing > 0 ? lineSpacing : 100
|
||||
this.textSpacing =
|
||||
typeof textSpacing === 'number' && textSpacing > 0 ? textSpacing : 100
|
||||
this.angle =
|
||||
typeof angle === 'number' && angle >= 0 && angle <= 90 ? angle : 30
|
||||
this.textStyle = Object.assign(this.textStyle, textStyle || {})
|
||||
}
|
||||
|
||||
// 清除水印
|
||||
clear() {
|
||||
if (this.watermarkDraw) this.watermarkDraw.clear()
|
||||
}
|
||||
|
||||
// 绘制水印
|
||||
// 非精确绘制，会绘制一些超出可视区域的水印
|
||||
draw() {
|
||||
this.clear()
|
||||
// 如果是仅导出需要水印，那么非导出中不渲染
|
||||
const { onlyExport } = this.mindMap.opt.watermarkConfig
|
||||
if (onlyExport && !this.isInExport) return
|
||||
// 如果没有水印数据，那么水印容器也删除掉
|
||||
if (!this.hasWatermark()) {
|
||||
this.removeContainer()
|
||||
return
|
||||
}
|
||||
this.createContainer()
|
||||
let x = 0
|
||||
while (x < this.mindMap.width) {
|
||||
this.drawText(x)
|
||||
x += this.lineSpacing / Math.sin(degToRad(this.angle))
|
||||
}
|
||||
|
||||
let yOffset =
|
||||
this.lineSpacing / Math.cos(degToRad(this.angle)) || this.lineSpacing
|
||||
let y = yOffset
|
||||
while (y < this.mindMap.height) {
|
||||
this.drawText(0, y)
|
||||
y += yOffset
|
||||
}
|
||||
}
|
||||
|
||||
// 绘制文字
|
||||
drawText(x, y) {
|
||||
let long = Math.min(
|
||||
this.maxLong,
|
||||
(this.mindMap.width - x) / Math.cos(degToRad(this.angle))
|
||||
)
|
||||
let g = new G()
|
||||
let bbox = null
|
||||
let bboxWidth = 0
|
||||
let textHeight = -1
|
||||
while (bboxWidth < long) {
|
||||
let text = new Text().text(this.text)
|
||||
g.add(text)
|
||||
text.transform({
|
||||
translateX: bboxWidth
|
||||
})
|
||||
this.setTextStyle(text)
|
||||
bbox = g.bbox()
|
||||
if (textHeight === -1) {
|
||||
textHeight = bbox.height
|
||||
}
|
||||
bboxWidth = bbox.width + this.textSpacing
|
||||
}
|
||||
let params = {
|
||||
rotate: this.angle,
|
||||
origin: 'top left',
|
||||
translateX: x,
|
||||
translateY: textHeight
|
||||
}
|
||||
if (y !== undefined) {
|
||||
params.translateY = y + textHeight
|
||||
}
|
||||
g.transform(params)
|
||||
this.watermarkDraw.add(g)
|
||||
}
|
||||
|
||||
// 给文字设置样式
|
||||
setTextStyle(text) {
|
||||
Object.keys(this.textStyle).forEach(item => {
|
||||
let value = this.textStyle[item]
|
||||
if (item === 'color') {
|
||||
text.fill(value)
|
||||
} else {
|
||||
text.css(camelCaseToHyphen(item), value)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 更新水印
|
||||
updateWatermark(config) {
|
||||
this.mindMap.opt.watermarkConfig = merge(
|
||||
this.mindMap.opt.watermarkConfig,
|
||||
config
|
||||
)
|
||||
this.updateLayer()
|
||||
this.handleConfig(config)
|
||||
this.draw()
|
||||
}
|
||||
|
||||
// 插件被移除前做的事情
|
||||
beforePluginRemove() {
|
||||
this.unBindEvent()
|
||||
this.removeContainer()
|
||||
}
|
||||
|
||||
// 插件被卸载前做的事情
|
||||
beforePluginDestroy() {
|
||||
this.unBindEvent()
|
||||
this.removeContainer()
|
||||
}
|
||||
}
|
||||
|
||||
Watermark.instanceName = 'watermark'
|
||||
|
||||
export default Watermark
|
||||
@@ -0,0 +1,294 @@
|
||||
import {
|
||||
getAssociativeLineTargetIndex,
|
||||
joinCubicBezierPath,
|
||||
getNodePoint,
|
||||
getDefaultControlPointOffsets
|
||||
} from './associativeLineUtils'
|
||||
|
||||
// 创建控制点、连线节点
|
||||
function createControlNodes(node, toNode) {
|
||||
let { associativeLineActiveColor } = this.getStyleConfig(node, toNode)
|
||||
// 连线
|
||||
this.controlLine1 = this.associativeLineDraw
|
||||
.line()
|
||||
.stroke({ color: associativeLineActiveColor, width: 2 })
|
||||
this.controlLine2 = this.associativeLineDraw
|
||||
.line()
|
||||
.stroke({ color: associativeLineActiveColor, width: 2 })
|
||||
// 控制点
|
||||
this.controlPoint1 = this.createOneControlNode('controlPoint1', node, toNode)
|
||||
this.controlPoint2 = this.createOneControlNode('controlPoint2', node, toNode)
|
||||
}
|
||||
|
||||
// 创建控制点
|
||||
function createOneControlNode(pointKey, node, toNode) {
|
||||
let { associativeLineActiveColor } = this.getStyleConfig(node, toNode)
|
||||
return this.associativeLineDraw
|
||||
.circle(this.controlPointDiameter)
|
||||
.stroke({ color: associativeLineActiveColor })
|
||||
.fill({ color: '#fff' })
|
||||
.click(e => {
|
||||
e.stopPropagation()
|
||||
})
|
||||
.mousedown(e => {
|
||||
this.onControlPointMousedown(e, pointKey)
|
||||
})
|
||||
}
|
||||
|
||||
// 控制点的鼠标按下事件
|
||||
function onControlPointMousedown(e, pointKey) {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
this.isControlPointMousedown = true
|
||||
this.mousedownControlPointKey = pointKey
|
||||
}
|
||||
|
||||
// 控制点的鼠标移动事件
|
||||
function onControlPointMousemove(e) {
|
||||
if (
|
||||
!this.isControlPointMousedown ||
|
||||
!this.mousedownControlPointKey ||
|
||||
!this[this.mousedownControlPointKey]
|
||||
)
|
||||
return
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
let radius = this.controlPointDiameter / 2
|
||||
// 转换鼠标当前的位置
|
||||
let { x, y } = this.getTransformedEventPos(e)
|
||||
this.controlPointMousemoveState.pos = {
|
||||
x,
|
||||
y
|
||||
}
|
||||
// 更新当前拖拽的控制点的位置
|
||||
this[this.mousedownControlPointKey].x(x - radius).y(y - radius)
|
||||
let [, , , node, toNode] = this.activeLine
|
||||
let targetIndex = getAssociativeLineTargetIndex(node, toNode)
|
||||
let { associativeLinePoint, associativeLineTargetControlOffsets } =
|
||||
node.getData()
|
||||
associativeLinePoint = associativeLinePoint || []
|
||||
const nodePos = this.getNodePos(node)
|
||||
const toNodePos = this.getNodePos(toNode)
|
||||
let [startPoint, endPoint] = this.updateAllLinesPos(
|
||||
node,
|
||||
toNode,
|
||||
associativeLinePoint[targetIndex]
|
||||
)
|
||||
this.controlPointMousemoveState.startPoint = startPoint
|
||||
this.controlPointMousemoveState.endPoint = endPoint
|
||||
this.controlPointMousemoveState.targetIndex = targetIndex
|
||||
let offsets = []
|
||||
if (!associativeLineTargetControlOffsets) {
|
||||
// 兼容0.4.5版本，没有associativeLineTargetControlOffsets的情况
|
||||
offsets = getDefaultControlPointOffsets(startPoint, endPoint)
|
||||
} else {
|
||||
offsets = associativeLineTargetControlOffsets[targetIndex]
|
||||
}
|
||||
let point1 = null
|
||||
let point2 = null
|
||||
const { x: clientX, y: clientY } = this.mindMap.toPos(e.clientX, e.clientY)
|
||||
const _e = {
|
||||
clientX,
|
||||
clientY
|
||||
}
|
||||
// 拖拽的是控制点1
|
||||
if (this.mousedownControlPointKey === 'controlPoint1') {
|
||||
startPoint = getNodePoint(nodePos, '', 0, _e)
|
||||
point1 = {
|
||||
x,
|
||||
y
|
||||
}
|
||||
point2 = {
|
||||
x: endPoint.x + offsets[1].x,
|
||||
y: endPoint.y + offsets[1].y
|
||||
}
|
||||
if (startPoint) {
|
||||
// 保存更新后的坐标
|
||||
this.controlPointMousemoveState.startPoint = startPoint
|
||||
// 更新控制点1的连线
|
||||
this.controlLine1.plot(startPoint.x, startPoint.y, point1.x, point1.y)
|
||||
}
|
||||
} else {
|
||||
// 拖拽的是控制点2
|
||||
endPoint = getNodePoint(toNodePos, '', 0, _e)
|
||||
point1 = {
|
||||
x: startPoint.x + offsets[0].x,
|
||||
y: startPoint.y + offsets[0].y
|
||||
}
|
||||
point2 = {
|
||||
x,
|
||||
y
|
||||
}
|
||||
if (endPoint) {
|
||||
// 保存更新后结束节点的坐标
|
||||
this.controlPointMousemoveState.endPoint = endPoint
|
||||
// 更新控制点2的连线
|
||||
this.controlLine2.plot(endPoint.x, endPoint.y, point2.x, point2.y)
|
||||
}
|
||||
}
|
||||
this.updataAassociativeLine(
|
||||
startPoint,
|
||||
endPoint,
|
||||
point1,
|
||||
point2,
|
||||
this.activeLine
|
||||
)
|
||||
}
|
||||
|
||||
function updataAassociativeLine(
|
||||
startPoint,
|
||||
endPoint,
|
||||
point1,
|
||||
point2,
|
||||
activeLine
|
||||
) {
|
||||
const [path, clickPath, text] = activeLine
|
||||
// 更新关联线
|
||||
const pathStr = joinCubicBezierPath(startPoint, endPoint, point1, point2)
|
||||
path.plot(pathStr)
|
||||
clickPath.plot(pathStr)
|
||||
this.updateTextPos(path, text)
|
||||
this.updateTextEditBoxPos(text)
|
||||
}
|
||||
|
||||
// 控制点的鼠标松开事件
|
||||
function onControlPointMouseup(e) {
|
||||
if (!this.isControlPointMousedown) return
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
let { pos, startPoint, endPoint, targetIndex } =
|
||||
this.controlPointMousemoveState
|
||||
let [, , , node] = this.activeLine
|
||||
let offsetList = []
|
||||
let { associativeLinePoint, associativeLineTargetControlOffsets } =
|
||||
node.getData()
|
||||
if (!associativeLinePoint) {
|
||||
associativeLinePoint = []
|
||||
}
|
||||
associativeLinePoint[targetIndex] = associativeLinePoint[targetIndex] || {
|
||||
startPoint,
|
||||
endPoint
|
||||
}
|
||||
if (!associativeLineTargetControlOffsets) {
|
||||
// 兼容0.4.5版本，没有associativeLineTargetControlOffsets的情况
|
||||
offsetList[targetIndex] = getDefaultControlPointOffsets(
|
||||
startPoint,
|
||||
endPoint
|
||||
)
|
||||
} else {
|
||||
offsetList = associativeLineTargetControlOffsets
|
||||
}
|
||||
let offset1 = null
|
||||
let offset2 = null
|
||||
if (this.mousedownControlPointKey === 'controlPoint1') {
|
||||
// 更新控制点1数据
|
||||
offset1 = {
|
||||
x: pos.x - startPoint.x,
|
||||
y: pos.y - startPoint.y
|
||||
}
|
||||
offset2 = offsetList[targetIndex][1]
|
||||
associativeLinePoint[targetIndex].startPoint = startPoint
|
||||
} else {
|
||||
// 更新控制点2数据
|
||||
offset1 = offsetList[targetIndex][0]
|
||||
offset2 = {
|
||||
x: pos.x - endPoint.x,
|
||||
y: pos.y - endPoint.y
|
||||
}
|
||||
associativeLinePoint[targetIndex].endPoint = endPoint
|
||||
}
|
||||
offsetList[targetIndex] = [offset1, offset2]
|
||||
this.mindMap.execCommand('SET_NODE_DATA', node, {
|
||||
associativeLineTargetControlOffsets: offsetList,
|
||||
associativeLinePoint
|
||||
})
|
||||
this.isNotRenderAllLines = true
|
||||
// 这里要加个setTimeout0是因为draw_click事件比mouseup事件触发的晚，所以重置isControlPointMousedown需要等draw_click事件触发完以后
|
||||
setTimeout(() => {
|
||||
this.resetControlPoint()
|
||||
}, 0)
|
||||
}
|
||||
|
||||
// 复位控制点移动
|
||||
function resetControlPoint() {
|
||||
this.isControlPointMousedown = false
|
||||
this.mousedownControlPointKey = ''
|
||||
this.controlPointMousemoveState = {
|
||||
pos: null,
|
||||
startPoint: null,
|
||||
endPoint: null,
|
||||
targetIndex: ''
|
||||
}
|
||||
}
|
||||
|
||||
// 渲染控制点
|
||||
function renderControls(startPoint, endPoint, point1, point2, node, toNode) {
|
||||
if (!this.mindMap.opt.enableAdjustAssociativeLinePoints) return
|
||||
if (!this.controlLine1) {
|
||||
this.createControlNodes(node, toNode)
|
||||
}
|
||||
let radius = this.controlPointDiameter / 2
|
||||
// 控制点和起终点的连线
|
||||
this.controlLine1.plot(startPoint.x, startPoint.y, point1.x, point1.y)
|
||||
this.controlLine2.plot(endPoint.x, endPoint.y, point2.x, point2.y)
|
||||
// 控制点
|
||||
this.controlPoint1.x(point1.x - radius).y(point1.y - radius)
|
||||
this.controlPoint2.x(point2.x - radius).y(point2.y - radius)
|
||||
}
|
||||
|
||||
// 删除控制点
|
||||
function removeControls() {
|
||||
if (!this.controlLine1) return
|
||||
;[
|
||||
this.controlLine1,
|
||||
this.controlLine2,
|
||||
this.controlPoint1,
|
||||
this.controlPoint2
|
||||
].forEach(item => {
|
||||
item.remove()
|
||||
})
|
||||
this.controlLine1 = null
|
||||
this.controlLine2 = null
|
||||
this.controlPoint1 = null
|
||||
this.controlPoint2 = null
|
||||
}
|
||||
|
||||
// 隐藏控制点
|
||||
function hideControls() {
|
||||
if (!this.controlLine1) return
|
||||
;[
|
||||
this.controlLine1,
|
||||
this.controlLine2,
|
||||
this.controlPoint1,
|
||||
this.controlPoint2
|
||||
].forEach(item => {
|
||||
item.hide()
|
||||
})
|
||||
}
|
||||
|
||||
// 显示控制点
|
||||
function showControls() {
|
||||
if (!this.controlLine1) return
|
||||
;[
|
||||
this.controlLine1,
|
||||
this.controlLine2,
|
||||
this.controlPoint1,
|
||||
this.controlPoint2
|
||||
].forEach(item => {
|
||||
item.show()
|
||||
})
|
||||
}
|
||||
|
||||
export default {
|
||||
createControlNodes,
|
||||
createOneControlNode,
|
||||
onControlPointMousedown,
|
||||
onControlPointMousemove,
|
||||
onControlPointMouseup,
|
||||
resetControlPoint,
|
||||
renderControls,
|
||||
removeControls,
|
||||
hideControls,
|
||||
showControls,
|
||||
updataAassociativeLine
|
||||
}
|
||||
@@ -0,0 +1,213 @@
|
||||
import { Text } from '@svgdotjs/svg.js'
|
||||
import {
|
||||
getStrWithBrFromHtml,
|
||||
focusInput,
|
||||
selectAllInput
|
||||
} from '../../utils/index'
|
||||
|
||||
const ASSOCIATIVE_LINE_TEXT_EDIT_WRAP = 'associative-line-text-edit-warp'
|
||||
|
||||
// 创建文字节点
|
||||
function createText(data) {
|
||||
let g = this.associativeLineDraw.group()
|
||||
const setActive = () => {
|
||||
if (
|
||||
!this.activeLine ||
|
||||
this.activeLine[3] !== data.node ||
|
||||
this.activeLine[4] !== data.toNode
|
||||
) {
|
||||
this.setActiveLine({
|
||||
...data,
|
||||
text: g
|
||||
})
|
||||
}
|
||||
}
|
||||
g.click(e => {
|
||||
e.stopPropagation()
|
||||
setActive()
|
||||
})
|
||||
g.on('dblclick', e => {
|
||||
e.stopPropagation()
|
||||
setActive()
|
||||
if (!this.activeLine) return
|
||||
this.showEditTextBox(g)
|
||||
})
|
||||
return g
|
||||
}
|
||||
|
||||
// 显示文本编辑框
|
||||
function showEditTextBox(g) {
|
||||
this.mindMap.emit('before_show_text_edit')
|
||||
// 注册回车快捷键
|
||||
this.mindMap.keyCommand.addShortcut('Enter', () => {
|
||||
this.hideEditTextBox()
|
||||
})
|
||||
// 输入框元素没有创建过，则先创建
|
||||
if (!this.textEditNode) {
|
||||
this.textEditNode = document.createElement('div')
|
||||
this.textEditNode.className = ASSOCIATIVE_LINE_TEXT_EDIT_WRAP
|
||||
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;`
|
||||
this.textEditNode.setAttribute('contenteditable', true)
|
||||
this.textEditNode.addEventListener('keyup', e => {
|
||||
e.stopPropagation()
|
||||
})
|
||||
this.textEditNode.addEventListener('click', e => {
|
||||
e.stopPropagation()
|
||||
})
|
||||
const targetNode = this.mindMap.opt.customInnerElsAppendTo || document.body
|
||||
targetNode.appendChild(this.textEditNode)
|
||||
}
|
||||
let [, , , node, toNode] = this.activeLine
|
||||
let {
|
||||
associativeLineTextFontSize,
|
||||
associativeLineTextFontFamily,
|
||||
associativeLineTextLineHeight
|
||||
} = this.getStyleConfig(node, toNode)
|
||||
let { defaultAssociativeLineText, nodeTextEditZIndex } = this.mindMap.opt
|
||||
let scale = this.mindMap.view.scale
|
||||
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 = nodeTextEditZIndex
|
||||
this.textEditNode.innerHTML = textLines.join('<br>')
|
||||
this.textEditNode.style.display = 'block'
|
||||
this.updateTextEditBoxPos(g)
|
||||
this.setIsShowTextEdit(true)
|
||||
// 如果是默认文本要全选输入框
|
||||
if (text === '' || text === defaultAssociativeLineText) {
|
||||
selectAllInput(this.textEditNode)
|
||||
} else {
|
||||
// 否则聚焦即可
|
||||
focusInput(this.textEditNode)
|
||||
}
|
||||
}
|
||||
|
||||
// 设置文本编辑框是否处于显示状态
|
||||
function setIsShowTextEdit(val) {
|
||||
this.showTextEdit = val
|
||||
if (val) {
|
||||
this.mindMap.keyCommand.stopCheckInSvg()
|
||||
} else {
|
||||
this.mindMap.keyCommand.recoveryCheckInSvg()
|
||||
}
|
||||
}
|
||||
|
||||
// 删除文本编辑框元素
|
||||
function removeTextEditEl() {
|
||||
if (!this.textEditNode) return
|
||||
const targetNode = this.mindMap.opt.customInnerElsAppendTo || document.body
|
||||
targetNode.removeChild(this.textEditNode)
|
||||
}
|
||||
|
||||
// 处理画布缩放
|
||||
function onScale() {
|
||||
this.hideEditTextBox()
|
||||
}
|
||||
|
||||
// 更新文本编辑框位置
|
||||
function updateTextEditBoxPos(g) {
|
||||
let rect = g.node.getBoundingClientRect()
|
||||
if (this.textEditNode) {
|
||||
this.textEditNode.style.minWidth = `${rect.width + 10}px`
|
||||
this.textEditNode.style.minHeight = `${rect.height + 6}px`
|
||||
this.textEditNode.style.left = `${rect.left}px`
|
||||
this.textEditNode.style.top = `${rect.top}px`
|
||||
}
|
||||
}
|
||||
|
||||
// 隐藏文本编辑框
|
||||
function hideEditTextBox() {
|
||||
if (!this.showTextEdit) {
|
||||
return
|
||||
}
|
||||
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.getData('associativeLineText') || {}),
|
||||
[toNode.getData('uid')]: str
|
||||
}
|
||||
})
|
||||
this.textEditNode.style.display = 'none'
|
||||
this.textEditNode.innerHTML = ''
|
||||
this.setIsShowTextEdit(false)
|
||||
this.renderText(str, path, text, node, toNode)
|
||||
this.mindMap.emit('hide_text_edit')
|
||||
}
|
||||
|
||||
// 获取某根关联线的文字
|
||||
function getText(node, toNode) {
|
||||
let obj = node.getData('associativeLineText')
|
||||
if (!obj) {
|
||||
return ''
|
||||
}
|
||||
return obj[toNode.getData('uid')] || ''
|
||||
}
|
||||
|
||||
// 渲染关联线文字
|
||||
function renderText(str, path, text, node, toNode) {
|
||||
if (!str) return
|
||||
let { associativeLineTextFontSize, associativeLineTextLineHeight } =
|
||||
this.getStyleConfig(node, toNode)
|
||||
text.clear()
|
||||
let textArr = str.replace(/\n$/g, '').split(/\n/gim)
|
||||
textArr.forEach((item, index) => {
|
||||
// 避免尾部的空行不占宽度，导致文本编辑框定位异常的问题
|
||||
if (item === '') {
|
||||
item = ''
|
||||
}
|
||||
let textNode = new Text().text(item)
|
||||
textNode.y(
|
||||
associativeLineTextFontSize * associativeLineTextLineHeight * index
|
||||
)
|
||||
this.styleText(textNode, node, toNode)
|
||||
text.add(textNode)
|
||||
})
|
||||
updateTextPos(path, text)
|
||||
}
|
||||
|
||||
// 给文本设置样式
|
||||
function styleText(textNode, node, toNode) {
|
||||
let {
|
||||
associativeLineTextColor,
|
||||
associativeLineTextFontSize,
|
||||
associativeLineTextFontFamily
|
||||
} = this.getStyleConfig(node, toNode)
|
||||
textNode
|
||||
.fill({
|
||||
color: associativeLineTextColor
|
||||
})
|
||||
.css({
|
||||
'font-family': associativeLineTextFontFamily,
|
||||
'font-size': associativeLineTextFontSize + 'px'
|
||||
})
|
||||
}
|
||||
|
||||
// 更新关联线文字位置
|
||||
function updateTextPos(path, text) {
|
||||
let pathLength = path.length()
|
||||
let centerPoint = path.pointAt(pathLength / 2)
|
||||
let { width: textWidth, height: textHeight } = text.bbox()
|
||||
text.x(centerPoint.x - textWidth / 2)
|
||||
text.y(centerPoint.y - textHeight / 2)
|
||||
}
|
||||
|
||||
export default {
|
||||
getText,
|
||||
createText,
|
||||
styleText,
|
||||
onScale,
|
||||
showEditTextBox,
|
||||
setIsShowTextEdit,
|
||||
removeTextEditEl,
|
||||
hideEditTextBox,
|
||||
updateTextEditBoxPos,
|
||||
renderText,
|
||||
updateTextPos
|
||||
}
|
||||
@@ -0,0 +1,336 @@
|
||||
import { getRectRelativePosition } from '../../utils/index'
|
||||
|
||||
// 获取目标节点在起始节点的目标数组中的索引
|
||||
export const getAssociativeLineTargetIndex = (node, toNode) => {
|
||||
return node.getData('associativeLineTargets').findIndex(item => {
|
||||
return item === toNode.getData('uid')
|
||||
})
|
||||
}
|
||||
|
||||
// 计算贝塞尔曲线的控制点
|
||||
export const computeCubicBezierPathPoints = (x1, y1, x2, y2) => {
|
||||
const min = 5
|
||||
let cx1 = x1 + (x2 - x1) / 2
|
||||
let cy1 = y1
|
||||
let cx2 = cx1
|
||||
let cy2 = y2
|
||||
if (Math.abs(x1 - x2) <= min) {
|
||||
cx1 = x1 + (y2 - y1) / 2
|
||||
cx2 = cx1
|
||||
}
|
||||
if (Math.abs(y1 - y2) <= min) {
|
||||
cx1 = x1
|
||||
cy1 = y1 - (x2 - x1) / 2
|
||||
cx2 = x2
|
||||
cy2 = cy1
|
||||
}
|
||||
return [
|
||||
{
|
||||
x: cx1,
|
||||
y: cy1
|
||||
},
|
||||
{
|
||||
x: cx2,
|
||||
y: cy2
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
// 拼接贝塞尔曲线路径
|
||||
export const joinCubicBezierPath = (startPoint, endPoint, point1, point2) => {
|
||||
return `M ${startPoint.x},${startPoint.y} C ${point1.x},${point1.y} ${point2.x},${point2.y} ${endPoint.x},${endPoint.y}`
|
||||
}
|
||||
|
||||
// 获取节点的位置信息
|
||||
const getNodeRect = node => {
|
||||
let { left, top, width, height } = node
|
||||
return {
|
||||
right: left + width,
|
||||
bottom: top + height,
|
||||
left,
|
||||
top,
|
||||
width,
|
||||
height
|
||||
}
|
||||
}
|
||||
|
||||
// 三次贝塞尔曲线
|
||||
export const cubicBezierPath = (x1, y1, x2, y2) => {
|
||||
let points = computeCubicBezierPathPoints(x1, y1, x2, y2)
|
||||
return joinCubicBezierPath(
|
||||
{ x: x1, y: y1 },
|
||||
{ x: x2, y: y2 },
|
||||
points[0],
|
||||
points[1]
|
||||
)
|
||||
}
|
||||
|
||||
export const calcPoint = (node, e) => {
|
||||
const { left, top, translateLeft, translateTop, width, height } = node
|
||||
const clientX = e.clientX
|
||||
const clientY = e.clientY
|
||||
// 中心点的坐标
|
||||
const centerX = translateLeft + width / 2
|
||||
const centerY = translateTop + height / 2
|
||||
const translateCenterX = left + width / 2
|
||||
const translateCenterY = top + height / 2
|
||||
const theta = Math.atan(height / width)
|
||||
// 矩形左上角坐标
|
||||
const deltaX = clientX - centerX
|
||||
const deltaY = centerY - clientY
|
||||
// 方向值
|
||||
const direction = Math.atan2(deltaY, deltaX)
|
||||
// 默认坐标
|
||||
let x = left + width
|
||||
let y = top + height
|
||||
if (direction < theta && direction >= -theta) {
|
||||
// 右边
|
||||
// 正切值 = 对边/邻边，对边 = 正切值*邻边
|
||||
const range = direction * (width / 2)
|
||||
if (direction < theta && direction >= 0) {
|
||||
// 中心点上边
|
||||
y = translateCenterY - range
|
||||
} else if (direction >= -theta && direction < 0) {
|
||||
// 中心点下方
|
||||
y = translateCenterY - range
|
||||
}
|
||||
return {
|
||||
x,
|
||||
y,
|
||||
dir: 'right',
|
||||
range
|
||||
}
|
||||
} else if (direction >= theta && direction < Math.PI - theta) {
|
||||
// 上边
|
||||
y = top
|
||||
let range = 0
|
||||
if (direction < Math.PI / 2 - theta && direction >= theta) {
|
||||
// 正切值 = 对边/邻边，邻边 = 对边/正切值
|
||||
const side = height / 2 / direction
|
||||
range = -side
|
||||
// 中心点右侧
|
||||
x = translateCenterX + side
|
||||
} else if (
|
||||
direction >= Math.PI / 2 - theta &&
|
||||
direction < Math.PI - theta
|
||||
) {
|
||||
// 中心点左侧
|
||||
const tanValue = (centerX - clientX) / (centerY - clientY)
|
||||
const side = (height / 2) * tanValue
|
||||
range = side
|
||||
x = translateCenterX - side
|
||||
}
|
||||
return {
|
||||
x,
|
||||
y,
|
||||
dir: 'top',
|
||||
range
|
||||
}
|
||||
} else if (direction < -theta && direction >= theta - Math.PI) {
|
||||
// 下边
|
||||
let range = 0
|
||||
if (direction >= theta - Math.PI / 2 && direction < -theta) {
|
||||
// 中心点右侧
|
||||
// 正切值 = 对边/邻边，邻边 = 对边/正切值
|
||||
const side = height / 2 / direction
|
||||
range = side
|
||||
x = translateCenterX - side
|
||||
} else if (
|
||||
direction < theta - Math.PI / 2 &&
|
||||
direction >= theta - Math.PI
|
||||
) {
|
||||
// 中心点左侧
|
||||
const tanValue = (centerX - clientX) / (centerY - clientY)
|
||||
const side = (height / 2) * tanValue
|
||||
range = -side
|
||||
x = translateCenterX + side
|
||||
}
|
||||
return {
|
||||
x,
|
||||
y,
|
||||
dir: 'bottom',
|
||||
range
|
||||
}
|
||||
}
|
||||
// 左边
|
||||
x = left
|
||||
const tanValue = (centerY - clientY) / (centerX - clientX)
|
||||
const range = tanValue * (width / 2)
|
||||
if (direction >= -Math.PI && direction < theta - Math.PI) {
|
||||
// 中心点右侧
|
||||
y = translateCenterY - range
|
||||
} else if (direction < Math.PI && direction >= Math.PI - theta) {
|
||||
// 中心点左侧
|
||||
y = translateCenterY - range
|
||||
}
|
||||
return {
|
||||
x,
|
||||
y,
|
||||
dir: 'left',
|
||||
range
|
||||
}
|
||||
}
|
||||
// 获取节点的连接点
|
||||
export const getNodePoint = (node, dir = 'right', range = 0, e = null) => {
|
||||
let { left, top, width, height } = node
|
||||
if (e) {
|
||||
return calcPoint(node, e)
|
||||
}
|
||||
switch (dir) {
|
||||
case 'left':
|
||||
return {
|
||||
x: left,
|
||||
y: top + height / 2 - range,
|
||||
dir
|
||||
}
|
||||
case 'right':
|
||||
return {
|
||||
x: left + width,
|
||||
y: top + height / 2 - range,
|
||||
dir
|
||||
}
|
||||
case 'top':
|
||||
return {
|
||||
x: left + width / 2 - range,
|
||||
y: top,
|
||||
dir
|
||||
}
|
||||
case 'bottom':
|
||||
return {
|
||||
x: left + width / 2 - range,
|
||||
y: top + height,
|
||||
dir
|
||||
}
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
// 根据两个节点的位置计算节点的连接点
|
||||
export const computeNodePoints = (fromNode, toNode) => {
|
||||
const fromRect = getNodeRect(fromNode)
|
||||
const toRect = getNodeRect(toNode)
|
||||
let fromDir = ''
|
||||
let toDir = ''
|
||||
const dir = getRectRelativePosition(
|
||||
{
|
||||
x: fromRect.left,
|
||||
y: fromRect.top,
|
||||
width: fromRect.width,
|
||||
height: fromRect.height
|
||||
},
|
||||
{
|
||||
x: toRect.left,
|
||||
y: toRect.top,
|
||||
width: toRect.width,
|
||||
height: toRect.height
|
||||
}
|
||||
)
|
||||
// 起始矩形在结束矩形的什么方向
|
||||
switch (dir) {
|
||||
case 'left-top':
|
||||
fromDir = 'right'
|
||||
toDir = 'top'
|
||||
break
|
||||
case 'right-top':
|
||||
fromDir = 'left'
|
||||
toDir = 'top'
|
||||
break
|
||||
case 'right-bottom':
|
||||
fromDir = 'left'
|
||||
toDir = 'bottom'
|
||||
break
|
||||
case 'left-bottom':
|
||||
fromDir = 'right'
|
||||
toDir = 'bottom'
|
||||
break
|
||||
case 'left':
|
||||
fromDir = 'right'
|
||||
toDir = 'left'
|
||||
break
|
||||
case 'right':
|
||||
fromDir = 'left'
|
||||
toDir = 'right'
|
||||
break
|
||||
case 'top':
|
||||
fromDir = 'right'
|
||||
toDir = 'right'
|
||||
break
|
||||
case 'bottom':
|
||||
fromDir = 'left'
|
||||
toDir = 'left'
|
||||
break
|
||||
case 'overlap':
|
||||
fromDir = 'right'
|
||||
toDir = 'right'
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
return [getNodePoint(fromNode, fromDir), getNodePoint(toNode, toDir)]
|
||||
}
|
||||
|
||||
// 获取节点的关联线路径
|
||||
export const getNodeLinePath = (startPoint, endPoint, node, toNode) => {
|
||||
let targetIndex = getAssociativeLineTargetIndex(node, toNode)
|
||||
// 控制点
|
||||
let controlPoints = []
|
||||
let associativeLineTargetControlOffsets = node.getData(
|
||||
'associativeLineTargetControlOffsets'
|
||||
)
|
||||
if (
|
||||
associativeLineTargetControlOffsets &&
|
||||
associativeLineTargetControlOffsets[targetIndex]
|
||||
) {
|
||||
// 节点保存了控制点差值
|
||||
let offsets = associativeLineTargetControlOffsets[targetIndex]
|
||||
controlPoints = [
|
||||
{
|
||||
x: startPoint.x + offsets[0].x,
|
||||
y: startPoint.y + offsets[0].y
|
||||
},
|
||||
{
|
||||
x: endPoint.x + offsets[1].x,
|
||||
y: endPoint.y + offsets[1].y
|
||||
}
|
||||
]
|
||||
} else {
|
||||
// 没有保存控制点则生成默认的
|
||||
controlPoints = computeCubicBezierPathPoints(
|
||||
startPoint.x,
|
||||
startPoint.y,
|
||||
endPoint.x,
|
||||
endPoint.y
|
||||
)
|
||||
}
|
||||
// 根据控制点拼接贝塞尔曲线路径
|
||||
return {
|
||||
path: joinCubicBezierPath(
|
||||
startPoint,
|
||||
endPoint,
|
||||
controlPoints[0],
|
||||
controlPoints[1]
|
||||
),
|
||||
controlPoints
|
||||
}
|
||||
}
|
||||
|
||||
// 获取默认的控制点差值
|
||||
export const getDefaultControlPointOffsets = (startPoint, endPoint) => {
|
||||
let controlPoints = computeCubicBezierPathPoints(
|
||||
startPoint.x,
|
||||
startPoint.y,
|
||||
endPoint.x,
|
||||
endPoint.y
|
||||
)
|
||||
return [
|
||||
{
|
||||
x: controlPoints[0].x - startPoint.x,
|
||||
y: controlPoints[0].y - startPoint.y
|
||||
},
|
||||
{
|
||||
x: controlPoints[1].x - endPoint.x,
|
||||
y: controlPoints[1].y - endPoint.y
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,234 @@
|
||||
import { Text, Rect, G } from '@svgdotjs/svg.js'
|
||||
import {
|
||||
getStrWithBrFromHtml,
|
||||
focusInput,
|
||||
selectAllInput
|
||||
} from '../../utils/index'
|
||||
|
||||
const OUTER_FRAME_TEXT_EDIT_WRAP = 'outer-frame-text-edit-warp'
|
||||
|
||||
// 创建文字节点
|
||||
function createText(el, cur, range) {
|
||||
const g = this.draw.group()
|
||||
const setActive = () => {
|
||||
if (!this.activeOuterFrame || this.activeOuterFrame.el !== el) {
|
||||
this.setActiveOuterFrame(el, cur, range, g)
|
||||
}
|
||||
}
|
||||
g.click(e => {
|
||||
e.stopPropagation()
|
||||
setActive()
|
||||
})
|
||||
g.on('dblclick', e => {
|
||||
e.stopPropagation()
|
||||
setActive()
|
||||
this.showEditTextBox(g)
|
||||
})
|
||||
return g
|
||||
}
|
||||
|
||||
// 显示文本编辑框
|
||||
function showEditTextBox(g) {
|
||||
this.mindMap.emit('before_show_text_edit')
|
||||
// 注册回车快捷键
|
||||
this.mindMap.keyCommand.addShortcut('Enter', () => {
|
||||
this.hideEditTextBox()
|
||||
})
|
||||
// 输入框元素没有创建过，则先创建
|
||||
if (!this.textEditNode) {
|
||||
this.textEditNode = document.createElement('div')
|
||||
this.textEditNode.className = OUTER_FRAME_TEXT_EDIT_WRAP
|
||||
this.textEditNode.style.cssText = `
|
||||
position: fixed;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 20px rgba(0,0,0,.5);
|
||||
outline: none;
|
||||
word-break: break-all;
|
||||
`
|
||||
this.textEditNode.setAttribute('contenteditable', true)
|
||||
this.textEditNode.addEventListener('keyup', e => {
|
||||
e.stopPropagation()
|
||||
})
|
||||
this.textEditNode.addEventListener('click', e => {
|
||||
e.stopPropagation()
|
||||
})
|
||||
const targetNode = this.mindMap.opt.customInnerElsAppendTo || document.body
|
||||
targetNode.appendChild(this.textEditNode)
|
||||
}
|
||||
const { node, range } = this.activeOuterFrame
|
||||
const style = this.getStyle(this.getNodeRangeFirstNode(node, range))
|
||||
const [pl, pt, pr, pb] = style.textFillPadding
|
||||
let { defaultOuterFrameText, nodeTextEditZIndex } = this.mindMap.opt
|
||||
let scale = this.mindMap.view.scale
|
||||
let text = this.getText(this.getNodeRangeFirstNode(node, range))
|
||||
let textLines = (text || defaultOuterFrameText).split(/\n/gim)
|
||||
this.textEditNode.style.padding = `${pl}px ${pt}px ${pr}px ${pb}px`
|
||||
this.textEditNode.style.fontFamily = style.fontFamily
|
||||
this.textEditNode.style.fontSize = style.fontSize * scale + 'px'
|
||||
this.textEditNode.style.fontWeight = style.fontWeight
|
||||
this.textEditNode.style.fontStyle = style.fontStyle
|
||||
this.textEditNode.style.lineHeight =
|
||||
textLines.length > 1 ? style.lineHeight : 'normal'
|
||||
this.textEditNode.style.zIndex = nodeTextEditZIndex
|
||||
this.textEditNode.innerHTML = textLines.join('<br>')
|
||||
this.textEditNode.style.display = 'block'
|
||||
this.updateTextEditBoxPos(g)
|
||||
this.setIsShowTextEdit(true)
|
||||
// 如果是默认文本要全选输入框
|
||||
if (text === '' || text === defaultOuterFrameText) {
|
||||
selectAllInput(this.textEditNode)
|
||||
} else {
|
||||
// 否则聚焦即可
|
||||
focusInput(this.textEditNode)
|
||||
}
|
||||
}
|
||||
|
||||
// 设置文本编辑框是否处于显示状态
|
||||
function setIsShowTextEdit(val) {
|
||||
this.showTextEdit = val
|
||||
if (val) {
|
||||
this.mindMap.keyCommand.stopCheckInSvg()
|
||||
} else {
|
||||
this.mindMap.keyCommand.recoveryCheckInSvg()
|
||||
}
|
||||
}
|
||||
|
||||
// 删除文本编辑框元素
|
||||
function removeTextEditEl() {
|
||||
if (!this.textEditNode) return
|
||||
const targetNode = this.mindMap.opt.customInnerElsAppendTo || document.body
|
||||
targetNode.removeChild(this.textEditNode)
|
||||
}
|
||||
|
||||
// 处理画布缩放
|
||||
function onScale() {
|
||||
this.hideEditTextBox()
|
||||
}
|
||||
|
||||
// 更新文本编辑框位置
|
||||
function updateTextEditBoxPos(g) {
|
||||
let rect = g.node.getBoundingClientRect()
|
||||
if (this.textEditNode) {
|
||||
this.textEditNode.style.minWidth = `${rect.width}px`
|
||||
this.textEditNode.style.minHeight = `${rect.height}px`
|
||||
this.textEditNode.style.left = `${rect.left}px`
|
||||
this.textEditNode.style.top = `${rect.top}px`
|
||||
}
|
||||
}
|
||||
|
||||
// 隐藏文本编辑框
|
||||
function hideEditTextBox() {
|
||||
if (!this.showTextEdit) {
|
||||
return
|
||||
}
|
||||
let { el, textNode, node, range } = this.activeOuterFrame
|
||||
let str = getStrWithBrFromHtml(this.textEditNode.innerHTML)
|
||||
// 如果是默认文本，那么不保存
|
||||
let isDefaultText = str === this.mindMap.opt.defaultOuterFrameText
|
||||
str = isDefaultText ? '' : str
|
||||
this.updateActiveOuterFrame({
|
||||
text: str
|
||||
})
|
||||
this.textEditNode.style.display = 'none'
|
||||
this.textEditNode.innerHTML = ''
|
||||
this.setIsShowTextEdit(false)
|
||||
this.renderText(str, el, textNode, node, range)
|
||||
this.mindMap.emit('hide_text_edit')
|
||||
}
|
||||
|
||||
// 渲染文字
|
||||
function renderText(str, rect, textNode, node, range) {
|
||||
if (!str) return
|
||||
// 先清空文字节点原内容
|
||||
textNode.clear()
|
||||
// 创建背景矩形
|
||||
const shape = new Rect()
|
||||
textNode.add(shape)
|
||||
// 获取样式配置
|
||||
const style = this.getStyle(this.getNodeRangeFirstNode(node, range))
|
||||
const [pl, pt, pr, pb] = style.textFillPadding
|
||||
// 创建文本节点
|
||||
let textArr = str.replace(/\n$/g, '').split(/\n/gim)
|
||||
const g = new G()
|
||||
textArr.forEach((item, index) => {
|
||||
// 避免尾部的空行不占宽度，导致文本编辑框定位异常的问题
|
||||
if (item === '') {
|
||||
item = ''
|
||||
}
|
||||
let text = new Text().text(item)
|
||||
text.y(style.fontSize * style.lineHeight * index)
|
||||
this.styleText(text, style)
|
||||
g.add(text)
|
||||
})
|
||||
textNode.add(g)
|
||||
// 计算高度
|
||||
const { width: textWidth, height: textHeight } = textNode.bbox()
|
||||
const totalWidth = textWidth + pl + pr
|
||||
const totalHeight = textHeight + pt + pb
|
||||
shape.size(totalWidth, totalHeight).x(0).dy(0)
|
||||
this.styleTextShape(shape, style)
|
||||
// 设置节点位置
|
||||
let tx = 0
|
||||
switch (style.textAlign) {
|
||||
case 'left':
|
||||
tx = rect.x()
|
||||
break
|
||||
case 'center':
|
||||
tx = rect.x() + rect.width() / 2 - totalWidth / 2
|
||||
break
|
||||
case 'right':
|
||||
tx = rect.x() + rect.width() - totalWidth
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
const ty = rect.y() - totalHeight
|
||||
shape.x(tx)
|
||||
shape.y(ty)
|
||||
g.x(tx + pl)
|
||||
g.y(ty + pt)
|
||||
}
|
||||
|
||||
// 给文本背景设置样式
|
||||
function styleTextShape(shape, style) {
|
||||
shape
|
||||
.fill({
|
||||
color: style.textFill
|
||||
})
|
||||
.radius(style.textFillRadius)
|
||||
}
|
||||
|
||||
// 给文本设置样式
|
||||
function styleText(textNode, style) {
|
||||
textNode
|
||||
.fill({
|
||||
color: style.color
|
||||
})
|
||||
.css({
|
||||
'font-family': style.fontFamily,
|
||||
'font-size': style.fontSize + 'px',
|
||||
'font-weight': style.fontWeight,
|
||||
'font-style': style.fontStyle
|
||||
})
|
||||
}
|
||||
|
||||
// 获取外框文字
|
||||
function getText(node) {
|
||||
const data = node.getData('outerFrame')
|
||||
return data && data.text ? data.text : ''
|
||||
}
|
||||
|
||||
export default {
|
||||
getText,
|
||||
createText,
|
||||
styleTextShape,
|
||||
styleText,
|
||||
onScale,
|
||||
showEditTextBox,
|
||||
setIsShowTextEdit,
|
||||
removeTextEditEl,
|
||||
hideEditTextBox,
|
||||
updateTextEditBoxPos,
|
||||
renderText
|
||||
}
|
||||
@@ -0,0 +1,122 @@
|
||||
import { getTopAncestorsFomNodeList } from '../../utils'
|
||||
|
||||
// 解析要添加外框的节点实例列表
|
||||
export const parseAddNodeList = list => {
|
||||
// 找出顶层节点
|
||||
list = getTopAncestorsFomNodeList(list)
|
||||
const cache = {}
|
||||
const uidToParent = {}
|
||||
// 找出列表中节点在兄弟节点中的索引，并和父节点关联起来
|
||||
list.forEach(node => {
|
||||
const parent = node.parent
|
||||
if (parent) {
|
||||
const pUid = parent.uid
|
||||
uidToParent[pUid] = parent
|
||||
const index = node.getIndexInBrothers()
|
||||
const data = {
|
||||
node,
|
||||
index
|
||||
}
|
||||
if (cache[pUid]) {
|
||||
if (
|
||||
!cache[pUid].find(item => {
|
||||
return item.index === data.index
|
||||
})
|
||||
) {
|
||||
cache[pUid].push(data)
|
||||
}
|
||||
} else {
|
||||
cache[pUid] = [data]
|
||||
}
|
||||
}
|
||||
})
|
||||
const res = []
|
||||
Object.keys(cache).forEach(uid => {
|
||||
const indexList = cache[uid]
|
||||
const parentNode = uidToParent[uid]
|
||||
if (indexList.length > 1) {
|
||||
// 多个节点
|
||||
const rangeList = indexList
|
||||
.map(item => {
|
||||
return item.index
|
||||
})
|
||||
.sort((a, b) => {
|
||||
return a - b
|
||||
})
|
||||
const minIndex = rangeList[0]
|
||||
const maxIndex = rangeList[rangeList.length - 1]
|
||||
let curStart = -1
|
||||
let curEnd = -1
|
||||
for (let i = minIndex; i <= maxIndex; i++) {
|
||||
// 连续索引
|
||||
if (rangeList.includes(i)) {
|
||||
if (curStart === -1) {
|
||||
curStart = i
|
||||
}
|
||||
curEnd = i
|
||||
} else {
|
||||
// 连续断开
|
||||
if (curStart !== -1 && curEnd !== -1) {
|
||||
res.push({
|
||||
node: parentNode,
|
||||
range: [curStart, curEnd]
|
||||
})
|
||||
}
|
||||
curStart = -1
|
||||
curEnd = -1
|
||||
}
|
||||
}
|
||||
// 不要忘了最后一段索引
|
||||
if (curStart !== -1 && curEnd !== -1) {
|
||||
res.push({
|
||||
node: parentNode,
|
||||
range: [curStart, curEnd]
|
||||
})
|
||||
}
|
||||
} else {
|
||||
// 单个节点
|
||||
res.push({
|
||||
node: parentNode,
|
||||
range: [indexList[0].index, indexList[0].index]
|
||||
})
|
||||
}
|
||||
})
|
||||
return res
|
||||
}
|
||||
|
||||
// 解析获取节点的子节点生成的外框列表
|
||||
export const getNodeOuterFrameList = node => {
|
||||
const children = node.children
|
||||
if (!children || children.length <= 0) return
|
||||
const res = []
|
||||
const map = {}
|
||||
children.forEach((item, index) => {
|
||||
const outerFrameData = item.getData('outerFrame')
|
||||
if (!outerFrameData) return
|
||||
const groupId = outerFrameData.groupId
|
||||
if (groupId) {
|
||||
if (!map[groupId]) {
|
||||
map[groupId] = []
|
||||
}
|
||||
map[groupId].push({
|
||||
node: item,
|
||||
index
|
||||
})
|
||||
} else {
|
||||
res.push({
|
||||
nodeList: [item],
|
||||
range: [index, index]
|
||||
})
|
||||
}
|
||||
})
|
||||
Object.keys(map).forEach(id => {
|
||||
const list = map[id]
|
||||
res.push({
|
||||
nodeList: list.map(item => {
|
||||
return item.node
|
||||
}),
|
||||
range: [list[0].index, list[list.length - 1].index]
|
||||
})
|
||||
})
|
||||
return res
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
// 展开按钮
|
||||
const open = `<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" 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"></path></svg>`
|
||||
|
||||
// 收缩按钮
|
||||
const close = `<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" 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"></path><path d="M252.928 474.624h518.144v74.24h-518.144z"></path></svg>`
|
||||
|
||||
// 删除按钮
|
||||
const remove = `<svg width="14px" height="14px" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" 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"></path><path fill="#ffffff" d="M252.928 474.624h518.144v74.24h-518.144z"></path></svg>`
|
||||
|
||||
// 图片调整按钮
|
||||
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>`
|
||||
|
||||
// 快捷创建子节点按钮
|
||||
const quickCreateChild = `<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M514.048 62.464q93.184 0 175.616 35.328t143.872 96.768 96.768 143.872 35.328 175.616q0 94.208-35.328 176.128t-96.768 143.36-143.872 96.768-175.616 35.328q-94.208 0-176.64-35.328t-143.872-96.768-96.768-143.36-35.328-176.128q0-93.184 35.328-175.616t96.768-143.872 143.872-96.768 176.64-35.328zM772.096 576.512q26.624 0 45.056-18.944t18.432-45.568-18.432-45.056-45.056-18.432l-192.512 0 0-192.512q0-26.624-18.944-45.568t-45.568-18.944-45.056 18.944-18.432 45.568l0 192.512-192.512 0q-26.624 0-45.056 18.432t-18.432 45.056 18.432 45.568 45.056 18.944l192.512 0 0 191.488q0 26.624 18.432 45.568t45.056 18.944 45.568-18.944 18.944-45.568l0-191.488 192.512 0z"></path></svg>`
|
||||
|
||||
export default {
|
||||
open,
|
||||
close,
|
||||
remove,
|
||||
imgAdjust,
|
||||
quickCreateChild
|
||||
}
|
||||
@@ -0,0 +1,313 @@
|
||||
import { mergerIconList } from '../utils'
|
||||
|
||||
// 超链接图标
|
||||
const hyperlink =
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" ><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" ></path></svg>'
|
||||
|
||||
// 备注图标
|
||||
const note =
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" ><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" ></path></svg>'
|
||||
|
||||
// 附件图标
|
||||
const attachment =
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" width="128" height="128"><path d="M516.373333 375.978667l136.576-136.576a147.797333 147.797333 0 0 1 208.853334-0.021334 147.690667 147.690667 0 0 1-0.042667 208.832l-204.8 204.778667v0.021333l-153.621333 153.6c-85.973333 85.973333-225.28 85.973333-311.253334 0.021334-85.994667-85.973333-85.973333-225.216 0.149334-311.36L431.146667 256.362667a21.333333 21.333333 0 0 0-30.165334-30.165334L162.069333 465.066667c-102.805333 102.826667-102.826667 269.056-0.149333 371.733333 102.613333 102.613333 268.970667 102.613333 371.584 0l153.6-153.642667h0.021333l0.021334-0.021333 204.778666-204.778667c74.325333-74.325333 74.346667-194.858667 0.021334-269.184-74.24-74.24-194.88-74.24-269.162667 0.042667l-136.576 136.554667-187.626667 187.626666a117.845333 117.845333 0 0 0-0.106666 166.826667 118.037333 118.037333 0 0 0 166.826666-0.106667l255.850667-255.829333a21.333333 21.333333 0 0 0-30.165333-30.165333L435.136 669.973333a75.370667 75.370667 0 0 1-106.496 0.106667 75.178667 75.178667 0 0 1 0.128-106.496l187.605333-187.605333z" ></path></svg>'
|
||||
|
||||
// 节点icon
|
||||
export const nodeIconList = [
|
||||
{
|
||||
name: '优先级图标',
|
||||
type: 'priority',
|
||||
list: [
|
||||
{
|
||||
name: '1',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M512.042667 1024C229.248 1024 0 794.794667 0 511.957333 0 229.205333 229.248 0 512.042667 0 794.752 0 1024 229.205333 1024 511.957333 1024 794.794667 794.752 1024 512.042667 1024z" fill="#E93B30"></path><path d="M580.309333 256h-75.52c-10.666667 29.824-30.165333 55.765333-58.709333 78.165333-28.416 22.314667-54.869333 37.418667-79.146667 45.397334v84.608a320 320 0 0 0 120.234667-70.698667v352.085333H580.266667V256z" fill="#FFFFFF"></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '2',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M511.957333 1024C229.248 1024 0 794.752 0 512S229.248 0 511.957333 0C794.752 0 1024 229.248 1024 512s-229.248 512-512.042667 512z" fill="#FA8D2E"></path><path d="M667.946667 658.602667h-185.301334c4.864-8.533333 11.178667-17.066667 19.072-25.984 7.808-8.874667 26.453333-26.837333 55.936-53.888 29.525333-27.008 49.877333-47.786667 61.226667-62.165334 16.981333-21.717333 29.44-42.453333 37.290667-62.293333 7.808-19.84 11.776-40.746667 11.776-62.677333 0-38.570667-13.738667-70.741333-41.088-96.725334C599.466667 268.928 561.706667 256 513.834667 256c-43.690667 0-80.128 11.136-109.354667 33.578667-29.098667 22.4-46.506667 59.306667-52.010667 110.805333l93.184 9.301333c1.792-27.349333 8.405333-46.890667 19.754667-58.624 11.434667-11.776 26.837333-17.664 46.165333-17.664 19.541333 0 34.858667 5.589333 45.909334 16.768 11.136 11.264 16.682667 27.221333 16.682666 48.042667 0 18.858667-6.4 37.930667-19.242666 57.258667-9.472 14.037333-35.157333 40.533333-77.098667 79.872-52.096 48.554667-87.04 87.509333-104.704 116.821333A226.688 226.688 0 0 0 341.333333 745.429333h326.613334v-86.826666z" fill="#FFFFFF"></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '3',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M512 0C229.248 0 0 229.248 0 512s229.248 512 512 512 512-229.248 512-512S794.752 0 512 0z" fill="#2E66FA"></path><path d="M627.754667 731.733333c-29.354667 25.088-66.901333 37.632-112.725334 37.632-44.928 0-81.792-11.52-110.592-34.773333-33.066667-26.538667-49.877333-64.469333-50.304-114.133333h92.16c0.426667 21.76 7.552 38.314667 21.333334 49.664 12.288 10.88 28.117333 16.341333 47.402666 16.341333 20.309333 0 36.778667-6.101333 49.322667-18.432 12.544-12.330667 18.773333-29.568 18.773333-51.797333 0-21.290667-6.229333-38.186667-18.773333-50.773334-12.544-12.501333-29.866667-18.773333-52.138667-18.773333h-13.525333v-80.042667H512c42.112 0 63.274667-21.034667 63.274667-63.146666 0-20.309333-5.888-36.096-17.706667-47.445334a60.757333 60.757333 0 0 0-43.818667-17.066666c-17.493333 0-32 5.504-43.434666 16.298666-11.562667 10.88-17.792 25.728-18.773334 44.714667H359.68c0.981333-43.946667 16.042667-78.976 45.397333-104.96 29.354667-25.941333 65.706667-39.04 109.226667-39.04 44.928 0 81.792 13.525333 110.592 40.490667 28.8 26.922667 43.306667 61.610667 43.306667 104.149333 0 48.213333-19.413333 82.688-58.154667 103.552 43.52 23.125333 65.28 61.44 65.28 114.858667 0 48.128-15.957333 85.76-47.573333 112.682666z" fill="#FFFFFF"></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '4',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M512.042667 1024C229.248 1024 0 794.794667 0 512.042667 0 229.205333 229.248 0 512.042667 0 794.752 0 1024 229.205333 1024 512.042667 1024 794.794667 794.752 1024 512.042667 1024z" fill="#6D768D"></path><path d="M600.96 256v309.802667h60.117333v81.536h-60.16v98.218666h-90.154666v-98.218666H311.466667v-81.237334L522.666667 256h78.293333zM510.72 399.104l-112.042667 166.698667h112.042667V399.104z" fill="#FFFFFF"></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '5',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M512.042667 1024C229.248 1024 0 794.794667 0 512.042667 0 229.205333 229.248 0 512.042667 0 794.752 0 1024 229.205333 1024 512.042667 1024 794.794667 794.752 1024 512.042667 1024z" fill="#6D768D"></path><path d="M470.912 343.552h175.786667V256H400.256l-47.786667 253.952 75.434667 10.837333c21.205333-23.552 45.269333-35.413333 72.021333-35.413333 21.546667 0 38.997333 7.509333 52.437334 22.4 13.312 15.018667 20.053333 37.418667 20.053333 67.328 0 31.872-6.741333 55.765333-20.181333 71.552-13.397333 15.872-29.866667 23.765333-49.237334 23.765333-17.066667 0-32.085333-6.186667-45.013333-18.432-13.013333-12.373333-20.821333-29.013333-23.466667-50.133333L341.333333 611.498667c5.546667 40.874667 22.485333 73.429333 50.730667 97.621333 28.330667 24.32 64.938667 36.437333 109.866667 36.437333 56.149333 0 100.053333-21.546667 131.754666-64.554666a176.64 176.64 0 0 0 34.816-107.52c0-48.042667-14.378667-87.210667-43.221333-117.333334-28.8-30.208-63.957333-45.312-105.514667-45.312-21.674667 0-42.922667 5.248-63.829333 15.616l14.976-82.901333z" fill="#FFFFFF"></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '6',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M512 1024C229.248 1024 0 794.794667 0 512.042667 0 229.205333 229.248 0 512 0c282.88 0 512 229.205333 512 512.042667C1024 794.794667 794.88 1024 512 1024z" fill="#6D768D"></path><path d="M519.210667 256c36.992 0 67.626667 10.368 91.776 31.189333 24.192 20.821333 39.68 51.029333 46.293333 90.709334l-90.197333 9.984c-2.176-18.56-7.978667-32.298667-17.28-41.173334-9.258667-8.874667-21.418667-13.226667-36.224-13.226666-19.754667 0-36.437333 8.789333-50.048 26.453333-13.696 17.664-22.314667 54.613333-25.856 110.549333 23.296-27.52 52.138667-41.258667 86.656-41.258666 38.997333 0 72.362667 14.805333 100.181333 44.544 27.733333 29.696 41.685333 68.010667 41.685333 114.858666 0 49.877333-14.634667 89.856-43.818666 119.936-29.226667 30.208-66.730667 45.226667-112.554667 45.226667-49.066667 0-89.429333-19.072-121.130667-57.344C357.12 658.218667 341.333333 595.541333 341.333333 508.416c0-89.344 16.469333-153.813333 49.493334-193.194667C423.722667 275.754667 466.56 256 519.168 256z m-9.472 241.834667c-17.962667 0-33.066667 6.997333-45.525334 21.12-12.330667 14.037333-18.56 34.858667-18.56 62.293333 0 30.421333 6.912 53.76 20.906667 70.4 13.952 16.469333 29.866667 24.746667 47.786667 24.746667 17.28 0 31.701333-6.826667 43.178666-20.309334 11.52-13.525333 17.237333-35.669333 17.237334-66.56 0-31.658667-6.186667-54.869333-18.517334-69.546666a58.197333 58.197333 0 0 0-46.506666-22.144z" fill="#FFFFFF"></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '7',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M512.042667 1024C229.248 1024 0 794.752 0 512S229.248 0 512.042667 0C794.752 0 1024 229.248 1024 512s-229.248 512-511.957333 512z" fill="#6D768D"></path><path d="M673.024 273.066667H354.133333v86.869333h212.224a691.2 691.2 0 0 0-104.746666 187.989333c-26.026667 70.101333-39.978667 138.88-41.429334 206.293334h89.6c-0.298667-42.922667 6.698667-91.776 21.034667-146.474667a654.72 654.72 0 0 1 62.08-154.965333c27.136-48.554667 53.888-85.76 80.128-111.701334V273.066667z" fill="#FFFFFF"></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '8',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512z" fill="#6D768D"></path><path d="M512.426667 256c46.208 0 82.048 11.861333 107.605333 35.541333 25.6 23.68 38.314667 53.674667 38.314667 89.898667 0 22.613333-5.802667 42.666667-17.578667 60.330667a111.445333 111.445333 0 0 1-49.450667 40.277333c26.965333 10.837333 47.36 26.752 61.312 47.658667 13.994667 20.906667 21.034667 45.013333 21.034667 72.362666 0 45.098667-14.336 81.834667-42.965333 109.952-28.586667 28.245333-66.602667 42.368-114.090667 42.368-44.245333 0-81.066667-11.648-110.464-34.986666-34.645333-27.52-52.010667-65.28-52.010667-113.365334 0-26.368 6.528-50.645333 19.626667-72.746666 13.056-22.144 33.578667-39.210667 61.696-51.242667-24.064-10.154667-41.557333-24.192-52.48-41.941333a109.824 109.824 0 0 1-16.512-58.666667c0-36.224 12.757333-66.218667 37.973333-89.898667 25.386667-23.68 61.354667-35.541333 108.032-35.541333z m1.28 265.429333c-22.784 0-39.722667 7.978667-50.901334 23.893334-11.136 15.786667-16.64 33.066667-16.64 51.498666 0 25.984 6.485333 46.208 19.712 60.714667 13.098667 14.506667 29.525333 21.802667 49.152 21.802667 19.242667 0 35.157333-6.997333 47.786667-20.992 12.629333-13.909333 18.858667-34.048 18.858667-60.416 0-23.082667-6.314667-41.557333-19.2-55.466667a63.274667 63.274667 0 0 0-48.725334-21.034667z m-0.341334-191.488c-17.792 0-32 5.333333-42.581333 16-10.538667 10.666667-15.872 24.746667-15.872 42.325334 0 18.645333 5.248 33.152 15.701333 43.648 10.453333 10.453333 24.362667 15.658667 41.770667 15.658666 17.664 0 31.658667-5.290667 42.24-15.872 10.538667-10.581333 15.872-25.173333 15.872-43.818666 0-17.493333-5.248-31.573333-15.701333-42.154667s-24.277333-15.786667-41.429334-15.786667z" fill="#FFFFFF"></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '9',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M512 1024C229.248 1024 0 794.794667 0 512.042667 0 229.333333 229.248 0 512 0c282.88 0 512 229.333333 512 512.042667C1024 794.794667 794.88 1024 512 1024z" fill="#6D768D"></path><path d="M497.28 256c49.365333 0 89.856 19.157333 121.429333 57.429333 31.701333 38.229333 47.488 101.205333 47.488 188.842667 0 89.173333-16.384 153.386667-49.365333 192.853333-32.853333 39.594667-75.605333 59.264-128.426667 59.264-37.888 0-68.608-10.154667-91.989333-30.506666s-38.4-50.816-45.013333-91.306667l90.112-9.984c2.261333 18.474667 8.021333 32.085333 17.28 41.088 9.173333 8.874667 21.418667 13.312 36.608 13.312 19.2 0 35.541333-8.874667 48.981333-26.752 13.44-17.749333 22.016-54.613333 25.770667-110.549333-23.466667 27.264-52.821333 40.874667-88.064 40.874666-38.314667 0-71.253333-14.72-99.114667-44.330666C355.242667 506.709333 341.333333 468.224 341.333333 420.864c0-49.493333 14.592-89.258667 43.946667-119.466667C414.549333 271.104 451.925333 256 497.237333 256z m-4.352 77.482667c-17.237333 0-31.658667 6.826667-43.008 20.437333-11.477333 13.653333-17.194667 35.84-17.194667 66.816 0 31.402667 6.229333 54.485333 18.645334 69.205333 12.458667 14.72 27.946667 22.101333 46.592 22.101334 18.005333 0 33.066667-7.082667 45.44-21.205334 12.330667-14.208 18.432-35.029333 18.432-62.506666 0-29.994667-6.912-53.376-20.821334-69.973334-13.824-16.597333-29.866667-24.874667-48.085333-24.874666z" fill="#FFFFFF"></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '10',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M512.042667 1024C229.248 1024 0 794.794667 0 511.957333 0 229.205333 229.248 0 512.042667 0 794.752 0 1024 229.205333 1024 511.957333 1024 794.794667 794.752 1024 512.042667 1024z" fill="#6D768D"></path><path d="M619.946667 273.066667c46.976 0 83.754667 16.042667 110.250666 48.042666 31.573333 37.973333 47.36 100.864 47.36 188.672 0 87.722667-15.829333 150.698667-47.658666 189.056-26.325333 31.616-62.976 47.36-109.952 47.36-47.274667 0-85.418667-17.237333-114.346667-51.968-28.885333-34.602667-43.392-96.426667-43.392-185.386666 0-87.168 15.872-150.016 47.701333-188.416 26.282667-31.488 62.933333-47.36 110.037334-47.36z m-207.488 12.8v452.266666H325.504V411.690667A299.904 299.904 0 0 1 213.333333 476.373333V398.933333c22.656-7.296 47.36-21.12 73.856-41.514666 26.624-20.522667 44.842667-44.288 54.784-71.552h70.485334z m207.488 60.842666c-11.306667 0-21.461333 3.413333-30.336 10.24-8.874667 6.826667-15.786667 19.157333-20.693334 36.864-6.4 22.997333-9.642667 61.653333-9.642666 115.968 0 54.442667 2.944 91.733333 8.661333 112.128 5.802667 20.352 13.098667 33.877333 21.845333 40.618667 8.789333 6.741333 18.858667 10.154667 30.165334 10.154667 11.349333 0 21.376-3.498667 30.250666-10.325334 8.874667-6.826667 15.786667-19.157333 20.693334-36.778666 6.4-22.826667 9.642667-61.354667 9.642666-115.797334 0-54.314667-2.858667-91.648-8.661333-112.042666-5.802667-20.352-13.013333-33.962667-21.76-40.789334a47.616 47.616 0 0 0-30.165333-10.24z" fill="#FFFFFF"></path></svg>`
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '进度图标',
|
||||
type: 'progress',
|
||||
list: [
|
||||
{
|
||||
name: '1',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M512 0C229.248 0 0 229.248 0 512s229.248 512 512 512 512-229.248 512-512S794.752 0 512 0z" fill="#12BB37"></path><path d="M512 928c-229.76 0-416-186.24-416-416S282.24 96 512 96V512l294.144-294.144A414.72 414.72 0 0 1 928 512c0 229.76-186.24 416-416 416z" fill="#FFFFFF"></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '2',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M512 0C229.248 0 0 229.248 0 512s229.248 512 512 512 512-229.248 512-512S794.752 0 512 0z" fill="#12BB37"></path><path d="M512 928c-229.76 0-416-186.24-416-416S282.24 96 512 96V512h416c0 229.76-186.24 416-416 416z" fill="#FFFFFF"></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '3',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M512 0C229.248 0 0 229.248 0 512s229.248 512 512 512 512-229.248 512-512S794.752 0 512 0z" fill="#12BB37"></path><path d="M512 928c-229.76 0-416-186.24-416-416S282.24 96 512 96V512l294.144 294.144A414.72 414.72 0 0 1 512 928z" fill="#FFFFFF"></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '4',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M512 0C229.248 0 0 229.248 0 512s229.248 512 512 512 512-229.248 512-512S794.752 0 512 0z" fill="#12BB37"></path><path d="M512 928c-229.76 0-416-186.24-416-416S282.24 96 512 96v832z" fill="#FFFFFF"></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '5',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M512 0C229.248 0 0 229.248 0 512s229.248 512 512 512 512-229.248 512-512S794.752 0 512 0z" fill="#12BB37"></path><path d="M512 512l-294.144 294.144A414.72 414.72 0 0 1 96 512c0-229.76 186.24-416 416-416V512z" fill="#FFFFFF"></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '6',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M512 0C229.248 0 0 229.248 0 512s229.248 512 512 512 512-229.248 512-512S794.752 0 512 0z" fill="#12BB37"></path><path d="M512 512H96c0-229.76 186.24-416 416-416V512z" fill="#FFFFFF"></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '7',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M512 0C229.248 0 0 229.248 0 512s229.248 512 512 512 512-229.248 512-512S794.752 0 512 0z" fill="#12BB37"></path><path d="M512 512L217.856 217.856A414.72 414.72 0 0 1 512 96V512z" fill="#FFFFFF"></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '8',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M0 512c0 282.752 229.248 512 512 512s512-229.248 512-512S794.752 0 512 0 0 229.248 0 512z" fill="#12BB37"></path><path d="M716.629333 341.333333h-51.328a35.072 35.072 0 0 0-28.330666 14.293334l-171.989334 233.984-77.909333-106.026667a35.2 35.2 0 0 0-28.330667-14.293333H307.413333c-7.082667 0-11.264 7.936-7.082666 13.653333l136.32 185.472a35.2 35.2 0 0 0 56.533333 0l230.4-313.429333a8.533333 8.533333 0 0 0-6.954667-13.653334z" fill="#FFFFFF"></path></svg>`
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '表情图标',
|
||||
type: 'expression',
|
||||
list: [
|
||||
{
|
||||
name: '1',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1026 1024"><path d="M1.097856 1.097642h1021.804717v1021.804716H1.097856z" fill="#F09495" ></path><path d="M1024.000214 1024H0.000214V0h1024v1024z m-1021.804716-2.195284h1019.609433V2.195284H2.195498v1019.609432z" fill="#FFFFFF" ></path><path d="M234.695985 335.179887m-27.341259 0a27.341259 27.341259 0 1 0 54.682518 0 27.341259 27.341259 0 1 0-54.682518 0Z" fill="#040000" ></path><path d="M234.695985 363.519002c-15.666342 0-28.339115-12.772559-28.339115-28.339115 0-15.666342 12.772559-28.339115 28.339115-28.339115s28.339115 12.772559 28.339115 28.339115c0.099786 15.666342-12.672773 28.339115-28.339115 28.339115z m0-54.582732c-14.468914 0-26.243617 11.774703-26.243617 26.243617s11.774703 26.243617 26.243617 26.243617 26.243617-11.774703 26.243617-26.243617-11.774703-26.243617-26.243617-26.243617z" fill="#FFFFFF" ></path><path d="M776.232528 335.179887m-27.341259 0a27.341259 27.341259 0 1 0 54.682518 0 27.341259 27.341259 0 1 0-54.682518 0Z" fill="#040000" ></path><path d="M776.232528 363.519002c-15.666342 0-28.339115-12.772559-28.339115-28.339115 0-15.666342 12.772559-28.339115 28.339115-28.339115 15.666342 0 28.339115 12.772559 28.339115 28.339115 0 15.666342-12.772559 28.339115-28.339115 28.339115z m0-54.582732c-14.468914 0-26.243617 11.774703-26.243617 26.243617s11.774703 26.243617 26.243617 26.243617 26.243617-11.774703 26.243617-26.243617c-0.099786-14.468914-11.874488-26.243617-26.243617-26.243617z" fill="#FFFFFF" ></path><path d="M512.000214 671.656987c-52.58702 0-105.872539-17.961411-105.872539-52.387449S459.413194 566.882089 512.000214 566.882089s105.872539 17.961411 105.87254 52.387449S564.587234 671.656987 512.000214 671.656987z m0-74.240499c-21.952836 0-43.207172 3.592282-58.2748 9.77899-13.870201 5.68778-17.06334 11.275775-17.06334 12.07406s3.19314 6.386279 17.06334 12.07406c15.067628 6.186708 36.321965 9.77899 58.2748 9.77899s43.207172-3.592282 58.274801-9.77899c13.870201-5.68778 17.06334-11.275775 17.06334-12.07406s-3.19314-6.386279-17.06334-12.07406c-15.067628-6.286494-36.321965-9.77899-58.274801-9.77899z" fill="#040000" ></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '2',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M0 0h1024v1024H0z" fill="#E6A6C9" ></path><path d="M315.1 368.1c-23.9 0-43.3-19.4-43.3-43.3s19.4-43.3 43.3-43.3 43.3 19.4 43.3 43.3-19.4 43.3-43.3 43.3z m0-74.7c-17.3 0-31.3 14.1-31.3 31.3 0 17.3 14.1 31.3 31.3 31.3 17.3 0 31.3-14.1 31.3-31.3 0-17.2-14-31.3-31.3-31.3zM738.7 368.1c-23.9 0-43.3-19.4-43.3-43.3s19.4-43.3 43.3-43.3 43.3 19.4 43.3 43.3-19.4 43.3-43.3 43.3z m0-74.7c-17.3 0-31.3 14.1-31.3 31.3 0 17.3 14.1 31.3 31.3 31.3 17.3 0 31.3-14.1 31.3-31.3 0-17.2-14-31.3-31.3-31.3zM293.5 698.8l-14.5-1.3c0.1-0.6 1.5-14.6 15.1-27.9 17.2-16.7 45-24.8 82.7-24 4.9-0.1 10.9-10.5 16.1-19.6 8.4-14.7 19-33.1 37.9-34.3 19.4-1.2 42.2 16.4 71.5 55.4 9.9 5.2 16.5 11.2 21.8 16.1 8.4 7.7 13.1 11.9 25.1 10.8 14.9-1.4 38.9-11.1 77.5-31.4 26.8-28.4 56.4-41.4 83.5-36.6 27.9 4.9 50.6 27.6 67.5 67.5l-13.4 5.7c-14.7-34.5-34.3-54.9-56.7-58.8-22.3-3.9-47.6 7.8-71.2 33.1l-0.8 0.9-1.1 0.6c-85.6 45.1-99.4 38-120.2 19.1-5.5-5-11.2-10.2-20.1-14.7l-1.5-0.8-1-1.4c-32.2-43.2-50.4-51.6-60-51-11.1 0.7-18.8 14-26.2 27-7.6 13.2-15.4 26.9-28.8 26.9h-0.2c-78.4-1.6-83 38.3-83 38.7z" fill="#040000" ></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '3',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1026 1024" ><path d="M1.1 1.097642h1021.804716v1021.804716H1.1z" fill="#F7E983" ></path><path d="M1024.002358 1024H0.002358V0h1024v1024z m-1021.804716-2.195284h1019.609433V2.195284H2.197642v1019.609432z" fill="#FFFFFF" ></path><path d="M329.174412 344.491728a38.118106 10.277919 57.6 1 0 17.355867-11.014369 38.118106 10.277919 57.6 1 0-17.355867 11.014369Z" fill="#040000" ></path><path d="M644.769475 355.956059a11.175989 36.321965 30 1 0 36.321965-62.911488 11.175989 36.321965 30 1 0-36.321965 62.911488Z" fill="#040000" ></path><path d="M569.678445 671.158059c-26.343403 0-51.190021-5.288638-70.049503-14.967843-20.755408-10.577275-32.230754-25.445332-32.230755-41.710388 0-16.265056 11.475346-31.133112 32.230755-41.710387 18.859482-9.579419 43.805886-14.967843 70.049503-14.967843s51.190021 5.288638 70.049503 14.967843c20.755408 10.577275 32.230754 25.445332 32.230754 41.710387 0 16.265056-11.475346 31.133112-32.230754 41.710388-18.859482 9.679205-43.805886 14.967843-70.049503 14.967843z m0-95.095693c-49.693237 0-84.318846 20.356266-84.318846 38.517248s34.625609 38.517248 84.318846 38.517248 84.318846-20.356266 84.318846-38.517248-34.725395-38.517248-84.318846-38.517248z" fill="#040000" ></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '4',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1026 1024" ><path d="M1.1 1.097642h1021.804716v1021.804716H1.1z" fill="#A6D9E2" ></path><path d="M1024.002358 1024H0.002358V0h1024v1024z m-1021.804716-2.195284h1019.609433V2.195284H2.197642v1019.609432z" fill="#FFFFFF" ></path><path d="M376.194134 348.950302m-23.44962 0a23.44962 23.44962 0 1 0 46.89924 0 23.44962 23.44962 0 1 0-46.89924 0Z" fill="#040000" ></path><path d="M629.150672 348.950302m-24.647047 0a24.647047 24.647047 0 1 0 49.294095 0 24.647047 24.647047 0 1 0-49.294095 0Z" fill="#040000" ></path><path d="M397.847613 603.503411c13.471058 8.282206 28.738258 14.468914 43.7061 19.458195 29.835899 9.978562 62.266225 14.169558 93.299551 7.483921 21.054765-4.490353 40.213604-14.369129 56.778016-28.039758 6.785422-5.587995-2.893783-15.167414-9.579419-9.579419-46.999026 38.916391-112.258819 31.033327-163.847983 6.086922-4.590138-2.195284-9.080491-4.490353-13.371272-7.184564-7.583707-4.590138-14.468914 7.184564-6.984993 11.774703z" fill="#040000" ></path><path d="M627.753674 534.052621c-31.033327 24.048334-58.474371 68.253362-37.419607 106.970182 10.577275 19.35841 29.835899 32.629897 48.795167 42.708244 7.982849 4.190996 15.067628-7.883064 7.084779-12.07406-25.245761-13.271487-53.485091-35.324108-49.094524-66.557006 2.793997-20.156695 15.766127-37.319821 29.736114-51.190022 3.392711-3.392711 6.984993-6.785422 10.776847-9.77899 2.993569-2.295069 2.394855-7.483921 0-9.878776-2.893783-3.19314-6.885208-2.49464-9.878776-0.199572z" fill="#040000" ></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '5',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1026 1024" ><path d="M1.1 1.097642h1021.804716v1021.804716H1.1z" fill="#AD6F59" ></path><path d="M1024.002358 1024H0.002358V0h1024v1024z m-1021.804716-2.195284h1019.609433V2.195284H2.197642v1019.609432z" fill="#FFFFFF" ></path><path d="M411.829832 330.730879a38.118106 10.277919 57.6 1 0 17.355867-11.014368 38.118106 10.277919 57.6 1 0-17.355867 11.014368Z" fill="#040000" ></path><path d="M480.669675 609.989476c11.774703-25.844475 27.740401-51.788735 44.60417-73.342429 13.770415-17.462483 29.237186-33.92711 47.897096-44.803742 17.262912-10.078347 35.324108-13.67063 54.283376-6.58585 11.974274 4.390567 23.948548 14.468914 33.128825 24.547261 14.369129 15.865913 25.145975 34.625609 34.725394 53.684662 4.290782 8.581563 17.262912 0.997856 12.972131-7.583707-15.167414-30.334828-35.224323-63.763009-66.157864-80.327421-21.054765-11.37556-44.504385-11.475346-66.157864-1.895927-21.054765 9.280062-38.617034 25.644904-53.485091 42.907815-14.468914 16.863769-27.041902 35.324108-38.217891 54.582733-5.887351 10.178133-11.674917 20.555837-16.464627 31.232898-1.696355 3.692068-0.997856 7.982849 2.694212 10.277918 3.19314 1.895927 8.581563 0.898071 10.178133-2.694211z" fill="#040000" ></path><path d="M663.863649 338.091735a14.468914 33.727538 30 1 0 33.727538-58.417811 14.468914 33.727538 30 1 0-33.727538 58.417811Z" fill="#040000" ></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '6',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" ><path d="M762.9 77.4H261.1L10.2 512l250.9 434.6h501.8L1013.8 512z" fill="#83CEE3" ></path><path d="M369 375.8m-34.6 0a34.6 34.6 0 1 0 69.2 0 34.6 34.6 0 1 0-69.2 0Z" fill="#040000" ></path><path d="M369 411.7c-19.8 0-36-16.1-36-36s16.1-36 36-36 36 16.1 36 36-16.1 36-36 36z m0-69.1c-18.3 0-33.2 14.9-33.2 33.2S350.7 409 369 409s33.2-14.9 33.2-33.2-14.9-33.2-33.2-33.2z" fill="#FFFFFF" ></path><path d="M672.2 333.6c-15.1 7.6-30.2 15.6-44.3 25-5.9 3.9-17 10.4-14.6 19.1 1.8 6.5 12 11.2 17.3 14.3 15.7 9.3 32.1 17.6 48.3 25.9 8.6 4.4 16.2-8.5 7.6-13-14.1-7.3-28.3-14.5-42.1-22.3-3.9-2.2-7.9-4.5-11.7-6.9-1.2-0.8-2.4-1.5-3.5-2.4-0.6-0.4-1.1-0.8-1.6-1.2 2.2 1.7-0.3-0.3-0.3-0.3-0.9 0.1-1.5-3.2-0.2 0.5 0.9 2.4 1.1 3.8 0.3 5.8 0.6-1.5-0.9 0.8-0.1 0 0.5-0.5 1-1.1 1.6-1.6 0.5-0.5 1-0.9 1.6-1.3 0.6-0.5 0 0 1.2-0.9 1.7-1.3 3.5-2.5 5.3-3.6 8.4-5.5 17.2-10.4 26-15.2 5.6-3 11.2-6 16.8-8.9 8.6-4.4 1-17.3-7.6-13zM578.2 720.9c-12.5-96.7-33.3-154.7-55.6-155.6-8.8 3.9-22.3 17.5-37.7 60.1-10.8 29.8-18.4 62.2-23 81.6-1.2 5.1-2.1 9.1-2.9 11.8l-9.3-2.4c0.7-2.6 1.6-6.6 2.8-11.6 14.9-63 36-136.8 67.5-148.8l0.8-0.3h0.8c18.2-0.4 33.2 19.5 45.8 60.8 10.2 33.3 16.7 74.6 20.5 103.3l-9.7 1.1z" fill="#040000" ></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '7',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" ><path d="M762.9 77.4H261.1L10.2 512l250.9 434.6h501.8L1013.8 512z" fill="#8CC66D" ></path><path d="M375.778679 404.47473a14.5 33.8 30 1 0 33.8-58.543317 14.5 33.8 30 1 0-33.8 58.543317Z" fill="#040000" ></path><path d="M627.220263 374.211388a43.1 11.6 57.6 1 0 19.588408-12.431182 43.1 11.6 57.6 1 0-19.588408 12.431182Z" fill="#040000" ></path><path d="M451.1 548.5c17.6-9.3 63.9-30 105.3-16.2 17 20.3 32.7 98.8 28.8 138.1-27.5 10.2-82.5 10.2-106.1 5.8-8.3-10.5-32.7-81.8-35.3-114.6-0.4-5.5 2.5-10.6 7.3-13.1z" fill="#040000" ></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '8',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" ><path d="M762.9 77.4H261.1L10.2 512l250.9 434.6h501.8L1013.8 512z" fill="#5A74B8" ></path><path d="M357.7 400m-34.6 0a34.6 34.6 0 1 0 69.2 0 34.6 34.6 0 1 0-69.2 0Z" fill="#040000" ></path><path d="M357.7 436c-19.8 0-36-16.1-36-36s16.1-36 36-36 36 16.1 36 36-16.2 36-36 36z m0-69.2c-18.3 0-33.2 14.9-33.2 33.2s14.9 33.2 33.2 33.2 33.2-14.9 33.2-33.2-14.9-33.2-33.2-33.2z" fill="#FFFFFF" ></path><path d="M676 400m-34.6 0a34.6 34.6 0 1 0 69.2 0 34.6 34.6 0 1 0-69.2 0Z" fill="#040000" ></path><path d="M676 436c-19.8 0-36-16.1-36-36s16.1-36 36-36 36 16.1 36 36-16.2 36-36 36z m0-69.2c-18.3 0-33.2 14.9-33.2 33.2s14.9 33.2 33.2 33.2c18.3 0 33.2-14.9 33.2-33.2s-14.9-33.2-33.2-33.2z" fill="#FFFFFF" ></path><path d="M347.6 684.1c0.3-0.9 0.6-1.7 0.9-2.6 0.2-0.5 1.4-3.2 0.3-0.8 0.6-1.4 1.3-2.9 2-4.3 3.2-6.3 6-10.7 10.9-15.3 4.3-4 10.8-7.5 17.1-6.1 3.9 0.9 7.9 4.9 11.1 7.2 3.1 2.2 6.3 4.5 9.7 6.2 7.5 3.8 15.3 4.4 23.4 1.9 4.7-1.5 9.2-3.6 13.6-5.9 5-2.6 10.7-5 14.2-9.5 4.5-5.7 6.1-8.5 11.4-14.1 1-1 2-2 3.1-3 0.2-0.2 2.2-1.7 0.6-0.5 0.6-0.4 1.2-0.9 1.8-1.3 1-0.6 2.1-1.3 3.2-1.7-2 0.8 0.2 0 0.6-0.1 2.3-0.7-0.3-0.2 1.2-0.3 2.8-0.1 3.6 0 5.5 1 3.8 1.9 6.6 4.7 9.5 7.8 4.5 5 7.5 11.1 11.7 16.2 1.8 2.2 3.7 4.3 5.4 6.5 8.1 10.3 17.7 22.2 32.2 22 8.8-0.1 16.6-5.2 22.6-11.2 4.2-4.1 7.7-8.9 11-13.7 2.9-4.2 4.6-9.9 6.2-13.5 3.2-7.1 7.2-13.1 13-18.1 4.8-4.2 11.1-6.5 16.7-5.3 10.5 2.4 17.2 12.1 23.1 20.2 4.7 6.5 9.8 13 16 18.2 7.8 6.4 17.1 11.4 27.5 11.1 14.1-0.4 25.5-9.5 34.2-19.9 3-3.6 3.6-8.8 0-12.4-3.1-3.1-9.4-3.7-12.4 0-6.3 7.6-14.7 15.9-24.9 14.7-2.2-0.3-5.3-1.5-7.9-3.1-3.5-2.1-6.1-4.4-9.1-7.5-4.9-5.1-6.8-8.1-10.9-13.8-7.3-10.1-16.1-19.6-28.2-23.7-18.5-6.3-35.7 5.6-46 20.1-2.4 3.3-4.4 6.9-6.1 10.6-1.8 3.9-2.7 8.5-5.2 11.9-3.1 4.4-6.2 8.8-10.2 12.5-3 2.8-5.7 4.4-8.6 5.1-0.4 0.1-1.7 0.1 0.1 0h-2.2c2.1 0.1 0 0-0.5-0.1-0.7-0.2-1.4-0.4-2-0.6 1.8 0.7-1.8-1.1-2.4-1.5l-1.2-0.9c1.5 1.2-0.9-0.9-1.2-1.1-4.7-4.3-8.4-9.5-12.3-14.4-10.9-13.6-20.9-34-41-34.9-14.2-0.6-24.5 10.6-32.4 20.8-1.2 1.6-2.5 3.2-3.7 4.8-1.5 1.9 1.1-1.4-0.4 0.5-0.4 0.5-0.8 1.2-1.3 1.6-1.7 1.4-4.6 2.6-6.6 3.6-2.9 1.6-5.9 3.2-9 4.5-1.6 0.7-3.4 1.2-5.1 1.7-2.2 0.6-0.7 0.5-2.8 0.4-2.8 0-3.9-0.4-6.6-1.9-3.9-2.2-7.5-4.9-11.1-7.5-5.6-4-10-6.9-17-7.5-10.5-0.9-20.3 3.2-28.2 9.9-9.4 8.1-16.4 20.2-20.1 32-3.6 11.2 13.3 15.8 16.8 5.1z" fill="#040000" ></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '9',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" ><path d="M762.9 77.4H261.1L10.2 512l250.9 434.6h501.8L1013.8 512z" fill="#F0884F" ></path><path d="M287.2 382c6.4 2.3 11.6-3.7 15.4-7.9 5.1-5.5 10.2-11 16-15.9 0.8-0.7 1.7-1.4 2.5-2.1 1.2-0.9-1.7 1.3 0.2-0.2l1.2-0.9c2.1-1.5 4.3-2.9 6.5-4.3 2-1.2 4-2.2 6.1-3.2 0.6-0.3 1.2-0.6 1.9-0.9-0.3 0.2-1.5 0.6 0.2-0.1 1.3-0.5 2.6-1 4-1.5 11.2-3.7 21.8-4 33.4-1.1 19.5 4.9 36.4 17 51.2 30.2 8.6 7.7 21.4-5 12.7-12.7-25.2-22.6-57.1-42.1-92.2-36.2-20.4 3.4-37.7 16.1-51.6 30.9-2.3 2.4-4.5 5-6.8 7.4-0.7 0.7-1.9 1.5-2.4 2.4-0.5 0.8 2.3-1.5 0.8-0.7 1.3-0.7 3.9-1.4 5.8-0.7-11.1-3.7-15.8 13.7-4.9 17.5zM598 382c6.4 2.3 11.6-3.7 15.4-7.9 5.1-5.5 10.2-11 16-15.9 0.8-0.7 1.7-1.4 2.5-2.1 1.2-0.9-1.7 1.3 0.2-0.2l1.2-0.9c2.1-1.5 4.3-2.9 6.5-4.3 2-1.2 4-2.2 6.1-3.2 0.6-0.3 1.2-0.6 1.9-0.9-0.3 0.2-1.5 0.6 0.2-0.1 1.3-0.5 2.6-1 4-1.5 11.2-3.7 21.8-4 33.4-1.1 19.5 4.9 36.4 17 51.2 30.2 8.6 7.7 21.4-5 12.7-12.7-25.2-22.6-57.1-42.1-92.2-36.2-20.4 3.4-37.7 16.1-51.6 30.9-2.3 2.4-4.5 5-6.8 7.4-0.7 0.7-1.9 1.5-2.4 2.4-0.5 0.8 2.3-1.5 0.8-0.7 1.3-0.7 3.9-1.4 5.8-0.7-11.1-3.7-15.8 13.7-4.9 17.5zM505.9 527.1c3.4 0.7 6.8 1.7 10.2 2.8 6.7 2.2 10.4 3.5 16.6 7.7 1.6 1.1-0.5-0.5 0.6 0.5 0.6 0.5 1.1 1.1 1.7 1.6 1.5 1.4-0.1-0.4 0.5 0.6 0.4 0.6 0.7 1.2 1 1.8-1-2 0.1 0 0 0.5 0.1-2-0.1 0-0.1 0-0.1 0.8 0 0.7 0.1-0.5-0.1 0.4-0.1 0.7-0.3 1.1-0.6 1 0.7-0.9-0.4 1-1.6 2.5-4.6 5.4-8.1 7.8-6.8 4.6-14.4 8.2-22 11.4-7 3-7.4 11.9 0 14.8 7.4 2.8 15 5.3 22.4 8.1 3.1 1.1 4.2 1.5 6.9 2.9 1.1 0.6 2.1 1.2 3.2 1.8 1.2 0.8-0.7-0.5 0.1 0 0.4 0.3 0.8 0.7 1.1 1.1 0.6 0.8-1.1-1.2-0.2-0.2 0.8 0.9-0.3-1.4-0.1-0.2 0.1 0.9 0.2-1.9 0-0.9-0.1 0.5-0.8 1.8 0 0.2-0.2 0.5-0.5 1-0.8 1.4-0.3 0.3-0.9 1.3-0.3 0.5-0.5 0.7-1.1 1.3-1.7 1.9-6.9 7.3-15.9 12.8-24.4 18.1-8.3 5.3-0.6 18.5 7.7 13.2 9.9-6.3 20.9-12.8 28.6-21.8 4.8-5.5 8.1-12.9 4.2-19.9-3.4-6-10.5-8.9-16.6-11.4-8.6-3.5-17.5-6.2-26.2-9.5v14.8c14.4-6.1 47.2-18.8 41.2-40.3-3.5-12.9-19.4-18.9-30.8-22.6-3.4-1.1-6.9-2.1-10.5-2.9-9.1-2.2-13.3 12.5-3.6 14.6z" fill="#040000" ></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '10',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" ><path d="M762.9 77.4H261.1L10.2 512l250.9 434.6h501.8L1013.8 512z" fill="#F6F180" ></path><path d="M342.9 400.6m-29.5 0a29.5 29.5 0 1 0 59 0 29.5 29.5 0 1 0-59 0Z" fill="#040000" ></path><path d="M342.9 431.3c-16.9 0-30.7-13.8-30.7-30.7s13.8-30.7 30.7-30.7 30.7 13.8 30.7 30.7-13.7 30.7-30.7 30.7z m0-59c-15.6 0-28.3 12.7-28.3 28.3s12.7 28.3 28.3 28.3 28.3-12.7 28.3-28.3-12.6-28.3-28.3-28.3z" fill="#FFFFFF" ></path><path d="M702 400.6m-29.5 0a29.5 29.5 0 1 0 59 0 29.5 29.5 0 1 0-59 0Z" fill="#040000" ></path><path d="M702 431.3c-16.9 0-30.7-13.8-30.7-30.7s13.8-30.7 30.7-30.7 30.7 13.8 30.7 30.7-13.8 30.7-30.7 30.7z m0-59c-15.6 0-28.3 12.7-28.3 28.3s12.7 28.3 28.3 28.3 28.3-12.7 28.3-28.3-12.7-28.3-28.3-28.3z" fill="#FFFFFF" ></path><path d="M358.7 519.9c20 22 45.5 40.4 71.3 54.8 51.2 28.5 111.7 39.9 168 19.5 44.3-16.1 80.7-47.8 110.2-83.9 3-3.7 3.6-8.9 0-12.5-3.1-3.1-9.5-3.7-12.5 0-25.5 31.4-56.2 59.7-93.7 76-27.1 11.7-56.6 15.7-85.8 12.2-24.7-2.9-49.5-11.8-71.5-23.4-18.7-9.8-36.6-22.2-51.1-34.3-7.8-6.5-15.5-13.3-22.4-20.9-7.7-8.5-20.1 4.1-12.5 12.5z" ></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '11',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" ><path d="M48.2 844.9c-68.5-210.6 186-782.1 409.1-795.4 6.3-0.4 12.5 0.2 18.6 1.6C665.1 94.6 985.4 515 987.1 821.3c0.1 20-12.9 37.9-22.4 43.1-162.7 89.8-605.8 179.7-884.4 30.9-15-7.9-24.2-26.1-32.1-50.4z" fill="#F0884F" ></path><path d="M401 352.1m-52.4 0a52.4 52.4 0 1 0 104.8 0 52.4 52.4 0 1 0-104.8 0Z" fill="#FFFFFF" ></path><path d="M408.7 329m-29.3 0a29.3 29.3 0 1 0 58.6 0 29.3 29.3 0 1 0-58.6 0Z" fill="#040000" ></path><path d="M527.5 352.1m-52.4 0a52.4 52.4 0 1 0 104.8 0 52.4 52.4 0 1 0-104.8 0Z" fill="#FFFFFF" ></path><path d="M527.5 329m-29.3 0a29.3 29.3 0 1 0 58.6 0 29.3 29.3 0 1 0-58.6 0Z" fill="#040000" ></path><path d="M450.7 517c1.1-8.2 3.2-16.4 6.1-24.1 0.1-0.3 1-2.5 0.5-1.4s0.3-0.7 0.5-1c0.7-1.4 1.4-2.8 2.2-4.1 0.4-0.8 2.8-3.9 1.3-2.1 0.8-1 1.7-1.9 2.6-2.8 1-1-1.5 1 0.1 0 0.5-0.3 1-0.6 1.5-0.8-1.3 0.7-1.2 0.3 0 0.1 1.9-0.3-1.8 0.3 0.1 0 1.2-0.2 1.5 0.3 0-0.1 0.6 0.2 1.3 0.3 1.9 0.5 0.3 0.1-1.3-0.7 0.2 0.1 0.8 0.5 1.6 0.9 2.4 1.4 1.4 1 0-0.1 1.4 1.1 0.9 0.8 1.8 1.7 2.6 2.6 1.8 1.9 3.5 3.9 5 6.1 5.1 7.1 9.3 14.8 13.2 22.6 3.5 6.9 13.7 4.7 15.8-2.1 2.6-8.7 4.8-17.4 7.4-26.1 0.9-3.2 1.9-6.4 3.2-9.4-0.7 1.6 0.8-1.6 1.2-2.2l0.9-1.5c0.7-1.2-1.4 0.7 0.1-0.1 1.7-0.9-1.2 0.3-0.3 0.1 0.8-0.2 1-1.2 0.3-0.3-0.6 0.8 0.6 0-0.5 0.2-2 0.3 2.4 0.5-1.1 0 0.5 0.1 1.2 0.2 1.6 0.4-1.1-0.8-0.8-0.4 0.2 0.2 0.7 0.4 3.4 2.3 2.7 1.8 8.9 7.1 15.9 16.9 22.5 26 2.8 3.8 7.5 5.6 11.8 3.1 3.7-2.2 5.9-8 3.1-11.8-8.2-11.1-16.6-23-27.7-31.4-6.3-4.7-14.5-7.6-21.7-3-6.7 4.2-9.6 12.5-11.9 19.6-3.2 9.9-5.5 20-8.6 29.9 5.3-0.7 10.5-1.4 15.8-2.1-7.8-15.5-24.8-50.1-48-41.7-14.1 5.1-19.7 23-22.9 36.2-0.9 3.8-1.8 7.7-2.3 11.6-0.6 4.6 1.1 9.3 6 10.6 4.2 1 10.2-1.5 10.8-6.1z" fill="#040000" ></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '12',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" ><path d="M485.538528 993.072489a362.00362 481.804818 3.149 1 0 52.933731-962.15464 362.00362 481.804818 3.149 1 0-52.933731 962.15464Z" fill="#AADCF0" ></path><path d="M688.2 334.1c-15.1 7.6-30.2 15.6-44.3 25-5.9 3.9-17 10.4-14.6 19.1 1.8 6.5 12 11.2 17.3 14.3 15.7 9.3 32.1 17.6 48.3 25.9 8.6 4.4 16.2-8.5 7.6-13-14.1-7.3-28.3-14.5-42.1-22.3-3.9-2.2-7.9-4.5-11.7-6.9-1.2-0.8-2.4-1.5-3.5-2.4-0.6-0.4-1.1-0.8-1.6-1.2 2.2 1.7-0.3-0.3-0.3-0.3-0.9 0.1-1.5-3.2-0.2 0.5 0.9 2.4 1.1 3.8 0.3 5.8 0.6-1.5-0.9 0.8-0.1 0 0.5-0.5 1-1.1 1.6-1.6 0.5-0.5 1-0.9 1.6-1.3 0.6-0.5 0 0 1.2-0.9 1.7-1.3 3.5-2.5 5.3-3.6 8.4-5.5 17.2-10.4 26-15.2 5.6-3 11.2-6 16.8-8.9 8.6-4.4 1-17.4-7.6-13zM375.8 347c13.4 6.8 26.7 14 39.5 21.9 1.8 1.2 3.7 2.3 5.5 3.5 0.9 0.6 1.7 1.2 2.6 1.8 0.9 0.6 1.9 1.4 1.6 1.1 1.1 0.9 2.1 1.9 3.1 2.8 1.2 1 0-0.3 0.1 0 0-0.2-0.8-2.4-0.3-4.1 1.5-5.5 2.3-2.7 0.8-2-0.4 0.2-0.9 0.8-1.3 1.1 1.7-1.4-1.6 1.1-2.3 1.6-3.4 2.3-6.9 4.4-10.4 6.4-14.9 8.6-30.3 16.4-45.6 24.3-8.6 4.4-1 17.4 7.6 13 15-7.7 30.1-15.4 44.8-23.8 6.2-3.6 13.8-7.3 18.7-12.7 7.6-8.3-3.8-16.6-9.9-20.9-8.7-6.1-18-11.3-27.3-16.4-6.5-3.6-13-7.1-19.6-10.4-8.6-4.5-16.3 8.5-7.6 12.8zM412.8 570.9c13.5 7.7 28.5 13.3 43.3 17.9 29.8 9.2 61.7 13.1 92.6 7.3 20.6-3.9 40-12.5 56.6-25.2 2.8-2.2 4.3-5.6 2.3-9-1.6-2.8-6.2-4.5-9-2.3-48.3 36.9-113.3 30-165.6 6.7-4.6-2.1-9.2-4.2-13.7-6.7-7.3-4.2-13.9 7.2-6.5 11.3z" fill="#040000" ></path><path d="M644.6 505.2c-30.1 21.5-60.6 62.5-39.1 99.8 10.7 18.6 30.3 30.9 49.1 40.1 7.8 3.8 14.6-7.9 6.8-11.7-23.6-11.5-53.7-31.4-49.4-60.9 2.8-18.9 15.8-34.6 29.5-47.2 2.5-2.3 5.1-4.6 7.8-6.7 0.5-0.4 0.9-0.7 1.4-1.1-0.4 0.3-1.2 0.9-0.1 0.1l0.9-0.6c6.9-5.1 0.2-16.8-6.9-11.8z" fill="#040000" ></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '13',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" ><path d="M235.1 76.9c75.6-26.5 297.3-90.1 514.2-16.6 16.3 5.5 29.8 17.4 37.1 33 57.5 122.4 127.1 602.1 62.1 785.6a62.58 62.58 0 0 1-32.5 35.8c-109.5 51.8-428.1 136.7-609.3 37.2-14.4-7.9-25-21.3-29.7-37.1-41.9-140.6-37-627.7 19.1-798 6.1-18.7 20.5-33.4 39-39.9z" fill="#F9DABD" ></path><path d="M392.2 360.2m-35.2 0a35.2 35.2 0 1 0 70.4 0 35.2 35.2 0 1 0-70.4 0Z" fill="#040000" ></path><path d="M618.6 360.2m-35.2 0a35.2 35.2 0 1 0 70.4 0 35.2 35.2 0 1 0-70.4 0Z" fill="#040000" ></path><path d="M512 562.6c-36 0-65.3-29.3-65.3-65.3S476 432 512 432s65.3 29.3 65.3 65.3-29.3 65.3-65.3 65.3z m0-122.9c-31.7 0-57.6 25.8-57.6 57.6s25.8 57.6 57.6 57.6c31.7 0 57.6-25.8 57.6-57.6s-25.9-57.6-57.6-57.6z" fill="#040000" ></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '14',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" ><path d="M178.1 971.5c38.1 15.9 98.7 26.6 171.3-12.3 3.7-2 8.4-1.6 11.6 1.1 43.3 35.9 123.3 80.8 236 10.9 3.8-2.4 8.7-2.4 12.6-0.2 41.8 23.9 191.6 58.2 246.6 14.2 4.4-3.5 9.1-6.6 14.5-8.5C1065 909.5 678.2-652 194.3 351c-37.5 77.8-38.4 94.1-71.9 211.3-27.6 96.3-29.1 231.3 1.4 348.1 7.2 27.3 27.3 49.9 54.3 61.1z" fill="#ABAAAA" ></path><path d="M468.9 349H418c-6.1 0-11.1-5-11.1-11.1V336c0-6.1 5-11.1 11.1-11.1h50.9c6.1 0 11.1 5 11.1 11.1v1.9c0 6.1-5 11.1-11.1 11.1zM643 471.9H390c-6.6 0-12-5.4-12-12s5.4-12 12-12h253c6.6 0 12 5.4 12 12s-5.4 12-12 12zM609 349h-61.2c-6 0-11-4.9-11-11v-2.1c0-6 4.9-11 11-11H609c6 0 11 4.9 11 11v2.1c0 6.1-4.9 11-11 11z" fill="#040000" ></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '15',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" ><path d="M673.1 318.7c3.7-17.5 5.6-35.7 5.6-54.4 0-137.9-105.5-249.7-235.6-249.7S207.4 126.4 207.4 264.3c0 55.4 17.1 106.7 45.9 148.1-55.2 63.3-88.6 145.9-88.6 236.3 0 199.2 162.1 360.6 362.1 360.6 200 0 362.1-161.5 362.1-360.6 0.1-147.3-88.7-274-215.8-330z" fill="#4F8A54" ></path><path d="M392 246.2m-47.1 0a47.1 47.1 0 1 0 94.2 0 47.1 47.1 0 1 0-94.2 0Z" fill="#FFFFFF" ></path><path d="M386 252.8m-26.4 0a26.4 26.4 0 1 0 52.8 0 26.4 26.4 0 1 0-52.8 0Z" fill="#040000" ></path><path d="M505.6 246.2m-47.1 0a47.1 47.1 0 1 0 94.2 0 47.1 47.1 0 1 0-94.2 0Z" fill="#FFFFFF" ></path><path d="M501.4 252.8m-26.4 0a26.4 26.4 0 1 0 52.8 0 26.4 26.4 0 1 0-52.8 0Z" fill="#040000" ></path><path d="M474.3 364.8h-50.9c-6.1 0-11.1-5-11.1-11.1v-1.9c0-6.1 5-11.1 11.1-11.1h50.9c6.1 0 11.1 5 11.1 11.1v1.9c0 6.2-5 11.1-11.1 11.1z" fill="#040000" ></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '16',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" ><path d="M246.4 227.6c-166.9 101.1-461.9 344 87 564.1 1.5 0.6 2.9 1.1 4.4 1.6 80.7 27.7 392.8 165.4 641-198.1 40-58.6 38.5-136.2-3.7-193.3C892 289.5 727 201.1 429.1 182.7c-64.1-4-127.8 11.6-182.7 44.9z" fill="#CF92BE" ></path><path d="M617.1 393.4c-17.4 8.8-34.9 18.1-51.2 28.9-6.9 4.6-20.3 12.3-17.4 22.6 1.2 4.3 5.6 7 9 9.5 3.7 2.7 7.6 5 11.5 7.3 18.2 10.8 37.1 20.3 55.9 30 10 5.1 18.9-10 8.8-15.1-16.4-8.4-32.9-16.9-49-26-4.5-2.6-9.1-5.2-13.5-8l-4.5-3c-0.7-0.5-1.3-1-2-1.5 1.6 1.2 0.7 0.4-0.2-0.2-1.3-0.9-0.3-0.9-0.5-0.3 0.2 0.2 0.4 0.5 0.6 0.7 1 1.9 1.3 3.7 0.8 5.7 0.1-0.6 0.7-1.4-0.6 1.3 0.7-1.5-0.1 0-0.2 0.1 0.6-0.6 1.2-1.3 1.9-1.9l1.8-1.5c1.8-1.6-0.6 0.3 1.2-0.9 2-1.5 4.1-2.9 6.2-4.3 10-6.5 20.4-12.4 30.9-18 6.5-3.5 13.1-7 19.7-10.4 9.6-5 0.8-20.1-9.2-15zM323.1 408.5c15.9 8.1 31.7 16.5 46.8 26 2.2 1.4 4.3 2.8 6.5 4.2 1 0.7 1.9 1.3 2.8 2 0.5 0.3 1 0.7 1.4 1.1-1.1-0.9-0.3-0.3 0.3 0.3 1.1 1 2.2 2.2 3.3 3.1 1.4 1.1-1-1.7-0.1-0.1-0.6-1.1-0.9-4.1 0.3-6.7 2.2-4.8 0.7 0.1 0-0.5 0 0-1.1 0.9-1.3 1 2.3-1.9 0 0-0.5 0.4-0.8 0.5-1.5 1.1-2.3 1.6-4 2.7-8.1 5.1-12.3 7.5-17.3 10-35.1 19.1-52.8 28.2-10 5.1-1.2 20.2 8.8 15.1 17.5-9 35-17.9 52-27.7 7.3-4.2 15.9-8.6 21.8-14.7 9.3-9.7-4.3-19.7-11.5-24.7-10.1-7.1-20.9-13.1-31.7-19-7.6-4.2-15.2-8.2-22.9-12.1-9.7-5.2-18.6 9.9-8.6 15zM513 592.1c-12.2 0-24.6-1.4-36.3-4.3-8-2-13.9-8.2-15.4-16.2s1.7-15.8 8.4-20.5c23.2-16.3 60.5-31.9 106.2-13 6.4 2.6 11 8.3 12.3 15.1 1.3 6.7-0.8 13.6-5.7 18.3-13.5 13.1-40.9 20.6-69.5 20.6z m-37.4-32.5c-3.4 2.4-4.9 6.2-4.2 10.2 0.8 4.1 3.6 7.1 7.7 8.1 39.1 9.7 81.2 0.7 96.1-13.7 2.4-2.3 3.4-5.6 2.7-8.9-0.7-3.4-2.9-6.2-6.1-7.5-41.2-17.2-75.1-3.1-96.2 11.8z" fill="#040000" ></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '17',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" ><path d="M1008.6 465.7c0-124.9-95.5-226.2-213.4-226.2-12 0-23.8 1.1-35.2 3.1v-3.1c0-124.9-95.5-226.2-213.4-226.2S333.4 114.6 333.4 239.5c0 2.4 0 4.8 0.1 7.2-17.1-4.7-35-7.2-53.4-7.2-117.8 0-213.4 101.3-213.4 226.2 0 92.1 51.9 171.3 126.3 206.6-13.7 29.9-21.4 63.4-21.4 98.8 0 124.9 95.5 226.2 213.4 226.2 68.8 0 130-34.5 169-88.1 39 53.6 100.2 88.1 169 88.1 117.8 0 213.4-101.3 213.4-226.2 0-41.2-10.4-79.9-28.6-113.1 60.5-39.9 100.8-111.1 100.8-192.3z" fill="#8CC66D" ></path><path d="M437.8 400.7m-24.7 0a24.7 24.7 0 1 0 49.4 0 24.7 24.7 0 1 0-49.4 0Z" fill="#040000" ></path><path d="M649.7 400.7m-24.7 0a24.7 24.7 0 1 0 49.4 0 24.7 24.7 0 1 0-49.4 0Z" fill="#040000" ></path><path d="M527.3 625.9c6.3-14.2 13.1-28.3 17.9-43 6.2-19 8.3-38.6 10.5-58.3l2.1-19.2c0.7-6.2-9-6.1-9.7 0-1.7 16.3-2.8 32.8-5.7 48.9-4.2 23.7-13.8 45-23.5 66.7-2.5 5.6 5.9 10.5 8.4 4.9z" fill="#252525" ></path><path d="M447.7 522.3c20.3-0.1 40.6-0.2 61-0.4l96.6-0.6c7.5 0 14.9-0.1 22.4-0.1 16.6-0.1 16.7-25.9 0-25.8-20.3 0.1-40.6 0.2-61 0.4l-96.6 0.6c-7.5 0-14.9 0.1-22.4 0.1-16.6 0.1-16.7 25.9 0 25.8z" fill="#040000" ></path><path d="M495.4 508.2c-10.3 3.8-9.2 20.9-9.2 29.5 0.1 16 2.1 32.3 6.1 47.8 3.5 13.7 8.7 29.9 20.6 38.7 12.9 9.5 27.6 2.1 37.6-7.9 10.2-10.3 17.8-23 24.7-35.6 11.6-21.3 20.9-43.8 29.7-66.4 3-7.8-9.5-11.1-12.5-3.4-7.4 19.1-15.3 38.1-24.7 56.4-5.9 11.5-12.2 23-20.3 33.1-2.8 3.5-5.8 6.9-9.2 9.8-1.9 1.7-1.4 1.3-3.3 2.5-1.3 0.8-2.6 1.6-3.9 2.2-0.7 0.3 1-0.2-0.8 0.3-0.6 0.2-1.2 0.3-1.8 0.5-1.1 0.3-1.2 0.2-0.5 0.1-0.6 0-1.3 0-1.9 0.1-2.2 0.1 0.6 0.5-1.8-0.2l-1.8-0.6c1.5 0.5 0.2 0.1-0.5-0.3-0.8-0.5-2.9-2.1-1.7-1.1-1-0.9-2-1.7-2.8-2.7-0.4-0.5-0.9-1-1.3-1.5 0.4 0.5 0.1 0.2-0.5-0.7-0.8-1.3-1.7-2.5-2.4-3.9-0.7-1.3-1.4-2.5-2-3.8-0.4-0.8-0.8-1.6-1.1-2.4-0.1-0.2-0.5-1.1 0 0l-0.6-1.5a86.8 86.8 0 0 1-3.3-9.8c-4.4-14.9-6.2-27.9-6.8-42.8-0.3-6.6-0.3-13.1 0.4-19.7 0.2-1.5-0.3 1.5 0.1-0.5l0.3-1.8c0.2-0.9 0.5-1.8 0.7-2.8 0.4-1.9-0.7 1.1 0.3-0.7 0.5-1-1.3 1.2-0.3 0.5-0.3 0.3-1.1 0.8-2 1.1 7.7-2.9 4.3-15.4-3.5-12.5z" fill="#040000" ></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '18',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" ><path d="M75.4 739.8c-78.7-134.4-194-455.7 401.4-579.6 9.8-2 19.2-6.2 29.2-7.5C656.8 133 947.3 205 1000.1 578.4c42.6 223.8 29.7 392.1-822 233.6-43.1-8-80.6-34.4-102.7-72.2z" fill="#F09495" ></path><path d="M704.6 875.4c-129 0-301.8-20.5-526.6-62.3-43.5-8.1-81.2-34.6-103.5-72.7-19.3-32.9-44.8-84.3-57.1-142.5-13.9-65.1-8.8-125.3 15.1-179.2 54.3-122.3 203.7-209.6 444-259.6 4.1-0.9 8.3-2.1 12.3-3.4 5.5-1.7 11.1-3.4 16.9-4.2 29-3.8 75.7-5.9 133.8 5.7 54.5 10.9 105.3 31 150.8 59.9C843.7 251 888.2 296 922.7 351c39.7 63.1 66.1 139.6 78.5 227.3 8.1 42.4 15.2 87.3 12.5 127.9-2.8 42.6-16.4 75.5-41.5 100.7-42.5 42.7-120.3 65-237.8 68.1-9.6 0.2-19.6 0.4-29.8 0.4zM76.3 739.3c22 37.6 59.2 63.7 102.1 71.7 242.5 45.1 424.4 65.3 556.1 61.9 116.9-3.1 194.1-25.2 236.3-67.5 55.4-55.6 44.4-142.5 28.3-226.7C976 415.8 903.4 291.5 789.2 219c-124-78.7-248.1-69.9-283.2-65.3-5.6 0.7-11.2 2.4-16.6 4.1-4.1 1.2-8.3 2.5-12.5 3.4C237.3 211.1 88.5 298 34.5 419.6c-54.6 122.8 2.8 253 41.8 319.7z" fill="#FFFFFF" ></path><path d="M424.1 442.5m-24.7 0a24.7 24.7 0 1 0 49.4 0 24.7 24.7 0 1 0-49.4 0Z" fill="#040000" ></path><path d="M635.9 442.5m-24.7 0a24.7 24.7 0 1 0 49.4 0 24.7 24.7 0 1 0-49.4 0Z" fill="#040000" ></path><path d="M426.2 543.3c17.1 7.9 36.6 26 25.5 46.1-6.9 12.5-19.8 21.2-31.7 28.4-4.5 2.7-0.4 9.8 4.1 7.1 17.4-10.5 41.6-27.6 39-51.1-1.6-14-12.4-24.8-23.5-32.3-3-2-6.1-3.9-9.3-5.4-4.8-2.1-8.9 5-4.1 7.2zM629.5 535.4c-21.8 11.7-40.6 37-25.7 61.3 8.2 13.4 22.2 22.7 35.7 30.3 4.7 2.7 8.9-4.6 4.2-7.2-15.5-8.7-39.9-23.9-36.9-45.2 1.6-11.4 10.7-20.7 19.6-27.2 2.4-1.7 4.8-3.4 7.4-4.8 4.7-2.5 0.4-9.8-4.3-7.2z" fill="#040000" ></path><path d="M457.2 584.6c25.6 25.6 66.7 41 101.8 28.3 18.2-6.6 33.2-19.1 45.5-33.8 4.2-5.1-3-12.4-7.3-7.3-18.5 22-43.3 38.1-73 35-18.6-1.9-36.2-10.8-50.9-22-2.9-2.2-6.1-4.8-8.8-7.5-4.7-4.7-12 2.6-7.3 7.3z" fill="#040000" ></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '19',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" ><path d="M915.9 510.5c8.4-19 13.1-39.8 13.1-61.7 0-90-78.9-162.9-176.2-162.9-3.2 0-6.3 0.1-9.5 0.2v-0.2c0-94.8-116.2-171.6-259.6-171.6S224 191.2 224 286v2c-96.2 0-174.1 72-174.1 160.9 0 38 14.3 73 38.2 100.5-41.8 29.4-68.8 75.9-68.8 128.2 0 88.9 78 160.9 174.1 160.9 17.1 0 33.6-2.3 49.3-6.5 28.9 46.1 88.7 77.7 157.6 77.7 49.4 0 94-16.2 126-42.3 32 26.1 76.6 42.3 126 42.3 77.3 0 143-39.7 166.7-95 3.1 0.2 6.3 0.2 9.5 0.2 97.3 0 176.2-72.9 176.2-162.9 0-60.6-35.7-113.4-88.8-141.5z" fill="#5A74B8" ></path><path d="M357.6 449.5a46.6 73.2 0 1 0 93.2 0 46.6 73.2 0 1 0-93.2 0Z" fill="#FEFEFD" ></path><path d="M357.5 449.5a25.1 39.4 0 1 0 50.2 0 25.1 39.4 0 1 0-50.2 0Z" fill="#040000" ></path><path d="M531.3 449.5a46.6 73.2 0 1 0 93.2 0 46.6 73.2 0 1 0-93.2 0Z" fill="#FEFEFD" ></path><path d="M531.2 449.5a25.1 39.4 0 1 0 50.2 0 25.1 39.4 0 1 0-50.2 0Z" fill="#040000" ></path><path d="M426.7 574.6c20.9 29.9 59.7 52.2 96.2 38.6 19.2-7.2 34.7-21.2 47.6-36.9 2.8-3.5 3.4-8.3 0-11.7-2.9-2.9-8.9-3.5-11.7 0-16.5 20.2-40.9 40.9-68.1 35.5-17.3-3.4-31-13.2-42.9-25.9-2-2.2-3.9-4.4-5.8-6.7-1.6-1.9 1.1 1.5-0.4-0.6-0.2-0.2-0.3-0.5-0.5-0.7-6.2-8.7-20.6-0.4-14.4 8.4z" fill="#040000" ></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '20',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" ><path d="M792.8 301.4c-8.2 0-16.2 0.4-24.2 1.3-12.3-81.8-129.2-145.9-271.8-145.9-137.1 0-250.5 59.3-269.9 136.6C105.3 295.5 7.4 391.2 7.4 508.9c0 119.1 100.2 215.6 223.7 215.6 5.3 0 10.6-0.2 15.8-0.5 14.4 80.5 130.4 143.2 271.3 143.2 135.9 0 248.6-58.3 269.4-134.6 1.7 0 3.4 0.1 5.1 0.1 123.6 0 223.7-96.5 223.7-215.6s-100-215.7-223.6-215.7z" fill="#F6CD50" ></path><path d="M435.9 431.5m-52.2 0a52.2 52.2 0 1 0 104.4 0 52.2 52.2 0 1 0-104.4 0Z" fill="#FAFAFA" ></path><path d="M588.1 431.5m-52.2 0a52.2 52.2 0 1 0 104.4 0 52.2 52.2 0 1 0-104.4 0Z" fill="#FAFAFA" ></path><path d="M435.9 431.5m-27.8 0a27.8 27.8 0 1 0 55.6 0 27.8 27.8 0 1 0-55.6 0Z" fill="#040000" ></path><path d="M601.9 407.4c-5.7 2.9-11.3 5.9-16.9 9-6.8 3.8-15.3 7.8-20.5 13.8-5.6 6.5 1.6 11.1 6.7 14.4 11.2 7.1 23.3 13 35.1 19 5.7 2.9 10.8-5.7 5.1-8.6-10.9-5.6-21.9-11.1-32.4-17.4-2.4-1.4-4.6-3.1-7-4.6 1 0.6-0.4-0.4-0.4-0.4-1.9-0.3-0.5 4.2 0.5 4.1-0.1 0-0.6 0.3 0.3-0.3 0.5-0.3 1-0.9 1.5-1.3 9.7-7.9 21.9-13.5 33.1-19.2 5.7-2.7 0.6-11.4-5.1-8.5zM406.6 547.6c11.5 14.4 27 26.7 42.7 36.3 32.2 19.8 71.2 27.2 107.6 15.4 29.5-9.6 54.6-29.1 75.5-51.6 10.8-11.6-6.6-29.1-17.5-17.5-9.4 10.1-19.5 19.7-30.8 27.7-4.6 3.2-9.3 6.2-14.2 8.9-5 2.8-9.9 5.1-14.1 6.7-4.6 1.7-9.3 3.2-14.1 4.4-2.2 0.5-4.4 1-6.6 1.4-1 0.2-2 0.3-2.9 0.5 2.6-0.4-2.1 0.2-2.5 0.3-4.1 0.4-8.3 0.5-12.5 0.4-2.2-0.1-4.4-0.2-6.6-0.4-1.1-0.1-2.2-0.2-3.2-0.3-1.5-0.2-1.4-0.2 0.1 0l-2.1-0.3c-7.8-1.3-15.4-3.4-22.8-6.2-0.9-0.4-1.8-0.7-2.8-1.1-3.1-1.2 2.3 1.1-0.7-0.3-1.5-0.7-2.9-1.3-4.4-2-3.7-1.8-7.2-3.7-10.8-5.8-5.7-3.4-11.1-7.1-16.4-11.1 3 2.3-1.1-0.9-1.8-1.5-1.1-0.9-2.1-1.7-3.1-2.6-2.1-1.8-4.2-3.7-6.3-5.6-4.4-4.1-8.7-8.4-12.4-13.1-4.2-5.2-13.1-4.3-17.5 0-5 5.1-4 12.2 0.2 17.4z" fill="#040000" ></path></svg>`
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '标记图标',
|
||||
type: 'sign',
|
||||
list: [
|
||||
{
|
||||
name: '1',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#6D768D"></path><path d="M809.728 429.696a18.901333 18.901333 0 0 0-15.274667-12.885333l-183.466666-26.624-81.92-166.272a18.901333 18.901333 0 0 0-34.005334 0l-81.92 166.272-183.594666 26.624a19.029333 19.029333 0 0 0-10.496 32.298666l132.693333 129.536-31.274667 182.741334a18.816 18.816 0 0 0 27.477334 19.84l164.138666-86.186667 164.096 86.058667a18.773333 18.773333 0 1 0 27.434667-19.84l-31.36-182.741334 132.693333-129.408a18.901333 18.901333 0 0 0 4.778667-19.413333z" fill="#FFFFFF"></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '2',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#6D768D"></path><path d="M644.565333 306.901333c32.128 0 65.834667-5.76 101.077334-17.237333a17.066667 17.066667 0 0 1 22.357333 16.213333v328.32c-1.109333 0.768 10.325333 27.093333-99.370667 19.84-109.653333-7.210667-181.76-45.098667-246.869333-45.098666-65.152 0-49.322667 2.688-74.154667 8.405333v168.064a24.746667 24.746667 0 0 1-24.490666 25.258667 22.528 22.528 0 0 1-17.28-7.253334 24.149333 24.149333 0 0 1-7.168-18.005333V281.258667C299.776 280.490667 328.106667 256 421.76 256s164.437333 50.901333 222.805333 50.901333z" fill="#FFFFFF"></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '3',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#6D768D"></path><path d="M524.074667 225.408l274.517333 274.517333a17.066667 17.066667 0 0 1 0 24.149334l-274.517333 274.517333a17.066667 17.066667 0 0 1-24.149334 0l-274.517333-274.517333a17.066667 17.066667 0 0 1 0-24.149334l274.517333-274.517333a17.066667 17.066667 0 0 1 24.149334 0z" fill="#FFFFFF"></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '4',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#6D768D"></path><path d="M317.866667 300.8h388.266666c9.386667 0 17.066667 7.68 17.066667 17.066667v388.266666a17.066667 17.066667 0 0 1-17.066667 17.066667h-388.266666a17.066667 17.066667 0 0 1-17.066667-17.066667v-388.266666c0-9.386667 7.68-17.066667 17.066667-17.066667z" fill="#FFFFFF"></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '5',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#6D768D"></path><path d="M498.346667 279.082667L248.789333 701.44a15.829333 15.829333 0 0 0 13.653334 23.893333h499.114666a15.829333 15.829333 0 0 0 13.653334-23.893333l-249.6-422.357333a15.829333 15.829333 0 0 0-27.264 0z" fill="#FFFFFF"></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '6',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#6D768D"></path><path d="M497.749333 798.549333l-31.445333-28.501333C313.941333 631.722667 213.333333 540.501333 213.333333 428.8a160.981333 160.981333 0 0 1 162.730667-162.730667c51.498667 0 100.906667 23.978667 133.12 61.696a177.536 177.536 0 0 1 133.162667-61.696 160.981333 160.981333 0 0 1 162.730666 162.730667c0 111.701333-100.608 202.965333-252.970666 341.333333l-31.445334 28.458667a17.066667 17.066667 0 0 1-22.912 0z" fill="#FFFFFF"></path><path d="M634.538667 487.808L555.050667 426.24 507.306667 256a201.002667 201.002667 0 0 0-23.594667 20.394667l-0.256-0.256L525.653333 426.666667l-133.290666 59.946666a14.08 14.08 0 0 0-8.021334 15.957334l28.757334 126.378666a14.208 14.208 0 0 0 27.733333-6.229333l-26.24-115.114667 126.037333-56.704 76.416 59.136a14.250667 14.250667 0 0 0 19.968-2.474666 14.08 14.08 0 0 0-2.474666-19.797334z" fill="#6D768D"></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '7',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#6D768D"></path><path d="M497.749333 798.549333l-31.445333-28.501333C313.941333 631.722667 213.333333 540.501333 213.333333 428.8a160.981333 160.981333 0 0 1 162.730667-162.730667c51.498667 0 100.906667 23.978667 133.12 61.696a177.536 177.536 0 0 1 133.162667-61.696 160.981333 160.981333 0 0 1 162.730666 162.730667c0 111.701333-100.608 202.965333-252.970666 341.333333l-31.445334 28.458667a17.066667 17.066667 0 0 1-22.912 0z" fill="#FFFFFF"></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '8',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#6D768D"></path><path d="M374.656 273.194667c5.973333 4.48 12.117333 9.6 18.346667 15.36 6.272 5.717333 11.904 12.373333 16.896 19.84 2.517333 4.010667 5.504 8.490667 9.002666 13.482666a529.493333 529.493333 0 0 1 20.266667 32.213334h155.221333a169.813333 169.813333 0 0 0 9.770667-15.744c2.474667-4.48 5.248-8.96 8.234667-13.482667a460.842667 460.842667 0 0 1 23.253333-31.829333c4.992-6.229333 12.245333-12.373333 21.76-18.346667a34.261333 34.261333 0 0 0 10.112-9.728 31.274667 31.274667 0 0 0 5.248-11.989333 18.56 18.56 0 0 0-1.536-11.605334 17.664 17.664 0 0 0-10.112-8.618666c-4.48-1.493333-8.362667-2.005333-11.605333-1.493334a46.933333 46.933333 0 0 0-9.770667 2.602667c-3.242667 1.28-6.613333 2.645333-10.112 4.138667a32.426667 32.426667 0 0 1-12.757333 2.261333 26.026667 26.026667 0 0 1-12.373334-2.645333 45.653333 45.653333 0 0 1-8.96-6.357334l-8.661333-7.850666a30.336 30.336 0 0 0-11.989333-6.4c-9.984-3.968-18.005333-4.693333-24.021334-2.218667-5.973333 2.474667-11.946667 6.485333-17.962666 11.946667a88.618667 88.618667 0 0 1-11.989334 10.496 7.338667 7.338667 0 0 1-3.754666 1.493333 46.165333 46.165333 0 0 1-8.277334-5.205333 71.808 71.808 0 0 1-7.125333-4.906667 37.973333 37.973333 0 0 1-6.4-6.357333c-3.968-3.968-9.941333-6.613333-17.92-7.850667a31.061333 31.061333 0 0 0-21.76 4.138667c-8.533333 5.461333-14.506667 10.069333-18.048 13.824a29.354667 29.354667 0 0 1-15.744 7.893333 23.978667 23.978667 0 0 1-13.098667-0.768 987.733333 987.733333 0 0 0-14.634666-4.48 80.725333 80.725333 0 0 0-14.250667-2.986667 16.768 16.768 0 0 0-11.989333 2.986667c-6.997333 5.461333-9.258667 12.074667-6.741334 19.84a34.56 34.56 0 0 0 13.482667 18.346667z" fill="#FFFFFF"></path><path d="M780.757333 545.152a219.306667 219.306667 0 0 0-19.882666-65.536 224.981333 224.981333 0 0 0-33.365334-49.792 430.336 430.336 0 0 0-37.12-37.12c-14.506667-11.946667-27.264-23.296-38.272-34.048a544.512 544.512 0 0 1-27.733333-28.842667 305.28 305.28 0 0 1-22.485333-26.197333h-168.746667c-6.485333 8.490667-13.994667 17.493333-22.485333 26.965333a360.96 360.96 0 0 1-26.24 28.074667c-10.538667 10.24-22.272 21.12-35.285334 32.597333a305.493333 305.493333 0 0 0-41.6 44.16 250.026667 250.026667 0 0 0-49.493333 117.589334 216.106667 216.106667 0 0 0 1.877333 70.4 220.586667 220.586667 0 0 0 75.349334 126.549333c21.248 18.005333 47.146667 32.597333 77.653333 43.818667 30.464 11.264 65.493333 16.853333 104.96 16.853333 38.528 0 72.874667-4.864 103.125333-14.592a265.045333 265.045333 0 0 0 78.378667-39.338667c21.973333-16.469333 39.594667-35.797333 52.864-58.026666 13.226667-22.186667 22.101333-45.824 26.624-70.784 4.992-30.421333 5.632-58.026667 1.877333-82.773334z" fill="#FFFFFF"></path><path d="M593.322667 647.509333a20.48 20.48 0 0 1-11.861334 3.2h-50.133333v14.165334c0 4.266667-1.792 8.362667-5.376 12.373333a15.914667 15.914667 0 0 1-13.952 5.333333 24.917333 24.917333 0 0 1-14.336-3.882666c-3.84-2.602667-5.973333-7.210667-6.4-13.824v-14.165334h-48.725333a17.792 17.792 0 0 1-11.818667-3.882666 10.24 10.24 0 0 1-3.968-9.6c0-4.266667 1.578667-7.68 4.693333-10.24a16.768 16.768 0 0 1 11.093334-3.925334h48.682666v-24.789333h-48.682666a15.573333 15.573333 0 0 1-11.52-4.266667 13.525333 13.525333 0 0 1-4.266667-9.941333 15.36 15.36 0 0 1 4.693333-10.624 14.72 14.72 0 0 1 11.093334-4.949333h48.682666l0.725334-14.890667a1053.568 1053.568 0 0 1-40.832-42.538667l-10.752-9.898666a41.216 41.216 0 0 1-6.442667-11.690667c-1.92-4.992-0.938667-10.069333 2.858667-15.274667a13.653333 13.653333 0 0 1 15.786666-3.84c6.186667 2.090667 11.221333 4.821333 15.018667 8.106667 1.92 2.389333 5.248 5.888 10.026667 10.666667l15.061333 14.848 19.328 19.157333 22.186667-20.565333a987.605333 987.605333 0 0 1 29.397333-25.514667 21.162667 21.162667 0 0 1 14.293333-5.674667c5.290667 0 9.557333 2.133333 12.928 6.4 6.186667 7.082667 3.84 15.36-7.168 24.789334a179.072 179.072 0 0 0-12.885333 12.373333c-5.76 5.973333-11.52 11.733333-17.194667 17.408-6.698667 7.082667-14.08 14.378667-22.186666 21.973333v13.44h46.506666c6.698667 0 11.605333 1.536 14.72 4.608a14.165333 14.165333 0 0 1 4.650667 10.282667c0 4.266667-1.450667 7.936-4.309333 11.008-2.858667 3.029333-7.637333 4.352-14.336 3.84l-46.506667 0.768-0.768 24.064h45.866667c13.354667 0 20.053333 4.992 20.053333 14.933333 0.469333 4.693333-0.853333 8.106667-3.925333 10.24z" fill="#6D768D"></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '9',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#6D768D"></path><path d="M512 213.333333l234.666667 341.333334h-128v213.333333h-213.333334v-213.333333h-128L512 213.333333z" fill="#FFFFFF"></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '10',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#6D768D"></path><path d="M533.333333 810.666667L298.666667 469.333333h128V256h213.333333v213.333333h128l-234.666667 341.333334z" fill="#FFFFFF"></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '11',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#6D768D"></path><path d="M213.333333 533.333333L554.666667 298.666667v128h213.333333v213.333333h-213.333333v128l-341.333334-234.666667z" fill="#FFFFFF"></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '12',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#6D768D"></path><path d="M810.666667 533.333333L469.333333 768v-128H256v-213.333333h213.333333V298.666667l341.333334 234.666666z" fill="#FFFFFF"></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '13',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M0 512c0 282.752 229.248 512 512 512s512-229.248 512-512S794.752 0 512 0 0 229.248 0 512z" fill="#6D768D"></path><path d="M571.349333 508.586667l162.389334-162.346667a44.330667 44.330667 0 1 0-62.72-62.72l-162.389334 162.389333-162.517333-162.389333a44.330667 44.330667 0 1 0-62.72 62.72l162.389333 162.389333-162.389333 162.474667a44.330667 44.330667 0 1 0 62.72 62.72l162.389333-162.346667 162.389334 162.389334a44.330667 44.330667 0 1 0 62.72-62.72l-162.261334-162.56z" fill="#FFFFFF"></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '14',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M512 0C233.386667 0 0 225.877333 0 512s225.877333 512 512 512 512-225.877333 512-512S790.613333 0 512 0z" fill="#6D768D"></path><path d="M726.144 311.210667l-277.333333 305.066666-124.8-124.8c-13.866667-13.866667-41.6-13.866667-55.466667 0-13.866667 13.866667-13.866667 41.6 0 55.466667l159.445333 152.533333c13.866667 13.866667 41.6 13.866667 55.466667 0l305.066667-332.8c13.866667-13.866667 13.866667-41.6 0-55.466666-20.778667-13.866667-48.512-13.866667-62.378667 0z" fill="#FFFFFF"></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '15',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#6D768D"></path><path d="M541.952 755.626667a40.618667 40.618667 0 0 1-29.824 12.373333 41.344 41.344 0 0 1-30.122667-12.373333 40.106667 40.106667 0 0 1-12.672-30.122667c0-11.605333 4.096-21.845333 12.672-30.122667a40.405333 40.405333 0 0 1 30.122667-12.714666c11.605333 0 21.546667 4.138667 29.824 12.714666a40.32 40.32 0 0 1 12.714667 30.122667c0 11.861333-4.096 21.76-12.714667 30.122667zM450.986667 241.28A77.866667 77.866667 0 0 1 512.256 213.333333c24.874667 0 45.354667 8.917333 61.354667 27.946667 15.488 18.432 23.722667 41.685333 23.722666 69.674667 0 23.765333-33.152 200.533333-44.672 329.045333h-80.128C463.146667 511.402667 426.666667 334.677333 426.666667 310.954667c0-27.392 8.277333-50.645333 24.32-69.674667z" fill="#FFFFFF"></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '16',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M512 0C229.248 0 0 229.248 0 512s229.248 512 512 512 512-229.248 512-512S794.794667 0 512 0z" fill="#6D768D"></path><path d="M490.666667 682.666667a64 64 0 1 1 0 128 64 64 0 0 1 0-128z m13.994666-490.752c61.397333 0 112.341333 14.634667 153.002667 43.946666 40.533333 29.269333 60.885333 72.618667 60.885333 130.133334 0 35.242667-12.373333 64.938667-29.952 89.045333-10.282667 14.677333-33.664 33.408-62.890666 56.192l-32.426667 22.357333c-15.701333 12.202667-29.696 26.453333-34.858667 42.666667-1.706667 5.546667-3.072 14.677333-3.968 24.533333-0.426667 4.949333-4.864 15.018667-15.232 15.018667h-83.328c-13.568 0-15.957333-10.581333-15.744-15.786667 1.493333-34.005333 4.608-64.213333 18.474667-80.469333 28.074667-32.896 91.904-73.813333 91.904-73.813333a104.106667 104.106667 0 0 0 23.552-24.021334c10.837333-14.933333 19.797333-31.317333 19.797333-49.237333 0-20.565333-6.016-39.338667-18.090666-56.32-12.032-16.938667-34.090667-25.386667-66.005334-25.386667-31.445333 0-53.76 10.410667-66.901333 31.274667-9.685333 15.445333-15.786667 29.610667-18.346667 45.013333-0.853333 5.461333-4.394667 16.981333-16.042666 16.981334H327.210667c-17.322667 0-21.12-11.221333-20.650667-16.64 6.272-68.138667 32.896-114.688 80-144.597334 32-20.565333 71.381333-30.890667 118.101333-30.890666z" fill="#FFFFFF"></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '17',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#6D768D"></path><path d="M336.256 410.026667H253.312a40.021333 40.021333 0 0 0-39.850667 43.264l23.296 278.101333c1.706667 20.693333 19.072 36.608 39.850667 36.608h59.648c11.050667 0 20.010667-8.96 20.010667-19.968v-318.037333a19.968 19.968 0 0 0-20.010667-19.968z m434.432 0h-178.944C653.312 182.314667 548.949333 170.666667 548.949333 170.666667c-44.288 0-35.114667 34.986667-38.442666 40.832 0 84.48-68.010667 155.093333-101.034667 184.362666a39.552 39.552 0 0 0-13.226667 29.653334v322.56c0 11.008 8.96 19.925333 20.010667 19.925333h233.728c30.378667 0 58.154667-17.152 71.68-44.373333 18.176-36.736 40.448-90.112 54.656-133.973334 13.781333-42.410667 26.24-94.976 33.578667-131.968a39.850667 39.850667 0 0 0-39.253334-47.658666z" fill="#FFFFFF"></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '18',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#6D768D"></path><path d="M796.16 413.909333c-31.146667-0.298667-115.626667-0.085333-146.858667-0.085333h-158.464c8.533333-7.68 15.914667-14.506667 23.594667-20.906667 29.781333-24.874667 25.813333-71.082667-14.208-88.874666-22.954667-10.24-44.970667-5.632-64 11.52-34.944 31.274667-69.632 62.677333-104.277333 93.994666a15.488 15.488 0 0 1-11.178667 4.437334c-11.221333-0.085333-26.88-0.128-46.933333-0.170667a17.066667 17.066667 0 0 0-17.109334 17.066667L256 719.701333a17.066667 17.066667 0 0 0 17.066667 17.152l49.578666-0.085333c3.968 0 7.466667 0.768 10.88 2.602667 15.829333 8.832 31.701333 17.493333 47.616 26.24a18.133333 18.133333 0 0 0 9.301334 2.346666h168.405333c6.186667 0 11.946667-0.981333 17.834667-2.56 29.44-7.253333 40.021333-30.293333 38.528-52.565333-0.768-9.728-4.266667-18.346667-9.984-26.24 19.626667-5.76 35.114667-16.213333 42.112-36.096 7.125333-20.394667 1.621333-38.4-12.672-53.333333 28.16-19.754667 34.858667-44.672 18.645333-75.648h140.458667c6.570667 0 13.013333-0.597333 19.370666-2.645334 31.957333-9.813333 48.810667-42.88 35.626667-71.552-10.154667-22.186667-28.629333-33.152-52.608-33.450666z" fill="#FFFFFF"></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '19',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#6D768D"></path><path d="M270.506667 413.909333c31.146667-0.298667 115.626667-0.085333 146.858666-0.085333h158.464c-8.533333-7.68-15.914667-14.506667-23.594666-20.906667-29.781333-24.874667-25.813333-71.082667 14.208-88.874666 22.954667-10.24 44.970667-5.632 64 11.52 34.944 31.274667 69.632 62.677333 104.277333 93.994666 3.413333 2.986667 6.528 4.437333 11.178667 4.437334 11.221333-0.085333 26.88-0.128 46.933333-0.170667a17.066667 17.066667 0 0 1 17.109333 17.066667l0.682667 288.853333a17.066667 17.066667 0 0 1-17.066667 17.152l-49.578666-0.085333a22.101333 22.101333 0 0 0-10.88 2.602666c-15.829333 8.832-31.701333 17.493333-47.616 26.24a18.133333 18.133333 0 0 1-9.301334 2.346667h-168.405333a68.693333 68.693333 0 0 1-17.834667-2.56c-29.44-7.253333-40.021333-30.293333-38.528-52.565333 0.768-9.728 4.266667-18.346667 9.984-26.24-19.626667-5.76-35.114667-16.213333-42.112-36.096-7.125333-20.394667-1.621333-38.4 12.672-53.333334-28.16-19.754667-34.858667-44.672-18.645333-75.648H272.853333c-6.570667 0-13.013333-0.597333-19.370666-2.645333-31.957333-9.813333-48.810667-42.88-35.626667-71.552 10.154667-22.186667 28.629333-33.152 52.608-33.450667z" fill="#FFFFFF"></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '20',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#6D768D"></path><path d="M667.733333 480.128H400v-111.36a97.706667 97.706667 0 0 1 97.621333-97.621333 97.706667 97.706667 0 0 1 97.578667 97.621333 28.885333 28.885333 0 0 0 57.813333 0A155.605333 155.605333 0 0 0 497.621333 213.333333a155.605333 155.605333 0 0 0-155.392 155.434667v111.36h-14.677333A28.885333 28.885333 0 0 0 298.666667 509.013333v292.010667a28.885333 28.885333 0 0 0 28.885333 28.885333h340.138667a28.885333 28.885333 0 0 0 28.928-28.885333V509.013333a28.885333 28.885333 0 0 0-28.928-28.885333z" fill="#FFFFFF"></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '21',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#6D768D"></path><path d="M400.042667 437.461333v-111.36a97.706667 97.706667 0 0 1 97.621333-97.621333 97.706667 97.706667 0 0 1 97.578667 97.621333 28.885333 28.885333 0 0 0 57.813333 0A155.605333 155.605333 0 0 0 497.621333 170.666667a155.605333 155.605333 0 0 0-155.392 155.434666v111.36h-14.677333A28.885333 28.885333 0 0 0 298.666667 466.346667v292.010666a28.885333 28.885333 0 0 0 28.885333 28.885334h340.138667a28.885333 28.885333 0 0 0 28.928-28.885334V466.346667a28.885333 28.885333 0 0 0-28.928-28.885334H400.042667z" fill="#FFFFFF"></path><path d="M595.242667 437.461333v-111.36a97.706667 97.706667 0 0 0-97.621334-97.621333 97.706667 97.706667 0 0 0-97.578666 97.621333 28.885333 28.885333 0 0 1-57.813334 0A155.605333 155.605333 0 0 1 497.621333 170.666667a155.605333 155.605333 0 0 1 155.434667 155.434666v111.36h14.634667c16 0 28.928 12.928 28.928 28.885334v292.010666a28.885333 28.885333 0 0 1-28.928 28.885334H327.552A28.885333 28.885333 0 0 1 298.666667 758.357333V466.346667c0-15.957333 12.928-28.885333 28.885333-28.885334h267.690667z" fill="#FFFFFF"></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '22',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M511.999787 512.000213m-511.999787 0a511.999787 511.999787 0 1 0 1023.999573 0 511.999787 511.999787 0 1 0-1023.999573 0Z" fill="#6D768D"></path><path d="M381.354508 364.586941c0 54.015977 29.013321 103.935957 75.946635 130.986613a152.53327 152.53327 0 0 0 151.935936 0 151.12527 151.12527 0 0 0 75.946636-130.986613A151.594604 151.594604 0 0 0 533.333111 213.333671a151.594604 151.594604 0 0 0-151.89327 151.25327zM660.479725 498.901552a185.258589 185.258589 0 0 1-127.146614 50.346646c-49.066646 0-93.866628-19.199992-127.06128-50.346646C317.141201 544.853533 255.999893 637.440161 255.999893 744.106783c0 13.183995 10.709329 23.850657 23.978657 23.850657h506.709122a23.893323 23.893323 0 0 0 23.978657-23.893323c0-106.538622-61.098641-199.25325-150.186604-245.205232z" fill="#FFFFFF"></path></svg>`
|
||||
},
|
||||
{
|
||||
name: '23',
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#6D768D"></path><path d="M445.610667 401.578667a129.322667 129.322667 0 1 0 258.645333 0 129.322667 129.322667 0 0 0-258.645333 0z m237.568 114.901333a157.354667 157.354667 0 0 1-216.362667 0 236.373333 236.373333 0 0 0-127.957333 209.706667c0 11.264 9.130667 20.394667 20.394666 20.394666h431.402667a20.394667 20.394667 0 0 0 20.394667-20.394666 236.373333 236.373333 0 0 0-127.872-209.706667zM409.813333 401.578667c0-40.362667 14.592-77.397333 38.698667-106.112a112.725333 112.725333 0 0 0-29.013333-3.925334 112.64 112.64 0 0 0-112.426667 112.469334 112.64 112.64 0 0 0 144.853333 107.648 164.693333 164.693333 0 0 1-42.112-110.08z m-18.602666 136.704a136.533333 136.533333 0 0 1-65.706667-34.474667 205.44 205.44 0 0 0-111.232 182.4c0 9.813333 7.936 17.706667 17.706667 17.706667H303.36a273.621333 273.621333 0 0 1 87.893333-165.632z" fill="#FFFFFF"></path></svg>`
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
// 获取nodeIconList icon内容
|
||||
const getNodeIconListIcon = (name, extendIconList = []) => {
|
||||
let arr = name.split('_')
|
||||
const iconList = mergerIconList([...nodeIconList, ...extendIconList])
|
||||
let typeData = iconList.find(item => {
|
||||
return item.type === arr[0]
|
||||
})
|
||||
if (typeData) {
|
||||
let typeName = typeData.list.find(item => {
|
||||
return item.name === arr[1]
|
||||
})
|
||||
if (typeName) {
|
||||
return typeName.icon
|
||||
}
|
||||
return ''
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
hyperlink,
|
||||
note,
|
||||
attachment,
|
||||
nodeIconList,
|
||||
getNodeIconListIcon
|
||||
}
|
||||
@@ -0,0 +1,254 @@
|
||||
// 默认主题
|
||||
export default {
|
||||
// 节点内边距
|
||||
paddingX: 15,
|
||||
paddingY: 5,
|
||||
// 图片显示的最大宽度
|
||||
imgMaxWidth: 200,
|
||||
// 图片显示的最大高度
|
||||
imgMaxHeight: 100,
|
||||
// icon的大小
|
||||
iconSize: 20,
|
||||
// 连线的粗细
|
||||
lineWidth: 1,
|
||||
// 连线的颜色
|
||||
lineColor: '#549688',
|
||||
// 连线样式
|
||||
lineDasharray: 'none',
|
||||
// 连线是否开启流动效果，仅在虚线时有效（需要注册LineFlow插件）
|
||||
lineFlow: false,
|
||||
// 流动效果一个周期的时间，单位：s
|
||||
lineFlowDuration: 1,
|
||||
// 流动方向是否是从父节点到子节点
|
||||
lineFlowForward: true,
|
||||
// 连线风格
|
||||
lineStyle: 'straight', // 曲线（curve）【仅支持logicalStructure、mindMap、verticalTimeline三种结构】、直线（straight）、直连（direct）【仅支持logicalStructure、mindMap、organizationStructure、verticalTimeline四种结构】
|
||||
// 曲线连接时，根节点和其他节点的连接线样式保持统一，默认根节点为 ( 型，其他节点为 { 型，设为true后，都为 { 型。仅支持logicalStructure、mindMap两种结构
|
||||
rootLineKeepSameInCurve: true,
|
||||
// 曲线连接时，根节点和其他节点的连线起始位置保持统一，默认根节点的连线起始位置在节点中心，其他节点在节点右侧（或左侧），如果该配置设为true，那么根节点的连线起始位置也会在节点右侧（或左侧）
|
||||
rootLineStartPositionKeepSameInCurve: false,
|
||||
// 直线连接(straight)时，连线的圆角大小，设置为0代表没有圆角，仅支持logicalStructure、mindMap、verticalTimeline三种结构
|
||||
lineRadius: 5,
|
||||
// 连线是否显示标记，目前只支持箭头
|
||||
showLineMarker: false,
|
||||
// 概要连线的粗细
|
||||
generalizationLineWidth: 1,
|
||||
// 概要连线的颜色
|
||||
generalizationLineColor: '#549688',
|
||||
// 概要曲线距节点的距离
|
||||
generalizationLineMargin: 0,
|
||||
// 概要节点距节点的距离
|
||||
generalizationNodeMargin: 20,
|
||||
// 关联线默认状态的粗细
|
||||
associativeLineWidth: 2,
|
||||
// 关联线默认状态的颜色
|
||||
associativeLineColor: 'rgb(51, 51, 51)',
|
||||
// 关联线激活状态的粗细
|
||||
associativeLineActiveWidth: 8,
|
||||
// 关联线激活状态的颜色
|
||||
associativeLineActiveColor: 'rgba(2, 167, 240, 1)',
|
||||
// 关联线样式
|
||||
associativeLineDasharray: '6,4',
|
||||
// 关联线文字颜色
|
||||
associativeLineTextColor: 'rgb(51, 51, 51)',
|
||||
// 关联线文字大小
|
||||
associativeLineTextFontSize: 14,
|
||||
// 关联线文字行高
|
||||
associativeLineTextLineHeight: 1.2,
|
||||
// 关联线文字字体
|
||||
associativeLineTextFontFamily: '微软雅黑, Microsoft YaHei',
|
||||
// 背景颜色
|
||||
backgroundColor: '#fafafa',
|
||||
// 背景图片
|
||||
backgroundImage: 'none',
|
||||
// 背景重复
|
||||
backgroundRepeat: 'no-repeat',
|
||||
// 设置背景图像的起始位置
|
||||
backgroundPosition: 'center center',
|
||||
// 设置背景图片大小
|
||||
backgroundSize: 'cover',
|
||||
// 节点使用只有底边横线的样式，仅支持logicalStructure、mindMap、catalogOrganization、organizationStructure四种结构
|
||||
nodeUseLineStyle: false,
|
||||
// 根节点样式
|
||||
root: {
|
||||
shape: 'rectangle',
|
||||
fillColor: '#549688',
|
||||
fontFamily: '微软雅黑, Microsoft YaHei',
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
fontStyle: 'normal',
|
||||
borderColor: 'transparent',
|
||||
borderWidth: 0,
|
||||
borderDasharray: 'none',
|
||||
borderRadius: 5,
|
||||
textDecoration: 'none',
|
||||
gradientStyle: false,
|
||||
startColor: '#549688',
|
||||
endColor: '#fff',
|
||||
startDir: [0, 0],
|
||||
endDir: [1, 0],
|
||||
// 连线标记的位置，start（头部）、end（尾部），该配置在showLineMarker配置为true时生效
|
||||
lineMarkerDir: 'end',
|
||||
// 节点鼠标hover和激活时显示的矩形边框的颜色，主题里不设置，默认会取hoverRectColor实例化选项的值
|
||||
hoverRectColor: '',
|
||||
// 点鼠标hover和激活时显示的矩形边框的圆角大小
|
||||
hoverRectRadius: 5,
|
||||
// 文本对齐
|
||||
textAlign: 'left',// right、center、justify、left
|
||||
// 图片放置位置，相对于整个文本内容
|
||||
imgPlacement: 'top', // left、right、bottom、top
|
||||
// 标签放置位置
|
||||
tagPlacement: 'right' // right（文字右侧）、bottom（文本内容下方）
|
||||
// 下列样式也支持给节点设置，用于覆盖最外层的设置
|
||||
// paddingX,
|
||||
// paddingY,
|
||||
// lineWidth,
|
||||
// lineColor,
|
||||
// lineDasharray,
|
||||
// lineFlow,
|
||||
// lineFlowDuration,
|
||||
// lineFlowForward
|
||||
// 关联线的所有样式
|
||||
},
|
||||
// 二级节点样式
|
||||
second: {
|
||||
shape: 'rectangle',
|
||||
marginX: 100,
|
||||
marginY: 40,
|
||||
fillColor: '#fff',
|
||||
fontFamily: '微软雅黑, Microsoft YaHei',
|
||||
color: '#565656',
|
||||
fontSize: 16,
|
||||
fontWeight: 'normal',
|
||||
fontStyle: 'normal',
|
||||
borderColor: '#549688',
|
||||
borderWidth: 1,
|
||||
borderDasharray: 'none',
|
||||
borderRadius: 5,
|
||||
textDecoration: 'none',
|
||||
gradientStyle: false,
|
||||
startColor: '#549688',
|
||||
endColor: '#fff',
|
||||
startDir: [0, 0],
|
||||
endDir: [1, 0],
|
||||
lineMarkerDir: 'end',
|
||||
hoverRectColor: '',
|
||||
hoverRectRadius: 5,
|
||||
textAlign: 'left',
|
||||
imgPlacement: 'top',
|
||||
tagPlacement: 'right'
|
||||
},
|
||||
// 三级及以下节点样式
|
||||
node: {
|
||||
shape: 'rectangle',
|
||||
marginX: 50,
|
||||
marginY: 0,
|
||||
fillColor: 'transparent',
|
||||
fontFamily: '微软雅黑, Microsoft YaHei',
|
||||
color: '#6a6d6c',
|
||||
fontSize: 14,
|
||||
fontWeight: 'normal',
|
||||
fontStyle: 'normal',
|
||||
borderColor: 'transparent',
|
||||
borderWidth: 0,
|
||||
borderRadius: 5,
|
||||
borderDasharray: 'none',
|
||||
textDecoration: 'none',
|
||||
gradientStyle: false,
|
||||
startColor: '#549688',
|
||||
endColor: '#fff',
|
||||
startDir: [0, 0],
|
||||
endDir: [1, 0],
|
||||
lineMarkerDir: 'end',
|
||||
hoverRectColor: '',
|
||||
hoverRectRadius: 5,
|
||||
textAlign: 'left',
|
||||
imgPlacement: 'top',
|
||||
tagPlacement: 'right'
|
||||
},
|
||||
// 概要节点样式
|
||||
generalization: {
|
||||
shape: 'rectangle',
|
||||
marginX: 100,
|
||||
marginY: 40,
|
||||
fillColor: '#fff',
|
||||
fontFamily: '微软雅黑, Microsoft YaHei',
|
||||
color: '#565656',
|
||||
fontSize: 16,
|
||||
fontWeight: 'normal',
|
||||
fontStyle: 'normal',
|
||||
borderColor: '#549688',
|
||||
borderWidth: 1,
|
||||
borderDasharray: 'none',
|
||||
borderRadius: 5,
|
||||
textDecoration: 'none',
|
||||
gradientStyle: false,
|
||||
startColor: '#549688',
|
||||
endColor: '#fff',
|
||||
startDir: [0, 0],
|
||||
endDir: [1, 0],
|
||||
hoverRectColor: '',
|
||||
hoverRectRadius: 5,
|
||||
textAlign: 'left',
|
||||
imgPlacement: 'top',
|
||||
tagPlacement: 'right'
|
||||
}
|
||||
}
|
||||
|
||||
// 检测主题配置是否是节点大小无关的
|
||||
const nodeSizeIndependenceList = [
|
||||
'lineWidth',
|
||||
'lineColor',
|
||||
'lineDasharray',
|
||||
'lineStyle',
|
||||
'generalizationLineWidth',
|
||||
'generalizationLineColor',
|
||||
'associativeLineWidth',
|
||||
'associativeLineColor',
|
||||
'associativeLineActiveWidth',
|
||||
'associativeLineActiveColor',
|
||||
'associativeLineTextColor',
|
||||
'associativeLineTextFontSize',
|
||||
'associativeLineTextLineHeight',
|
||||
'associativeLineTextFontFamily',
|
||||
'backgroundColor',
|
||||
'backgroundImage',
|
||||
'backgroundRepeat',
|
||||
'backgroundPosition',
|
||||
'backgroundSize',
|
||||
'rootLineKeepSameInCurve',
|
||||
'rootLineStartPositionKeepSameInCurve',
|
||||
'showLineMarker',
|
||||
'lineRadius',
|
||||
'hoverRectColor',
|
||||
'hoverRectRadius',
|
||||
'lineFlow',
|
||||
'lineFlowDuration',
|
||||
'lineFlowForward',
|
||||
'textAlign'
|
||||
]
|
||||
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]
|
||||
})
|
||||
) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
// 连线的样式
|
||||
export const lineStyleProps = [
|
||||
'lineColor',
|
||||
'lineDasharray',
|
||||
'lineWidth',
|
||||
'lineMarkerDir',
|
||||
'lineFlow',
|
||||
'lineFlowDuration',
|
||||
'lineFlowForward'
|
||||
]
|
||||
@@ -0,0 +1,5 @@
|
||||
import defaultTheme from './default'
|
||||
|
||||
export default {
|
||||
default: defaultTheme
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
// 画布自动移动类
|
||||
class AutoMove {
|
||||
constructor(mindMap) {
|
||||
this.mindMap = mindMap
|
||||
this.autoMoveTimer = null
|
||||
}
|
||||
|
||||
// 鼠标移动事件
|
||||
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) {
|
||||
handle('left', step)
|
||||
this.mindMap.view.translateX(step)
|
||||
count++
|
||||
}
|
||||
// 右边缘
|
||||
if (x >= this.mindMap.elRect.right - limit) {
|
||||
handle('right', step)
|
||||
this.mindMap.view.translateX(-step)
|
||||
count++
|
||||
}
|
||||
// 上边缘
|
||||
if (y <= this.mindMap.elRect.top + limit) {
|
||||
handle('top', step)
|
||||
this.mindMap.view.translateY(step)
|
||||
count++
|
||||
}
|
||||
// 下边缘
|
||||
if (y >= this.mindMap.elRect.bottom - limit) {
|
||||
handle('bottom', step)
|
||||
this.mindMap.view.translateY(-step)
|
||||
count++
|
||||
}
|
||||
if (count > 0) {
|
||||
this.startAutoMove(x, y, callback, handle)
|
||||
}
|
||||
}
|
||||
|
||||
// 开启自动移动
|
||||
startAutoMove(x, y, callback, handle) {
|
||||
this.autoMoveTimer = setTimeout(() => {
|
||||
this.onMove(x, y, callback, handle)
|
||||
}, 20)
|
||||
}
|
||||
|
||||
// 清除自动移动定时器
|
||||
clearAutoMoveTimer() {
|
||||
clearTimeout(this.autoMoveTimer)
|
||||
}
|
||||
}
|
||||
|
||||
export default AutoMove
|
||||
@@ -0,0 +1,50 @@
|
||||
import { nextTick } from '.'
|
||||
|
||||
// 批量执行
|
||||
class BatchExecution {
|
||||
// 构造函数
|
||||
constructor() {
|
||||
this.has = {}
|
||||
this.queue = []
|
||||
this.nextTick = nextTick(this.flush, this)
|
||||
}
|
||||
|
||||
// 添加任务
|
||||
push(name, fn) {
|
||||
if (this.has[name]) {
|
||||
this.replaceTask(name, fn)
|
||||
return
|
||||
}
|
||||
this.has[name] = true
|
||||
this.queue.push({
|
||||
name,
|
||||
fn
|
||||
})
|
||||
this.nextTick()
|
||||
}
|
||||
|
||||
// 替换任务
|
||||
replaceTask(name, fn) {
|
||||
const index = this.queue.findIndex(item => {
|
||||
return item.name === name
|
||||
})
|
||||
if (index !== -1) {
|
||||
this.queue[index] = {
|
||||
name,
|
||||
fn
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 执行队列
|
||||
flush() {
|
||||
let fns = this.queue.slice(0)
|
||||
this.queue = []
|
||||
fns.forEach(({ name, fn }) => {
|
||||
this.has[name] = false
|
||||
fn()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default BatchExecution
|
||||
@@ -0,0 +1,51 @@
|
||||
// LRU缓存类
|
||||
export default class Lru {
|
||||
constructor(max) {
|
||||
this.max = max || 1000
|
||||
this.size = 0
|
||||
this.pool = new Map()
|
||||
}
|
||||
|
||||
add(key, value) {
|
||||
const isExist = this.has(key)
|
||||
// 如果该key之前不存在，并且现在数量已经超出最大值，则不再继续添加
|
||||
if (!isExist && this.size >= this.max) {
|
||||
return false
|
||||
}
|
||||
// 已经存在则可以更新，因为不影响数量
|
||||
// 如果该key是否已经存在，则先删除
|
||||
this.delete(key)
|
||||
// 添加
|
||||
this.pool.set(key, value)
|
||||
this.size++
|
||||
// 删除最早的没啥意义，详见：https://github.com/wanglin2/mind-map/issues/467
|
||||
// if (this.size > this.max) {
|
||||
// let keys = this.pool.keys()
|
||||
// let last = keys.next()
|
||||
// this.delete(last.value)
|
||||
// }
|
||||
return true
|
||||
}
|
||||
|
||||
delete(key) {
|
||||
if (this.pool.has(key)) {
|
||||
this.pool.delete(key)
|
||||
this.size--
|
||||
}
|
||||
}
|
||||
|
||||
has(key) {
|
||||
return this.pool.has(key)
|
||||
}
|
||||
|
||||
get(key) {
|
||||
if (this.pool.has(key)) {
|
||||
return this.pool.get(key)
|
||||
}
|
||||
}
|
||||
|
||||
clear() {
|
||||
this.size = 0
|
||||
this.pool = new Map()
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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
|
||||
}
|
||||
@@ -0,0 +1,354 @@
|
||||
// 将以空格分隔的字符串值转换成成数字/单位/值数组
|
||||
const getNumberValueFromStr = value => {
|
||||
let arr = String(value).split(/\s+/)
|
||||
return arr.map(item => {
|
||||
if (/^[\d.]+/.test(item)) {
|
||||
// 数字+单位
|
||||
let res = /^([\d.]+)(.*)$/.exec(item)
|
||||
return [Number(res[1]), res[2]]
|
||||
} else {
|
||||
// 单个值
|
||||
return item
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 缩放宽度
|
||||
const zoomWidth = (ratio, height) => {
|
||||
// w / height = ratio
|
||||
return ratio * height
|
||||
}
|
||||
|
||||
// 缩放高度
|
||||
const zoomHeight = (ratio, width) => {
|
||||
// width / h = ratio
|
||||
return width / ratio
|
||||
}
|
||||
|
||||
// 关键词到百分比值的映射
|
||||
const keyWordToPercentageMap = {
|
||||
left: 0,
|
||||
top: 0,
|
||||
center: 50,
|
||||
bottom: 100,
|
||||
right: 100
|
||||
}
|
||||
|
||||
// 模拟background-size
|
||||
const handleBackgroundSize = ({
|
||||
backgroundSize,
|
||||
drawOpt,
|
||||
imageRatio,
|
||||
canvasWidth,
|
||||
canvasHeight,
|
||||
canvasRatio
|
||||
}) => {
|
||||
if (backgroundSize) {
|
||||
// 将值转换成数组
|
||||
let backgroundSizeValueArr = getNumberValueFromStr(backgroundSize)
|
||||
// 两个值都为auto，那就相当于不设置
|
||||
if (
|
||||
backgroundSizeValueArr[0] === 'auto' &&
|
||||
backgroundSizeValueArr[1] === 'auto'
|
||||
) {
|
||||
return
|
||||
}
|
||||
// 值为cover
|
||||
if (backgroundSizeValueArr[0] === 'cover') {
|
||||
if (imageRatio > canvasRatio) {
|
||||
// 图片的宽高比大于canvas的宽高比，那么图片高度缩放到和canvas的高度一致，宽度自适应
|
||||
drawOpt.height = canvasHeight
|
||||
drawOpt.width = zoomWidth(imageRatio, canvasHeight)
|
||||
} else {
|
||||
// 否则图片宽度缩放到和canvas的宽度一致，高度自适应
|
||||
drawOpt.width = canvasWidth
|
||||
drawOpt.height = zoomHeight(imageRatio, canvasWidth)
|
||||
}
|
||||
return
|
||||
}
|
||||
// 值为contain
|
||||
if (backgroundSizeValueArr[0] === 'contain') {
|
||||
if (imageRatio > canvasRatio) {
|
||||
// 图片的宽高比大于canvas的宽高比，那么图片宽度缩放到和canvas的宽度一致，高度自适应
|
||||
drawOpt.width = canvasWidth
|
||||
drawOpt.height = zoomHeight(imageRatio, canvasWidth)
|
||||
} else {
|
||||
// 否则图片高度缩放到和canvas的高度一致，宽度自适应
|
||||
drawOpt.height = canvasHeight
|
||||
drawOpt.width = zoomWidth(imageRatio, canvasHeight)
|
||||
}
|
||||
return
|
||||
}
|
||||
// 图片宽度
|
||||
let newNumberWidth = -1
|
||||
if (backgroundSizeValueArr[0]) {
|
||||
if (Array.isArray(backgroundSizeValueArr[0])) {
|
||||
// 数字+单位类型
|
||||
if (backgroundSizeValueArr[0][1] === '%') {
|
||||
// %单位
|
||||
drawOpt.width = (backgroundSizeValueArr[0][0] / 100) * canvasWidth
|
||||
newNumberWidth = drawOpt.width
|
||||
} else {
|
||||
// 其他都认为是px单位
|
||||
drawOpt.width = backgroundSizeValueArr[0][0]
|
||||
newNumberWidth = backgroundSizeValueArr[0][0]
|
||||
}
|
||||
} else if (backgroundSizeValueArr[0] === 'auto') {
|
||||
// auto类型，那么根据设置的新高度以图片原宽高比进行自适应
|
||||
if (backgroundSizeValueArr[1]) {
|
||||
if (backgroundSizeValueArr[1][1] === '%') {
|
||||
// 高度为%单位
|
||||
drawOpt.width = zoomWidth(
|
||||
imageRatio,
|
||||
(backgroundSizeValueArr[1][0] / 100) * canvasHeight
|
||||
)
|
||||
} else {
|
||||
// 其他都认为是px单位
|
||||
drawOpt.width = zoomWidth(imageRatio, backgroundSizeValueArr[1][0])
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 设置了图片高度
|
||||
if (backgroundSizeValueArr[1] && Array.isArray(backgroundSizeValueArr[1])) {
|
||||
// 数字+单位类型
|
||||
if (backgroundSizeValueArr[1][1] === '%') {
|
||||
// 高度为%单位
|
||||
drawOpt.height = (backgroundSizeValueArr[1][0] / 100) * canvasHeight
|
||||
} else {
|
||||
// 其他都认为是px单位
|
||||
drawOpt.height = backgroundSizeValueArr[1][0]
|
||||
}
|
||||
} else if (newNumberWidth !== -1) {
|
||||
// 没有设置图片高度或者设置为auto，那么根据设置的新宽度以图片原宽高比进行自适应
|
||||
drawOpt.height = zoomHeight(imageRatio, newNumberWidth)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 模拟background-position
|
||||
const handleBackgroundPosition = ({
|
||||
backgroundPosition,
|
||||
drawOpt,
|
||||
imgWidth,
|
||||
imgHeight,
|
||||
canvasWidth,
|
||||
canvasHeight
|
||||
}) => {
|
||||
if (backgroundPosition) {
|
||||
// 将值转换成数组
|
||||
let backgroundPositionValueArr = getNumberValueFromStr(backgroundPosition)
|
||||
// 将关键词转为百分比
|
||||
backgroundPositionValueArr = backgroundPositionValueArr.map(item => {
|
||||
if (typeof item === 'string') {
|
||||
return keyWordToPercentageMap[item] !== undefined
|
||||
? [keyWordToPercentageMap[item], '%']
|
||||
: item
|
||||
}
|
||||
return item
|
||||
})
|
||||
if (Array.isArray(backgroundPositionValueArr[0])) {
|
||||
if (backgroundPositionValueArr.length === 1) {
|
||||
// 如果只设置了一个值，第二个默认为50%
|
||||
backgroundPositionValueArr.push([50, '%'])
|
||||
}
|
||||
// 水平位置
|
||||
if (backgroundPositionValueArr[0][1] === '%') {
|
||||
// 单位为%
|
||||
let canvasX = (backgroundPositionValueArr[0][0] / 100) * canvasWidth
|
||||
let imgX = (backgroundPositionValueArr[0][0] / 100) * imgWidth
|
||||
// 计算差值
|
||||
drawOpt.x = canvasX - imgX
|
||||
} else {
|
||||
// 其他单位默认都为px
|
||||
drawOpt.x = backgroundPositionValueArr[0][0]
|
||||
}
|
||||
// 垂直位置
|
||||
if (backgroundPositionValueArr[1][1] === '%') {
|
||||
// 单位为%
|
||||
let canvasY = (backgroundPositionValueArr[1][0] / 100) * canvasHeight
|
||||
let imgY = (backgroundPositionValueArr[1][0] / 100) * imgHeight
|
||||
// 计算差值
|
||||
drawOpt.y = canvasY - imgY
|
||||
} else {
|
||||
// 其他单位默认都为px
|
||||
drawOpt.y = backgroundPositionValueArr[1][0]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 模拟background-repeat
|
||||
const handleBackgroundRepeat = ({
|
||||
ctx,
|
||||
image,
|
||||
backgroundRepeat,
|
||||
drawOpt,
|
||||
imgWidth,
|
||||
imgHeight,
|
||||
canvasWidth,
|
||||
canvasHeight
|
||||
}) => {
|
||||
if (backgroundRepeat) {
|
||||
// 保存在handleBackgroundPosition中计算出来的x、y
|
||||
let ox = drawOpt.x
|
||||
let oy = drawOpt.y
|
||||
// 计算ox和oy能平铺的图片数量
|
||||
let oxRepeatNum = Math.ceil(ox / imgWidth)
|
||||
let oyRepeatNum = Math.ceil(oy / imgHeight)
|
||||
// 计算ox和oy第一张图片的位置
|
||||
let oxRepeatX = ox - oxRepeatNum * imgWidth
|
||||
let oxRepeatY = oy - oyRepeatNum * imgHeight
|
||||
// 将值转换成数组
|
||||
let backgroundRepeatValueArr = getNumberValueFromStr(backgroundRepeat)
|
||||
// 不处理
|
||||
if (
|
||||
backgroundRepeatValueArr[0] === 'no-repeat' ||
|
||||
(imgWidth >= canvasWidth && imgHeight >= canvasHeight)
|
||||
) {
|
||||
return
|
||||
}
|
||||
// 水平平铺
|
||||
if (backgroundRepeatValueArr[0] === 'repeat-x') {
|
||||
if (canvasWidth > imgWidth) {
|
||||
let x = oxRepeatX
|
||||
while (x < canvasWidth) {
|
||||
drawImage(ctx, image, {
|
||||
...drawOpt,
|
||||
x
|
||||
})
|
||||
x += imgWidth
|
||||
}
|
||||
return true
|
||||
}
|
||||
}
|
||||
// 垂直平铺
|
||||
if (backgroundRepeatValueArr[0] === 'repeat-y') {
|
||||
if (canvasHeight > imgHeight) {
|
||||
let y = oxRepeatY
|
||||
while (y < canvasHeight) {
|
||||
drawImage(ctx, image, {
|
||||
...drawOpt,
|
||||
y
|
||||
})
|
||||
y += imgHeight
|
||||
}
|
||||
return true
|
||||
}
|
||||
}
|
||||
// 平铺
|
||||
if (backgroundRepeatValueArr[0] === 'repeat') {
|
||||
let x = oxRepeatX
|
||||
while (x < canvasWidth) {
|
||||
if (canvasHeight > imgHeight) {
|
||||
let y = oxRepeatY
|
||||
while (y < canvasHeight) {
|
||||
drawImage(ctx, image, {
|
||||
...drawOpt,
|
||||
x,
|
||||
y
|
||||
})
|
||||
y += imgHeight
|
||||
}
|
||||
}
|
||||
x += imgWidth
|
||||
}
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 根据参数绘制图片
|
||||
const drawImage = (ctx, image, drawOpt) => {
|
||||
ctx.drawImage(
|
||||
image,
|
||||
drawOpt.sx,
|
||||
drawOpt.sy,
|
||||
drawOpt.swidth,
|
||||
drawOpt.sheight,
|
||||
drawOpt.x,
|
||||
drawOpt.y,
|
||||
drawOpt.width,
|
||||
drawOpt.height
|
||||
)
|
||||
}
|
||||
|
||||
const drawBackgroundImageToCanvas = (
|
||||
ctx,
|
||||
width,
|
||||
height,
|
||||
img,
|
||||
{ backgroundSize, backgroundPosition, backgroundRepeat },
|
||||
callback = () => {}
|
||||
) => {
|
||||
// 画布的长宽比
|
||||
let canvasRatio = width / height
|
||||
// 加载图片
|
||||
let image = new Image()
|
||||
image.src = img
|
||||
image.onload = () => {
|
||||
// 图片的宽度及长宽比
|
||||
let imgWidth = image.width
|
||||
let imgHeight = image.height
|
||||
let imageRatio = imgWidth / imgHeight
|
||||
// 绘制图片
|
||||
// drawImage方法的参数值
|
||||
let drawOpt = {
|
||||
sx: 0,
|
||||
sy: 0,
|
||||
swidth: imgWidth,
|
||||
sheight: imgHeight,
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: imgWidth,
|
||||
height: imgHeight
|
||||
}
|
||||
// 模拟background-size
|
||||
handleBackgroundSize({
|
||||
backgroundSize,
|
||||
drawOpt,
|
||||
imageRatio,
|
||||
canvasWidth: width,
|
||||
canvasHeight: height,
|
||||
canvasRatio
|
||||
})
|
||||
|
||||
// 模拟background-position
|
||||
handleBackgroundPosition({
|
||||
backgroundPosition,
|
||||
drawOpt,
|
||||
imgWidth: drawOpt.width,
|
||||
imgHeight: drawOpt.height,
|
||||
imageRatio,
|
||||
canvasWidth: width,
|
||||
canvasHeight: height,
|
||||
canvasRatio
|
||||
})
|
||||
|
||||
// 模拟background-repeat
|
||||
let notNeedDraw = handleBackgroundRepeat({
|
||||
ctx,
|
||||
image,
|
||||
backgroundRepeat,
|
||||
drawOpt,
|
||||
imgWidth: drawOpt.width,
|
||||
imgHeight: drawOpt.height,
|
||||
imageRatio,
|
||||
canvasWidth: width,
|
||||
canvasHeight: height,
|
||||
canvasRatio
|
||||
})
|
||||
|
||||
// 绘制图片
|
||||
if (!notNeedDraw) {
|
||||
drawImage(ctx, image, drawOpt)
|
||||
}
|
||||
|
||||
callback()
|
||||
}
|
||||
image.onerror = e => {
|
||||
callback(e)
|
||||
}
|
||||
}
|
||||
|
||||
export default drawBackgroundImageToCanvas
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user