refactor: applies origins of 0,0 to all scene layers

src/components/Renderer/Renderer.tsx

@@ -60,7 +60,7 @@ export const Renderer = () => {
       <SceneLayer>
         <Rectangles />
       </SceneLayer>
-      <SceneLayer>
+      <SceneLayer sx={{ width: '100%', height: '100%', top: 0, left: 0 }}>
         <Grid />
       </SceneLayer>
       {mode.showCursor && (
@@ -77,9 +77,6 @@ export const Renderer = () => {
       <SceneLayer>
         <ConnectorLabels />
       </SceneLayer>
-      <SceneLayer>
-        <Nodes />
-      </SceneLayer>
       {debugMode && (
         <SceneLayer>
           <SizeIndicator />
@@ -89,7 +86,18 @@ export const Renderer = () => {
         <TransformControlsManager />
       </SceneLayer>
       {/* Interaction layer: this is where events are detected */}
-      <SceneLayer ref={containerRef} />
+      <SceneLayer
+        ref={containerRef}
+        sx={{
+          left: 0,
+          top: 0,
+          width: '100%',
+          height: '100%'
+        }}
+      />
+      <SceneLayer>
+        <Nodes />
+      </SceneLayer>
     </Box>
   );
 };

src/components/SceneLayer/SceneLayer.tsx

@@ -1,25 +1,30 @@
 import React, { forwardRef } from 'react';
-import { Box } from '@mui/material';
+import { Box, SxProps } from '@mui/material';
 
 interface Props {
   children?: React.ReactNode;
   order?: number;
+  sx?: SxProps;
 }
 
-export const SceneLayer = forwardRef(({ children, order = 0 }: Props, ref) => {
-  return (
-    <Box
-      ref={ref}
-      sx={{
-        position: 'absolute',
-        zIndex: order,
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%'
-      }}
-    >
-      {children}
-    </Box>
-  );
-});
+export const SceneLayer = forwardRef(
+  ({ children, order = 0, sx }: Props, ref) => {
+    return (
+      <Box
+        ref={ref}
+        sx={{
+          position: 'absolute',
+          zIndex: order,
+          top: '50%',
+          left: '50%',
+          width: 0,
+          height: 0,
+          userSelect: 'none',
+          ...sx
+        }}
+      >
+        {children}
+      </Box>
+    );
+  }
+);

src/components/SceneLayers/Nodes/Node/LabelContainer.tsx

@@ -105,8 +105,7 @@ export const LabelContainer = ({
                 fontSize: '0.7em',
                 bottom: 5,
                 right: 5,
-                color: 'common.white',
-                bgcolor: 'grey.400'
+                color: 'common.white'
               }}
             >
               <ReadMoreIcon sx={{ color: 'common.white' }} />

src/components/SceneLayers/Nodes/Node/Node.tsx

@@ -47,11 +47,7 @@ export const Node = ({ node, order }: Props) => {
         }}
       >
         {(node.label || description) && (
-          <Box
-            sx={{
-              position: 'absolute'
-            }}
-          >
+          <>
             <Box
               style={{
                 position: 'absolute',
@@ -59,7 +55,9 @@ export const Node = ({ node, order }: Props) => {
               }}
             />
             <LabelContainer labelHeight={node.labelHeight} connectorDotSize={3}>
-              <Typography fontWeight={600}>{node.label}</Typography>
+              {node.label && (
+                <Typography fontWeight={600}>{node.label}</Typography>
+              )}
               {description && (
                 <Box sx={{ pt: 0.2, width: 200 }}>
                   <MarkdownEditor
@@ -72,12 +70,13 @@ export const Node = ({ node, order }: Props) => {
                 </Box>
               )}
             </LabelContainer>
-          </Box>
+          </>
         )}
         {iconComponent && (
           <Box
             sx={{
-              position: 'absolute'
+              position: 'absolute',
+              pointerEvents: 'none'
             }}
           >
             {iconComponent}

src/utils/renderer.ts

@@ -95,22 +95,15 @@ export const getTilePosition = ({
   tile,
   scroll,
   zoom,
-  origin = TileOriginEnum.CENTER,
-  rendererSize
+  origin = TileOriginEnum.CENTER
 }: GetTilePosition) => {
   const projectedTileSize = getProjectedTileSize({ zoom });
   const halfW = projectedTileSize.width / 2;
   const halfH = projectedTileSize.height / 2;
 
   const position: Coords = {
-    x:
-      rendererSize.width * 0.5 +
-      (halfW * tile.x - halfW * tile.y) +
-      scroll.position.x,
-    y:
-      rendererSize.height * 0.5 -
-      (halfH * tile.x + halfH * tile.y) +
-      scroll.position.y
+    x: halfW * tile.x - halfW * tile.y + scroll.position.x,
+    y: -(halfH * tile.x + halfH * tile.y) + scroll.position.y
   };
 
   switch (origin) {