@html-graph/html-graph 0.0.52 → 0.0.54

package/README.md

@@ -10,12 +10,10 @@
     <img width="100%" src="https://raw.githubusercontent.com/html-graph/html-graph/master/media/full-demo.gif"/>
 </a>
 
-Instead of connecting nodes dirrectly this library uses concept of ports, which provide greater fexibility at managing edges.
-Port is an entity of a node to which edge can be attached to.
-
-This library fits for tasks where easy nodes customization and interactiveness are required.
+Visit <a target="_blank" href="https://html-graph.github.io">live demo</a>.
 
-Visit <a target="_blank" href="https://html-graph.github.io">live demo</a>
+Instead of connecting nodes directly this library uses concept of ports, which provide greater fexibility at managing edges.
+Port is an entity of a node to which edge can be attached to.
 
 ## Features:
 
@@ -37,8 +35,14 @@ import { AddNodePorts, HtmlGraphBuilder } from "@html-graph/html-graph";
 
 const canvas = new HtmlGraphBuilder()
   .setOptions({
-    background: { type: "dots" },
-    edges: { hasTargetArrow: true },
+    background: {
+      type: "dots",
+    },
+    edges: {
+      shape: {
+        hasTargetArrow: true,
+      },
+    },
   })
   .setUserDraggableNodes()
   .setUserTransformableCanvas()
@@ -64,12 +68,13 @@ function createNode(
   backPort.classList.add("port");
   node.appendChild(backPort);
 
-  const ports = new Map([
-    [frontPortId, frontPort],
-    [backPortId, backPort],
-  ]);
-
-  return [node, ports];
+  return [
+    node,
+    [
+      [frontPortId, frontPort],
+      [backPortId, backPort],
+    ],
+  ];
 }
 
 const [node1, ports1] = createNode("Node 1", "port-1-1", "port-1-2");

package/dist/main.d.ts

@@ -2,11 +2,11 @@ export declare interface AddEdgeRequest {
     id?: unknown;
     from: string;
     to: string;
-    options?: EdgeOptions;
+    options?: EdgeShape_2;
     priority?: number;
 }
 
