feat: implements connector styles

src/components/Connectors/Connector/Connector.tsx

@@ -59,6 +59,18 @@ export const Connector = ({ connector }: Props) => {
     return (unprojectedTileSize / 100) * connector.width;
   }, [connector.width, unprojectedTileSize]);
 
+  const strokeDashArray = useMemo(() => {
+    switch (connector.style) {
+      case 'DASHED':
+        return `${connectorWidthPx * 1.5}, ${connectorWidthPx * 1.5}`;
+      case 'DOTTED':
+        return `0, ${connectorWidthPx * 1.4}`;
+      case 'SOLID':
+      default:
+        return 'none';
+    }
+  }, [connector.style, connectorWidthPx]);
+
   return (
     <IsoTileArea
       {...getRectangleFromSize(connector.path.origin, connector.path.areaSize)}
@@ -72,6 +84,7 @@ export const Connector = ({ connector }: Props) => {
         strokeWidth={connectorWidthPx}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeDasharray={strokeDashArray}
         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, Slider } from '@mui/material';
+import { Connector, ConnectorStyleEnum } from 'src/types';
+import { useTheme, Box, Slider, Select, MenuItem } from '@mui/material';
 import { useSceneStore } from 'src/stores/sceneStore';
 import { useConnector } from 'src/hooks/useConnector';
 import { ColorSelector } from 'src/components/ColorSelector/ColorSelector';
@@ -59,6 +59,20 @@ export const ConnectorControls = ({ id }: Props) => {
           }}
         />
       </Section>
+      <Section title="Style">
+        <Select
+          value={connector.style}
+          onChange={(e) => {
+            return onConnectorUpdated({
+              style: e.target.value as ConnectorStyleEnum
+            });
+          }}
+        >
+          {Object.values(ConnectorStyleEnum).map((style) => {
+            return <MenuItem value={style}>{style}</MenuItem>;
+          })}
+        </Select>
+      </Section>
       <Section>
         <Box>
           <DeleteButton onClick={onConnectorDeleted} />

src/config.ts

@@ -1,4 +1,10 @@
-import { Size, Coords, SceneInput } from 'src/types';
+import {
+  Size,
+  Coords,
+  SceneInput,
+  Connector,
+  ConnectorStyleEnum
+} from 'src/types';
 import { customVars } from './styles/theme';
 
 export const UNPROJECTED_TILE_SIZE = 100;
@@ -8,21 +14,24 @@ export const TILE_PROJECTION_MULTIPLIERS: Size = {
 };
 export const DEFAULT_COLOR = customVars.diagramPalette.blue;
 
-interface ConnectorDefaults {
-  width: number;
-  searchOffset: Coords;
-}
 export const NODE_DEFAULTS = {
   label: '',
   labelHeight: 140,
   color: DEFAULT_COLOR
 };
 
+interface ConnectorDefaults {
+  width: number;
+  searchOffset: Coords;
+  style: Connector['style'];
+}
+
 export const CONNECTOR_DEFAULTS: ConnectorDefaults = {
   width: 20,
   // 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 }
+  searchOffset: { x: 3, y: 3 },
+  style: ConnectorStyleEnum.SOLID
 };
 export const ZOOM_INCREMENT = 0.2;
 export const MIN_ZOOM = 0.2;

src/types/inputs.ts

@@ -8,6 +8,7 @@ import {
 } from 'src/validation/sceneItems';
 import { sceneInput } from 'src/validation/scene';
 
+export { ConnectorStyleEnum } from 'src/validation/sceneItems';
 export type IconInput = z.infer<typeof iconInput>;
 export type NodeInput = z.infer<typeof nodeInput>;
 export type ConnectorAnchorInput = z.infer<typeof connectorAnchorInput>;

src/types/scene.ts

@@ -4,7 +4,8 @@ import {
   SceneInput,
   RectangleInput,
   ConnectorInput,
-  NodeInput
+  NodeInput,
+  ConnectorStyleEnum
 } from './inputs';
 
 export enum TileOriginEnum {
@@ -47,6 +48,7 @@ export interface Connector {
   id: string;
   color: string;
   width: number;
+  style: ConnectorStyleEnum;
   anchors: ConnectorAnchor[];
   path: {
     tiles: Coords[];

src/utils/inputs.ts

@@ -73,6 +73,7 @@ export const connectorInputToConnector = (
     id: connectorInput.id,
     color: connectorInput.color ?? DEFAULT_COLOR,
     width: connectorInput.width ?? CONNECTOR_DEFAULTS.width,
+    style: connectorInput.style ?? CONNECTOR_DEFAULTS.style,
     anchors,
     path: getConnectorPath({ anchors, nodes })
   };

src/validation/sceneItems.ts

@@ -37,10 +37,23 @@ export const connectorAnchorInput = z
     }
   });
 
+export enum ConnectorStyleEnum {
+  SOLID = 'SOLID',
+  DOTTED = 'DOTTED',
+  DASHED = 'DASHED'
+}
+
 export const connectorInput = z.object({
   id: z.string(),
   color: z.string().optional(),
   width: z.number().optional(),
+  style: z
+    .union([
+      z.literal(ConnectorStyleEnum.SOLID),
+      z.literal(ConnectorStyleEnum.DOTTED),
+      z.literal(ConnectorStyleEnum.DASHED)
+    ])
+    .optional(),
   anchors: z.array(connectorAnchorInput)
 });