From f351c379107e7d5d32b904c6cc5575046bbb078b Mon Sep 17 00:00:00 2001 From: Agriya Dev5 Date: Tue, 5 Jan 2021 20:06:59 +0530 Subject: [PATCH] #issue-fix BOTTOM TOOLS Make sure all features of the bottom toolbar are working --- src/editor/EditorStartup.js | 4 +-- src/editor/components/seList.js | 10 +++--- src/editor/index.html | 42 ++++++++++++++---------- src/editor/panels/BottomPanelHandlers.js | 2 +- src/editor/panels/TopPanelHandlers.js | 11 ++++++- 5 files changed, 44 insertions(+), 25 deletions(-) diff --git a/src/editor/EditorStartup.js b/src/editor/EditorStartup.js index 01db4886..de30d96f 100644 --- a/src/editor/EditorStartup.js +++ b/src/editor/EditorStartup.js @@ -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) => { diff --git a/src/editor/components/seList.js b/src/editor/components/seList.js index bd96d008..22cbaffb 100644 --- a/src/editor/components/seList.js +++ b/src/editor/components/seList.js @@ -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); } }); } diff --git a/src/editor/index.html b/src/editor/index.html index c873bf79..b2a75e2b 100644 --- a/src/editor/index.html +++ b/src/editor/index.html @@ -127,18 +127,26 @@ title="Change rotation angle"> - - Align Left - Align Center - Align Right - Align Top - Align Middle - Align Bottom + + + + + + + + + + + + + + + + + + + -
@@ -348,14 +356,14 @@ - .. - - - + + + - - - + + + diff --git a/src/editor/panels/BottomPanelHandlers.js b/src/editor/panels/BottomPanelHandlers.js index 43780e01..bb441a7b 100644 --- a/src/editor/panels/BottomPanelHandlers.js +++ b/src/editor/panels/BottomPanelHandlers.js @@ -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} diff --git a/src/editor/panels/TopPanelHandlers.js b/src/editor/panels/TopPanelHandlers.js index 0366a0b1..813d03f9 100644 --- a/src/editor/panels/TopPanelHandlers.js +++ b/src/editor/panels/TopPanelHandlers.js @@ -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'));