flow-lib-creomnia 1.0.0

package/lib/modules/flow/components/FlowSandbox/index.js

@@ -0,0 +1,63 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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 node_1 = require("../../../node");
+const connection_1 = require("../../../connection");
+const config_1 = require("../../../../config");
+const Space_1 = __importDefault(require("../Space"));
+const react_zoom_pan_pinch_1 = require("react-zoom-pan-pinch");
+const components_1 = require("../../../common/components");
+const FlowPosition_1 = require("../../context/FlowPosition");
+const FlowSandbox = ({ nodeDrawers, connectionDrawers, containerRef, permissions, processedNodeIds, failedNodeId, failedNodeColor, onRedirect, onUpdateNodePosition }) => {
+    const sandboxWidth = containerRef?.current?.offsetWidth || 0;
+    const [maxWidth, setMaxWidth] = (0, react_1.useState)(sandboxWidth);
+    const [minWidth, setMinWidth] = (0, react_1.useState)(0);
+    const flowPosition = (0, react_1.useContext)(FlowPosition_1.FlowPositionContext);
+    (0, react_1.useLayoutEffect)(() => {
+        const maxHorizontalPoint = Math.max(...nodeDrawers.map((node) => node.renderPoint.x));
+        const minHorizontalPoint = Math.min(...nodeDrawers.map((node) => node.renderPoint.x));
+        const maxVerticalPoint = Math.max(...nodeDrawers.map((node) => node.renderPoint.y));
+        setMaxWidth(maxHorizontalPoint + config_1.Config.HORIZONTAL_SHIFT);
+        setMinWidth(minHorizontalPoint - config_1.Config.HORIZONTAL_SHIFT);
+    }, [nodeDrawers]);
+    const connections = (0, react_1.useMemo)(() => connectionDrawers.map((connectionDrawer, index) => {
+        const Connection = permissions.canCreate
+            ? connection_1.moduleConnection.connections.connectionWithButton
+            : connection_1.moduleConnection.connections.baseConnection;
+        return ((0, jsx_runtime_1.jsx)(Connection, { ...connectionDrawer.connectionData, startPoint: {
+                x: connectionDrawer.connectionData.startPoint.x - minWidth,
+                y: connectionDrawer.connectionData.startPoint.y,
+            }, endPoint: {
+                x: connectionDrawer.connectionData.endPoint.x - minWidth,
+                y: connectionDrawer.connectionData.endPoint.y,
+            } }, `connection:${connectionDrawer.connectionData.node.id}-${connectionDrawer.connectionData.connectionIndex}`));
+    }), [connectionDrawers, minWidth]);
+    const nodes = (0, react_1.useMemo)(() => nodeDrawers.map((nodeDrawer) => {
+        const Node = node_1.nodeModule.nodes?.[nodeDrawer.type] || node_1.nodeModule.nodes.baseNode;
+        return ((0, jsx_runtime_1.jsx)(styled_1.NodeWrapper, { style: {
+                top: nodeDrawer.renderPoint.y,
+                left: nodeDrawer.renderPoint.x - minWidth,
+            }, children: (0, jsx_runtime_1.jsx)(Node, { nodeData: nodeDrawer.nodeData, renderPoint: nodeDrawer.renderPoint, id: nodeDrawer.id, type: nodeDrawer.type, isProcessed: processedNodeIds?.includes(nodeDrawer.nodeData?.id), isFailed: failedNodeId === nodeDrawer.nodeData?.id, failedNodeColor: failedNodeColor, onRedirect: onRedirect, onUpdatePosition: onUpdateNodePosition }) }, nodeDrawer.id));
+    }), [minWidth, nodeDrawers]);
+    const FlowContainer = (0, react_1.useMemo)(() => (0, styled_1.createFlowContainer)({
+        scaleValue: 1,
+        width: maxWidth - minWidth,
+    }), [maxWidth, minWidth]);
+    const initialScale = (0, react_1.useMemo)(() => {
+        const maxHorizontalPoint = Math.max(...nodeDrawers.map((node) => node.renderPoint.x));
+        const minHorizontalPoint = Math.min(...nodeDrawers.map((node) => node.renderPoint.x));
+        const zoom = sandboxWidth / (maxHorizontalPoint - minHorizontalPoint + 2 * config_1.Config.HORIZONTAL_SHIFT);
+        return zoom > 1 ? 1 : zoom;
+    }, [sandboxWidth]);
+    const positionShift = sandboxWidth / 2 - (maxWidth - minWidth) / 2;
+    const InitialPositionX = (0, react_1.useMemo)(() => (initialScale < 1 ? 0 : positionShift), [sandboxWidth]);
+    if (!sandboxWidth)
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    return ((0, jsx_runtime_1.jsx)(react_zoom_pan_pinch_1.TransformWrapper, { minScale: config_1.Config.MIN_SCALE, maxScale: config_1.Config.MAX_SCALE, initialPositionX: flowPosition.position.positionX || InitialPositionX, initialPositionY: flowPosition.position.positionY || 0, limitToBounds: false, initialScale: initialScale, pinch: { disabled: false }, onZoomStop: (e) => flowPosition.setPosition(e.state), onPanningStop: (e) => flowPosition.setPosition(e.state), children: (zoomProps) => ((0, jsx_runtime_1.jsxs)(Space_1.default, { children: [(0, jsx_runtime_1.jsx)(styled_1.ZoomToolbarContainer, { children: (0, jsx_runtime_1.jsx)(components_1.ZoomToolbar, { ...zoomProps }) }), (0, jsx_runtime_1.jsx)(react_zoom_pan_pinch_1.TransformComponent, { wrapperStyle: { width: "100%", height: "100%" }, children: (0, jsx_runtime_1.jsxs)(FlowContainer, { children: [nodes, connections] }) })] })) }));
+};
+exports.default = FlowSandbox;

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export type CreateFlowContainerPropsType = {
+    scaleValue: number;
+    width: number;
+};
+export declare const createFlowContainer: ({ scaleValue, width, }: CreateFlowContainerPropsType) => import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const NodeWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ConnectionWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ZoomToolbarContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/modules/flow/components/FlowSandbox/styled.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZoomToolbarContainer = exports.ConnectionWrapper = exports.NodeWrapper = exports.createFlowContainer = void 0;
+const system_1 = require("@mui/system");
+const config_1 = require("../../../../config");
+const createFlowContainer = ({ scaleValue, width, }) => (0, system_1.styled)('div') `
+    transform: scale(${scaleValue});
+    min-width: ${width}px;
+    min-height: fit-content;
+    background-color: blue;
+  `;
+exports.createFlowContainer = createFlowContainer;
+exports.NodeWrapper = (0, system_1.styled)('div') `
+  width: 0;
+  height: ${config_1.Config.NODE_HEIGHT}px;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 2;
+`;
+exports.ConnectionWrapper = (0, system_1.styled)('div') `
+  z-index: 1;
+`;
+exports.ZoomToolbarContainer = (0, system_1.styled)('div') `
+  cursor: default;
+  position: fixed;
+  z-index: 1000;
+  padding: 24px;
+  bottom: 0;
+  left: 0;
+`;

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

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

