@pega/cosmos-react-build 3.0.0-dev.3.0 → 3.0.0-dev.30.0

package/lib/components/FlowModeller/Node/NodeTemplate.styles.d.ts

@@ -5,11 +5,13 @@ export declare const StyledLabel: import("styled-components").StyledComponent<im
     nodeType: NodeType;
 }, never>;
 export declare const StyledIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledCardHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledNodeTemplateHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledText: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledCard: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledCardFooter: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardFooterProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledCardContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledNodeTemplate: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {
+    highlight: boolean;
+}, never>;
+export declare const StyledNodeTemplateFooter: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardFooterProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledNodeTempleteContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledAdditionalData: import("styled-components").StyledComponent<"dl", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledAdditionalDataItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledTextWithEllipsis: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;

package/lib/components/FlowModeller/Node/NodeTemplate.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeTemplate.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplate.styles.ts"],"names":[],"mappings":";AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,eAAO,MAAM,YAAY,yGAYvB,CAAC;AAIH,eAAO,MAAM,WAAW;cAA4B,QAAQ;SAW1D,CAAC;AAIH,eAAO,MAAM,UAAU,yGAWrB,CAAC;AAIH,eAAO,MAAM,gBAAgB,4GAQ3B,CAAC;AAIH,eAAO,MAAM,UAAU,mOAOrB,CAAC;AAIH,eAAO,MAAM,UAAU,mOAoBrB,CAAC;AAEH,eAAO,MAAM,gBAAgB,yOAO3B,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAa5B,CAAC;AAIH,eAAO,MAAM,oBAAoB,wGAEhC,CAAC;AAEF,eAAO,MAAM,wBAAwB,yGAMnC,CAAC;AAGH,eAAO,MAAM,sBAAsB,mOAQjC,CAAC"}
+{"version":3,"file":"NodeTemplate.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplate.styles.ts"],"names":[],"mappings":";AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,eAAO,MAAM,YAAY,yGAYvB,CAAC;AAIH,eAAO,MAAM,WAAW;cAA4B,QAAQ;SAW1D,CAAC;AAIH,eAAO,MAAM,UAAU,yGAWrB,CAAC;AAIH,eAAO,MAAM,wBAAwB,4GAQnC,CAAC;AAIH,eAAO,MAAM,UAAU,mOAOrB,CAAC;AAIH,eAAO,MAAM,kBAAkB;eAA6B,OAAO;SA6BjE,CAAC;AAIH,eAAO,MAAM,wBAAwB,yOAOnC,CAAC;AAIH,eAAO,MAAM,yBAAyB,yGAapC,CAAC;AAIH,eAAO,MAAM,oBAAoB,wGAEhC,CAAC;AAEF,eAAO,MAAM,wBAAwB,yGAMnC,CAAC;AAIH,eAAO,MAAM,sBAAsB,mOAQjC,CAAC"}

package/lib/components/FlowModeller/Node/NodeTemplate.styles.js

