This repository was archived by the owner on Oct 7, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 18
Refactor slider #29
Merged
Merged
Refactor slider #29
Changes from all commits
Commits
Show all changes
26 commits
Select commit
Hold shift + click to select a range
ab71f3f
chore: changed ./github/build.yml runs on macos
1def142
chore: 修复了scripts build
0383cba
feat(slider): 创建了没有minimap的slider
26b97eb
test(text): 设置了合适的精度
7638b56
Merge branch 'master' of https://github.com/antvis/GUI
27feadd
feat(slider): 创建了基本slider
4f91f73
test(slider): slider的基本单测
67b3513
chore: 设置编译目标为ES2019以支持可选链
2dcb137
Merge branch 'master' of ssh://github.com/antvis/GUI
e4d7d8f
refactor(slider): merge master into feat-slider
dde3697
fix(sparkline): 修正了sparkline的baseline计算方法，修正了sparkline的定位
a179a7b
feat(slider): 加入了sparkline
57c51c5
refactor(slider): 暂存
c7751f8
docs(slider): 添加了slider的example
0a21507
docs(slider): 添加了slider的文档
7395146
refactor(slider): slider 支持缩略图
96a908f
refactor(slider): 更新了参数类型
9a7c2bd
test(slider): 添加了slider 单测
e0ce930
Merge branch 'master' of ssh://github.com/antvis/GUI
b309bbc
refactor(slider): merge master into slider branch
3b03d16
fix(sparkline): 修正了sparkline data参数为空时不显示
2a61d57
refactor(util): 抽取了取得数字精度的方法
de74316
refactor(slider): 手柄尺寸自适应
1d7cd92
docs(slider): 修改了案例
eb7deeb
fix(slider): 修复了纵向布局下的slider 手柄尺寸
98d564a
Update index.ts
Aarebecca File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,183 @@ | ||
| import { Canvas } from '@antv/g'; | ||
| import { Renderer as CanvasRenderer } from '@antv/g-canvas'; | ||
| import { Slider } from '../../../../src'; | ||
| import { createDiv } from '../../../utils'; | ||
|
|
||
| const renderer = new CanvasRenderer({ | ||
| enableDirtyRectangleRenderingDebug: false, | ||
| enableAutoRendering: true, | ||
| enableDirtyRectangleRendering: true, | ||
| }); | ||
|
|
||
| describe('slider', () => { | ||
| test('basic', async () => { | ||
| const div = createDiv(); | ||
|
|
||
| // @ts-ignore | ||
| const canvas = new Canvas({ | ||
| container: div, | ||
| width: 800, | ||
| height: 300, | ||
| renderer, | ||
| }); | ||
|
|
||
| const slider = new Slider({ | ||
| attrs: { | ||
| x: 50, | ||
| y: 50, | ||
| width: 400, | ||
| height: 40, | ||
| values: [0.3, 0.7], | ||
| names: ['leftVal', 'rightVal'], | ||
| }, | ||
| }); | ||
|
|
||
| expect(slider.getValues()).toStrictEqual([0.3, 0.7]); | ||
| expect(slider.getNames()).toStrictEqual(['leftVal', 'rightVal']); | ||
|
|
||
| slider.setValues([0, 1]); | ||
| expect(slider.getValues()).toStrictEqual([0, 1]); | ||
|
|
||
| slider.setValues([-0.5, 1]); | ||
| expect(slider.getValues()).toStrictEqual([0, 1]); | ||
|
|
||
| slider.setValues([-0.5, 1.5]); | ||
| expect(slider.getValues()).toStrictEqual([0, 1]); | ||
|
|
||
| slider.setValues([-0.5, 0]); | ||
| expect(slider.getValues()).toStrictEqual([0, 0.5]); | ||
|
|
||
| slider.setValues([-2, -1]); | ||
| expect(slider.getValues()).toStrictEqual([0, 1]); | ||
|
|
||
| canvas.appendChild(slider); | ||
| slider.destroy(); | ||
| }); | ||
|
|
||
| test('vertical', async () => { | ||
| const div = createDiv(); | ||
|
|
||
| // @ts-ignore | ||
| const canvas = new Canvas({ | ||
| container: div, | ||
| width: 800, | ||
| height: 300, | ||
| renderer, | ||
| }); | ||
|
|
||
| const slider = new Slider({ | ||
| attrs: { | ||
| x: 50, | ||
| y: 50, | ||
| width: 40, | ||
| height: 400, | ||
| orient: 'vertical', | ||
| values: [0.3, 0.7], | ||
| names: ['aboveVal', 'belowVal'], | ||
| }, | ||
| }); | ||
|
|
||
| canvas.appendChild(slider); | ||
| slider.destroy(); | ||
| }); | ||
|
|
||
| test('custom icon', async () => { | ||
| const div = createDiv(); | ||
|
|
||
| // @ts-ignore | ||
| const canvas = new Canvas({ | ||
| container: div, | ||
| width: 800, | ||
| height: 300, | ||
| renderer, | ||
| }); | ||
|
|
||
| const slider = new Slider({ | ||
| attrs: { | ||
| x: 50, | ||
| y: 50, | ||
| width: 400, | ||
| height: 40, | ||
| values: [0.3, 0.7], | ||
| names: ['leftVal', 'rightVal'], | ||
| handle: { | ||
| start: { | ||
| size: 15, | ||
| formatter: (name, value) => { | ||
| return `${name}: ${value * 100}%`; | ||
| }, | ||
| handleIcon: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ', | ||
| }, | ||
| end: { | ||
| spacing: 20, | ||
| handleIcon: 'diamond', | ||
| }, | ||
| }, | ||
| }, | ||
| }); | ||
|
|
||
| canvas.appendChild(slider); | ||
| slider.destroy(); | ||
| }); | ||
|
|
||
| test('vertical', async () => { | ||
| const div = createDiv(); | ||
|
|
||
| // @ts-ignore | ||
| const canvas = new Canvas({ | ||
| container: div, | ||
| width: 800, | ||
| height: 300, | ||
| renderer, | ||
| }); | ||
|
|
||
| const slider = new Slider({ | ||
| attrs: { | ||
| x: 50, | ||
| y: 50, | ||
| width: 40, | ||
| height: 400, | ||
| orient: 'vertical', | ||
| values: [0.3, 0.7], | ||
| names: ['aboveVal', 'belowVal'], | ||
| }, | ||
| }); | ||
|
|
||
| canvas.appendChild(slider); | ||
hustcc marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| slider.destroy(); | ||
| }); | ||
|
|
||
| test('slider with sparkline', async () => { | ||
| const div = createDiv(); | ||
|
|
||
| // @ts-ignore | ||
| const canvas = new Canvas({ | ||
| container: div, | ||
| width: 800, | ||
| height: 300, | ||
| renderer, | ||
| }); | ||
|
|
||
| const slider = new Slider({ | ||
| attrs: { | ||
| x: 50, | ||
| y: 50, | ||
| width: 400, | ||
| height: 40, | ||
| values: [0.3, 0.7], | ||
| names: ['leftVal', 'rightVal'], | ||
| sparklineCfg: { | ||
| // type: 'column', | ||
| data: [ | ||
| [1, 3, 2, -4, 1, 3, 2, -4], | ||
| [5, 1, 5, -8, 5, 1, 5, -8], | ||
| ], | ||
| }, | ||
| }, | ||
| }); | ||
|
|
||
| canvas.appendChild(slider); | ||
| slider.destroy(); | ||
| canvas.destroy(); | ||
| }); | ||
| }); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| --- | ||
| title: Slider | ||
| order: 5 | ||
| --- | ||
|
|
||
| # 缩略轴 | ||
|
|
||
| > 缩略轴 | ||
|
|
||
| ## 引入 | ||
|
|
||
| ```ts | ||
| import { Slider } from '@antv/gui'; | ||
| ``` | ||
|
|
||
| ## 配置项 | ||
|
|
||
| | **Property** | **Description** | **Type** | **Default** | | ||
| | --------------- | --------------- | --------------------------------------------------------- | ------------ | | ||
| | orient | Slider 朝向 | <code>horizontal | vertical </code> | `horizontal` | | ||
| | width | 宽度 | <code>number</code> | `200` | | ||
| | height | 高度 | <code>number<code> | `20` | | ||
| | values | 缩略轴范围 | <code>[number, number]<code> | `[0, 1]` | | ||
| | names | 手柄文本 | <code>[string, string]<code> | `['', '']` | | ||
| | min | 最小可滚动范围 | <code>number<code> | `0` | | ||
| | max | 最大可滚动范围 | <code>number<code> | `1` | | ||
| | sparkline | 缩略图配置 | <code>SparklineOptions<code> | `[]` | | ||
| | backgroundStyle | 自定义背景样式 | <code>ShapeAttrs & {active: ShapeAttrs}<code> | `[]` | | ||
| | foregroundStyle | 自定义前景样式 | <code>ShapeAttrs & {active: ShapeAttrs}<code> | `[]` | | ||
| | handle | 手柄配置 | <code>handleCfg \| {start: handleCfg;end:handleCfg}<code> | `[]` | | ||
|
|
||
| ### SparklineOptions | ||
|
|
||
| `markdown:docs/common/sparkline-options.zh.md` | ||
|
|
||
| ## handleCfg | ||
|
|
||
| | **Property** | **Description** | **Type** | **Default** | | ||
| | ------------ | ----------------------------------------------- | -------------------------------------------------------------------------------- | ----------- | | ||
| | show | <code>boolean</code> | 是否显示手柄 | `true` | | ||
| | size | <code>number</code> | 手柄图标大小 | `10` | | ||
| | formatter | <code>(name, value)=>string</code> | 文本格式化 | `[]` | | ||
| | textStyle | <code>ShapeAttrs</code> | 文字样式 | `[]` | | ||
| | spacing | <code>number</code> | 文字与手柄的间隔 | `10` | | ||
| | handleIcon | <code>(x,y,r)=>PathCommand \| string</code> | 手柄图标，支持**image URL**、**data URL**、**Symbol Name**、 **Symbol Function** | `[]` | | ||
| | handleStyle | <code>ShapeAttrs & {active?: ShapeAttrs}</code> | 手柄图标样式 | `[]` | | ||
|
|
||
| ### ShapeAttrs | ||
|
|
||
| `markdown:docs/common/shape-attrs.zh.md` |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| --- | ||
| title: Slider | ||
| order: 5 | ||
| --- | ||
|
|
||
| # 缩略轴 | ||
|
|
||
| > 缩略轴 | ||
|
|
||
| ## 引入 | ||
|
|
||
| ```ts | ||
| import { Slider } from '@antv/gui'; | ||
| ``` | ||
|
|
||
| ## 配置项 | ||
|
|
||
| | **属性** | **描述** | **类型** | **默认值** | | ||
| | --------------- | -------------- | ----------------------------------------------------------- | ------------ | | ||
| | orient | Slider 朝向 | <code>horizontal | vertical </code> | `horizontal` | | ||
| | width | 宽度 | <code>number</code> | `200` | | ||
| | height | 高度 | <code>number<code> | `20` | | ||
| | values | 缩略轴范围 | <code>[number, number]<code> | `[0, 1]` | | ||
| | names | 手柄文本 | <code>[string, string]<code> | `['', '']` | | ||
| | min | 最小可滚动范围 | <code>number<code> | `0` | | ||
| | max | 最大可滚动范围 | <code>number<code> | `1` | | ||
| | sparkline | 缩略图配置 | <code>SparklineOptions<code> | `[]` | | ||
| | backgroundStyle | 自定义背景样式 | <code>ShapeAttrs & {active?: ShapeAttrs}<code> | `[]` | | ||
| | foregroundStyle | 自定义前景样式 | <code>ShapeAttrs & {active?: ShapeAttrs}<code> | `[]` | | ||
| | handle | 手柄配置 | <code>handleCfg \| {start: handleCfg; end: handleCfg}<code> | `[]` | | ||
|
|
||
| ## SparklineOptions | ||
| `markdown:docs/common/sparkline-options.zh.md` | ||
|
|
||
| ## handleCfg | ||
| | **属性** | **类型** | **描述** | **默认值** | | ||
| | ----------- | ----------------------------------------------- | -------------------------------------------------------------------------------- | ---------- | | ||
| | show | <code>boolean</code> | 是否显示手柄 | `true` | | ||
| | size | <code>number</code> | 手柄图标大小 | `10` | | ||
| | formatter | <code>(name, value)=>string</code> | 文本格式化 | `[]` | | ||
| | textStyle | <code>ShapeAttrs</code> | 文字样式 | `[]` | | ||
| | spacing | <code>number</code> | 文字与手柄的间隔 | `10` | | ||
| | handleIcon | <code>(x,y,r)=>PathCommand \| string</code> | 手柄图标，支持**image URL**、**data URL**、**Symbol Name**、 **Symbol Function** | `[]` | | ||
| | handleStyle | <code>ShapeAttrs & {active?: ShapeAttrs}</code> | 手柄图标样式 | `[]` | | ||
|
|
||
| ## ShapeAttrs | ||
| `markdown:docs/common/shape-attrs.zh.md` |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| ### 基本属性 | ||
|
|
||
| | **属性名** | **类型** | **描述** | | ||
| | ------------- | ------------------- | ---------------------------------------- | | ||
| | x | <code>number</code> | x 坐标 | | ||
| | y | <code>number</code> | y 坐标 | | ||
| | r | <code>number</code> | 半径 | | ||
| | width | <code>number</code> | 宽度 | | ||
| | height | <code>number</code> | 高度 | | ||
| | stroke | <code>color</code> | 描边颜色，可以是 rgba 值、颜色名（下同） | | ||
| | strokeOpacity | <code>number</code> | 描边透明度 | | ||
| | fill | <code>color</code> | 填充颜色 | | ||
| | fillOpacity | <code>number</code> | 填充透明度 | | ||
| | Opacity | <code>number</code> | 整体透明度 | | ||
| | shadowBlur | <code>number</code> | 模糊效果程度 | | ||
| | shadowColor | <code>color</code> | 阴影颜色 | | ||
| | shadowOffsetX | <code>number</code> | 阴影水平偏移距离 | | ||
| | shadowOffsetY | <code>number</code> | 阴影垂直偏移距离 | | ||
|
|
||
| ### 线条属性 | ||
|
|
||
| | **属性名** | **类型** | **描述** | | ||
| | ---------- | ------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | lineWidth | <code>number</code> | 线条或图形边框宽度 | | ||
| | lineCap | <code>'butt' \| 'round' \| 'square'</code> | 线段末端样式 | | ||
| | lineJoin | <code>'bevel' \| 'round' \| 'miter'</code> | 设置 2 个长度不为 0 的相连部分（线段，圆弧，曲线）如何连接在一起的属性（长度为 0 的变形部分，其指定的末端和控制点在同一位置，会被忽略） | | ||
| | lineDash | <code>number[] \| null</code> | 线条或图形边框的虚线样式 | | ||
|
|
||
| ### 文本属性 | ||
|
|
||
| | **属性名** | **类型** | **描述** | | ||
| | ------------ | ---------------------------------------------------------------------------------------- | ----------------------------------- | | ||
| | textAlign | <code>'start' \| 'center' \| 'end' \| 'left' \| 'right'</code> | 设置文本内容的当前对齐方式 | | ||
| | textBaseline | <code>'top' \| 'hanging' \| 'middle' \| 'alphabetic' \| 'ideographic' \| 'bottom'</code> | 设置在绘制文本时使用的当前文本基线, | | ||
| | fontStyle | <code>'normal' \| 'italic' \| 'oblique'</code> | 设置字体样式 | | ||
| | fontSize | <code>number</code> | 设置字号 | | ||
| | fontFamily | <code>string</code> | 设置字体系列 | | ||
| | fontWeight | <code>'normal' \| 'bold' \| 'bolder' \| 'lighter' \| number</code> | 设置字体的粗细 | | ||
| | fontVariant | <code>'normal' \| 'small-caps' \| string</code> | 设置字体变体 | | ||
| | lineHeight | <code>number</code> | 设置行高 | |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.