package/lib/modules/flow/components/NodesFlow/index.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const FlowSandbox_1 = __importDefault(require("../FlowSandbox"));
+const nodeServices_1 = require("../../../node/services/nodeServices");
+const connectionServices_1 = require("../../../connection/services/connectionServices");
+const SettingsContext_1 = require("../../../node/contexts/SettingsContext");
+const ThemeContext_1 = require("../../../common/contexts/ThemeContext");
+const expandCoefficientServices_1 = require("../../../node/services/expandCoefficientServices");
+const material_1 = require("@mui/material");
+const FlowPosition_1 = require("../../context/FlowPosition");
+const react_dnd_html5_backend_1 = require("react-dnd-html5-backend");
+const react_dnd_1 = require("react-dnd");
+const colors_1 = require("../../../../config/colors");
+const NodesFlow = ({ theme, nodes, menuTabs, addNewNodeCallback, permissions, drawerProps, processedNodeIds, failedNodeId, failedNodeColor, onRedirect, onUpdateNodePosition }) => {
+    const nodeDrawers = (0, react_1.useMemo)(() => {
+        const { startNodeList, nodeListWithEndNode } = nodeServices_1.nodeServices.createListOfStartNodesAndEndNodes(nodes);
+        const nodeListWithExpandCoefficients = expandCoefficientServices_1.expandCoefficientServices.calculateNodeExpandCoefficient(nodeListWithEndNode);
+        const combinedNodes = nodeServices_1.nodeServices.combineNodes(startNodeList, nodeListWithExpandCoefficients);
+        return combinedNodes;
+    }, [nodes]);
+    const connectionDrawers = (0, react_1.useMemo)(() => connectionServices_1.connectionServices.buildConnections({
+        processedNodeIds: processedNodeIds || [],
+        failedNodeId,
+        nodeDrawers,
+        menuTabs,
+        addNewNodeCallback,
+    }), [nodeDrawers, menuTabs, addNewNodeCallback, processedNodeIds]);
+    const containerRef = (0, react_1.useRef)(null);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: permissions.canRead && ((0, jsx_runtime_1.jsx)(ThemeContext_1.ThemeContextProvider, { themContextValue: theme, children: (0, jsx_runtime_1.jsx)(react_dnd_1.DndProvider, { backend: react_dnd_html5_backend_1.HTML5Backend, children: (0, jsx_runtime_1.jsx)(material_1.Box, { ref: containerRef, style: { height: "100%", width: "100%", background: theme?.palette.background.default || colors_1.Colors.DIRTY_WHITE }, children: (0, jsx_runtime_1.jsx)(SettingsContext_1.NodeSettingsProvider, { permissions: permissions, drawerProps: drawerProps, children: (0, jsx_runtime_1.jsx)(FlowPosition_1.FlowPositionProvider, { children: (0, jsx_runtime_1.jsx)(FlowSandbox_1.default, { permissions: permissions, connectionDrawers: connectionDrawers, nodeDrawers: nodeDrawers, containerRef: containerRef, processedNodeIds: processedNodeIds, failedNodeId: failedNodeId, failedNodeColor: failedNodeColor, onRedirect: onRedirect, onUpdateNodePosition: onUpdateNodePosition }) }) }) }) }) })) }));
+};
+exports.default = NodesFlow;

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

