Merge pull request #272 from SkalskiP/fix/it_is_possible_to_interact_…

…with_hidden_labels

fix/it_is_possible_to_interact_with_hidden_labels

src/logic/render/LineRenderEngine.ts

@@ -51,9 +51,8 @@ export class LineRenderEngine extends BaseRenderEngine {
 
         if (isMouseOverCanvas) {
             if (!!anchorTypeUnderMouse && !this.isResizeInProgress()) {
-                const labelLine: LabelLine = this.getLineUnderMouse(data);
-                this.startExistingLabelUpdate(labelLine.id, anchorTypeUnderMouse)
-            } else if (!!labelLineUnderMouse) {
+                this.startExistingLabelUpdate(labelLineUnderMouse.id, anchorTypeUnderMouse)
+            } else if (labelLineUnderMouse !== null) {
                 store.dispatch(updateActiveLabelId(labelLineUnderMouse.id));
             } else if (!this.isInProgress() && isMouseOverImage) {
                 this.startNewLabelCreation(data)
@@ -181,11 +180,6 @@ export class LineRenderEngine extends BaseRenderEngine {
         return !!this.lineUpdateAnchorType;
     }
 
-    private isMouseOverAnchor(mouse: IPoint, anchor: IPoint): boolean {
-        if (!mouse || !anchor) return null;
-        return RectUtil.isPointInside(RectUtil.getRectWithCenterAndSize(anchor, RenderEngineSettings.anchorSize), mouse);
-    }
-
     // =================================================================================================================
     // CREATION
     // =================================================================================================================
@@ -268,28 +262,39 @@ export class LineRenderEngine extends BaseRenderEngine {
     // GETTERS
     // =================================================================================================================
 
-    private getLineUnderMouse(data: EditorData): LabelLine {
-        const labelLines: LabelLine[] = LabelsSelector.getActiveImageData().labelLines;
-        for (let i = 0; i < labelLines.length; i++) {
-            const lineOnCanvas: ILine = RenderEngineUtil.transferLineFromImageToViewPortContent(labelLines[i].line, data);
-            const mouseOverLine = RenderEngineUtil.isMouseOverLine(
-                data.mousePositionOnViewPortContent,
-                lineOnCanvas,
-                RenderEngineSettings.anchorHoverSize.width / 2
-            )
-            if (mouseOverLine) return labelLines[i]
+    private getLineUnderMouse(data: EditorData): LabelLine | null {
+        const mouseOnCanvas = data.mousePositionOnViewPortContent;
+        if (!mouseOnCanvas) return null;
+
+        const labelLines: LabelLine[] = LabelsSelector
+            .getActiveImageData()
+            .labelLines
+            .filter((labelLine: LabelLine) => labelLine.isVisible);
+        const radius = RenderEngineSettings.anchorHoverSize.width / 2;
+
+        for (const labelLine of labelLines) {
+            const lineOnCanvas: ILine = RenderEngineUtil.transferLineFromImageToViewPortContent(labelLine.line, data);
+            if (RenderEngineUtil.isMouseOverLine(mouseOnCanvas, lineOnCanvas, radius)) return labelLine;
         }
         return null;
     }
 
-    private getAnchorTypeUnderMouse(data: EditorData): LineAnchorType {
-        const labelLines: LabelLine[] = LabelsSelector.getActiveImageData().labelLines;
-        for (let i = 0; i < labelLines.length; i++) {
-            const lineOnCanvas: ILine = RenderEngineUtil.transferLineFromImageToViewPortContent(labelLines[i].line, data);
-            if (this.isMouseOverAnchor(data.mousePositionOnViewPortContent, lineOnCanvas.start)) {
+    private getAnchorTypeUnderMouse(data: EditorData): LineAnchorType | null {
+        const mouseOnCanvas = data.mousePositionOnViewPortContent;
+        if (!mouseOnCanvas) return null;
+
+        const labelLines: LabelLine[] = LabelsSelector
+            .getActiveImageData()
+            .labelLines
+            .filter((labelLine: LabelLine) => labelLine.isVisible);
+        const radius = RenderEngineSettings.anchorHoverSize.width / 2;
+
+        for (const labelLine of labelLines) {
+            const lineOnCanvas: ILine = RenderEngineUtil.transferLineFromImageToViewPortContent(labelLine.line, data);
+            if (RenderEngineUtil.isMouseOverAnchor(mouseOnCanvas, lineOnCanvas.start, radius)) {
                 return LineAnchorType.START
             }
-            if (this.isMouseOverAnchor(data.mousePositionOnViewPortContent, lineOnCanvas.end)) {
+            if (RenderEngineUtil.isMouseOverAnchor(mouseOnCanvas, lineOnCanvas.end, radius)) {
                 return LineAnchorType.END
             }
         }

src/logic/render/PointRenderEngine.ts

@@ -174,12 +174,15 @@ export class PointRenderEngine extends BaseRenderEngine {
     }
 
     private getLabelPointUnderMouse(mousePosition: IPoint, data: EditorData): LabelPoint {
-        const labelPoints: LabelPoint[] = LabelsSelector.getActiveImageData().labelPoints;
-        for (let i = 0; i < labelPoints.length; i++) {
-            const pointOnCanvas: IPoint = RenderEngineUtil.transferPointFromImageToViewPortContent(labelPoints[i].point, data);
+        const labelPoints: LabelPoint[] = LabelsSelector
+            .getActiveImageData()
+            .labelPoints
+            .filter((labelPoint: LabelPoint) => labelPoint.isVisible);
+        for (const labelPoint of labelPoints) {
+            const pointOnCanvas: IPoint = RenderEngineUtil.transferPointFromImageToViewPortContent(labelPoint.point, data);
             const handleRect: IRect = RectUtil.getRectWithCenterAndSize(pointOnCanvas, RenderEngineSettings.anchorHoverSize);
             if (RectUtil.isPointInside(handleRect, mousePosition)) {
-                return labelPoints[i];
+                return labelPoint;
             }
         }
         return null;

src/logic/render/PolygonRenderEngine.ts

@@ -26,6 +26,7 @@ import {EditorActions} from '../actions/EditorActions';
 import {GeneralSelector} from '../../store/selectors/GeneralSelector';
 import {Settings} from '../../settings/Settings';
 import {LabelUtil} from '../../utils/LabelUtil';
+import {PolygonUtil} from '../../utils/PolygonUtil';
 
 export class PolygonRenderEngine extends BaseRenderEngine {
 
@@ -69,8 +70,8 @@ export class PolygonRenderEngine extends BaseRenderEngine {
         const isMouseOverCanvas: boolean = RenderEngineUtil.isMouseOverCanvas(data);
         if (isMouseOverCanvas) {
             if (this.isCreationInProgress()) {
-                const isMouseOverStartAnchor: boolean = RenderEngineUtil.isMouseOverAnchor(
-                    data.mousePositionOnViewPortContent, this.activePath[0], RenderEngineSettings.anchorSize);
+                const isMouseOverStartAnchor: boolean = this.isMouseOverAnchor(
+                    data.mousePositionOnViewPortContent, this.activePath[0]);
                 if (isMouseOverStartAnchor) {
                     this.addLabelAndFinishCreation(data);
                 } else  {
@@ -121,7 +122,7 @@ export class PolygonRenderEngine extends BaseRenderEngine {
                         store.dispatch(updateHighlightedLabelId(labelPolygon.id))
                     }
                     const pathOnCanvas: IPoint[] = RenderEngineUtil.transferPolygonFromImageToViewPortContent(labelPolygon.vertices, data);
-                    const linesOnCanvas: ILine[] = this.mapPointsToLines(pathOnCanvas.concat(pathOnCanvas[0]));
+                    const linesOnCanvas: ILine[] = PolygonUtil.getEdges(pathOnCanvas);
 
                     for (let j = 0; j < linesOnCanvas.length; j++) {
                         const mouseOverLine = RenderEngineUtil.isMouseOverLine(
@@ -193,7 +194,7 @@ export class PolygonRenderEngine extends BaseRenderEngine {
     private drawActivelyCreatedLabel(data: EditorData) {
         const standardizedPoints: IPoint[] = this.activePath.map((point: IPoint) => RenderEngineUtil.setPointBetweenPixels(point));
         const path = standardizedPoints.concat(data.mousePositionOnViewPortContent);
-        const lines: ILine[] = this.mapPointsToLines(path);
+        const lines: ILine[] = PolygonUtil.getEdges(path, false);
         const lineColor: string = BaseRenderEngine.resolveLabelLineColor(null, true)
         const anchorColor: string = BaseRenderEngine.resolveLabelAnchorColor(true)
         DrawUtil.drawPolygonWithFill(this.canvas, path, DrawUtil.hexToRGB(lineColor, 0.2));
@@ -403,52 +404,45 @@ export class PolygonRenderEngine extends BaseRenderEngine {
         return RectUtil.isPointInside(RectUtil.getRectWithCenterAndSize(anchor, RenderEngineSettings.anchorSize), mouse);
     }
 
-    // =================================================================================================================
-    // MAPPERS
-    // =================================================================================================================
-
-    private mapPointsToLines(points: IPoint[]): ILine[] {
-        const lines: ILine[] = [];
-        for (let i = 0; i < points.length - 1; i++) {
-            lines.push({start: points[i], end: points[i + 1]})
-        }
-        return lines;
-    }
-
     // =================================================================================================================
     // GETTERS
     // =================================================================================================================
 
-    private getPolygonUnderMouse(data: EditorData): LabelPolygon {
-        const labelPolygons: LabelPolygon[] = LabelsSelector.getActiveImageData().labelPolygons;
-        for (let i = 0; i < labelPolygons.length; i++) {
-            const pathOnCanvas: IPoint[] = RenderEngineUtil.transferPolygonFromImageToViewPortContent(labelPolygons[i].vertices, data);
-            const linesOnCanvas: ILine[] = this.mapPointsToLines(pathOnCanvas.concat(pathOnCanvas[0]));
-
-            for (let j = 0; j < linesOnCanvas.length; j++) {
-                const mouseOverLine = RenderEngineUtil.isMouseOverLine(
-                    data.mousePositionOnViewPortContent,
-                    linesOnCanvas[j],
-                    RenderEngineSettings.anchorHoverSize.width / 2
-                )
-                if (mouseOverLine)
-                    return labelPolygons[i];
-            }
-            for (let j = 0; j < pathOnCanvas.length; j ++) {
-                if (this.isMouseOverAnchor(data.mousePositionOnViewPortContent, pathOnCanvas[j]))
-                    return labelPolygons[i];
+    private getPolygonUnderMouse(data: EditorData): LabelPolygon | null {
+        const mouseOnCanvas = data.mousePositionOnViewPortContent;
+        if (!mouseOnCanvas) return null;
+
+        const labelPolygons: LabelPolygon[] = LabelsSelector
+            .getActiveImageData()
+            .labelPolygons
+            .filter((labelPolygon: LabelPolygon) => labelPolygon.isVisible);
+        const radius = RenderEngineSettings.anchorHoverSize.width / 2;
+
+        for (const labelPolygon of labelPolygons) {
+            const verticesOnCanvas = RenderEngineUtil
+                .transferPolygonFromImageToViewPortContent(labelPolygon.vertices, data);
+            if (RenderEngineUtil.isMouseOverPolygon(mouseOnCanvas, verticesOnCanvas, radius)) {
+                return labelPolygon;
             }
         }
         return null;
     }
 
-    private getAnchorUnderMouse(data: EditorData): IPoint {
-        const labelPolygons: LabelPolygon[] = LabelsSelector.getActiveImageData().labelPolygons;
-        for (let i = 0; i < labelPolygons.length; i++) {
-            const pathOnCanvas: IPoint[] = RenderEngineUtil.transferPolygonFromImageToViewPortContent(labelPolygons[i].vertices, data);
-            for (let j = 0; j < pathOnCanvas.length; j ++) {
-                if (this.isMouseOverAnchor(data.mousePositionOnViewPortContent, pathOnCanvas[j]))
-                    return pathOnCanvas[j];
+    private getAnchorUnderMouse(data: EditorData): IPoint | null {
+        const mouseOnCanvas = data.mousePositionOnViewPortContent;
+        if (!mouseOnCanvas) return null;
+
+        const labelPolygons: LabelPolygon[] = LabelsSelector
+            .getActiveImageData()
+            .labelPolygons
+            .filter((labelPolygon: LabelPolygon) => labelPolygon.isVisible);
+        const radius = RenderEngineSettings.anchorHoverSize.width / 2;
+
+        for (const labelPolygon of labelPolygons) {
+            const verticesOnCanvas = RenderEngineUtil
+                .transferPolygonFromImageToViewPortContent(labelPolygon.vertices, data);
+            for (const vertexOnCanvas of verticesOnCanvas) {
+                if (RenderEngineUtil.isMouseOverAnchor(mouseOnCanvas, vertexOnCanvas, radius)) return vertexOnCanvas;
             }
         }
         return null;

src/logic/render/RectRenderEngine.ts

@@ -245,14 +245,14 @@ export class RectRenderEngine extends BaseRenderEngine {
 
     private getRectUnderMouse(data: EditorData): LabelRect {
         const activeRectLabel: LabelRect = LabelsSelector.getActiveRectLabel();
-        if (!!activeRectLabel && this.isMouseOverRectEdges(activeRectLabel.rect, data)) {
+        if (!!activeRectLabel && activeRectLabel.isVisible && this.isMouseOverRectEdges(activeRectLabel.rect, data)) {
             return activeRectLabel;
         }
 
         const labelRects: LabelRect[] = LabelsSelector.getActiveImageData().labelRects;
-        for (let i = 0; i < labelRects.length; i++) {
-            if (this.isMouseOverRectEdges(labelRects[i].rect, data)) {
-                return labelRects[i];
+        for (const labelRect of labelRects) {
+            if (labelRect.isVisible && this.isMouseOverRectEdges(labelRect.rect, data)) {
+                return labelRect;
             }
         }
         return null;

src/utils/PointUtil.ts

@@ -1,4 +1,4 @@
-import {IPoint} from "../interfaces/IPoint";
+import {IPoint} from '../interfaces/IPoint';
 
 export class PointUtil {
     public static equals(p1: IPoint, p2: IPoint): boolean {

src/utils/PolygonUtil.ts

@@ -0,0 +1,13 @@
+import {IPoint} from '../interfaces/IPoint';
+import {ILine} from '../interfaces/ILine';
+
+export class PolygonUtil {
+    public static getEdges(vertices: IPoint[], closed: boolean = true): ILine[] {
+        const points: IPoint[] = closed ? vertices.concat(vertices[0]) : vertices;
+        const lines: ILine[] = [];
+        for (let i = 0; i < points.length - 1; i++) {
+            lines.push({start: points[i], end: points[i + 1]})
+        }
+        return lines;
+    }
+}

src/utils/RectUtil.ts

@@ -1,9 +1,9 @@
-import {IRect} from "../interfaces/IRect";
-import {IPoint} from "../interfaces/IPoint";
-import {ISize} from "../interfaces/ISize";
-import {RectAnchor} from "../data/RectAnchor";
-import {NumberUtil} from "./NumberUtil";
-import {Direction} from "../data/enums/Direction";
+import {IRect} from '../interfaces/IRect';
+import {IPoint} from '../interfaces/IPoint';
+import {ISize} from '../interfaces/ISize';
+import {RectAnchor} from '../data/RectAnchor';
+import {NumberUtil} from './NumberUtil';
+import {Direction} from '../data/enums/Direction';
 
 export class RectUtil {
     public static getRatio(rect: IRect): number {
@@ -25,10 +25,10 @@ export class RectUtil {
     public static isPointInside(rect: IRect, point: IPoint): boolean {
         if (!rect || !point) return null;
         return (
-            rect.x < point.x &&
-            rect.x + rect.width > point.x &&
-            rect.y < point.y &&
-            rect.y + rect.height > point.y
+            rect.x <= point.x &&
+            rect.x + rect.width >= point.x &&
+            rect.y <= point.y &&
+            rect.y + rect.height >= point.y
         )
     }
 
@@ -61,7 +61,7 @@ export class RectUtil {
             }
         }
     }
-    
+
     public static resizeRect(inputRect: IRect, rectAnchor: Direction, delta): IRect {
         const rect: IRect = {...inputRect};
         switch (rectAnchor) {
@@ -100,17 +100,17 @@ export class RectUtil {
                 rect.height += delta.y;
                 break;
         }
- 
+
         if (rect.width < 0) {
             rect.x = rect.x + rect.width;
             rect.width = -rect.width;
         }
-    
+
         if (rect.height < 0) {
             rect.y = rect.y + rect.height;
             rect.height = -rect.height;
         }
-        
+
         return rect;
     }
 
@@ -176,6 +176,15 @@ export class RectUtil {
             height: rect.height
         }
     }
+
+    public static getVertices(rect: IRect): IPoint[] {
+        return [
+            { x: rect.x, y: rect.y },
+            { x: rect.x + rect.width, y: rect.y },
+            { x: rect.x + rect.width, y: rect.y + rect.height },
+            { x: rect.x, y: rect.y + rect.height }
+        ]
+    }
 }