lost-sia 2.0.1-alpha11 → 2.0.1-alpha13

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

@@ -1,29 +1,29 @@
-import { CSSProperties, MouseEvent, useEffect, useRef, useState } from "react";
+import { CSSProperties, MouseEvent, useEffect, useRef, useState } from 'react'
 
 // rename type to avoid naming conflict
-import { AnnotationSettings, Point } from "../../../types";
-import Node from "../atoms/Node";
-import AnnotationMode from "../../../models/AnnotationMode";
-import Edge from "../atoms/Edge";
-import mouse2 from "../../../utils/mouse2";
+import { AnnotationSettings, Point } from '../../../types'
+import Node from '../atoms/Node'
+import AnnotationMode from '../../../models/AnnotationMode'
+import Edge from '../atoms/Edge'
+import mouse from '../../../utils/mouse'
 
 type LineProps = {
-  annotationSettings: AnnotationSettings;
-  coordinates: Point[];
-  isSelected: boolean;
-  annotationMode: AnnotationMode;
-  setAnnotationMode: (annotationMode: AnnotationMode) => void;
-  pageToStageOffset: Point;
-  svgScale: number;
-  svgTranslation: Point;
-  style: CSSProperties;
-  onAddNode: (coordinates: Point[]) => void;
-  onDeleteNode: (coordinates: Point[]) => void;
-  onFinishAnnoCreate: () => void;
-  onIsDraggingStateChanged: (newDraggingState: boolean) => void;
-  onMoving: (coordinates: Point[]) => void; // during moving - update coordinates in parent
-  onMoved: () => void; // moving finished - send annotation changed event
-};
+  annotationSettings: AnnotationSettings
+  coordinates: Point[]
+  isSelected: boolean
+  annotationMode: AnnotationMode
+  setAnnotationMode: (annotationMode: AnnotationMode) => void
+  pageToStageOffset: Point
+  svgScale: number
+  svgTranslation: Point
+  style: CSSProperties
+  onAddNode: (coordinates: Point[]) => void
+  onDeleteNode: (coordinates: Point[]) => void
+  onFinishAnnoCreate: () => void
+  onIsDraggingStateChanged: (newDraggingState: boolean) => void
+  onMoving: (coordinates: Point[]) => void // during moving - update coordinates in parent
+  onMoved: () => void // moving finished - send annotation changed event
+}
 
 const Line = ({
   annotationSettings,
@@ -41,43 +41,38 @@ const Line = ({
   onMoved,
   onIsDraggingStateChanged,
 }: LineProps) => {
-  const [isAnnoDragging, setIsAnnoDragging] = useState<boolean>(false);
+  const [isAnnoDragging, setIsAnnoDragging] = useState<boolean>(false)
 
   // onMove and onMouseUp events are fired in the same frame
   // use a ref to access the updated value without waiting until the next frame
-  const [didAnnoActuallyMove, setDidAnnoActuallyMove] =
-    useState<boolean>(false);
-  const didAnnoActuallyMoveRef = useRef<boolean>(didAnnoActuallyMove);
+  const [didAnnoActuallyMove, setDidAnnoActuallyMove] = useState<boolean>(false)
+  const didAnnoActuallyMoveRef = useRef<boolean>(didAnnoActuallyMove)
 
   useEffect(() => {
-    didAnnoActuallyMoveRef.current = didAnnoActuallyMove;
-  }, [didAnnoActuallyMove]);
+    didAnnoActuallyMoveRef.current = didAnnoActuallyMove
+  }, [didAnnoActuallyMove])
 
   const onMouseDown = (e: MouseEvent) => {
-    if (annotationSettings.canEdit === false) return;
+    if (annotationSettings.canEdit === false) return
 
-    if (
-      isSelected &&
-      annotationMode !== AnnotationMode.CREATE &&
-      e.button === 0
-    )
-      setIsAnnoDragging(true);
+    if (isSelected && annotationMode !== AnnotationMode.CREATE && e.button === 0)
+      setIsAnnoDragging(true)
 
     if (e.button === 2 && annotationMode == AnnotationMode.CREATE) {
       const antiScaledMousePositionInStageCoordinates =
-        mouse2.getAntiScaledMouseStagePosition(
+        mouse.getAntiScaledMouseStagePosition(
           e,
           pageToStageOffset,
           svgScale,
           svgTranslation,
-        );
+        )
 
-      const newCoordinates = [...coordinates];
-      newCoordinates.push(antiScaledMousePositionInStageCoordinates);
+      const newCoordinates = [...coordinates]
+      newCoordinates.push(antiScaledMousePositionInStageCoordinates)
 
-      onAddNode(newCoordinates);
+      onAddNode(newCoordinates)
     }
-  };
+  }
 
   const onMouseMove = (e: MouseEvent) => {
     if (isAnnoDragging) {
@@ -87,66 +82,66 @@ const Line = ({
           // counter the canvas scaling (it will be automatically applied when rendering the annotation coordinates)
           x: (coordinate.x += e.movementX / svgScale),
           y: (coordinate.y += e.movementY / svgScale),
-        };
-      });
+        }
+      })
 
       // only escalate event when mouse actually moved
       if (e.movementX !== 0 || e.movementY !== 0) {
-        setDidAnnoActuallyMove(true);
-        onMoving(movedCoordinates);
+        setDidAnnoActuallyMove(true)
+        onMoving(movedCoordinates)
       }
     }
 
     if (annotationMode === AnnotationMode.CREATE) {
-      const mousePointInStage = mouse2.getAntiScaledMouseStagePosition(
+      const mousePointInStage = mouse.getAntiScaledMouseStagePosition(
         e,
         pageToStageOffset,
         svgScale,
         svgTranslation,
-      );
+      )
 
-      let newCoords: Point[] = [...coordinates];
+      let newCoords: Point[] = [...coordinates]
 
       // last coordinate = mouse position - update it
-      if (coordinates.length > 1) newCoords = coordinates.slice(0, -1);
+      if (coordinates.length > 1) newCoords = coordinates.slice(0, -1)
 
-      newCoords.push(mousePointInStage);
+      newCoords.push(mousePointInStage)
 
-      onMoving(newCoords);
+      onMoving(newCoords)
     }
