@next-bricks/diagram 0.63.2 → 0.64.0

package/dist/types.json

@@ -1,4 +1,78 @@
 {
+  "diagram.editable-label": {
+    "properties": [
+      {
+        "name": "label",
+        "annotation": {
+          "type": "keyword",
+          "value": "string"
+        }
+      },
+      {
+        "name": "type",
+        "annotation": {
+          "type": "reference",
+          "typeName": {
+            "type": "identifier",
+            "name": "LabelType"
+          }
+        }
+      },
+      {
+        "name": "readOnly",
+        "annotation": {
+          "type": "keyword",
+          "value": "boolean"
+        }
+      }
+    ],
+    "events": [
+      {
+        "name": "label.editing.change",
+        "detail": {
+          "annotation": {
+            "type": "keyword",
+            "value": "boolean"
+          }
+        }
+      },
+      {
+        "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"
+            }
+          ]
+        }
+      }
+    ]
+  },
   "diagram.experimental-node": {
     "properties": [
       {
@@ -172,80 +246,6 @@
       }
     ]
   },
-  "diagram.editable-label": {
-    "properties": [
-      {
-        "name": "label",
-        "annotation": {
-          "type": "keyword",
-          "value": "string"
-        }
-      },
-      {
-        "name": "type",
-        "annotation": {
-          "type": "reference",
-          "typeName": {
-            "type": "identifier",
-            "name": "LabelType"
-          }
-        }
-      },
-      {
-        "name": "readOnly",
-        "annotation": {
-          "type": "keyword",
-          "value": "boolean"
-        }
-      }
-    ],
-    "events": [
-      {
-        "name": "label.editing.change",
-        "detail": {
-          "annotation": {
-            "type": "keyword",
-            "value": "boolean"
-          }
-        }
-      },
-      {
-        "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-display-canvas": {
     "properties": [
       {
@@ -1488,6 +1488,20 @@
             "computed": false,
             "description": "设置容器装饰器的文本位置"
           },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "level"
+            },
+            "annotation": {
+              "type": "keyword",
+              "value": "number"
+            },
+            "optional": true,
+            "computed": false,
+            "description": "设置容器层级（数字越大布局越靠前）"
+          },
           {
             "type": "propertySignature",
             "key": {
@@ -1610,7 +1624,24 @@
       {
         "type": "interface",
         "name": "LayoutOptionsManual",
-        "body": [],
+        "body": [
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "initialLayout"
+            },
+            "annotation": {
+              "type": "reference",
+              "typeName": {
+                "type": "identifier",
+                "name": "InitialLayout"
+              }
+            },
+            "optional": true,
+            "computed": false
+          }
+        ],
         "extends": [
           {
             "type": "expressionWithTypeArguments",
@@ -1621,6 +1652,23 @@
           }
         ]
       },
+      {
+        "type": "typeAlias",
+        "name": "InitialLayout",
+        "annotation": {
+          "type": "union",
+          "types": [
+            {
+              "type": "jsLiteral",
+              "value": "default"
+            },
+            {
+              "type": "jsLiteral",
+              "value": "layered-architecture"
+            }
+          ]
+        }
+      },
       {
         "type": "interface",
         "name": "BaseLayoutOptions",
@@ -6805,6 +6853,20 @@
             "computed": false,
             "description": "设置容器装饰器的文本位置"
           },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "level"
+            },
+            "annotation": {
+              "type": "keyword",
+              "value": "number"
+            },
+            "optional": true,
+            "computed": false,
+            "description": "设置容器层级（数字越大布局越靠前）"
+          },
           {
             "type": "propertySignature",
             "key": {
@@ -6927,7 +6989,24 @@
       {
         "type": "interface",
         "name": "LayoutOptionsManual",
-        "body": [],
+        "body": [
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "initialLayout"
+            },
+            "annotation": {
+              "type": "reference",
+              "typeName": {
+                "type": "identifier",
+                "name": "InitialLayout"
+              }
+            },
+            "optional": true,
+            "computed": false
+          }
+        ],
         "extends": [
           {
             "type": "expressionWithTypeArguments",
@@ -6938,6 +7017,23 @@
           }
         ]
       },
+      {
+        "type": "typeAlias",
+        "name": "InitialLayout",
+        "annotation": {
+          "type": "union",
+          "types": [
+            {
+              "type": "jsLiteral",
+              "value": "default"
+            },
+            {
+              "type": "jsLiteral",
+              "value": "layered-architecture"
+            }
+          ]
+        }
+      },
       {
         "type": "interface",
         "name": "BaseLayoutOptions",
@@ -9118,6 +9214,19 @@
             },
             "optional": true,
             "computed": false
+          },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "containerId"
+            },
+            "annotation": {
+              "type": "keyword",
+              "value": "string"
+            },
+            "optional": true,
+            "computed": false
           }
         ]
       },

