add onclick method which is called when annotation is clicked

RobinNagpal · Nov 6, 2021 · c783a88 · c783a88
1 parent c06d372
commit c783a88
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 34 deletions.
diff --git a/src/components/Annotation.tsx b/src/components/Annotation.tsx
@@ -2,7 +2,6 @@ import React, {
   ComponentType,
   MouseEvent,
   TouchEvent,
-  useCallback,
   useEffect,
   useState,
 } from 'react';
@@ -70,7 +69,7 @@ function Annotation(options: AnnotationProps & WithRelativeMousePosProps) {
 
     idFunction,
 
-    onAnnotationSelect,
+    onSelectedAnnotationUpdate,
 
     renderShape,
     renderEditor,
@@ -161,12 +160,6 @@ function Annotation(options: AnnotationProps & WithRelativeMousePosProps) {
     options.relativeMousePos.onTouchLeave(e);
   };
 
-  const unselectSelectedAnnotation = () => {
-    if (selectedAnnotation) {
-      setSelectedAnnotation(undefined);
-      onAnnotationSelect(undefined);
-    }
-  };
   const onMouseUp = (e: MouseEvent) => callSelectorMethod('onMouseUp', e);
   const onMouseDown = (e: MouseEvent) => callSelectorMethod('onMouseDown', e);
   const onMouseMove = (e: MouseEvent) => callSelectorMethod('onMouseMove', e);
@@ -243,14 +236,20 @@ function Annotation(options: AnnotationProps & WithRelativeMousePosProps) {
     props.onAnnotationsUpdate(newAnnotationsValue);
   };
 
-  const selectAnnotation = (annotationToSelect?: IAnnotation) => {
-    setSelectedAnnotation(annotationToSelect);
-    props.onAnnotationSelect(annotationToSelect);
+  const unselectSelectedAnnotation = () => {
+    if (selectedAnnotation) {
+      setSelectedAnnotation(undefined);
+      onSelectedAnnotationUpdate(selectedAnnotation, false);
+    }
   };
 
-  const memoisedSelectedAnnotation = useCallback(selectAnnotation, []);
+  const onAnnotationClick = (annotation: IAnnotation) => {
+    setSelectedAnnotation(annotation);
+    props.onSelectedAnnotationUpdate(annotation, true);
+    props.onAnnotationsClick(annotation);
+  };
 
-  useHandleEscapeEvent(selectAnnotation, selectedAnnotation);
+  useHandleEscapeEvent(unselectSelectedAnnotation, selectedAnnotation);
   return (
     <>
       <ToolBar
@@ -260,7 +259,7 @@ function Annotation(options: AnnotationProps & WithRelativeMousePosProps) {
         selectedAnnotation={selectedAnnotation}
         selectedSelectorType={selectedSelectorType}
         setSelectedSelectorType={setSelectedSelectorType}
-        unSelectAnnotation={memoisedSelectedAnnotation}
+        unSelectSelectedAnnotation={unselectSelectedAnnotation}
       />
       <Container
         style={{
@@ -286,7 +285,7 @@ function Annotation(options: AnnotationProps & WithRelativeMousePosProps) {
               isInSelectionMode: !!tmpAnnotation,
               key: annotation.data.id,
               renderContent: props.renderContent,
-              selectAnnotation: memoisedSelectedAnnotation,
+              onAnnotationClick: onAnnotationClick,
               selectedAnnotation: selectedAnnotation,
             })
           )}
@@ -298,7 +297,7 @@ function Annotation(options: AnnotationProps & WithRelativeMousePosProps) {
               isInSelectionMode: !!tmpAnnotation,
               key: tmpAnnotation.data.id,
               renderContent: props.renderContent,
-              selectAnnotation: memoisedSelectedAnnotation,
+              onAnnotationClick: onAnnotationClick,
             })}
         </ItemsDiv>
         {editorMode !== EditorMode.ReadOnly ? (

diff --git a/src/components/Shapes/withShapeWrapper.tsx b/src/components/Shapes/withShapeWrapper.tsx
@@ -28,8 +28,8 @@ export const withShapeWrapper = (
     const onMouseEnter = useCallback(() => setMouseHovered(true), []);
     const onMouseLeave = useCallback(() => setMouseHovered(false), []);
     const onClick = useCallback(() => {
-      if (props.selectAnnotation) {
-        props.selectAnnotation(annotation);
+      if (props.onAnnotationClick) {
+        props.onAnnotationClick(annotation);
       }
     }, []);
 

diff --git a/src/components/Stories/EditMode/ReadOnly.stories.tsx b/src/components/Stories/EditMode/ReadOnly.stories.tsx
@@ -22,8 +22,10 @@ export default meta;
 export const Oval = OvalTemplateWithExistingAnnotations.bind({});
 Oval.args = {
   editorMode: EditorMode.ReadOnly,
-  onAnnotationSelect: (annotation) =>
-    console.log('Annotation Selected : ', annotation),
+  onSelectedAnnotationUpdate: (annotation, selected) =>
+    console.log('Annotation Selected : ', annotation, selected),
+  onAnnotationsClick: (annotation) =>
+    console.log('Annotation Clicked : ', annotation),
   toolBarOptions: {
     showToolBar: false,
   },
@@ -32,8 +34,10 @@ Oval.args = {
 export const Rectangle = RectangleTemplateWithExistingAnnotations.bind({});
 Rectangle.args = {
   editorMode: EditorMode.ReadOnly,
-  onAnnotationSelect: (annotation) =>
-    console.log('Annotation Selected : ', annotation),
+  onSelectedAnnotationUpdate: (annotation, selected) =>
+    console.log('Annotation Selected : ', annotation, selected),
+  onAnnotationsClick: (annotation) =>
+    console.log('Annotation Clicked : ', annotation),
   toolBarOptions: {
     showToolBar: false,
   },
@@ -42,8 +46,10 @@ Rectangle.args = {
 export const Point = PointTemplateWithExistingAnnotations.bind({});
 Point.args = {
   editorMode: EditorMode.ReadOnly,
-  onAnnotationSelect: (annotation) =>
-    console.log('Annotation Selected : ', annotation),
+  onSelectedAnnotationUpdate: (annotation, selected) =>
+    console.log('Annotation Selected : ', annotation, selected),
+  onAnnotationsClick: (annotation) =>
+    console.log('Annotation Clicked : ', annotation),
   toolBarOptions: {
     showToolBar: false,
   },

diff --git a/src/components/Stories/Toolbar/AnnotationToolbarButtons.stories.tsx b/src/components/Stories/Toolbar/AnnotationToolbarButtons.stories.tsx
@@ -179,6 +179,7 @@ function extracted(initData: IAnnotation[]) {
           onAnnotationsUpdate={setAnnotations}
           toolBarOptions={{
             renderSelectedAnnotationIcons,
+            showToolBar: true,
           }}
           {...args}
         />

diff --git a/src/components/ToolBar/ToolBar.tsx b/src/components/ToolBar/ToolBar.tsx
@@ -48,16 +48,20 @@ export default function ToolBar({
   selectedAnnotation,
   selectedSelectorType,
   setSelectedSelectorType,
-  unSelectAnnotation,
+  unSelectSelectedAnnotation,
 }: RenderToolbarProps): ReactElement | null {
   return options.showToolBar ? (
     <ToolbarDiv>
       {selectedAnnotation ? (
         <>
-          <BackIcon isSelected={false} onClick={() => unSelectAnnotation()} />
+          <BackIcon
+            isSelected={false}
+            onClick={() => unSelectSelectedAnnotation(selectedAnnotation)}
+          />
           {options.renderSelectedAnnotationIcons?.({
             annotation: selectedAnnotation,
-            unSelectAnnotation: unSelectAnnotation,
+            unSelectAnnotation: () =>
+              unSelectSelectedAnnotation(selectedAnnotation),
           })}
           <TrashIcon
             isSelected={false}

diff --git a/src/components/defaultProps.tsx b/src/components/defaultProps.tsx
@@ -30,7 +30,8 @@ const defaultProps: AnnotationProps = {
   innerRef: (_el: HTMLImageElement) => ({}),
 
   onAnnotationsUpdate: () => {},
-  onAnnotationSelect: () => {},
+  onAnnotationsClick: () => {},
+  onSelectedAnnotationUpdate: () => {},
 
   renderEditor: ({ annotation, onSubmit }: RenderEditorProps) => (
     <Editor annotation={annotation} onSubmit={onSubmit} />

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -123,7 +123,7 @@ export interface RenderShapeProps {
   isInSelectionMode: boolean;
   renderContent?: (props: ContentProps) => ReactElement | null;
   selectedAnnotation?: IAnnotation;
-  selectAnnotation: (annotation?: IAnnotation) => void;
+  selectAnnotation: (annotation: IAnnotation) => void;
 }
 
 export interface ContentProps {
@@ -157,7 +157,7 @@ export type WrappedShapeProps = {
   isInSelectionMode: boolean;
   key: string;
   selectedAnnotation?: IAnnotation;
-  selectAnnotation: (annotation?: IAnnotation) => void;
+  onAnnotationClick: (annotation: IAnnotation) => void;
   renderContent?: (props: ContentProps) => ReactElement | null;
   style?: CSSProperties;
 };
@@ -180,7 +180,7 @@ export interface RenderToolbarProps {
   selectedAnnotation: IAnnotation | undefined;
   selectedSelectorType: string;
   setSelectedSelectorType: (selector: AllowedShape) => void;
-  unSelectAnnotation: () => void;
+  unSelectSelectedAnnotation: (annotation: IAnnotation) => void;
 }
 
 export interface RenderSelectedAnnotationIconsProps {
@@ -225,7 +225,11 @@ export interface AnnotationProps {
 
   allowedShapes: AllowedShape[];
   onAnnotationsUpdate: (annotations: IAnnotation[]) => void;
-  onAnnotationSelect: (annotation?: IAnnotation) => void;
+  onAnnotationsClick: (annotations: IAnnotation) => void;
+  onSelectedAnnotationUpdate: (
+    annotation: IAnnotation,
+    selected: boolean
+  ) => void;
   src: string;
   style?: object;
 

diff --git a/src/utils/useHandleEscapeEvent.ts b/src/utils/useHandleEscapeEvent.ts
@@ -2,13 +2,13 @@ import { useEffect } from 'react';
 import { IAnnotation } from '../types/index';
 
 export default function useHandleEscapeEvent(
-  setSelectedItem: (annotation?: IAnnotation) => void,
+  unselectSelectedAnnotation: () => void,
   selectedItem?: IAnnotation
 ) {
   useEffect(() => {
     function handleKeyDown(event: KeyboardEvent) {
       if (event.key === 'Escape') {
-        setSelectedItem(undefined);
+        unselectSelectedAnnotation();
       }
     }