@nous-excalidraw/math 0.18.2 → 0.18.4-beta.1

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.
Files changed (37) hide show
  1. package/dist/types/common/src/constants.d.ts +11 -5
  2. package/dist/types/excalidraw/actions/actionAddToLibrary.d.ts +6 -0
  3. package/dist/types/excalidraw/actions/actionBoundText.d.ts +4 -0
  4. package/dist/types/excalidraw/actions/actionCanvas.d.ts +24 -0
  5. package/dist/types/excalidraw/actions/actionClipboard.d.ts +4 -0
  6. package/dist/types/excalidraw/actions/actionCropEditor.d.ts +2 -0
  7. package/dist/types/excalidraw/actions/actionDeleteSelected.d.ts +6 -0
  8. package/dist/types/excalidraw/actions/actionDeselect.d.ts +2 -0
  9. package/dist/types/excalidraw/actions/actionElementLink.d.ts +2 -0
  10. package/dist/types/excalidraw/actions/actionElementLock.d.ts +4 -0
  11. package/dist/types/excalidraw/actions/actionEmbeddable.d.ts +2 -0
  12. package/dist/types/excalidraw/actions/actionExport.d.ts +4 -0
  13. package/dist/types/excalidraw/actions/actionFrame.d.ts +8 -0
  14. package/dist/types/excalidraw/actions/actionGroup.d.ts +4 -0
  15. package/dist/types/excalidraw/actions/actionLinearEditor.d.ts +2 -0
  16. package/dist/types/excalidraw/actions/actionLink.d.ts +2 -0
  17. package/dist/types/excalidraw/actions/actionMenu.d.ts +2 -0
  18. package/dist/types/excalidraw/actions/actionProperties.d.ts +4 -0
  19. package/dist/types/excalidraw/actions/actionSelectAll.d.ts +2 -0
  20. package/dist/types/excalidraw/actions/actionStyles.d.ts +2 -0
  21. package/dist/types/excalidraw/actions/actionToggleArrowBinding.d.ts +2 -0
  22. package/dist/types/excalidraw/actions/actionToggleGridMode.d.ts +2 -0
  23. package/dist/types/excalidraw/actions/actionToggleMidpointSnapping.d.ts +2 -0
  24. package/dist/types/excalidraw/actions/actionToggleObjectsSnapMode.d.ts +2 -0
  25. package/dist/types/excalidraw/actions/actionToggleSearchMenu.d.ts +2 -0
  26. package/dist/types/excalidraw/actions/actionToggleStats.d.ts +2 -0
  27. package/dist/types/excalidraw/actions/actionToggleViewMode.d.ts +2 -0
  28. package/dist/types/excalidraw/actions/actionToggleZenMode.d.ts +2 -0
  29. package/dist/types/excalidraw/components/App.d.ts +12 -0
  30. package/dist/types/excalidraw/components/FrameResizeDimensionLabel.d.ts +8 -0
  31. package/dist/types/excalidraw/components/canvases/InteractiveCanvas.d.ts +1 -0
  32. package/dist/types/excalidraw/data/blob.d.ts +4 -0
  33. package/dist/types/excalidraw/data/json.d.ts +2 -0
  34. package/dist/types/excalidraw/renderer/interactiveScene.d.ts +1 -1
  35. package/dist/types/excalidraw/scene/types.d.ts +2 -0
  36. package/dist/types/excalidraw/types.d.ts +10 -0
  37. package/package.json +2 -2
@@ -224,14 +224,20 @@ export declare const TOUCH_CTX_MENU_TIMEOUT = 500;
224
224
  export declare const TITLE_TIMEOUT = 10000;
225
225
  export declare const VERSION_TIMEOUT = 30000;
226
226
  export declare const SCROLL_TIMEOUT = 100;
227
- /** Finest zoom increment (1%). Used when current zoom is at most 10%; also for rounding fit-to-view zoom. */
227
+ /** Finest zoom increment (1%). Used when current zoom is below 10%; also for rounding fit-to-view zoom. */
228
228
  export declare const ZOOM_STEP = 0.01;
229
- /** Coarser zoom increment (10%). Used when current zoom is strictly above 10%. */
229
+ /** Coarser zoom increment (10%). Used when current zoom is at or above 10%. */
230
230
  export declare const ZOOM_STEP_COARSE = 0.1;
