@pega/cosmos-react-build 2.1.6 → 2.1.7

package/lib/components/FlowModeller/NodeLibrary.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { readableColor } from 'polished';
+import { Icon, Menu, menuHelpers, Popover, SearchInput, useI18n, cap, createStringMatcher } from '@pega/cosmos-react-core';
+import { StyledIcon } from './Node/NodeTemplate.styles';
+const StyledPopover = styled(Popover) `
+  min-width: 40ch;
+`;
+const NodeLibrary = forwardRef(({ show, target, items, onClick }, ref) => {
+    const [search, setSearch] = useState('');
+    const t = useI18n();
+    const searchEleRef = useRef(null);
+    useEffect(() => {
+        if (show) {
+            setSearch('');
+            searchEleRef?.current?.focus();
+        }
+    }, [show, searchEleRef.current]);
+    const searchRegex = useMemo(() => (search ? createStringMatcher(cap(search), 'contains', '') : null), [search]);
+    const itemsToRender = useMemo(() => {
+        return menuHelpers.mapTree(searchRegex
+            ? menuHelpers.flatten(items).filter(({ primary }) => {
+                return searchRegex.test(primary);
+            })
+            : items, node => {
+            let selectable = false;
+            if (!node.items) {
+                selectable = true;
+            }
+            const nodeItem = node;
+            return {
+                ...node,
+                visual: nodeItem.type ? (_jsx(StyledIcon, { id: node.id, style: {
+                        '--bg-color': nodeItem.type.color,
+                        '--fg-color': readableColor(nodeItem.type.color)
+                    }, children: _jsx(Icon, { name: nodeItem.type.icon }, void 0) }, void 0)) : undefined,
+                count: node.items ? node.items.length : undefined,
+                secondary: node.secondary,
+                selected: selectable ? !!node.selected : undefined
+            };
+        });
+    }, [items, searchRegex]);
+    const onItemSelect = useCallback((id) => {
+        const selectedNode = menuHelpers.getItem(items, id);
+        onClick(selectedNode);
+    }, [onClick]);
+    return (_jsx(_Fragment, { children: show && (_jsx(StyledPopover, { show: show, target: target, ref: ref, children: _jsx(Menu, { items: itemsToRender, onItemClick: onItemSelect, header: _jsx(SearchInput, { ref: searchEleRef, onSearchChange: setSearch, value: search, searchInputAriaLabel: t('search_nodes'), placeholder: t('search_nodes') }, void 0) }, void 0) }, void 0)) }, void 0));
+});
+export default NodeLibrary;
+//# sourceMappingURL=NodeLibrary.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NodeLibrary.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/NodeLibrary.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  forwardRef,\n  PropsWithoutRef,\n  Ref,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  CSSProperties\n} from 'react';\nimport styled from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  ForwardProps,\n  Icon,\n  Menu,\n  MenuGroupProps,\n  menuHelpers,\n  MenuItemProps,\n  Popover,\n  SearchInput,\n  useI18n,\n  cap,\n  createStringMatcher\n} from '@pega/cosmos-react-core';\n\nimport { NodeLibraryItem } from './Node/Node.types';\nimport { StyledIcon } from './Node/NodeTemplate.styles';\n\nconst StyledPopover: typeof Popover = styled(Popover)`\n  min-width: 40ch;\n`;\n\nexport interface NodeLibraryProps {\n  show: boolean;\n  target: HTMLElement | null;\n  items: NodeLibraryItem[];\n  onClick: (libItem: NodeLibraryItem) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst NodeLibrary: FC<NodeLibraryProps & ForwardProps> = forwardRef(\n  (\n    { show, target, items, onClick }: PropsWithoutRef<NodeLibraryProps>,\n    ref: NodeLibraryProps['ref']\n  ) => {\n    const [search, setSearch] = useState('');\n\n    const t = useI18n();\n    const searchEleRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n      if (show) {\n        setSearch('');\n        searchEleRef?.current?.focus();\n      }\n    }, [show, searchEleRef.current]);\n\n    const searchRegex = useMemo(\n      () => (search ? createStringMatcher(cap(search), 'contains', '') : null),\n      [search]\n    );\n\n    const itemsToRender: (MenuItemProps | MenuGroupProps)[] = useMemo(() => {\n      return menuHelpers.mapTree(\n        searchRegex\n          ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n              return searchRegex.test(primary);\n            })\n          : items,\n        node => {\n          let selectable = false;\n          if (!node.items) {\n            selectable = true;\n          }\n\n          const nodeItem: NodeLibraryItem = node as NodeLibraryItem;\n          return {\n            ...node,\n            visual: nodeItem.type ? (\n              <StyledIcon\n                id={node.id}\n                style={\n                  {\n                    '--bg-color': nodeItem.type.color,\n                    '--fg-color': readableColor(nodeItem.type.color)\n                  } as CSSProperties\n                }\n              >\n                <Icon name={nodeItem.type.icon} />\n              </StyledIcon>\n            ) : undefined,\n            count: node.items ? node.items.length : undefined,\n            secondary: node.secondary,\n            selected: selectable ? !!node.selected : undefined\n          };\n        }\n      );\n    }, [items, searchRegex]);\n\n    const onItemSelect = useCallback(\n      (id: MenuItemProps['id']) => {\n        const selectedNode = menuHelpers.getItem(items, id) as NodeLibraryItem;\n        onClick(selectedNode);\n      },\n      [onClick]\n    );\n    return (\n      <>\n        {show && (\n          <StyledPopover show={show} target={target} ref={ref}>\n            <Menu\n              items={itemsToRender}\n              onItemClick={onItemSelect}\n              header={\n                <SearchInput\n                  ref={searchEleRef}\n                  onSearchChange={setSearch}\n                  value={search}\n                  searchInputAriaLabel={t('search_nodes')}\n                  placeholder={t('search_nodes')}\n                />\n              }\n            />\n          </StyledPopover>\n        )}\n      </>\n    );\n  }\n);\n\nexport default NodeLibrary;\n"]}

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