@@ -0,0 +1,3 @@
+import { FC, PropsWithChildren } from 'react';
+declare const Space: FC<PropsWithChildren>;
+export default Space;

package/lib/modules/flow/components/Space/index.js

@@ -0,0 +1,35 @@
+"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 Space = ({ children }) => {
+    const spaceRef = (0, react_1.useRef)(null);
+    const [isDragging, setIsDragging] = (0, react_1.useState)(false);
+    const [startX, setStartX] = (0, react_1.useState)(0);
+    const [startY, setStartY] = (0, react_1.useState)(0);
+    const [scrollLeft, setScrollLeft] = (0, react_1.useState)(0);
+    const [scrollTop, setScrollTop] = (0, react_1.useState)(0);
+    const handleMouseDown = (event) => {
+        setIsDragging(true);
+        setStartX(event.pageX - spaceRef.current.offsetLeft);
+        setStartY(event.pageY - spaceRef.current.offsetTop);
+        setScrollLeft(spaceRef.current.scrollLeft);
+        setScrollTop(spaceRef.current.scrollTop);
+    };
+    const handleMouseMove = (event) => {
+        if (!isDragging)
+            return;
+        const x = event.pageX - spaceRef.current.offsetLeft;
+        const y = event.pageY - spaceRef.current.offsetTop;
+        const walkX = x - startX;
+        const walkY = y - startY;
+        spaceRef.current.scrollLeft = scrollLeft - walkX;
+        spaceRef.current.scrollTop = scrollTop - walkY;
+    };
+    const stopDragging = () => {
+        setIsDragging(false);
+    };
+    return ((0, jsx_runtime_1.jsx)(styled_1.SpaceContainer, { ref: spaceRef, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: stopDragging, onMouseLeave: stopDragging, children: children }));
+};
+exports.default = Space;

