@openchoreo/cell-diagram 1.2.0-rc.1

package/dist/index.d.ts

@@ -0,0 +1,407 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { BaseModelOptions, DeserializeEvent, BaseEvent } from '@projectstorm/react-canvas-core';
+import { DefaultLinkModel, DiagramEngine, NodeModel, NodeModelGenerics, PortModel, DefaultPortModel, PortModelAlignment } from '@projectstorm/react-diagrams';
+import { LinkModel, PortModel as PortModel$1, PointModel, LabelModel, PointModelGenerics } from '@projectstorm/react-diagrams-core';
+import { DefaultLinkModelGenerics } from '@projectstorm/react-diagrams-defaults';
+
+declare class SharedLinkModel extends DefaultLinkModel {
+    diagramEngine: DiagramEngine;
+    observations: Observations[];
+    observationOnly: boolean;
+    tooltip: string;
+    constructor(id: string, type: string);
+    initLinks: (diagramEngine: DiagramEngine) => void;
+    fireEventTroughLink: (event: string) => void;
+    selectLinkedNodes: () => void;
+    resetLinkedNodes: () => void;
+    getCurvePath: () => string;
+    getArrowHeadPoints: (scale?: number) => string;
+    setObservations: (observations: Observations[], observationOnly?: boolean) => void;
+    setTooltip: (tooltip: string) => void;
+    getMidPoint: () => {
+        x: number;
+        y: number;
+    };
+    scaleValueToLinkWidth: (requestCount: number, minRequestCount: number, maxRequestCount: number, maxPossibleRequestCount?: number, minStrokeWidth?: number, maxFullStrokeWidth?: number) => number;
+    getLinkArrowId: () => string;
+}
+
+interface LinkOrigins$2 {
+    nodeId: string;
+}
+declare class ComponentLinkModel extends SharedLinkModel {
+    sourceNode: LinkOrigins$2;
+    targetNode: LinkOrigins$2;
+    constructor(id: string);
+    setSourceNode(nodeId: string): void;
+    setTargetNode(nodeId: string): void;
+}
+
+declare class SharedNodeModel extends NodeModel<NodeModelGenerics> {
+    constructor(type: string, id: string);
+    handleHover: (ports: PortModel[], task: string) => void;
+    isNodeSelected: (selectedLink: ComponentLinkModel, portIdentifier: string) => boolean;
+    getDynamicLineWidth: (zoomLevel: number, minWidth?: number, maxWidth?: number) => number;
+}
+
+declare class ProjectPortModel extends DefaultPortModel {
+    constructor(id: string, portType: PortModelAlignment);
+    isLocked(): boolean;
+}
+
+declare class ProjectModel extends SharedNodeModel {
+    readonly project: Project;
+    constructor(project: Project);
+    getPort(name: string): ProjectPortModel;
+}
+
+interface AdvancedLinkModelOptions extends BaseModelOptions {
+    width?: number;
+    color?: string;
+    selectedColor?: string;
+    curvyness?: number;
+    type?: string;
+    testName?: string;
+    receiver?: string;
+}
+declare class AdvancedLinkModel extends LinkModel<DefaultLinkModelGenerics> {
+    linkYOffset: number;
+    linkXOffset: number;
+    constructor(options?: AdvancedLinkModelOptions);
+    calculateControlOffset(port: PortModel$1): [number, number];
+    getSVGPath(): string;
+    getSVGPathSegment(firstPoint: PointModel, lastPoint: PointModel): string;
+    calculateControlOffsetWithPosition(rightTraget: boolean, bottomTarget: boolean): [number, number];
+    serialize(): {
+        width: number | undefined;
+        color: string | undefined;
+        curvyness: number | undefined;
+        selectedColor: string | undefined;
+        source: string;
+        sourcePort: string;
+        target: string;
+        targetPort: string;
+        points: {
+            x: number;
+            y: number;
+            type: string;
+            selected: boolean;
+            extras: any;
+            id: string;
+            locked: boolean;
+        }[];
+        labels: {
+            offsetX: number;
+            offsetY: number;
+            type: string;
+            selected: boolean;
+            extras: any;
+            id: string;
+            locked: boolean;
+        }[];
+        type: string;
+        selected: boolean;
+        extras: any;
+        id: string;
+        locked: boolean;
+    };
+    deserialize(event: DeserializeEvent<this>): void;
+    addLabel(label: LabelModel | string): void;
+    setWidth(width: number): void;
+    setColor(color: string): void;
+    addPoint<P extends PointModel<PointModelGenerics>>(): P;
+}
+
+declare class ComponentModel extends SharedNodeModel {
+    readonly component: Component;
+    constructor(component: Component);
+    isExternalConsumer(): boolean;
+}
+
+declare enum Orientation {
+    VERTICAL = "vertical",
+    HORIZONTAL = "horizontal"
+}
+declare class ConnectionModel extends SharedNodeModel {
+    readonly connection: Connection;
+    readonly orientation: Orientation;
+    constructor(connection: Connection, orientation?: Orientation);
+}
+
+declare enum CellBounds {
+    NorthBound = "nb",
+    SouthBound = "sb",
+    EastBound = "eb",
+    WestBound = "wb"
+}
+
+interface LinkOrigins$1 {
+    nodeId: string;
+}
+declare class CellLinkModel extends SharedLinkModel {
+    sourceNode: LinkOrigins$1;
+    targetNode: LinkOrigins$1;
+    isExternalConsumerLink: boolean;
+    destinationNode: ComponentModel;
+    constructor(id: string);
+    setIsExternalConsumerLink(isExternalConsumerLink: boolean): void;
+    setDestinationNode(destinationNode: ComponentModel): void;
+    setSourceNode(nodeId: string): void;
+    setTargetNode(nodeId: string): void;
+    getDestinationNode(): ComponentModel;
+    getIsExternalConsumerLink(): boolean;
+    getArrowHeadPoints: (scale?: number) => string;
+    showArrowHead: () => boolean;
+}
+
+declare class EmptyModel extends SharedNodeModel {
+    readonly bound: CellBounds;
+    readonly width: number;
+    constructor(bound: CellBounds, width?: number, suffix?: string);
+}
+
+declare class ExternalModel extends SharedNodeModel {
+    constructor(id: string);
+}
+
+interface LinkOrigins {
+    nodeId: string;
+}
+declare class ExternalLinkModel extends SharedLinkModel {
+    sourceNode: LinkOrigins;
+    targetNode: LinkOrigins;
+    withRightOffset: boolean;
+    constructor(id: string, withRightOffset?: boolean);
+    setSourceNode(nodeId: string): void;
+    setTargetNode(nodeId: string): void;
+    getArrowHeadPoints: () => string;
+    getCurvePath: () => string;
+    getCurvePathWithOffset: () => string;
+    getTwoBendPath: () => string;
+}
+
+interface Organization {
+    id: string;
+    name: string;
+    projects: Project[];
+    configurations?: Connection[];
+    modelVersion: string;
+}
+interface Project {
+    id: string;
+    name: string;
+    components: Component[];
+    connections?: OrgConnection[];
+    configurations?: Connection[];
+    modelVersion?: string;
+}
+declare enum ComponentType {
+    SERVICE = "service",
+    WEB_APP = "web-app",
+    SCHEDULED_TASK = "scheduled-task",
+    MANUAL_TASK = "manual-task",
+    API_PROXY = "api-proxy",
+    WEB_HOOK = "web-hook",
+    EVENT_HANDLER = "event-handler",
+    TEST = "test",
+    EXTERNAL_CONSUMER = "external-consumer",
+    SYSTEM_COMPONENT = "system"
+}
+type ExternalConsumerLinkSelectEvent = BaseEvent & {
+    cellBound: CellBounds;
+};
+interface Component {
+    id: string;
+    label?: string;
+    version: string;
+    type: ComponentType;
+    buildPack?: string;
+    services: Services;
+    connections: Connection[];
+    disabled?: {
+        status: boolean;
+        reason?: string;
+    };
+}
+interface Services {
+    [key: string]: Service;
+}
+interface Service {
+    id: string;
+    label?: string;
+    type: string;
+    dependencyIds: string[];
+    deploymentMetadata?: DeploymentMetadata;
+}
+interface Connection {
+    id: string;
+    label?: string;
+    type?: ConnectionType;
+    onPlatform?: boolean;
+    tooltip?: string;
+    observations?: Observations[];
+    observationOnly?: boolean;
+}
+declare enum ConnectionType {
+    HTTP = "http",
+    GRPC = "grpc",
+    WebSocket = "web-socket",
+    Connector = "connector",
+    Datastore = "datastore"
+}
+interface ProjectGateway {
+    projectId: string;
+    boundary: CellBounds;
+}
+interface OrgConnection {
+    id: string;
+    label?: string;
+    tooltip?: string;
+    source: {
+        boundary: CellBounds;
+    };
+    target?: ProjectGateway | Connection;
+}
+interface ComponentMetadata {
+    type: ConnectionType;
+    organization: string;
+    project: string;
+    component: string;
+    service?: string;
+}
+interface ConnectorMetadata {
+    type: ConnectionType.Connector;
+    organization: string;
+    package: string;
+}
+type ConnectionMetadata = ComponentMetadata | ConnectorMetadata;
+interface DeploymentMetadata {
+    gateways: {
+        internet: {
+            isExposed: boolean;
+            tooltip?: string;
+            observations?: Observations[];
+            observationOnly?: boolean;
+        };
+        intranet: {
+            isExposed: boolean;
+            tooltip?: string;
+            observations?: Observations[];
+            observationOnly?: boolean;
+        };
+    };
+}
+interface Observations {
+    label?: string;
+    componentVersion?: string;
+    sourceNodeId: number;
+    destinationNodeId: number;
+    avgLatency: number;
+    errorCount: number;
+    p50Latency: number;
+    p90Latency: number;
+    p99Latency: number;
+    requestCount: number;
+}
+type CommonModel = ProjectModel | ComponentModel | ConnectionModel | ExternalModel | EmptyModel;
+interface OrgDiagramData {
+    nodes: Nodes;
+    links: Links;
+}
+interface ProjectDiagramData {
+    nodes: Nodes;
+    links: Links;
+    gateways: Gateways;
+    observationSummary: ObservationSummary;
+}
+interface Gateways {
+    internet: boolean;
+    intranet: boolean;
+}
+interface ObservationSummary {
+    requestCount: {
+        min: number;
+        max: number;
+    };
+}
+interface Nodes {
+    [key: string]: Map<string, CommonModel>;
+}
+interface Links {
+    [key: string]: Map<string, ComponentLinkModel | ExternalLinkModel | CellLinkModel | AdvancedLinkModel>;
+}
+interface MoreVertMenuItem {
+    label: string;
+    callback: (id: string, version?: string) => void;
+}
+declare enum DiagramLayer {
+    ARCHITECTURE = "architecture",
+    OBSERVABILITY = "observability",
+    DIFF = "diff"
+}
+interface CustomTooltips {
+    diagramLayers: DiagramLayerTooltips;
+}
+interface DiagramLayerTooltips {
+    staticLayer?: string;
+    runtimeLayer?: string;
+    diffLayer?: string;
+}
+
+/**
+ * The full color vocabulary the cell diagram paints with.
+ *
+ * The shape mirrors a Material You-style token system. `lightColors` is the
+ * historical default and matches the original `Colors` enum byte-for-byte;
+ * `darkColors` is the dark-mode counterpart. Host applications can also
+ * override individual tokens by passing a `colors` prop to `<CellDiagram>`.
+ */
+type CellDiagramColors = {
+    PRIMARY: string;
+    ON_PRIMARY: string;
+    PRIMARY_CONTAINER: string;
+    /** Hover accent for primary-tinted clickable surfaces (e.g. project node title). */
+    PRIMARY_HOVER: string;
+    SECONDARY: string;
+    ON_SECONDARY: string;
+    SECONDARY_CONTAINER: string;
+    SURFACE_BRIGHT: string;
+    SURFACE: string;
+    SURFACE_DIM: string;
+    SURFACE_CONTAINER: string;
+    ON_SURFACE: string;
+    ON_SURFACE_VARIANT: string;
+    OUTLINE: string;
+    OUTLINE_VARIANT: string;
+    ERROR: string;
+};
+type CellDiagramThemeMode = 'light' | 'dark';
+
+interface CellDiagramProps {
+    organization?: Organization;
+    project?: Project;
+    componentMenu?: MoreVertMenuItem[];
+    showControls?: boolean;
+    animation?: boolean;
+    defaultDiagramLayer?: DiagramLayer;
+    customTooltips?: CustomTooltips;
+    modelVersion?: string;
+    previewMode?: boolean;
+    onComponentDoubleClick?: (componentId: string) => void;
+    /**
+     * Color scheme to render the diagram in. Defaults to `'light'` so
+     * existing callers see no visual change.
+     */
+    mode?: CellDiagramThemeMode;
+    /**
+     * Optional per-token overrides merged on top of the `mode` preset. Use
+     * this to snap the diagram to a host application's brand palette.
+     */
+    colors?: Partial<CellDiagramColors>;
+}
+declare function CellDiagram(props: CellDiagramProps): react_jsx_runtime.JSX.Element;
+
+declare function renderDiagram(projectModel: string, target: HTMLDivElement): void;
+
+export { CellDiagram, ComponentType, ConnectionType, DiagramLayer, renderDiagram };
+export type { CommonModel, Component, ComponentMetadata, Connection, ConnectionMetadata, ConnectorMetadata, CustomTooltips, DeploymentMetadata, DiagramLayerTooltips, ExternalConsumerLinkSelectEvent, Gateways, Links, MoreVertMenuItem, Nodes, ObservationSummary, Observations, OrgConnection, OrgDiagramData, Organization, Project, ProjectDiagramData, ProjectGateway, Service, Services };

