|
|
|
@ -212,6 +212,7 @@ import {
|
|
|
|
|
tupleToCoors,
|
|
|
|
|
viewportCoordsToSceneCoords,
|
|
|
|
|
withBatchedUpdates,
|
|
|
|
|
withBatchedUpdatesThrottled,
|
|
|
|
|
} from "../utils";
|
|
|
|
|
import ContextMenu, { ContextMenuOption } from "./ContextMenu";
|
|
|
|
|
import LayerUI from "./LayerUI";
|
|
|
|
@ -2921,7 +2922,7 @@ class App extends React.Component<AppProps, AppState> {
|
|
|
|
|
|
|
|
|
|
setCursor(this.canvas, CURSOR_TYPE.GRABBING);
|
|
|
|
|
let { clientX: lastX, clientY: lastY } = event;
|
|
|
|
|
const onPointerMove = withBatchedUpdates((event: PointerEvent) => {
|
|
|
|
|
const onPointerMove = withBatchedUpdatesThrottled((event: PointerEvent) => {
|
|
|
|
|
const deltaX = lastX - event.clientX;
|
|
|
|
|
const deltaY = lastY - event.clientY;
|
|
|
|
|
lastX = event.clientX;
|
|
|
|
@ -2984,6 +2985,7 @@ class App extends React.Component<AppProps, AppState> {
|
|
|
|
|
window.removeEventListener(EVENT.POINTER_MOVE, onPointerMove);
|
|
|
|
|
window.removeEventListener(EVENT.POINTER_UP, teardown);
|
|
|
|
|
window.removeEventListener(EVENT.BLUR, teardown);
|
|
|
|
|
onPointerMove.flush();
|
|
|
|
|
}),
|
|
|
|
|
);
|
|
|
|
|
window.addEventListener(EVENT.BLUR, teardown);
|
|
|
|
@ -3086,7 +3088,7 @@ class App extends React.Component<AppProps, AppState> {
|
|
|
|
|
isDraggingScrollBar = true;
|
|
|
|
|
pointerDownState.lastCoords.x = event.clientX;
|
|
|
|
|
pointerDownState.lastCoords.y = event.clientY;
|
|
|
|
|
const onPointerMove = withBatchedUpdates((event: PointerEvent) => {
|
|
|
|
|
const onPointerMove = withBatchedUpdatesThrottled((event: PointerEvent) => {
|
|
|
|
|
const target = event.target;
|
|
|
|
|
if (!(target instanceof HTMLElement)) {
|
|
|
|
|
return;
|
|
|
|
@ -3105,6 +3107,7 @@ class App extends React.Component<AppProps, AppState> {
|
|
|
|
|
this.savePointer(event.clientX, event.clientY, "up");
|
|
|
|
|
window.removeEventListener(EVENT.POINTER_MOVE, onPointerMove);
|
|
|
|
|
window.removeEventListener(EVENT.POINTER_UP, onPointerUp);
|
|
|
|
|
onPointerMove.flush();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
lastPointerUp = onPointerUp;
|
|
|
|
@ -3640,8 +3643,8 @@ class App extends React.Component<AppProps, AppState> {
|
|
|
|
|
|
|
|
|
|
private onPointerMoveFromPointerDownHandler(
|
|
|
|
|
pointerDownState: PointerDownState,
|
|
|
|
|
): (event: PointerEvent) => void {
|
|
|
|
|
return withBatchedUpdates((event: PointerEvent) => {
|
|
|
|
|
) {
|
|
|
|
|
return withBatchedUpdatesThrottled((event: PointerEvent) => {
|
|
|
|
|
// We need to initialize dragOffsetXY only after we've updated
|
|
|
|
|
// `state.selectedElementIds` on pointerDown. Doing it here in pointerMove
|
|
|
|
|
// event handler should hopefully ensure we're already working with
|
|
|
|
@ -4062,6 +4065,10 @@ class App extends React.Component<AppProps, AppState> {
|
|
|
|
|
|
|
|
|
|
lastPointerUp = null;
|
|
|
|
|
|
|
|
|
|
if (pointerDownState.eventListeners.onMove) {
|
|
|
|
|
pointerDownState.eventListeners.onMove.flush();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
window.removeEventListener(
|
|
|
|
|
EVENT.POINTER_MOVE,
|
|
|
|
|
pointerDownState.eventListeners.onMove!,
|
|
|
|
|