Add copy/paste specific attributes for nodes and edges

src/components/context-menu.tsx

@@ -2,12 +2,23 @@ import { Box, Divider, Portal, useOutsideClick } from '@chakra-ui/react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import useEvent from 'react-use-event-hook';
-import { Id } from '../constants/constants';
+import { Id, LineId, NodeId } from '../constants/constants';
 import { MAX_MASTER_NODE_FREE } from '../constants/master';
 import { useRootDispatch, useRootSelector } from '../redux';
 import { saveGraph } from '../redux/param/param-slice';
 import { clearSelected, refreshEdgesThunk, refreshNodesThunk, setSelected } from '../redux/runtime/runtime-slice';
-import { exportSelectedNodesAndEdges, importSelectedNodesAndEdges } from '../util/clipboard';
+import {
+    exportSelectedNodesAndEdges,
+    importSelectedNodesAndEdges,
+    exportNodeSpecificAttrs,
+    exportEdgeSpecificAttrs,
+    parseClipboardData,
+    importNodeSpecificAttrs,
+    importEdgeSpecificAttrs,
+    getSelectedElementsType,
+    NodeSpecificAttrsClipboardData,
+    EdgeSpecificAttrsClipboardData,
+} from '../util/clipboard';
 import { pointerPosToSVGCoord, roundToMultiple } from '../util/helpers';
 import { MAX_PARALLEL_LINES_FREE } from '../util/parallel';
 
@@ -40,6 +51,12 @@ const ContextMenu: React.FC<ContextMenuProps> = ({ isOpen, position, onClose })
     const hasSelection = selected.size > 0;
     const menuRef = React.useRef<HTMLDivElement>(null);
 
+    // Check selection type for copy/paste attributes
+    const selectionInfo = getSelectedElementsType(graph.current, selected);
+    const canCopyAttrs = selected.size === 1;
+    const canPasteAttrs =
+        selectionInfo.allSameType && (selectionInfo.category === 'node' || selectionInfo.category === 'edge');
+
     useOutsideClick({
         ref: menuRef,
         handler: onClose,
@@ -150,6 +167,52 @@ const ContextMenu: React.FC<ContextMenuProps> = ({ isOpen, position, onClose })
         }
     });
 