package/dist-types/draw-canvas/index.d.ts

@@ -58,6 +58,7 @@ export interface AddNodeInfo {
     useBrick?: UseSingleBrickConf;
     data?: unknown;
     size?: SizeTuple;
+    containerId?: string;
 }
 export interface AddEdgeInfo {
     source: NodeId;

package/dist-types/draw-canvas/interfaces.d.ts

@@ -66,6 +66,8 @@ export interface DecoratorView extends NodeView {
     titleStyle?: CSSProperties;
     /** 设置容器装饰器的文本位置 */
     direction?: Direction;
+    /** 设置容器层级（数字越大布局越靠前） */
+    level?: number;
     vertices?: NodePosition[] | null;
 }
 export interface DecoratorLineView extends NodeView, BaseEdgeLineConf {
@@ -256,8 +258,13 @@ export interface DecoratorTextChangeDetail {
     view: DecoratorView | DecoratorLineView;
 }
 export type LayoutType = "manual" | "force" | "dagre" | undefined;
+/**
+ * layered-architecture: 分层架构
+ */
+export type InitialLayout = "default" | "layered-architecture";
 export type LayoutOptions = LayoutOptionsManual | LayoutOptionsDagre | LayoutOptionsForce;
 export interface LayoutOptionsManual extends BaseLayoutOptions {
+    initialLayout?: InitialLayout;
 }
 export interface BaseLayoutOptions {
     /** Snap options. Setting to true means enable all snap options */

package/dist-types/draw-canvas/processors/asserts.d.ts

@@ -1,17 +1,18 @@
-import type { Cell, DecoratorCell, EdgeCell, EditableEdgeLine, EditableLine, InitialCell, InitialNodeCell, LayoutType, LineDecoratorCell, LineType, NodeCell } from "../interfaces";
+import type { Cell, DecoratorCell, EdgeCell, EditableEdgeLine, EditableLine, InitialCell, InitialNodeCell, InitialNodeView, LayoutType, LineDecoratorCell, LineType, NodeCell } from "../interfaces";
 import { MoveCellPayload } from "../reducers/interfaces";
 export declare function isNodeCell(cell: Cell | MoveCellPayload): cell is NodeCell;
 export declare function isDecoratorCell(cell: Cell): cell is DecoratorCell;
 export declare function isInitialNodeCell(cell: InitialCell): cell is InitialNodeCell;
-export declare function isEdgeCell(cell: Cell): cell is EdgeCell;
+export declare function isEdgeCell(cell: InitialCell): cell is EdgeCell;
 export declare function isNodeOrEdgeCell(cell: Cell): cell is NodeCell | EdgeCell;
 export declare function isNodeOrAreaDecoratorCell(cell: Cell): cell is NodeCell | DecoratorCell;
 export declare function isEdgeSide(cell: Cell, allowEdgeToArea: boolean | undefined): cell is NodeCell | DecoratorCell;
 export declare function isNodeOrTextDecoratorCell(cell: Cell | MoveCellPayload): cell is NodeCell | DecoratorCell;
 export declare function isTextDecoratorCell(cell: Cell): cell is DecoratorCell;
-export declare function isContainerDecoratorCell(cell: Cell | MoveCellPayload): cell is DecoratorCell;
-export declare function isRectDecoratorCell(cell: Cell | MoveCellPayload): cell is DecoratorCell;
+export declare function isContainerDecoratorCell(cell: InitialCell | MoveCellPayload): cell is DecoratorCell;
 export declare function isLineDecoratorCell(cell: Cell | LineDecoratorCell | MoveCellPayload): cell is LineDecoratorCell;
 export declare function isNoManualLayout(layout: LayoutType): boolean;
+export declare function isNoSize(view: InitialNodeView): boolean;
+export declare function isNoPoint(view: InitialNodeView): boolean;
 export declare function isStraightType(type: LineType | undefined): type is "straight" | undefined;
 export declare function isEditableEdgeLine(line: EditableLine): line is EditableEdgeLine;

package/dist-types/draw-canvas/processors/generateNewPointsWithLayout.d.ts

@@ -0,0 +1,12 @@
+import { InitialCell } from "../interfaces";
+import { SizeTuple } from "../../diagram/interfaces";
+/**
+ * 在容器内新加节点时，计算新节点的点按位置
+ * 按网格排布避免重叠
+ * @param cells
+ * @param defaultNodeSize 默认节点大小
+ * @returns void
+ */
+export declare function generateNewPointsWithLayout(cells: InitialCell[], { defaultNodeSize }: {
+    defaultNodeSize: SizeTuple;
+}): void;

package/dist-types/draw-canvas/processors/initaliContainerLayout.d.ts

@@ -0,0 +1,6 @@
+import type { InitialCell } from "../interfaces";
+/**
+ * 初始化容器内节点层次布局以及同步容器大小位置
+ * @param cells
+ */
+export declare function initaliContainerLayout(cells: InitialCell[]): void;

package/dist-types/draw-canvas/processors/initializeCells.d.ts

@@ -1,5 +1,9 @@
 import type { SizeTuple } from "../../diagram/interfaces";
-import type { Cell, InitialCell } from "../interfaces";
-export declare function initializeCells(initialCells: InitialCell[] | undefined, { defaultNodeSize, }: {
+import type { Cell, InitialCell, LayoutOptions } from "../interfaces";
+interface initializeConfig {
     defaultNodeSize: SizeTuple;
-}): Cell[];
+    layoutOptions?: LayoutOptions;
+    isInitialize?: boolean;
+}
+export declare function initializeCells(initialCells: InitialCell[] | undefined, { defaultNodeSize, layoutOptions, isInitialize }: initializeConfig): Cell[];
+export {};

package/dist-types/draw-canvas/processors/updateCells.d.ts

@@ -1,6 +1,6 @@
 import type { RangeTuple, SizeTuple, TransformLiteral } from "../../diagram/interfaces";
-import type { Cell, InitialCell, LayoutType, NodeId } from "../interfaces";
-export declare function updateCells({ cells, layout, previousCells, defaultNodeSize, canvasWidth, canvasHeight, scaleRange, transform, reason, parent, allowEdgeToArea, }: {
+import type { Cell, InitialCell, LayoutOptions, LayoutType, NodeId } from "../interfaces";
+export declare function updateCells({ cells, layout, previousCells, defaultNodeSize, canvasWidth, canvasHeight, scaleRange, transform, reason, parent, allowEdgeToArea, layoutOptions, }: {
     cells: InitialCell[] | undefined;
     layout?: LayoutType;
     previousCells: Cell[];
@@ -12,6 +12,7 @@ export declare function updateCells({ cells, layout, previousCells, defaultNodeS
     reason?: "add-related-nodes";
     parent?: NodeId;
     allowEdgeToArea?: boolean;
+    layoutOptions?: LayoutOptions;
 }): {
     cells: Cell[];
     updated: Cell[];

package/docs/eo-draw-canvas.md

@@ -20,50 +20,34 @@
           [
             {
               type: "decorator",
-              id: "area-1",
-              decorator: "area",
-              view: {
-                x: 10,
-                y: 20,
-                width: 400,
-                height: 300,
-                style: {
-                  backgroundColor: "var(--palette-green-3)",
-                }
-              },
-            },
-            {
-              type: "decorator",
-              id: "rect-1",
-              decorator: "rect",
+              id: "container-1",
+              decorator: "container",
               view: {
-                x: 10,
-                y: 20,
-                width: 400,
-                height: 300,
-                style: {
-                  borderColor: "var(--palette-purple-3)",
-                }
+                direction: "left",
+                text: "上层服务" ,
+                level: 1
               },
             },
             {
               type: "decorator",
-              id: "container-1",
+              id: "container-2",
               decorator: "container",
               view: {
-               x: 50,
-                y: 400,
-                width: 280,
-                height: 120,
-                direction: "top",
-                text: " 上层服务"
+                direction: "left",
+                text: "应用" ,
+                level: 2
               },
             },
             {
-              type: "edge",
+              type: "edge", 
               source: "X",
               target: "Y",
             },
+            {
+              type: "edge",
+              source: "Z", 
+              target: "W",
+            },
             {
               type: "edge",
               source: "X",
@@ -73,22 +57,22 @@
               }
             },
           ].concat(
-            ["X", "Y", "Z", "W"].map((id) => ({
+            ["A","B","X", "Y", "Z", "W",].map((id) => ({
               type: "node",
               id,
-              containerId: id==="W"?"container-1":undefined,
+              containerId: ["W","Z","X","Y"].includes(id)?"container-1":"container-2",
               data: {
                 name: `Node ${id}`,
-              },
+              }, 
               view: {
-                x: Math.round(
+                x: ["A","B","Z","X","Y"].includes(id)?null:Math.round(
                   id === "X"
                     ? 200 + Math.random() * 200
                     : id === "Y"
                     ? Math.random() * 300
                     : 300 + Math.random() * 300
                 ),
-                y: (id === "X" ? 0 : 300) + Math.round((Math.random() * 200)),
+                y: ["A","B","Z","X","Y"].includes(id)?null:(id === "X" ? 0 : 300) + Math.round((Math.random() * 200)),
                 width: 60,
                 height: 60,
               }
@@ -97,9 +81,9 @@
             {
               type: "decorator",
               id: "text-1",
-              decorator: "text",
+              decorator: "text", 
               view: {
-                x: 100,
+                x: 300,
                 y: 120,
                 width: 100,
                 height: 20,
@@ -121,7 +105,7 @@
     - brick: div
       properties:
         style:
-          width: 180px
+          width: 200px
           display: flex
           flexDirection: column
           gap: 1em
@@ -155,6 +139,34 @@
                   args:
                     - Added nodes
                     - <% EVENT.detail %>
+        - brick: eo-button
+          properties:
+            textContent: Add nodes to container-1
+          events:
+            click:
+              target: eo-draw-canvas
+              method: addNodes
+              args:
+                - |
+                  <%
+                    ((...seeds) => seeds.map((seed) => ({
+                      id: seed,
+                      containerId: "container-1",
+                      data: {
+                        name: String(seed),
+                      },
+                    })))(
+                      Math.round(Math.random() * 1e6),
+                      Math.round(Math.random() * 1e6),
+                      Math.round(Math.random() * 1e6),
+                    )
+                  %>
+              callback:
+                success:
+                  action: console.log
+                  args:
+                    - Added nodes
+                    - <% EVENT.detail %>
         - brick: eo-button
           properties:
             textContent: "Add edge: Y => Z"
@@ -339,6 +351,7 @@
             allowEdgeToArea: true
             dragBehavior: lasso
             layoutOptions:
+              initialLayout: layered-architecture
               snap:
                 # grid: true
                 object: true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next-bricks/diagram",
-  "version": "0.63.2",
+  "version": "0.64.0",
   "homepage": "https://github.com/easyops-cn/next-advanced-bricks/tree/master/bricks/diagram",
   "repository": {
     "type": "git",
@@ -41,5 +41,5 @@
   "peerDependencies": {
     "@next-bricks/basic": "*"
   },
-  "gitHead": "4028cb1636e47233af1b1b6ac0b8eb4b6cb9e9d1"
+  "gitHead": "20960bc108e3ee849ac6ef7d1d35f5cbb3722a1a"
 }