@visuallyjs/browser-ui 1.2.8 → 1.2.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visuallyjs/browser-ui",
-  "version": "1.2.8",
+  "version": "1.2.10",
   "license": "Commercial",
   "main": "js/visuallyjs.browser-ui.cjs.js",
   "module": "js/visuallyjs.browser-ui.esm.js",

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

@@ -60,7 +60,7 @@ export declare function getClass(el: BrowserElement): string;
  * @param el
  * @param clazz
  */
-export declare function addClass(el: BrowserElement | NodeListOf<BrowserElement>, clazz: string): void;
+export declare function addClass(el: BrowserElement | NodeListOf<BrowserElement>, clazz: string | Array<string>): void;
 /**
  * @internal
  * @param el

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

@@ -1,4 +1,4 @@
-import { EVENT_EDGE_CLICK, EVENT_EDGE_CONTEXTMENU, EVENT_EDGE_DBLCLICK, EVENT_EDGE_MOUSEDOWN, EVENT_EDGE_MOUSEOUT, EVENT_EDGE_MOUSEOVER, EVENT_EDGE_MOUSEUP, EVENT_VERTEX_CLICK, EVENT_VERTEX_TAP, EVENT_VERTEX_DBLTAP, EVENT_VERTEX_MOUSEOVER, EVENT_VERTEX_MOUSEOUT, EVENT_VERTEX_MOUSEMOVE, EVENT_VERTEX_MOUSEUP, EVENT_VERTEX_MOUSEDOWN, EVENT_VERTEX_CONTEXTMENU, EVENT_VERTEX_DBLCLICK, Overlay, OverlayPaintParams, LabelOverlay, Connection, ConnectorPath, UICore, TypeDescriptorBase, VertexMapping, GroupMapping, PortMapping, NodeMapping, DragHandler2, ViewportElement, OverlaySpec, Connector, PaintStyle, ZoomToFitOptions, ZoomToFitIfNecessaryOptions, ZoomToElementsOptions, PropertyMapper, EdgePropertyMappings, ViewportGroupElement, ViewportNodeElement } from '../ui';
+import { EVENT_EDGE_CLICK, EVENT_EDGE_CONTEXTMENU, EVENT_EDGE_DBLCLICK, EVENT_EDGE_MOUSEDOWN, EVENT_EDGE_MOUSEOUT, EVENT_EDGE_MOUSEOVER, EVENT_EDGE_MOUSEUP, EVENT_VERTEX_CLICK, EVENT_VERTEX_TAP, EVENT_VERTEX_DBLTAP, EVENT_VERTEX_MOUSEOVER, EVENT_VERTEX_MOUSEOUT, EVENT_VERTEX_MOUSEMOVE, EVENT_VERTEX_MOUSEUP, EVENT_VERTEX_MOUSEDOWN, EVENT_VERTEX_CONTEXTMENU, EVENT_VERTEX_DBLCLICK, Overlay, OverlayPaintParams, LabelOverlay, Connection, ConnectorPath, UICore, TypeDescriptorBase, VertexMapping, GroupMapping, PortMapping, NodeMapping, DragHandler2, ViewportElement, OverlaySpec, Connector, PaintStyle, ZoomToFitOptions, ZoomToFitIfNecessaryOptions, ZoomToElementsOptions, PropertyMapper, EdgePropertyMappings, ViewportGroupElement, ViewportNodeElement, EdgeRenderContext } from '../ui';
 import { VisuallyJSDOMElement } from './element-facade';
 import { VisuallyJsModel, Base, Edge, Group, Node, ObjectData, Port, Vertex, VisuallyJsSelection, DataSource, EVENT_GROUP_MOVE, Grid, GroupRemovedParams, NodeRemovedParams, PointXY, RectangleXY, Size, CustomTagOptions, AbstractLayoutAdapter, LayoutResultSet, EVENT_EDGE_DRAG_START, EVENT_EDGE_DRAG, EVENT_EDGE_DRAG_END, EVENT_EDGE_DRAG_ABORT } from "../core";
 import { TemplateRenderer } from "./browser-ui";
@@ -145,6 +145,8 @@ export declare abstract class BrowserUI<EVT = any> extends UICore<BrowserElement
     $appendOverlayElement(e: BrowserElement, insertAtStart?: boolean): void;
     $appendVertexElement(e: BrowserElement, insertAtStart?: boolean): void;
     $appendEdgeElement(e: BrowserElement, insertAtStart?: boolean): void;
+    $createEdgeElementFragment(): DocumentFragment;
+    $appendEdgeElementFragment(fragment: unknown): void;
     /**
      *
      * @param el
@@ -632,7 +634,7 @@ export declare abstract class BrowserUI<EVT = any> extends UICore<BrowserElement
      * @param connection
      * @param paintStyle
      */
