canvu-react 0.3.17 → 0.3.19
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/chatbot.d.cts +1 -1
- package/dist/chatbot.d.ts +1 -1
- package/dist/index.cjs +87 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +37 -1
- package/dist/index.d.ts +37 -1
- package/dist/index.js +79 -1
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +2445 -1710
- package/dist/react.cjs.map +1 -1
- package/dist/react.d.cts +326 -35
- package/dist/react.d.ts +326 -35
- package/dist/react.js +2447 -1712
- package/dist/react.js.map +1 -1
- package/dist/realtime.d.cts +2 -2
- package/dist/realtime.d.ts +2 -2
- package/dist/{types-CTyASYIm.d.cts → types-7kfWcm0L.d.cts} +33 -154
- package/dist/{types-UvUy2Eed.d.ts → types-C4k_AMvi.d.ts} +33 -154
- package/package.json +16 -1
package/dist/react.d.cts
CHANGED
|
@@ -3,14 +3,14 @@ export { H as HydratedSceneItemsWithAssetsResult, h as hydrateSceneItemsWithAsse
|
|
|
3
3
|
import { V as VectorSceneItem } from './types-CB0TZZuk.cjs';
|
|
4
4
|
import { V as VectorViewportAssetKind, u as VectorViewportAssetStore } from './shape-builders-DFudWDFI.cjs';
|
|
5
5
|
export { v as VectorViewportAssetHydrationRequest, w as VectorViewportAssetResolveRequest, x as VectorViewportAssetResolveResult, y as VectorViewportAssetUploadRequest, z as VectorViewportAssetUploadResult } from './shape-builders-DFudWDFI.cjs';
|
|
6
|
-
import { V as VectorToolDefinition, C as CanvasPlugin,
|
|
7
|
-
export {
|
|
6
|
+
import { B as BoardComponentPosition, V as VectorToolDefinition, C as CanvasPlugin, a as VectorSelectionInspector } from './types-7kfWcm0L.cjs';
|
|
7
|
+
export { b as CanvasPluginComponentProps, c as CanvasPluginContribution, d as CanvasPluginItemsChangeMiddlewareContext, e as CanvasPluginRenderContext, f as CanvuChromeActiveToolStyle, g as CanvuChromeContext, h as CanvuChromeContextValue, i as CanvuChromeSelectionStyleChange, j as CanvuPluginContext, k as CanvuPluginContextValue, l as CanvuPluginViewportSnapshot, m as CustomShapePlacementOptions, P as PlacementPreview, n as VectorCanvasSpacePosition, o as VectorSelectionInspectorProps, p as VectorViewport, q as VectorViewportHandle, r as VectorViewportProps, W as WorldPointerDownDetail, s as createCanvuPlugin, t as getBoardPositionStyle, u as useCanvuChromeContext, v as useCanvuDocumentContext, w as useCanvuPluginContext, x as useCanvuPluginContribution, y as useCanvuResolvedTools, z as useCanvuViewportContext } from './types-7kfWcm0L.cjs';
|
|
8
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
9
|
+
import * as react from 'react';
|
|
10
|
+
import { CSSProperties, ReactNode, ReactElement, SVGProps } from 'react';
|
|
11
|
+
import { C as Camera2D } from './camera-BwQjm5oh.cjs';
|
|
8
12
|
import { V as VectorCanvasPersistenceAdapter, a as VectorCanvasRemoteAdapter } from './types-DNwjgs5U.cjs';
|
|
9
13
|
export { b as VectorCanvasSnapshot } from './types-DNwjgs5U.cjs';
|
|
10
|
-
import * as react from 'react';
|
|
11
|
-
import { SVGProps, CSSProperties, ReactNode } from 'react';
|
|
12
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
13
|
-
import './camera-BwQjm5oh.cjs';
|
|
14
14
|
|
|
15
15
|
/**
|
|
16
16
|
* Extra context for each item created by {@link ingestAssetFilesToSceneItems}.
|
|
@@ -154,6 +154,126 @@ type IngestAssetFilesToSceneItemsResult = {
|
|
|
154
154
|
*/
|
|
155
155
|
declare function ingestAssetFilesToSceneItems(options: IngestAssetFilesToSceneItemsOptions): Promise<IngestAssetFilesToSceneItemsResult>;
|
|
156
156
|
|
|
157
|
+
type ImagesMenuLabels = {
|
|
158
|
+
title?: string;
|
|
159
|
+
dragHandle?: string;
|
|
160
|
+
focus?: string;
|
|
161
|
+
copy?: string;
|
|
162
|
+
rotate?: string;
|
|
163
|
+
delete?: string;
|
|
164
|
+
collapse?: string;
|
|
165
|
+
expand?: string;
|
|
166
|
+
};
|
|
167
|
+
type ImagesMenuProps = {
|
|
168
|
+
items: readonly VectorSceneItem[];
|
|
169
|
+
onItemsChange: (items: VectorSceneItem[]) => void;
|
|
170
|
+
/**
|
|
171
|
+
* Fires when the user clicks an image's thumbnail/label area. Use this to
|
|
172
|
+
* pan/zoom the canvas to the item (e.g. `viewportRef.current?.fitWorldRect(item.bounds)`).
|
|
173
|
+
*/
|
|
174
|
+
onFocusItem?: (item: VectorSceneItem) => void;
|
|
175
|
+
labels?: ImagesMenuLabels;
|
|
176
|
+
};
|
|
177
|
+
/**
|
|
178
|
+
* Floating side panel that lists images marked as "managed"
|
|
179
|
+
* (via `pluginData.managed === true`) and offers copy, rotate, delete, and
|
|
180
|
+
* drag-to-reorder actions. Managed images are also `locked`, so they do not
|
|
181
|
+
* respond to direct canvas interaction.
|
|
182
|
+
*/
|
|
183
|
+
declare function ImagesMenu({ items, onItemsChange, onFocusItem, labels, }: ImagesMenuProps): react_jsx_runtime.JSX.Element | null;
|
|
184
|
+
|
|
185
|
+
type NavMenuMinimapProps = {
|
|
186
|
+
className?: string;
|
|
187
|
+
/** @default false */
|
|
188
|
+
defaultExpanded?: boolean;
|
|
189
|
+
camera?: Camera2D;
|
|
190
|
+
viewportWidth?: number;
|
|
191
|
+
viewportHeight?: number;
|
|
192
|
+
items?: readonly VectorSceneItem[];
|
|
193
|
+
onRequestRender?: () => void;
|
|
194
|
+
};
|
|
195
|
+
/**
|
|
196
|
+
* Chevron toggle plus the expandable minimap panel.
|
|
197
|
+
*
|
|
198
|
+
* The toggle button renders inline in the nav-menu strip; the SVG panel is portaled into a slot
|
|
199
|
+
* NavMenu provides below the strip. With a bottom-anchored NavMenu, expanding pushes the strip
|
|
200
|
+
* up to make room — matching the original `<NavMenu />` behaviour.
|
|
201
|
+
*/
|
|
202
|
+
declare function NavMenuMinimap({ className, defaultExpanded, camera: cameraProp, viewportWidth: viewportWidthProp, viewportHeight: viewportHeightProp, items: itemsProp, onRequestRender: onRequestRenderProp, }?: NavMenuMinimapProps): react_jsx_runtime.JSX.Element;
|
|
203
|
+
|
|
204
|
+
type NavMenuUndoRedoProps = {
|
|
205
|
+
className?: string;
|
|
206
|
+
style?: CSSProperties;
|
|
207
|
+
onUndo?: () => void;
|
|
208
|
+
onRedo?: () => void;
|
|
209
|
+
canUndo?: boolean;
|
|
210
|
+
canRedo?: boolean;
|
|
211
|
+
};
|
|
212
|
+
/** Undo + Redo buttons, gated by `canUndo` / `canRedo`. */
|
|
213
|
+
declare function NavMenuUndoRedo({ className, style, onUndo: onUndoProp, onRedo: onRedoProp, canUndo: canUndoProp, canRedo: canRedoProp, }?: NavMenuUndoRedoProps): react_jsx_runtime.JSX.Element;
|
|
214
|
+
|
|
215
|
+
type NavMenuZoomControlsProps = {
|
|
216
|
+
className?: string;
|
|
217
|
+
style?: CSSProperties;
|
|
218
|
+
zoomPercent?: number;
|
|
219
|
+
onZoomIn?: () => void;
|
|
220
|
+
onZoomOut?: () => void;
|
|
221
|
+
};
|
|
222
|
+
/** Zoom-out button, percentage label, and zoom-in button. */
|
|
223
|
+
declare function NavMenuZoomControls({ className, style, zoomPercent: zoomPercentProp, onZoomIn: onZoomInProp, onZoomOut: onZoomOutProp, }?: NavMenuZoomControlsProps): react_jsx_runtime.JSX.Element;
|
|
224
|
+
|
|
225
|
+
/**
|
|
226
|
+
* Floating bottom-bar combining zoom controls, undo/redo, and an expandable minimap.
|
|
227
|
+
*
|
|
228
|
+
* Two rendering modes:
|
|
229
|
+
* - **Default** (no `children`): renders all three feature groups using `props` ?? context values.
|
|
230
|
+
* - **Composable** (JSX `children`): pick which features to render
|
|
231
|
+
* (e.g. `<NavMenu.UndoRedo />`, `<NavMenu.Minimap />`). Each subcomponent reads its data from
|
|
232
|
+
* {@link CanvuChromeContext} unless its own override props are supplied.
|
|
233
|
+
*/
|
|
234
|
+
type NavMenuProps = {
|
|
235
|
+
camera?: Camera2D;
|
|
236
|
+
viewportWidth?: number;
|
|
237
|
+
viewportHeight?: number;
|
|
238
|
+
items?: readonly VectorSceneItem[];
|
|
239
|
+
zoomPercent?: number;
|
|
240
|
+
onZoomIn?: () => void;
|
|
241
|
+
onZoomOut?: () => void;
|
|
242
|
+
onUndo?: () => void;
|
|
243
|
+
onRedo?: () => void;
|
|
244
|
+
canUndo?: boolean;
|
|
245
|
+
canRedo?: boolean;
|
|
246
|
+
onRequestRender?: () => void;
|
|
247
|
+
/** Anchor preset. Defaults to bottom-left. */
|
|
248
|
+
position?: BoardComponentPosition;
|
|
249
|
+
/** Distance (px) from anchored edges. @default 12 */
|
|
250
|
+
inset?: number;
|
|
251
|
+
/** @default 23 */
|
|
252
|
+
zIndex?: number;
|
|
253
|
+
className?: string;
|
|
254
|
+
/** Merged on top of position-derived styles for custom tweaks. */
|
|
255
|
+
style?: CSSProperties;
|
|
256
|
+
/**
|
|
257
|
+
* Composable contents. When omitted, renders the default trio
|
|
258
|
+
* (`NavMenu.ZoomControls`, `NavMenu.UndoRedo`, `NavMenu.Minimap`).
|
|
259
|
+
*/
|
|
260
|
+
children?: ReactNode;
|
|
261
|
+
};
|
|
262
|
+
type NavMenuWithStatics = ((props: NavMenuProps) => ReactElement) & {
|
|
263
|
+
ZoomControls: typeof NavMenuZoomControls;
|
|
264
|
+
UndoRedo: typeof NavMenuUndoRedo;
|
|
265
|
+
Minimap: typeof NavMenuMinimap;
|
|
266
|
+
};
|
|
267
|
+
/**
|
|
268
|
+
* `NavMenu` is a function component with attached subcomponents
|
|
269
|
+
* (`NavMenu.ZoomControls`, `NavMenu.UndoRedo`, `NavMenu.Minimap`).
|
|
270
|
+
*
|
|
271
|
+
* The explicit type annotation is what makes the static properties survive
|
|
272
|
+
* `.d.ts` bundling — relying on TypeScript's expando-function inference loses
|
|
273
|
+
* them in tsup output.
|
|
274
|
+
*/
|
|
275
|
+
declare const NavMenu: NavMenuWithStatics;
|
|
276
|
+
|
|
157
277
|
/**
|
|
158
278
|
* Persistence adapter that stores the document JSON in IndexedDB and manages
|
|
159
279
|
* image blobs separately. Images are stored at original resolution in a dedicated
|
|
@@ -324,6 +444,102 @@ declare function IconText(props: IconProps): react_jsx_runtime.JSX.Element;
|
|
|
324
444
|
declare function IconImage(props: IconProps): react_jsx_runtime.JSX.Element;
|
|
325
445
|
declare function IconLaser(props: IconProps): react_jsx_runtime.JSX.Element;
|
|
326
446
|
|
|
447
|
+
type VectorCanvasSlotProps = {
|
|
448
|
+
children?: ReactNode;
|
|
449
|
+
className?: string;
|
|
450
|
+
style?: CSSProperties;
|
|
451
|
+
};
|
|
452
|
+
type VectorCanvasSpaceProps = VectorCanvasSlotProps & {
|
|
453
|
+
position?: BoardComponentPosition;
|
|
454
|
+
/** @default 12 */
|
|
455
|
+
inset?: number;
|
|
456
|
+
/** @default 40 */
|
|
457
|
+
zIndex?: number;
|
|
458
|
+
/** Pointer events value on the content wrapper. @default "auto" */
|
|
459
|
+
contentPointerEvents?: CSSProperties["pointerEvents"];
|
|
460
|
+
};
|
|
461
|
+
/**
|
|
462
|
+
* Full-viewport column shell for a vector canvas (header + body with stage).
|
|
463
|
+
* Use with {@link VectorCanvasBody}, {@link VectorCanvasMain}. Pass `toolbar` on {@link VectorViewport};
|
|
464
|
+
* Compose the floating tool strip with {@link VectorCanvasToolbar} around {@link VectorToolbar} (see example below).
|
|
465
|
+
*/
|
|
466
|
+
declare function VectorCanvasRoot({ children, className, style, }: VectorCanvasSlotProps): react_jsx_runtime.JSX.Element;
|
|
467
|
+
/** Optional top chrome (title, hints, toggles). */
|
|
468
|
+
declare function VectorCanvasHeader({ children, className, style, }: VectorCanvasSlotProps): react_jsx_runtime.JSX.Element;
|
|
469
|
+
/** Fills remaining space below the header (typically one {@link VectorCanvasMain}). */
|
|
470
|
+
declare function VectorCanvasBody({ children, className, style, }: VectorCanvasSlotProps): react_jsx_runtime.JSX.Element;
|
|
471
|
+
/**
|
|
472
|
+
* Stretch area for {@link VectorViewport} (or any child that should fill the stage).
|
|
473
|
+
*/
|
|
474
|
+
declare function VectorCanvasMain({ children, className, style, }: VectorCanvasSlotProps): react_jsx_runtime.JSX.Element;
|
|
475
|
+
/**
|
|
476
|
+
* Flex child that fills {@link VectorCanvasMain} and gives {@link VectorViewport} a bounded height
|
|
477
|
+
* (white surface by default). Omit if you set the background on `Main` or the viewport yourself.
|
|
478
|
+
*/
|
|
479
|
+
declare function VectorCanvasViewportSurface({ children, className, style, }: VectorCanvasSlotProps): react_jsx_runtime.JSX.Element;
|
|
480
|
+
type VectorCanvasToolbarProps = {
|
|
481
|
+
children?: ReactNode;
|
|
482
|
+
className?: string;
|
|
483
|
+
style?: CSSProperties;
|
|
484
|
+
/** Anchor preset. @default "bottom-center" */
|
|
485
|
+
position?: BoardComponentPosition;
|
|
486
|
+
/** Distance (px) from the anchored edge(s). @default 12 */
|
|
487
|
+
inset?: number;
|
|
488
|
+
/** @default 30 */
|
|
489
|
+
zIndex?: number;
|
|
490
|
+
};
|
|
491
|
+
/**
|
|
492
|
+
* Floating strip anchor for {@link VectorToolbar} or custom controls. Defaults to bottom-center.
|
|
493
|
+
* Renders `pointer-events: none` on the shell and `auto` on children so the canvas keeps receiving hits outside the bar.
|
|
494
|
+
* Pass as the `toolbar` prop of `VectorViewport`; pick a different `position` for top / side anchoring.
|
|
495
|
+
* Z-index defaults to 30 so the strip stays above zoom controls.
|
|
496
|
+
*/
|
|
497
|
+
declare function VectorCanvasToolbar({ children, className, style, position, inset, zIndex, }: VectorCanvasToolbarProps): react_jsx_runtime.JSX.Element;
|
|
498
|
+
/**
|
|
499
|
+
* Absolute canvas-aligned space for floating UI such as chats, rosters, inspectors, and overlays.
|
|
500
|
+
* Use this instead of ad-hoc wrapper divs or plugin hosts when a feature can be expressed as React nodes.
|
|
501
|
+
*/
|
|
502
|
+
declare function VectorCanvasSpace({ children, className, style, position, inset, zIndex, contentPointerEvents, }: VectorCanvasSpaceProps): react_jsx_runtime.JSX.Element;
|
|
503
|
+
/**
|
|
504
|
+
* Namespaced layout primitives for composing a vector canvas shell without ad-hoc wrapper divs.
|
|
505
|
+
*
|
|
506
|
+
* @example
|
|
507
|
+
* ```tsx
|
|
508
|
+
* <VectorCanvas.Root>
|
|
509
|
+
* <VectorCanvas.Header>…</VectorCanvas.Header>
|
|
510
|
+
* <VectorCanvas.Body>
|
|
511
|
+
* <VectorCanvas.Main>
|
|
512
|
+
* <VectorCanvas.ViewportSurface>
|
|
513
|
+
* <VectorViewport
|
|
514
|
+
* toolbar={
|
|
515
|
+
* <VectorCanvas.Toolbar>
|
|
516
|
+
* <VectorToolbar … />
|
|
517
|
+
* </VectorCanvas.Toolbar>
|
|
518
|
+
* }
|
|
519
|
+
* …
|
|
520
|
+
* />
|
|
521
|
+
* </VectorCanvas.ViewportSurface>
|
|
522
|
+
* </VectorCanvas.Main>
|
|
523
|
+
* </VectorCanvas.Body>
|
|
524
|
+
* </VectorCanvas.Root>
|
|
525
|
+
* ```
|
|
526
|
+
*/
|
|
527
|
+
declare const VectorCanvas: {
|
|
528
|
+
readonly Root: typeof VectorCanvasRoot;
|
|
529
|
+
readonly Header: typeof VectorCanvasHeader;
|
|
530
|
+
readonly Body: typeof VectorCanvasBody;
|
|
531
|
+
readonly Main: typeof VectorCanvasMain;
|
|
532
|
+
readonly ViewportSurface: typeof VectorCanvasViewportSurface;
|
|
533
|
+
readonly Toolbar: typeof VectorCanvasToolbar;
|
|
534
|
+
readonly Space: typeof VectorCanvasSpace;
|
|
535
|
+
readonly NavMenu: ((props: NavMenuProps) => react.ReactElement) & {
|
|
536
|
+
ZoomControls: typeof NavMenuZoomControls;
|
|
537
|
+
UndoRedo: typeof NavMenuUndoRedo;
|
|
538
|
+
Minimap: typeof NavMenuMinimap;
|
|
539
|
+
};
|
|
540
|
+
readonly SelectionInspector: typeof VectorSelectionInspector;
|
|
541
|
+
};
|
|
542
|
+
|
|
327
543
|
type VectorToolbarRenderContext = {
|
|
328
544
|
tools: VectorToolDefinition[];
|
|
329
545
|
selectedId: string;
|
|
@@ -335,11 +551,12 @@ type VectorToolbarProps = {
|
|
|
335
551
|
/** Controlled selection. */
|
|
336
552
|
value: string;
|
|
337
553
|
onChange: (toolId: string) => void;
|
|
338
|
-
/** Defaults to {@link DEFAULT_VECTOR_TOOLS}. */
|
|
554
|
+
/** Defaults to {@link DEFAULT_VECTOR_TOOLS}. Ignored when JSX `children` are provided. */
|
|
339
555
|
tools?: VectorToolDefinition[];
|
|
340
556
|
/**
|
|
341
557
|
* Tool ids placed in the overflow menu at the end of the toolbar (horizontal) or bottom (vertical).
|
|
342
558
|
* Defaults to {@link DEFAULT_OVERFLOW_TOOL_IDS}. Pass an empty array to show every tool in the main strip.
|
|
559
|
+
* Ignored when JSX `children` are provided.
|
|
343
560
|
*/
|
|
344
561
|
overflowToolIds?: readonly string[];
|
|
345
562
|
/** Accessible name for the overflow trigger (menu button). Default: `"More tools"`. */
|
|
@@ -355,7 +572,7 @@ type VectorToolbarProps = {
|
|
|
355
572
|
buttonClassName?: string;
|
|
356
573
|
/** Extra class names when that tool is selected. */
|
|
357
574
|
activeButtonClassName?: string;
|
|
358
|
-
/** Shows a lock toggle that keeps current tool active after use. */
|
|
575
|
+
/** Shows a lock toggle that keeps current tool active after use. Ignored when JSX `children` are provided. */
|
|
359
576
|
showToolLockToggle?: boolean;
|
|
360
577
|
/** Controlled lock state for tool persistence. */
|
|
361
578
|
toolLocked?: boolean;
|
|
@@ -364,10 +581,14 @@ type VectorToolbarProps = {
|
|
|
364
581
|
/** `compact` = icon + tooltip only; `comfortable` = small caption under the icon. */
|
|
365
582
|
density?: "compact" | "comfortable";
|
|
366
583
|
/**
|
|
367
|
-
*
|
|
368
|
-
*
|
|
584
|
+
* Toolbar contents.
|
|
585
|
+
*
|
|
586
|
+
* - **Render function**: full control via {@link VectorToolbarRenderContext}. Default buttons are not rendered.
|
|
587
|
+
* - **JSX nodes** (e.g. `<VectorToolbar.Hand />`, `<VectorToolbar.Tool id="…" />`): composable items.
|
|
588
|
+
* Pick exactly which tools to render; default tool list and `showToolLockToggle` are ignored.
|
|
589
|
+
* - **Omitted**: render the default tool strip from `tools` / {@link DEFAULT_VECTOR_TOOLS}.
|
|
369
590
|
*/
|
|
370
|
-
children?: (ctx: VectorToolbarRenderContext) => ReactNode;
|
|
591
|
+
children?: ReactNode | ((ctx: VectorToolbarRenderContext) => ReactNode);
|
|
371
592
|
/**
|
|
372
593
|
* Partial customization: render the content of each tool button (icon + label layout).
|
|
373
594
|
* Default: icon with optional label below on narrow toolbars, or icon-only if `icon` is set.
|
|
@@ -379,37 +600,107 @@ type VectorToolbarProps = {
|
|
|
379
600
|
}) => ReactNode;
|
|
380
601
|
};
|
|
381
602
|
/**
|
|
382
|
-
*
|
|
383
|
-
*
|
|
603
|
+
* Props for {@link VectorToolbar.Tool}.
|
|
604
|
+
*
|
|
605
|
+
* Identical to {@link VectorToolDefinition} so any tool can be rendered as
|
|
606
|
+
* `<VectorToolbar.Tool {...def} />`. Use the pre-bound bindings (e.g. `<VectorToolbar.Hand />`)
|
|
607
|
+
* for the built-in tools and `<VectorToolbar.Tool />` for custom ones.
|
|
608
|
+
*/
|
|
609
|
+
type VectorToolbarToolProps = VectorToolDefinition & {
|
|
610
|
+
className?: string;
|
|
611
|
+
};
|
|
612
|
+
/** Props for {@link VectorToolbar.ToolLock}. */
|
|
613
|
+
type VectorToolbarToolLockProps = {
|
|
614
|
+
className?: string;
|
|
615
|
+
/** Render the trailing visual divider that separates the lock from the tools. @default true */
|
|
616
|
+
divider?: boolean;
|
|
617
|
+
};
|
|
618
|
+
/** Props for {@link VectorToolbar.Overflow}. */
|
|
619
|
+
type VectorToolbarOverflowProps = {
|
|
620
|
+
/** Tools rendered inside the dropdown (typically `<VectorToolbar.Tool />` items). */
|
|
621
|
+
children: ReactNode;
|
|
622
|
+
/** Accessible name for the overflow trigger. @default "More tools" */
|
|
623
|
+
ariaLabel?: string;
|
|
624
|
+
};
|
|
625
|
+
/**
|
|
626
|
+
* A single tool inside `<VectorToolbar>`. Use the pre-bound bindings for built-in tools
|
|
627
|
+
* (e.g. `<VectorToolbar.Hand />`) or this component for custom ones.
|
|
628
|
+
*
|
|
629
|
+
* Automatically adapts its layout based on whether it sits in the primary strip or inside
|
|
630
|
+
* an `<VectorToolbar.Overflow>` dropdown.
|
|
384
631
|
*
|
|
385
632
|
* @example
|
|
386
633
|
* ```tsx
|
|
387
|
-
*
|
|
388
|
-
*
|
|
634
|
+
* <VectorToolbar value={toolId} onChange={setToolId}>
|
|
635
|
+
* <VectorToolbar.Tool id="my-tool" label="Custom" icon={<MyIcon />} shortcutHint="C" />
|
|
636
|
+
* </VectorToolbar>
|
|
389
637
|
* ```
|
|
390
638
|
*/
|
|
391
|
-
declare function
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
639
|
+
declare function VectorToolbarTool(props: VectorToolbarToolProps): ReactNode;
|
|
640
|
+
/**
|
|
641
|
+
* Lock toggle button. When on, the active tool persists after each use instead of
|
|
642
|
+
* auto-reverting to the previous tool.
|
|
643
|
+
*/
|
|
644
|
+
declare function VectorToolbarToolLock({ className, divider, }?: VectorToolbarToolLockProps): react_jsx_runtime.JSX.Element;
|
|
645
|
+
/**
|
|
646
|
+
* Composable overflow dropdown. Children render inside a 3-column grid revealed when the user
|
|
647
|
+
* clicks the chevron trigger. The trigger highlights itself when its currently active child is selected.
|
|
648
|
+
*
|
|
649
|
+
* @example
|
|
650
|
+
* ```tsx
|
|
651
|
+
* <VectorToolbar value={toolId} onChange={setToolId}>
|
|
652
|
+
* <VectorToolbar.Hand />
|
|
653
|
+
* <VectorToolbar.Overflow>
|
|
654
|
+
* <VectorToolbar.Rect />
|
|
655
|
+
* <VectorToolbar.Ellipse />
|
|
656
|
+
* </VectorToolbar.Overflow>
|
|
657
|
+
* </VectorToolbar>
|
|
658
|
+
* ```
|
|
659
|
+
*/
|
|
660
|
+
declare function VectorToolbarOverflow({ children, ariaLabel, }: VectorToolbarOverflowProps): react_jsx_runtime.JSX.Element;
|
|
661
|
+
type ToolBinding = ((props?: {
|
|
398
662
|
className?: string;
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
663
|
+
}) => ReactNode) & {
|
|
664
|
+
toolId: string;
|
|
665
|
+
displayName: string;
|
|
666
|
+
};
|
|
667
|
+
declare const HandBinding: ToolBinding;
|
|
668
|
+
declare const SelectBinding: ToolBinding;
|
|
669
|
+
declare const RectBinding: ToolBinding;
|
|
670
|
+
declare const EllipseBinding: ToolBinding;
|
|
671
|
+
declare const LineBinding: ToolBinding;
|
|
672
|
+
declare const ArrowBinding: ToolBinding;
|
|
673
|
+
declare const DrawBinding: ToolBinding;
|
|
674
|
+
declare const MarkerBinding: ToolBinding;
|
|
675
|
+
declare const LaserBinding: ToolBinding;
|
|
676
|
+
declare const EraserBinding: ToolBinding;
|
|
677
|
+
declare const TextBinding: ToolBinding;
|
|
678
|
+
declare const ImageBinding: ToolBinding;
|
|
679
|
+
type VectorToolbarWithStatics = ((props: VectorToolbarProps) => ReactElement) & {
|
|
680
|
+
Tool: typeof VectorToolbarTool;
|
|
681
|
+
ToolLock: typeof VectorToolbarToolLock;
|
|
682
|
+
Overflow: typeof VectorToolbarOverflow;
|
|
683
|
+
Hand: typeof HandBinding;
|
|
684
|
+
Select: typeof SelectBinding;
|
|
685
|
+
Rect: typeof RectBinding;
|
|
686
|
+
Ellipse: typeof EllipseBinding;
|
|
687
|
+
Line: typeof LineBinding;
|
|
688
|
+
Arrow: typeof ArrowBinding;
|
|
689
|
+
Draw: typeof DrawBinding;
|
|
690
|
+
Marker: typeof MarkerBinding;
|
|
691
|
+
Laser: typeof LaserBinding;
|
|
692
|
+
Eraser: typeof EraserBinding;
|
|
693
|
+
Text: typeof TextBinding;
|
|
694
|
+
Image: typeof ImageBinding;
|
|
407
695
|
};
|
|
408
696
|
/**
|
|
409
|
-
*
|
|
410
|
-
*
|
|
411
|
-
*
|
|
697
|
+
* `VectorToolbar` is a function component with attached subcomponents
|
|
698
|
+
* (`.Tool`, `.ToolLock`, `.Overflow`, and one binding per default tool).
|
|
699
|
+
*
|
|
700
|
+
* The explicit type annotation is what makes the static properties survive
|
|
701
|
+
* `.d.ts` bundling — relying on TypeScript's expando-function inference loses
|
|
702
|
+
* them in tsup output.
|
|
412
703
|
*/
|
|
413
|
-
declare
|
|
704
|
+
declare const VectorToolbar: VectorToolbarWithStatics;
|
|
414
705
|
|
|
415
|
-
export { BoardComponentPosition, CanvasPlugin, type CreateLocalStoragePersistenceAdapterOptions, type CreateToolPluginOptions, DEFAULT_OVERFLOW_TOOL_IDS, DEFAULT_VECTOR_CANVAS_STORAGE_KEY, DEFAULT_VECTOR_TOOLS, IconArrow, IconDraw, IconEllipse, IconHand, IconImage, IconLaser, IconLine, IconRect, IconSelect, IconText, type IngestAssetFileError, type IngestAssetFilesToSceneItemsOptions, type IngestAssetFilesToSceneItemsResult, type IngestedAssetItemContext, ShapeContextMenu, type ShapeContextMenuProps, type UseVectorCanvasDocumentOptions, type UseVectorCanvasDocumentResult, VectorCanvasPersistenceAdapter, VectorCanvasRemoteAdapter, VectorToolDefinition, VectorToolbar, type VectorToolbarProps, type VectorToolbarRenderContext,
|
|
706
|
+
export { BoardComponentPosition, CanvasPlugin, type CreateLocalStoragePersistenceAdapterOptions, type CreateToolPluginOptions, DEFAULT_OVERFLOW_TOOL_IDS, DEFAULT_VECTOR_CANVAS_STORAGE_KEY, DEFAULT_VECTOR_TOOLS, IconArrow, IconDraw, IconEllipse, IconHand, IconImage, IconLaser, IconLine, IconRect, IconSelect, IconText, ImagesMenu, type ImagesMenuLabels, type ImagesMenuProps, type IngestAssetFileError, type IngestAssetFilesToSceneItemsOptions, type IngestAssetFilesToSceneItemsResult, type IngestedAssetItemContext, NavMenu, type NavMenuMinimapProps, type NavMenuProps, type NavMenuUndoRedoProps, type NavMenuZoomControlsProps, ShapeContextMenu, type ShapeContextMenuProps, type UseVectorCanvasDocumentOptions, type UseVectorCanvasDocumentResult, VectorCanvas, VectorCanvasBody, VectorCanvasHeader, VectorCanvasMain, VectorCanvasPersistenceAdapter, VectorCanvasRemoteAdapter, VectorCanvasRoot, type VectorCanvasSlotProps, type VectorCanvasSpaceProps, VectorCanvasToolbar, type VectorCanvasToolbarProps, VectorCanvasViewportSurface, VectorSelectionInspector, VectorToolDefinition, VectorToolbar, type VectorToolbarOverflowProps, type VectorToolbarProps, type VectorToolbarRenderContext, type VectorToolbarToolLockProps, type VectorToolbarToolProps, VectorViewportAssetKind, VectorViewportAssetStore, createIndexedDbPersistenceAdapter, createLocalStoragePersistenceAdapter, createNoopPersistenceAdapter, createToolPlugin, cursorForVectorToolId, ingestAssetFilesToSceneItems, useVectorCanvasDocument };
|