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.