-    $paintConnector(connection: Connection<BrowserElement>, paintStyle: PaintStyle): void;
+    $paintConnector(connection: Connection<BrowserElement>, paintStyle: PaintStyle, edgeRenderContext?: EdgeRenderContext): void;
     /**
      * @internal
      * @param connection

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

@@ -168,6 +168,7 @@ export declare class Surface extends BrowserUI<SurfaceEvents> implements Support
     $appendOverlayElement(e: BrowserElement, insertAtStart?: boolean): void;
     $appendVertexElement(e: BrowserElement, insertAtStart?: boolean): void;
     $appendEdgeElement(e: BrowserElement, insertAtStart?: boolean): void;
+    $appendEdgeElementFragment(fragment: unknown): void;
     /**
      * Internal callback to register an edge path editor and ensure that the various editors are initialized.
      * @param editor

package/types/browser-ui/svg-element-connector.d.ts

@@ -1,6 +1,6 @@
 import { BrowserUI } from "./browser-visuallyjs-instance";
-import { PaintStyle, Connector, Connection } from "../ui";
-export declare function paintSvgConnector(instance: BrowserUI, connection: Connection<any>, paintStyle: PaintStyle): void;
+import { PaintStyle, Connector, Connection, EdgeRenderContext } from "../ui";
+export declare function paintSvgConnector(instance: BrowserUI, connection: Connection<any>, paintStyle: PaintStyle, edgeRenderContext?: EdgeRenderContext): void;
 /**
  * @internal
  */
@@ -13,4 +13,4 @@ export interface SvgConnector extends Connector {
     targetZone: SVGElement;
     gradient?: SVGLinearGradientElement;
 }
-export declare function getConnectorElement(instance: BrowserUI, connection: Connection<any>): SVGElement;
+export declare function getConnectorElement(instance: BrowserUI, connection: Connection<any>, edgeFragment?: DocumentFragment): SVGElement;

package/types/index.d.ts

@@ -14,3 +14,4 @@ export * from './core';
 export * from './test-support';
 export { HeadlessRecado, Recado, processExpression, evaluateExpression } from './core/templates';
 export * from './charts';
+export * from "./perf";

package/types/perf.d.ts

@@ -0,0 +1,16 @@
+export declare class VisuallyJsPerformance {
+    static p: VisuallyJsPerformance;
+    metrics: Map<string, number>;
+    track: Map<string, number>;
+    counts: Map<string, number>;
+    level: number;
+    _disabled: boolean;
+    static get(): VisuallyJsPerformance;
+    private padTopic;
+    disable(): void;
+    enable(): void;
+    begin(topic: string): void;
+    end(topic: string): void;
+    reset(): void;
+    log(): void;
+}

package/types/ui/common/overlay.d.ts

