From 478b0a29bfc00ab1edbc9597d07f39343777f34f Mon Sep 17 00:00:00 2001 From: Simon Ser Date: Fri, 7 Mar 2025 16:30:22 +0100 Subject: [PATCH] ui-charts: simplify fillRect() with getPoint() Instead of manually handling timeAxis, use the getPoint() helper. Signed-off-by: Simon Ser --- .../spaceTimeChart/components/ZoomRect.tsx | 7 ++--- ui-charts/src/spaceTimeChart/utils/canvas.ts | 30 +++++++------------ 2 files changed, 13 insertions(+), 24 deletions(-) diff --git a/ui-charts/src/spaceTimeChart/components/ZoomRect.tsx b/ui-charts/src/spaceTimeChart/components/ZoomRect.tsx index c9b6dee0..79a6226d 100644 --- a/ui-charts/src/spaceTimeChart/components/ZoomRect.tsx +++ b/ui-charts/src/spaceTimeChart/components/ZoomRect.tsx @@ -27,11 +27,8 @@ export const ZoomRect = (rect: CanvasRect) => { (ctx, context) => { ctx.save(); ctx.fillStyle = '#0000000D'; /* black5 */ - const { areaTimeSize, areaSpaceSize } = fillRect(ctx, rect, context); - if (areaTimeSize && areaSpaceSize) { - const width = context.timeAxis === 'x' ? areaTimeSize : areaSpaceSize; - const height = context.timeAxis === 'x' ? areaSpaceSize : areaTimeSize; - + const { width, height } = fillRect(ctx, rect, context); + if (width && height) { ctx.lineWidth = LINE_WIDTH; for (let i = 0; Math.abs(i) < Math.abs(width); i += SPACING * Math.sign(width)) { diff --git a/ui-charts/src/spaceTimeChart/utils/canvas.ts b/ui-charts/src/spaceTimeChart/utils/canvas.ts index a6a8a338..5ca7135c 100644 --- a/ui-charts/src/spaceTimeChart/utils/canvas.ts +++ b/ui-charts/src/spaceTimeChart/utils/canvas.ts @@ -348,27 +348,19 @@ export type CanvasRect = { export function fillRect( ctx: CanvasRenderingContext2D, - rect: CanvasRect, - spaceTimeContext: SpaceTimeChartContextType + { timeStart, timeEnd, spaceStart, spaceEnd }: CanvasRect, + { getPoint }: SpaceTimeChartContextType ) { - const { getTimePixel, getSpacePixel, timeAxis } = spaceTimeContext; - const { timeStart, timeEnd, spaceStart, spaceEnd } = rect; + const topLeft = getPoint({ time: Number(timeStart), position: spaceStart }); + const bottomRight = getPoint({ time: Number(timeEnd), position: spaceEnd }); - const timeStartPixel = getTimePixel(Number(timeStart)); - const endTimePixel = getTimePixel(Number(timeEnd)); - const spaceStartPixel = getSpacePixel(spaceStart); - const spaceEndPixel = getSpacePixel(spaceEnd); + const width = bottomRight.x - topLeft.x; + const height = bottomRight.y - topLeft.y; - const areaSpaceSize = spaceEndPixel - spaceStartPixel; - const areaTimeSize = endTimePixel - timeStartPixel; - if (!areaSpaceSize || !areaTimeSize) return {}; - - if (timeAxis === 'x') { - ctx.translate(timeStartPixel, spaceStartPixel); - ctx.fillRect(0, 0, areaTimeSize, areaSpaceSize); - } else { - ctx.translate(spaceStartPixel, timeStartPixel); - ctx.fillRect(0, 0, areaSpaceSize, areaTimeSize); + if (width !== 0 && height !== 0) { + ctx.translate(topLeft.x, topLeft.y); + ctx.fillRect(0, 0, width, height); } - return { areaTimeSize, areaSpaceSize }; + + return { width, height }; }