kritzel-vue 0.3.14 → 0.3.16

package/dist/components.d.ts

@@ -6,6 +6,7 @@ export declare const KritzelButton: StencilVueComponent<JSX.KritzelButton>;
 export declare const KritzelCurrentUserDialog: StencilVueComponent<JSX.KritzelCurrentUserDialog>;
 export declare const KritzelDialog: StencilVueComponent<JSX.KritzelDialog>;
 export declare const KritzelEditor: StencilVueComponent<JSX.KritzelEditor>;
+export declare const KritzelEngine: StencilVueComponent<JSX.KritzelEngine>;
 export declare const KritzelExport: StencilVueComponent<JSX.KritzelExport>;
 export declare const KritzelInput: StencilVueComponent<JSX.KritzelInput>;
 export declare const KritzelLineEndings: StencilVueComponent<JSX.KritzelLineEndings>;

package/dist/components.js

@@ -8,6 +8,7 @@ import { defineCustomElement as defineKritzelButton } from '../../kritzel-stenci
 import { defineCustomElement as defineKritzelCurrentUserDialog } from '../../kritzel-stencil/dist/components/kritzel-current-user-dialog.js';
 import { defineCustomElement as defineKritzelDialog } from '../../kritzel-stencil/dist/components/kritzel-dialog.js';
 import { defineCustomElement as defineKritzelEditor } from '../../kritzel-stencil/dist/components/kritzel-editor.js';
+import { defineCustomElement as defineKritzelEngine } from '../../kritzel-stencil/dist/components/kritzel-engine.js';
 import { defineCustomElement as defineKritzelExport } from '../../kritzel-stencil/dist/components/kritzel-export.js';
 import { defineCustomElement as defineKritzelInput } from '../../kritzel-stencil/dist/components/kritzel-input.js';
 import { defineCustomElement as defineKritzelLineEndings } from '../../kritzel-stencil/dist/components/kritzel-line-endings.js';
@@ -115,6 +116,59 @@ export const KritzelEditor = /*@__PURE__*/ defineContainer('kritzel-editor', def
     'isPublicChange',
     'awarenessChange'
 ]);
