diff --git a/excalidraw-app/tests/MobileMenu.test.tsx b/excalidraw-app/tests/MobileMenu.test.tsx
index 59ee66177d..70f2162f9b 100644
--- a/excalidraw-app/tests/MobileMenu.test.tsx
+++ b/excalidraw-app/tests/MobileMenu.test.tsx
@@ -17,7 +17,6 @@ describe("Test MobileMenu", () => {
beforeEach(async () => {
await render();
- // @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 () => {
diff --git a/packages/common/src/editorInterface.ts b/packages/common/src/editorInterface.ts
index 4e7c248fac..7cb78e54e5 100644
--- a/packages/common/src/editorInterface.ts
+++ b/packages/common/src/editorInterface.ts
@@ -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
diff --git a/packages/element/src/transformHandles.ts b/packages/element/src/transformHandles.ts
index b686cb49f4..4a9e5f167c 100644
--- a/packages/element/src/transformHandles.ts
+++ b/packages/element/src/transformHandles.ts
@@ -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;
};
diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx
index e161b49527..96ef9fff6c 100644
--- a/packages/excalidraw/components/App.tsx
+++ b/packages/excalidraw/components/App.tsx
@@ -105,7 +105,6 @@ import {
type StylesPanelMode,
loadDesktopUIModePreference,
setDesktopUIMode,
- isMobileOrTablet,
} from "@excalidraw/common";
import {
@@ -701,19 +700,7 @@ class App extends React.Component {
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 {
}
};
- 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 {
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 {
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 {
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 {
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 {
// 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 {
!isElbowArrow(selectedElements[0]) &&
!(
isLinearElement(selectedElements[0]) &&
- (isMobileOrTablet() || selectedElements[0].points.length === 2)
+ (this.editorInterface.userAgent.isMobileDevice ||
+ selectedElements[0].points.length === 2)
) &&
!(
this.state.selectedLinearElement &&
diff --git a/packages/excalidraw/renderer/interactiveScene.ts b/packages/excalidraw/renderer/interactiveScene.ts
index 5c928e1998..b948aa8c38 100644
--- a/packages/excalidraw/renderer/interactiveScene.ts
+++ b/packages/excalidraw/renderer/interactiveScene.ts
@@ -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]);
diff --git a/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap b/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap
index 2bacaaa735..43ca509d84 100644
--- a/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap
+++ b/packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap
@@ -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,
diff --git a/packages/excalidraw/tests/regressionTests.test.tsx b/packages/excalidraw/tests/regressionTests.test.tsx
index d4b5185bac..2ee2167914 100644
--- a/packages/excalidraw/tests/regressionTests.test.tsx
+++ b/packages/excalidraw/tests/regressionTests.test.tsx
@@ -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();
- API.setAppState({ height: 768, width: 1024 });
+ API.setAppState({ height: 768, width: MQ_MIN_WIDTH_DESKTOP });
});
afterEach(() => {
diff --git a/packages/excalidraw/tests/test-utils.ts b/packages/excalidraw/tests/test-utils.ts
index 6c77e10a0b..7289a59820 100644
--- a/packages/excalidraw/tests/test-utils.ts
+++ b/packages/excalidraw/tests/test-utils.ts
@@ -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();
});
};