+
+
diff --git a/src/editor/svgedit.css b/src/editor/svgedit.css
index 355e28b0..e51a4d9e 100644
--- a/src/editor/svgedit.css
+++ b/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;
diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js
index 59e81bab..88b95b2a 100644
--- a/src/editor/svgedit.js
+++ b/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'},
diff --git a/src/svgcanvas/elem-get-set.js b/src/svgcanvas/elem-get-set.js
index 354e3355..3d08ccc7 100644
--- a/src/svgcanvas/elem-get-set.js
+++ b/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
diff --git a/src/svgcanvas/sanitize.js b/src/svgcanvas/sanitize.js
index 4adc68c8..94412698 100644
--- a/src/svgcanvas/sanitize.js
+++ b/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'],
diff --git a/src/svgcanvas/svgcanvas.js b/src/svgcanvas/svgcanvas.js
index f8f67472..50a22900 100644
--- a/src/svgcanvas/svgcanvas.js
+++ b/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