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

Changed Text Anchor to Dropdown

master
Timo Dittmann 2022-01-04 08:03:22 +01:00
parent eb3567dc69
commit 959ac047d9
5 changed files with 194 additions and 367 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -373,141 +373,6 @@ exports[`use various parts of svg-edit > check tool_text_change_stoke_fill_color
</body>
`;
exports[`use various parts of svg-edit > check tool_text_anchor_start #0`] = `
<body>
<svg
width="640"
height="480"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
>
<g class="layer">
<title>Layer 1</title>
<text
fill="#bf0000"
font-family="Serif"
font-size="34"
font-style="italic"
font-weight="bold"
id="svg_1"
stroke="#0000bf"
text-anchor="start"
x="46"
xml:space="preserve"
y="35"
>
AB
</text>
<text
fill="#000000"
font-family="Serif"
font-size="24"
id="svg_2"
stroke="#000000"
stroke-width="0"
text-anchor="middle"
transform="matrix(1 0 0 1 0 0)"
x="91"
xml:space="preserve"
y="80"
>
AB
</text>
</g>
</svg>
</body>
`;
exports[`use various parts of svg-edit > check tool_text_anchor_middle #0`] = `
<body>
<svg
width="640"
height="480"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
>
<g class="layer">
<title>Layer 1</title>
<text
fill="#bf0000"
font-family="Serif"
font-size="34"
font-style="italic"
font-weight="bold"
id="svg_1"
stroke="#0000bf"
text-anchor="middle"
x="46"
xml:space="preserve"
y="35"
>
AB
</text>
<text
fill="#000000"
font-family="Serif"
font-size="24"
id="svg_2"
stroke="#000000"
stroke-width="0"
text-anchor="middle"
transform="matrix(1 0 0 1 0 0)"
x="91"
xml:space="preserve"
y="80"
>
AB
</text>
</g>
</svg>
</body>
`;
exports[`use various parts of svg-edit > check tool_text_anchor_end #0`] = `
<body>
<svg
width="640"
height="480"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
>
<g class="layer">
<title>Layer 1</title>
<text
fill="#bf0000"
font-family="Serif"
font-size="34"
font-style="italic"
font-weight="bold"
id="svg_1"
stroke="#0000bf"
text-anchor="end"
x="46"
xml:space="preserve"
y="35"
>
AB
</text>
<text
fill="#000000"
font-family="Serif"
font-size="24"
id="svg_2"
stroke="#000000"
stroke-width="0"
text-anchor="middle"
transform="matrix(1 0 0 1 0 0)"
x="91"
xml:space="preserve"
y="80"
>
AB
</text>
</g>
</svg>
</body>
`;
exports[`use various parts of svg-edit > check tool_text_change_rotation #0`] = `
<body>
<svg
@ -526,7 +391,7 @@ exports[`use various parts of svg-edit > check tool_text_change_rotation #0`] =
font-weight="bold"
id="svg_1"
stroke="#0000bf"
text-anchor="end"
text-anchor="middle"
transform="matrix(1 0 0 1 0 0)"
x="46"
xml:space="preserve"
@ -572,7 +437,7 @@ exports[`use various parts of svg-edit > check tool_text_change_blur #0`] = `
font-weight="bold"
id="svg_1"
stroke="#0000bf"
text-anchor="end"
text-anchor="middle"
transform="matrix(1 0 0 1 0 0)"
x="46"
xml:space="preserve"
@ -624,7 +489,7 @@ exports[`use various parts of svg-edit > check tool_text_change_opacity #0`] = `
font-weight="bold"
id="svg_1"
stroke="#0000bf"
text-anchor="end"
text-anchor="middle"
transform="matrix(1 0 0 1 0 0)"
x="46"
xml:space="preserve"
@ -677,7 +542,7 @@ exports[`use various parts of svg-edit > check tool_text_align_to_page #0`] = `
font-weight="bold"
id="svg_1"
stroke="#0000bf"
text-anchor="end"
text-anchor="middle"
transform="matrix(1 0 0 1 0 0)"
x="46"
xml:space="preserve"
@ -730,7 +595,7 @@ exports[`use various parts of svg-edit > check tool_text_delete #0`] = `
font-weight="bold"
id="svg_1"
stroke="#0000bf"
text-anchor="end"
text-anchor="middle"
transform="matrix(1 0 0 1 0 0)"
x="46"
xml:space="preserve"
@ -761,7 +626,7 @@ exports[`use various parts of svg-edit > check tool_text_change_font_family #0`]
font-weight="bold"
id="svg_1"
stroke="#0000bf"
text-anchor="end"
text-anchor="middle"
x="46"
xml:space="preserve"
y="35"

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

@ -102,24 +102,6 @@ describe('use various parts of svg-edit', function () {
.find('#Ok').eq(0).click({ force: true })
testSnapshot()
})
it('check tool_text_anchor_start', function () {
cy.get('#svg_1').click({ force: true })
cy.get('#tool_text_anchor_start')
.click({ force: true })
testSnapshot()
})
it('check tool_text_anchor_middle', function () {
cy.get('#svg_1').click({ force: true })
cy.get('#tool_text_anchor_middle')
.click({ force: true })
testSnapshot()
})
it('check tool_text_anchor_end', function () {
cy.get('#svg_1').click({ force: true })
cy.get('#tool_text_anchor_end')
.click({ force: true })
testSnapshot()
})
it('check tool_text_change_rotation', function () {
cy.get('#svg_2').click({ force: true })
for (let n = 0; n < 5; n++) {

360
src/editor/panels/TopPanel.html
View File

@ -1,181 +1,183 @@
<div id="tools_top">
<div id="editor_panel">
<div class="tool_sep"></div>
<se-button id="tool_source" title="tools.tool_source" shortcut="U" src="source.svg"></se-button>
<se-button id="tool_wireframe" title="tools.wireframe_mode" shortcut="F" src="wireframe.svg"></se-button>
</div> <!-- editor_panel -->
<div id="history_panel">
<div class="tool_sep"></div>
<se-button id="tool_undo" title="tools.undo" shortcut="Z" src="undo.svg" disabled></se-button>
<se-button id="tool_redo" title="tools.redo" shortcut="Y" src="redo.svg" disabled></se-button>
</div> <!-- history_panel -->
<!-- Buttons when a single element is selected -->
<div class="selected_panel">
<div class="tool_sep"></div>
<se-button id="tool_clone" title="tools.clone" shortcut="D" src="clone.svg"></se-button>
<se-button id="tool_delete" title="tools.del" shortcut="Delete/Backspace" src="delete.svg"></se-button>
</div>
<div class="selected_panel">
<div class="tool_sep"></div>
<se-button id="tool_move_top" title="tools.move_top" shortcut="Ctrl+Shift+]" src="move_top.svg"></se-button>
<se-button id="tool_move_bottom" title="tools.move_bottom" shortcut="Ctrl+Shift+[" src="move_bottom.svg">
</se-button>
</div>
<div class="selected_panel">
<se-button id="tool_topath" title="tools.to_path" src="to_path.svg"></se-button>
<se-button id="tool_reorient" title="tools.reorient_path" src="reorient.svg"></se-button>
<se-button id="tool_make_link" title="tools.make_link" src="globe_link.svg"></se-button>
</div>
<div class="selected_panel">
<div class="tool_sep"></div>
<se-input id="elem_id" data-attr="id" size="10" label="properties.id_label" title="properties.id"></se-input>
</div>
<div class="selected_panel">
<se-input id="elem_class" data-attr="class" size="10" label="properties.class_label" title="properties.class">
</se-input>
<se-spin-input size="3" id="angle" min=-180 max=180 step=5 src="angle.svg" title="properties.angle">
</se-spin-input>
<se-spin-input size="2" id="blur" min=0 max=100 step=5 src="blur.svg" title="properties.blur"></se-spin-input>
<se-list id="tool_position" title="tools.align_to_page" label="" width="22px" height="22px">
<se-list-item id="tool_posleft" value="l" title="tools.align_left" src="align_left.svg" img-height="22px">
</se-list-item>
<se-list-item id="tool_poscenter" value="c" title="tools.align_center" src="align_center.svg"
img-height="22px"></se-list-item>
<se-list-item id="tool_posright" value="r" title="tools.align_right" src="align_right.svg"
img-height="22px"></se-list-item>
<se-list-item id="tool_postop" value="t" title="tools.align_top" src="align_top.svg" img-height="22px">
</se-list-item>
<se-list-item id="tool_posmiddle" value="m" title="tools.align_middle" src="align_middle.svg"
img-height="22px"></se-list-item>
<se-list-item id="tool_posbottom" value="b" src="align_bottom.svg" title="tools.align_bottom"
img-height="22px"></se-list-item>
</se-list>
</div>
<div class="xy_panel">
<se-spin-input id="selected_x" data-attr="x" size="4" type="text" label="properties.x_label"
title="properties.pos_x">
</se-spin-input>
<se-spin-input id="selected_y" data-attr="y" size="4" type="text" label="properties.y_label"
title="properties.pos_y">
</se-spin-input>
</div>
<!-- Buttons when multiple elements are selected -->
<div class="multiselected_panel">
<div class="tool_sep"></div>
<se-button id="tool_clone_multi" title="tools.clone" shortcut="C" src="clone.svg"></se-button>
<se-button id="tool_delete_multi" title="tools.del" shortcut="Delete/Backspace" src="delete.svg"></se-button>
</div>
<div class="multiselected_panel">
<div class="tool_sep"></div>
<se-button id="tool_group_elements" title="tools.group_elements" shortcut="G" src="group_elements.svg">
</se-button>
<se-button id="tool_make_link_multi" title="tools.make_link" src="globe_link.svg"></se-button>
<se-button id="tool_align_left" title="tools.align_left" src="align_left.svg"></se-button>
<se-button id="tool_align_center" title="tools.align_center" src="align_center.svg"></se-button>
<se-button id="tool_align_right" title="tools.align_right" src="align_right.svg"></se-button>
<se-button id="tool_align_top" title="tools.align_top" src="align_top.svg"></se-button>
<se-button id="tool_align_middle" title="tools.align_middle" src="align_middle.svg"></se-button>
<se-button id="tool_align_bottom" title="tools.align_bottom" src="align_bottom.svg"></se-button>
<se-select id="tool_align_relative" label="tools.relativeTo"
options="tools.selected_objects,tools.largest_object,tools.smallest_object,tools.page"
values="selected::largest::smallest::page">
</se-list-item>
</se-select>
</div> <!-- multiselected_panel -->
<div class="rect_panel">
<se-spin-input id="rect_width" data-attr="width" size="4" label="properties.w_label"
title="properties.rect_width"></se-spin-input>
<se-spin-input id="rect_height" data-attr="height" size="4" label="properties.h_label"
title="properties.rect_height"></se-spin-input>
<se-spin-input id="rect_rx" min=0 max=1000 step=1 size="3" title="properties.corner_radius"
data-attr="Corner Radius" src="c_radius.svg"></se-spin-input>
</div> <!-- rect_panel -->
<div class="image_panel">
<se-spin-input id="image_width" data-attr="width" size="4" type="text" label="properties.w_label"
title="properties.image_width"></se-spin-input>
<se-spin-input id="image_height" data-attr="height" size="4" type="text" label="properties.h_label"
title="properties.image_height"></se-spin-input>
</div>
<div class="image_panel">
<se-input id="image_url" data-attr="image_url" size="15" label="properties.image_url"></se-input>
</div>
<div class="circle_panel">
<se-spin-input id="circle_cx" data-attr="cx" size="4" label="properties.cx_label"></se-spin-input>
<se-spin-input id="circle_cy" data-attr="cy" size="4" label="properties.cy_label"></se-spin-input>
</div>
<div class="circle_panel">
<se-spin-input id="circle_r" data-attr="r" size="4" label="properties.r_label"></se-spin-input>
</div>
<div class="ellipse_panel">
<se-spin-input id="ellipse_cx" data-attr="cx" size="4" title="properties.ellipse_cx"
label="properties.cx_label"></se-spin-input>
<se-spin-input id="ellipse_cy" data-attr="cy" size="4" title="properties.ellipse_cy"
label="properties.cy_label"></se-spin-input>
</div>
<div class="ellipse_panel">
<se-spin-input id="ellipse_rx" data-attr="rx" size="4" title="properties.ellipse_rx"
label="properties.rx_label"></se-spin-input>
<se-spin-input id="ellipse_ry" data-attr="ry" size="4" title="properties.ellipse_ry"
label="properties.ry_label"></se-spin-input>
</div>
<div class="line_panel">
<se-spin-input id="line_x1" data-attr="x1" size="4" title="properties.line_x1" label="properties.x1_label">
</se-spin-input>
<se-spin-input id="line_y1" data-attr="y1" size="4" title="properties.line_y1" label="properties.y1_label">
</se-spin-input>
<se-spin-input id="line_x2" data-attr="x2" size="4" title="properties.line_x2" label="properties.x2_label">
</se-spin-input>
<se-spin-input id="line_y2" data-attr="y2" size="4" title="properties.line_y2" label="properties.y2_label">
</se-spin-input>
</div>
<div class="text_panel">
<se-button id="tool_bold" title="properties.bold" src="bold.svg" shortcut="B"></se-button>
<se-button id="tool_italic" title="properties.italic" src="italic.svg" shortcut="I"></se-button>
<se-select id="tool_font_family" label="properties.font_family_label"
options="properties.serif,properties.sans_serif,properties.cursive,properties.fantasy,properties.monospace,properties.courier,properties.helvetica,properties.times"
values="Serif::Sans-serif::Cursive::Fantasy::Monospace::Courier::Helvetica::Times"></se-select>
<se-spin-input size="2" id="font_size" min=1 max=1000 step=1 title="properties.font_size"
src="fontsize.svg"></se-spin-input>
</div>
<div class="text_panel">
<se-button id="tool_text_anchor_start" title="properties.text_anchor_start" src="anchor_start.svg"></se-button>
<se-button id="tool_text_anchor_middle" title="properties.text_anchor_middle" src="anchor_middle.svg">
</se-button>
<se-button id="tool_text_anchor_end" title="properties.text_anchor_end" src="anchor_end.svg"></se-button>
</div>
<!-- Not visible, but still used -->
<input id="text" type="text" size="35" />
<div class="container_panel">
<div class="tool_sep"></div>
<se-input id="g_title" data-attr="title" size="8" label="properties.label"></se-input>
</div> <!-- container_panel -->
<div class="use_panel">
<se-button id="tool_unlink_use" title="tools.tool_unlink_use" src="unlink_use.svg"></se-button>
</div> <!-- use_panel -->
<div class="g_panel">
<se-button id="tool_ungroup" title="tools.ungroup" src="ungroup.svg"></se-button>
</div> <!-- g_panel -->
<!-- For anchor elements -->
<div class="a_panel">
<label id="tool_link_url">
<span id="linkLabel" class="icon_label"></span>
<input id="link_url" type="text" size="35" />
</label>
</div> <!-- a_panel -->
<div class="path_node_panel">
<div class="tool_sep"></div>
<se-button id="tool_node_link" title="tools.node_link" src="tool_node_link.svg" pressed></se-button>
<div class="tool_sep"></div>
<se-spin-input id="path_node_x" data-attr="x" size="4" title="properties.node_x" label="properties.x_label">
</se-spin-input>
<se-spin-input id="path_node_y" data-attr="y" size="4" title="properties.node_y" label="properties.y_label">
</se-spin-input>
<se-select id="seg_type" title="properties.seg_type" label=""
options="properties.straight_segments,properties.curve_segments" values="4::6"></se-select>
<se-button id="tool_node_clone" title="tools.node_clone" src="tool_node_clone.svg"></se-button>
<se-button id="tool_node_delete" title="tools.node_delete" src="tool_node_delete.svg"></se-button>
<se-button id="tool_openclose_path" title="tools.openclose_path" src="tool_openclose_path.svg"></se-button>
<se-button id="tool_add_subpath" title="tools.add_subpath" src="tool_add_subpath.svg"></se-button>
</div> <!-- path_node_panel -->
<div id="cur_context_panel"></div>
<div id="editor_panel">
<div class="tool_sep"></div>
<se-button id="tool_source" title="tools.tool_source" shortcut="U" src="source.svg"></se-button>
<se-button id="tool_wireframe" title="tools.wireframe_mode" shortcut="F" src="wireframe.svg"></se-button>
</div> <!-- editor_panel -->
<div id="history_panel">
<div class="tool_sep"></div>
<se-button id="tool_undo" title="tools.undo" shortcut="Z" src="undo.svg" disabled></se-button>
<se-button id="tool_redo" title="tools.redo" shortcut="Y" src="redo.svg" disabled></se-button>
</div> <!-- history_panel -->
<!-- Buttons when a single element is selected -->
<div class="selected_panel">
<div class="tool_sep"></div>
<se-button id="tool_clone" title="tools.clone" shortcut="D" src="clone.svg"></se-button>
<se-button id="tool_delete" title="tools.del" shortcut="Delete/Backspace" src="delete.svg"></se-button>
</div>
<div class="selected_panel">
<div class="tool_sep"></div>
<se-button id="tool_move_top" title="tools.move_top" shortcut="Ctrl+Shift+]" src="move_top.svg"></se-button>
<se-button id="tool_move_bottom" title="tools.move_bottom" shortcut="Ctrl+Shift+[" src="move_bottom.svg">
</se-button>
</div>
<div class="selected_panel">
<se-button id="tool_topath" title="tools.to_path" src="to_path.svg"></se-button>
<se-button id="tool_reorient" title="tools.reorient_path" src="reorient.svg"></se-button>
<se-button id="tool_make_link" title="tools.make_link" src="globe_link.svg"></se-button>
</div>
<div class="selected_panel">
<div class="tool_sep"></div>
<se-input id="elem_id" data-attr="id" size="10" label="properties.id_label" title="properties.id"></se-input>
</div>
<div class="selected_panel">
<se-input id="elem_class" data-attr="class" size="10" label="properties.class_label" title="properties.class">
</se-input>
<se-spin-input size="3" id="angle" min=-180 max=180 step=5 src="angle.svg" title="properties.angle">
</se-spin-input>
<se-spin-input size="2" id="blur" min=0 max=100 step=5 src="blur.svg" title="properties.blur"></se-spin-input>
<se-list id="tool_position" title="tools.align_to_page" label="" width="22px" height="22px">
<se-list-item id="tool_posleft" value="l" title="tools.align_left" src="align_left.svg" img-height="22px">
</se-list-item>
<se-list-item id="tool_poscenter" value="c" title="tools.align_center" src="align_center.svg"
img-height="22px"></se-list-item>
<se-list-item id="tool_posright" value="r" title="tools.align_right" src="align_right.svg"
img-height="22px"></se-list-item>
<se-list-item id="tool_postop" value="t" title="tools.align_top" src="align_top.svg" img-height="22px">
</se-list-item>
<se-list-item id="tool_posmiddle" value="m" title="tools.align_middle" src="align_middle.svg"
img-height="22px"></se-list-item>
<se-list-item id="tool_posbottom" value="b" src="align_bottom.svg" title="tools.align_bottom"
img-height="22px"></se-list-item>
</se-list>
</div>
<div class="xy_panel">
<se-spin-input id="selected_x" data-attr="x" size="4" type="text" label="properties.x_label"
title="properties.pos_x">
</se-spin-input>
<se-spin-input id="selected_y" data-attr="y" size="4" type="text" label="properties.y_label"
title="properties.pos_y">
</se-spin-input>
</div>
<!-- Buttons when multiple elements are selected -->
<div class="multiselected_panel">
<div class="tool_sep"></div>
<se-button id="tool_clone_multi" title="tools.clone" shortcut="C" src="clone.svg"></se-button>
<se-button id="tool_delete_multi" title="tools.del" shortcut="Delete/Backspace" src="delete.svg"></se-button>
</div>
<div class="multiselected_panel">
<div class="tool_sep"></div>
<se-button id="tool_group_elements" title="tools.group_elements" shortcut="G" src="group_elements.svg">
</se-button>
<se-button id="tool_make_link_multi" title="tools.make_link" src="globe_link.svg"></se-button>
<se-button id="tool_align_left" title="tools.align_left" src="align_left.svg"></se-button>
<se-button id="tool_align_center" title="tools.align_center" src="align_center.svg"></se-button>
<se-button id="tool_align_right" title="tools.align_right" src="align_right.svg"></se-button>
<se-button id="tool_align_top" title="tools.align_top" src="align_top.svg"></se-button>
<se-button id="tool_align_middle" title="tools.align_middle" src="align_middle.svg"></se-button>
<se-button id="tool_align_bottom" title="tools.align_bottom" src="align_bottom.svg"></se-button>
<se-select id="tool_align_relative" label="tools.relativeTo"
options="tools.selected_objects,tools.largest_object,tools.smallest_object,tools.page"
values="selected::largest::smallest::page">
</se-list-item>
</se-select>
</div> <!-- multiselected_panel -->
<div class="rect_panel">
<se-spin-input id="rect_width" data-attr="width" size="4" label="properties.w_label"
title="properties.rect_width"></se-spin-input>
<se-spin-input id="rect_height" data-attr="height" size="4" label="properties.h_label"
title="properties.rect_height"></se-spin-input>
<se-spin-input id="rect_rx" min=0 max=1000 step=1 size="3" title="properties.corner_radius"
data-attr="Corner Radius" src="c_radius.svg"></se-spin-input>
</div> <!-- rect_panel -->
<div class="image_panel">
<se-spin-input id="image_width" data-attr="width" size="4" type="text" label="properties.w_label"
title="properties.image_width"></se-spin-input>
<se-spin-input id="image_height" data-attr="height" size="4" type="text" label="properties.h_label"
title="properties.image_height"></se-spin-input>
</div>
<div class="image_panel">
<se-input id="image_url" data-attr="image_url" size="15" label="properties.image_url"></se-input>
</div>
<div class="circle_panel">
<se-spin-input id="circle_cx" data-attr="cx" size="4" label="properties.cx_label"></se-spin-input>
<se-spin-input id="circle_cy" data-attr="cy" size="4" label="properties.cy_label"></se-spin-input>
</div>
<div class="circle_panel">
<se-spin-input id="circle_r" data-attr="r" size="4" label="properties.r_label"></se-spin-input>
</div>
<div class="ellipse_panel">
<se-spin-input id="ellipse_cx" data-attr="cx" size="4" title="properties.ellipse_cx"
label="properties.cx_label"></se-spin-input>
<se-spin-input id="ellipse_cy" data-attr="cy" size="4" title="properties.ellipse_cy"
label="properties.cy_label"></se-spin-input>
</div>
<div class="ellipse_panel">
<se-spin-input id="ellipse_rx" data-attr="rx" size="4" title="properties.ellipse_rx"
label="properties.rx_label"></se-spin-input>
<se-spin-input id="ellipse_ry" data-attr="ry" size="4" title="properties.ellipse_ry"
label="properties.ry_label"></se-spin-input>
</div>
<div class="line_panel">
<se-spin-input id="line_x1" data-attr="x1" size="4" title="properties.line_x1" label="properties.x1_label">
</se-spin-input>
<se-spin-input id="line_y1" data-attr="y1" size="4" title="properties.line_y1" label="properties.y1_label">
</se-spin-input>
<se-spin-input id="line_x2" data-attr="x2" size="4" title="properties.line_x2" label="properties.x2_label">
</se-spin-input>
<se-spin-input id="line_y2" data-attr="y2" size="4" title="properties.line_y2" label="properties.y2_label">
</se-spin-input>
</div>
<div class="text_panel">
<se-button id="tool_bold" title="properties.bold" src="bold.svg" shortcut="B"></se-button>
<se-button id="tool_italic" title="properties.italic" src="italic.svg" shortcut="I"></se-button>
<!-- Font Size-->
<se-select id="tool_font_family" label="properties.font_family_label"
options="properties.serif,properties.sans_serif,properties.cursive,properties.fantasy,properties.monospace,properties.courier,properties.helvetica,properties.times"
values="Serif::Sans-serif::Cursive::Fantasy::Monospace::Courier::Helvetica::Times"></se-select>
<se-spin-input size="2" id="font_size" min=1 max=1000 step=1 title="properties.font_size"
src="fontsize.svg"></se-spin-input>
<!-- Text Anchor -->
<se-list id="tool_text_anchor" label="" width="22px" height="22px">
<se-list-item id="tool_text_anchor_start" value="start" title="properties.text_anchor_start" src="anchor_start.svg" img-height="25px"></se-list-item>
<se-list-item id="tool_text_anchor_middle" value="middle" title="properties.text_anchor_middle" src="anchor_middle.svg" img-height="25px"></se-list-item>
<se-list-item id="tool_text_anchor_end" value="end" title="properties.text_anchor_end" src="anchor_end.svg" img-height="25px"></se-list-item>
</se-list>
</div>
<!-- Not visible, but still used -->
<input id="text" type="text" size="35"/>
<div class="container_panel">
<div class="tool_sep"></div>
<se-input id="g_title" data-attr="title" size="8" label="properties.label"></se-input>
</div> <!-- container_panel -->
<div class="use_panel">
<se-button id="tool_unlink_use" title="tools.tool_unlink_use" src="unlink_use.svg"></se-button>
</div> <!-- use_panel -->
<div class="g_panel">
<se-button id="tool_ungroup" title="tools.ungroup" src="ungroup.svg"></se-button>
</div> <!-- g_panel -->
<!-- For anchor elements -->
<div class="a_panel">
<label id="tool_link_url">
<span id="linkLabel" class="icon_label"></span>
<input id="link_url" type="text" size="35"/>
</label>
</div> <!-- a_panel -->
<div class="path_node_panel">
<div class="tool_sep"></div>
<se-button id="tool_node_link" title="tools.node_link" src="tool_node_link.svg" pressed></se-button>
<div class="tool_sep"></div>
<se-spin-input id="path_node_x" data-attr="x" size="4" title="properties.node_x" label="properties.x_label">
</se-spin-input>
<se-spin-input id="path_node_y" data-attr="y" size="4" title="properties.node_y" label="properties.y_label">
</se-spin-input>
<se-select id="seg_type" title="properties.seg_type" label=""
options="properties.straight_segments,properties.curve_segments" values="4::6"></se-select>
<se-button id="tool_node_clone" title="tools.node_clone" src="tool_node_clone.svg"></se-button>
<se-button id="tool_node_delete" title="tools.node_delete" src="tool_node_delete.svg"></se-button>
<se-button id="tool_openclose_path" title="tools.openclose_path" src="tool_openclose_path.svg"></se-button>
<se-button id="tool_add_subpath" title="tools.add_subpath" src="tool_add_subpath.svg"></se-button>
</div> <!-- path_node_panel -->
<div id="cur_context_panel"></div>
</div>

32
src/editor/panels/TopPanel.js
View File

@ -353,28 +353,9 @@ class TopPanel {
$id('tool_italic').pressed = this.editor.svgCanvas.getItalic()
$id('tool_bold').pressed = this.editor.svgCanvas.getBold()
$id('tool_font_family').setAttribute('value', elem.getAttribute('font-family'))
$id('tool_text_anchor').setAttribute('value', elem.getAttribute('text-anchor'))
$id('font_size').value = elem.getAttribute('font-size')
$id('text').value = elem.textContent
const textAnchorStart = $id('tool_text_anchor_start')
const textAnchorMiddle = $id('tool_text_anchor_middle')
const textAnchorEnd = $id('tool_text_anchor_end')
switch (elem.getAttribute('text-anchor')) {
case 'start':
textAnchorStart.pressed = true
textAnchorMiddle.pressed = false
textAnchorEnd.pressed = false
break
case 'middle':
textAnchorStart.pressed = false
textAnchorMiddle.pressed = true
textAnchorEnd.pressed = false
break
case 'end':
textAnchorStart.pressed = false
textAnchorMiddle.pressed = false
textAnchorEnd.pressed = true
break
}
if (this.editor.svgCanvas.addedNew) {
// Timeout needed for IE9
setTimeout(() => {
@ -764,13 +745,12 @@ class TopPanel {
}
/**
* Sets the text anchor value
*
* @param {string} value "start","end" or "middle"
* @returns {false}
*/
clickTextAnchor (value) {
this.editor.svgCanvas.setTextAnchor(value)
this.updateContextPanel()
clickTextAnchor (evt) {
this.editor.svgCanvas.setTextAnchor(evt.detail.value)
return false
}
@ -889,9 +869,7 @@ class TopPanel {
$id('tool_ungroup').addEventListener('click', this.clickGroup.bind(this))
$id('tool_bold').addEventListener('click', this.clickBold.bind(this))
$id('tool_italic').addEventListener('click', this.clickItalic.bind(this))
$id('tool_text_anchor_start').addEventListener('click', () => this.clickTextAnchor.bind(this)('start'))
$id('tool_text_anchor_middle').addEventListener('click', () => this.clickTextAnchor.bind(this)('middle'))
$id('tool_text_anchor_end').addEventListener('click', () => this.clickTextAnchor.bind(this)('end'))
$id('tool_text_anchor').addEventListener('change', (evt) => this.clickTextAnchor.bind(this)(evt))
$id('tool_unlink_use').addEventListener('click', this.clickGroup.bind(this))
$id('image_url').addEventListener('change', (evt) => { this.setImageURL(evt.currentTarget.value) });

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

@ -638,7 +638,7 @@ export const setTextAnchorMethod = function (value) {
isNullish(selectedElements[1])) {
svgCanvas.changeSelectedAttribute('text-anchor', value)
}
if (!selectedElements[0].textContent) {
if (selectedElements.length > 0 && !selectedElements[0].textContent) {
svgCanvas.textActions.setCursor()
}
}