fix: label heights on nodes

src/components/ItemControls/NodeControls/NodeControls.tsx

@@ -50,7 +50,6 @@ export const NodeControls = ({ nodeId }: Props) => {
       {tab === 0 && (
         <NodeSettings
           key={node.id}
-          color={node.color}
           label={node.label}
           labelHeight={node.labelHeight}
           onUpdate={onNodeUpdated}

src/components/ItemControls/NodeControls/NodeSettings/NodeSettings.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import { Slider, useTheme } from '@mui/material';
+import { Slider } from '@mui/material';
 import { Node } from 'src/types';
-import { ColorSelector } from 'src/components/ColorSelector/ColorSelector';
 import { MarkdownEditor } from '../../../MarkdownEditor/MarkdownEditor';
 
 import { Section } from '../../components/Section';
@@ -10,17 +9,9 @@ interface Props {
   label: string;
   labelHeight: number;
   onUpdate: (updates: Partial<Node>) => void;
-  color: string;
 }
 
-export const NodeSettings = ({
-  color,
-  label,
-  labelHeight,
-  onUpdate
-}: Props) => {
-  const theme = useTheme();
-
+export const NodeSettings = ({ label, labelHeight, onUpdate }: Props) => {
   return (
     <>
       <Section title="Label">
@@ -35,23 +26,14 @@ export const NodeSettings = ({
         <Slider
           marks
           step={20}
-          min={0}
-          max={200}
+          min={60}
+          max={280}
           value={labelHeight}
           onChange={(e, newHeight) => {
             onUpdate({ labelHeight: newHeight as number });
           }}
         />
       </Section>
-      <Section title="Color">
-        <ColorSelector
-          activeColor={color}
-          colors={Object.values(theme.customVars.diagramPalette)}
-          onChange={(col) => {
-            onUpdate({ color: col });
-          }}
-        />
-      </Section>
     </>
   );
 };

src/components/Nodes/Node/LabelContainer.tsx

@@ -1,12 +1,11 @@
-import React, { useEffect, useRef } from 'react';
-import gsap from 'gsap';
+import React, { useEffect, useRef, useMemo } from 'react';
 import { Box } from '@mui/material';
 import { useResizeObserver } from 'src/hooks/useResizeObserver';
-import { Size } from 'src/types';
+import { useUiStateStore } from 'src/stores/uiStateStore';
+import { useProjectedTileSize } from 'src/hooks/useProjectedTileSize';
 
 interface Props {
   labelHeight: number;
-  tileSize: Size;
   children: React.ReactNode;
   connectorDotSize: number;
 }
@@ -14,11 +13,17 @@ interface Props {
 export const LabelContainer = ({
   children,
   labelHeight,
-  tileSize,
   connectorDotSize
 }: Props) => {
   const contentRef = useRef<HTMLDivElement>();
   const { observe, size: contentSize } = useResizeObserver();
+  const zoom = useUiStateStore((state) => {
+    return state.zoom;
+  });
+  const projectedTileSize = useProjectedTileSize();
+  const yOffset = useMemo(() => {
+    return projectedTileSize.height / 2;
+  }, [projectedTileSize]);
 
   useEffect(() => {
     if (!contentRef.current) return;
@@ -26,35 +31,27 @@ export const LabelContainer = ({
     observe(contentRef.current);
   }, [observe]);
 
-  useEffect(() => {
-    if (!contentRef.current) return;
-
-    gsap.to(contentRef.current, {
-      duration: 0,
-      x: -contentSize.width * 0.5,
-      y: -(contentSize.height + labelHeight)
-    });
-  }, [contentSize, labelHeight]);
-
   return (
     <Box
       sx={{
         position: 'absolute',
-        width: 10,
-        height: 10
+        transformOrigin: 'top center',
+        transform: `scale(${zoom})`
       }}
     >
       <Box
         component="svg"
+        viewBox={`0 0 ${connectorDotSize} ${labelHeight}`}
+        width={connectorDotSize}
         sx={{
           position: 'absolute',
-          top: -(labelHeight + tileSize.height / 2),
+          top: -(labelHeight + yOffset),
           left: -connectorDotSize / 2
         }}
       >
         <line
           x1={connectorDotSize / 2}
-          y1={tileSize.height / 2}
+          y1={0}
           x2={connectorDotSize / 2}
           y2={labelHeight}
           strokeDasharray={`0, ${connectorDotSize * 2}`}
@@ -72,6 +69,8 @@ export const LabelContainer = ({
           borderColor: 'grey.500',
           borderRadius: 2,
           overflow: 'hidden',
+          left: -contentSize.width * 0.5,
+          top: -(contentSize.height + labelHeight + yOffset),
           py: 1,
           px: 1.5
         }}

src/components/Nodes/Node/Node.tsx

@@ -62,11 +62,7 @@ export const Node = ({ node, icon, order }: Props) => {
               top: -projectedTileSize.height
             }}
           />
-          <LabelContainer
-            labelHeight={node.labelHeight + 100}
-            tileSize={projectedTileSize}
-            connectorDotSize={5 * zoom}
-          >
+          <LabelContainer labelHeight={node.labelHeight} connectorDotSize={5}>
             {node.label && <MarkdownLabel label={node.label} />}
           </LabelContainer>
         </Box>

src/config.ts

@@ -21,7 +21,7 @@ export const CONNECTOR_DEFAULTS: ConnectorDefaults = {
 };
 export const NODE_DEFAULTS = {
   label: '',
-  labelHeight: 100,
+  labelHeight: 140,
   color: DEFAULT_COLOR
 };
 export const ZOOM_INCREMENT = 0.2;

src/examples/DebugTools/DebugTools.tsx

@@ -25,7 +25,6 @@ export const DebugTools = () => {
           {
             id: 'server',
             label: 'Requests per minute',
-            labelHeight: 40,
             iconId: 'server',
             position: {
               x: 0,
@@ -35,7 +34,6 @@ export const DebugTools = () => {
           {
             id: 'database',
             label: 'Transactions',
-            labelHeight: 40,
             iconId: 'block',
             position: {
               x: 5,