@pega/cosmos-react-build 9.0.0-build.9.8 → 9.0.0

package/lib/components/FlowModeller/Renderer/Renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Renderer.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Renderer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport type { KeyboardEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex, defaultThemeProp } from '@pega/cosmos-react-core';\n\nimport FlowModellerContext from '../FlowModellerContext';\n\nimport type { RendererProps } from './Renderer.types';\nimport GraphLayout from './Utils/GraphLayout';\nimport type { PlottedGraphConnector, PlottedGraphNode } from './Utils/GraphLayout';\nimport { DirectedGraph } from './Utils/Graph';\nimport GraphTraversal from './Utils/GraphTraversal';\nimport {\n  getParentConvergence,\n  groupByPosition,\n  arrowUpKey,\n  arrowDownKey,\n  horizontalNavigation\n} from './Utils/RendererUtils';\n\nconst StyledWrapper = styled.div`\n  position: relative;\n  width: 100%;\n  height: 100%;\n`;\n\nconst StyledContentWrapper = styled.div(({ theme }) => {\n  return css`\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    background-color: ${theme.base.palette['app-background']};\n    > svg {\n      background-color: ${theme.base.palette['app-background']};\n    }\n  `;\n});\n\nStyledContentWrapper.defaultProps = defaultThemeProp;\n\nconst StyledNodeWrapper = styled(StyledContentWrapper)(() => {\n  return css`\n    width: var(--width);\n    height: var(--height);\n    transform: translate(var(--xPos), var(--yPos));\n  `;\n});\n\nconst StyledRootNodeWrapper = styled.foreignObject`\n  overflow: visible;\n`;\n\nconst Renderer = ({\n  graphData,\n  connector: Connector,\n  node: Node,\n  selectedNodeId\n}: RendererProps) => {\n  // apply the plotted positions\n  const { readOnly } = useContext(FlowModellerContext);\n  const graph: DirectedGraph<PlottedGraphNode, PlottedGraphConnector> = new DirectedGraph(\n    graphData\n  );\n\n  const rootNode = useMemo(() => {\n    const rootNodeId = GraphTraversal.findRootNode(graph);\n    return rootNodeId ? graph.getNode(rootNodeId) : undefined;\n  }, [graph]);\n\n  const graphDimensions = GraphLayout.plot<RendererProps['graphData']>(graphData, readOnly);\n  const positions = useMemo(() => groupByPosition(graph), [graph]);\n\n  const [activeGraphItemId, setActiveGraphItemId] = useState<string>();\n  const rendererRef = useRef<HTMLDivElement>(null);\n  const prevItem = useRef<string>();\n  const prevSelectedNodeId = useRef<string>();\n\n  const activeGraphItem: PlottedGraphNode | PlottedGraphConnector | undefined = useMemo(\n    () =>\n      [...graph.getNodes(), ...graph.getConnectors()].find(data => {\n        return data.id === activeGraphItemId;\n      }),\n    [activeGraphItemId, graph]\n  );\n\n  useEffect(() => {\n    // Set PREVIOUS Connector - If current focused item is a node, we are saving the previous connector id.\n    let inConnectors = activeGraphItem ? graph.getInConnectors(activeGraphItem.id) : [];\n    if (\n      activeGraphItem &&\n      'dimensions' in activeGraphItem &&\n      activeGraphItem.dimensions?.height &&\n      inConnectors.length\n    ) {\n      const prevNode = graph.getNode(inConnectors[0].fromNodeId);\n      inConnectors = !prevNode.dimensions.height\n        ? graph.getInConnectors(prevNode.id)\n        : inConnectors;\n      const parentConvergence = getParentConvergence(prevNode, graph);\n      if (inConnectors.length) {\n        prevItem.current =\n          !prevNode.dimensions.height && inConnectors.length > 1 && parentConvergence\n            ? parentConvergence.parent.id\n            : inConnectors[0].id;\n      }\n    }\n\n    /** DELETE NODE - If no item is found and prevItem has a value then we assume that a node has been deleted\n     * set activeGraphItemId to prevItem and reset it\n     */\n    if (!activeGraphItem && prevItem.current && !selectedNodeId) {\n      const convergence = GraphTraversal.getConvergenceData(graphData, prevItem.current);\n\n      setActiveGraphItemId(\n        convergence ? graph.getOutConnectors(convergence.nodeId)[0].id : prevItem.current\n      );\n\n      prevItem.current = undefined;\n    }\n  }, [activeGraphItemId, graph]);\n\n  const elementScrollIntoView = (focusElementId: string) => {\n    const isConnector = graphData?.connectors?.find(item => item.id === focusElementId);\n    const elementRef = isConnector\n      ? rendererRef.current?.querySelector(`[id='${focusElementId}']`)?.nextElementSibling\n      : rendererRef.current?.querySelector(`[id='modeller-node-${focusElementId}']`);\n\n    if (elementRef) {\n      setTimeout(() => {\n        elementRef.scrollIntoView({\n          block: 'center',\n          behavior: 'smooth'\n        });\n      });\n    }\n  };\n\n  const onKeyDown = (e: KeyboardEvent<HTMLButtonElement | HTMLDivElement | SVGGElement>) => {\n    if (\n      activeGraphItemId &&\n      activeGraphItem &&\n      ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key) &&\n      !selectedNodeId\n    ) {\n      let focusElementId: string | undefined | false;\n      switch (e.key) {\n        case 'ArrowUp':\n          focusElementId = arrowUpKey({\n            activeGraphItemId,\n            graph,\n            activeGraphItem,\n            readOnly: readOnly ?? false\n          });\n          break;\n        case 'ArrowDown':\n          focusElementId = arrowDownKey({\n            activeGraphItemId,\n            graph,\n            activeGraphItem,\n            readOnly: readOnly ?? false\n          });\n          break;\n        case 'ArrowLeft':\n          focusElementId = horizontalNavigation({\n            keyEvent: 'ArrowLeft',\n            positions,\n            activeGraphItem,\n            graph,\n            readOnly\n          });\n          break;\n        case 'ArrowRight':\n          focusElementId = horizontalNavigation({\n            keyEvent: 'ArrowRight',\n            positions,\n            activeGraphItem,\n            graph,\n            readOnly\n          });\n          break;\n        default:\n          break;\n      }\n\n      if (focusElementId) {\n        setActiveGraphItemId(focusElementId);\n        elementScrollIntoView(focusElementId);\n      }\n    }\n  };\n\n  /** Saving the last selectedNodeId in a variable\n   * so on close of workbench the focus can return to the node\n   * might be removed in future when workbench handles re-focusing the target element on close\n   */\n  useEffect(() => {\n    if (selectedNodeId) {\n      prevSelectedNodeId.current = selectedNodeId;\n    } else if (!selectedNodeId && prevSelectedNodeId.current) {\n      setActiveGraphItemId(prevSelectedNodeId.current);\n      prevSelectedNodeId.current = undefined;\n    }\n  }, [selectedNodeId]);\n\n  const getNodeLabel = (target: string | undefined): string | undefined => {\n    if (target) {\n      const targetNode = graphData.nodes.find(nodeItem => nodeItem.id === target);\n      return targetNode && 'label' in targetNode ? String(targetNode.label) : undefined;\n    }\n    return target;\n  };\n\n  return (\n    <StyledWrapper ref={rendererRef}>\n      <StyledContentWrapper>\n        <svg\n          width={graphDimensions.width}\n          height={graphDimensions.height}\n          viewBox={`0 0 ${graphDimensions.width} ${graphDimensions.height}`}\n        >\n          {rootNode && (\n            <StyledRootNodeWrapper\n              width={rootNode.dimensions.width}\n              height={rootNode.dimensions.height}\n              x={rootNode.position.x}\n              y={rootNode.position.y}\n            >\n              <Node\n                {...rootNode}\n                active={rootNode.id === activeGraphItemId}\n                onFocus={() => {\n                  setActiveGraphItemId(rootNode.id);\n                }}\n                onKeyDown={onKeyDown}\n              />\n            </StyledRootNodeWrapper>\n          )}\n          {graphData.connectors.map(item => {\n            const fromNodeLabel = getNodeLabel(item.fromNodeId);\n            const toNodeLabel = getNodeLabel(item.toNodeId);\n            return (\n              <Connector\n                {...item}\n                fromNodeLabel={fromNodeLabel}\n                toNodeLabel={toNodeLabel}\n                key={item.id}\n                active={item.id === activeGraphItemId}\n                onFocus={() => {\n                  setActiveGraphItemId(item.id);\n                }}\n                onKeyDown={onKeyDown}\n              />\n            );\n          })}\n        </svg>\n      </StyledContentWrapper>\n      <StyledContentWrapper>\n        {graphData.nodes\n          .filter(node => node.id !== rootNode?.id)\n          .map(item => {\n            let referencedNode;\n            if (item.type?.minConnectors === 0 && item.reference) {\n              referencedNode = graph.getNode(item.reference);\n            }\n            const prevNodeId = graphData.connectors.find(\n              connector => connector.toNodeId === item.id\n            )?.fromNodeId;\n            const fromNodeLabel = getNodeLabel(prevNodeId);\n\n            const nextNodeId = graphData.connectors.find(\n              connector => connector.fromNodeId === item.id\n            )?.toNodeId;\n            const toNodeLabel = getNodeLabel(nextNodeId);\n\n            return (\n              <Flex\n                key={item.id}\n                as={StyledNodeWrapper}\n                id={item.id}\n                style={{\n                  '--width': `${item.dimensions.width}px`,\n                  '--height': `${item.dimensions.height}px`,\n                  '--xPos': `${item.position.x}px`,\n                  '--yPos': `${item.position.y}px`\n                }}\n                container={{ justify: 'center' }}\n              >\n                <Node\n                  {...item}\n                  fromNodeLabel={fromNodeLabel}\n                  toNodeLabel={toNodeLabel}\n                  referencedNode={referencedNode}\n                  active={item.id === activeGraphItemId}\n                  onFocus={() => {\n                    setActiveGraphItemId(item.id);\n                  }}\n                  onKeyDown={onKeyDown}\n                />\n              </Flex>\n            );\n          })}\n      </StyledContentWrapper>\n    </StyledWrapper>\n  );\n};\n\nexport default Renderer;\n"]}

package/lib/components/FlowModeller/Renderer/Renderer.types.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentType } from 'react';
+import type { NodeEvents, NodeLabels } from '../Node/Node.types';
+import type { ConnectorProps, Node, GraphData } from './Utils/Graph';
+import type { PlottedGraphConnector, PlottedGraphNode } from './Utils/GraphLayout';
+export interface AddNodeHandlerParams {
+    refType: 'node' | 'connector';
+    refId: string | string[];
+}
+export interface RendererProps {
+    graphData: GraphData<PlottedGraphNode, PlottedGraphConnector>;
+    disableAutoLayout?: boolean;
+    highlights?: {
+        nodes: Record<string, Node>;
+        connectors: Record<string, ConnectorProps>;
+    };
+    connector: ComponentType<PlottedGraphConnector & NodeEvents & NodeLabels>;
+    node: ComponentType<PlottedGraphNode & NodeEvents & NodeLabels>;
+    selectedNodeId?: string;
+}
+//# sourceMappingURL=Renderer.types.d.ts.map