-  };
+  }
 
   useEffect(() => {
-    onIsDraggingStateChanged(isAnnoDragging);
-    if (!isAnnoDragging) return;
+    onIsDraggingStateChanged(isAnnoDragging)
+    if (!isAnnoDragging) return
 
     const handleMouseUp = () => {
-      setIsAnnoDragging(false);
+      setIsAnnoDragging(false)
 
-      if (didAnnoActuallyMoveRef.current) onMoved();
-      setDidAnnoActuallyMove(false);
-    };
+      if (didAnnoActuallyMoveRef.current) onMoved()
+      setDidAnnoActuallyMove(false)
+    }
 
-    window.addEventListener("mouseup", handleMouseUp);
+    window.addEventListener('mouseup', handleMouseUp)
 
     return () => {
-      window.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [isAnnoDragging]);
+      window.removeEventListener('mouseup', handleMouseUp)
+    }
+  }, [isAnnoDragging])
 
   const renderInfiniteSelectionArea = () => {
     return (
       <circle
         cx={coordinates[0].x}
         cy={coordinates[0].y}
-        r={"100%"}
+        r={'100%'}
         style={{ opacity: 0 }}
         onMouseDown={onMouseDown}
         onMouseMove={onMouseMove}
         onContextMenu={(e) => e.preventDefault()}
       />
-    );
-  };
+    )
+  }
 
   const renderNodes = () => {
     const svgNodes = coordinates.map((coordinate: Point, index: number) => (
@@ -160,27 +155,27 @@ const Line = ({
         svgTranslation={svgTranslation}
         style={style}
         onDeleteNode={() => {
-          const newCoordinates = [...coordinates];
-          newCoordinates.splice(index, 1);
-          onDeleteNode(newCoordinates);
+          const newCoordinates = [...coordinates]
+          newCoordinates.splice(index, 1)
+          onDeleteNode(newCoordinates)
         }}
         onMoving={(index, newPoint) => {
-          const newCoordinates = [...coordinates];
-          newCoordinates[index] = newPoint;
-          onMoving(newCoordinates);
+          const newCoordinates = [...coordinates]
+          newCoordinates[index] = newPoint
+          onMoving(newCoordinates)
         }}
         onMoved={() => onMoved()}
         onIsDraggingStateChanged={onIsDraggingStateChanged}
       />
-    ));
+    ))
 
-    return svgNodes;
-  };
+    return svgNodes
+  }
 
   const renderEdges = () => {
     const svgEdges = coordinates.map((coordinate: Point, index: number) => {
       // last coordinate has no end - dont draw it
-      if (index + 1 >= coordinates.length) return;
+      if (index + 1 >= coordinates.length) return
 
       return (
         <Edge
@@ -192,12 +187,12 @@ const Line = ({
           svgTranslation={svgTranslation}
           style={style}
           onAddNode={(coordinate: Point) => {
-            const newCoordinates = [...coordinates];
+            const newCoordinates = [...coordinates]
 
             // add element at index while keeping the others
-            newCoordinates.splice(index + 1, 0, coordinate);
+            newCoordinates.splice(index + 1, 0, coordinate)
 
-            onAddNode(newCoordinates);
+            onAddNode(newCoordinates)
           }}
           onDoubleClick={() =>
             annotationMode === AnnotationMode.CREATE && onFinishAnnoCreate()
@@ -205,14 +200,13 @@ const Line = ({
           onMouseDown={onMouseDown}
           onMouseMove={onMouseMove}
         />
-      );
-    });
+      )
+    })
 
-    return svgEdges;
-  };
+    return svgEdges
+  }
 
-  const canRenderNodes: boolean =
-    isSelected && annotationMode !== AnnotationMode.CREATE;
+  const canRenderNodes: boolean = isSelected && annotationMode !== AnnotationMode.CREATE
 
   // nodes need to be drawn after the edges to make them fully clickable
   return (
@@ -222,7 +216,7 @@ const Line = ({
       {renderEdges()}
       {canRenderNodes && renderNodes()}
     </g>
-  );
-};
+  )
+}
 
