feat: improves label handeling

src/components/Label/Label.tsx

@@ -1,6 +1,7 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Box } from '@mui/material';
-import { ExpandButton } from './ExpandButton';
+import React, { useRef } from 'react';
+import { Box, SxProps } from '@mui/material';
+
+const CONNECTOR_DOT_SIZE = 3;
 
 interface Props {
   labelHeight?: number;
@@ -8,7 +9,7 @@ interface Props {
   maxHeight?: number;
   expandDirection?: 'CENTER' | 'BOTTOM';
   children: React.ReactNode;
-  connectorDotSize: number;
+  sx?: SxProps;
 }
 
 export const Label = ({
@@ -17,15 +18,10 @@ export const Label = ({
   maxHeight,
   expandDirection = 'CENTER',
   labelHeight = 0,
-  connectorDotSize
+  sx
 }: Props) => {
-  const [isExpanded, setIsExpanded] = useState(false);
   const contentRef = useRef<HTMLDivElement>();
 
-  useEffect(() => {
-    contentRef.current?.scrollTo({ top: 0 });
-  }, [isExpanded]);
-
   return (
     <Box
       sx={{
@@ -36,22 +32,22 @@ export const Label = ({
       {labelHeight > 0 && (
         <Box
           component="svg"
-          viewBox={`0 0 ${connectorDotSize} ${labelHeight}`}
-          width={connectorDotSize}
+          viewBox={`0 0 ${CONNECTOR_DOT_SIZE} ${labelHeight}`}
+          width={CONNECTOR_DOT_SIZE}
           sx={{
             position: 'absolute',
             top: -labelHeight,
-            left: -connectorDotSize / 2
+            left: -CONNECTOR_DOT_SIZE / 2
           }}
         >
           <line
-            x1={connectorDotSize / 2}
+            x1={CONNECTOR_DOT_SIZE / 2}
             y1={0}
-            x2={connectorDotSize / 2}
+            x2={CONNECTOR_DOT_SIZE / 2}
             y2={labelHeight}
-            strokeDasharray={`0, ${connectorDotSize * 2}`}
+            strokeDasharray={`0, ${CONNECTOR_DOT_SIZE * 2}`}
             stroke="black"
-            strokeWidth={connectorDotSize}
+            strokeWidth={CONNECTOR_DOT_SIZE}
             strokeLinecap="round"
           />
         </Box>
@@ -72,7 +68,8 @@ export const Label = ({
           transform: `translate(-50%, ${
             expandDirection === 'BOTTOM' ? '-100%' : '-50%'
           })`,
-          overflow: 'hidden'
+          overflow: 'hidden',
+          ...sx
         }}
         style={{
           maxHeight,
@@ -80,24 +77,6 @@ export const Label = ({
         }}
       >
         {children}
-
-        <Box
-          sx={{
-            position: 'absolute',
-            bottom: 0,
-            right: 0
-          }}
-        >
-          {isExpanded && (
-            <ExpandButton
-              isExpanded={isExpanded}
-              onClick={() => {
-                setIsExpanded(false);
-              }}
-            />
-          )}
-          {/* </Box> */}
-        </Box>
       </Box>
     </Box>
   );

src/components/SceneLayers/ConnectorLabels/ConnectorLabel.tsx

@@ -3,7 +3,6 @@ import { Box, Typography } from '@mui/material';
 import { useScene } from 'src/hooks/useScene';
 import { connectorPathTileToGlobal, getTilePosition } from 'src/utils';
 import { PROJECTED_TILE_SIZE } from 'src/config';
-import { useUiStateStore } from 'src/stores/uiStateStore';
 import { Label } from 'src/components/Label/Label';
 
 interface Props {
@@ -11,10 +10,6 @@ interface Props {
 }
 
 export const ConnectorLabel = ({ connector }: Props) => {
-  const zoom = useUiStateStore((state) => {
-    return state.zoom;
-  });
-
   const labelPosition = useMemo(() => {
     const tileIndex = Math.floor(connector.path.tiles.length / 2);
     const tile = connector.path.tiles[tileIndex];
@@ -33,36 +28,19 @@ export const ConnectorLabel = ({ connector }: Props) => {
         top: labelPosition.y
       }}
     >
-      <Label maxWidth={150} labelHeight={0} connectorDotSize={0}>
+      <Label
+        maxWidth={150}
+        labelHeight={0}
+        sx={{
+          py: 0.75,
+          px: 1,
+          borderRadius: 2
+        }}
+      >
         <Typography color="text.secondary" variant="body2">
           {connector.description}
         </Typography>
       </Label>
     </Box>
   );
-
-  return (
-    <Box
-      sx={{
-        position: 'absolute',
-        pointerEvents: 'none',
-        bgcolor: 'common.white',
-        border: 1,
-        py: 0.5,
-        px: 1,
-        borderRadius: 1,
-        borderColor: 'grey.200'
-      }}
-      style={{
-        transform: `translate(-50%, -50%) scale(${zoom})`,
-        maxWidth: PROJECTED_TILE_SIZE.width,
-        left: labelPosition.x,
-        top: labelPosition.y
-      }}
-    >
-      <Typography color="text.secondary" variant="body2">
-        {connector.description}
-      </Typography>
-    </Box>
-  );
 };

src/components/SceneLayers/ConnectorLabels/ConnectorLabels.tsx

@@ -10,8 +10,8 @@ export const ConnectorLabels = ({ connectors }: Props) => {
   return (
     <>
       {connectors
-        .filter((con) => {
-          return con.description !== undefined;
+        .filter((connector) => {
+          return Boolean(connector.description);
         })
         .map((connector) => {
           return <ConnectorLabel key={connector.id} connector={connector} />;

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

@@ -57,7 +57,6 @@ export const Node = ({ node, order }: Props) => {
               maxHeight={100}
               expandDirection="BOTTOM"
               labelHeight={node.labelHeight ?? DEFAULT_LABEL_HEIGHT}
-              connectorDotSize={3}
             >
               {modelItem.name && (
                 <Typography fontWeight={600}>{modelItem.name}</Typography>

src/hooks/useConnector.ts

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
 import { Connector, SceneConnector } from 'src/types';
-import { CONNECTOR_DEFAULTS } from 'src/config';
 import { getItemByIdOrThrow } from 'src/utils';
 import { useScene } from 'src/hooks/useScene';
 
@@ -10,12 +9,7 @@ export const useConnector = (
   const { connectors } = useScene();
 
   const connector = useMemo(() => {
-    const con = getItemByIdOrThrow(connectors ?? [], id).value;
-
-    return {
-      ...CONNECTOR_DEFAULTS,
-      ...con
-    };
+    return getItemByIdOrThrow(connectors, id).value;
   }, [connectors, id]);
 
   return connector;

src/hooks/useRectangle.ts

@@ -1,7 +1,6 @@
 import { useMemo } from 'react';
 import { getItemByIdOrThrow } from 'src/utils';
 import { useScene } from 'src/hooks/useScene';
-import { RECTANGLE_DEFAULTS } from 'src/config';
 
 export const useRectangle = (id: string) => {
   const { rectangles } = useScene();
@@ -10,8 +9,5 @@ export const useRectangle = (id: string) => {
     return getItemByIdOrThrow(rectangles, id).value;
   }, [rectangles, id]);
 
-  return {
-    ...RECTANGLE_DEFAULTS,
-    ...rectangle
-  };
+  return rectangle;
 };

src/hooks/useScene.ts

@@ -14,6 +14,11 @@ import { useSceneStore } from 'src/stores/sceneStore';
 import * as reducers from 'src/stores/reducers';
 import type { State } from 'src/stores/reducers/types';
 import { getItemByIdOrThrow } from 'src/utils';
+import {
+  CONNECTOR_DEFAULTS,
+  RECTANGLE_DEFAULTS,
+  TEXTBOX_DEFAULTS
+} from 'src/config';
 
 export const useScene = () => {
   const model = useModelStore((state) => {
@@ -41,6 +46,7 @@ export const useScene = () => {
       const sceneConnector = scene.connectors[connector.id];
 
       return {
+        ...CONNECTOR_DEFAULTS,
         ...connector,
         ...sceneConnector
       };
@@ -48,7 +54,12 @@ export const useScene = () => {
   }, [currentView.connectors, scene.connectors]);
 
   const rectangles = useMemo(() => {
-    return currentView.rectangles ?? [];
+    return (currentView.rectangles ?? []).map((rectangle) => {
+      return {
+        ...RECTANGLE_DEFAULTS,
+        ...rectangle
+      };
+    });
   }, [currentView.rectangles]);
 
   const textBoxes = useMemo(() => {
@@ -56,6 +67,7 @@ export const useScene = () => {
       const sceneTextBox = scene.textBoxes[textBox.id];
 
       return {
+        ...TEXTBOX_DEFAULTS,
         ...textBox,
         ...sceneTextBox
       };