@pega/cosmos-react-build 3.0.0-dev.16.0 → 3.0.0-dev.18.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 (71) hide show
  1. package/lib/components/AppHeader/AppHeader.js +1 -1
  2. package/lib/components/AppHeader/AppHeader.js.map +1 -1
  3. package/lib/components/AppHeader/AppHeader.styles.js +1 -1
  4. package/lib/components/AppHeader/AppHeader.styles.js.map +1 -1
  5. package/lib/components/FlowModeller/Connector.d.ts.map +1 -1
  6. package/lib/components/FlowModeller/Connector.js +4 -2
  7. package/lib/components/FlowModeller/Connector.js.map +1 -1
  8. package/lib/components/FlowModeller/DeletePopover.d.ts.map +1 -1
  9. package/lib/components/FlowModeller/DeletePopover.js +31 -2
  10. package/lib/components/FlowModeller/DeletePopover.js.map +1 -1
  11. package/lib/components/FlowModeller/FlowModeller.d.ts.map +1 -1
  12. package/lib/components/FlowModeller/FlowModeller.js +81 -10
  13. package/lib/components/FlowModeller/FlowModeller.js.map +1 -1
  14. package/lib/components/FlowModeller/FlowModeller.types.d.ts +1 -1
  15. package/lib/components/FlowModeller/FlowModeller.types.d.ts.map +1 -1
  16. package/lib/components/FlowModeller/FlowModeller.types.js.map +1 -1
  17. package/lib/components/FlowModeller/Node/Node.types.d.ts +9 -1
  18. package/lib/components/FlowModeller/Node/Node.types.d.ts.map +1 -1
  19. package/lib/components/FlowModeller/Node/Node.types.js.map +1 -1
  20. package/lib/components/FlowModeller/Node/NodeTemplates.d.ts +1 -1
  21. package/lib/components/FlowModeller/Node/NodeTemplates.d.ts.map +1 -1
  22. package/lib/components/FlowModeller/Node/NodeTemplates.js +5 -2
  23. package/lib/components/FlowModeller/Node/NodeTemplates.js.map +1 -1
  24. package/lib/components/FlowModeller/Node.d.ts.map +1 -1
  25. package/lib/components/FlowModeller/Node.js +2 -2
  26. package/lib/components/FlowModeller/Node.js.map +1 -1
  27. package/lib/components/FlowModeller/Renderer/Renderer.d.ts.map +1 -1
  28. package/lib/components/FlowModeller/Renderer/Renderer.js +7 -1
  29. package/lib/components/FlowModeller/Renderer/Renderer.js.map +1 -1
  30. package/lib/components/FlowModeller/Renderer/Utils/Graph.d.ts +5 -0
  31. package/lib/components/FlowModeller/Renderer/Utils/Graph.d.ts.map +1 -1
  32. package/lib/components/FlowModeller/Renderer/Utils/Graph.js.map +1 -1
  33. package/lib/components/FlowModeller/Renderer/Utils/GraphLayout.d.ts +1 -0
  34. package/lib/components/FlowModeller/Renderer/Utils/GraphLayout.d.ts.map +1 -1
  35. package/lib/components/FlowModeller/Renderer/Utils/GraphLayout.js.map +1 -1
  36. package/lib/components/FlowModeller/Renderer/Utils/GraphTraversal.d.ts +1 -2
  37. package/lib/components/FlowModeller/Renderer/Utils/GraphTraversal.d.ts.map +1 -1
  38. package/lib/components/FlowModeller/Renderer/Utils/GraphTraversal.js.map +1 -1
  39. package/lib/components/FlowModeller/Utils/addNodeUtils.d.ts.map +1 -1
  40. package/lib/components/FlowModeller/Utils/addNodeUtils.js +57 -34
  41. package/lib/components/FlowModeller/Utils/addNodeUtils.js.map +1 -1
  42. package/lib/components/FlowModeller/Utils/deleteNodeUtils.d.ts +1 -0
  43. package/lib/components/FlowModeller/Utils/deleteNodeUtils.d.ts.map +1 -1
  44. package/lib/components/FlowModeller/Utils/deleteNodeUtils.js.map +1 -1
  45. package/lib/components/FlowModeller/helper.d.ts +2 -1
  46. package/lib/components/FlowModeller/helper.d.ts.map +1 -1
  47. package/lib/components/FlowModeller/helper.js +60 -16
  48. package/lib/components/FlowModeller/helper.js.map +1 -1
  49. package/lib/components/ObjectSelect/ObjectPicker.d.ts +5 -4
  50. package/lib/components/ObjectSelect/ObjectPicker.d.ts.map +1 -1
  51. package/lib/components/ObjectSelect/ObjectPicker.js +8 -5
  52. package/lib/components/ObjectSelect/ObjectPicker.js.map +1 -1
  53. package/lib/components/ObjectSelect/ObjectSelect.d.ts +39 -4
  54. package/lib/components/ObjectSelect/ObjectSelect.d.ts.map +1 -1
  55. package/lib/components/ObjectSelect/ObjectSelect.js +62 -5
  56. package/lib/components/ObjectSelect/ObjectSelect.js.map +1 -1
  57. package/lib/components/ObjectSelect/ObjectSummary.d.ts +4 -2
  58. package/lib/components/ObjectSelect/ObjectSummary.d.ts.map +1 -1
  59. package/lib/components/ObjectSelect/ObjectSummary.js +28 -33
  60. package/lib/components/ObjectSelect/ObjectSummary.js.map +1 -1
  61. package/lib/components/PageTemplates/PageTemplates.d.ts.map +1 -1
  62. package/lib/components/PageTemplates/PageTemplates.js +7 -0
  63. package/lib/components/PageTemplates/PageTemplates.js.map +1 -1
  64. package/lib/components/Workbench/Workbench.d.ts.map +1 -1
  65. package/lib/components/Workbench/Workbench.js +2 -2
  66. package/lib/components/Workbench/Workbench.js.map +1 -1
  67. package/package.json +3 -3
  68. package/lib/components/ObjectSelect/ObjectConfig.d.ts +0 -18
  69. package/lib/components/ObjectSelect/ObjectConfig.d.ts.map +0 -1
  70. package/lib/components/ObjectSelect/ObjectConfig.js +0 -24
  71. package/lib/components/ObjectSelect/ObjectConfig.js.map +0 -1
@@ -1,7 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { forwardRef, useCallback, useEffect, useState } from 'react';
3
3
  import { Flex, SearchInput, Avatar, useI18n, useBreakpoint, useTheme } from '@pega/cosmos-react-core';