package/lib/components/FlowModeller/Renderer/Renderer.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Renderer.types.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Renderer.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEjE,OAAO,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACrE,OAAO,KAAK,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEnF,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,MAAM,GAAG,WAAW,CAAC;IAC9B,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CAC1B;AAED,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,SAAS,CAAC,gBAAgB,EAAE,qBAAqB,CAAC,CAAC;IAC9D,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,UAAU,CAAC,EAAE;QACX,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;QAC5B,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;KAC5C,CAAC;IACF,SAAS,EAAE,aAAa,CAAC,qBAAqB,GAAG,UAAU,GAAG,UAAU,CAAC,CAAC;IAC1E,IAAI,EAAE,aAAa,CAAC,gBAAgB,GAAG,UAAU,GAAG,UAAU,CAAC,CAAC;IAChE,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB"}

package/lib/components/FlowModeller/Renderer/Renderer.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Renderer.types.js.map

package/lib/components/FlowModeller/Renderer/Renderer.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Renderer.types.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Renderer.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentType } from 'react';\n\nimport type { NodeEvents, NodeLabels } from '../Node/Node.types';\n\nimport type { ConnectorProps, Node, GraphData } from './Utils/Graph';\nimport type { PlottedGraphConnector, PlottedGraphNode } from './Utils/GraphLayout';\n\nexport interface AddNodeHandlerParams {\n  refType: 'node' | 'connector';\n  refId: string | string[];\n}\n\nexport interface RendererProps {\n  graphData: GraphData<PlottedGraphNode, PlottedGraphConnector>;\n  disableAutoLayout?: boolean;\n  highlights?: {\n    nodes: Record<string, Node>;\n    connectors: Record<string, ConnectorProps>;\n  };\n  connector: ComponentType<PlottedGraphConnector & NodeEvents & NodeLabels>;\n  node: ComponentType<PlottedGraphNode & NodeEvents & NodeLabels>;\n  selectedNodeId?: string;\n}\n"]}