package/dist/index.esm.js

@@ -0,0 +1,4 @@
+export { CellDiagram } from './Diagram.esm.js';
+export { ComponentType, ConnectionType, DiagramLayer } from './types.esm.js';
+export { renderDiagram } from './renderDiagram.esm.js';
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/renderDiagram.esm.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { render } from 'react-dom';
+import { CellDiagram } from './Diagram.esm.js';
+
+function renderDiagram(projectModel, target) {
+  const project = JSON.parse(JSON.stringify(projectModel));
+  render(/* @__PURE__ */ jsx(CellDiagram, { project }), target);
+}
+
+export { renderDiagram };
+//# sourceMappingURL=renderDiagram.esm.js.map

package/dist/renderDiagram.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderDiagram.esm.js","sources":["../src/renderDiagram.tsx"],"sourcesContent":["import { render } from 'react-dom';\nimport { CellDiagram } from './Diagram';\nimport { Project } from './types';\n\nexport function renderDiagram(projectModel: string, target: HTMLDivElement) {\n  const project: Project = JSON.parse(JSON.stringify(projectModel));\n  render(<CellDiagram project={project} />, target);\n}\n"],"names":[],"mappings":";;;;AAIO,SAAS,aAAA,CAAc,cAAsB,MAAA,EAAwB;AAC1E,EAAA,MAAM,UAAmB,IAAA,CAAK,KAAA,CAAM,IAAA,CAAK,SAAA,CAAU,YAAY,CAAC,CAAA;AAChE,EAAA,MAAA,iBAAO,GAAA,CAAC,WAAA,EAAA,EAAY,OAAA,EAAkB,CAAA,EAAI,MAAM,CAAA;AAClD;;;;"}

