diff --git a/src/editor/EditorStartup.js b/src/editor/EditorStartup.js index 99f9c471..abae6c0a 100644 --- a/src/editor/EditorStartup.js +++ b/src/editor/EditorStartup.js @@ -74,7 +74,7 @@ class EditorStartup { this.$container.append(editorTemplate.content.cloneNode(true)); this.$svgEditor = $qq('.svg_editor'); // allow to prepare the dom without display - // JFH this.$svgEditor.style.visibility = 'hidden'; + this.$svgEditor.style.visibility = 'hidden'; this.workarea = $id('workarea'); // Image props dialog added to DOM const newSeImgPropDialog = document.createElement('se-img-prop-dialog'); @@ -413,7 +413,6 @@ class EditorStartup { }); this.workarea.addEventListener('scroll', () => { - // TODO: jQuery's scrollLeft/Top() wouldn't require a null check this.rulers.manageScroll(); }); @@ -534,9 +533,9 @@ class EditorStartup { } if (this.configObj.curConfig.showRulers) { - $id('rulers').style.removeProperty('display'); + this.rulers.display(true); } else { - $id('rulers').style.display = 'none'; + this.rulers.display(false); } if (this.configObj.curConfig.showRulers) { diff --git a/src/editor/MainMenu.js b/src/editor/MainMenu.js index 17db34cd..f6b8355f 100644 --- a/src/editor/MainMenu.js +++ b/src/editor/MainMenu.js @@ -306,23 +306,17 @@ class MainMenu { // eslint-disable-next-line no-unsanitized/property template.innerHTML = ` - - - - - - + + + - - - - - - + + + `; - this.editor.$svgEditor.append(template.content.cloneNode(true)); + $id('tools_top').prepend(template.content.cloneNode(true)); // register action to main menu entries /** diff --git a/src/editor/Rulers.js b/src/editor/Rulers.js index e1a49c23..0971e89c 100644 --- a/src/editor/Rulers.js +++ b/src/editor/Rulers.js @@ -18,16 +18,23 @@ class Rulers { this.svgCanvas = editor.svgCanvas; this.editor = editor; // add rulers component to the DOM - this.editor.workarea.append(rulersTemplate.content.cloneNode(true)); + this.editor.$svgEditor.append(rulersTemplate.content.cloneNode(true)); + const { $id } = this.svgCanvas; + this.rulerX = $id('ruler_x'); + this.rulerY = $id('ruler_y'); + this.rulerCorner = $id('ruler_corner'); + } + display (on) { + this.rulerX.style.display = on ? 'block' : 'none'; + this.rulerY.style.display = on ? 'block': 'none'; + this.rulerCorner.style.display = on ? 'block': 'none'; } /** * @type {Module} */ manageScroll () { - const rulerX = document.getElementById('ruler_x'); - const rulerY = document.getElementById('ruler_y'); - if (rulerX) rulerX.scrollLeft = this.editor.workarea.scrollLeft; - if (rulerY) rulerY.scrollTop = this.editor.workarea.scrollTop; + if (this.rulerX) this.rulerX.scrollLeft = this.editor.workarea.scrollLeft; + if (this.rulerY) this.rulerY.scrollTop = this.editor.workarea.scrollTop; } /** diff --git a/src/editor/extensions/ext-connector/ext-connector.js b/src/editor/extensions/ext-connector/ext-connector.js index 40c2205a..e06ea039 100644 --- a/src/editor/extensions/ext-connector/ext-connector.js +++ b/src/editor/extensions/ext-connector/ext-connector.js @@ -355,8 +355,6 @@ export default { }; return { - /** @todo JFH special flag */ - newUI: true, name: svgEditor.i18next.t(`${name}:name`), callback() { const btitle = svgEditor.i18next.t(`${name}:langListTitle`); diff --git a/src/editor/svgedit.css b/src/editor/svgedit.css index e8c9dd15..abd31ebc 100644 --- a/src/editor/svgedit.css +++ b/src/editor/svgedit.css @@ -16,9 +16,13 @@ .svg_editor { display: grid; - grid-template-rows: 40px 1fr 40px; - grid-template-columns: 34px 1fr 10px; - grid-template-areas: "top top top" "left workarea side" "left bottom bottom"; + grid-template-rows: 40px 15px 1fr 40px; + grid-template-columns: 34px 15px 1fr 10px; + grid-template-areas: + "top top top top" + "left corner rulerX side" + "left rulerY workarea side" + "left bottom bottom bottom"; font-size: 8pt; background: var(--main-bg-color); font-family: Verdana, Helvetica, Arial; @@ -195,16 +199,11 @@ hr { —————————————————————————————*/ #main_button { - grid-area: top; color: #fff; border-radius: 3px; padding-block: 2px; padding-left: 3px; -} - -#main_button:hover { - background-color: var(--icon-bg-color-hover); - color: #fff; + height: 34px; } #main_icon { @@ -314,7 +313,6 @@ hr { flex-direction: row; /* leave space for the main menu */ position: relative; - left: 95px; } #tools_top > *{ display:flex; @@ -381,8 +379,6 @@ hr { vertical-align: 12px; } -/*TODO: Adjust position of rulers are not visible*/ - #cur_context_panel { position: absolute; top: 57px; diff --git a/src/editor/templates/rulersTemplate.js b/src/editor/templates/rulersTemplate.js index b28b6b42..497c7b9b 100644 --- a/src/editor/templates/rulersTemplate.js +++ b/src/editor/templates/rulersTemplate.js @@ -5,59 +5,40 @@ rulersTemplate.innerHTML = ` /* Rulers ——————————————————————————————————————*/ -#rulers { - position: relative; - top: -14px; -} -#rulers > div { + +#ruler_corner { background: var(--ruler-color); + grid-area: corner; + width: 15px; + height: 15px; z-index: 1; overflow: hidden; } -#ruler_corner { - top: 41px; - left: 41px; - width: 15px; - height: 15px; -} - #ruler_x { + background: var(--ruler-color); + grid-area: rulerX; height: 15px; - top: 41px; - left: 56px; - right: 30px; border-bottom: 1px solid; border-left: 1px solid #777; + z-index: 1; + overflow: hidden; } #ruler_y { + background: var(--ruler-color); + grid-area: rulerY; width: 15px; - top: 55px; - left: 41px; - bottom: 41px; border-right: 1px solid; border-top: 1px solid #777; -} - -#ruler_x canvas:first-child { - margin-left: -16px; + z-index: 1; + overflow: hidden; } #ruler_x canvas { float: left; } - -#ruler_y canvas { - margin-top: -16px; -} - -#ruler_x > div, -#ruler_y > div { - overflow: hidden; -} -
@@ -69,7 +50,6 @@ rulersTemplate.innerHTML = `
-
`; export default rulersTemplate; diff --git a/src/svgcanvas/svgcanvas.js b/src/svgcanvas/svgcanvas.js index 0703c133..8c442de9 100644 --- a/src/svgcanvas/svgcanvas.js +++ b/src/svgcanvas/svgcanvas.js @@ -224,7 +224,6 @@ class SvgCanvas { // "document" element associated with the container (same as window.document using default svg-editor.js) // NOTE: This is not actually a SVG document, but an HTML document. - // JFH const svgdoc = container.ownerDocument; const svgdoc = window.document; // This is a container for the document being edited, not the document itself.