@@ -0,0 +1,13 @@
+import { FC, ComponentType } from 'react';
+import { RendererConnectorProps } from './Renderer.types';
+export interface ConnectorProps {
+    items: RendererConnectorProps[];
+    dimensions: {
+        width: number;
+        height: number;
+    };
+    content?: ComponentType<RendererConnectorProps>;
+}
+declare const Connectors: FC<ConnectorProps>;
+export default Connectors;
+//# sourceMappingURL=Connectors.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Connectors.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Connectors.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAK1C,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAyD1D,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,sBAAsB,EAAE,CAAC;IAChC,UAAU,EAAE;QACV,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,OAAO,CAAC,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC;CACjD;AACD,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,cAAc,CAqClC,CAAC;AAEF,eAAe,UAAU,CAAC"}

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

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { useTheme } from '@pega/cosmos-react-core';
+const CURVE_RADIUS = 16;
+const genLine = (points) => {
+    const lineStr = points
+        .map((point, idx, arr) => {
+        const { x, y } = point;
+        const prev = arr[idx - 1];
+        const next = arr[idx + 1];
+        const line = `L${x},${y}`;
+        // if the point is extream end, no need to add a curve
+        if (!prev || !next)
+            return line;
+        // if point is colinear with prev and next, no need to add a curve
+        if (prev.x === next.x || prev.y === next.y)
+            return line;
+        if (point.x > next.x)
+            // BOTTOM-RIGHT ↲
+            return `L${x},${y - CURVE_RADIUS}a${CURVE_RADIUS},${CURVE_RADIUS} 0 0 1 -${CURVE_RADIUS},${CURVE_RADIUS}`;
+        // BOTTOM-LEFT ↳
+        if (point.x < next.x)
+            return `L${x},${y - CURVE_RADIUS}a${CURVE_RADIUS},${CURVE_RADIUS} 0 0 0 ${CURVE_RADIUS},${CURVE_RADIUS}`;
+        // TOP-LEFT ↱
+        if (point.x < prev.x)
+            return `L${x + CURVE_RADIUS},${y}a${CURVE_RADIUS},${CURVE_RADIUS} 0 0 0 -${CURVE_RADIUS},${CURVE_RADIUS}`;
+        // TOP-RIGHT ↴
+        if (point.x > prev.x)
+            return `L${x - CURVE_RADIUS},${y}a${CURVE_RADIUS},${CURVE_RADIUS} 0 0 1 ${CURVE_RADIUS},${CURVE_RADIUS}`;
+        return `L${x},${y}`;
+    })
+        .join('');
+    return `M${lineStr.substr(1)}`;
+};
+const StyledConnectorContainer = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+`;
+const Connectors = ({ items, dimensions, content: Content }) => {
+    const theme = useTheme();
+    return (_jsx(StyledConnectorContainer, { children: _jsx("svg", { width: dimensions.width, height: dimensions.height, xmlns: 'http://www.w3.org/2000/svg', viewBox: `0 0 ${dimensions.width} ${dimensions.height}`, children: items.map(item => {
+                return (_jsxs("g", { children: [_jsx("path", { id: item.id, d: genLine(item.points), stroke: theme.base.colors.slate.dark, strokeWidth: '1', fill: 'none' }, void 0), item.labelLayout && (_jsx("foreignObject", { x: item.labelLayout.x - item.labelLayout.width, y: item.points.length > 10 ? item.points[3].y - 15 : item.labelLayout.y - 7.5, width: item.labelLayout.width, height: item.labelLayout.height, children: Content && _jsx(Content, { ...item }, void 0) }, void 0))] }, item.id));
+            }) }, void 0) }, void 0));
+};
+export default Connectors;
+//# sourceMappingURL=Connectors.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Connectors.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Connectors.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, ComponentType } from 'react';\nimport styled from 'styled-components';\n\nimport { useTheme } from '@pega/cosmos-react-core';\n\nimport { RendererConnectorProps } from './Renderer.types';\n\ninterface Points {\n  x: number;\n  y: number;\n}\n\nconst CURVE_RADIUS = 16;\nconst genLine = (points: Points[]) => {\n  const lineStr: string = points\n    .map((point: Points, idx: number, arr: Points[]) => {\n      const { x, y } = point;\n      const prev = arr[idx - 1];\n      const next = arr[idx + 1];\n      const line = `L${x},${y}`;\n\n      // if the point is extream end, no need to add a curve\n      if (!prev || !next) return line;\n\n      // if point is colinear with prev and next, no need to add a curve\n      if (prev.x === next.x || prev.y === next.y) return line;\n\n      if (point.x > next.x)\n        // BOTTOM-RIGHT ↲\n        return `L${x},${\n          y - CURVE_RADIUS\n        }a${CURVE_RADIUS},${CURVE_RADIUS} 0 0 1 -${CURVE_RADIUS},${CURVE_RADIUS}`;\n\n      // BOTTOM-LEFT ↳\n      if (point.x < next.x)\n        return `L${x},${\n          y - CURVE_RADIUS\n        }a${CURVE_RADIUS},${CURVE_RADIUS} 0 0 0 ${CURVE_RADIUS},${CURVE_RADIUS}`;\n\n      // TOP-LEFT ↱\n      if (point.x < prev.x)\n        return `L${\n          x + CURVE_RADIUS\n        },${y}a${CURVE_RADIUS},${CURVE_RADIUS} 0 0 0 -${CURVE_RADIUS},${CURVE_RADIUS}`;\n\n      // TOP-RIGHT ↴\n      if (point.x > prev.x)\n        return `L${\n          x - CURVE_RADIUS\n        },${y}a${CURVE_RADIUS},${CURVE_RADIUS} 0 0 1 ${CURVE_RADIUS},${CURVE_RADIUS}`;\n\n      return `L${x},${y}`;\n    })\n    .join('');\n  return `M${lineStr.substr(1)}`;\n};\n\nconst StyledConnectorContainer = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n`;\nexport interface ConnectorProps {\n  items: RendererConnectorProps[];\n  dimensions: {\n    width: number;\n    height: number;\n  };\n  content?: ComponentType<RendererConnectorProps>;\n}\nconst Connectors: FC<ConnectorProps> = ({ items, dimensions, content: Content }) => {\n  const theme = useTheme();\n\n  return (\n    <StyledConnectorContainer>\n      <svg\n        width={dimensions.width}\n        height={dimensions.height}\n        xmlns='http://www.w3.org/2000/svg'\n        viewBox={`0 0 ${dimensions.width} ${dimensions.height}`}\n      >\n        {items.map(item => {\n          return (\n            <g key={item.id}>\n              <path\n                id={item.id}\n                d={genLine(item.points)}\n                stroke={theme.base.colors.slate.dark}\n                strokeWidth='1'\n                fill='none'\n              />\n              {item.labelLayout && (\n                <foreignObject\n                  x={item.labelLayout.x - item.labelLayout.width}\n                  y={item.points.length > 10 ? item.points[3].y - 15 : item.labelLayout.y - 7.5}\n                  width={item.labelLayout.width}\n                  height={item.labelLayout.height}\n                >\n                  {Content && <Content {...item} />}\n                </foreignObject>\n              )}\n            </g>\n          );\n        })}\n      </svg>\n    </StyledConnectorContainer>\n  );\n};\n\nexport default Connectors;\n"]}

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

