From 3d037f110af255673c93381bc7a35cc1898bbcd9 Mon Sep 17 00:00:00 2001 From: Agriya Dev5 Date: Thu, 3 Dec 2020 19:34:51 +0530 Subject: [PATCH 1/5] #se-menu menu work starting code added --- src/editor/components/index.js | 2 ++ src/editor/components/seMenu.js | 51 +++++++++++++++++++++++++++++ src/editor/components/seMenuItem.js | 30 +++++++++++++++++ src/editor/index.html | 7 ++++ 4 files changed, 90 insertions(+) create mode 100644 src/editor/components/seMenu.js create mode 100644 src/editor/components/seMenuItem.js diff --git a/src/editor/components/index.js b/src/editor/components/index.js index f26f829e..a29c8d01 100644 --- a/src/editor/components/index.js +++ b/src/editor/components/index.js @@ -5,3 +5,5 @@ import './seDropdown.js'; import './seInput.js'; import './seSpinInput.js'; import './sePalette.js'; +import './seMenu.js'; +import './seMenuItem.js'; diff --git a/src/editor/components/seMenu.js b/src/editor/components/seMenu.js new file mode 100644 index 00000000..bdbbe6f8 --- /dev/null +++ b/src/editor/components/seMenu.js @@ -0,0 +1,51 @@ +/* eslint-disable node/no-unpublished-import */ +import 'elix/define/MenuButton.js'; +import 'elix/define/MenuItem.js'; + + +const template = document.createElement('template'); +template.innerHTML = ` + + + + welcome + + + +`; +/** + * @class SeMenu + */ +export class SeMenu extends HTMLElement { + /** + * @function constructor + */ + constructor () { + super(); + // 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-button'); + console.log(this.$menu); + } + + /** + * @function connectedCallback + * @returns {void} + */ + connectedCallback () { + console.log("connectedCallback"); + this.$menu.addEventListener('openedchange', (e) => { + e.preventDefault(); + console.log("came"); + }); + //this.dispatchEvent(this.$event); + } +} + +// Register +customElements.define('se-menu', SeMenu); diff --git a/src/editor/components/seMenuItem.js b/src/editor/components/seMenuItem.js new file mode 100644 index 00000000..af14a7ee --- /dev/null +++ b/src/editor/components/seMenuItem.js @@ -0,0 +1,30 @@ +/* eslint-disable node/no-unpublished-import */ +import 'elix/define/Menu.js'; +import 'elix/define/MenuItem.js'; + +const template = document.createElement('template'); +template.innerHTML = ` + + + New + +`; +/** + * @class SeMenuItem + */ +export class SeMenuItem extends HTMLElement { + /** + * @function constructor + */ + constructor () { + super(); + // 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'); + } +} + +// Register +customElements.define('se-menu-item', SeMenuItem); diff --git a/src/editor/index.html b/src/editor/index.html index 34e1b580..781b157b 100644 --- a/src/editor/index.html +++ b/src/editor/index.html @@ -74,6 +74,7 @@
L a y e r s
+
SVG-Edit @@ -124,6 +125,12 @@
+ + new + new1 + new2 + new3 +
From f4a63ea097ae2cb2b5320a72b7762c3f32a879eb Mon Sep 17 00:00:00 2001 From: Agriya Dev5 Date: Fri, 4 Dec 2020 14:32:29 +0530 Subject: [PATCH 2/5] #se-menu menu item click functionality handled --- src/editor/components/seMenu.js | 10 ++- src/editor/components/seMenuItem.js | 101 ++++++++++++++++++++++++++-- src/editor/index.html | 14 ++-- src/editor/svgedit.css | 7 ++ src/editor/svgedit.js | 37 +++++----- 5 files changed, 140 insertions(+), 29 deletions(-) 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'}, From f063b978da08f188e89e583623cb635dce4c5bbe Mon Sep 17 00:00:00 2001 From: Agriya Dev5 Date: Fri, 4 Dec 2020 17:58:49 +0530 Subject: [PATCH 3/5] #se-menu button size changed --- src/editor/components/seMenu.js | 49 +++++++++++++++++++++++++++++++-- src/editor/index.html | 30 ++++++++++---------- src/editor/svgedit.css | 7 ----- 3 files changed, 61 insertions(+), 25 deletions(-) diff --git a/src/editor/components/seMenu.js b/src/editor/components/seMenu.js index 963f079e..ccecd6c8 100644 --- a/src/editor/components/seMenu.js +++ b/src/editor/components/seMenu.js @@ -12,9 +12,12 @@ template.innerHTML = ` elix-menu-button::part(menu) { background-color: #eee !important; } + elix-menu-button::part(popup-toggle) { + padding: 0.40em 1.75em !important; + } - + @@ -32,15 +35,55 @@ export class SeMenu extends HTMLElement { this._shadowRoot = this.attachShadow({mode: 'open'}); this._shadowRoot.appendChild(template.content.cloneNode(true)); this.$menu = this._shadowRoot.querySelector('elix-menu-button'); - console.log(this.$menu); + this.$label = this.$menu.shadowRoot.querySelector('#popupToggle').shadowRoot; + } + /** + * @function observedAttributes + * @returns {any} observed + */ + static get observedAttributes () { + return ['label']; } + /** + * @function attributeChangedCallback + * @param {string} name + * @param {string} oldValue + * @param {string} newValue + * @returns {void} + */ + attributeChangedCallback (name, oldValue, newValue) { + if (oldValue === newValue) return; + switch (name) { + case 'label': + this.$label.prepend(newValue); + 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 connectedCallback * @returns {void} */ connectedCallback () { - console.log("connectedCallback"); this.$menu.addEventListener('openedchange', (e) => { e.preventDefault(); const selectedItem = e?.detail?.closeResult; diff --git a/src/editor/index.html b/src/editor/index.html index d7691e75..95063f5d 100644 --- a/src/editor/index.html +++ b/src/editor/index.html @@ -74,15 +74,24 @@
L a y e r s
- -
+ + + + + + + + + + + +
  • @@ -123,18 +132,9 @@
