lost-sia 2.0.1-alpha2 → 2.0.1-alpha6

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

@@ -0,0 +1,57 @@
+import { CSSProperties } from "react";
+import { Point } from "../../../types";
+import mouse2 from "../../../utils/mouse2";
+
+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;
+};
+
+const Edge = ({
+  startCoordinate,
+  endCoordinate,
+  isDisabled = false,
+  pageToStageOffset,
+  style,
+  svgScale,
+  onAddNode = () => {},
+  onDoubleClick = () => {},
+  onMouseDown,
+  onMouseMove,
+}: EdgeProps) => {
+  const addNode = (e: MouseEvent) => {
+    const mouseStageCoords: Point = mouse2.getAntiScaledMouseStagePosition(
+      e,
+      pageToStageOffset,
+      svgScale,
+    );
+
+    onAddNode(mouseStageCoords);
+  };
+
+  return (
+    <line
+      x1={startCoordinate.x}
+      y1={startCoordinate.y}
+      x2={endCoordinate.x}
+      y2={endCoordinate.y}
+      style={style}
+      onClick={(e) => e.ctrlKey && addNode(e)}
+      onDoubleClick={onDoubleClick}
+      onMouseDown={onMouseDown}
+      onMouseMove={onMouseMove}
+      onContextMenu={(e) => e.preventDefault()}
+      stroke-dasharray={isDisabled ? "10,5" : "0"}
+    />
+  );
+};
+
+export default Edge;

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

