@next-bricks/diagram 0.1.0

package/dist/manifest.json

@@ -0,0 +1,68 @@
+{
+  "manifest_version": 1,
+  "package": "@next-bricks/diagram",
+  "name": "diagram",
+  "bricks": [
+    {
+      "name": "eo-diagram",
+      "properties": [
+        {
+          "name": "layout",
+          "type": "\"dagre\""
+        },
+        {
+          "name": "nodes",
+          "attribute": false,
+          "type": "DiagramNode[]"
+        },
+        {
+          "name": "edges",
+          "attribute": false,
+          "type": "DiagramEdge[]"
+        },
+        {
+          "name": "nodeBricks",
+          "attribute": false,
+          "type": "NodeBrickConf[]"
+        },
+        {
+          "name": "lines",
+          "attribute": false,
+          "type": "LineConf[]"
+        },
+        {
+          "name": "layoutOptions",
+          "attribute": false,
+          "type": "LayoutOptionsDagre"
+        },
+        {
+          "name": "activeNodeId",
+          "type": "string"
+        },
+        {
+          "name": "disableKeyboardAction",
+          "type": "boolean"
+        }
+      ],
+      "events": [
+        {
+          "name": "activeNode.change",
+          "detail": {
+            "type": "DiagramNode | undefined"
+          }
+        },
+        {
+          "name": "node.delete",
+          "detail": {
+            "type": "DiagramNode"
+          }
+        }
+      ],
+      "slots": [],
+      "methods": [],
+      "parts": [],
+      "description": "构件 `eo-diagram`"
+    }
+  ],
+  "providers": []
+}

package/dist/types.json

