From e48043aef567ab238fa6c7f948a35a303fd2fa28 Mon Sep 17 00:00:00 2001 From: dwelle <5153846+dwelle@users.noreply.github.com> Date: Fri, 3 Apr 2026 19:18:45 +0200 Subject: [PATCH] remove raf & batching --- packages/excalidraw/components/App.tsx | 54 ++++++++++++-------------- packages/excalidraw/reactUtils.ts | 8 ++-- packages/excalidraw/types.ts | 2 +- 3 files changed, 30 insertions(+), 34 deletions(-) diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index 1fe6740b83..25af0337e4 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -628,10 +628,7 @@ const roundFreeDrawPressure = (value: number) => round(value, FREEDRAW_PRESSURE_DECIMALS); const getRoundedFreeDrawPoint = (x: number, y: number) => - pointFrom( - roundFreeDrawCoordinate(x), - roundFreeDrawCoordinate(y), - ); + pointFrom(roundFreeDrawCoordinate(x), roundFreeDrawCoordinate(y)); class App extends React.Component { canvas: AppClassProperties["canvas"]; @@ -8098,7 +8095,7 @@ class App extends React.Component { setCursor(this.interactiveCanvas, CURSOR_TYPE.GRABBING); let { clientX: lastX, clientY: lastY } = event; - const onPointerMove = withBatchedUpdatesThrottled((event: PointerEvent) => { + const onPointerMove = ((event: PointerEvent) => { const deltaX = lastX - event.clientX; const deltaY = lastY - event.clientY; lastX = event.clientX; @@ -8164,7 +8161,7 @@ class App extends React.Component { window.removeEventListener(EVENT.POINTER_MOVE, onPointerMove); window.removeEventListener(EVENT.POINTER_UP, teardown); window.removeEventListener(EVENT.BLUR, teardown); - onPointerMove.flush(); + // onPointerMove.flush(); }), ); window.addEventListener(EVENT.BLUR, teardown); @@ -8274,14 +8271,14 @@ class App extends React.Component { isDraggingScrollBar = true; pointerDownState.lastCoords.x = event.clientX; pointerDownState.lastCoords.y = event.clientY; - const onPointerMove = withBatchedUpdatesThrottled((event: PointerEvent) => { + const onPointerMove = (event: PointerEvent) => { const target = event.target; if (!(target instanceof HTMLElement)) { return; } this.handlePointerMoveOverScrollbars(event, pointerDownState); - }); + }; const onPointerUp = withBatchedUpdates(() => { lastPointerUp = null; isDraggingScrollBar = false; @@ -8292,7 +8289,7 @@ class App extends React.Component { this.savePointer(event.clientX, event.clientY, "up"); window.removeEventListener(EVENT.POINTER_MOVE, onPointerMove); window.removeEventListener(EVENT.POINTER_UP, onPointerUp); - onPointerMove.flush(); + // onPointerMove.flush(); }); lastPointerUp = onPointerUp; @@ -8855,7 +8852,9 @@ class App extends React.Component { locked: false, frameId: topLayerFrame ? topLayerFrame.id : null, points: [pointFrom(0, 0)], - pressures: simulatePressure ? [] : [roundFreeDrawPressure(event.pressure)], + pressures: simulatePressure + ? [] + : [roundFreeDrawPressure(event.pressure)], }); this.scene.insertElement(element); @@ -9497,7 +9496,7 @@ class App extends React.Component { private onPointerMoveFromPointerDownHandler( pointerDownState: PointerDownState, ) { - return withBatchedUpdatesThrottled((event: PointerEvent) => { + return (event: PointerEvent) => { if (this.state.openDialog?.name === "elementLinkSelector") { return; } @@ -10204,17 +10203,17 @@ class App extends React.Component { zoomValue: this.state.zoom.value, }) : points.length > 0 && - points[points.length - 1][0] === nextPoint[0] && - points[points.length - 1][1] === nextPoint[1] - ? "discard" - : "append"; + points[points.length - 1][0] === nextPoint[0] && + points[points.length - 1][1] === nextPoint[1] + ? "discard" + : "append"; if (pointAction !== "discard") { const pressures = newElement.simulatePressure ? newElement.pressures : pointAction === "replace" - ? [...newElement.pressures.slice(0, -1), pressure] - : [...newElement.pressures, pressure]; + ? [...newElement.pressures.slice(0, -1), pressure] + : [...newElement.pressures, pressure]; this.scene.mutateElement( newElement, @@ -10380,7 +10379,7 @@ class App extends React.Component { }); } } - }); + }; } // Returns whether the pointer move happened over either scrollbar @@ -10425,7 +10424,7 @@ class App extends React.Component { this.removePointer(childEvent); pointerDownState.drag.blockDragging = false; if (pointerDownState.eventListeners.onMove) { - pointerDownState.eventListeners.onMove.flush(); + // pointerDownState.eventListeners.onMove.flush(); } const { newElement, @@ -10667,10 +10666,7 @@ class App extends React.Component { let nextPoint = getRoundedFreeDrawPoint(dx, dy); // Allows dots to avoid being flagged as infinitely small - if ( - nextPoint[0] === points[0][0] && - nextPoint[1] === points[0][1] - ) { + if (nextPoint[0] === points[0][0] && nextPoint[1] === points[0][1]) { nextPoint = getRoundedFreeDrawPoint( dx + FREEDRAW_DOT_EPSILON, dy + FREEDRAW_DOT_EPSILON, @@ -10689,10 +10685,10 @@ class App extends React.Component { isFinalPoint: true, }) : !lastPoint || - lastPoint[0] !== nextPoint[0] || - lastPoint[1] !== nextPoint[1] - ? "append" - : "discard"; + lastPoint[0] !== nextPoint[0] || + lastPoint[1] !== nextPoint[1] + ? "append" + : "discard"; if (pointAction !== "discard") { this.scene.mutateElement(newElement, { @@ -10703,8 +10699,8 @@ class App extends React.Component { pressures: newElement.simulatePressure ? [] : pointAction === "replace" - ? [...newElement.pressures.slice(0, -1), pressure] - : [...newElement.pressures, pressure], + ? [...newElement.pressures.slice(0, -1), pressure] + : [...newElement.pressures, pressure], }); } diff --git a/packages/excalidraw/reactUtils.ts b/packages/excalidraw/reactUtils.ts index a779fcfccf..8abade5c21 100644 --- a/packages/excalidraw/reactUtils.ts +++ b/packages/excalidraw/reactUtils.ts @@ -11,10 +11,10 @@ export const withBatchedUpdates = < TFunction extends ((event: any) => void) | (() => void), >( func: Parameters["length"] extends 0 | 1 ? TFunction : never, -) => - ((event) => { - unstable_batchedUpdates(func as TFunction, event); - }) as TFunction; +) => func; +// ((event) => { +// unstable_batchedUpdates(func as TFunction, event); +// }) as TFunction; /** * barches React state updates and throttles the calls to a single call per diff --git a/packages/excalidraw/types.ts b/packages/excalidraw/types.ts index f4c8727894..50d59d9e20 100644 --- a/packages/excalidraw/types.ts +++ b/packages/excalidraw/types.ts @@ -890,7 +890,7 @@ export type PointerDownState = Readonly<{ // We need to have these in the state so that we can unsubscribe them eventListeners: { // It's defined on the initial pointer down event - onMove: null | ReturnType; + onMove: null | ((event: PointerEvent) => void); // It's defined on the initial pointer down event onUp: null | ((event: PointerEvent) => void); // It's defined on the initial pointer down event