@visuallyjs/browser-ui-svelte 1.2.0 → 1.2.2

package/surface-store.d.ts

@@ -1,4 +1,4 @@
-import type { Surface } from "@visuallyjs/browser-ui";
+import type { Paper, Surface } from "@visuallyjs/browser-ui";
 import { BrowserUISvelteModel } from "./index";
 /**
  * Key for the surface context
@@ -17,11 +17,24 @@ export interface SurfaceRef {
     set: (surface: Surface) => void;
     listen: (l: (s: Surface) => any) => void;
 }
+/**
+ * Handle for a paper - use `set` to set the paper and `listen` to register a listener.
+ * @internal
+ */
+export interface PaperRef {
+    set: (paper: Paper) => void;
+    listen: (l: (s: Paper) => any) => void;
+}
 /**
  * Create a surface context, and set it on Svelte via `setContext`.
  * @internal
  */
 export declare function internal_createSurfaceContext(): SurfaceRef;
+/**
+ * Create a paper context, and set it on Svelte via `setContext`.
+ * @internal
+ */
+export declare function internal_createPaperContext(): PaperRef;
 /**
  * Gets the current surface context from Svelte, optionally creating it if it does not exist. The Surface and the SurfaceProvider both set `doNotCreate` to false; other components such as miniview/controls must set it to true.
  * This method is NOT to be invoked by users of the API. Use {@link useSurface} to access the current Surface.
@@ -29,6 +42,13 @@ export declare function internal_createSurfaceContext(): SurfaceRef;
  * @internal
  */
 export declare function internal_getSurfaceContext(doNotCreate: boolean): SurfaceRef;
+/**
+ * Gets the current paper context from Svelte, optionally creating it if it does not exist. The Paper and the PaperProvider both set `doNotCreate` to false; other components such as miniview/controls must set it to true.
+ * This method is NOT to be invoked by users of the API. Use {@link usePaper} to access the current Paper.
+ * @param doNotCreate
+ * @internal
+ */
+export declare function internal_getPaperContext(doNotCreate: boolean): PaperRef;
 /**
  * Hook to expose the current model. This hook is asynchronous and returns a Promise.
  * @group Hooks

package/surface-store.js

@@ -29,6 +29,30 @@ export function internal_createSurfaceContext() {
     setContext(STORE_KEY, ref);
     return ref;
 }
+/**
+ * Create a paper context, and set it on Svelte via `setContext`.
+ * @internal
+ */
+export function internal_createPaperContext() {
+    const listeners = [];
+    const handle = { current: null };
+    const ref = {
+        set: (paper) => {
+            handle.current = paper;
+            listeners.forEach(l => l(paper));
+        },
+        listen: (l) => {
+            if (handle.current == null) {
+                listeners.push(l);
+            }
+            else {
+                l(handle.current);
+            }
+        }
+    };
+    setContext(STORE_KEY, ref);
+    return ref;
+}
 /**
  * Gets the current surface context from Svelte, optionally creating it if it does not exist. The Surface and the SurfaceProvider both set `doNotCreate` to false; other components such as miniview/controls must set it to true.
  * This method is NOT to be invoked by users of the API. Use {@link useSurface} to access the current Surface.
@@ -42,17 +66,34 @@ export function internal_getSurfaceContext(doNotCreate) {
     }
     return ctx;
 }
+/**
+ * Gets the current paper context from Svelte, optionally creating it if it does not exist. The Paper and the PaperProvider both set `doNotCreate` to false; other components such as miniview/controls must set it to true.
+ * This method is NOT to be invoked by users of the API. Use {@link usePaper} to access the current Paper.
+ * @param doNotCreate
+ * @internal
+ */
+export function internal_getPaperContext(doNotCreate) {
+    let ctx = getContext(STORE_KEY);
+    if (ctx == null && !doNotCreate) {
+        ctx = internal_createPaperContext();
+    }
+    return ctx;
+}
 /**
  * Hook to expose the current model. This hook is asynchronous and returns a Promise.
  * @group Hooks
  */
 export function useVisuallyJsModel() {
     const ref = internal_getSurfaceContext(true);
+    const paperRef = internal_getPaperContext(true);
     const diagramRef = internal_getDiagramContext(true);
     return new Promise((resolve, reject) => {
         if (ref != null) {
             ref.listen((s) => resolve(s.model));
         }
+        else if (paperRef != null) {
+            paperRef.listen((s) => resolve(s.model));
+        }
         else if (diagramRef != null) {
             diagramRef.listen((d) => resolve(d.model));
         }

package/use-diagram.svelte.d.ts

@@ -1,6 +1,6 @@
 import { Diagram } from '@visuallyjs/browser-ui';
 /**
- *
+ * Hook to access the current Diagram
  * @group Hooks
  */
 export declare function useDiagram(): {

package/use-diagram.svelte.js

@@ -1,6 +1,6 @@
 import { internal_getDiagramContext } from "./diagram-store";
 /**
- *
+ * Hook to access the current Diagram
  * @group Hooks
  */
 export function useDiagram() {

package/use-paper.svelte.d.ts

@@ -0,0 +1,7 @@
+import { Paper } from '@visuallyjs/browser-ui';
+import { RefObject } from "./definitions";
+/**
+ * Hook to access the current Paper.
+ * @group Hooks
+ */
+export declare function usePaper(): RefObject<Paper>;

package/use-paper.svelte.js

@@ -0,0 +1,18 @@
+import { internal_getPaperContext } from "./surface-store";
+/**
+ * Hook to access the current Paper.
+ * @group Hooks
+ */
+export function usePaper() {
+    const ctx = internal_getPaperContext(true);
+    let paper = $state(null);
+    if (ctx != null) {
+        ctx.listen((s) => paper = s);
+    }
+    // Return an object with a getter to maintain reactivity across function boundaries
+    return {
+        get current() {
+            return paper;
+        }
+    };
+}

package/use-surface.svelte.d.ts

@@ -1,7 +1,7 @@
 import { Surface } from '@visuallyjs/browser-ui';
 import { RefObject } from "./definitions";
 /**
- * Creates a reactive zoom state for a VisuallyJS UI
+ * Hook to access the current Surface
  * @group Hooks
  */
 export declare function useSurface(): RefObject<Surface>;

package/use-surface.svelte.js

@@ -1,6 +1,6 @@
 import { internal_getSurfaceContext } from "./surface-store";
 /**
- * Creates a reactive zoom state for a VisuallyJS UI
+ * Hook to access the current Surface
  * @group Hooks
  */
 export function useSurface() {