@visuallyjs/browser-ui-svelte 1.2.6 → 1.2.8

package/PieChartComponent.svelte

@@ -1,51 +1,71 @@
 <script lang="ts">
+    import { PieChart, type BrowserElement, type PieChartOptions } from "@visuallyjs/browser-ui";
+    import type { PieChartComponentProps } from "./charts/definitions";
+    import { useVisuallyJsModel } from "./surface-store";
 
-	import { onMount  } from "svelte";
+    const { options, className = "", data, url, dataSourceFilter }: PieChartComponentProps = $props();
 
-    import {PieChart, type BrowserElement, type PieChartOptions} from "@visuallyjs/browser-ui"
-    import {type PieChartComponentProps} from "./charts/definitions";
-    import {useVisuallyJsModel} from "./surface-store";
+    let container: BrowserElement;
+    let chart: PieChart | undefined = $state();
 
-    let container:BrowserElement;
-
-    let {options, className = "", data, url, dataSourceFilter }:PieChartComponentProps = $props();
-
-	let chart:PieChart;
-
-	export function getChart() {
-	    return chart;
+    export function getChart() {
+        return chart;
     }
 
+    // A single, unified effect to manage the chart's entire lifecycle.
+    // This effect re-runs when props that require recreation, like `options`, change.
     $effect(() => {
-        if (chart && dataSourceFilter != null) {
-            chart.setDataSourceFilter(dataSourceFilter)
-        }
-    })
+        if (!container) return;
 
-	function init(opts:PieChartOptions) {
-        chart = new PieChart(container, opts)
+        let chartInstance: PieChart;
+        const chartOpts: PieChartOptions = { ...options, dataSourceFilter };
+        let isDestroyed = false;
 
-        if (url != null) {
-            chart.load({url});
-        } else if (data != null) {
-            chart.load({data});
+        // Initialize the chart. This can be async if we need to fetch a model.
+        if (url == null && data == null) {
+            useVisuallyJsModel().then(m => {
+                if (!isDestroyed) { // Ensure component hasn't been destroyed in the meantime
+                    chartOpts.dataSource = m;
+                    chartInstance = new PieChart(container, chartOpts);
+                    chart = chartInstance;
+                }
+            });
+        } else {
+            // Synchronous initialization with `data` or `url` props.
+            chartInstance = new PieChart(container, chartOpts);
+            chart = chartInstance;
         }
-	}
 
-	onMount(async () => {
+        // This nested effect runs ONLY when the `data` prop changes.
+        // It loads the new data into the existing chart without recreating it.
+        $effect(() => {
+            if (chartInstance && data != null) {
+                chartInstance.load({ data });
+            }
+        });
 
-        const opts:PieChartOptions = Object.assign({dataSourceFilter}, options)
+        // This nested effect handles updates to the `url` prop.
+        $effect(() => {
+            if (chartInstance && url != null) {
+                chartInstance.load({ url });
+            }
+        });
 
-		if (url == null && data == null) {
-            useVisuallyJsModel().then(m => {
-                opts.dataSource = m
-				init(opts)
-			})
-		} else {
-            init(opts)
-		}
-
-	})
+        // This nested effect handles updates to the filter.
+        $effect(() => {
+            if (chartInstance && dataSourceFilter != null) {
+                chartInstance.setDataSourceFilter(dataSourceFilter);
+            }
+        });
+
+        // The cleanup function for the main effect. It runs when the component
+        // is unmounted or when `options` change, ensuring the old chart is destroyed.
+        return () => {
+            isDestroyed = true;
+            chartInstance?.destroy();
+            chart = undefined;
+        };
+    });
 
 </script>
 

package/SankeyChartComponent.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
 
