feat(drawing): Pass down rootEl

src/drawing/DrawingList.tsx

@@ -4,7 +4,7 @@ import noop from 'lodash/noop';
 import DrawingTarget from './DrawingTarget';
 import useOutsideEvent from '../common/useOutsideEvent';
 import DrawingSVG, { DrawingSVGRef } from './DrawingSVG';
-import { AnnotationDrawing, Dimensions } from '../@types';
+import { AnnotationDrawing } from '../@types';
 import { checkValue } from '../utils/util';
 import { getShape } from './drawingUtil';
 
@@ -32,48 +32,35 @@ export function sortDrawing({ target: targetA }: AnnotationDrawing, { target: ta
 
 export function DrawingList({ activeId = null, annotations, className, onSelect = noop }: Props): JSX.Element {
     const [isListening, setIsListening] = React.useState(true);
-    const [rootDimensions, setRootDimensions] = React.useState<Dimensions>();
-    const rootElRef = React.createRef<DrawingSVGRef>();
-    const getRootEl = (): DrawingSVGRef | null => rootElRef.current;
+    const [rootEl, setRootEl] = React.useState<DrawingSVGRef | null>(null);
+    const setRef = React.useCallback(node => setRootEl(node), []); // Trigger re-render when svg gets resized
 
     // Document-level event handlers for focus and pointer control
-    useOutsideEvent('mousedown', rootElRef, (): void => {
+    useOutsideEvent('mousedown', { current: rootEl }, (): void => {
         onSelect(null);
         setIsListening(false);
     });
-    useOutsideEvent('mouseup', rootElRef, (): void => setIsListening(true));
-
-    React.useEffect(() => {
-        const rootEl = getRootEl();
-        if (!rootEl) {
-            return;
-        }
-        setRootDimensions({
-            height: rootEl.clientHeight,
-            width: rootEl.clientWidth,
-        });
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    useOutsideEvent('mouseup', { current: rootEl }, (): void => setIsListening(true));
 
     return (
         <DrawingSVG
-            ref={rootElRef}
+            ref={setRef}
             className={classNames(className, { 'is-listening': isListening })}
             data-resin-component="drawingList"
         >
-            {rootDimensions &&
-                annotations
-                    .filter(filterDrawing)
-                    .sort(sortDrawing)
-                    .map(({ id, target }) => (
-                        <DrawingTarget
-                            key={id}
-                            annotationId={id}
-                            isActive={activeId === id}
-                            onSelect={onSelect}
-                            rootDimensions={rootDimensions}
-                            target={target}
-                        />
-                    ))}
+            {annotations
+                .filter(filterDrawing)
+                .sort(sortDrawing)
+                .map(({ id, target }) => (
+                    <DrawingTarget
+                        key={id}
+                        annotationId={id}
+                        isActive={activeId === id}
+                        onSelect={onSelect}
+                        rootEl={rootEl}
+                        target={target}
+                    />
+                ))}
         </DrawingSVG>
     );
 }

src/drawing/DrawingPath.tsx

@@ -2,15 +2,16 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { v4 as uuidv4 } from 'uuid';
 import { white } from 'box-ui-elements/es/styles/variables';
-import { Dimensions, PathGroup } from '../@types';
+import { DrawingSVGRef } from './DrawingSVG';
+import { PathGroup } from '../@types';
 import { Point } from '../region/transformUtil';
 import { isVectorEffectSupported } from './drawingUtil';
 import './DrawingPath.scss';
 
 export type Props = {
     isActive?: boolean;
-    rootDimensions: Dimensions;
     pathGroup: PathGroup;
+    rootEl: DrawingSVGRef | null;
 };
 
 export const DRAWING_TARGET_BORDER = 1;
@@ -44,18 +45,22 @@ export const getPathCommands = (points: Point[]): string => {
 export const DrawingPath = (props: Props): JSX.Element => {
     const {
         isActive = false,
-        rootDimensions: { height, width },
         pathGroup: {
             paths,
             stroke: { color, size },
         },
+        rootEl,
     } = props;
 
     let strokeWidth = size;
     let strokeBorderWidth = size + DRAWING_TARGET_BORDER * 2;
 
     if (!isVectorEffectSupported()) {
-        const scale = Math.min(width, height) / 100;
+        if (!rootEl) {
+            return <g />;
+        }
+        const { clientHeight, clientWidth } = rootEl;
+        const scale = Math.min(clientHeight, clientWidth) / 100;
         strokeWidth /= scale;
         strokeBorderWidth /= scale;
     }

src/drawing/DrawingTarget.tsx

@@ -3,8 +3,9 @@ import classNames from 'classnames';
 import noop from 'lodash/noop';
 import { v4 as uuidv4 } from 'uuid';
 import DrawingPath from './DrawingPath';
-import { Dimensions, TargetDrawing } from '../@types';
+import { DrawingSVGRef } from './DrawingSVG';
 import { MOUSE_PRIMARY } from '../constants';
+import { TargetDrawing } from '../@types';
 import { getCenter, getShape } from './drawingUtil';
 import './DrawingTarget.scss';
 
@@ -13,7 +14,7 @@ export type Props = {
     className?: string;
     isActive?: boolean;
     onSelect?: (annotationId: string) => void;
-    rootDimensions: Dimensions;
+    rootEl: DrawingSVGRef | null;
     target: TargetDrawing;
 };
 
@@ -25,7 +26,7 @@ export const DrawingTarget = (props: Props, ref: React.Ref<DrawingTargetRef>): J
         className,
         isActive = false,
         onSelect = noop,
-        rootDimensions,
+        rootEl,
         target: { path_groups: pathGroups },
     } = props;
     const shape = getShape(pathGroups);
@@ -82,7 +83,7 @@ export const DrawingTarget = (props: Props, ref: React.Ref<DrawingTargetRef>): J
                     key={`${annotationId}-${uuidv4()}`}
                     isActive={isActive}
                     pathGroup={pathGroup}
-                    rootDimensions={rootDimensions}
+                    rootEl={rootEl}
                 />
             ))}
         </a>