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

package/lib/components/FlowModeller/FlowModeller.js

@@ -1,15 +1,21 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useReducer, useCallback } from 'react';
-import styled, { css } from 'styled-components';
-import { createUID, useElement, useOuterEvent, Flex, Text, defaultThemeProp, useI18n } from '@pega/cosmos-react-core';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useReducer, useCallback, useRef, useMemo } from 'react';
+import { createUID, useElement, useOuterEvent, useI18n } from '@pega/cosmos-react-core';
 import ItemLibrary from '../ItemLibrary/ItemLibrary';
+import { DirectedGraph } from './Renderer/Utils/Graph';
 import FlowRenderer from './Renderer/Renderer';
-import { StartNode, EndNode, DefaultNode } from './Node/NodeTemplates';
 import { START_NODETYPE, STOP_NODETYPE } from './Node/Node.types';
-import PlaceHolderHelper, { isPlaceHolderConnector } from './Utils/AddNodeUtils';
+import PlaceHolderHelper from './Utils/addNodeUtils';
 import { AddButton } from './AddNode';
+import FlowModellerHelper from './helper';
+import DeletePopover from './DeletePopover';
+import Connector from './Connector';
+import Node from './Node';
+import FlowModellerContext from './FlowModellerContext';
 const initState = {
     showLib: false,
+    activeItem: null,
+    allowNonBranchNode: false,
     activeAddBtnMeta: {
         target: null,
         meta: {
@@ -18,8 +24,9 @@ const initState = {
         }
     },
     graphData: { nodes: [], connectors: [] },
-    connectorComponent: () => _jsx(_Fragment, {}, void 0),
-    nodeComponent: () => _jsx(_Fragment, {}, void 0)
+    highlightItems: undefined,
+    showDeletePopover: false,
+    deleteProps: undefined
 };
 const reducer = (state, action) => {
     switch (action.type) {
@@ -27,50 +34,109 @@ const reducer = (state, action) => {
             // minor optimization, not to update state.. if no change in the value
             return action.payload.show === state.showLib
                 ? state
-                : { ...state, showLib: action.payload.show };
+                : { ...state, showLib: action.payload.show, allowNonBranchNode: false };
+        case 'setActiveItem':
+            return {
+                ...state,
+                activeItem: action.payload.target
+            };
         case 'setActiveAddButton':
             state.activeAddBtnMeta = {
                 ...action.payload
             };
             return {
                 ...state,
-                showLib: true
+                showLib: true,
+                allowNonBranchNode: action.payload.allowNonBranchNode
             };
         case 'setGraphData':
             return {
                 ...state,
                 graphData: action.payload.graphData,
-                connectorComponent: action.payload.connectorComponent,
-                nodeComponent: action.payload.nodeComponent
+                highlightItems: action.payload.highlightItems
+            };
+        case 'highlight':
+            // minor optimization to avoid unnecessary re-render
+            if (action.payload.hideDeletePopover === !state.showDeletePopover) {
+                return state;
+            }
+            return {
+                ...state,
+                highlightItems: action.payload.highlightItems,
+                showDeletePopover: action.payload.hideDeletePopover !== true && state.showDeletePopover
+            };
+        case 'showDeletePopover':
+            return {
+                ...state,
+                showDeletePopover: action.payload.showDeletePopover,
+                deleteProps: action.payload.deleteProps
             };
         default:
             return state;
     }
 };
-const StyledLabel = styled(Text)(({ theme }) => {
-    return css `
-    border-radius: ${theme.base['border-radius']};
-    background: ${theme.base.colors.slate.dark};
-    color: ${theme.base.colors.white};
-    text-align: center;
-    padding: calc(0.5 * ${theme.base.spacing});
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 32ch;
-    white-space: nowrap;
-  `;
-});
-StyledLabel.defaultProps = defaultThemeProp;
-const FlowModeller = ({ graphData, onNodeActionClick, onNodeClick, onNodeAdd, nodeLibrary, actions }) => {
+const FlowModeller = ({ graphData, highlightData, onNodeActionClick, onNodeAdd, nodeLibrary, onNodeClick, onDelete, actions, readOnly }) => {
     const [state, dispatch] = useReducer(reducer, initState);
     const [popoverEl, setPopoverEl] = useElement(null);
+    const [deletePopoverEl, setDeletePopoverEl] = useElement(null);
+    const stateRef = useRef(initState);
+    // stateRef always refers to the same state obj
+    // "fixed" callbacks can refer to this object whenever
+    // it need the current value.  Note: the callbacks will not
+    // be reactive - they will not re-run the instant state changes,
+    // but they *will* see the current value whenever they do run
+    stateRef.current = state;
     const t = useI18n();
     const onNodeCreate = (el, meta) => {
+        const graph = new DirectedGraph(graphData);
+        let isAllowNonBranchNode = false;
+        if (meta.refType === 'connector') {
+            if (!Array.isArray(meta.refId))
+                meta.refId = [meta.refId];
+            const connectorData = graph.getConnector(meta.refId[0]);
+            const toNode = graph.getNode(connectorData.toNodeId);
+            const inConnectors = graph.getInConnectors(toNode.id);
+            let hiddenConnectorsCount = 0;
+            inConnectors.forEach(connector => {
+                const node = graph.getNode(connector.fromNodeId);
+                if (node.type.minConnectors === 0)
+                    hiddenConnectorsCount += 1;
+            });
+            const isPlaceholderConnector = meta.refId.length > 1;
+            /** if node is being added on a placeholder connector then reduce number of in connectors of destination node
+             * by total number of connectors converging/joining to form placeholder connector and add one to the in connector count
+             */
+            const inConnectorsCount = isPlaceholderConnector
+                ? inConnectors.length - meta.refId.length + 1
+                : inConnectors.length;
+            /** if node is being added on a placeholder connector then reduce number of hidden connectors of destination node
+             * by total number of connectors converging/joining to from placeholder connector and are originating from go to nodes
+             */
+            if (isPlaceholderConnector) {
+                meta.refId.forEach(connector => {
+                    if (graph.getNode(graph.getConnector(connector).fromNodeId).type.minConnectors === 0)
+                        hiddenConnectorsCount -= 1;
+                });
+            }
+            /** check destination/target node in connectors count is more than one
+             * check non-hidden/visible connectors among in connectors of destination/target node are more than 1
+             * check connectors converging/joining to form a placeholder connector are not equal to total number of in connectors
+             */
+            if (inConnectorsCount > 1 &&
+                inConnectorsCount - hiddenConnectorsCount > 1 &&
+                inConnectors.length !== meta.refId.length) {
+                isAllowNonBranchNode = true;
+            }
+            else {
+                isAllowNonBranchNode = false;
+            }
+        }
         dispatch({
             type: 'setActiveAddButton',
             payload: {
                 target: el,
-                meta
+                meta,
+                allowNonBranchNode: isAllowNonBranchNode
             }
         });
     };
@@ -82,13 +148,73 @@ const FlowModeller = ({ graphData, onNodeActionClick, onNodeClick, onNodeAdd, no
             }
         });
     };
+    const closeDeleteModel = () => {
+        // un-highlight the nodes and connectors
+        dispatch({
+            type: 'highlight',
+            payload: {
+                highlightItems: undefined,
+                hideDeletePopover: true
+            }
+        });
+    };
+    const onDeleteWrapper = (params, e) => {
+        const result = FlowModellerHelper.deleteNode(graphData, params.nodeId);
+        if (result) {
+            if (!result.updates && result.error) {
+                onDelete?.({ ...params, additionalData: result }, t('delete_referenced_step_error'), e);
+            }
+            else if (result.error) {
+                onDelete?.({ ...params, additionalData: result }, t('delete_step_error'), e);
+            }
+            onDelete?.({ ...params, additionalData: result }, '', e);
+        }
+        else {
+            dispatch({
+                type: 'showDeletePopover',
+                payload: {
+                    showDeletePopover: true,
+                    deleteProps: {
+                        flowGraphData: graphData,
+                        rendererGraphData: stateRef.current.graphData,
+                        nodeId: params.nodeId,
+                        target: {
+                            getBoundingClientRect: () => document
+                                .getElementById(`modeller-node-${stateRef.current.deleteProps?.nodeId}`)
+                                ?.getBoundingClientRect()
+                        },
+                        onChange: highlights => {
+                            dispatch({
+                                type: 'highlight',
+                                payload: {
+                                    highlightItems: highlights
+                                }
+                            });
+                        },
+                        onSubmit: outcome => {
+                            // un-highlight the nodes and connectors
+                            closeDeleteModel();
+                            if (outcome.error) {
+                                onDelete?.({ ...params, additionalData: outcome }, t('delete_step_error'), e);
+                            }
+                            else {
+                                onDelete?.({ ...params, additionalData: outcome }, '', e);
+                            }
+                        },
+                        onCancel: closeDeleteModel
+                    }
+                }
+            });
+        }
+    };
     useEffect(() => {
+        const graph = new DirectedGraph(graphData);
         const onGetNewPHNode = metaData => {
             return {
                 id: createUID(),
                 children: (_jsx(AddButton, { addNodeHandler: (e) => {
                         onNodeCreate(e.currentTarget, metaData);
-                    } }, void 0)),
+                    } })),
                 position: { x: 0, y: 0 },
                 dimensions: { width: 1, height: 0 }
             };
@@ -98,33 +224,12 @@ const FlowModeller = ({ graphData, onNodeActionClick, onNodeClick, onNodeAdd, no
                 id: createUID(),
                 fromNodeId,
                 toNodeId,
-                points: []
-            };
-        };
-        const Connector = props => {
-            const { id, labelLayout } = props;
-            const refId = isPlaceHolderConnector(props)
-                ? props.realConnectors
-                : id.toString();
-            const metaData = {
-                refType: 'connector',
-                refId
+                points: [],
+                data: {
+                    onNodeCreate,
+                    type: 'default'
+                }
             };
-            return (_jsxs(_Fragment, { children: [labelLayout?.value && (_jsx(Flex, { container: { justify: 'center' }, children: _jsx(StyledLabel, { children: labelLayout.value }, void 0) }, void 0)), _jsx(AddButton, { addNodeHandler: (e) => {
-                            onNodeCreate(e.currentTarget, metaData);
-                        } }, void 0)] }, void 0));
-        };
-        const Node = ({ id, type, label, description, additionalData }) => {
-            if (!type) {
-                return _jsx("div", {}, void 0);
-            }
-            if (type?.id === START_NODETYPE.id) {
-                return _jsx(StartNode, { id: id, type: type, label: label.toUpperCase() }, void 0);
-            }
-            if (type?.id === STOP_NODETYPE.id) {
-                return _jsx(EndNode, { id: id, type: type, label: label.toUpperCase() }, void 0);
-            }
-            return (_jsx(DefaultNode, { id: id, label: label, type: type, description: description, onActionClick: onNodeActionClick, onClick: onNodeClick, actions: actions, additionalData: additionalData }, void 0));
         };
         const flowNodes = graphData.nodes.map(node => {
             const flowNode = {
@@ -136,20 +241,31 @@ const FlowModeller = ({ graphData, onNodeActionClick, onNodeClick, onNodeAdd, no
                 position: {
                     x: 0,
                     y: 0
+                },
+                data: {
+                    isActive: state.activeItem?.id === node.id,
+                    actions,
+                    onDelete: onDeleteWrapper,
+                    onActionClick: onNodeActionClick,
+                    onClick: onNodeClick
                 }
             };
             if (node.type.id === START_NODETYPE.id || node.type.id === STOP_NODETYPE.id) {
-                flowNode.dimensions.width = 58;
-                flowNode.dimensions.height = 58;
+                flowNode.dimensions.width = 59;
+                flowNode.dimensions.height = 59;
             }
             return flowNode;
         });
         const connectors = graphData.connectors.map(connector => {
+            const nodeData = graph.getNode(connector.fromNodeId);
+            const isBranchNode = nodeData.type.minConnectors === 0;
             return {
                 ...connector,
                 points: [],
                 data: {
-                    label: connector.label
+                    label: connector.label,
+                    onNodeCreate,
+                    type: !isBranchNode ? 'default' : 'hidden'
                 }
             };
         });
@@ -158,9 +274,7 @@ const FlowModeller = ({ graphData, onNodeActionClick, onNodeClick, onNodeAdd, no
         dispatch({
             type: 'setGraphData',
             payload: {
-                graphData: newGraphData,
-                connectorComponent: Connector,
-                nodeComponent: Node
+                graphData: newGraphData
             }
         });
     }, [graphData]);
@@ -178,14 +292,24 @@ const FlowModeller = ({ graphData, onNodeActionClick, onNodeClick, onNodeAdd, no
         }
     }, [closeMenu]);
     useOuterEvent('mousedown', [popoverEl], closeMenu);
+    useOuterEvent('mousedown', [deletePopoverEl], closeDeleteModel);
     useEffect(() => {
         document.addEventListener('keydown', onKeydown);
         return () => {
             document.removeEventListener('keydown', onKeydown);
         };
     }, []);
-    const items = nodeLibrary !== undefined ? nodeLibrary : [];
-    return (_jsxs("div", { children: [_jsx(FlowRenderer, { graphData: state.graphData, connector: state.connectorComponent, node: state.nodeComponent }, void 0), _jsx(ItemLibrary, { show: state.showLib, target: state.activeAddBtnMeta.target, placeholder: t('search_nodes'), items: items, onClick: onLibraryItemSelect, ref: setPopoverEl }, void 0)] }, void 0));
+    let items = nodeLibrary !== undefined ? nodeLibrary : [];
+    if (!state.allowNonBranchNode) {
+        items = items.filter(shapeTypes => {
+            if (shapeTypes.type) {
+                return shapeTypes.type.minConnectors !== 0;
+            }
+            return true;
+        });
+    }
+    const ctxValue = useMemo(() => ({ readOnly, highlights: highlightData ?? state.highlightItems }), [readOnly, state.highlightItems, highlightData]);
+    return (_jsxs("div", { children: [_jsx(FlowModellerContext.Provider, { value: ctxValue, children: _jsx(FlowRenderer, { graphData: state.graphData, connector: Connector, node: Node }) }), state.showDeletePopover && state.deleteProps && (_jsx(DeletePopover, { show: state.showDeletePopover, ref: setDeletePopoverEl, ...state.deleteProps })), _jsx(ItemLibrary, { show: state.showLib, target: state.activeAddBtnMeta.target, placeholder: t('search_nodes'), items: items, onClick: onLibraryItemSelect, ref: setPopoverEl, position: 'bottom' })] }));
 };
 export default FlowModeller;
 //# sourceMappingURL=FlowModeller.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FlowModeller.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,SAAS,EAET,UAAU,EAGV,WAAW,EAEZ,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAEL,SAAS,EACT,UAAU,EACV,aAAa,EACb,IAAI,EACJ,IAAI,EACJ,gBAAgB,EAChB,OAAO,EACR,MAAM,yBAAyB,CAAC;AAEjC,OAAO,WAA4B,MAAM,4BAA4B,CAAC;AAQtE,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACvE,OAAO,EAIL,cAAc,EACd,aAAa,EAEd,MAAM,mBAAmB,CAAC;AAC3B,OAAO,iBAAiB,EAAE,EACxB,sBAAsB,EAEvB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AA2BtC,MAAM,SAAS,GAAkB;IAC/B,OAAO,EAAE,KAAK;IACd,gBAAgB,EAAE;QAChB,MAAM,EAAE,IAAI;QACZ,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM;YACf,KAAK,EAAE,EAAE;SACV;KACF;IACD,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE;IACxC,kBAAkB,EAAE,GAAG,EAAE,CAAC,2BAAK;IAC/B,aAAa,EAAE,GAAG,EAAE,CAAC,2BAAK;CAC3B,CAAC;AAEF,MAAM,OAAO,GAAG,CAAC,KAAoB,EAAE,MAAsC,EAAE,EAAE;IAC/E,QAAQ,MAAM,CAAC,IAAI,EAAE;QACnB,KAAK,aAAa;YAChB,sEAAsE;YACtE,OAAO,MAAM,CAAC,OAAO,CAAC,IAAI,KAAK,KAAK,CAAC,OAAO;gBAC1C,CAAC,CAAC,KAAK;gBACP,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QACjD,KAAK,oBAAoB;YACvB,KAAK,CAAC,gBAAgB,GAAG;gBACvB,GAAG,MAAM,CAAC,OAAO;aAClB,CAAC;YACF,OAAO;gBACL,GAAG,KAAK;gBACR,OAAO,EAAE,IAAI;aACd,CAAC;QACJ,KAAK,cAAc;YACjB,OAAO;gBACL,GAAG,KAAK;gBACR,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,SAAS;gBACnC,kBAAkB,EAAE,MAAM,CAAC,OAAO,CAAC,kBAAkB;gBACrD,aAAa,EAAE,MAAM,CAAC,OAAO,CAAC,aAAa;aAC5C,CAAC;QACJ;YACE,OAAO,KAAK,CAAC;KAChB;AACH,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7C,OAAO,GAAG,CAAA;qBACS,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;kBAC9B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI;aACjC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;0BAEV,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;GAKzC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,YAAY,GAAG,CAAC,EACpB,SAAS,EACT,iBAAiB,EACjB,WAAW,EACX,SAAS,EACT,WAAW,EACX,OAAO,EAC4B,EAAE,EAAE;IACvC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,UAAU,CAA8B,OAAO,EAAE,SAAS,CAAC,CAAC;IACtF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,CAAc,IAAI,CAAC,CAAC;IAEhE,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,YAAY,GAAG,CAAC,EAAyC,EAAE,IAA0B,EAAE,EAAE;QAC7F,QAAQ,CAAC;YACP,IAAI,EAAE,oBAAoB;YAC1B,OAAO,EAAE;gBACP,MAAM,EAAE,EAAE;gBACV,IAAI;aACL;SACF,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,QAAQ,CAAC;YACP,IAAI,EAAE,aAAa;YACnB,OAAO,EAAE;gBACP,IAAI,EAAE,KAAK;aACZ;SACF,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,cAAc,GAA0D,QAAQ,CAAC,EAAE;YACvF,OAAO;gBACL,EAAE,EAAE,SAAS,EAAE;gBACf,QAAQ,EAAE,CACR,KAAC,SAAS,IACR,cAAc,EAAE,CAAC,CAAgC,EAAE,EAAE;wBACnD,YAAY,CAAC,CAAC,CAAC,aAA4B,EAAE,QAAQ,CAAC,CAAC;oBACzD,CAAC,WACD,CACH;gBACD,QAAQ,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;gBACxB,UAAU,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;aACpC,CAAC;QACJ,CAAC,CAAC;QAEF,MAAM,mBAAmB,GAIK,CAAC,UAAU,EAAE,QAAQ,EAAE,EAAE;YACrD,OAAO;gBACL,EAAE,EAAE,SAAS,EAAE;gBACf,UAAU;gBACV,QAAQ;gBACR,MAAM,EAAE,EAAE;aACX,CAAC;QACJ,CAAC,CAAC;QAEF,MAAM,SAAS,GAA+B,KAAK,CAAC,EAAE;YACpD,MAAM,EAAE,EAAE,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;YAElC,MAAM,KAAK,GAAG,sBAAsB,CAAC,KAAK,CAAC;gBACzC,CAAC,CAAE,KAA8B,CAAC,cAAc;gBAChD,CAAC,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC;YAElB,MAAM,QAAQ,GAAyB;gBACrC,OAAO,EAAE,WAAW;gBACpB,KAAK;aACN,CAAC;YAEF,OAAO,CACL,8BACG,WAAW,EAAE,KAAK,IAAI,CACrB,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,YACpC,KAAC,WAAW,cAAE,WAAW,CAAC,KAAK,WAAe,WACzC,CACR,EACD,KAAC,SAAS,IACR,cAAc,EAAE,CAAC,CAAgC,EAAE,EAAE;4BACnD,YAAY,CAAC,CAAC,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;wBAC1C,CAAC,WACD,YACD,CACJ,CAAC;QACJ,CAAC,CAAC;QACF,MAAM,IAAI,GAAkB,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,EAAE,EAAE;YAC/E,IAAI,CAAC,IAAI,EAAE;gBACT,OAAO,uBAAO,CAAC;aAChB;YACD,IAAI,IAAI,EAAE,EAAE,KAAK,cAAc,CAAC,EAAE,EAAE;gBAClC,OAAO,KAAC,SAAS,IAAC,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,WAAW,EAAE,WAAI,CAAC;aACtE;YACD,IAAI,IAAI,EAAE,EAAE,KAAK,aAAa,CAAC,EAAE,EAAE;gBACjC,OAAO,KAAC,OAAO,IAAC,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,WAAW,EAAE,WAAI,CAAC;aACpE;YACD,OAAO,CACL,KAAC,WAAW,IACV,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,iBAAiB,EAChC,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,WAC9B,CACH,CAAC;QACJ,CAAC,CAAC;QAEF,MAAM,SAAS,GAAwB,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAChE,MAAM,QAAQ,GAAsB;gBAClC,GAAG,IAAI;gBACP,UAAU,EAAE;oBACV,KAAK,EAAE,GAAG;oBACV,MAAM,EAAE,GAAG;iBACZ;gBACD,QAAQ,EAAE;oBACR,CAAC,EAAE,CAAC;oBACJ,CAAC,EAAE,CAAC;iBACL;aACF,CAAC;YAEF,IAAI,IAAI,CAAC,IAAI,CAAC,EAAE,KAAK,cAAc,CAAC,EAAE,IAAI,IAAI,CAAC,IAAI,CAAC,EAAE,KAAK,aAAa,CAAC,EAAE,EAAE;gBAC3E,QAAQ,CAAC,UAAU,CAAC,KAAK,GAAG,EAAE,CAAC;gBAC/B,QAAQ,CAAC,UAAU,CAAC,MAAM,GAAG,EAAE,CAAC;aACjC;YACD,OAAO,QAAQ,CAAC;QAClB,CAAC,CAAC,CAAC;QAEH,MAAM,UAAU,GAA6B,SAAS,CAAC,UAAU,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;YAChF,OAAO;gBACL,GAAG,SAAS;gBACZ,MAAM,EAAE,EAAE;gBACV,IAAI,EAAE;oBACJ,KAAK,EAAE,SAAS,CAAC,KAAK;iBACvB;aACF,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,6CAA6C;QAC7C,MAAM,YAAY,GAChB,iBAAiB,CAAC,sBAAsB,CACtC,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,EAChC,cAAc,EACd,mBAAmB,CACpB,CAAC;QAEJ,QAAQ,CAAC;YACP,IAAI,EAAE,cAAc;YACpB,OAAO,EAAE;gBACP,SAAS,EAAE,YAAY;gBACvB,kBAAkB,EAAE,SAAS;gBAC7B,aAAa,EAAE,IAAI;aACpB;SACF,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB;;OAEG;IACH,MAAM,mBAAmB,GAAG,WAAW,CACrC,CAAC,OAAoB,EAAE,EAAE;QACvB,MAAM,QAAQ,GAAG,KAAK,CAAC,gBAAgB,CAAC,IAAI,CAAC;QAC7C,SAAS,EAAE,CAAC;QACZ,SAAS,CAAE,OAA2B,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;IACzD,CAAC,EACD,CAAC,KAAK,CAAC,gBAAgB,CAAC,CACzB,CAAC;IAEF,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,CAAgB,EAAE,EAAE;QACnB,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;YACtB,SAAS,EAAE,CAAC;SACb;IACH,CAAC,EACD,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,CAAC;IAEnD,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAChD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QACrD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,KAAK,GAAsB,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAE9E,OAAO,CACL,0BACE,KAAC,YAAY,IACX,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,SAAS,EAAE,KAAK,CAAC,kBAAkB,EACnC,IAAI,EAAE,KAAK,CAAC,aAAa,WACzB,EACF,KAAC,WAAW,IACV,IAAI,EAAE,KAAK,CAAC,OAAO,EACnB,MAAM,EAAE,KAAK,CAAC,gBAAgB,CAAC,MAAM,EACrC,WAAW,EAAE,CAAC,CAAC,cAAc,CAAC,EAC9B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,mBAAmB,EAC5B,GAAG,EAAE,YAAY,WACjB,YACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import {\n  PropsWithoutRef,\n  useEffect,\n  MouseEvent,\n  useReducer,\n  FC,\n  Reducer,\n  useCallback,\n  ComponentType\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Action,\n  createUID,\n  useElement,\n  useOuterEvent,\n  Flex,\n  Text,\n  defaultThemeProp,\n  useI18n\n} from '@pega/cosmos-react-core';\n\nimport ItemLibrary, { LibraryItem } from '../ItemLibrary/ItemLibrary';\n\nimport { GraphData, ConnectorProps } from './Renderer/Utils/Graph';\nimport {\n  AddNodeHandlerParams,\n  RendererConnectorProps,\n  RendererNodeProps\n} from './Renderer/Renderer.types';\nimport FlowRenderer from './Renderer/Renderer';\nimport { StartNode, EndNode, DefaultNode } from './Node/NodeTemplates';\nimport {\n  ActionParams,\n  NodeProps,\n  NodeLibraryItem,\n  START_NODETYPE,\n  STOP_NODETYPE,\n  NodeType\n} from './Node/Node.types';\nimport PlaceHolderHelper, {\n  isPlaceHolderConnector,\n  PlaceHolderConnector\n} from './Utils/AddNodeUtils';\nimport { AddButton } from './AddNode';\n\nexport interface FlowModellerProps {\n  graphData: GraphData<NodeProps, ConnectorProps>;\n  /** Node actions */\n  actions?: Action[];\n  /** Callback to add node from connector */\n  onNodeAdd: (nodeType: NodeType, params: AddNodeHandlerParams) => void;\n  /** Callback for handling the click on the node */\n  onNodeClick?: (nodeId: string) => void;\n  /** Callback for actions on Node */\n  onNodeActionClick?: (param: ActionParams, e: MouseEvent) => void;\n  /** Types of nodes */\n  nodeLibrary: NodeLibraryItem[];\n}\n\ntype ModellerState = {\n  showLib: boolean;\n  activeAddBtnMeta: {\n    target: null; // we will maintain ref of an Element\n    meta: AddNodeHandlerParams;\n  };\n  graphData: GraphData<RendererNodeProps, RendererConnectorProps>;\n  connectorComponent: ComponentType<RendererConnectorProps>;\n  nodeComponent: ComponentType<RendererNodeProps>;\n};\n\nconst initState: ModellerState = {\n  showLib: false,\n  activeAddBtnMeta: {\n    target: null,\n    meta: {\n      refType: 'node',\n      refId: ''\n    }\n  },\n  graphData: { nodes: [], connectors: [] },\n  connectorComponent: () => <></>,\n  nodeComponent: () => <></>\n};\n\nconst reducer = (state: ModellerState, action: { type: string; payload: any }) => {\n  switch (action.type) {\n    case 'showLibrary':\n      // minor optimization, not to update state.. if no change in the value\n      return action.payload.show === state.showLib\n        ? state\n        : { ...state, showLib: action.payload.show };\n    case 'setActiveAddButton':\n      state.activeAddBtnMeta = {\n        ...action.payload\n      };\n      return {\n        ...state,\n        showLib: true\n      };\n    case 'setGraphData':\n      return {\n        ...state,\n        graphData: action.payload.graphData,\n        connectorComponent: action.payload.connectorComponent,\n        nodeComponent: action.payload.nodeComponent\n      };\n    default:\n      return state;\n  }\n};\n\nconst StyledLabel = styled(Text)(({ theme }) => {\n  return css`\n    border-radius: ${theme.base['border-radius']};\n    background: ${theme.base.colors.slate.dark};\n    color: ${theme.base.colors.white};\n    text-align: center;\n    padding: calc(0.5 * ${theme.base.spacing});\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 32ch;\n    white-space: nowrap;\n  `;\n});\n\nStyledLabel.defaultProps = defaultThemeProp;\n\nconst FlowModeller = ({\n  graphData,\n  onNodeActionClick,\n  onNodeClick,\n  onNodeAdd,\n  nodeLibrary,\n  actions\n}: PropsWithoutRef<FlowModellerProps>) => {\n  const [state, dispatch] = useReducer<Reducer<ModellerState, any>>(reducer, initState);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n\n  const t = useI18n();\n\n  const onNodeCreate = (el: HTMLElement | SVGForeignObjectElement, meta: AddNodeHandlerParams) => {\n    dispatch({\n      type: 'setActiveAddButton',\n      payload: {\n        target: el,\n        meta\n      }\n    });\n  };\n\n  const closeMenu = () => {\n    dispatch({\n      type: 'showLibrary',\n      payload: {\n        show: false\n      }\n    });\n  };\n\n  useEffect(() => {\n    const onGetNewPHNode: (metaData: AddNodeHandlerParams) => RendererNodeProps = metaData => {\n      return {\n        id: createUID(),\n        children: (\n          <AddButton\n            addNodeHandler={(e: MouseEvent<HTMLButtonElement>) => {\n              onNodeCreate(e.currentTarget as HTMLElement, metaData);\n            }}\n          />\n        ),\n        position: { x: 0, y: 0 },\n        dimensions: { width: 1, height: 0 }\n      };\n    };\n\n    const onGetNewPHConnector: (\n      fromNodeId: string,\n      toNodeId: string,\n      metaData: AddNodeHandlerParams\n    ) => RendererConnectorProps = (fromNodeId, toNodeId) => {\n      return {\n        id: createUID(),\n        fromNodeId,\n        toNodeId,\n        points: []\n      };\n    };\n\n    const Connector: FC<RendererConnectorProps> = props => {\n      const { id, labelLayout } = props;\n\n      const refId = isPlaceHolderConnector(props)\n        ? (props as PlaceHolderConnector).realConnectors\n        : id.toString();\n\n      const metaData: AddNodeHandlerParams = {\n        refType: 'connector',\n        refId\n      };\n\n      return (\n        <>\n          {labelLayout?.value && (\n            <Flex container={{ justify: 'center' }}>\n              <StyledLabel>{labelLayout.value}</StyledLabel>\n            </Flex>\n          )}\n          <AddButton\n            addNodeHandler={(e: MouseEvent<HTMLButtonElement>) => {\n              onNodeCreate(e.currentTarget, metaData);\n            }}\n          />\n        </>\n      );\n    };\n    const Node: FC<NodeProps> = ({ id, type, label, description, additionalData }) => {\n      if (!type) {\n        return <div />;\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          id={id}\n          label={label}\n          type={type}\n          description={description}\n          onActionClick={onNodeActionClick}\n          onClick={onNodeClick}\n          actions={actions}\n          additionalData={additionalData}\n        />\n      );\n    };\n\n    const flowNodes: RendererNodeProps[] = graphData.nodes.map(node => {\n      const flowNode: RendererNodeProps = {\n        ...node,\n        dimensions: {\n          width: 280,\n          height: 120\n        },\n        position: {\n          x: 0,\n          y: 0\n        }\n      };\n\n      if (node.type.id === START_NODETYPE.id || node.type.id === STOP_NODETYPE.id) {\n        flowNode.dimensions.width = 58;\n        flowNode.dimensions.height = 58;\n      }\n      return flowNode;\n    });\n\n    const connectors: RendererConnectorProps[] = graphData.connectors.map(connector => {\n      return {\n        ...connector,\n        points: [],\n        data: {\n          label: connector.label\n        }\n      };\n    });\n\n    // inject the placeholderAddNodes dynamically\n    const newGraphData: GraphData<RendererNodeProps, RendererConnectorProps> =\n      PlaceHolderHelper.injectPlaceholderNodes(\n        { nodes: flowNodes, connectors },\n        onGetNewPHNode,\n        onGetNewPHConnector\n      );\n\n    dispatch({\n      type: 'setGraphData',\n      payload: {\n        graphData: newGraphData,\n        connectorComponent: Connector,\n        nodeComponent: Node\n      }\n    });\n  }, [graphData]);\n\n  /**\n   * Library popover functionality\n   */\n  const onLibraryItemSelect = useCallback(\n    (libItem: LibraryItem) => {\n      const metaData = state.activeAddBtnMeta.meta;\n      closeMenu();\n      onNodeAdd((libItem as NodeLibraryItem).type, metaData);\n    },\n    [state.activeAddBtnMeta]\n  );\n\n  const onKeydown = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        closeMenu();\n      }\n    },\n    [closeMenu]\n  );\n\n  useOuterEvent('mousedown', [popoverEl], closeMenu);\n\n  useEffect(() => {\n    document.addEventListener('keydown', onKeydown);\n    return () => {\n      document.removeEventListener('keydown', onKeydown);\n    };\n  }, []);\n\n  const items: NodeLibraryItem[] = nodeLibrary !== undefined ? nodeLibrary : [];\n\n  return (\n    <div>\n      <FlowRenderer\n        graphData={state.graphData}\n        connector={state.connectorComponent}\n        node={state.nodeComponent}\n      />\n      <ItemLibrary\n        show={state.showLib}\n        target={state.activeAddBtnMeta.target}\n        placeholder={t('search_nodes')}\n        items={items}\n        onClick={onLibraryItemSelect}\n        ref={setPopoverEl}\n      />\n    </div>\n  );\n};\n\nexport default FlowModeller;\n"]}
+{"version":3,"file":"FlowModeller.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  PropsWithoutRef,\n  useEffect,\n  MouseEvent,\n  useReducer,\n  Reducer,\n  useCallback,\n  useRef,\n  useMemo\n} from 'react';\n\nimport {\n  PopoverProps,\n  createUID,\n  useElement,\n  useOuterEvent,\n  useI18n,\n  OmitStrict\n} from '@pega/cosmos-react-core';\n\nimport ItemLibrary, { LibraryItem } from '../ItemLibrary/ItemLibrary';\n\nimport { GraphData, DirectedGraph } from './Renderer/Utils/Graph';\nimport { AddNodeHandlerParams } from './Renderer/Renderer.types';\nimport FlowRenderer from './Renderer/Renderer';\nimport {\n  ActionParams,\n  NodeLibraryItem,\n  START_NODETYPE,\n  STOP_NODETYPE,\n  NodeComponentData\n} from './Node/Node.types';\nimport PlaceHolderHelper from './Utils/addNodeUtils';\nimport { AddButton } from './AddNode';\nimport FlowModellerHelper from './helper';\nimport DeletePopover, { DeleteNodePopoverProps } from './DeletePopover';\nimport Connector from './Connector';\nimport Node from './Node';\nimport { DeleteNodeModalOption, DeleteNodeOutcome } from './Utils/deleteNodeUtils';\nimport FlowModellerContext from './FlowModellerContext';\nimport { FlowModellerProps } from './FlowModeller.types';\nimport { PlottedGraphNode, PlottedGraphConnector } from './Renderer/Utils/GraphLayout';\n\ntype ModellerState = {\n  showLib: boolean;\n  allowNonBranchNode: boolean;\n  activeItem: Element | null;\n  activeAddBtnMeta: {\n    target: null; // we will maintain ref of an Element\n    meta: AddNodeHandlerParams;\n  };\n  graphData: GraphData<PlottedGraphNode, PlottedGraphConnector>;\n  highlightItems?: DeleteNodeModalOption['pathItems'];\n  showDeletePopover: boolean;\n  deleteProps:\n    | OmitStrict<DeleteNodePopoverProps & { target: PopoverProps['target'] }, 'show'>\n    | undefined;\n};\n\nconst initState: ModellerState = {\n  showLib: false,\n  activeItem: null,\n  allowNonBranchNode: false,\n  activeAddBtnMeta: {\n    target: null,\n    meta: {\n      refType: 'node',\n      refId: ''\n    }\n  },\n  graphData: { nodes: [], connectors: [] },\n  highlightItems: undefined,\n  showDeletePopover: false,\n  deleteProps: undefined\n};\n\nconst reducer = (state: ModellerState, action: { type: string; payload: any }) => {\n  switch (action.type) {\n    case 'showLibrary':\n      // minor optimization, not to update state.. if no change in the value\n      return action.payload.show === state.showLib\n        ? state\n        : { ...state, showLib: action.payload.show, allowNonBranchNode: false };\n    case 'setActiveItem':\n      return {\n        ...state,\n        activeItem: action.payload.target\n      };\n    case 'setActiveAddButton':\n      state.activeAddBtnMeta = {\n        ...action.payload\n      };\n\n      return {\n        ...state,\n        showLib: true,\n        allowNonBranchNode: action.payload.allowNonBranchNode\n      };\n    case 'setGraphData':\n      return {\n        ...state,\n        graphData: action.payload.graphData,\n        highlightItems: action.payload.highlightItems\n      };\n    case 'highlight':\n      // minor optimization to avoid unnecessary re-render\n      if (action.payload.hideDeletePopover === !state.showDeletePopover) {\n        return state;\n      }\n\n      return {\n        ...state,\n        highlightItems: action.payload.highlightItems,\n        showDeletePopover: action.payload.hideDeletePopover !== true && state.showDeletePopover\n      };\n    case 'showDeletePopover':\n      return {\n        ...state,\n        showDeletePopover: action.payload.showDeletePopover,\n        deleteProps: action.payload.deleteProps\n      };\n    default:\n      return state;\n  }\n};\n\nconst FlowModeller = ({\n  graphData,\n  highlightData,\n  onNodeActionClick,\n  onNodeAdd,\n  nodeLibrary,\n  onNodeClick,\n  onDelete,\n  actions,\n  readOnly\n}: PropsWithoutRef<FlowModellerProps>) => {\n  const [state, dispatch] = useReducer<Reducer<ModellerState, any>>(reducer, initState);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n  const [deletePopoverEl, setDeletePopoverEl] = useElement<HTMLElement>(null);\n  const stateRef = useRef<ModellerState>(initState);\n\n  // stateRef always refers to the same state obj\n  // \"fixed\" callbacks can refer to this object whenever\n  // it need the current value.  Note: the callbacks will not\n  // be reactive - they will not re-run the instant state changes,\n  // but they *will* see the current value whenever they do run\n  stateRef.current = state;\n  const t = useI18n();\n\n  const onNodeCreate = (el: HTMLElement | SVGForeignObjectElement, meta: AddNodeHandlerParams) => {\n    const graph = new DirectedGraph(graphData);\n    let isAllowNonBranchNode = false;\n    if (meta.refType === 'connector') {\n      if (!Array.isArray(meta.refId)) meta.refId = [meta.refId];\n      const connectorData = graph.getConnector(meta.refId[0]);\n      const toNode = graph.getNode(connectorData.toNodeId);\n      const inConnectors = graph.getInConnectors(toNode.id);\n      let hiddenConnectorsCount = 0;\n      inConnectors.forEach(connector => {\n        const node = graph.getNode(connector.fromNodeId);\n        if (node.type.minConnectors === 0) hiddenConnectorsCount += 1;\n      });\n      const isPlaceholderConnector = meta.refId.length > 1;\n\n      /** if node is being added on a placeholder connector then reduce number of in connectors of destination node\n       * by total number of connectors converging/joining to form placeholder connector and add one to the in connector count\n       */\n      const inConnectorsCount = isPlaceholderConnector\n        ? inConnectors.length - meta.refId.length + 1\n        : inConnectors.length;\n\n      /** if node is being added on a placeholder connector then reduce number of hidden connectors of destination node\n       * by total number of connectors converging/joining to from placeholder connector and are originating from go to nodes\n       */\n      if (isPlaceholderConnector) {\n        meta.refId.forEach(connector => {\n          if (graph.getNode(graph.getConnector(connector).fromNodeId).type.minConnectors === 0)\n            hiddenConnectorsCount -= 1;\n        });\n      }\n\n      /** check destination/target node in connectors count is more than one\n       * check non-hidden/visible connectors among in connectors of destination/target node are more than 1\n       * check connectors converging/joining to form a placeholder connector are not equal to total number of in connectors\n       */\n      if (\n        inConnectorsCount > 1 &&\n        inConnectorsCount - hiddenConnectorsCount > 1 &&\n        inConnectors.length !== meta.refId.length\n      ) {\n        isAllowNonBranchNode = true;\n      } else {\n        isAllowNonBranchNode = false;\n      }\n    }\n    dispatch({\n      type: 'setActiveAddButton',\n      payload: {\n        target: el,\n        meta,\n        allowNonBranchNode: isAllowNonBranchNode\n      }\n    });\n  };\n\n  const closeMenu = () => {\n    dispatch({\n      type: 'showLibrary',\n      payload: {\n        show: false\n      }\n    });\n  };\n\n  const closeDeleteModel = () => {\n    // un-highlight the nodes and connectors\n    dispatch({\n      type: 'highlight',\n      payload: {\n        highlightItems: undefined,\n        hideDeletePopover: true\n      }\n    });\n  };\n\n  const onDeleteWrapper = (params: ActionParams, e: MouseEvent) => {\n    const result: DeleteNodeOutcome | false = FlowModellerHelper.deleteNode(\n      graphData,\n      params.nodeId\n    );\n    if (result) {\n      if (!result.updates && result.error) {\n        onDelete?.({ ...params, additionalData: result }, t('delete_referenced_step_error'), e);\n      } else if (result.error) {\n        onDelete?.({ ...params, additionalData: result }, t('delete_step_error'), e);\n      }\n      onDelete?.({ ...params, additionalData: result }, '', e);\n    } else {\n      dispatch({\n        type: 'showDeletePopover',\n        payload: {\n          showDeletePopover: true,\n          deleteProps: {\n            flowGraphData: graphData,\n            rendererGraphData: stateRef.current.graphData,\n            nodeId: params.nodeId,\n            target: {\n              getBoundingClientRect: () =>\n                document\n                  .getElementById(`modeller-node-${stateRef.current.deleteProps?.nodeId}`)\n                  ?.getBoundingClientRect()\n            } as PopoverProps['target'],\n            onChange: highlights => {\n              dispatch({\n                type: 'highlight',\n                payload: {\n                  highlightItems: highlights\n                }\n              });\n            },\n            onSubmit: outcome => {\n              // un-highlight the nodes and connectors\n              closeDeleteModel();\n              if (outcome.error) {\n                onDelete?.({ ...params, additionalData: outcome }, t('delete_step_error'), e);\n              } else {\n                onDelete?.({ ...params, additionalData: outcome }, '', e);\n              }\n            },\n            onCancel: closeDeleteModel\n          } as ModellerState['deleteProps']\n        }\n      });\n    }\n  };\n\n  useEffect(() => {\n    const graph = new DirectedGraph(graphData);\n    const onGetNewPHNode: (metaData: AddNodeHandlerParams) => PlottedGraphNode = metaData => {\n      return {\n        id: createUID(),\n        children: (\n          <AddButton\n            addNodeHandler={(e: MouseEvent<HTMLButtonElement>) => {\n              onNodeCreate(e.currentTarget as HTMLElement, metaData);\n            }}\n          />\n        ),\n        position: { x: 0, y: 0 },\n        dimensions: { width: 1, height: 0 }\n      };\n    };\n\n    const onGetNewPHConnector: (\n      fromNodeId: string,\n      toNodeId: string,\n      metaData: AddNodeHandlerParams\n    ) => PlottedGraphConnector = (fromNodeId, toNodeId) => {\n      return {\n        id: createUID(),\n        fromNodeId,\n        toNodeId,\n        points: [],\n        data: {\n          onNodeCreate,\n          type: 'default'\n        }\n      };\n    };\n\n    const flowNodes: PlottedGraphNode[] = graphData.nodes.map(node => {\n      const flowNode: PlottedGraphNode = {\n        ...node,\n        dimensions: {\n          width: 280,\n          height: 120\n        },\n        position: {\n          x: 0,\n          y: 0\n        },\n        data: {\n          isActive: state.activeItem?.id === node.id,\n          actions,\n          onDelete: onDeleteWrapper,\n          onActionClick: onNodeActionClick,\n          onClick: onNodeClick\n        } as NodeComponentData\n      };\n\n      if (node.type.id === START_NODETYPE.id || node.type.id === STOP_NODETYPE.id) {\n        flowNode.dimensions.width = 59;\n        flowNode.dimensions.height = 59;\n      }\n      return flowNode;\n    });\n\n    const connectors: PlottedGraphConnector[] = graphData.connectors.map(connector => {\n      const nodeData = graph.getNode(connector.fromNodeId);\n      const isBranchNode = nodeData.type.minConnectors === 0;\n      return {\n        ...connector,\n        points: [],\n        data: {\n          label: connector.label,\n          onNodeCreate,\n          type: !isBranchNode ? 'default' : 'hidden'\n        }\n      };\n    });\n\n    // inject the placeholderAddNodes dynamically\n    const newGraphData: GraphData<PlottedGraphNode, PlottedGraphConnector> =\n      PlaceHolderHelper.injectPlaceholderNodes(\n        { nodes: flowNodes, connectors },\n        onGetNewPHNode,\n        onGetNewPHConnector\n      );\n\n    dispatch({\n      type: 'setGraphData',\n      payload: {\n        graphData: newGraphData\n      }\n    });\n  }, [graphData]);\n\n  /**\n   * Library popover functionality\n   */\n  const onLibraryItemSelect = useCallback(\n    (libItem: LibraryItem) => {\n      const metaData = state.activeAddBtnMeta.meta;\n      closeMenu();\n      onNodeAdd((libItem as NodeLibraryItem).type, metaData);\n    },\n    [state.activeAddBtnMeta]\n  );\n\n  const onKeydown = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        closeMenu();\n      }\n    },\n    [closeMenu]\n  );\n\n  useOuterEvent('mousedown', [popoverEl], closeMenu);\n  useOuterEvent('mousedown', [deletePopoverEl], closeDeleteModel);\n\n  useEffect(() => {\n    document.addEventListener('keydown', onKeydown);\n\n    return () => {\n      document.removeEventListener('keydown', onKeydown);\n    };\n  }, []);\n\n  let items: NodeLibraryItem[] = nodeLibrary !== undefined ? nodeLibrary : [];\n\n  if (!state.allowNonBranchNode) {\n    items = items.filter(shapeTypes => {\n      if (shapeTypes.type) {\n        return shapeTypes.type.minConnectors !== 0;\n      }\n      return true;\n    });\n  }\n  const ctxValue = useMemo(\n    () => ({ readOnly, highlights: highlightData ?? state.highlightItems }),\n    [readOnly, state.highlightItems, highlightData]\n  );\n\n  return (\n    <div>\n      <FlowModellerContext.Provider value={ctxValue}>\n        <FlowRenderer graphData={state.graphData} connector={Connector} node={Node} />\n      </FlowModellerContext.Provider>\n      {state.showDeletePopover && state.deleteProps && (\n        <DeletePopover\n          show={state.showDeletePopover}\n          ref={setDeletePopoverEl}\n          {...state.deleteProps}\n        />\n      )}\n      <ItemLibrary\n        show={state.showLib}\n        target={state.activeAddBtnMeta.target}\n        placeholder={t('search_nodes')}\n        items={items}\n        onClick={onLibraryItemSelect}\n        ref={setPopoverEl}\n        position='bottom'\n      />\n    </div>\n  );\n};\n\nexport default FlowModeller;\n"]}

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

