@visuallyjs/browser-ui-svelte 1.2.5 → 1.2.7

package/AreaChartComponent.svelte

@@ -1,45 +1,71 @@
 <script lang="ts">
+    import { AreaChart, type BrowserElement, type AreaChartOptions } from "@visuallyjs/browser-ui";
+    import type { AreaChartComponentProps } from "./charts/definitions";
+    import { useVisuallyJsModel } from "./surface-store";
 
-	import { onMount  } from "svelte";
+    const { options, className = "", data, url, dataSourceFilter }: AreaChartComponentProps = $props();
 
-    import {AreaChart, type AreaChartOptions, type BrowserElement} from "@visuallyjs/browser-ui"
-    import {type AreaChartComponentProps} from "./charts/definitions";
-    import {useVisuallyJsModel} from "./surface-store";
+    let container: BrowserElement;
+    let chart: AreaChart | undefined = $state();
 
-    let container:BrowserElement;
-
-    let {options, className = "", data, url, dataSourceFilter }:AreaChartComponentProps = $props();
-
-	let chart:AreaChart;
+    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) {
-            if (dataSourceFilter != null) {
-                chart.setDataSourceFilter(dataSourceFilter)
-            }
-        }
-    })
-
-	function init(opts:AreaChartOptions) {
-        chart = new AreaChart(container, opts)
-        if (url != null) {
-            chart.load({url});
-        } else if (data != null) {
-            chart.load({data});
-        }
-	}
+        if (!container) return;
+
+        let chartInstance: AreaChart;
+        const chartOpts: AreaChartOptions = { ...options, dataSourceFilter };
+        let isDestroyed = false;
 
-	onMount(async () => {
-        const opts:AreaChartOptions = 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 AreaChart(container, chartOpts);
+                    chart = chartInstance;
+                }
+            });
         } else {
-            init(opts)
+            // Synchronous initialization with `data` or `url` props.
+            chartInstance = new AreaChart(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/BarChartComponent.svelte

@@ -1,48 +1,71 @@
 <script lang="ts">
+    import { BarChart, type BrowserElement, type BarChartOptions } from "@visuallyjs/browser-ui";
+    import type { BarChartComponentProps } from "./charts/definitions";
+    import { useVisuallyJsModel } from "./surface-store";
 
-	import { onMount  } from "svelte";
+    const { options, className = "", data, url, dataSourceFilter }: BarChartComponentProps = $props();
 
-    import {type BarChartOptions, BarChart, type BrowserElement} from "@visuallyjs/browser-ui"
-    import {type BarChartComponentProps} from "./charts/definitions";
-    import {useVisuallyJsModel} from "./surface-store";
+    let container: BrowserElement;
+    let chart: BarChart | undefined = $state();
 
-    let container:BrowserElement;
-
-    let {options, className = "", data, url, dataSourceFilter }:BarChartComponentProps = $props();
-
-	let chart:BarChart;
-
-	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;
 
-    })
+        let chartInstance: BarChart;
+        const chartOpts: BarChartOptions = { ...options, dataSourceFilter };
+        let isDestroyed = false;
 
