flow-lib-creomnia 1.0.7 → 1.0.8-dev.2

package/lib/modules/connection/components/AddButton/styled.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createPlaceholder = exports.createAddButton = void 0;
+const system_1 = require("@mui/system");
+const Add_1 = __importDefault(require("@mui/icons-material/Add"));
+const config_1 = require("../../../../config");
+const colors_1 = require("../../../../config/colors");
+const material_1 = require("@mui/material");
+const createAddButton = ({ background = colors_1.Colors.WHITE, x, y, }) => (0, system_1.styled)(Add_1.default) `
+  height: ${config_1.Config.ADD_BUTTON_WIDTH}px;
+  width: ${config_1.Config.ADD_BUTTON_WIDTH}px;
+  position: absolute;
+  top: ${y}px;
+  left: ${x}px;
+  font-size: ${config_1.Config.ADD_BUTTON_WIDTH}px;
+  background: ${background};
+  color: ${colors_1.Colors.NAVY_BLUE};
+  border-radius: 50%;
+  cursor: pointer;
+  z-index: 1000;
+  :hover {
+    background: ${colors_1.Colors.BLUE};
+    color: ${colors_1.Colors.WHITE};
+    box-shadow: 0 0 1px 3px ${colors_1.Colors.DEEP_BLUE};
+  }
+`;
+exports.createAddButton = createAddButton;
+const createPlaceholder = (isOver, canDrop) => (0, system_1.styled)(material_1.Box)(() => `
+  width: ${config_1.Config.NODE_WIDTH}px;
+  height: ${config_1.Config.NODE_HEIGHT}px;
+  position: absolute;
+  border-radius: 8px;
+  background-color: rgba(99, 102, 241, 0.12);
+  border: dashed #2970FF 2px;
+  opacity: ${isOver ? 1 : 0};
+  z-index:  ${canDrop ? 1000 : 0};
+  `);
+exports.createPlaceholder = createPlaceholder;

package/lib/modules/connection/components/BaseConnection/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { ConnectionPropsType } from "../../types";
+declare const BaseConnection: FC<ConnectionPropsType>;
+export default BaseConnection;

package/lib/modules/connection/components/BaseConnection/index.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styled_1 = require("./styled");
+const connectionParametersServices_1 = require("../../services/connectionParametersServices");
+const web_1 = require("@react-spring/web");
+const colors_1 = require("../../../../config/colors");
+const BaseConnection = ({ startPoint, endPoint, node, curveType, isProcessed }) => {
+    const { ConnectionLine } = (0, react_1.useMemo)(() => {
+        const { width, height, x, y, top, bottom, left, right } = connectionParametersServices_1.connectionParametersServices.calculateConnectionParameters({
+            endPoint,
+            startPoint,
+            node,
+            curveType,
+        });
+        const ConnectionLine = (0, styled_1.createConnectionLine)({
+            width: Math.abs(width),
+            height,
+            x,
+            y,
+            border: {
+                top,
+                bottom,
+                left,
+                right,
+            },
+        });
+        return { ConnectionLine };
+    }, [curveType, endPoint, node, startPoint]);
+    const props = (0, web_1.useSpring)({
+        borderColor: isProcessed ? colors_1.Colors.GREEN : colors_1.Colors.NAVY_BLUE,
+        config: {
+            duration: isProcessed ? 600 : 150
+        },
+    });
+    const AnimatedConnectionLine = (0, web_1.animated)(ConnectionLine);
+    return (0, jsx_runtime_1.jsx)(AnimatedConnectionLine, { style: props });
+};
+exports.default = BaseConnection;

package/lib/modules/connection/components/BaseConnection/styled.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+type ConnectionLinePropsType = {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+    border: {
+        top: boolean;
+        left: boolean;
+        right: boolean;
+        bottom: boolean;
+    };
+};
+export declare const createConnectionLine: ({ width, height, x, y, border }: ConnectionLinePropsType) => import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export {};

