@html-graph/html-graph 0.0.56 → 0.0.58

package/README.md

@@ -6,21 +6,21 @@
 
 ![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>.
-
 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.
 
+Visit <a target="_blank" href="https://html-graph.github.io">use cases</a> and [use cases implementation](use-cases).
+
 ## Features:
 
 - 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 { HtmlGraphBuilder, AddNodeRequest } from "@html-graph/html-graph";
+```javascript
+import { HtmlGraphBuilder } from "@html-graph/html-graph";
 
 const canvas = new HtmlGraphBuilder()
   .setOptions({
@@ -48,27 +48,20 @@ const canvas = new HtmlGraphBuilder()
   .setUserTransformableCanvas()
   .build();
 
-function createNode(
-  name: string,
-  x: number,
-  y: number,
-  frontPortId: string,
-  backPortId: string,
-): AddNodeRequest {
+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 {
     element: node,
@@ -81,10 +74,23 @@ function createNode(
   };
 }
 
-const node1 = createNode("Node 1", 200, 400, "port-1-1", "port-1-2");
-const node2 = createNode("Node 2", 600, 500, "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 canvasElement = document.getElementById("canvas")!;
+const node2 = createNode({
+  name: "Node 2",
+  x: 600,
+  y: 500,
+  frontPortId: "port-2-1",
+  backPortId: "port-2-2",
+});
+
+const canvasElement = document.getElementById("canvas");
 
 canvas
   .attach(canvasElement)
@@ -93,9 +99,7 @@ canvas
   .addEdge({ from: "port-1-2", to: "port-2-1" });
 ```
 
-Refer to [Use cases](use-cases) for more.
-
-## Run examples
+## Run use cases
 
 ```
 npm install

package/dist/main.d.ts

@@ -1,3 +1,10 @@
+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 {
     readonly id?: unknown;
     readonly from: string;
@@ -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,8 @@ 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(to: Point, flipX: number, flipY: number, fromDir: number, toDir: number): void;
+    private createLinePath;
 }
 
 declare interface BezierEdgeShape_2 {
@@ -155,7 +162,7 @@ export declare class CanvasCore implements Canvas {
     updateNode(nodeId: unknown, request: UpdateNodeRequest): CanvasCore;
     removeNode(nodeId: unknown): CanvasCore;
     markPort(port: MarkPortRequest): CanvasCore;
-    updatePort(portId: string, request: UpdatePortRequest): CanvasCore;
+    updatePort(portId: string, request?: UpdatePortRequest): CanvasCore;
     unmarkPort(portId: string): CanvasCore;
     addEdge(edge: AddEdgeRequest): CanvasCore;
     updateEdge(edgeId: unknown, request: UpdateEdgeRequest): CanvasCore;
@@ -284,8 +291,6 @@ declare interface CustomEdgeShape {
 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 +300,11 @@ 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(_to: Point, flipX: number, flipY: number, fromDir: number): void;
+    private createLinePath;
 }
 
 export declare class CycleSquareEdgeShape implements EdgeShape {
-    private readonly color;
-    private readonly width;
     private readonly arrowLength;
     private readonly arrowWidth;
     private readonly side;
@@ -312,12 +316,11 @@ 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(_to: Point, flipX: number, flipY: number, fromDir: number): void;
+    private createLinePath;
 }
 
 export declare class DetourStraightEdgeShape implements EdgeShape {
-    private readonly color;
-    private readonly width;
     private readonly arrowLength;
     private readonly arrowWidth;
     private readonly arrowOffset;
@@ -330,11 +333,13 @@ 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(to: Point, flipX: number, flipY: number, fromDir: number, toDir: number): void;
+    private createLinePath;
 }
 
 export declare interface DragOptions {
     grabPriorityStrategy?: "freeze" | "move-on-top";
+    dragCursor?: string | null;
     events?: {
         onNodeDrag?: (payload: NodeDragPayload) => void;
         onBeforeNodeDrag?: (payload: NodeDragPayload) => boolean;
@@ -342,15 +347,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(to: Point, flipX: number, flipY: number, fromDir: number, toDir: number): void;
 }
 
 declare type EdgeShape_2 = BezierEdgeShape_2 | StraightEdgeShape_2 | CustomEdgeShape | HorizontalEdgeShape_2 | VerticalEdgeShape_2;
@@ -393,33 +398,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: unknown): unknown | undefined;
+    getAllPortIds(): readonly unknown[];
+    getNodePortIds(nodeId: unknown): readonly unknown[] | undefined;
+    getPortNodeId(portId: unknown): unknown | undefined;
     removePort(portId: unknown): void;
-    addEdge(edgeId: unknown, fromPortId: string, toPortId: string, shape: EdgeShape, priority: number): void;
-    getAllEdges(): readonly unknown[];
+    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 +433,8 @@ 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(to: Point, flipX: number, flipY: number, fromDir: number, toDir: number): void;
+    private createLinePath;
 }
 
 declare interface HorizontalEdgeShape_2 {
@@ -460,6 +464,10 @@ export declare class HtmlGraphBuilder {
     build(): Canvas;
 }
 
+export declare class HtmlGraphError extends Error {
+    readonly name = "HtmlGraphError";
+}
+
 declare type IncrementalPriority = "incremental";
 
 export declare type MarkNodePortRequest = {
@@ -503,7 +511,7 @@ export declare interface Point {
     readonly y: number;
 }
 
-export declare interface PortPayload {
+declare interface PortPayload {
     readonly element: HTMLElement;
     centerFn: CenterFn;
     direction: number;
@@ -516,27 +524,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;
 }
@@ -544,8 +552,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;
@@ -556,7 +562,8 @@ 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(to: Point, flipX: number, flipY: number, fromDir: number, toDir: number): void;
+    private createLinePath;
 }
 
 declare interface StraightEdgeShape_2 {
@@ -583,6 +590,7 @@ export declare interface TransformOptions {
     };
     readonly shift?: {
         readonly enabled?: boolean;
+        readonly cursor?: string | null;
     };
     readonly transformPreprocessor?: TransformPreprocessorOption | TransformPreprocessorOption[];
     readonly events?: {
@@ -655,6 +663,7 @@ export declare class UserDraggableNodesCanvas implements Canvas {
     private previousTouchCoords;
     private readonly freezePriority;
     private readonly window;
+    private readonly dragCursor;
     constructor(canvas: Canvas, dragOptions?: DragOptions);
     addNode(request: AddNodeRequest): UserDraggableNodesCanvas;
     updateNode(nodeId: unknown, request: UpdateNodeRequest): UserDraggableNodesCanvas;
@@ -701,6 +710,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;
@@ -727,8 +737,6 @@ export declare class UserTransformableCanvas implements Canvas {
 }
 
 export declare class VerticalEdgeShape implements EdgeShape {
-    private readonly color;
-    private readonly width;
     private readonly arrowLength;
     private readonly arrowWidth;
     private readonly arrowOffset;
@@ -739,7 +747,8 @@ 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(to: Point, flipX: number, flipY: number, fromDir: number, toDir: number): void;
+    private createLinePath;
 }
 
 declare interface VerticalEdgeShape_2 {
@@ -757,14 +766,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 { }