@@ -0,0 +1,9 @@
+import { ComponentType, FC } from 'react';
+import { RendererNodeProps } from './Renderer.types';
+export interface NodesProps {
+    items: RendererNodeProps[];
+    content?: ComponentType<RendererNodeProps>;
+}
+declare const Nodes: FC<NodesProps>;
+export default Nodes;
+//# sourceMappingURL=Nodes.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Nodes.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Nodes.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAK1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAoBrD,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,OAAO,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;CAC5C;AACD,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAmBzB,CAAC;AAEF,eAAe,KAAK,CAAC"}

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled, { css } from 'styled-components';
+import { Flex } from '@pega/cosmos-react-core';
+const StyledNodeWrapper = styled.div(({ dimensions, position }) => {
+    return css `
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: ${dimensions.width}px;
+    height: ${dimensions.height}px;
+    transform: translate(${position.x}px, ${position.y}px);
+  `;
+});
+const StyledNodeContainer = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+`;
+const Nodes = ({ items, content: Node }) => {
+    return (_jsx(StyledNodeContainer, { children: items.map(item => {
+            return (_jsx(Flex, { as: StyledNodeWrapper, id: item.id, dimensions: item.dimensions, position: item.position, container: { justify: 'center' }, children: Node && _jsx(Node, { ...item }, void 0) }, item.id));
+        }) }, void 0));
+};
+export default Nodes;
+//# sourceMappingURL=Nodes.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Nodes.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Nodes.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAI/C,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAGjC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC9B,OAAO,GAAG,CAAA;;;;aAIC,UAAU,CAAC,KAAK;cACf,UAAU,CAAC,MAAM;2BACJ,QAAQ,CAAC,CAAC,OAAO,QAAQ,CAAC,CAAC;GACnD,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIrC,CAAC;AAKF,MAAM,KAAK,GAAmB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE;IACzD,OAAO,CACL,KAAC,mBAAmB,cACjB,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAChB,OAAO,CACL,KAAC,IAAI,IAEH,EAAE,EAAE,iBAAiB,EACrB,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,YAE/B,IAAI,IAAI,KAAC,IAAI,OAAK,IAAI,WAAI,IAPtB,IAAI,CAAC,EAAE,CAQP,CACR,CAAC;QACJ,CAAC,CAAC,WACkB,CACvB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import { ComponentType, FC } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex } from '@pega/cosmos-react-core';\n\nimport { RendererNodeProps } from './Renderer.types';\n\nconst StyledNodeWrapper = styled.div<{\n  dimensions: RendererNodeProps['dimensions'];\n  position: RendererNodeProps['position'];\n}>(({ dimensions, position }) => {\n  return css`\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: ${dimensions.width}px;\n    height: ${dimensions.height}px;\n    transform: translate(${position.x}px, ${position.y}px);\n  `;\n});\nconst StyledNodeContainer = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n`;\nexport interface NodesProps {\n  items: RendererNodeProps[];\n  content?: ComponentType<RendererNodeProps>;\n}\nconst Nodes: FC<NodesProps> = ({ items, content: Node }) => {\n  return (\n    <StyledNodeContainer>\n      {items.map(item => {\n        return (\n          <Flex\n            key={item.id}\n            as={StyledNodeWrapper}\n            id={item.id}\n            dimensions={item.dimensions}\n            position={item.position}\n            container={{ justify: 'center' }}\n          >\n            {Node && <Node {...item} />}\n          </Flex>\n        );\n      })}\n    </StyledNodeContainer>\n  );\n};\n\nexport default Nodes;\n"]}

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

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { RendererProps } from './Renderer.types';
+declare const Renderer: FC<RendererProps>;
+export default Renderer;
+//# sourceMappingURL=Renderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAI3B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAUjD,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAU/B,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import Connectors from './Connectors';
+import Nodes from './Nodes';
+import GraphLayout from './Utils/GraphLayout';
+const StyledWrapper = styled.div `
+  position: relative;
+  width: 100%;
+  height: 100%;
+`;
+const Renderer = ({ graphData, connector, node }) => {
+    // apply the plotted positions
+    const graphDimensions = GraphLayout.plot(graphData);
+    return (_jsxs(StyledWrapper, { children: [_jsx(Connectors, { items: graphData.connectors, content: connector, dimensions: graphDimensions }, void 0), _jsx(Nodes, { items: graphData.nodes, content: node }, void 0)] }, void 0));
+};
+export default Renderer;
+//# sourceMappingURL=Renderer.js.map

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":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,UAAU,MAAM,cAAc,CAAC;AAEtC,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,WAAW,MAAM,qBAAqB,CAAC;AAE9C,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAI/B,CAAC;AAEF,MAAM,QAAQ,GAAsB,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE;IACrE,8BAA8B;IAC9B,MAAM,eAAe,GAAG,WAAW,CAAC,IAAI,CAA6B,SAAS,CAAC,CAAC;IAEhF,OAAO,CACL,MAAC,aAAa,eACZ,KAAC,UAAU,IAAC,KAAK,EAAE,SAAS,CAAC,UAAU,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,eAAe,WAAI,EAC5F,KAAC,KAAK,IAAC,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,WAAI,YAClC,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { FC } from 'react';\nimport styled from 'styled-components';\n\nimport Connectors from './Connectors';\nimport { RendererProps } from './Renderer.types';\nimport Nodes from './Nodes';\nimport GraphLayout from './Utils/GraphLayout';\n\nconst StyledWrapper = styled.div`\n  position: relative;\n  width: 100%;\n  height: 100%;\n`;\n\nconst Renderer: FC<RendererProps> = ({ graphData, connector, node }) => {\n  // apply the plotted positions\n  const graphDimensions = GraphLayout.plot<RendererProps['graphData']>(graphData);\n\n  return (\n    <StyledWrapper>\n      <Connectors items={graphData.connectors} content={connector} dimensions={graphDimensions} />\n      <Nodes items={graphData.nodes} content={node} />\n    </StyledWrapper>\n  );\n};\n\nexport default Renderer;\n"]}

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

