优化:节点实例、样式实例不再保存主题配置,直接从mindMap实例上获取
This commit is contained in:
parent
d834b76d42
commit
d412ae8cce
@ -21,10 +21,8 @@ class Node {
|
|||||||
this.renderer = opt.renderer
|
this.renderer = opt.renderer
|
||||||
// 渲染器
|
// 渲染器
|
||||||
this.draw = opt.draw || null
|
this.draw = opt.draw || null
|
||||||
// 主题配置
|
|
||||||
this.themeConfig = this.mindMap.themeConfig
|
|
||||||
// 样式实例
|
// 样式实例
|
||||||
this.style = new Style(this, this.themeConfig)
|
this.style = new Style(this)
|
||||||
// 形状实例
|
// 形状实例
|
||||||
this.shapeInstance = new Shape(this)
|
this.shapeInstance = new Shape(this)
|
||||||
this.shapePadding = {
|
this.shapePadding = {
|
||||||
@ -110,15 +108,6 @@ class Node {
|
|||||||
this._top = val
|
this._top = val
|
||||||
}
|
}
|
||||||
|
|
||||||
// 更新主题配置
|
|
||||||
|
|
||||||
updateThemeConfig() {
|
|
||||||
// 主题配置
|
|
||||||
this.themeConfig = this.mindMap.themeConfig
|
|
||||||
// 样式实例
|
|
||||||
this.style.updateThemeConfig(this.themeConfig)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 复位部分布局时会重新设置的数据
|
// 复位部分布局时会重新设置的数据
|
||||||
|
|
||||||
reset() {
|
reset() {
|
||||||
@ -342,8 +331,8 @@ class Node {
|
|||||||
return resizeImgSize(
|
return resizeImgSize(
|
||||||
this.nodeData.data.imageSize.width,
|
this.nodeData.data.imageSize.width,
|
||||||
this.nodeData.data.imageSize.height,
|
this.nodeData.data.imageSize.height,
|
||||||
this.themeConfig.imgMaxWidth,
|
this.mindMap.themeConfig.imgMaxWidth,
|
||||||
this.themeConfig.imgMaxHeight
|
this.mindMap.themeConfig.imgMaxHeight
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -354,7 +343,7 @@ class Node {
|
|||||||
if (!_data.icon || _data.icon.length <= 0) {
|
if (!_data.icon || _data.icon.length <= 0) {
|
||||||
return []
|
return []
|
||||||
}
|
}
|
||||||
let iconSize = this.themeConfig.iconSize
|
let iconSize = this.mindMap.themeConfig.iconSize
|
||||||
return _data.icon.map(item => {
|
return _data.icon.map(item => {
|
||||||
return {
|
return {
|
||||||
node: SVG(iconsSvg.getNodeIconListIcon(item)).size(iconSize, iconSize),
|
node: SVG(iconsSvg.getNodeIconListIcon(item)).size(iconSize, iconSize),
|
||||||
@ -458,7 +447,7 @@ class Node {
|
|||||||
if (!hyperlink) {
|
if (!hyperlink) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
let iconSize = this.themeConfig.iconSize
|
let iconSize = this.mindMap.themeConfig.iconSize
|
||||||
let node = new SVG()
|
let node = new SVG()
|
||||||
// 超链接节点
|
// 超链接节点
|
||||||
let a = new A().to(hyperlink).target('_blank')
|
let a = new A().to(hyperlink).target('_blank')
|
||||||
@ -515,7 +504,7 @@ class Node {
|
|||||||
if (!this.nodeData.data.note) {
|
if (!this.nodeData.data.note) {
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
let iconSize = this.themeConfig.iconSize
|
let iconSize = this.mindMap.themeConfig.iconSize
|
||||||
let node = new SVG().attr('cursor', 'pointer')
|
let node = new SVG().attr('cursor', 'pointer')
|
||||||
// 透明的层,用来作为鼠标区域
|
// 透明的层,用来作为鼠标区域
|
||||||
node.add(new Rect().size(iconSize, iconSize).fill({ color: 'transparent' }))
|
node.add(new Rect().size(iconSize, iconSize).fill({ color: 'transparent' }))
|
||||||
@ -571,7 +560,7 @@ class Node {
|
|||||||
|
|
||||||
getShape() {
|
getShape() {
|
||||||
// 节点使用功能横线风格的话不支持设置形状,直接使用默认的矩形
|
// 节点使用功能横线风格的话不支持设置形状,直接使用默认的矩形
|
||||||
return this.themeConfig.nodeUseLineStyle
|
return this.mindMap.themeConfig.nodeUseLineStyle
|
||||||
? 'rectangle'
|
? 'rectangle'
|
||||||
: this.style.getStyle('shape', false, false)
|
: this.style.getStyle('shape', false, false)
|
||||||
}
|
}
|
||||||
@ -754,7 +743,7 @@ class Node {
|
|||||||
|
|
||||||
// 更新节点
|
// 更新节点
|
||||||
|
|
||||||
update(layout = false) {
|
update(isLayout = false) {
|
||||||
if (!this.group) {
|
if (!this.group) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
@ -769,7 +758,7 @@ class Node {
|
|||||||
}
|
}
|
||||||
this.renderGeneralization()
|
this.renderGeneralization()
|
||||||
let t = this.group.transform()
|
let t = this.group.transform()
|
||||||
if (!layout) {
|
if (!isLayout) {
|
||||||
this.group
|
this.group
|
||||||
.animate(300)
|
.animate(300)
|
||||||
.translate(
|
.translate(
|
||||||
|
|||||||
@ -21,34 +21,28 @@ class Style {
|
|||||||
|
|
||||||
// 构造函数
|
// 构造函数
|
||||||
|
|
||||||
constructor(ctx, themeConfig) {
|
constructor(ctx) {
|
||||||
this.ctx = ctx
|
this.ctx = ctx
|
||||||
this.themeConfig = themeConfig
|
|
||||||
}
|
|
||||||
|
|
||||||
// 更新主题配置
|
|
||||||
|
|
||||||
updateThemeConfig(themeConfig) {
|
|
||||||
this.themeConfig = themeConfig
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 合并样式
|
// 合并样式
|
||||||
|
|
||||||
merge(prop, root, isActive) {
|
merge(prop, root, isActive) {
|
||||||
|
let themeConfig = this.ctx.mindMap.themeConfig
|
||||||
// 三级及以下节点
|
// 三级及以下节点
|
||||||
let defaultConfig = this.themeConfig.node
|
let defaultConfig = themeConfig.node
|
||||||
if (root || rootProp.includes(prop)) {
|
if (root || rootProp.includes(prop)) {
|
||||||
// 直接使用最外层样式
|
// 直接使用最外层样式
|
||||||
defaultConfig = this.themeConfig
|
defaultConfig = themeConfig
|
||||||
} else if (this.ctx.isGeneralization) {
|
} else if (this.ctx.isGeneralization) {
|
||||||
// 概要节点
|
// 概要节点
|
||||||
defaultConfig = this.themeConfig.generalization
|
defaultConfig = themeConfig.generalization
|
||||||
} else if (this.ctx.layerIndex === 0) {
|
} else if (this.ctx.layerIndex === 0) {
|
||||||
// 根节点
|
// 根节点
|
||||||
defaultConfig = this.themeConfig.root
|
defaultConfig = themeConfig.root
|
||||||
} else if (this.ctx.layerIndex === 1) {
|
} else if (this.ctx.layerIndex === 1) {
|
||||||
// 二级节点
|
// 二级节点
|
||||||
defaultConfig = this.themeConfig.second
|
defaultConfig = themeConfig.second
|
||||||
}
|
}
|
||||||
// 激活状态
|
// 激活状态
|
||||||
if (isActive !== undefined ? isActive : this.ctx.nodeData.data.isActive) {
|
if (isActive !== undefined ? isActive : this.ctx.nodeData.data.isActive) {
|
||||||
@ -96,7 +90,7 @@ class Style {
|
|||||||
if (
|
if (
|
||||||
!this.ctx.isRoot &&
|
!this.ctx.isRoot &&
|
||||||
!this.ctx.isGeneralization &&
|
!this.ctx.isGeneralization &&
|
||||||
this.themeConfig.nodeUseLineStyle &&
|
this.ctx.mindMap.themeConfig.nodeUseLineStyle &&
|
||||||
!this.ctx.nodeData.data.isActive
|
!this.ctx.nodeData.data.isActive
|
||||||
) {
|
) {
|
||||||
return
|
return
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user