flow-lib-creomnia 1.0.17 → 1.0.19-dev.2

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

@@ -1,4 +1,3 @@
-import React, { Ref } from "react";
 import { PointType } from "../../../common/types";
 import { NodeType } from "../../../node/types";
 import { ConnectionCurveEnum } from "../../enums";
@@ -9,8 +8,7 @@ interface IProps {
     childNodeId: string;
     node: NodeType;
     curveType?: ConnectionCurveEnum;
-    onClick?: (event: React.MouseEvent<SVGSVGElement>) => void;
-    innerRef: Ref<any>;
+    onOpen?: (anchorRect: DOMRect) => void;
 }
-export declare const AddButton: ({ endPoint, startPoint, node, curveType, parentId, childNodeId, onClick, innerRef }: IProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AddButton: ({ endPoint, startPoint, node, curveType, parentId, childNodeId, onOpen, }: IProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -10,7 +10,7 @@ const ConnectionWithButton_1 = require("../ConnectionWithButton");
 const enums_1 = require("../../enums");
 const colors_1 = require("../../../../config/colors");
 const material_1 = require("@mui/material");
-const AddButton = ({ endPoint, startPoint, node, curveType, parentId, childNodeId, onClick, innerRef }) => {
+const AddButton = ({ endPoint, startPoint, node, curveType, parentId, childNodeId, onOpen, }) => {
     const theme = (0, material_1.useTheme)();
     const background = theme.palette?.background?.default || colors_1.Colors.DIRTY_WHITE;
     const positionIntoEmptyChoiceNode = !curveType ? 0 : curveType === enums_1.ConnectionCurveEnum.RIGHT ? 2 : 1;
@@ -31,15 +31,34 @@ const AddButton = ({ endPoint, startPoint, node, curveType, parentId, childNodeI
     const yPosition = y + ConnectionWithButton_1.nodeHeightByType[node.type] / 2 + config_1.Config.ADD_BUTTON_SHIFT;
     const PlusButton = (0, styled_1.createAddButton)({
         background,
+    });
+    const PlusButtonWrapper = (0, styled_1.createAddButtonWrapper)({
         x: xPosition,
         y: yPosition,
     });
     const Placeholder = (0, styled_1.createPlaceholder)(isOver, canDrop);
     const xDropZone = xPosition - (config_1.Config.NODE_WIDTH / 2 - 5);
     const yDropZone = yPosition - (config_1.Config.NODE_HEIGHT / 2 - config_1.Config.ADD_BUTTON_WIDTH / 2);
+    // The add button lives inside the zoom/pan surface. Without
+    // stopping the initial press event, the canvas can start a pan
+    // gesture first, and the browser may never emit the follow-up
+    // click that opens the nodes menu. This shows up most clearly in
+    // the tool-flow modal, where the nested sandbox is rendered inside
+    // a Dialog on top of another live canvas.
+    const stopCanvasGesture = (event) => {
+        event.stopPropagation();
+    };
+    const handlePressStart = (event) => {
+        // Keep the canvas from treating the press as pan/scroll start,
+        // then open the menu immediately instead of waiting for a full
+        // click sequence that may never fire once a gesture begins.
+        event.preventDefault();
+        stopCanvasGesture(event);
+        onOpen?.(event.currentTarget.getBoundingClientRect());
+    };
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Placeholder, { ref: drop, sx: {
                     top: yDropZone,
                     left: xDropZone,
-                } }), (0, jsx_runtime_1.jsx)(PlusButton, { onClick: onClick, ref: innerRef })] }));
+                } }), (0, jsx_runtime_1.jsx)(PlusButtonWrapper, { "data-flow-interactive": 'true', onMouseDown: handlePressStart, onPointerDown: handlePressStart, onTouchStart: handlePressStart, onClick: stopCanvasGesture, children: (0, jsx_runtime_1.jsx)(PlusButton, {}) })] }));
 };
 exports.AddButton = AddButton;

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

@@ -4,7 +4,8 @@ type AddButtonPropsType = {
     x: number;
     y: number;
 };
