@visuallyjs/browser-ui-svelte 1.1.4 → 1.2.1

package/PaperComponent.svelte

@@ -0,0 +1,365 @@
+<script lang="ts">
+    import { onMount, type Snippet } from "svelte";
+    import {
+        BrowserUISvelteModel,
+        newInstance,
+        type PaperComponentProps
+    } from "./index";
+    import {
+        isNode,
+        isGroup,
+        renderPaper,
+        uuid,
+        EVENT_RENDER_END,
+        CLASS_DEFAULT_GROUP,
+        CLASS_DEFAULT_NODE, Paper,
+		type BrowserElement,
+		type ObjectData,
+		Vertex,
+		partition,
+		type VertexUpdatedParams,
+        extend, EVENT_GRAPH_CLEARED, EVENT_NODE_UPDATED, EVENT_GROUP_UPDATED,
+		type NodeRemovedParams, EVENT_NODE_REMOVED,
+        type GroupRemovedParams, EVENT_GROUP_REMOVED,
+        type PaperOptions,
+        OVERLAY_TYPE_CUSTOM,
+        type Connection,
+        type EdgeUpdatedParams,
+        type EdgeRemovedParams,
+        EVENT_EDGE_UPDATED,
+        EVENT_EDGE_REMOVED,
+        ELEMENT_DIV
+    } from "@visuallyjs/browser-ui";
+    import { internal_getPaperContext } from "./surface-store";
+
+    import DefaultNodeComponent from './DefaultNodeComponent.svelte'
+    import DefaultGroupComponent from './DefaultGroupComponent.svelte'
+    import WrapperComponent from "./WrapperComponent.svelte";
+    import OverlayWrapperComponent from "./OverlayWrapperComponent.svelte";
+
+    let container:HTMLElement;
+
+    let {
+        className,
+        renderOptions,
+        viewOptions,
+        modelOptions,
+        model,
+        data,
+        url,
+        shapeLibrary,
+        injector,
+		children
+    }:PaperComponentProps = $props();
+
+    const paperContext = internal_getPaperContext(false);
+
+    let paper:Paper;
+
+    export function getPaper() {
+        return paper
+	}
+
+    export function getModel() {
+        return paper?.model
+    }
+
+    type ComponentHolder = {
+        component:any,
+        props:any,
+        vertex:Vertex,
+		def:any,
+		id:string
+    }
+
+    const componentMap:Map<string, ComponentHolder> = new Map();
+    const id = uuid();
+
+    // list of vertices to render
+	let _vertices:Array<ComponentHolder> = []
+
+    type OverlayHolder = {
+        component: any,
+        props: any,
+        edge: any,
+        id: string,
+		el:BrowserElement
+    }
+
+    let _overlays: Array<OverlayHolder> = []
+
+	// state wrapper around the vertex list
+    let vertexState = $state({
+		vertices:_vertices
+	})
+
+    let overlayState = $state({
+        overlays: _overlays
+    })
+
+	// manages updating the vertex state cleanly.
+    function _updateVertexState() {
+        vertexState.vertices.length = 0
+		vertexState.vertices.push(..._vertices.slice())
+    }
+
+    function _updateOverlayState() {
+        overlayState.overlays.length = 0
+        overlayState.overlays.push(..._overlays.slice())
+    }
+
+    function _initialiseSvelteOverlays() {
+        const edgeTypes = viewOptions?.edges || {}
+        for (let type in edgeTypes) {
+            const edgeDefinition = edgeTypes[type];
+            if (edgeDefinition.overlays) {
+                edgeDefinition.overlays = edgeDefinition.overlays.map((ov: any) => {
+                    if (ov.component != null) {
+                        return {
+                            type: OVERLAY_TYPE_CUSTOM,
+                            options: {
+                                create: (c: Connection<BrowserElement>) => {
+                                    const el = document.createElement(ELEMENT_DIV);
+                                    const overlayProps = {
+                                        data: c.edge.data,
+                                        model: paper.model,
+                                        ui: paper,
+                                        edge: c.edge,
+                                        vertex: c.edge, // Some components might expect vertex
+                                        ...ov.props
+                                    };
+
+                                    const holder: OverlayHolder = {
+                                        component: ov.component,
+                                        props: overlayProps,
+                                        edge: c.edge,
+                                        id: uuid(),
+										el
+                                    };
+
+                                    _overlays.push(holder);
+                                    _updateOverlayState();
+                                    return el;
+                                }
+                            }
+                        };
+                    }
+                    return ov;
+                });
+            }
+        }
+    }
+
+    function render ( id:string,  data:ObjectData, model:BrowserUISvelteModel, type:string,
+                      paper:Paper, def:any, modelObject:Vertex, eventInfo:any) {
+
+        const hasComponent = def.component != null
+        let component;
+        if (!hasComponent) {
+            if (isNode(modelObject)) {
+                component = DefaultNodeComponent;
+            } else if (isGroup(modelObject)) {
+                component = DefaultGroupComponent;
+            }
+        } else {
+            component = def.component;
+        }
+
+        if (component) {
+            let propsToSet:Record<string, any> = {
+                data: modelObject.data,
+                model,
+                ui:paper,
+                componentId: modelObject.getFullId(),
+                vertex: modelObject,
+                eventInfo,
+				className:hasComponent ? null : (isGroup(modelObject) ? CLASS_DEFAULT_GROUP : CLASS_DEFAULT_NODE)
+            }
+
+            if (injector != null) {
+                const injectedProps = injector(modelObject);
+                if (injectedProps != null) {
+                    for (let key in injectedProps) {
+                        propsToSet[key] = injectedProps[key];
+                    }
+                }
+            }
+
+            const props = $state(propsToSet)
+            const componentHolder:ComponentHolder = {
+                component, props, vertex:modelObject, def, id:modelObject.id
+            }
+
+			_vertices.push(componentHolder)
+			_updateVertexState()
+        }
+
+    }
+
+    function cleanupVertex(objId:string, el:BrowserElement) {
+        el.parentNode && el.parentNode.removeChild(el);
+    }
+
+    onMount(async () => {
+        model = model || newInstance(modelOptions || {});
+
+        const templateRenderer = {
+            asynchronous: true,
+            reactive: true,
+			usesWrapperElement:true,
+            update: (el:BrowserElement, data:Object, vertex:Vertex) => {
+                const component = componentMap.get(vertex.id);
+                if (component) {
+                    component.props.data = vertex.data
+                }
+            },
+            render,
+            cleanupVertex,
+            cleanupPort: (objId:string, el:BrowserElement) => {},
+            rerender: (
+                id:string,
+                data:ObjectData,
+                model:BrowserUISvelteModel,
+                type:string,
+                paper:Paper,
+                def:any,
+                modelObject:Vertex,
+                eventInfo:any,
+                originalElement:BrowserElement
+            ) => {
+
+                // split into vertices we want to keep and the one we want to discard
+                const p = partition(_vertices, (v) => v.vertex !== modelObject)
+				// assign the ones we want to keep, update state
+                _vertices = p.left
+                _updateVertexState()
+
+				// remove the old DOM element
+                if (p.right.length > 0) {
+                    cleanupVertex(modelObject.id, originalElement)
+				}
+
+                // on next tick, render again. it's important to wait for the next tick or the
+				// vertices state array gets messed up
+                setTimeout(() => {
+                    render(id, data, model, type, paper, def, modelObject, eventInfo)
+				})
+            }
+        };
+
+        const params = (renderOptions || {}) as PaperOptions;
+        params.view = (viewOptions || {}) as any;
+        params.id = id;
+
+        if (shapeLibrary != null) {
+            params.shapes = {
+                library: shapeLibrary,
+            };
+        }
+
+        _initialiseSvelteOverlays();
+
+        paper = renderPaper(model, container, templateRenderer, params);
+
+        // with continuous anchors it's necessary to do this, for
+        // asynchronous-y reasons. $redrawEveryConnection only redraws
+        // edges and does not update element positions so it's
+        // reasonably quick.
+        paper.bind(EVENT_RENDER_END, () => setTimeout(() => paper.$redrawEveryConnection()))
+
+        if (paperContext != null) {
+            paperContext.set(paper);
+        }
+
+        const updateVertex = (vertexId: string, eventPayload: VertexUpdatedParams) => {
+
+            let mergeData = () => {
+                let data = {}
+                if (eventPayload.originalData || eventPayload.updates) {
+                    data = extend(eventPayload.originalData, eventPayload.updates)
+                }
+                return data
+            };
+
+            const entry = _vertices.find((v) => v.vertex.id === vertexId);
+            if (entry != null) {
+                entry.props.data = mergeData()
+                _updateVertexState()
+            }
+        }
+
+        const removeVertex = (id: string) => {
+            _vertices = _vertices.filter(n => n.vertex.id !== id)
+            _updateVertexState()
+        }
+
+        model.bind<VertexUpdatedParams>(EVENT_NODE_UPDATED, (p: VertexUpdatedParams) => {
+            updateVertex(p.vertex.getFullId(), p)
+        });
+
+        model.bind<VertexUpdatedParams>(EVENT_GROUP_UPDATED, (p: VertexUpdatedParams) => {
+            updateVertex(p.vertex.getFullId(), p)
+        });
+		//
+        model.bind<NodeRemovedParams>(EVENT_NODE_REMOVED, (p: NodeRemovedParams) => {
+            removeVertex(p.node.id)
+        });
+		//
+        model.bind<GroupRemovedParams>(EVENT_GROUP_REMOVED, (p: GroupRemovedParams) => {
+            removeVertex(p.group.id)
+        });
+
+        const updateOverlays = (edgeId: string, eventPayload: EdgeUpdatedParams) => {
+            _overlays.forEach(o => {
+                if (o.edge.id === edgeId) {
+                    o.props.data = eventPayload.edge.data;
+                }
+            });
+            _updateOverlayState();
+        };
+
+        const removeOverlays = (edgeId: string) => {
+            _overlays = _overlays.filter(o => o.edge.id !== edgeId);
+            _updateOverlayState();
+        };
+
+        model.bind<EdgeUpdatedParams>(EVENT_EDGE_UPDATED, (p) => updateOverlays(p.edge.id, p));
+        model.bind<EdgeRemovedParams>(EVENT_EDGE_REMOVED, (p) => removeOverlays(p.edge.id));
+
+
+        model.bind(EVENT_GRAPH_CLEARED, () => {
+            _vertices = []
+            _updateVertexState()
+            _overlays = []
+            _updateOverlayState()
+        })
+
+        if (url != null) {
+            model.load({ url });
+        } else if (data != null) {
+            model.load({ data });
+        }
+    });
+
+</script>
+
+<div class={className} bind:this={container}>
+	{#each vertexState.vertices as vertex (vertex.id)}
+		<WrapperComponent component={vertex.component}
+						  data={vertex.props.data}
+						  ui={paper}
+						  def={vertex.def}
+						  vertex={vertex.vertex}
+						  className={vertex.props.className}/>
+	{/each}
+
+	{#each overlayState.overlays as overlay (overlay.id)}
+		<OverlayWrapperComponent component={overlay.component}
+						  data={overlay.props.data}
+						  ui={paper}
+						  edge={overlay.edge}
+						  className="vjs-svelte-overlay"
+							el={overlay.el}/>
+	{/each}
+	{@render children?.()}
+</div>

package/PaperProvider.svelte

@@ -0,0 +1,11 @@
+<script>
+
+	import { internal_getPaperContext } from "./surface-store"
+
+	const { children } = $props()
+
+    internal_getPaperContext(false)
+
+</script>
+
+{@render children?.()}

package/PieChartComponent.svelte

@@ -2,8 +2,9 @@
 
 	import { onMount  } from "svelte";
 
-    import {PieChart, type BrowserElement} from "@visuallyjs/browser-ui"
-    import {type PieChartComponentProps} from "./definitions";
+    import {PieChart, type BrowserElement, type PieChartOptions} from "@visuallyjs/browser-ui"
+    import {type PieChartComponentProps} from "./charts/definitions";
+    import {useVisuallyJsModel} from "./surface-store";
 
     let container:BrowserElement;
 
@@ -16,20 +17,34 @@
     }
 
     $effect(() => {
-        if (chart) {
+        if (chart && dataSourceFilter != null) {
             chart.setDataSourceFilter(dataSourceFilter)
         }
     })
 
+	function init(opts:PieChartOptions) {
+        chart = new PieChart(container, opts)
+
+        if (url != null) {
+            chart.load({url});
+        } else if (data != null) {
+            chart.load({data});
+        }
+	}
+
 	onMount(async () => {
 
-		chart = new PieChart(container, Object.assign({dataSourceFilter}, options))
+        const opts:PieChartOptions = Object.assign({dataSourceFilter}, options)
 
-		if (url != null) {
-			chart.load({url});
-		} else if (data != null) {
-			chart.load({data});
+		if (url == null && data == null) {
+            useVisuallyJsModel().then(m => {
+                opts.dataSource = m
+				init(opts)
+			})
+		} else {
+            init(opts)
 		}
+
 	})
 
 </script>

package/SankeyChartComponent.svelte

@@ -2,41 +2,62 @@
 
 	import { onMount  } from "svelte";
 
-    import {SankeyChart, type BrowserElement} from "@visuallyjs/browser-ui"
-    import {type SankeyChartComponentProps} from "./definitions";
+    import {
+        SankeyChart,
+        type BrowserElement,
+        type SankeyOptions
+    } from "@visuallyjs/browser-ui"
+    import {type SankeyChartComponentProps} from "./charts/definitions";
+    import {useVisuallyJsModel} from "./surface-store";
 
     let container:BrowserElement;
 
     let {options, className = "", jsonData, csvData, url, interactive, pivot }:SankeyChartComponentProps = $props();
 
-	let chart:SankeyChart;
+	let chart:SankeyChart|null = $state(null);
 
     $effect(() => {
-        chart && chart.pivot(pivot)
+        if (pivot != null && chart != null) {
+            chart.pivot(pivot as string)
+		}
     })
 
 	export function getChart() {
 	    return chart;
     }
 
-	onMount(async () => {
+    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})
+        }
+    }
 
-		const _options = Object.assign({}, options)
+
+	onMount(async () => {
+        const _options:SankeyOptions = 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})
-		}
+        if (url == null && csvData == null && jsonData == null) {
+            useVisuallyJsModel().then(m => {
+                _options.dataSource = m
+                init(_options)
+            })
+        } else {
+            init(_options)
+        }
+
 	})
 
 </script>

package/ScatterChartComponent.svelte

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

@@ -1,8 +1,9 @@
 <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";
+    import {useSurface} from "./use-surface.svelte";
+    import {useDiagram} from "./use-diagram.svelte";
 
     let {
         className = "",
@@ -24,30 +25,22 @@
 		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`)
-    }
+    let initialised = false
+    const surface = useSurface()
+    const diagram = useDiagram()
+    const surfaceRef = $derived(surface.current || diagram.current?.$ui as Surface)
 
-	function _maybeInit() {
-		if (!initialised && surface != null && container != null) {
+	$effect(() => {
+		if (!initialised && surfaceRef != null && container != null) {
 			initialised = true
 
-			const shapeLibrary = surface.getShapeLibrary()
+			const shapeLibrary = surfaceRef.getShapeLibrary()
 			if (shapeLibrary == null) {
 				log("WARN: no shape library set on surface; ShapePaletteComponent cannot render")
 			} else {
 
-                new ShapePalette(surface, {
+                new ShapePalette(surfaceRef, {
                     container,
                     dataGenerator,
 					autoExitDrawMode,
@@ -71,10 +64,6 @@
 			}
 
 		}
-	}
-
-	onMount(async () => {
-		_maybeInit()
 	})