lost-sia 2.0.1-alpha13 → 2.0.1-alpha15

package/src/Annotation/ui/AnnotationComponent.tsx

@@ -1,35 +1,35 @@
-import AnnotationTool from "../../models/AnnotationTool";
-import Annotation from "../logic/Annotation";
-import * as colorUtils from "../../utils/color";
-import PointTool from "./tools/Point";
-import Line from "./tools/Line";
-import AnnoBar from "./atoms/AnnoBar";
-import CanvasAction from "../../models/CanvasAction";
-import BBox from "./tools/BBox";
-import Polygon from "./tools/Polygon";
-import { useEffect, useRef, useState } from "react";
-import { AnnotationSettings, Label, Point, SIANotification } from "../../types";
-import AnnotationMode from "../../models/AnnotationMode";
-import TimeUtils from "../../utils/TimeUtils";
+import AnnotationTool from '../../models/AnnotationTool'
+import Annotation from '../logic/Annotation'
+import * as colorUtils from '../../utils/color'
+import PointTool from './tools/Point'
+import Line from './tools/Line'
+import AnnoBar from './atoms/AnnoBar'
+import CanvasAction from '../../models/CanvasAction'
+import BBox from './tools/BBox'
+import Polygon from './tools/Polygon'
+import { useEffect, useRef, useState } from 'react'
+import { AnnotationSettings, Label, Point, SIANotification } from '../../types'
+import AnnotationMode from '../../models/AnnotationMode'
+import TimeUtils from '../../utils/TimeUtils'
 
 type AnnotationComponentProps = {
-  scaledAnnotation: Annotation;
-  annotationSettings: AnnotationSettings;
-  possibleLabels: Label[];
-  svgScale: number;
-  svgTranslation: Point;
-  pageToStageOffset: Point;
-  strokeWidth: number;
-  nodeRadius: number;
-  isSelected: boolean;
-  isDisabled?: boolean;
-  onFinishAnnoCreate: (fullyCreatedAnnotation: Annotation) => void;
-  onLabelIconClicked: (markerPosition: Point) => void;
-  onAction?: (annotation: Annotation, canvasAction: CanvasAction) => void;
-  onAnnoChanged?: (annotation: Annotation) => void;
-  onAnnotationModeChange?: (annotationMode: AnnotationMode) => void;
-  onNotification?: (notification: SIANotification) => void;
-};
+  scaledAnnotation: Annotation
+  annotationSettings: AnnotationSettings
+  possibleLabels: Label[]
+  svgScale: number
+  svgTranslation: Point
+  pageToStageOffset: Point
+  strokeWidth: number
+  nodeRadius: number
+  isSelected: boolean
+  isDisabled?: boolean
+  onFinishAnnoCreate: (fullyCreatedAnnotation: Annotation) => void
+  onLabelIconClicked: (markerPosition: Point) => void
+  onAction?: (annotation: Annotation, canvasAction: CanvasAction) => void
+  onAnnoChanged?: (annotation: Annotation) => void
+  onAnnotationModeChange?: (annotationMode: AnnotationMode) => void
+  onNotification?: (notification: SIANotification) => void
+}
 
 const AnnotationComponent = ({
   scaledAnnotation,
@@ -49,21 +49,19 @@ const AnnotationComponent = ({
   onAnnotationModeChange = (_) => {},
   onNotification = (_) => {},
 }: AnnotationComponentProps) => {
-  const [coordinates, setCoordinates] = useState<Point[]>(
-    scaledAnnotation.coordinates,
-  );
+  const [coordinates, setCoordinates] = useState<Point[]>(scaledAnnotation.coordinates)
 
   const [annotationMode, setAnnotationMode] = useState<AnnotationMode>(
     scaledAnnotation.mode,
-  );
-  const [isDragging, setIsDragging] = useState<boolean>(false);
+  )
+  const [isDragging, setIsDragging] = useState<boolean>(false)
 
-  const annoTimestampRef = useRef<number | undefined>(undefined);
-  const [annoTimestamp, setAnnoTimestamp] = useState<number | undefined>();
+  const annoTimestampRef = useRef<number | undefined>(undefined)
+  const [annoTimestamp, setAnnoTimestamp] = useState<number | undefined>()
 
   useEffect(() => {
-    annoTimestampRef.current = annoTimestamp;
-  }, [annoTimestamp]);
+    annoTimestampRef.current = annoTimestamp
+  }, [annoTimestamp])
 
   /**
    * during user editing of the annotation, multiple events are fired by the children
@@ -73,120 +71,115 @@ const AnnotationComponent = ({
    * since both events are fired during the same render, onMoved would give away old coorinates
    * use this reference as a workaround to get the up-to-date coordinates even in this edge-case
    */
