@visuallyjs/browser-ui-svelte 1.0.0

package/InspectorComponent.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+    import {Base, Inspector, log, Surface} from "@visuallyjs/browser-ui"
+    import {internal_getSurfaceContext} from "./surface-store"
+    import {onMount} from "svelte"
+    import {type InspectorComponentProps} from "./definitions";
+    import {getInspectorContext} from "./inspector-store";
+    import {internal_getDiagramContext} from "./diagram-store";
+
+    let container:HTMLElement
+    let inspector:Inspector
+    let surface:Surface
+    let initialized = false
+
+    let currentType = ''
+
+    let {
+        className = "",
+        autoCommit = true,
+        multipleSelections = false,
+        filter,
+		refresh,
+		renderEmptyContainer,
+		style = ""
+    }:InspectorComponentProps = $props()
+
+
+	const _refresh = (obj:Base, cb:Function) => {
+		currentType = obj.objectType
+		refresh && refresh(obj)
+		setTimeout(cb)
+	}
+
+    const _renderEmptyContainer = renderEmptyContainer || (() => currentType = '')
+
+
+    function _maybeInit() {
+        if (!initialized && surface != null && container != null) {
+            initialized = true
+			inspector = new Inspector({
+				container,
+				ui:surface,
+                renderEmptyContainer:_renderEmptyContainer,
+				refresh:_refresh,
+				autoCommit,
+				multipleSelections,
+				filter
+			})
+
+			// 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/>
+</div>

package/LineChartComponent.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+
+	import { onMount  } from "svelte";
+
+    import {LineChart, type BrowserElement} from "@visuallyjs/browser-ui"
+    import {type LineChartComponentProps} from "./definitions";
+
+    let container:BrowserElement;
+
+	// BarChartOptions
+    let {options, className = "", data, url, dataSourceFilter }:LineChartComponentProps = $props();
+
+	let chart:LineChart;
+
+	export function getChart() {
+	    return chart;
+    }
+
+    $effect(() => {
+        if (chart) {
+            chart.setDataSourceFilter(dataSourceFilter)
+        }
+    })
+
+	onMount(async () => {
+
+		chart = new LineChart(container, Object.assign({dataSourceFilter}, options))
+
+		if (url != null) {
+			chart.load({url});
+		} else if (data != null) {
+			chart.load({data});
+		}
+	})
+
+</script>
+
+<div class={className} bind:this={container}></div>

package/MiniviewComponent.svelte

@@ -0,0 +1,73 @@
+<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";
+
+    let container:HTMLElement
+    let surface:Surface
+    let initialised = false
+
+	let {
+        collapsible,
+        typeFunction,
+        wheelSensitivity,
+        elementFilter,
+        enableWheelZoom,
+		visible,
+        wheelReverse,
+        activeTracking,
+        clickToCenter,
+		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:{
+                    collapsible,
+					visible,
+					container,
+					typeFunction,
+					elementFilter,
+					wheelSensitivity,
+					wheelReverse,
+					enableWheelZoom,
+					activeTracking,
+					clickToCenter
+				}
+			})
+        }
+    }
+
+    onMount(async () => {
+        _maybeInit()
+    })
+</script>
+<div bind:this={container} class={className}>
+
+</div>

package/PaletteComponent.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+
+	import { onMount } from "svelte"
+
+	import {internal_getSurfaceContext} from "./surface-store";
+    import {log, Palette, Surface} from "@visuallyjs/browser-ui"
+    import {type PaletteComponentProps} from "./definitions";
+
+	let container:HTMLElement
+	let surface:Surface
+	let initialised = false
+
+    let {
+        selector = "[data-vjs-type]",
+		dataGenerator = undefined,
+		className = "",
+		onVertexAdded = undefined,
+		dragSize = undefined,
+		canvasDropFilter = undefined,
+		children,
+		mode,
+		selectAfterAdd = false,
+		allowClickToAdd = false,
+		clickToAddOnly = false,
+		allowDropOnEdge = false,
+		allowDropOnGroup = true,
+		allowDropOnCanvas = true,
+		allowDropOnNode = false,
+		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
+			})
+		}
+	}
+
+	onMount(async () => {
+		_maybeInit()
+	})
+
+</script>
+<div bind:this={container} class={className}>
+	{@render children?.()}
+</div>

package/PieChartComponent.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+
+	import { onMount  } from "svelte";
+
+    import {PieChart, type BrowserElement} from "@visuallyjs/browser-ui"
+    import {type PieChartComponentProps} from "./definitions";
+
+    let container:BrowserElement;
+
+    let {options, className = "", data, url, dataSourceFilter }:PieChartComponentProps = $props();
+
+	let chart:PieChart;
+
+	export function getChart() {
+	    return chart;
+    }
+
+    $effect(() => {
+        if (chart) {
+            chart.setDataSourceFilter(dataSourceFilter)
+        }
+    })
+
+	onMount(async () => {
+
+		chart = new PieChart(container, Object.assign({dataSourceFilter}, options))
+
+		if (url != null) {
+			chart.load({url});
+		} else if (data != null) {
+			chart.load({data});
+		}
+	})
+
+</script>
+
+<div class={className} bind:this={container}></div>

