infogo-tree/src/store/tree-store.ts

A vue tree component using virtual list.

import TreeNode, { ITreeNodeOptions } from './tree-node'
import { TreeNodeKeyType, ignoreEnum, IgnoreType } from '../const'

//#region Interfaces

interface ITreeStoreOptions {
  [key: string]: any,
  keyField: string,
  ignoreMode?: IgnoreType,
  filteredNodeCheckable?: boolean,
  cascade?: boolean,
  cascadeLoose?: boolean,
  defaultExpandAll?: boolean,
  load?: Function,
  expandOnFilter?: boolean,
}

interface IMapData {
  [key: string]: TreeNode,
  [key: number]: TreeNode,
}

interface IListenersMap {
  [eventName: string]: Function[],
}

export interface IEventNames {
  'set-data': () => void,
  'visible-data-change': () => void,
  'render-data-change': () => void,
  'expand': NodeGeneralListenerType,
  'select': NodeGeneralListenerType,
  'unselect': NodeGeneralListenerType,
  'selected-change': (node: TreeNode | null, key: TreeNodeKeyType | null) => void,
  'check': NodeGeneralListenerType,
  'uncheck': NodeGeneralListenerType,
  'checked-change': (nodes: TreeNode[], keys: TreeNodeKeyType[]) => void,
}

//#endregion Interfaces

//#region Types

type NodeGeneralListenerType = (node: TreeNode) => void

export type ListenerType<T extends keyof IEventNames> = IEventNames[T]

export type FilterFunctionType = (keyword: string, node: TreeNode) => boolean

//#endregion Types

export default class TreeStore {
  //#region Properties

  /** 树数据 */
  data: TreeNode[] = []
  childStr: string = ''
  /** 扁平化的树数据 */
  flatData: TreeNode[] = []
  disabledFn: any
  /** 树数据 map */
  mapData: IMapData = Object.create(null)

  /** 未加载但已选中的节点 key ，每次 flattenData 的时候进行检查，将加载的节点从此数组中剔除 */
  private unloadCheckedKeys: TreeNodeKeyType[] = []

  /** 未加载但选中的单选节点 key */
  private unloadSelectedKey: TreeNodeKeyType | null = null

  /** 当前单选选中节点 key */
  private currentSelectedKey: TreeNodeKeyType | null = null

  /** 事件 listeners */
  private listenersMap: IListenersMap = {}

  //#endregion Properties

  constructor(private readonly options: ITreeStoreOptions) {
  }

  setData(data: ITreeNodeOptions[], selectableUnloadKey: TreeNodeKeyType | null = null, checkableUnloadKeys: TreeNodeKeyType[] | null = null, childStr: string, disabledFn: any, replenishSelect: Boolean): void {
    this.childStr = childStr
    this.disabledFn = disabledFn
    this.data = data.map((nodeData: ITreeNodeOptions): TreeNode => new TreeNode(nodeData, null, this.options.keyField, !!this.options.load, childStr, disabledFn))
    // 清空 mapData
    for (let key in this.mapData) delete this.mapData[key]
    // 扁平化之前清空单选选中，如果 value 有值，则是 selectableUnloadKey 有值，会重新设置 currentSelectedKey ；多选选中没有存储在 store 中，因此不必事先清空。
    this.currentSelectedKey = null
    // 扁平化节点数据
    this.flatData = this.flattenData(this.data)
    // 更新未载入多选选中节点
    this.setUnloadCheckedKeys(checkableUnloadKeys || [], replenishSelect)
    if (selectableUnloadKey || selectableUnloadKey === 0) {
      // 更新未载入单选选中节点
      this.currentSelectedKey = null
      this.setUnloadSelectedKey(selectableUnloadKey)
    }
    this.emit('visible-data-change')
    this.emit('set-data')
  }

  //#region Set api