package/lib/components/FlowModeller/Renderer/Utils/Graph.d.ts

@@ -0,0 +1,63 @@
+import type { PlottedGraphConnector, PlottedGraphNode } from './GraphLayout';
+export interface ConnectorProps<T = unknown> {
+    id: string;
+    fromNodeId: string;
+    toNodeId: string;
+    label?: string;
+    data?: T;
+}
+export interface NodeType {
+    minConnectors: number;
+}
+export interface Node<T = unknown> {
+    type?: NodeType;
+    id: string;
+    label?: string;
+    data?: T;
+    reference?: string;
+}
+export interface GraphData<T extends Node = Node, U extends ConnectorProps = ConnectorProps> {
+    nodes: T[];
+    connectors: U[];
+}
+export declare const sortConnectors: (connectors: PlottedGraphConnector[]) => void;
+export declare const isPlottedGraphConnector: (connectors: (ConnectorProps | PlottedGraphConnector)[]) => connectors is PlottedGraphConnector[];
+export declare class DirectedGraph<T extends Node | PlottedGraphNode = Node, U extends ConnectorProps | PlottedGraphConnector = ConnectorProps, D1 = unknown, D2 = unknown> {
+    private nodes;
+    private connectors;
+    private nodeData;
+    private connectorData;
+    private inConnectors;
+    private prevNodesCount;
+    private outConnectors;
+    private nextNodesCount;
+    private nodeCount;
+    private connectorsCount;
+    constructor(graphData?: GraphData<T, U>);
+    getGraphData(): GraphData<T, U>;
+    getNodeCount(): number;
+    getNodes(): T[];
+    addNode(node: T, data?: D1): DirectedGraph;
+    getNode(nodeId: string): T;
+    hasNode(nodeId: string): boolean;
+    deleteNode(nodeId: string, ignoreConnectors?: boolean): DirectedGraph<T, U>;
+    getPrevNodes(nodeId: string): T[];
+    getNextNodes(nodeId: string): T[];
+    getPrevNodesCount(nodeId: string): number;
+    getNextNodesCount(nodeId: string): number;
+    isLeaf(nodeId: string): boolean;
+    getConnectorsCount(): number;
+    getConnectors(): U[];
+    addConnector(connector: U, data?: D2): DirectedGraph<T, U>;
+    hasConnector(id: string): boolean;
+    getConnector(id: string): U;
+    removeConnector(id: string): DirectedGraph<T, U>;
+    setConnector(id: string, data: {
+        fromNodeId?: string;
+        toNodeId?: string;
+    }): DirectedGraph<T, U>;
+    getInConnectors(toNodeId: string, fromNodeId?: string): U[];
+    getOutConnectors(fromNodeId: string, toNodeId?: string): U[];
+    getAllNodeConnectors(nodeId: string): U[];
+}
+//# sourceMappingURL=Graph.d.ts.map

package/lib/components/FlowModeller/Renderer/Utils/Graph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Graph.d.ts","sourceRoot":"","sources":["../../../../../src/components/FlowModeller/Renderer/Utils/Graph.ts"],"names":[],"mappings":"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"}

package/lib/components/FlowModeller/Renderer/Utils/Graph.js

