lost-sia 2.0.1-alpha8 → 3.0.0

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

@@ -1,30 +1,28 @@
-import { CSSProperties, useEffect, useRef, useState } from "react";
+import { CSSProperties, MouseEvent, useEffect, useRef, useState } from 'react'
 
 // rename type to avoid naming conflict
-import { Point } from "../../../types";
-import Node from "../atoms/Node";
-import Polyline from "../atoms/PolygonArea";
-import AnnotationMode from "../../../models/AnnotationMode";
-import AnnotationSettings from "../../../models/AnnotationSettings";
-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;
-  style: CSSProperties;
-  onAddNode: (coordinates: Point[]) => void;
-  onDeleteNode: (coordinates: Point[]) => void;
-  onFinishAnnoCreate: () => void;
-  onIsDraggingStateChanged: (bool) => 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
+  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,
@@ -33,6 +31,7 @@ const Line = ({
   annotationMode,
   pageToStageOffset,
   svgScale,
+  svgTranslation,
   style,
   onAddNode,
   onDeleteNode,
@@ -41,106 +40,109 @@ 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(e, pageToStageOffset, svgScale);
+        mouse.getAntiScaledMouseStagePosition(
+          e,
+          pageToStageOffset,
+          svgScale,
+          svgTranslation,
+        )
 
-      let newCoordinates = [...coordinates];
-      newCoordinates.push(antiScaledMousePositionInStageCoordinates);
+      const newCoordinates = [...coordinates]
+      newCoordinates.push(antiScaledMousePositionInStageCoordinates)
 
-      onAddNode(newCoordinates);
+      onAddNode(newCoordinates)
     }
-  };
+  }
 
   const onMouseMove = (e: MouseEvent) => {
     if (isAnnoDragging) {
       // apply mouse move to all coordinates
       const movedCoordinates: Point[] = coordinates.map((coordinate: Point) => {
+        // counter the canvas scaling (it will be automatically applied when rendering the annotation coordinates)
+        const newX = (coordinate.x += e.movementX / svgScale)
+        const newY = (coordinate.y += e.movementY / svgScale)
         return {
-          // 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),
-        };
-      });
+          x: newX,
+          y: newY,
+        }
+      })
 
       // 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);
+    globalThis.addEventListener('mouseup', handleMouseUp)
 
     return () => {
-      window.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [isAnnoDragging]);
+      globalThis.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) => (
@@ -151,29 +153,30 @@ const Line = ({
         coordinates={coordinate}
         pageToStageOffset={pageToStageOffset}
         svgScale={svgScale}
+        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 = () => {
-    let svgEdges = coordinates.map((coordinate: Point, index: number) => {
+    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
@@ -182,14 +185,15 @@ const Line = ({
           endCoordinate={coordinates[index + 1]}
           pageToStageOffset={pageToStageOffset}
           svgScale={svgScale}
+          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()
@@ -197,14 +201,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 (
@@ -214,7 +217,7 @@ const Line = ({
       {renderEdges()}
       {canRenderNodes && renderNodes()}
     </g>
-  );
-};
+  )
+}
 
-export default Line;
+export default Line

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 { Point as TPoint } from "../../../types";
-import AnnotationSettings from "../../../models/AnnotationSettings";
-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;
-  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,
@@ -23,6 +23,7 @@ const Point = ({
   isSelected,
   pageToStageOffset,
   svgScale,
+  svgTranslation,
   style,
   onMoving,
   onMoved,
@@ -35,6 +36,7 @@ const Point = ({
       coordinates={coordinates}
       pageToStageOffset={pageToStageOffset}
       svgScale={svgScale}
+      svgTranslation={svgTranslation}
       style={style}
       onDeleteNode={
         // just do nothing (we cannot delete a node from a point - delete the whole point instead)
@@ -44,7 +46,7 @@ const Point = ({
       onMoved={() => onMoved([coordinates])}
       onIsDraggingStateChanged={onIsDraggingStateChanged}
     />
-  );
-};
+  )
+}
 
-export default Point;
+export default Point