@@ -0,0 +1,18 @@
+import { ComponentType } from 'react';
+import { GraphData } from './Utils/Graph';
+import { PlottedGraphConnector, PlottedGraphNode } from './Utils/GraphLayout';
+export interface AddNodeHandlerParams {
+    refType: 'node' | 'connector';
+    refId: string | string[];
+}
+export interface RendererNodeProps extends PlottedGraphNode {
+}
+export interface RendererConnectorProps extends PlottedGraphConnector {
+}
+export interface RendererProps {
+    graphData: GraphData<RendererNodeProps, RendererConnectorProps>;
+    disableAutoLayout?: boolean;
+    connector?: ComponentType<RendererConnectorProps>;
+    node?: ComponentType<RendererNodeProps>;
+}
+//# 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,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE9E,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,MAAM,GAAG,WAAW,CAAC;IAC9B,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CAC1B;AAED,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;CAAG;AAE9D,MAAM,WAAW,sBAAuB,SAAQ,qBAAqB;CAAG;AAExE,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,SAAS,CAAC,iBAAiB,EAAE,sBAAsB,CAAC,CAAC;IAChE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAClD,IAAI,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;CACzC"}

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 { ComponentType } from 'react';\n\nimport { GraphData } from './Utils/Graph';\nimport { PlottedGraphConnector, PlottedGraphNode } from './Utils/GraphLayout';\n\nexport interface AddNodeHandlerParams {\n  refType: 'node' | 'connector';\n  refId: string | string[];\n}\n\nexport interface RendererNodeProps extends PlottedGraphNode {}\n\nexport interface RendererConnectorProps extends PlottedGraphConnector {}\n\nexport interface RendererProps {\n  graphData: GraphData<RendererNodeProps, RendererConnectorProps>;\n  disableAutoLayout?: boolean;\n  connector?: ComponentType<RendererConnectorProps>;\n  node?: ComponentType<RendererNodeProps>;\n}\n"]}

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

