diff --git a/scripts/leftPanelManager.js b/scripts/leftPanelManager.js index a666e4c..c779a71 100644 --- a/scripts/leftPanelManager.js +++ b/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; } }; \ No newline at end of file diff --git a/scripts/rightPanelManager.js b/scripts/rightPanelManager.js index ad4c7fc..df5ee98 100644 --- a/scripts/rightPanelManager.js +++ b/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"); } };