@visuallyjs/browser-ui-svelte 1.0.0

package/definitions.js

@@ -0,0 +1 @@
+export {};

package/diagram-store.d.ts

@@ -0,0 +1,30 @@
+import type { Diagram } from "@visuallyjs/browser-ui";
+import { ComponentRef } from "./surface-store";
+/**
+ * Key for the diagram context
+ * @internal
+ */
+export declare const DIAGRAM_STORE_KEY: unique symbol;
+/**
+ * Handle for a diagram - use `set` to set the diagram and `listen` to register a listener.
+ * @internal
+ */
+export interface DiagramRef extends ComponentRef<Diagram> {
+}
+/**
+ * Create a surface context, and set it on Svelte via `setContext`.
+ * @internal
+ */
+export declare function internal_createDiagramContext(): DiagramRef;
+/**
+ * Gets the current diagram context from Svelte, optionally creating it if it does not exist. The Diagram and the DiagramProvider both set `doNotCreate` to false; other components such as miniview/controls must set it to true.
+ * DO NOT use as a user of the API. Use {@link useDiagram} instead
+ * @param doNotCreate
+ * @internal
+ */
+export declare function internal_getDiagramContext(doNotCreate: boolean): DiagramRef;
+/**
+ * Hook to expose the current Surface. This hook is asynchronous and returns a Promise.
+ * @group Hooks
+ */
+export declare function useDiagram(): Promise<Diagram>;

package/diagram-store.js

@@ -0,0 +1,58 @@
+import { getContext, setContext } from "svelte";
+/**
+ * Key for the diagram context
+ * @internal
+ */
+export const DIAGRAM_STORE_KEY = Symbol();
+/**
+ * Create a surface context, and set it on Svelte via `setContext`.
+ * @internal
+ */
+export function internal_createDiagramContext() {
+    const listeners = [];
+    const handle = { current: null };
+    const ref = {
+        set: (d) => {
+            handle.current = d;
+            listeners.forEach(l => l(d));
+        },
+        listen: (l) => {
+            if (handle.current == null) {
+                listeners.push(l);
+            }
+            else {
+                l(handle.current);
+            }
+        }
+    };
+    setContext(DIAGRAM_STORE_KEY, ref);
+    return ref;
+}
+/**
+ * Gets the current diagram context from Svelte, optionally creating it if it does not exist. The Diagram and the DiagramProvider both set `doNotCreate` to false; other components such as miniview/controls must set it to true.
+ * DO NOT use as a user of the API. Use {@link useDiagram} instead
+ * @param doNotCreate
+ * @internal
+ */
+export function internal_getDiagramContext(doNotCreate) {
+    let ctx = getContext(DIAGRAM_STORE_KEY);
+    if (ctx == null && !doNotCreate) {
+        ctx = internal_createDiagramContext();
+    }
+    return ctx;
+}
+/**
+ * Hook to expose the current Surface. This hook is asynchronous and returns a Promise.
+ * @group Hooks
+ */
+export function useDiagram() {
+    const ref = internal_getDiagramContext(true);
+    return new Promise((resolve, reject) => {
+        if (ref != null) {
+            ref.listen((s) => resolve(s));
+        }
+        else {
+            reject();
+        }
+    });
+}

package/index.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Provides integration with Svelte 5. This package has a dependency on @visuallyjs/browser-ui.
+ *
+ * For a detailed discussion of this package, see https://visuallyjs.com/svelte
+ *
+ * @packageDocumentation
+ */
+export * from './components';
+export * from './store-adapter';
+export * from './diagram-store';
+export * from './surface-store';
+export * from './inspector-store';
+export * from './definitions';
+import { BrowserElement, BrowserUIModel, BrowserUIOptions, TemplateRenderer, ModelOptions } from "@visuallyjs/browser-ui";
+/**
+ * Extension of VisuallyJsModel suitable for use with the Svelte integration.
+ * @group Classes
+ */
+export declare class BrowserUISvelteModel extends BrowserUIModel {
+    render(container: BrowserElement, options?: BrowserUIOptions, templateRenderer?: TemplateRenderer<any>): any;
+}
+/**
+ * Creates a new instance of the VisuallyJs model for use with the Svelte integration.
+ * @param options
+ * @internal
+ */
+export declare function newInstance(options: ModelOptions): BrowserUISvelteModel;

package/index.js

