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

#issue-fix BOTTOM TOOLS Make sure all features of the bottom toolbar are working

master
Agriya Dev5 2021-01-05 20:06:59 +05:30
parent 9e367682c7
commit f351c37910
5 changed files with 44 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/editor/EditorStartup.js
View File

@ -220,8 +220,8 @@ class EditorStartup {
} }
}); });
$('#font_family').change((evt) => { $('#tool_font_family').change((evt) => {
this.svgCanvas.setFontFamily(evt.currentTarget.value); this.svgCanvas.setFontFamily(evt.originalEvent.detail.value);
}); });
$('#seg_type').change((evt) => { $('#seg_type').change((evt) => {

10
src/editor/components/seList.js
View File

@ -83,11 +83,13 @@ export class SeList extends HTMLElement {
* @returns {void} * @returns {void}
*/ */
connectedCallback () { connectedCallback () {
this.$dropdown.addEventListener('change', (e) => { const currentObj = this;
this.$dropdown.addEventListener('selectedindexchange', (e) => {
e.preventDefault(); e.preventDefault();
const selectedItem = e?.detail?.closeResult; if (e?.detail?.selectedIndex !== undefined) {
if (selectedItem !== undefined && selectedItem?.id !== undefined) { const value = this.$dropdown.selectedItem.getAttribute('value');
document.getElementById(selectedItem.id).click(); const closeEvent = new CustomEvent('change', {detail: {value}});
currentObj.dispatchEvent(closeEvent);
} }
}); });
} }

42
src/editor/index.html
View File

@ -127,18 +127,26 @@
title="Change rotation angle"></se-spin-input> title="Change rotation angle"></se-spin-input>
<se-spin-input size="2" id="blur" min=0 max=100 step=5 src="./images/blur.svg" <se-spin-input size="2" id="blur" min=0 max=100 step=5 src="./images/blur.svg"
title="Change gaussian blur value"></se-spin-input> title="Change gaussian blur value"></se-spin-input>
<se-list> <se-list id="tool_position" title="Align Element to Page" label="">
<se-list-item id="tool_posleft">Align Left</se-list-item> <se-list-item id="tool_posleft" value="l">
<se-list-item id="tool_poscenter">Align Center</se-list-item> <img title="align left" src="./images/align_left.svg" height="22px">
<se-list-item id="tool_posright">Align Right</se-list-item> </se-list-item>
<se-list-item id="tool_postop">Align Top</se-list-item> <se-list-item id="tool_poscenter" value="c">
<se-list-item id="tool_posmiddle">Align Middle</se-list-item> <img title="align center" src="./images/align_center.svg" height="22px">
<se-list-item id="tool_posbottom">Align Bottom</se-list-item> </se-list-item>
<se-list-item id="tool_posright" value="r">
<img title="align right" src="./images/align_right.svg" height="22px">
</se-list-item>
<se-list-item id="tool_postop" value="t">
<img title="align top" src="./images/align_top.svg" height="22px">
</se-list-item>
<se-list-item id="tool_posmiddle" value="m">
<img title="align middle" src="./images/align_middle.svg" height="22px">
</se-list-item>
<se-list-item id="tool_posbottom" value="b">
<img title="align bottom" src="./images/align_bottom.svg" height="22px">
</se-list-item>
</se-list> </se-list>
<div class="dropdown toolset" id="tool_position" title="Align Element to Page">
<div id="cur_position" class="icon_label"></div>
<button></button>
</div>
<div id="xy_panel" class="toolset"> <div id="xy_panel" class="toolset">
<se-spin-input id="selected_x" data-attr:="x" size="4" type="text" label="x:" title="Change X coordinate"> <se-spin-input id="selected_x" data-attr:="x" size="4" type="text" label="x:" title="Change X coordinate">
</se-spin-input> </se-spin-input>
@ -348,14 +356,14 @@
<se-list-item value="5,2,2,2,2,2">- ..</se-list-item> <se-list-item value="5,2,2,2,2,2">- ..</se-list-item>
</se-list> </se-list>
<se-list id="stroke_linejoin" title="Linejoin: Miter" label=""> <se-list id="stroke_linejoin" title="Linejoin: Miter" label="">
<se-list-item id="linejoin_miter"><img title="Linejoin: Miter" src="./images/linejoin_miter.svg" height="22px"></img></se-list-item> <se-list-item id="linejoin_miter" value="miter"><img title="Linejoin: Miter" src="./images/linejoin_miter.svg" height="22px"></img></se-list-item>
<se-list-item id="linejoin_round"><img title="Linejoin: Round" src="./images/linejoin_round.svg" height="22px"></img></se-list-item> <se-list-item id="linejoin_round" value="round"><img title="Linejoin: Round" src="./images/linejoin_round.svg" height="22px"></img></se-list-item>
<se-list-item id="linejoin_bevel"><img title="Linejoin: Bevel" src="./images/linejoin_bevel.svg" height="22px"></img></se-list-item> <se-list-item id="linejoin_bevel" value="bevel"><img title="Linejoin: Bevel" src="./images/linejoin_bevel.svg" height="22px"></img></se-list-item>
</se-list> </se-list>
<se-list id="stroke_linecap" title="Linecap: Butt" label=""> <se-list id="stroke_linecap" title="Linecap: Butt" label="">
<se-list-item id="linecap_butt"><img title="Linecap: Butt" src="./images/linecap_butt.svg" height="22px"></img></se-list-item> <se-list-item id="linecap_butt" value="butt"><img title="Linecap: Butt" src="./images/linecap_butt.svg" height="22px"></img></se-list-item>
<se-list-item id="linecap_square"><img title="Linecap: Square" src="./images/linecap_square.svg" height="22px"></img></se-list-item> <se-list-item id="linecap_square" value="square"><img title="Linecap: Square" src="./images/linecap_square.svg" height="22px"></img></se-list-item>
<se-list-item id="linecap_round"><img title="Linecap: Round" src="./images/linecap_round.svg" height="22px"></img></se-list-item> <se-list-item id="linecap_round" value="round"><img title="Linecap: Round" src="./images/linecap_round.svg" height="22px"></img></se-list-item>
</se-list> </se-list>
<se-spin-input size="3" id="opacity" min=0 max=100 step=5 title="Change selected item opacity" src="./images/opacity.svg"></se-spin-input> <se-spin-input size="3" id="opacity" min=0 max=100 step=5 title="Change selected item opacity" src="./images/opacity.svg"></se-spin-input>
<se-palette id="palette"></se-palette> <se-palette id="palette"></se-palette>

2
src/editor/panels/BottomPanelHandlers.js
View File

@ -142,7 +142,7 @@ class BottomPanelHandlers {
* @type {module} * @type {module}
*/ */
handleStrokeAttr (type, evt) { handleStrokeAttr (type, evt) {
this.svgCanvas.setStrokeAttr(type, evt.currentTarget.value); this.svgCanvas.setStrokeAttr(type, evt.detail.value);
} }
/** /**
* @type {module} * @type {module}

11
src/editor/panels/TopPanelHandlers.js
View File

@ -210,7 +210,7 @@ class TopPanelHandlers {
$('#tool_font_size').css('display', 'inline'); $('#tool_font_size').css('display', 'inline');
$id('tool_italic').pressed = this.svgCanvas.getItalic(); $id('tool_italic').pressed = this.svgCanvas.getItalic();
$id('tool_bold').pressed = this.svgCanvas.getBold(); $id('tool_bold').pressed = this.svgCanvas.getBold();
$('#font_family').val(elem.getAttribute('font-family')); $('#tool_font_family').val(elem.getAttribute('font-family'));
$('#font_size').val(elem.getAttribute('font-size')); $('#font_size').val(elem.getAttribute('font-size'));
$('#text').val(elem.textContent); $('#text').val(elem.textContent);
const textAnchorStart = $id('tool_text_anchor_start'); const textAnchorStart = $id('tool_text_anchor_start');
@ -385,6 +385,14 @@ class TopPanelHandlers {
this.svgCanvas.cloneSelectedElements(20, 20); this.svgCanvas.cloneSelectedElements(20, 20);
} }
/**
* @param {PlainObject} evt
* @returns {void}
*/
clickAlignEle (evt) {
this.svgCanvas.alignSelectedElements(evt.detail.value, 'page');
}
/** /**
* @param {string} pos indicate the alignment relative to top, bottom, middle etc.. * @param {string} pos indicate the alignment relative to top, bottom, middle etc..
* @returns {void} * @returns {void}
@ -598,6 +606,7 @@ class TopPanelHandlers {
$id('tool_make_link_multi').addEventListener('click', this.makeHyperlink.bind(this)); $id('tool_make_link_multi').addEventListener('click', this.makeHyperlink.bind(this));
$id('tool_reorient').addEventListener('click', this.reorientPath.bind(this)); $id('tool_reorient').addEventListener('click', this.reorientPath.bind(this));
$id('tool_group_elements').addEventListener('click', this.clickGroup.bind(this)); $id('tool_group_elements').addEventListener('click', this.clickGroup.bind(this));
$id('tool_position').addEventListener('change', (evt) => this.clickAlignEle.bind(this)(evt));
$id('tool_align_left').addEventListener('click', () => this.clickAlign.bind(this)('left')); $id('tool_align_left').addEventListener('click', () => this.clickAlign.bind(this)('left'));
$id('tool_align_right').addEventListener('click', () => this.clickAlign.bind(this)('right')); $id('tool_align_right').addEventListener('click', () => this.clickAlign.bind(this)('right'));
$id('tool_align_center').addEventListener('click', () => this.clickAlign.bind(this)('center')); $id('tool_align_center').addEventListener('click', () => this.clickAlign.bind(this)('center'));