Merge pull request #634 from SVG-Edit/test-mobile

first level mobile support

src/common/browser.js

@@ -15,7 +15,6 @@ const isWebkit_ = userAgent.includes('AppleWebKit')
 const isGecko_ = userAgent.includes('Gecko/')
 const isChrome_ = userAgent.includes('Chrome/')
 const isMac_ = userAgent.includes('Macintosh')
-const isTouch_ = 'ontouchstart' in window
 
 // text character positioning (for IE9 and now Chrome)
 const supportsGoodTextCharPos_ = (function () {
@@ -60,11 +59,6 @@ export const isChrome = () => isChrome_
  * @returns {boolean}
 */
 export const isMac = () => isMac_
-/**
- * @function module:browser.isTouch
- * @returns {boolean}
-*/
-export const isTouch = () => isTouch_
 
 /**
  * @function module:browser.supportsGoodTextCharPos

src/editor/Editor.js

@@ -16,7 +16,6 @@
 import './components/index.js'
 import './dialogs/index.js'
 
-import './touch.js'
 import { isMac } from '../common/browser.js'
 
 import SvgCanvas from '../svgcanvas/svgcanvas.js'
@@ -29,7 +28,7 @@ import LayersPanel from './panels/LayersPanel.js'
 import MainMenu from './MainMenu.js'
 import { getParentsUntil } from './components/jgraduate/Util.js'
 
-const { $id, $qa, decode64, blankPageObjectURL } = SvgCanvas
+const { $id, $qa, $click, decode64, blankPageObjectURL } = SvgCanvas
 
 /**
  *
@@ -55,6 +54,7 @@ class Editor extends EditorStartup {
     this.storagePromptState = 'ignore'
 
     this.svgCanvas = null
+    this.$click = $click
     this.isReady = false
     this.customExportImage = false
     this.customExportPDF = false

src/editor/EditorStartup.js

@@ -1,5 +1,4 @@
 /* globals seConfirm seAlert */
-import './touch.js'
 import { convertUnit } from '../common/units.js'
 import {
   putLocale
@@ -41,7 +40,7 @@ const readySignal = () => {
   }
 }
 
-const { $id, $qq } = SvgCanvas
+const { $id, $qq, $click } = SvgCanvas
 
 /**
  *
@@ -145,7 +144,7 @@ class EditorStartup {
 
     const aLink = $id('cur_context_panel')
 
-    aLink.addEventListener('click', (evt) => {
+    $click(aLink, (evt) => {
       const link = evt.target
       if (link.hasAttribute('data-root')) {
         this.svgCanvas.leaveContext()

src/editor/MainMenu.js

@@ -3,7 +3,7 @@ import SvgCanvas from '../svgcanvas/svgcanvas.js'
 import { convertUnit, isValidUnit } from '../common/units.js'
 import { isChrome } from '../common/browser.js'
 
-const { $id } = SvgCanvas
+const { $id, $click } = SvgCanvas
 const homePage = 'https://github.com/SVG-Edit/svgedit'
 
 /**
@@ -283,7 +283,7 @@ class MainMenu {
     /**
      * Associate all button actions as well as non-button keyboard shortcuts.
      */
-    $id('tool_export').addEventListener('click', function () {
+    $click($id('tool_export'), function () {
       document
         .getElementById('se-export-dialog')
         .setAttribute('dialog', 'open')

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)
+    svgEditor.$click(this, onClickHandler)
-    this.$menu.addEventListener('click', onClickHandler)
+    svgEditor.$click(this.$menu, onClickHandler)
-    this.$lib.addEventListener('click', onClickHandler)
+    svgEditor.$click(this.$lib, onClickHandler)
-    this.$handle.addEventListener('click', 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)
+    svgEditor.$click(this, onClickHandler)
-    this.$handle.addEventListener('click', 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)

src/editor/dialogs/cmenuDialog.js

@@ -1,3 +1,4 @@
+/* globals svgEditor */
 import cMenuDialogHTML from './cmenuDialog.html'
 const template = document.createElement('template')
 template.innerHTML = cMenuDialogHTML
@@ -228,17 +229,17 @@ export class SeCMenuDialog extends HTMLElement {
     }
     this._workarea.addEventListener('contextmenu', onMenuOpenHandler)
     this._workarea.addEventListener('mousedown', onMenuCloseHandler)
-    this.$cutLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'cut'))
+    svgEditor.$click(this.$cutLink, (evt) => onMenuClickHandler(evt, 'cut'))
-    this.$copyLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'copy'))
+    svgEditor.$click(this.$copyLink, (evt) => onMenuClickHandler(evt, 'copy'))
-    this.$pasteLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'paste'))
+    svgEditor.$click(this.$pasteLink, (evt) => onMenuClickHandler(evt, 'paste'))
-    this.$pasteInPlaceLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'paste_in_place'))
+    svgEditor.$click(this.$pasteInPlaceLink, (evt) => onMenuClickHandler(evt, 'paste_in_place'))
-    this.$deleteLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'delete'))
+    svgEditor.$click(this.$deleteLink, (evt) => onMenuClickHandler(evt, 'delete'))
-    this.$groupLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'group'))
+    svgEditor.$click(this.$groupLink, (evt) => onMenuClickHandler(evt, 'group'))
-    this.$ungroupLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'ungroup'))
+    svgEditor.$click(this.$ungroupLink, (evt) => onMenuClickHandler(evt, 'ungroup'))
-    this.$moveFrontLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'move_front'))
+    svgEditor.$click(this.$moveFrontLink, (evt) => onMenuClickHandler(evt, 'move_front'))
-    this.$moveUpLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'move_up'))
+    svgEditor.$click(this.$moveUpLink, (evt) => onMenuClickHandler(evt, 'move_up'))
-    this.$moveDownLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'move_down'))
+    svgEditor.$click(this.$moveDownLink, (evt) => onMenuClickHandler(evt, 'move_down'))
-    this.$moveBackLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'move_back'))
+    svgEditor.$click(this.$moveBackLink, (evt) => onMenuClickHandler(evt, 'move_back'))
   }
 }
 

