From a09240626d0c148638c8936adb121821b08f4eec Mon Sep 17 00:00:00 2001 From: Agriya Dev5 Date: Tue, 5 Jan 2021 12:23:01 +0530 Subject: [PATCH 1/4] #issue-fix process_cancel change to seConfirm --- src/editor/extensions/ext-imagelib/ext-imagelib.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/editor/extensions/ext-imagelib/ext-imagelib.js b/src/editor/extensions/ext-imagelib/ext-imagelib.js index 99deaf88..5e48e1d0 100644 --- a/src/editor/extensions/ext-imagelib/ext-imagelib.js +++ b/src/editor/extensions/ext-imagelib/ext-imagelib.js @@ -1,3 +1,4 @@ +/* globals seConfirm */ /** * @file ext-imagelib.js * @@ -181,11 +182,11 @@ export default { const message = uiStrings.notification.retrieving.replace('%s', name); if (mode !== 'm') { - await $.process_cancel(message); + await seConfirm(message); transferStopped = true; // Should a message be sent back to the frame? - $('#dialog_box').hide(); + // $('#dialog_box').hide(); } else { entry = $('
').text(message).data('id', curMeta.id); preview.append(entry); From feaedc5770c9252e3bc5de9d84de4553bbbdd50f Mon Sep 17 00:00:00 2001 From: Agriya Dev5 Date: Tue, 5 Jan 2021 12:24:44 +0530 Subject: [PATCH 2/4] #issue-fix review how the top toolbar display when many buttons are displayed --- src/editor/svgedit.css | 44 +++++++++++++++++++++++++++++++++++++++++- 1 file changed, 43 insertions(+), 1 deletion(-) diff --git a/src/editor/svgedit.css b/src/editor/svgedit.css index 15c97994..cdbd6704 100644 --- a/src/editor/svgedit.css +++ b/src/editor/svgedit.css @@ -388,7 +388,7 @@ hr { top: 2px; min-height: 40px; border-bottom: none; - overflow: scroll; + overflow: auto; } #tools_top .tool_sep { @@ -429,6 +429,7 @@ hr { #tools_top div[id$="_panel"]:not(#editor_panel):not(#history_panel) { display: none; + float: left; } #editor_panel, #history_panel { @@ -1021,3 +1022,44 @@ elix-alert-dialog::part(frame) { font-size: 0.8em; font-family: Verdana,Helvetica,sans-serif; } +@media screen and (max-width: 1250px) { + .expanded #palette_holder { + left: 560px; + overflow-x: scroll; + padding: 0 5px; + margin-top: 2px; + height: 30px; + } + #tools_top { + height: 71px; + } + #workarea, #sidepanels { + top: 70px; + } + #rulers #ruler_corner, + #rulers #ruler_x, #tools_left { + top: 71px; + } + + #rulers #ruler_y { + top: 86px; + } + + #cur_context_panel { + top: 87px; + } + + #selected_panel { + clear: right; + } +} + +@media screen and (max-width:1100px) { + #tools_bottom:not(.expanded) #palette_holder { + left: 410px; + overflow-x: scroll; + padding: 0 5px; + margin-top: 2px; + height: 30px; + } +} From 9e367682c76e48e3fa73effb11cb88bb0d4672aa Mon Sep 17 00:00:00 2001 From: Agriya Dev5 Date: Tue, 5 Jan 2021 13:49:03 +0530 Subject: [PATCH 3/4] #issue-fix unwanted css reoved --- src/editor/svgedit.css | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/src/editor/svgedit.css b/src/editor/svgedit.css index cdbd6704..857cb764 100644 --- a/src/editor/svgedit.css +++ b/src/editor/svgedit.css @@ -1023,13 +1023,6 @@ elix-alert-dialog::part(frame) { font-family: Verdana,Helvetica,sans-serif; } @media screen and (max-width: 1250px) { - .expanded #palette_holder { - left: 560px; - overflow-x: scroll; - padding: 0 5px; - margin-top: 2px; - height: 30px; - } #tools_top { height: 71px; } @@ -1054,12 +1047,3 @@ elix-alert-dialog::part(frame) { } } -@media screen and (max-width:1100px) { - #tools_bottom:not(.expanded) #palette_holder { - left: 410px; - overflow-x: scroll; - padding: 0 5px; - margin-top: 2px; - height: 30px; - } -} From f351c379107e7d5d32b904c6cc5575046bbb078b Mon Sep 17 00:00:00 2001 From: Agriya Dev5 Date: Tue, 5 Jan 2021 20:06:59 +0530 Subject: [PATCH 4/4] #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'));