M artbound_python/cache.py → artbound_python/cache.py

@@ -41,7 +41,8 @@ return {
         'id': fanart_id,
         'date': fanart_date.strftime("%Y-%m"),
         'name': row[1],
-        'enabled': 1
+        'enabled': 1,
+        'watermark': { 'invert': '' }
 	}
     
 class DB():

M artbound_python/static/script.js → artbound_python/static/script.js

@@ -17,7 +17,6 @@ month_div = document.getElementById("month_div"),
 	get_button = document.getElementById("get_button"),
 	selectall_button = document.getElementById("selectall_button"),
 	selectnone_button = document.getElementById("selectnone_button"),
-	togglecolor_button = document.getElementById("togglecolor_button"),
 	controls_div = document.getElementById("controls"),
 	opacity_range = document.getElementById("opacity_range"),
 	main_container_div = document.getElementById("main_container"),
@@ -41,12 +40,7 @@ if (e.type == "mousedown") {
 				element.clicked = true;
 				console.log(element);
 			}
-			element.watermark = {
-				x: undefined,
-				y: undefined,
-				opacity: opacity_range.value,
-				invert: watermark_invert
-			}
+			element.watermark.opacity = opacity_range.value;
 			addWatermark(e, element, ctx);
 		}
 	}
@@ -164,15 +158,6 @@ updateOpacity();
 	updateFanartList();
 }
 
-function toggleColor() {
-	watermark_invert = watermark_invert == '' ? 'invert(1)' : '';
-	updateColorDisplay();
-}
-
-function updateColorDisplay() {
-	togglecolor_button.innerText = watermark_invert ? "⚫" : "⚪";
-}
-
 function clickCoordsToCanvas(clickX, clickY, c) {
 	const rect = c.getBoundingClientRect();
 	const x = (clickX - rect.left) * c.width / c.clientWidth;
@@ -223,6 +208,15 @@
 	[fanarts[pos], fanarts[new_pos]] = [fanarts[new_pos], fanarts[pos]];
 
 	updateFanartList();
+}
+
+function toggleInvert(id, button) {
+	const entry = fanarts.find(element => element.id == id);
+	entry.watermark.invert = entry.watermark.invert == '' ? 'invert(1)' : '';
+	button.innerText = entry.watermark.invert ? "⚫" : "⚪";
+	const ctx = entry.canvas.getContext('2d');
+	setBaseImage(entry.image, entry.canvas, ctx);
+	drawWatermark(entry.watermark, ctx);
 }
 
 async function postData(url = "", data = {}, contentType = "application/json") {

M artbound_python/templates/index.html → artbound_python/templates/index.html

@@ -37,7 +37,6 @@ </div>
                 <div id="controls" hidden>
                     <a href="#" class="btn btn-secondary my-2" onclick="selectAllNone(1)" id="selectall_button">✅</a>
                     <a href="#" class="btn btn-secondary my-2" onclick="selectAllNone(0)" id="selectnone_button">❎</a>
-                    <a href="#" class="btn btn-secondary my-2" onclick="toggleColor()" id="togglecolor_button">⚪</a>
                     <input type="range" class="form-range" id="opacity_range" min="0" max="1" step="0.01" oninput="updateOpacity()" value="0.4">
                     <label for="opacity_range" class="form-label" id="opacity_label"></label>
                     <a href="#" class="btn btn-secondary my-2" onclick="saveAll()" id="saveall_button">💾</a>
@@ -89,6 +88,7 @@ <div class="d-flex justify-content-between align-items-center card-controls">
                         <div class="btn-group">
                             <button class="btn btn-sm btn-outline-secondary" onclick="moveUpDown('{| id |}', -1);">⬅️</button>
                             <button class="btn btn-sm btn-outline-secondary" onclick="toggleEntry('{| id |}');">*️⃣</button>
+                            <button class="btn btn-sm btn-outline-secondary" onclick="toggleInvert('{| id |}', this);">⚪</button>
                             <button class="btn btn-sm btn-outline-secondary" onclick="saveEntry('{| id |}');">💾</button>
                             <button class="btn btn-sm btn-outline-secondary" onclick="saveEntryIG('{| id |}');">📷</button>
                             <button class="btn btn-sm btn-outline-secondary" onclick="moveUpDown('{| id |}', 1);">➡️</button>