@visuallyjs/browser-ui 1.0.0

package/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@visuallyjs/browser-ui",
+  "version": "1.0.0",
+  "license": "Commercial",
+  "main": "js/visuallyjs.browser-ui.cjs.js",
+  "module": "js/visuallyjs.browser-ui.esm.js",
+  "description": "VisuallyJs",
+  "files": [
+    "js/visuallyjs.browser-ui.cjs.js",
+    "js/visuallyjs.browser-ui.esm.js",
+    "css/*.css",
+    "types/**/*.d.ts"
+  ],
+  "sideEffects": false,
+  "types": "types/index.d.ts"
+}

package/types/browser-ui/base-dom-ui-layout-adapter.d.ts

@@ -0,0 +1,14 @@
+import { UICore, ViewportElement } from "../ui";
+import { Size, AbstractLayoutAdapter } from "../core";
+import { BrowserElement } from "./util";
+/**
+ * Implementation of layout adapter that is the parent of the `CanvasLayoutAdapter` and `GroupLayoutAdapter`, providing
+ * the functionality shared by those two classes.
+ * @internal
+ */
+export declare abstract class BaseDomUiLayoutAdapter extends AbstractLayoutAdapter<BrowserElement> {
+    protected ui: UICore<BrowserElement>;
+    protected constructor(ui: UICore<BrowserElement>);
+    getViewportPositionById(id: string): ViewportElement<BrowserElement>;
+    getSize(el: BrowserElement): Size;
+}

package/types/browser-ui/browser-ui.d.ts

@@ -0,0 +1,95 @@
+import { BrowserElement } from "./util";
+import { SurfaceOptions, VanillaSurfaceOptions } from "./surface-renderer/surface-render-options";
+import { Surface } from "./surface-renderer/surface";
+import { Diagram, DiagramOptions } from "./surface-renderer/diagrams";
+import { ModelOptions, UrlFetchOptions, VisuallyJsModel, ObjectData, DataSource, Vertex, Base } from "../core";
+import { BrowserUI } from "./browser-visuallyjs-instance";
+import { PaperDefaults, PaperOptions } from "./paper-renderer/definitions";
+import { Paper } from "./paper-renderer/paper";
+/**
+ * Defines a template renderer
+ * @internal
+ */
+export interface TemplateRenderer<E> {
+    /**
+     * Whether or not vertices are rendered asynchronously, or in the current event loop. The vanilla renderer and the Angular integrations are not asynchronous. But Vue, Svelte and React are.
+     */
+    asynchronous: boolean;
+    /**
+     * Whether or not the UI can expect the renderer to detect data model changes that require a refresh of a given vertex's DOM representation. For vanilla and Svelte this is false; all the other library integrations set this to true.
+     */
+    reactive: boolean;
+    render(templateId: string, data: ObjectData, dataSource: DataSource, objectType: string, renderer: BrowserUI, def: any, obj: Base, eventInfo: any): void;
+    rerender(templateId: string, data: ObjectData, dataSource: DataSource, objectType: string, renderer: BrowserUI, def: any, obj: Base, eventInfo: any, originalElement: E): void;
+    cleanupVertex(objId: string, el: E): void;
+    cleanupPort(objId: string, el: E): void;
+    addTemplate?(id: string, content: string): void;
+    update(el: E, data: ObjectData, v: Vertex, renderer: BrowserUI): void;
+    /**
+     * Whether or not the given renderer writes a wrapper element around the generated vertex element. React does this, for example. We use this information to decide on which attributes to copy from the first element child onto the element we inject into the dom.
+     */
+    usesWrapperElement: boolean;
+}
+/**
+ * Concrete implementation of the VisuallyJs model for use in a browser environment, by providing the `fetchUrl` method (using the browser's fetch API).
+ * @group Model
+ */
+export declare class BrowserUIModel extends VisuallyJsModel {
+    fetchUrl(options: UrlFetchOptions): void;
+    /**
+     * Configures the given element as a Surface, registering it so that it reflects any changes to the underlying data. If there is any data in the model at the time of this call it is rendered; any data subsequently loaded is automatically rendered. You can supply layout arguments to this method (layout type + layout specific parameters), as well as rules for endpoints, paint styles etc.
+     * @param container The Element to render into
+     * @param options Render options
+     * @param templateRenderer
+     */
+    render(container: BrowserElement, options?: VanillaSurfaceOptions, templateRenderer?: TemplateRenderer<any>): Surface;
+    /**
+     * Renders a {@link Diagram} into the given element, using the provided options.
+     * @param container The Element to render into
+     * @param options Options for the diagram.
+     */
+    renderDiagram(container: BrowserElement, options?: DiagramOptions): Diagram;
+    /**
+     * Configures the given element as a {@link Paper}, registering it so that it reflects any changes to the underlying data. If there is any data in the model at the time of this call it is rendered; any data subsequently loaded is automatically rendered. You can supply layout arguments to this method (layout type + layout specific parameters), as well as rules for endpoints, paint styles etc.
+     * @param container The Element to render into
+     * @param options Render options
+     * @param defaults
+     * @param templateRenderer Mainly for internal use, or for certain advanced usage scenarios.
+     */
+    renderPaper(container: BrowserElement, options?: PaperOptions, defaults?: PaperDefaults, templateRenderer?: TemplateRenderer<any>): Paper;
+}
+/**
+ * Creates a new instance of the VisuallyJsModel for use in a browser.
+ * @group Factory Methods
+ * @param options
+ */
+export declare function newInstance(options?: ModelOptions): BrowserUIModel;
+/**
+ * This method is not intended to be used by a library user - you should use the `render` method on the model instance instead.
+ *
+ * Configures the given element as a Surface, registering it so that it reflects any changes to the underlying data. If
+ * there is any data in the model at the time of this call it is rendered; any data subsequently loaded is automatically
+ * rendered. You can supply layout arguments to this method (layout type + layout specific parameters), as well as UI rules for
+ * endpoints, paint styles etc.
+ * @param model The model to render
+ * @param container The Element to render into
+ * @param templateRenderer Template renderer to use - abstracts out the default VisuallyJs template renderer vs Angular/React/Vue etc
+ * @param options Render options
+ * @internal
+ */
+export declare function renderSurface(model: BrowserUIModel, container: BrowserElement, templateRenderer: TemplateRenderer<any>, options?: SurfaceOptions): Surface;
+/**
+ * This method is not intended to be used by a library user - you should use the `render` method on the model instance instead.
+ *
+ * Configures the given element as a Paper, registering it so that it reflects any changes to the underlying data. If
+ * there is any data in the model at the time of this call it is rendered; any data subsequently loaded is automatically
+ * rendered. You can supply layout arguments to this method (layout type + layout specific parameters), as well as UI rules for
+ * endpoints, paint styles etc.
+ * @param model The model to render
+ * @param container The Element to render into
+ * @param templateRenderer Template renderer to use - abstracts out the default VisuallyJs template renderer vs Angular/React/Vue etc
+ * @param options Render options
+ * @param defaults
+ * @internal
+ */
+export declare function renderPaper(model: BrowserUIModel, container: BrowserElement, templateRenderer: TemplateRenderer<any>, options?: PaperOptions, defaults?: PaperDefaults): Paper;

