docs: fix offsets in the example when dragging custom elements (#5238)

This commit is contained in:
Aakansha Doshi 2022-05-24 16:27:23 +05:30 committed by GitHub
parent 4a9fac2d1e
commit 90e739d444
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -264,10 +264,6 @@ export default function App() {
const onPointerMoveFromPointerDownHandler = (pointerDownState) => {
return withBatchedUpdatesThrottled((event) => {
const { x, y } = viewportCoordsToSceneCoords(
{ clientX: event.clientX, clientY: event.clientY },
excalidrawAPI.getAppState(),
);
const distance = distance2d(
pointerDownState.x,
pointerDownState.y,
@ -275,6 +271,13 @@ export default function App() {
event.clientY,
);
if (distance > DRAGGING_THRESHOLD) {
const { x, y } = viewportCoordsToSceneCoords(
{
clientX: event.clientX - pointerDownState.hitElementOffsets.x,
clientY: event.clientY - pointerDownState.hitElementOffsets.y,
},
excalidrawAPI.getAppState(),
);
setCommentIcons({
...commentIcons,
[pointerDownState.hitElement.id]: {
@ -329,6 +332,7 @@ export default function App() {
zIndex: 1,
width: `${COMMENT_ICON_DIMENSION}px`,
height: `${COMMENT_ICON_DIMENSION}px`,
cursor: "pointer",
}}
className="comment-icon"
onPointerDown={(event) => {
@ -341,6 +345,7 @@ export default function App() {
x: event.clientX,
y: event.clientY,
hitElement: commentIcon,
hitElementOffsets: { x: event.clientX - x, y: event.clientY - y },
};
const onPointerMove =
onPointerMoveFromPointerDownHandler(pointerDownState);