$click to allow (more) responsiveness

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

@@ -1,3 +1,5 @@
+/* globals svgEditor */
+
 /**
  * @file jGraduate 0.4
  *
@@ -787,7 +789,7 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback, i18n
 
   transImg.setAttributeNS(ns.xlink, 'xlink:href', bgImage)
 
-  stopMakerSVG.addEventListener('click', function (evt) {
+  svgEditor.$click(stopMakerSVG, function (evt) {
     stopOffset = findPos(stopMakerDiv)
     const { target } = evt
     if (target.tagName === 'path') return
@@ -917,13 +919,13 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback, i18n
   }
 
   // bind GUI elements
-  $this.querySelector('#' + id + '_jGraduate_Ok').addEventListener('click', function () {
+  svgEditor.$click($this.querySelector('#' + id + '_jGraduate_Ok'), function () {
     $this.paint.type = curType
     $this.paint[curType] = curGradient.cloneNode(true)
     $this.paint.solidColor = null
     okClicked()
   })
-  $this.querySelector('#' + id + '_jGraduate_Cancel').addEventListener('click', cancelClicked)
+  svgEditor.$click($this.querySelector('#' + id + '_jGraduate_Cancel'), cancelClicked)
 
   if (curType === 'radialGradient') {
     if (showFocus) {
@@ -1250,7 +1252,7 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback, i18n
     }
   }
   for (const tab of tabs) {
-    tab.addEventListener('click', onTabsClickHandler)
+    svgEditor.$click(tab, onTabsClickHandler)
   }
   const innerDivs = $this.querySelectorAll(idref + ' > div');
   [].forEach.call(innerDivs, function (innerDiv) {

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

@@ -1,3 +1,4 @@
+/* globals svgEditor */
 /**
  * @file jPicker (Adapted from version 1.1.6)
  *
@@ -1462,12 +1463,12 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
     activePreview.style.backgroundColor = (hex) ? '#' + hex : 'transparent'
     currentPreview = preview.querySelector('#Current')
     currentPreview.style.backgroundColor = (hex) ? '#' + hex : 'transparent'
-    currentPreview.addEventListener('click', currentClicked)
+    svgEditor.$click(currentPreview, currentClicked)
     setAlpha.call(that, currentPreview, toFixedNumeric((color.current.val('a') * 100) / 255, 4))
     okButton = button.querySelector('#Ok')
-    okButton.addEventListener('click', okClicked)
+    svgEditor.$click(okButton, okClicked)
     cancelButton = button.querySelector('#Cancel')
-    cancelButton.addEventListener('click', cancelClicked)
+    svgEditor.$click(cancelButton, cancelClicked)
     grid = button.querySelector('#Grid')
     setTimeout(function () {
       setImg.call(that, colorMapL1, images.clientPath + 'Maps.png')
@@ -1483,7 +1484,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
     }, 0)
     const radioInputs = tbody.querySelectorAll('td.Radio input')
     for (const radioInput of radioInputs) {
-      radioInput.addEventListener('click', radioClicked)
+      svgEditor.$click(radioInput, radioClicked)
     }
     // initialize quick list
     if (color.quickList && color.quickList.length > 0) {
@@ -1509,7 +1510,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
       // grid.html(html);
       const QuickColorSels = grid.querySelectorAll('.QuickColor')
       for (const QuickColorSel of QuickColorSels) {
-        QuickColorSel.addEventListener('click', quickPickClicked)
+        svgEditor.$click(QuickColorSel, quickPickClicked)
       }
     }
     setColorMode.call(that, settings.color.mode)
@@ -1526,7 +1527,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
       setAlpha.call(that, iconAlpha, toFixedNumeric(((255 - (all ? all.a : 0)) * 100) / 255, 4))
       iconImage = that.icon.querySelector('.Image')
       iconImage.style.backgroundImage = 'url(\'' + images.clientPath + images.picker.file + '\')'
-      iconImage.addEventListener('click', iconImageClicked)
+      svgEditor.$click(iconImage, iconImageClicked)
       if (win.bindToInput && win.updateInputColor) {
         win.input.style.backgroundColor = (hex && '#' + hex) || 'transparent'
         win.input.style.color = isNullish(all) || all.v > 75 ? '#000000' : '#ffffff'

src/editor/components/seColorPicker.js

@@ -794,7 +794,7 @@ export class SeColorPicker extends HTMLElement {
    */
   connectedCallback () {
     this.paintBox = new PaintBox(this.$block, this.type)
-    this.$picker.addEventListener('click', () => {
+    svgEditor.$click(this.$picker, () => {
       let { paint } = this.paintBox
       jGraduateMethod(
         this.$color_picker,

src/editor/components/seExplorerButton.js

@@ -280,10 +280,10 @@ export class ExplorerButton extends HTMLElement {
       }
     }
     // capture event from slots
-    this.addEventListener('click', onClickHandler)
-    this.$menu.addEventListener('click', onClickHandler)
-    this.$lib.addEventListener('click', onClickHandler)
-    this.$handle.addEventListener('click', onClickHandler)
+    svgEditor.$click(this, onClickHandler)
+    svgEditor.$click(this.$menu, onClickHandler)
+    svgEditor.$click(this.$lib, onClickHandler)
+    svgEditor.$click(this.$handle, onClickHandler)
   }
 
   /**

src/editor/components/seFlyingButton.js

@@ -280,8 +280,8 @@ export class FlyingButton extends HTMLElement {
       }
     }
     // capture event from slots
-    this.addEventListener('click', onClickHandler)
-    this.$handle.addEventListener('click', onClickHandler)
+    svgEditor.$click(this, onClickHandler)
+    svgEditor.$click(this.$handle, onClickHandler)
   }
 }
 

src/editor/components/sePalette.js

@@ -1,3 +1,4 @@
+/* globals svgEditor */
 /* eslint-disable max-len */
 const palette = [
   // Todo: Make into configuration item?
@@ -78,7 +79,7 @@ export class SEPalette extends HTMLElement {
         newDiv.style.backgroundColor = rgb
       }
       newDiv.dataset.rgb = rgb
-      newDiv.addEventListener('click', (evt) => {
+      svgEditor.$click(newDiv, (evt) => {
         evt.preventDefault()
         // shift key or right click for stroke
         const picker = evt.shiftKey || evt.button === 2 ? 'stroke' : 'fill'

src/editor/components/seSpinInput.js

@@ -232,7 +232,7 @@ export class SESpinInput extends HTMLElement {
       this.value = e.target.value
       this.dispatchEvent(this.$event)
     })
-    this.$input.addEventListener('click', (e) => {
+    svgEditor.$click(this.$input, (e) => {
       e.preventDefault()
       this.value = e.target.value
       this.dispatchEvent(this.$event)