@visuallyjs/browser-ui-svelte 1.1.3 → 1.2.0

package/definitions.d.ts

@@ -1,6 +1,6 @@
-import type { DOMAttributes } from "svelte/elements";
-import { SurfaceOptions, Vertex, Group, Node, ControlsComponentButtons, DataGeneratorFunction, type BrowserElement, Base, Size, ObjectData, DropTargetInfo, PaletteMode, SvgExportUIOptions, ImageExportUIOptions, ShapeLibraryImpl, ModelOptions, DiagramOptions, ColumnChartOptions, BarChartOptions, CategoryValueChartOptions, Diagram, DiagramCell, NodeMapping, GroupMapping, PortMapping, BrowserUI, EdgeMapping, OnVertexAddedCallback, CanvasDropFilter, LineChartOptions, AreaChartOptions, PieChartOptions, ScatterChartOptions, BubbleChartOptions, GaugeChartOptions, SankeyOptions, FontSpec, BrowserUIModel, PreparedShape, ChartModelFilter, VisuallyJsDefaultJSON, PointXY, FixedElementConstraints } from "@visuallyjs/browser-ui";
 import { type Snippet } from "svelte";
+import type { DOMAttributes } from "svelte/elements";
+import { SurfaceOptions, Vertex, Group, Node, ControlsComponentButtons, DataGeneratorFunction, type BrowserElement, Base, Size, ObjectData, DropTargetInfo, PaletteMode, SvgExportUIOptions, ImageExportUIOptions, ShapeLibraryImpl, ModelOptions, DiagramOptions, Diagram, DiagramCell, NodeMapping, GroupMapping, PortMapping, BrowserUI, EdgeMapping, OnVertexAddedCallback, CanvasDropFilter, FontSpec, BrowserUIModel, PreparedShape, PointXY, FixedElementConstraints } from "@visuallyjs/browser-ui";
 /**
  * Render options for a SurfaceComponent. This interface is the same as SurfaceOptions but with several vanilla-only options removed.
  */
@@ -33,6 +33,12 @@ export interface SveltePortMapping extends Omit<PortMapping<any>, "templateIdRes
      */
     component?: any;
 }
+/**
+ * Defines a value holder. This is a direct copy of the `RefObject` concept from React.
+ */
+export type RefObject<T> = {
+    current: T | null;
+};
 /**
  * Spec for a react component overlay. A ctx object is passed in to your component and you are expected to return JSX.
  */