@@ -0,0 +1,33 @@
+/**
+ * Provides integration with Svelte 5. This package has a dependency on @visuallyjs/browser-ui.
+ *
+ * For a detailed discussion of this package, see https://visuallyjs.com/svelte
+ *
+ * @packageDocumentation
+ */
+export * from './components';
+export * from './store-adapter';
+export * from './diagram-store';
+export * from './surface-store';
+export * from './inspector-store';
+export * from './definitions';
+import { BrowserUIModel, log } from "@visuallyjs/browser-ui";
+/**
+ * Extension of VisuallyJsModel suitable for use with the Svelte integration.
+ * @group Classes
+ */
+export class BrowserUISvelteModel extends BrowserUIModel {
+    render(container, options, templateRenderer) {
+        log("render called directly on BrowserUISvelteModel class: should not happen. UI components should use internal render.");
+        return null;
+    }
+}
+/**
+ * Creates a new instance of the VisuallyJs model for use with the Svelte integration.
+ * @param options
+ * @internal
+ */
+export function newInstance(options) {
+    options = options || {};
+    return new BrowserUISvelteModel(options);
+}

package/inspector-store.d.ts

@@ -0,0 +1,24 @@
+import type { Inspector } from "@visuallyjs/browser-ui";
+import { ComponentRef } from "./surface-store";
+/**
+ * Key for the inspector context
+ * @internal
+ */
+export declare const INSPECTOR_STORE_KEY: unique symbol;
+/**
+ * Handle for an inspector - use `set` to set the inspector and `listen` to register a listener.
+ * @internal
+ */
+export interface InspectorRef extends ComponentRef<Inspector> {
+}
+/**
+ * Create a inspector context, and set it on Svelte via `setContext`.
+ * @internal
+ */
+export declare function createInspectorContext(): InspectorRef;
+/**
+ * Gets the current Inspector context from Svelte, optionally creating it if it does not exist.
+ * @param doNotCreate
+ * @internal
+ */
+export declare function getInspectorContext(doNotCreate: boolean): InspectorRef;

package/inspector-store.js

@@ -0,0 +1,42 @@
+import { getContext, setContext } from "svelte";
+/**
+ * Key for the inspector context
+ * @internal
+ */
+export const INSPECTOR_STORE_KEY = Symbol();
+/**
+ * Create a inspector context, and set it on Svelte via `setContext`.
+ * @internal
+ */
+export function createInspectorContext() {
+    const listeners = [];
+    const handle = { current: null };
+    const ref = {
+        set: (d) => {
+            handle.current = d;
+            listeners.forEach(l => l(d));
+        },
+        listen: (l) => {
+            if (handle.current == null) {
+                listeners.push(l);
+            }
+            else {
+                l(handle.current);
+            }
+        }
+    };
+    setContext(INSPECTOR_STORE_KEY, ref);
+    return ref;
+}
+/**
+ * Gets the current Inspector context from Svelte, optionally creating it if it does not exist.
+ * @param doNotCreate
+ * @internal
+ */
+export function getInspectorContext(doNotCreate) {
+    let ctx = getContext(INSPECTOR_STORE_KEY);
+    if (ctx == null && !doNotCreate) {
+        ctx = createInspectorContext();
+    }
+    return ctx;
+}

package/package.json

@@ -0,0 +1 @@
+{"name":"@visuallyjs/browser-ui-svelte","version":"1.0.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.0.0"}}

package/store-adapter.d.ts

@@ -0,0 +1,15 @@
+/**
+ * A simple wrapper around a store whose contents are expected to be in VisuallyJs's JSON data format. When the store
+ * posts an update event, the contents of the store are queried and VisuallyJs's list of nodes, groups and edges
+ * are updated to be in line with the contents of the store.
+ *
+ */
+import { VisuallyJsModel } from "@visuallyjs/browser-ui";
+export declare class StoreAdapter {
+    model: VisuallyJsModel;
+    store: any;
+    constructor(model: VisuallyJsModel, store: any);
+    processNodes(nodes: any): void;
+    processGroups(groups: any): void;
+    processEdges(edges: any): void;
+}

package/store-adapter.js

@@ -0,0 +1,47 @@
+export class StoreAdapter {
+    model;
+    store;
+    constructor(model, store) {
+        this.model = model;
+        this.store = store;
+        store.subscribe((value) => {
+            this.processGroups(value.groups || []);
+            this.processNodes(value.nodes || []);
+            this.processEdges(value.edges || []);
+        });
+    }
+    processNodes(nodes) {
+        const vjsNodes = this.model.getNodes();
+        const newNodes = nodes.filter((n) => this.model.getNode(n.id) == null);
+        const removedNodes = vjsNodes.filter((n) => {
+            return nodes.find((_n) => _n.id === n.id) == null;
+        });
+        removedNodes.forEach((n) => this.model.removeNode(n));
+        newNodes.forEach((n) => this.model.addNode(n));
+    }
+    processGroups(groups) {
+        const vjsGroups = this.model.getGroups();
+        const newGroups = groups.filter((n) => this.model.getGroup(n.id) == null);
+        const removedGroups = vjsGroups.filter((n) => {
+            return groups.find((_n) => _n.id === n.id) == null;
+        });
+        removedGroups.forEach((n) => this.model.removeGroup(n));
+        newGroups.forEach((n) => this.model.addGroup(n));
+    }
+    processEdges(edges) {
+        const vjsEdges = this.model.getAllEdges();
+        const newEdges = edges.filter((e) => {
+            e.data = e.data || {};
+            let edgeId = e.data.id;
+            return edgeId == null || this.model.getEdge(edgeId) == null;
+        });
+        const removedEdges = vjsEdges.filter((n) => {
+            return edges.find((_n) => _n.id === n.id) == null;
+        });
+        removedEdges.forEach((n) => this.model.removeEdge(n));
+        newEdges.forEach((n) => {
+            const e = this.model.addEdge(n);
+            n.data.id = e.id;
+        });
+    }
+}