-export declare const createAddButton: ({ background, x, y, }: AddButtonPropsType) => import("@emotion/styled").StyledComponent<{
+export declare const createAddButtonWrapper: ({ x, y, }: Omit<AddButtonPropsType, 'background'>) => import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const createAddButton: ({ background, }: Omit<AddButtonPropsType, 'x' | 'y'>) => 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;

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

@@ -3,24 +3,32 @@ 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;
+exports.createPlaceholder = exports.createAddButton = exports.createAddButtonWrapper = 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;
+const createAddButtonWrapper = ({ x, y, }) => (0, system_1.styled)('div') `
   position: absolute;
   top: ${y}px;
   left: ${x}px;
+  width: ${config_1.Config.ADD_BUTTON_WIDTH}px;
+  height: ${config_1.Config.ADD_BUTTON_WIDTH}px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 1000;
+`;
+exports.createAddButtonWrapper = createAddButtonWrapper;
+const createAddButton = ({ background = colors_1.Colors.WHITE, }) => (0, system_1.styled)(Add_1.default) `
+  height: ${config_1.Config.ADD_BUTTON_WIDTH}px;
+  width: ${config_1.Config.ADD_BUTTON_WIDTH}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};

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

@@ -24,9 +24,7 @@ exports.nodeHeightByType = {
     [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 [anchorRect, setAnchorRect] = (0, react_1.useState)(null);
     const ConnectionLine = (0, react_1.useMemo)(() => {
         const { width, height, x, y, top, bottom, left, right } = connectionParametersServices_1.connectionParametersServices.calculateConnectionParameters({
             endPoint,
@@ -48,19 +46,18 @@ const ConnectionWithButton = ({ parentId, menuTabs, startPoint, endPoint, addNew
         });
     }, [curveType, endPoint, node, startPoint]);
     const handleClose = () => {
-        setAnchorEl(false);
+        setAnchorRect(null);
     };
-    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 handleOpen = (nextAnchorRect) => {
+        setAnchorRect(nextAnchorRect);
     };
+    const anchorEl = (0, react_1.useMemo)(() => {
+        if (!anchorRect)
+            return null;
+        return {
+            getBoundingClientRect: () => anchorRect,
+        };
+    }, [anchorRect]);
     const isOpen = Boolean(anchorEl);
     const props = (0, web_1.useSpring)({
         borderColor: isProcessed ? colors_1.Colors.GREEN : colors_1.Colors.NAVY_BLUE,
@@ -76,9 +73,11 @@ const ConnectionWithButton = ({ parentId, menuTabs, startPoint, endPoint, addNew
         curveType,
         parentId,
         childNodeId,
-        onClick: handleClick,
-        innerRef: popperRef
+        onOpen: handleOpen,
     };
-    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 }) }) })] }));
+    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, { anchorEl: anchorEl, placement: 'left', open: isOpen, modifiers: [
+                        { name: 'arrow', enabled: true },
+                        { name: 'offset', options: { offset: [0, 0] } },
+                    ], 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.js

@@ -49,7 +49,7 @@ const createAddButton = ({ background = colors_1.Colors.WHITE, x, y, }) => (0, s
 `;
 exports.createAddButton = createAddButton;
 exports.StyledPopper = (0, system_1.styled)(material_1.Popper) `
-  z-index: 1000;
+   z-index: 1400;
   overflow: hidden;
   border-radius: 16px;
 `;

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

@@ -13,10 +13,11 @@ 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 FlowActions_1 = require("../../context/FlowActions");
 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, emptyMenuItemsComponent, searchPlaceholder, }) => {
+const NodesFlow = ({ theme, nodes, menuTabs, addNewNodeCallback, permissions, drawerProps, processedNodeIds, failedNodeId, failedNodeColor, onRedirect, onUpdateNodePosition, emptyMenuItemsComponent, searchPlaceholder, onStartClick, }) => {
     const nodeDrawers = (0, react_1.useMemo)(() => {
         const { startNodeList, nodeListWithEndNode } = nodeServices_1.nodeServices.createListOfStartNodesAndEndNodes(nodes);
         const nodeListWithExpandCoefficients = expandCoefficientServices_1.expandCoefficientServices.calculateNodeExpandCoefficient(nodeListWithEndNode);
@@ -31,6 +32,6 @@ const NodesFlow = ({ theme, nodes, menuTabs, addNewNodeCallback, permissions, dr
         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: { position: "relative", 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, emptyMenuItemsComponent: emptyMenuItemsComponent, searchPlaceholder: searchPlaceholder }) }) }) }) }) })) }));