  /**
   * 设置单个节点多选选中
   * @param key 设置的节点 key
   * @param value 是否选中
   * @param triggerEvent 是否触发事件
   * @param triggerDataChange 是否触发 `data-change` 事件以通知外部刷新视图
   * @param filtering 是否正在过滤，如果是，则考虑 `filteredNodeCheckable` Prop，用于判断是否是用户点击节点触发的勾选
   * @param isCheckAll 是否是全选
   */
  setChecked(key: TreeNodeKeyType, value: boolean, triggerEvent: boolean = true, triggerDataChange: boolean = true, filtering: boolean = false, isCheckAll: boolean = false): void {
    const node = this.mapData[key]
    if (!node) return this.setUnloadChecked(key, value, triggerEvent, triggerDataChange)
    if (node.disabled && isCheckAll) return
    // 首先确定没有变化的情况
    if (node.checked && value) return // 已经勾选的再次勾选，直接返回
    if (!node.checked && !node.indeterminate && !value) return // 未勾选且不是半选状态再次设置未勾选，直接返回
    if (this.options.cascade) {
      // 向下勾选，包括自身
      this.checkNodeDownward(node, value, filtering, isCheckAll)
      // 向上勾选父节点直到根节点
      this.checkNodeUpward(node)
    } else {

      node.checked = value
    }
    if (triggerEvent) {
      if (node.checked) {
        this.emit('check', node)
      } else {
        this.emit('uncheck', node)
      }
    }
    this.triggerCheckedChange(triggerEvent, triggerDataChange)
  }

  /**
   * 设置单个未加载节点选中，不公开此 API
   */
  private setUnloadChecked(key: TreeNodeKeyType, value: boolean, triggerEvent: boolean = true, triggerDataChange: boolean = true): void {
    const index = this.findIndex(key, this.unloadCheckedKeys)
    if (value) {
      if (index === -1) {
        this.unloadCheckedKeys.push(key)
      }
    } else {
      if (index !== -1) {
        this.unloadCheckedKeys.splice(index, 1)
      }
    }

    this.triggerCheckedChange(triggerEvent, triggerDataChange)
  }

  /**
   * 批量选中/取消多选选中节点
   * @param keys 选中的节点 key 数组
   * @param value 是否选中
   * @param triggerEvent 是否触发事件
   */
  setCheckedKeys(keys: TreeNodeKeyType[], value: boolean, triggerEvent: boolean = true, triggerDataChange: boolean = true, isCheckAll: boolean = false): void {

    keys.forEach((key) => {
      this.setChecked(key, value, false, false, false, isCheckAll)
    })

    this.triggerCheckedChange(triggerEvent, triggerDataChange)
  }

  /**
   * 多选勾选全部节点
   * @param triggerEvent 是否触发事件
   * @param triggerDataChange 是否触发视图刷新
   */
  checkAll(triggerEvent: boolean = true, triggerDataChange: boolean = true): void {
    if (this.options.cascade) {
      // 级联时，只要勾选第一层节点即可，如果第一层被禁用了，则往下一层勾选
      const checkCascade = (nodes: TreeNode[]): void => {
        nodes.forEach((node) => {
          if (node.disabled) {
            checkCascade(node.children)
          } else {
            this.setChecked(node[this.options.keyField], true, false, false)
          }
        })
      }
      checkCascade(this.data)
    } else {
      const length = this.flatData.length
      for (let i = 0; i < length; i++) {
        const node = this.flatData[i]
        this.setChecked(node[this.options.keyField], true, false, false)
      }
    }

    this.triggerCheckedChange(triggerEvent, triggerDataChange)
  }

  /**
   * 清除所有多选已选
   * @param triggerEvent 是否触发事件
   * @param triggerDataChange 是否触发视图刷新
   */
  clearChecked(triggerEvent: boolean = true, triggerDataChange: boolean = true): void {
    const currentCheckedNodes = this.getCheckedNodes()
    currentCheckedNodes.forEach((checkedNode) => {
      this.setChecked(checkedNode[this.options.keyField], false, false, false)
    })
    // 清空未加载多选选中节点
    this.unloadCheckedKeys = []

    this.triggerCheckedChange(triggerEvent, triggerDataChange)
  }

  /**
   * 触发 checked-change 的快捷方法
   * @param triggerEvent 是否触发事件
   * @param triggerDataChange 是否触发视图刷新
   */
  private triggerCheckedChange(triggerEvent: boolean = true, triggerDataChange: boolean = true) {
    if (triggerEvent) {
      this.emit('checked-change', this.getCheckedNodes(), this.getCheckedKeys())
    }

    if (triggerDataChange) {
      this.emit('render-data-change')
    }
  }

