Add code for readonly edit mode

src/components/Annotation.tsx

@@ -9,12 +9,13 @@ import React, {
 import styled from 'styled-components';
 import {
   AnnotationProps,
+  EditorMode,
   IAnnotation,
   ISelector,
   SelectionMode,
 } from '../types/index';
-import useHandleEscapeEvent from '../utils/useHandleEscapeEvent';
 import compose from '../utils/compose';
+import useHandleEscapeEvent from '../utils/useHandleEscapeEvent';
 import withRelativeMousePos, {
   WithRelativeMousePosProps,
 } from '../utils/withRelativeMousePos';
@@ -42,6 +43,14 @@ const ItemsDiv = styled.div`
   right: 0;
 `;
 
+const ReadOnlyDiv = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+`;
+
 export type AnnotationPropsOptional = {
   [K in keyof AnnotationProps]?: AnnotationProps[K]; // so that it retains the types
 };
@@ -57,8 +66,12 @@ function Annotation(options: AnnotationProps & WithRelativeMousePosProps) {
     allowTouch,
     alt,
     className,
+    editorMode,
+
     idFunction,
 
+    onAnnotationSelect,
+
     renderShape,
     renderEditor,
     renderOverlay,
@@ -112,10 +125,12 @@ function Annotation(options: AnnotationProps & WithRelativeMousePosProps) {
   };
 
   useEffect(() => {
-    if (props.allowTouch) {
-      addTargetTouchEventListeners();
-    } else {
-      removeTargetTouchEventListeners();
+    if (editorMode !== EditorMode.ReadOnly) {
+      if (props.allowTouch) {
+        addTargetTouchEventListeners();
+      } else {
+        removeTargetTouchEventListeners();
+      }
     }
   }, [options.allowTouch]);
 
@@ -146,14 +161,22 @@ 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);
   const onTouchStart = (e: TouchEvent) => callSelectorMethod('onTouchStart', e);
   const onTouchEnd = (e: TouchEvent) => callSelectorMethod('onTouchEnd', e);
   const onTouchMove = (e: TouchEvent) => callSelectorMethod('onTouchMove', e);
+
   const onClick = (e: MouseEvent) => {
-    setSelectedAnnotation(undefined);
+    unselectSelectedAnnotation();
+
     callSelectorMethod('onClick', e);
   };
 
@@ -278,13 +301,17 @@ function Annotation(options: AnnotationProps & WithRelativeMousePosProps) {
               selectAnnotation: memoisedSelectedAnnotation,
             })}
         </ItemsDiv>
-        <ItemsDiv
-          onClick={onClick}
-          onMouseUp={onMouseUp}
-          onMouseDown={onMouseDown}
-          onMouseMove={onTargetMouseMove}
-          ref={targetRef}
-        />
+        {editorMode !== EditorMode.ReadOnly ? (
+          <ItemsDiv
+            onClick={onClick}
+            onMouseUp={onMouseUp}
+            onMouseDown={onMouseDown}
+            onMouseMove={onTargetMouseMove}
+            ref={targetRef}
+          />
+        ) : (
+          <ReadOnlyDiv onClick={unselectSelectedAnnotation} />
+        )}
         {!props.disableOverlay &&
           renderOverlay({
             annotations: props.annotations,

src/components/Stories/EditMode/ReadOnly.stories.tsx

@@ -0,0 +1,50 @@
+import { Meta } from '@storybook/react';
+import { EditorMode } from './../../../index';
+import Annotation from './../../Annotation';
+import {
+  argTypes,
+  OvalTemplateWithExistingAnnotations,
+  PointTemplateWithExistingAnnotations,
+  RectangleTemplateWithExistingAnnotations,
+} from './../Common/AnnotationStoryTemplate';
+
+const meta: Meta = {
+  title: 'EditMode/ReadOnly',
+  component: Annotation,
+  argTypes,
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+export const Oval = OvalTemplateWithExistingAnnotations.bind({});
+Oval.args = {
+  editorMode: EditorMode.ReadOnly,
+  onAnnotationSelect: (annotation) =>
+    console.log('Annotation Selected : ', annotation),
+  toolBarOptions: {
+    showToolBar: false,
+  },
+};
+
+export const Rectangle = RectangleTemplateWithExistingAnnotations.bind({});
+Rectangle.args = {
+  editorMode: EditorMode.ReadOnly,
+  onAnnotationSelect: (annotation) =>
+    console.log('Annotation Selected : ', annotation),
+  toolBarOptions: {
+    showToolBar: false,
+  },
+};
+
+export const Point = PointTemplateWithExistingAnnotations.bind({});
+Point.args = {
+  editorMode: EditorMode.ReadOnly,
+  onAnnotationSelect: (annotation) =>
+    console.log('Annotation Selected : ', annotation),
+  toolBarOptions: {
+    showToolBar: false,
+  },
+};

src/types/index.ts

@@ -231,22 +231,3 @@ export interface AnnotationProps {
 
   toolBarOptions: ToolBarOptions;
 }
-
-export interface Theme {
-  annotation: {
-    backgroundColor: string;
-    active: {
-      border: string;
-      boxShadow: string;
-      backgroundColor: string;
-    };
-  };
-}
-
-export interface OptionBar {
-  categories: string[];
-}
-export interface OptionBarButton {
-  category: string;
-  renderButton: (props: AnnotationProps) => ReactElement;
-}