From cb7df8df4bf32f37823d72ffd2d7e5b146ff7f18 Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Mon, 17 Nov 2025 18:04:07 +0800 Subject: [PATCH 1/3] fix: fix issue of datazoom --- .../src/data-zoom/data-zoom.ts | 4 +- .../src/data-zoom/renderer.ts | 41 +-- .../__tests__/browser/src/pages/area.ts | 233 ++++++++++-------- 3 files changed, 162 insertions(+), 116 deletions(-) diff --git a/packages/vrender-components/src/data-zoom/data-zoom.ts b/packages/vrender-components/src/data-zoom/data-zoom.ts index d5a399cd4..878852fb6 100644 --- a/packages/vrender-components/src/data-zoom/data-zoom.ts +++ b/packages/vrender-components/src/data-zoom/data-zoom.ts @@ -177,8 +177,8 @@ export class DataZoom extends AbstractComponent> { setAttributes(params: Partial>, forceUpdateTag?: boolean): void { const { start, end } = this.attribute as DataZoomAttributes; - start && (this._state.start = start); - end && (this._state.end = end); + start && (this._state.start = params.start ?? start); + end && (this._state.end = params.end ?? end); this._renderer.setAttributes(this._getRendererAttrs()); this._interaction.setAttributes(this._getInteractionAttrs()); diff --git a/packages/vrender-components/src/data-zoom/renderer.ts b/packages/vrender-components/src/data-zoom/renderer.ts index 7ac78e6cb..45dd1da05 100644 --- a/packages/vrender-components/src/data-zoom/renderer.ts +++ b/packages/vrender-components/src/data-zoom/renderer.ts @@ -230,7 +230,7 @@ export class DataZoomRenderer { height, cursor: brushSelect ? 'crosshair' : 'auto', ...backgroundStyle, - pickable: zoomLock ? false : (backgroundStyle.pickable ?? true) + pickable: zoomLock ? false : backgroundStyle.pickable ?? true }, 'rect' ) as IRect; @@ -264,7 +264,7 @@ export class DataZoomRenderer { width: (end - start) * width, height: middleHandlerBackgroundSize, ...middleHandlerStyle.background?.style, - pickable: zoomLock ? false : (middleHandlerStyle.background?.style?.pickable ?? true) + pickable: zoomLock ? false : middleHandlerStyle.background?.style?.pickable ?? true }, 'rect' ) as IRect; @@ -277,7 +277,7 @@ export class DataZoomRenderer { angle: 0, symbolType: middleHandlerStyle.icon?.symbolType ?? 'square', ...middleHandlerStyle.icon, - pickable: zoomLock ? false : (middleHandlerStyle.icon.pickable ?? true) + pickable: zoomLock ? false : middleHandlerStyle.icon.pickable ?? true }, 'symbol' ) as ISymbol; @@ -291,7 +291,7 @@ export class DataZoomRenderer { symbolType: startHandlerStyle.symbolType ?? 'square', ...(DEFAULT_HANDLER_ATTR_MAP.horizontal as any), ...startHandlerStyle, - pickable: zoomLock ? false : (startHandlerStyle.pickable ?? true) + pickable: zoomLock ? false : startHandlerStyle.pickable ?? true }, 'symbol' ) as ISymbol; @@ -304,7 +304,7 @@ export class DataZoomRenderer { symbolType: endHandlerStyle.symbolType ?? 'square', ...(DEFAULT_HANDLER_ATTR_MAP.horizontal as any), ...endHandlerStyle, - pickable: zoomLock ? false : (endHandlerStyle.pickable ?? true) + pickable: zoomLock ? false : endHandlerStyle.pickable ?? true }, 'symbol' ) as ISymbol; @@ -357,7 +357,7 @@ export class DataZoomRenderer { width: middleHandlerBackgroundSize, height: (end - start) * height, ...middleHandlerStyle.background?.style, - pickable: zoomLock ? false : (middleHandlerStyle.background?.style?.pickable ?? true) + pickable: zoomLock ? false : middleHandlerStyle.background?.style?.pickable ?? true }, 'rect' ) as IRect; @@ -374,7 +374,7 @@ export class DataZoomRenderer { symbolType: middleHandlerStyle.icon?.symbolType ?? 'square', strokeBoundsBuffer: 0, ...middleHandlerStyle.icon, - pickable: zoomLock ? false : (middleHandlerStyle.icon?.pickable ?? true) + pickable: zoomLock ? false : middleHandlerStyle.icon?.pickable ?? true }, 'symbol' ) as ISymbol; @@ -388,7 +388,7 @@ export class DataZoomRenderer { symbolType: startHandlerStyle.symbolType ?? 'square', ...(DEFAULT_HANDLER_ATTR_MAP.vertical as any), ...startHandlerStyle, - pickable: zoomLock ? false : (startHandlerStyle.pickable ?? true) + pickable: zoomLock ? false : startHandlerStyle.pickable ?? true }, 'symbol' ) as ISymbol; @@ -402,7 +402,7 @@ export class DataZoomRenderer { symbolType: endHandlerStyle.symbolType ?? 'square', ...(DEFAULT_HANDLER_ATTR_MAP.vertical as any), ...endHandlerStyle, - pickable: zoomLock ? false : (endHandlerStyle.pickable ?? true) + pickable: zoomLock ? false : endHandlerStyle.pickable ?? true }, 'symbol' ) as ISymbol; @@ -472,7 +472,7 @@ export class DataZoomRenderer { height: height, cursor: brushSelect ? 'crosshair' : 'move', ...selectedBackgroundStyle, - pickable: zoomLock ? false : ((selectedBackgroundChartStyle as any).pickable ?? true) + pickable: zoomLock ? false : (selectedBackgroundChartStyle as any).pickable ?? true }, 'rect' ) as IRect; @@ -487,7 +487,7 @@ export class DataZoomRenderer { height: (end - start) * height, cursor: brushSelect ? 'crosshair' : 'move', ...selectedBackgroundStyle, - pickable: zoomLock ? false : (selectedBackgroundStyle.pickable ?? true) + pickable: zoomLock ? false : selectedBackgroundStyle.pickable ?? true }, 'rect' ) as IRect; @@ -592,8 +592,13 @@ export class DataZoomRenderer { }); } - private _computeBasePoints() { + private _computeBasePoints(points: IPointLike[]) { const { orient } = this.attribute as DataZoomAttributes; + const key = orient === 'bottom' || orient === 'top' ? 'x' : 'y'; + let lastPointSide = Math.sign(points[points.length - 1][key] - points[0][key]); + if (lastPointSide === 0) { + lastPointSide = 1; + } const { position, width, height } = this._getLayoutAttrFromConfig(); let basePointStart: any; let basePointEnd: any; @@ -637,6 +642,14 @@ export class DataZoomRenderer { } ]; } + + if (Math.sign(basePointEnd[0][key] - basePointStart[0][key]) !== lastPointSide) { + return { + basePointStart: basePointEnd, + basePointEnd: basePointStart + }; + } + return { basePointStart, basePointEnd @@ -668,7 +681,7 @@ export class DataZoomRenderer { // 采样 previewPoints = this._simplifyPoints(previewPoints); - const { basePointStart, basePointEnd } = this._computeBasePoints(); + const { basePointStart, basePointEnd } = this._computeBasePoints(previewPoints); return basePointStart.concat(previewPoints).concat(basePointEnd); } @@ -689,7 +702,7 @@ export class DataZoomRenderer { // 采样 previewPoints = this._simplifyPoints(previewPoints); - const { basePointStart, basePointEnd } = this._computeBasePoints(); + const { basePointStart, basePointEnd } = this._computeBasePoints(previewPoints); return basePointStart.concat(previewPoints).concat(basePointEnd); } diff --git a/packages/vrender/__tests__/browser/src/pages/area.ts b/packages/vrender/__tests__/browser/src/pages/area.ts index 34e979628..d8ec7cea6 100644 --- a/packages/vrender/__tests__/browser/src/pages/area.ts +++ b/packages/vrender/__tests__/browser/src/pages/area.ts @@ -209,6 +209,75 @@ export const page = () => { }); graphics.length = 0; + graphics.push( + createArea({ + curveType: 'basis', + points: [ + { + x: 256, + x1: 156, + y: 134 + }, + { + x: 256, + y: 177.33333333333331, + x1: 156 + }, + { + x: 257.3830317870584, + y: 288.44444444444446, + x1: 156 + }, + { + x: 258.67537296512944, + y: 399.55555555555554, + x1: 156 + }, + { + x: 262.37282909354735, + y: 510.6666666666667, + x1: 156 + }, + { + x: 263.6615426472589, + y: 621.7777777777778, + x1: 156 + }, + { + x: 266.6688432412824, + y: 732.8888888888889, + x1: 156 + }, + { + x: 269.53103886092595, + y: 844, + x1: 156 + }, + { + x: 273.36543780891486, + y: 955.1111111111113, + x1: 156 + }, + { + x: 276, + y: 1066.2222222222224, + x1: 156 + }, + { + x: 256, + x1: 156, + y: 500, + y1: 500 + } + ], + pickable: false, + visible: true, + stroke: false, + lineWidth: 1, + connectedType: 'none', + fill: '#fbb934' + }) + ); graphics.push( createArea({ visible: true, @@ -216,113 +285,77 @@ export const page = () => { lineCap: 'round', lineJoin: 'round', fillOpacity: 0.2, - curveType: 'monotoneX', - enableSegments: true, - stroke: false, + fill: '#1664FF', + stroke: ['#1664FF', false, false, false], connectedType: 'none', - fill: '#F5222D', - y1: 0, - defined: true, - segments: [ + zIndex: -4229, + points: [ + { + x: 12.77158, + y: 584.3733007102189, + x1: 0, + y1: 584.3733007102189 + }, + { + x: 11.87464, + y: 517.587780629051, + x1: 0, + y1: 517.587780629051 + }, + { + x: 15.76742, + y: 450.8022605478832, + x1: 0, + y1: 450.8022605478832, + context: 'Rouge_Africa' + }, + { + x: 27.953120000000002, + y: 384.0167404667153, + x1: 0, + y1: 384.0167404667153, + context: 'Lipstick_Africa' + }, + { + x: 9.99016, + y: 317.23122038554743, + x1: 0, + y1: 317.23122038554743, + context: 'Eyeshadows_Africa' + }, + { + x: 16.40464, + y: 250.44570030437953, + x1: 0, + y1: 250.44570030437953, + context: 'Eyeliner_Africa' + }, + { + x: 41.377019999999995, + y: 183.66018022321165, + x1: 0, + y1: 183.66018022321165, + context: 'Foundation_Africa' + }, { - visible: true, - lineWidth: 2, - lineCap: 'round', - lineJoin: 'round', - fillOpacity: 0.2, - curveType: 'monotoneX', - x: 0, - y: 0, - stroke: false, - connectedType: 'none', - fill: '#F5222D', - y1: 136.8, - points: [ - { - x: 0, - y: 296.40000000000003, - context: '1700_0', - y1: 136.8 - }, - { - x: 94.1875, - y: 186.96, - context: '1710_0', - y1: 86.63999999999997 - }, - { - x: 188.375, - y: 109.44, - context: '1720_0', - y1: 18.240000000000016 - }, - { - x: 282.5625, - y: 159.6, - context: '1730_0', - y1: 13.680000000000012 - }, - { - x: 376.75, - y: 150.48, - context: '1740_0', - y1: 31.919999999999977 - }, - { - x: 470.9375, - y: 95.75999999999999, - context: '1750_0', - y1: 45.59999999999999 - }, - { - x: 499.19374999999997, - y: 59.28, - context: '1753_0', - y1: 59.28 - } - ] + x: 12.104159999999998, + y: 116.8746601420438, + x1: 0, + y1: 116.8746601420438, + context: 'Lip gloss_Africa' }, { - visible: true, - lineWidth: 2, - lineCap: 'round', - lineJoin: 'round', - fillOpacity: 0.2, - curveType: 'monotoneX', - x: 0, - y: 0, - stroke: false, - connectedType: 'none', - fill: '#FAAD14', - y1: 95.75999999999999, - points: [ - { - x: 565.125, - context: '1760_0', - y1: 95.75999999999999, - defined: false - }, - { - x: 659.3125, - context: '1770_0', - y1: 68.4, - defined: false - }, - { - x: 753.5, - context: '1780_0', - y1: 31.919999999999977, - defined: false - } - ] + x: 56.51024, + y: 50.08914006087592, + x1: 0, + y1: 50.08914006087592, + context: 'Mascara_Africa' } ], - points: null, - x: 0, - y: 0, - x1: 0, + segments: null, pickable: true, - clipRange: 0.8 + clipRange: 1, + clipRangeByDimension: 'y' }) ); From 401067da357da368817db7902a474d38e79c89b0 Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Mon, 17 Nov 2025 18:47:01 +0800 Subject: [PATCH 2/3] fix: fix issue of datazoom --- .../vrender-components/src/data-zoom/renderer.ts | 15 +++++---------- packages/vrender-components/src/data-zoom/type.ts | 5 +++++ 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/vrender-components/src/data-zoom/renderer.ts b/packages/vrender-components/src/data-zoom/renderer.ts index 45dd1da05..63c962365 100644 --- a/packages/vrender-components/src/data-zoom/renderer.ts +++ b/packages/vrender-components/src/data-zoom/renderer.ts @@ -592,13 +592,8 @@ export class DataZoomRenderer { }); } - private _computeBasePoints(points: IPointLike[]) { - const { orient } = this.attribute as DataZoomAttributes; - const key = orient === 'bottom' || orient === 'top' ? 'x' : 'y'; - let lastPointSide = Math.sign(points[points.length - 1][key] - points[0][key]); - if (lastPointSide === 0) { - lastPointSide = 1; - } + private _computeBasePoints() { + const { orient, isReverse = false } = this.attribute as DataZoomAttributes; const { position, width, height } = this._getLayoutAttrFromConfig(); let basePointStart: any; let basePointEnd: any; @@ -643,7 +638,7 @@ export class DataZoomRenderer { ]; } - if (Math.sign(basePointEnd[0][key] - basePointStart[0][key]) !== lastPointSide) { + if (isReverse) { return { basePointStart: basePointEnd, basePointEnd: basePointStart @@ -681,7 +676,7 @@ export class DataZoomRenderer { // 采样 previewPoints = this._simplifyPoints(previewPoints); - const { basePointStart, basePointEnd } = this._computeBasePoints(previewPoints); + const { basePointStart, basePointEnd } = this._computeBasePoints(); return basePointStart.concat(previewPoints).concat(basePointEnd); } @@ -702,7 +697,7 @@ export class DataZoomRenderer { // 采样 previewPoints = this._simplifyPoints(previewPoints); - const { basePointStart, basePointEnd } = this._computeBasePoints(previewPoints); + const { basePointStart, basePointEnd } = this._computeBasePoints(); return basePointStart.concat(previewPoints).concat(basePointEnd); } diff --git a/packages/vrender-components/src/data-zoom/type.ts b/packages/vrender-components/src/data-zoom/type.ts index 1d23d6815..4d8df2b7a 100644 --- a/packages/vrender-components/src/data-zoom/type.ts +++ b/packages/vrender-components/src/data-zoom/type.ts @@ -220,6 +220,11 @@ export interface DataZoomAttributes extends IGroupGraphicAttribute { * 参考: https://mourner.github.io/simplify-js/ */ tolerance?: number; + + /** + * 是否反转DataZoom 作用于BasePoint的计算 + */ + isReverse?: boolean; } /** From 5562c28de9ede4783cfd044707fc6483e21b9e5e Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Tue, 18 Nov 2025 17:50:18 +0800 Subject: [PATCH 3/3] Revert "fix: fix issue of datazoom" This reverts commit 401067da357da368817db7902a474d38e79c89b0. --- .../vrender-components/src/data-zoom/renderer.ts | 15 ++++++++++----- packages/vrender-components/src/data-zoom/type.ts | 5 ----- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/vrender-components/src/data-zoom/renderer.ts b/packages/vrender-components/src/data-zoom/renderer.ts index 63c962365..45dd1da05 100644 --- a/packages/vrender-components/src/data-zoom/renderer.ts +++ b/packages/vrender-components/src/data-zoom/renderer.ts @@ -592,8 +592,13 @@ export class DataZoomRenderer { }); } - private _computeBasePoints() { - const { orient, isReverse = false } = this.attribute as DataZoomAttributes; + private _computeBasePoints(points: IPointLike[]) { + const { orient } = this.attribute as DataZoomAttributes; + const key = orient === 'bottom' || orient === 'top' ? 'x' : 'y'; + let lastPointSide = Math.sign(points[points.length - 1][key] - points[0][key]); + if (lastPointSide === 0) { + lastPointSide = 1; + } const { position, width, height } = this._getLayoutAttrFromConfig(); let basePointStart: any; let basePointEnd: any; @@ -638,7 +643,7 @@ export class DataZoomRenderer { ]; } - if (isReverse) { + if (Math.sign(basePointEnd[0][key] - basePointStart[0][key]) !== lastPointSide) { return { basePointStart: basePointEnd, basePointEnd: basePointStart @@ -676,7 +681,7 @@ export class DataZoomRenderer { // 采样 previewPoints = this._simplifyPoints(previewPoints); - const { basePointStart, basePointEnd } = this._computeBasePoints(); + const { basePointStart, basePointEnd } = this._computeBasePoints(previewPoints); return basePointStart.concat(previewPoints).concat(basePointEnd); } @@ -697,7 +702,7 @@ export class DataZoomRenderer { // 采样 previewPoints = this._simplifyPoints(previewPoints); - const { basePointStart, basePointEnd } = this._computeBasePoints(); + const { basePointStart, basePointEnd } = this._computeBasePoints(previewPoints); return basePointStart.concat(previewPoints).concat(basePointEnd); } diff --git a/packages/vrender-components/src/data-zoom/type.ts b/packages/vrender-components/src/data-zoom/type.ts index 4d8df2b7a..1d23d6815 100644 --- a/packages/vrender-components/src/data-zoom/type.ts +++ b/packages/vrender-components/src/data-zoom/type.ts @@ -220,11 +220,6 @@ export interface DataZoomAttributes extends IGroupGraphicAttribute { * 参考: https://mourner.github.io/simplify-js/ */ tolerance?: number; - - /** - * 是否反转DataZoom 作用于BasePoint的计算 - */ - isReverse?: boolean; } /**