From 75cba2b51e880c73709fd435d14f2a41d1595dd6 Mon Sep 17 00:00:00 2001
From: Karl Fritsche <github@attrib.org>
Date: Sun, 14 Jul 2024 23:25:30 +0200
Subject: [PATCH] Reduced opacity of rectangles

---
 frontend/tools/rectangle.js | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/frontend/tools/rectangle.js b/frontend/tools/rectangle.js
index c83fb73..54c57e9 100644
--- a/frontend/tools/rectangle.js
+++ b/frontend/tools/rectangle.js
@@ -11,6 +11,7 @@ class Rectangle {
   editingStyles = createEditingStyle();
   active = false
   firstAbortClick = false
+  opacity = 'DD'
 
   /**
    * @param {EditTools}  tools
@@ -40,15 +41,15 @@ class Rectangle {
     });
     this.draw.on('drawstart', (event) => {
       event.feature.set('type', 'rectangle', true)
-      event.feature.set('color', tools.sidebar.colorInput.value + 'AA', true)
-      event.feature.set('secondary-color', tools.sidebar.secondaryColorInput.value + 'AA')
+      event.feature.set('color', tools.sidebar.colorInput.value + this.opacity, true)
+      event.feature.set('secondary-color', tools.sidebar.secondaryColorInput.value + this.opacity)
       this.sketchFeature = event.feature
     })
     this.draw.on('drawend', (event) => {
       const feature = event.feature
       feature.set('type', 'rectangle', true)
-      feature.set('color', tools.sidebar.colorInput.value + 'AA', true)
-      feature.set('secondary-color', tools.sidebar.secondaryColorInput.value + 'AA', true)
+      feature.set('color', tools.sidebar.colorInput.value + this.opacity, true)
+      feature.set('secondary-color', tools.sidebar.secondaryColorInput.value + this.opacity, true)
       feature.set('notes', tools.sidebar.notesInput.value)
       tools.emit(tools.EVENT_ICON_ADDED, feature)
       tools.changeTool(false)
@@ -132,11 +133,11 @@ class Rectangle {
   styles = (feature) => {
     if (feature.getGeometry().getType() === 'Polygon') {
       const notes = feature.get('notes') === undefined || this.tools.sidebar.editFeature === feature ? this.tools.sidebar.notesInput.value : feature.get('notes')
-      const color = feature.get('color') === undefined || this.tools.sidebar.editFeature === feature ? this.tools.sidebar.colorInput.value + 'AA' : feature.get('color')
-      const secondaryColor = feature.get('secondary-color') === undefined || this.tools.sidebar.editFeature === feature ? this.tools.sidebar.secondaryColorInput.value + 'AA' : feature.get('secondary-color')
+      const color = feature.get('color') === undefined || this.tools.sidebar.editFeature === feature ? this.tools.sidebar.colorInput.value + this.opacity : feature.get('color')
+      const secondaryColor = feature.get('secondary-color') === undefined || this.tools.sidebar.editFeature === feature ? this.tools.sidebar.secondaryColorInput.value + this.opacity : feature.get('secondary-color')
       this.rectangleStyle.getText().setText(notes.split("\n")[0])
       this.rectangleStyle.getFill().setColor(color)
-      if (secondaryColor.toUpperCase() === '#FFFFFFAA') {
+      if (secondaryColor.toUpperCase() === ('#FFFFFF' + this.opacity)) {
         return [this.rectangleStyle]
       }
       const sec = new Style({