fix(Map): Add ability to copy and past systems (UI part)

assets/js/hooks/Mapper/components/map/Map.tsx

@@ -120,7 +120,7 @@ const MapComp = ({
   useMapHandlers(refn, onSelectionChange);
   useUpdateNodes(nodes);
 
-  const { handleRootContext, ...rootCtxProps } = useContextMenuRootHandlers({ onAddSystem });
+  const { handleRootContext, ...rootCtxProps } = useContextMenuRootHandlers({ onAddSystem, onCommand });
   const { handleConnectionContext, ...connectionCtxProps } = useContextMenuConnectionHandlers();
   const { update } = useMapState();
   const { variant, gap, size, color } = useBackgroundVars(theme);

assets/js/hooks/Mapper/components/map/components/ContextMenuRoot/ContextMenuRoot.tsx

@@ -2,13 +2,21 @@ import React, { RefObject, useMemo } from 'react';
 import { ContextMenu } from 'primereact/contextmenu';
 import { PrimeIcons } from 'primereact/api';
 import { MenuItem } from 'primereact/menuitem';
+import { PasteSystemsAndConnections } from '@/hooks/Mapper/components/map/components';
 
 export interface ContextMenuRootProps {
   contextMenuRef: RefObject<ContextMenu>;
+  pasteSystemsAndConnections: PasteSystemsAndConnections | undefined;
   onAddSystem(): void;
+  onPasteSystemsAnsConnections(): void;
 }
 
-export const ContextMenuRoot: React.FC<ContextMenuRootProps> = ({ contextMenuRef, onAddSystem }) => {
+export const ContextMenuRoot: React.FC<ContextMenuRootProps> = ({
+  contextMenuRef,
+  onAddSystem,
+  onPasteSystemsAnsConnections,
+  pasteSystemsAndConnections,
+}) => {
   const items: MenuItem[] = useMemo(() => {
     return [
       {
@@ -16,8 +24,17 @@ export const ContextMenuRoot: React.FC<ContextMenuRootProps> = ({ contextMenuRef
         icon: PrimeIcons.PLUS,
         command: onAddSystem,
       },
+      ...(pasteSystemsAndConnections != null
+        ? [
+            {
+              label: 'Paste',
+              icon: 'pi pi-clipboard',
+              command: onPasteSystemsAnsConnections,
+            },
+          ]
+        : []),
     ];
-  }, [onAddSystem]);
+  }, [onAddSystem, onPasteSystemsAnsConnections, pasteSystemsAndConnections]);
 
   return (
     <>

assets/js/hooks/Mapper/components/map/components/ContextMenuRoot/useContextMenuRootHandlers.ts

@@ -3,34 +3,74 @@ import React, { useCallback, useRef, useState } from 'react';
 import { ContextMenu } from 'primereact/contextmenu';
 import { ctxManager } from '@/hooks/Mapper/utils/contextManager.ts';
 import { OnMapAddSystemCallback } from '@/hooks/Mapper/components/map/map.types.ts';
+import { decodeUriBase64ToJson } from '@/hooks/Mapper/utils';
+import { OutCommand, OutCommandHandler, SolarSystemConnection, SolarSystemRawType } from '@/hooks/Mapper/types';
+import { recenterSystemsByBounds } from '@/hooks/Mapper/helpers/recenterSystems.ts';
+
+export type PasteSystemsAndConnections = {
+  systems: SolarSystemRawType[];
+  connections: SolarSystemConnection[];
+};
 
 type UseContextMenuRootHandlers = {
   onAddSystem?: OnMapAddSystemCallback;
+  onCommand?: OutCommandHandler;
 };
 
-export const useContextMenuRootHandlers = ({ onAddSystem }: UseContextMenuRootHandlers = {}) => {
+export const useContextMenuRootHandlers = ({ onAddSystem, onCommand }: UseContextMenuRootHandlers = {}) => {
   const rf = useReactFlow();
   const contextMenuRef = useRef<ContextMenu | null>(null);
   const [position, setPosition] = useState<XYPosition | null>(null);
+  const [pasteSystemsAndConnections, setPasteSystemsAndConnections] = useState<PasteSystemsAndConnections>();
 
-  const handleRootContext = (e: React.MouseEvent<HTMLDivElement>) => {
+  const handleRootContext = async (e: React.MouseEvent<HTMLDivElement>) => {
     setPosition(rf.project({ x: e.clientX, y: e.clientY }));
     e.preventDefault();
     ctxManager.next('ctxRoot', contextMenuRef.current);
     contextMenuRef.current?.show(e);
+
+    try {
+      const text = await navigator.clipboard.readText();
+      const result = decodeUriBase64ToJson(text);
+      setPasteSystemsAndConnections(result as PasteSystemsAndConnections);
+    } catch (err) {
+      setPasteSystemsAndConnections(undefined);
+      // do nothing
+    }
   };
 
-  const ref = useRef({ onAddSystem, position });
-  ref.current = { onAddSystem, position };
+  const ref = useRef({ onAddSystem, position, pasteSystemsAndConnections, onCommand });
+  ref.current = { onAddSystem, position, pasteSystemsAndConnections, onCommand };
 
   const onAddSystemCallback = useCallback(() => {
     ref.current.onAddSystem?.({ coordinates: position });
   }, [position]);
 
+  const onPasteSystemsAnsConnections = useCallback(async () => {
+    const { pasteSystemsAndConnections, onCommand, position } = ref.current;
+    if (!position || !onCommand || !pasteSystemsAndConnections) {
+      return;
+    }
+
+    const { systems } = recenterSystemsByBounds(pasteSystemsAndConnections.systems);
+
+    await onCommand({
+      type: OutCommand.manualPasteSystemsAndConnections,
+      data: {
+        systems: systems.map(({ position: srcPos, ...rest }) => ({
+          position: { x: srcPos.x + position.x, y: srcPos.y + position.y },
+          ...rest,
+        })),
+        connections: pasteSystemsAndConnections.connections,
+      },
+    });
+  }, []);
+
   return {
     handleRootContext,
-
+    pasteSystemsAndConnections,
     contextMenuRef,
     onAddSystem: onAddSystemCallback,
+    onPasteSystemsAnsConnections,
   };
 };