@vgridex/plugin-drag-selection

Drag selection adds mouse-based rectangular range selection to VGridex. Users can press, drag across cells, and release to select a range.

拖拽选择为 VGridex 提供基于鼠标的矩形范围选择能力，用户可以按下鼠标、拖过多个单元格并松开来形成选区。

Installation / 安装

pnpm add @vgridex/core @vgridex/plugin-drag-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 { dragSelectPlugin } from '@vgridex/plugin-drag-selection'

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

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

Interaction / 交互说明

• Drag from one cell to another to select the rectangular area between them.
• 从一个单元格拖拽到另一个单元格，会选中两者之间的矩形区域。
• Press Cmd on macOS or Ctrl on Windows/Linux while dragging to add the dragged range to the current selection.
• 拖拽时按住 macOS 的 Cmd 或 Windows/Linux 的 Ctrl，可以把拖拽区域追加到当前选区。
• A plain click inside the same cell is left to @vgridex/plugin-click-selection.
• 同一个单元格内的普通点击会交给 @vgridex/plugin-click-selection 处理。
• Drag updates are throttled with requestAnimationFrame.
• 拖拽过程中的选区更新使用 requestAnimationFrame 节流。

Examples / 交互示例

Basic drag selection / 基础拖拽选择：

Initial selection: none
初始选区：无

Drag from 0-0 to 2-1
从 0-0 拖拽到 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]

Add a dragged range / 追加拖拽区域：

Initial selection: [4-4]
初始选区：[4-4]

Cmd/Ctrl + drag from 0-0 to 1-1
Cmd/Ctrl + 从 0-0 拖拽到 1-1
=> selected: [4-4, 0-0, 0-1, 1-0, 1-1]
=> 当前选区：[4-4, 0-0, 0-1, 1-0, 1-1]

Common Combinations / 常见搭配

• Use with @vgridex/plugin-click-selection so plain clicks and drag ranges both work naturally.
• 搭配 @vgridex/plugin-click-selection 可以同时支持普通点击和拖拽范围选择。
• Use with @vgridex/plugin-copy-paste to copy or paste rectangular ranges.
• 搭配 @vgridex/plugin-copy-paste 可以对矩形选区进行复制粘贴。
• Use @vgridex/preset-basic-plugins for the official default combination.
• 如果希望使用官方默认组合，可以直接使用 @vgridex/preset-basic-plugins。

Notes / 注意事项

This plugin only updates the selection. It does not modify cell data.

该插件只更新选区，不会修改单元格数据。

Links / 链接

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