+export const KritzelEngine = /*@__PURE__*/ defineContainer('kritzel-engine', defineKritzelEngine, [
+    'workspace',
+    'editorId',
+    'activeWorkspaceId',
+    'syncConfig',
+    'assetStorageConfig',
+    'user',
+    'globalContextMenuItems',
+    'objectContextMenuItems',
+    'scaleMax',
+    'scaleMin',
+    'cursorTarget',
+    'lockDrawingScale',
+    'isObjectDistanceFadingActive',
+    'theme',
+    'themes',
+    'viewportBoundaryLeft',
+    'viewportBoundaryRight',
+    'viewportBoundaryTop',
+    'viewportBoundaryBottom',
+    'debugInfo',
+    'wheelEnabled',
+    'isLoading',
+    'isEngineReady',
+    'activeToolChange',
+    'objectsSelectionChange',
+    'workspacesChange',
+    'activeWorkspaceChange',
+    'longpress',
+    'objectsChange',
+    'objectsAdded',
+    'objectsRemoved',
+    'objectsUpdated',
+    'undoStateChange',
+    'objectsInViewportChange',
+    'viewportChange',
+    'awarenessChange'
+], [
+    'isEngineReady',
+    'activeToolChange',
+    'objectsSelectionChange',
+    'workspacesChange',
+    'activeWorkspaceChange',
+    'longpress',
+    'objectsChange',
+    'objectsAdded',
+    'objectsRemoved',
+    'objectsUpdated',
+    'undoStateChange',
+    'objectsInViewportChange',
+    'viewportChange',
+    'awarenessChange'
+]);
 export const KritzelExport = /*@__PURE__*/ defineContainer('kritzel-export', defineKritzelExport, [
     'workspaceName',
     'exportPng',

package/dist/composables.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Resolves the native Kritzel editor element from a specific Vue template ref.
+ *
+ * Because `<KritzelEditor>` is a Vue component (not a raw custom element),
+ * a template ref points to the component instance rather than the DOM element.
+ * Pass the same ref that is bound in your template to make sure the resolved
+ * editor always belongs to that exact component instance.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { KritzelEditor, getEditorRef } from 'kritzel-vue'
+ * import { ref, type ComponentPublicInstance } from 'vue'
+ *
+ * const editorComponent = ref<ComponentPublicInstance | null>(null)
+ * const editor = getEditorRef(editorComponent)
+ *
+ * async function onReady() {
+ *   await editor.value?.addObject(...)
+ * }
+ * </script>
+ *
+ * <template>
+ *   <KritzelEditor ref="editor" @isReady="onReady" />
+ * </template>
+ * ```
+ */
+export declare function getEditorRef(componentRef: string): import("vue").ComputedRef<HTMLKritzelEditorElement | null>;
+/**
+ * Resolves the native Kritzel engine element from a specific Vue template ref.
+ *
+ * Because `<KritzelEngine>` is a Vue component (not a raw custom element),
+ * a template ref points to the component instance rather than the DOM element.
+ * Pass the same ref that is bound in your template to make sure the resolved
+ * engine always belongs to that exact component instance.
+ */
+export declare function getEngineRef(componentRef: string): import("vue").ComputedRef<HTMLKritzelEngineElement | null>;

package/dist/composables.js

@@ -0,0 +1,62 @@
+import { computed, useTemplateRef, } from "vue";
+/**
+ * Resolves the native Kritzel editor element from a specific Vue template ref.
+ *
+ * Because `<KritzelEditor>` is a Vue component (not a raw custom element),
+ * a template ref points to the component instance rather than the DOM element.
+ * Pass the same ref that is bound in your template to make sure the resolved
+ * editor always belongs to that exact component instance.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { KritzelEditor, getEditorRef } from 'kritzel-vue'
+ * import { ref, type ComponentPublicInstance } from 'vue'
+ *
+ * const editorComponent = ref<ComponentPublicInstance | null>(null)
+ * const editor = getEditorRef(editorComponent)
+ *
+ * async function onReady() {
+ *   await editor.value?.addObject(...)
+ * }
+ * </script>
+ *
+ * <template>
+ *   <KritzelEditor ref="editor" @isReady="onReady" />
+ * </template>
+ * ```
+ */
+export function getEditorRef(componentRef) {
+    const editorComponent = useTemplateRef(componentRef);
+    return computed(() => {
+        var _a;
+        const value = editorComponent.value;
+        if (!value) {
+            return null;
+        }
+        return "$el" in value
+            ? ((_a = value.$el) !== null && _a !== void 0 ? _a : null)
+            : value;
+    });
+}
+/**
+ * Resolves the native Kritzel engine element from a specific Vue template ref.
+ *
+ * Because `<KritzelEngine>` is a Vue component (not a raw custom element),
+ * a template ref points to the component instance rather than the DOM element.
+ * Pass the same ref that is bound in your template to make sure the resolved
+ * engine always belongs to that exact component instance.
+ */
+export function getEngineRef(componentRef) {
+    const engineComponent = useTemplateRef(componentRef);
+    return computed(() => {
+        var _a;
+        const value = engineComponent.value;
+        if (!value) {
+            return null;
+        }
+        return "$el" in value
+            ? ((_a = value.$el) !== null && _a !== void 0 ? _a : null)
+            : value;
+    });
+}

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './components';
+export * from './composables';
 export * from './plugin';
 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';
-export type { KritzelToolbarControl, KritzelBrushToolConfig, KritzelLineToolConfig, KritzelShapeToolConfig, KritzelTextToolConfig, KritzelSyncConfig, KritzelTheme, KritzelViewportState, ContextMenuItem, ThemeAwareColor, ThemeName, LoginEvent, EditorIsReadyEvent, ActiveWorkspaceChangeEvent, ObjectsAddedEvent, ObjectsRemovedEvent, ObjectsUpdatedEvent, } from 'kritzel-stencil';
+export type { HTMLKritzelEditorElement, HTMLKritzelEngineElement, KritzelToolbarControl, KritzelBrushToolConfig, KritzelLineToolConfig, KritzelShapeToolConfig, KritzelTextToolConfig, KritzelSyncConfig, KritzelTheme, KritzelViewportState, ContextMenuItem, ThemeAwareColor, ThemeName, LoginEvent, EditorIsReadyEvent, ActiveWorkspaceChangeEvent, ObjectsAddedEvent, ObjectsRemovedEvent, ObjectsUpdatedEvent, ObjectsInViewportChangeEvent, } from 'kritzel-stencil';

package/dist/index.js

@@ -1,3 +1,4 @@
 export * from './components';
+export * from './composables';
 export * from './plugin';
 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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kritzel-vue",
-  "version": "0.3.14",
+  "version": "0.3.16",
   "homepage": "https://github.com/kasual1/kritzel#readme",
   "license": "ISC",
   "main": "dist/index.js",
@@ -34,6 +34,6 @@
     "@stencil/vue-output-target": "0.11.8"
   },
   "peerDependencies": {
-    "kritzel-stencil": "^0.3.14"
+    "kritzel-stencil": "^0.3.16"
   }
 }