@html-graph/html-graph 4.1.0 → 5.0.1

package/README.md

@@ -1,17 +1,11 @@
-<h1>
-  <img src="/media/favicon.png" alt="HTMLGraph" width="25" height="25"/> HTMLGraph
-</h1>
-
-### Graph visualization library that enables rich nodes customization using HTML
+<p align="center">
+  <img src="/media/logo-label.svg" alt="HTMLGraph" width="520" height="100"/>
+</p>
 
 <a target="_blank" href="https://html-graph.github.io/use-cases/advanced-demo/">
   <img width="100%" src="https://raw.githubusercontent.com/html-graph/html-graph/master/media/full-demo.gif"/>
 </a>
 
-## Getting started:
-
-```
-npm i @html-graph/html-graph
-```
+### Graph visualization library that enables rich nodes customization using HTML
 
 Visit the <a target="_blank" href="https://html-graph.github.io">DOCUMENTATION</a> for examples and API reference.

package/dist/html-graph.d.ts

@@ -29,8 +29,8 @@ export declare interface AddNodeRequest {
 declare interface AddNodeRequest_2 {
     readonly id: Identifier;
     readonly element: HTMLElement;
-    readonly x: number;
-    readonly y: number;
+    readonly x: number | null;
+    readonly y: number | null;
     readonly centerFn: CenterFn;
     readonly priority: number;
 }
@@ -42,6 +42,27 @@ declare interface AddPortRequest {
     readonly direction: number;
 }
 
+export declare type ArrowRenderer = (params: ArrowRenderingParams) => string;
+
+export declare type ArrowRendererConfig = {
+    readonly type?: "wedge";
+    readonly radius?: number | undefined;
+    readonly smallRadius?: number | undefined;
+    readonly angle?: number | undefined;
+} | {
+    readonly type: "triangle";
+    readonly radius?: number | undefined;
+} | {
+    readonly type: "arc";
+    readonly radius?: number | undefined;
+} | ArrowRenderer;
+
+export declare interface ArrowRenderingParams {
+    readonly direction: Point;
+    readonly shift: Point;
+    readonly arrowLength: number;
+}
+
 export declare interface BackgroundConfig {
     readonly tileDimensions?: {
         readonly width?: number;
@@ -55,7 +76,7 @@ export declare interface BezierEdgeParams {
     readonly color?: string | undefined;
     readonly width?: number | undefined;
     readonly arrowLength?: number | undefined;
-    readonly arrowWidth?: number | undefined;
+    readonly arrowRenderer?: ArrowRendererConfig | undefined;
     readonly curvature?: number | undefined;
     readonly hasSourceArrow?: boolean | undefined;
     readonly hasTargetArrow?: boolean | undefined;
@@ -73,7 +94,6 @@ export declare class BezierEdgeShape implements StructuredEdgeShape {
     readonly targetArrow: SVGPathElement | null;
     readonly onAfterRender: EventHandler<StructuredEdgeRenderModel>;
     private readonly arrowLength;
-    private readonly arrowWidth;
     private readonly curvature;
     private readonly portCycleRadius;
     private readonly portCycleSmallRadius;
@@ -94,10 +114,6 @@ declare type BezierEdgeShapeConfig = {
 } & BezierEdgeParams;
 
 export declare class Canvas {
-    private readonly graphStore;
-    private readonly viewportStore;
-    private readonly htmlView;
-    private readonly params;
     /**
      * provides api for accessing model of rendered graph
      */
@@ -106,6 +122,10 @@ export declare class Canvas {
      * provides api for accessing viewport state
      */
     readonly viewport: Viewport;
+    private readonly graphStore;
+    private readonly viewportStore;
+    private readonly htmlView;
+    private readonly params;
     private readonly nodeIdGenerator;
     private readonly portIdGenerator;
     private readonly edgeIdGenerator;
@@ -127,7 +147,15 @@ export declare class Canvas {
      * emits event just before destruction of canvas
      */
     readonly onBeforeDestroy: EventHandler<void>;
-    constructor(graphStore: GraphStore, viewportStore: ViewportStore, htmlView: HtmlView, params: CanvasParams);
+    constructor(
+    /**
+     * provides api for accessing model of rendered graph
+     */
+    graph: Graph, 
+    /**
+     * provides api for accessing viewport state
+     */
+    viewport: Viewport, graphStore: GraphStore, viewportStore: ViewportStore, htmlView: HtmlView, params: CanvasParams);
     /**
      * adds new node
      */
@@ -167,6 +195,11 @@ export declare class Canvas {
      * removes specified edge
      */
     removeEdge(edgeId: Identifier): Canvas;
+    /**
+     * clears canvas from nodes and edges
+     * canvas gets rolled back to initial state and can be reused
+     */
+    clear(): Canvas;
     /**
      * applies transformation for viewport matrix
      */
@@ -175,11 +208,6 @@ export declare class Canvas {
      * applies transformation for content matrix
      */
     patchContentMatrix(request: PatchMatrixRequest): Canvas;
-    /**
-     * clears canvas from nodes and edges
-     * canvas gets rolled back to initial state and can be reused
-     */
-    clear(): Canvas;
     /**
      * destroys canvas
      * canvas element gets rolled back to initial state, and can not be reused
@@ -206,6 +234,8 @@ export declare class CanvasBuilder {
     private readonly boxRenderingTrigger;
     private readonly graphStore;
     private readonly viewportStore;
+    private readonly graph;
+    private readonly viewport;
     private readonly window;
     constructor(element: HTMLElement);
     /**
@@ -342,7 +372,7 @@ export declare interface DirectEdgeParams {
     readonly color?: string | undefined;
     readonly width?: number | undefined;
     readonly arrowLength?: number | undefined;
-    readonly arrowWidth?: number | undefined;
+    readonly arrowRenderer?: ArrowRendererConfig | undefined;
     readonly hasSourceArrow?: boolean | undefined;
     readonly hasTargetArrow?: boolean | undefined;
     readonly sourceOffset?: number | undefined;
@@ -358,11 +388,11 @@ export declare class DirectEdgeShape implements StructuredEdgeShape {
     private readonly color;
     private readonly width;
     private readonly arrowLength;
-    private readonly arrowWidth;
     private readonly sourceOffset;
     private readonly targetOffset;
     readonly onAfterRender: EventHandler<StructuredEdgeRenderModel>;
     private readonly afterRenderEmitter;
+    private readonly arrowRenderer;
     constructor(params?: DirectEdgeParams);
     render(params: EdgeRenderParams): void;
 }
@@ -484,8 +514,8 @@ export declare interface GraphEdge {
 
 export declare interface GraphNode {
     readonly element: HTMLElement;
-    readonly x: number;
-    readonly y: number;
+    readonly x: number | null;
+    readonly y: number | null;
     readonly centerFn: CenterFn;
     readonly priority: number;
 }
@@ -567,7 +597,7 @@ export declare interface HorizontalEdgeParams {
     readonly color?: string | undefined;
     readonly width?: number | undefined;
     readonly arrowLength?: number | undefined;
-    readonly arrowWidth?: number | undefined;
+    readonly arrowRenderer?: ArrowRendererConfig | undefined;
     readonly arrowOffset?: number | undefined;
     readonly hasSourceArrow?: boolean | undefined;
     readonly hasTargetArrow?: boolean | undefined;
@@ -584,7 +614,6 @@ export declare class HorizontalEdgeShape implements StructuredEdgeShape {
     readonly targetArrow: SVGPathElement | null;
     readonly onAfterRender: EventHandler<StructuredEdgeRenderModel>;
     private readonly arrowLength;
-    private readonly arrowWidth;
     private readonly arrowOffset;
     private readonly roundness;
     private readonly cycleSquareSide;
@@ -608,13 +637,13 @@ declare interface HtmlView {
     detachNode(nodeId: Identifier): void;
     attachEdge(edgeId: Identifier): void;
     detachEdge(edgeId: Identifier): void;
-    clear(): void;
-    destroy(): void;
     updateNodePosition(nodeId: Identifier): void;
     updateNodePriority(nodeId: Identifier): void;
     updateEdgeShape(edgeId: Identifier): void;
     renderEdge(edgeId: Identifier): void;
     updateEdgePriority(edgeId: Identifier): void;
+    clear(): void;
+    destroy(): void;
 }
 
 export declare type Identifier = NonNullable<unknown>;
@@ -718,8 +747,8 @@ declare interface StoreEdge {
 declare interface StoreNode {
     readonly element: HTMLElement;
     readonly payload: {
-        x: number;
-        y: number;
+        x: number | null;
+        y: number | null;
         centerFn: CenterFn;
         priority: number;
     };
@@ -738,8 +767,8 @@ export declare interface StraightEdgeParams {
     readonly color?: string | undefined;
     readonly width?: number | undefined;
     readonly arrowLength?: number | undefined;
-    readonly arrowWidth?: number | undefined;
     readonly arrowOffset?: number | undefined;
+    readonly arrowRenderer?: ArrowRendererConfig | undefined;
     readonly hasSourceArrow?: boolean | undefined;
     readonly hasTargetArrow?: boolean | undefined;
     readonly cycleSquareSide?: number | undefined;
@@ -756,7 +785,6 @@ export declare class StraightEdgeShape implements StructuredEdgeShape {
     readonly targetArrow: SVGPathElement | null;
     readonly onAfterRender: EventHandler<StructuredEdgeRenderModel>;
     private readonly arrowLength;
-    private readonly arrowWidth;
     private readonly arrowOffset;
     private readonly roundness;
     private readonly cycleSquareSide;
@@ -863,8 +891,8 @@ export declare interface VerticalEdgeParams {
     readonly color?: string | undefined;
     readonly width?: number | undefined;
     readonly arrowLength?: number | undefined;
-    readonly arrowWidth?: number | undefined;
     readonly arrowOffset?: number | undefined;
+    readonly arrowRenderer?: ArrowRendererConfig | undefined;
     readonly hasSourceArrow?: boolean | undefined;
     readonly hasTargetArrow?: boolean | undefined;
     readonly cycleSquareSide?: number | undefined;
@@ -880,7 +908,6 @@ export declare class VerticalEdgeShape implements StructuredEdgeShape {
     readonly targetArrow: SVGPathElement | null;
     readonly onAfterRender: EventHandler<StructuredEdgeRenderModel>;
     private readonly arrowLength;
-    private readonly arrowWidth;
     private readonly arrowOffset;
     private readonly roundness;
     private readonly cycleSquareSide;