npm - @pega/cosmos-react-build - Versions diffs - 2.0.0-dev.17.0 → 2.0.0-dev.21.0 - Mend

@pega/cosmos-react-build 2.0.0-dev.17.0 → 2.0.0-dev.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (133) hide show

package/lib/components/FlowModeller/FlowModeller.d.ts CHANGED Viewed

@@ -1,13 +1,14 @@
 import { PropsWithoutRef, MouseEvent } from 'react';
 import { Action } from '@pega/cosmos-react-core';
-import { ActionParams, NodeProps, SelectedNodeParam, NodeLibraryItem } from './Node/Node.types';
+import { GraphData, ConnectorProps } from './Renderer/Utils/Graph';
+import { AddNodeHandlerParams } from './Renderer/Renderer.types';
+import { ActionParams, NodeProps, NodeLibraryItem, NodeType } from './Node/Node.types';
 export interface FlowModellerProps {
-    /** List of nodes */
-    nodes: NodeProps[];
+    graphData: GraphData<NodeProps, ConnectorProps>;
     /** Node actions */
     actions?: Action[];
     /** Callback to add node from connector */
-    onNodeAdd: (selectedNode: SelectedNodeParam) => void;
+    onNodeAdd: (nodeType: NodeType, params: AddNodeHandlerParams) => void;
     /** Callback for handling the click on the node */
     onNodeClick?: (nodeId: string) => void;
     /** Callback for actions on Node */
@@ -15,6 +16,6 @@ export interface FlowModellerProps {
     /** Types of nodes */
     nodeLibrary: NodeLibraryItem[];
 }
-declare const FlowModeller: ({ nodes, nodeLibrary, actions, onNodeAdd, onNodeClick, onNodeActionClick, ...restProps }: PropsWithoutRef<FlowModellerProps>) => JSX.Element;
+declare const FlowModeller: ({ graphData, onNodeActionClick, onNodeClick, onNodeAdd, nodeLibrary, actions }: PropsWithoutRef<FlowModellerProps>) => JSX.Element;
 export default FlowModeller;
 //# sourceMappingURL=FlowModeller.d.ts.map

package/lib/components/FlowModeller/FlowModeller.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FlowModeller.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.tsx"],"names":[],"mappings":"AAAA,OAAO,~~EACL~~,eAAe,~~EAOf~~,UAAU,~~EACX~~,MAAM,OAAO,CAAC;~~AAGf~~,OAAO,~~EACL~~,MAAM,~~EAYP~~,MAAM,yBAAyB,CAAC;~~AAMjC~~,OAAO,~~EAAE~~,~~YAAY~~,EAAE,~~SAAS~~,EAAE,~~iBAAiB~~,~~EAAE~~,eAAe,~~EAAE~~,MAAM,mBAAmB,CAAC;~~AAEhG~~,MAAM,WAAW,iBAAiB;IAChC,~~oBAAoB;IACpB~~,~~KAAK,~~EAAE,SAAS,EAAE,CAAC;~~IACnB~~,mBAAmB;IACnB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,0CAA0C;IAC1C,SAAS,EAAE,CAAC,~~YAAY~~,EAAE,~~iBAAiB~~,KAAK,IAAI,CAAC;~~IACrD~~,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,qBAAqB;IACrB,WAAW,EAAE,eAAe,EAAE,CAAC;CAChC;~~AAMD~~,QAAA,MAAM,YAAY,~~6FAQf~~,gBAAgB,iBAAiB,CAAC,~~gBAiJpC~~,CAAC;AAEF,eAAe,YAAY,CAAC"}
1	+ {"version":3,"file":"FlowModeller.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAa,UAAU,EAAoC,MAAM,OAAO,CAAC;AAEjG,OAAO,EAAE,MAAM,EAA6B,MAAM,yBAAyB,CAAC;AAE5E,OAAO,EAAiB,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAElF,OAAO,EACL,oBAAoB,EAGrB,MAAM,2BAA2B,CAAC;AAGnC,OAAO,EACL,YAAY,EACZ,SAAS,EACT,eAAe,EAGf,QAAQ,EACT,MAAM,mBAAmB,CAAC;AAG3B,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,qBAAqB;IACrB,WAAW,EAAE,eAAe,EAAE,CAAC;CAChC;AA0ID,QAAA,MAAM,YAAY,mFAOf,gBAAgB,iBAAiB,CAAC,gBAgJpC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/FlowModeller/FlowModeller.js CHANGED Viewed

@@ -1,78 +1,201 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useState, useCallback, useRef, useEffect, useMemo } from 'react';
-import styled from 'styled-components';
-import { escapeRegExp, Flex, Icon, Menu, menuHelpers, Popover, SearchInput, useAfterInitialEffect, useElement, useI18n, useOuterEvent } from '@pega/cosmos-react-core';
-import { assignmentVisual, StartNode, EndNode, DefaultNode } from './Node/NodeTemplates';
-import { StyledIcon } from './Node/NodeTemplate.styles';
-import Connector from './Connector';
-const StyledPopover = styled(Popover) `
-  min-width: 40ch;
-`;
-const FlowModeller = ({ nodes, nodeLibrary, actions, onNodeAdd, onNodeClick, onNodeActionClick, ...restProps }) => {
-    const [open, setOpen] = useState(false);
-    const buttonRefs = useRef({});
-    const nodeRef = useRef(null);
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useReducer, useCallback } from 'react';
+import { useElement, useOuterEvent } from '@pega/cosmos-react-core';
+import { DirectedGraph } from './Renderer/Utils/Graph';
+import { AddButton } from './Renderer/AddNode';
+import FlowRenderer from './Renderer/Renderer';
+import { StartNode, EndNode, DefaultNode } from './Node/NodeTemplates';
+import { START_NODETYPE, STOP_NODETYPE } from './Node/Node.types';
+import NodeLibrary from './NodeLibrary';
+const initState = {
+    showLib: false,
+    activeAddBtnMeta: {
+        target: null,
+        meta: {
+            refType: 'node',
+            refId: ''
+        }
+    },
+    graphData: { nodes: [], connectors: [] }
+};
+const reducer = (state, action) => {
+    switch (action.type) {
+        case 'showLibrary':
+            // minor optimization, not to update state.. if no change in the value
+            return action.payload.show === state.showLib
+                ? state
+                : { ...state, showLib: action.payload.show };
+        case 'setActiveAddButton':
+            state.activeAddBtnMeta = {
+                ...action.payload
+            };
+            return {
+                ...state
+            };
+        case 'setGraphData':
+            return {
+                ...state,
+                graphData: action.payload
+            };
+        default:
+            return state;
+    }
+};
+const injectPlaceholderNodes = (graphData, onAddNode) => {
+    const targetGraph = new DirectedGraph(graphData);
+    // iterate all nodes with more than one in-connectors and insert addNode.
+    targetGraph.getNodes().forEach(node => {
+        if (targetGraph.getPrevNodesCount(node.id) > 1) {
+            const metaData = {
+                refType: 'node',
+                refId: node.id
+            };
+            // create a new placeholder node
+            const addShapeNode = {
+                id: `temp-${node.id}`,
+                children: (_jsx(AddButton, { addNodeHandler: (e) => {
+                        onAddNode(e.target, metaData);
+                    } }, void 0)),
+                position: { x: 0, y: 0 },
+                dimensions: { width: 20, height: 16 }
+            };
+            targetGraph.addNode(addShapeNode);
+            // connect all in-connectors to a new node and create a new connector that connects from new node to the actual toNodeId.
+            targetGraph.getInConnectors(node.id).forEach(con => {
+                con.toNodeId = addShapeNode.id;
+            });
+            const newConnector = {
+                id: `placeholder-${addShapeNode.id}-${node.id}`,
+                fromNodeId: addShapeNode.id,
+                toNodeId: node.id,
+                points: []
+            };
+            targetGraph.addConnector(newConnector);
+        }
+    });
+    // iterate all connectors and inject addNodes.
+    targetGraph.getConnectors().forEach((con) => {
+        // Condition to skip processing placeholder connectors created in the previous step
+        if (con.id.startsWith('placeholder-')) {
+            return;
+        }
+        const metaData = {
+            refType: 'connector',
+            refId: con.id
+        };
+        const addShapeNode = {
+            id: `temp-con-${con.id}`,
+            children: (_jsx(AddButton, { addNodeHandler: (e) => {
+                    onAddNode(e.target, metaData);
+                } }, void 0)),
+            position: { x: 0, y: 0 },
+            dimensions: { width: 20, height: 16 }
+        };
+        targetGraph.addNode(addShapeNode);
+        const newConnector = {
+            id: `con-${con.id}`,
+            fromNodeId: addShapeNode.id,
+            toNodeId: con.toNodeId,
+            points: []
+        };
+        targetGraph.addConnector(newConnector);
+        con.toNodeId = addShapeNode.id;
+    });
+    return targetGraph.getGraphData();
+};
+const FlowModeller = ({ graphData, onNodeActionClick, onNodeClick, onNodeAdd, nodeLibrary, actions }) => {
+    const [state, dispatch] = useReducer(reducer, initState);
     const [popoverEl, setPopoverEl] = useElement(null);
-    const [previousNodeId, setPreviousNodeId] = useState('');
-    const [search, setSearch] = useState('');
-    const searchElRef = useRef(null);
-    const t = useI18n();
-    const searchRegex = useMemo(() => {
-        return new RegExp(escapeRegExp(search));
-    }, [search]);
-    const closeMenu = useCallback(() => {
-        setOpen(false);
-    }, []);
-    const onItemSelect = useCallback(id => {
-        const selectedNode = menuHelpers.getItem(nodeLibrary, id);
-        onNodeAdd({ nodeId: previousNodeId, node: selectedNode });
+    useEffect(() => {
+        const flowNodes = graphData.nodes.map(node => {
+            const flowNode = {
+                ...node,
+                children: _jsx(_Fragment, {}, void 0),
+                dimensions: {
+                    width: 280,
+                    height: 120
+                },
+                position: {
+                    x: 0,
+                    y: 0
+                }
+            };
+            if (node.type.id === START_NODETYPE.id) {
+                flowNode.dimensions.width = 50;
+                flowNode.dimensions.height = 50;
+                flowNode.children = (_jsx(StartNode, { id: node.id, type: node.type, label: node.label.toUpperCase() }, void 0));
+            }
+            else if (node.type.id === STOP_NODETYPE.id) {
+                flowNode.dimensions.width = 50;
+                flowNode.dimensions.height = 50;
+                flowNode.children = (_jsx(EndNode, { id: node.id, type: node.type, label: node.label.toUpperCase() }, void 0));
+            }
+            else {
+                flowNode.children = (_jsx(DefaultNode, { id: node.id, label: node.label, type: node.type, description: node.description, onActionClick: onNodeActionClick, onClick: onNodeClick, actions: actions, additionalData: node.additionalData }, void 0));
+            }
+            return flowNode;
+        });
+        const connectors = graphData.connectors.map(connector => {
+            return {
+                ...connector,
+                points: [],
+                data: {
+                    label: connector.label
+                }
+            };
+        });
+        dispatch({
+            type: 'setGraphData',
+            payload: { nodes: flowNodes, connectors }
+        });
+    }, [graphData]);
+    /**
+     * Library popover functionality
+     */
+    const closeMenu = () => {
+        dispatch({
+            type: 'showLibrary',
+            payload: {
+                show: false
+            }
+        });
+    };
+    const onLibraryItemSelect = useCallback((libItem) => {
+        onNodeAdd(libItem.type, state.activeAddBtnMeta.meta);
         closeMenu();
-    }, [previousNodeId]);
+    }, [state.activeAddBtnMeta] // TODO VERIFY whether this parameter helps or not
+    );
     const onKeydown = useCallback((e) => {
         if (e.key === 'Escape') {
             closeMenu();
         }
     }, [closeMenu]);
-    useOuterEvent('mousedown', [popoverEl, buttonRefs.current[previousNodeId]], closeMenu);
-    useEffect(() => {
-        if (open) {
-            searchElRef?.current?.focus();
-        }
-    }, [open, searchElRef.current]);
+    useOuterEvent('mousedown', [popoverEl], closeMenu);
     useEffect(() => {
         document.addEventListener('keydown', onKeydown);
         return () => {
             document.removeEventListener('keydown', onKeydown);
         };
-    }, [onKeydown]);
-    useAfterInitialEffect(() => {
-        nodeRef?.current?.focus();
-    }, [nodes]);
+    }, []);
     const items = nodeLibrary !== undefined ? nodeLibrary : [];
