From 127ba9ec0122f823c8cab7f17937dd9ace8e94f0 Mon Sep 17 00:00:00 2001
From: Nicola Krumschmidt <nicola.krumschmidt@freenet.de>
Date: Thu, 14 Jan 2021 16:06:42 +0100
Subject: [PATCH 1/3] Fix setting hue greater than 100 in color interface

---
 app/src/interfaces/color/color.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/interfaces/color/color.vue b/app/src/interfaces/color/color.vue
index 4aeccc692b..823e44f01b 100644
--- a/app/src/interfaces/color/color.vue
+++ b/app/src/interfaces/color/color.vue
@@ -59,7 +59,7 @@
 					class="color-data-input"
 					pattern="\d*"
 					:min="0"
-					:max="i === 1 ? 360 : 100"
+					:max="i === 0 ? 360 : 100"
 					:step="1"
 					maxlength="3"
 				/>

From 5c018948f3b1bd9ad1b3fb3d0afcdd39754cacba Mon Sep 17 00:00:00 2001
From: Nicola Krumschmidt <nicola.krumschmidt@freenet.de>
Date: Thu, 14 Jan 2021 16:09:13 +0100
Subject: [PATCH 2/3] Round rgb and hsl values in color interface

---
 app/src/interfaces/color/color.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/src/interfaces/color/color.vue b/app/src/interfaces/color/color.vue
index 823e44f01b..c608d8a25c 100644
--- a/app/src/interfaces/color/color.vue
+++ b/app/src/interfaces/color/color.vue
@@ -219,7 +219,7 @@ export default defineComponent({
 
 			const rgb = computed<number[]>({
 				get() {
-					return color.value !== null ? color.value.rgb().array() : [0, 0, 0];
+					return color.value !== null ? color.value.rgb().array().map(Math.round) : [0, 0, 0];
 				},
 				set(newRGB) {
 					color.value = Color.rgb(newRGB);
@@ -228,7 +228,7 @@ export default defineComponent({
 
 			const hsl = computed<number[]>({
 				get() {
-					return color.value !== null ? color.value.hsl().array() : [0, 0, 0];
+					return color.value !== null ? color.value.hsl().array().map(Math.round) : [0, 0, 0];
 				},
 				set(newHSL) {
 					color.value = Color.hsl(newHSL);

From d5e757c026b7d2ab0d51f45b923a926ae027353f Mon Sep 17 00:00:00 2001
From: Nicola Krumschmidt <nicola.krumschmidt@freenet.de>
Date: Thu, 14 Jan 2021 16:15:53 +0100
Subject: [PATCH 3/3] Don't re-emit value propagated to color interface

---
 app/src/interfaces/color/color.vue | 37 +++++++++++++++---------------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/app/src/interfaces/color/color.vue b/app/src/interfaces/color/color.vue
index c608d8a25c..13b0ef4edf 100644
--- a/app/src/interfaces/color/color.vue
+++ b/app/src/interfaces/color/color.vue
@@ -197,22 +197,10 @@ export default defineComponent({
 		function useColor() {
 			const color = ref<Color | null>(null);
 
-			watch(color, (newColor) => {
-				if (newColor === null) return emit('input', null);
-
-				const hex = newColor.hex();
-
-				if (hex.length === 0) emit('input', null);
-				else emit('input', hex);
-			});
-
 			watch(
 				() => props.value,
 				(newValue) => {
-					if (newValue === null) return;
-					const newColor = Color(newValue);
-					if (newColor === null || newColor === color.value) return;
-					color.value = newColor;
+					color.value = newValue !== null ? Color(newValue) : null;
 				},
 				{ immediate: true }
 			);
@@ -222,7 +210,7 @@ export default defineComponent({
 					return color.value !== null ? color.value.rgb().array().map(Math.round) : [0, 0, 0];
 				},
 				set(newRGB) {
-					color.value = Color.rgb(newRGB);
+					setColor(Color.rgb(newRGB));
 				},
 			});
 
@@ -231,7 +219,7 @@ export default defineComponent({
 					return color.value !== null ? color.value.hsl().array().map(Math.round) : [0, 0, 0];
 				},
 				set(newHSL) {
-					color.value = Color.hsl(newHSL);
+					setColor(Color.hsl(newHSL));
 				},
 			});
 
@@ -240,13 +228,26 @@ export default defineComponent({
 					return color.value !== null ? color.value.hex() : null;
 				},
 				set(newHex) {
-					if (newHex === '') color.value = null;
-					if (newHex === null || isHex(newHex) === false) return;
-					color.value = Color(newHex);
+					if (newHex === null || newHex === '') {
+						setColor(null);
+					} else {
+						if (isHex(newHex) === false) return;
+						setColor(Color(newHex));
+					}
 				},
 			});
 
 			return { rgb, hsl, hex, color };
+
+			function setColor(newColor: Color | null) {
+				color.value = newColor;
+
+				if (newColor === null) {
+					emit('input', null);
+				} else {
+					emit('input', newColor.hex());
+				}
+			}
 		}
 	},
 });