Test branch

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',

src/logic/render/RectRenderEngine.ts

@@ -33,6 +33,8 @@ export class RectRenderEngine extends BaseRenderEngine {
 
     private startCreateRectPoint: IPoint;
     private startResizeRectAnchor: RectAnchor;
+    private labelSelectedForDrag: LabelRect;
+    private previousPointInsideRect: IPoint;
 
     public constructor(canvas: HTMLCanvasElement) {
         super(canvas);
@@ -48,19 +50,31 @@ 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){
+                this.labelSelectedForDrag = rectContainingMouse;
+                this.previousPointInsideRect = data.mousePositionOnViewPortContent;
+                store.dispatch(updateActiveLabelId(rectContainingMouse.id));
+                this.startRectTranslate();
+            }
+            else if (isMouseOverImage) {
 
                 this.startRectCreation(data.mousePositionOnViewPortContent);
             }
@@ -83,6 +97,10 @@ export class RectRenderEngine extends BaseRenderEngine {
                 this.addRectLabel(RenderEngineUtil.transferRectFromImageToViewPortContent(rect, data));
             }
 
+            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,
@@ -109,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))
                     }
@@ -258,6 +303,34 @@ export class RectRenderEngine extends BaseRenderEngine {
         return null;
     }
 
+    private getRectContainingMouse(data: EditorData): LabelRect {
+        const activeRectLabel: LabelRect = LabelsSelector.getActiveRectLabel();
+        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 {
+        //how 2 rects passed to translate
+        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);
+        return (RectUtil.isPointInside(outerRect, data.mousePositionOnViewPortContent));
+    }
+
     private isMouseOverRectEdges(rect: IRect, data: EditorData): boolean {
         const rectOnImage: IRect = RectUtil.translate(
             this.calculateRectRelativeToActiveImage(rect, data), data.viewPortContentImageRect);
@@ -310,6 +383,10 @@ export class RectRenderEngine extends BaseRenderEngine {
         EditorActions.setViewPortActionsDisabledStatus(true);
     }
 
+    private startRectTranslate(){
+        EditorActions.setViewPortActionsDisabledStatus(true);
+    }
+
     private endRectTransformation() {
         this.startCreateRectPoint = null;
         this.startResizeRectAnchor = null;

src/utils/RectUtil.ts

@@ -61,6 +61,7 @@ export class RectUtil {
             }
         }
     }
+
 
     public static resizeRect(inputRect: IRect, rectAnchor: Direction, delta): IRect {
         const rect: IRect = {...inputRect};

src/views/EditorView/SideNavigationBar/RectLabelsList/RectLabelsList.tsx

@@ -96,7 +96,7 @@ const RectLabelsList: React.FC<IProps> = (
                     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}

src/views/MainView/ImagesDropZone/ImagesDropZone.tsx

@@ -28,6 +28,7 @@ const ImagesDropZone: React.FC<IProps> = (props: PropsWithChildren<IProps>) => {
         }
     } 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<IProps> = (props: PropsWithChildren<IProps>) => {
             props.updateActivePopupTypeAction(PopupWindowType.INSERT_LABEL_NAMES);
         }
     };
-
+//taking the file as input
     const getDropZoneContent = () => {
         if (acceptedFiles.length === 0)
             return <>

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 = () => {

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<IProps> = (
         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 => {
@@ -177,8 +185,17 @@ const InsertLabelNamesPopup: React.FC<IProps> = (
         updateActivePopupTypeAction(null);
     };
 
+    const go_back_function = () => {
+        // console.log("clicked");
+        updateActivePopupTypeAction(PopupWindowType.EXIT_PROJECT)
+    }
+
     const renderContent = () => {
-        return (<div className='InsertLabelNamesPopup'>
+        return (
+            <div>
+             <button onClick={go_back_function}>Go Back</button>
+        <div className='InsertLabelNamesPopup'>
+
             <div className='LeftContainer'>
                 <ImageButton
                     image={'ico/plus.png'}
@@ -218,17 +235,21 @@ const InsertLabelNamesPopup: React.FC<IProps> = (
                     </Scrollbars> :
                         <div
                             className='EmptyList'
+                            ref={buttonRef}
                             onClick={addLabelNameCallback}
+
                         >
                             <img
                                 draggable={false}
                                 alt={'upload'}
                                 src={'ico/type-writer.png'}
                             />
                             <p className='extraBold'>Your label list is empty</p>
+                            <script>addLabelNameCallback()</script>
                         </div>}
                 </div>
             </div>
+        </div>
         </div>);
     };
 
@@ -240,6 +261,7 @@ const InsertLabelNamesPopup: React.FC<IProps> = (
             onAccept={isUpdate ? safeOnUpdateAcceptCallback : safeOnCreateAcceptCallback}
             rejectLabel={isUpdate ? 'Cancel' : 'Load labels from file'}
             onReject={isUpdate ? onUpdateRejectCallback : onCreateRejectCallback}
+            skipRejectButton = {true}
         />);
 };