package/lib/modules/connection/components/BaseConnection/styled.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createConnectionLine = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const config_1 = require("../../../../config");
+const createConnectionLine = ({ width, height, x, y, border }) => {
+    return (0, styled_1.default)("div") `
+  width: ${width}px;
+  height: ${height}px;
+  border-top: ${border.top ? config_1.Config.CONNECTION_WIDTH : 0}px solid;
+  border-left: ${border.left ? config_1.Config.CONNECTION_WIDTH : 0}px solid;
+  border-right: ${border.right ? config_1.Config.CONNECTION_WIDTH : 0}px solid;
+  border-bottom: ${border.bottom ? config_1.Config.CONNECTION_WIDTH : 0}px solid;
+  border-top-left-radius: ${border.left && border.top ? 8 : 0}px;
+  border-top-right-radius: ${border.right && border.top ? 8 : 0}px;
+  border-bottom-left-radius: ${border.left && border.bottom ? 8 : 0}px;
+  border-bottom-right-radius: ${border.right && border.bottom ? 8 : 0}px;
+  position: absolute;
+  top: ${y}px;
+  left: ${x}px;
+  display: flex;
+  align-items: center;
+`;
+};
+exports.createConnectionLine = createConnectionLine;

package/lib/modules/connection/components/ConnectionWithButton/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ConnectionPropsType } from '../../types';
+export declare const nodeHeightByType: {
+    startNode: number;
+    endNode: number;
+    baseNode: number;
+    choiceNode: number;
+    hubNode: number;
+    parallelNode: number;
+};
+declare const _default: React.NamedExoticComponent<ConnectionPropsType>;
+export default _default;

package/lib/modules/connection/components/ConnectionWithButton/index.js

@@ -0,0 +1,84 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.nodeHeightByType = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styled_1 = require("./styled");
+const NodesMenu_1 = __importDefault(require("../../../node/components/NodesMenu"));
+const config_1 = require("../../../../config");
+const connectionParametersServices_1 = require("../../services/connectionParametersServices");
+const enums_1 = require("../../../node/enums");
+const material_1 = require("@mui/material");
+const web_1 = require("@react-spring/web");
+const colors_1 = require("../../../../config/colors");
+const AddButton_1 = require("../AddButton");
+exports.nodeHeightByType = {
+    [enums_1.NodeTypeEnum.StartNode]: config_1.Config.EDGE_NODE_HEIGHT,
+    [enums_1.NodeTypeEnum.EndNode]: config_1.Config.EDGE_NODE_HEIGHT,
+    [enums_1.NodeTypeEnum.BaseNode]: config_1.Config.NODE_HEIGHT,
+    [enums_1.NodeTypeEnum.ChoiceNode]: 0,
+    [enums_1.NodeTypeEnum.HubNode]: config_1.Config.HUB_NODE_HEIGHT,
+    [enums_1.NodeTypeEnum.ParallelNode]: 0,
+};
+const ConnectionWithButton = ({ parentId, menuTabs, startPoint, endPoint, addNewNodeCallback, node, connectionIndex, curveType, isProcessed, childNodeId, emptyMenuItemsComponent, searchPlaceholder }) => {
+    const popperRef = (0, react_1.useRef)();
+    const [anchorEl, setAnchorEl] = (0, react_1.useState)(false);
+    const [styles, setStyles] = (0, react_1.useState)({});
+    const ConnectionLine = (0, react_1.useMemo)(() => {
+        const { width, height, x, y, top, bottom, left, right } = connectionParametersServices_1.connectionParametersServices.calculateConnectionParameters({
+            endPoint,
+            startPoint,
+            node,
+            curveType,
+        });
+        return (0, styled_1.createConnectionLine)({
+            width: Math.abs(width),
+            height,
+            x,
+            y,
+            border: {
+                top,
+                bottom,
+                left,
+                right,
+            },
+        });
+    }, [curveType, endPoint, node, startPoint]);
+    const handleClose = () => {
+        setAnchorEl(false);
+    };
+    const handleClick = (event) => {
+        const rect = popperRef?.current?.getBoundingClientRect();
+        const left = rect?.left || 0;
+        const top = rect?.top || 0;
+        const style = {
+            transform: `translate(${left - 400}px, ${top - 228}px)`,
+            overflow: 'visible',
+        };
+        setStyles(style);
+        setAnchorEl(true);
+    };
+    const isOpen = Boolean(anchorEl);
+    const props = (0, web_1.useSpring)({
+        borderColor: isProcessed ? colors_1.Colors.GREEN : colors_1.Colors.NAVY_BLUE,
+        config: {
+            duration: isProcessed ? 600 : 150
+        },
+    });
+    const AnimatedConnectionLine = (0, web_1.animated)(ConnectionLine);
+    const buttonProps = {
+        endPoint,
+        startPoint,
+        node,
+        curveType,
+        parentId,
+        childNodeId,
+        onClick: handleClick,
+        innerRef: popperRef
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(AddButton_1.AddButton, { ...buttonProps }), (0, jsx_runtime_1.jsx)(AnimatedConnectionLine, { style: props }), (0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, { onClickAway: () => isOpen && handleClose(), mouseEvent: "onMouseDown", touchEvent: "onTouchStart", children: (0, jsx_runtime_1.jsx)(styled_1.StyledPopper, { placement: 'left', open: isOpen, sx: styles, modifiers: [{ name: 'arrow', enabled: true }], children: (0, jsx_runtime_1.jsx)(NodesMenu_1.default, { addNewNodeCallback: addNewNodeCallback, data: { parentId, connectionIndex }, menuTabs: menuTabs, onCloseMenu: handleClose, emptyMenuItemsComponent: emptyMenuItemsComponent, searchPlaceholder: searchPlaceholder }) }) })] }));
+};
+exports.default = (0, react_1.memo)(ConnectionWithButton);