@@ -151,6 +157,14 @@ export interface MiniviewComponentProps extends DOMAttributes<HTMLDivElement> {
      * Defaults to true, meaning a click on a node/group in the miniview will cause that node/group to be centered in the related surface.
      */
     clickToCenter?: boolean;
+    /**
+     * Defaults to true - the miniview will display a lasso as the user is using the lasso in the canvas
+     */
+    showLasso?: boolean;
+    /**
+     * Defaults to true - the miniview will add a CSS class to elements whose model object is in the current selection.
+     */
+    trackSelection?: boolean;
     /**
      * Optional class name to set on the miniview component's container
      */
@@ -274,17 +288,13 @@ export interface InspectorComponentProps extends DOMAttributes<HTMLDivElement> {
      * Optional class name to set on the component's root element.
      */
     className?: string;
-    /**
-     * Callback invoked when the inspector is cleared.
-     * @internal
-     */
-    renderEmptyContainer: () => void;
     /**
      * Callback invoked when a new object has started to be edited.
      * @param obj
      * @param cb
+     * @deprecated From 1.2.0 onwards, use the `current` state object approach instead.
      */
-    refresh: (obj: Base) => void;
+    refresh?: (obj: Base) => void;
     /**
      * Optional filter function that you can supply if you want to ignore certain objects in your dataset.
      */
@@ -298,6 +308,12 @@ export interface InspectorComponentProps extends DOMAttributes<HTMLDivElement> {
      * Whether or not to auto commit changes on blur or enter keypress. Defaults to true.
      */
     autoCommit?: boolean;
+    /**
+     * A $state ref that the inspector will apply 2-way binding to. Since 1.2.0 this is the preferred way to use an inspector, as it reduces the amount of boilerplate you need to configure.
+     * @since 1.2.0
+     */
+    current?: Base | null;
+    children?: Snippet;
 }
 /**
  * @group Props
@@ -470,256 +486,10 @@ export interface DiagramComponentProps extends DOMAttributes<HTMLDivElement> {
      * Optional url from which to load data after the component has been mounted. If you provide this and also data, this will take precedence.
      */
     url?: string;
-}
-/**
- * @group Props
- */
-export interface ColumnChartComponentProps extends DOMAttributes<HTMLDivElement> {
-    /**
-     * Options for the chart
-     */
-    options: Omit<ColumnChartOptions, "data" | "url" | "model">;
-    /**
-     * Optional class name to set on the chart component's container
-     */
-    className?: string;
-    /**
-     * Optional data to load after the chart has been mounted.
-     */
-    data?: Array<ObjectData>;
-    /**
-     * Optional url from which to load data after the component has been mounted. If you provide this and also data, this will take precedence.
-     */
-    url?: string;
-    /**
-     * Optional filter to apply to the data source.
-     */
-    dataSourceFilter?: ChartModelFilter;
-}
-/**
- * @group Props
- */
-export interface BarChartComponentProps extends DOMAttributes<HTMLDivElement> {
-    /**
-     * Options for the chart
-     */
-    options: Omit<BarChartOptions, "data" | "url" | "model">;
-    /**
-     * Optional class name to set on the chart component's container
-     */
-    className?: string;
-    /**
-     * Optional data to load after the chart has been mounted.
-     */
-    data?: Array<ObjectData>;
-    /**
-     * Optional url from which to load data after the component has been mounted. If you provide this and also data, this will take precedence.
-     */
-    url?: string;
-    /**
-     * Optional filter to apply to the data source.
-     */
-    dataSourceFilter?: ChartModelFilter;
-}
-/**
- * @group Props
- */
-export interface XYChartComponentProps extends DOMAttributes<HTMLDivElement> {
-    /**
-     * Options for the chart
-     */
-    options: Omit<CategoryValueChartOptions, "data" | "url" | "model">;
-    /**
-     * Optional class name to set on the chart component's container
-     */
-    className?: string;
-    /**
-     * Optional data to load after the chart has been mounted.
-     */
-    data?: Array<ObjectData>;
-    /**
-     * Optional url from which to load data after the component has been mounted. If you provide this and also data, this will take precedence.
-     */
-    url?: string;
-}
-/**
- * @group Props
- */
-export interface LineChartComponentProps extends DOMAttributes<HTMLDivElement> {
-    /**
-     * Options for the chart
-     */
-    options: Omit<LineChartOptions, "data" | "url" | "model">;
-    /**
-     * Optional class name to set on the chart component's container
-     */
-    className?: string;
-    /**
-     * Optional data to load after the chart has been mounted.
-     */
-    data?: Array<ObjectData>;
-    /**
-     * Optional url from which to load data after the component has been mounted. If you provide this and also data, this will take precedence.
-     */
-    url?: string;
-    /**
-     * Optional filter to apply to the data source.
-     */
-    dataSourceFilter?: ChartModelFilter;
-}
-/**
- * @group Props
- */
-export interface AreaChartComponentProps extends DOMAttributes<HTMLDivElement> {
-    /**
-     * Options for the chart
-     */
-    options: Omit<AreaChartOptions, "data" | "url" | "model">;
-    /**
-     * Optional class name to set on the chart component's container
-     */
-    className?: string;
-    /**
-     * Optional data to load after the chart has been mounted.
-     */
-    data?: Array<ObjectData>;
-    /**
-     * Optional url from which to load data after the component has been mounted. If you provide this and also data, this will take precedence.
-     */
-    url?: string;
-    /**
-     * Optional filter to apply to the data source.
-     */
-    dataSourceFilter?: ChartModelFilter;
-}
-/**
- * @group Props
- */
-export interface PieChartComponentProps extends DOMAttributes<HTMLDivElement> {
-    /**
-     * Options for the chart
-     */
-    options: Omit<PieChartOptions, "data" | "url" | "model">;
-    /**
-     * Optional class name to set on the chart component's container
-     */
-    className?: string;
-    /**
-     * Optional data to load after the chart has been mounted.
-     */
-    data?: Array<ObjectData>;
-    /**
-     * Optional url from which to load data after the component has been mounted. If you provide this and also data, this will take precedence.
-     */
-    url?: string;
-    /**
-     * Optional filter to apply to the data source.
-     */
-    dataSourceFilter?: ChartModelFilter;
-}
-/**
- * @group Props
- */
-export interface ScatterChartComponentProps extends DOMAttributes<HTMLDivElement> {
-    /**
-     * Options for the chart
-     */
-    options: Omit<ScatterChartOptions, "data" | "url" | "model">;
-    /**
-     * Optional class name to set on the chart component's container
-     */
-    className?: string;
-    /**
-     * Optional data to load after the chart has been mounted.
-     */
-    data?: Array<ObjectData>;
-    /**
-     * Optional url from which to load data after the component has been mounted. If you provide this and also data, this will take precedence.
-     */
-    url?: string;
-    /**
-     * Optional filter to apply to the data source.
-     */
-    dataSourceFilter?: ChartModelFilter;
-}
-/**
- * @group Props
- */
-export interface BubbleChartComponentProps extends DOMAttributes<HTMLDivElement> {
-    /**
-     * Options for the chart
-     */
-    options: Omit<BubbleChartOptions, "data" | "url" | "model">;
-    /**
-     * Optional class name to set on the chart component's container
-     */
-    className?: string;
-    /**
-     * Optional data to load after the chart has been mounted.
-     */
-    data?: Array<ObjectData>;
-    /**
-     * Optional url from which to load data after the component has been mounted. If you provide this and also data, this will take precedence.
-     */
-    url?: string;
-    /**
-     * Optional filter to apply to the data source.
-     */
-    dataSourceFilter?: ChartModelFilter;
-}
-/**
- * @group Props
- */
-export interface GaugeChartComponentProps extends DOMAttributes<HTMLDivElement> {
-    /**
-     * Options for the chart
-     */
-    options: Omit<GaugeChartOptions, "data" | "url" | "model">;
-    /**
-     * Optional class name to set on the chart component's container
-     */
-    className?: string;
-    /**
-     * Optional data to load after the chart has been mounted.
-     */
-    data?: Array<ObjectData>;
     /**
-     * Optional url from which to load data after the component has been mounted. If you provide this and also data, this will take precedence.
-     */
-    url?: string;
-}
-/**
- * @group Props
- */
-export interface SankeyChartComponentProps extends DOMAttributes<HTMLDivElement> {
-    /**
-     * Options for the chart
-     */
-    options: Omit<SankeyOptions, "data" | "url" | "model">;
-    /**
-     * Optional class name to set on the chart component's container
-     */
-    className?: string;
-    /**
-     * Optional data to load into the chart (in CSV format)
-     */
-    csvData?: string;
-    /**
-     * Optional data to load into the chart (in VisuallyJs default json format)
-     */
-    jsonData?: VisuallyJsDefaultJSON;
-    /**
-     * Optional url from which to load data after the component has been mounted. If you provide this and also data, this will take precedence.
-     */
-    url?: string;
-    /**
-     * Whether the chart is interactive.
-     */
-    interactive?: boolean;
-    /**
-     * Optional property to pivot the sankey chart on.
+     * @internal
      */
-    pivot?: string;
+    children?: Snippet;
 }
 /**
  * Props for the diagram palette.
@@ -838,4 +608,8 @@ export interface DecoratorComponentProps extends DOMAttributes<HTMLDivElement> {
      * Optional constraints when using fixed placement.
      */
     constraints?: FixedElementConstraints;
+    /**
+     * @internal
+     */
+    children?: Snippet;
 }