+    const handleCopyAttrs = useEvent(() => {
+        if (selected.size !== 1) return;
+        const [id] = selected;
+
+        if (graph.current.hasNode(id)) {
+            const s = exportNodeSpecificAttrs(graph.current, id as NodeId);
+            navigator.clipboard.writeText(s);
+        } else if (graph.current.hasEdge(id)) {
+            const s = exportEdgeSpecificAttrs(graph.current, id as LineId);
+            navigator.clipboard.writeText(s);
+        }
+    });
+
+    const handlePasteAttrs = useEvent(async () => {
+        try {
+            const s = await navigator.clipboard.readText();
+            const parsed = parseClipboardData(s);
+            if (!parsed) return;
+
+            if (parsed.type === 'node-attrs' && selectionInfo.category === 'node') {
+                const nodeIds = new Set<NodeId>();
+                selected.forEach(id => {
+                    if (graph.current.hasNode(id)) {
+                        nodeIds.add(id as NodeId);
+                    }
+                });
+                if (importNodeSpecificAttrs(graph.current, nodeIds, parsed.data as NodeSpecificAttrsClipboardData)) {
+                    refreshAndSave();
+                }
+            } else if (parsed.type === 'edge-attrs' && selectionInfo.category === 'edge') {
+                const edgeIds = new Set<LineId>();
+                selected.forEach(id => {
+                    if (graph.current.hasEdge(id)) {
+                        edgeIds.add(id as LineId);
+                    }
+                });
+                if (importEdgeSpecificAttrs(graph.current, edgeIds, parsed.data as EdgeSpecificAttrsClipboardData)) {
+                    refreshAndSave();
+                }
+            }
+        } catch (error) {
+            // Handle clipboard read error
+            console.warn('Failed to read clipboard:', error);
+        }
+    });
+
     if (!isOpen) return null;
 
     return (
@@ -217,6 +280,25 @@ const ContextMenu: React.FC<ContextMenuProps> = ({ isOpen, position, onClose })
                     {t('contextMenu.delete')}
                 </MenuItem>
                 <Divider />
+                <MenuItem
+                    onClick={() => {
+                        handleCopyAttrs();
+                        onClose();
+                    }}
+                    isDisabled={!canCopyAttrs}
+                >
+                    {t('contextMenu.copyAttrs')}
+                </MenuItem>
+                <MenuItem
+                    onClick={() => {
+                        handlePasteAttrs();
+                        onClose();
+                    }}
+                    isDisabled={!canPasteAttrs}
+                >
+                    {t('contextMenu.pasteAttrs')}
+                </MenuItem>
+                <Divider />
                 <MenuItem
                     onClick={() => {
                         handleZIndex(10);

src/components/panels/details/details.tsx

@@ -1,9 +1,9 @@
-import { Box, Button, Heading, HStack } from '@chakra-ui/react';
+import { Box, Button, Heading, HStack, VStack } from '@chakra-ui/react';
 import { RmgSidePanel, RmgSidePanelBody, RmgSidePanelFooter, RmgSidePanelHeader } from '@railmapgen/rmg-components';
 import { nanoid } from 'nanoid';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Id, StnId } from '../../../constants/constants';
+import { Id, LineId, NodeId, StnId } from '../../../constants/constants';
 import { MAX_MASTER_NODE_FREE } from '../../../constants/master';
 import { MiscNodeType } from '../../../constants/nodes';
 import { useRootDispatch, useRootSelector } from '../../../redux';
@@ -14,7 +14,17 @@ import {
     refreshEdgesThunk,
     refreshNodesThunk,
 } from '../../../redux/runtime/runtime-slice';
-import { exportSelectedNodesAndEdges } from '../../../util/clipboard';
+import {
+    exportSelectedNodesAndEdges,
+    exportNodeSpecificAttrs,
+    exportEdgeSpecificAttrs,
+    parseClipboardData,
+    importNodeSpecificAttrs,
+    importEdgeSpecificAttrs,
+    getSelectedElementsType,
+    NodeSpecificAttrsClipboardData,
+    EdgeSpecificAttrsClipboardData,
+} from '../../../util/clipboard';
 import { isPortraitClient } from '../../../util/helpers';
 import { checkAndChangeStationIntType } from '../../../util/change-types';
 import InfoSection from './info-section';
@@ -44,6 +54,12 @@ const DetailsPanel = () => {
 
     const isMasterDisabled = !activeSubscriptions.RMP_CLOUD && masterNodesCount + 1 > MAX_MASTER_NODE_FREE;
 
+    // Check if we can paste specific attributes
+    const selectionInfo = getSelectedElementsType(graph.current, selected);
+    const canCopyAttrs = selected.size === 1;
+    const canPasteAttrs =
+        selectionInfo.allSameType && (selectionInfo.category === 'node' || selectionInfo.category === 'edge');
+
     const handleClose = () => {
         if (!isPortraitClient()) {
             dispatch(clearSelected());
@@ -82,6 +98,52 @@ const DetailsPanel = () => {
         hardRefresh();
     };
 
+    const handleCopyAttrs = () => {
+        if (selected.size !== 1) return;
+        const id = selectedFirst;
+
+        if (graph.current.hasNode(id)) {
+            const s = exportNodeSpecificAttrs(graph.current, id as NodeId);
+            navigator.clipboard.writeText(s);
+        } else if (graph.current.hasEdge(id)) {
+            const s = exportEdgeSpecificAttrs(graph.current, id as LineId);
+            navigator.clipboard.writeText(s);
+        }
+    };
+
+    const handlePasteAttrs = async () => {
+        try {
+            const s = await navigator.clipboard.readText();
+            const parsed = parseClipboardData(s);
+            if (!parsed) return;
+
+            if (parsed.type === 'node-attrs' && selectionInfo.category === 'node') {
+                const nodeIds = new Set<NodeId>();
+                selected.forEach(id => {
+                    if (graph.current.hasNode(id)) {
+                        nodeIds.add(id as NodeId);
+                    }
+                });
+                if (importNodeSpecificAttrs(graph.current, nodeIds, parsed.data as NodeSpecificAttrsClipboardData)) {
+                    hardRefresh();
+                }
+            } else if (parsed.type === 'edge-attrs' && selectionInfo.category === 'edge') {
+                const edgeIds = new Set<LineId>();
+                selected.forEach(id => {
+                    if (graph.current.hasEdge(id)) {
+                        edgeIds.add(id as LineId);
+                    }
+                });
+                if (importEdgeSpecificAttrs(graph.current, edgeIds, parsed.data as EdgeSpecificAttrsClipboardData)) {
+                    hardRefresh();
+                }
+            }
+        } catch (error) {
+            // Handle clipboard read error
+            console.warn('Failed to read clipboard:', error);
+        }
+    };
+
     return (
         <RmgSidePanel isOpen={isDetailsOpen === 'show'} width={300} header="Dummy header" alwaysOverlay>
             <RmgSidePanelHeader onClose={handleClose}>{t('panel.details.header')}</RmgSidePanelHeader>
@@ -103,27 +165,37 @@ const DetailsPanel = () => {
                 )}
             </RmgSidePanelBody>
             <RmgSidePanelFooter>
-                <HStack>
-                    {selected.size === 1 && graph.current.hasNode(selectedFirst) && (
-                        <Button
-                            size="sm"
-                            variant="outline"
-                            onClick={() => handleDuplicate(selectedFirst)}
-                            isDisabled={
-                                graph.current.getNodeAttributes(selectedFirst).type === MiscNodeType.Master &&
-                                isMasterDisabled
-                            }
-                        >
-                            {t('panel.details.footer.duplicate')}
+                <VStack spacing={2} align="stretch">
+                    <HStack>
+                        {selected.size === 1 && graph.current.hasNode(selectedFirst) && (
+                            <Button
+                                size="sm"
+                                variant="outline"
+                                onClick={() => handleDuplicate(selectedFirst)}
+                                isDisabled={
+                                    graph.current.getNodeAttributes(selectedFirst).type === MiscNodeType.Master &&
+                                    isMasterDisabled
+                                }
+                            >
+                                {t('panel.details.footer.duplicate')}
+                            </Button>
+                        )}
+                        <Button size="sm" variant="outline" onClick={() => handleCopy(selected)}>
+                            {t('panel.details.footer.copy')}
+                        </Button>
+                        <Button size="sm" variant="outline" onClick={() => handleRemove(selected)}>
+                            {t('panel.details.footer.remove')}
+                        </Button>
+                    </HStack>
+                    <HStack>
+                        <Button size="sm" variant="outline" onClick={handleCopyAttrs} isDisabled={!canCopyAttrs}>
+                            {t('panel.details.footer.copyAttrs')}
+                        </Button>
+                        <Button size="sm" variant="outline" onClick={handlePasteAttrs} isDisabled={!canPasteAttrs}>
+                            {t('panel.details.footer.pasteAttrs')}
                         </Button>
-                    )}
-                    <Button size="sm" variant="outline" onClick={() => handleCopy(selected)}>
-                        {t('panel.details.footer.copy')}
-                    </Button>
-                    <Button size="sm" variant="outline" onClick={() => handleRemove(selected)}>
-                        {t('panel.details.footer.remove')}
-                    </Button>
-                </HStack>
+                    </HStack>
+                </VStack>
             </RmgSidePanelFooter>
         </RmgSidePanel>
     );

src/i18n/translations/en.json

@@ -673,7 +673,8 @@
             "footer": {
                 "duplicate": "Duplicate",
                 "copy": "Copy",
-                "remove": "Remove"
+                "remove": "Remove",
+                "pasteAttrs": "Paste Attributes"
             }
         }
     },
@@ -940,7 +941,9 @@
         "placeBottom": "Place bottom",
         "placeDefault": "Place to default",
         "placeUp": "Place one level up",
-        "placeDown": "Place one level down"
+        "placeDown": "Place one level down",
+        "copyAttrs": "Copy Attributes",
+        "pasteAttrs": "Paste Attributes"
     },
 
     "localStorageQuotaExceeded": "Local storage limit reached. Unable to save new changes."

src/i18n/translations/ja.json

@@ -675,7 +675,8 @@
             "footer": {
                 "duplicate": "重複",
                 "copy": "複製",
-                "remove": "削除"
+                "remove": "削除",
+                "pasteAttrs": "属性を貼り付け"
             }
         }
     },
