Feat:支持不显示展开收起按钮的实例化选项
This commit is contained in:
parent
d82cedcbdd
commit
1cd4705ad8
@ -86,6 +86,8 @@ export const defaultOpt = {
|
|||||||
maxHistoryCount: 500,
|
maxHistoryCount: 500,
|
||||||
// 是否一直显示节点的展开收起按钮,默认为鼠标移上去和激活时才显示
|
// 是否一直显示节点的展开收起按钮,默认为鼠标移上去和激活时才显示
|
||||||
alwaysShowExpandBtn: false,
|
alwaysShowExpandBtn: false,
|
||||||
|
// 不显示展开收起按钮,优先级比alwaysShowExpandBtn配置高
|
||||||
|
notShowExpandBtn: false,
|
||||||
// 扩展节点可插入的图标
|
// 扩展节点可插入的图标
|
||||||
iconList: [
|
iconList: [
|
||||||
// {
|
// {
|
||||||
@ -232,9 +234,9 @@ export const defaultOpt = {
|
|||||||
openPerformance: false,
|
openPerformance: false,
|
||||||
// 性能优化模式配置
|
// 性能优化模式配置
|
||||||
performanceConfig: {
|
performanceConfig: {
|
||||||
time: 250,// 当视图改变后多久刷新一次节点,单位:ms,
|
time: 250, // 当视图改变后多久刷新一次节点,单位:ms,
|
||||||
padding: 100,// 超出画布四周指定范围内依旧渲染节点
|
padding: 100, // 超出画布四周指定范围内依旧渲染节点
|
||||||
removeNodeWhenOutCanvas: true,// 节点移除画布可视区域后从画布删除
|
removeNodeWhenOutCanvas: true // 节点移除画布可视区域后从画布删除
|
||||||
},
|
},
|
||||||
|
|
||||||
// 【Select插件】
|
// 【Select插件】
|
||||||
|
|||||||
@ -688,25 +688,28 @@ class Node {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
this.updateNodeActiveClass()
|
this.updateNodeActiveClass()
|
||||||
let { alwaysShowExpandBtn } = this.mindMap.opt
|
const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
|
||||||
const childrenLength = this.nodeData.children.length
|
// 不显示展开收起按钮则不需要处理
|
||||||
if (alwaysShowExpandBtn) {
|
if (!notShowExpandBtn) {
|
||||||
// 需要移除展开收缩按钮
|
const childrenLength = this.nodeData.children.length
|
||||||
if (this._expandBtn && childrenLength <= 0) {
|
if (alwaysShowExpandBtn) {
|
||||||
this.removeExpandBtn()
|
// 需要移除展开收缩按钮
|
||||||
|
if (this._expandBtn && childrenLength <= 0) {
|
||||||
|
this.removeExpandBtn()
|
||||||
|
} else {
|
||||||
|
// 更新展开收起按钮
|
||||||
|
this.renderExpandBtn()
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
// 更新展开收起按钮
|
let { isActive, expand } = this.getData()
|
||||||
this.renderExpandBtn()
|
// 展开状态且非激活状态,且当前鼠标不在它上面,才隐藏
|
||||||
}
|
if (childrenLength <= 0) {
|
||||||
} else {
|
this.removeExpandBtn()
|
||||||
let { isActive, expand } = this.getData()
|
} else if (expand && !isActive && !this._isMouseenter) {
|
||||||
// 展开状态且非激活状态,且当前鼠标不在它上面,才隐藏
|
this.hideExpandBtn()
|
||||||
if (childrenLength <= 0) {
|
} else {
|
||||||
this.removeExpandBtn()
|
this.showExpandBtn()
|
||||||
} else if (expand && !isActive && !this._isMouseenter) {
|
}
|
||||||
this.hideExpandBtn()
|
|
||||||
} else {
|
|
||||||
this.showExpandBtn()
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 更新概要
|
// 更新概要
|
||||||
|
|||||||
@ -148,7 +148,8 @@ function removeExpandBtn() {
|
|||||||
|
|
||||||
// 显示展开收起按钮
|
// 显示展开收起按钮
|
||||||
function showExpandBtn() {
|
function showExpandBtn() {
|
||||||
if (this.mindMap.opt.alwaysShowExpandBtn) return
|
const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
|
||||||
|
if (alwaysShowExpandBtn || notShowExpandBtn) return
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.renderExpandBtn()
|
this.renderExpandBtn()
|
||||||
}, 0)
|
}, 0)
|
||||||
@ -156,7 +157,8 @@ function showExpandBtn() {
|
|||||||
|
|
||||||
// 隐藏展开收起按钮
|
// 隐藏展开收起按钮
|
||||||
function hideExpandBtn() {
|
function hideExpandBtn() {
|
||||||
if (this.mindMap.opt.alwaysShowExpandBtn || this._isMouseenter) return
|
const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
|
||||||
|
if (alwaysShowExpandBtn || this._isMouseenter || notShowExpandBtn) return
|
||||||
// 非激活状态且展开状态鼠标移出才隐藏按钮
|
// 非激活状态且展开状态鼠标移出才隐藏按钮
|
||||||
let { isActive, expand } = this.getData()
|
let { isActive, expand } = this.getData()
|
||||||
if (!isActive && expand) {
|
if (!isActive && expand) {
|
||||||
|
|||||||
@ -10,8 +10,9 @@ function renderExpandBtnPlaceholderRect() {
|
|||||||
) {
|
) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
// 默认显示展开按钮的情况下也不需要渲染
|
// 默认显示展开按钮的情况下或不显示展开收起按钮的情况下不需要渲染
|
||||||
if (!this.mindMap.opt.alwaysShowExpandBtn) {
|
const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
|
||||||
|
if (!alwaysShowExpandBtn && !notShowExpandBtn) {
|
||||||
let { width, height } = this
|
let { width, height } = this
|
||||||
if (!this._unVisibleRectRegionNode) {
|
if (!this._unVisibleRectRegionNode) {
|
||||||
this._unVisibleRectRegionNode = new Rect()
|
this._unVisibleRectRegionNode = new Rect()
|
||||||
|
|||||||
@ -204,7 +204,8 @@ class CatalogOrganization extends Base {
|
|||||||
return []
|
return []
|
||||||
}
|
}
|
||||||
let { left, top, width, height, expandBtnSize } = node
|
let { left, top, width, height, expandBtnSize } = node
|
||||||
if (!this.mindMap.opt.alwaysShowExpandBtn) {
|
const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
|
||||||
|
if (!alwaysShowExpandBtn || notShowExpandBtn) {
|
||||||
expandBtnSize = 0
|
expandBtnSize = 0
|
||||||
}
|
}
|
||||||
let len = node.children.length
|
let len = node.children.length
|
||||||
|
|||||||
@ -233,7 +233,8 @@ class Fishbone extends Base {
|
|||||||
return []
|
return []
|
||||||
}
|
}
|
||||||
let { top, height, expandBtnSize } = node
|
let { top, height, expandBtnSize } = node
|
||||||
if (!this.mindMap.opt.alwaysShowExpandBtn) {
|
const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
|
||||||
|
if (!alwaysShowExpandBtn || notShowExpandBtn) {
|
||||||
expandBtnSize = 0
|
expandBtnSize = 0
|
||||||
}
|
}
|
||||||
let len = node.children.length
|
let len = node.children.length
|
||||||
|
|||||||
@ -174,7 +174,8 @@ class LogicalStructure extends Base {
|
|||||||
return []
|
return []
|
||||||
}
|
}
|
||||||
let { left, top, width, height, expandBtnSize } = node
|
let { left, top, width, height, expandBtnSize } = node
|
||||||
if (!this.mindMap.opt.alwaysShowExpandBtn) {
|
const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
|
||||||
|
if (!alwaysShowExpandBtn || notShowExpandBtn) {
|
||||||
expandBtnSize = 0
|
expandBtnSize = 0
|
||||||
}
|
}
|
||||||
let marginX = this.getMarginX(node.layerIndex + 1)
|
let marginX = this.getMarginX(node.layerIndex + 1)
|
||||||
@ -215,7 +216,8 @@ class LogicalStructure extends Base {
|
|||||||
return []
|
return []
|
||||||
}
|
}
|
||||||
let { left, top, width, height, expandBtnSize } = node
|
let { left, top, width, height, expandBtnSize } = node
|
||||||
if (!this.mindMap.opt.alwaysShowExpandBtn) {
|
const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
|
||||||
|
if (!alwaysShowExpandBtn || notShowExpandBtn) {
|
||||||
expandBtnSize = 0
|
expandBtnSize = 0
|
||||||
}
|
}
|
||||||
const { nodeUseLineStyle } = this.mindMap.themeConfig
|
const { nodeUseLineStyle } = this.mindMap.themeConfig
|
||||||
@ -246,7 +248,8 @@ class LogicalStructure extends Base {
|
|||||||
return []
|
return []
|
||||||
}
|
}
|
||||||
let { left, top, width, height, expandBtnSize } = node
|
let { left, top, width, height, expandBtnSize } = node
|
||||||
if (!this.mindMap.opt.alwaysShowExpandBtn) {
|
const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
|
||||||
|
if (!alwaysShowExpandBtn || notShowExpandBtn) {
|
||||||
expandBtnSize = 0
|
expandBtnSize = 0
|
||||||
}
|
}
|
||||||
const {
|
const {
|
||||||
|
|||||||
@ -213,7 +213,8 @@ class MindMap extends Base {
|
|||||||
return []
|
return []
|
||||||
}
|
}
|
||||||
let { left, top, width, height, expandBtnSize } = node
|
let { left, top, width, height, expandBtnSize } = node
|
||||||
if (!this.mindMap.opt.alwaysShowExpandBtn) {
|
const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
|
||||||
|
if (!alwaysShowExpandBtn || notShowExpandBtn) {
|
||||||
expandBtnSize = 0
|
expandBtnSize = 0
|
||||||
}
|
}
|
||||||
let marginX = this.getMarginX(node.layerIndex + 1)
|
let marginX = this.getMarginX(node.layerIndex + 1)
|
||||||
@ -256,7 +257,8 @@ class MindMap extends Base {
|
|||||||
return []
|
return []
|
||||||
}
|
}
|
||||||
let { left, top, width, height, expandBtnSize } = node
|
let { left, top, width, height, expandBtnSize } = node
|
||||||
if (!this.mindMap.opt.alwaysShowExpandBtn) {
|
const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
|
||||||
|
if (!alwaysShowExpandBtn || notShowExpandBtn) {
|
||||||
expandBtnSize = 0
|
expandBtnSize = 0
|
||||||
}
|
}
|
||||||
const { nodeUseLineStyle } = this.mindMap.themeConfig
|
const { nodeUseLineStyle } = this.mindMap.themeConfig
|
||||||
@ -296,7 +298,8 @@ class MindMap extends Base {
|
|||||||
return []
|
return []
|
||||||
}
|
}
|
||||||
let { left, top, width, height, expandBtnSize } = node
|
let { left, top, width, height, expandBtnSize } = node
|
||||||
if (!this.mindMap.opt.alwaysShowExpandBtn) {
|
const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
|
||||||
|
if (!alwaysShowExpandBtn || notShowExpandBtn) {
|
||||||
expandBtnSize = 0
|
expandBtnSize = 0
|
||||||
}
|
}
|
||||||
const {
|
const {
|
||||||
|
|||||||
@ -182,7 +182,8 @@ class OrganizationStructure extends Base {
|
|||||||
return []
|
return []
|
||||||
}
|
}
|
||||||
let { left, top, width, height, expandBtnSize, isRoot } = node
|
let { left, top, width, height, expandBtnSize, isRoot } = node
|
||||||
if (!this.mindMap.opt.alwaysShowExpandBtn) {
|
const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
|
||||||
|
if (!alwaysShowExpandBtn || notShowExpandBtn) {
|
||||||
expandBtnSize = 0
|
expandBtnSize = 0
|
||||||
}
|
}
|
||||||
let x1 = left + width / 2
|
let x1 = left + width / 2
|
||||||
|
|||||||
@ -232,7 +232,8 @@ class Timeline extends Base {
|
|||||||
return []
|
return []
|
||||||
}
|
}
|
||||||
let { left, top, width, height, expandBtnSize } = node
|
let { left, top, width, height, expandBtnSize } = node
|
||||||
if (!this.mindMap.opt.alwaysShowExpandBtn) {
|
const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
|
||||||
|
if (!alwaysShowExpandBtn || notShowExpandBtn) {
|
||||||
expandBtnSize = 0
|
expandBtnSize = 0
|
||||||
}
|
}
|
||||||
let len = node.children.length
|
let len = node.children.length
|
||||||
|
|||||||
@ -234,7 +234,8 @@ class VerticalTimeline extends Base {
|
|||||||
return []
|
return []
|
||||||
}
|
}
|
||||||
let { expandBtnSize } = node
|
let { expandBtnSize } = node
|
||||||
if (!this.mindMap.opt.alwaysShowExpandBtn) {
|
const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
|
||||||
|
if (!alwaysShowExpandBtn || notShowExpandBtn) {
|
||||||
expandBtnSize = 0
|
expandBtnSize = 0
|
||||||
}
|
}
|
||||||
if (node.isRoot) {
|
if (node.isRoot) {
|
||||||
@ -293,7 +294,8 @@ class VerticalTimeline extends Base {
|
|||||||
return []
|
return []
|
||||||
}
|
}
|
||||||
let { left, top, width, height, expandBtnSize } = node
|
let { left, top, width, height, expandBtnSize } = node
|
||||||
if (!this.mindMap.opt.alwaysShowExpandBtn) {
|
const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
|
||||||
|
if (!alwaysShowExpandBtn || notShowExpandBtn) {
|
||||||
expandBtnSize = 0
|
expandBtnSize = 0
|
||||||
}
|
}
|
||||||
node.children.forEach((item, index) => {
|
node.children.forEach((item, index) => {
|
||||||
@ -331,7 +333,8 @@ class VerticalTimeline extends Base {
|
|||||||
return []
|
return []
|
||||||
}
|
}
|
||||||
let { left, top, width, height, expandBtnSize } = node
|
let { left, top, width, height, expandBtnSize } = node
|
||||||
if (!this.mindMap.opt.alwaysShowExpandBtn) {
|
const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
|
||||||
|
if (!alwaysShowExpandBtn || notShowExpandBtn) {
|
||||||
expandBtnSize = 0
|
expandBtnSize = 0
|
||||||
}
|
}
|
||||||
node.children.forEach((item, index) => {
|
node.children.forEach((item, index) => {
|
||||||
|
|||||||
@ -288,7 +288,8 @@ class Export {
|
|||||||
handleNodeExport(node) {
|
handleNodeExport(node) {
|
||||||
if (node && node.getData('isActive')) {
|
if (node && node.getData('isActive')) {
|
||||||
node.deactivate()
|
node.deactivate()
|
||||||
if (!this.mindMap.opt.alwaysShowExpandBtn && node.getData('expand')) {
|
const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
|
||||||
|
if (!alwaysShowExpandBtn && !notShowExpandBtn && node.getData('expand')) {
|
||||||
node.removeExpandBtn()
|
node.removeExpandBtn()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user