@visuallyjs/browser-ui-svelte 1.1.4 → 1.2.1

package/InspectorComponent.svelte

@@ -5,13 +5,19 @@
     import {type InspectorComponentProps} from "./definitions";
     import {getInspectorContext} from "./inspector-store";
     import {internal_getDiagramContext} from "./diagram-store";
+    import {useSurface} from "./use-surface.svelte";
+    import {useDiagram} from "./use-diagram.svelte";
 
     let container:HTMLElement
     let inspector:Inspector
-    let surface:Surface
-    let initialized = false
 
-    let currentType = ''
+    let initialised = false
+    const surface = useSurface()
+    const diagram = useDiagram()
+    const surfaceRef = $derived(surface.current || diagram.current?.$ui as Surface)
+
+    // let currentType:string|null = $state(null)
+	// let current:Base|null = $state(null)
 
     let {
         className = "",
@@ -19,27 +25,29 @@
         multipleSelections = false,
         filter,
 		refresh,
-		renderEmptyContainer,
-		style = ""
+		style = "",
+		current = $bindable(),
+		children
     }:InspectorComponentProps = $props()
 
 
 	const _refresh = (obj:Base, cb:Function) => {
-		currentType = obj.objectType
+		current = obj
+        // currentType = obj.objectType
 		refresh && refresh(obj)
 		setTimeout(cb)
 	}
 
-    const _renderEmptyContainer = renderEmptyContainer || (() => currentType = '')
-
-
-    function _maybeInit() {
-        if (!initialized && surface != null && container != null) {
-            initialized = true
+    $effect(() => {
+        if (!initialised && surfaceRef != null && container != null) {
+            initialised = true
 			inspector = new Inspector({
 				container,
-				ui:surface,
-                renderEmptyContainer:_renderEmptyContainer,
+				ui:surfaceRef,
+                renderEmptyContainer:(() => {
+                    // currentType = null
+                    current = null
+                }),
 				refresh:_refresh,
 				autoCommit,
 				multipleSelections,
@@ -49,31 +57,11 @@
 			// set on the context
 			getInspectorContext(false).set(inspector)
         }
-    }
-
-    onMount(async () => {
-        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: InspectorComponent did not find a Surface or Diagram context. Cannot mount.`)
-            }
-        }
     })
 
+
 </script>
 
 <div class={className} bind:this={container} style={style}>
-    <slot/>
+	{@render children?.()}
 </div>

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,
@@ -26,51 +27,30 @@
 		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,
-					showLasso,
-					trackSelection
-				}
-			})
+                    visible,
+                    container,
+                    typeFunction,
+                    elementFilter,
+                    wheelSensitivity,
+                    wheelReverse,
+                    enableWheelZoom,
+                    activeTracking,
+                    clickToCenter,
+                    showLasso,
+                    trackSelection
+                }
+            })
         }
-    }
-
-    onMount(async () => {
-        _maybeInit()
     })
+
 </script>
 <div bind:this={container} class={className}>
 

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/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>