@visuallyjs/browser-ui-svelte 1.0.3 → 1.1.0

package/SurfaceComponent.svelte

@@ -100,7 +100,7 @@
             let propsToSet:Record<string, any> = {
                 data: modelObject.data,
                 model,
-                surface,
+                ui:surface,
                 componentId: modelObject.getFullId(),
                 vertex: modelObject,
                 eventInfo,
@@ -194,7 +194,7 @@
         // asynchronous-y reasons. $redrawEveryConnection only redraws
         // edges and does not update element positions so it's
         // reasonably quick.
-        surface.bind(EVENT_RENDER_END, () => setTimeout(() => surface.router.$redrawEveryConnection()))
+        surface.bind(EVENT_RENDER_END, () => setTimeout(() => surface.$redrawEveryConnection()))
 
         if (surfaceContext != null) {
             surfaceContext.set(surface);
@@ -260,7 +260,7 @@
 	{#each vertexState.vertices as vertex (vertex.id)}
 		<WrapperComponent component={vertex.component}
 						  data={vertex.props.data}
-						  surface={surface}
+						  ui={surface}
 						  def={vertex.def}
 						  vertex={vertex.vertex}
 						  className={vertex.props.className}/>

package/WrapperComponent.svelte

@@ -4,24 +4,24 @@
     // This is a placeholder component that the surface uses to render each vertex.
 
 	import {onMount} from "svelte";
-    import {type BrowserElement} from "@visuallyjs/browser-ui";
+    import {type BrowserElement, BrowserUI} from "@visuallyjs/browser-ui";
 
-    let {component, vertex, surface, def, data, className} = $props()
+    let {component, vertex, ui, def, data, className} = $props()
 	let el:BrowserElement
 
 	// svelte wants uppercase here. So we just assign to an uppercase var, which we use in the
 	// template
 	const ComponentToRender = component
 
-	const _surface = $state.raw(surface)
+	const _ui = $state.raw(ui) as BrowserUI
 
 	onMount(async () => {
-		surface.$vertexRendered(vertex, el, def)
+		ui.$vertexRendered(vertex, el, def)
 	})
 
 
 </script>
 
 <div bind:this={el} class={className}>
-	<ComponentToRender this={component} data={data} surface={_surface} vertex={vertex} model={_surface.model}/>
+	<ComponentToRender this={component} data={data} ui={_ui} vertex={vertex} model={_ui.model}/>
 </div>

package/definitions.d.ts

@@ -1,5 +1,5 @@
 import type { DOMAttributes } from "svelte/elements";
-import { SurfaceOptions, Vertex, Group, Node, ControlsComponentButtons, DataGeneratorFunction, type BrowserElement, Base, Size, ObjectData, DropTargetInfo, PaletteMode, SvgExportUIOptions, ImageExportUIOptions, ShapeLibraryImpl, ModelOptions, DiagramOptions, ColumnChartOptions, BarChartOptions, CategoryValueChartOptions, Diagram, DiagramCell, NodeMapping, GroupMapping, PortMapping, Surface, EdgeMapping, OnVertexAddedCallback, CanvasDropFilter, LineChartOptions, AreaChartOptions, PieChartOptions, ScatterChartOptions, BubbleChartOptions, GaugeChartOptions, SankeyOptions, FontSpec, BrowserUIModel, PreparedShape, ChartModelFilter, VisuallyJsDefaultJSON, PointXY, FixedElementConstraints } from "@visuallyjs/browser-ui";
+import { SurfaceOptions, Vertex, Group, Node, ControlsComponentButtons, DataGeneratorFunction, type BrowserElement, Base, Size, ObjectData, DropTargetInfo, PaletteMode, SvgExportUIOptions, ImageExportUIOptions, ShapeLibraryImpl, ModelOptions, DiagramOptions, ColumnChartOptions, BarChartOptions, CategoryValueChartOptions, Diagram, DiagramCell, NodeMapping, GroupMapping, PortMapping, BrowserUI, EdgeMapping, OnVertexAddedCallback, CanvasDropFilter, LineChartOptions, AreaChartOptions, PieChartOptions, ScatterChartOptions, BubbleChartOptions, GaugeChartOptions, SankeyOptions, FontSpec, BrowserUIModel, PreparedShape, ChartModelFilter, VisuallyJsDefaultJSON, PointXY, FixedElementConstraints } from "@visuallyjs/browser-ui";
 import { type Snippet } from "svelte";
 /**
  * Render options for a SurfaceComponent. This interface is the same as SurfaceOptions but with several vanilla-only options removed.
@@ -9,7 +9,7 @@ export interface SvelteSurfaceRenderOptions extends Omit<SurfaceOptions, "direct
 /**
  * Definition of a node - its component, and behaviour.
  */
-export interface SvelteNodeMapping extends Omit<NodeMapping<any>, "template" | "templateId" | "parameters"> {
+export interface SvelteNodeMapping extends Omit<NodeMapping<any>, "templateIdResolver" | "template" | "templateId" | "parameters"> {
     /**
      * component used to render this node type. Optional; if you do not supply it a default component will be used.
      */
@@ -18,7 +18,7 @@ export interface SvelteNodeMapping extends Omit<NodeMapping<any>, "template" | "
 /**
  * Definition of a group - its component, and behaviour.
  */
-export interface SvelteGroupMapping extends Omit<GroupMapping<any>, "template" | "templateId" | "parameters"> {
+export interface SvelteGroupMapping extends Omit<GroupMapping<any>, "templateIdResolver" | "template" | "templateId" | "parameters"> {
     /**
      * component used to render this group type. Optional; if you do not supply it a default component will be used.
      */
@@ -27,7 +27,7 @@ export interface SvelteGroupMapping extends Omit<GroupMapping<any>, "template" |
 /**
  * Definition of a port - its component, and behaviour.
  */
-export interface SveltePortMapping extends Omit<PortMapping<any>, "template" | "templateId" | "parameters"> {
+export interface SveltePortMapping extends Omit<PortMapping<any>, "templateIdResolver" | "template" | "templateId" | "parameters"> {
     /**
      * component used to render this port type. Optional; if you do not supply it a default component will be used.
      */
@@ -817,7 +817,7 @@ export interface ColorPickerComponentProps extends DOMAttributes<HTMLDivElement>
  */
 export interface SvelteWrapperProps {
     data: ObjectData;
-    surface: Surface;
+    ui: BrowserUI;
     vertex: Vertex;
     model: BrowserUIModel;
 }

package/index.d.ts

@@ -11,6 +11,7 @@ export * from './diagram-store';
 export * from './surface-store';
 export * from './inspector-store';
 export * from './definitions';
+export * from './use-zoom.svelte';
 import { BrowserElement, BrowserUIModel, BrowserUIOptions, TemplateRenderer, ModelOptions } from "@visuallyjs/browser-ui";
 /**
  * Extension of VisuallyJsModel suitable for use with the Svelte integration.

package/index.js

@@ -11,6 +11,7 @@ export * from './diagram-store';
 export * from './surface-store';
 export * from './inspector-store';
 export * from './definitions';
+export * from './use-zoom.svelte';
 import { BrowserUIModel, log } from "@visuallyjs/browser-ui";
 /**
  * Extension of VisuallyJsModel suitable for use with the Svelte integration.

package/package.json

@@ -1 +1 @@
-{"name":"@visuallyjs/browser-ui-svelte","version":"1.0.3","description":"VisuallyJS Svelte integration for Browser UI renderer","module":"index.js","main":"index.js","types":"index.d.ts","svelte":"index.js","files":["**/*.d.ts","**/*.js","SurfaceComponent.svelte","DecoratorComponent.svelte","DefaultGroupComponent.svelte","DefaultNodeComponent.svelte","MiniviewComponent.svelte","ControlsComponent.svelte","SurfaceProvider.svelte","PaletteComponent.svelte","InspectorComponent.svelte","EdgeTypePickerComponent.svelte","ShapePaletteComponent.svelte","ExportControlsComponent.svelte","ShapeComponent.svelte","DiagramComponent.svelte","BarChartComponent.svelte","ColumnChartComponent.svelte","XYChartComponent.svelte","LineChartComponent.svelte","AreaChartComponent.svelte","PieChartComponent.svelte","WrapperComponent.svelte","DiagramProvider.svelte","DiagramPaletteComponent.svelte","ColorPickerComponent.svelte","ScatterChartComponent.svelte","BubbleChartComponent.svelte","GaugeChartComponent.svelte","SankeyChartComponent.svelte"],"author":"VisuallyJs <hello@visuallyjs.com> (https://visuallyjs.com)","license":"Commercial","dependencies":{"@visuallyjs/browser-ui":"1.0.3"},"homepage":"https://visuallyjs.com/svelte","bugs":"https://github.com/visuallyjs/visuallyjs/issues"}
+{"name":"@visuallyjs/browser-ui-svelte","version":"1.1.0","description":"VisuallyJS Svelte integration for Browser UI renderer","module":"index.js","main":"index.js","types":"index.d.ts","svelte":"index.js","files":["**/*.d.ts","**/*.js","SurfaceComponent.svelte","DecoratorComponent.svelte","DefaultGroupComponent.svelte","DefaultNodeComponent.svelte","MiniviewComponent.svelte","ControlsComponent.svelte","SurfaceProvider.svelte","PaletteComponent.svelte","InspectorComponent.svelte","EdgeTypePickerComponent.svelte","ShapePaletteComponent.svelte","ExportControlsComponent.svelte","ShapeComponent.svelte","DiagramComponent.svelte","BarChartComponent.svelte","ColumnChartComponent.svelte","XYChartComponent.svelte","LineChartComponent.svelte","AreaChartComponent.svelte","PieChartComponent.svelte","WrapperComponent.svelte","DiagramProvider.svelte","DiagramPaletteComponent.svelte","ColorPickerComponent.svelte","ScatterChartComponent.svelte","BubbleChartComponent.svelte","GaugeChartComponent.svelte","SankeyChartComponent.svelte"],"author":"VisuallyJs <hello@visuallyjs.com> (https://visuallyjs.com)","license":"Commercial","dependencies":{"@visuallyjs/browser-ui":"1.1.0"},"homepage":"https://visuallyjs.com/svelte","bugs":"https://github.com/visuallyjs/visuallyjs/issues"}

package/use-zoom.svelte.d.ts

@@ -0,0 +1,9 @@
+import { BrowserUI } from '@visuallyjs/browser-ui';
+/**
+ * Creates a reactive zoom state for a VisuallyJS UI
+ * @param ui The Surface instance provided via props.
+ * @group Hooks
+ */
+export declare function useZoom(ui: BrowserUI): {
+    readonly current: number;
+};

package/use-zoom.svelte.js

@@ -0,0 +1,28 @@
+import { EVENT_ZOOM } from '@visuallyjs/browser-ui';
+/**
+ * Creates a reactive zoom state for a VisuallyJS UI
+ * @param ui The Surface instance provided via props.
+ * @group Hooks
+ */
+export function useZoom(ui) {
+    // Define reactive state
+    debugger;
+    let zoom = $state(ui.getZoom());
+    // Manage event listener lifecycle
+    $effect(() => {
+        const handler = (p) => {
+            zoom = p.zoom;
+        };
+        ui.bind(EVENT_ZOOM, handler);
+        // Auto-cleanup when the component/effect is destroyed
+        return () => {
+            ui.unbind(EVENT_ZOOM, handler);
+        };
+    });
+    // Return an object with a getter to maintain reactivity across function boundaries
+    return {
+        get current() {
+            return zoom;
+        }
+    };
+}