sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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
Show Stats 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}

2
src/components/FixedSideContainer.scss
View File

@ -7,7 +7,7 @@
}
.FixedSideContainer > * {
pointer-events: all;
pointer-events: var(--ui-pointerEvents);
}
.FixedSideContainer_side_top {

10
src/components/LayerUI.scss
View File

@ -91,13 +91,17 @@
visibility: visible;
transition: visibility 0s linear 300ms, opacity 0.5s;
transition-delay: 0.8s;
pointer-events: var(--ui-pointerEvents);
}
}
.layer-ui__wrapper__footer-left,
.layer-ui__wrapper__footer-right,
.disable-zen-mode--visible {
pointer-events: all;
.footer-center,
.layer-ui__wrapper__footer-right {
& > * {
pointer-events: var(--ui-pointerEvents);
}
}
.layer-ui__wrapper__footer-right {

10
src/components/LayerUI.tsx
View File

@ -2,7 +2,7 @@ import clsx from "clsx";
import React from "react";
import { ActionManager } from "../actions/manager";
import { CLASSES, DEFAULT_SIDEBAR, LIBRARY_SIDEBAR_WIDTH } from "../constants";
import { isTextElement, showSelectedShapeActions } from "../element";
import { showSelectedShapeActions } from "../element";
import { NonDeletedExcalidrawElement } from "../element/types";
import { Language, t } from "../i18n";
import { calculateScrollCenter } from "../scene";
@ -427,13 +427,7 @@ const LayerUI = ({
{!device.isMobile && (
<>
<div
className={clsx("layer-ui__wrapper", {
"disable-pointerEvents":
appState.draggingElement ||
appState.resizingElement ||
(appState.editingElement &&
!isTextElement(appState.editingElement)),
})}
className="layer-ui__wrapper"
style={
appState.openSidebar &&
isSidebarDocked &&

2
src/components/Sidebar/Sidebar.scss
View File

@ -17,6 +17,8 @@
background-color: var(--sidebar-bg-color);
box-shadow: var(--sidebar-shadow);
pointer-events: var(--ui-pointerEvents);
:root[dir="rtl"] & {
left: 0;
right: auto;

2
src/components/Stats.scss
View File

@ -7,7 +7,7 @@
right: 12px;
font-size: 12px;
z-index: 10;
pointer-events: all;
pointer-events: var(--ui-pointerEvents);
h3 {
margin: 0 24px 8px 0;

2
src/components/UserList.scss
View File

@ -26,7 +26,7 @@
}
.UserList > * {
pointer-events: all;
pointer-events: var(--ui-pointerEvents);
}
.UserList_mobile {

2
src/components/footer/Footer.tsx
View File

@ -73,7 +73,7 @@ const Footer = ({
<FooterCenterTunnel.Out />
<div
className={clsx("layer-ui__wrapper__footer-right zen-mode-transition", {
"transition-right disable-pointerEvents": appState.zenModeEnabled,
"transition-right": appState.zenModeEnabled,
})}
>
<div style={{ position: "relative" }}>

3
src/components/footer/FooterCenter.scss
View File

@ -1,10 +1,11 @@
.footer-center {
pointer-events: none;
& > * {
pointer-events: all;
pointer-events: var(--ui-pointerEvents);
}
display: flex;
width: 100%;
justify-content: flex-start;
margin-inline-end: 0.6rem;
}

6
src/components/welcome-screen/WelcomeScreen.scss
View File

@ -161,7 +161,7 @@
.welcome-screen-menu-item {
box-sizing: border-box;
pointer-events: all;
pointer-events: var(--ui-pointerEvents);
color: var(--color-gray-50);
font-size: 0.875rem;
@ -202,7 +202,7 @@
}
}
&:not(:active) .welcome-screen-menu-item:hover {
.welcome-screen-menu-item:hover {
text-decoration: none;
background: var(--color-gray-10);
@ -246,7 +246,7 @@
}
}
&:not(:active) .welcome-screen-menu-item:hover {
.welcome-screen-menu-item:hover {
background: var(--color-gray-85);
.welcome-screen-menu-item__shortcut {

8
src/constants.ts
View File

@ -41,6 +41,14 @@ export const POINTER_BUTTON = {
TOUCH: -1,
} as const;
export const POINTER_EVENTS = {
enabled: "all",
disabled: "none",
// asserted as any so it can be freely assigned to React Element
// "pointerEnvets" CSS prop
inheritFromUI: "var(--ui-pointerEvents)" as any,
} as const;
export enum EVENT {
COPY = "copy",
PASTE = "paste",

14
src/css/styles.scss
View File

@ -253,7 +253,7 @@
max-height: 100%;
display: flex;
flex-direction: column;
pointer-events: initial;
pointer-events: var(--ui-pointerEvents);
.panelColumn {
padding: 8px 8px 0 8px;
@ -301,7 +301,7 @@
pointer-events: none !important;
& > * {
pointer-events: all;
pointer-events: var(--ui-pointerEvents);
}
}
@ -312,16 +312,16 @@
cursor: default;
pointer-events: none !important;
& > * {
pointer-events: var(--ui-pointerEvents);
}
@media (min-width: 1536px) {
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 3rem;
}
}
.layer-ui__wrapper:not(.disable-pointerEvents) .App-menu_top > * {
pointer-events: all;
}
.App-menu_top > *:first-child {
justify-self: flex-start;
}
@ -436,7 +436,7 @@
left: 50%;
bottom: 30px;
transform: translateX(-50%);
pointer-events: all;
pointer-events: var(--ui-pointerEvents);
font-family: inherit;
&:hover {

3
src/excalidraw-app/components/AppWelcomeScreen.tsx
View File

@ -3,6 +3,7 @@ import { PlusPromoIcon } from "../../components/icons";
import { useI18n } from "../../i18n";
import { WelcomeScreen } from "../../packages/excalidraw/index";
import { isExcalidrawPlusSignedUser } from "../app_constants";
import { POINTER_EVENTS } from "../../constants";
export const AppWelcomeScreen: React.FC<{
setCollabDialogShown: (toggle: boolean) => any;
@ -18,7 +19,7 @@ export const AppWelcomeScreen: React.FC<{
if (bit === "Excalidraw+") {
return (
<a
style={{ pointerEvents: "all" }}
style={{ pointerEvents: POINTER_EVENTS.inheritFromUI }}
href={`${
import.meta.env.VITE_APP_PLUS_APP
}?utm_source=excalidraw&utm_medium=app&utm_content=welcomeScreenSignedInUser`}