package/types/browser-ui/browser-util.d.ts

@@ -0,0 +1,233 @@
+import { VisuallyJSDOMElement } from './element-facade';
+import { UrlFetchOptions } from "../core/io";
+import { PointXY } from "../core/util";
+import { BrowserElement } from "./util";
+import { ElementAttributes } from "./svg-util";
+import { ElementType } from "../ui";
+/**
+ * @internal
+ * @param el
+ * @param selector
+ * @param ctx
+ */
+export declare function matchesSelector(el: BrowserElement, selector: string, ctx?: BrowserElement): boolean;
+/**
+ * Consume the given event, using `stopPropagation()` if present or `returnValue` if not, and optionally
+ * also calling `preventDefault()`.
+ * @param e
+ * @param doNotPreventDefault
+ * @group Utils
+ */
+export declare function consume(e: Event, doNotPreventDefault?: boolean): void;
+/**
+ * Find the parent of the given element that matches the given selector, optionally testing the element itself also.
+ * @param el
+ * @param selector
+ * @param container
+ * @param matchOnElementAlso
+ * @internal
+ */
+export declare function findParent(el: BrowserElement, selector: string, container: BrowserElement, matchOnElementAlso: boolean): VisuallyJSDOMElement;
+/**
+ * Find all the parents (ancestors) of the given element that match the given selector. The DOM is searched up to `container`, if
+ * you provide that, otherwise it is searched up to the document body element.
+ * @param el
+ * @param selector
+ * @param container
+ * @internal
+ */
+export declare function findParents(el: BrowserElement, selector: string, container?: BrowserElement): Array<BrowserElement>;
+/**
+ * @internal
+ * @param e
+ */
+export declare function getEventSource(e: Event): VisuallyJSDOMElement;
+/**
+ * @internal
+ * @param el
+ */
+export declare function isNodeList(el: any): el is NodeListOf<BrowserElement>;
+/**
+ * @internal
+ * @param el
+ */
+export declare function isArrayLike(el: any): el is ArrayLike<BrowserElement>;
+/**
+ * @internal
+ * @param el
+ */
+export declare function isArrayOrNodeList(el: any): boolean;
+/**
+ * @internal
+ * @param el
+ */
+export declare function getClass(el: BrowserElement): string;
+/**
+ * @internal
+ * @param el
+ * @param clazz
+ */
+export declare function addClass(el: BrowserElement | NodeListOf<BrowserElement>, clazz: string): void;
+/**
+ * @internal
+ * @param el
+ * @param clazz
+ */
+export declare function hasClass(el: BrowserElement, clazz: string): boolean;
+/**
+ * @internal
+ * @param el
+ * @param clazz
+ */
+export declare function removeClass(el: BrowserElement | NodeListOf<BrowserElement>, clazz: string): void;
+/**
+ * @internal
+ * @param el
+ * @param clazz
+ */
+export declare function toggleClass(el: BrowserElement | NodeListOf<BrowserElement>, clazz: string): void;
+/**
+ * @internal
+ * @param el
+ * @param classesToAdd
+ * @param classesToRemove
+ */
+export declare function updateClasses(el: Element, classesToAdd?: string | Array<string>, classesToRemove?: string | Array<string>): void;
+/**
+ * @internal
+ * @param ctx
+ * @param spec
+ */
+export declare function getSelector(ctx: string | BrowserElement, spec?: string): Array<VisuallyJSDOMElement>;
+/**
+ * @internal
+ * @param tag
+ * @param style
+ * @param clazz
+ * @param atts
+ */
+export declare function createElement(tag: string, style?: Record<string, any>, clazz?: string, atts?: Record<string, string>): VisuallyJSDOMElement;
+/**
+ * @internal
+ * @param ns
+ * @param tag
+ * @param style
+ * @param clazz
+ * @param atts
+ */
+export declare function createElementNS(ns: string, tag: string, style?: Record<string, any>, clazz?: string, atts?: ElementAttributes): VisuallyJSDOMElement;
+export declare function createAndAppendElementNS(ns: string, tag: string, style?: Record<string, any>, clazz?: string, atts?: ElementAttributes, parent?: BrowserElement, insertBeforeEnd?: boolean): VisuallyJSDOMElement;
+/**
+ * Gets the position of the given element relative to the browser viewport's origin. This method is safe for
+ * both HTML and SVG elements.
+ * @param el
+ * @internal
+ */
+export declare function offsetRelativeToRoot(el: Element, doNotRound?: boolean): PointXY;
+/**
+ * @internal
+ * @param el
+ */
+export declare function getElementType(el: Element): ElementType;
+/**
+ * @internal
+ * @param el
+ */
+export declare function isSVGElement(el: Element): boolean;
+/**
+ * @internal
+ * @param el
+ */
+export declare function isDOMElement(el: any): el is BrowserElement;
+export declare class xml {
+    /**
+     * Sets a node's text value.
+     * @param node Element to set text on.
+     * @param text Text to set.
+     */
+    static setNodeText(node: any, text: string): void;
+    /**
+     * Gets text from the given node.
+     * @param node XML element.
+     */
+    static getNodeText(node: any): string;
+    /**
+     * Gets the first instance of the child with the given tag name, null if none found.
+     * @param parent Element to retrieve child from.
+     * @param name Child tag name to retrieve.
+     */
+    static getChild(parent: any, name: string): any;
+    /**
+     * Gets children of the given node (only direct children), returning an array of nodes (an empty array if none found).
+     * @param parent Element to retrieve children from.
+     * @param name Child tag names to retrieve.
+     */
+    static getChildren(parent: any, name: string): Array<any>;
+    /**
+     * Serializes the given XML node to a string, throwing an Error if something goes bad.
+     * @param xmlNode XML element to serialize.
+     * @returns Serialized XML element.
+     */
+    static xmlToString(xmlNode: any): string;
+    /**
+     * Creates an XML element.
+     * @param name Tag name of the element to create.
+     * @param attributes Optional map of attribute names and values.
+     * @param text Optional text for the element.
+     * @returns An XML element.
+     */
+    static createElement(name: string, attributes: any, text: string): any;
+}
+/**
+ * Create a debounced version of the given function.
+ * @param fn
+ * @param timeout
+ * @group Utils
+ */
+export declare function debounce(fn: () => any, timeout: number): () => any;
+/**
+ * Basic ajax function.
+ * @param params
+ * @internal
+ */
+export declare function ajax(params: UrlFetchOptions): void;
+/**
+ * Gets the position of the given event on the given element as a proportion of the element's
+ * width/height. For instance, x:0.5, y:0.5 means the center of the element.
+ * @internal
+ * @param evt
+ * @param el
+ * @param zoom
+ */
+export declare function getPositionOnElement(evt: Event, el: Element, zoom: number): PointXY;
+/**
+ * Returns whether the given element
+ * @param o
+ * @internal
+ */
+export declare function isElement(o: any): boolean;
+/**
+ * Returns whether the given element
+ * @param o
+ * @internal
+ */
+export declare function isTextNode(o: any): boolean;
+/**
+ * @internal
+ */
+export declare function attWithValue(att: string, value: any): string;
+/**
+ * Returns whether or not the current user prefers dark mode.
+ */
+export declare function prefersDarkMode(): boolean;
+/**
+ * Bind a dark mode toggle listener on the window.
+ * @param f
+ * @internal
+ */
+export declare function bindDarkModeListener(f: (darkMode: boolean) => any): void;
+export declare function cls(...className: Array<string>): string;
+export declare function classList(...className: Array<string>): string;
+export declare function att(...attName: Array<string>): string;
+/** @internal */
+export declare const SELECTOR_MANAGED_ELEMENT: string;