Merge pull request #73 from OptimistikSAS/issues/46

#46 Move this jQuery component to a web component

src/editor/components/PaintBox.js

@@ -1,4 +1,4 @@
-/* globals $ */
+import {jGraduate} from './jgraduate/jQuery.jGraduate.js';
 /**
  *
  */
@@ -20,7 +20,7 @@ class PaintBox {
 
     let docElem = svgdocbox.documentElement;
     docElem = document.importNode(docElem, true);
-    container.append(docElem);
+    container.appendChild(docElem);
 
     this.rect = docElem.firstElementChild;
     this.defs = docElem.getElementsByTagName('defs')[0];
@@ -48,7 +48,7 @@ class PaintBox {
     case 'radialGradient': {
       this.grad.remove();
       this.grad = paint[ptype];
-      this.defs.append(this.grad);
+      this.defs.appendChild(this.grad);
       const id = this.grad.id = 'gradbox_' + this.type;
       fillAttr = 'url(#' + id + ')';
       break;
@@ -70,14 +70,14 @@ class PaintBox {
     const opts = {alpha: opac};
     if (color.startsWith('url(#')) {
       let refElem = svgCanvas.getRefElem(color);
-      refElem = (refElem) ? refElem.cloneNode(true) : $('#' + type + '_color defs *')[0];
+      refElem = (refElem) ? refElem.cloneNode(true) : document.querySelectorAll('#' + 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);
+    return new jGraduate.Paint(opts);
   }
 
   /**

src/editor/components/jgraduate/ColorValuePicker.js

@@ -0,0 +1,392 @@
+/* eslint-disable max-len */
+/* eslint-disable unicorn/prefer-math-trunc */
+/* eslint-disable no-bitwise */
+/**
+* @external Math
+*/
+/**
+* @memberof external:Math
+* @param {Float} value
+* @param {Float} precision
+* @returns {Float}
+*/
+function toFixedNumeric (value, precision) {
+  if (precision === undefined) precision = 0;
+  return Math.round(value * (10 ** precision)) / (10 ** precision);
+}
+/**
+ * Whether a value is `null` or `undefined`.
+ * @param {any} val
+ * @returns {boolean}
+ */
+const isNullish = (val) => {
+  return val === null || val === undefined;
+};
+/**
+ * Controls for all the input elements for the typing in color values.
+ */
+export default class ColorValuePicker {
+  /**
+   * @param {external:jQuery} picker
+   * @param {external:jQuery.jPicker.Color} color
+   * @param {external:jQuery.fn.$.fn.jPicker} bindedHex
+   * @param {Float} alphaPrecision
+   */
+  constructor (picker, color, bindedHex, alphaPrecision) {
+    const that = this; // private properties and methods
+    const inputs = picker.querySelectorAll('td.Text input');
+    // input box key down - use arrows to alter color
+    /**
+     *
+     * @param {Event} e
+     * @returns {Event|false|void}
+     */
+    function keyDown (e) {
+      if (e.target.value === '' && e.target !== hex && ((!isNullish(bindedHex) && e.target !== bindedHex) || isNullish(bindedHex))) return undefined;
+      if (!validateKey(e)) return e;
+      switch (e.target) {
+      case red:
+        switch (e.keyCode) {
+        case 38:
+          red.value = setValueInRange.call(that, (red.value << 0) + 1, 0, 255);
+          color.val('r', red.value, e.target);
+          return false;
+        case 40:
+          red.value = setValueInRange.call(that, (red.value << 0) - 1, 0, 255);
+          color.val('r', red.value, e.target);
+          return false;
+        }
+        break;
+      case green:
+        switch (e.keyCode) {
+        case 38:
+          green.value = setValueInRange.call(that, (green.value << 0) + 1, 0, 255);
+          color.val('g', green.value, e.target);
+          return false;
+        case 40:
+          green.value = setValueInRange.call(that, (green.value << 0) - 1, 0, 255);
+          color.val('g', green.value, e.target);
+          return false;
+        }
+        break;
+      case blue:
+        switch (e.keyCode) {
+        case 38:
+          blue.value = setValueInRange.call(that, (blue.value << 0) + 1, 0, 255);
+          color.val('b', blue.value, e.target);
+          return false;
+        case 40:
+          blue.value = setValueInRange.call(that, (blue.value << 0) - 1, 0, 255);
+          color.val('b', blue.value, e.target);
+          return false;
+        }
+        break;
+      case alpha:
+        switch (e.keyCode) {
+        case 38:
+          alpha.value = setValueInRange.call(that, Number.parseFloat(alpha.value) + 1, 0, 100);
+          color.val('a', toFixedNumeric((alpha.value * 255) / 100, alphaPrecision), e.target);
+          return false;
+        case 40:
+          alpha.value = setValueInRange.call(that, Number.parseFloat(alpha.value) - 1, 0, 100);
+          color.val('a', toFixedNumeric((alpha.value * 255) / 100, alphaPrecision), e.target);
+          return false;
+        }
+        break;
+      case hue:
+        switch (e.keyCode) {
+        case 38:
+          hue.value = setValueInRange.call(that, (hue.value << 0) + 1, 0, 360);
+          color.val('h', hue.value, e.target);
+          return false;
+        case 40:
+          hue.value =setValueInRange.call(that, (hue.value << 0) - 1, 0, 360);
+          color.val('h', hue.value, e.target);
+          return false;
+        }
+        break;
+      case saturation:
+        switch (e.keyCode) {
+        case 38:
+          saturation.value = setValueInRange.call(that, (saturation.value << 0) + 1, 0, 100);
+          color.val('s', saturation.value, e.target);
+          return false;
+        case 40:
+          saturation.value = setValueInRange.call(that, (saturation.value << 0) - 1, 0, 100);
+          color.val('s', saturation.value, e.target);
+          return false;
+        }
+        break;
+      case value:
+        switch (e.keyCode) {
+        case 38:
+          value.value = setValueInRange.call(that, (value.value << 0) + 1, 0, 100);
+          color.val('v', value.value, e.target);
+          return false;
+        case 40:
+          value.value = setValueInRange.call(that, (value.value << 0) - 1, 0, 100);
+          color.val('v', value.value, e.target);
+          return false;
+        }
+        break;
+      }
+      return undefined;
+    }
+    // input box key up - validate value and set color
+    /**
+    * @param {Event} e
+    * @returns {Event|void}
+    * @todo Why is this returning an event?
+    */
+    function keyUp (e) {
+      if (e.target.value === '' && e.target !== hex &&
+        ((!isNullish(bindedHex) && e.target !== bindedHex) ||
+        isNullish(bindedHex))) return undefined;
+      if (!validateKey(e)) return e;
+      switch (e.target) {
+      case red:
+        red.value = setValueInRange.call(that, red.value, 0, 255);
+        color.val('r', red.value, e.target);
+        break;
+      case green:
+        green.value = setValueInRange.call(that, green.value, 0, 255);
+        color.val('g', green.value, e.target);
+        break;
+      case blue:
+        blue.value = setValueInRange.call(that, blue.value, 0, 255);
+        color.val('b', blue.value, e.target);
+        break;
+      case alpha:
+        alpha.value = setValueInRange.call(that, alpha.value, 0, 100);
+        color.val('a', toFixedNumeric((alpha.value * 255) / 100, alphaPrecision), e.target);
+        break;
+      case hue:
+        hue.value = setValueInRange.call(that, hue.value, 0, 360);
+        color.val('h', hue.value, e.target);
+        break;
+      case saturation:
+        saturation.value = setValueInRange.call(that, saturation.value, 0, 100);
+        color.val('s', saturation.value, e.target);
+        break;
+      case value:
+        value.value = setValueInRange.call(that, value.value, 0, 100);
+        color.val('v', value.value, e.target);
+        break;
+      case hex:
+        hex.value = hex.value.replace(/[^a-fA-F\d]/g, '').toLowerCase().substring(0, 6);
+        bindedHex && bindedHex.val(hex.value);
+        color.val('hex', hex.value !== '' ? hex.value : null, e.target);
+        break;
+      case bindedHex:
+        bindedHex.value = bindedHex.value.replace(/[^a-fA-F\d]/g, '').toLowerCase().substring(0, 6);
+        hex.val(bindedHex.value);
+        color.val('hex', bindedHex.value !== '' ? bindedHex.value : null, e.target);
+        break;
+      case ahex:
+        ahex.value = ahex.value.replace(/[^a-fA-F\d]/g, '').toLowerCase().substring(0, 2);
+        color.val('a', !isNullish(ahex.value) ? Number.parseInt(ahex.value, 16) : null, e.target);
+        break;
+      }
+      return undefined;
+    }
+    // input box blur - reset to original if value empty
+    /**
+    * @param {Event} e
+    * @returns {void}
+    */
+    function blur (e) {
+      if (!isNullish(color.value)) {
+        switch (e.target) {
+        case red:
+          color.value = 'r';
+          red.value = color.value;
+          break;
+        case green:
+          color.value = 'g';
+          green.value = color.value;
+          break;
+        case blue:
+          color.value = 'b';
+          blue.value = color.value;
+          break;
+        case alpha:
+          color.value = 'a';
+          alpha.value = toFixedNumeric((color.value * 100) / 255, alphaPrecision);
+          break;
+        case hue:
+          color.value = 'h';
+          hue.value = color.value;
+          break;
+        case saturation:
+          color.value = 's';
+          saturation.value = color.value;
+          break;
+        case value:
+          color.value = 'v';
+          value.value = color.value;
+          break;
+        case hex:
+        case bindedHex:
+          color.value = 'hex';
+          hex.value = color.value;
+          bindedHex.value = color.value;
+          break;
+        case ahex:
+          color.value = 'ahex';
+          ahex.value = color.value.substring(6); 
+          break;
+        }
+      }
+    }
+    /**
+    * @param {Event} e
+    * @returns {boolean}
+    */
+    function validateKey (e) {
+      switch (e.keyCode) {
+      case 9:
+      case 16:
+      case 29:
+      case 37:
+      case 39:
+        return false;
+      case 'c'.charCodeAt():
+      case 'v'.charCodeAt():
+        if (e.ctrlKey) return false;
+      }
+      return true;
+    }
+
+    /**
+    * Constrain value within range.
+    * @param {Float|string} value
+    * @param {Float} min
+    * @param {Float} max
+    * @returns {Float|string} Returns a number or numeric string
+    */
+    function setValueInRange (value, min, max) {
+      if (value === '' || isNaN(value)) return min;
+      if (value > max) return max;
+      if (value < min) return min;
+      return value;
+    }
+    /**
+    * @param {external:jQuery} ui
+    * @param {Element} context
+    * @returns {void}
+    */
+    function colorChanged (ui, context) {
+      const all = ui.val('all');
+      if (context !== red) red.value = (!isNullish(all) ? all.r : '');
+      if (context !== green) green.value = (!isNullish(all) ? all.g : '');
+      if (context !== blue) blue.value = (!isNullish(all) ? all.b : '');
+      if (alpha && context !== alpha) alpha.value = (!isNullish(all) ? toFixedNumeric((all.a * 100) / 255, alphaPrecision) : '');
+      if (context !== hue) hue.value = (!isNullish(all) ? all.h : '');
+      if (context !== saturation) saturation.value = (!isNullish(all) ? all.s : '');
+      if (context !== value) value.value = (!isNullish(all) ? all.v : '');
+      if (context !== hex && ((bindedHex && context !== bindedHex) || !bindedHex)) hex.value = (!isNullish(all) ? all.hex : '');
+      if (bindedHex && context !== bindedHex && context !== hex) bindedHex.value = (!isNullish(all) ? all.hex : '');
+      if (ahex && context !== ahex) ahex.value = (!isNullish(all) ? all.ahex.substring(6) : '');
+    }
+    /**
+    * Unbind all events and null objects.
+    * @returns {void}
+    */
+    function destroy () {
+      red.removeEventListener('keyup', keyUp);
+      green.removeEventListener('keyup', keyUp);
+      blue.removeEventListener('keyup', keyUp);
+      hue.removeEventListener('keyup', keyUp);
+      saturation.removeEventListener('keyup', keyUp);
+      value.removeEventListener('keyup', keyUp);
+      hex.removeEventListener('keyup', keyUp);
+
+      red.removeEventListener('blur', blur);
+      green.removeEventListener('blur', blur);
+      blue.removeEventListener('blur', blur);
+      hue.removeEventListener('blur', blur);
+      saturation.removeEventListener('blur', blur);
+      value.removeEventListener('blur', blur);
+      hex.removeEventListener('blur', blur);
+
+      red.removeEventListener('keydown', keyDown);
+      green.removeEventListener('keydown', keyDown);
+      blue.removeEventListener('keydown', keyDown);
+      hue.removeEventListener('keydown', keyDown);
+      saturation.removeEventListener('keydown', keyDown);
+      value.removeEventListener('keydown', keyDown);
+
+      if (alpha !== null) {
+        alpha.removeEventListener('keyup', keyUp);
+        alpha.removeEventListener('blur', blur);
+        alpha.removeEventListener('keydown', keyDown);
+      }
+      if (ahex !== null) {
+        ahex.removeEventListener('keyup', keyUp);
+        ahex.removeEventListener('blur', blur);
+      }
+      if (bindedHex !== null) {
+        bindedHex.removeEventListener('keyup', keyUp);
+        bindedHex.removeEventListener('blur', blur);
+      }
+      color.unbind(colorChanged);
+      red = null;
+      green = null;
+      blue = null;
+      alpha = null;
+      hue = null;
+      saturation = null;
+      value = null;
+      hex = null;
+      ahex = null;
+    }
+    let
+      red = inputs[3],
+      green = inputs[4],
+      blue = inputs[5],
+      alpha = inputs.length > 7 ? inputs[6] : null,
+      hue = inputs[0],
+      saturation = inputs[1],
+      value = inputs[2],
+      hex = inputs[(inputs.length > 7) ? 7 : 6],
+      ahex = inputs.length > 7 ? inputs[8] : null;
+    Object.assign(that, {destroy});
+    red.addEventListener('keyup', keyUp);
+    green.addEventListener('keyup', keyUp);
+    blue.addEventListener('keyup', keyUp);
+    hue.addEventListener('keyup', keyUp);
+    saturation.addEventListener('keyup', keyUp);
+    value.addEventListener('keyup', keyUp);
+    hex.addEventListener('keyup', keyUp);
+
+    red.addEventListener('blur', blur);
+    green.addEventListener('blur', blur);
+    blue.addEventListener('blur', blur);
+    hue.addEventListener('blur', blur);
+    saturation.addEventListener('blur', blur);
+    value.addEventListener('blur', blur);
+    hex.addEventListener('blur', blur);
+
+    red.addEventListener('keydown', keyDown);
+    green.addEventListener('keydown', keyDown);
+    blue.addEventListener('keydown', keyDown);
+    hue.addEventListener('keydown', keyDown);
+    saturation.addEventListener('keydown', keyDown);
+    value.addEventListener('keydown', keyDown);
+
+    if (alpha !== null) {
+      alpha.addEventListener('keyup', keyUp);
+      alpha.addEventListener('blur', blur);
+      alpha.addEventListener('keydown', keyDown);
+    }
+    if (ahex !== null) {
+      ahex.addEventListener('keyup', keyUp);
+      ahex.addEventListener('blur', blur);
+    }
+    if (bindedHex !== null) {
+      bindedHex.addEventListener('keyup', keyUp);
+      bindedHex.addEventListener('blur', blur);
+    }
+    color.bind(colorChanged);
+  }
+}

src/editor/components/jgraduate/Slider.js

@@ -0,0 +1,340 @@
+/* eslint-disable unicorn/prefer-math-trunc */
+/* eslint-disable no-bitwise */
+/* eslint-disable unicorn/prefer-ternary */
+import {findPos} from './Util.js';
+/**
+ * Whether a value is `null` or `undefined`.
+ * @param {any} val
+ * @returns {boolean}
+ */
+const isNullish = (val) => {
+  return val === null || val === undefined;
+};
+/**
+ * Encapsulate slider functionality for the ColorMap and ColorBar -
+ * could be useful to use a jQuery UI draggable for this with certain extensions.
+ * @memberof module:jPicker
+ */
+export default class Slider {
+  /**
+   * @param {external:jQuery} bar
+   * @param {module:jPicker.SliderOptions} options
+   */
+  constructor (bar, options) {
+    const that = this;
+    /**
+     * Fire events on the supplied `context`
+     * @param {module:jPicker.JPickerInit} context
+     * @returns {void}
+     */
+    function fireChangeEvents (context) {
+      changeEvents.forEach((changeEvent) => {
+        changeEvent.call(that, that, context);
+      });
+    }
+
+    /**
+     * Bind the mousedown to the bar not the arrow for quick snapping to the clicked location.
+     * @param {external:jQuery.Event} e
+     * @returns {void}
+     */
+    function mouseDown (e) {
+      const off = findPos(bar);
+      offset = {l: off.left | 0, t: off.top | 0};
+      clearTimeout(timeout);
+      // using setTimeout for visual updates - once the style is updated the browser will re-render internally allowing the next Javascript to run
+      timeout = setTimeout(function () {
+        setValuesFromMousePosition.call(that, e);
+      }, 0);
+      // Bind mousemove and mouseup event to the document so it responds when dragged of of the bar - we will unbind these when on mouseup to save processing
+      document.addEventListener('mousemove', mouseMove);
+      document.addEventListener('mouseup', mouseUp);
+      e.preventDefault(); // don't try to select anything or drag the image to the desktop
+    }
+    /**
+     * Set the values as the mouse moves.
+     * @param {external:jQuery.Event} e
+     * @returns {false}
+     */
+    function mouseMove (e) {
+      clearTimeout(timeout);
+      timeout = setTimeout(function () {
+        setValuesFromMousePosition.call(that, e);
+      }, 0);
+      e.stopPropagation();
+      e.preventDefault();
+      return false;
+    }
+    /**
+     * Unbind the document events - they aren't needed when not dragging.
+     * @param {external:jQuery.Event} e
+     * @returns {false}
+     */
+    function mouseUp (e) {
+      document.removeEventListener('mousemove', mouseMove);
+      document.removeEventListener('mouseup', mouseUp);
+      e.stopPropagation();
+      e.preventDefault();
+      return false;
+    }
+
+    /**
+     * Calculate mouse position and set value within the current range.
+     * @param {Event} e
+     * @returns {void}
+     */
+    function setValuesFromMousePosition (e) {
+      const barW = bar.w, // local copies for YUI compressor
+        barH = bar.h;
+      let locX = e.pageX - offset.l,
+        locY = e.pageY - offset.t;
+      // keep the arrow within the bounds of the bar
+      if (locX < 0) locX = 0;
+      else if (locX > barW) locX = barW;
+      if (locY < 0) locY = 0;
+      else if (locY > barH) locY = barH;
+      val.call(that, 'xy', {
+        x: ((locX / barW) * rangeX) + minX,
+        y: ((locY / barH) * rangeY) + minY
+      });
+    }
+    /**
+     *
+     * @returns {void}
+     */
+    function draw () {
+      const
+        barW = bar.w,
+        barH = bar.h,
+        arrowW = arrow.w,
+        arrowH = arrow.h;
+      let arrowOffsetX = 0,
+        arrowOffsetY = 0;
+      setTimeout(function () {
+        if (rangeX > 0) { // range is greater than zero
+          // constrain to bounds
+          if (x === maxX) arrowOffsetX = barW;
+          else arrowOffsetX = ((x / rangeX) * barW) | 0;
+        }
+        if (rangeY > 0) { // range is greater than zero
+          // constrain to bounds
+          if (y === maxY) arrowOffsetY = barH;
+          else arrowOffsetY = ((y / rangeY) * barH) | 0;
+        }
+        // if arrow width is greater than bar width, center arrow and prevent horizontal dragging
+        if (arrowW >= barW) arrowOffsetX = (barW >> 1) - (arrowW >> 1); // number >> 1 - superfast bitwise divide by two and truncate (move bits over one bit discarding lowest)
+        else arrowOffsetX -= arrowW >> 1;
+        // if arrow height is greater than bar height, center arrow and prevent vertical dragging
+        if (arrowH >= barH) arrowOffsetY = (barH >> 1) - (arrowH >> 1);
+        else arrowOffsetY -= arrowH >> 1;
+        // set the arrow position based on these offsets
+        arrow.style.left = arrowOffsetX + 'px';
+        arrow.style.top = arrowOffsetY + 'px';
+      });
+    }
+
+    /**
+     * Get or set a value.
+     * @param {?("xy"|"x"|"y")} name
+     * @param {module:math.XYObject} value
+     * @param {module:jPicker.Slider} context
+     * @returns {module:math.XYObject|Float|void}
+     */
+    function val (name, value, context) {
+      const set = value !== undefined;
+      if (!set) {
+        if (isNullish(name)) name = 'xy';
+        switch (name.toLowerCase()) {
+        case 'x': return x;
+        case 'y': return y;
+        case 'xy':
+        default: return {x, y};
+        }
+      }
+      if (!isNullish(context) && context === that) return undefined;
+      let changed = false;
+
+      let newX, newY;
+      if (isNullish(name)) name = 'xy';
+      switch (name.toLowerCase()) {
+      case 'x':
+        newX = (value && ((value.x && value.x | 0) || value | 0)) || 0;
+        break;
+      case 'y':
+        newY = (value && ((value.y && value.y | 0) || value | 0)) || 0;
+        break;
+      case 'xy':
+      default:
+        newX = (value && value.x && value.x | 0) || 0;
+        newY = (value && value.y && value.y | 0) || 0;
+        break;
+      }
+      if (!isNullish(newX)) {
+        if (newX < minX) newX = minX;
+        else if (newX > maxX) newX = maxX;
+        if (x !== newX) {
+          x = newX;
+          changed = true;
+        }
+      }
+      if (!isNullish(newY)) {
+        if (newY < minY) newY = minY;
+        else if (newY > maxY) newY = maxY;
+        if (y !== newY) {
+          y = newY;
+          changed = true;
+        }
+      }
+      changed && fireChangeEvents.call(that, context || that);
+      return undefined;
+    }
+
+    /**
+    * @typedef {PlainObject} module:jPicker.MinMaxRangeX
+    * @property {Float} minX
+    * @property {Float} maxX
+    * @property {Float} rangeX
+    */
+    /**
+    * @typedef {PlainObject} module:jPicker.MinMaxRangeY
+    * @property {Float} minY
+    * @property {Float} maxY
+    * @property {Float} rangeY
+    */
+    /**
+    * @typedef {module:jPicker.MinMaxRangeY|module:jPicker.MinMaxRangeX} module:jPicker.MinMaxRangeXY
+    */
+
+    /**
+     *
+     * @param {"minx"|"maxx"|"rangex"|"miny"|"maxy"|"rangey"|"all"} name
+     * @param {module:jPicker.MinMaxRangeXY} value
+     * @returns {module:jPicker.MinMaxRangeXY|module:jPicker.MinMaxRangeX|module:jPicker.MinMaxRangeY|void}
+     */
+    function range (name, value) {
+      const set = value !== undefined;
+      if (!set) {
+        if (isNullish(name)) name = 'all';
+        switch (name.toLowerCase()) {
+        case 'minx': return minX;
+        case 'maxx': return maxX;
+        case 'rangex': return {minX, maxX, rangeX};
+        case 'miny': return minY;
+        case 'maxy': return maxY;
+        case 'rangey': return {minY, maxY, rangeY};
+        case 'all':
+        default: return {minX, maxX, rangeX, minY, maxY, rangeY};
+        }
+      }
+      let // changed = false,
+        newMinX,
+        newMaxX,
+        newMinY,
+        newMaxY;
+      if (isNullish(name)) name = 'all';
+      switch (name.toLowerCase()) {
+      case 'minx':
+        newMinX = (value && ((value.minX && value.minX | 0) || value | 0)) || 0;
+        break;
+      case 'maxx':
+        newMaxX = (value && ((value.maxX && value.maxX | 0) || value | 0)) || 0;
+        break;
+      case 'rangex':
+        newMinX = (value && value.minX && value.minX | 0) || 0;
+        newMaxX = (value && value.maxX && value.maxX | 0) || 0;
+        break;
+      case 'miny':
+        newMinY = (value && ((value.minY && value.minY | 0) || value | 0)) || 0;
+        break;
+      case 'maxy':
+        newMaxY = (value && ((value.maxY && value.maxY | 0) || value | 0)) || 0;
+        break;
+      case 'rangey':
+        newMinY = (value && value.minY && value.minY | 0) || 0;
+        newMaxY = (value && value.maxY && value.maxY | 0) || 0;
+        break;
+      case 'all':
+      default:
+        newMinX = (value && value.minX && value.minX | 0) || 0;
+        newMaxX = (value && value.maxX && value.maxX | 0) || 0;
+        newMinY = (value && value.minY && value.minY | 0) || 0;
+        newMaxY = (value && value.maxY && value.maxY | 0) || 0;
+        break;
+      }
+
+      if (!isNullish(newMinX) && minX !== newMinX) {
+        minX = newMinX;
+        rangeX = maxX - minX;
+      }
+      if (!isNullish(newMaxX) && maxX !== newMaxX) {
+        maxX = newMaxX;
+        rangeX = maxX - minX;
+      }
+      if (!isNullish(newMinY) && minY !== newMinY) {
+        minY = newMinY;
+        rangeY = maxY - minY;
+      }
+      if (!isNullish(newMaxY) && maxY !== newMaxY) {
+        maxY = newMaxY;
+        rangeY = maxY - minY;
+      }
+      return undefined;
+    }
+    /**
+    * @param {GenericCallback} callback
+    * @returns {void}
+    */
+    function bind (callback) { // eslint-disable-line promise/prefer-await-to-callbacks
+      if (typeof callback === 'function') changeEvents.push(callback);
+    }
+    /**
+    * @param {GenericCallback} callback
+    * @returns {void}
+    */
+    function unbind (callback) { // eslint-disable-line promise/prefer-await-to-callbacks
+      if (typeof callback !== 'function') return;
+      let i;
+      while ((i = changeEvents.includes(callback))) changeEvents.splice(i, 1);
+    }
+    /**
+    *
+    * @returns {void}
+    */
+    function destroy () {
+      // unbind all possible events and null objects
+      document.removeEventListener('mousemove', mouseMove);
+      document.removeEventListener('mouseup', mouseUp);
+      bar.removeEventListener('mousedown', mouseDown);
+      bar = null;
+      arrow = null;
+      changeEvents = null;
+    }
+    let offset,
+      timeout,
+      x = 0,
+      y = 0,
+      minX = 0,
+      maxX = 100,
+      rangeX = 100,
+      minY = 0,
+      maxY = 100,
+      rangeY = 100,
+      arrow = bar.querySelector('img'), // the arrow image to drag
+      changeEvents = [];
+    Object.assign(that, {
+      val,
+      range,
+      bind,
+      unbind,
+      destroy
+    });
+    // initialize this control
+    arrow.src = options.arrow && options.arrow.image;
+    arrow.w = (options.arrow && options.arrow.width) || arrow.width();
+    arrow.h = (options.arrow && options.arrow.height) || arrow.height();
+    bar.w = (options.map && options.map.width) || bar.width();
+    bar.h = (options.map && options.map.height) || bar.height();
+    bar.addEventListener('mousedown', mouseDown);
+    bind.call(that, draw);
+  }
+}

src/editor/components/jgraduate/Util.js

@@ -0,0 +1,37 @@
+/**
+ * @param {any} obj
+ * @returns {any}
+ */
+export function findPos (obj) {
+  let curleft = 0;
+  let curtop = 0;
+  if (obj.offsetParent) {
+    do {
+      curleft += obj.offsetLeft;
+      curtop += obj.offsetTop;
+    } while (obj = obj.offsetParent);
+    return {left: curleft, top: curtop};
+  }
+  return {left: curleft, top: curtop};
+}
+
+export function isObject(item) {
+  return (item && typeof item === 'object' && !Array.isArray(item));
+}
+
+export function mergeDeep(target, source) {
+  let output = Object.assign({}, target);
+  if (isObject(target) && isObject(source)) {
+    Object.keys(source).forEach(key => {
+      if (isObject(source[key])) {
+        if (!(key in target))
+          Object.assign(output, { [key]: source[key] });
+        else
+          output[key] = mergeDeep(target[key], source[key]);
+      } else {
+        Object.assign(output, { [key]: source[key] });
+      }
+    });
+  }
+  return output;
+}

src/editor/components/jgraduate/paint.js

@@ -0,0 +1,78 @@
+/**
+ *
+ */
+export default class Paint {
+  /**
+   * @param {module:jGraduate.jGraduatePaintOptions} [opt]
+  */
+  constructor (opt) {
+    const options = opt || {};
+    this.alpha = isNaN(options.alpha) ? 100 : options.alpha;
+    // copy paint object
+    if (options.copy) {
+      /**
+       * @name module:jGraduate~Paint#type
+       * @type {"none"|"solidColor"|"linearGradient"|"radialGradient"}
+       */
+      this.type = options.copy.type;
+      /**
+       * Represents opacity (0-100).
+       * @name module:jGraduate~Paint#alpha
+       * @type {Float}
+       */
+      this.alpha = options.copy.alpha;
+      /**
+       * Represents #RRGGBB hex of color.
+       * @name module:jGraduate~Paint#solidColor
+       * @type {string}
+       */
+      this.solidColor = null;
+      /**
+       * @name module:jGraduate~Paint#linearGradient
+       * @type {SVGLinearGradientElement}
+       */
+      this.linearGradient = null;
+      /**
+       * @name module:jGraduate~Paint#radialGradient
+       * @type {SVGRadialGradientElement}
+       */
+      this.radialGradient = null;
+
+      switch (this.type) {
+      case 'none':
+        break;
+      case 'solidColor':
+        this.solidColor = options.copy.solidColor;
+        break;
+      case 'linearGradient':
+        this.linearGradient = options.copy.linearGradient.cloneNode(true);
+        break;
+      case 'radialGradient':
+        this.radialGradient = options.copy.radialGradient.cloneNode(true);
+        break;
+      }
+    // create linear gradient paint
+    } else if (options.linearGradient) {
+      this.type = 'linearGradient';
+      this.solidColor = null;
+      this.radialGradient = null;
+      this.linearGradient = options.linearGradient.cloneNode(true);
+    // create linear gradient paint
+    } else if (options.radialGradient) {
+      this.type = 'radialGradient';
+      this.solidColor = null;
+      this.linearGradient = null;
+      this.radialGradient = options.radialGradient.cloneNode(true);
+    // create solid color paint
+    } else if (options.solidColor) {
+      this.type = 'solidColor';
+      this.solidColor = options.solidColor;
+    // create empty paint
+    } else {
+      this.type = 'none';
+      this.solidColor = null;
+      this.linearGradient = null;
+      this.radialGradient = null;
+    }
+  }
+}

src/editor/components/seColorPicker.js

@@ -1,13 +1,8 @@
-/* globals jQuery */
-import jQueryPluginJGraduate from './jgraduate/jQuery.jGraduate.js';
-import jQueryPluginJPicker from './jgraduate/jQuery.jPicker.js';
+/* globals $ */
+import {jGraduate, jGraduateMethod} 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>
@@ -175,33 +170,34 @@ export class SeColorPicker extends HTMLElement {
    */
   connectedCallback () {
     this.paintBox = new PaintBox(this.$block, this.type);
-    let {paint} = this.paintBox;
     $(this.$picker).click(() => {
-      $(this.$color_picker)
+      /* $(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();
-          }
-        );
+        }); */
+      let {paint} = this.paintBox;
+      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';
+        }
+      );
     });
   }
 }

src/editor/panels/BottomPanelHandlers.js

@@ -1,4 +1,5 @@
 /* globals $ */
+import {jGraduate} from '../components/jgraduate/jQuery.jGraduate.js';
 import SvgCanvas from '../../svgcanvas/svgcanvas.js';
 
 const {$id} = SvgCanvas;
@@ -160,7 +161,7 @@ class BottomPanelHandlers {
     // 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)});
+    const paint = color === 'none' ? new jGraduate.Paint() : new jGraduate.Paint({alpha: 100, solidColor: color.substr(1)});
     if (picker === 'fill') {
       $id('fill_color').setPaint(paint);
     } else {
@@ -188,8 +189,8 @@ class BottomPanelHandlers {
     $id('opacity').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}));
+    $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}));
   }
 }
 

src/svgcanvas/elem-get-set.js

@@ -1,4 +1,5 @@
 /* globals jQuery */
+import {jGraduate} from '../editor/components/jgraduate/jQuery.jGraduate.js';
 /**
  * @module elem-get-set get and set methods.
  * @license MIT
@@ -452,7 +453,7 @@ export const findDuplicateGradient = function (grad) {
 */
 export const setPaintMethod = function (type, paint) {
   // make a copy
-  const p = new $.jGraduate.Paint(paint);
+  const p = new jGraduate.Paint(paint);
   this.setPaintOpacity(type, p.alpha / 100, true);
 
   // now set the current paint object