-	import { onMount  } from "svelte";
-
     import {
         SankeyChart,
         type BrowserElement,
@@ -16,49 +14,79 @@
 
 	let chart:SankeyChart|null = $state(null);
 
-    $effect(() => {
-        if (pivot != null && chart != null) {
-            chart.pivot(pivot as string)
-		}
-    })
-
 	export function getChart() {
 	    return chart;
     }
 
-    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})
-        }
-    }
+    $effect(() => {
+        if (!container) return;
 
+        let chartInstance: SankeyChart;
+        const _options: SankeyOptions = { ...options };
 
-	onMount(async () => {
-        const _options:SankeyOptions = Object.assign({}, options)
         if (interactive != null) {
-            _options.interactive = interactive
+            _options.interactive = interactive;
         }
         if (pivot != null) {
-            _options.pivot = pivot
+            _options.pivot = pivot;
         }
 
+        let isDestroyed = false;
+
+        const setupChart = () => {
+            chartInstance = new SankeyChart(container, _options);
+            chart = chartInstance;
+
+            if (url != null) {
+                chartInstance.load({url});
+            } else if (csvData != null) {
+                chartInstance.load({csvData});
+            } else if (jsonData != null) {
+                chartInstance.load({jsonData})
+            }
+        };
+
         if (url == null && csvData == null && jsonData == null) {
             useVisuallyJsModel().then(m => {
-                _options.dataSource = m
-                init(_options)
-            })
+                if (!isDestroyed) {
+                    _options.dataSource = m;
+                    setupChart();
+                }
+            });
         } else {
-            init(_options)
+            setupChart();
         }
 
-	})
+        $effect(() => {
+            if (chartInstance && pivot != null) {
+                chartInstance.pivot(pivot as string);
+            }
+        });
+
+        $effect(() => {
+            if (chartInstance && url != null) {
+                chartInstance.load({ url });
+            }
+        });
+
+        $effect(() => {
+            if (chartInstance && csvData != null) {
+                chartInstance.load({ csvData });
+            }
+        });
+
+        $effect(() => {
+            if (chartInstance && jsonData != null) {
+                chartInstance.load({ jsonData });
+            }
+        });
+
+        return () => {
+            isDestroyed = true;
+            chartInstance?.destroy();
+            chart = null;
+        };
+    });
 
 </script>
 

package/ScatterChartComponent.svelte

@@ -1,49 +1,71 @@
 <script lang="ts">
+    import { ScatterChart, type BrowserElement, type ScatterChartOptions } from "@visuallyjs/browser-ui";
+    import type { ScatterChartComponentProps } from "./charts/definitions";
+    import { useVisuallyJsModel } from "./surface-store";
 
-	import { onMount  } from "svelte";
+    const { options, className = "", data, url, dataSourceFilter }: ScatterChartComponentProps = $props();
 
-    import {type BrowserElement, type ScatterChartOptions, ScatterChart} from "@visuallyjs/browser-ui"
-    import {type ScatterChartComponentProps} from "./charts/definitions";
-    import {useVisuallyJsModel} from "./surface-store";
+    let container: BrowserElement;
+    let chart: ScatterChart | undefined = $state();
 
-    let container:BrowserElement;
-
-	// ScatterChartOptions
-	let {options, className = "", data, url, dataSourceFilter }:ScatterChartComponentProps = $props();
-
-	let chart:ScatterChart;
-
-	export function getChart() {
-	    return chart;
+    export function getChart() {
+        return chart;
     }
 
+    // A single, unified effect to manage the chart's entire lifecycle.
+    // This effect re-runs when props that require recreation, like `options`, change.
     $effect(() => {
-        if (chart && dataSourceFilter != null) {
-            chart.setDataSourceFilter(dataSourceFilter)
-        }
-    })
-
-    function init(opts:ScatterChartOptions) {
-        chart = new ScatterChart(container, opts)
-        if (url != null) {
-            chart.load({url});
-        } else if (data != null) {
-            chart.load({data});
-        }
-    }
+        if (!container) return;
+
+        let chartInstance: ScatterChart;
+        const chartOpts: ScatterChartOptions = { ...options, dataSourceFilter };
+        let isDestroyed = false;
 
-    onMount(async () => {
-        const opts:ScatterChartOptions = Object.assign({dataSourceFilter}, options)
+        // Initialize the chart. This can be async if we need to fetch a model.
         if (url == null && data == null) {
             useVisuallyJsModel().then(m => {
-                opts.dataSource = m
-                init(opts)
-            })
+                if (!isDestroyed) { // Ensure component hasn't been destroyed in the meantime
+                    chartOpts.dataSource = m;
+                    chartInstance = new ScatterChart(container, chartOpts);
+                    chart = chartInstance;
+                }
+            });
         } else {
-            init(opts)
+            // Synchronous initialization with `data` or `url` props.
+            chartInstance = new ScatterChart(container, chartOpts);
+            chart = chartInstance;
         }
-    })
 