package/lib/modules/connection/components/ConnectionWithButton/styled.d.ts

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+type ConnectionLinePropsType = {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+    border: {
+        top: boolean;
+        left: boolean;
+        right: boolean;
+        bottom: boolean;
+    };
+};
+export declare const createConnectionLine: ({ width, height, x, y, border, }: ConnectionLinePropsType) => import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+type AddButtonPropsType = {
+    background?: string;
+    x: number;
+    y: number;
+};
+export declare const createAddButton: ({ background, x, y, }: AddButtonPropsType) => import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").SvgIconClasses> | undefined;
+    color?: import("@mui/types").OverridableStringUnion<"error" | "inherit" | "action" | "disabled" | "success" | "info" | "warning" | "primary" | "secondary", import("@mui/material").SvgIconPropsColorOverrides> | undefined;
+    fontSize?: import("@mui/types").OverridableStringUnion<"small" | "medium" | "inherit" | "large", import("@mui/material").SvgIconPropsSizeOverrides> | undefined;
+    htmlColor?: string | undefined;
+    inheritViewBox?: boolean | undefined;
+    shapeRendering?: string | undefined;
+    sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+    titleAccess?: string | undefined;
+    viewBox?: string | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, "color" | "fontSize" | "shapeRendering" | "children" | "viewBox" | "sx" | keyof import("@mui/material/OverridableComponent").CommonProps | "htmlColor" | "inheritViewBox" | "titleAccess"> & import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, {}, {}>;
+export declare const StyledPopper: import("@emotion/styled").StyledComponent<Omit<import("@mui/base").PopperProps<"div">, "direction"> & {
+    component?: import("react").ElementType<any> | undefined;
+    components?: {
+        Root?: import("react").ElementType<any> | undefined;
+    } | undefined;
+    componentsProps?: {
+        root?: import("@mui/base").SlotComponentProps<"div", import("@mui/base").PopperRootSlotPropsOverrides, import("@mui/base").PopperOwnProps> | undefined;
+    } | undefined;
+    sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+} & import("react").RefAttributes<HTMLDivElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, {}, {}>;
+export {};

