flow-lib-creomnia 1.0.19-dev.1 → 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/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/package.json

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