Enhancement: Add text anchor to texts

This commit is contained in:
Timo Dittmann
2020-12-08 10:37:48 +01:00
parent ea7156232e
commit 6bf68e575d
67 changed files with 732 additions and 65 deletions

View File

@@ -1159,9 +1159,9 @@ editor.init = () => {
'#tool_ungroup': 'ungroup',
'#tool_unlink_use': 'unlink_use',
'#tool_alignleft, #tool_posleft': 'align_left',
'#tool_aligncenter, #tool_poscenter': 'align_center',
'#tool_alignright, #tool_posright': 'align_right',
'#tool_alignleft, #tool_posleft, #tool_text_anchor_start': 'align_left',
'#tool_aligncenter, #tool_poscenter, #tool_text_anchor_middle': 'align_center',
'#tool_alignright, #tool_posright, #tool_text_anchor_end': 'align_right',
'#tool_aligntop, #tool_postop': 'align_top',
'#tool_alignmiddle, #tool_posmiddle': 'align_middle',
'#tool_alignbottom, #tool_posbottom': 'align_bottom',
@@ -2246,6 +2246,26 @@ 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);
@@ -4258,6 +4278,16 @@ editor.init = () => {
return false;
};
/**
*
* @returns {false}
*/
const clickTextAnchor = function (value) {
svgCanvas.setTextAnchor(value);
updateContextPanel();
return false;
};
/**
*
* @returns {void}
@@ -5443,6 +5473,9 @@ 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'},