-
-
- - - - - - - - - - + + --> +
diff --git a/src/editor/svgedit.css b/src/editor/svgedit.css index b8787f1d..9ffdce45 100644 --- a/src/editor/svgedit.css +++ b/src/editor/svgedit.css @@ -281,13 +281,6 @@ hr { z-index: 5; } -#mainmenu1 { - position: absolute; - top: 4px; - left: 355px; - z-index: 5; -} - #main_icon { position: relative; top: -2px; From f6d628a7bfa96871db338944b0d648292e6836df Mon Sep 17 00:00:00 2001 From: Agriya Dev5 Date: Fri, 4 Dec 2020 18:14:53 +0530 Subject: [PATCH 4/5] #se-menu main menu icon set changes --- src/editor/components/seMenu.js | 27 ++++++++++++++++++++++++--- src/editor/index.html | 2 +- 2 files changed, 25 insertions(+), 4 deletions(-) diff --git a/src/editor/components/seMenu.js b/src/editor/components/seMenu.js index ccecd6c8..2c766e31 100644 --- a/src/editor/components/seMenu.js +++ b/src/editor/components/seMenu.js @@ -2,7 +2,6 @@ import 'elix/define/MenuButton.js'; import 'elix/define/MenuItem.js'; - const template = document.createElement('template'); template.innerHTML = ` @@ -42,7 +41,7 @@ export class SeMenu extends HTMLElement { * @returns {any} observed */ static get observedAttributes () { - return ['label']; + return ['label', 'src']; } /** @@ -53,8 +52,15 @@ export class SeMenu extends HTMLElement { * @returns {void} */ attributeChangedCallback (name, oldValue, newValue) { + var image = new Image(); if (oldValue === newValue) return; switch (name) { + case 'src': + image.src = newValue; + image.width = 18; + image.height = 18; + this.$label.prepend(image); + break; case 'label': this.$label.prepend(newValue); break; @@ -79,6 +85,21 @@ export class SeMenu extends HTMLElement { 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} diff --git a/src/editor/index.html b/src/editor/index.html index 95063f5d..8b25f2ef 100644 --- a/src/editor/index.html +++ b/src/editor/index.html @@ -74,7 +74,7 @@
L a y e r s
- + From d118bc6884a90b415c23afa09463f8cbd9b25323 Mon Sep 17 00:00:00 2001 From: Agriya Dev5 Date: Fri, 4 Dec 2020 18:37:18 +0530 Subject: [PATCH 5/5] #se-menu menu item add img changes --- src/editor/components/seMenuItem.js | 6 +++--- src/editor/images/docprop.svg | 19 +++++++++++++++++++ src/editor/images/editPref.svg | 1 + src/editor/images/export.svg | 15 +++++++++++++++ src/editor/images/imagelib.svg | 10 ++++++++++ src/editor/images/importImg.svg | 10 ++++++++++ src/editor/images/open.svg | 15 +++++++++++++++ src/editor/images/saveImg.svg | 16 ++++++++++++++++ src/editor/images/svg-edit-home.svg | 26 ++++++++++++++++++++++++++ src/editor/index.html | 16 ++++++++-------- 10 files changed, 123 insertions(+), 11 deletions(-) create mode 100644 src/editor/images/docprop.svg create mode 100644 src/editor/images/editPref.svg create mode 100644 src/editor/images/export.svg create mode 100644 src/editor/images/imagelib.svg create mode 100644 src/editor/images/importImg.svg create mode 100644 src/editor/images/open.svg create mode 100644 src/editor/images/saveImg.svg create mode 100644 src/editor/images/svg-edit-home.svg diff --git a/src/editor/components/seMenuItem.js b/src/editor/components/seMenuItem.js index b4e25bea..d93a0860 100644 --- a/src/editor/components/seMenuItem.js +++ b/src/editor/components/seMenuItem.js @@ -44,16 +44,16 @@ export class SeMenuItem extends HTMLElement { * @returns {void} */ attributeChangedCallback (name, oldValue, newValue) { + let shortcut = ''; if (oldValue === newValue) return; switch (name) { case 'src': this.$img.setAttribute('src', newValue); - this.$img.style.display = 'block'; + this.$img.style.display = 'inline-block'; break; case 'label': - const shortcut = this.getAttribute('shortcut'); + shortcut = this.getAttribute('shortcut'); this.$label.textContent = `${newValue} ${shortcut ? `(${shortcut})` : ''}`; - this.$img.remove(); break; default: // eslint-disable-next-line no-console diff --git a/src/editor/images/docprop.svg b/src/editor/images/docprop.svg new file mode 100644 index 00000000..ab7fc559 --- /dev/null +++ b/src/editor/images/docprop.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/editor/images/editPref.svg b/src/editor/images/editPref.svg new file mode 100644 index 00000000..96c7cd21 --- /dev/null +++ b/src/editor/images/editPref.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/editor/images/export.svg b/src/editor/images/export.svg new file mode 100644 index 00000000..95e730c2 --- /dev/null +++ b/src/editor/images/export.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/editor/images/imagelib.svg b/src/editor/images/imagelib.svg new file mode 100644 index 00000000..e4f821c6 --- /dev/null +++ b/src/editor/images/imagelib.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/editor/images/importImg.svg b/src/editor/images/importImg.svg new file mode 100644 index 00000000..5a1908a6 --- /dev/null +++ b/src/editor/images/importImg.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/editor/images/open.svg b/src/editor/images/open.svg new file mode 100644 index 00000000..4afb58fd --- /dev/null +++ b/src/editor/images/open.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/editor/images/saveImg.svg b/src/editor/images/saveImg.svg new file mode 100644 index 00000000..23a517f5 --- /dev/null +++ b/src/editor/images/saveImg.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/editor/images/svg-edit-home.svg b/src/editor/images/svg-edit-home.svg new file mode 100644 index 00000000..a2acbe49 --- /dev/null +++ b/src/editor/images/svg-edit-home.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/editor/index.html b/src/editor/index.html index 8b25f2ef..3303c0eb 100644 --- a/src/editor/index.html +++ b/src/editor/index.html @@ -76,14 +76,14 @@
- - - - - - - - + + + + + + + +