From a48fc66c1c38d9a7887551f87d08c2b91397d998 Mon Sep 17 00:00:00 2001 From: JFH <20402845+jfhenon@users.noreply.github.com> Date: Wed, 5 Jan 2022 20:55:42 -0300 Subject: [PATCH] $click to allow (more) responsiveness --- src/editor/EditorStartup.js | 4 +- src/editor/MainMenu.js | 4 +- .../components/jgraduate/jQuery.jGraduate.js | 10 +-- .../components/jgraduate/jQuery.jPicker.js | 13 ++-- src/editor/components/seColorPicker.js | 2 +- src/editor/components/seExplorerButton.js | 8 +-- src/editor/components/seFlyingButton.js | 4 +- src/editor/components/sePalette.js | 3 +- src/editor/components/seSpinInput.js | 2 +- src/editor/dialogs/cmenuDialog.js | 23 ++++--- src/editor/dialogs/cmenuLayersDialog.js | 11 +-- src/editor/dialogs/editorPreferencesDialog.js | 7 +- src/editor/dialogs/exportDialog.js | 7 +- src/editor/dialogs/imagePropertiesDialog.js | 6 +- src/editor/dialogs/svgSourceDialog.js | 7 +- .../ext-eyedropper/ext-eyedropper.js | 4 +- src/editor/extensions/ext-grid/ext-grid.js | 4 +- .../ext-helloworld/ext-helloworld.js | 4 +- .../extensions/ext-imagelib/ext-imagelib.js | 23 ++----- src/editor/extensions/ext-imagelib/index.js | 4 +- .../extensions/ext-opensave/ext-opensave.js | 12 ++-- .../ext-overview_window.js | 4 +- .../extensions/ext-panning/ext-panning.js | 6 +- .../extensions/ext-polystar/ext-polystar.js | 6 +- .../extensions/ext-shapes/ext-shapes.js | 4 +- .../extensions/ext-storage/storageDialog.js | 7 +- src/editor/panels/LayersPanel.js | 16 ++--- src/editor/panels/LeftPanel.js | 30 ++++---- src/editor/panels/TopPanel.js | 68 +++++++++---------- src/svgcanvas/svgcanvas.js | 6 +- src/svgcanvas/text-actions.js | 2 +- src/svgcanvas/utilities.js | 6 +- 32 files changed, 161 insertions(+), 156 deletions(-) diff --git a/src/editor/EditorStartup.js b/src/editor/EditorStartup.js index 3c576fae..9b37fd91 100644 --- a/src/editor/EditorStartup.js +++ b/src/editor/EditorStartup.js @@ -41,7 +41,7 @@ const readySignal = () => { } } -const { $id, $qq } = SvgCanvas +const { $id, $qq, $click } = SvgCanvas /** * @@ -145,7 +145,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() diff --git a/src/editor/MainMenu.js b/src/editor/MainMenu.js index a8e6504a..ba5a48ac 100644 --- a/src/editor/MainMenu.js +++ b/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') diff --git a/src/editor/components/jgraduate/jQuery.jGraduate.js b/src/editor/components/jgraduate/jQuery.jGraduate.js index b2564918..1c06c11f 100644 --- a/src/editor/components/jgraduate/jQuery.jGraduate.js +++ b/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) { diff --git a/src/editor/components/jgraduate/jQuery.jPicker.js b/src/editor/components/jgraduate/jQuery.jPicker.js index 59294aad..b27513ee 100755 --- a/src/editor/components/jgraduate/jQuery.jPicker.js +++ b/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' diff --git a/src/editor/components/seColorPicker.js b/src/editor/components/seColorPicker.js index 77ea88ed..72b77d3d 100644 --- a/src/editor/components/seColorPicker.js +++ b/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, diff --git a/src/editor/components/seExplorerButton.js b/src/editor/components/seExplorerButton.js index 5f5ea935..b3411b5a 100644 --- a/src/editor/components/seExplorerButton.js +++ b/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) } /** diff --git a/src/editor/components/seFlyingButton.js b/src/editor/components/seFlyingButton.js index 9cab2e2e..863f51c6 100644 --- a/src/editor/components/seFlyingButton.js +++ b/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) } } diff --git a/src/editor/components/sePalette.js b/src/editor/components/sePalette.js index a5240c4d..e7a63e09 100644 --- a/src/editor/components/sePalette.js +++ b/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' diff --git a/src/editor/components/seSpinInput.js b/src/editor/components/seSpinInput.js index 3f04c232..ac5b8c19 100644 --- a/src/editor/components/seSpinInput.js +++ b/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) diff --git a/src/editor/dialogs/cmenuDialog.js b/src/editor/dialogs/cmenuDialog.js index dbd5baeb..aa4d4fbf 100644 --- a/src/editor/dialogs/cmenuDialog.js +++ b/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')) - this.$copyLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'copy')) - this.$pasteLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'paste')) - this.$pasteInPlaceLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'paste_in_place')) - this.$deleteLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'delete')) - this.$groupLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'group')) - this.$ungroupLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'ungroup')) - this.$moveFrontLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'move_front')) - this.$moveUpLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'move_up')) - this.$moveDownLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'move_down')) - this.$moveBackLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'move_back')) + svgEditor.$click(this.$cutLink, (evt) => onMenuClickHandler(evt, 'cut')) + svgEditor.$click(this.$copyLink, (evt) => onMenuClickHandler(evt, 'copy')) + svgEditor.$click(this.$pasteLink, (evt) => onMenuClickHandler(evt, 'paste')) + svgEditor.$click(this.$pasteInPlaceLink, (evt) => onMenuClickHandler(evt, 'paste_in_place')) + svgEditor.$click(this.$deleteLink, (evt) => onMenuClickHandler(evt, 'delete')) + svgEditor.$click(this.$groupLink, (evt) => onMenuClickHandler(evt, 'group')) + svgEditor.$click(this.$ungroupLink, (evt) => onMenuClickHandler(evt, 'ungroup')) + svgEditor.$click(this.$moveFrontLink, (evt) => onMenuClickHandler(evt, 'move_front')) + svgEditor.$click(this.$moveUpLink, (evt) => onMenuClickHandler(evt, 'move_up')) + svgEditor.$click(this.$moveDownLink, (evt) => onMenuClickHandler(evt, 'move_down')) + svgEditor.$click(this.$moveBackLink, (evt) => onMenuClickHandler(evt, 'move_back')) } } diff --git a/src/editor/dialogs/cmenuLayersDialog.js b/src/editor/dialogs/cmenuLayersDialog.js index 93c33c3a..8234491b 100644 --- a/src/editor/dialogs/cmenuLayersDialog.js +++ b/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)) - this.$deleteLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'delete', this.source)) - this.$mergeDownLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'merge_down', this.source)) - this.$mergeAllLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'merge_all', this.source)) + svgEditor.$click(this.$duplicateLink, (evt) => onMenuClickHandler(evt, 'dupe', this.source)) + svgEditor.$click(this.$deleteLink, (evt) => onMenuClickHandler(evt, 'delete', this.source)) + svgEditor.$click(this.$mergeDownLink, (evt) => onMenuClickHandler(evt, 'merge_down', this.source)) + svgEditor.$click(this.$mergeAllLink, (evt) => onMenuClickHandler(evt, 'merge_all', this.source)) } } diff --git a/src/editor/dialogs/editorPreferencesDialog.js b/src/editor/dialogs/editorPreferencesDialog.js index 3993cd8c..6a3e7431 100644 --- a/src/editor/dialogs/editorPreferencesDialog.js +++ b/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) - this.$cancelBtn.addEventListener('click', onCancelHandler) + svgEditor.$click(this.$saveBtn, onSaveHandler) + svgEditor.$click(this.$cancelBtn, onCancelHandler) this.$dialog.addEventListener('close', onCancelHandler) } } diff --git a/src/editor/dialogs/exportDialog.js b/src/editor/dialogs/exportDialog.js index 063fd2bd..2f9bfbc1 100644 --- a/src/editor/dialogs/exportDialog.js +++ b/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')) - this.$cancelBtn.addEventListener('click', (evt) => onSubmitHandler(evt, 'cancel')) + svgEditor.$click(this.$okBtn, (evt) => onSubmitHandler(evt, 'ok')) + svgEditor.$click(this.$cancelBtn, (evt) => onSubmitHandler(evt, 'cancel')) this.$exportOption.addEventListener('change', (evt) => onChangeHandler(evt)) } } diff --git a/src/editor/dialogs/imagePropertiesDialog.js b/src/editor/dialogs/imagePropertiesDialog.js index 809d65a2..acdeb2f9 100644 --- a/src/editor/dialogs/imagePropertiesDialog.js +++ b/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) - this.$cancelBtn.addEventListener('click', onCancelHandler) + svgEditor.$click(this.$saveBtn, onSaveHandler) + svgEditor.$click(this.$cancelBtn, onCancelHandler) this.$dialog.addEventListener('close', onCancelHandler) this.eventlisten = true } diff --git a/src/editor/dialogs/svgSourceDialog.js b/src/editor/dialogs/svgSourceDialog.js index a8a23cd2..a0ead57c 100644 --- a/src/editor/dialogs/svgSourceDialog.js +++ b/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) - this.$saveBtn.addEventListener('click', onSaveHandler) - this.$cancelBtn.addEventListener('click', onCancelHandler) + svgEditor.$click(this.$copyBtn, onCopyHandler) + svgEditor.$click(this.$saveBtn, onSaveHandler) + svgEditor.$click(this.$cancelBtn, onCancelHandler) this.$dialog.addEventListener('close', onCancelHandler) } } diff --git a/src/editor/extensions/ext-eyedropper/ext-eyedropper.js b/src/editor/extensions/ext-eyedropper/ext-eyedropper.js index 66902174..3500ac25 100644 --- a/src/editor/extensions/ext-eyedropper/ext-eyedropper.js +++ b/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 { ` 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') } diff --git a/src/editor/extensions/ext-grid/ext-grid.js b/src/editor/extensions/ext-grid/ext-grid.js index 7baa1adb..ed23f01b 100644 --- a/src/editor/extensions/ext-grid/ext-grid.js +++ b/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 { ` $id('editor_panel').append(buttonTemplate.content.cloneNode(true)) - $id('view_grid').addEventListener('click', () => { + $click($id('view_grid'), () => { svgEditor.configObj.curConfig.showGrid = showGrid = !showGrid gridUpdate() }) diff --git a/src/editor/extensions/ext-helloworld/ext-helloworld.js b/src/editor/extensions/ext-helloworld/ext-helloworld.js index a82afd33..75ec1876 100644 --- a/src/editor/extensions/ext-helloworld/ext-helloworld.js +++ b/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 { ` $id('tools_left').append(buttonTemplate.content.cloneNode(true)) - $id('hello_world').addEventListener('click', () => { + $click($id('hello_world'), () => { svgCanvas.setMode('hello_world') }) }, diff --git a/src/editor/extensions/ext-imagelib/ext-imagelib.js b/src/editor/extensions/ext-imagelib/ext-imagelib.js index 93d3be3d..c8da0d7a 100644 --- a/src/editor/extensions/ext-imagelib/ext-imagelib.js +++ b/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) - submit.addEventListener('touchend', toggleMultiLoop) + $click(submit, 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 () { - $id('imgbrowse_holder').style.display = 'none' - }) - button.addEventListener('touchend', function () { + $click(button, function () { $id('imgbrowse_holder').style.display = 'none' }) button.setAttribute('style', 'position: absolute;top: 5px;right: 10px;') @@ -440,7 +436,7 @@ export default { back.style.visibility = 'hidden' back.innerHTML = `icon` + 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' @@ -483,14 +479,7 @@ export default { const li = document.createElement('li') libOpts.appendChild(li) li.textContent = name - li.addEventListener('click', function () { - frame.setAttribute('src', url) - frame.style.display = 'block' - header.textContent = name - libOpts.style.display = 'none' - back.style.display = 'block' - }) - li.addEventListener('touchend', function () { + $click(li, function () { frame.setAttribute('src', url) frame.style.display = 'block' header.textContent = name @@ -516,7 +505,7 @@ export default { ` insertAfter($id('tool_export'), buttonTemplate.content.cloneNode(true)) - $id('tool_imagelib').addEventListener('click', () => { + $click($id('tool_imagelib'), () => { showBrowser() }) diff --git a/src/editor/extensions/ext-imagelib/index.js b/src/editor/extensions/ext-imagelib/index.js index 3cd1e2b5..ec67da53 100644 --- a/src/editor/extensions/ext-imagelib/index.js +++ b/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 diff --git a/src/editor/extensions/ext-opensave/ext-opensave.js b/src/editor/extensions/ext-opensave/ext-opensave.js index f8b5a57c..d9e006ad 100644 --- a/src/editor/extensions/ext-opensave/ext-opensave.js +++ b/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)) - $id('tool_open').addEventListener('click', clickOpen.bind(this)) - $id('tool_save').addEventListener('click', clickSave.bind(this, 'save')) - $id('tool_save_as').addEventListener('click', clickSave.bind(this, 'saveas')) - $id('tool_import').addEventListener('click', () => imgImport.click()) + $click($id('tool_clear'), clickClear.bind(this)) + $click($id('tool_open'), clickOpen.bind(this)) + $click($id('tool_save'), clickSave.bind(this, 'save')) + $click($id('tool_save_as'), clickSave.bind(this, 'saveas')) + $click($id('tool_import'), () => imgImport.click()) } } } diff --git a/src/editor/extensions/ext-overview_window/ext-overview_window.js b/src/editor/extensions/ext-overview_window/ext-overview_window.js index 417b609f..4735ee0d 100644 --- a/src/editor/extensions/ext-overview_window/ext-overview_window.js +++ b/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) diff --git a/src/editor/extensions/ext-panning/ext-panning.js b/src/editor/extensions/ext-panning/ext-panning.js index aabdfa24..df106630 100644 --- a/src/editor/extensions/ext-panning/ext-panning.js +++ b/src/editor/extensions/ext-panning/ext-panning.js @@ -32,9 +32,7 @@ export default { const { svgCanvas } = svgEditor - const { - $id - } = svgCanvas + const { $id, $click } = svgCanvas const insertAfter = (referenceNode, newNode) => { referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling) } @@ -48,7 +46,7 @@ export default { ` 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') } diff --git a/src/editor/extensions/ext-polystar/ext-polystar.js b/src/editor/extensions/ext-polystar/ext-polystar.js index 17571d61..88b96cc9 100644 --- a/src/editor/extensions/ext-polystar/ext-polystar.js +++ b/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') diff --git a/src/editor/extensions/ext-shapes/ext-shapes.js b/src/editor/extensions/ext-shapes/ext-shapes.js index e52a697a..1a929152 100644 --- a/src/editor/extensions/ext-shapes/ext-shapes.js +++ b/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"> ` 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) } diff --git a/src/editor/extensions/ext-storage/storageDialog.js b/src/editor/extensions/ext-storage/storageDialog.js index 66ffd1c1..8faae974 100644 --- a/src/editor/extensions/ext-storage/storageDialog.js +++ b/src/editor/extensions/ext-storage/storageDialog.js @@ -1,3 +1,4 @@ +/* globals svgEditor */ import storageDialogHTML from './storageDialog.html' const template = document.createElement('template') @@ -138,10 +139,8 @@ export class SeStorageDialog extends HTMLElement { }) this.dispatchEvent(triggerEvent) } - this.$okBtn.addEventListener('click', (evt) => onSubmitHandler(evt, 'ok')) - this.$okBtn.addEventListener('touchend', (evt) => onSubmitHandler(evt, 'ok')) - this.$cancelBtn.addEventListener('click', (evt) => onSubmitHandler(evt, 'cancel')) - this.$cancelBtn.addEventListener('touchend', (evt) => onSubmitHandler(evt, 'cancel')) + svgEditor.$click(this.$okBtn, (evt) => onSubmitHandler(evt, 'ok')) + svgEditor.$click(this.$cancelBtn, (evt) => onSubmitHandler(evt, 'cancel')) } /** diff --git a/src/editor/panels/LayersPanel.js b/src/editor/panels/LayersPanel.js index 0230b817..0d7ca386 100644 --- a/src/editor/panels/LayersPanel.js +++ b/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)) - $id('layer_delete').addEventListener('click', this.deleteLayer.bind(this)) - $id('layer_up').addEventListener('click', () => this.moveLayer.bind(this)(-1)) - $id('layer_down').addEventListener('click', () => this.moveLayer.bind(this)(1)) - $id('layer_rename').addEventListener('click', this.layerRename.bind(this)) + $click($id('layer_new'), this.newLayer.bind(this)) + $click($id('layer_delete'), this.deleteLayer.bind(this)) + $click($id('layer_up'), () => this.moveLayer.bind(this)(-1)) + $click($id('layer_down'), () => this.moveLayer.bind(this)(1)) + $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') diff --git a/src/editor/panels/LeftPanel.js b/src/editor/panels/LeftPanel.js index f73adb24..83987d69 100644 --- a/src/editor/panels/LeftPanel.js +++ b/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)) - $id('tool_fhpath').addEventListener('click', this.clickFHPath.bind(this)) - $id('tool_text').addEventListener('click', this.clickText.bind(this)) - $id('tool_image').addEventListener('click', this.clickImage.bind(this)) - $id('tool_zoom').addEventListener('click', this.clickZoom.bind(this)) + $click($id('tool_select'), this.clickSelect.bind(this)) + $click($id('tool_fhpath'), this.clickFHPath.bind(this)) + $click($id('tool_text'), this.clickText.bind(this)) + $click($id('tool_image'), this.clickImage.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)) - $id('tool_line').addEventListener('click', this.clickLine.bind(this)) + $click($id('tool_path'), this.clickPath.bind(this)) + $click($id('tool_line'), this.clickLine.bind(this)) // flyout - $id('tool_rect').addEventListener('click', this.clickRect.bind(this)) - $id('tool_square').addEventListener('click', this.clickSquare.bind(this)) - $id('tool_fhrect').addEventListener('click', this.clickFHRect.bind(this)) - $id('tool_ellipse').addEventListener('click', this.clickEllipse.bind(this)) - $id('tool_circle').addEventListener('click', this.clickCircle.bind(this)) - $id('tool_fhellipse').addEventListener('click', this.clickFHEllipse.bind(this)) + $click($id('tool_rect'), this.clickRect.bind(this)) + $click($id('tool_square'), this.clickSquare.bind(this)) + $click($id('tool_fhrect'), this.clickFHRect.bind(this)) + $click($id('tool_ellipse'), this.clickEllipse.bind(this)) + $click($id('tool_circle'), this.clickCircle.bind(this)) + $click($id('tool_fhellipse'), this.clickFHEllipse.bind(this)) } } diff --git a/src/editor/panels/TopPanel.js b/src/editor/panels/TopPanel.js index 1e3f98df..20a8f7e6 100644 --- a/src/editor/panels/TopPanel.js +++ b/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)) - $id('tool_wireframe').addEventListener('click', this.clickWireframe.bind(this)) - $id('tool_undo').addEventListener('click', this.clickUndo.bind(this)) - $id('tool_redo').addEventListener('click', this.clickRedo.bind(this)) - $id('tool_clone').addEventListener('click', this.clickClone.bind(this)) - $id('tool_clone_multi').addEventListener('click', this.clickClone.bind(this)) - $id('tool_delete').addEventListener('click', this.deleteSelected.bind(this)) - $id('tool_delete_multi').addEventListener('click', this.deleteSelected.bind(this)) - $id('tool_move_top').addEventListener('click', this.moveToTopSelected.bind(this)) - $id('tool_move_bottom').addEventListener('click', this.moveToBottomSelected.bind(this)) - $id('tool_topath').addEventListener('click', this.convertToPath.bind(this)) - $id('tool_make_link').addEventListener('click', this.makeHyperlink.bind(this)) - $id('tool_make_link_multi').addEventListener('click', this.makeHyperlink.bind(this)) - $id('tool_reorient').addEventListener('click', this.reorientPath.bind(this)) - $id('tool_group_elements').addEventListener('click', this.clickGroup.bind(this)) + $click($id('tool_source'), this.showSourceEditor.bind(this)) + $click($id('tool_wireframe'), this.clickWireframe.bind(this)) + $click($id('tool_undo'), this.clickUndo.bind(this)) + $click($id('tool_redo'), this.clickRedo.bind(this)) + $click($id('tool_clone'), this.clickClone.bind(this)) + $click($id('tool_clone_multi'), this.clickClone.bind(this)) + $click($id('tool_delete'), this.deleteSelected.bind(this)) + $click($id('tool_delete_multi'), this.deleteSelected.bind(this)) + $click($id('tool_move_top'), this.moveToTopSelected.bind(this)) + $click($id('tool_move_bottom'), this.moveToBottomSelected.bind(this)) + $click($id('tool_topath'), this.convertToPath.bind(this)) + $click($id('tool_make_link'), this.makeHyperlink.bind(this)) + $click($id('tool_make_link_multi'), this.makeHyperlink.bind(this)) + $click($id('tool_reorient'), this.reorientPath.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')) - $id('tool_align_right').addEventListener('click', () => this.clickAlign.bind(this)('right')) - $id('tool_align_center').addEventListener('click', () => this.clickAlign.bind(this)('center')) - $id('tool_align_top').addEventListener('click', () => this.clickAlign.bind(this)('top')) - $id('tool_align_bottom').addEventListener('click', () => this.clickAlign.bind(this)('bottom')) - $id('tool_align_middle').addEventListener('click', () => this.clickAlign.bind(this)('middle')) - $id('tool_node_clone').addEventListener('click', this.clonePathNode.bind(this)) - $id('tool_node_delete').addEventListener('click', this.deletePathNode.bind(this)) - $id('tool_openclose_path').addEventListener('click', this.opencloseSubPath.bind(this)) - $id('tool_add_subpath').addEventListener('click', this.addSubPath.bind(this)) - $id('tool_node_link').addEventListener('click', this.linkControlPoints.bind(this)) + $click($id('tool_align_left'), () => this.clickAlign.bind(this)('left')) + $click($id('tool_align_right'), () => this.clickAlign.bind(this)('right')) + $click($id('tool_align_center'), () => this.clickAlign.bind(this)('center')) + $click($id('tool_align_top'), () => this.clickAlign.bind(this)('top')) + $click($id('tool_align_bottom'), () => this.clickAlign.bind(this)('bottom')) + $click($id('tool_align_middle'), () => this.clickAlign.bind(this)('middle')) + $click($id('tool_node_clone'), this.clonePathNode.bind(this)) + $click($id('tool_node_delete'), this.deletePathNode.bind(this)) + $click($id('tool_openclose_path'), this.opencloseSubPath.bind(this)) + $click($id('tool_add_subpath'), this.addSubPath.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)) - $id('tool_bold').addEventListener('click', this.clickBold.bind(this)) - $id('tool_italic').addEventListener('click', this.clickItalic.bind(this)) - $id('tool_text_decoration_underline').addEventListener('click', () => this.clickTextDecoration.bind(this)('underline')) - $id('tool_text_decoration_linethrough').addEventListener('click', () => this.clickTextDecoration.bind(this)('line-through')) - $id('tool_text_decoration_overline').addEventListener('click', () => this.clickTextDecoration.bind(this)('overline')) + $click($id('tool_ungroup'), this.clickGroup.bind(this)) + $click($id('tool_bold'), this.clickBold.bind(this)) + $click($id('tool_italic'), this.clickItalic.bind(this)) + $click($id('tool_text_decoration_underline'), () => this.clickTextDecoration.bind(this)('underline')) + $click($id('tool_text_decoration_linethrough'), () => this.clickTextDecoration.bind(this)('line-through')) + $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 diff --git a/src/svgcanvas/svgcanvas.js b/src/svgcanvas/svgcanvas.js index 599814ca..6ff17d5a 100644 --- a/src/svgcanvas/svgcanvas.js +++ b/src/svgcanvas/svgcanvas.js @@ -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 @@ -243,7 +243,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 +947,7 @@ class SvgCanvas { this.$id = $id this.$qq = $qq this.$qa = $qa + this.$click = $click } } // End class @@ -955,6 +956,7 @@ class SvgCanvas { SvgCanvas.$id = $id SvgCanvas.$qq = $qq SvgCanvas.$qa = $qa +SvgCanvas.$click = $click SvgCanvas.encode64 = encode64 SvgCanvas.decode64 = decode64 SvgCanvas.mergeDeep = mergeDeep diff --git a/src/svgcanvas/text-actions.js b/src/svgcanvas/text-actions.js index 3c9dd2c0..9832324a 100644 --- a/src/svgcanvas/text-actions.js +++ b/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) diff --git a/src/svgcanvas/utilities.js b/src/svgcanvas/utilities.js index b8e90261..f55098bd 100644 --- a/src/svgcanvas/utilities.js +++ b/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) +}