@html-graph/html-graph 5.1.0 → 7.0.0

package/README.md

@@ -2,7 +2,7 @@
   <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/">
+<a target="_blank" href="https://html-graph.github.io">
   <img width="100%" src="https://raw.githubusercontent.com/html-graph/html-graph/master/media/full-demo.gif"/>
 </a>
 

package/dist/html-graph.d.ts

@@ -42,6 +42,27 @@ declare interface AddPortRequest {
     readonly direction: number;
 }
 
+export declare interface AnimatedLayoutAlgorithm {
+    calculateNextCoordinates(graph: Graph, dt: number): ReadonlyMap<Identifier, Point>;
+}
+
+export declare interface AnimatedLayoutConfig {
+    readonly algorithm?: {
+        readonly type: "custom";
+        readonly instance: AnimatedLayoutAlgorithm;
+    } | {
+        readonly type?: "forceDirected";
+        readonly maxTimeDeltaSec?: number;
+        readonly nodeCharge?: number;
+        readonly nodeMass?: number;
+        readonly edgeEquilibriumLength?: number;
+        readonly edgeStiffness?: number;
+        readonly seed?: string;
+        readonly effectiveDistance?: number;
+        readonly convergenceDelta?: number;
+    } | undefined;
+}
+
 export declare type ArrowRenderer = (params: ArrowRenderingParams) => string;
 
 export declare type ArrowRendererConfig = {
@@ -225,18 +246,23 @@ export declare class CanvasBuilder {
     private connectablePortsConfig;
     private draggableEdgesConfig;
     private virtualScrollConfig;
-    private hasDraggableNode;
+    private layoutConfig;
+    private animatedLayoutConfig;
+    private hasDraggableNodes;
     private hasTransformableViewport;
     private hasNodeResizeReactiveEdges;
     private hasBackground;
     private hasUserConnectablePorts;
     private hasUserDraggableEdges;
+    private hasAnimatedLayout;
+    private hasLayout;
     private readonly boxRenderingTrigger;
     private readonly graphStore;
     private readonly viewportStore;
     private readonly graph;
     private readonly viewport;
     private readonly window;
+    private readonly animationStaticNodes;
     constructor(element: HTMLElement);
     /**
      * specifies default values for graph entities
@@ -267,7 +293,18 @@ export declare class CanvasBuilder {
      * enables edge creation by dragging one port to another
      */
     enableUserConnectablePorts(config?: ConnectablePortsConfig): CanvasBuilder;
+    /**
+     * enables edges dragging by dragging one of the adjacent ports
+     */
     enableUserDraggableEdges(config?: DraggableEdgesConfig): CanvasBuilder;
+    /**
+     * enables nodes positioning with specified layout
+     */
+    enableLayout(config?: LayoutConfig): CanvasBuilder;
+    /**
+     * enables animated nodes positioning with specified layout
+     */
+    enableAnimatedLayout(config?: AnimatedLayoutConfig): CanvasBuilder;
     /**
      * builds final canvas
      */
@@ -465,11 +502,22 @@ declare type EdgeShapeConfig = BezierEdgeShapeConfig | StraightEdgeShapeConfig |
 
 declare type EdgeShapeFactory = (edgeId: Identifier) => EdgeShape;
 
+declare interface EventEmitter<T> {
+    emit(payload: T): void;
+}
+
 declare interface EventHandler<T> {
     subscribe(callback: (payload: T) => void): void;
     unsubscribe(callback: (payload: T) => void): void;
 }
 
+export declare class EventSubject<T> implements EventEmitter<T>, EventHandler<T> {
+    private readonly callbacks;
+    subscribe(callback: (payload: T) => void): void;
+    unsubscribe(callback: (payload: T) => void): void;
+    emit(payload: T): void;
+}
+
 export declare class Graph {
     private readonly graphStore;
     readonly onAfterNodeAdded: EventHandler<Identifier>;
@@ -531,9 +579,9 @@ declare class GraphStore {
     private readonly ports;
     private readonly edges;
     private readonly nodesElementsMap;
-    private readonly incomingEdges;
-    private readonly outcomingEdges;
-    private readonly cycleEdges;
+    private readonly portIncomingEdges;
+    private readonly portOutcomingEdges;
+    private readonly portCycleEdges;
     private readonly elementPorts;
     private readonly afterNodeAddedEmitter;
     readonly onAfterNodeAdded: EventHandler<Identifier>;
@@ -674,6 +722,36 @@ export declare class InteractiveEdgeShape implements StructuredEdgeShape {
     render(params: EdgeRenderParams): void;
 }
 
+export declare interface LayoutAlgorithm {
+    calculateCoordinates(graph: Graph): ReadonlyMap<Identifier, Point>;
+}
+
+declare type LayoutAlgorithmConfig = {
+    readonly type: "custom";
+    readonly instance: LayoutAlgorithm;
+} | {
+    readonly type: "forceDirected";
+    readonly dtSec?: number;
+    readonly maxIterations?: number;
+    readonly seed?: string;
+    readonly maxTimeDeltaSec?: number;
+    readonly nodeCharge?: number;
+    readonly nodeMass?: number;
+    readonly edgeEquilibriumLength?: number;
+    readonly edgeStiffness?: number;
+    readonly effectiveDistance?: number;
+    readonly convergenceDelta?: number;
+};
+
+export declare type LayoutApplyOn = {
+    type: "topologyChangeTimeout";
+} | EventSubject<void>;
+
+export declare interface LayoutConfig {
+    readonly algorithm?: LayoutAlgorithmConfig | undefined;
+    readonly applyOn?: LayoutApplyOn | undefined;
+}
+
 export declare type MarkNodePortRequest = {
     readonly id?: Identifier | undefined;
     readonly element: HTMLElement;