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_undo" title="tools.undo" shortcut="ctrl+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_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">
@@ -43,27 +43,27 @@
       <se-list-item id="tool_posleft" value="l" title="tools.align_left" src="align_left.svg" img-height="22px">
       </se-list-item>
       <se-list-item id="tool_poscenter" value="c" title="tools.align_center" src="align_center.svg"
-                    img-height="22px"></se-list-item>
+        img-height="22px"></se-list-item>
       <se-list-item id="tool_posright" value="r" title="tools.align_right" src="align_right.svg"
-                    img-height="22px"></se-list-item>
+        img-height="22px"></se-list-item>
       <se-list-item id="tool_postop" value="t" title="tools.align_top" src="align_top.svg" img-height="22px">
       </se-list-item>
       <se-list-item id="tool_posmiddle" value="m" title="tools.align_middle" src="align_middle.svg"
-                    img-height="22px"></se-list-item>
+        img-height="22px"></se-list-item>
       <se-list-item id="tool_posbottom" value="b" src="align_bottom.svg" title="tools.align_bottom"
-                    img-height="22px"></se-list-item>
+        img-height="22px"></se-list-item>
       <se-list-item id="tool_poshoriz" value="dh" src="align_distrib_horiz.svg" title="tools.align_distrib_horiz"
-                    img-height="22px"></se-list-item>
+        img-height="22px"></se-list-item>
       <se-list-item id="tool_posverti" value="dv" src="align_distrib_verti.svg" title="tools.align_distrib_verti"
-                    img-height="22px"></se-list-item>
+        img-height="22px"></se-list-item>
     </se-list>
   </div>
   <div class="xy_panel">
     <se-spin-input id="selected_x" data-attr="x" size="4" type="text" label="properties.x_label"
-                   title="properties.pos_x">
+      title="properties.pos_x">
     </se-spin-input>
     <se-spin-input id="selected_y" data-attr="y" size="4" type="text" label="properties.y_label"
-                   title="properties.pos_y">
+      title="properties.pos_y">
     </se-spin-input>
   </div>
   <!-- Buttons when multiple elements are selected -->
@@ -83,27 +83,29 @@
     <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_horiz" title="tools.align_distrib_horiz"
-    <se-button id="tool_align_distrib_verti" title="tools.align_distrib_verti" src="align_distrib_verti.svg"></se-button>
+      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"
+      options="tools.selected_objects,tools.largest_object,tools.smallest_object,tools.page"
-               values="selected::largest::smallest::page">
+      values="selected::largest::smallest::page">
       </se-list-item>
     </se-select>
   </div> <!-- multiselected_panel -->
   <div class="rect_panel">
     <se-spin-input id="rect_width" data-attr="width" size="4" label="properties.w_label"
-                   title="properties.rect_width"></se-spin-input>
+      title="properties.rect_width"></se-spin-input>
     <se-spin-input id="rect_height" data-attr="height" size="4" label="properties.h_label"
-                   title="properties.rect_height"></se-spin-input>
+      title="properties.rect_height"></se-spin-input>
     <se-spin-input id="rect_rx" min=0 max=1000 step=1 size="3" title="properties.corner_radius"
-                   data-attr="Corner Radius" src="c_radius.svg"></se-spin-input>
+      data-attr="Corner Radius" src="c_radius.svg"></se-spin-input>
   </div> <!-- rect_panel -->
   <div class="image_panel">
     <se-spin-input id="image_width" data-attr="width" size="4" type="text" label="properties.w_label"
-                   title="properties.image_width"></se-spin-input>
+      title="properties.image_width"></se-spin-input>
     <se-spin-input id="image_height" data-attr="height" size="4" type="text" label="properties.h_label"
-                   title="properties.image_height"></se-spin-input>
+      title="properties.image_height"></se-spin-input>
   </div>
   <div class="image_panel">
     <se-input id="image_url" data-attr="image_url" size="15" label="properties.image_url"></se-input>
@@ -117,15 +119,15 @@
   </div>
   <div class="ellipse_panel">
     <se-spin-input id="ellipse_cx" data-attr="cx" size="4" title="properties.ellipse_cx"
-                   label="properties.cx_label"></se-spin-input>
+      label="properties.cx_label"></se-spin-input>
     <se-spin-input id="ellipse_cy" data-attr="cy" size="4" title="properties.ellipse_cy"
-                   label="properties.cy_label"></se-spin-input>
+      label="properties.cy_label"></se-spin-input>
   </div>
   <div class="ellipse_panel">
     <se-spin-input id="ellipse_rx" data-attr="rx" size="4" title="properties.ellipse_rx"
-                   label="properties.rx_label"></se-spin-input>
+      label="properties.rx_label"></se-spin-input>
     <se-spin-input id="ellipse_ry" data-attr="ry" size="4" title="properties.ellipse_ry"
