From 27ddc3d9bcf44ff4e49ebb2831a51f9953d9da5e Mon Sep 17 00:00:00 2001 From: dwelle Date: Thu, 10 Aug 2023 11:17:19 +0200 Subject: [PATCH] move callbacks to canvas compo & refactor types --- src/components/App.tsx | 61 ++++++------------- src/components/canvases/InteractiveCanvas.tsx | 16 ++++- src/components/canvases/StaticCanvas.tsx | 2 +- 3 files changed, 34 insertions(+), 45 deletions(-) diff --git a/src/components/App.tsx b/src/components/App.tsx index 95c19928d..ef2861b78 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -1085,11 +1085,7 @@ class App extends React.Component { }} onPointerDown={(event) => this.handleCanvasPointerDown(event)} onWheel={(event) => this.handleWheel(event)} - onContextMenu={ - this.handleCanvasContextMenu as ( - event: React.PointerEvent, - ) => void - } + onContextMenu={this.handleCanvasContextMenu} onDoubleClick={() => { this.setState({ editingFrame: f.id, @@ -1226,7 +1222,7 @@ class App extends React.Component { isExporting: false, renderGrid: true, }} - handleCanvasRef={this.handleCanvasRef} + handleCanvasRef={this.handleStaticCanvasRef} /> { this.renderInteractiveSceneCallback } handleCanvasRef={this.handleInteractiveCanvasRef} - onContextMenu={ - this.handleCanvasContextMenu as ( - event: React.PointerEvent, - ) => void - } + onContextMenu={this.handleCanvasContextMenu} onPointerMove={this.handleCanvasPointerMove} onPointerUp={this.handleCanvasPointerUp} onPointerCancel={this.removePointer} onTouchMove={this.handleTouchMove} onPointerDown={this.handleCanvasPointerDown} onDoubleClick={this.handleCanvasDoubleClick} + onWheel={this.handleWheel} + onTouchStart={this.onTouchStart} + onTouchEnd={this.onTouchEnd} /> {this.renderFrameNames()} @@ -2064,7 +2059,7 @@ class App extends React.Component { didTapTwice = false; } - private onTapStart = (event: TouchEvent) => { + private onTouchStart = (event: React.TouchEvent) => { // fix for Apple Pencil Scribble // On Android, preventing the event would disable contextMenu on tap-hold if (!isAndroid) { @@ -2083,7 +2078,7 @@ class App extends React.Component { // insert text only if we tapped twice with a single finger // event.touches.length === 1 will also prevent inserting text when user's zooming if (didTapTwice && event.touches.length === 1) { - const [touch] = event.touches; + const touch = event.touches[0]; // @ts-ignore this.handleCanvasDoubleClick({ clientX: touch.clientX, @@ -2104,7 +2099,7 @@ class App extends React.Component { } }; - private onTapEnd = (event: TouchEvent) => { + private onTouchEnd = (event: React.TouchEvent) => { this.resetContextMenuTimer(); if (event.touches.length > 0) { this.setState({ @@ -7410,36 +7405,14 @@ class App extends React.Component { }); } - private handleInteractiveCanvasRef = (canvas: HTMLCanvasElement) => { + private handleInteractiveCanvasRef = (canvas: HTMLCanvasElement | null) => { // canvas is null when unmounting if (canvas !== null) { this.interactiveCanvas = canvas; - - this.interactiveCanvas.addEventListener(EVENT.WHEEL, this.handleWheel, { - passive: false, - }); - this.interactiveCanvas.addEventListener( - EVENT.TOUCH_START, - this.onTapStart, - ); - this.interactiveCanvas.addEventListener(EVENT.TOUCH_END, this.onTapEnd); - } else { - this.interactiveCanvas?.removeEventListener( - EVENT.WHEEL, - this.handleWheel, - ); - this.interactiveCanvas?.removeEventListener( - EVENT.TOUCH_START, - this.onTapStart, - ); - this.interactiveCanvas?.removeEventListener( - EVENT.TOUCH_END, - this.onTapEnd, - ); } }; - private handleCanvasRef = (canvas: HTMLCanvasElement) => { + private handleStaticCanvasRef = (canvas: HTMLCanvasElement | null) => { // canvas is null when unmounting if (canvas !== null) { this.canvas = canvas; @@ -7589,13 +7562,15 @@ class App extends React.Component { }; private handleCanvasContextMenu = ( - event: React.PointerEvent, + event: React.MouseEvent, ) => { event.preventDefault(); if ( - (event.nativeEvent.pointerType === "touch" || - (event.nativeEvent.pointerType === "pen" && + (("pointerType" in event.nativeEvent && + event.nativeEvent.pointerType === "touch") || + ("pointerType" in event.nativeEvent && + event.nativeEvent.pointerType === "pen" && // always allow if user uses a pen secondary button event.button !== POINTER_BUTTON.SECONDARY)) && this.state.activeTool.type !== "selection" @@ -7933,7 +7908,9 @@ class App extends React.Component { }; private handleWheel = withBatchedUpdates( - (event: WheelEvent | React.WheelEvent) => { + ( + event: WheelEvent | React.WheelEvent, + ) => { event.preventDefault(); if (isPanning) { return; diff --git a/src/components/canvases/InteractiveCanvas.tsx b/src/components/canvases/InteractiveCanvas.tsx index 4099ffc8d..0dfcbecf1 100644 --- a/src/components/canvases/InteractiveCanvas.tsx +++ b/src/components/canvases/InteractiveCanvas.tsx @@ -27,9 +27,9 @@ type InteractiveCanvasProps = { renderInteractiveSceneCallback: ( data: RenderInteractiveSceneCallback, ) => void; - handleCanvasRef: (canvas: HTMLCanvasElement) => void; + handleCanvasRef: (canvas: HTMLCanvasElement | null) => void; onContextMenu: Exclude< - DOMAttributes["onContextMenu"], + DOMAttributes["onContextMenu"], undefined >; onPointerMove: Exclude< @@ -56,6 +56,15 @@ type InteractiveCanvasProps = { DOMAttributes["onDoubleClick"], undefined >; + onWheel: Exclude["onWheel"], undefined>; + onTouchStart: Exclude< + DOMAttributes["onTouchStart"], + undefined + >; + onTouchEnd: Exclude< + DOMAttributes["onTouchEnd"], + undefined + >; }; const InteractiveCanvas = (props: InteractiveCanvasProps) => { @@ -154,6 +163,9 @@ const InteractiveCanvas = (props: InteractiveCanvasProps) => { onDoubleClick={ props.appState.viewModeEnabled ? undefined : props.onDoubleClick } + onWheel={props.onWheel} + onTouchStart={props.onTouchStart} + onTouchEnd={props.onTouchEnd} > {t("labels.drawingCanvas")} diff --git a/src/components/canvases/StaticCanvas.tsx b/src/components/canvases/StaticCanvas.tsx index 24f44ae37..eed64eef4 100644 --- a/src/components/canvases/StaticCanvas.tsx +++ b/src/components/canvases/StaticCanvas.tsx @@ -16,7 +16,7 @@ type StaticCanvasProps = { scale: number; appState: StaticCanvasAppState; renderConfig: StaticCanvasRenderConfig; - handleCanvasRef: (canvas: HTMLCanvasElement) => void; + handleCanvasRef: (canvas: HTMLCanvasElement | null) => void; }; const StaticCanvas = (props: StaticCanvasProps) => {