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

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);

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

@ -1,5 +1,6 @@
import { VERSIONS } from "../constants";
import { t } from "../i18n";
import type { ExcalidrawProps, UIAppState } from "../types";
const LibraryMenuBrowseButton = ({

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

@ -1,7 +1,9 @@
import type { ExcalidrawProps, UIAppState } from "../types";
import LibraryMenuBrowseButton from "./LibraryMenuBrowseButton";
import clsx from "clsx";
import LibraryMenuBrowseButton from "./LibraryMenuBrowseButton";
import type { ExcalidrawProps, UIAppState } from "../types";
export const LibraryMenuControlButtons = ({
libraryReturnUrl,
theme,

37
packages/excalidraw/components/LibraryMenuHeaderContent.tsx
View file

@ -1,12 +1,23 @@
import clsx from "clsx";
import { useCallback, useState } from "react";
import { t } from "../i18n";
import Trans from "./Trans";
import { useAtom } from "../editor-jotai";
import type { LibraryItem, LibraryItems, UIAppState } from "../types";
import { useApp, useExcalidrawSetAppState } from "./App";
import { useUIAppState } from "../context/ui-appState";
import { fileOpen } from "../data/filesystem";
import { saveLibraryAsJSON } from "../data/json";
import type Library from "../data/library";
import { libraryItemsAtom } from "../data/library";
import { useAtom } from "../editor-jotai";
import { useLibraryCache } from "../hooks/useLibraryItemSvg";
import { t } from "../i18n";
import { muteFSAbortError } from "../utils";
import { useApp, useExcalidrawSetAppState } from "./App";
import ConfirmDialog from "./ConfirmDialog";
import { Dialog } from "./Dialog";
import { isLibraryMenuOpenAtom } from "./LibraryMenu";
import PublishLibrary from "./PublishLibrary";
import { ToolButton } from "./ToolButton";
import Trans from "./Trans";
import DropdownMenu from "./dropdownMenu/DropdownMenu";
import {
DotsIcon,
ExportIcon,
@ -14,17 +25,9 @@ import {
publishIcon,
TrashIcon,
} from "./icons";
import { ToolButton } from "./ToolButton";
import { fileOpen } from "../data/filesystem";
import { muteFSAbortError } from "../utils";
import ConfirmDialog from "./ConfirmDialog";
import PublishLibrary from "./PublishLibrary";
import { Dialog } from "./Dialog";
import DropdownMenu from "./dropdownMenu/DropdownMenu";
import { isLibraryMenuOpenAtom } from "./LibraryMenu";
import { useUIAppState } from "../context/ui-appState";
import clsx from "clsx";
import { useLibraryCache } from "../hooks/useLibraryItemSvg";
import type Library from "../data/library";
import type { LibraryItem, LibraryItems, UIAppState } from "../types";
const getSelectedItems = (
libraryItems: LibraryItems,

29
packages/excalidraw/components/LibraryMenuItems.tsx
View file

@ -5,30 +5,33 @@ import React, {
useRef,
useState,
} from "react";
import { serializeLibraryAsJSON } from "../data/json";
import { t } from "../i18n";
import type {
ExcalidrawProps,
LibraryItem,
LibraryItems,
UIAppState,
} from "../types";
import { arrayToMap } from "../utils";
import Stack from "./Stack";
import { MIME_TYPES } from "../constants";
import Spinner from "./Spinner";
import { serializeLibraryAsJSON } from "../data/json";
import { duplicateElements } from "../element/newElement";
import { useLibraryCache } from "../hooks/useLibraryItemSvg";
import { useScrollPosition } from "../hooks/useScrollPosition";
import { t } from "../i18n";
import { arrayToMap } from "../utils";
import { LibraryMenuControlButtons } from "./LibraryMenuControlButtons";
import { LibraryDropdownMenu } from "./LibraryMenuHeaderContent";
import {
LibraryMenuSection,
LibraryMenuSectionGrid,
} from "./LibraryMenuSection";
import { useScrollPosition } from "../hooks/useScrollPosition";
import { useLibraryCache } from "../hooks/useLibraryItemSvg";
import Spinner from "./Spinner";
import Stack from "./Stack";
import "./LibraryMenuItems.scss";
import type {
ExcalidrawProps,
LibraryItem,
LibraryItems,
UIAppState,
} from "../types";
// using an odd number of items per batch so the rendering creates an irregular
// pattern which looks more organic
const ITEMS_RENDERED_PER_BATCH = 17;

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

@ -1,10 +1,13 @@
import type { ReactNode } from "react";
import React, { memo, useEffect, useState } from "react";
import { useTransition } from "../hooks/useTransition";
import { EmptyLibraryUnit, LibraryUnit } from "./LibraryUnit";
import type { LibraryItem } from "../types";
import type { ExcalidrawElement, NonDeleted } from "../element/types";
import type { SvgCache } from "../hooks/useLibraryItemSvg";
import { useTransition } from "../hooks/useTransition";
import type { LibraryItem } from "../types";
import type { ReactNode } from "react";
type LibraryOrPendingItem = (
| LibraryItem

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

@ -1,12 +1,16 @@
import clsx from "clsx";
import { memo, useEffect, useRef, useState } from "react";
import { useLibraryItemSvg } from "../hooks/useLibraryItemSvg";
import { useDevice } from "./App";
import type { LibraryItem } from "../types";
import "./LibraryUnit.scss";
import { CheckboxItem } from "./CheckboxItem";
import { PlusIcon } from "./icons";
import "./LibraryUnit.scss";
import type { LibraryItem } from "../types";
import type { SvgCache } from "../hooks/useLibraryItemSvg";
import { useLibraryItemSvg } from "../hooks/useLibraryItemSvg";
export const LibraryUnit = memo(
({

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

@ -1,8 +1,11 @@
import { t } from "../i18n";
import { useState, useEffect } from "react";
import Spinner from "./Spinner";
import clsx from "clsx";
import { useState, useEffect } from "react";
import { THEME } from "../constants";
import { t } from "../i18n";
import Spinner from "./Spinner";
import type { Theme } from "../element/types";
export const LoadingMessage: React.FC<{ delay?: number; theme?: Theme }> = ({

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

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

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

@ -1,9 +1,10 @@
import type { JSX } from "react";
import clsx from "clsx";
import type { ToolButtonSize } from "./ToolButton";
import "./ToolIcon.scss";
import type { ToolButtonSize } from "./ToolButton";
import type { JSX } from "react";
const DEFAULT_SIZE: ToolButtonSize = "small";
export const ElementCanvasButton = (props: {

39
packages/excalidraw/components/MobileMenu.tsx
View file

@ -1,5 +1,24 @@
import type { JSX } from "react";
import React from "react";
import { isHandToolActive } from "../appState";
import { useTunnels } from "../context/tunnels";
import { showSelectedShapeActions } from "../element";
import { t } from "../i18n";
import { calculateScrollCenter } from "../scene";
import { SCROLLBAR_WIDTH, SCROLLBAR_MARGIN } from "../scene/scrollbars";
import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
import { FixedSideContainer } from "./FixedSideContainer";
import { HandButton } from "./HandButton";
import { HintViewer } from "./HintViewer";
import { Island } from "./Island";
import { LockButton } from "./LockButton";
import { PenModeButton } from "./PenModeButton";
import { Section } from "./Section";
import Stack from "./Stack";
import type { ActionManager } from "../actions/manager";
import type { NonDeletedExcalidrawElement } from "../element/types";
import type {
AppClassProperties,
AppProps,
@ -8,23 +27,7 @@ import type {
ExcalidrawProps,
UIAppState,
} from "../types";
import type { ActionManager } from "../actions/manager";
import { t } from "../i18n";
import Stack from "./Stack";
import { showSelectedShapeActions } from "../element";
import type { NonDeletedExcalidrawElement } from "../element/types";
import { FixedSideContainer } from "./FixedSideContainer";
import { Island } from "./Island";
import { HintViewer } from "./HintViewer";
import { calculateScrollCenter } from "../scene";
import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
import { Section } from "./Section";
import { SCROLLBAR_WIDTH, SCROLLBAR_MARGIN } from "../scene/scrollbars";
import { LockButton } from "./LockButton";
import { PenModeButton } from "./PenModeButton";
import { HandButton } from "./HandButton";
import { isHandToolActive } from "../appState";
import { useTunnels } from "../context/tunnels";
import type { JSX } from "react";
type MobileMenuProps = {
appState: UIAppState;

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

@ -1,11 +1,13 @@
import clsx from "clsx";
import { useRef } from "react";
import { createPortal } from "react-dom";
import { useCreatePortalContainer } from "../hooks/useCreatePortalContainer";
import { KEYS } from "../keys";
import "./Modal.scss";
import { createPortal } from "react-dom";
import clsx from "clsx";
import { KEYS } from "../keys";
import type { AppState } from "../types";
import { useCreatePortalContainer } from "../hooks/useCreatePortalContainer";
import { useRef } from "react";
export const Modal: React.FC<{
className?: string;

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

@ -3,12 +3,13 @@ import React from "react";
import { useTunnels } from "../../context/tunnels";
import { useAtom } from "../../editor-jotai";
import { Dialog } from "../Dialog";
import { FilledButton } from "../FilledButton";
import { withInternalFallback } from "../hoc/withInternalFallback";
import { alertTriangleIcon } from "../icons";
import { Actions, Action } from "./OverwriteConfirmActions";
import { overwriteConfirmStateAtom } from "./OverwriteConfirmState";
import { FilledButton } from "../FilledButton";
import { alertTriangleIcon } from "../icons";
import { Actions, Action } from "./OverwriteConfirmActions";
import "./OverwriteConfirm.scss";
export type OverwriteConfirmDialogProps = {

7
packages/excalidraw/components/OverwriteConfirm/OverwriteConfirmActions.tsx
View file

@ -1,9 +1,10 @@
import React from "react";
import { FilledButton } from "../FilledButton";
import { useExcalidrawActionManager, useExcalidrawSetAppState } from "../App";
import { actionSaveFileToDisk } from "../../actions";
import { useI18n } from "../../i18n";
import { actionChangeExportEmbedScene } from "../../actions/actionExport";
import { useI18n } from "../../i18n";
import { useExcalidrawActionManager, useExcalidrawSetAppState } from "../App";
import { FilledButton } from "../FilledButton";
export type ActionProps = {
title: string;

1
packages/excalidraw/components/OverwriteConfirm/OverwriteConfirmState.ts
View file

@ -1,4 +1,5 @@
import { atom, editorJotaiStore } from "../../editor-jotai";
import type React from "react";
export type OverwriteConfirmState =

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

@ -1,17 +1,20 @@
import oc from "open-color";
import React, { useLayoutEffect, useRef, useState } from "react";
import { trackEvent } from "../analytics";
import type { ChartElements, Spreadsheet } from "../charts";
import { renderSpreadsheet } from "../charts";
import type { ChartType } from "../element/types";
import { t } from "../i18n";
import { exportToSvg } from "../scene/export";
import type { UIAppState } from "../types";
import { useApp } from "./App";
import { Dialog } from "./Dialog";
import "./PasteChartDialog.scss";
import type { ChartElements, Spreadsheet } from "../charts";
import type { ChartType } from "../element/types";
import type { UIAppState } from "../types";
type OnInsertChart = (chartType: ChartType, elements: ChartElements) => void;
const ChartPreviewBtn = (props: {

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

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

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

@ -1,8 +1,10 @@
import React, { useLayoutEffect, useRef, useEffect } from "react";
import "./Popover.scss";
import { unstable_batchedUpdates } from "react-dom";
import { queryFocusableElements } from "../utils";
import { KEYS } from "../keys";
import { queryFocusableElements } from "../utils";
import "./Popover.scss";
type Props = {
top?: number;

11
packages/excalidraw/components/ProjectName.tsx
View file

@ -1,12 +1,13 @@
import "./TextInput.scss";
import React, { useState } from "react";
import { focusNearestParent } from "../utils";
import "./ProjectName.scss";
import { useExcalidrawContainer } from "./App";
import { focusNearestParent } from "../utils";
import { KEYS } from "../keys";
import { useExcalidrawContainer } from "./App";
import "./TextInput.scss";
import "./ProjectName.scss";
type Props = {
value: string;
onChange: (value: string) => void;

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

@ -1,10 +1,11 @@
import React, { type ReactNode } from "react";
import clsx from "clsx";
import * as Popover from "@radix-ui/react-popover";
import clsx from "clsx";
import React, { type ReactNode } from "react";
import { isInteractive } from "../utils";
import { useDevice } from "./App";
import { Island } from "./Island";
import { isInteractive } from "../utils";
interface PropertiesPopoverProps {
className?: string;

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

@ -1,13 +1,7 @@
import type { ReactNode } from "react";
import { useCallback, useEffect, useRef, useState } from "react";
import OpenColor from "open-color";
import { Dialog } from "./Dialog";
import { t } from "../i18n";
import Trans from "./Trans";
import type { LibraryItems, LibraryItem, UIAppState } from "../types";
import { exportToCanvas, exportToSvg } from "@excalidraw/utils/export";
import OpenColor from "open-color";
import { useCallback, useEffect, useRef, useState } from "react";
import {
EDITOR_LS_KEYS,
EXPORT_DATA_TYPES,
@ -15,16 +9,23 @@ import {
MIME_TYPES,
VERSIONS,
} from "../constants";
import type { ExportedLibraryData } from "../data/types";
import { canvasToBlob, resizeImageFile } from "../data/blob";
import { chunk } from "../utils";
import DialogActionButton from "./DialogActionButton";
import { CloseIcon } from "./icons";
import { ToolButton } from "./ToolButton";
import { EditorLocalStorage } from "../data/EditorLocalStorage";
import { canvasToBlob, resizeImageFile } from "../data/blob";
import { t } from "../i18n";
import { chunk } from "../utils";
import { Dialog } from "./Dialog";
import DialogActionButton from "./DialogActionButton";
import { ToolButton } from "./ToolButton";
import Trans from "./Trans";
import { CloseIcon } from "./icons";
import "./PublishLibrary.scss";
import type { ReactNode } from "react";
import type { ExportedLibraryData } from "../data/types";
import type { LibraryItems, LibraryItem, UIAppState } from "../types";
interface PublishLibraryDataParams {
authorName: string;
githubHandle: string;

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

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

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

@ -1,4 +1,5 @@
import clsx from "clsx";
import "./RadioGroup.scss";
export type RadioGroupChoice<T> = {

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

@ -1,6 +1,8 @@
import React, { useEffect } from "react";
import { getFormValue } from "../actions/actionProperties";
import { t } from "../i18n";
import "./Range.scss";
export type RangeProps = {

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

@ -1,8 +1,9 @@
import { useEffect, useRef } from "react";
import type { Trail } from "../animated-trail";
import "./SVGLayer.scss";
import type { Trail } from "../animated-trail";
type SVGLayerProps = {
trails: Trail[];
};

38
packages/excalidraw/components/SearchMenu.tsx
View file

@ -1,25 +1,29 @@
import { Fragment, memo, useEffect, useRef, useState } from "react";
import { collapseDownIcon, upIcon, searchIcon } from "./icons";
import { TextField } from "./TextField";
import { Button } from "./Button";
import { useApp, useExcalidrawSetAppState } from "./App";
import debounce from "lodash.debounce";
import type { AppClassProperties } from "../types";
import { isTextElement, newTextElement } from "../element";
import type { ExcalidrawTextElement } from "../element/types";
import { addEventListener, getFontString } from "../utils";
import { KEYS } from "../keys";
import { round } from "@excalidraw/math";
import clsx from "clsx";
import { atom, useAtom } from "../editor-jotai";
import { t } from "../i18n";
import { isElementCompletelyInViewport } from "../element/sizeHelpers";
import { randomInteger } from "../random";
import debounce from "lodash.debounce";
import { Fragment, memo, useEffect, useRef, useState } from "react";
import { CLASSES, EVENT } from "../constants";
import { atom, useAtom } from "../editor-jotai";
import { isTextElement, newTextElement } from "../element";
import { isElementCompletelyInViewport } from "../element/sizeHelpers";
import { measureText } from "../element/textMeasurements";
import { useStable } from "../hooks/useStable";
import { t } from "../i18n";
import { KEYS } from "../keys";
import { randomInteger } from "../random";
import { addEventListener, getFontString } from "../utils";
import { useApp, useExcalidrawSetAppState } from "./App";
import { Button } from "./Button";
import { TextField } from "./TextField";
import { collapseDownIcon, upIcon, searchIcon } from "./icons";
import "./SearchMenu.scss";
import { round } from "@excalidraw/math";
import { measureText } from "../element/textMeasurements";
import type { ExcalidrawTextElement } from "../element/types";
import type { AppClassProperties } from "../types";
const searchQueryAtom = atom<string>("");
export const searchItemInFocusAtom = atom<number | null>(null);

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

@ -1,5 +1,7 @@
import React from "react";
import { t } from "../i18n";
import { useExcalidrawContainer } from "./App";
export const Section: React.FC<{

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

@ -1,12 +1,12 @@
import { useRef, useState } from "react";
import { copyTextToSystemClipboard } from "../clipboard";
import { useCopyStatus } from "../hooks/useCopiedIndicator";
import { useI18n } from "../i18n";
import { Dialog } from "./Dialog";
import { TextField } from "./TextField";
import { FilledButton } from "./FilledButton";
import { useCopyStatus } from "../hooks/useCopiedIndicator";
import { TextField } from "./TextField";
import { copyIcon } from "./icons";
import "./ShareableLinkDialog.scss";

4
packages/excalidraw/components/Sidebar/Sidebar.test.tsx
View file

@ -1,4 +1,6 @@
import React from "react";
import { vi } from "vitest";
import { DEFAULT_SIDEBAR } from "../../constants";
import { Excalidraw, Sidebar } from "../../index";
import {
@ -10,7 +12,7 @@ import {
waitFor,
withExcalidrawDimensions,
} from "../../tests/test-utils";
import { vi } from "vitest";
import {
assertExcalidrawWithSidebar,
assertSidebarDockButton,

29
packages/excalidraw/components/Sidebar/Sidebar.tsx
View file

@ -1,3 +1,4 @@
import clsx from "clsx";
import React, {
useEffect,
useLayoutEffect,
@ -7,26 +8,28 @@ import React, {
useImperativeHandle,
useCallback,
} from "react";
import { Island } from "../Island";
import { atom, useSetAtom } from "../../editor-jotai";
import type { SidebarProps, SidebarPropsContextValue } from "./common";
import { SidebarPropsContext } from "./common";
import { SidebarHeader } from "./SidebarHeader";
import clsx from "clsx";
import { useDevice, useExcalidrawSetAppState } from "../App";
import { updateObject } from "../../utils";
import { KEYS } from "../../keys";
import { EVENT } from "../../constants";
import { SidebarTrigger } from "./SidebarTrigger";
import { SidebarTabTriggers } from "./SidebarTabTriggers";
import { useUIAppState } from "../../context/ui-appState";
import { atom, useSetAtom } from "../../editor-jotai";
import { useOutsideClick } from "../../hooks/useOutsideClick";
import { KEYS } from "../../keys";
import { updateObject } from "../../utils";
import { useDevice, useExcalidrawSetAppState } from "../App";
import { Island } from "../Island";
import { SidebarHeader } from "./SidebarHeader";
import { SidebarTabTrigger } from "./SidebarTabTrigger";
import { SidebarTabTriggers } from "./SidebarTabTriggers";
import { SidebarTrigger } from "./SidebarTrigger";
import { SidebarPropsContext } from "./common";
import { SidebarTabs } from "./SidebarTabs";
import { SidebarTab } from "./SidebarTab";
import { useUIAppState } from "../../context/ui-appState";
import { useOutsideClick } from "../../hooks/useOutsideClick";
import "./Sidebar.scss";
import type { SidebarProps, SidebarPropsContextValue } from "./common";
/**
* Flags whether the currently rendered Sidebar is docked or not, for use
* in upstream components that need to act on this (e.g. LayerUI to shift the

8
packages/excalidraw/components/Sidebar/SidebarHeader.tsx
View file

@ -1,11 +1,13 @@
import clsx from "clsx";
import { useContext } from "react";
import { t } from "../../i18n";
import { useDevice } from "../App";
import { SidebarPropsContext } from "./common";
import { CloseIcon, PinIcon } from "../icons";
import { Tooltip } from "../Tooltip";
import { Button } from "../Button";
import { Tooltip } from "../Tooltip";
import { CloseIcon, PinIcon } from "../icons";
import { SidebarPropsContext } from "./common";
export const SidebarHeader = ({
children,

1
packages/excalidraw/components/Sidebar/SidebarTab.tsx
View file

@ -1,4 +1,5 @@
import * as RadixTabs from "@radix-ui/react-tabs";
import type { SidebarTabName } from "../../types";
export const SidebarTab = ({

1
packages/excalidraw/components/Sidebar/SidebarTabTrigger.tsx
View file

@ -1,4 +1,5 @@
import * as RadixTabs from "@radix-ui/react-tabs";
import type { SidebarTabName } from "../../types";
export const SidebarTabTrigger = ({

1
packages/excalidraw/components/Sidebar/SidebarTabs.tsx
View file

@ -1,4 +1,5 @@
import * as RadixTabs from "@radix-ui/react-tabs";
import { useUIAppState } from "../../context/ui-appState";
import { useExcalidrawSetAppState } from "../App";

8
packages/excalidraw/components/Sidebar/SidebarTrigger.tsx
View file

@ -1,10 +1,12 @@
import { useExcalidrawSetAppState } from "../App";
import type { SidebarTriggerProps } from "./common";
import { useUIAppState } from "../../context/ui-appState";
import clsx from "clsx";
import { useUIAppState } from "../../context/ui-appState";
import { useExcalidrawSetAppState } from "../App";
import "./SidebarTrigger.scss";
import type { SidebarTriggerProps } from "./common";
export const SidebarTrigger = ({
name,
tab,

3
packages/excalidraw/components/Sidebar/common.ts
View file

@ -1,6 +1,7 @@
import type { JSX } from "react";
import React from "react";
import type { AppState, SidebarName, SidebarTabName } from "../../types";
import type { JSX } from "react";
export type SidebarTriggerProps = {
name: SidebarName;

1
packages/excalidraw/components/Sidebar/siderbar.test.helpers.tsx
View file

@ -1,4 +1,5 @@
import React from "react";
import { Excalidraw } from "../..";
import {
GlobalTestState,

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

@ -1,8 +1,8 @@
import "./Stack.scss";
import React, { forwardRef } from "react";
import clsx from "clsx";
import "./Stack.scss";
type StackProps = {
children: React.ReactNode;
gap?: number;

12
packages/excalidraw/components/Stats/Angle.tsx
View file

@ -1,15 +1,19 @@
import { degreesToRadians, radiansToDegrees } from "@excalidraw/math";
import type { Degrees } from "@excalidraw/math";
import { mutateElement } from "../../element/mutateElement";
import { getBoundTextElement } from "../../element/textElement";
import { isArrowElement, isElbowArrow } from "../../element/typeChecks";
import type { ExcalidrawElement } from "../../element/types";
import { angleIcon } from "../icons";
import DragInput from "./DragInput";
import type { DragInputCallbackType } from "./DragInput";
import { getStepSizedValue, isPropertyEditable, updateBindings } from "./utils";
import type { DragInputCallbackType } from "./DragInput";
import type { ExcalidrawElement } from "../../element/types";
import type Scene from "../../scene/Scene";
import type { AppState } from "../../types";
import type { Degrees } from "@excalidraw/math";
import { degreesToRadians, radiansToDegrees } from "@excalidraw/math";
interface AngleProps {
element: ExcalidrawElement;

6
packages/excalidraw/components/Stats/CanvasGrid.tsx
View file

@ -1,8 +1,10 @@
import { getNormalizedGridStep } from "../../scene";
import StatsDragInput from "./DragInput";
import { getStepSizedValue } from "./utils";
import type Scene from "../../scene/Scene";
import type { AppState } from "../../types";
import { getStepSizedValue } from "./utils";
import { getNormalizedGridStep } from "../../scene";
interface PositionProps {
property: "gridStep";

21
packages/excalidraw/components/Stats/Dimension.tsx
View file

@ -1,18 +1,21 @@
import type { ExcalidrawElement } from "../../element/types";
import DragInput from "./DragInput";
import type { DragInputCallbackType } from "./DragInput";
import { getStepSizedValue, isPropertyEditable } from "./utils";
import { clamp, round } from "@excalidraw/math";
import { MIN_WIDTH_OR_HEIGHT } from "../../constants";
import { resizeSingleElement } from "../../element/resizeElements";
import type Scene from "../../scene/Scene";
import type { AppState } from "../../types";
import { isImageElement } from "../../element/typeChecks";
import {
MINIMAL_CROP_SIZE,
getUncroppedWidthAndHeight,
} from "../../element/cropElement";
import { mutateElement } from "../../element/mutateElement";
import { clamp, round } from "@excalidraw/math";
import { resizeSingleElement } from "../../element/resizeElements";
import { isImageElement } from "../../element/typeChecks";
import DragInput from "./DragInput";
import { getStepSizedValue, isPropertyEditable } from "./utils";
import type { DragInputCallbackType } from "./DragInput";
import type { ExcalidrawElement } from "../../element/types";
import type Scene from "../../scene/Scene";
import type { AppState } from "../../types";
interface DimensionDragInputProps {
property: "width" | "height";

21
packages/excalidraw/components/Stats/DragInput.tsx
View file

@ -1,19 +1,22 @@
import { useEffect, useRef, useState } from "react";
import { EVENT } from "../../constants";
import { KEYS } from "../../keys";
import type { ElementsMap, ExcalidrawElement } from "../../element/types";
import { deepCopyElement } from "../../element/newElement";
import clsx from "clsx";
import { useEffect, useRef, useState } from "react";
import { EVENT } from "../../constants";
import { deepCopyElement } from "../../element/newElement";
import { KEYS } from "../../keys";
import { CaptureUpdateAction } from "../../store";
import { cloneJSON } from "../../utils";
import { useApp } from "../App";
import { InlineIcon } from "../InlineIcon";
import type { StatsInputProperty } from "./utils";
import { SMALLEST_DELTA } from "./utils";
import { CaptureUpdateAction } from "../../store";
import type Scene from "../../scene/Scene";
import "./DragInput.scss";
import type { StatsInputProperty } from "./utils";
import type { ElementsMap, ExcalidrawElement } from "../../element/types";
import type Scene from "../../scene/Scene";
import type { AppState } from "../../types";
import { cloneJSON } from "../../utils";
export type DragInputCallbackType<
P extends StatsInputProperty,

18
packages/excalidraw/components/Stats/FontSize.tsx
View file

@ -1,17 +1,19 @@
import { isTextElement, redrawTextBoundingBox } from "../../element";
import { mutateElement } from "../../element/mutateElement";
import { getBoundTextElement } from "../../element/textElement";
import { hasBoundTextElement } from "../../element/typeChecks";
import { fontSizeIcon } from "../icons";
import StatsDragInput from "./DragInput";
import { getStepSizedValue } from "./utils";
import type { DragInputCallbackType } from "./DragInput";
import type {
ExcalidrawElement,
ExcalidrawTextElement,
} from "../../element/types";
import StatsDragInput from "./DragInput";
import type { DragInputCallbackType } from "./DragInput";
import { mutateElement } from "../../element/mutateElement";
import { getStepSizedValue } from "./utils";
import { fontSizeIcon } from "../icons";
import type Scene from "../../scene/Scene";
import type { AppState } from "../../types";
import { isTextElement, redrawTextBoundingBox } from "../../element";
import { hasBoundTextElement } from "../../element/typeChecks";
import { getBoundTextElement } from "../../element/textElement";
interface FontSizeProps {
element: ExcalidrawElement;

14
packages/excalidraw/components/Stats/MultiAngle.tsx
View file

@ -1,16 +1,20 @@
import { degreesToRadians, radiansToDegrees } from "@excalidraw/math";
import type { Degrees } from "@excalidraw/math";
import { mutateElement } from "../../element/mutateElement";
import { getBoundTextElement } from "../../element/textElement";
import { isArrowElement } from "../../element/typeChecks";
import type { ExcalidrawElement } from "../../element/types";
import { isInGroup } from "../../groups";
import type Scene from "../../scene/Scene";
import { angleIcon } from "../icons";
import DragInput from "./DragInput";
import type { DragInputCallbackType } from "./DragInput";
import { getStepSizedValue, isPropertyEditable } from "./utils";
import type { DragInputCallbackType } from "./DragInput";
import type { ExcalidrawElement } from "../../element/types";
import type Scene from "../../scene/Scene";
import type { AppState } from "../../types";
import type { Degrees } from "@excalidraw/math";
import { degreesToRadians, radiansToDegrees } from "@excalidraw/math";
interface MultiAngleProps {
elements: readonly ExcalidrawElement[];

17
packages/excalidraw/components/Stats/MultiDimension.tsx
View file

@ -1,4 +1,7 @@
import { pointFrom, type GlobalPoint } from "@excalidraw/math";
import { useMemo } from "react";
import { MIN_WIDTH_OR_HEIGHT } from "../../constants";
import { getCommonBounds, isTextElement } from "../../element";
import { updateBoundElements } from "../../element/binding";
import { mutateElement } from "../../element/mutateElement";
@ -10,6 +13,13 @@ import {
getBoundTextElement,
handleBindTextResize,
} from "../../element/textElement";
import DragInput from "./DragInput";
import { getAtomicUnits, getStepSizedValue, isPropertyEditable } from "./utils";
import { getElementsInAtomicUnit } from "./utils";
import type { DragInputCallbackType } from "./DragInput";
import type { AtomicUnit } from "./utils";
import type {
ElementsMap,
ExcalidrawElement,
@ -17,13 +27,6 @@ import type {
} from "../../element/types";
import type Scene from "../../scene/Scene";
import type { AppState } from "../../types";
import DragInput from "./DragInput";
import type { DragInputCallbackType } from "./DragInput";
import { getAtomicUnits, getStepSizedValue, isPropertyEditable } from "./utils";
import { getElementsInAtomicUnit } from "./utils";
import type { AtomicUnit } from "./utils";
import { MIN_WIDTH_OR_HEIGHT } from "../../constants";
import { pointFrom, type GlobalPoint } from "@excalidraw/math";
interface MultiDimensionProps {
property: "width" | "height";

14
packages/excalidraw/components/Stats/MultiFontSize.tsx
View file

@ -1,19 +1,21 @@
import { isTextElement, redrawTextBoundingBox } from "../../element";
import { mutateElement } from "../../element/mutateElement";
import { getBoundTextElement } from "../../element/textElement";
import { hasBoundTextElement } from "../../element/typeChecks";
import { isInGroup } from "../../groups";
import { fontSizeIcon } from "../icons";
import StatsDragInput from "./DragInput";
import { getStepSizedValue } from "./utils";
import type { DragInputCallbackType } from "./DragInput";
import type {
ExcalidrawElement,
ExcalidrawTextElement,
NonDeletedSceneElementsMap,
} from "../../element/types";
import { isInGroup } from "../../groups";
import type Scene from "../../scene/Scene";
import { fontSizeIcon } from "../icons";
import StatsDragInput from "./DragInput";
import type { DragInputCallbackType } from "./DragInput";
import { getStepSizedValue } from "./utils";
import type { AppState } from "../../types";
import { getBoundTextElement } from "../../element/textElement";
interface MultiFontSizeProps {
elements: readonly ExcalidrawElement[];

19
packages/excalidraw/components/Stats/MultiPosition.tsx
View file

@ -1,3 +1,14 @@
import { pointFrom, pointRotateRads } from "@excalidraw/math";
import { useMemo } from "react";
import { getCommonBounds, isTextElement } from "../../element";
import StatsDragInput from "./DragInput";
import { getAtomicUnits, getStepSizedValue, isPropertyEditable } from "./utils";
import { getElementsInAtomicUnit, moveElement } from "./utils";
import type { DragInputCallbackType } from "./DragInput";
import type { AtomicUnit } from "./utils";
import type {
ElementsMap,
ExcalidrawElement,
@ -5,15 +16,7 @@ import type {
NonDeletedSceneElementsMap,
} from "../../element/types";
import type Scene from "../../scene/Scene";
import StatsDragInput from "./DragInput";
import type { DragInputCallbackType } from "./DragInput";
import { getAtomicUnits, getStepSizedValue, isPropertyEditable } from "./utils";
import { getCommonBounds, isTextElement } from "../../element";
import { useMemo } from "react";
import { getElementsInAtomicUnit, moveElement } from "./utils";
import type { AtomicUnit } from "./utils";
import type { AppState } from "../../types";
import { pointFrom, pointRotateRads } from "@excalidraw/math";
interface MultiPositionProps {
property: "x" | "y";

17
packages/excalidraw/components/Stats/Position.tsx
View file

@ -1,16 +1,19 @@
import type { ElementsMap, ExcalidrawElement } from "../../element/types";
import StatsDragInput from "./DragInput";
import type { DragInputCallbackType } from "./DragInput";
import { getStepSizedValue, moveElement } from "./utils";
import type Scene from "../../scene/Scene";
import type { AppState } from "../../types";
import { clamp, pointFrom, pointRotateRads, round } from "@excalidraw/math";
import { isImageElement } from "../../element/typeChecks";
import {
getFlipAdjustedCropPosition,
getUncroppedWidthAndHeight,
} from "../../element/cropElement";
import { mutateElement } from "../../element/mutateElement";
import { isImageElement } from "../../element/typeChecks";
import StatsDragInput from "./DragInput";
import { getStepSizedValue, moveElement } from "./utils";
import type { DragInputCallbackType } from "./DragInput";
import type { ElementsMap, ExcalidrawElement } from "../../element/types";
import type Scene from "../../scene/Scene";
import type { AppState } from "../../types";
interface PositionProps {
property: "x" | "y";

55
packages/excalidraw/components/Stats/index.tsx
View file

@ -1,37 +1,40 @@
import { round } from "@excalidraw/math";
import clsx from "clsx";
import throttle from "lodash.throttle";
import { useEffect, useMemo, useState, memo } from "react";
import { STATS_PANELS } from "../../constants";
import { getCommonBounds } from "../../element/bounds";
import type { NonDeletedExcalidrawElement } from "../../element/types";
import { getUncroppedWidthAndHeight } from "../../element/cropElement";
import { isElbowArrow, isImageElement } from "../../element/typeChecks";
import { frameAndChildrenSelectedTogether } from "../../frame";
import { elementsAreInSameGroup } from "../../groups";
import { t } from "../../i18n";
import { isGridModeEnabled } from "../../snapping";
import { useExcalidrawAppState, useExcalidrawSetAppState } from "../App";
import { Island } from "../Island";
import { CloseIcon } from "../icons";
import Angle from "./Angle";
import CanvasGrid from "./CanvasGrid";
import Collapsible from "./Collapsible";
import Dimension from "./Dimension";
import FontSize from "./FontSize";
import MultiAngle from "./MultiAngle";
import MultiDimension from "./MultiDimension";
import MultiFontSize from "./MultiFontSize";
import MultiPosition from "./MultiPosition";
import Position from "./Position";
import { getAtomicUnits } from "./utils";
import "./Stats.scss";
import type { NonDeletedExcalidrawElement } from "../../element/types";
import type {
AppClassProperties,
AppState,
ExcalidrawProps,
} from "../../types";
import { CloseIcon } from "../icons";
import { Island } from "../Island";
import throttle from "lodash.throttle";
import Dimension from "./Dimension";
import Angle from "./Angle";
import FontSize from "./FontSize";
import MultiDimension from "./MultiDimension";
import { elementsAreInSameGroup } from "../../groups";
import MultiAngle from "./MultiAngle";
import MultiFontSize from "./MultiFontSize";
import Position from "./Position";
import MultiPosition from "./MultiPosition";
import Collapsible from "./Collapsible";
import { useExcalidrawAppState, useExcalidrawSetAppState } from "../App";
import { getAtomicUnits } from "./utils";
import { STATS_PANELS } from "../../constants";
import { isElbowArrow, isImageElement } from "../../element/typeChecks";
import CanvasGrid from "./CanvasGrid";
import clsx from "clsx";
import "./Stats.scss";
import { isGridModeEnabled } from "../../snapping";
import { getUncroppedWidthAndHeight } from "../../element/cropElement";
import { round } from "@excalidraw/math";
import { frameAndChildrenSelectedTogether } from "../../frame";
interface StatsProps {
app: AppClassProperties;

32
packages/excalidraw/components/Stats/stats.test.tsx
View file

@ -1,31 +1,35 @@
import React from "react";
import { degreesToRadians, pointFrom, pointRotateRads } from "@excalidraw/math";
import { act, fireEvent, queryByTestId } from "@testing-library/react";
import React from "react";
import { vi } from "vitest";
import type { Degrees } from "@excalidraw/math";
import { Excalidraw, mutateElement } from "../..";
import { actionGroup } from "../../actions";
import { getCommonBounds, isTextElement } from "../../element";
import { isInGroup } from "../../groups";
import { t } from "../../i18n";
import { reseed } from "../../random";
import * as StaticScene from "../../renderer/staticScene";
import { API } from "../../tests/helpers/api";
import { Keyboard, Pointer, UI } from "../../tests/helpers/ui";
import { getStepSizedValue } from "./utils";
import { getTextEditor, updateTextEditor } from "../../tests/queries/dom";
import {
GlobalTestState,
mockBoundingClientRect,
render,
restoreOriginalGetBoundingClientRect,
} from "../../tests/test-utils";
import * as StaticScene from "../../renderer/staticScene";
import { vi } from "vitest";
import { reseed } from "../../random";
import { setDateTimeForTests } from "../../utils";
import { Excalidraw, mutateElement } from "../..";
import { t } from "../../i18n";
import { getStepSizedValue } from "./utils";
import type {
ExcalidrawElement,
ExcalidrawLinearElement,
ExcalidrawTextElement,
} from "../../element/types";
import { getTextEditor, updateTextEditor } from "../../tests/queries/dom";
import { getCommonBounds, isTextElement } from "../../element";
import { API } from "../../tests/helpers/api";
import { actionGroup } from "../../actions";
import { isInGroup } from "../../groups";
import type { Degrees } from "@excalidraw/math";
import { degreesToRadians, pointFrom, pointRotateRads } from "@excalidraw/math";
const { h } = window;
const mouse = new Pointer("mouse");

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