From 8fdfd0705277860fcefb3ac11c9107d57b99338c Mon Sep 17 00:00:00 2001 From: Adrien Tremblay Date: Sat, 20 Dec 2025 15:06:46 -0500 Subject: [PATCH 1/5] Made it so when there are polygon selections in the left canvas, clicking on the right canvas will deselect them --- scripts/leftPanelManager.js | 19 +++++++++++++++++++ scripts/rightPanelManager.js | 10 +++++++++- 2 files changed, 28 insertions(+), 1 deletion(-) diff --git a/scripts/leftPanelManager.js b/scripts/leftPanelManager.js index a666e4c..494c7fa 100644 --- a/scripts/leftPanelManager.js +++ b/scripts/leftPanelManager.js @@ -358,6 +358,25 @@ const LeftPanelManager = { PanZoomManager.initPanning(stage); PanZoomManager.initZooming(stage); + // Creating API for unselecting all elements + 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(); + } + }; + return stage; } }; \ No newline at end of file diff --git a/scripts/rightPanelManager.js b/scripts/rightPanelManager.js index ad4c7fc..64adaf6 100644 --- a/scripts/rightPanelManager.js +++ b/scripts/rightPanelManager.js @@ -2,6 +2,7 @@ const RightPanelManager = { // Initialize the right panel init: (containerId) => { + console.log("right panel"); const container = document.getElementById(containerId); const stagePixelWidth = parseInt(document.getElementById('rightWidth').value); const stagePixelHeight = parseInt(document.getElementById('rightHeight').value); @@ -10,7 +11,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 +97,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); From 05c2183d0c852209280a470d30397ed1a2046229 Mon Sep 17 00:00:00 2001 From: Adrien Tremblay Date: Sat, 20 Dec 2025 16:12:25 -0500 Subject: [PATCH 2/5] Basic deletion of selected nodes in the right panel --- scripts/leftPanelManager.js | 10 +++++++++- scripts/rightPanelManager.js | 23 +++++++++++++++++++++++ 2 files changed, 32 insertions(+), 1 deletion(-) diff --git a/scripts/leftPanelManager.js b/scripts/leftPanelManager.js index 494c7fa..bd8a79a 100644 --- a/scripts/leftPanelManager.js +++ b/scripts/leftPanelManager.js @@ -374,7 +374,15 @@ const LeftPanelManager = { tr.nodes([]); bgLayer.batchDraw(); polygonLayer.batchDraw(); - } + }, + deleteGroup: (groupId) => { + polygonLayer.find('.group').forEach(async group => { + if (group._id == groupId) { + group.destroy(); + polygonLayer.draw(); + } + }); + }, }; return stage; diff --git a/scripts/rightPanelManager.js b/scripts/rightPanelManager.js index 64adaf6..59820e9 100644 --- a/scripts/rightPanelManager.js +++ b/scripts/rightPanelManager.js @@ -153,6 +153,29 @@ 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); + console.log('groupId ' + groupId); + 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'); From 646366a07996d936de9ce20f23988471317eb600 Mon Sep 17 00:00:00 2001 From: Adrien Tremblay Date: Sat, 20 Dec 2025 16:47:53 -0500 Subject: [PATCH 3/5] Changed code to keep track of all polygonGroups in the left panel using an obj --- scripts/leftPanelManager.js | 19 ++++++++++++------- scripts/rightPanelManager.js | 1 - 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/scripts/leftPanelManager.js b/scripts/leftPanelManager.js index bd8a79a..06774a5 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(); @@ -358,7 +363,7 @@ const LeftPanelManager = { PanZoomManager.initPanning(stage); PanZoomManager.initZooming(stage); - // Creating API for unselecting all elements + // Creating API for left panel for use by right panel window.leftPanel = { unselectAll: () => { // Reset previous selection visual for polygons @@ -376,12 +381,12 @@ const LeftPanelManager = { polygonLayer.batchDraw(); }, deleteGroup: (groupId) => { - polygonLayer.find('.group').forEach(async group => { - if (group._id == groupId) { - group.destroy(); - polygonLayer.draw(); - } - }); + const group = polygonGroups[groupId]; + if (group) { + delete polygonGroups[groupId]; + group.destroy(); + polygonLayer.draw(); + } }, }; diff --git a/scripts/rightPanelManager.js b/scripts/rightPanelManager.js index 59820e9..51dc7d4 100644 --- a/scripts/rightPanelManager.js +++ b/scripts/rightPanelManager.js @@ -165,7 +165,6 @@ const RightPanelManager = { selectedTextures.forEach(texture => { texture.destroy(); groupId = Object.keys(tiedRects).find(key => tiedRects[key] === texture); - console.log('groupId ' + groupId); window.rightPanel.removeTexture(groupId); // kinda weird window.leftPanel.deleteGroup(groupId); }); From 70bc9ecfee5cbcbf79ba65fb9a21627046f5a9f3 Mon Sep 17 00:00:00 2001 From: Adrien Tremblay Date: Sat, 20 Dec 2025 16:49:02 -0500 Subject: [PATCH 4/5] Remove unused console.log --- scripts/rightPanelManager.js | 1 - 1 file changed, 1 deletion(-) diff --git a/scripts/rightPanelManager.js b/scripts/rightPanelManager.js index 51dc7d4..6554c5d 100644 --- a/scripts/rightPanelManager.js +++ b/scripts/rightPanelManager.js @@ -2,7 +2,6 @@ const RightPanelManager = { // Initialize the right panel init: (containerId) => { - console.log("right panel"); const container = document.getElementById(containerId); const stagePixelWidth = parseInt(document.getElementById('rightWidth').value); const stagePixelHeight = parseInt(document.getElementById('rightHeight').value); From d834daa3dd0a961447078e04a91a686d15aadfe6 Mon Sep 17 00:00:00 2001 From: Adrien Tremblay Date: Mon, 22 Dec 2025 15:56:10 -0500 Subject: [PATCH 5/5] feat: clicking on the left panel now deselects textures in the right panel --- scripts/leftPanelManager.js | 4 ++++ scripts/rightPanelManager.js | 5 +++++ 2 files changed, 9 insertions(+) diff --git a/scripts/leftPanelManager.js b/scripts/leftPanelManager.js index 06774a5..c779a71 100644 --- a/scripts/leftPanelManager.js +++ b/scripts/leftPanelManager.js @@ -309,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) { diff --git a/scripts/rightPanelManager.js b/scripts/rightPanelManager.js index 6554c5d..df5ee98 100644 --- a/scripts/rightPanelManager.js +++ b/scripts/rightPanelManager.js @@ -435,6 +435,11 @@ const RightPanelManager = { stage.bgRect.fill(CONFIG.BACKGROUND.FILL); stage.bgLayer.draw(); } + }, + + unselectAll: () => { + tr.nodes([]); + console.log("Right panel unselect all"); } };