From 9f77e9c63a9904b1761f0aa10a853027ec7830c7 Mon Sep 17 00:00:00 2001 From: olekhshch <96601180+olekhshch@users.noreply.github.com> Date: Sat, 20 Jan 2024 23:53:20 +0100 Subject: [PATCH] fix #832, floating btns closing, Esc to close confirmation dialog, 0x0 rects disabled (#947) --- packages/svgcanvas/core/event.js | 8 +++++--- src/editor/EditorStartup.js | 3 ++- src/editor/components/seExplorerButton.js | 11 +++++++++-- src/editor/components/seFlyingButton.js | 7 +++++++ src/editor/dialogs/SePlainAlertDialog.js | 20 +++++++++++++++++++- src/editor/dialogs/seConfirmDialog.js | 2 +- 6 files changed, 43 insertions(+), 8 deletions(-) diff --git a/packages/svgcanvas/core/event.js b/packages/svgcanvas/core/event.js index e6c187aae..7e24d40b1 100644 --- a/packages/svgcanvas/core/event.js +++ b/packages/svgcanvas/core/event.js @@ -713,7 +713,9 @@ const mouseUpEvent = (evt) => { const width = element.getAttribute('width') const height = element.getAttribute('height') // Image should be kept regardless of size (use inherit dimensions later) - keep = (width || height) || svgCanvas.getCurrentMode() === 'image' + const widthNum = Number(width) + const heightNum = Number(height) + keep = widthNum >= 1 || heightNum >= 1 || svgCanvas.getCurrentMode() === 'image' } break case 'circle': @@ -886,8 +888,8 @@ const mouseUpEvent = (evt) => { if (svgCanvas.getCurrentMode() === 'path') { svgCanvas.pathActions.toEditMode(element) } else if (svgCanvas.getCurConfig().selectNew) { - const modes = ['circle', 'ellipse', 'square', 'rect', 'fhpath', 'line', 'fhellipse', 'fhrect', 'star', 'polygon'] - if (modes.indexOf(svgCanvas.getCurrentMode()) !== -1) { + const modes = ['circle', 'ellipse', 'square', 'rect', 'fhpath', 'line', 'fhellipse', 'fhrect', 'star', 'polygon', 'shapelib'] + if (modes.indexOf(svgCanvas.getCurrentMode()) !== -1 && !evt.altKey) { svgCanvas.setMode('select') } svgCanvas.selectOnly([element], true) diff --git a/src/editor/EditorStartup.js b/src/editor/EditorStartup.js index 88eb20dec..8f3ccbaef 100644 --- a/src/editor/EditorStartup.js +++ b/src/editor/EditorStartup.js @@ -752,6 +752,7 @@ class EditorStartup { cs = 'grab' break case 'zoom': + case 'shapelib': cs = 'crosshair' break case 'circle': @@ -779,7 +780,7 @@ class EditorStartup { cancelTool () { const mode = this.svgCanvas.getMode() // list of modes that are currently save to cancel - const modesToCancel = ['zoom', 'rect', 'square', 'circle', 'ellipse', 'line', 'text', 'star', 'polygon', 'eyedropper'] + const modesToCancel = ['zoom', 'rect', 'square', 'circle', 'ellipse', 'line', 'text', 'star', 'polygon', 'eyedropper', 'shapelib', 'image'] if (modesToCancel.includes(mode)) { this.leftPanel.clickSelect() } diff --git a/src/editor/components/seExplorerButton.js b/src/editor/components/seExplorerButton.js index f6b5175e7..206bba732 100644 --- a/src/editor/components/seExplorerButton.js +++ b/src/editor/components/seExplorerButton.js @@ -25,6 +25,13 @@ export class ExplorerButton extends HTMLElement { this.files = [] this.request = new XMLHttpRequest() this.imgPath = svgEditor.configObj.curConfig.imgPath + + // Closes opened (pressed) lib menu on click on the canvas + const workarea = document.getElementById('workarea') + workarea.addEventListener('click', (e) => { + this.$menu.classList.remove('open') + this.$lib.classList.remove('open-lib') + }) } /** @@ -262,8 +269,8 @@ export class ExplorerButton extends HTMLElement { ev.stopPropagation() switch (ev.target.nodeName) { case 'SE-EXPLORERBUTTON': - this.$menu.classList.add('open') - this.$lib.classList.add('open-lib') + this.$menu.classList.toggle('open') + this.$lib.classList.toggle('open-lib') break case 'SE-BUTTON': // change to the current action diff --git a/src/editor/components/seFlyingButton.js b/src/editor/components/seFlyingButton.js index 2c0149265..3415c1cb1 100644 --- a/src/editor/components/seFlyingButton.js +++ b/src/editor/components/seFlyingButton.js @@ -24,6 +24,13 @@ export class FlyingButton extends HTMLElement { // the last element of the div is the slot // we retrieve all elements added in the slot (i.e. se-buttons) this.$elements = this.$menu.lastElementChild.assignedElements() + + // Closes opened menu on click + document.addEventListener('click', e => { + if (this.opened) { + this.opened = false + } + }) } /** diff --git a/src/editor/dialogs/SePlainAlertDialog.js b/src/editor/dialogs/SePlainAlertDialog.js index 67607408f..ec4dfdd96 100644 --- a/src/editor/dialogs/SePlainAlertDialog.js +++ b/src/editor/dialogs/SePlainAlertDialog.js @@ -1,5 +1,5 @@ import PlainAlertDialog from 'elix/src/plain/PlainAlertDialog.js' -import { template } from 'elix/src/base/internal.js' +import { template, keydown } from 'elix/src/base/internal.js' import { fragmentFrom } from 'elix/src/core/htmlLiterals.js' /** @@ -63,6 +63,24 @@ export default class SePlainAlertDialog extends PlainAlertDialog { ) return result } + + /** + * Tracks if users wants to cancel (close dialog without any changes) with Esc + * if null - seConfirm will use responce.choice + */ + keyChoice = null + + get [keydown] () { + /** + * Listens to Esc key to close dialog + */ + return (e) => { + if (e.key === 'Escape') { + this.keyChoice = 'Cancel' + this.close() + } + } + } } customElements.define('se-elix-alert-dialog', SePlainAlertDialog) diff --git a/src/editor/dialogs/seConfirmDialog.js b/src/editor/dialogs/seConfirmDialog.js index 49c389dfb..2ba1699ae 100644 --- a/src/editor/dialogs/seConfirmDialog.js +++ b/src/editor/dialogs/seConfirmDialog.js @@ -6,7 +6,7 @@ const seConfirm = async (text, choices) => { dialog.choices = (choices === undefined) ? ['Ok', 'Cancel'] : choices dialog.open() const response = await dialog.whenClosed() - return response.choice + return dialog.keyChoice ?? response.choice } window.seConfirm = seConfirm