@@ -628,7 +646,7 @@ export const actionChangeStrokeStyle = register({
captureUpdate: CaptureUpdateAction.IMMEDIATELY,
};
},
- PanelComponent: ({ elements, appState, updateData, app }) => (
+ PanelComponent: ({ elements, appState, updateData, app, data }) => (
@@ -1317,7 +1365,7 @@ export const actionChangeVerticalAlign = register({
captureUpdate: CaptureUpdateAction.IMMEDIATELY,
};
},
- PanelComponent: ({ elements, appState, updateData, app }) => {
+ PanelComponent: ({ elements, appState, updateData, app, data }) => {
return (
@@ -1616,6 +1672,25 @@ export const actionChangeArrowhead = register({
},
});
+export const actionChangeArrowProperties = register({
+ name: "changeArrowProperties",
+ label: "Change arrow properties",
+ trackEvent: false,
+ perform: (elements, appState, value, app) => {
+ // This action doesn't perform any changes directly
+ // It's just a container for the arrow type and arrowhead actions
+ return false;
+ },
+ PanelComponent: ({ elements, appState, updateData, app, renderAction }) => {
+ return (
+
+ {renderAction("changeArrowhead")}
+ {renderAction("changeArrowType")}
+
+ );
+ },
+});
+
export const actionChangeArrowType = register({
name: "changeArrowType",
label: "Change arrow types",
diff --git a/packages/excalidraw/actions/actionZindex.tsx b/packages/excalidraw/actions/actionZindex.tsx
index 62a6aa411f..1269ed23f6 100644
--- a/packages/excalidraw/actions/actionZindex.tsx
+++ b/packages/excalidraw/actions/actionZindex.tsx
@@ -1,4 +1,4 @@
-import { KEYS, CODES, getShortcutKey, isDarwin } from "@excalidraw/common";
+import { KEYS, CODES, isDarwin } from "@excalidraw/common";
import {
moveOneLeft,
@@ -16,6 +16,7 @@ import {
SendToBackIcon,
} from "../components/icons";
import { t } from "../i18n";
+import { getShortcutKey } from "../shortcut";
import { register } from "./register";
diff --git a/packages/excalidraw/actions/index.ts b/packages/excalidraw/actions/index.ts
index f37747aebd..6b888e92d3 100644
--- a/packages/excalidraw/actions/index.ts
+++ b/packages/excalidraw/actions/index.ts
@@ -18,6 +18,7 @@ export {
actionChangeFontFamily,
actionChangeTextAlign,
actionChangeVerticalAlign,
+ actionChangeArrowProperties,
} from "./actionProperties";
export {
@@ -43,11 +44,7 @@ export {
} from "./actionExport";
export { actionCopyStyles, actionPasteStyles } from "./actionStyles";
-export {
- actionToggleCanvasMenu,
- actionToggleEditMenu,
- actionShortcuts,
-} from "./actionMenu";
+export { actionShortcuts } from "./actionMenu";
export { actionGroup, actionUngroup } from "./actionGroup";
diff --git a/packages/excalidraw/actions/shortcuts.ts b/packages/excalidraw/actions/shortcuts.ts
index 1a13f1703c..ca593c3402 100644
--- a/packages/excalidraw/actions/shortcuts.ts
+++ b/packages/excalidraw/actions/shortcuts.ts
@@ -1,8 +1,9 @@
-import { isDarwin, getShortcutKey } from "@excalidraw/common";
+import { isDarwin } from "@excalidraw/common";
import type { SubtypeOf } from "@excalidraw/common/utility-types";
import { t } from "../i18n";
+import { getShortcutKey } from "../shortcut";
import type { ActionName } from "./types";
diff --git a/packages/excalidraw/actions/types.ts b/packages/excalidraw/actions/types.ts
index e6f3631263..d533294d39 100644
--- a/packages/excalidraw/actions/types.ts
+++ b/packages/excalidraw/actions/types.ts
@@ -69,10 +69,9 @@ export type ActionName =
| "changeStrokeStyle"
| "changeArrowhead"
| "changeArrowType"
+ | "changeArrowProperties"
| "changeOpacity"
| "changeFontSize"
- | "toggleCanvasMenu"
- | "toggleEditMenu"
| "undo"
| "redo"
| "finalize"
diff --git a/packages/excalidraw/appState.ts b/packages/excalidraw/appState.ts
index 029b2cc61d..52535e9a36 100644
--- a/packages/excalidraw/appState.ts
+++ b/packages/excalidraw/appState.ts
@@ -55,6 +55,10 @@ export const getDefaultAppState = (): Omit<
fromSelection: false,
lastActiveTool: null,
},
+ preferredSelectionTool: {
+ type: "selection",
+ initialized: false,
+ },
penMode: false,
penDetected: false,
errorMessage: null,
@@ -123,6 +127,7 @@ export const getDefaultAppState = (): Omit<
searchMatches: null,
lockedMultiSelections: {},
activeLockedId: null,
+ stylesPanelMode: "full",
};
};
@@ -175,6 +180,7 @@ const APP_STATE_STORAGE_CONF = (<
editingTextElement: { browser: false, export: false, server: false },
editingGroupId: { browser: true, export: false, server: false },
activeTool: { browser: true, export: false, server: false },
+ preferredSelectionTool: { browser: true, export: false, server: false },
penMode: { browser: true, export: false, server: false },
penDetected: { browser: true, export: false, server: false },
errorMessage: { browser: false, export: false, server: false },
@@ -248,6 +254,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 },
});
const _clearAppStateForStorage = <
diff --git a/packages/excalidraw/clipboard.test.ts b/packages/excalidraw/clipboard.test.ts
index 770bcc90e7..2115c3eff2 100644
--- a/packages/excalidraw/clipboard.test.ts
+++ b/packages/excalidraw/clipboard.test.ts
@@ -1,6 +1,7 @@
import {
createPasteEvent,
parseClipboard,
+ parseDataTransferEvent,
serializeAsClipboardJSON,
} from "./clipboard";
import { API } from "./tests/helpers/api";
@@ -13,7 +14,9 @@ describe("parseClipboard()", () => {
text = "123";
clipboardData = await parseClipboard(
- createPasteEvent({ types: { "text/plain": text } }),
+ await parseDataTransferEvent(
+ createPasteEvent({ types: { "text/plain": text } }),
+ ),
);
expect(clipboardData.text).toBe(text);
@@ -21,7 +24,9 @@ describe("parseClipboard()", () => {
text = "[123]";
clipboardData = await parseClipboard(
- createPasteEvent({ types: { "text/plain": text } }),
+ await parseDataTransferEvent(
+ createPasteEvent({ types: { "text/plain": text } }),
+ ),
);
expect(clipboardData.text).toBe(text);
@@ -29,7 +34,9 @@ describe("parseClipboard()", () => {
text = JSON.stringify({ val: 42 });
clipboardData = await parseClipboard(
- createPasteEvent({ types: { "text/plain": text } }),
+ await parseDataTransferEvent(
+ createPasteEvent({ types: { "text/plain": text } }),
+ ),
);
expect(clipboardData.text).toBe(text);
});
@@ -39,11 +46,13 @@ describe("parseClipboard()", () => {
const json = serializeAsClipboardJSON({ elements: [rect], files: null });
const clipboardData = await parseClipboard(
- createPasteEvent({
- types: {
- "text/plain": json,
- },
- }),
+ await parseDataTransferEvent(
+ createPasteEvent({
+ types: {
+ "text/plain": json,
+ },
+ }),
+ ),
);
expect(clipboardData.elements).toEqual([rect]);
});
@@ -56,21 +65,25 @@ describe("parseClipboard()", () => {
// -------------------------------------------------------------------------
json = serializeAsClipboardJSON({ elements: [rect], files: null });
clipboardData = await parseClipboard(
- createPasteEvent({
- types: {
- "text/html": json,
- },
- }),
+ await parseDataTransferEvent(
+ createPasteEvent({
+ types: {
+ "text/html": json,
+ },
+ }),
+ ),
);
expect(clipboardData.elements).toEqual([rect]);
// -------------------------------------------------------------------------
json = serializeAsClipboardJSON({ elements: [rect], files: null });
clipboardData = await parseClipboard(
- createPasteEvent({
- types: {
- "text/html": `
${json}
`,
- },
- }),
+ await parseDataTransferEvent(
+ createPasteEvent({
+ types: {
+ "text/html": `
${json}
`,
+ },
+ }),
+ ),
);
expect(clipboardData.elements).toEqual([rect]);
// -------------------------------------------------------------------------
@@ -80,11 +93,13 @@ describe("parseClipboard()", () => {
let clipboardData;
// -------------------------------------------------------------------------
clipboardData = await parseClipboard(
- createPasteEvent({
- types: {
- "text/html": `
`,
- },
- }),
+ await parseDataTransferEvent(
+ createPasteEvent({
+ types: {
+ "text/html": `
`,
+ },
+ }),
+ ),
);
expect(clipboardData.mixedContent).toEqual([
{
@@ -94,11 +109,13 @@ describe("parseClipboard()", () => {
]);
// -------------------------------------------------------------------------
clipboardData = await parseClipboard(
- createPasteEvent({
- types: {
- "text/html": `
`,
- },
- }),
+ await parseDataTransferEvent(
+ createPasteEvent({
+ types: {
+ "text/html": `
`,
+ },
+ }),
+ ),
);
expect(clipboardData.mixedContent).toEqual([
{
@@ -114,11 +131,13 @@ describe("parseClipboard()", () => {
it("should parse text content alongside
`src` urls out of text/html", async () => {
const clipboardData = await parseClipboard(
- createPasteEvent({
- types: {
- "text/html": `hello my friend!`,
- },
- }),
+ await parseDataTransferEvent(
+ createPasteEvent({
+ types: {
+ "text/html": `hello my friend!`,
+ },
+ }),
+ ),
);
expect(clipboardData.mixedContent).toEqual([
{
@@ -141,14 +160,16 @@ describe("parseClipboard()", () => {
let clipboardData;
// -------------------------------------------------------------------------
clipboardData = await parseClipboard(
- createPasteEvent({
- types: {
- "text/plain": `a b
- 1 2
- 4 5
- 7 10`,
- },
- }),
+ await parseDataTransferEvent(
+ createPasteEvent({
+ types: {
+ "text/plain": `a b
+ 1 2
+ 4 5
+ 7 10`,
+ },
+ }),
+ ),
);
expect(clipboardData.spreadsheet).toEqual({
title: "b",
@@ -157,14 +178,16 @@ describe("parseClipboard()", () => {
});
// -------------------------------------------------------------------------
clipboardData = await parseClipboard(
- createPasteEvent({
- types: {
- "text/html": `a b
- 1 2
- 4 5
- 7 10`,
- },
- }),
+ await parseDataTransferEvent(
+ createPasteEvent({
+ types: {
+ "text/html": `a b
+ 1 2
+ 4 5
+ 7 10`,
+ },
+ }),
+ ),
);
expect(clipboardData.spreadsheet).toEqual({
title: "b",
@@ -173,19 +196,21 @@ describe("parseClipboard()", () => {
});
// -------------------------------------------------------------------------
clipboardData = await parseClipboard(
- createPasteEvent({
- types: {
- "text/html": `
-
-
-
- `,
- "text/plain": `a b
- 1 2
- 4 5
- 7 10`,
- },
- }),
+ await parseDataTransferEvent(
+ createPasteEvent({
+ types: {
+ "text/html": `
+
+
+
+ `,
+ "text/plain": `a b
+ 1 2
+ 4 5
+ 7 10`,
+ },
+ }),
+ ),
);
expect(clipboardData.spreadsheet).toEqual({
title: "b",
diff --git a/packages/excalidraw/clipboard.ts b/packages/excalidraw/clipboard.ts
index 99b7d41f4a..ae532a6c27 100644
--- a/packages/excalidraw/clipboard.ts
+++ b/packages/excalidraw/clipboard.ts
@@ -5,6 +5,7 @@ import {
arrayToMap,
isMemberOf,
isPromiseLike,
+ EVENT,
} from "@excalidraw/common";
import { mutateElement } from "@excalidraw/element";
@@ -16,15 +17,26 @@ import {
import { getContainingFrame } from "@excalidraw/element";
+import type { ValueOf } from "@excalidraw/common/utility-types";
+
+import type { IMAGE_MIME_TYPES, STRING_MIME_TYPES } from "@excalidraw/common";
import type {
ExcalidrawElement,
NonDeletedExcalidrawElement,
} from "@excalidraw/element/types";
import { ExcalidrawError } from "./errors";
-import { createFile, isSupportedImageFileType } from "./data/blob";
+import {
+ createFile,
+ getFileHandle,
+ isSupportedImageFileType,
+ normalizeFile,
+} from "./data/blob";
+
import { tryParseSpreadsheet, VALID_SPREADSHEET } from "./charts";
+import type { FileSystemHandle } from "./data/filesystem";
+
import type { Spreadsheet } from "./charts";
import type { BinaryFiles } from "./types";
@@ -92,7 +104,7 @@ export const createPasteEvent = ({
console.warn("createPasteEvent: no types or files provided");
}
- const event = new ClipboardEvent("paste", {
+ const event = new ClipboardEvent(EVENT.PASTE, {
clipboardData: new DataTransfer(),
});
@@ -101,10 +113,11 @@ export const createPasteEvent = ({
if (typeof value !== "string") {
files = files || [];
files.push(value);
+ event.clipboardData?.items.add(value);
continue;
}
try {
- event.clipboardData?.setData(type, value);
+ event.clipboardData?.items.add(value, type);
if (event.clipboardData?.getData(type) !== value) {
throw new Error(`Failed to set "${type}" as clipboardData item`);
}
@@ -229,14 +242,10 @@ function parseHTMLTree(el: ChildNode) {
return result;
}
-const maybeParseHTMLPaste = (
- event: ClipboardEvent,
+const maybeParseHTMLDataItem = (
+ dataItem: ParsedDataTransferItemType,
): { type: "mixedContent"; value: PastedMixedContent } | null => {
- const html = event.clipboardData?.getData(MIME_TYPES.html);
-
- if (!html) {
- return null;
- }
+ const html = dataItem.value;
try {
const doc = new DOMParser().parseFromString(html, MIME_TYPES.html);
@@ -332,18 +341,21 @@ export const readSystemClipboard = async () => {
* Parses "paste" ClipboardEvent.
*/
const parseClipboardEventTextData = async (
- event: ClipboardEvent,
+ dataList: ParsedDataTranferList,
isPlainPaste = false,
): Promise => {
try {
- const mixedContent = !isPlainPaste && event && maybeParseHTMLPaste(event);
+ const htmlItem = dataList.findByType(MIME_TYPES.html);
+
+ const mixedContent =
+ !isPlainPaste && htmlItem && maybeParseHTMLDataItem(htmlItem);
if (mixedContent) {
if (mixedContent.value.every((item) => item.type === "text")) {
return {
type: "text",
value:
- event.clipboardData?.getData(MIME_TYPES.text) ||
+ dataList.getData(MIME_TYPES.text) ??
mixedContent.value
.map((item) => item.value)
.join("\n")
@@ -354,23 +366,156 @@ const parseClipboardEventTextData = async (
return mixedContent;
}
- const text = event.clipboardData?.getData(MIME_TYPES.text);
-
- return { type: "text", value: (text || "").trim() };
+ return {
+ type: "text",
+ value: (dataList.getData(MIME_TYPES.text) || "").trim(),
+ };
} catch {
return { type: "text", value: "" };
}
};
+type AllowedParsedDataTransferItem =
+ | {
+ type: ValueOf;
+ kind: "file";
+ file: File;
+ fileHandle: FileSystemHandle | null;
+ }
+ | { type: ValueOf; kind: "string"; value: string };
+
+type ParsedDataTransferItem =
+ | {
+ type: string;
+ kind: "file";
+ file: File;
+ fileHandle: FileSystemHandle | null;
+ }
+ | { type: string; kind: "string"; value: string };
+
+type ParsedDataTransferItemType<
+ T extends AllowedParsedDataTransferItem["type"],
+> = AllowedParsedDataTransferItem & { type: T };
+
+export type ParsedDataTransferFile = Extract<
+ AllowedParsedDataTransferItem,
+ { kind: "file" }
+>;
+
+type ParsedDataTranferList = ParsedDataTransferItem[] & {
+ /**
+ * Only allows filtering by known `string` data types, since `file`
+ * types can have multiple items of the same type (e.g. multiple image files)
+ * unlike `string` data transfer items.
+ */
+ findByType: typeof findDataTransferItemType;
+ /**
+ * Only allows filtering by known `string` data types, since `file`
+ * types can have multiple items of the same type (e.g. multiple image files)
+ * unlike `string` data transfer items.
+ */
+ getData: typeof getDataTransferItemData;
+ getFiles: typeof getDataTransferFiles;
+};
+
+const findDataTransferItemType = function <
+ T extends ValueOf,
+>(this: ParsedDataTranferList, type: T): ParsedDataTransferItemType | null {
+ return (
+ this.find(
+ (item): item is ParsedDataTransferItemType => item.type === type,
+ ) || null
+ );
+};
+const getDataTransferItemData = function <
+ T extends ValueOf,
+>(
+ this: ParsedDataTranferList,
+ type: T,
+):
+ | ParsedDataTransferItemType>["value"]
+ | null {
+ const item = this.find(
+ (
+ item,
+ ): item is ParsedDataTransferItemType> =>
+ item.type === type,
+ );
+
+ return item?.value ?? null;
+};
+
+const getDataTransferFiles = function (
+ this: ParsedDataTranferList,
+): ParsedDataTransferFile[] {
+ return this.filter(
+ (item): item is ParsedDataTransferFile => item.kind === "file",
+ );
+};
+
+export const parseDataTransferEvent = async (
+ event: ClipboardEvent | DragEvent | React.DragEvent,
+): Promise => {
+ let items: DataTransferItemList | undefined = undefined;
+
+ if (isClipboardEvent(event)) {
+ items = event.clipboardData?.items;
+ } else {
+ const dragEvent = event;
+ items = dragEvent.dataTransfer?.items;
+ }
+
+ const dataItems = (
+ await Promise.all(
+ Array.from(items || []).map(
+ async (item): Promise => {
+ if (item.kind === "file") {
+ let file = item.getAsFile();
+ if (file) {
+ const fileHandle = await getFileHandle(item);
+ file = await normalizeFile(file);
+ return {
+ type: file.type,
+ kind: "file",
+ file,
+ fileHandle,
+ };
+ }
+ } else if (item.kind === "string") {
+ const { type } = item;
+ let value: string;
+ if ("clipboardData" in event && event.clipboardData) {
+ value = event.clipboardData?.getData(type);
+ } else {
+ value = await new Promise((resolve) => {
+ item.getAsString((str) => resolve(str));
+ });
+ }
+ return { type, kind: "string", value };
+ }
+
+ return null;
+ },
+ ),
+ )
+ ).filter((data): data is ParsedDataTransferItem => data != null);
+
+ return Object.assign(dataItems, {
+ findByType: findDataTransferItemType,
+ getData: getDataTransferItemData,
+ getFiles: getDataTransferFiles,
+ });
+};
+
/**
* Attempts to parse clipboard event.
*/
export const parseClipboard = async (
- event: ClipboardEvent,
+ dataList: ParsedDataTranferList,
isPlainPaste = false,
): Promise => {
const parsedEventData = await parseClipboardEventTextData(
- event,
+ dataList,
isPlainPaste,
);
@@ -519,3 +664,14 @@ const copyTextViaExecCommand = (text: string | null) => {
return success;
};
+
+export const isClipboardEvent = (
+ event: React.SyntheticEvent | Event,
+): event is ClipboardEvent => {
+ /** not using instanceof ClipboardEvent due to tests (jsdom) */
+ return (
+ event.type === EVENT.PASTE ||
+ event.type === EVENT.COPY ||
+ event.type === EVENT.CUT
+ );
+};
diff --git a/packages/excalidraw/components/Actions.scss b/packages/excalidraw/components/Actions.scss
index 5826628de1..f97f3c7b6f 100644
--- a/packages/excalidraw/components/Actions.scss
+++ b/packages/excalidraw/components/Actions.scss
@@ -91,3 +91,118 @@
}
}
}
+
+.compact-shape-actions {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ max-height: calc(100vh - 200px);
+ overflow-y: auto;
+ padding: 0.5rem;
+
+ .compact-action-item {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 2.5rem;
+ pointer-events: auto;
+
+ --default-button-size: 2rem;
+
+ .compact-action-button {
+ width: var(--mobile-action-button-size);
+ height: var(--mobile-action-button-size);
+ border: none;
+ border-radius: var(--border-radius-lg);
+ color: var(--color-on-surface);
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.2s ease;
+
+ background: var(--mobile-action-button-bg);
+
+ svg {
+ width: 1rem;
+ height: 1rem;
+ flex: 0 0 auto;
+ }
+
+ &.active {
+ background: var(
+ --color-surface-primary-container,
+ var(--mobile-action-button-bg)
+ );
+ }
+ }
+
+ .compact-popover-content {
+ .popover-section {
+ margin-bottom: 1rem;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+
+ .popover-section-title {
+ font-size: 0.75rem;
+ font-weight: 600;
+ color: var(--color-text-secondary);
+ margin-bottom: 0.5rem;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ }
+
+ .buttonList {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.25rem;
+ }
+ }
+ }
+ }
+
+ .ToolIcon {
+ .ToolIcon__icon {
+ width: var(--mobile-action-button-size);
+ height: var(--mobile-action-button-size);
+
+ background: var(--mobile-action-button-bg);
+
+ &:hover {
+ background-color: transparent;
+ }
+ }
+ }
+}
+
+.compact-shape-actions-island {
+ width: fit-content;
+ overflow-x: hidden;
+}
+
+.mobile-shape-actions {
+ z-index: 999;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ width: 100%;
+ background: transparent;
+ border-radius: var(--border-radius-lg);
+ box-shadow: none;
+ overflow: none;
+ scrollbar-width: none;
+ -ms-overflow-style: none;
+}
+
+.shape-actions-theme-scope {
+ --button-border: transparent;
+ --button-bg: var(--color-surface-mid);
+}
+
+:root.theme--dark .shape-actions-theme-scope {
+ --button-hover-bg: #363541;
+ --button-bg: var(--color-surface-high);
+}
diff --git a/packages/excalidraw/components/Actions.tsx b/packages/excalidraw/components/Actions.tsx
index 5c9d59ada3..48ec4dc9a2 100644
--- a/packages/excalidraw/components/Actions.tsx
+++ b/packages/excalidraw/components/Actions.tsx
@@ -1,5 +1,6 @@
import clsx from "clsx";
-import { useState } from "react";
+import { useRef, useState } from "react";
+import * as Popover from "@radix-ui/react-popover";
import {
CLASSES,
@@ -11,18 +12,16 @@ import {
import {
shouldAllowVerticalAlign,
suppportsHorizontalAlign,
-} from "@excalidraw/element";
-
-import {
hasBoundTextElement,
isElbowArrow,
isImageElement,
isLinearElement,
isTextElement,
+ isArrowElement,
+ hasStrokeColor,
+ toolIsArrow,
} from "@excalidraw/element";
-import { hasStrokeColor, toolIsArrow } from "@excalidraw/element";
-
import type {
ExcalidrawElement,
ExcalidrawElementType,
@@ -46,15 +45,21 @@ import {
hasStrokeWidth,
} from "../scene";
-import { SHAPES } from "./shapes";
+import { getFormValue } from "../actions/actionProperties";
+
+import { useTextEditorFocus } from "../hooks/useTextEditorFocus";
+
+import { getToolbarTools } from "./shapes";
import "./Actions.scss";
-import { useDevice } from "./App";
+import { useDevice, useExcalidrawContainer } from "./App";
import Stack from "./Stack";
import { ToolButton } from "./ToolButton";
+import { ToolPopover } from "./ToolPopover";
import { Tooltip } from "./Tooltip";
import DropdownMenu from "./dropdownMenu/DropdownMenu";
+import { PropertiesPopover } from "./PropertiesPopover";
import {
EmbedIcon,
extraToolsIcon,
@@ -63,11 +68,32 @@ import {
laserPointerToolIcon,
MagicIcon,
LassoIcon,
+ sharpArrowIcon,
+ roundArrowIcon,
+ elbowArrowIcon,
+ TextSizeIcon,
+ adjustmentsIcon,
+ DotsHorizontalIcon,
+ SelectionIcon,
} from "./icons";
-import type { AppClassProperties, AppProps, UIAppState, Zoom } from "../types";
+import { Island } from "./Island";
+
+import type {
+ AppClassProperties,
+ AppProps,
+ UIAppState,
+ Zoom,
+ AppState,
+} from "../types";
import type { ActionManager } from "../actions/manager";
+// Common CSS class combinations
+const PROPERTIES_CLASSES = clsx([
+ CLASSES.SHAPE_ACTIONS_THEME_SCOPE,
+ "properties-content",
+]);
+
export const canChangeStrokeColor = (
appState: UIAppState,
targetElements: ExcalidrawElement[],
@@ -280,22 +306,761 @@ export const SelectedShapeActions = ({
);
};
+const CombinedShapeProperties = ({
+ appState,
+ renderAction,
+ setAppState,
+ targetElements,
+ container,
+}: {
+ targetElements: ExcalidrawElement[];
+ appState: UIAppState;
+ renderAction: ActionManager["renderAction"];
+ setAppState: React.Component["setState"];
+ container: HTMLDivElement | null;
+}) => {
+ const showFillIcons =
+ (hasBackground(appState.activeTool.type) &&
+ !isTransparent(appState.currentItemBackgroundColor)) ||
+ targetElements.some(
+ (element) =>
+ hasBackground(element.type) && !isTransparent(element.backgroundColor),
+ );
+
+ const shouldShowCombinedProperties =
+ targetElements.length > 0 ||
+ (appState.activeTool.type !== "selection" &&
+ appState.activeTool.type !== "eraser" &&
+ appState.activeTool.type !== "hand" &&
+ appState.activeTool.type !== "laser" &&
+ appState.activeTool.type !== "lasso");
+ const isOpen = appState.openPopup === "compactStrokeStyles";
+
+ if (!shouldShowCombinedProperties) {
+ return null;
+ }
+
+ return (
+
+
{
+ if (open) {
+ setAppState({ openPopup: "compactStrokeStyles" });
+ } else {
+ setAppState({ openPopup: null });
+ }
+ }}
+ >
+
+
+
+ {isOpen && (
+ {}}
+ >
+
+ {showFillIcons && renderAction("changeFillStyle")}
+ {(hasStrokeWidth(appState.activeTool.type) ||
+ targetElements.some((element) =>
+ hasStrokeWidth(element.type),
+ )) &&
+ renderAction("changeStrokeWidth")}
+ {(hasStrokeStyle(appState.activeTool.type) ||
+ targetElements.some((element) =>
+ hasStrokeStyle(element.type),
+ )) && (
+ <>
+ {renderAction("changeStrokeStyle")}
+ {renderAction("changeSloppiness")}
+
+ )}
+ {(canChangeRoundness(appState.activeTool.type) ||
+ targetElements.some((element) =>
+ canChangeRoundness(element.type),
+ )) &&
+ renderAction("changeRoundness")}
+ {renderAction("changeOpacity")}
+
+
+ )}
+
+
+
{
+ if (open) {
+ setAppState({ openPopup: "compactArrowProperties" });
+ } else {
+ setAppState({ openPopup: null });
+ }
+ }}
+ >
+
+
+
+ {isOpen && (
+ {}}
+ >
+ {renderAction("changeArrowProperties")}
+
+ )}
+
+
+
{
+ if (open) {
+ if (appState.editingTextElement) {
+ saveCaretPosition();
+ }
+ setAppState({ openPopup: "compactTextProperties" });
+ } else {
+ setAppState({ openPopup: null });
+ if (appState.editingTextElement) {
+ restoreCaretPosition();
+ }
+ }
+ }}
+ >
+
+
+
+ {appState.openPopup === "compactTextProperties" && (
+ {
+ // Refocus text editor when popover closes with caret restoration
+ if (appState.editingTextElement) {
+ restoreCaretPosition();
+ }
+ }}
+ >
+
+ {(appState.activeTool.type === "text" ||
+ targetElements.some(isTextElement)) &&
+ renderAction("changeFontSize")}
+ {(appState.activeTool.type === "text" ||
+ suppportsHorizontalAlign(targetElements, elementsMap)) &&
+ renderAction("changeTextAlign")}
+ {shouldAllowVerticalAlign(targetElements, elementsMap) &&
+ renderAction("changeVerticalAlign")}
+
+
+ )}
+
+
+
{
+ if (open) {
+ setAppState({ openPopup: "compactOtherProperties" });
+ } else {
+ setAppState({ openPopup: null });
+ }
+ }}
+ >
+
+
+
+ {isOpen && (
+ {}}
+ >
+
+
+
+ {showAlignActions && !isSingleElementBoundContainer && (
+
+ )}
+
+
+
+ {renderAction("toggleLinearEditor")}
+
+ );
+};
+
+export const CompactShapeActions = ({
+ appState,
+ elementsMap,
+ renderAction,
+ app,
+ setAppState,
+}: {
+ appState: UIAppState;
+ elementsMap: NonDeletedElementsMap | NonDeletedSceneElementsMap;
+ renderAction: ActionManager["renderAction"];
+ app: AppClassProperties;
+ setAppState: React.Component["setState"];
+}) => {
+ const targetElements = getTargetElements(elementsMap, appState);
+ const { container } = useExcalidrawContainer();
+
+ const isEditingTextOrNewElement = Boolean(
+ appState.editingTextElement || appState.newElement,
+ );
+
+ const showLineEditorAction =
+ !appState.selectedLinearElement?.isEditing &&
+ targetElements.length === 1 &&
+ isLinearElement(targetElements[0]) &&
+ !isElbowArrow(targetElements[0]);
+
+ return (
+
+ {/* Stroke Color */}
+ {canChangeStrokeColor(appState, targetElements) && (
+
+ {renderAction("changeStrokeColor")}
+
+ )}
+
+ {/* Background Color */}
+ {canChangeBackgroundColor(appState, targetElements) && (
+
+ {renderAction("changeBackgroundColor")}
+
+ )}
+
+
+
+
+ {/* Linear Editor */}
+ {showLineEditorAction && (
+
+ {renderAction("toggleLinearEditor")}
+
+ )}
+
+ {/* Text Properties */}
+ {(appState.activeTool.type === "text" ||
+ targetElements.some(isTextElement)) && (
+ <>
+
+ {renderAction("changeFontFamily")}
+
+
+
+ )}
+
+ {/* Dedicated Copy Button */}
+ {!isEditingTextOrNewElement && targetElements.length > 0 && (
+
+ {renderAction("duplicateSelection")}
+
+ )}
+
+ {/* Dedicated Delete Button */}
+ {!isEditingTextOrNewElement && targetElements.length > 0 && (
+
+ {renderAction("deleteSelectedElements")}
+
+ )}
+
+
+
+ {canChangeStrokeColor(appState, targetElements) && (
+
+ {renderAction("changeStrokeColor")}
+
+ )}
+ {canChangeBackgroundColor(appState, targetElements) && (
+
+ {renderAction("changeBackgroundColor")}
+
+ )}
+
+ {/* Combined Arrow Properties */}
+
+ {/* Linear Editor */}
+
+ {/* Text Properties */}
+ {(appState.activeTool.type === "text" ||
+ targetElements.some(isTextElement)) && (
+ <>
+
+ {renderAction("changeFontFamily")}
+
+
+
+ )}
+
+ {/* Combined Other Actions */}
+
+
+
{renderAction("undo")}
+
{renderAction("redo")}
+ {showDuplicateOutside && (
+
+ {renderAction("duplicateSelection")}
+
+ )}
+ {showDeleteOutside && (
+
+ {renderAction("deleteSelectedElements")}
+
+ )}
+
Generate
@@ -438,16 +1247,14 @@ export const ShapesSwitcher = ({
{t("toolBar.mermaidToExcalidraw")}
{app.props.aiEnabled !== false && app.plugins.diagramToCode && (
- <>
- app.onMagicframeToolSelect()}
- icon={MagicIcon}
- data-testid="toolbar-magicframe"
- >
- {t("toolBar.magicframe")}
- AI
-
-
+ app.onMagicframeToolSelect()}
+ icon={MagicIcon}
+ data-testid="toolbar-magicframe"
+ >
+ {t("toolBar.magicframe")}
+ AI
+
)}
diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx
index cb40137d8d..0f8fd85e0f 100644
--- a/packages/excalidraw/components/App.tsx
+++ b/packages/excalidraw/components/App.tsx
@@ -41,9 +41,6 @@ import {
LINE_CONFIRM_THRESHOLD,
MAX_ALLOWED_FILE_BYTES,
MIME_TYPES,
- MQ_MAX_HEIGHT_LANDSCAPE,
- MQ_MAX_WIDTH_LANDSCAPE,
- MQ_MAX_WIDTH_PORTRAIT,
MQ_RIGHT_SIDEBAR_MIN_WIDTH,
POINTER_BUTTON,
ROUNDNESS,
@@ -83,7 +80,6 @@ import {
wrapEvent,
updateObject,
updateActiveTool,
- getShortcutKey,
isTransparent,
easeToValuesRAF,
muteFSAbortError,
@@ -101,6 +97,13 @@ import {
CLASSES,
Emitter,
MINIMUM_ARROW_SIZE,
+ DOUBLE_TAP_POSITION_THRESHOLD,
+ isMobileOrTablet,
+ MQ_MAX_MOBILE,
+ MQ_MIN_TABLET,
+ MQ_MAX_TABLET,
+ MQ_MAX_HEIGHT_LANDSCAPE,
+ MQ_MAX_WIDTH_LANDSCAPE,
} from "@excalidraw/common";
import {
@@ -169,7 +172,7 @@ import {
getContainerElement,
isValidTextContainer,
redrawTextBoundingBox,
- shouldShowBoundingBox,
+ hasBoundingBox,
getFrameChildren,
isCursorInFrame,
addElementsToFrame,
@@ -233,6 +236,9 @@ import {
hitElementBoundingBox,
isLineElement,
isSimpleArrow,
+ StoreDelta,
+ type ApplyToOptions,
+ positionElementsOnGrid,
} from "@excalidraw/element";
import type { LocalPoint, Radians } from "@excalidraw/math";
@@ -259,6 +265,7 @@ import type {
MagicGenerationData,
ExcalidrawArrowElement,
ExcalidrawElbowArrowElement,
+ SceneElementsMap,
} from "@excalidraw/element/types";
import type { Mutable, ValueOf } from "@excalidraw/common/utility-types";
@@ -318,7 +325,13 @@ import {
isEraserActive,
isHandToolActive,
} from "../appState";
-import { copyTextToSystemClipboard, parseClipboard } from "../clipboard";
+import {
+ copyTextToSystemClipboard,
+ parseClipboard,
+ parseDataTransferEvent,
+ type ParsedDataTransferFile,
+} from "../clipboard";
+
import { exportCanvas, loadFromBlob } from "../data";
import Library, { distributeLibraryItemsOnSquareGrid } from "../data/library";
import { restore, restoreElements } from "../data/restore";
@@ -340,7 +353,6 @@ import {
generateIdFromFile,
getDataURL,
getDataURL_sync,
- getFileFromEvent,
ImageURLToFile,
isImageFileHandle,
isSupportedImageFile,
@@ -398,6 +410,8 @@ import {
} from "../scene/scrollConstraints";
import { EraserTrail } from "../eraser";
+import { getShortcutKey } from "../shortcut";
+
import ConvertElementTypePopup, {
getConversionTypeFromElements,
convertElementTypePopupAtom,
@@ -427,12 +441,14 @@ import { findShapeByKey } from "./shapes";
import UnlockPopup from "./UnlockPopup";
+import type { ExcalidrawLibraryIds } from "../data/types";
+
import type {
RenderInteractiveSceneCallback,
ScrollBars,
} from "../scene/types";
-import type { PastedMixedContent } from "../clipboard";
+import type { ClipboardData, PastedMixedContent } from "../clipboard";
import type { ExportedElements } from "../data";
import type { ContextMenuItems } from "./ContextMenu";
import type { FileSystemHandle } from "../data/filesystem";
@@ -535,6 +551,7 @@ export const useExcalidrawActionManager = () =>
let didTapTwice: boolean = false;
let tappedTwiceTimer = 0;
+let firstTapPosition: { x: number; y: number } | null = null;
let isHoldingSpace: boolean = false;
let isPanning: boolean = false;
let isDraggingScrollBar: boolean = false;
@@ -710,6 +727,7 @@ class App extends React.Component {
if (excalidrawAPI) {
const api: ExcalidrawImperativeAPI = {
updateScene: this.updateScene,
+ applyDeltas: this.applyDeltas,
mutateElement: this.mutateElement,
updateLibrary: this.library.updateLibrary,
addFiles: this.addFiles,
@@ -1519,7 +1537,7 @@ class App extends React.Component {
public render() {
const selectedElements = this.scene.getSelectedElements(this.state);
- const { renderTopRightUI, renderCustomStats } = this.props;
+ const { renderTopRightUI, renderTopLeftUI, renderCustomStats } = this.props;
const sceneNonce = this.scene.getSceneNonce();
const { elementsMap, visibleElements } =
@@ -1605,6 +1623,7 @@ class App extends React.Component {
onPenModeToggle={this.togglePenMode}
onHandToolToggle={this.onHandToolToggle}
langCode={getLanguage().code}
+ renderTopLeftUI={renderTopLeftUI}
renderTopRightUI={renderTopRightUI}
renderCustomStats={renderCustomStats}
showExitZenModeBtn={
@@ -1616,7 +1635,8 @@ class App extends React.Component {
renderWelcomeScreen={
!this.state.isLoading &&
this.state.showWelcomeScreen &&
- this.state.activeTool.type === "selection" &&
+ this.state.activeTool.type ===
+ this.state.preferredSelectionTool.type &&
!this.state.zenModeEnabled &&
!this.scene.getElementsIncludingDeleted().length
}
@@ -2356,7 +2376,19 @@ class App extends React.Component {
},
};
}
- const scene = restore(initialData, null, null, { repairBindings: true });
+ const scene = restore(initialData, null, null, {
+ repairBindings: true,
+ deleteInvisibleElements: true,
+ });
+ const activeTool = scene.appState.activeTool;
+
+ if (!scene.appState.preferredSelectionTool.initialized) {
+ scene.appState.preferredSelectionTool = {
+ type: this.device.editor.isMobile ? "lasso" : "selection",
+ initialized: true,
+ };
+ }
+
scene.appState = {
...scene.appState,
theme: this.props.theme || scene.appState.theme,
@@ -2366,12 +2398,18 @@ class App extends React.Component {
// with a library install link, which should auto-open the library)
openSidebar: scene.appState?.openSidebar || this.state.openSidebar,
activeTool:
- scene.appState.activeTool.type === "image"
- ? { ...scene.appState.activeTool, type: "selection" }
+ activeTool.type === "image" ||
+ activeTool.type === "lasso" ||
+ activeTool.type === "selection"
+ ? {
+ ...activeTool,
+ type: scene.appState.preferredSelectionTool.type,
+ }
: scene.appState.activeTool,
isLoading: false,
toast: this.state.toast,
};
+
if (this.props.scrollConstraints) {
scene.appState = {
...scene.appState,
@@ -2414,25 +2452,32 @@ class App extends React.Component {
private isMobileBreakpoint = (width: number, height: number) => {
return (
- width < MQ_MAX_WIDTH_PORTRAIT ||
+ width <= MQ_MAX_MOBILE ||
(height < MQ_MAX_HEIGHT_LANDSCAPE && width < MQ_MAX_WIDTH_LANDSCAPE)
);
};
+ private 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;
+ };
+
private refreshViewportBreakpoints = () => {
const container = this.excalidrawContainerRef.current;
if (!container) {
return;
}
- const { clientWidth: viewportWidth, clientHeight: viewportHeight } =
- document.body;
+ const { width: editorWidth, height: editorHeight } =
+ container.getBoundingClientRect();
const prevViewportState = this.device.viewport;
const nextViewportState = updateObject(prevViewportState, {
- isLandscape: viewportWidth > viewportHeight,
- isMobile: this.isMobileBreakpoint(viewportWidth, viewportHeight),
+ isLandscape: editorWidth > editorHeight,
+ isMobile: this.isMobileBreakpoint(editorWidth, editorHeight),
});
if (prevViewportState !== nextViewportState) {
@@ -2463,6 +2508,30 @@ class App extends React.Component {
canFitSidebar: editorWidth > sidebarBreakpoint,
});
+ const stylesPanelMode =
+ // NOTE: we could also remove the isMobileOrTablet check here and
+ // always switch to compact mode when the editor is narrow (e.g. < MQ_MIN_WIDTH_DESKTOP)
+ // but not too narrow (> MQ_MAX_WIDTH_MOBILE)
+ this.isTabletBreakpoint(editorWidth, editorHeight) && isMobileOrTablet()
+ ? "compact"
+ : this.isMobileBreakpoint(editorWidth, editorHeight)
+ ? "mobile"
+ : "full";
+
+ // also check if we need to update the app state
+ this.setState((prevState) => ({
+ stylesPanelMode,
+ // reset to box selection mode if the UI changes to full
+ // where you'd not be able to change the mode yourself currently
+ preferredSelectionTool:
+ stylesPanelMode === "full"
+ ? {
+ type: "selection",
+ initialized: true,
+ }
+ : prevState.preferredSelectionTool,
+ }));
+
if (prevEditorState !== nextEditorState) {
this.device = { ...this.device, editor: nextEditorState };
return true;
@@ -3010,6 +3079,7 @@ class App extends React.Component {
private static resetTapTwice() {
didTapTwice = false;
+ firstTapPosition = null;
}
private onTouchStart = (event: TouchEvent) => {
@@ -3020,6 +3090,13 @@ class App extends React.Component {
if (!didTapTwice) {
didTapTwice = true;
+
+ if (event.touches.length === 1) {
+ firstTapPosition = {
+ x: event.touches[0].clientX,
+ y: event.touches[0].clientY,
+ };
+ }
clearTimeout(tappedTwiceTimer);
tappedTwiceTimer = window.setTimeout(
App.resetTapTwice,
@@ -3027,15 +3104,29 @@ class App extends React.Component {
);
return;
}
- // insert text only if we tapped twice with a single finger
+
+ // insert text only if we tapped twice with a single finger at approximately the same position
// event.touches.length === 1 will also prevent inserting text when user's zooming
- if (didTapTwice && event.touches.length === 1) {
+ if (didTapTwice && event.touches.length === 1 && firstTapPosition) {
const touch = event.touches[0];
- // @ts-ignore
- this.handleCanvasDoubleClick({
- clientX: touch.clientX,
- clientY: touch.clientY,
- });
+ const distance = pointDistance(
+ pointFrom(touch.clientX, touch.clientY),
+ pointFrom(firstTapPosition.x, firstTapPosition.y),
+ );
+
+ // only create text if the second tap is within the threshold of the first tap
+ // this prevents accidental text creation during dragging/selection
+ if (distance <= DOUBLE_TAP_POSITION_THRESHOLD) {
+ // end lasso trail and deselect elements just in case
+ this.lassoTrail.endPath();
+ this.deselectElements();
+
+ // @ts-ignore
+ this.handleCanvasDoubleClick({
+ clientX: touch.clientX,
+ clientY: touch.clientY,
+ });
+ }
didTapTwice = false;
clearTimeout(tappedTwiceTimer);
}
@@ -3063,7 +3154,166 @@ class App extends React.Component {
}
};
- // TODO: this is so spaghetti, we should refactor it and cover it with tests
+ // TODO: Cover with tests
+ private async insertClipboardContent(
+ data: ClipboardData,
+ dataTransferFiles: ParsedDataTransferFile[],
+ isPlainPaste: boolean,
+ ) {
+ const { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords(
+ {
+ clientX: this.lastViewportPosition.x,
+ clientY: this.lastViewportPosition.y,
+ },
+ this.state,
+ );
+
+ // ------------------- Error -------------------
+ if (data.errorMessage) {
+ this.setState({ errorMessage: data.errorMessage });
+ return;
+ }
+
+ // ------------------- Mixed content with no files -------------------
+ if (dataTransferFiles.length === 0 && !isPlainPaste && data.mixedContent) {
+ await this.addElementsFromMixedContentPaste(data.mixedContent, {
+ isPlainPaste,
+ sceneX,
+ sceneY,
+ });
+ return;
+ }
+
+ // ------------------- Spreadsheet -------------------
+ if (data.spreadsheet && !isPlainPaste) {
+ this.setState({
+ pasteDialog: {
+ data: data.spreadsheet,
+ shown: true,
+ },
+ });
+ return;
+ }
+
+ // ------------------- Images or SVG code -------------------
+ const imageFiles = dataTransferFiles.map((data) => data.file);
+
+ if (imageFiles.length === 0 && data.text && !isPlainPaste) {
+ const trimmedText = data.text.trim();
+ if (trimmedText.startsWith("")) {
+ // ignore SVG validation/normalization which will be done during image
+ // initialization
+ imageFiles.push(SVGStringToFile(trimmedText));
+ }
+ }
+
+ if (imageFiles.length > 0) {
+ if (this.isToolSupported("image")) {
+ await this.insertImages(imageFiles, sceneX, sceneY);
+ } else {
+ this.setState({ errorMessage: t("errors.imageToolNotSupported") });
+ }
+ return;
+ }
+
+ // ------------------- Elements -------------------
+ if (data.elements) {
+ const elements = (
+ data.programmaticAPI
+ ? convertToExcalidrawElements(
+ data.elements as ExcalidrawElementSkeleton[],
+ )
+ : data.elements
+ ) as readonly ExcalidrawElement[];
+ // TODO: remove formatting from elements if isPlainPaste
+ this.addElementsFromPasteOrLibrary({
+ elements,
+ files: data.files || null,
+ position: isMobileOrTablet() ? "center" : "cursor",
+ retainSeed: isPlainPaste,
+ });
+ return;
+ }
+
+ // ------------------- Only textual stuff remaining -------------------
+ if (!data.text) {
+ return;
+ }
+
+ // ------------------- Successful Mermaid -------------------
+ if (!isPlainPaste && isMaybeMermaidDefinition(data.text)) {
+ const api = await import("@excalidraw/mermaid-to-excalidraw");
+ try {
+ const { elements: skeletonElements, files } =
+ await api.parseMermaidToExcalidraw(data.text);
+
+ const elements = convertToExcalidrawElements(skeletonElements, {
+ regenerateIds: true,
+ });
+
+ this.addElementsFromPasteOrLibrary({
+ elements,
+ files,
+ position: isMobileOrTablet() ? "center" : "cursor",
+ });
+
+ return;
+ } catch (err: any) {
+ console.warn(
+ `parsing pasted text as mermaid definition failed: ${err.message}`,
+ );
+ }
+ }
+
+ // ------------------- Pure embeddable URLs -------------------
+ const nonEmptyLines = normalizeEOL(data.text)
+ .split(/\n+/)
+ .map((s) => s.trim())
+ .filter(Boolean);
+ const embbeddableUrls = nonEmptyLines
+ .map((str) => maybeParseEmbedSrc(str))
+ .filter(
+ (string) =>
+ embeddableURLValidator(string, this.props.validateEmbeddable) &&
+ (/^(http|https):\/\/[^\s/$.?#].[^\s]*$/.test(string) ||
+ getEmbedLink(string)?.type === "video"),
+ );
+
+ if (
+ !isPlainPaste &&
+ embbeddableUrls.length > 0 &&
+ embbeddableUrls.length === nonEmptyLines.length
+ ) {
+ const embeddables: NonDeleted[] = [];
+ for (const url of embbeddableUrls) {
+ const prevEmbeddable: ExcalidrawEmbeddableElement | undefined =
+ embeddables[embeddables.length - 1];
+ const embeddable = this.insertEmbeddableElement({
+ sceneX: prevEmbeddable
+ ? prevEmbeddable.x + prevEmbeddable.width + 20
+ : sceneX,
+ sceneY,
+ link: normalizeLink(url),
+ });
+ if (embeddable) {
+ embeddables.push(embeddable);
+ }
+ }
+ if (embeddables.length) {
+ this.store.scheduleCapture();
+ this.setState({
+ selectedElementIds: Object.fromEntries(
+ embeddables.map((embeddable) => [embeddable.id, true]),
+ ),
+ });
+ }
+ return;
+ }
+
+ // ------------------- Text -------------------
+ this.addTextFromPaste(data.text, isPlainPaste);
+ }
+
public pasteFromClipboard = withBatchedUpdates(
async (event: ClipboardEvent) => {
const isPlainPaste = !!IS_PLAIN_PASTE;
@@ -3088,47 +3338,14 @@ class App extends React.Component {
return;
}
- const { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords(
- {
- clientX: this.lastViewportPosition.x,
- clientY: this.lastViewportPosition.y,
- },
- this.state,
- );
-
// must be called in the same frame (thus before any awaits) as the paste
// event else some browsers (FF...) will clear the clipboardData
// (something something security)
- let file = event?.clipboardData?.files[0];
- const data = await parseClipboard(event, isPlainPaste);
- if (!file && !isPlainPaste) {
- if (data.mixedContent) {
- return this.addElementsFromMixedContentPaste(data.mixedContent, {
- isPlainPaste,
- sceneX,
- sceneY,
- });
- } else if (data.text) {
- const string = data.text.trim();
- if (string.startsWith("")) {
- // ignore SVG validation/normalization which will be done during image
- // initialization
- file = SVGStringToFile(string);
- }
- }
- }
+ const dataTransferList = await parseDataTransferEvent(event);
- // prefer spreadsheet data over image file (MS Office/Libre Office)
- if (isSupportedImageFile(file) && !data.spreadsheet) {
- if (!this.isToolSupported("image")) {
- this.setState({ errorMessage: t("errors.imageToolNotSupported") });
- return;
- }
+ const filesList = dataTransferList.getFiles();
- this.createImageElement({ sceneX, sceneY, imageFile: file });
-
- return;
- }
+ const data = await parseClipboard(dataTransferList, isPlainPaste);
if (this.props.onPaste) {
try {
@@ -3140,106 +3357,12 @@ class App extends React.Component {
}
}
- if (data.errorMessage) {
- this.setState({ errorMessage: data.errorMessage });
- } else if (data.spreadsheet && !isPlainPaste) {
- this.setState({
- pasteDialog: {
- data: data.spreadsheet,
- shown: true,
- },
- });
- } else if (data.elements) {
- const elements = (
- data.programmaticAPI
- ? convertToExcalidrawElements(
- data.elements as ExcalidrawElementSkeleton[],
- )
- : data.elements
- ) as readonly ExcalidrawElement[];
- // TODO remove formatting from elements if isPlainPaste
- this.addElementsFromPasteOrLibrary({
- elements,
- files: data.files || null,
- position: "cursor",
- retainSeed: isPlainPaste,
- });
- } else if (data.text) {
- if (data.text && isMaybeMermaidDefinition(data.text)) {
- const api = await import("@excalidraw/mermaid-to-excalidraw");
+ await this.insertClipboardContent(data, filesList, isPlainPaste);
- try {
- const { elements: skeletonElements, files } =
- await api.parseMermaidToExcalidraw(data.text);
-
- const elements = convertToExcalidrawElements(skeletonElements, {
- regenerateIds: true,
- });
-
- this.addElementsFromPasteOrLibrary({
- elements,
- files,
- position: "cursor",
- });
-
- return;
- } catch (err: any) {
- console.warn(
- `parsing pasted text as mermaid definition failed: ${err.message}`,
- );
- }
- }
-
- const nonEmptyLines = normalizeEOL(data.text)
- .split(/\n+/)
- .map((s) => s.trim())
- .filter(Boolean);
-
- const embbeddableUrls = nonEmptyLines
- .map((str) => maybeParseEmbedSrc(str))
- .filter((string) => {
- return (
- embeddableURLValidator(string, this.props.validateEmbeddable) &&
- (/^(http|https):\/\/[^\s/$.?#].[^\s]*$/.test(string) ||
- getEmbedLink(string)?.type === "video")
- );
- });
-
- if (
- !IS_PLAIN_PASTE &&
- embbeddableUrls.length > 0 &&
- // if there were non-embeddable text (lines) mixed in with embeddable
- // urls, ignore and paste as text
- embbeddableUrls.length === nonEmptyLines.length
- ) {
- const embeddables: NonDeleted[] = [];
- for (const url of embbeddableUrls) {
- const prevEmbeddable: ExcalidrawEmbeddableElement | undefined =
- embeddables[embeddables.length - 1];
- const embeddable = this.insertEmbeddableElement({
- sceneX: prevEmbeddable
- ? prevEmbeddable.x + prevEmbeddable.width + 20
- : sceneX,
- sceneY,
- link: normalizeLink(url),
- });
- if (embeddable) {
- embeddables.push(embeddable);
- }
- }
- if (embeddables.length) {
- this.store.scheduleCapture();
- this.setState({
- selectedElementIds: Object.fromEntries(
- embeddables.map((embeddable) => [embeddable.id, true]),
- ),
- });
- }
- return;
- }
- this.addTextFromPaste(data.text, isPlainPaste);
- }
- this.setActiveTool({ type: "selection" });
+ this.setActiveTool(
+ { type: this.state.preferredSelectionTool.type },
+ true,
+ );
event?.preventDefault();
},
);
@@ -3251,7 +3374,9 @@ class App extends React.Component {
retainSeed?: boolean;
fitToContent?: boolean;
}) => {
- const elements = restoreElements(opts.elements, null, undefined);
+ const elements = restoreElements(opts.elements, null, {
+ deleteInvisibleElements: true,
+ });
const [minX, minY, maxX, maxY] = getCommonBounds(elements);
const elementsCenterX = distance(minX, maxX) / 2;
@@ -3383,7 +3508,7 @@ class App extends React.Component {
}
},
);
- this.setActiveTool({ type: "selection" });
+ this.setActiveTool({ type: this.state.preferredSelectionTool.type }, true);
if (opts.fitToContent) {
this.scrollToContent(duplicatedElements, {
@@ -3426,45 +3551,11 @@ class App extends React.Component {
}
}),
);
- let y = sceneY;
- let firstImageYOffsetDone = false;
- const nextSelectedIds: Record = {};
- for (const response of responses) {
- if (response.file) {
- const initializedImageElement = await this.createImageElement({
- sceneX,
- sceneY: y,
- imageFile: response.file,
- });
-
- if (initializedImageElement) {
- // vertically center first image in the batch
- if (!firstImageYOffsetDone) {
- firstImageYOffsetDone = true;
- y -= initializedImageElement.height / 2;
- }
- // hack to reset the `y` coord because we vertically center during
- // insertImageElement
- this.scene.mutateElement(
- initializedImageElement,
- { y },
- { informMutation: false, isDragging: false },
- );
-
- y = initializedImageElement.y + initializedImageElement.height + 25;
-
- nextSelectedIds[initializedImageElement.id] = true;
- }
- }
- }
-
- this.setState({
- selectedElementIds: makeNextSelectedElementIds(
- nextSelectedIds,
- this.state,
- ),
- });
+ const imageFiles = responses
+ .filter((response): response is { file: File } => !!response.file)
+ .map((response) => response.file);
+ await this.insertImages(imageFiles, sceneX, sceneY);
const error = responses.find((response) => !!response.errorMessage);
if (error && error.errorMessage) {
this.setState({ errorMessage: error.errorMessage });
@@ -3629,7 +3720,7 @@ class App extends React.Component {
...updateActiveTool(
this.state,
prevState.activeTool.locked
- ? { type: "selection" }
+ ? { type: this.state.preferredSelectionTool.type }
: prevState.activeTool,
),
locked: !prevState.activeTool.locked,
@@ -4098,7 +4189,12 @@ class App extends React.Component {
}
if (appState) {
- this.setState(appState);
+ this.setState({
+ ...appState,
+ // keep existing stylesPanelMode as it needs to be preserved
+ // or set at startup
+ stylesPanelMode: this.state.stylesPanelMode,
+ } as Pick | null);
}
if (elements) {
@@ -4111,6 +4207,27 @@ class App extends React.Component {
},
);
+ public applyDeltas = (
+ deltas: StoreDelta[],
+ options?: ApplyToOptions,
+ ): [SceneElementsMap, AppState, boolean] => {
+ // squash all deltas together, starting with a fresh new delta instance
+ const aggregatedDelta = StoreDelta.squash(...deltas);
+
+ // create new instance of elements map & appState, so we don't accidentaly mutate existing ones
+ const nextAppState = { ...this.state };
+ const nextElements = new Map(
+ this.scene.getElementsMapIncludingDeleted(),
+ ) as SceneElementsMap;
+
+ return StoreDelta.applyTo(
+ aggregatedDelta,
+ nextElements,
+ nextAppState,
+ options,
+ );
+ };
+
public mutateElement = >(
element: TElement,
updates: ElementUpdate,
@@ -4648,7 +4765,7 @@ class App extends React.Component {
!this.state.selectionElement &&
!this.state.selectedElementsAreBeingDragged
) {
- const shape = findShapeByKey(event.key);
+ const shape = findShapeByKey(event.key, this);
if (shape) {
if (this.state.activeTool.type !== shape) {
trackEvent(
@@ -4741,7 +4858,7 @@ class App extends React.Component {
if (event.key === KEYS.K && !event.altKey && !event[KEYS.CTRL_OR_CMD]) {
if (this.state.activeTool.type === "laser") {
- this.setActiveTool({ type: "selection" });
+ this.setActiveTool({ type: this.state.preferredSelectionTool.type });
} else {
this.setActiveTool({ type: "laser" });
}
@@ -4907,7 +5024,7 @@ class App extends React.Component {
this.setState({ suggestedBindings: [] });
}
if (nextActiveTool.type === "image") {
- this.onImageAction();
+ this.onImageToolbarButtonClick();
}
this.setState((prevState) => {
@@ -5111,17 +5228,8 @@ class App extends React.Component {
}),
onSubmit: withBatchedUpdates(({ viaKeyboard, nextOriginalText }) => {
const isDeleted = !nextOriginalText.trim();
+ updateElement(nextOriginalText, isDeleted);
- if (isDeleted && !isExistingElement) {
- // let's just remove the element from the scene, as it's an empty just created text element
- this.scene.replaceAllElements(
- this.scene
- .getElementsIncludingDeleted()
- .filter((x) => x.id !== element.id),
- );
- } else {
- updateElement(nextOriginalText, isDeleted);
- }
// select the created text element only if submitting via keyboard
// (when submitting via click it should act as signal to deselect)
if (!isDeleted && viaKeyboard) {
@@ -5145,15 +5253,16 @@ class App extends React.Component {
}));
});
}
+
if (isDeleted) {
fixBindingsAfterDeletion(this.scene.getNonDeletedElements(), [
element,
]);
}
- // we need to record either way, whether the text element was added or removed
- // since we need to sync this delta to other clients, otherwise it would end up with inconsistencies
- this.store.scheduleCapture();
+ if (!isDeleted || isExistingElement) {
+ this.store.scheduleCapture();
+ }
flushSync(() => {
this.setState({
@@ -5338,7 +5447,7 @@ class App extends React.Component {
if (
considerBoundingBox &&
this.state.selectedElementIds[element.id] &&
- shouldShowBoundingBox([element], this.state)
+ hasBoundingBox([element], this.state)
) {
// if hitting the bounding box, return early
// but if not, we should check for other cases as well (e.g. frame name)
@@ -5600,7 +5709,7 @@ class App extends React.Component {
return;
}
// we should only be able to double click when mode is selection
- if (this.state.activeTool.type !== "selection") {
+ if (this.state.activeTool.type !== this.state.preferredSelectionTool.type) {
return;
}
@@ -5892,8 +6001,9 @@ class App extends React.Component {
const elementsMap = this.scene.getNonDeletedElementsMap();
const frames = this.scene
.getNonDeletedFramesLikes()
- .filter((frame): frame is ExcalidrawFrameLikeElement =>
- isCursorInFrame(sceneCoords, frame, elementsMap),
+ .filter(
+ (frame): frame is ExcalidrawFrameLikeElement =>
+ !frame.locked && isCursorInFrame(sceneCoords, frame, elementsMap),
);
return frames.length ? frames[frames.length - 1] : null;
@@ -6211,6 +6321,7 @@ class App extends React.Component {
if (
hasDeselectedButton ||
(this.state.activeTool.type !== "selection" &&
+ this.state.activeTool.type !== "lasso" &&
this.state.activeTool.type !== "text" &&
this.state.activeTool.type !== "eraser")
) {
@@ -6239,7 +6350,13 @@ class App extends React.Component {
(!this.state.selectedLinearElement ||
this.state.selectedLinearElement.hoverPointIndex === -1) &&
this.state.openDialog?.name !== "elementLinkSelector" &&
- !(selectedElements.length === 1 && isElbowArrow(selectedElements[0]))
+ !(selectedElements.length === 1 && isElbowArrow(selectedElements[0])) &&
+ // HACK: Disable transform handles for linear elements on mobile until a
+ // better way of showing them is found
+ !(
+ isLinearElement(selectedElements[0]) &&
+ (isMobileOrTablet() || selectedElements[0].points.length === 2)
+ )
) {
const elementWithTransformHandleType =
getElementWithTransformHandleType(
@@ -6373,7 +6490,12 @@ class App extends React.Component {
!isElbowArrow(hitElement) ||
!(hitElement.startBinding || hitElement.endBinding)
) {
- setCursor(this.interactiveCanvas, CURSOR_TYPE.MOVE);
+ if (
+ this.state.activeTool.type !== "lasso" ||
+ selectedElements.length > 0
+ ) {
+ setCursor(this.interactiveCanvas, CURSOR_TYPE.MOVE);
+ }
if (this.state.activeEmbeddable?.state === "hover") {
this.setState({ activeEmbeddable: null });
}
@@ -6490,7 +6612,12 @@ class App extends React.Component {
!isElbowArrow(element) ||
!(element.startBinding || element.endBinding)
) {
- setCursor(this.interactiveCanvas, CURSOR_TYPE.MOVE);
+ if (
+ this.state.activeTool.type !== "lasso" ||
+ Object.keys(this.state.selectedElementIds).length > 0
+ ) {
+ setCursor(this.interactiveCanvas, CURSOR_TYPE.MOVE);
+ }
}
}
} else if (this.hitElement(scenePointerX, scenePointerY, element)) {
@@ -6499,7 +6626,12 @@ class App extends React.Component {
!isElbowArrow(element) ||
!(element.startBinding || element.endBinding)
) {
- setCursor(this.interactiveCanvas, CURSOR_TYPE.MOVE);
+ if (
+ this.state.activeTool.type !== "lasso" ||
+ Object.keys(this.state.selectedElementIds).length > 0
+ ) {
+ setCursor(this.interactiveCanvas, CURSOR_TYPE.MOVE);
+ }
}
}
@@ -6576,6 +6708,10 @@ class App extends React.Component {
this.setAppState({ snapLines: [] });
}
+ if (this.state.openPopup) {
+ this.setState({ openPopup: null });
+ }
+
this.updateGestureOnPointerDown(event);
// if dragging element is freedraw and another pointerdown event occurs
@@ -6761,11 +6897,117 @@ class App extends React.Component {
}
if (this.state.activeTool.type === "lasso") {
- this.lassoTrail.startPath(
- pointerDownState.origin.x,
- pointerDownState.origin.y,
- event.shiftKey,
- );
+ const hitSelectedElement =
+ pointerDownState.hit.element &&
+ this.isASelectedElement(pointerDownState.hit.element);
+
+ if (
+ !pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements &&
+ !pointerDownState.resize.handleType &&
+ !hitSelectedElement
+ ) {
+ this.lassoTrail.startPath(
+ pointerDownState.origin.x,
+ pointerDownState.origin.y,
+ event.shiftKey,
+ );
+
+ // block dragging after lasso selection on PCs until the next pointer down
+ // (on mobile or tablet, we want to allow user to drag immediately)
+ pointerDownState.drag.blockDragging = !isMobileOrTablet();
+ }
+
+ // only for mobile or tablet, if we hit an element, select it immediately like normal selection
+ if (
+ isMobileOrTablet() &&
+ pointerDownState.hit.element &&
+ !hitSelectedElement
+ ) {
+ this.setState((prevState) => {
+ const nextSelectedElementIds: { [id: string]: true } = {
+ ...prevState.selectedElementIds,
+ [pointerDownState.hit.element!.id]: true,
+ };
+
+ const previouslySelectedElements: ExcalidrawElement[] = [];
+
+ Object.keys(prevState.selectedElementIds).forEach((id) => {
+ const element = this.scene.getElement(id);
+ element && previouslySelectedElements.push(element);
+ });
+
+ const hitElement = pointerDownState.hit.element!;
+
+ // if hitElement is frame-like, deselect all of its elements
+ // if they are selected
+ if (isFrameLikeElement(hitElement)) {
+ getFrameChildren(previouslySelectedElements, hitElement.id).forEach(
+ (element) => {
+ delete nextSelectedElementIds[element.id];
+ },
+ );
+ } else if (hitElement.frameId) {
+ // if hitElement is in a frame and its frame has been selected
+ // disable selection for the given element
+ if (nextSelectedElementIds[hitElement.frameId]) {
+ delete nextSelectedElementIds[hitElement.id];
+ }
+ } else {
+ // hitElement is neither a frame nor an element in a frame
+ // but since hitElement could be in a group with some frames
+ // this means selecting hitElement will have the frames selected as well
+ // because we want to keep the invariant:
+ // - frames and their elements are not selected at the same time
+ // we deselect elements in those frames that were previously selected
+
+ const groupIds = hitElement.groupIds;
+ const framesInGroups = new Set(
+ groupIds
+ .flatMap((gid) =>
+ getElementsInGroup(this.scene.getNonDeletedElements(), gid),
+ )
+ .filter((element) => isFrameLikeElement(element))
+ .map((frame) => frame.id),
+ );
+
+ if (framesInGroups.size > 0) {
+ previouslySelectedElements.forEach((element) => {
+ if (element.frameId && framesInGroups.has(element.frameId)) {
+ // deselect element and groups containing the element
+ delete nextSelectedElementIds[element.id];
+ element.groupIds
+ .flatMap((gid) =>
+ getElementsInGroup(
+ this.scene.getNonDeletedElements(),
+ gid,
+ ),
+ )
+ .forEach((element) => {
+ delete nextSelectedElementIds[element.id];
+ });
+ }
+ });
+ }
+ }
+
+ return {
+ ...selectGroupsForSelectedElements(
+ {
+ editingGroupId: prevState.editingGroupId,
+ selectedElementIds: nextSelectedElementIds,
+ },
+ this.scene.getNonDeletedElements(),
+ prevState,
+ this,
+ ),
+ showHyperlinkPopup:
+ hitElement.link || isEmbeddableElement(hitElement)
+ ? "info"
+ : false,
+ };
+ });
+ pointerDownState.hit.wasAddedToSelection = true;
+ }
} else if (this.state.activeTool.type === "text") {
this.handleTextOnPointerDown(event, pointerDownState);
} else if (
@@ -7145,6 +7387,7 @@ class App extends React.Component {
hasOccurred: false,
offset: null,
origin: { ...origin },
+ blockDragging: false,
},
eventListeners: {
onMove: null,
@@ -7220,7 +7463,10 @@ class App extends React.Component {
event: React.PointerEvent,
pointerDownState: PointerDownState,
): boolean => {
- if (this.state.activeTool.type === "selection") {
+ if (
+ this.state.activeTool.type === "selection" ||
+ this.state.activeTool.type === "lasso"
+ ) {
const elements = this.scene.getNonDeletedElements();
const elementsMap = this.scene.getNonDeletedElementsMap();
const selectedElements = this.scene.getSelectedElements(this.state);
@@ -7229,6 +7475,10 @@ class App extends React.Component {
selectedElements.length === 1 &&
!this.state.selectedLinearElement?.isEditing &&
!isElbowArrow(selectedElements[0]) &&
+ !(
+ isLinearElement(selectedElements[0]) &&
+ (isMobileOrTablet() || selectedElements[0].points.length === 2)
+ ) &&
!(
this.state.selectedLinearElement &&
this.state.selectedLinearElement.hoverPointIndex !== -1
@@ -7427,7 +7677,18 @@ class App extends React.Component {
// on CMD/CTRL, drill down to hit element regardless of groups etc.
if (event[KEYS.CTRL_OR_CMD]) {
if (event.altKey) {
- // ctrl + alt means we're lasso selecting
+ // ctrl + alt means we're lasso selecting - start lasso trail and switch to lasso tool
+
+ // Close any open dialogs that might interfere with lasso selection
+ if (this.state.openDialog?.name === "elementLinkSelector") {
+ this.setOpenDialog(null);
+ }
+ this.lassoTrail.startPath(
+ pointerDownState.origin.x,
+ pointerDownState.origin.y,
+ event.shiftKey,
+ );
+ this.setActiveTool({ type: "lasso", fromSelection: true });
return false;
}
if (!this.state.selectedElementIds[hitElement.id]) {
@@ -7648,7 +7909,9 @@ class App extends React.Component {
resetCursor(this.interactiveCanvas);
if (!this.state.activeTool.locked) {
this.setState({
- activeTool: updateActiveTool(this.state, { type: "selection" }),
+ activeTool: updateActiveTool(this.state, {
+ type: this.state.preferredSelectionTool.type,
+ }),
});
}
};
@@ -7815,16 +8078,14 @@ class App extends React.Component {
return element;
};
- private createImageElement = async ({
+ private newImagePlaceholder = ({
sceneX,
sceneY,
addToFrameUnderCursor = true,
- imageFile,
}: {
sceneX: number;
sceneY: number;
addToFrameUnderCursor?: boolean;
- imageFile: File;
}) => {
const [gridX, gridY] = getGridPoint(
sceneX,
@@ -7843,7 +8104,7 @@ class App extends React.Component {
const placeholderSize = 100 / this.state.zoom.value;
- const placeholderImageElement = newImageElement({
+ return newImageElement({
type: "image",
strokeColor: this.state.currentItemStrokeColor,
backgroundColor: this.state.currentItemBackgroundColor,
@@ -7860,13 +8121,6 @@ class App extends React.Component {
width: placeholderSize,
height: placeholderSize,
});
-
- const initializedImageElement = await this.insertImageElement(
- placeholderImageElement,
- imageFile,
- );
-
- return initializedImageElement;
};
private handleLinearElementOnPointerDown = (
@@ -8432,15 +8686,18 @@ class App extends React.Component {
event.shiftKey &&
this.state.selectedLinearElement.elementId ===
pointerDownState.hit.element?.id;
+
if (
(hasHitASelectedElement ||
pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements) &&
!isSelectingPointsInLineEditor &&
- this.state.activeTool.type !== "lasso"
+ !pointerDownState.drag.blockDragging
) {
const selectedElements = this.scene.getSelectedElements(this.state);
-
- if (selectedElements.every((element) => element.locked)) {
+ if (
+ selectedElements.length > 0 &&
+ selectedElements.every((element) => element.locked)
+ ) {
return;
}
@@ -8461,6 +8718,29 @@ class App extends React.Component {
// if elements should be deselected on pointerup
pointerDownState.drag.hasOccurred = true;
+ // prevent immediate dragging during lasso selection to avoid element displacement
+ // only allow dragging if we're not in the middle of lasso selection
+ // (on mobile, allow dragging if we hit an element)
+ if (
+ this.state.activeTool.type === "lasso" &&
+ this.lassoTrail.hasCurrentTrail &&
+ !(isMobileOrTablet() && pointerDownState.hit.element) &&
+ !this.state.activeTool.fromSelection
+ ) {
+ return;
+ }
+
+ // Clear lasso trail when starting to drag selected elements with lasso tool
+ // Only clear if we're actually dragging (not during lasso selection)
+ if (
+ this.state.activeTool.type === "lasso" &&
+ selectedElements.length > 0 &&
+ pointerDownState.drag.hasOccurred &&
+ !this.state.activeTool.fromSelection
+ ) {
+ this.lassoTrail.endPath();
+ }
+
// prevent dragging even if we're no longer holding cmd/ctrl otherwise
// it would have weird results (stuff jumping all over the screen)
// Checking for editingTextElement to avoid jump while editing on mobile #6503
@@ -9055,6 +9335,7 @@ class App extends React.Component {
): (event: PointerEvent) => void {
return withBatchedUpdates((childEvent: PointerEvent) => {
this.removePointer(childEvent);
+ pointerDownState.drag.blockDragging = false;
if (pointerDownState.eventListeners.onMove) {
pointerDownState.eventListeners.onMove.flush();
}
@@ -9343,7 +9624,7 @@ class App extends React.Component {
this.setState((prevState) => ({
newElement: null,
activeTool: updateActiveTool(this.state, {
- type: "selection",
+ type: this.state.preferredSelectionTool.type,
}),
selectedElementIds: makeNextSelectedElementIds(
{
@@ -9959,7 +10240,9 @@ class App extends React.Component {
this.setState({
newElement: null,
suggestedBindings: [],
- activeTool: updateActiveTool(this.state, { type: "selection" }),
+ activeTool: updateActiveTool(this.state, {
+ type: this.state.preferredSelectionTool.type,
+ }),
});
} else {
this.setState({
@@ -10159,64 +10442,7 @@ class App extends React.Component {
);
};
- /**
- * inserts image into elements array and rerenders
- */
- private insertImageElement = async (
- placeholderImageElement: ExcalidrawImageElement,
- imageFile: File,
- ) => {
- // we should be handling all cases upstream, but in case we forget to handle
- // a future case, let's throw here
- if (!this.isToolSupported("image")) {
- this.setState({ errorMessage: t("errors.imageToolNotSupported") });
- return;
- }
-
- this.scene.insertElement(placeholderImageElement);
-
- try {
- const initializedImageElement = await this.initializeImage(
- placeholderImageElement,
- imageFile,
- );
-
- const nextElements = this.scene
- .getElementsIncludingDeleted()
- .map((element) => {
- if (element.id === initializedImageElement.id) {
- return initializedImageElement;
- }
-
- return element;
- });
-
- this.updateScene({
- captureUpdate: CaptureUpdateAction.IMMEDIATELY,
- elements: nextElements,
- appState: {
- selectedElementIds: makeNextSelectedElementIds(
- { [initializedImageElement.id]: true },
- this.state,
- ),
- },
- });
-
- return initializedImageElement;
- } catch (error: any) {
- this.store.scheduleAction(CaptureUpdateAction.NEVER);
- this.scene.mutateElement(placeholderImageElement, {
- isDeleted: true,
- });
- this.actionManager.executeAction(actionFinalize);
- this.setState({
- errorMessage: error.message || t("errors.imageInsertError"),
- });
- return null;
- }
- };
-
- private onImageAction = async () => {
+ private onImageToolbarButtonClick = async () => {
try {
const clientX = this.state.width / 2 + this.state.offsetLeft;
const clientY = this.state.height / 2 + this.state.offsetTop;
@@ -10226,24 +10452,15 @@ class App extends React.Component {
this.state,
);
- const imageFile = await fileOpen({
+ const imageFiles = await fileOpen({
description: "Image",
extensions: Object.keys(
IMAGE_MIME_TYPES,
) as (keyof typeof IMAGE_MIME_TYPES)[],
+ multiple: true,
});
- await this.createImageElement({
- sceneX: x,
- sceneY: y,
- addToFrameUnderCursor: false,
- imageFile,
- });
-
- // avoid being batched (just in case)
- this.setState({}, () => {
- this.actionManager.executeAction(actionFinalize);
- });
+ this.insertImages(imageFiles, x, y);
} catch (error: any) {
if (error.name !== "AbortError") {
console.error(error);
@@ -10253,7 +10470,9 @@ class App extends React.Component {
this.setState(
{
newElement: null,
- activeTool: updateActiveTool(this.state, { type: "selection" }),
+ activeTool: updateActiveTool(this.state, {
+ type: this.state.preferredSelectionTool.type,
+ }),
},
() => {
this.actionManager.executeAction(actionFinalize);
@@ -10305,7 +10524,7 @@ class App extends React.Component {
if (erroredFiles.size) {
this.store.scheduleAction(CaptureUpdateAction.NEVER);
this.scene.replaceAllElements(
- elements.map((element) => {
+ this.scene.getElementsIncludingDeleted().map((element) => {
if (
isInitializedImageElement(element) &&
erroredFiles.has(element.fileId)
@@ -10438,84 +10657,174 @@ class App extends React.Component {
}
};
+ private insertImages = async (
+ imageFiles: File[],
+ sceneX: number,
+ sceneY: number,
+ ) => {
+ const gridPadding = 50 / this.state.zoom.value;
+ // Create, position, and insert placeholders
+ const placeholders = positionElementsOnGrid(
+ imageFiles.map(() => this.newImagePlaceholder({ sceneX, sceneY })),
+ sceneX,
+ sceneY,
+ gridPadding,
+ );
+ placeholders.forEach((el) => this.scene.insertElement(el));
+
+ // Create, position, insert and select initialized (replacing placeholders)
+ const initialized = await Promise.all(
+ placeholders.map(async (placeholder, i) => {
+ try {
+ return await this.initializeImage(
+ placeholder,
+ await normalizeFile(imageFiles[i]),
+ );
+ } catch (error: any) {
+ this.setState({
+ errorMessage: error.message || t("errors.imageInsertError"),
+ });
+ return newElementWith(placeholder, { isDeleted: true });
+ }
+ }),
+ );
+ const initializedMap = arrayToMap(initialized);
+
+ const positioned = positionElementsOnGrid(
+ initialized.filter((el) => !el.isDeleted),
+ sceneX,
+ sceneY,
+ gridPadding,
+ );
+ const positionedMap = arrayToMap(positioned);
+
+ const nextElements = this.scene
+ .getElementsIncludingDeleted()
+ .map((el) => positionedMap.get(el.id) ?? initializedMap.get(el.id) ?? el);
+
+ this.updateScene({
+ appState: {
+ selectedElementIds: makeNextSelectedElementIds(
+ Object.fromEntries(positioned.map((el) => [el.id, true])),
+ this.state,
+ ),
+ },
+ elements: nextElements,
+ captureUpdate: CaptureUpdateAction.IMMEDIATELY,
+ });
+
+ this.setState({}, () => {
+ // actionFinalize after all state values have been updated
+ this.actionManager.executeAction(actionFinalize);
+ });
+ };
+
private handleAppOnDrop = async (event: React.DragEvent) => {
- // must be retrieved first, in the same frame
- const { file, fileHandle } = await getFileFromEvent(event);
const { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords(
event,
this.state,
);
+ const dataTransferList = await parseDataTransferEvent(event);
- try {
- // if image tool not supported, don't show an error here and let it fall
- // through so we still support importing scene data from images. If no
- // scene data encoded, we'll show an error then
- if (isSupportedImageFile(file) && this.isToolSupported("image")) {
- // first attempt to decode scene from the image if it's embedded
- // ---------------------------------------------------------------------
+ // must be retrieved first, in the same frame
+ const fileItems = dataTransferList.getFiles();
- if (file?.type === MIME_TYPES.png || file?.type === MIME_TYPES.svg) {
- try {
- const scene = await loadFromBlob(
- file,
- this.state,
- this.scene.getElementsIncludingDeleted(),
- fileHandle,
- );
- this.syncActionResult({
- ...scene,
- appState: {
- ...(scene.appState || this.state),
- isLoading: false,
- },
- replaceFiles: true,
- captureUpdate: CaptureUpdateAction.IMMEDIATELY,
- });
- return;
- } catch (error: any) {
- // Don't throw for image scene daa
- if (error.name !== "EncodingError") {
- throw new Error(t("alerts.couldNotLoadInvalidFile"));
- }
+ if (fileItems.length === 1) {
+ const { file, fileHandle } = fileItems[0];
+
+ if (
+ file &&
+ (file.type === MIME_TYPES.png || file.type === MIME_TYPES.svg)
+ ) {
+ try {
+ const scene = await loadFromBlob(
+ file,
+ this.state,
+ this.scene.getElementsIncludingDeleted(),
+ fileHandle,
+ );
+ this.syncActionResult({
+ ...scene,
+ appState: {
+ ...(scene.appState || this.state),
+ isLoading: false,
+ },
+ replaceFiles: true,
+ captureUpdate: CaptureUpdateAction.IMMEDIATELY,
+ });
+ return;
+ } catch (error: any) {
+ if (error.name !== "EncodingError") {
+ throw new Error(t("alerts.couldNotLoadInvalidFile"));
}
+ // if EncodingError, fall through to insert as regular image
}
-
- // if no scene is embedded or we fail for whatever reason, fall back
- // to importing as regular image
- // ---------------------------------------------------------------------
- this.createImageElement({ sceneX, sceneY, imageFile: file });
-
- return;
}
- } catch (error: any) {
- return this.setState({
- isLoading: false,
- errorMessage: error.message,
- });
}
- const libraryJSON = event.dataTransfer.getData(MIME_TYPES.excalidrawlib);
- if (libraryJSON && typeof libraryJSON === "string") {
+ const imageFiles = fileItems
+ .map((data) => data.file)
+ .filter((file) => isSupportedImageFile(file));
+
+ if (imageFiles.length > 0 && this.isToolSupported("image")) {
+ return this.insertImages(imageFiles, sceneX, sceneY);
+ }
+ const excalidrawLibrary_ids = dataTransferList.getData(
+ MIME_TYPES.excalidrawlibIds,
+ );
+ const excalidrawLibrary_data = dataTransferList.getData(
+ MIME_TYPES.excalidrawlib,
+ );
+ if (excalidrawLibrary_ids || excalidrawLibrary_data) {
try {
- const libraryItems = parseLibraryJSON(libraryJSON);
- this.addElementsFromPasteOrLibrary({
- elements: distributeLibraryItemsOnSquareGrid(libraryItems),
- position: event,
- files: null,
- });
+ let libraryItems: LibraryItems | null = null;
+ if (excalidrawLibrary_ids) {
+ const { itemIds } = JSON.parse(
+ excalidrawLibrary_ids,
+ ) as ExcalidrawLibraryIds;
+ const allLibraryItems = await this.library.getLatestLibrary();
+ libraryItems = allLibraryItems.filter((item) =>
+ itemIds.includes(item.id),
+ );
+ // legacy library dataTransfer format
+ } else if (excalidrawLibrary_data) {
+ libraryItems = parseLibraryJSON(excalidrawLibrary_data);
+ }
+ if (libraryItems?.length) {
+ libraryItems = libraryItems.map((item) => ({
+ ...item,
+ // #6465
+ elements: duplicateElements({
+ type: "everything",
+ elements: item.elements,
+ randomizeSeed: true,
+ }).duplicatedElements,
+ }));
+
+ this.addElementsFromPasteOrLibrary({
+ elements: distributeLibraryItemsOnSquareGrid(libraryItems),
+ position: event,
+ files: null,
+ });
+ }
} catch (error: any) {
this.setState({ errorMessage: error.message });
}
return;
}
- if (file) {
- // Attempt to parse an excalidraw/excalidrawlib file
- await this.loadFileToCanvas(file, fileHandle);
+ if (fileItems.length > 0) {
+ const { file, fileHandle } = fileItems[0];
+ if (file) {
+ // Attempt to parse an excalidraw/excalidrawlib file
+ await this.loadFileToCanvas(file, fileHandle);
+ }
}
- if (event.dataTransfer?.types?.includes("text/plain")) {
- const text = event.dataTransfer?.getData("text");
+ const textItem = dataTransferList.findByType(MIME_TYPES.text);
+
+ if (textItem) {
+ const text = textItem.value;
if (
text &&
embeddableURLValidator(text, this.props.validateEmbeddable) &&
@@ -10626,7 +10935,7 @@ class App extends React.Component {
event.nativeEvent.pointerType === "pen" &&
// always allow if user uses a pen secondary button
event.button !== POINTER_BUTTON.SECONDARY)) &&
- this.state.activeTool.type !== "selection"
+ this.state.activeTool.type !== this.state.preferredSelectionTool.type
) {
return;
}
@@ -11080,6 +11389,17 @@ class App extends React.Component {
return [actionCopy, ...options];
}
+ const zIndexActions: ContextMenuItems =
+ this.state.stylesPanelMode === "full"
+ ? [
+ CONTEXT_MENU_SEPARATOR,
+ actionSendBackward,
+ actionBringForward,
+ actionSendToBack,
+ actionBringToFront,
+ ]
+ : [];
+
return [
CONTEXT_MENU_SEPARATOR,
actionCut,
@@ -11105,11 +11425,7 @@ class App extends React.Component {
actionUngroup,
CONTEXT_MENU_SEPARATOR,
actionAddToLibrary,
- CONTEXT_MENU_SEPARATOR,
- actionSendBackward,
- actionBringForward,
- actionSendToBack,
- actionBringToFront,
+ ...zIndexActions,
CONTEXT_MENU_SEPARATOR,
actionFlipHorizontal,
actionFlipVertical,
diff --git a/packages/excalidraw/components/ColorPicker/ColorInput.tsx b/packages/excalidraw/components/ColorPicker/ColorInput.tsx
index e5e6f3a771..557f9c1c00 100644
--- a/packages/excalidraw/components/ColorPicker/ColorInput.tsx
+++ b/packages/excalidraw/components/ColorPicker/ColorInput.tsx
@@ -1,8 +1,9 @@
import clsx from "clsx";
import { useCallback, useEffect, useRef, useState } from "react";
-import { KEYS, getShortcutKey } from "@excalidraw/common";
+import { KEYS } from "@excalidraw/common";
+import { getShortcutKey } from "../..//shortcut";
import { useAtom } from "../../editor-jotai";
import { t } from "../../i18n";
import { useDevice } from "../App";
diff --git a/packages/excalidraw/components/ColorPicker/ColorPicker.scss b/packages/excalidraw/components/ColorPicker/ColorPicker.scss
index 7a78395d6f..658a75dad7 100644
--- a/packages/excalidraw/components/ColorPicker/ColorPicker.scss
+++ b/packages/excalidraw/components/ColorPicker/ColorPicker.scss
@@ -7,6 +7,12 @@
}
}
+ .color-picker__title {
+ padding: 0 0.5rem;
+ font-size: 0.875rem;
+ text-align: left;
+ }
+
.color-picker__heading {
padding: 0 0.5rem;
font-size: 0.75rem;
@@ -22,6 +28,12 @@
@include isMobile {
max-width: 11rem;
}
+
+ &.color-picker-container--no-top-picks {
+ display: flex;
+ justify-content: center;
+ grid-template-columns: unset;
+ }
}
.color-picker__top-picks {
@@ -80,6 +92,16 @@
}
}
+ .color-picker__button-background {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ svg {
+ width: 100%;
+ height: 100%;
+ }
+ }
+
&.active {
.color-picker__button-outline {
position: absolute;
@@ -141,6 +163,15 @@
width: 1.625rem;
height: 1.625rem;
}
+
+ &.compact-sizing {
+ width: var(--mobile-action-button-size);
+ height: var(--mobile-action-button-size);
+ }
+
+ &.mobile-border {
+ border: 1px solid var(--mobile-color-border);
+ }
}
.color-picker__button__hotkey-label {
diff --git a/packages/excalidraw/components/ColorPicker/ColorPicker.tsx b/packages/excalidraw/components/ColorPicker/ColorPicker.tsx
index 270d61f4cd..238960fa0b 100644
--- a/packages/excalidraw/components/ColorPicker/ColorPicker.tsx
+++ b/packages/excalidraw/components/ColorPicker/ColorPicker.tsx
@@ -1,11 +1,12 @@
import * as Popover from "@radix-ui/react-popover";
import clsx from "clsx";
-import { useRef } from "react";
+import { useRef, useEffect } from "react";
import {
COLOR_OUTLINE_CONTRAST_THRESHOLD,
COLOR_PALETTE,
isTransparent,
+ isWritableElement,
} from "@excalidraw/common";
import type { ColorTuple, ColorPaletteCustom } from "@excalidraw/common";
@@ -18,7 +19,12 @@ import { useExcalidrawContainer } from "../App";
import { ButtonSeparator } from "../ButtonSeparator";
import { activeEyeDropperAtom } from "../EyeDropper";
import { PropertiesPopover } from "../PropertiesPopover";
-import { slashIcon } from "../icons";
+import { slashIcon, strokeIcon } from "../icons";
+import {
+ saveCaretPosition,
+ restoreCaretPosition,
+ temporarilyDisableTextEditorBlur,
+} from "../../hooks/useTextEditorFocus";
import { ColorInput } from "./ColorInput";
import { Picker } from "./Picker";
@@ -67,6 +73,7 @@ interface ColorPickerProps {
palette?: ColorPaletteCustom | null;
topPicks?: ColorTuple;
updateData: (formData?: any) => void;
+ compactMode?: boolean;
}
const ColorPickerPopupContent = ({
@@ -77,6 +84,8 @@ const ColorPickerPopupContent = ({
elements,
palette = COLOR_PALETTE,
updateData,
+ getOpenPopup,
+ appState,
}: Pick<
ColorPickerProps,
| "type"
@@ -86,7 +95,10 @@ const ColorPickerPopupContent = ({
| "elements"
| "palette"
| "updateData"
->) => {
+ | "appState"
+> & {
+ getOpenPopup: () => AppState["openPopup"];
+}) => {
const { container } = useExcalidrawContainer();
const [, setActiveColorPickerSection] = useAtom(activeColorPickerSectionAtom);
@@ -117,9 +129,13 @@ const ColorPickerPopupContent = ({
{
// refocus due to eye dropper
- focusPickerContent();
+ if (!isWritableElement(event.target)) {
+ focusPickerContent();
+ }
event.preventDefault();
}}
onPointerDownOutside={(event) => {
@@ -131,8 +147,23 @@ const ColorPickerPopupContent = ({
}
}}
onClose={() => {
- updateData({ openPopup: null });
+ // only clear if we're still the active popup (avoid racing with switch)
+ if (getOpenPopup() === type) {
+ updateData({ openPopup: null });
+ }
setActiveColorPickerSection(null);
+
+ // Refocus text editor when popover closes if we were editing text
+ if (appState.editingTextElement) {
+ setTimeout(() => {
+ const textEditor = document.querySelector(
+ ".excalidraw-wysiwyg",
+ ) as HTMLTextAreaElement;
+ if (textEditor) {
+ textEditor.focus();
+ }
+ }, 0);
+ }
}}
>
{palette ? (
@@ -141,7 +172,17 @@ const ColorPickerPopupContent = ({
palette={palette}
color={color}
onChange={(changedColor) => {
+ // Save caret position before color change if editing text
+ const savedSelection = appState.editingTextElement
+ ? saveCaretPosition()
+ : null;
+
onChange(changedColor);
+
+ // Restore caret position after color change if editing text
+ if (appState.editingTextElement && savedSelection) {
+ restoreCaretPosition(savedSelection);
+ }
}}
onEyeDropperToggle={(force) => {
setEyeDropperState((state) => {
@@ -168,12 +209,18 @@ const ColorPickerPopupContent = ({
if (eyeDropperState) {
setEyeDropperState(null);
} else {
+ // close explicitly on Escape
updateData({ openPopup: null });
}
}}
type={type}
elements={elements}
updateData={updateData}
+ showTitle={
+ appState.stylesPanelMode === "compact" ||
+ appState.stylesPanelMode === "mobile"
+ }
+ showHotKey={appState.stylesPanelMode !== "mobile"}
>
{colorInputJSX}
@@ -188,11 +235,32 @@ const ColorPickerTrigger = ({
label,
color,
type,
+ stylesPanelMode,
+ mode = "background",
+ onToggle,
+ editingTextElement,
}: {
color: string | null;
label: string;
type: ColorPickerType;
+ stylesPanelMode?: AppState["stylesPanelMode"];
+ mode?: "background" | "stroke";
+ onToggle: () => void;
+ editingTextElement?: boolean;
}) => {
+ const handleClick = (e: React.MouseEvent) => {
+ // use pointerdown so we run before outside-close logic
+ e.preventDefault();
+ e.stopPropagation();
+
+ // If editing text, temporarily disable the wysiwyg blur event
+ if (editingTextElement) {
+ temporarilyDisableTextEditorBlur();
+ }
+
+ onToggle();
+ };
+
return (
{!color && slashIcon}
+ {(stylesPanelMode === "compact" || stylesPanelMode === "mobile") &&
+ color &&
+ mode === "stroke" && (
+
+
+ {strokeIcon}
+
+
+ )}
);
};
@@ -225,24 +314,62 @@ export const ColorPicker = ({
updateData,
appState,
}: ColorPickerProps) => {
+ const openRef = useRef(appState.openPopup);
+ useEffect(() => {
+ openRef.current = appState.openPopup;
+ }, [appState.openPopup]);
+ const compactMode =
+ type !== "canvasBackground" &&
+ (appState.stylesPanelMode === "compact" ||
+ appState.stylesPanelMode === "mobile");
+
return (
-
-
-
+
+ {!compactMode && (
+
+ )}
+ {!compactMode &&
}
{
- updateData({ openPopup: open ? type : null });
+ if (open) {
+ updateData({ openPopup: type });
+ }
}}
>
{/* serves as an active color indicator as well */}
-
+ {
+ // atomic switch: if another popup is open, close it first, then open this one next tick
+ if (appState.openPopup === type) {
+ // toggle off on same trigger
+ updateData({ openPopup: null });
+ } else if (appState.openPopup) {
+ updateData({ openPopup: type });
+ } else {
+ // open this one
+ updateData({ openPopup: type });
+ }
+ }}
+ />
{/* popup content */}
{appState.openPopup === type && (
openRef.current}
+ appState={appState}
/>
)}
diff --git a/packages/excalidraw/components/ColorPicker/Picker.tsx b/packages/excalidraw/components/ColorPicker/Picker.tsx
index f784912f4c..9c48c58075 100644
--- a/packages/excalidraw/components/ColorPicker/Picker.tsx
+++ b/packages/excalidraw/components/ColorPicker/Picker.tsx
@@ -37,8 +37,10 @@ interface PickerProps {
palette: ColorPaletteCustom;
updateData: (formData?: any) => void;
children?: React.ReactNode;
+ showTitle?: boolean;
onEyeDropperToggle: (force?: boolean) => void;
onEscape: (event: React.KeyboardEvent | KeyboardEvent) => void;
+ showHotKey?: boolean;
}
export const Picker = React.forwardRef(
@@ -51,11 +53,21 @@ export const Picker = React.forwardRef(
palette,
updateData,
children,
+ showTitle,
onEyeDropperToggle,
onEscape,
+ showHotKey = true,
}: PickerProps,
ref,
) => {
+ const title = showTitle
+ ? type === "elementStroke"
+ ? t("labels.stroke")
+ : type === "elementBackground"
+ ? t("labels.background")
+ : null
+ : null;
+
const [customColors] = React.useState(() => {
if (type === "canvasBackground") {
return [];
@@ -154,6 +166,8 @@ export const Picker = React.forwardRef(
// to allow focusing by clicking but not by tabbing
tabIndex={-1}
>
+ {title &&
{title}
}
+
{!!customColors.length && (
@@ -175,12 +189,18 @@ export const Picker = React.forwardRef(
palette={palette}
onChange={onChange}
activeShade={activeShade}
+ showHotKey={showHotKey}
/>
{t("colorPicker.shades")}
-
+
{children}
diff --git a/packages/excalidraw/components/ColorPicker/PickerColorList.tsx b/packages/excalidraw/components/ColorPicker/PickerColorList.tsx
index 4fd6815e44..13928f0239 100644
--- a/packages/excalidraw/components/ColorPicker/PickerColorList.tsx
+++ b/packages/excalidraw/components/ColorPicker/PickerColorList.tsx
@@ -20,6 +20,7 @@ interface PickerColorListProps {
color: string | null;
onChange: (color: string) => void;
activeShade: number;
+ showHotKey?: boolean;
}
const PickerColorList = ({
@@ -27,6 +28,7 @@ const PickerColorList = ({
color,
onChange,
activeShade,
+ showHotKey = true,
}: PickerColorListProps) => {
const colorObj = getColorNameAndShadeFromColor({
color,
@@ -82,7 +84,7 @@ const PickerColorList = ({
key={key}
>
-
+ {showHotKey &&
}
);
})}
diff --git a/packages/excalidraw/components/ColorPicker/ShadeList.tsx b/packages/excalidraw/components/ColorPicker/ShadeList.tsx
index db33402b0c..2c17c57ede 100644
--- a/packages/excalidraw/components/ColorPicker/ShadeList.tsx
+++ b/packages/excalidraw/components/ColorPicker/ShadeList.tsx
@@ -16,9 +16,15 @@ interface ShadeListProps {
color: string | null;
onChange: (color: string) => void;
palette: ColorPaletteCustom;
+ showHotKey?: boolean;
}
-export const ShadeList = ({ color, onChange, palette }: ShadeListProps) => {
+export const ShadeList = ({
+ color,
+ onChange,
+ palette,
+ showHotKey,
+}: ShadeListProps) => {
const colorObj = getColorNameAndShadeFromColor({
color: color || "transparent",
palette,
@@ -67,7 +73,9 @@ export const ShadeList = ({ color, onChange, palette }: ShadeListProps) => {
}}
>
-
+ {showHotKey && (
+
+ )}
))}
diff --git a/packages/excalidraw/components/CommandPalette/CommandPalette.scss b/packages/excalidraw/components/CommandPalette/CommandPalette.scss
index 90db95db69..0a02c23b04 100644
--- a/packages/excalidraw/components/CommandPalette/CommandPalette.scss
+++ b/packages/excalidraw/components/CommandPalette/CommandPalette.scss
@@ -100,6 +100,19 @@ $verticalBreakpoint: 861px;
border-radius: var(--border-radius-lg);
cursor: pointer;
+ --icon-size: 1rem;
+
+ &.command-item-large {
+ height: 2.75rem;
+ --icon-size: 1.5rem;
+
+ .icon {
+ width: var(--icon-size);
+ height: var(--icon-size);
+ margin-right: 0.625rem;
+ }
+ }
+
&:active {
background-color: var(--color-surface-low);
}
@@ -130,9 +143,17 @@ $verticalBreakpoint: 861px;
}
.icon {
- width: 16px;
- height: 16px;
- margin-right: 6px;
+ width: var(--icon-size, 1rem);
+ height: var(--icon-size, 1rem);
+ margin-right: 0.375rem;
+
+ .library-item-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ width: 100%;
+ }
}
}
}
diff --git a/packages/excalidraw/components/CommandPalette/CommandPalette.tsx b/packages/excalidraw/components/CommandPalette/CommandPalette.tsx
index 3c6f110d27..2ef757d5c5 100644
--- a/packages/excalidraw/components/CommandPalette/CommandPalette.tsx
+++ b/packages/excalidraw/components/CommandPalette/CommandPalette.tsx
@@ -1,18 +1,19 @@
import clsx from "clsx";
import fuzzy from "fuzzy";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useMemo, useState } from "react";
import {
DEFAULT_SIDEBAR,
EVENT,
KEYS,
capitalizeString,
- getShortcutKey,
isWritableElement,
} from "@excalidraw/common";
import { actionToggleShapeSwitch } from "@excalidraw/excalidraw/actions/actionToggleShapeSwitch";
+import { getShortcutKey } from "@excalidraw/excalidraw/shortcut";
+
import type { MarkRequired } from "@excalidraw/common/utility-types";
import {
@@ -61,12 +62,21 @@ import { useStable } from "../../hooks/useStable";
import { Ellipsify } from "../Ellipsify";
-import * as defaultItems from "./defaultCommandPaletteItems";
+import {
+ distributeLibraryItemsOnSquareGrid,
+ libraryItemsAtom,
+} from "../../data/library";
+import {
+ useLibraryCache,
+ useLibraryItemSvg,
+} from "../../hooks/useLibraryItemSvg";
+
+import * as defaultItems from "./defaultCommandPaletteItems";
import "./CommandPalette.scss";
import type { CommandPaletteItem } from "./types";
-import type { AppProps, AppState, UIAppState } from "../../types";
+import type { AppProps, AppState, LibraryItem, UIAppState } from "../../types";
import type { ShortcutName } from "../../actions/shortcuts";
import type { TranslationKeys } from "../../i18n";
import type { Action } from "../../actions/types";
@@ -80,6 +90,7 @@ export const DEFAULT_CATEGORIES = {
editor: "Editor",
elements: "Elements",
links: "Links",
+ library: "Library",
};
const getCategoryOrder = (category: string) => {
@@ -207,6 +218,34 @@ function CommandPaletteInner({
appProps,
});
+ const [libraryItemsData] = useAtom(libraryItemsAtom);
+ const libraryCommands: CommandPaletteItem[] = useMemo(() => {
+ return (
+ libraryItemsData.libraryItems
+ ?.filter(
+ (libraryItem): libraryItem is MarkRequired
=>
+ !!libraryItem.name,
+ )
+ .map((libraryItem) => ({
+ label: libraryItem.name,
+ icon: (
+
+ ),
+ category: "Library",
+ order: getCategoryOrder("Library"),
+ haystack: deburr(libraryItem.name),
+ perform: () => {
+ app.onInsertElements(
+ distributeLibraryItemsOnSquareGrid([libraryItem]),
+ );
+ },
+ })) || []
+ );
+ }, [app, libraryItemsData.libraryItems]);
+
useEffect(() => {
// these props change often and we don't want them to re-run the effect
// which would renew `allCommands`, cascading down and resetting state.
@@ -438,7 +477,6 @@ function CommandPaletteInner({
},
perform: () => {
setAppState((prevState) => ({
- openMenu: prevState.openMenu === "shape" ? null : "shape",
openPopup: "elementStroke",
}));
},
@@ -458,7 +496,6 @@ function CommandPaletteInner({
},
perform: () => {
setAppState((prevState) => ({
- openMenu: prevState.openMenu === "shape" ? null : "shape",
openPopup: "elementBackground",
}));
},
@@ -588,8 +625,9 @@ function CommandPaletteInner({
setAllCommands(allCommands);
setLastUsed(
- allCommands.find((command) => command.label === lastUsed?.label) ??
- null,
+ [...allCommands, ...libraryCommands].find(
+ (command) => command.label === lastUsed?.label,
+ ) ?? null,
);
}
}, [
@@ -600,6 +638,7 @@ function CommandPaletteInner({
lastUsed?.label,
setLastUsed,
setAppState,
+ libraryCommands,
]);
const [commandSearch, setCommandSearch] = useState("");
@@ -796,9 +835,17 @@ function CommandPaletteInner({
return nextCommandsByCategory;
};
- let matchingCommands = allCommands
- .filter(isCommandAvailable)
- .sort((a, b) => a.order - b.order);
+ let matchingCommands =
+ commandSearch?.length > 1
+ ? [
+ ...allCommands
+ .filter(isCommandAvailable)
+ .sort((a, b) => a.order - b.order),
+ ...libraryCommands,
+ ]
+ : allCommands
+ .filter(isCommandAvailable)
+ .sort((a, b) => a.order - b.order);
const showLastUsed =
!commandSearch && lastUsed && isCommandAvailable(lastUsed);
@@ -822,14 +869,20 @@ function CommandPaletteInner({
);
matchingCommands = fuzzy
.filter(_query, matchingCommands, {
- extract: (command) => command.haystack,
+ extract: (command) => command.haystack ?? "",
})
.sort((a, b) => b.score - a.score)
.map((item) => item.original);
setCommandsByCategory(getNextCommandsByCategory(matchingCommands));
setCurrentCommand(matchingCommands[0] ?? null);
- }, [commandSearch, allCommands, isCommandAvailable, lastUsed]);
+ }, [
+ commandSearch,
+ allCommands,
+ isCommandAvailable,
+ lastUsed,
+ libraryCommands,
+ ]);
return (