@splicetree/plugin-selectable

提供选择与激活能力，支持单选/多选与 Shift 范围选择；消费 input:node-click 与 input:direction 语义事件。

安装

pnpm add @splicetree/plugin-selectable

使用

import { createSpliceTree } from '@splicetree/core'
import keyboard from '@splicetree/plugin-keyboard'
import pointer from '@splicetree/plugin-pointer'
import selectable from '@splicetree/plugin-selectable'

const tree = createSpliceTree(data, {
  plugins: [keyboard, pointer, selectable],
  configuration: {
    selectable: {
      multiple: true,
      defaultSelected: ['a'],
    },
    keyboard: {
      autoListen: true,
      target: '.keyboard-wrap',
    },
  },
})

Api

• Configuration

| 选项 | 类型 | 默认值 | 说明 | | ----------------------------------------- | ----------- | ------ | ---------------------------- | | configuration.selectable.multiple | boolean | false| 是否启用多选 | | configuration.selectable.defaultSelected| string[] | [] | 初始选中节点 id 集合 |

• 行为
  • 单选：点击选中当前节点
  • 多选：
    • 普通点击采用单选语义：清空其它选中，仅选中当前节点；再次点击已选中节点则取消选中
    • Ctrl/Cmd 切换选中；Shift 范围选择
• 实例
  • selectedKeys: Set<string> 当前选中集合
  • lastSelectedKey?: string 最近一次选中的 id
  • activeId?: string 当前激活 id（用于键盘导航）
  • isSelected(id: string): boolean
  • toggleSelect(id: string, selected?: boolean): void
• 节点
  • isSelected(): boolean
  • toggleSelect(selected?: boolean): void
• 配置（configuration.selectable）
  • multiple?: boolean 是否多选
  • defaultSelected?: string[] 默认选中集合