From 7c794d478bf7f7383eb6a1ef6374a52fa936ffe0 Mon Sep 17 00:00:00 2001 From: Aleksey Volkov Date: Sun, 22 Jan 2023 13:03:55 +0100 Subject: [PATCH 1/6] fixed positioning of ignored area when scaled --- src/components/DrawArea.tsx | 21 ++++++++++++++------- src/types/ignoreArea.ts | 2 ++ 2 files changed, 16 insertions(+), 7 deletions(-) diff --git a/src/components/DrawArea.tsx b/src/components/DrawArea.tsx index b212b9d4..abd0f0d3 100644 --- a/src/components/DrawArea.tsx +++ b/src/components/DrawArea.tsx @@ -81,10 +81,15 @@ export const DrawArea: FunctionComponent = ({ const handleContentMousedown = (e: any) => { if (!isDrawMode) return; + console.log(`layerX: ${e.evt.layerX}, offsetX: ${e.evt.offsetX}, stageOffset.x: ${stageOffset.x}`) + const rectX = e.evt.offsetX + const rectY = e.evt.offsetY const newArea: IgnoreArea = { id: Date.now().toString(), - x: Math.round((e.evt.layerX - stageOffset.x) / stageScale), - y: Math.round((e.evt.layerY - stageOffset.y) / stageScale), + x: Math.round((rectX) / stageScale), + y: Math.round((rectY) / stageScale), + rectX, + rectY, width: MIN_RECT_SIDE_PIXEL, height: MIN_RECT_SIDE_PIXEL, }; @@ -105,8 +110,10 @@ export const DrawArea: FunctionComponent = ({ if (isDrawing) { // update the current rectangle's width and height based on the mouse position + stage scale - const mouseX = (e.evt.layerX - stageOffset.x) / stageScale; - const mouseY = (e.evt.layerY - stageOffset.y) / stageScale; + console.log(`layerX: ${e.evt.layerX}, offsetX: ${e.evt.offsetX}, stageScale: ${stageScale}.`) + const mouseX = e.evt.offsetX / stageScale; + const mouseY = e.evt.offsetY / stageScale; + console.log(`layerX: ${e.evt.layerX}, offsetX: ${e.evt.offsetX}, mouseX: ${mouseX}, stageScale: ${stageScale}.`) const newShapesList = ignoreAreas.map((i) => { if (i.id === selectedRectId) { @@ -187,7 +194,7 @@ export const DrawArea: FunctionComponent = ({ e.evt.preventDefault(); const scaleBy = 1.04; const newScale = - e.evt.deltaY > 0 + e.evt.deltaY < 0 ? stageScale * scaleBy : stageScale / scaleBy; setStageScale(newScale); @@ -223,8 +230,8 @@ export const DrawArea: FunctionComponent = ({ Date: Mon, 23 Jan 2023 22:52:30 +0100 Subject: [PATCH 2/6] fixed resizing of ignored area when scaled --- src/components/DrawArea.tsx | 22 ++++++---------------- src/types/ignoreArea.ts | 2 -- 2 files changed, 6 insertions(+), 18 deletions(-) diff --git a/src/components/DrawArea.tsx b/src/components/DrawArea.tsx index abd0f0d3..3f247270 100644 --- a/src/components/DrawArea.tsx +++ b/src/components/DrawArea.tsx @@ -81,15 +81,10 @@ export const DrawArea: FunctionComponent = ({ const handleContentMousedown = (e: any) => { if (!isDrawMode) return; - console.log(`layerX: ${e.evt.layerX}, offsetX: ${e.evt.offsetX}, stageOffset.x: ${stageOffset.x}`) - const rectX = e.evt.offsetX - const rectY = e.evt.offsetY const newArea: IgnoreArea = { id: Date.now().toString(), - x: Math.round((rectX) / stageScale), - y: Math.round((rectY) / stageScale), - rectX, - rectY, + x: e.evt.offsetX, + y: e.evt.offsetY, width: MIN_RECT_SIDE_PIXEL, height: MIN_RECT_SIDE_PIXEL, }; @@ -110,16 +105,11 @@ export const DrawArea: FunctionComponent = ({ if (isDrawing) { // update the current rectangle's width and height based on the mouse position + stage scale - console.log(`layerX: ${e.evt.layerX}, offsetX: ${e.evt.offsetX}, stageScale: ${stageScale}.`) - const mouseX = e.evt.offsetX / stageScale; - const mouseY = e.evt.offsetY / stageScale; - console.log(`layerX: ${e.evt.layerX}, offsetX: ${e.evt.offsetX}, mouseX: ${mouseX}, stageScale: ${stageScale}.`) - const newShapesList = ignoreAreas.map((i) => { if (i.id === selectedRectId) { // new width and height - i.width = Math.max(Math.round(mouseX - i.x), MIN_RECT_SIDE_PIXEL); - i.height = Math.max(Math.round(mouseY - i.y), MIN_RECT_SIDE_PIXEL); + i.width = Math.max(Math.round(e.evt.offsetX - i.x), MIN_RECT_SIDE_PIXEL); + i.height = Math.max(Math.round(e.evt.offsetY - i.y), MIN_RECT_SIDE_PIXEL); return i; } return i; @@ -230,8 +220,8 @@ export const DrawArea: FunctionComponent = ({ Date: Thu, 26 Jan 2023 10:20:02 +0100 Subject: [PATCH 3/6] scroll both draw areas --- src/components/DrawArea.tsx | 24 +++++++++++++++++-- .../TestDetailsDialog/TestDetailsModal.tsx | 6 ++++- 2 files changed, 27 insertions(+), 3 deletions(-) diff --git a/src/components/DrawArea.tsx b/src/components/DrawArea.tsx index 3f247270..bd1ed02b 100644 --- a/src/components/DrawArea.tsx +++ b/src/components/DrawArea.tsx @@ -1,4 +1,4 @@ -import React, { FunctionComponent } from "react"; +import React, { FunctionComponent, useEffect } from "react"; import { Stage, Layer, Image } from "react-konva"; import Rectangle, { MIN_RECT_SIDE_PIXEL } from "./Rectangle"; import { IgnoreArea } from "../types/ignoreArea"; @@ -47,6 +47,10 @@ interface IDrawArea { { x: number; y: number }, React.Dispatch> ]; + stageScrollPosState: [ + { x: number; y: number }, + React.Dispatch> + ]; stageScaleState: [number, React.Dispatch>]; drawModeState: [boolean, React.Dispatch>]; } @@ -65,12 +69,14 @@ export const DrawArea: FunctionComponent = ({ stageOffsetState, stageInitPosState, stagePosState, + stageScrollPosState, drawModeState, }) => { const classes = useStyles(); const [stageInitPos, setStageInitPos] = stageInitPosState; const [stageOffset, setStageOffset] = stageOffsetState; const [stagePos, setStagePos] = stagePosState; + const [stageScollPos, setStageScrollPos] = stageScrollPosState; const [stageScale, setStageScale] = stageScaleState; const [isDrag, setIsDrag] = React.useState(false); @@ -78,6 +84,12 @@ export const DrawArea: FunctionComponent = ({ const [isDrawing, setIsDrawing] = React.useState(isDrawMode); const [image, imageStatus] = imageState; + const scrollContainerRef = React.useRef(null); + + useEffect(()=>{ + scrollContainerRef.current?.scrollTo(stageScollPos.x, stageScollPos.y) + }, [stageScollPos]) + const handleContentMousedown = (e: any) => { if (!isDrawMode) return; @@ -135,7 +147,15 @@ export const DrawArea: FunctionComponent = ({ )} {(!imageName || imageStatus === "failed") && } {imageName && imageStatus === "loaded" && ( -
+
{ + setStageScrollPos({ + x: (event.target as HTMLElement).scrollLeft, + y:(event.target as HTMLElement).scrollTop + }) + }} + >
@@ -448,6 +449,7 @@ const TestDetailsModal: React.FunctionComponent<{ onStageClick={removeSelection} stageScaleState={[stageScale, setStageScale]} stagePosState={[stagePos, setStagePos]} + stageScrollPosState={[stageScrollPos, setStageScrollPos]} stageInitPosState={[stageInitPos, setStageInitPos]} stageOffsetState={[stageOffset, setStageOffset]} drawModeState={[false, setIsDrawMode]} @@ -468,6 +470,7 @@ const TestDetailsModal: React.FunctionComponent<{ onStageClick={removeSelection} stageScaleState={[stageScale, setStageScale]} stagePosState={[stagePos, setStagePos]} + stageScrollPosState={[stageScrollPos, setStageScrollPos]} stageInitPosState={[stageInitPos, setStageInitPos]} stageOffsetState={[stageOffset, setStageOffset]} drawModeState={[isDrawMode, setIsDrawMode]} @@ -486,6 +489,7 @@ const TestDetailsModal: React.FunctionComponent<{ onStageClick={removeSelection} stageScaleState={[stageScale, setStageScale]} stagePosState={[stagePos, setStagePos]} + stageScrollPosState={[stageScrollPos, setStageScrollPos]} stageInitPosState={[stageInitPos, setStageInitPos]} stageOffsetState={[stageOffset, setStageOffset]} drawModeState={[isDrawMode, setIsDrawMode]} From b85515225eb0a2d89e02a33eaf2dd7002826a3b9 Mon Sep 17 00:00:00 2001 From: Aleksey Volkov Date: Sat, 18 Mar 2023 13:08:15 +0100 Subject: [PATCH 4/6] ability to show 100 test runs per page (#311) --- src/components/TestRunList/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/TestRunList/index.tsx b/src/components/TestRunList/index.tsx index 2bce04c3..14c7dc21 100644 --- a/src/components/TestRunList/index.tsx +++ b/src/components/TestRunList/index.tsx @@ -139,7 +139,7 @@ const TestRunList: React.FunctionComponent = () => { rows={testRuns} columns={columnsDef} pageSize={pageSize} - rowsPerPageOptions={[10, 20, 30]} + rowsPerPageOptions={[10, 30, 100]} onPageSizeChange={(newPageSize) => setPageSize(newPageSize)} pagination loading={loading} From 73cb2150c12207ede00820a29d9c826116b81b7a Mon Sep 17 00:00:00 2001 From: Aleksey Volkov Date: Thu, 13 Apr 2023 16:13:01 +0200 Subject: [PATCH 5/6] fix codacy issues #311 --- src/components/DrawArea.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/DrawArea.tsx b/src/components/DrawArea.tsx index bd1ed02b..21f6608b 100644 --- a/src/components/DrawArea.tsx +++ b/src/components/DrawArea.tsx @@ -86,9 +86,9 @@ export const DrawArea: FunctionComponent = ({ const scrollContainerRef = React.useRef(null); - useEffect(()=>{ + useEffect(() => { scrollContainerRef.current?.scrollTo(stageScollPos.x, stageScollPos.y) - }, [stageScollPos]) + }, [stageScollPos]); const handleContentMousedown = (e: any) => { if (!isDrawMode) return; @@ -149,11 +149,11 @@ export const DrawArea: FunctionComponent = ({ {imageName && imageStatus === "loaded" && (
{ + onScroll={(event) => { setStageScrollPos({ x: (event.target as HTMLElement).scrollLeft, y:(event.target as HTMLElement).scrollTop - }) + }); }} >
From e69cd9009080a3fe7f1020f510429c3cd81c493b Mon Sep 17 00:00:00 2001 From: Aleksey Volkov Date: Thu, 13 Apr 2023 16:22:27 +0200 Subject: [PATCH 6/6] fix codacy issues #311 --- src/components/DrawArea.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/DrawArea.tsx b/src/components/DrawArea.tsx index 21f6608b..106068c2 100644 --- a/src/components/DrawArea.tsx +++ b/src/components/DrawArea.tsx @@ -87,7 +87,7 @@ export const DrawArea: FunctionComponent = ({ const scrollContainerRef = React.useRef(null); useEffect(() => { - scrollContainerRef.current?.scrollTo(stageScollPos.x, stageScollPos.y) + scrollContainerRef.current?.scrollTo(stageScollPos.x, stageScollPos.y); }, [stageScollPos]); const handleContentMousedown = (e: any) => {