Add options for overlay

README.md

@@ -53,6 +53,7 @@ Prop | Description | Default
 `onAnnotationsUpdate` | callback handler whenever annotations are updated |
 `onAnnotationClick` | `onClick` handler for annotation |
 `onSelectedAnnotationUpdate` | `onSelectedAnnotationUpdate` handler for annotation when it's selected. This callback takes two arguments i.e. annotation and the selected indicator |
+`overlayOptions` | Options for overlay.| See [Overlay options](#overlay-options) |
 `style` |  styles that need to the applied to the parent container|
 `toolBarOptions` | Options for toolbar.| See [Toolbar options](#tool-bar-options) |
 
@@ -101,6 +102,15 @@ You can view the default renderProps [here](src/components/defaultProps.js)
 
 **Note**: You cannot use `:hover` selectors in css for components returned by `renderSelector` and `renderHighlight`. This is due to the fact that `Annotation` places DOM layers on top of these components, preventing triggering of `:hover`
 
+## Overlay Options
+Overlay options are of the format
+```typescript
+export interface OverlayOptions {
+  displayOverlay?: boolean;
+  overlayText?: string;
+}
+```
+
 ## Toolbar Options
 Toolbar options are of the format
 ```typescript

src/components/Annotation.tsx

@@ -67,13 +67,16 @@ function Annotation(options: AnnotationProps & WithRelativeMousePosProps) {
 
     alt,
     className,
+
     editorMode,
 
     idFunction,
 
     onSelectedAnnotationUpdate,
     onAnnotationClick: onAnnotationClickProp,
 
+    overlayOptions,
+
     renderShape,
     renderEditor,
     renderOverlay,
@@ -306,8 +309,10 @@ function Annotation(options: AnnotationProps & WithRelativeMousePosProps) {
           <ReadOnlyDiv onClick={unselectSelectedAnnotation} />
         )}
         {isInEditMode &&
+          overlayOptions?.displayOverlay &&
           renderOverlay({
-            annotations: props.annotations,
+            annotations,
+            overlayText: overlayOptions?.overlayText,
             selectorType: selectedSelectorType,
           })}
         {showEditor &&

src/components/Stories/Overlay/CustomOverlayText.stories.tsx

@@ -0,0 +1,28 @@
+import { Meta } from '@storybook/react';
+import { EditorMode } from './../../../index';
+
+import Annotation from './../../Annotation';
+import {
+  argTypes,
+  RectangleTemplateWithExistingAnnotations,
+} from './../Common/AnnotationStoryTemplate';
+
+const meta: Meta = {
+  title: 'Overlay/CustomOverlayText',
+  component: Annotation,
+  argTypes,
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+export const Default = RectangleTemplateWithExistingAnnotations.bind({});
+Default.args = {
+  editorMode: EditorMode.AnnotateOnly,
+  overlayOptions: {
+    displayOverlay: true,
+    overlayText: 'Some custom text',
+  },
+};

src/components/Stories/Overlay/NoOverlay.stories.tsx

@@ -0,0 +1,27 @@
+import { Meta } from '@storybook/react';
+import { EditorMode } from './../../../index';
+
+import Annotation from './../../Annotation';
+import {
+  argTypes,
+  RectangleTemplateWithExistingAnnotations,
+} from './../Common/AnnotationStoryTemplate';
+
+const meta: Meta = {
+  title: 'Overlay/NoOverlay',
+  component: Annotation,
+  argTypes,
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+export const Default = RectangleTemplateWithExistingAnnotations.bind({});
+Default.args = {
+  editorMode: EditorMode.AnnotateOnly,
+  overlayOptions: {
+    displayOverlay: false,
+  },
+};

src/components/defaultProps.tsx

@@ -28,6 +28,10 @@ const defaultProps: AnnotationProps = {
   onAnnotationClick: () => {},
   onSelectedAnnotationUpdate: () => {},
 
+  overlayOptions: {
+    displayOverlay: true,
+  },
+
   renderEditor: ({ annotation, onSubmit }: RenderEditorProps) => (
     <Editor annotation={annotation} onSubmit={onSubmit} />
   ),
@@ -53,7 +57,11 @@ const defaultProps: AnnotationProps = {
   renderOverlay: ({
     annotations,
     selectorType,
+    overlayText,
   }: RenderOverlayProps): ReactElement => {
+    if (overlayText) {
+      return <Overlay>{overlayText}</Overlay>;
+    }
     if (annotations.length === 0) {
       switch (selectorType) {
         case PointSelector.TYPE:
@@ -62,7 +70,7 @@ const defaultProps: AnnotationProps = {
           return <Overlay>Click and Drag to Annotate</Overlay>;
       }
     } else {
-      return <Overlay>Click on the element to select</Overlay>;
+      return <Overlay>Select the annotation for additional options</Overlay>;
     }
   },
 

src/types/index.ts

@@ -166,6 +166,7 @@ export type WrappedShapeProps = {
 
 export interface RenderOverlayProps {
   annotations: IAnnotation[];
+  overlayText?: string;
   selectorType: string;
 }
 
@@ -199,9 +200,16 @@ export interface ToolBarOptions {
   ) => ReactElement | null;
 }
 
+export interface OverlayOptions {
+  displayOverlay?: boolean;
+  overlayText?: string;
+}
+
 export interface AnnotationProps {
   src: string;
   alt?: string;
+  allowedShapes: AllowedShape[];
+
   annotations: IAnnotation[];
 
   children?: any;
@@ -211,21 +219,21 @@ export interface AnnotationProps {
 
   idFunction: () => string;
 
-  renderContent: (props: ContentProps) => ReactElement | null;
-  renderEditor: (props: RenderEditorProps) => ReactElement | null;
-  renderShape: (props: WrappedShapeProps) => ReactElement | null;
-  renderOverlay: (props: RenderOverlayProps) => ReactElement | null;
-
-  selectors: ISelector[];
-
-  allowedShapes: AllowedShape[];
   onAnnotationsUpdate: (annotations: IAnnotation[]) => void;
   onAnnotationClick: (annotation: IAnnotation) => void;
   onSelectedAnnotationUpdate: (
     annotation: IAnnotation,
     selected: boolean
   ) => void;
 
+  overlayOptions?: OverlayOptions;
+
+  renderContent: (props: ContentProps) => ReactElement | null;
+  renderEditor: (props: RenderEditorProps) => ReactElement | null;
+  renderShape: (props: WrappedShapeProps) => ReactElement | null;
+  renderOverlay: (props: RenderOverlayProps) => ReactElement | null;
+
+  selectors: ISelector[];
   style?: object;
 
   toolBarOptions: ToolBarOptions;