Ability to delete (via keyboard) textures on the right panel

scripts/leftPanelManager.js

@@ -3,6 +3,7 @@ const LeftPanelManager = {
     // Initialize the left panel
     init: (containerId, addBtnId, deleteBtnId, uploadId) => {
         const dirtyPolygons = new Set();
+        const polygonGroups = {};
 
         const container = document.getElementById(containerId);
         const stage = new Konva.Stage({ 
@@ -215,6 +216,7 @@ const LeftPanelManager = {
         document.getElementById(addBtnId).addEventListener('click', () => {
             const newGroup = PolygonManager.createPolygonGroup(stage, polygonLayer, null, dirtyPolygons);
             setSelectedPolygon(newGroup);
+            polygonGroups[newGroup._id] = newGroup;
         });
 
         // Delete button
@@ -265,6 +267,9 @@ const LeftPanelManager = {
             // Case 1: polygon selected
             if (selectedGroup) {
                 if (window.rightPanel) window.rightPanel.removeTexture(selectedGroup._id);
+                const group = polygonGroups[selectedGroup._id];
+                if (group)
+                    delete polygonGroups[groupId];
                 selectedGroup.destroy();
                 selectedGroup = null;
                 polygonLayer.draw();
@@ -304,6 +309,10 @@ const LeftPanelManager = {
         stage.on('click', (e) => {
             // Don't process clicks if we're in drawing mode
             if (drawingMode) return;
+
+            // Unselect everything in the right panel
+            if (window.rightPanel)
+                window.rightPanel.unselectAll();
 
             // Reset previous selection visual for polygons
             if (selectedGroup) {
@@ -358,6 +367,33 @@ const LeftPanelManager = {
         PanZoomManager.initPanning(stage);
         PanZoomManager.initZooming(stage);
 
+        // Creating API for left panel for use by right panel
+        window.leftPanel = {
+            unselectAll: () => {
+                // Reset previous selection visual for polygons
+                if (selectedGroup) {
+                    const polygon = selectedGroup.findOne('.polygon');
+                    if (polygon) {
+                        polygon.stroke(CONFIG.POLYGON.STROKE);
+                        polygon.strokeWidth(CONFIG.POLYGON.STROKE_WIDTH);
+                    }
+                }
+                selectedGroup = null;
+
+                tr.nodes([]);
+                bgLayer.batchDraw();
+                polygonLayer.batchDraw();
+            },
+            deleteGroup: (groupId) => {
+                const group = polygonGroups[groupId];
+                if (group) {
+                    delete polygonGroups[groupId];
+                    group.destroy();
+                    polygonLayer.draw();
+                }
+            },
+        };
+
         return stage;
     }
 };

scripts/rightPanelManager.js

@@ -10,7 +10,7 @@ const RightPanelManager = {
         const bgLayer = new Konva.Layer();
         const uiLayer = new Konva.Layer();
         const imageLayer = new Konva.Layer({ name: 'imageLayer' });
-
+;
         const stage = new Konva.Stage({
             container: containerId,
             width: container.clientWidth,
@@ -96,6 +96,13 @@ const RightPanelManager = {
 
         // Click selection
         stage.on('click tap', (e) => {
+            // Unselect any rectangles in the left window
+            if (window.leftPanel) {
+                window.leftPanel.unselectAll();
+            }
+
+            tr.nodes([]); // clear transformer
+
             // Don't process clicks if we were selecting with rectangle
             if (selectionRectangle.visible() && selectionRectangle.width() > 5 && selectionRectangle.height() > 5) {
                 selectionRectangle.visible(false);
@@ -145,6 +152,28 @@ const RightPanelManager = {
             }
         });
 
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Delete' || e.key === 'Backspace') {
+                deleteSelectedObjects();
+            }
+        });
+
+        function deleteSelectedObjects() {
+            const selectedTextures = tr.nodes();
+            if (selectedTextures.length > 0) {
+                selectedTextures.forEach(texture => {
+                    texture.destroy();
+                    groupId = Object.keys(tiedRects).find(key => tiedRects[key] === texture);
+                    window.rightPanel.removeTexture(groupId); // kinda weird
+                    window.leftPanel.deleteGroup(groupId);
+                });
+
+                tr.nodes([]); // clear transformer
+                bgLayer.draw();
+            }
+        }
+
+
         function showContextMenu(x, y, target) {
             // Remove existing menu
             const existingMenu = document.getElementById('konva-context-menu');
@@ -406,6 +435,11 @@ const RightPanelManager = {
                     stage.bgRect.fill(CONFIG.BACKGROUND.FILL);
                     stage.bgLayer.draw();
                 }
+            },
+
+            unselectAll: () => {
+                tr.nodes([]);
+                console.log("Right panel unselect all");
             }
         };