@html-graph/html-graph 1.2.0 → 2.0.0

package/dist/main.d.ts

@@ -75,45 +75,19 @@ export declare class BezierEdgeShape implements EdgeShape {
     render(params: EdgeRenderParams): void;
 }
 
-declare interface BezierEdgeShape_2 {
+declare type BezierEdgeShapeConfig = {
     readonly type?: "bezier" | undefined;
-    readonly color?: string | undefined;
-    readonly width?: number | undefined;
-    readonly curvature?: number | undefined;
-    readonly arrowLength?: number | undefined;
-    readonly arrowWidth?: number | undefined;
-    readonly hasSourceArrow?: boolean | undefined;
-    readonly hasTargetArrow?: boolean | undefined;
-    readonly cycleRadius?: number | undefined;
-    readonly smallCycleRadius?: number | undefined;
-    readonly detourDistance?: number | undefined;
-    readonly detourDirection?: number | undefined;
-}
-
-declare interface BezierEdgeShape_3 {
-    readonly type?: "bezier" | undefined;
-    readonly color?: string | undefined;
-    readonly width?: number | undefined;
-    readonly curvature?: number | undefined;
-    readonly arrowLength?: number | undefined;
-    readonly arrowWidth?: number | undefined;
-    readonly hasSourceArrow?: boolean | undefined;
-    readonly hasTargetArrow?: boolean | undefined;
-    readonly cycleRadius?: number | undefined;
-    readonly smallCycleRadius?: number | undefined;
-    readonly detourDistance?: number | undefined;
-    readonly detourDirection?: number | undefined;
-}
+} & BezierEdgeParams;
 
 export declare interface Canvas {
     /**
      * provides api for accessing graph model
      */
-    readonly model: PublicGraphStore;
+    readonly graph: Graph;
     /**
-     * provides api for canvas transformation
+     * provides api for accessing viewport state
      */
-    readonly transformation: PublicViewportTransformer;
+    readonly viewport: Viewport;
     /**
      * adds node to graph
      */
@@ -183,10 +157,11 @@ export declare interface Canvas {
     destroy(): void;
 }
 
-declare class CanvasBuilder {
+export declare class CanvasBuilder {
     private coreOptions;
     private dragOptions;
     private transformOptions;
+    private virtualScrollOptions;
     private hasDraggableNode;
     private hasTransformableViewport;
     private hasResizeReactiveNodes;
@@ -198,76 +173,31 @@ declare class CanvasBuilder {
     /**
      * enables nodes draggable bu user
      */
-    setUserDraggableNodes(options?: DragOptions): CanvasBuilder;
-    /**
-     * @deprecated
-     * use setUserTransformableViewport instead
-     */
-    setUserTransformableCanvas(options?: TransformOptions): CanvasBuilder;
+    enableUserDraggableNodes(options?: DragOptions): CanvasBuilder;
     /**
      * enables viewport transformable by user
      */
-    setUserTransformableViewport(options?: TransformOptions): CanvasBuilder;
+    enableUserTransformableViewport(options?: TransformOptions): CanvasBuilder;
     /**
      * enables automatic edges update on node resize
      */
-    setResizeReactiveNodes(): CanvasBuilder;
+    enableResizeReactiveNodes(): CanvasBuilder;
     /**
      * sets emitter for rendering graph inside bounded area
      */
-    setBoxRenderingTrigger(trigger: EventSubject<RenderingBox>): CanvasBuilder;
+    enableBoxAreaRendering(trigger: EventSubject<RenderingBox>): CanvasBuilder;
+    enableVirtualScroll(options: VirtualScrollOptions): CanvasBuilder;
     /**
      * builds final canvas
      */
     build(): Canvas;
-}
-export { CanvasBuilder }
-export { CanvasBuilder as HtmlGraphBuilder }
-
-/**
- * @deprecated
- */
-export declare class CanvasCore implements Canvas {
-    readonly transformation: PublicViewportTransformer;
-    readonly model: PublicGraphStore;
-    private readonly internalTransformation;
-    private readonly internalModel;
-    private readonly graphStoreController;
-    private readonly htmlView;
-    private readonly onAfterNodeAdded;
-    private readonly onAfterEdgeAdded;
-    private readonly onAfterEdgeShapeUpdated;
-    private readonly onAfterEdgePriorityUpdated;
-    private readonly onAfterEdgeUpdated;
-    private readonly onAfterPortUpdated;
-    private readonly onAfterNodePriorityUpdated;
-    private readonly onAfterNodeUpdated;
-    private readonly onBeforeEdgeRemoved;
-    private readonly onBeforeNodeRemoved;
-    constructor(apiOptions?: CoreOptions_2);
-    attach(element: HTMLElement): CanvasCore;
-    detach(): CanvasCore;
-    addNode(request: AddNodeRequest): CanvasCore;
-    updateNode(nodeId: unknown, request?: UpdateNodeRequest): CanvasCore;
-    removeNode(nodeId: unknown): CanvasCore;
-    addEdge(request: AddEdgeRequest): CanvasCore;
-    updateEdge(edgeId: unknown, request?: UpdateEdgeRequest): CanvasCore;
-    removeEdge(edgeId: unknown): CanvasCore;
-    markPort(request: MarkPortRequest): CanvasCore;
-    updatePort(portId: string, request?: UpdatePortRequest): CanvasCore;
-    unmarkPort(portId: string): CanvasCore;
-    patchViewportMatrix(request: PatchMatrixRequest): CanvasCore;
-    patchContentMatrix(request: PatchMatrixRequest): CanvasCore;
-    clear(): CanvasCore;
-    destroy(): void;
+    private reset;
 }
 
 export declare type CenterFn = (width: number, height: number) => Point;
 
 declare type ConstantPriority = number;
 
-declare type ConstantPriority_2 = number;
-
 export declare interface CoreOptions {
     /**
      * nodes related behavior
@@ -299,7 +229,7 @@ export declare interface CoreOptions {
         /**
          * specifies default controller
          */
-        readonly shape?: EdgeShape_2;
+        readonly shape?: EdgeShapeConfig;
         /**
          * specifies default z-index value
          */
@@ -307,49 +237,8 @@ export declare interface CoreOptions {
     };
 }
 
-declare interface CoreOptions_2 {
-    /**
-     * nodes related behavior
-     */
-    readonly nodes?: {
-        /**
-         * specifies how to determine center of node
-         * center of nodes specified in addNode method by x and y
-         */
-        readonly centerFn?: CenterFn;
-        /**
-         * specifies default z-index value
-         */
-        readonly priority?: Priority_2;
-    };
-    /**
-     * ports related behavior
-     */
-    readonly ports?: {
-        /**
-         * specifies default direction of port
-         */
-        readonly direction?: number;
-    };
-    /**
-     *edges related behavior
-     */
-    readonly edges?: {
-        /**
-         * specifies default controller
-         */
-        readonly shape?: EdgeShape_3;
-        /**
-         * specifies default z-index value
-         */
-        readonly priority?: Priority_2;
-    };
-}
-
 declare type CustomPriority = PriorityFn;
 
-declare type CustomPriority_2 = PriorityFn;
-
 export declare interface DragOptions {
     readonly moveOnTop?: boolean;
     readonly mouse?: {
@@ -391,14 +280,10 @@ export declare interface EdgeShape {
     render(params: EdgeRenderParams): void;
 }
 
-declare type EdgeShape_2 = BezierEdgeShape_2 | StraightEdgeShape_2 | HorizontalEdgeShape_2 | VerticalEdgeShape_2 | EdgeShapeFactory;
-
-declare type EdgeShape_3 = BezierEdgeShape_3 | StraightEdgeShape_3 | HorizontalEdgeShape_3 | VerticalEdgeShape_3 | EdgeShapeFactory_2;
+declare type EdgeShapeConfig = BezierEdgeShapeConfig | StraightEdgeShapeConfig | HorizontalEdgeShapeConfig | VerticalEdgeShapeConfig | EdgeShapeFactory;
 
 declare type EdgeShapeFactory = () => EdgeShape;
 
-declare type EdgeShapeFactory_2 = () => EdgeShape;
-
 declare interface EventEmitter<T> {
     emit(payload: T): void;
 }
@@ -415,6 +300,30 @@ export declare class EventSubject<T> implements EventEmitter<T>, EventHandler<T>
     emit(payload: T): void;
 }
 
+/**
+ * This entity is responsible for providing access to end user in a safe way
+ */
+export declare class Graph {
+    private readonly graphStore;
+    constructor(graphStore: GraphStore);
+    getNode(nodeId: unknown): GraphNode | null;
+    getAllNodeIds(): readonly unknown[];
+    getPort(portId: unknown): GraphPort | null;
+    getAllPortIds(): readonly unknown[];
+    getNodePortIds(nodeId: unknown): readonly unknown[] | null;
+    getPortNodeId(portId: unknown): unknown | null;
+    getAllEdgeIds(): readonly unknown[];
+    getEdge(edgeId: unknown): GraphEdge | null;
+    getPortIncomingEdgeIds(portId: unknown): readonly unknown[] | null;
+    getPortOutcomingEdgeIds(portId: unknown): readonly unknown[] | null;
+    getPortCycleEdgeIds(portId: unknown): readonly unknown[] | null;
+    getPortAdjacentEdgeIds(portId: unknown): readonly unknown[] | null;
+    getNodeIncomingEdgeIds(nodeId: unknown): readonly unknown[] | null;
+    getNodeOutcomingEdgeIds(nodeId: unknown): readonly unknown[] | null;
+    getNodeCycleEdgeIds(nodeId: unknown): readonly unknown[] | null;
+    getNodeAdjacentEdgeIds(nodeId: unknown): readonly unknown[] | null;
+}
+
 export declare interface GraphEdge {
     readonly from: unknown;
     readonly to: unknown;
@@ -506,35 +415,9 @@ export declare class HorizontalEdgeShape implements EdgeShape {
     render(params: EdgeRenderParams): void;
 }
 
-declare interface HorizontalEdgeShape_2 {
-    readonly type: "horizontal";
-    readonly color?: string | undefined;
-    readonly width?: number | undefined;
-    readonly arrowLength?: number | undefined;
-    readonly arrowWidth?: number | undefined;
-    readonly arrowOffset?: number | undefined;
-    readonly hasSourceArrow?: boolean | undefined;
-    readonly hasTargetArrow?: boolean | undefined;
-    readonly cycleSquareSide?: number | undefined;
-    readonly roundness?: number | undefined;
-    readonly detourDistance?: number | undefined;
-    readonly detourDirection?: number | undefined;
-}
-
-declare interface HorizontalEdgeShape_3 {
+declare type HorizontalEdgeShapeConfig = {
     readonly type: "horizontal";
-    readonly color?: string | undefined;
-    readonly width?: number | undefined;
-    readonly arrowLength?: number | undefined;
-    readonly arrowWidth?: number | undefined;
-    readonly arrowOffset?: number | undefined;
-    readonly hasSourceArrow?: boolean | undefined;
-    readonly hasTargetArrow?: boolean | undefined;
-    readonly cycleSquareSide?: number | undefined;
-    readonly roundness?: number | undefined;
-    readonly detourDistance?: number | undefined;
-    readonly detourDirection?: number | undefined;
-}
+} & HorizontalEdgeParams;
 
 export declare class HtmlGraphError extends Error {
     readonly name = "HtmlGraphError";
@@ -542,8 +425,6 @@ export declare class HtmlGraphError extends Error {
 
 declare type IncrementalPriority = "incremental";
 
-declare type IncrementalPriority_2 = "incremental";
-
 export declare type MarkNodePortRequest = {
     readonly id?: unknown | undefined;
     readonly element: HTMLElement;
@@ -594,47 +475,10 @@ declare interface PortPayload {
     direction: number;
 }
 
-declare type Priority = ConstantPriority | IncrementalPriority | SharedIncrementalPriority | CustomPriority;
-
-declare type Priority_2 = ConstantPriority_2 | IncrementalPriority_2 | SharedIncrementalPriority_2 | CustomPriority_2;
+declare type Priority = ConstantPriority | IncrementalPriority | CustomPriority;
 
 export declare type PriorityFn = () => number;
 
-/**
- * This entity is responsible for providing access to end user in a safe way
- */
-export declare class PublicGraphStore {
-    private readonly graphStore;
-    constructor(graphStore: GraphStore);
-    getNode(nodeId: unknown): GraphNode | null;
-    getAllNodeIds(): readonly unknown[];
-    getPort(portId: unknown): GraphPort | null;
-    getAllPortIds(): readonly unknown[];
-    getNodePortIds(nodeId: unknown): readonly unknown[] | null;
-    getPortNodeId(portId: unknown): unknown | null;
-    getAllEdgeIds(): readonly unknown[];
-    getEdge(edgeId: unknown): GraphEdge | null;
-    getPortIncomingEdgeIds(portId: unknown): readonly unknown[] | null;
-    getPortOutcomingEdgeIds(portId: unknown): readonly unknown[] | null;
-    getPortCycleEdgeIds(portId: unknown): readonly unknown[] | null;
-    getPortAdjacentEdgeIds(portId: unknown): readonly unknown[] | null;
-    getNodeIncomingEdgeIds(nodeId: unknown): readonly unknown[] | null;
-    getNodeOutcomingEdgeIds(nodeId: unknown): readonly unknown[] | null;
-    getNodeCycleEdgeIds(nodeId: unknown): readonly unknown[] | null;
-    getNodeAdjacentEdgeIds(nodeId: unknown): readonly unknown[] | null;
-}
-
-/**
- * This entity is responsible for providing viewport transformation state to the
- * end user in a safe way
- */
-export declare class PublicViewportTransformer {
-    private readonly transformer;
-    constructor(transformer: ViewportTransformer);
-    getViewportMatrix(): TransformState;
-    getContentMatrix(): TransformState;
-}
-
 export declare interface RenderingBox {
     readonly x: number;
     readonly y: number;
@@ -642,41 +486,11 @@ export declare interface RenderingBox {
     readonly height: number;
 }
 
-export declare class ResizeReactiveNodesCanvas implements Canvas {
-    private readonly canvas;
-    readonly transformation: PublicViewportTransformer;
-    readonly model: PublicGraphStore;
-    private readonly nodes;
-    private readonly nodeIdGenerator;
-    private readonly nodesResizeObserver;
-    constructor(canvas: Canvas);
-    attach(element: HTMLElement): ResizeReactiveNodesCanvas;
-    detach(): ResizeReactiveNodesCanvas;
-    addNode(request: AddNodeRequest): ResizeReactiveNodesCanvas;
-    updateNode(nodeId: unknown, request?: UpdateNodeRequest): ResizeReactiveNodesCanvas;
-    removeNode(nodeId: unknown): ResizeReactiveNodesCanvas;
-    markPort(port: MarkPortRequest): ResizeReactiveNodesCanvas;
-    updatePort(portId: string, request?: UpdatePortRequest): ResizeReactiveNodesCanvas;
-    unmarkPort(portId: string): ResizeReactiveNodesCanvas;
-    addEdge(edge: AddEdgeRequest): ResizeReactiveNodesCanvas;
-    updateEdge(edgeId: unknown, request?: UpdateEdgeRequest): ResizeReactiveNodesCanvas;
-    removeEdge(edgeId: unknown): ResizeReactiveNodesCanvas;
-    patchViewportMatrix(request: PatchMatrixRequest): ResizeReactiveNodesCanvas;
-    patchContentMatrix(request: PatchMatrixRequest): ResizeReactiveNodesCanvas;
-    clear(): ResizeReactiveNodesCanvas;
-    destroy(): void;
-    private handleNodeResize;
-}
-
 export declare interface ScaleLimitPreprocessorParams {
     readonly minContentScale: number | null;
     readonly maxContentScale: number | null;
 }
 
-declare type SharedIncrementalPriority = "shared-incremental";
-
-declare type SharedIncrementalPriority_2 = "shared-incremental";
-
 export declare interface ShiftLimitPreprocessorParams {
     readonly minX: number | null;
     readonly maxX: number | null;
@@ -717,40 +531,15 @@ export declare class StraightEdgeShape implements EdgeShape {
     render(params: EdgeRenderParams): void;
 }
 
-declare interface StraightEdgeShape_2 {
-    readonly type: "straight";
-    readonly color?: string | undefined;
-    readonly width?: number | undefined;
-    readonly arrowLength?: number | undefined;
-    readonly arrowWidth?: number | undefined;
-    readonly arrowOffset?: number | undefined;
-    readonly hasSourceArrow?: boolean | undefined;
-    readonly hasTargetArrow?: boolean | undefined;
-    readonly cycleSquareSide?: number | undefined;
-    readonly roundness?: number | undefined;
-    readonly detourDistance?: number | undefined;
-    readonly detourDirection?: number | undefined;
-}
-
-declare interface StraightEdgeShape_3 {
+declare type StraightEdgeShapeConfig = {
     readonly type: "straight";
-    readonly color?: string | undefined;
-    readonly width?: number | undefined;
-    readonly arrowLength?: number | undefined;
-    readonly arrowWidth?: number | undefined;
-    readonly arrowOffset?: number | undefined;
-    readonly hasSourceArrow?: boolean | undefined;
-    readonly hasTargetArrow?: boolean | undefined;
-    readonly cycleSquareSide?: number | undefined;
-    readonly roundness?: number | undefined;
-    readonly detourDistance?: number | undefined;
-    readonly detourDirection?: number | undefined;
-}
+} & StraightEdgeParams;
 
 export declare interface TransformOptions {
     readonly scale?: {
         readonly mouseWheelSensitivity?: number;
         readonly mouseWheelEventVerifier?: (event: WheelEvent) => boolean;
+        readonly wheelFinishTimeout?: number;
     };
     readonly shift?: {
         readonly cursor?: string | null;
@@ -763,6 +552,8 @@ export declare interface TransformOptions {
         readonly onTransformFinished?: () => void;
         readonly onBeforeTransformChange?: () => void;
         readonly onTransformChange?: () => void;
+        readonly onResizeTransformStarted?: () => void;
+        readonly onResizeTransformFinished?: () => void;
     };
 }
 
@@ -817,89 +608,6 @@ export declare interface UpdatePortRequest {
     readonly direction?: number;
 }
 
-export declare class UserDraggableNodesCanvas implements Canvas {
-    private readonly canvas;
-    readonly model: PublicGraphStore;
-    readonly transformation: PublicViewportTransformer;
-    private maxNodePriority;
-    private readonly nodes;
-    private grabbedNodeId;
-    private readonly nodeIdGenerator;
-    private element;
-    private readonly onWindowMouseMove;
-    private readonly onWindowMouseUp;
-    private readonly onWindowTouchMove;
-    private readonly onWindowTouchFinish;
-    private previousTouchCoords;
-    private readonly window;
-    private readonly options;
-    constructor(canvas: Canvas, dragOptions?: DragOptions);
-    attach(element: HTMLElement): UserDraggableNodesCanvas;
-    detach(): UserDraggableNodesCanvas;
-    addNode(request: AddNodeRequest): UserDraggableNodesCanvas;
-    updateNode(nodeId: unknown, request?: UpdateNodeRequest): UserDraggableNodesCanvas;
-    removeNode(nodeId: unknown): UserDraggableNodesCanvas;
-    markPort(port: MarkPortRequest): UserDraggableNodesCanvas;
-    updatePort(portId: string, request?: UpdatePortRequest): UserDraggableNodesCanvas;
-    unmarkPort(portId: string): UserDraggableNodesCanvas;
-    addEdge(edge: AddEdgeRequest): UserDraggableNodesCanvas;
-    updateEdge(edgeId: unknown, request?: UpdateEdgeRequest): UserDraggableNodesCanvas;
-    removeEdge(edgeId: unknown): UserDraggableNodesCanvas;
-    patchViewportMatrix(request: PatchMatrixRequest): UserDraggableNodesCanvas;
-    patchContentMatrix(request: PatchMatrixRequest): UserDraggableNodesCanvas;
-    clear(): UserDraggableNodesCanvas;
-    destroy(): void;
-    private dragNode;
-    private updateMaxNodePriority;
-    private moveNodeOnTop;
-    private cancelMouseDrag;
-    private removeMouseDragListeners;
-    private cancelTouchDrag;
-    private removeTouchDragListeners;
-}
-
-declare class UserTransformableViewportCanvas implements Canvas {
-    private readonly canvas;
-    readonly model: PublicGraphStore;
-    readonly transformation: PublicViewportTransformer;
-    private element;
-    private prevTouches;
-    private window;
-    private readonly onMouseDown;
-    private readonly onWindowMouseMove;
-    private readonly onWindowMouseUp;
-    private readonly onWheelScroll;
-    private readonly onTouchStart;
-    private readonly onWindowTouchMove;
-    private readonly onWindowTouchFinish;
-    private readonly observer;
-    private readonly options;
-    constructor(canvas: Canvas, transformOptions?: TransformOptions);
-    attach(element: HTMLElement): UserTransformableViewportCanvas;
-    detach(): UserTransformableViewportCanvas;
-    addNode(node: AddNodeRequest): UserTransformableViewportCanvas;
-    updateNode(nodeId: unknown, request?: UpdateNodeRequest): UserTransformableViewportCanvas;
-    removeNode(nodeId: unknown): UserTransformableViewportCanvas;
-    markPort(port: MarkPortRequest): UserTransformableViewportCanvas;
-    updatePort(portId: string, request?: UpdatePortRequest): UserTransformableViewportCanvas;
-    unmarkPort(portId: string): UserTransformableViewportCanvas;
-    addEdge(edge: AddEdgeRequest): UserTransformableViewportCanvas;
-    updateEdge(edgeId: unknown, request?: UpdateEdgeRequest): UserTransformableViewportCanvas;
-    removeEdge(edgeId: unknown): UserTransformableViewportCanvas;
-    patchViewportMatrix(request: PatchMatrixRequest): UserTransformableViewportCanvas;
-    patchContentMatrix(request: PatchMatrixRequest): UserTransformableViewportCanvas;
-    clear(): UserTransformableViewportCanvas;
-    destroy(): void;
-    private moveViewport;
-    private scaleViewport;
-    private stopMouseDrag;
-    private removeMouseDragListeners;
-    private stopTouchDrag;
-    private removeTouchDragListeners;
-}
-export { UserTransformableViewportCanvas as UserTransformableCanvas }
-export { UserTransformableViewportCanvas }
-
 export declare interface VerticalEdgeParams {
     readonly color?: string | undefined;
     readonly width?: number | undefined;
@@ -933,34 +641,19 @@ export declare class VerticalEdgeShape implements EdgeShape {
     render(params: EdgeRenderParams): void;
 }
 
-declare interface VerticalEdgeShape_2 {
+declare type VerticalEdgeShapeConfig = {
     readonly type: "vertical";
-    readonly color?: string | undefined;
-    readonly width?: number | undefined;
-    readonly arrowLength?: number | undefined;
-    readonly arrowWidth?: number | undefined;
-    readonly arrowOffset?: number | undefined;
-    readonly hasSourceArrow?: boolean | undefined;
-    readonly hasTargetArrow?: boolean | undefined;
-    readonly cycleSquareSide?: number | undefined;
-    readonly roundness?: number | undefined;
-    readonly detourDistance?: number | undefined;
-    readonly detourDirection?: number | undefined;
-}
+} & VerticalEdgeParams;
 
-declare interface VerticalEdgeShape_3 {
-    readonly type: "vertical";
-    readonly color?: string | undefined;
-    readonly width?: number | undefined;
-    readonly arrowLength?: number | undefined;
-    readonly arrowWidth?: number | undefined;
-    readonly arrowOffset?: number | undefined;
-    readonly hasSourceArrow?: boolean | undefined;
-    readonly hasTargetArrow?: boolean | undefined;
-    readonly cycleSquareSide?: number | undefined;
-    readonly roundness?: number | undefined;
-    readonly detourDistance?: number | undefined;
-    readonly detourDirection?: number | undefined;
+/**
+ * This entity is responsible for providing viewport transformation state to the
+ * end user in a safe way
+ */
+export declare class Viewport {
+    private readonly transformer;
+    constructor(transformer: ViewportTransformer);
+    getViewportMatrix(): TransformState;
+    getContentMatrix(): TransformState;
 }
 
 /**
@@ -978,4 +671,11 @@ declare class ViewportTransformer {
     patchContentMatrix(matrix: PatchTransformRequest): void;
 }
 
+declare interface VirtualScrollOptions {
+    readonly nodeContainingRadius: {
+        readonly vertical: number;
+        readonly horizontal: number;
+    };
+}
+
 export { }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@html-graph/html-graph",
   "author": "Dmitry Marov <d.marov94@gmail.com>",
   "private": false,
-  "version": "1.2.0",
+  "version": "2.0.0",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",