package/surface-store.d.ts

@@ -0,0 +1,41 @@
+import type { Surface } from "@visuallyjs/browser-ui";
+import { BrowserUISvelteModel } from "./index";
+/**
+ * Key for the surface context
+ * @internal
+ */
+export declare const STORE_KEY: unique symbol;
+export interface ComponentRef<T> {
+    set: (o: T) => void;
+    listen: (l: (o: T) => any) => void;
+}
+/**
+ * Handle for a surface - use `set` to set the surface and `listen` to register a listener.
+ * @internal
+ */
+export interface SurfaceRef {
+    set: (surface: Surface) => void;
+    listen: (l: (s: Surface) => any) => void;
+}
+/**
+ * Create a surface context, and set it on Svelte via `setContext`.
+ * @internal
+ */
+export declare function internal_createSurfaceContext(): SurfaceRef;
+/**
+ * Gets the current surface context from Svelte, optionally creating it if it does not exist. The Surface and the SurfaceProvider both set `doNotCreate` to false; other components such as miniview/controls must set it to true.
+ * This method is NOT to be invoked by users of the API. Use {@link useSurface} to access the current Surface.
+ * @param doNotCreate
+ * @internal
+ */
+export declare function internal_getSurfaceContext(doNotCreate: boolean): SurfaceRef;
+/**
+ * Hook to expose the current Surface. This hook is asynchronous and returns a Promise.
+ * @group Hooks
+ */
+export declare function useSurface(): Promise<Surface>;
+/**
+ * Hook to expose the current model. This hook is asynchronous and returns a Promise.
+ * @group Hooks
+ */
+export declare function useVisuallyJsModel(): Promise<BrowserUISvelteModel>;

package/surface-store.js

@@ -0,0 +1,73 @@
+import { getContext, setContext } from "svelte";
+/**
+ * Key for the surface context
+ * @internal
+ */
+export const STORE_KEY = Symbol();
+/**
+ * Create a surface context, and set it on Svelte via `setContext`.
+ * @internal
+ */
+export function internal_createSurfaceContext() {
+    const listeners = [];
+    const handle = { current: null };
+    const ref = {
+        set: (surface) => {
+            handle.current = surface;
+            listeners.forEach(l => l(surface));
+        },
+        listen: (l) => {
+            if (handle.current == null) {
+                listeners.push(l);
+            }
+            else {
+                l(handle.current);
+            }
+        }
+    };
+    setContext(STORE_KEY, ref);
+    return ref;
+}
+/**
+ * Gets the current surface context from Svelte, optionally creating it if it does not exist. The Surface and the SurfaceProvider both set `doNotCreate` to false; other components such as miniview/controls must set it to true.
+ * This method is NOT to be invoked by users of the API. Use {@link useSurface} to access the current Surface.
+ * @param doNotCreate
+ * @internal
+ */
+export function internal_getSurfaceContext(doNotCreate) {
+    let ctx = getContext(STORE_KEY);
+    if (ctx == null && !doNotCreate) {
+        ctx = internal_createSurfaceContext();
+    }
+    return ctx;
+}
+/**
+ * Hook to expose the current Surface. This hook is asynchronous and returns a Promise.
+ * @group Hooks
+ */
+export function useSurface() {
+    const ref = internal_getSurfaceContext(true);
+    return new Promise((resolve, reject) => {
+        if (ref != null) {
+            ref.listen((s) => resolve(s));
+        }
+        else {
+            reject();
+        }
+    });
+}
+/**
+ * Hook to expose the current model. This hook is asynchronous and returns a Promise.
+ * @group Hooks
+ */
+export function useVisuallyJsModel() {
+    const ref = internal_getSurfaceContext(true);
+    return new Promise((resolve, reject) => {
+        if (ref != null) {
+            ref.listen((s) => resolve(s.model));
+        }
+        else {
+            reject();
+        }
+    });
+}