src/editor/dialogs/cmenuLayersDialog.js

@@ -1,3 +1,4 @@
+/* globals svgEditor */
 import cMenuLayersDialog from './cmenuLayersDialog.html'
 
 const template = document.createElement('template')
@@ -140,15 +141,15 @@ export class SeCMenuLayerDialog extends HTMLElement {
     if (this._workarea !== undefined) {
       this._workarea.addEventListener('contextmenu', onMenuOpenHandler)
       if (this.getAttribute('leftclick') === 'true') {
-        this._workarea.addEventListener('click', onMenuOpenHandler)
+        svgEditor.$click(this._workarea, onMenuOpenHandler)
       }
       this._workarea.addEventListener('mousedown', onMenuCloseHandler)
       this.$sidePanels.addEventListener('mousedown', onMenuCloseHandler)
     }
-    this.$duplicateLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'dupe', this.source))
+    svgEditor.$click(this.$duplicateLink, (evt) => onMenuClickHandler(evt, 'dupe', this.source))
-    this.$deleteLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'delete', this.source))
+    svgEditor.$click(this.$deleteLink, (evt) => onMenuClickHandler(evt, 'delete', this.source))
-    this.$mergeDownLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'merge_down', this.source))
+    svgEditor.$click(this.$mergeDownLink, (evt) => onMenuClickHandler(evt, 'merge_down', this.source))
-    this.$mergeAllLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'merge_all', this.source))
+    svgEditor.$click(this.$mergeAllLink, (evt) => onMenuClickHandler(evt, 'merge_all', this.source))
   }
 }
 

src/editor/dialogs/editorPreferencesDialog.js

@@ -1,3 +1,4 @@
+/* globals svgEditor */
 import editorPreferencesDialog from './editorPreferencesDialog.html'
 const template = document.createElement('template')
 template.innerHTML = editorPreferencesDialog
@@ -374,13 +375,13 @@ export class SeEditPrefsDialog extends HTMLElement {
     const blocks = this.$bgBlocks.querySelectorAll('div')
     const curBg = 'cur_background'
     blocks.forEach(function (blk) {
-      blk.addEventListener('click', function () {
+      svgEditor.$click(blk, function () {
         blocks.forEach((el) => el.classList.remove(curBg))
         blk.classList.add(curBg)
       })
     })
-    this.$saveBtn.addEventListener('click', onSaveHandler)
+    svgEditor.$click(this.$saveBtn, onSaveHandler)
-    this.$cancelBtn.addEventListener('click', onCancelHandler)
+    svgEditor.$click(this.$cancelBtn, onCancelHandler)
     this.$dialog.addEventListener('close', onCancelHandler)
   }
 }

src/editor/dialogs/exportDialog.js

@@ -1,3 +1,4 @@
+/* globals svgEditor */
 import './se-elix/define/NumberSpinBox.js'
 
 import exportDialogHTML from './exportDialog.html'
@@ -106,7 +107,7 @@ export class SeExportDialog extends HTMLElement {
       e.preventDefault()
       this.value = e.target.value
     })
-    this.$input.addEventListener('click', (e) => {
+    svgEditor.$click(this.$input, (e) => {
       e.preventDefault()
       this.value = e.target.value
     })
@@ -132,8 +133,8 @@ export class SeExportDialog extends HTMLElement {
         this.$qualityCont.style.display = 'block'
       }
     }
-    this.$okBtn.addEventListener('click', (evt) => onSubmitHandler(evt, 'ok'))
+    svgEditor.$click(this.$okBtn, (evt) => onSubmitHandler(evt, 'ok'))
-    this.$cancelBtn.addEventListener('click', (evt) => onSubmitHandler(evt, 'cancel'))
+    svgEditor.$click(this.$cancelBtn, (evt) => onSubmitHandler(evt, 'cancel'))
     this.$exportOption.addEventListener('change', (evt) => onChangeHandler(evt))
   }
 }

src/editor/dialogs/imagePropertiesDialog.js

@@ -1,3 +1,5 @@
+
+/* globals svgEditor */
 import { isValidUnit } from '../../common/units.js'
 import imagePropertiesDialogHTML from './imagePropertiesDialog.html'
 
@@ -341,8 +343,8 @@ export class SeImgPropDialog extends HTMLElement {
       this.dispatchEvent(closeEvent)
     }
     this.$resolution.addEventListener('change', onChangeHandler)