  /**
   * 设置单选选中
   * @param key 选中节点 key
   * @param value 是否选中
   * @param triggerEvent 是否触发事件
   */
  setSelected(key: TreeNodeKeyType, value: boolean, triggerEvent: boolean = true, triggerDataChange: boolean = true): void {
    const node = this.mapData[key]
    if (!node) return this.setUnloadSelected(key, value, triggerEvent, triggerDataChange)
    if (node.disabled) return

    if (node.selected === value) return // 当前节点已经是将要设置的状态，直接返回

    if (key === this.currentSelectedKey) { // 设置的节点即当前已选中节点
      if (!value) { // 取消当前选中节点
        node.selected = value
        this.currentSelectedKey = null
      }
    } else { // 设置的节点不是当前已选中节点，要么当前没有选中节点，要么当前有选中节点
      if (value) {
        if (this.currentSelectedKey === null) { // 当前没有选中节点
          node.selected = value
          this.currentSelectedKey = node[this.options.keyField]
        } else { // 取消当前已选中，设置新的选中节点
          if (this.mapData[this.currentSelectedKey]) {
            this.mapData[this.currentSelectedKey].selected = false
          }
          node.selected = value
          this.currentSelectedKey = node[this.options.keyField]
        }
      }
    }

    if (triggerEvent) {
      if (node.selected) {
        this.emit('select', node)
      } else {
        this.emit('unselect', node)
      }

      this.emit('selected-change', this.getSelectedNode(), this.getSelectedKey())
    }

    if (triggerDataChange) {
      this.emit('render-data-change')
    }
  }

  /**
   * 设置未加载单选选中节点，不公开此 API
   */
  private setUnloadSelected(key: TreeNodeKeyType, value: boolean, triggerEvent: boolean = true, triggerDataChange: boolean = true): void {
    if (value) {
      if (this.currentSelectedKey) {
        this.setSelected(this.currentSelectedKey, false, false, false)
      }
      this.unloadSelectedKey = key
    } else {
      if (this.unloadSelectedKey === key) {
        this.unloadSelectedKey = null
      }
    }

    if (triggerEvent) {
      this.emit('selected-change', this.getSelectedNode(), this.getSelectedKey())
    }

    if (triggerDataChange) {
      this.emit('render-data-change')
    }
  }

  /**
   * 清除当前单选选中
   * @param triggerEvent 是否触发事件
   * @param triggerDataChange 是否触发视图刷新
   */
  clearSelected(triggerEvent: boolean = true, triggerDataChange: boolean = true): void {
    if (this.currentSelectedKey && this.mapData[this.currentSelectedKey]) {
      this.setSelected(this.currentSelectedKey, false, triggerEvent, triggerDataChange)
    } else if (this.unloadSelectedKey !== null) {
      this.unloadSelectedKey = null

      if (triggerEvent) {
        this.emit('selected-change', this.getSelectedNode(), this.getSelectedKey())
      }

      if (triggerDataChange) {
        this.emit('render-data-change')
      }
    }
  }

  /**
   * 设置节点展开
   * @param key 节点 key
   * @param value 是否展开
   * @param expandParent 展开节点时是否同时展开父节点
   * @param triggerEvent 是否触发事件
   * @param triggerDataChange 是否触发 `data-change` 事件以通知外部刷新视图
   */
  setExpand(key: TreeNodeKeyType, value: boolean, expandParent: boolean = false, triggerEvent: boolean = true, triggerDataChange: boolean = true): void {
    const node = this.mapData[key]
    if (!node || (!expandParent && node.isLeaf)) return

    if (node.expand === value) return // 当前节点已经是将要设置的状态，直接返回

    if (!node.isLeaf) {
      if (typeof this.options.load === 'function') {
        // 如果节点未加载过且将要设置为加载，则调用 load 方法
        if (!node._loaded && !node._loading && value) {
          node._loading = true
          if (triggerDataChange) {
            this.emit('visible-data-change')
          }
          new Promise((resolve, reject) => {
            const load = (this.options.load as Function)
            load(node, resolve, reject)
          }).then((children) => {
            if (Array.isArray(children) && children.length > 0) {
              const parentIndex: number = this.findIndex(node)
              if (parentIndex === -1) return
              node._loaded = true
              node.expand = value
              node.setChildren(children, this.childStr, this.disabledFn)
              // 如果单选选中的值为空，则允许后续数据覆盖单选 value
              const currentCheckedKeys = this.getCheckedKeys()
              const flattenChildren = this.flattenData(node.children, this.getSelectedKey === null)
              this.flatData.splice(parentIndex + 1, 0, ...flattenChildren)
              // 如果有未加载的选中节点，判断其是否已加载
              this.setUnloadCheckedKeys(currentCheckedKeys)
              if (this.unloadSelectedKey !== null) {
                this.setUnloadSelectedKey(this.unloadSelectedKey)
              }
              this.emit('set-data')
            } else { // 当懒加载的数据为空去掉展开哦节点的箭头
              if (node) {
                node.isLeaf = true
              }
            }
          }).catch((e: Error | string) => {
            let err = e
            if (!(e instanceof Error)) {
              err = new Error(e)
            }
            // tslint:disable-next-line: no-console
            console.error(err)
          }).then(() => {
            node._loading = false

            if (triggerEvent) {
              this.emit('expand', node)
            }

            if (triggerDataChange) {
              this.emit('visible-data-change')
            }
          })
          return
        } else if (node._loading) return // 正在加载的节点，直接返回
      }

      node.expand = value
      // Set children visibility
      const queue = [...node.children]
      while (queue.length) {
        if (queue[0].expand && queue[0].children.length) {
          queue.push(...queue[0].children)
        }
        if (queue[0]._filterVisible === false) {
          queue[0].visible = false
        } else {
          queue[0].visible = queue[0]._parent === null || (queue[0]._parent.expand && queue[0]._parent.visible)
        }
        queue.shift()
      }

      if (triggerEvent) {
        this.emit('expand', node)
      }

      if (triggerDataChange) {
        this.emit('visible-data-change')
      }
    }

    if (expandParent && node._parent && value) {
      this.setExpand(node._parent[this.options.keyField], value, expandParent, false, triggerDataChange)
    }
  }

