zcy
/
svgedit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

first level mobile support
master
JFH 2022-01-06 07:18:50 -03:00 committed by GitHub
parent 4d79e27f8b 60dd04a540
commit e2ee222ff5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
36 changed files with 185 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/common/browser.js
View File

@ -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

4
src/editor/Editor.js
View File

@ -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

5
src/editor/EditorStartup.js
View File

@ -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()

4
src/editor/MainMenu.js
View File

@ -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')

10
src/editor/components/jgraduate/jQuery.jGraduate.js
View File

@ -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) {

13
src/editor/components/jgraduate/jQuery.jPicker.js
View File

@ -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'

2
src/editor/components/seColorPicker.js
View File

@ -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,

8
src/editor/components/seExplorerButton.js
View File

@ -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)
}
/**

4
src/editor/components/seFlyingButton.js
View File

@ -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)
}
}

3
src/editor/components/sePalette.js
View File

@ -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'

2
src/editor/components/seSpinInput.js
View File

@ -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)

23
src/editor/dialogs/cmenuDialog.js
View File

@ -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'))
}
}

11
src/editor/dialogs/cmenuLayersDialog.js
View File

@ -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))
}
}

7
src/editor/dialogs/editorPreferencesDialog.js
View File

@ -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)
}
}

7
src/editor/dialogs/exportDialog.js
View File

@ -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))
}
}

6
src/editor/dialogs/imagePropertiesDialog.js
View File

@ -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
}

7
src/editor/dialogs/svgSourceDialog.js
View File

@ -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)
}
}

4
src/editor/extensions/ext-eyedropper/ext-eyedropper.js
View File

@ -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')
}

4
src/editor/extensions/ext-grid/ext-grid.js
View File

@ -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()
})

4
src/editor/extensions/ext-helloworld/ext-helloworld.js
View File

@ -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')
})
},

30
src/editor/extensions/ext-imagelib/ext-imagelib.js
View File

@ -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,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 () {
frame.setAttribute('src', 'about:blank')
frame.style.display = 'none'
libOpts.style.display = 'block'
header.textContent = allLibs
back.style.display = 'none'
})
back.addEventListener('touchend', function () {
$click(back, 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 () {
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 +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()
})

4
src/editor/extensions/ext-imagelib/index.js
View File

@ -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

12
src/editor/extensions/ext-opensave/ext-opensave.js
View File

@ -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())
}
}
}

4
src/editor/extensions/ext-overview_window/ext-overview_window.js
View File

@ -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)

6
src/editor/extensions/ext-panning/ext-panning.js
View File

@ -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 {
<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')
}

6
src/editor/extensions/ext-polystar/ext-polystar.js
View File

@ -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')

4
src/editor/extensions/ext-shapes/ext-shapes.js
View File

@ -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)
}

8
src/editor/extensions/ext-storage/storageDialog.js
View File

@ -1,3 +1,4 @@
/* globals svgEditor */
import storageDialogHTML from './storageDialog.html'
const template = document.createElement('template')
@ -128,7 +129,8 @@ export class SeStorageDialog extends HTMLElement {
*/
connectedCallback () {
const onSubmitHandler = (e, action) => {
const triggerEvent = new CustomEvent('change', {
const triggerEvent = new CustomEvent('change',
{
detail: {
trigger: action,
select: this.$storageInput.value,
@ -137,8 +139,8 @@ export class SeStorageDialog extends HTMLElement {
})
this.dispatchEvent(triggerEvent)
}
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'))
}
/**

16
src/editor/panels/LayersPanel.js
View File

@ -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')

30
src/editor/panels/LeftPanel.js
View File

@ -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))
}
}

68
src/editor/panels/TopPanel.js
View File

@ -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

5
src/svgcanvas/select.js
View File

@ -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.

9
src/svgcanvas/svgcanvas.js
View File

@ -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

2
src/svgcanvas/text-actions.js
View File

@ -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)

14
src/editor/touch.js → src/svgcanvas/touch.js
View File

@ -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)
document.addEventListener('touchmove', touchHandler, true)
document.addEventListener('touchend', touchHandler, true)
document.addEventListener('touchcancel', touchHandler, true)
export const init = (svgCanvas) => {
svgCanvas.svgroot.addEventListener('touchstart', touchHandler)
svgCanvas.svgroot.addEventListener('touchmove', touchHandler)
svgCanvas.svgroot.addEventListener('touchend', touchHandler)
svgCanvas.svgroot.addEventListener('touchcancel', touchHandler)
}

6
src/svgcanvas/utilities.js
View File

@ -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)
}