#issue-fix BOTTOM TOOLS Make sure all features of the bottom toolbar are working
Agriya Dev5
parent
9e367682c7
commit
f351c37910
|
|
@ -220,8 +220,8 @@ class EditorStartup {
|
|||
}
|
||||
});
|
||||
|
||||
$('#font_family').change((evt) => {
|
||||
this.svgCanvas.setFontFamily(evt.currentTarget.value);
|
||||
$('#tool_font_family').change((evt) => {
|
||||
this.svgCanvas.setFontFamily(evt.originalEvent.detail.value);
|
||||
});
|
||||
|
||||
$('#seg_type').change((evt) => {
|
||||
|
|
|
|||
|
|
@ -83,11 +83,13 @@ export class SeList extends HTMLElement {
|
|||
* @returns {void}
|
||||
*/
|
||||
connectedCallback () {
|
||||
this.$dropdown.addEventListener('change', (e) => {
|
||||
const currentObj = this;
|
||||
this.$dropdown.addEventListener('selectedindexchange', (e) => {
|
||||
e.preventDefault();
|
||||
const selectedItem = e?.detail?.closeResult;
|
||||
if (selectedItem !== undefined && selectedItem?.id !== undefined) {
|
||||
document.getElementById(selectedItem.id).click();
|
||||
if (e?.detail?.selectedIndex !== undefined) {
|
||||
const value = this.$dropdown.selectedItem.getAttribute('value');
|
||||
const closeEvent = new CustomEvent('change', {detail: {value}});
|
||||
currentObj.dispatchEvent(closeEvent);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -127,18 +127,26 @@
|
|||
title="Change rotation angle"></se-spin-input>
|
||||
<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>
|
||||
<se-list>
|
||||
<se-list-item id="tool_posleft">Align Left</se-list-item>
|
||||
<se-list-item id="tool_poscenter">Align Center</se-list-item>
|
||||
<se-list-item id="tool_posright">Align Right</se-list-item>
|
||||
<se-list-item id="tool_postop">Align Top</se-list-item>
|
||||
<se-list-item id="tool_posmiddle">Align Middle</se-list-item>
|
||||
<se-list-item id="tool_posbottom">Align Bottom</se-list-item>
|
||||
<se-list id="tool_position" title="Align Element to Page" label="">
|
||||
<se-list-item id="tool_posleft" value="l">
|
||||
<img title="align left" src="./images/align_left.svg" height="22px">
|
||||
</se-list-item>
|
||||
<se-list-item id="tool_poscenter" value="c">
|
||||
<img title="align center" src="./images/align_center.svg" height="22px">
|
||||
</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>
|
||||
<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">
|
||||
<se-spin-input id="selected_x" data-attr:="x" size="4" type="text" label="x:" title="Change X coordinate">
|
||||
</se-spin-input>
|
||||
|
|
@ -348,14 +356,14 @@
|
|||
<se-list-item value="5,2,2,2,2,2">- ..</se-list-item>
|
||||
</se-list>
|
||||
<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_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_miter" value="miter"><img title="Linejoin: Miter" src="./images/linejoin_miter.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" value="bevel"><img title="Linejoin: Bevel" src="./images/linejoin_bevel.svg" height="22px"></img></se-list-item>
|
||||
</se-list>
|
||||
<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_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_butt" value="butt"><img title="Linecap: Butt" src="./images/linecap_butt.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" value="round"><img title="Linecap: Round" src="./images/linecap_round.svg" height="22px"></img></se-list-item>
|
||||
</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-palette id="palette"></se-palette>
|
||||
|
|
|
|||
|
|
@ -142,7 +142,7 @@ class BottomPanelHandlers {
|
|||
* @type {module}
|
||||
*/
|
||||
handleStrokeAttr (type, evt) {
|
||||
this.svgCanvas.setStrokeAttr(type, evt.currentTarget.value);
|
||||
this.svgCanvas.setStrokeAttr(type, evt.detail.value);
|
||||
}
|
||||
/**
|
||||
* @type {module}
|
||||
|
|
|
|||
|
|
@ -210,7 +210,7 @@ class TopPanelHandlers {
|
|||
$('#tool_font_size').css('display', 'inline');
|
||||
$id('tool_italic').pressed = this.svgCanvas.getItalic();
|
||||
$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'));
|
||||
$('#text').val(elem.textContent);
|
||||
const textAnchorStart = $id('tool_text_anchor_start');
|
||||
|
|
@ -385,6 +385,14 @@ class TopPanelHandlers {
|
|||
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..
|
||||
* @returns {void}
|
||||
|
|
@ -598,6 +606,7 @@ class TopPanelHandlers {
|
|||
$id('tool_make_link_multi').addEventListener('click', this.makeHyperlink.bind(this));
|
||||
$id('tool_reorient').addEventListener('click', this.reorientPath.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_right').addEventListener('click', () => this.clickAlign.bind(this)('right'));
|
||||
$id('tool_align_center').addEventListener('click', () => this.clickAlign.bind(this)('center'));
|
||||
|
|
|
|||
Loading…
Reference in New Issue