-export default Line;
+export default Line

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

@@ -1,34 +1,34 @@
-import { CSSProperties, MouseEvent, useEffect, useRef, useState } from "react";
+import { CSSProperties, MouseEvent, useEffect, useRef, useState } from 'react'
 
 // rename type to avoid naming conflict
-import { Point, SIANotification } from "../../../types";
-import Node from "../atoms/Node";
-import PolygonArea from "../atoms/PolygonArea";
-import AnnotationMode from "../../../models/AnnotationMode";
-import Edge from "../atoms/Edge";
-import mouse2 from "../../../utils/mouse2";
-import { NotificationType } from "../../../models";
-import { AnnotationSettings } from "../../../types";
+import { Point, SIANotification } from '../../../types'
+import Node from '../atoms/Node'
+import PolygonArea from '../atoms/PolygonArea'
+import AnnotationMode from '../../../models/AnnotationMode'
+import Edge from '../atoms/Edge'
+import mouse from '../../../utils/mouse'
+import { NotificationType } from '../../../models'
+import { AnnotationSettings } from '../../../types'
 
 type PolygonProps = {
-  annotationSettings: AnnotationSettings;
-  coordinates: Point[];
-  isSelected: boolean;
-  isDisabled?: boolean;
-  annotationMode: AnnotationMode;
-  setAnnotationMode: (annotationMode: AnnotationMode) => void;
-  pageToStageOffset: Point;
-  svgScale: number;
-  svgTranslation: Point;
-  style: CSSProperties;
-  onAddNode: (coordinates: Point[]) => void;
-  onDeleteNode: (coordinates: Point[]) => void;
-  onFinishAnnoCreate: () => void;
-  onIsDraggingStateChanged: (newDraggingState: boolean) => void;
-  onMoving: (coordinates: Point[]) => void; // during moving - update coordinates in parent
-  onMoved: () => void; // moving finished - send annotation changed event
-  onNotification?: (notification: SIANotification) => void;
-};
+  annotationSettings: AnnotationSettings
+  coordinates: Point[]
+  isSelected: boolean
+  isDisabled?: boolean
+  annotationMode: AnnotationMode
+  setAnnotationMode: (annotationMode: AnnotationMode) => void
+  pageToStageOffset: Point
+  svgScale: number
+  svgTranslation: Point
+  style: CSSProperties
+  onAddNode: (coordinates: Point[]) => void
+  onDeleteNode: (coordinates: Point[]) => void
+  onFinishAnnoCreate: () => void
+  onIsDraggingStateChanged: (newDraggingState: boolean) => void
+  onMoving: (coordinates: Point[]) => void // during moving - update coordinates in parent
+  onMoved: () => void // moving finished - send annotation changed event
+  onNotification?: (notification: SIANotification) => void
+}
 
 const Polygon = ({
   annotationSettings,
@@ -48,31 +48,30 @@ const Polygon = ({
   onMoved,
   onNotification = (_) => {},
 }: PolygonProps) => {
-  const [isAnnoDragging, setIsAnnoDragging] = useState<boolean>(false);
+  const [isAnnoDragging, setIsAnnoDragging] = useState<boolean>(false)
 
   // onMove and onMouseUp events are fired in the same frame
   // use a ref to access the updated value without waiting until the next frame
-  const [didAnnoActuallyMove, setDidAnnoActuallyMove] =
-    useState<boolean>(false);
-  const didAnnoActuallyMoveRef = useRef<boolean>(didAnnoActuallyMove);
+  const [didAnnoActuallyMove, setDidAnnoActuallyMove] = useState<boolean>(false)
+  const didAnnoActuallyMoveRef = useRef<boolean>(didAnnoActuallyMove)
 
   const handleFinishAnnoCreate = () => {
     if (coordinates.length < 3)
       return onNotification({
-        message: "Polygons must have at least 3 nodes",
-        title: "Polygon Error",
+        message: 'Polygons must have at least 3 nodes',
+        title: 'Polygon Error',
         type: NotificationType.ERROR,
-      });
+      })
 
-    onFinishAnnoCreate();
-  };
+    onFinishAnnoCreate()
+  }
 
   useEffect(() => {
-    didAnnoActuallyMoveRef.current = didAnnoActuallyMove;
-  }, [didAnnoActuallyMove]);
+    didAnnoActuallyMoveRef.current = didAnnoActuallyMove
+  }, [didAnnoActuallyMove])
 
   const onMouseDown = (e: MouseEvent) => {
-    if (annotationSettings.canEdit === false) return;
+    if (annotationSettings.canEdit === false) return
 
     if (
       isSelected &&
@@ -80,26 +79,26 @@ const Polygon = ({
       annotationMode !== AnnotationMode.ADD &&
       e.button === 0
     )
-      setIsAnnoDragging(true);
+      setIsAnnoDragging(true)
 
     if (
       e.button === 2 &&
       [AnnotationMode.CREATE, AnnotationMode.ADD].includes(annotationMode)
     ) {
       const antiScaledMousePositionInStageCoordinates =
-        mouse2.getAntiScaledMouseStagePosition(
+        mouse.getAntiScaledMouseStagePosition(
           e,
           pageToStageOffset,
           svgScale,
           svgTranslation,
-        );
+        )
 
-      const newCoordinates = [...coordinates];
-      newCoordinates.push(antiScaledMousePositionInStageCoordinates);
+      const newCoordinates = [...coordinates]
+      newCoordinates.push(antiScaledMousePositionInStageCoordinates)
 
-      onAddNode(newCoordinates);
+      onAddNode(newCoordinates)
     }
-  };
+  }
 
   const onMouseMove = (e: MouseEvent) => {
     if (isAnnoDragging) {
@@ -109,52 +108,52 @@ const Polygon = ({
           // counter the canvas scaling (it will be automatically applied when rendering the annotation coordinates)
           x: (coordinate.x += e.movementX / svgScale),
           y: (coordinate.y += e.movementY / svgScale),
-        };
-      });
+        }
+      })
 
       // only escalate event when mouse actually moved
       if (e.movementX !== 0 || e.movementY !== 0) {
-        setDidAnnoActuallyMove(true);
-        onMoving(movedCoordinates);
+        setDidAnnoActuallyMove(true)
+        onMoving(movedCoordinates)
       }
     }
 
     if (annotationMode === AnnotationMode.CREATE) {
-      const mousePointInStage = mouse2.getAntiScaledMouseStagePosition(
+      const mousePointInStage = mouse.getAntiScaledMouseStagePosition(
         e,
         pageToStageOffset,
         svgScale,
         svgTranslation,
-      );
+      )
 
-      let newCoords: Point[] = [...coordinates];
+      let newCoords: Point[] = [...coordinates]
 
       // last coordinate = mouse position - update it
-      if (coordinates.length > 1) newCoords = coordinates.slice(0, -1);
+      if (coordinates.length > 1) newCoords = coordinates.slice(0, -1)
 
-      newCoords.push(mousePointInStage);
+      newCoords.push(mousePointInStage)
 
-      onMoving(newCoords);
+      onMoving(newCoords)
     }
