@visuallyjs/browser-ui-svelte 1.1.4 → 1.2.1

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/SurfaceProvider.svelte

@@ -2,8 +2,10 @@
 
 	import { internal_getSurfaceContext } from "./surface-store"
 
+	const { children } = $props()
+
     internal_getSurfaceContext(false)
 
 </script>
 
-<slot />
+{@render children?.()}

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/XYChartComponent.svelte

@@ -2,30 +2,51 @@
 
 	import { onMount  } from "svelte";
 
-	import { CategoryValueChart } from "@visuallyjs/browser-ui"
-    import {type XYChartComponentProps} from "./definitions";
+    import {
+        CategoryValueChart,
+        type CategoryValueChartOptions
+    } from "@visuallyjs/browser-ui"
+    import {type XYChartComponentProps} from "./charts/definitions";
+    import {useVisuallyJsModel} from "./surface-store";
 
     let container:HTMLElement;
 
 	// XYChartOptions
-	let {options, className = "", data, url }:XYChartComponentProps = $props()
+	let {options, className = "", data, url, dataSourceFilter }:XYChartComponentProps = $props()
 
-	let chart:CategoryValueChart<any>
+	let chart:CategoryValueChart
 
 	export function getChart() {
 	    return chart;
     }
 
-	onMount(async () => {
+    function init(opts:CategoryValueChartOptions) {
+        chart = new CategoryValueChart(container, opts)
+        if (url != null) {
+            chart.load({url});
+        } else if (data != null) {
+            chart.load({data});
+        }
+    }
 
-		chart = new CategoryValueChart(container, options)
+    $effect(() => {
+        if (chart && dataSourceFilter != null) {
+            chart.setDataSourceFilter(dataSourceFilter)
+        }
+    })
+
+    onMount(async () => {
+        const opts:CategoryValueChartOptions = Object.assign({}, options)
+        if (url == null && data == null) {
+            useVisuallyJsModel().then(m => {
+                opts.dataSource = m
+                init(opts)
+            })
+        } else {
+            init(opts)
+        }
+    })
 
-		if (url != null) {
-			chart.load({url});
-		} else if (data != null) {
-			chart.load({data});
-		}
-	})
 
 </script>
 

package/charts/definitions.d.ts

@@ -0,0 +1,119 @@
+import { DOMAttributes } from "svelte/elements";
+import { CategoryValueChartOptions, ObjectData, ChartModelFilter, ColumnChartOptions, BarChartOptions, LineChartOptions, PieChartOptions, ScatterChartOptions, AreaChartOptions, GaugeChartOptions, SankeyOptions, VisuallyJsDefaultJSON } from "@visuallyjs/browser-ui";
+/**
+ * @group Props
+ */
+export interface BaseXYChartComponentProps<O> extends DOMAttributes<HTMLDivElement> {
+    /**
+     * Options for the chart
+     */
+    options: Omit<O, "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;
+}
+/**
+ * Props for the AreaChartComponent
+ * @group Props
+ */
+export interface AreaChartComponentProps extends BaseXYChartComponentProps<AreaChartOptions> {
+}
+/**
+ * Props for the ColumnChartComponent
+ * @group Props
+ */
+export interface ColumnChartComponentProps extends BaseXYChartComponentProps<ColumnChartOptions> {
+}
+/**
+ * Props for the BarChartComponent
+ * @group Props
+ */
+export interface BarChartComponentProps extends BaseXYChartComponentProps<BarChartOptions> {
+}
+/**
+ * Props for the LineChartComponent
+ * @group Props
+ */
+export interface LineChartComponentProps extends BaseXYChartComponentProps<LineChartOptions> {
+}
+/**
+ * Props for the PieChartComponent
+ * @group Props
+ */
+export interface PieChartComponentProps extends BaseXYChartComponentProps<PieChartOptions> {
+}
+/**
+ * Props for the BarChartComponent
+ * @group Props
+ */
+export interface ScatterChartComponentProps extends BaseXYChartComponentProps<ScatterChartOptions> {
+}
+/**
+ * Props for the XYChartComponent
+ * @group Props
+ */
+export interface XYChartComponentProps extends BaseXYChartComponentProps<CategoryValueChartOptions> {
+}
+/**
+ * @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>;
+}
+/**
+ * @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.
+     */
+    pivot?: string;
+}

package/charts/definitions.js

@@ -0,0 +1 @@
+export {};

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