picker starts withthe right color

src/editor/components/PaintBox.js

@@ -6,15 +6,13 @@ class PaintBox {
   /**
      * @param {string|Element|external:jQuery} container
      * @param {"fill"} type
-     * @param {string} color
-     * @param {number} opacity
      */
-  constructor (container, type, color, opacity) {
+  constructor (container, type) {
     // set up gradients to be used for the buttons
     const svgdocbox = new DOMParser().parseFromString(
       `<svg xmlns="http://www.w3.org/2000/svg">
           <rect
-            fill="#${color}" opacity="${opacity}" width="22" height="22"/>
+            fill="#000000" opacity="1" width="22" height="22"/>
           <defs><linearGradient id="gradbox_${PaintBox.ctr++}"/></defs>
         </svg>`,
       'text/xml'
@@ -26,7 +24,7 @@ class PaintBox {
     this.rect = docElem.firstElementChild;
     this.defs = docElem.getElementsByTagName('defs')[0];
     this.grad = this.defs.firstElementChild;
-    this.paint = new $.jGraduate.Paint({solidColor: color});
+    // this.paint = new $.jGraduate.Paint({solidColor: color});
     this.type = type;
   }
 

src/editor/panels/BottomPanelHandlers.js

@@ -187,6 +187,9 @@ class BottomPanelHandlers {
     $id('stroke_linecap').addEventListener('change', (evt) => this.handleStrokeAttr.bind(this)('stroke-linecap', evt));
     $id('opacity_dropdown').addEventListener('change', this.handleOpacity.bind(this));
     $id('palette').addEventListener('change', this.handlePalette.bind(this));
+    const {curConfig} = this.editor.configObj;
+    $id('fill_color').setPaint(new $.jGraduate.Paint({alpha: 100, solidColor: curConfig.initFill.color}));
+    $id('stroke_color').setPaint(new $.jGraduate.Paint({alpha: 100, solidColor: curConfig.initStroke.color}));
   }
 }