-  };
+  }
 
   useEffect(() => {
-    onIsDraggingStateChanged(isAnnoDragging);
-    if (!isAnnoDragging) return;
+    onIsDraggingStateChanged(isAnnoDragging)
+    if (!isAnnoDragging) return
 
     const handleMouseUp = () => {
-      setIsAnnoDragging(false);
+      setIsAnnoDragging(false)
 
-      if (didAnnoActuallyMoveRef.current) onMoved();
-      setDidAnnoActuallyMove(false);
-    };
+      if (didAnnoActuallyMoveRef.current) onMoved()
+      setDidAnnoActuallyMove(false)
+    }
 
-    window.addEventListener("mouseup", handleMouseUp);
+    window.addEventListener('mouseup', handleMouseUp)
 
     return () => {
-      window.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [isAnnoDragging]);
+      window.removeEventListener('mouseup', handleMouseUp)
+    }
+  }, [isAnnoDragging])
 
   const renderNodes = () => {
     const svgNodes = coordinates.map((coordinate: Point, index: number) => (
@@ -171,34 +170,32 @@ const Polygon = ({
           // 4 is the lowest node count where we can delete one
           if (coordinates.length < 4)
             return onNotification({
-              message: "Polygons must have at least 3 nodes",
-              title: "Polygon Error",
+              message: 'Polygons must have at least 3 nodes',
+              title: 'Polygon Error',
               type: NotificationType.ERROR,
-            });
+            })
 
-          const newCoordinates = [...coordinates];
-          newCoordinates.splice(index, 1);
-          onDeleteNode(newCoordinates);
+          const newCoordinates = [...coordinates]
+          newCoordinates.splice(index, 1)
+          onDeleteNode(newCoordinates)
         }}
         onMoving={(index, newPoint) => {
-          const newCoordinates = [...coordinates];
-          newCoordinates[index] = newPoint;
-          onMoving(newCoordinates);
+          const newCoordinates = [...coordinates]
+          newCoordinates[index] = newPoint
+          onMoving(newCoordinates)
         }}
         onMoved={() => onMoved()}
         onIsDraggingStateChanged={onIsDraggingStateChanged}
       />
-    ));
+    ))
 
