npm - @pega/cosmos-react-build - Versions diffs - 3.0.0-dev.4.1 → 3.0.0-dev.6.0 - Mend

@pega/cosmos-react-build 3.0.0-dev.4.1 → 3.0.0-dev.6.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 (152) hide show

package/lib/components/FlowModeller/Connector.js ADDED Viewed

@@ -0,0 +1,34 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from 'styled-components';
+import { defaultThemeProp, Flex, Text } from '@pega/cosmos-react-core';
+import { AddButton } from './AddNode';
+const StyledLabel = styled(Text)(({ theme, highlight }) => {
+    return css `
+    border-radius: ${theme.base['border-radius']};
+    background: ${theme.base.colors.slate.dark};
+    ${highlight &&
+        css `
+       {
+        background-color: ${theme.base.colors.red.dark};
+      }
+    `}
+    color: ${theme.base.colors.white};
+    text-align: center;
+    padding: calc(0.5 * ${theme.base.spacing}) ${theme.base.spacing};
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 32ch;
+    white-space: nowrap;
+  `;
+});
+StyledLabel.defaultProps = defaultThemeProp;
+const Connector = ({ id, labelLayout, highlight, data, realConnectors }) => {
+    const refId = realConnectors || id;
+    const metaData = {
+        refType: 'connector',
+        refId
+    };
+    return (_jsxs(_Fragment, { children: [labelLayout?.value && (_jsx(Flex, { container: { justify: 'center' }, children: _jsx(StyledLabel, { highlight: highlight, children: labelLayout.value }) })), _jsx(AddButton, { highlight: highlight, addNodeHandler: (e) => data?.onNodeCreate(e.currentTarget, metaData) })] }));
+};
+export default Connector;
+//# sourceMappingURL=Connector.js.map