package/lib/modules/flow/components/Space/styled.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SpaceContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/modules/flow/components/Space/styled.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpaceContainer = void 0;
+const system_1 = require("@mui/system");
+exports.SpaceContainer = (0, system_1.styled)('div') `
+  width: 100%;
+  height: 100%;
+  cursor: grab;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+`;

package/lib/modules/flow/context/FlowPosition/index.d.ts

@@ -0,0 +1,13 @@
+import React, { FC, PropsWithChildren } from "react";
+type IPosition = {
+    positionX: number;
+    positionY: number;
+    scale: number;
+};
+type PropTypes = {
+    setPosition: (data: IPosition) => void;
+    position: IPosition;
+} & PropsWithChildren;
+declare const FlowPositionContext: React.Context<PropTypes>;
+declare const FlowPositionProvider: FC<PropsWithChildren>;
+export { FlowPositionContext, FlowPositionProvider };

package/lib/modules/flow/context/FlowPosition/index.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlowPositionProvider = exports.FlowPositionContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const FlowPositionContext = (0, react_1.createContext)({
+    setPosition: () => 0,
+    position: {
+        scale: 0,
+        positionY: 0,
+        positionX: 0
+    }
+});
+exports.FlowPositionContext = FlowPositionContext;
+const FlowPositionProvider = ({ children }) => {
+    const [position, setPosition] = (0, react_1.useState)({
+        scale: 0,
+        positionY: 0,
+        positionX: 0
+    });
+    return (0, jsx_runtime_1.jsx)(FlowPositionContext.Provider, { value: { setPosition, position }, children: children });
+};
+exports.FlowPositionProvider = FlowPositionProvider;

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

@@ -0,0 +1,29 @@
+import { MenuTabType, Theme, UpdateNodePosition } from "../../common/types";
+import { NodeType } from "../../node/types";
+export type AddNewNodeCallbackType = (params: {
+    menuItemId: string;
+    parentId: string | undefined;
+    connectionIndex: number;
+}) => void;
+export type NodeFlowPropsType = {
+    nodes: NodeType[];
+    menuTabs: MenuTabType[];
+    addNewNodeCallback?: AddNewNodeCallbackType;
+    permissions: Permissions;
+    drawerProps: IDrawerProps;
+    processedNodeIds?: string[];
+    failedNodeId?: string;
+    failedNodeColor?: string;
+    onRedirect?: (flowId: string) => void;
+    onUpdateNodePosition: UpdateNodePosition;
+    theme: Theme;
+};
+export type IDrawerProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    onOpen: () => void;
+};
+export type PermissionsTypes = "canUpdate" | "canRead" | "canCreate" | "canDelete";
+export type Permissions = {
+    [key in PermissionsTypes]: boolean;
+};

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

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

package/lib/modules/node/components/BaseNode/index.d.ts

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