@@ -0,0 +1,25 @@
+import { MouseEvent } from 'react';
+import { Action } from '@pega/cosmos-react-core';
+import { GraphData, ConnectorProps } from './Renderer/Utils/Graph';
+import { AddNodeHandlerParams, RendererProps } from './Renderer/Renderer.types';
+import { ActionParams, NodeProps, NodeLibraryItem, NodeType } from './Node/Node.types';
+export interface FlowModellerProps {
+    graphData: GraphData<NodeProps, ConnectorProps>;
+    /** Node actions */
+    actions?: Action[];
+    /** Callback to add node from connector */
+    onNodeAdd: (nodeType: NodeType, params: AddNodeHandlerParams) => void;
+    /** Callback for handling the click on the node */
+    onNodeClick?: (nodeId: string) => void;
+    /** Callback for actions on Node */
+    onNodeActionClick?: (param: ActionParams, e: MouseEvent) => void;
+    /** Callback for node deletion */
+    onDelete?: (param: ActionParams, error: string, e: MouseEvent) => void;
+    /** Types of nodes */
+    nodeLibrary: NodeLibraryItem[];
+    /** Highlights */
+    highlightData?: RendererProps['highlights'];
+    /** To make FlowModeller readOnly state */
+    readOnly?: boolean;
+}
+//# sourceMappingURL=FlowModeller.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FlowModeller.types.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAEvF,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,SAAS,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;IAChD,mBAAmB;IACnB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,0CAA0C;IAC1C,SAAS,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACtE,kDAAkD;IAClD,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,mCAAmC;IACnC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACjE,iCAAiC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACvE,qBAAqB;IACrB,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,iBAAiB;IACjB,aAAa,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IAC5C,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"FlowModeller.types.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEvent } from 'react';\n\nimport { Action } from '@pega/cosmos-react-core';\n\nimport { GraphData, ConnectorProps } from './Renderer/Utils/Graph';\nimport { AddNodeHandlerParams, RendererProps } from './Renderer/Renderer.types';\nimport { ActionParams, NodeProps, NodeLibraryItem, NodeType } from './Node/Node.types';\n\nexport interface FlowModellerProps {\n  graphData: GraphData<NodeProps, ConnectorProps>;\n  /** Node actions */\n  actions?: Action[];\n  /** Callback to add node from connector */\n  onNodeAdd: (nodeType: NodeType, params: AddNodeHandlerParams) => void;\n  /** Callback for handling the click on the node */\n  onNodeClick?: (nodeId: string) => void;\n  /** Callback for actions on Node */\n  onNodeActionClick?: (param: ActionParams, e: MouseEvent) => void;\n  /** Callback for node deletion */\n  onDelete?: (param: ActionParams, error: string, e: MouseEvent) => void;\n  /** Types of nodes */\n  nodeLibrary: NodeLibraryItem[];\n  /** Highlights */\n  highlightData?: RendererProps['highlights'];\n  /** To make FlowModeller readOnly state */\n  readOnly?: boolean;\n}\n"]}

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { FlowModellerProps } from './FlowModeller.types';
+import { RendererProps } from './Renderer/Renderer.types';
+declare const FlowModellerContext: import("react").Context<Pick<FlowModellerProps, "readOnly"> & Partial<Pick<RendererProps, "highlights">>>;
+export default FlowModellerContext;
+//# sourceMappingURL=FlowModellerContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FlowModellerContext.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModellerContext.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE1D,QAAA,MAAM,mBAAmB,2GAKvB,CAAC;AAEH,eAAe,mBAAmB,CAAC"}