package/SankeyChartComponent.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+
+	import { onMount  } from "svelte";
+
+    import {SankeyChart, type BrowserElement} from "@visuallyjs/browser-ui"
+    import {type SankeyChartComponentProps} from "./definitions";
+
+    let container:BrowserElement;
+
+    let {options, className = "", jsonData, csvData, url, interactive, pivot }:SankeyChartComponentProps = $props();
+
+	let chart:SankeyChart;
+
+    $effect(() => {
+        chart && chart.pivot(pivot)
+    })
+
+	export function getChart() {
+	    return chart;
+    }
+
+	onMount(async () => {
+
+		const _options = 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})
+		}
+	})
+
+</script>
+
+<div class={className} bind:this={container}></div>

package/ScatterChartComponent.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+
+	import { onMount  } from "svelte";
+
+    import {type BrowserElement, ScatterChart} from "@visuallyjs/browser-ui"
+    import {type ScatterChartComponentProps} from "./definitions";
+
+    let container:BrowserElement;
+
+	// ScatterChartOptions
+	let {options, className = "", data, url, dataSourceFilter }:ScatterChartComponentProps = $props();
+
+	let chart:ScatterChart;
+
+	export function getChart() {
+	    return chart;
+    }
+
+    $effect(() => {
+        if (chart) {
+            chart.setDataSourceFilter(dataSourceFilter)
+        }
+    })
+
+	onMount(async () => {
+
+		chart = new ScatterChart(container, Object.assign({dataSourceFilter}, options))
+
+		if (url != null) {
+			chart.load({url});
+		} else if (data != null) {
+			chart.load({data});
+		}
+	})
+
+</script>
+
+<div class={className} bind:this={container}></div>

package/ShapeComponent.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+
+    import {DEFAULT_LABEL_PROPERTY, log, Surface} from "@visuallyjs/browser-ui"
+
+    import { onMount } from "svelte"
+    import {internal_getSurfaceContext} from "./surface-store";
+    import {type ShapeComponentProps} from "./definitions";
+
+	let {
+        data,
+        showLabels = false,
+        labelProperty = DEFAULT_LABEL_PROPERTY,
+        labelStrokeWidth = "0.25px",
+		font
+    }:ShapeComponentProps = $props()
+
+    let group:SVGGElement
+	let surface:Surface
+
+	let label = $derived(data[labelProperty])
+	let outlineWidth = $derived(data.outlineWidth || 2)
+	let fill = $derived(data.fill || "#FFFFFF")
+	let outline = $derived(data.outline || "#000000")
+
+	let fontSize = $derived(data.fontSize || font?.size || 14)
+    let fontStyle = $derived(data.fontStyle || font?.style || "normal")
+
+    function _render() {
+        const shapeLibrary = surface.getShapeLibrary()
+        if (shapeLibrary != null && group != null) {
+			const el = shapeLibrary.renderCompiledShape(data, outlineWidth)
+			group.replaceChildren(el)
+		}
+	}
+
+
+	onMount(async () => {
+        const sc = internal_getSurfaceContext(true)
+		if (sc != null) {
+            sc.listen(s => {
+                surface = s
+                _render()
+            })
+		} else {
+            log(`WARN: ShapeComponent did not find a Surface context.`)
+		}
+    })
+
+
+
+</script>
+<svg class="vjs-shape" stroke-width={outlineWidth} fill={fill} stroke={outline}
+     style="width:100%;height:100%;inset:0;position:absolute;" preserveAspectRatio="none" viewBox="0 0 {data.width} {data.height}">
+	<g bind:this={group}></g>
+	{#if showLabels}
+		<text x="50%" y="50%"
+			  fill="currentColor"
+			  stroke="currentColor"
+			  text-anchor="middle"
+			  dominant-baseline="middle"
+			  class="vjs-shape-label"
+			  font-size={fontSize}
+			  font-style={fontStyle}
+			  stroke-width={labelStrokeWidth}>{label}</text>
+	{/if}
+</svg>

package/ShapePaletteComponent.svelte

@@ -0,0 +1,82 @@
+<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";
+
+    let {
+        className = "",
+		dragSize,
+		fill,
+		outline,
+		showAllMessage,
+		selectAfterDrop,
+		paletteStrokeWidth,
+		dataGenerator,
+		iconSize,
+		initialSet,
+		showLabels,
+		onVertexAdded,
+		mode,
+		allowClickToAdd,
+		autoExitDrawMode,
+		inspector = true,
+		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`)
+    }
+
+	function _maybeInit() {
+		if (!initialised && surface != null && container != null) {
+			initialised = true
+
+			const shapeLibrary = surface.getShapeLibrary()
+			if (shapeLibrary == null) {
+				log("WARN: no shape library set on surface; ShapePaletteComponent cannot render")
+			} else {
+
+                new ShapePalette(surface, {
+                    container,
+                    dataGenerator,
+					autoExitDrawMode,
+					allowClickToAdd,
+					mode,
+					onVertexAdded,
+					showLabels,
+					initialSet,
+					iconSize,
+					paletteStrokeWidth,
+					selectAfterDrop,
+					showAllMessage,
+					outline,
+					fill,
+					dragSize,
+					inspector,
+					preparedShapes
+
+                })
+
+			}
+
+		}
+	}
+
+	onMount(async () => {
+		_maybeInit()
+	})
+
+
+</script>
+<div class={className} bind:this={container}></div>