package/lib/modules/node/components/BaseNode/index.js

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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 SettingsContext_1 = require("../../contexts/SettingsContext");
+const web_1 = require("@react-spring/web");
+const colors_1 = require("../../../../config/colors");
+const flowIcon_svg_1 = __importDefault(require("../../../../assets/icons/flowIcon.svg"));
+const material_1 = require("@mui/material");
+const DragWrapper_1 = require("../DragWrapper");
+const BaseNode = ({ nodeData, isProcessed, isFailed, failedNodeColor, onRedirect, onUpdatePosition }) => {
+    const { setNode, node } = (0, react_1.useContext)(SettingsContext_1.SettingsContext);
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const theme = (0, material_1.useTheme)();
+    const baseColor = theme.palette?.background?.paper || colors_1.Colors.WHITE;
+    const prevColorRef = (0, react_1.useRef)(baseColor);
+    const color = (isHovered || node?.id === nodeData?.id) ? colors_1.Colors.BLUE :
+        isFailed ? (failedNodeColor || colors_1.Colors.RED) :
+            isProcessed ? colors_1.Colors.GREEN :
+                baseColor;
+    (0, react_1.useEffect)(() => {
+        prevColorRef.current = color;
+    }, [color]);
+    const isLongAction = (color === colors_1.Colors.GREEN ||
+        color === colors_1.Colors.RED ||
+        color === failedNodeColor) && prevColorRef.current !== colors_1.Colors.BLUE;
+    const props = (0, web_1.useSpring)({
+        borderColor: color,
+        config: {
+            duration: isLongAction ? 1000 : 150
+        },
+    });
+    const onNodeClick = () => {
+        setNode(nodeData || null);
+    };
+    const AnimatedContainer = (0, web_1.animated)(styled_1.Container);
+    const redirectToParentFlow = (e) => {
+        e.stopPropagation();
+        if (nodeData?.childFlowId && onRedirect) {
+            onRedirect(nodeData?.childFlowId);
+        }
+    };
+    const component = (0, react_1.useRef)();
+    return ((0, jsx_runtime_1.jsx)(DragWrapper_1.DragWrapper, { onUpdatePosition: onUpdatePosition, nodeId: nodeData?.id || '', children: (0, jsx_runtime_1.jsx)(material_1.Box, { ref: component, children: (0, jsx_runtime_1.jsxs)(AnimatedContainer, { onClick: onNodeClick, style: props, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [(0, jsx_runtime_1.jsxs)(styled_1.IconWrapper, { children: [(0, jsx_runtime_1.jsx)(styled_1.IconBorder, {}), nodeData?.icon] }), (0, jsx_runtime_1.jsxs)(styled_1.ContentContainer, { children: [(0, jsx_runtime_1.jsxs)(styled_1.NameOfExtension, { children: ["Type: ", nodeData?.extensionName] }), (0, jsx_runtime_1.jsx)(styled_1.Name, { children: nodeData?.name })] }), nodeData?.childFlowId &&
+                        (0, jsx_runtime_1.jsx)(styled_1.ChildFlowWrapper, { onClick: redirectToParentFlow, children: (0, jsx_runtime_1.jsx)("img", { src: flowIcon_svg_1.default }) })] }) }) }));
+};
+exports.default = BaseNode;

package/lib/modules/node/components/BaseNode/styled.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+export declare const Container: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").PaperClasses> | undefined;
+    elevation?: number | undefined;
+    square?: boolean | undefined;
+    sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: import("@mui/types").OverridableStringUnion<"elevation" | "outlined", import("@mui/material").PaperPropsVariantOverrides> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "variant" | "square" | "children" | "elevation" | "sx" | keyof import("@mui/material/OverridableComponent").CommonProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, {}, {}>;
+export declare const IconBorder: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Name: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const NameOfExtension: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContentContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ChildFlowWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const NodeMenu: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/modules/node/components/BaseNode/styled.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NodeMenu = exports.ChildFlowWrapper = exports.ContentContainer = exports.NameOfExtension = exports.Name = exports.IconWrapper = exports.IconBorder = exports.Container = void 0;
+const system_1 = require("@mui/system");
+const material_1 = require("@mui/material");
+const config_1 = require("../../../../config");
+const colors_1 = require("../../../../config/colors");
+exports.Container = (0, system_1.styled)(material_1.Paper)(() => `
+  width: ${config_1.Config.NODE_WIDTH}px;
+  height: ${config_1.Config.NODE_HEIGHT}px;
+  border-radius: 8px;
+  box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.08);
+  border: 2px solid ${colors_1.Colors.WHITE};
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  position: relative;
+  z-index: 0;
+  `);
+exports.IconBorder = (0, system_1.styled)('div') `
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 6px;
+  border: 1px solid rgba(17, 25, 39, 0.12);
+`;
+exports.IconWrapper = (0, system_1.styled)('div') `
+  width: 56px;
+  min-width: 56px;
+  max-width: 56px;
+  height: 56px;
+  background: ${props => `${props.theme.palette?.background?.default}`};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 6px;
+  object-fit: contain;
+  margin-left: 8px;
+  overflow: hidden;
+  position: relative;
+`;
+exports.Name = (0, system_1.styled)('div') `
+  //font-size: 16px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  width: 240px;
+  text-align: left;
+  font-family: Inter, 'circular', serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 150%;
+`;
+exports.NameOfExtension = (0, system_1.styled)('div') `
+  text-align: left;
+  font-size: 12px;
+  color: ${colors_1.Colors.GRAY};
+  width: 240px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: Inter, 'circular', serif;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 14px; /* 116.667% */
+  letter-spacing: 0.15px;
+`;
+exports.ContentContainer = (0, system_1.styled)('div') `
+  margin-left: 16px;
+  height: 62px;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  width: min-content;
+  flex-direction: column;
+  gap: 5px
+`;
+exports.ChildFlowWrapper = (0, system_1.styled)('div') `
+  width: min-content;
+  height: min-content;
+  position: absolute;
+  z-index: 10;
+  top: 10px;
+  right: 10px;
+`;
+exports.NodeMenu = (0, system_1.styled)('div') `
+  position: absolute;
+  top: -2px;
+  right: 0;
+  width: 40px;
+  height: calc(100% + 4px);
+  background-color: #D8DBDC;
+  margin-right: -2px;
+  border-radius: 0 8px 8px 0;
+`;

