diff --git a/src/editor/EditorStartup.js b/src/editor/EditorStartup.js index eef3c0fc..7ff44885 100644 --- a/src/editor/EditorStartup.js +++ b/src/editor/EditorStartup.js @@ -4,7 +4,7 @@ import {convertUnit} from '../common/units.js'; import { hasCustomHandler, getCustomHandler, injectExtendedContextMenuItemsIntoDom } from './contextmenu.js'; - +import editorTemplate from './templates/editorTemplate.js'; import SvgCanvas from '../svgcanvas/svgcanvas.js'; import LayersPanel from './panels/LayersPanel.js'; import LeftPanelHandlers from './panels/LeftPanelHandlers.js'; @@ -61,8 +61,12 @@ class EditorStartup { * @returns {void} */ async init () { + // allow to prepare the dom without display + $id('svg_editor').style.visibility = 'hidden'; try { - // Image props dialog added to DOM + // add editor components to the DOM + document.body.append(editorTemplate.content.cloneNode(true)); + // Image props dialog added to DOM const newSeImgPropDialog = document.createElement('se-img-prop-dialog'); newSeImgPropDialog.setAttribute('id', 'se-img-prop'); document.body.append(newSeImgPropDialog); @@ -725,7 +729,7 @@ class EditorStartup { const {langParam, langData} = await this.putLocale(this.configObj.pref('lang'), this.goodLangs); await this.setLang(langParam, langData); - $id('svg_container').style.visibility = 'visible'; + $id('svg_editor').style.visibility = 'visible'; try { // load standard extensions diff --git a/src/editor/Rulers.js b/src/editor/Rulers.js index 2bc1e4ad..bae0a3e0 100644 --- a/src/editor/Rulers.js +++ b/src/editor/Rulers.js @@ -1,6 +1,6 @@ /* globals $ */ import {getTypeMap} from '../common/units.js'; - +import rulersTemplate from './templates/rulersTemplate.js'; /** * */ @@ -18,6 +18,8 @@ class Rulers { } this.svgCanvas = editor.svgCanvas; this.editor = editor; + // add rulers component to the DOM + document.body.append(rulersTemplate.content.cloneNode(true)); } /** * @type {Module} diff --git a/src/editor/components/seFlyingButton.js b/src/editor/components/seFlyingButton.js index 2b4cd7f1..a27dc564 100644 --- a/src/editor/components/seFlyingButton.js +++ b/src/editor/components/seFlyingButton.js @@ -105,7 +105,7 @@ export class FlyingButton extends HTMLElement { * @returns {any} observed */ static get observedAttributes () { - return ['title', 'pressed', 'disabled']; + return ['title', 'pressed', 'disabled', 'opened']; } /** * @function attributeChangedCallback @@ -130,6 +130,13 @@ export class FlyingButton extends HTMLElement { this.$overall.classList.remove('pressed'); } break; + case 'opened': + if (newValue) { + this.$menu.classList.add('open'); + } else { + this.$menu.classList.remove('open'); + } + break; case 'disabled': if (newValue) { this.$div.classList.add('disabled'); @@ -176,6 +183,28 @@ export class FlyingButton extends HTMLElement { this.setAttribute('pressed', 'true'); } else { this.removeAttribute('pressed', ''); + // close also the menu if open + this.removeAttribute('opened'); + } + } + /** + * @function get + * @returns {any} + */ + get opened () { + return this.hasAttribute('opened'); + } + + /** + * @function set + * @returns {void} + */ + set opened (value) { + // boolean value => existence = true + if (value) { + this.setAttribute('opened', 'opened'); + } else { + this.removeAttribute('opened'); } } /** @@ -212,7 +241,7 @@ export class FlyingButton extends HTMLElement { switch (ev.target.nodeName) { case 'SE-FLYINGBUTTON': if (this.pressed) { - this.$menu.classList.toggle('open'); + this.setAttribute('opened', 'opened'); } else { // launch current action this.activeSlot.click(); @@ -229,7 +258,11 @@ export class FlyingButton extends HTMLElement { break; case 'DIV': // this is a click on the handle so let's open/close the menu. - this.$menu.classList.toggle('open'); + if (this.opened) { + this.removeAttribute('opened'); + } else { + this.setAttribute('opened', 'opened'); + } break; default: // eslint-disable-next-line no-console diff --git a/src/editor/components/seSpinInput.js b/src/editor/components/seSpinInput.js index 1782865c..267fe145 100644 --- a/src/editor/components/seSpinInput.js +++ b/src/editor/components/seSpinInput.js @@ -6,7 +6,7 @@ template.innerHTML = ` + +
+
+
+
+`; + +export default editorTemplate; diff --git a/src/editor/templates/rulersTemplate.js b/src/editor/templates/rulersTemplate.js new file mode 100644 index 00000000..9abfd772 --- /dev/null +++ b/src/editor/templates/rulersTemplate.js @@ -0,0 +1,85 @@ +const rulersTemplate = document.createElement('template'); + +rulersTemplate.innerHTML = ` + +
+
+
+
+ +
+
+
+
+ +
+
+
+`; + +export default rulersTemplate;