-                   label="properties.ry_label"></se-spin-input>
+      label="properties.ry_label"></se-spin-input>
   </div>
   <div class="line_panel">
     <se-spin-input id="line_x1" data-attr="x1" size="4" title="properties.line_x1" label="properties.x1_label">
@@ -141,43 +143,49 @@
     <!-- 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_underline" title="properties.text_decoration_underline"
-    <se-button id="tool_text_decoration_linethrough" title="properties.text_decoration_linethrough" src="text_decoration_linethrough.svg"></se-button>
+      src="text_decoration_underline.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_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"
-               options="properties.serif,properties.sans_serif,properties.cursive,properties.fantasy,properties.monospace,properties.courier,properties.helvetica,properties.times"
+      options="properties.serif,properties.sans_serif,properties.cursive,properties.fantasy,properties.monospace,properties.courier,properties.helvetica,properties.times"
-               values="Serif::Sans-serif::Cursive::Fantasy::Monospace::Courier::Helvetica::Times"></se-select>
+      values="Serif::Sans-serif::Cursive::Fantasy::Monospace::Courier::Helvetica::Times"></se-select>
     <se-spin-input size="2" id="font_size" min=1 max=1000 step=1 title="properties.font_size"
-                   src="fontsize.svg"></se-spin-input>
+      src="fontsize.svg"></se-spin-input>
 
     <!-- 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_start" value="start" title="properties.text_anchor_start"
-      <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>
+        src="anchor_start.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_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 -->
     <se-spin-input size="2" id="tool_letter_spacing" min=0 max=100 step=1 title="properties.text_letter_spacing"
-                   src="letter_spacing.svg"></se-spin-input>
+      src="letter_spacing.svg"></se-spin-input>
 
     <!-- Word Spacing -->
     <se-spin-input size="2" id="tool_word_spacing" min=0 max=1000 step=1 title="properties.text_word_spacing"
-                   src="word_spacing.svg"></se-spin-input>
+      src="word_spacing.svg"></se-spin-input>
 
     <!-- Text Length -->
     <se-spin-input size="2" id="tool_text_length" min=0 max=1000 step=1 title="properties.text_length"
-                   src="text_length.svg"></se-spin-input>
+      src="text_length.svg"></se-spin-input>
 
     <!-- Length Adjust -->
     <se-select id="tool_length_adjust" label="properties.text_length_adjust"
-               options="properties.text_length_adjust_spacing,properties.text_length_adjust_spacing_and_glyphs"
+      options="properties.text_length_adjust_spacing,properties.text_length_adjust_spacing_and_glyphs"
-               values="spacing::spacingAndGlyphs"></se-select>
+      values="spacing::spacingAndGlyphs"></se-select>
   </div>
   <!-- Not visible, but still used -->
-  <input id="text" type="text" size="35"/>
+  <input id="text" type="text" size="35" />
   <div class="container_panel">
     <div class="tool_sep"></div>
     <se-input id="g_title" data-attr="title" size="8" label="properties.label"></se-input>
@@ -192,7 +200,7 @@
   <div class="a_panel">
     <label id="tool_link_url">
       <span id="linkLabel" class="icon_label"></span>
-      <input id="link_url" type="text" size="35"/>
+      <input id="link_url" type="text" size="35" />
     </label>
   </div> <!-- a_panel -->
   <div class="path_node_panel">
@@ -204,7 +212,7 @@
     <se-spin-input id="path_node_y" data-attr="y" size="4" title="properties.node_y" label="properties.y_label">
     </se-spin-input>
     <se-select id="seg_type" title="properties.seg_type" label=""
-               options="properties.straight_segments,properties.curve_segments" values="4::6"></se-select>
+      options="properties.straight_segments,properties.curve_segments" values="4::6"></se-select>
     <se-button id="tool_node_clone" title="tools.node_clone" src="tool_node_clone.svg"></se-button>
     <se-button id="tool_node_delete" title="tools.node_delete" src="tool_node_delete.svg"></se-button>
     <se-button id="tool_openclose_path" title="tools.openclose_path" src="tool_openclose_path.svg"></se-button>

src/editor/svgedit.css

@@ -33,7 +33,7 @@
   height: 100%;
 }
 
-#title_panel > p {
+#title_panel>p {
   color: white;
   padding-left: 5px;
   padding-right: 3px;
@@ -86,7 +86,7 @@
   color: white;
   position: absolute;
   cursor: pointer;
-  top:50%;
+  top: 50%;
 }
 
 .svg_editor:not(.open) #sidepanel_content {
@@ -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,19 +357,24 @@ 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,
-  background-color:rgb(70, 70, 70);
+#tools_bottom::-webkit-scrollbar-thumb {
+  background-color: rgb(70, 70, 70);
 }
 
 /* End scrollbar styling */
@@ -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;
 }
-
-