-    this.$saveBtn.addEventListener('click', onSaveHandler)
+    svgEditor.$click(this.$saveBtn, onSaveHandler)
-    this.$cancelBtn.addEventListener('click', onCancelHandler)
+    svgEditor.$click(this.$cancelBtn, onCancelHandler)
     this.$dialog.addEventListener('close', onCancelHandler)
     this.eventlisten = true
   }

src/editor/dialogs/svgSourceDialog.js

@@ -1,3 +1,4 @@
+/* globals svgEditor */
 import svgSourceDialogHTML from './svgSourceDialog.html'
 
 const template = document.createElement('template')
@@ -194,9 +195,9 @@ export class SeSvgSourceEditorDialog extends HTMLElement {
       })
       this.dispatchEvent(closeEvent)
     }
-    this.$copyBtn.addEventListener('click', onCopyHandler)
+    svgEditor.$click(this.$copyBtn, onCopyHandler)
-    this.$saveBtn.addEventListener('click', onSaveHandler)
+    svgEditor.$click(this.$saveBtn, onSaveHandler)
-    this.$cancelBtn.addEventListener('click', onCancelHandler)
+    svgEditor.$click(this.$cancelBtn, onCancelHandler)
     this.$dialog.addEventListener('close', onCancelHandler)
   }
 }

src/editor/extensions/ext-eyedropper/ext-eyedropper.js

@@ -42,7 +42,7 @@ export default {
       strokeLinecap: 'butt',
       strokeLinejoin: 'miter'
     }
