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

- Added german translations to extensions

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

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