231
- /** Zoom fraction above which interactive zoom uses {@link ZOOM_STEP_COARSE}. */
231
+ /** Zoom fraction from which interactive zoom uses {@link ZOOM_STEP_COARSE} (10% inclusive). */
232
232
  export declare const ZOOM_STEP_COARSE_THRESHOLD = 0.1;
233
- /** Step for toolbar / keyboard / wheel delta cap: 10% when zoom is above 10%, else 1%. */
234
- export declare const getInteractiveZoomStep: (zoomValue: number) => number;
233
+ /**
234
+ * Interactive zoom step by direction:
235
+ * - zoom in: 10% when current zoom is at or above 10%
236
+ * - zoom out: 10% only when current zoom is above 10%
237
+ */
238
+ export declare const getDisplayedZoomPercent: (zoomValue: number) => number;
239
+ export declare const getDisplayedZoomValue: (zoomValue: number) => number;
240
+ export declare const getInteractiveZoomStep: (zoomValue: number, direction?: "in" | "out") => number;
235
241
  /** Initial canvas zoom on app start (15%). */
236
242
  export declare const INITIAL_CANVAS_ZOOM = 0.15;
237
243
  export declare const MIN_ZOOM = 0.02;
@@ -35,6 +35,8 @@ export declare const actionAddToLibrary: {
35
35
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
36
36
  } | null;
