fix palette

src/editor/components/sePalette.js

@@ -56,10 +56,17 @@ export class SEPalette extends HTMLElement {
    * @returns {void}
    */
   connectedCallback () {
-    this.$strip.addEventListener('click', (e) => {
-      e.preventDefault();
-      console.log(e);
-      this.dispatchEvent(this.$event);
+    this.$strip.addEventListener('click', (evt) => {
+      evt.preventDefault();
+      // shift key or right click for stroke
+      const picker = evt.shiftKey || evt.button === 2 ? 'stroke' : 'fill';
+      let color = this.$strip.currentItem.dataset.rgb;
+      // Webkit-based browsers returned 'initial' here for no stroke
+      if (color === 'none' || color === 'transparent' || color === 'initial') {
+        color = 'none';
+      }
+      const paletteEvent = new CustomEvent('change', {detail: {picker, color}, bubbles: false});
+      this.dispatchEvent(paletteEvent);
     });
   }
 }

src/editor/svgedit.css

@@ -685,11 +685,13 @@ input[type=text] {
 #tools_bottom {
   position: fixed;
   bottom: 0;
-  width: 100%;
-  height: 40px;
+  left: 40px;
+  right: 20px;
   display: flex;
   flex-flow: row nowrap;
   overflow-x: auto;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .dropdown li.tool_button {

src/editor/svgedit.js

@@ -3778,6 +3778,20 @@ editor.init = () => {
     updateWireFrame();
   };
 
+  const handlePalette = (e) => {
+    e.preventDefault();
+    // shift key or right click for stroke
+    const {picker, color} = e.detail;
+    // Webkit-based browsers returned 'initial' here for no stroke
+    const paint = color === 'none' ? new $.jGraduate.Paint() : new $.jGraduate.Paint({alpha: 100, solidColor: color.substr(1)});
+    paintBox[picker].setPaint(paint);
+    svgCanvas.setColor(picker, color);
+    if (color !== 'none' && svgCanvas.getPaintOpacity(picker) !== 1) {
+      svgCanvas.setPaintOpacity(picker, 1.0);
+    }
+    updateToolButtonState();
+  };
+
   $('#svg_docprops_container, #svg_prefs_container').draggable({
     cancel: 'button,fieldset',
     containment: 'window'
@@ -4152,8 +4166,8 @@ editor.init = () => {
       const cur = curConfig[type === 'fill' ? 'initFill' : 'initStroke'];
       // set up gradients to be used for the buttons
       const svgdocbox = new DOMParser().parseFromString(
-        `<svg xmlns="http://www.w3.org/2000/svg">
-          <rect width="16.5" height="16.5"
+        `<svg xmlns="http://www.w3.org/2000/svg" width="16.5" height="16.5">
+          <rect
             fill="#${cur.color}" opacity="${cur.opacity}"/>
           <defs><linearGradient id="gradbox_${PaintBox.ctr++}"/></defs>
         </svg>`,
@@ -4681,6 +4695,7 @@ editor.init = () => {
 
     $id('tool_bold').addEventListener('click', clickBold);
     $id('tool_italic').addEventListener('click', clickItalic);
+    $id('palette').addEventListener('change', handlePalette);
 
     const toolButtons = [
       {sel: '#tool_clear', fn: clickClear, evt: 'mouseup', key: ['N', true]},