box-annotations 5.2.1-beta.1 → 5.2.1-beta.12

package/src/components/Popups/PopupV2.tsx

@@ -0,0 +1,322 @@
+import noop from 'lodash/noop';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { useIntl } from 'react-intl';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { BlueprintModernizationProvider, TooltipProvider } from '@box/blueprint-web';
+import {
+    MentionContextProvider,
+    MessageEditorV2,
+    ThreadedAnnotationsV2,
+    serializeMentionMarkup,
+} from '@box/threaded-annotations';
+import type { DocumentNodeV2, TextMessageTypeV2 } from '@box/threaded-annotations';
+import type { FetchedAvatarUrls, UserContactType } from '@box/user-selector';
+import type { JSONContent } from '@tiptap/core';
+import FocusTrap from 'box-ui-elements/es/components/focus-trap/FocusTrap';
+
+import { annotationToMessages, collaboratorToUserContact } from '../../adapters/threadedAnnotationsAdapters';
+import {
+    createReplyAction,
+    deleteAnnotationAction,
+    setActiveAnnotationIdAction,
+    updateAnnotationAction,
+} from '../../store/annotations/actions';
+import { getAnnotation } from '../../store/annotations/selectors';
+import { getApiHost, getToken } from '../../store/options';
+import { fetchCollaboratorsAction } from '../../store/users/actions';
+
+import type { AppState, AppThunkDispatch } from '../../store/types';
+
+import createPopper, { PopupReference } from './Popper';
+import type { Instance, Options } from './Popper';
+import messages from './messages';
+import './PopupV2.scss';
+
+export type Props = {
+    annotationId?: string;
+    onSubmit: (text: string) => void;
+    popupPortalEl?: HTMLElement | null;
+    reference: PopupReference;
+};
+
+const getPopupOptions = (): Partial<Options> => ({
+    modifiers: [
+        { name: 'flip', options: { altAxis: false, fallbackPlacements: ['top', 'left', 'right'] } },
+        { name: 'offset', options: { offset: [0, 15] } },
+        { name: 'preventOverflow', options: { padding: 5 } },
+    ],
+    placement: 'bottom',
+});
+
+const createDocumentNode = (content: JSONContent | null): DocumentNodeV2 => {
+    if (!content) {
+        return { type: 'doc', content: [] };
+    }
+
+    if (content.type === 'doc' && content.content) {
+        return content as DocumentNodeV2;
+    }
+
+    return { type: 'doc', content: [content] } as DocumentNodeV2;
+};
+
+// Callers render initials as a fallback on null.
+// A persistent null across all users usually indicates a stale token.
+const fetchAvatarBlob = async (apiHost: string, token: string, userId: string): Promise<string | null> => {
+    try {
+        const response = await fetch(`${apiHost}/2.0/users/${userId}/avatar?pic_type=large`, {
+            headers: { Authorization: `Bearer ${token}` },
+        });
+        if (!response.ok) return null;
+        const blob = await response.blob();
+        return URL.createObjectURL(blob);
+    } catch {
+        return null;
+    }
+};
+
+const PopupV2 = ({ annotationId, onSubmit, popupPortalEl, reference }: Props): JSX.Element | null => {
+    const intl = useIntl();
+    const dispatch = useDispatch<AppThunkDispatch>();
+    const popupRef = React.useRef<HTMLDivElement>(null);
+    const popperRef = React.useRef<Instance>();
+    const optionsRef = React.useRef<Partial<Options>>(getPopupOptions());
+
+    const apiHost = useSelector(getApiHost);
+    const token = useSelector(getToken);
+    const annotation = useSelector((state: AppState) =>
+        annotationId ? getAnnotation(state, annotationId) : undefined,
+    );
+
+    const [avatarBlobs, setAvatarBlobs] = React.useState<Record<string, string>>({});
+    const avatarCacheRef = React.useRef<Map<string, string>>(new Map());
+    const credentialsRef = React.useRef({ apiHost, token });
+    credentialsRef.current = { apiHost, token };
+
+    const getOrFetchAvatarBlob = React.useCallback(
+        async (userId: string): Promise<string | null> => {
+            const cached = avatarCacheRef.current.get(userId);
+            if (cached) return cached;
+            const capturedApiHost = apiHost;
+            const capturedToken = token;
+            const url = await fetchAvatarBlob(capturedApiHost, capturedToken, userId);
+            if (!url) return null;
+            if (
+                credentialsRef.current.apiHost !== capturedApiHost ||
+                credentialsRef.current.token !== capturedToken
+            ) {
+                URL.revokeObjectURL(url);
+                return null;
+            }
+            const existing = avatarCacheRef.current.get(userId);
+            if (existing) {
+                URL.revokeObjectURL(url);
+                return existing;
+            }
+            avatarCacheRef.current.set(userId, url);
+            return url;
+        },
+        [apiHost, token],
+    );
+
+    React.useEffect(() => {
+        if (popupRef.current) {
+            popperRef.current = createPopper(reference, popupRef.current, optionsRef.current);
+        }
+
+        return () => {
+            popperRef.current?.destroy();
+        };
+    }, [reference]);
+
+    React.useEffect(() => {
+        const cache = avatarCacheRef.current;
+        return () => {
+            cache.forEach(url => URL.revokeObjectURL(url));
+            cache.clear();
+        };
+    }, []);
+
+    React.useEffect(() => {
+        avatarCacheRef.current.forEach(url => URL.revokeObjectURL(url));
+        avatarCacheRef.current.clear();
+        setAvatarBlobs({});
+    }, [apiHost, token]);
+
+    const handleEvent = React.useCallback((event: React.SyntheticEvent) => {
+        event.stopPropagation();
+    }, []);
+
+    React.useEffect(() => {
+        if (!annotation) return undefined;
+
+        const userIds = Array.from(
+            new Set(annotationToMessages(annotation).map(msg => String(msg.author.id))),
+        );
+        let cancelled = false;
+
+        Promise.all(userIds.map(async id => [id, await getOrFetchAvatarBlob(id)] as const)).then(entries => {
+            if (cancelled) return;
+            setAvatarBlobs(prev => {
+                const next = { ...prev };
+                entries.forEach(([id, url]) => {
+                    if (url) next[id] = url;
+                });
+                return next;
+            });
+        });
+
+        return () => {
+            cancelled = true;
+        };
+    }, [annotation, getOrFetchAvatarBlob]);
+
+    const threadMessages: TextMessageTypeV2[] = React.useMemo(() => {
+        if (!annotation) return [];
+        return annotationToMessages(annotation).map(msg => ({
+            ...msg,
+            author: {
+                ...msg.author,
+                avatarUrl: avatarBlobs[String(msg.author.id)],
+            },
+        }));
+    }, [annotation, avatarBlobs]);
+
+    const isResolved = annotation?.status === 'resolved';
+    const resolvedBy = isResolved
+        ? annotation?.resolution?.resolved_by?.name ?? annotation?.modified_by?.name
+        : undefined;
+    const resolvedAtSource = isResolved
+        ? annotation?.resolution?.resolved_at ?? annotation?.modified_at
+        : undefined;
+    const resolvedAt = resolvedAtSource ? new Date(resolvedAtSource).getTime() : undefined;
+
+    const userSelectorProps = React.useMemo(
+        () => ({
+            allowEmptyQuery: true,
+            ariaRoleDescription: intl.formatMessage(messages.ariaLabelMentionSelector),
+            fetchAvatarUrls: async (userContacts: UserContactType[]): Promise<FetchedAvatarUrls> => {
+                const urls: FetchedAvatarUrls = {};
+                await Promise.all(
+                    userContacts.map(async ({ id }) => {
+                        const key = String(id);
+                        const blobUrl = await getOrFetchAvatarBlob(key);
+                        if (blobUrl) {
+                            urls[key] = blobUrl;
+                        }
+                    }),
+                );
+                return urls;
+            },
+            fetchUsers: async (query: string) => {
+                const action = await dispatch(fetchCollaboratorsAction(query));
+                if (fetchCollaboratorsAction.fulfilled.match(action)) {
+                    return action.payload.entries.map(collaboratorToUserContact);
+                }
+                return [];
+            },
+            loadingAriaLabel: intl.formatMessage(messages.ariaLabelMentionLoading),
+        }),
+        [dispatch, getOrFetchAvatarBlob, intl],
+    );
+
+    const handlePost = React.useCallback(
+        async (content: JSONContent | null): Promise<void> => {
+            const doc = createDocumentNode(content);
+            const { text } = serializeMentionMarkup(doc);
+            if (annotationId) {
+                await dispatch(createReplyAction({ annotationId, message: text }));
+            } else {
+                onSubmit(text);
+            }
+        },
+        [annotationId, dispatch, onSubmit],
+    );
+
+    const handleThreadDelete = React.useCallback(
+        async (): Promise<void> => {
+            if (annotationId) {
+                await dispatch(deleteAnnotationAction(annotationId));
+            }
+        },
+        [annotationId, dispatch],
+    );
+
+    const handleResolve = React.useCallback(
+        async (): Promise<void> => {
+            if (!annotationId) return;
+            const result = await dispatch(updateAnnotationAction({ annotationId, payload: { status: 'resolved' } }));
+            if (updateAnnotationAction.fulfilled.match(result)) {
+                dispatch(setActiveAnnotationIdAction(null));
+            }
+        },
+        [annotationId, dispatch],
+    );
+
+    const handleUnresolve = React.useCallback(
+        async (): Promise<void> => {
+            if (!annotationId) return;
+            await dispatch(updateAnnotationAction({ annotationId, payload: { status: 'open' } }));
+        },
+        [annotationId, dispatch],
+    );
+
+    if (!popupPortalEl) return null;
+
+    return ReactDOM.createPortal(
+        <FocusTrap>
+            <div
+                ref={popupRef}
+                aria-label={intl.formatMessage(messages.ariaLabelComment)}
+                className="ba-PopupV2"
+                data-resin-component={annotationId ? 'popupThreadV2' : 'popupReplyV2'}
+                onClick={handleEvent}
+                onMouseDown={handleEvent}
+                onMouseMove={handleEvent}
+                onMouseUp={handleEvent}
+                onTouchMove={handleEvent}
+                onTouchStart={handleEvent}
+                role="presentation"
+            >
+                <BlueprintModernizationProvider enableModernizedComponents>
+                    <TooltipProvider>
+                        <MentionContextProvider value={{
+                            collaborationPopoverProps: {
+                                onSubmit: () => Promise.resolve(),
+                            },
+                        }}>
+                            {annotationId ? (
+                                <ThreadedAnnotationsV2
+                                    isAnnotations
+                                    isResolved={isResolved}
+                                    messages={threadMessages}
+                                    onAvatarClick={noop}
+                                    onDelete={noop}
+                                    onPost={handlePost}
+                                    onResolve={handleResolve}
+                                    onThreadDelete={handleThreadDelete}
+                                    onUnresolve={handleUnresolve}
+                                    resolvedAt={resolvedAt}
+                                    resolvedBy={resolvedBy}
+                                    userSelectorProps={userSelectorProps}
+                                />
+                            ) : (
+                                <MessageEditorV2
+                                    isFirstAnnotation
+                                    onPost={handlePost}
+                                    userSelectorProps={userSelectorProps}
+                                />
+                            )}
+                        </MentionContextProvider>
+                    </TooltipProvider>
+                </BlueprintModernizationProvider>
+                <div data-threaded-annotations-portal />
+            </div>
+        </FocusTrap>,
+        popupPortalEl,
+    );
+};
+
+export default PopupV2;

