@html-graph/html-graph 5.1.0 → 6.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,14 @@ declare interface AddPortRequest {
     readonly direction: number;
 }
 
+export declare interface AnimatedLayoutAlgorithm {
+    calculateNextCoordinates(graph: Graph, dt: number): ReadonlyMap<Identifier, Point>;
+}
+
+export declare interface AnimatedLayoutConfig {
+    readonly algorithm: AnimatedLayoutAlgorithm;
+}
+
 export declare type ArrowRenderer = (params: ArrowRenderingParams) => string;
 
 export declare type ArrowRendererConfig = {
@@ -225,7 +233,9 @@ export declare class CanvasBuilder {
     private connectablePortsConfig;
     private draggableEdgesConfig;
     private virtualScrollConfig;
-    private hasDraggableNode;
+    private layoutConfig;
+    private animatedLayoutConfig;
+    private hasDraggableNodes;
     private hasTransformableViewport;
     private hasNodeResizeReactiveEdges;
     private hasBackground;
@@ -237,6 +247,7 @@ export declare class CanvasBuilder {
     private readonly graph;
     private readonly viewport;
     private readonly window;
+    private readonly animationStaticNodes;
     constructor(element: HTMLElement);
     /**
      * specifies default values for graph entities
@@ -267,7 +278,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 +487,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 +564,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 +707,19 @@ export declare class InteractiveEdgeShape implements StructuredEdgeShape {
     render(params: EdgeRenderParams): void;
 }
 
+export declare interface LayoutAlgorithm {
+    calculateCoordinates(graph: Graph): ReadonlyMap<Identifier, Point>;
+}
+
+export declare type LayoutApplyOn = {
+    type: "topologyChangeTimeout";
+} | EventSubject<void>;
+
+export declare interface LayoutConfig {
+    readonly algorithm: LayoutAlgorithm;
+    readonly applyOn: LayoutApplyOn;
+}
+
 export declare type MarkNodePortRequest = {
     readonly id?: Identifier | undefined;
     readonly element: HTMLElement;