@next-bricks/diagram 0.8.0 → 0.9.0

package/dist/types.json

@@ -71,8 +71,17 @@
       {
         "name": "layout",
         "annotation": {
-          "type": "jsLiteral",
-          "value": "dagre"
+          "type": "union",
+          "types": [
+            {
+              "type": "jsLiteral",
+              "value": "dagre"
+            },
+            {
+              "type": "jsLiteral",
+              "value": "force"
+            }
+          ]
         }
       },
       {
@@ -133,7 +142,7 @@
           "type": "reference",
           "typeName": {
             "type": "identifier",
-            "name": "LayoutOptionsDagre"
+            "name": "LayoutOptions"
           }
         }
       },
@@ -674,11 +683,26 @@
               "name": "text"
             },
             "annotation": {
-              "type": "reference",
-              "typeName": {
-                "type": "identifier",
-                "name": "TextOptions"
-              }
+              "type": "union",
+              "types": [
+                {
+                  "type": "reference",
+                  "typeName": {
+                    "type": "identifier",
+                    "name": "TextOptions"
+                  }
+                },
+                {
+                  "type": "array",
+                  "elementType": {
+                    "type": "reference",
+                    "typeName": {
+                      "type": "identifier",
+                      "name": "TextOptions"
+                    }
+                  }
+                }
+              ]
             },
             "optional": true,
             "computed": false
@@ -690,11 +714,26 @@
               "name": "label"
             },
             "annotation": {
-              "type": "reference",
-              "typeName": {
-                "type": "identifier",
-                "name": "LineLabelConf"
-              }
+              "type": "union",
+              "types": [
+                {
+                  "type": "reference",
+                  "typeName": {
+                    "type": "identifier",
+                    "name": "LineLabelConf"
+                  }
+                },
+                {
+                  "type": "array",
+                  "elementType": {
+                    "type": "reference",
+                    "typeName": {
+                      "type": "identifier",
+                      "name": "LineLabelConf"
+                    }
+                  }
+                }
+              ]
             },
             "optional": true,
             "computed": false
@@ -762,9 +801,46 @@
             },
             "optional": true,
             "computed": false
+          },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "placement"
+            },
+            "annotation": {
+              "type": "reference",
+              "typeName": {
+                "type": "identifier",
+                "name": "LineLabelPlacement"
+              }
+            },
+            "optional": true,
+            "computed": false
           }
         ]
       },
+      {
+        "type": "typeAlias",
+        "name": "LineLabelPlacement",
+        "annotation": {
+          "type": "union",
+          "types": [
+            {
+              "type": "jsLiteral",
+              "value": "center"
+            },
+            {
+              "type": "jsLiteral",
+              "value": "start"
+            },
+            {
+              "type": "jsLiteral",
+              "value": "end"
+            }
+          ]
+        }
+      },
       {
         "type": "interface",
         "name": "LineLabelConf",
@@ -809,29 +885,52 @@
               }
             },
             "computed": false