@@ -0,0 +1,54 @@
+export interface ConnectorProps<T = unknown> {
+    id: string;
+    fromNodeId: string;
+    toNodeId: string;
+    label?: string;
+    data?: T;
+}
+export interface Node<T = unknown> {
+    id: string;
+    data?: T;
+}
+export interface GraphData<T extends Node = Node, U extends ConnectorProps = ConnectorProps> {
+    nodes: T[];
+    connectors: U[];
+}
+export declare class DirectedGraph<T extends Node = Node, U extends ConnectorProps = 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): ConnectorProps[];
+    getOutConnectors(fromNodeId: string, toNodeId?: string): ConnectorProps[];
+    getAllNodeConnectors(nodeId: string): ConnectorProps<unknown>[] | undefined;
+}
+//# 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":"AAAA,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,OAAO;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,CAAC,CAAC;CACV;AAED,MAAM,WAAW,IAAI,CAAC,CAAC,GAAG,OAAO;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,CAAC,CAAC;CACV;AAED,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,IAAI,GAAG,IAAI,EAAE,CAAC,SAAS,cAAc,GAAG,cAAc;IACzF,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,UAAU,EAAE,CAAC,EAAE,CAAC;CACjB;AAED,qBAAa,aAAa,CACxB,CAAC,SAAS,IAAI,GAAG,IAAI,EACrB,CAAC,SAAS,cAAc,GAAG,cAAc,EACzC,EAAE,GAAG,OAAO,EACZ,EAAE,GAAG,OAAO;IAEZ,OAAO,CAAC,KAAK,CAAyB;IACtC,OAAO,CAAC,UAAU,CAAyB;IAG3C,OAAO,CAAC,QAAQ,CAAoC;IACpD,OAAO,CAAC,aAAa,CAAoC;IAEzD,OAAO,CAAC,YAAY,CAAyC;IAC7D,OAAO,CAAC,cAAc,CAA8C;IAEpE,OAAO,CAAC,aAAa,CAAyC;IAC9D,OAAO,CAAC,cAAc,CAA8C;IAEpE,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,eAAe,CAAK;gBAEhB,SAAS,GAAE,SAAS,CAAC,CAAC,EAAE,CAAC,CAAiC;IAOtE,YAAY,IAAI,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC;IAO/B,YAAY,IAAI,MAAM;IAItB,QAAQ;IAIR,OAAO,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,CAAC,EAAE,EAAE,GAAG,aAAa;IAoB1C,OAAO,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC;IAI1B,OAAO,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO;IAIhC,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,gBAAgB,UAAQ,GAAG,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC;IAyBzE,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,EAAE;IAMjC,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,EAAE;IAMjC,iBAAiB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IAOzC,iBAAiB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IAOzC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO;IAK/B,kBAAkB,IAAI,MAAM;IAI5B,aAAa;IAIb,YAAY,CAAC,SAAS,EAAE,CAAC,EAAE,IAAI,CAAC,EAAE,EAAE,GAAG,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC;IAgD1D,YAAY,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO;IAIjC,YAAY,CAAC,EAAE,EAAE,MAAM,GAAG,CAAC;IAI3B,eAAe,CAAC,EAAE,EAAE,MAAM,GAAG,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC;IA+BhD,YAAY,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;QAAE,UAAU,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC;IAiE/F,eAAe,CAAC,QAAQ,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,GAAG,cAAc,EAAE;IAkBxE,gBAAgB,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,cAAc,EAAE;IAkBzE,oBAAoB,CAAC,MAAM,EAAE,MAAM;CAOpC"}

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

