From d8e3e3957cea7199ad1b4c94ced4f35f5cda8890 Mon Sep 17 00:00:00 2001
From: Igor Zinken <730069+igorski@users.noreply.github.com>
Date: Sat, 18 Apr 2026 07:51:29 +0200
Subject: [PATCH] Fix issues with state history for text value and color

---
 .../tool-options-text/tool-options-text.vue      | 16 ++++++++++------
 src/components/ui/color-picker/color-picker.vue  | 15 ++++++++++++++-
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/components/tool-options-panel/tool-options-text/tool-options-text.vue b/src/components/tool-options-panel/tool-options-text/tool-options-text.vue
index 3e08ee8..f1853a3 100644
--- a/src/components/tool-options-panel/tool-options-text/tool-options-text.vue
+++ b/src/components/tool-options-panel/tool-options-text/tool-options-text.vue
@@ -175,7 +175,7 @@ export default {
                 this.renderPending = true;
                 window.setTimeout(() => {
                     this.renderPending = false;
-                    this.update( null, `value_${this.text}` );
+                    this.update({ value: this.internalText }, "value" );
                 }, 50 );
             }
         },
@@ -236,12 +236,15 @@ export default {
     watch: {
         activeLayer: {
             immediate: true,
-            handler( layer: Layer ): void {
-                if ( layer && this.layerId !== layer.id ) {
-                    this.internalText = layer.text?.value;
-                    this.syncText     = this.internalText === layer.name || layer.name === DEFAULT_LAYER_NAME;
-                    this.layerId      = layer.id;
+            handler( layer?: Layer ): void {
+                if ( !layer ) {
+                    return;
                 }
+                if ( this.layerId !== layer.id ) {
+                    this.layerId = layer.id;
+                }
+                this.internalText = layer.text?.value;
+                this.syncText = this.internalText === layer.name || layer.name === DEFAULT_LAYER_NAME;
             }
         },
     },
@@ -308,6 +311,7 @@ export default {
             const { left, top, width, height } = this.activeLayer;
             const commit = () => store.commit( "updateLayer", { index, opts: { name: newName, text: newOpts } });
             commit();
+            
             enqueueState( `${propName}_${index}`, {
                 undo() {
                     store.commit( "updateLayer", { index, opts: { left, top, width, height, name: orgName, text: orgOpts } });
diff --git a/src/components/ui/color-picker/color-picker.vue b/src/components/ui/color-picker/color-picker.vue
index c4b1c24..c40ed65 100644
--- a/src/components/ui/color-picker/color-picker.vue
+++ b/src/components/ui/color-picker/color-picker.vue
@@ -62,6 +62,7 @@ export default {
     },
     watch: {
         modelValue( color: string ): void {
+            this.lock();
             this.pickrInstance?.setColor( color );
         },
         swatches( value: string[], oldValue?: string[] ): void {
@@ -105,6 +106,7 @@ export default {
             window.pickrInstance = this.pickrInstance;
             this.globalInstance = true;
         }
+        this._locked = false;
     },
     destroy(): void {
         this.pickrInstance?.destroyAndRemove();
@@ -113,6 +115,17 @@ export default {
         }
     },
     methods: {
+        // when updating the color from the synced model value
+        // we shouldn't emit an update on the saveColor handler
+        lock(): void {
+            if ( this._locked ) {
+                return;
+            }
+            this._locked = true;
+            queueMicrotask(() => {
+                this._locked = false;
+            });
+        },
         saveColor( value: { toHEXA: () => number[], toRGBA: () => number[] } ): void {
             let parsedValue: string;
 
@@ -129,7 +142,7 @@ export default {
                 parsedValue = value.toHEXA().toString();
             }
 
-            if ( this.modelValue !== parsedValue ) {
+            if ( !this._locked && this.modelValue !== parsedValue ) {
                 this.$emit( "update:modelValue", parsedValue );
             }
         },