@@ -0,0 +1,291 @@
+// sort given connectors based on first point x-cord in ascending order
+export const sortConnectors = (connectors) => {
+    if (connectors.length > 1) {
+        connectors.sort((a, b) => a.points.length && b.points.length ? a.points[0].x - b.points[0].x : 0);
+    }
+};
+// Type guard to check if connector is of type PlottedGraphConnector
+export const isPlottedGraphConnector = (connectors) => connectors.length > 0 && 'points' in connectors[0];
+export class DirectedGraph {
+    nodes = {};
+    connectors = {};
+    // additional way to maintain related data - for cases where Graph is used for indirect purposes
+    nodeData = {};
+    connectorData = {};
+    inConnectors = new Map(); // we are maintaining connector reference instead of id, to avoid iterations later on.
+    prevNodesCount = {};
+    outConnectors = new Map(); // we are maintaining connector reference instead of id, to avoid iterations later on
+    nextNodesCount = {};
+    nodeCount = 0;
+    connectorsCount = 0;
+    constructor(graphData = { nodes: [], connectors: [] }) {
+        // Not necessary to clone, as this class never modifies any nodes
+        graphData.nodes.forEach(item => this.addNode(item));
+        // copy/clone, connectors properties 'fromNodeId' and 'toNodeId' values may get modified by this class
+        graphData.connectors.forEach(item => {
+            const { data } = item;
+            const newItem = JSON.parse(JSON.stringify(item));
+            // below statement is necessary to retain the actual references of any function/instances if any
+            newItem.data = data;
+            this.addConnector(newItem);
+        });
+    }
+    getGraphData() {
+        return {
+            nodes: this.getNodes(),
+            connectors: this.getConnectors()
+        };
+    }
+    getNodeCount() {
+        return this.nodeCount;
+    }
+    getNodes() {
+        return Object.values(this.nodes);
+    }
+    addNode(node, data) {
+        if (this.nodes[node.id] !== undefined) {
+            this.nodes[node.id] = node;
+            this.nodeData[node.id] = data;
+        }
+        else {
+            this.nodes[node.id] = node;
+            this.nodeData[node.id] = data;
+            this.inConnectors.set(node.id, new Map());
+            this.prevNodesCount[node.id] = {};
+            this.outConnectors.set(node.id, new Map());
+            this.nextNodesCount[node.id] = {};
+            this.nodeCount += 1;
+        }
+        return this;
+    }
+    getNode(nodeId) {
+        return this.nodes[nodeId];
+    }
+    hasNode(nodeId) {
+        return this.nodes[nodeId] !== undefined;
+    }
+    deleteNode(nodeId, ignoreConnectors = false) {
+        if (this.hasNode(nodeId)) {
+            delete this.nodes[nodeId];
+            delete this.nodeData[nodeId];
+            if (ignoreConnectors !== true) {
+                const removeConnector = (id) => this.removeConnector(id);
+                // IMP NOTE its the responsibility of the callee to make sure that the connectors are cleanly reassigned, or else all attached connectors will be deleted
+                const inConnectors = this.inConnectors.get(nodeId);
+                if (inConnectors) {
+                    Array.from(inConnectors.keys()).forEach(removeConnector);
+                }
+                this.inConnectors.delete(nodeId);
+                delete this.prevNodesCount[nodeId];
+                const outConnectors = this.outConnectors.get(nodeId);
+                if (outConnectors) {
+                    Array.from(outConnectors.keys()).forEach(removeConnector);
+                }
+                this.outConnectors.delete(nodeId);
+                delete this.nextNodesCount[nodeId];
+            }
+            this.nodeCount -= 1;
+        }
+        return this;
+    }
+    getPrevNodes(nodeId) {
+        return this.prevNodesCount[nodeId]
+            ? Object.keys(this.prevNodesCount[nodeId]).map(id => this.getNode(id))
+            : [];
+    }
+    getNextNodes(nodeId) {
+        return this.nextNodesCount[nodeId]
+            ? Object.keys(this.nextNodesCount[nodeId]).map(id => this.getNode(id))
+            : [];
+    }
+    getPrevNodesCount(nodeId) {
+        return (this.prevNodesCount[nodeId] ? Object.values(this.prevNodesCount[nodeId]) : []).reduce((prev, current) => prev + current, 0);
+    }
+    getNextNodesCount(nodeId) {
+        return (this.nextNodesCount[nodeId] ? Object.values(this.nextNodesCount[nodeId]) : []).reduce((prev, current) => prev + current, 0);
+    }
+    isLeaf(nodeId) {
+        return this.getNextNodes(nodeId).length === 0;
+    }
+    // -- Connectors
+    getConnectorsCount() {
+        return this.connectorsCount;
+    }
+    getConnectors() {
+        return Object.values(this.connectors);
+    }
+    addConnector(connector, data) {
+        if (this.connectors[connector.id] !== undefined) {
+            // update the map
+            this.connectors[connector.id] = connector;
+            this.connectorData[connector.id] = data;
+            return this;
+        }
+        const { id } = connector;
+        const { fromNodeId } = connector;
+        const { toNodeId } = connector;
+        // check if nodes with given ids exist
+        if (this.nodes[fromNodeId] === undefined || this.nodes[toNodeId] === undefined) {
+            throw new Error(`One or more nodes does not exist, cannot add connector ${fromNodeId}-${toNodeId}`);
+        }
+        // add it to the map
+        this.connectors[id] = connector;
+        this.connectorData[id] = data;
+        // update prev nodes count
+        if (this.prevNodesCount[toNodeId][fromNodeId]) {
+            this.prevNodesCount[toNodeId][fromNodeId] += 1;
+        }
+        else {
+            this.prevNodesCount[toNodeId][fromNodeId] = 1;
+        }
+        // update next nodes count
+        if (this.nextNodesCount[fromNodeId][toNodeId]) {
+            this.nextNodesCount[fromNodeId][toNodeId] += 1;
+        }
+        else {
+            this.nextNodesCount[fromNodeId][toNodeId] = 1;
+        }
+        // update in and out connectors for both the nodes
+        this.inConnectors.get(toNodeId)?.set(id, connector);
+        this.outConnectors.get(fromNodeId)?.set(id, connector);
+        // increment total connectors count
+        this.connectorsCount += 1;
+        return this;
+    }
+    hasConnector(id) {
+        return this.connectors[id] !== undefined;
+    }
+    getConnector(id) {
+        return this.connectors[id];
+    }
+    removeConnector(id) {
+        const connector = this.connectors[id];
+        if (connector !== undefined) {
+            const { fromNodeId } = connector;
+            const { toNodeId } = connector;
+            delete this.connectors[id];
+            delete this.connectorData[id];
+            // update prev nodes count
+            this.prevNodesCount[toNodeId][fromNodeId] -= 1;
+            if (this.prevNodesCount[toNodeId][fromNodeId] === 0) {
+                delete this.prevNodesCount[toNodeId][fromNodeId];
+            }
+            // update next nodes count
+            this.nextNodesCount[fromNodeId][toNodeId] -= 1;
+            if (this.nextNodesCount[fromNodeId][toNodeId] === 0) {
+                delete this.nextNodesCount[fromNodeId][toNodeId];
+            }
+            this.inConnectors.get(toNodeId)?.delete(id);
+            this.outConnectors.get(fromNodeId)?.delete(id);
+            this.connectorsCount -= 1;
+        }
+        return this;
+    }
+    setConnector(id, data) {
+        // VALIDATE
+        // -connector with given id exists
+        // -node with given fromNodeId exists
+        // -node with given toNodeId exists
+        if (!this.getConnector(id)) {
+            throw new Error(`Connector with id '${id}' does not exist.`);
+        }
+        if (data.fromNodeId && !this.getNode(data.fromNodeId)) {
+            throw new Error(`Node with id '${data.fromNodeId}' does not exist, to update fromNodeId.`);
+        }
+        if (data.toNodeId && !this.getNode(data.toNodeId)) {
+            throw new Error(`Node with id '${data.toNodeId}' does not exist, to update toNodeId.`);
+        }
+        const connector = this.getConnector(id);
+        // current references
+        let { fromNodeId } = connector;
+        let { toNodeId } = connector;
+        // update prev nodes count - unset prev values
+        this.prevNodesCount[toNodeId][fromNodeId] -= 1;
+        if (this.prevNodesCount[toNodeId][fromNodeId] === 0) {
+            delete this.prevNodesCount[toNodeId][fromNodeId];
+        }
+        // update next nodes count - unset prev values
+        this.nextNodesCount[fromNodeId][toNodeId] -= 1;
+        if (this.nextNodesCount[fromNodeId][toNodeId] === 0) {
+            delete this.nextNodesCount[fromNodeId][toNodeId];
+        }
+        // remove prev references
+        this.inConnectors.get(toNodeId)?.delete(id);
+        this.outConnectors.get(fromNodeId)?.delete(id);
+        // new references
+        fromNodeId = data.fromNodeId ? data.fromNodeId : connector.fromNodeId;
+        toNodeId = data.toNodeId ? data.toNodeId : connector.toNodeId;
+        connector.fromNodeId = fromNodeId;
+        connector.toNodeId = toNodeId;
+        // update prev nodes count
+        if (this.prevNodesCount[toNodeId][fromNodeId]) {
+            this.prevNodesCount[toNodeId][fromNodeId] += 1;
+        }
+        else {
+            this.prevNodesCount[toNodeId][fromNodeId] = 1;
+        }
+        // update next nodes count
+        if (this.nextNodesCount[fromNodeId][toNodeId]) {
+            this.nextNodesCount[fromNodeId][toNodeId] += 1;
+        }
+        else {
+            this.nextNodesCount[fromNodeId][toNodeId] = 1;
+        }
+        // update in and out connectors for both the nodes
+        this.inConnectors.get(toNodeId)?.set(id, connector);
+        this.outConnectors.get(fromNodeId)?.set(id, connector);
+        return this;
+    }
+    getInConnectors(toNodeId, fromNodeId) {
+        const allInConnectors = this.inConnectors.get(toNodeId);
+        if (allInConnectors) {
+            const connectorValues = Array.from(allInConnectors.values());
+            /**
+             * sort the in-connectors based on first point's x-cord in ascending order
+             * to maintain relative order of connectors
+             * if connectorValues is an array of connectors of type PlottedGraphConnector
+             */
+            // connectorValues is generic type array so assertion is needed
+            if (isPlottedGraphConnector(connectorValues)) {
+                sortConnectors(connectorValues);
+            }
+            if (fromNodeId === undefined) {
+                return connectorValues;
+            }
+            return connectorValues.filter(connector => {
+                return connector.fromNodeId === fromNodeId;
+            });
+        }
+        return [];
+    }
+    getOutConnectors(fromNodeId, toNodeId) {
+        const allOutConnectors = this.outConnectors.get(fromNodeId);
+        if (allOutConnectors) {
+            const connectorValues = Array.from(allOutConnectors.values());
+            /**
+             * sort the out-connectors based on first point's x-cord in ascending order
+             * to maintain relative order of connectors
+             * if connectorValues is an array of connectors of type PlottedGraphConnector
+             */
+            // connectorValues is generic type array so assertion is needed
+            if (isPlottedGraphConnector(connectorValues)) {
+                sortConnectors(connectorValues);
+            }
+            if (toNodeId === undefined) {
+                return connectorValues;
+            }
+            return connectorValues.filter(connector => {
+                return connector.toNodeId === toNodeId;
+            });
+        }
+        return [];
+    }
+    getAllNodeConnectors(nodeId) {
+        const inConnectors = this.getInConnectors(nodeId);
+        if (inConnectors) {
+            return inConnectors.concat(this.getOutConnectors(nodeId));
+        }
+        return [];
+    }
+}
+//# sourceMappingURL=Graph.js.map