package/lib/modules/node/components/ChoiseNode/index.d.ts

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

package/lib/modules/node/components/ChoiseNode/index.js

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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 material_1 = require("@mui/material");
+const SettingsContext_1 = require("../../contexts/SettingsContext");
+const LeftArrowIcon_svg_1 = __importDefault(require("../../../../assets/icons/LeftArrowIcon.svg"));
+const RightArrowIcon_svg_1 = __importDefault(require("../../../../assets/icons/RightArrowIcon.svg"));
+const ChoiceNodeIcon_svg_1 = __importDefault(require("../../../../assets/icons/ChoiceNodeIcon.svg"));
+const web_1 = require("@react-spring/web");
+const colors_1 = require("../../../../config/colors");
+const ChoiceNode = ({ nodeData, isProcessed, isFailed, failedNodeColor }) => {
+    const { setNode, node } = (0, react_1.useContext)(SettingsContext_1.SettingsContext);
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const theme = (0, material_1.useTheme)();
+    const baseColor = theme.palette?.background?.paper || colors_1.Colors.WHITE;
+    const prevColorRef = (0, react_1.useRef)(baseColor);
+    const color = (isHovered || node?.id === nodeData?.id) ? colors_1.Colors.BLUE :
+        isFailed ? (failedNodeColor || colors_1.Colors.RED) :
+            isProcessed ? colors_1.Colors.GREEN :
+                baseColor;
+    (0, react_1.useEffect)(() => {
+        prevColorRef.current = color;
+    }, [color]);
+    const isLongAction = (color === colors_1.Colors.GREEN || color === colors_1.Colors.RED || color === failedNodeColor) && prevColorRef.current !== colors_1.Colors.BLUE;
+    const onNodeClick = () => {
+        setNode(nodeData || null);
+    };
+    const props = (0, web_1.useSpring)({
+        stroke: color,
+        strokeWidth: 2,
+        strokeLinecap: 'round',
+        config: {
+            duration: isLongAction ? 1000 : 150
+        },
+    });
+    const ChoiceNodeImg = (0, react_1.useMemo)(() => (0, styled_1.createChoiceNodeImg)(), [color, node?.id, nodeData?.id]);
+    const AnimatedChoiceNodeImg = (0, web_1.animated)(ChoiceNodeImg);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(AnimatedChoiceNodeImg, { src: ChoiceNodeIcon_svg_1.default, style: props }), (0, jsx_runtime_1.jsx)(styled_1.Container, { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: onNodeClick, children: (0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, children: [(0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, children: (0, jsx_runtime_1.jsx)(styled_1.ArrowImg, { src: LeftArrowIcon_svg_1.default, alt: "leftArrow" }) }), (0, jsx_runtime_1.jsx)(styled_1.NameGreed, { flexGrow: 1, item: true, children: nodeData?.name || nodeData?.extensionName }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, children: (0, jsx_runtime_1.jsx)(styled_1.ArrowImg, { src: RightArrowIcon_svg_1.default, alt: "RightArrow" }) })] }) })] }));
+};
+exports.default = ChoiceNode;

package/lib/modules/node/components/ChoiseNode/styled.d.ts

