From ff7975992275f836f7e86c63b08d3631f7a33673 Mon Sep 17 00:00:00 2001 From: jfh Date: Sat, 31 Oct 2020 22:42:39 +0100 Subject: [PATCH] in progress --- src/editor/components/seButton.js | 9 +- src/editor/components/seFlyingButton.js | 94 ++++++---- src/editor/components/seFlyingItem.js | 235 ++++++++++++++++++++++++ src/editor/images/circle.svg | 11 ++ src/editor/images/ellipse.svg | 11 ++ src/editor/images/fh_ellipse.svg | 16 ++ src/editor/images/fh_rect.svg | 0 src/editor/images/pen.svg | 16 ++ src/editor/images/rect.svg | 9 + src/editor/images/select_node.svg | 4 + src/editor/images/square.svg | 9 + src/editor/images/svg_edit_icons.svg | 150 --------------- src/editor/index.html | 6 +- 13 files changed, 380 insertions(+), 190 deletions(-) create mode 100644 src/editor/components/seFlyingItem.js create mode 100644 src/editor/images/circle.svg create mode 100644 src/editor/images/ellipse.svg create mode 100644 src/editor/images/fh_ellipse.svg create mode 100644 src/editor/images/fh_rect.svg create mode 100644 src/editor/images/pen.svg create mode 100644 src/editor/images/rect.svg create mode 100644 src/editor/images/select_node.svg create mode 100644 src/editor/images/square.svg diff --git a/src/editor/components/seButton.js b/src/editor/components/seButton.js index abcbcea1..6ea3dbcd 100644 --- a/src/editor/components/seButton.js +++ b/src/editor/components/seButton.js @@ -4,7 +4,7 @@ const template = document.createElement('template'); template.innerHTML = ` -
- icon -
-
- icon +
+
+ icon +
-
- icon -
-
- icon -
-
- icon +
+
+ `; /** * @class FlyingButton @@ -106,6 +105,15 @@ export class FlyingButton extends HTMLElement { // locate the component this.$open = this._shadowRoot.querySelector('.menu-button'); this.$img = this._shadowRoot.querySelector('img'); + // the last element of the div is the slot + // we retrieve all elements added in the slot (i.e. se-buttons) + this.$elements = this.$open.lastElementChild.assignedElements(); + this.$elements[0].style.transitionDuration = '190ms'; + this.$elements[0].style.transform = 'translate(2px,-3px)'; + this.$elements[1].style.transitionDuration = '`2500ms'; + this.$elements[1].style.transform = 'translate(0px,-3px)'; + this.$elements[2].style.transitionDuration = '`2500ms'; + this.$elements[2].style.transform = 'translate(0px,-3px)'; } /** * @function observedAttributes @@ -124,9 +132,9 @@ export class FlyingButton extends HTMLElement { attributeChangedCallback (name, oldValue, newValue) { if (oldValue === newValue) return; switch (name) { - case 'titloe': + case 'title': { - const shortcut = this.getAttribute('title'); + const shortcut = this.getAttribute('shortcut'); this.$open.setAttribute('title', `${newValue} [${shortcut}]`); } break; @@ -227,3 +235,17 @@ export class FlyingButton extends HTMLElement { // Register customElements.define('se-flyingbutton', FlyingButton); +/* +
+ icon +
+
+ icon +
+
+ icon +
+
+ icon +
+ */ diff --git a/src/editor/components/seFlyingItem.js b/src/editor/components/seFlyingItem.js new file mode 100644 index 00000000..97303619 --- /dev/null +++ b/src/editor/components/seFlyingItem.js @@ -0,0 +1,235 @@ +/* eslint-disable max-len */ +const template = document.createElement('template'); +template.innerHTML = ` + + +
+ icon +
+ +
+`; +/** + * @class FlyingButton + */ +export class FlyingButton 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)); + // locate the component + this.$open = this._shadowRoot.querySelector('.menu-button'); + this.$img = this._shadowRoot.querySelector('img'); + } + /** + * @function observedAttributes + * @returns {any} observed + */ + static get observedAttributes () { + return ['title', 'src', 'pressed', 'disabled', 'style']; + } + /** + * @function attributeChangedCallback + * @param {string} name + * @param {string} oldValue + * @param {string} newValue + * @returns {void} + */ + attributeChangedCallback (name, oldValue, newValue) { + if (oldValue === newValue) return; + switch (name) { + case 'title': + { + const shortcut = this.getAttribute('shortcut'); + this.$open.setAttribute('title', `${newValue} [${shortcut}]`); + } + break; + case 'style': + this.$open.style = newValue; + break; + case 'src': + this.$img.setAttribute('src', newValue); + break; + case 'pressed': + if (newValue) { + this.$div.classList.add('pressed'); + } else { + this.$div.classList.remove('pressed'); + } + break; + case 'disabled': + if (newValue) { + this.$div.classList.add('disabled'); + } else { + this.$div.classList.remove('disabled'); + } + break; + default: + // eslint-disable-next-line no-console + console.error(`unknown attribute: ${name}`); + break; + } + } + /** + * @function get + * @returns {any} + */ + get title () { + return this.getAttribute('title'); + } + + /** + * @function set + * @returns {void} + */ + set title (value) { + this.setAttribute('title', value); + } + /** + * @function get + * @returns {any} + */ + get pressed () { + return this.hasAttribute('pressed'); + } + + /** + * @function set + * @returns {void} + */ + set pressed (value) { + // boolean value => existence = true + if (value) { + this.setAttribute('pressed', 'true'); + } else { + this.removeAttribute('pressed', ''); + } + } + /** + * @function get + * @returns {any} + */ + get disabled () { + return this.hasAttribute('disabled'); + } + + /** + * @function set + * @returns {void} + */ + set disabled (value) { + // boolean value => existence = true + if (value) { + this.setAttribute('disabled', 'true'); + } else { + this.removeAttribute('disabled', ''); + } + } + /** + * @function get + * @returns {any} + */ + get src () { + return this.getAttribute('src'); + } + + /** + * @function set + * @returns {void} + */ + set src (value) { + this.setAttribute('src', value); + } +} + +// Register +customElements.define('se-flyingbutton', FlyingButton); +/* +
+ icon +
+
+ icon +
+
+ icon +
+
+ icon +
+ */ diff --git a/src/editor/images/circle.svg b/src/editor/images/circle.svg new file mode 100644 index 00000000..42a6f63b --- /dev/null +++ b/src/editor/images/circle.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/src/editor/images/ellipse.svg b/src/editor/images/ellipse.svg new file mode 100644 index 00000000..4cd48245 --- /dev/null +++ b/src/editor/images/ellipse.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/src/editor/images/fh_ellipse.svg b/src/editor/images/fh_ellipse.svg new file mode 100644 index 00000000..cf8d8189 --- /dev/null +++ b/src/editor/images/fh_ellipse.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/editor/images/fh_rect.svg b/src/editor/images/fh_rect.svg new file mode 100644 index 00000000..e69de29b diff --git a/src/editor/images/pen.svg b/src/editor/images/pen.svg new file mode 100644 index 00000000..32eee7b7 --- /dev/null +++ b/src/editor/images/pen.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/editor/images/rect.svg b/src/editor/images/rect.svg new file mode 100644 index 00000000..6a9ade6d --- /dev/null +++ b/src/editor/images/rect.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/src/editor/images/select_node.svg b/src/editor/images/select_node.svg new file mode 100644 index 00000000..ad915547 --- /dev/null +++ b/src/editor/images/select_node.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/editor/images/square.svg b/src/editor/images/square.svg new file mode 100644 index 00000000..0d8b1c77 --- /dev/null +++ b/src/editor/images/square.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/src/editor/images/svg_edit_icons.svg b/src/editor/images/svg_edit_icons.svg index 79194ec9..bd430ee5 100644 --- a/src/editor/images/svg_edit_icons.svg +++ b/src/editor/images/svg_edit_icons.svg @@ -1,156 +1,6 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/editor/index.html b/src/editor/index.html index bc417f37..fc1ebd8f 100644 --- a/src/editor/index.html +++ b/src/editor/index.html @@ -380,7 +380,11 @@
- + + + + +