Panning, modeChange Event, minor changes (#939)

* mode event, panning cursor

* Panning shortcuts(space,wheel), undo shortcut

* Undo/redo shortcuts, svgcanvas changes added to the main file

* minor refactoring

packages/svgcanvas/svgcanvas.js

@@ -308,6 +308,9 @@ class SvgCanvas {
     this.contentW = this.getResolution().w
     this.contentH = this.getResolution().h
     this.clear()
+
+    // creates custom modeEvent for editor
+    this.modeChangeEvent()
   } // End constructor
 
   getSvgOption () {
@@ -827,6 +830,11 @@ class SvgCanvas {
         ? this.curText
         : this.curShape
     this.currentMode = name
+
+    // fires modeChange event for the editor
+    if (this.modeEvent) {
+      document.dispatchEvent(this.modeEvent)
+    }
   }
 
   /**
@@ -1328,6 +1336,14 @@ class SvgCanvas {
     this.decode64 = decode64
     this.mergeDeep = mergeDeep
   }
+
+  /**
+   * Creates modeChange event, adds it as an svgCanvas property
+   * **/
+  modeChangeEvent () {
+    const modeEvent = new CustomEvent('modeChange', { detail: { getMode: () => this.getMode() } })
+    this.modeEvent = modeEvent
+  }
 } // End class
 
 // attach utilities function to the class that are used by SvgEdit so

src/editor/Editor.js

@@ -388,8 +388,10 @@ class Editor extends EditorStartup {
     this.svgCanvas.randomizeIds(arg)
   }
 
-  /** @lends module:SVGEditor~Actions */
   /**
+   *  @lends module:SVGEditor~Actions */
+  /**
+   * editor shortcuts init
    * @returns {void}
    */
   setAll () {

src/editor/EditorStartup.js

@@ -118,6 +118,10 @@ class EditorStartup {
       this.configObj.curConfig
     )
 
+    // once svgCanvas is init - adding listener to the changes of the current mode
+    this.modeEvent = this.svgCanvas.modeEvent
+    document.addEventListener('modeChange', (evt) => this.modeListener(evt))
+
     this.leftPanel.init()
     this.bottomPanel.init()
     this.topPanel.init()
@@ -278,6 +282,7 @@ class EditorStartup {
 
     let lastX = null; let lastY = null
     let panning = false; let keypan = false
+    let previousMode = 'select'
 
     $id('svgcanvas').addEventListener('mouseup', (evt) => {
       if (panning === false) { return true }
@@ -305,7 +310,12 @@ class EditorStartup {
     })
     $id('svgcanvas').addEventListener('mousedown', (evt) => {
       if (evt.button === 1 || keypan === true) {
+        // prDefault to avoid firing of browser's panning on mousewheel
+        evt.preventDefault()
         panning = true
+        previousMode = this.svgCanvas.getMode()
+        this.svgCanvas.setMode('ext-panning')
+        this.workarea.style.cursor = 'grab'
         lastX = evt.clientX
         lastY = evt.clientY
         return false
@@ -313,10 +323,27 @@ class EditorStartup {
       return true
     })
 
-    window.addEventListener('mouseup', () => {
+    // preventing browser's scaling with Ctrl+wheel
+    this.$container.addEventListener('wheel', (e) => {
+      if (e.ctrlKey) {
+        e.preventDefault()
+      }
+    })
+
+    window.addEventListener('mouseup', (evt) => {
+      if (evt.button === 1) {
+        this.svgCanvas.setMode(previousMode ?? 'select')
+      }
       panning = false
     })
 
+    // Allows quick change to the select mode while panning mode is active
+    this.workarea.addEventListener('dblclick', (evt) => {
+      if (this.svgCanvas.getMode() === 'ext-panning') {
+        this.leftPanel.clickSelect()
+      }
+    })
+
     document.addEventListener('keydown', (e) => {
       if (e.target.nodeName !== 'BODY') return
       if (e.code.toLowerCase() === 'space') {
@@ -332,6 +359,7 @@ class EditorStartup {
       if (e.target.nodeName !== 'BODY') return
       if (e.code.toLowerCase() === 'space') {
         this.svgCanvas.spaceKey = keypan = false
+        this.svgCanvas.setMode(previousMode === 'ext-panning' ? 'select' : previousMode ?? 'select')
         e.preventDefault()
       } else if ((e.key.toLowerCase() === 'shift') && (this.svgCanvas.getMode() === 'zoom')) {
         this.workarea.style.cursor = zoomInIcon
@@ -695,6 +723,36 @@ class EditorStartup {
       console.error(err)
     }
   }
+
+  /**
+ * Listens to the mode change, listener is to be added on document
+* @param {Event} evt custom modeChange event
+*/
+  modeListener (evt) {
+    const mode = this.svgCanvas.getMode()
+
+    this.setCursorStyle(mode)
+  }
+
+  /**
+   * sets cursor styling for workarea depending on the current mode
+   * @param {string} mode
+   */
+  setCursorStyle (mode) {
+    let cs = 'auto'
+    switch (mode) {
+      case 'ext-panning':
+        cs = 'grab'
+        break
+      case 'zoom':
+        cs = 'crosshair'
+        break
+      default:
+        cs = 'auto'
+    }
+
+    this.workarea.style.cursor = cs
+  }
 }
 
 export default EditorStartup

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

@@ -39,7 +39,7 @@ export default {
     return {
       name: svgEditor.i18next.t(`${name}:name`),
       callback () {
-        const btitle = `${name}:buttons.0.title`
+        const btitle = `${name} [Space / mouse wheel + drag]`
         // Add the button and its handler(s)
         const buttonTemplate = document.createElement('template')
         buttonTemplate.innerHTML = `

src/editor/panels/LeftPanel.js

@@ -45,7 +45,7 @@ class LeftPanel {
    */
   clickSelect () {
     if (this.updateLeftPanel('tool_select')) {
-      this.editor.workarea.style.cursor = 'auto'
+      // this.editor.workarea.style.cursor = 'auto'
       this.editor.svgCanvas.setMode('select')
     }
   }

src/editor/panels/TopPanel.html

@@ -9,8 +9,8 @@
   </div> <!-- editor_panel -->
   <div id="history_panel">
     <div class="tool_sep"></div>
-    <se-button id="tool_undo" title="tools.undo" shortcut="Z" src="undo.svg" disabled></se-button>
-    <se-button id="tool_redo" title="tools.redo" shortcut="Y" src="redo.svg" disabled></se-button>
+    <se-button id="tool_undo" title="tools.undo" shortcut="ctrl+Z" src="undo.svg" disabled></se-button>
+    <se-button id="tool_redo" title="tools.redo" shortcut="ctrl+Y" src="redo.svg" disabled></se-button>
   </div> <!-- history_panel -->
   <!-- Buttons when a single element is selected -->
   <div class="selected_panel">
@@ -83,8 +83,10 @@
     <se-button id="tool_align_top" title="tools.align_top" src="align_top.svg"></se-button>
     <se-button id="tool_align_middle" title="tools.align_middle" src="align_middle.svg"></se-button>
     <se-button id="tool_align_bottom" title="tools.align_bottom" src="align_bottom.svg"></se-button>
-    <se-button id="tool_align_distrib_horiz" title="tools.align_distrib_horiz" src="align_distrib_horiz.svg"></se-button>
-    <se-button id="tool_align_distrib_verti" title="tools.align_distrib_verti" src="align_distrib_verti.svg"></se-button>
+    <se-button id="tool_align_distrib_horiz" title="tools.align_distrib_horiz"
+      src="align_distrib_horiz.svg"></se-button>
+    <se-button id="tool_align_distrib_verti" title="tools.align_distrib_verti"
+      src="align_distrib_verti.svg"></se-button>
     <se-select id="tool_align_relative" label="tools.relativeTo"
       options="tools.selected_objects,tools.largest_object,tools.smallest_object,tools.page"
       values="selected::largest::smallest::page">
@@ -141,9 +143,12 @@
     <!-- Text styles -->
     <se-button id="tool_bold" title="properties.bold" src="bold.svg" shortcut="B"></se-button>
     <se-button id="tool_italic" title="properties.italic" src="italic.svg" shortcut="I"></se-button>
-    <se-button id="tool_text_decoration_underline" title="properties.text_decoration_underline" src="text_decoration_underline.svg"></se-button>
-    <se-button id="tool_text_decoration_linethrough" title="properties.text_decoration_linethrough" src="text_decoration_linethrough.svg"></se-button>
-    <se-button id="tool_text_decoration_overline" title="properties.text_decoration_overline" src="text_decoration_overline.svg"></se-button>
+    <se-button id="tool_text_decoration_underline" title="properties.text_decoration_underline"
+      src="text_decoration_underline.svg"></se-button>
+    <se-button id="tool_text_decoration_linethrough" title="properties.text_decoration_linethrough"
+      src="text_decoration_linethrough.svg"></se-button>
+    <se-button id="tool_text_decoration_overline" title="properties.text_decoration_overline"
+      src="text_decoration_overline.svg"></se-button>
 
     <!-- Font Size-->
     <se-select id="tool_font_family" label="properties.font_family_label"
@@ -154,9 +159,12 @@
 
     <!-- Text Anchor -->
     <se-list id="tool_text_anchor" label="" width="22px" height="22px">
-      <se-list-item id="tool_text_anchor_start" value="start" title="properties.text_anchor_start" src="anchor_start.svg" img-height="25px"></se-list-item>
-      <se-list-item id="tool_text_anchor_middle" value="middle" title="properties.text_anchor_middle" src="anchor_middle.svg" img-height="25px"></se-list-item>
-      <se-list-item id="tool_text_anchor_end" value="end" title="properties.text_anchor_end" src="anchor_end.svg" img-height="25px"></se-list-item>
+      <se-list-item id="tool_text_anchor_start" value="start" title="properties.text_anchor_start"
+        src="anchor_start.svg" img-height="25px"></se-list-item>
+      <se-list-item id="tool_text_anchor_middle" value="middle" title="properties.text_anchor_middle"
+        src="anchor_middle.svg" img-height="25px"></se-list-item>
+      <se-list-item id="tool_text_anchor_end" value="end" title="properties.text_anchor_end" src="anchor_end.svg"
+        img-height="25px"></se-list-item>
     </se-list>
 
     <!-- Letter Spacing -->

src/editor/svgedit.css

@@ -272,7 +272,8 @@ hr {
   top: -9px;
 }
 
-#main_menu ul, #main_menu li {
+#main_menu ul,
+#main_menu li {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -327,15 +328,18 @@ hr {
   overflow-y: hidden;
   display: flex;
   align-items: center;
-  scrollbar-width: thin; /* Firefox */
+  scrollbar-width: thin;
+  /* Firefox */
 }
 
-#tools_bottom::-webkit-scrollbar { /* Chrome, Edge, and Safari */
+#tools_bottom::-webkit-scrollbar {
+  /* Chrome, Edge, and Safari */
   width: 3px;
   height: 3px;
 }
 
-#tools_bottom se-list, #tools_bottom se-select {
+#tools_bottom se-list,
+#tools_bottom se-select {
   margin-bottom: 8px;
 }
 
@@ -353,18 +357,23 @@ hr {
   margin-left: auto;
   margin-right: auto;
   overflow-y: scroll;
-  scrollbar-width: none; /* Firefox */
+  scrollbar-width: none;
+  /* Firefox */
+  user-select: none;
 }
 
-#tools_left::-webkit-scrollbar { /* Chrome, Edge, and Safari */
+#tools_left::-webkit-scrollbar {
+  /* Chrome, Edge, and Safari */
   width: 3px;
 }
 
-#tools_left::-webkit-scrollbar-track,  #tools_bottom::-webkit-scrollbar-track{
+#tools_left::-webkit-scrollbar-track,
+#tools_bottom::-webkit-scrollbar-track {
   background: transparent;
 }
 
-#tools_left::-webkit-scrollbar-thumb, #tools_bottom::-webkit-scrollbar-thumb {
+#tools_left::-webkit-scrollbar-thumb,
+#tools_bottom::-webkit-scrollbar-thumb {
   background-color: rgb(70, 70, 70);
 }
 
@@ -486,7 +495,8 @@ input[type=text] {
   margin-right: 0;
 }
 
-#main_menu li#tool_open, #main_menu li#tool_import {
+#main_menu li#tool_open,
+#main_menu li#tool_import {
   position: relative;
   overflow: hidden;
 }
@@ -495,7 +505,9 @@ input[type=text] {
   overflow: hidden;
 }
 
-#tool_open input, #tool_import input, #tool_image input {
+#tool_open input,
+#tool_import input,
+#tool_image input {
   position: absolute;
   opacity: 0;
   font-size: 10em;
@@ -616,5 +628,3 @@ ul li.current {
 .dropdown li.tool_button {
   width: 24px;
 }
-
-