smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: context menu does not work after after dragging on StatsDragInput (#8386)

Browse source 
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
This commit is contained in:
zsviczian 2024-08-26 15:58:46 +02:00 • committed by GitHub
parent 5facc0d6da
commit b459e5cfd2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 48 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

72
packages/excalidraw/components/Stats/DragInput.tsx
View file

@ -136,22 +136,43 @@ const StatsDragInput = <
} }
}; };
const handleInputValueRef = useRef(handleInputValue); const callbacksRef = useRef<
handleInputValueRef.current = handleInputValue; Partial<{
handleInputValue: typeof handleInputValue;
onPointerUp: (event: PointerEvent) => void;
onPointerMove: (event: PointerEvent) => void;
}>
>({});
callbacksRef.current.handleInputValue = handleInputValue;
// make sure that clicking on canvas (which umounts the component) // make sure that clicking on canvas (which umounts the component)
// updates current input value (blur isn't triggered) // updates current input value (blur isn't triggered)
useEffect(() => { useEffect(() => {
const input = inputRef.current; const input = inputRef.current;
const callbacks = callbacksRef.current;
return () => { return () => {
const nextValue = input?.value; const nextValue = input?.value;
if (nextValue) { if (nextValue) {
handleInputValueRef.current( callbacks.handleInputValue?.(
nextValue, nextValue,
stateRef.current.originalElements, stateRef.current.originalElements,
stateRef.current.originalAppState, stateRef.current.originalAppState,
); );
} }
// generally not needed, but in case `pointerup` doesn't fire and
// we don't remove the listeners that way, we should at least remove
// on unmount
window.removeEventListener(
EVENT.POINTER_MOVE,
callbacks.onPointerMove!,
false,
);
window.removeEventListener(
EVENT.POINTER_UP,
callbacks.onPointerUp!,
false,
);
}; };
}, [ }, [
// we need to track change of `editable` state as mount/unmount // we need to track change of `editable` state as mount/unmount
@ -248,28 +269,31 @@ const StatsDragInput = <
}; };
}; };
const onPointerUp = () => {
window.removeEventListener(
EVENT.POINTER_MOVE,
onPointerMove,
false,
);
app.syncActionResult({ storeAction: StoreAction.CAPTURE });
lastPointer = null;
accumulatedChange = 0;
stepChange = 0;
originalElements = null;
originalElementsMap = null;
document.body.classList.remove("excalidraw-cursor-resize");
window.removeEventListener(EVENT.POINTER_UP, onPointerUp, false);
};
callbacksRef.current.onPointerMove = onPointerMove;
callbacksRef.current.onPointerUp = onPointerUp;
window.addEventListener(EVENT.POINTER_MOVE, onPointerMove, false); window.addEventListener(EVENT.POINTER_MOVE, onPointerMove, false);
window.addEventListener( window.addEventListener(EVENT.POINTER_UP, onPointerUp, false);
EVENT.POINTER_UP,
() => {
window.removeEventListener(
EVENT.POINTER_MOVE,
onPointerMove,
false,
);
app.syncActionResult({ storeAction: StoreAction.CAPTURE });
lastPointer = null;
accumulatedChange = 0;
stepChange = 0;
originalElements = null;
originalElementsMap = null;
document.body.classList.remove("excalidraw-cursor-resize");
},
false,
);
} }
}} }}
onPointerEnter={() => { onPointerEnter={() => {