feat: fixes zIndexing of scene items

src/components/Node/Node.tsx

@@ -13,9 +13,10 @@ import { MarkdownLabel } from './LabelTypes/MarkdownLabel';
 interface Props {
   node: NodeI;
   iconUrl?: string;
+  order: number;
 }
 
-export const Node = ({ node, iconUrl }: Props) => {
+export const Node = ({ node, iconUrl, order }: Props) => {
   const zoom = useUiStateStore((state) => {
     return state.zoom;
   });
@@ -81,6 +82,7 @@ export const Node = ({ node, iconUrl }: Props) => {
       ref={nodeRef}
       sx={{
         position: 'absolute',
+        zIndex: order,
         opacity: 0
       }}
     >

src/components/Renderer/Renderer.tsx

@@ -11,6 +11,7 @@ import { Group } from 'src/components/Group/Group';
 import { Connector } from 'src/components/Connector/Connector';
 import { DebugUtils } from 'src/components/DebugUtils/DebugUtils';
 import { useResizeObserver } from 'src/hooks/useResizeObserver';
+import { SceneLayer } from 'src/components/SceneLayer/SceneLayer';
 
 export const Renderer = () => {
   const [isDebugModeOn] = useState(false);
@@ -91,41 +92,53 @@ export const Renderer = () => {
       }}
     >
       <Grid scroll={scroll} zoom={zoom} />
-      {scene.groups.map((group) => {
-        const groupNodes = getNodesFromIds(group.nodeIds);
+      <SceneLayer>
+        {scene.groups.map((group) => {
+          const groupNodes = getNodesFromIds(group.nodeIds);
 
-        return <Group key={group.id} group={group} nodes={groupNodes} />;
-      })}
-      {mode.showCursor && <Cursor tile={mouse.position.tile} />}
-      {scene.connectors.map((connector) => {
-        const connectorNodes = getNodesFromIds([connector.from, connector.to]);
+          return <Group key={group.id} group={group} nodes={groupNodes} />;
+        })}
+      </SceneLayer>
+      <SceneLayer>
+        {mode.showCursor && <Cursor tile={mouse.position.tile} />}
+      </SceneLayer>
+      <SceneLayer>
+        {scene.connectors.map((connector) => {
+          const connectorNodes = getNodesFromIds([
+            connector.from,
+            connector.to
+          ]);
 
-        return (
-          <Connector
-            key={connector.id}
-            connector={connector}
-            fromNode={connectorNodes[0]}
-            toNode={connectorNodes[1]}
-          />
-        );
-      })}
-      {nodes.map((node) => {
-        return (
-          <Node
-            key={node.id}
-            node={node}
-            iconUrl={
-              icons.find((icon) => {
-                return icon.id === node.iconId;
-              })?.url
-            }
-          />
-        );
-      })}
+          return (
+            <Connector
+              key={connector.id}
+              connector={connector}
+              fromNode={connectorNodes[0]}
+              toNode={connectorNodes[1]}
+            />
+          );
+        })}
+      </SceneLayer>
+      <SceneLayer>
+        {nodes.map((node) => {
+          return (
+            <Node
+              key={node.id}
+              order={-node.position.x - node.position.y}
+              node={node}
+              iconUrl={
+                icons.find((icon) => {
+                  return icon.id === node.iconId;
+                })?.url
+              }
+            />
+          );
+        })}
+      </SceneLayer>
       {isDebugModeOn && (
-        <Box sx={{ position: 'absolute' }}>
+        <SceneLayer>
           <DebugUtils />
-        </Box>
+        </SceneLayer>
       )}
     </Box>
   );

src/components/SceneLayer/SceneLayer.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Box } from '@mui/material';
+
+interface Props {
+  children: React.ReactNode;
+  order?: number;
+}
+
+export const SceneLayer = ({ children, order = 0 }: Props) => {
+  return <Box sx={{ position: 'absolute', zIndex: order }}>{children}</Box>;
+};

src/interaction/useInteractionManager.ts

@@ -80,6 +80,7 @@ export const useInteractionManager = () => {
         mouseEvent: e,
         rendererSize
       });
+      console.log(nextMouse.position.tile);
 
       const baseState: State = {
         scene,