Merge remote-tracking branch 'origin/feature/typescript'

Author: yasenytskyoleh

package.json

@@ -2,6 +2,11 @@
   "name": "react-image-annotate",
   "version": "2.0.0",
   "type": "module",
+  "main": "dist/main.js",
+  "types": "dist/main.d.ts",
+  "files": [
+    "dist"
+  ],
   "dependencies": {
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
@@ -11,11 +16,9 @@
     "@mui/icons-material": "^5.2.1",
     "@mui/material": "^5.2.3",
     "@mui/styles": "^5.2.3",
-    "@semantic-release/git": "^9.0.0",
     "@vitejs/plugin-react": "^4.2.1",
     "autoseg": "^0.0.12",
     "color-alpha": "^2.0.0",
-    "get-image-data": "^5.0.0",
     "lodash": "^4.17.21",
     "material-survey": "^2.1.0",
     "moment": "^2.30.0",
@@ -24,7 +27,6 @@
     "react-dom": "^18.0.2",
     "react-full-screen": "^1.1.1",
     "react-hotkeys": "^2.0.0",
-    "react-json-view": "^1.19.1",
     "react-markdown": "^9.0.0",
     "react-material-workspace-layout": "^1.0.10",
     "react-monaco-editor": "^0.55.0",
@@ -53,9 +55,9 @@
     "gh-pages": "^2.0.1",
     "prettier": "^2.5.1",
     "react-github-btn": "^1.1.1",
-    "shx": "^0.3.4",
     "typescript": "^5.2.2",
     "vite": "^5.2.7",
+    "vite-plugin-dts": "^3.8.1",
     "vite-plugin-node-polyfills": "^0.21.0",
     "vite-raw-plugin": "^1.0.2",
     "vite-tsconfig-paths": "^4.3.2"
@@ -72,7 +74,7 @@
   "scripts": {
     "start": "vite",
     "build": "tsc && vite build",
-    "dist": "npm run build && cd dist && npm publish",
+    "publish": "npm run build && cd dist && npm publish",
     "prettier": "prettier --write \"src/**/*.js\"",
     "prettier:test": "prettier --check \"src/**/*.js\""
   },

src/Annotator/index.tsx

@@ -1,8 +1,8 @@
 // @flow
 
 import type { Action, Image, MainLayoutState } from "../MainLayout/types";
-import { useEffect, useReducer } from "react";
-import Immutable from "seamless-immutable";
+import { ComponentType, FunctionComponent, useEffect, useReducer } from "react";
+import Immutable, { ImmutableObject } from "seamless-immutable";
 
 import type { KeypointsDefinition } from "../ImageCanvas/region-tools";
 import MainLayout from "../MainLayout";
@@ -30,8 +30,8 @@ export type AnnotatorProps = {
   images?: Array<Image>;
   showPointDistances?: boolean;
   pointDistancePrecision?: number;
-  RegionEditLabel?: Node;
-  onExit: (state: MainLayoutState) => any;
+  RegionEditLabel?: ComponentType<any> | FunctionComponent<any> | null;
+  onExit: (state: MainLayoutState) => void;
   videoTime?: number;
   videoSrc?: string;
   keyframes?: Object;
@@ -102,58 +102,71 @@ export const Annotator = ({
     if (selectedImage === -1) selectedImage = undefined;
   }
   const annotationType = images ? "image" : "video";
-  const [state, dispatchToReducer] = useReducer(
-    historyHandler(
-      combineReducers(
-        annotationType === "image" ? imageReducer : videoReducer,
-        generalReducer
-      )
-    ),
-    Immutable({
-      annotationType,
-      showTags,
-      allowedArea,
-      showPointDistances,
-      pointDistancePrecision,
-      selectedTool,
-      fullImageSegmentationMode: fullImageSegmentationMode,
-      autoSegmentationOptions,
-      mode: null,
-      taskDescription,
-      showMask: true,
-      labelImages: imageClsList.length > 0 || imageTagList.length > 0,
-      regionClsList,
-      regionTagList,
-      imageClsList,
-      imageTagList,
-      currentVideoTime: videoTime,
-      enabledTools,
-      history: [],
-      videoName,
-      keypointDefinitions,
-      allowComments,
-      ...(annotationType === "image"
-        ? {
-            selectedImage,
-            images,
-            selectedImageFrameTime:
-              images && images.length > 0 ? images[0].frameTime : undefined,
-          }
-        : {
-            videoSrc,
-            keyframes,
-          }),
-    })
+  const combinedReducers = (
+    annotationType === "image"
+      ? combineReducers(imageReducer, generalReducer)
+      : combineReducers(videoReducer, generalReducer)
+  ) as (
+    state: ImmutableObject<MainLayoutState>,
+    action: Action
+  ) => ImmutableObject<MainLayoutState>;
+
+  const immutableState = Immutable({
+    annotationType,
+    showTags,
+    allowedArea,
+    showPointDistances,
+    pointDistancePrecision,
+    selectedTool,
+    fullImageSegmentationMode: fullImageSegmentationMode,
+    autoSegmentationOptions,
+    mode: null,
+    taskDescription,
+    showMask: true,
+    labelImages: imageClsList.length > 0 || imageTagList.length > 0,
+    regionClsList,
+    regionTagList,
+    imageClsList,
+    imageTagList,
+    currentVideoTime: videoTime,
+    enabledTools,
+    history: [],
+    videoName,
+    keypointDefinitions,
+    allowComments,
+    ...(annotationType === "image"
+      ? {
+          selectedImage,
+          images,
+          selectedImageFrameTime:
+            images && images.length > 0 ? images[0].frameTime : undefined,
+        }
+      : {
+          videoSrc,
+          keyframes,
+        }),
+  });
+  const [state, dispatchToReducer] = useReducer<
+    (state: MainLayoutState, action: Action) => MainLayoutState
+  >(
+    historyHandler(combinedReducers) as unknown as (
+      state: MainLayoutState,
+      action: Action
+    ) => MainLayoutState,
+    immutableState as unknown as MainLayoutState
   );
 
   const dispatch = useEventCallback((action: Action) => {
     if (action.type === "HEADER_BUTTON_CLICKED") {
+      const value = (Immutable(state) as ImmutableObject<MainLayoutState>)
+        .without("history")
+        .asMutable({ deep: true });
       if (["Exit", "Done", "Save", "Complete"].includes(action.buttonName)) {
-        return onExit(Immutable(state).without("history"));
+        return onExit(value);
       } else if (action.buttonName === "Next" && onNextImage) {
-        return onNextImage(Immutable(state).without("history"));
+        return onNextImage(value);
       } else if (action.buttonName === "Prev" && onPrevImage) {
-        return onPrevImage(Immutable(state).without("history"));
+        return onPrevImage(value);
       }
     }
     dispatchToReducer(action);
@@ -167,13 +180,15 @@ export const Annotator = ({
   });
 
   useEffect(() => {
-    if (selectedImage === undefined) return;
+    if (selectedImage === undefined || state.annotationType !== "image") return;
+    const image = state.images[selectedImage];
     dispatchToReducer({
       type: "SELECT_IMAGE",
       imageIndex: +selectedImage,
-      image: state.images[selectedImage],
+      image,
     });
-  }, [selectedImage, state.images]);
+    // @ts-ignore
+  }, [selectedImage, state.annotationType, state.images]);
 
   if (!images && !videoSrc)
     return 'Missing required prop "images" or "videoSrc"';

src/Annotator/reducers/combine-reducers.ts

@@ -1,7 +1,12 @@
-export default (...reducers) =>
-  (state, action) => {
+import { Action, MainLayoutStateBase } from "../../MainLayout/types.ts";
+import { ImmutableObject } from "seamless-immutable";
+
+export default <T extends ImmutableObject<MainLayoutStateBase>>(
+    ...reducers: ((state: T, action: Action) => T)[]
+  ) =>
+  (state: T, action: Action) => {
     for (const reducer of reducers) {
-      state = reducer(state, action)
+      state = reducer(state, action);
     }
-    return state
-  }
+    return state;
+  };

src/Annotator/reducers/convert-expanding-line-to-polygon.ts

@@ -1,8 +1,10 @@
 // @flow
 
 import { clamp } from "../../utils/clamp";
+import { ExpandingLine } from "../../ImageCanvas/region-tools.tsx";
+import Immutable from "seamless-immutable";
 
-export default (expandingLine) => {
+export default (expandingLine: ExpandingLine) => {
   const expandingWidth = expandingLine.expandingWidth || 0.005;
   const pointPairs = expandingLine.points.map(({ x, y, angle, width }, i) => {
     if (!angle) {
@@ -19,8 +21,8 @@ export default (expandingLine) => {
       { x: x - dx, y: y - dy },
     ];
   });
-  const firstSection = pointPairs.map(([p1, p2]) => p1);
-  const secondSection = pointPairs.map(([p1, p2]) => p2).asMutable();
+  const firstSection = pointPairs.map(([p1]) => p1);
+  const secondSection = Immutable.asMutable(pointPairs.map(([_, p2]) => p2));
   secondSection.reverse();
 
   const newPoints = firstSection

src/Annotator/reducers/fix-twisted.ts

@@ -1,6 +1,8 @@
 // @flow
 
-export default (pointsWithAngles) => {
+import { ExpandingLine } from "../../ImageCanvas/region-tools.tsx";
+
+export default (pointsWithAngles: ExpandingLine["points"]) => {
   // Adjacent angles should not have an angular distance of more than Math.PI
-  return pointsWithAngles
-}
+  return pointsWithAngles;
+};