package/lib/components/FlowModeller/Renderer/Utils/Graph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Graph.js","sourceRoot":"","sources":["../../../../../src/components/FlowModeller/Renderer/Utils/Graph.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PlottedGraphConnector, PlottedGraphNode } from './GraphLayout';\n\nexport interface ConnectorProps<T = unknown> {\n  id: string;\n  fromNodeId: string;\n  toNodeId: string;\n  label?: string;\n  data?: T;\n}\nexport interface NodeType {\n  minConnectors: number;\n}\nexport interface Node<T = unknown> {\n  type?: NodeType;\n  id: string;\n  label?: string;\n  data?: T;\n  reference?: string;\n}\n\nexport interface GraphData<T extends Node = Node, U extends ConnectorProps = ConnectorProps> {\n  nodes: T[];\n  connectors: U[];\n}\n\n// sort given connectors based on first point x-cord in ascending order\nexport const sortConnectors = (connectors: PlottedGraphConnector[]) => {\n  if (connectors.length > 1) {\n    connectors.sort((a, b) =>\n      a.points.length && b.points.length ? a.points[0].x - b.points[0].x : 0\n    );\n  }\n};\n\n// Type guard to check if connector is of type PlottedGraphConnector\nexport const isPlottedGraphConnector = (\n  connectors: (ConnectorProps | PlottedGraphConnector)[]\n): connectors is PlottedGraphConnector[] => connectors.length > 0 && 'points' in connectors[0];\n\nexport class DirectedGraph<\n  T extends Node | PlottedGraphNode = Node,\n  U extends ConnectorProps | PlottedGraphConnector = ConnectorProps,\n  D1 = unknown,\n  D2 = unknown\n> {\n  private nodes: Record<string, T> = {};\n  private connectors: Record<string, U> = {};\n\n  // additional way to maintain related data - for cases where Graph is used for indirect purposes\n  private nodeData: Record<string, D1 | unknown> = {};\n  private connectorData: Record<string, D2 | unknown> = {};\n\n  private inConnectors: Map<string, Map<string, U>> = new Map(); // we are maintaining connector reference instead of id, to avoid iterations later on.\n  private prevNodesCount: Record<string, Record<string, number>> = {};\n\n  private outConnectors: Map<string, Map<string, U>> = new Map(); // we are maintaining connector reference instead of id, to avoid iterations later on\n  private nextNodesCount: Record<string, Record<string, number>> = {};\n\n  private nodeCount = 0;\n  private connectorsCount = 0;\n\n  constructor(graphData: GraphData<T, U> = { nodes: [], connectors: [] }) {\n    // Not necessary to clone, as this class never modifies any nodes\n    graphData.nodes.forEach(item => this.addNode(item));\n    // copy/clone, connectors properties 'fromNodeId' and 'toNodeId' values may get modified by this class\n    graphData.connectors.forEach(item => {\n      const { data } = item;\n      const newItem = JSON.parse(JSON.stringify(item));\n\n      // below statement is necessary to retain the actual references of any function/instances if any\n      newItem.data = data;\n\n      this.addConnector(newItem);\n    });\n  }\n\n  getGraphData(): GraphData<T, U> {\n    return {\n      nodes: this.getNodes(),\n      connectors: this.getConnectors()\n    };\n  }\n\n  getNodeCount(): number {\n    return this.nodeCount;\n  }\n\n  getNodes() {\n    return Object.values(this.nodes);\n  }\n\n  addNode(node: T, data?: D1): DirectedGraph {\n    if (this.nodes[node.id] !== undefined) {\n      this.nodes[node.id] = node;\n      this.nodeData[node.id] = data;\n    } else {\n      this.nodes[node.id] = node;\n      this.nodeData[node.id] = data;\n\n      this.inConnectors.set(node.id, new Map());\n      this.prevNodesCount[node.id] = {};\n\n      this.outConnectors.set(node.id, new Map());\n      this.nextNodesCount[node.id] = {};\n\n      this.nodeCount += 1;\n    }\n\n    return this;\n  }\n\n  getNode(nodeId: string): T {\n    return this.nodes[nodeId];\n  }\n\n  hasNode(nodeId: string): boolean {\n    return this.nodes[nodeId] !== undefined;\n  }\n\n  deleteNode(nodeId: string, ignoreConnectors = false): DirectedGraph<T, U> {\n    if (this.hasNode(nodeId)) {\n      delete this.nodes[nodeId];\n      delete this.nodeData[nodeId];\n\n      if (ignoreConnectors !== true) {\n        const removeConnector = (id: string) => this.removeConnector(id);\n\n        // IMP NOTE its the responsibility of the callee to make sure that the connectors are cleanly reassigned, or else all attached connectors will be deleted\n        const inConnectors = this.inConnectors.get(nodeId);\n        if (inConnectors) {\n          Array.from(inConnectors.keys()).forEach(removeConnector);\n        }\n        this.inConnectors.delete(nodeId);\n        delete this.prevNodesCount[nodeId];\n\n        const outConnectors = this.outConnectors.get(nodeId);\n        if (outConnectors) {\n          Array.from(outConnectors.keys()).forEach(removeConnector);\n        }\n        this.outConnectors.delete(nodeId);\n        delete this.nextNodesCount[nodeId];\n      }\n\n      this.nodeCount -= 1;\n    }\n\n    return this;\n  }\n\n  getPrevNodes(nodeId: string): T[] {\n    return this.prevNodesCount[nodeId]\n      ? Object.keys(this.prevNodesCount[nodeId]).map(id => this.getNode(id))\n      : [];\n  }\n\n  getNextNodes(nodeId: string): T[] {\n    return this.nextNodesCount[nodeId]\n      ? Object.keys(this.nextNodesCount[nodeId]).map(id => this.getNode(id))\n      : [];\n  }\n\n  getPrevNodesCount(nodeId: string): number {\n    return (this.prevNodesCount[nodeId] ? Object.values(this.prevNodesCount[nodeId]) : []).reduce(\n      (prev, current) => prev + current,\n      0\n    );\n  }\n\n  getNextNodesCount(nodeId: string): number {\n    return (this.nextNodesCount[nodeId] ? Object.values(this.nextNodesCount[nodeId]) : []).reduce(\n      (prev, current) => prev + current,\n      0\n    );\n  }\n\n  isLeaf(nodeId: string): boolean {\n    return this.getNextNodes(nodeId).length === 0;\n  }\n\n  // -- Connectors\n  getConnectorsCount(): number {\n    return this.connectorsCount;\n  }\n\n  getConnectors() {\n    return Object.values(this.connectors);\n  }\n\n  addConnector(connector: U, data?: D2): DirectedGraph<T, U> {\n    if (this.connectors[connector.id] !== undefined) {\n      // update the map\n      this.connectors[connector.id] = connector;\n      this.connectorData[connector.id] = data;\n\n      return this;\n    }\n\n    const { id } = connector;\n    const { fromNodeId } = connector;\n    const { toNodeId } = connector;\n\n    // check if nodes with given ids exist\n    if (this.nodes[fromNodeId] === undefined || this.nodes[toNodeId] === undefined) {\n      throw new Error(\n        `One or more nodes does not exist, cannot add connector ${fromNodeId}-${toNodeId}`\n      );\n    }\n\n    // add it to the map\n    this.connectors[id] = connector;\n    this.connectorData[id] = data;\n\n    // update prev nodes count\n    if (this.prevNodesCount[toNodeId][fromNodeId]) {\n      this.prevNodesCount[toNodeId][fromNodeId] += 1;\n    } else {\n      this.prevNodesCount[toNodeId][fromNodeId] = 1;\n    }\n\n    // update next nodes count\n    if (this.nextNodesCount[fromNodeId][toNodeId]) {\n      this.nextNodesCount[fromNodeId][toNodeId] += 1;\n    } else {\n      this.nextNodesCount[fromNodeId][toNodeId] = 1;\n    }\n\n    // update in and out connectors for both the nodes\n    this.inConnectors.get(toNodeId)?.set(id, connector);\n    this.outConnectors.get(fromNodeId)?.set(id, connector);\n\n    // increment total connectors count\n    this.connectorsCount += 1;\n\n    return this;\n  }\n\n  hasConnector(id: string): boolean {\n    return this.connectors[id] !== undefined;\n  }\n\n  getConnector(id: string): U {\n    return this.connectors[id];\n  }\n\n  removeConnector(id: string): DirectedGraph<T, U> {\n    const connector = this.connectors[id];\n\n    if (connector !== undefined) {\n      const { fromNodeId } = connector;\n      const { toNodeId } = connector;\n\n      delete this.connectors[id];\n      delete this.connectorData[id];\n\n      // update prev nodes count\n      this.prevNodesCount[toNodeId][fromNodeId] -= 1;\n      if (this.prevNodesCount[toNodeId][fromNodeId] === 0) {\n        delete this.prevNodesCount[toNodeId][fromNodeId];\n      }\n\n      // update next nodes count\n      this.nextNodesCount[fromNodeId][toNodeId] -= 1;\n      if (this.nextNodesCount[fromNodeId][toNodeId] === 0) {\n        delete this.nextNodesCount[fromNodeId][toNodeId];\n      }\n\n      this.inConnectors.get(toNodeId)?.delete(id);\n      this.outConnectors.get(fromNodeId)?.delete(id);\n\n      this.connectorsCount -= 1;\n    }\n\n    return this;\n  }\n\n  setConnector(id: string, data: { fromNodeId?: string; toNodeId?: string }): DirectedGraph<T, U> {\n    // VALIDATE\n    // -connector with given id exists\n    // -node with given fromNodeId exists\n    // -node with given toNodeId exists\n    if (!this.getConnector(id)) {\n      throw new Error(`Connector with id '${id}' does not exist.`);\n    }\n    if (data.fromNodeId && !this.getNode(data.fromNodeId)) {\n      throw new Error(`Node with id '${data.fromNodeId}' does not exist, to update fromNodeId.`);\n    }\n    if (data.toNodeId && !this.getNode(data.toNodeId)) {\n      throw new Error(`Node with id '${data.toNodeId}' does not exist, to update toNodeId.`);\n    }\n\n    const connector = this.getConnector(id);\n\n    // current references\n    let { fromNodeId } = connector;\n    let { toNodeId } = connector;\n\n    // update prev nodes count - unset prev values\n    this.prevNodesCount[toNodeId][fromNodeId] -= 1;\n    if (this.prevNodesCount[toNodeId][fromNodeId] === 0) {\n      delete this.prevNodesCount[toNodeId][fromNodeId];\n    }\n\n    // update next nodes count - unset prev values\n    this.nextNodesCount[fromNodeId][toNodeId] -= 1;\n    if (this.nextNodesCount[fromNodeId][toNodeId] === 0) {\n      delete this.nextNodesCount[fromNodeId][toNodeId];\n    }\n\n    // remove prev references\n    this.inConnectors.get(toNodeId)?.delete(id);\n    this.outConnectors.get(fromNodeId)?.delete(id);\n\n    // new references\n    fromNodeId = data.fromNodeId ? data.fromNodeId : connector.fromNodeId;\n    toNodeId = data.toNodeId ? data.toNodeId : connector.toNodeId;\n\n    connector.fromNodeId = fromNodeId;\n    connector.toNodeId = toNodeId;\n\n    // update prev nodes count\n    if (this.prevNodesCount[toNodeId][fromNodeId]) {\n      this.prevNodesCount[toNodeId][fromNodeId] += 1;\n    } else {\n      this.prevNodesCount[toNodeId][fromNodeId] = 1;\n    }\n\n    // update next nodes count\n    if (this.nextNodesCount[fromNodeId][toNodeId]) {\n      this.nextNodesCount[fromNodeId][toNodeId] += 1;\n    } else {\n      this.nextNodesCount[fromNodeId][toNodeId] = 1;\n    }\n\n    // update in and out connectors for both the nodes\n    this.inConnectors.get(toNodeId)?.set(id, connector);\n    this.outConnectors.get(fromNodeId)?.set(id, connector);\n\n    return this;\n  }\n\n  getInConnectors(toNodeId: string, fromNodeId?: string): U[] {\n    const allInConnectors = this.inConnectors.get(toNodeId);\n\n    if (allInConnectors) {\n      const connectorValues = Array.from(allInConnectors.values());\n\n      /**\n       * sort the in-connectors based on first point's x-cord in ascending order\n       * to maintain relative order of connectors\n       * if connectorValues is an array of connectors of type PlottedGraphConnector\n       */\n      // connectorValues is generic type array so assertion is needed\n      if (isPlottedGraphConnector(connectorValues)) {\n        sortConnectors(connectorValues);\n      }\n\n      if (fromNodeId === undefined) {\n        return connectorValues;\n      }\n\n      return connectorValues.filter(connector => {\n        return connector.fromNodeId === fromNodeId;\n      });\n    }\n\n    return [];\n  }\n\n  getOutConnectors(fromNodeId: string, toNodeId?: string): U[] {\n    const allOutConnectors = this.outConnectors.get(fromNodeId);\n\n    if (allOutConnectors) {\n      const connectorValues = Array.from(allOutConnectors.values());\n\n      /**\n       * sort the out-connectors based on first point's x-cord in ascending order\n       * to maintain relative order of connectors\n       * if connectorValues is an array of connectors of type PlottedGraphConnector\n       */\n      // connectorValues is generic type array so assertion is needed\n      if (isPlottedGraphConnector(connectorValues)) {\n        sortConnectors(connectorValues);\n      }\n\n      if (toNodeId === undefined) {\n        return connectorValues;\n      }\n\n      return connectorValues.filter(connector => {\n        return connector.toNodeId === toNodeId;\n      });\n    }\n\n    return [];\n  }\n\n  getAllNodeConnectors(nodeId: string) {\n    const inConnectors = this.getInConnectors(nodeId);\n\n    if (inConnectors) {\n      return inConnectors.concat(this.getOutConnectors(nodeId));\n    }\n    return [];\n  }\n}\n"]}

