@next-bricks/diagram 0.2.0 → 0.4.0

package/dist/types.json

@@ -1,4 +1,62 @@
 {
+  "diagram.editable-label": {
+    "properties": [
+      {
+        "name": "label",
+        "annotation": {
+          "type": "keyword",
+          "value": "string"
+        }
+      },
+      {
+        "name": "type",
+        "annotation": {
+          "type": "reference",
+          "typeName": {
+            "type": "identifier",
+            "name": "LabelType"
+          }
+        }
+      }
+    ],
+    "events": [
+      {
+        "name": "label.change",
+        "detail": {
+          "annotation": {
+            "type": "keyword",
+            "value": "string"
+          }
+        }
+      }
+    ],
+    "methods": [
+      {
+        "name": "enableEditing",
+        "params": [],
+        "returns": {}
+      }
+    ],
+    "types": [
+      {
+        "type": "typeAlias",
+        "name": "LabelType",
+        "annotation": {
+          "type": "union",
+          "types": [
+            {
+              "type": "jsLiteral",
+              "value": "line"
+            },
+            {
+              "type": "jsLiteral",
+              "value": "default"
+            }
+          ]
+        }
+      }
+    ]
+  },
   "eo-diagram": {
     "properties": [
       {
@@ -118,9 +176,52 @@
             }
           }
         }
+      },
+      {
+        "name": "line.dblclick",
+        "detail": {
+          "annotation": {
+            "type": "reference",
+            "typeName": {
+              "type": "identifier",
+              "name": "LineTarget"
+            }
+          }
+        }
+      }
+    ],
+    "methods": [
+      {
+        "name": "callOnLineLabel",
+        "params": [
+          {
+            "name": "id",
+            "annotation": {
+              "type": "keyword",
+              "value": "string"
+            }
+          },
+          {
+            "name": "method",
+            "annotation": {
+              "type": "keyword",
+              "value": "string"
+            }
+          },
+          {
+            "name": "param_3",
+            "annotation": {
+              "type": "array",
+              "elementType": {
+                "type": "keyword",
+                "value": "unknown"
+              }
+            }
+          }
+        ],
+        "returns": {}
       }
     ],
-    "methods": [],
     "types": [
       {
         "type": "interface",
@@ -416,6 +517,32 @@
             "optional": true,
             "computed": false
           },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "interactable"
+            },
+            "annotation": {
+              "type": "keyword",
+              "value": "boolean"
+            },
+            "optional": true,
+            "computed": false
+          },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "interactStrokeWidth"
+            },
+            "annotation": {
+              "type": "keyword",
+              "value": "number"
+            },
+            "optional": true,
+            "computed": false
+          },
           {
             "type": "propertySignature",
             "key": {
@@ -441,6 +568,115 @@
             },
             "optional": true,
             "computed": false
+          },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "text"
+            },
+            "annotation": {
+              "type": "reference",
+              "typeName": {
+                "type": "identifier",
+                "name": "TextOptions"
+              }
+            },
+            "optional": true,
+            "computed": false
+          },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "label"
+            },
+            "annotation": {
+              "type": "reference",
+              "typeName": {
+                "type": "identifier",
+                "name": "LineLabelConf"
+              }
+            },
+            "optional": true,
+            "computed": false
+          }
+        ]
+      },
+      {
+        "type": "interface",
+        "name": "TextOptions",
+        "body": [
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "content"
+            },
+            "annotation": {
+              "type": "keyword",
+              "value": "string"
+            },
+            "computed": false
+          },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "style"
+            },
+            "annotation": {
+              "type": "reference",
+              "typeName": {
+                "type": "identifier",
+                "name": "CSSProperties"
+              }
+            },
+            "optional": true,
+            "computed": false
+          }
+        ]
+      },
+      {
+        "type": "interface",
+        "name": "LineLabelConf",
+        "body": [
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "if"
+            },
+            "annotation": {
+              "type": "union",
+              "types": [
+                {
+                  "type": "keyword",
+                  "value": "string"
+                },
+                {
+                  "type": "keyword",
+                  "value": "boolean"
+                }
+              ]
+            },
+            "optional": true,
+            "computed": false
+          },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "useBrick"
+            },
+            "annotation": {
+              "type": "reference",
+              "typeName": {
+                "type": "identifier",
+                "name": "UseSingleBrickConf"
+              }
+            },
+            "computed": false
           }
         ]
       },
@@ -561,6 +797,39 @@
             "computed": false
           }
         ]
