Skip to content

Commit

Permalink
Add options for overlay
Browse files Browse the repository at this point in the history
  • Loading branch information
RobinNagpal committed Nov 16, 2021
1 parent 5a7cff8 commit 3287685
Show file tree
Hide file tree
Showing 6 changed files with 96 additions and 10 deletions.
10 changes: 10 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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) |

Expand Down Expand Up @@ -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
Expand Down
7 changes: 6 additions & 1 deletion src/components/Annotation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -67,13 +67,16 @@ function Annotation(options: AnnotationProps & WithRelativeMousePosProps) {

alt,
className,

editorMode,

idFunction,

onSelectedAnnotationUpdate,
onAnnotationClick: onAnnotationClickProp,

overlayOptions,

renderShape,
renderEditor,
renderOverlay,
Expand Down Expand Up @@ -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 &&
Expand Down
28 changes: 28 additions & 0 deletions src/components/Stories/Overlay/CustomOverlayText.stories.tsx
Original file line number Diff line number Diff line change
@@ -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',
},
};
27 changes: 27 additions & 0 deletions src/components/Stories/Overlay/NoOverlay.stories.tsx
Original file line number Diff line number Diff line change
@@ -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,
},
};
10 changes: 9 additions & 1 deletion src/components/defaultProps.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,10 @@ const defaultProps: AnnotationProps = {
onAnnotationClick: () => {},
onSelectedAnnotationUpdate: () => {},

overlayOptions: {
displayOverlay: true,
},

renderEditor: ({ annotation, onSubmit }: RenderEditorProps) => (
<Editor annotation={annotation} onSubmit={onSubmit} />
),
Expand All @@ -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:
Expand All @@ -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>;
}
},

Expand Down
24 changes: 16 additions & 8 deletions src/types/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,7 @@ export type WrappedShapeProps = {

export interface RenderOverlayProps {
annotations: IAnnotation[];
overlayText?: string;
selectorType: string;
}

Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down

0 comments on commit 3287685

Please sign in to comment.