-    function init(opts:BarChartOptions) {
-        chart = new BarChart(container, opts)
-        if (url != null) {
-            chart.load({url});
-        } else if (data != null) {
-            chart.load({data});
-        }
-    }
-
-    onMount(async () => {
-        const opts:BarChartOptions = 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 BarChart(container, chartOpts);
+                    chart = chartInstance;
+                }
+            });
         } else {
-            init(opts)
+            // Synchronous initialization with `data` or `url` props.
+            chartInstance = new BarChart(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/BubbleChartComponent.svelte

@@ -1,49 +1,71 @@
 <script lang="ts">
+    import { BubbleChart, type BrowserElement, type BubbleChartOptions } from "@visuallyjs/browser-ui";
+    import type { BubbleChartComponentProps } from "./charts/definitions";
+    import { useVisuallyJsModel } from "./surface-store";
 
-	import { onMount  } from "svelte";
+    const { options, className = "", data, url, dataSourceFilter }: BubbleChartComponentProps = $props();
 
-    import {type BubbleChartOptions, type BrowserElement, BubbleChart} from "@visuallyjs/browser-ui"
-    import {type BubbleChartComponentProps} from "./charts/definitions";
-    import {useVisuallyJsModel} from "./surface-store";
+    let container: BrowserElement;
+    let chart: BubbleChart | undefined = $state();
 
-    let container:BrowserElement;
-
-	// BubbleChartOptions
-	let {options, className = "", data, url, dataSourceFilter }:BubbleChartComponentProps = $props();
-
-	let chart:BubbleChart;
-
-	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:BubbleChartOptions) {
-        chart = new BubbleChart(container, opts)
-        if (url != null) {
-            chart.load({url});
-        } else if (data != null) {
-            chart.load({data});
-        }
-    }
+        if (!container) return;
+
+        let chartInstance: BubbleChart;
+        const chartOpts: BubbleChartOptions = { ...options, dataSourceFilter };
+        let isDestroyed = false;
 
-    onMount(async () => {
-        const opts:BubbleChartOptions = 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 BubbleChart(container, chartOpts);
+                    chart = chartInstance;
+                }
+            });
         } else {
-            init(opts)
+            // Synchronous initialization with `data` or `url` props.
+            chartInstance = new BubbleChart(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/ColumnChartComponent.svelte

@@ -1,49 +1,71 @@
 <script lang="ts">
+    import { ColumnChart, type BrowserElement, type ColumnChartOptions } from "@visuallyjs/browser-ui";
+    import type { ColumnChartComponentProps } from "./charts/definitions";
+    import { useVisuallyJsModel } from "./surface-store";
 
-	import { onMount  } from "svelte";
+    const { options, className = "", data, url, dataSourceFilter }: ColumnChartComponentProps = $props();
 
-    import {type BrowserElement, type ColumnChartOptions, ColumnChart} from "@visuallyjs/browser-ui"
-    import {type ColumnChartComponentProps} from "./charts/definitions";
-    import {useVisuallyJsModel} from "./surface-store";
+    let container: BrowserElement;
+    let chart: ColumnChart | undefined = $state();
 
-    let container:BrowserElement;
-
-	// ColumnChartOptions
-	let {options, className = "", data, url, dataSourceFilter }:ColumnChartComponentProps = $props();
-
-	let chart:ColumnChart;
-
-	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:ColumnChartOptions) {
-        chart = new ColumnChart(container, opts)
-        if (url != null) {
-            chart.load({url});
-        } else if (data != null) {
-            chart.load({data});
-        }
-    }
+        if (!container) return;
+
+        let chartInstance: ColumnChart;
+        const chartOpts: ColumnChartOptions = { ...options, dataSourceFilter };
+        let isDestroyed = false;
 
-    onMount(async () => {
-        const opts:ColumnChartOptions = 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 ColumnChart(container, chartOpts);
+                    chart = chartInstance;
+                }
+            });
         } else {
-            init(opts)
+            // Synchronous initialization with `data` or `url` props.
+            chartInstance = new ColumnChart(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/EdgePropertyMappingsInspector.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+    import {
+        type EdgePropertyMappings,
+        type EdgeMapping,
+        type PropertyMapping,
+        Inspector, INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS,
+        log
+    } from "@visuallyjs/browser-ui"
+    import {onMount} from "svelte"
+    import {type EdgePropertyMappingsInspectorProps} from "./definitions";
+    import {getInspectorContext} from "./inspector-store";
+    import EdgeTypePickerComponent from "./EdgeTypePickerComponent.svelte";
+
+    let inspector: Inspector
+    let mappings:EdgePropertyMappings = $state([])
+
+    let {
+        getPropertyName,
+        showName = true,
+        cssClass = "vjs-inspector-section",
+        mappings: propsMappings
+    }: EdgePropertyMappingsInspectorProps = $props()
+
+    const resolveMappings = (): EdgePropertyMappings => {
+        if (propsMappings) {
+            return propsMappings
+        } else if (inspector) {
+            const m = inspector.getFromContext<EdgePropertyMappings>(INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS)
+            return m || inspector.$ui.$getEdgePropertyMappings()
+        } else {
+            return []
+        }
+    }
+
+    onMount(async () => {
+        const ic = getInspectorContext(true)
+        if (ic == null) {
+            log(`WARN: EdgePropertyMappingsInspector cannot find an inspector context; cannot mount.`)
+        } else {
+            ic.listen(i => {
+                inspector = i
+                mappings = resolveMappings()
+            })
+        }
+    })
+
+    function toList(pm: PropertyMapping<EdgeMapping>): Array<string> {
+        const p = pm.property
+        return Array.isArray(p) ? p : [p]
+    }
+
+    function getPropertyKey(pm: PropertyMapping<EdgeMapping>) {
+        return toList(pm).join(" ")
+    }
+
+    function getName(pm: PropertyMapping<EdgeMapping>) {
+        return getPropertyName ? getPropertyName(pm) : pm.name || getPropertyKey(pm)
+    }
+
+</script>
+
+{#each mappings as pm (getPropertyKey(pm))}
+    <div class={cssClass}>
+        {#if showName !== false}
+            <div>{getName(pm)}</div>
+        {/if}
+        <EdgeTypePickerComponent propertyName={getPropertyKey(pm)}/>
+    </div>
+{/each}

package/EdgeTypePickerComponent.svelte

@@ -24,18 +24,19 @@
 
         const ic = getInspectorContext(true)
         if (ic == null) {
-            log(`WARN: color picker cannot find an inspector context; cannot mount.`)
+            log(`WARN: edge type 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, null)
+                edgeTypePicker = new EdgeTypePicker(inspector.$ui, container, edgeMappings, inspector.getValue(propertyName), (property, value) => {
+                    inspector.setValue(property, value, null)
                 })
 
                 edgeTypePicker.render(propertyName, inspector._currentCommonData)
 
                 inspector.onChange(() => {
+                    edgeTypePicker.reset()
                     edgeTypePicker.select(propertyName, inspector.getValue(propertyName))
                 })
             })

package/LineChartComponent.svelte

@@ -1,47 +1,71 @@
 <script lang="ts">
+    import { LineChart, type BrowserElement, type LineChartOptions } from "@visuallyjs/browser-ui";
+    import type { LineChartComponentProps } from "./charts/definitions";
+    import { useVisuallyJsModel } from "./surface-store";
 
-	import { onMount  } from "svelte";
+    const { options, className = "", data, url, dataSourceFilter }: LineChartComponentProps = $props();
 
-    import {LineChart, type BrowserElement, type LineChartOptions} from "@visuallyjs/browser-ui"
-    import {type LineChartComponentProps} from "./charts/definitions";
-    import {useVisuallyJsModel} from "./surface-store";
+    let container: BrowserElement;
+    let chart: LineChart | undefined = $state();
 
-    let container:BrowserElement;
-
-    let {options, className = "", data, url, dataSourceFilter }:LineChartComponentProps = $props();
-
-	let chart:LineChart;
-
-	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:LineChartOptions) {
-        chart = new LineChart(container, opts)
-        if (url != null) {
-            chart.load({url});
-        } else if (data != null) {
-            chart.load({data});
-        }
-    }
+        if (!container) return;
 
-    onMount(async () => {
-        const opts:LineChartOptions = Object.assign({dataSourceFilter}, options)
+        let chartInstance: LineChart;
+        const chartOpts: LineChartOptions = { ...options, dataSourceFilter };
+        let isDestroyed = false;
+
+        // 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 LineChart(container, chartOpts);
+                    chart = chartInstance;
+                }
+            });
         } else {
-            init(opts)
+            // Synchronous initialization with `data` or `url` props.
+            chartInstance = new LineChart(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/PaletteComponent.svelte

@@ -54,10 +54,7 @@
                 ignoreDropOnNode,
                 allowRotation,
                 rotationSpeed,
-                autoEdgeConnect,
-                autoEdgeConnectActiveClass,
-                autoEdgeConnectMode,
-                autoEdgeLineStyle
+                autoEdgeConnect
             })
         }