@visuallyjs/browser-ui-svelte 1.2.0 → 1.2.1

package/ColorPickerComponent.svelte

@@ -55,7 +55,7 @@
 
     function colorPicked() {
         const v = colorInput.value
-        inspector.setValue(props.propertyName, v)
+        inspector.setValue(props.propertyName, v, null)
         addColor(v)
     }
 
@@ -78,7 +78,7 @@
     })
 
     function selectSwatch(c:string) {
-        inspector.setValue(props.propertyName, c)
+        inspector.setValue(props.propertyName, c, null)
         colorInput.value = c
     }
 

package/EdgeTypePickerComponent.svelte

@@ -30,7 +30,7 @@
                 inspector = i
 				const edgeMappings = resolveMappings()
                 edgeTypePicker = new EdgeTypePicker(inspector.$ui, container, edgeMappings, inspector.getValue(propertyName), (v) => {
-                    inspector.setValue(propertyName, v)
+                    inspector.setValue(propertyName, v, null)
                 })
 
                 edgeTypePicker.render(propertyName, inspector._currentCommonData)

package/OverlayWrapperComponent.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+
+    // This is a placeholder component that the surface uses to render each Svelte overlay,
+	// via a portal
+    import {type BrowserElement, BrowserUI} from "@visuallyjs/browser-ui";
+
+    let {component, edge, ui, data, className, el} = $props()
+
+	// svelte wants uppercase here. So we just assign to an uppercase var, which we use in the
+	// template
+	const ComponentToRender = component
+
+    // Define the portal action
+    function portal(node: BrowserElement, target: BrowserElement) {
+        if (!target) return; // Ensure target exists
+
+        target.appendChild(node);
+
+        return {
+            destroy() {
+                if (target.contains(node)) {
+                    target.removeChild(node);
+                }
+            }
+        };
+    }
+
+	const _ui = $state.raw(ui) as BrowserUI
+
+</script>
+
+<!-- Use the portal action on the root div -->
+<div use:portal={el} class={className}>
+	<ComponentToRender this={component} data={data} ui={_ui} edge={edge} model={_ui.model}/>
+</div>

package/PaperComponent.svelte

