fix color history

rtcoder · May 5, 2023 · c8f12f9 · c8f12f9
1 parent 16a1f84
commit c8f12f9
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 43 deletions.
diff --git a/src/components/construction/ColorPicker/ColorHistory/ColorHistory.module.scss b/src/components/construction/ColorPicker/ColorHistory/ColorHistory.module.scss
@@ -1,30 +1,41 @@
 .colorsHistory {
-    width: 240px;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: flex-start;
+  width: 240px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+
+  > div {
+    width: 30px;
+    height: 30px;
+    margin: 2px;
+    cursor: pointer;
+    border-radius: 3px;
+    border: 1px solid #ccc;
+    overflow: hidden;
+    background-image: url('../img/transparent.png');
+    background-color: transparent;
+    background-size: 40%;
 
     > div {
-        width: 20px;
-        height: 20px;
-        margin: 2px;
-        cursor: pointer;
-        border-radius: 3px;
-        border: 1px solid #ccc;
-        overflow: hidden;
-        background-image: url('../img/transparent.png');
-        background-color: transparent;
-        background-size: 40%;
+      background-color: inherit;
+      width: inherit;
+      height: inherit;
+      display: flex;
+      justify-content: center;
+      align-items: center;
 
-        > div {
-            background-color: inherit;
-            width: inherit;
-            height: inherit;
-        }
+      .icon {
+        width: inherit;
+        height: inherit;
+        filter: drop-shadow(0px 1px 0px #fff) drop-shadow(0px -1px 0px #fff) drop-shadow(1px 0px 0px #fff) drop-shadow(-1px 0px 0px #fff);
+        font-size: 25px;
+        color: rgba(0, 0, 0, 0.5);
+      }
+    }
 
-        &:hover {
-            transform: scale(1.1)
-        }
+    &:hover {
+      transform: scale(1.1)
     }
+  }
 }
diff --git a/src/components/construction/ColorPicker/ColorHistory/ColorHistory.tsx b/src/components/construction/ColorPicker/ColorHistory/ColorHistory.tsx
@@ -2,6 +2,7 @@ import {useEffect, useState} from "react";
 import styles from "./ColorHistory.module.scss"
 import {ColorPickerHistoryProps, Rgba} from "@/components/construction/ColorPicker/types";
 import {getPreviewStyle} from "@/components/construction/ColorPicker/functions";
+import Icon from "@/components/construction/Icon/Icon";
 
 
 export default function ColorHistory(props: ColorPickerHistoryProps) {
@@ -14,10 +15,10 @@ export default function ColorHistory(props: ColorPickerHistoryProps) {
             return;
         }
         colorsHistory.unshift(color);
-        if (colorsHistory.length > 20) {
+        if (colorsHistory.length > 13) {
             colorsHistory.splice(-1)
         }
-        setColorsHistory(colorsHistory);
+        setColorsHistory([...colorsHistory]);
         localStorage.setItem('colorsHistory', JSON.stringify(colorsHistory));
     }
     const updateColorsHistoryFromLocalStorage = (): void => {
@@ -31,12 +32,13 @@ export default function ColorHistory(props: ColorPickerHistoryProps) {
         updateColorsHistoryFromLocalStorage();
     }, [])
 
-    useEffect(() => {
-        addColorToHistory(props.color);
-    }, [props.color])
-
     return (
         <div className={styles.colorsHistory}>
+            <div style={getPreviewStyle(props.color)} onClick={_ => addColorToHistory(props.color)}>
+                <div>
+                <Icon type="material" name="add" className={styles.icon}/>
+                </div>
+            </div>
             {colorsHistory.map(color =>
                 <div key={color.join('')} style={getPreviewStyle(color)} onClick={_ => props.onClickColor(color)}>
                     <div/>

diff --git a/src/components/construction/ColorPicker/ColorPicker.tsx b/src/components/construction/ColorPicker/ColorPicker.tsx
@@ -41,7 +41,7 @@ export default function ColorPicker(props: ColorPickerProps) {
     const [currentColor, setCurrentColor] = useState<Rgba>([255, 255, 255, 1]);
     const [currentOpacity, setCurrentOpacity] = useState<number>(1);
     const [posMainCanvasCursor, setPosMainCanvasCursor] = useState<MousePos>({x: 0, y: 0});
-    const [colorToHistory, setColorToHistory] = useState<Rgba>(null);
+
     const onChange = (color: Rgba) => {
         props.onChange(colorArrayToString(color));
     }
@@ -100,54 +100,48 @@ export default function ColorPicker(props: ColorPickerProps) {
             return
         }
         mouseUpAll();
-        const color = updateColorValues(e);
-        setColorToHistory(color);
+        updateColorValues(e);
     }
     const mouseUpSelect = (e) => {
         if (!isMouseDownColorSelect) {
             return
         }
         mouseUpAll();
-        const color = updateColorSelectValues(e);
-        setColorToHistory(color);
+        updateColorSelectValues(e);
     }
     const mouseUpOpacity = (e) => {
         if (!isMouseDownOpacity) {
             return
         }
         mouseUpAll();
-        const color = updateColorOpacityValues(e);
-        setColorToHistory(color);
+        updateColorOpacityValues(e);
     }
-    const updateColorSelectValues = (e): Rgba => {
+    const updateColorSelectValues = (e) => {
         const mousePos = getMousePosOnElement(e);
         const color = getColorFromCanvas(canvasSelectRef, mousePos);
         generateHSV(canvasRef, canvasCursorRef, getHueFromRgba(color), posMainCanvasCursor);
         const mainCanvasColor = getColorFromCanvas(canvasRef, posMainCanvasCursor);
         const [r, g, b] = mainCanvasColor;
         setColorValue([r, g, b, currentOpacity]);
         renderCursor(canvasSelectCursorRef, {x: mousePos.x, y: 10})
-        return [r, g, b, currentOpacity];
     }
-    const updateColorOpacityValues = (e): Rgba => {
+    const updateColorOpacityValues = (e) => {
         const mousePos = getMousePosOnElement(e);
         const color = getColorFromCanvas(canvasOpacityRef, mousePos);
         const [r, g, b] = currentColor;
         const [, , , a] = color;
         setCurrentOpacity(a);
         setColorValue([r, g, b, a]);
         renderCursor(canvasOpacityCursorRef, {x: mousePos.x, y: 10})
-        return [r, g, b, a];
     }
-    const updateColorValues = (e): Rgba => {
+    const updateColorValues = (e) => {
         const mousePos = getMousePosOnElement(e);
         const color = getColorFromCanvas(canvasRef, mousePos);
         const [r, g, b] = color;
         setCurrentColor([r, g, b, currentOpacity]);
         onChange([r, g, b, currentOpacity]);
         setPosMainCanvasCursor(mousePos)
         renderCursor(canvasCursorRef, mousePos)
-        return [r, g, b, currentOpacity];
     }
     const mouseDown = () => {
         setIsMouseDown(true);
@@ -227,7 +221,7 @@ export default function ColorPicker(props: ColorPickerProps) {
                         </div>
                     </div>
                     <RgbaValues color={currentColor}/>
-                    <ColorHistory color={colorToHistory} onClickColor={setColor}/>
+                    <ColorHistory color={currentColor} onClickColor={setColor}/>
                 </div>
             </div>
         </div>