Fix map issues and add features

- Handle spaces and dashes in region names.
- Implement zoom and pan functionality.
- Disable node dragging.
- Draw connections between systems, including those in other regions.
- Adjust system name label position.

src/components/MapNode.tsx

@@ -1,3 +1,4 @@
+
 import React, { useState } from 'react';
 import { getSecurityColor } from '../utils/securityColors';
 
@@ -6,8 +7,6 @@ interface MapNodeProps {
   name: string;
   position: { x: number; y: number };
   onClick: () => void;
-  onMouseDown: () => void;
-  isDragging: boolean;
   type: 'region' | 'system';
   security?: number;
 }
@@ -17,8 +16,6 @@ export const MapNode: React.FC<MapNodeProps> = ({
   name,
   position,
   onClick,
-  onMouseDown,
-  isDragging,
   type,
   security
 }) => {
@@ -40,15 +37,9 @@ export const MapNode: React.FC<MapNodeProps> = ({
         className="cursor-pointer select-none"
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
-        onMouseDown={(e) => {
-          e.preventDefault();
-          onMouseDown();
-        }}
         onClick={(e) => {
           e.stopPropagation();
-          if (!isDragging) {
-            onClick();
-          }
+          onClick();
         }}
       >
         {/* Glow effect */}
@@ -77,7 +68,7 @@ export const MapNode: React.FC<MapNodeProps> = ({
           filter="url(#glow)"
           className={`transition-all duration-300 ${
             isHovered ? 'drop-shadow-lg' : ''
-          } ${isDragging ? 'opacity-80' : ''}`}
+          }`}
         />
         
         {/* Text inside pill */}
@@ -88,7 +79,7 @@ export const MapNode: React.FC<MapNodeProps> = ({
           fill="#ffffff"
           fontSize="14"
           fontWeight="bold"
-          className={`transition-all duration-300 pointer-events-none select-none`}
+          className="transition-all duration-300 pointer-events-none select-none"
           style={{ textShadow: '1px 1px 2px rgba(0,0,0,0.8)' }}
         >
           {name}
@@ -98,7 +89,7 @@ export const MapNode: React.FC<MapNodeProps> = ({
   } else {
     // Render system as a dot with external label
     const nodeSize = 8;
-    const textOffset = 15;
+    const textOffset = 20; // Increased from 15 to move text further down
     
     return (
       <g
@@ -106,15 +97,9 @@ export const MapNode: React.FC<MapNodeProps> = ({
         className="cursor-pointer select-none"
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
-        onMouseDown={(e) => {
-          e.preventDefault();
-          onMouseDown();
-        }}
         onClick={(e) => {
           e.stopPropagation();
-          if (!isDragging) {
-            onClick();
-          }
+          onClick();
         }}
       >
         {/* Node glow effect */}
@@ -135,7 +120,7 @@ export const MapNode: React.FC<MapNodeProps> = ({
           filter="url(#glow)"
           className={`transition-all duration-300 ${
             isHovered ? 'drop-shadow-lg' : ''
-          } ${isDragging ? 'opacity-80' : ''}`}
+          }`}
         />
         
         {/* Inner core */}