diff --git a/packages/f2/src/components/scrollBar/index.tsx b/packages/f2/src/components/scrollBar/index.tsx index b11069ce6..9607fa6ae 100644 --- a/packages/f2/src/components/scrollBar/index.tsx +++ b/packages/f2/src/components/scrollBar/index.tsx @@ -1,5 +1,6 @@ import withScrollBar, { ScrollBarProps } from './withScrollBar'; import ScrollBarView from './scrollBarView'; +import withZoom from '../zoom'; export { ScrollBarProps, withScrollBar, ScrollBarView }; -export default withScrollBar(ScrollBarView); +export default withZoom(withScrollBar(ScrollBarView)); diff --git a/packages/f2/src/components/scrollBar/withScrollBar.tsx b/packages/f2/src/components/scrollBar/withScrollBar.tsx index 3db8bc692..6d64b8923 100644 --- a/packages/f2/src/components/scrollBar/withScrollBar.tsx +++ b/packages/f2/src/components/scrollBar/withScrollBar.tsx @@ -1,5 +1,6 @@ -import { jsx } from '@antv/f-engine'; +import { Component, jsx } from '@antv/f-engine'; import Zoom, { ZoomProps } from '../zoom'; +import { ChartChildProps } from '../../chart'; export interface ScrollBarProps extends ZoomProps { /** @@ -17,7 +18,7 @@ export interface ScrollBarProps extends ZoomProps { } export default (View) => { - return class ScrollBar extends Zoom { + return class ScrollBar extends Component { willMount() { super.willMount(); const { context, props } = this; diff --git a/packages/f2/src/components/tooltip/withTooltip.tsx b/packages/f2/src/components/tooltip/withTooltip.tsx index 1bc156575..4c123cdc2 100644 --- a/packages/f2/src/components/tooltip/withTooltip.tsx +++ b/packages/f2/src/components/tooltip/withTooltip.tsx @@ -104,7 +104,6 @@ export default (View) => { didMount() { this._initShow(); - this._initEvent(); } willReceiveProps(nextProps) { @@ -117,17 +116,6 @@ export default (View) => { } } - didUnmount(): void { - this._clearEvents(); - } - - _clearEvents() { - const { props, context } = this; - const { triggerOn = 'press', triggerOff = 'pressend' } = props; - // 解绑事件 - context.gesture.off(triggerOn, this._triggerOn); - context.gesture.off(triggerOff, this._triggerOff); - } _initShow() { const { props } = this; const { defaultItem } = props; @@ -156,20 +144,6 @@ export default (View) => { this.hide(); } }; - _initEvent() { - const { context, props } = this; - const { triggerOn = 'press', triggerOff = 'pressend', alwaysShow = false } = props; - context.gesture.on(triggerOn, (ev) => { - const { points } = ev; - this.show(points[0], ev); - }); - - context.gesture.on(triggerOff, (_ev) => { - if (!alwaysShow) { - this.hide(); - } - }); - } show(point, _ev?) { const { props } = this; @@ -225,14 +199,48 @@ export default (View) => { render() { const { props, state } = this; - const { visible } = props; + const { + visible, + coord, + triggerOn = 'press', + triggerOff = 'pressend', + alwaysShow = false, + } = props; if (visible === false) { return null; } const { records } = state; - if (!records || !records.length) return null; - - return ; + const { width, height, left, top } = coord; + + return ( + + { + if (triggerOn !== 'press') return; + const { points } = ev; + this.show(points[0], ev); + }} + onPressEnd={() => { + if (alwaysShow || triggerOff !== 'pressend') this.hide(); + }} + onClick={(ev) => { + if (triggerOn !== 'click') return; + const { points } = ev; + this.show(points[0], ev); + }} + > + + {records && records.length && } + + ); } }; }; diff --git a/packages/f2/src/components/zoom/index.tsx b/packages/f2/src/components/zoom/index.tsx index ff61aabb2..be70251ef 100644 --- a/packages/f2/src/components/zoom/index.tsx +++ b/packages/f2/src/components/zoom/index.tsx @@ -1,4 +1,4 @@ -import { Component, isEqual } from '@antv/f-engine'; +import { Component, isEqual, jsx } from '@antv/f-engine'; import { ChartChildProps } from '../../chart'; import { updateRange, updateFollow } from './zoomUtil'; import { Scale, ScaleConfig } from '../../deps/f2-scale/src'; @@ -76,454 +76,430 @@ function cloneScale(scale: Scale, scaleConfig?: ScaleConfig) { }); } -// 缩放 -class Zoom

extends Component< - P & ChartChildProps, - S -> { - startRange: { - x?: ZoomRange; - y?: ZoomRange; - }; - scale: {} = {}; - originScale: {} = {}; - // 最小的缩放比例 - minScale: number; - dims: Array; - //swipe end x y - swipeEnd = { - startX: 0, - startY: 0, - endX: 0, - endY: 0, - }; - - loop: number; - - constructor(props: P) { - const defaultProps = { - onPanStart: () => {}, - onPinchStart: () => {}, - onPan: () => {}, - onPinch: () => {}, - onInit: () => {}, - onPanEnd: () => {}, - onPinchEnd: () => {}, - minCount: 10, +export default (View) => { + return class Zoom< + P extends ZoomProps = ZoomProps, + S extends ZoomState = ZoomState + > extends Component

{ + startRange: { + x?: ZoomRange; + y?: ZoomRange; + }; + scale: {} = {}; + originScale: {} = {}; + // 最小的缩放比例 + minScale: number; + dims: Array; + //swipe end x y + swipeEnd = { + startX: 0, + startY: 0, + endX: 0, + endY: 0, }; - super({ ...defaultProps, ...props }); - const { mode } = props; - this.dims = isArray(mode) ? mode : [mode]; - } + loop: number; + + constructor(props: P) { + const defaultProps = { + onPanStart: () => {}, + onPinchStart: () => {}, + onPan: () => {}, + onPinch: () => {}, + onInit: () => {}, + onPanEnd: () => {}, + onPinchEnd: () => {}, + minCount: 10, + }; + super({ ...defaultProps, ...props }); + const { mode } = props; + + this.dims = isArray(mode) ? mode : [mode]; + } - didMount(): void { - this._bindEvents(); - } + didMount(): void { + const { scale } = this; + const { onInit } = this.props; + onInit({ scale }); + } - willReceiveProps(nextProps: P): void { - const { range: nextRange } = nextProps; - const { range: lastRange } = this.props; + willReceiveProps(nextProps: P): void { + const { range: nextRange } = nextProps; + const { range: lastRange } = this.props; + if (!isEqual(nextRange, lastRange)) { + const cacheRange = {}; + each(this.dims, (dim) => { + cacheRange[dim] = nextRange; + }); + + this.state = { + range: cacheRange, + } as S; + } + } - if (!isEqual(nextRange, lastRange)) { + willMount(): void { + const { props, dims } = this; + const { minCount, range } = props; + let valueLength = Number.MIN_VALUE; const cacheRange = {}; - each(this.dims, (dim) => { - cacheRange[dim] = nextRange; + + each(dims, (dim) => { + const scale = this._getScale(dim); + const { values } = scale; + valueLength = values.length > valueLength ? values.length : valueLength; + this.scale[dim] = scale; + this.originScale[dim] = cloneScale(scale); + + this.updateRange(range, dim); + cacheRange[dim] = range; }); + // 图表上最少显示 MIN_COUNT 个数据 + this.minScale = minCount / valueLength; this.state = { range: cacheRange, } as S; } - } - - willMount(): void { - const { props, dims } = this; - const { minCount, range } = props; - let valueLength = Number.MIN_VALUE; - const cacheRange = {}; - - each(dims, (dim) => { - const scale = this._getScale(dim); - const { values } = scale; - valueLength = values.length > valueLength ? values.length : valueLength; - this.scale[dim] = scale; - this.originScale[dim] = cloneScale(scale); - - this.updateRange(range, dim); - cacheRange[dim] = range; - }); - - // 图表上最少显示 MIN_COUNT 个数据 - this.minScale = minCount / valueLength; - this.state = { - range: cacheRange, - } as S; - } - didUnmount(): void { - this.loop && cancelAnimationFrame(this.loop); - this._clearEvents(); - } - - onStart = () => { - const { state } = this; - const { range } = state; - this.startRange = range; - this.loop && cancelAnimationFrame(this.loop); - }; - - onPan = (ev) => { - const { dims } = this; - - const range = {}; - each(dims, (dim) => { - if (dim === 'x') { - range['x'] = this._doXPan(ev); - return; - } - if (dim === 'y') { - range['y'] = this._doYPan(ev); - return; - } - }); - if (isEqualRange(range, this.state.range)) return; - - this.setState({ - range, - } as S); - }; + didUnmount(): void { + this.loop && cancelAnimationFrame(this.loop); + } - update() { - const { startX, startY, endX, endY } = this.swipeEnd; - const x = lerp(startX, endX, 0.05); - const y = lerp(startY, endY, 0.05); - this.swipeEnd = { - startX: x, - startY: y, - endX, - endY, + onStart = () => { + const { state } = this; + const { range } = state; + this.startRange = range; + this.loop && cancelAnimationFrame(this.loop); }; - const { props } = this; - const { coord } = props; - const { width: coordWidth, height: coordHeight } = coord; - const range = {}; + onPan = (ev) => { + const { dims } = this; + + const range = {}; + each(dims, (dim) => { + if (dim === 'x') { + range['x'] = this._doXPan(ev); + return; + } + if (dim === 'y') { + range['y'] = this._doYPan(ev); + return; + } + }); + if (isEqualRange(range, this.state.range)) return; - range['x'] = this._doPan((x - startX) / coordWidth, 'x'); - range['y'] = this._doPan((y - startY) / coordHeight, 'y'); + this.setState({ + range, + } as S); + }; - this.setState({ - range, - } as S); + update() { + const { startX, startY, endX, endY } = this.swipeEnd; + const x = lerp(startX, endX, 0.05); + const y = lerp(startY, endY, 0.05); + this.swipeEnd = { + startX: x, + startY: y, + endX, + endY, + }; + + const { props } = this; + const { coord } = props; + const { width: coordWidth, height: coordHeight } = coord; + const range = {}; + + range['x'] = this._doPan((x - startX) / coordWidth, 'x'); + range['y'] = this._doPan((y - startY) / coordHeight, 'y'); + + this.setState({ + range, + } as S); + + this.startRange = range; + + this.loop = requestAnimationFrame(() => this.update()); + if (Math.abs(x - endX) < 0.0005 && Math.abs(y - endY) < 0.0005) { + this.onEnd(); + cancelAnimationFrame(this.loop); + } + } - this.startRange = range; + onSwipe = (ev) => { + const { swipe } = this.props; + if (this.props.mode.length < 2 || !swipe) return; - this.loop = requestAnimationFrame(() => this.update()); - if (Math.abs(x - endX) < 0.0005 && Math.abs(y - endY) < 0.0005) { - this.onEnd(); - cancelAnimationFrame(this.loop); - } - } + const { velocityX = 0, velocityY = 0, points } = ev; + const { range } = this.state; - onSwipe = (ev) => { - const { swipe } = this.props; - if (this.props.mode.length < 2 || !swipe) return; + const { x, y } = points[0]; - const { velocityX = 0, velocityY = 0, points } = ev; - const { range } = this.state; + // 边界处理 + if (Math.abs(range?.x[0] - 0) < 0.0005 && velocityX > 0) return; + if (Math.abs(range?.x[1] - 1) < 0.0005 && velocityX < 0) return; - const { x, y } = points[0]; + if (Math.abs(range?.y[0] - 0) < 0.0005 && velocityY < 0) return; + if (Math.abs(range?.x[1] - 1) < 0.0005 && velocityY > 0) return; - // 边界处理 - if (Math.abs(range?.x[0] - 0) < 0.0005 && velocityX > 0) return; - if (Math.abs(range?.x[1] - 1) < 0.0005 && velocityX < 0) return; + this.swipeEnd = { + startX: x, + startY: y, + endX: x + velocityX * 50, + endY: y - velocityY * 50, + }; - if (Math.abs(range?.y[0] - 0) < 0.0005 && velocityY < 0) return; - if (Math.abs(range?.x[1] - 1) < 0.0005 && velocityY > 0) return; + this.onStart(); + this.update(); + }; - this.swipeEnd = { - startX: x, - startY: y, - endX: x + velocityX * 50, - endY: y - velocityY * 50, + onPinch = (ev) => { + const { dims } = this; + const range = {}; + each(dims, (dim) => { + if (dim === 'x') { + range['x'] = this._doXPinch(ev); + return; + } + if (dim === 'y') { + range['y'] = this._doYPinch(ev); + return; + } + }); + if (isEqualRange(range, this.state.range)) return; + this.setState({ + range, + } as S); }; - this.onStart(); - this.update(); - }; + onEnd = () => { + this.startRange = null; + }; - onPinch = (ev) => { - const { dims } = this; - const range = {}; - each(dims, (dim) => { - if (dim === 'x') { - range['x'] = this._doXPinch(ev); - return; - } - if (dim === 'y') { - range['y'] = this._doYPinch(ev); - return; + _doXPan(ev) { + const { direction, deltaX } = ev; + if (this.props.mode.length === 1 && (direction === 'up' || direction === 'down')) { + return this.state.range['x']; } - }); - if (isEqualRange(range, this.state.range)) return; - this.setState({ - range, - } as S); - }; + ev.preventDefault && ev.preventDefault(); - onEnd = () => { - this.startRange = null; - }; + const { props } = this; + const { coord, panSensitive = 1 } = props; + const { width: coordWidth } = coord; - _doXPan(ev) { - const { direction, deltaX } = ev; - if (this.props.mode.length === 1 && (direction === 'up' || direction === 'down')) { - return this.state.range['x']; + const ratio = (deltaX / coordWidth) * panSensitive; + const newRange = this._doPan(ratio, 'x'); + return newRange; } - ev.preventDefault && ev.preventDefault(); - const { props } = this; - const { coord, panSensitive = 1 } = props; - const { width: coordWidth } = coord; - - const ratio = (deltaX / coordWidth) * panSensitive; - const newRange = this._doPan(ratio, 'x'); - return newRange; - } - - _doYPan(ev) { - const { direction, deltaY } = ev; - if (this.props.mode.length === 1 && (direction === 'left' || direction === 'right')) { - return this.state.range['y']; + _doYPan(ev) { + const { direction, deltaY } = ev; + if (this.props.mode.length === 1 && (direction === 'left' || direction === 'right')) { + return this.state.range['y']; + } + ev.preventDefault && ev.preventDefault(); + + const { props } = this; + const { coord, panSensitive = 1 } = props; + const { height: coordHeight } = coord; + const ratio = (-deltaY / coordHeight) * panSensitive; + const newRange = this._doPan(ratio, 'y'); + return newRange; } - ev.preventDefault && ev.preventDefault(); - - const { props } = this; - const { coord, panSensitive = 1 } = props; - const { height: coordHeight } = coord; - const ratio = (-deltaY / coordHeight) * panSensitive; - const newRange = this._doPan(ratio, 'y'); - return newRange; - } - - _doPan(ratio: number, dim: string) { - const { startRange } = this; - const [start, end] = startRange[dim]; - const rangeLen = end - start; - const rangeOffset = rangeLen * ratio; - const newStart = start - rangeOffset; - const newEnd = end - rangeOffset; - const newRange = this.updateRange([newStart, newEnd], dim); - return newRange; - } - - _doXPinch(ev) { - ev.preventDefault && ev.preventDefault(); - const { zoom, center } = ev; - const { props } = this; - const { coord } = props; - const { width: coordWidth, left, right } = coord; - - const leftLen = Math.abs(center.x - left); - const rightLen = Math.abs(right - center.x); - - // 计算左右缩放的比例 - const leftZoom = leftLen / coordWidth; - const rightZoom = rightLen / coordWidth; - const newRange = this._doPinch(leftZoom, rightZoom, zoom, 'x'); - return newRange; - } - - _doYPinch(ev) { - ev.preventDefault && ev.preventDefault(); - const { zoom, center } = ev; - const { props } = this; - const { coord } = props; - const { height: coordHeight, top, bottom } = coord; - - const topLen = Math.abs(center.y - top); - const bottomLen = Math.abs(bottom - center.y); - - // 计算左右缩放的比例 - const topZoom = topLen / coordHeight; - const bottomZoom = bottomLen / coordHeight; - const newRange = this._doPinch(topZoom, bottomZoom, zoom, 'y'); - return newRange; - } - - _doPinch(startRatio: number, endRatio: number, zoom: number, dim: string) { - const { startRange, minScale, props } = this; - const { pinchSensitive = 1 } = props; - const [start, end] = startRange[dim]; - - const zoomOffset = zoom < 1 ? (1 / zoom - 1) * pinchSensitive : (1 - zoom) * pinchSensitive; - const rangeLen = end - start; - const rangeOffset = rangeLen * zoomOffset; - const startOffset = rangeOffset * startRatio; - const endOffset = rangeOffset * endRatio; - - const newStart = Math.max(0, start - startOffset); - const newEnd = Math.min(1, end + endOffset); + _doPan(ratio: number, dim: string) { + const { startRange } = this; + const [start, end] = startRange[dim]; + const rangeLen = end - start; + const rangeOffset = rangeLen * ratio; + const newStart = start - rangeOffset; + const newEnd = end - rangeOffset; + const newRange = this.updateRange([newStart, newEnd], dim); + return newRange; + } - const newRange: ZoomRange = [newStart, newEnd]; - // 如果已经到了最小比例，则不能再继续再放大 - if (newEnd - newStart < minScale) { - return this.state.range[dim]; + _doXPinch(ev) { + ev.preventDefault && ev.preventDefault(); + const { zoom, center } = ev; + const { props } = this; + const { coord } = props; + const { width: coordWidth, left, right } = coord; + + const leftLen = Math.abs(center.x - left); + const rightLen = Math.abs(right - center.x); + + // 计算左右缩放的比例 + const leftZoom = leftLen / coordWidth; + const rightZoom = rightLen / coordWidth; + const newRange = this._doPinch(leftZoom, rightZoom, zoom, 'x'); + return newRange; } - return this.updateRange(newRange, dim); - } - updateRange(originalRange: ZoomRange, dim) { - if (!originalRange) return; - const [start, end] = originalRange; - const rangeLength = end - start; - // 处理边界值 - let newRange: ZoomRange; - if (start < 0) { - newRange = [0, rangeLength]; - } else if (end > 1) { - newRange = [1 - rangeLength, 1]; - } else { - newRange = originalRange; + _doYPinch(ev) { + ev.preventDefault && ev.preventDefault(); + const { zoom, center } = ev; + const { props } = this; + const { coord } = props; + const { height: coordHeight, top, bottom } = coord; + + const topLen = Math.abs(center.y - top); + const bottomLen = Math.abs(bottom - center.y); + + // 计算左右缩放的比例 + const topZoom = topLen / coordHeight; + const bottomZoom = bottomLen / coordHeight; + const newRange = this._doPinch(topZoom, bottomZoom, zoom, 'y'); + return newRange; } - const { props, scale, originScale, state } = this; - const { chart, data, autoFit } = props; - const { range } = state; + _doPinch(startRatio: number, endRatio: number, zoom: number, dim: string) { + const { startRange, minScale, props } = this; + const { pinchSensitive = 1 } = props; + const [start, end] = startRange[dim]; - if (range && isEqualRange(newRange, range[dim])) return newRange; + const zoomOffset = zoom < 1 ? (1 / zoom - 1) * pinchSensitive : (1 - zoom) * pinchSensitive; + const rangeLen = end - start; + const rangeOffset = rangeLen * zoomOffset; - // 更新主 scale - updateRange(scale[dim], originScale[dim], newRange); + const startOffset = rangeOffset * startRatio; + const endOffset = rangeOffset * endRatio; - if (autoFit) { - const followScale = this._getFollowScales(dim); + const newStart = Math.max(0, start - startOffset); + const newEnd = Math.min(1, end + endOffset); - this.updateFollow(followScale, scale[dim], data); + const newRange: ZoomRange = [newStart, newEnd]; + // 如果已经到了最小比例，则不能再继续再放大 + if (newEnd - newStart < minScale) { + return this.state.range[dim]; + } + return this.updateRange(newRange, dim); } - // 手势变化不执行动画 - const { animate } = chart; - chart.setAnimate(false); - chart.forceUpdate(() => { - chart.setAnimate(animate); - }); - return newRange; - } - updateFollow(scales: Scale[], mainScale: Scale, data: any[]) { - updateFollow(scales, mainScale, data); - } + updateRange(originalRange: ZoomRange, dim) { + if (!originalRange) return; + const [start, end] = originalRange; + const rangeLength = end - start; + // 处理边界值 + let newRange: ZoomRange; + if (start < 0) { + newRange = [0, rangeLength]; + } else if (end > 1) { + newRange = [1 - rangeLength, 1]; + } else { + newRange = originalRange; + } - _getScale(dim) { - const { coord, chart } = this.props; - if (dim === 'x') { - return coord.transposed ? chart.getYScales()[0] : chart.getXScales()[0]; - } else { - return coord.transposed ? chart.getXScales()[0] : chart.getYScales()[0]; - } - } + const { props, scale, originScale, state } = this; + const { chart, data, autoFit } = props; + const { range } = state; - _getFollowScales(dim) { - const { coord, chart } = this.props; - if (dim === 'x') { - return coord.transposed ? chart.getXScales() : chart.getYScales(); - } - if (dim === 'y') { - return coord.transposed ? chart.getYScales() : chart.getXScales(); - } - } + if (range && isEqualRange(newRange, range[dim])) return newRange; - _bindEvents() { - const { context, props, scale } = this; - const { - onPinchStart, - onPanStart, - onPanEnd, - pan, - pinch, - swipe, - onInit, - onPan, - onPinch, - onPinchEnd, - } = props; - // 统一绑定事件 - if (pan !== false) { - context.gesture?.on('panstart', () => { - this.onStart(); - onPanStart({ scale }); - }); - context.gesture?.on('pan', (ev) => { - this.onPan(ev); - onPan(ev); - }); - context.gesture?.on('panend', () => { - this.onEnd(); - onPanEnd({ scale }); - }); - } + // 更新主 scale + updateRange(scale[dim], originScale[dim], newRange); - if (pinch !== false) { - context.gesture?.on('pinchstart', () => { - this.onStart(); - onPinchStart(); - }); - context.gesture?.on('pinch', (ev) => { - this.onPinch(ev); - onPinch(ev); - }); - context.gesture?.on('pinchend', () => { - this.onEnd(); - onPinchEnd({ scale }); + if (autoFit) { + const followScale = this._getFollowScales(dim); + + this.updateFollow(followScale, scale[dim], data); + } + // 手势变化不执行动画 + const { animate } = chart; + chart.setAnimate(false); + chart.forceUpdate(() => { + chart.setAnimate(animate); }); + return newRange; } - if (swipe !== false) { - context.gesture?.on('swipe', this.onSwipe); + updateFollow(scales: Scale[], mainScale: Scale, data: any[]) { + updateFollow(scales, mainScale, data); } - onInit({ scale }); - } - - _clearEvents() { - const { context, props, scale } = this; - const { gesture } = context; - const { onPinchEnd, onPanEnd, onPinchStart, pan, pinch, onPan, onPinch, swipe } = props; - // 统一解绑事件 - if (pan !== false) { - gesture.off('panstart', () => { - this.onStart(); - onPinchStart(); - }); - gesture.off('pan', (ev) => { - this.onPan(ev); - onPan(ev); - }); - gesture.off('panend', () => { - this.onEnd(); - onPanEnd({ scale }); - }); - } - if (pinch !== false) { - gesture.off('pinchstart', () => { - this.onStart(); - onPinchStart(); - }); - gesture.off('pinch', (ev) => { - this.onPinch(ev); - onPinch(ev); - }); - gesture.off('pinchend', () => { - this.onEnd(); - onPinchEnd({ scale }); - }); + _getScale(dim) { + const { coord, chart } = this.props; + if (dim === 'x') { + return coord.transposed ? chart.getYScales()[0] : chart.getXScales()[0]; + } else { + return coord.transposed ? chart.getXScales()[0] : chart.getYScales()[0]; + } } - if (swipe !== false) { - gesture.off('swipe', this.onSwipe); + + _getFollowScales(dim) { + const { coord, chart } = this.props; + if (dim === 'x') { + return coord.transposed ? chart.getXScales() : chart.getYScales(); + } + if (dim === 'y') { + return coord.transposed ? chart.getYScales() : chart.getXScales(); + } } - } -} -export default Zoom; + render() { + const { scale } = this; + const { + coord, + onPinchStart, + onPanStart, + onPanEnd, + pan, + pinch, + swipe, + onPan, + onPinch, + onPinchEnd, + } = this.props; + const { width, height, left, top } = coord; + + return ( + + { + if (pan === false) return; + this.onStart(); + onPanStart({ scale }); + }} + onPan={(ev) => { + if (pan === false) return; + this.onPan(ev); + onPan(ev); + }} + onPanEnd={(ev) => { + if (pan === false) return; + this.onEnd(); + onPanEnd({ scale }); + }} + onPinchStart={() => { + if (pinch === false) return; + this.onStart(); + onPinchStart(); + }} + onPinch={(ev) => { + if (pinch === false) return; + this.onPinch(ev); + onPinch(ev); + }} + onPinchEnd={() => { + if (pinch === false) return; + this.onEnd(); + onPinchEnd({ scale }); + }} + onSwipe={(ev) => { + if (swipe === false) return; + this.onSwipe(ev); + }} + /> + + + ); + } + }; +}; diff --git "a/packages/f2/test/components/interaction/__image_snapshots__/pan-test-tsx-\345\271\263\347\247\273\345\222\214\347\274\251\346\224\276-\345\271\263\347\247\273\345\222\214\347\274\251\346\224\276-linear-\347\261\273\345\236\213-\345\244\232\346\254\241\347\274\251\345\260\217-1-snap.png" "b/packages/f2/test/components/interaction/__image_snapshots__/pan-test-tsx-\345\271\263\347\247\273\345\222\214\347\274\251\346\224\276-\345\271\263\347\247\273\345\222\214\347\274\251\346\224\276-linear-\347\261\273\345\236\213-\345\244\232\346\254\241\347\274\251\345\260\217-1-snap.png" index 547b0f5b5..e0343dd5b 100644 Binary files "a/packages/f2/test/components/interaction/__image_snapshots__/pan-test-tsx-\345\271\263\347\247\273\345\222\214\347\274\251\346\224\276-\345\271\263\347\247\273\345\222\214\347\274\251\346\224\276-linear-\347\261\273\345\236\213-\345\244\232\346\254\241\347\274\251\345\260\217-1-snap.png" and "b/packages/f2/test/components/interaction/__image_snapshots__/pan-test-tsx-\345\271\263\347\247\273\345\222\214\347\274\251\346\224\276-\345\271\263\347\247\273\345\222\214\347\274\251\346\224\276-linear-\347\261\273\345\236\213-\345\244\232\346\254\241\347\274\251\345\260\217-1-snap.png" differ diff --git "a/packages/f2/test/components/interaction/__image_snapshots__/roam-test-tsx-\345\205\250\345\261\200\346\274\253\346\270\270\346\250\241\345\274\217-\346\226\234\347\247\273\345\222\214\347\274\251\346\224\276-linear-\347\261\273\345\236\213-\345\244\232\346\254\241\347\274\251\345\260\217-1-snap.png" "b/packages/f2/test/components/interaction/__image_snapshots__/roam-test-tsx-\345\205\250\345\261\200\346\274\253\346\270\270\346\250\241\345\274\217-\346\226\234\347\247\273\345\222\214\347\274\251\346\224\276-linear-\347\261\273\345\236\213-\345\244\232\346\254\241\347\274\251\345\260\217-1-snap.png" index cbf1a3ba5..819e1363d 100644 Binary files "a/packages/f2/test/components/interaction/__image_snapshots__/roam-test-tsx-\345\205\250\345\261\200\346\274\253\346\270\270\346\250\241\345\274\217-\346\226\234\347\247\273\345\222\214\347\274\251\346\224\276-linear-\347\261\273\345\236\213-\345\244\232\346\254\241\347\274\251\345\260\217-1-snap.png" and "b/packages/f2/test/components/interaction/__image_snapshots__/roam-test-tsx-\345\205\250\345\261\200\346\274\253\346\270\270\346\250\241\345\274\217-\346\226\234\347\247\273\345\222\214\347\274\251\346\224\276-linear-\347\261\273\345\236\213-\345\244\232\346\254\241\347\274\251\345\260\217-1-snap.png" differ diff --git "a/packages/f2/test/components/interaction/__image_snapshots__/roam-test-tsx-\345\205\250\345\261\200\346\274\253\346\270\270\346\250\241\345\274\217-\346\226\234\347\247\273\345\222\214\347\274\251\346\224\276-sensitive-\347\201\265\346\230\216\345\272\246-\345\244\232\346\254\241\347\274\251\345\260\217-1-snap.png" "b/packages/f2/test/components/interaction/__image_snapshots__/roam-test-tsx-\345\205\250\345\261\200\346\274\253\346\270\270\346\250\241\345\274\217-\346\226\234\347\247\273\345\222\214\347\274\251\346\224\276-sensitive-\347\201\265\346\230\216\345\272\246-\345\244\232\346\254\241\347\274\251\345\260\217-1-snap.png" index 588492d77..9f22d6eb4 100644 Binary files "a/packages/f2/test/components/interaction/__image_snapshots__/roam-test-tsx-\345\205\250\345\261\200\346\274\253\346\270\270\346\250\241\345\274\217-\346\226\234\347\247\273\345\222\214\347\274\251\346\224\276-sensitive-\347\201\265\346\230\216\345\272\246-\345\244\232\346\254\241\347\274\251\345\260\217-1-snap.png" and "b/packages/f2/test/components/interaction/__image_snapshots__/roam-test-tsx-\345\205\250\345\261\200\346\274\253\346\270\270\346\250\241\345\274\217-\346\226\234\347\247\273\345\222\214\347\274\251\346\224\276-sensitive-\347\201\265\346\230\216\345\272\246-\345\244\232\346\254\241\347\274\251\345\260\217-1-snap.png" differ diff --git a/packages/f2/test/components/interaction/pan.test.tsx b/packages/f2/test/components/interaction/pan.test.tsx index 8750522ee..888c1a177 100644 --- a/packages/f2/test/components/interaction/pan.test.tsx +++ b/packages/f2/test/components/interaction/pan.test.tsx @@ -53,18 +53,18 @@ describe('平移和缩放', () => { // 缩小 await delay(20); await gestureSimulator(context.canvas, 'touchstart', [ - { x: 10, y: 10 }, - { x: 300, y: 300 }, + { x: 50, y: 50 }, + { x: 260, y: 260 }, ]); await delay(20); await gestureSimulator(context.canvas, 'touchmove', [ - { x: 100, y: 100 }, - { x: 200, y: 200 }, + { x: 114, y: 114 }, + { x: 186, y: 186 }, ]); await delay(20); await gestureSimulator(context.canvas, 'touchend', [ - { x: 100, y: 100 }, - { x: 100, y: 100 }, + { x: 114, y: 114 }, + { x: 114, y: 114 }, ]); await delay(300); expect(context).toMatchImageSnapshot(); @@ -72,8 +72,8 @@ describe('平移和缩放', () => { // 缩小 await delay(20); await gestureSimulator(context.canvas, 'touchstart', [ - { x: 10, y: 10 }, - { x: 310, y: 310 }, + { x: 50, y: 50 }, + { x: 270, y: 270 }, ]); await delay(20); await gestureSimulator(context.canvas, 'touchmove', [ @@ -159,25 +159,27 @@ describe('平移和缩放', () => { it('多次缩小', async () => { // 缩小 - await delay(20); await gestureSimulator(context.canvas, 'touchstart', [ - { x: 10, y: 10 }, - { x: 300, y: 300 }, + { x: 50, y: 50 }, + { x: 260, y: 260 }, ]); await delay(20); await gestureSimulator(context.canvas, 'touchmove', [ - { x: 100, y: 100 }, - { x: 200, y: 200 }, + { x: 114, y: 114 }, + { x: 186, y: 186 }, ]); await delay(20); - await gestureSimulator(context.canvas, 'touchend', { x: 100, y: 100 }); + await gestureSimulator(context.canvas, 'touchend', [ + { x: 114, y: 114 }, + { x: 114, y: 114 }, + ]); await delay(300); expect(context).toMatchImageSnapshot(); // 缩小 await delay(20); await gestureSimulator(context.canvas, 'touchstart', [ - { x: 10, y: 10 }, - { x: 310, y: 310 }, + { x: 50, y: 50 }, + { x: 270, y: 270 }, ]); await delay(20); await gestureSimulator(context.canvas, 'touchmove', [ diff --git a/packages/f2/test/components/interaction/roam.test.tsx b/packages/f2/test/components/interaction/roam.test.tsx index 7a24bb0e5..14cdee91d 100644 --- a/packages/f2/test/components/interaction/roam.test.tsx +++ b/packages/f2/test/components/interaction/roam.test.tsx @@ -54,24 +54,27 @@ describe('全局漫游模式', () => { // 缩小 await delay(20); await gestureSimulator(context.canvas, 'touchstart', [ - { x: 10, y: 10 }, - { x: 300, y: 300 }, + { x: 50, y: 50 }, + { x: 260, y: 260 }, ]); await delay(20); await gestureSimulator(context.canvas, 'touchmove', [ - { x: 100, y: 100 }, - { x: 200, y: 200 }, + { x: 114, y: 114 }, + { x: 186, y: 186 }, ]); await delay(20); - await gestureSimulator(context.canvas, 'touchend', { x: 100, y: 100 }); + await gestureSimulator(context.canvas, 'touchend', [ + { x: 114, y: 114 }, + { x: 114, y: 114 }, + ]); await delay(300); expect(context).toMatchImageSnapshot(); // 缩小 await delay(20); await gestureSimulator(context.canvas, 'touchstart', [ - { x: 10, y: 10 }, - { x: 310, y: 310 }, + { x: 50, y: 50 }, + { x: 270, y: 270 }, ]); await delay(20); await gestureSimulator(context.canvas, 'touchmove', [ @@ -79,7 +82,10 @@ describe('全局漫游模式', () => { { x: 160, y: 160 }, ]); await delay(20); - await gestureSimulator(context.canvas, 'touchend', { x: 160, y: 160 }); + await gestureSimulator(context.canvas, 'touchend', [ + { x: 160, y: 160 }, + { x: 160, y: 160 }, + ]); await delay(300); expect(context).toMatchImageSnapshot(); }); @@ -141,24 +147,27 @@ describe('全局漫游模式', () => { // 缩小 await delay(20); await gestureSimulator(context.canvas, 'touchstart', [ - { x: 10, y: 10 }, - { x: 300, y: 300 }, + { x: 50, y: 50 }, + { x: 260, y: 260 }, ]); await delay(20); await gestureSimulator(context.canvas, 'touchmove', [ - { x: 100, y: 100 }, - { x: 200, y: 200 }, + { x: 114, y: 114 }, + { x: 186, y: 186 }, ]); await delay(20); - await gestureSimulator(context.canvas, 'touchend', { x: 100, y: 100 }); + await gestureSimulator(context.canvas, 'touchend', [ + { x: 114, y: 114 }, + { x: 114, y: 114 }, + ]); await delay(300); expect(context).toMatchImageSnapshot(); // 缩小 await delay(20); await gestureSimulator(context.canvas, 'touchstart', [ - { x: 10, y: 10 }, - { x: 310, y: 310 }, + { x: 50, y: 50 }, + { x: 270, y: 270 }, ]); await delay(20); await gestureSimulator(context.canvas, 'touchmove', [ @@ -166,7 +175,10 @@ describe('全局漫游模式', () => { { x: 160, y: 160 }, ]); await delay(20); - await gestureSimulator(context.canvas, 'touchend', { x: 160, y: 160 }); + await gestureSimulator(context.canvas, 'touchend', [ + { x: 160, y: 160 }, + { x: 160, y: 160 }, + ]); await delay(300); expect(context).toMatchImageSnapshot(); }); diff --git "a/packages/f2/test/components/tooltip/__image_snapshots__/tooltip-test-tsx-tooltip-tooltip-\350\266\205\345\207\272\350\276\271\347\225\214\344\270\215\345\223\215\345\272\224-1-snap.png" "b/packages/f2/test/components/tooltip/__image_snapshots__/tooltip-test-tsx-tooltip-tooltip-\350\266\205\345\207\272\350\276\271\347\225\214\344\270\215\345\223\215\345\272\224-1-snap.png" new file mode 100644 index 000000000..79755009c Binary files /dev/null and "b/packages/f2/test/components/tooltip/__image_snapshots__/tooltip-test-tsx-tooltip-tooltip-\350\266\205\345\207\272\350\276\271\347\225\214\344\270\215\345\223\215\345\272\224-1-snap.png" differ diff --git "a/packages/f2/test/components/tooltip/__image_snapshots__/tooltip-test-tsx-tooltip-tooltip-\350\266\205\345\207\272\350\276\271\347\225\214\344\274\232\345\261\225\347\244\272\350\276\271\347\225\214\345\200\274-1-snap.png" "b/packages/f2/test/components/tooltip/__image_snapshots__/tooltip-test-tsx-tooltip-tooltip-\350\266\205\345\207\272\350\276\271\347\225\214\344\274\232\345\261\225\347\244\272\350\276\271\347\225\214\345\200\274-1-snap.png" deleted file mode 100644 index e83b0e32f..000000000 Binary files "a/packages/f2/test/components/tooltip/__image_snapshots__/tooltip-test-tsx-tooltip-tooltip-\350\266\205\345\207\272\350\276\271\347\225\214\344\274\232\345\261\225\347\244\272\350\276\271\347\225\214\345\200\274-1-snap.png" and /dev/null differ diff --git a/packages/f2/test/components/tooltip/tooltip.test.tsx b/packages/f2/test/components/tooltip/tooltip.test.tsx index 505de8d92..6de6cc852 100644 --- a/packages/f2/test/components/tooltip/tooltip.test.tsx +++ b/packages/f2/test/components/tooltip/tooltip.test.tsx @@ -129,7 +129,7 @@ describe('tooltip', () => { const canvas = new Canvas(props); await canvas.render(); await delay(500); - await gestureSimulator(context.canvas, 'press', { x: 170, y: 41 }); + await gestureSimulator(context.canvas, 'press', { x: 170, y: 100 }); await delay(100); expect(onChangeMockCallback.mock.calls.length).toBe(1); // 验证 onChange 有被调用 expect(onChangeMockCallback.mock.calls[0][0].length).toBe(1); // 验证 onChange 参数有效 @@ -245,7 +245,7 @@ describe('tooltip', () => { expect(context).toMatchImageSnapshot(); }); - it('Tooltip 超出边界会展示边界值', async () => { + it('Tooltip 超出边界不响应', async () => { const context = createContext('Tooltip 超出边界会展示边界值'); const onChangeMockCallback = jest.fn(); const { props } = ( diff --git a/site/.dumirc.ts b/site/.dumirc.ts index b37afbc7f..2c54b8286 100644 --- a/site/.dumirc.ts +++ b/site/.dumirc.ts @@ -146,7 +146,7 @@ export default defineConfig({ zh: '开始使用', en: 'Getting Started', }, - link: `/docs/tutorial/getting-started`, + link: `/tutorial/getting-started`, type: 'primary', }, ],