feat: implements connector width controls

src/components/Connectors/Connector/Connector.tsx

@@ -55,6 +55,10 @@ export const Connector = ({ connector }: Props) => {
     });
   }, [connector.path.origin, connector.anchors, nodes, unprojectedTileSize]);
 
+  const connectorWidthPx = useMemo(() => {
+    return (unprojectedTileSize / 100) * connector.width;
+  }, [connector.width, unprojectedTileSize]);
+
   return (
     <IsoTileArea
       {...getRectangleFromSize(connector.path.origin, connector.path.areaSize)}
@@ -65,7 +69,8 @@ export const Connector = ({ connector }: Props) => {
       <polyline
         points={pathString}
         stroke={connector.color}
-        strokeWidth={10 * zoom}
+        strokeWidth={connectorWidthPx * zoom}
+        strokeLinecap="round"
         fill="none"
       />
       {anchorPositions.map((anchor) => {

src/components/ItemControls/ConnectorControls/ConnectorControls.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import { Connector } from 'src/types';
-import { useTheme, Box } from '@mui/material';
+import { useTheme, Box, Slider } from '@mui/material';
 import { useSceneStore } from 'src/stores/sceneStore';
 import { useConnector } from 'src/hooks/useConnector';
 import { ColorSelector } from 'src/components/ColorSelector/ColorSelector';
@@ -22,7 +22,7 @@ export const ConnectorControls = ({ id }: Props) => {
   const uiStateActions = useUiStateStore((state) => {
     return state.actions;
   });
-  const rectangle = useConnector(id);
+  const connector = useConnector(id);
 
   const onConnectorUpdated = useCallback(
     (updates: Partial<Connector>) => {
@@ -44,7 +44,19 @@ export const ConnectorControls = ({ id }: Props) => {
           onChange={(color) => {
             return onConnectorUpdated({ color });
           }}
-          activeColor={rectangle.color}
+          activeColor={connector.color}
+        />
+      </Section>
+      <Section title="Width">
+        <Slider
+          marks
+          step={5}
+          min={4}
+          max={100}
+          value={connector.width}
+          onChange={(e, newWidth) => {
+            onConnectorUpdated({ width: newWidth as number });
+          }}
         />
       </Section>
       <Section>

src/config.ts

@@ -12,18 +12,18 @@ interface ConnectorDefaults {
   width: number;
   searchOffset: Coords;
 }
-
-export const CONNECTOR_DEFAULTS: ConnectorDefaults = {
-  width: 4,
-  // The boundaries of the search area for the pathfinder algorithm
-  // is the grid that encompasses the two nodes + the offset below.
-  searchOffset: { x: 3, y: 3 }
-};
 export const NODE_DEFAULTS = {
   label: '',
   labelHeight: 140,
   color: DEFAULT_COLOR
 };
+
+export const CONNECTOR_DEFAULTS: ConnectorDefaults = {
+  width: 15,
+  // The boundaries of the search area for the pathfinder algorithm
+  // is the grid that encompasses the two nodes + the offset below.
+  searchOffset: { x: 3, y: 3 }
+};
 export const ZOOM_INCREMENT = 0.2;
 export const MIN_ZOOM = 0.2;
 export const MAX_ZOOM = 1;

src/types/scene.ts

@@ -46,6 +46,7 @@ export interface Connector {
   type: SceneItemTypeEnum.CONNECTOR;
   id: string;
   color: string;
+  width: number;
   anchors: ConnectorAnchor[];
   path: {
     tiles: Coords[];

src/utils/inputs.ts

@@ -12,7 +12,7 @@ import {
   ConnectorAnchor,
   Coords
 } from 'src/types';
-import { NODE_DEFAULTS, DEFAULT_COLOR } from 'src/config';
+import { NODE_DEFAULTS, DEFAULT_COLOR, CONNECTOR_DEFAULTS } from 'src/config';
 import { getConnectorPath } from './renderer';
 
 export const nodeInputToNode = (nodeInput: NodeInput): Node => {
@@ -72,6 +72,7 @@ export const connectorInputToConnector = (
     type: SceneItemTypeEnum.CONNECTOR,
     id: connectorInput.id,
     color: connectorInput.color ?? DEFAULT_COLOR,
+    width: connectorInput.width ?? CONNECTOR_DEFAULTS.width,
     anchors,
     path: getConnectorPath({ anchors, nodes })
   };

src/validation/sceneItems.ts

@@ -40,6 +40,7 @@ export const connectorAnchorInput = z
 export const connectorInput = z.object({
   id: z.string(),
   color: z.string().optional(),
+  width: z.number().optional(),
   anchors: z.array(connectorAnchorInput)
 });