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

fix: fixes nodes not displaying correctly when being dragged onto canvas

Browse Source
This commit is contained in:
Mark Mankarious
2023-10-13 16:35:09 +01:00
parent 89747e3ed2
commit 36865152ca
1 changed files with 103 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

206
src/components/UiOverlay/UiOverlay.tsx
View File

@@ -77,38 +77,38 @@ export const UiOverlay = () => {
});
return (
<Box
sx={{
position: 'absolute',
width: 0,
height: 0,
top: 0,
left: 0,
zIndex: 1
}}
>
{availableTools.includes('ITEM_CONTROLS') && itemControls && (
<UiElement
sx={{
position: 'absolute',
top: appPadding.y * 2 + spacing(2),
left: appPadding.x,
width: '360px',
overflowY: 'scroll',
'&::-webkit-scrollbar': {
display: 'none'
}
}}
style={{
maxHeight: rendererSize.height - appPadding.y * 6
}}
>
<ItemControlsManager />
</UiElement>
)}
<>
<Box
sx={{
position: 'absolute',
width: 0,
height: 0,
top: 0,
left: 0,
zIndex: 1
}}
>
{availableTools.includes('ITEM_CONTROLS') && itemControls && (
<UiElement
sx={{
position: 'absolute',
top: appPadding.y * 2 + spacing(2),
left: appPadding.x,
width: '360px',
overflowY: 'scroll',
'&::-webkit-scrollbar': {
display: 'none'
}
}}
style={{
maxHeight: rendererSize.height - appPadding.y * 6
}}
>
<ItemControlsManager />
</UiElement>
)}
{availableTools.includes('TOOL_MENU') && (
<>
{availableTools.includes('TOOL_MENU') && (
<Box
style={{
position: 'absolute',
@@ -119,82 +119,82 @@ export const UiOverlay = () => {
>
<ToolMenu />
</Box>
{mode.type === 'PLACE_ELEMENT' && mode.icon && (
<SceneLayer>
<DragAndDrop icon={mode.icon} tile={mouse.position.tile} />
</SceneLayer>
)}
</>
)}
)}
{availableTools.includes('ZOOM_CONTROLS') && (
<Box
style={{
position: 'absolute',
transformOrigin: 'bottom left',
top: rendererSize.height - appPadding.y * 2,
left: appPadding.x
}}
>
<ZoomControls />
</Box>
)}
{availableTools.includes('MAIN_MENU') && (
<Box
sx={{
position: 'absolute',
top: appPadding.y,
left: appPadding.x
}}
>
<MainMenu />
</Box>
)}
{availableTools.includes('SCENE_TITLE') && (
<Box
sx={{
position: 'absolute',
display: 'flex',
justifyContent: 'center',
left: rendererSize.width / 2,
top: rendererSize.height - appPadding.y * 2,
width: rendererSize.width - 500,
height: appPadding.y,
transform: 'translateX(-50%)',
pointerEvents: 'none'
}}
>
<UiElement
sx={{
display: 'inline-flex',
px: 2,
alignItems: 'center',
height: '100%'
{availableTools.includes('ZOOM_CONTROLS') && (
<Box
style={{
position: 'absolute',
transformOrigin: 'bottom left',
top: rendererSize.height - appPadding.y * 2,
left: appPadding.x
}}
>
<Typography fontWeight={600} color="text.secondary">
{sceneTitle}
</Typography>
</UiElement>
</Box>
)}
<ZoomControls />
</Box>
)}
{enableDebugTools && (
<UiElement
sx={{
position: 'absolute',
width: 350,
maxWidth: `calc(${rendererSize.width} - ${appPadding.x * 2}px)`,
left: appPadding.x,
top: rendererSize.height - appPadding.y * 2 - spacing(1),
transform: 'translateY(-100%)'
}}
>
<DebugUtils />
</UiElement>
{availableTools.includes('MAIN_MENU') && (
<Box
sx={{
position: 'absolute',
top: appPadding.y,
left: appPadding.x
}}
>
<MainMenu />
</Box>
)}
{availableTools.includes('SCENE_TITLE') && (
<Box
sx={{
position: 'absolute',
display: 'flex',
justifyContent: 'center',
left: rendererSize.width / 2,
top: rendererSize.height - appPadding.y * 2,
width: rendererSize.width - 500,
height: appPadding.y,
transform: 'translateX(-50%)',
pointerEvents: 'none'
}}
>
<UiElement
sx={{
display: 'inline-flex',
px: 2,
alignItems: 'center',
height: '100%'
}}
>
<Typography fontWeight={600} color="text.secondary">
{sceneTitle}
</Typography>
</UiElement>
</Box>
)}
{enableDebugTools && (
<UiElement
sx={{
position: 'absolute',
width: 350,
maxWidth: `calc(${rendererSize.width} - ${appPadding.x * 2}px)`,
left: appPadding.x,
top: rendererSize.height - appPadding.y * 2 - spacing(1),
transform: 'translateY(-100%)'
}}
>
<DebugUtils />
</UiElement>
)}
</Box>
{mode.type === 'PLACE_ELEMENT' && mode.icon && (
<SceneLayer>
<DragAndDrop icon={mode.icon} tile={mouse.position.tile} />
</SceneLayer>
)}
</Box>
</>
);
};