canvu-react 0.3.6 → 0.3.7
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 +2 -1
- package/dist/chatbot.d.ts +2 -1
- package/dist/react.cjs +15 -2
- package/dist/react.cjs.map +1 -1
- package/dist/react.d.cts +9 -220
- package/dist/react.d.ts +9 -220
- package/dist/react.js +15 -2
- package/dist/react.js.map +1 -1
- package/dist/realtime.cjs.map +1 -1
- package/dist/realtime.d.cts +3 -2
- package/dist/realtime.d.ts +3 -2
- package/dist/realtime.js.map +1 -1
- package/dist/{types--ALu1mF-.d.ts → types-BCtWx3zP.d.ts} +225 -6
- package/dist/{types-D1ftVsOQ.d.cts → types-B_rv7p8b.d.cts} +225 -6
- package/package.json +1 -1
|
@@ -1,7 +1,46 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { ReactNode, RefObject } from 'react';
|
|
3
|
-
import {
|
|
2
|
+
import { CSSProperties, ReactNode, RefObject } from 'react';
|
|
3
|
+
import { V as VectorSceneItem, R as Rect } from './types-CB0TZZuk.js';
|
|
4
4
|
import { C as Camera2D } from './camera-KwCYYPhm.js';
|
|
5
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
6
|
+
import { S as StrokeStyle } from './shape-builders-DTYvub8W.js';
|
|
7
|
+
|
|
8
|
+
type CanvuChromeActiveToolStyle = StrokeStyle & {
|
|
9
|
+
toolKind: "draw" | "marker";
|
|
10
|
+
label?: string;
|
|
11
|
+
};
|
|
12
|
+
type CanvuChromeSelectionStyleChange = (patch: {
|
|
13
|
+
stroke: string;
|
|
14
|
+
strokeWidth: number;
|
|
15
|
+
strokeOpacity?: number;
|
|
16
|
+
}) => void;
|
|
17
|
+
/**
|
|
18
|
+
* Runtime data and handlers shared with floating board chrome (e.g. {@link NavMenu},
|
|
19
|
+
* {@link VectorSelectionInspector}). Populated by `VectorViewport` and consumed via
|
|
20
|
+
* {@link useCanvuChromeContext}.
|
|
21
|
+
*/
|
|
22
|
+
type CanvuChromeContextValue = {
|
|
23
|
+
camera: Camera2D | null;
|
|
24
|
+
viewportWidth: number;
|
|
25
|
+
viewportHeight: number;
|
|
26
|
+
items: readonly VectorSceneItem[];
|
|
27
|
+
selectedItems: readonly VectorSceneItem[];
|
|
28
|
+
interactive: boolean;
|
|
29
|
+
canEditSelection: boolean;
|
|
30
|
+
activeToolStyle: CanvuChromeActiveToolStyle | null;
|
|
31
|
+
onSelectionStyleChange: CanvuChromeSelectionStyleChange | null;
|
|
32
|
+
zoomPercent: number;
|
|
33
|
+
onZoomIn: () => void;
|
|
34
|
+
onZoomOut: () => void;
|
|
35
|
+
onUndo: () => void;
|
|
36
|
+
onRedo: () => void;
|
|
37
|
+
canUndo: boolean;
|
|
38
|
+
canRedo: boolean;
|
|
39
|
+
onRequestRender: () => void;
|
|
40
|
+
};
|
|
41
|
+
declare const CanvuChromeContext: react.Context<CanvuChromeContextValue | null>;
|
|
42
|
+
/** Returns the current chrome context or `null` when used outside `VectorViewport`. */
|
|
43
|
+
declare function useCanvuChromeContext(): CanvuChromeContextValue | null;
|
|
5
44
|
|
|
6
45
|
type PlacementPreview = {
|
|
7
46
|
kind: "rect" | "ellipse";
|
|
@@ -30,6 +69,180 @@ type PlacementPreview = {
|
|
|
30
69
|
}[];
|
|
31
70
|
};
|
|
32
71
|
|
|
72
|
+
type ActiveToolStyle = StrokeStyle & {
|
|
73
|
+
toolKind: "draw" | "marker";
|
|
74
|
+
label?: string;
|
|
75
|
+
};
|
|
76
|
+
/**
|
|
77
|
+
* Color + stroke-width inspector for the current selection (or active drawing tool style).
|
|
78
|
+
* When rendered inside `VectorViewport` (e.g. via the `selectionInspector` slot), `items`,
|
|
79
|
+
* `activeToolStyle`, and `onChange` default to values from {@link CanvuChromeContext};
|
|
80
|
+
* pass any prop to override.
|
|
81
|
+
*/
|
|
82
|
+
type VectorSelectionInspectorProps = {
|
|
83
|
+
/** Selected items that support stroke/fill styling (caller may filter). */
|
|
84
|
+
items?: readonly VectorSceneItem[];
|
|
85
|
+
/** Optional active tool style shown even without a selection. */
|
|
86
|
+
activeToolStyle?: ActiveToolStyle | null;
|
|
87
|
+
/** Apply stroke / width / opacity to every item in `items`. */
|
|
88
|
+
onChange?: CanvuChromeSelectionStyleChange;
|
|
89
|
+
/** Anchor preset. Defaults to top-left. */
|
|
90
|
+
position?: BoardComponentPosition;
|
|
91
|
+
/** Distance (px) from anchored edges. @default 12 */
|
|
92
|
+
inset?: number;
|
|
93
|
+
/** @default 24 */
|
|
94
|
+
zIndex?: number;
|
|
95
|
+
className?: string;
|
|
96
|
+
/** Merged on top of position-derived styles for custom tweaks. */
|
|
97
|
+
style?: CSSProperties;
|
|
98
|
+
};
|
|
99
|
+
/**
|
|
100
|
+
* Color + stroke width for the current selection. Supports multiple selected shapes: one change applies to all.
|
|
101
|
+
*/
|
|
102
|
+
declare function VectorSelectionInspector({ items: itemsProp, activeToolStyle: activeToolStyleProp, onChange: onChangeProp, position, inset, zIndex, className, style, }: VectorSelectionInspectorProps): react_jsx_runtime.JSX.Element | null;
|
|
103
|
+
|
|
104
|
+
type VectorCanvasSlotProps = {
|
|
105
|
+
children?: ReactNode;
|
|
106
|
+
className?: string;
|
|
107
|
+
style?: CSSProperties;
|
|
108
|
+
};
|
|
109
|
+
/**
|
|
110
|
+
* Anchor presets for floating board components.
|
|
111
|
+
*
|
|
112
|
+
* Names are `<edge>-<position-along-edge>`:
|
|
113
|
+
* - `top-*` / `bottom-*` anchor to the top or bottom edge.
|
|
114
|
+
* - `left-*` / `right-*` anchor to the left or right edge.
|
|
115
|
+
*
|
|
116
|
+
* Corner aliases are equivalent (e.g. `top-left` and `left-top` resolve to the same anchor),
|
|
117
|
+
* but kept distinct so callers can pick whichever reads best in their layout (a vertical
|
|
118
|
+
* strip might prefer `left-top`; a horizontal strip prefers `top-left`).
|
|
119
|
+
*/
|
|
120
|
+
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";
|
|
121
|
+
/** @deprecated Use {@link BoardComponentPosition}. */
|
|
122
|
+
type VectorCanvasSpacePosition = BoardComponentPosition;
|
|
123
|
+
/**
|
|
124
|
+
* Compute absolute-position CSS for a board component anchor preset.
|
|
125
|
+
* Returns `position`, `zIndex`, and the relevant edge offsets / transforms.
|
|
126
|
+
* Callers merge the result with their own style/className overrides.
|
|
127
|
+
*/
|
|
128
|
+
declare function getBoardPositionStyle(position: BoardComponentPosition, inset?: number, zIndex?: number): CSSProperties;
|
|
129
|
+
type VectorCanvasSpaceProps = VectorCanvasSlotProps & {
|
|
130
|
+
position?: BoardComponentPosition;
|
|
131
|
+
/** @default 12 */
|
|
132
|
+
inset?: number;
|
|
133
|
+
/** @default 40 */
|
|
134
|
+
zIndex?: number;
|
|
135
|
+
/** Pointer events value on the content wrapper. @default "auto" */
|
|
136
|
+
contentPointerEvents?: CSSProperties["pointerEvents"];
|
|
137
|
+
};
|
|
138
|
+
/**
|
|
139
|
+
* Full-viewport column shell for a vector canvas (header + body with stage).
|
|
140
|
+
* Use with {@link VectorCanvasBody}, {@link VectorCanvasMain}. Pass `toolbar` on {@link VectorViewport};
|
|
141
|
+
* Compose the floating tool strip with {@link VectorCanvasToolbar} around {@link VectorToolbar} (see example below).
|
|
142
|
+
*/
|
|
143
|
+
declare function VectorCanvasRoot({ children, className, style, }: VectorCanvasSlotProps): react_jsx_runtime.JSX.Element;
|
|
144
|
+
/** Optional top chrome (title, hints, toggles). */
|
|
145
|
+
declare function VectorCanvasHeader({ children, className, style, }: VectorCanvasSlotProps): react_jsx_runtime.JSX.Element;
|
|
146
|
+
/** Fills remaining space below the header (typically one {@link VectorCanvasMain}). */
|
|
147
|
+
declare function VectorCanvasBody({ children, className, style, }: VectorCanvasSlotProps): react_jsx_runtime.JSX.Element;
|
|
148
|
+
/**
|
|
149
|
+
* Stretch area for {@link VectorViewport} (or any child that should fill the stage).
|
|
150
|
+
*/
|
|
151
|
+
declare function VectorCanvasMain({ children, className, style, }: VectorCanvasSlotProps): react_jsx_runtime.JSX.Element;
|
|
152
|
+
/**
|
|
153
|
+
* Flex child that fills {@link VectorCanvasMain} and gives {@link VectorViewport} a bounded height
|
|
154
|
+
* (white surface by default). Omit if you set the background on `Main` or the viewport yourself.
|
|
155
|
+
*/
|
|
156
|
+
declare function VectorCanvasViewportSurface({ children, className, style, }: VectorCanvasSlotProps): react_jsx_runtime.JSX.Element;
|
|
157
|
+
type VectorCanvasToolbarProps = {
|
|
158
|
+
children?: ReactNode;
|
|
159
|
+
className?: string;
|
|
160
|
+
style?: CSSProperties;
|
|
161
|
+
/** Anchor preset. @default "bottom-center" */
|
|
162
|
+
position?: BoardComponentPosition;
|
|
163
|
+
/** Distance (px) from the anchored edge(s). @default 12 */
|
|
164
|
+
inset?: number;
|
|
165
|
+
/** @default 30 */
|
|
166
|
+
zIndex?: number;
|
|
167
|
+
};
|
|
168
|
+
/**
|
|
169
|
+
* Floating strip anchor for {@link VectorToolbar} or custom controls. Defaults to bottom-center.
|
|
170
|
+
* Renders `pointer-events: none` on the shell and `auto` on children so the canvas keeps receiving hits outside the bar.
|
|
171
|
+
* Pass as the `toolbar` prop of `VectorViewport`; pick a different `position` for top / side anchoring.
|
|
172
|
+
* Z-index defaults to 30 so the strip stays above zoom controls.
|
|
173
|
+
*/
|
|
174
|
+
declare function VectorCanvasToolbar({ children, className, style, position, inset, zIndex, }: VectorCanvasToolbarProps): react_jsx_runtime.JSX.Element;
|
|
175
|
+
/**
|
|
176
|
+
* Absolute canvas-aligned space for floating UI such as chats, rosters, inspectors, and overlays.
|
|
177
|
+
* Use this instead of ad-hoc wrapper divs or plugin hosts when a feature can be expressed as React nodes.
|
|
178
|
+
*/
|
|
179
|
+
declare function VectorCanvasSpace({ children, className, style, position, inset, zIndex, contentPointerEvents, }: VectorCanvasSpaceProps): react_jsx_runtime.JSX.Element;
|
|
180
|
+
/**
|
|
181
|
+
* Namespaced layout primitives for composing a vector canvas shell without ad-hoc wrapper divs.
|
|
182
|
+
*
|
|
183
|
+
* @example
|
|
184
|
+
* ```tsx
|
|
185
|
+
* <VectorCanvas.Root>
|
|
186
|
+
* <VectorCanvas.Header>…</VectorCanvas.Header>
|
|
187
|
+
* <VectorCanvas.Body>
|
|
188
|
+
* <VectorCanvas.Main>
|
|
189
|
+
* <VectorCanvas.ViewportSurface>
|
|
190
|
+
* <VectorViewport
|
|
191
|
+
* toolbar={
|
|
192
|
+
* <VectorCanvas.Toolbar>
|
|
193
|
+
* <VectorToolbar … />
|
|
194
|
+
* </VectorCanvas.Toolbar>
|
|
195
|
+
* }
|
|
196
|
+
* …
|
|
197
|
+
* />
|
|
198
|
+
* </VectorCanvas.ViewportSurface>
|
|
199
|
+
* </VectorCanvas.Main>
|
|
200
|
+
* </VectorCanvas.Body>
|
|
201
|
+
* </VectorCanvas.Root>
|
|
202
|
+
* ```
|
|
203
|
+
*/
|
|
204
|
+
declare const VectorCanvas: {
|
|
205
|
+
readonly Root: typeof VectorCanvasRoot;
|
|
206
|
+
readonly Header: typeof VectorCanvasHeader;
|
|
207
|
+
readonly Body: typeof VectorCanvasBody;
|
|
208
|
+
readonly Main: typeof VectorCanvasMain;
|
|
209
|
+
readonly ViewportSurface: typeof VectorCanvasViewportSurface;
|
|
210
|
+
readonly Toolbar: typeof VectorCanvasToolbar;
|
|
211
|
+
readonly Space: typeof VectorCanvasSpace;
|
|
212
|
+
readonly NavMenu: typeof NavMenu;
|
|
213
|
+
readonly SelectionInspector: typeof VectorSelectionInspector;
|
|
214
|
+
};
|
|
215
|
+
|
|
216
|
+
/**
|
|
217
|
+
* Floating bottom-bar combining zoom controls, undo/redo, and an expandable minimap.
|
|
218
|
+
* When rendered inside `VectorViewport` (e.g. via the `navMenu` slot), data props default
|
|
219
|
+
* to values from {@link CanvuChromeContext}; pass any prop to override.
|
|
220
|
+
*/
|
|
221
|
+
type NavMenuProps = {
|
|
222
|
+
camera?: Camera2D;
|
|
223
|
+
viewportWidth?: number;
|
|
224
|
+
viewportHeight?: number;
|
|
225
|
+
items?: readonly VectorSceneItem[];
|
|
226
|
+
zoomPercent?: number;
|
|
227
|
+
onZoomIn?: () => void;
|
|
228
|
+
onZoomOut?: () => void;
|
|
229
|
+
onUndo?: () => void;
|
|
230
|
+
onRedo?: () => void;
|
|
231
|
+
canUndo?: boolean;
|
|
232
|
+
canRedo?: boolean;
|
|
233
|
+
onRequestRender?: () => void;
|
|
234
|
+
/** Anchor preset. Defaults to bottom-left. */
|
|
235
|
+
position?: BoardComponentPosition;
|
|
236
|
+
/** Distance (px) from anchored edges. @default 12 */
|
|
237
|
+
inset?: number;
|
|
238
|
+
/** @default 23 */
|
|
239
|
+
zIndex?: number;
|
|
240
|
+
className?: string;
|
|
241
|
+
/** Merged on top of position-derived styles for custom tweaks. */
|
|
242
|
+
style?: CSSProperties;
|
|
243
|
+
};
|
|
244
|
+
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;
|
|
245
|
+
|
|
33
246
|
/**
|
|
34
247
|
* Describes one entry in {@link VectorToolbar}.
|
|
35
248
|
*/
|
|
@@ -182,6 +395,12 @@ type VectorViewportProps = {
|
|
|
182
395
|
* Pass `<VectorCanvas.SelectionInspector position="..." />` to relocate or style it. Pass `null` to hide it.
|
|
183
396
|
*/
|
|
184
397
|
selectionInspector?: ReactNode | null;
|
|
398
|
+
/**
|
|
399
|
+
* Props forwarded to the built-in {@link VectorSelectionInspector}.
|
|
400
|
+
*
|
|
401
|
+
* Use this to reposition or theme the default left-side style panel without replacing it.
|
|
402
|
+
*/
|
|
403
|
+
selectionInspectorProps?: Pick<VectorSelectionInspectorProps, "className" | "style">;
|
|
185
404
|
/**
|
|
186
405
|
* Plug and play board extensions.
|
|
187
406
|
*
|
|
@@ -271,7 +490,7 @@ type CanvasPluginContribution = {
|
|
|
271
490
|
/** Simple viewport prop overrides owned by the plugin runtime. */
|
|
272
491
|
viewportProps?: Partial<Pick<VectorViewportProps, "remotePresence" | "presenceOverlay">>;
|
|
273
492
|
/** Event callbacks chained into the viewport without manual wiring in app code. */
|
|
274
|
-
callbacks?: Partial<Pick<VectorViewportProps, "onWorldPointerMove" | "onWorldPointerLeave" | "onPlacementPreviewChange" | "onCameraChange">>;
|
|
493
|
+
callbacks?: Partial<Pick<VectorViewportProps, "onWorldPointerDown" | "onWorldPointerMove" | "onWorldPointerLeave" | "onPlacementPreviewChange" | "onCameraChange">>;
|
|
275
494
|
/** Middleware around `onItemsChange` for collaboration, comments, persistence, etc. */
|
|
276
495
|
wrapOnItemsChange?: (nextItems: VectorSceneItem[], ctx: CanvasPluginItemsChangeMiddlewareContext) => void;
|
|
277
496
|
};
|
|
@@ -348,9 +567,9 @@ declare function useCanvuResolvedTools(): VectorToolDefinition[];
|
|
|
348
567
|
/**
|
|
349
568
|
* Registers non-visual plugin contributions with the current `VectorViewport` runtime.
|
|
350
569
|
*
|
|
351
|
-
* Use this inside `plugin.Component` when you want to inject tools,
|
|
352
|
-
* middleware without requiring the consumer to wire hooks manually.
|
|
570
|
+
* Use this inside `plugin.Component` when you want to inject tools, pointer/camera behavior, or
|
|
571
|
+
* document middleware without requiring the consumer to wire hooks manually.
|
|
353
572
|
*/
|
|
354
573
|
declare function useCanvuPluginContribution(pluginId: string, contribution: CanvasPluginContribution): void;
|
|
355
574
|
|
|
356
|
-
export { type CanvasPlugin as C, type PlacementPreview as P, type RemotePresenceMarkupStroke as R, type VectorToolDefinition as V, type WorldPointerDownDetail as W, type CanvasPluginComponentProps as a, type CanvasPluginContribution as b, type CanvasPluginItemsChangeMiddlewareContext as c, type CanvasPluginRenderContext as d,
|
|
575
|
+
export { VectorViewport as A, type BoardComponentPosition as B, type CanvasPlugin as C, type VectorViewportHandle as D, type VectorViewportProps as E, createCanvuPlugin as F, getBoardPositionStyle as G, useCanvuChromeContext as H, useCanvuDocumentContext as I, useCanvuPluginContext as J, useCanvuPluginContribution as K, useCanvuResolvedTools as L, useCanvuViewportContext as M, NavMenu as N, type RemotePresencePeer as O, type PlacementPreview as P, type RealtimeConnectionState as Q, type RemotePresenceMarkupStroke as R, type PresenceOverlayRenderContext as S, type VectorToolDefinition as V, type WorldPointerDownDetail as W, type CanvasPluginComponentProps as a, type CanvasPluginContribution as b, type CanvasPluginItemsChangeMiddlewareContext as c, type CanvasPluginRenderContext as d, type CanvuChromeActiveToolStyle as e, CanvuChromeContext as f, type CanvuChromeContextValue as g, type CanvuChromeSelectionStyleChange as h, CanvuPluginContext as i, type CanvuPluginContextValue as j, type CanvuPluginViewportSnapshot as k, type CustomShapePlacementOptions as l, type NavMenuProps as m, VectorCanvas as n, VectorCanvasBody as o, VectorCanvasHeader as p, VectorCanvasMain as q, VectorCanvasRoot as r, type VectorCanvasSlotProps as s, type VectorCanvasSpacePosition as t, type VectorCanvasSpaceProps as u, VectorCanvasToolbar as v, type VectorCanvasToolbarProps as w, VectorCanvasViewportSurface as x, VectorSelectionInspector as y, type VectorSelectionInspectorProps as z };
|
|
@@ -1,7 +1,46 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { ReactNode, RefObject } from 'react';
|
|
3
|
-
import {
|
|
2
|
+
import { CSSProperties, ReactNode, RefObject } from 'react';
|
|
3
|
+
import { V as VectorSceneItem, R as Rect } from './types-CB0TZZuk.cjs';
|
|
4
4
|
import { C as Camera2D } from './camera-BwQjm5oh.cjs';
|
|
5
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
6
|
+
import { S as StrokeStyle } from './shape-builders-DxPoOecg.cjs';
|
|
7
|
+
|
|
8
|
+
type CanvuChromeActiveToolStyle = StrokeStyle & {
|
|
9
|
+
toolKind: "draw" | "marker";
|
|
10
|
+
label?: string;
|
|
11
|
+
};
|
|
12
|
+
type CanvuChromeSelectionStyleChange = (patch: {
|
|
13
|
+
stroke: string;
|
|
14
|
+
strokeWidth: number;
|
|
15
|
+
strokeOpacity?: number;
|
|
16
|
+
}) => void;
|
|
17
|
+
/**
|
|
18
|
+
* Runtime data and handlers shared with floating board chrome (e.g. {@link NavMenu},
|
|
19
|
+
* {@link VectorSelectionInspector}). Populated by `VectorViewport` and consumed via
|
|
20
|
+
* {@link useCanvuChromeContext}.
|
|
21
|
+
*/
|
|
22
|
+
type CanvuChromeContextValue = {
|
|
23
|
+
camera: Camera2D | null;
|
|
24
|
+
viewportWidth: number;
|
|
25
|
+
viewportHeight: number;
|
|
26
|
+
items: readonly VectorSceneItem[];
|
|
27
|
+
selectedItems: readonly VectorSceneItem[];
|
|
28
|
+
interactive: boolean;
|
|
29
|
+
canEditSelection: boolean;
|
|
30
|
+
activeToolStyle: CanvuChromeActiveToolStyle | null;
|
|
31
|
+
onSelectionStyleChange: CanvuChromeSelectionStyleChange | null;
|
|
32
|
+
zoomPercent: number;
|
|
33
|
+
onZoomIn: () => void;
|
|
34
|
+
onZoomOut: () => void;
|
|
35
|
+
onUndo: () => void;
|
|
36
|
+
onRedo: () => void;
|
|
37
|
+
canUndo: boolean;
|
|
38
|
+
canRedo: boolean;
|
|
39
|
+
onRequestRender: () => void;
|
|
40
|
+
};
|
|
41
|
+
declare const CanvuChromeContext: react.Context<CanvuChromeContextValue | null>;
|
|
42
|
+
/** Returns the current chrome context or `null` when used outside `VectorViewport`. */
|
|
43
|
+
declare function useCanvuChromeContext(): CanvuChromeContextValue | null;
|
|
5
44
|
|
|
6
45
|
type PlacementPreview = {
|
|
7
46
|
kind: "rect" | "ellipse";
|
|
@@ -30,6 +69,180 @@ type PlacementPreview = {
|
|
|
30
69
|
}[];
|
|
31
70
|
};
|
|
32
71
|
|
|
72
|
+
type ActiveToolStyle = StrokeStyle & {
|
|
73
|
+
toolKind: "draw" | "marker";
|
|
74
|
+
label?: string;
|
|
75
|
+
};
|
|
76
|
+
/**
|
|
77
|
+
* Color + stroke-width inspector for the current selection (or active drawing tool style).
|
|
78
|
+
* When rendered inside `VectorViewport` (e.g. via the `selectionInspector` slot), `items`,
|
|
79
|
+
* `activeToolStyle`, and `onChange` default to values from {@link CanvuChromeContext};
|
|
80
|
+
* pass any prop to override.
|
|
81
|
+
*/
|
|
82
|
+
type VectorSelectionInspectorProps = {
|
|
83
|
+
/** Selected items that support stroke/fill styling (caller may filter). */
|
|
84
|
+
items?: readonly VectorSceneItem[];
|
|
85
|
+
/** Optional active tool style shown even without a selection. */
|
|
86
|
+
activeToolStyle?: ActiveToolStyle | null;
|
|
87
|
+
/** Apply stroke / width / opacity to every item in `items`. */
|
|
88
|
+
onChange?: CanvuChromeSelectionStyleChange;
|
|
89
|
+
/** Anchor preset. Defaults to top-left. */
|
|
90
|
+
position?: BoardComponentPosition;
|
|
91
|
+
/** Distance (px) from anchored edges. @default 12 */
|
|
92
|
+
inset?: number;
|
|
93
|
+
/** @default 24 */
|
|
94
|
+
zIndex?: number;
|
|
95
|
+
className?: string;
|
|
96
|
+
/** Merged on top of position-derived styles for custom tweaks. */
|
|
97
|
+
style?: CSSProperties;
|
|
98
|
+
};
|
|
99
|
+
/**
|
|
100
|
+
* Color + stroke width for the current selection. Supports multiple selected shapes: one change applies to all.
|
|
101
|
+
*/
|
|
102
|
+
declare function VectorSelectionInspector({ items: itemsProp, activeToolStyle: activeToolStyleProp, onChange: onChangeProp, position, inset, zIndex, className, style, }: VectorSelectionInspectorProps): react_jsx_runtime.JSX.Element | null;
|
|
103
|
+
|
|
104
|
+
type VectorCanvasSlotProps = {
|
|
105
|
+
children?: ReactNode;
|
|
106
|
+
className?: string;
|
|
107
|
+
style?: CSSProperties;
|
|
108
|
+
};
|
|
109
|
+
/**
|
|
110
|
+
* Anchor presets for floating board components.
|
|
111
|
+
*
|
|
112
|
+
* Names are `<edge>-<position-along-edge>`:
|
|
113
|
+
* - `top-*` / `bottom-*` anchor to the top or bottom edge.
|
|
114
|
+
* - `left-*` / `right-*` anchor to the left or right edge.
|
|
115
|
+
*
|
|
116
|
+
* Corner aliases are equivalent (e.g. `top-left` and `left-top` resolve to the same anchor),
|
|
117
|
+
* but kept distinct so callers can pick whichever reads best in their layout (a vertical
|
|
118
|
+
* strip might prefer `left-top`; a horizontal strip prefers `top-left`).
|
|
119
|
+
*/
|
|
120
|
+
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";
|
|
121
|
+
/** @deprecated Use {@link BoardComponentPosition}. */
|
|
122
|
+
type VectorCanvasSpacePosition = BoardComponentPosition;
|
|
123
|
+
/**
|
|
124
|
+
* Compute absolute-position CSS for a board component anchor preset.
|
|
125
|
+
* Returns `position`, `zIndex`, and the relevant edge offsets / transforms.
|
|
126
|
+
* Callers merge the result with their own style/className overrides.
|
|
127
|
+
*/
|
|
128
|
+
declare function getBoardPositionStyle(position: BoardComponentPosition, inset?: number, zIndex?: number): CSSProperties;
|
|
129
|
+
type VectorCanvasSpaceProps = VectorCanvasSlotProps & {
|
|
130
|
+
position?: BoardComponentPosition;
|
|
131
|
+
/** @default 12 */
|
|
132
|
+
inset?: number;
|
|
133
|
+
/** @default 40 */
|
|
134
|
+
zIndex?: number;
|
|
135
|
+
/** Pointer events value on the content wrapper. @default "auto" */
|
|
136
|
+
contentPointerEvents?: CSSProperties["pointerEvents"];
|
|
137
|
+
};
|
|
138
|
+
/**
|
|
139
|
+
* Full-viewport column shell for a vector canvas (header + body with stage).
|
|
140
|
+
* Use with {@link VectorCanvasBody}, {@link VectorCanvasMain}. Pass `toolbar` on {@link VectorViewport};
|
|
141
|
+
* Compose the floating tool strip with {@link VectorCanvasToolbar} around {@link VectorToolbar} (see example below).
|
|
142
|
+
*/
|
|
143
|
+
declare function VectorCanvasRoot({ children, className, style, }: VectorCanvasSlotProps): react_jsx_runtime.JSX.Element;
|
|
144
|
+
/** Optional top chrome (title, hints, toggles). */
|
|
145
|
+
declare function VectorCanvasHeader({ children, className, style, }: VectorCanvasSlotProps): react_jsx_runtime.JSX.Element;
|
|
146
|
+
/** Fills remaining space below the header (typically one {@link VectorCanvasMain}). */
|
|
147
|
+
declare function VectorCanvasBody({ children, className, style, }: VectorCanvasSlotProps): react_jsx_runtime.JSX.Element;
|
|
148
|
+
/**
|
|
149
|
+
* Stretch area for {@link VectorViewport} (or any child that should fill the stage).
|
|
150
|
+
*/
|
|
151
|
+
declare function VectorCanvasMain({ children, className, style, }: VectorCanvasSlotProps): react_jsx_runtime.JSX.Element;
|
|
152
|
+
/**
|
|
153
|
+
* Flex child that fills {@link VectorCanvasMain} and gives {@link VectorViewport} a bounded height
|
|
154
|
+
* (white surface by default). Omit if you set the background on `Main` or the viewport yourself.
|
|
155
|
+
*/
|
|
156
|
+
declare function VectorCanvasViewportSurface({ children, className, style, }: VectorCanvasSlotProps): react_jsx_runtime.JSX.Element;
|
|
157
|
+
type VectorCanvasToolbarProps = {
|
|
158
|
+
children?: ReactNode;
|
|
159
|
+
className?: string;
|
|
160
|
+
style?: CSSProperties;
|
|
161
|
+
/** Anchor preset. @default "bottom-center" */
|
|
162
|
+
position?: BoardComponentPosition;
|
|
163
|
+
/** Distance (px) from the anchored edge(s). @default 12 */
|
|
164
|
+
inset?: number;
|
|
165
|
+
/** @default 30 */
|
|
166
|
+
zIndex?: number;
|
|
167
|
+
};
|
|
168
|
+
/**
|
|
169
|
+
* Floating strip anchor for {@link VectorToolbar} or custom controls. Defaults to bottom-center.
|
|
170
|
+
* Renders `pointer-events: none` on the shell and `auto` on children so the canvas keeps receiving hits outside the bar.
|
|
171
|
+
* Pass as the `toolbar` prop of `VectorViewport`; pick a different `position` for top / side anchoring.
|
|
172
|
+
* Z-index defaults to 30 so the strip stays above zoom controls.
|
|
173
|
+
*/
|
|
174
|
+
declare function VectorCanvasToolbar({ children, className, style, position, inset, zIndex, }: VectorCanvasToolbarProps): react_jsx_runtime.JSX.Element;
|
|
175
|
+
/**
|
|
176
|
+
* Absolute canvas-aligned space for floating UI such as chats, rosters, inspectors, and overlays.
|
|
177
|
+
* Use this instead of ad-hoc wrapper divs or plugin hosts when a feature can be expressed as React nodes.
|
|
178
|
+
*/
|
|
179
|
+
declare function VectorCanvasSpace({ children, className, style, position, inset, zIndex, contentPointerEvents, }: VectorCanvasSpaceProps): react_jsx_runtime.JSX.Element;
|
|
180
|
+
/**
|
|
181
|
+
* Namespaced layout primitives for composing a vector canvas shell without ad-hoc wrapper divs.
|
|
182
|
+
*
|
|
183
|
+
* @example
|
|
184
|
+
* ```tsx
|
|
185
|
+
* <VectorCanvas.Root>
|
|
186
|
+
* <VectorCanvas.Header>…</VectorCanvas.Header>
|
|
187
|
+
* <VectorCanvas.Body>
|
|
188
|
+
* <VectorCanvas.Main>
|
|
189
|
+
* <VectorCanvas.ViewportSurface>
|
|
190
|
+
* <VectorViewport
|
|
191
|
+
* toolbar={
|
|
192
|
+
* <VectorCanvas.Toolbar>
|
|
193
|
+
* <VectorToolbar … />
|
|
194
|
+
* </VectorCanvas.Toolbar>
|
|
195
|
+
* }
|
|
196
|
+
* …
|
|
197
|
+
* />
|
|
198
|
+
* </VectorCanvas.ViewportSurface>
|
|
199
|
+
* </VectorCanvas.Main>
|
|
200
|
+
* </VectorCanvas.Body>
|
|
201
|
+
* </VectorCanvas.Root>
|
|
202
|
+
* ```
|
|
203
|
+
*/
|
|
204
|
+
declare const VectorCanvas: {
|
|
205
|
+
readonly Root: typeof VectorCanvasRoot;
|
|
206
|
+
readonly Header: typeof VectorCanvasHeader;
|
|
207
|
+
readonly Body: typeof VectorCanvasBody;
|
|
208
|
+
readonly Main: typeof VectorCanvasMain;
|
|
209
|
+
readonly ViewportSurface: typeof VectorCanvasViewportSurface;
|
|
210
|
+
readonly Toolbar: typeof VectorCanvasToolbar;
|
|
211
|
+
readonly Space: typeof VectorCanvasSpace;
|
|
212
|
+
readonly NavMenu: typeof NavMenu;
|
|
213
|
+
readonly SelectionInspector: typeof VectorSelectionInspector;
|
|
214
|
+
};
|
|
215
|
+
|
|
216
|
+
/**
|
|
217
|
+
* Floating bottom-bar combining zoom controls, undo/redo, and an expandable minimap.
|
|
218
|
+
* When rendered inside `VectorViewport` (e.g. via the `navMenu` slot), data props default
|
|
219
|
+
* to values from {@link CanvuChromeContext}; pass any prop to override.
|
|
220
|
+
*/
|
|
221
|
+
type NavMenuProps = {
|
|
222
|
+
camera?: Camera2D;
|
|
223
|
+
viewportWidth?: number;
|
|
224
|
+
viewportHeight?: number;
|
|
225
|
+
items?: readonly VectorSceneItem[];
|
|
226
|
+
zoomPercent?: number;
|
|
227
|
+
onZoomIn?: () => void;
|
|
228
|
+
onZoomOut?: () => void;
|
|
229
|
+
onUndo?: () => void;
|
|
230
|
+
onRedo?: () => void;
|
|
231
|
+
canUndo?: boolean;
|
|
232
|
+
canRedo?: boolean;
|
|
233
|
+
onRequestRender?: () => void;
|
|
234
|
+
/** Anchor preset. Defaults to bottom-left. */
|
|
235
|
+
position?: BoardComponentPosition;
|
|
236
|
+
/** Distance (px) from anchored edges. @default 12 */
|
|
237
|
+
inset?: number;
|
|
238
|
+
/** @default 23 */
|
|
239
|
+
zIndex?: number;
|
|
240
|
+
className?: string;
|
|
241
|
+
/** Merged on top of position-derived styles for custom tweaks. */
|
|
242
|
+
style?: CSSProperties;
|
|
243
|
+
};
|
|
244
|
+
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;
|
|
245
|
+
|
|
33
246
|
/**
|
|
34
247
|
* Describes one entry in {@link VectorToolbar}.
|
|
35
248
|
*/
|
|
@@ -182,6 +395,12 @@ type VectorViewportProps = {
|
|
|
182
395
|
* Pass `<VectorCanvas.SelectionInspector position="..." />` to relocate or style it. Pass `null` to hide it.
|
|
183
396
|
*/
|
|
184
397
|
selectionInspector?: ReactNode | null;
|
|
398
|
+
/**
|
|
399
|
+
* Props forwarded to the built-in {@link VectorSelectionInspector}.
|
|
400
|
+
*
|
|
401
|
+
* Use this to reposition or theme the default left-side style panel without replacing it.
|
|
402
|
+
*/
|
|
403
|
+
selectionInspectorProps?: Pick<VectorSelectionInspectorProps, "className" | "style">;
|
|
185
404
|
/**
|
|
186
405
|
* Plug and play board extensions.
|
|
187
406
|
*
|
|
@@ -271,7 +490,7 @@ type CanvasPluginContribution = {
|
|
|
271
490
|
/** Simple viewport prop overrides owned by the plugin runtime. */
|
|
272
491
|
viewportProps?: Partial<Pick<VectorViewportProps, "remotePresence" | "presenceOverlay">>;
|
|
273
492
|
/** Event callbacks chained into the viewport without manual wiring in app code. */
|
|
274
|
-
callbacks?: Partial<Pick<VectorViewportProps, "onWorldPointerMove" | "onWorldPointerLeave" | "onPlacementPreviewChange" | "onCameraChange">>;
|
|
493
|
+
callbacks?: Partial<Pick<VectorViewportProps, "onWorldPointerDown" | "onWorldPointerMove" | "onWorldPointerLeave" | "onPlacementPreviewChange" | "onCameraChange">>;
|
|
275
494
|
/** Middleware around `onItemsChange` for collaboration, comments, persistence, etc. */
|
|
276
495
|
wrapOnItemsChange?: (nextItems: VectorSceneItem[], ctx: CanvasPluginItemsChangeMiddlewareContext) => void;
|
|
277
496
|
};
|
|
@@ -348,9 +567,9 @@ declare function useCanvuResolvedTools(): VectorToolDefinition[];
|
|
|
348
567
|
/**
|
|
349
568
|
* Registers non-visual plugin contributions with the current `VectorViewport` runtime.
|
|
350
569
|
*
|
|
351
|
-
* Use this inside `plugin.Component` when you want to inject tools,
|
|
352
|
-
* middleware without requiring the consumer to wire hooks manually.
|
|
570
|
+
* Use this inside `plugin.Component` when you want to inject tools, pointer/camera behavior, or
|
|
571
|
+
* document middleware without requiring the consumer to wire hooks manually.
|
|
353
572
|
*/
|
|
354
573
|
declare function useCanvuPluginContribution(pluginId: string, contribution: CanvasPluginContribution): void;
|
|
355
574
|
|
|
356
|
-
export { type CanvasPlugin as C, type PlacementPreview as P, type RemotePresenceMarkupStroke as R, type VectorToolDefinition as V, type WorldPointerDownDetail as W, type CanvasPluginComponentProps as a, type CanvasPluginContribution as b, type CanvasPluginItemsChangeMiddlewareContext as c, type CanvasPluginRenderContext as d,
|
|
575
|
+
export { VectorViewport as A, type BoardComponentPosition as B, type CanvasPlugin as C, type VectorViewportHandle as D, type VectorViewportProps as E, createCanvuPlugin as F, getBoardPositionStyle as G, useCanvuChromeContext as H, useCanvuDocumentContext as I, useCanvuPluginContext as J, useCanvuPluginContribution as K, useCanvuResolvedTools as L, useCanvuViewportContext as M, NavMenu as N, type RemotePresencePeer as O, type PlacementPreview as P, type RealtimeConnectionState as Q, type RemotePresenceMarkupStroke as R, type PresenceOverlayRenderContext as S, type VectorToolDefinition as V, type WorldPointerDownDetail as W, type CanvasPluginComponentProps as a, type CanvasPluginContribution as b, type CanvasPluginItemsChangeMiddlewareContext as c, type CanvasPluginRenderContext as d, type CanvuChromeActiveToolStyle as e, CanvuChromeContext as f, type CanvuChromeContextValue as g, type CanvuChromeSelectionStyleChange as h, CanvuPluginContext as i, type CanvuPluginContextValue as j, type CanvuPluginViewportSnapshot as k, type CustomShapePlacementOptions as l, type NavMenuProps as m, VectorCanvas as n, VectorCanvasBody as o, VectorCanvasHeader as p, VectorCanvasMain as q, VectorCanvasRoot as r, type VectorCanvasSlotProps as s, type VectorCanvasSpacePosition as t, type VectorCanvasSpaceProps as u, VectorCanvasToolbar as v, type VectorCanvasToolbarProps as w, VectorCanvasViewportSurface as x, VectorSelectionInspector as y, type VectorSelectionInspectorProps as z };
|