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: separate elements logic into a standalone package (#9285)
Some checks failed
Auto release excalidraw next / Auto-release-excalidraw-next (push) Failing after 2m36s
Details
Build Docker image / build-docker (push) Failing after 6s
Details
Cancel previous runs / cancel (push) Failing after 1s
Details
Publish Docker / publish-docker (push) Failing after 31s
Details
New Sentry production release / sentry (push) Failing after 2m3s
Details

Browse source
This commit is contained in:
Marcel Mraz 2025-03-26 15:24:59 +01:00 • committed by GitHub
parent a18f059188
commit 432a46ef9e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
372 changed files with 3466 additions and 2466 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,24 +1,41 @@
import clsx from "clsx";
import { useState } from "react";
import { actionToggleZenMode } from "../actions";
import {
CLASSES,
KEYS,
capitalizeString,
isTransparent,
} from "@excalidraw/common";
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";
} from "@excalidraw/element/textElement";
import {
hasBoundTextElement,
isElbowArrow,
isImageElement,
isLinearElement,
isTextElement,
} from "../element/typeChecks";
} from "@excalidraw/element/typeChecks";
import { hasStrokeColor, toolIsArrow } from "@excalidraw/element/comparisons";
import type {
ExcalidrawElement,
ExcalidrawElementType,
NonDeletedElementsMap,
NonDeletedSceneElementsMap,
} from "@excalidraw/element/types";
import { actionToggleZenMode } from "../actions";
import { alignActionsPredicate } from "../actions/actionAlign";
import { trackEvent } from "../analytics";
import { useTunnels } from "../context/tunnels";
import { t } from "../i18n";
import {
canChangeRoundness,
@ -28,9 +45,8 @@ import {
hasStrokeStyle,
hasStrokeWidth,
} from "../scene";
import { hasStrokeColor, toolIsArrow } from "../scene/comparisons";
import { SHAPES } from "../shapes";
import { capitalizeString, isTransparent } from "../utils";
import { SHAPES } from "./shapes";
import "./Actions.scss";
@ -48,12 +64,6 @@ import {
MagicIcon,
} from "./icons";
import type {
ExcalidrawElement,
ExcalidrawElementType,
NonDeletedElementsMap,
NonDeletedSceneElementsMap,
} from "../element/types";
import type { AppClassProperties, AppProps, UIAppState, Zoom } from "../types";
import type { ActionManager } from "../actions/manager";

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

@ -1,3 +1,10 @@
import clsx from "clsx";
import throttle from "lodash.throttle";
import React, { useContext } from "react";
import { flushSync } from "react-dom";
import rough from "roughjs/bin/rough";
import { nanoid } from "nanoid";
import {
clamp,
pointFrom,
@ -11,16 +18,318 @@ import {
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 rough from "roughjs/bin/rough";
import { getSelectionBoxShape } from "@excalidraw/utils/shape";
import {
COLOR_PALETTE,
CODES,
shouldResizeFromCenter,
shouldMaintainAspectRatio,
shouldRotateWithDiscreteAngle,
isArrowKey,
KEYS,
APP_NAME,
CURSOR_TYPE,
DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT,
DEFAULT_VERTICAL_ALIGN,
DRAGGING_THRESHOLD,
ELEMENT_SHIFT_TRANSLATE_AMOUNT,
ELEMENT_TRANSLATE_AMOUNT,
EVENT,
FRAME_STYLE,
IMAGE_MIME_TYPES,
IMAGE_RENDER_TIMEOUT,
isBrave,
LINE_CONFIRM_THRESHOLD,
MAX_ALLOWED_FILE_BYTES,
MIME_TYPES,
MQ_MAX_HEIGHT_LANDSCAPE,
MQ_MAX_WIDTH_LANDSCAPE,
MQ_MAX_WIDTH_PORTRAIT,
MQ_RIGHT_SIDEBAR_MIN_WIDTH,
POINTER_BUTTON,
ROUNDNESS,
SCROLL_TIMEOUT,
TAP_TWICE_TIMEOUT,
TEXT_TO_CENTER_SNAP_THRESHOLD,
THEME,
THEME_FILTER,
TOUCH_CTX_MENU_TIMEOUT,
VERTICAL_ALIGN,
YOUTUBE_STATES,
ZOOM_STEP,
POINTER_EVENTS,
TOOL_TYPE,
isIOS,
supportsResizeObserver,
DEFAULT_COLLISION_THRESHOLD,
DEFAULT_TEXT_ALIGN,
ARROW_TYPE,
DEFAULT_REDUCED_GLOBAL_ALPHA,
isSafari,
isLocalLink,
normalizeLink,
toValidURL,
getGridPoint,
getLineHeight,
debounce,
distance,
getFontString,
getNearestScrollableContainer,
isInputLike,
isToolIcon,
isWritableElement,
sceneCoordsToViewportCoords,
tupleToCoors,
viewportCoordsToSceneCoords,
wrapEvent,
updateObject,
updateActiveTool,
getShortcutKey,
isTransparent,
easeToValuesRAF,
muteFSAbortError,
isTestEnv,
isDevEnv,
easeOut,
updateStable,
addEventListener,
normalizeEOL,
getDateTime,
isShallowEqual,
arrayToMap,
type EXPORT_IMAGE_TYPES,
} from "@excalidraw/common";
import {
getCommonBounds,
getElementAbsoluteCoords,
} from "@excalidraw/element/bounds";
import {
bindOrUnbindLinearElement,
bindOrUnbindLinearElements,
fixBindingsAfterDeletion,
getHoveredElementForBinding,
isBindingEnabled,
isLinearElementSimpleAndAlreadyBound,
maybeBindLinearElement,
shouldEnableBindingForPointerEvent,
updateBoundElements,
getSuggestedBindingsForArrows,
} from "@excalidraw/element/binding";
import { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
import {
mutateElement,
newElementWith,
} from "@excalidraw/element/mutateElement";
import {
newFrameElement,
newFreeDrawElement,
newEmbeddableElement,
newMagicFrameElement,
newIframeElement,
newArrowElement,
newElement,
newImageElement,
newLinearElement,
newTextElement,
refreshTextDimensions,
} from "@excalidraw/element/newElement";
import {
deepCopyElement,
duplicateElements,
} from "@excalidraw/element/duplicate";
import {
hasBoundTextElement,
isArrowElement,
isBindingElement,
isBindingElementType,
isBoundToContainer,
isFrameLikeElement,
isImageElement,
isEmbeddableElement,
isInitializedImageElement,
isLinearElement,
isLinearElementType,
isUsingAdaptiveRadius,
isIframeElement,
isIframeLikeElement,
isMagicFrameElement,
isTextBindableContainer,
isElbowArrow,
isFlowchartNodeElement,
isBindableElement,
isTextElement,
} from "@excalidraw/element/typeChecks";
import {
getLockedLinearCursorAlignSize,
getNormalizedDimensions,
isElementCompletelyInViewport,
isElementInViewport,
isInvisiblySmallElement,
} from "@excalidraw/element/sizeHelpers";
import {
getBoundTextShape,
getCornerRadius,
getElementShape,
isPathALoop,
} from "@excalidraw/element/shapes";
import {
createSrcDoc,
embeddableURLValidator,
maybeParseEmbedSrc,
getEmbedLink,
} from "@excalidraw/element/embeddable";
import {
getInitializedImageElements,
loadHTMLImageElement,
normalizeSVG,
updateImageCache as _updateImageCache,
} from "@excalidraw/element/image";
import {
getBoundTextElement,
getContainerCenter,
getContainerElement,
isValidTextContainer,
redrawTextBoundingBox,
} from "@excalidraw/element/textElement";
import { shouldShowBoundingBox } from "@excalidraw/element/transformHandles";
import {
getFrameChildren,
isCursorInFrame,
addElementsToFrame,
replaceAllElementsInFrame,
removeElementsFromFrame,
getElementsInResizingFrame,
getElementsInNewFrame,
getContainingFrame,
elementOverlapsWithFrame,
updateFrameMembershipOfSelectedElements,
isElementInFrame,
getFrameLikeTitle,
getElementsOverlappingFrame,
filterElementsEligibleAsFrameChildren,
} from "@excalidraw/element/frame";
import {
hitElementBoundText,
hitElementBoundingBoxOnly,
hitElementItself,
} from "@excalidraw/element/collision";
import { getVisibleSceneBounds } from "@excalidraw/element/bounds";
import {
FlowChartCreator,
FlowChartNavigator,
getLinkDirectionFromKey,
} from "@excalidraw/element/flowchart";
import { cropElement } from "@excalidraw/element/cropElement";
import { wrapText } from "@excalidraw/element/textWrapping";
import {
isElementLink,
parseElementLinkFromURL,
} from "@excalidraw/element/elementLink";
import {
isMeasureTextSupported,
normalizeText,
measureText,
getLineHeightInPx,
getApproxMinLineWidth,
getApproxMinLineHeight,
getMinTextElementWidth,
} from "@excalidraw/element/textMeasurements";
import { ShapeCache } from "@excalidraw/element/ShapeCache";
import { getRenderOpacity } from "@excalidraw/element/renderElement";
import {
editGroupForSelectedElement,
getElementsInGroup,
getSelectedGroupIdForElement,
getSelectedGroupIds,
isElementInGroup,
isSelectedViaGroup,
selectGroupsForSelectedElements,
} from "@excalidraw/element/groups";
import {
syncInvalidIndices,
syncMovedIndices,
} from "@excalidraw/element/fractionalIndex";
import {
excludeElementsInFramesFromSelection,
makeNextSelectedElementIds,
} from "@excalidraw/element/selection";
import {
getResizeOffsetXY,
getResizeArrowDirection,
transformElements,
} from "@excalidraw/element/resizeElements";
import {
getCursorForResizingElement,
getElementWithTransformHandleType,
getTransformHandleTypeFromCoords,
} from "@excalidraw/element/resizeTest";
import {
dragNewElement,
dragSelectedElements,
getDragOffsetXY,
} from "@excalidraw/element/dragElements";
import { isNonDeletedElement } from "@excalidraw/element";
import type { LocalPoint, Radians } from "@excalidraw/math";
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 "@excalidraw/element/types";
import type { ValueOf } from "@excalidraw/common/utility-types";
import {
actionAddToLibrary,
actionBringForward,
@ -77,143 +386,13 @@ import {
isHandToolActive,
} from "../appState";
import { copyTextToSystemClipboard, parseClipboard } from "../clipboard";
import {
APP_NAME,
CURSOR_TYPE,
DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT,
DEFAULT_VERTICAL_ALIGN,
DRAGGING_THRESHOLD,
ELEMENT_SHIFT_TRANSLATE_AMOUNT,
ELEMENT_TRANSLATE_AMOUNT,
EVENT,
FRAME_STYLE,
IMAGE_MIME_TYPES,
IMAGE_RENDER_TIMEOUT,
isBrave,
LINE_CONFIRM_THRESHOLD,
MAX_ALLOWED_FILE_BYTES,
MIME_TYPES,
MQ_MAX_HEIGHT_LANDSCAPE,
MQ_MAX_WIDTH_LANDSCAPE,
MQ_MAX_WIDTH_PORTRAIT,
MQ_RIGHT_SIDEBAR_MIN_WIDTH,
POINTER_BUTTON,
ROUNDNESS,
SCROLL_TIMEOUT,
TAP_TWICE_TIMEOUT,
TEXT_TO_CENTER_SNAP_THRESHOLD,
THEME,
THEME_FILTER,
TOUCH_CTX_MENU_TIMEOUT,
VERTICAL_ALIGN,
YOUTUBE_STATES,
ZOOM_STEP,
POINTER_EVENTS,
TOOL_TYPE,
isIOS,
supportsResizeObserver,
DEFAULT_COLLISION_THRESHOLD,
DEFAULT_TEXT_ALIGN,
ARROW_TYPE,
DEFAULT_REDUCED_GLOBAL_ALPHA,
isSafari,
type EXPORT_IMAGE_TYPES,
} from "../constants";
import { exportCanvas, loadFromBlob } from "../data";
import Library, { distributeLibraryItemsOnSquareGrid } from "../data/library";
import { restore, restoreElements } from "../data/restore";
import {
dragNewElement,
dragSelectedElements,
getCommonBounds,
getCursorForResizingElement,
getDragOffsetXY,
getElementWithTransformHandleType,
getNormalizedDimensions,
getResizeArrowDirection,
getResizeOffsetXY,
getLockedLinearCursorAlignSize,
getTransformHandleTypeFromCoords,
isInvisiblySmallElement,
isNonDeletedElement,
isTextElement,
newElement,
newLinearElement,
newTextElement,
newImageElement,
transformElements,
refreshTextDimensions,
redrawTextBoundingBox,
getElementAbsoluteCoords,
} from "../element";
import {
bindOrUnbindLinearElement,
bindOrUnbindLinearElements,
fixBindingsAfterDeletion,
getHoveredElementForBinding,
isBindingEnabled,
isLinearElementSimpleAndAlreadyBound,
maybeBindLinearElement,
shouldEnableBindingForPointerEvent,
updateBoundElements,
getSuggestedBindingsForArrows,
} from "../element/binding";
import { LinearElementEditor } from "../element/linearElementEditor";
import { mutateElement, newElementWith } from "../element/mutateElement";
import { deepCopyElement, duplicateElements } from "../element/duplicate";
import {
newFrameElement,
newFreeDrawElement,
newEmbeddableElement,
newMagicFrameElement,
newIframeElement,
newArrowElement,
} from "../element/newElement";
import {
hasBoundTextElement,
isArrowElement,
isBindingElement,
isBindingElementType,
isBoundToContainer,
isFrameLikeElement,
isImageElement,
isEmbeddableElement,
isInitializedImageElement,
isLinearElement,
isLinearElementType,
isUsingAdaptiveRadius,
isIframeElement,
isIframeLikeElement,
isMagicFrameElement,
isTextBindableContainer,
isElbowArrow,
isFlowchartNodeElement,
isBindableElement,
} from "../element/typeChecks";
import { getCenter, getDistance } from "../gesture";
import {
editGroupForSelectedElement,
getElementsInGroup,
getSelectedGroupIdForElement,
getSelectedGroupIds,
isElementInGroup,
isSelectedViaGroup,
selectGroupsForSelectedElements,
} from "../groups";
import { History } from "../history";
import { defaultLang, getLanguage, languages, setLanguage, t } from "../i18n";
import {
CODES,
shouldResizeFromCenter,
shouldMaintainAspectRatio,
shouldRotateWithDiscreteAngle,
isArrowKey,
KEYS,
} from "../keys";
import {
isElementCompletelyInViewport,
isElementInViewport,
} from "../element/sizeHelpers";
import {
calculateScrollCenter,
getElementsWithinSelection,
@ -224,47 +403,6 @@ import {
} from "../scene";
import Scene from "../scene/Scene";
import { getStateForZoom } from "../scene/zoom";
import {
findShapeByKey,
getBoundTextShape,
getCornerRadius,
getElementShape,
isPathALoop,
} from "../shapes";
import {
debounce,
distance,
getFontString,
getNearestScrollableContainer,
isInputLike,
isToolIcon,
isWritableElement,
sceneCoordsToViewportCoords,
tupleToCoors,
viewportCoordsToSceneCoords,
wrapEvent,
updateObject,
updateActiveTool,
getShortcutKey,
isTransparent,
easeToValuesRAF,
muteFSAbortError,
isTestEnv,
easeOut,
updateStable,
addEventListener,
normalizeEOL,
getDateTime,
isShallowEqual,
arrayToMap,
isDevEnv,
} from "../utils";
import {
createSrcDoc,
embeddableURLValidator,
maybeParseEmbedSrc,
getEmbedLink,
} from "../element/embeddable";
import {
dataURLToFile,
dataURLToString,
@ -281,47 +419,15 @@ import {
resizeImageFile,
SVGStringToFile,
} from "../data/blob";
import {
getInitializedImageElements,
loadHTMLImageElement,
normalizeSVG,
updateImageCache as _updateImageCache,
} from "../element/image";
import { fileOpen } from "../data/filesystem";
import {
getBoundTextElement,
getContainerCenter,
getContainerElement,
isValidTextContainer,
} from "../element/textElement";
import {
showHyperlinkTooltip,
hideHyperlinkToolip,
Hyperlink,
} from "../components/hyperlink/Hyperlink";
import { isLocalLink, normalizeLink, toValidURL } from "../data/url";
import { shouldShowBoundingBox } from "../element/transformHandles";
import { Fonts, getLineHeight } from "../fonts";
import {
getFrameChildren,
isCursorInFrame,
addElementsToFrame,
replaceAllElementsInFrame,
removeElementsFromFrame,
getElementsInResizingFrame,
getElementsInNewFrame,
getContainingFrame,
elementOverlapsWithFrame,
updateFrameMembershipOfSelectedElements,
isElementInFrame,
getFrameLikeTitle,
getElementsOverlappingFrame,
filterElementsEligibleAsFrameChildren,
} from "../frame";
import {
excludeElementsInFramesFromSelection,
makeNextSelectedElementIds,
} from "../scene/selection";
import { Fonts } from "../fonts";
import { editorJotaiStore } from "../editor-jotai";
import { ImageSceneDataError } from "../errors";
import {
@ -335,11 +441,9 @@ import {
getReferenceSnapPoints,
SnapCache,
isGridModeEnabled,
getGridPoint,
} from "../snapping";
import { convertToExcalidrawElements } from "../data/transform";
import { Renderer } from "../scene/Renderer";
import { ShapeCache } from "../scene/ShapeCache";
import {
setEraserCursor,
setCursor,
@ -347,40 +451,15 @@ import {
setCursorForShape,
} from "../cursor";
import { Emitter } from "../emitter";
import { ElementCanvasButtons } from "../element/ElementCanvasButtons";
import { COLOR_PALETTE } from "../colors";
import { ElementCanvasButtons } from "../components/ElementCanvasButtons";
import { Store, CaptureUpdateAction } from "../store";
import { AnimatedTrail } from "../animated-trail";
import { LaserTrails } from "../laser-trails";
import { withBatchedUpdates, withBatchedUpdatesThrottled } from "../reactUtils";
import { getRenderOpacity } from "../renderer/renderElement";
import {
hitElementBoundText,
hitElementBoundingBoxOnly,
hitElementItself,
} from "../element/collision";
import { textWysiwyg } from "../element/textWysiwyg";
import { textWysiwyg } from "../wysiwyg/textWysiwyg";
import { isOverScrollBars } from "../scene/scrollbars";
import { syncInvalidIndices, syncMovedIndices } from "../fractionalIndex";
import { getVisibleSceneBounds } from "../element/bounds";
import { isMaybeMermaidDefinition } from "../mermaid";
import {
FlowChartCreator,
FlowChartNavigator,
getLinkDirectionFromKey,
} from "../element/flowchart";
import { cropElement } from "../element/cropElement";
import { wrapText } from "../element/textWrapping";
import { isElementLink, parseElementLinkFromURL } from "../element/elementLink";
import {
isMeasureTextSupported,
normalizeText,
measureText,
getLineHeightInPx,
getApproxMinLineWidth,
getApproxMinLineHeight,
getMinTextElementWidth,
} from "../element/textMeasurements";
import { activeConfirmDialogAtom } from "./ActiveConfirmDialog";
import BraveMeasureTextError from "./BraveMeasureTextError";
@ -401,40 +480,19 @@ import {
import { MagicIcon, copyIcon, fullscreenIcon } from "./icons";
import { Toast } from "./Toast";
import type { Action, ActionResult } from "../actions/types";
import { findShapeByKey } from "./shapes";
import type {
RenderInteractiveSceneCallback,
ScrollBars,
} from "../scene/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,
@ -463,8 +521,8 @@ import type {
NullableGridSize,
Offsets,
} from "../types";
import type { ValueOf } from "../utility-types";
import type { RoughCanvas } from "roughjs/bin/canvas";
import type { Action, ActionResult } from "../actions/types";
const AppContext = React.createContext<AppClassProperties>(null!);
const AppPropsContext = React.createContext<AppProps>(null!);

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

@ -1,7 +1,7 @@
import clsx from "clsx";
import React from "react";
import { composeEventHandlers } from "../utils";
import { composeEventHandlers } from "@excalidraw/common";
import "./Button.scss";

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

@ -1,10 +1,10 @@
import clsx from "clsx";
import { useCallback, useEffect, useRef, useState } from "react";
import { KEYS, getShortcutKey } from "@excalidraw/common";
import { useAtom } from "../../editor-jotai";
import { t } from "../../i18n";
import { KEYS } from "../../keys";
import { getShortcutKey } from "../../utils";
import { useDevice } from "../App";
import { activeEyeDropperAtom } from "../EyeDropper";
import { eyeDropperIcon } from "../icons";

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

@ -2,10 +2,14 @@ import * as Popover from "@radix-ui/react-popover";
import clsx from "clsx";
import { useRef } from "react";
import { COLOR_PALETTE } from "../../colors";
import { COLOR_PALETTE, isTransparent } from "@excalidraw/common";
import type { ColorTuple, ColorPaletteCustom } from "@excalidraw/common";
import type { ExcalidrawElement } from "@excalidraw/element/types";
import { useAtom } from "../../editor-jotai";
import { t } from "../../i18n";
import { isTransparent } from "../../utils";
import { useExcalidrawContainer } from "../App";
import { ButtonSeparator } from "../ButtonSeparator";
import { activeEyeDropperAtom } from "../EyeDropper";
@ -20,8 +24,7 @@ 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) => {

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

@ -1,13 +1,19 @@
import React, { useEffect, useState } from "react";
import { EVENT } from "@excalidraw/common";
import {
DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX,
DEFAULT_ELEMENT_STROKE_COLOR_INDEX,
} from "../../colors";
import { EVENT } from "../../constants";
KEYS,
} from "@excalidraw/common";
import type { ExcalidrawElement } from "@excalidraw/element/types";
import type { ColorPaletteCustom } from "@excalidraw/common";
import { useAtom } from "../../editor-jotai";
import { t } from "../../i18n";
import { KEYS } from "../../keys";
import { CustomColorList } from "./CustomColorList";
import PickerColorList from "./PickerColorList";
@ -22,8 +28,6 @@ import {
import { colorPickerKeyNavHandler } from "./keyboardNavHandlers";
import type { ColorPickerType } from "./colorPickerUtils";
import type { ColorPaletteCustom } from "../../colors";
import type { ExcalidrawElement } from "../../element/types";
interface PickerProps {
color: string;

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

@ -1,6 +1,8 @@
import clsx from "clsx";
import { useEffect, useRef } from "react";
import type { ColorPaletteCustom } from "@excalidraw/common";
import { useAtom } from "../../editor-jotai";
import { t } from "../../i18n";
@ -11,7 +13,6 @@ import {
getColorNameAndShadeFromColor,
} from "./colorPickerUtils";
import type { ColorPaletteCustom } from "../../colors";
import type { TranslationKeys } from "../../i18n";
interface PickerColorListProps {

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

@ -1,6 +1,8 @@
import clsx from "clsx";
import { useEffect, useRef } from "react";
import type { ColorPaletteCustom } from "@excalidraw/common";
import { useAtom } from "../../editor-jotai";
import { t } from "../../i18n";
@ -10,8 +12,6 @@ import {
getColorNameAndShadeFromColor,
} from "./colorPickerUtils";
import type { ColorPaletteCustom } from "../../colors";
interface ShadeListProps {
hex: string;
onChange: (color: string) => void;

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

@ -4,7 +4,7 @@ import {
DEFAULT_CANVAS_BACKGROUND_PICKS,
DEFAULT_ELEMENT_BACKGROUND_PICKS,
DEFAULT_ELEMENT_STROKE_PICKS,
} from "../../colors";
} from "@excalidraw/common";
import type { ColorPickerType } from "./colorPickerUtils";

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

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

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

@ -1,5 +1,12 @@
import { COLORS_PER_ROW, COLOR_PALETTE } from "../../colors";
import { KEYS } from "../../keys";
import { COLORS_PER_ROW, COLOR_PALETTE, KEYS } from "@excalidraw/common";
import type {
ColorPickerColor,
ColorPalette,
ColorPaletteCustom,
} from "@excalidraw/common";
import type { ValueOf } from "@excalidraw/common/utility-types";
import {
colorPickerHotkeyBindings,
@ -7,12 +14,6 @@ import {
} from "./colorPickerUtils";
import type { ActiveColorPickerSectionAtomType } from "./colorPickerUtils";
import type {
ColorPickerColor,
ColorPalette,
ColorPaletteCustom,
} from "../../colors";
import type { ValueOf } from "../../utility-types";
const arrowHandler = (
eventKey: string,

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

@ -2,6 +2,17 @@ import clsx from "clsx";
import fuzzy from "fuzzy";
import { useEffect, useRef, useState } from "react";
import {
DEFAULT_SIDEBAR,
EVENT,
KEYS,
capitalizeString,
getShortcutKey,
isWritableElement,
} from "@excalidraw/common";
import type { MarkRequired } from "@excalidraw/common/utility-types";
import {
actionClearCanvas,
actionLink,
@ -13,12 +24,10 @@ import {
} 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,
@ -42,13 +51,7 @@ import {
LibraryIcon,
} from "../icons";
import {
capitalizeString,
getShortcutKey,
isWritableElement,
} from "../../utils";
import { SHAPES } from "../../shapes";
import { SHAPES } from "../shapes";
import { canChangeBackgroundColor, canChangeStrokeColor } from "../Actions";
import { useStableCallback } from "../../hooks/useStableCallback";
import { activeConfirmDialogAtom } from "../ActiveConfirmDialog";
@ -60,7 +63,6 @@ import "./CommandPalette.scss";
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";

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

@ -1,12 +1,13 @@
import { THEME } from "../constants";
import { THEME } from "@excalidraw/common";
import type { Theme } from "@excalidraw/element/types";
import { t } from "../i18n";
import { ToolButton } from "./ToolButton";
import "./ToolIcon.scss";
import type { Theme } from "../element/types";
// We chose to use only explicit toggle and not a third option for system value,
// but this could be added in the future.
export const DarkModeToggle = (props: {

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

@ -1,6 +1,7 @@
import React from "react";
import { DEFAULT_SIDEBAR } from "../constants";
import { DEFAULT_SIDEBAR } from "@excalidraw/common";
import { DefaultSidebar } from "../index";
import {
fireEvent,

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

@ -4,10 +4,13 @@ import {
CANVAS_SEARCH_TAB,
DEFAULT_SIDEBAR,
LIBRARY_SIDEBAR_TAB,
} from "../constants";
composeEventHandlers,
} from "@excalidraw/common";
import type { MarkOptional, Merge } from "@excalidraw/common/utility-types";
import { useTunnels } from "../context/tunnels";
import { useUIAppState } from "../context/ui-appState";
import { composeEventHandlers } from "../utils";
import "../components/dropdownMenu/DropdownMenu.scss";
@ -18,7 +21,6 @@ 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(

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

@ -1,11 +1,11 @@
import clsx from "clsx";
import React, { useEffect, useState } from "react";
import { KEYS, queryFocusableElements } from "@excalidraw/common";
import { useSetAtom } from "../editor-jotai";
import { useCallbackRefState } from "../hooks/useCallbackRefState";
import { t } from "../i18n";
import { KEYS } from "../keys";
import { queryFocusableElements } from "../utils";
import {
useExcalidrawContainer,

14
packages/excalidraw/components/ElementCanvasButtons.scss Normal file
View file

@ -0,0 +1,14 @@
.excalidraw {
.excalidraw-canvas-buttons {
position: absolute;
box-shadow: 0px 2px 4px 0 rgb(0 0 0 / 30%);
z-index: var(--zIndex-canvasButtons);
background: var(--island-bg-color);
border-radius: var(--border-radius-lg);
display: flex;
flex-direction: column;
gap: 0.375rem;
}
}

69
packages/excalidraw/components/ElementCanvasButtons.tsx Normal file
View file

@ -0,0 +1,69 @@
import { sceneCoordsToViewportCoords } from "@excalidraw/common";
import { getElementAbsoluteCoords } from "@excalidraw/element/bounds";
import type {
ElementsMap,
NonDeletedExcalidrawElement,
} from "@excalidraw/element/types";
import { useExcalidrawAppState } from "../components/App";
import "./ElementCanvasButtons.scss";
import type { AppState } from "../types";
const CONTAINER_PADDING = 5;
const getContainerCoords = (
element: NonDeletedExcalidrawElement,
appState: AppState,
elementsMap: ElementsMap,
) => {
const [x1, y1] = getElementAbsoluteCoords(element, elementsMap);
const { x: viewportX, y: viewportY } = sceneCoordsToViewportCoords(
{ sceneX: x1 + element.width, sceneY: y1 },
appState,
);
const x = viewportX - appState.offsetLeft + 10;
const y = viewportY - appState.offsetTop;
return { x, y };
};
export const ElementCanvasButtons = ({
children,
element,
elementsMap,
}: {
children: React.ReactNode;
element: NonDeletedExcalidrawElement;
elementsMap: ElementsMap;
}) => {
const appState = useExcalidrawAppState();
if (
appState.contextMenu ||
appState.newElement ||
appState.resizingElement ||
appState.isRotating ||
appState.openMenu ||
appState.viewModeEnabled
) {
return null;
}
const { x, y } = getContainerCoords(element, appState, elementsMap);
return (
<div
className="excalidraw-canvas-buttons"
style={{
top: `${y}px`,
left: `${x}px`,
// width: CONTAINER_WIDTH,
padding: CONTAINER_PADDING,
}}
>
{children}
</div>
);
};

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

@ -1,13 +1,16 @@
import { useCallback, useEffect, useState } from "react";
import { normalizeLink } from "../data/url";
import { normalizeLink, KEYS } from "@excalidraw/common";
import {
defaultGetElementLinkFromSelection,
getLinkIdAndTypeFromSelection,
} from "../element/elementLink";
import { mutateElement } from "../element/mutateElement";
} from "@excalidraw/element/elementLink";
import { mutateElement } from "@excalidraw/element/mutateElement";
import type { ElementsMap, ExcalidrawElement } from "@excalidraw/element/types";
import { t } from "../i18n";
import { KEYS } from "../keys";
import { getSelectedElements } from "../scene";
import DialogActionButton from "./DialogActionButton";
@ -17,7 +20,6 @@ import { TrashIcon } from "./icons";
import "./ElementLinkDialog.scss";
import type { ElementsMap, ExcalidrawElement } from "../element/types";
import type { AppProps, AppState, UIAppState } from "../types";
const ElementLinkDialog = ({

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

@ -1,22 +1,21 @@
import { useEffect, useRef } from "react";
import { createPortal } from "react-dom";
import { rgbToHex } from "../colors";
import { EVENT } from "../constants";
import { EVENT, KEYS, rgbToHex } from "@excalidraw/common";
import type { ExcalidrawElement } from "@excalidraw/element/types";
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 "./EyeDropper.scss";
import type { ExcalidrawElement } from "../element/types";
import type { ColorPickerType } from "./ColorPicker/colorPickerUtils";
export type EyeDropperProperties = {

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

@ -1,8 +1,9 @@
import clsx from "clsx";
import React, { forwardRef, useState } from "react";
import { isPromiseLike } from "@excalidraw/common";
import { AbortError } from "../errors";
import { isPromiseLike } from "../utils";
import Spinner from "./Spinner";
import { tablerCheckIcon } from "./icons";

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

@ -1,7 +1,10 @@
import * as Popover from "@radix-ui/react-popover";
import React, { useCallback, useMemo } from "react";
import { FONT_FAMILY } from "../../constants";
import { FONT_FAMILY } from "@excalidraw/common";
import type { FontFamilyValues } from "@excalidraw/element/types";
import { t } from "../../i18n";
import { ButtonIconSelect } from "../ButtonIconSelect";
import { ButtonSeparator } from "../ButtonSeparator";
@ -16,8 +19,6 @@ import { FontPickerTrigger } from "./FontPickerTrigger";
import "./FontPicker.scss";
import type { FontFamilyValues } from "../../element/types";
export const DEFAULT_FONTS = [
{
value: FONT_FAMILY.Excalifont,

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

@ -7,10 +7,19 @@ import React, {
type KeyboardEventHandler,
} from "react";
import { type FontFamilyValues } from "../../element/types";
import { type FontFamilyValues } from "@excalidraw/element/types";
import {
arrayToList,
debounce,
FONT_FAMILY,
getFontFamilyString,
} from "@excalidraw/common";
import type { ValueOf } from "@excalidraw/common/utility-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";
@ -20,11 +29,15 @@ import DropdownMenuItem, {
DropDownMenuItemBadgeType,
DropDownMenuItemBadge,
} from "../dropdownMenu/DropdownMenuItem";
import { FontFamilyNormalIcon } from "../icons";
import {
FontFamilyCodeIcon,
FontFamilyHeadingIcon,
FontFamilyNormalIcon,
FreedrawIcon,
} from "../icons";
import { fontPickerKeyHandler } from "./keyboardNavHandlers";
import type { ValueOf } from "../../utility-types";
import type { JSX } from "react";
export interface FontDescriptor {
@ -48,6 +61,24 @@ interface FontPickerListProps {
onClose: () => void;
}
const getFontFamilyIcon = (fontFamily: FontFamilyValues): JSX.Element => {
switch (fontFamily) {
case FONT_FAMILY.Excalifont:
case FONT_FAMILY.Virgil:
return FreedrawIcon;
case FONT_FAMILY.Nunito:
case FONT_FAMILY.Helvetica:
return FontFamilyNormalIcon;
case FONT_FAMILY["Lilita One"]:
return FontFamilyHeadingIcon;
case FONT_FAMILY["Comic Shanns"]:
case FONT_FAMILY.Cascadia:
return FontFamilyCodeIcon;
default:
return FontFamilyNormalIcon;
}
};
export const FontPickerList = React.memo(
({
selectedFontFamily,
@ -73,7 +104,7 @@ export const FontPickerList = React.memo(
.map(([familyId, { metadata, fontFaces }]) => {
const fontDescriptor = {
value: familyId,
icon: metadata.icon ?? FontFamilyNormalIcon,
icon: getFontFamilyIcon(familyId),
text: fontFaces[0]?.fontFace?.family ?? "Unknown",
};

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

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

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

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

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

@ -1,6 +1,6 @@
import clsx from "clsx";
import { KEYS } from "../keys";
import { KEYS } from "@excalidraw/common";
import { ToolButton } from "./ToolButton";
import { handIcon } from "./icons";

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

@ -1,11 +1,12 @@
import React from "react";
import { isDarwin, isFirefox, isWindows } from "@excalidraw/common";
import { KEYS, getShortcutKey } from "@excalidraw/common";
import { getShortcutFromShortcutName } from "../actions/shortcuts";
import { probablySupportsClipboardBlob } from "../clipboard";
import { isDarwin, isFirefox, isWindows } from "../constants";
import { t } from "../i18n";
import { KEYS } from "../keys";
import { getShortcutKey } from "../utils";
import { Dialog } from "./Dialog";
import { ExternalLinkIcon, GithubIcon, youtubeIcon } from "./icons";

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

@ -1,18 +1,20 @@
import { isEraserActive } from "../appState";
import { CANVAS_SEARCH_TAB, DEFAULT_SIDEBAR } from "@excalidraw/common";
import {
isFlowchartNodeElement,
isImageElement,
isLinearElement,
isTextBindableContainer,
isTextElement,
} from "../element/typeChecks";
} from "@excalidraw/element/typeChecks";
import { getShortcutKey } from "@excalidraw/common";
import { isNodeInFlowchart } from "@excalidraw/element/flowchart";
import { t } from "../i18n";
import { getShortcutKey } from "../utils";
import { isNodeInFlowchart } from "../element/flowchart";
import { isEraserActive } from "../appState";
import { isGridModeEnabled } from "../snapping";
import { CANVAS_SEARCH_TAB, DEFAULT_SIDEBAR } from "../constants";
import "./HintViewer.scss";

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

@ -2,9 +2,10 @@ import * as Popover from "@radix-ui/react-popover";
import clsx from "clsx";
import React, { useEffect } from "react";
import { isArrowKey, KEYS } from "@excalidraw/common";
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";

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

@ -1,6 +1,16 @@
import { exportToCanvas } from "@excalidraw/utils/export";
import React, { useEffect, useRef, useState } from "react";
import {
DEFAULT_EXPORT_PADDING,
EXPORT_IMAGE_TYPES,
isFirefox,
EXPORT_SCALES,
cloneJSON,
} from "@excalidraw/common";
import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
import {
actionExportWithDarkMode,
actionChangeExportBackground,
@ -9,12 +19,6 @@ import {
actionChangeProjectName,
} from "../actions/actionExport";
import { probablySupportsClipboardBlob } from "../clipboard";
import {
DEFAULT_EXPORT_PADDING,
EXPORT_IMAGE_TYPES,
isFirefox,
EXPORT_SCALES,
} from "../constants";
import { prepareElementsForExport } from "../data";
import { canvasToBlob } from "../data/blob";
import { nativeFileSystemSupported } from "../data/filesystem";
@ -22,7 +26,6 @@ import { useCopyStatus } from "../hooks/useCopiedIndicator";
import { t } from "../i18n";
import { isSomeElementSelected } from "../scene";
import { cloneJSON } from "../utils";
import { copyIcon, downloadIcon, helpIcon } from "./icons";
import { Dialog } from "./Dialog";
@ -34,7 +37,7 @@ import { FilledButton } from "./FilledButton";
import "./ImageExportDialog.scss";
import type { ActionManager } from "../actions/manager";
import type { NonDeletedExcalidrawElement } from "../element/types";
import type { AppClassProperties, BinaryFiles, UIAppState } from "../types";
const supportsContextFilters =

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

@ -1,10 +1,11 @@
import React, { useEffect, useState } from "react";
import type { Theme } from "@excalidraw/element/types";
import { defaultLang, languages, setLanguage } from "../i18n";
import { LoadingMessage } from "./LoadingMessage";
import type { Theme } from "../element/types";
import type { Language } from "../i18n";
interface Props {

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

@ -1,11 +1,14 @@
import React from "react";
import { getFrame } from "@excalidraw/common";
import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
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";
@ -15,7 +18,7 @@ import { exportToFileIcon, LinkIcon } from "./icons";
import "./ExportDialog.scss";
import type { ActionManager } from "../actions/manager";
import type { NonDeletedExcalidrawElement } from "../element/types";
import type { ExportOpts, BinaryFiles, UIAppState } from "../types";
export type ExportCB = (

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

@ -1,20 +1,32 @@
import clsx from "clsx";
import React from "react";
import { mutateElement } from "../element/mutateElement";
import { ShapeCache } from "../scene/ShapeCache";
import {
CLASSES,
DEFAULT_SIDEBAR,
TOOL_TYPE,
capitalizeString,
isShallowEqual,
} from "@excalidraw/common";
import { mutateElement } from "@excalidraw/element/mutateElement";
import { showSelectedShapeActions } from "@excalidraw/element/showSelectedShapeActions";
import { ShapeCache } from "@excalidraw/element/ShapeCache";
import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
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 { t } from "../i18n";
import { calculateScrollCenter } from "../scene";
import { capitalizeString, isShallowEqual } from "../utils";
import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
import { LoadingMessage } from "./LoadingMessage";
@ -51,7 +63,7 @@ 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,

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

@ -7,8 +7,18 @@ import React, {
useRef,
} from "react";
import {
LIBRARY_DISABLED_TYPES,
randomId,
isShallowEqual,
} from "@excalidraw/common";
import type {
ExcalidrawElement,
NonDeletedExcalidrawElement,
} from "@excalidraw/element/types";
import { trackEvent } from "../analytics";
import { LIBRARY_DISABLED_TYPES } from "../constants";
import { useUIAppState } from "../context/ui-appState";
import {
distributeLibraryItemsOnSquareGrid,
@ -16,9 +26,8 @@ import {
} 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,
@ -32,10 +41,6 @@ import Spinner from "./Spinner";
import "./LibraryMenu.scss";
import type {
ExcalidrawElement,
NonDeletedExcalidrawElement,
} from "../element/types";
import type {
LibraryItems,
LibraryItem,

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

@ -1,4 +1,5 @@
import { VERSIONS } from "../constants";
import { VERSIONS } from "@excalidraw/common";
import { t } from "../i18n";
import type { ExcalidrawProps, UIAppState } from "../types";

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

@ -1,6 +1,8 @@
import clsx from "clsx";
import { useCallback, useState } from "react";
import { muteFSAbortError } from "@excalidraw/common";
import { useUIAppState } from "../context/ui-appState";
import { fileOpen } from "../data/filesystem";
import { saveLibraryAsJSON } from "../data/json";
@ -8,7 +10,6 @@ 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";

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

@ -6,14 +6,14 @@ import React, {
useState,
} from "react";
import { MIME_TYPES } from "../constants";
import { MIME_TYPES, arrayToMap } from "@excalidraw/common";
import { duplicateElements } from "@excalidraw/element/duplicate";
import { serializeLibraryAsJSON } from "../data/json";
import { useLibraryCache } from "../hooks/useLibraryItemSvg";
import { useScrollPosition } from "../hooks/useScrollPosition";
import { t } from "../i18n";
import { arrayToMap } from "../utils";
import { duplicateElements } from "../element/duplicate";
import { LibraryMenuControlButtons } from "./LibraryMenuControlButtons";
import { LibraryDropdownMenu } from "./LibraryMenuHeaderContent";

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

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

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

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

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

@ -1,8 +1,11 @@
import React from "react";
import { showSelectedShapeActions } from "@excalidraw/element/showSelectedShapeActions";
import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
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";
@ -18,7 +21,6 @@ import { Section } from "./Section";
import Stack from "./Stack";
import type { ActionManager } from "../actions/manager";
import type { NonDeletedExcalidrawElement } from "../element/types";
import type {
AppClassProperties,
AppProps,

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

@ -2,8 +2,9 @@ import clsx from "clsx";
import { useRef } from "react";
import { createPortal } from "react-dom";
import { KEYS } from "@excalidraw/common";
import { useCreatePortalContainer } from "../hooks/useCreatePortalContainer";
import { KEYS } from "../keys";
import "./Modal.scss";

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

@ -1,6 +1,8 @@
import oc from "open-color";
import React, { useLayoutEffect, useRef, useState } from "react";
import type { ChartType } from "@excalidraw/element/types";
import { trackEvent } from "../analytics";
import { renderSpreadsheet } from "../charts";
import { t } from "../i18n";
@ -12,7 +14,6 @@ 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;

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

@ -1,8 +1,7 @@
import React, { useLayoutEffect, useRef, useEffect } from "react";
import { unstable_batchedUpdates } from "react-dom";
import { KEYS } from "../keys";
import { queryFocusableElements } from "../utils";
import { KEYS, queryFocusableElements } from "@excalidraw/common";
import "./Popover.scss";

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

@ -1,7 +1,6 @@
import React, { useState } from "react";
import { focusNearestParent } from "../utils";
import { KEYS } from "../keys";
import { focusNearestParent, KEYS } from "@excalidraw/common";
import { useExcalidrawContainer } from "./App";

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

@ -2,7 +2,7 @@ import * as Popover from "@radix-ui/react-popover";
import clsx from "clsx";
import React, { type ReactNode } from "react";
import { isInteractive } from "../utils";
import { isInteractive } from "@excalidraw/common";
import { useDevice } from "./App";
import { Island } from "./Island";

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

@ -8,11 +8,12 @@ import {
EXPORT_SOURCE,
MIME_TYPES,
VERSIONS,
} from "../constants";
chunk,
} from "@excalidraw/common";
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";

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

@ -3,17 +3,28 @@ import clsx from "clsx";
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 { CLASSES, EVENT } from "@excalidraw/common";
import { isElementCompletelyInViewport } from "@excalidraw/element/sizeHelpers";
import { measureText } from "@excalidraw/element/textMeasurements";
import {
KEYS,
randomInteger,
addEventListener,
getFontString,
} from "@excalidraw/common";
import { newTextElement } from "@excalidraw/element/newElement";
import { isTextElement } from "@excalidraw/element/typeChecks";
import type { ExcalidrawTextElement } from "@excalidraw/element/types";
import { atom, useAtom } from "../editor-jotai";
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";
@ -22,7 +33,6 @@ import { collapseDownIcon, upIcon, searchIcon } from "./icons";
import "./SearchMenu.scss";
import type { ExcalidrawTextElement } from "../element/types";
import type { AppClassProperties } from "../types";
const searchQueryAtom = atom<string>("");

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

@ -1,7 +1,8 @@
import React from "react";
import { vi } from "vitest";
import { DEFAULT_SIDEBAR } from "../../constants";
import { DEFAULT_SIDEBAR } from "@excalidraw/common";
import { Excalidraw, Sidebar } from "../../index";
import {
act,

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

@ -9,12 +9,11 @@ import React, {
useCallback,
} from "react";
import { EVENT } from "../../constants";
import { EVENT, isDevEnv, KEYS, updateObject } from "@excalidraw/common";
import { useUIAppState } from "../../context/ui-appState";
import { atom, useSetAtom } from "../../editor-jotai";
import { useOutsideClick } from "../../hooks/useOutsideClick";
import { KEYS } from "../../keys";
import { isDevEnv, updateObject } from "../../utils";
import { useDevice, useExcalidrawSetAppState } from "../App";
import { Island } from "../Island";

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

@ -1,17 +1,20 @@
import { degreesToRadians, radiansToDegrees } from "@excalidraw/math";
import { mutateElement } from "@excalidraw/element/mutateElement";
import { getBoundTextElement } from "@excalidraw/element/textElement";
import { isArrowElement, isElbowArrow } from "@excalidraw/element/typeChecks";
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 "@excalidraw/element/types";
import { angleIcon } from "../icons";
import DragInput 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";

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

@ -1,19 +1,20 @@
import { clamp, round } from "@excalidraw/math";
import { MIN_WIDTH_OR_HEIGHT } from "../../constants";
import { MIN_WIDTH_OR_HEIGHT } from "@excalidraw/common";
import {
MINIMAL_CROP_SIZE,
getUncroppedWidthAndHeight,
} from "../../element/cropElement";
import { mutateElement } from "../../element/mutateElement";
import { resizeSingleElement } from "../../element/resizeElements";
import { isImageElement } from "../../element/typeChecks";
} from "@excalidraw/element/cropElement";
import { mutateElement } from "@excalidraw/element/mutateElement";
import { resizeSingleElement } from "@excalidraw/element/resizeElements";
import { isImageElement } from "@excalidraw/element/typeChecks";
import type { ExcalidrawElement } from "@excalidraw/element/types";
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";

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

@ -1,12 +1,13 @@
import clsx from "clsx";
import { useEffect, useRef, useState } from "react";
import { deepCopyElement } from "@excalidraw/excalidraw/element/duplicate";
import { EVENT, KEYS, cloneJSON } from "@excalidraw/common";
import { deepCopyElement } from "@excalidraw/element/duplicate";
import type { ElementsMap, ExcalidrawElement } from "@excalidraw/element/types";
import { EVENT } from "../../constants";
import { KEYS } from "../../keys";
import { CaptureUpdateAction } from "../../store";
import { cloneJSON } from "../../utils";
import { useApp } from "../App";
import { InlineIcon } from "../InlineIcon";
@ -15,7 +16,6 @@ import { SMALLEST_DELTA } from "./utils";
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";

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

@ -1,17 +1,24 @@
import { isTextElement, redrawTextBoundingBox } from "../../element";
import { mutateElement } from "../../element/mutateElement";
import { getBoundTextElement } from "../../element/textElement";
import { hasBoundTextElement } from "../../element/typeChecks";
import { mutateElement } from "@excalidraw/element/mutateElement";
import {
getBoundTextElement,
redrawTextBoundingBox,
} from "@excalidraw/element/textElement";
import {
hasBoundTextElement,
isTextElement,
} from "@excalidraw/element/typeChecks";
import type {
ExcalidrawElement,
ExcalidrawTextElement,
} from "@excalidraw/element/types";
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 type Scene from "../../scene/Scene";
import type { AppState } from "../../types";

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

@ -1,18 +1,22 @@
import { degreesToRadians, radiansToDegrees } from "@excalidraw/math";
import { mutateElement } from "@excalidraw/element/mutateElement";
import { getBoundTextElement } from "@excalidraw/element/textElement";
import { isArrowElement } from "@excalidraw/element/typeChecks";
import { isInGroup } from "@excalidraw/element/groups";
import type { Degrees } from "@excalidraw/math";
import { mutateElement } from "../../element/mutateElement";
import { getBoundTextElement } from "../../element/textElement";
import { isArrowElement } from "../../element/typeChecks";
import { isInGroup } from "../../groups";
import type { ExcalidrawElement } from "@excalidraw/element/types";
import { angleIcon } from "../icons";
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";

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

@ -1,18 +1,27 @@
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";
import { MIN_WIDTH_OR_HEIGHT } from "@excalidraw/common";
import { updateBoundElements } from "@excalidraw/element/binding";
import { mutateElement } from "@excalidraw/element/mutateElement";
import {
rescalePointsInElement,
resizeSingleElement,
} from "../../element/resizeElements";
} from "@excalidraw/element/resizeElements";
import {
getBoundTextElement,
handleBindTextResize,
} from "../../element/textElement";
} from "@excalidraw/element/textElement";
import { isTextElement } from "@excalidraw/element/typeChecks";
import { getCommonBounds } from "@excalidraw/utils";
import type {
ElementsMap,
ExcalidrawElement,
NonDeletedSceneElementsMap,
} from "@excalidraw/element/types";
import DragInput from "./DragInput";
import { getAtomicUnits, getStepSizedValue, isPropertyEditable } from "./utils";
@ -20,11 +29,6 @@ import { getElementsInAtomicUnit } from "./utils";
import type { DragInputCallbackType } from "./DragInput";
import type { AtomicUnit } from "./utils";
import type {
ElementsMap,
ExcalidrawElement,
NonDeletedSceneElementsMap,
} from "../../element/types";
import type Scene from "../../scene/Scene";
import type { AppState } from "../../types";

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

@ -1,19 +1,27 @@
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 { mutateElement } from "@excalidraw/element/mutateElement";
import {
getBoundTextElement,
redrawTextBoundingBox,
} from "@excalidraw/element/textElement";
import {
hasBoundTextElement,
isTextElement,
} from "@excalidraw/element/typeChecks";
import { isInGroup } from "@excalidraw/element/groups";
import type {
ExcalidrawElement,
ExcalidrawTextElement,
NonDeletedSceneElementsMap,
} from "@excalidraw/element/types";
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 type Scene from "../../scene/Scene";
import type { AppState } from "../../types";

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

@ -1,7 +1,16 @@
import { pointFrom, pointRotateRads } from "@excalidraw/math";
import { useMemo } from "react";
import { getCommonBounds, isTextElement } from "../../element";
import { isTextElement } from "@excalidraw/element/typeChecks";
import { getCommonBounds } from "@excalidraw/element/bounds";
import type {
ElementsMap,
ExcalidrawElement,
NonDeletedExcalidrawElement,
NonDeletedSceneElementsMap,
} from "@excalidraw/element/types";
import StatsDragInput from "./DragInput";
import { getAtomicUnits, getStepSizedValue, isPropertyEditable } from "./utils";
@ -9,12 +18,6 @@ import { getElementsInAtomicUnit, moveElement } from "./utils";
import type { DragInputCallbackType } from "./DragInput";
import type { AtomicUnit } from "./utils";
import type {
ElementsMap,
ExcalidrawElement,
NonDeletedExcalidrawElement,
NonDeletedSceneElementsMap,
} from "../../element/types";
import type Scene from "../../scene/Scene";
import type { AppState } from "../../types";

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

@ -3,15 +3,16 @@ import { clamp, pointFrom, pointRotateRads, round } from "@excalidraw/math";
import {
getFlipAdjustedCropPosition,
getUncroppedWidthAndHeight,
} from "../../element/cropElement";
import { mutateElement } from "../../element/mutateElement";
import { isImageElement } from "../../element/typeChecks";
} from "@excalidraw/element/cropElement";
import { mutateElement } from "@excalidraw/element/mutateElement";
import { isImageElement } from "@excalidraw/element/typeChecks";
import type { ElementsMap, ExcalidrawElement } from "@excalidraw/element/types";
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";

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

@ -3,12 +3,17 @@ 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 { getUncroppedWidthAndHeight } from "../../element/cropElement";
import { isElbowArrow, isImageElement } from "../../element/typeChecks";
import { frameAndChildrenSelectedTogether } from "../../frame";
import { elementsAreInSameGroup } from "../../groups";
import { STATS_PANELS } from "@excalidraw/common";
import { getCommonBounds } from "@excalidraw/element/bounds";
import { getUncroppedWidthAndHeight } from "@excalidraw/element/cropElement";
import { isElbowArrow, isImageElement } from "@excalidraw/element/typeChecks";
import { frameAndChildrenSelectedTogether } from "@excalidraw/element/frame";
import { elementsAreInSameGroup } from "@excalidraw/element/groups";
import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
import { t } from "../../i18n";
import { isGridModeEnabled } from "../../snapping";
import { useExcalidrawAppState, useExcalidrawSetAppState } from "../App";
@ -29,7 +34,6 @@ import { getAtomicUnits } from "./utils";
import "./Stats.scss";
import type { NonDeletedExcalidrawElement } from "../../element/types";
import type {
AppClassProperties,
AppState,

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

@ -3,14 +3,23 @@ import { act, fireEvent, queryByTestId } from "@testing-library/react";
import React from "react";
import { vi } from "vitest";
import { setDateTimeForTests, reseed } from "@excalidraw/common";
import { isInGroup } from "@excalidraw/element/groups";
import { isTextElement } from "@excalidraw/element/typeChecks";
import type { Degrees } from "@excalidraw/math";
import { Excalidraw, mutateElement } from "../..";
import type {
ExcalidrawElement,
ExcalidrawLinearElement,
ExcalidrawTextElement,
} from "@excalidraw/element/types";
import { Excalidraw, getCommonBounds, 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";
@ -21,16 +30,9 @@ import {
render,
restoreOriginalGetBoundingClientRect,
} from "../../tests/test-utils";
import { setDateTimeForTests } from "../../utils";
import { getStepSizedValue } from "./utils";
import type {
ExcalidrawElement,
ExcalidrawLinearElement,
ExcalidrawTextElement,
} from "../../element/types";
const { h } = window;
const mouse = new Pointer("mouse");
const renderStaticScene = vi.spyOn(StaticScene, "renderStaticScene");

18
packages/excalidraw/components/Stats/utils.ts
View file

@ -1,30 +1,32 @@
import { pointFrom, pointRotateRads } from "@excalidraw/math";
import type { Radians } from "@excalidraw/math";
import {
bindOrUnbindLinearElements,
updateBoundElements,
} from "../../element/binding";
import { mutateElement } from "../../element/mutateElement";
import { getBoundTextElement } from "../../element/textElement";
} from "@excalidraw/element/binding";
import { mutateElement } from "@excalidraw/element/mutateElement";
import { getBoundTextElement } from "@excalidraw/element/textElement";
import {
isFrameLikeElement,
isLinearElement,
isTextElement,
} from "../../element/typeChecks";
} from "@excalidraw/element/typeChecks";
import {
getSelectedGroupIds,
getElementsInGroup,
isInGroup,
} from "../../groups";
} from "@excalidraw/element/groups";
import type { Radians } from "@excalidraw/math";
import type {
ElementsMap,
ExcalidrawElement,
NonDeletedExcalidrawElement,
NonDeletedSceneElementsMap,
} from "../../element/types";
} from "@excalidraw/element/types";
import type Scene from "../../scene/Scene";
import type { AppState } from "../../types";

7
packages/excalidraw/components/TTDDialog/MermaidToExcalidraw.tsx
View file

@ -1,11 +1,13 @@
import { useState, useRef, useEffect, useDeferredValue } from "react";
import { EDITOR_LS_KEYS, debounce, isDevEnv } from "@excalidraw/common";
import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
import { useApp } from "../App";
import { ArrowRightIcon } from "../icons";
import { EDITOR_LS_KEYS } from "../../constants";
import { EditorLocalStorage } from "../../data/EditorLocalStorage";
import { t } from "../../i18n";
import { debounce, isDevEnv } from "../../utils";
import Trans from "../Trans";
import { TTDDialogInput } from "./TTDDialogInput";
@ -23,7 +25,6 @@ import "./MermaidToExcalidraw.scss";
import type { BinaryFiles } from "../../types";
import type { MermaidToExcalidrawLibProps } from "./common";
import type { NonDeletedExcalidrawElement } from "../../element/types";
const MERMAID_EXAMPLE =
"flowchart TD\n A[Christmas] -->|Get money| B(Go shopping)\n B --> C{Let me think}\n C -->|One| D[Laptop]\n C -->|Two| E[iPhone]\n C -->|Three| F[Car]";

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

@ -1,6 +1,9 @@
import { isFiniteNumber } from "@excalidraw/math";
import { useEffect, useRef, useState } from "react";
import { isFiniteNumber } from "@excalidraw/math";
import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
import { trackEvent } from "../../analytics";
import { useUIAppState } from "../../context/ui-appState";
import { atom, useAtom } from "../../editor-jotai";
@ -32,7 +35,7 @@ import "./TTDDialog.scss";
import type { ChangeEventHandler } from "react";
import type { MermaidToExcalidrawLibProps } from "./common";
import type { NonDeletedExcalidrawElement } from "../../element/types";
import type { BinaryFiles } from "../../types";
const MIN_PROMPT_LENGTH = 3;

3
packages/excalidraw/components/TTDDialog/TTDDialogInput.tsx
View file

@ -1,7 +1,6 @@
import { useEffect, useRef } from "react";
import { EVENT } from "../../constants";
import { KEYS } from "../../keys";
import { EVENT, KEYS } from "@excalidraw/common";
import type { ChangeEventHandler } from "react";

2
packages/excalidraw/components/TTDDialog/TTDDialogSubmitShortcut.tsx
View file

@ -1,4 +1,4 @@
import { getShortcutKey } from "../../utils";
import { getShortcutKey } from "@excalidraw/common";
export const TTDDialogSubmitShortcut = () => {
return (

3
packages/excalidraw/components/TTDDialog/TTDDialogTabs.tsx
View file

@ -1,7 +1,8 @@
import * as RadixTabs from "@radix-ui/react-tabs";
import { useRef } from "react";
import { isMemberOf } from "../../utils";
import { isMemberOf } from "@excalidraw/common";
import { useExcalidrawSetAppState } from "../App";
import type { ReactNode } from "react";

6
packages/excalidraw/components/TTDDialog/common.ts
View file

@ -1,13 +1,15 @@
import { DEFAULT_EXPORT_PADDING, EDITOR_LS_KEYS } from "@excalidraw/common";
import type { MermaidConfig } from "@excalidraw/mermaid-to-excalidraw";
import type { MermaidToExcalidrawResult } from "@excalidraw/mermaid-to-excalidraw/dist/interfaces";
import { DEFAULT_EXPORT_PADDING, EDITOR_LS_KEYS } from "../../constants";
import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
import { EditorLocalStorage } from "../../data/EditorLocalStorage";
import { canvasToBlob } from "../../data/blob";
import { t } from "../../i18n";
import { convertToExcalidrawElements, exportToCanvas } from "../../index";
import type { NonDeletedExcalidrawElement } from "../../element/types";
import type { AppClassProperties, BinaryFiles } from "../../types";
const resetPreview = ({

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

@ -1,15 +1,17 @@
import clsx from "clsx";
import React, { useEffect, useRef, useState } from "react";
import { isPromiseLike } from "@excalidraw/common";
import type { PointerType } from "@excalidraw/element/types";
import { AbortError } from "../errors";
import { isPromiseLike } from "../utils";
import "./ToolIcon.scss";
import Spinner from "./Spinner";
import { useExcalidrawContainer } from "./App";
import type { PointerType } from "../element/types";
import type { CSSProperties } from "react";
export type ToolButtonSize = "small" | "medium";

2
packages/excalidraw/components/UserList.scss
View file

@ -1,4 +1,4 @@
@import "../css/variables.module";
@import "../css/variables.module.scss";
.excalidraw {
--avatar-size: 1.75rem;

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

@ -2,9 +2,11 @@ import * as Popover from "@radix-ui/react-popover";
import clsx from "clsx";
import React, { useLayoutEffect } from "react";
import { supportsResizeObserver } from "../constants";
import { supportsResizeObserver, isShallowEqual } from "@excalidraw/common";
import type { MarkRequired } from "@excalidraw/common/utility-types";
import { t } from "../i18n";
import { isShallowEqual } from "../utils";
import { useExcalidrawActionManager } from "./App";
import { Island } from "./Island";
@ -16,7 +18,6 @@ import "./UserList.scss";
import type { ActionManager } from "../actions/manager";
import type { Collaborator, SocketId } from "../types";
import type { MarkRequired } from "../utility-types";
export type GoToCollaboratorComponentProps = {
socketId: SocketId;

17
packages/excalidraw/components/canvases/InteractiveCanvas.tsx
View file

@ -1,15 +1,20 @@
import React, { useEffect, useRef } from "react";
import { CURSOR_TYPE } from "../../constants";
import { t } from "../../i18n";
import { isRenderThrottlingEnabled } from "../../reactUtils";
import { renderInteractiveScene } from "../../renderer/interactiveScene";
import { isShallowEqual, sceneCoordsToViewportCoords } from "../../utils";
import {
CURSOR_TYPE,
isShallowEqual,
sceneCoordsToViewportCoords,
} from "@excalidraw/common";
import type {
NonDeletedExcalidrawElement,
NonDeletedSceneElementsMap,
} from "../../element/types";
} from "@excalidraw/element/types";
import { t } from "../../i18n";
import { isRenderThrottlingEnabled } from "../../reactUtils";
import { renderInteractiveScene } from "../../renderer/interactiveScene";
import type {
InteractiveCanvasRenderConfig,
RenderableElementsMap,

3
packages/excalidraw/components/canvases/NewElementCanvas.tsx
View file

@ -1,9 +1,10 @@
import { useEffect, useRef } from "react";
import type { NonDeletedSceneElementsMap } from "@excalidraw/element/types";
import { isRenderThrottlingEnabled } from "../../reactUtils";
import { renderNewElementScene } from "../../renderer/renderNewElementScene";
import type { NonDeletedSceneElementsMap } from "../../element/types";
import type {
RenderableElementsMap,
StaticCanvasRenderConfig,

10
packages/excalidraw/components/canvases/StaticCanvas.tsx
View file

@ -1,13 +1,15 @@
import React, { useEffect, useRef } from "react";
import { isRenderThrottlingEnabled } from "../../reactUtils";
import { renderStaticScene } from "../../renderer/staticScene";
import { isShallowEqual } from "../../utils";
import { isShallowEqual } from "@excalidraw/common";
import type {
NonDeletedExcalidrawElement,
NonDeletedSceneElementsMap,
} from "../../element/types";
} from "@excalidraw/element/types";
import { isRenderThrottlingEnabled } from "../../reactUtils";
import { renderStaticScene } from "../../renderer/staticScene";
import type {
RenderableElementsMap,
StaticCanvasRenderConfig,

3
packages/excalidraw/components/dropdownMenu/DropdownMenu.test.tsx
View file

@ -1,7 +1,8 @@
import React from "react";
import { KEYS } from "@excalidraw/common";
import { Excalidraw } from "../../index";
import { KEYS } from "../../keys";
import { Keyboard } from "../../tests/helpers/ui";
import {
render,

4
packages/excalidraw/components/dropdownMenu/DropdownMenuContent.tsx
View file

@ -1,10 +1,10 @@
import clsx from "clsx";
import React, { useEffect, useRef } from "react";
import { EVENT } from "../../constants";
import { EVENT, KEYS } from "@excalidraw/common";
import { useOutsideClick } from "../../hooks/useOutsideClick";
import { useStable } from "../../hooks/useStable";
import { KEYS } from "../../keys";
import { useDevice } from "../App";
import { Island } from "../Island";
import Stack from "../Stack";

6
packages/excalidraw/components/dropdownMenu/DropdownMenuItem.tsx
View file

@ -1,6 +1,9 @@
import React, { useEffect, useRef } from "react";
import { THEME } from "../../constants";
import { THEME } from "@excalidraw/common";
import type { ValueOf } from "@excalidraw/common/utility-types";
import { useExcalidrawAppState } from "../App";
import MenuItemContent from "./DropdownMenuItemContent";
@ -9,7 +12,6 @@ import {
useHandleDropdownMenuItemClick,
} from "./common";
import type { ValueOf } from "../../utility-types";
import type { JSX } from "react";
const DropdownMenuItem = ({

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

@ -1,7 +1,6 @@
import React, { useContext } from "react";
import { EVENT } from "../../constants";
import { composeEventHandlers } from "../../utils";
import { EVENT, composeEventHandlers } from "@excalidraw/common";
export const DropdownMenuContentPropsContext = React.createContext<{
onSelect?: (event: Event) => void;

56
packages/excalidraw/components/hyperlink/Hyperlink.tsx
View file

@ -8,37 +8,51 @@ import {
useState,
} from "react";
import { trackEvent } from "../../analytics";
import { getTooltipDiv, updateTooltipPosition } from "../../components/Tooltip";
import { EVENT, HYPERLINK_TOOLTIP_DELAY } from "../../constants";
import { isLocalLink, normalizeLink } from "../../data/url";
import { getElementAbsoluteCoords } from "../../element/bounds";
import { hitElementBoundingBox } from "../../element/collision";
import { isElementLink } from "../../element/elementLink";
import { getEmbedLink, embeddableURLValidator } from "../../element/embeddable";
import { mutateElement } from "../../element/mutateElement";
import { t } from "../../i18n";
import { EVENT, HYPERLINK_TOOLTIP_DELAY, KEYS } from "@excalidraw/common";
import { getElementAbsoluteCoords } from "@excalidraw/element/bounds";
import { hitElementBoundingBox } from "@excalidraw/element/collision";
import { isElementLink } from "@excalidraw/element/elementLink";
import {
getEmbedLink,
embeddableURLValidator,
} from "@excalidraw/element/embeddable";
import { mutateElement } from "@excalidraw/element/mutateElement";
import {
sceneCoordsToViewportCoords,
viewportCoordsToSceneCoords,
wrapEvent,
} from "../../utils";
import { useAppProps, useDevice, useExcalidrawAppState } from "../App";
import { ToolButton } from "../ToolButton";
import { FreedrawIcon, TrashIcon, elementLinkIcon } from "../icons";
import { KEYS } from "../../keys";
import { getSelectedElements } from "../../scene";
import { isEmbeddableElement } from "../../element/typeChecks";
isLocalLink,
normalizeLink,
} from "@excalidraw/common";
import { getLinkHandleFromCoords } from "./helpers";
import "./Hyperlink.scss";
import { isEmbeddableElement } from "@excalidraw/element/typeChecks";
import type {
ElementsMap,
ExcalidrawEmbeddableElement,
NonDeletedExcalidrawElement,
} from "../../element/types";
} from "@excalidraw/element/types";
import { trackEvent } from "../../analytics";
import { getTooltipDiv, updateTooltipPosition } from "../../components/Tooltip";
import { t } from "../../i18n";
import { useAppProps, useDevice, useExcalidrawAppState } from "../App";
import { ToolButton } from "../ToolButton";
import { FreedrawIcon, TrashIcon, elementLinkIcon } from "../icons";
import { getSelectedElements } from "../../scene";
import { getLinkHandleFromCoords } from "./helpers";
import "./Hyperlink.scss";
import type { AppState, ExcalidrawProps, UIAppState } from "../../types";
const POPUP_WIDTH = 380;

16
packages/excalidraw/components/hyperlink/helpers.ts
View file

@ -1,17 +1,19 @@
import { pointFrom, pointRotateRads } from "@excalidraw/math";
import { MIME_TYPES } from "@excalidraw/common";
import { getElementAbsoluteCoords } from "@excalidraw/element/bounds";
import { hitElementBoundingBox } from "@excalidraw/element/collision";
import { DEFAULT_LINK_SIZE } from "@excalidraw/element/renderElement";
import type { GlobalPoint, Radians } from "@excalidraw/math";
import { MIME_TYPES } from "../../constants";
import { getElementAbsoluteCoords } from "../../element/bounds";
import { hitElementBoundingBox } from "../../element/collision";
import { DEFAULT_LINK_SIZE } from "../../renderer/renderElement";
import type { Bounds } from "../../element/bounds";
import type { Bounds } from "@excalidraw/element/bounds";
import type {
ElementsMap,
NonDeletedExcalidrawElement,
} from "../../element/types";
} from "@excalidraw/element/types";
import type { AppState, UIAppState } from "../../types";
export const EXTERNAL_LINK_IMG = document.createElement("img");

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

@ -10,9 +10,9 @@ import clsx from "clsx";
import oc from "open-color";
import React from "react";
import { THEME } from "../constants";
import { THEME } from "@excalidraw/common";
import type { Theme } from "../element/types";
import type { Theme } from "@excalidraw/element/types";
export const iconFillColor = (theme: Theme) => "var(--icon-fill-color)";

7
packages/excalidraw/components/main-menu/DefaultItems.tsx
View file

@ -1,5 +1,9 @@
import clsx from "clsx";
import { THEME } from "@excalidraw/common";
import type { Theme } from "@excalidraw/element/types";
import {
actionClearCanvas,
actionLoadScene,
@ -10,7 +14,6 @@ import {
} from "../../actions";
import { getShortcutFromShortcutName } from "../../actions/shortcuts";
import { trackEvent } from "../../analytics";
import { THEME } from "../../constants";
import { useUIAppState } from "../../context/ui-appState";
import { useSetAtom } from "../../editor-jotai";
import { useI18n } from "../../i18n";
@ -44,8 +47,6 @@ import {
import "./DefaultItems.scss";
import type { Theme } from "../../element/types";
export const LoadScene = () => {
const { t } = useI18n();
const actionManager = useExcalidrawActionManager();

3
packages/excalidraw/components/main-menu/MainMenu.tsx
View file

@ -1,9 +1,10 @@
import React from "react";
import { composeEventHandlers } from "@excalidraw/common";
import { useTunnels } from "../../context/tunnels";
import { useUIAppState } from "../../context/ui-appState";
import { t } from "../../i18n";
import { composeEventHandlers } from "../../utils";
import { useDevice, useExcalidrawSetAppState } from "../App";
import { UserList } from "../UserList";
import DropdownMenu from "../dropdownMenu/DropdownMenu";

100
packages/excalidraw/components/shapes.tsx Normal file
View file

@ -0,0 +1,100 @@
import { KEYS } from "@excalidraw/common";
import {
SelectionIcon,
RectangleIcon,
DiamondIcon,
EllipseIcon,
ArrowIcon,
LineIcon,
FreedrawIcon,
TextIcon,
ImageIcon,
EraserIcon,
} from "./icons";
export const SHAPES = [
{
icon: SelectionIcon,
value: "selection",
key: KEYS.V,
numericKey: KEYS["1"],
fillable: true,
},
{
icon: RectangleIcon,
value: "rectangle",
key: KEYS.R,
numericKey: KEYS["2"],
fillable: true,
},
{
icon: DiamondIcon,
value: "diamond",
key: KEYS.D,
numericKey: KEYS["3"],
fillable: true,
},
{
icon: EllipseIcon,
value: "ellipse",
key: KEYS.O,
numericKey: KEYS["4"],
fillable: true,
},
{
icon: ArrowIcon,
value: "arrow",
key: KEYS.A,
numericKey: KEYS["5"],
fillable: true,
},
{
icon: LineIcon,
value: "line",
key: KEYS.L,
numericKey: KEYS["6"],
fillable: true,
},
{
icon: FreedrawIcon,
value: "freedraw",
key: [KEYS.P, KEYS.X],
numericKey: KEYS["7"],
fillable: false,
},
{
icon: TextIcon,
value: "text",
key: KEYS.T,
numericKey: KEYS["8"],
fillable: false,
},
{
icon: ImageIcon,
value: "image",
key: null,
numericKey: KEYS["9"],
fillable: false,
},
{
icon: EraserIcon,
value: "eraser",
key: KEYS.E,
numericKey: KEYS["0"],
fillable: false,
},
] as const;
export const findShapeByKey = (key: string) => {
const shape = SHAPES.find((shape, index) => {
return (
(shape.numericKey != null && key === shape.numericKey.toString()) ||
(shape.key &&
(typeof shape.key === "string"
? shape.key === key
: (shape.key as readonly string[]).includes(key)))
);
});
return shape?.value || null;
};