@visuallyjs/browser-ui-svelte 1.0.0

package/AreaChartComponent.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+
+	import { onMount  } from "svelte";
+
+    import {AreaChart, type BrowserElement} from "@visuallyjs/browser-ui"
+    import {type AreaChartComponentProps} from "./definitions";
+
+    let container:BrowserElement;
+
+    let {options, className = "", data, url, dataSourceFilter }:AreaChartComponentProps = $props();
+
+	let chart:AreaChart;
+
+	export function getChart() {
+	    return chart;
+    }
+
+    $effect(() => {
+        if (chart) {
+            chart.setDataSourceFilter(dataSourceFilter)
+        }
+    })
+
+	onMount(async () => {
+
+		chart = new AreaChart(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/BarChartComponent.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+
+	import { onMount  } from "svelte";
+
+    import {BarChart, type BrowserElement} from "@visuallyjs/browser-ui"
+    import {type BarChartComponentProps} from "./definitions";
+
+    let container:BrowserElement;
+
+    let {options, className = "", data, url, dataSourceFilter }:BarChartComponentProps = $props();
+
+	let chart:BarChart;
+
+	export function getChart() {
+	    return chart;
+    }
+
+    $effect(() => {
+        if (chart) {
+            chart.setDataSourceFilter(dataSourceFilter)
+        }
+    })
+
+	onMount(async () => {
+
+		chart = new BarChart(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/BubbleChartComponent.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+
+	import { onMount  } from "svelte";
+
+    import {type BrowserElement, BubbleChart} from "@visuallyjs/browser-ui"
+    import {type BubbleChartComponentProps} from "./definitions";
+
+    let container:BrowserElement;
+
+	// BubbleChartOptions
+	let {options, className = "", data, url, dataSourceFilter }:BubbleChartComponentProps = $props();
+
+	let chart:BubbleChart;
+
+	export function getChart() {
+	    return chart;
+    }
+
+    $effect(() => {
+        if (chart) {
+            chart.setDataSourceFilter(dataSourceFilter)
+        }
+    })
+
+	onMount(async () => {
+
+		chart = new BubbleChart(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/ColorPickerComponent.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+    import {onMount} from "svelte"
+    import {type ColorPickerComponentProps} from "./definitions";
+    import {
+        CLASS_COLOR_PICKER,
+        CLASS_COLOR_PICKER_SWATCH,
+        CLASS_COLOR_PICKER_SWATCHES,
+        EVENT_CONTEXT_UPDATE,
+        EVENT_CHANGE, INSPECTOR_CONTEXT_RECENT_COLORS, Inspector, log
+    } from "@visuallyjs/browser-ui"
+    import {getInspectorContext} from "./inspector-store";
+
+    let colorInput:HTMLInputElement
+
+	let inspector:Inspector
+
+	let props:ColorPickerComponentProps = $props()
+
+    const maxColors = props.maxColors || 10
+
+    const swatches = $state([] as Array<string>)
+	function setSwatches(s:Array<string>) {
+        swatches.length = 0
+		swatches.push(...s)
+	}
+
+    function addColor(v:string) {
+        const _s = inspector.ensureContext(INSPECTOR_CONTEXT_RECENT_COLORS, ():Array<string> => [])
+        v = v.toUpperCase()
+        const exists = _s.find(__s => __s.toUpperCase() === v) != null
+
+        if (!exists) {
+            const s = _s.slice()
+            s.unshift(v)
+            if (s.length > maxColors) {
+                s.length = maxColors
+            }
+            inspector.updateContext(INSPECTOR_CONTEXT_RECENT_COLORS, s)
+        }
+    }
+
+    const contextUpdateListener = (kv:{key:string, value:Array<string>}) => {
+        if (kv.key === INSPECTOR_CONTEXT_RECENT_COLORS) {
+            setSwatches(kv.value.slice())
+        }
+    }
+
+    function setCurrentColor() {
+        const v = inspector.getValue(props.propertyName)
+        if (v != null) {
+            colorInput.value = v
+            addColor(v)
+        }
+    }
+
+    function colorPicked() {
+        const v = colorInput.value
+        inspector.setValue(props.propertyName, v)
+        addColor(v)
+    }
+
+	onMount(async() => {
+
+        const ic = getInspectorContext(true)
+		if (ic == null) {
+            log(`WARN: color picker cannot find an inspector context; cannot mount.`)
+		} else {
+        	ic.listen(i => {
+                inspector = i
+                setSwatches(inspector.ensureContext(INSPECTOR_CONTEXT_RECENT_COLORS, ():Array<string> => []))
+                colorInput.addEventListener(EVENT_CHANGE, colorPicked)
+                inspector.bind(EVENT_CONTEXT_UPDATE, contextUpdateListener)
+                inspector.bind(EVENT_CHANGE, setCurrentColor)
+			})
+		}
+
+
+    })
+
+    function selectSwatch(c:string) {
+        inspector.setValue(props.propertyName, c)
+        colorInput.value = c
+    }
+
+
+</script>
+<div class={CLASS_COLOR_PICKER}>
+	<input type="color" bind:this={colorInput} vjs-att={props.propertyName}/>
+	<div class={CLASS_COLOR_PICKER_SWATCHES}>
+		{#each swatches as color}
+			<div title={color} class={CLASS_COLOR_PICKER_SWATCH} style="background-color:{color}" data-color={color} on:click={() => selectSwatch(color)}></div>
+		{/each}
+	</div>
+</div>

package/ColumnChartComponent.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+
+	import { onMount  } from "svelte";
+
+    import {type BrowserElement, ColumnChart} from "@visuallyjs/browser-ui"
+    import {type ColumnChartComponentProps} from "./definitions";
+
+    let container:BrowserElement;
+
+	// ColumnChartOptions
+	let {options, className = "", data, url, dataSourceFilter }:ColumnChartComponentProps = $props();
+
+	let chart:ColumnChart;
+
+	export function getChart() {
+	    return chart;
+    }
+
+    $effect(() => {
+        if (chart) {
+            chart.setDataSourceFilter(dataSourceFilter)
+        }
+    })
+
+	onMount(async () => {
+
+		chart = new ColumnChart(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/ControlsComponent.svelte

@@ -0,0 +1,66 @@
+<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";
+
+	let container:BrowserElement
+	let surface:Surface
+	let initialised = false
+
+	let {
+        clear,
+        undoRedo,
+        zoomToExtents,
+        clearMessage,
+        buttons,
+        orientation,
+		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,
+		zoomToExtents:zoomToExtents !== false,
+		clearMessage,
+		buttons:buttons || [],
+		orientation
+	}
+
+	function _maybeInit() {
+		if (!initialised && surface != null && container != null) {
+			initialised = true
+			new ControlsComponent(container, surface, options)
+		}
+	}
+
+	onMount(async () => {
+		_maybeInit()
+	})
+</script>
+<div bind:this={container} class={className}>
+
+</div>

package/DecoratorComponent.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    import { onMount, onDestroy } from 'svelte';
+    import {log, Surface} from "@visuallyjs/browser-ui";
+    import {internal_getSurfaceContext} from "./surface-store";
+    import {type DecoratorComponentProps} from "./definitions";
+
+    let container: HTMLElement;
+    let surface: Surface | undefined;
+    let initialised = false
+
+    let {
+        placement = 'floating',
+		position = { x: 0, y: 0 },
+		constraints
+	}: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) {
+            initialised = true
+            if (container.firstElementChild) {
+                const element = container.firstElementChild as HTMLElement;
+
+                if (placement === 'fixed') {
+                    surface.fixElement(element, position, constraints);
+                } else {
+                    surface.floatElement(element, position);
+                }
+            }
+        }
+    }
+
+    onMount(async () => {
+        _maybeInit()
+    })
+
+    onDestroy(() => {
+        if (surface && placement === 'fixed' && container && container.firstElementChild) {
+            surface.unfixElement(container.firstElementChild as HTMLElement);
+        }
+    });
+</script>
+
+<div bind:this={container} style="display: inline-block;">
+	<slot></slot>
+</div>

package/DefaultGroupComponent.svelte

@@ -0,0 +1,5 @@
+<script>
+	let {data, model, surface, vertex } = $props()
+</script>
+
+{data.label}

package/DefaultNodeComponent.svelte

@@ -0,0 +1,5 @@
+<script>
+    let {data, model, surface, vertex } = $props()
+</script>
+
+{data.label}

package/DiagramComponent.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+
+	import { onMount  } from "svelte";
+
+    import {type BrowserElement, createDiagram, Diagram, Surface} from "@visuallyjs/browser-ui"
+
+	import { internal_getSurfaceContext } from "./surface-store";
+    import {internal_getDiagramContext} from "./diagram-store";
+    import {type DiagramComponentProps} from "./definitions";
+
+	let container:BrowserElement;
+
+    let {options, className = "", data, url, modelOptions }:DiagramComponentProps = $props();
+
+    const diagramContext = internal_getDiagramContext(false)
+	const surfaceContext = internal_getSurfaceContext(false)
+	let diagram:Diagram
+
+	export function getDiagram() {
+	    return diagram;
+    }
+
+	onMount(async () => {
+
+		diagram = createDiagram(container, options, modelOptions)
+
+		if (surfaceContext != null && diagram.$ui instanceof Surface) {
+			surfaceContext.set(diagram.$ui);
+		}
+
+        if (diagramContext != null) {
+            diagramContext.set(diagram)
+		}
+
+		if (url != null) {
+			diagram.load({url});
+		} else if (data != null) {
+			diagram.load({data});
+		}
+	})
+
+</script>
+
+<div class={className} bind:this={container}>
+	<slot />
+</div>

package/DiagramPaletteComponent.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+
+	import {type DiagramPaletteProps} from "./definitions";
+    import {Diagram, DiagramPalette, log} from "@visuallyjs/browser-ui";
+    import {internal_getDiagramContext} from "./diagram-store";
+    import {onMount} from "svelte";
+
+    let diagram:Diagram
+    let container:HTMLElement
+    const props:DiagramPaletteProps = $props()
+
+	onMount(async() => {
+        const dc = internal_getDiagramContext(true)
+        if (dc != null) {
+            dc.listen((d) => {
+                diagram = d
+                _init()
+            })
+        } 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

@@ -0,0 +1,9 @@
+<script>
+
+    import { internal_getDiagramContext } from "./diagram-store"
+
+    internal_getDiagramContext(false)
+
+</script>
+
+<slot />

package/EdgeTypePickerComponent.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+    import {
+        type EdgePropertyMappings,
+        EdgeTypePicker,
+        Inspector, INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS,
+        log
+    } from "@visuallyjs/browser-ui"
+    import {onMount} from "svelte"
+    import {type EdgeTypePickerComponentProps} from "./definitions";
+    import {getInspectorContext} from "./inspector-store";
+
+    let container:HTMLElement
+    let inspector:Inspector
+    let edgeTypePicker:EdgeTypePicker
+
+	let { propertyName }:EdgeTypePickerComponentProps = $props()
+
+    const resolveMappings = ():EdgePropertyMappings => {
+        const mappings = inspector.getFromContext<EdgePropertyMappings>(INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS)
+        return mappings || inspector.$ui.$getEdgePropertyMappings()
+    }
+
+	onMount(async() => {
+
+        const ic = getInspectorContext(true)
+        if (ic == null) {
+            log(`WARN: color picker cannot find an inspector context; cannot mount.`)
+        } else {
+            ic.listen(i => {
+                inspector = i
+				const edgeMappings = resolveMappings()
+                edgeTypePicker = new EdgeTypePicker(inspector.$ui, container, edgeMappings, inspector.getValue(propertyName), (v) => {
+                    inspector.setValue(propertyName, v)
+                })
+
+                edgeTypePicker.render(propertyName, inspector._currentCommonData)
+
+                inspector.onChange(() => {
+                    edgeTypePicker.select(propertyName, inspector.getValue(propertyName))
+                })
+            })
+        }
+    })
+
+
+</script>
+<div bind:this={container}></div>

package/ExportControlsComponent.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+
+    import { internal_getSurfaceContext} from "./surface-store"
+    import {
+        CLASS_CONTROLS,
+        CLASS_EXPORT_CONTROLS,
+        SvgExportUI,
+        ImageExportUI,
+        log, Surface
+    } from "@visuallyjs/browser-ui"
+    import {type ExportControlsComponentProps} from "./definitions";
+    import {internal_getDiagramContext} from "./diagram-store";
+
+    let surface:Surface
+    let initialized = false
+
+    let {
+        className = "",
+		showLabel = true,
+		label = "Export:",
+		svgOptions = undefined,
+		imageOptions = undefined,
+		allowSvgExport = true,
+		allowPngExport = true,
+		allowJpgExport = true
+
+    }:ExportControlsComponentProps = $props()
+
+    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)
+	}
+
+	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)
+	}
+
+	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"}))
+	}
+
+</script>
+<div class={className}>
+
+    {#if showLabel}
+		<span>{label}</span>
+    {/if}
+
+    {#if allowSvgExport}
+		<i><a href="#" id="exportSvg" on:click={() => exportSVG()}>SVG</a></i>
+    {/if}
+
+    {#if allowPngExport}
+		<i><a href="#" id="exportPng" on:click={() => exportPNG()}>PNG</a></i>
+    {/if}
+
+    {#if allowJpgExport}
+		<i><a href="#" id="exportJpg" on:click={() => exportJPG()}>JPG</a></i>
+    {/if}
+
+</div>

package/GaugeChartComponent.svelte

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