@@ -0,0 +1,468 @@
+{
+  "eo-diagram": {
+    "properties": [
+      {
+        "name": "layout",
+        "annotation": {
+          "type": "jsLiteral",
+          "value": "dagre"
+        }
+      },
+      {
+        "name": "nodes",
+        "annotation": {
+          "type": "array",
+          "elementType": {
+            "type": "reference",
+            "typeName": {
+              "type": "identifier",
+              "name": "DiagramNode"
+            }
+          }
+        }
+      },
+      {
+        "name": "edges",
+        "annotation": {
+          "type": "array",
+          "elementType": {
+            "type": "reference",
+            "typeName": {
+              "type": "identifier",
+              "name": "DiagramEdge"
+            }
+          }
+        }
+      },
+      {
+        "name": "nodeBricks",
+        "annotation": {
+          "type": "array",
+          "elementType": {
+            "type": "reference",
+            "typeName": {
+              "type": "identifier",
+              "name": "NodeBrickConf"
+            }
+          }
+        }
+      },
+      {
+        "name": "lines",
+        "annotation": {
+          "type": "array",
+          "elementType": {
+            "type": "reference",
+            "typeName": {
+              "type": "identifier",
+              "name": "LineConf"
+            }
+          }
+        }
+      },
+      {
+        "name": "layoutOptions",
+        "annotation": {
+          "type": "reference",
+          "typeName": {
+            "type": "identifier",
+            "name": "LayoutOptionsDagre"
+          }
+        }
+      },
+      {
+        "name": "activeNodeId",
+        "annotation": {
+          "type": "keyword",
+          "value": "string"
+        }
+      },
+      {
+        "name": "disableKeyboardAction",
+        "annotation": {
+          "type": "keyword",
+          "value": "boolean"
+        }
+      }
+    ],
+    "events": [
+      {
+        "name": "activeNode.change",
+        "detail": {
+          "annotation": {
+            "type": "union",
+            "types": [
+              {
+                "type": "reference",
+                "typeName": {
+                  "type": "identifier",
+                  "name": "DiagramNode"
+                }
+              },
+              {
+                "type": "keyword",
+                "value": "undefined"
+              }
+            ]
+          }
+        }
+      },
+      {
+        "name": "node.delete",
+        "detail": {
+          "annotation": {
+            "type": "reference",
+            "typeName": {
+              "type": "identifier",
+              "name": "DiagramNode"
+            }
+          }
+        }
+      }
+    ],
+    "methods": [],
+    "types": [
+      {
+        "type": "interface",
+        "name": "DiagramNode",
+        "body": [
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "id"
+            },
+            "annotation": {
+              "type": "reference",
+              "typeName": {
+                "type": "identifier",
+                "name": "DiagramNodeId"
+              }
+            },
+            "computed": false
+          },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "type"
+            },
+            "annotation": {
+              "type": "keyword",
+              "value": "string"
+            },
+            "optional": true,
+            "computed": false
+          },
+          {
+            "type": "indexSignature",
+            "parameter": {
+              "type": "identifier",
+              "name": "key",
+              "annotation": {
+                "type": "keyword",
+                "value": "string"
+              }
+            },
+            "annotation": {
+              "type": "keyword",
+              "value": "unknown"
+            }
+          }
+        ]
+      },
+      {
+        "type": "typeAlias",
+        "name": "DiagramNodeId",
+        "annotation": {
+          "type": "keyword",
+          "value": "string"
+        }
+      },
+      {
+        "type": "interface",
+        "name": "DiagramEdge",
+        "body": [
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "source"
+            },
+            "annotation": {
+              "type": "keyword",
+              "value": "string"
+            },
+            "computed": false
+          },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "target"
+            },
+            "annotation": {
+              "type": "keyword",
+              "value": "string"
+            },
+            "computed": false
+          },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "type"
+            },
+            "annotation": {
+              "type": "keyword",
+              "value": "string"
+            },
+            "optional": true,
+            "computed": false
+          },
+          {
+            "type": "indexSignature",
+            "parameter": {
+              "type": "identifier",
+              "name": "key",
+              "annotation": {
+                "type": "keyword",
+                "value": "string"
+              }
+            },
+            "annotation": {
+              "type": "keyword",
+              "value": "unknown"
+            }
+          }
+        ]
+      },
+      {
+        "type": "interface",
+        "name": "NodeBrickConf",
+        "body": [
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "useBrick"
+            },
+            "annotation": {
+              "type": "reference",
+              "typeName": {
+                "type": "identifier",
+                "name": "UseSingleBrickConf"
+              }
+            },
+            "computed": false
+          },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "nodeType"
+            },
+            "annotation": {
+              "type": "union",
+              "types": [
+                {
+                  "type": "keyword",
+                  "value": "string"
+                },
+                {
+                  "type": "array",
+                  "elementType": {
+                    "type": "keyword",
+                    "value": "string"
+                  }
+                }
+              ]
+            },
+            "optional": true,
+            "computed": false
+          },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "if"
+            },
+            "annotation": {
+              "type": "union",
+              "types": [
+                {
+                  "type": "keyword",
+                  "value": "string"
+                },
+                {
+                  "type": "keyword",
+                  "value": "boolean"
+                },
+                {
+                  "type": "keyword",
+                  "value": "null"
+                }
+              ]
+            },
+            "optional": true,
+            "computed": false
+          }
+        ]
+      },
+      {
+        "type": "interface",
+        "name": "LineConf",
+        "body": [
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "edgeType"
+            },
+            "annotation": {
+              "type": "union",
+              "types": [
+                {
+                  "type": "keyword",
+                  "value": "string"
+                },
+                {
+                  "type": "array",
+                  "elementType": {
+                    "type": "keyword",
+                    "value": "string"
+                  }
+                }
+              ]
+            },
+            "optional": true,
+            "computed": false
+          },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "if"
+            },
+            "annotation": {
+              "type": "union",
+              "types": [
+                {
+                  "type": "keyword",
+                  "value": "string"
+                },
+                {
+                  "type": "keyword",
+                  "value": "boolean"
+                },
+                {
+                  "type": "keyword",
+                  "value": "null"
+                }
+              ]
+            },
+            "optional": true,
+            "computed": false
+          },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "draw"
+            },
+            "annotation": {
+              "type": "keyword",
+              "value": "boolean"
+            },
+            "optional": true,
+            "computed": false
+          },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "type"
+            },
+            "annotation": {
+              "type": "jsLiteral",
+              "value": "auto"
+            },
+            "optional": true,
+            "computed": false
+          },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "strokeColor"
+            },
+            "annotation": {
+              "type": "keyword",
+              "value": "string"
+            },
+            "optional": true,
+            "computed": false
+          },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "strokeWidth"
+            },
+            "annotation": {
+              "type": "keyword",
+              "value": "number"
+            },
+            "optional": true,
+            "computed": false
+          },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "curveType"
+            },
+            "annotation": {
+              "type": "jsLiteral",
+              "value": "curveBasis"
+            },
+            "optional": true,
+            "computed": false
+          },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "arrow"
+            },
+            "annotation": {
+              "type": "keyword",
+              "value": "boolean"
+            },
+            "optional": true,
+            "computed": false
+          }
+        ]
+      },
+      {
+        "type": "interface",
+        "name": "LayoutOptionsDagre",
+        "body": [
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "nodePadding"
+            },
+            "annotation": {
+              "type": "keyword",
+              "value": "number"
+            },
+            "optional": true,
+            "computed": false
+          }
+        ]
+      }
+    ]
+  }
+}

package/dist-types/bootstrap.d.ts

@@ -0,0 +1 @@
+import "./diagram/index.js";

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { DiagramNode, DiagramNodeId, NodeBrickConf, RefRepository } from "./interfaces";
+export interface NodeComponentGroupProps {
+    nodes?: DiagramNode[];
+    nodeBricks?: NodeBrickConf[];
+    onRendered?: (refRepository: RefRepository | null) => void;
+}
+export declare function NodeComponentGroup({ nodes, nodeBricks, onRendered, }: NodeComponentGroupProps): JSX.Element;
+export interface NodeComponentProps {
+    node: DiagramNode;
+    nodeBricks?: NodeBrickConf[];
+    onRendered?: (id: DiagramNodeId, element: HTMLElement | null) => void;
+    onUnmount?: (id: DiagramNodeId) => void;
+}
+export declare function NodeComponent({ node, nodeBricks, onRendered, onUnmount, }: NodeComponentProps): JSX.Element | null;

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