  /**
   * 批量设置节点展开/折叠
   * @param keys 展开的节点 key 数组
   * @param value 是否展开
   */
  setExpandKeys(keys: TreeNodeKeyType[], value: boolean, triggerDataChange: boolean = true): void {
    keys.forEach((key) => {
      this.setExpand(key, value, true, false, false)
    })

    if (triggerDataChange) {
      this.emit('visible-data-change')
    }
  }

  setExpandAll(value: boolean, triggerDataChange: boolean = true): void {
    this.flatData.forEach((node) => {
      if (!this.options.load || node._loaded) {
        this.setExpand(node[this.options.keyField], value, false, false, false)
      }
    })

    if (triggerDataChange) {
      this.emit('visible-data-change')
    }
  }

  //#endregion Set api

  //#region Get api

  /**
   * 获取多选选中节点
   * @param ignoreMode 忽略模式，可选择忽略父节点或子节点，默认值是 CTree 的 ignoreMode Prop
   */
  getCheckedNodes(ignoreMode = this.options.ignoreMode): TreeNode[] {
    if (ignoreMode === ignoreEnum.children) {
      const result: TreeNode[] = []
      const traversal = (nodes: TreeNode[]) => {
        nodes.forEach((node) => {
          if (node.checked) {
            result.push(node)
          } else if (!node.isLeaf && (node.indeterminate || (this.options.cascadeLoose && !node.indeterminate))) {
            traversal(node.children)
          }
        })
      }
      traversal(this.data)
      return result
    } else {
      return this.flatData.filter((node) => {
        if (ignoreMode === ignoreEnum.parents) return node.checked && node.isLeaf
        return node.checked
      })
    }
  }

  /**
   * 获取多选选中的节点 key ，包括未加载的 key
   * @param ignoreMode 忽略模式，同 `getCheckedNodes`
   */
  getCheckedKeys(ignoreMode = this.options.ignoreMode): TreeNodeKeyType[] {
    return this.getCheckedNodes(ignoreMode).map((checkedNodes) => checkedNodes[this.options.keyField]).concat(this.unloadCheckedKeys)
  }

  /**
   * 获取多选半选状态节点
   */
  getIndeterminateNodes(): TreeNode[] {
    return this.flatData.filter((node) => node.indeterminate)
  }

  /**
   * 获取当前单选选中节点
   */
  getSelectedNode(): TreeNode | null {
    if (this.currentSelectedKey === null) return null
    return this.mapData[this.currentSelectedKey] || null
  }

  /**
   * 获取当前单选选中节点 key ，有可能是未加载的选中项
   */
  getSelectedKey(): TreeNodeKeyType | null {
    if (this.currentSelectedKey === 0 || this.currentSelectedKey) return this.currentSelectedKey
    return this.unloadSelectedKey || null
  }

  /**
   * 获取未加载但多选选中的节点
   */
  getUnloadCheckedKeys(): TreeNodeKeyType[] {
    return this.unloadCheckedKeys
  }

