feat: implements connector labels

src/components/ItemControls/ConnectorControls/ConnectorControls.tsx

@@ -1,7 +1,14 @@
 import React, { useCallback } from 'react';
 import { Connector, ConnectorStyleEnum } from 'src/types';
 import { connectorStyleOptions } from 'src/validation/sceneItems';
-import { useTheme, Box, Slider, Select, MenuItem } from '@mui/material';
+import {
+  useTheme,
+  Box,
+  Slider,
+  Select,
+  MenuItem,
+  TextField
+} from '@mui/material';
 import { useSceneStore } from 'src/stores/sceneStore';
 import { useConnector } from 'src/hooks/useConnector';
 import { ColorSelector } from 'src/components/ColorSelector/ColorSelector';
@@ -38,6 +45,15 @@ export const ConnectorControls = ({ id }: Props) => {
 
   return (
     <ControlsContainer>
+      <Section>
+        <TextField
+          label="Label"
+          value={connector.label}
+          onChange={(e) => {
+            return onConnectorUpdated({ label: e.target.value as string });
+          }}
+        />
+      </Section>
       <Section>
         <ColorSelector
           colors={Object.values(theme.customVars.customPalette)}

src/components/Renderer/Renderer.tsx

@@ -7,6 +7,7 @@ import { Cursor } from 'src/components/Cursor/Cursor';
 import { Nodes } from 'src/components/SceneLayers/Nodes/Nodes';
 import { Rectangles } from 'src/components/SceneLayers/Rectangles/Rectangles';
 import { Connectors } from 'src/components/SceneLayers/Connectors/Connectors';
+import { ConnectorLabels } from 'src/components/SceneLayers/ConnectorLabels/ConnectorLabels';
 import { TextBoxes } from 'src/components/SceneLayers/TextBoxes/TextBoxes';
 import { DebugUtils } from 'src/components/DebugUtils/DebugUtils';
 import { useResizeObserver } from 'src/hooks/useResizeObserver';
@@ -73,6 +74,9 @@ export const Renderer = () => {
       <SceneLayer>
         <TextBoxes />
       </SceneLayer>
+      <SceneLayer>
+        <ConnectorLabels />
+      </SceneLayer>
       <SceneLayer>
         <Nodes />
       </SceneLayer>

src/components/SceneLayers/ConnectorLabels/ConnectorLabel.tsx

@@ -0,0 +1,51 @@
+import React, { useMemo } from 'react';
+import { Box, Typography } from '@mui/material';
+import { Connector } from 'src/types';
+import { useGetTilePosition } from 'src/hooks/useGetTilePosition';
+import { connectorPathTileToGlobal } from 'src/utils';
+import { useUiStateStore } from 'src/stores/uiStateStore';
+import { useTileSize } from 'src/hooks/useTileSize';
+
+interface Props {
+  connector: Connector;
+}
+
+export const ConnectorLabel = ({ connector }: Props) => {
+  const { getTilePosition } = useGetTilePosition();
+  const zoom = useUiStateStore((state) => {
+    return state.zoom;
+  });
+  const { projectedTileSize } = useTileSize();
+
+  const labelPosition = useMemo(() => {
+    const tileIndex = Math.floor(connector.path.tiles.length / 2);
+    const tile = connector.path.tiles[tileIndex];
+
+    return getTilePosition({
+      tile: connectorPathTileToGlobal(tile, connector.path.rectangle.from)
+    });
+  }, [connector.path, getTilePosition]);
+
+  return (
+    <Box
+      sx={{
+        position: 'absolute',
+        left: labelPosition.x,
+        top: labelPosition.y,
+        transform: `translate(-50%, -50%) scale(${zoom})`,
+        pointerEvents: 'none',
+        bgcolor: 'common.white',
+        border: 1,
+        py: 0.5,
+        px: 1,
+        borderRadius: 1,
+        maxWidth: projectedTileSize.width * (1 / zoom),
+        borderColor: 'grey.200'
+      }}
+    >
+      <Typography color="text.secondary" variant="body2">
+        {connector.label}
+      </Typography>
+    </Box>
+  );
+};

src/components/SceneLayers/ConnectorLabels/ConnectorLabels.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { useSceneStore } from 'src/stores/sceneStore';
+import { ConnectorLabel } from './ConnectorLabel';
+
+export const ConnectorLabels = () => {
+  const connectors = useSceneStore((state) => {
+    return state.connectors;
+  });
+
+  return (
+    <>
+      {connectors
+        .filter((con) => {
+          return con.label !== undefined;
+        })
+        .map((connector) => {
+          return <ConnectorLabel key={connector.id} connector={connector} />;
+        })}
+    </>
+  );
+};

src/types/scene.ts

@@ -58,6 +58,7 @@ export type ConnectorAnchor = {
 export interface Connector {
   type: SceneItemTypeEnum.CONNECTOR;
   id: string;
+  label?: string;
   color: string;
   width: number;
   style: ConnectorStyleEnum;

src/utils/inputs.ts

@@ -116,6 +116,7 @@ export const connectorInputToConnector = (
   return {
     type: SceneItemTypeEnum.CONNECTOR,
     id: connectorInput.id,
+    label: connectorInput.label,
     color: connectorInput.color ?? DEFAULT_COLOR,
     width: connectorInput.width ?? CONNECTOR_DEFAULTS.width,
     style: connectorInput.style ?? CONNECTOR_DEFAULTS.style,

src/utils/renderer.ts

@@ -448,7 +448,10 @@ export const hasMovedTile = (mouse: Mouse) => {
   return !CoordsUtils.isEqual(mouse.delta.tile, CoordsUtils.zero());
 };
 
-export const connectorPathTileToGlobal = (tile: Coords, origin: Coords) => {
+export const connectorPathTileToGlobal = (
+  tile: Coords,
+  origin: Coords
+): Coords => {
   return CoordsUtils.subtract(
     CoordsUtils.subtract(origin, CONNECTOR_DEFAULTS.searchOffset),
     CoordsUtils.subtract(tile, CONNECTOR_DEFAULTS.searchOffset)

src/validation/sceneItems.ts

@@ -50,6 +50,7 @@ export const connectorStyleEnum = z.enum(connectorStyleOptions);
 
 export const connectorInput = z.object({
   id: z.string(),
+  label: z.string().optional(),
   color: z.string().optional(),
   width: z.number().optional(),
   style: connectorStyleEnum.optional(),