-  const coordinatesRef = useRef<Point[]>(coordinates);
+  const coordinatesRef = useRef<Point[]>(coordinates)
 
   useEffect(() => {
-    coordinatesRef.current = coordinates;
-  }, [coordinates]);
+    coordinatesRef.current = coordinates
+  }, [coordinates])
 
   const finishAnnoCreate = () => {
-    setAnnotationMode(AnnotationMode.VIEW);
+    setAnnotationMode(AnnotationMode.VIEW)
 
     const newAnnotation = {
       ...scaledAnnotation,
       coordinates: coordinatesRef.current,
-    };
+    }
 
-    onFinishAnnoCreate(newAnnotation);
-  };
+    onFinishAnnoCreate(newAnnotation)
+  }
 
   const getLabel = (labelId: number): Label | undefined => {
     return possibleLabels.find((label: Label) => {
-      return label.id === labelId;
-    });
-  };
+      return label.id === labelId
+    })
+  }
 
   const getColor = () => {
     if (!scaledAnnotation.labelIds || scaledAnnotation.labelIds.length == 0)
-      return colorUtils.getDefaultColor();
+      return colorUtils.getDefaultColor()
 
-    const label = getLabel(scaledAnnotation.labelIds[0]);
+    const label = getLabel(scaledAnnotation.labelIds[0])
 
-    if (label === undefined || label.color === undefined)
-      return colorUtils.getDefaultColor();
+    if (label === undefined || label.color === undefined || label.color === null)
+      return colorUtils.getDefaultColor()
 
-    return label.color;
-  };
+    return label.color
+  }
 
-  const color = getColor();
+  const color = getColor()
   const annotationStyle = {
     stroke: color,
     fill: color,
     strokeWidth: strokeWidth / svgScale,
     r: nodeRadius / svgScale,
-  };
+  }
 
   const changeAnnoCoords = (newCoordinates: Point[]) => {
-    setCoordinates(newCoordinates);
+    setCoordinates(newCoordinates)
 
-    let newCoordinatesWithoutMouse = newCoordinates;
+    let newCoordinatesWithoutMouse = newCoordinates
 
     // while adding/moving the annotation, the mouse cursor is the last point of the coordinates
     // remove it before saving the annotation
     if ([AnnotationMode.ADD, AnnotationMode.MOVE].includes(annotationMode)) {
       // last point is mouse - remove it before export
-      newCoordinatesWithoutMouse = newCoordinates.slice(0, -1);
+      newCoordinatesWithoutMouse = newCoordinates.slice(0, -1)
     }
 
     onAnnoChanged({
       ...scaledAnnotation,
       coordinates: newCoordinatesWithoutMouse,
-    });
-  };
+    })
+  }
 
   const onMoving = (newCoords: Point[]) => {
     if (
-      ![
-        AnnotationMode.ADD,
-        AnnotationMode.CREATE,
-        AnnotationMode.MOVE,
-      ].includes(annotationMode)
+      ![AnnotationMode.ADD, AnnotationMode.CREATE, AnnotationMode.MOVE].includes(
+        annotationMode,
+      )
     ) {
-      setAnnotationMode(AnnotationMode.MOVE);
+      setAnnotationMode(AnnotationMode.MOVE)
 
-      setAnnoTimestamp(performance.now());
+      setAnnoTimestamp(performance.now())
     }
 
-    setCoordinates(newCoords);
-  };
+    setCoordinates(newCoords)
+  }
 
   const onMoved = () => {
-    setAnnotationMode(AnnotationMode.VIEW);
+    setAnnotationMode(AnnotationMode.VIEW)
 
     const annoEditDuration: number = TimeUtils.getRoundedDuration(
       annoTimestampRef.current,
       performance.now(),
-    );
+    )
 
     // add annotation time (or set it if there was no time before)
     // null seems to be a number in the JS world
     const newAnnoTime: number =
       isNaN(scaledAnnotation.annoTime) || scaledAnnotation.annoTime === null
         ? annoEditDuration