@@ -0,0 +1,20 @@
+import { FC } from "react";
+export declare const Container: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const createChoiceNodeImg: () => FC<any>;
+export declare const NameGreed: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").GridClasses> | undefined;
+    columns?: import("@mui/system").ResponsiveStyleValue<number> | undefined;
+    columnSpacing?: import("@mui/system").ResponsiveStyleValue<import("@mui/material").GridSpacing> | undefined;
+    container?: boolean | undefined;
+    direction?: import("@mui/system").ResponsiveStyleValue<import("@mui/material").GridDirection> | undefined;
+    item?: boolean | undefined;
+    rowSpacing?: import("@mui/system").ResponsiveStyleValue<import("@mui/material").GridSpacing> | undefined;
+    spacing?: import("@mui/system").ResponsiveStyleValue<import("@mui/material").GridSpacing> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    wrap?: import("@mui/material").GridWrap | undefined;
+    zeroMinWidth?: boolean | undefined;
+} & import("@mui/material").RegularBreakpoints & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "item" | "columns" | "container" | "direction" | "children" | "wrap" | "spacing" | ("flex" | "height" | "width" | "left" | "top" | "alignContent" | "alignItems" | "alignSelf" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "bottom" | "boxShadow" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gap" | "gridArea" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumn" | "gridRow" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "margin" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "overflow" | "padding" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "zIndex" | "p" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "sx" | "columnSpacing" | "rowSpacing" | keyof import("@mui/material/OverridableComponent").CommonProps | "zeroMinWidth" | keyof import("@mui/material").RegularBreakpoints> & import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, {}, {}>;
+export declare const ArrowImg: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;

package/lib/modules/node/components/ChoiseNode/styled.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArrowImg = exports.NameGreed = exports.createChoiceNodeImg = exports.Container = void 0;
+const config_1 = require("../../../../config");
+const material_1 = require("@mui/material");
+const system_1 = require("@mui/system");
+const react_svg_1 = require("react-svg");
+exports.Container = (0, system_1.styled)('div') `
+  min-width: 300px;
+  height: ${config_1.Config.NODE_HEIGHT}px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  z-index: 1000;
+`;
+const createChoiceNodeImg = () => (0, system_1.styled)(react_svg_1.ReactSVG) `
+  top: -23px;
+  position: absolute;
+  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.1));
+  svg {
+    fill: ${props => `${props.theme.palette?.background?.paper}`};
+    stroke-width: 2;
+    stroke-linecap: round;
+  }
+`;
+exports.createChoiceNodeImg = createChoiceNodeImg;
+exports.NameGreed = (0, system_1.styled)(material_1.Grid) `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 700;
+  color: ${props => `${props.theme.palette.text.primary}`};
+  font-family: Inter, 'circular', serif;;
+`;
+exports.ArrowImg = (0, system_1.styled)('img') `
+  margin-top: 5px;
+`;

package/lib/modules/node/components/DragWrapper/index.d.ts

@@ -0,0 +1,8 @@
+import { UpdateNodePosition } from "../../../common/types";
+import { PropsWithChildren } from "react";
+interface IProps {
+    nodeId: string;
+    onUpdatePosition?: UpdateNodePosition;
+}
+export declare const DragWrapper: ({ children, nodeId, onUpdatePosition }: PropsWithChildren<IProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/modules/node/components/DragWrapper/index.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DragWrapper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const useDragNode_1 = require("../../../common/hooks/useDragNode");
+const DragWrapper = ({ children, nodeId, onUpdatePosition }) => {
+    const { isDragging, drag } = (0, useDragNode_1.useDragNode)({
+        id: nodeId || '',
+        onUpdate: onUpdatePosition,
+    });
+    const opacity = isDragging ? 0.4 : 1;
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { opacity, display: 'flex', justifyContent: 'center' }, ref: drag, onMouseDown: event => event.stopPropagation(), children: children }));
+};
+exports.DragWrapper = DragWrapper;

package/lib/modules/node/components/EndNode/index.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+declare const EndNode: FC;
+export default EndNode;

package/lib/modules/node/components/EndNode/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_1 = require("./styled");
+const EndNode = () => {
+    return ((0, jsx_runtime_1.jsx)(styled_1.IconContainer, { children: (0, jsx_runtime_1.jsx)(styled_1.Icon, {}) }));
+};
+exports.default = EndNode;