package/dist/resources/Dagre/DagreEngine.esm.js

@@ -0,0 +1,178 @@
+import { PointModel } from '@projectstorm/react-diagrams-core';
+import * as dagre from 'dagre';
+import * as _ from 'lodash';
+import { Point } from '@projectstorm/geometry';
+import { EMPTY_NODE, MAIN_CELL, COMPONENT_NODE, COMPONENT_CIRCLE_WIDTH, DIAGRAM_END, BORDER_GAP } from '../constants.esm.js';
+
+class DagreEngine {
+  options;
+  constructor(options = {}) {
+    this.options = options;
+  }
+  redistribute(model) {
+    const g = new dagre.graphlib.Graph({
+      multigraph: true,
+      compound: true
+    });
+    g.setGraph(this.options.graph || {});
+    g.setDefaultEdgeLabel(() => {
+      return {};
+    });
+    const ug = new dagre.graphlib.Graph({
+      multigraph: true,
+      compound: true
+    });
+    ug.setGraph(this.options.graph || {});
+    _.forEach(model.getNodes(), (node) => {
+      const ports = {
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0
+      };
+      _.forEach(node.getPorts(), (port) => {
+        if (port.getOptions().alignment === "top") {
+          ports.top = _.size(port.getLinks());
+        } else if (port.getOptions().alignment === "bottom") {
+          ports.bottom = _.size(port.getLinks());
+        } else if (port.getOptions().alignment === "left") {
+          ports.left = _.size(port.getLinks());
+        } else if (port.getOptions().alignment === "right") {
+          ports.right = _.size(port.getLinks());
+        }
+      });
+      if (node.getType() === EMPTY_NODE) {
+        g.setNode(node.getID(), {
+          label: node.getID(),
+          width: node.width,
+          height: node.height,
+          x: node.getX(),
+          y: node.getY(),
+          fixed: true
+        });
+      } else if (this.isLinkedNode(ports)) {
+        g.setNode(node.getID(), {
+          label: node.getID(),
+          width: node.width,
+          height: node.height,
+          ports,
+          node
+        });
+      } else {
+        ug.setNode(node.getID(), {
+          label: node.getID(),
+          width: node.width,
+          height: node.height,
+          node
+        });
+      }
+    });
+    const mainCell = g.node(MAIN_CELL);
+    if (mainCell) {
+      _.forEach(model.getNodes(), (node) => {
+        if (node.getType() === COMPONENT_NODE) {
+          g.setParent(node.getID(), MAIN_CELL);
+        }
+      });
+    }
+    _.forEach(model.getLinks(), (link) => {
+      if (link.getSourcePort() && link.getTargetPort()) {
+        g.setEdge({
+          v: link.getSourcePort().getNode().getID(),
+          w: link.getTargetPort().getNode().getID(),
+          name: link.getID()
+        });
+      }
+    });
+    const space = BORDER_GAP * 2;
+    dagre.layout(g);
+    this.angleLayout(g, space);
+    const { x, y } = this.getRightTopConnerOfGraph(g);
+    this.arrangeInGridLayout(ug.nodes(), ug, space, x, y);
+    ug.nodes().forEach((v) => {
+      g.setNode(v, ug.node(v));
+    });
+    g.nodes().forEach((v) => {
+      const node = g.node(v);
+      if (model.getNode(v).getType() !== EMPTY_NODE) {
+        model.getNode(v).setPosition(node.x - node.width / 2, node.y - node.height / 2);
+      }
+    });
+    if (this.options.includeLinks) {
+      g.edges().forEach((e) => {
+        const edge = g.edge(e);
+        const link = model.getLink(e.name);
+        const points = [link.getFirstPoint()];
+        for (let i = 1; i < edge.points.length - 1; i++) {
+          points.push(
+            new PointModel({
+              link,
+              position: new Point(edge.points[i].x, edge.points[i].y)
+            })
+          );
+        }
+        link.setPoints(points.concat(link.getLastPoint()));
+      });
+    }
+  }
+  gridLayout(g, spacing) {
+    const nodes = g.nodes();
+    this.arrangeInGridLayout(nodes, g, spacing);
+  }
+  // nodes are all layout in vertical line. this method will add horizontal spacing between nodes to align nodes in angle line
+  angleLayout(g, spacing) {
+    const nodes = g.nodes();
+    let lastX = 0;
+    nodes.forEach((v) => {
+      const node = g.node(v);
+      if (node.ports && node.ports.top > 0 && node.ports.bottom === 0 && node.ports.left >= 0 && node.ports.right === 0) {
+        if (lastX === 0) {
+          lastX = node.x;
+        } else {
+          lastX += node.width + spacing;
+          node.x = lastX;
+        }
+      }
+    });
+  }
+  isLinkedNode(ports) {
+    return ports.top > 0 || ports.bottom > 0 || ports.left > 0 || ports.right > 0;
+  }
+  arrangeInGridLayout(nodes, g, spacing, startX = 0, startY = 0) {
+    const gridSize = Math.ceil(Math.sqrt(nodes.length));
+    const minWidth = COMPONENT_CIRCLE_WIDTH + BORDER_GAP;
+    let x = 0;
+    let y = 0;
+    nodes.forEach((v) => {
+      const node = g.node(v);
+      const space = minWidth + spacing;
+      node.x = startX + x * space + (space - minWidth) / 2;
+      node.y = startY + y * space;
+      x++;
+      if (x >= gridSize) {
+        x = 0;
+        y++;
+      }
+    });
+  }
+  getRightTopConnerOfGraph(g) {
+    let maxX = 0;
+    let minY = DIAGRAM_END;
+    g.nodes().forEach((v) => {
+      const node = g.node(v);
+      if (node.x > maxX) {
+        maxX = node.x;
+      }
+      if (node.y < minY) {
+        minY = node.y;
+      }
+    });
+    if (maxX !== 0) {
+      maxX += COMPONENT_CIRCLE_WIDTH * 2;
+    }
+    return { x: maxX, y: minY };
+  }
+}
+
+export { DagreEngine };
+//# sourceMappingURL=DagreEngine.esm.js.map

