fix colorpicker updates

src/editor/components/PaintBox.js

@@ -5,40 +5,36 @@
 class PaintBox {
   /**
      * @param {string|Element|external:jQuery} container
-     * @param {PlainObject} svgcanvas
      * @param {"fill"} type
      * @param {string} color
      * @param {number} opacity
      */
-  constructor (container, svgcanvas, type, color, opacity) {
+  constructor (container, type, color, opacity) {
     // set up gradients to be used for the buttons
     const svgdocbox = new DOMParser().parseFromString(
-      `<svg xmlns="http://www.w3.org/2000/svg" width="16.5" height="16.5">
+      `<svg xmlns="http://www.w3.org/2000/svg">
           <rect
-            fill="#${color}" opacity="${opacity}"/>
+            fill="#${color}" opacity="${opacity}" width="22" height="22"/>
           <defs><linearGradient id="gradbox_${PaintBox.ctr++}"/></defs>
         </svg>`,
       'text/xml'
     );
 
     let docElem = svgdocbox.documentElement;
-    docElem = $(container)[0].appendChild(document.importNode(docElem, true));
+    docElem = container.appendChild(document.importNode(docElem, true));
-    docElem.setAttribute('width', 16.5);
 
     this.rect = docElem.firstElementChild;
     this.defs = docElem.getElementsByTagName('defs')[0];
     this.grad = this.defs.firstElementChild;
     this.paint = new $.jGraduate.Paint({solidColor: color});
     this.type = type;
-    this.svgcanvas = svgcanvas;
   }
 
   /**
      * @param {module:jGraduate~Paint} paint
-     * @param {boolean} apply
      * @returns {void}
      */
-  setPaint (paint, apply) {
+  setPaint (paint) {
     this.paint = paint;
 
     const ptype = paint.type;
@@ -61,11 +57,6 @@ class PaintBox {
 
     this.rect.setAttribute('fill', fillAttr);
     this.rect.setAttribute('opacity', opac);
-
-    if (apply) {
-      this.svgCanvas.setColor(this.type, this._paintColor, true);
-      this.svgCanvas.setPaintOpacity(this.type, this._paintOpacity, true);
-    }
   }
   /**
   * @param {string} color
@@ -90,11 +81,10 @@ class PaintBox {
 
   /**
      * @param {PlainObject} selectedElement
-     * @param {boolean} apply
+     * @returns {any}
-     * @returns {void}
      */
-  update (selectedElement, apply) {
+  update (selectedElement) {
-    if (!selectedElement) { return; }
+    if (!selectedElement) { return null; }
 
     const {type} = this;
     switch (selectedElement.tagName) {
@@ -103,7 +93,7 @@ class PaintBox {
     case 'foreignObject':
       // These elements don't have fill or stroke, so don't change
       // the current value
-      return;
+      return null;
     case 'g':
     case 'a': {
       const childs = selectedElement.getElementsByTagName('*');
@@ -123,7 +113,7 @@ class PaintBox {
       if (gPaint === null) {
         // No common color, don't update anything
         this._paintColor = null;
-        return;
+        return null;
       }
       this._paintColor = gPaint;
       this._paintOpacity = 1;
@@ -139,16 +129,12 @@ class PaintBox {
     }
     }
 
-    if (apply) {
-      this.svgCanvas.setColor(type, this._paintColor, true);
-      this.svgCanvas.setPaintOpacity(type, this._paintOpacity, true);
-    }
-
     this._paintOpacity *= 100;
 
     const paint = this.getPaint(this._paintColor, this._paintOpacity, type);
     // update the rect inside #fill_color/#stroke_color
     this.setPaint(paint);
+    return (paint);
   }
 
   /**

src/editor/components/seColorPicker.js

@@ -17,7 +17,7 @@ template.innerHTML = `
     height: 22px;
     width: 22px;
   }
-  .block {
+  #block {
     height: 22px;
     width: 22px;
     float: right;
@@ -42,9 +42,7 @@ template.innerHTML = `
   <div id="picker">
       <img src="./images/logo.svg" alt="icon" id="logo">
       <label for="color" title="Change xxx color" id="label"></label>
-      <div class="block">
+      <div id="block">
-          <div id="bg"></div>
-          <div id="color" class="block"></div>
       </div>
   </div>
   <!-- hidden div -->
@@ -64,6 +62,7 @@ export class SeColorPicker extends HTMLElement {
     this._shadowRoot.appendChild(template.content.cloneNode(true));
     this.$logo = this._shadowRoot.getElementById('logo');
     this.$label = this._shadowRoot.getElementById('label');
+    this.$block = this._shadowRoot.getElementById('block');
     this.paintBox = null;
     this.$picker = this._shadowRoot.getElementById('picker');
     this.$color_picker = this._shadowRoot.getElementById('color_picker');
@@ -92,7 +91,7 @@ export class SeColorPicker extends HTMLElement {
       this.setAttribute('title', newValue);
       break;
     case 'type':
-      this.$label.setAttribute(`Pick a ${newValue} Paint and Opacity`);
+      this.$label.setAttribute('title', `Pick a ${newValue} Paint and Opacity`);
       break;
     default:
       // eslint-disable-next-line no-console
@@ -152,7 +151,20 @@ export class SeColorPicker extends HTMLElement {
    * @returns {void}
    */
   update (selectedElement, apply) {
-    this.paintBox.update(selectedElement, apply);
+    const paint = this.paintBox.update(selectedElement);
+    if (paint && apply) {
+      const changeEvent = new CustomEvent('change', {detail: {
+        paint
+      }});
+      this.dispatchEvent(changeEvent);
+    }
+  }
+  /**
+   * @param {PlainObject} paint
+   * @returns {void}
+   */
+  setPaint (paint) {
+    this.paintBox.setPaint(paint);
   }
 
   /**
@@ -160,7 +172,7 @@ export class SeColorPicker extends HTMLElement {
    * @returns {void}
    */
   connectedCallback () {
-    this.paintBox = new PaintBox(this, this.type);
+    this.paintBox = new PaintBox(this.$block, this.type);
     let {paint} = this.paintBox;
     $(this.$picker).click(() => {
       $(this.$color_picker)
@@ -173,13 +185,15 @@ export class SeColorPicker extends HTMLElement {
             images: {clientPath: './components/jgraduate/images/'},
             paint,
             window: {pickerTitle: this.label},
-            // images: {clientPath: configObj.curConfig.imgPath},
             newstop: 'inverse'
           },
-          function (p) {
+          (p) => {
             paint = new $.jGraduate.Paint(p);
-            this.paintBox.setPaint(paint);
+            this.setPaint(paint);
-            this.svgCanvas.setPaint(this.picker, paint);
+            const changeEvent = new CustomEvent('change', {detail: {
+              paint
+            }});
+            this.dispatchEvent(changeEvent);
             $('#color_picker').hide();
           },
           () => {

src/editor/svgedit.js

@@ -2946,12 +2946,13 @@ editor.init = () => {
   $('#group_opacity').val(configObj.curConfig.initOpacity * 100);
 
   const handleColorPicker = (type, evt) => {
-    // const {paint} = evt.detail;
+    const {paint} = evt.detail;
+    svgCanvas.setPaint(type, paint);
     updateToolButtonState();
   };
 
   $id('stroke_color').addEventListener('change', (evt) => handleColorPicker('stroke', evt));
-  $id('fill_color').addEventListener('change', (evt) => handleColorPicker('stroke', evt));
+  $id('fill_color').addEventListener('change', (evt) => handleColorPicker('fill', evt));
 
   $('#group_opacityLabel').click(() => {
     $('#opacity_dropdown button').mousedown();