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/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); 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')); diff --git a/src/editor/svgedit.css b/src/editor/svgedit.css index 15c97994..857cb764 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,28 @@ elix-alert-dialog::part(frame) { font-size: 0.8em; font-family: Verdana,Helvetica,sans-serif; } +@media screen and (max-width: 1250px) { + #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; + } +} +