-        : scaledAnnotation.annoTime + annoEditDuration;
+        : scaledAnnotation.annoTime + annoEditDuration
 
     // moving finished - send event to canvas
     onAnnoChanged({
       ...scaledAnnotation,
       coordinates: coordinatesRef.current,
       annoTime: newAnnoTime,
-    });
-  };
+    })
+  }
 
   useEffect(() => {
-    onAnnotationModeChange(annotationMode);
-  }, [annotationMode]);
+    onAnnotationModeChange(annotationMode)
+  }, [annotationMode])
 
   // apply coordinate changes from sia (e.g. out of image fixes)
   // ignore outside changes while creating annotation
   useEffect(() => {
-    if (
-      annotationMode === AnnotationMode.CREATE ||
-      annotationMode === AnnotationMode.ADD
-    )
-      return;
-    setCoordinates(scaledAnnotation.coordinates);
-  }, [scaledAnnotation]);
+    if (annotationMode === AnnotationMode.CREATE || annotationMode === AnnotationMode.ADD)
+      return
+    setCoordinates(scaledAnnotation.coordinates)
+  }, [scaledAnnotation])
 
   const renderAnno = () => {
     switch (scaledAnnotation.type) {
@@ -204,7 +197,7 @@ const AnnotationComponent = ({
             onMoved={onMoved}
             onIsDraggingStateChanged={setIsDragging}
           />
-        );
+        )
       case AnnotationTool.Line:
         return (
           <Line
@@ -224,7 +217,7 @@ const AnnotationComponent = ({
             onIsDraggingStateChanged={setIsDragging}
             onFinishAnnoCreate={finishAnnoCreate}
           />
-        );
+        )
       case AnnotationTool.BBox:
         return (
           <BBox
@@ -238,14 +231,14 @@ const AnnotationComponent = ({
             svgScale={svgScale}
             svgTranslation={svgTranslation}
             onDeleteNode={() => {
-              console.log("TODO");
+              console.log('TODO')
             }}
             onIsDraggingStateChanged={setIsDragging}
             onFinishAnnoCreate={finishAnnoCreate}
             onMoving={onMoving}
             onMoved={onMoved}
           />
-        );
+        )
       case AnnotationTool.Polygon:
         return (
           <Polygon
@@ -267,9 +260,9 @@ const AnnotationComponent = ({
             onIsDraggingStateChanged={setIsDragging}
             onFinishAnnoCreate={finishAnnoCreate}
           />
-        );
+        )
     }
-  };
+  }
 
   return (
     <g
@@ -278,8 +271,8 @@ const AnnotationComponent = ({
       // onMouseDown={(e) => this.onMouseDown(e)}
       // onContextMenu={(e) => this.onContextMenu(e)}
       onClick={(e) => {
-        e.stopPropagation();
-        onAction(scaledAnnotation, CanvasAction.ANNO_SELECTED);
+        e.stopPropagation()
+        onAction(scaledAnnotation, CanvasAction.ANNO_SELECTED)
       }}
     >
       {!isDragging && annotationMode !== AnnotationMode.CREATE && (
@@ -297,7 +290,7 @@ const AnnotationComponent = ({
       )}
       {renderAnno()}
     </g>
-  );
-};
+  )
+}
 
-export default AnnotationComponent;
+export default AnnotationComponent

package/src/Annotation/ui/atoms/DaviIcon.tsx

@@ -1,26 +1,16 @@
 type DaviIconProps = {
-  x: number;
-  y: number;
-  color: string;
-  size: number;
-  onClick?: () => void;
-};
+  x: number
+  y: number
+  color: string
+  size: number
+  onClick?: () => void
+}
 
-const DaviIcon = ({
-  x,
-  y,
-  color,
-  size = 60,
-  onClick = () => {},
-}: DaviIconProps) => {
-  const scale: number = size / 1400;
+const DaviIcon = ({ x, y, color, size = 60, onClick = () => {} }: DaviIconProps) => {
+  const scale: number = size / 1400
 
   return (
-    <g
-      transform={`translate(${x} ${y}) scale(${scale})`}
-      fill={color}
-      onClick={onClick}
-    >
+    <g transform={`translate(${x} ${y}) scale(${scale})`} fill={color} onClick={onClick}>
       <path
         id="Maps"
         d="M620.561,817.217c-1.568-3.62-3.771-7.101-4.611-10.885
@@ -51,7 +41,7 @@ const DaviIcon = ({
                     c-0.074,8.051-6.938,12.819-13.703,12.847C731.482,263.519,724.956,259.059,724.709,250.898z"
       />
     </g>
-  );
-};
+  )
+}
 
-export default DaviIcon;
+export default DaviIcon

package/src/Annotation/ui/atoms/PolygonArea.tsx

@@ -1,23 +1,23 @@
-import { CSSProperties, useEffect, useState } from "react";
-import { Point } from "../../../types";
-import AnnotationMode from "../../../models/AnnotationMode";
-import { AnnotationSettings } from "../../../types";
+import { CSSProperties, useEffect, useState } from 'react'
+import { Point } from '../../../types'
+import AnnotationMode from '../../../models/AnnotationMode'
+import { AnnotationSettings } from '../../../types'
 
 type PolygonAreaProps = {
-  coordinates: Point[];
-  isSelected: boolean;
-  isDisabled?: boolean;
-  annotationMode: AnnotationMode;
-  annotationSettings: AnnotationSettings;
-  pageToStageOffset: Point;
-  svgScale: number;
-  style: CSSProperties;
-  onFinishAnnoCreate?: () => void;
-  onMouseDown: (e: React.MouseEvent<SVGPolygonElement, MouseEvent>) => void;
-  onMouseUp?: (e: React.MouseEvent<SVGPolygonElement, MouseEvent>) => void;
-  onMouseMove: (e: React.MouseEvent<SVGPolygonElement, MouseEvent>) => void;
-  onIsDraggingStateChanged: (bool) => void;
-};
+  coordinates: Point[]
+  isSelected: boolean
+  isDisabled?: boolean
+  annotationMode: AnnotationMode
+  annotationSettings: AnnotationSettings
+  pageToStageOffset: Point
+  svgScale: number
+  style: CSSProperties
+  onFinishAnnoCreate?: () => void
+  onMouseDown: (e: React.MouseEvent<SVGPolygonElement, MouseEvent>) => void
+  onMouseUp?: (e: React.MouseEvent<SVGPolygonElement, MouseEvent>) => void
+  onMouseMove: (e: React.MouseEvent<SVGPolygonElement, MouseEvent>) => void
+  onIsDraggingStateChanged: (bool) => void
+}
 
 const PolygonArea = ({
   coordinates,
@@ -33,35 +33,35 @@ const PolygonArea = ({
   // draw line between nodes
   const svgLineCoords: string = coordinates
     .map((point: Point) => `${point.x},${point.y}`)
-    .join(" ");
+    .join(' ')
 
-  const [cursorStyle, setCursorStyle] = useState<string>("pointer");
+  const [cursorStyle, setCursorStyle] = useState<string>('pointer')
 
   useEffect(() => {
-    if (isDisabled) return setCursorStyle("not-allowed");
-    if (isSelected) setCursorStyle("grab");
-    else setCursorStyle("pointer");
-  }, [isSelected, isDisabled]);
+    if (isDisabled) return setCursorStyle('not-allowed')
+    if (isSelected) setCursorStyle('grab')
+    else setCursorStyle('pointer')
+  }, [isSelected, isDisabled])
 
   // adjust style for polyline
-  const polyLineStyle = { ...style };
-  polyLineStyle.cursor = cursorStyle;
-  polyLineStyle.fillOpacity = isSelected ? 0 : 0.3;
+  const polyLineStyle = { ...style }
+  polyLineStyle.cursor = cursorStyle
+  polyLineStyle.fillOpacity = isSelected ? 0 : 0.3
 
   // dont show the polygon edges (the line does what as a stripe if enabled)
-  if (isSelected && isDisabled) polyLineStyle.stroke = "none";
+  if (isSelected && isDisabled) polyLineStyle.stroke = 'none'
 
   return (
     <polygon
       points={svgLineCoords}
       style={polyLineStyle}
       onMouseDown={(e) => {
-        if (isSelected) setCursorStyle("grabbing");
-        onMouseDown(e);
+        if (isSelected) setCursorStyle('grabbing')
+        onMouseDown(e)
       }}
       onMouseUp={(e) => {
-        setCursorStyle("grab");
-        onMouseUp(e);
+        setCursorStyle('grab')
+        onMouseUp(e)
       }}
       onDoubleClick={() =>
         annotationMode === AnnotationMode.CREATE && onFinishAnnoCreate()
@@ -69,7 +69,7 @@ const PolygonArea = ({
       onMouseMove={onMouseMove}
       onContextMenu={(e) => e.preventDefault()}
     />
-  );
-};
+  )
+}
 
-export default PolygonArea;
+export default PolygonArea

package/src/Annotation/ui/tools/Point.tsx

@@ -1,21 +1,21 @@
-import { CSSProperties } from "react";
+import { CSSProperties } from 'react'
 
 // rename type to avoid naming conflict
-import { AnnotationSettings, Point as TPoint } from "../../../types";
-import Node from "../atoms/Node";
+import { AnnotationSettings, Point as TPoint } from '../../../types'
+import Node from '../atoms/Node'
 
 type PointProps = {
-  annotationSettings: AnnotationSettings;
-  coordinates: TPoint;
-  isSelected: boolean;
-  pageToStageOffset: TPoint;
-  svgScale: number;
-  svgTranslation: TPoint;
-  style: CSSProperties;
-  onIsDraggingStateChanged: (bool) => void;
-  onMoving: (coordinates: TPoint) => void; // during moving - update coordinates in parent
-  onMoved: (coordinates: TPoint[]) => void; // moving finished - send annotation changed event
-};
+  annotationSettings: AnnotationSettings
+  coordinates: TPoint
+  isSelected: boolean
+  pageToStageOffset: TPoint
+  svgScale: number
+  svgTranslation: TPoint
+  style: CSSProperties
+  onIsDraggingStateChanged: (bool) => void
+  onMoving: (coordinates: TPoint) => void // during moving - update coordinates in parent
+  onMoved: (coordinates: TPoint[]) => void // moving finished - send annotation changed event
+}
 
 const Point = ({
   annotationSettings,
@@ -46,7 +46,7 @@ const Point = ({
       onMoved={() => onMoved([coordinates])}
       onIsDraggingStateChanged={onIsDraggingStateChanged}
     />
-  );
-};
+  )
+}
 
-export default Point;
+export default Point

package/src/Canvas/Canvas.tsx

@@ -133,6 +133,9 @@ const Canvas = ({
   const [labelInputPosition, setLabelInputPosition] = useState<Point>()
   const [isLabelInputVisible, setIsLabelInputVisible] = useState<boolean>(false)
 
+  // svg element - used to trap focus
+  const svgRef = useRef(null)
+
   // available canvas area - all possible space for creating a canvas
   const canvasRef = useRef(null)
 
@@ -234,7 +237,6 @@ const Canvas = ({
     }
   }
 
-  // @TODO
   const editSelectedAnnotation = () => {
     if (
       selectedAnnotation &&
@@ -242,8 +244,6 @@ const Canvas = ({
     )
       return
 
-    // selectedAnnotation!.mode = AnnotationMode.CREATE;
-
     const newSelectedAnnotation: Annotation | undefined = annotations.find(
       (annotation: Annotation) =>
         annotation.internalId === selectedAnnotation?.internalId,
@@ -251,18 +251,20 @@ const Canvas = ({
 
     if (newSelectedAnnotation === undefined) return
 
-    newSelectedAnnotation.mode = AnnotationMode.CREATE
-    newSelectedAnnotation.status = AnnotationStatus.CREATING
-    newSelectedAnnotation.selectedNode = newSelectedAnnotation.coordinates.length - 1
-    setEditorMode(EditorModes.ADD)
+    setEditorMode(EditorModes.CREATE)
     onSetSelectedTool(newSelectedAnnotation.type)
 
-    // replace annotation in list
-    // const selectedAnnotationId: number = annotations.findIndex((annotation: Annotation) => annotation.internalId === selectedAnnotation?.internalId)
-    // const newAnnotations = [...annotations]
-    // newAnnotations[selectedAnnotationId] = newSelectedAnnotation
-    onAnnoEditing(newSelectedAnnotation)
-    // onShouldDeleteAnno(selectedAnnotation!.internalId);
+    // recreate annotation with new internal id
+    const _newAnnotation: Annotation = {
+      ...newSelectedAnnotation,
+      mode: AnnotationMode.CREATE,
+      status: AnnotationStatus.CREATING,
+      internalId: onRequestNewAnnoId(),
+      selectedNode: newSelectedAnnotation.coordinates.length - 1,
+    }
+
+    // "copy" annotation by recreating it with a new internal it and deleting the old one
+    onAnnoEditing(_newAnnotation)
   }
 
   const traverseAnnos = () => {
@@ -473,6 +475,11 @@ const Canvas = ({
     setIsLabelInputVisible(false)
   }
 
+  useEffect(() => {
+    // set initial focus to make keybinds work
+    svgRef.current?.focus()
+  }, [])
+
   // image changed after init -> reset everything
   useEffect(() => {
     if (canvasRef?.current !== undefined) {
@@ -832,6 +839,21 @@ const Canvas = ({
       },
     )
 
+    // move the selected annotation to the last spot
+    // this way, it's always on top of the others so that its nodes can be reached
+    if (selectedAnnotation) {
+      const _selectedAnnotation: Annotation = scaledAnnotations.find(
+        (a) => a.internalId === selectedAnnotation?.internalId,
+      )
+
+      // since annos was generated by iterating through scaledAnnotations, the index is the same
+      const selectedAnnotationIndex: number =
+        scaledAnnotations.indexOf(_selectedAnnotation)
+
+      // move the selected annotation to the last spot
+      annos.push(annos.splice(selectedAnnotationIndex, 1)[0])
+    }
+
     return <g>{annos}</g>
   }
 
@@ -862,8 +884,13 @@ const Canvas = ({
     <div
       ref={canvasRef}
       style={{
-        width: '100%',
-        height: '100%',
+        // use the max available height as a flex child
+        flex: '1 1 auto',
+        minHeight: 0,
+
+        // give the max available height to the next child
+        display: 'flex',
+        flexDirection: 'column',
       }}
     >
       <div
@@ -941,8 +968,12 @@ const Canvas = ({
       )}
 
       <svg
-        width="100%"
-        height="100%"
+        ref={svgRef}
+        style={{
+          // use the max available height as a flex child
+          flex: '1 1 auto',
+          minHeight: 0,
+        }}
         onKeyDown={onKeyDown}
         onKeyUp={onKeyUp}
         onMouseMove={(e) => onMouseMove(e.movementX, e.movementY)}