Merge remote-tracking branch 'origin/feature/fix-react-instances'

Author: yasenytskyoleh

.gitignore

@@ -28,3 +28,4 @@ dist
 secret.*
 secret.story.*
 *.secret.*
+.idea

.idea/react-image-annotate.iml

@@ -1,5 +1,5 @@
 {
-  "name": "react-image-annotate",
+  "name": "@idapgroup/react-image-annotate",
   "version": "2.0.0",
   "type": "module",
   "main": "dist/react-image-annotate.js",
@@ -13,33 +13,29 @@
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@mui/icons-material": "^5.2.1",
-    "@mui/material": "^5.2.3",
-    "@mui/styles": "^5.2.3",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@mui/icons-material": "^5.15.14",
+    "@mui/material": "^5.15.14",
     "autoseg": "^0.0.12",
+    "classnames": "^2.5.1",
     "color-alpha": "^2.0.0",
     "lodash": "^4.17.21",
-    "material-survey": "^2.1.0",
     "moment": "^2.30.0",
     "monaco-editor": "^0.47.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-full-screen": "^1.1.1",
     "react-hotkeys": "^2.0.0",
     "react-markdown": "^9.0.0",
-    "react-material-workspace-layout": "^1.0.10",
     "react-monaco-editor": "^0.55.0",
     "react-remove-scroll": "^2.0.4",
     "react-select": "^5.8.0",
     "react-syntax-highlighter": "^15.5.0",
     "react-use": "^17.5.0",
     "react-use-measure": "^2.0.0",
     "seamless-immutable": "^7.1.4",
-    "styled-components": "^5.2.1",
     "transformation-matrix-js": "^2.7.6",
-    "use-event-callback": "^0.1.0",
-    "use-key-hook": "^1.3.0"
+    "tss-react": "^4.9.6",
+    "use-event-callback": "^0.1.0"
   },
   "devDependencies": {
     "@rollup/plugin-replace": "^5.0.5",
@@ -50,6 +46,7 @@
     "@types/react-select": "^5.0.1",
     "@types/react-syntax-highlighter": "^15.5.11",
     "@types/seamless-immutable": "^7.1.4",
+    "@vitejs/plugin-react": "^4.2.1",
     "cpy-cli": "^5.0.0",
     "cross-env": "^7.0.3",
     "gh-pages": "^2.0.1",
@@ -63,17 +60,16 @@
     "vite-tsconfig-paths": "^4.3.2"
   },
   "peerDependencies": {
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/UniversalDataTool/react-image-annotate.git"
+    "url": "https://github.com/idapgroup/react-image-annotate"
   },
   "scripts": {
     "start": "vite",
     "build": "tsc && vite build",
-    "publish": "npm run build && cd dist && npm publish",
     "prettier": "prettier --write \"src/**/*.js\"",
     "prettier:test": "prettier --check \"src/**/*.js\""
   },

package.json

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import Button from "@mui/material/Button";
-import { makeStyles } from "@mui/styles";
+import { tss } from "tss-react/mui";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 import Select from "react-select";
 import Code from "react-syntax-highlighter";
@@ -14,7 +14,7 @@ import MonacoEditor from "react-monaco-editor";
 import { AnnotatorProps } from "../Annotator";
 
 const theme = createTheme();
