@html-graph/html-graph 0.0.61 → 0.1.0

package/README.md

@@ -6,20 +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/use-cases/020-advanced-demo/index.html">
+<a target="_blank" href="https://html-graph.github.io/use-cases/020-advanced-demo/">
     <img width="100%" src="https://raw.githubusercontent.com/html-graph/html-graph/master/media/full-demo.gif"/>
 </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">use cases</a> and [use cases implementation](use-cases).
+Visit <a target="_blank" href="https://html-graph.github.io/use-cases/">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
+- draggable and scalable canvas
+- draggable and resizable nodes
 - exhaustive set of use cases
 - typescript support
 - mobile devices support
@@ -43,6 +44,7 @@ const canvas = new HtmlGraphBuilder()
   })
   .setUserDraggableNodes()
   .setUserTransformableCanvas()
+  .setResizeReactiveNodes()
   .build();
 
 function createNode({ name, x, y, frontPortId, backPortId }) {

package/dist/main.d.ts

@@ -43,6 +43,8 @@ declare interface AddPortRequest {
     readonly direction: number;
 }
 
+export declare type BeforeTransformStartedFn = () => void;
+
 export declare class BezierEdgeShape implements EdgeShape {
     private readonly curvature;
     private readonly arrowLength;
@@ -102,12 +104,12 @@ export declare interface Canvas {
     /**
      * updates port and attached edges
      */
-    updatePort(portId: string, request?: UpdatePortRequest): Canvas;
+    updatePortMark(portId: unknown, request?: UpdatePortMarkRequest): Canvas;
     /**
      * ummarks element as port of node
      * all the edges adjacent to port get removed
      */
-    unmarkPort(portId: string): Canvas;
+    unmarkPort(portId: unknown): Canvas;
     /**
      * adds edge to graph
      */
@@ -157,26 +159,23 @@ export declare class CanvasCore implements Canvas {
     private readonly apiOptions?;
     readonly transformation: PublicViewportTransformer;
     readonly model: PublicGraphStore;
-    private readonly di;
+    private readonly canvasController;
     private readonly edgeShapeFactory;
-    private readonly nodes;
-    private readonly nodeIdGenerator;
-    private readonly nodesResizeObserver;
     constructor(apiOptions?: CoreOptions | undefined);
+    attach(element: HTMLElement): CanvasCore;
+    detach(): CanvasCore;
     addNode(request: AddNodeRequest): CanvasCore;
     updateNode(nodeId: unknown, request?: UpdateNodeRequest): CanvasCore;
     removeNode(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;
+    markPort(port: MarkPortRequest): CanvasCore;
+    updatePortMark(portId: string, request?: UpdatePortMarkRequest): CanvasCore;
+    unmarkPort(portId: string): CanvasCore;
     patchViewportMatrix(request: PatchMatrixRequest): CanvasCore;
     patchContentMatrix(request: PatchMatrixRequest): CanvasCore;
     clear(): CanvasCore;
-    attach(element: HTMLElement): CanvasCore;
-    detach(): CanvasCore;
     destroy(): void;
 }
 
@@ -229,59 +228,59 @@ export declare interface CoreOptions {
 }
 
 export declare const createBezierEdgeShapeFactory: (options: {
-    color: string;
-    width: number;
-    arrowLength: number;
-    arrowWidth: number;
-    curvature: number;
-    hasSourceArrow: boolean;
-    hasTargetArrow: boolean;
-    cycleRadius: number;
-    smallCycleRadius: number;
-    detourDistance: number;
-    detourDirection: number;
+    readonly color: string;
+    readonly width: number;
+    readonly arrowLength: number;
+    readonly arrowWidth: number;
+    readonly curvature: number;
+    readonly hasSourceArrow: boolean;
+    readonly hasTargetArrow: boolean;
+    readonly cycleRadius: number;
+    readonly smallCycleRadius: number;
+    readonly detourDistance: number;
+    readonly detourDirection: number;
 }) => EdgeShapeFactory;
 
 export declare const createHorizontalEdgeShapeFactory: (options: {
-    color: string;
-    width: number;
-    arrowLength: number;
-    arrowWidth: number;
-    arrowOffset: number;
-    hasSourceArrow: boolean;
-    hasTargetArrow: boolean;
-    cycleSquareSide: number;
-    roundness: number;
-    detourDistance: number;
-    detourDirection: number;
+    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;
 }) => EdgeShapeFactory;
 
 export declare const createStraightEdgeShareFactory: (options: {
-    color: string;
-    width: number;
-    arrowLength: number;
-    arrowWidth: number;
-    arrowOffset: number;
-    hasSourceArrow: boolean;
-    hasTargetArrow: boolean;
-    cycleSquareSide: number;
-    roundness: number;
-    detourDistance: number;
-    detourDirection: number;
+    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;
 }) => EdgeShapeFactory;
 
 export declare const createVerticalEdgeShapeFactory: (options: {
-    color: string;
-    width: number;
-    arrowLength: number;
-    arrowWidth: number;
-    arrowOffset: number;
-    hasSourceArrow: boolean;
-    hasTargetArrow: boolean;
-    cycleSquareSide: number;
-    roundness: number;
-    detourDistance: number;
-    detourDirection: number;
+    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;
 }) => EdgeShapeFactory;
 
 declare interface CustomEdgeShape {
@@ -353,11 +352,11 @@ export declare class DetourStraightEdgeShape implements EdgeShape {
 }
 
 export declare interface DragOptions {
-    grabPriorityStrategy?: "freeze" | "move-on-top";
-    dragCursor?: string | null;
-    events?: {
-        onNodeDrag?: (payload: NodeDragPayload) => void;
-        onBeforeNodeDrag?: (payload: NodeDragPayload) => boolean;
+    readonly moveOnTop?: boolean;
+    readonly dragCursor?: string | null;
+    readonly events?: {
+        readonly onNodeDrag?: (payload: NodeDragPayload) => void;
+        readonly onBeforeNodeDrag?: (payload: NodeDragPayload) => boolean;
     };
 }
 
@@ -473,9 +472,11 @@ export declare class HtmlGraphBuilder {
     private transformOptions;
     private isDraggable;
     private isTransformable;
+    private hasResizeReactiveNodes;
     setOptions(options: CoreOptions): HtmlGraphBuilder;
     setUserDraggableNodes(options?: DragOptions): HtmlGraphBuilder;
     setUserTransformableCanvas(options?: TransformOptions): HtmlGraphBuilder;
+    setResizableReactiveNodes(): HtmlGraphBuilder;
     build(): Canvas;
 }
 
@@ -570,8 +571,46 @@ export declare class PublicViewportTransformer {
     getContentMatrix(): TransformState;
 }
 
+export declare class ResizeReactiveNodesCanvas implements Canvas {
+    private readonly canvas;
+    readonly transformation: PublicViewportTransformer;
+    readonly model: PublicGraphStore;
+    private readonly nodes;
+    private readonly nodeIdGenerator;
+    private readonly nodesResizeObserver;
+    constructor(canvas: Canvas);
+    attach(element: HTMLElement): ResizeReactiveNodesCanvas;
+    detach(): ResizeReactiveNodesCanvas;
+    addNode(request: AddNodeRequest): ResizeReactiveNodesCanvas;
+    updateNode(nodeId: unknown, request?: UpdateNodeRequest): ResizeReactiveNodesCanvas;
+    removeNode(nodeId: unknown): ResizeReactiveNodesCanvas;
+    markPort(port: MarkPortRequest): ResizeReactiveNodesCanvas;
+    updatePortMark(portId: string, request?: UpdatePortMarkRequest): ResizeReactiveNodesCanvas;
+    unmarkPort(portId: string): ResizeReactiveNodesCanvas;
+    addEdge(edge: AddEdgeRequest): ResizeReactiveNodesCanvas;
+    updateEdge(edgeId: unknown, request?: UpdateEdgeRequest): ResizeReactiveNodesCanvas;
+    removeEdge(edgeId: unknown): ResizeReactiveNodesCanvas;
+    patchViewportMatrix(request: PatchMatrixRequest): ResizeReactiveNodesCanvas;
+    patchContentMatrix(request: PatchMatrixRequest): ResizeReactiveNodesCanvas;
+    clear(): ResizeReactiveNodesCanvas;
+    destroy(): void;
+    private reactNodeChange;
+}
+
+export declare interface ScaleLimitPreprocessorParams {
+    readonly minContentScale: number | null;
+    readonly maxContentScale: number | null;
+}
+
 declare type SharedIncrementalPriority = "shared-incremental";
 
+export declare interface ShiftLimitPreprocessorParams {
+    readonly minX: number | null;
+    readonly maxX: number | null;
+    readonly minY: number | null;
+    readonly maxY: number | null;
+}
+
 export declare class StraightEdgeShape implements EdgeShape {
     private readonly arrowLength;
     private readonly arrowWidth;
@@ -606,15 +645,14 @@ export declare type TransformFinishedFn = () => void;
 
 export declare interface TransformOptions {
     readonly scale?: {
-        readonly enabled?: boolean;
         readonly wheelSensitivity?: number;
     };
     readonly shift?: {
-        readonly enabled?: boolean;
         readonly cursor?: string | null;
     };
     readonly transformPreprocessor?: TransformPreprocessorOption | TransformPreprocessorOption[];
     readonly events?: {
+        readonly onBeforeTransformStarted?: BeforeTransformStartedFn;
         readonly onTransformFinished?: TransformFinishedFn;
     };
 }
@@ -625,7 +663,7 @@ export declare interface TransformPayload {
     readonly dy: number;
 }
 
-export declare type TransformPreprocessorFn = (prevTransform: TransformPayload, nextTransform: TransformPayload, canvasWidth: number, canvasHeight: number) => TransformPayload;
+export declare type TransformPreprocessorFn = (params: TransformPreprocessorParams) => TransformPayload;
 
 declare type TransformPreprocessorOption = {
     readonly type: "scale-limit";
@@ -637,10 +675,14 @@ declare type TransformPreprocessorOption = {
     readonly maxX?: number;
     readonly minY?: number;
     readonly maxY?: number;
-} | {
-    readonly type: "custom";
-    readonly preprocessorFn: TransformPreprocessorFn;
-};
+} | TransformPreprocessorFn;
+
+export declare interface TransformPreprocessorParams {
+    readonly prevTransform: TransformPayload;
+    readonly nextTransform: TransformPayload;
+    readonly canvasWidth: number;
+    readonly canvasHeight: number;
+}
 
 declare interface TransformState {
     readonly scale: number;
@@ -660,7 +702,7 @@ declare interface UpdateNodeRequest {
     readonly centerFn?: CenterFn;
 }
 
-declare interface UpdatePortRequest {
+export declare interface UpdatePortMarkRequest {
     readonly direction?: number;
     readonly centerFn?: CenterFn;
 }
@@ -676,21 +718,22 @@ export declare class UserDraggableNodesCanvas implements Canvas {
     private onBeforeNodeDrag;
     private readonly nodeIdGenerator;
     private element;
-    private readonly onCanvasMouseUp;
-    private readonly onCanvasMouseMove;
-    private readonly onCanvasTouchStart;
-    private readonly onCanvasTouchMove;
-    private readonly onCanvasTouchEnd;
+    private readonly onWindowMouseMove;
+    private readonly onWindowMouseUp;
+    private readonly onWindowTouchMove;
+    private readonly onWindowTouchFinish;
     private previousTouchCoords;
     private readonly freezePriority;
     private readonly window;
     private readonly dragCursor;
     constructor(canvas: Canvas, dragOptions?: DragOptions);
+    attach(element: HTMLElement): UserDraggableNodesCanvas;
+    detach(): UserDraggableNodesCanvas;
     addNode(request: AddNodeRequest): UserDraggableNodesCanvas;
     updateNode(nodeId: unknown, request?: UpdateNodeRequest): UserDraggableNodesCanvas;
     removeNode(nodeId: unknown): UserDraggableNodesCanvas;
     markPort(port: MarkPortRequest): UserDraggableNodesCanvas;
-    updatePort(portId: string, request?: UpdatePortRequest): UserDraggableNodesCanvas;
+    updatePortMark(portId: string, request?: UpdatePortMarkRequest): UserDraggableNodesCanvas;
     unmarkPort(portId: string): UserDraggableNodesCanvas;
     addEdge(edge: AddEdgeRequest): UserDraggableNodesCanvas;
     updateEdge(edgeId: unknown, request?: UpdateEdgeRequest): UserDraggableNodesCanvas;
@@ -698,8 +741,6 @@ export declare class UserDraggableNodesCanvas implements Canvas {
     patchViewportMatrix(request: PatchMatrixRequest): UserDraggableNodesCanvas;
     patchContentMatrix(request: PatchMatrixRequest): UserDraggableNodesCanvas;
     clear(): UserDraggableNodesCanvas;
-    attach(element: HTMLElement): UserDraggableNodesCanvas;
-    detach(): UserDraggableNodesCanvas;
     destroy(): void;
     private dragNode;
     private updateMaxNodePriority;
@@ -712,32 +753,28 @@ export declare class UserDraggableNodesCanvas implements Canvas {
 
 export declare class UserTransformableCanvas implements Canvas {
     private readonly canvas;
-    private readonly options?;
     readonly model: PublicGraphStore;
     readonly transformation: PublicViewportTransformer;
     private element;
     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;
+    private readonly onWindowMouseMove;
+    private readonly onWindowMouseUp;
     private readonly onWheelScroll;
     private readonly onTouchStart;
-    private readonly onTouchMove;
-    private readonly onTouchEnd;
+    private readonly onWindowTouchMove;
+    private readonly onWindowTouchFinish;
     private readonly observer;
-    private readonly shiftCursor;
-    constructor(canvas: Canvas, options?: TransformOptions | undefined);
+    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;
+    updatePortMark(portId: string, request?: UpdatePortMarkRequest): UserTransformableCanvas;
     unmarkPort(portId: string): UserTransformableCanvas;
     addEdge(edge: AddEdgeRequest): UserTransformableCanvas;
     updateEdge(edgeId: unknown, request?: UpdateEdgeRequest): UserTransformableCanvas;
@@ -745,10 +782,7 @@ export declare class UserTransformableCanvas implements Canvas {
     patchViewportMatrix(request: PatchMatrixRequest): UserTransformableCanvas;
     patchContentMatrix(request: PatchMatrixRequest): UserTransformableCanvas;
     clear(): UserTransformableCanvas;
-    attach(element: HTMLElement): UserTransformableCanvas;
-    detach(): UserTransformableCanvas;
     destroy(): void;
-    private getAverageTouch;
     private moveViewport;
     private scaleViewport;
     private stopMouseDrag;