Add appState offsetTop and offsetLeft to padding calculation.

Refactor collisionPadding calculation to use app state offsets.
This commit is contained in:
zsviczian
2025-10-21 19:41:31 +02:00
committed by GitHub
parent d9397fc457
commit 13f1d18c0e

View File

@@ -4,7 +4,7 @@ import React, { type ReactNode } from "react";
import { isInteractive } from "@excalidraw/common"; import { isInteractive } from "@excalidraw/common";
import { useDevice } from "./App"; import { useApp, useDevice } from "./App";
import { Island } from "./Island"; import { Island } from "./Island";
interface PropertiesPopoverProps { interface PropertiesPopoverProps {
@@ -40,19 +40,20 @@ export const PropertiesPopover = React.forwardRef<
ref, ref,
) => { ) => {
const device = useDevice(); const device = useDevice();
const app = useApp();
const { offsetTop, offsetLeft } = app.state;
const collisionPadding = React.useMemo(() => { const collisionPadding = container
if (!container) { ? (() => {
return 8; const rect = container.getBoundingClientRect();
} return {
const rect = container.getBoundingClientRect(); top: Math.max(8, rect.top),
return { right: Math.max(8, window.innerWidth - rect.right - offsetLeft),
top: Math.max(8, rect.top), bottom: Math.max(8, window.innerHeight - rect.bottom - offsetTop),
right: Math.max(8, window.innerWidth - rect.right), left: Math.max(8, rect.left),
bottom: Math.max(8, window.innerHeight - rect.bottom), };
left: Math.max(8, rect.left), })()
}; : 8;
}, [container]);
return ( return (
<Popover.Portal container={container}> <Popover.Portal container={container}>