- Added text decoration options (underline, overline, line-through) (#469)

- Added german translations to extensions

Co-authored-by: Timo Dittmann <timo.dittmann@kaufland.com>

src/editor/extensions/ext-arrows/locale/de.js

@@ -0,0 +1,19 @@
+export default {
+  name: 'Arrows',
+  langList: [
+    {id: 'arrow_none', textContent: 'Kein Pfeil'}
+  ],
+  contextTools: [
+    {
+      title: 'Pfeiltyp auswählen',
+      options: {
+        none: 'Kein Pfeil',
+        end: '---->',
+        start: '<----',
+        both: '<--->',
+        mid: '-->--',
+        mid_bk: '--<--'
+      }
+    }
+  ]
+};

src/editor/extensions/ext-closepath/locale/de.js

@@ -0,0 +1,11 @@
+export default {
+  name: 'ClosePath',
+  buttons: [
+    {
+      title: 'Pfad öffnen'
+    },
+    {
+      title: 'Pfad schließen'
+    }
+  ]
+};

src/editor/extensions/ext-connector/locale/de.js

@@ -0,0 +1,11 @@
+export default {
+  name: 'Connector',
+  langList: [
+    {id: 'mode_connect', title: 'Zwei Objekte verbinden'}
+  ],
+  buttons: [
+    {
+      title: 'Zwei Objekte verbinden'
+    }
+  ]
+};

src/editor/extensions/ext-eyedropper/locale/de.js

@@ -0,0 +1,9 @@
+export default {
+  name: 'eyedropper',
+  buttons: [
+    {
+      title: 'Pipetten Werkzeug',
+      key: 'I'
+    }
+  ]
+};

src/editor/extensions/ext-foreignobject/locale/de.js

@@ -0,0 +1,25 @@
+export default {
+  name: 'foreignObject',
+  buttons: [
+    {
+      title: 'Foreign Object Werkzeug'
+    },
+    {
+      title: 'Inhalt des ForeignObject bearbeiten'
+    }
+  ],
+  contextTools: [
+    {
+      title: 'Breite des ForeignObject ändern',
+      label: 'w'
+    },
+    {
+      title: 'Höhe des ForeignObject ändern',
+      label: 'h'
+    },
+    {
+      title: 'Schriftgröße des ForeignObject ändern',
+      label: 'Schriftgröße'
+    }
+  ]
+};

src/editor/extensions/ext-grid/locale/de.js

@@ -0,0 +1,8 @@
+export default {
+  name: 'Raster anzeigen',
+  buttons: [
+    {
+      title: 'Raster anzeigen/verbergen'
+    }
+  ]
+};

src/editor/extensions/ext-helloworld/locale/de.js

@@ -0,0 +1,9 @@
+export default {
+  name: 'Hello World',
+  text: 'Hello World!\n\nSie haben hier geklickt: {x}, {y}',
+  buttons: [
+    {
+      title: "Sage 'Hello World'"
+    }
+  ]
+};

src/editor/extensions/ext-imagelib/locale/de.js

@@ -1,9 +1,9 @@
 export default {
-  select_lib: 'Select an image library',
-  show_list: 'Show library list',
-  import_single: 'Import single',
-  import_multi: 'Import multiple',
-  open: 'Open as new document',
+  select_lib: 'Bilder Bibliothek auswählen',
+  show_list: 'Liste aller Bibliotheken anzeigen',
+  import_single: 'Einzelne importieren',
+  import_multi: 'Mehrere importieren',
+  open: 'Öffnen als neues Dokument',
   buttons: [
     {
       title: 'Bilder-Bibliothek'
@@ -11,14 +11,14 @@ export default {
   ],
   imgLibs: [
     {
-      name: 'Demo library (local)',
+      name: 'Demo Bibliothek (lokal)',
       url: 'extensions/ext-imagelib/index.html',
-      description: 'Demonstration library for SVG-edit on this server'
+      description: 'Demo Bibltiothek für svg-edit auf diesem Server'
     },
     {
-      name: 'IAN Symbol Libraries',
+      name: 'IAN Symbol Bibliothek',
       url: 'https://ian.umces.edu/symbols/catalog/svgedit/album_chooser.php?svgedit=3',
-      description: 'Free library of illustrations'
+      description: 'Kostenlose Bibliothek mit Illustrationen'
     }
     /*
     // See message in "en" locale for further details

src/editor/extensions/ext-markers/locale/de.js

@@ -0,0 +1,46 @@
+export default {
+  name: 'Markers',
+  langList: [
+    {id: 'nomarker', title: 'Keine Markierung'},
+    {id: 'leftarrow', title: 'Pfeil links'},
+    {id: 'rightarrow', title: 'Pfeil rechts'},
+    {id: 'textmarker', title: 'Text Marker'},
+    {id: 'forwardslash', title: 'Schrägstrich'},
+    {id: 'reverseslash', title: 'Umgekehrter Schrägstrich'},
+    {id: 'verticalslash', title: 'Vertikaler Strich'},
+    {id: 'box', title: 'Box'},
+    {id: 'star', title: 'Stern'},
+    {id: 'xmark', title: 'X'},
+    {id: 'triangle', title: 'Dreieck'},
+    {id: 'mcircle', title: 'Kreis'},
+    {id: 'leftarrow_o', title: 'Offener Pfeil links'},
+    {id: 'rightarrow_o', title: 'Offener Pfeil rechts'},
+    {id: 'box_o', title: 'Offene Box'},
+    {id: 'star_o', title: 'Offener Stern'},
+    {id: 'triangle_o', title: 'Offenes Dreieck'},
+    {id: 'mcircle_o', title: 'Offener Kreis'}
+  ],
+  contextTools: [
+    {
+      title: 'Start-Markierung',
+      label: 's'
+    },
+    {
+      title: 'Start-Markierung auswählen'
+    },
+    {
+      title: 'Mitte-Markierung',
+      label: 'm'
+    },
+    {
+      title: 'Mitte-Markierung auswählen'
+    },
+    {
+      title: 'End-Markierung',
+      label: 'e'
+    },
+    {
+      title: 'End-Markierung auswählen'
+    }
+  ]
+};

src/editor/extensions/ext-mathjax/locale/de.js

@@ -0,0 +1,8 @@
+export default {
+  name: 'MathJax',
+  buttons: [
+    {
+      title: 'Mathematik hinzufügen'
+    }
+  ]
+};

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

@@ -0,0 +1,8 @@
+export default {
+  name: 'Extension Panning',
+  buttons: [
+    {
+      title: 'Fenster verschieben'
+    }
+  ]
+};

src/editor/extensions/ext-placemark/locale/de.js

@@ -0,0 +1,40 @@
+export default {
+  name: 'placemark',
+  langList: [
+    {id: 'nomarker', title: 'Keine Markierung'},
+    {id: 'leftarrow', title: 'Pfeil links'},
+    {id: 'rightarrow', title: 'Pfeil rechts'},
+    {id: 'forwardslash', title: 'Schrägstrich'},
+    {id: 'reverseslash', title: 'Umgekehrter Schrägstrich'},
+    {id: 'verticalslash', title: 'Vertikaler Strich'},
+    {id: 'box', title: 'Box'},
+    {id: 'star', title: 'Stern'},
+    {id: 'xmark', title: 'X'},
+    {id: 'triangle', title: 'Dreieck'},
+    {id: 'mcircle', title: 'Kreis'},
+    {id: 'leftarrow_o', title: 'Offener Pfeil links'},
+    {id: 'rightarrow_o', title: 'Offener Pfeil rechts'},
+    {id: 'box_o', title: 'Offene Box'},
+    {id: 'star_o', title: 'Offener Stern'},
+    {id: 'triangle_o', title: 'Offenes Dreieck'},
+    {id: 'mcircle_o', title: 'Offener Kreis'}
+  ],
+  buttons: [
+    {
+      title: 'Placemark Werkzeug'
+    }
+  ],
+  contextTools: [
+    {
+      title: 'Typ der Placemark auswählen'
+    },
+    {
+      title: 'Text (mehrere Texte mit Semikolon getrennt)',
+      label: 'Text'
+    },
+    {
+      title: 'Schriftart für den Text',
+      label: ''
+    }
+  ]
+};

src/editor/extensions/ext-polygon/locale/de.js

@@ -0,0 +1,14 @@
+export default {
+  name: 'polygon',
+  buttons: [
+    {
+      title: 'Polygon Werkzeug'
+    }
+  ],
+  contextTools: [
+    {
+      title: 'Anzahl der Seiten',
+      label: 'Seiten'
+    }
+  ]
+};

src/editor/extensions/ext-server_moinsave/locale/de.js

@@ -0,0 +1,4 @@
+export default {
+  saved: 'Gespeichert! Zurück zur Artikelansicht!',
+  hiddenframe: 'Moinsave frame um verdeckte Werte zu speichern'
+};

src/editor/extensions/ext-server_opensave/locale/de.js

@@ -0,0 +1,4 @@
+export default {
+  uploading: 'Hochladen...',
+  hiddenframe: 'Opensave frame um versteckte Werte zu speichern'
+};

src/editor/extensions/ext-shapes/locale/de.js

@@ -0,0 +1,24 @@
+export default {
+  loading: 'Lädt...',
+  categories: {
+    basic: 'Basis',
+    object: 'Objekte',
+    symbol: 'Symbole',
+    arrow: 'Pfeile',
+    flowchart: 'Flussdiagramm',
+    animal: 'Tiere',
+    game: 'Karten & Schach',
+    dialog_balloon: 'Sprechblasen',
+    electronics: 'Elektronik',
+    math: 'Mathematik',
+    music: 'Musik',
+    misc: 'Verschiedenes',
+    raphael_1: 'raphaeljs.com set 1',
+    raphael_2: 'raphaeljs.com set 2'
+  },
+  buttons: [
+    {
+      title: 'Form-Bibliothek'
+    }
+  ]
+};

src/editor/extensions/ext-star/locale/de.js

@@ -0,0 +1,22 @@
+export default {
+  name: 'star',
+  buttons: [
+    {
+      title: 'Stern Werkzeug'
+    }
+  ],
+  contextTools: [
+    {
+      title: 'Anzahl der Ecken',
+      label: 'Ecken'
+    },
+    {
+      title: 'Schärfe',
+      label: 'Schärfe'
+    },
+    {
+      title: 'Dreht den Stern',
+      label: 'Radialverschiebung'
+    }
+  ]
+};

src/editor/extensions/ext-storage/locale/de.js

@@ -4,11 +4,11 @@ export default {
   'nicht jedes Mal die SVG neu laden. Falls Sie aus Datenschutzgründen ' +
   'dies nicht wollen, ' +
   'können Sie die Standardeinstellung im Folgenden ändern.',
-  storagePrefsAndContent: 'Store preferences and SVG content locally',
-  storagePrefsOnly: 'Only store preferences locally',
-  storagePrefs: 'Store preferences locally',
-  storageNoPrefsOrContent: 'Do not store my preferences or SVG content locally',
-  storageNoPrefs: 'Do not store my preferences locally',
-  rememberLabel: 'Remember this choice?',
-  rememberTooltip: 'If you choose to opt out of storage while remembering this choice, the URL will change so as to avoid asking again.'
+  storagePrefsAndContent: 'Voreinstellungen und SVG-Inhalte lokal speichern',
+  storagePrefsOnly: 'Nur Voreinstellungen lokal speichern',
+  storagePrefs: 'Einstellungen lokal speichern',
+  storageNoPrefsOrContent: 'Meine Einstellungen oder SVG-Inhalte nicht lokal speichern',
+  storageNoPrefs: 'Meine Einstellungen nicht lokal speichern',
+  rememberLabel: 'Ihre Einstellungen merken?',
+  rememberTooltip: 'Wenn Sie die Speicherung deaktivieren, aber die Einstellungen merken, wird die URL geändert, damit Sie nicht erneut gefragt werden.'
 };

src/editor/extensions/ext-webappfind/locale/de.js

@@ -0,0 +1,8 @@
+export default {
+  name: 'WebAppFind',
+  buttons: [
+    {
+      title: 'Bild auf der Festplatte speichern'
+    }
+  ]
+};

src/editor/images/svg_edit_icons.svg

@@ -1069,6 +1069,13 @@
 <svg width="64" height="64" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M655.872 960a61.952 61.952 0 0 1-45.376-19.136c-14.912-16.192-62.272-58.24-100.992-58.24-38.464 0-86.528 42.304-100.352 57.216a62.144 62.144 0 0 1-68.224 14.144l-1.28-0.576-117.76-65.088-1.088-0.832a55.552 55.552 0 0 1-18.944-67.52c0.064-0.192 10.816-24.768 10.816-47.168 0-67.968-56-123.392-124.8-123.392h-4.16l-0.768 0.064c-19.712 0-35.776-17.344-40.896-44.096C41.6 603.264 32 552.448 32 512.384c0-40 9.6-90.88 10.048-92.992 5.184-27.136 21.568-44.48 41.664-44.096h4.16c68.8 0 124.8-55.296 124.8-123.328 0-22.4-10.752-46.976-10.88-47.232a55.424 55.424 0 0 1 19.136-67.456l1.216-0.832 124.224-67.456 1.344-0.576a63.36 63.36 0 0 1 67.968 13.952c14.656 15.232 61.184 54.784 98.816 54.784 37.312 0 83.52-38.784 98.112-53.76a63.616 63.616 0 0 1 68.032-13.376l1.28 0.576 120 65.92 1.216 0.832a55.424 55.424 0 0 1 19.072 67.456c-0.128 0.192-10.88 24.768-10.88 47.168 0 67.968 56 123.328 124.8 123.328h4.16c19.968-0.384 36.416 17.024 41.6 44.096 0.512 2.112 10.112 52.992 10.112 92.992 0 40.064-9.6 90.88-10.048 92.992-5.184 27.136-21.632 44.48-41.6 44.032h-4.16c-68.8 0-124.8 55.36-124.8 123.392 0 22.464 10.752 46.976 10.88 47.232a55.36 55.36 0 0 1-19.072 67.392l-1.28 0.896-122.048 66.688-1.344 0.512a56.32 56.32 0 0 1-22.656 4.48z m-6.016-64.832a8.192 8.192 0 0 0 3.648 0.96h0.192l112.128-61.056c-2.688-6.208-15.04-36.16-15.04-67.584 0-93.76 75.008-170.56 169.024-175.296 1.344-7.36 8.704-48.832 8.704-79.808s-7.296-72.384-8.704-79.744c-94.016-4.864-169.024-81.664-169.024-175.36 0-31.424 12.416-61.44 15.104-67.648l-110.4-60.352h-0.448a8.448 8.448 0 0 0-4.16 1.088 309.12 309.12 0 0 1-40.832 33.728c-33.984 23.552-66.176 35.456-95.552 35.456-29.76 0-62.144-12.16-96.384-36.16a312.064 312.064 0 0 1-41.024-34.432 9.088 9.088 0 0 0-4.224-1.024H372.48l-114.304 61.76c2.752 6.272 15.104 36.288 15.104 67.584 0 93.696-75.008 170.496-169.024 175.36-1.408 7.36-8.704 48.704-8.704 79.744s7.36 72.384 8.704 79.744c94.016 4.8 169.024 81.6 169.024 175.36 0 31.424-12.48 61.632-15.104 67.712l108.16 59.52h0.256a8 8 0 0 0 3.584-0.896c2.048-2.112 18.176-19.008 41.408-35.776 34.688-25.088 67.648-37.76 97.92-37.76 30.656 0 63.872 12.928 98.752 38.464 23.36 17.152 39.616 34.24 41.6 36.416z m-137.984-223.104c-88.32 0-160.192-71.68-160.192-159.808s71.872-159.744 160.192-159.744c88.384 0 160.256 71.616 160.256 159.744s-71.872 159.808-160.256 159.808z m0-255.744a96 96 0 0 0 0 191.808 95.936 95.936 0 0 0 0-191.808z"></path></svg>
 </g>
 
+<g id="textdecoration">
+  <svg width="31" height="28" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+    <text fill="#000000" font-family="serif" font-size="24" id="svg_1" stroke="#000000" stroke-width="0" text-anchor="middle" text-decoration="0" x="16" xml:space="preserve" y="21.5">ab</text>
+    <line fill="none" id="svg_2" stroke="#ff7f00" stroke-width="2" x1="1" x2="29.70526" y1="14" y2="14"/>
+  </svg>
+</g>
+
 <g id="svg_eof"/>
 
 </svg>

src/editor/index.html

@@ -319,12 +319,17 @@
         </div>
         <div id="text_panel">
           <div class="toolset">
-            <div class="tool_button" id="tool_text_anchor_start" title="Align the text in start"></div>
-            <div class="tool_button" id="tool_text_anchor_middle" title="Align the text in middle"></div>
-            <div class="tool_button" id="tool_text_anchor_end" title="Align the text in end"></div>
             <div class="tool_button" id="tool_bold" title="Bold Text [B]"><span></span>B</div>
             <div class="tool_button" id="tool_italic" title="Italic Text [I]"><span></span>i</div>
           </div>
+          <div class="dropdown toolset" id="tool_text_anchor" title="Define the text anchor">
+            <div id="text_anchor_icon" class="icon_label"></div>
+            <button></button>
+          </div>
+          <div class="dropdown toolset" id="tool_text_decoration" title="Format text with decoration">
+            <div id="text_decoration_icon" class="icon_label"></div>
+            <button></button>
+          </div>
           <div class="toolset" id="tool_font_family">
             <label>
               <!-- Font family -->
@@ -529,6 +534,16 @@
           <li class="push_button" id="tool_posmiddle" title="Align Middle"></li>
           <li class="push_button" id="tool_posbottom" title="Align Bottom"></li>
         </ul>
+        <ul id="text_anchor_opts">
+          <li class="push_button" id="tool_text_anchor_start" title="Align the text in start" data-value="start"></li>
+          <li class="push_button" id="tool_text_anchor_middle" title="Align the text in middle" data-value="middle"></li>
+          <li class="push_button" id="tool_text_anchor_end" title="Align the text in end" data-value="end"></li>
+        </ul>
+        <ul id="text_decoration_opts">
+          <li class="push_button" id="tool_text_decoration_underline" title="Underline Text" data-value="underline">ab</li>
+          <li class="push_button" id="tool_text_decoration_linethrough" title="Strike through Text" data-value="line-through">ab</li>
+          <li class="push_button" id="tool_text_decoration_overline" title="Overline Text" data-value="overline">ab</li>
+        </ul>
       </div>
       <!-- hidden divs -->
       <div id="color_picker"></div>

src/editor/svgedit.css

@@ -776,8 +776,10 @@ span.zoom_tool {
   padding-right: 5px;
 }
 
-#tool_bold, #tool_italic {
-  font: bold 2.1em/1.1em serif;
+#tool_bold,
+#tool_italic,
+#text_decoration_opts li {
+  font: 2.1em/1.1em serif;
   text-align: center;
   padding-left: 2px;
   position: relative;
@@ -788,7 +790,9 @@ span.zoom_tool {
   left: -9999px;
 }
 
-#tool_bold span, #tool_italic span {
+#tool_bold span,
+#tool_italic span,
+#text_decoration_opts li span{
   position: absolute;
   width: 100%;
   height: 100%;
@@ -797,11 +801,26 @@ span.zoom_tool {
   opacity: 0;
 }
 
+#tool_bold {
+  font-weight: bold;
+}
+
 #tool_italic {
-  font-weight: normal;
   font-style: italic;
 }
 
+#tool_text_decoration_underline {
+  text-decoration-line: underline;
+}
+
+#tool_text_decoration_overline {
+  text-decoration-line: overline;
+}
+
+#tool_text_decoration_linethrough {
+  text-decoration-line: line-through;
+}
+
 #url_notice {
   padding-top: 4px;
   display: none;

src/editor/svgedit.js

@@ -1201,6 +1201,8 @@ editor.init = () => {
         '#group_opacityLabel': 'opacity',
         '#blurLabel': 'blur',
         '#font_sizeLabel': 'fontsize',
+        '#text_anchor_icon': 'anchor_middle',
+        '#text_decoration_icon': 'textdecoration',
 
         '.flyout_arrow_horiz': 'arrow_right',
         '.dropdown button, #main_button .dropdown': 'arrow_down',
@@ -2312,26 +2314,6 @@ editor.init = () => {
           } else {
             $('#tool_bold').removeClass('push_button_pressed').addClass('tool_button');
           }
-          const textAnchorStart = $('#tool_text_anchor_start');
-          const textAnchorMiddle = $('#tool_text_anchor_middle');
-          const textAnchorEnd = $('#tool_text_anchor_end');
-          switch (elem.getAttribute('text-anchor')) {
-          case 'start':
-            textAnchorStart.addClass('push_button_pressed').removeClass('tool_button');
-            textAnchorMiddle.removeClass('push_button_pressed').addClass('tool_button');
-            textAnchorEnd.removeClass('push_button_pressed').addClass('tool_button');
-            break;
-          case 'middle':
-            textAnchorStart.removeClass('push_button_pressed').addClass('tool_button');
-            textAnchorMiddle.addClass('push_button_pressed').removeClass('tool_button');
-            textAnchorEnd.removeClass('push_button_pressed').addClass('tool_button');
-            break;
-          case 'end':
-            textAnchorStart.removeClass('push_button_pressed').addClass('tool_button');
-            textAnchorMiddle.removeClass('push_button_pressed').addClass('tool_button');
-            textAnchorEnd.addClass('push_button_pressed').removeClass('tool_button');
-            break;
-          }
           $('#font_family').val(elem.getAttribute('font-family'));
           $('#font_size').val(elem.getAttribute('font-size'));
           $('#text').val(elem.textContent);
@@ -3917,6 +3899,22 @@ editor.init = () => {
     svgCanvas.alignSelectedElements(letter, 'page');
   }, {multiclick: true});
 
+  addAltDropDown('#tool_text_decoration', '#text_decoration_opts', function () {
+    const selectedTextDecoration = $(this).data('value');
+
+    if (svgCanvas.hasTextDecoration(selectedTextDecoration)) {
+      svgCanvas.removeTextDecoration(selectedTextDecoration);
+    } else {
+      svgCanvas.addTextDecoration(selectedTextDecoration);
+    }
+  }, {multiclick: true});
+
+  addAltDropDown('#tool_text_anchor', '#text_anchor_opts', function () {
+    const selectedTextAnchor = $(this).data('value');
+    svgCanvas.setTextAnchor(selectedTextAnchor);
+    updateContextPanel();
+  }, {});
+
   /*
 
   When a flyout icon is selected
@@ -4345,17 +4343,6 @@ editor.init = () => {
     return false;
   };
 
-  /**
-   *
-   * @param {string} value "start","end" or "middle"
-   * @returns {false}
-   */
-  const clickTextAnchor = function (value) {
-    svgCanvas.setTextAnchor(value);
-    updateContextPanel();
-    return false;
-  };
-
   /**
   *
   * @returns {void}
@@ -5540,9 +5527,6 @@ editor.init = () => {
       // {sel: '#tools_ellipse_show', fn: clickEllipse, evt: 'click'},
       {sel: '#tool_bold', fn: clickBold, evt: 'mousedown'},
       {sel: '#tool_italic', fn: clickItalic, evt: 'mousedown'},
-      {sel: '#tool_text_anchor_start', fn () { clickTextAnchor('start'); }, evt: 'mousedown'},
-      {sel: '#tool_text_anchor_middle', fn () { clickTextAnchor('middle'); }, evt: 'mousedown'},
-      {sel: '#tool_text_anchor_end', fn () { clickTextAnchor('end'); }, evt: 'mousedown'},
       {sel: '#sidepanel_handle', fn: toggleSidePanel, key: ['X']},
       {sel: '#copy_save_done', fn: cancelOverlays, evt: 'click'},
 

src/svgcanvas/elem-get-set.js

@@ -607,6 +607,66 @@ isNullish(selectedElements[1])) {
   }
 };
 
+/**
+ * Checks whether the selected element has the given text decoration value or not
+ * @function module:svgcanvas.SvgCanvas#hasTextDecoration
+ * @param {string} value - The value that should be checked
+ * @returns {boolean} Indicates whether or not element has the text decoration value
+ */
+export const hasTextDecorationMethod = function (value) {
+  const selectedElements = elemContext_.getSelectedElements();
+  const selected = selectedElements[0];
+
+  if (!isNullish(selected) && selected.tagName === 'text' && isNullish(selectedElements[1])) {
+    const attribute = selected.getAttribute('text-decoration');
+    if (attribute) {
+      return attribute.includes(value);
+    }
+  }
+
+  return false;
+};
+
+/**
+ * Adds the given value to the text decoration
+ * @function module:svgcanvas.SvgCanvas#addTextDecoration
+ * @param {string} value - The value that should be added
+ * @returns {void}
+ */
+export const addTextDecorationMethod = function (value) {
+  const selectedElements = elemContext_.getSelectedElements();
+  const selected = selectedElements[0];
+
+  if (!isNullish(selected) && selected.tagName === 'text' && isNullish(selectedElements[1])) {
+    const oldValue = selected.getAttribute('text-decoration') || '';
+    elemContext_.getCanvas().changeSelectedAttribute('text-decoration', oldValue + ' ' + value);
+  }
+
+  if (!selectedElements[0].textContent) {
+    elemContext_.getCanvas().textActions.setCursor();
+  }
+};
+
+/**
+ * Removes the given value from the text decoration
+ * @function module:svgcanvas.SvgCanvas#removeTextDecoration
+ * @param {string} value - The value that should be removed
+ * @returns {void}
+ */
+export const removeTextDecorationMethod = function (value) {
+  const selectedElements = elemContext_.getSelectedElements();
+  const selected = selectedElements[0];
+
+  if (!isNullish(selected) && selected.tagName === 'text' && isNullish(selectedElements[1])) {
+    const actualValues = selected.getAttribute('text-decoration');
+    elemContext_.getCanvas().changeSelectedAttribute('text-decoration', actualValues.replace(value, ''));
+  }
+
+  if (!selectedElements[0].textContent) {
+    elemContext_.getCanvas().textActions.setCursor();
+  }
+};
+
 /**
  * Set the new text anchor
  * @function module:svgcanvas.SvgCanvas#setTextAnchor

src/svgcanvas/sanitize.js

@@ -49,7 +49,7 @@ const svgWhiteList_ = {
   svg: ['class', 'clip-path', 'clip-rule', 'filter', 'id', 'height', 'mask', 'preserveAspectRatio', 'requiredFeatures', 'style', 'systemLanguage', 'viewBox', 'width', 'x', 'xmlns', 'xmlns:se', 'xmlns:xlink', 'y'],
   switch: ['class', 'id', 'requiredFeatures', 'systemLanguage'],
   symbol: ['class', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'id', 'opacity', 'preserveAspectRatio', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform', 'viewBox'],
-  text: ['class', 'clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'id', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'text-anchor', 'transform', 'x', 'xml:space', 'y', 'display'],
+  text: ['class', 'clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'id', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'text-decoration', 'style', 'systemLanguage', 'text-anchor', 'transform', 'x', 'xml:space', 'y', 'display'],
   textPath: ['class', 'id', 'method', 'requiredFeatures', 'spacing', 'startOffset', 'style', 'systemLanguage', 'transform', 'xlink:href', 'display'],
   title: [],
   tspan: ['class', 'clip-path', 'clip-rule', 'dx', 'dy', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'id', 'mask', 'opacity', 'requiredFeatures', 'rotate', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'text-anchor', 'textLength', 'transform', 'x', 'xml:space', 'y', 'display'],

src/svgcanvas/svgcanvas.js

@@ -57,7 +57,8 @@ import {
   setDocumentTitleMethod, setResolutionMethod, getEditorNSMethod, setBBoxZoomMethod,
   setZoomMethod, setColorMethod, setGradientMethod, findDuplicateGradient, setPaintMethod,
   setStrokeWidthMethod, setStrokeAttrMethod, getBoldMethod, setBoldMethod, getItalicMethod,
-  setItalicMethod, setTextAnchorMethod, getFontFamilyMethod, setFontFamilyMethod, setFontColorMethod, getFontColorMethod,
+  setItalicMethod, hasTextDecorationMethod, addTextDecorationMethod, removeTextDecorationMethod,
+  setTextAnchorMethod, getFontFamilyMethod, setFontFamilyMethod, setFontColorMethod, getFontColorMethod,
   getFontSizeMethod, setFontSizeMethod, getTextMethod, setTextContentMethod,
   setImageURLMethod, setLinkURLMethod, setRectRadiusMethod, makeHyperlinkMethod,
   removeHyperlinkMethod, setSegTypeMethod, setBackgroundMethod
@@ -2215,6 +2216,30 @@ class SvgCanvas {
 */
     this.setItalic = setItalicMethod;
 
+    /**
+     * Check whether selected element has the given text decoration or not.
+     * @function module:svgcanvas.SvgCanvas#hasTextDecoration
+     * @param {string} value - The value that should be checked
+     * @returns {boolean} Indicates whether the element has the given text decoration
+     */
+    this.hasTextDecoration = hasTextDecorationMethod;
+
+    /**
+     * Adds the given value to the text decoration.
+     * @function module:svgcanvas.SvgCanvas#addTextDecoration
+     * @param {string} value - The value that should be added
+     * @returns {void}
+     */
+    this.addTextDecoration = addTextDecorationMethod;
+
+    /**
+     * Removes the given value from the text decoration.
+     * @function module:svgcanvas.SvgCanvas#removeTextDecoration
+     * @param {string} value - The value that should be removed
+     * @returns {void}
+     */
+    this.removeTextDecoration = removeTextDecorationMethod;
+
     /**
 * Set the new text anchor.
 * @function module:svgcanvas.SvgCanvas#setTextAnchor