Skip to content

Commit

Permalink
docs: add resize docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@wjgogogo
wjgogogo committed Dec 6, 2021
1 parent 8686fd1 commit 79236cc
Show file tree
Hide file tree
Showing 4 changed files with 142 additions and 76 deletions.
11 changes: 10 additions & 1 deletion s2-site/docs/common/interaction.zh.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ title: 交互
order: 5
---


## Interaction

| 参数 | 说明 | 类型 | 默认值 | 必选 |
Expand All @@ -17,6 +16,7 @@ order: 5
| customInteractions | 自定义交互 | [CustomInteraction[]](#custominteraction) | | |
| scrollSpeedRatio | 用于控制滚动速率，分水平和垂直两个方向，默认为 1 | [ScrollRatio](/zh/docs/api/general/S2Options#scrollratio)| | |
| autoResetSheetStyle | 用于控制点击表格外区域和按下 esc 键时是否重置交互状态 | `boolean` | `true` | |
| resize | 用于控制 resize 热区是否显示 | `boolean`|[ResizeActiveOptions](/zh/docs/api/general/S2Options#resizeactiveoptions) | `true` | |

### CustomInteraction

Expand All @@ -35,3 +35,12 @@ interface ScrollRatio {
vertical?: number; // 垂直滚动速率，默认为 1
}
```

### ResizeActiveOptions

| 参数 | 说明 | 类型 | 默认值 | 必选 |
| --- | --- | --- | --- | :-: |
| rowCellVertical | 是否开启行头垂直方向 resize 热区 | `boolean` | | |
| cornerCellHorizontal | 是否开启角头水平方向 resize 热区 | `boolean` | | |
| colCellHorizontal | 是否开启列头水平方向 resize 热区 | `boolean` | | |
| colCellVertical | 是否开启列头垂直方向 resize 热区 | `boolean` | | |
173 changes: 98 additions & 75 deletions s2-site/docs/manual/advanced/interaction/basic.zh.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,19 +19,19 @@ order: 0

## 内置交互

| 名称 | 事件名 | 描述 |
| :-- | :-- | :-- |
| 单选 | `S2Event.GLOBAL_SELECTED` | 单击单元格，弹出 tooltip, 展示对应单元格的信息，再次单击取消选中 |
| 多选 | `S2Event.GLOBAL_SELECTED` | 单选单元格后，按住 `Shift` 键，继续单选 |
| 行/列头快捷多选 | `S2Event.GLOBAL_SELECTED` | 单击行/列头，选中对应行/列头所有单元格 （含不在可视范围内的）, 再次单击取消选中 |
| 行/列头手动调整宽高 | `S2Event.LAYOUT_RESIZE` | 鼠标悬浮在行/列头单元格边缘，出现指示条和光标，按住鼠标左键拖动，调整宽高 |
| 刷选 | `S2Event.GLOBAL_BRUSH_SELECTION` `S2Event.GLOBAL_SELECTED` | 批量选中刷选范围内的单元格，刷选过程中，显示刷选范围提示蒙层，刷选完成后，弹出 tooltip, 展示被刷选单元格信息和数量 |
| 快捷多选 | `S2Event.GLOBAL_SELECTED` | Command点击 单个增量多选; shift单击 start -> end的区间选择 |
| 悬停 | `S2Event.GLOBAL_HOVER` | 鼠标悬停时，对应单元格高亮展示，如果是数值单元格，则默认 [十字高亮](#十字高亮） （对应行/列), 可设置 `hoverHighlight: false` 关闭 |
| 复制 | `S2Event.GLOBAL_COPIED` | 复制选中的单元格数据 |
| 隐藏列头 | `S2Event.LAYOUT_TABLE_COL_EXPANDED` `S2Event.LAYOUT_TABLE_COL_HIDDEN` | 隐藏/展开 列头 （明细表有效） |
| 链接跳转 | `S2Event.GLOBAL_LINK_FIELD_JUMP` | 行头/列头 链接跳转 |
| 重置 | `S2Event.GLOBAL_RESET` | 再次点击，点击空白处，或按下 `Esc` 取消选中的单元格 |
| 名称 | 事件名 | 描述 |
| :------------------ | :-------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------- |
| 单选 | `S2Event.GLOBAL_SELECTED` | 单击单元格，弹出 tooltip, 展示对应单元格的信息，再次单击取消选中 |
| 多选 | `S2Event.GLOBAL_SELECTED` | 单选单元格后，按住 `Shift` 键，继续单选 |
| 行/列头快捷多选 | `S2Event.GLOBAL_SELECTED` | 单击行/列头，选中对应行/列头所有单元格 （含不在可视范围内的）, 再次单击取消选中 |
| 行/列头手动调整宽高 | `S2Event.LAYOUT_RESIZE` | 鼠标悬浮在行/列头单元格边缘，出现指示条和光标，按住鼠标左键拖动，调整宽高 |
| 刷选 | `S2Event.GLOBAL_BRUSH_SELECTION` `S2Event.GLOBAL_SELECTED` | 批量选中刷选范围内的单元格，刷选过程中，显示刷选范围提示蒙层，刷选完成后，弹出 tooltip, 展示被刷选单元格信息和数量 |
| 快捷多选 | `S2Event.GLOBAL_SELECTED` | Command 点击 单个增量多选；shift 单击 start -> end 的区间选择 |
| 悬停 | `S2Event.GLOBAL_HOVER` | 鼠标悬停时，对应单元格高亮展示，如果是数值单元格，则默认 [十字高亮](#十字高亮） （对应行/列), 可设置 `hoverHighlight: false` 关闭 |
| 复制 | `S2Event.GLOBAL_COPIED` | 复制选中的单元格数据 |
| 隐藏列头 | `S2Event.LAYOUT_TABLE_COL_EXPANDED` `S2Event.LAYOUT_TABLE_COL_HIDDEN` | 隐藏/展开 列头 （明细表有效） |
| 链接跳转 | `S2Event.GLOBAL_LINK_FIELD_JUMP` | 行头/列头 链接跳转 |
| 重置 | `S2Event.GLOBAL_RESET` | 再次点击，点击空白处，或按下 `Esc` 取消选中的单元格 |

## 交互事件

Expand All @@ -46,82 +46,82 @@ order: 0

### 行头

| 名称 | 事件名 | 描述 |
| :-- | :-- | :-- |
| 展开树状结构 | `S2Event.ROW_CELL_COLLAPSE_TREE_ROWS` | 树状结构下，行头单元格展开 |
| 点击 | `S2Event.ROW_CELL_CLICK` | 行头单元格点击 |
| 双击 | `S2Event.ROW_CELL_DOUBLE_CLICK` | 行头单元格双击 |
| 悬停 | `S2Event.ROW_CELL_HOVER` | 行头单元格悬停 |
| 鼠标按下 | `S2Event.ROW_CELL_MOUSE_DOWN` | 行头单元格鼠标按下 |
| 鼠标移动 | `S2Event.ROW_CELL_MOUSE_MOVE` | 行头单元格鼠标移动 |
| 鼠标松开 | `S2Event.ROW_CELL_MOUSE_UP` | 行头单元格鼠标松开 |
| 名称 | 事件名 | 描述 |
| :----------- | :------------------------------------ | :------------------------- |
| 展开树状结构 | `S2Event.ROW_CELL_COLLAPSE_TREE_ROWS` | 树状结构下，行头单元格展开 |
| 点击 | `S2Event.ROW_CELL_CLICK` | 行头单元格点击 |
| 双击 | `S2Event.ROW_CELL_DOUBLE_CLICK` | 行头单元格双击 |
| 悬停 | `S2Event.ROW_CELL_HOVER` | 行头单元格悬停 |
| 鼠标按下 | `S2Event.ROW_CELL_MOUSE_DOWN` | 行头单元格鼠标按下 |
| 鼠标移动 | `S2Event.ROW_CELL_MOUSE_MOVE` | 行头单元格鼠标移动 |
| 鼠标松开 | `S2Event.ROW_CELL_MOUSE_UP` | 行头单元格鼠标松开 |

### 列头

| 名称 | 事件名 | 描述 |
| :-- | :-- | :-- |
| 点击 | `S2Event.COL_CELL_CLICK` | 列头单元格点击 |
| 双击 | `S2Event.COL_CELL_DOUBLE_CLICK` | 列头单元格双击 |
| 悬停 | `S2Event.COL_CELL_HOVER` | 列头单元格悬停 |
| 鼠标按下 | `S2Event.COL_CELL_MOUSE_DOWN` | 列头单元格鼠标按下 |
| 鼠标移动 | `S2Event.COL_CELL_MOUSE_MOVE` | 列头单元格鼠标移动 |
| 鼠标松开 | `S2Event.COL_CELL_MOUSE_UP` | 列头单元格鼠标松开 |
| 名称 | 事件名 | 描述 |
| :------- | :------------------------------ | :----------------- |
| 点击 | `S2Event.COL_CELL_CLICK` | 列头单元格点击 |
| 双击 | `S2Event.COL_CELL_DOUBLE_CLICK` | 列头单元格双击 |
| 悬停 | `S2Event.COL_CELL_HOVER` | 列头单元格悬停 |
| 鼠标按下 | `S2Event.COL_CELL_MOUSE_DOWN` | 列头单元格鼠标按下 |
| 鼠标移动 | `S2Event.COL_CELL_MOUSE_MOVE` | 列头单元格鼠标移动 |
| 鼠标松开 | `S2Event.COL_CELL_MOUSE_UP` | 列头单元格鼠标松开 |

### 数值单元格

| 名称 | 事件名 | 描述 |
| :-- | :-- | :-- |
| 点击 | `S2Event.DATA_CELL_CLICK` | 数值单元格点击 |
| 双击 | `S2Event.DATA_CELL_DOUBLE_CLICK` | 数值单元格双击 |
| 悬停 | `S2Event.DATA_CELL_HOVER` | 数值单元格悬停 |
| 鼠标按下 | `S2Event.DATA_CELL_MOUSE_DOWN` | 数值单元格鼠标按下 |
| 鼠标移动 | `S2Event.DATA_CELL_MOUSE_MOVE` | 数值单元格鼠标移动 |
| 鼠标松开 | `S2Event.DATA_CELL_MOUSE_UP` | 数值单元格鼠标松开 |
| 趋势 icon 点击 | `S2Event.DATA_CELL_TREND_ICON_CLICK` | 数值单元格 tooltip 里面的趋势 icon 点击 |
| 刷选 | `S2Event.DATE_CELL_BRUSH_SELECTION` | 数值单元格刷选 |
| 名称 | 事件名 | 描述 |
| :------------- | :----------------------------------- | :-------------------------------------- |
| 点击 | `S2Event.DATA_CELL_CLICK` | 数值单元格点击 |
| 双击 | `S2Event.DATA_CELL_DOUBLE_CLICK` | 数值单元格双击 |
| 悬停 | `S2Event.DATA_CELL_HOVER` | 数值单元格悬停 |
| 鼠标按下 | `S2Event.DATA_CELL_MOUSE_DOWN` | 数值单元格鼠标按下 |
| 鼠标移动 | `S2Event.DATA_CELL_MOUSE_MOVE` | 数值单元格鼠标移动 |
| 鼠标松开 | `S2Event.DATA_CELL_MOUSE_UP` | 数值单元格鼠标松开 |
| 趋势 icon 点击 | `S2Event.DATA_CELL_TREND_ICON_CLICK` | 数值单元格 tooltip 里面的趋势 icon 点击 |
| 刷选 | `S2Event.DATE_CELL_BRUSH_SELECTION` | 数值单元格刷选 |

### 角头

| 名称 | 事件名 | 描述 |
| :-- | :-- | :-- |
| 点击 | `S2Event.CORNER_CELL_CLICK` | 角头单元格点击 |
| 双击 | `S2Event.CORNER_CELL_DOUBLE_CLICK` | 角头单元格双击 |
| 悬停 | `S2Event.CORNER_CELL_HOVER` | 角头单元格悬停 |
| 鼠标按下 | `S2Event.CORNER_CELL_MOUSE_DOWN` | 角头单元格鼠标按下 |
| 鼠标移动 | `S2Event.CORNER_CELL_MOUSE_MOVE` | 角头单元格鼠标移动 |
| 鼠标松开 | `S2Event.CORNER_CELL_MOUSE_UP` | 角头单元格鼠标松开 |
| 名称 | 事件名 | 描述 |
| :------- | :--------------------------------- | :----------------- |
| 点击 | `S2Event.CORNER_CELL_CLICK` | 角头单元格点击 |
| 双击 | `S2Event.CORNER_CELL_DOUBLE_CLICK` | 角头单元格双击 |
| 悬停 | `S2Event.CORNER_CELL_HOVER` | 角头单元格悬停 |
| 鼠标按下 | `S2Event.CORNER_CELL_MOUSE_DOWN` | 角头单元格鼠标按下 |
| 鼠标移动 | `S2Event.CORNER_CELL_MOUSE_MOVE` | 角头单元格鼠标移动 |
| 鼠标松开 | `S2Event.CORNER_CELL_MOUSE_UP` | 角头单元格鼠标松开 |

### 布局

| 名称 | 事件名 | 描述 |
| :-- | :-- | :-- |
| 单元格调整 | `S2Event.LAYOUT_RESIZE` | 单元格宽高发生改变 |
| 调整单元格大小时鼠标按下 | `S2Event.LAYOUT_RESIZE_MOUSE_DOWN` | 调整单元格大小鼠标按下，目前仅 行/列 头有效 |
| 调整单元格大小时鼠标移动 | `S2Event.LAYOUT_RESIZE_MOUSE_MOVE` | 调整单元格大小鼠标移动，目前仅 行/列 头有效 |
| 调整单元格大小时鼠标松开 | `S2Event.LAYOUT_RESIZE_MOUSE_UP` | 调整单元格大小鼠标松开，目前仅 行/列 头有效 |
| 行头宽度改变 | `S2Event.LAYOUT_RESIZE_ROW_WIDTH` | |
| 行头高度改变 | `S2Event.LAYOUT_RESIZE_ROW_HEIGHT` | |
| 列头宽度改变 | `S2Event.LAYOUT_RESIZE_COL_WIDTH` | |
| 行头宽度改变 | `S2Event.LAYOUT_RESIZE_COL_HEIGHT` | |
| 树状结构宽度改变 | `S2Event.LAYOUT_RESIZE_TREE_WIDTH` | 树状模式下，单元格宽度发生改变时触发 |
| 列头展开 | `S2Event.LAYOUT_TABLE_COL_EXPANDED` | 列头展开时触发，明细表有效 |
| 列头隐藏 | `S2Event.LAYOUT_TABLE_COL_HIDDEN` | 列头隐藏时触发，明细表有效 |
| 名称 | 事件名 | 描述 |
| :----------------------- | :---------------------------------- | :------------------------------------------ |
| 单元格调整 | `S2Event.LAYOUT_RESIZE` | 单元格宽高发生改变 |
| 调整单元格大小时鼠标按下 | `S2Event.LAYOUT_RESIZE_MOUSE_DOWN` | 调整单元格大小鼠标按下，目前仅 行/列 头有效 |
| 调整单元格大小时鼠标移动 | `S2Event.LAYOUT_RESIZE_MOUSE_MOVE` | 调整单元格大小鼠标移动，目前仅 行/列 头有效 |
| 调整单元格大小时鼠标松开 | `S2Event.LAYOUT_RESIZE_MOUSE_UP` | 调整单元格大小鼠标松开，目前仅 行/列 头有效 |
| 行头宽度改变 | `S2Event.LAYOUT_RESIZE_ROW_WIDTH` | |
| 行头高度改变 | `S2Event.LAYOUT_RESIZE_ROW_HEIGHT` | |
| 列头宽度改变 | `S2Event.LAYOUT_RESIZE_COL_WIDTH` | |
| 行头宽度改变 | `S2Event.LAYOUT_RESIZE_COL_HEIGHT` | |
| 树状结构宽度改变 | `S2Event.LAYOUT_RESIZE_TREE_WIDTH` | 树状模式下，单元格宽度发生改变时触发 |
| 列头展开 | `S2Event.LAYOUT_TABLE_COL_EXPANDED` | 列头展开时触发，明细表有效 |
| 列头隐藏 | `S2Event.LAYOUT_TABLE_COL_HIDDEN` | 列头隐藏时触发，明细表有效 |

### 全局

| 名称 | 事件名 | 描述 |
| :-- | :-- | :-- |
| 键盘按下 | `S2Event.GLOBAL_KEYBOARD_DOWN` | 键盘按下 |
| 键盘松开 | `S2Event.GLOBAL_KEYBOARD_UP` | 键盘松开 |
| 复制 | `S2Event.GLOBAL_COPIED` | 对选中的单元格复制 |
| 鼠标松开 | `S2Event.GLOBAL_MOUSE_UP` | 鼠标松开 |
| 右键 | `S2Event.GLOBAL_CONTEXT_MENU` | 图表区域按下右键 |
| 选中 | `S2Event.GLOBAL_SELECTED` | 选中单元格时，如：刷选，多选，单选 |
| 悬停 | `S2Event.GLOBAL_HOVER` | 鼠标悬停在单元格 |
| 重置 | `S2Event.GLOBAL_RESET` | 点击空白处，按下 Esc, 键等重置交互样式时 |
| 链接跳转 | `S2Event.GLOBAL_LINK_FIELD_JUMP` | 点击行列头被编辑为链接字段的文本时 |
| icon 点击 | `S2Event.GLOBAL_ACTION_ICON_CLICK` | 单元格右侧的操作 icon 点击时，比如：排序图标 |
| icon 悬停 | `S2Event.GLOBAL_ACTION_ICON_HOVER` | 单元格右侧的操作 icon 悬停时，比如：排序图标 |
| 名称 | 事件名 | 描述 |
| :-------- | :--------------------------------- | :------------------------------------------- |
| 键盘按下 | `S2Event.GLOBAL_KEYBOARD_DOWN` | 键盘按下 |
| 键盘松开 | `S2Event.GLOBAL_KEYBOARD_UP` | 键盘松开 |
| 复制 | `S2Event.GLOBAL_COPIED` | 对选中的单元格复制 |
| 鼠标松开 | `S2Event.GLOBAL_MOUSE_UP` | 鼠标松开 |
| 右键 | `S2Event.GLOBAL_CONTEXT_MENU` | 图表区域按下右键 |
| 选中 | `S2Event.GLOBAL_SELECTED` | 选中单元格时，如：刷选，多选，单选 |
| 悬停 | `S2Event.GLOBAL_HOVER` | 鼠标悬停在单元格 |
| 重置 | `S2Event.GLOBAL_RESET` | 点击空白处，按下 Esc, 键等重置交互样式时 |
| 链接跳转 | `S2Event.GLOBAL_LINK_FIELD_JUMP` | 点击行列头被编辑为链接字段的文本时 |
| icon 点击 | `S2Event.GLOBAL_ACTION_ICON_CLICK` | 单元格右侧的操作 icon 点击时，比如：排序图标 |
| icon 悬停 | `S2Event.GLOBAL_ACTION_ICON_HOVER` | 单元格右侧的操作 icon 悬停时，比如：排序图标 |

</details>

Expand Down Expand Up @@ -259,7 +259,7 @@ const s2options = {

## 自定义滚动速度

可配置 `scrollSpeedRatio` 控制滚动速率，分为 `水平` 和 `垂直` 两个方向，默认为 1. [查看具体例子](http://localhost:8001/zh/examples/interaction/advanced#scroll-speed-ratio)
可配置 `scrollSpeedRatio` 控制滚动速率，分为 `水平` 和 `垂直` 两个方向，默认为 1。 [查看具体例子](/zh/examples/interaction/advanced#scroll-speed-ratio)

```ts
const s2options = {
Expand All @@ -272,6 +272,29 @@ const s2options = {
};
```

## 自定义 resize 开启范围

可配置 `resize` 控制需要开启的热区范围，分为 角头，行头，列头三个部分，默认为全部开启。可以通过设置`boolean`类型值快捷开启或关闭所有 resize 热区，也可以通过对象类型配置各个区域的热区开启或关闭。[查看具体例子](/zh/examples/interaction/advanced#resize)

```ts
const s2options = {
interaction: {
resize:true
},
};
// 等价于
// const s2options = {
// interaction: {
// resize: {
// rowCellVertical:true,
// cornerCellHorizontal:true,
// colCellHorizontal:true,
// colCellVertical:true
// }
// },
// };
```

## 调用交互方法

`S2` 内置了一些交互相关的方法，统一挂载在 `interaction` 命名空间下，你可以在拿到 `SpreadSheet` 实例后调用它们来实现你的效果，比如 `选中所有单元格`, `获取列头单元格` 等常用方法，具体请查看 [Interaction 实例类](/zh/docs/api/basic-class/interaction)
Expand Down
8 changes: 8 additions & 0 deletions s2-site/examples/interaction/advanced/demo/meta.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,14 @@
},
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/e0z41b3e4/2021-11-16%25252020.11.53.gif"
},
{
"filename": "resize.ts",
"title": {
"zh": "自定义resize热区",
"en": "Custom resize area"
},
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/4vvt7uqA9/2021-12-06%25252010.36.39.gif"
},
{
"filename": "merge-cell.ts",
"title": {
Expand Down
26 changes: 26 additions & 0 deletions s2-site/examples/interaction/advanced/demo/resize.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { PivotSheet } from '@antv/s2';

fetch(
'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
)
.then((res) => res.json())
.then((dataCfg) => {
const container = document.getElementById('container');

const s2Options = {
width: 600,
height: 480,
interaction: {
resize: {
rowCellVertical: true,
cornerCellHorizontal: true,
colCellHorizontal: true,
colCellVertical: true,
},
},
};

const s2 = new PivotSheet(container, dataCfg, s2Options);

s2.render();
});

0 comments on commit 79236cc

Please sign in to comment.