From 75e07d8c062e59ea40734c8961ad728ee23ad367 Mon Sep 17 00:00:00 2001
From: Adrian Cocoara <adrian.cocoara@lgepartner.com>
Date: Tue, 13 Aug 2024 17:45:02 +0300
Subject: [PATCH 1/3] handle resize of canvas

---
 ColorPickerPOC/ColorPickerSpectrum.js         | 19 +++++++++++++++----
 .../ColorPickerSpectrum.module.less           |  6 ++++++
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/ColorPickerPOC/ColorPickerSpectrum.js b/ColorPickerPOC/ColorPickerSpectrum.js
index 3ce06e140c..b9e4bd230f 100644
--- a/ColorPickerPOC/ColorPickerSpectrum.js
+++ b/ColorPickerPOC/ColorPickerSpectrum.js
@@ -15,6 +15,8 @@ const SpectrumColorPicker = (props) => {
 	const [isDragging, setIsDragging] = useState(false);
 	const [indicatorBgColor, setIndicatorBgColor] = useState('transparent');
 	const [isIndicatorActive, setIsIndicatorActive] = useState(false);
+	const [canvasHeight, setCanvasHeight] = useState(ri.scale(660));
+	const [canvasWidth, setCanvasWidth] = useState(ri.scale(800));
 
 	useEffect(() => {
 		const canvas = canvasRef.current;
@@ -57,7 +59,15 @@ const SpectrumColorPicker = (props) => {
 			}
 		};
 		positionIndicator();
-	}, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+		const handleResize = () => {
+			setCanvasHeight(canvas.parentElement.clientHeight);
+			setCanvasWidth(canvas.parentElement.clientWidth);
+		};
+
+		window.addEventListener('resize', handleResize);
+		handleResize();
+	}, [canvasWidth, canvasHeight]); // eslint-disable-line react-hooks/exhaustive-deps
 
 	const handleCanvasPointerDown = useCallback((e) => {
 		const canvas = canvasRef.current;
@@ -107,14 +117,15 @@ const SpectrumColorPicker = (props) => {
 	return (
 		<div className={css.colorPicker}>
 			<canvas
+				className={css.gradientCanvas}
+				id="canvas"
 				ref={canvasRef}
-				height={ri.scale(600)}
+				height={canvasHeight}
 				onPointerDown={handleCanvasPointerDown}
 				onPointerLeave={handleCanvasPointerLeave}
 				onPointerMove={handleCanvasPointerMove}
 				onPointerUp={handleCanvasPointerUp}
-				style={{touchAction: 'none'}}
-				width={ri.scale(800)}
+				width={canvasWidth}
 			/>
 			<SpectrumIndicator
 				bgColor={indicatorBgColor}
diff --git a/ColorPickerPOC/ColorPickerSpectrum.module.less b/ColorPickerPOC/ColorPickerSpectrum.module.less
index b7dcabdf0f..6dca72af1a 100644
--- a/ColorPickerPOC/ColorPickerSpectrum.module.less
+++ b/ColorPickerPOC/ColorPickerSpectrum.module.less
@@ -6,6 +6,12 @@
 
 .colorPicker {
 	position: relative;
+
+	.gradientCanvas {
+		height: 100%;
+		touch-action: none;
+		width: 100%;
+	}
 }
 
 .circleIndicator {

From 72aa43a8c5b872fa92caf86cf4a4f52c866da56e Mon Sep 17 00:00:00 2001
From: Adrian Cocoara <adrian.cocoara@lgepartner.com>
Date: Wed, 14 Aug 2024 10:20:50 +0300
Subject: [PATCH 2/3] code cleanup

---
 ColorPickerPOC/ColorPickerSpectrum.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/ColorPickerPOC/ColorPickerSpectrum.js b/ColorPickerPOC/ColorPickerSpectrum.js
index b9e4bd230f..b1a5020656 100644
--- a/ColorPickerPOC/ColorPickerSpectrum.js
+++ b/ColorPickerPOC/ColorPickerSpectrum.js
@@ -9,14 +9,14 @@ import css from './ColorPickerSpectrum.module.less';
 
 const SpectrumColorPicker = (props) => {
 	const {selectedColor, selectedColorHandler} = props;
+	const [canvasHeight, setCanvasHeight] = useState(ri.scale(660));
 	const canvasRef = useRef(null);
+	const [canvasWidth, setCanvasWidth] = useState(ri.scale(800));
+	const [indicatorBgColor, setIndicatorBgColor] = useState('transparent');
 	const [indicatorX, setIndicatorX] = useState(0);
 	const [indicatorY, setIndicatorY] = useState(0);
 	const [isDragging, setIsDragging] = useState(false);
-	const [indicatorBgColor, setIndicatorBgColor] = useState('transparent');
 	const [isIndicatorActive, setIsIndicatorActive] = useState(false);
-	const [canvasHeight, setCanvasHeight] = useState(ri.scale(660));
-	const [canvasWidth, setCanvasWidth] = useState(ri.scale(800));
 
 	useEffect(() => {
 		const canvas = canvasRef.current;
@@ -118,7 +118,6 @@ const SpectrumColorPicker = (props) => {
 		<div className={css.colorPicker}>
 			<canvas
 				className={css.gradientCanvas}
-				id="canvas"
 				ref={canvasRef}
 				height={canvasHeight}
 				onPointerDown={handleCanvasPointerDown}

From 937cd2bb3bff2fa85078684b96d58bbe63b44739 Mon Sep 17 00:00:00 2001
From: Stanca <stanca.pop@lgepartner.com>
Date: Fri, 16 Aug 2024 13:21:19 +0300
Subject: [PATCH 3/3] sorted props

---
 ColorPickerPOC/ColorPickerSpectrum.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/ColorPickerPOC/ColorPickerSpectrum.js b/ColorPickerPOC/ColorPickerSpectrum.js
index b1a5020656..4c6e2d1d5e 100644
--- a/ColorPickerPOC/ColorPickerSpectrum.js
+++ b/ColorPickerPOC/ColorPickerSpectrum.js
@@ -9,8 +9,8 @@ import css from './ColorPickerSpectrum.module.less';
 
 const SpectrumColorPicker = (props) => {
 	const {selectedColor, selectedColorHandler} = props;
-	const [canvasHeight, setCanvasHeight] = useState(ri.scale(660));
 	const canvasRef = useRef(null);
+	const [canvasHeight, setCanvasHeight] = useState(ri.scale(660));
 	const [canvasWidth, setCanvasWidth] = useState(ri.scale(800));
 	const [indicatorBgColor, setIndicatorBgColor] = useState('transparent');
 	const [indicatorX, setIndicatorX] = useState(0);
@@ -67,7 +67,7 @@ const SpectrumColorPicker = (props) => {
 
 		window.addEventListener('resize', handleResize);
 		handleResize();
-	}, [canvasWidth, canvasHeight]); // eslint-disable-line react-hooks/exhaustive-deps
+	}, [canvasHeight, canvasWidth]); // eslint-disable-line react-hooks/exhaustive-deps
 
 	const handleCanvasPointerDown = useCallback((e) => {
 		const canvas = canvasRef.current;
@@ -118,12 +118,12 @@ const SpectrumColorPicker = (props) => {
 		<div className={css.colorPicker}>
 			<canvas
 				className={css.gradientCanvas}
-				ref={canvasRef}
 				height={canvasHeight}
 				onPointerDown={handleCanvasPointerDown}
 				onPointerLeave={handleCanvasPointerLeave}
 				onPointerMove={handleCanvasPointerMove}
 				onPointerUp={handleCanvasPointerUp}
+				ref={canvasRef}
 				width={canvasWidth}
 			/>
 			<SpectrumIndicator