@splicetree/plugin-selectable 0.1.1

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# @splicetree/plugin-selectable
+
+## 0.1.0
+
+### Minor Changes
+
+- ### @splicetree/plugin-selectable
+  - 新增行为插件，消费 `input:node-click` 与 `input:direction`
+  - 支持单选/多选与 Shift 范围选择
+  - 配置聚合到 `configuration.selectable`：`multiple/defaultSelected`

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Michael Cocova
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,51 @@
+# @splicetree/plugin-selectable
+
+提供选择与激活能力，支持单选/多选与 Shift 范围选择；消费 `input:node-click` 与 `input:direction` 语义事件。
+
+[![version](https://img.shields.io/npm/v/@splicetree/plugin-selectable.svg?label=version)](https://www.npmjs.com/package/@splicetree/plugin-selectable)
+[![downloads](https://img.shields.io/npm/dm/@splicetree/plugin-selectable.svg)](https://npmcharts.com/compare/%40splicetree%2Fplugin-selectable?minimal=true)
+[![license](https://img.shields.io/npm/l/@splicetree/plugin-selectable.svg)](https://www.npmjs.com/package/@splicetree/plugin-selectable)
+[![Website](https://img.shields.io/static/v1?label=Website&message=splicetree.dev&color=blue)](https://www.splicetree.dev)
+[![GitHub](https://img.shields.io/static/v1?label=GitHub&message=splicetree%2Fsplicetree&logo=github)](https://github.com/michaelcocova/splicetree)
+
+## 安装
+
+`pnpm add @splicetree/plugin-selectable`
+
+## 使用
+
+```ts
+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
+
+- 实例
+  - `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[]` 默认选中集合

package/dist/index.d.ts

@@ -0,0 +1,42 @@
+import { SpliceTreePlugin } from "@splicetree/core";
+
+//#region src/index.d.ts
+interface Modifiers {
+  shift: boolean;
+  ctrl: boolean;
+  meta: boolean;
+  alt: boolean;
+}
+interface SelectableOptions {
+  multiple?: boolean;
+  defaultSelected?: string[];
+}
+declare module '@splicetree/core' {
+  interface SpliceTreeConfiguration {
+    selectable?: SelectableOptions;
+  }
+  interface SpliceTreeEventPayloadMap {
+    'input:direction': {
+      direction: 'up' | 'down' | 'left' | 'right';
+      modifiers: Modifiers;
+    };
+    'input:node-click': {
+      nodeId: string;
+      modifiers: Modifiers;
+    };
+  }
+  interface SpliceTreeInstance {
+    selectedKeys: Set<string>;
+    lastSelectedKey?: string;
+    activeId?: string;
+    isSelected: (id: string) => boolean;
+    toggleSelect: (id: string, selected?: boolean) => void;
+  }
+  interface SpliceTreeNode {
+    isSelected: () => boolean;
+    toggleSelect: (selected?: boolean) => void;
+  }
+}
+declare const selectablePlugin: SpliceTreePlugin;
+//#endregion
+export { SelectableOptions, selectablePlugin as default, selectablePlugin };

package/dist/index.js

@@ -0,0 +1,108 @@
+//#region src/index.ts
+function getOptions(ctx) {
+	const o = ctx.options?.configuration?.selectable;
+	return {
+		multiple: o?.multiple ?? false,
+		defaultSelected: o?.defaultSelected ?? []
+	};
+}
+const selectablePlugin = {
+	name: "selectable",
+	setup(ctx) {
+		const { multiple, defaultSelected } = getOptions(ctx);
+		const selectedKeys = new Set(defaultSelected);
+		let lastSelectedKey;
+		const isSelected = (id) => selectedKeys.has(id);
+		const toggleSelect = (id, selected) => {
+			const has = selectedKeys.has(id);
+			if (selected ?? !has) {
+				if (!multiple) selectedKeys.clear();
+				selectedKeys.add(id);
+			} else selectedKeys.delete(id);
+			lastSelectedKey = id;
+			ctx.tree.activeId = id;
+			ctx.events.emit({
+				name: "visibility",
+				keys: ctx.tree.expandedKeys()
+			});
+		};
+		const selectRange = (fromId, toId) => {
+			const items = ctx.tree.items();
+			const a = items.findIndex((n) => n.id === fromId);
+			const b = items.findIndex((n) => n.id === toId);
+			if (a < 0 || b < 0) return;
+			const [s, e] = a < b ? [a, b] : [b, a];
+			for (let i = s; i <= e; i++) selectedKeys.add(items[i].id);
+			lastSelectedKey = toId;
+			ctx.tree.activeId = toId;
+			ctx.events.emit({
+				name: "visibility",
+				keys: ctx.tree.expandedKeys()
+			});
+		};
+		ctx.events.on("input:node-click", (p) => {
+			const nodeId = p.nodeId;
+			const modifiers = p.modifiers;
+			if (!ctx.tree.getNode(nodeId)) return;
+			const shift = modifiers.shift;
+			const multiToggle = multiple && (modifiers.ctrl || modifiers.meta);
+			if (shift && lastSelectedKey) selectRange(lastSelectedKey, nodeId);
+			else if (multiToggle) toggleSelect(nodeId);
+			else toggleSelect(nodeId, true);
+		});
+		ctx.events.on("input:direction", (p) => {
+			const direction = p.direction;
+			const modifiers = p.modifiers;
+			const items = ctx.tree.items();
+			const activeId = ctx.tree.activeId;
+			if (!activeId) return;
+			const idx = items.findIndex((n) => n.id === activeId);
+			if (idx < 0) return;
+			if (direction === "left" || direction === "right") {
+				const node = ctx.tree.getNode(activeId);
+				if (!node) return;
+				if (direction === "left") if (node.isExpanded()) node.toggleExpand(false);
+				else {
+					const parent = node.getParent();
+					if (parent) {
+						ctx.tree.activeId = parent.id;
+						if (!(modifiers.ctrl || modifiers.meta)) toggleSelect(parent.id, true);
+					}
+				}
+				else if (direction === "right") {
+					if (node.hasChildren()) {
+						node.toggleExpand(true);
+						if (!(modifiers.ctrl || modifiers.meta)) toggleSelect(node.id, true);
+					}
+				}
+				return;
+			}
+			let nextIdx = idx;
+			if (direction === "up") nextIdx = Math.max(0, idx - 1);
+			else if (direction === "down") nextIdx = Math.min(items.length - 1, idx + 1);
+			const nextId = items[nextIdx]?.id;
+			if (!nextId) return;
+			ctx.tree.activeId = nextId;
+			if (modifiers.shift && multiple && lastSelectedKey) selectRange(lastSelectedKey, nextId);
+			else if (!(modifiers.ctrl || modifiers.meta)) toggleSelect(nextId, true);
+		});
+		for (const id of defaultSelected) {
+			selectedKeys.add(id);
+			lastSelectedKey = id;
+		}
+		return {
+			selectedKeys,
+			lastSelectedKey,
+			isSelected,
+			toggleSelect
+		};
+	},
+	extendNode(node, ctx) {
+		node.isSelected = () => ctx.tree.isSelected(node.id);
+		node.toggleSelect = (selected) => ctx.tree.toggleSelect(node.id, selected);
+	}
+};
+var src_default = selectablePlugin;
+
+//#endregion
+export { src_default as default, selectablePlugin };

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@splicetree/plugin-selectable",
+  "type": "module",
+  "version": "0.1.1",
+  "author": {
+    "email": "michael.cocova@gmail.com",
+    "name": "Michael Cocova"
+  },
+  "license": "MIT",
+  "homepage": "https://www.splicetree.dev",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/michaelcocova/splicetree"
+  },
+  "exports": {
+    ".": "./dist/index.js",
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@splicetree/core": "0.1.1"
+  },
+  "scripts": {
+    "dev": "tsdown --watch",
+    "build": "tsdown"
+  }
+}

package/src/index.ts

@@ -0,0 +1,183 @@
+import type { SpliceTreeNode, SpliceTreePlugin, SpliceTreePluginContext } from '@splicetree/core'
+import '@splicetree/core'
+
+interface Modifiers {
+  shift: boolean
+  ctrl: boolean
+  meta: boolean
+  alt: boolean
+}
+
+export interface SelectableOptions {
+  multiple?: boolean
+  defaultSelected?: string[]
+}
+
+declare module '@splicetree/core' {
+  export interface SpliceTreeConfiguration {
+    selectable?: SelectableOptions
+  }
+  export interface SpliceTreeEventPayloadMap {
+    'input:direction': {
+      direction: 'up' | 'down' | 'left' | 'right'
+      modifiers: Modifiers
+    }
+    'input:node-click': {
+      nodeId: string
+      modifiers: Modifiers
+    }
+  }
+  export interface SpliceTreeInstance {
+    selectedKeys: Set<string>
+    lastSelectedKey?: string
+    activeId?: string
+    isSelected: (id: string) => boolean
+    toggleSelect: (id: string, selected?: boolean) => void
+  }
+  export interface SpliceTreeNode {
+    isSelected: () => boolean
+    toggleSelect: (selected?: boolean) => void
+  }
+}
+
+function getOptions(ctx: SpliceTreePluginContext): Required<SelectableOptions> {
+  const o = ctx.options?.configuration?.selectable
+  return {
+    multiple: o?.multiple ?? false,
+    defaultSelected: o?.defaultSelected ?? [],
+  }
+}
+
+export const selectablePlugin: SpliceTreePlugin = {
+  name: 'selectable',
+  setup(ctx: SpliceTreePluginContext) {
+    const { multiple, defaultSelected } = getOptions(ctx)
+    const selectedKeys = new Set<string>(defaultSelected)
+    let lastSelectedKey: string | undefined
+
+    const isSelected = (id: string) => selectedKeys.has(id)
+    const toggleSelect = (id: string, selected?: boolean) => {
+      const has = selectedKeys.has(id)
+      const next = selected ?? !has
+      if (next) {
+        if (!multiple) {
+          selectedKeys.clear()
+        }
+        selectedKeys.add(id)
+      } else {
+        selectedKeys.delete(id)
+      }
+      lastSelectedKey = id
+      ctx.tree.activeId = id
+      ctx.events.emit({ name: 'visibility', keys: ctx.tree.expandedKeys() })
+    }
+
+    const selectRange = (fromId: string, toId: string) => {
+      const items: SpliceTreeNode[] = ctx.tree.items()
+      const a = items.findIndex((n: SpliceTreeNode) => n.id === fromId)
+      const b = items.findIndex((n: SpliceTreeNode) => n.id === toId)
+      if (a < 0 || b < 0) {
+        return
+      }
+      const [s, e] = a < b ? [a, b] : [b, a]
+      for (let i = s; i <= e; i++) {
+        selectedKeys.add((items[i] as SpliceTreeNode).id)
+      }
+      lastSelectedKey = toId
+      ctx.tree.activeId = toId
+      ctx.events.emit({ name: 'visibility', keys: ctx.tree.expandedKeys() })
+    }
+
+    ctx.events.on('input:node-click', (p: any) => {
+      const nodeId = p.nodeId as string
+      const modifiers = p.modifiers as Modifiers
+      if (!ctx.tree.getNode(nodeId)) {
+        return
+      }
+      const shift = modifiers.shift
+      const multiToggle = multiple && (modifiers.ctrl || modifiers.meta)
+      if (shift && lastSelectedKey) {
+        selectRange(lastSelectedKey, nodeId)
+      } else if (multiToggle) {
+        toggleSelect(nodeId)
+      } else {
+        toggleSelect(nodeId, true)
+      }
+    })
+
+    ctx.events.on('input:direction', (p: any) => {
+      const direction = p.direction as 'up' | 'down' | 'left' | 'right'
+      const modifiers = p.modifiers as Modifiers
+      const items: SpliceTreeNode[] = ctx.tree.items()
+      const activeId = ctx.tree.activeId
+      if (!activeId) {
+        return
+      }
+      const idx = items.findIndex((n: SpliceTreeNode) => n.id === activeId)
+      if (idx < 0) {
+        return
+      }
+      if (direction === 'left' || direction === 'right') {
+        const node = ctx.tree.getNode(activeId) as SpliceTreeNode | undefined
+        if (!node) {
+          return
+        }
+        if (direction === 'left') {
+          if (node.isExpanded()) {
+            node.toggleExpand(false)
+          } else {
+            const parent = node.getParent() as SpliceTreeNode | undefined
+            if (parent) {
+              ctx.tree.activeId = parent.id
+              if (!(modifiers.ctrl || modifiers.meta)) {
+                toggleSelect(parent.id, true)
+              }
+            }
+          }
+        } else if (direction === 'right') {
+          if (node.hasChildren()) {
+            node.toggleExpand(true)
+            if (!(modifiers.ctrl || modifiers.meta)) {
+              toggleSelect(node.id, true)
+            }
+          }
+        }
+        return
+      }
+      let nextIdx = idx
+      if (direction === 'up') {
+        nextIdx = Math.max(0, idx - 1)
+      } else if (direction === 'down') {
+        nextIdx = Math.min(items.length - 1, idx + 1)
+      }
+      const nextId = (items[nextIdx] as SpliceTreeNode | undefined)?.id
+      if (!nextId) {
+        return
+      }
+      ctx.tree.activeId = nextId
+      if (modifiers.shift && multiple && lastSelectedKey) {
+        selectRange(lastSelectedKey, nextId)
+      } else if (!(modifiers.ctrl || modifiers.meta)) {
+        toggleSelect(nextId, true)
+      }
+    })
+
+    for (const id of defaultSelected) {
+      selectedKeys.add(id)
+      lastSelectedKey = id
+    }
+
+    return {
+      selectedKeys,
+      lastSelectedKey,
+      isSelected,
+      toggleSelect,
+    }
+  },
+  extendNode(node: SpliceTreeNode, ctx: SpliceTreePluginContext) {
+    node.isSelected = () => ctx.tree.isSelected(node.id)
+    node.toggleSelect = (selected?: boolean) => ctx.tree.toggleSelect(node.id, selected)
+  },
+}
+
+export default selectablePlugin

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "declaration": true,
+    "outDir": "dist"
+  },
+  "include": ["src"],
+  "exclude": ["dist", "node_modules"]
+}

package/tsdown.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'tsdown'
+
+export default defineConfig({
+  clean: true,
+  sourcemap: false,
+  treeshake: true,
+  unused: true,
+  unbundle: false,
+  platform: 'neutral',
+  entry: ['./src/index.ts'],
+})