first steps

index.html

@@ -25,8 +25,9 @@
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@joint/core@4.0.1/dist/joint.js"></script>
+    <script src="joint.js"></script>
     <script>
+        let selectedElement = null;
         $(document).ready(function () {
             //init paper - Start
             const graph = new joint.dia.Graph();
@@ -58,6 +59,20 @@
                 graph.addCell(rect);
             }
 
+            paper.on('element:pointerclick', function (elementView) {
+                selectedElement = elementView.model;
+            });
+
+
+            $(document).on('keydown', function (e) {
+                if (e.key === 'Delete' && selectedElement) {
+                    if (selectedElement.attributes.type === 'standard.TextBlock') {
+                        selectedElement.remove();
+                        selectedElement = null; // Reset after deletion
+                    }
+                }
+            });
+
             function createDiamond(paperX, paperY) {
                 const rect = new joint.shapes.standard.Rectangle({
                     position: { x: paperX - 24, y: paperY - 24 },