smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: auto ordered imports (#9163)
All checks were successful
Tests / test (push) Successful in 4m38s
Details

Browse source
This commit is contained in:
Marcel Mraz 2025-03-12 15:23:31 +01:00 • committed by GitHub
parent 82b9a6b464
commit 21ffaf4d76
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
421 changed files with 3532 additions and 2763 deletions
Download patch file Download diff file Expand all files Collapse all files

9
packages/excalidraw/actions/actionAddToLibrary.ts
View file

@ -1,10 +1,11 @@
import { register } from "./register";
import { deepCopyElement } from "../element/newElement";
import { randomId } from "../random";
import { t } from "../i18n";
import { LIBRARY_DISABLED_TYPES } from "../constants";
import { deepCopyElement } from "../element/newElement";
import { t } from "../i18n";
import { randomId } from "../random";
import { CaptureUpdateAction } from "../store";
import { register } from "./register";
export const actionAddToLibrary = register({
name: "addToLibrary",
trackEvent: { category: "element" },

10
packages/excalidraw/actions/actionAlign.tsx
View file

@ -1,5 +1,5 @@
import type { Alignment } from "../align";
import { alignElements } from "../align";
import { ToolButton } from "../components/ToolButton";
import {
AlignBottomIcon,
AlignLeftIcon,
@ -8,19 +8,21 @@ import {
CenterHorizontallyIcon,
CenterVerticallyIcon,
} from "../components/icons";
import { ToolButton } from "../components/ToolButton";
import { getNonDeletedElements } from "../element";
import { isFrameLikeElement } from "../element/typeChecks";
import type { ExcalidrawElement } from "../element/types";
import { updateFrameMembershipOfSelectedElements } from "../frame";
import { t } from "../i18n";
import { KEYS } from "../keys";
import { isSomeElementSelected } from "../scene";
import { CaptureUpdateAction } from "../store";
import type { AppClassProperties, AppState, UIAppState } from "../types";
import { arrayToMap, getShortcutKey } from "../utils";
import { register } from "./register";
import type { Alignment } from "../align";
import type { ExcalidrawElement } from "../element/types";
import type { AppClassProperties, AppState, UIAppState } from "../types";
export const alignActionsPredicate = (
appState: UIAppState,
app: AppClassProperties,

22
packages/excalidraw/actions/actionBoundText.tsx
View file

@ -5,6 +5,11 @@ import {
VERTICAL_ALIGN,
} from "../constants";
import { isTextElement, newElement } from "../element";
import {
getOriginalContainerHeightFromCache,
resetOriginalContainerCache,
updateOriginalContainerCache,
} from "../element/containerCache";
import { mutateElement } from "../element/mutateElement";
import {
computeBoundTextPosition,
@ -12,16 +17,18 @@ import {
getBoundTextElement,
redrawTextBoundingBox,
} from "../element/textElement";
import {
getOriginalContainerHeightFromCache,
resetOriginalContainerCache,
updateOriginalContainerCache,
} from "../element/containerCache";
import { measureText } from "../element/textMeasurements";
import {
hasBoundTextElement,
isTextBindableContainer,
isUsingAdaptiveRadius,
} from "../element/typeChecks";
import { syncMovedIndices } from "../fractionalIndex";
import { CaptureUpdateAction } from "../store";
import { arrayToMap, getFontString } from "../utils";
import { register } from "./register";
import type {
ExcalidrawElement,
ExcalidrawLinearElement,
@ -30,11 +37,6 @@ import type {
} from "../element/types";
import type { AppState } from "../types";
import type { Mutable } from "../utility-types";
import { arrayToMap, getFontString } from "../utils";
import { register } from "./register";
import { syncMovedIndices } from "../fractionalIndex";
import { CaptureUpdateAction } from "../store";
import { measureText } from "../element/textMeasurements";
export const actionUnbindText = register({
name: "unbindText",

35
packages/excalidraw/actions/actionCanvas.tsx
View file

@ -1,4 +1,14 @@
import { clamp, roundToStep } from "@excalidraw/math";
import {
getDefaultAppState,
isEraserActive,
isHandToolActive,
} from "../appState";
import { DEFAULT_CANVAS_BACKGROUND_PICKS } from "../colors";
import { ColorPicker } from "../components/ColorPicker/ColorPicker";
import { ToolButton } from "../components/ToolButton";
import { Tooltip } from "../components/Tooltip";
import {
handIcon,
MoonIcon,
@ -9,7 +19,6 @@ import {
ZoomOutIcon,
ZoomResetIcon,
} from "../components/icons";
import { ToolButton } from "../components/ToolButton";
import {
CURSOR_TYPE,
MAX_ZOOM,
@ -17,28 +26,22 @@ import {
THEME,
ZOOM_STEP,
} from "../constants";
import { setCursor } from "../cursor";
import { getCommonBounds, getNonDeletedElements } from "../element";
import type { ExcalidrawElement } from "../element/types";
import { newElementWith } from "../element/mutateElement";
import { t } from "../i18n";
import { CODES, KEYS } from "../keys";
import { getNormalizedZoom } from "../scene";
import { centerScrollOn } from "../scene/scroll";
import { getStateForZoom } from "../scene/zoom";
import type { AppState, Offsets } from "../types";
import { getShortcutKey, updateActiveTool } from "../utils";
import { register } from "./register";
import { Tooltip } from "../components/Tooltip";
import { newElementWith } from "../element/mutateElement";
import {
getDefaultAppState,
isEraserActive,
isHandToolActive,
} from "../appState";
import { DEFAULT_CANVAS_BACKGROUND_PICKS } from "../colors";
import type { SceneBounds } from "../element/bounds";
import { setCursor } from "../cursor";
import { CaptureUpdateAction } from "../store";
import { clamp, roundToStep } from "@excalidraw/math";
import { getShortcutKey, updateActiveTool } from "../utils";
import { register } from "./register";
import type { SceneBounds } from "../element/bounds";
import type { ExcalidrawElement } from "../element/types";
import type { AppState, Offsets } from "../types";
export const actionChangeViewBackgroundColor = register({
name: "changeViewBackgroundColor",

11
packages/excalidraw/actions/actionClipboard.tsx
View file

@ -1,5 +1,3 @@
import { CODES, KEYS } from "../keys";
import { register } from "./register";
import {
copyTextToSystemClipboard,
copyToClipboard,
@ -8,14 +6,17 @@ import {
probablySupportsClipboardWriteText,
readSystemClipboard,
} from "../clipboard";
import { actionDeleteSelected } from "./actionDeleteSelected";
import { DuplicateIcon, cutIcon, pngIcon, svgIcon } from "../components/icons";
import { isFirefox } from "../constants";
import { exportCanvas, prepareElementsForExport } from "../data/index";
import { getTextFromElements, isTextElement } from "../element";
import { t } from "../i18n";
import { isFirefox } from "../constants";
import { DuplicateIcon, cutIcon, pngIcon, svgIcon } from "../components/icons";
import { CODES, KEYS } from "../keys";
import { CaptureUpdateAction } from "../store";
import { actionDeleteSelected } from "./actionDeleteSelected";
import { register } from "./register";
export const actionCopy = register({
name: "copy",
label: "labels.copy",

10
packages/excalidraw/actions/actionCropEditor.tsx
View file

@ -1,9 +1,11 @@
import { register } from "./register";
import { cropIcon } from "../components/icons";
import { CaptureUpdateAction } from "../store";
import { ToolButton } from "../components/ToolButton";
import { t } from "../i18n";
import { cropIcon } from "../components/icons";
import { isImageElement } from "../element/typeChecks";
import { t } from "../i18n";
import { CaptureUpdateAction } from "../store";
import { register } from "./register";
import type { ExcalidrawImageElement } from "../element/types";
export const actionToggleCropEditor = register({

4
packages/excalidraw/actions/actionDeleteSelected.test.tsx
View file

@ -1,7 +1,9 @@
import React from "react";
import { Excalidraw, mutateElement } from "../index";
import { act, assertElements, render } from "../tests/test-utils";
import { API } from "../tests/helpers/api";
import { act, assertElements, render } from "../tests/test-utils";
import { actionDeleteSelected } from "./actionDeleteSelected";
const { h } = window;

28
packages/excalidraw/actions/actionDeleteSelected.tsx
View file

@ -1,25 +1,27 @@
import { getSelectedElements, isSomeElementSelected } from "../scene";
import { KEYS } from "../keys";
import { ToolButton } from "../components/ToolButton";
import { t } from "../i18n";
import { register } from "./register";
import { TrashIcon } from "../components/icons";
import { getNonDeletedElements } from "../element";
import type { ExcalidrawElement } from "../element/types";
import type { AppClassProperties, AppState } from "../types";
import { mutateElement, newElementWith } from "../element/mutateElement";
import { getElementsInGroup, selectGroupsForSelectedElements } from "../groups";
import { LinearElementEditor } from "../element/linearElementEditor";
import { fixBindingsAfterDeletion } from "../element/binding";
import { LinearElementEditor } from "../element/linearElementEditor";
import { mutateElement, newElementWith } from "../element/mutateElement";
import { getContainerElement } from "../element/textElement";
import {
isBoundToContainer,
isElbowArrow,
isFrameLikeElement,
} from "../element/typeChecks";
import { updateActiveTool } from "../utils";
import { TrashIcon } from "../components/icons";
import { CaptureUpdateAction } from "../store";
import { getContainerElement } from "../element/textElement";
import { getFrameChildren } from "../frame";
import { getElementsInGroup, selectGroupsForSelectedElements } from "../groups";
import { t } from "../i18n";
import { KEYS } from "../keys";
import { getSelectedElements, isSomeElementSelected } from "../scene";
import { CaptureUpdateAction } from "../store";
import { updateActiveTool } from "../utils";
import { register } from "./register";
import type { ExcalidrawElement } from "../element/types";
import type { AppClassProperties, AppState } from "../types";
const deleteSelectedElements = (
elements: readonly ExcalidrawElement[],

10
packages/excalidraw/actions/actionDistribute.tsx
View file

@ -1,22 +1,24 @@
import { ToolButton } from "../components/ToolButton";
import {
DistributeHorizontallyIcon,
DistributeVerticallyIcon,
} from "../components/icons";
import { ToolButton } from "../components/ToolButton";
import type { Distribution } from "../distribute";
import { distributeElements } from "../distribute";
import { getNonDeletedElements } from "../element";
import { isFrameLikeElement } from "../element/typeChecks";
import type { ExcalidrawElement } from "../element/types";
import { updateFrameMembershipOfSelectedElements } from "../frame";
import { t } from "../i18n";
import { CODES, KEYS } from "../keys";
import { isSomeElementSelected } from "../scene";
import { CaptureUpdateAction } from "../store";
import type { AppClassProperties, AppState } from "../types";
import { arrayToMap, getShortcutKey } from "../utils";
import { register } from "./register";
import type { Distribution } from "../distribute";
import type { ExcalidrawElement } from "../element/types";
import type { AppClassProperties, AppState } from "../types";
const enableActionGroup = (appState: AppState, app: AppClassProperties) => {
const selectedElements = app.scene.getSelectedElements(appState);
return (

8
packages/excalidraw/actions/actionDuplicateSelection.test.tsx
View file

@ -1,14 +1,16 @@
import React from "react";
import { ORIG_ID } from "../constants";
import { Excalidraw } from "../index";
import { API } from "../tests/helpers/api";
import {
act,
assertElements,
getCloneByOrigId,
render,
} from "../tests/test-utils";
import { API } from "../tests/helpers/api";
import { actionDuplicateSelection } from "./actionDuplicateSelection";
import React from "react";
import { ORIG_ID } from "../constants";
const { h } = window;

48
packages/excalidraw/actions/actionDuplicateSelection.tsx
View file

@ -1,27 +1,8 @@
import { KEYS } from "../keys";
import { register } from "./register";
import type { ExcalidrawElement } from "../element/types";
import { duplicateElement, getNonDeletedElements } from "../element";
import { isSomeElementSelected } from "../scene";
import { ToolButton } from "../components/ToolButton";
import { t } from "../i18n";
import {
arrayToMap,
castArray,
findLastIndex,
getShortcutKey,
invariant,
} from "../utils";
import { LinearElementEditor } from "../element/linearElementEditor";
import {
selectGroupsForSelectedElements,
getSelectedGroupForElement,
getElementsInGroup,
} from "../groups";
import type { AppState } from "../types";
import { fixBindingsAfterDuplication } from "../element/binding";
import type { ActionResult } from "./types";
import { DuplicateIcon } from "../components/icons";
import { DEFAULT_GRID_SIZE } from "../constants";
import { duplicateElement, getNonDeletedElements } from "../element";
import { fixBindingsAfterDuplication } from "../element/binding";
import {
bindTextToShapeAfterDuplication,
getBoundTextElement,
@ -33,16 +14,37 @@ import {
isFrameLikeElement,
} from "../element/typeChecks";
import { normalizeElementOrder } from "../element/sortElements";
import { DuplicateIcon } from "../components/icons";
import { LinearElementEditor } from "../element/linearElementEditor";
import {
bindElementsToFramesAfterDuplication,
getFrameChildren,
} from "../frame";
import {
selectGroupsForSelectedElements,
getSelectedGroupForElement,
getElementsInGroup,
} from "../groups";
import { t } from "../i18n";
import { KEYS } from "../keys";
import { isSomeElementSelected } from "../scene";
import {
excludeElementsInFramesFromSelection,
getSelectedElements,
} from "../scene/selection";
import { CaptureUpdateAction } from "../store";
import {
arrayToMap,
castArray,
findLastIndex,
getShortcutKey,
invariant,
} from "../utils";
import { register } from "./register";
import type { ActionResult } from "./types";
import type { ExcalidrawElement } from "../element/types";
import type { AppState } from "../types";
export const actionDuplicateSelection = register({
name: "duplicateSelection",

1
packages/excalidraw/actions/actionElementLink.ts
View file

@ -8,6 +8,7 @@ import {
import { t } from "../i18n";
import { getSelectedElements } from "../scene";
import { CaptureUpdateAction } from "../store";
import { register } from "./register";
export const actionCopyElementLink = register({

9
packages/excalidraw/actions/actionElementLock.test.tsx
View file

@ -1,9 +1,10 @@
import React from "react";
import { Excalidraw } from "../index";
import { queryByTestId, fireEvent } from "@testing-library/react";
import { render } from "../tests/test-utils";
import { Pointer, UI } from "../tests/helpers/ui";
import React from "react";
import { Excalidraw } from "../index";
import { API } from "../tests/helpers/api";
import { Pointer, UI } from "../tests/helpers/ui";
import { render } from "../tests/test-utils";
const { h } = window;
const mouse = new Pointer("mouse");

4
packages/excalidraw/actions/actionElementLock.ts
View file

@ -1,13 +1,15 @@
import { LockedIcon, UnlockedIcon } from "../components/icons";
import { newElementWith } from "../element/mutateElement";
import { isFrameLikeElement } from "../element/typeChecks";
import type { ExcalidrawElement } from "../element/types";
import { KEYS } from "../keys";
import { getSelectedElements } from "../scene";
import { CaptureUpdateAction } from "../store";
import { arrayToMap } from "../utils";
import { register } from "./register";
import type { ExcalidrawElement } from "../element/types";
const shouldLock = (elements: readonly ExcalidrawElement[]) =>
elements.every((el) => !el.locked);

30
packages/excalidraw/actions/actionExport.tsx
View file

@ -1,25 +1,27 @@
import { ExportIcon, questionCircle, saveAs } from "../components/icons";
import { useDevice } from "../components/App";
import { CheckboxItem } from "../components/CheckboxItem";
import { DarkModeToggle } from "../components/DarkModeToggle";
import { ProjectName } from "../components/ProjectName";
import { ToolButton } from "../components/ToolButton";
import { Tooltip } from "../components/Tooltip";
import { DarkModeToggle } from "../components/DarkModeToggle";
import { loadFromJSON, saveAsJSON } from "../data";
import { resaveAsImageWithScene } from "../data/resave";
import { t } from "../i18n";
import { useDevice } from "../components/App";
import { KEYS } from "../keys";
import { register } from "./register";
import { CheckboxItem } from "../components/CheckboxItem";
import { getExportSize } from "../scene/export";
import { ExportIcon, questionCircle, saveAs } from "../components/icons";
import { DEFAULT_EXPORT_PADDING, EXPORT_SCALES, THEME } from "../constants";
import { getSelectedElements, isSomeElementSelected } from "../scene";
import { getNonDeletedElements } from "../element";
import { loadFromJSON, saveAsJSON } from "../data";
import { isImageFileHandle } from "../data/blob";
import { nativeFileSystemSupported } from "../data/filesystem";
import type { Theme } from "../element/types";
import { resaveAsImageWithScene } from "../data/resave";
import { getNonDeletedElements } from "../element";
import { t } from "../i18n";
import { KEYS } from "../keys";
import { getSelectedElements, isSomeElementSelected } from "../scene";
import { getExportSize } from "../scene/export";
import { CaptureUpdateAction } from "../store";
import "../components/ToolIcon.scss";
import { CaptureUpdateAction } from "../store";
import { register } from "./register";
import type { Theme } from "../element/types";
export const actionChangeProjectName = register({
name: "changeProjectName",

25
packages/excalidraw/actions/actionFinalize.tsx
View file

@ -1,22 +1,25 @@
import { KEYS } from "../keys";
import { isInvisiblySmallElement } from "../element";
import { arrayToMap, updateActiveTool } from "../utils";
import { pointFrom } from "@excalidraw/math";
import { ToolButton } from "../components/ToolButton";
import { done } from "../components/icons";
import { t } from "../i18n";
import { register } from "./register";
import { mutateElement } from "../element/mutateElement";
import { LinearElementEditor } from "../element/linearElementEditor";
import { resetCursor } from "../cursor";
import { isInvisiblySmallElement } from "../element";
import {
maybeBindLinearElement,
bindOrUnbindLinearElement,
} from "../element/binding";
import { LinearElementEditor } from "../element/linearElementEditor";
import { mutateElement } from "../element/mutateElement";
import { isBindingElement, isLinearElement } from "../element/typeChecks";
import type { AppState } from "../types";
import { resetCursor } from "../cursor";
import { CaptureUpdateAction } from "../store";
import { pointFrom } from "@excalidraw/math";
import { t } from "../i18n";
import { KEYS } from "../keys";
import { isPathALoop } from "../shapes";
import { CaptureUpdateAction } from "../store";
import { arrayToMap, updateActiveTool } from "../utils";
import { register } from "./register";
import type { AppState } from "../types";
export const actionFinalize = register({
name: "finalize",

10
packages/excalidraw/actions/actionFlip.test.tsx
View file

@ -1,8 +1,10 @@
import React from "react";
import { Excalidraw } from "../index";
import { render } from "../tests/test-utils";
import { API } from "../tests/helpers/api";
import { pointFrom } from "@excalidraw/math";
import React from "react";
import { Excalidraw } from "../index";
import { API } from "../tests/helpers/api";
import { render } from "../tests/test-utils";
import { actionFlipHorizontal, actionFlipVertical } from "./actionFlip";
const { h } = window;

42
packages/excalidraw/actions/actionFlip.ts
View file

@ -1,6 +1,26 @@
import { register } from "./register";
import { getSelectedElements } from "../scene";
import { flipHorizontal, flipVertical } from "../components/icons";
import { getNonDeletedElements } from "../element";
import {
bindOrUnbindLinearElements,
isBindingEnabled,
} from "../element/binding";
import { getCommonBoundingBox } from "../element/bounds";
import { mutateElement, newElementWith } from "../element/mutateElement";
import { deepCopyElement } from "../element/newElement";
import { resizeMultipleElements } from "../element/resizeElements";
import {
isArrowElement,
isElbowArrow,
isLinearElement,
} from "../element/typeChecks";
import { updateFrameMembershipOfSelectedElements } from "../frame";
import { CODES, KEYS } from "../keys";
import { getSelectedElements } from "../scene";
import { CaptureUpdateAction } from "../store";
import { arrayToMap } from "../utils";
import { register } from "./register";
import type {
ExcalidrawArrowElement,
ExcalidrawElbowArrowElement,
@ -8,25 +28,7 @@ import type {
NonDeleted,
NonDeletedSceneElementsMap,
} from "../element/types";
import { resizeMultipleElements } from "../element/resizeElements";
import type { AppClassProperties, AppState } from "../types";
import { arrayToMap } from "../utils";
import { CODES, KEYS } from "../keys";
import {
bindOrUnbindLinearElements,
isBindingEnabled,
} from "../element/binding";
import { updateFrameMembershipOfSelectedElements } from "../frame";
import { flipHorizontal, flipVertical } from "../components/icons";
import { CaptureUpdateAction } from "../store";
import {
isArrowElement,
isElbowArrow,
isLinearElement,
} from "../element/typeChecks";
import { mutateElement, newElementWith } from "../element/mutateElement";
import { deepCopyElement } from "../element/newElement";
import { getCommonBoundingBox } from "../element/bounds";
export const actionFlipHorizontal = register({
name: "flipHorizontal",

26
packages/excalidraw/actions/actionFrame.ts
View file

@ -1,19 +1,21 @@
import { frameToolIcon } from "../components/icons";
import { setCursorForShape } from "../cursor";
import { getCommonBounds, getNonDeletedElements } from "../element";
import type { ExcalidrawElement } from "../element/types";
import { mutateElement } from "../element/mutateElement";
import { newFrameElement } from "../element/newElement";
import { isFrameLikeElement } from "../element/typeChecks";
import { addElementsToFrame, removeAllElementsFromFrame } from "../frame";
import { getFrameChildren } from "../frame";
import { KEYS } from "../keys";
import type { AppClassProperties, AppState, UIAppState } from "../types";
import { updateActiveTool } from "../utils";
import { setCursorForShape } from "../cursor";
import { register } from "./register";
import { isFrameLikeElement } from "../element/typeChecks";
import { frameToolIcon } from "../components/icons";
import { CaptureUpdateAction } from "../store";
import { getSelectedElements } from "../scene";
import { newFrameElement } from "../element/newElement";
import { getElementsInGroup } from "../groups";
import { mutateElement } from "../element/mutateElement";
import { KEYS } from "../keys";
import { getSelectedElements } from "../scene";
import { CaptureUpdateAction } from "../store";
import { updateActiveTool } from "../utils";
import { register } from "./register";
import type { ExcalidrawElement } from "../element/types";
import type { AppClassProperties, AppState, UIAppState } from "../types";
const isSingleFrameSelected = (
appState: UIAppState,

52
packages/excalidraw/actions/actionGroup.tsx
View file

@ -1,29 +1,9 @@
import { KEYS } from "../keys";
import { t } from "../i18n";
import { arrayToMap, getShortcutKey } from "../utils";
import { register } from "./register";
import { UngroupIcon, GroupIcon } from "../components/icons";
import { newElementWith } from "../element/mutateElement";
import { isSomeElementSelected } from "../scene";
import {
getSelectedGroupIds,
selectGroup,
selectGroupsForSelectedElements,
getElementsInGroup,
addToGroup,
removeFromSelectedGroups,
isElementInGroup,
} from "../groups";
import { getNonDeletedElements } from "../element";
import { randomId } from "../random";
import { ToolButton } from "../components/ToolButton";
import type {
ExcalidrawElement,
ExcalidrawTextElement,
OrderedExcalidrawElement,
} from "../element/types";
import type { AppClassProperties, AppState } from "../types";
import { UngroupIcon, GroupIcon } from "../components/icons";
import { getNonDeletedElements } from "../element";
import { newElementWith } from "../element/mutateElement";
import { isBoundToContainer } from "../element/typeChecks";
import { syncMovedIndices } from "../fractionalIndex";
import {
frameAndChildrenSelectedTogether,
getElementsInResizingFrame,
@ -33,8 +13,30 @@ import {
removeElementsFromFrame,
replaceAllElementsInFrame,
} from "../frame";
import { syncMovedIndices } from "../fractionalIndex";
import {
getSelectedGroupIds,
selectGroup,
selectGroupsForSelectedElements,
getElementsInGroup,
addToGroup,
removeFromSelectedGroups,
isElementInGroup,
} from "../groups";
import { t } from "../i18n";
import { KEYS } from "../keys";
import { randomId } from "../random";
import { isSomeElementSelected } from "../scene";
import { CaptureUpdateAction } from "../store";
import { arrayToMap, getShortcutKey } from "../utils";
import { register } from "./register";
import type {
ExcalidrawElement,
ExcalidrawTextElement,
OrderedExcalidrawElement,
} from "../element/types";
import type { AppClassProperties, AppState } from "../types";
const allElementsInSameGroup = (elements: readonly ExcalidrawElement[]) => {
if (elements.length >= 2) {

23
packages/excalidraw/actions/actionHistory.tsx
View file

@ -1,17 +1,18 @@
import type { Action, ActionResult } from "./types";
import { UndoIcon, RedoIcon } from "../components/icons";
import { ToolButton } from "../components/ToolButton";
import { t } from "../i18n";
import type { History } from "../history";
import { HistoryChangedEvent } from "../history";
import type { AppClassProperties, AppState } from "../types";
import { KEYS, matchKey } from "../keys";
import { arrayToMap } from "../utils";
import { UndoIcon, RedoIcon } from "../components/icons";
import { isWindows } from "../constants";
import type { SceneElementsMap } from "../element/types";
import type { Store } from "../store";
import { CaptureUpdateAction } from "../store";
import { HistoryChangedEvent } from "../history";
import { useEmitter } from "../hooks/useEmitter";
import { t } from "../i18n";
import { KEYS, matchKey } from "../keys";
import { CaptureUpdateAction } from "../store";
import { arrayToMap } from "../utils";
import type { SceneElementsMap } from "../element/types";
import type { History } from "../history";
import type { Store } from "../store";
import type { AppClassProperties, AppState } from "../types";
import type { Action, ActionResult } from "./types";
const executeHistoryAction = (
app: AppClassProperties,

12
packages/excalidraw/actions/actionLinearEditor.tsx
View file

@ -1,12 +1,14 @@
import { DEFAULT_CATEGORIES } from "../components/CommandPalette/CommandPalette";
import { ToolButton } from "../components/ToolButton";
import { lineEditorIcon } from "../components/icons";
import { LinearElementEditor } from "../element/linearElementEditor";
import { isElbowArrow, isLinearElement } from "../element/typeChecks";
import type { ExcalidrawLinearElement } from "../element/types";
import { CaptureUpdateAction } from "../store";
import { register } from "./register";
import { ToolButton } from "../components/ToolButton";
import { t } from "../i18n";
import { lineEditorIcon } from "../components/icons";
import { CaptureUpdateAction } from "../store";
import { register } from "./register";
import type { ExcalidrawLinearElement } from "../element/types";
export const actionToggleLinearEditor = register({
name: "toggleLinearEditor",

3
packages/excalidraw/actions/actionLink.tsx
View file

@ -1,12 +1,13 @@
import { ToolButton } from "../components/ToolButton";
import { getContextMenuLabel } from "../components/hyperlink/Hyperlink";
import { LinkIcon } from "../components/icons";
import { ToolButton } from "../components/ToolButton";
import { isEmbeddableElement } from "../element/typeChecks";
import { t } from "../i18n";
import { KEYS } from "../keys";
import { getSelectedElements } from "../scene";
import { CaptureUpdateAction } from "../store";
import { getShortcutKey } from "../utils";
import { register } from "./register";
export const actionLink = register({

7
packages/excalidraw/actions/actionMenu.tsx
View file

@ -1,11 +1,12 @@
import { HamburgerMenuIcon, HelpIconThin, palette } from "../components/icons";
import { ToolButton } from "../components/ToolButton";
import { t } from "../i18n";
import { HamburgerMenuIcon, HelpIconThin, palette } from "../components/icons";
import { showSelectedShapeActions, getNonDeletedElements } from "../element";
import { register } from "./register";
import { t } from "../i18n";
import { KEYS } from "../keys";
import { CaptureUpdateAction } from "../store";
import { register } from "./register";
export const actionToggleCanvasMenu = register({
name: "toggleCanvasMenu",
label: "buttons.menu",

9
packages/excalidraw/actions/actionNavigate.tsx
View file

@ -1,6 +1,7 @@
import clsx from "clsx";
import { getClientColor } from "../clients";
import { Avatar } from "../components/Avatar";
import type { GoToCollaboratorComponentProps } from "../components/UserList";
import {
eyeIcon,
microphoneIcon,
@ -8,9 +9,11 @@ import {
} from "../components/icons";
import { t } from "../i18n";
import { CaptureUpdateAction } from "../store";
import type { Collaborator } from "../types";
import { register } from "./register";
import clsx from "clsx";
import type { GoToCollaboratorComponentProps } from "../components/UserList";
import type { Collaborator } from "../types";
export const actionGoToCollaborator = register({
name: "goToCollaborator",

11
packages/excalidraw/actions/actionProperties.test.tsx
View file

@ -1,11 +1,12 @@
import React from "react";
import { Excalidraw } from "../index";
import { queryByTestId } from "@testing-library/react";
import { render } from "../tests/test-utils";
import { UI } from "../tests/helpers/ui";
import { API } from "../tests/helpers/api";
import React from "react";
import { COLOR_PALETTE, DEFAULT_ELEMENT_BACKGROUND_PICKS } from "../colors";
import { FONT_FAMILY, STROKE_WIDTH } from "../constants";
import { Excalidraw } from "../index";
import { API } from "../tests/helpers/api";
import { UI } from "../tests/helpers/ui";
import { render } from "../tests/test-utils";
describe("element locking", () => {
beforeEach(async () => {

60
packages/excalidraw/actions/actionProperties.tsx
View file

@ -1,20 +1,23 @@
import { pointFrom } from "@excalidraw/math";
import { useEffect, useMemo, useRef, useState } from "react";
import type { AppClassProperties, AppState, Primitive } from "../types";
import type { CaptureUpdateActionType } from "../store";
import type { LocalPoint } from "@excalidraw/math";
import { trackEvent } from "../analytics";
import {
DEFAULT_ELEMENT_BACKGROUND_COLOR_PALETTE,
DEFAULT_ELEMENT_BACKGROUND_PICKS,
DEFAULT_ELEMENT_STROKE_COLOR_PALETTE,
DEFAULT_ELEMENT_STROKE_PICKS,
} from "../colors";
import { trackEvent } from "../analytics";
import { ButtonIconSelect } from "../components/ButtonIconSelect";
import { ColorPicker } from "../components/ColorPicker/ColorPicker";
import { IconPicker } from "../components/IconPicker";
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,
ArrowheadBarIcon,
@ -71,6 +74,14 @@ import {
isTextElement,
redrawTextBoundingBox,
} from "../element";
import {
bindLinearElement,
bindPointToSnapToElementOutline,
calculateFixedPointForElbowArrowBinding,
getHoveredElementForBinding,
updateBoundElements,
} from "../element/binding";
import { LinearElementEditor } from "../element/linearElementEditor";
import { mutateElement, newElementWith } from "../element/mutateElement";
import { getBoundTextElement } from "../element/textElement";
import {
@ -80,17 +91,7 @@ import {
isLinearElement,
isUsingAdaptiveRadius,
} from "../element/typeChecks";
import type {
Arrowhead,
ExcalidrawBindableElement,
ExcalidrawElement,
ExcalidrawLinearElement,
ExcalidrawTextElement,
FontFamilyValues,
TextAlign,
VerticalAlign,
NonDeletedSceneElementsMap,
} from "../element/types";
import { Fonts, getLineHeight } from "../fonts";
import { getLanguage, t } from "../i18n";
import { KEYS } from "../keys";
import { randomInteger } from "../random";
@ -102,26 +103,29 @@ import {
isSomeElementSelected,
} from "../scene";
import { hasStrokeColor } from "../scene/comparisons";
import { CaptureUpdateAction } from "../store";
import {
arrayToMap,
getFontFamilyString,
getShortcutKey,
tupleToCoors,
} from "../utils";
import { register } from "./register";
import { CaptureUpdateAction } from "../store";
import { Fonts, getLineHeight } from "../fonts";
import {
bindLinearElement,
bindPointToSnapToElementOutline,
calculateFixedPointForElbowArrowBinding,
getHoveredElementForBinding,
updateBoundElements,
} from "../element/binding";
import { LinearElementEditor } from "../element/linearElementEditor";
import type { LocalPoint } from "@excalidraw/math";
import { pointFrom } from "@excalidraw/math";
import { Range } from "../components/Range";
import type {
Arrowhead,
ExcalidrawBindableElement,
ExcalidrawElement,
ExcalidrawLinearElement,
ExcalidrawTextElement,
FontFamilyValues,
TextAlign,
VerticalAlign,
NonDeletedSceneElementsMap,
} from "../element/types";
import type { CaptureUpdateActionType } from "../store";
import type { AppClassProperties, AppState, Primitive } from "../types";
const FONT_SIZE_RELATIVE_INCREASE_STEP = 0.1;

16
packages/excalidraw/actions/actionSelectAll.ts
View file

@ -1,13 +1,15 @@
import { KEYS } from "../keys";
import { register } from "./register";
import { selectGroupsForSelectedElements } from "../groups";
import { getNonDeletedElements, isTextElement } from "../element";
import type { ExcalidrawElement } from "../element/types";
import { isLinearElement } from "../element/typeChecks";
import { LinearElementEditor } from "../element/linearElementEditor";
import { selectAllIcon } from "../components/icons";
import { getNonDeletedElements, isTextElement } from "../element";
import { LinearElementEditor } from "../element/linearElementEditor";
import { isLinearElement } from "../element/typeChecks";
import { selectGroupsForSelectedElements } from "../groups";
import { KEYS } from "../keys";
import { CaptureUpdateAction } from "../store";
import { register } from "./register";
import type { ExcalidrawElement } from "../element/types";
export const actionSelectAll = register({
name: "selectAll",
label: "labels.selectAll",

28
packages/excalidraw/actions/actionStyles.ts
View file

@ -1,17 +1,15 @@
import {
isTextElement,
isExcalidrawElement,
redrawTextBoundingBox,
} from "../element";
import { CODES, KEYS } from "../keys";
import { t } from "../i18n";
import { register } from "./register";
import { newElementWith } from "../element/mutateElement";
import { paintIcon } from "../components/icons";
import {
DEFAULT_FONT_SIZE,
DEFAULT_FONT_FAMILY,
DEFAULT_TEXT_ALIGN,
} from "../constants";
import {
isTextElement,
isExcalidrawElement,
redrawTextBoundingBox,
} from "../element";
import { newElementWith } from "../element/mutateElement";
import { getBoundTextElement } from "../element/textElement";
import {
hasBoundTextElement,
@ -20,11 +18,15 @@ import {
isFrameLikeElement,
isArrowElement,
} from "../element/typeChecks";
import { getSelectedElements } from "../scene";
import type { ExcalidrawTextElement } from "../element/types";
import { paintIcon } from "../components/icons";
import { CaptureUpdateAction } from "../store";
import { getLineHeight } from "../fonts";
import { t } from "../i18n";
import { CODES, KEYS } from "../keys";
import { getSelectedElements } from "../scene";
import { CaptureUpdateAction } from "../store";
import { register } from "./register";
import type { ExcalidrawTextElement } from "../element/types";
// `copiedStyles` is exported only for tests.
export let copiedStyles: string = "{}";

4
packages/excalidraw/actions/actionTextAutoResize.ts
View file

@ -3,10 +3,12 @@ import { newElementWith } from "../element/mutateElement";
import { measureText } from "../element/textMeasurements";
import { getSelectedElements } from "../scene";
import { CaptureUpdateAction } from "../store";
import type { AppClassProperties } from "../types";
import { getFontString } from "../utils";
import { register } from "./register";
import type { AppClassProperties } from "../types";
export const actionTextAutoResize = register({
name: "autoResize",
label: "labels.autoResize",

8
packages/excalidraw/actions/actionToggleGridMode.tsx
View file

@ -1,9 +1,11 @@
import { CODES, KEYS } from "../keys";
import { register } from "./register";
import type { AppState } from "../types";
import { gridIcon } from "../components/icons";
import { CODES, KEYS } from "../keys";
import { CaptureUpdateAction } from "../store";
import { register } from "./register";
import type { AppState } from "../types";
export const actionToggleGridMode = register({
name: "gridMode",
icon: gridIcon,

1
packages/excalidraw/actions/actionToggleObjectsSnapMode.tsx
View file

@ -1,6 +1,7 @@
import { magnetIcon } from "../components/icons";
import { CODES, KEYS } from "../keys";
import { CaptureUpdateAction } from "../store";
import { register } from "./register";
export const actionToggleObjectsSnapMode = register({

10
packages/excalidraw/actions/actionToggleSearchMenu.ts
View file

@ -1,9 +1,11 @@
import { KEYS } from "../keys";
import { register } from "./register";
import type { AppState } from "../types";
import { searchIcon } from "../components/icons";
import { CaptureUpdateAction } from "../store";
import { CANVAS_SEARCH_TAB, CLASSES, DEFAULT_SIDEBAR } from "../constants";
import { KEYS } from "../keys";
import { CaptureUpdateAction } from "../store";
import { register } from "./register";
import type { AppState } from "../types";
export const actionToggleSearchMenu = register({
name: "searchMenu",

5
packages/excalidraw/actions/actionToggleStats.tsx
View file

@ -1,8 +1,9 @@
import { register } from "./register";
import { CODES, KEYS } from "../keys";
import { abacusIcon } from "../components/icons";
import { CODES, KEYS } from "../keys";
import { CaptureUpdateAction } from "../store";
import { register } from "./register";
export const actionToggleStats = register({
name: "stats",
label: "stats.fullTitle",

1
packages/excalidraw/actions/actionToggleViewMode.tsx
View file

@ -1,6 +1,7 @@
import { eyeIcon } from "../components/icons";
import { CODES, KEYS } from "../keys";
import { CaptureUpdateAction } from "../store";
import { register } from "./register";
export const actionToggleViewMode = register({

1
packages/excalidraw/actions/actionToggleZenMode.tsx
View file

@ -1,6 +1,7 @@
import { coffeeIcon } from "../components/icons";
import { CODES, KEYS } from "../keys";
import { CaptureUpdateAction } from "../store";
import { register } from "./register";
export const actionToggleZenMode = register({

21
packages/excalidraw/actions/actionZindex.tsx
View file

@ -1,13 +1,3 @@
import {
moveOneLeft,
moveOneRight,
moveAllLeft,
moveAllRight,
} from "../zindex";
import { KEYS, CODES } from "../keys";
import { t } from "../i18n";
import { getShortcutKey } from "../utils";
import { register } from "./register";
import {
BringForwardIcon,
BringToFrontIcon,
@ -15,7 +5,18 @@ import {
SendToBackIcon,
} from "../components/icons";
import { isDarwin } from "../constants";
import { t } from "../i18n";
import { KEYS, CODES } from "../keys";
import { CaptureUpdateAction } from "../store";
import { getShortcutKey } from "../utils";
import {
moveOneLeft,
moveOneRight,
moveAllLeft,
moveAllRight,
} from "../zindex";
import { register } from "./register";
export const actionSendBackward = register({
name: "sendBackward",

16
packages/excalidraw/actions/manager.tsx
View file

@ -1,4 +1,13 @@
import React from "react";
import { trackEvent } from "../analytics";
import { isPromiseLike } from "../utils";
import type {
ExcalidrawElement,
OrderedExcalidrawElement,
} from "../element/types";
import type { AppClassProperties, AppState } from "../types";
import type {
Action,
UpdaterFn,
@ -7,13 +16,6 @@ import type {
PanelComponentProps,
ActionSource,
} from "./types";
import type {
ExcalidrawElement,
OrderedExcalidrawElement,
} from "../element/types";
import type { AppClassProperties, AppState } from "../types";
import { trackEvent } from "../analytics";
import { isPromiseLike } from "../utils";
const trackAction = (
action: Action,

3
packages/excalidraw/actions/shortcuts.ts
View file

@ -1,7 +1,8 @@
import { isDarwin } from "../constants";
import { t } from "../i18n";
import type { SubtypeOf } from "../utility-types";
import { getShortcutKey } from "../utils";
import type { SubtypeOf } from "../utility-types";
import type { ActionName } from "./types";
export type ShortcutName =

4
packages/excalidraw/actions/types.ts
View file

@ -1,8 +1,8 @@
import type React from "react";
import type {
ExcalidrawElement,
OrderedExcalidrawElement,
} from "../element/types";
import type { CaptureUpdateActionType } from "../store";
import type {
AppClassProperties,
AppState,
@ -10,7 +10,7 @@ import type {
BinaryFiles,
UIAppState,
} from "../types";
import type { CaptureUpdateActionType } from "../store";
import type React from "react";
export type ActionSource =
| "ui"

11
packages/excalidraw/align.ts
View file

@ -1,9 +1,10 @@
import type { ElementsMap, ExcalidrawElement } from "./element/types";
import { mutateElement } from "./element/mutateElement";
import type { BoundingBox } from "./element/bounds";
import { getCommonBoundingBox } from "./element/bounds";
import { getMaximumGroups } from "./groups";
import { updateBoundElements } from "./element/binding";
import { getCommonBoundingBox } from "./element/bounds";
import { mutateElement } from "./element/mutateElement";
import { getMaximumGroups } from "./groups";
import type { BoundingBox } from "./element/bounds";
import type { ElementsMap, ExcalidrawElement } from "./element/types";
import type Scene from "./scene/Scene";
export interface Alignment {

13
packages/excalidraw/animated-trail.ts
View file

@ -1,10 +1,13 @@
import type { LaserPointerOptions } from "@excalidraw/laser-pointer";
import { LaserPointer } from "@excalidraw/laser-pointer";
import type { AnimationFrameHandler } from "./animation-frame-handler";
import type { AppState } from "./types";
import { getSvgPathFromStroke, sceneCoordsToViewportCoords } from "./utils";
import type App from "./components/App";
import type { LaserPointerOptions } from "@excalidraw/laser-pointer";
import { SVG_NS } from "./constants";
import { getSvgPathFromStroke, sceneCoordsToViewportCoords } from "./utils";
import type { AnimationFrameHandler } from "./animation-frame-handler";
import type App from "./components/App";
import type { AppState } from "./types";
export interface Trail {
start(container: SVGSVGElement): void;

1
packages/excalidraw/appState.ts
View file

@ -11,6 +11,7 @@ import {
THEME,
DEFAULT_GRID_STEP,
} from "./constants";
import type { AppState, NormalizedZoomValue } from "./types";
const defaultExportScale = EXPORT_SCALES.includes(devicePixelRatio)

25
packages/excalidraw/change.ts
View file

@ -1,5 +1,4 @@
import { ENV } from "./constants";
import type { BindableProp, BindingProp } from "./element/binding";
import {
BoundElement,
BindableElement,
@ -7,7 +6,6 @@ import {
updateBoundElements,
} from "./element/binding";
import { LinearElementEditor } from "./element/linearElementEditor";
import type { ElementUpdate } from "./element/mutateElement";
import { mutateElement, newElementWith } from "./element/mutateElement";
import {
getBoundTextElementId,
@ -20,6 +18,19 @@ import {
isImageElement,
isTextElement,
} from "./element/typeChecks";
import { orderByFractionalIndex, syncMovedIndices } from "./fractionalIndex";
import { getNonDeletedGroupIds } from "./groups";
import { getObservedAppState } from "./store";
import {
arrayToMap,
arrayToObject,
assertNever,
isShallowEqual,
toBrandedType,
} from "./utils";
import type { BindableProp, BindingProp } from "./element/binding";
import type { ElementUpdate } from "./element/mutateElement";
import type {
ExcalidrawElement,
ExcalidrawImageElement,
@ -30,9 +41,6 @@ import type {
OrderedExcalidrawElement,
SceneElementsMap,
} from "./element/types";
import { orderByFractionalIndex, syncMovedIndices } from "./fractionalIndex";
import { getNonDeletedGroupIds } from "./groups";
import { getObservedAppState } from "./store";
import type {
AppState,
ObservedAppState,
@ -40,13 +48,6 @@ import type {
ObservedStandaloneAppState,
} from "./types";
import type { SubtypeOf, ValueOf } from "./utility-types";
import {
arrayToMap,
arrayToObject,
assertNever,
isShallowEqual,
toBrandedType,
} from "./utils";
/**
* Represents the difference between two objects of the same type.

3
packages/excalidraw/charts.test.ts
View file

@ -1,6 +1,7 @@
import type { Spreadsheet } from "./charts";
import { tryParseCells, tryParseNumber, VALID_SPREADSHEET } from "./charts";
import type { Spreadsheet } from "./charts";
describe("charts", () => {
describe("tryParseNumber", () => {
it.each<[string, number]>([

7
packages/excalidraw/charts.ts
View file

@ -1,5 +1,7 @@
import type { Radians } from "@excalidraw/math";
import { pointFrom } from "@excalidraw/math";
import type { Radians } from "@excalidraw/math";
import {
COLOR_PALETTE,
DEFAULT_CHART_COLOR_INDEX,
@ -11,9 +13,10 @@ import {
VERTICAL_ALIGN,
} from "./constants";
import { newElement, newLinearElement, newTextElement } from "./element";
import type { NonDeletedExcalidrawElement } from "./element/types";
import { randomId } from "./random";
import type { NonDeletedExcalidrawElement } from "./element/types";
export type ChartElements = readonly NonDeletedExcalidrawElement[];
const BAR_WIDTH = 32;

1
packages/excalidraw/clients.ts
View file

@ -6,6 +6,7 @@ import {
UserIdleState,
} from "./constants";
import { roundRect } from "./renderer/roundRect";
import type { InteractiveCanvasRenderConfig } from "./scene/types";
import type {
Collaborator,

21
packages/excalidraw/clipboard.ts
View file

@ -1,25 +1,26 @@
import type {
ExcalidrawElement,
NonDeletedExcalidrawElement,
} from "./element/types";
import type { BinaryFiles } from "./types";
import type { Spreadsheet } from "./charts";
import { tryParseSpreadsheet, VALID_SPREADSHEET } from "./charts";
import {
ALLOWED_PASTE_MIME_TYPES,
EXPORT_DATA_TYPES,
MIME_TYPES,
} from "./constants";
import { createFile, isSupportedImageFileType } from "./data/blob";
import { mutateElement } from "./element/mutateElement";
import { deepCopyElement } from "./element/newElement";
import {
isFrameLikeElement,
isInitializedImageElement,
} from "./element/typeChecks";
import { deepCopyElement } from "./element/newElement";
import { mutateElement } from "./element/mutateElement";
import { ExcalidrawError } from "./errors";
import { getContainingFrame } from "./frame";
import { arrayToMap, isMemberOf, isPromiseLike } from "./utils";
import { createFile, isSupportedImageFileType } from "./data/blob";
import { ExcalidrawError } from "./errors";
import type { Spreadsheet } from "./charts";
import type {
ExcalidrawElement,
NonDeletedExcalidrawElement,
} from "./element/types";
import type { BinaryFiles } from "./types";
type ElementsClipboard = {
type: typeof EXPORT_DATA_TYPES.excalidrawClipboard;

1
packages/excalidraw/colors.ts
View file

@ -1,4 +1,5 @@
import oc from "open-color";
import type { Merge } from "./utility-types";
// FIXME can't put to utils.ts rn because of circular dependency

68
packages/excalidraw/components/Actions.tsx
View file

@ -1,13 +1,25 @@
import clsx from "clsx";
import { useState } from "react";
import type { ActionManager } from "../actions/manager";
import type {
ExcalidrawElement,
ExcalidrawElementType,
NonDeletedElementsMap,
NonDeletedSceneElementsMap,
} from "../element/types";
import { actionToggleZenMode } from "../actions";
import { KEYS } from "../keys";
import { CLASSES } from "../constants";
import { alignActionsPredicate } from "../actions/actionAlign";
import { trackEvent } from "../analytics";
import { useTunnels } from "../context/tunnels";
import {
shouldAllowVerticalAlign,
suppportsHorizontalAlign,
} from "../element/textElement";
import {
hasBoundTextElement,
isElbowArrow,
isImageElement,
isLinearElement,
isTextElement,
} from "../element/typeChecks";
import { t } from "../i18n";
import { useDevice } from "./App";
import {
canChangeRoundness,
canHaveArrowheads,
@ -16,29 +28,16 @@ import {
hasStrokeStyle,
hasStrokeWidth,
} from "../scene";
import { SHAPES } from "../shapes";
import type { AppClassProperties, AppProps, UIAppState, Zoom } from "../types";
import { capitalizeString, isTransparent } from "../utils";
import Stack from "./Stack";
import { ToolButton } from "./ToolButton";
import { hasStrokeColor, toolIsArrow } from "../scene/comparisons";
import { trackEvent } from "../analytics";
import {
hasBoundTextElement,
isElbowArrow,
isImageElement,
isLinearElement,
isTextElement,
} from "../element/typeChecks";
import clsx from "clsx";
import { actionToggleZenMode } from "../actions";
import { Tooltip } from "./Tooltip";
import {
shouldAllowVerticalAlign,
suppportsHorizontalAlign,
} from "../element/textElement";
import { SHAPES } from "../shapes";
import { capitalizeString, isTransparent } from "../utils";
import "./Actions.scss";
import { useDevice } from "./App";
import Stack from "./Stack";
import { ToolButton } from "./ToolButton";
import { Tooltip } from "./Tooltip";
import DropdownMenu from "./dropdownMenu/DropdownMenu";
import {
EmbedIcon,
@ -48,10 +47,15 @@ import {
laserPointerToolIcon,
MagicIcon,
} from "./icons";
import { KEYS } from "../keys";
import { useTunnels } from "../context/tunnels";
import { CLASSES } from "../constants";
import { alignActionsPredicate } from "../actions/actionAlign";
import type {
ExcalidrawElement,
ExcalidrawElementType,
NonDeletedElementsMap,
NonDeletedSceneElementsMap,
} from "../element/types";
import type { AppClassProperties, AppProps, UIAppState, Zoom } from "../types";
import type { ActionManager } from "../actions/manager";
export const canChangeStrokeColor = (
appState: UIAppState,

3
packages/excalidraw/components/ActiveConfirmDialog.tsx
View file

@ -1,6 +1,7 @@
import { actionClearCanvas } from "../actions";
import { t } from "../i18n";
import { atom, useAtom } from "../editor-jotai";
import { t } from "../i18n";
import { useExcalidrawActionManager } from "./App";
import ConfirmDialog from "./ConfirmDialog";

233
packages/excalidraw/components/App.tsx
View file

@ -1,10 +1,26 @@
import {
clamp,
pointFrom,
pointDistance,
vector,
pointRotateRads,
vectorScale,
vectorFromPoint,
vectorSubtract,
vectorDot,
vectorNormalize,
} from "@excalidraw/math";
import { isPointInShape } from "@excalidraw/utils/collision";
import { getSelectionBoxShape } from "@excalidraw/utils/geometry/shape";
import clsx from "clsx";
import throttle from "lodash.throttle";
import { nanoid } from "nanoid";
import React, { useContext } from "react";
import { flushSync } from "react-dom";
import type { RoughCanvas } from "roughjs/bin/canvas";
import rough from "roughjs/bin/rough";
import clsx from "clsx";
import { nanoid } from "nanoid";
import type { LocalPoint, Radians } from "@excalidraw/math";
import {
actionAddToLibrary,
actionBringForward,
@ -37,17 +53,29 @@ import {
actionToggleObjectsSnapMode,
actionToggleCropEditor,
} from "../actions";
import { actionWrapTextInContainer } from "../actions/actionBoundText";
import { actionToggleHandTool, zoomToFit } from "../actions/actionCanvas";
import { actionPaste } from "../actions/actionClipboard";
import { actionCopyElementLink } from "../actions/actionElementLink";
import { actionUnlockAllElements } from "../actions/actionElementLock";
import {
actionRemoveAllElementsFromFrame,
actionSelectAllElementsInFrame,
actionWrapSelectionInFrame,
} from "../actions/actionFrame";
import { createRedoAction, createUndoAction } from "../actions/actionHistory";
import { actionTextAutoResize } from "../actions/actionTextAutoResize";
import { actionToggleViewMode } from "../actions/actionToggleViewMode";
import { ActionManager } from "../actions/manager";
import { actions } from "../actions/register";
import type { Action, ActionResult } from "../actions/types";
import { getShortcutFromShortcutName } from "../actions/shortcuts";
import { trackEvent } from "../analytics";
import { AnimationFrameHandler } from "../animation-frame-handler";
import {
getDefaultAppState,
isEraserActive,
isHandToolActive,
} from "../appState";
import type { PastedMixedContent } from "../clipboard";
import { copyTextToSystemClipboard, parseClipboard } from "../clipboard";
import {
APP_NAME,
@ -92,7 +120,6 @@ import {
isSafari,
type EXPORT_IMAGE_TYPES,
} from "../constants";
import type { ExportedElements } from "../data";
import { exportCanvas, loadFromBlob } from "../data";
import Library, { distributeLibraryItemsOnSquareGrid } from "../data/library";
import { restore, restoreElements } from "../data/restore";
@ -167,30 +194,6 @@ import {
isFlowchartNodeElement,
isBindableElement,
} from "../element/typeChecks";
import type {
ExcalidrawBindableElement,
ExcalidrawElement,
ExcalidrawFreeDrawElement,
ExcalidrawGenericElement,
ExcalidrawLinearElement,
ExcalidrawTextElement,
NonDeleted,
InitializedExcalidrawImageElement,
ExcalidrawImageElement,
FileId,
NonDeletedExcalidrawElement,
ExcalidrawTextContainer,
ExcalidrawFrameLikeElement,
ExcalidrawMagicFrameElement,
ExcalidrawIframeLikeElement,
IframeData,
ExcalidrawIframeElement,
ExcalidrawEmbeddableElement,
Ordered,
MagicGenerationData,
ExcalidrawNonSelectionElement,
ExcalidrawArrowElement,
} from "../element/types";
import { getCenter, getDistance } from "../gesture";
import {
editGroupForSelectedElement,
@ -224,10 +227,6 @@ import {
isSomeElementSelected,
} from "../scene";
import Scene from "../scene/Scene";
import type {
RenderInteractiveSceneCallback,
ScrollBars,
} from "../scene/types";
import { getStateForZoom } from "../scene/zoom";
import {
findShapeByKey,
@ -236,36 +235,6 @@ import {
getElementShape,
isPathALoop,
} from "../shapes";
import { getSelectionBoxShape } from "@excalidraw/utils/geometry/shape";
import { isPointInShape } from "@excalidraw/utils/collision";
import type {
AppClassProperties,
AppProps,
AppState,
BinaryFileData,
DataURL,
ExcalidrawImperativeAPI,
BinaryFiles,
Gesture,
GestureEvent,
LibraryItems,
PointerDownState,
SceneData,
Device,
FrameNameBoundsCache,
SidebarName,
SidebarTabName,
KeyboardModifiersObject,
CollaboratorPointer,
ToolType,
OnUserFollowedPayload,
UnsubscribeCallback,
EmbedsValidationStatus,
ElementsPendingErasure,
GenerateDiagramToCode,
NullableGridSize,
Offsets,
} from "../types";
import {
debounce,
distance,
@ -299,11 +268,6 @@ import {
maybeParseEmbedSrc,
getEmbedLink,
} from "../element/embeddable";
import type { ContextMenuItems } from "./ContextMenu";
import { ContextMenu, CONTEXT_MENU_SEPARATOR } from "./ContextMenu";
import LayerUI from "./LayerUI";
import { Toast } from "./Toast";
import { actionToggleViewMode } from "../actions/actionToggleViewMode";
import {
dataURLToFile,
dataURLToString,
@ -326,8 +290,6 @@ import {
normalizeSVG,
updateImageCache as _updateImageCache,
} from "../element/image";
import throttle from "lodash.throttle";
import type { FileSystemHandle } from "../data/filesystem";
import { fileOpen } from "../data/filesystem";
import {
bindTextToShapeAfterDuplication,
@ -343,7 +305,6 @@ import {
} from "../components/hyperlink/Hyperlink";
import { isLocalLink, normalizeLink, toValidURL } from "../data/url";
import { shouldShowBoundingBox } from "../element/transformHandles";
import { actionUnlockAllElements } from "../actions/actionElementLock";
import { Fonts, getLineHeight } from "../fonts";
import {
getFrameChildren,
@ -366,15 +327,7 @@ import {
excludeElementsInFramesFromSelection,
makeNextSelectedElementIds,
} from "../scene/selection";
import { actionPaste } from "../actions/actionClipboard";
import {
actionRemoveAllElementsFromFrame,
actionSelectAllElementsInFrame,
actionWrapSelectionInFrame,
} from "../actions/actionFrame";
import { actionToggleHandTool, zoomToFit } from "../actions/actionCanvas";
import { editorJotaiStore } from "../editor-jotai";
import { activeConfirmDialogAtom } from "./ActiveConfirmDialog";
import { ImageSceneDataError } from "../errors";
import {
getSnapLinesAtPointer,
@ -389,17 +342,9 @@ import {
isGridModeEnabled,
getGridPoint,
} from "../snapping";
import { actionWrapTextInContainer } from "../actions/actionBoundText";
import BraveMeasureTextError from "./BraveMeasureTextError";
import { activeEyeDropperAtom } from "./EyeDropper";
import type { ExcalidrawElementSkeleton } from "../data/transform";
import { convertToExcalidrawElements } from "../data/transform";
import type { ValueOf } from "../utility-types";
import { isSidebarDockedAtom } from "./Sidebar/Sidebar";
import { StaticCanvas, InteractiveCanvas } from "./canvases";
import { Renderer } from "../scene/Renderer";
import { ShapeCache } from "../scene/ShapeCache";
import { SVGLayer } from "./SVGLayer";
import {
setEraserCursor,
setCursor,
@ -409,11 +354,7 @@ import {
import { Emitter } from "../emitter";
import { ElementCanvasButtons } from "../element/ElementCanvasButtons";
import { COLOR_PALETTE } from "../colors";
import { ElementCanvasButton } from "./MagicButton";
import { MagicIcon, copyIcon, fullscreenIcon } from "./icons";
import FollowMode from "./FollowMode/FollowMode";
import { Store, CaptureUpdateAction } from "../store";
import { AnimationFrameHandler } from "../animation-frame-handler";
import { AnimatedTrail } from "../animated-trail";
import { LaserTrails } from "../laser-trails";
import { withBatchedUpdates, withBatchedUpdatesThrottled } from "../reactUtils";
@ -426,37 +367,15 @@ import {
import { textWysiwyg } from "../element/textWysiwyg";
import { isOverScrollBars } from "../scene/scrollbars";
import { syncInvalidIndices, syncMovedIndices } from "../fractionalIndex";
import {
isPointHittingLink,
isPointHittingLinkIcon,
} from "./hyperlink/helpers";
import { getShortcutFromShortcutName } from "../actions/shortcuts";
import { actionTextAutoResize } from "../actions/actionTextAutoResize";
import { getVisibleSceneBounds } from "../element/bounds";
import { isMaybeMermaidDefinition } from "../mermaid";
import NewElementCanvas from "./canvases/NewElementCanvas";
import {
FlowChartCreator,
FlowChartNavigator,
getLinkDirectionFromKey,
} from "../element/flowchart";
import { searchItemInFocusAtom } from "./SearchMenu";
import type { LocalPoint, Radians } from "@excalidraw/math";
import {
clamp,
pointFrom,
pointDistance,
vector,
pointRotateRads,
vectorScale,
vectorFromPoint,
vectorSubtract,
vectorDot,
vectorNormalize,
} from "@excalidraw/math";
import { cropElement } from "../element/cropElement";
import { wrapText } from "../element/textWrapping";
import { actionCopyElementLink } from "../actions/actionElementLink";
import { isElementLink, parseElementLinkFromURL } from "../element/elementLink";
import {
isMeasureTextSupported,
@ -468,6 +387,90 @@ import {
getMinTextElementWidth,
} from "../element/textMeasurements";
import { activeConfirmDialogAtom } from "./ActiveConfirmDialog";
import BraveMeasureTextError from "./BraveMeasureTextError";
import { ContextMenu, CONTEXT_MENU_SEPARATOR } from "./ContextMenu";
import { activeEyeDropperAtom } from "./EyeDropper";
import FollowMode from "./FollowMode/FollowMode";
import LayerUI from "./LayerUI";
import { ElementCanvasButton } from "./MagicButton";
import { SVGLayer } from "./SVGLayer";
import { searchItemInFocusAtom } from "./SearchMenu";
import { isSidebarDockedAtom } from "./Sidebar/Sidebar";
import { StaticCanvas, InteractiveCanvas } from "./canvases";
import NewElementCanvas from "./canvases/NewElementCanvas";
import {
isPointHittingLink,
isPointHittingLinkIcon,
} from "./hyperlink/helpers";
import { MagicIcon, copyIcon, fullscreenIcon } from "./icons";
import { Toast } from "./Toast";
import type { Action, ActionResult } from "../actions/types";
import type { PastedMixedContent } from "../clipboard";
import type { ExportedElements } from "../data";
import type { ContextMenuItems } from "./ContextMenu";
import type { FileSystemHandle } from "../data/filesystem";
import type { ExcalidrawElementSkeleton } from "../data/transform";
import type {
ExcalidrawBindableElement,
ExcalidrawElement,
ExcalidrawFreeDrawElement,
ExcalidrawGenericElement,
ExcalidrawLinearElement,
ExcalidrawTextElement,
NonDeleted,
InitializedExcalidrawImageElement,
ExcalidrawImageElement,
FileId,
NonDeletedExcalidrawElement,
ExcalidrawTextContainer,
ExcalidrawFrameLikeElement,
ExcalidrawMagicFrameElement,
ExcalidrawIframeLikeElement,
IframeData,
ExcalidrawIframeElement,
ExcalidrawEmbeddableElement,
Ordered,
MagicGenerationData,
ExcalidrawNonSelectionElement,
ExcalidrawArrowElement,
} from "../element/types";
import type {
RenderInteractiveSceneCallback,
ScrollBars,
} from "../scene/types";
import type {
AppClassProperties,
AppProps,
AppState,
BinaryFileData,
DataURL,
ExcalidrawImperativeAPI,
BinaryFiles,
Gesture,
GestureEvent,
LibraryItems,
PointerDownState,
SceneData,
Device,
FrameNameBoundsCache,
SidebarName,
SidebarTabName,
KeyboardModifiersObject,
CollaboratorPointer,
ToolType,
OnUserFollowedPayload,
UnsubscribeCallback,
EmbedsValidationStatus,
ElementsPendingErasure,
GenerateDiagramToCode,
NullableGridSize,
Offsets,
} from "../types";
import type { ValueOf } from "../utility-types";
import type { RoughCanvas } from "roughjs/bin/canvas";
const AppContext = React.createContext<AppClassProperties>(null!);
const AppPropsContext = React.createContext<AppProps>(null!);

9
packages/excalidraw/components/Avatar.tsx
View file

@ -1,8 +1,9 @@
import "./Avatar.scss";
import React, { useState } from "react";
import { getNameInitial } from "../clients";
import clsx from "clsx";
import React, { useState } from "react";
import { getNameInitial } from "../clients";
import "./Avatar.scss";
type AvatarProps = {
onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;

2
packages/excalidraw/components/Button.tsx
View file

@ -1,6 +1,8 @@
import clsx from "clsx";
import React from "react";
import { composeEventHandlers } from "../utils";
import "./Button.scss";
interface ButtonProps

5
packages/excalidraw/components/ButtonIcon.tsx
View file

@ -1,9 +1,10 @@
import { forwardRef } from "react";
import type { JSX } from "react";
import clsx from "clsx";
import { forwardRef } from "react";
import "./ButtonIcon.scss";
import type { JSX } from "react";
interface ButtonIconProps {
icon: JSX.Element;
title: string;

3
packages/excalidraw/components/ButtonIconCycle.tsx
View file

@ -1,6 +1,7 @@
import type { JSX } from "react";
import clsx from "clsx";
import type { JSX } from "react";
export const ButtonIconCycle = <T extends any>({
options,
value,

4
packages/excalidraw/components/ButtonIconSelect.tsx
View file

@ -1,7 +1,9 @@
import type { JSX } from "react";
import clsx from "clsx";
import { ButtonIcon } from "./ButtonIcon";
import type { JSX } from "react";
// TODO: It might be "clever" to add option.icon to the existing component <ButtonSelect />
export const ButtonIconSelect = <T extends Object>(
props: {

3
packages/excalidraw/components/CheckboxItem.tsx
View file

@ -1,5 +1,6 @@
import React from "react";
import clsx from "clsx";
import React from "react";
import { checkIcon } from "./icons";
import "./CheckboxItem.scss";

21
packages/excalidraw/components/ColorPicker/ColorInput.tsx
View file

@ -1,15 +1,18 @@
import { useCallback, useEffect, useRef, useState } from "react";
import { getColor } from "./ColorPicker";
import type { ColorPickerType } from "./colorPickerUtils";
import { activeColorPickerSectionAtom } from "./colorPickerUtils";
import { eyeDropperIcon } from "../icons";
import { useAtom } from "../../editor-jotai";
import { KEYS } from "../../keys";
import { activeEyeDropperAtom } from "../EyeDropper";
import clsx from "clsx";
import { useCallback, useEffect, useRef, useState } from "react";
import { useAtom } from "../../editor-jotai";
import { t } from "../../i18n";
import { useDevice } from "../App";
import { KEYS } from "../../keys";
import { getShortcutKey } from "../../utils";
import { useDevice } from "../App";
import { activeEyeDropperAtom } from "../EyeDropper";
import { eyeDropperIcon } from "../icons";
import { getColor } from "./ColorPicker";
import { activeColorPickerSectionAtom } from "./colorPickerUtils";
import type { ColorPickerType } from "./colorPickerUtils";
interface ColorInputProps {
color: string;

31
packages/excalidraw/components/ColorPicker/ColorPicker.tsx
View file

@ -1,26 +1,29 @@
import { isTransparent } from "../../utils";
import type { ExcalidrawElement } from "../../element/types";
import type { AppState } from "../../types";
import { TopPicks } from "./TopPicks";
import { ButtonSeparator } from "../ButtonSeparator";
import { Picker } from "./Picker";
import * as Popover from "@radix-ui/react-popover";
import type { ColorPickerType } from "./colorPickerUtils";
import { activeColorPickerSectionAtom } from "./colorPickerUtils";
import { useExcalidrawContainer } from "../App";
import type { ColorTuple, ColorPaletteCustom } from "../../colors";
import { COLOR_PALETTE } from "../../colors";
import PickerHeading from "./PickerHeading";
import { t } from "../../i18n";
import clsx from "clsx";
import { useRef } from "react";
import { COLOR_PALETTE } from "../../colors";
import { useAtom } from "../../editor-jotai";
import { ColorInput } from "./ColorInput";
import { t } from "../../i18n";
import { isTransparent } from "../../utils";
import { useExcalidrawContainer } from "../App";
import { ButtonSeparator } from "../ButtonSeparator";
import { activeEyeDropperAtom } from "../EyeDropper";
import { PropertiesPopover } from "../PropertiesPopover";
import { ColorInput } from "./ColorInput";
import { Picker } from "./Picker";
import PickerHeading from "./PickerHeading";
import { TopPicks } from "./TopPicks";
import { activeColorPickerSectionAtom } from "./colorPickerUtils";
import "./ColorPicker.scss";
import type { ColorPickerType } from "./colorPickerUtils";
import type { ColorTuple, ColorPaletteCustom } from "../../colors";
import type { ExcalidrawElement } from "../../element/types";
import type { AppState } from "../../types";
const isValidColor = (color: string) => {
const style = new Option().style;
style.color = color;

6
packages/excalidraw/components/ColorPicker/CustomColorList.tsx
View file

@ -1,8 +1,10 @@
import clsx from "clsx";
import { useAtom } from "../../editor-jotai";
import { useEffect, useRef } from "react";
import { activeColorPickerSectionAtom } from "./colorPickerUtils";
import { useAtom } from "../../editor-jotai";
import HotkeyLabel from "./HotkeyLabel";
import { activeColorPickerSectionAtom } from "./colorPickerUtils";
interface CustomColorListProps {
colors: string[];

1
packages/excalidraw/components/ColorPicker/HotkeyLabel.tsx
View file

@ -1,4 +1,5 @@
import React from "react";
import { getContrastYIQ } from "./colorPickerUtils";
interface HotkeyLabelProps {

27
packages/excalidraw/components/ColorPicker/Picker.tsx
View file

@ -1,28 +1,29 @@
import React, { useEffect, useState } from "react";
import { t } from "../../i18n";
import type { ExcalidrawElement } from "../../element/types";
import { ShadeList } from "./ShadeList";
import PickerColorList from "./PickerColorList";
import {
DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX,
DEFAULT_ELEMENT_STROKE_COLOR_INDEX,
} from "../../colors";
import { EVENT } from "../../constants";
import { useAtom } from "../../editor-jotai";
import { t } from "../../i18n";
import { KEYS } from "../../keys";
import { CustomColorList } from "./CustomColorList";
import { colorPickerKeyNavHandler } from "./keyboardNavHandlers";
import PickerColorList from "./PickerColorList";
import PickerHeading from "./PickerHeading";
import type { ColorPickerType } from "./colorPickerUtils";
import { ShadeList } from "./ShadeList";
import {
activeColorPickerSectionAtom,
getColorNameAndShadeFromColor,
getMostUsedCustomColors,
isCustomColor,
} from "./colorPickerUtils";
import { colorPickerKeyNavHandler } from "./keyboardNavHandlers";
import type { ColorPickerType } from "./colorPickerUtils";
import type { ColorPaletteCustom } from "../../colors";
import {
DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX,
DEFAULT_ELEMENT_STROKE_COLOR_INDEX,
} from "../../colors";
import { KEYS } from "../../keys";
import { EVENT } from "../../constants";
import type { ExcalidrawElement } from "../../element/types";
interface PickerProps {
color: string;

9
packages/excalidraw/components/ColorPicker/PickerColorList.tsx
View file

@ -1,15 +1,18 @@
import clsx from "clsx";
import { useAtom } from "../../editor-jotai";
import { useEffect, useRef } from "react";
import { useAtom } from "../../editor-jotai";
import { t } from "../../i18n";
import HotkeyLabel from "./HotkeyLabel";
import {
activeColorPickerSectionAtom,
colorPickerHotkeyBindings,
getColorNameAndShadeFromColor,
} from "./colorPickerUtils";
import HotkeyLabel from "./HotkeyLabel";
import type { ColorPaletteCustom } from "../../colors";
import type { TranslationKeys } from "../../i18n";
import { t } from "../../i18n";
interface PickerColorListProps {
palette: ColorPaletteCustom;

9
packages/excalidraw/components/ColorPicker/ShadeList.tsx
View file

@ -1,12 +1,15 @@
import clsx from "clsx";
import { useAtom } from "../../editor-jotai";
import { useEffect, useRef } from "react";
import { useAtom } from "../../editor-jotai";
import { t } from "../../i18n";
import HotkeyLabel from "./HotkeyLabel";
import {
activeColorPickerSectionAtom,
getColorNameAndShadeFromColor,
} from "./colorPickerUtils";
import HotkeyLabel from "./HotkeyLabel";
import { t } from "../../i18n";
import type { ColorPaletteCustom } from "../../colors";
interface ShadeListProps {

4
packages/excalidraw/components/ColorPicker/TopPicks.tsx
View file

@ -1,11 +1,13 @@
import clsx from "clsx";
import type { ColorPickerType } from "./colorPickerUtils";
import {
DEFAULT_CANVAS_BACKGROUND_PICKS,
DEFAULT_ELEMENT_BACKGROUND_PICKS,
DEFAULT_ELEMENT_STROKE_PICKS,
} from "../../colors";
import type { ColorPickerType } from "./colorPickerUtils";
interface TopPicksProps {
onChange: (color: string) => void;
type: ColorPickerType;

5
packages/excalidraw/components/ColorPicker/colorPickerUtils.ts
View file

@ -1,8 +1,9 @@
import type { ExcalidrawElement } from "../../element/types";
import type { ColorPickerColor, ColorPaletteCustom } from "../../colors";
import { MAX_CUSTOM_COLORS_USED_IN_CANVAS } from "../../colors";
import { atom } from "../../editor-jotai";
import type { ColorPickerColor, ColorPaletteCustom } from "../../colors";
import type { ExcalidrawElement } from "../../element/types";
export const getColorNameAndShadeFromColor = ({
palette,
color,

14
packages/excalidraw/components/ColorPicker/keyboardNavHandlers.ts
View file

@ -1,16 +1,18 @@
import { COLORS_PER_ROW, COLOR_PALETTE } from "../../colors";
import { KEYS } from "../../keys";
import {
colorPickerHotkeyBindings,
getColorNameAndShadeFromColor,
} from "./colorPickerUtils";
import type { ActiveColorPickerSectionAtomType } from "./colorPickerUtils";
import type {
ColorPickerColor,
ColorPalette,
ColorPaletteCustom,
} from "../../colors";
import { COLORS_PER_ROW, COLOR_PALETTE } from "../../colors";
import type { ValueOf } from "../../utility-types";
import type { ActiveColorPickerSectionAtomType } from "./colorPickerUtils";
import {
colorPickerHotkeyBindings,
getColorNameAndShadeFromColor,
} from "./colorPickerUtils";
const arrowHandler = (
eventKey: string,

59
packages/excalidraw/components/CommandPalette/CommandPalette.tsx
View file

@ -1,21 +1,34 @@
import clsx from "clsx";
import fuzzy from "fuzzy";
import { useEffect, useRef, useState } from "react";
import {
actionClearCanvas,
actionLink,
actionToggleSearchMenu,
} from "../../actions";
import {
actionCopyElementLink,
actionLinkToElement,
} from "../../actions/actionElementLink";
import { getShortcutFromShortcutName } from "../../actions/shortcuts";
import { trackEvent } from "../../analytics";
import { DEFAULT_SIDEBAR, EVENT } from "../../constants";
import { useUIAppState } from "../../context/ui-appState";
import { deburr } from "../../deburr";
import { atom, useAtom, editorJotaiStore } from "../../editor-jotai";
import { t } from "../../i18n";
import { KEYS } from "../../keys";
import {
useApp,
useAppProps,
useExcalidrawActionManager,
useExcalidrawSetAppState,
} from "../App";
import { KEYS } from "../../keys";
import { Dialog } from "../Dialog";
import { InlineIcon } from "../InlineIcon";
import { TextField } from "../TextField";
import clsx from "clsx";
import { getSelectedElements } from "../../scene";
import type { Action } from "../../actions/types";
import type { TranslationKeys } from "../../i18n";
import { t } from "../../i18n";
import type { ShortcutName } from "../../actions/shortcuts";
import { getShortcutFromShortcutName } from "../../actions/shortcuts";
import { DEFAULT_SIDEBAR, EVENT } from "../../constants";
import {
LockedIcon,
UnlockedIcon,
@ -28,37 +41,29 @@ import {
brainIconThin,
LibraryIcon,
} from "../icons";
import fuzzy from "fuzzy";
import { useUIAppState } from "../../context/ui-appState";
import type { AppProps, AppState, UIAppState } from "../../types";
import {
capitalizeString,
getShortcutKey,
isWritableElement,
} from "../../utils";
import { atom, useAtom, editorJotaiStore } from "../../editor-jotai";
import { deburr } from "../../deburr";
import type { MarkRequired } from "../../utility-types";
import { InlineIcon } from "../InlineIcon";
import { SHAPES } from "../../shapes";
import { canChangeBackgroundColor, canChangeStrokeColor } from "../Actions";
import { useStableCallback } from "../../hooks/useStableCallback";
import {
actionClearCanvas,
actionLink,
actionToggleSearchMenu,
} from "../../actions";
import { activeConfirmDialogAtom } from "../ActiveConfirmDialog";
import type { CommandPaletteItem } from "./types";
import * as defaultItems from "./defaultCommandPaletteItems";
import { trackEvent } from "../../analytics";
import { useStable } from "../../hooks/useStable";
import * as defaultItems from "./defaultCommandPaletteItems";
import "./CommandPalette.scss";
import {
actionCopyElementLink,
actionLinkToElement,
} from "../../actions/actionElementLink";
import type { CommandPaletteItem } from "./types";
import type { AppProps, AppState, UIAppState } from "../../types";
import type { MarkRequired } from "../../utility-types";
import type { ShortcutName } from "../../actions/shortcuts";
import type { TranslationKeys } from "../../i18n";
import type { Action } from "../../actions/types";
const lastUsedPaletteItem = atom<CommandPaletteItem | null>(null);

1
packages/excalidraw/components/CommandPalette/defaultCommandPaletteItems.ts
View file

@ -1,4 +1,5 @@
import { actionToggleTheme } from "../../actions";
import type { CommandPaletteItem } from "./types";
export const toggleTheme: CommandPaletteItem = {

13
packages/excalidraw/components/ConfirmDialog.tsx
View file

@ -1,13 +1,16 @@
import { flushSync } from "react-dom";
import { t } from "../i18n";
import type { DialogProps } from "./Dialog";
import { Dialog } from "./Dialog";
import "./ConfirmDialog.scss";
import { useSetAtom } from "../editor-jotai";
import { t } from "../i18n";
import { Dialog } from "./Dialog";
import DialogActionButton from "./DialogActionButton";
import { isLibraryMenuOpenAtom } from "./LibraryMenu";
import { useExcalidrawContainer, useExcalidrawSetAppState } from "./App";
import { useSetAtom } from "../editor-jotai";
import "./ConfirmDialog.scss";
import type { DialogProps } from "./Dialog";
interface Props extends Omit<DialogProps, "onCloseRequest"> {
onConfirm: () => void;

21
packages/excalidraw/components/ContextMenu.tsx
View file

@ -1,15 +1,20 @@
import clsx from "clsx";
import { Popover } from "./Popover";
import type { TranslationKeys } from "../i18n";
import React from "react";
import { getShortcutFromShortcutName } from "../actions/shortcuts";
import { t } from "../i18n";
import "./ContextMenu.scss";
import type { ShortcutName } from "../actions/shortcuts";
import { getShortcutFromShortcutName } from "../actions/shortcuts";
import type { Action } from "../actions/types";
import type { ActionManager } from "../actions/manager";
import { useExcalidrawAppState, useExcalidrawElements } from "./App";
import React from "react";
import { Popover } from "./Popover";
import "./ContextMenu.scss";
import type { ActionManager } from "../actions/manager";
import type { ShortcutName } from "../actions/shortcuts";
import type { Action } from "../actions/types";
import type { TranslationKeys } from "../i18n";
export type ContextMenuItem = typeof CONTEXT_MENU_SEPARATOR | Action;

8
packages/excalidraw/components/DarkModeToggle.tsx
View file

@ -1,8 +1,10 @@
import { THEME } from "../constants";
import { t } from "../i18n";
import { ToolButton } from "./ToolButton";
import "./ToolIcon.scss";
import { t } from "../i18n";
import { ToolButton } from "./ToolButton";
import { THEME } from "../constants";
import type { Theme } from "../element/types";
// We chose to use only explicit toggle and not a third option for system value,

2
packages/excalidraw/components/DefaultSidebar.test.tsx
View file

@ -1,4 +1,5 @@
import React from "react";
import { DEFAULT_SIDEBAR } from "../constants";
import { DefaultSidebar } from "../index";
import {
@ -6,6 +7,7 @@ import {
waitFor,
withExcalidrawDimensions,
} from "../tests/test-utils";
import {
assertExcalidrawWithSidebar,
assertSidebarDockButton,

16
packages/excalidraw/components/DefaultSidebar.tsx
View file

@ -1,4 +1,5 @@
import clsx from "clsx";
import {
CANVAS_SEARCH_TAB,
DEFAULT_SIDEBAR,
@ -6,17 +7,20 @@ import {
} from "../constants";
import { useTunnels } from "../context/tunnels";
import { useUIAppState } from "../context/ui-appState";
import type { MarkOptional, Merge } from "../utility-types";
import { composeEventHandlers } from "../utils";
import { useExcalidrawSetAppState } from "./App";
import { withInternalFallback } from "./hoc/withInternalFallback";
import { LibraryMenu } from "./LibraryMenu";
import type { SidebarProps, SidebarTriggerProps } from "./Sidebar/common";
import { Sidebar } from "./Sidebar/Sidebar";
import "../components/dropdownMenu/DropdownMenu.scss";
import { useExcalidrawSetAppState } from "./App";
import { LibraryMenu } from "./LibraryMenu";
import { SearchMenu } from "./SearchMenu";
import { Sidebar } from "./Sidebar/Sidebar";
import { withInternalFallback } from "./hoc/withInternalFallback";
import { LibraryIcon, searchIcon } from "./icons";
import type { MarkOptional, Merge } from "../utility-types";
import type { SidebarProps, SidebarTriggerProps } from "./Sidebar/common";
const DefaultSidebarTrigger = withInternalFallback(
"DefaultSidebarTrigger",
(

2
packages/excalidraw/components/DiagramToCodePlugin/DiagramToCodePlugin.tsx
View file

@ -1,5 +1,7 @@
import { useLayoutEffect } from "react";
import { useApp } from "../App";
import type { GenerateDiagramToCode } from "../../types";
export const DiagramToCodePlugin = (props: {

15
packages/excalidraw/components/Dialog.tsx
View file

@ -1,21 +1,24 @@
import clsx from "clsx";
import React, { useEffect, useState } from "react";
import { useSetAtom } from "../editor-jotai";
import { useCallbackRefState } from "../hooks/useCallbackRefState";
import { t } from "../i18n";
import { KEYS } from "../keys";
import { queryFocusableElements } from "../utils";
import {
useExcalidrawContainer,
useDevice,
useExcalidrawSetAppState,
} from "./App";
import { KEYS } from "../keys";
import "./Dialog.scss";
import { Island } from "./Island";
import { Modal } from "./Modal";
import { queryFocusableElements } from "../utils";
import { isLibraryMenuOpenAtom } from "./LibraryMenu";
import { useSetAtom } from "../editor-jotai";
import { t } from "../i18n";
import { Modal } from "./Modal";
import { CloseIcon } from "./icons";
import "./Dialog.scss";
export type DialogSize = number | "small" | "regular" | "wide" | undefined;
export interface DialogProps {

7
packages/excalidraw/components/DialogActionButton.tsx
View file

@ -1,8 +1,11 @@
import clsx from "clsx";
import type { ReactNode } from "react";
import "./DialogActionButton.scss";
import Spinner from "./Spinner";
import "./DialogActionButton.scss";
import type { ReactNode } from "react";
interface DialogActionButtonProps {
label: string;
children?: ReactNode;

19
packages/excalidraw/components/ElementLinkDialog.tsx
View file

@ -1,21 +1,24 @@
import { TextField } from "./TextField";
import type { AppProps, AppState, UIAppState } from "../types";
import DialogActionButton from "./DialogActionButton";
import { getSelectedElements } from "../scene";
import { useCallback, useEffect, useState } from "react";
import { normalizeLink } from "../data/url";
import {
defaultGetElementLinkFromSelection,
getLinkIdAndTypeFromSelection,
} from "../element/elementLink";
import { mutateElement } from "../element/mutateElement";
import { useCallback, useEffect, useState } from "react";
import { t } from "../i18n";
import type { ElementsMap, ExcalidrawElement } from "../element/types";
import { KEYS } from "../keys";
import { getSelectedElements } from "../scene";
import DialogActionButton from "./DialogActionButton";
import { TextField } from "./TextField";
import { ToolButton } from "./ToolButton";
import { TrashIcon } from "./icons";
import { KEYS } from "../keys";
import "./ElementLinkDialog.scss";
import { normalizeLink } from "../data/url";
import type { ElementsMap, ExcalidrawElement } from "../element/types";
import type { AppProps, AppState, UIAppState } from "../types";
const ElementLinkDialog = ({
sourceElementId,

3
packages/excalidraw/components/ErrorDialog.tsx
View file

@ -1,8 +1,9 @@
import React, { useState } from "react";
import { t } from "../i18n";
import { Dialog } from "./Dialog";
import { useExcalidrawContainer } from "./App";
import { Dialog } from "./Dialog";
export const ErrorDialog = ({
children,

10
packages/excalidraw/components/EyeDropper.tsx
View file

@ -1,19 +1,23 @@
import { useEffect, useRef } from "react";
import { createPortal } from "react-dom";
import { rgbToHex } from "../colors";
import { EVENT } from "../constants";
import { useUIAppState } from "../context/ui-appState";
import { atom } from "../editor-jotai";
import { useCreatePortalContainer } from "../hooks/useCreatePortalContainer";
import { useOutsideClick } from "../hooks/useOutsideClick";
import { useStable } from "../hooks/useStable";
import { KEYS } from "../keys";
import { getSelectedElements } from "../scene";
import { useApp, useExcalidrawContainer, useExcalidrawElements } from "./App";
import { useStable } from "../hooks/useStable";
import "./EyeDropper.scss";
import type { ColorPickerType } from "./ColorPicker/colorPickerUtils";
import type { ExcalidrawElement } from "../element/types";
import { atom } from "../editor-jotai";
import type { ColorPickerType } from "./ColorPicker/colorPickerUtils";
export type EyeDropperProperties = {
keepOpenOnAlt: boolean;

12
packages/excalidraw/components/FilledButton.tsx
View file

@ -1,11 +1,13 @@
import React, { forwardRef, useState } from "react";
import clsx from "clsx";
import React, { forwardRef, useState } from "react";
import { AbortError } from "../errors";
import { isPromiseLike } from "../utils";
import Spinner from "./Spinner";
import { tablerCheckIcon } from "./icons";
import "./FilledButton.scss";
import { AbortError } from "../errors";
import Spinner from "./Spinner";
import { isPromiseLike } from "../utils";
import { tablerCheckIcon } from "./icons";
export type ButtonVariant = "filled" | "outlined" | "icon";
export type ButtonColor =

4
packages/excalidraw/components/FixedSideContainer.tsx
View file

@ -1,8 +1,8 @@
import "./FixedSideContainer.scss";
import React from "react";
import clsx from "clsx";
import "./FixedSideContainer.scss";
type FixedSideContainerProps = {
children: React.ReactNode;
side: "top" | "left" | "right";

4
packages/excalidraw/components/FollowMode/FollowMode.tsx
View file

@ -1,7 +1,9 @@
import type { UserToFollow } from "../../types";
import { CloseIcon } from "../icons";
import "./FollowMode.scss";
import type { UserToFollow } from "../../types";
interface FollowModeProps {
width: number;
height: number;

16
packages/excalidraw/components/FontPicker/FontPicker.tsx
View file

@ -1,21 +1,23 @@
import React, { useCallback, useMemo } from "react";
import * as Popover from "@radix-ui/react-popover";
import React, { useCallback, useMemo } from "react";
import { FontPickerList } from "./FontPickerList";
import { FontPickerTrigger } from "./FontPickerTrigger";
import { FONT_FAMILY } from "../../constants";
import { t } from "../../i18n";
import { ButtonIconSelect } from "../ButtonIconSelect";
import { ButtonSeparator } from "../ButtonSeparator";
import {
FontFamilyCodeIcon,
FontFamilyNormalIcon,
FreedrawIcon,
} from "../icons";
import { ButtonSeparator } from "../ButtonSeparator";
import type { FontFamilyValues } from "../../element/types";
import { FONT_FAMILY } from "../../constants";
import { t } from "../../i18n";
import { FontPickerList } from "./FontPickerList";
import { FontPickerTrigger } from "./FontPickerTrigger";
import "./FontPicker.scss";
import type { FontFamilyValues } from "../../element/types";
export const DEFAULT_FONTS = [
{
value: FONT_FAMILY.Excalifont,

17
packages/excalidraw/components/FontPicker/FontPickerList.tsx
View file

@ -1,4 +1,3 @@
import type { JSX } from "react";
import React, {
useMemo,
useState,
@ -7,6 +6,11 @@ import React, {
useCallback,
type KeyboardEventHandler,
} from "react";
import { type FontFamilyValues } from "../../element/types";
import { Fonts } from "../../fonts";
import { t } from "../../i18n";
import { arrayToList, debounce, getFontFamilyString } from "../../utils";
import { useApp, useAppProps, useExcalidrawContainer } from "../App";
import { PropertiesPopover } from "../PropertiesPopover";
import { QuickSearch } from "../QuickSearch";
@ -16,14 +20,13 @@ import DropdownMenuItem, {
DropDownMenuItemBadgeType,
DropDownMenuItemBadge,
} from "../dropdownMenu/DropdownMenuItem";
import { type FontFamilyValues } from "../../element/types";
import { arrayToList, debounce, getFontFamilyString } from "../../utils";
import { t } from "../../i18n";
import { fontPickerKeyHandler } from "./keyboardNavHandlers";
import { Fonts } from "../../fonts";
import type { ValueOf } from "../../utility-types";
import { FontFamilyNormalIcon } from "../icons";
import { fontPickerKeyHandler } from "./keyboardNavHandlers";
import type { ValueOf } from "../../utility-types";
import type { JSX } from "react";
export interface FontDescriptor {
value: number;
icon: JSX.Element;

7
packages/excalidraw/components/FontPicker/FontPickerTrigger.tsx
View file

@ -1,11 +1,14 @@
import * as Popover from "@radix-ui/react-popover";
import { useMemo } from "react";
import { t } from "../../i18n";
import { ButtonIcon } from "../ButtonIcon";
import { TextIcon } from "../icons";
import type { FontFamilyValues } from "../../element/types";
import { t } from "../../i18n";
import { isDefaultFont } from "./FontPicker";
import type { FontFamilyValues } from "../../element/types";
interface FontPickerTriggerProps {
selectedFontFamily: FontFamilyValues | null;
}

4
packages/excalidraw/components/FontPicker/keyboardNavHandlers.ts
View file

@ -1,7 +1,9 @@
import type { Node } from "../../utils";
import { KEYS } from "../../keys";
import { type FontDescriptor } from "./FontPickerList";
import type { Node } from "../../utils";
interface FontPickerKeyNavHandlerProps {
event: React.KeyboardEvent<HTMLDivElement>;
inputRef: React.RefObject<HTMLInputElement | null>;

8
packages/excalidraw/components/HandButton.tsx
View file

@ -1,9 +1,11 @@
import "./ToolIcon.scss";
import clsx from "clsx";
import { KEYS } from "../keys";
import { ToolButton } from "./ToolButton";
import { handIcon } from "./icons";
import { KEYS } from "../keys";
import "./ToolIcon.scss";
type LockIconProps = {
title?: string;

1
packages/excalidraw/components/HelpButton.tsx
View file

@ -1,4 +1,5 @@
import { t } from "../i18n";
import { HelpIcon } from "./icons";
type HelpButtonProps = {

20
packages/excalidraw/components/HelpDialog.tsx
View file

@ -1,14 +1,18 @@
import type { JSX } from "react";
import React from "react";
import { t } from "../i18n";
import { KEYS } from "../keys";
import { Dialog } from "./Dialog";
import { getShortcutKey } from "../utils";
import "./HelpDialog.scss";
import { ExternalLinkIcon, GithubIcon, youtubeIcon } from "./icons";
import { getShortcutFromShortcutName } from "../actions/shortcuts";
import { probablySupportsClipboardBlob } from "../clipboard";
import { isDarwin, isFirefox, isWindows } from "../constants";
import { getShortcutFromShortcutName } from "../actions/shortcuts";
import { t } from "../i18n";
import { KEYS } from "../keys";
import { getShortcutKey } from "../utils";
import { Dialog } from "./Dialog";
import { ExternalLinkIcon, GithubIcon, youtubeIcon } from "./icons";
import "./HelpDialog.scss";
import type { JSX } from "react";
const Header = () => (
<div className="HelpDialog__header">

13
packages/excalidraw/components/HintViewer.tsx
View file

@ -1,5 +1,4 @@
import { t } from "../i18n";
import type { AppClassProperties, Device, UIAppState } from "../types";
import { isEraserActive } from "../appState";
import {
isFlowchartNodeElement,
isImageElement,
@ -7,14 +6,18 @@ import {
isTextBindableContainer,
isTextElement,
} from "../element/typeChecks";
import { getShortcutKey } from "../utils";
import { isEraserActive } from "../appState";
import { t } from "../i18n";
import { getShortcutKey } from "../utils";
import "./HintViewer.scss";
import { isNodeInFlowchart } from "../element/flowchart";
import { isGridModeEnabled } from "../snapping";
import { CANVAS_SEARCH_TAB, DEFAULT_SIDEBAR } from "../constants";
import "./HintViewer.scss";
import type { AppClassProperties, Device, UIAppState } from "../types";
interface HintViewerProps {
appState: UIAppState;
isMobile: boolean;

13
packages/excalidraw/components/IconPicker.tsx
View file

@ -1,15 +1,18 @@
import type { JSX } from "react";
import React, { useEffect } from "react";
import * as Popover from "@radix-ui/react-popover";
import { isArrowKey, KEYS } from "../keys";
import { getLanguage, t } from "../i18n";
import clsx from "clsx";
import Collapsible from "./Stats/Collapsible";
import React, { useEffect } from "react";
import { atom, useAtom } from "../editor-jotai";
import { getLanguage, t } from "../i18n";
import { isArrowKey, KEYS } from "../keys";
import Collapsible from "./Stats/Collapsible";
import { useDevice } from "./App";
import "./IconPicker.scss";
import type { JSX } from "react";
const moreOptionsAtom = atom(false);
type Option<T> = {

20
packages/excalidraw/components/ImageExportDialog.tsx
View file

@ -1,8 +1,6 @@
import { exportToCanvas } from "@excalidraw/utils/export";
import React, { useEffect, useRef, useState } from "react";
import type { ActionManager } from "../actions/manager";
import type { AppClassProperties, BinaryFiles, UIAppState } from "../types";
import {
actionExportWithDarkMode,
actionChangeExportBackground,
@ -17,25 +15,27 @@ import {
isFirefox,
EXPORT_SCALES,
} from "../constants";
import { prepareElementsForExport } from "../data";
import { canvasToBlob } from "../data/blob";
import { nativeFileSystemSupported } from "../data/filesystem";
import type { NonDeletedExcalidrawElement } from "../element/types";
import { useCopyStatus } from "../hooks/useCopiedIndicator";
import { t } from "../i18n";
import { isSomeElementSelected } from "../scene";
import { exportToCanvas } from "@excalidraw/utils/export";
import { cloneJSON } from "../utils";
import { copyIcon, downloadIcon, helpIcon } from "./icons";
import { Dialog } from "./Dialog";
import { RadioGroup } from "./RadioGroup";
import { Switch } from "./Switch";
import { Tooltip } from "./Tooltip";
import { FilledButton } from "./FilledButton";
import "./ImageExportDialog.scss";
import { FilledButton } from "./FilledButton";
import { cloneJSON } from "../utils";
import { prepareElementsForExport } from "../data";
import { useCopyStatus } from "../hooks/useCopiedIndicator";
import type { ActionManager } from "../actions/manager";
import type { NonDeletedExcalidrawElement } from "../element/types";
import type { AppClassProperties, BinaryFiles, UIAppState } from "../types";
const supportsContextFilters =
"filter" in document.createElement("canvas").getContext("2d")!;

6
packages/excalidraw/components/InitializeApp.tsx
View file

@ -1,9 +1,11 @@
import React, { useEffect, useState } from "react";
import { LoadingMessage } from "./LoadingMessage";
import type { Language } from "../i18n";
import { defaultLang, languages, setLanguage } from "../i18n";
import { LoadingMessage } from "./LoadingMessage";
import type { Theme } from "../element/types";
import type { Language } from "../i18n";
interface Props {
langCode: Language["code"];

4
packages/excalidraw/components/Island.tsx
View file

@ -1,8 +1,8 @@
import "./Island.scss";
import React from "react";
import clsx from "clsx";
import "./Island.scss";
type IslandProps = {
children: React.ReactNode;
padding?: number;

21
packages/excalidraw/components/JSONExportDialog.tsx
View file

@ -1,19 +1,22 @@
import React from "react";
import type { NonDeletedExcalidrawElement } from "../element/types";
import { t } from "../i18n";
import type { ExportOpts, BinaryFiles, UIAppState } from "../types";
import { Dialog } from "./Dialog";
import { exportToFileIcon, LinkIcon } from "./icons";
import { ToolButton } from "./ToolButton";
import { actionSaveFileToDisk } from "../actions/actionExport";
import { trackEvent } from "../analytics";
import { nativeFileSystemSupported } from "../data/filesystem";
import { t } from "../i18n";
import { getFrame } from "../utils";
import { Card } from "./Card";
import { Dialog } from "./Dialog";
import { ToolButton } from "./ToolButton";
import { exportToFileIcon, LinkIcon } from "./icons";
import "./ExportDialog.scss";
import { nativeFileSystemSupported } from "../data/filesystem";
import { trackEvent } from "../analytics";
import type { ActionManager } from "../actions/manager";
import { getFrame } from "../utils";
import type { NonDeletedExcalidrawElement } from "../element/types";
import type { ExportOpts, BinaryFiles, UIAppState } from "../types";
export type ExportCB = (
elements: readonly NonDeletedExcalidrawElement[],

6
packages/excalidraw/components/LaserPointerButton.tsx
View file

@ -1,9 +1,11 @@
import clsx from "clsx";
import "./ToolIcon.scss";
import clsx from "clsx";
import type { ToolButtonSize } from "./ToolButton";
import { laserPointerToolIcon } from "./icons";
import type { ToolButtonSize } from "./ToolButton";
type LaserPointerIconProps = {
title?: string;
name?: string;

95
packages/excalidraw/components/LayerUI.tsx
View file

@ -1,12 +1,58 @@
import clsx from "clsx";
import React from "react";
import type { ActionManager } from "../actions/manager";
import { mutateElement } from "../element/mutateElement";
import { ShapeCache } from "../scene/ShapeCache";
import Scene from "../scene/Scene";
import { actionToggleStats } from "../actions";
import { trackEvent } from "../analytics";
import { isHandToolActive } from "../appState";
import { CLASSES, DEFAULT_SIDEBAR, TOOL_TYPE } from "../constants";
import { TunnelsContext, useInitializeTunnels } from "../context/tunnels";
import { UIAppStateContext } from "../context/ui-appState";
import { useAtom, useAtomValue } from "../editor-jotai";
import { showSelectedShapeActions } from "../element";
import type { NonDeletedExcalidrawElement } from "../element/types";
import type { Language } from "../i18n";
import { t } from "../i18n";
import { calculateScrollCenter } from "../scene";
import { capitalizeString, isShallowEqual } from "../utils";
import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
import { LoadingMessage } from "./LoadingMessage";
import { LockButton } from "./LockButton";
import { MobileMenu } from "./MobileMenu";
import { PasteChartDialog } from "./PasteChartDialog";
import { Section } from "./Section";
import Stack from "./Stack";
import { UserList } from "./UserList";
import { PenModeButton } from "./PenModeButton";
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 { OverwriteConfirmDialog } from "./OverwriteConfirm/OverwriteConfirm";
import { LibraryIcon } from "./icons";
import { DefaultSidebar } from "./DefaultSidebar";
import { TTDDialog } from "./TTDDialog/TTDDialog";
import { Stats } from "./Stats";
import ElementLinkDialog from "./ElementLinkDialog";
import { ErrorDialog } from "./ErrorDialog";
import { EyeDropper, activeEyeDropperAtom } from "./EyeDropper";
import { FixedSideContainer } from "./FixedSideContainer";
import { HandButton } from "./HandButton";
import { HelpDialog } from "./HelpDialog";
import { HintViewer } from "./HintViewer";
import { ImageExportDialog } from "./ImageExportDialog";
import { Island } from "./Island";
import { JSONExportDialog } from "./JSONExportDialog";
import { LaserPointerButton } from "./LaserPointerButton";
import "./LayerUI.scss";
import "./Toolbar.scss";
import type { ActionManager } from "../actions/manager";
import type { NonDeletedExcalidrawElement } from "../element/types";
import type { Language } from "../i18n";
import type {
AppProps,
AppState,
@ -15,49 +61,6 @@ import type {
UIAppState,
AppClassProperties,
} from "../types";
import { capitalizeString, isShallowEqual } from "../utils";
import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
import { ErrorDialog } from "./ErrorDialog";
import { ImageExportDialog } from "./ImageExportDialog";
import { FixedSideContainer } from "./FixedSideContainer";
import { HintViewer } from "./HintViewer";
import { Island } from "./Island";
import { LoadingMessage } from "./LoadingMessage";
import { LockButton } from "./LockButton";
import { MobileMenu } from "./MobileMenu";
import { PasteChartDialog } from "./PasteChartDialog";
import { Section } from "./Section";
import { HelpDialog } from "./HelpDialog";
import Stack from "./Stack";
import { UserList } from "./UserList";
import { JSONExportDialog } from "./JSONExportDialog";
import { PenModeButton } from "./PenModeButton";
import { trackEvent } from "../analytics";
import { useDevice } from "./App";
import Footer from "./footer/Footer";
import { isSidebarDockedAtom } from "./Sidebar/Sidebar";
import { useAtom, useAtomValue } from "../editor-jotai";
import MainMenu from "./main-menu/MainMenu";
import { ActiveConfirmDialog } from "./ActiveConfirmDialog";
import { OverwriteConfirmDialog } from "./OverwriteConfirm/OverwriteConfirm";
import { HandButton } from "./HandButton";
import { isHandToolActive } from "../appState";
import { TunnelsContext, useInitializeTunnels } from "../context/tunnels";
import { LibraryIcon } from "./icons";
import { UIAppStateContext } from "../context/ui-appState";
import { DefaultSidebar } from "./DefaultSidebar";
import { EyeDropper, activeEyeDropperAtom } from "./EyeDropper";
import { mutateElement } from "../element/mutateElement";
import { ShapeCache } from "../scene/ShapeCache";
import Scene from "../scene/Scene";
import { LaserPointerButton } from "./LaserPointerButton";
import { TTDDialog } from "./TTDDialog/TTDDialog";
import { Stats } from "./Stats";
import { actionToggleStats } from "../actions";
import ElementLinkDialog from "./ElementLinkDialog";
import "./LayerUI.scss";
import "./Toolbar.scss";
interface LayerUIProps {
actionManager: ActionManager;

47
packages/excalidraw/components/LibraryMenu.tsx
View file

@ -6,13 +6,36 @@ import React, {
memo,
useRef,
} from "react";
import type Library from "../data/library";
import { trackEvent } from "../analytics";
import { LIBRARY_DISABLED_TYPES } from "../constants";
import { useUIAppState } from "../context/ui-appState";
import {
distributeLibraryItemsOnSquareGrid,
libraryItemsAtom,
} from "../data/library";
import { atom, useAtom } from "../editor-jotai";
import { t } from "../i18n";
import { randomId } from "../random";
import { getSelectedElements } from "../scene";
import { isShallowEqual } from "../utils";
import {
useApp,
useAppProps,
useExcalidrawElements,
useExcalidrawSetAppState,
} from "./App";
import { LibraryMenuControlButtons } from "./LibraryMenuControlButtons";
import LibraryMenuItems from "./LibraryMenuItems";
import Spinner from "./Spinner";
import "./LibraryMenu.scss";
import type {
ExcalidrawElement,
NonDeletedExcalidrawElement,
} from "../element/types";
import type {
LibraryItems,
LibraryItem,
@ -20,27 +43,7 @@ import type {
UIAppState,
AppClassProperties,
} from "../types";
import LibraryMenuItems from "./LibraryMenuItems";
import { trackEvent } from "../analytics";
import { atom, useAtom } from "../editor-jotai";
import Spinner from "./Spinner";
import {
useApp,
useAppProps,
useExcalidrawElements,
useExcalidrawSetAppState,
} from "./App";
import { getSelectedElements } from "../scene";
import { useUIAppState } from "../context/ui-appState";
import "./LibraryMenu.scss";
import { LibraryMenuControlButtons } from "./LibraryMenuControlButtons";
import type {
ExcalidrawElement,
NonDeletedExcalidrawElement,
} from "../element/types";
import { LIBRARY_DISABLED_TYPES } from "../constants";
import { isShallowEqual } from "../utils";
import type Library from "../data/library";
export const isLibraryMenuOpenAtom = atom(false);

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