+      },
+      {
+        "type": "interface",
+        "name": "LineTarget",
+        "body": [
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "id"
+            },
+            "annotation": {
+              "type": "keyword",
+              "value": "string"
+            },
+            "computed": false
+          },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "edge"
+            },
+            "annotation": {
+              "type": "reference",
+              "typeName": {
+                "type": "identifier",
+                "name": "DiagramEdge"
+              }
+            },
+            "computed": false
+          }
+        ]
       }
     ]
   }

package/dist-types/bootstrap.d.ts

@@ -1 +1,2 @@
 import "./diagram/index.js";
+import "./editable-label/index.js";

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

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import type { DiagramEdge, LineLabelConf, PositionTuple, RefRepository, RenderedLineLabel, TextOptions } from "./interfaces";
+export interface LineLabelComponentGroupProps {
+    labels?: RenderedLineLabel[];
+    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 interface LineLabelComponentProps {
+    id: string;
+    edge: DiagramEdge;
+    label: LineLabelConf;
+    onRendered?: (id: string, element: HTMLElement | null) => void;
+    onUnmount?: (id: string) => void;
+}
+export declare function LineLabelComponent({ id, edge, label, onRendered, onUnmount, }: LineLabelComponentProps): JSX.Element | null;

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

@@ -1,3 +1,4 @@
 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";
+export declare const DEFAULT_LINE_INTERACT_STROKE_WIDTH = 20;

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { ReactNextElement } from "@next-core/react-element";
 import "@next-core/theme";
-import type { DiagramEdge, DiagramNode, LayoutOptionsDagre, LineConf, NodeBrickConf } from "./interfaces";
+import type { DiagramEdge, DiagramNode, LayoutOptionsDagre, LineConf, NodeBrickConf, LineTarget } from "./interfaces";
 export interface EoDiagramProps {
     layout?: "dagre";
     nodes?: DiagramNode[];
@@ -11,18 +11,22 @@ export interface EoDiagramProps {
     layoutOptions?: LayoutOptionsDagre;
     activeNodeId?: string;
     disableKeyboardAction?: boolean;
-    onActiveNodeChange?(node: DiagramNode | undefined): void;
-    onSwitchActiveNode?(id: string | undefined): void;
-    onNodeDelete?(node: DiagramNode): void;
+}
+export interface DiagramRef {
+    callOnLineLabel(id: string, method: string, ...args: unknown[]): void;
 }
 export interface DiagramHandler {
     moveIntoView(id: string): void;
 }
+export declare const EoDiagramComponent: React.ForwardRefExoticComponent<EoDiagramComponentProps & React.RefAttributes<DiagramRef>>;
 /**
  * 构件 `eo-diagram`
  */
 export declare class EoDiagram extends ReactNextElement implements EoDiagramProps {
     #private;
+    /**
+     * @required
+     */
     accessor layout: "dagre" | undefined;
     accessor nodes: DiagramNode[] | undefined;
     accessor edges: DiagramEdge[] | undefined;
@@ -31,6 +35,13 @@ export declare class EoDiagram extends ReactNextElement implements EoDiagramProp
     accessor layoutOptions: LayoutOptionsDagre | undefined;
     accessor activeNodeId: string | undefined;
     accessor disableKeyboardAction: boolean | undefined;
+    callOnLineLabel(id: string, method: string, ...args: unknown[]): void;
     render(): React.JSX.Element;
 }
-export declare function EoDiagramComponent({ layout, nodes, edges, nodeBricks, lines, layoutOptions, activeNodeId, disableKeyboardAction, onActiveNodeChange, onSwitchActiveNode, onNodeDelete, }: EoDiagramProps): React.JSX.Element;
+export interface EoDiagramComponentProps extends EoDiagramProps {
+    onActiveNodeChange?(node: DiagramNode | undefined): void;
+    onSwitchActiveNode?(id: string | undefined): void;
+    onNodeDelete?(node: DiagramNode): void;
+    onLineDoubleClick?(line: LineTarget): void;
+}
+export declare function LegacyEoDiagramComponent({ layout, nodes, edges, nodeBricks, lines, layoutOptions, activeNodeId, disableKeyboardAction, onActiveNodeChange, onSwitchActiveNode, onNodeDelete, onLineDoubleClick, }: EoDiagramComponentProps, ref: React.Ref<DiagramRef>): React.JSX.Element;

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

@@ -1,4 +1,5 @@
-import { UseSingleBrickConf } from "@next-core/react-runtime";
+import type { CSSProperties } from "react";
+import type { UseSingleBrickConf } from "@next-core/react-runtime";
 export interface DiagramNode {
     id: DiagramNodeId;
     type?: string;
@@ -26,14 +27,32 @@ export interface RenderedEdge {
     points: NodePosition[];
     data: DiagramEdge;
 }
-export interface RenderedLine extends RenderedEdge {
+export interface RenderedLine {
     line: LineConf & {
         strokeColor: string;
         strokeWidth: number;
-        curveType: "curveBasis";
+        interactStrokeWidth: number;
+        curveType: string;
+        $id: string;
     };
+    d: string;
     markerIndex: number | undefined;
+    edge: DiagramEdge;
 }
+export interface RenderedLineLabel {
+    text?: TextOptions;
+    label?: LineLabelConf;
+    edge: DiagramEdge;
+    position: PositionTuple;
+    lineRect: {
+        left: number;
+        top: number;
+        right: number;
+        bottom: number;
+    };
+    id: string;
+}
+export type PositionTuple = [x: number, y: number];
 export interface LineMarker {
     strokeColor: string;
 }
@@ -56,8 +75,20 @@ export interface LineConf {
     type?: "auto";
     strokeColor?: string;
     strokeWidth?: number;
+    interactable?: boolean;
+    interactStrokeWidth?: number;
     curveType?: "curveBasis";
     arrow?: boolean;
+    text?: TextOptions;
+    label?: LineLabelConf;
+}
+export interface LineLabelConf {
+    if?: string | boolean;
+    useBrick: UseSingleBrickConf;
+}
+export interface TextOptions {
+    content: string;
+    style?: CSSProperties;
 }
 export interface TransformLiteral {
     k: number;
@@ -72,3 +103,16 @@ export interface LayoutOptionsDagre {
     nodesep?: number;
     align?: "UL" | "UR" | "DL" | "DR";
 }
+export interface LineTextClipPath extends SimpleRect {
+    id: string;
+}
+export interface SimpleRect {
+    x0: number;
+    y0: number;
+    w: number;
+    h: number;
+}
+export interface LineTarget {
+    id: string;
+    edge: DiagramEdge;
+}

package/dist-types/editable-label/index.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import { ReactNextElement } from "@next-core/react-element";
+import "@next-core/theme";
+export interface EditableLabelProps {
+    label?: string;
+    type?: LabelType;
+}
+export type LabelType = "line" | "default";
+export interface EditableLabelRef {
+    enableEditing(): void;
+}
+export declare const EditableLabelComponent: React.ForwardRefExoticComponent<EditableLabelComponentProps & React.RefAttributes<EditableLabelRef>>;
+/**
+ * 构件 `diagram.editable-label`
+ */
+export declare class EditableLabel extends ReactNextElement implements EditableLabelProps {
+    #private;
+    accessor label: string | undefined;
+    accessor type: LabelType | undefined;
+    enableEditing(): void;
+    render(): React.JSX.Element;
+}
+export interface EditableLabelComponentProps extends EditableLabelProps {
+    onLabelChange?(value: string): void;
+}
+export declare function LegacyEditableLabelComponent({ label: _label, onLabelChange }: EditableLabelComponentProps, ref: React.Ref<EditableLabelRef>): React.JSX.Element;

package/dist-types/editable-label/index.spec.d.ts

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

package/docs/editable-label.md

@@ -0,0 +1,17 @@
+构件 `diagram.editable-label`
+
+## Examples
+
+### Basic
+
+```yaml preview
+brick: diagram.editable-label
+properties:
+  type: line
+  label: Relation
+events:
+  label.change:
+    action: message.success
+    args:
+      - "<% `Label changed to: ${EVENT.detail}` %>"
+```

package/docs/eo-diagram.md

@@ -244,6 +244,18 @@ children:
         - edgeType: link
           strokeColor: var(--theme-blue-color)
           arrow: true
+          text: |-
+            <%
+              DATA.edge.description
+                ? {
+                    content: DATA.edge.description,
+                    style: {
+                      color: "var(--color-secondary-text)",
+                      fontSize: "11px",
+                    },
+                  }
+                : null
+            %>
         - edgeType: menu
           strokeColor: var(--palette-gray-5)
           arrow: true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next-bricks/diagram",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "homepage": "https://github.com/easyops-cn/next-bricks/tree/master/bricks/diagram",
   "repository": {
     "type": "git",
@@ -40,5 +40,5 @@
   "peerDependencies": {
     "@next-bricks/icons": "*"
   },
-  "gitHead": "380ce062c56e487418226850caf03701d8a4b31d"
+  "gitHead": "ba424e87dba0c379675570df481406dfc3b97a03"
 }