marcel/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-10-23 16:04:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor device to editor interface and derive styles panel

Browse Source
This commit is contained in:
Ryan Di
2025-10-15 01:58:09 +11:00
parent 8608d7b2e0
commit 1225fcc339
49 changed files with 704 additions and 680 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
packages/element/src/resizeTest.ts
View File

@@ -9,13 +9,17 @@ import { SIDE_RESIZING_THRESHOLD } from "@excalidraw/common";
import type { GlobalPoint, LineSegment, LocalPoint } from "@excalidraw/math";
import type { AppState, Device, Zoom } from "@excalidraw/excalidraw/types";
import type {
AppState,
EditorInterface,
Zoom,
} from "@excalidraw/excalidraw/types";
import { getElementAbsoluteCoords } from "./bounds";
import {
getTransformHandlesFromCoords,
getTransformHandles,
getOmitSidesForDevice,
getOmitSidesForEditorInterface,
canResizeFromSides,
} from "./transformHandles";
import { isImageElement, isLinearElement } from "./typeChecks";
@@ -51,7 +55,7 @@ export const resizeTest = <Point extends GlobalPoint | LocalPoint>(
y: number,
zoom: Zoom,
pointerType: PointerType,
device: Device,
editorInterface: EditorInterface,
): MaybeTransformHandleType => {
if (!appState.selectedElementIds[element.id]) {
return false;
@@ -63,7 +67,7 @@ export const resizeTest = <Point extends GlobalPoint | LocalPoint>(
zoom,
elementsMap,
pointerType,
getOmitSidesForDevice(device),
getOmitSidesForEditorInterface(editorInterface),
);
if (
@@ -86,7 +90,7 @@ export const resizeTest = <Point extends GlobalPoint | LocalPoint>(
return filter[0] as TransformHandleType;
}
if (canResizeFromSides(device)) {
if (canResizeFromSides(editorInterface)) {
const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(
element,
elementsMap,
@@ -132,7 +136,7 @@ export const getElementWithTransformHandleType = (
zoom: Zoom,
pointerType: PointerType,
elementsMap: ElementsMap,
device: Device,
editorInterface: EditorInterface,
) => {
return elements.reduce((result, element) => {
if (result) {
@@ -146,7 +150,7 @@ export const getElementWithTransformHandleType = (
scenePointerY,
zoom,
pointerType,
device,
editorInterface,
);
return transformHandleType ? { element, transformHandleType } : null;
}, null as { element: NonDeletedExcalidrawElement; transformHandleType: MaybeTransformHandleType } | null);
@@ -160,14 +164,14 @@ export const getTransformHandleTypeFromCoords = <
scenePointerY: number,
zoom: Zoom,
pointerType: PointerType,
device: Device,
editorInterface: EditorInterface,
): MaybeTransformHandleType => {
const transformHandles = getTransformHandlesFromCoords(
[x1, y1, x2, y2, (x1 + x2) / 2, (y1 + y2) / 2],
0 as Radians,
zoom,
pointerType,
getOmitSidesForDevice(device),
getOmitSidesForEditorInterface(editorInterface),
);
const found = Object.keys(transformHandles).find((key) => {
@@ -183,7 +187,7 @@ export const getTransformHandleTypeFromCoords = <
return found as MaybeTransformHandleType;
}
if (canResizeFromSides(device)) {
if (canResizeFromSides(editorInterface)) {
const cx = (x1 + x2) / 2;
const cy = (y1 + y2) / 2;

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

@@ -1,15 +1,11 @@
import {
DEFAULT_TRANSFORM_HANDLE_SPACING,
isAndroid,
isIOS,
} from "@excalidraw/common";
import { DEFAULT_TRANSFORM_HANDLE_SPACING } from "@excalidraw/common";
import { pointFrom, pointRotateRads } from "@excalidraw/math";
import type { Radians } from "@excalidraw/math";
import type {
Device,
EditorInterface,
InteractiveCanvasAppState,
Zoom,
} from "@excalidraw/excalidraw/types";
@@ -111,20 +107,21 @@ const generateTransformHandle = (
return [xx - width / 2, yy - height / 2, width, height];
};
export const canResizeFromSides = (device: Device) => {
if (device.viewport.isMobile) {
return false;
}
if (device.isTouchScreen && (isAndroid || isIOS)) {
export const canResizeFromSides = (editorInterface: EditorInterface) => {
if (
editorInterface.formFactor === "phone" &&
editorInterface.userAgent.isMobileDevice
) {
return false;
}
return true;
};
export const getOmitSidesForDevice = (device: Device) => {
if (canResizeFromSides(device)) {
export const getOmitSidesForEditorInterface = (
editorInterface: EditorInterface,
) => {
if (canResizeFromSides(editorInterface)) {
return DEFAULT_OMIT_SIDES;
}