fix(drawing): reposition toolbar on drawing (#657)

* fix(drawing): reposition toolbar above highest staged annotation

Author: ChenCodes

src/components/Popups/PopupDrawingToolbar.tsx

@@ -9,6 +9,8 @@ import PopupBase from './PopupBase';
 import { Options, PopupReference, Rect } from './Popper';
 import './PopupDrawingToolbar.scss';
 
+export type PopupBaseRef = PopupBase;
+
 export type Props = {
     canComment: boolean;
     canRedo: boolean;
@@ -38,28 +40,21 @@ const options: Partial<Options> = {
         {
             name: 'preventOverflow',
             options: {
-                padding: 5,
+                altAxis: true,
+                padding: 50,
             },
         },
     ],
     placement: 'top',
 };
 
-const PopupDrawingToolbar = ({
-    canComment,
-    canRedo,
-    canUndo,
-    className,
-    onDelete,
-    onRedo,
-    onReply,
-    onUndo,
-    reference,
-}: Props): JSX.Element => {
+const PopupDrawingToolbar = (props: Props, ref: React.Ref<PopupBaseRef>): JSX.Element => {
+    const { canComment, canRedo, canUndo, className, onDelete, onRedo, onReply, onUndo, reference } = props;
     const intl = useIntl();
 
     return (
         <PopupBase
+            ref={ref}
             className={classNames(className, 'ba-PopupDrawingToolbar')}
             data-resin-component="popupDrawingToolbar"
             options={options}
@@ -111,4 +106,4 @@ const PopupDrawingToolbar = ({
     );
 };
 
-export default PopupDrawingToolbar;
+export default React.forwardRef(PopupDrawingToolbar);

src/drawing/DrawingAnnotations.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
+import * as React from 'react';
 import classNames from 'classnames';
 import DecoratedDrawingPath from './DecoratedDrawingPath';
 import DrawingList from './DrawingList';
 import DrawingCreator from './DrawingCreator';
 import DrawingPathGroup from './DrawingPathGroup';
 import DrawingSVG, { DrawingSVGRef } from './DrawingSVG';
 import DrawingSVGGroup from './DrawingSVGGroup';
-import PopupDrawingToolbar from '../components/Popups/PopupDrawingToolbar';
+import PopupDrawingToolbar, { PopupBaseRef } from '../components/Popups/PopupDrawingToolbar';
 import { AnnotationDrawing, PathGroup } from '../@types';
 import { CreatorItemDrawing, CreatorStatus } from '../store';
 import './DrawingAnnotations.scss';
@@ -56,6 +56,7 @@ const DrawingAnnotations = (props: Props): JSX.Element => {
     const hasDrawnPathGroups = drawnPathGroups.length > 0;
     const hasStashedPathGroups = stashedPathGroups.length > 0;
     const hasPathGroups = hasDrawnPathGroups || hasStashedPathGroups;
+    const popupDrawingToolbarRef = React.useRef<PopupBaseRef>(null);
     const stagedGroupRef = React.useRef<SVGGElement>(null);
     const { current: drawingSVGGroup } = stagedGroupRef;
 
@@ -87,6 +88,12 @@ const DrawingAnnotations = (props: Props): JSX.Element => {
     const handleUndo = (): void => {
         undoDrawingPathGroup();
     };
+    React.useEffect(() => {
+        const { current: popup } = popupDrawingToolbarRef;
+        if (popup?.popper && drawnPathGroups.length) {
+            popup.popper.update();
+        }
+    }, [drawnPathGroups]);
 
     return (
         <>
@@ -131,6 +138,7 @@ const DrawingAnnotations = (props: Props): JSX.Element => {
 
             {isCreating && hasPathGroups && drawingSVGGroup && canShowPopupToolbar && (
                 <PopupDrawingToolbar
+                    ref={popupDrawingToolbarRef}
                     canComment={hasDrawnPathGroups}
                     canRedo={hasStashedPathGroups}
                     canUndo={hasDrawnPathGroups}

src/drawing/__tests__/DrawingAnnotations-test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { act } from 'react-dom/test-utils';
 import { mount, ReactWrapper } from 'enzyme';
 import DrawingAnnotations, { Props } from '../DrawingAnnotations';
@@ -11,6 +11,7 @@ import { annotations } from '../__mocks__/drawingData';
 import { CreatorStatus } from '../../store';
 
 jest.mock('../DrawingList');
+jest.mock('../../components/Popups/PopupDrawingToolbar');
 
 describe('DrawingAnnotations', () => {
     const getDefaults = (): Props => ({
@@ -239,4 +240,29 @@ describe('DrawingAnnotations', () => {
             },
         );
     });
+
+    describe('state changes', () => {
+        test.each`
+            basePathGroups | nextPathGroups | expected
+            ${[]}          | ${[]}          | ${0}
+            ${[]}          | ${pathGroups}  | ${1}
+            ${pathGroups}  | ${pathGroups}  | ${1}
+        `(
+            'should call update $expected times if basePathGroups.length is $basePathGroups.length and nextPathGroups.length is $nextPathGroups.length',
+            ({ basePathGroups, nextPathGroups, expected }) => {
+                const popupRef = { popper: { update: jest.fn() } };
+                jest.spyOn(React, 'useRef').mockImplementation(() => ({ current: popupRef }));
+
+                const wrapper = getWrapper({
+                    canShowPopupToolbar: true,
+                    drawnPathGroups: basePathGroups,
+                    isCreating: true,
+                });
+
+                wrapper.setProps({ drawnPathGroups: nextPathGroups });
+
+                expect(popupRef.popper.update).toHaveBeenCalledTimes(expected);
+            },
+        );
+    });
 });