Merge remote-tracking branch 'origin/feature/region-classlist'

yasenytskyoleh · yasenytskyoleh · commit bc6ae8034221 · 2024-04-15T15:14:19.000+03:00
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,4 @@
+.idea
+.github
+node_modules
+src
diff --git a/package.json b/package.json
@@ -2,8 +2,8 @@
   "name": "react-image-annotate",
   "version": "2.0.0",
   "type": "module",
-  "main": "dist/main.js",
-  "types": "dist/main.d.ts",
+  "main": "dist/react-image-annotate.js",
+  "types": "dist/lib.d.ts",
   "files": [
     "dist"
   ],
@@ -23,8 +23,8 @@
     "material-survey": "^2.1.0",
     "moment": "^2.30.0",
     "monaco-editor": "^0.47.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-full-screen": "^1.1.1",
     "react-hotkeys": "^2.0.0",
     "react-markdown": "^9.0.0",
@@ -63,10 +63,9 @@
     "vite-tsconfig-paths": "^4.3.2"
   },
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
-  "homepage": "/react-image-annotate",
   "repository": {
     "type": "git",
     "url": "https://github.com/UniversalDataTool/react-image-annotate.git"
diff --git a/src/Annotator/index.tsx b/src/Annotator/index.tsx
@@ -1,6 +1,6 @@
 // @flow
 
-import type { Action, Image, MainLayoutState } from "../MainLayout/types";
+import { Action, Image, MainLayoutState, ToolEnum } from "../MainLayout/types";
 import { ComponentType, FunctionComponent, useEffect, useReducer } from "react";
 import Immutable, { ImmutableObject } from "seamless-immutable";
 
@@ -20,10 +20,10 @@ export type AnnotatorProps = {
   taskDescription?: string;
   allowedArea?: { x: number; y: number; w: number; h: number };
   regionTagList?: Array<string>;
-  regionClsList?: Array<string>;
+  regionClsList?: Array<string | { id: string; label: string }>;
   imageTagList?: Array<string>;
   imageClsList?: Array<string>;
-  enabledTools?: Array<string>;
+  enabledTools?: Array<ToolEnum>;
   selectedTool?: String;
   showTags?: boolean;
   selectedImage?: string | number;
@@ -191,7 +191,7 @@ export const Annotator = ({
   }, [selectedImage, state.annotationType, state.images]);
 
   if (!images && !videoSrc)
-    return 'Missing required prop "images" or "videoSrc"';
+    return <div>Missing required prop "images" or "videoSrc"</div>;
 
   return (
     <SettingsProvider>
diff --git a/src/Annotator/reducers/general-reducer.ts b/src/Annotator/reducers/general-reducer.ts
@@ -35,9 +35,13 @@ export default <T extends ImmutableObject<MainLayoutState>>(
 
   if (action.type === "ON_CLS_ADDED" && !!action.cls) {
     const oldRegionClsList = state.regionClsList;
+    const isStringRegionClsList = oldRegionClsList?.every(
+      (cls) => typeof cls === "string"
+    );
+    if (!isStringRegionClsList) return state;
     return {
       ...state,
-      regionClsList: oldRegionClsList?.concat(action.cls),
+      regionClsList: ((oldRegionClsList || []) as string[]).concat(action.cls),
     };
   }
 
@@ -148,7 +152,11 @@ export default <T extends ImmutableObject<MainLayoutState>>(
       if (oldRegion?.cls !== action.region.cls) {
         state = saveToHistory(state, "Change Region Classification") as T;
         const clsIndex = action.region.cls
-          ? state.regionClsList?.indexOf(action.region.cls)
+          ? state.regionClsList?.findIndex((cls) =>
+              typeof cls === "string"
+                ? cls === action.region.cls
+                : cls.id === action.region.cls
+            )
           : undefined;
         if (clsIndex !== undefined && clsIndex !== -1) {
           state = Immutable(state).setIn(
@@ -631,10 +639,13 @@ export default <T extends ImmutableObject<MainLayoutState>>(
       let newRegion;
       let defaultRegionCls = state.selectedCls,
         defaultRegionColor = "#ff0000";
-
       const clsIndex =
         defaultRegionCls && state.regionClsList
-          ? state.regionClsList.indexOf(defaultRegionCls)
+          ? state.regionClsList.findIndex((cls) =>
+              typeof cls === "string"
+                ? cls === defaultRegionCls
+                : cls.id === defaultRegionCls
+            )
           : -1;
       if (clsIndex !== -1) {
         defaultRegionColor = colors[clsIndex % colors.length];
@@ -745,7 +756,6 @@ export default <T extends ImmutableObject<MainLayoutState>>(
             return state;
           }
           state = saveToHistory(state, "Create Keypoints") as T;
-          console.log(state.keypointDefinitions);
           const [[keypointsDefinitionId, { landmarks }]] = Object.entries(
             state.keypointDefinitions
           );
diff --git a/src/ClassSelectionMenu/index.tsx b/src/ClassSelectionMenu/index.tsx
@@ -52,10 +52,14 @@ const Number = styled("div")(() => ({
   color: muiColors.grey[700],
 }));
 
+const getRegionValue = (item: string | { id: string; label: string }) => {
+  return typeof item === "string" ? item : item.id;
+};
+
 interface ClassSelectionMenuProps {
   selectedCls?: string;
-  regionClsList: string[];
-  onSelectCls: (label?: string) => void;
+  regionClsList: (string | { id: string; label: string })[];
+  onSelectCls: (value: string) => void;
 }
 
 export const ClassSelectionMenu = ({
@@ -64,9 +68,15 @@ export const ClassSelectionMenu = ({
   onSelectCls,
 }: ClassSelectionMenuProps) => {
   useEffect(() => {
-    const keyMapping: Record<string, (label?: string) => void> = {};
+    const keyMapping: Record<
+      string,
+      (item?: string | { id: string; label: string }) => void
+    > = {};
     for (let i = 0; i < 9 && i < regionClsList.length; i++) {
-      keyMapping[i + 1] = () => onSelectCls(regionClsList[i]);
+      keyMapping[i + 1] = () => {
+        const item = regionClsList[i];
+        onSelectCls(getRegionValue(item));
+      };
     }
     const onKeyDown = (e: KeyboardEvent) => {
       if (keyMapping[e.key]) {
@@ -86,19 +96,29 @@ export const ClassSelectionMenu = ({
         icon={<BallotIcon style={{ color: muiColors.grey[700] }} />}
         expandedByDefault
       >
-        {regionClsList.map((label, index) => (
+        {regionClsList.map((item, index) => (
           <LabelContainer
-            className={classnames({ selected: label === selectedCls })}
-            onClick={() => onSelectCls(label)}
+            className={classnames({
+              selected: getRegionValue(item) === selectedCls,
+            })}
+            onClick={() => onSelectCls(getRegionValue(item))}
           >
             <Circle
               style={{ backgroundColor: colors[index % colors.length] }}
             />
-            <Label className={classnames({ selected: label === selectedCls })}>
-              {capitalize(label)}
+            <Label
+              className={classnames({
+                selected: getRegionValue(item) === selectedCls,
+              })}
+            >
+              {capitalize(typeof item === "string" ? item : item.label)}
             </Label>
             <DashSep />
-            <Number className={classnames({ selected: label === selectedCls })}>
+            <Number
+              className={classnames({
+                selected: getRegionValue(item) === selectedCls,
+              })}
+            >
               {index < 9 ? `Key [${index + 1}]` : ""}
             </Number>
           </LabelContainer>
diff --git a/src/DemoSite/Editor.tsx b/src/DemoSite/Editor.tsx
@@ -45,7 +45,10 @@ export const examples: Record<string, () => Omit<AnnotatorProps, "onExit">> = {
     taskDescription:
       "Annotate each image according to this _markdown_ specification.",
     regionTagList: ["has-bun"],
-    regionClsList: ["hotdog", "not-hotdog"],
+    regionClsList: [
+      { id: "1", label: "hotdog" },
+      { id: "2", label: "not-hotdog" },
+    ],
     enabledTools: [
       "select",
       "create-point",
diff --git a/src/ImageCanvas/index.tsx b/src/ImageCanvas/index.tsx
@@ -62,7 +62,7 @@ type Props = {
   showHighlightBox?: boolean;
   showPointDistances?: boolean;
   pointDistancePrecision?: number;
-  regionClsList?: Array<string>;
+  regionClsList?: Array<string> | Array<{ id: string; label: string }>;
   regionTagList?: Array<string>;
   allowedArea?: { x: number; y: number; w: number; h: number };
   RegionEditLabel?: ComponentType<any> | FunctionComponent<any> | null;
@@ -72,10 +72,10 @@ type Props = {
   autoSegmentationOptions?: AutosegOptions;
   modifyingAllowedArea?: boolean;
   allowComments?: boolean;
-  onChangeRegion: (region: Region) => any;
-  onBeginRegionEdit: (region: Region) => any;
-  onCloseRegionEdit: (region: Region) => any;
-  onDeleteRegion: (region: Region) => any;
+  onChangeRegion: (region: Region) => void;
+  onBeginRegionEdit: (region: Region) => void;
+  onCloseRegionEdit: (region: Region) => void;
+  onDeleteRegion: (region: Region) => void;
   onBeginBoxTransform: (region: Box, point: [number, number]) => void;
   onBeginMovePolygonPoint: (region: Polygon, index: number) => void;
   onBeginMoveKeypoint: (region: Keypoints, keypointId: string) => void;
@@ -481,7 +481,9 @@ export const ImageCanvas = ({
               hide={!showMask}
               autoSegmentationOptions={autoSegmentationOptions}
               imagePosition={imagePosition}
-              regionClsList={regionClsList}
+              regionClsList={regionClsList?.map((c) =>
+                typeof c === "string" ? c : c.id
+              )}
               imageSrc={imageSrc}
               regions={regions}
             />
diff --git a/src/MainLayout/index.tsx b/src/MainLayout/index.tsx
@@ -339,6 +339,7 @@ export const MainLayout = ({
       />
     ),
     <RegionSelector
+      regionClsList={state.regionClsList}
       regions={activeImage ? activeImage.regions : []}
       onSelectRegion={action("SELECT_REGION", "region")}
       onDeleteRegion={action("DELETE_REGION", "region")}
diff --git a/src/MainLayout/types.ts b/src/MainLayout/types.ts
@@ -21,7 +21,6 @@ export type ToolEnum =
   | "create-pixel"
   | "create-expanding-line"
   | "create-keypoints"
-  // TODO: check, added new types
   | "modify-allowed-area"
   | "create-line"
   | "show-tags"
@@ -101,11 +100,11 @@ export type MainLayoutStateBase = {
   mode: Mode;
   taskDescription: string;
   allowedArea?: { x: number; y: number; w: number; h: number };
-  regionClsList?: Array<string>;
+  regionClsList?: Array<string> | Array<{ id: string; label: string }>;
   regionTagList?: Array<string>;
   imageClsList?: Array<string>;
   imageTagList?: Array<string>;
-  enabledTools: Array<string>;
+  enabledTools: Array<ToolEnum>;
   history: Array<{ time: Date; state: MainLayoutState; name: string }>;
   keypointDefinitions: KeypointsDefinition;
   allowComments?: boolean;
diff --git a/src/RegionLabel/index.tsx b/src/RegionLabel/index.tsx
@@ -23,7 +23,7 @@ const useStyles = makeStyles(styles);
 type Props = {
   region: Region;
   editing?: boolean;
-  allowedClasses?: Array<string>;
+  allowedClasses?: Array<string> | Array<{ id: string; label: string }>;
   allowedTags?: Array<string>;
   cls?: string;
   tags?: Array<string>;
@@ -57,6 +57,21 @@ export const RegionLabel = ({
     if (commentInput) return commentInput.focus();
   };
 
+  const isCreatableAllowedClasses = typeof allowedClasses?.[0] === "string";
+  const selectedRegionClass =
+    allowedClasses?.find((c) => typeof c === "object" && c.id === region.cls) ||
+    region.cls;
+  const selectedLabel =
+    selectedRegionClass && typeof selectedRegionClass === "object"
+      ? selectedRegionClass.label
+      : region.cls;
+  const selectedValue =
+    selectedRegionClass && typeof selectedRegionClass === "object"
+      ? { label: selectedRegionClass.label, value: selectedRegionClass.id }
+      : region.cls
+      ? { label: region.cls, value: region.cls }
+      : null;
+
   return (
     <ThemeProvider theme={theme}>
       <Paper
@@ -73,7 +88,7 @@ export const RegionLabel = ({
                   className="circle"
                   style={{ backgroundColor: region.color }}
                 />
-                {region.cls}
+                {selectedLabel}
               </div>
             )}
             {region.tags && (
@@ -116,36 +131,59 @@ export const RegionLabel = ({
             </div>
             {(allowedClasses || []).length > 0 && (
               <div style={{ marginTop: 6 }}>
-                <CreatableSelect
-                  placeholder="Classification"
-                  onChange={(o, actionMeta) => {
-                    if (!o) return;
-                    if (
-                      actionMeta.action == "create-option" &&
-                      onRegionClassAdded
-                    ) {
-                      onRegionClassAdded(o.value);
-                    }
-                    // TODO: check if this is correct after update source
-                    onChange({
-                      ...region,
-                      cls: o.value,
-                    });
-                  }}
-                  value={
-                    region.cls ? { label: region.cls, value: region.cls } : null
-                  }
-                  options={asMutable(
-                    allowedClasses?.map((c) => ({ value: c, label: c }))
-                  )}
-                />
+                {isCreatableAllowedClasses ? (
+                  <CreatableSelect
+                    placeholder="Classification"
+                    onChange={(o, actionMeta) => {
+                      if (!o) return;
+                      if (
+                        actionMeta.action == "create-option" &&
+                        onRegionClassAdded
+                      ) {
+                        onRegionClassAdded(o.value);
+                      }
+                      onChange({
+                        ...region,
+                        cls: o.value,
+                      });
+                    }}
+                    value={selectedValue}
+                    options={asMutable(
+                      allowedClasses?.map((c) => {
+                        if (typeof c === "string") {
+                          return { value: c, label: c };
+                        }
+                        return { value: c.id, label: c.label };
+                      })
+                    )}
+                  />
+                ) : (
+                  <Select
+                    placeholder="Classification"
+                    onChange={(o) => {
+                      if (!o) return;
+                      onChange({
+                        ...region,
+                        cls: o.value,
+                      });
+                    }}
+                    value={selectedValue}
+                    options={asMutable(
+                      allowedClasses?.map((c) => {
+                        if (typeof c === "string") {
+                          return { value: c, label: c };
+                        }
+                        return { value: c.id, label: c.label };
+                      })
+                    )}
+                  />
+                )}
               </div>
             )}
             {(allowedTags || []).length > 0 && (
               <div style={{ marginTop: 4 }}>
                 <Select
                   onChange={(newTags) =>
-                    // TODO: check if this is correct after update source
                     onChange({
                       ...region,
                       tags: newTags.map((t) => t.value),
diff --git a/src/RegionSelectorSidebarBox/index.tsx b/src/RegionSelectorSidebarBox/index.tsx
diff --git a/src/RegionTags/index.tsx b/src/RegionTags/index.tsx
diff --git a/src/TagsSidebarBox/index.tsx b/src/TagsSidebarBox/index.tsx
diff --git a/vite.config.ts b/vite.config.ts
diff --git a/yarn.lock b/yarn.lock

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +.idea
 +.github
 +node_modules
 +src