kritzel-react 0.3.15 → 0.3.17
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.md
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
# Software License Agreement
|
|
2
|
+
|
|
3
|
+
**IMPORTANT NOTICE:** This is a source-available, non-commercial license.
|
|
4
|
+
* **Hobbyists & Personal Use:** 100% Free. You are welcome to use, modify, and experiment with this software for personal, hobby, or educational projects.
|
|
5
|
+
* **Commercial & Professional Use:** Strictly Prohibited. If you want to use this software in a corporate environment, for professional client work, or as part of a revenue-generating product, you must obtain a commercial license.
|
|
6
|
+
|
|
7
|
+
To purchase a commercial license, please visit: https://kritzel.io
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
## PolyForm Noncommercial License 1.0.0
|
|
12
|
+
|
|
13
|
+
### Acceptance
|
|
14
|
+
By using or distributing this software, you accept this license.
|
|
15
|
+
|
|
16
|
+
### User
|
|
17
|
+
You is the person or organization who accepts this license. You can accept this license for only yourself or for an organization.
|
|
18
|
+
|
|
19
|
+
### Software
|
|
20
|
+
Software is the software that includes this license text.
|
|
21
|
+
|
|
22
|
+
### Practice
|
|
23
|
+
Practice is to use, copy, modify, distribute, or make derivative works of the Software.
|
|
24
|
+
|
|
25
|
+
### Grant
|
|
26
|
+
You may Practice the Software for noncommercial purposes.
|
|
27
|
+
|
|
28
|
+
### Noncommercial Purposes
|
|
29
|
+
Noncommercial purposes are purposes that are not commercial purposes.
|
|
30
|
+
|
|
31
|
+
### Commercial Purposes
|
|
32
|
+
Commercial purposes are purposes intended for or directed toward commercial advantage or monetary compensation. Commercial purposes include, but are not limited to, using the Software to provide services to others for a fee, using the Software as part of a product sold or licensed to others, or using the Software inside a business or for professional work.
|
|
33
|
+
|
|
34
|
+
### Redistribution
|
|
35
|
+
You may redistribute copies of the Software, with or without modification, provided that you include this license text with every copy.
|
|
36
|
+
|
|
37
|
+
### Notices
|
|
38
|
+
You must ensure that any copy of the Software you distribute includes all copyright notices, trademark notices, and other legal notices included in the Software.
|
|
39
|
+
|
|
40
|
+
### No Other Rights
|
|
41
|
+
This license does not grant any patent rights or trademark rights.
|
|
42
|
+
|
|
43
|
+
### Termination
|
|
44
|
+
If you violate any term of this license, your rights under this license terminate immediately.
|
|
45
|
+
|
|
46
|
+
### Defensive Patent Claims
|
|
47
|
+
If you make a patent claim against anyone alleging that the Software infringes a patent, your rights under this license terminate immediately.
|
|
48
|
+
|
|
49
|
+
### No Warranty
|
|
50
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,23 +1,96 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Kritzel for React
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Build infinite canvas and collaborative whiteboard experiences in React with Kritzel's native wrapper and TypeScript-first API.
|
|
4
|
+
|
|
5
|
+
Kritzel is a framework-agnostic infinite canvas and collaborative whiteboard engine. It provides web components that work natively in any framework, with a first-class React wrapper for idiomatic JSX integration.
|
|
6
|
+
|
|
7
|
+
Kritzel handles the hard parts of canvas-based applications — infinite pan and zoom, hit-testing, CRDT-based collaboration, undo and redo, and cross-browser rendering — so you can focus on your product's domain logic.
|
|
8
|
+
|
|
9
|
+
📖 **Full documentation:** [kritzel.io/docs/react/overview](https://kritzel.io/docs/react/overview)
|
|
10
|
+
|
|
11
|
+
## Installation
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install kritzel-react
|
|
4
15
|
```
|
|
5
|
-
|
|
16
|
+
|
|
17
|
+
## Setup
|
|
18
|
+
|
|
19
|
+
Render Kritzel in your component:
|
|
20
|
+
|
|
21
|
+
```tsx
|
|
22
|
+
import { KritzelEditor } from 'kritzel-react';
|
|
23
|
+
|
|
24
|
+
export function Editor() {
|
|
25
|
+
return <KritzelEditor style={{ display: 'block', width: '100%', height: '100vh' }} />;
|
|
26
|
+
}
|
|
6
27
|
```
|
|
7
28
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
29
|
+
This renders the editor with the **full default toolbar**: selection, brush, eraser, line, shape, text, and image tools.
|
|
30
|
+
|
|
31
|
+
## Optional Enhancements
|
|
32
|
+
|
|
33
|
+
### Persist Canvas State
|
|
34
|
+
|
|
35
|
+
By default, the editor uses an empty sync provider list, so canvas state is reset on reload. To persist objects locally across page reloads, configure `syncConfig` explicitly with `IndexedDBSyncProvider`.
|
|
36
|
+
|
|
37
|
+
```tsx
|
|
38
|
+
import { KritzelEditor, IndexedDBSyncProvider } from 'kritzel-react';
|
|
11
39
|
|
|
12
|
-
function
|
|
40
|
+
export function Editor() {
|
|
41
|
+
const syncConfig = {
|
|
42
|
+
providers: [IndexedDBSyncProvider],
|
|
43
|
+
};
|
|
13
44
|
|
|
14
45
|
return (
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
)
|
|
46
|
+
<KritzelEditor
|
|
47
|
+
syncConfig={syncConfig}
|
|
48
|
+
style={{ display: 'block', width: '100%', height: '100vh' }}
|
|
49
|
+
/>
|
|
50
|
+
);
|
|
20
51
|
}
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
### Apply Full Viewport Styling
|
|
55
|
+
|
|
56
|
+
To ensure the Kritzel editor occupies the entire viewport and prevents unwanted scrolling, add the following CSS to your global stylesheet (e.g. `styles.css`):
|
|
57
|
+
|
|
58
|
+
```css
|
|
59
|
+
html,
|
|
60
|
+
body,
|
|
61
|
+
#root {
|
|
62
|
+
width: 100dvw;
|
|
63
|
+
height: 100dvh;
|
|
64
|
+
margin: 0;
|
|
65
|
+
padding: 0;
|
|
66
|
+
overflow: hidden;
|
|
67
|
+
}
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
### Include Mobile Viewport Meta Tag
|
|
21
71
|
|
|
22
|
-
|
|
72
|
+
For optimal rendering and responsiveness on mobile devices, add this meta tag within the `<head>` section of your `index.html`:
|
|
73
|
+
|
|
74
|
+
```html
|
|
75
|
+
<meta
|
|
76
|
+
name="viewport"
|
|
77
|
+
content="viewport-fit=cover, width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0, interactive-widget=resizes-content"
|
|
78
|
+
/>
|
|
23
79
|
```
|
|
80
|
+
|
|
81
|
+
## Core Concepts
|
|
82
|
+
|
|
83
|
+
Kritzel is composed of a small set of core concepts that work together to power your canvas experience:
|
|
84
|
+
|
|
85
|
+
- **Components** — Two entry points, a batteries-included editor and a headless engine, to match any integration style.
|
|
86
|
+
- **Tools** — State-machine interaction handlers that define how users draw, select, and manipulate the canvas.
|
|
87
|
+
- **Objects** — The visual building blocks on the canvas, such as paths, shapes, text, and images with shared spatial properties.
|
|
88
|
+
- **Workspaces** — Containers that manage an entire canvas collection, view state, and editor configuration.
|
|
89
|
+
- **Theming** — Built-in light and dark themes with full CSS variable customization to match your brand.
|
|
90
|
+
- **Collaboration** — Real-time multi-user sync powered by Yjs CRDTs with pluggable transport providers.
|
|
91
|
+
|
|
92
|
+
Learn more in the [full documentation](https://kritzel.io/docs/react/overview).
|
|
93
|
+
|
|
94
|
+
## License
|
|
95
|
+
|
|
96
|
+
See [LICENSE.md](./LICENSE.md). Kritzel is free for personal, hobby, and educational use. Commercial use requires a license — visit [kritzel.io](https://kritzel.io) for details.
|
|
@@ -7,6 +7,7 @@ import { KritzelButton as KritzelButtonElement, defineCustomElement as defineKri
|
|
|
7
7
|
import { KritzelCurrentUserDialog as KritzelCurrentUserDialogElement, defineCustomElement as defineKritzelCurrentUserDialog } from "../../../../kritzel-stencil/dist/components/kritzel-current-user-dialog.js";
|
|
8
8
|
import { KritzelDialog as KritzelDialogElement, defineCustomElement as defineKritzelDialog } from "../../../../kritzel-stencil/dist/components/kritzel-dialog.js";
|
|
9
9
|
import { KritzelEditor as KritzelEditorElement, defineCustomElement as defineKritzelEditor } from "../../../../kritzel-stencil/dist/components/kritzel-editor.js";
|
|
10
|
+
import { KritzelEngine as KritzelEngineElement, defineCustomElement as defineKritzelEngine } from "../../../../kritzel-stencil/dist/components/kritzel-engine.js";
|
|
10
11
|
import { KritzelExport as KritzelExportElement, defineCustomElement as defineKritzelExport } from "../../../../kritzel-stencil/dist/components/kritzel-export.js";
|
|
11
12
|
import { KritzelInput as KritzelInputElement, defineCustomElement as defineKritzelInput } from "../../../../kritzel-stencil/dist/components/kritzel-input.js";
|
|
12
13
|
import { KritzelLineEndings as KritzelLineEndingsElement, defineCustomElement as defineKritzelLineEndings } from "../../../../kritzel-stencil/dist/components/kritzel-line-endings.js";
|
|
@@ -16,6 +17,8 @@ import { KritzelNumericInput as KritzelNumericInputElement, defineCustomElement
|
|
|
16
17
|
import { KritzelOpacitySlider as KritzelOpacitySliderElement, defineCustomElement as defineKritzelOpacitySlider } from "../../../../kritzel-stencil/dist/components/kritzel-opacity-slider.js";
|
|
17
18
|
import { KritzelPillTabs as KritzelPillTabsElement, defineCustomElement as defineKritzelPillTabs } from "../../../../kritzel-stencil/dist/components/kritzel-pill-tabs.js";
|
|
18
19
|
import { KritzelSettings as KritzelSettingsElement, defineCustomElement as defineKritzelSettings } from "../../../../kritzel-stencil/dist/components/kritzel-settings.js";
|
|
20
|
+
import { KritzelWatermark as KritzelWatermarkElement, defineCustomElement as defineKritzelWatermark } from "../../../../kritzel-stencil/dist/components/kritzel-watermark.js";
|
|
21
|
+
import { KritzelZoomPanel as KritzelZoomPanelElement, defineCustomElement as defineKritzelZoomPanel } from "../../../../kritzel-stencil/dist/components/kritzel-zoom-panel.js";
|
|
19
22
|
export const KritzelAwarenessCursors = /*@__PURE__*/ createComponent({
|
|
20
23
|
tagName: 'kritzel-awareness-cursors',
|
|
21
24
|
elementClass: KritzelAwarenessCursorsElement,
|
|
@@ -73,6 +76,7 @@ export const KritzelEditor = /*@__PURE__*/ createComponent({
|
|
|
73
76
|
onObjectsUpdated: 'objectsUpdated',
|
|
74
77
|
onUndoStateChange: 'undoStateChange',
|
|
75
78
|
onThemeChange: 'themeChange',
|
|
79
|
+
onLocaleChange: 'localeChange',
|
|
76
80
|
onViewportChange: 'viewportChange',
|
|
77
81
|
onLogout: 'logout',
|
|
78
82
|
onLogin: 'login',
|
|
@@ -81,6 +85,29 @@ export const KritzelEditor = /*@__PURE__*/ createComponent({
|
|
|
81
85
|
},
|
|
82
86
|
defineCustomElement: defineKritzelEditor
|
|
83
87
|
});
|
|
88
|
+
export const KritzelEngine = /*@__PURE__*/ createComponent({
|
|
89
|
+
tagName: 'kritzel-engine',
|
|
90
|
+
elementClass: KritzelEngineElement,
|
|
91
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
92
|
+
react: React,
|
|
93
|
+
events: {
|
|
94
|
+
onIsEngineReady: 'isEngineReady',
|
|
95
|
+
onActiveToolChange: 'activeToolChange',
|
|
96
|
+
onObjectsSelectionChange: 'objectsSelectionChange',
|
|
97
|
+
onWorkspacesChange: 'workspacesChange',
|
|
98
|
+
onActiveWorkspaceChange: 'activeWorkspaceChange',
|
|
99
|
+
onLongpress: 'longpress',
|
|
100
|
+
onObjectsChange: 'objectsChange',
|
|
101
|
+
onObjectsAdded: 'objectsAdded',
|
|
102
|
+
onObjectsRemoved: 'objectsRemoved',
|
|
103
|
+
onObjectsUpdated: 'objectsUpdated',
|
|
104
|
+
onUndoStateChange: 'undoStateChange',
|
|
105
|
+
onObjectsInViewportChange: 'objectsInViewportChange',
|
|
106
|
+
onViewportChange: 'viewportChange',
|
|
107
|
+
onAwarenessChange: 'awarenessChange'
|
|
108
|
+
},
|
|
109
|
+
defineCustomElement: defineKritzelEngine
|
|
110
|
+
});
|
|
84
111
|
export const KritzelExport = /*@__PURE__*/ createComponent({
|
|
85
112
|
tagName: 'kritzel-export',
|
|
86
113
|
elementClass: KritzelExportElement,
|
|
@@ -160,3 +187,22 @@ export const KritzelSettings = /*@__PURE__*/ createComponent({
|
|
|
160
187
|
events: { onSettingsChange: 'settingsChange' },
|
|
161
188
|
defineCustomElement: defineKritzelSettings
|
|
162
189
|
});
|
|
190
|
+
export const KritzelWatermark = /*@__PURE__*/ createComponent({
|
|
191
|
+
tagName: 'kritzel-watermark',
|
|
192
|
+
elementClass: KritzelWatermarkElement,
|
|
193
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
194
|
+
react: React,
|
|
195
|
+
events: {},
|
|
196
|
+
defineCustomElement: defineKritzelWatermark
|
|
197
|
+
});
|
|
198
|
+
export const KritzelZoomPanel = /*@__PURE__*/ createComponent({
|
|
199
|
+
tagName: 'kritzel-zoom-panel',
|
|
200
|
+
elementClass: KritzelZoomPanelElement,
|
|
201
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
202
|
+
react: React,
|
|
203
|
+
events: {
|
|
204
|
+
onZoomIn: 'zoomIn',
|
|
205
|
+
onZoomOut: 'zoomOut'
|
|
206
|
+
},
|
|
207
|
+
defineCustomElement: defineKritzelZoomPanel
|
|
208
|
+
});
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export * from './components/stencil-generated/components';
|
|
2
|
-
export { KritzelBaseObject, KritzelText, KritzelPath, KritzelImage, KritzelLine, KritzelShape, KritzelGroup, KritzelBrushTool, KritzelTextTool, KritzelLineTool, KritzelShapeTool, KritzelEraserTool, KritzelSelectionTool, KritzelImageTool, KritzelWorkspace, InMemorySyncProvider, IndexedDBSyncProvider, BroadcastSyncProvider, WebSocketSyncProvider, HocuspocusSyncProvider, KritzelThemeManager, ShapeType, KritzelAlignment, lightTheme, darkTheme, DEFAULT_BRUSH_CONFIG, DEFAULT_TEXT_CONFIG, } from 'kritzel-stencil';
|
|
2
|
+
export { KritzelBaseObject, KritzelText, KritzelPath, KritzelImage, KritzelLine, KritzelShape, KritzelGroup, KritzelBaseTool, KritzelBrushTool, KritzelTextTool, KritzelLineTool, KritzelShapeTool, KritzelEraserTool, KritzelSelectionTool, KritzelImageTool, KritzelWorkspace, InMemorySyncProvider, IndexedDBSyncProvider, BroadcastSyncProvider, WebSocketSyncProvider, HocuspocusSyncProvider, KritzelThemeManager, KritzelLocalizationManager, KritzelLicenseManager, ShapeType, KritzelAlignment, lightTheme, darkTheme, EN_LOCALE, DE_LOCALE, FR_LOCALE, DEFAULT_BRUSH_CONFIG, DEFAULT_TEXT_CONFIG, } from 'kritzel-stencil';
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
|
|
4
4
|
*/
|
|
5
5
|
import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
|
|
6
|
-
import { type ActiveWorkspaceChangeEvent, type EditorIsReadyEvent, type IKritzelDialogCloseEvent, type IKritzelIsPublicChangedEvent, type IKritzelMasterDetailSelectEvent, type KritzelBackToContentCustomEvent, type KritzelBaseObject, type KritzelButtonCustomEvent, type KritzelDialogCustomEvent, type KritzelEditorCustomEvent, type KritzelExportCustomEvent, type KritzelInputCustomEvent, type KritzelLineEndingsCustomEvent, type KritzelLoginDialogCustomEvent, type KritzelMasterDetailCustomEvent, type KritzelNumericInputCustomEvent, type KritzelOpacitySliderCustomEvent, type KritzelPillTabsCustomEvent, type KritzelSettingsConfig, type KritzelSettingsCustomEvent, type KritzelUndoState, type KritzelViewportState, type LineArrowConfig, type LoginEvent, type ObjectsAddedEvent, type ObjectsRemovedEvent, type ObjectsUpdatedEvent, type ThemeName } from "../../../../kritzel-stencil";
|
|
6
|
+
import { type ActiveWorkspaceChangeEvent, type EditorIsReadyEvent, type IKritzelDialogCloseEvent, type IKritzelIsPublicChangedEvent, type IKritzelMasterDetailSelectEvent, type KritzelBackToContentCustomEvent, type KritzelBaseObject, type KritzelBaseTool, type KritzelButtonCustomEvent, type KritzelDialogCustomEvent, type KritzelEditorCustomEvent, type KritzelEngineCustomEvent, type KritzelEngineState, type KritzelExportCustomEvent, type KritzelInputCustomEvent, type KritzelLineEndingsCustomEvent, type KritzelLoginDialogCustomEvent, type KritzelMasterDetailCustomEvent, type KritzelNumericInputCustomEvent, type KritzelOpacitySliderCustomEvent, type KritzelPillTabsCustomEvent, type KritzelSettingsConfig, type KritzelSettingsCustomEvent, type KritzelUndoState, type KritzelViewportState, type KritzelWorkspace, type KritzelZoomPanelCustomEvent, type LineArrowConfig, type LocaleCode, type LoginEvent, type ObjectsAddedEvent, type ObjectsInViewportChangeEvent, type ObjectsRemovedEvent, type ObjectsUpdatedEvent, type ThemeName } from "../../../../kritzel-stencil";
|
|
7
7
|
import type { Components } from "../../../../kritzel-stencil/dist/components";
|
|
8
8
|
import { KritzelAwarenessCursors as KritzelAwarenessCursorsElement } from "../../../../kritzel-stencil/dist/components/kritzel-awareness-cursors.js";
|
|
9
9
|
import { KritzelBackToContent as KritzelBackToContentElement } from "../../../../kritzel-stencil/dist/components/kritzel-back-to-content.js";
|
|
@@ -11,6 +11,7 @@ import { KritzelButton as KritzelButtonElement } from "../../../../kritzel-stenc
|
|
|
11
11
|
import { KritzelCurrentUserDialog as KritzelCurrentUserDialogElement } from "../../../../kritzel-stencil/dist/components/kritzel-current-user-dialog.js";
|
|
12
12
|
import { KritzelDialog as KritzelDialogElement } from "../../../../kritzel-stencil/dist/components/kritzel-dialog.js";
|
|
13
13
|
import { KritzelEditor as KritzelEditorElement } from "../../../../kritzel-stencil/dist/components/kritzel-editor.js";
|
|
14
|
+
import { KritzelEngine as KritzelEngineElement } from "../../../../kritzel-stencil/dist/components/kritzel-engine.js";
|
|
14
15
|
import { KritzelExport as KritzelExportElement } from "../../../../kritzel-stencil/dist/components/kritzel-export.js";
|
|
15
16
|
import { KritzelInput as KritzelInputElement } from "../../../../kritzel-stencil/dist/components/kritzel-input.js";
|
|
16
17
|
import { KritzelLineEndings as KritzelLineEndingsElement } from "../../../../kritzel-stencil/dist/components/kritzel-line-endings.js";
|
|
@@ -20,6 +21,8 @@ import { KritzelNumericInput as KritzelNumericInputElement } from "../../../../k
|
|
|
20
21
|
import { KritzelOpacitySlider as KritzelOpacitySliderElement } from "../../../../kritzel-stencil/dist/components/kritzel-opacity-slider.js";
|
|
21
22
|
import { KritzelPillTabs as KritzelPillTabsElement } from "../../../../kritzel-stencil/dist/components/kritzel-pill-tabs.js";
|
|
22
23
|
import { KritzelSettings as KritzelSettingsElement } from "../../../../kritzel-stencil/dist/components/kritzel-settings.js";
|
|
24
|
+
import { KritzelWatermark as KritzelWatermarkElement } from "../../../../kritzel-stencil/dist/components/kritzel-watermark.js";
|
|
25
|
+
import { KritzelZoomPanel as KritzelZoomPanelElement } from "../../../../kritzel-stencil/dist/components/kritzel-zoom-panel.js";
|
|
23
26
|
export type KritzelAwarenessCursorsEvents = NonNullable<unknown>;
|
|
24
27
|
export declare const KritzelAwarenessCursors: StencilReactComponent<KritzelAwarenessCursorsElement, KritzelAwarenessCursorsEvents, Components.KritzelAwarenessCursors>;
|
|
25
28
|
export type KritzelBackToContentEvents = {
|
|
@@ -46,6 +49,7 @@ export type KritzelEditorEvents = {
|
|
|
46
49
|
onObjectsUpdated: EventName<KritzelEditorCustomEvent<ObjectsUpdatedEvent>>;
|
|
47
50
|
onUndoStateChange: EventName<KritzelEditorCustomEvent<KritzelUndoState>>;
|
|
48
51
|
onThemeChange: EventName<KritzelEditorCustomEvent<ThemeName>>;
|
|
52
|
+
onLocaleChange: EventName<KritzelEditorCustomEvent<LocaleCode>>;
|
|
49
53
|
onViewportChange: EventName<KritzelEditorCustomEvent<KritzelViewportState>>;
|
|
50
54
|
onLogout: EventName<KritzelEditorCustomEvent<void>>;
|
|
51
55
|
onLogin: EventName<KritzelEditorCustomEvent<LoginEvent>>;
|
|
@@ -53,6 +57,23 @@ export type KritzelEditorEvents = {
|
|
|
53
57
|
onAwarenessChange: EventName<KritzelEditorCustomEvent<Map<number, Record<string, any>>>>;
|
|
54
58
|
};
|
|
55
59
|
export declare const KritzelEditor: StencilReactComponent<KritzelEditorElement, KritzelEditorEvents, Components.KritzelEditor>;
|
|
60
|
+
export type KritzelEngineEvents = {
|
|
61
|
+
onIsEngineReady: EventName<KritzelEngineCustomEvent<KritzelEngineState>>;
|
|
62
|
+
onActiveToolChange: EventName<KritzelEngineCustomEvent<KritzelBaseTool>>;
|
|
63
|
+
onObjectsSelectionChange: EventName<KritzelEngineCustomEvent<void>>;
|
|
64
|
+
onWorkspacesChange: EventName<KritzelEngineCustomEvent<KritzelWorkspace[]>>;
|
|
65
|
+
onActiveWorkspaceChange: EventName<KritzelEngineCustomEvent<KritzelWorkspace>>;
|
|
66
|
+
onLongpress: EventName<KritzelEngineCustomEvent<PointerEvent>>;
|
|
67
|
+
onObjectsChange: EventName<KritzelEngineCustomEvent<KritzelBaseObject[]>>;
|
|
68
|
+
onObjectsAdded: EventName<KritzelEngineCustomEvent<ObjectsAddedEvent>>;
|
|
69
|
+
onObjectsRemoved: EventName<KritzelEngineCustomEvent<ObjectsRemovedEvent>>;
|
|
70
|
+
onObjectsUpdated: EventName<KritzelEngineCustomEvent<ObjectsUpdatedEvent>>;
|
|
71
|
+
onUndoStateChange: EventName<KritzelEngineCustomEvent<KritzelUndoState>>;
|
|
72
|
+
onObjectsInViewportChange: EventName<KritzelEngineCustomEvent<ObjectsInViewportChangeEvent>>;
|
|
73
|
+
onViewportChange: EventName<KritzelEngineCustomEvent<KritzelViewportState>>;
|
|
74
|
+
onAwarenessChange: EventName<KritzelEngineCustomEvent<Map<number, Record<string, any>>>>;
|
|
75
|
+
};
|
|
76
|
+
export declare const KritzelEngine: StencilReactComponent<KritzelEngineElement, KritzelEngineEvents, Components.KritzelEngine>;
|
|
56
77
|
export type KritzelExportEvents = {
|
|
57
78
|
onExportPng: EventName<KritzelExportCustomEvent<void>>;
|
|
58
79
|
onExportSvg: EventName<KritzelExportCustomEvent<void>>;
|
|
@@ -92,3 +113,10 @@ export type KritzelSettingsEvents = {
|
|
|
92
113
|
onSettingsChange: EventName<KritzelSettingsCustomEvent<KritzelSettingsConfig>>;
|
|
93
114
|
};
|
|
94
115
|
export declare const KritzelSettings: StencilReactComponent<KritzelSettingsElement, KritzelSettingsEvents, Components.KritzelSettings>;
|
|
116
|
+
export type KritzelWatermarkEvents = NonNullable<unknown>;
|
|
117
|
+
export declare const KritzelWatermark: StencilReactComponent<KritzelWatermarkElement, KritzelWatermarkEvents, Components.KritzelWatermark>;
|
|
118
|
+
export type KritzelZoomPanelEvents = {
|
|
119
|
+
onZoomIn: EventName<KritzelZoomPanelCustomEvent<void>>;
|
|
120
|
+
onZoomOut: EventName<KritzelZoomPanelCustomEvent<void>>;
|
|
121
|
+
};
|
|
122
|
+
export declare const KritzelZoomPanel: StencilReactComponent<KritzelZoomPanelElement, KritzelZoomPanelEvents, Components.KritzelZoomPanel>;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export * from './components/stencil-generated/components';
|
|
2
|
-
export { KritzelBaseObject, KritzelText, KritzelPath, KritzelImage, KritzelLine, KritzelShape, KritzelGroup, KritzelBrushTool, KritzelTextTool, KritzelLineTool, KritzelShapeTool, KritzelEraserTool, KritzelSelectionTool, KritzelImageTool, KritzelWorkspace, InMemorySyncProvider, IndexedDBSyncProvider, BroadcastSyncProvider, WebSocketSyncProvider, HocuspocusSyncProvider, KritzelThemeManager, ShapeType, KritzelAlignment, lightTheme, darkTheme, DEFAULT_BRUSH_CONFIG, DEFAULT_TEXT_CONFIG, } from 'kritzel-stencil';
|
|
3
|
-
export type { KritzelToolbarControl, KritzelBrushToolConfig, KritzelLineToolConfig, KritzelShapeToolConfig, KritzelTextToolConfig, KritzelSyncConfig, KritzelTheme, KritzelViewportState, ContextMenuItem, ThemeAwareColor, ThemeName, LoginEvent, EditorIsReadyEvent, ActiveWorkspaceChangeEvent, ObjectsAddedEvent, ObjectsRemovedEvent, ObjectsUpdatedEvent, } from 'kritzel-stencil';
|
|
2
|
+
export { KritzelBaseObject, KritzelText, KritzelPath, KritzelImage, KritzelLine, KritzelShape, KritzelGroup, KritzelBaseTool, KritzelBrushTool, KritzelTextTool, KritzelLineTool, KritzelShapeTool, KritzelEraserTool, KritzelSelectionTool, KritzelImageTool, KritzelWorkspace, InMemorySyncProvider, IndexedDBSyncProvider, BroadcastSyncProvider, WebSocketSyncProvider, HocuspocusSyncProvider, KritzelThemeManager, KritzelLocalizationManager, KritzelLicenseManager, ShapeType, KritzelAlignment, lightTheme, darkTheme, EN_LOCALE, DE_LOCALE, FR_LOCALE, DEFAULT_BRUSH_CONFIG, DEFAULT_TEXT_CONFIG, } from 'kritzel-stencil';
|
|
3
|
+
export type { HTMLKritzelEditorElement, HTMLKritzelEngineElement, KritzelToolbarControl, KritzelBrushToolConfig, KritzelLineToolConfig, KritzelShapeToolConfig, KritzelTextToolConfig, KritzelSyncConfig, KritzelTheme, KritzelViewportState, ContextMenuItem, ThemeAwareColor, ThemeName, KritzelLocale, LocaleCode, KritzelTerms, KritzelTermKey, KritzelTermVars, LoginEvent, EditorIsReadyEvent, ActiveWorkspaceChangeEvent, ObjectsAddedEvent, ObjectsRemovedEvent, ObjectsUpdatedEvent, ObjectsInViewportChangeEvent, KritzelUndoState, IKritzelIsPublicChangedEvent, KritzelEngineState, KritzelDebugInfo, IKritzelUser, } from 'kritzel-stencil';
|
package/package.json
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "kritzel-react",
|
|
3
|
-
"version": "0.3.
|
|
4
|
-
"homepage": "https://
|
|
5
|
-
"
|
|
3
|
+
"version": "0.3.17",
|
|
4
|
+
"homepage": "https://kritzel.io/",
|
|
5
|
+
"description": "Build infinite canvas experiences in minutes.",
|
|
6
|
+
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
7
|
"main": "dist/index.js",
|
|
7
8
|
"module": "dist/index.js",
|
|
8
9
|
"types": "dist/types/index.d.ts",
|
|
@@ -20,7 +21,7 @@
|
|
|
20
21
|
"@stencil/react-output-target": "^1.2.0"
|
|
21
22
|
},
|
|
22
23
|
"peerDependencies": {
|
|
23
|
-
"kritzel-stencil": "^0.3.
|
|
24
|
+
"kritzel-stencil": "^0.3.17"
|
|
24
25
|
},
|
|
25
26
|
"repository": {
|
|
26
27
|
"type": "git",
|