From fa5478e709f187a9a5b458a967dd99c2ed9da69b Mon Sep 17 00:00:00 2001 From: Abrar74774 <52873468+Abrar74774@users.noreply.github.com> Date: Sun, 4 Jan 2026 01:29:55 +0300 Subject: [PATCH] fix: resolve issue #136 where "Add Node" popup has huge offset (#195) * fix: "Add node" popup has huge offset * fix: resolve issue #136 where "Add Node" popup has huge offset * Add check for empty cell Thanks @abrar74774 --- .../components/ContextMenu/ContextMenu.tsx | 11 +- .../ContextMenu/ContextMenuManager.tsx | 110 ++++++++---------- .../src/components/UiOverlay/UiOverlay.tsx | 17 ++- 3 files changed, 66 insertions(+), 72 deletions(-) diff --git a/packages/fossflow-lib/src/components/ContextMenu/ContextMenu.tsx b/packages/fossflow-lib/src/components/ContextMenu/ContextMenu.tsx index 5f3c1e1..5907cd5 100644 --- a/packages/fossflow-lib/src/components/ContextMenu/ContextMenu.tsx +++ b/packages/fossflow-lib/src/components/ContextMenu/ContextMenu.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { Menu, MenuItem } from '@mui/material'; -import { Coords } from 'src/types'; interface MenuItemI { label: string; @@ -9,25 +8,19 @@ interface MenuItemI { interface Props { onClose: () => void; - position: Coords; - anchorEl?: HTMLElement; + anchorEl?: HTMLElement | null; menuItems: MenuItemI[]; } export const ContextMenu = ({ onClose, - position, anchorEl, menuItems }: Props) => { return ( {menuItems.map((item, index) => { diff --git a/packages/fossflow-lib/src/components/ContextMenu/ContextMenuManager.tsx b/packages/fossflow-lib/src/components/ContextMenu/ContextMenuManager.tsx index f7526b5..029fbb3 100644 --- a/packages/fossflow-lib/src/components/ContextMenu/ContextMenuManager.tsx +++ b/packages/fossflow-lib/src/components/ContextMenu/ContextMenuManager.tsx @@ -1,13 +1,13 @@ import React, { useCallback } from 'react'; import { useUiStateStore } from 'src/stores/uiStateStore'; -import { getTilePosition, CoordsUtils, generateId, findNearestUnoccupiedTile } from 'src/utils'; +import { generateId, findNearestUnoccupiedTile } from 'src/utils'; import { useScene } from 'src/hooks/useScene'; import { useModelStore } from 'src/stores/modelStore'; import { VIEW_ITEM_DEFAULTS } from 'src/config'; import { ContextMenu } from './ContextMenu'; interface Props { - anchorEl?: HTMLElement; + anchorEl?: HTMLElement | null; } export const ContextMenuManager = ({ anchorEl }: Props) => { @@ -15,9 +15,6 @@ export const ContextMenuManager = ({ anchorEl }: Props) => { const model = useModelStore((state) => { return state; }); - const zoom = useUiStateStore((state) => { - return state.zoom; - }); const contextMenu = useUiStateStore((state) => { return state.contextMenu; }); @@ -30,67 +27,58 @@ export const ContextMenuManager = ({ anchorEl }: Props) => { uiStateActions.setContextMenu(null); }, [uiStateActions]); - if (!contextMenu) { - return null; - } + return ( + { + if (!contextMenu) return; + if (model.icons.length > 0) { + const modelItemId = generateId(); + const firstIcon = model.icons[0]; + + // Find nearest unoccupied tile (should return the same tile since context menu is for empty tiles) + const targetTile = findNearestUnoccupiedTile(contextMenu.tile, scene) || contextMenu.tile; - if (contextMenu.type === 'EMPTY') { - return ( - { - if (model.icons.length > 0) { - const modelItemId = generateId(); - const firstIcon = model.icons[0]; - - // Find nearest unoccupied tile (should return the same tile since context menu is for empty tiles) - const targetTile = findNearestUnoccupiedTile(contextMenu.tile, scene) || contextMenu.tile; - - scene.placeIcon({ - modelItem: { - id: modelItemId, - name: 'Untitled', - icon: firstIcon.id - }, - viewItem: { - ...VIEW_ITEM_DEFAULTS, - id: modelItemId, - tile: targetTile - } - }); - } - onClose(); - } - }, - { - label: 'Add Rectangle', - onClick: () => { - if (model.colors.length > 0) { - scene.createRectangle({ - id: generateId(), - color: model.colors[0].id, - from: contextMenu.tile, - to: contextMenu.tile - }); - } - onClose(); + scene.placeIcon({ + modelItem: { + id: modelItemId, + name: 'Untitled', + icon: firstIcon.id + }, + viewItem: { + ...VIEW_ITEM_DEFAULTS, + id: modelItemId, + tile: targetTile + } + }); } + onClose(); } - ]} - /> - ); - } + }, + { + label: 'Add Rectangle', + onClick: () => { + if (!contextMenu) return; + if (model.colors.length > 0) { + scene.createRectangle({ + id: generateId(), + color: model.colors[0].id, + from: contextMenu.tile, + to: contextMenu.tile + }); + } + onClose(); + } + } + ]} + /> + ); // Remove ITEM context menu since layer ordering only works for rectangles // and provides no value for regular diagram items - return null; }; diff --git a/packages/fossflow-lib/src/components/UiOverlay/UiOverlay.tsx b/packages/fossflow-lib/src/components/UiOverlay/UiOverlay.tsx index af599a4..939f035 100644 --- a/packages/fossflow-lib/src/components/UiOverlay/UiOverlay.tsx +++ b/packages/fossflow-lib/src/components/UiOverlay/UiOverlay.tsx @@ -24,6 +24,7 @@ import { ConnectorRerouteTooltip } from '../ConnectorRerouteTooltip/ConnectorRer import { ImportHintTooltip } from '../ImportHintTooltip/ImportHintTooltip'; import { LassoHintTooltip } from '../LassoHintTooltip/LassoHintTooltip'; import { LazyLoadingWelcomeNotification } from '../LazyLoadingWelcomeNotification/LazyLoadingWelcomeNotification'; +import { CoordsUtils, getTilePosition } from 'src/utils'; const ToolsEnum = { MAIN_MENU: 'MAIN_MENU', @@ -100,6 +101,9 @@ export const UiOverlay = () => { const iconPackManager = useUiStateStore((state) => { return state.iconPackManager; }); + const contextMenu = useUiStateStore((state) => { + return state.contextMenu; + }); const { size: rendererSize } = useResizeObserver(rendererEl); return ( @@ -262,8 +266,17 @@ export const UiOverlay = () => { {iconPackManager && } - - + {contextMenu && ( + + )} + );