package/lib/components/FlowModeller/Renderer/Utils/GraphLayout.d.ts

@@ -0,0 +1,37 @@
+import type { ConnectorProps, GraphData, Node } from './Graph';
+export interface PlottedGraphNode<T = unknown> extends Node<T> {
+    dimensions: {
+        width: number;
+        height: number;
+    };
+    position: {
+        x: number;
+        y: number;
+    };
+    referencedNode?: T;
+}
+export interface PlottedGraphConnector<T = unknown> extends ConnectorProps<T> {
+    points: {
+        x: number;
+        y: number;
+    }[];
+    labelLayout?: {
+        value: string;
+        width: number;
+        height: number;
+        x: number;
+        y: number;
+    };
+}
+export declare const GraphLayoutDirection: {
+    LeftToRight: string;
+    TopToBottom: string;
+};
+export type GraphLayoutDirectionType = (typeof GraphLayoutDirection)[keyof typeof GraphLayoutDirection];
+export default class GraphLayout {
+    static plot<T extends GraphData<PlottedGraphNode, PlottedGraphConnector>>(graphData: T, readOnly?: boolean, direction?: GraphLayoutDirectionType): {
+        width: any;
+        height: any;
+    };
+}
+//# sourceMappingURL=GraphLayout.d.ts.map