-    const { $id } = svgCanvas
+    const { $id, $click } = svgCanvas
 
     /**
      *
@@ -88,7 +88,7 @@ export default {
         <se-button id="tool_eyedropper" title="${title}" src="eye_dropper.svg" shortcut=${key}></se-button>
         `
         svgCanvas.insertChildAtIndex($id('tools_left'), buttonTemplate, 12)
-        $id('tool_eyedropper').addEventListener('click', () => {
+        $click($id('tool_eyedropper'), () => {
           if (this.leftPanel.updateLeftPanel('tool_eyedropper')) {
             svgCanvas.setMode('eyedropper')
           }

src/editor/extensions/ext-grid/ext-grid.js

@@ -27,7 +27,7 @@ export default {
     const svgEditor = this
     await loadExtensionTranslation(svgEditor)
     const { svgCanvas } = svgEditor
-    const { $id, NS } = svgCanvas
+    const { $id, $click, NS } = svgCanvas
     const svgdoc = $id('svgcanvas').ownerDocument
     const { assignAttributes } = svgCanvas
     const hcanvas = document.createElement('canvas')
@@ -165,7 +165,7 @@ export default {
           <se-button id="view_grid" title="${title}" src="grid.svg"></se-button>
         `
         $id('editor_panel').append(buttonTemplate.content.cloneNode(true))
-        $id('view_grid').addEventListener('click', () => {
+        $click($id('view_grid'), () => {
           svgEditor.configObj.curConfig.showGrid = showGrid = !showGrid
           gridUpdate()
         })

src/editor/extensions/ext-helloworld/ext-helloworld.js

@@ -33,7 +33,7 @@ export default {
     const svgEditor = this
     await loadExtensionTranslation(svgEditor)
     const { svgCanvas } = svgEditor
-    const { $id } = svgCanvas
+    const { $id, $click } = svgCanvas
     return {
       name: svgEditor.i18next.t(`${name}:name`),
       callback () {
@@ -44,7 +44,7 @@ export default {
         <se-button id="hello_world" title="${title}" src="hello_world.svg"></se-button>
         `
         $id('tools_left').append(buttonTemplate.content.cloneNode(true))
-        $id('hello_world').addEventListener('click', () => {
+        $click($id('hello_world'), () => {
           svgCanvas.setMode('hello_world')
         })
       },

src/editor/extensions/ext-imagelib/ext-imagelib.js

@@ -26,7 +26,7 @@ export default {
   name,
   async init ({ decode64, dropXMLInternalSubset }) {
     const svgEditor = this
-    const { $id } = svgEditor.svgCanvas
+    const { $id, $click } = svgEditor.svgCanvas
     const { $svgEditor } = svgEditor
     const { imgPath } = svgEditor.configObj.curConfig
 
@@ -382,8 +382,7 @@ export default {
         submit.textContent = 'Import selected'
         submit.setAttribute('style', 'position: absolute;bottom: 10px;right: -10px;')
         $id('imgbrowse').appendChild(submit)
-        submit.addEventListener('click', toggleMultiLoop)
+        $click(submit, toggleMultiLoop)
-        submit.addEventListener('touchend', toggleMultiLoop)
       }
       submit.style.display = (show) ? 'block' : 'none'
       preview.style.display = (show) ? 'block' : 'none'
@@ -424,10 +423,7 @@ export default {
         const button = document.createElement('button')
         button.innerHTML = svgEditor.i18next.t('common.cancel')
         browser.appendChild(button)
-        button.addEventListener('click', function () {
+        $click(button, function () {
-          $id('imgbrowse_holder').style.display = 'none'
-        })
-        button.addEventListener('touchend', function () {
           $id('imgbrowse_holder').style.display = 'none'
         })
         button.setAttribute('style', 'position: absolute;top: 5px;right: 10px;')
@@ -440,14 +436,7 @@ export default {
         back.style.visibility = 'hidden'
         back.innerHTML = `<img class="svg_icon" src="${imgPath}/library.svg" alt="icon" width="16" height="16" />` + svgEditor.i18next.t(`${name}:show_list`)
         leftBlock.appendChild(back)
-        back.addEventListener('click', function () {
+        $click(back, function () {
-          frame.setAttribute('src', 'about:blank')
-          frame.style.display = 'none'
-          libOpts.style.display = 'block'
-          header.textContent = allLibs
-          back.style.display = 'none'
-        })
-        back.addEventListener('touchend', function () {
           frame.setAttribute('src', 'about:blank')
           frame.style.display = 'none'
           libOpts.style.display = 'block'
@@ -483,14 +472,7 @@ export default {
           const li = document.createElement('li')
           libOpts.appendChild(li)
           li.textContent = name
-          li.addEventListener('click', function () {
+          $click(li, function () {
-            frame.setAttribute('src', url)
-            frame.style.display = 'block'
-            header.textContent = name
-            libOpts.style.display = 'none'
-            back.style.display = 'block'
-          })
-          li.addEventListener('touchend', function () {
             frame.setAttribute('src', url)
             frame.style.display = 'block'
             header.textContent = name
@@ -516,7 +498,7 @@ export default {
         <se-menu-item id="tool_imagelib" label="${key}" src="library.svg"></se-menu-item>
         `
         insertAfter($id('tool_export'), buttonTemplate.content.cloneNode(true))
-        $id('tool_imagelib').addEventListener('click', () => {
+        $click($id('tool_imagelib'), () => {
           showBrowser()
         })
 

src/editor/extensions/ext-imagelib/index.js

@@ -1,6 +1,8 @@
+/* globals svgEditor */
+
 const atags = document.querySelectorAll('a')
 Array.prototype.forEach.call(atags, function (aEle) {
-  aEle.addEventListener('click', function (event) {
+  svgEditor.$click(aEle, function (event) {
     event.preventDefault()
     const { href } = event.currentTarget
     const target = window.parent

src/editor/extensions/ext-opensave/ext-opensave.js

@@ -37,7 +37,7 @@ export default {
   async init (_S) {
     const svgEditor = this
     const { svgCanvas } = svgEditor
-    const { $id } = svgCanvas
+    const { $id, $click } = svgCanvas
     await loadExtensionTranslation(svgEditor)
     /**
     * @param {Event} e
@@ -250,11 +250,11 @@ export default {
         svgCanvas.insertChildAtIndex($id('main_button'), importButtonTemplate, 4)
 
         // handler
-        $id('tool_clear').addEventListener('click', clickClear.bind(this))
+        $click($id('tool_clear'), clickClear.bind(this))
-        $id('tool_open').addEventListener('click', clickOpen.bind(this))
+        $click($id('tool_open'), clickOpen.bind(this))
-        $id('tool_save').addEventListener('click', clickSave.bind(this, 'save'))
+        $click($id('tool_save'), clickSave.bind(this, 'save'))
-        $id('tool_save_as').addEventListener('click', clickSave.bind(this, 'saveas'))
+        $click($id('tool_save_as'), clickSave.bind(this, 'saveas'))
-        $id('tool_import').addEventListener('click', () => imgImport.click())
+        $click($id('tool_import'), () => imgImport.click())
       }
     }
   }

src/editor/extensions/ext-overview_window/ext-overview_window.js

@@ -12,7 +12,7 @@ export default {
   name: 'overview_window',
   init ({ _$ }) {
     const svgEditor = this
-    const { $id } = svgEditor.svgCanvas
+    const { $id, $click } = svgEditor.svgCanvas
     const overviewWindowGlobals = {}
 
     // Define and insert the base html element.
@@ -118,7 +118,7 @@ export default {
     const parentElem = document.querySelector('#overviewMiniView')
     dragmove(dragElem, dragElem, parentElem, onStart, onEnd, onDrag)
 
-    $id('overviewMiniView').addEventListener('click', (evt) => {
+    $click($id('overviewMiniView'), (evt) => {
       // Firefox doesn't support evt.offsetX and evt.offsetY.
       const mouseX = (evt.offsetX || evt.originalEvent.layerX)
       const mouseY = (evt.offsetY || evt.originalEvent.layerY)

src/editor/extensions/ext-panning/ext-panning.js

@@ -32,9 +32,7 @@ export default {
     const {
       svgCanvas
     } = svgEditor
-    const {
+    const { $id, $click } = svgCanvas
-      $id
-    } = svgCanvas
     const insertAfter = (referenceNode, newNode) => {
       referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling)
     }
@@ -48,7 +46,7 @@ export default {
         <se-button id="ext-panning" title="${btitle}" src="panning.svg"></se-button>
         `
         insertAfter($id('tool_zoom'), buttonTemplate.content.cloneNode(true))
-        $id('ext-panning').addEventListener('click', () => {
+        $click($id('ext-panning'), () => {
           if (this.leftPanel.updateLeftPanel('ext-panning')) {
             svgCanvas.setMode('ext-panning')
           }

src/editor/extensions/ext-polystar/ext-polystar.js

@@ -29,7 +29,7 @@ export default {
     const { svgCanvas } = svgEditor
     const { ChangeElementCommand } = svgCanvas.history
     const addToHistory = (cmd) => { svgCanvas.undoMgr.addCommandToHistory(cmd) }
-    const { $id } = svgCanvas
+    const { $id, $click } = svgCanvas
     let selElems
     let started
     let newFO
@@ -90,14 +90,14 @@ export default {
           `
         svgCanvas.insertChildAtIndex($id('tools_left'), buttonTemplate, 10)
         // handler
-        $id('tool_star').addEventListener('click', () => {
+        $click($id('tool_star'), () => {
           if (this.leftPanel.updateLeftPanel('tool_star')) {
             svgCanvas.setMode('star')
             showPanel(true, 'star')
             showPanel(false, 'polygon')
           }
         })
-        $id('tool_polygon').addEventListener('click', () => {
+        $click($id('tool_polygon'), () => {
           if (this.leftPanel.updateLeftPanel('tool_polygon')) {
             svgCanvas.setMode('polygon')
             showPanel(true, 'polygon')

src/editor/extensions/ext-shapes/ext-shapes.js

@@ -25,7 +25,7 @@ export default {
   async init () {
     const svgEditor = this
     const canv = svgEditor.svgCanvas
-    const { $id } = canv
+    const { $id, $click } = canv
     const svgroot = canv.getSvgRoot()
     let lastBBox = {}
     await loadExtensionTranslation(svgEditor)
@@ -45,7 +45,7 @@ export default {
           src="shapelib.svg"></se-explorerbutton>
           `
           canv.insertChildAtIndex($id('tools_left'), buttonTemplate, 9)
-          $id('tool_shapelib').addEventListener('click', () => {
+          $click($id('tool_shapelib'), () => {
             if (this.leftPanel.updateLeftPanel('tool_shapelib')) {
               canv.setMode(modeId)
             }

src/editor/extensions/ext-storage/storageDialog.js

@@ -1,3 +1,4 @@
+/* globals svgEditor */
 import storageDialogHTML from './storageDialog.html'
 
 const template = document.createElement('template')
@@ -101,7 +102,7 @@ export class SeStorageDialog extends HTMLElement {
         node.setAttribute('title', newValue)
         break
       default:
-      // super.attributeChangedCallback(name, oldValue, newValue);
+        // super.attributeChangedCallback(name, oldValue, newValue);
         break
     }
   }
@@ -128,17 +129,18 @@ export class SeStorageDialog extends HTMLElement {
    */
   connectedCallback () {
     const onSubmitHandler = (e, action) => {
-      const triggerEvent = new CustomEvent('change', {
+      const triggerEvent = new CustomEvent('change',
-        detail: {
+        {
-          trigger: action,
+          detail: {
-          select: this.$storageInput.value,
+            trigger: action,
-          checkbox: this.$rememberInput.checked
+            select: this.$storageInput.value,
-        }
+            checkbox: this.$rememberInput.checked
-      })
+          }
+        })
       this.dispatchEvent(triggerEvent)
     }
-    this.$okBtn.addEventListener('click', (evt) => onSubmitHandler(evt, 'ok'))
+    svgEditor.$click(this.$okBtn, (evt) => onSubmitHandler(evt, 'ok'))
-    this.$cancelBtn.addEventListener('click', (evt) => onSubmitHandler(evt, 'cancel'))
+    svgEditor.$click(this.$cancelBtn, (evt) => onSubmitHandler(evt, 'cancel'))
   }
 
   /**

src/editor/panels/LayersPanel.js

@@ -1,7 +1,7 @@
 import SvgCanvas from '../../svgcanvas/svgcanvas.js'
 import LayersPanelHtml from './LayersPanel.html'
 
-const { $id } = SvgCanvas
+const { $id, $click } = SvgCanvas
 
 /**
  *
@@ -61,14 +61,14 @@ class LayersPanel {
     menuLayerBox.setAttribute('leftclick', false)
     this.editor.$container.append(menuLayerBox)
     menuLayerBox.init(i18next)
-    $id('layer_new').addEventListener('click', this.newLayer.bind(this))
+    $click($id('layer_new'), this.newLayer.bind(this))
-    $id('layer_delete').addEventListener('click', this.deleteLayer.bind(this))
+    $click($id('layer_delete'), this.deleteLayer.bind(this))
-    $id('layer_up').addEventListener('click', () => this.moveLayer.bind(this)(-1))
+    $click($id('layer_up'), () => this.moveLayer.bind(this)(-1))
-    $id('layer_down').addEventListener('click', () => this.moveLayer.bind(this)(1))
+    $click($id('layer_down'), () => this.moveLayer.bind(this)(1))
-    $id('layer_rename').addEventListener('click', this.layerRename.bind(this))
+    $click($id('layer_rename'), this.layerRename.bind(this))
     $id('se-cmenu-layers-more').addEventListener('change', this.lmenuFunc.bind(this))
     $id('se-cmenu-layers-list').addEventListener('change', (e) => { this.lmenuFunc(e) })
-    $id('sidepanel_handle').addEventListener('click', () => this.toggleSidePanel())
+    $click($id('sidepanel_handle'), () => this.toggleSidePanel())
     this.toggleSidePanel(this.editor.configObj.curConfig.showlayers)
   }
 
@@ -295,7 +295,7 @@ class LayersPanel {
     })
     const elements = $id('layerlist').querySelectorAll('td.layervis')
     Array.from(elements).forEach(function (element) {
-      element.addEventListener('click', function (evt) {
+      $click(element, function (evt) {
         const ele = evt.currentTarget.parentNode.querySelector('td.layername')
         const name = (ele) ? ele.textContent : ''
         const vis = evt.currentTarget.classList.contains('layerinvis')

src/editor/panels/LeftPanel.js

@@ -1,7 +1,7 @@
 import SvgCanvas from '../../svgcanvas/svgcanvas.js'
 import leftPanelHTML from './LeftPanel.html'
 
-const { $id, $qa } = SvgCanvas
+const { $id, $qa, $click } = SvgCanvas
 
 /*
  * register actions for left panel
@@ -186,7 +186,7 @@ class LeftPanel {
    * @type {module}
    */
   add (id, handler) {
-    $id(id).addEventListener('click', () => {
+    $click($id(id), () => {
       if (this.updateLeftPanel(id)) {
         handler()
       }
@@ -202,22 +202,22 @@ class LeftPanel {
     template.innerHTML = leftPanelHTML
     this.editor.$svgEditor.append(template.content.cloneNode(true))
     // register actions for left panel
-    $id('tool_select').addEventListener('click', this.clickSelect.bind(this))
+    $click($id('tool_select'), this.clickSelect.bind(this))
-    $id('tool_fhpath').addEventListener('click', this.clickFHPath.bind(this))
+    $click($id('tool_fhpath'), this.clickFHPath.bind(this))
-    $id('tool_text').addEventListener('click', this.clickText.bind(this))
+    $click($id('tool_text'), this.clickText.bind(this))
-    $id('tool_image').addEventListener('click', this.clickImage.bind(this))
+    $click($id('tool_image'), this.clickImage.bind(this))
-    $id('tool_zoom').addEventListener('click', this.clickZoom.bind(this))
+    $click($id('tool_zoom'), this.clickZoom.bind(this))
     $id('tool_zoom').addEventListener('dblclick', this.dblclickZoom.bind(this))
-    $id('tool_path').addEventListener('click', this.clickPath.bind(this))
+    $click($id('tool_path'), this.clickPath.bind(this))
-    $id('tool_line').addEventListener('click', this.clickLine.bind(this))
+    $click($id('tool_line'), this.clickLine.bind(this))
 
     // flyout
-    $id('tool_rect').addEventListener('click', this.clickRect.bind(this))
+    $click($id('tool_rect'), this.clickRect.bind(this))
-    $id('tool_square').addEventListener('click', this.clickSquare.bind(this))
+    $click($id('tool_square'), this.clickSquare.bind(this))
-    $id('tool_fhrect').addEventListener('click', this.clickFHRect.bind(this))
+    $click($id('tool_fhrect'), this.clickFHRect.bind(this))
-    $id('tool_ellipse').addEventListener('click', this.clickEllipse.bind(this))
+    $click($id('tool_ellipse'), this.clickEllipse.bind(this))
-    $id('tool_circle').addEventListener('click', this.clickCircle.bind(this))
+    $click($id('tool_circle'), this.clickCircle.bind(this))
-    $id('tool_fhellipse').addEventListener('click', this.clickFHEllipse.bind(this))
+    $click($id('tool_fhellipse'), this.clickFHEllipse.bind(this))
   }
 }
 

src/editor/panels/TopPanel.js

@@ -5,7 +5,7 @@ import SvgCanvas from '../../svgcanvas/svgcanvas.js'
 import { isValidUnit, getTypeMap, convertUnit } from '../../common/units.js'
 import topPanelHTML from './TopPanel.html'
 
-const { $qa, $id } = SvgCanvas
+const { $qa, $id, $click } = SvgCanvas
 
 /*
  * register actions for left panel
@@ -854,45 +854,45 @@ class TopPanel {
     newSeEditorDialog.init(i18next)
     $id('tool_link_url').setAttribute('title', i18next.t('tools.set_link_url'))
     // register action to top panel buttons
-    $id('tool_source').addEventListener('click', this.showSourceEditor.bind(this))
+    $click($id('tool_source'), this.showSourceEditor.bind(this))
-    $id('tool_wireframe').addEventListener('click', this.clickWireframe.bind(this))
+    $click($id('tool_wireframe'), this.clickWireframe.bind(this))
-    $id('tool_undo').addEventListener('click', this.clickUndo.bind(this))
+    $click($id('tool_undo'), this.clickUndo.bind(this))
-    $id('tool_redo').addEventListener('click', this.clickRedo.bind(this))
+    $click($id('tool_redo'), this.clickRedo.bind(this))
-    $id('tool_clone').addEventListener('click', this.clickClone.bind(this))
+    $click($id('tool_clone'), this.clickClone.bind(this))
-    $id('tool_clone_multi').addEventListener('click', this.clickClone.bind(this))
+    $click($id('tool_clone_multi'), this.clickClone.bind(this))
-    $id('tool_delete').addEventListener('click', this.deleteSelected.bind(this))
+    $click($id('tool_delete'), this.deleteSelected.bind(this))
-    $id('tool_delete_multi').addEventListener('click', this.deleteSelected.bind(this))
+    $click($id('tool_delete_multi'), this.deleteSelected.bind(this))
-    $id('tool_move_top').addEventListener('click', this.moveToTopSelected.bind(this))
+    $click($id('tool_move_top'), this.moveToTopSelected.bind(this))
-    $id('tool_move_bottom').addEventListener('click', this.moveToBottomSelected.bind(this))
+    $click($id('tool_move_bottom'), this.moveToBottomSelected.bind(this))
-    $id('tool_topath').addEventListener('click', this.convertToPath.bind(this))
+    $click($id('tool_topath'), this.convertToPath.bind(this))
-    $id('tool_make_link').addEventListener('click', this.makeHyperlink.bind(this))
+    $click($id('tool_make_link'), this.makeHyperlink.bind(this))
-    $id('tool_make_link_multi').addEventListener('click', this.makeHyperlink.bind(this))
+    $click($id('tool_make_link_multi'), this.makeHyperlink.bind(this))
-    $id('tool_reorient').addEventListener('click', this.reorientPath.bind(this))
+    $click($id('tool_reorient'), this.reorientPath.bind(this))
-    $id('tool_group_elements').addEventListener('click', this.clickGroup.bind(this))
+    $click($id('tool_group_elements'), this.clickGroup.bind(this))
     $id('tool_position').addEventListener('change', (evt) => this.clickAlignEle.bind(this)(evt))
-    $id('tool_align_left').addEventListener('click', () => this.clickAlign.bind(this)('left'))
+    $click($id('tool_align_left'), () => this.clickAlign.bind(this)('left'))
-    $id('tool_align_right').addEventListener('click', () => this.clickAlign.bind(this)('right'))
+    $click($id('tool_align_right'), () => this.clickAlign.bind(this)('right'))
-    $id('tool_align_center').addEventListener('click', () => this.clickAlign.bind(this)('center'))
+    $click($id('tool_align_center'), () => this.clickAlign.bind(this)('center'))
-    $id('tool_align_top').addEventListener('click', () => this.clickAlign.bind(this)('top'))
+    $click($id('tool_align_top'), () => this.clickAlign.bind(this)('top'))
-    $id('tool_align_bottom').addEventListener('click', () => this.clickAlign.bind(this)('bottom'))
+    $click($id('tool_align_bottom'), () => this.clickAlign.bind(this)('bottom'))
-    $id('tool_align_middle').addEventListener('click', () => this.clickAlign.bind(this)('middle'))
+    $click($id('tool_align_middle'), () => this.clickAlign.bind(this)('middle'))
-    $id('tool_node_clone').addEventListener('click', this.clonePathNode.bind(this))
+    $click($id('tool_node_clone'), this.clonePathNode.bind(this))
-    $id('tool_node_delete').addEventListener('click', this.deletePathNode.bind(this))
+    $click($id('tool_node_delete'), this.deletePathNode.bind(this))
-    $id('tool_openclose_path').addEventListener('click', this.opencloseSubPath.bind(this))
+    $click($id('tool_openclose_path'), this.opencloseSubPath.bind(this))
-    $id('tool_add_subpath').addEventListener('click', this.addSubPath.bind(this))
+    $click($id('tool_add_subpath'), this.addSubPath.bind(this))
-    $id('tool_node_link').addEventListener('click', this.linkControlPoints.bind(this))
+    $click($id('tool_node_link'), this.linkControlPoints.bind(this))
     $id('angle').addEventListener('change', this.changeRotationAngle.bind(this))
     $id('blur').addEventListener('change', this.changeBlur.bind(this))
     $id('rect_rx').addEventListener('change', this.changeRectRadius.bind(this))
     $id('font_size').addEventListener('change', this.changeFontSize.bind(this))
-    $id('tool_ungroup').addEventListener('click', this.clickGroup.bind(this))
+    $click($id('tool_ungroup'), this.clickGroup.bind(this))
-    $id('tool_bold').addEventListener('click', this.clickBold.bind(this))
+    $click($id('tool_bold'), this.clickBold.bind(this))
-    $id('tool_italic').addEventListener('click', this.clickItalic.bind(this))
+    $click($id('tool_italic'), this.clickItalic.bind(this))
-    $id('tool_text_decoration_underline').addEventListener('click', () => this.clickTextDecoration.bind(this)('underline'))
+    $click($id('tool_text_decoration_underline'), () => this.clickTextDecoration.bind(this)('underline'))
-    $id('tool_text_decoration_linethrough').addEventListener('click', () => this.clickTextDecoration.bind(this)('line-through'))
+    $click($id('tool_text_decoration_linethrough'), () => this.clickTextDecoration.bind(this)('line-through'))
-    $id('tool_text_decoration_overline').addEventListener('click', () => this.clickTextDecoration.bind(this)('overline'))
+    $click($id('tool_text_decoration_overline'), () => this.clickTextDecoration.bind(this)('overline'))
     $id('tool_text_anchor').addEventListener('change', (evt) => this.clickTextAnchor.bind(this)(evt))
-    $id('tool_unlink_use').addEventListener('click', this.clickGroup.bind(this))
+    $click($id('tool_unlink_use'), this.clickGroup.bind(this))
     $id('image_url').addEventListener('change', (evt) => { this.setImageURL(evt.currentTarget.value) });
 
     // all top panel attributes

src/svgcanvas/select.js

@@ -6,13 +6,14 @@
  * @copyright 2010 Alexis Deveria, 2010 Jeff Schiller
  */
 
-import { isTouch, isWebkit } from '../common/browser.js' // , isOpera
+import { isWebkit } from '../common/browser.js' // , isOpera
 import { getRotationAngle, getBBox, getStrokedBBox } from './utilities.js'
 import { transformListToTransform, transformBox, transformPoint } from './math.js'
 
 let svgCanvas
 let selectorManager_ // A Singleton
-const gripRadius = isTouch() ? 10 : 4
+// change radius if touch screen
+const gripRadius = window.ontouchstart ? 10 : 4
 
 /**
 * Private class for DOM element selection boxes.

src/svgcanvas/svgcanvas.js

@@ -7,7 +7,6 @@
  * @copyright 2010 Alexis Deveria, 2010 Pavol Rusnak, 2010 Jeff Schiller, 2021 OptimistikSAS
  *
  */
-
 import { Canvg as canvg } from 'canvg'
 import 'pathseg' // SVGPathSeg Polyfill (see https://github.com/progers/pathseg)
 
@@ -17,6 +16,7 @@ import * as draw from './draw.js'
 import {
   init as pasteInit, pasteElementsMethod
 } from './paste-elem.js'
+import { init as touchInit } from './touch.js'
 import { svgRootElement } from './svgroot.js'
 import {
   init as undoInit, changeSelectedAttributeNoUndoMethod,
@@ -45,7 +45,7 @@ import {
   getBBoxOfElementAsPath, convertToPath, encode64, decode64,
   getVisibleElements, init as utilsInit,
   getBBox as utilsGetBBox, getStrokedBBoxDefaultVisible, blankPageObjectURL,
-  $id, $qa, $qq, getFeGaussianBlur, stringToHTML, insertChildAtIndex
+  $id, $qa, $qq, $click, getFeGaussianBlur, stringToHTML, insertChildAtIndex
 } from './utilities.js'
 import {
   matrixMultiply, hasMatrixTransform, transformListToTransform
@@ -162,6 +162,7 @@ class SvgCanvas {
     container.append(this.svgroot)
     // The actual element that represents the final output SVG element.
     this.svgContent = this.svgdoc.createElementNS(NS.SVG, 'svg')
+    touchInit(this)
     clearInit(this)
     this.clearSvgContentElement()
     // Current `draw.Drawing` object.
@@ -243,7 +244,7 @@ class SvgCanvas {
     }
     container.addEventListener('mousedown', this.mouseDownEvent)
     container.addEventListener('mousemove', this.mouseMoveEvent)
-    container.addEventListener('click', handleLinkInCanvas)
+    $click(container, handleLinkInCanvas)
     container.addEventListener('dblclick', this.dblClickEvent)
     container.addEventListener('mouseup', this.mouseUpEvent)
     container.addEventListener('mouseleave', this.mouseOutEvent)
@@ -947,6 +948,7 @@ class SvgCanvas {
     this.$id = $id
     this.$qq = $qq
     this.$qa = $qa
+    this.$click = $click
   }
 } // End class
 
@@ -955,6 +957,7 @@ class SvgCanvas {
 SvgCanvas.$id = $id
 SvgCanvas.$qq = $qq
 SvgCanvas.$qa = $qa
+SvgCanvas.$click = $click
 SvgCanvas.encode64 = encode64
 SvgCanvas.decode64 = decode64
 SvgCanvas.mergeDeep = mergeDeep

src/svgcanvas/text-actions.js

@@ -288,7 +288,7 @@ export const textActionsMethod = (function () {
     setSelection(first, last)
 
     // Set tripleclick
-    evt.target.addEventListener('click', selectAll)
+    svgCanvas.$click(evt.target, selectAll)
 
     setTimeout(function () {
       evt.target.removeEventListener('click', selectAll)

src/svgcanvas/touch.js

@@ -4,7 +4,8 @@
  * @param {Event} ev
  * @returns {void}
  */
-function touchHandler (ev) {
+const touchHandler = (ev) => {
+  ev.preventDefault()
   const { changedTouches } = ev
   const first = changedTouches[0]
 
@@ -39,11 +40,12 @@ function touchHandler (ev) {
   })
   if (changedTouches.length < 2) {
     first.target.dispatchEvent(simulatedEvent)
-    ev.preventDefault()
   }
 }
 
-document.addEventListener('touchstart', touchHandler, true)
+export const init = (svgCanvas) => {
-document.addEventListener('touchmove', touchHandler, true)
+  svgCanvas.svgroot.addEventListener('touchstart', touchHandler)
-document.addEventListener('touchend', touchHandler, true)
+  svgCanvas.svgroot.addEventListener('touchmove', touchHandler)
-document.addEventListener('touchcancel', touchHandler, true)
+  svgCanvas.svgroot.addEventListener('touchend', touchHandler)
+  svgCanvas.svgroot.addEventListener('touchcancel', touchHandler)
+}

src/svgcanvas/utilities.js

@@ -1136,7 +1136,7 @@ export const snapToGrid = (value) => {
  * @returns {void}
  */
 export const preventClickDefault = (img) => {
-  img.addEventListener('click', (e) => {
+  $click(img, (e) => {
     e.preventDefault()
   })
 }
@@ -1191,3 +1191,7 @@ export const insertChildAtIndex = (parent, child, index = 0) => {
 export const $id = (id) => document.getElementById(id)
 export const $qq = (sel) => document.querySelector(sel)
 export const $qa = (sel) => [...document.querySelectorAll(sel)]
+export const $click = (element, handler) => {
+  element.addEventListener('click', handler)
+  element.addEventListener('touchend', handler)
+}