@html-graph/html-graph 2.0.1 → 2.2.0

package/README.md

@@ -50,7 +50,7 @@ function createNode({ name, x, y, frontPortId, backPortId }) {
 }
 
 const canvas = new CanvasBuilder()
-  .setOptions({
+  .setDefaults({
     edges: {
       shape: {
         hasTargetArrow: true,

package/dist/html-graph.d.ts

@@ -7,7 +7,15 @@ export declare interface AddEdgeRequest {
 }
 
 declare interface AddEdgeRequest_2 {
-    readonly edgeId: unknown;
+    readonly id: unknown;
+    readonly from: unknown;
+    readonly to: unknown;
+    readonly shape: EdgeShape;
+    readonly priority: number;
+}
+
+declare interface AddEdgeRequest_3 {
+    readonly id: unknown;
     readonly from: unknown;
     readonly to: unknown;
     readonly shape: EdgeShape;
@@ -27,7 +35,16 @@ export declare interface AddNodeRequest {
 }
 
 declare interface AddNodeRequest_2 {
-    readonly nodeId: unknown;
+    readonly id: unknown;
+    readonly element: HTMLElement;
+    readonly x: number;
+    readonly y: number;
+    readonly centerFn: CenterFn;
+    readonly priority: number;
+}
+
+declare interface AddNodeRequest_3 {
+    readonly id: unknown;
     readonly element: HTMLElement;
     readonly x: number;
     readonly y: number;
@@ -36,7 +53,7 @@ declare interface AddNodeRequest_2 {
 }
 
 declare interface AddPortRequest {
-    readonly portId: unknown;
+    readonly id: unknown;
     readonly nodeId: unknown;
     readonly element: HTMLElement;
     readonly direction: number;
@@ -79,7 +96,12 @@ declare type BezierEdgeShapeConfig = {
     readonly type?: "bezier" | undefined;
 } & BezierEdgeParams;
 
-export declare interface Canvas {
+export declare class Canvas {
+    private readonly controller;
+    private readonly nodeIdGenerator;
+    private readonly portIdGenerator;
+    private readonly edgeIdGenerator;
+    private readonly defaults;
     /**
      * provides api for accessing graph model
      */
@@ -88,12 +110,22 @@ export declare interface Canvas {
      * provides api for accessing viewport state
      */
     readonly viewport: Viewport;
+    constructor(controller: CanvasController, options: CanvasDefaults);
+    /**
+     * attaches canvas to given element
+     * detaches element first when canvas is attached
+     */
+    attach(element: HTMLElement): Canvas;
+    /**
+     * detaches canvas from element when attached
+     */
+    detach(): Canvas;
     /**
      * adds node to graph
      */
-    addNode(node: AddNodeRequest): Canvas;
+    addNode(request: AddNodeRequest): Canvas;
     /**
-     * updates node absolute coordinates
+     * updates node parameters
      */
     updateNode(nodeId: unknown, request?: UpdateNodeRequest): Canvas;
     /**
@@ -105,7 +137,7 @@ export declare interface Canvas {
     /**
      * marks element as port of node
      */
-    markPort(port: MarkPortRequest): Canvas;
+    markPort(request: MarkPortRequest): Canvas;
     /**
      * updates port and attached edges
      */
@@ -118,7 +150,7 @@ export declare interface Canvas {
     /**
      * adds edge to graph
      */
-    addEdge(edge: AddEdgeRequest): Canvas;
+    addEdge(request: AddEdgeRequest): Canvas;
     /**
      * updates edge
      */
@@ -136,29 +168,19 @@ export declare interface Canvas {
      */
     patchContentMatrix(request: PatchMatrixRequest): Canvas;
     /**
-     * attaches canvas to given element
-     */
-    attach(element: HTMLElement): Canvas;
-    /**
-     * detaches canvas from element
-     */
-    detach(): Canvas;
-    /**
-     * clears graph
-     * graph gets rolled back to initial state
-     * canvas can be reused
+     * 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
-     * canvas can not be reused
+     * canvas element gets rolled back to initial state, and can not be reused
      */
     destroy(): void;
 }
 
 export declare class CanvasBuilder {
-    private coreOptions;
+    private canvasDefaults;
     private dragOptions;
     private transformOptions;
     private virtualScrollOptions;
@@ -167,11 +189,16 @@ export declare class CanvasBuilder {
     private hasResizeReactiveNodes;
     private boxRenderingTrigger;
     /**
-     * specifies options for fundamental aspects of visualization
+     * specifies default values for graph entities
+     */
+    setDefaults(defaults: CanvasDefaults): CanvasBuilder;
+    /**
+     * @deprecated
+     * use setDefaults instead
      */
-    setOptions(options: CoreOptions): CanvasBuilder;
+    setOptions(options: CanvasDefaults): CanvasBuilder;
     /**
-     * enables nodes draggable bu user
+     * enables nodes draggable by user
      */
     enableUserDraggableNodes(options?: DragOptions): CanvasBuilder;
     /**
@@ -194,11 +221,27 @@ export declare class CanvasBuilder {
     private reset;
 }
 
-export declare type CenterFn = (width: number, height: number) => Point;
-
-declare type ConstantPriority = number;
+declare interface CanvasController {
+    readonly graph: Graph;
+    readonly viewport: Viewport;
+    attach(element: HTMLElement): void;
+    detach(): void;
+    addNode(node: AddNodeRequest_3): void;
+    updateNode(nodeId: unknown, request: UpdateNodeRequest_2): void;
+    removeNode(nodeId: unknown): void;
+    markPort(port: MarkPortRequest_2): void;
+    updatePort(portId: unknown, request: UpdatePortRequest_2): void;
+    unmarkPort(portId: unknown): void;
+    addEdge(edge: AddEdgeRequest_3): void;
+    updateEdge(edgeId: unknown, request: UpdateEdgeRequest_2): void;
+    removeEdge(edgeId: unknown): void;
+    patchViewportMatrix(request: PatchMatrixRequest_2): void;
+    patchContentMatrix(request: PatchMatrixRequest_2): void;
+    clear(): void;
+    destroy(): void;
+}
 
-export declare interface CoreOptions {
+declare interface CanvasDefaults {
     /**
      * nodes related behavior
      */
@@ -236,6 +279,12 @@ export declare interface CoreOptions {
         readonly priority?: Priority;
     };
 }
+export { CanvasDefaults }
+export { CanvasDefaults as CoreOptions }
+
+export declare type CenterFn = (width: number, height: number) => Point;
+
+declare type ConstantPriority = number;
 
 declare type CustomPriority = PriorityFn;
 
@@ -311,6 +360,10 @@ export declare class Graph {
     getPort(portId: unknown): GraphPort | null;
     getAllPortIds(): readonly unknown[];
     getNodePortIds(nodeId: unknown): readonly unknown[] | null;
+    /**
+     * @deprecated
+     * use graph.getPort()?.nodeId ?? null instead
+     */
     getPortNodeId(portId: unknown): unknown | null;
     getAllEdgeIds(): readonly unknown[];
     getEdge(edgeId: unknown): GraphEdge | null;
@@ -349,8 +402,6 @@ export declare interface GraphPort {
 declare class GraphStore {
     private readonly nodes;
     private readonly ports;
-    private readonly nodePorts;
-    private readonly portNodeId;
     private readonly edges;
     private readonly incommingEdges;
     private readonly outcommingEdges;
@@ -363,7 +414,6 @@ declare class GraphStore {
     getPort(portId: unknown): PortPayload | undefined;
     getAllPortIds(): readonly unknown[];
     getNodePortIds(nodeId: unknown): readonly unknown[] | undefined;
-    getPortNodeId(portId: unknown): unknown | undefined;
     removePort(portId: unknown): void;
     addEdge(request: AddEdgeRequest_2): void;
     updateEdgeFrom(edgeId: unknown, from: unknown): void;
@@ -438,6 +488,13 @@ export declare interface MarkPortRequest {
     readonly direction?: number;
 }
 
+declare interface MarkPortRequest_2 {
+    readonly id: unknown;
+    readonly element: HTMLElement;
+    readonly nodeId: unknown;
+    readonly direction: number;
+}
+
 export declare interface NodeDragPayload {
     readonly nodeId: unknown;
     readonly element: HTMLElement;
@@ -446,11 +503,12 @@ export declare interface NodeDragPayload {
 }
 
 declare interface NodePayload {
-    element: HTMLElement;
+    readonly element: HTMLElement;
     x: number;
     y: number;
     centerFn: CenterFn;
     priority: number;
+    readonly ports: Map<unknown, HTMLElement>;
 }
 
 export declare interface PatchMatrixRequest {
@@ -459,6 +517,12 @@ export declare interface PatchMatrixRequest {
     readonly y?: number | undefined;
 }
 
+declare interface PatchMatrixRequest_2 {
+    readonly scale?: number | undefined;
+    readonly x?: number | undefined;
+    readonly y?: number | undefined;
+}
+
 declare interface PatchTransformRequest {
     readonly scale?: number;
     readonly x?: number;
@@ -473,6 +537,7 @@ export declare interface Point {
 declare interface PortPayload {
     readonly element: HTMLElement;
     direction: number;
+    readonly nodeId: unknown;
 }
 
 declare type Priority = ConstantPriority | IncrementalPriority | CustomPriority;
@@ -597,6 +662,13 @@ export declare interface UpdateEdgeRequest {
     readonly priority?: number | undefined;
 }
 
+declare interface UpdateEdgeRequest_2 {
+    readonly from?: unknown | undefined;
+    readonly to?: unknown | undefined;
+    readonly shape?: EdgeShape | undefined;
+    readonly priority?: number | undefined;
+}
+
 export declare interface UpdateNodeRequest {
     readonly x?: number | undefined;
     readonly y?: number | undefined;
@@ -604,10 +676,21 @@ export declare interface UpdateNodeRequest {
     readonly centerFn?: CenterFn | undefined;
 }
 
+declare interface UpdateNodeRequest_2 {
+    readonly x?: number | undefined;
+    readonly y?: number | undefined;
+    readonly priority?: number | undefined;
+    readonly centerFn?: CenterFn | undefined;
+}
+
 export declare interface UpdatePortRequest {
     readonly direction?: number;
 }
 
+declare interface UpdatePortRequest_2 {
+    readonly direction?: number;
+}
+
 export declare interface VerticalEdgeParams {
     readonly color?: string | undefined;
     readonly width?: number | undefined;
@@ -651,7 +734,7 @@ declare type VerticalEdgeShapeConfig = {
  */
 export declare class Viewport {
     private readonly transformer;
-    constructor(transformer: ViewportTransformer);
+    constructor(transformer: ViewportStore);
     getViewportMatrix(): TransformState;
     getContentMatrix(): TransformState;
 }
@@ -659,7 +742,7 @@ export declare class Viewport {
 /**
  * This entity is responsible for storing viewport transformation
  */
-declare class ViewportTransformer {
+declare class ViewportStore {
     private viewportMatrix;
     private contentMatrix;
     private readonly emitter;