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

Changed Text Anchor to Dropdown

Browse Source
This commit is contained in:
Timo Dittmann
2022-01-04 08:03:22 +01:00
parent eb3567dc69
commit 959ac047d9
5 changed files with 194 additions and 367 deletions
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> </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`] = ` exports[`use various parts of svg-edit > check tool_text_change_rotation #0`] = `
<body> <body>
<svg <svg
@@ -526,7 +391,7 @@ exports[`use various parts of svg-edit > check tool_text_change_rotation #0`] =
font-weight="bold" font-weight="bold"
id="svg_1" id="svg_1"
stroke="#0000bf" stroke="#0000bf"
text-anchor="end" text-anchor="middle"
transform="matrix(1 0 0 1 0 0)" transform="matrix(1 0 0 1 0 0)"
x="46" x="46"
xml:space="preserve" xml:space="preserve"
@@ -572,7 +437,7 @@ exports[`use various parts of svg-edit > check tool_text_change_blur #0`] = `
font-weight="bold" font-weight="bold"
id="svg_1" id="svg_1"
stroke="#0000bf" stroke="#0000bf"
text-anchor="end" text-anchor="middle"
transform="matrix(1 0 0 1 0 0)" transform="matrix(1 0 0 1 0 0)"
x="46" x="46"
xml:space="preserve" xml:space="preserve"
@@ -624,7 +489,7 @@ exports[`use various parts of svg-edit > check tool_text_change_opacity #0`] = `
font-weight="bold" font-weight="bold"
id="svg_1" id="svg_1"
stroke="#0000bf" stroke="#0000bf"
text-anchor="end" text-anchor="middle"
transform="matrix(1 0 0 1 0 0)" transform="matrix(1 0 0 1 0 0)"
x="46" x="46"
xml:space="preserve" xml:space="preserve"
@@ -677,7 +542,7 @@ exports[`use various parts of svg-edit > check tool_text_align_to_page #0`] = `
font-weight="bold" font-weight="bold"
id="svg_1" id="svg_1"
stroke="#0000bf" stroke="#0000bf"
text-anchor="end" text-anchor="middle"
transform="matrix(1 0 0 1 0 0)" transform="matrix(1 0 0 1 0 0)"
x="46" x="46"
xml:space="preserve" xml:space="preserve"
@@ -730,7 +595,7 @@ exports[`use various parts of svg-edit > check tool_text_delete #0`] = `
font-weight="bold" font-weight="bold"
id="svg_1" id="svg_1"
stroke="#0000bf" stroke="#0000bf"
text-anchor="end" text-anchor="middle"
transform="matrix(1 0 0 1 0 0)" transform="matrix(1 0 0 1 0 0)"
x="46" x="46"
xml:space="preserve" xml:space="preserve"
@@ -761,7 +626,7 @@ exports[`use various parts of svg-edit > check tool_text_change_font_family #0`]
font-weight="bold" font-weight="bold"
id="svg_1" id="svg_1"
stroke="#0000bf" stroke="#0000bf"
text-anchor="end" text-anchor="middle"
x="46" x="46"
xml:space="preserve" xml:space="preserve"
y="35" 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 }) .find('#Ok').eq(0).click({ force: true })
testSnapshot() 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 () { it('check tool_text_change_rotation', function () {
cy.get('#svg_2').click({ force: true }) cy.get('#svg_2').click({ force: true })
for (let n = 0; n < 5; n++) { for (let n = 0; n < 5; n++) {

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

@@ -131,20 +131,22 @@
<div class="text_panel"> <div class="text_panel">
<se-button id="tool_bold" title="properties.bold" src="bold.svg" shortcut="B"></se-button> <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-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" <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" 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> 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" <se-spin-input size="2" id="font_size" min=1 max=1000 step=1 title="properties.font_size"
src="fontsize.svg"></se-spin-input> src="fontsize.svg"></se-spin-input>
</div>
<div class="text_panel"> <!-- Text Anchor -->
<se-button id="tool_text_anchor_start" title="properties.text_anchor_start" src="anchor_start.svg"></se-button> <se-list id="tool_text_anchor" label="" width="22px" height="22px">
<se-button id="tool_text_anchor_middle" title="properties.text_anchor_middle" src="anchor_middle.svg"> <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-button> <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-button id="tool_text_anchor_end" title="properties.text_anchor_end" src="anchor_end.svg"></se-button> <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> </div>
<!-- Not visible, but still used --> <!-- Not visible, but still used -->
<input id="text" type="text" size="35" /> <input id="text" type="text" size="35"/>
<div class="container_panel"> <div class="container_panel">
<div class="tool_sep"></div> <div class="tool_sep"></div>
<se-input id="g_title" data-attr="title" size="8" label="properties.label"></se-input> <se-input id="g_title" data-attr="title" size="8" label="properties.label"></se-input>
@@ -159,7 +161,7 @@
<div class="a_panel"> <div class="a_panel">
<label id="tool_link_url"> <label id="tool_link_url">
<span id="linkLabel" class="icon_label"></span> <span id="linkLabel" class="icon_label"></span>
<input id="link_url" type="text" size="35" /> <input id="link_url" type="text" size="35"/>
</label> </label>
</div> <!-- a_panel --> </div> <!-- a_panel -->
<div class="path_node_panel"> <div class="path_node_panel">

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

@@ -353,28 +353,9 @@ class TopPanel {
$id('tool_italic').pressed = this.editor.svgCanvas.getItalic() $id('tool_italic').pressed = this.editor.svgCanvas.getItalic()
$id('tool_bold').pressed = this.editor.svgCanvas.getBold() $id('tool_bold').pressed = this.editor.svgCanvas.getBold()
$id('tool_font_family').setAttribute('value', elem.getAttribute('font-family')) $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('font_size').value = elem.getAttribute('font-size')
$id('text').value = elem.textContent $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) { if (this.editor.svgCanvas.addedNew) {
// Timeout needed for IE9 // Timeout needed for IE9
setTimeout(() => { setTimeout(() => {
@@ -764,13 +745,12 @@ class TopPanel {
} }
/** /**
* Sets the text anchor value
* *
* @param {string} value "start","end" or "middle"
* @returns {false} * @returns {false}
*/ */
clickTextAnchor (value) { clickTextAnchor (evt) {
this.editor.svgCanvas.setTextAnchor(value) this.editor.svgCanvas.setTextAnchor(evt.detail.value)
this.updateContextPanel()
return false return false
} }
@@ -889,9 +869,7 @@ class TopPanel {
$id('tool_ungroup').addEventListener('click', this.clickGroup.bind(this)) $id('tool_ungroup').addEventListener('click', this.clickGroup.bind(this))
$id('tool_bold').addEventListener('click', this.clickBold.bind(this)) $id('tool_bold').addEventListener('click', this.clickBold.bind(this))
$id('tool_italic').addEventListener('click', this.clickItalic.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').addEventListener('change', (evt) => this.clickTextAnchor.bind(this)(evt))
$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_unlink_use').addEventListener('click', this.clickGroup.bind(this)) $id('tool_unlink_use').addEventListener('click', this.clickGroup.bind(this))
$id('image_url').addEventListener('change', (evt) => { this.setImageURL(evt.currentTarget.value) }); $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])) { isNullish(selectedElements[1])) {
svgCanvas.changeSelectedAttribute('text-anchor', value) svgCanvas.changeSelectedAttribute('text-anchor', value)
} }
if (!selectedElements[0].textContent) { if (selectedElements.length > 0 && !selectedElements[0].textContent) {
svgCanvas.textActions.setCursor() svgCanvas.textActions.setCursor()
} }
} }