@html-graph/html-graph 1.0.0 → 1.1.1

package/README.md

@@ -20,7 +20,7 @@ npm i @html-graph/html-graph
 ```
 
 ```javascript
-import { HtmlGraphBuilder } from "@html-graph/html-graph";
+import { CanvasBuilder } from "@html-graph/html-graph";
 
 function createNode({ name, x, y, frontPortId, backPortId }) {
   const node = document.createElement("div");
@@ -33,9 +33,9 @@ function createNode({ name, x, y, frontPortId, backPortId }) {
   backPort.classList.add("port");
   text.innerText = name;
 
-  node.appendChild(backPort);
-  node.appendChild(text);
   node.appendChild(frontPort);
+  node.appendChild(text);
+  node.appendChild(backPort);
 
   return {
     element: node,
@@ -48,7 +48,7 @@ function createNode({ name, x, y, frontPortId, backPortId }) {
   };
 }
 
-const canvas = new HtmlGraphBuilder()
+const canvas = new CanvasBuilder()
   .setOptions({
     edges: {
       shape: {
@@ -57,7 +57,7 @@ const canvas = new HtmlGraphBuilder()
     },
   })
   .setUserDraggableNodes()
-  .setUserTransformableCanvas()
+  .setUserTransformableViewport()
   .setResizeReactiveNodes()
   .build();
 

package/dist/main.d.ts

@@ -90,6 +90,21 @@ declare interface BezierEdgeShape_2 {
     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;
+}
+
 export declare interface Canvas {
     /**
      * provides api for accessing graph model
@@ -168,25 +183,58 @@ export declare interface Canvas {
     destroy(): void;
 }
 
+declare class CanvasBuilder {
+    private coreOptions;
+    private dragOptions;
+    private transformOptions;
+    private hasDraggableNode;
+    private hasTransformableViewport;
+    private hasResizeReactiveNodes;
+    setOptions(options: CoreOptions): CanvasBuilder;
+    setUserDraggableNodes(options?: DragOptions): CanvasBuilder;
+    /**
+     * @deprecated
+     * use setUserTransformableViewport instead
+     */
+    setUserTransformableCanvas(options?: TransformOptions): CanvasBuilder;
+    setUserTransformableViewport(options?: TransformOptions): CanvasBuilder;
+    setResizeReactiveNodes(): CanvasBuilder;
+    build(): Canvas;
+}
+export { CanvasBuilder }
+export { CanvasBuilder as HtmlGraphBuilder }
+
 /**
- * Provides low level API for acting on graph
+ * @deprecated
  */
 export declare class CanvasCore implements Canvas {
-    private readonly apiOptions?;
     readonly transformation: PublicViewportTransformer;
     readonly model: PublicGraphStore;
-    private readonly canvasController;
-    private readonly edgeShapeFactory;
-    constructor(apiOptions?: CoreOptions | undefined);
+    private readonly internalTransformation;
+    private readonly internalModel;
+    private readonly graphStoreController;
+    private readonly htmlController;
+    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;
+    private readonly onAfterTransformUpdate;
+    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(edge: AddEdgeRequest): CanvasCore;
+    addEdge(request: AddEdgeRequest): CanvasCore;
     updateEdge(edgeId: unknown, request?: UpdateEdgeRequest): CanvasCore;
     removeEdge(edgeId: unknown): CanvasCore;
-    markPort(port: MarkPortRequest): CanvasCore;
+    markPort(request: MarkPortRequest): CanvasCore;
     updatePort(portId: string, request?: UpdatePortRequest): CanvasCore;
     unmarkPort(portId: string): CanvasCore;
     patchViewportMatrix(request: PatchMatrixRequest): CanvasCore;
@@ -199,6 +247,8 @@ 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
@@ -238,8 +288,49 @@ 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?: {
@@ -250,7 +341,7 @@ export declare interface DragOptions {
     readonly events?: {
         readonly onNodeDrag?: (payload: NodeDragPayload) => void;
         readonly onBeforeNodeDrag?: (payload: NodeDragPayload) => boolean;
-        readonly onNodeDragFinished?: (nodeId: NodeDragPayload) => void;
+        readonly onNodeDragFinished?: (payload: NodeDragPayload) => void;
     };
 }
 
@@ -283,8 +374,17 @@ export declare interface EdgeShape {
 
 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 EdgeShapeFactory = () => EdgeShape;
 
+declare type EdgeShapeFactory_2 = () => EdgeShape;
+
+declare interface EventHandler<T> {
+    subscribe(callback: (payload: T) => void): void;
+    unsubscribe(callback: (payload: T) => void): void;
+}
+
 export declare interface GraphEdge {
     readonly from: unknown;
     readonly to: unknown;
@@ -304,6 +404,9 @@ export declare interface GraphPort {
     readonly direction: number;
 }
 
+/**
+ * This entity is responsible for storing state of graph
+ */
 declare class GraphStore {
     private readonly nodes;
     private readonly ports;
@@ -388,18 +491,19 @@ declare interface HorizontalEdgeShape_2 {
     readonly detourDirection?: number | undefined;
 }
 
-export declare class HtmlGraphBuilder {
-    private coreOptions;
-    private dragOptions;
-    private transformOptions;
-    private isDraggable;
-    private isTransformable;
-    private hasResizeReactiveNodes;
-    setOptions(options: CoreOptions): HtmlGraphBuilder;
-    setUserDraggableNodes(options?: DragOptions): HtmlGraphBuilder;
-    setUserTransformableCanvas(options?: TransformOptions): HtmlGraphBuilder;
-    setResizeReactiveNodes(): HtmlGraphBuilder;
-    build(): Canvas;
+declare interface HorizontalEdgeShape_3 {
+    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;
 }
 
 export declare class HtmlGraphError extends Error {
@@ -408,6 +512,8 @@ 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;
@@ -415,10 +521,10 @@ export declare type MarkNodePortRequest = {
 };
 
 export declare interface MarkPortRequest {
-    readonly id?: unknown | undefined;
+    readonly id?: unknown;
     readonly element: HTMLElement;
     readonly nodeId: unknown;
-    readonly direction?: number | undefined;
+    readonly direction?: number;
 }
 
 export declare interface NodeDragPayload {
@@ -460,8 +566,13 @@ declare interface PortPayload {
 
 declare type Priority = ConstantPriority | IncrementalPriority | SharedIncrementalPriority | CustomPriority;
 
+declare type Priority_2 = ConstantPriority_2 | IncrementalPriority_2 | SharedIncrementalPriority_2 | CustomPriority_2;
+
 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);
@@ -483,6 +594,10 @@ export declare class PublicGraphStore {
     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);
@@ -513,7 +628,7 @@ export declare class ResizeReactiveNodesCanvas implements Canvas {
     patchContentMatrix(request: PatchMatrixRequest): ResizeReactiveNodesCanvas;
     clear(): ResizeReactiveNodesCanvas;
     destroy(): void;
-    private reactNodeChange;
+    private handleNodeResize;
 }
 
 export declare interface ScaleLimitPreprocessorParams {
@@ -523,6 +638,8 @@ export declare interface ScaleLimitPreprocessorParams {
 
 declare type SharedIncrementalPriority = "shared-incremental";
 
+declare type SharedIncrementalPriority_2 = "shared-incremental";
+
 export declare interface ShiftLimitPreprocessorParams {
     readonly minX: number | null;
     readonly maxX: number | null;
@@ -578,6 +695,21 @@ declare interface StraightEdgeShape_2 {
     readonly detourDirection?: number | undefined;
 }
 
+declare interface StraightEdgeShape_3 {
+    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;
+}
+
 export declare interface TransformOptions {
     readonly scale?: {
         readonly mouseWheelSensitivity?: number;
@@ -645,7 +777,7 @@ export declare interface UpdateNodeRequest {
 }
 
 export declare interface UpdatePortRequest {
-    readonly direction?: number | undefined;
+    readonly direction?: number;
 }
 
 export declare class UserDraggableNodesCanvas implements Canvas {
@@ -689,7 +821,7 @@ export declare class UserDraggableNodesCanvas implements Canvas {
     private removeTouchDragListeners;
 }
 
-export declare class UserTransformableCanvas implements Canvas {
+declare class UserTransformableViewportCanvas implements Canvas {
     private readonly canvas;
     readonly model: PublicGraphStore;
     readonly transformation: PublicViewportTransformer;
@@ -706,20 +838,20 @@ export declare class UserTransformableCanvas implements Canvas {
     private readonly observer;
     private readonly options;
     constructor(canvas: Canvas, transformOptions?: TransformOptions);
-    attach(element: HTMLElement): UserTransformableCanvas;
-    detach(): UserTransformableCanvas;
-    addNode(node: AddNodeRequest): UserTransformableCanvas;
-    updateNode(nodeId: unknown, request?: UpdateNodeRequest): UserTransformableCanvas;
-    removeNode(nodeId: unknown): UserTransformableCanvas;
-    markPort(port: MarkPortRequest): UserTransformableCanvas;
-    updatePort(portId: string, request?: UpdatePortRequest): UserTransformableCanvas;
-    unmarkPort(portId: string): UserTransformableCanvas;
-    addEdge(edge: AddEdgeRequest): UserTransformableCanvas;
-    updateEdge(edgeId: unknown, request?: UpdateEdgeRequest): UserTransformableCanvas;
-    removeEdge(edgeId: unknown): UserTransformableCanvas;
-    patchViewportMatrix(request: PatchMatrixRequest): UserTransformableCanvas;
-    patchContentMatrix(request: PatchMatrixRequest): UserTransformableCanvas;
-    clear(): UserTransformableCanvas;
+    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;
@@ -728,6 +860,8 @@ export declare class UserTransformableCanvas implements Canvas {
     private stopTouchDrag;
     private removeTouchDragListeners;
 }
+export { UserTransformableViewportCanvas as UserTransformableCanvas }
+export { UserTransformableViewportCanvas }
 
 export declare interface VerticalEdgeParams {
     readonly color?: string | undefined;
@@ -777,9 +911,30 @@ declare interface VerticalEdgeShape_2 {
     readonly detourDirection?: number | undefined;
 }
 
+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 storing viewport transformation
+ */
 declare class ViewportTransformer {
     private viewportMatrix;
     private contentMatrix;
+    private readonly emitter;
+    readonly onAfterUpdate: EventHandler<void>;
+    constructor();
     getViewportMatrix(): TransformState;
     getContentMatrix(): TransformState;
     patchViewportMatrix(matrix: PatchTransformRequest): void;