refactor(region): Use buttons for better borders and drop shadows (#496)

Author: jstoffan

scripts/build_locale.js

@@ -9,12 +9,12 @@ const { execSync } = require('child_process');
  */
 module.exports = (locale = 'en-US', callback) => {
     try {
-        console.log(`Building ${locale}`);
+        console.log(`Building ${locale}`); // eslint-disable-line
         // build assets for a single locale
         execSync(`time LANGUAGE=${locale} yarn build:prod:dist`);
         callback();
     } catch (error) {
-        console.error(`Error: Failed to build ${locale}`);
+        console.error(`Error: Failed to build ${locale}`); // eslint-disable-line
         callback(true);
     }
 };

src/common/BaseAnnotator.scss

@@ -20,6 +20,11 @@
     @import '~box-ui-elements/es/styles/common/forms';
     @import '~box-ui-elements/es/styles/common/buttons';
 
+    .ba-Layer {
+        @include box-sizing;
+        @include common-typography;
+    }
+
     &.is-hidden {
         .ba-Layer {
             display: none;

src/components/AnnotationTarget/AnnotationTarget.tsx

@@ -1,12 +1,20 @@
+@import '~box-ui-elements/es/styles/variables';
+@import './RegionRect';
+
 .ba-RegionAnnotation {
-    &.is-active,
-    &:focus,
+    @include ba-RegionRect;
+
+    margin: 0;
+    padding: 0;
+    background: none;
+    border: none;
+    box-shadow: none;
+
     &:hover {
-        outline: none;
         cursor: pointer;
+    }
 
-        .ba-RegionRect {
-            stroke-width: 4px;
-        }
+    &:focus {
+        outline: none;
     }
 }

src/components/AnnotationTarget/__tests__/AnnotationTarget-test.tsx

@@ -1,26 +1,50 @@
-import classNames from 'classnames';
 import * as React from 'react';
-import AnnotationTarget from '../components/AnnotationTarget';
-import RegionRect from './RegionRect';
-import { Rect } from '../@types';
+import classNames from 'classnames';
+import noop from 'lodash/noop';
+import { Shape, styleShape } from './regionUtil';
 import './RegionAnnotation.scss';
 
 type Props = {
     annotationId: string;
     className?: string;
     isActive?: boolean;
     onSelect?: (annotationId: string) => void;
-    shape: Rect;
+    shape: Shape;
 };
 
-const RegionAnnotation = (props: Props, ref: React.Ref<HTMLAnchorElement>): JSX.Element => {
-    const { isActive, shape, ...rest } = props;
-    const className = classNames('ba-RegionAnnotation', { 'is-active': isActive });
+export type RegionAnnotationRef = HTMLButtonElement;
+
+export const RegionAnnotation = (props: Props, ref: React.Ref<RegionAnnotationRef>): JSX.Element => {
+    const { annotationId, className, isActive, onSelect = noop, shape } = props;
+
+    const cancelEvent = (event: React.SyntheticEvent): void => {
+        event.preventDefault();
+        event.stopPropagation();
+        event.nativeEvent.stopImmediatePropagation(); // Prevents document event handlers from executing
+    };
+    const handleBlur = (event: React.SyntheticEvent): void => {
+        cancelEvent(event);
+    };
+    const handleClick = (event: React.MouseEvent): void => {
+        cancelEvent(event);
+        onSelect(annotationId);
+    };
+    const handleFocus = (event: React.SyntheticEvent): void => {
+        cancelEvent(event);
+        onSelect(annotationId);
+    };
 
     return (
-        <AnnotationTarget ref={ref} className={className} isActive={isActive} {...rest}>
-            <RegionRect {...shape} />
-        </AnnotationTarget>
+        <button
+            ref={ref}
+            className={classNames('ba-RegionAnnotation', className, { 'is-active': isActive })}
+            data-testid={`ba-AnnotationTarget-${annotationId}`}
+            onBlur={handleBlur}
+            onClick={handleClick}
+            onFocus={handleFocus}
+            style={styleShape(shape)}
+            type="button"
+        />
     );
 };
 

src/components/AnnotationTarget/index.ts

@@ -6,14 +6,6 @@
     left: 0;
     width: 100%;
     height: 100%;
-    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25));
-}
-
-.ba-RegionAnnotations-creator,
-.ba-RegionAnnotations-target {
-    .ba-RegionRect {
-        stroke-width: 4px;
-    }
 }
 
 .ba-RegionAnnotations-creator {
@@ -25,7 +17,7 @@
     pointer-events: none;
 
     &.is-listening {
-        .ba-AnnotationTarget {
+        .ba-RegionAnnotation {
             pointer-events: auto; // Delegate event control to avoid re-rendering every target on mousedown/up
         }
     }

src/region/RegionAnnotation.scss

@@ -3,7 +3,7 @@ import * as React from 'react';
 import PopupReply from '../components/Popups/PopupReply';
 import RegionCreator from './RegionCreator';
 import RegionList from './RegionList';
-import RegionRect from './RegionRect';
+import RegionRect, { RegionRectRef } from './RegionRect';
 import { AnnotationRegion, Rect } from '../@types';
 import { CreatorItem, CreatorStatus } from '../store/creator';
 import { scaleShape } from './regionUtil';
@@ -24,7 +24,7 @@ type Props = {
 };
 
 type State = {
-    rectRef?: SVGRectElement;
+    rectRef?: RegionRectRef;
 };
 
 export default class RegionAnnotations extends React.PureComponent<Props, State> {
@@ -83,7 +83,7 @@ export default class RegionAnnotations extends React.PureComponent<Props, State>
         createRegion(staged);
     };
 
-    setRectRef = (rectRef: SVGRectElement): void => {
+    setRectRef = (rectRef: RegionRectRef): void => {
         this.setState({ rectRef });
     };
 
@@ -117,9 +117,9 @@ export default class RegionAnnotations extends React.PureComponent<Props, State>
 
                 {/* Layer 3a: Staged (unsaved) annotation target, if any */}
                 {isCreating && staged && (
-                    <svg className="ba-RegionAnnotations-target">
-                        <RegionRect ref={this.setRectRef} {...scaleShape(staged.shape, scale)} />
-                    </svg>
+                    <div className="ba-RegionAnnotations-target">
+                        <RegionRect ref={this.setRectRef} isActive shape={scaleShape(staged.shape, scale)} />
+                    </div>
                 )}
 
                 {/* Layer 3b: Staged (unsaved) annotation description popup, if 3a is ready */}

src/region/RegionAnnotation.tsx

@@ -8,5 +8,5 @@ $region_cursor_32_3x: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAY
 }
 
 .ba-RegionCreator-rect {
-    will-change: height, left, top, width;
+    will-change: height, transform, width;
 }