package/lib/components/FlowModeller/FlowModellerContext.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+const FlowModellerContext = createContext({
+    readOnly: false,
+    highlights: { nodes: {}, connectors: {} }
+});
+export default FlowModellerContext;
+//# sourceMappingURL=FlowModellerContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FlowModellerContext.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModellerContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAKtC,MAAM,mBAAmB,GAAG,aAAa,CAEvC;IACA,QAAQ,EAAE,KAAK;IACf,UAAU,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE;CAC1C,CAAC,CAAC;AAEH,eAAe,mBAAmB,CAAC","sourcesContent":["import { createContext } from 'react';\n\nimport { FlowModellerProps } from './FlowModeller.types';\nimport { RendererProps } from './Renderer/Renderer.types';\n\nconst FlowModellerContext = createContext<\n  Pick<FlowModellerProps, 'readOnly'> & Partial<Pick<RendererProps, 'highlights'>>\n>({\n  readOnly: false,\n  highlights: { nodes: {}, connectors: {} }\n});\n\nexport default FlowModellerContext;\n"]}

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

@@ -1,12 +1,10 @@
-import { Ref, MouseEvent } from 'react';
+import { MouseEvent, KeyboardEvent } from 'react';
 import { Action, OmitStrict } from '@pega/cosmos-react-core';
 import { Node } from '../Renderer/Utils/Graph';
 import { ItemVisual, LibraryItem } from '../../ItemLibrary/ItemLibrary';
 export interface NodeType extends ItemVisual {
     id: string;
     name: string;
-    color: string;
-    icon: string;
     minConnectors: number;
     defaults: {
         node: OmitStrict<NodeProps, 'type' | 'id'>;
@@ -15,6 +13,12 @@ export interface NodeType extends ItemVisual {
         }[];
     };
 }