@@ -20,6 +20,10 @@ export interface OverlayOptions extends Record<string, any> {
      * Defaults to 0.5. See docs.
      */
     location?: number;
+    /** Minimum zoom at which this overlay is visible. Defaults to 0. Null or a negative value disables this bound. */
+    minZoom?: number | null;
+    /** Maximum zoom at which this overlay is visible. Defaults to Infinity. Null or a negative value disables this bound. */
+    maxZoom?: number | null;
     /**
      * 1 to point forwards (the default), -1 to point backwards. Only taken into consideration in some overlay types.
      */

package/types/ui/core/core.d.ts

@@ -103,6 +103,13 @@ export interface LineStyle {
      */
     fontFamily?: string;
 }
+/**
+ * Used by the bulk loader to provide a fragment to which edge elements are appended, rather than the DOM itself. At the end of a bulk load the entire fragment is appended. This provides a performance boost.
+ * @internal
+ */
+export interface EdgeRenderContext {
+    edgeElementFragment?: unknown;
+}
 /**
  * Base UI for apps and diagrams.
  * @internal
@@ -176,6 +183,12 @@ export declare abstract class UICore<EL, EVT = CoreUIEvent> extends OptimisticEv
         def: any;
         eventInfo: any;
     }>;
+    /**
+     * Measurements that will need to be made once the bulk load completes
+     * @private
+     */
+    private _pendingInitialSizeMeasurements;
+    private _deferredInitialVertexRenderedEvents;
     /**
      * Map of group member added events which have not yet been processed, due to the group in question not having yet been rendered at the time the event was fired. The contents of this map are processed whenever a new group is added. Users of the API should not modify the contents of this map.
      * @internal
@@ -189,6 +202,8 @@ export declare abstract class UICore<EL, EVT = CoreUIEvent> extends OptimisticEv
     $_useModelForSizes: boolean;
     $_writeSizeToElements: boolean;
     $_useModelForPositions: boolean;
+    $_batchInitialElementMeasurements: boolean;
+    $_batchEdgeInsertions: boolean;
     readonly $_allowUnattachedEdges: boolean;
     readonly $_edgesDetachable: boolean;
     readonly $_reattachEdges: boolean;
@@ -352,6 +367,7 @@ export declare abstract class UICore<EL, EVT = CoreUIEvent> extends OptimisticEv
      */
     $dataAppendStart(): void;
     $dataAppendEnd(noDataWasAppended?: boolean): void;
+    private $measureInitialElementSizes;
     /**
      This method needs to be updated to work with _setDataLoading to ensure that all vertices for some batch load have been rendered before the stuff here happens. Vertices might be painted async by the underlying template engine, such as React 18 or Vue 3.
      * @param noDataWasLoaded
@@ -546,7 +562,7 @@ export declare abstract class UICore<EL, EVT = CoreUIEvent> extends OptimisticEv
     /**
      * @internal
      */
-    $redrawEveryConnection(): void;
+    $redrawEveryConnection(timestamp?: string, edgeRenderContext?: EdgeRenderContext): void;
     private $redrawConnectionsForViewportElement;
     private _repaintConnections;
     /**
@@ -963,6 +979,7 @@ export declare abstract class UICore<EL, EVT = CoreUIEvent> extends OptimisticEv
     $paintConnection(connection: Connection<EL>, params?: {
         timestamp?: string;
         fireEvent?: boolean;
+        edgeRenderContext?: EdgeRenderContext;
     }): void;
     /**
      * Adds an overlay to the given component, repainting the UI as necessary.
@@ -1169,6 +1186,8 @@ export declare abstract class UICore<EL, EVT = CoreUIEvent> extends OptimisticEv
      * @internal
      */
     abstract $appendEdgeElement(e: EL, insertAtStart?: boolean): void;
+    abstract $createEdgeElementFragment(): unknown;
+    abstract $appendEdgeElementFragment(fragment: unknown): void;
     abstract $setElementVisible(el: EL, visible: boolean): void;
     /**
      * Sets the size of the element in the UI. The details of this are specific to the concrete subclass. No model edits occur as a result of this method.
@@ -1754,7 +1773,7 @@ export declare abstract class UICore<EL, EVT = CoreUIEvent> extends OptimisticEv
      * @param paintStyle
      * @param extents
      */
-    abstract $paintConnector(connection: Connection<any>, paintStyle: PaintStyle): void;
+    abstract $paintConnector(connection: Connection<any>, paintStyle: PaintStyle, edgeRenderContext?: EdgeRenderContext): void;
     /**
      * @internal
      * @param connection

package/types/ui/core/defaults.d.ts

@@ -150,6 +150,12 @@ export interface UIEdgeOptions {
      * The default color to paint a connector's outline path. Defaults to `"transparent"`. Can be overridden on a per-edge basis via the `outlineColor` setting.
      */
     outlineColor?: string;
+    /**
+     * defaults to true, connector elements created during the final initial render pass are appended to the DOM in a single batch. only exposing this option in case a major regression is detected and the functionality needs to be switched off. and marking internal so it's a need to know.
+     * @internal
+     * @deprecated
+     */
+    batchEdgeInsertions?: boolean;
 }
 /**
  * Base options for a renderer.
@@ -205,6 +211,12 @@ export interface UICoreOptions<E, O extends UICoreDefaults> {
      * Defaults to false. When true, newly created nodes are sized according to values in their backing data, using the modelWidthAttribute and modelHeightAttribute as keys. NOTE: when this flag is set, VisuallyJs will write the size onto each element as it is created. Depending on your app, you may not need it to do this - if you know your node sizes are set via css, for instance, or you know the template rendering your vertices writes out the size in an element's style or an SVG element's width/height. If that is the case, you can set {@link writeSizeToElements} to be false, and you'll get a performance boost.
      */
     useModelForSizes?: boolean;
+    /**
+     * Defaults to true. During initial data rendering, append vertices first and measure their DOM sizes together before layout. This preserves DOM-derived sizes while avoiding a layout read after each append. only exposing this option in case a major regression is detected and the functionality needs to be switched off. and marking internal so it's a need to know.
+     * @internal
+     * @deprecated
+     */
+    batchInitialElementMeasurements?: boolean;
     /**
      * When {@link useModelForSizes} is true, VisuallyJs will write out the model size onto each element rendered. But if you know your node sizes are set via css, or you know the template rendering your vertices writes out the size in an element's style or an SVG element's width/height, you can instruct VisuallyJs not to bother writing out the size to the element itself, by setting this flag to true (the default is false). This can provide a performance boost.
      */

package/types/ui/core/overlay/overlay.d.ts

@@ -70,6 +70,8 @@ export declare abstract class Overlay<EL, O extends OverlayOptions = OverlayOpti
     _visibility: OverlayVisibility;
     visible: boolean;
     location: number;
+    minZoom: number;
+    maxZoom: number;
     events: Record<string, (value: any, event?: any) => any>;
     attributes: Record<string, string>;
     /**
@@ -83,6 +85,7 @@ export declare abstract class Overlay<EL, O extends OverlayOptions = OverlayOpti
     ignoreTypes: boolean;
     constructor(connection: Connection<EL>, p: O);
     abstract updateFrom(opts: O, context: ObjectData): void;
+    setZoomRange(options: OverlayOptions): void;
     abstract isSimpleShape: boolean;
 }
 /**

package/types/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "1.2.8";
+export declare const VERSION = "1.2.10";