package/diagram-store.d.ts

@@ -23,8 +23,3 @@ export declare function internal_createDiagramContext(): DiagramRef;
  * @internal
  */
 export declare function internal_getDiagramContext(doNotCreate: boolean): DiagramRef;
-/**
- * Hook to expose the current Surface. This hook is asynchronous and returns a Promise.
- * @group Hooks
- */
-export declare function useDiagram(): Promise<Diagram>;

package/diagram-store.js

@@ -41,18 +41,3 @@ export function internal_getDiagramContext(doNotCreate) {
     }
     return ctx;
 }
-/**
- * Hook to expose the current Surface. This hook is asynchronous and returns a Promise.
- * @group Hooks
- */
-export function useDiagram() {
-    const ref = internal_getDiagramContext(true);
-    return new Promise((resolve, reject) => {
-        if (ref != null) {
-            ref.listen((s) => resolve(s));
-        }
-        else {
-            reject();
-        }
-    });
-}

package/index.d.ts

@@ -11,7 +11,11 @@ export * from './diagram-store';
 export * from './surface-store';
 export * from './inspector-store';
 export * from './definitions';
+export * from './charts/definitions';
 export * from './use-zoom.svelte';
+export * from './use-surface.svelte';
+export * from './use-diagram.svelte';
+export * from './use-visuallyjs-update.svelte';
 import { BrowserElement, BrowserUIModel, BrowserUIOptions, TemplateRenderer, ModelOptions } from "@visuallyjs/browser-ui";
 /**
  * Extension of VisuallyJsModel suitable for use with the Svelte integration.

package/index.js

@@ -11,7 +11,11 @@ export * from './diagram-store';
 export * from './surface-store';
 export * from './inspector-store';
 export * from './definitions';
+export * from './charts/definitions';
 export * from './use-zoom.svelte';
+export * from './use-surface.svelte';
+export * from './use-diagram.svelte';
+export * from './use-visuallyjs-update.svelte';
 import { BrowserUIModel, log } from "@visuallyjs/browser-ui";
 /**
  * Extension of VisuallyJsModel suitable for use with the Svelte integration.

package/package.json

@@ -1 +1 @@
-{"name":"@visuallyjs/browser-ui-svelte","version":"1.1.3","description":"VisuallyJS Svelte integration for Browser UI renderer","module":"index.js","main":"index.js","types":"index.d.ts","svelte":"index.js","files":["**/*.d.ts","**/*.js","SurfaceComponent.svelte","DecoratorComponent.svelte","DefaultGroupComponent.svelte","DefaultNodeComponent.svelte","MiniviewComponent.svelte","ControlsComponent.svelte","SurfaceProvider.svelte","PaletteComponent.svelte","InspectorComponent.svelte","EdgeTypePickerComponent.svelte","ShapePaletteComponent.svelte","ExportControlsComponent.svelte","ShapeComponent.svelte","DiagramComponent.svelte","BarChartComponent.svelte","ColumnChartComponent.svelte","XYChartComponent.svelte","LineChartComponent.svelte","AreaChartComponent.svelte","PieChartComponent.svelte","WrapperComponent.svelte","DiagramProvider.svelte","DiagramPaletteComponent.svelte","ColorPickerComponent.svelte","ScatterChartComponent.svelte","BubbleChartComponent.svelte","GaugeChartComponent.svelte","SankeyChartComponent.svelte"],"author":"VisuallyJs <hello@visuallyjs.com> (https://visuallyjs.com)","license":"Commercial","dependencies":{"@visuallyjs/browser-ui":"1.1.3"},"homepage":"https://visuallyjs.com/svelte","bugs":"https://github.com/visuallyjs/visuallyjs/issues"}
+{"name":"@visuallyjs/browser-ui-svelte","version":"1.2.0","description":"VisuallyJS Svelte integration for Browser UI renderer","module":"index.js","main":"index.js","types":"index.d.ts","svelte":"index.js","files":["**/*.d.ts","**/*.js","SurfaceComponent.svelte","DecoratorComponent.svelte","DefaultGroupComponent.svelte","DefaultNodeComponent.svelte","MiniviewComponent.svelte","ControlsComponent.svelte","SurfaceProvider.svelte","PaletteComponent.svelte","InspectorComponent.svelte","EdgeTypePickerComponent.svelte","ShapePaletteComponent.svelte","ExportControlsComponent.svelte","ShapeComponent.svelte","DiagramComponent.svelte","BarChartComponent.svelte","ColumnChartComponent.svelte","XYChartComponent.svelte","LineChartComponent.svelte","AreaChartComponent.svelte","PieChartComponent.svelte","WrapperComponent.svelte","DiagramProvider.svelte","DiagramPaletteComponent.svelte","ColorPickerComponent.svelte","ScatterChartComponent.svelte","BubbleChartComponent.svelte","GaugeChartComponent.svelte","SankeyChartComponent.svelte"],"author":"VisuallyJs <hello@visuallyjs.com> (https://visuallyjs.com)","license":"Commercial","dependencies":{"@visuallyjs/browser-ui":"1.2.0"},"homepage":"https://visuallyjs.com/svelte","bugs":"https://github.com/visuallyjs/visuallyjs/issues"}

package/surface-store.d.ts

@@ -29,11 +29,6 @@ export declare function internal_createSurfaceContext(): SurfaceRef;
  * @internal
  */
 export declare function internal_getSurfaceContext(doNotCreate: boolean): SurfaceRef;