+export interface ReferenceProps {
+    /** id of the reference node */
+    id: string;
+    /** label of the reference node */
+    label: string;
+}
 export interface NodeProps extends Node {
     /** Unique id for Node */
     id: string;
@@ -22,19 +26,28 @@ export interface NodeProps extends Node {
     label: string;
     /** Description for Node */
     description?: string;
+    /** Referenced Node id */
+    reference?: NodeProps['id'];
     /** Additional data for Node */
     additionalData?: AdditionalDataItemProps[];
     type: NodeType;
+    error?: string;
 }
-export interface NodeComponentProps extends NodeProps {
+export interface ModellerNodeComponentProps<NodeComponentData> extends NodeProps {
+    data: NodeComponentData;
+}
+export interface NodeComponentData {
     /** Callback for the node actions click */
-    onActionClick?: (params: ActionParams, e: MouseEvent) => void;
+    onActionClick?: (params: ActionParams, e: MouseEvent | KeyboardEvent) => void;
     /** Callback for the node click */
-    onClick?: (nodeId: NodeProps['id']) => void;
+    onClick?: (nodeId: NodeProps['id'], e: MouseEvent | KeyboardEvent) => void;
+    /** Callback for node deletion */
+    onDelete?: (params: ActionParams, e: MouseEvent | KeyboardEvent) => void;
     /** Actions for the node click */
     actions?: Action[];
-    /** Ref of the node */
-    ref?: Ref<HTMLElement>;
+}
+export interface NodeComponentProps extends NodeProps, NodeComponentData {
+    referencedNode?: NodeProps;
 }
 export interface AdditionalDataItemProps {
     id: string;
@@ -44,9 +57,9 @@ export interface AdditionalDataItemProps {
 export interface ActionParams {
     actionId: string;
     nodeId: NodeProps['id'];
+    additionalData?: unknown;
 }
 export interface NodeLibraryItem extends LibraryItem {
-    id: string;
     type: NodeType;
     items?: NodeLibraryItem[];
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Node.types.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/Node.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAmB,MAAM,yBAAyB,CAAC;AAE9E,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAExE,MAAM,WAAW,QAAS,SAAQ,UAAU;IAE1C,EAAE,EAAE,MAAM,CAAC;IAEX,IAAI,EAAE,MAAM,CAAC;IAEb,KAAK,EAAE,MAAM,CAAC;IAEd,IAAI,EAAE,MAAM,CAAC;IAEb,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE;QACR,IAAI,EAAE,UAAU,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC,CAAC;QAC3C,SAAS,EAAE;YACT,KAAK,EAAE,MAAM,CAAC;SACf,EAAE,CAAC;KACL,CAAC;CACH;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI;IACrC,yBAAyB;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,cAAc,CAAC,EAAE,uBAAuB,EAAE,CAAC;IAE3C,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,0CAA0C;IAC1C,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAC9D,kCAAkC;IAClC,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC5C,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,sBAAsB;IACtB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,WAAW,uBAAuB;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AACD,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;CACzB;AAED,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;CAC3B;AAED,eAAO,MAAM,cAAc,EAAE,QAY3B,CAAC;AAEH,eAAO,MAAM,aAAa,EAAE,QAY1B,CAAC"}
+{"version":3,"file":"Node.types.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/Node.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE7D,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAExE,MAAM,WAAW,QAAS,SAAQ,UAAU;IAE1C,EAAE,EAAE,MAAM,CAAC;IAEX,IAAI,EAAE,MAAM,CAAC;IAEb,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE;QACR,IAAI,EAAE,UAAU,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC,CAAC;QAC3C,SAAS,EAAE;YACT,KAAK,EAAE,MAAM,CAAC;SACf,EAAE,CAAC;KACL,CAAC;CACH;AAED,MAAM,WAAW,cAAc;IAC7B,+BAA+B;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI;IACrC,yBAAyB;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yBAAyB;IACzB,SAAS,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;IAC5B,+BAA+B;IAC/B,cAAc,CAAC,EAAE,uBAAuB,EAAE,CAAC;IAE3C,IAAI,EAAE,QAAQ,CAAC;IAEf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,0BAA0B,CAAC,iBAAiB,CAAE,SAAQ,SAAS;IAC9E,IAAI,EAAE,iBAAiB,CAAC;CACzB;AAED,MAAM,WAAW,iBAAiB;IAChC,0CAA0C;IAC1C,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,CAAC,EAAE,UAAU,GAAG,aAAa,KAAK,IAAI,CAAC;IAC9E,kCAAkC;IAClC,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,UAAU,GAAG,aAAa,KAAK,IAAI,CAAC;IAC3E,iCAAiC;IACjC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,CAAC,EAAE,UAAU,GAAG,aAAa,KAAK,IAAI,CAAC;IACzE,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,MAAM,WAAW,kBAAmB,SAAQ,SAAS,EAAE,iBAAiB;IACtE,cAAc,CAAC,EAAE,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,uBAAuB;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AACD,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;CAC3B;AAED,eAAO,MAAM,cAAc,EAAE,QAY3B,CAAC;AAEH,eAAO,MAAM,aAAa,EAAE,QAY1B,CAAC"}

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

@@ -1,8 +1,7 @@
-import { themeDefinition } from '@pega/cosmos-react-core';
 export const START_NODETYPE = Object.freeze({
     id: 'start',
     name: 'start',
-    color: themeDefinition.base.colors.green.medium.$value,
+    color: 'green',
     icon: 'circle',
     minConnectors: 1,
     defaults: {
@@ -15,7 +14,7 @@ export const START_NODETYPE = Object.freeze({
 export const STOP_NODETYPE = Object.freeze({
     id: 'stop',
     name: 'stop',
-    color: themeDefinition.base.colors.red.light.$value,
+    color: 'red',
     icon: 'circle',
     minConnectors: 0,
     defaults: {

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

@@ -1 +1 @@
-{"version":3,"file":"Node.types.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/Node.types.ts"],"names":[],"mappings":"AAEA,OAAO,EAAsB,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAgE9E,MAAM,CAAC,MAAM,cAAc,GAAa,MAAM,CAAC,MAAM,CAAC;IACpD,EAAE,EAAE,OAAO;IACX,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;IACtD,IAAI,EAAE,QAAQ;IACd,aAAa,EAAE,CAAC;IAChB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,KAAK,EAAE,OAAO;SACf;QACD,SAAS,EAAE,EAAE;KACd;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,aAAa,GAAa,MAAM,CAAC,MAAM,CAAC;IACnD,EAAE,EAAE,MAAM;IACV,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM;IACnD,IAAI,EAAE,QAAQ;IACd,aAAa,EAAE,CAAC;IAChB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,KAAK,EAAE,MAAM;SACd;QACD,SAAS,EAAE,EAAE;KACd;CACF,CAAC,CAAC","sourcesContent":["import { Ref, MouseEvent } from 'react';\n\nimport { Action, OmitStrict, themeDefinition } from '@pega/cosmos-react-core';\n\nimport { Node } from '../Renderer/Utils/Graph';\nimport { ItemVisual, LibraryItem } from '../../ItemLibrary/ItemLibrary';\n\nexport interface NodeType extends ItemVisual {\n  /* node type id. this must be unique */\n  id: string;\n  /* human readable name of the type */\n  name: string;\n  /* color that represents the type */\n  color: string;\n  /* icon that represents the type */\n  icon: string;\n  /* min no. of connectors */\n  minConnectors: number;\n  defaults: {\n    node: OmitStrict<NodeProps, 'type' | 'id'>;\n    connector: {\n      label: string;\n    }[];\n  };\n}\n\nexport interface NodeProps extends Node {\n  /** Unique id for Node */\n  id: string;\n  /** Label for Node */\n  label: string;\n  /** Description for Node */\n  description?: string;\n  /** Additional data for Node */\n  additionalData?: AdditionalDataItemProps[];\n  /* type of the Node */\n  type: NodeType;\n}\n\nexport interface NodeComponentProps extends NodeProps {\n  /** Callback for the node actions click */\n  onActionClick?: (params: ActionParams, e: MouseEvent) => void;\n  /** Callback for the node click */\n  onClick?: (nodeId: NodeProps['id']) => void;\n  /** Actions for the node click */\n  actions?: Action[];\n  /** Ref of the node */\n  ref?: Ref<HTMLElement>;\n}\n\nexport interface AdditionalDataItemProps {\n  id: string;\n  label: string;\n  value: string;\n}\nexport interface ActionParams {\n  actionId: string;\n  nodeId: NodeProps['id'];\n}\n\nexport interface NodeLibraryItem extends LibraryItem {\n  id: string;\n  type: NodeType;\n  items?: NodeLibraryItem[];\n}\n\nexport const START_NODETYPE: NodeType = Object.freeze({\n  id: 'start',\n  name: 'start',\n  color: themeDefinition.base.colors.green.medium.$value,\n  icon: 'circle',\n  minConnectors: 1,\n  defaults: {\n    node: {\n      label: 'Start'\n    },\n    connector: []\n  }\n});\n\nexport const STOP_NODETYPE: NodeType = Object.freeze({\n  id: 'stop',\n  name: 'stop',\n  color: themeDefinition.base.colors.red.light.$value,\n  icon: 'circle',\n  minConnectors: 0,\n  defaults: {\n    node: {\n      label: 'Stop'\n    },\n    connector: []\n  }\n});\n"]}
+{"version":3,"file":"Node.types.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/Node.types.ts"],"names":[],"mappings":"AAiFA,MAAM,CAAC,MAAM,cAAc,GAAa,MAAM,CAAC,MAAM,CAAC;IACpD,EAAE,EAAE,OAAO;IACX,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,QAAQ;IACd,aAAa,EAAE,CAAC;IAChB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,KAAK,EAAE,OAAO;SACf;QACD,SAAS,EAAE,EAAE;KACd;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,aAAa,GAAa,MAAM,CAAC,MAAM,CAAC;IACnD,EAAE,EAAE,MAAM;IACV,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,KAAK;IACZ,IAAI,EAAE,QAAQ;IACd,aAAa,EAAE,CAAC;IAChB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,KAAK,EAAE,MAAM;SACd;QACD,SAAS,EAAE,EAAE;KACd;CACF,CAAC,CAAC","sourcesContent":["import { MouseEvent, KeyboardEvent } from 'react';\n\nimport { Action, OmitStrict } from '@pega/cosmos-react-core';\n\nimport { Node } from '../Renderer/Utils/Graph';\nimport { ItemVisual, LibraryItem } from '../../ItemLibrary/ItemLibrary';\n\nexport interface NodeType extends ItemVisual {\n  /* node type id. this must be unique */\n  id: string;\n  /* human readable name of the type */\n  name: string;\n  /* min no. of connectors */\n  minConnectors: number;\n  defaults: {\n    node: OmitStrict<NodeProps, 'type' | 'id'>;\n    connector: {\n      label: string;\n    }[];\n  };\n}\n\nexport interface ReferenceProps {\n  /** id of the reference node */\n  id: string;\n  /** label of the reference node */\n  label: string;\n}\n\nexport interface NodeProps extends Node {\n  /** Unique id for Node */\n  id: string;\n  /** Label for Node */\n  label: string;\n  /** Description for Node */\n  description?: string;\n  /** Referenced Node id */\n  reference?: NodeProps['id'];\n  /** Additional data for Node */\n  additionalData?: AdditionalDataItemProps[];\n  /* type of the Node */\n  type: NodeType;\n  /* error message for node */\n  error?: string;\n}\n\nexport interface ModellerNodeComponentProps<NodeComponentData> extends NodeProps {\n  data: NodeComponentData;\n}\n\nexport interface NodeComponentData {\n  /** Callback for the node actions click */\n  onActionClick?: (params: ActionParams, e: MouseEvent | KeyboardEvent) => void;\n  /** Callback for the node click */\n  onClick?: (nodeId: NodeProps['id'], e: MouseEvent | KeyboardEvent) => void;\n  /** Callback for node deletion */\n  onDelete?: (params: ActionParams, e: MouseEvent | KeyboardEvent) => void;\n  /** Actions for the node click */\n  actions?: Action[];\n}\n\nexport interface NodeComponentProps extends NodeProps, NodeComponentData {\n  referencedNode?: NodeProps;\n}\n\nexport interface AdditionalDataItemProps {\n  id: string;\n  label: string;\n  value: string;\n}\nexport interface ActionParams {\n  actionId: string;\n  nodeId: NodeProps['id'];\n  additionalData?: unknown;\n}\n\nexport interface NodeLibraryItem extends LibraryItem {\n  type: NodeType;\n  items?: NodeLibraryItem[];\n}\n\nexport const START_NODETYPE: NodeType = Object.freeze({\n  id: 'start',\n  name: 'start',\n  color: 'green',\n  icon: 'circle',\n  minConnectors: 1,\n  defaults: {\n    node: {\n      label: 'Start'\n    },\n    connector: []\n  }\n});\n\nexport const STOP_NODETYPE: NodeType = Object.freeze({\n  id: 'stop',\n  name: 'stop',\n  color: 'red',\n  icon: 'circle',\n  minConnectors: 0,\n  defaults: {\n    node: {\n      label: 'Stop'\n    },\n    connector: []\n  }\n});\n"]}