  /**
   * 获取展开节点
   */
  getExpandNodes(): TreeNode[] {
    return this.flatData.filter((node) => !node.isLeaf && node.expand)
  }

  /**
   * 获取展开节点 keys
   */
  getExpandKeys(): TreeNodeKeyType[] {
    return this.getExpandNodes().map((node) => node[this.options.keyField])
  }

  /**
   * 根据节点 key  获取节点
   * @param key 节点 key
   */
  getNode(key: TreeNodeKeyType): TreeNode | null {
    return this.mapData[key] || null
  }

  //#endregion Get api

  //#region Node transfer api

  // 这边的 referenceKey 都是被执行的节点，比如 insertBefore ，在这里 referenceKey 就是指要插入到 referenceKey 节点前面

  insertBefore(insertedNode: TreeNodeKeyType | ITreeNodeOptions, referenceKey: TreeNodeKeyType): TreeNode | null {
    const node = this.getInsertedNode(insertedNode, referenceKey)
    if (!node) return null

    this.remove(node[this.options.keyField], false)

    const referenceNode = this.mapData[referenceKey]
    const parentNode = referenceNode._parent
    const childIndex = this.findIndex(referenceKey, parentNode && parentNode.children)
    const flatIndex = this.findIndex(referenceKey)

    const dataIndex = (parentNode && -1) || this.findIndex(referenceKey, this.data)

    this.insertIntoStore(node, parentNode, childIndex, flatIndex, dataIndex)
    this.emit('visible-data-change')
    return node
  }

  insertAfter(insertedNode: TreeNodeKeyType | ITreeNodeOptions, referenceKey: TreeNodeKeyType): TreeNode | null {
    const node = this.getInsertedNode(insertedNode, referenceKey)
    if (!node) return null

    this.remove(node[this.options.keyField], false)

    const referenceNode = this.mapData[referenceKey]
    const parentNode = referenceNode._parent
    const childIndex = this.findIndex(referenceKey, parentNode && parentNode.children) + 1

    const length = this.flatData.length
    const referenceIndex = this.findIndex(referenceKey)

    // 找到待插入节点应该插入 flatData 的索引
    let flatIndex = referenceIndex + 1
    for (let i = referenceIndex + 1; i <= length; i++) {
      if (i === length) {
        flatIndex = i
        break
      }
      if (this.flatData[i]._level <= referenceNode._level) {
        flatIndex = i
        break
      }
    }

    const dataIndex = (parentNode && -1) || (this.findIndex(referenceKey, this.data) + 1)

    this.insertIntoStore(node, parentNode, childIndex, flatIndex, dataIndex)
    this.emit('visible-data-change')
    return node
  }

  append(insertedNode: TreeNodeKeyType | ITreeNodeOptions, parentKey: TreeNodeKeyType): TreeNode | null {
    const parentNode = this.mapData[parentKey]
    if (!parentNode.isLeaf) {
      const childrenLength = parentNode.children.length
      return this.insertAfter(insertedNode, parentNode.children[childrenLength - 1][this.options.keyField])
    }

    const node = this.getInsertedNode(insertedNode, parentKey, true)
    if (!node) return null

    this.remove(node[this.options.keyField], false)

    const flatIndex = this.findIndex(parentKey) + 1

    this.insertIntoStore(node, parentNode, 0, flatIndex)
    this.emit('visible-data-change')
    return node
  }

  prepend(insertedNode: TreeNodeKeyType | ITreeNodeOptions, parentKey: TreeNodeKeyType): TreeNode | null {
    const parentNode = this.mapData[parentKey]
    if (!parentNode.isLeaf) {
      return this.insertBefore(insertedNode, parentNode.children[0][this.options.keyField])
    }

    const node = this.getInsertedNode(insertedNode, parentKey, true)
    if (!node) return null

    this.remove(node[this.options.keyField], false)

    const flatIndex = this.findIndex(parentKey) + 1

    this.insertIntoStore(node, parentNode, 0, flatIndex)
    this.emit('visible-data-change')
    return node
  }