@@ -0,0 +1,365 @@
+<script lang="ts">
+    import { onMount, type Snippet } from "svelte";
+    import {
+        BrowserUISvelteModel,
+        newInstance,
+        type PaperComponentProps
+    } from "./index";
+    import {
+        isNode,
+        isGroup,
+        renderPaper,
+        uuid,
+        EVENT_RENDER_END,
+        CLASS_DEFAULT_GROUP,
+        CLASS_DEFAULT_NODE, Paper,
+		type BrowserElement,
+		type ObjectData,
+		Vertex,
+		partition,
+		type VertexUpdatedParams,
+        extend, EVENT_GRAPH_CLEARED, EVENT_NODE_UPDATED, EVENT_GROUP_UPDATED,
+		type NodeRemovedParams, EVENT_NODE_REMOVED,
+        type GroupRemovedParams, EVENT_GROUP_REMOVED,
+        type PaperOptions,
+        OVERLAY_TYPE_CUSTOM,
+        type Connection,
+        type EdgeUpdatedParams,
+        type EdgeRemovedParams,
+        EVENT_EDGE_UPDATED,
+        EVENT_EDGE_REMOVED,
+        ELEMENT_DIV
+    } from "@visuallyjs/browser-ui";
+    import { internal_getPaperContext } 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;
+
+    let {
+        className,
+        renderOptions,
+        viewOptions,
+        modelOptions,
+        model,
+        data,
+        url,
+        shapeLibrary,
+        injector,
+		children
+    }:PaperComponentProps = $props();
+
+    const paperContext = internal_getPaperContext(false);
+
+    let paper:Paper;
+
+    export function getPaper() {
+        return paper
+	}
+
+    export function getModel() {
+        return paper?.model
+    }
+
+    type ComponentHolder = {
+        component:any,
+        props:any,
+        vertex:Vertex,
+		def:any,
+		id:string
+    }
+
+    const componentMap:Map<string, ComponentHolder> = new Map();
+    const id = uuid();
+
+    // 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: paper.model,
+                                        ui: paper,
+                                        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,
+                      paper:Paper, def:any, modelObject:Vertex, eventInfo:any) {
+
+        const hasComponent = def.component != null
+        let component;
+        if (!hasComponent) {
+            if (isNode(modelObject)) {
+                component = DefaultNodeComponent;
+            } else if (isGroup(modelObject)) {
+                component = DefaultGroupComponent;
+            }
+        } else {
+            component = def.component;
+        }
+
+        if (component) {
+            let propsToSet:Record<string, any> = {
+                data: modelObject.data,
+                model,
+                ui:paper,
+                componentId: modelObject.getFullId(),
+                vertex: modelObject,
+                eventInfo,
+				className:hasComponent ? null : (isGroup(modelObject) ? CLASS_DEFAULT_GROUP : CLASS_DEFAULT_NODE)
+            }
+
+            if (injector != null) {
+                const injectedProps = injector(modelObject);
+                if (injectedProps != null) {
+                    for (let key in injectedProps) {
+                        propsToSet[key] = injectedProps[key];
+                    }
+                }
+            }
+
+            const props = $state(propsToSet)
+            const componentHolder:ComponentHolder = {
+                component, props, vertex:modelObject, def, id:modelObject.id
+            }
+
+			_vertices.push(componentHolder)
+			_updateVertexState()
+        }
+
+    }
+
+    function cleanupVertex(objId:string, el:BrowserElement) {
+        el.parentNode && el.parentNode.removeChild(el);
+    }
+
+    onMount(async () => {
+        model = model || newInstance(modelOptions || {});
+
+        const templateRenderer = {
+            asynchronous: true,
+            reactive: true,
+			usesWrapperElement:true,
+            update: (el:BrowserElement, data:Object, vertex:Vertex) => {
+                const component = componentMap.get(vertex.id);
+                if (component) {
+                    component.props.data = vertex.data
+                }
+            },
+            render,
+            cleanupVertex,
+            cleanupPort: (objId:string, el:BrowserElement) => {},
+            rerender: (
+                id:string,
+                data:ObjectData,
+                model:BrowserUISvelteModel,
+                type:string,
+                paper:Paper,
+                def:any,
+                modelObject:Vertex,
+                eventInfo:any,
+                originalElement:BrowserElement
+            ) => {
+
+                // split into vertices we want to keep and the one we want to discard
+                const p = partition(_vertices, (v) => v.vertex !== modelObject)
+				// assign the ones we want to keep, update state
+                _vertices = p.left
+                _updateVertexState()
+
+				// remove the old DOM element
+                if (p.right.length > 0) {
+                    cleanupVertex(modelObject.id, originalElement)
+				}
+
+                // on next tick, render again. it's important to wait for the next tick or the
+				// vertices state array gets messed up
+                setTimeout(() => {
+                    render(id, data, model, type, paper, def, modelObject, eventInfo)
+				})
+            }
+        };
+
+        const params = (renderOptions || {}) as PaperOptions;
+        params.view = (viewOptions || {}) as any;
+        params.id = id;
+
+        if (shapeLibrary != null) {
+            params.shapes = {
+                library: shapeLibrary,
+            };
+        }
+
+        _initialiseSvelteOverlays();
+
+        paper = renderPaper(model, container, templateRenderer, params);
+
+        // with continuous anchors it's necessary to do this, for
+        // asynchronous-y reasons. $redrawEveryConnection only redraws
+        // edges and does not update element positions so it's
+        // reasonably quick.
+        paper.bind(EVENT_RENDER_END, () => setTimeout(() => paper.$redrawEveryConnection()))
+
+        if (paperContext != null) {
+            paperContext.set(paper);
+        }
+
+        const updateVertex = (vertexId: string, eventPayload: VertexUpdatedParams) => {
+
+            let mergeData = () => {
+                let data = {}
+                if (eventPayload.originalData || eventPayload.updates) {
+                    data = extend(eventPayload.originalData, eventPayload.updates)
+                }
+                return data
+            };
+
+            const entry = _vertices.find((v) => v.vertex.id === vertexId);
+            if (entry != null) {
+                entry.props.data = mergeData()
+                _updateVertexState()
+            }
+        }
+
+        const removeVertex = (id: string) => {
+            _vertices = _vertices.filter(n => n.vertex.id !== id)
+            _updateVertexState()
+        }
+
+        model.bind<VertexUpdatedParams>(EVENT_NODE_UPDATED, (p: VertexUpdatedParams) => {
+            updateVertex(p.vertex.getFullId(), p)
+        });
+
+        model.bind<VertexUpdatedParams>(EVENT_GROUP_UPDATED, (p: VertexUpdatedParams) => {
+            updateVertex(p.vertex.getFullId(), p)
+        });
+		//
+        model.bind<NodeRemovedParams>(EVENT_NODE_REMOVED, (p: NodeRemovedParams) => {
+            removeVertex(p.node.id)
+        });
+		//
+        model.bind<GroupRemovedParams>(EVENT_GROUP_REMOVED, (p: GroupRemovedParams) => {
+            removeVertex(p.group.id)
+        });
+
+        const updateOverlays = (edgeId: string, eventPayload: EdgeUpdatedParams) => {
+            _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()
+            _overlays = []
+            _updateOverlayState()
+        })
+
+        if (url != null) {
+            model.load({ url });
+        } else if (data != null) {
+            model.load({ data });
+        }
+    });
+
+</script>
+
+<div class={className} bind:this={container}>
+	{#each vertexState.vertices as vertex (vertex.id)}
+		<WrapperComponent component={vertex.component}
+						  data={vertex.props.data}
+						  ui={paper}
+						  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={paper}
+						  edge={overlay.edge}
+						  className="vjs-svelte-overlay"
+							el={overlay.el}/>
+	{/each}
+	{@render children?.()}
+</div>

package/PaperProvider.svelte

@@ -0,0 +1,11 @@
+<script>
+
+	import { internal_getPaperContext } from "./surface-store"
+
+	const { children } = $props()
+
+    internal_getPaperContext(false)
+
+</script>
+
+{@render children?.()}

package/SurfaceComponent.svelte

@@ -21,13 +21,21 @@
         extend, EVENT_GRAPH_CLEARED, EVENT_NODE_UPDATED, EVENT_GROUP_UPDATED,
 		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
     } 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
@@ -238,13 +309,29 @@
             removeVertex(p.group.id)
         });
 
+        const updateOverlays = (edgeId: string, eventPayload: EdgeUpdatedParams) => {
+            _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()
         })
 
         if (url != null) {
@@ -264,7 +351,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,32 @@
+<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 current = $state<Vertex|null>(null)
+    let display = $derived(current == null ? "none" : "block")
+
+    $effect(() => {
+        if (!initialized && surface.current && container) {
+            initialized = true
+            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 surface.current != null}
+        {@render popup(current, surface.current.model, surface.current)}
+    {/if}
+</div>

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/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,7 @@ 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";

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,7 @@ 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";

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 } 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
@@ -613,3 +681,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]>;
+}

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.1","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"],"author":"VisuallyJs <hello@visuallyjs.com> (https://visuallyjs.com)","license":"Commercial","dependencies":{"@visuallyjs/browser-ui":"1.2.1"},"homepage":"https://visuallyjs.com/svelte","bugs":"https://github.com/visuallyjs/visuallyjs/issues"}

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));
         }