diff --git a/src/editor/components/seFlyingButton.js b/src/editor/components/seFlyingButton.js index 521f8c33..2bb11fad 100644 --- a/src/editor/components/seFlyingButton.js +++ b/src/editor/components/seFlyingButton.js @@ -1,11 +1,10 @@ -/* eslint-disable max-len */ const template = document.createElement('template'); template.innerHTML = ` -
+
icon
@@ -89,6 +94,7 @@ export class FlyingButton extends HTMLElement { this._shadowRoot.appendChild(template.content.cloneNode(true)); // locate the component this.$button = this._shadowRoot.querySelector('.menu-button'); + this.$overall = this._shadowRoot.querySelector('.overall'); this.$img = this._shadowRoot.querySelector('img'); this.$menu = this._shadowRoot.querySelector('.menu'); // the last element of the div is the slot @@ -123,9 +129,9 @@ export class FlyingButton extends HTMLElement { break; case 'pressed': if (newValue) { - this.$div.classList.add('pressed'); + this.$overall.classList.add('pressed'); } else { - this.$div.classList.remove('pressed'); + this.$overall.classList.remove('pressed'); } break; case 'disabled': @@ -216,11 +222,36 @@ export class FlyingButton extends HTMLElement { * @returns {void} */ connectedCallback () { - // capture click event - this.$button.addEventListener('click', () => { - // normalize key - this.$menu.classList.toggle('open'); - }); + // initialize currentAction with the first slot of the list + this.activeSlot = this.shadowRoot.querySelector('slot').assignedElements()[0]; + // capture click event on the button to manage the logic + const onClickHandler = (ev) => { + switch (ev.target.nodeName) { + case 'SE-FLYINGBUTTON': + if (this.pressed) { + this.$menu.classList.toggle('open'); + } else { + // launch current action + this.activeSlot.click(); + this.setAttribute('pressed', 'pressed'); + } + break; + case 'SE-BUTTON': + console.log('change current action'); + // change icon to the current action and close the menu + this.setAttribute('src', ev.target.getAttribute('src')); + this.currentAction = ev.target; + this.setAttribute('pressed', 'pressed'); + this.$menu.classList.remove('open'); + break; + default: + console.log(ev.target, ev.target.className); + this.$menu.classList.remove('open'); + this.setAttribute('pressed', 'pressed'); + } + }; + // capture event from slots + this.addEventListener('click', onClickHandler); } } diff --git a/src/editor/components/seFlyingItem.js b/src/editor/components/seFlyingItem.js deleted file mode 100644 index 97303619..00000000 --- a/src/editor/components/seFlyingItem.js +++ /dev/null @@ -1,235 +0,0 @@ -/* 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/handle.svg b/src/editor/images/handle.svg new file mode 100644 index 00000000..6445857f --- /dev/null +++ b/src/editor/images/handle.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/editor/index.html b/src/editor/index.html index 08ecac40..e5522545 100644 --- a/src/editor/index.html +++ b/src/editor/index.html @@ -386,7 +386,7 @@ - + @@ -403,14 +403,6 @@ -
-
-
-
-
-
-
-
diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js index d3b39c8c..3d18cf23 100644 --- a/src/editor/svgedit.js +++ b/src/editor/svgedit.js @@ -1070,17 +1070,8 @@ editor.init = () => { '#tool_docprops > div': 'docprops', '#tool_editor_prefs > div': 'config', '#tool_editor_homepage > div': 'globe_link', - '#tool_fhpath': 'pencil', - '#tool_line': 'pen', - '#tool_rect,#tools_rect_show': 'rect', - '#tool_square': 'square', - '#tool_fhrect': 'fh_rect', - '#tool_ellipse,#tools_ellipse_show': 'ellipse', - '#tool_circle': 'circle', - '#tool_fhellipse': 'fh_ellipse', '#tool_image': 'image', '#tool_zoom': 'zoom', - '#tool_node_clone': 'node_clone', '#tool_node_delete': 'node_delete', '#tool_add_subpath': 'add_subpath', @@ -1529,14 +1520,14 @@ editor.init = () => { * - Removes the `tool_button_current` class from whatever tool currently has it. * - Hides any flyouts. * - Adds the `tool_button_current` class to the button passed in. - * @function leftPanelClick + * @function updateLeftPanel * @param {string|Element} button The DOM element or string selector representing the toolbar button * @returns {boolean} Whether the button was disabled or not */ - const leftPanelClick = (button) => { + const updateLeftPanel = (button) => { if (button.disabled) return false; // remove the pressed state on other(s) button(s) - $qq('#tools-left se-button[pressed]').forEach((b) => { b.pressed = false; }); + $qq('#tools_left *[pressed]').forEach((b) => { b.pressed = false; }); // pressed state for the clicked button $id(button).pressed = true; return true; @@ -1549,7 +1540,7 @@ editor.init = () => { * @returns {void} */ const clickSelect = () => { - if (leftPanelClick('tool_select')) { + if (updateLeftPanel('tool_select')) { workarea.css('cursor', 'auto'); svgCanvas.setMode('select'); } @@ -2981,7 +2972,7 @@ editor.init = () => { parent = '#main_menu ul'; break; } - let flyoutHolder, showBtn, refData, refBtn; + // let flyoutHolder, showBtn, refData, refBtn; const button = $((btn.list || btn.type === 'app_menu') ? '
  • ' : '
    ') .attr('id', id) .attr('title', btn.title) @@ -2998,6 +2989,7 @@ editor.init = () => { } if (btn.type === 'mode_flyout') { + /* // Add to flyout menu / make flyout menu // const opts = btn.includeWith; // // opts.button, default, position @@ -3026,7 +3018,7 @@ editor.init = () => { // TODO: Find way to set the current icon using the iconloader if this is not default // Include data for extension button as well as ref button - /* curH = */ holders['#' + flyoutHolder[0].id] = [{ + holders['#' + flyoutHolder[0].id] = [{ sel: '#' + id, fn: btn.events.click, icon: btn.id, @@ -3046,6 +3038,7 @@ editor.init = () => { // flyoutHolder.append(button); // curH.reverse(); // } + */ } else if (btn.type === 'app_menu') { button.append('
    ').append(btn.title); } @@ -3059,11 +3052,11 @@ editor.init = () => { placementObj['#cur_' + btn.list] = svgicon; } } else if (btn.includeWith) { + /* // Add to flyout menu / make flyout menu const opts = btn.includeWith; // opts.button, default, position refBtn = $(opts.button); - flyoutHolder = refBtn.parent(); // Create a flyout menu if there isn't one already let tlsId; @@ -3078,7 +3071,6 @@ editor.init = () => { // Create a flyout div flyoutHolder = makeFlyoutHolder(tlsId, refBtn); } - refData = Actions.getButtonData(opts.button); if (opts.isDefault) { @@ -3105,8 +3097,8 @@ editor.init = () => { flyoutHolder.append(button); curH.reverse(); } + */ } - if (!svgicons) { button.append(icon); } @@ -3143,7 +3135,6 @@ editor.init = () => { setupFlyouts(holders); }); - $.each(btnSelects, function () { addAltDropDown(this.elem, this.list, this.callback, {seticon: true}); }); @@ -3786,7 +3777,7 @@ editor.init = () => { * @returns {void} */ const clickFHPath = function () { - if (leftPanelClick('tool_fhpath')) { + if (updateLeftPanel('tool_fhpath')) { svgCanvas.setMode('fhpath'); } }; @@ -3796,7 +3787,7 @@ editor.init = () => { * @returns {void} */ const clickLine = function () { - if (toolButtonClick('#tool_line')) { + if (updateLeftPanel('tool_line')) { svgCanvas.setMode('line'); } }; @@ -3866,7 +3857,7 @@ editor.init = () => { * @returns {void} */ const clickImage = function () { - if (leftPanelClick('tool_image')) { + if (updateLeftPanel('tool_image')) { svgCanvas.setMode('image'); } }; @@ -3876,7 +3867,7 @@ editor.init = () => { * @returns {void} */ const clickZoom = function () { - if (leftPanelClick('tool_zoom')) { + if (updateLeftPanel('tool_zoom')) { svgCanvas.setMode('zoom'); workarea.css('cursor', zoomInIcon); } @@ -3912,7 +3903,7 @@ editor.init = () => { * @returns {void} */ const clickText = function () { - if (leftPanelClick('tool_text')) { + if (updateLeftPanel('tool_text')) { svgCanvas.setMode('text'); } }; @@ -3922,7 +3913,7 @@ editor.init = () => { * @returns {void} */ const clickPath = function () { - if (leftPanelClick('tool_path')) { + if (updateLeftPanel('tool_path')) { svgCanvas.setMode('path'); } }; @@ -5251,6 +5242,7 @@ editor.init = () => { $id('tool_image').addEventListener('click', clickImage); $id('tool_zoom').addEventListener('click', clickZoom); $id('tool_path').addEventListener('click', clickPath); + $id('tool_line').addEventListener('click', clickLine); // $id('tool_').addEventListener('click', clickP); // register actions for layer toolbar @@ -5261,8 +5253,6 @@ editor.init = () => { $id('layer_rename').addEventListener('click', layerRename); const toolButtons = [ - {sel: '#tool_line', fn: clickLine, evt: 'click', key: ['L', true], - parent: '#tools_line', prepend: true}, {sel: '#tool_rect', fn: clickRect, evt: 'mouseup', key: ['R', true], parent: '#tools_rect', icon: 'rect'}, {sel: '#tool_square', fn: clickSquare, evt: 'mouseup',