-          }
-        ]
-      },
-      {
-        "type": "interface",
-        "name": "LayoutOptionsDagre",
-        "body": [
+          },
           {
             "type": "propertySignature",
             "key": {
               "type": "identifier",
-              "name": "nodePadding"
+              "name": "placement"
             },
             "annotation": {
               "type": "reference",
               "typeName": {
                 "type": "identifier",
-                "name": "PartialRectTuple"
+                "name": "LineLabelPlacement"
               }
             },
             "optional": true,
             "computed": false
-          },
+          }
+        ]
+      },
+      {
+        "type": "typeAlias",
+        "name": "LayoutOptions",
+        "annotation": {
+          "type": "union",
+          "types": [
+            {
+              "type": "reference",
+              "typeName": {
+                "type": "identifier",
+                "name": "LayoutOptionsDagre"
+              }
+            },
+            {
+              "type": "reference",
+              "typeName": {
+                "type": "identifier",
+                "name": "LayoutOptionsForce"
+              }
+            }
+          ]
+        }
+      },
+      {
+        "type": "interface",
+        "name": "LayoutOptionsDagre",
+        "body": [
           {
             "type": "propertySignature",
             "key": {
@@ -931,130 +1030,127 @@
             "optional": true,
             "computed": false
           }
+        ],
+        "extends": [
+          {
+            "type": "expressionWithTypeArguments",
+            "expression": {
+              "type": "identifier",
+              "name": "BaseLayoutOptions"
+            }
+          }
         ]
       },
       {
-        "type": "typeAlias",
-        "name": "PartialRectTuple",
-        "annotation": {
-          "type": "union",
-          "types": [
-            {
+        "type": "interface",
+        "name": "LayoutOptionsForce",
+        "body": [
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "dummyNodesOnEdges"
+            },
+            "annotation": {
               "type": "keyword",
               "value": "number"
             },
-            {
-              "type": "tuple",
-              "elementTypes": [
-                {
-                  "type": "namedTupleMember",
-                  "label": "all",
-                  "optional": false,
-                  "elementType": {
-                    "type": "keyword",
-                    "value": "number"
-                  }
-                }
-              ]
-            },
-            {
-              "type": "tuple",
-              "elementTypes": [
-                {
-                  "type": "namedTupleMember",
-                  "label": "vertical",
-                  "optional": false,
-                  "elementType": {
-                    "type": "keyword",
-                    "value": "number"
-                  }
-                },
-                {
-                  "type": "namedTupleMember",
-                  "label": "horizontal",
-                  "optional": false,
-                  "elementType": {
-                    "type": "keyword",
-                    "value": "number"
-                  }
-                }
-              ]
+            "optional": true,
+            "computed": false
+          },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "collide"
             },
-            {
-              "type": "tuple",
-              "elementTypes": [
-                {
-                  "type": "namedTupleMember",
-                  "label": "top",
-                  "optional": false,
-                  "elementType": {
-                    "type": "keyword",
-                    "value": "number"
-                  }
-                },
+            "annotation": {
+              "type": "union",
+              "types": [
                 {
-                  "type": "namedTupleMember",
-                  "label": "horizontal",
-                  "optional": false,
-                  "elementType": {
-                    "type": "keyword",
-                    "value": "number"
-                  }
+                  "type": "keyword",
+                  "value": "boolean"
                 },
                 {
-                  "type": "namedTupleMember",
-                  "label": "bottom",
-                  "optional": false,
-                  "elementType": {
-                    "type": "keyword",
-                    "value": "number"
+                  "type": "reference",
+                  "typeName": {
+                    "type": "identifier",
+                    "name": "ForceCollideOptions"
                   }
                 }
               ]
             },
-            {
-              "type": "tuple",
-              "elementTypes": [
-                {
-                  "type": "namedTupleMember",
-                  "label": "top",
-                  "optional": false,
-                  "elementType": {
-                    "type": "keyword",
-                    "value": "number"
-                  }
-                },
-                {
-                  "type": "namedTupleMember",
-                  "label": "right",
-                  "optional": false,
-                  "elementType": {
-                    "type": "keyword",
-                    "value": "number"
-                  }
-                },
-                {
-                  "type": "namedTupleMember",
-                  "label": "bottom",
-                  "optional": false,
-                  "elementType": {
-                    "type": "keyword",
-                    "value": "number"
-                  }
-                },
-                {
-                  "type": "namedTupleMember",
-                  "label": "left",
-                  "optional": false,
-                  "elementType": {
-                    "type": "keyword",
-                    "value": "number"
-                  }
-                }
-              ]
+            "optional": true,
+            "computed": false
+          }
+        ],
+        "extends": [
+          {
+            "type": "expressionWithTypeArguments",
+            "expression": {
+              "type": "identifier",
+              "name": "BaseLayoutOptions"
             }
-          ]
-        }
+          }
+        ]
+      },
+      {
+        "type": "interface",
+        "name": "ForceCollideOptions",
+        "body": [
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "dummyRadius"
+            },
+            "annotation": {
+              "type": "keyword",
+              "value": "number"
+            },
+            "optional": true,
+            "computed": false
+          },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "radiusDiff"
+            },
+            "annotation": {
+              "type": "keyword",
+              "value": "number"
+            },
+            "optional": true,
+            "computed": false
+          },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "strength"
+            },
+            "annotation": {
+              "type": "keyword",
+              "value": "number"
+            },
+            "optional": true,
+            "computed": false
+          },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "iterations"
+            },
+            "annotation": {
+              "type": "keyword",
+              "value": "number"
+            },
+            "optional": true,
+            "computed": false
+          }
+        ]
       },
       {
         "type": "typeAlias",

package/dist-types/diagram/LineLabelComponent.d.ts

@@ -1,17 +1,16 @@
 /// <reference types="react" />
-import type { DiagramEdge, LineLabelConf, PositionTuple, RefRepository, RenderedLineLabel, TextOptions } from "./interfaces";
+import type { DiagramEdge, LineLabelConf, RefRepository, LineLabel, TextOptions } from "./interfaces";
 export interface LineLabelComponentGroupProps {
-    labels?: RenderedLineLabel[];
+    labels?: LineLabel[];
     onRendered?: (refRepository: RefRepository | null) => void;
 }
 export declare function LineLabelComponentGroup({ labels, onRendered, }: LineLabelComponentGroupProps): JSX.Element;
 export interface LineTextComponentProps {
     id: string;
     text: TextOptions;
-    position: PositionTuple;
     onRendered?: (id: string, element: HTMLElement | null) => void;
 }
-export declare function LineTextComponent({ id, text, position, onRendered, }: LineTextComponentProps): JSX.Element;
+export declare function LineTextComponent({ id, text, onRendered, }: LineTextComponentProps): JSX.Element;
 export interface LineLabelComponentProps {
     id: string;
     edge: DiagramEdge;

package/dist-types/diagram/hooks/useRenderedDiagram.d.ts

@@ -0,0 +1,12 @@
+import type { DiagramEdge, DiagramNode, LayoutOptions, RefRepository, RenderedDiagram } from "../interfaces";
+export declare function useRenderedDiagram({ layout, nodes, edges, nodesRefRepository, lineLabelsRefRepository, normalizedLinesMap, nodesRenderId, lineLabelsRenderId, layoutOptions, }: {
+    layout: "dagre" | "force" | undefined;
+    nodes: DiagramNode[] | undefined;
+    edges: DiagramEdge[] | undefined;
+    nodesRefRepository: RefRepository | null;
+    lineLabelsRefRepository: RefRepository | null;
+    normalizedLinesMap: WeakMap<DiagramEdge, string>;
+    nodesRenderId: number;
+    lineLabelsRenderId: number;
+    layoutOptions?: LayoutOptions;
+}): RenderedDiagram;

package/dist-types/diagram/index.d.ts

@@ -1,14 +1,14 @@
 import React from "react";
 import { ReactNextElement } from "@next-core/react-element";
 import "@next-core/theme";
-import type { DiagramEdge, DiagramNode, LayoutOptionsDagre, LineConf, NodeBrickConf, LineTarget, ConnectLineDetail, NodesConnectOptions, ActiveTarget, RangeTuple } from "./interfaces";
+import type { DiagramEdge, DiagramNode, LayoutOptions, LineConf, NodeBrickConf, LineTarget, ConnectLineDetail, NodesConnectOptions, ActiveTarget, RangeTuple } from "./interfaces";
 export interface EoDiagramProps {
-    layout?: "dagre";
+    layout?: "dagre" | "force";
     nodes?: DiagramNode[];
     edges?: DiagramEdge[];
     nodeBricks?: NodeBrickConf[];
     lines?: LineConf[];
-    layoutOptions?: LayoutOptionsDagre;
+    layoutOptions?: LayoutOptions;
     nodesConnect?: NodesConnectOptions;
     activeTarget?: ActiveTarget | null;
     disableKeyboardAction?: boolean;
@@ -29,12 +29,12 @@ export declare class EoDiagram extends ReactNextElement implements EoDiagramProp
     /**
      * @required
      */
-    accessor layout: "dagre" | undefined;
+    accessor layout: "dagre" | "force" | undefined;
     accessor nodes: DiagramNode[] | undefined;
     accessor edges: DiagramEdge[] | undefined;
     accessor nodeBricks: NodeBrickConf[] | undefined;
     accessor lines: LineConf[] | undefined;
-    accessor layoutOptions: LayoutOptionsDagre | undefined;
+    accessor layoutOptions: LayoutOptions | undefined;
     accessor activeTarget: ActiveTarget | null | undefined;
     accessor disableKeyboardAction: boolean | undefined;
     accessor nodesConnect: NodesConnectOptions | undefined;

package/dist-types/diagram/interfaces.d.ts

@@ -12,10 +12,6 @@ export interface DiagramEdge {
     type?: string;
     [key: string]: unknown;
 }
-export interface RenderedGraph {
-    nodes: RenderedNode[];
-    edges: RenderedEdge[];
-}
 export interface RenderedNode {
     id: DiagramNodeId;
     x: number;
@@ -25,10 +21,25 @@ export interface RenderedNode {
     data: DiagramNode;
 }
 export interface RenderedEdge {
-    points: NodePosition[];
+    id?: string;
+    points?: NodePosition[] | null;
     data: DiagramEdge;
+    angle?: number;
+    labelpos?: "c" | "l" | "r";
+    width?: number;
+    height?: number;
+    labelSize?: LabelSize;
+}
+export interface LabelSize {
+    center?: SizeTuple;
+    start?: SizeTuple;
+    end?: SizeTuple;
+}
+export interface RenderedDiagram {
+    nodes: RenderedNode[];
+    edges: RenderedEdge[];
 }
-export interface RenderedLine {
+export interface NormalizedLine {
     line: LineConf & {
         strokeColor: string;
         strokeWidth: number;
@@ -36,10 +47,20 @@ export interface RenderedLine {
         curveType: string;
         $id: string;
     };
-    d: string;
     markerIndex: number | undefined;
     edge: DiagramEdge;
 }
+export interface LineLabel {
+    text?: TextOptions;
+    label?: LineLabelConf;
+    id: string;
+    edge: DiagramEdge;
+}
+export interface RenderedLine extends NormalizedLine {
+    d: string;
+    angle?: number;
+    labelSize?: LabelSize;
+}
 export interface RenderedLineLabel {
     text?: TextOptions;
     label?: LineLabelConf;
@@ -52,8 +73,13 @@ export interface RenderedLineLabel {
         bottom: number;
     };
     id: string;
+    lineId: string;
+    placement: string;
+    angle?: number;
+    size?: SizeTuple;
 }
 export type PositionTuple = [x: number, y: number];
+export type SizeTuple = [width: number, height: number];
 export type RangeTuple = [min: number, max: number];
 export interface LineMarker {
     strokeColor: string;
@@ -81,31 +107,47 @@ export interface LineConf {
     interactStrokeWidth?: number;
     curveType?: "curveBasis";
     arrow?: boolean;
-    text?: TextOptions;
-    label?: LineLabelConf;
+    text?: TextOptions | TextOptions[];
+    label?: LineLabelConf | LineLabelConf[];
     cursor?: React.CSSProperties["cursor"];
 }
 export interface LineLabelConf {
     if?: string | boolean | null;
     useBrick: UseSingleBrickConf;
+    placement?: LineLabelPlacement;
 }
 export interface TextOptions {
     content: string;
     style?: CSSProperties;
+    placement?: LineLabelPlacement;
 }
+export type LineLabelPlacement = "center" | "start" | "end";
 export interface TransformLiteral {
     k: number;
     x: number;
     y: number;
 }
-export interface LayoutOptionsDagre {
-    nodePadding?: PartialRectTuple;
+export type LayoutOptions = LayoutOptionsDagre | LayoutOptionsForce;
+export interface LayoutOptionsDagre extends BaseLayoutOptions {
     rankdir?: "TB" | "BT" | "LR" | "RL";
     ranksep?: number;
     edgesep?: number;
     nodesep?: number;
     align?: "UL" | "UR" | "DL" | "DR";
 }
+export interface LayoutOptionsForce extends BaseLayoutOptions {
+    dummyNodesOnEdges?: number;
+    collide?: boolean | ForceCollideOptions;
+}
+export interface ForceCollideOptions {
+    dummyRadius?: number;
+    radiusDiff?: number;
+    strength?: number;
+    iterations?: number;
+}
+export interface BaseLayoutOptions {
+    nodePadding?: PartialRectTuple;
+}
 export type PartialRectTuple = number | [all: number] | [vertical: number, horizontal: number] | [top: number, horizontal: number, bottom: number] | [top: number, right: number, bottom: number, left: number];
 export type FullRectTuple = [
     top: number,
@@ -114,7 +156,7 @@ export type FullRectTuple = [
     left: number
 ];
 export interface LineTextClipPath extends SimpleRect {
-    id: string;
+    lineId: string;
 }
 export interface SimpleRect {
     x0: number;
@@ -150,3 +192,13 @@ export interface ActiveTargetOfEdge {
     type: "edge";
     edge: DiagramEdge;
 }
+export interface UnifiedGraph {
+    layout: string;
+    getNode(id: string): RenderedNode | undefined;
+    applyLayout(context: ApplyLayoutContext): RenderedDiagram | null;
+}
+export interface ApplyLayoutContext {
+    nodesRefRepository: RefRepository;
+    lineLabelsRefRepository: RefRepository;
+    normalizedLinesMap: WeakMap<DiagramEdge, string>;
+}

package/dist-types/diagram/lines/curveLine.d.ts

@@ -2,4 +2,4 @@ import type { CurveType, NodePosition } from "../interfaces";
 /**
  * Generate Line from points
  */
-export declare function curveLine(points: Array<NodePosition>, arrowOffset: number, curveType?: CurveType): string;
+export declare function curveLine(points: Array<NodePosition> | null | undefined, arrowOffset: number, curveType?: CurveType): string;

package/dist-types/diagram/lines/getDirectLinePoints.d.ts

@@ -0,0 +1,2 @@
+import type { NodePosition, RenderedNode } from "../interfaces";
+export declare function getDirectLinePoints(source: RenderedNode, target: RenderedNode): NodePosition[] | null;

package/dist-types/diagram/processors/adjustLineLabels.d.ts

@@ -0,0 +1,2 @@
+import type { RefRepository, RenderedLineLabel } from "../interfaces";
+export declare function adjustLineLabels(renderedLineLabels: RenderedLineLabel[], lineLabelsRefRepository: RefRepository): void;

package/dist-types/diagram/processors/adjustLineLabels.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist-types/diagram/processors/adjustNodesPosition.d.ts

@@ -0,0 +1,2 @@
+import type { FullRectTuple, RefRepository, RenderedNode } from "../interfaces";
+export declare function adjustNodesPosition(nodes: RenderedNode[], nodesRefRepository: RefRepository, nodePaddings: FullRectTuple): void;

package/dist-types/diagram/processors/adjustNodesSize.d.ts

@@ -0,0 +1,2 @@
+import type { FullRectTuple, RefRepository, RenderedNode } from "../interfaces";
+export declare function adjustNodesSize(nodes: RenderedNode[], nodesRefRepository: RefRepository, nodePaddings: FullRectTuple): void;