-    return svgNodes;
-  };
+    return svgNodes
+  }
 
   const renderEdges = () => {
     const svgEdges = coordinates.map((coordinate: Point, index: number) => {
       const endCoordinates: Point =
-        index + 1 < coordinates.length
-          ? coordinates[index + 1]
-          : coordinates[0];
+        index + 1 < coordinates.length ? coordinates[index + 1] : coordinates[0]
 
       return (
         <Edge
@@ -211,10 +208,10 @@ const Polygon = ({
           svgTranslation={svgTranslation}
           style={style}
           onAddNode={(coordinate: Point) => {
-            const newCoordinates = [...coordinates];
-            newCoordinates.splice(index + 1, 0, coordinate);
+            const newCoordinates = [...coordinates]
+            newCoordinates.splice(index + 1, 0, coordinate)
 
-            onAddNode(newCoordinates);
+            onAddNode(newCoordinates)
           }}
           onDoubleClick={() =>
             annotationMode === AnnotationMode.CREATE && handleFinishAnnoCreate()
@@ -222,24 +219,24 @@ const Polygon = ({
           onMouseDown={onMouseDown}
           onMouseMove={onMouseMove}
         />
-      );
-    });
-    return svgEdges;
-  };
+      )
+    })
+    return svgEdges
+  }
 
   const renderInfiniteSelectionArea = () => {
     return (
       <circle
         cx={coordinates[0].x}
         cy={coordinates[0].y}
-        r={"100%"}
+        r={'100%'}
         style={{ opacity: 0 }}
         onMouseDown={onMouseDown}
         onMouseMove={onMouseMove}
         onContextMenu={(e) => e.preventDefault()}
       />
-    );
-  };
+    )
+  }
 
   // nodes need to be drawn after the polyline to make them clickable
   return (
@@ -265,7 +262,7 @@ const Polygon = ({
       {isSelected && annotationSettings.canEdit && renderEdges()}
       {isSelected && annotationMode !== AnnotationMode.CREATE && renderNodes()}
     </g>
-  );
-};
+  )
+}
 
-export default Polygon;
+export default Polygon