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

feat: enable panning/zoom while in wysiwyg (#8437)

Browse source
This commit is contained in:
David Luzar 2024-08-29 00:42:46 +02:00 • committed by GitHub
parent ea7c702cfc
commit 00af35c692
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 67 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

3
packages/excalidraw/components/Actions.tsx
View file

@ -49,6 +49,7 @@ import {
} from "./icons";
import { KEYS } from "../keys";
import { useTunnels } from "../context/tunnels";
import { CLASSES } from "../constants";
export const canChangeStrokeColor = (
appState: UIAppState,
@ -426,7 +427,7 @@ export const ZoomActions = ({
renderAction: ActionManager["renderAction"];
zoom: Zoom;
}) => (
<Stack.Col gap={1} className="zoom-actions">
<Stack.Col gap={1} className={CLASSES.ZOOM_ACTIONS}>
<Stack.Row align="center">
{renderAction("zoomOut")}
{renderAction("resetZoom")}

35
packages/excalidraw/components/App.tsx
View file

@ -2578,6 +2578,11 @@ class App extends React.Component<AppProps, AppState> {
addEventListener(window, EVENT.RESIZE, this.onResize, false),
addEventListener(window, EVENT.UNLOAD, this.onUnload, false),
addEventListener(window, EVENT.BLUR, this.onBlur, false),
addEventListener(
this.excalidrawContainerRef.current,
EVENT.WHEEL,
this.handleWheel,
),
addEventListener(
this.excalidrawContainerRef.current,
EVENT.DRAG_OVER,
@ -6384,8 +6389,8 @@ class App extends React.Component<AppProps, AppState> {
};
// Returns whether the event is a panning
private handleCanvasPanUsingWheelOrSpaceDrag = (
event: React.PointerEvent<HTMLElement>,
public handleCanvasPanUsingWheelOrSpaceDrag = (
event: React.PointerEvent<HTMLElement> | MouseEvent,
): boolean => {
if (
!(
@ -6394,13 +6399,16 @@ class App extends React.Component<AppProps, AppState> {
(event.button === POINTER_BUTTON.MAIN && isHoldingSpace) ||
isHandToolActive(this.state) ||
this.state.viewModeEnabled)
) ||
this.state.editingTextElement
)
) {
return false;
}
isPanning = true;
event.preventDefault();
if (!this.state.editingTextElement) {
// preventing defualt while text editing messes with cursor/focus
event.preventDefault();
}
let nextPastePrevented = false;
const isLinux =
@ -9472,7 +9480,6 @@ class App extends React.Component<AppProps, AppState> {
// NOTE wheel, touchstart, touchend events must be registered outside
// of react because react binds them them passively (so we can't prevent
// default on them)
this.interactiveCanvas.addEventListener(EVENT.WHEEL, this.handleWheel);
this.interactiveCanvas.addEventListener(
EVENT.TOUCH_START,
this.onTouchStart,
@ -9480,10 +9487,6 @@ class App extends React.Component<AppProps, AppState> {
this.interactiveCanvas.addEventListener(EVENT.TOUCH_END, this.onTouchEnd);
// -----------------------------------------------------------------------
} else {
this.interactiveCanvas?.removeEventListener(
EVENT.WHEEL,
this.handleWheel,
);
this.interactiveCanvas?.removeEventListener(
EVENT.TOUCH_START,
this.onTouchStart,
@ -10078,7 +10081,19 @@ class App extends React.Component<AppProps, AppState> {
(
event: WheelEvent | React.WheelEvent<HTMLDivElement | HTMLCanvasElement>,
) => {
// if not scrolling on canvas/wysiwyg, ignore
if (
!(
event.target instanceof HTMLCanvasElement ||
event.target instanceof HTMLTextAreaElement ||
event.target instanceof HTMLIFrameElement
)
) {
return;
}
event.preventDefault();
if (isPanning) {
return;
}