sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
1 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/packages/excalidraw/example/App.js
View File

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