marcel/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-10-26 08:24:20 +01:00
Code Issues Packages Projects Releases Wiki Activity

expose getFormFactor

Browse Source
This commit is contained in:
Ryan Di
2025-10-20 10:48:14 +11:00
parent fffd105dc9
commit 75c5d1cefc
4 changed files with 54 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
packages/common/src/constants.ts
View File

@@ -323,26 +323,6 @@ export const DEFAULT_UI_OPTIONS: AppProps["UIOptions"] = {
},
};
// breakpoints
// -----------------------------------------------------------------------------
// mobile: up to 699px
export const MQ_MAX_MOBILE = 599;
export const MQ_MAX_WIDTH_LANDSCAPE = 1000;
export const MQ_MAX_HEIGHT_LANDSCAPE = 500;
// tablets
export const MQ_MIN_TABLET = MQ_MAX_MOBILE + 1; // lower bound (excludes phones)
export const MQ_MAX_TABLET = 1400; // upper bound (excludes laptops/desktops)
// desktop/laptop
export const MQ_MIN_WIDTH_DESKTOP = 1440;
// sidebar
export const MQ_RIGHT_SIDEBAR_MIN_WIDTH = 1229;
// -----------------------------------------------------------------------------
export const MAX_DECIMALS_FOR_SVG_EXPORT = 2;
export const EXPORT_SCALES = [1, 2, 3];

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

@@ -13,8 +13,29 @@ export type EditorInterface = Readonly<{
isLandscape: boolean;
}>;
// storage key
export const DESKTOP_UI_MODE_STORAGE_KEY = "excalidraw.desktopUIMode";
// breakpoints
// mobile: up to 699px
export const MQ_MAX_MOBILE = 599;
export const MQ_MAX_WIDTH_LANDSCAPE = 1000;
export const MQ_MAX_HEIGHT_LANDSCAPE = 500;
// tablets
export const MQ_MIN_TABLET = MQ_MAX_MOBILE + 1; // lower bound (excludes phones)
export const MQ_MAX_TABLET = 1400; // upper bound (excludes laptops/desktops)
// desktop/laptop
export const MQ_MIN_WIDTH_DESKTOP = 1440;
// sidebar
export const MQ_RIGHT_SIDEBAR_MIN_WIDTH = 1229;
// -----------------------------------------------------------------------------
// user agent detections
export const isDarwin = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
export const isWindows = /^Win/.test(navigator.platform);
export const isAndroid = /\b(android)\b/i.test(navigator.userAgent);
@@ -41,6 +62,24 @@ export const isMobile =
) ||
/android|ios|ipod|blackberry|windows phone/i.test(navigator.platform);
// utilities
export const isMobileBreakpoint = (width: number, height: number) => {
return (
width <= MQ_MAX_MOBILE ||
(height < MQ_MAX_HEIGHT_LANDSCAPE && width < MQ_MAX_WIDTH_LANDSCAPE)
);
};
export const isTabletBreakpoint = (
editorWidth: number,
editorHeight: number,
) => {
const minSide = Math.min(editorWidth, editorHeight);
const maxSide = Math.max(editorWidth, editorHeight);
return minSide >= MQ_MIN_TABLET && maxSide <= MQ_MAX_TABLET;
};
export const isMobileOrTablet = (): boolean => {
const ua = navigator.userAgent || "";
const platform = navigator.platform || "";
@@ -97,19 +136,15 @@ export const isMobileOrTablet = (): boolean => {
return false;
};
export const deriveFormFactor = (
export const getFormFactor = (
editorWidth: number,
editorHeight: number,
breakpoints: {
isMobile: (width: number, height: number) => boolean;
isTablet: (width: number, height: number) => boolean;
},
): EditorInterface["formFactor"] => {
if (breakpoints.isMobile(editorWidth, editorHeight)) {
if (isMobileBreakpoint(editorWidth, editorHeight)) {
return "phone";
}
if (breakpoints.isTablet(editorWidth, editorHeight)) {
if (isTabletBreakpoint(editorWidth, editorHeight)) {
return "tablet";
}