@html-graph/html-graph 3.1.0 → 3.2.0

package/README.md

@@ -62,6 +62,7 @@ const canvas = new CanvasBuilder()
   })
   .enableUserDraggableNodes()
   .enableUserTransformableViewport()
+  .enableBackground()
   .build();
 
 canvas

package/dist/html-graph.d.ts

@@ -42,6 +42,15 @@ declare interface AddPortRequest {
     readonly direction: number;
 }
 
+declare interface BackgroundOptions {
+    readonly tileDimensions?: {
+        readonly width?: number;
+        readonly height?: number;
+    };
+    readonly renderer?: DotsRenderer | SVGElement;
+    readonly maxViewportScale?: number;
+}
+
 export declare interface BezierEdgeParams {
     readonly color?: string | undefined;
     readonly width?: number | undefined;
@@ -79,13 +88,19 @@ declare type BezierEdgeShapeConfig = {
     readonly type?: "bezier" | undefined;
 } & BezierEdgeParams;
 
+/**
+ * Responsibility: provides graph rendering API for end user
+ */
 export declare class Canvas {
+    /**
+     * @deprecated access element directly instead
+     */
     readonly element: HTMLElement;
     private readonly graphStore;
     private readonly viewportStore;
     private readonly htmlView;
     /**
-     * provides api for accessing graph model
+     * provides api for accessing model of rendered graph
      */
     readonly graph: Graph;
     /**
@@ -110,9 +125,13 @@ export declare class Canvas {
     private readonly onBeforeClear;
     private readonly onBeforeDestroyEmitter;
     readonly onBeforeDestroy: EventHandler<void>;
-    constructor(element: HTMLElement, graphStore: GraphStore, viewportStore: ViewportStore, htmlView: HtmlView, options: CanvasDefaults);
+    constructor(
+    /**
+     * @deprecated access element directly instead
+     */
+    element: HTMLElement, graphStore: GraphStore, viewportStore: ViewportStore, htmlView: HtmlView, options: CanvasDefaults);
     /**
-     * adds node to graph
+     * adds new node
      */
     addNode(request: AddNodeRequest): Canvas;
     /**
@@ -120,42 +139,42 @@ export declare class Canvas {
      */
     updateNode(nodeId: unknown, request?: UpdateNodeRequest): Canvas;
     /**
-     * removes node from graph
+     * removes specified node
      * all the ports of node get unmarked
      * all the edges adjacent to node get removed
      */
     removeNode(nodeId: unknown): Canvas;
     /**
-     * marks element as port of node
+     * marks specified element as a port for specified node
      */
     markPort(request: MarkPortRequest): Canvas;
     /**
-     * updates port and attached edges
+     * updates port and edges attached to it
      */
     updatePort(portId: unknown, request?: UpdatePortRequest): Canvas;
     /**
-     * ummarks element as port of node
-     * all the edges adjacent to port get removed
+     * unmarks specified port
+     * all the edges adjacent to the port get removed
      */
     unmarkPort(portId: unknown): Canvas;
     /**
-     * adds edge to graph
+     * adds new edge
      */
     addEdge(request: AddEdgeRequest): Canvas;
     /**
-     * updates edge
+     * updates specified edge
      */
     updateEdge(edgeId: unknown, request?: UpdateEdgeRequest): Canvas;
     /**
-     * removes edge from graph
+     * removes specified edge
      */
     removeEdge(edgeId: unknown): Canvas;
     /**
-     * applies transformation for viewport
+     * applies transformation for viewport matrix
      */
     patchViewportMatrix(request: PatchMatrixRequest): Canvas;
     /**
-     * applies transformation for content
+     * applies transformation for content matrix
      */
     patchContentMatrix(request: PatchMatrixRequest): Canvas;
     /**
@@ -170,15 +189,20 @@ export declare class Canvas {
     destroy(): void;
 }
 
+/**
+ * Responsibility: Constructs canvas based on specified configuration
+ */
 export declare class CanvasBuilder {
     private element;
     private canvasDefaults;
     private dragOptions;
     private transformOptions;
+    private backgroundOptions;
     private virtualScrollOptions;
     private hasDraggableNode;
     private hasTransformableViewport;
     private hasResizeReactiveNodes;
+    private hasBackground;
     private boxRenderingTrigger;
     setElement(element: HTMLElement): CanvasBuilder;
     /**
@@ -202,10 +226,15 @@ export declare class CanvasBuilder {
      */
     enableBoxAreaRendering(trigger: EventSubject<RenderingBox>): CanvasBuilder;
     enableVirtualScroll(options: VirtualScrollOptions): CanvasBuilder;
+    enableBackground(options?: BackgroundOptions): CanvasBuilder;
     /**
      * builds final canvas
      */
     build(): Canvas;
+    /**
+     * @deprecated
+     * CanvasBuilder should be single use object
+     */
     private reset;
 }
 
@@ -254,6 +283,11 @@ declare type ConstantPriority = number;
 
 declare type CustomPriority = PriorityFn;
 
+declare interface DotsRenderer {
+    readonly radius?: number;
+    readonly color?: string;
+}
+
 export declare interface DragOptions {
     readonly moveOnTop?: boolean;
     readonly mouse?: {
@@ -290,6 +324,9 @@ export declare interface EdgeRenderPort {
     readonly nodeId: unknown;
 }
 
+/**
+ * Responsibility: Rendering edge via SVG
+ */
 export declare interface EdgeShape {
     readonly svg: SVGSVGElement;
     render(params: EdgeRenderParams): void;
@@ -299,15 +336,24 @@ declare type EdgeShapeConfig = BezierEdgeShapeConfig | StraightEdgeShapeConfig |
 
 declare type EdgeShapeFactory = () => EdgeShape;
 
+/**
+ * Responsibility: Provides a way to trigger events
+ */
 export declare interface EventEmitter<T> {
     emit(payload: T): void;
 }
 
+/**
+ * Responsibility: Provides a way to handle events
+ */
 export declare interface EventHandler<T> {
     subscribe(callback: (payload: T) => void): void;
     unsubscribe(callback: (payload: T) => void): void;
 }
 
+/**
+ * Responsibility: Connects events and event handlers
+ */
 export declare class EventSubject<T> implements EventEmitter<T>, EventHandler<T> {
     private readonly callbacks;
     subscribe(callback: (payload: T) => void): void;
@@ -316,7 +362,7 @@ export declare class EventSubject<T> implements EventEmitter<T>, EventHandler<T>
 }
 
 /**
- * This entity is responsible for providing access to end user in a safe way
+ * Responsibility: Provides access to graph model for end user
  */
 export declare class Graph {
     private readonly graphStore;
@@ -372,14 +418,14 @@ export declare interface GraphPort {
 }
 
 /**
- * This entity is responsible for storing state of graph
+ * Responsibility: Stores stae of graph
  */
 declare class GraphStore {
     private readonly nodes;
     private readonly ports;
     private readonly edges;
-    private readonly incommingEdges;
-    private readonly outcommingEdges;
+    private readonly incomingEdges;
+    private readonly outcomingEdges;
     private readonly cycleEdges;
     private readonly afterNodeAddedEmitter;
     readonly onAfterNodeAdded: EventHandler<unknown>;
@@ -474,10 +520,17 @@ declare type HorizontalEdgeShapeConfig = {
     readonly type: "horizontal";
 } & HorizontalEdgeParams;
 
+/**
+ * Responsibility: Library specific error to throw when unexpected action
+ * occured
+ */
 export declare class HtmlGraphError extends Error {
     readonly name = "HtmlGraphError";
 }
 
+/**
+ * Responsibility: Provides access to DOM modifications
+ */
 declare interface HtmlView {
     attachNode(nodeId: unknown): void;
     detachNode(nodeId: unknown): void;
@@ -535,6 +588,9 @@ declare interface PatchTransformRequest {
     readonly y?: number;
 }
 
+/**
+ * Responsibility: Specifies point coordinates
+ */
 export declare interface Point {
     readonly x: number;
     readonly y: number;
@@ -548,6 +604,9 @@ declare interface PortPayload {
 
 declare type Priority = ConstantPriority | IncrementalPriority | CustomPriority;
 
+/**
+ * Responsibility: Specifies how to determine Z-index of an entity in DOM
+ */
 export declare type PriorityFn = () => number;
 
 export declare interface RenderingBox {
@@ -735,7 +794,7 @@ declare type VerticalEdgeShapeConfig = {
 } & VerticalEdgeParams;
 
 /**
- * This entity is responsible for providing viewport API
+ * Responsibility: Provides access to viewport state for end user
  */
 export declare class Viewport {
     private readonly transformer;
@@ -747,7 +806,7 @@ export declare class Viewport {
 }
 
 /**
- * This entity is responsible for storing viewport transformation
+ * Responsibility: Stores viewport transformation state
  */
 declare class ViewportStore {
     private viewportMatrix;