@vgridex/plugin-shift-range-selection

Shift range selection adds Excel-like Shift + click selection to VGridex. Users can click one cell as an anchor, then hold Shift and click another cell to select the rectangular range between them.

Shift 范围选择为 VGridex 提供类似 Excel 的 Shift + 点击能力。用户先点击一个单元格作为锚点，再按住 Shift 点击另一个单元格，即可选中两者之间的矩形区域。

Installation / 安装

pnpm add @vgridex/core @vgridex/plugin-shift-range-selection

Usage / 使用方式

<template>
  <VGridex ref="tableRef" :rowColumnConfig="rowColumnConfig" />
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import VGridex from '@vgridex/core'
import '@vgridex/core/style.css'
import { clickSelectPlugin } from '@vgridex/plugin-click-selection'
import { shiftRangeSelectPlugin } from '@vgridex/plugin-shift-range-selection'

const tableRef = ref<InstanceType<typeof VGridex> | null>(null)

onMounted(() => {
  tableRef.value?.use(clickSelectPlugin)
  tableRef.value?.use(shiftRangeSelectPlugin)
})
</script>

Interaction / 交互说明

• Click a cell to set the anchor.
• 单击单元格会设置范围选择的锚点。
• Hold Shift and click another cell to select the rectangle from the anchor to the clicked cell.
• 按住 Shift 点击另一个单元格，会选中从锚点到目标单元格之间的矩形区域。
• Repeating Shift + click changes the range while keeping the same anchor.
• 连续执行 Shift + 点击会基于同一个锚点更新范围。
• A normal click updates the anchor.
• 普通点击会更新锚点。

Examples / 交互示例

Basic range selection / 基础范围选择：

Initial selection: none
初始选区：无

Click 0-0
点击 0-0
=> anchor: 0-0
=> 锚点：0-0

Shift + click 2-1
Shift + 点击 2-1
=> selected: [0-0, 0-1, 1-0, 1-1, 2-0, 2-1]
=> 当前选区：[0-0, 0-1, 1-0, 1-1, 2-0, 2-1]

Update the range with the same anchor / 基于同一锚点更新范围：

Current anchor: 0-0
当前锚点：0-0

Shift + click 1-2
Shift + 点击 1-2
=> selected: [0-0, 0-1, 0-2, 1-0, 1-1, 1-2]
=> 当前选区：[0-0, 0-1, 0-2, 1-0, 1-1, 1-2]

Click 3-3
点击 3-3
=> anchor: 3-3
=> 锚点更新为：3-3

Common Combinations / 常见搭配

• Use with @vgridex/plugin-click-selection; it provides the normal click behavior that establishes the anchor.
• 需要搭配 @vgridex/plugin-click-selection 使用，它负责普通点击行为和锚点建立。
• Use with @vgridex/plugin-drag-selection when users also need mouse drag ranges.
• 如果还需要鼠标拖拽范围选择，可以搭配 @vgridex/plugin-drag-selection。
• Use @vgridex/preset-basic-plugins if you want the recommended selection stack.
• 如果希望使用推荐的完整选择插件组合，可以直接使用 @vgridex/preset-basic-plugins。

Notes / 注意事项

Shift range selection replaces the current selection with the anchor-to-target rectangle. For non-contiguous cells, combine it with modifier-click from @vgridex/plugin-click-selection.

Shift 范围选择会用锚点到目标单元格之间的矩形区域替换当前选区。如果需要不连续选区，可以搭配 @vgridex/plugin-click-selection 的修饰键点击能力。

Links / 链接

• Repository / 仓库：https://github.com/DraxWu/web-excel-table
• Issues / 问题反馈：https://github.com/DraxWu/web-excel-table/issues