package/dist/resources/Dagre/DagreEngine.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DagreEngine.esm.js","sources":["../../../src/resources/Dagre/DagreEngine.ts"],"sourcesContent":["import { DiagramModel, PointModel } from '@projectstorm/react-diagrams-core';\nimport * as dagre from 'dagre';\nimport * as _ from 'lodash';\nimport { GraphLabel } from 'dagre';\nimport { Point } from '@projectstorm/geometry';\nimport {\n  BORDER_GAP,\n  COMPONENT_CIRCLE_WIDTH,\n  COMPONENT_NODE,\n  DIAGRAM_END,\n  EMPTY_NODE,\n  MAIN_CELL,\n} from '../constants';\n\nexport interface DagreEngineOptions {\n  graph?: GraphLabel;\n  /**\n   * Will also layout links\n   */\n  includeLinks?: boolean;\n}\n\nexport class DagreEngine {\n  options: DagreEngineOptions;\n\n  constructor(options: DagreEngineOptions = {}) {\n    this.options = options;\n  }\n\n  redistribute(model: DiagramModel) {\n    // Create a new directed graph\n    const g = new dagre.graphlib.Graph({\n      multigraph: true,\n      compound: true,\n    });\n    g.setGraph(this.options.graph || {});\n    g.setDefaultEdgeLabel(() => {\n      return {};\n    });\n    // Create a new unlinked node paths\n    const ug = new dagre.graphlib.Graph({\n      multigraph: true,\n      compound: true,\n    });\n    ug.setGraph(this.options.graph || {});\n\n    // set nodes\n    _.forEach(model.getNodes(), node => {\n      const ports = {\n        top: 0,\n        bottom: 0,\n        left: 0,\n        right: 0,\n      };\n      // Count the number of links on each side of the node\n      _.forEach(node.getPorts(), port => {\n        if (port.getOptions().alignment === 'top') {\n          ports.top = _.size(port.getLinks());\n        } else if (port.getOptions().alignment === 'bottom') {\n          ports.bottom = _.size(port.getLinks());\n        } else if (port.getOptions().alignment === 'left') {\n          ports.left = _.size(port.getLinks());\n        } else if (port.getOptions().alignment === 'right') {\n          ports.right = _.size(port.getLinks());\n        }\n      });\n\n      // Check if the node is of type EMPTY_NODE\n      if (node.getType() === EMPTY_NODE) {\n        // If it's an EMPTY_NODE, set its position as fixed\n        g.setNode(node.getID(), {\n          label: node.getID(),\n          width: node.width,\n          height: node.height,\n          x: node.getX(),\n          y: node.getY(),\n          fixed: true,\n        });\n      } else if (this.isLinkedNode(ports)) {\n        // For other nodes, set the default position\n        g.setNode(node.getID(), {\n          label: node.getID(),\n          width: node.width,\n          height: node.height,\n          ports,\n          node,\n        });\n      } else {\n        // For nodes without any links, set their position in the unlinked graph\n        ug.setNode(node.getID(), {\n          label: node.getID(),\n          width: node.width,\n          height: node.height,\n          node,\n        });\n      }\n    });\n\n    // set node parents\n    const mainCell = g.node(MAIN_CELL);\n    if (mainCell) {\n      _.forEach(model.getNodes(), node => {\n        if (node.getType() === COMPONENT_NODE) {\n          g.setParent(node.getID(), MAIN_CELL);\n        }\n      });\n    }\n\n    _.forEach(model.getLinks(), link => {\n      // set edges\n      if (link.getSourcePort() && link.getTargetPort()) {\n        g.setEdge({\n          v: link.getSourcePort().getNode().getID(),\n          w: link.getTargetPort().getNode().getID(),\n          name: link.getID(),\n        });\n      }\n    });\n\n    const space = BORDER_GAP * 2;\n    dagre.layout(g);\n    this.angleLayout(g, space);\n    // get layout edge\n    const { x, y } = this.getRightTopConnerOfGraph(g);\n    this.arrangeInGridLayout(ug.nodes(), ug, space, x, y);\n    // merge two graphs\n    ug.nodes().forEach(v => {\n      g.setNode(v, ug.node(v));\n    });\n\n    g.nodes().forEach(v => {\n      const node = g.node(v);\n      // Only update positions for non-EMPTY_NODE type nodes\n      if (model.getNode(v).getType() !== EMPTY_NODE) {\n        model\n          .getNode(v)\n          .setPosition(node.x - node.width / 2, node.y - node.height / 2);\n      }\n    });\n\n    // also include links?\n    if (this.options.includeLinks) {\n      g.edges().forEach(e => {\n        const edge = g.edge(e);\n        const link = model.getLink(e.name as string);\n\n        const points = [link.getFirstPoint()];\n        for (let i = 1; i < edge.points.length - 1; i++) {\n          points.push(\n            new PointModel({\n              link: link,\n              position: new Point(edge.points[i].x, edge.points[i].y),\n            }),\n          );\n        }\n        link.setPoints(points.concat(link.getLastPoint()));\n      });\n    }\n  }\n\n  gridLayout(g: dagre.graphlib.Graph, spacing: number) {\n    const nodes = g.nodes();\n    this.arrangeInGridLayout(nodes, g, spacing);\n  }\n\n  // nodes are all layout in vertical line. this method will add horizontal spacing between nodes to align nodes in angle line\n  angleLayout(g: dagre.graphlib.Graph, spacing: number) {\n    const nodes = g.nodes();\n    let lastX = 0;\n\n    nodes.forEach((v: string) => {\n      const node = g.node(v) as dagre.Node & {\n        ports?: { top: number; bottom: number; left: number; right: number };\n      };\n      // node only has top connection will be arranged\n      if (\n        node.ports &&\n        node.ports.top > 0 &&\n        node.ports.bottom === 0 &&\n        node.ports.left >= 0 &&\n        node.ports.right === 0\n      ) {\n        if (lastX === 0) {\n          lastX = node.x;\n        } else {\n          lastX += node.width + spacing;\n          node.x = lastX;\n        }\n      }\n    });\n  }\n\n  isLinkedNode(ports: {\n    top: number;\n    bottom: number;\n    left: number;\n    right: number;\n  }) {\n    return (\n      ports.top > 0 || ports.bottom > 0 || ports.left > 0 || ports.right > 0\n    );\n  }\n\n  arrangeInGridLayout(\n    nodes: string[],\n    g: dagre.graphlib.Graph,\n    spacing: number,\n    startX = 0,\n    startY = 0,\n  ) {\n    const gridSize = Math.ceil(Math.sqrt(nodes.length));\n    const minWidth = COMPONENT_CIRCLE_WIDTH + BORDER_GAP;\n    let x = 0;\n    let y = 0;\n\n    nodes.forEach(v => {\n      const node = g.node(v);\n      const space = minWidth + spacing;\n      node.x = startX + x * space + (space - minWidth) / 2;\n      node.y = startY + y * space;\n      x++;\n      if (x >= gridSize) {\n        x = 0;\n        y++;\n      }\n    });\n  }\n\n  getRightTopConnerOfGraph(g: dagre.graphlib.Graph) {\n    let maxX = 0;\n    let minY = DIAGRAM_END;\n    g.nodes().forEach((v: string) => {\n      const node = g.node(v);\n      if (node.x > maxX) {\n        maxX = node.x;\n      }\n      if (node.y < minY) {\n        minY = node.y;\n      }\n    });\n    if (maxX !== 0) {\n      maxX += COMPONENT_CIRCLE_WIDTH * 2;\n    }\n    return { x: maxX, y: minY };\n  }\n}\n"],"names":[],"mappings":"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"}