Merge branch 'V7-preview' into V7-preview

src/editor/ConfigObj.js

@@ -61,7 +61,6 @@ export default class ConfigObj {
       * @property {boolean} [avoidClientSideOpen=false] Used by `ext-server_opensave.js`; set to `true` if you wish to always open from the server and not only as fallback when FileReader client support is lacking
       * @property {string[]} [extensions=[]] Extensions to load on startup. Use an array in `setConfig` and comma separated file names in the URL. Extension names must begin with "ext-". Note that as of version 2.7, paths containing "/", "\", or ":", are disallowed for security reasons. Although previous versions of this list would entirely override the default list, as of version 2.7, the defaults will always be added to this explicit list unless the configuration `noDefaultExtensions` is included. See {@link module:SVGEditor~defaultExtensions}.
       * @property {string[]} [allowedOrigins=[]] Used by `ext-xdomain-messaging.js` to indicate which origins are permitted for cross-domain messaging (e.g., between the embedded editor and main editor code). Besides explicit domains, one might add '*' to allow all domains (not recommended for privacy/data integrity of your user's content!), `window.location.origin` for allowing the same origin (should be safe if you trust all apps on your domain), 'null' to allow `file:///` URL usage
-      * @property {null|PlainObject} [colorPickerCSS=null] Object of CSS properties mapped to values (for jQuery) to apply to the color picker. See {@link http://api.jquery.com/css/#css-properties}. A `null` value (the default) will cause the CSS to default to `left` with a position equal to that of the `fill_color` or `stroke_color` element minus 140, and a `bottom` equal to 40
       * @property {string} [paramurl] This was available via URL only. Allowed an un-encoded URL within the query string (use "url" or "source" with a data: URI instead)
       * @property {Float} [canvas_expansion=3] The minimum area visible outside the canvas, as a multiple of the image dimensions. The larger the number, the more one can scroll outside the canvas.
       * @property {PlainObject} [initFill] Init fill properties
@@ -89,7 +88,6 @@ export default class ConfigObj {
       * @property {boolean} [showGrid=false] Set by `ext-grid.js`; determines whether or not to show the grid by default
       * @property {boolean} [show_outside_canvas=true] Defines whether or not elements outside the canvas should be visible. Set and used in `svgcanvas.js`.
       * @property {boolean} [selectNew=true] If true, will replace the selection with the current element and automatically select element objects (when not in "path" mode) after they are created, showing their grips (v2.6). Set and used in `svgcanvas.js` (`mouseUp`).
-      * @todo Some others could be preferences as well (e.g., preventing URL changing of extensions, defaultExtensions, stylesheets, colorPickerCSS); Change the following to preferences and add pref controls where missing to the UI (e.g., `canvas_expansion`, `initFill`, `initStroke`, `text`, `initOpacity`, `dimensions`, `initTool`, `wireframe`, `showlayers`, `gridSnapping`, `gridColor`, `baseUnit`, `snappingStep`, `showRulers`, `exportWindowType`, `showGrid`, `show_outside_canvas`, `selectNew`)?
      */
     this.defaultConfig = {
       canvasName: 'default',
@@ -109,7 +107,6 @@ export default class ConfigObj {
         font_family: 'serif'
       },
       initOpacity: 1,
-      colorPickerCSS: null, // Defaults to 'left' with a position equal to that of the fill_color or stroke_color element minus 140, and a 'bottom' equal to 40
       initTool: 'select',
       exportWindowType: 'new', // 'same' (todo: also support 'download')
       wireframe: false,

src/editor/components/PaintBox.js

@@ -0,0 +1,160 @@
+/* globals $ */
+/**
+ *
+ */
+class PaintBox {
+  /**
+     * @param {string|Element|external:jQuery} container
+     * @param {"fill"} type
+     * @param {string} color
+     * @param {number} 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">
+          <rect
+            fill="#${color}" opacity="${opacity}" width="22" height="22"/>
+          <defs><linearGradient id="gradbox_${PaintBox.ctr++}"/></defs>
+        </svg>`,
+      'text/xml'
+    );
+
+    let docElem = svgdocbox.documentElement;
+    docElem = container.appendChild(document.importNode(docElem, true));
+
+    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;
+  }
+
+  /**
+     * @param {module:jGraduate~Paint} paint
+     * @returns {void}
+     */
+  setPaint (paint) {
+    this.paint = paint;
+
+    const ptype = paint.type;
+    const opac = paint.alpha / 100;
+
+    let fillAttr = 'none';
+    switch (ptype) {
+    case 'solidColor':
+      fillAttr = (paint[ptype] !== 'none') ? '#' + paint[ptype] : paint[ptype];
+      break;
+    case 'linearGradient':
+    case 'radialGradient': {
+      this.grad.remove();
+      this.grad = this.defs.appendChild(paint[ptype]);
+      const id = this.grad.id = 'gradbox_' + this.type;
+      fillAttr = 'url(#' + id + ')';
+      break;
+    }
+    }
+
+    this.rect.setAttribute('fill', fillAttr);
+    this.rect.setAttribute('opacity', opac);
+  }
+  /**
+   * @param {PlainObject} svgCanvas
+  * @param {string} color
+  * @param {Float} opac
+  * @param {string} type
+  * @returns {module:jGraduate~Paint}
+  */
+  static getPaint (svgCanvas, color, opac, type) {
+    // update the editor's fill paint
+    const opts = {alpha: opac};
+    if (color.startsWith('url(#')) {
+      let refElem = svgCanvas.getRefElem(color);
+      refElem = (refElem) ? refElem.cloneNode(true) : $('#' + type + '_color defs *')[0];
+      opts[refElem.tagName] = refElem;
+    } else if (color.startsWith('#')) {
+      opts.solidColor = color.substr(1);
+    } else {
+      opts.solidColor = 'none';
+    }
+    return new $.jGraduate.Paint(opts);
+  }
+
+  /**
+     * @param {PlainObject} svgcanvas
+     * @param {PlainObject} selectedElement
+     * @returns {any}
+     */
+  update (svgcanvas, selectedElement) {
+    if (!selectedElement) { return null; }
+
+    const {type} = this;
+    switch (selectedElement.tagName) {
+    case 'use':
+    case 'image':
+    case 'foreignObject':
+      // These elements don't have fill or stroke, so don't change
+      // the current value
+      return null;
+    case 'g':
+    case 'a': {
+      const childs = selectedElement.getElementsByTagName('*');
+
+      let gPaint = null;
+      for (let i = 0, len = childs.length; i < len; i++) {
+        const elem = childs[i];
+        const p = elem.getAttribute(type);
+        if (i === 0) {
+          gPaint = p;
+        } else if (gPaint !== p) {
+          gPaint = null;
+          break;
+        }
+      }
+
+      if (gPaint === null) {
+        // No common color, don't update anything
+        this._paintColor = null;
+        return null;
+      }
+      this._paintColor = gPaint;
+      this._paintOpacity = 1;
+      break;
+    } default: {
+      this._paintOpacity = Number.parseFloat(selectedElement.getAttribute(type + '-opacity'));
+      if (Number.isNaN(this._paintOpacity)) {
+        this._paintOpacity = 1.0;
+      }
+
+      const defColor = type === 'fill' ? 'black' : 'none';
+      this._paintColor = selectedElement.getAttribute(type) || defColor;
+    }
+    }
+
+    this._paintOpacity *= 100;
+
+    const paint = PaintBox.getPaint(svgcanvas, this._paintColor, this._paintOpacity, type);
+    // update the rect inside #fill_color/#stroke_color
+    this.setPaint(paint);
+    return (paint);
+  }
+
+  /**
+     * @returns {void}
+     */
+  prep () {
+    const ptype = this.paint.type;
+
+    switch (ptype) {
+    case 'linearGradient':
+    case 'radialGradient': {
+      const paint = new $.jGraduate.Paint({copy: this.paint});
+      this.setPaint(this.type, paint);
+      break;
+    }
+    }
+  }
+}
+PaintBox.ctr = 0;
+
+export default PaintBox;

src/editor/components/index.js

@@ -7,3 +7,4 @@ import './seSpinInput.js';
 import './sePalette.js';
 import './seMenu.js';
 import './seMenuItem.js';
+import './seColorPicker.js';

src/editor/components/jgraduate/css/jPicker.css

@@ -0,0 +1,256 @@
+.jPicker .Icon {
+    display: inline-block;
+    height: 24px;
+    position: relative;
+    text-align: left;
+    width: 25px
+}
+
+.jPicker .Icon span.Color, .jPicker .Icon span.Alpha {
+    background-position: 2px 2px;
+    display: block;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%
+}
+
+.jPicker .Icon span.Image {
+    background-repeat: no-repeat;
+    cursor: pointer;
+    display: block;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%
+}
+
+.jPicker.Container {
+    z-index: 10
+}
+
+table.jPicker {
+    background-color: #efefef;
+    border: 1px outset #666;
+    font-family: Arial, Helvetica, Sans-Serif;
+    font-size: 12px!important;
+    margin: 0;
+    padding: 5px;
+    width: 545px;
+    z-index: 20
+}
+
+.jPicker .Move {
+    background-color: #ddd;
+    border-color: #fff #666 #666 #fff;
+    border-style: solid;
+    border-width: 1px;
+    cursor: move;
+    height: 12px;
+    padding: 0
+}
+
+.jPicker .Title {
+    font-size: 11px!important;
+    font-weight: bold;
+    margin: -2px 0 0 0;
+    padding: 0;
+    text-align: center;
+    width: 100%
+}
+
+.jPicker div.Map {
+    border-bottom: 2px solid #fff;
+    border-left: 2px solid #9a9a9a;
+    border-right: 2px solid #fff;
+    border-top: 2px solid #9a9a9a;
+    cursor: crosshair;
+    height: 260px;
+    margin: 0 5px 0 5px;
+    overflow: hidden;
+    padding: 0;
+    position: relative;
+    width: 260px
+}
+
+.jPicker div[class="Map"] {
+    height: 256px;
+    width: 256px
+}
+
+.jPicker div.Bar {
+    border-bottom: 2px solid #fff;
+    border-left: 2px solid #9a9a9a;
+    border-right: 2px solid #fff;
+    border-top: 2px solid #9a9a9a;
+    cursor: n-resize;
+    height: 260px;
+    margin: 12px 10px 0 5px;
+    overflow: hidden;
+    padding: 0;
+    position: relative;
+    width: 24px
+}
+
+.jPicker div[class="Bar"] {
+    height: 256px;
+    width: 20px
+}
+
+.jPicker .Map .Map1, .jPicker .Map .Map2, .jPicker .Map .Map3, .jPicker .Bar .Map1, .jPicker .Bar .Map2, .jPicker .Bar .Map3, .jPicker .Bar .Map4, .jPicker .Bar .Map5, .jPicker .Bar .Map6 {
+    background-color: transparent;
+    background-image: none;
+    display: block;
+    left: 0;
+    position: absolute;
+    top: 0
+}
+
+.jPicker .Map .Map1, .jPicker .Map .Map2, .jPicker .Map .Map3 {
+    height: 2596px;
+    width: 256px
+}
+
+.jPicker .Bar .Map1, .jPicker .Bar .Map2, .jPicker .Bar .Map3, .jPicker .Bar .Map4 {
+    height: 3896px;
+    width: 20px
+}
+
+.jPicker .Bar .Map5, .jPicker .Bar .Map6 {
+    height: 256px;
+    width: 20px
+}
+
+.jPicker .Map .Map1, .jPicker .Map .Map2, .jPicker .Bar .Map6 {
+    background-repeat: no-repeat
+}
+
+.jPicker .Map .Map3, .jPicker .Bar .Map5 {
+    background-repeat: repeat
+}
+
+.jPicker .Bar .Map1, .jPicker .Bar .Map2, .jPicker .Bar .Map3, .jPicker .Bar .Map4 {
+    background-repeat: repeat-x
+}
+
+.jPicker .Map .Arrow {
+    display: block;
+    position: absolute
+}
+
+.jPicker .Bar .Arrow {
+    display: block;
+    left: 0;
+    position: absolute
+}
+
+.jPicker .Preview {
+    font-size: 9px;
+    text-align: center
+}
+
+.jPicker .Preview div {
+    border: 2px inset #eee;
+    height: 62px;
+    margin: 0 auto;
+    padding: 0;
+    width: 62px
+}
+
+.jPicker .Preview div span {
+    border: 1px solid #000;
+    display: block;
+    height: 30px;
+    margin: 0 auto;
+    padding: 0;
+    width: 60px
+}
+
+.jPicker .Preview .Active {
+    border-bottom-width: 0
+}
+
+.jPicker .Preview .Current {
+    border-top-width: 0;
+    cursor: pointer
+}
+
+.jPicker .Button {
+    text-align: center;
+    width: 115px
+}
+
+.jPicker .Button input {
+    width: 100px
+}
+
+.jPicker .Button .Ok {
+    margin: 12px 0 5px 0
+}
+
+.jPicker td.Radio {
+    margin: 0;
+    padding: 0;
+    width: 31px
+}
+
+.jPicker td.Radio input {
+    margin: 0 5px 0 0;
+    padding: 0
+}
+
+.jPicker td.Text {
+    font-size: 12px!important;
+    height: 22px;
+    margin: 0;
+    padding: 0;
+    text-align: left;
+    width: 70px
+}
+
+.jPicker tr.Hex td.Text {
+    width: 100px
+}
+
+.jPicker td.Text input {
+    background-color: #fff;
+    border: 1px inset #aaa;
+    height: 19px;
+    margin: 0 0 0 5px;
+    text-align: left;
+    width: 30px
+}
+
+.jPicker td[class="Text"] input {
+    height: 15px
+}
+
+.jPicker tr.Hex td.Text input.Hex {
+    width: 50px
+}
+
+.jPicker tr.Hex td.Text input.AHex {
+    width: 20px
+}
+
+.jPicker .Grid {
+    text-align: center;
+    width: 114px
+}
+
+.jPicker .Grid span.QuickColor {
+    border: 1px inset #aaa;
+    cursor: pointer;
+    display: inline-block;
+    height: 15px;
+    line-height: 15px;
+    margin: 0;
+    padding: 0;
+    width: 19px
+}
+
+.jPicker .Grid span[class="QuickColor"] {
+    width: 17px
+}

src/editor/components/jgraduate/jQuery.jGraduate.js

@@ -17,6 +17,11 @@
  * @example $.jGraduate.Paint({hex: '#rrggbb', linearGradient: o}); // throws an exception?
 */
 
+/**
+ * @todo JFH: This jQuery plugin was adapted to work within a Web Component.
+ * We have to rewrite it as a pure webcomponent.
+*/
+
 /* eslint-disable jsdoc/require-property */
 /**
   * The jQuery namespace.
@@ -273,6 +278,9 @@ export default function jQueryPluginJGraduate ($) {
         $settings = $.extend(true, {}, $.fn.jGraduateDefaults, options || {}),
         id = $this.attr('id'),
         idref = '#' + $this.attr('id') + ' ';
+      // JFH !!!!!
+      const $shadowRoot = this.parentNode;
+      const $wc = (selector) => $($shadowRoot.querySelectorAll(selector));
 
       if (!idref) {
         /* await */ $.alert('Container element must have an id attribute to maintain unique id strings for sub-elements.');
@@ -332,8 +340,9 @@ export default function jQueryPluginJGraduate ($) {
         '<div class="jGraduate_LightBox"></div>' +
         '<div id="' + id + '_jGraduate_stopPicker" class="jGraduate_stopPicker"></div>'
       );
-      const colPicker = $(idref + '> .jGraduate_colPick');
-      const gradPicker = $(idref + '> .jGraduate_gradPick');
+      /* JFH !!!! */
+      const colPicker = $wc(idref + '> .jGraduate_colPick');
+      const gradPicker = $wc(idref + '> .jGraduate_gradPick');
 
       gradPicker.html(
         '<div id="' + id + '_jGraduate_Swatch" class="jGraduate_Swatch">' +
@@ -440,9 +449,9 @@ export default function jQueryPluginJGraduate ($) {
       const attrInput = {};
 
       const SLIDERW = 145;
-      $('.jGraduate_SliderBar').width(SLIDERW);
-
-      const container = $('#' + id + '_jGraduate_GradContainer')[0];
+      $wc('.jGraduate_SliderBar').width(SLIDERW);
+      // JFH !!!!!!
+      const container = $wc('#' + id + '_jGraduate_GradContainer')[0];
 
       const svg = mkElem('svg', {
         id: id + '_jgraduate_svg',
@@ -472,7 +481,7 @@ export default function jQueryPluginJGraduate ($) {
       case 'linearGradient':
         if (!isSolid) {
           curGradient.id = id + '_lg_jgraduate_grad';
-          grad = curGradient = svg.appendChild(curGradient); // .cloneNode(true));
+          grad = curGradient = svg.appendChild(curGradient);
         }
         mkElem('radialGradient', {
           id: id + '_rg_jgraduate_grad'
@@ -482,7 +491,7 @@ export default function jQueryPluginJGraduate ($) {
       case 'radialGradient':
         if (!isSolid) {
           curGradient.id = id + '_rg_jgraduate_grad';
-          grad = curGradient = svg.appendChild(curGradient); // .cloneNode(true));
+          grad = curGradient = svg.appendChild(curGradient);
         }
         mkElem('linearGradient', {
           id: id + '_lg_jgraduate_grad'
@@ -491,7 +500,8 @@ export default function jQueryPluginJGraduate ($) {
 
       let stopGroup; // eslint-disable-line prefer-const
       if (isSolid) {
-        grad = curGradient = $('#' + id + '_lg_jgraduate_grad')[0];
+        // JFH !!!!!!!!
+        grad = curGradient = $wc('#' + id + '_lg_jgraduate_grad')[0];
         color = $this.paint[curType];
         mkStop(0, '#' + color, 1);
 
@@ -578,18 +588,6 @@ export default function jQueryPluginJGraduate ($) {
 
       focusCoord[0].id = id + '_jGraduate_focusCoord';
 
-      // const coords = $(idref + ' .grad_coord');
-
-      // $(container).hover(function () {
-      //   coords.animate({
-      //     opacity: 1
-      //   }, 500);
-      // }, function () {
-      //   coords.animate({
-      //     opacity: .2
-      //   }, 500);
-      // });
-
       let showFocus;
       $.each(['x1', 'y1', 'x2', 'y2', 'cx', 'cy', 'fx', 'fy'], function (i, attr) {
         const isRadial = isNaN(attr[1]);
@@ -606,7 +604,7 @@ export default function jQueryPluginJGraduate ($) {
           }
         }
 
-        attrInput[attr] = $('#' + id + '_jGraduate_' + attr)
+        attrInput[attr] = $wc('#' + id + '_jGraduate_' + attr)
           .val(attrval)
           .change(function () {
             // TODO: Support values < 0 and > 1 (zoomable preview?)
@@ -683,14 +681,14 @@ export default function jQueryPluginJGraduate ($) {
           e.preventDefault();
           return false;
         }).data('stop', stop).data('bg', pathbg).dblclick(function () {
-          $('div.jGraduate_LightBox').show();
+          $wc('div.jGraduate_LightBox').show();
           const colorhandle = this;
           let stopOpacity = Number(stop.getAttribute('stop-opacity')) || 1;
           let stopColor = stop.getAttribute('stop-color') || 1;
           let thisAlpha = (Number.parseFloat(stopOpacity) * 255).toString(16);
           while (thisAlpha.length < 2) { thisAlpha = '0' + thisAlpha; }
           colr = stopColor.substr(1) + thisAlpha;
-          $('#' + id + '_jGraduate_stopPicker').css({left: 100, bottom: 15}).jPicker({
+          $wc('#' + id + '_jGraduate_stopPicker').css({left: 100, bottom: 15}).jPicker({
             window: {title: 'Pick the start color and opacity for the gradient'},
             images: {clientPath: $settings.images.clientPath},
             color: {active: colr, alphaSupport: true}
@@ -701,11 +699,11 @@ export default function jQueryPluginJGraduate ($) {
             colorhandle.setAttribute('fill-opacity', stopOpacity);
             stop.setAttribute('stop-color', stopColor);
             stop.setAttribute('stop-opacity', stopOpacity);
-            $('div.jGraduate_LightBox').hide();
-            $('#' + id + '_jGraduate_stopPicker').hide();
+            $wc('div.jGraduate_LightBox').hide();
+            $wc('#' + id + '_jGraduate_stopPicker').hide();
           }, null, function () {
-            $('div.jGraduate_LightBox').hide();
-            $('#' + id + '_jGraduate_stopPicker').hide();
+            $wc('div.jGraduate_LightBox').hide();
+            $wc('#' + id + '_jGraduate_stopPicker').hide();
           });
         });
 
@@ -735,13 +733,13 @@ export default function jQueryPluginJGraduate ($) {
       */
       function remStop () {
         delStop.setAttribute('display', 'none');
-        const path = $(curStop);
+        const path = $wc(curStop);
         const stop = path.data('stop');
         const bg = path.data('bg');
         $([curStop, stop, bg]).remove();
       }
 
-      const stopMakerDiv = $('#' + id + '_jGraduate_StopSlider');
+      const stopMakerDiv = $wc('#' + id + '_jGraduate_StopSlider');
 
       let stops, curStop, drag;
 
@@ -761,9 +759,6 @@ export default function jQueryPluginJGraduate ($) {
         if (curStop) curStop.setAttribute('stroke', '#000');
         item.setAttribute('stroke', 'blue');
         curStop = item;
-        //   stops = $('stop');
-        //   opac_select.val(curStop.attr('fill-opacity') || 1);
-        //   root.append(delStop);
       }
 
       let stopOffset;
@@ -792,7 +787,7 @@ export default function jQueryPluginJGraduate ($) {
         const rot = angle ? 'rotate(' + angle + ',' + cX + ',' + cY + ') ' : '';
         if (scaleX === 1 && scaleY === 1) {
           curGradient.removeAttribute('gradientTransform');
-          // $('#ang').addClass('dis');
+          // $wc('#ang').addClass('dis');
         } else {
           const x = -cX * (scaleX - 1);
           const y = -cY * (scaleY - 1);
@@ -801,7 +796,7 @@ export default function jQueryPluginJGraduate ($) {
             rot + 'translate(' + x + ',' + y + ') scale(' +
               scaleX + ',' + scaleY + ')'
           );
-          // $('#ang').removeClass('dis');
+          // $wc('#ang').removeClass('dis');
         }
       }
 
@@ -981,7 +976,7 @@ export default function jQueryPluginJGraduate ($) {
 
       previewRect.setAttribute('fill-opacity', gradalpha / 100);
 
-      $('#' + id + ' div.grad_coord').mousedown(function (evt) {
+      $wc('#' + id + ' div.grad_coord').mousedown(function (evt) {
         evt.preventDefault();
         draggingCoord = $(this);
         // const sPos = draggingCoord.offset();
@@ -990,13 +985,13 @@ export default function jQueryPluginJGraduate ($) {
       });
 
       // bind GUI elements
-      $('#' + id + '_jGraduate_Ok').bind('click', function () {
+      $wc('#' + id + '_jGraduate_Ok').bind('click', function () {
         $this.paint.type = curType;
         $this.paint[curType] = curGradient.cloneNode(true);
         $this.paint.solidColor = null;
         okClicked();
       });
-      $('#' + id + '_jGraduate_Cancel').bind('click', function (paint) {
+      $wc('#' + id + '_jGraduate_Cancel').bind('click', function (paint) {
         cancelClicked();
       });
 
@@ -1010,11 +1005,11 @@ export default function jQueryPluginJGraduate ($) {
         }
       }
 
-      $('#' + id + '_jGraduate_match_ctr')[0].checked = !showFocus;
+      $wc('#' + id + '_jGraduate_match_ctr')[0].checked = !showFocus;
 
       let lastfx, lastfy;
 
-      $('#' + id + '_jGraduate_match_ctr').change(function () {
+      $wc('#' + id + '_jGraduate_match_ctr').change(function () {
         showFocus = !this.checked;
         focusCoord.toggle(showFocus);
         attrInput.fx.val('');
@@ -1261,28 +1256,30 @@ export default function jQueryPluginJGraduate ($) {
         null,
         function () { cancelClicked(); }
       );
-
-      const tabs = $(idref + ' .jGraduate_tabs li');
+      // JFH !!!!
+      // const tabs = $wc(idref + ' .jGraduate_tabs li');
+      const tabs = $wc('.jGraduate_tabs li');
       tabs.click(function () {
         tabs.removeClass('jGraduate_tab_current');
         $(this).addClass('jGraduate_tab_current');
-        $(idref + ' > div').hide();
+        $wc(idref + ' > div').hide();
         const type = $(this).attr('data-type');
-        /* const container = */ $(idref + ' .jGraduate_gradPick').show();
+        $wc(idref + ' .jGraduate_gradPick').show();
         if (type === 'rg' || type === 'lg') {
           // Show/hide appropriate fields
-          $('.jGraduate_' + type + '_field').show();
-          $('.jGraduate_' + (type === 'lg' ? 'rg' : 'lg') + '_field').hide();
+          $wc('.jGraduate_' + type + '_field').show();
+          $wc('.jGraduate_' + (type === 'lg' ? 'rg' : 'lg') + '_field').hide();
 
-          $('#' + id + '_jgraduate_rect')[0].setAttribute('fill', 'url(#' + id + '_' + type + '_jgraduate_grad)');
+          $wc('#' + id + '_jgraduate_rect')[0]
+            .setAttribute('fill', 'url(#' + id + '_' + type + '_jgraduate_grad)');
 
           // Copy stops
 
           curType = type === 'lg' ? 'linearGradient' : 'radialGradient';
 
-          $('#' + id + '_jGraduate_OpacInput').val($this.paint.alpha).change();
+          $wc('#' + id + '_jGraduate_OpacInput').val($this.paint.alpha).change();
 
-          const newGrad = $('#' + id + '_' + type + '_jgraduate_grad')[0];
+          const newGrad = $wc('#' + id + '_' + type + '_jgraduate_grad')[0];
 
           if (curGradient !== newGrad) {
             const curStops = $(curGradient).find('stop');
@@ -1292,27 +1289,27 @@ export default function jQueryPluginJGraduate ($) {
             curGradient.setAttribute('spreadMethod', sm);
           }
           showFocus = type === 'rg' && curGradient.getAttribute('fx') !== null && !(cx === fx && cy === fy);
-          $('#' + id + '_jGraduate_focusCoord').toggle(showFocus);
+          $wc('#' + id + '_jGraduate_focusCoord').toggle(showFocus);
           if (showFocus) {
-            $('#' + id + '_jGraduate_match_ctr')[0].checked = false;
+            $wc('#' + id + '_jGraduate_match_ctr')[0].checked = false;
           }
         } else {
-          $(idref + ' .jGraduate_gradPick').hide();
-          $(idref + ' .jGraduate_colPick').show();
+          $wc(idref + ' .jGraduate_gradPick').hide();
+          $wc(idref + ' .jGraduate_colPick').show();
         }
       });
-      $(idref + ' > div').hide();
+      $wc(idref + ' > div').hide();
       tabs.removeClass('jGraduate_tab_current');
       let tab;
       switch ($this.paint.type) {
       case 'linearGradient':
-        tab = $(idref + ' .jGraduate_tab_lingrad');
+        tab = $wc(idref + ' .jGraduate_tab_lingrad');
         break;
       case 'radialGradient':
-        tab = $(idref + ' .jGraduate_tab_radgrad');
+        tab = $wc(idref + ' .jGraduate_tab_radgrad');
         break;
       default:
-        tab = $(idref + ' .jGraduate_tab_color');
+        tab = $wc(idref + ' .jGraduate_tab_color');
         break;
       }
       $this.show();

src/editor/components/seColorPicker.js

@@ -0,0 +1,209 @@
+/* globals jQuery */
+import jQueryPluginJGraduate from './jgraduate/jQuery.jGraduate.js';
+import jQueryPluginJPicker from './jgraduate/jQuery.jPicker.js';
+import PaintBox from './PaintBox.js';
+
+const $ = [
+  jQueryPluginJGraduate,
+  jQueryPluginJPicker
+].reduce((jq, func) => func(jq), jQuery);
+
+const template = document.createElement('template');
+template.innerHTML = `
+  <style>
+  @import "./components/jgraduate/css/jGraduate.css";
+  @import "./components/jgraduate/css/jPicker.css";
+  #logo {
+    height: 22px;
+    width: 22px;
+  }
+  #block {
+    height: 22px;
+    width: 22px;
+    float: right;
+    background-color: darkgrey;
+  }
+  #picker {
+    background: #f0f0f0;
+    height: 26px;
+    line-height: 26px;
+    border-radius: 3px;
+    width: 52px;
+    display: flex;
+    align-items: center;
+    margin-right: 4px;
+    justify-content: space-evenly;
+  }
+  #color_picker {
+    position: absolute;
+    bottom: 40px;
+  }
+  </style>
+  <div id="picker">
+      <img src="./images/logo.svg" alt="icon" id="logo">
+      <label for="color" title="Change xxx color" id="label"></label>
+      <div id="block">
+      </div>
+  </div>
+  <!-- hidden div -->
+  <div id="color_picker"></div>
+`;
+/**
+ * @class SeColorPicker
+ */
+export class SeColorPicker extends HTMLElement {
+  /**
+    * @function constructor
+    */
+  constructor () {
+    super();
+    // create the shadowDom and insert the template
+    this._shadowRoot = this.attachShadow({mode: 'open'});
+    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');
+  }
+  /**
+   * @function observedAttributes
+   * @returns {any} observed
+   */
+  static get observedAttributes () {
+    return ['label', 'src', 'type'];
+  }
+  /**
+   * @function attributeChangedCallback
+   * @param {string} name
+   * @param {string} oldValue
+   * @param {string} newValue
+   * @returns {void}
+   */
+  attributeChangedCallback (name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    switch (name) {
+    case 'src':
+      this.$logo.setAttribute('src', newValue);
+      break;
+    case 'label':
+      this.setAttribute('title', newValue);
+      break;
+    case 'type':
+      this.$label.setAttribute('title', `Pick a ${newValue} Paint and Opacity`);
+      break;
+    default:
+      // eslint-disable-next-line no-console
+      console.error(`unknown attribute: ${name}`);
+      break;
+    }
+  }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get label () {
+    return this.$label.getAttribute('title');
+  }
+
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set label (value) {
+    this.setAttribute('label', value);
+  }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get type () {
+    return this.getAttribute('type');
+  }
+
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set type (value) {
+    this.setAttribute('type', value);
+  }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get src () {
+    return this.getAttribute('src');
+  }
+
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set src (value) {
+    this.setAttribute('src', value);
+  }
+
+  /**
+   * @param {PlainObject} svgCanvas
+   * @param {PlainObject} selectedElement
+   * @param {bool} apply
+   * @returns {void}
+   */
+  update (svgCanvas, selectedElement, apply) {
+    const paint = this.paintBox.update(svgCanvas, 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);
+  }
+
+  /**
+   * @function connectedCallback
+   * @returns {void}
+   */
+  connectedCallback () {
+    this.paintBox = new PaintBox(this.$block, this.type);
+    let {paint} = this.paintBox;
+    $(this.$picker).click(() => {
+      $(this.$color_picker)
+        .draggable({
+          cancel: '.jGraduate_tabs, .jGraduate_colPick, .jGraduate_gradPick, .jPicker',
+          containment: 'window'
+        })
+        .jGraduate(
+          {
+            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);
+            $('#color_picker').hide();
+          },
+          () => {
+            $('#color_picker').hide();
+          }
+        );
+    });
+  }
+}
+
+// Register
+customElements.define('se-colorpicker', SeColorPicker);

src/editor/index.html

@@ -340,20 +340,8 @@
           <div value="layer">Fit to layer content</div>
           <div value="content">Fit to all content</div>
         </se-dropdown>
-        <div id="tool_fill">
-          <label for="fill_color" title="Change fill color"></label>
-          <div class="color_block">
-            <div id="fill_bg"></div>
-            <div id="fill_color" class="color_block"></div>
-          </div>
-        </div> <!-- tool_fill -->
-        <div id="tool_stroke">
-          <label title="Change stroke color"></label>
-          <div class="color_block">
-            <div id="stroke_bg"></div>
-            <div id="stroke_color" class="color_block" title="Change stroke color" src="./images/fill.svg"></div>
-          </div>
-        </div>
+        <se-colorpicker id="fill_color" src="./images/fill.svg" title="Change fill color" type="fill"></se-colorpicker>
+        <se-colorpicker id="stroke_color" src="./images/stroke.svg" title="Change stroke color" type="stroke"></se-colorpicker>
         <se-spin-input id="stroke_width" min=0 max=99 step=1 title="Change stroke width by 1" label=""></se-spin-input>
         <label class="stroke_tool">
           <select id="stroke_style" title="Change stroke dash style">
@@ -410,8 +398,6 @@
           <li class="push_button" id="tool_posbottom" title="Align Bottom"></li>
         </ul>
       </div>
-      <!-- hidden divs -->
-      <div id="color_picker"></div>
     </div>
     <div id="dialog_box">
       <div class="overlay"></div>

src/editor/index.js

@@ -58,7 +58,6 @@ svgEditor.setConfig({
   //   opacity: 1
   // },
   // initOpacity: 1,
-  // colorPickerCSS: null,
   // initTool: 'select',
   // exportWindowType: 'new', // 'same'
   // wireframe: false,

src/editor/jgraduate/css/jPicker.css

@@ -1 +0,0 @@
-.jPicker .Icon{display:inline-block;height:24px;position:relative;text-align:left;width:25px}.jPicker .Icon span.Color,.jPicker .Icon span.Alpha{background-position:2px 2px;display:block;height:100%;left:0;position:absolute;top:0;width:100%}.jPicker .Icon span.Image{background-repeat:no-repeat;cursor:pointer;display:block;height:100%;left:0;position:absolute;top:0;width:100%}.jPicker.Container{z-index:10}table.jPicker{background-color:#efefef;border:1px outset #666;font-family:Arial,Helvetica,Sans-Serif;font-size:12px!important;margin:0;padding:5px;width:545px;z-index:20}.jPicker .Move{background-color:#ddd;border-color:#fff #666 #666 #fff;border-style:solid;border-width:1px;cursor:move;height:12px;padding:0}.jPicker .Title{font-size:11px!important;font-weight:bold;margin:-2px 0 0 0;padding:0;text-align:center;width:100%}.jPicker div.Map{border-bottom:2px solid #fff;border-left:2px solid #9a9a9a;border-right:2px solid #fff;border-top:2px solid #9a9a9a;cursor:crosshair;height:260px;margin:0 5px 0 5px;overflow:hidden;padding:0;position:relative;width:260px}.jPicker div[class="Map"]{height:256px;width:256px}.jPicker div.Bar{border-bottom:2px solid #fff;border-left:2px solid #9a9a9a;border-right:2px solid #fff;border-top:2px solid #9a9a9a;cursor:n-resize;height:260px;margin:12px 10px 0 5px;overflow:hidden;padding:0;position:relative;width:24px}.jPicker div[class="Bar"]{height:256px;width:20px}.jPicker .Map .Map1,.jPicker .Map .Map2,.jPicker .Map .Map3,.jPicker .Bar .Map1,.jPicker .Bar .Map2,.jPicker .Bar .Map3,.jPicker .Bar .Map4,.jPicker .Bar .Map5,.jPicker .Bar .Map6{background-color:transparent;background-image:none;display:block;left:0;position:absolute;top:0}.jPicker .Map .Map1,.jPicker .Map .Map2,.jPicker .Map .Map3{height:2596px;width:256px}.jPicker .Bar .Map1,.jPicker .Bar .Map2,.jPicker .Bar .Map3,.jPicker .Bar .Map4{height:3896px;width:20px}.jPicker .Bar .Map5,.jPicker .Bar .Map6{height:256px;width:20px}.jPicker .Map .Map1,.jPicker .Map .Map2,.jPicker .Bar .Map6{background-repeat:no-repeat}.jPicker .Map .Map3,.jPicker .Bar .Map5{background-repeat:repeat}.jPicker .Bar .Map1,.jPicker .Bar .Map2,.jPicker .Bar .Map3,.jPicker .Bar .Map4{background-repeat:repeat-x}.jPicker .Map .Arrow{display:block;position:absolute}.jPicker .Bar .Arrow{display:block;left:0;position:absolute}.jPicker .Preview{font-size:9px;text-align:center}.jPicker .Preview div{border:2px inset #eee;height:62px;margin:0 auto;padding:0;width:62px}.jPicker .Preview div span{border:1px solid #000;display:block;height:30px;margin:0 auto;padding:0;width:60px}.jPicker .Preview .Active{border-bottom-width:0}.jPicker .Preview .Current{border-top-width:0;cursor:pointer}.jPicker .Button{text-align:center;width:115px}.jPicker .Button input{width:100px}.jPicker .Button .Ok{margin:12px 0 5px 0}.jPicker td.Radio{margin:0;padding:0;width:31px}.jPicker td.Radio input{margin:0 5px 0 0;padding:0}.jPicker td.Text{font-size:12px!important;height:22px;margin:0;padding:0;text-align:left;width:70px}.jPicker tr.Hex td.Text{width:100px}.jPicker td.Text input{background-color:#fff;border:1px inset #aaa;height:19px;margin:0 0 0 5px;text-align:left;width:30px}.jPicker td[class="Text"] input{height:15px}.jPicker tr.Hex td.Text input.Hex{width:50px}.jPicker tr.Hex td.Text input.AHex{width:20px}.jPicker .Grid{text-align:center;width:114px}.jPicker .Grid span.QuickColor{border:1px inset #aaa;cursor:pointer;display:inline-block;height:15px;line-height:15px;margin:0;padding:0;width:19px}.jPicker .Grid span[class="QuickColor"]{width:17px}

src/editor/svgedit.css

@@ -1,7 +1,3 @@
-@import "./jgraduate/css/jGraduate.css";
-@import "./jgraduate/css/jPicker.css";
-
-
 body {
   background: #D0D0D0;
 }
@@ -416,31 +412,6 @@ hr {
   margin-top: 5px;
 }
 
-#fill_color,  #stroke_color {
-  height: 16px;
-  width: 16px;
-  border: 1px solid #808080;
-  cursor: pointer;
-  overflow: hidden;
-}
-
-#fill_color,  #stroke_color {
-  height: 16px;
-  width: 16px;
-  border: 1px solid #808080;
-  cursor: pointer;
-  overflow: hidden;
-}
-
-.color_block {
-  top: 0;
-  left: 0;
-}
-
-.color_block svg {
-  display: block;
-}
-
 #tools_left {
   position: absolute;
   border-right: none;
@@ -695,20 +666,12 @@ input[type=text] {
   display: none;
 }
 
-#color_picker {
-  position: absolute;
-  display: none;
-  background: #E8E8E8;
-  height: 350px;
-  z-index: 5;
-}
-
 #tools_bottom {
   position: absolute;
   left: 40px;
   right: 0;
   bottom: 0;
-  height: 40px;
+  height: 33px;
   overflow: visible;
 }
 
@@ -754,10 +717,7 @@ input[type=text] {
 #toggle_stroke_tools:hover {
   background: white;
 }
-.color_tool > * {
-  float: left;
-  margin-right: 5px;
-}
+
 #tool_opacity { right: 0;}
 
 #tool_opacity {
@@ -883,10 +843,6 @@ ul li.current {
   margin-left: 30px;
 }
 
-#bg_blocks .color_block {
-  position: static;
-}
-
 #svg_docprops #svg_docprops_container,
 #svg_prefs #svg_prefs_container {
   position: absolute;

src/editor/svgedit.js

@@ -17,7 +17,6 @@
 */
 
 import './touch.js';
-import {NS} from '../common/namespaces.js';
 import {isChrome, isGecko, isMac} from '../common/browser.js';
 
 // Until we split this into smaller files, this helps distinguish utilities
@@ -31,9 +30,7 @@ import {
 import SvgCanvas from '../svgcanvas/svgcanvas.js';
 
 import jQueryPluginJSHotkeys from './js-hotkeys/jquery.hotkeys.min.js';
-import jQueryPluginJGraduate from './jgraduate/jQuery.jGraduate.js';
 import jQueryPluginContextMenu from './contextmenu/jQuery.contextMenu.js';
-import jQueryPluginJPicker from './jgraduate/jQuery.jPicker.js';
 import jQueryPluginDBox from '../svgcanvas/dbox.js';
 
 import ConfigObj from './ConfigObj.js';
@@ -76,10 +73,7 @@ const editor = {
   setStrings
 };
 
-const $ = [
-  jQueryPluginJSHotkeys, jQueryPluginJGraduate,
-  jQueryPluginContextMenu, jQueryPluginJPicker
-].reduce((jq, func) => func(jq), jQuery);
+const $ = [jQueryPluginJSHotkeys, jQueryPluginContextMenu].reduce((jq, func) => func(jq), jQuery);
 
 const homePage = 'https://github.com/SVG-Edit/svgedit';
 
@@ -357,26 +351,6 @@ editor.init = () => {
     }
   };
 
-  /**
-  * @type {string}
-  */
-  const uaPrefix = (function () {
-    const regex = /^(?:Moz|Webkit|Khtml|O|ms|Icab)(?=[A-Z])/;
-    const someScript = document.getElementsByTagName('script')[0];
-    for (const prop in someScript.style) {
-      if (regex.test(prop)) {
-        // test is faster than match, so it's better to perform
-        // that on the lot and match only when necessary
-        return prop.match(regex)[0];
-      }
-    }
-    // Nothing found so far?
-    if ('WebkitOpacity' in someScript.style) { return 'Webkit'; }
-    if ('KhtmlOpacity' in someScript.style) { return 'Khtml'; }
-
-    return '';
-  }());
-
   /**
   * @name module:SVGEditor.canvas
   * @type {module:svgcanvas.SvgCanvas}
@@ -597,13 +571,11 @@ editor.init = () => {
   const {undoMgr} = svgCanvas;
   const workarea = $('#workarea');
   const canvMenu = document.getElementById('se-cmenu_canvas');
-  const paintBox = {fill: null, stroke: null};
-
-  let exportWindow = null,
-    defaultImageURL = configObj.curConfig.imgPath + 'logo.svg',
-    zoomInIcon = 'crosshair',
-    zoomOutIcon = 'crosshair',
-    uiContext = 'toolbars';
+  let exportWindow = null;
+  let defaultImageURL = configObj.curConfig.imgPath + 'logo.svg';
+  const zoomInIcon = 'crosshair';
+  const zoomOutIcon = 'crosshair';
+  let uiContext = 'toolbars';
 
   // For external openers
   (function () {
@@ -1173,6 +1145,11 @@ editor.init = () => {
     );
   };
 
+  const updateColorpickers = (apply) => {
+    $id('fill_color').update(svgCanvas, selectedElement, apply);
+    $id('stroke_color').update(svgCanvas, selectedElement, apply);
+  };
+
   /**
   * Updates the toolbar (colors, opacity, etc) based on the selected element.
   * This function also updates the opacity and id elements that are in the
@@ -1203,14 +1180,10 @@ editor.init = () => {
         }
 
         $('#stroke_width').val(gWidth === null ? '' : gWidth);
-
-        paintBox.fill.update(true);
-        paintBox.stroke.update(true);
-
+        updateColorpickers(true);
         break;
       } default: {
-        paintBox.fill.update(true);
-        paintBox.stroke.update(true);
+        updateColorpickers(true);
 
         $('#stroke_width').val(selectedElement.getAttribute('stroke-width') || 1);
         $('#stroke_style').val(selectedElement.getAttribute('stroke-dasharray') || 'none');
@@ -1247,9 +1220,6 @@ editor.init = () => {
   * @returns {void}
   */
   const updateWireFrame = () => {
-    // Test support
-    if (supportsNonSS) { return; }
-
     const rule = `
       #workarea.wireframe #svgcontent * {
         stroke-width: ${1 / svgCanvas.getZoom()}px;
@@ -1390,8 +1360,7 @@ editor.init = () => {
 
     // In the event a gradient was flipped:
     if (selectedElement && mode === 'select') {
-      paintBox.fill.update();
-      paintBox.stroke.update();
+      updateColorpickers();
     }
 
     svgCanvas.runExtensions('elementChanged', /** @type {module:svgcanvas.SvgCanvas#event:ext_elementChanged} */ {
@@ -1534,8 +1503,8 @@ editor.init = () => {
   * @returns {void}
   */
   const prepPaints = () => {
-    paintBox.fill.prep();
-    paintBox.stroke.prep();
+    $id('fill_color').prep();
+    $id('stroke_color').prep();
   };
 
   /**
@@ -1666,27 +1635,6 @@ editor.init = () => {
     return runCallback();
   };
 
-  /**
-  * @param {string} color
-  * @param {Float} opac
-  * @param {string} type
-  * @returns {module:jGraduate~Paint}
-  */
-  const getPaint = function (color, opac, type) {
-    // update the editor's fill paint
-    const opts = {alpha: opac};
-    if (color.startsWith('url(#')) {
-      let refElem = svgCanvas.getRefElem(color);
-      refElem = (refElem) ? refElem.cloneNode(true) : $('#' + type + '_color defs *')[0];
-      opts[refElem.tagName] = refElem;
-    } else if (color.startsWith('#')) {
-      opts.solidColor = color.substr(1);
-    } else {
-      opts.solidColor = 'none';
-    }
-    return new $.jGraduate.Paint(opts);
-  };
-
   // bind the selected event to our function that handles updates to the UI
   svgCanvas.bind('selected', selectedChanged);
   svgCanvas.bind('transition', elementTransition);
@@ -2754,7 +2702,6 @@ editor.init = () => {
     $id('tool_wireframe').pressed = !$id('tool_wireframe').pressed;
     workarea.toggleClass('wireframe');
 
-    if (supportsNonSS) { return; }
     const wfRules = $('#wireframe_rules');
     if (!wfRules.length) {
       /* wfRules = */ $('<style id="wireframe_rules"></style>').appendTo('head');
@@ -2771,7 +2718,11 @@ editor.init = () => {
     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);
+    if (picker === 'fill') {
+      $id('fill_color').setPaint(paint);
+    } else {
+      $id('stroke_color').setPaint(paint);
+    }
     svgCanvas.setColor(picker, color);
     if (color !== 'none' && svgCanvas.getPaintOpacity(picker) !== 1) {
       svgCanvas.setPaintOpacity(picker, 1.0);
@@ -3004,246 +2955,17 @@ editor.init = () => {
 
   $('#change_image_url').click(promptImgURL);
 
-  /**
-  * @param {external:jQuery} elem
-  * @todo Go back to the color boxes having white background-color and then setting
-  *  background-image to none.png (otherwise partially transparent gradients look weird)
-  * @returns {void}
-  */
-  const colorPicker = function (elem) {
-    const picker = elem.attr('id') === 'stroke_color' ? 'stroke' : 'fill';
-    // const opacity = (picker == 'stroke' ? $('#stroke_opacity') : $('#fill_opacity'));
-    const title = picker === 'stroke'
-      ? uiStrings.ui.pick_stroke_paint_opacity
-      : uiStrings.ui.pick_fill_paint_opacity;
-    // let wasNone = false; // Currently unused
-    const pos = elem.offset();
-    let {paint} = paintBox[picker];
-    $('#color_picker')
-      .draggable({
-        cancel: '.jGraduate_tabs, .jGraduate_colPick, .jGraduate_gradPick, .jPicker',
-        containment: 'window'
-      })
-      .css(configObj.curConfig.colorPickerCSS || {left: pos.left - 140, bottom: 40})
-      .jGraduate(
-        {
-          images: {clientPath: './jgraduate/images/'},
-          paint,
-          window: {pickerTitle: title},
-          // images: {clientPath: configObj.curConfig.imgPath},
-          newstop: 'inverse'
-        },
-        function (p) {
-          paint = new $.jGraduate.Paint(p);
-          paintBox[picker].setPaint(paint);
-          svgCanvas.setPaint(picker, paint);
-          $('#color_picker').hide();
-        },
-        () => {
-          $('#color_picker').hide();
-        }
-      );
-  };
-
-  /**
-   * Paint box class.
-   */
-  class PaintBox {
-    /**
-     * @param {string|Element|external:jQuery} container
-     * @param {"fill"} type
-     */
-    constructor (container, type) {
-      const cur = configObj.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" width="16.5" height="16.5">
-          <rect
-            fill="#${cur.color}" opacity="${cur.opacity}"/>
-          <defs><linearGradient id="gradbox_${PaintBox.ctr++}"/></defs>
-        </svg>`,
-        'text/xml'
-      );
-
-      let docElem = svgdocbox.documentElement;
-      docElem = $(container)[0].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: cur.color});
-      this.type = type;
-    }
-
-    /**
-     * @param {module:jGraduate~Paint} paint
-     * @param {boolean} apply
-     * @returns {void}
-     */
-    setPaint (paint, apply) {
-      this.paint = paint;
-
-      const ptype = paint.type;
-      const opac = paint.alpha / 100;
-
-      let fillAttr = 'none';
-      switch (ptype) {
-      case 'solidColor':
-        fillAttr = (paint[ptype] !== 'none') ? '#' + paint[ptype] : paint[ptype];
-        break;
-      case 'linearGradient':
-      case 'radialGradient': {
-        this.grad.remove();
-        this.grad = this.defs.appendChild(paint[ptype]);
-        const id = this.grad.id = 'gradbox_' + this.type;
-        fillAttr = 'url(#' + id + ')';
-        break;
-      }
-      }
-
-      this.rect.setAttribute('fill', fillAttr);
-      this.rect.setAttribute('opacity', opac);
-
-      if (apply) {
-        svgCanvas.setColor(this.type, this._paintColor, true);
-        svgCanvas.setPaintOpacity(this.type, this._paintOpacity, true);
-      }
-    }
-
-    /**
-     * @param {boolean} apply
-     * @returns {void}
-     */
-    update (apply) {
-      if (!selectedElement) { return; }
-
-      const {type} = this;
-      switch (selectedElement.tagName) {
-      case 'use':
-      case 'image':
-      case 'foreignObject':
-        // These elements don't have fill or stroke, so don't change
-        // the current value
-        return;
-      case 'g':
-      case 'a': {
-        const childs = selectedElement.getElementsByTagName('*');
-
-        let gPaint = null;
-        for (let i = 0, len = childs.length; i < len; i++) {
-          const elem = childs[i];
-          const p = elem.getAttribute(type);
-          if (i === 0) {
-            gPaint = p;
-          } else if (gPaint !== p) {
-            gPaint = null;
-            break;
-          }
-        }
-
-        if (gPaint === null) {
-          // No common color, don't update anything
-          this._paintColor = null;
-          return;
-        }
-        this._paintColor = gPaint;
-        this._paintOpacity = 1;
-        break;
-      } default: {
-        this._paintOpacity = Number.parseFloat(selectedElement.getAttribute(type + '-opacity'));
-        if (Number.isNaN(this._paintOpacity)) {
-          this._paintOpacity = 1.0;
-        }
-
-        const defColor = type === 'fill' ? 'black' : 'none';
-        this._paintColor = selectedElement.getAttribute(type) || defColor;
-      }
-      }
-
-      if (apply) {
-        svgCanvas.setColor(type, this._paintColor, true);
-        svgCanvas.setPaintOpacity(type, this._paintOpacity, true);
-      }
-
-      this._paintOpacity *= 100;
-
-      const paint = getPaint(this._paintColor, this._paintOpacity, type);
-      // update the rect inside #fill_color/#stroke_color
-      this.setPaint(paint);
-    }
-
-    /**
-     * @returns {void}
-     */
-    prep () {
-      const ptype = this.paint.type;
-
-      switch (ptype) {
-      case 'linearGradient':
-      case 'radialGradient': {
-        const paint = new $.jGraduate.Paint({copy: this.paint});
-        svgCanvas.setPaint(this.type, paint);
-        break;
-      }
-      }
-    }
-  }
-  PaintBox.ctr = 0;
-
-  paintBox.fill = new PaintBox('#fill_color', 'fill');
-  paintBox.stroke = new PaintBox('#stroke_color', 'stroke');
-
   $('#stroke_width').val(configObj.curConfig.initStroke.width);
   $('#group_opacity').val(configObj.curConfig.initOpacity * 100);
 
-  // Use this SVG elem to test vectorEffect support
-  const testEl = paintBox.fill.rect.cloneNode(false);
-  testEl.setAttribute('style', 'vector-effect:non-scaling-stroke');
-  const supportsNonSS = (testEl.style.vectorEffect === 'non-scaling-stroke');
-  testEl.removeAttribute('style');
-  const svgdocbox = paintBox.fill.rect.ownerDocument;
-  // Use this to test support for blur element. Seems to work to test support in Webkit
-  const blurTest = svgdocbox.createElementNS(NS.SVG, 'feGaussianBlur');
-  if (blurTest.stdDeviationX === undefined) {
-    $('#blur').hide();
-  }
-  $(blurTest).remove();
-
-  // Test for zoom icon support
-  (function () {
-    const pre = '-' + uaPrefix.toLowerCase() + '-zoom-';
-    const zoom = pre + 'in';
-    workarea.css('cursor', zoom);
-    if (workarea.css('cursor') === zoom) {
-      zoomInIcon = zoom;
-      zoomOutIcon = pre + 'out';
-    }
-    workarea.css('cursor', 'auto');
-  }());
-
-  // Test for embedImage support (use timeout to not interfere with page load)
-  setTimeout(() => {
-    svgCanvas.embedImage('images/logo.svg', function (datauri) {
-      if (!datauri) {
-        // Disable option
-        const $imgDialog = document.getElementById('se-img-prop');
-        editor.pref('img_save', 'ref');
-        $imgDialog.setAttribute('save', 'ref');
-        $imgDialog.setAttribute('embed', 'one|' + uiStrings.notification.featNotSupported);
-      }
-    });
-  }, 1000);
-
-  $('#fill_color, #tool_fill').click(() => {
-    colorPicker($('#fill_color'));
+  const handleColorPicker = (type, evt) => {
+    const {paint} = evt.detail;
+    svgCanvas.setPaint(type, paint);
     updateToolButtonState();
-  });
+  };
 
-  $('#stroke_color, #tool_stroke').click(() => {
-    colorPicker($('#stroke_color'));
-    updateToolButtonState();
-  });
+  $id('stroke_color').addEventListener('change', (evt) => handleColorPicker('stroke', evt));
+  $id('fill_color').addEventListener('change', (evt) => handleColorPicker('fill', evt));
 
   $('#group_opacityLabel').click(() => {
     $('#opacity_dropdown button').mousedown();
@@ -3364,22 +3086,6 @@ editor.init = () => {
 
   $(window).bind('load resize', centerCanvas);
 
-  // function setResolution (w, h, center) {
-  //   updateCanvas();
-  //   // w -= 0; h -= 0;
-  //   // $('#svgcanvas').css({width: w, height: h});
-  //   // $('#canvas_width').val(w);
-  //   // $('#canvas_height').val(h);
-  //   //
-  //   // if (center) {
-  //   //   const wArea = workarea;
-  //   //   const scrollY = h/2 - wArea.height()/2;
-  //   //   const scrollX = w/2 - wArea.width()/2;
-  //   //   wArea[0].scrollTop = scrollY;
-  //   //   wArea[0].scrollLeft = scrollX;
-  //   // }
-  // }
-
   // Prevent browser from erroneously repopulating fields
   $('input,select').attr('autocomplete', 'off');