Merge branch 'vnext' into feature/e-add-tableComment

Author: EhsanRezaei1981

src/common/components/icons/copy-icon.component.tsx

@@ -0,0 +1,15 @@
+export const CopyIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1.2em"
+      height="1.2em"
+      viewBox="0 0 256 256"
+    >
+      <path
+        fill="currentColor"
+        d="M216 32H88a8 8 0 0 0-8 8v40H40a8 8 0 0 0-8 8v128a8 8 0 0 0 8 8h128a8 8 0 0 0 8-8v-40h40a8 8 0 0 0 8-8V40a8 8 0 0 0-8-8m-56 176H48V96h112Zm48-48h-32V88a8 8 0 0 0-8-8H96V48h112Z"
+      />
+    </svg>
+  );
+};

src/common/components/icons/index.ts

@@ -23,3 +23,5 @@ export * from './add-folder.component';
 export * from './down-icon';
 export * from './up-icon.component';
 export * from './remove-icon.component';
+export * from './copy-icon.component';
+export * from './paste-icon.component';

src/common/components/icons/paste-icon.component.tsx

@@ -0,0 +1,15 @@
+export const PasteIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1.2em"
+      height="1.2em"
+      viewBox="0 0 256 256"
+    >
+      <path
+        fill="currentColor"
+        d="M200 32h-36.26a47.92 47.92 0 0 0-71.48 0H56a16 16 0 0 0-16 16v168a16 16 0 0 0 16 16h144a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16m-72 0a32 32 0 0 1 32 32H96a32 32 0 0 1 32-32m72 184H56V48h26.75A47.9 47.9 0 0 0 80 64v8a8 8 0 0 0 8 8h80a8 8 0 0 0 8-8v-8a47.9 47.9 0 0 0-2.75-16H200Z"
+      />
+    </svg>
+  );
+};

src/core/providers/canvas-schema/canvas-schema-vlatest.model.ts

@@ -98,4 +98,8 @@ export interface CanvasSchemaContextVm {
   updateFullRelation: (relation: RelationVm) => void;
   deleteSelectedItem: (selectedElementId: GUID) => void;
   switchIsPristine: (isPristine: boolean) => void;
+  duplicateSelectedTable: () => void;
+  copySelectedTable: () => void;
+  pasteTable: () => void;
+  hasClipboardContent: boolean;
 }

src/core/providers/canvas-schema/canvas-schema.provider.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { produce } from 'immer';
 import { CanvasSchemaContext } from './canvas-schema.context';
 import {
@@ -178,6 +178,75 @@ export const CanvasSchemaProvider: React.FC<Props> = props => {
     }));
   };
 
