From 1f790a4b54dc538746d8ed9932a6989d3c90b39f Mon Sep 17 00:00:00 2001
From: Philip Matsson <philip@winterway.eu>
Date: Thu, 10 Oct 2024 14:22:28 +0200
Subject: [PATCH] Fix issue with selection fillColor opacity

---
 src/css/aladin.css                        | 1 +
 src/js/FiniteStateMachine/CircleSelect.js | 2 +-
 src/js/FiniteStateMachine/PolySelect.js   | 8 ++++++--
 src/js/FiniteStateMachine/RectSelect.js   | 2 +-
 4 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/css/aladin.css b/src/css/aladin.css
index aea85606..f51430ff 100644
--- a/src/css/aladin.css
+++ b/src/css/aladin.css
@@ -978,6 +978,7 @@ canvas {
     font-family: monospace;
     line-height: 1rem;
 
+    z-index: 100;
     
     float: left;
 }
diff --git a/src/js/FiniteStateMachine/CircleSelect.js b/src/js/FiniteStateMachine/CircleSelect.js
index 3eb70f45..7517cccd 100644
--- a/src/js/FiniteStateMachine/CircleSelect.js
+++ b/src/js/FiniteStateMachine/CircleSelect.js
@@ -58,7 +58,7 @@ export class CircleSelect extends FSM {
 
             // draw the selection
             let colorValue = (typeof options.color === 'function') ? options.color(this.startCoo, this.coo) : options.color;
-            ctx.fillStyle = colorValue;
+            ctx.fillStyle = colorValue + '7f';
             ctx.strokeStyle = colorValue;
             ctx.lineWidth = options.lineWidth;
 
diff --git a/src/js/FiniteStateMachine/PolySelect.js b/src/js/FiniteStateMachine/PolySelect.js
index 63681673..fa89b328 100644
--- a/src/js/FiniteStateMachine/PolySelect.js
+++ b/src/js/FiniteStateMachine/PolySelect.js
@@ -99,7 +99,6 @@ export class PolySelect extends FSM {
                         e.stopPropagation();
                         e.preventDefault()
 
-                        btn.remove();
                         self.dispatch('finish');
                     }
                 });
@@ -125,7 +124,7 @@ export class PolySelect extends FSM {
             // draw the selection
             ctx.save();
             let colorValue = (typeof options.color === 'function') ? options.color() : options.color;
-            ctx.fillStyle = colorValue;
+            ctx.fillStyle = colorValue + '7f';
             ctx.strokeStyle = colorValue;
             ctx.lineWidth = options.lineWidth;
 
@@ -147,6 +146,7 @@ export class PolySelect extends FSM {
         }
 
         let finish = () => {
+
             if (this.coos.length <= 2) {
                 console.warn("Invalid selection, please draw at least a 3 vertices polygon")
 
@@ -156,6 +156,10 @@ export class PolySelect extends FSM {
                 return;
             }
 
+            if(btn) {
+                btn.remove();
+            }
+
             // finish the selection
             let xMin = this.coos[0].x
             let yMin = this.coos[0].y
diff --git a/src/js/FiniteStateMachine/RectSelect.js b/src/js/FiniteStateMachine/RectSelect.js
index 4bbf9e00..d93640d2 100644
--- a/src/js/FiniteStateMachine/RectSelect.js
+++ b/src/js/FiniteStateMachine/RectSelect.js
@@ -60,7 +60,7 @@ export class RectSelect extends FSM {
             // draw the selection
             let colorValue = (typeof options.color === 'function') ? options.color(this.startCoo, this.coo) : options.color;
 
-            ctx.fillStyle = colorValue;
+            ctx.fillStyle = colorValue + '7f';
             ctx.strokeStyle = colorValue;
             ctx.lineWidth = options.lineWidth;