4
- import { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.styles';
4
+ import { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';
5
5
  import { StyledAppHeader, StyledTabs, StyledAppAvatar, StyledUtilsContainer, StyledBrandContainer, StyledPreviewButton, StyledTitle, StyledBrandButton } from './AppHeader.styles';
6
6
  import BranchButton from './BranchButton';
7
7
  const BrandContainer = ({ name, onClick, href, visual }) => {
@@ -1 +1 @@
1
- {"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n Ref,\n MouseEvent,\n FC,\n PropsWithoutRef,\n useCallback,\n useEffect,\n useState\n} from 'react';\n\nimport {\n Flex,\n Tab,\n SearchInput,\n Action,\n Avatar,\n AvatarProps,\n BaseProps,\n ForwardProps,\n SearchInputProps,\n NoChildrenProp,\n OmitStrict,\n useI18n,\n useBreakpoint,\n useTheme\n} from '@pega/cosmos-react-core';\nimport { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.styles';\n\nimport {\n StyledAppHeader,\n StyledTabs,\n StyledAppAvatar,\n StyledUtilsContainer,\n StyledBrandContainer,\n StyledPreviewButton,\n StyledTitle,\n StyledBrandButton\n} from './AppHeader.styles';\nimport BranchButton, { BranchButtonProps } from './BranchButton';\n\nexport interface AppHeaderProps extends BaseProps, NoChildrenProp {\n brand: BrandProps;\n links?: LinkProps[];\n utils?: UtilsProps;\n ref?: Ref<HTMLDivElement>;\n}\ninterface BrandProps {\n /** The primary text to render in the header. */\n name: string;\n /** The name of icon to render in the header. */\n visual: OmitStrict<AvatarProps, 'name' | 'shape' | 'size' | 'status'>;\n /** URL or DOM id to navigate to. */\n href?: string;\n /** Click handler for the header. */\n onClick?: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\ninterface LinkProps extends Tab {\n onClick?: (id: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n}\n\ninterface UtilsProps {\n avatar: AvatarProps;\n search?: SearchInputProps;\n branch?: BranchButtonProps;\n action?: Action;\n}\n\nconst BrandContainer: FC<BrandProps> = ({ name, onClick, href, visual }) => {\n const {\n base: { palette }\n } = useTheme();\n\n return (\n <StyledBrandContainer\n container={{ alignItems: 'center', justify: 'between' }}\n onClick={onClick}\n href={href}\n forwardedAs={onClick || href ? StyledBrandButton : 'div'}\n >\n <Avatar\n {...visual}\n shape='squircle'\n name={name}\n backgroundColor={visual.backgroundColor || palette['brand-primary']}\n color={visual.color || palette.light}\n />\n <StyledTitle>{name}</StyledTitle>\n </StyledBrandContainer>\n );\n};\n\nconst Links: FC<{ links: AppHeaderProps['links'] }> = ({ links = [] }) => {\n const [currentTabId, setCurrentTabId] = useState(links[0].id || '');\n\n useEffect(() => {\n setCurrentTabId(links[0].id || '');\n }, [links]);\n\n const handleTabClick = useCallback(\n (id: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n const newActiveTab = links.find(item => item.id === id);\n if (newActiveTab) {\n newActiveTab.onClick?.(id, e);\n setCurrentTabId(newActiveTab.id);\n }\n },\n [links]\n );\n\n return <StyledTabs tabs={links} currentTabId={currentTabId} onTabClick={handleTabClick} />;\n};\n\nconst Utils: FC<UtilsProps> = ({ avatar, search, branch, action }: UtilsProps) => {\n const t = useI18n();\n const isMediumOrAbove = useBreakpoint('md');\n\n return (\n <StyledUtilsContainer isMediumOrAbove={isMediumOrAbove} container={{ justify: 'end' }}>\n {search && (\n <StyledAppHeaderSearchForm\n role='search'\n aria-label={search.searchInputAriaLabel}\n onSubmit={e => e.preventDefault()}\n isMediumOrAbove={isMediumOrAbove}\n >\n <SearchInput {...search} />\n </StyledAppHeaderSearchForm>\n )}\n {branch && <BranchButton {...branch} />}\n {action && (\n <StyledPreviewButton\n variant='primary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => action.onClick?.(action.id, e)}\n >\n {t('preview')}\n </StyledPreviewButton>\n )}\n <StyledAppAvatar {...avatar} />\n </StyledUtilsContainer>\n );\n};\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(\n ({ brand, utils, links }: PropsWithoutRef<AppHeaderProps>, ref: AppHeaderProps['ref']) => {\n return (\n <Flex as={StyledAppHeader} container={{ justify: 'between' }} ref={ref}>\n <BrandContainer {...brand} />\n {links && links.length > 0 && <Links links={links} />}\n {utils && <Utils {...utils} />}\n </Flex>\n );\n }\n);\n\nexport default AppHeader;\n"]}
1
+ {"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n Ref,\n MouseEvent,\n FC,\n PropsWithoutRef,\n useCallback,\n useEffect,\n useState\n} from 'react';\n\nimport {\n Flex,\n Tab,\n SearchInput,\n Action,\n Avatar,\n AvatarProps,\n BaseProps,\n ForwardProps,\n SearchInputProps,\n NoChildrenProp,\n OmitStrict,\n useI18n,\n useBreakpoint,\n useTheme\n} from '@pega/cosmos-react-core';\nimport { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';\n\nimport {\n StyledAppHeader,\n StyledTabs,\n StyledAppAvatar,\n StyledUtilsContainer,\n StyledBrandContainer,\n StyledPreviewButton,\n StyledTitle,\n StyledBrandButton\n} from './AppHeader.styles';\nimport BranchButton, { BranchButtonProps } from './BranchButton';\n\nexport interface AppHeaderProps extends BaseProps, NoChildrenProp {\n brand: BrandProps;\n links?: LinkProps[];\n utils?: UtilsProps;\n ref?: Ref<HTMLDivElement>;\n}\ninterface BrandProps {\n /** The primary text to render in the header. */\n name: string;\n /** The name of icon to render in the header. */\n visual: OmitStrict<AvatarProps, 'name' | 'shape' | 'size' | 'status'>;\n /** URL or DOM id to navigate to. */\n href?: string;\n /** Click handler for the header. */\n onClick?: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\ninterface LinkProps extends Tab {\n onClick?: (id: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n}\n\ninterface UtilsProps {\n avatar: AvatarProps;\n search?: SearchInputProps;\n branch?: BranchButtonProps;\n action?: Action;\n}\n\nconst BrandContainer: FC<BrandProps> = ({ name, onClick, href, visual }) => {\n const {\n base: { palette }\n } = useTheme();\n\n return (\n <StyledBrandContainer\n container={{ alignItems: 'center', justify: 'between' }}\n onClick={onClick}\n href={href}\n forwardedAs={onClick || href ? StyledBrandButton : 'div'}\n >\n <Avatar\n {...visual}\n shape='squircle'\n name={name}\n backgroundColor={visual.backgroundColor || palette['brand-primary']}\n color={visual.color || palette.light}\n />\n <StyledTitle>{name}</StyledTitle>\n </StyledBrandContainer>\n );\n};\n\nconst Links: FC<{ links: AppHeaderProps['links'] }> = ({ links = [] }) => {\n const [currentTabId, setCurrentTabId] = useState(links[0].id || '');\n\n useEffect(() => {\n setCurrentTabId(links[0].id || '');\n }, [links]);\n\n const handleTabClick = useCallback(\n (id: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n const newActiveTab = links.find(item => item.id === id);\n if (newActiveTab) {\n newActiveTab.onClick?.(id, e);\n setCurrentTabId(newActiveTab.id);\n }\n },\n [links]\n );\n\n return <StyledTabs tabs={links} currentTabId={currentTabId} onTabClick={handleTabClick} />;\n};\n\nconst Utils: FC<UtilsProps> = ({ avatar, search, branch, action }: UtilsProps) => {\n const t = useI18n();\n const isMediumOrAbove = useBreakpoint('md');\n\n return (\n <StyledUtilsContainer isMediumOrAbove={isMediumOrAbove} container={{ justify: 'end' }}>\n {search && (\n <StyledAppHeaderSearchForm\n role='search'\n aria-label={search.searchInputAriaLabel}\n onSubmit={e => e.preventDefault()}\n isMediumOrAbove={isMediumOrAbove}\n >\n <SearchInput {...search} />\n </StyledAppHeaderSearchForm>\n )}\n {branch && <BranchButton {...branch} />}\n {action && (\n <StyledPreviewButton\n variant='primary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => action.onClick?.(action.id, e)}\n >\n {t('preview')}\n </StyledPreviewButton>\n )}\n <StyledAppAvatar {...avatar} />\n </StyledUtilsContainer>\n );\n};\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(\n ({ brand, utils, links }: PropsWithoutRef<AppHeaderProps>, ref: AppHeaderProps['ref']) => {\n return (\n <Flex as={StyledAppHeader} container={{ justify: 'between' }} ref={ref}>\n <BrandContainer {...brand} />\n {links && links.length > 0 && <Links links={links} />}\n {utils && <Utils {...utils} />}\n </Flex>\n );\n }\n);\n\nexport default AppHeader;\n"]}
@@ -1,7 +1,7 @@
1
1
  import styled, { css } from 'styled-components';
2
2
  import { Avatar, defaultThemeProp, Flex, Text, Tabs, Button } from '@pega/cosmos-react-core';
3
3
  import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
4
- import { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.styles';
4
+ import { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';
5
5
  export const StyledAppHeader = styled.header(({ theme }) => {
6
6
  return css `
7
7
  height: 3rem;
@@ -1 +1 @@
1
- {"version":3,"file":"AppHeader.styles.js","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { Avatar, defaultThemeProp, Flex, Text, Tabs, Button } from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.styles';\n\nexport const StyledAppHeader = styled.header(({ theme }) => {\n return css`\n height: 3rem;\n padding: 0 calc(2 * ${theme.base.spacing});\n border-bottom: 0.0625rem solid ${theme.base.colors.gray.light};\n background-color: ${theme.base.palette['primary-background']};\n position: sticky;\n top: 0;\n z-index: calc(${theme.base['z-index'].drawer + 1});\n `;\n});\n\nStyledAppHeader.defaultProps = defaultThemeProp;\n\nexport const StyledTitle: typeof Text = styled(Text)(({ theme }) => {\n return css`\n max-width: 25ch;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n color: ${theme.base.palette['foreground-color']};\n font-weight: ${theme.base['font-weight'].bold};\n margin-inline-start: calc(0.75 * ${theme.base.spacing});\n `;\n});\n\nStyledTitle.defaultProps = defaultThemeProp;\n\nexport const StyledBrandContainer: typeof Flex = styled(Flex)(({ theme }) => {\n return css`\n padding-block: ${theme.base.spacing};\n text-decoration: none;\n `;\n});\n\nStyledBrandContainer.defaultProps = defaultThemeProp;\n\nexport const StyledBrandButton = styled(BareButton)(({ theme }) => {\n return css`\n &:not([disabled]):focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledBrandButton.defaultProps = defaultThemeProp;\n\nexport const StyledTabs: typeof Tabs = styled(Tabs)(({ theme }) => {\n return css`\n margin-inline-start: calc(2 * ${theme.base.spacing});\n margin-inline-end: calc(2 * ${theme.base.spacing});\n border: none;\n min-height: 3rem;\n button {\n height: auto;\n span:first-of-type {\n text-transform: none;\n }\n }\n button[aria-selected='false'] > span {\n font-weight: ${theme.base['font-weight']['semi-bold']};\n }\n button:hover,\n button:focus,\n button:active {\n box-shadow: none;\n }\n `;\n});\n\nStyledTabs.defaultProps = defaultThemeProp;\n\nexport const StyledUtilsContainer: typeof Flex = styled(Flex)<{ isMediumOrAbove: boolean }>(\n ({ theme, isMediumOrAbove }) => {\n return css`\n margin-inline-start: auto;\n padding-block: ${theme.base.spacing};\n width: auto;\n min-width: ${isMediumOrAbove ? '32%' : 'auto'};\n & > div,\n & > span {\n margin-inline-start: ${theme.base.spacing};\n }\n & > div:last-child {\n margin-inline-end: 0;\n }\n ${StyledAppHeaderSearchForm} {\n margin-inline-end: ${theme.base.spacing};\n }\n `;\n }\n);\n\nStyledUtilsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledBranchContainer: typeof Flex = styled(Flex)(({ theme }) => {\n return css`\n span {\n white-space: nowrap;\n max-width: 25ch;\n overflow: hidden;\n text-overflow: ellipsis;\n font-weight: ${theme.base['font-weight']['semi-bold']};\n margin-inline-start: calc(0.5 * ${theme.base.spacing});\n margin-inline-end: calc(0.75 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledBranchContainer.defaultProps = defaultThemeProp;\n\nexport const StyledPreviewButton: typeof Button = styled(Button)`\n flex-shrink: 0;\n`;\n\nexport const StyledAppAvatar: typeof Avatar = styled(Avatar)(({ theme }) => {\n return css`\n width: 1.5rem;\n height: 1.5rem;\n && {\n margin-inline-start: calc(2 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledAppAvatar.defaultProps = defaultThemeProp;\n"]}
1
+ {"version":3,"file":"AppHeader.styles.js","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { Avatar, defaultThemeProp, Flex, Text, Tabs, Button } from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppHeader.styles';\n\nexport const StyledAppHeader = styled.header(({ theme }) => {\n return css`\n height: 3rem;\n padding: 0 calc(2 * ${theme.base.spacing});\n border-bottom: 0.0625rem solid ${theme.base.colors.gray.light};\n background-color: ${theme.base.palette['primary-background']};\n position: sticky;\n top: 0;\n z-index: calc(${theme.base['z-index'].drawer + 1});\n `;\n});\n\nStyledAppHeader.defaultProps = defaultThemeProp;\n\nexport const StyledTitle: typeof Text = styled(Text)(({ theme }) => {\n return css`\n max-width: 25ch;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n color: ${theme.base.palette['foreground-color']};\n font-weight: ${theme.base['font-weight'].bold};\n margin-inline-start: calc(0.75 * ${theme.base.spacing});\n `;\n});\n\nStyledTitle.defaultProps = defaultThemeProp;\n\nexport const StyledBrandContainer: typeof Flex = styled(Flex)(({ theme }) => {\n return css`\n padding-block: ${theme.base.spacing};\n text-decoration: none;\n `;\n});\n\nStyledBrandContainer.defaultProps = defaultThemeProp;\n\nexport const StyledBrandButton = styled(BareButton)(({ theme }) => {\n return css`\n &:not([disabled]):focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledBrandButton.defaultProps = defaultThemeProp;\n\nexport const StyledTabs: typeof Tabs = styled(Tabs)(({ theme }) => {\n return css`\n margin-inline-start: calc(2 * ${theme.base.spacing});\n margin-inline-end: calc(2 * ${theme.base.spacing});\n border: none;\n min-height: 3rem;\n button {\n height: auto;\n span:first-of-type {\n text-transform: none;\n }\n }\n button[aria-selected='false'] > span {\n font-weight: ${theme.base['font-weight']['semi-bold']};\n }\n button:hover,\n button:focus,\n button:active {\n box-shadow: none;\n }\n `;\n});\n\nStyledTabs.defaultProps = defaultThemeProp;\n\nexport const StyledUtilsContainer: typeof Flex = styled(Flex)<{ isMediumOrAbove: boolean }>(\n ({ theme, isMediumOrAbove }) => {\n return css`\n margin-inline-start: auto;\n padding-block: ${theme.base.spacing};\n width: auto;\n min-width: ${isMediumOrAbove ? '32%' : 'auto'};\n & > div,\n & > span {\n margin-inline-start: ${theme.base.spacing};\n }\n & > div:last-child {\n margin-inline-end: 0;\n }\n ${StyledAppHeaderSearchForm} {\n margin-inline-end: ${theme.base.spacing};\n }\n `;\n }\n);\n\nStyledUtilsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledBranchContainer: typeof Flex = styled(Flex)(({ theme }) => {\n return css`\n span {\n white-space: nowrap;\n max-width: 25ch;\n overflow: hidden;\n text-overflow: ellipsis;\n font-weight: ${theme.base['font-weight']['semi-bold']};\n margin-inline-start: calc(0.5 * ${theme.base.spacing});\n margin-inline-end: calc(0.75 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledBranchContainer.defaultProps = defaultThemeProp;\n\nexport const StyledPreviewButton: typeof Button = styled(Button)`\n flex-shrink: 0;\n`;\n\nexport const StyledAppAvatar: typeof Avatar = styled(Avatar)(({ theme }) => {\n return css`\n width: 1.5rem;\n height: 1.5rem;\n && {\n margin-inline-start: calc(2 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledAppAvatar.defaultProps = defaultThemeProp;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"Connector.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/Connector.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAE5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AA0ErE,aAAK,cAAc,GAAG,IAAI,CAAC,qBAAqB,EAAE,IAAI,GAAG,MAAM,GAAG,aAAa,GAAG,QAAQ,CAAC,GACzF,OAAO,CAAC,IAAI,CAAC,oBAAoB,EAAE,gBAAgB,CAAC,CAAC,CAAC;AAExD,QAAA,MAAM,SAAS,sDAAuD,cAAc,gBA+CnF,CAAC;AAEF,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"Connector.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/Connector.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAE5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AA0ErE,aAAK,cAAc,GAAG,IAAI,CAAC,qBAAqB,EAAE,IAAI,GAAG,MAAM,GAAG,aAAa,GAAG,QAAQ,CAAC,GACzF,OAAO,CAAC,IAAI,CAAC,oBAAoB,EAAE,gBAAgB,CAAC,CAAC,CAAC;AAExD,QAAA,MAAM,SAAS,sDAAuD,cAAc,gBAoDnF,CAAC;AAEF,eAAe,SAAS,CAAC"}
@@ -1,4 +1,4 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
2
  import { useContext } from 'react';
3
3
  import styled, { css } from 'styled-components';
4
4
  import { defaultThemeProp, Flex, Text, useTheme } from '@pega/cosmos-react-core';
@@ -63,7 +63,9 @@ const Connector = ({ id, labelLayout, data, realConnectors, points }) => {
63
63
  refType: 'connector',
64
64
  refId
65
65
  };
66
- return (_jsxs("g", { children: [_jsx("path", { id: id, d: genLine(points), stroke: highlights?.connectors?.[id] ? theme.base.colors.red.medium : theme.base.colors.slate.dark, strokeWidth: highlights?.connectors?.[id] ? 2 : 1, fill: 'none' }), labelLayout && (_jsxs("foreignObject", { x: labelLayout.x - labelLayout.width, y: points[3].y - 20, width: labelLayout.width, height: labelLayout.height, children: [labelLayout?.value && (_jsx(Flex, { container: { justify: 'center' }, children: _jsx(StyledLabel, { highlight: !!highlights?.connectors?.[id], children: labelLayout.value }) })), !readOnly && (_jsx(AddButton, { highlight: !!highlights?.connectors?.[id], addNodeHandler: (e) => data?.onNodeCreate(e.currentTarget, metaData) }))] }))] }, id));
66
+ return (_jsx(_Fragment, { children: data.type === 'default' && (_jsxs("g", { children: [_jsx("path", { id: id, d: genLine(points), stroke: highlights?.connectors?.[id]
67
+ ? theme.base.colors.red.medium
68
+ : theme.base.colors.slate.dark, strokeWidth: highlights?.connectors?.[id] ? 2 : 1, fill: 'none' }), labelLayout && (_jsxs("foreignObject", { x: labelLayout.x - labelLayout.width, y: points[3].y - 20, width: labelLayout.width, height: labelLayout.height, children: [labelLayout?.value && (_jsx(Flex, { container: { justify: 'center' }, children: _jsx(StyledLabel, { highlight: !!highlights?.connectors?.[id], children: labelLayout.value }) })), !readOnly && (_jsx(AddButton, { highlight: !!highlights?.connectors?.[id], addNodeHandler: (e) => data?.onNodeCreate(e.currentTarget, metaData) }))] }))] }, id)) }));
67
69
  };
68
70
  export default Connector;
69
71
  //# sourceMappingURL=Connector.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Connector.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/Connector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { MouseEvent, useContext } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, Flex, Text, useTheme } from '@pega/cosmos-react-core';\n\nimport { AddButton } from './AddNode';\nimport { AddNodeHandlerParams } from './Renderer/Renderer.types';\nimport { PlaceHolderConnector } from './Utils/addNodeUtils';\nimport FlowModellerContext from './FlowModellerContext';\nimport { PlottedGraphConnector } from './Renderer/Utils/GraphLayout';\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\ninterface Points {\n x: number;\n y: number;\n}\n\nconst curveRadius = 12;\nconst genLine = (points: Points[]) => {\n const lineStr: string = points\n .map((point: Points, idx: number, arr: Points[]) => {\n const { x, y } = point;\n const prev = arr[idx - 1];\n const next = arr[idx + 1];\n const line = `L${x},${y}`;\n\n // if the point is extreme end, no need to add a curve\n if (!prev || !next) return line;\n\n // if point is colinear with prev and next, no need to add a curve\n if (prev.x === next.x || prev.y === next.y) return line;\n\n if (point.x > next.x)\n // BOTTOM-RIGHT ↲\n return `L${x},${\n y - curveRadius\n }a${curveRadius},${curveRadius} 0 0 1 -${curveRadius},${curveRadius}`;\n\n // BOTTOM-LEFT ↳\n if (point.x < next.x)\n return `L${x},${\n y - curveRadius\n }a${curveRadius},${curveRadius} 0 0 0 ${curveRadius},${curveRadius}`;\n\n // TOP-LEFT ↱\n if (point.x < prev.x)\n return `L${\n x + curveRadius\n },${y}a${curveRadius},${curveRadius} 0 0 0 -${curveRadius},${curveRadius}`;\n\n // TOP-RIGHT ↴\n if (point.x > prev.x)\n return `L${\n x - curveRadius\n },${y}a${curveRadius},${curveRadius} 0 0 1 ${curveRadius},${curveRadius}`;\n\n return `L${x},${y}`;\n })\n .join('');\n return `M${lineStr.substr(1)}`;\n};\n\ntype ConnectorProps = Pick<PlottedGraphConnector, 'id' | 'data' | 'labelLayout' | 'points'> &\n Partial<Pick<PlaceHolderConnector, 'realConnectors'>>;\n\nconst Connector = ({ id, labelLayout, data, realConnectors, points }: ConnectorProps) => {\n const refId = realConnectors || id;\n const { readOnly, highlights } = useContext(FlowModellerContext);\n const theme = useTheme();\n\n const metaData: AddNodeHandlerParams = {\n refType: 'connector',\n refId\n };\n\n return (\n <g key={id}>\n <path\n id={id}\n d={genLine(points)}\n stroke={\n highlights?.connectors?.[id] ? theme.base.colors.red.medium : theme.base.colors.slate.dark\n }\n strokeWidth={highlights?.connectors?.[id] ? 2 : 1}\n fill='none'\n />\n {labelLayout && (\n <foreignObject\n x={labelLayout.x - labelLayout.width}\n y={points[3].y - 20}\n width={labelLayout.width}\n height={labelLayout.height}\n >\n {labelLayout?.value && (\n <Flex container={{ justify: 'center' }}>\n <StyledLabel highlight={!!highlights?.connectors?.[id]}>\n {labelLayout.value}\n </StyledLabel>\n </Flex>\n )}\n {!readOnly && (\n <AddButton\n highlight={!!highlights?.connectors?.[id]}\n addNodeHandler={(e: MouseEvent<HTMLButtonElement>) =>\n data?.onNodeCreate(e.currentTarget, metaData)\n }\n />\n )}\n </foreignObject>\n )}\n </g>\n );\n};\n\nexport default Connector;\n"]}
1
+ {"version":3,"file":"Connector.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/Connector.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAc,UAAU,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEjF,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAGtC,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AAGxD,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;AAO5C,MAAM,WAAW,GAAG,EAAE,CAAC;AACvB,MAAM,OAAO,GAAG,CAAC,MAAgB,EAAE,EAAE;IACnC,MAAM,OAAO,GAAW,MAAM;SAC3B,GAAG,CAAC,CAAC,KAAa,EAAE,GAAW,EAAE,GAAa,EAAE,EAAE;QACjD,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,KAAK,CAAC;QACvB,MAAM,IAAI,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;QAC1B,MAAM,IAAI,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;QAC1B,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;QAE1B,sDAAsD;QACtD,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI;YAAE,OAAO,IAAI,CAAC;QAEhC,kEAAkE;QAClE,IAAI,IAAI,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC;YAAE,OAAO,IAAI,CAAC;QAExD,IAAI,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;YAClB,iBAAiB;YACjB,OAAO,IAAI,CAAC,IACV,CAAC,GAAG,WACN,IAAI,WAAW,IAAI,WAAW,WAAW,WAAW,IAAI,WAAW,EAAE,CAAC;QAExE,gBAAgB;QAChB,IAAI,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;YAClB,OAAO,IAAI,CAAC,IACV,CAAC,GAAG,WACN,IAAI,WAAW,IAAI,WAAW,UAAU,WAAW,IAAI,WAAW,EAAE,CAAC;QAEvE,aAAa;QACb,IAAI,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;YAClB,OAAO,IACL,CAAC,GAAG,WACN,IAAI,CAAC,IAAI,WAAW,IAAI,WAAW,WAAW,WAAW,IAAI,WAAW,EAAE,CAAC;QAE7E,cAAc;QACd,IAAI,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;YAClB,OAAO,IACL,CAAC,GAAG,WACN,IAAI,CAAC,IAAI,WAAW,IAAI,WAAW,UAAU,WAAW,IAAI,WAAW,EAAE,CAAC;QAE5E,OAAO,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;IACtB,CAAC,CAAC;SACD,IAAI,CAAC,EAAE,CAAC,CAAC;IACZ,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;AACjC,CAAC,CAAC;AAKF,MAAM,SAAS,GAAG,CAAC,EAAE,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,EAAkB,EAAE,EAAE;IACtF,MAAM,KAAK,GAAG,cAAc,IAAI,EAAE,CAAC;IACnC,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IACjE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,QAAQ,GAAyB;QACrC,OAAO,EAAE,WAAW;QACpB,KAAK;KACN,CAAC;IACF,OAAO,CACL,4BACG,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,CAC1B,wBACE,eACE,EAAE,EAAE,EAAE,EACN,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,EAClB,MAAM,EACJ,UAAU,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC;wBAC1B,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM;wBAC9B,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,EAElC,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACjD,IAAI,EAAC,MAAM,GACX,EACD,WAAW,IAAI,CACd,yBACE,CAAC,EAAE,WAAW,CAAC,CAAC,GAAG,WAAW,CAAC,KAAK,EACpC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,EACnB,KAAK,EAAE,WAAW,CAAC,KAAK,EACxB,MAAM,EAAE,WAAW,CAAC,MAAM,aAEzB,WAAW,EAAE,KAAK,IAAI,CACrB,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,YACpC,KAAC,WAAW,IAAC,SAAS,EAAE,CAAC,CAAC,UAAU,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC,YACnD,WAAW,CAAC,KAAK,GACN,GACT,CACR,EACA,CAAC,QAAQ,IAAI,CACZ,KAAC,SAAS,IACR,SAAS,EAAE,CAAC,CAAC,UAAU,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC,EACzC,cAAc,EAAE,CAAC,CAAgC,EAAE,EAAE,CACnD,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,aAAa,EAAE,QAAQ,CAAC,GAE/C,CACH,IACa,CACjB,KAnCK,EAAE,CAoCN,CACL,GACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { MouseEvent, useContext } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, Flex, Text, useTheme } from '@pega/cosmos-react-core';\n\nimport { AddButton } from './AddNode';\nimport { AddNodeHandlerParams } from './Renderer/Renderer.types';\nimport { PlaceHolderConnector } from './Utils/addNodeUtils';\nimport FlowModellerContext from './FlowModellerContext';\nimport { PlottedGraphConnector } from './Renderer/Utils/GraphLayout';\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\ninterface Points {\n x: number;\n y: number;\n}\n\nconst curveRadius = 12;\nconst genLine = (points: Points[]) => {\n const lineStr: string = points\n .map((point: Points, idx: number, arr: Points[]) => {\n const { x, y } = point;\n const prev = arr[idx - 1];\n const next = arr[idx + 1];\n const line = `L${x},${y}`;\n\n // if the point is extreme end, no need to add a curve\n if (!prev || !next) return line;\n\n // if point is colinear with prev and next, no need to add a curve\n if (prev.x === next.x || prev.y === next.y) return line;\n\n if (point.x > next.x)\n // BOTTOM-RIGHT ↲\n return `L${x},${\n y - curveRadius\n }a${curveRadius},${curveRadius} 0 0 1 -${curveRadius},${curveRadius}`;\n\n // BOTTOM-LEFT ↳\n if (point.x < next.x)\n return `L${x},${\n y - curveRadius\n }a${curveRadius},${curveRadius} 0 0 0 ${curveRadius},${curveRadius}`;\n\n // TOP-LEFT ↱\n if (point.x < prev.x)\n return `L${\n x + curveRadius\n },${y}a${curveRadius},${curveRadius} 0 0 0 -${curveRadius},${curveRadius}`;\n\n // TOP-RIGHT ↴\n if (point.x > prev.x)\n return `L${\n x - curveRadius\n },${y}a${curveRadius},${curveRadius} 0 0 1 ${curveRadius},${curveRadius}`;\n\n return `L${x},${y}`;\n })\n .join('');\n return `M${lineStr.substr(1)}`;\n};\n\ntype ConnectorProps = Pick<PlottedGraphConnector, 'id' | 'data' | 'labelLayout' | 'points'> &\n Partial<Pick<PlaceHolderConnector, 'realConnectors'>>;\n\nconst Connector = ({ id, labelLayout, data, realConnectors, points }: ConnectorProps) => {\n const refId = realConnectors || id;\n const { readOnly, highlights } = useContext(FlowModellerContext);\n const theme = useTheme();\n\n const metaData: AddNodeHandlerParams = {\n refType: 'connector',\n refId\n };\n return (\n <>\n {data.type === 'default' && (\n <g key={id}>\n <path\n id={id}\n d={genLine(points)}\n stroke={\n highlights?.connectors?.[id]\n ? theme.base.colors.red.medium\n : theme.base.colors.slate.dark\n }\n strokeWidth={highlights?.connectors?.[id] ? 2 : 1}\n fill='none'\n />\n {labelLayout && (\n <foreignObject\n x={labelLayout.x - labelLayout.width}\n y={points[3].y - 20}\n width={labelLayout.width}\n height={labelLayout.height}\n >\n {labelLayout?.value && (\n <Flex container={{ justify: 'center' }}>\n <StyledLabel highlight={!!highlights?.connectors?.[id]}>\n {labelLayout.value}\n </StyledLabel>\n </Flex>\n )}\n {!readOnly && (\n <AddButton\n highlight={!!highlights?.connectors?.[id]}\n addNodeHandler={(e: MouseEvent<HTMLButtonElement>) =>\n data?.onNodeCreate(e.currentTarget, metaData)\n }\n />\n )}\n </foreignObject>\n )}\n </g>\n )}\n </>\n );\n};\n\nexport default Connector;\n"]}
@@ -1 +1 @@
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,MAAM,wBAAwB,CAAC;AAClE,OAAwB,EACtB,cAAc,EACd,iBAAiB,EAElB,MAAM,yBAAyB,CAAC;AAGjC,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,sOA2LlB,CAAC;AAEF,eAAe,aAAa,CAAC"}
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,MAAM,wBAAwB,CAAC;AAClE,OAAwB,EACtB,cAAc,EACd,iBAAiB,EAElB,MAAM,yBAAyB,CAAC;AAGjC,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+NlB,CAAC;AAEF,eAAe,aAAa,CAAC"}
@@ -42,15 +42,43 @@ const DeletePopover = forwardRef(({ show, target, flowGraphData, rendererGraphDa
42
42
  onChange?.(itemsToDelete, itemsToRetain, ev);
43
43
  };
44
44
  const submitHandler = (ev) => {
45
+ let error = true;
45
46
  const finalGraph = new DirectedGraph(flowGraphData);
46
47
  const finalDeleteOptionsResult = deleteNodeUtils.getDeleteNodeOptions(finalGraph, nodeId);
47
48
  let newTargetNode = finalDeleteOptionsResult?.destinationNodeId
48
49
  ? finalGraph.getNode(finalDeleteOptionsResult.destinationNodeId)
49
50
  : undefined;
50
51
  let itemsToDelete = finalDeleteOptionsResult.allItems;
51
- const selectedOption = currentSelection === -1 ? undefined : deleteOptions[currentSelection];
52
+ const selectedOption = currentSelection === -1 || nodeType !== 'Decision'
53
+ ? undefined
54
+ : finalDeleteOptionsResult?.options[currentSelection];
52
55
  let finalMetaData = selectedOption;
53
56
  if (selectedOption) {
57
+ const pathConnectors = selectedOption.pathItems.connectors;
58
+ const connectors = Object.keys(pathConnectors);
59
+ for (let i = 0; i < connectors.length; i += 1) {
60
+ const connectorData = pathConnectors[connectors[i]];
61
+ if (connectorData &&
62
+ finalGraph.getNode(connectorData.fromNodeId).type?.minConnectors !== 0 &&
63
+ connectorData.toNodeId === finalDeleteOptionsResult.destinationNodeId) {
64
+ error = false;
65
+ break;
66
+ }
67
+ }
68
+ if (error) {
69
+ onSubmit?.({
70
+ graphData: {
71
+ nodes: [],
72
+ connectors: []
73
+ },
74
+ updates: {
75
+ connectors: []
76
+ },
77
+ deletes: { nodes: {}, connectors: {} },
78
+ error: true
79
+ }, ev);
80
+ return;
81
+ }
54
82
  finalMetaData = finalDeleteOptionsResult.options.find(current => selectedOption.connector.id === current.connector.id);
55
83
  if (finalMetaData) {
56
84
  // get the ref of the first node of the retaining path
@@ -87,7 +115,8 @@ const DeletePopover = forwardRef(({ show, target, flowGraphData, rendererGraphDa
87
115
  updates: {
88
116
  connectors: nodeInConnectors
89
117
  },
90
- deletes: itemsToDelete
118
+ deletes: itemsToDelete,
119
+ error: false
91
120
  };
92
121
  onSubmit?.(outcome, ev);
93
122
  };
@@ -1 +1 @@
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 } from './Renderer/Utils/Graph';\nimport deleteNodeUtils, {\n GraphDataAsMap,\n DeleteNodeOutcome,\n DeleteNodeModalOption\n} from './Utils/deleteNodeUtils';\nimport { NodeProps } from './Node/Node.types';\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\n const deleteOptionsResult = deleteNodeUtils.getDeleteNodeOptions(graph, nodeId);\n\n const deleteOptions: DeleteNodeModalOption[] = deleteOptionsResult.options;\n const nodeType = (graph.getNode(nodeId) as NodeProps).type.name;\n\n useEffect(() => {\n if (deleteOptionsResult) {\n const itemsToDelete: GraphDataAsMap =\n nodeType !== 'Decision'\n ? deleteOptionsResult.allItems\n : 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 }\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;\n if (deleteOptionsResult) itemsToDelete = deleteOptionsResult.allItems;\n\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 if (itemsToDelete) itemsToDelete.nodes[nodeId] = graph.getNode(nodeId);\n\n if (itemsToDelete) 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 = finalDeleteOptionsResult?.destinationNodeId\n ? finalGraph.getNode(finalDeleteOptionsResult.destinationNodeId)\n : undefined;\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(\n current => selectedOption.connector.id === current.connector.id\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\n // iterate and set the targetNode to the above first node instead of the selected node.\n\n nodeInConnectors.forEach(con => {\n finalGraph.setConnector(con.id, {\n toNodeId: newTargetNode ? newTargetNode.id : undefined\n });\n });\n\n const resultGraphData = finalGraph.getGraphData();\n\n itemsToDelete.nodes[nodeId] = finalGraph.getNode(nodeId);\n\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\n // filter the highlighted connectors\n const connectors = resultGraphData.connectors.filter(item => {\n return itemsToDelete.connectors[item.id] === undefined;\n });\n\n const outcome: DeleteNodeOutcome = {\n graphData: {\n nodes: nodes as NodeProps[],\n connectors\n },\n updates: {\n connectors: nodeInConnectors\n },\n deletes: itemsToDelete\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_step_title')}</Text>\n <Button variant='simple' icon label={t('close')} onClick={onCancelHandler}>\n <Icon name='times' />\n </Button>\n </Flex>\n {nodeType === 'Decision' ? (\n <>\n <Text>{t('delete_decision_step')}</Text>\n <Select\n id='select-demo'\n label={t('delete_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 ) : (\n <Text>{t('delete_step')}</Text>\n )}\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"]}
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 } from './Renderer/Utils/Graph';\nimport deleteNodeUtils, {\n GraphDataAsMap,\n DeleteNodeOutcome,\n DeleteNodeModalOption\n} from './Utils/deleteNodeUtils';\nimport { NodeProps } from './Node/Node.types';\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\n const deleteOptionsResult = deleteNodeUtils.getDeleteNodeOptions(graph, nodeId);\n\n const deleteOptions: DeleteNodeModalOption[] = deleteOptionsResult.options;\n const nodeType = (graph.getNode(nodeId) as NodeProps).type.name;\n\n useEffect(() => {\n if (deleteOptionsResult) {\n const itemsToDelete: GraphDataAsMap =\n nodeType !== 'Decision'\n ? deleteOptionsResult.allItems\n : 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 }\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;\n if (deleteOptionsResult) itemsToDelete = deleteOptionsResult.allItems;\n\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 if (itemsToDelete) itemsToDelete.nodes[nodeId] = graph.getNode(nodeId);\n\n if (itemsToDelete) onChange?.(itemsToDelete, itemsToRetain, ev);\n };\n\n const submitHandler = (ev: Event) => {\n let error = true;\n const finalGraph = new DirectedGraph(flowGraphData);\n const finalDeleteOptionsResult = deleteNodeUtils.getDeleteNodeOptions(finalGraph, nodeId);\n\n let newTargetNode = finalDeleteOptionsResult?.destinationNodeId\n ? finalGraph.getNode(finalDeleteOptionsResult.destinationNodeId)\n : undefined;\n let itemsToDelete = finalDeleteOptionsResult.allItems;\n\n const selectedOption =\n currentSelection === -1 || nodeType !== 'Decision'\n ? undefined\n : finalDeleteOptionsResult?.options[currentSelection];\n let finalMetaData = selectedOption;\n\n if (selectedOption) {\n const pathConnectors = selectedOption.pathItems.connectors;\n const connectors = Object.keys(pathConnectors);\n for (let i = 0; i < connectors.length; i += 1) {\n const connectorData = pathConnectors[connectors[i]];\n if (\n connectorData &&\n finalGraph.getNode(connectorData.fromNodeId).type?.minConnectors !== 0 &&\n connectorData.toNodeId === finalDeleteOptionsResult.destinationNodeId\n ) {\n error = false;\n break;\n }\n }\n if (error) {\n onSubmit?.(\n {\n graphData: {\n nodes: [],\n connectors: []\n },\n updates: {\n connectors: []\n },\n deletes: { nodes: {}, connectors: {} },\n error: true\n },\n ev\n );\n return;\n }\n\n finalMetaData = finalDeleteOptionsResult.options.find(\n current => selectedOption.connector.id === current.connector.id\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\n // iterate and set the targetNode to the above first node instead of the selected node.\n\n nodeInConnectors.forEach(con => {\n finalGraph.setConnector(con.id, {\n toNodeId: newTargetNode ? newTargetNode.id : undefined\n });\n });\n\n const resultGraphData = finalGraph.getGraphData();\n\n itemsToDelete.nodes[nodeId] = finalGraph.getNode(nodeId);\n\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\n // filter the highlighted connectors\n const connectors = resultGraphData.connectors.filter(item => {\n return itemsToDelete.connectors[item.id] === undefined;\n });\n\n const outcome: DeleteNodeOutcome = {\n graphData: {\n nodes: nodes as NodeProps[],\n connectors\n },\n updates: {\n connectors: nodeInConnectors\n },\n deletes: itemsToDelete,\n error: false\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_step_title')}</Text>\n <Button variant='simple' icon label={t('close')} onClick={onCancelHandler}>\n <Icon name='times' />\n </Button>\n </Flex>\n {nodeType === 'Decision' ? (\n <>\n <Text>{t('delete_decision_step')}</Text>\n <Select\n id='select-demo'\n label={t('delete_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 ) : (\n <Text>{t('delete_step')}</Text>\n )}\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"]}
@@ -1 +1 @@
1
- {"version":3,"file":"FlowModeller.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EAQhB,MAAM,OAAO,CAAC;AA+Bf,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAkFzD,QAAA,MAAM,YAAY,sHAUf,gBAAgB,iBAAiB,CAAC,gBA8OpC,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,EAQhB,MAAM,OAAO,CAAC;AA+Bf,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAsFzD,QAAA,MAAM,YAAY,sHAUf,gBAAgB,iBAAiB,CAAC,gBA8SpC,CAAC;AAEF,eAAe,YAAY,CAAC"}
@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { useEffect, useReducer, useCallback, useRef, useMemo } from 'react';
3
3
  import { createUID, useElement, useOuterEvent, useI18n } from '@pega/cosmos-react-core';
4
4
  import ItemLibrary from '../ItemLibrary/ItemLibrary';
5
+ import { DirectedGraph } from './Renderer/Utils/Graph';
5
6
  import FlowRenderer from './Renderer/Renderer';
6
7
  import { START_NODETYPE, STOP_NODETYPE } from './Node/Node.types';
7
8
  import PlaceHolderHelper from './Utils/addNodeUtils';
@@ -14,6 +15,7 @@ import FlowModellerContext from './FlowModellerContext';
14
15
  const initState = {
15
16
  showLib: false,
16
17
  activeItem: null,
18
+ allowNonBranchNode: false,
17
19
  activeAddBtnMeta: {
18
20
  target: null,
19
21
  meta: {
@@ -32,7 +34,7 @@ const reducer = (state, action) => {
32
34
  // minor optimization, not to update state.. if no change in the value
33
35
  return action.payload.show === state.showLib
34
36
  ? state
35
- : { ...state, showLib: action.payload.show };
37
+ : { ...state, showLib: action.payload.show, allowNonBranchNode: false };
36
38
  case 'setActiveItem':
37
39
  return {
38
40
  ...state,
@@ -44,7 +46,8 @@ const reducer = (state, action) => {
44
46
  };
45
47
  return {
46
48
  ...state,
47
- showLib: true
49
+ showLib: true,
50
+ allowNonBranchNode: action.payload.allowNonBranchNode
48
51
  };
49
52
  case 'setGraphData':
50
53
  return {
@@ -85,11 +88,55 @@ const FlowModeller = ({ graphData, highlightData, onNodeActionClick, onNodeAdd,
85
88
  stateRef.current = state;
86
89
  const t = useI18n();
87
90
  const onNodeCreate = (el, meta) => {
91
+ const graph = new DirectedGraph(graphData);
92
+ let isAllowNonBranchNode = false;
93
+ if (meta.refType === 'connector') {
94
+ if (!Array.isArray(meta.refId))
95
+ meta.refId = [meta.refId];
96
+ const connectorData = graph.getConnector(meta.refId[0]);
97
+ const toNode = graph.getNode(connectorData.toNodeId);
98
+ const inConnectors = graph.getInConnectors(toNode.id);
99
+ let hiddenConnectorsCount = 0;
100
+ inConnectors.forEach(connector => {
101
+ const node = graph.getNode(connector.fromNodeId);
102
+ if (node.type.minConnectors === 0)
103
+ hiddenConnectorsCount += 1;
104
+ });
105
+ const isPlaceholderConnector = meta.refId.length > 1;
106
+ /** if node is being added on a placeholder connector then reduce number of in connectors of destination node
107
+ * by total number of connectors converging/joining to form placeholder connector and add one to the in connector count
108
+ */
109
+ const inConnectorsCount = isPlaceholderConnector
110
+ ? inConnectors.length - meta.refId.length + 1
111
+ : inConnectors.length;
112
+ /** if node is being added on a placeholder connector then reduce number of hidden connectors of destination node
113
+ * by total number of connectors converging/joining to from placeholder connector and are originating from go to nodes
114
+ */
115
+ if (isPlaceholderConnector) {
116
+ meta.refId.forEach(connector => {
117
+ if (graph.getNode(graph.getConnector(connector).fromNodeId).type.minConnectors === 0)
118
+ hiddenConnectorsCount -= 1;
119
+ });
120
+ }
121
+ /** check destination/target node in connectors count is more than one
122
+ * check non-hidden/visible connectors among in connectors of destination/target node are more than 1
123
+ * check connectors converging/joining to form a placeholder connector are not equal to total number of in connectors
124
+ */
125
+ if (inConnectorsCount > 1 &&
126
+ inConnectorsCount - hiddenConnectorsCount > 1 &&
127
+ inConnectors.length !== meta.refId.length) {
128
+ isAllowNonBranchNode = true;
129
+ }
130
+ else {
131
+ isAllowNonBranchNode = false;
132
+ }
133
+ }
88
134
  dispatch({
89
135
  type: 'setActiveAddButton',
90
136
  payload: {
91
137
  target: el,
92
- meta
138
+ meta,
139
+ allowNonBranchNode: isAllowNonBranchNode
93
140
  }
94
141
  });
95
142
  };
@@ -111,10 +158,16 @@ const FlowModeller = ({ graphData, highlightData, onNodeActionClick, onNodeAdd,
111
158
  }
112
159
  });
113
160
  };
114
- const onDeleteWrapper = useCallback((params, e) => {
161
+ const onDeleteWrapper = (params, e) => {
115
162
  const result = FlowModellerHelper.deleteNode(graphData, params.nodeId);
116
163
  if (result) {
117
- onDelete?.({ ...params, additionalData: result }, e);
164
+ if (!result.updates && result.error) {
165
+ onDelete?.({ ...params, additionalData: result }, t('delete_referenced_step_error'), e);
166
+ }
167
+ else if (result.error) {
168
+ onDelete?.({ ...params, additionalData: result }, t('delete_step_error'), e);
169
+ }
170
+ onDelete?.({ ...params, additionalData: result }, '', e);
118
171
  }
119
172
  else {
120
173
  dispatch({
@@ -141,15 +194,21 @@ const FlowModeller = ({ graphData, highlightData, onNodeActionClick, onNodeAdd,
141
194
  onSubmit: outcome => {
142
195
  // un-highlight the nodes and connectors
143
196
  closeDeleteModel();
144
- onDelete?.({ ...params, additionalData: outcome }, e);
197
+ if (outcome.error) {
198
+ onDelete?.({ ...params, additionalData: outcome }, t('delete_step_error'), e);
199
+ }
200
+ else {
201
+ onDelete?.({ ...params, additionalData: outcome }, '', e);
202
+ }
145
203
  },
146
204
  onCancel: closeDeleteModel
147
205
  }
148
206
  }
149
207
  });
150
208
  }
151
- }, [graphData, state.graphData]);
209
+ };
152
210
  useEffect(() => {
211
+ const graph = new DirectedGraph(graphData);
153
212
  const onGetNewPHNode = metaData => {
154
213
  return {
155
214
  id: createUID(),
@@ -167,7 +226,8 @@ const FlowModeller = ({ graphData, highlightData, onNodeActionClick, onNodeAdd,
167
226
  toNodeId,
168
227
  points: [],
169
228
  data: {
170
- onNodeCreate
229
+ onNodeCreate,
230
+ type: 'default'
171
231
  }
172
232
  };
173
233
  };
@@ -197,12 +257,15 @@ const FlowModeller = ({ graphData, highlightData, onNodeActionClick, onNodeAdd,
197
257
  return flowNode;
198
258
  });
199
259
  const connectors = graphData.connectors.map(connector => {
260
+ const nodeData = graph.getNode(connector.fromNodeId);
261
+ const isBranchNode = nodeData.type.minConnectors === 0;
200
262
  return {
201
263
  ...connector,
202
264
  points: [],
203
265
  data: {
204
266
  label: connector.label,
205
- onNodeCreate
267
+ onNodeCreate,
268
+ type: !isBranchNode ? 'default' : 'hidden'
206
269
  }
207
270
  };
208
271
  });
@@ -236,7 +299,15 @@ const FlowModeller = ({ graphData, highlightData, onNodeActionClick, onNodeAdd,
236
299
  document.removeEventListener('keydown', onKeydown);
237
300
  };
238
301
  }, []);
239
- const items = nodeLibrary !== undefined ? nodeLibrary : [];
302
+ let items = nodeLibrary !== undefined ? nodeLibrary : [];
303
+ if (!state.allowNonBranchNode) {
304
+ items = items.filter(shapeTypes => {
305
+ if (shapeTypes.type) {
306
+ return shapeTypes.type.minConnectors !== 0;
307
+ }
308
+ return true;
309
+ });
310
+ }
240
311
  const ctxValue = useMemo(() => ({ readOnly, highlights: highlightData ?? state.highlightItems }), [readOnly, state.highlightItems, highlightData]);
241
312
  return (_jsxs("div", { children: [_jsx(FlowModellerContext.Provider, { value: ctxValue, children: _jsx(FlowRenderer, { graphData: state.graphData, connector: Connector, node: Node }) }), state.showDeletePopover && state.deleteProps && (_jsx(DeletePopover, { show: state.showDeletePopover, ref: setDeletePopoverEl, ...state.deleteProps })), _jsx(ItemLibrary, { show: state.showLib, target: state.activeAddBtnMeta.target, placeholder: t('search_nodes'), items: items, onClick: onLibraryItemSelect, ref: setPopoverEl, position: 'bottom' })] }));
242
313
  };
@@ -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 Reducer,\n useCallback,\n useRef,\n useMemo\n} from 'react';\n\nimport {\n PopoverProps,\n createUID,\n useElement,\n useOuterEvent,\n useI18n,\n OmitStrict\n} from '@pega/cosmos-react-core';\n\nimport ItemLibrary, { LibraryItem } from '../ItemLibrary/ItemLibrary';\n\nimport { GraphData } from './Renderer/Utils/Graph';\nimport { AddNodeHandlerParams } from './Renderer/Renderer.types';\nimport FlowRenderer from './Renderer/Renderer';\nimport {\n ActionParams,\n NodeLibraryItem,\n START_NODETYPE,\n STOP_NODETYPE,\n NodeComponentData\n} from './Node/Node.types';\nimport PlaceHolderHelper from './Utils/addNodeUtils';\nimport { AddButton } from './AddNode';\nimport FlowModellerHelper from './helper';\nimport DeletePopover, { DeleteNodePopoverProps } from './DeletePopover';\nimport Connector from './Connector';\nimport Node from './Node';\nimport { DeleteNodeModalOption, DeleteNodeOutcome } from './Utils/deleteNodeUtils';\nimport FlowModellerContext from './FlowModellerContext';\nimport { FlowModellerProps } from './FlowModeller.types';\nimport { PlottedGraphNode, PlottedGraphConnector } from './Renderer/Utils/GraphLayout';\n\ntype ModellerState = {\n showLib: boolean;\n activeItem: Element | null;\n activeAddBtnMeta: {\n target: null; // we will maintain ref of an Element\n meta: AddNodeHandlerParams;\n };\n graphData: GraphData<PlottedGraphNode, PlottedGraphConnector>;\n highlightItems?: DeleteNodeModalOption['pathItems'];\n showDeletePopover: boolean;\n deleteProps:\n | OmitStrict<DeleteNodePopoverProps & { target: PopoverProps['target'] }, 'show'>\n | undefined;\n};\n\nconst initState: ModellerState = {\n showLib: false,\n activeItem: null,\n 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 highlightItems: action.payload.highlightItems\n };\n case 'highlight':\n // minor optimization to avoid unnecessary re-render\n if (action.payload.hideDeletePopover === !state.showDeletePopover) {\n return state;\n }\n\n return {\n ...state,\n highlightItems: action.payload.highlightItems,\n showDeletePopover: action.payload.hideDeletePopover !== true && state.showDeletePopover\n };\n case 'showDeletePopover':\n return {\n ...state,\n showDeletePopover: action.payload.showDeletePopover,\n deleteProps: action.payload.deleteProps\n };\n default:\n return state;\n }\n};\n\nconst FlowModeller = ({\n graphData,\n highlightData,\n onNodeActionClick,\n onNodeAdd,\n nodeLibrary,\n onNodeClick,\n onDelete,\n actions,\n readOnly\n}: PropsWithoutRef<FlowModellerProps>) => {\n const [state, dispatch] = useReducer<Reducer<ModellerState, any>>(reducer, initState);\n const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n const [deletePopoverEl, setDeletePopoverEl] = useElement<HTMLElement>(null);\n const stateRef = useRef<ModellerState>(initState);\n\n // stateRef always refers to the same state obj\n // \"fixed\" callbacks can refer to this object whenever\n // it need the current value. Note: the callbacks will not\n // be reactive - they will not re-run the instant state changes,\n // but they *will* see the current value whenever they do run\n stateRef.current = state;\n const t = useI18n();\n\n const onNodeCreate = (el: HTMLElement | SVGForeignObjectElement, meta: AddNodeHandlerParams) => {\n 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) => PlottedGraphNode = metaData => {\n return {\n id: createUID(),\n children: (\n <AddButton\n addNodeHandler={(e: MouseEvent<HTMLButtonElement>) => {\n onNodeCreate(e.currentTarget as HTMLElement, metaData);\n }}\n />\n ),\n position: { x: 0, y: 0 },\n dimensions: { width: 1, height: 0 }\n };\n };\n\n const onGetNewPHConnector: (\n fromNodeId: string,\n toNodeId: string,\n metaData: AddNodeHandlerParams\n ) => PlottedGraphConnector = (fromNodeId, toNodeId) => {\n return {\n id: createUID(),\n fromNodeId,\n toNodeId,\n points: [],\n data: {\n onNodeCreate\n }\n };\n };\n\n const flowNodes: PlottedGraphNode[] = graphData.nodes.map(node => {\n const flowNode: PlottedGraphNode = {\n ...node,\n dimensions: {\n width: 280,\n height: 120\n },\n position: {\n x: 0,\n y: 0\n },\n data: {\n isActive: state.activeItem?.id === node.id,\n actions,\n onDelete: onDeleteWrapper,\n onActionClick: onNodeActionClick,\n onClick: onNodeClick\n } as NodeComponentData\n };\n\n if (node.type.id === START_NODETYPE.id || node.type.id === STOP_NODETYPE.id) {\n flowNode.dimensions.width = 58;\n flowNode.dimensions.height = 58;\n }\n return flowNode;\n });\n\n const connectors: PlottedGraphConnector[] = 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<PlottedGraphNode, PlottedGraphConnector> =\n PlaceHolderHelper.injectPlaceholderNodes(\n { nodes: flowNodes, connectors },\n onGetNewPHNode,\n onGetNewPHConnector\n );\n\n dispatch({\n type: 'setGraphData',\n payload: {\n graphData: newGraphData\n }\n });\n }, [graphData]);\n\n /**\n * Library popover functionality\n */\n const onLibraryItemSelect = useCallback(\n (libItem: LibraryItem) => {\n const metaData = state.activeAddBtnMeta.meta;\n closeMenu();\n onNodeAdd((libItem as NodeLibraryItem).type, metaData);\n },\n [state.activeAddBtnMeta]\n );\n\n const onKeydown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n closeMenu();\n }\n },\n [closeMenu]\n );\n\n useOuterEvent('mousedown', [popoverEl], closeMenu);\n useOuterEvent('mousedown', [deletePopoverEl], closeDeleteModel);\n\n useEffect(() => {\n document.addEventListener('keydown', onKeydown);\n\n return () => {\n document.removeEventListener('keydown', onKeydown);\n };\n }, []);\n\n const items: NodeLibraryItem[] = nodeLibrary !== undefined ? nodeLibrary : [];\n\n const ctxValue = useMemo(\n () => ({ readOnly, highlights: highlightData ?? state.highlightItems }),\n [readOnly, state.highlightItems, highlightData]\n );\n\n return (\n <div>\n <FlowModellerContext.Provider value={ctxValue}>\n <FlowRenderer graphData={state.graphData} connector={Connector} node={Node} />\n </FlowModellerContext.Provider>\n {state.showDeletePopover && state.deleteProps && (\n <DeletePopover\n show={state.showDeletePopover}\n ref={setDeletePopoverEl}\n {...state.deleteProps}\n />\n )}\n <ItemLibrary\n show={state.showLib}\n target={state.activeAddBtnMeta.target}\n placeholder={t('search_nodes')}\n items={items}\n onClick={onLibraryItemSelect}\n ref={setPopoverEl}\n position='bottom'\n />\n </div>\n );\n};\n\nexport default FlowModeller;\n"]}
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 useMemo\n} from 'react';\n\nimport {\n PopoverProps,\n createUID,\n useElement,\n useOuterEvent,\n useI18n,\n OmitStrict\n} from '@pega/cosmos-react-core';\n\nimport ItemLibrary, { LibraryItem } from '../ItemLibrary/ItemLibrary';\n\nimport { GraphData, DirectedGraph } from './Renderer/Utils/Graph';\nimport { AddNodeHandlerParams } from './Renderer/Renderer.types';\nimport FlowRenderer from './Renderer/Renderer';\nimport {\n ActionParams,\n NodeLibraryItem,\n START_NODETYPE,\n STOP_NODETYPE,\n NodeComponentData\n} from './Node/Node.types';\nimport PlaceHolderHelper from './Utils/addNodeUtils';\nimport { AddButton } from './AddNode';\nimport FlowModellerHelper from './helper';\nimport DeletePopover, { DeleteNodePopoverProps } from './DeletePopover';\nimport Connector from './Connector';\nimport Node from './Node';\nimport { DeleteNodeModalOption, DeleteNodeOutcome } from './Utils/deleteNodeUtils';\nimport FlowModellerContext from './FlowModellerContext';\nimport { FlowModellerProps } from './FlowModeller.types';\nimport { PlottedGraphNode, PlottedGraphConnector } from './Renderer/Utils/GraphLayout';\n\ntype ModellerState = {\n showLib: boolean;\n allowNonBranchNode: boolean;\n activeItem: Element | null;\n activeAddBtnMeta: {\n target: null; // we will maintain ref of an Element\n meta: AddNodeHandlerParams;\n };\n graphData: GraphData<PlottedGraphNode, PlottedGraphConnector>;\n highlightItems?: DeleteNodeModalOption['pathItems'];\n showDeletePopover: boolean;\n deleteProps:\n | OmitStrict<DeleteNodePopoverProps & { target: PopoverProps['target'] }, 'show'>\n | undefined;\n};\n\nconst initState: ModellerState = {\n showLib: false,\n activeItem: null,\n allowNonBranchNode: false,\n activeAddBtnMeta: {\n target: null,\n meta: {\n refType: 'node',\n refId: ''\n }\n },\n graphData: { nodes: [], connectors: [] },\n highlightItems: undefined,\n showDeletePopover: false,\n deleteProps: undefined\n};\n\nconst reducer = (state: ModellerState, action: { type: string; payload: any }) => {\n switch (action.type) {\n case 'showLibrary':\n // minor optimization, not to update state.. if no change in the value\n return action.payload.show === state.showLib\n ? state\n : { ...state, showLib: action.payload.show, allowNonBranchNode: false };\n case 'setActiveItem':\n return {\n ...state,\n activeItem: action.payload.target\n };\n case 'setActiveAddButton':\n state.activeAddBtnMeta = {\n ...action.payload\n };\n\n return {\n ...state,\n showLib: true,\n allowNonBranchNode: action.payload.allowNonBranchNode\n };\n case 'setGraphData':\n return {\n ...state,\n graphData: action.payload.graphData,\n highlightItems: action.payload.highlightItems\n };\n case 'highlight':\n // minor optimization to avoid unnecessary re-render\n if (action.payload.hideDeletePopover === !state.showDeletePopover) {\n return state;\n }\n\n return {\n ...state,\n highlightItems: action.payload.highlightItems,\n showDeletePopover: action.payload.hideDeletePopover !== true && state.showDeletePopover\n };\n case 'showDeletePopover':\n return {\n ...state,\n showDeletePopover: action.payload.showDeletePopover,\n deleteProps: action.payload.deleteProps\n };\n default:\n return state;\n }\n};\n\nconst FlowModeller = ({\n graphData,\n highlightData,\n onNodeActionClick,\n onNodeAdd,\n nodeLibrary,\n onNodeClick,\n onDelete,\n actions,\n readOnly\n}: PropsWithoutRef<FlowModellerProps>) => {\n const [state, dispatch] = useReducer<Reducer<ModellerState, any>>(reducer, initState);\n const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n const [deletePopoverEl, setDeletePopoverEl] = useElement<HTMLElement>(null);\n const stateRef = useRef<ModellerState>(initState);\n\n // stateRef always refers to the same state obj\n // \"fixed\" callbacks can refer to this object whenever\n // it need the current value. Note: the callbacks will not\n // be reactive - they will not re-run the instant state changes,\n // but they *will* see the current value whenever they do run\n stateRef.current = state;\n const t = useI18n();\n\n const onNodeCreate = (el: HTMLElement | SVGForeignObjectElement, meta: AddNodeHandlerParams) => {\n const graph = new DirectedGraph(graphData);\n let isAllowNonBranchNode = false;\n if (meta.refType === 'connector') {\n if (!Array.isArray(meta.refId)) meta.refId = [meta.refId];\n const connectorData = graph.getConnector(meta.refId[0]);\n const toNode = graph.getNode(connectorData.toNodeId);\n const inConnectors = graph.getInConnectors(toNode.id);\n let hiddenConnectorsCount = 0;\n inConnectors.forEach(connector => {\n const node = graph.getNode(connector.fromNodeId);\n if (node.type.minConnectors === 0) hiddenConnectorsCount += 1;\n });\n const isPlaceholderConnector = meta.refId.length > 1;\n\n /** if node is being added on a placeholder connector then reduce number of in connectors of destination node\n * by total number of connectors converging/joining to form placeholder connector and add one to the in connector count\n */\n const inConnectorsCount = isPlaceholderConnector\n ? inConnectors.length - meta.refId.length + 1\n : inConnectors.length;\n\n /** if node is being added on a placeholder connector then reduce number of hidden connectors of destination node\n * by total number of connectors converging/joining to from placeholder connector and are originating from go to nodes\n */\n if (isPlaceholderConnector) {\n meta.refId.forEach(connector => {\n if (graph.getNode(graph.getConnector(connector).fromNodeId).type.minConnectors === 0)\n hiddenConnectorsCount -= 1;\n });\n }\n\n /** check destination/target node in connectors count is more than one\n * check non-hidden/visible connectors among in connectors of destination/target node are more than 1\n * check connectors converging/joining to form a placeholder connector are not equal to total number of in connectors\n */\n if (\n inConnectorsCount > 1 &&\n inConnectorsCount - hiddenConnectorsCount > 1 &&\n inConnectors.length !== meta.refId.length\n ) {\n isAllowNonBranchNode = true;\n } else {\n isAllowNonBranchNode = false;\n }\n }\n dispatch({\n type: 'setActiveAddButton',\n payload: {\n target: el,\n meta,\n allowNonBranchNode: isAllowNonBranchNode\n }\n });\n };\n\n const closeMenu = () => {\n dispatch({\n type: 'showLibrary',\n payload: {\n show: false\n }\n });\n };\n\n const closeDeleteModel = () => {\n // un-highlight the nodes and connectors\n dispatch({\n type: 'highlight',\n payload: {\n highlightItems: undefined,\n hideDeletePopover: true\n }\n });\n };\n\n const onDeleteWrapper = (params: ActionParams, e: MouseEvent) => {\n const result: DeleteNodeOutcome | false = FlowModellerHelper.deleteNode(\n graphData,\n params.nodeId\n );\n if (result) {\n if (!result.updates && result.error) {\n onDelete?.({ ...params, additionalData: result }, t('delete_referenced_step_error'), e);\n } else if (result.error) {\n onDelete?.({ ...params, additionalData: result }, t('delete_step_error'), e);\n }\n onDelete?.({ ...params, additionalData: result }, '', e);\n } else {\n dispatch({\n type: 'showDeletePopover',\n payload: {\n showDeletePopover: true,\n deleteProps: {\n flowGraphData: graphData,\n rendererGraphData: stateRef.current.graphData,\n nodeId: params.nodeId,\n target: {\n getBoundingClientRect: () =>\n document\n .getElementById(`modeller-node-${stateRef.current.deleteProps?.nodeId}`)\n ?.getBoundingClientRect()\n } as PopoverProps['target'],\n onChange: highlights => {\n dispatch({\n type: 'highlight',\n payload: {\n highlightItems: highlights\n }\n });\n },\n onSubmit: outcome => {\n // un-highlight the nodes and connectors\n closeDeleteModel();\n if (outcome.error) {\n onDelete?.({ ...params, additionalData: outcome }, t('delete_step_error'), e);\n } else {\n onDelete?.({ ...params, additionalData: outcome }, '', e);\n }\n },\n onCancel: closeDeleteModel\n } as ModellerState['deleteProps']\n }\n });\n }\n };\n\n useEffect(() => {\n const graph = new DirectedGraph(graphData);\n const onGetNewPHNode: (metaData: AddNodeHandlerParams) => PlottedGraphNode = metaData => {\n return {\n id: createUID(),\n children: (\n <AddButton\n addNodeHandler={(e: MouseEvent<HTMLButtonElement>) => {\n onNodeCreate(e.currentTarget as HTMLElement, metaData);\n }}\n />\n ),\n position: { x: 0, y: 0 },\n dimensions: { width: 1, height: 0 }\n };\n };\n\n const onGetNewPHConnector: (\n fromNodeId: string,\n toNodeId: string,\n metaData: AddNodeHandlerParams\n ) => PlottedGraphConnector = (fromNodeId, toNodeId) => {\n return {\n id: createUID(),\n fromNodeId,\n toNodeId,\n points: [],\n data: {\n onNodeCreate,\n type: 'default'\n }\n };\n };\n\n const flowNodes: PlottedGraphNode[] = graphData.nodes.map(node => {\n const flowNode: PlottedGraphNode = {\n ...node,\n dimensions: {\n width: 280,\n height: 120\n },\n position: {\n x: 0,\n y: 0\n },\n data: {\n isActive: state.activeItem?.id === node.id,\n actions,\n onDelete: onDeleteWrapper,\n onActionClick: onNodeActionClick,\n onClick: onNodeClick\n } as NodeComponentData\n };\n\n if (node.type.id === START_NODETYPE.id || node.type.id === STOP_NODETYPE.id) {\n flowNode.dimensions.width = 58;\n flowNode.dimensions.height = 58;\n }\n return flowNode;\n });\n\n const connectors: PlottedGraphConnector[] = graphData.connectors.map(connector => {\n const nodeData = graph.getNode(connector.fromNodeId);\n const isBranchNode = nodeData.type.minConnectors === 0;\n return {\n ...connector,\n points: [],\n data: {\n label: connector.label,\n onNodeCreate,\n type: !isBranchNode ? 'default' : 'hidden'\n }\n };\n });\n\n // inject the placeholderAddNodes dynamically\n const newGraphData: GraphData<PlottedGraphNode, PlottedGraphConnector> =\n PlaceHolderHelper.injectPlaceholderNodes(\n { nodes: flowNodes, connectors },\n onGetNewPHNode,\n onGetNewPHConnector\n );\n\n dispatch({\n type: 'setGraphData',\n payload: {\n graphData: newGraphData\n }\n });\n }, [graphData]);\n\n /**\n * Library popover functionality\n */\n const onLibraryItemSelect = useCallback(\n (libItem: LibraryItem) => {\n const metaData = state.activeAddBtnMeta.meta;\n closeMenu();\n onNodeAdd((libItem as NodeLibraryItem).type, metaData);\n },\n [state.activeAddBtnMeta]\n );\n\n const onKeydown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n closeMenu();\n }\n },\n [closeMenu]\n );\n\n useOuterEvent('mousedown', [popoverEl], closeMenu);\n useOuterEvent('mousedown', [deletePopoverEl], closeDeleteModel);\n\n useEffect(() => {\n document.addEventListener('keydown', onKeydown);\n\n return () => {\n document.removeEventListener('keydown', onKeydown);\n };\n }, []);\n\n let items: NodeLibraryItem[] = nodeLibrary !== undefined ? nodeLibrary : [];\n\n if (!state.allowNonBranchNode) {\n items = items.filter(shapeTypes => {\n if (shapeTypes.type) {\n return shapeTypes.type.minConnectors !== 0;\n }\n return true;\n });\n }\n const ctxValue = useMemo(\n () => ({ readOnly, highlights: highlightData ?? state.highlightItems }),\n [readOnly, state.highlightItems, highlightData]\n );\n\n return (\n <div>\n <FlowModellerContext.Provider value={ctxValue}>\n <FlowRenderer graphData={state.graphData} connector={Connector} node={Node} />\n </FlowModellerContext.Provider>\n {state.showDeletePopover && state.deleteProps && (\n <DeletePopover\n show={state.showDeletePopover}\n ref={setDeletePopoverEl}\n {...state.deleteProps}\n />\n )}\n <ItemLibrary\n show={state.showLib}\n target={state.activeAddBtnMeta.target}\n placeholder={t('search_nodes')}\n items={items}\n onClick={onLibraryItemSelect}\n ref={setPopoverEl}\n position='bottom'\n />\n </div>\n );\n};\n\nexport default FlowModeller;\n"]}
@@ -14,7 +14,7 @@ export interface FlowModellerProps {
14
14
  /** Callback for actions on Node */
15
15
  onNodeActionClick?: (param: ActionParams, e: MouseEvent) => void;
16
16
  /** Callback for node deletion */
17
- onDelete?: (param: ActionParams, e: MouseEvent) => void;
17
+ onDelete?: (param: ActionParams, error: string, e: MouseEvent) => void;
18
18
  /** Types of nodes */
19
19
  nodeLibrary: NodeLibraryItem[];
20
20
  /** Highlights */
@@ -1 +1 @@
1
- {"version":3,"file":"FlowModeller.types.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAEvF,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,SAAS,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;IAChD,mBAAmB;IACnB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,0CAA0C;IAC1C,SAAS,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACtE,kDAAkD;IAClD,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,mCAAmC;IACnC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACjE,iCAAiC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxD,qBAAqB;IACrB,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,iBAAiB;IACjB,aAAa,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IAC5C,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}
1
+ {"version":3,"file":"FlowModeller.types.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAEvF,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,SAAS,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;IAChD,mBAAmB;IACnB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,0CAA0C;IAC1C,SAAS,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACtE,kDAAkD;IAClD,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,mCAAmC;IACnC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACjE,iCAAiC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACvE,qBAAqB;IACrB,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,iBAAiB;IACjB,aAAa,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IAC5C,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}