mark assigned entrances on map

diff --git a/resources/js/components/zootr/MixedPoolsTracker.js b/resources/js/components/zootr/MixedPoolsTracker.js
index a97dd3fafa53b7af74b355264d8cb7a96f634169..5d1d51637d0c6f6f93b13e4d54511bb17bd5b614 100644 (file)
--- a/resources/js/components/zootr/MixedPoolsTracker.js
+++ b/resources/js/components/zootr/MixedPoolsTracker.js
@@ -2656,31 +2656,58 @@ const MapEntrance = ({ entrance }) => {
                setConnection,
        } = useTracker();
 
-       const classNames = ['entrance'];
-       if (connections[entrance.id] === 'trash') classNames.push('is-trash');
-       if (isDragging(entrance)) classNames.push('is-dragging');
+       const className = React.useMemo(() => {
+               const cs = ['entrance'];
+               if (connections[entrance.id] === 'trash') cs.push('is-trash');
+               if (isDragging(entrance)) cs.push('is-dragging');
+               return cs.join(' ');
+       }, [connections, entrance, isDragging]);
+
+       const destination = React.useMemo(() => {
+               return getEntrance(connections[entrance.id]) || getRoom(connections[entrance.id]);
+       }, [connections, entrance]);
+
+       const onClick = React.useCallback((e) => {
+               onMapEntranceClick(entrance);
+               e.preventDefault();
+               e.stopPropagation();
+       }, [entrance, onMapEntranceClick]);
+
+       const onContext = React.useCallback((e) => {
+               if (connections[entrance.id]) {
+                       setConnection(entrance.id, null);
+               } else {
+                       setConnection(entrance.id, 'trash');
+               }
+               e.preventDefault();
+               e.stopPropagation();
+       }, [connections, entrance, setConnection]);
+
+       if (destination) {
+               return <rect
+                       x={entrance.pos.x - 3}
+                       y={entrance.pos.y - 3}
+                       width={6}
+                       height={6}
+                       className={className}
+                       fill={destination.bgColor}
+                       stroke={destination.fgColor}
+                       onClick={onClick}
+                       onContextMenu={onContext}
+               >
+                       <title>{destination.name} @ {entrance.name}</title>
+               </rect>;
+       }
 
        return <circle
                cx={entrance.pos.x}
                cy={entrance.pos.y}
                r="3"
-               className={classNames.join(' ')}
+               className={className}
                fill={entrance.color}
                stroke="#000000"
-               onClick={(e) => {
-                       onMapEntranceClick(entrance);
-                       e.preventDefault();
-                       e.stopPropagation();
-               }}
-               onContextMenu={(e) => {
-                       if (connections[entrance.id]) {
-                               setConnection(entrance.id, null);
-                       } else {
-                               setConnection(entrance.id, 'trash');
-                       }
-                       e.preventDefault();
-                       e.stopPropagation();
-               }}
+               onClick={onClick}
+               onContextMenu={onContext}
        >
                <title>{entrance.name}</title>
        </circle>;