-export declare type AddNodePorts = ReadonlyMap<unknown, MarkNodePortRequest>;
+export declare type AddNodePorts = Iterable<readonly [unknown, MarkNodePortRequest]>;
 
 export declare interface AddNodeRequest {
     id?: unknown;
@@ -22,9 +22,6 @@ export declare type BackgroundDrawingFn = (ctx: CanvasRenderingContext2D, transf
 
 declare type BackgroundOptions = {
     readonly type: "none";
-} | {
-    readonly type: "color";
-    readonly color?: string;
 } | {
     readonly type: "dots";
     readonly dotColor?: string;
@@ -36,7 +33,7 @@ declare type BackgroundOptions = {
     readonly drawingFn: BackgroundDrawingFn;
 };
 
-export declare class BezierEdgeController implements EdgeController {
+export declare class BezierEdgeShape implements EdgeShape {
     private readonly color;
     private readonly width;
     private readonly curvature;
@@ -51,7 +48,7 @@ export declare class BezierEdgeController implements EdgeController {
     update(x: number, y: number, width: number, height: number, from: PortPayload, to: PortPayload): void;
 }
 
-declare interface BezierEdgeOptions {
+declare interface BezierEdgeShape_2 {
     readonly type?: "bezier";
     readonly color?: string;
     readonly width?: number;
@@ -67,6 +64,10 @@ declare interface BezierEdgeOptions {
 }
 
 export declare interface Canvas {
+    /**
+     * provides api for accessing graph model
+     */
+    readonly model: PublicGraphStore;
     /**
      * provides api for canvas transformation
      */
@@ -113,15 +114,11 @@ export declare interface Canvas {
     /**
      * applies transformation for viewport
      */
-    patchViewportState(request: PatchViewportRequest): Canvas;
+    patchViewportState(request: PatchTransformRequest): Canvas;
     /**
-     * moves viewport to nodes
+     * applies transformation for content
      */
-    moveToNodes(nodeIds: readonly string[]): Canvas;
-    /**
-     * moves specified node on top
-     */
-    moveNodeOnTop(nodeId: unknown): Canvas;
+    patchContentState(request: PatchTransformRequest): Canvas;
     /**
      * attaches canvas to given element
      */
@@ -150,21 +147,21 @@ export declare interface Canvas {
 export declare class CanvasCore implements Canvas {
     private readonly apiOptions?;
     readonly transformation: PublicViewportTransformer;
+    readonly model: PublicGraphStore;
     private readonly di;
-    private readonly edgeControllerFactory;
+    private readonly edgeShapeFactory;
     constructor(apiOptions?: CoreOptions | undefined);
     addNode(node: AddNodeRequest): CanvasCore;
     updateNode(nodeId: unknown, request: UpdateNodeRequest): CanvasCore;
     removeNode(nodeId: unknown): CanvasCore;
-    moveNodeOnTop(nodeId: unknown): CanvasCore;
     markPort(port: MarkPortRequest): CanvasCore;
     updatePort(portId: string, request: UpdatePortRequest): CanvasCore;
     unmarkPort(portId: string): CanvasCore;
     addEdge(edge: AddEdgeRequest): CanvasCore;
     updateEdge(edgeId: unknown, request: UpdateEdgeRequest): CanvasCore;
     removeEdge(edgeId: unknown): CanvasCore;
-    patchViewportState(request: PatchViewportRequest): CanvasCore;
-    moveToNodes(nodeIds: readonly string[]): CanvasCore;
+    patchViewportState(request: PatchTransformRequest): CanvasCore;
+    patchContentState(request: PatchTransformRequest): CanvasCore;
     clear(): CanvasCore;
     attach(element: HTMLElement): CanvasCore;
     detach(): CanvasCore;
@@ -173,6 +170,8 @@ export declare class CanvasCore implements Canvas {
 
 export declare type CenterFn = (width: number, height: number) => [number, number];
 
+declare type ConstantPriority = number;
+
 export declare interface CoreOptions {
     /**
      * canvas background settings
@@ -187,6 +186,10 @@ export declare interface CoreOptions {
          * center of nodes specified in addNode method by x and y
          */
         readonly centerFn?: CenterFn;
+        /**
+         * specifies default z-index value
+         */
+        readonly priority?: Priority;
     };
     /**
      * ports related behavior
@@ -205,19 +208,19 @@ export declare interface CoreOptions {
     /**
      *edges related behavior
      */
-    readonly edges?: EdgeOptions;
-    /**
-     * layers related behavior
-     */
-    readonly layers?: {
+    readonly edges?: {
         /**
-         * sets layers order
+         * specifies default controller
          */
-        readonly mode?: LayersMode;
+        readonly shape?: EdgeShape_2;
+        /**
+         * specifies default z-index value
+         */
+        readonly priority?: Priority;
     };
 }
 
-export declare const createBezierEdgeControllerFactory: (options: {
+export declare const createBezierEdgeShapeFactory: (options: {
     color: string;
     width: number;
     arrowLength: number;
@@ -229,9 +232,9 @@ export declare const createBezierEdgeControllerFactory: (options: {
     smallCycleRadius: number;
     detourDistance: number;
     detourDirection: number;
-}) => EdgeControllerFactory;
+}) => EdgeShapeFactory;
 
-export declare const createHorizontalEdgeControllerFactory: (options: {
+export declare const createHorizontalEdgeShapeFactory: (options: {
     color: string;
     width: number;
     arrowLength: number;
@@ -243,9 +246,9 @@ export declare const createHorizontalEdgeControllerFactory: (options: {
     roundness: number;
     detourDistance: number;
     detourDirection: number;
-}) => EdgeControllerFactory;
+}) => EdgeShapeFactory;
 
-export declare const createStraightEdgeControllerFactory: (options: {
+export declare const createStraightEdgeShareFactory: (options: {
     color: string;
     width: number;
     arrowLength: number;
@@ -257,9 +260,9 @@ export declare const createStraightEdgeControllerFactory: (options: {
     roundness: number;
     detourDistance: number;
     detourDirection: number;
-}) => EdgeControllerFactory;
+}) => EdgeShapeFactory;
 
-export declare const createVerticalEdgeControllerFactory: (options: {
+export declare const createVerticalEdgeShapeFactory: (options: {
     color: string;
     width: number;
     arrowLength: number;
@@ -271,14 +274,16 @@ export declare const createVerticalEdgeControllerFactory: (options: {
     roundness: number;
     detourDistance: number;
     detourDirection: number;
-}) => EdgeControllerFactory;
+}) => EdgeShapeFactory;
 
-declare interface CustomEdgeOptions {
+declare interface CustomEdgeShape {
     readonly type: "custom";
-    readonly controllerFactory: EdgeControllerFactory;
+    readonly controllerFactory: EdgeShapeFactory;
 }
 
-export declare class CycleCircleEdgeController implements EdgeController {
+declare type CustomPriority = PriorityFn;
+
+export declare class CycleCircleEdgeShape implements EdgeShape {
     private readonly color;
     private readonly width;
     private readonly arrowLength;
@@ -293,7 +298,7 @@ export declare class CycleCircleEdgeController implements EdgeController {
     update(x: number, y: number, _width: number, _height: number, from: PortPayload): void;
 }
 
-export declare class CycleSquareEdgeController implements EdgeController {
+export declare class CycleSquareEdgeShape implements EdgeShape {
     private readonly color;
     private readonly width;
     private readonly arrowLength;
@@ -310,7 +315,7 @@ export declare class CycleSquareEdgeController implements EdgeController {
     update(x: number, y: number, _width: number, _height: number, from: PortPayload): void;
 }
 
-export declare class DetourStraightEdgeController implements EdgeController {
+export declare class DetourStraightEdgeShape implements EdgeShape {
     private readonly color;
     private readonly width;
     private readonly arrowLength;
@@ -329,20 +334,28 @@ export declare class DetourStraightEdgeController implements EdgeController {
 }
 
 export declare interface DragOptions {
+    grabPriorityStrategy?: "freeze" | "move-on-top";
     events?: {
         onNodeDrag?: (payload: NodeDragPayload) => void;
         onBeforeNodeDrag?: (payload: NodeDragPayload) => boolean;
     };
 }
 
-export declare interface EdgeController {
+declare interface EdgePayload {
+    from: string;
+    to: string;
+    shape: EdgeShape;
+    priority: number;
+}
+
+export declare interface EdgeShape {
     readonly svg: SVGSVGElement;
     update(x: number, y: number, width: number, height: number, from: PortPayload, to: PortPayload): void;
 }
 
-declare type EdgeControllerFactory = (type: EdgeType) => EdgeController;
+declare type EdgeShape_2 = BezierEdgeShape_2 | StraightEdgeShape_2 | CustomEdgeShape | HorizontalEdgeShape_2 | VerticalEdgeShape_2;
 
-declare type EdgeOptions = BezierEdgeOptions | StraightEdgeOptions | CustomEdgeOptions | HorizontalEdgeOptions | VerticalEdgeOptions;
+declare type EdgeShapeFactory = (type: EdgeType) => EdgeShape;
 
 export declare enum EdgeType {
     Regular = "regular",
@@ -350,7 +363,57 @@ export declare enum EdgeType {
     NodeCycle = "node-cycle"
 }
 
-export declare class HorizontalEdgeController implements EdgeController {
+export declare interface GraphEdge {
+    readonly from: unknown;
+    readonly to: unknown;
+    readonly priority: number;
+}
+
+export declare interface GraphNode {
+    readonly element: HTMLElement;
+    readonly x: number;
+    readonly y: number;
+    readonly centerFn: CenterFn;
+    readonly priority: number;
+}
+
+export declare interface GraphPort {
+    readonly element: HTMLElement;
+    readonly centerFn: CenterFn;
+    readonly direction: number;
+}
+
+declare class GraphStore {
+    private readonly nodes;
+    private readonly ports;
+    private readonly nodePorts;
+    private readonly portNodeId;
+    private readonly edges;
+    private readonly incommingEdges;
+    private readonly outcommingEdges;
+    private readonly cycleEdges;
+    addNode(nodeId: unknown, element: HTMLElement, x: number, y: number, centerFn: CenterFn, priority: number): void;
+    getNode(nodeId: unknown): NodePayload | undefined;
+    removeNode(nodeId: unknown): void;
+    addPort(portId: unknown, element: HTMLElement, nodeId: unknown, centerFn: CenterFn, dir: number): void;
+    getPort(portId: unknown): PortPayload | undefined;
+    getPortNode(portId: string): unknown | undefined;
+    removePort(portId: string): void;
+    addEdge(edgeId: unknown, fromPortId: string, toPortId: string, shape: EdgeShape, priority: number): void;
+    getEdge(edgeId: unknown): EdgePayload | undefined;
+    removeEdge(edgeId: unknown): void;
+    getPortAdjacentEdges(portId: string): readonly unknown[];
+    getNodeAdjacentEdges(nodeId: unknown): readonly unknown[];
+    clear(): void;
+    getPortIncomingEdges(portId: unknown): readonly unknown[];
+    getPortOutcomingEdges(portId: unknown): readonly unknown[];
+    getPortCycleEdges(portId: unknown): readonly unknown[];
+    getNodeIncomingEdges(nodeId: unknown): readonly unknown[];
+    getNodeOutcomingEdges(nodeId: unknown): readonly unknown[];
+    getNodeCycleEdges(nodeId: unknown): readonly unknown[];
+}
+
+export declare class HorizontalEdgeShape implements EdgeShape {
     private readonly color;
     private readonly width;
     private readonly arrowLength;
@@ -366,7 +429,7 @@ export declare class HorizontalEdgeController implements EdgeController {
     update(x: number, y: number, width: number, height: number, from: PortPayload, to: PortPayload): void;
 }
 
-declare interface HorizontalEdgeOptions {
+declare interface HorizontalEdgeShape_2 {
     readonly type: "horizontal";
     readonly color?: string;
     readonly width?: number;
@@ -393,7 +456,7 @@ export declare class HtmlGraphBuilder {
     build(): Canvas;
 }
 
-declare type LayersMode = "edges-on-top" | "nodes-on-top" | "edges-follow-node";
+declare type IncrementalPriority = "incremental";
 
 export declare type MarkNodePortRequest = HTMLElement | {
     readonly element: HTMLElement;
@@ -416,20 +479,15 @@ export declare interface NodeDragPayload {
     readonly y: number;
 }
 
-export declare interface NodeItem {
-    readonly id: string;
-    readonly x: number;
-    readonly y: number;
-    readonly element: HTMLElement;
-}
-
-export declare interface NodeResponse {
-    readonly x: number;
-    readonly y: number;
-    readonly element: HTMLElement;
+declare interface NodePayload {
+    element: HTMLElement;
+    x: number;
+    y: number;
+    centerFn: CenterFn;
+    priority: number;
 }
 
-export declare interface PatchViewportRequest {
+export declare interface PatchTransformRequest {
     scale?: number;
     x?: number;
     y?: number;
@@ -441,32 +499,37 @@ export declare interface PortPayload {
     direction: number;
 }
 
+declare type Priority = ConstantPriority | IncrementalPriority | SharedIncrementalPriority | CustomPriority;
+
+export declare type PriorityFn = () => number;
+
+declare class PublicGraphStore {
+    private readonly graphStore;
+    constructor(graphStore: GraphStore);
+    getNode(nodeId: unknown): GraphNode | null;
+    getPort(portId: unknown): GraphPort | null;
+    getPortNode(portId: string): unknown | null;
+    getEdge(edgeId: unknown): GraphEdge | null;
+    getPortAdjacentEdges(portId: string): readonly unknown[];
+    getNodeAdjacentEdges(nodeId: unknown): readonly unknown[];
+    getPortIncomingEdges(portId: unknown): readonly unknown[];
+    getPortOutcomingEdges(portId: unknown): readonly unknown[];
+    getPortCycleEdges(portId: unknown): readonly unknown[];
+    getNodeIncomingEdges(nodeId: unknown): readonly unknown[];
+    getNodeOutcomingEdges(nodeId: unknown): readonly unknown[];
+    getNodeCycleEdges(nodeId: unknown): readonly unknown[];
+}
+
 export declare class PublicViewportTransformer {
     private readonly transformer;
     constructor(transformer: ViewportTransformer);
-    /**
-     * for given absolute coordinates returns viewport coordinates
-     * viewport coordinated represent actual coordinates on screen for given absolute coordinates
-     */
-    getViewCoords(xa: number, ya: number): [number, number];
-    /**
-     * returns viewport scale
-     * it represents scale at which entities on canvas should be scaled to fit current scale
-     */
-    getViewScale(): number;
-    /**
-     * for given viewport coordinates returns absolute coordinates
-     * absolute coordinates represent actual coordinates, which stay constant even for transformed canvas
-     */
-    getAbsCoords(xv: number, yv: number): [number, number];
-    /**
-     * returns absolute scale
-     * it represents scale at which current viewport was scaled compared to initial state
-     */
-    getAbsScale(): number;
+    getViewportMatrix(): TransformState;
+    getContentMatrix(): TransformState;
 }
 
-export declare class StraightEdgeController implements EdgeController {
+declare type SharedIncrementalPriority = "shared-incremental";
+
+export declare class StraightEdgeShape implements EdgeShape {
     private readonly color;
     private readonly width;
     private readonly arrowLength;
@@ -482,7 +545,7 @@ export declare class StraightEdgeController implements EdgeController {
     update(x: number, y: number, width: number, height: number, from: PortPayload, to: PortPayload): void;
 }
 
-declare interface StraightEdgeOptions {
+declare interface StraightEdgeShape_2 {
     readonly type: "straight";
     readonly color?: string;
     readonly width?: number;
@@ -519,8 +582,14 @@ export declare interface TransformPayload {
     readonly y: number;
 }
 
+declare interface TransformState {
+    scale: number;
+    x: number;
+    y: number;
+}
+
 export declare interface UpdateEdgeRequest {
-    readonly controller?: EdgeController;
+    readonly controller?: EdgeShape;
     readonly priority?: number;
 }
 
@@ -538,7 +607,9 @@ declare interface UpdatePortRequest {
 
 export declare class UserDraggableNodesCanvas implements Canvas {
     private readonly canvas;
+    readonly model: PublicGraphStore;
     readonly transformation: PublicViewportTransformer;
+    private maxNodePriority;
     private readonly nodes;
     private grabbedNodeId;
     private onNodeDrag;
@@ -551,8 +622,9 @@ export declare class UserDraggableNodesCanvas implements Canvas {
     private readonly onCanvasTouchMove;
     private readonly onCanvasTouchEnd;
     private previousTouchCoords;
+    private freezePriority;
     constructor(canvas: Canvas, dragOptions?: DragOptions);
-    addNode(node: AddNodeRequest): UserDraggableNodesCanvas;
+    addNode(request: AddNodeRequest): UserDraggableNodesCanvas;
     updateNode(nodeId: unknown, request: UpdateNodeRequest): UserDraggableNodesCanvas;
     removeNode(nodeId: unknown): UserDraggableNodesCanvas;
     markPort(port: MarkPortRequest): UserDraggableNodesCanvas;
@@ -561,20 +633,22 @@ export declare class UserDraggableNodesCanvas implements Canvas {
     addEdge(edge: AddEdgeRequest): UserDraggableNodesCanvas;
     updateEdge(edgeId: unknown, request: UpdateEdgeRequest): UserDraggableNodesCanvas;
     removeEdge(edgeId: unknown): UserDraggableNodesCanvas;
-    patchViewportState(request: PatchViewportRequest): UserDraggableNodesCanvas;
-    moveToNodes(nodeIds: readonly string[]): UserDraggableNodesCanvas;
-    moveNodeOnTop(nodeId: string): UserDraggableNodesCanvas;
+    patchViewportState(request: PatchTransformRequest): UserDraggableNodesCanvas;
+    patchContentState(request: PatchTransformRequest): UserDraggableNodesCanvas;
     clear(): UserDraggableNodesCanvas;
     attach(element: HTMLElement): UserDraggableNodesCanvas;
     detach(): UserDraggableNodesCanvas;
     destroy(): void;
     private setCursor;
     private dragNode;
+    private updateMaxNodePriority;
+    private moveNodeOnTop;
 }
 
 export declare class UserTransformableCanvas implements Canvas {
     private readonly canvas;
     private readonly options?;
+    readonly model: PublicGraphStore;
     readonly transformation: PublicViewportTransformer;
     private element;
     private isMoving;
@@ -603,9 +677,8 @@ export declare class UserTransformableCanvas implements Canvas {
     addEdge(edge: AddEdgeRequest): UserTransformableCanvas;
     updateEdge(edgeId: unknown, request: UpdateEdgeRequest): UserTransformableCanvas;
     removeEdge(edgeId: unknown): UserTransformableCanvas;
-    patchViewportState(request: PatchViewportRequest): UserTransformableCanvas;
-    moveToNodes(nodeIds: readonly string[]): UserTransformableCanvas;
-    moveNodeOnTop(nodeId: string): UserTransformableCanvas;
+    patchViewportState(request: PatchTransformRequest): UserTransformableCanvas;
+    patchContentState(request: PatchTransformRequest): UserTransformableCanvas;
     clear(): UserTransformableCanvas;
     attach(element: HTMLElement): UserTransformableCanvas;
     detach(): UserTransformableCanvas;
@@ -616,7 +689,7 @@ export declare class UserTransformableCanvas implements Canvas {
     private scaleViewport;
 }
 
-export declare class VerticalEdgeController implements EdgeController {
+export declare class VerticalEdgeShape implements EdgeShape {
     private readonly color;
     private readonly width;
     private readonly arrowLength;
@@ -632,7 +705,7 @@ export declare class VerticalEdgeController implements EdgeController {
     update(x: number, y: number, width: number, height: number, from: PortPayload, to: PortPayload): void;
 }
 
-declare interface VerticalEdgeOptions {
+declare interface VerticalEdgeShape_2 {
     readonly type: "vertical";
     readonly color?: string;
     readonly width?: number;
@@ -648,12 +721,13 @@ declare interface VerticalEdgeOptions {
 }
 
 declare class ViewportTransformer {
-    private state;
-    getViewCoords(xa: number, ya: number): [number, number];
-    getViewScale(): number;
-    getAbsCoords(xv: number, yv: number): [number, number];
-    getAbsScale(): number;
-    patchState(scale: number | null, x: number | null, y: number | null): void;
+    private viewportMatrix;
+    private contentMatrix;
+    getViewportMatrix(): TransformState;
+    getContentMatrix(): TransformState;
+    patchViewportState(scale: number | null, x: number | null, y: number | null): void;
+    patchContentState(scale: number | null, x: number | null, y: number | null): void;
+    private calculateReverseMatrix;
 }
 
 export { }