mirror of
https://github.com/wanglin2/mind-map.git
synced 2026-02-27 05:17:47 +08:00
优化：getSize以后不需要调用renderNode方法，直接layout即可
This commit is contained in:
wanglin2
parent
d412ae8cce
commit
fcfcb1c3d1
@ -9,7 +9,6 @@ import iconsSvg from './svg/icons'
|
||||
|
||||
class Node {
|
||||
// 构造函数
|
||||
|
||||
constructor(opt = {}) {
|
||||
// 节点数据
|
||||
this.nodeData = this.handleData(opt.data || {})
|
||||
@ -87,7 +86,6 @@ class Node {
|
||||
// 初始渲染
|
||||
this.initRender = true
|
||||
// 初始化
|
||||
// this.createNodeData()
|
||||
this.getSize()
|
||||
}
|
||||
|
||||
@ -109,7 +107,6 @@ class Node {
|
||||
}
|
||||
|
||||
// 复位部分布局时会重新设置的数据
|
||||
|
||||
reset() {
|
||||
this.children = []
|
||||
this.parent = null
|
||||
@ -120,7 +117,6 @@ class Node {
|
||||
}
|
||||
|
||||
// 处理数据
|
||||
|
||||
handleData(data) {
|
||||
data.data.expand = data.data.expand === false ? false : true
|
||||
data.data.isActive = data.data.isActive === true ? true : false
|
||||
@ -129,13 +125,11 @@ class Node {
|
||||
}
|
||||
|
||||
// 检查节点是否存在自定义数据
|
||||
|
||||
hasCustomPosition() {
|
||||
return this.customLeft !== undefined && this.customTop !== undefined
|
||||
}
|
||||
|
||||
// 检查节点是否存在自定义位置的祖先节点
|
||||
|
||||
ancestorHasCustomPosition() {
|
||||
let node = this
|
||||
while (node) {
|
||||
@ -148,13 +142,11 @@ class Node {
|
||||
}
|
||||
|
||||
// 添加子节点
|
||||
|
||||
addChildren(node) {
|
||||
this.children.push(node)
|
||||
}
|
||||
|
||||
// 创建节点的各个内容对象数据
|
||||
|
||||
createNodeData() {
|
||||
this._imgData = this.createImgNode()
|
||||
this._iconData = this.createIconNode()
|
||||
@ -166,7 +158,6 @@ class Node {
|
||||
}
|
||||
|
||||
// 解绑所有事件
|
||||
|
||||
removeAllEvent() {
|
||||
if (this._noteData) {
|
||||
this._noteData.node.off(['mouseover', 'mouseout'])
|
||||
@ -188,7 +179,6 @@ class Node {
|
||||
}
|
||||
|
||||
// 移除节点内容
|
||||
|
||||
removeAllNode() {
|
||||
// 节点内的内容
|
||||
;[
|
||||
@ -223,8 +213,8 @@ class Node {
|
||||
}
|
||||
|
||||
// 计算节点的宽高
|
||||
|
||||
getSize() {
|
||||
this.removeAllEvent()
|
||||
this.removeAllNode()
|
||||
this.createNodeData()
|
||||
let { width, height } = this.getNodeRect()
|
||||
@ -236,7 +226,6 @@ class Node {
|
||||
}
|
||||
|
||||
// 计算节点尺寸信息
|
||||
|
||||
getNodeRect() {
|
||||
// 宽高
|
||||
let imgContentWidth = 0
|
||||
@ -304,7 +293,6 @@ class Node {
|
||||
}
|
||||
|
||||
// 创建图片节点
|
||||
|
||||
createImgNode() {
|
||||
let img = this.nodeData.data.image
|
||||
if (!img) {
|
||||
@ -326,7 +314,6 @@ class Node {
|
||||
}
|
||||
|
||||
// 获取图片显示宽高
|
||||
|
||||
getImgShowSize() {
|
||||
return resizeImgSize(
|
||||
this.nodeData.data.imageSize.width,
|
||||
@ -337,7 +324,6 @@ class Node {
|
||||
}
|
||||
|
||||
// 创建icon节点
|
||||
|
||||
createIconNode() {
|
||||
let _data = this.nodeData.data
|
||||
if (!_data.icon || _data.icon.length <= 0) {
|
||||
@ -384,7 +370,6 @@ class Node {
|
||||
}
|
||||
|
||||
// 创建文本节点
|
||||
|
||||
createTextNode() {
|
||||
if (this.nodeData.data.richText) {
|
||||
return this.createRichTextNode()
|
||||
@ -472,7 +457,6 @@ class Node {
|
||||
}
|
||||
|
||||
// 创建标签节点
|
||||
|
||||
createTagNode() {
|
||||
let tagData = this.nodeData.data.tag
|
||||
if (!tagData || tagData.length <= 0) {
|
||||
@ -499,7 +483,6 @@ class Node {
|
||||
}
|
||||
|
||||
// 创建备注节点
|
||||
|
||||
createNoteNode() {
|
||||
if (!this.nodeData.data.note) {
|
||||
return null
|
||||
@ -557,7 +540,6 @@ class Node {
|
||||
}
|
||||
|
||||
// 获取节点形状
|
||||
|
||||
getShape() {
|
||||
// 节点使用功能横线风格的话不支持设置形状，直接使用默认的矩形
|
||||
return this.mindMap.themeConfig.nodeUseLineStyle
|
||||
@ -566,7 +548,6 @@ class Node {
|
||||
}
|
||||
|
||||
// 定位节点内容
|
||||
|
||||
layout() {
|
||||
let { width, textContentItemMargin } = this
|
||||
let { paddingY } = this.getPaddingVale()
|
||||
@ -714,7 +695,6 @@ class Node {
|
||||
}
|
||||
|
||||
// 激活节点
|
||||
|
||||
active(e) {
|
||||
if (this.mindMap.opt.readonly) {
|
||||
return
|
||||
@ -731,7 +711,6 @@ class Node {
|
||||
}
|
||||
|
||||
// 渲染节点到画布，会移除旧的，创建新的
|
||||
|
||||
renderNode() {
|
||||
// 连线
|
||||
this.renderLine()
|
||||
@ -742,7 +721,6 @@ class Node {
|
||||
}
|
||||
|
||||
// 更新节点
|
||||
|
||||
update(isLayout = false) {
|
||||
if (!this.group) {
|
||||
return
|
||||
@ -774,7 +752,6 @@ class Node {
|
||||
}
|
||||
|
||||
// 递归渲染
|
||||
|
||||
render(callback = () => {}) {
|
||||
// 节点
|
||||
if (this.initRender) {
|
||||
@ -818,7 +795,6 @@ class Node {
|
||||
}
|
||||
|
||||
// 递归删除
|
||||
|
||||
remove() {
|
||||
this.initRender = true
|
||||
this.removeAllEvent()
|
||||
@ -837,7 +813,6 @@ class Node {
|
||||
}
|
||||
|
||||
// 隐藏节点
|
||||
|
||||
hide() {
|
||||
this.group.hide()
|
||||
this.hideGeneralization()
|
||||
@ -858,7 +833,6 @@ class Node {
|
||||
}
|
||||
|
||||
// 显示节点
|
||||
|
||||
show() {
|
||||
if (!this.group) {
|
||||
return
|
||||
@ -882,7 +856,6 @@ class Node {
|
||||
}
|
||||
|
||||
// 连线
|
||||
|
||||
renderLine(deep = false) {
|
||||
if (this.nodeData.data.expand === false) {
|
||||
return
|
||||
@ -919,7 +892,6 @@ class Node {
|
||||
}
|
||||
|
||||
// 设置连线样式
|
||||
|
||||
styleLine(line, node) {
|
||||
let width =
|
||||
node.getSelfInhertStyle('lineWidth') || node.getStyle('lineWidth', true)
|
||||
@ -936,7 +908,6 @@ class Node {
|
||||
}
|
||||
|
||||
// 移除连线
|
||||
|
||||
removeLine() {
|
||||
this._lines.forEach(line => {
|
||||
line.remove()
|
||||
@ -945,13 +916,11 @@ class Node {
|
||||
}
|
||||
|
||||
// 检查是否存在概要
|
||||
|
||||
checkHasGeneralization() {
|
||||
return !!this.nodeData.data.generalization
|
||||
}
|
||||
|
||||
// 创建概要节点
|
||||
|
||||
createGeneralizationNode() {
|
||||
if (this.isGeneralization || !this.checkHasGeneralization()) {
|
||||
return
|
||||
@ -980,14 +949,12 @@ class Node {
|
||||
}
|
||||
|
||||
// 更新概要节点
|
||||
|
||||
updateGeneralization() {
|
||||
this.removeGeneralization()
|
||||
this.createGeneralizationNode()
|
||||
}
|
||||
|
||||
// 渲染概要节点
|
||||
|
||||
renderGeneralization() {
|
||||
if (this.isGeneralization) {
|
||||
return
|
||||
@ -1013,7 +980,6 @@ class Node {
|
||||
}
|
||||
|
||||
// 删除概要节点
|
||||
|
||||
removeGeneralization() {
|
||||
if (this._generalizationLine) {
|
||||
this._generalizationLine.remove()
|
||||
@ -1034,7 +1000,6 @@ class Node {
|
||||
}
|
||||
|
||||
// 隐藏概要节点
|
||||
|
||||
hideGeneralization() {
|
||||
if (this._generalizationLine) {
|
||||
this._generalizationLine.hide()
|
||||
@ -1045,7 +1010,6 @@ class Node {
|
||||
}
|
||||
|
||||
// 显示概要节点
|
||||
|
||||
showGeneralization() {
|
||||
if (this._generalizationLine) {
|
||||
this._generalizationLine.show()
|
||||
@ -1056,7 +1020,6 @@ class Node {
|
||||
}
|
||||
|
||||
// 创建或更新展开收缩按钮内容
|
||||
|
||||
updateExpandBtnNode() {
|
||||
if (this._expandBtn) {
|
||||
this._expandBtn.clear()
|
||||
@ -1076,7 +1039,6 @@ class Node {
|
||||
}
|
||||
|
||||
// 更新展开收缩按钮位置
|
||||
|
||||
updateExpandBtnPos() {
|
||||
if (!this._expandBtn) {
|
||||
return
|
||||
@ -1085,7 +1047,6 @@ class Node {
|
||||
}
|
||||
|
||||
// 展开收缩按钮
|
||||
|
||||
renderExpandBtn() {
|
||||
if (
|
||||
!this.nodeData.children ||
|
||||
@ -1123,7 +1084,6 @@ class Node {
|
||||
}
|
||||
|
||||
// 移除展开收缩按钮
|
||||
|
||||
removeExpandBtn() {
|
||||
if (this._expandBtn) {
|
||||
this._expandBtn.off(['mouseover', 'mouseout', 'click'])
|
||||
@ -1134,7 +1094,6 @@ class Node {
|
||||
}
|
||||
|
||||
// 检测当前节点是否是某个节点的祖先节点
|
||||
|
||||
isParent(node) {
|
||||
if (this === node) {
|
||||
return false
|
||||
@ -1150,7 +1109,6 @@ class Node {
|
||||
}
|
||||
|
||||
// 检测当前节点是否是某个节点的兄弟节点
|
||||
|
||||
isBrother(node) {
|
||||
if (!this.parent || this === node) {
|
||||
return false
|
||||
@ -1161,7 +1119,6 @@ class Node {
|
||||
}
|
||||
|
||||
// 获取padding值
|
||||
|
||||
getPaddingVale() {
|
||||
return {
|
||||
paddingX: this.getStyle('paddingX', true, this.nodeData.data.isActive),
|
||||
@ -1170,20 +1127,17 @@ class Node {
|
||||
}
|
||||
|
||||
// 获取某个样式
|
||||
|
||||
getStyle(prop, root, isActive) {
|
||||
let v = this.style.merge(prop, root, isActive)
|
||||
return v === undefined ? '' : v
|
||||
}
|
||||
|
||||
// 获取自定义样式
|
||||
|
||||
getSelfStyle(prop) {
|
||||
return this.style.getSelfStyle(prop)
|
||||
}
|
||||
|
||||
// 获取最近一个存在自身自定义样式的祖先节点的自定义样式
|
||||
|
||||
getParentSelfStyle(prop) {
|
||||
if (this.parent) {
|
||||
return (
|
||||
@ -1194,7 +1148,6 @@ class Node {
|
||||
}
|
||||
|
||||
// 获取自身可继承的自定义样式
|
||||
|
||||
getSelfInhertStyle(prop) {
|
||||
return (
|
||||
this.getSelfStyle(prop) || // 自身
|
||||
@ -1203,61 +1156,51 @@ class Node {
|
||||
}
|
||||
|
||||
// 修改某个样式
|
||||
|
||||
setStyle(prop, value, isActive) {
|
||||
this.mindMap.execCommand('SET_NODE_STYLE', this, prop, value, isActive)
|
||||
}
|
||||
|
||||
// 获取数据
|
||||
|
||||
getData(key) {
|
||||
return key ? this.nodeData.data[key] || '' : this.nodeData.data
|
||||
}
|
||||
|
||||
// 设置数据
|
||||
|
||||
setData(data = {}) {
|
||||
this.mindMap.execCommand('SET_NODE_DATA', this, data)
|
||||
}
|
||||
|
||||
// 设置文本
|
||||
|
||||
setText(text, richText) {
|
||||
this.mindMap.execCommand('SET_NODE_TEXT', this, text, richText)
|
||||
}
|
||||
|
||||
// 设置图片
|
||||
|
||||
setImage(imgData) {
|
||||
this.mindMap.execCommand('SET_NODE_IMAGE', this, imgData)
|
||||
}
|
||||
|
||||
// 设置图标
|
||||
|
||||
setIcon(icons) {
|
||||
this.mindMap.execCommand('SET_NODE_ICON', this, icons)
|
||||
}
|
||||
|
||||
// 设置超链接
|
||||
|
||||
setHyperlink(link, title) {
|
||||
this.mindMap.execCommand('SET_NODE_HYPERLINK', this, link, title)
|
||||
}
|
||||
|
||||
// 设置备注
|
||||
|
||||
setNote(note) {
|
||||
this.mindMap.execCommand('SET_NODE_NOTE', this, note)
|
||||
}
|
||||
|
||||
// 设置标签
|
||||
|
||||
setTag(tag) {
|
||||
this.mindMap.execCommand('SET_NODE_TAG', this, tag)
|
||||
}
|
||||
|
||||
// 设置形状
|
||||
|
||||
setShape(shape) {
|
||||
this.mindMap.execCommand('SET_NODE_SHAPE', this, shape)
|
||||
}
|
||||
|
||||
@ -515,7 +515,7 @@ class Render {
|
||||
this.mindMap.render(() => {
|
||||
if (nodeLayerChanged) {
|
||||
node.getSize()
|
||||
node.renderNode()
|
||||
node.layout()
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -555,7 +555,7 @@ class Render {
|
||||
this.mindMap.render(() => {
|
||||
if (nodeLayerChanged) {
|
||||
node.getSize()
|
||||
node.renderNode()
|
||||
node.layout()
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -964,7 +964,7 @@ class Render {
|
||||
setNodeDataRender(node, data) {
|
||||
this.setNodeData(node, data)
|
||||
let changed = node.getSize()
|
||||
node.renderNode()
|
||||
node.layout()
|
||||
if (changed) {
|
||||
if (node.isGeneralization) {
|
||||
// 概要节点
|
||||
|
||||
@ -2,10 +2,8 @@ import { tagColorList } from './utils/constant'
|
||||
const rootProp = ['paddingX', 'paddingY']
|
||||
|
||||
// 样式类
|
||||
|
||||
class Style {
|
||||
// 设置背景样式
|
||||
|
||||
static setBackgroundStyle(el, themeConfig) {
|
||||
let { backgroundColor, backgroundImage, backgroundRepeat, backgroundPosition, backgroundSize } = themeConfig
|
||||
el.style.backgroundColor = backgroundColor
|
||||
@ -20,13 +18,11 @@ class Style {
|
||||
}
|
||||
|
||||
// 构造函数
|
||||
|
||||
constructor(ctx) {
|
||||
this.ctx = ctx
|
||||
}
|
||||
|
||||
// 合并样式
|
||||
|
||||
merge(prop, root, isActive) {
|
||||
let themeConfig = this.ctx.mindMap.themeConfig
|
||||
// 三级及以下节点
|
||||
@ -62,26 +58,22 @@ class Style {
|
||||
}
|
||||
|
||||
// 获取某个样式值
|
||||
|
||||
getStyle(prop, root, isActive) {
|
||||
return this.merge(prop, root, isActive)
|
||||
}
|
||||
|
||||
// 获取自身自定义样式
|
||||
|
||||
getSelfStyle(prop) {
|
||||
return this.ctx.nodeData.data[prop]
|
||||
}
|
||||
|
||||
// 矩形
|
||||
|
||||
rect(node) {
|
||||
this.shape(node)
|
||||
node.radius(this.merge('borderRadius'))
|
||||
}
|
||||
|
||||
// 矩形外的其他形状
|
||||
|
||||
shape(node) {
|
||||
node.fill({
|
||||
color: this.merge('fillColor')
|
||||
@ -103,7 +95,6 @@ class Style {
|
||||
}
|
||||
|
||||
// 文字
|
||||
|
||||
text(node) {
|
||||
node
|
||||
.fill({
|
||||
@ -129,7 +120,6 @@ class Style {
|
||||
}
|
||||
|
||||
// html文字节点
|
||||
|
||||
domText(node, fontSizeScale = 1) {
|
||||
node.style.fontFamily = this.merge('fontFamily')
|
||||
node.style.fontSize = this.merge('fontSize') * fontSizeScale + 'px'
|
||||
@ -139,7 +129,6 @@ class Style {
|
||||
}
|
||||
|
||||
// 标签文字
|
||||
|
||||
tagText(node, index) {
|
||||
node
|
||||
.fill({
|
||||
@ -151,7 +140,6 @@ class Style {
|
||||
}
|
||||
|
||||
// 标签矩形
|
||||
|
||||
tagRect(node, index) {
|
||||
node.fill({
|
||||
color: tagColorList[index].background
|
||||
@ -159,7 +147,6 @@ class Style {
|
||||
}
|
||||
|
||||
// 内置图标
|
||||
|
||||
iconNode(node) {
|
||||
node.attr({
|
||||
fill: this.merge('color')
|
||||
@ -167,13 +154,11 @@ class Style {
|
||||
}
|
||||
|
||||
// 连线
|
||||
|
||||
line(node, { width, color, dasharray } = {}) {
|
||||
node.stroke({ width, color, dasharray }).fill({ color: 'none' })
|
||||
}
|
||||
|
||||
// 概要连线
|
||||
|
||||
generalizationLine(node) {
|
||||
node
|
||||
.stroke({
|
||||
@ -184,7 +169,6 @@ class Style {
|
||||
}
|
||||
|
||||
// 按钮
|
||||
|
||||
iconBtn(node, fillNode) {
|
||||
node.fill({ color: '#808080' })
|
||||
fillNode.fill({ color: '#fff' })
|
||||
|
||||
Loading…
Reference in New Issue
Block a user