github/svgedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added word spacing to text formatting tools

Browse Source
This commit is contained in:
Timo Dittmann
2021-01-25 13:25:22 +01:00
committed by JFH
parent 92eac95627
commit 69bf3d9d81
70 changed files with 320 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
badges/coverage-badge.svg
View File

@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="421" height="20"><defs><style>text{font-size:11px;font-family:Verdana,DejaVu Sans,Geneva,sans-serif}text.shadow{fill:#010101;fill-opacity:.3}text.high{fill:#fff}</style><linearGradient id="smooth" x2="0" y2="100%"><stop offset="0" stop-color="#aaa" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><mask id="round"><rect width="100%" height="100%" rx="3" fill="#fff"/></mask></defs><g id="bg" mask="url(#round)"><path fill="green" stroke="#000" d="M0 0h113v20H0zM113 0h109v20H113zM222 0h87v20h-87zM309 0h112v20H309z"/><path fill="url(#smooth)" d="M0 0h421v20H0z"/></g><g id="fg"><text class="shadow" x="5.5" y="15">Statements 53.1%</text><text class="high" x="5" y="14">Statements 53.1%</text><text class="shadow" x="118.5" y="15">Branches 41.93%</text><text class="high" x="118" y="14">Branches 41.93%</text><text class="shadow" x="227.5" y="15">Lines 53.92%</text><text class="high" x="227" y="14">Lines 53.92%</text><text class="shadow" x="314.5" y="15">Functions 60.63%</text><text class="high" x="314" y="14">Functions 60.63%</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="421" height="20"><defs><style>text{font-size:11px;font-family:Verdana,DejaVu Sans,Geneva,sans-serif}text.shadow{fill:#010101;fill-opacity:.3}text.high{fill:#fff}</style><linearGradient id="smooth" x2="0" y2="100%"><stop offset="0" stop-color="#aaa" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><mask id="round"><rect width="100%" height="100%" rx="3" fill="#fff"/></mask></defs><g id="bg" mask="url(#round)"><path fill="green" stroke="#000" d="M0 0h120v20H0zM120 0h109v20H120zM229 0h87v20h-87zM316 0h105v20H316z"/><path fill="url(#smooth)" d="M0 0h421v20H0z"/></g><g id="fg"><text class="shadow" x="5.5" y="15">Statements 53.21%</text><text class="high" x="5" y="14">Statements 53.21%</text><text class="shadow" x="125.5" y="15">Branches 42.09%</text><text class="high" x="125" y="14">Branches 42.09%</text><text class="shadow" x="234.5" y="15">Lines 54.02%</text><text class="high" x="234" y="14">Lines 54.02%</text><text class="shadow" x="321.5" y="15">Functions 60.7%</text><text class="high" x="321" y="14">Functions 60.7%</text></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

2
badges/tests-badge.svg
View File

@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="97" height="20"><defs><style>text{font-size:11px;font-family:Verdana,DejaVu Sans,Geneva,sans-serif}text.shadow{fill:#010101;fill-opacity:.3}text.high{fill:#fff}</style><linearGradient id="smooth" x2="0" y2="100%"><stop offset="0" stop-color="#aaa" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><mask id="round"><rect width="100%" height="100%" rx="3" fill="#fff"/></mask></defs><g id="bg" mask="url(#round)"><path fill="#696969" d="M0 0h41v20H0z"/><path fill="#4c1" d="M41 0h56v20H41z"/><path fill="url(#smooth)" d="M0 0h97v20H0z"/></g><g id="fg"><text class="shadow" x="5.5" y="15">Tests</text><text class="high" x="5" y="14">Tests</text><text class="shadow" x="46.5" y="15">151/151</text><text class="high" x="46" y="14">151/151</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="97" height="20"><defs><style>text{font-size:11px;font-family:Verdana,DejaVu Sans,Geneva,sans-serif}text.shadow{fill:#010101;fill-opacity:.3}text.high{fill:#fff}</style><linearGradient id="smooth" x2="0" y2="100%"><stop offset="0" stop-color="#aaa" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><mask id="round"><rect width="100%" height="100%" rx="3" fill="#fff"/></mask></defs><g id="bg" mask="url(#round)"><path fill="#696969" d="M0 0h41v20H0z"/><path fill="#4c1" d="M41 0h56v20H41z"/><path fill="url(#smooth)" d="M0 0h97v20H0z"/></g><g id="fg"><text class="shadow" x="5.5" y="15">Tests</text><text class="high" x="5" y="14">Tests</text><text class="shadow" x="46.5" y="15">153/153</text><text class="high" x="46" y="14">153/153</text></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 820 B

After

Width:  |  Height:  |  Size: 820 B

70
cypress/integration/ui/__snapshots__/scenario.js.snap
View File

@@ -494,6 +494,7 @@ exports[`use various parts of svg-edit > check tool_star #0`] = `
font-weight="bold"
text-decoration=" underline overline line-through"
letter-spacing="150"
word-spacing="10"
>
B
</text>
@@ -587,6 +588,7 @@ exports[`use various parts of svg-edit > check tool_polygon #0`] = `
font-weight="bold"
text-decoration=" underline overline line-through"
letter-spacing="150"
word-spacing="10"
>
B
</text>
@@ -1113,3 +1115,71 @@ exports[`use various parts of svg-edit > check tool_letter_spacing #0`] = `
</g>
</svg>
`;
exports[`use various parts of svg-edit > check tool_word_spacing #0`] = `
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
width="640"
height="480"
id="svgcontent"
overflow="visible"
x="640"
y="480"
viewBox="0 0 640 480"
>
<g class="layer">
<title>Layer 1</title>
<rect
id="rect"
fill="#FF0000"
height="70"
stroke="#000000"
stroke-width="5"
width="94"
x="69.5"
y="51.5"
fill-opacity="1"
stroke-opacity="1"
></rect>
<text
fill="#ffff00"
stroke="#000000"
stroke-width="0"
x="116"
y="87"
id="svg_1"
font-size="24"
font-family="serif"
text-anchor="end"
xml:space="preserve"
fill-opacity="1"
stroke-opacity="1"
font-=""
font-weight="bold"
text-decoration=" underline overline line-through"
letter-spacing="150"
word-spacing="10"
>
B
</text>
<text
fill="#000000"
stroke="#000000"
stroke-width="0"
x="136"
y="107"
font-size="24"
font-family="serif"
text-anchor="middle"
xml:space="preserve"
fill-opacity="1"
stroke-opacity="1"
id="svg_2"
transform="matrix(1 0 0 1 0 0)"
>
B
</text>
</g>
</svg>
`;

8
cypress/integration/ui/scenario.js
View File

@@ -114,6 +114,14 @@ describe('use various parts of svg-edit', function () {
.type('{enter}', {force: true});
testSnapshot();
});
it('check tool_word_spacing', function () {
cy.get('#svg_1').click({force: true});
cy.get('#word_spacing')
.type('{selectall}', {force: true})
.type('10', {force: true})
.type('{enter}', {force: true});
testSnapshot();
});
it('check tool_star', function () {
cy.get('#tool_star')
.click({force: true});

10
cypress/integration/unit/sanitize.js
View File

@@ -46,4 +46,14 @@ describe('sanitize', function () {
assert.equal(text.getAttribute('text-decoration'), 'underline');
});
it('Test sanitizeSvg() does not strip word-spacing attribute from text', function () {
const text = document.createElementNS(NS.SVG, 'text');
text.setAttribute('word-spacing', '10');
svg.append(text);
sanitize.sanitizeSvg(text);
assert.equal(text.getAttribute('word-spacing'), '10');
});
});

18
src/editor/images/svg_edit_icons.svg
View File

@@ -1093,6 +1093,24 @@
</svg>
</g>
<g id="wordspacing">
<svg width="44" height="18" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<defs>
<marker id="se_marker_start_svg_2" markerHeight="5" markerWidth="5" orient="auto" refX="50" refY="50" viewBox="0 0 100 100">
<path d="m0,50l100,40l-30,-40l30,-40l-100,40z" fill="#ff7f00" id="svg_3" stroke="#ff7f00" stroke-width="10"/>
</marker>
<marker id="se_marker_end_svg_2" markerHeight="5" markerWidth="5" orient="auto" refX="50" refY="50" viewBox="0 0 100 100">
<path d="m100,50l-100,40l30,-40l-30,-40l100,40z" fill="#ff7f00" id="svg_4" stroke="#ff7f00" stroke-width="10"/>
</marker>
</defs>
<g class="layer">
<title>Layer 1</title>
<text fill="#000000" font-family="serif" font-size="15" id="svg_1" stroke="#000000" stroke-width="0" text-anchor="middle" x="21.78779" xml:space="preserve" y="14.00814">A B</text>
<line fill="none" id="svg_2" marker-end="url(#se_marker_end_svg_2)" marker-start="url(#se_marker_start_svg_2)" stroke="#ff7f00" x1="15.19377" x2="28.36873" y1="8.75" y2="8.75"/>
</g>
</svg>
</g>
<g id="svg_eof"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 71 KiB

After

Width:  |  Height:  |  Size: 72 KiB

14
src/editor/index.html
View File

@@ -344,6 +344,20 @@
</ul>
</div>
</div>
<div class="toolset" id="tool_word_spacing" title="Change the word spacing of the text">
<label>
<span id="word_spacing_icon" class="icon_label"></span>
<input id="word_spacing" size="3" value="0" type="text" />
</label>
<div id="word_spacing_dropdown" class="dropdown">
<button></button>
<ul>
<li class="special">
<div id="word_spacing_slider"></div>
</li>
</ul>
</div>
</div>
<div class="toolset" id="tool_font_family">
<label>
<!-- Font family -->

1
src/editor/locale.js
View File

@@ -307,6 +307,7 @@ export const readLang = function (langData) {
tool_image: tools.mode_image,
tool_italic: properties.italic,
tool_letter_spacing: properties.letter_spacing,
tool_word_spacing: properties.word_spacing,
tool_line: tools.mode_line,
tool_move_bottom: tools.move_bottom,

3
src/editor/locale/lang.af.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.ar.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.az.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.be.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.bg.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.ca.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.cs.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Hlavní menu',

3
src/editor/locale/lang.cy.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.da.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.de.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Den Text linksbündig ausrichten',
text_anchor_middle: 'Den Text zentriert ausrichten',
text_anchor_end: 'Den Text rechtsbündig ausrichten',
letter_spacing: 'Den Abstand zwischen den Buchstabend anpassen'
letter_spacing: 'Den Abstand zwischen den Buchstaben anpassen',
word_spacing: 'Den Abstand zwischen den einzelnen Wörtern anpassen'
},
tools: {
main_menu: 'Hauptmenü',

3
src/editor/locale/lang.el.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

1
src/editor/locale/lang.en.js
View File

@@ -75,6 +75,7 @@ export default {
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing',
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.es.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Menú principal',

3
src/editor/locale/lang.et.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.fa.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.fi.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.fr.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Menu principal',

3
src/editor/locale/lang.fy.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.ga.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.gl.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.he.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.hi.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.hr.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.hu.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.hy.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.id.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.is.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.it.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Menù principale',

3
src/editor/locale/lang.ja.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.ko.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.lt.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.lv.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.mk.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.ms.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.mt.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.nl.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Hoofdmenu',

3
src/editor/locale/lang.no.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.pl.js
View File

@@ -75,7 +75,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Menu główne',

3
src/editor/locale/lang.pt-BR.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Menu Principal',

3
src/editor/locale/lang.pt-PT.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.ro.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Menu Principal',

3
src/editor/locale/lang.ru.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Главное меню',

3
src/editor/locale/lang.sk.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Hlavné menu',

3
src/editor/locale/lang.sl.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Glavni meni',

3
src/editor/locale/lang.sq.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.sr.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.sv.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.sw.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.test.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.th.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.tl.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.tr.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.uk.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.vi.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

1
src/editor/locale/lang.yi.js
View File

@@ -75,6 +75,7 @@ export default {
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing',
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.zh-CN.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: '主菜单',

3
src/editor/locale/lang.zh-HK.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

3
src/editor/locale/lang.zh-TW.js
View File

@@ -74,7 +74,8 @@ export default {
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
letter_spacing: 'Change the letter spacing',
word_spacing: 'Change the word spacing'
},
tools: {
main_menu: 'Main Menu',

32
src/editor/svgedit.js
View File

@@ -1204,6 +1204,7 @@ editor.init = () => {
'#text_anchor_icon': 'anchor_middle',
'#text_decoration_icon': 'textdecoration',
'#letter_spacing_icon': 'letterspacing',
'#word_spacing_icon': 'wordspacing',
'.flyout_arrow_horiz': 'arrow_right',
'.dropdown button, #main_button .dropdown': 'arrow_down',
@@ -2329,6 +2330,9 @@ editor.init = () => {
const letterSpacingValue = svgCanvas.getLetterSpacing(elem);
$('#letter_spacing').val(letterSpacingValue);
$('#letter_spacing_slider').slider('option', 'value', letterSpacingValue);
const wordSpacingValue = svgCanvas.getWordSpacing(elem);
$('#word_spacing').val(wordSpacingValue);
$('#word_spacing_slider').slider('option', 'value', wordSpacingValue);
$('#font_family').val(elem.getAttribute('font-family'));
$('#font_size').val(elem.getAttribute('font-size'));
$('#text').val(elem.textContent);
@@ -3955,6 +3959,31 @@ editor.init = () => {
svgCanvas.setLetterSpacing(val);
};
editor.addDropDown('#word_spacing_dropdown', $.noop);
$('#word_spacing_slider').slider({
step: 1,
stop (evt, ui) {
changeWordSpacing(ui);
$('#word_spacing_dropdown li').show();
$(window).mouseup();
},
slide (evt, ui) {
changeWordSpacing(ui, null);
}
});
const changeWordSpacing = function (ctl, val) {
if (Utils.isNullish(val)) { val = ctl.value; }
$('#word_spacing').val(val);
if (!ctl || !ctl.handle) {
$('#word_spacing_slider').slider('option', 'value', val);
}
svgCanvas.setWordSpacing(val);
};
/*
When a flyout icon is selected
@@ -5838,6 +5867,9 @@ editor.init = () => {
$('#letter_spacing').SpinButton({
min: -1000, step: 1, stateObj, callback: changeLetterSpacing
});
$('#word_spacing').SpinButton({
min: -1000, step: 1, stateObj, callback: changeWordSpacing
});
$('#zoom').SpinButton({
min: 0.001, max: 10000, step: 50, stepfunc: stepZoom,
stateObj, callback: changeZoom

32
src/svgcanvas/elem-get-set.js
View File

@@ -717,6 +717,38 @@ export const setLetterSpacingMethod = function (value) {
}
};
/**
* Returns the word spacing value
* @function module:svgcanvas.SvgCanvas#getWordSpacing
* @returns {string} The word spacing value
*/
export const getWordSpacingMethod = function () {
const selectedElements = elemContext_.getSelectedElements();
const selected = selectedElements[0];
if (!isNullish(selected) && selected.tagName === 'text' && isNullish(selectedElements[1])) {
return selected.getAttribute('word-spacing') || 0;
}
return null;
};
/**
* Set the new word spacing.
* @function module:svgcanvas.SvgCanvas#setWordSpacing
* @param {string} value - The word spacing
* @returns {void}
*/
export const setWordSpacingMethod = function (value) {
const selectedElements = elemContext_.getSelectedElements();
const selected = selectedElements[0];
if (!isNullish(selected) && selected.tagName === 'text' &&
isNullish(selectedElements[1])) {
elemContext_.getCanvas().changeSelectedAttribute('word-spacing', value);
}
if (!selectedElements[0].textContent) {
elemContext_.getCanvas().textActions.setCursor();
}
};
/**
* @function module:svgcanvas.SvgCanvas#getFontFamily
* @returns {string} The current font family

2
src/svgcanvas/sanitize.js
View File

@@ -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', 'text-decoration', 'letter-spacing', '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', 'letter-spacing', 'word-spacing', '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'],

20
src/svgcanvas/svgcanvas.js
View File

@@ -58,7 +58,8 @@ import {
setZoomMethod, setColorMethod, setGradientMethod, findDuplicateGradient, setPaintMethod,
setStrokeWidthMethod, setStrokeAttrMethod, getBoldMethod, setBoldMethod, getItalicMethod,
setItalicMethod, hasTextDecorationMethod, addTextDecorationMethod, removeTextDecorationMethod, setLetterSpacingMethod,
getLetterSpacingMethod, setTextAnchorMethod, getFontFamilyMethod, setFontFamilyMethod, setFontColorMethod, getFontColorMethod,
getLetterSpacingMethod, setWordSpacingMethod, getWordSpacingMethod, setTextAnchorMethod,
getFontFamilyMethod, setFontFamilyMethod, setFontColorMethod, getFontColorMethod,
getFontSizeMethod, setFontSizeMethod, getTextMethod, setTextContentMethod,
setImageURLMethod, setLinkURLMethod, setRectRadiusMethod, makeHyperlinkMethod,
removeHyperlinkMethod, setSegTypeMethod, setBackgroundMethod
@@ -2248,7 +2249,6 @@ class SvgCanvas {
*/
this.getLetterSpacing = getLetterSpacingMethod;
/**
* Changes the letter spacing.
* @function module:svgcanvas.SvgCanvas#setLetterSpacing
@@ -2257,6 +2257,22 @@ class SvgCanvas {
*/
this.setLetterSpacing = setLetterSpacingMethod;
/**
* Returns the word spacing.
* @function module:svgcanvas.SvgCanvas#getWordSpacing
* @param {string} value - The value that should be set
* @returns {string} The word spacing value
*/
this.getWordSpacing = getWordSpacingMethod;
/**
* Changes the word spacing.
* @function module:svgcanvas.SvgCanvas#setWordSpacing
* @param {string} value - The value that should be set
* @returns {void}
*/
this.setWordSpacing = setWordSpacingMethod;
/**
* Set the new text anchor.
* @function module:svgcanvas.SvgCanvas#setTextAnchor