package/lib/components/FlowModeller/Renderer/Utils/GraphLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphLayout.d.ts","sourceRoot":"","sources":["../../../../../src/components/FlowModeller/Renderer/Utils/GraphLayout.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/D,MAAM,WAAW,gBAAgB,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,IAAI,CAAC,CAAC,CAAC;IAC5D,UAAU,EAAE;QACV,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,QAAQ,EAAE;QACR,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;KACX,CAAC;IACF,cAAc,CAAC,EAAE,CAAC,CAAC;CACpB;AAED,MAAM,WAAW,qBAAqB,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,cAAc,CAAC,CAAC,CAAC;IAC3E,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACnC,WAAW,CAAC,EAAE;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;KACX,CAAC;CACH;AAED,eAAO,MAAM,oBAAoB;;;CAGhC,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAClC,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,OAAO,oBAAoB,CAAC,CAAC;AAKnE,MAAM,CAAC,OAAO,OAAO,WAAW;IAE9B,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,SAAS,CAAC,gBAAgB,EAAE,qBAAqB,CAAC,EACtE,SAAS,EAAE,CAAC,EACZ,QAAQ,GAAE,OAAe,EACzB,SAAS,GAAE,wBAA2D;;;;CAmIzE"}

package/lib/components/FlowModeller/Renderer/Utils/GraphLayout.js

