marcel/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-11-15 02:04:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor and fix test

Browse Source
This commit is contained in:
Ryan Di
2025-10-27 21:44:15 +11:00
parent 67a37175a6
commit 2131b376cd
8 changed files with 99 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
excalidraw-app/tests/MobileMenu.test.tsx
View File

@@ -17,7 +17,6 @@ describe("Test MobileMenu", () => {
beforeEach(async () => {
await render(<ExcalidrawApp />);
// @ts-ignore
h.app.refreshEditorInterface();
});
@@ -26,20 +25,7 @@ describe("Test MobileMenu", () => {
});
it("should set editor interface correctly", () => {
expect(h.app.editorInterface).toMatchInlineSnapshot(`
{
"canFitSidebar": false,
"desktopUIMode": "full",
"formFactor": "desktop",
"isLandscape": true,
"isTouchScreen": false,
"userAgent": {
"isMobileDevice": false,
"platform": "other",
"raw": "Mozilla/5.0 (darwin) AppleWebKit/537.36 (KHTML, like Gecko) jsdom/22.1.0",
},
}
`);
expect(h.app.editorInterface.formFactor).toBe("phone");
});
it("should initialize with welcome screen and hide once user interacts", async () => {

2
packages/common/src/editorInterface.ts
View File

@@ -80,7 +80,7 @@ export const isTabletBreakpoint = (
return minSide >= MQ_MIN_TABLET && maxSide <= MQ_MAX_TABLET;
};
export const isMobileOrTablet = (): boolean => {
const isMobileOrTablet = (): boolean => {
const ua = navigator.userAgent || "";
const platform = navigator.platform || "";
const uaData = (navigator as any).userAgentData as

4
packages/element/src/transformHandles.ts
View File

@@ -1,6 +1,5 @@
import {
DEFAULT_TRANSFORM_HANDLE_SPACING,
isMobileOrTablet,
type EditorInterface,
} from "@excalidraw/common";
@@ -329,6 +328,7 @@ export const getTransformHandles = (
export const hasBoundingBox = (
elements: readonly NonDeletedExcalidrawElement[],
appState: InteractiveCanvasAppState,
editorInterface: EditorInterface,
) => {
if (appState.selectedLinearElement?.isEditing) {
return false;
@@ -347,5 +347,5 @@ export const hasBoundingBox = (
// on mobile/tablet we currently don't show bbox because of resize issues
// (also prob best for simplicity's sake)
return element.points.length > 2 && !isMobileOrTablet();
return element.points.length > 2 && !editorInterface.userAgent.isMobileDevice;
};

73
packages/excalidraw/components/App.tsx
View File

@@ -105,7 +105,6 @@ import {
type StylesPanelMode,
loadDesktopUIModePreference,
setDesktopUIMode,
isMobileOrTablet,
} from "@excalidraw/common";
import {
@@ -701,19 +700,7 @@ class App extends React.Component<AppProps, AppState> {
height: window.innerHeight,
};
const storedDesktopUIMode = loadDesktopUIModePreference();
const userAgentDescriptor = createUserAgentDescriptor(
typeof navigator !== "undefined" ? navigator.userAgent : "",
);
// allow host app to control formFactor and desktopUIMode via props
this.editorInterface = updateObject(this.editorInterface, {
desktopUIMode:
props.UIOptions.desktopUIMode ??
storedDesktopUIMode ??
this.editorInterface.desktopUIMode,
formFactor: this.getFormFactor(),
userAgent: userAgentDescriptor,
});
this.refreshEditorInterface();
this.stylesPanelMode = deriveStylesPanelMode(this.editorInterface);
this.id = nanoid();
@@ -2455,14 +2442,14 @@ class App extends React.Component<AppProps, AppState> {
}
};
private getFormFactor = () => {
const { width, height } = this.state;
return this.props.UIOptions.formFactor ?? isTestEnv()
? "desktop"
: getFormFactor(width, height);
private getFormFactor = (editorWidth: number, editorHeight: number) => {
return (
this.props.UIOptions.formFactor ??
getFormFactor(editorWidth, editorHeight)
);
};
private refreshEditorInterface = () => {
public refreshEditorInterface = () => {
const container = this.excalidrawContainerRef.current;
if (!container) {
return;
@@ -2471,22 +2458,28 @@ class App extends React.Component<AppProps, AppState> {
const { width: editorWidth, height: editorHeight } =
container.getBoundingClientRect();
const storedDesktopUIMode = loadDesktopUIModePreference();
const userAgentDescriptor = createUserAgentDescriptor(
typeof navigator !== "undefined" ? navigator.userAgent : "",
);
// allow host app to control formFactor and desktopUIMode via props
const sidebarBreakpoint =
this.props.UIOptions.dockedSidebarBreakpoint != null
? this.props.UIOptions.dockedSidebarBreakpoint
: MQ_RIGHT_SIDEBAR_MIN_WIDTH;
const nextEditorInterface = updateObject(this.editorInterface, {
formFactor: this.getFormFactor(),
desktopUIMode:
this.props.UIOptions.desktopUIMode ??
storedDesktopUIMode ??
this.editorInterface.desktopUIMode,
formFactor: this.getFormFactor(editorWidth, editorHeight),
userAgent: userAgentDescriptor,
canFitSidebar: editorWidth > sidebarBreakpoint,
isLandscape: editorWidth > editorHeight,
});
const didChange = nextEditorInterface !== this.editorInterface;
if (didChange) {
this.editorInterface = nextEditorInterface;
this.reconcileStylesPanelMode(nextEditorInterface);
}
return didChange;
this.editorInterface = nextEditorInterface;
this.reconcileStylesPanelMode(nextEditorInterface);
};
private reconcileStylesPanelMode = (nextEditorInterface: EditorInterface) => {
@@ -2585,15 +2578,6 @@ class App extends React.Component<AppProps, AppState> {
this.focusContainer();
}
if (
// bounding rects don't work in tests so updating
// the state on init would result in making the test enviro run
// in mobile breakpoint (0 width/height), making everything fail
!isTestEnv()
) {
this.refreshEditorInterface();
}
if (supportsResizeObserver && this.excalidrawContainerRef.current) {
this.resizeObserver = new ResizeObserver(() => {
this.refreshEditorInterface();
@@ -2810,13 +2794,6 @@ class App extends React.Component<AppProps, AppState> {
this.setState({ showWelcomeScreen: true });
}
if (
prevProps.UIOptions.dockedSidebarBreakpoint !==
this.props.UIOptions.dockedSidebarBreakpoint
) {
this.refreshEditorInterface();
}
const hasFollowedPersonLeft =
prevState.userToFollow &&
!this.state.collaborators.has(prevState.userToFollow.socketId);
@@ -5257,7 +5234,7 @@ class App extends React.Component<AppProps, AppState> {
if (
considerBoundingBox &&
this.state.selectedElementIds[element.id] &&
hasBoundingBox([element], this.state)
hasBoundingBox([element], this.state, this.editorInterface)
) {
// if hitting the bounding box, return early
// but if not, we should check for other cases as well (e.g. frame name)
@@ -6165,7 +6142,8 @@ class App extends React.Component<AppProps, AppState> {
// better way of showing them is found
!(
isLinearElement(selectedElements[0]) &&
(isMobileOrTablet() || selectedElements[0].points.length === 2)
(this.editorInterface.userAgent.isMobileDevice ||
selectedElements[0].points.length === 2)
)
) {
const elementWithTransformHandleType =
@@ -7290,7 +7268,8 @@ class App extends React.Component<AppProps, AppState> {
!isElbowArrow(selectedElements[0]) &&
!(
isLinearElement(selectedElements[0]) &&
(isMobileOrTablet() || selectedElements[0].points.length === 2)
(this.editorInterface.userAgent.isMobileDevice ||
selectedElements[0].points.length === 2)
) &&
!(
this.state.selectedLinearElement &&

6
packages/excalidraw/renderer/interactiveScene.ts
View File

@@ -892,7 +892,11 @@ const _renderInteractiveScene = ({
// Paint selected elements
if (!appState.multiElement && !appState.selectedLinearElement?.isEditing) {
const showBoundingBox = hasBoundingBox(selectedElements, appState);
const showBoundingBox = hasBoundingBox(
selectedElements,
appState,
editorInterface,
);
const isSingleLinearElementSelected =
selectedElements.length === 1 && isLinearElement(selectedElements[0]);

104
packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap
View File

@@ -118,7 +118,7 @@ exports[`given element A and group of elements B and given both are selected whe
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -548,7 +548,7 @@ exports[`given element A and group of elements B and given both are selected whe
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -957,7 +957,7 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -1525,7 +1525,7 @@ exports[`regression tests > Drags selected element when hitting only bounding bo
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -1739,7 +1739,7 @@ exports[`regression tests > adjusts z order when grouping > [end of test] appSta
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -2122,7 +2122,7 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] appSt
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -2367,7 +2367,7 @@ exports[`regression tests > arrow keys > [end of test] appState 1`] = `
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -2551,7 +2551,7 @@ exports[`regression tests > can drag element that covers another element, while
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -2876,7 +2876,7 @@ exports[`regression tests > change the properties of a shape > [end of test] app
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -3135,7 +3135,7 @@ exports[`regression tests > click on an element and drag it > [dragged] appState
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -3378,7 +3378,7 @@ exports[`regression tests > click on an element and drag it > [end of test] appS
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -3616,7 +3616,7 @@ exports[`regression tests > click to select a shape > [end of test] appState 1`]
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -3877,7 +3877,7 @@ exports[`regression tests > click-drag to select a group > [end of test] appStat
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -4192,7 +4192,7 @@ exports[`regression tests > deleting last but one element in editing group shoul
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -4657,7 +4657,7 @@ exports[`regression tests > deselects group of selected elements on pointer down
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -4914,7 +4914,7 @@ exports[`regression tests > deselects group of selected elements on pointer up w
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -5219,7 +5219,7 @@ exports[`regression tests > deselects selected element on pointer down when poin
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -5401,7 +5401,7 @@ exports[`regression tests > deselects selected element, on pointer up, when clic
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -5603,7 +5603,7 @@ exports[`regression tests > double click to edit a group > [end of test] appStat
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -6002,7 +6002,7 @@ exports[`regression tests > drags selected elements from point inside common bou
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -6295,7 +6295,7 @@ exports[`regression tests > draw every type of shape > [end of test] appState 1`
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -7158,7 +7158,7 @@ exports[`regression tests > given a group of selected elements with an element t
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -7494,7 +7494,7 @@ exports[`regression tests > given a selected element A and a not selected elemen
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -7774,7 +7774,7 @@ exports[`regression tests > given selected element A with lower z-index than uns
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -8011,7 +8011,7 @@ exports[`regression tests > given selected element A with lower z-index than uns
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -8251,7 +8251,7 @@ exports[`regression tests > key 2 selects rectangle tool > [end of test] appStat
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -8433,7 +8433,7 @@ exports[`regression tests > key 3 selects diamond tool > [end of test] appState
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -8615,7 +8615,7 @@ exports[`regression tests > key 4 selects ellipse tool > [end of test] appState
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -8824,7 +8824,7 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] appState 1`
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -9056,7 +9056,7 @@ exports[`regression tests > key 6 selects line tool > [end of test] appState 1`]
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -9257,7 +9257,7 @@ exports[`regression tests > key 7 selects freedraw tool > [end of test] appState
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -9484,7 +9484,7 @@ exports[`regression tests > key a selects arrow tool > [end of test] appState 1`
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -9689,7 +9689,7 @@ exports[`regression tests > key d selects diamond tool > [end of test] appState
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -9898,7 +9898,7 @@ exports[`regression tests > key l selects line tool > [end of test] appState 1`]
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -10101,7 +10101,7 @@ exports[`regression tests > key o selects ellipse tool > [end of test] appState
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -10281,7 +10281,7 @@ exports[`regression tests > key p selects freedraw tool > [end of test] appState
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -10481,7 +10481,7 @@ exports[`regression tests > key r selects rectangle tool > [end of test] appStat
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -10671,7 +10671,7 @@ exports[`regression tests > make a group and duplicate it > [end of test] appSta
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -11198,7 +11198,7 @@ exports[`regression tests > noop interaction after undo shouldn't create history
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -11476,7 +11476,7 @@ exports[`regression tests > pinch-to-zoom works > [end of test] appState 1`] = `
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -11603,7 +11603,7 @@ exports[`regression tests > shift click on selected element should deselect it o
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -11809,7 +11809,7 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -12132,7 +12132,7 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -12567,7 +12567,7 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -13200,7 +13200,7 @@ exports[`regression tests > spacebar + drag scrolls the canvas > [end of test] a
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -13329,7 +13329,7 @@ exports[`regression tests > supports nested groups > [end of test] appState 1`]
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -13991,7 +13991,7 @@ exports[`regression tests > switches from group of selected elements to another
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -14331,7 +14331,7 @@ exports[`regression tests > switches selected element on pointer down > [end of
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -14565,7 +14565,7 @@ exports[`regression tests > two-finger scroll works > [end of test] appState 1`]
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -14692,7 +14692,7 @@ exports[`regression tests > undo/redo drawing an element > [end of test] appStat
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -15084,7 +15084,7 @@ exports[`regression tests > updates fontSize & fontFamily appState > [end of tes
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,
@@ -15212,7 +15212,7 @@ exports[`regression tests > zoom hotkeys > [end of test] appState 1`] = `
"userToFollow": null,
"viewBackgroundColor": "#ffffff",
"viewModeEnabled": false,
"width": 1024,
"width": 1440,
"zenModeEnabled": false,
"zoom": {
"value": 1,

10
packages/excalidraw/tests/regressionTests.test.tsx
View File

@@ -1,7 +1,13 @@
import React from "react";
import { vi } from "vitest";
import { FONT_FAMILY, CODES, KEYS, reseed } from "@excalidraw/common";
import {
FONT_FAMILY,
CODES,
KEYS,
reseed,
MQ_MIN_WIDTH_DESKTOP,
} from "@excalidraw/common";
import { setDateTimeForTests } from "@excalidraw/common";
@@ -60,7 +66,7 @@ beforeEach(async () => {
finger2.reset();
await render(<Excalidraw handleKeyboardGlobally={true} />);
API.setAppState({ height: 768, width: 1024 });
API.setAppState({ height: 768, width: MQ_MIN_WIDTH_DESKTOP });
});
afterEach(() => {

8
packages/excalidraw/tests/test-utils.ts
View File

@@ -189,20 +189,20 @@ export const withExcalidrawDimensions = async (
dimensions: { width: number; height: number },
cb: () => void,
) => {
const { h } = window;
mockBoundingClientRect(dimensions);
act(() => {
// @ts-ignore
h.app.refreshEditorInterface();
window.h.app.refresh();
h.app.refresh();
});
await cb();
restoreOriginalGetBoundingClientRect();
act(() => {
// @ts-ignore
h.app.refreshEditorInterface();
window.h.app.refresh();
h.app.refresh();
});
};