-    const itemsToRender = useMemo(() => {
-        return menuHelpers.mapTree(search
-            ? menuHelpers.flatten(items).filter(({ primary }) => {
-                return searchRegex.test(primary);
-            })
-            : items, node => {
-            const selectable = !node.items;
-            const nodeItem = node;
-            return {
-                ...node,
-                visual: nodeItem.type ? (_jsx(StyledIcon, Object.assign({ id: node.id, type: nodeItem.type }, { children: _jsx(Icon, { name: assignmentVisual[nodeItem.type] }, void 0) }), void 0)) : undefined,
-                count: node.items ? node.items.length : undefined,
-                secondary: node.secondary,
-                selected: selectable ? !!node.selected : undefined
-            };
+    const onNodeCreate = (el, meta) => {
+        dispatch({
+            type: 'setActiveAddButton',
+            payload: {
+                target: el,
+                meta
+            }
+        });
+        // TODO try to merge both the above and below dispatches into one
+        dispatch({
+            type: 'showLibrary',
+            payload: {
+                show: true
+            }
         });
-    }, [search, nodeLibrary, searchRegex]);
-    return (_jsxs(Flex, Object.assign({ container: { justify: 'center', direction: 'column' } }, restProps, { children: [nodes.map(node => (_jsxs(Fragment, { children: [node.type === 'start' && (_jsx(StartNode, { id: node.id, type: node.type, label: t('start').toUpperCase() }, void 0)), node.type !== 'start' && node.type !== 'stop' && (_jsx(DefaultNode, { id: node.id, ref: nodeRef, label: node.label, type: node.type, description: node.description, onActionClick: onNodeActionClick, onClick: onNodeClick, actions: actions, additionalData: node.additionalData }, void 0)), node.type === 'stop' && (_jsx(EndNode, { id: node.id, type: node.type, label: t('end').toUpperCase() }, void 0)), node.connectors &&
-                        node.connectors?.map(({ id, label, targetNodeId }) => (_jsx(Connector, { id: id, label: label, ref: el => {
-                                buttonRefs.current[node.id] = el;
-                            }, targetNodeId: targetNodeId, onAddClick: () => {
-                                setPreviousNodeId(node.id);
-                                setOpen(cur => !cur);
-                            }, active: open && previousNodeId === node.id }, id)))] }, node.id))), _jsx(StyledPopover, Object.assign({ show: open, target: previousNodeId ? buttonRefs.current[previousNodeId] : null, ref: setPopoverEl }, { children: _jsx(Menu, { items: itemsToRender, onItemClick: onItemSelect, header: _jsx(SearchInput, { ref: searchElRef, onSearchChange: setSearch, value: search, searchInputAriaLabel: t('search_nodes'), placeholder: t('search_nodes') }, void 0) }, void 0) }), void 0)] }), void 0));
+    };
+    const newGraphData = injectPlaceholderNodes(state.graphData, onNodeCreate);
+    return (_jsxs("div", { children: [_jsx(FlowRenderer, { graphData: newGraphData }, void 0), _jsx(NodeLibrary, { show: state.showLib, target: state.activeAddBtnMeta.target, items: items, onClick: onLibraryItemSelect, ref: setPopoverEl }, void 0)] }, void 0));
 };
 export default FlowModeller;
 //# sourceMappingURL=FlowModeller.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FlowModeller.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n PropsWithoutRef,\n Fragment,\n useState,\n useCallback,\n useRef,\n useEffect,\n useMemo,\n MouseEvent\n} from 'react';\nimport styled from 'styled-components';\n\nimport {\n Action,\n escapeRegExp,\n Flex,\n Icon,\n Menu,\n menuHelpers,\n Popover,\n SearchInput,\n useAfterInitialEffect,\n useElement,\n useI18n,\n useOuterEvent\n} from '@pega/cosmos-react-core';\nimport { MenuItemProps } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';\n\nimport { assignmentVisual, StartNode, EndNode, DefaultNode } from './Node/NodeTemplates';\nimport { StyledIcon } from './Node/NodeTemplate.styles';\nimport Connector from './Connector';\nimport { ActionParams, NodeProps, SelectedNodeParam, NodeLibraryItem } from './Node/Node.types';\n\nexport interface FlowModellerProps {\n /** List of nodes /\n nodes: NodeProps[];\n /* Node actions /\n actions?: Action[];\n /* Callback to add node from connector /\n onNodeAdd: (selectedNode: SelectedNodeParam) => 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\nconst StyledPopover: typeof Popover = styled(Popover)`\n min-width: 40ch;\n`;\n\nconst FlowModeller = ({\n nodes,\n nodeLibrary,\n actions,\n onNodeAdd,\n onNodeClick,\n onNodeActionClick,\n ...restProps\n}: PropsWithoutRef<FlowModellerProps>) => {\n const [open, setOpen] = useState(false);\n const buttonRefs = useRef<{ [key: string]: HTMLButtonElement \| null }>({});\n const nodeRef = useRef<HTMLElement>(null);\n const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n const [previousNodeId, setPreviousNodeId] = useState('');\n const [search, setSearch] = useState('');\n const searchElRef = useRef<HTMLInputElement>(null);\n const t = useI18n();\n const searchRegex = useMemo(() => {\n return new RegExp(escapeRegExp(search));\n }, [search]);\n\n const closeMenu = useCallback(() => {\n setOpen(false);\n }, []);\n\n const onItemSelect = useCallback(\n id => {\n const selectedNode = menuHelpers.getItem(nodeLibrary, id) as NodeLibraryItem;\n onNodeAdd({ nodeId: previousNodeId, node: selectedNode });\n closeMenu();\n },\n [previousNodeId]\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, buttonRefs.current[previousNodeId]], closeMenu);\n\n useEffect(() => {\n if (open) {\n searchElRef?.current?.focus();\n }\n }, [open, searchElRef.current]);\n\n useEffect(() => {\n document.addEventListener('keydown', onKeydown);\n return () => {\n document.removeEventListener('keydown', onKeydown);\n };\n }, [onKeydown]);\n\n useAfterInitialEffect(() => {\n nodeRef?.current?.focus();\n }, [nodes]);\n\n const items: NodeLibraryItem[] = nodeLibrary !== undefined ? nodeLibrary : [];\n\n const itemsToRender = useMemo(() => {\n return menuHelpers.mapTree(\n search\n ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n return searchRegex.test(primary);\n })\n : items,\n node => {\n const selectable = !node.items;\n\n const nodeItem: NodeLibraryItem = node as NodeLibraryItem;\n return {\n ...node,\n visual: nodeItem.type ? (\n <StyledIcon id={node.id} type={nodeItem.type}>\n <Icon name={assignmentVisual[nodeItem.type]} />\n </StyledIcon>\n ) : undefined,\n count: node.items ? node.items.length : undefined,\n secondary: node.secondary,\n selected: selectable ? !!node.selected : undefined\n };\n }\n );\n }, [search, nodeLibrary, searchRegex]);\n\n return (\n <Flex container={{ justify: 'center', direction: 'column' }} {...restProps}>\n {nodes.map(node => (\n <Fragment key={node.id}>\n {node.type === 'start' && (\n <StartNode id={node.id} type={node.type} label={t('start').toUpperCase()} />\n )}\n {node.type !== 'start' && node.type !== 'stop' && (\n <DefaultNode\n id={node.id}\n ref={nodeRef}\n label={node.label}\n type={node.type}\n description={node.description}\n onActionClick={onNodeActionClick}\n onClick={onNodeClick}\n actions={actions}\n additionalData={node.additionalData}\n />\n )}\n {node.type === 'stop' && (\n <EndNode id={node.id} type={node.type} label={t('end').toUpperCase()} />\n )}\n {node.connectors &&\n node.connectors?.map(({ id, label, targetNodeId }) => (\n <Connector\n key={id}\n id={id}\n label={label}\n ref={el => {\n buttonRefs.current[node.id] = el;\n }}\n targetNodeId={targetNodeId}\n onAddClick={() => {\n setPreviousNodeId(node.id);\n setOpen(cur => !cur);\n }}\n active={open && previousNodeId === node.id}\n />\n ))}\n </Fragment>\n ))}\n <StyledPopover\n show={open}\n target={previousNodeId ? buttonRefs.current[previousNodeId] : null}\n ref={setPopoverEl}\n >\n <Menu\n items={itemsToRender}\n onItemClick={onItemSelect}\n header={\n <SearchInput\n ref={searchElRef}\n onSearchChange={setSearch}\n value={search}\n searchInputAriaLabel={t('search_nodes')}\n placeholder={t('search_nodes')}\n />\n }\n />\n </StyledPopover>\n </Flex>\n );\n};\n\nexport default FlowModeller;\n"]}
1	+ {"version":3,"file":"FlowModeller.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAmB,SAAS,EAAc,UAAU,EAAW,WAAW,EAAE,MAAM,OAAO,CAAC;AAEjG,OAAO,EAAU,UAAU,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE5E,OAAO,EAAE,aAAa,EAA6B,MAAM,wBAAwB,CAAC;AAClF,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAM/C,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,WAAW,MAAM,eAAe,CAAC;AAyBxC,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;CACzC,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;aACT,CAAC;QACJ,KAAK,cAAc;YACjB,OAAO;gBACL,GAAG,KAAK;gBACR,SAAS,EAAE,MAAM,CAAC,OAAO;aAC1B,CAAC;QACJ;YACE,OAAO,KAAK,CAAC;KAChB;AACH,CAAC,CAAC;AAMF,MAAM,sBAAsB,GAGgC,CAAC,SAAS,EAAE,SAAS,EAAE,EAAE;IACnF,MAAM,WAAW,GAAG,IAAI,aAAa,CAAC,SAAS,CAAC,CAAC;IAEjD,yEAAyE;IACzE,WAAW,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;QACpC,IAAI,WAAW,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE;YAC9C,MAAM,QAAQ,GAAyB;gBACrC,OAAO,EAAE,MAAM;gBACf,KAAK,EAAE,IAAI,CAAC,EAAE;aACf,CAAC;YAEF,gCAAgC;YAChC,MAAM,YAAY,GAAiB;gBACjC,EAAE,EAAE,QAAQ,IAAI,CAAC,EAAE,EAAE;gBACrB,QAAQ,EAAE,CACR,KAAC,SAAS,IACR,cAAc,EAAE,CAAC,CAAgC,EAAE,EAAE;wBACnD,SAAS,CAAC,CAAC,CAAC,MAAqB,EAAE,QAAQ,CAAC,CAAC;oBAC/C,CAAC,WACD,CACH;gBACD,QAAQ,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;gBACxB,UAAU,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;aACtC,CAAC;YAEF,WAAW,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;YAElC,yHAAyH;YACzH,WAAW,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;gBACjD,GAAG,CAAC,QAAQ,GAAG,YAAY,CAAC,EAAE,CAAC;YACjC,CAAC,CAAC,CAAC;YAEH,MAAM,YAAY,GAA2B;gBAC3C,EAAE,EAAE,eAAe,YAAY,CAAC,EAAE,IAAI,IAAI,CAAC,EAAE,EAAE;gBAC/C,UAAU,EAAE,YAAY,CAAC,EAAE;gBAC3B,QAAQ,EAAE,IAAI,CAAC,EAAE;gBACjB,MAAM,EAAE,EAAE;aACX,CAAC;YAEF,WAAW,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;SACxC;IACH,CAAC,CAAC,CAAC;IAEH,8CAA8C;IAC9C,WAAW,CAAC,aAAa,EAAE,CAAC,OAAO,CAAC,CAAC,GAA2B,EAAE,EAAE;QAClE,mFAAmF;QACnF,IAAI,GAAG,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,EAAE;YACrC,OAAO;SACR;QAED,MAAM,QAAQ,GAAyB;YACrC,OAAO,EAAE,WAAW;YACpB,KAAK,EAAE,GAAG,CAAC,EAAE;SACd,CAAC;QAEF,MAAM,YAAY,GAAiB;YACjC,EAAE,EAAE,YAAY,GAAG,CAAC,EAAE,EAAE;YACxB,QAAQ,EAAE,CACR,KAAC,SAAS,IACR,cAAc,EAAE,CAAC,CAAgC,EAAE,EAAE;oBACnD,SAAS,CAAC,CAAC,CAAC,MAAqB,EAAE,QAAQ,CAAC,CAAC;gBAC/C,CAAC,WACD,CACH;YACD,QAAQ,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;YACxB,UAAU,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;SACtC,CAAC;QAEF,WAAW,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QAElC,MAAM,YAAY,GAA2B;YAC3C,EAAE,EAAE,OAAO,GAAG,CAAC,EAAE,EAAE;YACnB,UAAU,EAAE,YAAY,CAAC,EAAE;YAC3B,QAAQ,EAAE,GAAG,CAAC,QAAQ;YACtB,MAAM,EAAE,EAAE;SACX,CAAC;QAEF,WAAW,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;QACvC,GAAG,CAAC,QAAQ,GAAG,YAAY,CAAC,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,OAAO,WAAW,CAAC,YAAY,EAAE,CAAC;AACpC,CAAC,CAAC;AAEF,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;IAEtF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,CAAc,IAAI,CAAC,CAAC;IAEhE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAwB,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAChE,MAAM,QAAQ,GAAsB;gBAClC,GAAG,IAAI;gBACP,QAAQ,EAAE,2BAAK;gBACf,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,EAAE;gBACtC,QAAQ,CAAC,UAAU,CAAC,KAAK,GAAG,EAAE,CAAC;gBAC/B,QAAQ,CAAC,UAAU,CAAC,MAAM,GAAG,EAAE,CAAC;gBAEhC,QAAQ,CAAC,QAAQ,GAAG,CAClB,KAAC,SAAS,IAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,WAAI,CAC7E,CAAC;aACH;iBAAM,IAAI,IAAI,CAAC,IAAI,CAAC,EAAE,KAAK,aAAa,CAAC,EAAE,EAAE;gBAC5C,QAAQ,CAAC,UAAU,CAAC,KAAK,GAAG,EAAE,CAAC;gBAC/B,QAAQ,CAAC,UAAU,CAAC,MAAM,GAAG,EAAE,CAAC;gBAEhC,QAAQ,CAAC,QAAQ,GAAG,CAClB,KAAC,OAAO,IAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,WAAI,CAC3E,CAAC;aACH;iBAAM;gBACL,QAAQ,CAAC,QAAQ,GAAG,CAClB,KAAC,WAAW,IACV,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,aAAa,EAAE,iBAAiB,EAChC,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,IAAI,CAAC,cAAc,WACnC,CACH,CAAC;aACH;YAED,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,QAAQ,CAAC;YACP,IAAI,EAAE,cAAc;YACpB,OAAO,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE;SAC1C,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB;;OAEG;IACH,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,MAAM,mBAAmB,GAAG,WAAW,CACrC,CAAC,OAAwB,EAAE,EAAE;QAC3B,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QAErD,SAAS,EAAE,CAAC;IACd,CAAC,EACD,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,kDAAkD;KAC5E,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,MAAM,YAAY,GAAG,CAAC,EAAe,EAAE,IAA0B,EAAE,EAAE;QACnE,QAAQ,CAAC;YACP,IAAI,EAAE,oBAAoB;YAC1B,OAAO,EAAE;gBACP,MAAM,EAAE,EAAE;gBACV,IAAI;aACL;SACF,CAAC,CAAC;QAEH,iEAAiE;QACjE,QAAQ,CAAC;YACP,IAAI,EAAE,aAAa;YACnB,OAAO,EAAE;gBACP,IAAI,EAAE,IAAI;aACX;SACF,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,YAAY,GAAyD,sBAAsB,CAC/F,KAAK,CAAC,SAAS,EACf,YAAY,CACb,CAAC;IAEF,OAAO,CACL,0BACE,KAAC,YAAY,IAAC,SAAS,EAAE,YAAY,WAAI,EACzC,KAAC,WAAW,IACV,IAAI,EAAE,KAAK,CAAC,OAAO,EACnB,MAAM,EAAE,KAAK,CAAC,gBAAgB,CAAC,MAAM,EACrC,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,mBAAmB,EAC5B,GAAG,EAAE,YAAY,WACjB,YACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { PropsWithoutRef, useEffect, MouseEvent, useReducer, Reducer, useCallback } from 'react';\n\nimport { Action, useElement, useOuterEvent } from '@pega/cosmos-react-core';\n\nimport { DirectedGraph, GraphData, ConnectorProps } from './Renderer/Utils/Graph';\nimport { AddButton } from './Renderer/AddNode';\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 NodeLibrary from './NodeLibrary';\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};\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};\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 };\n case 'setGraphData':\n return {\n ...state,\n graphData: action.payload\n };\n default:\n return state;\n }\n};\n\ninterface AddNodeProps extends RendererNodeProps {\n onClick?: (ev: Event) => void;\n}\n\nconst injectPlaceholderNodes: (\n graphData: GraphData<RendererNodeProps, RendererConnectorProps>,\n onAddNode: (el: HTMLElement, meta: AddNodeHandlerParams) => void\n) => GraphData<RendererNodeProps, RendererConnectorProps> = (graphData, onAddNode) => {\n const targetGraph = new DirectedGraph(graphData);\n\n // iterate all nodes with more than one in-connectors and insert addNode.\n targetGraph.getNodes().forEach(node => {\n if (targetGraph.getPrevNodesCount(node.id) > 1) {\n const metaData: AddNodeHandlerParams = {\n refType: 'node',\n refId: node.id\n };\n\n // create a new placeholder node\n const addShapeNode: AddNodeProps = {\n id: `temp-${node.id}`,\n children: (\n <AddButton\n addNodeHandler={(e: MouseEvent<HTMLButtonElement>) => {\n onAddNode(e.target as HTMLElement, metaData);\n }}\n />\n ),\n position: { x: 0, y: 0 },\n dimensions: { width: 20, height: 16 }\n };\n\n targetGraph.addNode(addShapeNode);\n\n // connect all in-connectors to a new node and create a new connector that connects from new node to the actual toNodeId.\n targetGraph.getInConnectors(node.id).forEach(con => {\n con.toNodeId = addShapeNode.id;\n });\n\n const newConnector: RendererConnectorProps = {\n id: `placeholder-${addShapeNode.id}-${node.id}`,\n fromNodeId: addShapeNode.id,\n toNodeId: node.id,\n points: []\n };\n\n targetGraph.addConnector(newConnector);\n }\n });\n\n // iterate all connectors and inject addNodes.\n targetGraph.getConnectors().forEach((con: RendererConnectorProps) => {\n // Condition to skip processing placeholder connectors created in the previous step\n if (con.id.startsWith('placeholder-')) {\n return;\n }\n\n const metaData: AddNodeHandlerParams = {\n refType: 'connector',\n refId: con.id\n };\n\n const addShapeNode: AddNodeProps = {\n id: `temp-con-${con.id}`,\n children: (\n <AddButton\n addNodeHandler={(e: MouseEvent<HTMLButtonElement>) => {\n onAddNode(e.target as HTMLElement, metaData);\n }}\n />\n ),\n position: { x: 0, y: 0 },\n dimensions: { width: 20, height: 16 }\n };\n\n targetGraph.addNode(addShapeNode);\n\n const newConnector: RendererConnectorProps = {\n id: `con-${con.id}`,\n fromNodeId: addShapeNode.id,\n toNodeId: con.toNodeId,\n points: []\n };\n\n targetGraph.addConnector(newConnector);\n con.toNodeId = addShapeNode.id;\n });\n\n return targetGraph.getGraphData();\n};\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\n const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n\n useEffect(() => {\n const flowNodes: RendererNodeProps[] = graphData.nodes.map(node => {\n const flowNode: RendererNodeProps = {\n ...node,\n children: <></>,\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) {\n flowNode.dimensions.width = 50;\n flowNode.dimensions.height = 50;\n\n flowNode.children = (\n <StartNode id={node.id} type={node.type} label={node.label.toUpperCase()} />\n );\n } else if (node.type.id === STOP_NODETYPE.id) {\n flowNode.dimensions.width = 50;\n flowNode.dimensions.height = 50;\n\n flowNode.children = (\n <EndNode id={node.id} type={node.type} label={node.label.toUpperCase()} />\n );\n } else {\n flowNode.children = (\n <DefaultNode\n id={node.id}\n label={node.label}\n type={node.type}\n description={node.description}\n onActionClick={onNodeActionClick}\n onClick={onNodeClick}\n actions={actions}\n additionalData={node.additionalData}\n />\n );\n }\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 dispatch({\n type: 'setGraphData',\n payload: { nodes: flowNodes, connectors }\n });\n }, [graphData]);\n\n /\n Library popover functionality\n */\n const closeMenu = () => {\n dispatch({\n type: 'showLibrary',\n payload: {\n show: false\n }\n });\n };\n\n const onLibraryItemSelect = useCallback(\n (libItem: NodeLibraryItem) => {\n onNodeAdd(libItem.type, state.activeAddBtnMeta.meta);\n\n closeMenu();\n },\n [state.activeAddBtnMeta] // TODO VERIFY whether this parameter helps or not\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 const onNodeCreate = (el: HTMLElement, meta: AddNodeHandlerParams) => {\n dispatch({\n type: 'setActiveAddButton',\n payload: {\n target: el,\n meta\n }\n });\n\n // TODO try to merge both the above and below dispatches into one\n dispatch({\n type: 'showLibrary',\n payload: {\n show: true\n }\n });\n };\n\n const newGraphData: GraphData<RendererNodeProps, RendererConnectorProps> = injectPlaceholderNodes(\n state.graphData,\n onNodeCreate\n );\n\n return (\n <div>\n <FlowRenderer graphData={newGraphData} />\n <NodeLibrary\n show={state.showLib}\n target={state.activeAddBtnMeta.target}\n items={items}\n onClick={onLibraryItemSelect}\n ref={setPopoverEl}\n />\n </div>\n );\n};\n\nexport default FlowModeller;\n"]}

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

