@visuallyjs/browser-ui-svelte 1.1.4 → 1.2.1

package/use-surface.svelte.js

@@ -0,0 +1,18 @@
+import { internal_getSurfaceContext } from "./surface-store";
+/**
+ * Creates a reactive zoom state for a VisuallyJS UI
+ * @group Hooks
+ */
+export function useSurface() {
+    const ctx = internal_getSurfaceContext(true);
+    let surface = $state(null);
+    if (ctx != null) {
+        ctx.listen((s) => surface = s);
+    }
+    // Return an object with a getter to maintain reactivity across function boundaries
+    return {
+        get current() {
+            return surface;
+        }
+    };
+}

package/use-visuallyjs-update.svelte.d.ts

@@ -0,0 +1,19 @@
+import { BrowserUISvelteModel } from "./index";
+/**
+ * Simple hook that responds to all update events in the model, including when the model is cleared. You pass in a function that takes the model as argument, and that should be invoked when an update/clear event occurs. The function is also invoked when the initial model reference is obtained.
+ *
+ * ```jsx
+ * <script>
+ *  import { useVisuallyJsUpdate } from "@visuallyjs/browser-ui-svelte"
+ *
+ *  let count = $state(0)
+ *  useVisuallyJsUpdate((model) => count = model.getNodeCount())
+ * </script>
+ *
+ * <h1>{count}</h1>
+ * ```
+ *
+ * @param callback Callback to invoke when an update occurs.
+ * @group Hooks
+ */
+export declare function useVisuallyJsUpdate(callback: (model: BrowserUISvelteModel) => any): void;

package/use-visuallyjs-update.svelte.js

@@ -0,0 +1,37 @@
+import { EVENT_DATA_UPDATED, EVENT_GRAPH_CLEARED } from "@visuallyjs/browser-ui";
+import { useDiagram } from "./index";
+import { useSurface } from "./use-surface.svelte";
+/**
+ * Simple hook that responds to all update events in the model, including when the model is cleared. You pass in a function that takes the model as argument, and that should be invoked when an update/clear event occurs. The function is also invoked when the initial model reference is obtained.
+ *
+ * ```jsx
+ * <script>
+ *  import { useVisuallyJsUpdate } from "@visuallyjs/browser-ui-svelte"
+ *
+ *  let count = $state(0)
+ *  useVisuallyJsUpdate((model) => count = model.getNodeCount())
+ * </script>
+ *
+ * <h1>{count}</h1>
+ * ```
+ *
+ * @param callback Callback to invoke when an update occurs.
+ * @group Hooks
+ */
+export function useVisuallyJsUpdate(callback) {
+    const ui = useSurface();
+    const diagram = useDiagram();
+    $effect(() => {
+        const vjs = ui.current?.model || diagram.current?.model;
+        if (vjs != null) {
+            const fn = () => callback(vjs);
+            vjs.bind(EVENT_DATA_UPDATED, fn);
+            vjs.bind(EVENT_GRAPH_CLEARED, fn);
+            fn();
+            return (() => {
+                vjs.unbind(EVENT_DATA_UPDATED, fn);
+                vjs.unbind(EVENT_GRAPH_CLEARED, fn);
+            });
+        }
+    });
+}

package/use-zoom.svelte.d.ts

@@ -1,9 +1,7 @@
-import { BrowserUI } from '@visuallyjs/browser-ui';
 /**
  * Creates a reactive zoom state for a VisuallyJS UI
- * @param ui The Surface instance provided via props.
  * @group Hooks
  */
-export declare function useZoom(ui: BrowserUI): {
+export declare function useZoom(): {
     readonly current: number;
 };

package/use-zoom.svelte.js

@@ -1,21 +1,24 @@
 import { EVENT_ZOOM } from '@visuallyjs/browser-ui';
+import { useSurface } from "./use-surface.svelte";
 /**
  * Creates a reactive zoom state for a VisuallyJS UI
- * @param ui The Surface instance provided via props.
  * @group Hooks
  */
-export function useZoom(ui) {
-    let zoom = $state(ui.getZoom());
+export function useZoom() {
+    let zoom = $state(1);
+    let uiRef = useSurface();
     // Manage event listener lifecycle
     $effect(() => {
-        const handler = (p) => {
-            zoom = p.zoom;
-        };
-        ui.bind(EVENT_ZOOM, handler);
-        // Auto-cleanup when the component/effect is destroyed
-        return () => {
-            ui.unbind(EVENT_ZOOM, handler);
-        };
+        if (uiRef.current != null) {
+            const handler = (p) => {
+                zoom = p.zoom;
+            };
+            uiRef.current.bind(EVENT_ZOOM, handler);
+            // Auto-cleanup when the component/effect is destroyed
+            return () => {
+                uiRef.current.unbind(EVENT_ZOOM, handler);
+            };
+        }
     });
     // Return an object with a getter to maintain reactivity across function boundaries
     return {