@myoc/element 0.19.520 → 0.19.522
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/dev/index.js +3049 -1222
- package/dist/dev/index.js.map +4 -4
- package/dist/prod/index.js +17 -17
- package/dist/types/common/src/colors.d.ts +14 -0
- package/dist/types/common/src/constants.d.ts +3 -0
- package/dist/types/common/src/keys.d.ts +2 -0
- package/dist/types/common/src/points.d.ts +1 -1
- package/dist/types/common/src/utils.d.ts +1 -1
- package/dist/types/element/src/Scene.d.ts +1 -1
- package/dist/types/element/src/align.d.ts +2 -2
- package/dist/types/element/src/arrowEndpointText.d.ts +49 -0
- package/dist/types/element/src/arrows/focus.d.ts +5 -2
- package/dist/types/element/src/binding.d.ts +17 -8
- package/dist/types/element/src/bounds.d.ts +5 -9
- package/dist/types/element/src/bucketFill.d.ts +110 -0
- package/dist/types/element/src/collision.d.ts +1 -1
- package/dist/types/element/src/comparisons.d.ts +4 -4
- package/dist/types/element/src/convertToShape.d.ts +23 -0
- package/dist/types/element/src/distribute.d.ts +2 -2
- package/dist/types/element/src/dragElements.d.ts +27 -0
- package/dist/types/element/src/duplicate.d.ts +3 -3
- package/dist/types/element/src/embeddable.d.ts +2 -2
- package/dist/types/element/src/flowchart.d.ts +7 -7
- package/dist/types/element/src/fractionalIndex.d.ts +2 -2
- package/dist/types/element/src/frame.d.ts +4 -4
- package/dist/types/element/src/groups.d.ts +9 -9
- package/dist/types/element/src/index.d.ts +4 -1
- package/dist/types/element/src/linearElementEditor.d.ts +17 -10
- package/dist/types/element/src/newElement.d.ts +13 -0
- package/dist/types/element/src/renderElement.d.ts +0 -3
- package/dist/types/element/src/resizeElements.d.ts +2 -2
- package/dist/types/element/src/selection.d.ts +5 -5
- package/dist/types/element/src/shape.d.ts +12 -0
- package/dist/types/element/src/sortElements.d.ts +10 -0
- package/dist/types/element/src/textElement.d.ts +12 -9
- package/dist/types/element/src/transform.d.ts +2 -2
- package/dist/types/element/src/typeChecks.d.ts +25 -25
- package/dist/types/element/src/types.d.ts +2 -1
- package/dist/types/element/src/zindex.d.ts +2 -2
- package/dist/types/excalidraw/actions/actionAlign.d.ts +6 -6
- package/dist/types/excalidraw/actions/actionBoundText.d.ts +24 -8
- package/dist/types/excalidraw/actions/actionCanvas.d.ts +128 -961
- package/dist/types/excalidraw/actions/actionClipboard.d.ts +24 -8
- package/dist/types/excalidraw/actions/actionCropEditor.d.ts +12 -4
- package/dist/types/excalidraw/actions/actionDeleteSelected.d.ts +38 -13
- package/dist/types/excalidraw/actions/actionDeselect.d.ts +9 -4
- package/dist/types/excalidraw/actions/actionDistribute.d.ts +2 -3
- package/dist/types/excalidraw/actions/actionElementLink.d.ts +12 -4
- package/dist/types/excalidraw/actions/actionElementLock.d.ts +25 -9
- package/dist/types/excalidraw/actions/actionExport.d.ts +26 -10
- package/dist/types/excalidraw/actions/actionFrame.d.ts +47 -205
- package/dist/types/excalidraw/actions/actionGroup.d.ts +39 -23
- package/dist/types/excalidraw/actions/actionLinearEditor.d.ts +15 -6
- package/dist/types/excalidraw/actions/actionLink.d.ts +13 -5
- package/dist/types/excalidraw/actions/actionMenu.d.ts +12 -4
- package/dist/types/excalidraw/actions/actionProperties.d.ts +43 -24
- package/dist/types/excalidraw/actions/actionSelectAll.d.ts +17 -9
- package/dist/types/excalidraw/actions/actionStyles.d.ts +12 -4
- package/dist/types/excalidraw/actions/actionTextAutoResize.d.ts +1 -1
- package/dist/types/excalidraw/actions/actionToggleArrowBinding.d.ts +14 -6
- package/dist/types/excalidraw/actions/actionToggleGridMode.d.ts +16 -9
- package/dist/types/excalidraw/actions/actionToggleMidpointSnapping.d.ts +13 -5
- package/dist/types/excalidraw/actions/actionToggleObjectsSnapMode.d.ts +13 -5
- package/dist/types/excalidraw/actions/actionToggleSearchMenu.d.ts +16 -9
- package/dist/types/excalidraw/actions/actionToggleStats.d.ts +13 -5
- package/dist/types/excalidraw/actions/actionToggleViewMode.d.ts +14 -6
- package/dist/types/excalidraw/actions/actionToggleZenMode.d.ts +13 -5
- package/dist/types/excalidraw/actions/index.d.ts +1 -2
- package/dist/types/excalidraw/actions/manager.d.ts +1 -0
- package/dist/types/excalidraw/actions/shortcuts.d.ts +1 -1
- package/dist/types/excalidraw/actions/types.d.ts +8 -4
- package/dist/types/excalidraw/appState.d.ts +10 -5
- package/dist/types/excalidraw/clipboard.d.ts +34 -0
- package/dist/types/excalidraw/components/Actions.d.ts +17 -12
- package/dist/types/excalidraw/components/App.arrowText.d.ts +72 -0
- package/dist/types/excalidraw/components/App.bucketFill.d.ts +48 -0
- package/dist/types/excalidraw/components/App.cursor.d.ts +30 -0
- package/dist/types/excalidraw/components/App.d.ts +384 -60
- package/dist/types/excalidraw/components/App.drawshape.d.ts +55 -0
- package/dist/types/excalidraw/components/App.flowchart.d.ts +21 -0
- package/dist/types/excalidraw/components/App.viewport.d.ts +73 -0
- package/dist/types/excalidraw/components/ColorPicker/ColorPicker.d.ts +9 -3
- package/dist/types/excalidraw/components/ColorPicker/CustomColorList.d.ts +3 -1
- package/dist/types/excalidraw/components/ColorPicker/Picker.d.ts +3 -1
- package/dist/types/excalidraw/components/ColorPicker/PickerColorList.d.ts +9 -2
- package/dist/types/excalidraw/components/ColorPicker/ShadeList.d.ts +4 -2
- package/dist/types/excalidraw/components/ColorPicker/TopPicks.d.ts +8 -1
- package/dist/types/excalidraw/components/ColorPicker/keyboardNavHandlers.d.ts +2 -1
- package/dist/types/excalidraw/components/ColorPicker/topPicksDnD.d.ts +31 -0
- package/dist/types/excalidraw/components/ConvertElementTypePopup.d.ts +1 -1
- package/dist/types/excalidraw/components/CursorHint.d.ts +46 -0
- package/dist/types/excalidraw/components/{ToolButton.d.ts → IconButton.d.ts} +16 -19
- package/dist/types/excalidraw/components/Island.d.ts +7 -0
- package/dist/types/excalidraw/components/LaserPointerButton.d.ts +2 -4
- package/dist/types/excalidraw/components/LayerUI.d.ts +5 -2
- package/dist/types/excalidraw/components/LockButton.d.ts +9 -0
- package/dist/types/excalidraw/components/MobileMenu.d.ts +4 -4
- package/dist/types/excalidraw/components/MobileToolbar.d.ts +9 -0
- package/dist/types/excalidraw/components/PenModeButton.d.ts +2 -5
- package/dist/types/excalidraw/components/Popover.d.ts +1 -3
- package/dist/types/excalidraw/components/{ButtonIcon.d.ts → RadioButton.d.ts} +2 -5
- package/dist/types/excalidraw/components/Stats/Angle.d.ts +2 -2
- package/dist/types/excalidraw/components/Stats/Dimension.d.ts +2 -2
- package/dist/types/excalidraw/components/Stats/DragInput.d.ts +2 -2
- package/dist/types/excalidraw/components/Stats/MultiAngle.d.ts +2 -2
- package/dist/types/excalidraw/components/Stats/MultiDimension.d.ts +2 -2
- package/dist/types/excalidraw/components/Stats/MultiPosition.d.ts +2 -2
- package/dist/types/excalidraw/components/Stats/Position.d.ts +3 -3
- package/dist/types/excalidraw/components/Stats/utils.d.ts +1 -1
- package/dist/types/excalidraw/components/ToolPopover.d.ts +3 -6
- package/dist/types/excalidraw/components/Toolbar.d.ts +11 -0
- package/dist/types/excalidraw/components/Tools.d.ts +146 -0
- package/dist/types/excalidraw/components/UserList.d.ts +3 -2
- package/dist/types/excalidraw/components/ViewportStatusFrame/ViewportStatusFrame.d.ts +11 -0
- package/dist/types/excalidraw/components/canvases/InteractiveCanvas.d.ts +2 -0
- package/dist/types/excalidraw/components/footer/Footer.d.ts +3 -1
- package/dist/types/excalidraw/components/hyperlink/helpers.d.ts +2 -2
- package/dist/types/excalidraw/components/icons.d.ts +4 -1
- package/dist/types/excalidraw/components/positionElementBesideCursor.d.ts +26 -0
- package/dist/types/excalidraw/components/shapeActionPredicates.d.ts +39 -0
- package/dist/types/excalidraw/context/tunnels.d.ts +0 -1
- package/dist/types/excalidraw/data/blob.d.ts +14 -6
- package/dist/types/excalidraw/data/index.d.ts +4 -4
- package/dist/types/excalidraw/data/json.d.ts +20 -12
- package/dist/types/excalidraw/drawShapeTrail.d.ts +16 -0
- package/dist/types/excalidraw/hooks/useAppStateValue.d.ts +29 -0
- package/dist/types/excalidraw/lasso/utils.d.ts +2 -0
- package/dist/types/excalidraw/renderer/interactiveScene.d.ts +10 -3
- package/dist/types/excalidraw/scene/Renderer.d.ts +11 -11
- package/dist/types/excalidraw/scene/export.d.ts +3 -3
- package/dist/types/excalidraw/scene/index.d.ts +1 -1
- package/dist/types/excalidraw/scene/types.d.ts +4 -3
- package/dist/types/excalidraw/snapping.d.ts +7 -7
- package/dist/types/excalidraw/types.d.ts +425 -27
- package/dist/types/excalidraw/viewport.d.ts +283 -0
- package/dist/types/excalidraw/wysiwyg/textWysiwyg.d.ts +2 -3
- package/dist/types/laser-pointer/src/state.d.ts +1 -0
- package/dist/types/math/src/index.d.ts +1 -0
- package/dist/types/math/src/pca.d.ts +79 -0
- package/dist/types/math/src/polygon.d.ts +25 -1
- package/dist/types/utils/src/export.d.ts +3 -3
- package/package.json +4 -4
- package/dist/types/excalidraw/actions/actionEmbeddable.d.ts +0 -180
- package/dist/types/excalidraw/actions/actionSmartZoom.d.ts +0 -16
- package/dist/types/excalidraw/components/DefaultSidebar.d.ts +0 -27
- package/dist/types/excalidraw/components/ElementCanvasButtons.d.ts +0 -7
- package/dist/types/excalidraw/components/FollowMode/FollowMode.d.ts +0 -10
- package/dist/types/excalidraw/components/HandButton.d.ts +0 -10
- package/dist/types/excalidraw/components/MagicButton.d.ts +0 -10
- package/dist/types/excalidraw/components/MobileToolBar.d.ts +0 -12
- package/dist/types/excalidraw/cursor.d.ts +0 -5
- package/dist/types/excalidraw/scene/scroll.d.ts +0 -18
- package/dist/types/excalidraw/scene/zoom.d.ts +0 -12
- package/dist/types/excalidraw/scroll.d.ts +0 -46
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { IMAGE_MIME_TYPES, UserIdleState, throttleRAF, MIME_TYPES, ColorTuple, EditorInterface, StrokeWidthKey } from "@excalidraw/common";
|
|
2
2
|
import type { LinearElementEditor } from "@excalidraw/element";
|
|
3
3
|
import type { MaybeTransformHandleType } from "@excalidraw/element";
|
|
4
|
-
import type { PointerType, ExcalidrawLinearElement, NonDeletedExcalidrawElement, NonDeleted, TextAlign, ExcalidrawElement, GroupId, ExcalidrawBindableElement, Arrowhead, FontFamilyValues, FileId, Theme, StrokeRoundness, ExcalidrawEmbeddableElement, ExcalidrawMagicFrameElement, ExcalidrawFrameLikeElement, ExcalidrawElementType, ExcalidrawIframeLikeElement, OrderedExcalidrawElement, ExcalidrawNonSelectionElement, ArrangeAlgorithms, BindMode, ExcalidrawTextElement, StrokeVariability } from "@excalidraw/element/types";
|
|
4
|
+
import type { PointerType, ExcalidrawLinearElement, NonDeletedExcalidrawElement, NonDeleted, TextAlign, ExcalidrawElement, GroupId, ExcalidrawBindableElement, ExcalidrawArrowElement, Arrowhead, FontFamilyValues, FileId, Theme, StrokeRoundness, ExcalidrawEmbeddableElement, ExcalidrawMagicFrameElement, ExcalidrawFrameLikeElement, ExcalidrawElementType, ExcalidrawIframeLikeElement, OrderedExcalidrawElement, ExcalidrawNonSelectionElement, ArrangeAlgorithms, BindMode, ExcalidrawTextElement, StrokeVariability } from "@excalidraw/element/types";
|
|
5
5
|
import type { Merge, MaybePromise, ValueOf, MakeBrand } from "@excalidraw/common/utility-types";
|
|
6
6
|
import type { CaptureUpdateActionType, DurableIncrement, EphemeralIncrement } from "@excalidraw/element";
|
|
7
7
|
import type { GlobalPoint } from "@excalidraw/math";
|
|
@@ -12,6 +12,7 @@ import type App from "./components/App";
|
|
|
12
12
|
import type { ContextMenuCustomItem, ContextMenuItems } from "./components/ContextMenu";
|
|
13
13
|
import type { SnapLine } from "./snapping";
|
|
14
14
|
import type { ImportedDataState } from "./data/types";
|
|
15
|
+
import type { SetViewportOptions } from "./viewport";
|
|
15
16
|
import type { Language } from "./i18n";
|
|
16
17
|
import type { isOverScrollBars } from "./scene/scrollbars";
|
|
17
18
|
import type React from "react";
|
|
@@ -87,7 +88,35 @@ export type BinaryFileData = {
|
|
|
87
88
|
export type BinaryFileMetadata = Omit<BinaryFileData, "dataURL">;
|
|
88
89
|
export type BinaryFiles = Record<ExcalidrawElement["id"], BinaryFileData>;
|
|
89
90
|
export type ImageContextMenuItem = ContextMenuCustomItem;
|
|
90
|
-
export type
|
|
91
|
+
export type ImageStatusStyle = {
|
|
92
|
+
backgroundColor?: string;
|
|
93
|
+
color?: string;
|
|
94
|
+
trackColor?: string;
|
|
95
|
+
};
|
|
96
|
+
export type ImageDownloadErrorStatus = ImageStatusStyle & {
|
|
97
|
+
/** Optional error message rendered below the error icon. */
|
|
98
|
+
text?: string;
|
|
99
|
+
/** Makes the rendered download error icon actionable when supplied. */
|
|
100
|
+
onClick?: (fileId: FileId) => void;
|
|
101
|
+
};
|
|
102
|
+
export type ImageUploadProgressStatus = ImageStatusStyle & {
|
|
103
|
+
/**
|
|
104
|
+
* `pending` renders the cloud indicator before upload starts.
|
|
105
|
+
* `uploading` renders the progress ring around the cloud.
|
|
106
|
+
* `error` renders the cloud warning indicator.
|
|
107
|
+
*/
|
|
108
|
+
state?: "pending" | "uploading" | "error";
|
|
109
|
+
progress?: number;
|
|
110
|
+
/** Optional upload error message for host-owned UI/toasts. */
|
|
111
|
+
text?: string;
|
|
112
|
+
/** Makes the rendered upload progress indicator actionable when supplied. */
|
|
113
|
+
onClick?: (fileId: FileId) => void;
|
|
114
|
+
};
|
|
115
|
+
export type ImageStatus = {
|
|
116
|
+
downloadError?: ImageDownloadErrorStatus | null;
|
|
117
|
+
uploadProgress?: ImageUploadProgressStatus | null;
|
|
118
|
+
};
|
|
119
|
+
export type ToolType = "selection" | "lasso" | "rectangle" | "diamond" | "ellipse" | "arrow" | "line" | "freedraw" | "text" | "image" | "eraser" | "hand" | "frame" | "magicframe" | "embeddable" | "laser" | "autoshape" | "bucketfill";
|
|
91
120
|
export type ElementOrToolType = ExcalidrawElementType | ToolType | "custom";
|
|
92
121
|
export type ActiveTool = {
|
|
93
122
|
type: ToolType;
|
|
@@ -141,7 +170,9 @@ export type InteractiveCanvasAppState = Readonly<_CommonCanvasAppState & {
|
|
|
141
170
|
newElement: AppState["newElement"];
|
|
142
171
|
isBindingEnabled: AppState["isBindingEnabled"];
|
|
143
172
|
isMidpointSnappingEnabled: AppState["isMidpointSnappingEnabled"];
|
|
173
|
+
gridModeEnabled: AppState["gridModeEnabled"];
|
|
144
174
|
suggestedBinding: AppState["suggestedBinding"];
|
|
175
|
+
hoveredArrowTextAnchor: AppState["hoveredArrowTextAnchor"];
|
|
145
176
|
isRotating: AppState["isRotating"];
|
|
146
177
|
elementsToHighlight: AppState["elementsToHighlight"];
|
|
147
178
|
collaborators: AppState["collaborators"];
|
|
@@ -197,6 +228,41 @@ export type EditorPreferences = {
|
|
|
197
228
|
normalise?: NormalisePreferences;
|
|
198
229
|
};
|
|
199
230
|
export type BoxSelectionMode = "contain" | "overlap";
|
|
231
|
+
/**
|
|
232
|
+
* A box, in scene coordinates, that pan & zoom are constrained to.
|
|
233
|
+
*
|
|
234
|
+
* This is a private type. For public API, only use specific properties,
|
|
235
|
+
* needed.
|
|
236
|
+
*/
|
|
237
|
+
export type ScrollConstraints = {
|
|
238
|
+
x: number;
|
|
239
|
+
y: number;
|
|
240
|
+
width: number;
|
|
241
|
+
height: number;
|
|
242
|
+
/** when set, panning is constrained so the viewport stays within the box */
|
|
243
|
+
lockScroll: boolean;
|
|
244
|
+
/** when set, the viewport cannot zoom out below `zoom` */
|
|
245
|
+
lockZoom: boolean;
|
|
246
|
+
/**
|
|
247
|
+
* The zoom resolved after the `setViewport` navigation settled.
|
|
248
|
+
*/
|
|
249
|
+
zoom: number;
|
|
250
|
+
/**
|
|
251
|
+
* Pixel amount the viewport may overscroll past its resting clamp before
|
|
252
|
+
* snapping back (rubberband). Screen pixels, zoom-independent. Resolved
|
|
253
|
+
* from `lock.overscroll` at the time the lock was installed (`true` →
|
|
254
|
+
* default give, `false` → 0).
|
|
255
|
+
*/
|
|
256
|
+
overscroll: number;
|
|
257
|
+
/**
|
|
258
|
+
* Extra scrollable margin around the box (CSS-style), letting the viewport
|
|
259
|
+
* scroll past each box edge to reveal that much empty space. Values are
|
|
260
|
+
* viewport pixels and zoom-independent (a fixed on-screen distance).
|
|
261
|
+
* Resolved from the `offsets` passed to `setViewport` (see
|
|
262
|
+
* {@link ViewportOffsets}) at the time the lock was installed.
|
|
263
|
+
*/
|
|
264
|
+
offsets?: Offsets;
|
|
265
|
+
};
|
|
200
266
|
export interface AppState {
|
|
201
267
|
contextMenu: {
|
|
202
268
|
items: ContextMenuItems;
|
|
@@ -261,6 +327,15 @@ export interface AppState {
|
|
|
261
327
|
element: NonDeleted<ExcalidrawBindableElement>;
|
|
262
328
|
midPoint?: GlobalPoint;
|
|
263
329
|
} | null;
|
|
330
|
+
/**
|
|
331
|
+
* Where on a hovered arrow the text tool would attach text if clicked —
|
|
332
|
+
* a free endpoint (binds the arrow to a new text element positioned against
|
|
333
|
+
* that endpoint) or the arrow's midpoint (adds a label bound to the arrow).
|
|
334
|
+
*/
|
|
335
|
+
hoveredArrowTextAnchor: {
|
|
336
|
+
elementId: ExcalidrawArrowElement["id"];
|
|
337
|
+
anchor: "start" | "end" | "label";
|
|
338
|
+
} | null;
|
|
264
339
|
frameToHighlight: NonDeleted<ExcalidrawFrameLikeElement> | null;
|
|
265
340
|
frameRendering: {
|
|
266
341
|
enabled: boolean;
|
|
@@ -268,8 +343,11 @@ export interface AppState {
|
|
|
268
343
|
outline: boolean;
|
|
269
344
|
clip: boolean;
|
|
270
345
|
};
|
|
271
|
-
|
|
272
|
-
|
|
346
|
+
/**
|
|
347
|
+
* frame-like element whose name is currently being edited
|
|
348
|
+
*/
|
|
349
|
+
editingFrame: ExcalidrawFrameLikeElement["id"] | null;
|
|
350
|
+
elementsToHighlight: readonly NonDeletedExcalidrawElement[] | null;
|
|
273
351
|
/**
|
|
274
352
|
* set when a new text is created or when an existing text is being edited
|
|
275
353
|
*/
|
|
@@ -312,6 +390,7 @@ export interface AppState {
|
|
|
312
390
|
viewBackgroundColor: string;
|
|
313
391
|
scrollX: number;
|
|
314
392
|
scrollY: number;
|
|
393
|
+
scrollConstraints: ScrollConstraints | null;
|
|
315
394
|
cursorButton: "up" | "down";
|
|
316
395
|
scrolledOutside: boolean;
|
|
317
396
|
name: string | null;
|
|
@@ -395,10 +474,6 @@ export interface AppState {
|
|
|
395
474
|
y: number;
|
|
396
475
|
} | null;
|
|
397
476
|
objectsSnapModeEnabled: boolean;
|
|
398
|
-
/** the user's socket id & username who is being followed on the canvas */
|
|
399
|
-
userToFollow: UserToFollow | null;
|
|
400
|
-
/** the socket ids of the users following the current user */
|
|
401
|
-
followedBy: Set<SocketId>;
|
|
402
477
|
/** image cropping */
|
|
403
478
|
isCropping: boolean;
|
|
404
479
|
croppingElementId: ExcalidrawElement["id"] | null;
|
|
@@ -413,6 +488,17 @@ export interface AppState {
|
|
|
413
488
|
[groupId: string]: true;
|
|
414
489
|
};
|
|
415
490
|
bindMode: BindMode;
|
|
491
|
+
/** user-customized color-picker top picks (pinned via drag & drop from the
|
|
492
|
+
* color picker popup). `null` means no customization (defaults, or
|
|
493
|
+
* host-supplied `topPicks`, are used). Kept per picker. */
|
|
494
|
+
colorTopPicks: {
|
|
495
|
+
elementStroke: readonly string[] | null;
|
|
496
|
+
elementBackground: readonly string[] | null;
|
|
497
|
+
/** the bucket-fill tool keeps a list separate from `elementBackground`
|
|
498
|
+
* even though both drive `currentItemBackgroundColor` (its defaults and
|
|
499
|
+
* use case differ — no transparent) */
|
|
500
|
+
bucketFill: readonly string[] | null;
|
|
501
|
+
};
|
|
416
502
|
}
|
|
417
503
|
export type SearchMatch = {
|
|
418
504
|
id: string;
|
|
@@ -425,7 +511,7 @@ export type SearchMatch = {
|
|
|
425
511
|
showOnCanvas: boolean;
|
|
426
512
|
}[];
|
|
427
513
|
};
|
|
428
|
-
export type UIAppState = Omit<AppState, "cursorButton" | "scrollX" | "scrollY">;
|
|
514
|
+
export type UIAppState = Omit<AppState, "cursorButton" | "scrollX" | "scrollY" | "zoom" | "shouldCacheIgnoreZoom" | "snapLines" | "originSnapOffset" | "suggestedBinding" | "hoveredArrowTextAnchor" | "frameToHighlight" | "elementsToHighlight">;
|
|
429
515
|
export type NormalizedZoomValue = number & {
|
|
430
516
|
_brand: "normalizedZoom";
|
|
431
517
|
};
|
|
@@ -450,10 +536,30 @@ export declare class GestureEvent extends UIEvent {
|
|
|
450
536
|
readonly scale: number;
|
|
451
537
|
}
|
|
452
538
|
export type ExcalidrawInitialDataState = ImportedDataState;
|
|
539
|
+
export type ExcalidrawInitialState = {
|
|
540
|
+
viewport?: Omit<SetViewportOptions, "animation">;
|
|
541
|
+
};
|
|
453
542
|
export type OnUserFollowedPayload = {
|
|
454
543
|
userToFollow: UserToFollow;
|
|
455
544
|
action: "FOLLOW" | "UNFOLLOW";
|
|
456
545
|
};
|
|
546
|
+
export type ViewportStatusFrame = {
|
|
547
|
+
/** the badge (bottom-center pill) */
|
|
548
|
+
label?: {
|
|
549
|
+
label: React.ReactNode;
|
|
550
|
+
icon?: React.ReactNode;
|
|
551
|
+
/** badge background; defaults to var(--color-primary-hover) */
|
|
552
|
+
background?: string;
|
|
553
|
+
/** badge text color; defaults to var(--color-primary-light) */
|
|
554
|
+
color?: string;
|
|
555
|
+
/** makes the badge label interactive */
|
|
556
|
+
onClick?: () => void;
|
|
557
|
+
/** renders a close button when set */
|
|
558
|
+
onClose?: () => void;
|
|
559
|
+
};
|
|
560
|
+
/** viewport-edge border: CSS color, or `false` for none */
|
|
561
|
+
border: false | string;
|
|
562
|
+
};
|
|
457
563
|
export type OnExportProgress = {
|
|
458
564
|
type: "progress";
|
|
459
565
|
message?: React.ReactNode;
|
|
@@ -466,7 +572,113 @@ export type CompressImageFileOpts = {
|
|
|
466
572
|
maxWidthOrHeight: number;
|
|
467
573
|
};
|
|
468
574
|
export type CompressImageFile = (file: File, opts: CompressImageFileOpts) => Promise<File>;
|
|
575
|
+
export type InteractionConfig = {
|
|
576
|
+
/**
|
|
577
|
+
* Interactions that stay enabled while the editor is otherwise
|
|
578
|
+
* non-interactive. Opt-in: anything omitted or `false` is disabled.
|
|
579
|
+
*/
|
|
580
|
+
enabled?: {
|
|
581
|
+
/**
|
|
582
|
+
* Element links render their link icon and stay clickable — clicking
|
|
583
|
+
* anywhere on a linked element opens the link, same as in view mode.
|
|
584
|
+
* When disabled, link icons are not rendered at all.
|
|
585
|
+
*
|
|
586
|
+
* @default false
|
|
587
|
+
*/
|
|
588
|
+
links?: boolean;
|
|
589
|
+
/**
|
|
590
|
+
* Embeddable & iframe elements stay interactive — hovering & clicking
|
|
591
|
+
* activates them so their content can be used, same as in view mode.
|
|
592
|
+
*
|
|
593
|
+
* @default false
|
|
594
|
+
*/
|
|
595
|
+
embeds?: boolean;
|
|
596
|
+
/**
|
|
597
|
+
* Umbrella for all interactive content on canvas — shorthand for
|
|
598
|
+
* enabling `links` & `embeds` (and future interactive content kinds)
|
|
599
|
+
* together. Additive: `interactiveContent: true` enables them
|
|
600
|
+
* regardless of their individual values.
|
|
601
|
+
*
|
|
602
|
+
* @default false
|
|
603
|
+
*/
|
|
604
|
+
interactiveContent?: boolean;
|
|
605
|
+
/**
|
|
606
|
+
* Canvas navigation — panning (pointer drag, wheel, PageUp/PageDown)
|
|
607
|
+
* and zooming (ctrl/cmd + wheel, pinch, and the canvas zoom &
|
|
608
|
+
* zoom-to-fit shortcuts: ctrl/cmd +/-/0, shift+1/2/3), same as in view
|
|
609
|
+
* mode. Respects `appState.scrollConstraints` if set, so it composes
|
|
610
|
+
* with viewport locking. The rest of the keyboard stays disabled. Note
|
|
611
|
+
* the editor consumes wheel & touch input again when enabled, so the
|
|
612
|
+
* page no longer scrolls over the editor.
|
|
613
|
+
*
|
|
614
|
+
* @default false
|
|
615
|
+
*/
|
|
616
|
+
navigation?: boolean;
|
|
617
|
+
/**
|
|
618
|
+
* Whether the browser's own zoom remains available over the editor —
|
|
619
|
+
* ctrl/cmd + wheel, pinch, and (while the editor has focus)
|
|
620
|
+
* ctrl/cmd +/-/0 shortcuts. Prevented by default, mirroring the
|
|
621
|
+
* interactive editor. Regular page scrolling stays available either way.
|
|
622
|
+
* With `navigation` enabled, the zoom input (wheel, pinch, keyboard
|
|
623
|
+
* shortcuts) zooms the canvas instead either way, making this moot.
|
|
624
|
+
*
|
|
625
|
+
* @default false
|
|
626
|
+
*/
|
|
627
|
+
browserZoom?: boolean;
|
|
628
|
+
/**
|
|
629
|
+
* Tools that stay user-driven while the editor is otherwise
|
|
630
|
+
* non-interactive: pointer input keeps driving the listed tool when it's
|
|
631
|
+
* the active tool. Does not enable user-driven tool *switching* — the
|
|
632
|
+
* keyboard stays disabled and tool selection remains host-driven
|
|
633
|
+
* (`ExcalidrawAPI.setActiveTool`).
|
|
634
|
+
*
|
|
635
|
+
* Composes with `navigation`: the enabled tool wins the primary-pointer
|
|
636
|
+
* drag, while wheel input (and wheel-button drag) still pans/zooms.
|
|
637
|
+
*/
|
|
638
|
+
tools?: {
|
|
639
|
+
/**
|
|
640
|
+
* The laser pointer stays usable — pointer strokes draw laser trails
|
|
641
|
+
* and pointer positions keep broadcasting via `onPointerUpdate`, so
|
|
642
|
+
* e.g. collaborators see a presenter's laser & cursor.
|
|
643
|
+
*
|
|
644
|
+
* @default false
|
|
645
|
+
*/
|
|
646
|
+
laser?: boolean;
|
|
647
|
+
/**
|
|
648
|
+
* Custom tools (`activeTool.type === "custom"`) stay usable — the
|
|
649
|
+
* editor keeps dispatching `onPointerDown` / `onPointerUp` for them.
|
|
650
|
+
* Tool behavior is host-implemented; activate custom tools with
|
|
651
|
+
* `locked: true` or they revert to the selection tool (and go inert)
|
|
652
|
+
* after the first pointer interaction.
|
|
653
|
+
*
|
|
654
|
+
* @default false
|
|
655
|
+
*/
|
|
656
|
+
custom?: boolean;
|
|
657
|
+
};
|
|
658
|
+
};
|
|
659
|
+
};
|
|
660
|
+
export type UIConfig = {
|
|
661
|
+
/**
|
|
662
|
+
* Default UI controls that stay enabled while the rest of Excalidraw's
|
|
663
|
+
* default UI is hidden. Opt-in: anything omitted or `false` is disabled.
|
|
664
|
+
*/
|
|
665
|
+
enabled: {
|
|
666
|
+
/**
|
|
667
|
+
* The zoom-out, reset-zoom, and zoom-in controls.
|
|
668
|
+
*
|
|
669
|
+
* @default false
|
|
670
|
+
*/
|
|
671
|
+
zoom?: boolean;
|
|
672
|
+
/**
|
|
673
|
+
* The button shown when the viewport is scrolled away from all content.
|
|
674
|
+
*
|
|
675
|
+
* @default false
|
|
676
|
+
*/
|
|
677
|
+
scrollBackToContent?: boolean;
|
|
678
|
+
};
|
|
679
|
+
};
|
|
469
680
|
export interface ExcalidrawProps {
|
|
681
|
+
className?: string;
|
|
470
682
|
onChange?: (elements: readonly OrderedExcalidrawElement[], appState: AppState, files: BinaryFiles) => void;
|
|
471
683
|
onThemeChange?: (theme: Theme | "system") => void;
|
|
472
684
|
/**
|
|
@@ -474,6 +686,7 @@ export interface ExcalidrawProps {
|
|
|
474
686
|
*/
|
|
475
687
|
onIncrement?: (event: DurableIncrement | EphemeralIncrement) => void;
|
|
476
688
|
initialData?: (() => MaybePromise<ExcalidrawInitialDataState | null>) | MaybePromise<ExcalidrawInitialDataState | null>;
|
|
689
|
+
initialState?: ExcalidrawInitialState;
|
|
477
690
|
/**
|
|
478
691
|
* Invoked as soon as the Excalidraw API is available
|
|
479
692
|
* NOTE editor is not yet mounted, and state is not yet initialized
|
|
@@ -520,6 +733,70 @@ export interface ExcalidrawProps {
|
|
|
520
733
|
langCode?: Language["code"];
|
|
521
734
|
viewModeEnabled?: boolean;
|
|
522
735
|
viewModeOnly?: boolean;
|
|
736
|
+
/**
|
|
737
|
+
* Whether the editor accepts user input (pointer, keyboard, wheel, touch,
|
|
738
|
+
* clipboard, drag&drop). When `false`, the scene still renders and reacts
|
|
739
|
+
* to programmatic updates (imperative API), but the user cannot affect it
|
|
740
|
+
* in any way. Implies view mode.
|
|
741
|
+
*
|
|
742
|
+
* Pass a config object to keep specific interactions enabled while the
|
|
743
|
+
* editor is otherwise non-interactive (see `InteractionConfig`):
|
|
744
|
+
*
|
|
745
|
+
* ```tsx
|
|
746
|
+
* <Excalidraw interaction={{ enabled: { links: true } }} />
|
|
747
|
+
* ```
|
|
748
|
+
*
|
|
749
|
+
* @default true
|
|
750
|
+
*/
|
|
751
|
+
interaction?: boolean | InteractionConfig;
|
|
752
|
+
/**
|
|
753
|
+
* Whether Excalidraw's default UI is rendered — toolbar, default menus,
|
|
754
|
+
* footer controls, sidebars, and canvas popups. Host UI passed through
|
|
755
|
+
* children (including exported components such as `MainMenu` and `Footer`)
|
|
756
|
+
* or render props continues to render, together with any supporting dialogs
|
|
757
|
+
* it opens.
|
|
758
|
+
*
|
|
759
|
+
* Canvas content (elements, text editing surface, frame names, embeds) still
|
|
760
|
+
* renders, and the editor remains interactive unless `interaction` is set to
|
|
761
|
+
* `false`.
|
|
762
|
+
*
|
|
763
|
+
* Pass a config object to keep specific default controls rendered while the
|
|
764
|
+
* rest of the default UI is hidden (see `UIConfig`):
|
|
765
|
+
*
|
|
766
|
+
* ```tsx
|
|
767
|
+
* <Excalidraw ui={{ enabled: { zoom: true } }} />
|
|
768
|
+
* ```
|
|
769
|
+
*
|
|
770
|
+
* NOTE: this is WIP and what default UI is/is not rendered when ui=false
|
|
771
|
+
* may yet change.
|
|
772
|
+
*
|
|
773
|
+
* @default true
|
|
774
|
+
*/
|
|
775
|
+
ui?: boolean | UIConfig;
|
|
776
|
+
/**
|
|
777
|
+
* Forces the active editor tool (controlled). While set, user- and
|
|
778
|
+
* API-driven tool switching is ignored — `setActiveTool` refuses with a
|
|
779
|
+
* console warning, non-forced toolbar buttons render disabled — and the
|
|
780
|
+
* editor snaps back if internal flows reset the tool. The forced tool
|
|
781
|
+
* behaves as if locked (see the tool lock / padlock): it doesn't revert to
|
|
782
|
+
* the selection tool after use, and elements drawn with it aren't
|
|
783
|
+
* auto-selected — without mutating `appState.activeTool.locked`, so the
|
|
784
|
+
* user's persisted padlock preference stays untouched. Unset to return
|
|
785
|
+
* tool control to the editor (the current tool stays active).
|
|
786
|
+
*
|
|
787
|
+
* The forced tool must be activatable to take effect: not disabled via
|
|
788
|
+
* `UIOptions.tools`, and — while the editor is non-interactive — allowed
|
|
789
|
+
* via `interaction.enabled.tools`. Otherwise the editor stays on (or, when
|
|
790
|
+
* non-interactive, resets to) the `selection` tool, and the forced tool is
|
|
791
|
+
* applied once it becomes activatable. `image` cannot be forced (its
|
|
792
|
+
* activation opens the file picker).
|
|
793
|
+
*/
|
|
794
|
+
activeTool?: {
|
|
795
|
+
type: Exclude<ToolType, "image">;
|
|
796
|
+
} | {
|
|
797
|
+
type: "custom";
|
|
798
|
+
customType: string;
|
|
799
|
+
};
|
|
523
800
|
zenModeEnabled?: boolean;
|
|
524
801
|
gridModeEnabled?: boolean;
|
|
525
802
|
objectsSnapModeEnabled?: boolean;
|
|
@@ -536,13 +813,15 @@ export interface ExcalidrawProps {
|
|
|
536
813
|
detectScroll?: boolean;
|
|
537
814
|
handleKeyboardGlobally?: boolean;
|
|
538
815
|
autoFocus?: boolean;
|
|
539
|
-
compressImageFile
|
|
816
|
+
compressImageFile?: CompressImageFile;
|
|
540
817
|
generateIdForFile?: (file: File) => string | Promise<string>;
|
|
541
818
|
generateLinkForSelection?: (id: string, type: "element" | "group") => string;
|
|
542
819
|
onLinkOpen?: (element: NonDeletedExcalidrawElement, event: CustomEvent<{
|
|
543
820
|
nativeEvent: MouseEvent | React.PointerEvent<HTMLCanvasElement>;
|
|
544
821
|
}>) => void;
|
|
545
822
|
imageContextMenuItems?: (imageIds: readonly ExcalidrawElement["id"][]) => readonly ImageContextMenuItem[];
|
|
823
|
+
/** @internal Myoc app-only diagnostics for mobile drag/drop payloads. */
|
|
824
|
+
showDropEventDebugAlert?: boolean;
|
|
546
825
|
onPointerDown?: (activeTool: AppState["activeTool"], pointerDownState: PointerDownState) => void;
|
|
547
826
|
onPointerUp?: (activeTool: AppState["activeTool"], pointerDownState: PointerDownState) => void;
|
|
548
827
|
onScrollChange?: (scrollX: number, scrollY: number, zoom: Zoom) => void;
|
|
@@ -555,6 +834,21 @@ export interface ExcalidrawProps {
|
|
|
555
834
|
strokeColorTopPicks?: ColorTuple;
|
|
556
835
|
backgroundColorTopPicks?: ColorTuple;
|
|
557
836
|
renderScrollbars?: boolean;
|
|
837
|
+
viewportStatusFrame?: ViewportStatusFrame | null;
|
|
838
|
+
/**
|
|
839
|
+
* Rendered inside the UserList "who's here" dropdown (desktop) and inline
|
|
840
|
+
* in the mobile menu's collaborators section, below a divider. Accepts a
|
|
841
|
+
* render function — called with `isMobile` so hosts can render different
|
|
842
|
+
* UI for each surface — in addition to a plain node.
|
|
843
|
+
*/
|
|
844
|
+
currentUserControls?: React.ReactNode | ((isMobile: boolean) => React.ReactNode);
|
|
845
|
+
/**
|
|
846
|
+
* The user being followed on the canvas, if any. Controlled by the host —
|
|
847
|
+
* the editor never sets it; it emits follow/unfollow intents via
|
|
848
|
+
* `onUserFollow` (prop or imperative API) and renders the followed
|
|
849
|
+
* user's avatar highlight from this value.
|
|
850
|
+
*/
|
|
851
|
+
userToFollow?: UserToFollow | null;
|
|
558
852
|
/**
|
|
559
853
|
* Called before exporting to a file.
|
|
560
854
|
*
|
|
@@ -630,11 +924,11 @@ export type AppProps = Merge<ExcalidrawProps, {
|
|
|
630
924
|
};
|
|
631
925
|
}>;
|
|
632
926
|
imageOptions: Required<ImageOptions>;
|
|
633
|
-
wheelZoomsOnDefault?: boolean;
|
|
634
927
|
detectScroll: boolean;
|
|
635
928
|
handleKeyboardGlobally: boolean;
|
|
636
929
|
isCollaborating: boolean;
|
|
637
930
|
children?: React.ReactNode;
|
|
931
|
+
wheelZoomsOnDefault?: boolean;
|
|
638
932
|
}>;
|
|
639
933
|
/** A subset of App class properties that we need to use elsewhere
|
|
640
934
|
* in the app, eg Manager. Factored out into a separate type to keep DRY. */
|
|
@@ -656,6 +950,8 @@ export type AppClassProperties = {
|
|
|
656
950
|
}>;
|
|
657
951
|
imageLoadingProgress: App["imageLoadingProgress"];
|
|
658
952
|
imageLoadingProgressEmitter: App["imageLoadingProgressEmitter"];
|
|
953
|
+
imageStatus: App["imageStatus"];
|
|
954
|
+
imageStatusEmitter: App["imageStatusEmitter"];
|
|
659
955
|
imagePlaceholderUpdateEmitter: App["imagePlaceholderUpdateEmitter"];
|
|
660
956
|
files: BinaryFiles;
|
|
661
957
|
editorInterface: App["editorInterface"];
|
|
@@ -666,6 +962,7 @@ export type AppClassProperties = {
|
|
|
666
962
|
id: App["id"];
|
|
667
963
|
onInsertElements: App["onInsertElements"];
|
|
668
964
|
onExportImage: App["onExportImage"];
|
|
965
|
+
viewport: App["viewport"];
|
|
669
966
|
lastViewportPosition: App["lastViewportPosition"];
|
|
670
967
|
scrollToViewport: App["scrollToViewport"];
|
|
671
968
|
scrollToContent: App["scrollToContent"];
|
|
@@ -676,14 +973,14 @@ export type AppClassProperties = {
|
|
|
676
973
|
setActiveTool: App["setActiveTool"];
|
|
677
974
|
setOpenDialog: App["setOpenDialog"];
|
|
678
975
|
insertEmbeddableElement: App["insertEmbeddableElement"];
|
|
679
|
-
onMagicframeToolSelect: App["onMagicframeToolSelect"];
|
|
680
976
|
getName: App["getName"];
|
|
681
977
|
dismissLinearEditor: App["dismissLinearEditor"];
|
|
682
|
-
|
|
978
|
+
flowchart: App["flowchart"];
|
|
979
|
+
drawShape: App["drawShape"];
|
|
980
|
+
cursor: App["cursor"];
|
|
981
|
+
bucketFill: App["bucketFill"];
|
|
982
|
+
isToolLocked: App["isToolLocked"];
|
|
683
983
|
getEffectiveGridSize: App["getEffectiveGridSize"];
|
|
684
|
-
setPlugins: App["setPlugins"];
|
|
685
|
-
plugins: App["plugins"];
|
|
686
|
-
getEditorUIOffsets: App["getEditorUIOffsets"];
|
|
687
984
|
visibleElements: App["visibleElements"];
|
|
688
985
|
excalidrawContainerValue: App["excalidrawContainerValue"];
|
|
689
986
|
onPointerUpEmitter: App["onPointerUpEmitter"];
|
|
@@ -692,8 +989,13 @@ export type AppClassProperties = {
|
|
|
692
989
|
onEvent: App["onEvent"];
|
|
693
990
|
onStateChange: App["onStateChange"];
|
|
694
991
|
lastPointerMoveCoords: App["lastPointerMoveCoords"];
|
|
992
|
+
lastPointerMoveEvent: App["lastPointerMoveEvent"];
|
|
695
993
|
bindModeHandler: App["bindModeHandler"];
|
|
994
|
+
emitUserFollowIntent: App["emitUserFollowIntent"];
|
|
995
|
+
requestUnfollow: App["requestUnfollow"];
|
|
696
996
|
setAppState: App["setAppState"];
|
|
997
|
+
isInteractionEnabled: App["isInteractionEnabled"];
|
|
998
|
+
isNavigationEnabled: App["isNavigationEnabled"];
|
|
697
999
|
};
|
|
698
1000
|
export type PointerDownState = Readonly<{
|
|
699
1001
|
origin: Readonly<{
|
|
@@ -781,20 +1083,24 @@ export interface ExcalidrawImperativeAPI {
|
|
|
781
1083
|
getName: InstanceType<typeof App>["getName"];
|
|
782
1084
|
scrollToViewport: InstanceType<typeof App>["scrollToViewport"];
|
|
783
1085
|
scrollToContent: InstanceType<typeof App>["scrollToContent"];
|
|
1086
|
+
setViewport: InstanceType<typeof App>["viewport"]["setViewport"];
|
|
1087
|
+
getViewportOffsets: InstanceType<typeof App>["viewport"]["getOffsets"];
|
|
784
1088
|
registerAction: (action: Action) => void;
|
|
785
1089
|
refresh: InstanceType<typeof App>["refresh"];
|
|
786
1090
|
setToast: InstanceType<typeof App>["setToast"];
|
|
787
1091
|
addFiles: (data: BinaryFileData[]) => void;
|
|
788
1092
|
addImagePlaceholder: (fileId: FileId, file: File) => Promise<void>;
|
|
789
|
-
|
|
1093
|
+
setDownloadProgress: (fileId: FileId, progress: number | null) => void;
|
|
1094
|
+
setDownloadError: (fileId: FileId, error: boolean | ImageDownloadErrorStatus | null) => void;
|
|
1095
|
+
setUploadProgress: (fileId: FileId, progress: number | "pending" | "error" | null, status?: Omit<ImageUploadProgressStatus, "progress"> | null) => void;
|
|
790
1096
|
addImageElementsToScene: (imageFiles: {
|
|
791
1097
|
file: File;
|
|
792
1098
|
customData: Record<string, any>;
|
|
793
1099
|
}[], sceneX: number, sceneY: number) => Promise<void>;
|
|
794
1100
|
id: string;
|
|
795
1101
|
setActiveTool: InstanceType<typeof App>["setActiveTool"];
|
|
796
|
-
setCursor: InstanceType<typeof App>["
|
|
797
|
-
resetCursor: InstanceType<typeof App>["
|
|
1102
|
+
setCursor: InstanceType<typeof App>["cursor"]["set"];
|
|
1103
|
+
resetCursor: InstanceType<typeof App>["cursor"]["reset"];
|
|
798
1104
|
toggleSidebar: InstanceType<typeof App>["toggleSidebar"];
|
|
799
1105
|
getEditorInterface: () => EditorInterface;
|
|
800
1106
|
/**
|
|
@@ -817,7 +1123,6 @@ export type FrameNameBounds = {
|
|
|
817
1123
|
y: number;
|
|
818
1124
|
width: number;
|
|
819
1125
|
height: number;
|
|
820
|
-
angle: number;
|
|
821
1126
|
};
|
|
822
1127
|
export type FrameNameBoundsCache = {
|
|
823
1128
|
get: (frameElement: ExcalidrawFrameLikeElement | ExcalidrawMagicFrameElement) => FrameNameBounds | null;
|
|
@@ -836,18 +1141,111 @@ export type Primitive = number | string | boolean | bigint | symbol | null | und
|
|
|
836
1141
|
export type JSONValue = string | number | boolean | null | object;
|
|
837
1142
|
export type EmbedsValidationStatus = Map<ExcalidrawIframeLikeElement["id"], boolean>;
|
|
838
1143
|
export type ElementsPendingErasure = Set<ExcalidrawElement["id"]>;
|
|
839
|
-
export type PendingExcalidrawElements =
|
|
1144
|
+
export type PendingExcalidrawElements = NonDeletedExcalidrawElement[];
|
|
840
1145
|
/** Runtime gridSize value. Null indicates disabled grid. */
|
|
841
1146
|
export type NullableGridSize = (AppState["gridSize"] & MakeBrand<"NullableGridSize">) | null;
|
|
842
|
-
export type GenerateDiagramToCode = (props: {
|
|
843
|
-
frame: ExcalidrawMagicFrameElement;
|
|
844
|
-
children: readonly ExcalidrawElement[];
|
|
845
|
-
}) => MaybePromise<{
|
|
846
|
-
html: string;
|
|
847
|
-
}>;
|
|
848
1147
|
export type Offsets = Partial<{
|
|
849
1148
|
top: number;
|
|
850
1149
|
right: number;
|
|
851
1150
|
bottom: number;
|
|
852
1151
|
left: number;
|
|
853
1152
|
}>;
|
|
1153
|
+
/**
|
|
1154
|
+
* Value of the `data-viewport-ui` attribute, marking a DOM node as a UI
|
|
1155
|
+
* surface that occludes the canvas. Such nodes are measured by
|
|
1156
|
+
* `getViewportOffsets` to compute the default per-side viewport offsets:
|
|
1157
|
+
*
|
|
1158
|
+
* - `top` / `bottom` — offsets that side by the node's bottom/top edge
|
|
1159
|
+
* - `side` — a panel hugging the left or right edge. Which side is not
|
|
1160
|
+
* declared but resolved geometrically: if the node's horizontal center
|
|
1161
|
+
* lies in the left half of the viewport it counts against the left
|
|
1162
|
+
* offset (by its right edge), otherwise against the right offset (by
|
|
1163
|
+
* `viewportWidth - left edge`). Measuring the rendered position instead
|
|
1164
|
+
* of declaring a side means RTL layouts and host-configurable docking
|
|
1165
|
+
* (e.g. sidebar side) are handled for free — but it assumes the surface
|
|
1166
|
+
* actually hugs one edge; don't mark a centered/near-full-width node as
|
|
1167
|
+
* `side` (its midpoint would classify it to one side and the offset
|
|
1168
|
+
* would swallow most of the viewport).
|
|
1169
|
+
*
|
|
1170
|
+
* The attribute should only be present while the surface is actually
|
|
1171
|
+
* rendered — omit it (don't just hide the node) when the surface shouldn't
|
|
1172
|
+
* push the viewport around.
|
|
1173
|
+
*/
|
|
1174
|
+
export type ViewportUIDock = "top" | "bottom" | "side";
|
|
1175
|
+
/**
|
|
1176
|
+
* Options for `getViewportOffsets` (and the `ui` key of
|
|
1177
|
+
* {@link ViewportOffsets}), controlling how offsets are derived from the
|
|
1178
|
+
* currently rendered editor UI.
|
|
1179
|
+
*
|
|
1180
|
+
* NOTE unlike the physical sides of {@link Offsets}, the horizontal values
|
|
1181
|
+
* here are logical, i.e. flipped in RTL layouts (`left` refers to the
|
|
1182
|
+
* reading-direction start side).
|
|
1183
|
+
*/
|
|
1184
|
+
export type ViewportOffsetsOptions = {
|
|
1185
|
+
/** padding added to each measured side (default 24) */
|
|
1186
|
+
padding?: number;
|
|
1187
|
+
paddingTop?: number;
|
|
1188
|
+
paddingRight?: number;
|
|
1189
|
+
paddingBottom?: number;
|
|
1190
|
+
paddingLeft?: number;
|
|
1191
|
+
/** final value for the given side, replacing the measured UI size
|
|
1192
|
+
* (padding is not added on top) */
|
|
1193
|
+
top?: number;
|
|
1194
|
+
bottom?: number;
|
|
1195
|
+
left?: number;
|
|
1196
|
+
right?: number;
|
|
1197
|
+
/**
|
|
1198
|
+
* Reserve space for the given conditionally-rendered surfaces even while
|
|
1199
|
+
* they're hidden, so the resulting offsets don't shift when they
|
|
1200
|
+
* (dis)appear. Uses the surface's last-measured footprint, falling back
|
|
1201
|
+
* to an approximate default if it hasn't been rendered yet. Ignored on
|
|
1202
|
+
* phones (where these surfaces never occlude the canvas).
|
|
1203
|
+
*/
|
|
1204
|
+
reserve?: {
|
|
1205
|
+
/** styles panel (rendered when a tool or selection is active) */
|
|
1206
|
+
stylesPanel?: boolean;
|
|
1207
|
+
/** sidebar (e.g. library) */
|
|
1208
|
+
sidebar?: boolean;
|
|
1209
|
+
};
|
|
1210
|
+
};
|
|
1211
|
+
/**
|
|
1212
|
+
* Viewport offsets accepted by the `setViewport`-family APIs (`setViewport`,
|
|
1213
|
+
* `props.initialState.viewport`), insetting the usable viewport area per
|
|
1214
|
+
* side so the target isn't fitted/centered underneath overlaid UI.
|
|
1215
|
+
*
|
|
1216
|
+
* Two (combinable) ways to specify:
|
|
1217
|
+
*
|
|
1218
|
+
* - **Static sides** (`top`/`right`/`bottom`/`left`) — absolute pixel
|
|
1219
|
+
* values, used as-is: physical (not flipped in RTL), zoom-independent,
|
|
1220
|
+
* no padding added. Sides not specified default to `0` (unless `ui` is
|
|
1221
|
+
* set, see below).
|
|
1222
|
+
*
|
|
1223
|
+
* - **`ui`** — derive the offsets from the editor UI (toolbar, styles
|
|
1224
|
+
* panel, sidebar...) as rendered at the time the viewport is set,
|
|
1225
|
+
* equivalent to calling `getViewportOffsets()`. Pass `true` for the
|
|
1226
|
+
* defaults, or options ({@link ViewportOffsetsOptions}) to customize
|
|
1227
|
+
* padding or reserve space for currently-hidden surfaces.
|
|
1228
|
+
*
|
|
1229
|
+
* When both are given, a static side always wins for that side — it
|
|
1230
|
+
* replaces whatever `ui` would yield (including `ui`'s own side overrides,
|
|
1231
|
+
* which — unlike the physical static sides — are RTL-relative). The
|
|
1232
|
+
* remaining sides fall back to the `ui`-derived values.
|
|
1233
|
+
*
|
|
1234
|
+
* @example
|
|
1235
|
+
* { top: 40 } // top 40px, other sides 0
|
|
1236
|
+
* { ui: true } // measured UI + default padding
|
|
1237
|
+
* { ui: { reserve: { stylesPanel: true } } } // + keep space for hidden panel
|
|
1238
|
+
* { top: 40, ui: true } // top exactly 40px, rest from UI
|
|
1239
|
+
*/
|
|
1240
|
+
export type ViewportOffsets = Offsets & {
|
|
1241
|
+
ui?: true | ViewportOffsetsOptions;
|
|
1242
|
+
};
|
|
1243
|
+
/**
|
|
1244
|
+
* Value of the `data-viewport-ui-name` attribute, identifying a
|
|
1245
|
+
* conditionally-rendered surface (marked with `data-viewport-ui`) so that
|
|
1246
|
+
* `getViewportOffsets` can reserve space for it while it's hidden (see the
|
|
1247
|
+
* `reserve` option). Whenever a named surface is rendered, its measured
|
|
1248
|
+
* footprint is remembered; reserving uses that remembered footprint, or an
|
|
1249
|
+
* approximate default if the surface hasn't been rendered yet.
|
|
1250
|
+
*/
|
|
1251
|
+
export type ViewportUIName = "sidebar" | "stylesPanel";
|