@@ -0,0 +1,302 @@
+export class DirectedGraph {
+    constructor(graphData = { nodes: [], connectors: [] }) {
+        Object.defineProperty(this, "nodes", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {}
+        });
+        Object.defineProperty(this, "connectors", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {}
+        });
+        // additional way to maintain related data - for cases where Graph is used for indirect purposes
+        Object.defineProperty(this, "nodeData", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {}
+        });
+        Object.defineProperty(this, "connectorData", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {}
+        });
+        Object.defineProperty(this, "inConnectors", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {}
+        }); // we are maintaining connector reference instead of id, to avoid iterations later on.
+        Object.defineProperty(this, "prevNodesCount", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {}
+        });
+        Object.defineProperty(this, "outConnectors", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {}
+        }); // we are maintaining connector reference instead of id, to avoid iterations later on
+        Object.defineProperty(this, "nextNodesCount", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {}
+        });
+        Object.defineProperty(this, "nodeCount", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        Object.defineProperty(this, "connectorsCount", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        // 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 => this.addConnector(JSON.parse(JSON.stringify(item))));
+    }
+    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[node.id] = {};
+            this.prevNodesCount[node.id] = {};
+            this.outConnectors[node.id] = {};
+            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
+                Object.keys(this.inConnectors[nodeId]).forEach(removeConnector);
+                delete this.inConnectors[nodeId];
+                delete this.prevNodesCount[nodeId];
+                Object.keys(this.outConnectors[nodeId]).forEach(removeConnector);
+                delete this.outConnectors[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.id;
+        const fromNodeId = connector.fromNodeId;
+        const toNodeId = connector.toNodeId;
+        // 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[toNodeId][id] = connector;
+        this.outConnectors[fromNodeId][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.fromNodeId;
+            const toNodeId = connector.toNodeId;
+            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];
+            }
+            delete this.inConnectors[toNodeId][id];
+            delete this.outConnectors[fromNodeId][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.fromNodeId;
+        let toNodeId = connector.toNodeId;
+        // 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
+        delete this.inConnectors[toNodeId][id];
+        delete this.outConnectors[fromNodeId][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[toNodeId][id] = connector;
+        this.outConnectors[fromNodeId][id] = connector;
+        return this;
+    }
+    getInConnectors(toNodeId, fromNodeId) {
+        const allInConnectors = this.inConnectors[toNodeId];
+        if (allInConnectors) {
+            const connectorValues = Object.values(allInConnectors);
+            if (fromNodeId === undefined) {
+                return connectorValues;
+            }
+            return connectorValues.filter(connector => {
+                return connector.fromNodeId === fromNodeId;
+            });
+        }
+        return [];
+    }
+    getOutConnectors(fromNodeId, toNodeId) {
+        const allOutConnectors = this.outConnectors[fromNodeId];
+        if (allOutConnectors) {
+            const connectorValues = Object.values(allOutConnectors);
+            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));
+        }
+    }
+}
+//# sourceMappingURL=Graph.js.map