package/lib/components/FlowModeller/Connector.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Connector.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/Connector.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEvE,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAItC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,CAAyB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;IAChF,OAAO,GAAG,CAAA;qBACS,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;kBAC9B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI;MACxC,SAAS;QACX,GAAG,CAAA;;4BAEqB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI;;KAEjD;aACQ,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;0BAEV,KAAK,CAAC,IAAI,CAAC,OAAO,KAAK,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;GAKhE,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAK5C,MAAM,SAAS,GAAG,CAAC,EAAE,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,cAAc,EAAkB,EAAE,EAAE;IACzF,MAAM,KAAK,GAAG,cAAc,IAAI,EAAE,CAAC;IAEnC,MAAM,QAAQ,GAAyB;QACrC,OAAO,EAAE,WAAW;QACpB,KAAK;KACN,CAAC;IAEF,OAAO,CACL,8BACG,WAAW,EAAE,KAAK,IAAI,CACrB,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,YACpC,KAAC,WAAW,IAAC,SAAS,EAAE,SAAS,YAAG,WAAW,CAAC,KAAK,GAAe,GAC/D,CACR,EACD,KAAC,SAAS,IACR,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,CAAC,CAAgC,EAAE,EAAE,CACnD,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,aAAa,EAAE,QAAQ,CAAC,GAE/C,IACD,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, Flex, Text } from '@pega/cosmos-react-core';\n\nimport { AddButton } from './AddNode';\nimport { AddNodeHandlerParams, RendererConnectorProps } from './Renderer/Renderer.types';\nimport { PlaceHolderConnector } from './Utils/addNodeUtils';\n\nconst StyledLabel = styled(Text)<{ highlight: boolean }>(({ theme, highlight }) => {\n return css`\n border-radius: ${theme.base['border-radius']};\n background: ${theme.base.colors.slate.dark};\n ${highlight &&\n css`\n {\n background-color: ${theme.base.colors.red.dark};\n }\n `}\n color: ${theme.base.colors.white};\n text-align: center;\n padding: calc(0.5 * ${theme.base.spacing}) ${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\ntype ConnectorProps = Pick<RendererConnectorProps, 'id' | 'data' | 'labelLayout' | 'highlight'> &\n Partial<Pick<PlaceHolderConnector, 'realConnectors'>>;\n\nconst Connector = ({ id, labelLayout, highlight, data, realConnectors }: ConnectorProps) => {\n const refId = realConnectors || id;\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 highlight={highlight}>{labelLayout.value}</StyledLabel>\n </Flex>\n )}\n <AddButton\n highlight={highlight}\n addNodeHandler={(e: MouseEvent<HTMLButtonElement>) =>\n data?.onNodeCreate(e.currentTarget, metaData)\n }\n />\n </>\n );\n};\n\nexport default Connector;\n"]}

package/lib/components/FlowModeller/DeletePopover.d.ts ADDED Viewed

@@ -0,0 +1,26 @@
+import { ChangeEvent, Ref } from 'react';
+import { PopoverProps } from '@pega/cosmos-react-core';
+import { GraphData, ConnectorProps } from './Renderer/Utils/Graph';
+import { GraphDataAsMap } from './Utils/deleteNodeUtils';
+export interface DeleteNodeOutcome {
+    graphData: GraphData;
+    updates: {
+        connectors: ConnectorProps[];
+    };
+    deletes: GraphDataAsMap;
+}
+export interface DeleteNodePopoverProps {
+    show: boolean;
+    target: PopoverProps['target'];
+    flowGraphData: GraphData;
+    rendererGraphData: GraphData;
+    nodeId: string;
+    onChange?: (itemsToDelete: GraphDataAsMap, itemsToRetain: GraphDataAsMap | undefined, ev?: ChangeEvent) => void;
+    ref?: Ref<HTMLDivElement>;
+    onSubmit?: (outcome: DeleteNodeOutcome, ev: Event) => void;
+    onCancel?: () => void;
+}
+export declare const StyledDeletePopover: import("styled-components").StyledComponent<(<Modifiers extends string = string>(props: PopoverProps<Modifiers> & import("@pega/cosmos-react-core").ForwardProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null), import("styled-components").DefaultTheme, {}, never>;
+declare const DeletePopover: import("react").ForwardRefExoticComponent<Pick<DeleteNodePopoverProps, "show" | "target" | "onChange" | "onSubmit" | "onCancel" | "flowGraphData" | "rendererGraphData" | "nodeId"> & import("react").RefAttributes<HTMLDivElement>>;
+export default DeletePopover;
+//# sourceMappingURL=DeletePopover.d.ts.map

package/lib/components/FlowModeller/DeletePopover.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DeletePopover.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/DeletePopover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgC,WAAW,EAAyB,GAAG,EAAE,MAAM,OAAO,CAAC;AAG9F,OAAO,EASL,YAAY,EACb,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAiB,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAClF,OAAwB,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE1E,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,SAAS,CAAC;IACrB,OAAO,EAAE;QACP,UAAU,EAAE,cAAc,EAAE,CAAC;KAC9B,CAAC;IACF,OAAO,EAAE,cAAc,CAAC;CACzB;AACD,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAC/B,aAAa,EAAE,SAAS,CAAC;IACzB,iBAAiB,EAAE,SAAS,CAAC;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CACT,aAAa,EAAE,cAAc,EAC7B,aAAa,EAAE,cAAc,GAAG,SAAS,EACzC,EAAE,CAAC,EAAE,WAAW,KACb,IAAI,CAAC;IACV,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,EAAE,EAAE,EAAE,KAAK,KAAK,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,eAAO,MAAM,mBAAmB,2TAE/B,CAAC;AAEF,QAAA,MAAM,aAAa,sOA+KlB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/FlowModeller/DeletePopover.js ADDED Viewed

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, forwardRef } from 'react';
+import styled from 'styled-components';
+import { Button, Select, Option, Text, Flex, useI18n, Icon, Popover } from '@pega/cosmos-react-core';
+import { DirectedGraph } from './Renderer/Utils/Graph';
+import deleteNodeUtils from './Utils/deleteNodeUtils';
+export const StyledDeletePopover = styled(Popover) `
+  max-width: 25rem;
+`;
+const DeletePopover = forwardRef(({ show, target, flowGraphData, rendererGraphData, nodeId, onChange, onSubmit, onCancel }, ref) => {
+    const [currentSelection, setCurrentSelection] = useState(0);
+    const t = useI18n();
+    const graph = new DirectedGraph(rendererGraphData);
+    const deleteOptionsResult = deleteNodeUtils.getDeleteNodeOptions(graph, nodeId);
+    const deleteOptions = deleteOptionsResult.options;
+    useEffect(() => {
+        const itemsToDelete = deleteOptions[currentSelection].restItems;
+        // add the actual node to be deleted also, to the list
+        itemsToDelete.nodes[nodeId] = graph.getNode(nodeId);
+        onChange?.(itemsToDelete, deleteOptions[currentSelection].pathItems);
+    }, [rendererGraphData]);
+    const onChangeHandler = (ev) => {
+        const newSelection = ev.target.selectedIndex >= deleteOptions.length ? -1 : ev.target.selectedIndex;
+        setCurrentSelection(newSelection);
+        let itemsToDelete = deleteOptionsResult.allItems;
+        let itemsToRetain;
+        if (newSelection !== -1) {
+            itemsToDelete = deleteOptions[newSelection].restItems;
+            itemsToRetain = deleteOptions[newSelection].pathItems;
+        }
+        // add the actual node to be deleted also, to the list
+        itemsToDelete.nodes[nodeId] = graph.getNode(nodeId);
+        onChange?.(itemsToDelete, itemsToRetain, ev);
+    };
+    const submitHandler = (ev) => {
+        const finalGraph = new DirectedGraph(flowGraphData);
+        const finalDeleteOptionsResult = deleteNodeUtils.getDeleteNodeOptions(finalGraph, nodeId);
+        let newTargetNode = finalGraph.getNode(finalDeleteOptionsResult.destinationNodeId);
+        let itemsToDelete = finalDeleteOptionsResult.allItems;
+        const selectedOption = currentSelection === -1 ? undefined : deleteOptions[currentSelection];
+        let finalMetaData = selectedOption;
+        if (selectedOption) {
+            finalMetaData = finalDeleteOptionsResult.options.find(current => {
+                if (selectedOption.connector.id === current.connector.id) {
+                    return true;
+                }
+                return false;
+            });
+            if (finalMetaData) {
+                // get the ref of the first node of the retaining path
+                newTargetNode = finalGraph.getNode(finalMetaData.connector.toNodeId);
+                itemsToDelete = finalMetaData.restItems;
+            }
+        }
+        // get the in-connectors of the selected node
+        const nodeInConnectors = finalGraph.getInConnectors(nodeId);
+        // iterate and set the targetNode to the above first node instead of the selected node.
+        nodeInConnectors.forEach(con => {
+            finalGraph.setConnector(con.id, {
+                toNodeId: newTargetNode.id
+            });
+        });
+        const resultGraphData = finalGraph.getGraphData();
+        itemsToDelete.nodes[nodeId] = finalGraph.getNode(nodeId);
+        // filter the highlighted nodes, including the selected node
+        const nodes = resultGraphData.nodes.filter(item => {
+            return itemsToDelete.nodes[item.id] === undefined;
+        });
+        if (finalMetaData) {
+            itemsToDelete.connectors[finalMetaData.connector.id] = finalMetaData.connector;
+        }
+        // filter the highlighted connectors
+        const connectors = resultGraphData.connectors.filter(item => {
+            // if not in items to delete, add to list
+            if (itemsToDelete.connectors[item.id] === undefined) {
+                return true;
+            }
+            return false;
+        });
+        const outcome = {
+            graphData: {
+                nodes,
+                connectors
+            },
+            updates: {
+                connectors: nodeInConnectors
+            },
+            deletes: itemsToDelete
+        };
+        onSubmit?.(outcome, ev);
+    };
+    const onCancelHandler = () => {
+        onCancel?.();
+    };
+    return (_jsx(StyledDeletePopover, { show: show, target: target, placement: 'right-end', ref: ref, modifiers: [
+            {
+                name: 'offset',
+                options: { offset: [0, 8] }
+            }
+        ], children: _jsxs(Flex, { container: { gap: 2, pad: 2, direction: 'column' }, children: [_jsxs(Flex, { container: { alignItems: 'center', justify: 'between' }, children: [_jsx(Text, { variant: 'h4', children: t('delete_decision_step_title') }), _jsx(Button, { variant: 'simple', icon: true, label: t('close'), onClick: onCancelHandler, children: _jsx(Icon, { name: 'times' }) })] }), _jsx(Text, { children: t('delete_decision_step') }), _jsxs(Select, { id: 'select-demo', label: t('delete_decision_step_outcome'), required: true, onChange: onChangeHandler, children: [deleteOptions.map((item, index) => {
+                            return (_jsx(Option, { selected: currentSelection === index, children: item.connector.label ? item.connector.label : item.connector.id }, item.connector.id));
+                        }), _jsx(Option, { selected: currentSelection === -1, children: t('delete_all_outcomes') }, 'none')] }), _jsxs(Flex, { container: { direction: 'row', justify: 'between' }, children: [_jsx(Button, { onClick: onCancelHandler, children: t('cancel') }), _jsx(Button, { variant: 'primary', onClick: submitHandler, children: t('delete') })] })] }) }));
+});
+export default DeletePopover;
+//# sourceMappingURL=DeletePopover.js.map

package/lib/components/FlowModeller/DeletePopover.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DeletePopover.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/DeletePopover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, ChangeEventHandler, ChangeEvent, useEffect, forwardRef, Ref } from 'react';\nimport styled from 'styled-components';\n\nimport {\n Button,\n Select,\n Option,\n Text,\n Flex,\n useI18n,\n Icon,\n Popover,\n PopoverProps\n} from '@pega/cosmos-react-core';\n\nimport { DirectedGraph, GraphData, ConnectorProps } from './Renderer/Utils/Graph';\nimport deleteNodeUtils, { GraphDataAsMap } from './Utils/deleteNodeUtils';\n\nexport interface DeleteNodeOutcome {\n graphData: GraphData;\n updates: {\n connectors: ConnectorProps[];\n };\n deletes: GraphDataAsMap;\n}\nexport interface DeleteNodePopoverProps {\n show: boolean;\n target: PopoverProps['target'];\n flowGraphData: GraphData;\n rendererGraphData: GraphData;\n nodeId: string;\n onChange?: (\n itemsToDelete: GraphDataAsMap,\n itemsToRetain: GraphDataAsMap | undefined,\n ev?: ChangeEvent\n ) => void;\n ref?: Ref<HTMLDivElement>;\n onSubmit?: (outcome: DeleteNodeOutcome, ev: Event) => void;\n onCancel?: () => void;\n}\n\nexport const StyledDeletePopover = styled(Popover)`\n max-width: 25rem;\n`;\n\nconst DeletePopover = forwardRef(\n (\n {\n show,\n target,\n flowGraphData,\n rendererGraphData,\n nodeId,\n onChange,\n onSubmit,\n onCancel\n }: DeleteNodePopoverProps,\n ref: DeleteNodePopoverProps['ref']\n ) => {\n const [currentSelection, setCurrentSelection] = useState<number>(0);\n\n const t = useI18n();\n\n const graph = new DirectedGraph(rendererGraphData);\n const deleteOptionsResult = deleteNodeUtils.getDeleteNodeOptions(graph, nodeId);\n const deleteOptions = deleteOptionsResult!.options;\n\n useEffect(() => {\n const itemsToDelete = deleteOptions[currentSelection].restItems;\n\n // add the actual node to be deleted also, to the list\n itemsToDelete.nodes[nodeId] = graph.getNode(nodeId);\n\n onChange?.(itemsToDelete, deleteOptions[currentSelection].pathItems);\n }, [rendererGraphData]);\n\n const onChangeHandler: ChangeEventHandler = (ev: ChangeEvent<HTMLSelectElement>) => {\n const newSelection =\n ev.target.selectedIndex >= deleteOptions.length ? -1 : ev.target.selectedIndex;\n\n setCurrentSelection(newSelection);\n\n let itemsToDelete = deleteOptionsResult!.allItems;\n let itemsToRetain;\n\n if (newSelection !== -1) {\n itemsToDelete = deleteOptions[newSelection].restItems;\n itemsToRetain = deleteOptions[newSelection].pathItems;\n }\n\n // add the actual node to be deleted also, to the list\n itemsToDelete.nodes[nodeId] = graph.getNode(nodeId);\n\n onChange?.(itemsToDelete, itemsToRetain, ev);\n };\n\n const submitHandler = (ev: Event) => {\n const finalGraph = new DirectedGraph(flowGraphData);\n const finalDeleteOptionsResult = deleteNodeUtils.getDeleteNodeOptions(finalGraph, nodeId);\n\n let newTargetNode = finalGraph.getNode(finalDeleteOptionsResult!.destinationNodeId);\n let itemsToDelete = finalDeleteOptionsResult!.allItems;\n\n const selectedOption = currentSelection === -1 ? undefined : deleteOptions[currentSelection];\n let finalMetaData = selectedOption;\n\n if (selectedOption) {\n finalMetaData = finalDeleteOptionsResult!.options.find(current => {\n if (selectedOption.connector.id === current.connector.id) {\n return true;\n }\n\n return false;\n });\n\n if (finalMetaData) {\n // get the ref of the first node of the retaining path\n newTargetNode = finalGraph.getNode(finalMetaData.connector.toNodeId);\n itemsToDelete = finalMetaData.restItems;\n }\n }\n\n // get the in-connectors of the selected node\n const nodeInConnectors = finalGraph.getInConnectors(nodeId);\n // iterate and set the targetNode to the above first node instead of the selected node.\n nodeInConnectors.forEach(con => {\n finalGraph.setConnector(con.id, {\n toNodeId: newTargetNode.id\n });\n });\n\n const resultGraphData = finalGraph.getGraphData();\n\n itemsToDelete.nodes[nodeId] = finalGraph.getNode(nodeId);\n // filter the highlighted nodes, including the selected node\n const nodes = resultGraphData.nodes.filter(item => {\n return itemsToDelete.nodes[item.id] === undefined;\n });\n\n if (finalMetaData) {\n itemsToDelete.connectors[finalMetaData.connector.id] = finalMetaData.connector;\n }\n // filter the highlighted connectors\n const connectors = resultGraphData.connectors.filter(item => {\n // if not in items to delete, add to list\n if (itemsToDelete.connectors[item.id] === undefined) {\n return true;\n }\n\n return false;\n });\n\n const outcome: DeleteNodeOutcome = {\n graphData: {\n nodes,\n connectors\n },\n updates: {\n connectors: nodeInConnectors\n },\n deletes: itemsToDelete\n };\n\n onSubmit?.(outcome, ev);\n };\n\n const onCancelHandler = () => {\n onCancel?.();\n };\n\n return (\n <StyledDeletePopover\n show={show}\n target={target}\n placement='right-end'\n ref={ref}\n modifiers={[\n {\n name: 'offset',\n options: { offset: [0, 8] }\n }\n ]}\n >\n <Flex container={{ gap: 2, pad: 2, direction: 'column' }}>\n <Flex container={{ alignItems: 'center', justify: 'between' }}>\n <Text variant='h4'>{t('delete_decision_step_title')}</Text>\n <Button variant='simple' icon label={t('close')} onClick={onCancelHandler}>\n <Icon name='times' />\n </Button>\n </Flex>\n <Text>{t('delete_decision_step')}</Text>\n <Select\n id='select-demo'\n label={t('delete_decision_step_outcome')}\n required\n onChange={onChangeHandler}\n >\n {deleteOptions.map((item, index) => {\n return (\n <Option key={item.connector.id} selected={currentSelection === index}>\n {item.connector.label ? item.connector.label : item.connector.id}\n </Option>\n );\n })}\n\n <Option key='none' selected={currentSelection === -1}>\n {t('delete_all_outcomes')}\n </Option>\n </Select>\n\n <Flex container={{ direction: 'row', justify: 'between' }}>\n <Button onClick={onCancelHandler}>{t('cancel')}</Button>\n <Button variant='primary' onClick={submitHandler}>\n {t('delete')}\n </Button>\n </Flex>\n </Flex>\n </StyledDeletePopover>\n );\n }\n);\n\nexport default DeletePopover;\n"]}

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

@@ -13,9 +13,11 @@ export interface FlowModellerProps {
     onNodeClick?: (nodeId: string) => void;
     /** Callback for actions on Node */
     onNodeActionClick?: (param: ActionParams, e: MouseEvent) => void;
+    /** Callback for node deletion */
+    onDelete?: (param: ActionParams, e: MouseEvent) => void;
     /** Types of nodes */
     nodeLibrary: NodeLibraryItem[];
 }
-declare const FlowModeller: ({ graphData, onNodeActionClick, onNodeClick, onNodeAdd, nodeLibrary, actions }: PropsWithoutRef<FlowModellerProps>) => JSX.Element;
+declare const FlowModeller: ({ graphData, onNodeActionClick, onNodeAdd, nodeLibrary, onNodeClick, onDelete, 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,EAEf,UAAU,~~EAMX~~,MAAM,OAAO,CAAC;~~AAGf~~,OAAO,~~EACL~~,MAAM,~~EAQP~~,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EACL,oBAAoB,EAGrB,MAAM,2BAA2B,CAAC;~~AAGnC~~,OAAO,EACL,YAAY,EACZ,SAAS,EACT,eAAe,EAGf,QAAQ,~~EACT~~,MAAM,mBAAmB,CAAC;~~AAO3B~~,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;~~AAsED~~,QAAA,MAAM,YAAY,~~mFAOf~~,gBAAgB,iBAAiB,CAAC,~~gBA0MpC~~,CAAC;AAEF,eAAe,YAAY,CAAC"}
1	+ {"version":3,"file":"FlowModeller.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EAEf,UAAU,EAKX,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,MAAM,EAMP,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EACL,oBAAoB,EAGrB,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EACL,YAAY,EACZ,SAAS,EACT,eAAe,EAGf,QAAQ,EAET,MAAM,mBAAmB,CAAC;AAS3B,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,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxD,qBAAqB;IACrB,WAAW,EAAE,eAAe,EAAE,CAAC;CAChC;AAgFD,QAAA,MAAM,YAAY,6FAQf,gBAAgB,iBAAiB,CAAC,gBA8OpC,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

@@ -1,15 +1,18 @@
-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 } from 'react';
+import { createUID, useElement, useOuterEvent, useI18n } from '@pega/cosmos-react-core';
 import ItemLibrary from '../ItemLibrary/ItemLibrary';
 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';
 const initState = {
     showLib: false,
+    activeItem: null,
     activeAddBtnMeta: {
         target: null,
         meta: {
@@ -18,8 +21,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) {
@@ -28,6 +32,11 @@ const reducer = (state, action) => {
             return action.payload.show === state.showLib
                 ? state
                 : { ...state, showLib: action.payload.show };
+        case 'setActiveItem':
+            return {
+                ...state,
+                activeItem: action.payload.target
+            };
         case 'setActiveAddButton':
             state.activeAddBtnMeta = {
                 ...action.payload
@@ -39,31 +48,39 @@ const reducer = (state, action) => {
         case 'setGraphData':
             return {
                 ...state,
-                graphData: action.payload.graphData,
-                connectorComponent: action.payload.connectorComponent,
-                nodeComponent: action.payload.nodeComponent
+                graphData: action.payload.graphData
+            };
+        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, onNodeActionClick, onNodeAdd, nodeLibrary, onNodeClick, onDelete, actions }) => {
     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) => {
         dispatch({
@@ -82,13 +99,61 @@ 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 = useCallback((params, e) => {
+        const result = FlowModellerHelper.deleteNode(graphData, params.nodeId);
+        if (result) {
+            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();
+                            onDelete?.({ ...params, additionalData: outcome }, e);
+                        },
+                        onCancel: closeDeleteModel
+                    }
+                }
+            });
+        }
+    }, [graphData, state.graphData]);
     useEffect(() => {
         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 +163,11 @@ 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
+                }
             };
-            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,6 +179,13 @@ 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) {
@@ -149,7 +199,8 @@ const FlowModeller = ({ graphData, onNodeActionClick, onNodeClick, onNodeAdd, no
                 ...connector,
                 points: [],
                 data: {
-                    label: connector.label
+                    label: connector.label,
+                    onNodeCreate
                 }
             };
         });
@@ -158,9 +209,7 @@ const FlowModeller = ({ graphData, onNodeActionClick, onNodeClick, onNodeAdd, no
         dispatch({
             type: 'setGraphData',
             payload: {
-                graphData: newGraphData,
-                connectorComponent: Connector,
-                nodeComponent: Node
+                graphData: newGraphData
             }
         });
     }, [graphData]);
@@ -178,6 +227,7 @@ const FlowModeller = ({ graphData, onNodeActionClick, onNodeClick, onNodeAdd, no
         }
     }, [closeMenu]);
     useOuterEvent('mousedown', [popoverEl], closeMenu);
+    useOuterEvent('mousedown', [deletePopoverEl], closeDeleteModel);
     useEffect(() => {
         document.addEventListener('keydown', onKeydown);
         return () => {
@@ -185,7 +235,7 @@ const FlowModeller = ({ graphData, onNodeActionClick, onNodeClick, onNodeAdd, no
         };
     }, []);
     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));
+    return (_jsxs("div", { children: [_jsx(FlowRenderer, { graphData: state.graphData, connector: Connector, node: Node, highlights: state.highlightItems }), 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 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 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"]}
1	+ {"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} from 'react';\n\nimport {\n PopoverProps,\n Action,\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, ConnectorProps } from './Renderer/Utils/Graph';\nimport {\n AddNodeHandlerParams,\n RendererConnectorProps,\n RendererNodeProps\n} from './Renderer/Renderer.types';\nimport FlowRenderer from './Renderer/Renderer';\nimport {\n ActionParams,\n NodeProps,\n NodeLibraryItem,\n START_NODETYPE,\n STOP_NODETYPE,\n NodeType,\n NodeComponentData\n} from './Node/Node.types';\nimport PlaceHolderHelper from './Utils/addNodeUtils';\nimport { AddButton } from './AddNode';\nimport FlowModellerHelper from './helper';\nimport DeletePopover, { DeleteNodePopoverProps, DeleteNodeOutcome } from './DeletePopover';\nimport Connector from './Connector';\nimport Node from './Node';\nimport { DeleteNodeModalOption } from './Utils/deleteNodeUtils';\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, e: MouseEvent) => void;\n /* Types of nodes /\n nodeLibrary: NodeLibraryItem[];\n}\n\ntype ModellerState = {\n showLib: boolean;\n activeItem: Element \| null;\n activeAddBtnMeta: {\n target: null; // we will maintain ref of an Element\n meta: AddNodeHandlerParams;\n };\n graphData: GraphData<RendererNodeProps, RendererConnectorProps>;\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 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 };\n case 'setActiveItem':\n return {\n ...state,\n activeItem: action.payload.target\n };\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 };\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 onNodeActionClick,\n onNodeAdd,\n nodeLibrary,\n onNodeClick,\n onDelete,\n actions\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\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\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 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 = useCallback(\n (params: ActionParams, e: MouseEvent) => {\n const result: DeleteNodeOutcome \| false = FlowModellerHelper.deleteNode(\n graphData,\n params.nodeId\n );\n\n if (result) {\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 onDelete?.({ ...params, additionalData: outcome }, e);\n },\n onCancel: closeDeleteModel\n } as ModellerState['deleteProps']\n }\n });\n }\n },\n [graphData, state.graphData]\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 data: {\n onNodeCreate\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 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 = 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 onNodeCreate\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 }\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 const items: NodeLibraryItem[] = nodeLibrary !== undefined ? nodeLibrary : [];\n\n return (\n <div>\n <FlowRenderer\n graphData={state.graphData}\n connector={Connector}\n node={Node}\n highlights={state.highlightItems}\n />\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/Node/Node.types.d.ts CHANGED Viewed

@@ -1,12 +1,10 @@
-import { Ref, MouseEvent } from 'react';
+import { Ref, 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'>;
@@ -25,17 +23,25 @@ export interface NodeProps extends Node {
     /** Additional data for Node */
     additionalData?: AdditionalDataItemProps[];
     type: NodeType;
+    highlight?: boolean;
 }
-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 {
+}
 export interface AdditionalDataItemProps {
     id: string;
     label: string;
@@ -44,9 +50,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 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,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"}
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,aAAa,EAAE,MAAM,OAAO,CAAC;AAEvD,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,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;IAEf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;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;IACnB,sBAAsB;IACtB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,WAAW,kBAAmB,SAAQ,SAAS,EAAE,iBAAiB;CAAG;AAE3E,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"}