Update ThemedColorInput.tsx

eez-open · Dec 14, 2024 · fa9589e · fa9589e
1 parent 9badf25
commit fa9589e
Showing 1 changed file with 27 additions and 14 deletions.
diff --git a/packages/project-editor/ui-components/PropertyGrid/ThemedColorInput.tsx b/packages/project-editor/ui-components/PropertyGrid/ThemedColorInput.tsx
@@ -12,7 +12,7 @@ import { getThemedColor } from "project-editor/features/style/theme";
 
 import { ProjectContext } from "project-editor/project/context";
 import { settingsController } from "home/settings";
-import { action, observable, makeObservable } from "mobx";
+import { action, observable, makeObservable, runInAction } from "mobx";
 import { closest } from "eez-studio-shared/dom";
 import tinycolor from "tinycolor2";
 
@@ -35,6 +35,20 @@ export const ThemedColorInput = observer(
         dropDownLeft = 0;
         dropDownTop = 0;
 
+        colorHSV: any;
+
+        constructor(props: any) {
+            super(props);
+
+            makeObservable(this, {
+                dropDownOpen: observable,
+                dropDownLeft: observable,
+                dropDownTop: observable,
+                setDropDownOpen: action,
+                colorHSV: observable
+            });
+        }
+
         onDragOver = (event: React.DragEvent) => {
             event.preventDefault();
             event.stopPropagation();
@@ -71,17 +85,6 @@ export const ThemedColorInput = observer(
             this.props.onChange(color);
         };
 
-        constructor(props: any) {
-            super(props);
-
-            makeObservable(this, {
-                dropDownOpen: observable,
-                dropDownLeft: observable,
-                dropDownTop: observable,
-                setDropDownOpen: action
-            });
-        }
-
         setDropDownOpen(open: boolean) {
             if (this.dropDownOpen === false) {
                 document.removeEventListener(
@@ -186,9 +189,19 @@ export const ThemedColorInput = observer(
                     }}
                 >
                     <Chrome
-                        color={color}
+                        color={
+                            this.dropDownOpen && this.colorHSV
+                                ? this.colorHSV
+                                : color
+                        }
                         showAlpha={false}
-                        onChange={color => this.onChangeColor(color.hex, false)}
+                        onChange={color => {
+                            runInAction(() => {
+                                this.colorHSV = color.hsv;
+                            });
+
+                            this.onChangeColor(color.hex, false);
+                        }}
                     />
                 </div>,
                 document.body