fix #832, floating btns closing, Esc to close confirmation dialog, 0x…

…0 rects disabled (#947)
SVG-Edit · Jan 20, 2024 · 9f77e9c · 9f77e9c
1 parent f75d1a8
commit 9f77e9c
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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