@html-graph/html-graph 0.1.7 → 1.1.0

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

@@ -1,9 +1,9 @@
 export declare interface AddEdgeRequest {
-    readonly id?: unknown;
+    readonly id?: unknown | undefined;
     readonly from: string;
     readonly to: string;
-    readonly shape?: EdgeShape;
-    readonly priority?: number;
+    readonly shape?: EdgeShape | undefined;
+    readonly priority?: number | undefined;
 }
 
 declare interface AddEdgeRequest_2 {
@@ -17,13 +17,13 @@ declare interface AddEdgeRequest_2 {
 export declare type AddNodePorts = Iterable<MarkNodePortRequest>;
 
 export declare interface AddNodeRequest {
-    readonly id?: unknown;
+    readonly id?: unknown | undefined;
     readonly element: HTMLElement;
     readonly x: number;
     readonly y: number;
-    readonly ports?: AddNodePorts;
-    readonly centerFn?: CenterFn;
-    readonly priority?: number;
+    readonly ports?: AddNodePorts | undefined;
+    readonly centerFn?: CenterFn | undefined;
+    readonly priority?: number | undefined;
 }
 
 declare interface AddNodeRequest_2 {
@@ -76,18 +76,18 @@ export declare class BezierEdgeShape implements EdgeShape {
 }
 
 declare interface BezierEdgeShape_2 {
-    readonly type?: "bezier";
-    readonly color?: string;
-    readonly width?: number;
-    readonly curvature?: number;
-    readonly arrowLength?: number;
-    readonly arrowWidth?: number;
-    readonly hasSourceArrow?: boolean;
-    readonly hasTargetArrow?: boolean;
-    readonly cycleRadius?: number;
-    readonly smallCycleRadius?: number;
-    readonly detourDistance?: number;
-    readonly detourDirection?: number;
+    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 {
@@ -168,6 +168,27 @@ export declare interface Canvas {
     destroy(): void;
 }
 
+declare class CanvasBuilder {
+    private coreOptions;
+    private dragOptions;
+    private transformOptions;
+    private isDraggable;
+    private isTransformable;
+    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
  */
@@ -262,8 +283,8 @@ declare interface EdgePayload {
 }
 
 export declare interface EdgeRenderParams {
-    readonly source: EdgeRenderPort;
-    readonly target: EdgeRenderPort;
+    readonly from: EdgeRenderPort;
+    readonly to: EdgeRenderPort;
 }
 
 export declare interface EdgeRenderPort {
@@ -375,31 +396,17 @@ export declare class HorizontalEdgeShape implements EdgeShape {
 
 declare interface HorizontalEdgeShape_2 {
     readonly type: "horizontal";
-    readonly color?: string;
-    readonly width?: number;
-    readonly arrowLength?: number;
-    readonly arrowWidth?: number;
-    readonly arrowOffset?: number;
-    readonly hasSourceArrow?: boolean;
-    readonly hasTargetArrow?: boolean;
-    readonly cycleSquareSide?: number;
-    readonly roundness?: number;
-    readonly detourDistance?: number;
-    readonly detourDirection?: number;
-}
-
-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;
+    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 {
@@ -409,16 +416,16 @@ export declare class HtmlGraphError extends Error {
 declare type IncrementalPriority = "incremental";
 
 export declare type MarkNodePortRequest = {
-    readonly id?: unknown;
+    readonly id?: unknown | undefined;
     readonly element: HTMLElement;
-    readonly direction?: number;
+    readonly direction?: number | undefined;
 };
 
 export declare interface MarkPortRequest {
-    readonly id?: unknown;
+    readonly id?: unknown | undefined;
     readonly element: HTMLElement;
     readonly nodeId: unknown;
-    readonly direction?: number;
+    readonly direction?: number | undefined;
 }
 
 export declare interface NodeDragPayload {
@@ -437,15 +444,15 @@ declare interface NodePayload {
 }
 
 export declare interface PatchMatrixRequest {
-    readonly scale?: number;
-    readonly dx?: number;
-    readonly dy?: number;
+    readonly scale?: number | undefined;
+    readonly x?: number | undefined;
+    readonly y?: number | undefined;
 }
 
 declare interface PatchTransformRequest {
     readonly scale?: number;
-    readonly dx?: number;
-    readonly dy?: number;
+    readonly x?: number;
+    readonly y?: number;
 }
 
 export declare interface Point {
@@ -469,18 +476,18 @@ export declare class PublicGraphStore {
     getAllNodeIds(): readonly unknown[];
     getPort(portId: unknown): GraphPort | null;
     getAllPortIds(): readonly unknown[];
-    getNodePortIds(nodeId: unknown): readonly unknown[] | undefined;
+    getNodePortIds(nodeId: unknown): readonly unknown[] | null;
     getPortNodeId(portId: unknown): unknown | null;
     getAllEdgeIds(): readonly unknown[];
     getEdge(edgeId: unknown): GraphEdge | null;
-    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[];
+    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 class PublicViewportTransformer {
@@ -565,17 +572,17 @@ export declare class StraightEdgeShape implements EdgeShape {
 
 declare interface StraightEdgeShape_2 {
     readonly type: "straight";
-    readonly color?: string;
-    readonly width?: number;
-    readonly arrowLength?: number;
-    readonly arrowWidth?: number;
-    readonly arrowOffset?: number;
-    readonly hasSourceArrow?: boolean;
-    readonly hasTargetArrow?: boolean;
-    readonly cycleSquareSide?: number;
-    readonly roundness?: number;
-    readonly detourDistance?: number;
-    readonly detourDirection?: number;
+    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 {
@@ -599,8 +606,8 @@ export declare interface TransformOptions {
 
 export declare interface TransformPayload {
     readonly scale: number;
-    readonly dx: number;
-    readonly dy: number;
+    readonly x: number;
+    readonly y: number;
 }
 
 export declare type TransformPreprocessorFn = (params: TransformPreprocessorParams) => TransformPayload;
@@ -626,26 +633,26 @@ export declare interface TransformPreprocessorParams {
 
 declare interface TransformState {
     readonly scale: number;
-    readonly dx: number;
-    readonly dy: number;
+    readonly x: number;
+    readonly y: number;
 }
 
 export declare interface UpdateEdgeRequest {
-    readonly from?: unknown;
-    readonly to?: unknown;
-    readonly shape?: EdgeShape;
-    readonly priority?: number;
+    readonly from?: unknown | undefined;
+    readonly to?: unknown | undefined;
+    readonly shape?: EdgeShape | undefined;
+    readonly priority?: number | undefined;
 }
 
 export declare interface UpdateNodeRequest {
-    readonly x?: number;
-    readonly y?: number;
-    readonly priority?: number;
-    readonly centerFn?: CenterFn;
+    readonly x?: number | undefined;
+    readonly y?: number | undefined;
+    readonly priority?: number | undefined;
+    readonly centerFn?: CenterFn | undefined;
 }
 
 export declare interface UpdatePortRequest {
-    readonly direction?: number;
+    readonly direction?: number | undefined;
 }
 
 export declare class UserDraggableNodesCanvas implements Canvas {
@@ -689,7 +696,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 +713,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 +735,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;
@@ -764,17 +773,17 @@ export declare class VerticalEdgeShape implements EdgeShape {
 
 declare interface VerticalEdgeShape_2 {
     readonly type: "vertical";
-    readonly color?: string;
-    readonly width?: number;
-    readonly arrowLength?: number;
-    readonly arrowWidth?: number;
-    readonly arrowOffset?: number;
-    readonly hasSourceArrow?: boolean;
-    readonly hasTargetArrow?: boolean;
-    readonly cycleSquareSide?: number;
-    readonly roundness?: number;
-    readonly detourDistance?: number;
-    readonly detourDirection?: number;
+    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 class ViewportTransformer {