  /**
   * 删除节点
   * @param removedKey 要删除的节点 key
   */
  remove(removedKey: TreeNodeKeyType, triggerDataChange: boolean = true): TreeNode | null {
    const node = this.mapData[removedKey]
    if (!node) return null

    // 从 flatData 中移除
    const index = this.findIndex(node)
    if (index === -1) return null
    let deleteCount = 1
    const length = this.flatData.length
    for (let i = index + 1; i < length; i++) {
      if (this.flatData[i]._level > node._level) {
        deleteCount++
      } else break
    }
    this.flatData.splice(index, deleteCount)

    // 从 mapData 中移除
    const deleteInMap = (key: TreeNodeKeyType): void => {
      const node = this.mapData[key]
      delete this.mapData[key]
      node.children.forEach((child) => deleteInMap(child[this.options.keyField]))
    }
    deleteInMap(removedKey)

    // 从 data 中移除
    if (!node._parent) {
      const index = this.findIndex(node, this.data)
      if (index > -1) {
        this.data.splice(index, 1)
      }
    }

    // 从父节点 children 中移除
    if (node._parent) {
      const childIndex = this.findIndex(node, node._parent.children)
      if (childIndex !== -1) {
        node._parent.children.splice(childIndex, 1)
      }
      // 处理父节点 isLeaf
      node._parent.isLeaf = !node._parent.children.length
      // 处理父节点 expand
      if (node._parent.isLeaf) {
        node._parent.expand = false
        node._parent.indeterminate = false
      }
      // 更新被移除处父节点状态
      this.updateMovingNodeStatus(node)
    }

    if (triggerDataChange) {
      this.emit('visible-data-change')
    }

    return node
  }

  private getInsertedNode(insertedNode: TreeNodeKeyType | ITreeNodeOptions, referenceKey: TreeNodeKeyType, isParent: boolean = false): TreeNode | null {
    const referenceNode = this.mapData[referenceKey]
    if (!referenceNode) return null
    const parentNode = isParent ? referenceNode : referenceNode._parent
    if (insertedNode instanceof TreeNode) {
      // 与参照节点是同一个节点
      if (insertedNode[this.options.keyField] === referenceKey) return null
      return insertedNode
    } else if (typeof insertedNode === 'object') {
      if (insertedNode[this.options.keyField] === referenceKey) return null
      const mapNode = this.mapData[insertedNode[this.options.keyField]]
      if (mapNode) return mapNode
      return new TreeNode(insertedNode, parentNode, this.options.keyField, !!this.options.load, this.childStr, this.disabledFn)
    } else {
      if (!this.mapData[insertedNode] || insertedNode === referenceKey) return null
      return this.mapData[insertedNode]
    }
  }

  /**
   * 将一个节点插入 store 记录中
   * @param node 要插入的节点
   * @param parentNode 要插入节点的父节点
   * @param childIndex 如果有父节点，则需提供要插入的节点在同级节点中的顺序
   * @param flatIndex 在 flatData 中的索引
   * @param dataIndex 如果没有父节点，需要提供节点在 data 中的索引
   */
  private insertIntoStore(node: TreeNode, parentNode: TreeNode | null, childIndex: number, flatIndex: number, dataIndex?: number): void {
    if (flatIndex === -1) return

    // 插入父节点 children 中
    if (childIndex !== -1 && parentNode) {
      parentNode.children.splice(childIndex, 0, node)
    }

    // 更新 _parent
    node._parent = parentNode

    // 更新父节点 isLeaf, expand
    if (parentNode) {
      parentNode.isLeaf = false
      this.setExpand(parentNode[this.options.keyField], true, true, false, false)
    } else if (typeof dataIndex === 'number' && dataIndex > -1) {
      // 没有父节点，则需要插入到 this.data 中以保证数据正确
      this.data.splice(dataIndex, 0, node)
    }

    // 插入 flatData 与 mapData
    const nodes: TreeNode[] = this.flattenData([node])
    // 处理自身及子节点 _level
    node._level = parentNode ? parentNode._level + 1 : 0
    nodes.forEach((childNode) => childNode._level = childNode._parent ? childNode._parent._level + 1 : 0)
    this.flatData.splice(flatIndex, 0, ...nodes)

    // 更新被移除处父节点状态
    this.updateMovingNodeStatus(node)
  }

  private updateMovingNodeStatus(movingNode: TreeNode): void {
    // 处理多选
    this.checkNodeUpward(movingNode)
    this.triggerCheckedChange()
    // 处理单选
    if (movingNode.selected) {
      this.setSelected(movingNode[this.options.keyField], true)
    }
  }

  //#endregion Node transfer api

