@visuallyjs/browser-ui-svelte 1.2.0 → 1.2.2

package/SurfaceComponent.svelte

@@ -13,21 +13,29 @@
         EVENT_RENDER_END,
         CLASS_DEFAULT_GROUP,
         CLASS_DEFAULT_NODE, Surface,
-		type BrowserElement,
-		type ObjectData,
-		Vertex,
-		partition,
-		type VertexUpdatedParams,
+        type BrowserElement,
+        type ObjectData,
+        Vertex,
+        partition,
+        type VertexUpdatedParams,
         extend, EVENT_GRAPH_CLEARED, EVENT_NODE_UPDATED, EVENT_GROUP_UPDATED,
-		type NodeRemovedParams, EVENT_NODE_REMOVED,
+        type NodeRemovedParams, EVENT_NODE_REMOVED,
         type GroupRemovedParams, EVENT_GROUP_REMOVED,
-        type SurfaceOptions
+        type SurfaceOptions,
+        OVERLAY_TYPE_CUSTOM,
+        type Connection,
+        type EdgeUpdatedParams,
+        type EdgeRemovedParams,
+        EVENT_EDGE_UPDATED,
+        EVENT_EDGE_REMOVED,
+        ELEMENT_DIV, Edge
     } from "@visuallyjs/browser-ui";
     import { internal_getSurfaceContext } from "./surface-store";
 
     import DefaultNodeComponent from './DefaultNodeComponent.svelte'
     import DefaultGroupComponent from './DefaultGroupComponent.svelte'
     import WrapperComponent from "./WrapperComponent.svelte";
+    import OverlayWrapperComponent from "./OverlayWrapperComponent.svelte";
 
     let container:HTMLElement;
 
@@ -70,17 +78,78 @@
     // list of vertices to render
 	let _vertices:Array<ComponentHolder> = []
 
+    type OverlayHolder = {
+        component: any,
+        props: any,
+        edge: any,
+        id: string,
+		el:BrowserElement
+    }
+
+    let _overlays: Array<OverlayHolder> = []
+
 	// state wrapper around the vertex list
     let vertexState = $state({
 		vertices:_vertices
 	})
 
+    let overlayState = $state({
+        overlays: _overlays
+    })
+
 	// manages updating the vertex state cleanly.
     function _updateVertexState() {
         vertexState.vertices.length = 0
 		vertexState.vertices.push(..._vertices.slice())
     }
 
+    function _updateOverlayState() {
+        overlayState.overlays.length = 0
+        overlayState.overlays.push(..._overlays.slice())
+    }
+
+    function _initialiseSvelteOverlays() {
+        const edgeTypes = viewOptions?.edges || {}
+        for (let type in edgeTypes) {
+            const edgeDefinition = edgeTypes[type];
+            if (edgeDefinition.overlays) {
+                edgeDefinition.overlays = edgeDefinition.overlays.map((ov: any) => {
+                    if (ov.component != null) {
+                        return {
+                            type: OVERLAY_TYPE_CUSTOM,
+                            options: {
+                                create: (c: Connection<BrowserElement>) => {
+                                    const el = document.createElement(ELEMENT_DIV);
+                                    const overlayProps = {
+                                        data: c.edge.data,
+                                        model: surface.model,
+                                        ui: surface,
+                                        edge: c.edge,
+                                        vertex: c.edge, // Some components might expect vertex
+                                        ...ov.props
+                                    };
+
+                                    const holder: OverlayHolder = {
+                                        component: ov.component,
+                                        props: overlayProps,
+                                        edge: c.edge,
+                                        id: uuid(),
+										el
+                                    };
+
+                                    _overlays.push(holder);
+                                    _updateOverlayState();
+                                    return el;
+                                }
+                            }
+                        };
+                    }
+                    return ov;
+                });
+            }
+        }
+    }
+
     function render ( id:string,  data:ObjectData, model:BrowserUISvelteModel, type:string,
                       surface:Surface, def:any, modelObject:Vertex, eventInfo:any) {
 
@@ -179,7 +248,7 @@
         };
 
         const params = (renderOptions || {}) as SurfaceOptions;
-        params.view = viewOptions || {};
+        params.view = (viewOptions || {}) as any;
         params.id = id;
 
         if (shapeLibrary != null) {
@@ -188,6 +257,8 @@
             };
         }
 