+        // This nested effect runs ONLY when the `data` prop changes.
+        // It loads the new data into the existing chart without recreating it.
+        $effect(() => {
+            if (chartInstance && data != null) {
+                chartInstance.load({ data });
+            }
+        });
+
+        // This nested effect handles updates to the `url` prop.
+        $effect(() => {
+            if (chartInstance && url != null) {
+                chartInstance.load({ url });
+            }
+        });
+
+        // This nested effect handles updates to the filter.
+        $effect(() => {
+            if (chartInstance && dataSourceFilter != null) {
+                chartInstance.setDataSourceFilter(dataSourceFilter);
+            }
+        });
+
+        // The cleanup function for the main effect. It runs when the component
+        // is unmounted or when `options` change, ensuring the old chart is destroyed.
+        return () => {
+            isDestroyed = true;
+            chartInstance?.destroy();
+            chart = undefined;
+        };
+    });
 
 </script>
 

package/ShapePropertiesInspector.svelte

@@ -0,0 +1,193 @@
+<script lang="ts">
+    import {
+        isNode,
+        isString,
+        EVENT_CHANGE,
+        type ShapePropertyValueDefinition,
+        type Vertex,
+        type Inspector,
+        log
+    } from "@visuallyjs/browser-ui";
+    import {onDestroy, onMount} from "svelte";
+    import type {ShapePropertiesInspectorProps} from "./definitions";
+    import {getInspectorContext} from "./inspector-store";
+    import ColorPickerComponent from "./ColorPickerComponent.svelte";
+
+    const MAX_RADIOS = 7;
+    const TRUE_FALSE = ["True", "False"]
+
+    let {
+        vertex,
+        maxRadios = MAX_RADIOS
+    }: ShapePropertiesInspectorProps = $props()
+
+    let inspector: Inspector | null = $state(null)
+    let shapeDef = $state(null)
+    let inspectorRevision = $state(0)
+    let inspectorChangeListener: (() => void) | null = null
+
+    function getBooleanLabel(prop: any, value: boolean) {
+        const labels = prop.booleanLabels || TRUE_FALSE
+        return labels[value ? 0 : 1]
+    }
+
+    function getShapePropertyValueLabel(v: string | ShapePropertyValueDefinition): string {
+        return isString(v) ? v : (v as ShapePropertyValueDefinition).label
+    }
+
+    function getShapePropertyValueValue(v: string | ShapePropertyValueDefinition): string {
+        return isString(v) ? v : (v as ShapePropertyValueDefinition).value
+    }
+
+    function getPropertyDisplayValue(prop: any): string {
+        // Reading this state makes the rendered value refresh on inspector changes.
+        inspectorRevision
+        let value: any = inspector?.getValue(prop.id)
+        if (value == null && vertex) {
+            value = prop.id.split(".").reduce((current: any, part: string) => current == null ? current : current[part], vertex.data)
+        }
+        if (value == null) {
+            value = prop.defaultValue
+        }
+        if (value == null) {
+            return ""
+        }
+        if (typeof value === "object") {
+            return JSON.stringify(value) || ""
+        }
+        return String(value)
+    }
+
+    function resolveShapeDef(insp: Inspector, v: Vertex) {
+        if (!insp || !v || !isNode(v)) return null
+        const {type, category} = v.data;
+        if (!type || !category) return null;
+
+        const shapeLibrary = insp.$ui.getShapeLibrary();
+        const shapeSet = shapeLibrary.getShapeSet(category);
+        if (!shapeSet) return null;
+        return shapeSet.shapes.find(s => s.type === type)
+    }
+
+    onMount(() => {
+        const ic = getInspectorContext(true)
+        if (ic == null) {
+            log(`WARN: ShapePropertiesInspector cannot find an inspector context; cannot mount.`)
+        } else {
+            ic.listen(i => {
+                if (inspector && inspectorChangeListener) {
+                    inspector.unbind(EVENT_CHANGE, inspectorChangeListener)
+                }
+                inspector = i
+                inspectorChangeListener = () => inspectorRevision++
+                inspector.bind(EVENT_CHANGE, inspectorChangeListener)
+            })
+        }
+    })
+
+    onDestroy(() => {
+        if (inspector && inspectorChangeListener) {
+            inspector.unbind(EVENT_CHANGE, inspectorChangeListener)
+        }
+    })
+
+    $effect(() => {
+        if (inspector && vertex) {
+            shapeDef = resolveShapeDef(inspector, vertex)
+        } else {
+            shapeDef = null
+        }
+    })
+
+</script>
+
+{#if shapeDef && shapeDef.properties}
+    {#each shapeDef.properties as prop (prop.id)}
+        {@const isBoolean = prop.type === 'boolean'}
+        {@const hasValues = prop.values && prop.values.length > 0}
+        {@const useRadio = hasValues && prop.editor !== 'select' && prop.values.length <= maxRadios}
+
+        <div class="vjs-inspector-field">
+            {#if prop.readOnly || !isBoolean || prop.editor === 'select' || prop.editor === 'radio'}
+                <label class="vjs-inspector-property-label">{prop.label || prop.id}</label>
+            {/if}
+
+            {#if prop.readOnly}
+                <output class="vjs-inspector-property-value">{getPropertyDisplayValue(prop)}</output>
+            {:else if prop.type === 'string'}
+                {#if hasValues}
+                    {#if useRadio}
+                        <div class="vjs-radio-group">
+                            {#each prop.values as v (getShapePropertyValueLabel(v))}
+                                <label>
+                                    <input type="radio" name={prop.id} vjs-att={prop.id} value={getShapePropertyValueValue(v)} /> {getShapePropertyValueLabel(v)}
+                                </label>
+                            {/each}
+                        </div>
+                    {:else}
+                        <select vjs-att={prop.id}>
+                            {#each prop.values as v (getShapePropertyValueLabel(v))}
+                                <option value={getShapePropertyValueValue(v)}>{getShapePropertyValueLabel(v)}</option>
+                            {/each}
+                        </select>
+                    {/if}
+                {:else}
+                    <input type="text" vjs-att={prop.id} placeholder={prop.description} />
+                {/if}
+            {:else if prop.type === 'text'}
+                <textarea rows="5" vjs-att={prop.id} placeholder={prop.description}></textarea>
+            {:else if prop.type === 'color'}
+                <ColorPickerComponent propertyName={prop.id} />
+            {:else}
+                {#if prop.type === 'number'}
+                    {#if hasValues}
+                        {#if useRadio}
+                            <div class="vjs-radio-group">
+                                {#each prop.values as v (getShapePropertyValueLabel(v))}
+                                    <label>
+                                        <input type="radio" name={prop.id} vjs-att={prop.id} value={getShapePropertyValueValue(v)} /> {getShapePropertyValueLabel(v)}
+                                    </label>
+                                {/each}
+                            </div>
+                        {:else}
+                            <select vjs-att={prop.id}>
+                                {#each prop.values as v (getShapePropertyValueLabel(v))}
+                                    <option value={getShapePropertyValueValue(v)}>{getShapePropertyValueLabel(v)}</option>
+                                {/each}
+                            </select>
+                        {/if}
+                    {:else}
+                        <input type="number" vjs-att={prop.id} placeholder={prop.description} min={prop.min} max={prop.max} />
+                    {/if}
+                {:else}
+                    {#if isBoolean}
+                        {#if prop.editor === 'select'}
+                            <select vjs-att={prop.id} vjs-datatype="boolean">
+                                <option value=""></option>
+                                <option value="true">{getBooleanLabel(prop, true)}</option>
+                                <option value="false">{getBooleanLabel(prop, false)}</option>
+                            </select>
+                        {:else}
+                            {#if prop.editor === 'radio'}
+                                <div class="vjs-radio-group">
+                                    <label><input type="radio" name={prop.id} vjs-att={prop.id} vjs-datatype="boolean" value="true" /><span>{getBooleanLabel(prop, true)}</span></label>
+                                    <label><input type="radio" name={prop.id} vjs-att={prop.id} vjs-datatype="boolean" value="false" /><span>{getBooleanLabel(prop, false)}</span></label>
+                                </div>
+                            {:else}
+                                <label>
+                                    <input type="checkbox" vjs-datatype="boolean" vjs-att={prop.id} /> {prop.label || prop.id}
+                                </label>
+                            {/if}
+                        {/if}
+                    {:else}
+                        <input type="text" vjs-att={prop.id} placeholder={prop.description} />
+                    {/if}
+                {/if}
+            {/if}
+
+            {#if prop.description}
+                <div class="vjs-field-desc">{prop.description}</div>
+            {/if}
+        </div>
+    {/each}
+{/if}

package/XYChartComponent.svelte

@@ -1,52 +1,71 @@
 <script lang="ts">
+    import { CategoryValueChart, type BrowserElement, type CategoryValueChartOptions } from "@visuallyjs/browser-ui";
+    import type { XYChartComponentProps } from "./charts/definitions";
+    import { useVisuallyJsModel } from "./surface-store";
 
-	import { onMount  } from "svelte";
+    const { options, className = "", data, url, dataSourceFilter }: XYChartComponentProps = $props();
 
-    import {
-        CategoryValueChart,
-        type CategoryValueChartOptions
-    } from "@visuallyjs/browser-ui"
-    import {type XYChartComponentProps} from "./charts/definitions";
-    import {useVisuallyJsModel} from "./surface-store";
+    let container: BrowserElement;
+    let chart: CategoryValueChart | undefined = $state();
 
-    let container:HTMLElement;
-
-	// XYChartOptions
-	let {options, className = "", data, url, dataSourceFilter }:XYChartComponentProps = $props()
-
-	let chart:CategoryValueChart
-
-	export function getChart() {
-	    return chart;
-    }
-
-    function init(opts:CategoryValueChartOptions) {
-        chart = new CategoryValueChart(container, opts)
-        if (url != null) {
-            chart.load({url});
-        } else if (data != null) {
-            chart.load({data});
-        }
+    export function getChart() {
+        return chart;
     }
 
+    // A single, unified effect to manage the chart's entire lifecycle.
+    // This effect re-runs when props that require recreation, like `options`, change.
     $effect(() => {
-        if (chart && dataSourceFilter != null) {
-            chart.setDataSourceFilter(dataSourceFilter)
-        }
-    })
+        if (!container) return;
+
+        let chartInstance: CategoryValueChart;
+        const chartOpts: CategoryValueChartOptions = { ...options, dataSourceFilter };
+        let isDestroyed = false;
 
-    onMount(async () => {
-        const opts:CategoryValueChartOptions = Object.assign({}, options)
+        // Initialize the chart. This can be async if we need to fetch a model.
         if (url == null && data == null) {
             useVisuallyJsModel().then(m => {
-                opts.dataSource = m
-                init(opts)
-            })
+                if (!isDestroyed) { // Ensure component hasn't been destroyed in the meantime
+                    chartOpts.dataSource = m;
+                    chartInstance = new CategoryValueChart(container, chartOpts);
+                    chart = chartInstance;
+                }
+            });
         } else {
-            init(opts)
+            // Synchronous initialization with `data` or `url` props.
+            chartInstance = new CategoryValueChart(container, chartOpts);
+            chart = chartInstance;
         }
-    })
 
+        // This nested effect runs ONLY when the `data` prop changes.
+        // It loads the new data into the existing chart without recreating it.
+        $effect(() => {
+            if (chartInstance && data != null) {
+                chartInstance.load({ data });
+            }
+        });
+
+        // This nested effect handles updates to the `url` prop.
+        $effect(() => {
+            if (chartInstance && url != null) {
+                chartInstance.load({ url });
+            }
+        });
+
+        // This nested effect handles updates to the filter.
+        $effect(() => {
+            if (chartInstance && dataSourceFilter != null) {
+                chartInstance.setDataSourceFilter(dataSourceFilter);
+            }
+        });
+
+        // The cleanup function for the main effect. It runs when the component
+        // is unmounted or when `options` change, ensuring the old chart is destroyed.
+        return () => {
+            isDestroyed = true;
+            chartInstance?.destroy();
+            chart = undefined;
+        };
+    });
 
 </script>
 

package/components.d.ts

@@ -14,6 +14,8 @@ export { default as ShapePaletteComponent } from "./ShapePaletteComponent.svelte
 export { default as DiagramPaletteComponent } from "./DiagramPaletteComponent.svelte";
 export { default as ShapeComponent } from "./ShapeComponent.svelte";
 export { default as EdgeTypePickerComponent } from "./EdgeTypePickerComponent.svelte";
+export { default as EdgePropertyMappingsInspector } from "./EdgePropertyMappingsInspector.svelte";
+export { default as ShapePropertiesInspector } from "./ShapePropertiesInspector.svelte";
 export { default as ColorPickerComponent } from "./ColorPickerComponent.svelte";
 export { default as SurfacePopup } from "./SurfacePopup.svelte";
 export { default as ColumnChartComponent } from "./ColumnChartComponent.svelte";

package/components.js

@@ -14,6 +14,8 @@ export { default as ShapePaletteComponent } from "./ShapePaletteComponent.svelte
 export { default as DiagramPaletteComponent } from "./DiagramPaletteComponent.svelte";
 export { default as ShapeComponent } from "./ShapeComponent.svelte";
 export { default as EdgeTypePickerComponent } from "./EdgeTypePickerComponent.svelte";
+export { default as EdgePropertyMappingsInspector } from "./EdgePropertyMappingsInspector.svelte";
+export { default as ShapePropertiesInspector } from "./ShapePropertiesInspector.svelte";
 export { default as ColorPickerComponent } from "./ColorPickerComponent.svelte";
 export { default as SurfacePopup } from "./SurfacePopup.svelte";
 export { default as ColumnChartComponent } from "./ColumnChartComponent.svelte";