@@ -40,7 +40,7 @@ export const StyledIcon = styled.div(({ theme }) => {
   `;
 });
 StyledIcon.defaultProps = defaultThemeProp;
-export const StyledCardHeader = styled.header(({ theme }) => {
+export const StyledNodeTemplateHeader = styled.header(({ theme }) => {
     return css `
     white-space: nowrap;
     button {
@@ -49,22 +49,31 @@ export const StyledCardHeader = styled.header(({ theme }) => {
     }
   `;
 });
-StyledCardHeader.defaultProps = defaultThemeProp;
+StyledNodeTemplateHeader.defaultProps = defaultThemeProp;
 export const StyledText = styled(Text)(({ theme }) => {
     return css `
     padding-inline-end: ${theme.base.spacing};
     overflow: hidden;
-    min-width: 12rem;
     text-overflow: ellipsis;
+    max-width: 24ch;
   `;
 });
 StyledText.defaultProps = defaultThemeProp;
-export const StyledCard = styled(Card)(({ theme }) => {
+export const StyledNodeTemplate = styled(Card)(({ highlight, theme }) => {
     return css `
     width: 17.5rem;
     height: 7.5rem;
     align-self: center;
     overflow: hidden;
+    ${highlight &&
+        css `
+      &&& {
+        color: ${theme.base.colors.black};
+        background-color: ${theme.base.colors.red['extra-light']};
+        border-radius: 0.25rem;
+        box-shadow: 0 0 0 0.125rem ${theme.base.colors.red.medium};
+      }
+    `}
     &&& {
       border-radius: ${theme.base['border-radius']};
     }
@@ -72,7 +81,7 @@ export const StyledCard = styled(Card)(({ theme }) => {
     &:hover {
       box-shadow: ${theme.base.shadow.focus};
       cursor: pointer;
-      ${StyledCardHeader} {
+      ${StyledNodeTemplateHeader} {
         button {
           visibility: visible;
         }
@@ -80,16 +89,17 @@ export const StyledCard = styled(Card)(({ theme }) => {
     }
   `;
 });
-export const StyledCardFooter = styled(CardFooter)(() => {
+StyledNodeTemplate.defaultProps = defaultThemeProp;
+export const StyledNodeTemplateFooter = styled(CardFooter)(({ theme }) => {
     return css `
     margin-top: auto;
-    &:not(${StyledCard} ${StyledCard} > &) {
-      padding: 0.5rem;
+    &:not(${StyledNodeTemplate} ${StyledNodeTemplate} > &) {
+      padding: ${theme.base.spacing};
     }
   `;
 });
-StyledCard.defaultProps = defaultThemeProp;
-export const StyledCardContent = styled.div(({ theme }) => {
+StyledNodeTemplateFooter.defaultProps = defaultThemeProp;
+export const StyledNodeTempleteContent = styled.div(({ theme }) => {
     return css `
     padding: ${theme.base.spacing};
     padding-block-start: 0;
@@ -103,7 +113,7 @@ export const StyledCardContent = styled.div(({ theme }) => {
     word-wrap: break-word;
   `;
 });
-StyledCardContent.defaultProps = defaultThemeProp;
+StyledNodeTempleteContent.defaultProps = defaultThemeProp;
 export const StyledAdditionalData = styled.dl `
   overflow: hidden;
 `;

package/lib/components/FlowModeller/Node/NodeTemplate.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"NodeTemplate.styles.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplate.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, Card, Text, CardFooter } from '@pega/cosmos-react-core';\n\nimport { NodeType } from './Node.types';\n\nexport const StyledCircle = styled.div(({ theme }) => {\n  return css`\n    height: 2rem;\n    width: 2rem;\n    background: var(--bg-color);\n    border-radius: 50%;\n    align-self: center;\n    &:focus {\n      outline: none;\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `;\n});\n\nStyledCircle.defaultProps = defaultThemeProp;\n\nexport const StyledLabel = styled(Text)<{ nodeType: NodeType }>(({ nodeType, theme }) => {\n  return css`\n    align-self: center;\n    ${nodeType.name === 'start'\n      ? css`\n          padding-block-end: ${theme.base.spacing};\n        `\n      : css`\n          padding-block-start: ${theme.base.spacing};\n        `}\n  `;\n});\n\nStyledLabel.defaultProps = defaultThemeProp;\n\nexport const StyledIcon = styled.div(({ theme }) => {\n  return css`\n    min-height: 2rem;\n    min-width: 2rem;\n    padding: calc(0.5 * ${theme.base.spacing});\n    margin-inline-end: ${theme.base.spacing};\n    text-align: center;\n    background-color: var(--bg-color);\n    color: var(--fg-color);\n    border-radius: ${theme.base['border-radius']};\n  `;\n});\n\nStyledIcon.defaultProps = defaultThemeProp;\n\nexport const StyledCardHeader = styled.header(({ theme }) => {\n  return css`\n    white-space: nowrap;\n    button {\n      visibility: hidden;\n      border-radius: ${theme.base['border-radius']};\n    }\n  `;\n});\n\nStyledCardHeader.defaultProps = defaultThemeProp;\n\nexport const StyledText = styled(Text)(({ theme }) => {\n  return css`\n    padding-inline-end: ${theme.base.spacing};\n    overflow: hidden;\n    min-width: 12rem;\n    text-overflow: ellipsis;\n  `;\n});\n\nStyledText.defaultProps = defaultThemeProp;\n\nexport const StyledCard = styled(Card)(({ theme }) => {\n  return css`\n    width: 17.5rem;\n    height: 7.5rem;\n    align-self: center;\n    overflow: hidden;\n    &&& {\n      border-radius: ${theme.base['border-radius']};\n    }\n    &:focus-within,\n    &:hover {\n      box-shadow: ${theme.base.shadow.focus};\n      cursor: pointer;\n      ${StyledCardHeader} {\n        button {\n          visibility: visible;\n        }\n      }\n    }\n  `;\n});\n\nexport const StyledCardFooter = styled(CardFooter)(() => {\n  return css`\n    margin-top: auto;\n    &:not(${StyledCard} ${StyledCard} > &) {\n      padding: 0.5rem;\n    }\n  `;\n});\n\nStyledCard.defaultProps = defaultThemeProp;\n\nexport const StyledCardContent = styled.div(({ theme }) => {\n  return css`\n    padding: ${theme.base.spacing};\n    padding-block-start: 0;\n    max-height: 2.5rem;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n  `;\n});\n\nStyledCardContent.defaultProps = defaultThemeProp;\n\nexport const StyledAdditionalData = styled.dl`\n  overflow: hidden;\n`;\n\nexport const StyledAdditionalDataItem = styled.div(({ theme }) => {\n  return css`\n    padding: 0 calc(0.5 * ${theme.base.spacing});\n    background-color: ${theme.base.palette['secondary-background']};\n    border-radius: ${theme.base['border-radius']};\n  `;\n});\nStyledAdditionalDataItem.defaultProps = defaultThemeProp;\n\nexport const StyledTextWithEllipsis = styled(Text)(() => {\n  return css`\n    overflow: hidden;\n    width: auto;\n    display: inline-block;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  `;\n});\nStyledTextWithEllipsis.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"NodeTemplate.styles.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplate.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, Card, Text, CardFooter } from '@pega/cosmos-react-core';\n\nimport { NodeType } from './Node.types';\n\nexport const StyledCircle = styled.div(({ theme }) => {\n  return css`\n    height: 2rem;\n    width: 2rem;\n    background: var(--bg-color);\n    border-radius: 50%;\n    align-self: center;\n    &:focus {\n      outline: none;\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `;\n});\n\nStyledCircle.defaultProps = defaultThemeProp;\n\nexport const StyledLabel = styled(Text)<{ nodeType: NodeType }>(({ nodeType, theme }) => {\n  return css`\n    align-self: center;\n    ${nodeType.name === 'start'\n      ? css`\n          padding-block-end: ${theme.base.spacing};\n        `\n      : css`\n          padding-block-start: ${theme.base.spacing};\n        `}\n  `;\n});\n\nStyledLabel.defaultProps = defaultThemeProp;\n\nexport const StyledIcon = styled.div(({ theme }) => {\n  return css`\n    min-height: 2rem;\n    min-width: 2rem;\n    padding: calc(0.5 * ${theme.base.spacing});\n    margin-inline-end: ${theme.base.spacing};\n    text-align: center;\n    background-color: var(--bg-color);\n    color: var(--fg-color);\n    border-radius: ${theme.base['border-radius']};\n  `;\n});\n\nStyledIcon.defaultProps = defaultThemeProp;\n\nexport const StyledNodeTemplateHeader = styled.header(({ theme }) => {\n  return css`\n    white-space: nowrap;\n    button {\n      visibility: hidden;\n      border-radius: ${theme.base['border-radius']};\n    }\n  `;\n});\n\nStyledNodeTemplateHeader.defaultProps = defaultThemeProp;\n\nexport const StyledText = styled(Text)(({ theme }) => {\n  return css`\n    padding-inline-end: ${theme.base.spacing};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 24ch;\n  `;\n});\n\nStyledText.defaultProps = defaultThemeProp;\n\nexport const StyledNodeTemplate = styled(Card)<{ highlight: boolean }>(({ highlight, theme }) => {\n  return css`\n    width: 17.5rem;\n    height: 7.5rem;\n    align-self: center;\n    overflow: hidden;\n    ${highlight &&\n    css`\n      &&& {\n        color: ${theme.base.colors.black};\n        background-color: ${theme.base.colors.red['extra-light']};\n        border-radius: 0.25rem;\n        box-shadow: 0 0 0 0.125rem ${theme.base.colors.red.medium};\n      }\n    `}\n    &&& {\n      border-radius: ${theme.base['border-radius']};\n    }\n    &:focus-within,\n    &:hover {\n      box-shadow: ${theme.base.shadow.focus};\n      cursor: pointer;\n      ${StyledNodeTemplateHeader} {\n        button {\n          visibility: visible;\n        }\n      }\n    }\n  `;\n});\n\nStyledNodeTemplate.defaultProps = defaultThemeProp;\n\nexport const StyledNodeTemplateFooter = styled(CardFooter)(({ theme }) => {\n  return css`\n    margin-top: auto;\n    &:not(${StyledNodeTemplate} ${StyledNodeTemplate} > &) {\n      padding: ${theme.base.spacing};\n    }\n  `;\n});\n\nStyledNodeTemplateFooter.defaultProps = defaultThemeProp;\n\nexport const StyledNodeTempleteContent = styled.div(({ theme }) => {\n  return css`\n    padding: ${theme.base.spacing};\n    padding-block-start: 0;\n    max-height: 2.5rem;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n  `;\n});\n\nStyledNodeTempleteContent.defaultProps = defaultThemeProp;\n\nexport const StyledAdditionalData = styled.dl`\n  overflow: hidden;\n`;\n\nexport const StyledAdditionalDataItem = styled.div(({ theme }) => {\n  return css`\n    padding: 0 calc(0.5 * ${theme.base.spacing});\n    background-color: ${theme.base.palette['secondary-background']};\n    border-radius: ${theme.base['border-radius']};\n  `;\n});\n\nStyledAdditionalDataItem.defaultProps = defaultThemeProp;\n\nexport const StyledTextWithEllipsis = styled(Text)(() => {\n  return css`\n    overflow: hidden;\n    width: auto;\n    display: inline-block;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  `;\n});\n\nStyledTextWithEllipsis.defaultProps = defaultThemeProp;\n"]}

package/lib/components/FlowModeller/Node/NodeTemplates.d.ts

@@ -1,6 +1,6 @@
 import { PropsWithoutRef } from 'react';
 import { NodeProps, NodeComponentProps } from './Node.types';
-export declare const DefaultNode: import("react").ForwardRefExoticComponent<Pick<NodeComponentProps, "description" | "data" | "label" | "id" | "type" | "onClick" | "actions" | "additionalData" | "onActionClick"> & import("react").RefAttributes<HTMLElement>>;
+export declare const DefaultNode: ({ id, label, type, description, additionalData, actions, onActionClick, onClick, onDelete, reference, error, referencedNode, ...restProps }: NodeComponentProps) => JSX.Element;
 export declare const StartNode: ({ type, label }: PropsWithoutRef<NodeProps>) => JSX.Element;
 export declare const EndNode: ({ type, label }: PropsWithoutRef<NodeProps>) => JSX.Element;
 //# sourceMappingURL=NodeTemplates.d.ts.map

package/lib/components/FlowModeller/Node/NodeTemplates.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeTemplates.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplates.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EAOhB,MAAM,OAAO,CAAC;AA2Bf,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAA2B,MAAM,cAAc,CAAC;AA8DtF,eAAO,MAAM,WAAW,iOAuGvB,CAAC;AAEF,eAAO,MAAM,SAAS,oBAAqB,gBAAgB,SAAS,CAAC,gBAmBpE,CAAC;AAEF,eAAO,MAAM,OAAO,oBAAqB,gBAAgB,SAAS,CAAC,gBAmBlE,CAAC"}
+{"version":3,"file":"NodeTemplates.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplates.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EAQhB,MAAM,OAAO,CAAC;AA8Bf,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAA2B,MAAM,cAAc,CAAC;AA8DtF,eAAO,MAAM,WAAW,gJAcrB,kBAAkB,gBAsIpB,CAAC;AAEF,eAAO,MAAM,SAAS,oBAAqB,gBAAgB,SAAS,CAAC,gBAgBpE,CAAC;AAEF,eAAO,MAAM,OAAO,oBAAqB,gBAAgB,SAAS,CAAC,gBAgBlE,CAAC"}

package/lib/components/FlowModeller/Node/NodeTemplates.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, forwardRef } from 'react';
+import { useCallback, useEffect, useContext } from 'react';
 import { readableColor } from 'polished';
 import { MenuButton, Icon, Flex, Tooltip, useElement, useI18n, cap, Text } from '@pega/cosmos-react-core';
-import { StyledLabel, StyledCircle, StyledIcon, StyledCardHeader, StyledCardContent, StyledCard, StyledText, StyledTextWithEllipsis, StyledAdditionalData, StyledCardFooter, StyledAdditionalDataItem } from './NodeTemplate.styles';
+import { colorMap } from '../../../utils';
+import FlowModellerContext from '../FlowModellerContext';
+import { StyledLabel, StyledCircle, StyledIcon, StyledNodeTemplateHeader, StyledNodeTempleteContent, StyledNodeTemplate, StyledText, StyledTextWithEllipsis, StyledAdditionalData, StyledNodeTemplateFooter, StyledAdditionalDataItem } from './NodeTemplate.styles';
 const MetaListItem = ({ label, value }) => {
     const [nodeAdditionalDataItem, setNodeAdditionalDataItem] = useElement();
-    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { as: StyledAdditionalDataItem, container: { wrap: 'nowrap', pad: 0.25, gap: 0.25 }, item: { grow: 1 }, ref: setNodeAdditionalDataItem, children: [_jsx(StyledTextWithEllipsis, { as: 'dd', children: label }, void 0), _jsx(Text, { role: 'separator', variant: 'secondary', "aria-hidden": 'true', children: ":\u00A0" }, void 0), _jsx(StyledTextWithEllipsis, { as: 'dt', children: value }, void 0)] }, void 0), _jsx(Tooltip, { target: nodeAdditionalDataItem, hideDelay: 'none', children: `${label}:${value}` }, void 0)] }, void 0));
+    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { as: StyledAdditionalDataItem, container: { wrap: 'nowrap', pad: 0.25, gap: 0.25 }, item: { grow: 1 }, ref: setNodeAdditionalDataItem, children: [_jsx(StyledTextWithEllipsis, { as: 'dd', children: label }), _jsx(Text, { role: 'separator', variant: 'secondary', "aria-hidden": 'true', children: ":\u00A0" }), _jsx(StyledTextWithEllipsis, { as: 'dt', children: value })] }), _jsx(Tooltip, { target: nodeAdditionalDataItem, hideDelay: 'none', children: `${label}:${value}` })] }));
 };
 const MetaList = ({ metadata }) => {
     const [nodeAdditionalData, setNodeAdditionalData] = useElement();
@@ -21,9 +23,9 @@ const MetaList = ({ metadata }) => {
                     return;
                 }
                 return _jsx(MetaListItem, { ...data }, data.id);
-            }), metadata && metadata.length > 2 && (_jsxs(_Fragment, { children: [_jsx(Flex, { as: StyledAdditionalDataItem, container: { pad: 0.25 }, item: { grow: 1, shrink: 0 }, ref: setNodeAdditionalData, children: _jsx(StyledTextWithEllipsis, { as: 'dt', children: `+${metadata?.length - 2}` }, void 0) }, void 0), additionalDataValue && (_jsx(Tooltip, { target: nodeAdditionalData, hideDelay: 'none', children: additionalDataValue }, void 0))] }, void 0))] }, void 0));
+            }), metadata && metadata.length > 2 && (_jsxs(_Fragment, { children: [_jsx(Flex, { as: StyledAdditionalDataItem, container: { pad: 0.25 }, item: { grow: 1, shrink: 0 }, ref: setNodeAdditionalData, children: _jsx(StyledTextWithEllipsis, { as: 'dt', children: `+${metadata?.length - 2}` }) }), additionalDataValue && (_jsx(Tooltip, { target: nodeAdditionalData, hideDelay: 'none', children: additionalDataValue }))] }))] }));
 };
-export const DefaultNode = forwardRef(({ id, label, type, description, additionalData, actions, onActionClick, onClick, ...restProps }, ref) => {
+export const DefaultNode = ({ id, label, type, description, additionalData, actions, onActionClick, onClick, onDelete, reference, error, referencedNode, ...restProps }) => {
     const t = useI18n();
     const actionItems = actions?.map(actionItem => {
         return {
@@ -35,30 +37,52 @@ export const DefaultNode = forwardRef(({ id, label, type, description, additiona
             }
         };
     });
+    const references = referencedNode && [
+        { id: referencedNode?.id, label: t('reference'), value: referencedNode?.label }
+    ];
+    if (onDelete !== undefined) {
+        actionItems?.push({
+            id: 'flowmodeller-delete-node',
+            primary: t('delete'),
+            onClick: (actionId, e) => {
+                e.stopPropagation();
+                onDelete?.({ actionId, nodeId: id }, e);
+            }
+        });
+    }
     const handleEnterKeyDown = useCallback((e) => {
         if (e.key === 'Enter' && !e.shiftKey) {
-            onClick?.(id);
+            onClick?.(id, e);
         }
     }, [onClick]);
     const [nodeLabel, setNodeLabel] = useElement();
     const [nodeDescription, setNodeDescription] = useElement();
     const [nodeIcon, setNodeIcon] = useElement();
-    const color = readableColor(type.color);
-    return (_jsxs(StyledCard, { "aria-label": label, onClick: () => onClick?.(id), onKeyDown: handleEnterKeyDown, ref: ref, ...restProps, children: [_jsxs(Flex, { as: StyledCardHeader, container: { alignItems: 'center', pad: 1 }, children: [_jsx(StyledIcon, { id: id, style: {
-                            '--bg-color': type.color,
-                            '--fg-color': color
-                        }, ref: setNodeIcon, children: _jsx(Icon, { name: type.icon }, void 0) }, void 0), _jsx(Tooltip, { target: nodeIcon, hideDelay: 'none', children: cap(type.name) }, void 0), _jsx(StyledText, { variant: 'h4', ref: setNodeLabel, children: label }, void 0), _jsx(Tooltip, { describeTarget: false, target: nodeLabel, hideDelay: 'none', children: label }, void 0), actionItems && (_jsx(MenuButton, { portal: true, variant: 'simple', text: t('actions'), icon: 'more', iconOnly: true, onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), menu: {
+    const [nodeErrorToolTip, setNodeErrorToolTip] = useElement();
+    const color = readableColor(colorMap[type.color]);
+    const { readOnly, highlights } = useContext(FlowModellerContext);
+    useEffect(() => {
+        if (error) {
+            setNodeDescription(null);
+            setNodeLabel(null);
+            setNodeIcon(null);
+        }
+    }, [error]);
+    return (_jsxs(StyledNodeTemplate, { "aria-label": error || label, onClick: (e) => onClick?.(id, e), onKeyDown: handleEnterKeyDown, ref: setNodeErrorToolTip, highlight: error ? true : !!highlights?.nodes?.[id], error: error, id: `modeller-node-${id}`, ...restProps, children: [_jsxs(Flex, { as: StyledNodeTemplateHeader, container: { alignItems: 'center', pad: 1, justify: 'between' }, children: [_jsxs(Flex, { container: { alignItems: 'center' }, children: [_jsx(StyledIcon, { id: id, style: {
+                                    '--bg-color': colorMap[type.color],
+                                    '--fg-color': color
+                                }, ref: setNodeIcon, children: _jsx(Icon, { name: type.icon }) }), _jsx(Tooltip, { target: nodeIcon, hideDelay: 'none', children: cap(type.name) }), _jsx(StyledText, { variant: 'h4', ref: setNodeLabel, children: label }), _jsx(Tooltip, { describeTarget: false, target: nodeLabel, hideDelay: 'none', children: label })] }), !readOnly && actionItems && (_jsx(MenuButton, { portal: true, variant: 'simple', text: t('actions'), icon: 'more', iconOnly: true, onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), menu: {
                             items: actionItems
-                        } }, void 0))] }, void 0), description && (_jsxs(_Fragment, { children: [_jsx(StyledCardContent, { ref: setNodeDescription, children: description }, void 0), _jsx(Tooltip, { describeTarget: false, target: nodeDescription, hideDelay: 'none', children: description }, void 0)] }, void 0)), additionalData && (_jsx(StyledCardFooter, { children: _jsx(MetaList, { metadata: additionalData }, void 0) }, void 0))] }, void 0));
-});
+                        } }))] }), description && (_jsxs(_Fragment, { children: [_jsx(StyledNodeTempleteContent, { ref: setNodeDescription, children: description }), _jsx(Tooltip, { describeTarget: false, target: nodeDescription, hideDelay: 'none', children: description })] })), additionalData && type.minConnectors > 0 && (_jsx(StyledNodeTemplateFooter, { children: _jsx(MetaList, { metadata: additionalData }) })), references && type.minConnectors < 1 && (_jsx(StyledNodeTemplateFooter, { children: _jsx(MetaList, { metadata: references }) })), error && (_jsx(Tooltip, { target: nodeErrorToolTip, hideDelay: 'none', children: error }))] }));
+};
 export const StartNode = ({ type, label }) => {
-    return (_jsxs(Flex, { container: { justify: 'center', direction: 'column' }, children: [_jsx(Flex, { as: StyledLabel, nodeType: type, children: label }, void 0), _jsx(Flex, { as: StyledCircle, style: {
-                    '--bg-color': type.color
-                }, tabIndex: '0', "aria-label": label, role: 'button' }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { justify: 'center', direction: 'column' }, children: [_jsx(StyledLabel, { nodeType: type, children: label }), _jsx(StyledCircle, { style: {
+                    '--bg-color': colorMap[type.color]
+                }, tabIndex: 0, "aria-label": label, role: 'button' })] }));
 };
 export const EndNode = ({ type, label }) => {
-    return (_jsxs(Flex, { container: { justify: 'center', direction: 'column' }, children: [_jsx(Flex, { as: StyledCircle, style: {
-                    '--bg-color': type.color
-                }, tabIndex: '0', "aria-label": label, role: 'button' }, void 0), _jsx(Flex, { as: StyledLabel, nodeType: type, children: label }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { justify: 'center', direction: 'column' }, children: [_jsx(StyledCircle, { style: {
+                    '--bg-color': colorMap[type.color]
+                }, tabIndex: 0, "aria-label": label, role: 'button' }), _jsx(StyledLabel, { nodeType: type, children: label })] }));
 };
 //# sourceMappingURL=NodeTemplates.js.map

package/lib/components/FlowModeller/Node/NodeTemplates.js.map

@@ -1 +1 @@
-{"version":3,"file":"NodeTemplates.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplates.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  PropsWithoutRef,\n  CSSProperties,\n  useCallback,\n  MouseEvent,\n  KeyboardEvent,\n  forwardRef,\n  FC\n} from 'react';\nimport { readableColor } from 'polished';\n\nimport {\n  MenuButton,\n  Icon,\n  Flex,\n  Tooltip,\n  useElement,\n  useI18n,\n  cap,\n  Text\n} from '@pega/cosmos-react-core';\n\nimport {\n  StyledLabel,\n  StyledCircle,\n  StyledIcon,\n  StyledCardHeader,\n  StyledCardContent,\n  StyledCard,\n  StyledText,\n  StyledTextWithEllipsis,\n  StyledAdditionalData,\n  StyledCardFooter,\n  StyledAdditionalDataItem\n} from './NodeTemplate.styles';\nimport { NodeProps, NodeComponentProps, AdditionalDataItemProps } from './Node.types';\n\nconst MetaListItem = ({ label, value }: AdditionalDataItemProps) => {\n  const [nodeAdditionalDataItem, setNodeAdditionalDataItem] = useElement();\n  return (\n    <>\n      <Flex\n        as={StyledAdditionalDataItem}\n        container={{ wrap: 'nowrap', pad: 0.25, gap: 0.25 }}\n        item={{ grow: 1 }}\n        ref={setNodeAdditionalDataItem}\n      >\n        <StyledTextWithEllipsis as='dd'>{label}</StyledTextWithEllipsis>\n        <Text role='separator' variant='secondary' aria-hidden='true'>\n          :&nbsp;\n        </Text>\n        <StyledTextWithEllipsis as='dt'>{value}</StyledTextWithEllipsis>\n      </Flex>\n      <Tooltip target={nodeAdditionalDataItem} hideDelay='none'>\n        {`${label}:${value}`}\n      </Tooltip>\n    </>\n  );\n};\n\nconst MetaList: FC<{ metadata: NodeProps['additionalData'] }> = ({ metadata }) => {\n  const [nodeAdditionalData, setNodeAdditionalData] = useElement();\n  let additionalDataValue = '';\n  metadata?.forEach((item: AdditionalDataItemProps, index: number) => {\n    if (index > 1) {\n      additionalDataValue += `${item.label}: ${item.value}\n      `;\n    }\n  });\n  return (\n    <Flex as={StyledAdditionalData} container={{ wrap: 'nowrap', colGap: 1, rowGap: 0.25 }}>\n      {metadata?.map((data: AdditionalDataItemProps, index: number) => {\n        if (index >= 2) {\n          return;\n        }\n        return <MetaListItem key={data.id} {...data} />;\n      })}\n      {metadata && metadata.length > 2 && (\n        <>\n          <Flex\n            as={StyledAdditionalDataItem}\n            container={{ pad: 0.25 }}\n            item={{ grow: 1, shrink: 0 }}\n            ref={setNodeAdditionalData}\n          >\n            <StyledTextWithEllipsis as='dt'>{`+${metadata?.length - 2}`}</StyledTextWithEllipsis>\n          </Flex>\n          {additionalDataValue && (\n            <Tooltip target={nodeAdditionalData} hideDelay='none'>\n              {additionalDataValue}\n            </Tooltip>\n          )}\n        </>\n      )}\n    </Flex>\n  );\n};\nexport const DefaultNode = forwardRef(\n  (\n    {\n      id,\n      label,\n      type,\n      description,\n      additionalData,\n      actions,\n      onActionClick,\n      onClick,\n      ...restProps\n    }: PropsWithoutRef<NodeComponentProps>,\n    ref: NodeComponentProps['ref']\n  ) => {\n    const t = useI18n();\n    const actionItems = actions?.map(actionItem => {\n      return {\n        id: actionItem.id,\n        primary: actionItem.text,\n        onClick: (actionId: string, e: MouseEvent) => {\n          e.stopPropagation();\n          onActionClick?.({ actionId, nodeId: id }, e);\n        }\n      };\n    });\n\n    const handleEnterKeyDown = useCallback(\n      (e: KeyboardEvent) => {\n        if (e.key === 'Enter' && !e.shiftKey) {\n          onClick?.(id);\n        }\n      },\n      [onClick]\n    );\n\n    const [nodeLabel, setNodeLabel] = useElement();\n    const [nodeDescription, setNodeDescription] = useElement();\n\n    const [nodeIcon, setNodeIcon] = useElement();\n    const color = readableColor(type.color);\n    return (\n      <StyledCard\n        aria-label={label}\n        onClick={() => onClick?.(id)}\n        onKeyDown={handleEnterKeyDown}\n        ref={ref}\n        {...restProps}\n      >\n        <Flex as={StyledCardHeader} container={{ alignItems: 'center', pad: 1 }}>\n          <StyledIcon\n            id={id}\n            style={\n              {\n                '--bg-color': type.color,\n                '--fg-color': color\n              } as CSSProperties\n            }\n            ref={setNodeIcon}\n          >\n            <Icon name={type.icon} />\n          </StyledIcon>\n          <Tooltip target={nodeIcon} hideDelay='none'>\n            {cap(type.name)}\n          </Tooltip>\n          <StyledText variant='h4' ref={setNodeLabel}>\n            {label}\n          </StyledText>\n          <Tooltip describeTarget={false} target={nodeLabel} hideDelay='none'>\n            {label}\n          </Tooltip>\n\n          {actionItems && (\n            <MenuButton\n              portal\n              variant='simple'\n              text={t('actions')}\n              icon='more'\n              iconOnly\n              onClick={(e: MouseEvent) => e.stopPropagation()}\n              onKeyDown={(e: KeyboardEvent) => e.stopPropagation()}\n              menu={{\n                items: actionItems\n              }}\n            />\n          )}\n        </Flex>\n        {description && (\n          <>\n            <StyledCardContent ref={setNodeDescription}>{description}</StyledCardContent>\n            <Tooltip describeTarget={false} target={nodeDescription} hideDelay='none'>\n              {description}\n            </Tooltip>\n          </>\n        )}\n        {additionalData && (\n          <StyledCardFooter>\n            <MetaList metadata={additionalData} />\n          </StyledCardFooter>\n        )}\n      </StyledCard>\n    );\n  }\n);\n\nexport const StartNode = ({ type, label }: PropsWithoutRef<NodeProps>) => {\n  return (\n    <Flex container={{ justify: 'center', direction: 'column' }}>\n      <Flex as={StyledLabel} nodeType={type}>\n        {label}\n      </Flex>\n      <Flex\n        as={StyledCircle}\n        style={\n          {\n            '--bg-color': type.color\n          } as CSSProperties\n        }\n        tabIndex='0'\n        aria-label={label}\n        role='button'\n      />\n    </Flex>\n  );\n};\n\nexport const EndNode = ({ type, label }: PropsWithoutRef<NodeProps>) => {\n  return (\n    <Flex container={{ justify: 'center', direction: 'column' }}>\n      <Flex\n        as={StyledCircle}\n        style={\n          {\n            '--bg-color': type.color\n          } as CSSProperties\n        }\n        tabIndex='0'\n        aria-label={label}\n        role='button'\n      />\n      <Flex as={StyledLabel} nodeType={type}>\n        {label}\n      </Flex>\n    </Flex>\n  );\n};\n"]}
+{"version":3,"file":"NodeTemplates.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplates.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  PropsWithoutRef,\n  CSSProperties,\n  useCallback,\n  MouseEvent,\n  KeyboardEvent,\n  FC,\n  useEffect,\n  useContext\n} from 'react';\nimport { readableColor } from 'polished';\n\nimport {\n  MenuButton,\n  Icon,\n  Flex,\n  Tooltip,\n  useElement,\n  useI18n,\n  cap,\n  Text\n} from '@pega/cosmos-react-core';\n\nimport { colorMap } from '../../../utils';\nimport FlowModellerContext from '../FlowModellerContext';\n\nimport {\n  StyledLabel,\n  StyledCircle,\n  StyledIcon,\n  StyledNodeTemplateHeader,\n  StyledNodeTempleteContent,\n  StyledNodeTemplate,\n  StyledText,\n  StyledTextWithEllipsis,\n  StyledAdditionalData,\n  StyledNodeTemplateFooter,\n  StyledAdditionalDataItem\n} from './NodeTemplate.styles';\nimport { NodeProps, NodeComponentProps, AdditionalDataItemProps } from './Node.types';\n\nconst MetaListItem = ({ label, value }: AdditionalDataItemProps) => {\n  const [nodeAdditionalDataItem, setNodeAdditionalDataItem] = useElement();\n  return (\n    <>\n      <Flex\n        as={StyledAdditionalDataItem}\n        container={{ wrap: 'nowrap', pad: 0.25, gap: 0.25 }}\n        item={{ grow: 1 }}\n        ref={setNodeAdditionalDataItem}\n      >\n        <StyledTextWithEllipsis as='dd'>{label}</StyledTextWithEllipsis>\n        <Text role='separator' variant='secondary' aria-hidden='true'>\n          :&nbsp;\n        </Text>\n        <StyledTextWithEllipsis as='dt'>{value}</StyledTextWithEllipsis>\n      </Flex>\n      <Tooltip target={nodeAdditionalDataItem} hideDelay='none'>\n        {`${label}:${value}`}\n      </Tooltip>\n    </>\n  );\n};\n\nconst MetaList: FC<{ metadata: NodeProps['additionalData'] }> = ({ metadata }) => {\n  const [nodeAdditionalData, setNodeAdditionalData] = useElement();\n  let additionalDataValue = '';\n  metadata?.forEach((item: AdditionalDataItemProps, index: number) => {\n    if (index > 1) {\n      additionalDataValue += `${item.label}: ${item.value}\n      `;\n    }\n  });\n  return (\n    <Flex as={StyledAdditionalData} container={{ wrap: 'nowrap', colGap: 1, rowGap: 0.25 }}>\n      {metadata?.map((data: AdditionalDataItemProps, index: number) => {\n        if (index >= 2) {\n          return;\n        }\n        return <MetaListItem key={data.id} {...data} />;\n      })}\n      {metadata && metadata.length > 2 && (\n        <>\n          <Flex\n            as={StyledAdditionalDataItem}\n            container={{ pad: 0.25 }}\n            item={{ grow: 1, shrink: 0 }}\n            ref={setNodeAdditionalData}\n          >\n            <StyledTextWithEllipsis as='dt'>{`+${metadata?.length - 2}`}</StyledTextWithEllipsis>\n          </Flex>\n          {additionalDataValue && (\n            <Tooltip target={nodeAdditionalData} hideDelay='none'>\n              {additionalDataValue}\n            </Tooltip>\n          )}\n        </>\n      )}\n    </Flex>\n  );\n};\nexport const DefaultNode = ({\n  id,\n  label,\n  type,\n  description,\n  additionalData,\n  actions,\n  onActionClick,\n  onClick,\n  onDelete,\n  reference,\n  error,\n  referencedNode,\n  ...restProps\n}: NodeComponentProps) => {\n  const t = useI18n();\n\n  const actionItems = actions?.map(actionItem => {\n    return {\n      id: actionItem.id,\n      primary: actionItem.text,\n      onClick: (actionId: string, e: MouseEvent) => {\n        e.stopPropagation();\n        onActionClick?.({ actionId, nodeId: id }, e);\n      }\n    };\n  });\n\n  const references = referencedNode && [\n    { id: referencedNode?.id, label: t('reference'), value: referencedNode?.label }\n  ];\n\n  if (onDelete !== undefined) {\n    actionItems?.push({\n      id: 'flowmodeller-delete-node',\n      primary: t('delete'),\n      onClick: (actionId: string, e: MouseEvent) => {\n        e.stopPropagation();\n        onDelete?.({ actionId, nodeId: id }, e);\n      }\n    });\n  }\n\n  const handleEnterKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === 'Enter' && !e.shiftKey) {\n        onClick?.(id, e);\n      }\n    },\n    [onClick]\n  );\n\n  const [nodeLabel, setNodeLabel] = useElement();\n  const [nodeDescription, setNodeDescription] = useElement();\n\n  const [nodeIcon, setNodeIcon] = useElement();\n  const [nodeErrorToolTip, setNodeErrorToolTip] = useElement();\n  const color = readableColor(colorMap[type.color]);\n  const { readOnly, highlights } = useContext(FlowModellerContext);\n\n  useEffect(() => {\n    if (error) {\n      setNodeDescription(null);\n      setNodeLabel(null);\n      setNodeIcon(null);\n    }\n  }, [error]);\n\n  return (\n    <StyledNodeTemplate\n      aria-label={error || label}\n      onClick={(e: MouseEvent) => onClick?.(id, e)}\n      onKeyDown={handleEnterKeyDown}\n      ref={setNodeErrorToolTip}\n      highlight={error ? true : !!highlights?.nodes?.[id]}\n      error={error}\n      id={`modeller-node-${id}`}\n      {...restProps}\n    >\n      <Flex\n        as={StyledNodeTemplateHeader}\n        container={{ alignItems: 'center', pad: 1, justify: 'between' }}\n      >\n        <Flex container={{ alignItems: 'center' }}>\n          <StyledIcon\n            id={id}\n            style={\n              {\n                '--bg-color': colorMap[type.color],\n                '--fg-color': color\n              } as CSSProperties\n            }\n            ref={setNodeIcon}\n          >\n            <Icon name={type.icon} />\n          </StyledIcon>\n          <Tooltip target={nodeIcon} hideDelay='none'>\n            {cap(type.name)}\n          </Tooltip>\n          <StyledText variant='h4' ref={setNodeLabel}>\n            {label}\n          </StyledText>\n          <Tooltip describeTarget={false} target={nodeLabel} hideDelay='none'>\n            {label}\n          </Tooltip>\n        </Flex>\n        {!readOnly && actionItems && (\n          <MenuButton\n            portal\n            variant='simple'\n            text={t('actions')}\n            icon='more'\n            iconOnly\n            onClick={(e: MouseEvent) => e.stopPropagation()}\n            onKeyDown={(e: KeyboardEvent) => e.stopPropagation()}\n            menu={{\n              items: actionItems\n            }}\n          />\n        )}\n      </Flex>\n      {description && (\n        <>\n          <StyledNodeTempleteContent ref={setNodeDescription}>\n            {description}\n          </StyledNodeTempleteContent>\n          <Tooltip describeTarget={false} target={nodeDescription} hideDelay='none'>\n            {description}\n          </Tooltip>\n        </>\n      )}\n      {additionalData && type.minConnectors > 0 && (\n        <StyledNodeTemplateFooter>\n          <MetaList metadata={additionalData} />\n        </StyledNodeTemplateFooter>\n      )}\n      {references && type.minConnectors < 1 && (\n        <StyledNodeTemplateFooter>\n          <MetaList metadata={references} />\n        </StyledNodeTemplateFooter>\n      )}\n      {error && (\n        <Tooltip target={nodeErrorToolTip} hideDelay='none'>\n          {error}\n        </Tooltip>\n      )}\n    </StyledNodeTemplate>\n  );\n};\n\nexport const StartNode = ({ type, label }: PropsWithoutRef<NodeProps>) => {\n  return (\n    <Flex container={{ justify: 'center', direction: 'column' }}>\n      <StyledLabel nodeType={type}>{label}</StyledLabel>\n      <StyledCircle\n        style={\n          {\n            '--bg-color': colorMap[type.color]\n          } as CSSProperties\n        }\n        tabIndex={0}\n        aria-label={label}\n        role='button'\n      />\n    </Flex>\n  );\n};\n\nexport const EndNode = ({ type, label }: PropsWithoutRef<NodeProps>) => {\n  return (\n    <Flex container={{ justify: 'center', direction: 'column' }}>\n      <StyledCircle\n        style={\n          {\n            '--bg-color': colorMap[type.color]\n          } as CSSProperties\n        }\n        tabIndex={0}\n        aria-label={label}\n        role='button'\n      />\n      <StyledLabel nodeType={type}>{label}</StyledLabel>\n    </Flex>\n  );\n};\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Node.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/Node.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAiC,MAAM,OAAO,CAAC;AAU1D,OAAO,EAAE,IAAI,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAE3D,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAiCtB,CAAC;AAEH,eAAe,IAAI,CAAC"}

package/lib/components/FlowModeller/Node.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useCallback } from 'react';
+import { START_NODETYPE, STOP_NODETYPE } from './Node/Node.types';
+import { DefaultNode, EndNode, StartNode } from './Node/NodeTemplates';
+const Node = memo(props => {
+    const { id, type, label, data, ...restProps } = props;
+    const clickHandler = useCallback((nodeId, e) => {
+        data?.onClick?.(nodeId, e);
+    }, [data?.onClick]);
+    if (!type) {
+        return null;
+    }
+    if (type?.id === START_NODETYPE.id) {
+        return _jsx(StartNode, { id: id, type: type, label: label.toUpperCase() });
+    }
+    if (type?.id === STOP_NODETYPE.id) {
+        return _jsx(EndNode, { id: id, type: type, label: label.toUpperCase() });
+    }
+    return (_jsx(DefaultNode, { ...restProps, id: id, label: label, type: type, onClick: clickHandler, onDelete: data?.onDelete, onActionClick: data?.onActionClick, actions: data?.actions }));
+});
+export default Node;
+//# sourceMappingURL=Node.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Node.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/Node.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,IAAI,EAAE,WAAW,EAAc,MAAM,OAAO,CAAC;AAE1D,OAAO,EAIL,cAAc,EACd,aAAa,EACd,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGvE,MAAM,IAAI,GAAkB,IAAI,CAAC,KAAK,CAAC,EAAE;IACvC,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,GAC3C,KAAsD,CAAC;IAEzD,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,MAAc,EAAE,CAAa,EAAE,EAAE;QAChC,IAAI,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;IAC7B,CAAC,EACD,CAAC,IAAI,EAAE,OAAO,CAAC,CAChB,CAAC;IAEF,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,IAAI,CAAC;KACb;IAED,IAAI,IAAI,EAAE,EAAE,KAAK,cAAc,CAAC,EAAE,EAAE;QAClC,OAAO,KAAC,SAAS,IAAC,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,WAAW,EAAE,GAAI,CAAC;KACtE;IACD,IAAI,IAAI,EAAE,EAAE,KAAK,aAAa,CAAC,EAAE,EAAE;QACjC,OAAO,KAAC,OAAO,IAAC,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,WAAW,EAAE,GAAI,CAAC;KACpE;IACD,OAAO,CACL,KAAC,WAAW,OACN,SAAS,EACb,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,YAA6C,EACtD,QAAQ,EAAE,IAAI,EAAE,QAAQ,EACxB,aAAa,EAAE,IAAI,EAAE,aAAa,EAClC,OAAO,EAAE,IAAI,EAAE,OAAO,GACtB,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,IAAI,CAAC","sourcesContent":["import { FC, memo, useCallback, MouseEvent } from 'react';\n\nimport {\n  ModellerNodeComponentProps,\n  NodeComponentData,\n  NodeComponentProps,\n  START_NODETYPE,\n  STOP_NODETYPE\n} from './Node/Node.types';\nimport { DefaultNode, EndNode, StartNode } from './Node/NodeTemplates';\nimport { Node as GraphNode } from './Renderer/Utils/Graph';\n\nconst Node: FC<GraphNode> = memo(props => {\n  const { id, type, label, data, ...restProps } =\n    props as ModellerNodeComponentProps<NodeComponentData>;\n\n  const clickHandler = useCallback(\n    (nodeId: string, e: MouseEvent) => {\n      data?.onClick?.(nodeId, e);\n    },\n    [data?.onClick]\n  );\n\n  if (!type) {\n    return null;\n  }\n\n  if (type?.id === START_NODETYPE.id) {\n    return <StartNode id={id} type={type} label={label.toUpperCase()} />;\n  }\n  if (type?.id === STOP_NODETYPE.id) {\n    return <EndNode id={id} type={type} label={label.toUpperCase()} />;\n  }\n  return (\n    <DefaultNode\n      {...restProps}\n      id={id}\n      label={label}\n      type={type}\n      onClick={clickHandler as NodeComponentProps['onClick']}\n      onDelete={data?.onDelete}\n      onActionClick={data?.onActionClick}\n      actions={data?.actions}\n    />\n  );\n});\n\nexport default Node;\n"]}

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

@@ -1 +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"}
+{"version":3,"file":"Renderer.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAc,MAAM,OAAO,CAAC;AAOvC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAwBjD,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CA+C/B,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -1,17 +1,48 @@
 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 { createElement as _createElement } from "react";
+import { useContext } from 'react';
+import styled, { css } from 'styled-components';
+import { Flex } from '@pega/cosmos-react-core';
+import FlowModellerContext from '../FlowModellerContext';
 import GraphLayout from './Utils/GraphLayout';
+import { DirectedGraph } from './Utils/Graph';
 const StyledWrapper = styled.div `
   position: relative;
   width: 100%;
   height: 100%;
 `;
-const Renderer = ({ graphData, connector, node }) => {
+const StyledContentWrapper = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+`;
+const StyledNodeWrapper = styled(StyledContentWrapper)(() => {
+    return css `
+    width: var(--width);
+    height: var(--height);
+    transform: translate(var(--xPos), var(--yPos));
+  `;
+});
+const Renderer = ({ graphData, connector: Connector, node: 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));
+    const { readOnly } = useContext(FlowModellerContext);
+    const graph = new DirectedGraph(graphData);
+    const graphDimensions = GraphLayout.plot(graphData, readOnly);
+    return (_jsxs(StyledWrapper, { children: [_jsx(StyledContentWrapper, { children: _jsx("svg", { width: graphDimensions.width, height: graphDimensions.height, viewBox: `0 0 ${graphDimensions.width} ${graphDimensions.height}`, children: Connector &&
+                        graphData.connectors.map(item => {
+                            return _createElement(Connector, { ...item, key: item.id });
+                        }) }) }), _jsx(StyledContentWrapper, { children: graphData.nodes.map(item => {
+                    let referencedNode;
+                    if (item.type?.minConnectors === 0 && item.reference) {
+                        referencedNode = graph.getNode(item.reference);
+                    }
+                    return (_jsx(Flex, { as: StyledNodeWrapper, id: item.id, style: {
+                            '--width': `${item.dimensions.width}px`,
+                            '--height': `${item.dimensions.height}px`,
+                            '--xPos': `${item.position.x}px`,
+                            '--yPos': `${item.position.y}px`
+                        }, container: { justify: 'center' }, children: Node && _jsx(Node, { ...item, referencedNode: referencedNode }) }, item.id));
+                }) })] }));
 };
 export default Renderer;
 //# sourceMappingURL=Renderer.js.map

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

@@ -1 +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"]}
+{"version":3,"file":"Renderer.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Renderer.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAM,UAAU,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C,OAAO,mBAAmB,MAAM,wBAAwB,CAAC;AAGzD,OAAO,WAAW,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9C,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAI/B,CAAC;AAEF,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAItC,CAAC;AAEF,MAAM,iBAAiB,GAAG,MAAM,CAAC,oBAAoB,CAAC,CAAC,GAAG,EAAE;IAC1D,OAAO,GAAG,CAAA;;;;GAIT,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,QAAQ,GAAsB,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE;IACtF,8BAA8B;IAC9B,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IACrD,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,SAAS,CAAC,CAAC;IAC3C,MAAM,eAAe,GAAG,WAAW,CAAC,IAAI,CAA6B,SAAS,EAAE,QAAQ,CAAC,CAAC;IAE1F,OAAO,CACL,MAAC,aAAa,eACZ,KAAC,oBAAoB,cACnB,cACE,KAAK,EAAE,eAAe,CAAC,KAAK,EAC5B,MAAM,EAAE,eAAe,CAAC,MAAM,EAC9B,OAAO,EAAE,OAAO,eAAe,CAAC,KAAK,IAAI,eAAe,CAAC,MAAM,EAAE,YAEhE,SAAS;wBACR,SAAS,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;4BAC9B,OAAO,eAAC,SAAS,OAAK,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,GAAI,CAAC;wBAC/C,CAAC,CAAC,GACA,GACe,EACvB,KAAC,oBAAoB,cAClB,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;oBAC1B,IAAI,cAAc,CAAC;oBACnB,IAAI,IAAI,CAAC,IAAI,EAAE,aAAa,KAAK,CAAC,IAAI,IAAI,CAAC,SAAS,EAAE;wBACpD,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;qBAChD;oBAED,OAAO,CACL,KAAC,IAAI,IAEH,EAAE,EAAE,iBAAiB,EACrB,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,KAAK,EAAE;4BACL,SAAS,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,IAAI;4BACvC,UAAU,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,IAAI;4BACzC,QAAQ,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI;4BAChC,QAAQ,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI;yBACjC,EACD,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,YAE/B,IAAI,IAAI,KAAC,IAAI,OAAK,IAAI,EAAE,cAAc,EAAE,cAAc,GAAI,IAXtD,IAAI,CAAC,EAAE,CAYP,CACR,CAAC;gBACJ,CAAC,CAAC,GACmB,IACT,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { FC, useContext } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex } from '@pega/cosmos-react-core';\n\nimport FlowModellerContext from '../FlowModellerContext';\n\nimport { RendererProps } from './Renderer.types';\nimport GraphLayout from './Utils/GraphLayout';\nimport { DirectedGraph } from './Utils/Graph';\n\nconst StyledWrapper = styled.div`\n  position: relative;\n  width: 100%;\n  height: 100%;\n`;\n\nconst StyledContentWrapper = styled.div`\n  position: absolute;\n  top: 0;\n  left: 0;\n`;\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 Renderer: FC<RendererProps> = ({ graphData, connector: Connector, node: Node }) => {\n  // apply the plotted positions\n  const { readOnly } = useContext(FlowModellerContext);\n  const graph = new DirectedGraph(graphData);\n  const graphDimensions = GraphLayout.plot<RendererProps['graphData']>(graphData, readOnly);\n\n  return (\n    <StyledWrapper>\n      <StyledContentWrapper>\n        <svg\n          width={graphDimensions.width}\n          height={graphDimensions.height}\n          viewBox={`0 0 ${graphDimensions.width} ${graphDimensions.height}`}\n        >\n          {Connector &&\n            graphData.connectors.map(item => {\n              return <Connector {...item} key={item.id} />;\n            })}\n        </svg>\n      </StyledContentWrapper>\n      <StyledContentWrapper>\n        {graphData.nodes.map(item => {\n          let referencedNode;\n          if (item.type?.minConnectors === 0 && item.reference) {\n            referencedNode = graph.getNode(item.reference);\n          }\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 && <Node {...item} referencedNode={referencedNode} />}\n            </Flex>\n          );\n        })}\n      </StyledContentWrapper>\n    </StyledWrapper>\n  );\n};\n\nexport default Renderer;\n"]}

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

@@ -1,18 +1,18 @@
-import { ComponentType } from 'react';
-import { GraphData } from './Utils/Graph';
+import { FC } from 'react';
+import { ConnectorProps, Node, 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>;
+    graphData: GraphData<PlottedGraphNode, PlottedGraphConnector>;
     disableAutoLayout?: boolean;
-    connector?: ComponentType<RendererConnectorProps>;
-    node?: ComponentType<RendererNodeProps>;
+    highlights?: {
+        nodes: Record<string, Node>;
+        connectors: Record<string, ConnectorProps>;
+    };
+    connector?: FC<PlottedGraphConnector>;
+    node?: FC<PlottedGraphNode>;
 }
 //# sourceMappingURL=Renderer.types.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"Renderer.types.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Renderer.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAE3B,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAChE,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,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,CAAC,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IACtC,IAAI,CAAC,EAAE,EAAE,CAAC,gBAAgB,CAAC,CAAC;CAC7B"}

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

@@ -1 +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"]}
+{"version":3,"file":"Renderer.types.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Renderer.types.ts"],"names":[],"mappings":"","sourcesContent":["import { FC } from 'react';\n\nimport { ConnectorProps, Node, 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 RendererProps {\n  graphData: GraphData<PlottedGraphNode, PlottedGraphConnector>;\n  disableAutoLayout?: boolean;\n  highlights?: {\n    nodes: Record<string, Node>;\n    connectors: Record<string, ConnectorProps>;\n  };\n  connector?: FC<PlottedGraphConnector>;\n  node?: FC<PlottedGraphNode>;\n}\n"]}

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

@@ -5,9 +5,14 @@ export interface ConnectorProps<T = unknown> {
     label?: string;
     data?: T;
 }
+export interface NodeType {
+    minConnectors: number;
+}
 export interface Node<T = unknown> {
+    type?: NodeType;
     id: string;
     data?: T;
+    reference?: string;
 }
 export interface GraphData<T extends Node = Node, U extends ConnectorProps = ConnectorProps> {
     nodes: T[];
@@ -47,8 +52,8 @@ export declare class DirectedGraph<T extends Node = Node, U extends ConnectorPro
         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;
+    getInConnectors(toNodeId: string, fromNodeId?: string): U[];
+    getOutConnectors(fromNodeId: string, toNodeId?: string): U[];
+    getAllNodeConnectors(nodeId: string): U[] | undefined;
 }
 //# sourceMappingURL=Graph.d.ts.map

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

@@ -1 +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"}
+{"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

@@ -64,7 +64,13 @@ export class DirectedGraph {
         // 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))));
+        graphData.connectors.forEach(item => {
+            const data = item.data;
+            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 {