+    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: { position: "relative", 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)(FlowActions_1.FlowActionsProvider, { onStartClick: onStartClick, 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, emptyMenuItemsComponent: emptyMenuItemsComponent, searchPlaceholder: searchPlaceholder }) }) }) }) }) }) })) }));
 };
 exports.default = NodesFlow;

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

@@ -11,6 +11,10 @@ const Space = ({ children }) => {
     const [scrollLeft, setScrollLeft] = (0, react_1.useState)(0);
     const [scrollTop, setScrollTop] = (0, react_1.useState)(0);
     const handleMouseDown = (event) => {
+        const target = event.target;
+        if (target?.closest('[data-flow-interactive="true"]')) {
+            return;
+        }
         setIsDragging(true);
         setStartX(event.pageX - spaceRef.current.offsetLeft);
         setStartY(event.pageY - spaceRef.current.offsetTop);

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

@@ -0,0 +1,8 @@
+import React, { FC, PropsWithChildren } from 'react';
+type FlowActionsValue = {
+    onStartClick?: () => void;
+};
+declare const FlowActionsContext: React.Context<FlowActionsValue>;
+type ProviderProps = PropsWithChildren & FlowActionsValue;
+declare const FlowActionsProvider: FC<ProviderProps>;
+export { FlowActionsContext, FlowActionsProvider };

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlowActionsProvider = exports.FlowActionsContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const FlowActionsContext = (0, react_1.createContext)({});
+exports.FlowActionsContext = FlowActionsContext;
+const FlowActionsProvider = ({ children, onStartClick }) => ((0, jsx_runtime_1.jsx)(FlowActionsContext.Provider, { value: { onStartClick }, children: children }));
+exports.FlowActionsProvider = FlowActionsProvider;

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

@@ -22,6 +22,7 @@ export type NodeFlowPropsType = {
     theme: Theme;
     emptyMenuItemsComponent?: JSX.Element;
     searchPlaceholder?: string;
+    onStartClick?: () => void;
 };
 export type IDrawerProps = {
     isOpen: boolean;

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

@@ -1,8 +1,12 @@
 "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 FlowActions_1 = require("../../../flow/context/FlowActions");
 const StartNode = () => {
-    return ((0, jsx_runtime_1.jsx)(styled_1.IconContainer, { children: (0, jsx_runtime_1.jsx)(styled_1.Icon, {}) }));
+    const { onStartClick } = (0, react_1.useContext)(FlowActions_1.FlowActionsContext);
+    const clickable = !!onStartClick;
+    return ((0, jsx_runtime_1.jsx)(styled_1.IconContainer, { onClick: onStartClick, role: clickable ? "button" : undefined, style: clickable ? { cursor: "pointer" } : undefined, children: (0, jsx_runtime_1.jsx)(styled_1.Icon, {}) }));
 };
 exports.default = StartNode;

package/lib/modules/node/contexts/SettingsContext/index.js

@@ -47,8 +47,13 @@ const NodeSettingsProvider = ({ children, permissions: { canUpdate, canDelete },
             setInternalNodeBase(null);
         }, config_1.Config.CLEAR_NODE_DELAY);
     };
-    const onSaveNode = () => {
-        const result = node?.settings?.footer?.onSave?.(node?.id);
+    const onSaveNode = async () => {
+        // `onSave` is allowed to be sync OR async — host apps that wrap a
+        // server call in an async handler need to surface validation errors
+        // BEFORE the drawer closes. Awaiting handles both cases: a sync
+        // `false` short-circuits, a `Promise<false>` resolves and short-
+        // circuits, anything else closes the drawer.
+        const result = await node?.settings?.footer?.onSave?.(node?.id);
         if (result === false)
             return;
         handleClose();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flow-lib-creomnia",
-  "version": "1.0.17",
+  "version": "1.0.19-dev.2",
   "description": "",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",