Added letter spacing to text formatting tools

This commit is contained in:
Timo Dittmann
2021-01-25 07:39:48 +01:00
committed by JFH
parent 7c9e9d26d6
commit 92eac95627
70 changed files with 365 additions and 87 deletions

View File

@@ -1076,6 +1076,23 @@
</svg>
</g>
<g id="letterspacing">
<svg width="25" height="29" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:se="http://svg-edit.googlecode.com" data-name="Ebene 1">
<defs>
<marker id="se_marker_start_svg_3" markerHeight="5" markerWidth="5" orient="auto" refX="50" refY="50" se_type="leftarrow" viewBox="0 0 100 100">
<path d="m0,50l100,40l-30,-40l30,-40z" fill="#ff7f00" stroke="#ff7f00" stroke-width="10"/>
</marker>
<marker id="se_marker_end_svg_3" markerHeight="5" markerWidth="5" orient="auto" refX="50" refY="50" se_type="rightarrow" viewBox="0 0 100 100">
<path d="m100,50l-100,40l30,-40l-30,-40z" fill="#ff7f00" stroke="#ff7f00" stroke-width="10"/>
</marker>
</defs>
<g>
<text fill="#000000" font-family="serif" font-size="24" id="svg_2" stroke="#000000" stroke-width="0" text-anchor="middle" x="13.25" xml:space="preserve" y="21.5">ab</text>
<line fill="none" id="svg_3" marker-end="url(#se_marker_end_svg_3)" marker-start="url(#se_marker_start_svg_3)" stroke="#ff7f00" x1="2.75" x2="22.64486" y1="26.75" y2="26.75"/>
</g>
</svg>
</g>
<g id="svg_eof"/>
</svg>

Before

Width:  |  Height:  |  Size: 70 KiB

After

Width:  |  Height:  |  Size: 71 KiB

View File

@@ -330,6 +330,20 @@
<div id="text_decoration_icon" class="icon_label"></div>
<button></button>
</div>
<div class="toolset" id="tool_letter_spacing" title="Change the letter spacing of the text">
<label>
<span id="letter_spacing_icon" class="icon_label"></span>
<input id="letter_spacing" size="3" value="0" type="text" />
</label>
<div id="letter_spacing_dropdown" class="dropdown">
<button></button>
<ul>
<li class="special">
<div id="letter_spacing_slider"></div>
</li>
</ul>
</div>
</div>
<div class="toolset" id="tool_font_family">
<label>
<!-- Font family -->

View File

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

View File

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

View File