@@ -0,0 +1,3 @@
+export declare const DEFAULT_LINE_STROKE_COLOR = "var(--palette-gray-5)";
+export declare const DEFAULT_LINE_STROKE_WIDTH = 1;
+export declare const DEFAULT_LINE_CURVE_TYPE = "curveBasis";

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

@@ -0,0 +1,36 @@
+import React from "react";
+import { ReactNextElement } from "@next-core/react-element";
+import "@next-core/theme";
+import type { DiagramEdge, DiagramNode, LayoutOptionsDagre, LineConf, NodeBrickConf } from "./interfaces";
+export interface EoDiagramProps {
+    layout?: "dagre";
+    nodes?: DiagramNode[];
+    edges?: DiagramEdge[];
+    nodeBricks?: NodeBrickConf[];
+    lines?: LineConf[];
+    layoutOptions?: LayoutOptionsDagre;
+    activeNodeId?: string;
+    disableKeyboardAction?: boolean;
+    onActiveNodeChange?(node: DiagramNode | undefined): void;
+    onSwitchActiveNode?(id: string | undefined): void;
+    onNodeDelete?(node: DiagramNode): void;
+}
+export interface DiagramHandler {
+    moveIntoView(id: string): void;
+}
+/**
+ * 构件 `eo-diagram`
+ */
+export declare class EoDiagram extends ReactNextElement implements EoDiagramProps {
+    #private;
+    accessor layout: "dagre" | undefined;
+    accessor nodes: DiagramNode[] | undefined;
+    accessor edges: DiagramEdge[] | undefined;
+    accessor nodeBricks: NodeBrickConf[] | undefined;
+    accessor lines: LineConf[] | undefined;
+    accessor layoutOptions: LayoutOptionsDagre | undefined;
+    accessor activeNodeId: string | undefined;
+    accessor disableKeyboardAction: boolean | undefined;
+    render(): React.JSX.Element;
+}
+export declare function EoDiagramComponent({ layout, nodes, edges, nodeBricks, lines, layoutOptions, activeNodeId, disableKeyboardAction, onActiveNodeChange, onSwitchActiveNode, onNodeDelete, }: EoDiagramProps): React.JSX.Element;

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

@@ -0,0 +1 @@
+import "./";

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

@@ -0,0 +1,69 @@
+import { UseSingleBrickConf } from "@next-core/react-runtime";
+export interface DiagramNode {
+    id: DiagramNodeId;
+    type?: string;
+    [key: string]: unknown;
+}
+export interface DiagramEdge {
+    source: string;
+    target: string;
+    type?: string;
+    [key: string]: unknown;
+}
+export interface RenderedGraph {
+    nodes: RenderedNode[];
+    edges: RenderedEdge[];
+}
+export interface RenderedNode {
+    id: DiagramNodeId;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    data: DiagramNode;
+}
+export interface RenderedEdge {
+    points: NodePosition[];
+    data: DiagramEdge;
+}
+export interface RenderedLine extends RenderedEdge {
+    line: LineConf & {
+        strokeColor: string;
+        strokeWidth: number;
+        curveType: "curveBasis";
+    };
+    markerIndex: number | undefined;
+}
+export interface LineMarker {
+    strokeColor: string;
+}
+export type DiagramNodeId = string;
+export type RefRepository = Map<DiagramNodeId, HTMLElement>;
+export interface NodeBrickConf {
+    useBrick: UseSingleBrickConf;
+    nodeType?: string | string[];
+    if?: string | boolean | null;
+}
+export interface NodePosition {
+    x: number;
+    y: number;
+}
+export type CurveType = `curve${string}`;
+export interface LineConf {
+    edgeType?: string | string[];
+    if?: string | boolean | null;
+    draw?: boolean;
+    type?: "auto";
+    strokeColor?: string;
+    strokeWidth?: number;
+    curveType?: "curveBasis";
+    arrow?: boolean;
+}
+export interface TransformLiteral {
+    k: number;
+    x: number;
+    y: number;
+}
+export interface LayoutOptionsDagre {
+    nodePadding?: number;
+}

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

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

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

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

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

@@ -0,0 +1,2 @@
+import { NodeBrickConf, DiagramNode } from "../interfaces";
+export declare function findNodeBrick(node: DiagramNode, nodeBricks: NodeBrickConf[] | undefined): NodeBrickConf | undefined;

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

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

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

@@ -0,0 +1,2 @@
+import type { RenderedNode } from "../interfaces";
+export declare function getCenterOffsets(renderedNodes: RenderedNode[], [canvasWidth, canvasHeight]: [canvasWidth: number, canvasHeight: number]): [offsetX: number, offsetY: number];

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

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