mirror/FossFLOW
1
0
Fork 0
mirror of https://github.com/stan-smith/FossFLOW.git synced 2025-12-24 23:19:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: enhance context menu functionality with item and empty states

Browse Source
This commit is contained in:
Abhinav Kumar
2025-07-04 15:13:16 +05:30
parent 87a803b1a3
commit 674b46f604
3 changed files with 79 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/components/ContextMenu/ContextMenuManager.tsx
View File

@@ -29,44 +29,75 @@ export const ContextMenuManager = ({ anchorEl }: Props) => {
return null;
}
return (
<ContextMenu
anchorEl={anchorEl}
onClose={onClose}
position={CoordsUtils.multiply(
getTilePosition({ tile: contextMenu.tile }),
zoom
)}
menuItems={[
{
label: 'Send backward',
onClick: () => {
scene.changeLayerOrder('SEND_BACKWARD', contextMenu.item);
onClose();
if (contextMenu.type === 'EMPTY') {
return (
<ContextMenu
anchorEl={anchorEl}
onClose={onClose}
position={CoordsUtils.multiply(
getTilePosition({ tile: contextMenu.tile }),
zoom
)}
menuItems={[
{
label: 'Add Node',
onClick: () => {
onClose();
}
},
{
label: 'Add Rectangle',
onClick: () => {
onClose();
}
}
},
{
label: 'Bring forward',
onClick: () => {
scene.changeLayerOrder('BRING_FORWARD', contextMenu.item);
onClose();
]}
/>
);
}
if (contextMenu.type === 'ITEM' && contextMenu.item) {
return (
<ContextMenu
anchorEl={anchorEl}
onClose={onClose}
position={CoordsUtils.multiply(
getTilePosition({ tile: contextMenu.tile }),
zoom
)}
menuItems={[
{
label: 'Send backward',
onClick: () => {
scene.changeLayerOrder('SEND_BACKWARD', contextMenu.item!);
onClose();
}
},
{
label: 'Bring forward',
onClick: () => {
scene.changeLayerOrder('BRING_FORWARD', contextMenu.item!);
onClose();
}
},
{
label: 'Send to back',
onClick: () => {
scene.changeLayerOrder('SEND_TO_BACK', contextMenu.item!);
onClose();
}
},
{
label: 'Bring to front',
onClick: () => {
scene.changeLayerOrder('BRING_TO_FRONT', contextMenu.item!);
onClose();
}
}
},
{
label: 'Send to back',
onClick: () => {
scene.changeLayerOrder('SEND_TO_BACK', contextMenu.item);
onClose();
}
},
{
label: 'Bring to front',
onClick: () => {
scene.changeLayerOrder('BRING_TO_FRONT', contextMenu.item);
onClose();
}
}
]}
/>
);
]}
/>
);
}
return null;
};

12
src/interaction/useInteractionManager.ts
View File

@@ -151,16 +151,20 @@ export const useInteractionManager = () => {
scene
});
if (itemAtTile?.type === 'RECTANGLE') {
if (itemAtTile) {
uiState.actions.setContextMenu({
type: 'ITEM',
item: itemAtTile,
tile: uiState.mouse.position.tile
});
} else if (uiState.contextMenu) {
uiState.actions.setContextMenu(null);
} else {
uiState.actions.setContextMenu({
type: 'EMPTY',
tile: uiState.mouse.position.tile
});
}
},
[uiState.mouse, scene, uiState.contextMenu, uiState.actions]
[uiState.mouse, scene, uiState.actions]
);
useEffect(() => {

3
src/types/ui.ts
View File

@@ -118,7 +118,8 @@ export const DialogTypeEnum = {
} as const;
export interface ContextMenu {
item: ItemReference;
type: 'ITEM' | 'EMPTY';
item?: ItemReference;
tile: Coords;
}