-const useStyles = makeStyles(() => ({
+const useStyles = tss.create(() => ({
   editBar: {
     padding: 10,
     borderBottom: "1px solid #ccc",
@@ -132,7 +132,7 @@ export const examples: Record<string, () => Omit<AnnotatorProps, "onExit">> = {
 };
 
 const Editor = ({ onOpenAnnotator, lastOutput }: any) => {
-  const c = useStyles();
+  const { classes } = useStyles();
   const [currentError, changeCurrentError] = useState<string | null>(null);
   const [selectedExample, changeSelectedExample] = useState(
     window.localStorage.getItem("customInput") ? "Custom" : "FULL"
@@ -144,13 +144,13 @@ const Editor = ({ onOpenAnnotator, lastOutput }: any) => {
   return (
     <ThemeProvider theme={theme}>
       <div>
-        <div className={c.editBar}>
+        <div className={classes.editBar}>
           <h3>React Image Annotate</h3>
           <div style={{ flexGrow: 1 }} />
           <div>
             <div style={{ display: "inline-flex" }}>
               <Select
-                className={c.select}
+                className={classes.select}
                 value={{ label: selectedExample, value: selectedExample }}
                 options={Object.keys(examples).map((s) => ({
                   label: s,
@@ -196,7 +196,7 @@ const Editor = ({ onOpenAnnotator, lastOutput }: any) => {
           </div>
         </div>
         <div
-          className={c.contentArea}
+          className={classes.contentArea}
           style={
             currentError
               ? { border: "2px solid #f00" }
@@ -224,7 +224,7 @@ const Editor = ({ onOpenAnnotator, lastOutput }: any) => {
             />
           </div>
         </div>
-        <div className={c.specificationArea}>
+        <div className={classes.specificationArea}>
           <h2>React Image Annotate Format</h2>
           <Code language="javascript">{`
 {

src/DemoSite/Editor.tsx

@@ -1,13 +1,13 @@
 // @flow
 
 import classnames from "classnames";
-import { makeStyles } from "@mui/styles";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 import type { Point, Region } from "../ImageCanvas/region-tools.tsx";
 import { MouseEvents } from "../ImageCanvas/use-mouse.ts";
+import { tss } from "tss-react/mui";
 
 const theme = createTheme();
-const useStyles = makeStyles(() => ({
+const useStyles = tss.create(() => ({
   "@keyframes borderDance": {
     from: { strokeDashoffset: 0 },
     to: { strokeDashoffset: 100 },
@@ -58,7 +58,7 @@ export const HighlightBox = ({
   region: Region;
   pbox: { x: number; y: number; w: number; h: number };
 }) => {
-  const classes = useStyles();
+  const { classes } = useStyles();
   if (!pbox.w || pbox.w === Infinity) return null;
   if (!pbox.h || pbox.h === Infinity) return null;
   if (r.type === "expanding-line" && r.unfinished) return null;

src/HighlightBox/index.tsx

@@ -1,7 +1,6 @@
 // @flow
 
 import { memo } from "react";
-import { makeStyles } from "@mui/styles";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 import SidebarBoxContainer from "../SidebarBoxContainer";
 import HistoryIcon from "@mui/icons-material/History";
@@ -14,17 +13,18 @@ import UndoIcon from "@mui/icons-material/Undo";
 import moment from "moment";
 import { grey } from "@mui/material/colors";
 import isEqual from "lodash/isEqual";
+import { tss } from "tss-react/mui";
 
 const theme = createTheme();
-const useStyles = makeStyles(() => ({
+const useStyles = tss.create({
   emptyText: {
     fontSize: 14,
     fontWeight: "bold",
     color: grey[500],
     textAlign: "center",
     padding: 20,
   },
-}));
+});
 
 const listItemTextStyle = { paddingLeft: 16 };
 
@@ -35,7 +35,7 @@ export const HistorySidebarBox = ({
   history: Array<{ name: string; time: Date }>;
   onRestoreHistory: () => void;
 }) => {
-  const classes = useStyles();
+  const { classes } = useStyles();
 
   return (
     <ThemeProvider theme={theme}>

src/HistorySidebarBox/index.tsx

@@ -19,9 +19,7 @@ import type {
   Polygon,
   Region,
 } from "./region-tools";
-import { makeStyles } from "@mui/styles";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
-import styles from "./styles";
 import PreventScrollToParents from "../PreventScrollToParents";
 import useWindowSize from "../hooks/use-window-size.tsx";
 import useMouse from "./use-mouse";
@@ -39,9 +37,34 @@ import RegionShapes from "../RegionShapes";
 import useWasdMode from "./use-wasd-mode";
 import { ImagePosition } from "../types/common.ts";
 import { AutosegOptions } from "autoseg/webworker";
+import { tss } from "tss-react/mui";
 
 const theme = createTheme();
-const useStyles = makeStyles(styles);
+const useStyles = tss.create({
+  canvas: { width: "100%", height: "100%", position: "relative", zIndex: 1 },
+  zoomIndicator: {
+    position: "absolute",
+    bottom: 16,
+    right: 0,
+    backgroundColor: "rgba(0,0,0,0.4)",
+    color: "#fff",
+    opacity: 0.5,
+    fontWeight: "bolder",
+    fontSize: 14,
+    padding: 4,
+  },
+  fixedRegionLabel: {
+    position: "absolute",
+    zIndex: 10,
+    top: 10,
+    left: 10,
+    opacity: 0.5,
+    transition: "opacity 500ms",
+    "&:hover": {
+      opacity: 1,
+    },
+  },
+});
 
 type Props = {
   regions: Array<Region>;
@@ -163,7 +186,7 @@ export const ImageCanvas = ({
   keypointDefinitions,
   allowComments,
 }: Props) => {
-  const classes = useStyles();
+  const { classes } = useStyles();
   const canvasEl = useRef<HTMLCanvasElement | null>(null);
   const layoutParams = useRef<CanvasLayoutParams | null>(null);
   const [dragging, changeDragging] = useRafState(false);

src/ImageCanvas/index.tsx

@@ -1,11 +1,7 @@
 import getHotkeyHelpText from "../utils/get-hotkey-help-text.ts";
-import { ToolEnum } from "./types.ts";
+import { IconSidebarItem } from "../types/common.ts";
 
-export const ALL_TOOLS: {
-  name: ToolEnum;
-  helperText: string;
-  alwaysShowing?: boolean;
-}[] = [
+export const ALL_TOOLS: IconSidebarItem[] = [
   {
     name: "select",
     helperText: "Select" + getHotkeyHelpText("select_tool"),

src/ImageCanvas/styles.ts

@@ -16,11 +16,15 @@ import {
   faTag,
   faVectorSquare,
 } from "@fortawesome/free-solid-svg-icons";
-import { ReactElement } from "react";
+import { OverridableComponent } from "@mui/material/OverridableComponent";
+import { SvgIconTypeMap } from "@mui/material";
 
 const faStyle = { marginTop: 4, width: 16, height: 16, marginBottom: 4 };
 
-export const iconDictionary: Record<string, () => ReactElement> = {
+export const iconDictionary: Record<
+  string,
+  OverridableComponent<SvgIconTypeMap>
+> = {
   select: () => (
     <FontAwesomeIcon
       style={faStyle}