@@ -0,0 +1,114 @@
+// cspell:words marginx, marginy, lablepos
+import dagre from '@dagrejs/dagre';
+export const GraphLayoutDirection = {
+    LeftToRight: 'LR',
+    TopToBottom: 'TB'
+};
+const DEFAULT_GRAPH_WIDTH = 2000;
+const DEFAULT_GRAPH_HEIGHT = 2000;
+export default class GraphLayout {
+    // Using Dagre layouting
+    static plot(graphData, readOnly = false, direction = GraphLayoutDirection.TopToBottom) {
+        const dagreGraph = new dagre.graphlib.Graph({ multigraph: true });
+        dagreGraph.setDefaultEdgeLabel(() => ({}));
+        const defaultNodeWidth = 280;
+        const defaultNodeHeight = 112;
+        dagreGraph.setGraph({
+            rankdir: direction,
+            ranksep: readOnly ? 2 : 4,
+            edgesep: defaultNodeWidth / 2,
+            nodesep: 20,
+            marginx: 200,
+            marginy: 32
+        });
+        graphData.nodes.forEach(node => {
+            dagreGraph.setNode(node.id, {
+                width: node.dimensions.width ?? defaultNodeWidth,
+                height: node.dimensions.height ?? defaultNodeHeight
+            });
+        });
+        graphData.connectors.forEach((con, index) => {
+            dagreGraph.setEdge(con.fromNodeId, con.toNodeId, {
+                weight: 1,
+                minlen: 2,
+                label: con.data &&
+                    typeof con.data === 'object' &&
+                    'label' in con.data &&
+                    typeof con.data.label === 'string'
+                    ? con.data.label
+                    : '',
+                width: 250,
+                height: con.data && typeof con.data === 'object' && 'label' in con.data ? 90 : 40,
+                lablepos: 'c',
+                labeloffset: 0
+            }, index.toString());
+        });
+        dagre.layout(dagreGraph, { disableOptimalOrderHeuristic: true });
+        graphData.nodes.forEach(el => {
+            const node = dagreGraph.node(el.id);
+            el.position.x = node.x - el.dimensions.width / 2;
+            el.position.y = node.y - el.dimensions.height / 2;
+        });
+        graphData.connectors.forEach((con, index) => {
+            const edge = dagreGraph.edge(con.fromNodeId, con.toNodeId, index.toString());
+            con.labelLayout = {
+                value: edge.label,
+                x: edge.x,
+                y: edge.y,
+                width: edge.width,
+                height: edge.height
+            };
+            const lastIndex = edge.points.length - 1;
+            let firstPoint = edge.points[0];
+            const secondPoint = edge.points[1];
+            let lastPoint = edge.points[lastIndex];
+            const secondLastPoint = edge.points[lastIndex - 1];
+            const fromNode = dagreGraph.node(con.fromNodeId);
+            const toNode = dagreGraph.node(con.toNodeId);
+            firstPoint =
+                firstPoint.x !== secondPoint.x
+                    ? {
+                        ...edge.points[0],
+                        x: fromNode.x,
+                        y: edge.points[1].y
+                    }
+                    : firstPoint;
+            lastPoint =
+                lastPoint.x !== secondLastPoint.x
+                    ? {
+                        ...edge.points[lastIndex],
+                        x: toNode.x,
+                        y: edge.points[lastIndex - 1].y
+                    }
+                    : lastPoint;
+            con.points = [
+                { x: fromNode.x, y: fromNode.y + fromNode.height / 2 },
+                { ...firstPoint, y: firstPoint.y + 10 },
+                { ...secondPoint, y: secondPoint.y + 10 },
+                ...edge.points.slice(2, lastIndex),
+                lastPoint
+            ];
+            // Only add the last point incase the edge has an arc at end
+            if (edge.points[lastIndex].x !== edge.points[lastIndex - 1].x) {
+                con.points.push({ x: toNode.x, y: toNode.y });
+            }
+            // if current edge source node is an placeholder node move down the starting point of placeholder node by 12
+            if (fromNode.height === 0) {
+                con.points[0].y += 12;
+            }
+            const edgeLastPointIndex = con.points.length - 1;
+            // Move the merging arcs last point to the starting point of placeholder node
+            if (con.points[edgeLastPointIndex].x === con.points[edgeLastPointIndex - 1].x &&
+                toNode.height === 0) {
+                con.points[edgeLastPointIndex].y += 12;
+            }
+        });
+        const { width } = dagreGraph.graph();
+        const { height } = dagreGraph.graph();
+        return {
+            width: Number.isFinite(width) ? width : DEFAULT_GRAPH_WIDTH,
+            height: Number.isFinite(height) ? height : DEFAULT_GRAPH_HEIGHT
+        };
+    }
+}
+//# sourceMappingURL=GraphLayout.js.map