package/lib/modules/connection/components/ConnectionWithButton/styled.js

@@ -0,0 +1,55 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledPopper = exports.createAddButton = exports.createConnectionLine = void 0;
+const system_1 = require("@mui/system");
+const Add_1 = __importDefault(require("@mui/icons-material/Add"));
+const config_1 = require("../../../../config");
+const colors_1 = require("../../../../config/colors");
+const material_1 = require("@mui/material");
+const createConnectionLine = ({ width, height, x, y, border, }) => {
+    return (0, system_1.styled)("div") `
+  width: ${width}px;
+  height: ${height}px;
+  border-top: ${border.top ? config_1.Config.CONNECTION_WIDTH : 0}px solid;
+  border-left: ${border.left ? config_1.Config.CONNECTION_WIDTH : 0}px solid;
+  border-right: ${border.right ? config_1.Config.CONNECTION_WIDTH : 0}px solid;
+  border-bottom: ${border.bottom ? config_1.Config.CONNECTION_WIDTH : 0}px solid;
+  border-top-left-radius: ${border.left && border.top ? 8 : 0}px;
+  border-top-right-radius: ${border.right && border.top ? 8 : 0}px;
+  border-bottom-left-radius: ${border.left && border.bottom ? 8 : 0}px;
+  border-bottom-right-radius: ${border.right && border.bottom ? 8 : 0}px;
+  position: absolute;
+  top: ${y}px;
+  left: ${x}px;
+  display: flex;
+  align-items: center;
+`;
+};
+exports.createConnectionLine = createConnectionLine;
+const createAddButton = ({ background = colors_1.Colors.WHITE, x, y, }) => (0, system_1.styled)(Add_1.default) `
+  height: ${config_1.Config.ADD_BUTTON_WIDTH}px;
+  width: ${config_1.Config.ADD_BUTTON_WIDTH}px;
+  position: absolute;
+  top: ${y}px;
+  left: ${x}px;
+  font-size: ${config_1.Config.ADD_BUTTON_WIDTH}px;
+  background: ${background};
+  color: ${colors_1.Colors.NAVY_BLUE};
+  border-radius: 50%;
+  cursor: pointer;
+  z-index: 1000;
+  :hover {
+    background: ${colors_1.Colors.BLUE};
+    color: ${colors_1.Colors.WHITE};
+    box-shadow: 0 0 1px 3px ${colors_1.Colors.DEEP_BLUE};
+  }
+`;
+exports.createAddButton = createAddButton;
+exports.StyledPopper = (0, system_1.styled)(material_1.Popper) `
+  z-index: 1000;
+  overflow: hidden;
+  border-radius: 16px;
+`;

package/lib/modules/connection/enums/index.d.ts

@@ -0,0 +1,4 @@
+export declare enum ConnectionCurveEnum {
+    RIGHT = "right",
+    LEFT = "left"
+}

package/lib/modules/connection/enums/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectionCurveEnum = void 0;
+var ConnectionCurveEnum;
+(function (ConnectionCurveEnum) {
+    ConnectionCurveEnum["RIGHT"] = "right";
+    ConnectionCurveEnum["LEFT"] = "left";
+})(ConnectionCurveEnum || (exports.ConnectionCurveEnum = ConnectionCurveEnum = {}));

package/lib/modules/connection/index.d.ts

@@ -0,0 +1,9 @@
+import { FC } from "react";
+import { ConnectionPropsType } from "./types";
+type ModuleType = {
+    connections: {
+        [key: string]: FC<ConnectionPropsType>;
+    };
+};
+export declare const moduleConnection: ModuleType;
+export {};

