lost-sia 2.0.1-alpha9 → 3.0.0

package/src/Annotation/ui/AnnotationComponent.tsx

@@ -1,40 +1,42 @@
-import AnnotationTool from "../../models/AnnotationTool";
-import Label from "../../models/Label";
-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 { Point } from "../../types";
-import AnnotationMode from "../../models/AnnotationMode";
-import AnnotationSettings from "../../models/AnnotationSettings";
+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;
-  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;
-};
+  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,
   annotationSettings,
   possibleLabels,
   svgScale,
+  svgTranslation,
   pageToStageOffset,
   strokeWidth,
   nodeRadius,
@@ -45,15 +47,21 @@ const AnnotationComponent = ({
   onAction = (_, __) => {},
   onAnnoChanged = (_) => {},
   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>()
+
+  useEffect(() => {
+    annoTimestampRef.current = annoTimestamp
+  }, [annoTimestamp])
 
   /**
    * during user editing of the annotation, multiple events are fired by the children
@@ -63,94 +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?.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 !== AnnotationMode.CREATE)
-      setAnnotationMode(AnnotationMode.MOVE);
+    if (
+      ![AnnotationMode.ADD, AnnotationMode.CREATE, AnnotationMode.MOVE].includes(
+        annotationMode,
+      )
+    ) {
+      setAnnotationMode(AnnotationMode.MOVE)
 
-    setCoordinates(newCoords);
-  };
+      setAnnoTimestamp(performance.now())
+    }
+
+    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 =
+      Number.isNaN(scaledAnnotation.annoTime) || scaledAnnotation.annoTime === null
+        ? 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) return;
-    setCoordinates(scaledAnnotation.coordinates);
-  }, [scaledAnnotation]);
+    if (annotationMode === AnnotationMode.CREATE || annotationMode === AnnotationMode.ADD)
+      return
+    setCoordinates(scaledAnnotation.coordinates)
+  }, [scaledAnnotation])
 
   const renderAnno = () => {
     switch (scaledAnnotation.type) {
@@ -162,15 +191,13 @@ const AnnotationComponent = ({
             coordinates={coordinates[0]}
             pageToStageOffset={pageToStageOffset}
             svgScale={svgScale}
+            svgTranslation={svgTranslation}
             style={annotationStyle}
-            onMoving={(newPoint: Point) => {
-              setAnnotationMode(AnnotationMode.MOVE);
-              setCoordinates([newPoint]);
-            }}
+            onMoving={(point: Point) => onMoving([point])}
             onMoved={onMoved}
             onIsDraggingStateChanged={setIsDragging}
           />
-        );
+        )
       case AnnotationTool.Line:
         return (
           <Line
@@ -179,8 +206,8 @@ const AnnotationComponent = ({
             isSelected={isSelected}
             pageToStageOffset={pageToStageOffset}
             annotationMode={annotationMode}
-            setAnnotationMode={setAnnotationMode}
             svgScale={svgScale}
+            svgTranslation={svgTranslation}
             style={annotationStyle}
             onAddNode={changeAnnoCoords}
             onDeleteNode={changeAnnoCoords}
@@ -189,7 +216,7 @@ const AnnotationComponent = ({
             onIsDraggingStateChanged={setIsDragging}
             onFinishAnnoCreate={finishAnnoCreate}
           />
-        );
+        )
       case AnnotationTool.BBox:
         return (
           <BBox
@@ -201,15 +228,16 @@ const AnnotationComponent = ({
             pageToStageOffset={pageToStageOffset}
             style={annotationStyle}
             svgScale={svgScale}
+            svgTranslation={svgTranslation}
             onDeleteNode={() => {
-              console.log("TODO");
+              console.log('TODO')
             }}
             onIsDraggingStateChanged={setIsDragging}
             onFinishAnnoCreate={finishAnnoCreate}
             onMoving={onMoving}
             onMoved={onMoved}
           />
-        );
+        )
       case AnnotationTool.Polygon:
         return (
           <Polygon
@@ -219,19 +247,20 @@ const AnnotationComponent = ({
             isDisabled={isDisabled}
             pageToStageOffset={pageToStageOffset}
             annotationMode={annotationMode}
-            setAnnotationMode={setAnnotationMode}
             svgScale={svgScale}
+            svgTranslation={svgTranslation}
             style={annotationStyle}
             onAddNode={changeAnnoCoords}
             onDeleteNode={changeAnnoCoords}
             onMoving={onMoving}
             onMoved={onMoved}
+            onNotification={onNotification}
             onIsDraggingStateChanged={setIsDragging}
             onFinishAnnoCreate={finishAnnoCreate}
           />
-        );
+        )
     }
-  };
+  }
 
   return (
     <g
@@ -240,8 +269,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 && (
@@ -259,7 +288,7 @@ const AnnotationComponent = ({
       )}
       {renderAnno()}
     </g>
-  );
-};
+  )
+}
 
-export default AnnotationComponent;
+export default AnnotationComponent

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

@@ -1,24 +1,23 @@
-import { CSSProperties, useEffect, useRef, useState } from "react";
-import Label from "../../../models/Label";
-import { Point } from "../../../types";
-import transform from "../../../utils/transform2";
-import DaviIcon from "./DaviIcon";
+import { CSSProperties, useEffect, useRef, useState } from 'react'
+import { Label, Point } from '../../../types'
+import transform from '../../../utils/transform'
+import DaviIcon from './DaviIcon'
 
-const DEFAULT_FONT_SIZE = 10;
-const DEFAULT_RECT_HEIGHT = 15;
-const TEXT_PADDING = 3;
+const DEFAULT_FONT_SIZE = 10
+const DEFAULT_RECT_HEIGHT = 15
+const TEXT_PADDING = 3
 
 type AnnoBarProps = {
-  annotationCoordinates: Point[];
-  canLabel: boolean;
-  color: string;
-  labels: Label[];
-  selectedLabelIds: number[];
-  isSelected: boolean;
-  svgScale: number;
-  style: CSSProperties;
-  onLabelIconClicked: (markerPosition: Point) => void;
-};
+  annotationCoordinates: Point[]
+  canLabel: boolean
+  color: string
+  labels: Label[]
+  selectedLabelIds: number[]
+  isSelected: boolean
+  svgScale: number
+  style: CSSProperties
+  onLabelIconClicked: (markerPosition: Point) => void
+}
 const AnnoBar = ({
   annotationCoordinates,
   canLabel,
@@ -30,57 +29,56 @@ const AnnoBar = ({
   style,
   onLabelIconClicked,
 }: AnnoBarProps) => {
-  const [barPosition, setBarPosition] = useState<Point>({ x: 0, y: 0 });
-  const [barWidth, setBarWidth] = useState<number>(0);
-  const [barHeight, setBarHeight] = useState<number>(0);
-  const [fontSize, setFontSize] = useState<number>(0);
-  const [labelText, setLabelText] = useState<string>("");
-
-  const textRef = useRef(null);
+  const [topLeftPoint, setTopLeftPoint] = useState<Point>({ x: 0, y: 0 })
+  const barPosition: Point = {
+    x: topLeftPoint.x + 7 / svgScale,
+    y: topLeftPoint.y - 10 / svgScale,
+  }
+  const [barWidth, setBarWidth] = useState<number>(0)
+  const [barHeight, setBarHeight] = useState<number>(0)
+  const [fontSize, setFontSize] = useState<number>(0)
+  const [labelText, setLabelText] = useState<string>('')
+
+  const textRef = useRef(null)
 
   useEffect(() => {
-    setLabelText(getLabelText());
-  }, [selectedLabelIds]);
+    setLabelText(getLabelText())
+  }, [selectedLabelIds])
 
   useEffect(() => {
     // get the most top left point from the annotation
-    const topPoints: Point[] = transform.getTopPoint(annotationCoordinates);
-    const topLeftPoint: Point = transform.getMostLeftPoints(topPoints)[0];
-
-    const newBarPosition: Point = {
-      x: topLeftPoint.x + 7 / svgScale,
-      y: topLeftPoint.y - 10 / svgScale,
-    };
+    const topPoints: Point[] = transform.getTopPoint(annotationCoordinates)
+    const newTopLeftPoint: Point = transform.getMostLeftPoints(topPoints)[0]
 
-    setBarPosition(newBarPosition);
+    setTopLeftPoint(newTopLeftPoint)
 
     // calculate scaled font size
-    const newFontSize = Math.ceil(DEFAULT_FONT_SIZE / svgScale);
-    setFontSize(newFontSize);
+    const newFontSize = Math.ceil(DEFAULT_FONT_SIZE / svgScale)
+    setFontSize(newFontSize)
 
-    setBarHeight(DEFAULT_RECT_HEIGHT / svgScale);
-  }, [svgScale]);
+    setBarHeight(DEFAULT_RECT_HEIGHT / svgScale)
+  }, [svgScale])
 
   useEffect(() => {
-    if (textRef === undefined) return;
+    if (textRef === undefined) return
 
     // calculate size of box around label text
-    const textElement: DOMRect = textRef.current.getBoundingClientRect();
-    const textWidth: number = textElement.width;
-    const rectWidth = (textWidth + TEXT_PADDING) / svgScale;
+    const textElement: DOMRect = textRef.current.getBoundingClientRect()
+    const textWidth: number = textElement.width
+    const rectWidth = (textWidth + TEXT_PADDING) / svgScale
 
-    setBarWidth(rectWidth);
-  }, [textRef, labelText, fontSize]);
+    setBarWidth(rectWidth)
+  }, [textRef, labelText, fontSize])
 
   const getLabelText = () => {
     const selectedLabels: Label[] = labels.filter((label: Label) =>
       selectedLabelIds.includes(label.id),
-    );
+    )
 
-    const labelText = selectedLabels.map((l) => l.name).join(", ");
+    const labelText = selectedLabels.map((l) => l.name).join(', ')
 
-    return labelText.length ? labelText : "no label";
-  };
+    return labelText.length ? labelText : 'no label'
+  }
 
   return (
     <g>
@@ -90,7 +88,7 @@ const AnnoBar = ({
           y={barPosition.y - 30 / svgScale}
           color={color}
           size={60 / svgScale}
-          onClick={() => onLabelIconClicked(barPosition)}
+          onClick={() => onLabelIconClicked(topLeftPoint)}
         />
       )}
 
@@ -126,7 +124,7 @@ const AnnoBar = ({
         onContextMenu={(e) => e.preventDefault()}
       />
     </g>
-  );
-};
+  )
+}
 
-export default AnnoBar;
+export default AnnoBar

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/Edge.tsx

@@ -1,19 +1,20 @@
-import { CSSProperties } from "react";
-import { Point } from "../../../types";
-import mouse2 from "../../../utils/mouse2";
+import { CSSProperties, MouseEvent } from 'react'
+import { Point, Vector2 } from '../../../types'
+import mouse from '../../../utils/mouse'
 
 type EdgeProps = {
-  startCoordinate: Point;
-  endCoordinate: Point;
-  isDisabled?: boolean;
-  pageToStageOffset: Point;
-  svgScale: number;
-  style: CSSProperties;
-  onAddNode?: (coordinate: Point) => void;
-  onDoubleClick?: (e: MouseEvent) => void;
-  onMouseDown: (e: MouseEvent) => void;
-  onMouseMove: (e: MouseEvent) => void;
-};
+  startCoordinate: Point
+  endCoordinate: Point
+  isDisabled?: boolean
+  pageToStageOffset: Point
+  svgScale: number
+  svgTranslation: Vector2
+  style: CSSProperties
+  onAddNode?: (coordinate: Point) => void
+  onDoubleClick?: (e: MouseEvent) => void
+  onMouseDown: (e: MouseEvent) => void
+  onMouseMove: (e: MouseEvent) => void
+}
 
 const Edge = ({
   startCoordinate,
@@ -22,20 +23,22 @@ const Edge = ({
   pageToStageOffset,
   style,
   svgScale,
+  svgTranslation,
   onAddNode = () => {},
   onDoubleClick = () => {},
   onMouseDown,
   onMouseMove,
 }: EdgeProps) => {
   const addNode = (e: MouseEvent) => {
-    const mouseStageCoords: Point = mouse2.getAntiScaledMouseStagePosition(
+    const mouseStageCoords: Point = mouse.getAntiScaledMouseStagePosition(
       e,
       pageToStageOffset,
       svgScale,
-    );
+      svgTranslation,
+    )
 
-    onAddNode(mouseStageCoords);
-  };
+    onAddNode(mouseStageCoords)
+  }
 
   return (
     <line
@@ -49,9 +52,9 @@ const Edge = ({
       onMouseDown={onMouseDown}
       onMouseMove={onMouseMove}
       onContextMenu={(e) => e.preventDefault()}
-      stroke-dasharray={isDisabled ? "10,5" : "0"}
+      strokeDasharray={isDisabled ? '10,5' : '0'}
     />
-  );
-};
+  )
+}
 
-export default Edge;
+export default Edge