@myoc/element 0.19.518 → 0.19.520
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 +1768 -987
- package/dist/dev/index.js.map +4 -4
- package/dist/prod/index.js +15 -15
- package/dist/types/common/src/colors.d.ts +1 -1
- package/dist/types/common/src/constants.d.ts +8 -5
- package/dist/types/common/src/utils.d.ts +0 -42
- package/dist/types/element/src/bounds.d.ts +18 -1
- package/dist/types/element/src/comparisons.d.ts +1 -0
- package/dist/types/element/src/image.d.ts +5 -0
- package/dist/types/element/src/newElement.d.ts +2 -0
- package/dist/types/element/src/types.d.ts +8 -0
- package/dist/types/element/src/visualdebug.d.ts +1 -2
- package/dist/types/excalidraw/actions/actionBoundText.d.ts +6 -2
- package/dist/types/excalidraw/actions/actionCanvas.d.ts +33 -11
- package/dist/types/excalidraw/actions/actionClipboard.d.ts +6 -2
- package/dist/types/excalidraw/actions/actionCropEditor.d.ts +3 -1
- package/dist/types/excalidraw/actions/actionDeleteSelected.d.ts +9 -3
- package/dist/types/excalidraw/actions/actionDeselect.d.ts +3 -1
- package/dist/types/excalidraw/actions/actionElementLink.d.ts +3 -1
- package/dist/types/excalidraw/actions/actionElementLock.d.ts +6 -2
- package/dist/types/excalidraw/actions/actionEmbeddable.d.ts +3 -1
- package/dist/types/excalidraw/actions/actionExport.d.ts +6 -2
- package/dist/types/excalidraw/actions/actionFrame.d.ts +14 -4
- package/dist/types/excalidraw/actions/actionGroup.d.ts +6 -2
- package/dist/types/excalidraw/actions/actionLinearEditor.d.ts +5 -1
- package/dist/types/excalidraw/actions/actionLink.d.ts +3 -1
- package/dist/types/excalidraw/actions/actionMenu.d.ts +3 -1
- package/dist/types/excalidraw/actions/actionProperties.d.ts +18 -5
- package/dist/types/excalidraw/actions/actionSelectAll.d.ts +3 -1
- package/dist/types/excalidraw/actions/actionStyles.d.ts +3 -1
- package/dist/types/excalidraw/actions/actionToggleArrowBinding.d.ts +3 -1
- package/dist/types/excalidraw/actions/actionToggleGridMode.d.ts +3 -1
- package/dist/types/excalidraw/actions/actionToggleMidpointSnapping.d.ts +3 -1
- package/dist/types/excalidraw/actions/actionToggleObjectsSnapMode.d.ts +3 -1
- package/dist/types/excalidraw/actions/actionToggleSearchMenu.d.ts +3 -1
- package/dist/types/excalidraw/actions/actionToggleStats.d.ts +3 -1
- package/dist/types/excalidraw/actions/actionToggleViewMode.d.ts +5 -3
- package/dist/types/excalidraw/actions/actionToggleZenMode.d.ts +3 -1
- package/dist/types/excalidraw/actions/index.d.ts +1 -1
- package/dist/types/excalidraw/actions/types.d.ts +1 -1
- package/dist/types/excalidraw/appState.d.ts +2 -1
- package/dist/types/excalidraw/components/App.d.ts +13 -28
- package/dist/types/excalidraw/components/ColorPicker/colorPickerUtils.d.ts +1 -1
- package/dist/types/excalidraw/components/ConvertElementTypePopup.d.ts +1 -1
- package/dist/types/excalidraw/components/EyeDropper.d.ts +1 -1
- package/dist/types/excalidraw/components/OverwriteConfirm/OverwriteConfirmState.d.ts +1 -1
- package/dist/types/excalidraw/components/SearchMenu.d.ts +1 -1
- package/dist/types/excalidraw/components/Sidebar/Sidebar.d.ts +1 -1
- package/dist/types/excalidraw/components/canvases/StaticCanvas.d.ts +2 -1
- package/dist/types/excalidraw/components/icons.d.ts +2 -0
- package/dist/types/excalidraw/components/main-menu/DefaultItems.d.ts +7 -4
- package/dist/types/excalidraw/data/blob.d.ts +3 -1
- package/dist/types/excalidraw/data/json.d.ts +3 -1
- package/dist/types/excalidraw/renderer/animation.d.ts +1 -0
- package/dist/types/excalidraw/scene/Renderer.d.ts +2 -0
- package/dist/types/excalidraw/scene/index.d.ts +1 -1
- package/dist/types/excalidraw/scene/types.d.ts +1 -0
- package/dist/types/excalidraw/scroll.d.ts +46 -0
- package/dist/types/excalidraw/types.d.ts +24 -3
- package/dist/types/laser-pointer/src/index.d.ts +2 -0
- package/dist/types/laser-pointer/src/math.d.ts +16 -0
- package/dist/types/laser-pointer/src/simplify.d.ts +2 -0
- package/dist/types/laser-pointer/src/state.d.ts +35 -0
- package/dist/types/utils/src/index.d.ts +1 -2
- package/package.json +5 -4
- package/dist/types/utils/src/bbox.d.ts +0 -9
- package/dist/types/utils/src/withinBounds.d.ts +0 -19
|
@@ -2,13 +2,14 @@ import React from "react";
|
|
|
2
2
|
import { AppEventBus, type EXPORT_IMAGE_TYPES, Emitter, type EditorInterface, type StylesPanelMode } from "@excalidraw/common";
|
|
3
3
|
import { FlowChartCreator, Scene, Store, type ElementUpdate, StoreDelta, type ApplyToOptions } from "@excalidraw/element";
|
|
4
4
|
import { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
|
|
5
|
-
import type { ExcalidrawElement, NonDeleted, NonDeletedExcalidrawElement, ExcalidrawFrameLikeElement, ExcalidrawIframeElement, ExcalidrawEmbeddableElement, Ordered, SceneElementsMap } from "@excalidraw/element/types";
|
|
5
|
+
import type { ExcalidrawElement, NonDeleted, FileId, NonDeletedExcalidrawElement, ExcalidrawFrameLikeElement, ExcalidrawIframeElement, ExcalidrawEmbeddableElement, Ordered, SceneElementsMap } from "@excalidraw/element/types";
|
|
6
6
|
import type { Mutable } from "@excalidraw/common/utility-types";
|
|
7
7
|
import { ActionManager } from "../actions/manager";
|
|
8
8
|
import { History } from "../history";
|
|
9
9
|
import { Fonts } from "../fonts";
|
|
10
10
|
import { type WritableAtom } from "../editor-jotai";
|
|
11
11
|
import { Renderer } from "../scene/Renderer";
|
|
12
|
+
import { type ScrollToContentOptions } from "../scroll";
|
|
12
13
|
import { LaserTrails } from "../laserTrails";
|
|
13
14
|
import { isOverScrollBars } from "../scene/scrollbars";
|
|
14
15
|
import { LassoTrail } from "../lasso";
|
|
@@ -88,6 +89,10 @@ declare class App extends React.Component<AppProps, AppState> {
|
|
|
88
89
|
};
|
|
89
90
|
files: BinaryFiles;
|
|
90
91
|
imageCache: AppClassProperties["imageCache"];
|
|
92
|
+
imageLoadingProgress: Map<FileId, number>;
|
|
93
|
+
imageLoadingProgressEmitter: Emitter<[]>;
|
|
94
|
+
imagePlaceholderUpdateEmitter: Emitter<[]>;
|
|
95
|
+
private imageTransitionPlaceholders;
|
|
91
96
|
private iFrameRefs;
|
|
92
97
|
/**
|
|
93
98
|
* Indicates whether the embeddable's url has been validated for rendering.
|
|
@@ -387,33 +392,7 @@ declare class App extends React.Component<AppProps, AppState> {
|
|
|
387
392
|
animate?: boolean;
|
|
388
393
|
duration?: number;
|
|
389
394
|
}) => void;
|
|
390
|
-
scrollToContent: (
|
|
391
|
-
/**
|
|
392
|
-
* target to scroll to
|
|
393
|
-
*
|
|
394
|
-
* - string - id of element or group, or url containing elementLink
|
|
395
|
-
* - ExcalidrawElement | ExcalidrawElement[] - element(s) objects
|
|
396
|
-
*/
|
|
397
|
-
target?: string | ExcalidrawElement | readonly ExcalidrawElement[], opts?: ({
|
|
398
|
-
fitToContent?: boolean;
|
|
399
|
-
fitToViewport?: never;
|
|
400
|
-
viewportZoomFactor?: number;
|
|
401
|
-
animate?: boolean;
|
|
402
|
-
duration?: number;
|
|
403
|
-
} | {
|
|
404
|
-
fitToContent?: never;
|
|
405
|
-
fitToViewport?: boolean;
|
|
406
|
-
/** when fitToViewport=true, how much screen should the content cover,
|
|
407
|
-
* between 0.1 (10%) and 1 (100%)
|
|
408
|
-
*/
|
|
409
|
-
viewportZoomFactor?: number;
|
|
410
|
-
animate?: boolean;
|
|
411
|
-
duration?: number;
|
|
412
|
-
}) & {
|
|
413
|
-
minZoom?: number;
|
|
414
|
-
maxZoom?: number;
|
|
415
|
-
canvasOffsets?: Offsets;
|
|
416
|
-
}) => void;
|
|
395
|
+
scrollToContent: (target?: string | ExcalidrawElement | readonly NonDeletedExcalidrawElement[], opts?: ScrollToContentOptions) => void;
|
|
417
396
|
private maybeUnfollowRemoteUser;
|
|
418
397
|
/** use when changing scrollX/scrollY/zoom based on user interaction */
|
|
419
398
|
private translateCanvas;
|
|
@@ -425,6 +404,10 @@ declare class App extends React.Component<AppProps, AppState> {
|
|
|
425
404
|
* NOTE if file already exists in editor state, the file data is not updated
|
|
426
405
|
* */
|
|
427
406
|
addFiles: ExcalidrawImperativeAPI["addFiles"];
|
|
407
|
+
addImagePlaceholder: ExcalidrawImperativeAPI["addImagePlaceholder"];
|
|
408
|
+
setImageLoadingProgress: ExcalidrawImperativeAPI["setImageLoadingProgress"];
|
|
409
|
+
private clearImageLoadingProgress;
|
|
410
|
+
private clearImageShapeCacheForFileId;
|
|
428
411
|
private addMissingFiles;
|
|
429
412
|
updateScene: <K extends keyof AppState>(sceneData: {
|
|
430
413
|
elements?: SceneData["elements"];
|
|
@@ -502,6 +485,7 @@ declare class App extends React.Component<AppProps, AppState> {
|
|
|
502
485
|
private handleCanvasClick;
|
|
503
486
|
private getElementLinkAtPosition;
|
|
504
487
|
private handleElementLinkClick;
|
|
488
|
+
private openElementLink;
|
|
505
489
|
/**
|
|
506
490
|
* finds candidate frame under cursor (when dragging frame children/elements
|
|
507
491
|
* inside frames)
|
|
@@ -554,6 +538,7 @@ declare class App extends React.Component<AppProps, AppState> {
|
|
|
554
538
|
private newImagePlaceholder;
|
|
555
539
|
private handleLinearElementOnPointerDown;
|
|
556
540
|
private getCurrentItemRoundness;
|
|
541
|
+
private getCurrentItemStrokeWidth;
|
|
557
542
|
private createGenericElementOnPointerDown;
|
|
558
543
|
private createFrameElementOnPointerDown;
|
|
559
544
|
private maybeCacheReferenceSnapPoints;
|
|
@@ -14,7 +14,7 @@ export declare const isCustomColor: ({ color, palette, }: {
|
|
|
14
14
|
}) => boolean;
|
|
15
15
|
export declare const getMostUsedCustomColors: (elements: readonly ExcalidrawElement[], type: "elementBackground" | "elementStroke", palette: ColorPaletteCustom) => string[];
|
|
16
16
|
export type ActiveColorPickerSectionAtomType = "custom" | "baseColors" | "shades" | "hex" | null;
|
|
17
|
-
export declare const activeColorPickerSectionAtom: import("jotai
|
|
17
|
+
export declare const activeColorPickerSectionAtom: import("jotai").PrimitiveAtom<ActiveColorPickerSectionAtomType> & {
|
|
18
18
|
init: ActiveColorPickerSectionAtomType;
|
|
19
19
|
};
|
|
20
20
|
export type ColorPickerType = "canvasBackground" | "elementBackground" | "elementStroke";
|
|
@@ -2,7 +2,7 @@ import type { ConvertibleTypes, ExcalidrawElement, ExcalidrawTextContainer, Exca
|
|
|
2
2
|
import type { Scene } from "@excalidraw/element";
|
|
3
3
|
import "./ConvertElementTypePopup.scss";
|
|
4
4
|
import type App from "./App";
|
|
5
|
-
export declare const convertElementTypePopupAtom: import("jotai
|
|
5
|
+
export declare const convertElementTypePopupAtom: import("jotai").PrimitiveAtom<{
|
|
6
6
|
type: "panel";
|
|
7
7
|
} | null> & {
|
|
8
8
|
init: {
|
|
@@ -13,7 +13,7 @@ export type EyeDropperProperties = {
|
|
|
13
13
|
**/
|
|
14
14
|
colorPickerType: ColorPickerType;
|
|
15
15
|
};
|
|
16
|
-
export declare const activeEyeDropperAtom: import("jotai
|
|
16
|
+
export declare const activeEyeDropperAtom: import("jotai").PrimitiveAtom<EyeDropperProperties | null> & {
|
|
17
17
|
init: EyeDropperProperties | null;
|
|
18
18
|
};
|
|
19
19
|
export declare const EyeDropper: React.FC<{
|
|
@@ -11,7 +11,7 @@ export type OverwriteConfirmState = {
|
|
|
11
11
|
} | {
|
|
12
12
|
active: false;
|
|
13
13
|
};
|
|
14
|
-
export declare const overwriteConfirmStateAtom: import("jotai
|
|
14
|
+
export declare const overwriteConfirmStateAtom: import("jotai").PrimitiveAtom<OverwriteConfirmState> & {
|
|
15
15
|
init: OverwriteConfirmState;
|
|
16
16
|
};
|
|
17
17
|
export declare function openConfirmModal({ title, description, actionLabel, color, }: {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import "./SearchMenu.scss";
|
|
2
|
-
export declare const searchItemInFocusAtom: import("jotai
|
|
2
|
+
export declare const searchItemInFocusAtom: import("jotai").PrimitiveAtom<number | null> & {
|
|
3
3
|
init: number | null;
|
|
4
4
|
};
|
|
5
5
|
export declare const SearchMenu: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -8,7 +8,7 @@ import "./Sidebar.scss";
|
|
|
8
8
|
*
|
|
9
9
|
* Since we can only render one Sidebar at a time, we can use a simple flag.
|
|
10
10
|
*/
|
|
11
|
-
export declare const isSidebarDockedAtom: import("jotai
|
|
11
|
+
export declare const isSidebarDockedAtom: import("jotai").PrimitiveAtom<boolean> & {
|
|
12
12
|
init: boolean;
|
|
13
13
|
};
|
|
14
14
|
export declare const SidebarInner: React.ForwardRefExoticComponent<Omit<{
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import type { NonDeletedExcalidrawElement, NonDeletedSceneElementsMap } from "@excalidraw/element/types";
|
|
3
3
|
import type { RenderableElementsMap, StaticCanvasRenderConfig } from "../../scene/types";
|
|
4
|
-
import type { StaticCanvasAppState } from "../../types";
|
|
4
|
+
import type { AppClassProperties, StaticCanvasAppState } from "../../types";
|
|
5
5
|
import type { RoughCanvas } from "roughjs/bin/canvas";
|
|
6
6
|
type StaticCanvasProps = {
|
|
7
|
+
app: AppClassProperties;
|
|
7
8
|
canvas: HTMLCanvasElement;
|
|
8
9
|
rc: RoughCanvas;
|
|
9
10
|
elementsMap: RenderableElementsMap;
|
|
@@ -113,6 +113,8 @@ export declare const StrokeStyleDottedIcon: import("react/jsx-runtime").JSX.Elem
|
|
|
113
113
|
export declare const SloppinessArchitectIcon: import("react/jsx-runtime").JSX.Element;
|
|
114
114
|
export declare const SloppinessArtistIcon: import("react/jsx-runtime").JSX.Element;
|
|
115
115
|
export declare const SloppinessCartoonistIcon: import("react/jsx-runtime").JSX.Element;
|
|
116
|
+
export declare const strokeVariabilityConstantIcon: import("react/jsx-runtime").JSX.Element;
|
|
117
|
+
export declare const strokeVariabilityVariableIcon: import("react/jsx-runtime").JSX.Element;
|
|
116
118
|
export declare const EdgeSharpIcon: import("react/jsx-runtime").JSX.Element;
|
|
117
119
|
export declare const EdgeRoundIcon: import("react/jsx-runtime").JSX.Element;
|
|
118
120
|
export declare const ArrowheadNoneIcon: React.MemoExoticComponent<({ flip }: {
|
|
@@ -25,11 +25,14 @@ export declare const Help: {
|
|
|
25
25
|
export declare const ToggleTheme: {
|
|
26
26
|
(props: {
|
|
27
27
|
allowSystemTheme: true;
|
|
28
|
+
/**
|
|
29
|
+
* Controls the theme of this UI component only.
|
|
30
|
+
* You should subscribe to `props.onThemeChange` and control the theme
|
|
31
|
+
* upstream.
|
|
32
|
+
*/
|
|
28
33
|
theme: Theme | "system";
|
|
29
|
-
onSelect: (theme: Theme | "system") => void;
|
|
30
34
|
} | {
|
|
31
|
-
allowSystemTheme
|
|
32
|
-
onSelect?: (theme: Theme) => void;
|
|
35
|
+
allowSystemTheme: false;
|
|
33
36
|
}): import("react/jsx-runtime").JSX.Element | null;
|
|
34
37
|
displayName: string;
|
|
35
38
|
};
|
|
@@ -66,7 +69,7 @@ export declare const Preferences: {
|
|
|
66
69
|
ToggleMidpointSnapping: () => import("react/jsx-runtime").JSX.Element;
|
|
67
70
|
ToggleGridMode: () => import("react/jsx-runtime").JSX.Element;
|
|
68
71
|
ToggleZenMode: () => import("react/jsx-runtime").JSX.Element;
|
|
69
|
-
ToggleViewMode: () => import("react/jsx-runtime").JSX.Element;
|
|
72
|
+
ToggleViewMode: () => import("react/jsx-runtime").JSX.Element | null;
|
|
70
73
|
ToggleElementProperties: () => import("react/jsx-runtime").JSX.Element;
|
|
71
74
|
displayName: string;
|
|
72
75
|
};
|
|
@@ -90,6 +90,7 @@ fileHandle?: FileSystemFileHandle | null) => Promise<{
|
|
|
90
90
|
currentItemArrowType: "sharp" | "round" | "elbow";
|
|
91
91
|
bindMode: import("@excalidraw/element/types").BindMode;
|
|
92
92
|
gridSize: number;
|
|
93
|
+
viewModeOnly: boolean;
|
|
93
94
|
gridModeEnabled: boolean;
|
|
94
95
|
objectsSnapModeEnabled: boolean;
|
|
95
96
|
wheelZoomsOnDefault?: boolean | undefined;
|
|
@@ -131,9 +132,10 @@ fileHandle?: FileSystemFileHandle | null) => Promise<{
|
|
|
131
132
|
currentItemStrokeColor: string;
|
|
132
133
|
currentItemBackgroundColor: string;
|
|
133
134
|
currentItemFillStyle: ExcalidrawElement["fillStyle"];
|
|
134
|
-
|
|
135
|
+
currentItemStrokeWidthKey: import("@excalidraw/common").StrokeWidthKey;
|
|
135
136
|
currentItemStrokeStyle: ExcalidrawElement["strokeStyle"];
|
|
136
137
|
currentItemRoughness: number;
|
|
138
|
+
currentItemStrokeVariability: import("@excalidraw/element/types").StrokeVariability;
|
|
137
139
|
currentItemOpacity: number;
|
|
138
140
|
currentItemFontFamily: import("@excalidraw/element/types").FontFamilyValues;
|
|
139
141
|
currentItemFontSize: number;
|
|
@@ -91,6 +91,7 @@ export declare const loadFromJSON: (localAppState: AppState, localElements: read
|
|
|
91
91
|
currentItemArrowType: "sharp" | "round" | "elbow";
|
|
92
92
|
bindMode: import("@excalidraw/element/types").BindMode;
|
|
93
93
|
gridSize: number;
|
|
94
|
+
viewModeOnly: boolean;
|
|
94
95
|
gridModeEnabled: boolean;
|
|
95
96
|
objectsSnapModeEnabled: boolean;
|
|
96
97
|
wheelZoomsOnDefault?: boolean | undefined;
|
|
@@ -132,9 +133,10 @@ export declare const loadFromJSON: (localAppState: AppState, localElements: read
|
|
|
132
133
|
currentItemStrokeColor: string;
|
|
133
134
|
currentItemBackgroundColor: string;
|
|
134
135
|
currentItemFillStyle: ExcalidrawElement["fillStyle"];
|
|
135
|
-
|
|
136
|
+
currentItemStrokeWidthKey: import("@excalidraw/common").StrokeWidthKey;
|
|
136
137
|
currentItemStrokeStyle: ExcalidrawElement["strokeStyle"];
|
|
137
138
|
currentItemRoughness: number;
|
|
139
|
+
currentItemStrokeVariability: import("@excalidraw/element/types").StrokeVariability;
|
|
138
140
|
currentItemOpacity: number;
|
|
139
141
|
currentItemFontFamily: import("@excalidraw/element/types").FontFamilyValues;
|
|
140
142
|
currentItemFontSize: number;
|
|
@@ -272,6 +272,7 @@ export declare class Renderer {
|
|
|
272
272
|
type: "image";
|
|
273
273
|
fileId: import("@excalidraw/element/types").FileId | null;
|
|
274
274
|
fileName: string | null;
|
|
275
|
+
thumbHash: string | null;
|
|
275
276
|
status: "pending" | "saved" | "error";
|
|
276
277
|
scale: [number, number];
|
|
277
278
|
crop: import("@excalidraw/element/types").ImageCrop | null;
|
|
@@ -427,6 +428,7 @@ export declare class Renderer {
|
|
|
427
428
|
points: readonly import("@excalidraw/math").LocalPoint[];
|
|
428
429
|
pressures: readonly number[];
|
|
429
430
|
simulatePressure: boolean;
|
|
431
|
+
strokeOptions: import("@excalidraw/element/types").StrokeOptions;
|
|
430
432
|
}> & {
|
|
431
433
|
isDeleted: boolean;
|
|
432
434
|
}) | null;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { isSomeElementSelected, getElementsWithinSelection, getSelectedElements, getTargetElements, } from "@excalidraw/element";
|
|
2
2
|
export { calculateScrollCenter } from "./scroll";
|
|
3
|
-
export { hasBackground, hasStrokeWidth, hasStrokeStyle, canHaveArrowheads, canChangeRoundness, } from "@excalidraw/element";
|
|
3
|
+
export { hasBackground, hasStrokeWidth, hasStrokeStyle, hasFreedrawMode, canHaveArrowheads, canChangeRoundness, } from "@excalidraw/element";
|
|
4
4
|
export { getNormalizedZoom, getNormalizedGridSize, getNormalizedGridStep, } from "./normalize";
|
|
@@ -8,6 +8,7 @@ export type RenderableElementsMap = NonDeletedElementsMap & MakeBrand<"Renderabl
|
|
|
8
8
|
export type StaticCanvasRenderConfig = {
|
|
9
9
|
canvasBackgroundColor: AppState["viewBackgroundColor"];
|
|
10
10
|
imageCache: AppClassProperties["imageCache"];
|
|
11
|
+
imageTransitionDuration?: number;
|
|
11
12
|
renderGrid: boolean;
|
|
12
13
|
/** when exporting the behavior is slightly different (e.g. we can't use
|
|
13
14
|
CSS filters), and we disable render optimizations for best output */
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import type { ExcalidrawElement } from "@excalidraw/element/types";
|
|
2
|
+
import type { AppState, Offsets } from "./types";
|
|
3
|
+
export declare const SCROLL_TO_CONTENT_ANIMATION_KEY = "animateScrollToContent";
|
|
4
|
+
export type ScrollToContentOptions = ({
|
|
5
|
+
fitToContent?: boolean;
|
|
6
|
+
fitToViewport?: never;
|
|
7
|
+
viewportZoomFactor?: number;
|
|
8
|
+
animate?: boolean;
|
|
9
|
+
duration?: number;
|
|
10
|
+
} | {
|
|
11
|
+
fitToContent?: never;
|
|
12
|
+
fitToViewport?: boolean;
|
|
13
|
+
/** when fitToViewport=true, how much screen should the content cover,
|
|
14
|
+
* between 0.1 (10%) and 1 (100%) */
|
|
15
|
+
viewportZoomFactor?: number;
|
|
16
|
+
animate?: boolean;
|
|
17
|
+
duration?: number;
|
|
18
|
+
}) & {
|
|
19
|
+
minZoom?: number;
|
|
20
|
+
maxZoom?: number;
|
|
21
|
+
canvasOffsets?: Offsets;
|
|
22
|
+
};
|
|
23
|
+
type Viewport = Pick<AppState, "scrollX" | "scrollY" | "zoom">;
|
|
24
|
+
/**
|
|
25
|
+
* Scrolls (and optionally zooms) the viewport so that the given target is in
|
|
26
|
+
* view, optionally animating the transition.
|
|
27
|
+
*/
|
|
28
|
+
export declare const scrollToElements: (state: AppState, target: readonly ExcalidrawElement[], onFrame: (state: Pick<AppState, "scrollX" | "scrollY" | "zoom" | "shouldCacheIgnoreZoom">) => void, opts?: ScrollToContentOptions) => void;
|
|
29
|
+
/**
|
|
30
|
+
* Interpolates the viewport from `from` to `target` at the (already-eased)
|
|
31
|
+
* blend amount `factor` (0 = `from`, 1 = `target`).
|
|
32
|
+
*
|
|
33
|
+
* Zoom is interpolated geometrically (so it feels uniform), and rather than
|
|
34
|
+
* tweening scrollX/scrollY directly we tween the *focal point* — the scene
|
|
35
|
+
* point under the viewport center — and derive scroll from it. Mixing a linear
|
|
36
|
+
* scroll with a geometric zoom makes the focal point swoop sideways
|
|
37
|
+
* mid-animation (most visible when zooming out); gliding the focal point keeps
|
|
38
|
+
* it steady. `width/2/zoom - scroll` is the inverse of `centerScrollOn` without
|
|
39
|
+
* offsets, so factor 0/1 land exactly on `from`/`target`.
|
|
40
|
+
*/
|
|
41
|
+
export declare const interpolateViewport: ({ from, target, factor, }: {
|
|
42
|
+
from: Pick<AppState, "scrollX" | "scrollY" | "zoom" | "width" | "height">;
|
|
43
|
+
target: Viewport;
|
|
44
|
+
factor: number;
|
|
45
|
+
}) => Viewport;
|
|
46
|
+
export {};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import type { IMAGE_MIME_TYPES, UserIdleState, throttleRAF, MIME_TYPES, ColorTuple, EditorInterface } from "@excalidraw/common";
|
|
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 } from "@excalidraw/element/types";
|
|
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";
|
|
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";
|
|
@@ -64,6 +64,8 @@ export type BinaryFileData = {
|
|
|
64
64
|
id: FileId;
|
|
65
65
|
fileName: string;
|
|
66
66
|
dataURL: DataURL;
|
|
67
|
+
/** compact image placeholder, also stored on the corresponding image element */
|
|
68
|
+
thumbHash?: string;
|
|
67
69
|
/**
|
|
68
70
|
* Epoch timestamp in milliseconds
|
|
69
71
|
*/
|
|
@@ -294,9 +296,10 @@ export interface AppState {
|
|
|
294
296
|
currentItemStrokeColor: string;
|
|
295
297
|
currentItemBackgroundColor: string;
|
|
296
298
|
currentItemFillStyle: ExcalidrawElement["fillStyle"];
|
|
297
|
-
|
|
299
|
+
currentItemStrokeWidthKey: StrokeWidthKey;
|
|
298
300
|
currentItemStrokeStyle: ExcalidrawElement["strokeStyle"];
|
|
299
301
|
currentItemRoughness: number;
|
|
302
|
+
currentItemStrokeVariability: StrokeVariability;
|
|
300
303
|
currentItemOpacity: number;
|
|
301
304
|
currentItemFontFamily: FontFamilyValues;
|
|
302
305
|
currentItemFontSize: number;
|
|
@@ -365,6 +368,7 @@ export interface AppState {
|
|
|
365
368
|
gridStep: number;
|
|
366
369
|
gridModeEnabled: boolean;
|
|
367
370
|
viewModeEnabled: boolean;
|
|
371
|
+
viewModeOnly: boolean;
|
|
368
372
|
/** top-most selected groups (i.e. does not include nested groups) */
|
|
369
373
|
selectedGroupIds: {
|
|
370
374
|
[groupId: string]: boolean;
|
|
@@ -464,6 +468,7 @@ export type CompressImageFileOpts = {
|
|
|
464
468
|
export type CompressImageFile = (file: File, opts: CompressImageFileOpts) => Promise<File>;
|
|
465
469
|
export interface ExcalidrawProps {
|
|
466
470
|
onChange?: (elements: readonly OrderedExcalidrawElement[], appState: AppState, files: BinaryFiles) => void;
|
|
471
|
+
onThemeChange?: (theme: Theme | "system") => void;
|
|
467
472
|
/**
|
|
468
473
|
* note: only subscribes if the props.onIncrement is defined on initial render
|
|
469
474
|
*/
|
|
@@ -514,6 +519,7 @@ export interface ExcalidrawProps {
|
|
|
514
519
|
renderTopRightUI?: (isMobile: boolean, appState: UIAppState) => JSX.Element | null;
|
|
515
520
|
langCode?: Language["code"];
|
|
516
521
|
viewModeEnabled?: boolean;
|
|
522
|
+
viewModeOnly?: boolean;
|
|
517
523
|
zenModeEnabled?: boolean;
|
|
518
524
|
gridModeEnabled?: boolean;
|
|
519
525
|
objectsSnapModeEnabled?: boolean;
|
|
@@ -587,12 +593,19 @@ export type ExportOpts = {
|
|
|
587
593
|
export type ImageOptions = Partial<{
|
|
588
594
|
maxWidthOrHeight: number;
|
|
589
595
|
maxFileSizeBytes: number;
|
|
596
|
+
/** duration of the placeholder-to-full-image crossfade in milliseconds */
|
|
597
|
+
placeholderTransitionDuration: number;
|
|
590
598
|
}>;
|
|
591
599
|
export type CanvasActions = Partial<{
|
|
592
600
|
changeViewBackgroundColor: boolean;
|
|
593
601
|
export: false | ExportOpts;
|
|
594
602
|
loadScene: boolean;
|
|
595
603
|
saveToActiveFile: boolean;
|
|
604
|
+
/**
|
|
605
|
+
* defaults to true if `props.theme` is omitted or `props.onThemeChange`
|
|
606
|
+
* is supplied (at which point the theme is considered as host-app controlled),
|
|
607
|
+
* else default to false
|
|
608
|
+
* */
|
|
596
609
|
toggleTheme: boolean | null;
|
|
597
610
|
saveAsImage: boolean;
|
|
598
611
|
}>;
|
|
@@ -637,7 +650,13 @@ export type AppClassProperties = {
|
|
|
637
650
|
imageCache: Map<FileId, {
|
|
638
651
|
image: HTMLImageElement | Promise<HTMLImageElement>;
|
|
639
652
|
mimeType: ValueOf<typeof IMAGE_MIME_TYPES>;
|
|
653
|
+
isPlaceholder?: boolean;
|
|
654
|
+
placeholderImage?: HTMLImageElement;
|
|
655
|
+
transitionStart?: number;
|
|
640
656
|
}>;
|
|
657
|
+
imageLoadingProgress: App["imageLoadingProgress"];
|
|
658
|
+
imageLoadingProgressEmitter: App["imageLoadingProgressEmitter"];
|
|
659
|
+
imagePlaceholderUpdateEmitter: App["imagePlaceholderUpdateEmitter"];
|
|
641
660
|
files: BinaryFiles;
|
|
642
661
|
editorInterface: App["editorInterface"];
|
|
643
662
|
scene: App["scene"];
|
|
@@ -766,6 +785,8 @@ export interface ExcalidrawImperativeAPI {
|
|
|
766
785
|
refresh: InstanceType<typeof App>["refresh"];
|
|
767
786
|
setToast: InstanceType<typeof App>["setToast"];
|
|
768
787
|
addFiles: (data: BinaryFileData[]) => void;
|
|
788
|
+
addImagePlaceholder: (fileId: FileId, file: File) => Promise<void>;
|
|
789
|
+
setImageLoadingProgress: (fileId: FileId, progress: number | null) => void;
|
|
769
790
|
addImageElementsToScene: (imageFiles: {
|
|
770
791
|
file: File;
|
|
771
792
|
customData: Record<string, any>;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export type Point = [x: number, y: number, r: number];
|
|
2
|
+
export declare function add([ax, ay, ar]: Point, [bx, by, br]: Point): Point;
|
|
3
|
+
export declare function sub([ax, ay, ar]: Point, [bx, by, br]: Point): Point;
|
|
4
|
+
export declare function smul([x, y, r]: Point, s: number): Point;
|
|
5
|
+
export declare function norm([x, y, r]: Point): Point;
|
|
6
|
+
export declare function rot([x, y, r]: Point, rad: number): Point;
|
|
7
|
+
export declare function plerp(a: Point, b: Point, t: number): Point;
|
|
8
|
+
export declare function lerp(a: number, b: number, t: number): number;
|
|
9
|
+
export declare function angle(p: Point, p1: Point, p2: Point): number;
|
|
10
|
+
export declare function normAngle(a: number): number;
|
|
11
|
+
export declare function mag([x, y]: Point): number;
|
|
12
|
+
export declare function dist([ax, ay]: Point, [bx, by]: Point): number;
|
|
13
|
+
export declare function getCircleAndPerpendicularLineIntersectionsAtPoint(point: Point, direction: Point, radius: number): [Point, Point];
|
|
14
|
+
export declare function runLength(ps: Point[]): number;
|
|
15
|
+
export declare const clamp: (v: number, min: number, max: number) => number;
|
|
16
|
+
export declare function distancePointToSegment(p3: Point, p1: Point, p2: Point): number;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import type { Point } from "./math";
|
|
2
|
+
export type SizeMappingDetails = {
|
|
3
|
+
pressure: number;
|
|
4
|
+
runningLength: number;
|
|
5
|
+
currentIndex: number;
|
|
6
|
+
totalLength: number;
|
|
7
|
+
};
|
|
8
|
+
export type LaserPointerOptions = {
|
|
9
|
+
size: number;
|
|
10
|
+
streamline: number;
|
|
11
|
+
simplify: number;
|
|
12
|
+
simplifyPhase: "tail" | "output" | "input";
|
|
13
|
+
keepHead: boolean;
|
|
14
|
+
sizeMapping: (details: SizeMappingDetails) => number;
|
|
15
|
+
};
|
|
16
|
+
export declare class LaserPointer {
|
|
17
|
+
static defaults: LaserPointerOptions;
|
|
18
|
+
static constants: {
|
|
19
|
+
cornerDetectionMaxAngle: number;
|
|
20
|
+
cornerDetectionVariance: (s: number) => 1 | 0.5;
|
|
21
|
+
maxTailLength: number;
|
|
22
|
+
};
|
|
23
|
+
options: LaserPointerOptions;
|
|
24
|
+
constructor(options: Partial<LaserPointerOptions>);
|
|
25
|
+
originalPoints: Point[];
|
|
26
|
+
private stablePoints;
|
|
27
|
+
private tailPoints;
|
|
28
|
+
private isFresh;
|
|
29
|
+
private get lastPoint();
|
|
30
|
+
addPoint(point: Point): void;
|
|
31
|
+
close(): void;
|
|
32
|
+
stabilizeTail(): void;
|
|
33
|
+
private getSize;
|
|
34
|
+
getStrokeOutline(sizeOverride?: number | undefined): Point[];
|
|
35
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@myoc/element",
|
|
3
|
-
"version": "0.19.
|
|
3
|
+
"version": "0.19.520",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"types": "./dist/types/element/src/index.d.ts",
|
|
6
6
|
"main": "./dist/prod/index.js",
|
|
@@ -64,8 +64,9 @@
|
|
|
64
64
|
"build:esm": "rimraf dist && node ../../scripts/buildBase.js && yarn gen:types"
|
|
65
65
|
},
|
|
66
66
|
"dependencies": {
|
|
67
|
-
"@excalidraw/common": "npm:@myoc/common@0.19.
|
|
68
|
-
"@excalidraw/fractional-indexing": "npm:@myoc/fractional-indexing@0.19.
|
|
69
|
-
"@excalidraw/math": "npm:@myoc/math@0.19.
|
|
67
|
+
"@excalidraw/common": "npm:@myoc/common@0.19.520",
|
|
68
|
+
"@excalidraw/fractional-indexing": "npm:@myoc/fractional-indexing@0.19.520",
|
|
69
|
+
"@excalidraw/math": "npm:@myoc/math@0.19.520",
|
|
70
|
+
"thumbhash": "0.1.1"
|
|
70
71
|
}
|
|
71
72
|
}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { type GlobalPoint, type LocalPoint } from "@excalidraw/math";
|
|
2
|
-
import type { Bounds } from "@excalidraw/common";
|
|
3
|
-
export type LineSegment<P extends LocalPoint | GlobalPoint> = [P, P];
|
|
4
|
-
export declare function getBBox<P extends LocalPoint | GlobalPoint>(line: LineSegment<P>): Bounds;
|
|
5
|
-
export declare function doBBoxesIntersect(a: Bounds, b: Bounds): boolean;
|
|
6
|
-
export declare function isPointOnLine<P extends GlobalPoint | LocalPoint>(l: LineSegment<P>, p: P): boolean;
|
|
7
|
-
export declare function isPointRightOfLine<P extends GlobalPoint | LocalPoint>(l: LineSegment<P>, p: P): boolean;
|
|
8
|
-
export declare function isLineSegmentTouchingOrCrossingLine<P extends GlobalPoint | LocalPoint>(a: LineSegment<P>, b: LineSegment<P>): boolean;
|
|
9
|
-
export declare function doLineSegmentsIntersect<P extends GlobalPoint | LocalPoint>(a: LineSegment<P>, b: LineSegment<P>): boolean;
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { type Bounds } from "@excalidraw/common";
|
|
2
|
-
import type { ExcalidrawElement, NonDeletedExcalidrawElement } from "@excalidraw/element/types";
|
|
3
|
-
type Element = NonDeletedExcalidrawElement;
|
|
4
|
-
type Elements = readonly NonDeletedExcalidrawElement[];
|
|
5
|
-
export declare const isElementInsideBBox: (element: Element, bbox: Bounds, eitherDirection?: boolean) => boolean;
|
|
6
|
-
export declare const elementPartiallyOverlapsWithOrContainsBBox: (element: Element, bbox: Bounds) => boolean;
|
|
7
|
-
export declare const elementsOverlappingBBox: ({ elements, bounds, type, errorMargin, }: {
|
|
8
|
-
elements: Elements;
|
|
9
|
-
bounds: Bounds | ExcalidrawElement;
|
|
10
|
-
/** safety offset. Defaults to 0. */
|
|
11
|
-
errorMargin?: number;
|
|
12
|
-
/**
|
|
13
|
-
* - overlap: elements overlapping or inside bounds
|
|
14
|
-
* - contain: elements inside bounds or bounds inside elements
|
|
15
|
-
* - inside: elements inside bounds
|
|
16
|
-
**/
|
|
17
|
-
type: "overlap" | "contain" | "inside";
|
|
18
|
-
}) => NonDeletedExcalidrawElement[];
|
|
19
|
-
export {};
|