package/lib/modules/connection/index.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.moduleConnection = void 0;
+const ConnectionWithButton_1 = __importDefault(require("./components/ConnectionWithButton"));
+const BaseConnection_1 = __importDefault(require("./components/BaseConnection"));
+exports.moduleConnection = {
+    connections: { connectionWithButton: ConnectionWithButton_1.default, baseConnection: BaseConnection_1.default },
+};

package/lib/modules/connection/services/connectionParametersServices.d.ts

@@ -0,0 +1,28 @@
+import { PointType } from "../../common/types";
+import { NodeType } from "../../node/types";
+import { ConnectionCurveEnum } from "../enums";
+declare class ConnectionParametersServices {
+    private curveValueByType;
+    private calculateWidth;
+    private calculateHeight;
+    private calculateStartPoint;
+    private bordersByCurveType;
+    private calculateBorders;
+    calculateConnectionParameters: ({ startPoint, endPoint, node, curveType, }: {
+        endPoint: PointType;
+        startPoint: PointType;
+        node: NodeType;
+        curveType: ConnectionCurveEnum | undefined;
+    }) => {
+        width: number;
+        height: number;
+        x: number;
+        y: number;
+        top: boolean;
+        bottom: boolean;
+        left: boolean;
+        right: boolean;
+    };
+}
+export declare const connectionParametersServices: ConnectionParametersServices;
+export {};

package/lib/modules/connection/services/connectionParametersServices.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.connectionParametersServices = void 0;
+const config_1 = require("../../../config");
+const enums_1 = require("../enums");
+class ConnectionParametersServices {
+    curveValueByType = {
+        [enums_1.ConnectionCurveEnum.LEFT]: -config_1.Config.HORIZONTAL_SHIFT / 2,
+        [enums_1.ConnectionCurveEnum.RIGHT]: config_1.Config.HORIZONTAL_SHIFT / 2,
+    };
+    calculateWidth = ({ endPoint, startPoint, curveType, }) => {
+        return endPoint.x - startPoint.x + (curveType ? this.curveValueByType[curveType] : 0);
+    };
+    calculateHeight = ({ endPoint, startPoint, curveType, }) => {
+        const height = endPoint.y - startPoint.y + config_1.Config.NODE_HEIGHT / 2 - config_1.Config.CONNECTION_WIDTH / 2;
+        if (curveType) {
+            return height - config_1.Config.CONNECTION_WIDTH;
+        }
+        return height;
+    };
+    calculateStartPoint = ({ width, startPoint }) => {
+        const y = startPoint.y;
+        const x = width < 0 ? startPoint.x + width : startPoint.x;
+        return { x, y };
+    };
+    bordersByCurveType = {
+        [enums_1.ConnectionCurveEnum.LEFT]: {
+            top: true,
+            bottom: true,
+            left: true,
+            right: false,
+        },
+        [enums_1.ConnectionCurveEnum.RIGHT]: {
+            top: true,
+            bottom: true,
+            left: false,
+            right: true,
+        },
+    };
+    calculateBorders = ({ node, width, startPoint, endPoint, curveType, }) => {
+        if (curveType) {
+            return this.bordersByCurveType[curveType];
+        }
+        const top = (node.childrenIds?.length || 0) > 1;
+        const bottom = !top;
+        const left = (top ? width < 0 : width > 0) || startPoint.x === endPoint.x;
+        const right = !left;
+        return { top, bottom, left, right };
+    };
+    calculateConnectionParameters = ({ startPoint, endPoint, node, curveType, }) => {
+        const width = this.calculateWidth({
+            endPoint,
+            startPoint,
+            curveType,
+        });
+        const height = this.calculateHeight({
+            endPoint,
+            startPoint,
+            curveType,
+        });
+        const { x, y } = this.calculateStartPoint({
+            width,
+            startPoint,
+        });
+        const { top, bottom, left, right } = this.calculateBorders({
+            node,
+            width,
+            startPoint,
+            endPoint,
+            curveType,
+        });
+        return {
+            width,
+            height,
+            x,
+            y,
+            top,
+            bottom,
+            left,
+            right,
+        };
+    };
+}
+exports.connectionParametersServices = new ConnectionParametersServices();