package/src/components/Popups/messages.ts

@@ -6,6 +6,16 @@ export default defineMessages({
         description: 'Aria label description for reply popup',
         defaultMessage: 'Comment',
     },
+    ariaLabelMentionLoading: {
+        id: 'ba.popup.reply.mentionLoading',
+        description: 'Aria label for mention selector loading state',
+        defaultMessage: 'Loading users...',
+    },
+    ariaLabelMentionSelector: {
+        id: 'ba.popup.reply.mentionSelector',
+        description: 'Aria role description for mention user selector',
+        defaultMessage: 'Mention a collaborator',
+    },
     ariaLabelReplyField: {
         id: 'ba.popup.reply.field',
         description: 'Aria label description for annotation comment field',

package/src/document/DocumentAnnotator.ts

@@ -8,18 +8,25 @@ import {
     HighlightManager,
     isHighlight,
 } from '../highlight';
+import { BoundingBoxHighlightManager } from '../boundingBoxHighlight';
 import { centerRegion, isRegion, RegionCreationManager, RegionManager } from '../region';
 import { Event } from '../@types';
 import { getAnnotation } from '../store/annotations';
+import { BoundingBox } from '../store/boundingBoxHighlights';
 import { getSelection } from './docUtil';
 import { Manager } from '../common/BaseManager';
-import { getFileId, getIsCurrentFileVersion, Mode } from '../store';
+import { getFileId, getIsCurrentFileVersion, getRotation, getViewMode, Mode } from '../store';
 import { scrollToLocation } from '../utils/scroll';
 import './DocumentAnnotator.scss';
 
+import type { ViewMode } from '../store/options/types';
+
 // Pdf.js textLayer enhancement requires waiting for 300ms (they hardcode this magic number)
 const TEXT_LAYER_ENHANCEMENT = 300;
 
+// Vertical padding on each page element as provided by Preview SDK (see DocumentAnnotator.scss)
+const PAGE_PADDING = 15;
+
 export default class DocumentAnnotator extends BaseAnnotator {
     annotatedEl?: HTMLElement;
 
@@ -27,6 +34,9 @@ export default class DocumentAnnotator extends BaseAnnotator {
 
     managers: Map<number, Set<Manager>> = new Map();
 
+    /** Tracks which view mode the current managers were created for. Used to destroy/recreate when switching. */
+    private managersViewMode: ViewMode | null = null;
+
     constructor(options: Options) {
         super(options);
 
@@ -53,13 +63,22 @@ export default class DocumentAnnotator extends BaseAnnotator {
         return this.containerEl?.querySelector('.bp-doc');
     }
 
+    /** Destroys all managers and clears the cache. Call when switching view modes. */
+    private clearManagers(): void {
+        this.managers.forEach(managers => managers.forEach(manager => manager.destroy()));
+        this.managers.clear();
+        this.managersViewMode = null;
+    }
+
     getPageManagers(pageEl: HTMLElement): Set<Manager> {
         const fileId = getFileId(this.store.getState());
         const isCurrentFileVersion = getIsCurrentFileVersion(this.store.getState());
         const pageNumber = this.getPageNumber(pageEl);
         const pageReferenceEl = this.getPageReference(pageEl);
-        const managers = this.managers.get(pageNumber) || new Set();
         const resinTags = { fileid: fileId, iscurrent: isCurrentFileVersion };
+        const viewMode = getViewMode(this.store.getState());
+
+        const managers = this.managers.get(pageNumber) || new Set();
         let destroyManagers = false;
 
         // If a referenced page element doesn't exist, destroy all managers to keep them in sync
@@ -77,8 +96,14 @@ export default class DocumentAnnotator extends BaseAnnotator {
 
         // Lazily instantiate managers as pages are added or re-rendered
         if (managers.size === 0) {
-            managers.add(new PopupManager({ location: pageNumber, referenceEl: pageReferenceEl, resinTags }));
-            managers.add(new DrawingManager({ location: pageNumber, referenceEl: pageReferenceEl, resinTags }));
+            if (viewMode === 'boundingBoxes') {
+                managers.add(new BoundingBoxHighlightManager({ location: pageNumber, referenceEl: pageReferenceEl, resinTags }));
+                return managers;
+            }
+
+            // Annotations mode
+            managers.add(new PopupManager({ location: pageNumber, popupPortalEl: this.popupPortalEl, referenceEl: pageReferenceEl, resinTags }));
+            managers.add(new DrawingManager({ location: pageNumber, popupPortalEl: this.popupPortalEl, referenceEl: pageReferenceEl, resinTags }));
 
             const textLayer = pageEl.querySelector('.textLayer') as HTMLElement;
 
@@ -94,7 +119,6 @@ export default class DocumentAnnotator extends BaseAnnotator {
             }
 
             managers.add(new HighlightManager({ location: pageNumber, referenceEl: pageReferenceEl, resinTags }));
-
             managers.add(new RegionManager({ location: pageNumber, referenceEl: pageReferenceEl, resinTags }));
 
             const canvasLayerEl = pageEl.querySelector<HTMLElement>('.canvasWrapper');
@@ -132,7 +156,7 @@ export default class DocumentAnnotator extends BaseAnnotator {
     }
 
     handleChangeMode = ({ mode }: { mode: Mode }): void => {
-        if (!this.annotatedEl) {
+        if (!this.annotatedEl || getViewMode(this.store.getState()) === 'boundingBoxes') {
             return;
         }
 
@@ -146,6 +170,13 @@ export default class DocumentAnnotator extends BaseAnnotator {
     };
 
     render(): void {
+        const viewMode = getViewMode(this.store.getState());
+
+        if (this.managersViewMode !== null && this.managersViewMode !== viewMode) {
+            this.clearManagers();
+        }
+        this.managersViewMode = viewMode;
+
         this.getPages()
             .filter(({ dataset }) => dataset.loaded && dataset.pageNumber)
             .forEach(pageEl => this.renderPage(pageEl));
@@ -153,17 +184,50 @@ export default class DocumentAnnotator extends BaseAnnotator {
         this.postRender();
     }
 
+    public postRender(): void {
+        // DeselectManager is only needed for annotation creation; skip in bounding box mode
+        if (getViewMode(this.store.getState()) === 'boundingBoxes') {
+            if (this.deselectManager) {
+                this.deselectManager.destroy();
+                this.deselectManager = null;
+            }
+            return;
+        }
+        super.postRender();
+    }
+
     renderPage(pageEl: HTMLElement): void {
         const pageManagers = this.getPageManagers(pageEl);
         const pageNumber = this.getPageNumber(pageEl);
+        const rotation = getRotation(this.store.getState()) || 0;
+
+        // Calculate original (unrotated) page dimensions for annotation layer sizing
+        const pageWidth = pageEl.clientWidth;
+        const pageHeight = pageEl.clientHeight - PAGE_PADDING * 2;
+        const isOrthogonal = rotation % 180 !== 0;
+        const origWidth = isOrthogonal ? pageHeight : pageWidth;
+        const origHeight = isOrthogonal ? pageWidth : pageHeight;
 
         // Render annotations for every page
-        pageManagers.forEach(manager =>
+        pageManagers.forEach(manager => {
+            // Apply rotation transform to annotation layers
+            if (rotation) {
+                manager.style({
+                    height: `${origHeight}px`,
+                    left: '50%',
+                    top: '50%',
+                    transform: `translate(-50%, -50%) rotate(${rotation}deg)`,
+                    width: `${origWidth}px`,
+                });
+            } else {
+                manager.style({height: '', left: '', top: '', transform: '', width: ''});
+            }
+
             manager.render({
                 intl: this.intl,
                 store: this.store,
-            }),
-        );
+            });
+        });
 
         this.managers.set(pageNumber, pageManagers);
     }
@@ -194,4 +258,8 @@ export default class DocumentAnnotator extends BaseAnnotator {
             scrollToLocation(this.annotatedEl, annotationPageEl, { offsets });
         }
     }
+
+    protected getScrollReferenceForHighlight(highlight: BoundingBox): HTMLElement | undefined {
+        return this.getPage(highlight.pageNumber);
+    }
 }

package/src/drawing/DrawingAnnotations.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import DecoratedDrawingPath from './DecoratedDrawingPath';
 import DrawingList from './DrawingList';
@@ -22,8 +23,10 @@ export type Props = {
     drawnPathGroups: Array<PathGroup>;
     isCreating: boolean;
     location: number;
+    popupPortalEl?: HTMLElement | null;
     redoDrawingPathGroup: () => void;
     resetDrawing: () => void;
+    rotation: number;
     setActiveAnnotationId: (annotationId: string | null) => void;
     setReferenceId: (uuid: string) => void;
     setStaged: (staged: CreatorItemDrawing | null) => void;
@@ -45,8 +48,10 @@ const DrawingAnnotations = (props: Props): JSX.Element => {
         drawnPathGroups,
         isCreating,
         location,
+        popupPortalEl,
         redoDrawingPathGroup,
         resetDrawing,
+        rotation,
         setActiveAnnotationId,
         setReferenceId,
         setStaged,
@@ -170,23 +175,26 @@ const DrawingAnnotations = (props: Props): JSX.Element => {
                     color={color}
                     onStart={handleStart}
                     onStop={handleStop}
+                    rotation={rotation}
                 />
             )}
 
-            {isCreating && hasPathGroups && drawingSVGGroup && canShowPopupToolbar && (
-                <PopupDrawingToolbar
-                    ref={popupDrawingToolbarRef}
-                    canComment={hasDrawnPathGroups}
-                    canRedo={hasStashedPathGroups}
-                    canUndo={hasDrawnPathGroups}
-                    className={classNames('ba-DrawingAnnotations-toolbar', { 'ba-is-drawing': isDrawing })}
-                    onDelete={handleDelete}
-                    onRedo={handleRedo}
-                    onReply={handleReply}
-                    onUndo={handleUndo}
-                    reference={drawingSVGGroup}
-                />
-            )}
+            {isCreating && hasPathGroups && drawingSVGGroup && canShowPopupToolbar && popupPortalEl &&
+                ReactDOM.createPortal(
+                    <PopupDrawingToolbar
+                        ref={popupDrawingToolbarRef}
+                        canComment={hasDrawnPathGroups}
+                        canRedo={hasStashedPathGroups}
+                        canUndo={hasDrawnPathGroups}
+                        className={classNames('ba-DrawingAnnotations-toolbar', { 'ba-is-drawing': isDrawing })}
+                        onDelete={handleDelete}
+                        onRedo={handleRedo}
+                        onReply={handleReply}
+                        onUndo={handleUndo}
+                        reference={drawingSVGGroup}
+                    />,
+                    popupPortalEl,
+                )}
         </>
     );
 };

package/src/drawing/DrawingAnnotationsContainer.tsx

@@ -18,6 +18,7 @@ import {
     getAnnotationsForLocation,
     getColor,
     getCreatorStatus,
+    getRotation,
     Mode,
     setActiveAnnotationIdAction,
     setReferenceIdAction,
@@ -34,6 +35,7 @@ export type Props = {
     canShowPopupToolbar: boolean;
     drawnPathGroups: Array<PathGroup>;
     isCreating: boolean;
+    rotation: number;
     stashedPathGroups: Array<PathGroup>;
 };
 
@@ -47,6 +49,7 @@ export const mapStateToProps = (state: AppState, { location }: { location: numbe
         canShowPopupToolbar: creatorStatus === CreatorStatus.started,
         drawnPathGroups: getDrawingDrawnPathGroupsForLocation(state, location),
         isCreating: getAnnotationMode(state) === Mode.DRAWING && creatorStatus !== CreatorStatus.pending,
+        rotation: getRotation(state),
         stashedPathGroups: getStashedDrawnPathGroupsForLocation(state, location),
     };
 };

package/src/drawing/DrawingCreator.tsx

@@ -7,6 +7,7 @@ import DrawingSVG, { DrawingSVGRef } from './DrawingSVG';
 import PointerCapture, { PointerCaptureRef, Status as DrawingStatus } from '../components/PointerCapture';
 import { getDrawingCursor } from './DrawingCursor';
 import { getPathCommands } from './drawingUtil';
+import { getElementLocalPosition } from '../utils/rotate';
 import { PathGroup, Position } from '../@types';
 import './DrawingCreator.scss';
 
@@ -15,6 +16,7 @@ export type Props = {
     color?: string;
     onStart: () => void;
     onStop: (pathGroup: PathGroup) => void;
+    rotation?: number;
     size?: number;
 };
 
@@ -26,6 +28,7 @@ export default function DrawingCreator({
     color = defaultStrokeColor,
     onStart,
     onStop,
+    rotation = 0,
     size = defaultStrokeSize,
 }: Props): JSX.Element {
     const [drawingStatus, setDrawingStatus] = React.useState<DrawingStatus>(DrawingStatus.init);
@@ -45,7 +48,9 @@ export default function DrawingCreator({
             return [];
         }
 
-        const { height, width } = creatorEl.getBoundingClientRect();
+        // Get the element's dimensions (before any rotation is applied)
+        const width = creatorEl.offsetWidth;
+        const height = creatorEl.offsetHeight;
         const { size: minSize } = stroke;
         const MAX_X = width - minSize;
         const MAX_Y = height - minSize;
@@ -56,21 +61,9 @@ export default function DrawingCreator({
         }));
     }, [stroke]);
 
-    const getPosition = (x: number, y: number): [number, number] => {
-        const { current: creatorEl } = creatorElRef;
-
-        if (!creatorEl) {
-            return [x, y];
-        }
-
-        // Calculate the new position based on the mouse position less the page offset
-        const { left, top } = creatorEl.getBoundingClientRect();
-        return [x - left, y - top];
-    };
-
     // Drawing Lifecycle Callbacks
     const startDraw = (x: number, y: number): void => {
-        const [x1, y1] = getPosition(x, y);
+        const [x1, y1] = getElementLocalPosition(x, y, creatorElRef.current, rotation);
 
         setDrawingStatus(DrawingStatus.dragging);
 
@@ -100,7 +93,7 @@ export default function DrawingCreator({
 
     const updateDraw = React.useCallback(
         (x: number, y: number): void => {
-            const [x2, y2] = getPosition(x, y);
+            const [x2, y2] = getElementLocalPosition(x, y, creatorElRef.current, rotation);
             const { current: points } = capturedPointsRef;
 
             points.push({ x: x2, y: y2 });
@@ -111,7 +104,7 @@ export default function DrawingCreator({
                 onStart();
             }
         },
-        [drawingStatus, onStart, setDrawingStatus],
+        [drawingStatus, onStart, rotation, setDrawingStatus],
     );
 
     // Event Handlers