37
37
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
38
+ hoverOutlineElementId: string | null;
39
+ hoveredFrameId: string | null;
38
40
  frameRendering: {
39
41
  enabled: boolean;
40
42
  name: boolean;
@@ -190,6 +192,8 @@ export declare const actionAddToLibrary: {
190
192
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
191
193
  } | null;
192
194
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
195
+ hoverOutlineElementId: string | null;
196
+ hoveredFrameId: string | null;
193
197
  frameRendering: {
194
198
  enabled: boolean;
195
199
  name: boolean;
@@ -350,6 +354,8 @@ export declare const actionAddToLibrary: {
350
354
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
351
355
  } | null;
352
356
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
357
+ hoverOutlineElementId: string | null;
358
+ hoveredFrameId: string | null;
353
359
  frameRendering: {
354
360
  enabled: boolean;
355
361
  name: boolean;
@@ -55,6 +55,8 @@ export declare const actionBindText: {
55
55
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
56
56
  } | null;
57
57
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
58
+ hoverOutlineElementId: string | null;
59
+ hoveredFrameId: string | null;
58
60
  frameRendering: {
59
61
  enabled: boolean;
60
62
  name: boolean;
@@ -227,6 +229,8 @@ export declare const actionWrapTextInContainer: {
227
229
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
228
230
  } | null;
229
231
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
232
+ hoverOutlineElementId: string | null;
233
+ hoveredFrameId: string | null;
230
234
  frameRendering: {
231
235
  enabled: boolean;
232
236
  name: boolean;
@@ -67,6 +67,7 @@ export declare const actionClearCanvas: {
67
67
  [id: string]: true;
68
68
  }>;
69
69
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
70
+ hoverOutlineElementId: string | null;
70
71
  activeEmbeddable: {
71
72
  element: import("@nous-excalidraw/element/types").NonDeletedExcalidrawElement;
72
73
  state: "hover" | "active";
@@ -116,6 +117,7 @@ export declare const actionClearCanvas: {
116
117
  boxSelectionMode: import("../types").BoxSelectionMode;
117
118
  bindingPreference: "enabled" | "disabled";
118
119
  startBoundElement: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawBindableElement> | null;
120
+ hoveredFrameId: string | null;
119
121
  editingFrame: string | null;
120
122
  preferredSelectionTool: {
121
123
  type: "selection" | "lasso";
@@ -216,6 +218,8 @@ export declare const actionZoomIn: {
216
218
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
217
219
  } | null;
218
220
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
221
+ hoverOutlineElementId: string | null;
222
+ hoveredFrameId: string | null;
219
223
  frameRendering: {
220
224
  enabled: boolean;
221
225
  name: boolean;
@@ -392,6 +396,8 @@ export declare const actionZoomOut: {
392
396
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
393
397
  } | null;
394
398
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
399
+ hoverOutlineElementId: string | null;
400
+ hoveredFrameId: string | null;
395
401
  frameRendering: {
396
402
  enabled: boolean;
397
403
  name: boolean;
@@ -568,6 +574,8 @@ export declare const actionResetZoom: {
568
574
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
569
575
  } | null;
570
576
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
577
+ hoverOutlineElementId: string | null;
578
+ hoveredFrameId: string | null;
571
579
  frameRendering: {
572
580
  enabled: boolean;
573
581
  name: boolean;
@@ -745,6 +753,8 @@ export declare const zoomToFitBounds: ({ bounds, appState, canvasOffsets, fitToV
745
753
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
746
754
  } | null;
747
755
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
756
+ hoverOutlineElementId: string | null;
757
+ hoveredFrameId: string | null;
748
758
  frameRendering: {
749
759
  enabled: boolean;
750
760
  name: boolean;
@@ -918,6 +928,8 @@ export declare const zoomToFit: ({ canvasOffsets, targetElements, appState, fitT
918
928
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
919
929
  } | null;
920
930
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
931
+ hoverOutlineElementId: string | null;
932
+ hoveredFrameId: string | null;
921
933
  frameRendering: {
922
934
  enabled: boolean;
923
935
  name: boolean;
@@ -1088,6 +1100,8 @@ export declare const actionZoomToFitSelectionInViewport: {
1088
1100
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
1089
1101
  } | null;
1090
1102
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
1103
+ hoverOutlineElementId: string | null;
1104
+ hoveredFrameId: string | null;
1091
1105
  frameRendering: {
1092
1106
  enabled: boolean;
1093
1107
  name: boolean;
@@ -1262,6 +1276,8 @@ export declare const actionZoomToFitSelection: {
1262
1276
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
1263
1277
  } | null;
1264
1278
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
1279
+ hoverOutlineElementId: string | null;
1280
+ hoveredFrameId: string | null;
1265
1281
  frameRendering: {
1266
1282
  enabled: boolean;
1267
1283
  name: boolean;
@@ -1437,6 +1453,8 @@ export declare const actionZoomToFit: {
1437
1453
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
1438
1454
  } | null;
1439
1455
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
1456
+ hoverOutlineElementId: string | null;
1457
+ hoveredFrameId: string | null;
1440
1458
  frameRendering: {
1441
1459
  enabled: boolean;
1442
1460
  name: boolean;
@@ -1612,6 +1630,8 @@ export declare const actionToggleEraserTool: {
1612
1630
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
1613
1631
  } | null;
1614
1632
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
1633
+ hoverOutlineElementId: string | null;
1634
+ hoveredFrameId: string | null;
1615
1635
  frameRendering: {
1616
1636
  enabled: boolean;
1617
1637
  name: boolean;
@@ -1778,6 +1798,8 @@ export declare const actionToggleLassoTool: {
1778
1798
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
1779
1799
  } | null;
1780
1800
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
1801
+ hoverOutlineElementId: string | null;
1802
+ hoveredFrameId: string | null;
1781
1803
  frameRendering: {
1782
1804
  enabled: boolean;
1783
1805
  name: boolean;
@@ -1943,6 +1965,8 @@ export declare const actionToggleHandTool: {
1943
1965
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
1944
1966
  } | null;
1945
1967
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
1968
+ hoverOutlineElementId: string | null;
1969
+ hoveredFrameId: string | null;
1946
1970
  frameRendering: {
1947
1971
  enabled: boolean;
1948
1972
  name: boolean;
@@ -36,6 +36,8 @@ export declare const actionPaste: {
36
36
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
37
37
  } | null;
38
38
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
39
+ hoverOutlineElementId: string | null;
40
+ hoveredFrameId: string | null;
39
41
  frameRendering: {
40
42
  enabled: boolean;
41
43
  name: boolean;
@@ -246,6 +248,8 @@ export declare const actionCopyAsPng: {
246
248
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
247
249
  } | null;
248
250
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
251
+ hoverOutlineElementId: string | null;
252
+ hoveredFrameId: string | null;
249
253
  frameRendering: {
250
254
  enabled: boolean;
251
255
  name: boolean;
@@ -37,6 +37,8 @@ export declare const actionToggleCropEditor: {
37
37
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
38
38
  } | null;
39
39
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
40
+ hoverOutlineElementId: string | null;
41
+ hoveredFrameId: string | null;
40
42
  frameRendering: {
41
43
  enabled: boolean;
42
44
  name: boolean;
@@ -38,6 +38,8 @@ export declare const actionDeleteSelected: {
38
38
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
39
39
  } | null;
40
40
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
41
+ hoverOutlineElementId: string | null;
42
+ hoveredFrameId: string | null;
41
43
  frameRendering: {
42
44
  enabled: boolean;
43
45
  name: boolean;
@@ -231,6 +233,8 @@ export declare const actionDeleteSelected: {
231
233
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
232
234
  } | null;
233
235
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
236
+ hoverOutlineElementId: string | null;
237
+ hoveredFrameId: string | null;
234
238
  frameRendering: {
235
239
  enabled: boolean;
236
240
  name: boolean;
@@ -397,6 +401,8 @@ export declare const actionDeleteSelected: {
397
401
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
398
402
  } | null;
399
403
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
404
+ hoverOutlineElementId: string | null;
405
+ hoveredFrameId: string | null;
400
406
  frameRendering: {
401
407
  enabled: boolean;
402
408
  name: boolean;
@@ -35,6 +35,8 @@ export declare const actionDeselect: {
35
35
  isMidpointSnappingEnabled: boolean;
36
36
  startBoundElement: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawBindableElement> | null;
37
37
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
38
+ hoverOutlineElementId: string | null;
39
+ hoveredFrameId: string | null;
38
40
  frameRendering: {
39
41
  enabled: boolean;
40
42
  name: boolean;
@@ -66,6 +66,8 @@ export declare const actionLinkToElement: {
66
66
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
67
67
  } | null;
68
68
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
69
+ hoverOutlineElementId: string | null;
70
+ hoveredFrameId: string | null;
69
71
  frameRendering: {
70
72
  enabled: boolean;
71
73
  name: boolean;
@@ -48,6 +48,8 @@ export declare const actionToggleElementLock: {
48
48
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
49
49
  } | null;
50
50
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
51
+ hoverOutlineElementId: string | null;
52
+ hoveredFrameId: string | null;
51
53
  frameRendering: {
52
54
  enabled: boolean;
53
55
  name: boolean;
@@ -219,6 +221,8 @@ export declare const actionUnlockAllElements: {
219
221
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
220
222
  } | null;
221
223
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
224
+ hoverOutlineElementId: string | null;
225
+ hoveredFrameId: string | null;
222
226
  frameRendering: {
223
227
  enabled: boolean;
224
228
  name: boolean;
@@ -39,6 +39,8 @@ export declare const actionSetEmbeddableAsActiveTool: {
39
39
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
40
40
  } | null;
41
41
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
42
+ hoverOutlineElementId: string | null;
43
+ hoveredFrameId: string | null;
42
44
  frameRendering: {
43
45
  enabled: boolean;
44
46
  name: boolean;
@@ -117,6 +117,7 @@ export declare const actionLoadScene: {
117
117
  [id: string]: true;
118
118
  }>;
119
119
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
120
+ hoverOutlineElementId: string | null;
120
121
  activeTool: {
121
122
  lastActiveTool: import("../types").ActiveTool | null;
122
123
  locked: boolean;
@@ -172,6 +173,7 @@ export declare const actionLoadScene: {
172
173
  boxSelectionMode: import("../types").BoxSelectionMode;
173
174
  bindingPreference: "enabled" | "disabled";
174
175
  startBoundElement: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawBindableElement> | null;
176
+ hoveredFrameId: string | null;
175
177
  editingFrame: string | null;
176
178
  preferredSelectionTool: {
177
179
  type: "selection" | "lasso";
@@ -266,6 +268,8 @@ export declare const actionLoadScene: {
266
268
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
267
269
  } | null;
268
270
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
271
+ hoverOutlineElementId: string | null;
272
+ hoveredFrameId: string | null;
269
273
  frameRendering: {
270
274
  enabled: boolean;
271
275
  name: boolean;
@@ -36,6 +36,8 @@ export declare const actionSelectAllElementsInFrame: {
36
36
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
37
37
  } | null;
38
38
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
39
+ hoverOutlineElementId: string | null;
40
+ hoveredFrameId: string | null;
39
41
  frameRendering: {
40
42
  enabled: boolean;
41
43
  name: boolean;
@@ -212,6 +214,8 @@ export declare const actionRemoveAllElementsFromFrame: {
212
214
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
213
215
  } | null;
214
216
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
217
+ hoverOutlineElementId: string | null;
218
+ hoveredFrameId: string | null;
215
219
  frameRendering: {
216
220
  enabled: boolean;
217
221
  name: boolean;
@@ -392,6 +396,8 @@ export declare const actionupdateFrameRendering: {
392
396
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
393
397
  } | null;
394
398
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
399
+ hoverOutlineElementId: string | null;
400
+ hoveredFrameId: string | null;
395
401
  editingFrame: string | null;
396
402
  elementsToHighlight: import("@nous-excalidraw/element/types").NonDeleted<ExcalidrawElement>[] | null;
397
403
  editingTextElement: import("@nous-excalidraw/element/types").ExcalidrawTextElement | null;
@@ -565,6 +571,8 @@ export declare const actionSetFrameAsActiveTool: {
565
571
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
566
572
  } | null;
567
573
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
574
+ hoverOutlineElementId: string | null;
575
+ hoveredFrameId: string | null;
568
576
  frameRendering: {
569
577
  enabled: boolean;
570
578
  name: boolean;
@@ -42,6 +42,8 @@ export declare const actionGroup: {
42
42
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
43
43
  } | null;
44
44
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
45
+ hoverOutlineElementId: string | null;
46
+ hoveredFrameId: string | null;
45
47
  frameRendering: {
46
48
  enabled: boolean;
47
49
  name: boolean;
@@ -217,6 +219,8 @@ export declare const actionUngroup: {
217
219
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
218
220
  } | null;
219
221
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
222
+ hoverOutlineElementId: string | null;
223
+ hoveredFrameId: string | null;
220
224
  frameRendering: {
221
225
  enabled: boolean;
222
226
  name: boolean;
@@ -69,6 +69,8 @@ export declare const actionToggleLinearEditor: {
69
69
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
70
70
  } | null;
71
71
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
72
+ hoverOutlineElementId: string | null;
73
+ hoveredFrameId: string | null;
72
74
  frameRendering: {
73
75
  enabled: boolean;
74
76
  name: boolean;
@@ -33,6 +33,8 @@ export declare const actionLink: {
33
33
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
34
34
  } | null;
35
35
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
36
+ hoverOutlineElementId: string | null;
37
+ hoveredFrameId: string | null;
36
38
  frameRendering: {
37
39
  enabled: boolean;
38
40
  name: boolean;
@@ -40,6 +40,8 @@ export declare const actionShortcuts: {
40
40
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
41
41
  } | null;
42
42
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
43
+ hoverOutlineElementId: string | null;
44
+ hoveredFrameId: string | null;
43
45
  frameRendering: {
44
46
  enabled: boolean;
45
47
  name: boolean;
@@ -62,6 +62,8 @@ export declare const actionDecreaseFontSize: {
62
62
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
63
63
  } | null;
64
64
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
65
+ hoverOutlineElementId: string | null;
66
+ hoveredFrameId: string | null;
65
67
  frameRendering: {
66
68
  enabled: boolean;
67
69
  name: boolean;
@@ -233,6 +235,8 @@ export declare const actionIncreaseFontSize: {
233
235
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
234
236
  } | null;
235
237
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
238
+ hoverOutlineElementId: string | null;
239
+ hoveredFrameId: string | null;
236
240
  frameRendering: {
237
241
  enabled: boolean;
238
242
  name: boolean;
@@ -40,6 +40,8 @@ export declare const actionSelectAll: {
40
40
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
41
41
  } | null;
42
42
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
43
+ hoverOutlineElementId: string | null;
44
+ hoveredFrameId: string | null;
43
45
  frameRendering: {
44
46
  enabled: boolean;
45
47
  name: boolean;
@@ -38,6 +38,8 @@ export declare const actionCopyStyles: {
38
38
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
39
39
  } | null;
40
40
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
41
+ hoverOutlineElementId: string | null;
42
+ hoveredFrameId: string | null;
41
43
  frameRendering: {
42
44
  enabled: boolean;
43
45
  name: boolean;
@@ -34,6 +34,8 @@ export declare const actionToggleArrowBinding: {
34
34
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
35
35
  } | null;
36
36
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
37
+ hoverOutlineElementId: string | null;
38
+ hoveredFrameId: string | null;
37
39
  frameRendering: {
38
40
  enabled: boolean;
39
41
  name: boolean;
@@ -39,6 +39,8 @@ export declare const actionToggleGridMode: {
39
39
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
40
40
  } | null;
41
41
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
42
+ hoverOutlineElementId: string | null;
43
+ hoveredFrameId: string | null;
42
44
  frameRendering: {
43
45
  enabled: boolean;
44
46
  name: boolean;
@@ -34,6 +34,8 @@ export declare const actionToggleMidpointSnapping: {
34
34
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
35
35
  } | null;
36
36
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
37
+ hoverOutlineElementId: string | null;
38
+ hoveredFrameId: string | null;
37
39
  frameRendering: {
38
40
  enabled: boolean;
39
41
  name: boolean;
@@ -37,6 +37,8 @@ export declare const actionToggleObjectsSnapMode: {
37
37
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
38
38
  } | null;
39
39
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
40
+ hoverOutlineElementId: string | null;
41
+ hoveredFrameId: string | null;
40
42
  frameRendering: {
41
43
  enabled: boolean;
42
44
  name: boolean;
@@ -43,6 +43,8 @@ export declare const actionToggleSearchMenu: {
43
43
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
44
44
  } | null;
45
45
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
46
+ hoverOutlineElementId: string | null;
47
+ hoveredFrameId: string | null;
46
48
  frameRendering: {
47
49
  enabled: boolean;
48
50
  name: boolean;
@@ -39,6 +39,8 @@ export declare const actionToggleStats: {
39
39
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
40
40
  } | null;
41
41
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
42
+ hoverOutlineElementId: string | null;
43
+ hoveredFrameId: string | null;
42
44
  frameRendering: {
43
45
  enabled: boolean;
44
46
  name: boolean;
@@ -36,6 +36,8 @@ export declare const actionToggleViewMode: {
36
36
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
37
37
  } | null;
38
38
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
39
+ hoverOutlineElementId: string | null;
40
+ hoveredFrameId: string | null;
39
41
  frameRendering: {
40
42
  enabled: boolean;
41
43
  name: boolean;
@@ -36,6 +36,8 @@ export declare const actionToggleZenMode: {
36
36
  midPoint?: import("@nous-excalidraw/math").GlobalPoint;
37
37
  } | null;
38
38
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
39
+ hoverOutlineElementId: string | null;
40
+ hoveredFrameId: string | null;
39
41
  frameRendering: {
40
42
  enabled: boolean;
41
43
  name: boolean;
@@ -67,6 +67,7 @@ export declare const useExcalidrawAPI: () => ExcalidrawImperativeAPI | null;
67
67
  declare class App extends React.Component<AppProps, AppState> {
68
68
  canvas: AppClassProperties["canvas"];
69
69
  interactiveCanvas: AppClassProperties["interactiveCanvas"];
70
+ outlineOverlayCanvas: AppClassProperties["outlineOverlayCanvas"];
70
71
  sessionExportThemeOverride: AppState["theme"] | undefined;
71
72
  rc: RoughCanvas;
72
73
  unmounted: boolean;
@@ -288,6 +289,11 @@ declare class App extends React.Component<AppProps, AppState> {
288
289
  private isDoubleClick;
289
290
  private isIframeLikeElementCenter;
290
291
  private updateEmbedValidationStatus;
292
+ /**
293
+ * Clip DOM embed/iframes to the axis-aligned intersection with the parent
294
+ * frame so overflow matches static-canvas clipping (rotated embeds: canvas only).
295
+ */
296
+ private getEmbeddableDomClipStyleWithinFrame;
291
297
  private updateEmbeddables;
292
298
  private renderEmbeddables;
293
299
  private getFrameNameDOMId;
@@ -495,6 +501,11 @@ declare class App extends React.Component<AppProps, AppState> {
495
501
  private getElementLinkAtPosition;
496
502
  private handleElementLinkClick;
497
503
  private getTopLayerFrameAtSceneCoords;
504
+ private clearHoverOutlineIfNeeded;
505
+ /** Unified frame hover: title band, frame interior, or any element inside the frame. */
506
+ private computeHoveredFrameId;
507
+ private updateFrameHoverAndOutline;
508
+ private updateFrameHoverStateFromSceneCoords;
498
509
  private handleCanvasPointerMove;
499
510
  private handleEraser;
500
511
  private handleTouchMove;
@@ -565,6 +576,7 @@ declare class App extends React.Component<AppProps, AppState> {
565
576
  * to render new images. This is just a failsafe */
566
577
  private scheduleImageRefresh;
567
578
  private clearSelection;
579
+ private handleOutlineOverlayCanvasRef;
568
580
  private handleInteractiveCanvasRef;
569
581
  private insertImages;
570
582
  private handleAppOnDrop;
@@ -0,0 +1,8 @@
1
+ import type { ElementsMap, NonDeletedExcalidrawElement } from "@nous-excalidraw/element/types";
2
+ import type { AppState } from "../types";
3
+ import "./FrameResizeDimensionLabel.scss";
4
+ export declare const FrameResizeDimensionLabel: ({ element, elementsMap, appState, }: {
5
+ element: NonDeletedExcalidrawElement;
6
+ elementsMap: ElementsMap;
7
+ appState: AppState;
8
+ }) => import("react/jsx-runtime").JSX.Element;
@@ -7,6 +7,7 @@ import type { DOMAttributes } from "react";
7
7
  type InteractiveCanvasProps = {
8
8
  containerRef: React.RefObject<HTMLDivElement | null>;
9
9
  canvas: HTMLCanvasElement | null;
10
+ outlineOverlayCanvas: HTMLCanvasElement | null;
10
11
  elementsMap: RenderableElementsMap;
11
12
  visibleElements: readonly NonDeletedExcalidrawElement[];
12
13
  selectedElements: readonly NonDeletedExcalidrawElement[];
@@ -55,6 +55,7 @@ fileHandle?: FileSystemFileHandle | null) => Promise<{
55
55
  [id: string]: true;
56
56
  }>;
57
57
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
58
+ hoverOutlineElementId: string | null;
58
59
  activeTool: {
59
60
  lastActiveTool: import("../types").ActiveTool | null;
60
61
  locked: boolean;
@@ -110,6 +111,7 @@ fileHandle?: FileSystemFileHandle | null) => Promise<{
110
111
  boxSelectionMode: import("../types").BoxSelectionMode;
111
112
  bindingPreference: "enabled" | "disabled";
112
113
  startBoundElement: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawBindableElement> | null;
114
+ hoveredFrameId: string | null;
113
115
  editingFrame: string | null;
114
116
  preferredSelectionTool: {
115
117
  type: "selection" | "lasso";
@@ -221,6 +223,7 @@ fileHandle?: FileSystemFileHandle | null) => Promise<{
221
223
  [id: string]: true;
222
224
  }>;
223
225
  frameToHighlight: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
226
+ hoverOutlineElementId: string | null;
224
227
  activeTool: {
225
228
  lastActiveTool: import("../types").ActiveTool | null;
226
229
  locked: boolean;
@@ -276,6 +279,7 @@ fileHandle?: FileSystemFileHandle | null) => Promise<{
276
279
  boxSelectionMode: import("../types").BoxSelectionMode;
277
280
  bindingPreference: "enabled" | "disabled";
278
281
  startBoundElement: import("@nous-excalidraw/element/types").NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawBindableElement> | null;
282
+ hoveredFrameId: string | null;
279
283
  editingFrame: string | null;
280
284
  preferredSelectionTool: {
281
285
  type: "selection" | "lasso";
@@ -53,6 +53,7 @@ export declare const loadFromJSON: (localAppState: AppState, localElements: read
53
53
  [id: string]: true;
54
54
  }>;
55
55
  frameToHighlight: NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
56
+ hoverOutlineElementId: string | null;
56
57
  activeTool: {
57
58
  lastActiveTool: import("../types").ActiveTool | null;
58
59
  locked: boolean;
@@ -108,6 +109,7 @@ export declare const loadFromJSON: (localAppState: AppState, localElements: read
108
109
  boxSelectionMode: import("../types").BoxSelectionMode;
109
110
  bindingPreference: "enabled" | "disabled";
110
111
  startBoundElement: NonDeleted<import("@nous-excalidraw/element/types").ExcalidrawBindableElement> | null;
112
+ hoveredFrameId: string | null;
111
113
  editingFrame: string | null;
112
114
  preferredSelectionTool: {
113
115
  type: "selection" | "lasso";
@@ -1,6 +1,6 @@
1
1
  import { getScrollBars } from "../scene/scrollbars";
2
2
  import type { InteractiveSceneRenderConfig, RenderableElementsMap } from "../scene/types";
3
- declare const _renderInteractiveScene: ({ app, canvas, elementsMap, visibleElements, selectedElements, allElementsMap, scale, appState, renderConfig, editorInterface, animationState, deltaTime, }: InteractiveSceneRenderConfig) => {
3
+ declare const _renderInteractiveScene: ({ app, canvas, outlineOverlayCanvas, elementsMap, visibleElements, selectedElements, allElementsMap, scale, appState, renderConfig, editorInterface, animationState, deltaTime, }: InteractiveSceneRenderConfig) => {
4
4
  scrollBars?: ReturnType<typeof getScrollBars>;
5
5
  atLeastOneVisibleElement: boolean;
6
6
  elementsMap: RenderableElementsMap;
@@ -74,6 +74,8 @@ export type InteractiveSceneRenderAnimationState = {
74
74
  export type InteractiveSceneRenderConfig = {
75
75
  app: AppClassProperties;
76
76
  canvas: HTMLCanvasElement | null;
77
+ /** When set, hover outline + selection borders render here so they paint above DOM embeds (iframes). */
78
+ outlineOverlayCanvas?: HTMLCanvasElement | null;
77
79
  elementsMap: RenderableElementsMap;
78
80
  visibleElements: readonly NonDeletedExcalidrawElement[];
79
81
  selectedElements: readonly NonDeletedExcalidrawElement[];
@@ -129,6 +129,7 @@ export type StaticCanvasAppState = Readonly<_CommonCanvasAppState & {
129
129
  croppingElementId: AppState["croppingElementId"];
130
130
  }>;
131
131
  export type InteractiveCanvasAppState = Readonly<_CommonCanvasAppState & {
132
+ hoverOutlineElementId: AppState["hoverOutlineElementId"];
132
133
  activeTool: AppState["activeTool"];
133
134
  activeEmbeddable: AppState["activeEmbeddable"];
134
135
  selectionElement: AppState["selectionElement"];
@@ -223,6 +224,13 @@ export interface AppState {
223
224
  midPoint?: GlobalPoint;
224
225
  } | null;
225
226
  frameToHighlight: NonDeleted<ExcalidrawFrameLikeElement> | null;
227
+ /** Interactive canvas: 2px screen hover outline for frame / image / embeddable */
228
+ hoverOutlineElementId: string | null;
229
+ /**
230
+ * Frame under cursor for unified hover (title + outline): frame rect, label,
231
+ * or any child inside the frame.
232
+ */
233
+ hoveredFrameId: string | null;
226
234
  frameRendering: {
227
235
  enabled: boolean;
228
236
  name: boolean;
@@ -601,6 +609,8 @@ export type AppClassProperties = {
601
609
  api: App["api"];
602
610
  sessionExportThemeOverride: App["sessionExportThemeOverride"];
603
611
  interactiveCanvas: HTMLCanvasElement | null;
612
+ /** Renders selection/hover outlines above embed layer; pointer-events none */
613
+ outlineOverlayCanvas: HTMLCanvasElement | null;
604
614
  /** static canvas */
605
615
  canvas: HTMLCanvasElement;
606
616
  focusContainer(): void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nous-excalidraw/math",
3
- "version": "0.18.2",
3
+ "version": "0.18.4-beta.1",
4
4
  "type": "module",
5
5
  "types": "./dist/types/math/src/index.d.ts",
6
6
  "main": "./dist/prod/index.js",
@@ -61,6 +61,6 @@
61
61
  "build:esm": "rimraf dist && node ../../scripts/buildBase.js && yarn gen:types"
62
62
  },
63
63
  "dependencies": {
64
- "@nous-excalidraw/common": "0.18.2"
64
+ "@nous-excalidraw/common": "0.18.4-beta.1"
65
65
  }
66
66
  }