OrgTreeCore

OrgTreeCore 负责数据加载、父子关系、布局、状态和事件，不负责创建具体 DOM 节点。

import { OrgTreeCore } from '@org-tree/core'

Constructor

new OrgTreeCore(config: OrgTreeConfig)

静态模式：

const sdk = new OrgTreeCore({
  el: '#tree',
  direction: 'down',
  layout: { spaceX: 32, spaceY: 56 },
  data,
})

动态模式：

const sdk = new OrgTreeCore({
  el: '#tree',
  layout: {
    spaceX: 32,
    spaceY: 56,
    isLeaf: node => node.isLeaf === true,
  },
  api,
})

data 和 api 是互斥配置。完整定义见类型与常量。

方法总览

方法	返回值	说明
loadData()	Promise<void>	加载初始数据并计算布局
expand({ nodeId })	Promise<void>	加载或恢复直接子节点并重排
collapse({ nodeId })	void	移除所有后代并重排
getRootNode()	PositionedNode | undefined	获取最近布局的根节点
getLayoutSpace()	{ spaceX, spaceY }	获取当前间距配置
getDirection()	TreeDirection	获取当前方向
setDirection(direction)	void	更新方向并派发方向事件
setNodeStatus(id, partial)	void	浅合并一个节点状态
getStatusMap()	Map<string, NodeStatus>	获取状态快照
onUpdate(listener)	() => void	订阅布局更新
onStatusChange(listener)	() => void	订阅状态增量
onDirectionChange(listener)	() => void	订阅方向变化

loadData()

loadData(): Promise<void>

静态模式读取 config.data，动态模式等待 config.api.init()。随后初始化状态、计算坐标、缓存布局结果并派发事件。

try {
  await sdk.loadData()
}
catch (error) {
  console.error('[OrgTree] 数据加载失败', error)
}

该方法可以重复调用。方向改变后调用它可按新方向重新计算完整布局。

expand()

expand(params: { nodeId: string }): Promise<void>

展开节点：

await sdk.expand({ nodeId: 'tech' })

执行顺序：

1. 设置目标节点 loading: true。
2. 静态模式从原始数据筛选直接子节点；动态模式调用 loadChildren()。
3. 初始化新节点状态并按 ID 合并。
4. 设置目标节点 expanded: true、loading: false。
5. 重新布局并派发 UpdateType.Expand。

collapse()

collapse(params: { nodeId: string }): void

递归从当前布局列表移除目标节点的所有后代，并把相关展开状态重置为 false。

sdk.collapse({ nodeId: 'tech' })

目标节点本身仍保留在布局中。

getRootNode()

getRootNode(): PositionedNode | undefined

返回最近一次布局结果的第一个节点。首次 loadData() 完成前返回 undefined。

getLayoutSpace()

getLayoutSpace(): { spaceX: number, spaceY: number }

读取构造时的间距配置。Vue 连接线组件使用该方法保持连线与布局一致。

getDirection()

getDirection(): 'down' | 'right'

未显式配置时返回 'down'。

setDirection()

setDirection(direction: TreeDirection): void

更新配置并同步触发方向监听者：

sdk.setDirection('right')
await sdk.loadData()

不会立即重算坐标

setDirection() 本身只更新方向并派发事件。需要调用 loadData()，或等待下一次展开/收起，才会运行对应方向的布局算法。

setNodeStatus()

setNodeStatus(
  nodeId: string,
  partial: Partial<NodeStatus>,
): void

对现有状态做浅合并，并立即触发状态增量事件：

sdk.setNodeStatus('tech', {
  highlight: true,
})

它不会触发布局更新。

getStatusMap()

getStatusMap(): Map<string, NodeStatus>

返回新的 Map 快照：

const status = sdk.getStatusMap().get('tech')

修改返回的 Map 不会直接改变 SDK 内部状态。

onUpdate()

onUpdate(
  listener: (nodes: PositionedNode[], type: UpdateType) => void,
): () => void

监听初始化、展开和收起引起的布局更新：

const stop = sdk.onUpdate((nodes, type) => {
  render(nodes, type)
})

stop()

如果已经有布局缓存，注册时会同步回放最近一次结果。

onStatusChange()

onStatusChange(
  listener: (diff: Map<string, NodeStatus>) => void,
): () => void

每次只推送本批变化。新监听者会收到此前累积的完整最新状态。

onDirectionChange()

onDirectionChange(
  listener: (direction: TreeDirection) => void,
): () => void

监听 setDirection()。该事件不回放初始方向，需要先调用 getDirection()。

listToTree()

Core 包还公开导出底层转换函数：

listToTree(
  list: any[],
  fieldMap?: LayoutConfig['fieldMap'],
  nodeSize?: NodeSizeInput,
): any

它建立父子关系并解析节点尺寸，主要供自定义布局集成使用。

会修改输入对象

函数会写入内部 _children、width 和 height 字段。普通 Vue/Standalone 接入不需要直接调用它。

销毁

Core 当前没有 destroy()。每个订阅方法都返回取消函数，业务方应在生命周期结束时调用。Standalone 实例额外提供 destroy() 来卸载 Vue 应用。