@@ -941,7 +942,9 @@
         "placeBottom": "最背面へ",
         "placeDefault": "デフォルト位置へ",
         "placeUp": "一つ前へ",
-        "placeDown": "一つ後ろへ"
+        "placeDown": "一つ後ろへ",
+        "copyAttrs": "属性をコピー",
+        "pasteAttrs": "属性を貼り付け"
     },
 
     "localStorageQuotaExceeded": "ローカルストレージの上限に達しました。新しい変更は保存できません。"

src/i18n/translations/ko.json

@@ -672,7 +672,8 @@
             "footer": {
                 "duplicate": "복사",
                 "copy": "복사",
-                "remove": "삭제"
+                "remove": "삭제",
+                "pasteAttrs": "속성 붙여넣기"
             }
         }
     },
@@ -939,7 +940,9 @@
         "placeBottom": "맨 뒤로",
         "placeDefault": "기본 위치로",
         "placeUp": "한 단계 앞으로",
-        "placeDown": "한 단계 뒤로"
+        "placeDown": "한 단계 뒤로",
+        "copyAttrs": "속성 복사",
+        "pasteAttrs": "속성 붙여넣기"
     },
 
     "localStorageQuotaExceeded": "로컬 저장소 한도에 도달했습니다. 새로운 변경 사항을 저장할 수 없습니다."

