diff --git a/src/lib/AnnotationModule.ts b/src/lib/AnnotationModule.ts new file mode 100644 index 000000000..a13cdc50a --- /dev/null +++ b/src/lib/AnnotationModule.ts @@ -0,0 +1,32 @@ +import { + bdlBoxBlue, + bdlGreenLight, + bdlWatermelonRed, + bdlYellorange, + bdlYellow, + bdlGrimace, +} from 'box-ui-elements/es/styles/variables'; +import Cache from './Cache'; + +export const ANNOTATION_COLOR_KEY = 'annotation-color'; + +export const AnnotationColor = { + BOX_BLUE: bdlBoxBlue, + GREEN_LIGHT: bdlGreenLight, + WATERMELON_RED: bdlWatermelonRed, + YELLORANGE: bdlYellorange, + YELLOW: bdlYellow, + GRIMACE: bdlGrimace, +}; + +export default class AnnotationModule { + private cache: Cache; + + constructor({ cache }: { cache: Cache }) { + this.cache = cache; + } + + public getColor = (): string => (this.cache.get(ANNOTATION_COLOR_KEY) as string) || bdlBoxBlue; + + public setColor = (color: string): void => this.cache.set(ANNOTATION_COLOR_KEY, color, true); +} diff --git a/src/lib/__tests__/AnnotationModule-test.js b/src/lib/__tests__/AnnotationModule-test.js new file mode 100644 index 000000000..4cdeb32fa --- /dev/null +++ b/src/lib/__tests__/AnnotationModule-test.js @@ -0,0 +1,22 @@ +import { bdlBoxBlue } from 'box-ui-elements/es/styles/variables'; +import AnnotationModule from '../AnnotationModule'; +import Cache from '../Cache'; + +describe('lib/AnnotationModule', () => { + test('getColor', () => { + const cache = new Cache(); + const annotationModule = new AnnotationModule({ cache }); + + expect(annotationModule.getColor()).toBe(bdlBoxBlue); + }); + + test('setColor', () => { + const cache = new Cache(); + const color = '#fff'; + const annotationModule = new AnnotationModule({ cache }); + + annotationModule.setColor(color); + + expect(annotationModule.getColor()).toBe(color); + }); +}); diff --git a/src/lib/viewers/BaseViewer.js b/src/lib/viewers/BaseViewer.js index db56c60dc..50c6f0d3d 100644 --- a/src/lib/viewers/BaseViewer.js +++ b/src/lib/viewers/BaseViewer.js @@ -40,6 +40,7 @@ import { getIconFromExtension, getIconFromName } from '../icons/icons'; import { VIEWER_EVENT, ERROR_CODE, LOAD_METRIC, DOWNLOAD_REACHABILITY_METRICS } from '../events'; import { AnnotationMode } from '../AnnotationControls'; import AnnotationControlsFSM, { AnnotationInput } from '../AnnotationControlsFSM'; +import AnnotationModule from '../AnnotationModule'; import PreviewError from '../PreviewError'; import Timer from '../Timer'; @@ -153,6 +154,8 @@ class BaseViewer extends EventEmitter { this.annotationControlsFSM = new AnnotationControlsFSM(); + this.annotationModule = new AnnotationModule({ cache: this.cache }); + // Bind context for callbacks this.resetLoadTimeout = this.resetLoadTimeout.bind(this); this.preventDefault = this.preventDefault.bind(this); diff --git a/src/lib/viewers/controls/annotations/AnnotationsControls.tsx b/src/lib/viewers/controls/annotations/AnnotationsControls.tsx index 8fb222463..bddd1ca2e 100644 --- a/src/lib/viewers/controls/annotations/AnnotationsControls.tsx +++ b/src/lib/viewers/controls/annotations/AnnotationsControls.tsx @@ -1,5 +1,6 @@ import React from 'react'; import noop from 'lodash/noop'; +import { bdlBoxBlue } from 'box-ui-elements/es/styles/variables'; import AnnotationsButton from './AnnotationsButton'; import IconDrawing24 from '../icons/IconDrawing24'; import IconHighlightText16 from '../icons/IconHighlightText16'; @@ -9,6 +10,7 @@ import { AnnotationMode } from './types'; import './AnnotationsControls.scss'; export type Props = { + annotationColor?: string; annotationMode?: AnnotationMode; hasDrawing?: boolean; hasHighlight?: boolean; @@ -18,6 +20,7 @@ export type Props = { }; export default function AnnotationsControls({ + annotationColor = bdlBoxBlue, annotationMode = AnnotationMode.NONE, hasDrawing = false, hasHighlight = false, @@ -62,18 +65,20 @@ export default function AnnotationsControls({ return null; } + const isDrawingActive = annotationMode === AnnotationMode.DRAWING; + return (
- + { expect(element.hasClass('bp-AnnotationsControls')).toBe(true); }); + + test.each` + fill | mode + ${bdlBoxBlue} | ${AnnotationMode.DRAWING} + ${'#fff'} | ${AnnotationMode.NONE} + `('should return an IconDrawing24 with the fill set as $fill if annotationMode is $mode', ({ fill, mode }) => { + const wrapper = getWrapper({ annotationMode: mode, hasDrawing: true }); + + expect(wrapper.find('IconDrawing24').props().fill).toBe(fill); + }); }); }); diff --git a/src/lib/viewers/controls/color-picker/ColorPickerControl.scss b/src/lib/viewers/controls/color-picker/ColorPickerControl.scss index 32d77da1c..5c9f67618 100644 --- a/src/lib/viewers/controls/color-picker/ColorPickerControl.scss +++ b/src/lib/viewers/controls/color-picker/ColorPickerControl.scss @@ -36,7 +36,6 @@ .bp-ColorPickerControl-swatch { width: 18px; height: 18px; - background-color: $box-blue; border: 2px solid #fff; border-radius: 2px; } diff --git a/src/lib/viewers/controls/color-picker/ColorPickerControl.tsx b/src/lib/viewers/controls/color-picker/ColorPickerControl.tsx index 40027d86b..ebc53d6be 100644 --- a/src/lib/viewers/controls/color-picker/ColorPickerControl.tsx +++ b/src/lib/viewers/controls/color-picker/ColorPickerControl.tsx @@ -1,48 +1,42 @@ import React, { useState } from 'react'; -import classNames from 'classnames'; +import { bdlBoxBlue } from 'box-ui-elements/es/styles/variables'; import ColorPickerPalette from './ColorPickerPalette'; -import { AnnotationMode } from '../annotations/types'; import './ColorPickerControl.scss'; export type Props = { - annotationMode?: AnnotationMode; - onAnnotationColorClick: (color: string) => void; - isActive?: boolean; + activeColor?: string; + colors: Array; + onColorSelect: (color: string) => void; }; export default function ColorPickerControl({ - annotationMode, - isActive = false, - onAnnotationColorClick, + activeColor = bdlBoxBlue, + colors, + onColorSelect, ...rest }: Props): JSX.Element | null { const [isColorPickerToggled, setIsColorPickerToggled] = useState(false); - if (annotationMode !== AnnotationMode.DRAWING) { - return null; - } + const handleSelect = (color: string): void => { + setIsColorPickerToggled(false); + onColorSelect(color); + }; return (
{isColorPickerToggled && (
- { - setIsColorPickerToggled(false); - onAnnotationColorClick(color); - }} - /> +
)}
); diff --git a/src/lib/viewers/controls/color-picker/ColorPickerPalette.tsx b/src/lib/viewers/controls/color-picker/ColorPickerPalette.tsx index 91e0eb564..4a71e180e 100644 --- a/src/lib/viewers/controls/color-picker/ColorPickerPalette.tsx +++ b/src/lib/viewers/controls/color-picker/ColorPickerPalette.tsx @@ -2,12 +2,11 @@ import React from 'react'; import './ColorPickerPalette.scss'; export type Props = { - onColorSelect: (color: string) => void; + colors: Array; + onSelect: (color: string) => void; }; -export default function ColorPickerPalette({ onColorSelect }: Props): JSX.Element { - const colors = ['#0061d5', '#26c281', '#ed3757', '#f5b31b', '#ffd700', '#4826c2']; - +export default function ColorPickerPalette({ colors, onSelect }: Props): JSX.Element { return (
{colors.map(color => { @@ -15,7 +14,8 @@ export default function ColorPickerPalette({ onColorSelect }: Props): JSX.Elemen