not bad already

index.html

@@ -18,6 +18,12 @@
             <div id="shape-diamond" class="shape" data-type="diamond"></div>
             <div id="shape-text" class="shape" data-type="text">Tekst</div>
         </div>
+        <p>Akcje</p>
+        <div class="tools-wrapper toolbar-wrapper">
+            <button id="btn-delete">Usuń</button>
+            <button id="btn-copy">Kopiuj</button>
+            <button id="btn-paste">Wklej</button>
+        </div>
         <p>Zoom</p>
         <div class="zoom-wrapper toolbar-wrapper">
             <button id="zoom-in">+</button>
@@ -34,6 +40,8 @@
     <script>
     let selectedElement = null;
     let activeElementView = null;
+    let clipboard = null;
+    let zoomLevel = 1.0;
 
     $(document).ready(function () {
         //init paper - Start
@@ -202,6 +210,74 @@
         });
         //init draggable - END
 
+        function updateStatus(message) {
+            $('#status').text(message + ' | Zoom: ' + Math.round(zoomLevel * 100) + '%');
+        }
+
+        function getViewportCenter() {
+            const container = $('.canvas-container');
+            const scale = paper.scale();
+            const translate = paper.translate();
+
+            return {
+                x: (container.width() / 2 - translate.tx) / scale.sx,
+                y: (container.height() / 2 - translate.ty) / scale.sy
+            };
+        }
+
+        function copyShape() {
+            if (selectedElement) {
+                clipboard = selectedElement.clone();
+                updateStatus('Skopiowano element');
+            } else {
+                updateStatus('Brak zaznaczonego elementu');
+            }
+        }
+
+        function pasteShape() {
+            if (clipboard) {
+                const center = getViewportCenter();
+                const pasted = clipboard.clone();
+                pasted.position(center.x + 20, center.y + 20);
+                graph.addCell(pasted);
+
+                const pastedView = pasted.findView(paper);
+                if (pastedView) {
+                    pastedView.addTools(createToolsView());
+                    pastedView.showTools();
+
+                    if (activeElementView && activeElementView !== pastedView) {
+                        activeElementView.hideTools();
+                    }
+                    activeElementView = pastedView;
+                }
+
+                selectedElement = pasted;
+                updateStatus('Wklejono element');
+            } else {
+                updateStatus('Brak elementu w schowku');
+            }
+        }
+
+        function deleteShape() {
+            selectedElement.remove();
+            selectedElement = null;
+            updateStatus('Usunięto element');
+        }
+
+        $('#btn-delete').click(function() {
+            deleteShape()
+        });
+
+        $('#btn-copy').click(function() {
+            copyShape();
+        });
+
+        $('#btn-paste').click(function() {
+            pasteShape();
+        });
+
+
         paper.on('element:pointerclick', function (elementView) {
             if (activeElementView && activeElementView !== elementView) {
                 activeElementView.hideTools();
@@ -261,11 +337,20 @@
         });
 
         $(document).on('keydown', function (e) {
+            if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'c') {
+                e.preventDefault();
+                copyShape();
+                return;
+            }
+
+            if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'v') {
+                e.preventDefault();
+                pasteShape();
+                return;
+            }
+
             if (e.key === 'Delete' && selectedElement) {
-                // if (selectedElement.attributes.type === 'standard.TextBlock') {
-                selectedElement.remove();
-                selectedElement = null;
-                // }
+                deleteShape();
             }
         });
         //add text to text block - END