src/i18n/translations/zh-Hans.json

@@ -672,7 +672,8 @@
             "footer": {
                 "duplicate": "重复",
                 "copy": "复制",
-                "remove": "移除"
+                "remove": "移除",
+                "pasteAttrs": "粘贴属性"
             }
         }
     },
@@ -939,7 +940,9 @@
         "placeBottom": "置底",
         "placeDefault": "还原位置",
         "placeUp": "上移一层",
-        "placeDown": "下移一层"
+        "placeDown": "下移一层",
+        "copyAttrs": "复制属性",
+        "pasteAttrs": "粘贴属性"
     },
 
     "localStorageQuotaExceeded": "本地存储空间已达上限。无法保存新更改。"

src/i18n/translations/zh-Hant.json

@@ -672,7 +672,9 @@
             "footer": {
                 "duplicate": "重複",
                 "copy": "複製",
-                "remove": "移除"
+                "remove": "移除",
+                "copyAttrs": "複製屬性",
+                "pasteAttrs": "貼上屬性"
             }
         }
     },
@@ -939,7 +941,9 @@
         "placeBottom": "置底",
         "placeDefault": "還原位置",
         "placeUp": "上移一層",
-        "placeDown": "下移一層"
+        "placeDown": "下移一層",
+        "copyAttrs": "複製屬性",
+        "pasteAttrs": "貼上屬性"
     },
 
     "localStorageQuotaExceeded": "本機儲存空間已達上限。無法儲存新的變更。"