feat(drawing): add ColorPickerControl for images

src/lib/viewers/image/ImageControls.tsx

@@ -1,18 +1,29 @@
 import React from 'react';
 import AnnotationsControls, { Props as AnnotationsControlsProps } from '../controls/annotations';
+import ColorPickerControl from '../controls/color-picker';
 import ControlsBar from '../controls/controls-bar';
 import FullscreenToggle, { Props as FullscreenToggleProps } from '../controls/fullscreen';
 import RotateControl, { Props as RotateControlProps } from '../controls/rotate';
 import ZoomControls, { Props as ZoomControlsProps } from '../controls/zoom';
+import { AnnotationColor } from '../../AnnotationModule';
+import { AnnotationMode } from '../controls/annotations/types';
 
-export type Props = AnnotationsControlsProps & FullscreenToggleProps & RotateControlProps & ZoomControlsProps;
+const colors = Object.values(AnnotationColor);
+
+export type Props = AnnotationsControlsProps &
+    FullscreenToggleProps &
+    RotateControlProps &
+    ZoomControlsProps & {
+        onAnnotationColorChange: (color: string) => void;
+    };
 
 export default function ImageControls({
     annotationColor,
     annotationMode,
     hasDrawing,
     hasHighlight,
     hasRegion,
+    onAnnotationColorChange,
     onAnnotationModeClick,
     onAnnotationModeEscape,
     onFullscreenToggle,
@@ -22,19 +33,30 @@ export default function ImageControls({
     scale,
 }: Props): JSX.Element {
     return (
-        <ControlsBar>
-            <ZoomControls onZoomIn={onZoomIn} onZoomOut={onZoomOut} scale={scale} />
-            <RotateControl onRotateLeft={onRotateLeft} />
-            <FullscreenToggle onFullscreenToggle={onFullscreenToggle} />
-            <AnnotationsControls
-                annotationColor={annotationColor}
-                annotationMode={annotationMode}
-                hasDrawing={hasDrawing}
-                hasHighlight={hasHighlight}
-                hasRegion={hasRegion}
-                onAnnotationModeClick={onAnnotationModeClick}
-                onAnnotationModeEscape={onAnnotationModeEscape}
-            />
-        </ControlsBar>
+        <>
+            <ControlsBar>
+                <ZoomControls onZoomIn={onZoomIn} onZoomOut={onZoomOut} scale={scale} />
+                <RotateControl onRotateLeft={onRotateLeft} />
+                <FullscreenToggle onFullscreenToggle={onFullscreenToggle} />
+                <AnnotationsControls
+                    annotationColor={annotationColor}
+                    annotationMode={annotationMode}
+                    hasDrawing={hasDrawing}
+                    hasHighlight={hasHighlight}
+                    hasRegion={hasRegion}
+                    onAnnotationModeClick={onAnnotationModeClick}
+                    onAnnotationModeEscape={onAnnotationModeEscape}
+                />
+            </ControlsBar>
+            {hasDrawing && annotationMode === AnnotationMode.DRAWING && (
+                <ControlsBar>
+                    <ColorPickerControl
+                        activeColor={annotationColor}
+                        colors={colors}
+                        onColorSelect={onAnnotationColorChange}
+                    />
+                </ControlsBar>
+            )}
+        </>
     );
 }

src/lib/viewers/image/ImageViewer.js

@@ -25,6 +25,7 @@ class ImageViewer extends ImageBaseViewer {
         // Bind context for callbacks
         this.applyCursorFtux = this.applyCursorFtux.bind(this);
         this.getViewportDimensions = this.getViewportDimensions.bind(this);
+        this.handleAnnotationColorChange = this.handleAnnotationColorChange.bind(this);
         this.handleAnnotationControlsClick = this.handleAnnotationControlsClick.bind(this);
         this.handleAnnotationCreateEvent = this.handleAnnotationCreateEvent.bind(this);
         this.handleAssetAndRepLoad = this.handleAssetAndRepLoad.bind(this);
@@ -407,10 +408,12 @@ class ImageViewer extends ImageBaseViewer {
 
             this.controls.render(
                 <ImageControls
+                    annotationColor={this.annotationModule.getColor()}
                     annotationMode={this.annotationControlsFSM.getMode()}
                     hasDrawing={canDraw}
                     hasHighlight={false}
                     hasRegion={canAnnotate}
+                    onAnnotationColorChange={this.handleAnnotationColorChange}
                     onAnnotationModeClick={this.handleAnnotationControlsClick}
                     onAnnotationModeEscape={this.handleAnnotationControlsEscape}
                     onFullscreenToggle={this.toggleFullscreen}
@@ -549,6 +552,11 @@ class ImageViewer extends ImageBaseViewer {
         });
     }
 
+    handleAnnotationColorChange(color) {
+        this.annotationModule.setColor(color);
+        this.renderUI();
+    }
+
     /**
      * Handler for annotation controls button click event.
      *

src/lib/viewers/image/__tests__/ImageViewer-test.js

@@ -422,6 +422,9 @@ describe('lib/viewers/image/ImageViewer', () => {
 
     describe('loadUIReact()', () => {
         beforeEach(() => {
+            image.annotationModule = {
+                getColor: jest.fn(),
+            };
             image.options.useReactControls = true;
         });
 
@@ -435,6 +438,7 @@ describe('lib/viewers/image/ImageViewer', () => {
                     hasDrawing={false}
                     hasHighlight={false}
                     hasRegion={false}
+                    onAnnotationColorChange={image.handleAnnotationColorChange}
                     onAnnotationModeClick={image.handleAnnotationControlsClick}
                     onAnnotationModeEscape={image.handleAnnotationControlsEscape}
                     onFullscreenToggle={image.toggleFullscreen}
@@ -703,6 +707,23 @@ describe('lib/viewers/image/ImageViewer', () => {
         });
     });
 
+    describe('handleAnnotationColorChange', () => {
+        beforeEach(() => {
+            image.annotationModule = {
+                setColor: jest.fn(),
+            };
+            image.renderUI = jest.fn();
+        });
+
+        test('should call setColor and renderUI', () => {
+            const color = '#fff';
+            image.handleAnnotationColorChange(color);
+
+            expect(image.annotationModule.setColor).toBeCalledWith(color);
+            expect(image.renderUI).toHaveBeenCalled();
+        });
+    });
+
     describe('handleAnnotationControlsClick', () => {
         beforeEach(() => {
             image.annotator = {