-/**
- * Hook to expose the current Surface. This hook is asynchronous and returns a Promise.
- * @group Hooks
- */
-export declare function useSurface(): Promise<Surface>;
 /**
  * Hook to expose the current model. This hook is asynchronous and returns a Promise.
  * @group Hooks

package/surface-store.js

@@ -1,4 +1,5 @@
 import { getContext, setContext } from "svelte";
+import { internal_getDiagramContext } from "./index";
 /**
  * Key for the surface context
  * @internal
@@ -41,31 +42,20 @@ export function internal_getSurfaceContext(doNotCreate) {
     }
     return ctx;
 }
-/**
- * Hook to expose the current Surface. This hook is asynchronous and returns a Promise.
- * @group Hooks
- */
-export function useSurface() {
-    const ref = internal_getSurfaceContext(true);
-    return new Promise((resolve, reject) => {
-        if (ref != null) {
-            ref.listen((s) => resolve(s));
-        }
-        else {
-            reject();
-        }
-    });
-}
 /**
  * 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 diagramRef = internal_getDiagramContext(true);
     return new Promise((resolve, reject) => {
         if (ref != null) {
             ref.listen((s) => resolve(s.model));
         }
+        else if (diagramRef != null) {
+            diagramRef.listen((d) => resolve(d.model));
+        }
         else {
             reject();
         }

package/use-diagram.svelte.d.ts

@@ -0,0 +1,8 @@
+import { Diagram } from '@visuallyjs/browser-ui';
+/**
+ *
+ * @group Hooks
+ */
+export declare function useDiagram(): {
+    readonly current: Diagram | null;
+};

package/use-diagram.svelte.js

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

package/use-surface.svelte.d.ts

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

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 {