canvu-react 0.3.5
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/LICENSE +21 -0
- package/README.md +156 -0
- package/dist/camera-BwQjm5oh.d.cts +50 -0
- package/dist/camera-KwCYYPhm.d.ts +50 -0
- package/dist/chatbot.cjs +221 -0
- package/dist/chatbot.cjs.map +1 -0
- package/dist/chatbot.d.cts +36 -0
- package/dist/chatbot.d.ts +36 -0
- package/dist/chatbot.js +218 -0
- package/dist/chatbot.js.map +1 -0
- package/dist/index.cjs +1920 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +276 -0
- package/dist/index.d.ts +276 -0
- package/dist/index.js +1867 -0
- package/dist/index.js.map +1 -0
- package/dist/native.cjs +2572 -0
- package/dist/native.cjs.map +1 -0
- package/dist/native.d.cts +217 -0
- package/dist/native.d.ts +217 -0
- package/dist/native.js +2562 -0
- package/dist/native.js.map +1 -0
- package/dist/react.cjs +8540 -0
- package/dist/react.cjs.map +1 -0
- package/dist/react.d.cts +481 -0
- package/dist/react.d.ts +481 -0
- package/dist/react.js +8492 -0
- package/dist/react.js.map +1 -0
- package/dist/realtime.cjs +2338 -0
- package/dist/realtime.cjs.map +1 -0
- package/dist/realtime.d.cts +309 -0
- package/dist/realtime.d.ts +309 -0
- package/dist/realtime.js +2317 -0
- package/dist/realtime.js.map +1 -0
- package/dist/shape-builders-DTYvub8W.d.ts +93 -0
- package/dist/shape-builders-DxPoOecg.d.cts +93 -0
- package/dist/tldraw.cjs +1948 -0
- package/dist/tldraw.cjs.map +1 -0
- package/dist/tldraw.d.cts +98 -0
- package/dist/tldraw.d.ts +98 -0
- package/dist/tldraw.js +1941 -0
- package/dist/tldraw.js.map +1 -0
- package/dist/types--ALu1mF-.d.ts +356 -0
- package/dist/types-B58i5k-u.d.cts +35 -0
- package/dist/types-CB0TZZuk.d.cts +157 -0
- package/dist/types-CB0TZZuk.d.ts +157 -0
- package/dist/types-D1ftVsOQ.d.cts +356 -0
- package/dist/types-DgEArHkA.d.ts +35 -0
- package/package.json +103 -0
package/dist/react.d.ts
ADDED
|
@@ -0,0 +1,481 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { CSSProperties, ReactNode, SVGProps } from 'react';
|
|
3
|
+
import { C as Camera2D } from './camera-KwCYYPhm.js';
|
|
4
|
+
import { S as StrokeStyle } from './shape-builders-DTYvub8W.js';
|
|
5
|
+
import { V as VectorSceneItem } from './types-CB0TZZuk.js';
|
|
6
|
+
import { V as VectorToolDefinition, C as CanvasPlugin } from './types--ALu1mF-.js';
|
|
7
|
+
export { a as CanvasPluginComponentProps, b as CanvasPluginContribution, c as CanvasPluginItemsChangeMiddlewareContext, d as CanvasPluginRenderContext, e as CanvuPluginContext, f as CanvuPluginContextValue, g as CanvuPluginViewportSnapshot, h as CustomShapePlacementOptions, P as PlacementPreview, i as VectorViewport, j as VectorViewportHandle, k as VectorViewportProps, W as WorldPointerDownDetail, l as createCanvuPlugin, u as useCanvuDocumentContext, m as useCanvuPluginContext, n as useCanvuPluginContribution, o as useCanvuResolvedTools, p as useCanvuViewportContext } from './types--ALu1mF-.js';
|
|
8
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
9
|
+
import { V as VectorCanvasPersistenceAdapter, a as VectorCanvasRemoteAdapter } from './types-DgEArHkA.js';
|
|
10
|
+
export { b as VectorCanvasSnapshot } from './types-DgEArHkA.js';
|
|
11
|
+
|
|
12
|
+
type CanvuChromeActiveToolStyle = StrokeStyle & {
|
|
13
|
+
toolKind: "draw" | "marker";
|
|
14
|
+
label?: string;
|
|
15
|
+
};
|
|
16
|
+
type CanvuChromeSelectionStyleChange = (patch: {
|
|
17
|
+
stroke: string;
|
|
18
|
+
strokeWidth: number;
|
|
19
|
+
strokeOpacity?: number;
|
|
20
|
+
}) => void;
|
|
21
|
+
/**
|
|
22
|
+
* Runtime data and handlers shared with floating board chrome (e.g. {@link NavMenu},
|
|
23
|
+
* {@link VectorSelectionInspector}). Populated by `VectorViewport` and consumed via
|
|
24
|
+
* {@link useCanvuChromeContext}.
|
|
25
|
+
*/
|
|
26
|
+
type CanvuChromeContextValue = {
|
|
27
|
+
camera: Camera2D | null;
|
|
28
|
+
viewportWidth: number;
|
|
29
|
+
viewportHeight: number;
|
|
30
|
+
items: readonly VectorSceneItem[];
|
|
31
|
+
selectedItems: readonly VectorSceneItem[];
|
|
32
|
+
interactive: boolean;
|
|
33
|
+
canEditSelection: boolean;
|
|
34
|
+
activeToolStyle: CanvuChromeActiveToolStyle | null;
|
|
35
|
+
onSelectionStyleChange: CanvuChromeSelectionStyleChange | null;
|
|
36
|
+
zoomPercent: number;
|
|
37
|
+
onZoomIn: () => void;
|
|
38
|
+
onZoomOut: () => void;
|
|
39
|
+
onUndo: () => void;
|
|
40
|
+
onRedo: () => void;
|
|
41
|
+
canUndo: boolean;
|
|
42
|
+
canRedo: boolean;
|
|
43
|
+
onRequestRender: () => void;
|
|
44
|
+
};
|
|
45
|
+
declare const CanvuChromeContext: react.Context<CanvuChromeContextValue | null>;
|
|
46
|
+
/** Returns the current chrome context or `null` when used outside `VectorViewport`. */
|
|
47
|
+
declare function useCanvuChromeContext(): CanvuChromeContextValue | null;
|
|
48
|
+
|
|
49
|
+
type ActiveToolStyle = StrokeStyle & {
|
|
50
|
+
toolKind: "draw" | "marker";
|
|
51
|
+
label?: string;
|
|
52
|
+
};
|
|
53
|
+
/**
|
|
54
|
+
* Color + stroke-width inspector for the current selection (or active drawing tool style).
|
|
55
|
+
* When rendered inside `VectorViewport` (e.g. via the `selectionInspector` slot), `items`,
|
|
56
|
+
* `activeToolStyle`, and `onChange` default to values from {@link CanvuChromeContext};
|
|
57
|
+
* pass any prop to override.
|
|
58
|
+
*/
|
|
59
|
+
type VectorSelectionInspectorProps = {
|
|
60
|
+
/** Selected items that support stroke/fill styling (caller may filter). */
|
|
61
|
+
items?: readonly VectorSceneItem[];
|
|
62
|
+
/** Optional active tool style shown even without a selection. */
|
|
63
|
+
activeToolStyle?: ActiveToolStyle | null;
|
|
64
|
+
/** Apply stroke / width / opacity to every item in `items`. */
|
|
65
|
+
onChange?: CanvuChromeSelectionStyleChange;
|
|
66
|
+
/** Anchor preset. Defaults to top-left. */
|
|
67
|
+
position?: BoardComponentPosition;
|
|
68
|
+
/** Distance (px) from anchored edges. @default 12 */
|
|
69
|
+
inset?: number;
|
|
70
|
+
/** @default 24 */
|
|
71
|
+
zIndex?: number;
|
|
72
|
+
className?: string;
|
|
73
|
+
/** Merged on top of position-derived styles for custom tweaks. */
|
|
74
|
+
style?: CSSProperties;
|
|
75
|
+
};
|
|
76
|
+
/**
|
|
77
|
+
* Color + stroke width for the current selection. Supports multiple selected shapes: one change applies to all.
|
|
78
|
+
*/
|
|
79
|
+
declare function VectorSelectionInspector({ items: itemsProp, activeToolStyle: activeToolStyleProp, onChange: onChangeProp, position, inset, zIndex, className, style, }: VectorSelectionInspectorProps): react_jsx_runtime.JSX.Element | null;
|
|
80
|
+
|
|
81
|
+
type VectorCanvasSlotProps = {
|
|
82
|
+
children?: ReactNode;
|
|
83
|
+
className?: string;
|
|
84
|
+
style?: CSSProperties;
|
|
85
|
+
};
|
|
86
|
+
/**
|
|
87
|
+
* Anchor presets for floating board components.
|
|
88
|
+
*
|
|
89
|
+
* Names are `<edge>-<position-along-edge>`:
|
|
90
|
+
* - `top-*` / `bottom-*` anchor to the top or bottom edge.
|
|
91
|
+
* - `left-*` / `right-*` anchor to the left or right edge.
|
|
92
|
+
*
|
|
93
|
+
* Corner aliases are equivalent (e.g. `top-left` and `left-top` resolve to the same anchor),
|
|
94
|
+
* but kept distinct so callers can pick whichever reads best in their layout (a vertical
|
|
95
|
+
* strip might prefer `left-top`; a horizontal strip prefers `top-left`).
|
|
96
|
+
*/
|
|
97
|
+
type BoardComponentPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | "left-top" | "left-center" | "left-bottom" | "right-top" | "right-center" | "right-bottom" | "center" | "fill";
|
|
98
|
+
/** @deprecated Use {@link BoardComponentPosition}. */
|
|
99
|
+
type VectorCanvasSpacePosition = BoardComponentPosition;
|
|
100
|
+
/**
|
|
101
|
+
* Compute absolute-position CSS for a board component anchor preset.
|
|
102
|
+
* Returns `position`, `zIndex`, and the relevant edge offsets / transforms.
|
|
103
|
+
* Callers merge the result with their own style/className overrides.
|
|
104
|
+
*/
|
|
105
|
+
declare function getBoardPositionStyle(position: BoardComponentPosition, inset?: number, zIndex?: number): CSSProperties;
|
|
106
|
+
type VectorCanvasSpaceProps = VectorCanvasSlotProps & {
|
|
107
|
+
position?: BoardComponentPosition;
|
|
108
|
+
/** @default 12 */
|
|
109
|
+
inset?: number;
|
|
110
|
+
/** @default 40 */
|
|
111
|
+
zIndex?: number;
|
|
112
|
+
/** Pointer events value on the content wrapper. @default "auto" */
|
|
113
|
+
contentPointerEvents?: CSSProperties["pointerEvents"];
|
|
114
|
+
};
|
|
115
|
+
/**
|
|
116
|
+
* Full-viewport column shell for a vector canvas (header + body with stage).
|
|
117
|
+
* Use with {@link VectorCanvasBody}, {@link VectorCanvasMain}. Pass `toolbar` on {@link VectorViewport};
|
|
118
|
+
* Compose the floating tool strip with {@link VectorCanvasToolbar} around {@link VectorToolbar} (see example below).
|
|
119
|
+
*/
|
|
120
|
+
declare function VectorCanvasRoot({ children, className, style, }: VectorCanvasSlotProps): react_jsx_runtime.JSX.Element;
|
|
121
|
+
/** Optional top chrome (title, hints, toggles). */
|
|
122
|
+
declare function VectorCanvasHeader({ children, className, style, }: VectorCanvasSlotProps): react_jsx_runtime.JSX.Element;
|
|
123
|
+
/** Fills remaining space below the header (typically one {@link VectorCanvasMain}). */
|
|
124
|
+
declare function VectorCanvasBody({ children, className, style, }: VectorCanvasSlotProps): react_jsx_runtime.JSX.Element;
|
|
125
|
+
/**
|
|
126
|
+
* Stretch area for {@link VectorViewport} (or any child that should fill the stage).
|
|
127
|
+
*/
|
|
128
|
+
declare function VectorCanvasMain({ children, className, style, }: VectorCanvasSlotProps): react_jsx_runtime.JSX.Element;
|
|
129
|
+
/**
|
|
130
|
+
* Flex child that fills {@link VectorCanvasMain} and gives {@link VectorViewport} a bounded height
|
|
131
|
+
* (white surface by default). Omit if you set the background on `Main` or the viewport yourself.
|
|
132
|
+
*/
|
|
133
|
+
declare function VectorCanvasViewportSurface({ children, className, style, }: VectorCanvasSlotProps): react_jsx_runtime.JSX.Element;
|
|
134
|
+
type VectorCanvasToolbarProps = {
|
|
135
|
+
children?: ReactNode;
|
|
136
|
+
className?: string;
|
|
137
|
+
style?: CSSProperties;
|
|
138
|
+
/** Anchor preset. @default "bottom-center" */
|
|
139
|
+
position?: BoardComponentPosition;
|
|
140
|
+
/** Distance (px) from the anchored edge(s). @default 12 */
|
|
141
|
+
inset?: number;
|
|
142
|
+
/** @default 30 */
|
|
143
|
+
zIndex?: number;
|
|
144
|
+
};
|
|
145
|
+
/**
|
|
146
|
+
* Floating strip anchor for {@link VectorToolbar} or custom controls. Defaults to bottom-center.
|
|
147
|
+
* Renders `pointer-events: none` on the shell and `auto` on children so the canvas keeps receiving hits outside the bar.
|
|
148
|
+
* Pass as the `toolbar` prop of `VectorViewport`; pick a different `position` for top / side anchoring.
|
|
149
|
+
* Z-index defaults to 30 so the strip stays above zoom controls.
|
|
150
|
+
*/
|
|
151
|
+
declare function VectorCanvasToolbar({ children, className, style, position, inset, zIndex, }: VectorCanvasToolbarProps): react_jsx_runtime.JSX.Element;
|
|
152
|
+
/**
|
|
153
|
+
* Absolute canvas-aligned space for floating UI such as chats, rosters, inspectors, and overlays.
|
|
154
|
+
* Use this instead of ad-hoc wrapper divs or plugin hosts when a feature can be expressed as React nodes.
|
|
155
|
+
*/
|
|
156
|
+
declare function VectorCanvasSpace({ children, className, style, position, inset, zIndex, contentPointerEvents, }: VectorCanvasSpaceProps): react_jsx_runtime.JSX.Element;
|
|
157
|
+
/**
|
|
158
|
+
* Namespaced layout primitives for composing a vector canvas shell without ad-hoc wrapper divs.
|
|
159
|
+
*
|
|
160
|
+
* @example
|
|
161
|
+
* ```tsx
|
|
162
|
+
* <VectorCanvas.Root>
|
|
163
|
+
* <VectorCanvas.Header>…</VectorCanvas.Header>
|
|
164
|
+
* <VectorCanvas.Body>
|
|
165
|
+
* <VectorCanvas.Main>
|
|
166
|
+
* <VectorCanvas.ViewportSurface>
|
|
167
|
+
* <VectorViewport
|
|
168
|
+
* toolbar={
|
|
169
|
+
* <VectorCanvas.Toolbar>
|
|
170
|
+
* <VectorToolbar … />
|
|
171
|
+
* </VectorCanvas.Toolbar>
|
|
172
|
+
* }
|
|
173
|
+
* …
|
|
174
|
+
* />
|
|
175
|
+
* </VectorCanvas.ViewportSurface>
|
|
176
|
+
* </VectorCanvas.Main>
|
|
177
|
+
* </VectorCanvas.Body>
|
|
178
|
+
* </VectorCanvas.Root>
|
|
179
|
+
* ```
|
|
180
|
+
*/
|
|
181
|
+
declare const VectorCanvas: {
|
|
182
|
+
readonly Root: typeof VectorCanvasRoot;
|
|
183
|
+
readonly Header: typeof VectorCanvasHeader;
|
|
184
|
+
readonly Body: typeof VectorCanvasBody;
|
|
185
|
+
readonly Main: typeof VectorCanvasMain;
|
|
186
|
+
readonly ViewportSurface: typeof VectorCanvasViewportSurface;
|
|
187
|
+
readonly Toolbar: typeof VectorCanvasToolbar;
|
|
188
|
+
readonly Space: typeof VectorCanvasSpace;
|
|
189
|
+
readonly NavMenu: typeof NavMenu;
|
|
190
|
+
readonly SelectionInspector: typeof VectorSelectionInspector;
|
|
191
|
+
};
|
|
192
|
+
|
|
193
|
+
/**
|
|
194
|
+
* Floating bottom-bar combining zoom controls, undo/redo, and an expandable minimap.
|
|
195
|
+
* When rendered inside `VectorViewport` (e.g. via the `navMenu` slot), data props default
|
|
196
|
+
* to values from {@link CanvuChromeContext}; pass any prop to override.
|
|
197
|
+
*/
|
|
198
|
+
type NavMenuProps = {
|
|
199
|
+
camera?: Camera2D;
|
|
200
|
+
viewportWidth?: number;
|
|
201
|
+
viewportHeight?: number;
|
|
202
|
+
items?: readonly VectorSceneItem[];
|
|
203
|
+
zoomPercent?: number;
|
|
204
|
+
onZoomIn?: () => void;
|
|
205
|
+
onZoomOut?: () => void;
|
|
206
|
+
onUndo?: () => void;
|
|
207
|
+
onRedo?: () => void;
|
|
208
|
+
canUndo?: boolean;
|
|
209
|
+
canRedo?: boolean;
|
|
210
|
+
onRequestRender?: () => void;
|
|
211
|
+
/** Anchor preset. Defaults to bottom-left. */
|
|
212
|
+
position?: BoardComponentPosition;
|
|
213
|
+
/** Distance (px) from anchored edges. @default 12 */
|
|
214
|
+
inset?: number;
|
|
215
|
+
/** @default 23 */
|
|
216
|
+
zIndex?: number;
|
|
217
|
+
className?: string;
|
|
218
|
+
/** Merged on top of position-derived styles for custom tweaks. */
|
|
219
|
+
style?: CSSProperties;
|
|
220
|
+
};
|
|
221
|
+
declare function NavMenu({ camera: cameraProp, viewportWidth: viewportWidthProp, viewportHeight: viewportHeightProp, items: itemsProp, zoomPercent: zoomPercentProp, onZoomIn: onZoomInProp, onZoomOut: onZoomOutProp, onUndo: onUndoProp, onRedo: onRedoProp, canUndo: canUndoProp, canRedo: canRedoProp, onRequestRender: onRequestRenderProp, position, inset, zIndex, className, style, }: NavMenuProps): react_jsx_runtime.JSX.Element;
|
|
222
|
+
|
|
223
|
+
/**
|
|
224
|
+
* Persistence adapter that stores the document JSON in IndexedDB and manages
|
|
225
|
+
* image blobs separately. Images are stored at original resolution in a dedicated
|
|
226
|
+
* `images` object store via {@link IndexedDbImageStore}, keeping the document JSON
|
|
227
|
+
* lightweight and enabling full-resolution zoom without blur.
|
|
228
|
+
*
|
|
229
|
+
* On load, blob URLs are created from the stored blobs and `childrenSvg` is
|
|
230
|
+
* rebuilt for each image item. Blob URLs are session-scoped and revoked on
|
|
231
|
+
* subsequent saves / cleanup.
|
|
232
|
+
*/
|
|
233
|
+
declare function createIndexedDbPersistenceAdapter(options?: {
|
|
234
|
+
dbName?: string;
|
|
235
|
+
}): VectorCanvasPersistenceAdapter;
|
|
236
|
+
|
|
237
|
+
declare const DEFAULT_VECTOR_CANVAS_STORAGE_KEY = "trazo.vector-canvas.v1";
|
|
238
|
+
type CreateLocalStoragePersistenceAdapterOptions = {
|
|
239
|
+
/** Defaults to {@link DEFAULT_VECTOR_CANVAS_STORAGE_KEY} */
|
|
240
|
+
key?: string;
|
|
241
|
+
/** Defaults to `window.localStorage` when `typeof window !== "undefined"` */
|
|
242
|
+
storage?: Storage | null;
|
|
243
|
+
};
|
|
244
|
+
/**
|
|
245
|
+
* Default persistence: `JSON.stringify` snapshot under a single localStorage key.
|
|
246
|
+
* Pass the same `key` in every session to restore the board.
|
|
247
|
+
*/
|
|
248
|
+
declare function createLocalStoragePersistenceAdapter(options?: CreateLocalStoragePersistenceAdapterOptions): VectorCanvasPersistenceAdapter;
|
|
249
|
+
declare function createNoopPersistenceAdapter(): VectorCanvasPersistenceAdapter;
|
|
250
|
+
|
|
251
|
+
type UseVectorCanvasDocumentOptions = {
|
|
252
|
+
/**
|
|
253
|
+
* Storage key for the built-in localStorage adapter (ignored if `persistence` is set).
|
|
254
|
+
* @default {@link DEFAULT_VECTOR_CANVAS_STORAGE_KEY}
|
|
255
|
+
*/
|
|
256
|
+
persistenceKey?: string;
|
|
257
|
+
/**
|
|
258
|
+
* Custom persistence (Postgres via API, IndexedDB, …).
|
|
259
|
+
* - `undefined` → default **localStorage** adapter with `persistenceKey`
|
|
260
|
+
* - `false` → no persistence (memory only)
|
|
261
|
+
*/
|
|
262
|
+
persistence?: VectorCanvasPersistenceAdapter | false;
|
|
263
|
+
/** Debounce before writing to storage after edits. @default 400 */
|
|
264
|
+
debounceMs?: number;
|
|
265
|
+
/**
|
|
266
|
+
* Optional: WebSocket / server sync — `subscribe` receives remote `items`;
|
|
267
|
+
* `send` is called after local edits (after debounce) so you can push upstream.
|
|
268
|
+
*/
|
|
269
|
+
remote?: VectorCanvasRemoteAdapter;
|
|
270
|
+
};
|
|
271
|
+
type UseVectorCanvasDocumentResult = {
|
|
272
|
+
items: VectorSceneItem[];
|
|
273
|
+
/** Pass to `VectorViewport` `onItemsChange` */
|
|
274
|
+
onItemsChange: (next: VectorSceneItem[]) => void;
|
|
275
|
+
/** Same as `onItemsChange`; included for flexibility */
|
|
276
|
+
setItems: (next: VectorSceneItem[]) => void;
|
|
277
|
+
/** `false` until the first `load()` finished (avoid SSR flash / empty overwrite) */
|
|
278
|
+
isHydrated: boolean;
|
|
279
|
+
/** Clear persisted snapshot (and reset state to `[]`) */
|
|
280
|
+
clearPersistedDocument: () => void;
|
|
281
|
+
};
|
|
282
|
+
/**
|
|
283
|
+
* Default **localStorage** persistence + optional **remote** sync hook.
|
|
284
|
+
*
|
|
285
|
+
* @example
|
|
286
|
+
* ```tsx
|
|
287
|
+
* const doc = useVectorCanvasDocument();
|
|
288
|
+
* return (
|
|
289
|
+
* <VectorViewport
|
|
290
|
+
* items={doc.items}
|
|
291
|
+
* onItemsChange={doc.onItemsChange}
|
|
292
|
+
* interactive
|
|
293
|
+
* ariaLabel="Board"
|
|
294
|
+
* />
|
|
295
|
+
* );
|
|
296
|
+
* ```
|
|
297
|
+
*
|
|
298
|
+
* @example Custom API
|
|
299
|
+
* ```ts
|
|
300
|
+
* const persistence = useMemo(() => ({
|
|
301
|
+
* load: () => fetch("/api/board").then((r) => r.json()),
|
|
302
|
+
* save: (snap) => fetch("/api/board", { method: "PUT", body: JSON.stringify(snap) }),
|
|
303
|
+
* }), []);
|
|
304
|
+
* useVectorCanvasDocument({ persistence });
|
|
305
|
+
* ```
|
|
306
|
+
*/
|
|
307
|
+
declare function useVectorCanvasDocument(options?: UseVectorCanvasDocumentOptions): UseVectorCanvasDocumentResult;
|
|
308
|
+
|
|
309
|
+
/**
|
|
310
|
+
* CSS `cursor` for the active toolbar tool id (see default vector tools).
|
|
311
|
+
* SVG cursors matching Lucide toolbar glyphs are used for freehand tools only.
|
|
312
|
+
* Shape tools keep the old native crosshair cursor.
|
|
313
|
+
*/
|
|
314
|
+
declare function cursorForVectorToolId(toolId: string): string;
|
|
315
|
+
|
|
316
|
+
type CreateToolPluginOptions = VectorToolDefinition & {
|
|
317
|
+
/**
|
|
318
|
+
* Optional custom placement factory for tools that create scene items directly.
|
|
319
|
+
*
|
|
320
|
+
* When provided, the resulting plugin contributes a `customPlacement` entry for this tool id.
|
|
321
|
+
*/
|
|
322
|
+
createItem?: (args: {
|
|
323
|
+
id: string;
|
|
324
|
+
bounds: {
|
|
325
|
+
x: number;
|
|
326
|
+
y: number;
|
|
327
|
+
width: number;
|
|
328
|
+
height: number;
|
|
329
|
+
};
|
|
330
|
+
}) => VectorSceneItem;
|
|
331
|
+
/**
|
|
332
|
+
* Optional tool list transform applied after this tool is merged.
|
|
333
|
+
*
|
|
334
|
+
* Use this when you need custom ordering or to replace an existing tool position.
|
|
335
|
+
*/
|
|
336
|
+
toolTransform?: (tools: VectorToolDefinition[]) => VectorToolDefinition[];
|
|
337
|
+
};
|
|
338
|
+
/**
|
|
339
|
+
* Creates a lightweight plugin that contributes a single tool to `VectorViewport`.
|
|
340
|
+
*
|
|
341
|
+
* Use this for isolated tools such as custom shapes, review pins, or lightweight creation flows.
|
|
342
|
+
* For larger features that also need presence, panels, or network integration, prefer a dedicated
|
|
343
|
+
* feature plugin such as `realtimeCollaborationPlugin(...)`.
|
|
344
|
+
*/
|
|
345
|
+
declare function createToolPlugin(options: CreateToolPluginOptions): CanvasPlugin;
|
|
346
|
+
|
|
347
|
+
type ShapeContextMenuProps = {
|
|
348
|
+
/** Viewport client coordinates (from `clientX` / `clientY`). */
|
|
349
|
+
x: number;
|
|
350
|
+
y: number;
|
|
351
|
+
/** When true, all selected items are locked — action is “unlock”. */
|
|
352
|
+
allSelectedLocked: boolean;
|
|
353
|
+
onClose: () => void;
|
|
354
|
+
onToggleLock: () => void;
|
|
355
|
+
onCut: () => void;
|
|
356
|
+
onCopy: () => void;
|
|
357
|
+
onBringToFront: () => void;
|
|
358
|
+
onBringForward: () => void;
|
|
359
|
+
onSendBackward: () => void;
|
|
360
|
+
onSendToBack: () => void;
|
|
361
|
+
onDuplicate: () => void;
|
|
362
|
+
onDelete: () => void;
|
|
363
|
+
};
|
|
364
|
+
/**
|
|
365
|
+
* Floating menu for shape actions (reorder, clipboard, lock, delete).
|
|
366
|
+
* Renders in a portal and closes on Escape or outside click.
|
|
367
|
+
*/
|
|
368
|
+
declare function ShapeContextMenu({ x, y, allSelectedLocked, onClose, onToggleLock, onCut, onCopy, onBringToFront, onBringForward, onSendBackward, onSendToBack, onDuplicate, onDelete, }: ShapeContextMenuProps): react.ReactPortal | null;
|
|
369
|
+
|
|
370
|
+
/**
|
|
371
|
+
* Tool ids shown in the overflow menu at the end of the default toolbar (horizontal layout).
|
|
372
|
+
* Order: shapes, marker, laser, image.
|
|
373
|
+
*/
|
|
374
|
+
declare const DEFAULT_OVERFLOW_TOOL_IDS: readonly ["rect", "ellipse", "line", "marker", "laser", "image"];
|
|
375
|
+
/**
|
|
376
|
+
* Opinionated default tool strip using [Lucide](https://lucide.dev) icons.
|
|
377
|
+
* Pass a subset or your own list via {@link VectorToolbarProps.tools}.
|
|
378
|
+
*/
|
|
379
|
+
declare const DEFAULT_VECTOR_TOOLS: VectorToolDefinition[];
|
|
380
|
+
|
|
381
|
+
type IconProps = SVGProps<SVGSVGElement>;
|
|
382
|
+
declare function IconHand(props: IconProps): react_jsx_runtime.JSX.Element;
|
|
383
|
+
declare function IconSelect(props: IconProps): react_jsx_runtime.JSX.Element;
|
|
384
|
+
declare function IconRect(props: IconProps): react_jsx_runtime.JSX.Element;
|
|
385
|
+
declare function IconEllipse(props: IconProps): react_jsx_runtime.JSX.Element;
|
|
386
|
+
declare function IconLine(props: IconProps): react_jsx_runtime.JSX.Element;
|
|
387
|
+
declare function IconArrow(props: IconProps): react_jsx_runtime.JSX.Element;
|
|
388
|
+
declare function IconDraw(props: IconProps): react_jsx_runtime.JSX.Element;
|
|
389
|
+
declare function IconText(props: IconProps): react_jsx_runtime.JSX.Element;
|
|
390
|
+
declare function IconImage(props: IconProps): react_jsx_runtime.JSX.Element;
|
|
391
|
+
declare function IconLaser(props: IconProps): react_jsx_runtime.JSX.Element;
|
|
392
|
+
|
|
393
|
+
type VectorToolbarRenderContext = {
|
|
394
|
+
tools: VectorToolDefinition[];
|
|
395
|
+
selectedId: string;
|
|
396
|
+
selectTool: (id: string) => void;
|
|
397
|
+
toolLocked: boolean;
|
|
398
|
+
setToolLocked: (locked: boolean) => void;
|
|
399
|
+
};
|
|
400
|
+
type VectorToolbarProps = {
|
|
401
|
+
/** Controlled selection. */
|
|
402
|
+
value: string;
|
|
403
|
+
onChange: (toolId: string) => void;
|
|
404
|
+
/** Defaults to {@link DEFAULT_VECTOR_TOOLS}. */
|
|
405
|
+
tools?: VectorToolDefinition[];
|
|
406
|
+
/**
|
|
407
|
+
* Tool ids placed in the overflow menu at the end of the toolbar (horizontal) or bottom (vertical).
|
|
408
|
+
* Defaults to {@link DEFAULT_OVERFLOW_TOOL_IDS}. Pass an empty array to show every tool in the main strip.
|
|
409
|
+
*/
|
|
410
|
+
overflowToolIds?: readonly string[];
|
|
411
|
+
/** Accessible name for the overflow trigger (menu button). Default: `"More tools"`. */
|
|
412
|
+
overflowMenuAriaLabel?: string;
|
|
413
|
+
/** Accessible name for the toolbar landmark. */
|
|
414
|
+
"aria-label"?: string;
|
|
415
|
+
className?: string;
|
|
416
|
+
/** Layout direction. */
|
|
417
|
+
orientation?: "horizontal" | "vertical";
|
|
418
|
+
/** Optional style for the outer `role="toolbar"` element. */
|
|
419
|
+
style?: CSSProperties;
|
|
420
|
+
/** Class names applied to every tool button. */
|
|
421
|
+
buttonClassName?: string;
|
|
422
|
+
/** Extra class names when that tool is selected. */
|
|
423
|
+
activeButtonClassName?: string;
|
|
424
|
+
/** Shows a lock toggle that keeps current tool active after use. */
|
|
425
|
+
showToolLockToggle?: boolean;
|
|
426
|
+
/** Controlled lock state for tool persistence. */
|
|
427
|
+
toolLocked?: boolean;
|
|
428
|
+
/** Called when lock state changes. */
|
|
429
|
+
onToolLockedChange?: (locked: boolean) => void;
|
|
430
|
+
/** `compact` = icon + tooltip only; `comfortable` = small caption under the icon. */
|
|
431
|
+
density?: "compact" | "comfortable";
|
|
432
|
+
/**
|
|
433
|
+
* Full control: render your own toolbar using the same tool list and selection API.
|
|
434
|
+
* When set, default buttons are not rendered.
|
|
435
|
+
*/
|
|
436
|
+
children?: (ctx: VectorToolbarRenderContext) => ReactNode;
|
|
437
|
+
/**
|
|
438
|
+
* Partial customization: render the content of each tool button (icon + label layout).
|
|
439
|
+
* Default: icon with optional label below on narrow toolbars, or icon-only if `icon` is set.
|
|
440
|
+
*/
|
|
441
|
+
renderToolButton?: (props: {
|
|
442
|
+
tool: VectorToolDefinition;
|
|
443
|
+
selected: boolean;
|
|
444
|
+
onSelect: () => void;
|
|
445
|
+
}) => ReactNode;
|
|
446
|
+
};
|
|
447
|
+
/**
|
|
448
|
+
* Default floating-style toolbar for choosing vector tools (hand, shapes, draw, marker, text, …).
|
|
449
|
+
* Supply your own `tools` array or `children` render prop for full customization.
|
|
450
|
+
*
|
|
451
|
+
* @example
|
|
452
|
+
* ```tsx
|
|
453
|
+
* const [tool, setTool] = useState("hand");
|
|
454
|
+
* <VectorToolbar value={tool} onChange={setTool} aria-label="Canvas tools" />
|
|
455
|
+
* ```
|
|
456
|
+
*/
|
|
457
|
+
declare function VectorToolbar({ value, onChange, tools, overflowToolIds, overflowMenuAriaLabel, "aria-label": ariaLabel, className, orientation, style, buttonClassName, activeButtonClassName, showToolLockToggle, toolLocked, onToolLockedChange, density, children, renderToolButton, }: VectorToolbarProps): react_jsx_runtime.JSX.Element;
|
|
458
|
+
|
|
459
|
+
type ViewportZoomControlsProps = {
|
|
460
|
+
/** Current zoom for display, e.g. from `Math.round(camera.zoom * 100)`. */
|
|
461
|
+
zoomPercent: number;
|
|
462
|
+
onZoomIn: () => void;
|
|
463
|
+
onZoomOut: () => void;
|
|
464
|
+
className?: string;
|
|
465
|
+
/** Anchor preset. Pass to relocate the floating control. */
|
|
466
|
+
position?: BoardComponentPosition;
|
|
467
|
+
/** Distance (px) from anchored edges. @default 12 */
|
|
468
|
+
inset?: number;
|
|
469
|
+
/** @default 22 */
|
|
470
|
+
zIndex?: number;
|
|
471
|
+
/** Merged on top of position-derived styles for custom tweaks. */
|
|
472
|
+
style?: CSSProperties;
|
|
473
|
+
};
|
|
474
|
+
/**
|
|
475
|
+
* Floating zoom +/- controls. Defaults to the bottom-left, above the minimap.
|
|
476
|
+
* Place inside the viewport root (position relative). Pass `position` for any of the
|
|
477
|
+
* {@link BoardComponentPosition} presets, or `className`/`style` to fully customize.
|
|
478
|
+
*/
|
|
479
|
+
declare function ViewportZoomControls({ zoomPercent, onZoomIn, onZoomOut, className, position, inset, zIndex, style, }: ViewportZoomControlsProps): react_jsx_runtime.JSX.Element;
|
|
480
|
+
|
|
481
|
+
export { type BoardComponentPosition, CanvasPlugin, type CanvuChromeActiveToolStyle, CanvuChromeContext, type CanvuChromeContextValue, type CanvuChromeSelectionStyleChange, 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, NavMenu, type NavMenuProps, ShapeContextMenu, type ShapeContextMenuProps, type UseVectorCanvasDocumentOptions, type UseVectorCanvasDocumentResult, VectorCanvas, VectorCanvasBody, VectorCanvasHeader, VectorCanvasMain, VectorCanvasPersistenceAdapter, VectorCanvasRemoteAdapter, VectorCanvasRoot, type VectorCanvasSlotProps, type VectorCanvasSpacePosition, type VectorCanvasSpaceProps, VectorCanvasToolbar, type VectorCanvasToolbarProps, VectorCanvasViewportSurface, VectorSelectionInspector, type VectorSelectionInspectorProps, VectorToolDefinition, VectorToolbar, type VectorToolbarProps, type VectorToolbarRenderContext, ViewportZoomControls, type ViewportZoomControlsProps, createIndexedDbPersistenceAdapter, createLocalStoragePersistenceAdapter, createNoopPersistenceAdapter, createToolPlugin, cursorForVectorToolId, getBoardPositionStyle, useCanvuChromeContext, useVectorCanvasDocument };
|