Fix: color picker value wont change after selecting a new element (#1030)

* fix: color picker failed to update when selecting a new element
Signed-off-by: S1NJED <oooguuh@gmail.com>

src/editor/components/seColorPicker.js

@@ -762,6 +762,37 @@ export class SeColorPicker extends HTMLElement {
     this.setAttribute('src', value)
   }
 
+  // Wrap jGraduateMethod in a Promise
+  jGraduateMethodAsync () {
+    return new Promise((resolve, reject) => {
+      jGraduateMethod(
+        this.$color_picker,
+        {
+          images: { clientPath: './components/jgraduate/images/' },
+          paint: this.paintBox.paint,
+          window: { pickerTitle: this.label },
+          newstop: 'inverse'
+        },
+        (p) => resolve(p),
+        () => reject(new Error('jGraduate cancelled')),
+        this.i18next
+      )
+    })
+  }
+
+  async setJGraduateMethod () {
+    try {
+      const p = await this.jGraduateMethodAsync()
+      const paint = new jGraduate.Paint(p)
+      this.setPaint(paint)
+      this.dispatchEvent(new CustomEvent('change', { detail: { paint } }))
+    } catch (err) {
+      // Handle rejection if needed
+    } finally {
+      this.$color_picker.style.display = 'none'
+    }
+  }
+
   /**
    * @param {PlainObject} svgCanvas
    * @param {PlainObject} selectedElement
@@ -770,7 +801,15 @@ export class SeColorPicker extends HTMLElement {
    */
   update (svgCanvas, selectedElement, apply) {
     const paint = this.paintBox.update(svgCanvas, selectedElement)
+
+    // We check if the color picker popup is already open
+    if (this.$color_picker.style.display === 'block') {
+      // We recreate the color picker popup with the current color of the selected elements
+      this.setJGraduateMethod()
+    }
+
     if (paint && apply) {
+      this.setPaint(paint)
       const changeEvent = new CustomEvent('change', {
         detail: {
           paint
@@ -795,31 +834,7 @@ export class SeColorPicker extends HTMLElement {
   connectedCallback () {
     this.paintBox = new PaintBox(this.$block, this.type)
     svgEditor.$click(this.$picker, () => {
-      let { paint } = this.paintBox
+      this.setJGraduateMethod()
-      jGraduateMethod(
-        this.$color_picker,
-        {
-          images: { clientPath: './components/jgraduate/images/' },
-          paint,
-          window: { pickerTitle: this.label },
-          newstop: 'inverse'
-        },
-        (p) => {
-          paint = new jGraduate.Paint(p)
-          this.setPaint(paint)
-          const changeEvent = new CustomEvent('change', {
-            detail: {
-              paint
-            }
-          })
-          this.dispatchEvent(changeEvent)
-          this.$color_picker.style.display = 'none'
-        },
-        () => {
-          this.$color_picker.style.display = 'none'
-        },
-        this.i18next
-      )
     })
   }
 }