fix RTL cursor position

This commit is contained in:
KDSBrowne 2022-06-30 16:48:42 +00:00
parent 502523a048
commit 438afa7db1
2 changed files with 19 additions and 5 deletions

View File

@ -184,7 +184,7 @@ export default function Whiteboard(props) {
tldrawAPI?.setCamera(camera.point, camera.zoom);
}
}
}, [presentationBounds, curPageId]);
}, [presentationBounds, curPageId, document?.documentElement?.dir]);
// change tldraw page when presentation page changes
React.useEffect(() => {
@ -228,7 +228,7 @@ export default function Whiteboard(props) {
isMultiUserActive={isMultiUserActive}
>
<Tldraw
key={`wb-${!hasWBAccess && !isPresenter}`}
key={`wb-${!hasWBAccess && !isPresenter}-${document?.documentElement?.dir}`}
document={doc}
// disable the ability to drag and drop files onto the whiteboard
// until we handle saving of assets in akka.

View File

@ -1,6 +1,8 @@
import * as React from "react";
import { _ } from "lodash";
const RESIZE_HANDLE_HEIGHT = 8;
function usePrevious(value) {
const ref = React.useRef();
React.useEffect(() => {
@ -136,15 +138,27 @@ export default function Cursors(props) {
const moved = (event) => {
const { type } = event;
const yOffset = parseFloat(document.getElementById('Navbar')?.style?.height);
const nav = document.getElementById('Navbar');
let yOffset = parseFloat(nav?.style?.height);
const getSibling = (el) => el?.previousSibling || null;
const panel = getSibling(document.getElementById('Navbar'));
const panel = getSibling(nav);
const webcams = !nav?.nextSibling?.hasAttribute('role') ? nav?.nextSibling : null;
const subPanel = panel && getSibling(panel);
const xOffset = (parseFloat(panel?.style?.width) || 0) + (parseFloat(subPanel?.style?.width) || 0);
let xOffset = (parseFloat(panel?.style?.width) || 0) + (parseFloat(subPanel?.style?.width) || 0);
if (type === 'touchmove') {
!active && setActive(true);
return setPos({ x: event?.changedTouches[0]?.clientX - xOffset, y: event?.changedTouches[0]?.clientY - yOffset });
}
if (webcams) {
yOffset += (parseFloat(webcams?.firstChild?.style?.height) + RESIZE_HANDLE_HEIGHT);
}
if (document?.documentElement?.dir === 'rtl') {
xOffset = 0;
}
return setPos({ x: event.x - xOffset, y: event.y - yOffset });
}