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: improperly disabling UI pointer-events on canvas interaction (#7005)

Browse source 
Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>
This commit is contained in:
David Luzar 2023-09-19 16:01:40 +02:00 • committed by GitHub
parent 99dbc0acb9
commit 3d617958cc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 54 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/components/App.tsx
View file

@ -85,6 +85,7 @@ import {
VERTICAL_ALIGN,
YOUTUBE_STATES,
ZOOM_STEP,
POINTER_EVENTS,
} from "../constants";
import { exportCanvas, loadFromBlob } from "../data";
import Library, { distributeLibraryItemsOnSquareGrid } from "../data/library";
@ -857,7 +858,9 @@ class App extends React.Component<AppProps, AppState> {
width: isVisible ? `${el.width}px` : 0,
height: isVisible ? `${el.height}px` : 0,
transform: isVisible ? `rotate(${el.angle}rad)` : "none",
pointerEvents: isActive ? "auto" : "none",
pointerEvents: isActive
? POINTER_EVENTS.enabled
: POINTER_EVENTS.disabled,
}}
>
{isHovered && (
@ -1081,9 +1084,9 @@ class App extends React.Component<AppProps, AppState> {
whiteSpace: "nowrap",
textOverflow: "ellipsis",
cursor: CURSOR_TYPE.MOVE,
// disable all interaction (e.g. cursor change) when in view
// mode
pointerEvents: this.state.viewModeEnabled ? "none" : "all",
pointerEvents: this.state.viewModeEnabled
? POINTER_EVENTS.disabled
: POINTER_EVENTS.inheritFromUI,
}}
onPointerDown={(event) => this.handleCanvasPointerDown(event)}
onWheel={(event) => this.handleWheel(event)}
@ -1125,6 +1128,16 @@ class App extends React.Component<AppProps, AppState> {
"excalidraw--view-mode": this.state.viewModeEnabled,
"excalidraw--mobile": this.device.isMobile,
})}
style={{
["--ui-pointerEvents" as any]:
this.state.selectionElement ||
this.state.draggingElement ||
this.state.resizingElement ||
(this.state.editingElement &&
!isTextElement(this.state.editingElement))
? POINTER_EVENTS.disabled
: POINTER_EVENTS.enabled,
}}
ref={this.excalidrawContainerRef}
onDrop={this.handleAppOnDrop}
tabIndex={0}