@@ -73,7 +73,8 @@ export default {
italic: 'مائل نص',
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end'
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
},
tools: {
main_menu: 'Main Menu',

View File

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

View File

@@ -73,7 +73,8 @@ export default {
italic: 'Нахілены тэкст',
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end'
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
},
tools: {
main_menu: 'Main Menu',

View File

@@ -73,7 +73,8 @@ export default {
italic: 'Курсив текст',
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end'
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
},
tools: {
main_menu: 'Main Menu',

View File

@@ -73,7 +73,8 @@ export default {
italic: 'Text en cursiva',
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end'
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
},
tools: {
main_menu: 'Main Menu',

View File

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

View File

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

View File

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

View File

@@ -73,7 +73,8 @@ export default {
italic: 'Kursiver Text',
text_anchor_start: 'Den Text linksbündig ausrichten',
text_anchor_middle: 'Den Text zentriert ausrichten',
text_anchor_end: 'Den Text rechtsbündig ausrichten'
text_anchor_end: 'Den Text rechtsbündig ausrichten',
letter_spacing: 'Den Abstand zwischen den Buchstabend anpassen'
},
tools: {
main_menu: 'Hauptmenü',

View File

@@ -73,7 +73,8 @@ export default {
italic: 'Πλάγιους',
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end'
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
},
tools: {
main_menu: 'Main Menu',

View File

@@ -73,7 +73,8 @@ export default {
italic: 'Italic Text [I]',
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end'
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing',
},
tools: {
main_menu: 'Main Menu',

View File

@@ -73,7 +73,8 @@ export default {
italic: 'Texto en cursiva',
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end'
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
},
tools: {
main_menu: 'Menú principal',

View File

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

View File

@@ -73,7 +73,8 @@ export default {
italic: '‫متن کج ',
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end'
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
},
tools: {
main_menu: 'Main Menu',

View File

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

View File

@@ -73,7 +73,8 @@ export default {
italic: 'Texte en italique',
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end'
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
},
tools: {
main_menu: 'Menu principal',

View File

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

View File

@@ -73,7 +73,8 @@ export default {
italic: 'Iodálach Téacs',
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end'
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
},
tools: {
main_menu: 'Main Menu',

View File

@@ -73,7 +73,8 @@ export default {
italic: 'Texto en cursiva',
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end'
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
},
tools: {
main_menu: 'Main Menu',

View File

@@ -73,7 +73,8 @@ export default {
italic: 'טקסט נטוי',
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end'
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
},
tools: {
main_menu: 'Main Menu',

View File

@@ -73,7 +73,8 @@ export default {
italic: 'इटैलिक पाठ',
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end'
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
},
tools: {
main_menu: 'Main Menu',

View File

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

View File

@@ -73,7 +73,8 @@ export default {
italic: 'Dőlt szöveg',
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end'
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
},
tools: {
main_menu: 'Main Menu',

View File

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

View File

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

View File

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

View File

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

View File

@@ -73,7 +73,8 @@ export default {
italic: 'イタリック体',
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end'
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
},
tools: {
main_menu: 'Main Menu',

View File

@@ -73,7 +73,8 @@ export default {
italic: '기울임꼴 텍스트',
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end'
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
},
tools: {
main_menu: 'Main Menu',

View File

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

View File

@@ -73,7 +73,8 @@ export default {
italic: 'Kursīvs',
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end'
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
},
tools: {
main_menu: 'Main Menu',

View File

@@ -73,7 +73,8 @@ export default {
italic: 'Italic текст',
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end'
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
},
tools: {
main_menu: 'Main Menu',

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -73,7 +73,8 @@ export default {
italic: 'Texto em itálico',
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end'
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
},
tools: {
main_menu: 'Main Menu',

View File

@@ -73,7 +73,8 @@ export default {
italic: 'Text Înclinat',
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end'
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
},
tools: {
main_menu: 'Menu Principal',

View File

@@ -73,7 +73,8 @@ export default {
italic: 'Курсив',
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end'
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
},
tools: {
main_menu: 'Главное меню',

View File

@@ -73,7 +73,8 @@ export default {
italic: 'Kurzíva',
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end'
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
},
tools: {
main_menu: 'Hlavné menu',

View File

@@ -73,7 +73,8 @@ export default {
italic: 'Poševno',
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end'
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
},
tools: {
main_menu: 'Glavni meni',

View File

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

View File

@@ -73,7 +73,8 @@ export default {
italic: 'Италиц текст',
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end'
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
},
tools: {
main_menu: 'Main Menu',

View File

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

View File

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

View File

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

View File

@@ -73,7 +73,8 @@ export default {
italic: 'ข้อความตัวเอียง',
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end'
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
},
tools: {
main_menu: 'Main Menu',

View File

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

View File

@@ -73,7 +73,8 @@ export default {
italic: 'Italik yazı',
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end'
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
},
tools: {
main_menu: 'Main Menu',

View File

@@ -73,7 +73,8 @@ export default {
italic: 'Похилий текст',
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end'
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
},
tools: {
main_menu: 'Main Menu',

View File

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

View File

@@ -73,7 +73,8 @@ export default {
italic: 'יטאַליק טעקסט',
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end'
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing',
},
tools: {
main_menu: 'Main Menu',

View File

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

View File

@@ -73,7 +73,8 @@ export default {
italic: '斜体文本',
text_anchor_start: 'Align the text in start',
text_anchor_middle: 'Align the text in middle',
text_anchor_end: 'Align the text in end'
text_anchor_end: 'Align the text in end',
letter_spacing: 'Change the letter spacing'
},
tools: {
main_menu: 'Main Menu',

View File

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

View File

@@ -1203,6 +1203,7 @@ editor.init = () => {
'#font_sizeLabel': 'fontsize',
'#text_anchor_icon': 'anchor_middle',
'#text_decoration_icon': 'textdecoration',
'#letter_spacing_icon': 'letterspacing',
'.flyout_arrow_horiz': 'arrow_right',
'.dropdown button, #main_button .dropdown': 'arrow_down',
@@ -2325,6 +2326,9 @@ editor.init = () => {
} else {
$('#tool_bold').removeClass('push_button_pressed').addClass('tool_button');
}
const letterSpacingValue = svgCanvas.getLetterSpacing(elem);
$('#letter_spacing').val(letterSpacingValue);
$('#letter_spacing_slider').slider('option', 'value', letterSpacingValue);
$('#font_family').val(elem.getAttribute('font-family'));
$('#font_size').val(elem.getAttribute('font-size'));
$('#text').val(elem.textContent);
@@ -3926,6 +3930,31 @@ editor.init = () => {
updateContextPanel();
}, {});
editor.addDropDown('#letter_spacing_dropdown', $.noop);
$('#letter_spacing_slider').slider({
step: 1,
stop (evt, ui) {
changeLetterSpacing(ui);
$('#letter_spacing_dropdown li').show();
$(window).mouseup();
},
slide (evt, ui) {
changeLetterSpacing(ui, null);
}
});
const changeLetterSpacing = function (ctl, val) {
if (Utils.isNullish(val)) { val = ctl.value; }
$('#letter_spacing').val(val);
if (!ctl || !ctl.handle) {
$('#letter_spacing_slider').slider('option', 'value', val);
}
svgCanvas.setLetterSpacing(val);
};
/*
When a flyout icon is selected
@@ -5512,8 +5541,8 @@ editor.init = () => {
{sel: '#tool_editor_homepage', fn: openHomePage, evt: 'click'},
{sel: '#tool_open', fn () { window.dispatchEvent(new CustomEvent('openImage')); }, evt: 'click'},
{sel: '#tool_import', fn () { window.dispatchEvent(new CustomEvent('importImage')); }, evt: 'click'},
{sel: '#tool_delete', fn: deleteSelected, evt: 'click', key: ['del/backspace', true]},
{sel: '#tool_delete_multi', fn: deleteSelected, evt: 'click', key: ['del/backspace', true]},
{sel: '#tool_delete', fn: deleteSelected, evt: 'click', key: ['delete/backspace', true]},
{sel: '#tool_delete_multi', fn: deleteSelected, evt: 'click', key: ['delete/backspace', true]},
{sel: '#tool_reorient', fn: reorientPath, evt: 'click'},
{sel: '#tool_node_link', fn: linkControlPoints, evt: 'click'},
{sel: '#tool_node_clone', fn: clonePathNode, evt: 'click'},
@@ -5543,32 +5572,32 @@ editor.init = () => {
// Shortcuts not associated with buttons
{key: 'ctrl+left', fn () { rotateSelected(0, 1); }},
{key: 'ctrl+right', fn () { rotateSelected(1, 1); }},
{key: 'ctrl+shift+left', fn () { rotateSelected(0, 5); }},
{key: 'ctrl+shift+right', fn () { rotateSelected(1, 5); }},
{key: 'ctrl+arrowleft', fn () { rotateSelected(0, 1); }},
{key: 'ctrl+arrowright', fn () { rotateSelected(1, 1); }},
{key: 'ctrl+shift+arrowleft', fn () { rotateSelected(0, 5); }},
{key: 'ctrl+shift+arrowright', fn () { rotateSelected(1, 5); }},
{key: 'shift+O', fn: selectPrev},
{key: 'shift+P', fn: selectNext},
{key: [modKey + 'up', true], fn () { zoomImage(2); }},
{key: [modKey + 'down', true], fn () { zoomImage(0.5); }},
{key: [modKey + 'arrowup', true], fn () { zoomImage(2); }},
{key: [modKey + 'arrowdown', true], fn () { zoomImage(0.5); }},
{key: [modKey + ']', true], fn () { moveUpDownSelected('Up'); }},
{key: [modKey + '[', true], fn () { moveUpDownSelected('Down'); }},
{key: ['up', true], fn () { moveSelected(0, -1); }},
{key: ['down', true], fn () { moveSelected(0, 1); }},
{key: ['left', true], fn () { moveSelected(-1, 0); }},
{key: ['right', true], fn () { moveSelected(1, 0); }},
{key: 'shift+up', fn () { moveSelected(0, -10); }},
{key: 'shift+down', fn () { moveSelected(0, 10); }},
{key: 'shift+left', fn () { moveSelected(-10, 0); }},
{key: 'shift+right', fn () { moveSelected(10, 0); }},
{key: ['alt+up', true], fn () { svgCanvas.cloneSelectedElements(0, -1); }},
{key: ['alt+down', true], fn () { svgCanvas.cloneSelectedElements(0, 1); }},
{key: ['alt+left', true], fn () { svgCanvas.cloneSelectedElements(-1, 0); }},
{key: ['alt+right', true], fn () { svgCanvas.cloneSelectedElements(1, 0); }},
{key: ['alt+shift+up', true], fn () { svgCanvas.cloneSelectedElements(0, -10); }},
{key: ['alt+shift+down', true], fn () { svgCanvas.cloneSelectedElements(0, 10); }},
{key: ['alt+shift+left', true], fn () { svgCanvas.cloneSelectedElements(-10, 0); }},
{key: ['alt+shift+right', true], fn () { svgCanvas.cloneSelectedElements(10, 0); }},
{key: ['arrowup', true], fn () { moveSelected(0, -1); }},
{key: ['arrowdown', true], fn () { moveSelected(0, 1); }},
{key: ['arrowleft', true], fn () { moveSelected(-1, 0); }},
{key: ['arrowright', true], fn () { moveSelected(1, 0); }},
{key: 'shift+arrowup', fn () { moveSelected(0, -10); }},
{key: 'shift+arrowdown', fn () { moveSelected(0, 10); }},
{key: 'shift+arrowleft', fn () { moveSelected(-10, 0); }},
{key: 'shift+arrowright', fn () { moveSelected(10, 0); }},
{key: ['alt+arrowup', true], fn () { svgCanvas.cloneSelectedElements(0, -1); }},
{key: ['alt+arrowdown', true], fn () { svgCanvas.cloneSelectedElements(0, 1); }},
{key: ['alt+arrowleft', true], fn () { svgCanvas.cloneSelectedElements(-1, 0); }},
{key: ['alt+arrowright', true], fn () { svgCanvas.cloneSelectedElements(1, 0); }},
{key: ['alt+shift+arrowup', true], fn () { svgCanvas.cloneSelectedElements(0, -10); }},
{key: ['alt+shift+arrowdown', true], fn () { svgCanvas.cloneSelectedElements(0, 10); }},
{key: ['alt+shift+arrowleft', true], fn () { svgCanvas.cloneSelectedElements(-10, 0); }},
{key: ['alt+shift+arrowright', true], fn () { svgCanvas.cloneSelectedElements(10, 0); }},
{key: 'a', fn () { svgCanvas.selectAllInCurrentLayer(); }},
{key: modKey + 'a', fn () { svgCanvas.selectAllInCurrentLayer(); }},
@@ -5806,6 +5835,9 @@ editor.init = () => {
$('#blur').SpinButton({
min: 0, max: 10, step: 0.1, stateObj, callback: changeBlur
});
$('#letter_spacing').SpinButton({
min: -1000, step: 1, stateObj, callback: changeLetterSpacing
});
$('#zoom').SpinButton({
min: 0.001, max: 10000, step: 50, stepfunc: stepZoom,
stateObj, callback: changeZoom