package/lib/modules/connection/services/connectionServices.d.ts

@@ -0,0 +1,7 @@
+import { BuildConnectionsType, CreateDrawerConnectionType } from '../types';
+declare class ConnectionServices {
+    createDrawerConnection: CreateDrawerConnectionType;
+    buildConnections: BuildConnectionsType;
+}
+export declare const connectionServices: ConnectionServices;
+export {};

package/lib/modules/connection/services/connectionServices.js

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.connectionServices = void 0;
+const config_1 = require("../../../config");
+const enums_1 = require("../../node/enums");
+const enums_2 = require("../enums");
+class ConnectionServices {
+    createDrawerConnection = ({ nodeDrawer, index, menuTabs, child, addNewNodeCallback, curveType, processedNodeIds, failedNodeId }) => {
+        const childProcessed = nodeDrawer.nodeData?.childrenIds?.filter(childId => processedNodeIds.includes(childId)).length;
+        const isIncorrect = childProcessed === 2 && child.type === enums_1.NodeTypeEnum.HubNode;
+        const nodesProcessed = processedNodeIds.includes(child.nodeData?.id || '') && processedNodeIds.includes(nodeDrawer.nodeData?.id || '');
+        const isStartNodeProcessed = nodeDrawer.id === enums_1.NodeTypeEnum.StartNode && processedNodeIds.includes(child.nodeData?.id || '');
+        const isFinishNodeProcessed = child.id === enums_1.NodeTypeEnum.EndNode && processedNodeIds.includes(nodeDrawer.nodeData?.id || '') && failedNodeId !== nodeDrawer.nodeData?.id;
+        return {
+            type: 'connectionWithButton',
+            connectionData: {
+                connectionIndex: index,
+                menuTabs,
+                startPoint: {
+                    x: nodeDrawer.renderPoint.x,
+                    y: nodeDrawer.renderPoint.y + config_1.Config.NODE_HEIGHT / 2,
+                },
+                endPoint: child.renderPoint,
+                parentId: nodeDrawer.id === enums_1.NodeTypeEnum.StartNode ? undefined : nodeDrawer.id,
+                childNodeId: child.id,
+                addNewNodeCallback,
+                node: nodeDrawer.nodeData,
+                curveType,
+                isProcessed: !isIncorrect && (nodesProcessed || isStartNodeProcessed || isFinishNodeProcessed)
+            },
+        };
+    };
+    buildConnections = ({ nodeDrawers, menuTabs, addNewNodeCallback, processedNodeIds, failedNodeId }) => {
+        const drawerById = new Map(nodeDrawers.map((d) => [d.id, d]));
+        const drawerByNodeDataId = new Map(nodeDrawers.map((d) => [d.nodeData?.id, d]));
+        return nodeDrawers.reduce((connectionDrawers, nodeDrawer) => {
+            const childrenIds = nodeDrawer.nodeData?.childrenIds || [];
+            const children = childrenIds
+                .map((id) => drawerById.get(id))
+                .filter((d) => !!d);
+            if (!children.length)
+                return connectionDrawers;
+            const isNodeWithDoubleConnections = config_1.Config.NODES_WITH_DOUBLE_CONNECTION.includes(nodeDrawer.type);
+            if (isNodeWithDoubleConnections) {
+                const leftChild = drawerByNodeDataId.get(nodeDrawer.nodeData?.leftChildrenId);
+                const rightChild = drawerByNodeDataId.get(nodeDrawer.nodeData?.rightChildrenId);
+                const newConnectionDrawers = [
+                    this.createDrawerConnection({
+                        failedNodeId,
+                        processedNodeIds,
+                        nodeDrawer,
+                        index: 1,
+                        menuTabs,
+                        child: leftChild,
+                        addNewNodeCallback,
+                        curveType: leftChild?.nodeData?.startSectionNodeId
+                            ? enums_2.ConnectionCurveEnum.LEFT
+                            : undefined,
+                    }),
+                    this.createDrawerConnection({
+                        failedNodeId,
+                        processedNodeIds,
+                        nodeDrawer,
+                        index: 2,
+                        menuTabs,
+                        child: rightChild,
+                        addNewNodeCallback,
+                        curveType: rightChild?.nodeData?.startSectionNodeId
+                            ? enums_2.ConnectionCurveEnum.RIGHT
+                            : undefined,
+                    }),
+                ];
+                return [...connectionDrawers, ...newConnectionDrawers];
+            }
+            const newConnectionDrawers = children.map((child, index) => this.createDrawerConnection({
+                failedNodeId,
+                processedNodeIds,
+                nodeDrawer,
+                index: index + 1,
+                menuTabs,
+                child: child,
+                addNewNodeCallback,
+            }));
+            return [...connectionDrawers, ...newConnectionDrawers];
+        }, []);
+    };
+}
+exports.connectionServices = new ConnectionServices();