@@ -0,0 +1,126 @@
+import { CSSProperties, MouseEvent, useEffect, useRef, useState } from "react";
+import { Point } from "../../../types";
+import mouse2 from "../../../utils/mouse2";
+import AnnotationSettings from "../../../models/AnnotationSettings";
+
+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;
+};
+
+const Node = ({
+  index,
+  coordinates,
+  annotationSettings,
+  pageToStageOffset,
+  svgScale,
+  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);
+
+  // 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);
+
+  useEffect(() => {
+    didItActuallyMoveRef.current = didItActuallyMove;
+  }, [didItActuallyMove]);
+
+  const onMouseMove = (e: MouseEvent) => {
+    if (!isDragging) return;
+
+    const antiScaledMousePositionInStageCoordinates =
+      mouse2.getAntiScaledMouseStagePosition(e, pageToStageOffset, svgScale);
+
+    // only escalate event when mouse actually moved
+    if (e.movementX !== 0 || e.movementY !== 0) {
+      setDidItActuallyMove(true);
+      onMoving(index, antiScaledMousePositionInStageCoordinates);
+    }
+  };
+
+  useEffect(() => {
+    onIsDraggingStateChanged(isDragging);
+    if (!isDragging) return;
+
+    const handleMouseUp = () => {
+      setIsDragging(false);
+      if (didItActuallyMoveRef.current) onMoved();
+      setDidItActuallyMove(false);
+    };
+
+    window.addEventListener("mouseup", handleMouseUp);
+
+    return () => {
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging]);
+
+  const onMouseDown = (e: MouseEvent) => {
+    if (!annotationSettings.canEdit) return;
+
+    if (e.ctrlKey) onDeleteNode();
+    else setIsDragging(true);
+  };
+
+  const renderHalo = () => {
+    return (
+      <circle
+        cx={coordinates.x}
+        cy={coordinates.y}
+        r={12 / svgScale}
+        onMouseLeave={(e) => annotationSettings.canEdit && setHasHalo(false)}
+        onMouseDown={onMouseDown}
+        onContextMenu={(e) => e.preventDefault()}
+      />
+    );
+  };
+
+  const renderInfiniteSelectionArea = () => {
+    return (
+      <circle
+        cx={coordinates.x}
+        cy={coordinates.y}
+        r={"100%"}
+        style={{ opacity: 0 }}
+        onMouseMove={(e) => onMouseMove(e)}
+        onContextMenu={(e) => e.preventDefault()}
+      />
+    );
+  };
+
+  return (
+    <g>
+      {isDragging && renderInfiniteSelectionArea()}
+      {hasHalo && renderHalo()}
+      <circle
+        cx={coordinates.x}
+        cy={coordinates.y}
+        r={10 / svgScale}
+        style={style}
+        onMouseOver={() => {
+          annotationSettings.canEdit && setHasHalo(true);
+        }}
+        onMouseDown={onMouseDown}
+        onMouseMove={(e) => onMouseMove(e)}
+        onContextMenu={(e) => e.preventDefault()}
+      />
+    </g>
+  );
+};
+
+export default Node;

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

@@ -0,0 +1,75 @@
+import { CSSProperties, useEffect, useState } from "react";
+import { Point } from "../../../types";
+import AnnotationMode from "../../../models/AnnotationMode";
+import AnnotationSettings from "../../../models/AnnotationSettings";
+
+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;
+};
+
+const PolygonArea = ({
+  coordinates,
+  isSelected,
+  isDisabled = false,
+  annotationMode,
+  style,
+  onFinishAnnoCreate = () => {},
+  onMouseDown,
+  onMouseUp = () => {},
+  onMouseMove,
+}: PolygonAreaProps) => {
+  // draw line between nodes
+  const svgLineCoords: string = coordinates
+    .map((point: Point) => `${point.x},${point.y}`)
+    .join(" ");
+
+  const [cursorStyle, setCursorStyle] = useState<string>("pointer");
+
+  useEffect(() => {
+    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;
+
+  // dont show the polygon edges (the line does what as a stripe if enabled)
+  if (isSelected && isDisabled) polyLineStyle.stroke = "none";
+
+  return (
+    <polygon
+      points={svgLineCoords}
+      style={polyLineStyle}
+      onMouseDown={(e) => {
+        isSelected && setCursorStyle("grabbing");
+        onMouseDown(e);
+      }}
+      onMouseUp={(e) => {
+        setCursorStyle("grab");
+        onMouseUp(e);
+      }}
+      onDoubleClick={() =>
+        annotationMode === AnnotationMode.CREATE && onFinishAnnoCreate()
+      }
+      onMouseMove={onMouseMove}
+      onContextMenu={(e) => e.preventDefault()}
+    />
+  );
+};
+
+export default PolygonArea;

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

@@ -0,0 +1,330 @@
+import { CSSProperties, useEffect, useRef, useState } from "react";
+
+// rename type to avoid naming conflict
+import { Point } from "../../../types";
+import Node from "../atoms/Node";
+import AnnotationSettings from "../../../models/AnnotationSettings";
+import AnnotationMode from "../../../models/AnnotationMode";
+import mouse2 from "../../../utils/mouse2";
+import PolygonArea from "../atoms/PolygonArea";
+import Edge from "../atoms/Edge";
+
+type BBoxProps = {
+  annotationMode: AnnotationMode;
+  annotationSettings: AnnotationSettings;
+  pageToStageOffset: Point;
+  startCoords: Point;
+  endCoords: Point;
+  svgScale: number;
+  isSelected: boolean;
+  style: CSSProperties;
+  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
+};
+
+const BBox = ({
+  annotationMode,
+  annotationSettings,
+  pageToStageOffset,
+  startCoords,
+  endCoords,
+  svgScale,
+  isSelected,
+  style,
+  onDeleteNode,
+  onFinishAnnoCreate,
+  onIsDraggingStateChanged,
+  onMoving,
+  onMoved,
+}: BBoxProps) => {
+  // build up 4 coordinates ("u"-style, 1 for each corner)
+  const coordinates: Point[] = [
+    startCoords,
+    { x: startCoords.x, y: endCoords.y },
+    endCoords,
+    { x: endCoords.x, y: startCoords.y },
+  ];
+
+  const [isAnnoCreating, setIsAnnoCreating] = useState<boolean>(
+    annotationMode === AnnotationMode.CREATE,
+  );
+  const [isAnnoDragging, setIsAnnoDragging] = useState<boolean>(false);
+  const [isEdgeDragging, setIsEdgeDragging] = useState<boolean>(false);
+  const [dragSelectedEdgeIndex, setDragSelectedEdgeIndex] = useState<number>(0);
+
+  // 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);
+
+  useEffect(() => {
+    didAnnoActuallyMoveRef.current = didAnnoActuallyMove;
+  }, [didAnnoActuallyMove]);
+
+  const onMouseDown = (e: MouseEvent) => {
+    if (annotationSettings.canEdit === false) return;
+
+    if (
+      isSelected &&
+      annotationMode !== AnnotationMode.CREATE &&
+      e.button === 0
+    )
+      setIsAnnoDragging(true);
+  };
+
+  const onMouseEdgeDown = (e: MouseEvent) => {
+    if (annotationSettings.canEdit === false) return;
+
+    if (
+      isSelected &&
+      annotationMode !== AnnotationMode.CREATE &&
+      e.button === 0
+    )
+      setIsEdgeDragging(true);
+  };
+
+  const onMouseMove = (e: MouseEvent) => {
+    if (isAnnoDragging) {
+      // we always get 4 coordinates (the rectangle corners)
+      // only the top left and bottom right corner are important - other coordinates are redundant
+      const newRectangle: Point[] = [
+        { ...coordinates[0] },
+        { ...coordinates[2] },
+      ];
+
+      // apply mouse move to the rectangle coordinates
+      const movedCoordinates: Point[] = newRectangle.map(
+        (coordinate: Point) => {
+          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),
+          };
+        },
+      );
+
+      // only escalate event when mouse actually moved
+      if (e.movementX !== 0 || e.movementY !== 0) {
+        setDidAnnoActuallyMove(true);
+        onMoving(movedCoordinates);
+      }
+    }
+
+    if (annotationMode === AnnotationMode.CREATE) {
+      const mousePointInStage = mouse2.getAntiScaledMouseStagePosition(
+        e,
+        pageToStageOffset,
+        svgScale,
+      );
+
+      let newCoords: Point[] = [...coordinates];
+
+      // we always get 4 coordinates (the rectangle corners)
+      // only the top left (start) is important - the end will be our mouse position and the others are redundant
+      const newRectangle: Point[] = [newCoords[0], mousePointInStage];
+
+      onMoving(newRectangle);
+    }
+  };
+
+  useEffect(() => {
+    if (!isAnnoCreating) return;
+
+    const handleMouseUp = (e: MouseEvent) => {
+      if (e.button === 2) {
+        onFinishAnnoCreate();
+        setIsAnnoCreating(false);
+      }
+    };
+
+    window.addEventListener("mouseup", handleMouseUp);
+
+    return () => {
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isAnnoCreating]);
+
+  useEffect(() => {
+    onIsDraggingStateChanged(isAnnoDragging);
+    if (!isAnnoDragging) return;
+
+    const handleMouseUp = () => {
+      setIsAnnoDragging(false);
+
+      if (didAnnoActuallyMoveRef.current) onMoved();
+      setDidAnnoActuallyMove(false);
+    };
+
+    window.addEventListener("mouseup", handleMouseUp);
+
+    return () => {
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isAnnoDragging]);
+
+  useEffect(() => {
+    onIsDraggingStateChanged(isEdgeDragging);
+    if (!isEdgeDragging) return;
+
+    const handleMouseUp = () => {
+      setIsEdgeDragging(false);
+
+      if (didAnnoActuallyMoveRef.current) onMoved();
+      setDidAnnoActuallyMove(false);
+    };
+
+    window.addEventListener("mouseup", handleMouseUp);
+
+    return () => {
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isEdgeDragging]);
+
+  const renderNodes = () => {
+    const svgNodes = coordinates.map((coordinate: Point, index: number) => (
+      <Node
+        key={`node_${index}`}
+        index={index}
+        annotationSettings={annotationSettings}
+        coordinates={coordinate}
+        pageToStageOffset={pageToStageOffset}
+        svgScale={svgScale}
+        style={style}
+        onDeleteNode={() => {
+          const newCoordinates = [...coordinates];
+          newCoordinates.splice(index, 1);
+          onDeleteNode(newCoordinates);
+        }}
+        onMoving={(index: number, newPoint: Point) => {
+          // we always get 4 coordinates (the rectangle corners)
+          // only the top left and bottom right corner are important - other coordinates are redundant
+          const newRectangle: Point[] = [coordinates[0], coordinates[2]];
+
+          // update start + end coordinates depending on which corner is moved
+          switch (index) {
+            case 0: // top left corner
+              newRectangle[0] = newPoint;
+              break;
+            case 1: // bottom left corner
+              newRectangle[0].x = newPoint.x;
+              newRectangle[1].y = newPoint.y;
+              break;
+            case 2: // bottom right corner
+              newRectangle[1] = newPoint;
+              break;
+            case 3: // top right corner
+              newRectangle[1].x = newPoint.x;
+              newRectangle[0].y = newPoint.y;
+              break;
+          }
+
+          onMoving(newRectangle);
+        }}
+        onMoved={() => onMoved()}
+        onIsDraggingStateChanged={onIsDraggingStateChanged}
+      />
+    ));
+
+    return svgNodes;
+  };
+
+  const moveEdge = (edgeIndex: number, e: MouseEvent) => {
+    // we always get 4 coordinates (the rectangle corners)
+    // only the top left and bottom right corner are important - other coordinates are redundant
+    const newRectangle: Point[] = [coordinates[0], coordinates[2]];
+    switch (edgeIndex) {
+      case 0:
+        newRectangle[0].x += e.movementX / svgScale;
+        break;
+      case 1:
+        newRectangle[1].y += e.movementY / svgScale;
+        break;
+      case 2:
+        newRectangle[1].x += e.movementX / svgScale;
+        break;
+      case 3:
+        newRectangle[0].y += e.movementY / svgScale;
+        break;
+    }
+
+    // only escalate event when mouse actually moved
+    if (e.movementX !== 0 || e.movementY !== 0) {
+      setDidAnnoActuallyMove(true);
+      onMoving(newRectangle);
+    }
+  };
+
+  const renderEdges = () => {
+    const svgEdges = coordinates.map((coordinate: Point, index: number) => {
+      const endCoordinates: Point =
+        index + 1 < coordinates.length
+          ? coordinates[index + 1]
+          : coordinates[0];
+
+      // corresponding cursor for horizontal or vertical edges
+      const cursor = index % 2 === 0 ? "ew-resize" : "ns-resize";
+
+      return (
+        <Edge
+          key={`edge_${index}`}
+          startCoordinate={coordinate}
+          endCoordinate={endCoordinates}
+          pageToStageOffset={pageToStageOffset}
+          svgScale={svgScale}
+          style={{ ...style, cursor }}
+          onMouseDown={onMouseEdgeDown}
+          onMouseMove={(e: MouseEvent) => {
+            setDragSelectedEdgeIndex(index);
+            isEdgeDragging && moveEdge(index, e);
+          }}
+        />
+      );
+    });
+    return svgEdges;
+  };
+
+  const renderInfiniteSelectionArea = (isForEdge: boolean) => {
+    return (
+      <circle
+        cx={coordinates[0].x}
+        cy={coordinates[0].y}
+        r={"100%"}
+        style={{ opacity: 0 }}
+        onMouseDown={onMouseDown}
+        onMouseMove={(e: MouseEvent) => {
+          isForEdge && isEdgeDragging && moveEdge(dragSelectedEdgeIndex, e);
+          !isForEdge && onMouseMove(e);
+        }}
+        onContextMenu={(e) => e.preventDefault()}
+      />
+    );
+  };
+
+  return (
+    <g>
+      {(isAnnoDragging || annotationMode === AnnotationMode.CREATE) &&
+        renderInfiniteSelectionArea(false)}
+      <PolygonArea
+        annotationSettings={annotationSettings}
+        coordinates={coordinates}
+        isSelected={isSelected}
+        annotationMode={annotationMode}
+        pageToStageOffset={pageToStageOffset}
+        style={style}
+        svgScale={svgScale}
+        onIsDraggingStateChanged={onIsDraggingStateChanged}
+        onMouseDown={onMouseDown}
+        onMouseMove={onMouseMove}
+      />
+      {isEdgeDragging && renderInfiniteSelectionArea(true)}
+      {isSelected && annotationSettings.canEdit && renderEdges()}
+      {isSelected && annotationMode !== AnnotationMode.CREATE && renderNodes()}
+    </g>
+  );
+};
+
+export default BBox;