Remove react menu and add toolbar icons

package.json

@@ -71,9 +71,7 @@
     "typescript": "^4.4.4"
   },
   "dependencies": {
-    "@szhsin/react-menu": "^2.2.0",
-    "styled-components": "^5.3.3",
-    "types": "^0.1.1"
+    "styled-components": "^5.3.3"
   },
   "repository": {
     "type": "git",

src/components/Annotation.tsx

@@ -1,4 +1,5 @@
 import React, { Component, ComponentType, MouseEvent, TouchEvent } from 'react';
+import ToolBar from './ToolBar/ToolBar';
 import styled from 'styled-components';
 import compose from '../utils/compose';
 import withRelativeMousePos, {
@@ -227,59 +228,58 @@ const Annotation: ComponentType<AnnotationPropsOptional> = compose(
       } = props;
 
       return (
-        <Container
-          style={props.style}
-          onMouseLeave={this.onTargetMouseLeave}
-          onTouchCancel={this.onTargetTouchLeave}
-          allowTouch={allowTouch}
-        >
-          <ImageElement
-            className={className}
-            style={style}
-            alt={alt}
-            src={src}
-            draggable={false}
-            setInnerRef={this.setInnerRef}
-          />
-          <ItemsDiv>
-            {props.annotations.map((annotation) =>
-              renderHighlight({
-                key: annotation.data.id,
-                annotation,
-                renderContent: props.renderContent,
-              })
-            )}
-            {!props.disableSelector &&
+        <>
+          <ToolBar {...this.props} />
+          <Container
+            style={props.style}
+            onMouseLeave={this.onTargetMouseLeave}
+            onTouchCancel={this.onTargetTouchLeave}
+            allowTouch={allowTouch}
+          >
+            <ImageElement
+              className={className}
+              style={style}
+              alt={alt}
+              src={src}
+              draggable={false}
+              setInnerRef={this.setInnerRef}
+            />
+            <ItemsDiv>
+              {props.annotations.map((annotation) =>
+                renderHighlight({
+                  key: annotation.data.id,
+                  annotation,
+                  renderContent: props.renderContent,
+                })
+              )}
+              {!props.disableSelector &&
+                props.value &&
+                props.value.geometry &&
+                renderSelector({
+                  annotation: props.value,
+                  renderContent: props.renderContent,
+                })}
+            </ItemsDiv>
+            <ItemsDiv
+              onClick={this.onClick}
+              onMouseUp={this.onMouseUp}
+              onMouseDown={this.onMouseDown}
+              onMouseMove={this.onTargetMouseMove}
+              ref={this.targetRef}
+            />
+            {!props.disableOverlay && renderOverlay(props)}
+            {!props.disableEditor &&
               props.value &&
-              props.value.geometry &&
-              renderSelector({
+              props.value.selection &&
+              props.value.selection.showEditor &&
+              renderEditor({
                 annotation: props.value,
-                renderContent: props.renderContent,
+                onChange: props.onChange,
+                onSubmit: this.onSubmit,
               })}
-          </ItemsDiv>
-          <ItemsDiv
-            onClick={this.onClick}
-            onMouseUp={this.onMouseUp}
-            onMouseDown={this.onMouseDown}
-            onMouseMove={this.onTargetMouseMove}
-            ref={this.targetRef}
-          />
-          {!props.disableOverlay &&
-            renderOverlay({
-              type: props.type,
-              annotation: props.value!,
-            })}
-          {!props.disableEditor &&
-            props.value &&
-            props.value.selection &&
-            props.value.selection.showEditor &&
-            renderEditor({
-              annotation: props.value,
-              onChange: props.onChange,
-              onSubmit: this.onSubmit,
-            })}
-          <div>{props.children}</div>
-        </Container>
+            <div>{props.children}</div>
+          </Container>
+        </>
       );
     }
   }

src/components/Shapes/Rectangle.tsx

@@ -4,7 +4,7 @@ import { ShapeProps } from '../../types/index';
 import { withShapeWrapper } from './withShapeWrapper';
 
 const Container = styled.div`
-  box-shadow: 0px 0px 1px 1px white inset;
+  box-shadow: 0 0 1px 1px white inset;
   box-sizing: border-box;
   transition: box-shadow 0.21s ease-in-out;
   z-index: 1;

src/components/Shapes/withShapeWrapper.tsx

@@ -20,6 +20,7 @@ export const withShapeWrapper = (
           onMouseEnter={() => setMouseHovered(true)}
           onMouseLeave={() => setMouseHovered(false)}
         />
+
         {reactElement}
       </>
     );

src/components/ToolBar/ToolBar.tsx

@@ -0,0 +1,49 @@
+import React, { ReactElement } from 'react';
+import styled from 'styled-components';
+import { AnnotationProps } from './../../types';
+import CircleSvg from './icons/circle.svg';
+import PointSvg from './icons/point.svg';
+import SquareSvg from './icons/square.svg';
+import TrashSvg from './icons/trash.svg';
+
+const OptionsBarDiv = styled.div`
+  border: 1px solid #ccc;
+  background-color: #efefef;
+  width: 100%;
+  display: flex;
+`;
+
+const StyledIcon = styled.a`
+  border-right: 1px solid #ccc;
+  width: 40px;
+  height: 40px;
+  background-repeat: no-repeat;
+  background-position: center;
+  cursor: pointer;
+`;
+
+const CircleIcon = styled(StyledIcon)`
+  background-image: url(${CircleSvg});
+`;
+const PointIcon = styled(StyledIcon)`
+  background-image: url(${PointSvg});
+`;
+const SquareIcon = styled(StyledIcon)`
+  background-image: url(${SquareSvg});
+`;
+const TrashIcon = styled(StyledIcon)`
+  background-image: url(${TrashSvg});
+`;
+
+// https://www.w3schools.com/howto/howto_css_icon_bar.asp#
+export default function ToolBar(props: AnnotationProps): ReactElement {
+  console.log(props);
+  return (
+    <OptionsBarDiv>
+      <CircleIcon />
+      <PointIcon />
+      <SquareIcon />
+      <TrashIcon />
+    </OptionsBarDiv>
+  );
+}

src/components/defaultProps.tsx

@@ -7,7 +7,6 @@ import {
   EditorMode,
   RenderEditorProps,
   RenderHighlightProps,
-  RenderOverlayProps,
   RenderSelectorProps,
 } from '../types/index';
 import Content from './Content';
@@ -85,12 +84,16 @@ const defaultProps: AnnotationProps = {
   renderContent: ({ key, annotation }: ContentProps) => (
     <Content key={key} annotation={annotation} />
   ),
-  renderOverlay: ({ type }: RenderOverlayProps): ReactElement => {
-    switch (type) {
-      case PointSelector.TYPE:
-        return <Overlay>Click to Annotate</Overlay>;
-      default:
-        return <Overlay>Click and Drag to Annotate</Overlay>;
+  renderOverlay: ({ annotations, type }: AnnotationProps): ReactElement => {
+    if (annotations.length === 0) {
+      switch (type) {
+        case PointSelector.TYPE:
+          return <Overlay>Click to Annotate</Overlay>;
+        default:
+          return <Overlay>Click and Drag to Annotate</Overlay>;
+      }
+    } else {
+      return <Overlay>Click on the element to select</Overlay>;
     }
   },
 

src/icons.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: any;
+  export default content;
+}

src/types/index.ts

@@ -134,7 +134,7 @@ export interface AnnotationProps {
   renderContent: (props: ContentProps) => ReactElement | null;
   renderEditor: (props: RenderEditorProps) => ReactElement | null;
   renderHighlight: (props: WrappedShapeProps) => ReactElement | null;
-  renderOverlay: (props: RenderOverlayProps) => ReactElement | null;
+  renderOverlay: (props: AnnotationProps) => ReactElement | null;
   renderSelector: (props: WrappedShapeProps) => ReactElement | null;
 
   selectors: ISelector[];
@@ -156,3 +156,11 @@ export interface Theme {
     };
   };
 }
+
+export interface OptionBar {
+  categories: string[];
+}
+export interface OptionBarButton {
+  category: string;
+  renderButton: (props: AnnotationProps) => ReactElement;
+}

tsconfig.json

@@ -1,6 +1,6 @@
 {
   // see https://www.typescriptlang.org/tsconfig to better understand tsconfigs
-  "include": ["src", "types", "stories"],
+  "include": ["src", "src/icons.d.ts"],
   "compilerOptions": {
     "module": "esnext",
     "lib": ["dom", "esnext"],