added button click handler ref, to click button from outside

Author: aman1tagic

src/Annotator/index.tsx

@@ -5,10 +5,10 @@ import {
   MainLayoutState,
   RegionAllowedActions,
 } from "../MainLayout/types.ts";
-import { ComponentType, FunctionComponent, useEffect, useReducer } from "react";
+import { ComponentType, forwardRef, FunctionComponent, useEffect, useImperativeHandle, useReducer, useRef } from "react";
 
 import type { KeypointsDefinition } from "../types/region-tools.ts";
-import MainLayout from "../MainLayout/index.tsx";
+import MainLayout, { MainLayoutRef } from "../MainLayout/index.tsx";
 import SettingsProvider from "../SettingsProvider/index.tsx";
 import combineReducers from "./reducers/combine-reducers.ts";
 import generalReducer from "./reducers/general-reducer.ts";
@@ -54,7 +54,11 @@ export type AnnotatorProps = {
   onPrevImage?: (state: MainLayoutState) => void;
 };
 
-export const Annotator = ({
+export interface AnnotatorRef {
+  clickHeaderButton: (name: string) => void;
+}
+
+export const Annotator = forwardRef<AnnotatorRef, AnnotatorProps>(({
   images,
   allowedArea,
   selectedImage = images && images.length > 0 ? 0 : undefined,
@@ -98,14 +102,23 @@ export const Annotator = ({
   hideFullScreen,
   hideSave,
   allowComments,
-}: AnnotatorProps) => {
+}, ref) => {
   if (typeof selectedImage === "string") {
     selectedImage = (images || []).findIndex(
       (img) => img.name === selectedImage
     );
 
     if (selectedImage === -1) selectedImage = undefined;
   }
+
+  const mainLayoutRef = useRef<MainLayoutRef>(null);
+    
+  useImperativeHandle(ref, () => ({
+    clickHeaderButton(name: string) {
+      mainLayoutRef.current?.clickHeaderButton(name);
+    },
+  }));
+
   const combinedReducers = combineReducers(imageReducer, generalReducer) as (
     state: MainLayoutState,
     action: Action
@@ -186,6 +199,7 @@ export const Annotator = ({
   return (
     <SettingsProvider>
       <MainLayout
+        ref={mainLayoutRef}
         RegionEditLabel={RegionEditLabel}
         alwaysShowNextButton={Boolean(onNextImage)}
         alwaysShowPrevButton={Boolean(onPrevImage)}
@@ -203,6 +217,6 @@ export const Annotator = ({
       />
     </SettingsProvider>
   );
-};
+});
 
 export default Annotator;

src/MainLayout/index.tsx

@@ -4,11 +4,13 @@ import { Action, AnnotatorToolEnum, MainLayoutState } from "./types.ts";
 import { FullScreen, useFullScreenHandle } from "react-full-screen";
 import {
   ComponentType,
+  forwardRef,
   FunctionComponent,
   MouseEvent,
   MouseEventHandler,
   ReactElement,
   useCallback,
+  useImperativeHandle,
   useMemo,
   useRef,
 } from "react";
@@ -32,7 +34,7 @@ import { HotKeys } from "react-hotkeys";
 import { grey } from "@mui/material/colors";
 import { notEmpty } from "../utils/not-empty.ts";
 import { ALL_TOOLS } from "./all-tools-list.ts";
-import Workspace from "../workspace/Workspace/index.tsx";
+import Workspace, { WorkspaceRef } from "../workspace/Workspace/index.tsx";
 import { tss } from "tss-react/mui";
 import { RegionLabelProps } from "../RegionLabel/index.tsx";
 import SettingsDialog from "../SettingsDialog/index.tsx";
@@ -94,7 +96,11 @@ type Props = {
   hideSave?: boolean;
 };
 
-export const MainLayout = ({
+export interface MainLayoutRef {
+  clickHeaderButton: (name: string) => void;
+}
+
+export const MainLayout = forwardRef<MainLayoutRef, Props>(({
   state,
   dispatch,
   RegionEditLabel,
@@ -107,14 +113,23 @@ export const MainLayout = ({
   hideSettings = false,
   hideFullScreen = false,
   hideSave = false,
-}: Props) => {
+}, ref) => {
   const { classes } = useStyles();
   const settings = useSettings();
   const fullScreenHandle = useFullScreenHandle();
 
   const memoizedActionFns = useRef<Record<string, (...args: any[]) => void>>(
     {}
   );
+
+  const workSpaceRef = useRef<WorkspaceRef>(null);
+  
+  useImperativeHandle(ref, () => ({
+    clickHeaderButton(name: string) {
+      workSpaceRef.current?.clickHeaderButton(name);
+    },
+  }));
+
   const action = (type: Action["type"], ...params: Array<any>) => {
     const fnKey = `${type}(${params.join(",")})`;
     if (memoizedActionFns.current[fnKey])
@@ -366,6 +381,7 @@ export const MainLayout = ({
             )}
           >
             <Workspace
+              ref={workSpaceRef}
               allowFullscreen
               iconDictionary={iconDictionary}
               hideHeader={hideHeader}
@@ -400,6 +416,6 @@ export const MainLayout = ({
       </FullScreenContainer>
     </ThemeProvider>
   );
-};
+});
 
 export default MainLayout;

src/lib.tsx

@@ -1,7 +1,7 @@
 import Annotator from "./Annotator";
 
 // re-export types
-export type { AnnotatorProps } from "./Annotator";
+export type { AnnotatorProps, AnnotatorRef } from "./Annotator";
 export type {
   MainLayoutState,
   MainLayoutImageAnnotationState,

src/workspace/Header/index.tsx

@@ -1,7 +1,7 @@
 import HeaderButton from "../HeaderButton/index.js";
 import Box from "@mui/material/Box";
 import { createTheme, styled, ThemeProvider } from "@mui/material/styles";
-import { ReactNode } from "react";
+import { forwardRef, ReactNode, useImperativeHandle, useRef } from "react";
 
 const theme = createTheme();
 
@@ -22,19 +22,39 @@ interface HeaderProps {
   onClickItem: (item: { name: string }) => void;
 }
 
-export const Header = ({
+export type HeaderRef = {
+  clickButtonByName: (name: string) => void;
+};
+
+export const Header = forwardRef<HeaderRef, HeaderProps>(({
   leftSideContent = null,
   hideHeaderText = false,
   items,
   onClickItem,
-}: HeaderProps) => {
+}, ref) => {
+  const buttonRefs = useRef<Record<string, HTMLButtonElement | null>>({});
+
+    useImperativeHandle(ref, () => ({
+      clickButtonByName(name: string) {
+        const button = buttonRefs.current[name];
+        if (button) {
+          button.click();
+        } else {
+          console.warn(`No button found with name: ${name}`);
+        }
+      },
+    }));
+
   return (
     <ThemeProvider theme={theme}>
       <Container>
         <Box flexGrow={1}>{leftSideContent}</Box>
         {items.map((item, index) => (
           <HeaderButton
             key={`${item.name}-${index}`}
+            ref={(el: HTMLButtonElement | null) => {
+              buttonRefs.current[item.name] = el;
+            }}
             hideText={hideHeaderText}
             onClick={() => onClickItem(item)}
             {...item}
@@ -43,6 +63,6 @@ export const Header = ({
       </Container>
     </ThemeProvider>
   );
-};
+});
 
 export default Header;

src/workspace/HeaderButton/index.tsx

@@ -6,7 +6,7 @@ import { useIconDictionary } from "../icon-dictionary.ts";
 import { iconMapping } from "../icon-mapping.ts";
 import { colors, SvgIconTypeMap } from "@mui/material";
 import { OverridableComponent } from "@mui/material/OverridableComponent";
-import { ReactNode } from "react";
+import { forwardRef, ReactNode } from "react";
 
 const theme = createTheme();
 const defaultNameIconMapping = iconMapping;
@@ -63,17 +63,17 @@ interface HeaderButtonProps {
   hideText?: boolean;
 }
 
-export const HeaderButton = ({
+export const HeaderButton = forwardRef<HTMLButtonElement, HeaderButtonProps>(({
   name,
   icon,
   disabled,
   onClick,
   hideText = false,
-}: HeaderButtonProps) => {
+}, ref) => {
   const customIconMapping = useIconDictionary();
   return (
     <ThemeProvider key={name} theme={theme}>
-      <StyledButton onClick={onClick} disabled={disabled}>
+      <StyledButton onClick={onClick} disabled={disabled} ref={ref}>
         <ButtonInnerContent>
           <IconContainer textHidden={hideText}>
             {icon || getIcon(name, customIconMapping)}
@@ -87,6 +87,6 @@ export const HeaderButton = ({
       </StyledButton>
     </ThemeProvider>
   );
-};
+});
 
 export default HeaderButton;

src/workspace/Workspace/index.tsx

@@ -1,6 +1,6 @@
-import { CSSProperties, ReactElement } from "react";
+import { CSSProperties, forwardRef, ReactElement, useImperativeHandle, useRef } from "react";
 import { createTheme, styled, ThemeProvider } from "@mui/material/styles";
-import Header from "../Header/index.tsx";
+import Header, { HeaderRef } from "../Header/index.tsx";
 import RightSidebar from "../RightSidebar/index.tsx";
 import WorkContainer from "../WorkContainer/index.tsx";
 import { IconDictionaryContext } from "../icon-dictionary.ts";
@@ -29,6 +29,10 @@ const SidebarsAndContent = styled("div")(() => ({
   maxWidth: "100vw",
 }));
 
+export interface WorkspaceRef {
+  clickHeaderButton: (name: string) => void;
+}
+
 export interface WorkspaceProps {
   style?: CSSProperties;
   allowFullscreen?: boolean;
@@ -50,7 +54,7 @@ export interface WorkspaceProps {
   children: ReactElement;
 }
 
-export const Workspace = ({
+export const Workspace = forwardRef<WorkspaceRef, WorkspaceProps>(({
   style = {},
   iconSidebarItems = [],
   selectedTools = ["select"],
@@ -64,15 +68,23 @@ export const Workspace = ({
   hideHeader = false,
   hideHeaderText = false,
   children,
-}: WorkspaceProps) => {
+}, ref) => {
   const [sidebarAndContentRef, sidebarAndContent] =
     useMeasure<HTMLDivElement>();
+  const headerRef = useRef<HeaderRef>(null);
+
+  useImperativeHandle(ref, () => ({
+    clickHeaderButton(name: string) {
+      headerRef.current?.clickButtonByName(name);
+    },
+  }));
   return (
     <ThemeProvider theme={theme}>
       <IconDictionaryContext.Provider value={iconDictionary}>
         <Container style={style}>
           {!hideHeader && (
             <Header
+            ref={headerRef}
               hideHeaderText={hideHeaderText}
               leftSideContent={headerLeftSide}
               onClickItem={onClickHeaderItem}
@@ -101,6 +113,6 @@ export const Workspace = ({
       </IconDictionaryContext.Provider>
     </ThemeProvider>
   );
-};
+});
 
 export default Workspace;