Use types

src/components/Annotation.tsx

@@ -41,15 +41,15 @@ export type AnnotationPropsOptional = {
   [K in keyof AnnotationProps]?: AnnotationProps[K]; // so that it retains the types
 };
 
-const Annotation: ComponentType<AnnotationPropsOptional> = compose(
-  withRelativeMousePos()
-)(function Annotation(options: AnnotationProps & WithRelativeMousePosProps) {
+function Annotation(options: AnnotationProps & WithRelativeMousePosProps) {
   const props: AnnotationProps = {
     ...defaultProps,
     ...options,
   };
 
-  const [selectorType, setSelectorType] = useState<string>(props.shapes[0]);
+  const [selectedSelectorType, setSelectedSelectorType] = useState<string>(
+    props.shapes[0]
+  );
   const targetRef = React.createRef<any>();
 
   const addTargetTouchEventListeners = () => {
@@ -135,14 +135,14 @@ const Annotation: ComponentType<AnnotationPropsOptional> = compose(
     if (!!options[methodName]) {
       (options[methodName] as any)(e);
     } else {
-      const selector = getSelectorByType(selectorType);
+      const selector = getSelectorByType(selectedSelectorType);
       if (selector && (selector.methods[methodName] as any)) {
         const value = (selector.methods[methodName] as any)(props.value, e);
 
         if (typeof value === 'undefined') {
           if (process.env.NODE_ENV !== 'production') {
             console.error(`
-              ${methodName} of selector type ${selectorType} returned undefined.
+              ${methodName} of selector type ${selectedSelectorType} returned undefined.
               Make sure to explicitly return the previous state
             `);
           }
@@ -175,7 +175,10 @@ const Annotation: ComponentType<AnnotationPropsOptional> = compose(
 
   return (
     <>
-      <ToolBar selectorType={selectorType} setSelectorType={setSelectorType} />
+      <ToolBar
+        selectedSelectorType={selectedSelectorType}
+        setSelectedSelectorType={setSelectedSelectorType}
+      />
       <Container
         style={props.style}
         onMouseLeave={onTargetMouseLeave}
@@ -216,7 +219,7 @@ const Annotation: ComponentType<AnnotationPropsOptional> = compose(
         {!props.disableOverlay &&
           renderOverlay({
             annotations: props.annotations,
-            selectorType: selectorType,
+            selectorType: selectedSelectorType,
           })}
         {!props.disableEditor &&
           props.value &&
@@ -231,6 +234,10 @@ const Annotation: ComponentType<AnnotationPropsOptional> = compose(
       </Container>
     </>
   );
-});
+}
+
+const WrappedAnnotation: ComponentType<AnnotationPropsOptional> = compose(
+  withRelativeMousePos()
+)(Annotation);
 
-export default Annotation;
+export default WrappedAnnotation;

src/components/ToolBar/ToolBar.tsx

@@ -1,4 +1,7 @@
 import React, { ReactElement } from 'react';
+import RectangleSelector from './../../hocs/RectangleSelector';
+import PointSelector from './../../hocs/PointSelector';
+import OvalSelector from './../../hocs/OvalSelector';
 import styled from 'styled-components';
 import { RenderToolbarProps } from './../../types';
 import CircleSvg from './icons/circle.svg';
@@ -36,13 +39,16 @@ const TrashIcon = styled(StyledIcon)`
 `;
 
 // https://www.w3schools.com/howto/howto_css_icon_bar.asp#
-export default function ToolBar(props: RenderToolbarProps): ReactElement {
-  console.log(props);
+export default function ToolBar({
+  setSelectedSelectorType,
+}: RenderToolbarProps): ReactElement {
   return (
     <OptionsBarDiv>
-      <CircleIcon />
-      <PointIcon />
-      <SquareIcon />
+      <CircleIcon
+        onClick={() => setSelectedSelectorType(RectangleSelector.TYPE)}
+      />
+      <PointIcon onClick={() => setSelectedSelectorType(PointSelector.TYPE)} />
+      <SquareIcon onClick={() => setSelectedSelectorType(OvalSelector.TYPE)} />
       <TrashIcon />
     </OptionsBarDiv>
   );

src/hocs/OvalSelector.ts

@@ -1,5 +1,11 @@
 import { getCoordPercentage } from '../utils/offsetCoordinates';
-import { IAnnotation, IGeometry, IPoint, SelectionMode } from '../types/index';
+import {
+  IAnnotation,
+  IGeometry,
+  IPoint,
+  ISelector,
+  SelectionMode,
+} from '../types/index';
 import { MouseEvent, TouchEvent } from 'react';
 
 const square = (n: number) => Math.pow(n, 2);
@@ -113,9 +119,11 @@ function pointerMove(annotation: IAnnotation, e: TouchEvent | MouseEvent) {
   return annotation;
 }
 
-export default {
+const OvalSelector: ISelector = {
   TYPE,
   intersects,
   area,
   methods,
 };
+
+export default OvalSelector;

src/hocs/PointSelector.ts

@@ -1,4 +1,10 @@
-import { IAnnotation, IContainer, IGeometry, IPoint } from '../types/index';
+import {
+  IAnnotation,
+  IContainer,
+  IGeometry,
+  IPoint,
+  ISelector,
+} from '../types/index';
 import { getCoordPercentage } from '../utils/offsetCoordinates';
 const MARGIN = 6;
 
@@ -53,9 +59,11 @@ export const methods = {
   },
 };
 
-export default {
+const PointSelector: ISelector = {
   TYPE,
   intersects,
   area,
   methods,
 };
+
+export default PointSelector;

src/hocs/RectangleSelector.ts

@@ -1,5 +1,5 @@
 import { MouseEvent, TouchEvent } from 'react';
-import { IAnnotation, IGeometry, IPoint } from '../types/index';
+import { IAnnotation, IGeometry, IPoint, ISelector } from '../types/index';
 import { getCoordPercentage } from '../utils/offsetCoordinates';
 
 export const TYPE = 'RECTANGLE';
@@ -99,9 +99,11 @@ function pointerMove(annotation: IAnnotation, e: TouchEvent | MouseEvent) {
   return annotation;
 }
 
-export default {
+const RectangleSelector: ISelector = {
   TYPE,
   intersects,
   area,
   methods,
 };
+
+export default RectangleSelector;

src/types/index.ts

@@ -107,8 +107,8 @@ export interface RenderOverlayProps {
 }
 
 export interface RenderToolbarProps {
-  selectorType: string;
-  setSelectorType: (selector: string) => void;
+  selectedSelectorType: string;
+  setSelectedSelectorType: (selector: string) => void;
 }
 
 export interface AnnotationProps {