  /**
   * 过滤本地节点数据
   * @param keyword 过滤关键词
   * @param filterMethod 过滤方法
   */
  filter(keyword: string, filterMethod: FilterFunctionType): void {
    // 使用树形结构数据进行遍历
    const filterVisibleNodes: TreeNode[] = []
    this.flatData.forEach((node) => {
      node._filterVisible = node._parent && node._parent._filterVisible || filterMethod(keyword, node)
      node.visible = node._filterVisible

      if (node._filterVisible) {
        filterVisibleNodes.push(node)
      }
    })
    // 对于临时列表中的节点，都是可见的，因此将它们的父节点都设为可见并展开
    filterVisibleNodes.forEach((node) => {
      const stack = []
      let parent = node._parent
      while (parent) {
        stack.unshift(parent)
        parent = parent._parent
      }
      stack.forEach((parent) => {
        parent._filterVisible = true
        // parent.visible = parent._filterVisible
        // _filterVisible 且 无父级或者父级展开且可见，则设为可见
        parent.visible = (parent._parent === null || (parent._parent.expand && parent._parent.visible)) && parent._filterVisible
        this.options.expandOnFilter && this.setExpand(parent[this.options.keyField], true, true, false, false)
      })
      node.visible = node._parent === null || (node._parent.expand && node._parent.visible)
    })

    this.emit('visible-data-change')
  }

  /**
   * 过滤未加载多选节点，对比最终勾选节点是否有变化并触发 checked-change 事件
   * @param keys 全量选中节点 key 数组，包括加载与未加载选中节点
   */
  private setUnloadCheckedKeys(keys: TreeNodeKeyType[], replenishSelect: Boolean = true): void {
    this.unloadCheckedKeys = keys
    const checkedKeysCache = keys.concat()
    const length = this.unloadCheckedKeys.length
    for (let i = length - 1; i >= 0; i--) {
      const key = this.unloadCheckedKeys[i]
      if (this.mapData[key]) {
        this.setChecked(key, true, false, false)
        this.unloadCheckedKeys.splice(i, 1)
      }
    }

    const newCheckedKeys = this.getCheckedKeys()
    if (newCheckedKeys.length === checkedKeysCache.length && newCheckedKeys.every((val) => (checkedKeysCache as TreeNodeKeyType[]).some((cache) => cache === val))) return
    // 因为多选模式下，value 传过来的数据跟数据上标识 checked: true 的结果可能不一致，因此需要触发一个事件告诉外部最终勾选了哪些节点
    if (replenishSelect) {
      this.emit('checked-change', this.getCheckedNodes(), newCheckedKeys)
    }
  }

  /**
   * 过滤未加载单选选中节点，对比是否有变化并触发 selected-change 事件
   * @param key 节点 key
   */
  private setUnloadSelectedKey(key: TreeNodeKeyType): void {
    const selectedKeyCache = this.getSelectedKey()
    if (this.mapData[key]) { // 如果节点已加载
      this.setSelected(key, true, false)
      this.unloadSelectedKey = null
    } else { // 节点未加载
      this.currentSelectedKey && this.setSelected(this.currentSelectedKey, false, false)
      this.unloadSelectedKey = key
    }

    const newSelectedKey = this.getSelectedKey()
    if (newSelectedKey === selectedKeyCache) return
    this.emit('selected-change', this.getSelectedNode(), newSelectedKey)
  }

  /**
   * 保存扁平化的节点数据 `flatData` 与节点数据 Map `mapData`
   * @param nodes 树状节点数据
   * @param overrideSelected 是否根据数据设置 `selected`
   */
  private flattenData(nodes: TreeNode[], overrideSelected: boolean = true, result: TreeNode[] = []): TreeNode[] {
    const length = nodes.length
    for (let i = 0; i < length; i++) {
      const node = nodes[i]
      const key: TreeNodeKeyType = node[this.options.keyField]
      result.push(node)
      if (this.mapData[key]) {
        throw new Error('[CTree] Duplicate tree node key.')
      }
      this.mapData[key] = node

      // 如果数据上就是选中的，则更新节点状态
      if (node.checked && this.options.cascade) {
        // 向下勾选，包括自身
        this.checkNodeDownward(node, true)
        // 向上勾选父节点直到根节点
        this.checkNodeUpward(node)
      }

      if (node.selected && overrideSelected) {
        this.clearSelected(false, false)
        this.currentSelectedKey = node[this.options.keyField]
        this.emit('selected-change', node, this.currentSelectedKey)
      }

      if ((this.options.defaultExpandAll || node.expand) && !this.options.load && !node.isLeaf) {
        node.expand = false
        this.setExpand(node[this.options.keyField], true, false, false, false)
      }

      if (node.children.length) {
        this.flattenData(node.children, overrideSelected, result)
      }
    }
    return result
  }

