diff --git a/src/editor/components/seFlyingButton.js b/src/editor/components/seFlyingButton.js index 2bb11fad..da380e9e 100644 --- a/src/editor/components/seFlyingButton.js +++ b/src/editor/components/seFlyingButton.js @@ -15,7 +15,7 @@ template.innerHTML = ` } .overall.pressed .button-icon, .overall.pressed .handle { - background-color: #000 !important; + background-color: #F4E284 !important; } .overall.pressed .menu-button { box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px 0 white !important; @@ -106,7 +106,7 @@ export class FlyingButton extends HTMLElement { * @returns {any} observed */ static get observedAttributes () { - return ['title', 'src', 'pressed', 'disabled']; + return ['title', 'pressed', 'disabled']; } /** * @function attributeChangedCallback @@ -124,9 +124,6 @@ export class FlyingButton extends HTMLElement { this.$button.setAttribute('title', `${newValue} [${shortcut}]`); } break; - case 'src': - this.$img.setAttribute('src', newValue); - break; case 'pressed': if (newValue) { this.$overall.classList.add('pressed'); @@ -202,21 +199,6 @@ export class FlyingButton extends HTMLElement { this.removeAttribute('disabled', ''); } } - /** - * @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} @@ -224,6 +206,7 @@ export class FlyingButton extends HTMLElement { connectedCallback () { // initialize currentAction with the first slot of the list this.activeSlot = this.shadowRoot.querySelector('slot').assignedElements()[0]; + this.$img.setAttribute('src', this.activeSlot.getAttribute('src')); // capture click event on the button to manage the logic const onClickHandler = (ev) => { switch (ev.target.nodeName) { @@ -237,17 +220,16 @@ export class FlyingButton extends HTMLElement { } break; case 'SE-BUTTON': - console.log('change current action'); - // change icon to the current action and close the menu + // change to the current action this.setAttribute('src', ev.target.getAttribute('src')); this.currentAction = ev.target; this.setAttribute('pressed', 'pressed'); + // and close the menu this.$menu.classList.remove('open'); break; default: - console.log(ev.target, ev.target.className); - this.$menu.classList.remove('open'); - this.setAttribute('pressed', 'pressed'); + // eslint-disable-next-line no-console + console.error('unkonw nodeName for:', ev.target, ev.target.className); } }; // capture event from slots diff --git a/src/editor/extensions/ext-connector/ext-connector.js b/src/editor/extensions/ext-connector/ext-connector.js index fbaf25fe..094a9618 100644 --- a/src/editor/extensions/ext-connector/ext-connector.js +++ b/src/editor/extensions/ext-connector/ext-connector.js @@ -349,13 +349,7 @@ export default { const buttons = [{ id: 'mode_connect', - type: 'mode', - icon: svgEditor.curConfig.imgPath + 'cut.png', - includeWith: { - button: '#tool_line', - isDefault: false, - position: 1 - }, + type: 'mode_flyout', events: { click () { svgCanvas.setMode('connector'); @@ -364,6 +358,8 @@ export default { }]; const strings = await loadExtensionTranslation(svgEditor.curPrefs.lang); return { + /** @todo JFH special flag */ + newUI: true, name: strings.name, svgicons: 'conn.svg', buttons: strings.buttons.map((button, i) => { diff --git a/src/editor/extensions/ext-imagelib/ext-imagelib.js b/src/editor/extensions/ext-imagelib/ext-imagelib.js index 13ae02dd..82135fc3 100644 --- a/src/editor/extensions/ext-imagelib/ext-imagelib.js +++ b/src/editor/extensions/ext-imagelib/ext-imagelib.js @@ -454,7 +454,7 @@ export default { const buttons = [{ id: 'tool_imagelib', - type: 'app_menu', // _flyout + type: 'app_menu', icon: 'imagelib.png', position: 4, events: { diff --git a/src/editor/extensions/ext-shapes/ext-shapes.js b/src/editor/extensions/ext-shapes/ext-shapes.js index a65f2601..f146d84a 100644 --- a/src/editor/extensions/ext-shapes/ext-shapes.js +++ b/src/editor/extensions/ext-shapes/ext-shapes.js @@ -156,7 +156,7 @@ export default { const buttons = [{ id: 'tool_shapelib', icon: 'shapes.png', - type: 'mode_flyout', // _flyout + type: 'mode_flyout', position: 6, events: { click () { @@ -214,7 +214,6 @@ export default { if (!btn.length) { return; } const copy = btn.children().clone(); - shower.children(':not(.flyout_arrow_horiz)').remove(); shower .append(copy) .attr('data-curopt', '#' + btn[0].id) // This sets the current mode @@ -223,8 +222,6 @@ export default { curShapeId = btn[0].id.substr((modeId + '_').length); currentD = curLib.data[curShapeId]; - - $('.tools_flyout').fadeOut(); }); const shapeCats = $('
'); diff --git a/src/editor/images/conn.svg b/src/editor/images/conn.svg index 7aa6202d..ffb0da6a 100644 --- a/src/editor/images/conn.svg +++ b/src/editor/images/conn.svg @@ -1,29 +1,24 @@ - - - - + + - - - - - - - - - - - Layer 1 - - - - - - - - - - + + + + + + + + + + + Layer 1 + + + + + + + + - diff --git a/src/editor/index.html b/src/editor/index.html index e5522545..562f1d4a 100644 --- a/src/editor/index.html +++ b/src/editor/index.html @@ -385,16 +385,16 @@
- + - + - + - + diff --git a/src/editor/svgedit.css b/src/editor/svgedit.css index 3cfa229e..644c4783 100644 --- a/src/editor/svgedit.css +++ b/src/editor/svgedit.css @@ -576,14 +576,6 @@ input[type=text] { z-index: 11; } -.flyout_arrow_horiz { - position: absolute; - bottom: -1px; - right: 0; - z-index: 10; -} - - span.zoom_tool { line-height: 26px; padding: 3px; @@ -767,32 +759,6 @@ span.zoom_tool { z-index: 5; } -.tools_flyout { - position: absolute; - display: none; - cursor: pointer; - width: 400px; - z-index: 1; -} - -.tools_flyout_v { - position: absolute; - display: none; - cursor: pointer; - width: 30px; -} - -.tools_flyout .tool_button { - float: left; - background-color: #E8E8E8; - border-left: 1px solid #FFFFFF; - border-top: 1px solid #FFFFFF; - border-right: 1px solid #808080; - border-bottom: 1px solid #808080; - height: 28px; - width: 28px; -} - #tools_bottom { position: absolute; left: 40px; @@ -1342,18 +1308,6 @@ ul li.current { border: 1px solid #000; } -/* Necessary to keep the flyouts sized properly */ -.tools_flyout .tool_button, -.tools_flyout .tool_flyout { - padding: 2px; - width: 24px; - height: 24px; - margin: 0; - border-radius: 0px; - -moz-border-radius: 0px; - -webkit-border-radius: 0px; -} - /* Generic context menu styles */ .contextMenu { position: absolute; diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js index 3d18cf23..987f0a08 100644 --- a/src/editor/svgedit.js +++ b/src/editor/svgedit.js @@ -817,10 +817,6 @@ editor.init = () => { extensionsAdded = true; Actions.setAll(); - $('.flyout_arrow_horiz:empty').each(function () { - $(this).append($.getSvgIcon('arrow_right', true).width(5).height(5)); - }); - if (editor.storagePromptState === 'ignore') { updateCanvas(true); } @@ -846,19 +842,6 @@ editor.init = () => { const stateObj = {tool_scale: editor.tool_scale}; - /** - * - * @returns {void} - */ - const setFlyoutPositions = function () { - $('.tools_flyout').each(function () { - const shower = $('#' + this.id + '_show'); - const {left, top} = shower.offset(); - const w = shower.outerWidth(); - $(this).css({left: (left + w) * editor.tool_scale, top}); - }); - }; - /** * @type {string} */ @@ -889,7 +872,7 @@ editor.init = () => { // const elems = $('.tool_button, .push_button, .tool_button_current, .disabled, .icon_label, #url_notice, #tool_open'); const selToscale = '#tools_top .toolset, #editor_panel > *, #history_panel > *,' + ' #main_button, #tools_left > *, #path_node_panel > *, #multiselected_panel > *,' + - ' #g_panel > *, #tool_font_size > *, .tools_flyout'; + ' #g_panel > *, #tool_font_size > *'; const elems = $(selToscale); @@ -903,16 +886,6 @@ editor.init = () => { stateObj.tool_scale = editor.tool_scale = scale; - setFlyoutPositions(); - // $('.tools_flyout').each(function () { - // const pos = $(this).position(); - // console.log($(this), pos.left+(34 * scale)); - // $(this).css({left: pos.left+(34 * scale), top: pos.top+(77 * scale)}); - // console.log('l', $(this).css('left')); - // }); - // - // const scale = .75; - const hiddenPs = elems.parents(':hidden'); hiddenPs.css('visibility', 'hidden').show(); hiddenPs.css('visibility', 'visible').hide(); @@ -968,8 +941,6 @@ editor.init = () => { ); ruleElem.text(styleStr); } - - setFlyoutPositions(); }; /** @@ -1004,7 +975,6 @@ editor.init = () => { image: 'image.png', zoom: 'zoom.png', - arrow_right: 'flyouth.png', arrow_right_big: 'arrow_right_big.png', arrow_down: 'dropdown.gif', fill: 'fill.png', @@ -1116,13 +1086,11 @@ editor.init = () => { '#blurLabel': 'blur', '#font_sizeLabel': 'fontsize', - '.flyout_arrow_horiz': 'arrow_right', '.dropdown button, #main_button .dropdown': 'arrow_down', '#palette .palette_item:first, #fill_bg, #stroke_bg': 'no_color' }, resize: { '#logo .svg_icon': 28, - '.flyout_arrow_horiz .svg_icon': 5, '.svg_icon, #layerlist td.layervis .svg_icon': 14, '.dropdown button .svg_icon': 7, '#main_button .dropdown .svg_icon': 9, @@ -1147,19 +1115,6 @@ editor.init = () => { const size = editor.pref('iconsize'); editor.setIconSize(size || ($(window).height() < minHeight ? 's' : 'm')); - // Look for any missing flyout icons from plugins - $('.tools_flyout').each(function () { - const shower = $('#' + this.id + '_show'); - const sel = shower.attr('data-curopt'); - // Check if there's an icon here - if (!shower.children('svg, img').length) { - const clone = $(sel).children().clone(); - if (clone.length) { - clone[0].removeAttribute('style'); // Needed for Opera - shower.append(clone); - } - } - }); $('#svg_container')[0].style.visibility = 'visible'; await editor.runCallbacks(); } @@ -1228,9 +1183,6 @@ editor.init = () => { } }()); - // used to make the flyouts stay on the screen longer the very first time - // const flyoutspeed = 1250; // Currently unused - // let textBeingEntered = false; // Currently unused const origTitle = $('title:first').text(); // Make [1,2,5] array const rIntervals = []; @@ -1494,20 +1446,13 @@ editor.init = () => { * This is a common function used when a tool has been clicked (chosen). * It does several common things: * - 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 module:SVGEditor.toolButtonClick * @param {string|Element} button The DOM element or string selector representing the toolbar button - * @param {boolean} noHiding Whether not to hide any flyouts * @returns {boolean} Whether the button was disabled or not */ - const toolButtonClick = editor.toolButtonClick = function (button, noHiding) { + const toolButtonClick = editor.toolButtonClick = function (button) { if ($(button).hasClass('disabled')) { return false; } - if ($(button).parent().hasClass('tools_flyout')) { return true; } - const fadeFlyouts = 'normal'; - if (!noHiding) { - $('.tools_flyout').fadeOut(fadeFlyouts); - } $('#styleoverrides').text(''); workarea.css('cursor', 'auto'); $('.tool_button_current').removeClass('tool_button_current').addClass('tool_button'); @@ -1518,7 +1463,6 @@ editor.init = () => { * This is a common function used when a tool has been clicked (chosen). * It does several common things: * - 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 updateLeftPanel * @param {string|Element} button The DOM element or string selector representing the toolbar button @@ -1899,18 +1843,6 @@ editor.init = () => { } ); - // Disable flyouts if all inside are disabled - $('.tools_flyout').each(function () { - const shower = $('#' + this.id + '_show'); - let hasEnabled = false; - $(this).children().each(function () { - if (!$(this).hasClass('disabled')) { - hasEnabled = true; - } - }); - shower.toggleClass('disabled', !hasEnabled); - }); - operaRepaint(); }; @@ -2505,167 +2437,6 @@ editor.init = () => { paintBox.stroke.prep(); }; - const flyoutFuncs = {}; - - /** - * - * @returns {void} - */ - const setFlyoutTitles = function () { - $('.tools_flyout').each(function () { - const shower = $('#' + this.id + '_show'); - if (shower.data('isLibrary')) { - return; - } - - const tooltips = $(this).children().map(function () { - return this.title; - }).get(); - shower[0].title = tooltips.join(' / '); - }); - }; - - const allHolders = {}; - /** - * @param {PlainObject} holders Key is a selector - * @returns {void} - */ - const setupFlyouts = function (holders) { - $.each(holders, function (holdSel, btnOpts) { - if (!allHolders[holdSel]) { - allHolders[holdSel] = []; - } - allHolders[holdSel].push(...btnOpts); - - const buttons = $(holdSel).children().not('.tool_button_evt_handled'); - const showSel = holdSel + '_show'; - const shower = $(showSel); - let def = false; - buttons.addClass('tool_button tool_button_evt_handled') - .unbind('click mousedown mouseup') // may not be necessary - .each(function () { - // Get this button's options - const idSel = '#' + this.getAttribute('id'); - const [i, opts] = Object.entries(btnOpts).find(([_, {sel}]) => { - return sel === idSel; - }); - - // Remember the function that goes with this ID - flyoutFuncs[opts.sel] = opts.fn; - - if (opts.isDefault) { def = i; } - - /** - * Clicking the icon in flyout should set this set's icon. - * @param {Event} ev - * @returns {boolean} - */ - const flyoutAction = function (ev) { - let options = opts; - // Find the currently selected tool if comes from keystroke - if (ev.type === 'keydown') { - const flyoutIsSelected = $(options.parent + '_show').hasClass('tool_button_current'); - const currentOperation = $(options.parent + '_show').attr('data-curopt'); - Object.entries(holders[opts.parent]).some(([j, tool]) => { - if (tool.sel !== currentOperation) { - return false; - } - if (!ev.shiftKey || !flyoutIsSelected) { - options = tool; - } else { - // If flyout is selected, allow shift key to iterate through subitems - j = Number.parseInt(j); - // Use `allHolders` to include both extension `includeWith` and toolbarButtons - options = allHolders[opts.parent][j + 1] || - holders[opts.parent][0]; - } - return true; - }); - } - if ($(this).hasClass('disabled')) { return false; } - if (toolButtonClick(showSel)) { - options.fn(); - } - const icon = (options.icon) ? $.getSvgIcon(options.icon, true) : $(options.sel).children().eq(0).clone(); - icon[0].setAttribute('width', shower.width()); - icon[0].setAttribute('height', shower.height()); - shower.children(':not(.flyout_arrow_horiz)').remove(); - shower.append(icon).attr('data-curopt', options.sel); // This sets the current mode - return true; - }; - - $(this).mouseup(flyoutAction); - - if (opts.key) { - $(document).bind('keydown', opts.key[0] + ' shift+' + opts.key[0], flyoutAction); - } - return true; - }); - - if (def) { - shower.attr('data-curopt', btnOpts[def].sel); - } else if (!shower.attr('data-curopt')) { - // Set first as default - shower.attr('data-curopt', btnOpts[0].sel); - } - - let timer; - - // Clicking the "show" icon should set the current mode - shower.mousedown(function (evt) { - if (shower.hasClass('disabled')) { - return false; - } - const holder = $(holdSel); - const pos = $(showSel).position(); - const l = pos.left + 34; - const w = holder.width() * -1; - const time = holder.data('shown_popop') ? 200 : 0; - timer = setTimeout(function () { - // Show corresponding menu - if (!shower.data('isLibrary')) { - holder.css('left', w).show().animate({ - left: l - }, 150); - } else { - holder.css('left', l).show(); - } - holder.data('shown_popop', true); - }, time); - evt.preventDefault(); - return true; - }).mouseup(function (evt) { - clearTimeout(timer); - const opt = $(this).attr('data-curopt'); - // Is library and popped up, so do nothing - if (shower.data('isLibrary') && $(showSel.replace('_show', '')).is(':visible')) { - toolButtonClick(showSel, true); - return; - } - if (toolButtonClick(showSel) && flyoutFuncs[opt]) { - flyoutFuncs[opt](); - } - }); - // $('#tools_rect').mouseleave(function () { $('#tools_rect').fadeOut(); }); - }); - setFlyoutTitles(); - setFlyoutPositions(); - }; - - /** - * @param {string} id - * @param {external:jQuery} child - * @returns {external:jQuery} - */ - const makeFlyoutHolder = function (id, child) { - const div = $('
', { - class: 'tools_flyout', - id - }).appendTo('#svg_editor').append(child); - - return div; - }; - /** * @param {string} elemSel * @param {string} listSel @@ -2890,11 +2661,10 @@ editor.init = () => { } const {svgicons} = ext; - if (ext.buttons) { + if (ext.buttons && !ext.newUI) { const fallbackObj = {}, altsObj = {}, - placementObj = {}, - holders = {}; + placementObj = {}; /** * @typedef {GenericArray} module:SVGEditor.KeyArray @@ -2917,11 +2687,7 @@ editor.init = () => { * @property {string} [list] Points to the "id" of a `context_tools` item of type "button-select" into which the button will be added as a panel list item * @property {Integer} [position] The numeric index for placement; defaults to last position (as of the time of extension addition) if not present. For use with {@link http://api.jquery.com/eq/}. * @property {boolean} [isDefault] Whether or not the button is the default. Used with `list`. - * @property {PlainObject} [includeWith] Object with flyout menu data - * @property {boolean} [includeWith.isDefault] Indicates whether button is default in flyout list or not. - * @property {string} includeWith.button jQuery selector of the existing button to be joined. Example: '#tool_line'. Required if `includeWith` is used. - * @property {"last"|Integer} [includeWith.position] Position of icon in flyout list; will be added to end if not indicated. Integer is for use with {@link http://api.jquery.com/eq/}. - * @property {module:SVGEditor.Key} [key] The key to bind to the button + * @property {module:SVGEditor.Key} [key] The key to bind to the button */ // Add buttons given by extension $.each(ext.buttons, function (i, /** @type {module:SVGEditor.Button} */ btn) { @@ -2972,7 +2738,7 @@ editor.init = () => { parent = '#main_menu ul'; break; } - // let flyoutHolder, showBtn, refData, refBtn; + const button = $((btn.list || btn.type === 'app_menu') ? '
  • ' : '
    ') .attr('id', id) .attr('title', btn.title) @@ -2988,58 +2754,7 @@ editor.init = () => { button.appendTo(parent); } - if (btn.type === 'mode_flyout') { - /* - // Add to flyout menu / make flyout menu - // const opts = btn.includeWith; - // // opts.button, default, position - refBtn = $(button); - - flyoutHolder = refBtn.parent(); - // Create a flyout menu if there isn't one already - let tlsId; - if (!refBtn.parent().hasClass('tools_flyout')) { - // Create flyout placeholder - tlsId = refBtn[0].id.replace('tool_', 'tools_'); - showBtn = refBtn.clone() - .attr('id', tlsId + '_show') - .append($('
    ', {class: 'flyout_arrow_horiz'})); - - refBtn.before(showBtn); - - // Create a flyout div - flyoutHolder = makeFlyoutHolder(tlsId, refBtn); - flyoutHolder.data('isLibrary', true); - showBtn.data('isLibrary', true); - } - // refData = Actions.getButtonData(opts.button); - - placementObj['#' + tlsId + '_show'] = btn.id; - // 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 - holders['#' + flyoutHolder[0].id] = [{ - sel: '#' + id, - fn: btn.events.click, - icon: btn.id, - // key: btn.key, - isDefault: true - }]; // , refData - // - // // {sel:'#tool_rect', fn: clickRect, evt: 'mouseup', key: 4, parent: '#tools_rect', icon: 'rect'} - // - // const pos = ('position' in opts)?opts.position:'last'; - // const len = flyoutHolder.children().length; - // - // // Add at given position or end - // if (!isNaN(pos) && pos >= 0 && pos < len) { - // flyoutHolder.children().eq(pos).before(button); - // } else { - // flyoutHolder.append(button); - // curH.reverse(); - // } - */ - } else if (btn.type === 'app_menu') { + if (btn.type === 'app_menu') { button.append('
    ').append(btn.title); } } else if (btn.list) { @@ -3051,53 +2766,6 @@ editor.init = () => { const svgicon = btn.svgicon || btn.id; 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; - if (!refBtn.parent().hasClass('tools_flyout')) { - // Create flyout placeholder - tlsId = refBtn[0].id.replace('tool_', 'tools_'); - showBtn = refBtn.clone() - .attr('id', tlsId + '_show') - .append($('
    ', {class: 'flyout_arrow_horiz'})); - - refBtn.before(showBtn); - // Create a flyout div - flyoutHolder = makeFlyoutHolder(tlsId, refBtn); - } - refData = Actions.getButtonData(opts.button); - - if (opts.isDefault) { - placementObj['#' + tlsId + '_show'] = btn.id; - } - // 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 - const curH = holders['#' + flyoutHolder[0].id] = [{ - sel: '#' + id, - fn: btn.events.click, - icon: btn.id, - key: btn.key, - isDefault: Boolean(btn.includeWith && btn.includeWith.isDefault) - }, refData]; - - const pos = ('position' in opts) ? opts.position : 'last'; - const len = flyoutHolder.children().length; - - // Add at given position or end - if (!isNaN(pos) && pos >= 0 && pos < len) { - flyoutHolder.children().eq(pos).before(button); - } else { - flyoutHolder.append(button); - curH.reverse(); - } - */ } if (!svgicons) { button.append(icon); @@ -3132,8 +2800,6 @@ editor.init = () => { } }); } - - setupFlyouts(holders); }); $.each(btnSelects, function () { addAltDropDown(this.elem, this.list, this.callback, {seticon: true}); @@ -3160,6 +2826,20 @@ editor.init = () => { }); } } + if (ext.buttons && ext.newUI) { + ext.buttons.forEach((btn) => { + // Set button up according to its type + switch (btn.type) { + case 'mode_flyout': + $id(btn.id).addEventListener('click', () => { + if (updateLeftPanel(btn.id)) { + btn.events.click(); + } + }); + break; + } + }); + } return runCallback(); }; @@ -3560,9 +3240,9 @@ editor.init = () => { onButton = false; }).mousedown(function (evt) { // $('.contextMenu').hide(); - const islib = $(evt.target).closest('div.tools_flyout, .contextMenu').length; + const islib = $(evt.target).closest('.contextMenu').length; if (!islib) { - $('.tools_flyout:visible,.contextMenu').fadeOut(250); + $('.contextMenu').fadeOut(250); } }); @@ -3731,22 +3411,6 @@ editor.init = () => { svgCanvas.alignSelectedElements(letter, 'page'); }, {multiclick: true}); - /* - - When a flyout icon is selected - (if flyout) { - - Change the icon - - Make pressing the button run its stuff - } - - Run its stuff - - When its shortcut key is pressed - - If not current in list, do as above - , else: - - Just run its stuff - - */ - // Unfocus text input when workarea is mousedowned. (function () { let inp; @@ -4617,7 +4281,6 @@ editor.init = () => { workarea[0]['scroll' + (type === 'width' ? 'Left' : 'Top')] -= (curval - val) / 2; winWh[type] = curval; }); - setFlyoutPositions(); }); workarea.scroll(function () { @@ -5205,7 +4868,6 @@ editor.init = () => { * @property {string} [parent] Selector * @property {boolean} [hidekey] Whether to show key value in title * @property {string} [icon] The button ID - * @property {boolean} isDefault For flyout holders */ /** * @@ -5362,7 +5024,6 @@ editor.init = () => { * @returns {void} */ setAll () { - const flyouts = {}; const keyHandler = {}; // will contain the action for each pressed key toolButtons.forEach((opts) => { @@ -5379,23 +5040,6 @@ editor.init = () => { } btn.addEventListener(opts.evt, opts.fn); } - - // Add to parent flyout menu, if able to be displayed - if (opts.parent && $(opts.parent + '_show').length) { - let fH = $(opts.parent); - if (!fH.length) { - fH = makeFlyoutHolder(opts.parent.substr(1)); - } - if (opts.prepend) { - btn.style.margin = 'initial'; - } - fH[opts.prepend ? 'prepend' : 'append'](btn); - - if (!Array.isArray(flyouts[opts.parent])) { - flyouts[opts.parent] = []; - } - flyouts[opts.parent].push(opts); - } } // Bind function to shortcut key @@ -5438,9 +5082,6 @@ editor.init = () => { } }); - // Setup flyouts - setupFlyouts(flyouts); - // Misc additional actions // Make 'return' keypress trigger the change event @@ -5928,9 +5569,6 @@ editor.init = () => { svgCanvas.runExtensions('langChanged', /** @type {module:svgcanvas.SvgCanvas#event:ext_langChanged} */ lang); - // Update flyout tooltips - setFlyoutTitles(); - // Copy title for certain tool elements const elems = { '#stroke_color': '#tool_stroke .icon_label, #tool_stroke .color_block',