+        _initialiseSvelteOverlays();
+
         surface = renderSurface(model, container, templateRenderer, params);
 
         // with continuous anchors it's necessary to do this, for
@@ -214,6 +285,8 @@
             if (entry != null) {
                 entry.props.data = mergeData()
                 _updateVertexState()
+
+				entry.vertex.getAllEdges().forEach((edge:Edge) => updateOverlays(edge.id, {edge}))
             }
         }
 
@@ -238,15 +311,32 @@
             removeVertex(p.group.id)
         });
 
+        const updateOverlays = (edgeId: string, eventPayload: { edge:Edge } ) => {
+            _overlays.forEach(o => {
+                if (o.edge.id === edgeId) {
+                    o.props.data = eventPayload.edge.data;
+                }
+            });
+            _updateOverlayState();
+        };
+
+        const removeOverlays = (edgeId: string) => {
+            _overlays = _overlays.filter(o => o.edge.id !== edgeId);
+            _updateOverlayState();
+        };
+
+        model.bind<EdgeUpdatedParams>(EVENT_EDGE_UPDATED, (p) => updateOverlays(p.edge.id, p));
+        model.bind<EdgeRemovedParams>(EVENT_EDGE_REMOVED, (p) => removeOverlays(p.edge.id));
+
 
         model.bind(EVENT_GRAPH_CLEARED, () => {
             _vertices = []
             _updateVertexState()
-            // TODO svelte overlays
-            // _overlays = []
-            // _updateOverlayState()
+            _overlays = []
+            _updateOverlayState()
         })
 
