Feature:支持设置初始中心节点的位置

This commit is contained in:
wanglin2 2023-04-07 08:42:27 +08:00
parent 505622f3dc
commit 853b999a7d
3 changed files with 39 additions and 4 deletions

View File

@ -88,7 +88,9 @@ const defaultOpt = {
// 是否开启节点动画过渡
enableNodeTransitionMove: true,
// 如果开启节点动画过渡可以通过该属性设置过渡的时间单位ms
nodeTransitionMoveDuration: 300
nodeTransitionMoveDuration: 300,
// 初始根节点的位置
initRootNodePosition: [CONSTANTS.INIT_ROOT_NODE_POSITION.CENTER, CONSTANTS.INIT_ROOT_NODE_POSITION.CENTER]
}
// 思维导图

View File

@ -1,5 +1,5 @@
import Node from '../Node'
import { CONSTANTS } from '../utils/constant'
import { CONSTANTS, initRootNodePositionMap } from '../utils/constant'
// 布局基类
class Base {
@ -122,10 +122,28 @@ class Base {
return newNode
}
// 格式化节点位置
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
}
}
// 定位节点到画布中间
setNodeCenter(node) {
node.left = (this.mindMap.width - node.width) / 2
node.top = (this.mindMap.height - node.height) / 2
let { initRootNodePosition } = this.mindMap.opt
let { CENTER }= CONSTANTS.INIT_ROOT_NODE_POSITION
if (!initRootNodePosition || !Array.isArray(initRootNodePosition) || initRootNodePosition.length < 2) {
initRootNodePosition = [CENTER, CENTER]
}
node.left = this.formatPosition(initRootNodePosition[0], this.mindMap.width, node.width)
node.top = this.formatPosition(initRootNodePosition[1], this.mindMap.height, node.height)
}
// 更新子节点属性

View File

@ -154,9 +154,24 @@ export const CONSTANTS = {
MOUSE_WHEEL_ACTION: {
ZOOM: 'zoom',
MOVE: 'move'
},
INIT_ROOT_NODE_POSITION: {
LEFT: 'left',
TOP: 'top',
RIGHT: 'right',
BOTTOM: 'bottom',
CENTER: 'center'
}
}
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 = [
{