From 7d309d17ec347f883a7ceb592e88d05b5afb4121 Mon Sep 17 00:00:00 2001 From: Nivesh Date: Thu, 8 Jun 2023 18:43:02 +0530 Subject: [PATCH 1/5] directly open that window --- src/views/MainView/MainView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/MainView/MainView.tsx b/src/views/MainView/MainView.tsx index cd874434..02b34f8d 100644 --- a/src/views/MainView/MainView.tsx +++ b/src/views/MainView/MainView.tsx @@ -11,7 +11,7 @@ import Fade from '@mui/material/Fade'; import ImagesDropZone from './ImagesDropZone/ImagesDropZone'; const MainView: React.FC = () => { - const [projectInProgress, setProjectInProgress] = useState(false); + const [projectInProgress, setProjectInProgress] = useState(true); const [projectCanceled, setProjectCanceled] = useState(false); const startProject = () => { From ac0cef5c334c44615c096d62834786f70e5e9f7b Mon Sep 17 00:00:00 2001 From: Nivesh Date: Fri, 9 Jun 2023 19:15:40 +0530 Subject: [PATCH 2/5] added the go back function on the add labels popup --- src/data/enums/PopupWindowType.ts | 2 +- src/views/MainView/ImagesDropZone/ImagesDropZone.tsx | 3 ++- .../InsertLabelNamesPopup/InsertLabelNamesPopup.tsx | 12 +++++++++++- 3 files changed, 14 insertions(+), 3 deletions(-) diff --git a/src/data/enums/PopupWindowType.ts b/src/data/enums/PopupWindowType.ts index da368126..ac7b3b09 100644 --- a/src/data/enums/PopupWindowType.ts +++ b/src/data/enums/PopupWindowType.ts @@ -1,4 +1,4 @@ -export enum PopupWindowType { + export enum PopupWindowType { LOAD_LABEL_NAMES = 'LOAD_LABEL_NAMES', UPDATE_LABEL = 'UPDATE_LABEL', SUGGEST_LABEL_NAMES = 'SUGGEST_LABEL_NAMES', diff --git a/src/views/MainView/ImagesDropZone/ImagesDropZone.tsx b/src/views/MainView/ImagesDropZone/ImagesDropZone.tsx index 86763ff8..2db2dab4 100644 --- a/src/views/MainView/ImagesDropZone/ImagesDropZone.tsx +++ b/src/views/MainView/ImagesDropZone/ImagesDropZone.tsx @@ -28,6 +28,7 @@ const ImagesDropZone: React.FC = (props: PropsWithChildren) => { } } as DropzoneOptions); + //end point const startEditor = (projectType: ProjectType) => { if (acceptedFiles.length > 0) { const files = sortBy(acceptedFiles, (item: File) => item.name) @@ -41,7 +42,7 @@ const ImagesDropZone: React.FC = (props: PropsWithChildren) => { props.updateActivePopupTypeAction(PopupWindowType.INSERT_LABEL_NAMES); } }; - +//taking the file as input const getDropZoneContent = () => { if (acceptedFiles.length === 0) return <> diff --git a/src/views/PopupView/InsertLabelNamesPopup/InsertLabelNamesPopup.tsx b/src/views/PopupView/InsertLabelNamesPopup/InsertLabelNamesPopup.tsx index 74f4a628..30c1b590 100644 --- a/src/views/PopupView/InsertLabelNamesPopup/InsertLabelNamesPopup.tsx +++ b/src/views/PopupView/InsertLabelNamesPopup/InsertLabelNamesPopup.tsx @@ -177,8 +177,17 @@ const InsertLabelNamesPopup: React.FC = ( updateActivePopupTypeAction(null); }; + const go_back_function = () => { + console.log("clicked"); + updateActivePopupTypeAction(PopupWindowType.EXIT_PROJECT) + } + const renderContent = () => { - return (
+ return ( +
+ +
+
= (
}
+
); }; From 7fec6eaff392bef35265962c5d22e696186af551 Mon Sep 17 00:00:00 2001 From: Nivesh Date: Tue, 13 Jun 2023 12:13:10 +0530 Subject: [PATCH 3/5] default label as the first label --- .../RectLabelsList/RectLabelsList.tsx | 2 +- .../InsertLabelNamesPopup.tsx | 16 ++++++++++++++-- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/src/views/EditorView/SideNavigationBar/RectLabelsList/RectLabelsList.tsx b/src/views/EditorView/SideNavigationBar/RectLabelsList/RectLabelsList.tsx index 65c892bb..dbb741de 100644 --- a/src/views/EditorView/SideNavigationBar/RectLabelsList/RectLabelsList.tsx +++ b/src/views/EditorView/SideNavigationBar/RectLabelsList/RectLabelsList.tsx @@ -96,7 +96,7 @@ const RectLabelsList: React.FC = ( id={labelRect.id} key={labelRect.id} onDelete={deleteRectLabelById} - value={labelRect.labelId !== null ? findLast(labelNames, {id: labelRect.labelId}) : null} + value={labelRect.labelId !== null ? findLast(labelNames, {id: labelRect.labelId}) : labelNames[0]} options={labelNames} onSelectLabel={updateRectLabel} toggleLabelVisibility={toggleRectLabelVisibilityById} diff --git a/src/views/PopupView/InsertLabelNamesPopup/InsertLabelNamesPopup.tsx b/src/views/PopupView/InsertLabelNamesPopup/InsertLabelNamesPopup.tsx index 30c1b590..688931c9 100644 --- a/src/views/PopupView/InsertLabelNamesPopup/InsertLabelNamesPopup.tsx +++ b/src/views/PopupView/InsertLabelNamesPopup/InsertLabelNamesPopup.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useRef, useEffect } from 'react'; import './InsertLabelNamesPopup.scss'; import { GenericYesNoPopup } from '../GenericYesNoPopup/GenericYesNoPopup'; import { PopupWindowType } from '../../../data/enums/PopupWindowType'; @@ -43,6 +43,14 @@ const InsertLabelNamesPopup: React.FC = ( projectType, enablePerClassColoration }) => { + + const buttonRef = useRef(null); + + useEffect(() => { + // Simulate click event on component load + buttonRef.current.click(); + }, []); + const [labelNames, setLabelNames] = useState(LabelsSelector.getLabelNames()); const validateEmptyLabelNames = (): boolean => { @@ -178,7 +186,7 @@ const InsertLabelNamesPopup: React.FC = ( }; const go_back_function = () => { - console.log("clicked"); + // console.log("clicked"); updateActivePopupTypeAction(PopupWindowType.EXIT_PROJECT) } @@ -227,7 +235,9 @@ const InsertLabelNamesPopup: React.FC = ( :
= ( src={'ico/type-writer.png'} />

Your label list is empty

+
} @@ -250,6 +261,7 @@ const InsertLabelNamesPopup: React.FC = ( onAccept={isUpdate ? safeOnUpdateAcceptCallback : safeOnCreateAcceptCallback} rejectLabel={isUpdate ? 'Cancel' : 'Load labels from file'} onReject={isUpdate ? onUpdateRejectCallback : onCreateRejectCallback} + skipRejectButton = {true} />); }; From cfb45873db6ad7afb39460d6240906641a981154 Mon Sep 17 00:00:00 2001 From: Nivesh Date: Fri, 23 Jun 2023 10:18:28 +0530 Subject: [PATCH 4/5] added drag to rectangles --- src/logic/render/RectRenderEngine.ts | 89 +++++++++++++++++++++++++++- src/utils/RectUtil.ts | 1 + 2 files changed, 87 insertions(+), 3 deletions(-) diff --git a/src/logic/render/RectRenderEngine.ts b/src/logic/render/RectRenderEngine.ts index 50fbff8b..62bff4bd 100644 --- a/src/logic/render/RectRenderEngine.ts +++ b/src/logic/render/RectRenderEngine.ts @@ -33,6 +33,7 @@ export class RectRenderEngine extends BaseRenderEngine { private startCreateRectPoint: IPoint; private startResizeRectAnchor: RectAnchor; + private insideRectangleSelected: boolean; public constructor(canvas: HTMLCanvasElement) { super(canvas); @@ -48,19 +49,30 @@ export class RectRenderEngine extends BaseRenderEngine { const isMouseOverCanvas: boolean = RenderEngineUtil.isMouseOverCanvas(data); if (isMouseOverCanvas) { const rectUnderMouse: LabelRect = this.getRectUnderMouse(data); + const rectContainingMouse: LabelRect = this.getRectContainingMouse(data); + if (!!rectUnderMouse) { const rect: IRect = this.calculateRectRelativeToActiveImage(rectUnderMouse.rect, data); const anchorUnderMouse: RectAnchor = this.getAnchorUnderMouseByRect(rect, data.mousePositionOnViewPortContent, data.viewPortContentImageRect); if (!!anchorUnderMouse && rectUnderMouse.status === LabelStatus.ACCEPTED) { store.dispatch(updateActiveLabelId(rectUnderMouse.id)); this.startRectResize(anchorUnderMouse); - } else { + } + else { if (!!LabelsSelector.getHighlightedLabelId()) store.dispatch(updateActiveLabelId(LabelsSelector.getHighlightedLabelId())); - else + else{ this.startRectCreation(data.mousePositionOnViewPortContent); + } + } - } else if (isMouseOverImage) { + } + else if(!!rectContainingMouse){ + // console.log("yayy") + store.dispatch(updateActiveLabelId(rectContainingMouse.id)); + this.startRectTranslate(); + } + else if (isMouseOverImage) { this.startRectCreation(data.mousePositionOnViewPortContent); } @@ -83,6 +95,35 @@ export class RectRenderEngine extends BaseRenderEngine { this.addRectLabel(RenderEngineUtil.transferRectFromImageToViewPortContent(rect, data)); } + //&& !!activeLabelRect + + if(!!this.insideRectangleSelected ){ + // console.log("here",this.insideRectangleSelected) + const rect: IRect = this.calculateRectRelativeToActiveImage(activeLabelRect.rect, data); + const rectCenter: IPoint = {x :rect.x, y : rect.y}; + const startAnchorPosition: IPoint = PointUtil.add(rectCenter, + data.viewPortContentImageRect); + const delta: IPoint = PointUtil.subtract(mousePositionSnapped, startAnchorPosition); + const resizeRect: IRect = RectUtil.translate(rect, delta); + const scale: number = RenderEngineUtil.calculateImageScale(data); + const scaledRect: IRect = RectUtil.scaleRect(resizeRect, scale); + + const imageData = LabelsSelector.getActiveImageData(); + imageData.labelRects = imageData.labelRects.map((labelRect: LabelRect) => { + if (labelRect.id === activeLabelRect.id) { + return { + ...labelRect, + rect: scaledRect + }; + } + return labelRect; + }); + store.dispatch(updateImageDataById(imageData.id, imageData)); + this.insideRectangleSelected = false; + } + + // + if (!!this.startResizeRectAnchor && !!activeLabelRect) { const rect: IRect = this.calculateRectRelativeToActiveImage(activeLabelRect.rect, data); const startAnchorPosition: IPoint = PointUtil.add(this.startResizeRectAnchor.position, @@ -258,6 +299,41 @@ export class RectRenderEngine extends BaseRenderEngine { return null; } + private getRectContainingMouse(data: EditorData): LabelRect { + const activeRectLabel: LabelRect = LabelsSelector.getActiveRectLabel(); + // console.log("inside rect",this.isMouseInsideRect(activeRectLabel.rect, data)) + if (!!activeRectLabel && activeRectLabel.isVisible && this.isMouseInsideRect(activeRectLabel.rect, data)) { + return activeRectLabel; + } + + const labelRects: LabelRect[] = LabelsSelector.getActiveImageData().labelRects; + for (const labelRect of labelRects) { + if (labelRect.isVisible && this.isMouseInsideRect(labelRect.rect, data)) { + return labelRect; + } + } + return null; + } + + private isMouseInsideRect(rect: IRect, data: EditorData): boolean { + const rectOnImage: IRect = RectUtil.translate( + this.calculateRectRelativeToActiveImage(rect, data), data.viewPortContentImageRect); + + const outerRectDelta: IPoint = { + x: RenderEngineSettings.anchorHoverSize.width / 2, + y: RenderEngineSettings.anchorHoverSize.height / 2 + }; + const outerRect: IRect = RectUtil.expand(rectOnImage, outerRectDelta); + + // const innerRectDelta: IPoint = { + // x: - RenderEngineSettings.anchorHoverSize.width / 2, + // y: - RenderEngineSettings.anchorHoverSize.height / 2 + // }; + // const innerRect: IRect = RectUtil.expand(rectOnImage, innerRectDelta); + + return (RectUtil.isPointInside(outerRect, data.mousePositionOnViewPortContent)); + } + private isMouseOverRectEdges(rect: IRect, data: EditorData): boolean { const rectOnImage: IRect = RectUtil.translate( this.calculateRectRelativeToActiveImage(rect, data), data.viewPortContentImageRect); @@ -307,6 +383,13 @@ export class RectRenderEngine extends BaseRenderEngine { private startRectResize(activatedAnchor: RectAnchor) { this.startResizeRectAnchor = activatedAnchor; + //console.log(activatedAnchor) + EditorActions.setViewPortActionsDisabledStatus(true); + } + + private startRectTranslate(){ + this.insideRectangleSelected = true; + // this.selectedPointInsideRect = data.mousePositionOnViewPortContent EditorActions.setViewPortActionsDisabledStatus(true); } diff --git a/src/utils/RectUtil.ts b/src/utils/RectUtil.ts index 0d37c390..8cba6609 100644 --- a/src/utils/RectUtil.ts +++ b/src/utils/RectUtil.ts @@ -61,6 +61,7 @@ export class RectUtil { } } } + public static resizeRect(inputRect: IRect, rectAnchor: Direction, delta): IRect { const rect: IRect = {...inputRect}; From af94de686518b0fb7ee4846d9f2aa8f89a2b44cf Mon Sep 17 00:00:00 2001 From: Nivesh Date: Sat, 24 Jun 2023 03:21:17 +0530 Subject: [PATCH 5/5] now the drag moves along with the cursor --- src/logic/render/RectRenderEngine.ts | 76 +++++++++++++--------------- 1 file changed, 35 insertions(+), 41 deletions(-) diff --git a/src/logic/render/RectRenderEngine.ts b/src/logic/render/RectRenderEngine.ts index 62bff4bd..8805f01d 100644 --- a/src/logic/render/RectRenderEngine.ts +++ b/src/logic/render/RectRenderEngine.ts @@ -33,7 +33,8 @@ export class RectRenderEngine extends BaseRenderEngine { private startCreateRectPoint: IPoint; private startResizeRectAnchor: RectAnchor; - private insideRectangleSelected: boolean; + private labelSelectedForDrag: LabelRect; + private previousPointInsideRect: IPoint; public constructor(canvas: HTMLCanvasElement) { super(canvas); @@ -68,7 +69,8 @@ export class RectRenderEngine extends BaseRenderEngine { } } else if(!!rectContainingMouse){ - // console.log("yayy") + this.labelSelectedForDrag = rectContainingMouse; + this.previousPointInsideRect = data.mousePositionOnViewPortContent; store.dispatch(updateActiveLabelId(rectContainingMouse.id)); this.startRectTranslate(); } @@ -95,35 +97,10 @@ export class RectRenderEngine extends BaseRenderEngine { this.addRectLabel(RenderEngineUtil.transferRectFromImageToViewPortContent(rect, data)); } - //&& !!activeLabelRect - - if(!!this.insideRectangleSelected ){ - // console.log("here",this.insideRectangleSelected) - const rect: IRect = this.calculateRectRelativeToActiveImage(activeLabelRect.rect, data); - const rectCenter: IPoint = {x :rect.x, y : rect.y}; - const startAnchorPosition: IPoint = PointUtil.add(rectCenter, - data.viewPortContentImageRect); - const delta: IPoint = PointUtil.subtract(mousePositionSnapped, startAnchorPosition); - const resizeRect: IRect = RectUtil.translate(rect, delta); - const scale: number = RenderEngineUtil.calculateImageScale(data); - const scaledRect: IRect = RectUtil.scaleRect(resizeRect, scale); - - const imageData = LabelsSelector.getActiveImageData(); - imageData.labelRects = imageData.labelRects.map((labelRect: LabelRect) => { - if (labelRect.id === activeLabelRect.id) { - return { - ...labelRect, - rect: scaledRect - }; - } - return labelRect; - }); - store.dispatch(updateImageDataById(imageData.id, imageData)); - this.insideRectangleSelected = false; + if(!!this.labelSelectedForDrag ){ + this.labelSelectedForDrag = null; } - // - if (!!this.startResizeRectAnchor && !!activeLabelRect) { const rect: IRect = this.calculateRectRelativeToActiveImage(activeLabelRect.rect, data); const startAnchorPosition: IPoint = PointUtil.add(this.startResizeRectAnchor.position, @@ -150,15 +127,42 @@ export class RectRenderEngine extends BaseRenderEngine { }; public mouseMoveHandler = (data: EditorData) => { + if (!!data.viewPortContentImageRect && !!data.mousePositionOnViewPortContent) { const isOverImage: boolean = RenderEngineUtil.isMouseOverImage(data); if (isOverImage && !this.startResizeRectAnchor) { const labelRect: LabelRect = this.getRectUnderMouse(data); + const labelRectMouseInside: LabelRect = this.labelSelectedForDrag; if (!!labelRect && !this.isInProgress()) { if (LabelsSelector.getHighlightedLabelId() !== labelRect.id) { store.dispatch(updateHighlightedLabelId(labelRect.id)) } - } else { + } + else if(!!labelRectMouseInside){ + const rect: IRect = this.calculateRectRelativeToActiveImage(labelRectMouseInside.rect, data); + + // for translation we need the source point and also the destination point + const currentPoint: IPoint = data.mousePositionOnViewPortContent; + const prevPoint: IPoint = this.previousPointInsideRect + const delta: IPoint = PointUtil.subtract(currentPoint, prevPoint); + + const resizeRect: IRect = RectUtil.translate(rect, delta); + const scale: number = RenderEngineUtil.calculateImageScale(data); + const scaledRect: IRect = RectUtil.scaleRect(resizeRect, scale); + + const imageData = LabelsSelector.getActiveImageData(); + imageData.labelRects = imageData.labelRects.map((labelRect: LabelRect) => { + if (labelRect.id === labelRectMouseInside.id) { + return { + ...labelRect, + rect: scaledRect + }; + } + return labelRect; + }); + store.dispatch(updateImageDataById(imageData.id, imageData)); + } + else { if (LabelsSelector.getHighlightedLabelId() !== null) { store.dispatch(updateHighlightedLabelId(null)) } @@ -301,7 +305,6 @@ export class RectRenderEngine extends BaseRenderEngine { private getRectContainingMouse(data: EditorData): LabelRect { const activeRectLabel: LabelRect = LabelsSelector.getActiveRectLabel(); - // console.log("inside rect",this.isMouseInsideRect(activeRectLabel.rect, data)) if (!!activeRectLabel && activeRectLabel.isVisible && this.isMouseInsideRect(activeRectLabel.rect, data)) { return activeRectLabel; } @@ -316,6 +319,7 @@ export class RectRenderEngine extends BaseRenderEngine { } private isMouseInsideRect(rect: IRect, data: EditorData): boolean { + //how 2 rects passed to translate const rectOnImage: IRect = RectUtil.translate( this.calculateRectRelativeToActiveImage(rect, data), data.viewPortContentImageRect); @@ -324,13 +328,6 @@ export class RectRenderEngine extends BaseRenderEngine { y: RenderEngineSettings.anchorHoverSize.height / 2 }; const outerRect: IRect = RectUtil.expand(rectOnImage, outerRectDelta); - - // const innerRectDelta: IPoint = { - // x: - RenderEngineSettings.anchorHoverSize.width / 2, - // y: - RenderEngineSettings.anchorHoverSize.height / 2 - // }; - // const innerRect: IRect = RectUtil.expand(rectOnImage, innerRectDelta); - return (RectUtil.isPointInside(outerRect, data.mousePositionOnViewPortContent)); } @@ -383,13 +380,10 @@ export class RectRenderEngine extends BaseRenderEngine { private startRectResize(activatedAnchor: RectAnchor) { this.startResizeRectAnchor = activatedAnchor; - //console.log(activatedAnchor) EditorActions.setViewPortActionsDisabledStatus(true); } private startRectTranslate(){ - this.insideRectangleSelected = true; - // this.selectedPointInsideRect = data.mousePositionOnViewPortContent EditorActions.setViewPortActionsDisabledStatus(true); }