+		// TODO how can this be made reactive
         if (url != null) {
             model.load({ url });
         } else if (data != null) {
@@ -264,7 +354,15 @@
 						  def={vertex.def}
 						  vertex={vertex.vertex}
 						  className={vertex.props.className}/>
+	{/each}
 
+	{#each overlayState.overlays as overlay (overlay.id)}
+		<OverlayWrapperComponent component={overlay.component}
+						  data={overlay.props.data}
+						  ui={surface}
+						  edge={overlay.edge}
+						  className="vjs-svelte-overlay"
+							el={overlay.el}/>
 	{/each}
 	{@render children?.()}
 </div>

package/SurfacePopup.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+    import {PopupHandler, type Vertex, CLASS_SURFACE_POPUP} from "@visuallyjs/browser-ui";
+    import {useSurface} from "./use-surface.svelte";
+    import type {SurfacePopupProps} from "./definitions";
+
+    let {
+        selector,
+        anchor,
+        popup
+    }:SurfacePopupProps = $props()
+
+    const surface = useSurface()
+    let container:HTMLElement
+    let initialized = false
+
+	let handler:PopupHandler
+    let current = $state<Vertex|null>(null)
+    let display = $derived(current == null ? "none" : "block")
+
+	function hide() {
+        handler?.$hide()
+	}
+
+    $effect(() => {
+        if (!initialized && surface.current && container) {
+            initialized = true
+            handler = new PopupHandler(selector, container, surface.current, (v:Vertex|null) => current = v, anchor)
+        }
+    })
+
+</script>
+
+<div bind:this={container} class={CLASS_SURFACE_POPUP} style:display={display} style:position="absolute">
+    {#if current != null && surface.current != null}
+        {@render popup(current, surface.current.model, surface.current, hide)}
+    {/if}
+</div>

package/TiledImageBackgroundComponent.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+    import {useSurface} from "./use-surface.svelte";
+    import { BackgroundPlugin, TiledBackground } from "@visuallyjs/browser-ui"
+    import {usePaper} from "./use-paper.svelte";
+    import {TiledImageBackgroundComponentProps} from "./definitions";
+
+    let initialized = false
+    const surface = useSurface()
+	const paper = usePaper()
+
+	const props:TiledImageBackgroundComponentProps = $props()
+
+	$effect(() => {
+    	if (!initialized) {
+
+
+            if (surface.current) {
+                initialized = true
+                surface.current.addPlugin({
+                    type: BackgroundPlugin.type,
+                    options: {type: TiledBackground.type, ...props}
+                })
+            }
+            if (paper.current) {
+                initialized = true
+                paper.current.addPlugin({
+                    type: BackgroundPlugin.type,
+                    options: {
+                        type: TiledBackground.type,
+						...props
+                    }
+                })
+            }
+		}
+	})
+</script>

package/WrapperComponent.svelte

@@ -16,7 +16,9 @@
 	const _ui = $state.raw(ui) as BrowserUI
 
 	onMount(async () => {
-		ui.$vertexRendered(vertex, el, def)
+		if (def != null) {
+			ui.$vertexRendered(vertex, el, def)
+		}
 	})
 
 

package/ambient.d.ts

@@ -0,0 +1,7 @@
+declare namespace svelte.JSX {
+    interface HTMLAttributes<T> {
+        'vjs-att'?: string;
+        'vjs-port'?: string;
+        'vjs-focus'?: boolean;
+    }
+}

package/components.d.ts

@@ -2,6 +2,7 @@
  * list of exported Svelte components.
  */
 export { default as SurfaceComponent } from "./SurfaceComponent.svelte";
+export { default as PaperComponent } from "./PaperComponent.svelte";
 export { default as DiagramComponent } from "./DiagramComponent.svelte";
 export { default as ControlsComponent } from "./ControlsComponent.svelte";
 export { default as ExportControlsComponent } from "./ExportControlsComponent.svelte";
@@ -14,6 +15,7 @@ export { default as DiagramPaletteComponent } from "./DiagramPaletteComponent.sv
 export { default as ShapeComponent } from "./ShapeComponent.svelte";
 export { default as EdgeTypePickerComponent } from "./EdgeTypePickerComponent.svelte";
 export { default as ColorPickerComponent } from "./ColorPickerComponent.svelte";
+export { default as SurfacePopup } from "./SurfacePopup.svelte";
 export { default as ColumnChartComponent } from "./ColumnChartComponent.svelte";
 export { default as BarChartComponent } from "./BarChartComponent.svelte";
 export { default as XYChartComponent } from "./XYChartComponent.svelte";
@@ -25,5 +27,10 @@ export { default as BubbleChartComponent } from "./BubbleChartComponent.svelte";
 export { default as GaugeChartComponent } from "./GaugeChartComponent.svelte";
 export { default as SankeyChartComponent } from "./SankeyChartComponent.svelte";
 export { default as WrapperComponent } from "./WrapperComponent.svelte";
+export { default as OverlayWrapperComponent } from "./OverlayWrapperComponent.svelte";
 export { default as DiagramProvider } from "./DiagramProvider.svelte";
 export { default as SurfaceProvider } from "./SurfaceProvider.svelte";
+export { default as PaperProvider } from "./PaperProvider.svelte";
+export { default as GridBackgroundComponent } from "./GridBackgroundComponent.svelte";
+export { default as ImageBackgroundComponent } from "./ImageBackgroundComponent.svelte";
+export { default as TiledImageBackgroundComponent } from "./TiledImageBackgroundComponent.svelte";

package/components.js

@@ -2,6 +2,7 @@
  * list of exported Svelte components.
  */
 export { default as SurfaceComponent } from "./SurfaceComponent.svelte";
+export { default as PaperComponent } from "./PaperComponent.svelte";
 export { default as DiagramComponent } from "./DiagramComponent.svelte";
 export { default as ControlsComponent } from "./ControlsComponent.svelte";
 export { default as ExportControlsComponent } from "./ExportControlsComponent.svelte";
@@ -14,6 +15,7 @@ export { default as DiagramPaletteComponent } from "./DiagramPaletteComponent.sv
 export { default as ShapeComponent } from "./ShapeComponent.svelte";
 export { default as EdgeTypePickerComponent } from "./EdgeTypePickerComponent.svelte";
 export { default as ColorPickerComponent } from "./ColorPickerComponent.svelte";
+export { default as SurfacePopup } from "./SurfacePopup.svelte";
 export { default as ColumnChartComponent } from "./ColumnChartComponent.svelte";
 export { default as BarChartComponent } from "./BarChartComponent.svelte";
 export { default as XYChartComponent } from "./XYChartComponent.svelte";
@@ -25,5 +27,10 @@ export { default as BubbleChartComponent } from "./BubbleChartComponent.svelte";
 export { default as GaugeChartComponent } from "./GaugeChartComponent.svelte";
 export { default as SankeyChartComponent } from "./SankeyChartComponent.svelte";
 export { default as WrapperComponent } from "./WrapperComponent.svelte";
+export { default as OverlayWrapperComponent } from "./OverlayWrapperComponent.svelte";
 export { default as DiagramProvider } from "./DiagramProvider.svelte";
 export { default as SurfaceProvider } from "./SurfaceProvider.svelte";
+export { default as PaperProvider } from "./PaperProvider.svelte";
+export { default as GridBackgroundComponent } from "./GridBackgroundComponent.svelte";
+export { default as ImageBackgroundComponent } from "./ImageBackgroundComponent.svelte";
+export { default as TiledImageBackgroundComponent } from "./TiledImageBackgroundComponent.svelte";

package/definitions.d.ts

@@ -1,11 +1,16 @@
 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";
+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, PopupPosition, OverlaySpec, PaperOptions, TilingStrategy, GridType, Grid } from "@visuallyjs/browser-ui";
 /**
  * Render options for a SurfaceComponent. This interface is the same as SurfaceOptions but with several vanilla-only options removed.
  */
 export interface SvelteSurfaceRenderOptions extends Omit<SurfaceOptions, "directRender" | "enhancedView" | "view" | "templates"> {
 }
+/**
+ * Render options for a PaperComponent. This interface is the same as PaperOptions but with several vanilla-only options removed.
+ */
+export interface SveltePaperRenderOptions extends Omit<PaperOptions, "directRender" | "enhancedView" | "view" | "templates"> {
+}
 /**
  * Definition of a node - its component, and behaviour.
  */
@@ -40,15 +45,23 @@ 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.
- */
-/**
- * Edge mappings for a view.
+ * Definition for an overlay when using Svelte components.
  */
+export interface SvelteOverlaySpec {
+    /**
+     * Component used to render this overlay.
+     */
+    component: any;
+    /**
+     * Props to pass to the component.
+     */
+    props?: Record<string, any>;
+}
 /**
  * Mapping definition for edges in a Svelte view.
  */
-export interface SvelteEdgeMapping extends EdgeMapping {
+export interface SvelteEdgeMapping extends Omit<EdgeMapping, "overlays"> {
+    overlays?: Array<OverlaySpec | SvelteOverlaySpec>;
 }
 /**
  * Options for the view in the Svelte surface component. Maps node/group/port/edge types to components and behaviour.
@@ -71,6 +84,11 @@ export interface SvelteSurfaceViewOptions {
      */
     edges?: Record<string, SvelteEdgeMapping>;
 }
+/**
+ * Options for the view in the Svelte paper component. Maps node/group/port/edge types to components and behaviour.
+ */
+export interface SveltePaperViewOptions extends SvelteSurfaceViewOptions {
+}
 /**
  * @group Props
  */
@@ -115,6 +133,56 @@ export interface SurfaceComponentProps extends DOMAttributes<HTMLDivElement> {
      * Shape library to use to render SVG shapes. Optional.
      */
     shapeLibrary?: ShapeLibraryImpl<ObjectData>;
+    /**
+     * An optional array of reactive objects. The properties from these objects will be
+     * merged into the props passed to each WrapperComponent, preserving reactivity.
+     */
+    additionalProps?: Array<Record<string, any>>;
+}
+/**
+ * @group Props
+ */
+export interface PaperComponentProps extends DOMAttributes<HTMLDivElement> {
+    /**
+     * @internal
+     */
+    children?: Snippet;
+    /**
+     * Optional class name to set on the paper component's container
+     */
+    className?: string;
+    /**
+     * Render options for the Paper.
+     */
+    renderOptions?: SveltePaperRenderOptions;
+    /**
+     * View options for the Paper.
+     */
+    viewOptions?: SveltePaperViewOptions;
+    /**
+     * Options for the underlying model instance.
+     */
+    modelOptions?: ModelOptions;
+    /**
+     * Optional Visually JS instance to use. If this is not provided, a Visually JS instance will be created, with `modelOptions` if you provide them.
+     */
+    model?: BrowserUIModel;
+    /**
+     * Optional function that is used to generate a set of props for a given vertex before rendering it. This provides a mechanism for you to inject specific items into the components you use to render your vertices. The return value of this function should be `Record<string, any>`. It may be null.
+     */
+    injector?: (v: Vertex) => Record<string, any>;
+    /**
+     * Optional data to load after the component has been mounted.
+     */
+    data?: any;
+    /**
+     * 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;
+    /**
+     * Shape library to use to render SVG shapes. Optional.
+     */
+    shapeLibrary?: ShapeLibraryImpl<ObjectData>;
 }
 /**
  * @group Props
@@ -461,6 +529,128 @@ export interface ExportControlsComponentProps extends DOMAttributes<HTMLDivEleme
      */
     allowJpgExport?: boolean;
 }
+/**
+ * Props for the GridBackgroundComponent
+ * @group Props
+ */
+export interface GridBackgroundComponentProps {
+    /**
+     * The grid to use. This is optional; if you do not supply one the background will attempt to read the grid definition from the Surface. If that is also not set then a default grid of 50x50 pixels will be used.
+     */
+    grid?: Grid;
+    /**
+     * Whether or not to show a thick border around the entire background. Defaults to false.
+     */
+    showBorder?: boolean;
+    /**
+     * The minimum width for the grid. The value you provided is divided by 2 and then the grid is guaranteed to always at least span the range of (-minWidth / 2) - (minWidth / 2). Defaults to 20 000.
+     */
+    minWidth?: number;
+    /**
+     * The minimum height for the grid. The value you provided is divided by 2 and then the grid is guaranteed to always at least span the range of (-minHeight / 2) - (minHeight / 2). Defaults to 20 000.
+     */
+    minHeight?: number;
+    /**
+     * Defaults to false. If true, the grid will also draw tick marks between the grid lines.
+     */
+    showTickMarks?: boolean;
+    /**
+     * Number of tick marks to draw per cell. Defaults to 2.
+     */
+    tickMarksPerCell?: number;
+    /**
+     * The maximum width for the grid. The value you provided is divided by 2 and then the grid is guaranteed to never exceed the range of (-maxWidth / 2) - (maxWidth / 2).  maxWidth takes precedence over minWidth.
+     */
+    maxWidth?: number;
+    /**
+     * The maximum height for the grid. The value you provided is divided by 2 and then the grid is guaranteed to never exceed the range of (-maxHeight / 2) - (maxHeight / 2).  maxHeight takes precedence over minHeight.
+     */
+    maxHeight?: number;
+    /**
+     * Defaults to true, and instructs the grid that if the grid has grown beyond any minimum value set in either axis, if the content bounds subsequently shrink in that axis below the minimum, the grid should shrink back to the minimum. If you set this to false the grid will never shrink back to its minimum values once they have been exceeded.
+     */
+    autoShrink?: boolean;
+    /**
+     * Type of grid - lines or dots. Defaults to lines.
+     */
+    gridType?: GridType;
+    /**
+     * The radius for dots representing grid positions (when gridType id GridTypes.dotted). Defaults to 2.
+     */
+    dotRadius?: number;
+    /**
+     * The radius for dots representing grid tick marks (when gridType id GridTypes.dotted). Defaults to 1.
+     */
+    tickDotRadius?: number;
+    /**
+     * Whether or not the background is initially visible. Defaults to true.
+     */
+    visible?: boolean;
+}
+/**
+ * Props for the ImageBackgroundComponent
+ * @group Props
+ */
+export interface ImageBackgroundComponentProps {
+    /**
+     * URL of the image to load.
+     */
+    url: string;
+}
+/**
+ * Props for the tiled image background component
+ * @group Props
+ */
+export interface TiledImageBackgroundComponentProps {
+    /**
+     * URL for the background. You can supply this, or you can supply a `urlGenerator` function instead. If you supply `url` and no `urlGenerator`, the url you supply is treated as a template for the url for any given tile, and is expected to contain `{z}`, `{x}` and `{y}` placeholders. The form of the URL can be anything you like as long as it has the placeholders for z, x and y.  For instance:
+     *
+     * http://foo.com/{z}/{x}/{y}
+     * https://bar.com?zoom={z}&x={x}&y={y}
+     *
+     * etc
+     */
+    url?: string;
+    /**
+     * For tiled backgrounds, an optional function you can supply to generate the URL for a given tile. See `url` for
+     * an explanation of the default syntax for urls when using a tiled background.
+     * @param z zoom level
+     * @param x x coordinate of tile
+     * @param y y coordinate of tile
+     */
+    urlGenerator?: (z: number, x: number, y: number) => string;
+    /**
+     * Provides the width and height of tiles. Every tile is assumed to have these dimensions,
+     * even if the tile has whitespace in it. Required.
+     */
+    tileSize: Size;
+    /**
+     * Required. Indicates the width of the full image.
+     */
+    width: number;
+    /**
+     * Required. Indicates the height of the full image.
+     */
+    height: number;
+    /**
+     * Required. Indicates the maximum zoom level. Zoom starts at 0 - fully zoomed out - and
+     * increases in integer values from there. Each successive zoom level is twice the zoom of the previous level,
+     * meaning two times as many tiles in each direction.
+     */
+    maxZoom: number;
+    /**
+     * Default is TilingStrategies.logarithmic. See notes for `TilingStrategies` enum.
+     */
+    tiling?: TilingStrategy;
+    /**
+     * How long to wait after a pan before reloading tiles.
+     */
+    panDebounceTimeout?: number;
+    /**
+     * How long to wait after a zoom before reloading tiles.
+     */
+    zoomDebounceTimeout?: number;
+}
 /**
  * @group Props
  */
@@ -613,3 +803,21 @@ export interface DecoratorComponentProps extends DOMAttributes<HTMLDivElement> {
      */
     children?: Snippet;
 }
+/**
+ * Props for the SurfacePopup component.
+ * @group Props
+ */
+export interface SurfacePopupProps {
+    /**
+     * CSS3 selector identifying elements from which this popup is launched.
+     */
+    selector: string;
+    /**
+     * Optional position to place this popup. Defaults to "bottom", and can also be overridden on a per-launcher basis via a DOM attribute.
+     */
+    anchor?: PopupPosition;
+    /**
+     * The snippet that renders the content for the popup.
+     */
+    popup: Snippet<[Vertex | null, BrowserUIModel, BrowserUI, (() => any)]>;
+}

package/index.d.ts

@@ -14,6 +14,7 @@ export * from './definitions';
 export * from './charts/definitions';
 export * from './use-zoom.svelte';
 export * from './use-surface.svelte';
+export * from './use-paper.svelte';
 export * from './use-diagram.svelte';
 export * from './use-visuallyjs-update.svelte';
 import { BrowserElement, BrowserUIModel, BrowserUIOptions, TemplateRenderer, ModelOptions } from "@visuallyjs/browser-ui";

package/index.js

@@ -14,6 +14,7 @@ export * from './definitions';
 export * from './charts/definitions';
 export * from './use-zoom.svelte';
 export * from './use-surface.svelte';
+export * from './use-paper.svelte';
 export * from './use-diagram.svelte';
 export * from './use-visuallyjs-update.svelte';
 import { BrowserUIModel, log } from "@visuallyjs/browser-ui";

package/package.json

@@ -1 +1 @@
-{"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"}
+{"name":"@visuallyjs/browser-ui-svelte","version":"1.2.2","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","PaperComponent.svelte","DecoratorComponent.svelte","DefaultGroupComponent.svelte","DefaultNodeComponent.svelte","MiniviewComponent.svelte","ControlsComponent.svelte","SurfaceProvider.svelte","PaperProvider.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","OverlayWrapperComponent.svelte","DiagramProvider.svelte","DiagramPaletteComponent.svelte","ColorPickerComponent.svelte","ScatterChartComponent.svelte","BubbleChartComponent.svelte","GaugeChartComponent.svelte","SankeyChartComponent.svelte","SurfacePopup.svelte","GridBackgroundComponent.svelte","ImageBackgroundComponent.svelte","TiledImageBackgroundComponent.svelte"],"author":"VisuallyJs <hello@visuallyjs.com> (https://visuallyjs.com)","license":"Commercial","dependencies":{"@visuallyjs/browser-ui":"1.2.2"},"homepage":"https://visuallyjs.com/svelte","bugs":"https://github.com/visuallyjs/visuallyjs/issues"}