diff --git a/src/editor/components/seMenu.js b/src/editor/components/seMenu.js index bdbbe6f8..963f079e 100644 --- a/src/editor/components/seMenu.js +++ b/src/editor/components/seMenu.js @@ -9,10 +9,12 @@ template.innerHTML = ` :host { padding: 0px; } + elix-menu-button::part(menu) { + background-color: #eee !important; + } - welcome @@ -41,9 +43,11 @@ export class SeMenu extends HTMLElement { console.log("connectedCallback"); this.$menu.addEventListener('openedchange', (e) => { e.preventDefault(); - console.log("came"); + const selectedItem = e?.detail?.closeResult; + if (selectedItem !== undefined && selectedItem?.id !== undefined) { + document.getElementById(selectedItem.id).click(); + } }); - //this.dispatchEvent(this.$event); } } diff --git a/src/editor/components/seMenuItem.js b/src/editor/components/seMenuItem.js index af14a7ee..b4e25bea 100644 --- a/src/editor/components/seMenuItem.js +++ b/src/editor/components/seMenuItem.js @@ -5,10 +5,13 @@ import 'elix/define/MenuItem.js'; const template = document.createElement('template'); template.innerHTML = ` - - New - + + +
+ icon + +
+ `; /** * @class SeMenuItem @@ -22,7 +25,95 @@ export class SeMenuItem extends HTMLElement { // create the shadowDom and insert the template this._shadowRoot = this.attachShadow({mode: 'open'}); this._shadowRoot.appendChild(template.content.cloneNode(true)); - // this.$menu = this._shadowRoot.querySelector('elix-menu'); + this.$img = this._shadowRoot.querySelector('img'); + this.$label = this._shadowRoot.querySelector('span'); + this.$menuitem = this._shadowRoot.querySelector('elix-menu-item'); + } + /** + * @function observedAttributes + * @returns {any} observed + */ + static get observedAttributes () { + return ['label', 'src']; + } + /** + * @function attributeChangedCallback + * @param {string} name + * @param {string} oldValue + * @param {string} newValue + * @returns {void} + */ + attributeChangedCallback (name, oldValue, newValue) { + if (oldValue === newValue) return; + switch (name) { + case 'src': + this.$img.setAttribute('src', newValue); + this.$img.style.display = 'block'; + break; + case 'label': + const shortcut = this.getAttribute('shortcut'); + this.$label.textContent = `${newValue} ${shortcut ? `(${shortcut})` : ''}`; + this.$img.remove(); + break; + default: + // eslint-disable-next-line no-console + console.error(`unknown attribute: ${name}`); + break; + } + } + /** + * @function get + * @returns {any} + */ + get label () { + return this.getAttribute('label'); + } + + /** + * @function set + * @returns {void} + */ + set label (value) { + this.setAttribute('label', value); + } + /** + * @function get + * @returns {any} + */ + get src () { + return this.getAttribute('src'); + } + + /** + * @function set + * @returns {void} + */ + set src (value) { + this.setAttribute('src', value); + } + + /** + * @function connectedCallback + * @returns {void} + */ + connectedCallback () { + // capture shortcuts + const shortcut = this.getAttribute('shortcut'); + if (shortcut) { + // register the keydown event + document.addEventListener('keydown', (e) => { + // only track keyboard shortcuts for the body containing the SVG-Editor + if (e.target.nodeName !== 'BODY') return; + // normalize key + const key = `${(e.metaKey) ? 'meta+' : ''}${(e.ctrlKey) ? 'ctrl+' : ''}${e.key.toUpperCase()}`; + if (shortcut !== key) return; + // launch the click event + if (this.id) { + document.getElementById(this.id).click(); + } + e.preventDefault(); + }); + } } } diff --git a/src/editor/index.html b/src/editor/index.html index 781b157b..d7691e75 100644 --- a/src/editor/index.html +++ b/src/editor/index.html @@ -125,11 +125,15 @@ - - new - new1 - new2 - new3 + + + + + + + + +
diff --git a/src/editor/svgedit.css b/src/editor/svgedit.css index 9ffdce45..b8787f1d 100644 --- a/src/editor/svgedit.css +++ b/src/editor/svgedit.css @@ -281,6 +281,13 @@ hr { z-index: 5; } +#mainmenu1 { + position: absolute; + top: 4px; + left: 355px; + z-index: 5; +} + #main_icon { position: relative; top: -2px; diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js index 734d1d58..1650f2cd 100644 --- a/src/editor/svgedit.js +++ b/src/editor/svgedit.js @@ -4680,18 +4680,28 @@ editor.init = () => { $id('tool_italic').addEventListener('click', clickItalic); $id('palette').addEventListener('change', handlePalette); + $id('tool_clear').addEventListener('click', clickClear); + $id('tool_open').addEventListener('click', function (e) { + clickOpen(); + window.dispatchEvent(new CustomEvent('openImage')); + }); + $id('tool_import').addEventListener('click', function (e) { + clickImport(); + window.dispatchEvent(new CustomEvent('importImage')); + }); + $id('tool_save').addEventListener('click', function (e) { + if (editingsource) { + saveSourceEditor(); + } else { + clickSave(); + } + }); + $id('tool_export').addEventListener('click', clickExport); + $id('tool_docprops').addEventListener('click', showDocProperties); + $id('tool_editor_prefs').addEventListener('click', showPreferences); + $id('tool_editor_homepage').addEventListener('click', openHomePage); + const toolButtons = [ - {sel: '#tool_clear', fn: clickClear, evt: 'mouseup', key: ['N', true]}, - {sel: '#tool_save', fn () { - if (editingsource) { - saveSourceEditor(); - } else { - clickSave(); - } - }, evt: 'mouseup', key: ['S', true]}, - {sel: '#tool_export', fn: clickExport, evt: 'mouseup'}, - {sel: '#tool_open', fn: clickOpen, evt: 'mouseup', key: ['O', true]}, - {sel: '#tool_import', fn: clickImport, evt: 'mouseup'}, { key: ['esc', false, false], fn () { @@ -4707,12 +4717,7 @@ editor.init = () => { key: ['esc', false, false], hidekey: true}, {sel: '#tool_source_save', fn: saveSourceEditor, evt: 'click'}, {sel: '#tool_docprops_save', fn: saveDocProperties, evt: 'click'}, - {sel: '#tool_docprops', fn: showDocProperties, evt: 'click'}, {sel: '#tool_prefs_save', fn: savePreferences, evt: 'click'}, - {sel: '#tool_editor_prefs', fn: showPreferences, evt: 'click'}, - {sel: '#tool_editor_homepage', fn: openHomePage, evt: 'click'}, - {sel: '#tool_open', fn () { window.dispatchEvent(new CustomEvent('openImage')); }, evt: 'click'}, - {sel: '#tool_import', fn () { window.dispatchEvent(new CustomEvent('importImage')); }, evt: 'click'}, {sel: '#tool_node_link', fn: linkControlPoints, evt: 'click'}, {sel: '#tool_ungroup', fn: clickGroup, evt: 'click'}, {sel: '#tool_unlink_use', fn: clickGroup, evt: 'click'},