@@ -1,7 +1,20 @@
 import { Ref, MouseEvent } from 'react';
-import { Action, MenuItemProps } from '@pega/cosmos-react-core';
-import { ConnectorProps } from '../Connector';
-export interface NodeProps {
+import { Action, MenuItemProps, OmitStrict } from '@pega/cosmos-react-core';
+import { Node } from '../Renderer/Utils/Graph';
+export interface NodeType {
+    id: string;
+    name: string;
+    color: string;
+    icon: string;
+    minConnectors: number;
+    defaults: {
+        node: OmitStrict<NodeProps, 'type' | 'id'>;
+        connector: {
+            label: string;
+        }[];
+    };
+}
+export interface NodeProps extends Node {
     /** Unique id for Node */
     id: string;
     /** Label for Node */
@@ -9,14 +22,8 @@ export interface NodeProps {
     /** Description for Node */
     description?: string;
     /** Additional data for Node */
-    additionalData?: {
-        label: string;
-        value: string;
-    }[];
-    /** Type of the Node */
-    type: 'start' | 'stop' | 'assignment' | 'decision' | 'question' | 'message' | 'automation';
-    /** Connectors for the node */
-    connectors?: ConnectorProps[];
+    additionalData?: AdditionalDataItemProps[];
+    type: NodeType;
 }
 export interface NodeComponentProps extends NodeProps {
     /** Callback for the node actions click */
@@ -28,17 +35,20 @@ export interface NodeComponentProps extends NodeProps {
     /** Ref of the node */
     ref?: Ref<HTMLElement>;
 }
+export interface AdditionalDataItemProps {
+    id: string;
+    label: string;
+    value: string;
+}
 export interface ActionParams {
     actionId: string;
     nodeId: NodeProps['id'];
 }
-export interface SelectedNodeParam {
-    nodeId: NodeProps['id'];
-    node: NodeLibraryItem;
-}
 export interface NodeLibraryItem extends MenuItemProps {
     id: string;
-    type?: NodeProps['type'];
+    type: NodeType;
     items?: NodeLibraryItem[];
 }
+export declare const START_NODETYPE: NodeType;
+export declare const STOP_NODETYPE: NodeType;
 //# sourceMappingURL=Node.types.d.ts.map

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

	@@ -1 +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,aAAa,EAAE,MAAM,yBAAyB,CAAC;~~AAEhE~~,OAAO,EAAE,~~cAAc~~,EAAE,MAAM,~~cAAc~~,CAAC;~~AAE9C~~,MAAM,WAAW,~~SAAS~~;~~IACxB~~,~~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;~~QACf~~,~~KAAK~~,EAAE,MAAM,CAAC;~~QACd~~,KAAK,EAAE,MAAM,CAAC;~~KACf~~,EAAE,CAAC;~~IACJ~~,~~uBAAuB~~;~~IACvB~~,IAAI,EAAE,~~OAAO~~,~~GAAG,~~MAAM,~~GAAG~~,~~YAAY~~,~~GAAG~~,~~UAAU~~,~~GAAG~~,~~UAAU~~,~~GAAG~~,~~SAAS~~,~~GAAG~~,~~YAAY~~,CAAC;~~IAC3F,8BAA8B~~;~~IAC9B~~,~~UAAU~~,CAAC,EAAE,~~cAAc~~,EAAE,CAAC;~~CAC/B~~;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,~~YAAY~~;~~IAC3B~~,~~QAAQ~~,EAAE,MAAM,CAAC;~~IACjB~~,~~MAAM~~,EAAE,~~SAAS~~,CAAC,~~IAAI~~,~~CAAC~~,CAAC;~~CACzB~~;~~AAED~~,MAAM,WAAW,~~iBAAiB~~;~~IAChC~~,~~MAAM~~,EAAE,~~SAAS~~,CAAC,~~IAAI~~,~~CAAC~~,CAAC~~;IACxB~~,IAAI,~~EAAE~~,~~eAAe,~~CAAC;~~CACvB~~;AAED,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,~~SAAS~~,CAAC,MAAM,~~CAAC~~,CAAC;~~IACzB~~,~~KAAK~~,~~CAAC~~,EAAE,~~eAAe~~,~~EAAE,~~CAAC~~;CAC3B~~"}
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,aAAa,EAAE,UAAU,EAAmB,MAAM,yBAAyB,CAAC;AAE7F,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C,MAAM,WAAW,QAAQ;IAEvB,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,aAAa;IACpD,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"}

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

@@ -1,2 +1,28 @@
-export {};
+import { themeDefinition } from '@pega/cosmos-react-core';
+export const START_NODETYPE = Object.freeze({
+    id: 'start',
+    name: 'start',
+    color: themeDefinition.base.colors.green.medium.$value,
+    icon: 'circle',
+    minConnectors: 1,
+    defaults: {
+        node: {
+            label: 'Start'
+        },
+        connector: []
+    }
+});
+export const STOP_NODETYPE = Object.freeze({
+    id: 'stop',
+    name: 'stop',
+    color: themeDefinition.base.colors.red.light.$value,
+    icon: 'circle',
+    minConnectors: 0,
+    defaults: {
+        node: {
+            label: 'Stop'
+        },
+        connector: []
+    }
+});
 //# sourceMappingURL=Node.types.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Node.types.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/Node.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Ref, MouseEvent } from 'react';\n\nimport { Action, MenuItemProps } from '@pega/cosmos-react-core';\n\nimport { ~~ConnectorProps~~ } from '../~~Connector~~';\n\nexport interface ~~NodeProps~~ {\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?:~~ {\n ~~label~~: ~~string;\~~n ~~value~~: string;\n }[];\n /* ~~Type~~ of ~~the~~ Node /\n ~~type~~: ~~'start'~~ \| ~~'stop'~~ \| ~~'assignment'~~ \| ~~'decision'~~ \| ~~'question'~~ \| ~~'message' \| 'automation'~~;\n /* ~~Connectors~~ for ~~the~~ ~~node~~ /\n ~~connectors~~?: ~~ConnectorProps~~[];\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 ActionParams {\n actionId: string;\n nodeId: NodeProps['id'];\n}\n\nexport interface ~~SelectedNodeParam~~ {\n ~~nodeId~~: ~~NodeProps['id']~~;\n ~~node~~: NodeLibraryItem;\n}\n\nexport ~~interface~~ ~~NodeLibraryItem~~ ~~extends~~ ~~MenuItemProps~~ {\n id: ~~string;\~~n ~~type?:~~ ~~NodeProps[~~'~~type~~'];\n ~~items?:~~ ~~NodeLibraryItem~~[];\n}\n"]}
1	+ {"version":3,"file":"Node.types.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/Node.types.ts"],"names":[],"mappings":"AAEA,OAAO,EAAqC,eAAe,EAAE,MAAM,yBAAyB,CAAC;AA+D7F,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, MenuItemProps, OmitStrict, themeDefinition } from '@pega/cosmos-react-core';\n\nimport { Node } from '../Renderer/Utils/Graph';\n\nexport interface NodeType {\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 MenuItemProps {\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"]}

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

@@ -1,14 +1,19 @@
-import { NodeProps } from './Node.types';
+import { NodeType } from './Node.types';
 export declare const StyledCircle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    type: string;
+    color: NodeType['color'];
 }, never>;
 export declare const StyledLabel: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").LabelProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {
