@html-graph/html-graph 0.0.55 → 0.0.57

package/README.md

@@ -6,11 +6,11 @@
 
 ![CI](https://github.com/html-graph/html-graph/actions/workflows/ci.yml/badge.svg?branch=master)
 
-<a target="_blank" href="https://html-graph.github.io/">
+<a target="_blank" href="https://html-graph.github.io/use-cases/20-advanced-demo/index.html">
     <img width="100%" src="https://raw.githubusercontent.com/html-graph/html-graph/master/media/full-demo.gif"/>
 </a>
 
-Visit <a target="_blank" href="https://html-graph.github.io">live demo</a>.
+Visit <a target="_blank" href="https://html-graph.github.io">use cases</a> and [use cases implementation](use-cases).
 
 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.
@@ -20,7 +20,7 @@ Port is an entity of a node to which edge can be attached to.
 - easy nodes customization using HTML
 - wide configuration options out of the box
 - draggable and scalable canvas with draggable nodes
-- exhaustive set of examples
+- exhaustive set of use cases
 - typescript support
 - mobile devices support
 
@@ -30,8 +30,8 @@ Port is an entity of a node to which edge can be attached to.
 npm i @html-graph/html-graph
 ```
 
-```typescript
-import { AddNodePorts, HtmlGraphBuilder } from "@html-graph/html-graph";
+```javascript
+import { HtmlGraphBuilder } from "@html-graph/html-graph";
 
 const canvas = new HtmlGraphBuilder()
   .setOptions({
@@ -48,52 +48,58 @@ const canvas = new HtmlGraphBuilder()
   .setUserTransformableCanvas()
   .build();
 
-function createNode(
-  name: string,
-  frontPortId: string,
-  backPortId: string,
-): [HTMLElement, AddNodePorts] {
+function createNode({ name, x, y, frontPortId, backPortId }) {
   const node = document.createElement("div");
-  node.classList.add("node");
-
+  const text = document.createElement("div");
   const frontPort = document.createElement("div");
-  frontPort.classList.add("port");
-  node.appendChild(frontPort);
+  const backPort = document.createElement("div");
 
-  const text = document.createElement("div");
+  node.classList.add("node");
+  frontPort.classList.add("port");
+  backPort.classList.add("port");
   text.innerText = name;
-  node.appendChild(text);
 
-  const backPort = document.createElement("div");
-  backPort.classList.add("port");
   node.appendChild(backPort);
+  node.appendChild(text);
+  node.appendChild(frontPort);
 
-  return [
-    node,
-    [
-      [frontPortId, frontPort],
-      [backPortId, backPort],
+  return {
+    element: node,
+    x: x,
+    y: y,
+    ports: [
+      { id: frontPortId, element: frontPort },
+      { id: backPortId, element: backPort },
     ],
-  ];
+  };
 }
 
-const [node1, ports1] = createNode("Node 1", "port-1-1", "port-1-2");
-const [node2, ports2] = createNode("Node 2", "port-2-1", "port-2-2");
+const node1 = createNode({
+  name: "Node 1",
+  x: 200,
+  y: 400,
+  frontPortId: "port-1-1",
+  backPortId: "port-1-2",
+});
+
+const node2 = createNode({
+  name: "Node 2",
+  x: 600,
+  y: 500,
+  frontPortId: "port-2-1",
+  backPortId: "port-2-2",
+});
 
-const canvasElement = document.getElementById("canvas")!;
+const canvasElement = document.getElementById("canvas");
 
 canvas
   .attach(canvasElement)
-  .addNode({ element: node1, x: 200, y: 400, ports: ports1 })
-  .addNode({ element: node2, x: 600, y: 500, ports: ports2 })
+  .addNode(node1)
+  .addNode(node2)
   .addEdge({ from: "port-1-2", to: "port-2-1" });
 ```
 
-Refer to [Examples](examples) for more.
-
-## Run examples
-
-Use node version >= 20
+## Run use cases
 
 ```
 npm install

package/dist/main.d.ts

@@ -1,21 +1,28 @@
+declare interface AbstractViewportTransformer {
+    getViewportMatrix(): TransformState;
+    getContentMatrix(): TransformState;
+    patchViewportMatrix(scale: number | null, x: number | null, y: number | null): void;
+    patchContentMatrix(scale: number | null, dx: number | null, dy: number | null): void;
+}
+
 export declare interface AddEdgeRequest {
-    id?: unknown;
-    from: string;
-    to: string;
-    options?: EdgeShape_2;
-    priority?: number;
+    readonly id?: unknown;
+    readonly from: string;
+    readonly to: string;
+    readonly shape?: EdgeShape_2;
+    readonly priority?: number;
 }
 
-export declare type AddNodePorts = Iterable<readonly [unknown, MarkNodePortRequest]>;
+export declare type AddNodePorts = Iterable<MarkNodePortRequest>;
 
 export declare interface AddNodeRequest {
-    id?: unknown;
-    element: HTMLElement;
-    x: number;
-    y: number;
-    ports?: AddNodePorts;
-    centerFn?: CenterFn;
-    priority?: number;
+    readonly id?: unknown;
+    readonly element: HTMLElement;
+    readonly x: number;
+    readonly y: number;
+    readonly ports?: AddNodePorts;
+    readonly centerFn?: CenterFn;
+    readonly priority?: number;
 }
 
 export declare type BackgroundDrawingFn = (ctx: CanvasRenderingContext2D, transformer: PublicViewportTransformer) => void;
@@ -28,14 +35,13 @@ declare type BackgroundOptions = {
     readonly dotGap?: number;
     readonly dotRadius?: number;
     readonly color?: string;
+    readonly limit?: number;
 } | {
     readonly type: "custom";
     readonly drawingFn: BackgroundDrawingFn;
 };
 
 export declare class BezierEdgeShape implements EdgeShape {
-    private readonly color;
-    private readonly width;
     private readonly curvature;
     private readonly arrowLength;
     private readonly arrowWidth;
@@ -45,7 +51,7 @@ export declare class BezierEdgeShape implements EdgeShape {
     private readonly sourceArrow;
     private readonly targetArrow;
     constructor(color: string, width: number, curvature: number, arrowLength: number, arrowWidth: number, hasSourceArrow: boolean, hasTargetArrow: boolean);
-    update(x: number, y: number, width: number, height: number, from: PortPayload, to: PortPayload): void;
+    update(x: number, y: number, width: number, height: number, from: GraphPort, to: GraphPort): void;
 }
 
 declare interface BezierEdgeShape_2 {
@@ -278,14 +284,12 @@ export declare const createVerticalEdgeShapeFactory: (options: {
 
 declare interface CustomEdgeShape {
     readonly type: "custom";
-    readonly controllerFactory: EdgeShapeFactory;
+    readonly factory: EdgeShapeFactory;
 }
 
 declare type CustomPriority = PriorityFn;
 
 export declare class CycleCircleEdgeShape implements EdgeShape {
-    private readonly color;
-    private readonly width;
     private readonly arrowLength;
     private readonly arrowWidth;
     private readonly radius;
@@ -295,12 +299,10 @@ export declare class CycleCircleEdgeShape implements EdgeShape {
     private readonly line;
     private readonly arrow;
     constructor(color: string, width: number, arrowLength: number, arrowWidth: number, hasArrow: boolean, radius: number, smallRadius: number);
-    update(x: number, y: number, _width: number, _height: number, from: PortPayload): void;
+    update(x: number, y: number, _width: number, _height: number, from: GraphPort): void;
 }
 
 export declare class CycleSquareEdgeShape implements EdgeShape {
-    private readonly color;
-    private readonly width;
     private readonly arrowLength;
     private readonly arrowWidth;
     private readonly side;
@@ -312,12 +314,10 @@ export declare class CycleSquareEdgeShape implements EdgeShape {
     private readonly roundness;
     private readonly linePoints;
     constructor(color: string, width: number, arrowLength: number, arrowWidth: number, hasArrow: boolean, side: number, minPortOffset: number, roundness: number);
-    update(x: number, y: number, _width: number, _height: number, from: PortPayload): void;
+    update(x: number, y: number, _width: number, _height: number, from: GraphPort): void;
 }
 
 export declare class DetourStraightEdgeShape implements EdgeShape {
-    private readonly color;
-    private readonly width;
     private readonly arrowLength;
     private readonly arrowWidth;
     private readonly arrowOffset;
@@ -330,11 +330,12 @@ export declare class DetourStraightEdgeShape implements EdgeShape {
     private readonly detourX;
     private readonly detourY;
     constructor(color: string, width: number, arrowLength: number, arrowWidth: number, arrowOffset: number, hasSourceArrow: boolean, hasTargetArrow: boolean, roundness: number, detourDistance: number, detourDirection: number);
-    update(x: number, y: number, width: number, height: number, from: PortPayload, to: PortPayload): void;
+    update(x: number, y: number, width: number, height: number, from: GraphPort, to: GraphPort): void;
 }
 
 export declare interface DragOptions {
     grabPriorityStrategy?: "freeze" | "move-on-top";
+    dragCursor?: string | null;
     events?: {
         onNodeDrag?: (payload: NodeDragPayload) => void;
         onBeforeNodeDrag?: (payload: NodeDragPayload) => boolean;
@@ -342,15 +343,15 @@ export declare interface DragOptions {
 }
 
 declare interface EdgePayload {
-    from: string;
-    to: string;
+    readonly from: unknown;
+    readonly to: unknown;
     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;
+    update(x: number, y: number, width: number, height: number, from: GraphPort, to: GraphPort): void;
 }
 
 declare type EdgeShape_2 = BezierEdgeShape_2 | StraightEdgeShape_2 | CustomEdgeShape | HorizontalEdgeShape_2 | VerticalEdgeShape_2;
@@ -393,33 +394,31 @@ declare class GraphStore {
     private readonly outcommingEdges;
     private readonly cycleEdges;
     addNode(nodeId: unknown, element: HTMLElement, x: number, y: number, centerFn: CenterFn, priority: number): void;
-    getAllNodes(): readonly unknown[];
+    getAllNodeIds(): readonly unknown[];
     getNode(nodeId: unknown): NodePayload | undefined;
-    getNodePorts(nodeId: unknown): readonly unknown[] | undefined;
     removeNode(nodeId: unknown): void;
     addPort(portId: unknown, element: HTMLElement, nodeId: unknown, centerFn: CenterFn, dir: number): void;
-    getAllPorts(): readonly unknown[];
     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;
-    getAllEdges(): readonly unknown[];
+    getAllPortIds(): readonly unknown[];
+    getNodePortIds(nodeId: unknown): readonly unknown[] | undefined;
+    getPortNodeId(portId: unknown): unknown | undefined;
+    removePort(portId: unknown): void;
+    addEdge(edgeId: unknown, fromPortId: unknown, toPortId: unknown, shape: EdgeShape, priority: number): void;
+    getAllEdgeIds(): readonly unknown[];
     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[];
+    getPortIncomingEdgeIds(portId: unknown): readonly unknown[];
+    getPortOutcomingEdgeIds(portId: unknown): readonly unknown[];
+    getPortCycleEdgeIds(portId: unknown): readonly unknown[];
+    getPortAdjacentEdgeIds(portId: unknown): readonly unknown[];
+    getNodeIncomingEdgeIds(nodeId: unknown): readonly unknown[];
+    getNodeOutcomingEdgeIds(nodeId: unknown): readonly unknown[];
+    getNodeCycleEdgeIds(nodeId: unknown): readonly unknown[];
+    getNodeAdjacentEdgeIds(nodeId: unknown): readonly unknown[];
 }
 
 export declare class HorizontalEdgeShape implements EdgeShape {
-    private readonly color;
-    private readonly width;
     private readonly arrowLength;
     private readonly arrowWidth;
     private readonly arrowOffset;
@@ -430,7 +429,7 @@ export declare class HorizontalEdgeShape implements EdgeShape {
     private readonly sourceArrow;
     private readonly targetArrow;
     constructor(color: string, width: number, arrowLength: number, arrowWidth: number, arrowOffset: number, hasSourceArrow: boolean, hasTargetArrow: boolean, roundness: number);
-    update(x: number, y: number, width: number, height: number, from: PortPayload, to: PortPayload): void;
+    update(x: number, y: number, width: number, height: number, from: GraphPort, to: GraphPort): void;
 }
 
 declare interface HorizontalEdgeShape_2 {
@@ -460,9 +459,14 @@ export declare class HtmlGraphBuilder {
     build(): Canvas;
 }
 
+export declare class HtmlGraphError extends Error {
+    readonly name = "HtmlGraphError";
+}
+
 declare type IncrementalPriority = "incremental";
 
-export declare type MarkNodePortRequest = HTMLElement | {
+export declare type MarkNodePortRequest = {
+    readonly id?: unknown;
     readonly element: HTMLElement;
     readonly centerFn?: CenterFn;
     readonly direction?: number;
@@ -502,7 +506,7 @@ export declare interface Point {
     readonly y: number;
 }
 
-export declare interface PortPayload {
+declare interface PortPayload {
     readonly element: HTMLElement;
     centerFn: CenterFn;
     direction: number;
@@ -515,27 +519,27 @@ export declare type PriorityFn = () => number;
 declare class PublicGraphStore {
     private readonly graphStore;
     constructor(graphStore: GraphStore);
-    getAllNodes(): readonly unknown[];
-    getAllPorts(): readonly unknown[];
+    getAllNodeIds(): readonly unknown[];
+    getAllPortIds(): readonly unknown[];
     getNode(nodeId: unknown): GraphNode | null;
-    getNodePorts(nodeId: unknown): readonly unknown[] | undefined;
+    getNodePortIds(nodeId: unknown): readonly unknown[] | undefined;
     getPort(portId: unknown): GraphPort | null;
-    getPortNode(portId: string): unknown | null;
-    getAllEdges(): readonly unknown[];
+    getPortNodeId(portId: string): unknown | null;
+    getAllEdgeIds(): readonly unknown[];
     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[];
+    getPortAdjacentEdgeIds(portId: string): readonly unknown[];
+    getNodeAdjacentEdgeIds(nodeId: unknown): readonly unknown[];
+    getPortIncomingEdgeIds(portId: unknown): readonly unknown[];
+    getPortOutcomingEdgeIds(portId: unknown): readonly unknown[];
+    getPortCycleEdgeIds(portId: unknown): readonly unknown[];
+    getNodeIncomingEdgeIds(nodeId: unknown): readonly unknown[];
+    getNodeOutcomingEdgeIds(nodeId: unknown): readonly unknown[];
+    getNodeCycleEdgeIds(nodeId: unknown): readonly unknown[];
 }
 
 export declare class PublicViewportTransformer {
     private readonly transformer;
-    constructor(transformer: ViewportTransformer);
+    constructor(transformer: AbstractViewportTransformer);
     getViewportMatrix(): TransformState;
     getContentMatrix(): TransformState;
 }
@@ -543,8 +547,6 @@ export declare class PublicViewportTransformer {
 declare type SharedIncrementalPriority = "shared-incremental";
 
 export declare class StraightEdgeShape implements EdgeShape {
-    private readonly color;
-    private readonly width;
     private readonly arrowLength;
     private readonly arrowWidth;
     private readonly arrowOffset;
@@ -555,7 +557,7 @@ export declare class StraightEdgeShape implements EdgeShape {
     private readonly sourceArrow;
     private readonly targetArrow;
     constructor(color: string, width: number, arrowLength: number, arrowWidth: number, arrowOffset: number, hasSourceArrow: boolean, hasTargetArrow: boolean, roundness: number);
-    update(x: number, y: number, width: number, height: number, from: PortPayload, to: PortPayload): void;
+    update(x: number, y: number, width: number, height: number, from: GraphPort, to: GraphPort): void;
 }
 
 declare interface StraightEdgeShape_2 {
@@ -582,6 +584,7 @@ export declare interface TransformOptions {
     };
     readonly shift?: {
         readonly enabled?: boolean;
+        readonly cursor?: string | null;
     };
     readonly transformPreprocessor?: TransformPreprocessorOption | TransformPreprocessorOption[];
     readonly events?: {
@@ -619,7 +622,7 @@ declare interface TransformState {
 }
 
 export declare interface UpdateEdgeRequest {
-    readonly controller?: EdgeShape;
+    readonly shape?: EdgeShape_2;
     readonly priority?: number;
 }
 
@@ -652,7 +655,9 @@ export declare class UserDraggableNodesCanvas implements Canvas {
     private readonly onCanvasTouchMove;
     private readonly onCanvasTouchEnd;
     private previousTouchCoords;
-    private freezePriority;
+    private readonly freezePriority;
+    private readonly window;
+    private readonly dragCursor;
     constructor(canvas: Canvas, dragOptions?: DragOptions);
     addNode(request: AddNodeRequest): UserDraggableNodesCanvas;
     updateNode(nodeId: unknown, request: UpdateNodeRequest): UserDraggableNodesCanvas;
@@ -669,10 +674,13 @@ export declare class UserDraggableNodesCanvas implements Canvas {
     attach(element: HTMLElement): UserDraggableNodesCanvas;
     detach(): UserDraggableNodesCanvas;
     destroy(): void;
-    private setCursor;
     private dragNode;
     private updateMaxNodePriority;
     private moveNodeOnTop;
+    private cancelMouseDrag;
+    private removeMouseDragListeners;
+    private cancelTouchDrag;
+    private removeTouchDragListeners;
 }
 
 export declare class UserTransformableCanvas implements Canvas {
@@ -681,13 +689,13 @@ export declare class UserTransformableCanvas implements Canvas {
     readonly model: PublicGraphStore;
     readonly transformation: PublicViewportTransformer;
     private element;
-    private isMoving;
     private prevTouches;
     private readonly onTransformFinished;
     private readonly transformPreprocessor;
     private readonly isScalable;
     private readonly isShiftable;
     private readonly wheelSensitivity;
+    private window;
     private readonly onMouseDown;
     private readonly onMouseMove;
     private readonly onMouseUp;
@@ -696,6 +704,7 @@ export declare class UserTransformableCanvas implements Canvas {
     private readonly onTouchMove;
     private readonly onTouchEnd;
     private readonly observer;
+    private readonly shiftCursor;
     constructor(canvas: Canvas, options?: TransformOptions | undefined);
     addNode(node: AddNodeRequest): UserTransformableCanvas;
     updateNode(nodeId: unknown, request: UpdateNodeRequest): UserTransformableCanvas;
@@ -713,14 +722,15 @@ export declare class UserTransformableCanvas implements Canvas {
     detach(): UserTransformableCanvas;
     destroy(): void;
     private getAverageTouch;
-    private setCursor;
     private moveViewport;
     private scaleViewport;
+    private stopMouseDrag;
+    private removeMouseDragListeners;
+    private stopTouchDrag;
+    private removeTouchDragListeners;
 }
 
 export declare class VerticalEdgeShape implements EdgeShape {
-    private readonly color;
-    private readonly width;
     private readonly arrowLength;
     private readonly arrowWidth;
     private readonly arrowOffset;
@@ -731,7 +741,7 @@ export declare class VerticalEdgeShape implements EdgeShape {
     private readonly sourceArrow;
     private readonly targetArrow;
     constructor(color: string, width: number, arrowLength: number, arrowWidth: number, arrowOffset: number, hasSourceArrow: boolean, hasTargetArrow: boolean, roundness: number);
-    update(x: number, y: number, width: number, height: number, from: PortPayload, to: PortPayload): void;
+    update(x: number, y: number, width: number, height: number, from: GraphPort, to: GraphPort): void;
 }
 
 declare interface VerticalEdgeShape_2 {
@@ -749,14 +759,4 @@ declare interface VerticalEdgeShape_2 {
     readonly detourDirection?: number;
 }
 
-declare class ViewportTransformer {
-    private viewportMatrix;
-    private contentMatrix;
-    getViewportMatrix(): TransformState;
-    getContentMatrix(): TransformState;
-    patchViewportMatrix(scale: number | null, x: number | null, y: number | null): void;
-    patchContentMatrix(scale: number | null, dx: number | null, dy: number | null): void;
-    private calculateReverseMatrix;
-}
-
 export { }