gilles/excalidraw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/master' into zsviczian-stickynote

Browse Source
This commit is contained in:
zsviczian
2025-12-01 11:20:08 +00:00
parent d668eaa060 210dc85c8c
commit 5760c2b30d
208 changed files with 22066 additions and 9874 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/common/src/constants.ts
+3 -46
View File
@@ -6,32 +6,6 @@ import type { AppProps, AppState } from "@excalidraw/excalidraw/types";
import { COLOR_PALETTE } from "./colors";
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);
export const isFirefox =
typeof window !== "undefined" &&
"netscape" in window &&
navigator.userAgent.indexOf("rv:") > 1 &&
navigator.userAgent.indexOf("Gecko") > 1;
export const isChrome = navigator.userAgent.indexOf("Chrome") !== -1;
export const isSafari =
!isChrome && navigator.userAgent.indexOf("Safari") !== -1;
export const isIOS =
/iPad|iPhone/i.test(navigator.platform) ||
// iPadOS 13+
(navigator.userAgent.includes("Mac") && "ontouchend" in document);
// keeping function so it can be mocked in test
export const isBrave = () =>
(navigator as any).brave?.isBrave?.name === "isBrave";
export const isMobile =
isIOS ||
/android|webos|ipod|blackberry|iemobile|opera mini/i.test(
navigator.userAgent,
) ||
/android|ios|ipod|blackberry|windows phone/i.test(navigator.platform);
export const supportsResizeObserver =
typeof window !== "undefined" && "ResizeObserver" in window;
@@ -131,6 +105,7 @@ export const CLASSES = {
SEARCH_MENU_INPUT_WRAPPER: "layer-ui__search-inputWrapper",
CONVERT_ELEMENT_TYPE_POPUP: "ConvertElementTypePopup",
SHAPE_ACTIONS_THEME_SCOPE: "shape-actions-theme-scope",
FRAME_NAME: "frame-name",
};
export const CJK_HAND_DRAWN_FALLBACK_FONT = "Xiaolai";
@@ -349,26 +324,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];
@@ -549,6 +504,8 @@ export const LINE_POLYGON_POINT_MERGE_DISTANCE = 20;
export const DOUBLE_TAP_POSITION_THRESHOLD = 35;
export const BIND_MODE_TIMEOUT = 700; // ms
// glass background for mobile action buttons
export const MOBILE_ACTION_BUTTON_BG = {
background: "var(--mobile-action-button-bg)",
packages/common/src/editorInterface.ts
+223
View File
@@ -0,0 +1,223 @@
export type StylesPanelMode = "compact" | "full" | "mobile";
export type EditorInterface = Readonly<{
formFactor: "phone" | "tablet" | "desktop";
desktopUIMode: "compact" | "full";
userAgent: Readonly<{
isMobileDevice: boolean;
platform: "ios" | "android" | "other" | "unknown";
}>;
isTouchScreen: boolean;
canFitSidebar: boolean;
isLandscape: boolean;
}>;
// storage key
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);
export const isFirefox =
typeof window !== "undefined" &&
"netscape" in window &&
navigator.userAgent.indexOf("rv:") > 1 &&
navigator.userAgent.indexOf("Gecko") > 1;
export const isChrome = navigator.userAgent.indexOf("Chrome") !== -1;
export const isSafari =
!isChrome && navigator.userAgent.indexOf("Safari") !== -1;
export const isIOS =
/iPad|iPhone/i.test(navigator.platform) ||
// iPadOS 13+
(navigator.userAgent.includes("Mac") && "ontouchend" in document);
// keeping function so it can be mocked in test
export const isBrave = () =>
(navigator as any).brave?.isBrave?.name === "isBrave";
// export const isMobile =
// isIOS ||
// /android|webos|ipod|blackberry|iemobile|opera mini/i.test(
// navigator.userAgent,
// ) ||
// /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;
};
const isMobileOrTablet = (): boolean => {
const ua = navigator.userAgent || "";
const platform = navigator.platform || "";
const uaData = (navigator as any).userAgentData as
| { mobile?: boolean; platform?: string }
| undefined;
// --- 1) chromium: prefer ua client hints -------------------------------
if (uaData) {
const plat = (uaData.platform || "").toLowerCase();
const isDesktopOS =
plat === "windows" ||
plat === "macos" ||
plat === "linux" ||
plat === "chrome os";
if (uaData.mobile === true) {
return true;
}
if (uaData.mobile === false && plat === "android") {
const looksTouchTablet =
matchMedia?.("(hover: none)").matches &&
matchMedia?.("(pointer: coarse)").matches;
return looksTouchTablet;
}
if (isDesktopOS) {
return false;
}
}
// --- 2) ios (includes ipad) --------------------------------------------
if (isIOS) {
return true;
}
// --- 3) android legacy ua fallback -------------------------------------
if (isAndroid) {
const isAndroidPhone = /Mobile/i.test(ua);
const isAndroidTablet = !isAndroidPhone;
if (isAndroidPhone || isAndroidTablet) {
const looksTouchTablet =
matchMedia?.("(hover: none)").matches &&
matchMedia?.("(pointer: coarse)").matches;
return looksTouchTablet;
}
}
// --- 4) last resort desktop exclusion ----------------------------------
const looksDesktopPlatform =
/Win|Linux|CrOS|Mac/.test(platform) ||
/Windows NT|X11|CrOS|Macintosh/.test(ua);
if (looksDesktopPlatform) {
return false;
}
return false;
};
export const getFormFactor = (
editorWidth: number,
editorHeight: number,
): EditorInterface["formFactor"] => {
if (isMobileBreakpoint(editorWidth, editorHeight)) {
return "phone";
}
if (isTabletBreakpoint(editorWidth, editorHeight)) {
return "tablet";
}
return "desktop";
};
export const deriveStylesPanelMode = (
editorInterface: EditorInterface,
): StylesPanelMode => {
if (editorInterface.formFactor === "phone") {
return "mobile";
}
if (editorInterface.formFactor === "tablet") {
return "compact";
}
return editorInterface.desktopUIMode;
};
export const createUserAgentDescriptor = (
userAgentString: string,
): EditorInterface["userAgent"] => {
const normalizedUA = userAgentString ?? "";
let platform: EditorInterface["userAgent"]["platform"] = "unknown";
if (isIOS) {
platform = "ios";
} else if (isAndroid) {
platform = "android";
} else if (normalizedUA) {
platform = "other";
}
return {
isMobileDevice: isMobileOrTablet(),
platform,
} as const;
};
export const loadDesktopUIModePreference = () => {
if (typeof window === "undefined") {
return null;
}
try {
const stored = window.localStorage.getItem(DESKTOP_UI_MODE_STORAGE_KEY);
if (stored === "compact" || stored === "full") {
return stored as EditorInterface["desktopUIMode"];
}
} catch (error) {
// ignore storage access issues (e.g., Safari private mode)
}
return null;
};
const persistDesktopUIMode = (mode: EditorInterface["desktopUIMode"]) => {
if (typeof window === "undefined") {
return;
}
try {
window.localStorage.setItem(DESKTOP_UI_MODE_STORAGE_KEY, mode);
} catch (error) {
// ignore storage access issues (e.g., Safari private mode)
}
};
export const setDesktopUIMode = (mode: EditorInterface["desktopUIMode"]) => {
if (mode !== "compact" && mode !== "full") {
return;
}
persistDesktopUIMode(mode);
return mode;
};
packages/common/src/index.ts
+2
View File
@@ -10,3 +10,5 @@ export * from "./random";
export * from "./url";
export * from "./utils";
export * from "./emitter";
export * from "./visualdebug";
export * from "./editorInterface";
packages/common/src/keys.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { isDarwin } from "./constants";
import { isDarwin } from "./editorInterface";
import type { ValueOf } from "./utility-types";
packages/common/src/utils.ts
+47 -64
View File
@@ -1,10 +1,6 @@
import { average } from "@excalidraw/math";
import type {
ExcalidrawBindableElement,
FontFamilyValues,
FontString,
} from "@excalidraw/element/types";
import type { FontFamilyValues, FontString } from "@excalidraw/element/types";
import type {
ActiveTool,
@@ -20,8 +16,6 @@ import {
ENV,
FONT_FAMILY,
getFontFamilyFallbacks,
isAndroid,
isIOS,
WINDOWS_EMOJI_FALLBACK_FONT,
} from "./constants";
@@ -384,6 +378,10 @@ export const removeSelection = () => {
export const distance = (x: number, y: number) => Math.abs(x - y);
export const isSelectionLikeTool = (type: ToolType | "custom") => {
return type === "selection" || type === "lasso";
};
export const updateActiveTool = (
appState: Pick<AppState, "activeTool">,
data: ((
@@ -560,9 +558,6 @@ export const isTransparent = (color: string) => {
);
};
export const isBindingFallthroughEnabled = (el: ExcalidrawBindableElement) =>
el.fillStyle !== "solid" || isTransparent(el.backgroundColor);
export type ResolvablePromise<T> = Promise<T> & {
resolve: [T] extends [undefined]
? (value?: MaybePromise<Awaited<T>>) => void
@@ -1273,58 +1268,46 @@ export const reduceToCommonValue = <T, R = T>(
return commonValue;
};
export const isMobileOrTablet = (): boolean => {
const ua = navigator.userAgent || "";
const platform = navigator.platform || "";
const uaData = (navigator as any).userAgentData as
| { mobile?: boolean; platform?: string }
| undefined;
// --- 1) chromium: prefer ua client hints -------------------------------
if (uaData) {
const plat = (uaData.platform || "").toLowerCase();
const isDesktopOS =
plat === "windows" ||
plat === "macos" ||
plat === "linux" ||
plat === "chrome os";
if (uaData.mobile === true) {
return true;
}
if (uaData.mobile === false && plat === "android") {
const looksTouchTablet =
matchMedia?.("(hover: none)").matches &&
matchMedia?.("(pointer: coarse)").matches;
return looksTouchTablet;
}
if (isDesktopOS) {
return false;
}
}
// --- 2) ios (includes ipad) --------------------------------------------
if (isIOS) {
return true;
}
// --- 3) android legacy ua fallback -------------------------------------
if (isAndroid) {
const isAndroidPhone = /Mobile/i.test(ua);
const isAndroidTablet = !isAndroidPhone;
if (isAndroidPhone || isAndroidTablet) {
const looksTouchTablet =
matchMedia?.("(hover: none)").matches &&
matchMedia?.("(pointer: coarse)").matches;
return looksTouchTablet;
}
}
// --- 4) last resort desktop exclusion ----------------------------------
const looksDesktopPlatform =
/Win|Linux|CrOS|Mac/.test(platform) ||
/Windows NT|X11|CrOS|Macintosh/.test(ua);
if (looksDesktopPlatform) {
return false;
}
return false;
type FEATURE_FLAGS = {
COMPLEX_BINDINGS: boolean;
};
const FEATURE_FLAGS_STORAGE_KEY = "excalidraw-feature-flags";
const DEFAULT_FEATURE_FLAGS: FEATURE_FLAGS = {
COMPLEX_BINDINGS: false,
};
let featureFlags: FEATURE_FLAGS | null = null;
export const getFeatureFlag = <F extends keyof FEATURE_FLAGS>(
flag: F,
): FEATURE_FLAGS[F] => {
if (!featureFlags) {
try {
const serializedFlags = localStorage.getItem(FEATURE_FLAGS_STORAGE_KEY);
if (serializedFlags) {
const flags = JSON.parse(serializedFlags);
featureFlags = flags ?? DEFAULT_FEATURE_FLAGS;
}
} catch {}
}
return (featureFlags || DEFAULT_FEATURE_FLAGS)[flag];
};
export const setFeatureFlag = <F extends keyof FEATURE_FLAGS>(
flag: F,
value: FEATURE_FLAGS[F],
) => {
try {
featureFlags = {
...(featureFlags || DEFAULT_FEATURE_FLAGS),
[flag]: value,
};
localStorage.setItem(
FEATURE_FLAGS_STORAGE_KEY,
JSON.stringify(featureFlags),
);
} catch (e) {
console.error("unable to set feature flag", e);
}
};
packages/utils/src/visualdebug.ts → packages/common/src/visualdebug.ts
+1 -1
View File
@@ -139,7 +139,7 @@ export const debugDrawPoints = (
}: {
x: number;
y: number;
points: LocalPoint[];
points: readonly LocalPoint[];
},
options?: any,
) => {
packages/element/src/binding.ts
+1218 -1231
View File
File diff suppressed because it is too large Load Diff
packages/element/src/bounds.ts
+7
View File
@@ -1276,6 +1276,13 @@ export const elementCenterPoint = (
xOffset: number = 0,
yOffset: number = 0,
) => {
if (isLinearElement(element)) {
const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
const [x, y] = pointFrom<GlobalPoint>((x1 + x2) / 2, (y1 + y2) / 2);
return pointFrom<GlobalPoint>(x + xOffset, y + yOffset);
}
const [x, y] = getCenterForBounds(getElementBounds(element, elementsMap));
return pointFrom<GlobalPoint>(x + xOffset, y + yOffset);
packages/element/src/collision.ts
+183 -2
View File
@@ -1,4 +1,4 @@
import { isTransparent } from "@excalidraw/common";
import { invariant, isTransparent } from "@excalidraw/common";
import {
curveIntersectLineSegment,
isPointWithinBounds,
@@ -34,10 +34,14 @@ import {
elementCenterPoint,
getCenterForBounds,
getCubicBezierCurveBound,
getDiamondPoints,
getElementBounds,
pointInsideBounds,
} from "./bounds";
import {
hasBoundTextElement,
isBindableElement,
isFrameLikeElement,
isFreeDrawElement,
isIframeLikeElement,
isImageElement,
@@ -58,12 +62,17 @@ import { distanceToElement } from "./distance";
import type {
ElementsMap,
ExcalidrawBindableElement,
ExcalidrawDiamondElement,
ExcalidrawElement,
ExcalidrawEllipseElement,
ExcalidrawFreeDrawElement,
ExcalidrawLinearElement,
ExcalidrawRectanguloidElement,
NonDeleted,
NonDeletedExcalidrawElement,
NonDeletedSceneElementsMap,
Ordered,
} from "./types";
export const shouldTestInside = (element: ExcalidrawElement) => {
@@ -94,6 +103,7 @@ export type HitTestArgs = {
threshold: number;
elementsMap: ElementsMap;
frameNameBound?: FrameNameBounds | null;
overrideShouldTestInside?: boolean;
};
export const hitElementItself = ({
@@ -102,6 +112,7 @@ export const hitElementItself = ({
threshold,
elementsMap,
frameNameBound = null,
overrideShouldTestInside = false,
}: HitTestArgs) => {
// Hit test against a frame's name
const hitFrameName = frameNameBound
@@ -134,7 +145,9 @@ export const hitElementItself = ({
}
// Do the precise (and relatively costly) hit test
const hitElement = shouldTestInside(element)
const hitElement = (
overrideShouldTestInside ? true : shouldTestInside(element)
)
? // Since `inShape` tests STRICTLY againt the insides of a shape
// we would need `onShape` as well to include the "borders"
isPointInElement(point, element, elementsMap) ||
@@ -193,6 +206,116 @@ export const hitElementBoundText = (
return isPointInElement(point, boundTextElement, elementsMap);
};
const bindingBorderTest = (
element: NonDeleted<ExcalidrawBindableElement>,
[x, y]: Readonly<GlobalPoint>,
elementsMap: NonDeletedSceneElementsMap,
tolerance: number = 0,
): boolean => {
const p = pointFrom<GlobalPoint>(x, y);
const shouldTestInside =
// disable fullshape snapping for frame elements so we
// can bind to frame children
!isFrameLikeElement(element);
// PERF: Run a cheap test to see if the binding element
// is even close to the element
const t = Math.max(1, tolerance);
const bounds = [x - t, y - t, x + t, y + t] as Bounds;
const elementBounds = getElementBounds(element, elementsMap);
if (!doBoundsIntersect(bounds, elementBounds)) {
return false;
}
// If the element is inside a frame, we should clip the element
if (element.frameId) {
const enclosingFrame = elementsMap.get(element.frameId);
if (enclosingFrame && isFrameLikeElement(enclosingFrame)) {
const enclosingFrameBounds = getElementBounds(
enclosingFrame,
elementsMap,
);
if (!pointInsideBounds(p, enclosingFrameBounds)) {
return false;
}
}
}
// Do the intersection test against the element since it's close enough
const intersections = intersectElementWithLineSegment(
element,
elementsMap,
lineSegment(elementCenterPoint(element, elementsMap), p),
);
const distance = distanceToElement(element, elementsMap, p);
return shouldTestInside
? intersections.length === 0 || distance <= tolerance
: intersections.length > 0 && distance <= t;
};
export const getAllHoveredElementAtPoint = (
point: Readonly<GlobalPoint>,
elements: readonly Ordered<NonDeletedExcalidrawElement>[],
elementsMap: NonDeletedSceneElementsMap,
toleranceFn?: (element: ExcalidrawBindableElement) => number,
): NonDeleted<ExcalidrawBindableElement>[] => {
const candidateElements: NonDeleted<ExcalidrawBindableElement>[] = [];
// We need to to hit testing from front (end of the array) to back (beginning of the array)
// because array is ordered from lower z-index to highest and we want element z-index
// with higher z-index
for (let index = elements.length - 1; index >= 0; --index) {
const element = elements[index];
invariant(
!element.isDeleted,
"Elements in the function parameter for getAllElementsAtPositionForBinding() should not contain deleted elements",
);
if (
isBindableElement(element, false) &&
bindingBorderTest(element, point, elementsMap, toleranceFn?.(element))
) {
candidateElements.push(element);
if (!isTransparent(element.backgroundColor)) {
break;
}
}
}
return candidateElements;
};
export const getHoveredElementForBinding = (
point: Readonly<GlobalPoint>,
elements: readonly Ordered<NonDeletedExcalidrawElement>[],
elementsMap: NonDeletedSceneElementsMap,
toleranceFn?: (element: ExcalidrawBindableElement) => number,
): NonDeleted<ExcalidrawBindableElement> | null => {
const candidateElements = getAllHoveredElementAtPoint(
point,
elements,
elementsMap,
toleranceFn,
);
if (!candidateElements || candidateElements.length === 0) {
return null;
}
if (candidateElements.length === 1) {
return candidateElements[0];
}
// Prefer smaller shapes
return candidateElements
.sort(
(a, b) => b.width ** 2 + b.height ** 2 - (a.width ** 2 + a.height ** 2),
)
.pop() as NonDeleted<ExcalidrawBindableElement>;
};
/**
* Intersect a line with an element for binding test
*
@@ -554,3 +677,61 @@ export const isPointInElement = (
return intersections.length % 2 === 1;
};
export const isBindableElementInsideOtherBindable = (
innerElement: ExcalidrawBindableElement,
outerElement: ExcalidrawBindableElement,
elementsMap: ElementsMap,
): boolean => {
// Get corner points of the inner element based on its type
const getCornerPoints = (
element: ExcalidrawElement,
offset: number,
): GlobalPoint[] => {
const { x, y, width, height, angle } = element;
const center = elementCenterPoint(element, elementsMap);
if (element.type === "diamond") {
// Diamond has 4 corner points at the middle of each side
const [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY] =
getDiamondPoints(element);
const corners: GlobalPoint[] = [
pointFrom(x + topX, y + topY - offset), // top
pointFrom(x + rightX + offset, y + rightY), // right
pointFrom(x + bottomX, y + bottomY + offset), // bottom
pointFrom(x + leftX - offset, y + leftY), // left
];
return corners.map((corner) => pointRotateRads(corner, center, angle));
}
if (element.type === "ellipse") {
// For ellipse, test points at the extremes (top, right, bottom, left)
const cx = x + width / 2;
const cy = y + height / 2;
const rx = width / 2;
const ry = height / 2;
const corners: GlobalPoint[] = [
pointFrom(cx, cy - ry - offset), // top
pointFrom(cx + rx + offset, cy), // right
pointFrom(cx, cy + ry + offset), // bottom
pointFrom(cx - rx - offset, cy), // left
];
return corners.map((corner) => pointRotateRads(corner, center, angle));
}
// Rectangle and other rectangular shapes (image, text, etc.)
const corners: GlobalPoint[] = [
pointFrom(x - offset, y - offset), // top-left
pointFrom(x + width + offset, y - offset), // top-right
pointFrom(x + width + offset, y + height + offset), // bottom-right
pointFrom(x - offset, y + height + offset), // bottom-left
];
return corners.map((corner) => pointRotateRads(corner, center, angle));
};
const offset = (-1 * Math.max(innerElement.width, innerElement.height)) / 20; // 5% offset
const innerCorners = getCornerPoints(innerElement, offset);
// Check if all corner points of the inner element are inside the outer element
return innerCorners.every((corner) =>
isPointInElement(corner, outerElement, elementsMap),
);
};
packages/element/src/dragElements.ts
+47 -2
View File
@@ -2,6 +2,7 @@ import {
TEXT_AUTOWRAP_THRESHOLD,
getGridPoint,
getFontString,
DRAGGING_THRESHOLD,
} from "@excalidraw/common";
import type {
@@ -13,7 +14,7 @@ import type {
import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
import { updateBoundElements } from "./binding";
import { unbindBindingElement, updateBoundElements } from "./binding";
import { getCommonBounds } from "./bounds";
import { getPerfectElementSize } from "./sizeHelpers";
import { getBoundTextElement } from "./textElement";
@@ -102,9 +103,26 @@ export const dragSelectedElements = (
gridSize,
);
const elementsToUpdateIds = new Set(
Array.from(elementsToUpdate, (el) => el.id),
);
elementsToUpdate.forEach((element) => {
updateElementCoords(pointerDownState, element, scene, adjustedOffset);
const isArrow = !isArrowElement(element);
const isStartBoundElementSelected =
isArrow ||
(element.startBinding
? elementsToUpdateIds.has(element.startBinding.elementId)
: false);
const isEndBoundElementSelected =
isArrow ||
(element.endBinding
? elementsToUpdateIds.has(element.endBinding.elementId)
: false);
if (!isArrowElement(element)) {
updateElementCoords(pointerDownState, element, scene, adjustedOffset);
// skip arrow labels since we calculate its position during render
const textElement = getBoundTextElement(
element,
@@ -121,6 +139,33 @@ export const dragSelectedElements = (
updateBoundElements(element, scene, {
simultaneouslyUpdated: Array.from(elementsToUpdate),
});
} else if (
// NOTE: Add a little initial drag to the arrow dragging when the arrow
// is the single element being dragged to avoid accidentally unbinding
// the arrow when the user just wants to select it.
elementsToUpdate.size > 1 ||
Math.max(Math.abs(adjustedOffset.x), Math.abs(adjustedOffset.y)) >
DRAGGING_THRESHOLD ||
(!element.startBinding && !element.endBinding)
) {
updateElementCoords(pointerDownState, element, scene, adjustedOffset);
const shouldUnbindStart =
element.startBinding && !isStartBoundElementSelected;
const shouldUnbindEnd = element.endBinding && !isEndBoundElementSelected;
if (shouldUnbindStart || shouldUnbindEnd) {
// NOTE: Moving the bound arrow should unbind it, otherwise we would
// have weird situations, like 0 lenght arrow when the user moves
// the arrow outside a filled shape suddenly forcing the arrow start
// and end point to jump "outside" the shape.
if (shouldUnbindStart) {
unbindBindingElement(element, "start", scene);
}
if (shouldUnbindEnd) {
unbindBindingElement(element, "end", scene);
}
}
}
});
};
packages/element/src/elbowArrow.ts
+22 -17
View File
@@ -17,7 +17,6 @@ import {
BinaryHeap,
invariant,
isAnyTrue,
tupleToCoors,
getSizeFromPoints,
isDevEnv,
arrayToMap,
@@ -27,10 +26,11 @@ import type { AppState } from "@excalidraw/excalidraw/types";
import {
bindPointToSnapToElementOutline,
FIXED_BINDING_DISTANCE,
getHeadingForElbowArrowSnap,
getGlobalFixedPointForBindableElement,
getHoveredElementForBinding,
getBindingGap,
maxBindingDistance_simple,
BASE_BINDING_GAP_ELBOW,
} from "./binding";
import { distanceToElement } from "./distance";
import {
@@ -51,8 +51,8 @@ import {
type ExcalidrawElbowArrowElement,
type NonDeletedSceneElementsMap,
} from "./types";
import { aabbForElement, pointInsideBounds } from "./bounds";
import { getHoveredElementForBinding } from "./collision";
import type { Bounds } from "./bounds";
import type { Heading } from "./heading";
@@ -63,6 +63,7 @@ import type {
FixedPointBinding,
FixedSegment,
NonDeletedExcalidrawElement,
Ordered,
} from "./types";
type GridAddress = [number, number] & { _brand: "gridaddress" };
@@ -1243,6 +1244,7 @@ const getElbowArrowData = (
const startGlobalPoint = getGlobalPoint(
{
...arrow,
angle: 0,
type: "arrow",
elbowed: true,
points: nextPoints,
@@ -1257,6 +1259,7 @@ const getElbowArrowData = (
const endGlobalPoint = getGlobalPoint(
{
...arrow,
angle: 0,
type: "arrow",
elbowed: true,
points: nextPoints,
@@ -1274,6 +1277,7 @@ const getElbowArrowData = (
hoveredStartElement,
origStartGlobalPoint,
elementsMap,
options?.zoom,
);
const endHeading = getBindPointHeading(
endGlobalPoint,
@@ -1281,6 +1285,7 @@ const getElbowArrowData = (
hoveredEndElement,
origEndGlobalPoint,
elementsMap,
options?.zoom,
);
const startPointBounds = [
startGlobalPoint[0] - 2,
@@ -1301,8 +1306,8 @@ const getElbowArrowData = (
offsetFromHeading(
startHeading,
arrow.startArrowhead
? FIXED_BINDING_DISTANCE * 6
: FIXED_BINDING_DISTANCE * 2,
? getBindingGap(hoveredStartElement, { elbowed: true }) * 6
: getBindingGap(hoveredStartElement, { elbowed: true }) * 2,
1,
),
)
@@ -1314,8 +1319,8 @@ const getElbowArrowData = (
offsetFromHeading(
endHeading,
arrow.endArrowhead
? FIXED_BINDING_DISTANCE * 6
: FIXED_BINDING_DISTANCE * 2,
? getBindingGap(hoveredEndElement, { elbowed: true }) * 6
: getBindingGap(hoveredEndElement, { elbowed: true }) * 2,
1,
),
)
@@ -1362,8 +1367,8 @@ const getElbowArrowData = (
? 0
: BASE_PADDING -
(arrow.startArrowhead
? FIXED_BINDING_DISTANCE * 6
: FIXED_BINDING_DISTANCE * 2),
? BASE_BINDING_GAP_ELBOW * 6
: BASE_BINDING_GAP_ELBOW * 2),
BASE_PADDING,
),
boundsOverlap
@@ -1378,8 +1383,8 @@ const getElbowArrowData = (
? 0
: BASE_PADDING -
(arrow.endArrowhead
? FIXED_BINDING_DISTANCE * 6
: FIXED_BINDING_DISTANCE * 2),
? BASE_BINDING_GAP_ELBOW * 6
: BASE_BINDING_GAP_ELBOW * 2),
BASE_PADDING,
),
boundsOverlap,
@@ -2239,6 +2244,7 @@ const getBindPointHeading = (
hoveredElement: ExcalidrawBindableElement | null | undefined,
origPoint: GlobalPoint,
elementsMap: ElementsMap,
zoom?: AppState["zoom"],
): Heading =>
getHeadingForElbowArrowSnap(
p,
@@ -2257,21 +2263,20 @@ const getBindPointHeading = (
),
origPoint,
elementsMap,
zoom,
);
const getHoveredElement = (
origPoint: GlobalPoint,
elementsMap: NonDeletedSceneElementsMap,
elements: readonly NonDeletedExcalidrawElement[],
elements: readonly Ordered<NonDeletedExcalidrawElement>[],
zoom?: AppState["zoom"],
) => {
return getHoveredElementForBinding(
tupleToCoors(origPoint),
origPoint,
elements,
elementsMap,
zoom,
true,
true,
(element) => maxBindingDistance_simple(zoom),
);
};
packages/element/src/flowchart.ts
+9 -3
View File
@@ -7,7 +7,7 @@ import type {
PendingExcalidrawElements,
} from "@excalidraw/excalidraw/types";
import { bindLinearElement } from "./binding";
import { bindBindingElement } from "./binding";
import { updateElbowArrowPoints } from "./elbowArrow";
import {
HEADING_DOWN,
@@ -448,8 +448,14 @@ const createBindingArrow = (
const elementsMap = scene.getNonDeletedElementsMap();
bindLinearElement(bindingArrow, startBindingElement, "start", scene);
bindLinearElement(bindingArrow, endBindingElement, "end", scene);
bindBindingElement(
bindingArrow,
startBindingElement,
"orbit",
"start",
scene,
);
bindBindingElement(bindingArrow, endBindingElement, "orbit", "end", scene);
const changedElements = new Map<string, OrderedExcalidrawElement>();
changedElements.set(
packages/element/src/index.ts
-22
View File
@@ -1,7 +1,6 @@
import { toIterable } from "@excalidraw/common";
import { isInvisiblySmallElement } from "./sizeHelpers";
import { isLinearElementType } from "./typeChecks";
import type {
ExcalidrawElement,
@@ -55,27 +54,6 @@ export const isNonDeletedElement = <T extends ExcalidrawElement>(
element: T,
): element is NonDeleted<T> => !element.isDeleted;
const _clearElements = (
elements: readonly ExcalidrawElement[],
): ExcalidrawElement[] =>
getNonDeletedElements(elements).map((element) =>
isLinearElementType(element.type)
? { ...element, lastCommittedPoint: null }
: element,
);
export const clearElementsForDatabase = (
elements: readonly ExcalidrawElement[],
) => _clearElements(elements);
export const clearElementsForExport = (
elements: readonly ExcalidrawElement[],
) => _clearElements(elements);
export const clearElementsForLocalStorage = (
elements: readonly ExcalidrawElement[],
) => _clearElements(elements);
export * from "./align";
export * from "./binding";
export * from "./bounds";
packages/element/src/linearElementEditor.ts
+763 -371
View File
File diff suppressed because it is too large Load Diff
packages/element/src/mutateElement.ts
+2 -5
View File
@@ -46,16 +46,13 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
// casting to any because can't use `in` operator
// (see https://github.com/microsoft/TypeScript/issues/21732)
const { points, fixedSegments, startBinding, endBinding, fileId } =
updates as any;
const { points, fixedSegments, fileId } = updates as any;
if (
isElbowArrow(element) &&
(Object.keys(updates).length === 0 || // normalization case
typeof points !== "undefined" || // repositioning
typeof fixedSegments !== "undefined" || // segment fixing
typeof startBinding !== "undefined" ||
typeof endBinding !== "undefined") // manual binding to element
typeof fixedSegments !== "undefined") // segment fixing
) {
updates = {
...updates,
packages/element/src/newElement.ts
+1 -4
View File
@@ -562,7 +562,6 @@ export const newFreeDrawElement = (
points: opts.points || [],
pressures: opts.pressures || [],
simulatePressure: opts.simulatePressure,
lastCommittedPoint: null,
};
};
@@ -576,7 +575,7 @@ export const newLinearElement = (
const element = {
..._newElementBase<ExcalidrawLinearElement>(opts.type, opts),
points: opts.points || [],
lastCommittedPoint: null,
startBinding: null,
endBinding: null,
startArrowhead: null,
@@ -611,7 +610,6 @@ export const newArrowElement = <T extends boolean>(
return {
..._newElementBase<ExcalidrawElbowArrowElement>(opts.type, opts),
points: opts.points || [],
lastCommittedPoint: null,
startBinding: null,
endBinding: null,
startArrowhead: opts.startArrowhead || null,
@@ -626,7 +624,6 @@ export const newArrowElement = <T extends boolean>(
return {
..._newElementBase<ExcalidrawArrowElement>(opts.type, opts),
points: opts.points || [],
lastCommittedPoint: null,
startBinding: null,
endBinding: null,
startArrowhead: opts.startArrowhead || null,
packages/element/src/renderElement.ts
+10 -17
View File
@@ -98,7 +98,7 @@ const isPendingImageElement = (
const shouldResetImageFilter = (
element: ExcalidrawElement,
renderConfig: StaticCanvasRenderConfig,
appState: StaticCanvasAppState,
appState: StaticCanvasAppState | InteractiveCanvasAppState,
) => {
return (
appState.theme === THEME.DARK &&
@@ -225,7 +225,7 @@ const generateElementCanvas = (
elementsMap: NonDeletedSceneElementsMap,
zoom: Zoom,
renderConfig: StaticCanvasRenderConfig,
appState: StaticCanvasAppState,
appState: StaticCanvasAppState | InteractiveCanvasAppState,
): ExcalidrawElementWithCanvas | null => {
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d")!;
@@ -277,7 +277,7 @@ const generateElementCanvas = (
context.filter = IMAGE_INVERT_FILTER;
}
drawElementOnCanvas(element, rc, context, renderConfig, appState);
drawElementOnCanvas(element, rc, context, renderConfig);
context.restore();
@@ -420,7 +420,6 @@ const drawElementOnCanvas = (
rc: RoughCanvas,
context: CanvasRenderingContext2D,
renderConfig: StaticCanvasRenderConfig,
appState: StaticCanvasAppState,
) => {
switch (element.type) {
case "rectangle":
@@ -566,7 +565,7 @@ const generateElementWithCanvas = (
element: NonDeletedExcalidrawElement,
elementsMap: NonDeletedSceneElementsMap,
renderConfig: StaticCanvasRenderConfig,
appState: StaticCanvasAppState,
appState: StaticCanvasAppState | InteractiveCanvasAppState,
) => {
const zoom: Zoom = renderConfig
? appState.zoom
@@ -623,7 +622,7 @@ const drawElementFromCanvas = (
elementWithCanvas: ExcalidrawElementWithCanvas,
context: CanvasRenderingContext2D,
renderConfig: StaticCanvasRenderConfig,
appState: StaticCanvasAppState,
appState: StaticCanvasAppState | InteractiveCanvasAppState,
allElementsMap: NonDeletedSceneElementsMap,
) => {
const element = elementWithCanvas.element;
@@ -741,7 +740,7 @@ export const renderElement = (
rc: RoughCanvas,
context: CanvasRenderingContext2D,
renderConfig: StaticCanvasRenderConfig,
appState: StaticCanvasAppState,
appState: StaticCanvasAppState | InteractiveCanvasAppState,
) => {
const reduceAlphaForSelection =
appState.openDialog?.name === "elementLinkSelector" &&
@@ -811,7 +810,7 @@ export const renderElement = (
context.translate(cx, cy);
context.rotate(element.angle);
context.translate(-shiftX, -shiftY);
drawElementOnCanvas(element, rc, context, renderConfig, appState);
drawElementOnCanvas(element, rc, context, renderConfig);
context.restore();
} else {
const elementWithCanvas = generateElementWithCanvas(
@@ -904,13 +903,7 @@ export const renderElement = (
tempCanvasContext.translate(-shiftX, -shiftY);
drawElementOnCanvas(
element,
tempRc,
tempCanvasContext,
renderConfig,
appState,
);
drawElementOnCanvas(element, tempRc, tempCanvasContext, renderConfig);
tempCanvasContext.translate(shiftX, shiftY);
@@ -949,7 +942,7 @@ export const renderElement = (
}
context.translate(-shiftX, -shiftY);
drawElementOnCanvas(element, rc, context, renderConfig, appState);
drawElementOnCanvas(element, rc, context, renderConfig);
}
context.restore();
@@ -1130,7 +1123,7 @@ export function getFreedrawOutlinePoints(element: ExcalidrawFreeDrawElement) {
smoothing: 0.5,
streamline: 0.5,
easing: (t) => Math.sin((t * Math.PI) / 2), // https://easings.net/#easeOutSine
last: !!element.lastCommittedPoint, // LastCommittedPoint is added on pointerup
last: true,
};
return getStroke(inputPoints as number[][], options) as [number, number][];
packages/element/src/resizeElements.ts
+84 -9
View File
@@ -21,7 +21,11 @@ import type { PointerDownState } from "@excalidraw/excalidraw/types";
import type { Mutable } from "@excalidraw/common/utility-types";
import { getArrowLocalFixedPoints, updateBoundElements } from "./binding";
import {
getArrowLocalFixedPoints,
unbindBindingElement,
updateBoundElements,
} from "./binding";
import {
getElementAbsoluteCoords,
getCommonBounds,
@@ -47,6 +51,7 @@ import {
import { wrapText } from "./textWrapping";
import {
isArrowElement,
isBindingElement,
isBoundToContainer,
isElbowArrow,
isFrameLikeElement,
@@ -75,7 +80,9 @@ import type {
ExcalidrawImageElement,
ElementsMap,
ExcalidrawElbowArrowElement,
ExcalidrawArrowElement,
} from "./types";
import type { ElementUpdate } from "./mutateElement";
// Returns true when transform (resizing/rotation) happened
export const transformElements = (
@@ -221,7 +228,25 @@ const rotateSingleElement = (
}
const boundTextElementId = getBoundTextElementId(element);
scene.mutateElement(element, { angle });
let update: ElementUpdate<NonDeletedExcalidrawElement> = {
angle,
};
if (isBindingElement(element)) {
update = {
...update,
} as ElementUpdate<ExcalidrawArrowElement>;
if (element.startBinding) {
unbindBindingElement(element, "start", scene);
}
if (element.endBinding) {
unbindBindingElement(element, "end", scene);
}
}
scene.mutateElement(element, update);
if (boundTextElementId) {
const textElement =
scene.getElement<ExcalidrawTextElementWithContainer>(boundTextElementId);
@@ -395,6 +420,11 @@ const rotateMultipleElements = (
centerAngle -= centerAngle % SHIFT_LOCKING_ANGLE;
}
const rotatedElementsMap = new Map<
ExcalidrawElement["id"],
NonDeletedExcalidrawElement
>(elements.map((element) => [element.id, element]));
for (const element of elements) {
if (!isFrameLikeElement(element)) {
const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
@@ -425,6 +455,19 @@ const rotateMultipleElements = (
simultaneouslyUpdated: elements,
});
if (isBindingElement(element)) {
if (element.startBinding) {
if (!rotatedElementsMap.has(element.startBinding.elementId)) {
unbindBindingElement(element, "start", scene);
}
}
if (element.endBinding) {
if (!rotatedElementsMap.has(element.endBinding.elementId)) {
unbindBindingElement(element, "end", scene);
}
}
}
const boundText = getBoundTextElement(element, elementsMap);
if (boundText && !isArrowElement(element)) {
const { x, y } = computeBoundTextPosition(
@@ -838,13 +881,32 @@ export const resizeSingleElement = (
Number.isFinite(newOrigin.x) &&
Number.isFinite(newOrigin.y)
) {
const updates = {
let updates: ElementUpdate<ExcalidrawElement> = {
...newOrigin,
width: Math.abs(nextWidth),
height: Math.abs(nextHeight),
...rescaledPoints,
};
if (isBindingElement(latestElement)) {
if (latestElement.startBinding) {
updates = {
...updates,
} as ElementUpdate<ExcalidrawArrowElement>;
if (latestElement.startBinding) {
unbindBindingElement(latestElement, "start", scene);
}
}
if (latestElement.endBinding) {
updates = {
...updates,
endBinding: null,
} as ElementUpdate<ExcalidrawArrowElement>;
}
}
scene.mutateElement(latestElement, updates, {
informMutation: shouldInformMutation,
isDragging: false,
@@ -862,10 +924,7 @@ export const resizeSingleElement = (
shouldMaintainAspectRatio,
);
updateBoundElements(latestElement, scene, {
// TODO: confirm with MARK if this actually makes sense
newSize: { width: nextWidth, height: nextHeight },
});
updateBoundElements(latestElement, scene);
}
};
@@ -1399,20 +1458,36 @@ export const resizeMultipleElements = (
}
const elementsToUpdate = elementsAndUpdates.map(({ element }) => element);
const resizedElementsMap = new Map<
ExcalidrawElement["id"],
NonDeletedExcalidrawElement
>(elementsAndUpdates.map(({ element }) => [element.id, element]));
for (const {
element,
update: { boundTextFontSize, ...update },
} of elementsAndUpdates) {
const { width, height, angle } = update;
const { angle } = update;
scene.mutateElement(element, update);
updateBoundElements(element, scene, {
simultaneouslyUpdated: elementsToUpdate,
newSize: { width, height },
});
if (isBindingElement(element)) {
if (element.startBinding) {
if (!resizedElementsMap.has(element.startBinding.elementId)) {
unbindBindingElement(element, "start", scene);
}
}
if (element.endBinding) {
if (!resizedElementsMap.has(element.endBinding.elementId)) {
unbindBindingElement(element, "end", scene);
}
}
}
const boundTextElement = getBoundTextElement(element, elementsMap);
if (boundTextElement && boundTextFontSize) {
scene.mutateElement(boundTextElement, {
packages/element/src/resizeTest.ts
+14 -11
View File
@@ -5,17 +5,20 @@ import {
type Radians,
} from "@excalidraw/math";
import { SIDE_RESIZING_THRESHOLD } from "@excalidraw/common";
import {
SIDE_RESIZING_THRESHOLD,
type EditorInterface,
} from "@excalidraw/common";
import type { GlobalPoint, LineSegment, LocalPoint } from "@excalidraw/math";
import type { AppState, Device, Zoom } from "@excalidraw/excalidraw/types";
import type { AppState, Zoom } from "@excalidraw/excalidraw/types";
import { getElementAbsoluteCoords } from "./bounds";
import {
getTransformHandlesFromCoords,
getTransformHandles,
getOmitSidesForDevice,
getOmitSidesForEditorInterface,
canResizeFromSides,
} from "./transformHandles";
import { isImageElement, isLinearElement } from "./typeChecks";
@@ -51,7 +54,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 +66,7 @@ export const resizeTest = <Point extends GlobalPoint | LocalPoint>(
zoom,
elementsMap,
pointerType,
getOmitSidesForDevice(device),
getOmitSidesForEditorInterface(editorInterface),
);
if (
@@ -86,7 +89,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 +135,7 @@ export const getElementWithTransformHandleType = (
zoom: Zoom,
pointerType: PointerType,
elementsMap: ElementsMap,
device: Device,
editorInterface: EditorInterface,
) => {
return elements.reduce((result, element) => {
if (result) {
@@ -146,7 +149,7 @@ export const getElementWithTransformHandleType = (
scenePointerY,
zoom,
pointerType,
device,
editorInterface,
);
return transformHandleType ? { element, transformHandleType } : null;
}, null as { element: NonDeletedExcalidrawElement; transformHandleType: MaybeTransformHandleType } | null);
@@ -160,14 +163,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 +186,7 @@ export const getTransformHandleTypeFromCoords = <
return found as MaybeTransformHandleType;
}
if (canResizeFromSides(device)) {
if (canResizeFromSides(editorInterface)) {
const cx = (x1 + x2) / 2;
const cy = (y1 + y2) / 2;
packages/element/src/transformHandles.ts
+16 -14
View File
@@ -1,8 +1,6 @@
import {
DEFAULT_TRANSFORM_HANDLE_SPACING,
isAndroid,
isIOS,
isMobileOrTablet,
type EditorInterface,
} from "@excalidraw/common";
import { pointFrom, pointRotateRads } from "@excalidraw/math";
@@ -10,7 +8,6 @@ import { pointFrom, pointRotateRads } from "@excalidraw/math";
import type { Radians } from "@excalidraw/math";
import type {
Device,
InteractiveCanvasAppState,
Zoom,
} from "@excalidraw/excalidraw/types";
@@ -112,20 +109,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;
}
@@ -330,8 +328,12 @@ export const getTransformHandles = (
export const hasBoundingBox = (
elements: readonly NonDeletedExcalidrawElement[],
appState: InteractiveCanvasAppState,
editorInterface: EditorInterface,
) => {
if (appState.selectedLinearElement?.isEditing) {
if (
appState.selectedLinearElement?.isEditing ||
appState.selectedLinearElement?.isDragging
) {
return false;
}
if (elements.length > 1) {
@@ -348,5 +350,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;
};
packages/element/src/typeChecks.ts
+1 -12
View File
@@ -28,8 +28,6 @@ import type {
ExcalidrawArrowElement,
ExcalidrawElbowArrowElement,
ExcalidrawLineElement,
PointBinding,
FixedPointBinding,
ExcalidrawFlowchartNodeElement,
ExcalidrawLinearElementSubType,
} from "./types";
@@ -163,7 +161,7 @@ export const isLinearElementType = (
export const isBindingElement = (
element?: ExcalidrawElement | null,
includeLocked = true,
): element is ExcalidrawLinearElement => {
): element is ExcalidrawArrowElement => {
return (
element != null &&
(!element.locked || includeLocked === true) &&
@@ -355,15 +353,6 @@ export const getDefaultRoundnessTypeForElement = (
return null;
};
export const isFixedPointBinding = (
binding: PointBinding | FixedPointBinding,
): binding is FixedPointBinding => {
return (
Object.hasOwn(binding, "fixedPoint") &&
(binding as FixedPointBinding).fixedPoint != null
);
};
// TODO: Move this to @excalidraw/math
export const isBounds = (box: unknown): box is Bounds =>
Array.isArray(box) &&
packages/element/src/types.ts
+18 -21
View File
@@ -288,23 +288,22 @@ export type ExcalidrawTextElementWithContainer = {
export type FixedPoint = [number, number];
export type PointBinding = {
elementId: ExcalidrawBindableElement["id"];
focus: number;
gap: number;
};
export type BindMode = "inside" | "orbit" | "skip";
export type FixedPointBinding = Merge<
PointBinding,
{
// Represents the fixed point binding information in form of a vertical and
// horizontal ratio (i.e. a percentage value in the 0.0-1.0 range). This ratio
// gives the user selected fixed point by multiplying the bound element width
// with fixedPoint[0] and the bound element height with fixedPoint[1] to get the
// bound element-local point coordinate.
fixedPoint: FixedPoint;
}
>;
export type FixedPointBinding = {
elementId: ExcalidrawBindableElement["id"];
// Represents the fixed point binding information in form of a vertical and
// horizontal ratio (i.e. a percentage value in the 0.0-1.0 range). This ratio
// gives the user selected fixed point by multiplying the bound element width
// with fixedPoint[0] and the bound element height with fixedPoint[1] to get the
// bound element-local point coordinate.
fixedPoint: FixedPoint;
// Determines whether the arrow remains outside the shape or is allowed to
// go all the way inside the shape up to the exact fixed point.
mode: BindMode;
};
type Index = number;
@@ -331,9 +330,8 @@ export type ExcalidrawLinearElement = _ExcalidrawElementBase &
Readonly<{
type: "line" | "arrow";
points: readonly LocalPoint[];
lastCommittedPoint: LocalPoint | null;
startBinding: PointBinding | null;
endBinding: PointBinding | null;
startBinding: FixedPointBinding | null;
endBinding: FixedPointBinding | null;
startArrowhead: Arrowhead | null;
endArrowhead: Arrowhead | null;
}>;
@@ -360,9 +358,9 @@ export type ExcalidrawElbowArrowElement = Merge<
ExcalidrawArrowElement,
{
elbowed: true;
fixedSegments: readonly FixedSegment[] | null;
startBinding: FixedPointBinding | null;
endBinding: FixedPointBinding | null;
fixedSegments: readonly FixedSegment[] | null;
/**
* Marks that the 3rd point should be used as the 2nd point of the arrow in
* order to temporarily hide the first segment of the arrow without losing
@@ -388,7 +386,6 @@ export type ExcalidrawFreeDrawElement = _ExcalidrawElementBase &
points: readonly LocalPoint[];
pressures: readonly number[];
simulatePressure: boolean;
lastCommittedPoint: LocalPoint | null;
}>;
export type FileId = string & { _brand: "FileId" };
packages/element/src/utils.ts
+152 -15
View File
@@ -1,6 +1,7 @@
import {
DEFAULT_ADAPTIVE_RADIUS,
DEFAULT_PROPORTIONAL_RADIUS,
invariant,
LINE_CONFIRM_THRESHOLD,
ROUNDNESS,
} from "@excalidraw/common";
@@ -10,10 +11,17 @@ import {
curveCatmullRomCubicApproxPoints,
curveOffsetPoints,
lineSegment,
lineSegmentIntersectionPoints,
pointDistance,
pointFrom,
pointFromArray,
pointFromVector,
pointRotateRads,
pointTranslate,
rectangle,
vectorFromPoint,
vectorNormalize,
vectorScale,
type GlobalPoint,
} from "@excalidraw/math";
@@ -21,11 +29,17 @@ import type { Curve, LineSegment, LocalPoint } from "@excalidraw/math";
import type { NormalizedZoomValue, Zoom } from "@excalidraw/excalidraw/types";
import { getDiamondPoints } from "./bounds";
import { elementCenterPoint, getDiamondPoints } from "./bounds";
import { generateLinearCollisionShape } from "./shape";
import { isPointInElement } from "./collision";
import { LinearElementEditor } from "./linearElementEditor";
import { isRectangularElement } from "./typeChecks";
import type {
ElementsMap,
ExcalidrawArrowElement,
ExcalidrawDiamondElement,
ExcalidrawElement,
ExcalidrawFreeDrawElement,
@@ -400,20 +414,10 @@ export function deconstructDiamondElement(
), // TOP
];
const corners =
offset > 0
? baseCorners.map(
(corner) =>
curveCatmullRomCubicApproxPoints(
curveOffsetPoints(corner, offset),
)!,
)
: [
[baseCorners[0]],
[baseCorners[1]],
[baseCorners[2]],
[baseCorners[3]],
];
const corners = baseCorners.map(
(corner) =>
curveCatmullRomCubicApproxPoints(curveOffsetPoints(corner, offset))!,
);
const sides = [
lineSegment<GlobalPoint>(
@@ -481,3 +485,136 @@ export const getCornerRadius = (x: number, element: ExcalidrawElement) => {
return 0;
};
const getDiagonalsForBindableElement = (
element: ExcalidrawElement,
elementsMap: ElementsMap,
) => {
// for rectangles, shrink the diagonals a bit because there's something
// going on with the focus points around the corners. Ask Mark for details.
const OFFSET_PX = element.type === "rectangle" ? 15 : 0;
const shrinkSegment = (seg: LineSegment<GlobalPoint>) => {
const v = vectorNormalize(vectorFromPoint(seg[1], seg[0]));
const offset = vectorScale(v, OFFSET_PX);
return lineSegment<GlobalPoint>(
pointTranslate(seg[0], offset),
pointTranslate(seg[1], vectorScale(offset, -1)),
);
};
const center = elementCenterPoint(element, elementsMap);
const diagonalOne = shrinkSegment(
isRectangularElement(element)
? lineSegment<GlobalPoint>(
pointRotateRads(
pointFrom<GlobalPoint>(element.x, element.y),
center,
element.angle,
),
pointRotateRads(
pointFrom<GlobalPoint>(
element.x + element.width,
element.y + element.height,
),
center,
element.angle,
),
)
: lineSegment<GlobalPoint>(
pointRotateRads(
pointFrom<GlobalPoint>(element.x + element.width / 2, element.y),
center,
element.angle,
),
pointRotateRads(
pointFrom<GlobalPoint>(
element.x + element.width / 2,
element.y + element.height,
),
center,
element.angle,
),
),
);
const diagonalTwo = shrinkSegment(
isRectangularElement(element)
? lineSegment<GlobalPoint>(
pointRotateRads(
pointFrom<GlobalPoint>(element.x + element.width, element.y),
center,
element.angle,
),
pointRotateRads(
pointFrom<GlobalPoint>(element.x, element.y + element.height),
center,
element.angle,
),
)
: lineSegment<GlobalPoint>(
pointRotateRads(
pointFrom<GlobalPoint>(element.x, element.y + element.height / 2),
center,
element.angle,
),
pointRotateRads(
pointFrom<GlobalPoint>(
element.x + element.width,
element.y + element.height / 2,
),
center,
element.angle,
),
),
);
return [diagonalOne, diagonalTwo];
};
export const projectFixedPointOntoDiagonal = (
arrow: ExcalidrawArrowElement,
point: GlobalPoint,
element: ExcalidrawElement,
startOrEnd: "start" | "end",
elementsMap: ElementsMap,
): GlobalPoint | null => {
invariant(arrow.points.length >= 2, "Arrow must have at least two points");
if (arrow.width < 3 && arrow.height < 3) {
return null;
}
const [diagonalOne, diagonalTwo] = getDiagonalsForBindableElement(
element,
elementsMap,
);
const a = LinearElementEditor.getPointAtIndexGlobalCoordinates(
arrow,
startOrEnd === "start" ? 1 : arrow.points.length - 2,
elementsMap,
);
const b = pointFromVector<GlobalPoint>(
vectorScale(
vectorFromPoint(point, a),
2 * pointDistance(a, point) +
Math.max(
pointDistance(diagonalOne[0], diagonalOne[1]),
pointDistance(diagonalTwo[0], diagonalTwo[1]),
),
),
a,
);
const intersector = lineSegment<GlobalPoint>(point, b);
const p1 = lineSegmentIntersectionPoints(diagonalOne, intersector);
const p2 = lineSegmentIntersectionPoints(diagonalTwo, intersector);
const d1 = p1 && pointDistance(a, p1);
const d2 = p2 && pointDistance(a, p2);
let p = null;
if (d1 != null && d2 != null) {
p = d1 < d2 ? p1 : p2;
} else {
p = p1 || p2 || null;
}
return p && isPointInElement(p, element, elementsMap) ? p : null;
};
packages/element/src/zindex.ts
+58 -6
View File
@@ -1,18 +1,25 @@
import { arrayToMap, findIndex, findLastIndex } from "@excalidraw/common";
import type { AppState } from "@excalidraw/excalidraw/types";
import type { GlobalPoint } from "@excalidraw/math";
import { isFrameLikeElement } from "./typeChecks";
import { isFrameLikeElement, isTextElement } from "./typeChecks";
import { getElementsInGroup } from "./groups";
import { syncMovedIndices } from "./fractionalIndex";
import { getSelectedElements } from "./selection";
import { getBoundTextElement, getContainerElement } from "./textElement";
import { getHoveredElementForBinding } from "./collision";
import type { Scene } from "./Scene";
import type { ExcalidrawElement, ExcalidrawFrameLikeElement } from "./types";
import type {
ExcalidrawArrowElement,
ExcalidrawElement,
ExcalidrawFrameLikeElement,
NonDeletedExcalidrawElement,
NonDeletedSceneElementsMap,
Ordered,
OrderedExcalidrawElement,
} from "./types";
const isOfTargetFrame = (element: ExcalidrawElement, frameId: string) => {
return element.frameId === frameId || element.id === frameId;
@@ -139,6 +146,51 @@ const getContiguousFrameRangeElements = (
return allElements.slice(rangeStart, rangeEnd + 1);
};
/**
* Moves the arrow element above any bindable elements it intersects with or
* hovers over.
*/
export const moveArrowAboveBindable = (
point: GlobalPoint,
arrow: ExcalidrawArrowElement,
elements: readonly Ordered<NonDeletedExcalidrawElement>[],
elementsMap: NonDeletedSceneElementsMap,
scene: Scene,
): readonly OrderedExcalidrawElement[] => {
const hoveredElement = getHoveredElementForBinding(
point,
elements,
elementsMap,
);
if (!hoveredElement) {
return elements;
}
const boundTextElement = getBoundTextElement(hoveredElement, elementsMap);
const containerElement = isTextElement(hoveredElement)
? getContainerElement(hoveredElement, elementsMap)
: null;
const bindableIds = [
hoveredElement.id,
boundTextElement?.id,
containerElement?.id,
].filter((id): id is NonDeletedExcalidrawElement["id"] => !!id);
const bindableIdx = elements.findIndex((el) => bindableIds.includes(el.id));
const arrowIdx = elements.findIndex((el) => el.id === arrow.id);
if (arrowIdx !== -1 && bindableIdx !== -1 && arrowIdx < bindableIdx) {
const updatedElements = Array.from(elements);
const arrow = updatedElements.splice(arrowIdx, 1)[0];
updatedElements.splice(bindableIdx, 0, arrow);
scene.replaceAllElements(updatedElements);
}
return elements;
};
/**
* Returns next candidate index that's available to be moved to. Currently that
* is a non-deleted element, and not inside a group (unless we're editing it).
packages/element/tests/binding.test.tsx
+645 -425
View File
File diff suppressed because it is too large Load Diff
packages/element/tests/bounds.test.ts
+4 -4
View File
@@ -135,9 +135,9 @@ describe("getElementBounds", () => {
} as ExcalidrawLinearElement;
const [x1, y1, x2, y2] = getElementBounds(element, arrayToMap([element]));
expect(x1).toEqual(360.3176068760539);
expect(y1).toEqual(185.90654264413516);
expect(x2).toEqual(480.87005902729743);
expect(y2).toEqual(320.4751269334226);
expect(x1).toEqual(360.9291017525165);
expect(y1).toEqual(185.24770129343722);
expect(x2).toEqual(481.4815539037601);
expect(y2).toEqual(319.8162855827246);
});
});
packages/element/tests/duplicate.test.tsx
+8 -15
View File
@@ -144,9 +144,8 @@ describe("duplicating multiple elements", () => {
id: "arrow1",
startBinding: {
elementId: "rectangle1",
focus: 0.2,
gap: 7,
fixedPoint: [0.5, 1],
mode: "orbit",
},
});
@@ -155,9 +154,8 @@ describe("duplicating multiple elements", () => {
id: "arrow2",
endBinding: {
elementId: "rectangle1",
focus: 0.2,
gap: 7,
fixedPoint: [0.5, 1],
mode: "orbit",
},
boundElements: [{ id: "text2", type: "text" }],
});
@@ -276,9 +274,8 @@ describe("duplicating multiple elements", () => {
id: "arrow1",
startBinding: {
elementId: "rectangle1",
focus: 0.2,
gap: 7,
fixedPoint: [0.5, 1],
mode: "orbit",
},
});
@@ -293,15 +290,13 @@ describe("duplicating multiple elements", () => {
id: "arrow2",
startBinding: {
elementId: "rectangle1",
focus: 0.2,
gap: 7,
fixedPoint: [0.5, 1],
mode: "orbit",
},
endBinding: {
elementId: "rectangle-not-exists",
focus: 0.2,
gap: 7,
fixedPoint: [0.5, 1],
mode: "orbit",
},
});
@@ -310,15 +305,13 @@ describe("duplicating multiple elements", () => {
id: "arrow3",
startBinding: {
elementId: "rectangle-not-exists",
focus: 0.2,
gap: 7,
fixedPoint: [0.5, 1],
mode: "orbit",
},
endBinding: {
elementId: "rectangle1",
focus: 0.2,
gap: 7,
fixedPoint: [0.5, 1],
mode: "orbit",
},
});
@@ -821,7 +814,7 @@ describe("duplication z-order", () => {
const arrow = UI.createElement("arrow", {
x: -100,
y: 50,
width: 95,
width: 115,
height: 0,
});
packages/element/tests/elbowArrow.test.tsx
+39 -39
View File
@@ -1,13 +1,10 @@
import { ARROW_TYPE } from "@excalidraw/common";
import { pointFrom } from "@excalidraw/math";
import { Excalidraw } from "@excalidraw/excalidraw";
import { actionSelectAll } from "@excalidraw/excalidraw/actions";
import { actionDuplicateSelection } from "@excalidraw/excalidraw/actions/actionDuplicateSelection";
import { API } from "@excalidraw/excalidraw/tests/helpers/api";
import { Pointer, UI } from "@excalidraw/excalidraw/tests/helpers/ui";
import {
act,
fireEvent,
@@ -15,13 +12,11 @@ import {
queryByTestId,
render,
} from "@excalidraw/excalidraw/tests/test-utils";
import "@excalidraw/utils/test-utils";
import { bindBindingElement } from "@excalidraw/element";
import type { LocalPoint } from "@excalidraw/math";
import { bindLinearElement } from "../src/binding";
import { Scene } from "../src/Scene";
import type {
@@ -136,6 +131,11 @@ describe("elbow arrow segment move", () => {
});
describe("elbow arrow routing", () => {
beforeEach(async () => {
localStorage.clear();
await render(<Excalidraw handleKeyboardGlobally={true} />);
});
it("can properly generate orthogonal arrow points", () => {
const scene = new Scene();
const arrow = API.createElement({
@@ -160,8 +160,8 @@ describe("elbow arrow routing", () => {
expect(arrow.width).toEqual(90);
expect(arrow.height).toEqual(200);
});
it("can generate proper points for bound elbow arrow", () => {
const scene = new Scene();
const rectangle1 = API.createElement({
type: "rectangle",
x: -150,
@@ -185,25 +185,23 @@ describe("elbow arrow routing", () => {
height: 200,
points: [pointFrom(0, 0), pointFrom(90, 200)],
}) as ExcalidrawElbowArrowElement;
scene.insertElement(rectangle1);
scene.insertElement(rectangle2);
scene.insertElement(arrow);
API.setElements([rectangle1, rectangle2, arrow]);
bindLinearElement(arrow, rectangle1, "start", scene);
bindLinearElement(arrow, rectangle2, "end", scene);
bindBindingElement(arrow, rectangle1, "orbit", "start", h.scene);
bindBindingElement(arrow, rectangle2, "orbit", "end", h.scene);
expect(arrow.startBinding).not.toBe(null);
expect(arrow.endBinding).not.toBe(null);
h.app.scene.mutateElement(arrow, {
h.scene.mutateElement(arrow, {
points: [pointFrom<LocalPoint>(0, 0), pointFrom<LocalPoint>(90, 200)],
});
expect(arrow.points).toEqual([
expect(arrow.points).toCloselyEqualPoints([
[0, 0],
[45, 0],
[45, 200],
[90, 200],
[39, 0],
[39, 200],
[78, 200],
]);
});
});
@@ -242,9 +240,9 @@ describe("elbow arrow ui", () => {
expect(h.state.currentItemArrowType).toBe(ARROW_TYPE.elbow);
mouse.reset();
mouse.moveTo(-43, -99);
mouse.moveTo(-53, -99);
mouse.click();
mouse.moveTo(43, 99);
mouse.moveTo(53, 99);
mouse.click();
const arrow = h.scene.getSelectedElements(
@@ -253,11 +251,11 @@ describe("elbow arrow ui", () => {
expect(arrow.type).toBe("arrow");
expect(arrow.elbowed).toBe(true);
expect(arrow.points).toEqual([
expect(arrow.points).toCloselyEqualPoints([
[0, 0],
[45, 0],
[45, 200],
[90, 200],
[39, 0],
[39, 200],
[78, 200],
]);
});
@@ -279,9 +277,9 @@ describe("elbow arrow ui", () => {
UI.clickOnTestId("elbow-arrow");
mouse.reset();
mouse.moveTo(-43, -99);
mouse.moveTo(-53, -99);
mouse.click();
mouse.moveTo(43, 99);
mouse.moveTo(53, 99);
mouse.click();
const arrow = h.scene.getSelectedElements(
@@ -297,9 +295,11 @@ describe("elbow arrow ui", () => {
expect(arrow.points.map((point) => point.map(Math.round))).toEqual([
[0, 0],
[35, 0],
[35, 165],
[103, 165],
[36, 0],
[36, 90],
[28, 90],
[28, 164],
[101, 164],
]);
});
@@ -321,9 +321,9 @@ describe("elbow arrow ui", () => {
UI.clickOnTestId("elbow-arrow");
mouse.reset();
mouse.moveTo(-43, -99);
mouse.moveTo(-53, -99);
mouse.click();
mouse.moveTo(43, 99);
mouse.moveTo(53, 99);
mouse.click();
const arrow = h.scene.getSelectedElements(
@@ -351,11 +351,11 @@ describe("elbow arrow ui", () => {
expect(duplicatedArrow.id).not.toBe(originalArrowId);
expect(duplicatedArrow.type).toBe("arrow");
expect(duplicatedArrow.elbowed).toBe(true);
expect(duplicatedArrow.points).toEqual([
expect(duplicatedArrow.points).toCloselyEqualPoints([
[0, 0],
[45, 0],
[45, 200],
[90, 200],
[39, 0],
[39, 200],
[78, 200],
]);
expect(arrow.startBinding).not.toBe(null);
expect(arrow.endBinding).not.toBe(null);
@@ -379,9 +379,9 @@ describe("elbow arrow ui", () => {
UI.clickOnTestId("elbow-arrow");
mouse.reset();
mouse.moveTo(-43, -99);
mouse.moveTo(-53, -99);
mouse.click();
mouse.moveTo(43, 99);
mouse.moveTo(53, 99);
mouse.click();
const arrow = h.scene.getSelectedElements(
@@ -405,11 +405,11 @@ describe("elbow arrow ui", () => {
expect(duplicatedArrow.id).not.toBe(originalArrowId);
expect(duplicatedArrow.type).toBe("arrow");
expect(duplicatedArrow.elbowed).toBe(true);
expect(duplicatedArrow.points).toEqual([
expect(duplicatedArrow.points).toCloselyEqualPoints([
[0, 0],
[0, 100],
[90, 100],
[90, 200],
[78, 100],
[78, 200],
]);
});
});
packages/element/tests/linearElementEditor.test.tsx
+13 -12
View File
@@ -217,7 +217,7 @@ describe("Test Linear Elements", () => {
// drag line from midpoint
drag(midpoint, pointFrom(midpoint[0] + delta, midpoint[1] + delta));
expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(`9`);
expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(`8`);
expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
expect(line.points.length).toEqual(3);
expect(line.points).toMatchInlineSnapshot(`
@@ -329,7 +329,7 @@ describe("Test Linear Elements", () => {
expect(h.state.selectedLinearElement?.isEditing).toBe(false);
mouse.doubleClick();
expect(h.state.selectedLinearElement).toBe(null);
expect(h.state.selectedLinearElement?.isEditing).toBe(false);
await getTextEditor();
});
@@ -357,6 +357,7 @@ describe("Test Linear Elements", () => {
const originalY = line.y;
enterLineEditingMode(line);
expect(h.state.selectedLinearElement?.isEditing).toBe(true);
expect(line.points.length).toEqual(2);
mouse.clickAt(midpoint[0], midpoint[1]);
@@ -379,7 +380,7 @@ describe("Test Linear Elements", () => {
expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
`11`,
);
expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`);
expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
expect(line.points.length).toEqual(3);
expect(line.points).toMatchInlineSnapshot(`
@@ -549,7 +550,7 @@ describe("Test Linear Elements", () => {
expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
`14`,
);
expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`9`);
expect(line.points.length).toEqual(5);
@@ -600,7 +601,7 @@ describe("Test Linear Elements", () => {
expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
`11`,
);
expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`);
expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
const newPoints = LinearElementEditor.getPointsGlobalCoordinates(
line,
@@ -641,7 +642,7 @@ describe("Test Linear Elements", () => {
expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
`11`,
);
expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`);
expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
const newPoints = LinearElementEditor.getPointsGlobalCoordinates(
line,
@@ -689,7 +690,7 @@ describe("Test Linear Elements", () => {
expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
`17`,
);
expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`10`);
const newMidPoints = LinearElementEditor.getEditorMidPoints(
line,
@@ -747,7 +748,7 @@ describe("Test Linear Elements", () => {
expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
`14`,
);
expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`9`);
expect(line.points.length).toEqual(5);
expect((h.elements[0] as ExcalidrawLinearElement).points)
@@ -845,7 +846,7 @@ describe("Test Linear Elements", () => {
expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
`11`,
);
expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`);
expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`7`);
const newPoints = LinearElementEditor.getPointsGlobalCoordinates(
line,
@@ -1303,7 +1304,7 @@ describe("Test Linear Elements", () => {
const arrow = UI.createElement("arrow", {
x: -10,
y: 250,
width: 400,
width: 410,
height: 1,
});
@@ -1316,7 +1317,7 @@ describe("Test Linear Elements", () => {
const textElement = h.elements[2] as ExcalidrawTextElementWithContainer;
expect(arrow.endBinding?.elementId).toBe(rect.id);
expect(arrow.width).toBe(400);
expect(arrow.width).toBeCloseTo(399);
expect(rect.x).toBe(400);
expect(rect.y).toBe(0);
expect(
@@ -1335,7 +1336,7 @@ describe("Test Linear Elements", () => {
mouse.downAt(rect.x, rect.y);
mouse.moveTo(200, 0);
mouse.upAt(200, 0);
expect(arrow.width).toBeCloseTo(200, 0);
expect(arrow.width).toBeCloseTo(199);
expect(rect.x).toBe(200);
expect(rect.y).toBe(0);
expect(handleBindTextResizeSpy).toHaveBeenCalledWith(
packages/element/tests/resize.test.tsx
+138 -126
View File
@@ -174,29 +174,29 @@ describe("generic element", () => {
expect(rectangle.angle).toBeCloseTo(0);
});
it("resizes with bound arrow", async () => {
const rectangle = UI.createElement("rectangle", {
width: 200,
height: 100,
});
const arrow = UI.createElement("arrow", {
x: -30,
y: 50,
width: 28,
height: 5,
});
// it("resizes with bound arrow", async () => {
// const rectangle = UI.createElement("rectangle", {
// width: 200,
// height: 100,
// });
// const arrow = UI.createElement("arrow", {
// x: -30,
// y: 50,
// width: 28,
// height: 5,
// });
expect(arrow.endBinding?.elementId).toEqual(rectangle.id);
// expect(arrow.endBinding?.elementId).toEqual(rectangle.id);
UI.resize(rectangle, "e", [40, 0]);
// UI.resize(rectangle, "e", [40, 0]);
expect(arrow.width + arrow.endBinding!.gap).toBeCloseTo(30, 0);
// expect(arrow.width + arrow.endBinding!.gap).toBeCloseTo(30, 0);
UI.resize(rectangle, "w", [50, 0]);
// UI.resize(rectangle, "w", [50, 0]);
expect(arrow.endBinding?.elementId).toEqual(rectangle.id);
expect(arrow.width + arrow.endBinding!.gap).toBeCloseTo(80, 0);
});
// expect(arrow.endBinding?.elementId).toEqual(rectangle.id);
// expect(arrow.width + arrow.endBinding!.gap).toBeCloseTo(80, 0);
// });
it("resizes with a label", async () => {
const rectangle = UI.createElement("rectangle", {
@@ -510,12 +510,12 @@ describe("arrow element", () => {
h.state,
)[0] as ExcalidrawElbowArrowElement;
expect(arrow.startBinding?.fixedPoint?.[0]).toBeCloseTo(1.05);
expect(arrow.startBinding?.fixedPoint?.[0]).toBeCloseTo(1.06);
expect(arrow.startBinding?.fixedPoint?.[1]).toBeCloseTo(0.75);
UI.resize(rectangle, "se", [-200, -150]);
expect(arrow.startBinding?.fixedPoint?.[0]).toBeCloseTo(1.05);
expect(arrow.startBinding?.fixedPoint?.[0]).toBeCloseTo(1.06);
expect(arrow.startBinding?.fixedPoint?.[1]).toBeCloseTo(0.75);
});
@@ -538,11 +538,11 @@ describe("arrow element", () => {
h.state,
)[0] as ExcalidrawElbowArrowElement;
expect(arrow.startBinding?.fixedPoint?.[0]).toBeCloseTo(1.05);
expect(arrow.startBinding?.fixedPoint?.[0]).toBeCloseTo(1.06);
expect(arrow.startBinding?.fixedPoint?.[1]).toBeCloseTo(0.75);
UI.resize([rectangle, arrow], "nw", [300, 350]);
expect(arrow.startBinding?.fixedPoint?.[0]).toBeCloseTo(-0.05);
expect(arrow.startBinding?.fixedPoint?.[0]).toBeCloseTo(-0.06);
expect(arrow.startBinding?.fixedPoint?.[1]).toBeCloseTo(0.25);
});
});
@@ -595,31 +595,31 @@ describe("text element", () => {
expect(text.fontSize).toBeCloseTo(fontSize * scale);
});
it("resizes with bound arrow", async () => {
const text = UI.createElement("text");
await UI.editText(text, "hello\nworld");
const boundArrow = UI.createElement("arrow", {
x: -30,
y: 25,
width: 28,
height: 5,
});
// it("resizes with bound arrow", async () => {
// const text = UI.createElement("text");
// await UI.editText(text, "hello\nworld");
// const boundArrow = UI.createElement("arrow", {
// x: -30,
// y: 25,
// width: 28,
// height: 5,
// });
expect(boundArrow.endBinding?.elementId).toEqual(text.id);
// expect(boundArrow.endBinding?.elementId).toEqual(text.id);
UI.resize(text, "ne", [40, 0]);
// UI.resize(text, "ne", [40, 0]);
expect(boundArrow.width + boundArrow.endBinding!.gap).toBeCloseTo(30);
// expect(boundArrow.width + boundArrow.endBinding!.gap).toBeCloseTo(30);
const textWidth = text.width;
const scale = 20 / text.height;
UI.resize(text, "nw", [50, 20]);
// const textWidth = text.width;
// const scale = 20 / text.height;
// UI.resize(text, "nw", [50, 20]);
expect(boundArrow.endBinding?.elementId).toEqual(text.id);
expect(boundArrow.width + boundArrow.endBinding!.gap).toBeCloseTo(
30 + textWidth * scale,
);
});
// expect(boundArrow.endBinding?.elementId).toEqual(text.id);
// expect(boundArrow.width + boundArrow.endBinding!.gap).toBeCloseTo(
// 30 + textWidth * scale,
// );
// });
it("updates font size via keyboard", async () => {
const text = UI.createElement("text");
@@ -801,36 +801,36 @@ describe("image element", () => {
expect(image.scale).toEqual([1, 1]);
});
it("resizes with bound arrow", async () => {
const image = API.createElement({
type: "image",
width: 100,
height: 100,
});
API.setElements([image]);
const arrow = UI.createElement("arrow", {
x: -30,
y: 50,
width: 28,
height: 5,
});
// it("resizes with bound arrow", async () => {
// const image = API.createElement({
// type: "image",
// width: 100,
// height: 100,
// });
// API.setElements([image]);
// const arrow = UI.createElement("arrow", {
// x: -30,
// y: 50,
// width: 28,
// height: 5,
// });
expect(arrow.endBinding?.elementId).toEqual(image.id);
// expect(arrow.endBinding?.elementId).toEqual(image.id);
UI.resize(image, "ne", [40, 0]);
// UI.resize(image, "ne", [40, 0]);
expect(arrow.width + arrow.endBinding!.gap).toBeCloseTo(30, 0);
// expect(arrow.width + arrow.endBinding!.gap).toBeCloseTo(30, 0);
const imageWidth = image.width;
const scale = 20 / image.height;
UI.resize(image, "nw", [50, 20]);
// const imageWidth = image.width;
// const scale = 20 / image.height;
// UI.resize(image, "nw", [50, 20]);
expect(arrow.endBinding?.elementId).toEqual(image.id);
expect(Math.floor(arrow.width + arrow.endBinding!.gap)).toBeCloseTo(
30 + imageWidth * scale,
0,
);
});
// expect(arrow.endBinding?.elementId).toEqual(image.id);
// expect(Math.floor(arrow.width + arrow.endBinding!.gap)).toBeCloseTo(
// 30 + imageWidth * scale,
// 0,
// );
// });
});
describe("multiple selection", () => {
@@ -997,68 +997,80 @@ describe("multiple selection", () => {
expect(diagLine.angle).toEqual(0);
});
it("resizes with bound arrows", async () => {
const rectangle = UI.createElement("rectangle", {
position: 0,
size: 100,
});
const leftBoundArrow = UI.createElement("arrow", {
x: -110,
y: 50,
width: 100,
height: 0,
});
// it("resizes with bound arrows", async () => {
// const rectangle = UI.createElement("rectangle", {
// position: 0,
// size: 100,
// });
// const leftBoundArrow = UI.createElement("arrow", {
// x: -110,
// y: 50,
// width: 100,
// height: 0,
// });
const rightBoundArrow = UI.createElement("arrow", {
x: 210,
y: 50,
width: -100,
height: 0,
});
// const rightBoundArrow = UI.createElement("arrow", {
// x: 210,
// y: 50,
// width: -100,
// height: 0,
// });
const selectionWidth = 210;
const selectionHeight = 100;
const move = [40, 40] as [number, number];
const scale = Math.max(
1 - move[0] / selectionWidth,
1 - move[1] / selectionHeight,
);
const leftArrowBinding = { ...leftBoundArrow.endBinding };
const rightArrowBinding = { ...rightBoundArrow.endBinding };
delete rightArrowBinding.gap;
// const selectionWidth = 210;
// const selectionHeight = 100;
// const move = [40, 40] as [number, number];
// const scale = Math.max(
// 1 - move[0] / selectionWidth,
// 1 - move[1] / selectionHeight,
// );
// const leftArrowBinding: {
// elementId: string;
// gap?: number;
// focus?: number;
// } = {
// ...leftBoundArrow.endBinding,
// } as PointBinding;
// const rightArrowBinding: {
// elementId: string;
// gap?: number;
// focus?: number;
// } = {
// ...rightBoundArrow.endBinding,
// } as PointBinding;
// delete rightArrowBinding.gap;
UI.resize([rectangle, rightBoundArrow], "nw", move, {
shift: true,
});
// UI.resize([rectangle, rightBoundArrow], "nw", move, {
// shift: true,
// });
expect(leftBoundArrow.x).toBeCloseTo(-110);
expect(leftBoundArrow.y).toBeCloseTo(50);
expect(leftBoundArrow.width).toBeCloseTo(140, 0);
expect(leftBoundArrow.height).toBeCloseTo(7, 0);
expect(leftBoundArrow.angle).toEqual(0);
expect(leftBoundArrow.startBinding).toBeNull();
expect(leftBoundArrow.endBinding?.gap).toBeCloseTo(10);
expect(leftBoundArrow.endBinding?.elementId).toBe(
leftArrowBinding.elementId,
);
expect(leftBoundArrow.endBinding?.focus).toBe(leftArrowBinding.focus);
// expect(leftBoundArrow.x).toBeCloseTo(-110);
// expect(leftBoundArrow.y).toBeCloseTo(50);
// expect(leftBoundArrow.width).toBeCloseTo(140, 0);
// expect(leftBoundArrow.height).toBeCloseTo(7, 0);
// expect(leftBoundArrow.angle).toEqual(0);
// expect(leftBoundArrow.startBinding).toBeNull();
// expect(leftBoundArrow.endBinding?.gap).toBeCloseTo(10);
// expect(leftBoundArrow.endBinding?.elementId).toBe(
// leftArrowBinding.elementId,
// );
// expect(leftBoundArrow.endBinding?.focus).toBe(leftArrowBinding.focus);
expect(rightBoundArrow.x).toBeCloseTo(210);
expect(rightBoundArrow.y).toBeCloseTo(
(selectionHeight - 50) * (1 - scale) + 50,
);
expect(rightBoundArrow.width).toBeCloseTo(100 * scale);
expect(rightBoundArrow.height).toBeCloseTo(0);
expect(rightBoundArrow.angle).toEqual(0);
expect(rightBoundArrow.startBinding).toBeNull();
expect(rightBoundArrow.endBinding?.gap).toBeCloseTo(8.0952);
expect(rightBoundArrow.endBinding?.elementId).toBe(
rightArrowBinding.elementId,
);
expect(rightBoundArrow.endBinding?.focus).toBeCloseTo(
rightArrowBinding.focus!,
);
});
// expect(rightBoundArrow.x).toBeCloseTo(210);
// expect(rightBoundArrow.y).toBeCloseTo(
// (selectionHeight - 50) * (1 - scale) + 50,
// );
// expect(rightBoundArrow.width).toBeCloseTo(100 * scale);
// expect(rightBoundArrow.height).toBeCloseTo(0);
// expect(rightBoundArrow.angle).toEqual(0);
// expect(rightBoundArrow.startBinding).toBeNull();
// expect(rightBoundArrow.endBinding?.gap).toBeCloseTo(8.0952);
// expect(rightBoundArrow.endBinding?.elementId).toBe(
// rightArrowBinding.elementId,
// );
// expect(rightBoundArrow.endBinding?.focus).toBeCloseTo(
// rightArrowBinding.focus!,
// );
// });
it("resizes with labeled arrows", async () => {
const topArrow = UI.createElement("arrow", {
@@ -1338,8 +1350,8 @@ describe("multiple selection", () => {
expect(boundArrow.x).toBeCloseTo(380 * scaleX);
expect(boundArrow.y).toBeCloseTo(240 * scaleY);
expect(boundArrow.points[1][0]).toBeCloseTo(-60 * scaleX);
expect(boundArrow.points[1][1]).toBeCloseTo(-80 * scaleY);
expect(boundArrow.points[1][0]).toBeCloseTo(59.7979);
expect(boundArrow.points[1][1]).toBeCloseTo(-79.7305);
expect(arrowLabelPos.x + arrowLabel.width / 2).toBeCloseTo(
boundArrow.x + boundArrow.points[1][0] / 2,
packages/excalidraw/actions/actionCanvas.tsx
+5 -5
View File
@@ -51,7 +51,7 @@ import { register } from "./register";
import type { AppState, Offsets } from "../types";
export const actionChangeViewBackgroundColor = register({
export const actionChangeViewBackgroundColor = register<Partial<AppState>>({
name: "changeViewBackgroundColor",
label: "labels.canvasBackground",
trackEvent: false,
@@ -64,7 +64,7 @@ export const actionChangeViewBackgroundColor = register({
perform: (_, appState, value) => {
return {
appState: { ...appState, ...value },
captureUpdate: !!value.viewBackgroundColor
captureUpdate: !!value?.viewBackgroundColor
? CaptureUpdateAction.IMMEDIATELY
: CaptureUpdateAction.EVENTUALLY,
};
@@ -83,7 +83,6 @@ export const actionChangeViewBackgroundColor = register({
elements={elements}
appState={appState}
updateData={updateData}
compactMode={appState.stylesPanelMode === "compact"}
/>
);
},
@@ -467,7 +466,7 @@ export const actionZoomToFit = register({
!event[KEYS.CTRL_OR_CMD],
});
export const actionToggleTheme = register({
export const actionToggleTheme = register<AppState["theme"]>({
name: "toggleTheme",
label: (_, appState) => {
return appState.theme === THEME.DARK
@@ -475,7 +474,8 @@ export const actionToggleTheme = register({
: "buttons.darkMode";
},
keywords: ["toggle", "dark", "light", "mode", "theme"],
icon: (appState) => (appState.theme === THEME.LIGHT ? MoonIcon : SunIcon),
icon: (appState, elements) =>
appState.theme === THEME.LIGHT ? MoonIcon : SunIcon,
viewMode: true,
trackEvent: { category: "canvas" },
perform: (_, appState, value) => {
packages/excalidraw/actions/actionClipboard.tsx
+4 -4
View File
@@ -20,12 +20,12 @@ import { t } from "../i18n";
import { actionDeleteSelected } from "./actionDeleteSelected";
import { register } from "./register";
export const actionCopy = register({
export const actionCopy = register<ClipboardEvent | null>({
name: "copy",
label: "labels.copy",
icon: DuplicateIcon,
trackEvent: { category: "element" },
perform: async (elements, appState, event: ClipboardEvent | null, app) => {
perform: async (elements, appState, event, app) => {
const elementsToCopy = app.scene.getSelectedElements({
selectedElementIds: appState.selectedElementIds,
includeBoundTextElement: true,
@@ -109,12 +109,12 @@ export const actionPaste = register({
keyTest: undefined,
});
export const actionCut = register({
export const actionCut = register<ClipboardEvent | null>({
name: "cut",
label: "labels.cut",
icon: cutIcon,
trackEvent: { category: "element" },
perform: (elements, appState, event: ClipboardEvent | null, app) => {
perform: (elements, appState, event, app) => {
actionCopy.perform(elements, appState, event, app);
return actionDeleteSelected.perform(elements, appState, null, app);
},
packages/excalidraw/actions/actionDeleteSelected.tsx
+26 -38
View File
@@ -30,6 +30,8 @@ import { getSelectedElements, isSomeElementSelected } from "../scene";
import { TrashIcon } from "../components/icons";
import { ToolButton } from "../components/ToolButton";
import { useStylesPanelMode } from "..";
import { register } from "./register";
import type { AppClassProperties, AppState } from "../types";
@@ -210,12 +212,8 @@ export const actionDeleteSelected = register({
trackEvent: { category: "element", action: "delete" },
perform: (elements, appState, formData, app) => {
if (appState.selectedLinearElement?.isEditing) {
const {
elementId,
selectedPointsIndices,
startBindingElement,
endBindingElement,
} = appState.selectedLinearElement;
const { elementId, selectedPointsIndices } =
appState.selectedLinearElement;
const elementsMap = app.scene.getNonDeletedElementsMap();
const linearElement = LinearElementEditor.getElement(
elementId,
@@ -252,19 +250,6 @@ export const actionDeleteSelected = register({
};
}
// We cannot do this inside `movePoint` because it is also called
// when deleting the uncommitted point (which hasn't caused any binding)
const binding = {
startBindingElement: selectedPointsIndices?.includes(0)
? null
: startBindingElement,
endBindingElement: selectedPointsIndices?.includes(
linearElement.points.length - 1,
)
? null
: endBindingElement,
};
LinearElementEditor.deletePoints(
linearElement,
app,
@@ -277,7 +262,6 @@ export const actionDeleteSelected = register({
...appState,
selectedLinearElement: {
...appState.selectedLinearElement,
...binding,
selectedPointsIndices:
selectedPointsIndices?.[0] > 0
? [selectedPointsIndices[0] - 1]
@@ -306,6 +290,7 @@ export const actionDeleteSelected = register({
type: app.state.preferredSelectionTool.type,
}),
multiElement: null,
newElement: null,
activeEmbeddable: null,
selectedLinearElement: null,
},
@@ -320,22 +305,25 @@ export const actionDeleteSelected = register({
keyTest: (event, appState, elements) =>
(event.key === KEYS.BACKSPACE || event.key === KEYS.DELETE) &&
!event[KEYS.CTRL_OR_CMD],
PanelComponent: ({ elements, appState, updateData }) => (
<ToolButton
type="button"
icon={TrashIcon}
title={t("labels.delete")}
aria-label={t("labels.delete")}
onClick={() => updateData(null)}
disabled={
!isSomeElementSelected(getNonDeletedElements(elements), appState)
}
style={{
...(appState.stylesPanelMode === "mobile" &&
appState.openPopup !== "compactOtherProperties"
? MOBILE_ACTION_BUTTON_BG
: {}),
}}
/>
),
PanelComponent: ({ elements, appState, updateData, app }) => {
const isMobile = useStylesPanelMode() === "mobile";
return (
<ToolButton
type="button"
icon={TrashIcon}
title={t("labels.delete")}
aria-label={t("labels.delete")}
onClick={() => updateData(null)}
disabled={
!isSomeElementSelected(getNonDeletedElements(elements), appState)
}
style={{
...(isMobile && appState.openPopup !== "compactOtherProperties"
? MOBILE_ACTION_BUTTON_BG
: {}),
}}
/>
);
},
});
packages/excalidraw/actions/actionDuplicateSelection.tsx
+25 -20
View File
@@ -27,6 +27,8 @@ import { t } from "../i18n";
import { isSomeElementSelected } from "../scene";
import { getShortcutKey } from "../shortcut";
import { useStylesPanelMode } from "..";
import { register } from "./register";
export const actionDuplicateSelection = register({
@@ -107,24 +109,27 @@ export const actionDuplicateSelection = register({
};
},
keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.D,
PanelComponent: ({ elements, appState, updateData }) => (
<ToolButton
type="button"
icon={DuplicateIcon}
title={`${t("labels.duplicateSelection")} — ${getShortcutKey(
"CtrlOrCmd+D",
)}`}
aria-label={t("labels.duplicateSelection")}
onClick={() => updateData(null)}
disabled={
!isSomeElementSelected(getNonDeletedElements(elements), appState)
}
style={{
...(appState.stylesPanelMode === "mobile" &&
appState.openPopup !== "compactOtherProperties"
? MOBILE_ACTION_BUTTON_BG
: {}),
}}
/>
),
PanelComponent: ({ elements, appState, updateData, app }) => {
const isMobile = useStylesPanelMode() === "mobile";
return (
<ToolButton
type="button"
icon={DuplicateIcon}
title={`${t("labels.duplicateSelection")} — ${getShortcutKey(
"CtrlOrCmd+D",
)}`}
aria-label={t("labels.duplicateSelection")}
onClick={() => updateData(null)}
disabled={
!isSomeElementSelected(getNonDeletedElements(elements), appState)
}
style={{
...(isMobile && appState.openPopup !== "compactOtherProperties"
? MOBILE_ACTION_BUTTON_BG
: {}),
}}
/>
);
},
});
packages/excalidraw/actions/actionExport.tsx
+15 -7
View File
@@ -11,7 +11,7 @@ import { CaptureUpdateAction } from "@excalidraw/element";
import type { Theme } from "@excalidraw/element/types";
import { useDevice } from "../components/App";
import { useEditorInterface } from "../components/App";
import { CheckboxItem } from "../components/CheckboxItem";
import { DarkModeToggle } from "../components/DarkModeToggle";
import { ProjectName } from "../components/ProjectName";
@@ -31,7 +31,9 @@ import "../components/ToolIcon.scss";
import { register } from "./register";
export const actionChangeProjectName = register({
import type { AppState } from "../types";
export const actionChangeProjectName = register<AppState["name"]>({
name: "changeProjectName",
label: "labels.fileTitle",
trackEvent: false,
@@ -51,7 +53,7 @@ export const actionChangeProjectName = register({
),
});
export const actionChangeExportScale = register({
export const actionChangeExportScale = register<AppState["exportScale"]>({
name: "changeExportScale",
label: "imageExportDialog.scale",
trackEvent: { category: "export", action: "scale" },
@@ -101,7 +103,9 @@ export const actionChangeExportScale = register({
},
});
export const actionChangeExportBackground = register({
export const actionChangeExportBackground = register<
AppState["exportBackground"]
>({
name: "changeExportBackground",
label: "imageExportDialog.label.withBackground",
trackEvent: { category: "export", action: "toggleBackground" },
@@ -121,7 +125,9 @@ export const actionChangeExportBackground = register({
),
});
export const actionChangeExportEmbedScene = register({
export const actionChangeExportEmbedScene = register<
AppState["exportEmbedScene"]
>({
name: "changeExportEmbedScene",
label: "imageExportDialog.tooltip.embedScene",
trackEvent: { category: "export", action: "embedScene" },
@@ -242,7 +248,7 @@ export const actionSaveFileToDisk = register({
icon={saveAs}
title={t("buttons.saveAs")}
aria-label={t("buttons.saveAs")}
showAriaLabel={useDevice().editor.isMobile}
showAriaLabel={useEditorInterface().formFactor === "phone"}
hidden={!nativeFileSystemSupported}
onClick={() => updateData(null)}
data-testid="save-as-button"
@@ -288,7 +294,9 @@ export const actionLoadScene = register({
keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.O,
});
export const actionExportWithDarkMode = register({
export const actionExportWithDarkMode = register<
AppState["exportWithDarkMode"]
>({
name: "exportWithDarkMode",
label: "imageExportDialog.label.darkMode",
trackEvent: { category: "export", action: "toggleTheme" },
packages/excalidraw/actions/actionFinalize.tsx
+113 -90
View File
@@ -1,10 +1,6 @@
import { pointFrom } from "@excalidraw/math";
import {
maybeBindLinearElement,
bindOrUnbindLinearElement,
isBindingEnabled,
} from "@excalidraw/element/binding";
import { bindOrUnbindBindingElement } from "@excalidraw/element/binding";
import {
isValidPolygon,
LinearElementEditor,
@@ -21,7 +17,7 @@ import {
import {
KEYS,
arrayToMap,
tupleToCoors,
invariant,
updateActiveTool,
} from "@excalidraw/common";
import { isPathALoop } from "@excalidraw/element";
@@ -30,11 +26,12 @@ import { isInvisiblySmallElement } from "@excalidraw/element";
import { CaptureUpdateAction } from "@excalidraw/element";
import type { LocalPoint } from "@excalidraw/math";
import type { GlobalPoint, LocalPoint } from "@excalidraw/math";
import type {
ExcalidrawElement,
ExcalidrawLinearElement,
NonDeleted,
PointsPositionUpdates,
} from "@excalidraw/element/types";
import { t } from "../i18n";
@@ -46,20 +43,37 @@ import { register } from "./register";
import type { AppState } from "../types";
export const actionFinalize = register({
type FormData = {
event: PointerEvent;
sceneCoords: { x: number; y: number };
};
export const actionFinalize = register<FormData>({
name: "finalize",
label: "",
trackEvent: false,
perform: (elements, appState, data, app) => {
let newElements = elements;
const { interactiveCanvas, focusContainer, scene } = app;
const { event, sceneCoords } =
(data as {
event?: PointerEvent;
sceneCoords?: { x: number; y: number };
}) ?? {};
const elementsMap = scene.getNonDeletedElementsMap();
if (event && appState.selectedLinearElement) {
if (data && appState.selectedLinearElement) {
const { event, sceneCoords } = data;
const element = LinearElementEditor.getElement(
appState.selectedLinearElement.elementId,
elementsMap,
);
invariant(
element,
"Arrow element should exist if selectedLinearElement is set",
);
invariant(
sceneCoords,
"sceneCoords should be defined if actionFinalize is called with event",
);
const linearElementEditor = LinearElementEditor.handlePointerUp(
event,
appState.selectedLinearElement,
@@ -67,19 +81,48 @@ export const actionFinalize = register({
app.scene,
);
const { startBindingElement, endBindingElement } = linearElementEditor;
const element = app.scene.getElement(linearElementEditor.elementId);
if (isBindingElement(element)) {
bindOrUnbindLinearElement(
element,
startBindingElement,
endBindingElement,
app.scene,
);
const newArrow = !!appState.newElement;
const selectedPointsIndices =
newArrow || !appState.selectedLinearElement.selectedPointsIndices
? [element.points.length - 1] // New arrow creation
: appState.selectedLinearElement.selectedPointsIndices;
const draggedPoints: PointsPositionUpdates =
selectedPointsIndices.reduce((map, index) => {
map.set(index, {
point: LinearElementEditor.pointFromAbsoluteCoords(
element,
pointFrom<GlobalPoint>(sceneCoords.x, sceneCoords.y),
elementsMap,
),
});
return map;
}, new Map()) ?? new Map();
bindOrUnbindBindingElement(element, draggedPoints, scene, appState, {
newArrow,
altKey: event.altKey,
});
} else if (isLineElement(element)) {
if (
appState.selectedLinearElement?.isEditing &&
!appState.newElement &&
!isValidPolygon(element.points)
) {
scene.mutateElement(element, {
polygon: false,
});
}
}
if (linearElementEditor !== appState.selectedLinearElement) {
let newElements = elements;
// `handlePointerUp()` updated the linear element instance,
// so filter out this element if it is too small,
// but do an update to all new elements anyway for undo/redo purposes.
if (element && isInvisiblySmallElement(element)) {
// TODO: #7348 in theory this gets recorded by the store, so the invisible elements could be restored by the undo/redo, which might be not what we would want
newElements = newElements.map((el) => {
@@ -91,39 +134,8 @@ export const actionFinalize = register({
return el;
});
}
return {
elements: newElements,
appState: {
selectedLinearElement: {
...linearElementEditor,
selectedPointsIndices: null,
},
suggestedBindings: [],
},
captureUpdate: CaptureUpdateAction.IMMEDIATELY,
};
}
}
if (appState.selectedLinearElement?.isEditing) {
const { elementId, startBindingElement, endBindingElement } =
appState.selectedLinearElement;
const element = LinearElementEditor.getElement(elementId, elementsMap);
if (element) {
if (isBindingElement(element)) {
bindOrUnbindLinearElement(
element,
startBindingElement,
endBindingElement,
scene,
);
}
if (isLineElement(element) && !isValidPolygon(element.points)) {
scene.mutateElement(element, {
polygon: false,
});
}
const activeToolLocked = appState.activeTool?.locked;
return {
elements:
@@ -134,23 +146,31 @@ export const actionFinalize = register({
}
return el;
})
: undefined,
: newElements,
appState: {
...appState,
cursorButton: "up",
selectedLinearElement: new LinearElementEditor(
element,
arrayToMap(elementsMap),
false, // exit editing mode
),
selectedLinearElement: activeToolLocked
? null
: {
...linearElementEditor,
selectedPointsIndices: null,
isEditing: false,
initialState: {
...linearElementEditor.initialState,
lastClickedPoint: -1,
},
},
selectionElement: null,
suggestedBinding: null,
newElement: null,
multiElement: null,
},
captureUpdate: CaptureUpdateAction.IMMEDIATELY,
};
}
}
let newElements = elements;
if (window.document.activeElement instanceof HTMLElement) {
focusContainer();
}
@@ -174,8 +194,14 @@ export const actionFinalize = register({
if (element) {
// pen and mouse have hover
if (appState.multiElement && element.type !== "freedraw") {
const { points, lastCommittedPoint } = element;
if (
appState.selectedLinearElement &&
appState.multiElement &&
element.type !== "freedraw" &&
appState.lastPointerDownWith !== "touch"
) {
const { points } = element;
const { lastCommittedPoint } = appState.selectedLinearElement;
if (
!lastCommittedPoint ||
points[points.length - 1] !== lastCommittedPoint
@@ -227,25 +253,6 @@ export const actionFinalize = register({
polygon: false,
});
}
if (
isBindingElement(element) &&
!isLoop &&
element.points.length > 1 &&
isBindingEnabled(appState)
) {
const coords =
sceneCoords ??
tupleToCoors(
LinearElementEditor.getPointAtIndexGlobalCoordinates(
element,
-1,
arrayToMap(elements),
),
);
maybeBindLinearElement(element, appState, coords, scene);
}
}
}
@@ -271,6 +278,25 @@ export const actionFinalize = register({
});
}
let selectedLinearElement =
element && isLinearElement(element)
? new LinearElementEditor(element, arrayToMap(newElements)) // To select the linear element when user has finished mutipoint editing
: appState.selectedLinearElement;
selectedLinearElement = selectedLinearElement
? {
...selectedLinearElement,
isEditing: appState.newElement
? false
: selectedLinearElement.isEditing,
initialState: {
...selectedLinearElement.initialState,
lastClickedPoint: -1,
origin: null,
},
}
: selectedLinearElement;
return {
elements: newElements,
appState: {
@@ -288,7 +314,7 @@ export const actionFinalize = register({
multiElement: null,
editingTextElement: null,
startBoundElement: null,
suggestedBindings: [],
suggestedBinding: null,
selectedElementIds:
element &&
!appState.activeTool.locked &&
@@ -298,11 +324,8 @@ export const actionFinalize = register({
[element.id]: true,
}
: appState.selectedElementIds,
// To select the linear element when user has finished mutipoint editing
selectedLinearElement:
element && isLinearElement(element)
? new LinearElementEditor(element, arrayToMap(newElements))
: appState.selectedLinearElement,
selectedLinearElement,
},
// TODO: #7348 we should not capture everything, but if we don't, it leads to incosistencies -> revisit
captureUpdate: CaptureUpdateAction.IMMEDIATELY,
packages/excalidraw/actions/actionFlip.test.tsx
+12 -14
View File
@@ -38,15 +38,13 @@ describe("flipping re-centers selection", () => {
height: 239.9,
startBinding: {
elementId: "rec1",
focus: 0,
gap: 5,
fixedPoint: [0.49, -0.05],
mode: "orbit",
},
endBinding: {
elementId: "rec2",
focus: 0,
gap: 5,
fixedPoint: [-0.05, 0.49],
mode: "orbit",
},
startArrowhead: null,
endArrowhead: "arrow",
@@ -74,11 +72,11 @@ describe("flipping re-centers selection", () => {
const rec1 = h.elements.find((el) => el.id === "rec1")!;
expect(rec1.x).toBeCloseTo(100, 0);
expect(rec1.y).toBeCloseTo(100, 0);
expect(rec1.y).toBeCloseTo(101, 0);
const rec2 = h.elements.find((el) => el.id === "rec2")!;
expect(rec2.x).toBeCloseTo(220, 0);
expect(rec2.y).toBeCloseTo(250, 0);
expect(rec2.y).toBeCloseTo(251, 0);
});
});
@@ -99,8 +97,8 @@ describe("flipping arrowheads", () => {
endArrowhead: null,
endBinding: {
elementId: rect.id,
focus: 0.5,
gap: 5,
fixedPoint: [0.5, 0.5],
mode: "orbit",
},
});
@@ -139,13 +137,13 @@ describe("flipping arrowheads", () => {
endArrowhead: "circle",
startBinding: {
elementId: rect.id,
focus: 0.5,
gap: 5,
fixedPoint: [0.5, 0.5],
mode: "orbit",
},
endBinding: {
elementId: rect2.id,
focus: 0.5,
gap: 5,
fixedPoint: [0.5, 0.5],
mode: "orbit",
},
});
@@ -195,8 +193,8 @@ describe("flipping arrowheads", () => {
endArrowhead: null,
endBinding: {
elementId: rect.id,
focus: 0.5,
gap: 5,
fixedPoint: [0.5, 0.5],
mode: "orbit",
},
});
packages/excalidraw/actions/actionFlip.ts
+5 -16
View File
@@ -1,17 +1,10 @@
import { getNonDeletedElements } from "@excalidraw/element";
import {
bindOrUnbindLinearElements,
isBindingEnabled,
} from "@excalidraw/element";
import { bindOrUnbindBindingElements } from "@excalidraw/element";
import { getCommonBoundingBox } from "@excalidraw/element";
import { newElementWith } from "@excalidraw/element";
import { deepCopyElement } from "@excalidraw/element";
import { resizeMultipleElements } from "@excalidraw/element";
import {
isArrowElement,
isElbowArrow,
isLinearElement,
} from "@excalidraw/element";
import { isArrowElement, isElbowArrow } from "@excalidraw/element";
import { updateFrameMembershipOfSelectedElements } from "@excalidraw/element";
import { CODES, KEYS, arrayToMap } from "@excalidraw/common";
@@ -103,7 +96,6 @@ const flipSelectedElements = (
const updatedElements = flipElements(
selectedElements,
elementsMap,
appState,
flipDirection,
app,
);
@@ -118,7 +110,6 @@ const flipSelectedElements = (
const flipElements = (
selectedElements: NonDeleted<ExcalidrawElement>[],
elementsMap: NonDeletedSceneElementsMap,
appState: AppState,
flipDirection: "horizontal" | "vertical",
app: AppClassProperties,
): ExcalidrawElement[] => {
@@ -158,12 +149,10 @@ const flipElements = (
},
);
bindOrUnbindLinearElements(
selectedElements.filter(isLinearElement),
isBindingEnabled(appState),
[],
bindOrUnbindBindingElements(
selectedElements.filter(isArrowElement),
app.scene,
appState.zoom,
app.state,
);
// ---------------------------------------------------------------------------
packages/excalidraw/actions/actionHistory.tsx
+8 -8
View File
@@ -18,6 +18,8 @@ import { HistoryChangedEvent } from "../history";
import { useEmitter } from "../hooks/useEmitter";
import { t } from "../i18n";
import { useStylesPanelMode } from "..";
import type { History } from "../history";
import type { AppClassProperties, AppState } from "../types";
import type { Action, ActionResult } from "./types";
@@ -73,7 +75,7 @@ export const createUndoAction: ActionCreator = (history) => ({
),
keyTest: (event) =>
event[KEYS.CTRL_OR_CMD] && matchKey(event, KEYS.Z) && !event.shiftKey,
PanelComponent: ({ appState, updateData, data }) => {
PanelComponent: ({ appState, updateData, data, app }) => {
const { isUndoStackEmpty } = useEmitter<HistoryChangedEvent>(
history.onHistoryChangedEmitter,
new HistoryChangedEvent(
@@ -81,6 +83,7 @@ export const createUndoAction: ActionCreator = (history) => ({
history.isRedoStackEmpty,
),
);
const isMobile = useStylesPanelMode() === "mobile";
return (
<ToolButton
@@ -92,9 +95,7 @@ export const createUndoAction: ActionCreator = (history) => ({
disabled={isUndoStackEmpty}
data-testid="button-undo"
style={{
...(appState.stylesPanelMode === "mobile"
? MOBILE_ACTION_BUTTON_BG
: {}),
...(isMobile ? MOBILE_ACTION_BUTTON_BG : {}),
}}
/>
);
@@ -114,7 +115,7 @@ export const createRedoAction: ActionCreator = (history) => ({
keyTest: (event) =>
(event[KEYS.CTRL_OR_CMD] && event.shiftKey && matchKey(event, KEYS.Z)) ||
(isWindows && event.ctrlKey && !event.shiftKey && matchKey(event, KEYS.Y)),
PanelComponent: ({ appState, updateData, data }) => {
PanelComponent: ({ appState, updateData, data, app }) => {
const { isRedoStackEmpty } = useEmitter(
history.onHistoryChangedEmitter,
new HistoryChangedEvent(
@@ -122,6 +123,7 @@ export const createRedoAction: ActionCreator = (history) => ({
history.isRedoStackEmpty,
),
);
const isMobile = useStylesPanelMode() === "mobile";
return (
<ToolButton
@@ -133,9 +135,7 @@ export const createRedoAction: ActionCreator = (history) => ({
disabled={isRedoStackEmpty}
data-testid="button-redo"
style={{
...(appState.stylesPanelMode === "mobile"
? MOBILE_ACTION_BUTTON_BG
: {}),
...(isMobile ? MOBILE_ACTION_BUTTON_BG : {}),
}}
/>
);
packages/excalidraw/actions/actionNavigate.tsx
+9 -2
View File
@@ -2,6 +2,8 @@ import clsx from "clsx";
import { CaptureUpdateAction } from "@excalidraw/element";
import { invariant } from "@excalidraw/common";
import { getClientColor } from "../clients";
import { Avatar } from "../components/Avatar";
import {
@@ -16,12 +18,17 @@ import { register } from "./register";
import type { GoToCollaboratorComponentProps } from "../components/UserList";
import type { Collaborator } from "../types";
export const actionGoToCollaborator = register({
export const actionGoToCollaborator = register<Collaborator>({
name: "goToCollaborator",
label: "Go to a collaborator",
viewMode: true,
trackEvent: { category: "collab" },
perform: (_elements, appState, collaborator: Collaborator) => {
perform: (_elements, appState, collaborator) => {
invariant(
collaborator,
"actionGoToCollaborator: collaborator should be defined when actionGoToCollaborator is called",
);
if (
!collaborator.socketId ||
appState.userToFollow?.socketId === collaborator.socketId ||
packages/excalidraw/actions/actionProperties.tsx
+280 -189
View File
@@ -1,4 +1,5 @@
import { pointFrom } from "@excalidraw/math";
import { useEffect, useMemo, useRef, useState } from "react";
import {
@@ -21,6 +22,7 @@ import {
isTransparent,
reduceToCommonValue,
BOUND_TEXT_PADDING,
invariant,
} from "@excalidraw/common";
import {
@@ -31,7 +33,7 @@ import {
} from "@excalidraw/element";
import {
bindLinearElement,
bindBindingElement,
calculateFixedPointForElbowArrowBinding,
updateBoundElements,
} from "@excalidraw/element";
@@ -63,10 +65,13 @@ import {
toggleLinePolygonState,
} from "@excalidraw/element";
import type { LocalPoint } from "@excalidraw/math";
import { deriveStylesPanelMode } from "@excalidraw/common";
import type { LocalPoint, Radians } from "@excalidraw/math";
import type {
Arrowhead,
ContainerBehavior,
ElementsMap,
ExcalidrawBindableElement,
ExcalidrawElement,
@@ -86,9 +91,6 @@ import { RadioSelection } from "../components/RadioSelection";
import { ColorPicker } from "../components/ColorPicker/ColorPicker";
import { FontPicker } from "../components/FontPicker/FontPicker";
import { IconPicker } from "../components/IconPicker";
// TODO barnabasmolnar/editor-redesign
// TextAlignTopIcon, TextAlignBottomIcon,TextAlignMiddleIcon,
// ArrowHead icons
import { Range } from "../components/Range";
import {
ArrowheadArrowIcon,
@@ -160,6 +162,15 @@ import type { AppClassProperties, AppState, Primitive } from "../types";
const FONT_SIZE_RELATIVE_INCREASE_STEP = 0.1;
const getStylesPanelInfo = (app: AppClassProperties) => {
const stylesPanelMode = deriveStylesPanelMode(app.editorInterface);
return {
stylesPanelMode,
isCompact: stylesPanelMode !== "full",
isMobile: stylesPanelMode === "mobile",
} as const;
};
export const changeProperty = (
elements: readonly ExcalidrawElement[],
appState: AppState,
@@ -309,13 +320,15 @@ const changeFontSize = (
// -----------------------------------------------------------------------------
export const actionChangeStrokeColor = register({
export const actionChangeStrokeColor = register<
Pick<AppState, "currentItemStrokeColor">
>({
name: "changeStrokeColor",
label: "labels.stroke",
trackEvent: false,
perform: (elements, appState, value) => {
return {
...(value.currentItemStrokeColor && {
...(value?.currentItemStrokeColor && {
elements: changeProperty(
elements,
appState,
@@ -333,48 +346,50 @@ export const actionChangeStrokeColor = register({
...appState,
...value,
},
captureUpdate: !!value.currentItemStrokeColor
captureUpdate: !!value?.currentItemStrokeColor
? CaptureUpdateAction.IMMEDIATELY
: CaptureUpdateAction.EVENTUALLY,
};
},
PanelComponent: ({ elements, appState, updateData, app, data }) => (
<>
{appState.stylesPanelMode === "full" && (
<h3 aria-hidden="true">{t("labels.stroke")}</h3>
)}
<ColorPicker
topPicks={DEFAULT_ELEMENT_STROKE_PICKS}
palette={DEFAULT_ELEMENT_STROKE_COLOR_PALETTE}
type="elementStroke"
label={t("labels.stroke")}
color={getFormValue(
elements,
app,
(element) => element.strokeColor,
true,
(hasSelection) =>
!hasSelection ? appState.currentItemStrokeColor : null,
PanelComponent: ({ elements, appState, updateData, app, data }) => {
const { stylesPanelMode } = getStylesPanelInfo(app);
return (
<>
{stylesPanelMode === "full" && (
<h3 aria-hidden="true">{t("labels.stroke")}</h3>
)}
onChange={(color) => updateData({ currentItemStrokeColor: color })}
elements={elements}
appState={appState}
updateData={updateData}
compactMode={
appState.stylesPanelMode === "compact" ||
appState.stylesPanelMode === "mobile"
}
/>
</>
),
<ColorPicker
topPicks={DEFAULT_ELEMENT_STROKE_PICKS}
palette={DEFAULT_ELEMENT_STROKE_COLOR_PALETTE}
type="elementStroke"
label={t("labels.stroke")}
color={getFormValue(
elements,
app,
(element) => element.strokeColor,
true,
(hasSelection) =>
!hasSelection ? appState.currentItemStrokeColor : null,
)}
onChange={(color) => updateData({ currentItemStrokeColor: color })}
elements={elements}
appState={appState}
updateData={updateData}
/>
</>
);
},
});
export const actionChangeBackgroundColor = register({
export const actionChangeBackgroundColor = register<
Pick<AppState, "currentItemBackgroundColor" | "viewBackgroundColor">
>({
name: "changeBackgroundColor",
label: "labels.changeBackground",
trackEvent: false,
perform: (elements, appState, value, app) => {
if (!value.currentItemBackgroundColor) {
if (!value?.currentItemBackgroundColor) {
return {
appState: {
...appState,
@@ -421,38 +436,40 @@ export const actionChangeBackgroundColor = register({
captureUpdate: CaptureUpdateAction.IMMEDIATELY,
};
},
PanelComponent: ({ elements, appState, updateData, app, data }) => (
<>
{appState.stylesPanelMode === "full" && (
<h3 aria-hidden="true">{t("labels.background")}</h3>
)}
<ColorPicker
topPicks={DEFAULT_ELEMENT_BACKGROUND_PICKS}
palette={DEFAULT_ELEMENT_BACKGROUND_COLOR_PALETTE}
type="elementBackground"
label={t("labels.background")}
color={getFormValue(
elements,
app,
(element) => element.backgroundColor,
true,
(hasSelection) =>
!hasSelection ? appState.currentItemBackgroundColor : null,
PanelComponent: ({ elements, appState, updateData, app, data }) => {
const { stylesPanelMode } = getStylesPanelInfo(app);
return (
<>
{stylesPanelMode === "full" && (
<h3 aria-hidden="true">{t("labels.background")}</h3>
)}
onChange={(color) => updateData({ currentItemBackgroundColor: color })}
elements={elements}
appState={appState}
updateData={updateData}
compactMode={
appState.stylesPanelMode === "compact" ||
appState.stylesPanelMode === "mobile"
}
/>
</>
),
<ColorPicker
topPicks={DEFAULT_ELEMENT_BACKGROUND_PICKS}
palette={DEFAULT_ELEMENT_BACKGROUND_COLOR_PALETTE}
type="elementBackground"
label={t("labels.background")}
color={getFormValue(
elements,
app,
(element) => element.backgroundColor,
true,
(hasSelection) =>
!hasSelection ? appState.currentItemBackgroundColor : null,
)}
onChange={(color) =>
updateData({ currentItemBackgroundColor: color })
}
elements={elements}
appState={appState}
updateData={updateData}
/>
</>
);
},
});
export const actionChangeFillStyle = register({
export const actionChangeFillStyle = register<ExcalidrawElement["fillStyle"]>({
name: "changeFillStyle",
label: "labels.fill",
trackEvent: false,
@@ -460,7 +477,9 @@ export const actionChangeFillStyle = register({
trackEvent(
"element",
"changeFillStyle",
`${value} (${app.device.editor.isMobile ? "mobile" : "desktop"})`,
`${value} (${
app.editorInterface.formFactor === "phone" ? "mobile" : "desktop"
})`,
);
return {
elements: changeProperty(elements, appState, (el) =>
@@ -532,7 +551,9 @@ export const actionChangeFillStyle = register({
},
});
export const actionChangeStrokeWidth = register({
export const actionChangeStrokeWidth = register<
ExcalidrawElement["strokeWidth"]
>({
name: "changeStrokeWidth",
label: "labels.strokeWidth",
trackEvent: false,
@@ -588,7 +609,7 @@ export const actionChangeStrokeWidth = register({
),
});
export const actionChangeSloppiness = register({
export const actionChangeSloppiness = register<ExcalidrawElement["roughness"]>({
name: "changeSloppiness",
label: "labels.sloppiness",
trackEvent: false,
@@ -642,7 +663,9 @@ export const actionChangeSloppiness = register({
),
});
export const actionChangeStrokeStyle = register({
export const actionChangeStrokeStyle = register<
ExcalidrawElement["strokeStyle"]
>({
name: "changeStrokeStyle",
label: "labels.strokeStyle",
trackEvent: false,
@@ -695,7 +718,7 @@ export const actionChangeStrokeStyle = register({
),
});
export const actionChangeOpacity = register({
export const actionChangeOpacity = register<ExcalidrawElement["opacity"]>({
name: "changeOpacity",
label: "labels.opacity",
trackEvent: false,
@@ -719,86 +742,100 @@ export const actionChangeOpacity = register({
),
});
export const actionChangeFontSize = register({
name: "changeFontSize",
label: "labels.fontSize",
trackEvent: false,
perform: (elements, appState, value, app) => {
return changeFontSize(elements, appState, app, () => value, value);
export const actionChangeFontSize = register<ExcalidrawTextElement["fontSize"]>(
{
name: "changeFontSize",
label: "labels.fontSize",
trackEvent: false,
perform: (elements, appState, value, app) => {
return changeFontSize(
elements,
appState,
app,
() => {
invariant(value, "actionChangeFontSize: Expected a font size value");
return value;
},
value,
);
},
PanelComponent: ({ elements, appState, updateData, app, data }) => {
const { isCompact } = getStylesPanelInfo(app);
return (
<fieldset>
<legend>{t("labels.fontSize")}</legend>
<div className="buttonList">
<RadioSelection
group="font-size"
options={[
{
value: 16,
text: t("labels.small"),
icon: FontSizeSmallIcon,
testId: "fontSize-small",
},
{
value: 20,
text: t("labels.medium"),
icon: FontSizeMediumIcon,
testId: "fontSize-medium",
},
{
value: 28,
text: t("labels.large"),
icon: FontSizeLargeIcon,
testId: "fontSize-large",
},
{
value: 36,
text: t("labels.veryLarge"),
icon: FontSizeExtraLargeIcon,
testId: "fontSize-veryLarge",
},
]}
value={getFormValue(
elements,
app,
(element) => {
if (isTextElement(element)) {
return element.fontSize;
}
const boundTextElement = getBoundTextElement(
element,
app.scene.getNonDeletedElementsMap(),
);
if (boundTextElement) {
return boundTextElement.fontSize;
}
return null;
},
(element) =>
isTextElement(element) ||
getBoundTextElement(
element,
app.scene.getNonDeletedElementsMap(),
) !== null,
(hasSelection) =>
hasSelection
? null
: appState.currentItemFontSize || DEFAULT_FONT_SIZE,
)}
onChange={(value) => {
withCaretPositionPreservation(
() => updateData(value),
isCompact,
!!appState.editingTextElement,
data?.onPreventClose,
);
}}
/>
</div>
</fieldset>
);
},
},
PanelComponent: ({ elements, appState, updateData, app, data }) => (
<fieldset>
<legend>{t("labels.fontSize")}</legend>
<div className="buttonList">
<RadioSelection
group="font-size"
options={[
{
value: 16,
text: t("labels.small"),
icon: FontSizeSmallIcon,
testId: "fontSize-small",
},
{
value: 20,
text: t("labels.medium"),
icon: FontSizeMediumIcon,
testId: "fontSize-medium",
},
{
value: 28,
text: t("labels.large"),
icon: FontSizeLargeIcon,
testId: "fontSize-large",
},
{
value: 36,
text: t("labels.veryLarge"),
icon: FontSizeExtraLargeIcon,
testId: "fontSize-veryLarge",
},
]}
value={getFormValue(
elements,
app,
(element) => {
if (isTextElement(element)) {
return element.fontSize;
}
const boundTextElement = getBoundTextElement(
element,
app.scene.getNonDeletedElementsMap(),
);
if (boundTextElement) {
return boundTextElement.fontSize;
}
return null;
},
(element) =>
isTextElement(element) ||
getBoundTextElement(
element,
app.scene.getNonDeletedElementsMap(),
) !== null,
(hasSelection) =>
hasSelection
? null
: appState.currentItemFontSize || DEFAULT_FONT_SIZE,
)}
onChange={(value) => {
withCaretPositionPreservation(
() => updateData(value),
appState.stylesPanelMode === "compact" ||
appState.stylesPanelMode === "mobile",
!!appState.editingTextElement,
data?.onPreventClose,
);
}}
/>
</div>
</fieldset>
),
});
);
export const actionDecreaseFontSize = register({
name: "decreaseFontSize",
@@ -858,7 +895,10 @@ type ChangeFontFamilyData = Partial<
resetContainers?: true;
};
export const actionChangeFontFamily = register({
export const actionChangeFontFamily = register<{
currentItemFontFamily: any;
currentHoveredFontFamily: any;
}>({
name: "changeFontFamily",
label: "labels.fontFamily",
trackEvent: false,
@@ -895,6 +935,8 @@ export const actionChangeFontFamily = register({
};
}
invariant(value, "actionChangeFontFamily: value must be defined");
const { currentItemFontFamily, currentHoveredFontFamily } = value;
let nextCaptureUpdateAction: CaptureUpdateActionType =
@@ -1059,6 +1101,7 @@ export const actionChangeFontFamily = register({
// relying on state batching as multiple `FontPicker` handlers could be called in rapid succession and we want to combine them
const [batchedData, setBatchedData] = useState<ChangeFontFamilyData>({});
const isUnmounted = useRef(true);
const { stylesPanelMode, isCompact } = getStylesPanelInfo(app);
const selectedFontFamily = useMemo(() => {
const getFontFamily = (
@@ -1131,14 +1174,14 @@ export const actionChangeFontFamily = register({
return (
<>
{appState.stylesPanelMode === "full" && (
{stylesPanelMode === "full" && (
<legend>{t("labels.fontFamily")}</legend>
)}
<FontPicker
isOpened={appState.openPopup === "fontFamily"}
selectedFontFamily={selectedFontFamily}
hoveredFontFamily={appState.currentHoveredFontFamily}
compactMode={appState.stylesPanelMode !== "full"}
compactMode={stylesPanelMode !== "full"}
onSelect={(fontFamily) => {
withCaretPositionPreservation(
() => {
@@ -1150,8 +1193,7 @@ export const actionChangeFontFamily = register({
// defensive clear so immediate close won't abuse the cached elements
cachedElementsRef.current.clear();
},
appState.stylesPanelMode === "compact" ||
appState.stylesPanelMode === "mobile",
isCompact,
!!appState.editingTextElement,
);
}}
@@ -1226,11 +1268,7 @@ export const actionChangeFontFamily = register({
cachedElementsRef.current.clear();
// Refocus text editor when font picker closes if we were editing text
if (
(appState.stylesPanelMode === "compact" ||
appState.stylesPanelMode === "mobile") &&
appState.editingTextElement
) {
if (isCompact && appState.editingTextElement) {
restoreCaretPosition(null); // Just refocus without saved position
}
}
@@ -1241,7 +1279,7 @@ export const actionChangeFontFamily = register({
},
});
export const actionChangeTextAlign = register({
export const actionChangeTextAlign = register<TextAlign>({
name: "changeTextAlign",
label: "Change text alignment",
trackEvent: false,
@@ -1277,6 +1315,7 @@ export const actionChangeTextAlign = register({
},
PanelComponent: ({ elements, appState, updateData, app, data }) => {
const elementsMap = app.scene.getNonDeletedElementsMap();
const { isCompact } = getStylesPanelInfo(app);
return (
<fieldset>
@@ -1329,8 +1368,7 @@ export const actionChangeTextAlign = register({
onChange={(value) => {
withCaretPositionPreservation(
() => updateData(value),
appState.stylesPanelMode === "compact" ||
appState.stylesPanelMode === "mobile",
isCompact,
!!appState.editingTextElement,
data?.onPreventClose,
);
@@ -1342,7 +1380,7 @@ export const actionChangeTextAlign = register({
},
});
export const actionChangeVerticalAlign = register({
export const actionChangeVerticalAlign = register<VerticalAlign>({
name: "changeVerticalAlign",
label: "Change vertical alignment",
trackEvent: { category: "element" },
@@ -1377,6 +1415,7 @@ export const actionChangeVerticalAlign = register({
};
},
PanelComponent: ({ elements, appState, updateData, app, data }) => {
const { isCompact } = getStylesPanelInfo(app);
return (
<fieldset>
<div className="buttonList">
@@ -1429,8 +1468,7 @@ export const actionChangeVerticalAlign = register({
onChange={(value) => {
withCaretPositionPreservation(
() => updateData(value),
appState.stylesPanelMode === "compact" ||
appState.stylesPanelMode === "mobile",
isCompact,
!!appState.editingTextElement,
data?.onPreventClose,
);
@@ -1442,7 +1480,7 @@ export const actionChangeVerticalAlign = register({
},
});
export const actionChangeRoundness = register({
export const actionChangeRoundness = register<"sharp" | "round">({
name: "changeRoundness",
label: "Change edge roundness",
trackEvent: false,
@@ -1551,11 +1589,18 @@ const getMarginValue = (margin: number | null) => {
}
};
export const actionChangeContainerBehavior = register({
export const actionChangeContainerBehavior = register<
| { textFlow: ContainerBehavior["textFlow"] }
| { margin: NonNullable<ReturnType<typeof getMarginValue>> }
>({
name: "changeContainerBehavior",
label: "labels.container",
trackEvent: false,
perform: (elements, appState, value, app) => {
invariant(
value,
"actionChangeContainerBehavior: value must be defined",
);
const elementsMap = app.scene.getNonDeletedElementsMap();
let selected = getSelectedElements(elements, appState, {
includeBoundTextElement: true,
@@ -1591,7 +1636,8 @@ export const actionChangeContainerBehavior = register({
}
}
if (value.hasOwnProperty("margin")) {
if ("margin" in value) {
const marginSize = getMargin(value.margin);
if (containerIdsToUpdate.size === 0) {
return {
appState: {
@@ -1599,24 +1645,22 @@ export const actionChangeContainerBehavior = register({
currentItemContainerBehavior: {
textFlow:
appState.currentItemContainerBehavior?.textFlow ?? "growing",
margin: getMargin(value.margin as "small" | "medium" | "large"),
margin: marginSize,
},
},
captureUpdate: CaptureUpdateAction.IMMEDIATELY,
};
}
const nextElements = changeProperty(elements, appState, (el) =>
containerIdsToUpdate.has(el.id)
? newElementWith(el, {
containerBehavior: {
textFlow: el.containerBehavior?.textFlow ?? "growing",
margin: getMargin(value.margin as "small" | "medium" | "large"),
margin: marginSize,
},
})
: el,
);
// Invalidate containers to trigger re-render
containerIdsToUpdate.forEach((id) => {
const container = nextElements.find((el) => el.id === id);
@@ -1638,30 +1682,29 @@ export const actionChangeContainerBehavior = register({
currentItemContainerBehavior: {
textFlow:
appState.currentItemContainerBehavior?.textFlow ?? "growing",
margin: getMargin(value.margin as "small" | "medium" | "large"),
margin: marginSize,
},
},
captureUpdate: CaptureUpdateAction.IMMEDIATELY,
};
}
const textFlow = value.textFlow;
const nextElements = changeProperty(elements, appState, (el) =>
containerIdsToUpdate.has(el.id)
? newElementWith(el, {
containerBehavior: {
textFlow: value,
textFlow,
margin: el.containerBehavior?.margin ?? BOUND_TEXT_PADDING,
},
})
: el,
);
return {
elements: nextElements,
appState: {
...appState,
currentItemContainerBehavior: {
textFlow: value,
textFlow,
margin:
appState.currentItemContainerBehavior?.margin ?? BOUND_TEXT_PADDING,
},
@@ -1866,15 +1909,16 @@ const getArrowheadOptions = (flip: boolean) => {
] as const;
};
export const actionChangeArrowhead = register({
export const actionChangeArrowhead = register<{
position: "start" | "end";
type: Arrowhead;
}>({
name: "changeArrowhead",
label: "Change arrowheads",
trackEvent: false,
perform: (
elements,
appState,
value: { position: "start" | "end"; type: Arrowhead },
) => {
perform: (elements, appState, value) => {
invariant(value, "actionChangeArrowhead: value must be defined");
return {
elements: changeProperty(elements, appState, (el) => {
if (isLinearElement(el)) {
@@ -1969,7 +2013,7 @@ export const actionChangeArrowProperties = register({
},
});
export const actionChangeArrowType = register({
export const actionChangeArrowType = register<keyof typeof ARROW_TYPE>({
name: "changeArrowType",
label: "Change arrow types",
trackEvent: false,
@@ -1978,7 +2022,20 @@ export const actionChangeArrowType = register({
if (!isArrowElement(el)) {
return el;
}
const elementsMap = app.scene.getNonDeletedElementsMap();
const startPoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(
el,
0,
elementsMap,
);
const endPoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(
el,
-1,
elementsMap,
);
let newElement = newElementWith(el, {
x: value === ARROW_TYPE.elbow ? startPoint[0] : el.x,
y: value === ARROW_TYPE.elbow ? startPoint[1] : el.y,
roundness:
value === ARROW_TYPE.round
? {
@@ -1986,9 +2043,31 @@ export const actionChangeArrowType = register({
}
: null,
elbowed: value === ARROW_TYPE.elbow,
angle: value === ARROW_TYPE.elbow ? (0 as Radians) : el.angle,
points:
value === ARROW_TYPE.elbow || el.elbowed
? [el.points[0], el.points[el.points.length - 1]]
? [
LinearElementEditor.pointFromAbsoluteCoords(
{
...el,
x: startPoint[0],
y: startPoint[1],
angle: 0 as Radians,
},
startPoint,
elementsMap,
),
LinearElementEditor.pointFromAbsoluteCoords(
{
...el,
x: startPoint[0],
y: startPoint[1],
angle: 0 as Radians,
},
endPoint,
elementsMap,
),
]
: el.points,
});
@@ -2070,7 +2149,13 @@ export const actionChangeArrowType = register({
newElement.startBinding.elementId,
) as ExcalidrawBindableElement;
if (startElement) {
bindLinearElement(newElement, startElement, "start", app.scene);
bindBindingElement(
newElement,
startElement,
appState.bindMode === "inside" ? "inside" : "orbit",
"start",
app.scene,
);
}
}
if (newElement.endBinding) {
@@ -2078,7 +2163,13 @@ export const actionChangeArrowType = register({
newElement.endBinding.elementId,
) as ExcalidrawBindableElement;
if (endElement) {
bindLinearElement(newElement, endElement, "end", app.scene);
bindBindingElement(
newElement,
endElement,
appState.bindMode === "inside" ? "inside" : "orbit",
"end",
app.scene,
);
}
}
}
packages/excalidraw/actions/actionToggleZenMode.tsx
+5 -2
View File
@@ -25,8 +25,11 @@ export const actionToggleZenMode = register({
};
},
checked: (appState) => appState.zenModeEnabled,
predicate: (elements, appState, appProps) => {
return typeof appProps.zenModeEnabled === "undefined";
predicate: (elements, appState, appProps, app) => {
return (
app.editorInterface.formFactor !== "phone" &&
typeof appProps.zenModeEnabled === "undefined"
);
},
keyTest: (event) =>
!event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.Z,
packages/excalidraw/actions/manager.tsx
+3 -1
View File
@@ -37,7 +37,9 @@ const trackAction = (
trackEvent(
action.trackEvent.category,
action.trackEvent.action || action.name,
`${source} (${app.device.editor.isMobile ? "mobile" : "desktop"})`,
`${source} (${
app.editorInterface.formFactor === "phone" ? "mobile" : "desktop"
})`,
);
}
}
packages/excalidraw/actions/register.ts
+6 -1
View File
@@ -2,7 +2,12 @@ import type { Action } from "./types";
export let actions: readonly Action[] = [];
export const register = <T extends Action>(action: T) => {
export const register = <
TData extends any,
T extends Action<TData> = Action<TData>,
>(
action: T,
) => {
actions = actions.concat(action);
return action as T & {
keyTest?: unknown extends T["keyTest"] ? never : T["keyTest"];
packages/excalidraw/actions/types.ts
+4 -4
View File
@@ -32,10 +32,10 @@ export type ActionResult =
}
| false;
type ActionFn = (
type ActionFn<TData = any> = (
elements: readonly OrderedExcalidrawElement[],
appState: Readonly<AppState>,
formData: any,
formData: TData | undefined,
app: AppClassProperties,
) => ActionResult | Promise<ActionResult>;
@@ -158,7 +158,7 @@ export type PanelComponentProps = {
) => React.JSX.Element | null;
};
export interface Action {
export interface Action<TData = any> {
name: ActionName;
label:
| string
@@ -175,7 +175,7 @@ export interface Action {
elements: readonly ExcalidrawElement[],
) => React.ReactNode);
PanelComponent?: React.FC<PanelComponentProps>;
perform: ActionFn;
perform: ActionFn<TData>;
keyPriority?: number;
keyTest?: (
event: React.KeyboardEvent | KeyboardEvent,
packages/excalidraw/appState.ts
+4 -4
View File
@@ -101,7 +101,7 @@ export const getDefaultAppState = (): Omit<
panels: STATS_PANELS.generalStats | STATS_PANELS.elementProperties,
},
startBoundElement: null,
suggestedBindings: [],
suggestedBinding: null,
frameRendering: { enabled: true, clip: true, name: true, outline: true },
frameToHighlight: null,
editingFrame: null,
@@ -128,7 +128,7 @@ export const getDefaultAppState = (): Omit<
searchMatches: null,
lockedMultiSelections: {},
activeLockedId: null,
stylesPanelMode: "full",
bindMode: "orbit",
};
};
@@ -232,7 +232,7 @@ const APP_STATE_STORAGE_CONF = (<
shouldCacheIgnoreZoom: { browser: true, export: false, server: false },
stats: { browser: true, export: false, server: false },
startBoundElement: { browser: false, export: false, server: false },
suggestedBindings: { browser: false, export: false, server: false },
suggestedBinding: { browser: false, export: false, server: false },
frameRendering: { browser: false, export: false, server: false },
frameToHighlight: { browser: false, export: false, server: false },
editingFrame: { browser: false, export: false, server: false },
@@ -255,7 +255,7 @@ const APP_STATE_STORAGE_CONF = (<
searchMatches: { browser: false, export: false, server: false },
lockedMultiSelections: { browser: true, export: true, server: true },
activeLockedId: { browser: false, export: false, server: false },
stylesPanelMode: { browser: false, export: false, server: false },
bindMode: { browser: true, export: false, server: false },
});
const _clearAppStateForStorage = <
packages/excalidraw/components/Actions.tsx
+34 -8
View File
@@ -52,11 +52,17 @@ import { getFormValue } from "../actions/actionProperties";
import { useTextEditorFocus } from "../hooks/useTextEditorFocus";
import { actionToggleViewMode } from "../actions/actionToggleViewMode";
import { getToolbarTools } from "./shapes";
import "./Actions.scss";
import { useDevice, useExcalidrawContainer } from "./App";
import {
useEditorInterface,
useStylesPanelMode,
useExcalidrawContainer,
} from "./App";
import Stack from "./Stack";
import { ToolButton } from "./ToolButton";
import { ToolPopover } from "./ToolPopover";
@@ -78,6 +84,7 @@ import {
adjustmentsIcon,
DotsHorizontalIcon,
SelectionIcon,
pencilIcon,
} from "./icons";
import { Island } from "./Island";
@@ -163,7 +170,7 @@ export const SelectedShapeActions = ({
const isEditingTextOrNewElement = Boolean(
appState.editingTextElement || appState.newElement,
);
const device = useDevice();
const editorInterface = useEditorInterface();
const isRTL = document.documentElement.getAttribute("dir") === "rtl";
const showFillIcons =
@@ -311,8 +318,10 @@ export const SelectedShapeActions = ({
<fieldset>
<legend>{t("labels.actions")}</legend>
<div className="buttonList">
{!device.editor.isMobile && renderAction("duplicateSelection")}
{!device.editor.isMobile && renderAction("deleteSelectedElements")}
{editorInterface.formFactor !== "phone" &&
renderAction("duplicateSelection")}
{editorInterface.formFactor !== "phone" &&
renderAction("deleteSelectedElements")}
{renderAction("group")}
{renderAction("ungroup")}
{showLinkIcon && renderAction("hyperlink")}
@@ -1075,6 +1084,9 @@ export const ShapesSwitcher = ({
UIOptions: AppProps["UIOptions"];
}) => {
const [isExtraToolsMenuOpen, setIsExtraToolsMenuOpen] = useState(false);
const stylesPanelMode = useStylesPanelMode();
const isFullStylesPanel = stylesPanelMode === "full";
const isCompactStylesPanel = stylesPanelMode === "compact";
const SELECTION_TOOLS = [
{
@@ -1092,7 +1104,7 @@ export const ShapesSwitcher = ({
const frameToolSelected = activeTool.type === "frame";
const laserToolSelected = activeTool.type === "laser";
const lassoToolSelected =
app.state.stylesPanelMode === "full" &&
isFullStylesPanel &&
activeTool.type === "lasso" &&
app.state.preferredSelectionTool.type !== "lasso";
@@ -1125,7 +1137,7 @@ export const ShapesSwitcher = ({
// use a ToolPopover for selection/lasso toggle as well
if (
(value === "selection" || value === "lasso") &&
app.state.stylesPanelMode === "compact"
isCompactStylesPanel
) {
return (
<ToolPopover
@@ -1259,7 +1271,7 @@ export const ShapesSwitcher = ({
>
{t("toolBar.laser")}
</DropdownMenu.Item>
{app.state.stylesPanelMode === "full" && (
{isFullStylesPanel && (
<DropdownMenu.Item
onSelect={() => app.setActiveTool({ type: "lasso" })}
icon={LassoIcon}
@@ -1329,7 +1341,7 @@ export const UndoRedoActions = ({
</div>
);
export const ExitZenModeAction = ({
export const ExitZenModeButton = ({
actionManager,
showExitZenModeBtn,
}: {
@@ -1346,3 +1358,17 @@ export const ExitZenModeAction = ({
{t("buttons.exitZenMode")}
</button>
);
export const ExitViewModeButton = ({
actionManager,
}: {
actionManager: ActionManager;
}) => (
<button
type="button"
className="disable-view-mode"
onClick={() => actionManager.executeAction(actionToggleViewMode)}
>
{pencilIcon}
</button>
);
packages/excalidraw/components/App.tsx
+1152 -515
View File
File diff suppressed because it is too large Load Diff
packages/excalidraw/components/ColorPicker/ColorInput.tsx
+3 -3
View File
@@ -6,7 +6,7 @@ import { KEYS } from "@excalidraw/common";
import { getShortcutKey } from "../..//shortcut";
import { useAtom } from "../../editor-jotai";
import { t } from "../../i18n";
import { useDevice } from "../App";
import { useEditorInterface } from "../App";
import { activeEyeDropperAtom } from "../EyeDropper";
import { eyeDropperIcon } from "../icons";
@@ -30,7 +30,7 @@ export const ColorInput = ({
colorPickerType,
placeholder,
}: ColorInputProps) => {
const device = useDevice();
const editorInterface = useEditorInterface();
const [innerValue, setInnerValue] = useState(color);
const [activeSection, setActiveColorPickerSection] = useAtom(
activeColorPickerSectionAtom,
@@ -99,7 +99,7 @@ export const ColorInput = ({
placeholder={placeholder}
/>
{/* TODO reenable on mobile with a better UX */}
{!device.editor.isMobile && (
{editorInterface.formFactor !== "phone" && (
<>
<div
style={{
packages/excalidraw/components/ColorPicker/ColorPicker.tsx
+30 -36
View File
@@ -15,7 +15,7 @@ import type { ExcalidrawElement } from "@excalidraw/element/types";
import { useAtom } from "../../editor-jotai";
import { t } from "../../i18n";
import { useExcalidrawContainer } from "../App";
import { useExcalidrawContainer, useStylesPanelMode } from "../App";
import { ButtonSeparator } from "../ButtonSeparator";
import { activeEyeDropperAtom } from "../EyeDropper";
import { PropertiesPopover } from "../PropertiesPopover";
@@ -73,7 +73,6 @@ interface ColorPickerProps {
palette?: ColorPaletteCustom | null;
topPicks?: ColorTuple;
updateData: (formData?: any) => void;
compactMode?: boolean;
}
const ColorPickerPopupContent = ({
@@ -100,6 +99,9 @@ const ColorPickerPopupContent = ({
getOpenPopup: () => AppState["openPopup"];
}) => {
const { container } = useExcalidrawContainer();
const stylesPanelMode = useStylesPanelMode();
const isCompactMode = stylesPanelMode !== "full";
const isMobileMode = stylesPanelMode === "mobile";
const [, setActiveColorPickerSection] = useAtom(activeColorPickerSectionAtom);
const [eyeDropperState, setEyeDropperState] = useAtom(activeEyeDropperAtom);
@@ -216,11 +218,8 @@ const ColorPickerPopupContent = ({
type={type}
elements={elements}
updateData={updateData}
showTitle={
appState.stylesPanelMode === "compact" ||
appState.stylesPanelMode === "mobile"
}
showHotKey={appState.stylesPanelMode !== "mobile"}
showTitle={isCompactMode}
showHotKey={!isMobileMode}
>
{colorInputJSX}
</Picker>
@@ -235,7 +234,6 @@ const ColorPickerTrigger = ({
label,
color,
type,
stylesPanelMode,
mode = "background",
onToggle,
editingTextElement,
@@ -243,11 +241,13 @@ const ColorPickerTrigger = ({
color: string | null;
label: string;
type: ColorPickerType;
stylesPanelMode?: AppState["stylesPanelMode"];
mode?: "background" | "stroke";
onToggle: () => void;
editingTextElement?: boolean;
}) => {
const stylesPanelMode = useStylesPanelMode();
const isCompactMode = stylesPanelMode !== "full";
const isMobileMode = stylesPanelMode === "mobile";
const handleClick = (e: React.MouseEvent) => {
// use pointerdown so we run before outside-close logic
e.preventDefault();
@@ -268,9 +268,8 @@ const ColorPickerTrigger = ({
"is-transparent": !color || color === "transparent",
"has-outline":
!color || !isColorDark(color, COLOR_OUTLINE_CONTRAST_THRESHOLD),
"compact-sizing":
stylesPanelMode === "compact" || stylesPanelMode === "mobile",
"mobile-border": stylesPanelMode === "mobile",
"compact-sizing": isCompactMode,
"mobile-border": isMobileMode,
})}
aria-label={label}
style={color ? { "--swatch-color": color } : undefined}
@@ -283,22 +282,20 @@ const ColorPickerTrigger = ({
onClick={handleClick}
>
<div className="color-picker__button-outline">{!color && slashIcon}</div>
{(stylesPanelMode === "compact" || stylesPanelMode === "mobile") &&
color &&
mode === "stroke" && (
<div className="color-picker__button-background">
<span
style={{
color:
color && isColorDark(color, COLOR_OUTLINE_CONTRAST_THRESHOLD)
? "#fff"
: "#111",
}}
>
{strokeIcon}
</span>
</div>
)}
{isCompactMode && color && mode === "stroke" && (
<div className="color-picker__button-background">
<span
style={{
color:
color && isColorDark(color, COLOR_OUTLINE_CONTRAST_THRESHOLD)
? "#fff"
: "#111",
}}
>
{strokeIcon}
</span>
</div>
)}
</Popover.Trigger>
);
};
@@ -318,10 +315,8 @@ export const ColorPicker = ({
useEffect(() => {
openRef.current = appState.openPopup;
}, [appState.openPopup]);
const compactMode =
type !== "canvasBackground" &&
(appState.stylesPanelMode === "compact" ||
appState.stylesPanelMode === "mobile");
const stylesPanelMode = useStylesPanelMode();
const isCompactMode = stylesPanelMode !== "full";
return (
<div>
@@ -329,10 +324,10 @@ export const ColorPicker = ({
role="dialog"
aria-modal="true"
className={clsx("color-picker-container", {
"color-picker-container--no-top-picks": compactMode,
"color-picker-container--no-top-picks": isCompactMode,
})}
>
{!compactMode && (
{!isCompactMode && (
<TopPicks
activeColor={color}
onChange={onChange}
@@ -340,7 +335,7 @@ export const ColorPicker = ({
topPicks={topPicks}
/>
)}
{!compactMode && <ButtonSeparator />}
{!isCompactMode && <ButtonSeparator />}
<Popover.Root
open={appState.openPopup === type}
onOpenChange={(open) => {
@@ -354,7 +349,6 @@ export const ColorPicker = ({
color={color}
label={label}
type={type}
stylesPanelMode={appState.stylesPanelMode}
mode={type === "elementStroke" ? "stroke" : "background"}
editingTextElement={!!appState.editingTextElement}
onToggle={() => {
packages/excalidraw/components/CommandPalette/CommandPalette.tsx
+4 -4
View File
@@ -903,7 +903,7 @@ function CommandPaletteInner({
ref={inputRef}
/>
{!app.device.viewport.isMobile && (
{app.editorInterface.formFactor !== "phone" && (
<div className="shortcuts-wrapper">
<CommandShortcutHint shortcut="↑↓">
{t("commandPalette.shortcuts.select")}
@@ -937,7 +937,7 @@ function CommandPaletteInner({
onClick={(event) => executeCommand(lastUsed, event)}
disabled={!isCommandAvailable(lastUsed)}
onMouseMove={() => setCurrentCommand(lastUsed)}
showShortcut={!app.device.viewport.isMobile}
showShortcut={app.editorInterface.formFactor !== "phone"}
appState={uiAppState}
/>
</div>
@@ -955,7 +955,7 @@ function CommandPaletteInner({
isSelected={command.label === currentCommand?.label}
onClick={(event) => executeCommand(command, event)}
onMouseMove={() => setCurrentCommand(command)}
showShortcut={!app.device.viewport.isMobile}
showShortcut={app.editorInterface.formFactor !== "phone"}
appState={uiAppState}
size={category === "Library" ? "large" : "small"}
/>
@@ -1034,7 +1034,7 @@ const CommandItem = ({
size="var(--icon-size, 1rem)"
icon={
typeof command.icon === "function"
? command.icon(appState)
? command.icon(appState, [])
: command.icon
}
/>
packages/excalidraw/components/CommandPalette/types.ts
+1 -2
View File
@@ -1,6 +1,5 @@
import type { ActionManager } from "../../actions/manager";
import type { Action } from "../../actions/types";
import type { UIAppState } from "../../types";
export type CommandPaletteItem = {
label: string;
@@ -12,7 +11,7 @@ export type CommandPaletteItem = {
* (deburred name + keywords)
*/
haystack?: string;
icon?: React.ReactNode | ((appState: UIAppState) => React.ReactNode);
icon?: Action["icon"];
category: string;
order?: number;
predicate?: boolean | Action["predicate"];
packages/excalidraw/components/ConvertElementTypePopup.tsx
+1 -1
View File
@@ -844,7 +844,7 @@ const convertElementType = <
}),
) as typeof element;
updateBindings(nextElement, app.scene);
updateBindings(nextElement, app.scene, app.state);
return nextElement;
}
packages/excalidraw/components/Dialog.tsx
+2 -2
View File
@@ -9,7 +9,7 @@ import { t } from "../i18n";
import {
useExcalidrawContainer,
useDevice,
useEditorInterface,
useExcalidrawSetAppState,
} from "./App";
import { Island } from "./Island";
@@ -51,7 +51,7 @@ export const Dialog = (props: DialogProps) => {
const [islandNode, setIslandNode] = useCallbackRefState<HTMLDivElement>();
const [lastActiveElement] = useState(document.activeElement);
const { id } = useExcalidrawContainer();
const isFullscreen = useDevice().viewport.isMobile;
const isFullscreen = useEditorInterface().formFactor === "phone";
useEffect(() => {
if (!islandNode) {
packages/excalidraw/components/FilledButton.tsx
+1 -1
View File
@@ -20,7 +20,7 @@ export type ButtonColor =
export type ButtonSize = "medium" | "large";
export type FilledButtonProps = {
label: string;
label?: string;
children?: React.ReactNode;
onClick?: (event: React.MouseEvent) => void;
packages/excalidraw/components/FontPicker/FontPickerList.tsx
+8 -2
View File
@@ -20,7 +20,12 @@ import type { ValueOf } from "@excalidraw/common/utility-types";
import { Fonts } from "../../fonts";
import { t } from "../../i18n";
import { useApp, useAppProps, useExcalidrawContainer } from "../App";
import {
useApp,
useAppProps,
useExcalidrawContainer,
useStylesPanelMode,
} from "../App";
import { PropertiesPopover } from "../PropertiesPopover";
import { QuickSearch } from "../QuickSearch";
import { ScrollableList } from "../ScrollableList";
@@ -93,6 +98,7 @@ export const FontPickerList = React.memo(
const app = useApp();
const { fonts } = app;
const { showDeprecatedFonts } = useAppProps();
const stylesPanelMode = useStylesPanelMode();
const [searchTerm, setSearchTerm] = useState("");
const inputRef = useRef<HTMLInputElement>(null);
@@ -338,7 +344,7 @@ export const FontPickerList = React.memo(
onKeyDown={onKeyDown}
preventAutoFocusOnTouch={!!app.state.editingTextElement}
>
{app.state.stylesPanelMode === "full" && (
{stylesPanelMode === "full" && (
<QuickSearch
ref={inputRef}
placeholder={t("quickSearch.placeholder")}
packages/excalidraw/components/HintViewer.tsx
+22 -8
View File
@@ -11,6 +11,8 @@ import {
import { isNodeInFlowchart } from "@excalidraw/element";
import type { EditorInterface } from "@excalidraw/common";
import { t } from "../i18n";
import { getShortcutKey } from "../shortcut";
import { isEraserActive } from "../appState";
@@ -18,12 +20,12 @@ import { isGridModeEnabled } from "../snapping";
import "./HintViewer.scss";
import type { AppClassProperties, Device, UIAppState } from "../types";
import type { AppClassProperties, UIAppState } from "../types";
interface HintViewerProps {
appState: UIAppState;
isMobile: boolean;
device: Device;
editorInterface: EditorInterface;
app: AppClassProperties;
}
@@ -35,7 +37,7 @@ const getTaggedShortcutKey = (key: string | string[]) =>
const getHints = ({
appState,
isMobile,
device,
editorInterface,
app,
}: HintViewerProps): null | string | string[] => {
const { activeTool, isResizing, isRotating, lastPointerDownWith } = appState;
@@ -51,7 +53,7 @@ const getHints = ({
});
}
if (appState.openSidebar && !device.editor.canFitSidebar) {
if (appState.openSidebar && !editorInterface.canFitSidebar) {
return null;
}
@@ -60,6 +62,20 @@ const getHints = ({
shortcut: getTaggedShortcutKey("Alt"),
});
}
const selectedElements = app.scene.getSelectedElements(appState);
// creating or dragging arrow point
if (
appState.selectedLinearElement?.isDragging &&
selectedElements[0]?.type === "arrow"
) {
return t("hints.arrowBindModifiers", {
shortcut_1: getTaggedShortcutKey("Ctrl"),
shortcut_2: getTaggedShortcutKey("Alt"),
});
}
if (activeTool.type === "arrow" || activeTool.type === "line") {
if (multiMode) {
return t("hints.linearElementMulti", {
@@ -87,8 +103,6 @@ const getHints = ({
return t("hints.embeddable");
}
const selectedElements = app.scene.getSelectedElements(appState);
if (
isResizing &&
lastPointerDownWith === "mouse" &&
@@ -225,13 +239,13 @@ const getHints = ({
export const HintViewer = ({
appState,
isMobile,
device,
editorInterface,
app,
}: HintViewerProps) => {
const hints = getHints({
appState,
isMobile,
device,
editorInterface,
app,
});
packages/excalidraw/components/IconPicker.tsx
+3 -3
View File
@@ -8,7 +8,7 @@ import { atom, useAtom } from "../editor-jotai";
import { getLanguage, t } from "../i18n";
import Collapsible from "./Stats/Collapsible";
import { useDevice, useExcalidrawContainer } from "./App";
import { useEditorInterface, useExcalidrawContainer } from "./App";
import "./IconPicker.scss";
@@ -38,7 +38,7 @@ function Picker<T>({
onClose: () => void;
numberOfOptionsToAlwaysShow?: number;
}) {
const device = useDevice();
const editorInterface = useEditorInterface();
const { container } = useExcalidrawContainer();
const handleKeyDown = (event: React.KeyboardEvent) => {
@@ -153,7 +153,7 @@ function Picker<T>({
);
};
const isMobile = device.editor.isMobile;
const isMobile = editorInterface.formFactor === "phone";
return (
<Popover.Content
packages/excalidraw/components/LayerUI.scss
+49
View File
@@ -120,4 +120,53 @@
margin-bottom: auto;
}
}
.disable-view-mode {
display: flex;
justify-content: center;
cursor: pointer;
align-items: center;
border: 1px solid var(--color-primary);
padding: 0.5rem;
border-radius: var(--border-radius-lg);
background-color: var(--island-bg-color);
text-decoration: none !important;
font-family: var(--ui-font);
font-size: 0.8333rem;
box-sizing: border-box;
width: var(--mobile-action-button-size, var(--default-button-size));
height: var(--mobile-action-button-size, var(--default-button-size));
border: none;
box-shadow: 0 0 0 1px var(--color-surface-lowest);
background-color: var(--color-surface-low);
color: var(--button-color, var(--color-on-surface)) !important;
&:active {
box-shadow: 0 0 0 1px var(--color-brand-active);
}
&:hover {
background-color: var(--color-primary);
color: white !important;
}
&:active {
background-color: var(--color-primary-darker);
}
svg {
width: 20px;
height: 20px;
}
}
.theme--dark {
.plus-banner {
&:hover {
color: black !important;
}
}
}
}
packages/excalidraw/components/LayerUI.tsx
+46 -51
View File
@@ -4,7 +4,6 @@ import React from "react";
import {
CLASSES,
DEFAULT_SIDEBAR,
MQ_MIN_WIDTH_DESKTOP,
TOOL_TYPE,
arrayToMap,
capitalizeString,
@@ -46,9 +45,9 @@ import Footer from "./footer/Footer";
import { isSidebarDockedAtom } from "./Sidebar/Sidebar";
import MainMenu from "./main-menu/MainMenu";
import { ActiveConfirmDialog } from "./ActiveConfirmDialog";
import { useDevice } from "./App";
import { useEditorInterface, useStylesPanelMode } from "./App";
import { OverwriteConfirmDialog } from "./OverwriteConfirm/OverwriteConfirm";
import { LibraryIcon } from "./icons";
import { sidebarRightIcon } from "./icons";
import { DefaultSidebar } from "./DefaultSidebar";
import { TTDDialog } from "./TTDDialog/TTDDialog";
import { Stats } from "./Stats";
@@ -161,27 +160,28 @@ const LayerUI = ({
isCollaborating,
generateLinkForSelection,
}: LayerUIProps) => {
const device = useDevice();
const editorInterface = useEditorInterface();
const stylesPanelMode = useStylesPanelMode();
const isCompactStylesPanel = stylesPanelMode === "compact";
const tunnels = useInitializeTunnels();
const spacing =
appState.stylesPanelMode === "compact"
? {
menuTopGap: 4,
toolbarColGap: 4,
toolbarRowGap: 1,
toolbarInnerRowGap: 0.5,
islandPadding: 1,
collabMarginLeft: 8,
}
: {
menuTopGap: 6,
toolbarColGap: 4,
toolbarRowGap: 1,
toolbarInnerRowGap: 1,
islandPadding: 1,
collabMarginLeft: 8,
};
const spacing = isCompactStylesPanel
? {
menuTopGap: 4,
toolbarColGap: 4,
toolbarRowGap: 1,
toolbarInnerRowGap: 0.5,
islandPadding: 1,
collabMarginLeft: 8,
}
: {
menuTopGap: 6,
toolbarColGap: 4,
toolbarRowGap: 1,
toolbarInnerRowGap: 1,
islandPadding: 1,
collabMarginLeft: 8,
};
const TunnelsJotaiProvider = tunnels.tunnelsJotai.Provider;
@@ -236,7 +236,7 @@ const LayerUI = ({
);
const renderSelectedShapeActions = () => {
const isCompactMode = appState.stylesPanelMode === "compact";
const isCompactMode = isCompactStylesPanel;
return (
<Section
@@ -308,7 +308,7 @@ const LayerUI = ({
<div
className={clsx("selected-shape-actions-container", {
"selected-shape-actions-container--compact":
appState.stylesPanelMode === "compact",
isCompactStylesPanel,
})}
>
{shouldRenderSelectedShapeActions && renderSelectedShapeActions()}
@@ -333,14 +333,13 @@ const LayerUI = ({
padding={spacing.islandPadding}
className={clsx("App-toolbar", {
"zen-mode": appState.zenModeEnabled,
"App-toolbar--compact":
appState.stylesPanelMode === "compact",
"App-toolbar--compact": isCompactStylesPanel,
})}
>
<HintViewer
appState={appState}
isMobile={device.editor.isMobile}
device={device}
isMobile={editorInterface.formFactor === "phone"}
editorInterface={editorInterface}
app={app}
/>
{heading}
@@ -406,8 +405,7 @@ const LayerUI = ({
"layer-ui__wrapper__top-right zen-mode-transition",
{
"transition-right": appState.zenModeEnabled,
"layer-ui__wrapper__top-right--compact":
appState.stylesPanelMode === "compact",
"layer-ui__wrapper__top-right--compact": isCompactStylesPanel,
},
)}
>
@@ -417,7 +415,10 @@ const LayerUI = ({
userToFollow={appState.userToFollow?.socketId || null}
/>
)}
{renderTopRightUI?.(device.editor.isMobile, appState)}
{renderTopRightUI?.(
editorInterface.formFactor === "phone",
appState,
)}
{!appState.viewModeEnabled &&
appState.openDialog?.name !== "elementLinkSelector" &&
// hide button when sidebar docked
@@ -448,7 +449,9 @@ const LayerUI = ({
trackEvent(
"sidebar",
`toggleDock (${docked ? "dock" : "undock"})`,
`(${device.editor.isMobile ? "mobile" : "desktop"})`,
`(${
editorInterface.formFactor === "phone" ? "mobile" : "desktop"
})`,
);
}}
/>
@@ -469,23 +472,21 @@ const LayerUI = ({
<DefaultMainMenu UIOptions={UIOptions} />
<DefaultSidebar.Trigger
__fallback
icon={LibraryIcon}
icon={sidebarRightIcon}
title={capitalizeString(t("toolBar.library"))}
onToggle={(open) => {
if (open) {
trackEvent(
"sidebar",
`${DEFAULT_SIDEBAR.name} (open)`,
`button (${device.editor.isMobile ? "mobile" : "desktop"})`,
`button (${
editorInterface.formFactor === "phone" ? "mobile" : "desktop"
})`,
);
}
}}
tab={DEFAULT_SIDEBAR.defaultTab}
>
{appState.stylesPanelMode === "full" &&
appState.width >= MQ_MIN_WIDTH_DESKTOP &&
t("toolBar.library")}
</DefaultSidebar.Trigger>
/>
<DefaultOverwriteConfirmDialog />
{appState.openDialog?.name === "ttd" && <TTDDialog __fallback />}
{/* ------------------------------------------------------------------ */}
@@ -496,7 +497,7 @@ const LayerUI = ({
{appState.errorMessage}
</ErrorDialog>
)}
{eyeDropperState && !device.editor.isMobile && (
{eyeDropperState && editorInterface.formFactor !== "phone" && (
<EyeDropper
colorPickerType={eyeDropperState.colorPickerType}
onCancel={() => {
@@ -575,7 +576,7 @@ const LayerUI = ({
}
/>
)}
{device.editor.isMobile && (
{editorInterface.formFactor === "phone" && (
<MobileMenu
app={app}
appState={appState}
@@ -593,14 +594,14 @@ const LayerUI = ({
UIOptions={UIOptions}
/>
)}
{!device.editor.isMobile && (
{editorInterface.formFactor !== "phone" && (
<>
<div
className="layer-ui__wrapper"
style={
appState.openSidebar &&
isSidebarDocked &&
device.editor.canFitSidebar
editorInterface.canFitSidebar
? { width: `calc(100% - var(--right-sidebar-width))` }
: {}
}
@@ -645,14 +646,8 @@ const LayerUI = ({
};
const stripIrrelevantAppStateProps = (appState: AppState): UIAppState => {
const {
suggestedBindings,
startBoundElement,
cursorButton,
scrollX,
scrollY,
...ret
} = appState;
const { startBoundElement, cursorButton, scrollX, scrollY, ...ret } =
appState;
return ret;
};
packages/excalidraw/components/LibraryMenuItems.tsx
+3 -3
View File
@@ -32,7 +32,7 @@ import "./LibraryMenuItems.scss";
import { TextField } from "./TextField";
import { useDevice } from "./App";
import { useEditorInterface } from "./App";
import { Button } from "./Button";
@@ -75,7 +75,7 @@ export default function LibraryMenuItems({
selectedItems: LibraryItem["id"][];
onSelectItems: (id: LibraryItem["id"][]) => void;
}) {
const device = useDevice();
const editorInterface = useEditorInterface();
const libraryContainerRef = useRef<HTMLDivElement>(null);
const scrollPosition = useScrollPosition<HTMLDivElement>(libraryContainerRef);
@@ -392,7 +392,7 @@ export default function LibraryMenuItems({
ref={searchInputRef}
type="search"
className={clsx("library-menu-items-container__search", {
hideCancelButton: !device.editor.isMobile,
hideCancelButton: editorInterface.formFactor !== "phone",
})}
placeholder={t("library.search.inputPlaceholder")}
value={searchInputValue}
packages/excalidraw/components/LibraryUnit.tsx
+2 -2
View File
@@ -3,7 +3,7 @@ import { memo, useRef, useState } from "react";
import { useLibraryItemSvg } from "../hooks/useLibraryItemSvg";
import { useDevice } from "./App";
import { useEditorInterface } from "./App";
import { CheckboxItem } from "./CheckboxItem";
import { PlusIcon } from "./icons";
@@ -36,7 +36,7 @@ export const LibraryUnit = memo(
const svg = useLibraryItemSvg(id, elements, svgCache, ref);
const [isHovered, setIsHovered] = useState(false);
const isMobile = useDevice().editor.isMobile;
const isMobile = useEditorInterface().formFactor === "phone";
const adder = isPending && (
<div className="library-unit__adder">{PlusIcon}</div>
);
packages/excalidraw/components/LinkButton.tsx
+15
View File
@@ -0,0 +1,15 @@
import { FilledButton } from "./FilledButton";
export const LinkButton = ({
children,
href,
}: {
href: string;
children: React.ReactNode;
}) => {
return (
<a href={href} target="_blank" rel="noopener" className="link-button">
<FilledButton>{children}</FilledButton>
</a>
);
};
packages/excalidraw/components/MobileMenu.tsx
+63 -44
View File
@@ -7,12 +7,14 @@ import { t } from "../i18n";
import { calculateScrollCenter } from "../scene";
import { SCROLLBAR_WIDTH, SCROLLBAR_MARGIN } from "../scene/scrollbars";
import { MobileShapeActions } from "./Actions";
import { ExitViewModeButton, MobileShapeActions } from "./Actions";
import { MobileToolBar } from "./MobileToolBar";
import { FixedSideContainer } from "./FixedSideContainer";
import { Island } from "./Island";
import { PenModeButton } from "./PenModeButton";
import type { ActionManager } from "../actions/manager";
import type {
AppClassProperties,
@@ -58,6 +60,7 @@ export const MobileMenu = ({
renderWelcomeScreen,
UIOptions,
app,
onPenModeToggle,
}: MobileMenuProps) => {
const {
WelcomeScreenCenterTunnel,
@@ -65,8 +68,29 @@ export const MobileMenu = ({
DefaultSidebarTriggerTunnel,
} = useTunnels();
const renderAppTopBar = () => {
const topRightUI = renderTopRightUI?.(true, appState) ?? (
<DefaultSidebarTriggerTunnel.Out />
if (appState.openDialog?.name === "elementLinkSelector") {
return null;
}
const topRightUI = (
<div className="excalidraw-ui-top-right">
{renderTopRightUI?.(true, appState) ??
(!appState.viewModeEnabled && (
<>
<PenModeButton
checked={appState.penMode}
onChange={() => onPenModeToggle(null)}
title={t("toolBar.penMode")}
isMobile
penDetected={appState.penDetected}
/>
<DefaultSidebarTriggerTunnel.Out />
</>
))}
{appState.viewModeEnabled && (
<ExitViewModeButton actionManager={actionManager} />
)}
</div>
);
const topLeftUI = (
@@ -76,13 +100,6 @@ export const MobileMenu = ({
</div>
);
if (
appState.viewModeEnabled ||
appState.openDialog?.name === "elementLinkSelector"
) {
return <div className="App-toolbar-content">{topLeftUI}</div>;
}
return (
<div
className="App-toolbar-content"
@@ -117,41 +134,43 @@ export const MobileMenu = ({
{renderWelcomeScreen && <WelcomeScreenCenterTunnel.Out />}
</div>
<div
className="App-bottom-bar"
style={{
marginBottom: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN,
}}
>
<MobileShapeActions
appState={appState}
elementsMap={app.scene.getNonDeletedElementsMap()}
renderAction={actionManager.renderAction}
app={app}
setAppState={setAppState}
/>
{!appState.viewModeEnabled && (
<div
className="App-bottom-bar"
style={{
marginBottom: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN,
}}
>
<MobileShapeActions
appState={appState}
elementsMap={app.scene.getNonDeletedElementsMap()}
renderAction={actionManager.renderAction}
app={app}
setAppState={setAppState}
/>
<Island className="App-toolbar">
{!appState.viewModeEnabled &&
appState.openDialog?.name !== "elementLinkSelector" &&
renderToolbar()}
{appState.scrolledOutside &&
!appState.openMenu &&
!appState.openSidebar && (
<button
type="button"
className="scroll-back-to-content"
onClick={() => {
setAppState((appState) => ({
...calculateScrollCenter(elements, appState),
}));
}}
>
{t("buttons.scrollBackToContent")}
</button>
)}
</Island>
</div>
<Island className="App-toolbar">
{!appState.viewModeEnabled &&
appState.openDialog?.name !== "elementLinkSelector" &&
renderToolbar()}
{appState.scrolledOutside &&
!appState.openMenu &&
!appState.openSidebar && (
<button
type="button"
className="scroll-back-to-content"
onClick={() => {
setAppState((appState) => ({
...calculateScrollCenter(elements, appState),
}));
}}
>
{t("buttons.scrollBackToContent")}
</button>
)}
</Island>
</div>
)}
<FixedSideContainer side="top" className="App-top-bar">
{renderAppTopBar()}
packages/excalidraw/components/MobileToolBar.tsx
+19 -9
View File
@@ -1,4 +1,4 @@
import { useState, useEffect, useRef } from "react";
import { useState, useEffect } from "react";
import clsx from "clsx";
import { KEYS, capitalizeString } from "@excalidraw/common";
@@ -101,8 +101,6 @@ export const MobileToolBar = ({
"arrow" | "line"
>("arrow");
const toolbarRef = useRef<HTMLDivElement>(null);
// keep lastActiveGenericShape in sync with active tool if user switches via other UI
useEffect(() => {
if (
@@ -143,8 +141,8 @@ export const MobileToolBar = ({
}
};
const toolbarWidth =
toolbarRef.current?.getBoundingClientRect()?.width ?? 0 - 8;
const [toolbarWidth, setToolbarWidth] = useState(0);
const WIDTH = 36;
const GAP = 4;
@@ -164,6 +162,9 @@ export const MobileToolBar = ({
"laser",
"magicframe",
].filter((tool) => {
if (showTextToolOutside && tool === "text") {
return false;
}
if (showImageToolOutside && tool === "image") {
return false;
}
@@ -174,21 +175,30 @@ export const MobileToolBar = ({
});
const extraToolSelected = extraTools.includes(activeTool.type);
const extraIcon = extraToolSelected
? activeTool.type === "frame"
? activeTool.type === "text"
? TextIcon
: activeTool.type === "image"
? ImageIcon
: activeTool.type === "frame"
? frameToolIcon
: activeTool.type === "embeddable"
? EmbedIcon
: activeTool.type === "laser"
? laserPointerToolIcon
: activeTool.type === "text"
? TextIcon
: activeTool.type === "magicframe"
? MagicIcon
: extraToolsIcon
: extraToolsIcon;
return (
<div className="mobile-toolbar" ref={toolbarRef}>
<div
className="mobile-toolbar"
ref={(div) => {
if (div) {
setToolbarWidth(div.getBoundingClientRect().width);
}
}}
>
{/* Hand Tool */}
<HandButton
checked={isHandToolActive(app.state)}
packages/excalidraw/components/PropertiesPopover.tsx
+6 -5
View File
@@ -4,7 +4,7 @@ import React, { type ReactNode } from "react";
import { isInteractive } from "@excalidraw/common";
import { useDevice } from "./App";
import { useEditorInterface } from "./App";
import { Island } from "./Island";
interface PropertiesPopoverProps {
@@ -39,9 +39,9 @@ export const PropertiesPopover = React.forwardRef<
},
ref,
) => {
const device = useDevice();
const editorInterface = useEditorInterface();
const isMobilePortrait =
device.editor.isMobile && !device.viewport.isLandscape;
editorInterface.formFactor === "phone" && !editorInterface.isLandscape;
return (
<Popover.Portal container={container}>
@@ -56,7 +56,8 @@ export const PropertiesPopover = React.forwardRef<
collisionBoundary={container ?? undefined}
style={{
zIndex: "var(--zIndex-ui-styles-popup)",
marginLeft: device.editor.isMobile ? "0.5rem" : undefined,
marginLeft:
editorInterface.formFactor === "phone" ? "0.5rem" : undefined,
}}
onPointerLeave={onPointerLeave}
onKeyDown={onKeyDown}
@@ -64,7 +65,7 @@ export const PropertiesPopover = React.forwardRef<
onPointerDownOutside={onPointerDownOutside}
onOpenAutoFocus={(e) => {
// prevent auto-focus on touch devices to avoid keyboard popup
if (preventAutoFocusOnTouch && device.isTouchScreen) {
if (preventAutoFocusOnTouch && editorInterface.isTouchScreen) {
e.preventDefault();
}
}}
packages/excalidraw/components/Sidebar/Sidebar.tsx
+6 -6
View File
@@ -20,7 +20,7 @@ import {
import { useUIAppState } from "../../context/ui-appState";
import { atom, useSetAtom } from "../../editor-jotai";
import { useOutsideClick } from "../../hooks/useOutsideClick";
import { useDevice, useExcalidrawSetAppState } from "../App";
import { useEditorInterface, useExcalidrawSetAppState } from "../App";
import { Island } from "../Island";
import { SidebarHeader } from "./SidebarHeader";
@@ -96,7 +96,7 @@ export const SidebarInner = forwardRef(
return islandRef.current!;
});
const device = useDevice();
const editorInterface = useEditorInterface();
const closeLibrary = useCallback(() => {
const isDialogOpen = !!document.querySelector(".Dialog");
@@ -117,11 +117,11 @@ export const SidebarInner = forwardRef(
if ((event.target as Element).closest(".sidebar-trigger")) {
return;
}
if (!docked || !device.editor.canFitSidebar) {
if (!docked || !editorInterface.canFitSidebar) {
closeLibrary();
}
},
[closeLibrary, docked, device.editor.canFitSidebar],
[closeLibrary, docked, editorInterface.canFitSidebar],
),
);
@@ -129,7 +129,7 @@ export const SidebarInner = forwardRef(
const handleKeyDown = (event: KeyboardEvent) => {
if (
event.key === KEYS.ESCAPE &&
(!docked || !device.editor.canFitSidebar)
(!docked || !editorInterface.canFitSidebar)
) {
closeLibrary();
}
@@ -138,7 +138,7 @@ export const SidebarInner = forwardRef(
return () => {
document.removeEventListener(EVENT.KEYDOWN, handleKeyDown);
};
}, [closeLibrary, docked, device.editor.canFitSidebar]);
}, [closeLibrary, docked, editorInterface.canFitSidebar]);
return (
<Island
packages/excalidraw/components/Sidebar/SidebarHeader.tsx
+3 -3
View File
@@ -2,7 +2,7 @@ import clsx from "clsx";
import { useContext } from "react";
import { t } from "../../i18n";
import { useDevice } from "../App";
import { useEditorInterface } from "../App";
import { Button } from "../Button";
import { Tooltip } from "../Tooltip";
import { CloseIcon, PinIcon } from "../icons";
@@ -16,11 +16,11 @@ export const SidebarHeader = ({
children?: React.ReactNode;
className?: string;
}) => {
const device = useDevice();
const editorInterface = useEditorInterface();
const props = useContext(SidebarPropsContext);
const renderDockButton = !!(
device.editor.canFitSidebar && props.shouldRenderDockButton
editorInterface.canFitSidebar && props.shouldRenderDockButton
);
return (
packages/excalidraw/components/Stats/Angle.tsx
+3 -2
View File
@@ -34,6 +34,7 @@ const handleDegreeChange: DragInputCallbackType<AngleProps["property"]> = ({
shouldChangeByStepSize,
nextValue,
scene,
app,
}) => {
const elementsMap = scene.getNonDeletedElementsMap();
const origElement = originalElements[0];
@@ -48,7 +49,7 @@ const handleDegreeChange: DragInputCallbackType<AngleProps["property"]> = ({
scene.mutateElement(latestElement, {
angle: nextAngle,
});
updateBindings(latestElement, scene);
updateBindings(latestElement, scene, app.state);
const boundTextElement = getBoundTextElement(latestElement, elementsMap);
if (boundTextElement && !isArrowElement(latestElement)) {
@@ -74,7 +75,7 @@ const handleDegreeChange: DragInputCallbackType<AngleProps["property"]> = ({
scene.mutateElement(latestElement, {
angle: nextAngle,
});
updateBindings(latestElement, scene);
updateBindings(latestElement, scene, app.state);
const boundTextElement = getBoundTextElement(latestElement, elementsMap);
if (boundTextElement && !isArrowElement(latestElement)) {
packages/excalidraw/components/Stats/MultiDimension.tsx
+1 -3
View File
@@ -94,9 +94,7 @@ const resizeElementInGroup = (
);
if (boundTextElement) {
const newFontSize = boundTextElement.fontSize * scale;
updateBoundElements(latestElement, scene, {
newSize: { width: updates.width, height: updates.height },
});
updateBoundElements(latestElement, scene);
const latestBoundTextElement = elementsMap.get(boundTextElement.id);
if (latestBoundTextElement && isTextElement(latestBoundTextElement)) {
scene.mutateElement(latestBoundTextElement, {
packages/excalidraw/components/Stats/MultiPosition.tsx
+8
View File
@@ -38,6 +38,7 @@ const moveElements = (
originalElements: readonly ExcalidrawElement[],
originalElementsMap: ElementsMap,
scene: Scene,
appState: AppState,
) => {
for (let i = 0; i < originalElements.length; i++) {
const origElement = originalElements[i];
@@ -63,6 +64,7 @@ const moveElements = (
newTopLeftY,
origElement,
scene,
appState,
originalElementsMap,
false,
);
@@ -75,6 +77,7 @@ const moveGroupTo = (
originalElements: ExcalidrawElement[],
originalElementsMap: ElementsMap,
scene: Scene,
appState: AppState,
) => {
const elementsMap = scene.getNonDeletedElementsMap();
const [x1, y1, ,] = getCommonBounds(originalElements);
@@ -107,6 +110,7 @@ const moveGroupTo = (
topLeftY + offsetY,
origElement,
scene,
appState,
originalElementsMap,
false,
);
@@ -125,6 +129,7 @@ const handlePositionChange: DragInputCallbackType<
property,
scene,
originalAppState,
app,
}) => {
const elementsMap = scene.getNonDeletedElementsMap();
@@ -152,6 +157,7 @@ const handlePositionChange: DragInputCallbackType<
elementsInUnit.map((el) => el.original),
originalElementsMap,
scene,
app.state,
);
} else {
const origElement = elementsInUnit[0]?.original;
@@ -178,6 +184,7 @@ const handlePositionChange: DragInputCallbackType<
newTopLeftY,
origElement,
scene,
app.state,
originalElementsMap,
false,
);
@@ -203,6 +210,7 @@ const handlePositionChange: DragInputCallbackType<
originalElements,
originalElementsMap,
scene,
app.state,
);
scene.triggerUpdate();
packages/excalidraw/components/Stats/Position.tsx
+3
View File
@@ -34,6 +34,7 @@ const handlePositionChange: DragInputCallbackType<"x" | "y"> = ({
property,
scene,
originalAppState,
app,
}) => {
const elementsMap = scene.getNonDeletedElementsMap();
const origElement = originalElements[0];
@@ -131,6 +132,7 @@ const handlePositionChange: DragInputCallbackType<"x" | "y"> = ({
newTopLeftY,
origElement,
scene,
app.state,
originalElementsMap,
);
return;
@@ -162,6 +164,7 @@ const handlePositionChange: DragInputCallbackType<"x" | "y"> = ({
newTopLeftY,
origElement,
scene,
app.state,
originalElementsMap,
);
};
packages/excalidraw/components/Stats/index.tsx
+9 -11
View File
@@ -6,7 +6,7 @@ import { useEffect, useMemo, useState, memo } from "react";
import { STATS_PANELS } from "@excalidraw/common";
import { getCommonBounds } from "@excalidraw/element";
import { getUncroppedWidthAndHeight } from "@excalidraw/element";
import { isElbowArrow, isImageElement } from "@excalidraw/element";
import { isImageElement } from "@excalidraw/element";
import { frameAndChildrenSelectedTogether } from "@excalidraw/element";
@@ -333,16 +333,14 @@ export const StatsInner = memo(
appState={appState}
/>
</StatsRow>
{!isElbowArrow(singleElement) && (
<StatsRow>
<Angle
property="angle"
element={singleElement}
scene={scene}
appState={appState}
/>
</StatsRow>
)}
<StatsRow>
<Angle
property="angle"
element={singleElement}
scene={scene}
appState={appState}
/>
</StatsRow>
<StatsRow>
<FontSize
property="fontSize"
packages/excalidraw/components/Stats/stats.test.tsx
+2 -24
View File
@@ -114,7 +114,7 @@ describe("binding with linear elements", () => {
mouse.up(200, 100);
UI.clickTool("arrow");
mouse.down(5, 0);
mouse.down(-5, 0);
mouse.up(300, 50);
elementStats = stats?.querySelector("#elementStats");
@@ -135,18 +135,7 @@ describe("binding with linear elements", () => {
) as HTMLInputElement;
expect(linear.startBinding).not.toBe(null);
expect(inputX).not.toBeNull();
UI.updateInput(inputX, String("204"));
expect(linear.startBinding).not.toBe(null);
});
it("should remain bound to linear element on small angle change", async () => {
const linear = h.elements[1] as ExcalidrawLinearElement;
const inputAngle = UI.queryStatsProperty("A")?.querySelector(
".drag-input",
) as HTMLInputElement;
expect(linear.startBinding).not.toBe(null);
UI.updateInput(inputAngle, String("1"));
UI.updateInput(inputX, String("186"));
expect(linear.startBinding).not.toBe(null);
});
@@ -161,17 +150,6 @@ describe("binding with linear elements", () => {
UI.updateInput(inputX, String("254"));
expect(linear.startBinding).toBe(null);
});
it("should remain bound to linear element on small angle change", async () => {
const linear = h.elements[1] as ExcalidrawLinearElement;
const inputAngle = UI.queryStatsProperty("A")?.querySelector(
".drag-input",
) as HTMLInputElement;
expect(linear.startBinding).not.toBe(null);
UI.updateInput(inputAngle, String("45"));
expect(linear.startBinding).toBe(null);
});
});
// single element
packages/excalidraw/components/Stats/utils.ts
+24 -3
View File
@@ -1,6 +1,10 @@
import { pointFrom, pointRotateRads } from "@excalidraw/math";
import { getBoundTextElement } from "@excalidraw/element";
import {
getBoundTextElement,
isBindingElement,
unbindBindingElement,
} from "@excalidraw/element";
import { isFrameLikeElement } from "@excalidraw/element";
import {
@@ -12,6 +16,7 @@ import {
import { getFrameChildren } from "@excalidraw/element";
import { updateBindings } from "@excalidraw/element";
import { DRAGGING_THRESHOLD } from "@excalidraw/common";
import type { Radians } from "@excalidraw/math";
@@ -110,9 +115,25 @@ export const moveElement = (
newTopLeftY: number,
originalElement: ExcalidrawElement,
scene: Scene,
appState: AppState,
originalElementsMap: ElementsMap,
shouldInformMutation = true,
) => {
if (
isBindingElement(originalElement) &&
(originalElement.startBinding || originalElement.endBinding)
) {
if (
Math.abs(newTopLeftX - originalElement.x) < DRAGGING_THRESHOLD &&
Math.abs(newTopLeftY - originalElement.y) < DRAGGING_THRESHOLD
) {
return;
}
unbindBindingElement(originalElement, "start", scene);
unbindBindingElement(originalElement, "end", scene);
}
const elementsMap = scene.getNonDeletedElementsMap();
const latestElement = elementsMap.get(originalElement.id);
if (!latestElement) {
@@ -145,7 +166,7 @@ export const moveElement = (
},
{ informMutation: shouldInformMutation, isDragging: false },
);
updateBindings(latestElement, scene);
updateBindings(latestElement, scene, appState);
const boundTextElement = getBoundTextElement(
originalElement,
@@ -203,7 +224,7 @@ export const moveElement = (
},
{ informMutation: shouldInformMutation, isDragging: false },
);
updateBindings(latestChildElement, scene, {
updateBindings(latestChildElement, scene, appState, {
simultaneouslyUpdated: originalChildren,
});
});
packages/excalidraw/components/canvases/InteractiveCanvas.tsx
+78 -30
View File
@@ -4,7 +4,17 @@ import {
CURSOR_TYPE,
isShallowEqual,
sceneCoordsToViewportCoords,
type EditorInterface,
} from "@excalidraw/common";
import { AnimationController } from "@excalidraw/excalidraw/renderer/animation";
import type {
InteractiveCanvasRenderConfig,
InteractiveSceneRenderAnimationState,
InteractiveSceneRenderConfig,
RenderableElementsMap,
RenderInteractiveSceneCallback,
} from "@excalidraw/excalidraw/scene/types";
import type {
NonDeletedExcalidrawElement,
@@ -12,15 +22,13 @@ import type {
} from "@excalidraw/element/types";
import { t } from "../../i18n";
import { isRenderThrottlingEnabled } from "../../reactUtils";
import { renderInteractiveScene } from "../../renderer/interactiveScene";
import type {
InteractiveCanvasRenderConfig,
RenderableElementsMap,
RenderInteractiveSceneCallback,
} from "../../scene/types";
import type { AppState, Device, InteractiveCanvasAppState } from "../../types";
AppClassProperties,
AppState,
InteractiveCanvasAppState,
} from "../../types";
import type { DOMAttributes } from "react";
type InteractiveCanvasProps = {
@@ -35,7 +43,8 @@ type InteractiveCanvasProps = {
scale: number;
appState: InteractiveCanvasAppState;
renderScrollbars: boolean;
device: Device;
editorInterface: EditorInterface;
app: AppClassProperties;
renderInteractiveSceneCallback: (
data: RenderInteractiveSceneCallback,
) => void;
@@ -70,8 +79,11 @@ type InteractiveCanvasProps = {
>;
};
export const INTERACTIVE_SCENE_ANIMATION_KEY = "animateInteractiveScene";
const InteractiveCanvas = (props: InteractiveCanvasProps) => {
const isComponentMounted = useRef(false);
const rendererParams = useRef(null as InteractiveSceneRenderConfig | null);
useEffect(() => {
if (!isComponentMounted.current) {
@@ -128,29 +140,60 @@ const InteractiveCanvas = (props: InteractiveCanvasProps) => {
)) ||
"#6965db";
renderInteractiveScene(
{
canvas: props.canvas,
elementsMap: props.elementsMap,
visibleElements: props.visibleElements,
selectedElements: props.selectedElements,
allElementsMap: props.allElementsMap,
scale: window.devicePixelRatio,
appState: props.appState,
renderConfig: {
remotePointerViewportCoords,
remotePointerButton,
remoteSelectedElementIds,
remotePointerUsernames,
remotePointerUserStates,
selectionColor,
renderScrollbars: props.renderScrollbars,
},
device: props.device,
callback: props.renderInteractiveSceneCallback,
rendererParams.current = {
app: props.app,
canvas: props.canvas,
elementsMap: props.elementsMap,
visibleElements: props.visibleElements,
selectedElements: props.selectedElements,
allElementsMap: props.allElementsMap,
scale: window.devicePixelRatio,
appState: props.appState,
renderConfig: {
remotePointerViewportCoords,
remotePointerButton,
remoteSelectedElementIds,
remotePointerUsernames,
remotePointerUserStates,
selectionColor,
renderScrollbars: props.renderScrollbars,
// NOTE not memoized on so we don't rerender on cursor move
lastViewportPosition: props.app.lastViewportPosition,
},
isRenderThrottlingEnabled(),
);
editorInterface: props.editorInterface,
callback: props.renderInteractiveSceneCallback,
animationState: {
bindingHighlight: undefined,
},
deltaTime: 0,
};
if (!AnimationController.running(INTERACTIVE_SCENE_ANIMATION_KEY)) {
AnimationController.start<InteractiveSceneRenderAnimationState>(
INTERACTIVE_SCENE_ANIMATION_KEY,
({ deltaTime, state }) => {
const nextAnimationState = renderInteractiveScene({
...rendererParams.current!,
deltaTime,
animationState: state,
}).animationState;
if (nextAnimationState) {
for (const key in nextAnimationState) {
if (
nextAnimationState[
key as keyof InteractiveSceneRenderAnimationState
] !== undefined
) {
return nextAnimationState;
}
}
}
return undefined;
},
);
}
});
return (
@@ -201,8 +244,9 @@ const getRelevantAppStateProps = (
selectedGroupIds: appState.selectedGroupIds,
selectedLinearElement: appState.selectedLinearElement,
multiElement: appState.multiElement,
newElement: appState.newElement,
isBindingEnabled: appState.isBindingEnabled,
suggestedBindings: appState.suggestedBindings,
suggestedBinding: appState.suggestedBinding,
isRotating: appState.isRotating,
elementsToHighlight: appState.elementsToHighlight,
collaborators: appState.collaborators, // Necessary for collab. sessions
@@ -214,6 +258,10 @@ const getRelevantAppStateProps = (
croppingElementId: appState.croppingElementId,
searchMatches: appState.searchMatches,
activeLockedId: appState.activeLockedId,
hoveredElementIds: appState.hoveredElementIds,
frameRendering: appState.frameRendering,
shouldCacheIgnoreZoom: appState.shouldCacheIgnoreZoom,
exportScale: appState.exportScale,
});
const areEqual = (
packages/excalidraw/components/canvases/StaticCanvas.tsx
+1
View File
@@ -99,6 +99,7 @@ const getRelevantAppStateProps = (appState: AppState): StaticCanvasAppState => {
editingGroupId: appState.editingGroupId,
currentHoveredFontFamily: appState.currentHoveredFontFamily,
croppingElementId: appState.croppingElementId,
suggestedBinding: appState.suggestedBinding,
};
return relevantAppStateProps;
packages/excalidraw/components/dropdownMenu/DropdownMenu.tsx
+8 -2
View File
@@ -35,10 +35,16 @@ const DropdownMenu = ({
: MenuContentComp;
return (
<>
<div
className="dropdown-menu-container"
style={{
// remove this div from box layout
display: "contents",
}}
>
{MenuTriggerComp}
{open && MenuContentCompWithPlacement}
</>
</div>
);
};
packages/excalidraw/components/dropdownMenu/DropdownMenuContent.tsx
+14 -12
View File
@@ -5,7 +5,7 @@ import { EVENT, KEYS } from "@excalidraw/common";
import { useOutsideClick } from "../../hooks/useOutsideClick";
import { useStable } from "../../hooks/useStable";
import { useDevice } from "../App";
import { useEditorInterface } from "../App";
import { Island } from "../Island";
import Stack from "../Stack";
@@ -29,13 +29,20 @@ const MenuContent = ({
style?: React.CSSProperties;
placement?: "top" | "bottom";
}) => {
const device = useDevice();
const editorInterface = useEditorInterface();
const menuRef = useRef<HTMLDivElement>(null);
const callbacksRef = useStable({ onClickOutside });
useOutsideClick(menuRef, () => {
callbacksRef.onClickOutside?.();
useOutsideClick(menuRef, (event) => {
// prevents closing if clicking on the trigger button
if (
!menuRef.current
?.closest(".dropdown-menu-container")
?.contains(event.target)
) {
callbacksRef.onClickOutside?.();
}
});
useEffect(() => {
@@ -59,7 +66,7 @@ const MenuContent = ({
}, [callbacksRef]);
const classNames = clsx(`dropdown-menu ${className}`, {
"dropdown-menu--mobile": device.editor.isMobile,
"dropdown-menu--mobile": editorInterface.formFactor === "phone",
"dropdown-menu--placement-top": placement === "top",
}).trim();
@@ -73,13 +80,8 @@ const MenuContent = ({
>
{/* the zIndex ensures this menu has higher stacking order,
see https://github.com/excalidraw/excalidraw/pull/1445 */}
{device.editor.isMobile ? (
<Stack.Col
className="dropdown-menu-container"
style={{ ["--gap" as any]: 1.25 }}
>
{children}
</Stack.Col>
{editorInterface.formFactor === "phone" ? (
<Stack.Col className="dropdown-menu-container">{children}</Stack.Col>
) : (
<Island
className="dropdown-menu-container"
packages/excalidraw/components/dropdownMenu/DropdownMenuItemContent.tsx
+3 -3
View File
@@ -1,4 +1,4 @@
import { useDevice } from "../App";
import { useEditorInterface } from "../App";
import { Ellipsify } from "../Ellipsify";
@@ -15,14 +15,14 @@ const MenuItemContent = ({
textStyle?: React.CSSProperties;
children: React.ReactNode;
}) => {
const device = useDevice();
const editorInterface = useEditorInterface();
return (
<>
{icon && <div className="dropdown-menu-item__icon">{icon}</div>}
<div style={textStyle} className="dropdown-menu-item__text">
<Ellipsify>{children}</Ellipsify>
</div>
{shortcut && !device.editor.isMobile && (
{shortcut && editorInterface.formFactor !== "phone" && (
<div className="dropdown-menu-item__shortcut">{shortcut}</div>
)}
</>
packages/excalidraw/components/dropdownMenu/DropdownMenuItemContentRadio.tsx
+3 -3
View File
@@ -1,4 +1,4 @@
import { useDevice } from "../App";
import { useEditorInterface } from "../App";
import { RadioGroup } from "../RadioGroup";
type Props<T> = {
@@ -22,7 +22,7 @@ const DropdownMenuItemContentRadio = <T,>({
children,
name,
}: Props<T>) => {
const device = useDevice();
const editorInterface = useEditorInterface();
return (
<>
@@ -37,7 +37,7 @@ const DropdownMenuItemContentRadio = <T,>({
choices={choices}
/>
</div>
{shortcut && !device.editor.isMobile && (
{shortcut && editorInterface.formFactor !== "phone" && (
<div className="dropdown-menu-item__shortcut dropdown-menu-item__shortcut--orphaned">
{shortcut}
</div>
packages/excalidraw/components/dropdownMenu/DropdownMenuTrigger.tsx
+3 -4
View File
@@ -1,6 +1,6 @@
import clsx from "clsx";
import { useDevice } from "../App";
import { useEditorInterface } from "../App";
const MenuTrigger = ({
className = "",
@@ -14,17 +14,16 @@ const MenuTrigger = ({
onToggle: () => void;
title?: string;
} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onSelect">) => {
const device = useDevice();
const editorInterface = useEditorInterface();
const classNames = clsx(
`dropdown-menu-button ${className}`,
"zen-mode-transition",
{
"dropdown-menu-button--mobile": device.editor.isMobile,
"dropdown-menu-button--mobile": editorInterface.formFactor === "phone",
},
).trim();
return (
<button
data-prevent-outside-click
className={classNames}
onClick={onToggle}
type="button"
packages/excalidraw/components/footer/Footer.tsx
+2 -2
View File
@@ -2,7 +2,7 @@ import clsx from "clsx";
import { actionShortcuts } from "../../actions";
import { useTunnels } from "../../context/tunnels";
import { ExitZenModeAction, UndoRedoActions, ZoomActions } from "../Actions";
import { ExitZenModeButton, UndoRedoActions, ZoomActions } from "../Actions";
import { HelpButton } from "../HelpButton";
import { Section } from "../Section";
import Stack from "../Stack";
@@ -66,7 +66,7 @@ const Footer = ({
/>
</div>
</div>
<ExitZenModeAction
<ExitZenModeButton
actionManager={actionManager}
showExitZenModeBtn={showExitZenModeBtn}
/>
packages/excalidraw/components/hyperlink/Hyperlink.tsx
+4 -4
View File
@@ -41,7 +41,7 @@ import { getTooltipDiv, updateTooltipPosition } from "../../components/Tooltip";
import { t } from "../../i18n";
import { useAppProps, useDevice, useExcalidrawAppState } from "../App";
import { useAppProps, useEditorInterface, useExcalidrawAppState } from "../App";
import { ToolButton } from "../ToolButton";
import { FreedrawIcon, TrashIcon, elementLinkIcon } from "../icons";
import { getSelectedElements } from "../../scene";
@@ -88,7 +88,7 @@ export const Hyperlink = ({
const elementsMap = scene.getNonDeletedElementsMap();
const appState = useExcalidrawAppState();
const appProps = useAppProps();
const device = useDevice();
const editorInterface = useEditorInterface();
const linkVal = element.link || "";
@@ -189,11 +189,11 @@ export const Hyperlink = ({
if (
isEditing &&
inputRef?.current &&
!(device.viewport.isMobile || device.isTouchScreen)
!(editorInterface.formFactor === "phone" || editorInterface.isTouchScreen)
) {
inputRef.current.select();
}
}, [isEditing, device.viewport.isMobile, device.isTouchScreen]);
}, [isEditing, editorInterface.formFactor, editorInterface.isTouchScreen]);
useEffect(() => {
let timeoutId: number | null = null;
packages/excalidraw/components/icons.tsx
+48 -1
View File
@@ -2327,6 +2327,53 @@ export const strokeIcon = createIcon(
tablerIconProps,
);
export const pencilIcon = createIcon(
<g strokeWidth={1.25}>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4" />
<path d="M13.5 6.5l4 4" />
</g>,
tablerIconProps,
);
export const chevronLeftIcon = createIcon(
<g strokeWidth={1}>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M11 7l-5 5l5 5" />
<path d="M17 7l-5 5l5 5" />
</g>,
tablerIconProps,
);
export const sidebarRightIcon = createIcon(
<g strokeWidth="1.75">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" />
<path d="M15 4l0 16" />
</g>,
tablerIconProps,
);
export const messageCircleIcon = createIcon(
<g strokeWidth="1.25">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M3 20l1.3 -3.9c-2.324 -3.437 -1.426 -7.872 2.1 -10.374c3.526 -2.501 8.59 -2.296 11.845 .48c3.255 2.777 3.695 7.266 1.029 10.501c-2.666 3.235 -7.615 4.215 -11.574 2.293l-4.7 1" />
</g>,
tablerIconProps,
);
export const presentationIcon = createIcon(
<g strokeWidth="1.25">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M3 4l18 0" />
<path d="M4 4v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-10" />
<path d="M12 16l0 4" />
<path d="M9 20l6 0" />
<path d="M8 12l3 -3l2 2l3 -3" />
</g>,
tablerIconProps,
);
export const stickyNoteIcon = createIcon(
<g>
<path d="M16 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8Z" />
@@ -2423,4 +2470,4 @@ export const growingContainerIcon = createIcon(
<path d="M9 21h1" />
</g>,
tablerIconProps,
);
);
packages/excalidraw/components/live-collaboration/LiveCollaborationTrigger.tsx
+5 -2
View File
@@ -1,6 +1,6 @@
import clsx from "clsx";
import { isMobileOrTablet, MQ_MIN_WIDTH_DESKTOP } from "@excalidraw/common";
import { MQ_MIN_WIDTH_DESKTOP, type EditorInterface } from "@excalidraw/common";
import { t } from "../../i18n";
import { Button } from "../Button";
@@ -12,15 +12,18 @@ import "./LiveCollaborationTrigger.scss";
const LiveCollaborationTrigger = ({
isCollaborating,
onSelect,
editorInterface,
...rest
}: {
isCollaborating: boolean;
onSelect: () => void;
editorInterface?: EditorInterface;
} & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
const appState = useUIAppState();
const showIconOnly =
isMobileOrTablet() || appState.width < MQ_MIN_WIDTH_DESKTOP;
editorInterface?.formFactor !== "desktop" ||
appState.width < MQ_MIN_WIDTH_DESKTOP;
return (
<Button
packages/excalidraw/components/main-menu/MainMenu.tsx
+18 -13
View File
@@ -5,7 +5,7 @@ import { composeEventHandlers } from "@excalidraw/common";
import { useTunnels } from "../../context/tunnels";
import { useUIAppState } from "../../context/ui-appState";
import { t } from "../../i18n";
import { useDevice, useExcalidrawSetAppState } from "../App";
import { useEditorInterface, useExcalidrawSetAppState } from "../App";
import { UserList } from "../UserList";
import DropdownMenu from "../dropdownMenu/DropdownMenu";
import { withInternalFallback } from "../hoc/withInternalFallback";
@@ -27,7 +27,7 @@ const MainMenu = Object.assign(
onSelect?: (event: Event) => void;
}) => {
const { MainMenuTunnel } = useTunnels();
const device = useDevice();
const editorInterface = useEditorInterface();
const appState = useUIAppState();
const setAppState = useExcalidrawSetAppState();
@@ -53,19 +53,24 @@ const MainMenu = Object.assign(
setAppState({ openMenu: null });
})}
placement="bottom"
className={device.editor.isMobile ? "main-menu-dropdown" : ""}
className={
editorInterface.formFactor === "phone"
? "main-menu-dropdown"
: ""
}
>
{children}
{device.editor.isMobile && appState.collaborators.size > 0 && (
<fieldset className="UserList-Wrapper">
<legend>{t("labels.collaborators")}</legend>
<UserList
mobile={true}
collaborators={appState.collaborators}
userToFollow={appState.userToFollow?.socketId || null}
/>
</fieldset>
)}
{editorInterface.formFactor === "phone" &&
appState.collaborators.size > 0 && (
<fieldset className="UserList-Wrapper">
<legend>{t("labels.collaborators")}</legend>
<UserList
mobile={true}
collaborators={appState.collaborators}
userToFollow={appState.userToFollow?.socketId || null}
/>
</fieldset>
)}
</DropdownMenu.Content>
</DropdownMenu>
</MainMenuTunnel.In>
packages/excalidraw/components/welcome-screen/WelcomeScreen.Center.tsx
+3 -3
View File
@@ -3,7 +3,7 @@ import { getShortcutFromShortcutName } from "../../actions/shortcuts";
import { useTunnels } from "../../context/tunnels";
import { useUIAppState } from "../../context/ui-appState";
import { t, useI18n } from "../../i18n";
import { useDevice, useExcalidrawActionManager } from "../App";
import { useEditorInterface, useExcalidrawActionManager } from "../App";
import { ExcalidrawLogo } from "../ExcalidrawLogo";
import { HelpIcon, LoadIcon, usersIcon } from "../icons";
@@ -18,12 +18,12 @@ const WelcomeScreenMenuItemContent = ({
shortcut?: string | null;
children: React.ReactNode;
}) => {
const device = useDevice();
const editorInterface = useEditorInterface();
return (
<>
<div className="welcome-screen-menu-item__icon">{icon}</div>
<div className="welcome-screen-menu-item__text">{children}</div>
{shortcut && !device.editor.isMobile && (
{shortcut && editorInterface.formFactor !== "phone" && (
<div className="welcome-screen-menu-item__shortcut">{shortcut}</div>
)}
</>
packages/excalidraw/css/styles.scss
+13 -2
View File
@@ -13,10 +13,10 @@
--zIndex-hyperlinkContainer: 7;
--zIndex-ui-bottom: 60;
--zIndex-ui-library: 80;
--zIndex-ui-context-menu: 90;
--zIndex-ui-styles-popup: 100;
--zIndex-ui-top: 100;
--zIndex-ui-library: 120;
--zIndex-modal: 1000;
--zIndex-popup: 1001;
@@ -50,6 +50,11 @@ body.excalidraw-cursor-resize * {
height: 100%;
width: 100%;
button {
// browser default. Looks kinda good on low-dpi.
font-size: 0.8333rem;
}
button,
label {
@include buttonNoHighlight;
@@ -293,7 +298,8 @@ body.excalidraw-cursor-resize * {
}
}
.excalidraw-ui-top-left {
.excalidraw-ui-top-left,
.excalidraw-ui-top-right {
display: flex;
align-items: center;
gap: 0.5rem;
@@ -707,6 +713,11 @@ body.excalidraw-cursor-resize * {
margin-top: 0rem;
}
}
.link-button {
display: flex;
text-decoration: none !important;
}
}
.ErrorSplash.excalidraw {
packages/excalidraw/data/__snapshots__/transform.test.ts.snap
+70 -43
View File
@@ -88,8 +88,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
"endArrowhead": "arrow",
"endBinding": {
"elementId": "ellipse-1",
"focus": -0.007519379844961235,
"gap": 11.562288374879595,
"fixedPoint": [
0.04,
0.4633333333333333,
],
"mode": "orbit",
},
"fillStyle": "solid",
"frameId": null,
@@ -98,7 +101,6 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
"id": Any<String>,
"index": "a2",
"isDeleted": false,
"lastCommittedPoint": null,
"link": null,
"locked": false,
"opacity": 100,
@@ -118,8 +120,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
"startArrowhead": null,
"startBinding": {
"elementId": "id49",
"focus": -0.0813953488372095,
"gap": 1,
"fixedPoint": [
1,
0.5001,
],
"mode": "orbit",
},
"strokeColor": "#1864ab",
"strokeStyle": "solid",
@@ -144,8 +149,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
"endArrowhead": "arrow",
"endBinding": {
"elementId": "ellipse-1",
"focus": 0.10666666666666667,
"gap": 3.8343264684446097,
"fixedPoint": [
-0.01,
0.44666666666666666,
],
"mode": "orbit",
},
"fillStyle": "solid",
"frameId": null,
@@ -154,7 +162,6 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
"id": Any<String>,
"index": "a3",
"isDeleted": false,
"lastCommittedPoint": null,
"link": null,
"locked": false,
"opacity": 100,
@@ -174,8 +181,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
"startArrowhead": null,
"startBinding": {
"elementId": "diamond-1",
"focus": 0,
"gap": 4.535423522449215,
"fixedPoint": [
0.9357142857142857,
0.5001,
],
"mode": "orbit",
},
"strokeColor": "#e67700",
"strokeStyle": "solid",
@@ -334,8 +344,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
"endArrowhead": "arrow",
"endBinding": {
"elementId": "text-2",
"focus": 0,
"gap": 16,
"fixedPoint": [
-2.05,
0.5001,
],
"mode": "orbit",
},
"fillStyle": "solid",
"frameId": null,
@@ -344,7 +357,6 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
"id": Any<String>,
"index": "a2",
"isDeleted": false,
"lastCommittedPoint": null,
"link": null,
"locked": false,
"opacity": 100,
@@ -364,8 +376,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
"startArrowhead": null,
"startBinding": {
"elementId": "text-1",
"focus": 0,
"gap": 1,
"fixedPoint": [
1,
0.5001,
],
"mode": "orbit",
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
@@ -436,8 +451,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
"endArrowhead": "arrow",
"endBinding": {
"elementId": "id42",
"focus": -0,
"gap": 1,
"fixedPoint": [
0,
0.5001,
],
"mode": "orbit",
},
"fillStyle": "solid",
"frameId": null,
@@ -446,7 +464,6 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
"id": Any<String>,
"index": "a0",
"isDeleted": false,
"lastCommittedPoint": null,
"link": null,
"locked": false,
"opacity": 100,
@@ -466,8 +483,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
"startArrowhead": null,
"startBinding": {
"elementId": "id41",
"focus": 0,
"gap": 1,
"fixedPoint": [
1,
0.5001,
],
"mode": "orbit",
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
@@ -612,8 +632,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
"endArrowhead": "arrow",
"endBinding": {
"elementId": "id46",
"focus": -0,
"gap": 1,
"fixedPoint": [
0,
0.5001,
],
"mode": "orbit",
},
"fillStyle": "solid",
"frameId": null,
@@ -622,7 +645,6 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
"id": Any<String>,
"index": "a0",
"isDeleted": false,
"lastCommittedPoint": null,
"link": null,
"locked": false,
"opacity": 100,
@@ -642,8 +664,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
"startArrowhead": null,
"startBinding": {
"elementId": "id45",
"focus": 0,
"gap": 1,
"fixedPoint": [
1,
0.5001,
],
"mode": "orbit",
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
@@ -839,7 +864,6 @@ exports[`Test Transform > should transform linear elements 1`] = `
"id": Any<String>,
"index": "a0",
"isDeleted": false,
"lastCommittedPoint": null,
"link": null,
"locked": false,
"opacity": 100,
@@ -887,7 +911,6 @@ exports[`Test Transform > should transform linear elements 2`] = `
"id": Any<String>,
"index": "a1",
"isDeleted": false,
"lastCommittedPoint": null,
"link": null,
"locked": false,
"opacity": 100,
@@ -934,7 +957,6 @@ exports[`Test Transform > should transform linear elements 3`] = `
"id": Any<String>,
"index": "a2",
"isDeleted": false,
"lastCommittedPoint": null,
"link": null,
"locked": false,
"opacity": 100,
@@ -982,7 +1004,6 @@ exports[`Test Transform > should transform linear elements 4`] = `
"id": Any<String>,
"index": "a3",
"isDeleted": false,
"lastCommittedPoint": null,
"link": null,
"locked": false,
"opacity": 100,
@@ -1476,8 +1497,11 @@ exports[`Test Transform > should transform the elements correctly when linear el
"endArrowhead": "arrow",
"endBinding": {
"elementId": "Alice",
"focus": -0,
"gap": 5.299874999999986,
"fixedPoint": [
-0.07542628418945944,
0.5001,
],
"mode": "orbit",
},
"fillStyle": "solid",
"frameId": null,
@@ -1486,7 +1510,6 @@ exports[`Test Transform > should transform the elements correctly when linear el
"id": Any<String>,
"index": "a4",
"isDeleted": false,
"lastCommittedPoint": null,
"link": null,
"locked": false,
"opacity": 100,
@@ -1508,8 +1531,11 @@ exports[`Test Transform > should transform the elements correctly when linear el
"startArrowhead": null,
"startBinding": {
"elementId": "Bob",
"focus": 0,
"gap": 1,
"fixedPoint": [
1.000004978564514,
0.5001,
],
"mode": "orbit",
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
@@ -1539,8 +1565,11 @@ exports[`Test Transform > should transform the elements correctly when linear el
"endArrowhead": "arrow",
"endBinding": {
"elementId": "B",
"focus": 0,
"gap": 32,
"fixedPoint": [
0.46387050630528887,
0.48466257668711654,
],
"mode": "orbit",
},
"fillStyle": "solid",
"frameId": null,
@@ -1549,7 +1578,6 @@ exports[`Test Transform > should transform the elements correctly when linear el
"id": Any<String>,
"index": "a5",
"isDeleted": false,
"lastCommittedPoint": null,
"link": null,
"locked": false,
"opacity": 100,
@@ -1567,8 +1595,11 @@ exports[`Test Transform > should transform the elements correctly when linear el
"startArrowhead": null,
"startBinding": {
"elementId": "Bob",
"focus": 0,
"gap": 1,
"fixedPoint": [
0.39381496335223337,
1,
],
"mode": "orbit",
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
@@ -1858,7 +1889,6 @@ exports[`Test Transform > should transform to labelled arrows when label provide
"id": Any<String>,
"index": "a0",
"isDeleted": false,
"lastCommittedPoint": null,
"link": null,
"locked": false,
"opacity": 100,
@@ -1911,7 +1941,6 @@ exports[`Test Transform > should transform to labelled arrows when label provide
"id": Any<String>,
"index": "a1",
"isDeleted": false,
"lastCommittedPoint": null,
"link": null,
"locked": false,
"opacity": 100,
@@ -1964,7 +1993,6 @@ exports[`Test Transform > should transform to labelled arrows when label provide
"id": Any<String>,
"index": "a2",
"isDeleted": false,
"lastCommittedPoint": null,
"link": null,
"locked": false,
"opacity": 100,
@@ -2017,7 +2045,6 @@ exports[`Test Transform > should transform to labelled arrows when label provide
"id": Any<String>,
"index": "a3",
"isDeleted": false,
"lastCommittedPoint": null,
"link": null,
"locked": false,
"opacity": 100,
packages/excalidraw/data/blob.ts
+1 -3
View File
@@ -7,8 +7,6 @@ import {
isPromiseLike,
} from "@excalidraw/common";
import { clearElementsForExport } from "@excalidraw/element";
import type { ValueOf } from "@excalidraw/common/utility-types";
import type { ExcalidrawElement, FileId } from "@excalidraw/element/types";
@@ -159,7 +157,7 @@ export const loadSceneOrLibraryFromBlob = async (
type: MIME_TYPES.excalidraw,
data: restore(
{
elements: clearElementsForExport(data.elements || []),
elements: data.elements || [],
appState: {
theme: localAppState?.theme,
fileHandle: fileHandle || blob.handle || null,
packages/excalidraw/data/json.ts
+1 -9
View File
@@ -6,11 +6,6 @@ import {
VERSIONS,
} from "@excalidraw/common";
import {
clearElementsForDatabase,
clearElementsForExport,
} from "@excalidraw/element";
import type { ExcalidrawElement } from "@excalidraw/element/types";
import { cleanAppStateForExport, clearAppStateForDatabase } from "../appState";
@@ -57,10 +52,7 @@ export const serializeAsJSON = (
type: EXPORT_DATA_TYPES.excalidraw,
version: VERSIONS.excalidraw,
source: getExportSource(),
elements:
type === "local"
? clearElementsForExport(elements)
: clearElementsForDatabase(elements),
elements,
appState:
type === "local"
? cleanAppStateForExport(appState)
packages/excalidraw/data/restore.ts
+102 -51
View File
@@ -20,9 +20,12 @@ import {
BOUND_TEXT_PADDING,
} from "@excalidraw/common";
import {
calculateFixedPointForNonElbowArrowBinding,
getNonDeletedElements,
isFlowchartType,
isPointInElement,
isValidPolygon,
projectFixedPointOntoDiagonal,
} from "@excalidraw/element";
import { normalizeFixedPoint } from "@excalidraw/element";
import {
@@ -37,7 +40,6 @@ import {
isArrowBoundToElement,
isArrowElement,
isElbowArrow,
isFixedPointBinding,
isLinearElement,
isLineElement,
isTextElement,
@@ -55,7 +57,9 @@ import { isInvisiblySmallElement } from "@excalidraw/element";
import type { LocalPoint, Radians } from "@excalidraw/math";
import type {
ElementsMap,
ExcalidrawArrowElement,
ExcalidrawBindableElement,
ExcalidrawElbowArrowElement,
ExcalidrawElement,
ExcalidrawElementType,
@@ -66,7 +70,6 @@ import type {
FontFamilyValues,
NonDeletedSceneElementsMap,
OrderedExcalidrawElement,
PointBinding,
StrokeRoundness,
} from "@excalidraw/element/types";
@@ -126,38 +129,74 @@ const getFontFamilyByName = (fontFamilyName: string): FontFamilyValues => {
return DEFAULT_FONT_FAMILY;
};
const repairBinding = <T extends ExcalidrawLinearElement>(
const repairBinding = <T extends ExcalidrawArrowElement>(
element: T,
binding: PointBinding | FixedPointBinding | null,
): T extends ExcalidrawElbowArrowElement
? FixedPointBinding | null
: PointBinding | FixedPointBinding | null => {
binding: FixedPointBinding | null,
elementsMap: Readonly<ElementsMap>,
startOrEnd: "start" | "end",
): FixedPointBinding | null => {
if (!binding) {
return null;
}
const focus = binding.focus || 0;
if (isElbowArrow(element)) {
const fixedPointBinding:
| ExcalidrawElbowArrowElement["startBinding"]
| ExcalidrawElbowArrowElement["endBinding"] = isFixedPointBinding(binding)
? {
...binding,
focus,
fixedPoint: normalizeFixedPoint(binding.fixedPoint ?? [0, 0]),
}
: null;
| ExcalidrawElbowArrowElement["endBinding"] = {
...binding,
fixedPoint: normalizeFixedPoint(binding.fixedPoint ?? [0, 0]),
mode: binding.mode || "orbit",
};
return fixedPointBinding;
}
return {
...binding,
focus,
} as T extends ExcalidrawElbowArrowElement
? FixedPointBinding | null
: PointBinding | FixedPointBinding | null;
const boundElement =
(elementsMap.get(binding.elementId) as ExcalidrawBindableElement) ||
undefined;
if (boundElement) {
if (binding.mode) {
return {
elementId: binding.elementId,
mode: binding.mode || "orbit",
fixedPoint: normalizeFixedPoint(binding.fixedPoint || [0.5, 0.5]),
} as FixedPointBinding | null;
}
const p = LinearElementEditor.getPointAtIndexGlobalCoordinates(
element,
startOrEnd === "start" ? 0 : element.points.length - 1,
elementsMap,
);
const mode = isPointInElement(p, boundElement, elementsMap)
? "inside"
: "orbit";
const focusPoint =
mode === "inside"
? p
: projectFixedPointOntoDiagonal(
element,
p,
boundElement,
startOrEnd,
elementsMap,
) || p;
const { fixedPoint } = calculateFixedPointForNonElbowArrowBinding(
element,
boundElement,
startOrEnd,
elementsMap,
focusPoint,
);
return {
mode,
elementId: binding.elementId,
fixedPoint,
};
}
return null;
};
type _ElementForRestoreBase = Required<
@@ -271,7 +310,10 @@ const restoreElementWithProperties = <
export const restoreElement = (
element: Exclude<ExcalidrawElement, ExcalidrawSelectionElement>,
opts?: { deleteInvisibleElements?: boolean },
elementsMap: Readonly<ElementsMap>,
opts?: {
deleteInvisibleElements?: boolean;
},
): typeof element | null => {
element = { ...element };
@@ -329,7 +371,6 @@ export const restoreElement = (
case "freedraw": {
return restoreElementWithProperties(element, {
points: element.points,
lastCommittedPoint: null,
simulatePressure: element.simulatePressure,
pressures: element.pressures,
});
@@ -359,13 +400,9 @@ export const restoreElement = (
}
return restoreElementWithProperties(element, {
type:
(element.type as ExcalidrawElementType | "draw") === "draw"
? "line"
: element.type,
startBinding: repairBinding(element, element.startBinding),
endBinding: repairBinding(element, element.endBinding),
lastCommittedPoint: null,
type: "line",
startBinding: null,
endBinding: null,
startArrowhead,
endArrowhead,
points,
@@ -382,23 +419,27 @@ export const restoreElement = (
});
case "arrow": {
const { startArrowhead = null, endArrowhead = "arrow" } = element;
let x: number | undefined = element.x;
let y: number | undefined = element.y;
let points: readonly LocalPoint[] | undefined = // migrate old arrow model to new one
const x: number | undefined = element.x;
const y: number | undefined = element.y;
const points: readonly LocalPoint[] | undefined = // migrate old arrow model to new one
!Array.isArray(element.points) || element.points.length < 2
? [pointFrom(0, 0), pointFrom(element.width, element.height)]
: element.points;
if (points[0][0] !== 0 || points[0][1] !== 0) {
({ points, x, y } =
LinearElementEditor.getNormalizeElementPointsAndCoords(element));
}
const base = {
type: element.type,
startBinding: repairBinding(element, element.startBinding),
endBinding: repairBinding(element, element.endBinding),
lastCommittedPoint: null,
startBinding: repairBinding(
element as ExcalidrawArrowElement,
element.startBinding,
elementsMap,
"start",
),
endBinding: repairBinding(
element as ExcalidrawArrowElement,
element.endBinding,
elementsMap,
"end",
),
startArrowhead,
endArrowhead,
points,
@@ -406,15 +447,13 @@ export const restoreElement = (
y,
elbowed: (element as ExcalidrawArrowElement).elbowed,
...getSizeFromPoints(points),
} as const;
};
// TODO: Separate arrow from linear element
return isElbowArrow(element)
const restoredElement = isElbowArrow(element)
? restoreElementWithProperties(element as ExcalidrawElbowArrowElement, {
...base,
elbowed: true,
startBinding: repairBinding(element, element.startBinding),
endBinding: repairBinding(element, element.endBinding),
fixedSegments:
element.fixedSegments?.length && base.points.length >= 4
? element.fixedSegments
@@ -423,6 +462,13 @@ export const restoreElement = (
endIsSpecial: element.endIsSpecial,
})
: restoreElementWithProperties(element as ExcalidrawArrowElement, base);
return {
...restoredElement,
...LinearElementEditor.getNormalizeElementPointsAndCoords(
restoredElement,
),
};
}
// generic elements
@@ -553,7 +599,7 @@ const repairFrameMembership = (
};
export const restoreElements = (
elements: ImportedDataState["elements"],
targetElements: ImportedDataState["elements"],
/** NOTE doesn't serve for reconciliation */
localElements: readonly ExcalidrawElement[] | null | undefined,
opts?:
@@ -566,18 +612,23 @@ export const restoreElements = (
): OrderedExcalidrawElement[] => {
// used to detect duplicate top-level element ids
const existingIds = new Set<string>();
const elementsMap = arrayToMap(targetElements || []);
const localElementsMap = localElements ? arrayToMap(localElements) : null;
const restoredElements = syncInvalidIndices(
(elements || []).reduce((elements, element) => {
(targetElements || []).reduce((elements, element) => {
// filtering out selection, which is legacy, no longer kept in elements,
// and causing issues if retained
if (element.type === "selection") {
return elements;
}
let migratedElement: ExcalidrawElement | null = restoreElement(element, {
deleteInvisibleElements: opts?.deleteInvisibleElements,
});
let migratedElement: ExcalidrawElement | null = restoreElement(
element,
elementsMap,
{
deleteInvisibleElements: opts?.deleteInvisibleElements,
},
);
if (migratedElement) {
const localElement = localElementsMap?.get(element.id);
packages/excalidraw/data/transform.test.ts
+2 -8
View File
@@ -432,12 +432,9 @@ describe("Test Transform", () => {
boundElements: [{ id: text.id, type: "text" }],
startBinding: {
elementId: rectangle.id,
focus: 0,
gap: 1,
},
endBinding: {
elementId: ellipse.id,
focus: -0,
},
});
@@ -517,12 +514,9 @@ describe("Test Transform", () => {
boundElements: [{ id: text1.id, type: "text" }],
startBinding: {
elementId: text2.id,
focus: 0,
gap: 1,
},
endBinding: {
elementId: text3.id,
focus: -0,
},
});
@@ -780,8 +774,8 @@ describe("Test Transform", () => {
const [arrow, rect] = excalidrawElements;
expect((arrow as ExcalidrawArrowElement).endBinding).toStrictEqual({
elementId: "rect-1",
focus: -0,
gap: 25,
fixedPoint: [-2.05, 0.5001],
mode: "orbit",
});
expect(rect.boundElements).toStrictEqual([
{
packages/excalidraw/data/transform.ts
+5 -3
View File
@@ -16,7 +16,7 @@ import {
getLineHeight,
} from "@excalidraw/common";
import { bindLinearElement } from "@excalidraw/element";
import { bindBindingElement } from "@excalidraw/element";
import {
newArrowElement,
newElement,
@@ -330,9 +330,10 @@ const bindLinearElementToElement = (
}
}
bindLinearElement(
bindBindingElement(
linearElement,
startBoundElement as ExcalidrawBindableElement,
"orbit",
"start",
scene,
);
@@ -405,9 +406,10 @@ const bindLinearElementToElement = (
}
}
bindLinearElement(
bindBindingElement(
linearElement,
endBoundElement as ExcalidrawBindableElement,
"orbit",
"end",
scene,
);
packages/excalidraw/global.d.ts
Vendored
+4 -1
View File
@@ -101,7 +101,10 @@ declare module "image-blob-reduce" {
interface CustomMatchers {
toBeNonNaNNumber(): void;
toCloselyEqualPoints(points: readonly [number, number][]): void;
toCloselyEqualPoints(
points: readonly [number, number][],
precision?: number,
): void;
}
declare namespace jest {
packages/excalidraw/hooks/useCreatePortalContainer.ts
+7 -4
View File
@@ -2,7 +2,7 @@ import { useState, useLayoutEffect } from "react";
import { THEME } from "@excalidraw/common";
import { useDevice, useExcalidrawContainer } from "../components/App";
import { useEditorInterface, useExcalidrawContainer } from "../components/App";
import { useUIAppState } from "../context/ui-appState";
export const useCreatePortalContainer = (opts?: {
@@ -11,7 +11,7 @@ export const useCreatePortalContainer = (opts?: {
}) => {
const [div, setDiv] = useState<HTMLDivElement | null>(null);
const device = useDevice();
const editorInterface = useEditorInterface();
const { theme } = useUIAppState();
const { container: excalidrawContainer } = useExcalidrawContainer();
@@ -20,10 +20,13 @@ export const useCreatePortalContainer = (opts?: {
if (div) {
div.className = "";
div.classList.add("excalidraw", ...(opts?.className?.split(/\s+/) || []));
div.classList.toggle("excalidraw--mobile", device.editor.isMobile);
div.classList.toggle(
"excalidraw--mobile",
editorInterface.formFactor === "phone",
);
div.classList.toggle("theme--dark", theme === THEME.DARK);
}
}, [div, theme, device.editor.isMobile, opts?.className]);
}, [div, theme, editorInterface.formFactor, opts?.className]);
useLayoutEffect(() => {
const container = opts?.parentSelector
packages/excalidraw/hooks/useOutsideClick.ts
+1 -1
View File
@@ -5,7 +5,7 @@ import { EVENT } from "@excalidraw/common";
export function useOutsideClick<T extends HTMLElement>(
ref: React.RefObject<T | null>,
/** if performance is of concern, memoize the callback */
callback: (event: Event) => void,
callback: (event: Event & { target: T }) => void,
/**
* Optional callback which is called on every click.
*
packages/excalidraw/index.tsx
+4 -6
View File
@@ -263,6 +263,9 @@ export {
DEFAULT_LASER_COLOR,
UserIdleState,
normalizeLink,
sceneCoordsToViewportCoords,
viewportCoordsToSceneCoords,
getFormFactor,
} from "@excalidraw/common";
export {
@@ -275,17 +278,12 @@ export { CaptureUpdateAction } from "@excalidraw/element";
export { parseLibraryTokensFromUrl, useHandleLibrary } from "./data/library";
export {
sceneCoordsToViewportCoords,
viewportCoordsToSceneCoords,
} from "@excalidraw/common";
export { Sidebar } from "./components/Sidebar/Sidebar";
export { Button } from "./components/Button";
export { Footer };
export { MainMenu };
export { Ellipsify } from "./components/Ellipsify";
export { useDevice } from "./components/App";
export { useEditorInterface, useStylesPanelMode } from "./components/App";
export { WelcomeScreen };
export { LiveCollaborationTrigger };
export { Stats } from "./components/Stats";
packages/excalidraw/locales/ar-SA.json
+279 -140
View File
@@ -11,8 +11,8 @@
"copyAsPng": "نسخ إلى الحافظة بصيغة PNG",
"copyAsSvg": "نسخ إلى الحافظة بصيغة SVG",
"copyText": "نسخ إلى الحافظة كنص",
"copySource": "",
"convertToCode": "",
"copySource": "نسخ المصدر إلى الحافظة",
"convertToCode": "تحويل إلى كود",
"bringForward": "جلب للأمام",
"sendToBack": "أرسل للخلف",
"bringToFront": "أحضر للأمام",
@@ -21,7 +21,9 @@
"copyStyles": "نسخ الأنماط",
"pasteStyles": "لصق الأنماط",
"stroke": "الخط",
"changeStroke": "تغيير لون القلم",
"background": "الخلفية",
"changeBackground": "تغيير لون الخلفية",
"fill": "التعبئة",
"strokeWidth": "سُمك الخط",
"strokeStyle": "نمط الخط",
@@ -38,12 +40,20 @@
"arrowhead_none": "لا شيء",
"arrowhead_arrow": "سهم",
"arrowhead_bar": "شريط",
"arrowhead_circle": "",
"arrowhead_circle_outline": "",
"arrowhead_circle": "دائرة",
"arrowhead_circle_outline": "دائرة (مخططة)",
"arrowhead_triangle": "مثلث",
"arrowhead_triangle_outline": "",
"arrowhead_diamond": "",
"arrowhead_diamond_outline": "",
"arrowhead_triangle_outline": "مثلث (مخطط)",
"arrowhead_diamond": "ألماسة",
"arrowhead_diamond_outline": "ألماسة (مخططة)",
"arrowhead_crowfoot_many": "Crow's foot (many)",
"arrowhead_crowfoot_one": "Crow's foot (one)",
"arrowhead_crowfoot_one_or_many": "Crow's foot (one or many)",
"more_options": "خيارات إضافية",
"arrowtypes": "نوع السهم",
"arrowtype_sharp": "سهم حاد",
"arrowtype_round": "سهم منحني",
"arrowtype_elbowed": "سهم زاوي",
"fontSize": "حجم الخط",
"fontFamily": "نوع الخط",
"addWatermark": "إضافة \"مصنوعة بواسطة Excalidraw\"",
@@ -53,7 +63,7 @@
"small": "صغير",
"medium": "متوسط",
"large": "كبير",
"veryLarge": "كبير جدا",
"veryLarge": "كبير جدًا",
"solid": "كامل",
"hachure": "خطوط",
"zigzag": "متعرج",
@@ -67,11 +77,12 @@
"architect": "معماري",
"artist": "رسام",
"cartoonist": "كرتوني",
"fileTitle": "إسم الملف",
"fileTitle": "اسم الملف",
"colorPicker": "منتقي اللون",
"canvasColors": "تستخدم على القماش",
"canvasBackground": "خلفية اللوحة",
"drawingCanvas": "لوحة الرسم",
"clearCanvas": "مسح اللوحة",
"layers": "الطبقات",
"actions": "الإجراءات",
"language": "اللغة",
@@ -84,28 +95,31 @@
"group": "تحديد مجموعة",
"ungroup": "إلغاء تحديد مجموعة",
"collaborators": "المتعاونون",
"showGrid": "إظهار الشبكة",
"toggleGrid": "تبديل الشبكة",
"addToLibrary": "أضف إلى المكتبة",
"removeFromLibrary": "حذف من المكتبة",
"libraryLoadingMessage": "جارٍ تحميل المكتبة…",
"libraryLoadingMessage": "جارٍ تحميل المكتبة...",
"libraries": "تصفح المكتبات",
"loadingScene": "جاري تحميل المشهد…",
"loadingScene": "جارٍ تحميل المشهد…",
"loadScene": "تحميل المشهد من ملف",
"align": "محاذاة",
"alignTop": "محاذاة إلى اﻷعلى",
"alignBottom": "محاذاة إلى اﻷسفل",
"alignTop": "محاذاة إلى الأعلى",
"alignBottom": "محاذاة إلى الأسفل",
"alignLeft": "محاذاة إلى اليسار",
"alignRight": "محاذاة إلى اليمين",
"centerVertically": "توسيط عمودي",
"centerHorizontally": "توسيط أفقي",
"distributeHorizontally": "التوزيع الأفقي",
"distributeVertically": "التوزيع عمودياً",
"flipHorizontal": "قلب عامودي",
"flipVertical": "قلب أفقي",
"distributeVertically": "التوزيع عموديًا",
"flipHorizontal": "قلب أفقي",
"flipVertical": "قلب عمودي",
"viewMode": "نمط العرض",
"share": "مشاركة",
"showStroke": "إظهار منتقي لون الخط",
"showBackground": "إظهار منتقي لون الخلفية",
"toggleTheme": "غير النمط",
"showFonts": "إظهار منتقي الخط",
"toggleTheme": "تبديل الوضع الفاتح/الداكن",
"theme": "السمة",
"personalLib": "المكتبة الشخصية",
"excalidrawLib": "مكتبتنا",
"decreaseFontSize": "تصغير حجم الخط",
@@ -115,16 +129,21 @@
"createContainerFromText": "نص مغلف في حاوية",
"link": {
"edit": "تعديل الرابط",
"editEmbed": "تحرير الرابط وإدراجه",
"create": "إنشاء رابط",
"createEmbed": "إنشاء رابط و إدراجه",
"editEmbed": "تعديل الرابط القابل للتضمين",
"create": "إضافة رابط",
"label": "رابط",
"labelEmbed": "رابط و إدراج",
"empty": "لم يتم تعيين رابط"
"labelEmbed": "رابط وإدراج",
"empty": "لم يتم تعيين رابط",
"hint": "اكتب أو الصق الرابط هنا",
"goToElement": "الانتقال إلى العنصر المستهدف"
},
"lineEditor": {
"edit": "تحرير السطر",
"exit": "الخروج من المُحرر"
"editArrow": "تحرير السهم"
},
"polygon": {
"breakPolygon": "",
"convertToPolygon": ""
},
"elementLock": {
"lock": "قفل",
@@ -137,13 +156,47 @@
"selectAllElementsInFrame": "تحديد جميع العناصر في الإطار",
"removeAllElementsFromFrame": "إزالة جميع العناصر من الإطار",
"eyeDropper": "اختيار اللون من القماش",
"textToDiagram": "",
"prompt": ""
"textToDiagram": "نص إلى رسم بياني",
"prompt": "تعليمات",
"followUs": "تابعنا",
"discordChat": "دردشة ديسكورد",
"zoomToFitViewport": "التكبير لتناسب العرض",
"zoomToFitSelection": "تكبير للعنصر المحدد",
"zoomToFit": "تكبير لتلائم جميع العناصر",
"installPWA": "تثبيت Excalidraw محليًا (PWA)",
"autoResize": "تمكين تغيير حجم النص تلقائيًا",
"imageCropping": "قص الصورة",
"unCroppedDimension": "الأبعاد غير المقصوصة",
"copyElementLink": "نسخ رابط الكائن",
"linkToElement": "رابط إلى الكائن",
"wrapSelectionInFrame": "تغليف التحديد في إطار",
"tab": "",
"shapeSwitch": ""
},
"elementLink": {
"title": "رابط إلى الكائن",
"desc": "انقر على شكل على اللوحة أو الصق رابطًا.",
"notFound": "لم يتم العثور على الكائن المرتبط على اللوحة."
},
"library": {
"noItems": "لا توجد عناصر أضيفت بعد...",
"hint_emptyLibrary": "حدد عنصر على القماش لإضافته هنا، أو تثبيت مكتبة من المستودع العام أدناه.",
"hint_emptyPrivateLibrary": "حدد عنصر على القماش لإضافته هنا."
"hint_emptyPrivateLibrary": "حدد عنصر على القماش لإضافته هنا.",
"search": {
"inputPlaceholder": "",
"heading": "",
"noResults": "",
"clearSearch": ""
}
},
"search": {
"title": "البحث على اللوحة",
"noMatch": "لم يتم العثور على تطابقات...",
"singleResult": "نتيجة",
"multipleResults": "نتائج",
"placeholder": "ابحث عن نص على اللوحة...",
"frames": "",
"texts": ""
},
"buttons": {
"clearReset": "إعادة تعيين اللوحة",
@@ -151,16 +204,17 @@
"exportImage": "تصدير الصورة...",
"export": "حفظ إلى...",
"copyToClipboard": "نسخ إلى الحافظة",
"copyLink": "نسخ الرابط",
"save": "احفظ للملف الحالي",
"saveAs": "حفظ كـ",
"load": "فتح",
"getShareableLink": "احصل على رابط المشاركة",
"close": "غلق",
"close": "إغلاق",
"selectLanguage": "اختر اللغة",
"scrollBackToContent": "الرجوع إلى المحتوى",
"zoomIn": "تكبير",
"zoomOut": "تصغير",
"resetZoom": "إعادة تعيين الشاشة",
"resetZoom": "إعادة تعيين التكبير",
"menu": "القائمة",
"done": "تم",
"edit": "تعديل",
@@ -171,53 +225,56 @@
"fullScreen": "شاشة كاملة",
"darkMode": "الوضع المظلم",
"lightMode": "الوضع المضيء",
"systemMode": "وضع النظام",
"zenMode": "وضع التأمل",
"objectsSnapMode": "التقط إلى العناصر",
"exitZenMode": "إلغاء الوضع الليلى",
"objectsSnapMode": "التقاط إلى العناصر",
"exitZenMode": "إلغاء وضع التأمل",
"cancel": "إلغاء",
"saveLibNames": "",
"clear": "مسح",
"remove": "إزالة",
"embed": "تبديل الإدراج",
"publishLibrary": "انشر",
"submit": "أرسل",
"publishLibrary": "",
"submit": "إرسال",
"confirm": "تأكيد",
"embeddableInteractionButton": "اضغط للتفاعل"
},
"alerts": {
"clearReset": "هذا سيُزيل كامل اللوحة. هل أنت متأكد؟",
"couldNotCreateShareableLink": "تعذر إنشاء رابطة المشاركة.",
"couldNotCreateShareableLink": "تعذر إنشاء رابط المشاركة.",
"couldNotCreateShareableLinkTooBig": "تعذر إنشاء رابط قابل للمشاركة: المشهد كبير جدًا",
"couldNotLoadInvalidFile": "تعذر التحميل، الملف غير صالح",
"importBackendFailed": "فشل الاستيراد من الخادوم.",
"importBackendFailed": "فشل الاستيراد من الخادم.",
"cannotExportEmptyCanvas": "لا يمكن تصدير لوحة فارغة.",
"couldNotCopyToClipboard": "تعذر النسخ إلى الحافظة.",
"decryptFailed": "تعذر فك تشفير البيانات.",
"uploadedSecurly": "تم تأمين التحميل بتشفير النهاية إلى النهاية، مما يعني أن خادوم Excalidraw والأطراف الثالثة لا يمكنها قراءة المحتوى.",
"uploadedSecurly": "تم تأمين التحميل بتشفير النهاية إلى النهاية، مما يعني أن خادم Excalidraw والأطراف الثالثة لا يمكنها قراءة المحتوى.",
"loadSceneOverridePrompt": "تحميل الرسم الخارجي سيحل محل المحتوى الموجود لديك. هل ترغب في المتابعة؟",
"collabStopOverridePrompt": "إيقاف الجلسة سيؤدي إلى الكتابة فوق رسومك السابقة المخزنة داخليا. هل أنت متأكد؟\n\n(إذا كنت ترغب في الاحتفاظ برسمك المخزن داخليا، ببساطة أغلق علامة تبويب المتصفح بدلاً من ذلك.)",
"errorAddingToLibrary": "تعذر إضافة العنصر للمكتبة",
"collabStopOverridePrompt": "إيقاف الجلسة سيؤدي إلى الكتابة فوق رسومك السابقة المخزنة داخليًا. هل أنت متأكد؟\n\n(إذا كنت ترغب في الاحتفاظ برسمك المخزن داخليًا، أغلق علامة تبويب المتصفح بدلاً من ذلك.)",
"errorAddingToLibrary": "تعذر إضافة العنصر إلى المكتبة",
"errorRemovingFromLibrary": "تعذر إزالة العنصر من المكتبة",
"confirmAddLibrary": "هذا سيضيف {{numShapes}} شكل إلى مكتبتك. هل أنت متأكد؟",
"imageDoesNotContainScene": "يبدو أن هذه الصورة لا تحتوي على أي بيانات مشهد. هل قمت بتمكين تضمين المشهد أثناء التصدير؟",
"cannotRestoreFromImage": "تعذر استعادة المشهد من ملف الصورة",
"invalidSceneUrl": "تعذر استيراد المشهد من عنوان URL المتوفر. إما أنها مشوهة، أو لا تحتوي على بيانات Excalidraw JSON صالحة.",
"resetLibrary": "هذا سوف يمسح مكتبتك. هل أنت متأكد؟",
"resetLibrary": "هذا سيؤدي إلى مسح مكتبتك. هل أنت متأكد؟",
"removeItemsFromsLibrary": "حذف {{count}} عنصر (عناصر) من المكتبة؟",
"invalidEncryptionKey": "مفتاح التشفير يجب أن يكون من 22 حرفاً. التعاون المباشر معطل.",
"collabOfflineWarning": "لا يوجد اتصال بالانترنت.\nلن يتم حفظ التغييرات التي قمت بها!"
"invalidEncryptionKey": "مفتاح التشفير يجب أن يكون من 22 حرفًا. التعاون المباشر معطل.",
"collabOfflineWarning": "لا يوجد اتصال بالإنترنت.\nلن يتم حفظ التغييرات التي قمت بها!",
"localStorageQuotaExceeded": ""
},
"errors": {
"unsupportedFileType": "نوع الملف غير مدعوم.",
"imageInsertError": "تعذر إدراج الصورة. حاول مرة أخرى لاحقاً...",
"fileTooBig": "الملف كبير جداً. الحد الأقصى المسموح به للحجم هو {{maxSize}}.",
"imageInsertError": "تعذر إدراج الصورة. حاول مرة أخرى لاحقًا...",
"fileTooBig": "الملف كبير جدًا. الحد الأقصى المسموح به للحجم هو {{maxSize}}.",
"svgImageInsertError": "تعذر إدراج صورة SVG. يبدو أن ترميز SVG غير صحيح.",
"failedToFetchImage": "",
"invalidSVGString": "SVG غير صالح.",
"failedToFetchImage": "فشل تحميل الصورة.",
"cannotResolveCollabServer": "تعذر الاتصال بخادم التعاون. الرجاء إعادة تحميل الصفحة والمحاولة مرة أخرى.",
"importLibraryError": "تعذر تحميل المكتبة",
"collabSaveFailed": "تعذر الحفظ في قاعدة البيانات. إذا استمرت المشاكل، يفضل أن تحفظ ملفك محليا كي لا تفقد عملك.",
"collabSaveFailed_sizeExceeded": "تعذر الحفظ في قاعدة البيانات، يبدو أن القماش كبير للغاية، يفضّل حفظ الملف محليا كي لا تفقد عملك.",
"imageToolNotSupported": "",
"saveLibraryError": "تعذر حفظ المكتبة. الرجاء حفظ المكتبة الخاصة بك في ملف محلي للتأكد من أنك لا تفقد التغييرات.",
"collabSaveFailed": "تعذر الحفظ في قاعدة البيانات. إذا استمرت المشاكل، يُفضل حفظ ملفك محليًا كي لا تفقد عملك.",
"collabSaveFailed_sizeExceeded": "تعذر الحفظ في قاعدة البيانات، يبدو أن القماش كبير للغاية، يُفضل حفظ الملف محليًا كي لا تفقد عملك.",
"imageToolNotSupported": "تم تعطيل الصور.",
"brave_measure_text_error": {
"line1": "يبدو أنك تستخدم متصفح Brave مع إعداد <bold>حظر صارم لتتبع البصمة</bold>.",
"line2": "قد يؤدي هذا إلى كسر <bold>عناصر النص</bold> في الرسومات الخاصة بك.",
@@ -226,15 +283,16 @@
},
"libraryElementTypeError": {
"embeddable": "لا يمكن إضافة العناصر القابلة للتضمين في المكتبة.",
"iframe": "",
"image": "سوف يتم دعم إضافة صور إلى المكتبة قريباً!"
"iframe": "لا يمكن إضافة عناصر IFrame إلى المكتبة.",
"image": "سيتم دعم إضافة صور إلى المكتبة قريبًا!"
},
"asyncPasteFailedOnRead": "",
"asyncPasteFailedOnParse": "",
"copyToSystemClipboardFailed": ""
"asyncPasteFailedOnRead": "تعذر اللصق (تعذر القراءة من حافظة النظام).",
"asyncPasteFailedOnParse": "تعذر اللصق.",
"copyToSystemClipboardFailed": "تعذر النسخ إلى الحافظة."
},
"toolBar": {
"selection": "تحديد",
"lasso": "",
"image": "إدراج صورة",
"rectangle": "مستطيل",
"diamond": "مضلع",
@@ -245,17 +303,33 @@
"text": "نص",
"library": "مكتبة",
"lock": "الحفاظ على أداة التحديد نشطة بعد الرسم",
"penMode": "وضع القلم - امنع اللمس",
"penMode": "وضع القلم - منع اللمس",
"link": "إضافة/تحديث الرابط للشكل المحدد",
"eraser": "ممحاة",
"frame": "أداة الإطار",
"magicframe": "",
"magicframe": "Wireframe إلى كود",
"embeddable": "تضمين ويب",
"laser": "مؤشر ليزر",
"hand": "يد (أداة الإزاحة)",
"extraTools": "المزيد من أﻷدوات",
"mermaidToExcalidraw": "",
"magicSettings": ""
"extraTools": "المزيد من الأدوات",
"mermaidToExcalidraw": "من Mermaid إلى Excalidraw",
"convertElementType": ""
},
"element": {
"rectangle": "مستطيل",
"diamond": "مضلع",
"ellipse": "دائرة",
"arrow": "سهم",
"line": "خط",
"freedraw": "رسم حر",
"text": "نص",
"image": "صورة",
"group": "مجموعة",
"frame": "إطار",
"magicframe": "Wireframe إلى كود",
"embeddable": "تضمين ويب",
"selection": "تحديد",
"iframe": "IFrame"
},
"headings": {
"canvasActions": "إجراءات اللوحة",
@@ -263,103 +337,115 @@
"shapes": "الأشكال"
},
"hints": {
"canvasPanning": "لتحريك القماش، اضغط على عجلة الفأرة أو مفتاح المسافة أثناء السحب، أو استخدم أداة اليد",
"dismissSearch": "",
"canvasPanning": "",
"linearElement": "انقر لبدء نقاط متعددة، اسحب لخط واحد",
"freeDraw": "انقر واسحب، افرج عند الانتهاء",
"arrowTool": "",
"freeDraw": "انقر واسحب، أفرج عند الانتهاء",
"text": "نصيحة: يمكنك أيضًا إضافة نص بالنقر المزدوج في أي مكان بأداة الاختيار",
"embeddable": "اضغط مع السحب لإنشاء موقع ويب مضمّن",
"text_selected": "انقر نقراً مزدوجاً أو اضغط ادخال لتعديل النص",
"text_editing": "اضغط على Esc أو (Ctrl أو Cmd) + Enter لإنهاء التعديل",
"linearElementMulti": "انقر فوق النقطة الأخيرة أو اضغط على Esc أو Enter للإنهاء",
"lockAngle": "يمكنك تقييد الزاوية بالضغط على SHIFT",
"resize": "يمكنك تقييد النسب بالضغط على SHIFT أثناء تغيير الحجم،\nاضغط على ALT لتغيير الحجم من المركز",
"resizeImage": "يمكنك تغيير الحجم بحرية بالضغط بأستمرار على SHIFT،\nاضغط بأستمرار على ALT أيضا لتغيير الحجم من المركز",
"rotate": "يمكنك تقييد الزوايا من خلال الضغط على SHIFT أثناء الدوران",
"lineEditor_info": "اضغط على مفتاح (Ctrl أو Cmd) و انقر بشكل مزدوج، أو اضغط على مفتاحي (Ctrl أو Cmd) و (Enter) لتعديل النقاط",
"lineEditor_pointSelected": "اضغط على حذف لإزالة النقطة (النِّقَاط)، Ctrl/Cmd+D للتكرار، أو اسحب للانتقال",
"lineEditor_nothingSelected": "اختر نقطة لتعديلها (اضغط على SHIFT لتحديد عدة نِقَاط),\nأو اضغط على ALT و انقر بالفأرة لإضافة نِقَاط جديدة",
"placeImage": "انقر لوضع الصورة، أو انقر واسحب لتعيين حجمها يدوياً",
"text_selected": "",
"text_editing": "",
"linearElementMulti": "",
"lockAngle": "",
"resize": "",
"resizeImage": "",
"rotate": "",
"lineEditor_info": "",
"lineEditor_line_info": "",
"lineEditor_pointSelected": "",
"lineEditor_nothingSelected": "",
"publishLibrary": "نشر مكتبتك",
"bindTextToElement": "اضغط على إدخال لإضافة نص",
"deepBoxSelect": "اضغط على Ctrl\\Cmd للاختيار العميق، ولمنع السحب",
"eraserRevert": "اضغط على Alt لاستعادة العناصر المعلَّمة للحذف",
"bindTextToElement": "",
"createFlowchart": "",
"deepBoxSelect": "",
"eraserRevert": "",
"firefox_clipboard_write": "يمكن على الأرجح تمكين هذه الميزة عن طريق تعيين علم \"dom.events.asyncClipboard.clipboardItem\" إلى \"true\". لتغيير أعلام المتصفح في Firefox، قم بزيارة صفحة \"about:config\".",
"disableSnapping": "اضغط على Ctrl أو Cmd لتعطيل الالتقاط"
"disableSnapping": "",
"enterCropEditor": "",
"leaveCropEditor": ""
},
"canvasError": {
"cannotShowPreview": "تعذر عرض المعاينة",
"canvasTooBig": "قد تكون اللوحة كبيرة جداً.",
"canvasTooBig": "قد تكون اللوحة كبيرة جدًا.",
"canvasTooBigTip": "نصيحة: حاول تحريك العناصر البعيدة بشكل أقرب قليلاً."
},
"errorSplash": {
"headingMain": "حدث خطأ. حاول <button>تحديث الصفحة</button>.",
"clearCanvasMessage": "إذا لم تعمل إعادة التحميل، حاول مرة أخرى ",
"clearCanvasCaveat": " هذا سيؤدي إلى فقدان العمل ",
"clearCanvasCaveat": "هذا سيؤدي إلى فقدان العمل",
"trackedToSentry": "تم تتبع الخطأ في المعرف {{eventId}} على نظامنا.",
"openIssueMessage": "حرصنا على عدم إضافة معلومات المشهد في بلاغ الخطأ. في حال كون مشهدك لا يحمل أي معلومات خاصة نرجو المتابعة على <button>نظام تتبع الأخطاء</button>. نرجو إضافة المعلومات أدناه بنسخها ولصقها في محتوى البلاغ على GitHub.",
"openIssueMessage": "حرصنا على عدم إضافة معلومات المشهد في بلاغ الخطأ. في حال كون مشهدك لا يحمل أي معلومات خاصة، نرجو المتابعة على <button>نظام تتبع الأخطاء</button>. نرجو إضافة المعلومات أدناه بنسخها ولصقها في محتوى البلاغ على GitHub.",
"sceneContent": "محتوى المشهد:"
},
"shareDialog": {
"or": "أو"
},
"roomDialog": {
"desc_intro": "يمكنك دعوة الآخرين لمشاركتك نفس الجلسة التي تعمل عليها.",
"desc_privacy": "لا تقلق، الجلسة تستخدم التشفير من النهاية إلى النهاية، لذلك فإن أي شيء ترسمه سيبقى خاصاً. لن يتمكن حتى الخادوم الخاص بنا من رؤية ما توصلت إليه.",
"desc_intro": "ادعُ الأشخاص للتعاون في الرسم الخاص بك.",
"desc_privacy": "لا تقلق، الجلسة مشفرة من النهاية إلى النهاية وخصوصية تمامًا. حتى خادمنا لا يستطيع رؤية ما ترسمه.",
"button_startSession": "بدء الجلسة",
"button_stopSession": "إيقاف الجلسة",
"desc_inProgressIntro": "تجري الآن المشاركة الحية.",
"desc_inProgressIntro": "تجري الآن جلسة تعاون مباشرة.",
"desc_shareLink": "شارك هذا الرابط مع أي شخص تريده أن يشاركك الجلسة:",
"desc_exitSession": "إيقاف الجلسة سيؤدي إلى قطع الاتصال الخاص بك من الغرفة، ولكن ستتمكن من مواصلة العمل مع المشهد، محليا. لاحظ أن هذا لن يؤثر على الأشخاص الآخرين، و سيظلون قادرين على التعاون في إصدارهم.",
"shareTitle": "الانضمام إلى جلسة تعاون حية على Excalidraw"
"desc_exitSession": "إيقاف الجلسة سيؤدي إلى قطع الاتصال الخاص بك من الغرفة، ولكن ستتمكن من مواصلة العمل مع المشهد محليًا. لاحظ أن هذا لن يؤثر على الأشخاص الآخرين، وسيظلون قادرين على التعاون في إصدارهم.",
"shareTitle": "الانضمام إلى جلسة تعاون مباشرة على Excalidraw"
},
"errorDialog": {
"title": "خطأ"
},
"exportDialog": {
"disk_title": "حفظ الملف للجهاز",
"disk_details": "تصدير بيانات المشهد إلى ملف يمكنك الاستيراد منه لاحقاً.",
"disk_button": "إحفظ لملف",
"disk_title": "حفظ الملف على الجهاز",
"disk_details": "تصدير بيانات المشهد إلى ملف يمكنك الاستيراد منه لاحقًا.",
"disk_button": "حفظ إلى ملف",
"link_title": "رابط قابل للمشاركة",
"link_details": "صدر الملف للمشاهدة فقط.",
"link_button": "التصدير كرابط",
"link_details": "تصدير الملف للمشاهدة فقط.",
"link_button": "تصدير كرابط",
"excalidrawplus_description": "حفظ المشهد إلى مساحة العمل +Excalidraw الخاصة بك.",
"excalidrawplus_button": "تصدير",
"excalidrawplus_exportError": "تعذر التصدير إلى +Excalidraw في الوقت الحالي..."
"excalidrawplus_exportError": "تعذر التص несп في الوقت الحالي إلى +Excalidraw..."
},
"helpDialog": {
"blog": "اقرأ مدونتنا",
"click": "انقر",
"deepSelect": "تحديد عميق",
"deepBoxSelect": "تحديد عميق داخل المربع، ومنع السحب",
"curvedArrow": "سهم مائل",
"curvedLine": "خط مائل",
"createFlowchart": "إنشاء مخطط تدفق من عنصر عام",
"navigateFlowchart": "التنقل في مخطط تدفق",
"curvedArrow": "سهم منحني",
"curvedLine": "خط منحني",
"documentation": "دليل الاستخدام",
"doubleClick": "انقر مرتين",
"drag": "اسحب",
"editor": "المحرر",
"editLineArrowPoints": "تحرير سطر/نقاط سهم",
"editLineArrowPoints": "تحرير نقاط السطر/السهم",
"editText": "تعديل النص / إضافة تسمية",
"github": "عثرت على مشكلة؟ إرسال",
"github": "عثرت على مشكلة؟ أرسل",
"howto": "اتبع التعليمات",
"or": "أو",
"preventBinding": "منع ارتبط السهم",
"preventBinding": "منع ارتباط السهم",
"tools": "الأدوات",
"shortcuts": "اختصارات لوحة المفاتيح",
"textFinish": "إنهاء التعديل (محرر النص)",
"textNewLine": "أضف سطر جديد (محرر نص)",
"textNewLine": "إضافة سطر جديد (محرر النص)",
"title": "المساعدة",
"view": "عرض",
"zoomToFit": "تكبير للملائمة",
"zoomToSelection": "تكبير للعنصر المحدد",
"toggleElementLock": "إغلاق/فتح المحدد",
"toggleElementLock": "قفل/فتح المحدد",
"movePageUpDown": "نقل الصفحة أعلى/أسفل",
"movePageLeftRight": "نقل الصفحة يسار/يمين"
"movePageLeftRight": "نقل الصفحة يسار/يمين",
"cropStart": "بدء قص الصورة",
"cropFinish": "إنهاء قص الصورة"
},
"clearCanvasDialog": {
"title": "مسح اللوحة"
},
"publishDialog": {
"title": "نشر المكتبة",
"itemName": "إسم العنصر",
"authorName": "إسم المؤلف",
"githubUsername": "اسم المستخدم في جيت هب",
"itemName": "اسم العنصر",
"authorName": "اسم المؤلف",
"githubUsername": "اسم المستخدم في GitHub",
"twitterUsername": "اسم المستخدم في تويتر",
"libraryName": "اسم المكتبة",
"libraryDesc": "وصف المكتبة",
@@ -368,24 +454,24 @@
"authorName": "اسمك أو اسم المستخدم",
"libraryName": "اسم مكتبتك",
"libraryDesc": "وصف مكتبتك لمساعدة الناس على فهم استخدامها",
"githubHandle": "معالج GitHub (اختياري)، حتى تتمكن من تحرير المكتبة عند إرسالها للمراجعة",
"githubHandle": "معرف GitHub (اختياري)، حتى تتمكن من تحرير المكتبة عند إرسالها للمراجعة",
"twitterHandle": "اسم مستخدم تويتر (اختياري)، حتى نعرف من الذي سيتم الإشارة إليه عند الترويج عبر تويتر",
"website": "رابط إلى موقعك الشخصي أو في مكان آخر (اختياري)"
"website": "رابط إلى موقعك الشخصي أو مكان آخر (اختياري)"
},
"errors": {
"required": "مطلوب",
"website": "أدخل عنوان URL صالح"
},
"noteDescription": "تقديم مكتبتك لتضمينها في مستودع المكتبة العامة <link></link> لأشخاص آخرين لاستخدامها في رسومهم.",
"noteGuidelines": "تحتاج المكتبة إلى الموافقة أولا. يرجى قراءة <link>المعايير</link> قبل تقديمها. سوف تحتاج إلى حساب GitHub للتواصل وإجراء التغييرات عند الطلب، ولكن ليس مطلوبا بشكل صارم.",
"noteLicense": "تقديمك يعني موافقتك على نشر المكتبة المقدمة تحت <link>MIT ترخيص</link>، ما يعني أن لأي أحد الحق في استخدامها دون قيود.",
"noteItems": "يجب أن يكون لكل عنصر مكتبة اسمه الخاص حتى يكون قابلاً للتصفية. سيتم تضمين عناصر المكتبة التالية:",
"noteDescription": "تقديم مكتبتك لتضمينها في مستودع المكتبة العامة <link></link> ليستخدمها الآخرون في رسوماتهم.",
"noteGuidelines": "تحتاج المكتبة إلى الموافقة أولاً. يرجى قراءة <link>المعايير</link> قبل تقديمها. ستحتاج إلى حساب GitHub للتواصل وإجراء التغييرات عند الطلب، ولكنه ليس مطلوبًا بشكل صارم.",
"noteLicense": "تقديمك يعني موافقتك على نشر المكتبة المقدمة تحت <link>ترخيص MIT</link>، مما يعني أن لأي شخص الحق في استخدامها دون قيود.",
"noteItems": "يجب أن يكون لكل عنصر مكتبة اسم خاص به ليكون قابلًا للتصفية. سيتم تضمين عناصر المكتبة التالية:",
"atleastOneLibItem": "يرجى تحديد عنصر مكتبة واحد على الأقل للبدء",
"republishWarning": "ملاحظة: بعض العناصر المحددة معينة على أنه نشرها أو تقديمها من قبل. يجب عليك فقط إعادة إرسال العناصر عند تحديث مكتبة موجودة أو إرسالها."
"republishWarning": "ملاحظة: بعض العناصر المحددة معينة على أنها نُشرت أو قُدمت من قبل. يجب عليك فقط إعادة إرسال العناصر عند تحديث مكتبة موجودة أو إرسالها."
},
"publishSuccessDialog": {
"title": "تم إرسال المكتبة",
"content": "شكرا لك {{authorName}}. لقد تم إرسال مكتبتك للمراجعة. يمكنك تتبع الحالة"
"content": "شكرًا لك {{authorName}}. لقد تم إرسال مكتبتك للمراجعة. يمكنك تتبع الحالة"
},
"confirmDialog": {
"resetLibrary": "إعادة ضبط المكتبة",
@@ -394,15 +480,15 @@
"imageExportDialog": {
"header": "تصدير الصورة",
"label": {
"withBackground": "الخلفية",
"withBackground": "مع الخلفية",
"onlySelected": "المحدد فقط",
"darkMode": "الوضع الداكن",
"embedScene": "تضمين المشهد",
"scale": "الحجم",
"scale": "المقياس",
"padding": "الهوامش"
},
"tooltip": {
"embedScene": "سيتم حفظ بيانات المشهد في ملف PNG/SVG المصدّر بحيث يمكن استعادة المشهد منه.\nسيزيد حجم الملف المصدر."
"embedScene": "سيتم حفظ بيانات المشهد في ملف PNG/SVG المصدر بحيث يمكن استعادة المشهد منه.\nسيزيد هذا من حجم الملف المصدر."
},
"title": {
"exportToPng": "تصدير بصيغة PNG",
@@ -416,18 +502,20 @@
}
},
"encrypted": {
"tooltip": "رسوماتك مشفرة من النهاية إلى النهاية حتى أن خوادم Excalidraw لن تراها أبدا.",
"link": "مشاركة المدونة في التشفير من النهاية إلى النهاية في Excalidraw"
"tooltip": "رسوماتك مشفرة من النهاية إلى النهاية، لذا لا يمكن لخوادم Excalidraw رؤيتها أبدًا.",
"link": "مشاركة المدونة حول التشفير من النهاية إلى النهاية في Excalidraw"
},
"stats": {
"angle": "الزاوية",
"element": "عنصر",
"elements": "العناصر",
"shapes": "الأشكال",
"height": "الارتفاع",
"scene": "المشهد",
"selected": "المحدد",
"storage": "التخزين",
"title": "إحصائيات للمهووسين",
"fullTitle": "خصائص اللوحة والأشكال",
"title": "الخصائص",
"generalStats": "عام",
"elementProperties": "خصائص الشكل",
"total": "المجموع",
"version": "الإصدار",
"versionCopy": "انقر للنسخ",
@@ -435,17 +523,19 @@
"width": "العرض"
},
"toast": {
"addedToLibrary": "تمت الاضافة الى المكتبة!",
"copyStyles": "نسخت الانماط.",
"copyToClipboard": "نسخ إلى الحافظة.",
"addedToLibrary": "تمت الإضافة إلى المكتبة!",
"copyStyles": "تم نسخ الأنماط.",
"copyToClipboard": "تم النسخ إلى الحافظة.",
"copyToClipboardAsPng": "تم نسخ {{exportSelection}} إلى الحافظة بصيغة PNG\n({{exportColorScheme}})",
"copyToClipboardAsSvg": "تم نسخ {{exportSelection}} إلى الحافظة بصيغة SVG\n({{exportColorScheme}})",
"fileSaved": "تم حفظ الملف.",
"fileSavedToFilename": "حفظ باسم {filename}",
"fileSavedToFilename": "تم الحفظ باسم {filename}",
"canvas": "لوحة الرسم",
"selection": "العنصر المحدد",
"pasteAsSingleElement": "استخدم {{shortcut}} للصق كعنصر واحد،\nأو لصق في محرر نص موجود",
"unableToEmbed": "تضمين هذا الرابط غير مسموح حاليًا. افتح بلاغاً على GitHub لطلب عنوان Url القائمة البيضاء",
"unrecognizedLinkFormat": "الرابط الذي ضمنته لا يتطابق مع التنسيق المتوقع. الرجاء محاولة لصق النص 'المضمن' المُزوَد من موقع المصدر"
"unableToEmbed": "تضمين هذا الرابط غير مسموح حاليًا. افتح بلاغًا على GitHub لطلب إدراج عنوان URL في القائمة البيضاء",
"unrecognizedLinkFormat": "الرابط الذي أدرجته لا يتطابق مع التنسيق المتوقع. الرجاء محاولة لصق النص 'المضمن' المُزوَد من موقع المصدر",
"elementLinkCopied": "تم نسخ الرابط إلى الحافظة"
},
"colors": {
"transparent": "شفاف",
@@ -466,19 +556,20 @@
},
"welcomeScreen": {
"app": {
"center_heading": "جميع بياناتك محفوظة محليا في المتصفح الخاص بك.",
"center_heading_plus": "هل تريد الذهاب إلى Excalidraw+ بدلاً من ذلك؟",
"menuHint": "التصدير والتفضيلات واللغات ..."
"center_heading": "جميع بياناتك محفوظة محليًا في المتصفح الخاص بك.",
"center_heading_plus": "هل تريد الانتقال إلى Excalidraw+ بدلاً من ذلك؟",
"menuHint": "التصدير، التفضيلات، اللغات..."
},
"defaults": {
"menuHint": "التصدير والتفضيلات وغيرها...",
"center_heading": "الرسم البياني التصويري. بشكل مبسط.",
"toolbarHint": "اختر أداة و ابدأ الرسم!",
"helpHint": "الاختصارات و المساعدة"
"menuHint": "التصدير، التفضيلات، وغيرها...",
"center_heading": "الرسم البياني التصويري، ببساطة.",
"toolbarHint": "اختر أداة وابدأ الرسم!",
"helpHint": "الاختصارات والمساعدة"
}
},
"colorPicker": {
"mostUsedCustomColors": "الألوان المخصصة الأكثر استخداما",
"color": "",
"mostUsedCustomColors": "الألوان المخصصة الأكثر استخدامًا",
"colors": "الألوان",
"shades": "الدرجات",
"hexCode": "رمز Hex",
@@ -489,12 +580,12 @@
"exportToImage": {
"title": "تصدير كصورة",
"button": "تصدير كصورة",
"description": "تصدير بيانات المشهد إلى ملف يمكنك الاستيراد منه لاحقاً."
"description": "تصدير بيانات المشهد إلى ملف يمكنك الاستيراد منه لاحقًا."
},
"saveToDisk": {
"title": "حفظ الملف للجهاز",
"button": "حفظ الملف للجهاز",
"description": "تصدير بيانات المشهد إلى ملف يمكنك الاستيراد منه لاحقاً."
"title": "حفظ الملف على الجهاز",
"button": "حفظ الملف على الجهاز",
"description": "تصدير بيانات المشهد إلى ملف يمكنك الاستيراد منه لاحقًا."
},
"excalidrawPlus": {
"title": "Excalidraw+",
@@ -511,15 +602,63 @@
"shareableLink": {
"title": "تحميل من رابط",
"button": "استبدال محتواي",
"description": "سيتسبب تحميل رسمة خارجية <bold>باستبدال محتواك الموجود حالياً</bold>.<br></br>بإمكانك إجراء النسخ الاحتياطي لرسمتك الحالية باستخدام أحد الخيارات أدناه."
"description": "سيتسبب تحميل رسمة خارجية <bold>باستبدال محتواك الموجود حاليًا</bold>.<br></br>بإمكانك إجراء النسخ الاحتياطي لرسمتك الحالية باستخدام أحد الخيارات أدناه."
}
}
},
"mermaid": {
"title": "",
"button": "",
"description": "",
"syntax": "",
"preview": ""
"title": "Mermaid إلى Excalidraw",
"button": "إدراج",
"description": "حاليًا، يتم دعم <flowchartLink>مخططات التدفق</flowchartLink>، <sequenceLink>التسلسلات</sequenceLink>، و<classLink>الفئات</classLink> فقط. سيتم عرض الأنواع الأخرى كصورة في Excalidraw.",
"syntax": "صيغة Mermaid",
"preview": "معاينة"
},
"quickSearch": {
"placeholder": "بحث سريع"
},
"fontList": {
"badge": {
"old": "قديم"
},
"sceneFonts": "في هذا المشهد",
"availableFonts": "الخطوط المتوفرة",
"empty": "لم يتم العثور على خطوط"
},
"userList": {
"empty": "لم يتم العثور على مستخدمين",
"hint": {
"text": "انقر على المستخدم للمتابعة",
"followStatus": "أنت حاليًا تتابع هذا المستخدم",
"inCall": "المستخدم في مكالمة صوتية",
"micMuted": "ميكروفون المستخدم مكتم",
"isSpeaking": "المستخدم يتحدث"
}
},
"commandPalette": {
"title": "لوحة الأوامر",
"shortcuts": {
"select": "اختر",
"confirm": "تأكيد",
"close": "إغلاق"
},
"recents": "المستخدمة مؤخرًا",
"search": {
"placeholder": "ابحث في القوائم، الأوامر، واكتشف الجواهر المخفية",
"noMatch": "لا توجد أوامر مطابقة..."
},
"itemNotAvailable": "الأمر غير متوفر...",
"shortcutHint": "للحصول على لوحة الأوامر، استخدم {{shortcut}}"
},
"keys": {
"ctrl": "",
"option": "",
"cmd": "",
"alt": "",
"escape": "",
"enter": "",
"shift": "",
"spacebar": "",
"delete": "",
"mmb": ""
}
}

Some files were not shown because too many files have changed in this diff Show More