  //#region Check nodes

  /**
   * 向下勾选/取消勾选节点，包括自身
   * @param node 需要向下勾选的节点
   * @param value 勾选或取消勾选
   * @param filtering 是否正在过滤，如果是，则考虑 `filteredNodeCheckable` Prop
   */
  private checkNodeDownward(node: TreeNode, value: boolean, filtering: boolean = false, isCheckAll: boolean = false): void {
    node.children.forEach((child) => {
      this.checkNodeDownward(child, value, filtering, isCheckAll)
    })
    if (node.isLeaf || (this.options.load && !node.children.length)) {
      if (!node.disabled || (node.disabled && !isCheckAll)) {
        // 正在过滤，若被过滤节点不可勾选，且节点过滤后不可见，则直接返回

        if (filtering && !this.options.filteredNodeCheckable && !node._filterVisible) return
        node.checked = value
        node.indeterminate = false

      }
    } else {
      this.checkParentNode(node, 'down')
    }
  }

  /**
   * 向上勾选/取消勾选父节点，不包括自身
   * @param node 需要勾选的节点
   */
  private checkNodeUpward(node: TreeNode) {
    let parent = node._parent
    while (parent) {
      this.checkParentNode(parent, 'up')
      parent = parent._parent
    }
  }

  /**
   * 根据子节点的勾选状态更新当前父节点的勾选状态
   * @param node 需要勾选的节点
   */
  private checkParentNode(node: TreeNode, type: string): void {
    const length = node.children.length
    if (!length) return
    let hasChecked = false
    let hasUnchecked = false
    let isInterrupted = false
    for (let i = 0; i < length; i++) {
      const child = node.children[i]
      // && !child.disabled
      if (!child.disabled) {
        if (child.checked) {
          hasChecked = true
        } else {
          hasUnchecked = true
        }
      }
      if ((hasChecked && hasUnchecked) || child.indeterminate) {

        if (!this.options.cascadeLoose) {

          node.indeterminate = true
        }
        isInterrupted = true
        node.checked = false
        break
      }
    }
    if (!isInterrupted) {
      if (type === 'up' && this.options.cascadeLoose) {
        node.checked = false
      } else {
        node.checked = hasChecked
        node.indeterminate = false
      }
    }
  }

  //#endregion Check nodes

  //#region Utils

  /**
   * 搜索节点在指定数组中的位置
   */
  private findIndex(keyOrNode: TreeNode | TreeNodeKeyType, searchList: TreeNode[] | TreeNodeKeyType[] | null = this.flatData): number {
    if (searchList !== null) {
      let key: TreeNodeKeyType = keyOrNode instanceof TreeNode ? keyOrNode[this.options.keyField] : keyOrNode
      const length = searchList.length
      for (let i = 0; i < length; i++) {
        if (searchList[0] instanceof TreeNode) {
          if (key === (searchList as TreeNode[])[i][this.options.keyField]) {
            return i
          }
        } else {
          if (key === searchList[i]) {
            return i
          }
        }
      }
    }
    return -1
  }

  //#endregion Utils

  //#region Mini EventTarget
  on<T extends keyof IEventNames>(eventName: T, listener: ListenerType<T> | Array<ListenerType<T>>): void {
    if (!this.listenersMap[eventName]) {
      this.listenersMap[eventName] = []
    }
    let listeners: Array<ListenerType<T>> = []
    if (!Array.isArray(listener)) {
      listeners = [listener]
    } else {
      listeners = listener
    }
    listeners.forEach((listener) => {
      if (this.listenersMap[eventName].indexOf(listener) === -1) {
        this.listenersMap[eventName].push(listener)
      }
    })
  }

  off<T extends keyof IEventNames>(eventName: T, listener?: ListenerType<T>): void {
    if (!this.listenersMap[eventName]) return
    if (!listener) {
      this.listenersMap[eventName] = []
    } else {
      const index = this.listenersMap[eventName].indexOf(listener)
      if (index > -1) {
        this.listenersMap[eventName].splice(index, 1)
      }
    }
  }

  emit<T extends keyof IEventNames>(eventName: T, ...args: Parameters<IEventNames[T]>): void {
    if (!this.listenersMap[eventName]) return
    const length: number = this.listenersMap[eventName].length
    for (let i: number = 0; i < length; i++) {
      this.listenersMap[eventName][i](...args)
    }
  }
  //#endregion Mini EventTarget
}