-    type: string;
+    type: NodeType;
+}, never>;
+export declare const StyledIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    color: string;
 }, never>;
-export declare const StyledIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<NodeProps, "type">, never>;
 export declare const StyledCardHeader: 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 StyledAdditionalData: 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>;
 //# sourceMappingURL=NodeTemplate.styles.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"NodeTemplate.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplate.styles.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,~~SAAS~~,EAAE,MAAM,cAAc,CAAC;~~AAEzC~~,eAAO,MAAM,YAAY;~~UAAsB~~,~~MAAM~~;~~SAanD~~,CAAC;AAIH,eAAO,MAAM,WAAW;UAAyB,~~MAAM~~;~~SAWrD~~,CAAC;AAIH,eAAO,MAAM,UAAU,~~8HAqBrB~~,CAAC;AAIH,eAAO,MAAM,gBAAgB,~~4GAO3B~~,CAAC;AAIH,eAAO,MAAM,UAAU,mOAOrB,CAAC;AAIH,eAAO,MAAM,UAAU,mOAoBrB,CAAC;AAIH,eAAO,MAAM,iBAAiB,~~yGAY5B~~,CAAC;AAIH,eAAO,MAAM,oBAAoB,~~yGAY/B~~,CAAC"}
1	+ {"version":3,"file":"NodeTemplate.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplate.styles.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,eAAO,MAAM,YAAY;WAAuB,QAAQ,CAAC,OAAO,CAAC;SAY/D,CAAC;AAIH,eAAO,MAAM,WAAW;UAAyB,QAAQ;SAWvD,CAAC;AAIH,eAAO,MAAM,UAAU;WAAuB,MAAM;SAalD,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,yGAW5B,CAAC;AAIH,eAAO,MAAM,oBAAoB,wGAEhC,CAAC;AAEF,eAAO,MAAM,wBAAwB,yGAMnC,CAAC;AAGH,eAAO,MAAM,sBAAsB,mOAQjC,CAAC"}