lost-sia 2.0.1-alpha9 → 3.0.0

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

@@ -1,20 +1,20 @@
-import { CSSProperties, MouseEvent, useEffect, useRef, useState } from "react";
-import { Point } from "../../../types";
-import mouse2 from "../../../utils/mouse2";
-import AnnotationSettings from "../../../models/AnnotationSettings";
+import { CSSProperties, MouseEvent, useEffect, useRef, useState } from 'react'
+import { AnnotationSettings, Point } from '../../../types'
+import mouse from '../../../utils/mouse'
 
 type NodeProps = {
-  index: number;
-  coordinates: Point;
-  annotationSettings: AnnotationSettings;
-  pageToStageOffset: Point;
-  svgScale: number;
-  style: CSSProperties;
-  onDeleteNode: () => void;
-  onMoving: (index: number, coordinates: Point) => void;
-  onMoved: () => void;
-  onIsDraggingStateChanged: (bool) => void;
-};
+  index: number
+  coordinates: Point
+  annotationSettings: AnnotationSettings
+  pageToStageOffset: Point
+  svgScale: number
+  svgTranslation: Point
+  style: CSSProperties
+  onDeleteNode: () => void
+  onMoving: (index: number, coordinates: Point) => void
+  onMoved: () => void
+  onIsDraggingStateChanged: (bool) => void
+}
 
 const Node = ({
   index,
@@ -22,60 +22,66 @@ const Node = ({
   annotationSettings,
   pageToStageOffset,
   svgScale,
+  svgTranslation,
   style,
   onDeleteNode,
   onMoving, // during moving - update coordinates in parent
   onMoved, // moving finished - send annotation changed event
   onIsDraggingStateChanged,
 }: NodeProps) => {
-  const [hasHalo, setHasHalo] = useState<boolean>(false);
-  const [isDragging, setIsDragging] = useState<boolean>(false);
+  const [hasHalo, setHasHalo] = useState<boolean>(false)
+  const [isDragging, setIsDragging] = 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 [didItActuallyMove, setDidItActuallyMove] = useState<boolean>(false);
-  const didItActuallyMoveRef = useRef<boolean>(didItActuallyMove);
+  const [didItActuallyMove, setDidItActuallyMove] = useState<boolean>(false)
+  const didItActuallyMoveRef = useRef<boolean>(didItActuallyMove)
 
   useEffect(() => {
-    didItActuallyMoveRef.current = didItActuallyMove;
-  }, [didItActuallyMove]);
+    didItActuallyMoveRef.current = didItActuallyMove
+  }, [didItActuallyMove])
 
   const onMouseMove = (e: MouseEvent) => {
-    if (!isDragging) return;
+    if (!isDragging) return
 
     const antiScaledMousePositionInStageCoordinates =
-      mouse2.getAntiScaledMouseStagePosition(e, pageToStageOffset, svgScale);
+      mouse.getAntiScaledMouseStagePosition(
+        e,
+        pageToStageOffset,
+        svgScale,
+        svgTranslation,
+      )
 
     // only escalate event when mouse actually moved
     if (e.movementX !== 0 || e.movementY !== 0) {
-      setDidItActuallyMove(true);
-      onMoving(index, antiScaledMousePositionInStageCoordinates);
+      setDidItActuallyMove(true)
+      onMoving(index, antiScaledMousePositionInStageCoordinates)
     }
-  };
+  }
 
   useEffect(() => {
-    onIsDraggingStateChanged(isDragging);
-    if (!isDragging) return;
+    onIsDraggingStateChanged(isDragging)
+    if (!isDragging) return
 
     const handleMouseUp = () => {
-      setIsDragging(false);
-      if (didItActuallyMoveRef.current) onMoved();
-      setDidItActuallyMove(false);
-    };
+      setIsDragging(false)
+      if (didItActuallyMoveRef.current) onMoved()
+      setDidItActuallyMove(false)
+    }
 
-    window.addEventListener("mouseup", handleMouseUp);
+    globalThis.addEventListener('mouseup', handleMouseUp)
 
     return () => {
-      window.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [isDragging]);
+      globalThis.removeEventListener('mouseup', handleMouseUp)
+    }
+  }, [isDragging])
 
   const onMouseDown = (e: MouseEvent) => {
-    if (!annotationSettings.canEdit) return;
+    if (!annotationSettings.canEdit) return
 
-    if (e.ctrlKey) onDeleteNode();
-    else setIsDragging(true);
-  };
+    if (e.ctrlKey) onDeleteNode()
+    else setIsDragging(true)
+  }
 
   const renderHalo = () => {
     return (
@@ -83,25 +89,25 @@ const Node = ({
         cx={coordinates.x}
         cy={coordinates.y}
         r={12 / svgScale}
-        onMouseLeave={(e) => annotationSettings.canEdit && setHasHalo(false)}
+        onMouseLeave={(_) => annotationSettings.canEdit && setHasHalo(false)}
         onMouseDown={onMouseDown}
         onContextMenu={(e) => e.preventDefault()}
       />
-    );
-  };
+    )
+  }
 
   const renderInfiniteSelectionArea = () => {
     return (
       <circle
         cx={coordinates.x}
         cy={coordinates.y}
-        r={"100%"}
+        r={'100%'}
         style={{ opacity: 0 }}
         onMouseMove={(e) => onMouseMove(e)}
         onContextMenu={(e) => e.preventDefault()}
       />
-    );
-  };
+    )
+  }
 
   return (
     <g>
@@ -113,14 +119,14 @@ const Node = ({
         r={10 / svgScale}
         style={style}
         onMouseOver={() => {
-          annotationSettings.canEdit && setHasHalo(true);
+          if (annotationSettings.canEdit) setHasHalo(true)
         }}
         onMouseDown={onMouseDown}
         onMouseMove={(e) => onMouseMove(e)}
         onContextMenu={(e) => e.preventDefault()}
       />
     </g>
-  );
-};
+  )
+}
 
-export default Node;
+export default Node

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

@@ -1,23 +1,18 @@
-import { CSSProperties, useEffect, useState } from "react";
-import { Point } from "../../../types";
-import AnnotationMode from "../../../models/AnnotationMode";
-import AnnotationSettings from "../../../models/AnnotationSettings";
+import { CSSProperties, useEffect, useState } from 'react'
+import { Point } from '../../../types'
+import AnnotationMode from '../../../models/AnnotationMode'
 
 type PolygonAreaProps = {
-  coordinates: Point[];
-  isSelected: boolean;
-  isDisabled?: boolean;
-  annotationMode: AnnotationMode;
-  annotationSettings: AnnotationSettings;
-  pageToStageOffset: Point;
-  svgScale: number;
-  style: CSSProperties;
-  onFinishAnnoCreate?: () => void;
-  onMouseDown: (e: MouseEvent) => void;
-  onMouseUp?: (e: MouseEvent) => void;
-  onMouseMove: (e: MouseEvent) => void;
-  onIsDraggingStateChanged: (bool) => void;
-};
+  coordinates: Point[]
+  isSelected: boolean
+  isDisabled?: boolean
+  annotationMode: AnnotationMode
+  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
+}
 
 const PolygonArea = ({
   coordinates,
@@ -33,35 +28,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) => {
-        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 +64,7 @@ const PolygonArea = ({
       onMouseMove={onMouseMove}
       onContextMenu={(e) => e.preventDefault()}
     />
-  );
-};
+  )
+}
 
-export default PolygonArea;
+export default PolygonArea