Added text features (#704)

* Added letter spacing

* Added word spacing

* Added textLength

* Added lengthAdjust

* Added lengthAdjust

src/editor/panels/TopPanel.js

@@ -358,6 +358,10 @@ class TopPanel {
           $id('tool_font_family').setAttribute('value', elem.getAttribute('font-family'))
           $id('tool_text_anchor').setAttribute('value', elem.getAttribute('text-anchor'))
           $id('font_size').value = elem.getAttribute('font-size')
+          $id('tool_letter_spacing').value = elem.getAttribute('letter-spacing') ?? 0
+          $id('tool_word_spacing').value = elem.getAttribute('word-spacing') ?? 0
+          $id('tool_text_length').value = elem.getAttribute('textLength') ?? 0
+          $id('tool_length_adjust').value = elem.getAttribute('lengthAdjust') ?? 0
           $id('text').value = elem.textContent
           if (this.editor.svgCanvas.addedNew) {
             // Timeout needed for IE9
@@ -773,6 +777,34 @@ class TopPanel {
     return false
   }
 
+  /**
+   * @type {module}
+   */
+  changeLetterSpacing (e) {
+    this.editor.svgCanvas.setLetterSpacing(e.target.value)
+  }
+
+  /**
+   * @type {module}
+   */
+  changeWordSpacing (e) {
+    this.editor.svgCanvas.setWordSpacing(e.target.value)
+  }
+
+  /**
+   * @type {module}
+   */
+  changeTextLength (e) {
+    this.editor.svgCanvas.setTextLength(e.target.value)
+  }
+
+  /**
+   * @type {module}
+   */
+  changeLengthAdjust (evt) {
+    this.editor.svgCanvas.setLengthAdjust(evt.detail.value)
+  }
+
   /**
   * Set a selected image's URL.
   * @function module:SVGthis.setImageURL
@@ -892,6 +924,10 @@ class TopPanel {
     $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_letter_spacing').addEventListener('change', this.changeLetterSpacing.bind(this))
+    $id('tool_word_spacing').addEventListener('change', this.changeWordSpacing.bind(this))
+    $id('tool_text_length').addEventListener('change', this.changeTextLength.bind(this))
+    $id('tool_length_adjust').addEventListener('change', (evt) => this.changeLengthAdjust.bind(this)(evt))
     $click($id('tool_unlink_use'), this.clickGroup.bind(this))
     $id('image_url').addEventListener('change', (evt) => { this.setImageURL(evt.currentTarget.value) });