@visuallyjs/browser-ui-svelte 1.1.3 → 1.2.0

package/AreaChartComponent.svelte

@@ -2,8 +2,9 @@
 
 	import { onMount  } from "svelte";
 
-    import {AreaChart, type BrowserElement} from "@visuallyjs/browser-ui"
-    import {type AreaChartComponentProps} from "./definitions";
+    import {AreaChart, type AreaChartOptions, type BrowserElement} from "@visuallyjs/browser-ui"
+    import {type AreaChartComponentProps} from "./charts/definitions";
+    import {useVisuallyJsModel} from "./surface-store";
 
     let container:BrowserElement;
 
@@ -11,25 +12,33 @@
 
 	let chart:AreaChart;
 
-	export function getChart() {
-	    return chart;
-    }
-
     $effect(() => {
         if (chart) {
-            chart.setDataSourceFilter(dataSourceFilter)
+            if (dataSourceFilter != null) {
+                chart.setDataSourceFilter(dataSourceFilter)
+            }
         }
     })
 
-	onMount(async () => {
-
-		chart = new AreaChart(container, Object.assign({dataSourceFilter}, options))
+	function init(opts:AreaChartOptions) {
+        chart = new AreaChart(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:AreaChartOptions = Object.assign({dataSourceFilter}, options)
+        if (url == null && data == null) {
+            useVisuallyJsModel().then(m => {
+                opts.dataSource = m
+                init(opts)
+            })
+        } else {
+            init(opts)
+        }
 	})
 
 </script>

package/BarChartComponent.svelte

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

package/BubbleChartComponent.svelte

@@ -2,8 +2,9 @@
 
 	import { onMount  } from "svelte";
 
-    import {type BrowserElement, BubbleChart} from "@visuallyjs/browser-ui"
-    import {type BubbleChartComponentProps} from "./definitions";
+    import {type BubbleChartOptions, type BrowserElement, BubbleChart} from "@visuallyjs/browser-ui"
+    import {type BubbleChartComponentProps} 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:BubbleChartOptions) {
+        chart = new BubbleChart(container, opts)
+        if (url != null) {
+            chart.load({url});
+        } else if (data != null) {
+            chart.load({data});
+        }
+    }
 
-		chart = new BubbleChart(container, Object.assign({dataSourceFilter}, options))
+    onMount(async () => {
+        const opts:BubbleChartOptions = 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/ColumnChartComponent.svelte

@@ -2,8 +2,9 @@
 
 	import { onMount  } from "svelte";
 
-    import {type BrowserElement, ColumnChart} from "@visuallyjs/browser-ui"
-    import {type ColumnChartComponentProps} from "./definitions";
+    import {type BrowserElement, type ColumnChartOptions, ColumnChart} from "@visuallyjs/browser-ui"
+    import {type ColumnChartComponentProps} 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:ColumnChartOptions) {
+        chart = new ColumnChart(container, opts)
+        if (url != null) {
+            chart.load({url});
+        } else if (data != null) {
+            chart.load({data});
+        }
+    }
 
-		chart = new ColumnChart(container, Object.assign({dataSourceFilter}, options))
+    onMount(async () => {
+        const opts:ColumnChartOptions = 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/ControlsComponent.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
 
-	import { onMount } from "svelte"
-
-    import {type BrowserElement, ControlsComponent, log, Surface} from "@visuallyjs/browser-ui"
-	import {internal_getSurfaceContext} from "./surface-store";
-    import {type ControlsComponentProps} from "./definitions";
-    import {internal_getDiagramContext} from "./diagram-store";
+	import {type BrowserElement, ControlsComponent, Surface} from "@visuallyjs/browser-ui"
+	import {type ControlsComponentProps} from "./definitions";
+    import {useSurface} from "./use-surface.svelte";
+    import {useDiagram} from "./use-diagram.svelte";
 
 	let container:BrowserElement
-	let surface:Surface
+
 	let initialised = false
+	const surface = useSurface()
+    const diagram = useDiagram()
+	const surfaceRef = $derived(surface.current || diagram.current?.$ui as Surface)
 
 	let {
         clear,
@@ -21,26 +22,6 @@
 		className = ""
     }:ControlsComponentProps = $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: ControlsComponent did not find a Surface or Diagram context. Cannot mount.`)
-        }
-	}
-
 	const options = {
 		clear:clear !== false,
 		undoRedo:undoRedo !== false,
@@ -50,16 +31,13 @@
 		orientation
 	}
 
-	function _maybeInit() {
-		if (!initialised && surface != null && container != null) {
+    $effect(() => {
+		if (!initialised && container != null && surfaceRef != null) {
 			initialised = true
-			new ControlsComponent(container, surface, options)
+			new ControlsComponent(container, surfaceRef, options)
 		}
-	}
-
-	onMount(async () => {
-		_maybeInit()
 	})
+
 </script>
 <div bind:this={container} class={className}>
 

package/DecoratorComponent.svelte

@@ -3,53 +3,45 @@
     import {log, Surface} from "@visuallyjs/browser-ui";
     import {internal_getSurfaceContext} from "./surface-store";
     import {type DecoratorComponentProps} from "./definitions";
+    import {useSurface} from "./use-surface.svelte";
+    import {useDiagram} from "./use-diagram.svelte";
 
     let container: HTMLElement;
-    let surface: Surface | undefined;
     let initialised = false
+    const surface = useSurface()
+    const diagram = useDiagram()
+    const surfaceRef = $derived(surface.current || diagram.current?.$ui as Surface)
 
     let {
         placement = 'floating',
 		position = { x: 0, y: 0 },
-		constraints
+		constraints,
+		children
 	}:DecoratorComponentProps = $props()
 
-    const sc = internal_getSurfaceContext(true)
-    if (sc != null) {
-        sc.listen(s => {
-            surface = s
-            _maybeInit()
-        })
-    }else {
-        log(`WARN: DecoratorComponent did not find a Surface context. Cannot mount.`)
-    }
 
-    function _maybeInit() {
-        if (!initialised && surface != null && container != null) {
+    $effect(() => {
+        if (!initialised && surfaceRef != null && container != null) {
             initialised = true
             if (container.firstElementChild) {
                 const element = container.firstElementChild as HTMLElement;
 
                 if (placement === 'fixed') {
-                    surface.fixElement(element, position, constraints);
+                    surfaceRef.fixElement(element, position, constraints);
                 } else {
-                    surface.floatElement(element, position);
+                    surfaceRef.floatElement(element, position);
                 }
             }
         }
-    }
-
-    onMount(async () => {
-        _maybeInit()
-    })
+	})
 
     onDestroy(() => {
-        if (surface && placement === 'fixed' && container && container.firstElementChild) {
-            surface.unfixElement(container.firstElementChild as HTMLElement);
+        if (surfaceRef && placement === 'fixed' && container && container.firstElementChild) {
+            surfaceRef.unfixElement(container.firstElementChild as HTMLElement);
         }
     });
 </script>
 
 <div bind:this={container} style="display: inline-block;">
-	<slot></slot>
+	{@render children?.()}
 </div>

package/DiagramComponent.svelte

@@ -10,7 +10,7 @@
 
 	let container:BrowserElement;
 
-    let {options, className = "", data, url, modelOptions }:DiagramComponentProps = $props();
+    let {options, className = "", data, url, modelOptions, children }:DiagramComponentProps = $props();
 
     const diagramContext = internal_getDiagramContext(false)
 	const surfaceContext = internal_getSurfaceContext(false)
@@ -42,5 +42,5 @@
 </script>
 
 <div class={className} bind:this={container}>
-	<slot />
+	{@render children?.()}
 </div>

package/DiagramPaletteComponent.svelte

@@ -4,44 +4,37 @@
     import {Diagram, DiagramPalette, log} from "@visuallyjs/browser-ui";
     import {internal_getDiagramContext} from "./diagram-store";
     import {onMount} from "svelte";
+    import {useDiagram} from "./use-diagram.svelte";
 
-    let diagram:Diagram
+    let initialised = false
+    const diagram = useDiagram()
     let container:HTMLElement
     const props:DiagramPaletteProps = $props()
+	const diagramRef = $derived(diagram.current)
 
-	onMount(async() => {
-        const dc = internal_getDiagramContext(true)
-        if (dc != null) {
-            dc.listen((d) => {
-                diagram = d
-                _init()
+	$effect(() => {
+        if (!initialised && container != null && diagramRef != null) {
+            initialised = true
+            new DiagramPalette(container, diagramRef, {
+                fill:props.fill,
+                outline:props.outline,
+                dragSize:props.dragSize,
+                inspector:props.inspector,
+                iconSize:props.iconSize,
+                showLabels:props.showLabels,
+                paletteStrokeWidth:props.paletteStrokeWidth,
+                showAllMessage:props.showAllMessage,
+                onCellAdded:props.onCellAdded,
+                mode:props.mode,
+                allowClickToAdd:props.allowClickToAdd,
+                autoExitDrawMode:props.autoExitDrawMode,
+                selectAfterAdd:props.selectAfterAdd,
+                onVertexAdded:props.onVertexAdded,
+                preparedShapes:props.preparedShapes
             })
-        } else {
-            log(`WARN: DiagramPaletteComponent could not find a Diagram context. Cannot mount.`)
-        }
+		}
 	})
 
-
-	function _init() {
-        new DiagramPalette(container, diagram, {
-            fill:props.fill,
-            outline:props.outline,
-            dragSize:props.dragSize,
-            inspector:props.inspector,
-            iconSize:props.iconSize,
-            showLabels:props.showLabels,
-            paletteStrokeWidth:props.paletteStrokeWidth,
-            showAllMessage:props.showAllMessage,
-            onCellAdded:props.onCellAdded,
-            mode:props.mode,
-            allowClickToAdd:props.allowClickToAdd,
-            autoExitDrawMode:props.autoExitDrawMode,
-            selectAfterAdd:props.selectAfterAdd,
-			onVertexAdded:props.onVertexAdded,
-			preparedShapes:props.preparedShapes
-        })
-	}
-
 </script>
 
 <div class={props.className} bind:this={container}></div>

package/DiagramProvider.svelte

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

package/ExportControlsComponent.svelte

@@ -1,18 +1,19 @@
 <script lang="ts">
 
-    import { internal_getSurfaceContext} from "./surface-store"
     import {
         CLASS_CONTROLS,
         CLASS_EXPORT_CONTROLS,
         SvgExportUI,
         ImageExportUI,
-        log, Surface
+        Surface
     } from "@visuallyjs/browser-ui"
     import {type ExportControlsComponentProps} from "./definitions";
-    import {internal_getDiagramContext} from "./diagram-store";
+    import {useSurface} from "./use-surface.svelte";
+    import {useDiagram} from "./use-diagram.svelte";
 
-    let surface:Surface
-    let initialized = false
+    const surface = useSurface()
+    const diagram = useDiagram()
+    const surfaceRef = $derived(surface.current || diagram.current?.$ui as Surface)
 
     let {
         className = "",
@@ -28,48 +29,29 @@
 
     className = `${className} ${CLASS_CONTROLS} ${CLASS_EXPORT_CONTROLS}`
 
-    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: ExportControlsComponent did not find a Surface or Diagram context. Cannot mount.`)
-        }
-    }
-
-    function _maybeInit() {
-        if (!initialized && surface != null) {
-			initialized = true
-        }
-    }
-
 	function exportSVG() {
 		svgOptions = svgOptions || {}
-        new SvgExportUI(surface).export(svgOptions)
+		if (surfaceRef != null) {
+            new SvgExportUI(surfaceRef).export(svgOptions)
+        }
 	}
 
 	function exportPNG() {
 		// show an image export ui, which will default to PNG.  `dimensions` is optional - if not supplied the resulting PNG
 		// will have the same size as the content.
 		imageOptions = imageOptions || {}
-		new ImageExportUI(surface).export(imageOptions)
+        if (surfaceRef != null) {
+            new ImageExportUI(surfaceRef).export(imageOptions)
+        }
 	}
 
 	function exportJPG() {
 		// show an image export ui targetting a JPG output. Here we show an alternative to providing a list of dimensions - we just mandate the
 		// width we want for the output. Again, this is optional. You don't need to provide this or `dimensions`. See note above.
 		imageOptions = imageOptions || {}
-		new ImageExportUI(surface).export(Object.assign(imageOptions || {}, {type:"image/jpeg"}))
+        if (surfaceRef != null) {
+            new ImageExportUI(surfaceRef).export(Object.assign(imageOptions || {}, {type: "image/jpeg"}))
+        }
 	}
 
 </script>

package/GaugeChartComponent.svelte

@@ -3,11 +3,11 @@
 	import { onMount  } from "svelte";
 
     import {GaugeChart, type BrowserElement} from "@visuallyjs/browser-ui"
-    import {type GaugeChartComponentProps} from "./definitions";
+    import {type GaugeChartComponentProps} from "./charts/definitions";
 
     let container:BrowserElement;
 
-    let {options, className = "", data, url }:GaugeChartComponentProps = $props();
+    let {options, className = "" }:GaugeChartComponentProps = $props();
 
 	let chart:GaugeChart;
 
@@ -19,11 +19,6 @@
 
 		chart = new GaugeChart(container, options)
 
-		if (url != null) {
-			chart.load({url});
-		} else if (data != null) {
-			chart.load({data});
-		}
 	})
 
 </script>

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>