package/lib/modules/connection/types/index.d.ts

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+import { MenuTabType, PointType } from '../../common/types';
+import { AddNewNodeCallbackType } from '../../flow/types';
+import { BaseDrawableNodeType, NodeType } from '../../node/types';
+import { ConnectionCurveEnum } from '../enums';
+export type NodeLinkType = {
+    nodeId: string;
+    branch: number;
+};
+export type ConnectionPropsType = {
+    startPoint: PointType;
+    endPoint: PointType;
+    parentId: string | undefined;
+    childNodeId: string;
+    menuTabs: MenuTabType[];
+    addNewNodeCallback?: AddNewNodeCallbackType;
+    connectionIndex: number;
+    node: NodeType;
+    curveType?: ConnectionCurveEnum;
+    isProcessed: boolean;
+    emptyMenuItemsComponent?: JSX.Element;
+    searchPlaceholder?: string;
+};
+export type ConnectionDrawerType = {
+    type: string;
+    connectionData: ConnectionPropsType;
+};
+export type CreateDrawerConnectionType = (props: {
+    menuTabs: MenuTabType[];
+    nodeDrawer: BaseDrawableNodeType;
+    child: BaseDrawableNodeType;
+    index: number;
+    addNewNodeCallback?: AddNewNodeCallbackType;
+    curveType?: ConnectionCurveEnum;
+    processedNodeIds: string[];
+    failedNodeId?: string;
+}) => ConnectionDrawerType;
+export type BuildConnectionsType = ({ nodeDrawers, menuTabs, addNewNodeCallback, }: {
+    processedNodeIds: string[];
+    failedNodeId?: string;
+    nodeDrawers: BaseDrawableNodeType[];
+    menuTabs: MenuTabType[];
+    addNewNodeCallback?: AddNewNodeCallbackType | undefined;
+}) => ConnectionDrawerType[];

package/lib/modules/connection/types/index.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/modules/flow/components/FlowSandbox/index.d.ts

@@ -0,0 +1,20 @@
+import { FC, RefObject } from 'react';
+import { BaseDrawableNodeType } from '../../../node/types';
+import { ConnectionDrawerType } from '../../../connection/types';
+import { Permissions } from "../../types";
+import { UpdateNodePosition } from "../../../common/types";
+type PropsType = {
+    nodeDrawers: BaseDrawableNodeType[];
+    connectionDrawers: ConnectionDrawerType[];
+    containerRef: RefObject<HTMLDivElement> | null;
+    permissions: Permissions;
+    onUpdateNodePosition: UpdateNodePosition;
+    processedNodeIds?: string[];
+    failedNodeId?: string;
+    failedNodeColor?: string;
+    onRedirect?: (flowId: string) => void;
+    emptyMenuItemsComponent?: JSX.Element;
+    searchPlaceholder?: string;
+};
+declare const FlowSandbox: FC<PropsType>;
+export default FlowSandbox;