@filekit-studio/sketch 1.0.0 â 1.1.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.
- package/README.md +57 -0
- package/dist/index.d.mts +130 -15
- package/dist/index.d.ts +130 -15
- package/dist/index.js +101 -101
- package/dist/index.mjs +101 -101
- package/dist/styles.css +12 -18
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -101,6 +101,63 @@ export default function WhiteboardPage() {
|
|
|
101
101
|
| `guideHref` | `string` | `undefined` | External documentation link in shortcuts modal (e.g., `'https://tools.kanaddev.me/sketch'`). |
|
|
102
102
|
| `uiConfig` | `SketchUIConfig` | `{}` | Fine-grained visibility toggles for toolbars and panels. |
|
|
103
103
|
|
|
104
|
+
### UI Visibility Configuration (`SketchUIConfig`)
|
|
105
|
+
|
|
106
|
+
Customize or hide any part of the whiteboard studio:
|
|
107
|
+
|
|
108
|
+
```tsx
|
|
109
|
+
<SketchEditor
|
|
110
|
+
uiConfig={{
|
|
111
|
+
// Overall sections (all default to true)
|
|
112
|
+
showTopBar: true,
|
|
113
|
+
showToolBar: true,
|
|
114
|
+
showPropertiesPanel: true,
|
|
115
|
+
showMinimap: false, // Hide bottom-right minimap
|
|
116
|
+
showShortcutsButton: false, // Hide keyboard shortcuts pill
|
|
117
|
+
showGuideButton: false, // Hide bottom-left guide link pill
|
|
118
|
+
showTechStencils: false, // Hide AWS/Docker cloud stencils
|
|
119
|
+
showTemplates: false, // Hide starter templates flyout
|
|
120
|
+
showPresentation: false, // Hide slideshow mode
|
|
121
|
+
}}
|
|
122
|
+
/>
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
---
|
|
126
|
+
|
|
127
|
+
## đŧī¸ Read-Only Diagram Viewer (`<SketchViewer />`)
|
|
128
|
+
|
|
129
|
+
Use `<SketchViewer />` to embed lightweight, read-only architecture diagrams inside documentation, MDX blog posts, and slides with zero toolbar chrome and automatic bounding-box centering:
|
|
130
|
+
|
|
131
|
+
```tsx
|
|
132
|
+
import { SketchViewer } from '@filekit-studio/sketch'
|
|
133
|
+
import '@filekit-studio/sketch/styles.css'
|
|
134
|
+
|
|
135
|
+
export function ArchitectureDoc() {
|
|
136
|
+
return (
|
|
137
|
+
<div className="w-full h-[420px]">
|
|
138
|
+
<SketchViewer
|
|
139
|
+
value={systemArchitectureDoc}
|
|
140
|
+
theme="system"
|
|
141
|
+
autoFit={true} // Centers and fits diagram into view
|
|
142
|
+
interactive={true} // Allow readers to pan/zoom
|
|
143
|
+
showCopyButton={true} // 1-click 'Copy PNG' for readers
|
|
144
|
+
showZoomControls={false}
|
|
145
|
+
/>
|
|
146
|
+
</div>
|
|
147
|
+
)
|
|
148
|
+
}
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
| Prop | Type | Default | Description |
|
|
152
|
+
| :--- | :--- | :--- | :--- |
|
|
153
|
+
| `value` | `SketchDocument \| SketchBoardElement[]` | `undefined` | Document or elements array to render. |
|
|
154
|
+
| `theme` | `'light' \| 'dark' \| 'system'` | `'system'` | Adapts to host application dark/light theme. |
|
|
155
|
+
| `autoFit` | `boolean` | `true` | Automatically centers and zooms to fit elements into view. |
|
|
156
|
+
| `interactive` | `boolean` | `true` | When `false`, diagram is completely static like an image. |
|
|
157
|
+
| `showCopyButton` | `boolean` | `true` | Floating top-right 1-click "Copy Image" button. |
|
|
158
|
+
| `showZoomControls` | `boolean` | `false` | Floating bottom minimal zoom pill (`- 100% + Fit`). |
|
|
159
|
+
| `title` | `string` | `undefined` | Optional top-left title badge. |
|
|
160
|
+
|
|
104
161
|
---
|
|
105
162
|
|
|
106
163
|
## đšī¸ Programmatic Controller (`SketchController`)
|
package/dist/index.d.mts
CHANGED
|
@@ -62,7 +62,7 @@ interface SketchController {
|
|
|
62
62
|
getCamera: () => Camera;
|
|
63
63
|
setZoom: (scale: number) => void;
|
|
64
64
|
panTo: (x: number, y: number) => void;
|
|
65
|
-
zoomToFit: () => void;
|
|
65
|
+
zoomToFit: (padding?: number) => void;
|
|
66
66
|
resetZoom: () => void;
|
|
67
67
|
on: <T = unknown>(event: SketchEventType, handler: SketchEventHandler<T>) => () => void;
|
|
68
68
|
destroy: () => void;
|
|
@@ -101,22 +101,66 @@ declare function useSketchTheme(themeProp?: ThemeMode): {
|
|
|
101
101
|
/** Default starter elements provided when no document is supplied */
|
|
102
102
|
declare const DEFAULT_STARTER_ELEMENTS: SketchBoardElement[];
|
|
103
103
|
interface SketchUIConfig {
|
|
104
|
-
/** Display the top toolbar header */
|
|
104
|
+
/** Display the top toolbar header (default: true) */
|
|
105
105
|
showTopBar?: boolean;
|
|
106
|
-
/** Display
|
|
106
|
+
/** Display top bar Exit button (default: true if onExit provided) */
|
|
107
|
+
showExitButton?: boolean;
|
|
108
|
+
/** Display top bar board name title editor (default: true) */
|
|
109
|
+
showBoardName?: boolean;
|
|
110
|
+
/** Display top bar save status badge (default: true) */
|
|
111
|
+
showSaveIndicator?: boolean;
|
|
112
|
+
/** Display top bar undo/redo history buttons (default: true) */
|
|
113
|
+
showHistoryControls?: boolean;
|
|
114
|
+
/** Display top bar zoom percentage & reset controls (default: true) */
|
|
115
|
+
showZoomControls?: boolean;
|
|
116
|
+
/** Display top bar frames & artboards outline drawer toggle (default: true) */
|
|
117
|
+
showFramesOutline?: boolean;
|
|
118
|
+
/** Display presentation slideshow trigger and mode (default: true) */
|
|
119
|
+
showPresentation?: boolean;
|
|
120
|
+
/** Display top bar laser pointer toggle (default: true) */
|
|
121
|
+
showLaserPointer?: boolean;
|
|
122
|
+
/** Display top bar 1-click clipboard PNG copy button (default: true) */
|
|
123
|
+
showCopyImage?: boolean;
|
|
124
|
+
/** Display top bar clear canvas button (default: true) */
|
|
125
|
+
showClearButton?: boolean;
|
|
126
|
+
/** Display top bar export modal dropdown (default: true) */
|
|
127
|
+
showExportMenu?: boolean;
|
|
128
|
+
/** Display the left creation tool palette (default: true) */
|
|
107
129
|
showToolBar?: boolean;
|
|
108
|
-
/**
|
|
130
|
+
/** Show select & hand pan tools (default: true) */
|
|
131
|
+
showSelectTool?: boolean;
|
|
132
|
+
/** Show geometric shapes flyout (default: true) */
|
|
133
|
+
showShapeTools?: boolean;
|
|
134
|
+
/** Show freehand draw tool (default: true) */
|
|
135
|
+
showDrawTool?: boolean;
|
|
136
|
+
/** Show magnetic connector arrows and lines (default: true) */
|
|
137
|
+
showArrowTool?: boolean;
|
|
138
|
+
/** Show text typography tool (default: true) */
|
|
139
|
+
showTextTool?: boolean;
|
|
140
|
+
/** Show sticky notes tool (default: true) */
|
|
141
|
+
showStickyNoteTool?: boolean;
|
|
142
|
+
/** Show matrix and grid table generator (default: true) */
|
|
143
|
+
showTableTool?: boolean;
|
|
144
|
+
/** Show insert image upload tool (default: true) */
|
|
145
|
+
showImageUpload?: boolean;
|
|
146
|
+
/** Enable tech and cloud architecture stencils (default: true) */
|
|
147
|
+
showTechStencils?: boolean;
|
|
148
|
+
/** Enable diagram templates flyout (default: true) */
|
|
149
|
+
showTemplates?: boolean;
|
|
150
|
+
/** Show eraser tool (default: true) */
|
|
151
|
+
showEraserTool?: boolean;
|
|
152
|
+
/** Show lock active tool toggle (default: true) */
|
|
153
|
+
showLockTool?: boolean;
|
|
154
|
+
/** Display the right element styling and properties panel (default: true) */
|
|
109
155
|
showPropertiesPanel?: boolean;
|
|
110
|
-
/** Display the bottom-right workspace overview minimap */
|
|
156
|
+
/** Display the bottom-right workspace overview minimap (default: true) */
|
|
111
157
|
showMinimap?: boolean;
|
|
112
|
-
/** Display the bottom-left keyboard shortcuts button */
|
|
158
|
+
/** Display the bottom-left keyboard shortcuts button (default: true) */
|
|
113
159
|
showShortcutsButton?: boolean;
|
|
114
|
-
/** Display
|
|
115
|
-
|
|
116
|
-
/** Enable
|
|
117
|
-
|
|
118
|
-
/** Enable diagram templates flyout */
|
|
119
|
-
showTemplates?: boolean;
|
|
160
|
+
/** Display the bottom-left documentation guide button (default: true if guideHref/onOpenGuide provided) */
|
|
161
|
+
showGuideButton?: boolean;
|
|
162
|
+
/** Enable right-click context menu on canvas & elements (default: true) */
|
|
163
|
+
showContextMenu?: boolean;
|
|
120
164
|
}
|
|
121
165
|
interface SketchEditorProps {
|
|
122
166
|
/**
|
|
@@ -210,6 +254,73 @@ interface SketchEditorProps {
|
|
|
210
254
|
*/
|
|
211
255
|
declare const SketchEditor: React__default.ForwardRefExoticComponent<SketchEditorProps & React__default.RefAttributes<SketchController>>;
|
|
212
256
|
|
|
257
|
+
interface SketchViewerProps {
|
|
258
|
+
/**
|
|
259
|
+
* The document or elements array to render.
|
|
260
|
+
*/
|
|
261
|
+
value?: SketchDocument | SketchBoardElement[];
|
|
262
|
+
/**
|
|
263
|
+
* Initial document or elements array.
|
|
264
|
+
*/
|
|
265
|
+
defaultValue?: SketchDocument | SketchBoardElement[];
|
|
266
|
+
/**
|
|
267
|
+
* Color theme: 'light', 'dark', or 'system'. Default: 'system'.
|
|
268
|
+
*/
|
|
269
|
+
theme?: ThemeMode;
|
|
270
|
+
/**
|
|
271
|
+
* Canvas background color hex. Defaults to theme standard.
|
|
272
|
+
*/
|
|
273
|
+
canvasBackground?: string;
|
|
274
|
+
/**
|
|
275
|
+
* Grid pattern style: 'grid' | 'dots' | 'cross' | 'none'. Default: 'dots'.
|
|
276
|
+
*/
|
|
277
|
+
gridStyle?: GridStyle;
|
|
278
|
+
/**
|
|
279
|
+
* Allow mouse/touch pan and zoom interaction. Default: true.
|
|
280
|
+
* When false, the diagram behaves as a completely static vector illustration.
|
|
281
|
+
*/
|
|
282
|
+
interactive?: boolean;
|
|
283
|
+
/**
|
|
284
|
+
* Automatically centers and fits all elements into view on mount. Default: true.
|
|
285
|
+
*/
|
|
286
|
+
autoFit?: boolean;
|
|
287
|
+
/**
|
|
288
|
+
* Show a subtle 1-click 'Copy Image' button in the top-right corner. Default: true.
|
|
289
|
+
*/
|
|
290
|
+
showCopyButton?: boolean;
|
|
291
|
+
/**
|
|
292
|
+
* Show minimal zoom pill (- 100% + Fit) in the bottom corner. Default: false.
|
|
293
|
+
*/
|
|
294
|
+
showZoomControls?: boolean;
|
|
295
|
+
/**
|
|
296
|
+
* Optional custom title badge shown in the top-left corner.
|
|
297
|
+
*/
|
|
298
|
+
title?: string;
|
|
299
|
+
/**
|
|
300
|
+
* Granular UI visibility overrides.
|
|
301
|
+
*/
|
|
302
|
+
uiConfig?: SketchUIConfig;
|
|
303
|
+
/**
|
|
304
|
+
* Imperative controller ref for programmatic interaction.
|
|
305
|
+
*/
|
|
306
|
+
controllerRef?: React__default.Ref<SketchController>;
|
|
307
|
+
/**
|
|
308
|
+
* Custom CSS class name for the root container.
|
|
309
|
+
*/
|
|
310
|
+
className?: string;
|
|
311
|
+
/**
|
|
312
|
+
* Custom inline styles for the root container.
|
|
313
|
+
*/
|
|
314
|
+
style?: React__default.CSSProperties;
|
|
315
|
+
}
|
|
316
|
+
/**
|
|
317
|
+
* <SketchViewer />
|
|
318
|
+
*
|
|
319
|
+
* Lightweight, zero-chrome presentation viewer for documentation, MDX, and blog posts.
|
|
320
|
+
* Pre-configured with all editing controls hidden, read-only mode, and auto-fit viewport.
|
|
321
|
+
*/
|
|
322
|
+
declare const SketchViewer: React__default.ForwardRefExoticComponent<SketchViewerProps & React__default.RefAttributes<SketchController>>;
|
|
323
|
+
|
|
213
324
|
interface SketchBoardCanvasProps {
|
|
214
325
|
elements: SketchBoardElement[];
|
|
215
326
|
setElements: React__default.Dispatch<React__default.SetStateAction<SketchBoardElement[]>>;
|
|
@@ -232,6 +343,8 @@ interface SketchBoardCanvasProps {
|
|
|
232
343
|
worldToScreen: (pt: Point) => Point;
|
|
233
344
|
panBy: (dx: number, dy: number) => void;
|
|
234
345
|
zoomAtPoint: (factor: number, pivot: Point) => void;
|
|
346
|
+
readOnly?: boolean;
|
|
347
|
+
onDoubleClick?: () => void;
|
|
235
348
|
tool: ToolType;
|
|
236
349
|
setTool: (tool: ToolType) => void;
|
|
237
350
|
gridStyle: GridStyle;
|
|
@@ -249,7 +362,7 @@ interface SketchBoardCanvasProps {
|
|
|
249
362
|
laserPointerPos?: Point | null;
|
|
250
363
|
setLaserPointerPos?: (pt: Point | null) => void;
|
|
251
364
|
}
|
|
252
|
-
declare function SketchBoardCanvas({ elements, setElements, selectedIds, selectElement, selectElements, clearSelection, addElement, updateElement, deleteSelectedElements, duplicateSelectedElements, groupSelectedElements, ungroupSelectedElements, pushHistory, undo, redo, camera, screenToWorld, worldToScreen, panBy, zoomAtPoint, tool, setTool, isToolLocked, setIsToolLocked, gridStyle, defaultStyles, editingElementId: externalEditingId, setEditingElementId: setExternalEditingId, canvasBackground, isPresentationOpen, laserColor, laserMode, laserStrokes, setLaserStrokes, laserPointerPos, setLaserPointerPos, }: SketchBoardCanvasProps): React__default.JSX.Element;
|
|
365
|
+
declare function SketchBoardCanvas({ elements, setElements, selectedIds, selectElement, selectElements, clearSelection, addElement, updateElement, deleteSelectedElements, duplicateSelectedElements, groupSelectedElements, ungroupSelectedElements, pushHistory, undo, redo, camera, screenToWorld, worldToScreen, panBy, zoomAtPoint, tool, setTool, isToolLocked, setIsToolLocked, gridStyle, defaultStyles, editingElementId: externalEditingId, setEditingElementId: setExternalEditingId, canvasBackground, isPresentationOpen, laserColor, laserMode, laserStrokes, setLaserStrokes, laserPointerPos, setLaserPointerPos, readOnly, onDoubleClick, }: SketchBoardCanvasProps): React__default.JSX.Element;
|
|
253
366
|
|
|
254
367
|
interface SketchBoardToolBarProps {
|
|
255
368
|
tool: ToolType;
|
|
@@ -401,8 +514,10 @@ declare function SketchBoardFramesOutline({ isOpen, onClose, elements, setElemen
|
|
|
401
514
|
interface SketchBoardShortcutsModalProps {
|
|
402
515
|
guideHref?: string;
|
|
403
516
|
onOpenGuide?: () => void;
|
|
517
|
+
showShortcutsButton?: boolean;
|
|
518
|
+
showGuideButton?: boolean;
|
|
404
519
|
}
|
|
405
|
-
declare function SketchBoardShortcutsModal({ guideHref, onOpenGuide, }?: SketchBoardShortcutsModalProps): React__default.JSX.Element;
|
|
520
|
+
declare function SketchBoardShortcutsModal({ guideHref, onOpenGuide, showShortcutsButton, showGuideButton, }?: SketchBoardShortcutsModalProps): React__default.JSX.Element;
|
|
406
521
|
|
|
407
522
|
interface SketchBoardTechStencilsModalProps {
|
|
408
523
|
isOpen: boolean;
|
|
@@ -574,4 +689,4 @@ interface FileSaverOptions {
|
|
|
574
689
|
}
|
|
575
690
|
declare function saveOrDownloadFile(data: Blob | Uint8Array | string, filename: string, mimeTypeOrOptions?: string | FileSaverOptions): Promise<void>;
|
|
576
691
|
|
|
577
|
-
export { Camera, DEFAULT_ELEMENT_STYLES, DEFAULT_STARTER_ELEMENTS, DIAGRAM_TEMPLATES, GridStyle, LaserMode, LaserStroke, type PanelVariant, Point, SKETCH_DOCUMENT_VERSION, SketchBoardCanvas, SketchBoardContextMenu, SketchBoardElement, SketchBoardExportModal, SketchBoardFloatingDock, SketchBoardFramesOutline, SketchBoardLaserDock, SketchBoardMinimap, SketchBoardPresentationMode, SketchBoardPropertiesPanel, SketchBoardShortcutsModal, SketchBoardSpotlightOverlay, SketchBoardTechStencilsModal, SketchBoardTemplatesFlyout, SketchBoardToolBar, SketchBoardTopBar, type SketchController, type SketchDocument, SketchEditor, type SketchEditorProps, SketchEventEmitter, type SketchEventHandler, type SketchEventType, type SketchThemeContextValue, type SketchUIConfig, TECH_CATEGORIES, TECH_ICONS, type TechIcon, type TemplateDefinition, type ThemeMode, ToolType, alignElements, cloneSketchBoardElements, createEmptyDocument, distributeElements, isValidSketchDocument, parseDocument, saveOrDownloadFile, serializeDocument, updateBoundArrows, useHydrated, useSketchBoardCamera, useSketchBoardElements, useSketchBoardHistory, useSketchTheme, useSketchThemeContext };
|
|
692
|
+
export { Camera, DEFAULT_ELEMENT_STYLES, DEFAULT_STARTER_ELEMENTS, DIAGRAM_TEMPLATES, GridStyle, LaserMode, LaserStroke, type PanelVariant, Point, SKETCH_DOCUMENT_VERSION, SketchBoardCanvas, SketchBoardContextMenu, SketchBoardElement, SketchBoardExportModal, SketchBoardFloatingDock, SketchBoardFramesOutline, SketchBoardLaserDock, SketchBoardMinimap, SketchBoardPresentationMode, SketchBoardPropertiesPanel, SketchBoardShortcutsModal, SketchBoardSpotlightOverlay, SketchBoardTechStencilsModal, SketchBoardTemplatesFlyout, SketchBoardToolBar, SketchBoardTopBar, type SketchController, type SketchDocument, SketchEditor, type SketchEditorProps, SketchEventEmitter, type SketchEventHandler, type SketchEventType, type SketchThemeContextValue, type SketchUIConfig, SketchViewer, type SketchViewerProps, TECH_CATEGORIES, TECH_ICONS, type TechIcon, type TemplateDefinition, type ThemeMode, ToolType, alignElements, cloneSketchBoardElements, createEmptyDocument, distributeElements, isValidSketchDocument, parseDocument, saveOrDownloadFile, serializeDocument, updateBoundArrows, useHydrated, useSketchBoardCamera, useSketchBoardElements, useSketchBoardHistory, useSketchTheme, useSketchThemeContext };
|
package/dist/index.d.ts
CHANGED
|
@@ -62,7 +62,7 @@ interface SketchController {
|
|
|
62
62
|
getCamera: () => Camera;
|
|
63
63
|
setZoom: (scale: number) => void;
|
|
64
64
|
panTo: (x: number, y: number) => void;
|
|
65
|
-
zoomToFit: () => void;
|
|
65
|
+
zoomToFit: (padding?: number) => void;
|
|
66
66
|
resetZoom: () => void;
|
|
67
67
|
on: <T = unknown>(event: SketchEventType, handler: SketchEventHandler<T>) => () => void;
|
|
68
68
|
destroy: () => void;
|
|
@@ -101,22 +101,66 @@ declare function useSketchTheme(themeProp?: ThemeMode): {
|
|
|
101
101
|
/** Default starter elements provided when no document is supplied */
|
|
102
102
|
declare const DEFAULT_STARTER_ELEMENTS: SketchBoardElement[];
|
|
103
103
|
interface SketchUIConfig {
|
|
104
|
-
/** Display the top toolbar header */
|
|
104
|
+
/** Display the top toolbar header (default: true) */
|
|
105
105
|
showTopBar?: boolean;
|
|
106
|
-
/** Display
|
|
106
|
+
/** Display top bar Exit button (default: true if onExit provided) */
|
|
107
|
+
showExitButton?: boolean;
|
|
108
|
+
/** Display top bar board name title editor (default: true) */
|
|
109
|
+
showBoardName?: boolean;
|
|
110
|
+
/** Display top bar save status badge (default: true) */
|
|
111
|
+
showSaveIndicator?: boolean;
|
|
112
|
+
/** Display top bar undo/redo history buttons (default: true) */
|
|
113
|
+
showHistoryControls?: boolean;
|
|
114
|
+
/** Display top bar zoom percentage & reset controls (default: true) */
|
|
115
|
+
showZoomControls?: boolean;
|
|
116
|
+
/** Display top bar frames & artboards outline drawer toggle (default: true) */
|
|
117
|
+
showFramesOutline?: boolean;
|
|
118
|
+
/** Display presentation slideshow trigger and mode (default: true) */
|
|
119
|
+
showPresentation?: boolean;
|
|
120
|
+
/** Display top bar laser pointer toggle (default: true) */
|
|
121
|
+
showLaserPointer?: boolean;
|
|
122
|
+
/** Display top bar 1-click clipboard PNG copy button (default: true) */
|
|
123
|
+
showCopyImage?: boolean;
|
|
124
|
+
/** Display top bar clear canvas button (default: true) */
|
|
125
|
+
showClearButton?: boolean;
|
|
126
|
+
/** Display top bar export modal dropdown (default: true) */
|
|
127
|
+
showExportMenu?: boolean;
|
|
128
|
+
/** Display the left creation tool palette (default: true) */
|
|
107
129
|
showToolBar?: boolean;
|
|
108
|
-
/**
|
|
130
|
+
/** Show select & hand pan tools (default: true) */
|
|
131
|
+
showSelectTool?: boolean;
|
|
132
|
+
/** Show geometric shapes flyout (default: true) */
|
|
133
|
+
showShapeTools?: boolean;
|
|
134
|
+
/** Show freehand draw tool (default: true) */
|
|
135
|
+
showDrawTool?: boolean;
|
|
136
|
+
/** Show magnetic connector arrows and lines (default: true) */
|
|
137
|
+
showArrowTool?: boolean;
|
|
138
|
+
/** Show text typography tool (default: true) */
|
|
139
|
+
showTextTool?: boolean;
|
|
140
|
+
/** Show sticky notes tool (default: true) */
|
|
141
|
+
showStickyNoteTool?: boolean;
|
|
142
|
+
/** Show matrix and grid table generator (default: true) */
|
|
143
|
+
showTableTool?: boolean;
|
|
144
|
+
/** Show insert image upload tool (default: true) */
|
|
145
|
+
showImageUpload?: boolean;
|
|
146
|
+
/** Enable tech and cloud architecture stencils (default: true) */
|
|
147
|
+
showTechStencils?: boolean;
|
|
148
|
+
/** Enable diagram templates flyout (default: true) */
|
|
149
|
+
showTemplates?: boolean;
|
|
150
|
+
/** Show eraser tool (default: true) */
|
|
151
|
+
showEraserTool?: boolean;
|
|
152
|
+
/** Show lock active tool toggle (default: true) */
|
|
153
|
+
showLockTool?: boolean;
|
|
154
|
+
/** Display the right element styling and properties panel (default: true) */
|
|
109
155
|
showPropertiesPanel?: boolean;
|
|
110
|
-
/** Display the bottom-right workspace overview minimap */
|
|
156
|
+
/** Display the bottom-right workspace overview minimap (default: true) */
|
|
111
157
|
showMinimap?: boolean;
|
|
112
|
-
/** Display the bottom-left keyboard shortcuts button */
|
|
158
|
+
/** Display the bottom-left keyboard shortcuts button (default: true) */
|
|
113
159
|
showShortcutsButton?: boolean;
|
|
114
|
-
/** Display
|
|
115
|
-
|
|
116
|
-
/** Enable
|
|
117
|
-
|
|
118
|
-
/** Enable diagram templates flyout */
|
|
119
|
-
showTemplates?: boolean;
|
|
160
|
+
/** Display the bottom-left documentation guide button (default: true if guideHref/onOpenGuide provided) */
|
|
161
|
+
showGuideButton?: boolean;
|
|
162
|
+
/** Enable right-click context menu on canvas & elements (default: true) */
|
|
163
|
+
showContextMenu?: boolean;
|
|
120
164
|
}
|
|
121
165
|
interface SketchEditorProps {
|
|
122
166
|
/**
|
|
@@ -210,6 +254,73 @@ interface SketchEditorProps {
|
|
|
210
254
|
*/
|
|
211
255
|
declare const SketchEditor: React__default.ForwardRefExoticComponent<SketchEditorProps & React__default.RefAttributes<SketchController>>;
|
|
212
256
|
|
|
257
|
+
interface SketchViewerProps {
|
|
258
|
+
/**
|
|
259
|
+
* The document or elements array to render.
|
|
260
|
+
*/
|
|
261
|
+
value?: SketchDocument | SketchBoardElement[];
|
|
262
|
+
/**
|
|
263
|
+
* Initial document or elements array.
|
|
264
|
+
*/
|
|
265
|
+
defaultValue?: SketchDocument | SketchBoardElement[];
|
|
266
|
+
/**
|
|
267
|
+
* Color theme: 'light', 'dark', or 'system'. Default: 'system'.
|
|
268
|
+
*/
|
|
269
|
+
theme?: ThemeMode;
|
|
270
|
+
/**
|
|
271
|
+
* Canvas background color hex. Defaults to theme standard.
|
|
272
|
+
*/
|
|
273
|
+
canvasBackground?: string;
|
|
274
|
+
/**
|
|
275
|
+
* Grid pattern style: 'grid' | 'dots' | 'cross' | 'none'. Default: 'dots'.
|
|
276
|
+
*/
|
|
277
|
+
gridStyle?: GridStyle;
|
|
278
|
+
/**
|
|
279
|
+
* Allow mouse/touch pan and zoom interaction. Default: true.
|
|
280
|
+
* When false, the diagram behaves as a completely static vector illustration.
|
|
281
|
+
*/
|
|
282
|
+
interactive?: boolean;
|
|
283
|
+
/**
|
|
284
|
+
* Automatically centers and fits all elements into view on mount. Default: true.
|
|
285
|
+
*/
|
|
286
|
+
autoFit?: boolean;
|
|
287
|
+
/**
|
|
288
|
+
* Show a subtle 1-click 'Copy Image' button in the top-right corner. Default: true.
|
|
289
|
+
*/
|
|
290
|
+
showCopyButton?: boolean;
|
|
291
|
+
/**
|
|
292
|
+
* Show minimal zoom pill (- 100% + Fit) in the bottom corner. Default: false.
|
|
293
|
+
*/
|
|
294
|
+
showZoomControls?: boolean;
|
|
295
|
+
/**
|
|
296
|
+
* Optional custom title badge shown in the top-left corner.
|
|
297
|
+
*/
|
|
298
|
+
title?: string;
|
|
299
|
+
/**
|
|
300
|
+
* Granular UI visibility overrides.
|
|
301
|
+
*/
|
|
302
|
+
uiConfig?: SketchUIConfig;
|
|
303
|
+
/**
|
|
304
|
+
* Imperative controller ref for programmatic interaction.
|
|
305
|
+
*/
|
|
306
|
+
controllerRef?: React__default.Ref<SketchController>;
|
|
307
|
+
/**
|
|
308
|
+
* Custom CSS class name for the root container.
|
|
309
|
+
*/
|
|
310
|
+
className?: string;
|
|
311
|
+
/**
|
|
312
|
+
* Custom inline styles for the root container.
|
|
313
|
+
*/
|
|
314
|
+
style?: React__default.CSSProperties;
|
|
315
|
+
}
|
|
316
|
+
/**
|
|
317
|
+
* <SketchViewer />
|
|
318
|
+
*
|
|
319
|
+
* Lightweight, zero-chrome presentation viewer for documentation, MDX, and blog posts.
|
|
320
|
+
* Pre-configured with all editing controls hidden, read-only mode, and auto-fit viewport.
|
|
321
|
+
*/
|
|
322
|
+
declare const SketchViewer: React__default.ForwardRefExoticComponent<SketchViewerProps & React__default.RefAttributes<SketchController>>;
|
|
323
|
+
|
|
213
324
|
interface SketchBoardCanvasProps {
|
|
214
325
|
elements: SketchBoardElement[];
|
|
215
326
|
setElements: React__default.Dispatch<React__default.SetStateAction<SketchBoardElement[]>>;
|
|
@@ -232,6 +343,8 @@ interface SketchBoardCanvasProps {
|
|
|
232
343
|
worldToScreen: (pt: Point) => Point;
|
|
233
344
|
panBy: (dx: number, dy: number) => void;
|
|
234
345
|
zoomAtPoint: (factor: number, pivot: Point) => void;
|
|
346
|
+
readOnly?: boolean;
|
|
347
|
+
onDoubleClick?: () => void;
|
|
235
348
|
tool: ToolType;
|
|
236
349
|
setTool: (tool: ToolType) => void;
|
|
237
350
|
gridStyle: GridStyle;
|
|
@@ -249,7 +362,7 @@ interface SketchBoardCanvasProps {
|
|
|
249
362
|
laserPointerPos?: Point | null;
|
|
250
363
|
setLaserPointerPos?: (pt: Point | null) => void;
|
|
251
364
|
}
|
|
252
|
-
declare function SketchBoardCanvas({ elements, setElements, selectedIds, selectElement, selectElements, clearSelection, addElement, updateElement, deleteSelectedElements, duplicateSelectedElements, groupSelectedElements, ungroupSelectedElements, pushHistory, undo, redo, camera, screenToWorld, worldToScreen, panBy, zoomAtPoint, tool, setTool, isToolLocked, setIsToolLocked, gridStyle, defaultStyles, editingElementId: externalEditingId, setEditingElementId: setExternalEditingId, canvasBackground, isPresentationOpen, laserColor, laserMode, laserStrokes, setLaserStrokes, laserPointerPos, setLaserPointerPos, }: SketchBoardCanvasProps): React__default.JSX.Element;
|
|
365
|
+
declare function SketchBoardCanvas({ elements, setElements, selectedIds, selectElement, selectElements, clearSelection, addElement, updateElement, deleteSelectedElements, duplicateSelectedElements, groupSelectedElements, ungroupSelectedElements, pushHistory, undo, redo, camera, screenToWorld, worldToScreen, panBy, zoomAtPoint, tool, setTool, isToolLocked, setIsToolLocked, gridStyle, defaultStyles, editingElementId: externalEditingId, setEditingElementId: setExternalEditingId, canvasBackground, isPresentationOpen, laserColor, laserMode, laserStrokes, setLaserStrokes, laserPointerPos, setLaserPointerPos, readOnly, onDoubleClick, }: SketchBoardCanvasProps): React__default.JSX.Element;
|
|
253
366
|
|
|
254
367
|
interface SketchBoardToolBarProps {
|
|
255
368
|
tool: ToolType;
|
|
@@ -401,8 +514,10 @@ declare function SketchBoardFramesOutline({ isOpen, onClose, elements, setElemen
|
|
|
401
514
|
interface SketchBoardShortcutsModalProps {
|
|
402
515
|
guideHref?: string;
|
|
403
516
|
onOpenGuide?: () => void;
|
|
517
|
+
showShortcutsButton?: boolean;
|
|
518
|
+
showGuideButton?: boolean;
|
|
404
519
|
}
|
|
405
|
-
declare function SketchBoardShortcutsModal({ guideHref, onOpenGuide, }?: SketchBoardShortcutsModalProps): React__default.JSX.Element;
|
|
520
|
+
declare function SketchBoardShortcutsModal({ guideHref, onOpenGuide, showShortcutsButton, showGuideButton, }?: SketchBoardShortcutsModalProps): React__default.JSX.Element;
|
|
406
521
|
|
|
407
522
|
interface SketchBoardTechStencilsModalProps {
|
|
408
523
|
isOpen: boolean;
|
|
@@ -574,4 +689,4 @@ interface FileSaverOptions {
|
|
|
574
689
|
}
|
|
575
690
|
declare function saveOrDownloadFile(data: Blob | Uint8Array | string, filename: string, mimeTypeOrOptions?: string | FileSaverOptions): Promise<void>;
|
|
576
691
|
|
|
577
|
-
export { Camera, DEFAULT_ELEMENT_STYLES, DEFAULT_STARTER_ELEMENTS, DIAGRAM_TEMPLATES, GridStyle, LaserMode, LaserStroke, type PanelVariant, Point, SKETCH_DOCUMENT_VERSION, SketchBoardCanvas, SketchBoardContextMenu, SketchBoardElement, SketchBoardExportModal, SketchBoardFloatingDock, SketchBoardFramesOutline, SketchBoardLaserDock, SketchBoardMinimap, SketchBoardPresentationMode, SketchBoardPropertiesPanel, SketchBoardShortcutsModal, SketchBoardSpotlightOverlay, SketchBoardTechStencilsModal, SketchBoardTemplatesFlyout, SketchBoardToolBar, SketchBoardTopBar, type SketchController, type SketchDocument, SketchEditor, type SketchEditorProps, SketchEventEmitter, type SketchEventHandler, type SketchEventType, type SketchThemeContextValue, type SketchUIConfig, TECH_CATEGORIES, TECH_ICONS, type TechIcon, type TemplateDefinition, type ThemeMode, ToolType, alignElements, cloneSketchBoardElements, createEmptyDocument, distributeElements, isValidSketchDocument, parseDocument, saveOrDownloadFile, serializeDocument, updateBoundArrows, useHydrated, useSketchBoardCamera, useSketchBoardElements, useSketchBoardHistory, useSketchTheme, useSketchThemeContext };
|
|
692
|
+
export { Camera, DEFAULT_ELEMENT_STYLES, DEFAULT_STARTER_ELEMENTS, DIAGRAM_TEMPLATES, GridStyle, LaserMode, LaserStroke, type PanelVariant, Point, SKETCH_DOCUMENT_VERSION, SketchBoardCanvas, SketchBoardContextMenu, SketchBoardElement, SketchBoardExportModal, SketchBoardFloatingDock, SketchBoardFramesOutline, SketchBoardLaserDock, SketchBoardMinimap, SketchBoardPresentationMode, SketchBoardPropertiesPanel, SketchBoardShortcutsModal, SketchBoardSpotlightOverlay, SketchBoardTechStencilsModal, SketchBoardTemplatesFlyout, SketchBoardToolBar, SketchBoardTopBar, type SketchController, type SketchDocument, SketchEditor, type SketchEditorProps, SketchEventEmitter, type SketchEventHandler, type SketchEventType, type SketchThemeContextValue, type SketchUIConfig, SketchViewer, type SketchViewerProps, TECH_CATEGORIES, TECH_ICONS, type TechIcon, type TemplateDefinition, type ThemeMode, ToolType, alignElements, cloneSketchBoardElements, createEmptyDocument, distributeElements, isValidSketchDocument, parseDocument, saveOrDownloadFile, serializeDocument, updateBoundArrows, useHydrated, useSketchBoardCamera, useSketchBoardElements, useSketchBoardHistory, useSketchTheme, useSketchThemeContext };
|