+  const duplicateSelectedTable = () => {
+    setSchema(prevSchema => {
+      if (!prevSchema.selectedElementId) return prevSchema;
+
+      const selectedTable = prevSchema.tables.find(
+        table => table.id === prevSchema.selectedElementId
+      );
+
+      if (!selectedTable) return prevSchema;
+
+      // Create duplicate with new IDs
+      const duplicateTable: TableVm = {
+        ...selectedTable,
+        id: crypto.randomUUID(), // Generate new ID
+        x: selectedTable.x + 50, // Offset position
+        y: selectedTable.y + 50,
+        fields: selectedTable.fields.map(field => ({
+          ...field,
+          id: crypto.randomUUID(), // New IDs for fields
+        })),
+      };
+
+      return {
+        ...prevSchema,
+        tables: [...prevSchema.tables, duplicateTable],
+        isPristine: false,
+      };
+    });
+  };
+
+  const [clipboardTable, setClipboardTable] = useState<TableVm | null>(null);
+  const [pasteOffset, setPasteOffset] = useState({ x: 0, y: 0 });
+
+  const copySelectedTable = () => {
+    const selectedTable = canvasSchema.tables.find(
+      table => table.id === canvasSchema.selectedElementId
+    );
+    if (selectedTable) {
+      setClipboardTable(selectedTable);
+      setPasteOffset({ x: 0, y: 0 }); // Reset offset on copy
+    }
+  };
+
+  const pasteTable = () => {
+    if (clipboardTable) {
+      // Increment offset
+      const newOffset = { x: pasteOffset.x + 50, y: pasteOffset.y + 50 };
+
+      const newTable: TableVm = {
+        ...clipboardTable,
+        id: crypto.randomUUID(),
+        x: clipboardTable.x + newOffset.x,
+        y: clipboardTable.y + newOffset.y,
+        fields: clipboardTable.fields.map(field => ({
+          ...field,
+          id: crypto.randomUUID(),
+        })),
+      };
+
+      setSchema(prev => ({
+        ...prev,
+        tables: [...prev.tables, newTable],
+        isPristine: false,
+      }));
+
+      setPasteOffset(newOffset);
+    }
+  };
+
   return (
     <CanvasSchemaContext.Provider
       value={{
@@ -200,6 +269,10 @@ export const CanvasSchemaProvider: React.FC<Props> = props => {
         updateFullRelation,
         deleteSelectedItem,
         switchIsPristine: switchIsPristine,
+        duplicateSelectedTable,
+        copySelectedTable,
+        pasteTable,
+        hasClipboardContent: Boolean(clipboardTable),
       }}
     >
       {children}

src/pods/canvas/canvas.pod.tsx

@@ -46,6 +46,9 @@ export const CanvasPod: React.FC = () => {
     doRedo,
     deleteSelectedItem,
     loadSchema,
+    duplicateSelectedTable,
+    copySelectedTable,
+    pasteTable,
   } = useCanvasSchemaContext();
   const {
     canvasViewSettings,
@@ -247,6 +250,24 @@ export const CanvasPod: React.FC = () => {
           deleteSelectedItem(canvasSchema.selectedElementId);
         }
       }
+
+      // Add Cmd/Ctrl+D for duplicate
+      if ((e.metaKey || e.ctrlKey) && e.key === 'd') {
+        e.preventDefault(); // Prevent browser default
+        duplicateSelectedTable();
+      }
+
+      // Add Cmd/Ctrl+C for copy
+      if ((e.metaKey || e.ctrlKey) && e.key === 'c') {
+        e.preventDefault(); // Prevent browser default
+        copySelectedTable();
+      }
+
+      // Add Cmd/Ctrl+V for paste
+      if ((e.metaKey || e.ctrlKey) && e.key === 'v') {
+        e.preventDefault(); // Prevent browser default
+        pasteTable();
+      }
     };
 
     modalDialog.isOpen

src/pods/toolbar/components/copy-button/copy-button.component.tsx

@@ -0,0 +1,20 @@
+import { useCanvasSchemaContext } from '@/core/providers/canvas-schema';
+import { CopyIcon } from '@/common/components/icons';
+import { ToolbarButton } from '@/pods/toolbar/components/toolbar-button';
+import classes from '@/pods/toolbar/toolbar.pod.module.css';
+import { SHORTCUTS } from '../../shortcut/shortcut.const';
+
+export const CopyButton = () => {
+  const { canvasSchema, copySelectedTable } = useCanvasSchemaContext();
+
+  return (
+    <ToolbarButton
+      icon={<CopyIcon />}
+      label="Copy"
+      onClick={copySelectedTable}
+      className={`${classes.button} hide-mobile`}
+      disabled={!canvasSchema.selectedElementId}
+      shortcutOptions={SHORTCUTS.copy}
+    />
+  );
+};

src/pods/toolbar/components/copy-button/index.ts

@@ -0,0 +1 @@
+export * from './copy-button.component';

src/pods/toolbar/components/duplicate-button/duplicate-button.component.tsx

@@ -0,0 +1,20 @@
+import { useCanvasSchemaContext } from '@/core/providers/canvas-schema';
+import { CopyIcon } from '@/common/components/icons';
+import { ToolbarButton } from '@/pods/toolbar/components/toolbar-button';
+import classes from '@/pods/toolbar/toolbar.pod.module.css';
+import { SHORTCUTS } from '../../shortcut/shortcut.const';
+
+export const DuplicateButton = () => {
+  const { canvasSchema, duplicateSelectedTable } = useCanvasSchemaContext();
+
+  return (
+    <ToolbarButton
+      icon={<CopyIcon />}
+      label="Duplicate Table"
+      onClick={duplicateSelectedTable}
+      className={`${classes.button} hide-mobile`}
+      disabled={!canvasSchema.selectedElementId}
+      shortcutOptions={SHORTCUTS.duplicate}
+    />
+  );
+};

src/pods/toolbar/components/duplicate-button/index.ts

@@ -0,0 +1 @@
+export * from './duplicate-button.component';