feat: displays connector anchors only when connector is selected / active

src/components/SceneLayers/Connectors/Connector.tsx

@@ -15,9 +15,10 @@ import { useColor } from 'src/hooks/useColor';
 
 interface Props {
   connector: ReturnType<typeof useScene>['connectors'][0];
+  isSelected?: boolean;
 }
 
-export const Connector = ({ connector: _connector }: Props) => {
+export const Connector = ({ connector: _connector, isSelected }: Props) => {
   const theme = useTheme();
   const color = useColor(_connector.color);
   const { currentView } = useScene();
@@ -42,6 +43,8 @@ export const Connector = ({ connector: _connector }: Props) => {
   }, [connector.path.tiles, drawOffset]);
 
   const anchorPositions = useMemo(() => {
+    if (!isSelected) return [];
+
     return connector.anchors.map((anchor) => {
       const position = getAnchorTile(anchor, currentView);
 
@@ -57,7 +60,13 @@ export const Connector = ({ connector: _connector }: Props) => {
           drawOffset.y
       };
     });
-  }, [currentView, connector.path.rectangle, connector.anchors, drawOffset]);
+  }, [
+    currentView,
+    connector.path.rectangle,
+    connector.anchors,
+    drawOffset,
+    isSelected
+  ]);
 
   const directionIcon = useMemo(() => {
     return getConnectorDirectionIcon(connector.path.tiles);

src/components/SceneLayers/Connectors/Connectors.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
-import { useScene } from 'src/hooks/useScene';
+import React, { useMemo } from 'react';
+import type { useScene } from 'src/hooks/useScene';
+import { useUiStateStore } from 'src/stores/uiStateStore';
 import { Connector } from './Connector';
 
 interface Props {
@@ -7,10 +8,35 @@ interface Props {
 }
 
 export const Connectors = ({ connectors }: Props) => {
+  const itemControls = useUiStateStore((state) => {
+    return state.itemControls;
+  });
+
+  const mode = useUiStateStore((state) => {
+    return state.mode;
+  });
+
+  const selectedConnectorId = useMemo(() => {
+    if (mode.type === 'CONNECTOR') {
+      return mode.id;
+    }
+    if (itemControls?.type === 'CONNECTOR') {
+      return itemControls.id;
+    }
+
+    return null;
+  }, [mode, itemControls]);
+
   return (
     <>
       {[...connectors].reverse().map((connector) => {
-        return <Connector key={connector.id} connector={connector} />;
+        return (
+          <Connector
+            key={connector.id}
+            connector={connector}
+            isSelected={selectedConnectorId === connector.id}
+          />
+        );
       })}
     </>
   );