@visuallyjs/browser-ui-svelte 1.1.3 → 1.2.0

package/LineChartComponent.svelte

@@ -2,12 +2,12 @@
 
 	import { onMount  } from "svelte";
 
-    import {LineChart, type BrowserElement} from "@visuallyjs/browser-ui"
-    import {type LineChartComponentProps} from "./definitions";
+    import {LineChart, type BrowserElement, type LineChartOptions} from "@visuallyjs/browser-ui"
+    import {type LineChartComponentProps} from "./charts/definitions";
+    import {useVisuallyJsModel} from "./surface-store";
 
     let container:BrowserElement;
 
-	// BarChartOptions
     let {options, className = "", data, url, dataSourceFilter }:LineChartComponentProps = $props();
 
 	let chart:LineChart;
@@ -17,21 +17,31 @@
     }
 
     $effect(() => {
-        if (chart) {
+        if (chart && dataSourceFilter != null) {
             chart.setDataSourceFilter(dataSourceFilter)
         }
     })
 
-	onMount(async () => {
-
-		chart = new LineChart(container, Object.assign({dataSourceFilter}, options))
+    function init(opts:LineChartOptions) {
+        chart = new LineChart(container, opts)
+        if (url != null) {
+            chart.load({url});
+        } else if (data != null) {
+            chart.load({data});
+        }
+    }
 
-		if (url != null) {
-			chart.load({url});
-		} else if (data != null) {
-			chart.load({data});
-		}
-	})
+    onMount(async () => {
+        const opts:LineChartOptions = Object.assign({dataSourceFilter}, options)
+        if (url == null && data == null) {
+            useVisuallyJsModel().then(m => {
+                opts.dataSource = m
+                init(opts)
+            })
+        } else {
+            init(opts)
+        }
+    })
 
 </script>
 

package/MiniviewComponent.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
 
-    import { onMount } from "svelte"
-
-    import {log, MiniviewPlugin, Surface} from "@visuallyjs/browser-ui"
-	import {internal_getSurfaceContext} from "./surface-store";
-    import {type MiniviewComponentProps} from "./definitions";
-    import {internal_getDiagramContext} from "./diagram-store";
+    import {MiniviewPlugin, Surface} from "@visuallyjs/browser-ui"
+	import {type MiniviewComponentProps} from "./definitions";
+    import {useSurface} from "./use-surface.svelte";
+    import {useDiagram} from "./use-diagram.svelte";
 
     let container:HTMLElement
-    let surface:Surface
+
     let initialised = false
+    const surface = useSurface()
+    const diagram = useDiagram()
+    const surfaceRef = $derived(surface.current || diagram.current?.$ui as Surface)
 
 	let {
         collapsible,
@@ -21,52 +22,35 @@
         wheelReverse,
         activeTracking,
         clickToCenter,
+        showLasso,
+        trackSelection,
 		className = ""
     }:MiniviewComponentProps = $props()
 
-	const sc = internal_getSurfaceContext(true)
-	if (sc != null) {
-        sc.listen(s => {
-            surface = s
-            _maybeInit()
-        })
-	} else {
-        const dc = internal_getDiagramContext(true)
-        if (dc != null) {
-            dc.listen(d => {
-                surface = d.$ui as Surface
-                _maybeInit()
-            })
-        }
-        else {
-            log(`WARN: MiniviewComponent did not find a Surface or Diagram context. Cannot mount.`)
-        }
-    }
 
-    function _maybeInit() {
-        if (!initialised && surface != null && container != null) {
-			initialised = true
-			surface.addPlugin({
-				type:MiniviewPlugin.type,
-				options:{
+    $effect(() => {
+        if (!initialised && container != null && surfaceRef != null) {
+            initialised = true
+            surfaceRef.addPlugin({
+                type:MiniviewPlugin.type,
+                options:{
                     collapsible,
-					visible,
-					container,
-					typeFunction,
-					elementFilter,
-					wheelSensitivity,
-					wheelReverse,
-					enableWheelZoom,
-					activeTracking,
-					clickToCenter
-				}
-			})
+                    visible,
+                    container,
+                    typeFunction,
+                    elementFilter,
+                    wheelSensitivity,
+                    wheelReverse,
+                    enableWheelZoom,
+                    activeTracking,
+                    clickToCenter,
+                    showLasso,
+                    trackSelection
+                }
+            })
         }
-    }
-
-    onMount(async () => {
-        _maybeInit()
     })
+
 </script>
 <div bind:this={container} class={className}>
 

package/PaletteComponent.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
 
-	import { onMount } from "svelte"
-
-	import {internal_getSurfaceContext} from "./surface-store";
-    import {log, Palette, Surface} from "@visuallyjs/browser-ui"
+	import {Palette, Surface} from "@visuallyjs/browser-ui"
     import {type PaletteComponentProps} from "./definitions";
+    import {useSurface} from "./use-surface.svelte";
+    import {useDiagram} from "./use-diagram.svelte";
 
 	let container:HTMLElement
-	let surface:Surface
-	let initialised = false
+    let initialised = false
+    const surface = useSurface()
+    const diagram = useDiagram()
+    const surfaceRef = $derived(surface.current || diagram.current?.$ui as Surface)
 
     let {
         selector = "[data-vjs-type]",
@@ -29,42 +30,28 @@
 		ignoreDropOnNode = false
     }:PaletteComponentProps = $props()
 
-	const sc = internal_getSurfaceContext(true)
-	if(sc != null) {
-		sc.listen(s => {
-			surface = s
-			_maybeInit()
-		})
-	} else {
-		log(`WARN: PaletteComponent did not find a Surface context - ensure the PaletteComponent is declared inside a SurfaceComponent or SurfaceProvider`)
-	}
-
-	function _maybeInit() {
-		if (!initialised && surface != null && container != null) {
-			initialised = true
-
-			new Palette(surface, {
-				source:container,
-				selector,
-				dataGenerator,
-				onVertexAdded,
-				selectAfterAdd,
-				allowClickToAdd,
-				clickToAddOnly,
-				dragSize,
-				canvasDropFilter,
-				mode,
-				allowDropOnNode,
-				allowDropOnEdge,
-				allowDropOnCanvas,
-				allowDropOnGroup,
-				ignoreDropOnNode
-			})
-		}
-	}
+    $effect(() => {
+        if (!initialised && container != null && surfaceRef != null) {
+            initialised = true
+            new Palette(surfaceRef, {
+                source:container,
+                selector,
+                dataGenerator,
+                onVertexAdded,
+                selectAfterAdd,
+                allowClickToAdd,
+                clickToAddOnly,
+                dragSize,
+                canvasDropFilter,
+                mode,
+                allowDropOnNode,
+                allowDropOnEdge,
+                allowDropOnCanvas,
+                allowDropOnGroup,
+                ignoreDropOnNode
+            })
+        }
 
-	onMount(async () => {
-		_maybeInit()
 	})
 
 </script>

package/PieChartComponent.svelte

@@ -2,8 +2,9 @@
 
 	import { onMount  } from "svelte";
 
-    import {PieChart, type BrowserElement} from "@visuallyjs/browser-ui"
-    import {type PieChartComponentProps} from "./definitions";
+    import {PieChart, type BrowserElement, type PieChartOptions} from "@visuallyjs/browser-ui"
+    import {type PieChartComponentProps} from "./charts/definitions";
+    import {useVisuallyJsModel} from "./surface-store";
 
     let container:BrowserElement;
 
@@ -16,20 +17,34 @@
     }
 
     $effect(() => {
-        if (chart) {
+        if (chart && dataSourceFilter != null) {
             chart.setDataSourceFilter(dataSourceFilter)
         }
     })
 
+	function init(opts:PieChartOptions) {
+        chart = new PieChart(container, opts)
+
+        if (url != null) {
+            chart.load({url});
+        } else if (data != null) {
+            chart.load({data});
+        }
+	}
+
 	onMount(async () => {
 
-		chart = new PieChart(container, Object.assign({dataSourceFilter}, options))
+        const opts:PieChartOptions = Object.assign({dataSourceFilter}, options)
 
-		if (url != null) {
-			chart.load({url});
-		} else if (data != null) {
-			chart.load({data});
+		if (url == null && data == null) {
+            useVisuallyJsModel().then(m => {
+                opts.dataSource = m
+				init(opts)
+			})
+		} else {
+            init(opts)
 		}
+
 	})
 
 </script>

package/SankeyChartComponent.svelte

@@ -2,41 +2,62 @@
 
 	import { onMount  } from "svelte";
 
-    import {SankeyChart, type BrowserElement} from "@visuallyjs/browser-ui"
-    import {type SankeyChartComponentProps} from "./definitions";
+    import {
+        SankeyChart,
+        type BrowserElement,
+        type SankeyOptions
+    } from "@visuallyjs/browser-ui"
+    import {type SankeyChartComponentProps} from "./charts/definitions";
+    import {useVisuallyJsModel} from "./surface-store";
 
     let container:BrowserElement;
 
     let {options, className = "", jsonData, csvData, url, interactive, pivot }:SankeyChartComponentProps = $props();
 
-	let chart:SankeyChart;
+	let chart:SankeyChart|null = $state(null);
 
     $effect(() => {
-        chart && chart.pivot(pivot)
+        if (pivot != null && chart != null) {
+            chart.pivot(pivot as string)
+		}
     })
 
 	export function getChart() {
 	    return chart;
     }
 
-	onMount(async () => {
+    function init(opts:SankeyOptions) {
+
+        chart = new SankeyChart(container, opts)
+
+        if (url != null) {
+            chart.load({url});
+        } else if (csvData != null) {
+            chart.load({csvData});
+        } else if (jsonData != null) {
+            chart.load({jsonData})
+        }
+    }
 
-		const _options = Object.assign({}, options)
+
+	onMount(async () => {
+        const _options:SankeyOptions = Object.assign({}, options)
         if (interactive != null) {
             _options.interactive = interactive
         }
         if (pivot != null) {
             _options.pivot = pivot
         }
-		chart = new SankeyChart(container, _options)
 
-		if (url != null) {
-			chart.load({url});
-		} else if (csvData != null) {
-			chart.load({csvData});
-		} else if (jsonData != null) {
-            chart.load({jsonData})
-		}
+        if (url == null && csvData == null && jsonData == null) {
+            useVisuallyJsModel().then(m => {
+                _options.dataSource = m
+                init(_options)
+            })
+        } else {
+            init(_options)
+        }
+
 	})
 
 </script>

package/ScatterChartComponent.svelte

@@ -2,8 +2,9 @@
 
 	import { onMount  } from "svelte";
 
-    import {type BrowserElement, ScatterChart} from "@visuallyjs/browser-ui"
-    import {type ScatterChartComponentProps} from "./definitions";
+    import {type BrowserElement, type ScatterChartOptions, ScatterChart} from "@visuallyjs/browser-ui"
+    import {type ScatterChartComponentProps} from "./charts/definitions";
+    import {useVisuallyJsModel} from "./surface-store";
 
     let container:BrowserElement;
 
@@ -17,21 +18,32 @@
     }
 
     $effect(() => {
-        if (chart) {
+        if (chart && dataSourceFilter != null) {
             chart.setDataSourceFilter(dataSourceFilter)
         }
     })
 
-	onMount(async () => {
+    function init(opts:ScatterChartOptions) {
+        chart = new ScatterChart(container, opts)
+        if (url != null) {
+            chart.load({url});
+        } else if (data != null) {
+            chart.load({data});
+        }
+    }
 
-		chart = new ScatterChart(container, Object.assign({dataSourceFilter}, options))
+    onMount(async () => {
+        const opts:ScatterChartOptions = Object.assign({dataSourceFilter}, 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/ShapePaletteComponent.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-    import { internal_getSurfaceContext } from "./surface-store"
-	import { onMount } from "svelte"
+
     import {log, ShapePalette, Surface} from "@visuallyjs/browser-ui"
     import {type ShapePaletteComponentProps} from "./definitions";
+    import {useSurface} from "./use-surface.svelte";
+    import {useDiagram} from "./use-diagram.svelte";
 
     let {
         className = "",
@@ -24,30 +25,22 @@
 		preparedShapes
     }:ShapePaletteComponentProps = $props()
 
-	let surface:Surface
     let container:HTMLElement
-	let initialised = false
-
-    const sc = internal_getSurfaceContext(true)
-    if(sc != null) {
-        sc.listen(s => {
-            surface = s
-            _maybeInit()
-        })
-    } else {
-        log(`WARN: ShapePaletteComponent did not find a Surface context - ensure the ShapePaletteComponent is declared inside a SurfaceComponent or SurfaceProvider`)
-    }
+    let initialised = false
+    const surface = useSurface()
+    const diagram = useDiagram()
+    const surfaceRef = $derived(surface.current || diagram.current?.$ui as Surface)
 
-	function _maybeInit() {
-		if (!initialised && surface != null && container != null) {
+	$effect(() => {
+		if (!initialised && surfaceRef != null && container != null) {
 			initialised = true
 
-			const shapeLibrary = surface.getShapeLibrary()
+			const shapeLibrary = surfaceRef.getShapeLibrary()
 			if (shapeLibrary == null) {
 				log("WARN: no shape library set on surface; ShapePaletteComponent cannot render")
 			} else {
 
-                new ShapePalette(surface, {
+                new ShapePalette(surfaceRef, {
                     container,
                     dataGenerator,
 					autoExitDrawMode,
@@ -71,10 +64,6 @@
 			}
 
 		}
-	}
-
-	onMount(async () => {
-		_maybeInit()
 	})
 
 

package/SurfaceProvider.svelte

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

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