From bc3b173b94d9c8c76034abdcfc80834b4f41abd0 Mon Sep 17 00:00:00 2001 From: zengyue Date: Thu, 23 Nov 2023 14:22:46 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20swipe=20=E6=94=AF=E6=92=91=E5=8D=95?= =?UTF-8?q?=E5=90=91=E5=BF=AB=E6=89=AB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/f2/src/components/zoom/easing.ts | 5 + packages/f2/src/components/zoom/index.tsx | 65 +++- packages/f2/src/components/zoom/zoomUtil.ts | 9 +- .../pan-test-tsx-candlestick-swipe-1-snap.png | Bin 0 -> 10540 bytes .../pan-test-tsx-candlestick-swipe-2-snap.png | Bin 0 -> 10283 bytes .../components/candlestick/basic.test.tsx | 2 +- .../test/components/candlestick/pan.test.tsx | 281 ++++++++++++++++++ 7 files changed, 355 insertions(+), 7 deletions(-) create mode 100644 packages/f2/src/components/zoom/easing.ts create mode 100644 packages/f2/test/components/candlestick/__image_snapshots__/pan-test-tsx-candlestick-swipe-1-snap.png create mode 100644 packages/f2/test/components/candlestick/__image_snapshots__/pan-test-tsx-candlestick-swipe-2-snap.png create mode 100644 packages/f2/test/components/candlestick/pan.test.tsx diff --git a/packages/f2/src/components/zoom/easing.ts b/packages/f2/src/components/zoom/easing.ts new file mode 100644 index 000000000..8051cc115 --- /dev/null +++ b/packages/f2/src/components/zoom/easing.ts @@ -0,0 +1,5 @@ +function quadraticOut(k) { + return k * (2 - k); +} + +export { quadraticOut }; diff --git a/packages/f2/src/components/zoom/index.tsx b/packages/f2/src/components/zoom/index.tsx index 7de6604b8..e2c85ecc6 100644 --- a/packages/f2/src/components/zoom/index.tsx +++ b/packages/f2/src/components/zoom/index.tsx @@ -3,6 +3,7 @@ import { ChartChildProps } from '../../chart'; import { updateRange, updateFollow } from './zoomUtil'; import { Scale, ScaleConfig } from '../../deps/f2-scale/src'; import { each, isNumberEqual, isArray } from '@antv/util'; +import { quadraticOut as easeing } from './easing'; export type ZoomRange = [number, number]; export type ScaleValues = number[] | string[]; @@ -52,6 +53,10 @@ export interface ZoomProps { * 横扫 */ swipe?: boolean; + /** + * 横扫动画时长 + */ + swipeDuration?: number; /** * 事件回调 */ @@ -284,12 +289,64 @@ export default (View) => { } } + animateSwipe(dim: string, dimRange: ZoomRange, velocity: number) { + const { context, props } = this; + const { requestAnimationFrame } = context.canvas; + const { swipeDuration = 1000 } = props; + + const diff = (dimRange[1] - dimRange[0]) * velocity; + + const startTime = Date.now(); + + const updateRange = (t: number) => { + const newDimRange: ZoomRange = [dimRange[0] + diff * t, dimRange[1] + diff * t]; + const newRange = this.updateRange(newDimRange, dim); + this.renderRange({ + x: newRange, + }); + }; + + // 更新动画 + const update = () => { + // 计算动画已经进行的时间 + const currentTime = Date.now() - startTime; + + // 如果动画已经结束，则清除定时器 + if (currentTime >= swipeDuration) { + updateRange(1); + return; + } + + // 计算缓动值 + const progress = currentTime / swipeDuration; + const easedProgress = easeing(progress); + updateRange(easedProgress); + + requestAnimationFrame(() => { + update(); + }); + }; + update(); + } + onSwipe = (ev) => { - const { swipe } = this.props; - if (this.props.mode.length < 2 || !swipe) return; + const { props, state } = this; + // 滑动速率 + const { velocity, direction, velocityX = 0, velocityY = 0, points } = ev; + const { mode, swipe } = props; + const { range } = state; - const { velocityX = 0, velocityY = 0, points } = ev; - const { range } = this.state; + if (!swipe || !mode) { + return; + } + if (mode.length === 1) { + this.animateSwipe( + mode, + range[mode], + direction === 'right' || direction === 'down' ? -velocity : velocity + ); + return; + } const { x, y } = points[0]; diff --git a/packages/f2/src/components/zoom/zoomUtil.ts b/packages/f2/src/components/zoom/zoomUtil.ts index a4c23a7d3..67a59c882 100644 --- a/packages/f2/src/components/zoom/zoomUtil.ts +++ b/packages/f2/src/components/zoom/zoomUtil.ts @@ -1,6 +1,6 @@ import { ScaleValues, ZoomRange } from './index'; import { Scale, getTickMethod } from '../../deps/f2-scale/src'; -import { getRange } from '@antv/util'; +import { getRange, isArray } from '@antv/util'; import { toTimeStamp } from '../../util'; // 判断新老values是否相等，这里只要判断前后是否相等即可 @@ -91,7 +91,12 @@ function updateFollow(scales: Scale[], mainScale: Scale, data) { data.forEach((item) => { const value = mainType === 'timeCat' ? toTimeStamp(item[mainField]) : item[mainField]; if (mainValuesMap[value]) { - values.push(item[followField]); + const followItemValue = item[followField]; + if (isArray(followItemValue)) { + values.push(...followItemValue); + } else { + values.push(followItemValue); + } } }); return updateScale(scale, values); diff --git a/packages/f2/test/components/candlestick/__image_snapshots__/pan-test-tsx-candlestick-swipe-1-snap.png b/packages/f2/test/components/candlestick/__image_snapshots__/pan-test-tsx-candlestick-swipe-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..02c6b278aa925cf538c38469bd97def7c0b0d3ef GIT binary patch literal 10540 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 B#h?HH literal 0 HcmV?d00001 diff --git a/packages/f2/test/components/candlestick/__image_snapshots__/pan-test-tsx-candlestick-swipe-2-snap.png b/packages/f2/test/components/candlestick/__image_snapshots__/pan-test-tsx-candlestick-swipe-2-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..a8b252f6deb9798634eeef105b37f1bfd03c7a77 GIT binary patch literal 10283 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 literal 0 HcmV?d00001 diff --git a/packages/f2/test/components/candlestick/basic.test.tsx b/packages/f2/test/components/candlestick/basic.test.tsx index 277f0ad00..689afb0c2 100644 --- a/packages/f2/test/components/candlestick/basic.test.tsx +++ b/packages/f2/test/components/candlestick/basic.test.tsx @@ -99,7 +99,7 @@ describe('candlestick', () => { expect(context).toMatchImageSnapshot(); }); - it.only('tooltip', async () => { + it('tooltip', async () => { const { props } = ( diff --git a/packages/f2/test/components/candlestick/pan.test.tsx b/packages/f2/test/components/candlestick/pan.test.tsx new file mode 100644 index 000000000..5bd8dbc4e --- /dev/null +++ b/packages/f2/test/components/candlestick/pan.test.tsx @@ -0,0 +1,281 @@ +import { jsx } from '../../../src'; +import { Canvas, Chart, Candlestick, Axis, ScrollBar } from '../../../src'; +import { createContext, delay, gestureSimulator } from '../../util'; +const context = createContext(); + +const data = [ + { + value: [559.8867, 556.0103, 551.9092, 566.5159], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-06-19', + }, + { + value: [560.3971, 561.7968, 555.862, 570.6991], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-06-16', + }, + { + value: [553.6004, 559.8932, 547.7492, 563.5916], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-06-15', + }, + { + value: [548.3811, 551.9996, 543.2821, 559.8399], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-06-14', + }, + { + value: [550.2547, 548.2714, 542.5419, 556.425], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-06-13', + }, + { + value: [554.7497, 550.9158, 542.1922, 559.8616], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-06-12', + }, + { + value: [551.3901, 555.6387, 546.2585, 562.8118], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-06-09', + }, + { + value: [554.5496, 551.7763, 545.2867, 559.3196], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-06-08', + }, + { + value: [559.5284, 554.6605, 550.6879, 565.1796], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-06-07', + }, + { + value: [568.3989, 559.5284, 556.1166, 574.7107], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-06-06', + }, + { + value: [566.1414, 568.6264, 559.138, 575.2344], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-06-05', + }, + { + value: [566.7634, 564.7859, 560.0398, 573.0916], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-06-02', + }, + { + value: [565.918, 565.0119, 558.7824, 576.4514], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-06-01', + }, + { + value: [577.9214, 566.3144, 561.2328, 584.5622], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-05-31', + }, + { + value: [583.5348, 577.4594, 567.5868, 591.1291], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-05-30', + }, + { + value: [585.0556, 584.1774, 576.7428, 594.1294], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-05-29', + }, + { + value: [575.7788, 585.4068, 571.5702, 592.0946], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-05-26', + }, + { + value: [579.1444, 576.5283, 568.68, 584.3184], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-05-25', + }, + { + value: [587.1258, 581.3535, 573.9319, 592.1913], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-05-24', + }, + { + value: [584.1688, 589.0106, 581.602, 599.1609], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-05-23', + }, + { + value: [581.4904, 583.3521, 574.509, 593.1842], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-05-22', + }, + { + value: [573.466, 581.7813, 569.0503, 587.688], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-05-19', + }, + { + value: [578.0325, 573.466, 569.2464, 583.177], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-05-18', + }, + { + value: [580.1243, 578.0325, 569.6653, 584.7727], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-05-17', + }, + { + value: [575.972, 581.054, 570.4904, 588.5912], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-05-16', + }, + { + value: [561.1129, 571.0043, 554.5373, 574.9384], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-05-15', + }, + { + value: [565.9743, 562.0121, 558.2763, 574.6912], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-05-12', + }, + { + value: [567.6747, 566.0309, 561.6097, 580.7117], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-05-11', + }, + { + value: [565.0152, 566.8245, 558.4564, 573.4964], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-05-10', + }, + { + value: [572.4006, 565.411, 560.9995, 578.2443], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-05-09', + }, + { + value: [577.0122, 572.9162, 565.4166, 583.7042], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-05-08', + }, + { + value: [591.865, 576.8968, 571.4538, 594.5864], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-05-05', + }, + { + value: [584.0125, 591.6283, 579.9117, 600.3571], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-05-04', + }, + { + value: [583.956, 585.8286, 573.3642, 593.3775], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-04-28', + }, + { + value: [573.7591, 585.1849, 568.4768, 592.3619], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-04-27', + }, + { + value: [566.4006, 574.161, 560.5094, 581.6949], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-04-26', + }, + { + value: [578.2053, 566.4572, 557.6606, 583.0088], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-04-25', + }, + { + value: [579.7089, 578.7262, 569.8245, 593.3505], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-04-24', + }, + { + value: [581.4119, 578.0326, 573.4298, 591.0253], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-04-21', + }, + { + value: [590.0756, 582.6354, 578.3248, 595.6262], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-04-20', + }, + { + value: [597.7922, 590.4889, 586.5978, 603.0003], + symbol: '813701.CNS', + factor: 'kline_day_candle', + time: '2023-04-19', + }, +]; + +describe('candlestick', () => { + it('swipe', async () => { + const { props } = ( + + + + + + + + + ); + + const canvas = new Canvas(props); + await canvas.render(); + + await delay(1000); + expect(context).toMatchImageSnapshot(); + + await delay(20); + await gestureSimulator(context.canvas, 'touchstart', { x: 210, y: 169 }); + await gestureSimulator(context.canvas, 'touchmove', { x: 200, y: 169 }); + await gestureSimulator(context.canvas, 'touchend', { x: 200, y: 169 }); + await delay(3000); + expect(context).toMatchImageSnapshot(); + }); +});