@next-bricks/diagram 0.28.0 → 0.29.0

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

@@ -2,9 +2,11 @@ import React from "react";
 import { ReactNextElement } from "@next-core/react-element";
 import "@next-core/theme";
 import type { RangeTuple, SizeTuple } from "../diagram/interfaces";
-import type { ActiveTarget, InitialCell, NodeBrickConf, CellContextMenuDetail, EdgeLineConf } from "../draw-canvas/interfaces";
+import type { ActiveTarget, InitialCell, NodeBrickConf, CellContextMenuDetail, EdgeLineConf, LayoutType, LayoutOptions } from "../draw-canvas/interfaces";
 export interface EoDisplayCanvasProps {
     cells: InitialCell[] | undefined;
+    layout: LayoutType;
+    layoutOptions?: LayoutOptions;
     defaultNodeSize: SizeTuple;
     defaultNodeBricks?: NodeBrickConf[];
     defaultEdgeLines?: EdgeLineConf[];
@@ -24,6 +26,8 @@ export declare class EoDisplayCanvas extends ReactNextElement implements EoDispl
      * 仅当初始化时使用，渲染后重新设置 `cells` 将无效。
      */
     accessor cells: InitialCell[] | undefined;
+    accessor layout: LayoutType;
+    accessor layoutOptions: LayoutOptions | undefined;
     accessor defaultNodeSize: SizeTuple;
     accessor defaultNodeBricks: NodeBrickConf[] | undefined;
     /**

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

@@ -1,8 +1,9 @@
 /// <reference types="react" />
-import type { ActiveTarget, Cell, CellContextMenuDetail, DecoratorTextChangeDetail, EdgeLineConf, NodeBrickConf } from "./interfaces";
+import type { ActiveTarget, Cell, CellContextMenuDetail, DecoratorTextChangeDetail, EdgeLineConf, LayoutType, NodeBrickConf } from "./interfaces";
 import type { MoveCellPayload, ResizeCellPayload } from "./reducers/interfaces";
 import type { SizeTuple, TransformLiteral } from "../diagram/interfaces";
 export interface CellComponentProps {
+    layout: LayoutType;
     cell: Cell;
     cells: Cell[];
     defaultNodeBricks?: NodeBrickConf[];
@@ -27,4 +28,4 @@ export interface CellComponentProps {
     onCellMouseEnter?(cell: Cell): void;
     onCellMouseLeave?(cell: Cell): void;
 }
-export declare function CellComponent({ cell, cells, defaultNodeBricks, defaultEdgeLines, markerEnd, active, readOnly, transform, unrelatedCells, onCellMoving, onCellMoved, onCellResizing, onCellResized, onSwitchActiveTarget, onCellContextMenu, onDecoratorTextEditing, onDecoratorTextChange, onNodeBrickResize, onCellMouseEnter, onCellMouseLeave, }: CellComponentProps): JSX.Element | null;
+export declare function CellComponent({ layout, cell, cells, defaultNodeBricks, defaultEdgeLines, markerEnd, active, readOnly, transform, unrelatedCells, onCellMoving, onCellMoved, onCellResizing, onCellResized, onSwitchActiveTarget, onCellContextMenu, onDecoratorTextEditing, onDecoratorTextChange, onNodeBrickResize, onCellMouseEnter, onCellMouseLeave, }: CellComponentProps): JSX.Element | null;

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

@@ -1,4 +1,5 @@
 export declare const SYMBOL_FOR_SIZE_INITIALIZED: unique symbol;
+export declare const SYMBOL_FOR_LAYOUT_INITIALIZED: unique symbol;
 export declare const DEFAULT_NODE_SIZE = 20;
 export declare const DEFAULT_NODE_GAP = 36;
 export declare const DEFAULT_AREA_WIDTH = 100;

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

@@ -3,10 +3,12 @@ import { ReactNextElement } from "@next-core/react-element";
 import type { UseSingleBrickConf } from "@next-core/react-runtime";
 import "@next-core/theme";
 import type { PositionTuple, RangeTuple, SizeTuple, TransformLiteral } from "../diagram/interfaces";
-import type { ActiveTarget, Cell, EdgeCell, InitialCell, NodeBrickConf, NodeCell, NodeId, DecoratorCell, DecoratorType, CellContextMenuDetail, ConnectNodesDetail, EdgeLineConf, DecoratorTextChangeDetail } from "./interfaces";
+import type { ActiveTarget, Cell, EdgeCell, InitialCell, NodeBrickConf, NodeCell, NodeId, DecoratorCell, DecoratorType, CellContextMenuDetail, ConnectNodesDetail, EdgeLineConf, DecoratorTextChangeDetail, LayoutType, LayoutOptions } from "./interfaces";
 import type { MoveCellPayload, ResizeCellPayload } from "./reducers/interfaces";
 export interface EoDrawCanvasProps {
     cells: InitialCell[] | undefined;
+    layout: LayoutType;
+    layoutOptions?: LayoutOptions;
     defaultNodeSize: SizeTuple;
     defaultNodeBricks?: NodeBrickConf[];
     defaultEdgeLines?: EdgeLineConf[];
@@ -44,6 +46,7 @@ export interface UpdateCellsContext {
 }
 export interface AddNodesContext {
     defaultNodeSize: SizeTuple;
+    canvasWidth: number;
     canvasHeight: number;
 }
 export declare const EoDrawCanvasComponent: React.ForwardRefExoticComponent<EoDrawCanvasComponentProps & React.RefAttributes<DrawCanvasRef>>;
@@ -58,6 +61,8 @@ export declare class EoDrawCanvas extends ReactNextElement implements EoDrawCanv
      * 仅当初始化时使用，渲染后重新设置 `cells` 将无效。
      */
     accessor cells: InitialCell[] | undefined;
+    accessor layout: LayoutType;
+    accessor layoutOptions: LayoutOptions | undefined;
     accessor defaultNodeSize: SizeTuple;
     accessor defaultNodeBricks: NodeBrickConf[] | undefined;
     /**
@@ -109,6 +114,7 @@ export interface DrawCanvasRef {
     manuallyConnectNodes(source: NodeId): Promise<ConnectNodesDetail>;
     updateCells(cells: InitialCell[], ctx: Partial<UpdateCellsContext> & {
         defaultNodeSize: SizeTuple;
+        canvasWidth: number;
         canvasHeight: number;
     }): {
         cells: Cell[];

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

@@ -1,7 +1,8 @@
 import type { UseSingleBrickConf } from "@next-core/react-runtime";
+import type { SimulationLinkDatum, SimulationNodeDatum } from "d3-force";
 import type { ResizeCellPayload } from "./reducers/interfaces";
-import type { PositionTuple, TransformLiteral } from "../diagram/interfaces";
-import { SYMBOL_FOR_SIZE_INITIALIZED } from "./constants";
+import type { PartialRectTuple, PositionTuple, TransformLiteral } from "../diagram/interfaces";
+import { SYMBOL_FOR_SIZE_INITIALIZED, type SYMBOL_FOR_LAYOUT_INITIALIZED } from "./constants";
 export type Cell = NodeCell | EdgeCell | DecoratorCell;
 export type BrickCell = NodeBrickCell;
 export type NodeCell = NodeBrickCell;
@@ -17,6 +18,7 @@ export interface BaseNodeCell extends BaseCell {
     id: NodeId;
     view: NodeView;
     [SYMBOL_FOR_SIZE_INITIALIZED]?: boolean;
+    [SYMBOL_FOR_LAYOUT_INITIALIZED]?: boolean;
 }
 export interface BaseEdgeCell extends BaseCell {
     type: "edge";
@@ -108,3 +110,29 @@ export interface DecoratorTextChangeDetail {
     id: string;
     view: DecoratorView;
 }
+export type LayoutType = "manual" | "force" | "dagre" | undefined;
+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 {
+    collide?: boolean | ForceCollideOptions;
+}
+export interface ForceCollideOptions {
+    radiusDiff?: number;
+    strength?: number;
+    iterations?: number;
+}
+export interface BaseLayoutOptions {
+    nodePadding?: PartialRectTuple;
+}
+export interface ForceNode extends SimulationNodeDatum {
+    id: NodeId;
+    width: number;
+    height: number;
+}
+export type ForceLink = SimulationLinkDatum<ForceNode>;

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

@@ -3,3 +3,4 @@ export declare function isNodeCell(cell: Cell): 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 isNodeOrEdgeCell(cell: Cell): cell is NodeCell | EdgeCell;

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

@@ -1,9 +1,10 @@
-import type { ActiveTarget, Cell } from "../interfaces";
+import type { ActiveTarget, Cell, LayoutType } from "../interfaces";
 import type { MoveCellPayload, ResizeCellPayload } from "../reducers/interfaces";
-export declare function handleMouseDown(event: MouseEvent, { action, cell, scale, onCellMoving, onCellMoved, onCellResizing, onCellResized, onSwitchActiveTarget, }: {
+export declare function handleMouseDown(event: MouseEvent, { action, cell, scale, layout, onCellMoving, onCellMoved, onCellResizing, onCellResized, onSwitchActiveTarget, }: {
     action: "move" | "resize";
     cell: Cell;
     scale: number;
+    layout?: LayoutType;
     onCellMoving?(info: MoveCellPayload): void;
     onCellMoved?(info: MoveCellPayload): void;
     onCellResizing?(info: ResizeCellPayload): void;

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

@@ -1,10 +1,13 @@
-import type { SizeTuple, TransformLiteral } from "../../diagram/interfaces";
-import type { Cell, InitialCell, NodeId } from "../interfaces";
-export declare function updateCells({ cells, previousCells, defaultNodeSize, canvasHeight, transform, reason, parent, }: {
+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, }: {
     cells: InitialCell[];
+    layout?: LayoutType;
     previousCells: Cell[];
     defaultNodeSize: SizeTuple;
+    canvasWidth: number;
     canvasHeight: number;
+    scaleRange: RangeTuple;
     transform: TransformLiteral;
     reason?: "add-related-nodes";
     parent?: NodeId;

package/dist-types/shared/canvas/useAutoCenter.d.ts

@@ -5,6 +5,7 @@ import type { Cell } from "../../draw-canvas/interfaces";
 export interface UseAutoCenterOptions {
     rootRef: React.RefObject<SVGSVGElement>;
     cells: Cell[];
+    layoutInitialized: boolean;
     zoomable?: boolean;
     zoomer: ZoomBehavior<SVGSVGElement, unknown>;
     scaleRange: RangeTuple;
@@ -13,4 +14,4 @@ export type UseAutoCenterResult = [
     centered: boolean,
     setCentered: React.Dispatch<React.SetStateAction<boolean>>
 ];
-export declare function useAutoCenter({ rootRef, cells, zoomable, zoomer, scaleRange, }: UseAutoCenterOptions): UseAutoCenterResult;
+export declare function useAutoCenter({ rootRef, cells, layoutInitialized, zoomable, zoomer, scaleRange, }: UseAutoCenterOptions): UseAutoCenterResult;

package/dist-types/shared/canvas/useLayout.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import type { ZoomBehavior } from "d3-zoom";
+import type { Cell, LayoutOptions, LayoutType } from "../../draw-canvas/interfaces";
+import type { RangeTuple } from "../../diagram/interfaces";
+import type { DrawCanvasAction } from "../../draw-canvas/reducers/interfaces";
+export interface UseLayoutOptions {
+    layout: LayoutType;
+    layoutOptions?: LayoutOptions;
+    rootRef: React.RefObject<SVGSVGElement>;
+    cells: Cell[];
+    zoomable?: boolean;
+    zoomer: ZoomBehavior<SVGSVGElement, unknown>;
+    scaleRange: RangeTuple;
+    dispatch: (value: DrawCanvasAction) => void;
+}
+export declare function useLayout({ layout, layoutOptions, rootRef, cells, zoomable, zoomer, scaleRange, dispatch, }: UseLayoutOptions): {
+    centered: boolean;
+    setCentered: React.Dispatch<React.SetStateAction<boolean>>;
+};

package/dist-types/shared/canvas/useReady.d.ts

@@ -0,0 +1,7 @@
+import type { Cell, LayoutType } from "../../draw-canvas/interfaces";
+export interface UseReadyOptions {
+    cells: Cell[];
+    layout: LayoutType;
+    centered: boolean;
+}
+export declare function useReady({ cells, layout, centered }: UseReadyOptions): boolean;

package/docs/eo-display-canvas.md

@@ -146,3 +146,279 @@
         ]
       %>
 ```
+
+### Force layout
+
+```yaml preview minHeight="600px"
+- brick: div
+  properties:
+    style:
+      display: flex
+      height: 600px
+      gap: 1em
+  context:
+    - name: initialCells
+      value: |
+        <%
+          [
+            {
+              type: "decorator",
+              id: "area-1",
+              decorator: "area",
+              view: {
+                x: 10,
+                y: 20,
+                width: 400,
+                height: 300,
+              },
+            },
+            {
+              type: "edge",
+              source: "X",
+              target: "Y",
+            },
+            {
+              type: "edge",
+              source: "X",
+              target: "Z",
+              data: {
+                virtual: true,
+              }
+            },
+          ].concat(
+            ["X", "Y", "Z", "W"].map((id) => ({
+              type: "node",
+              id,
+              data: {
+                name: `Node ${id}`,
+              },
+              view: {
+                width: 60,
+                height: 60,
+              }
+            }))
+          ).concat([
+            {
+              type: "decorator",
+              id: "text-1",
+              decorator: "text",
+              view: {
+                x: 100,
+                y: 120,
+                width: 100,
+                height: 20,
+                text: "Hello!"
+              },
+            },
+          ])
+        %>
+    - name: activeTarget
+    - name: targetCell
+  children:
+    - brick: div
+      properties:
+        style:
+          flex: 1
+          minWidth: 0
+      children:
+        - brick: eo-display-canvas
+          properties:
+            style:
+              width: 100%
+              height: 100%
+            activeTarget: <%= CTX.activeTarget %>
+            fadeUnrelatedCells: true
+            layout: force
+            # Initial nodes only
+            defaultNodeSize: [60, 60]
+            defaultNodeBricks:
+              - useBrick:
+                  brick: diagram.experimental-node
+                  properties:
+                    textContent: <% `Node ${DATA.node.id}` %>
+                    status: |
+                      <%=
+                        CTX.activeTarget?.type === "node" && CTX.activeTarget.id === DATA.node.id
+                          ? "highlighted"
+                          // : CTX.unrelated.some(n =>
+                          //     n.type === "node" && n.id === DATA.node.id
+                          //   )
+                          // ? "faded"
+                          : "default"
+                      %>
+            defaultEdgeLines:
+              - if: <% DATA.edge.data?.virtual %>
+                dashed: true
+            cells: <% CTX.initialCells %>
+          events:
+            activeTarget.change:
+              action: context.replace
+              args:
+                - activeTarget
+                - <% EVENT.detail %>
+            cell.contextmenu:
+              - target: eo-context-menu
+                method: open
+                args:
+                  - position:
+                      - <% EVENT.detail.clientX %>
+                      - <% EVENT.detail.clientY %>
+              - action: context.replace
+                args:
+                  - targetCell
+                  - <% EVENT.detail.cell %>
+            scale.change:
+              action: context.replace
+              args:
+                - scale
+                - <% EVENT.detail %>
+- brick: eo-context-menu
+  properties:
+    actions: |
+      <%=
+        [
+          {
+            text: `Test ${CTX.targetCell?.type}`,
+            event: `test-${CTX.targetCell?.type}`,
+          }
+        ]
+      %>
+```
+
+### Dagre layout
+
+```yaml preview minHeight="600px"
+- brick: div
+  properties:
+    style:
+      display: flex
+      height: 600px
+      gap: 1em
+  context:
+    - name: initialCells
+      value: |
+        <%
+          [
+            {
+              type: "decorator",
+              id: "area-1",
+              decorator: "area",
+              view: {
+                x: 10,
+                y: 20,
+                width: 400,
+                height: 300,
+              },
+            },
+            {
+              type: "edge",
+              source: "X",
+              target: "Y",
+            },
+            {
+              type: "edge",
+              source: "X",
+              target: "Z",
+              data: {
+                virtual: true,
+              }
+            },
+          ].concat(
+            ["X", "Y", "Z", "W"].map((id) => ({
+              type: "node",
+              id,
+              data: {
+                name: `Node ${id}`,
+              },
+              view: {
+                width: 60,
+                height: 60,
+              }
+            }))
+          ).concat([
+            {
+              type: "decorator",
+              id: "text-1",
+              decorator: "text",
+              view: {
+                x: 100,
+                y: 120,
+                width: 100,
+                height: 20,
+                text: "Hello!"
+              },
+            },
+          ])
+        %>
+    - name: activeTarget
+    - name: targetCell
+  children:
+    - brick: div
+      properties:
+        style:
+          flex: 1
+          minWidth: 0
+      children:
+        - brick: eo-display-canvas
+          properties:
+            style:
+              width: 100%
+              height: 100%
+            activeTarget: <%= CTX.activeTarget %>
+            fadeUnrelatedCells: true
+            layout: dagre
+            # Initial nodes only
+            defaultNodeSize: [60, 60]
+            defaultNodeBricks:
+              - useBrick:
+                  brick: diagram.experimental-node
+                  properties:
+                    textContent: <% `Node ${DATA.node.id}` %>
+                    status: |
+                      <%=
+                        CTX.activeTarget?.type === "node" && CTX.activeTarget.id === DATA.node.id
+                          ? "highlighted"
+                          // : CTX.unrelated.some(n =>
+                          //     n.type === "node" && n.id === DATA.node.id
+                          //   )
+                          // ? "faded"
+                          : "default"
+                      %>
+            defaultEdgeLines:
+              - if: <% DATA.edge.data?.virtual %>
+                dashed: true
+            cells: <% CTX.initialCells %>
+          events:
+            activeTarget.change:
+              action: context.replace
+              args:
+                - activeTarget
+                - <% EVENT.detail %>
+            cell.contextmenu:
+              - target: eo-context-menu
+                method: open
+                args:
+                  - position:
+                      - <% EVENT.detail.clientX %>
+                      - <% EVENT.detail.clientY %>
+              - action: context.replace
+                args:
+                  - targetCell
+                  - <% EVENT.detail.cell %>
+            scale.change:
+              action: context.replace
+              args:
+                - scale
+                - <% EVENT.detail %>
+- brick: eo-context-menu
+  properties:
+    actions: |
+      <%=
+        [
+          {
+            text: `Test ${CTX.targetCell?.type}`,
+            event: `test-${CTX.targetCell?.type}`,
+          }
+        ]
+      %>
+```