extend css grid to rulers

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) {

src/editor/MainMenu.js

@@ -306,23 +306,17 @@ class MainMenu {
     // eslint-disable-next-line no-unsanitized/property
     template.innerHTML = `
     <se-menu id="main_button" label="SVG-Edit" src="./images/logo.svg" alt="logo">
-        <se-menu-item id="tool_clear" label="${i18next.t('tools.new_doc')}" shortcut="N" src="./images/new.svg">
+        <se-menu-item id="tool_clear" label="${i18next.t('tools.new_doc')}" shortcut="N" src="./images/new.svg"></se-menu-item>
-        </se-menu-item>
+        <se-menu-item id="tool_open" label="${i18next.t('tools.open_doc')}" src="./images/open.svg"></se-menu-item>
-        <se-menu-item id="tool_open" label="${i18next.t('tools.open_doc')}" src="./images/open.svg">
+        <se-menu-item id="tool_save" label="${i18next.t('tools.save_doc')}" shortcut="S" src="./images/saveImg.svg"></se-menu-item>
-        </se-menu-item>
-        <se-menu-item id="tool_save" label="${i18next.t('tools.save_doc')}" shortcut="S" src="./images/saveImg.svg">
-        </se-menu-item>
         <se-menu-item id="tool_import" label="${i18next.t('tools.import_doc')}" src="./images/importImg.svg"></se-menu-item>
         <se-menu-item id="tool_export" label="${i18next.t('tools.export_img')}" src="./images/export.svg"></se-menu-item>
-        <se-menu-item id="tool_docprops" label="${i18next.t('tools.docprops')}" shortcut="D" src="./images/docprop.svg">
+        <se-menu-item id="tool_docprops" label="${i18next.t('tools.docprops')}" shortcut="D" src="./images/docprop.svg"></se-menu-item>
-        </se-menu-item>
+        <se-menu-item id="tool_editor_prefs" label="${i18next.t('config.editor_prefs')}" src="./images/editPref.svg"></se-menu-item>
-        <se-menu-item id="tool_editor_prefs" label="${i18next.t('config.editor_prefs')}" src="./images/editPref.svg">
+        <se-menu-item id="tool_editor_homepage" label="${i18next.t('tools.editor_homepage')}" src="./images/logo.svg"></se-menu-item>
-        </se-menu-item>
-        <se-menu-item id="tool_editor_homepage" label="${i18next.t('tools.editor_homepage')}" src="./images/logo.svg">
-        </se-menu-item>
     </se-menu>
        `;
-    this.editor.$svgEditor.append(template.content.cloneNode(true));
+    $id('tools_top').prepend(template.content.cloneNode(true));
 
     // register action to main menu entries
     /**

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');
+    if (this.rulerX) this.rulerX.scrollLeft = this.editor.workarea.scrollLeft;
-    const rulerY = document.getElementById('ruler_y');
+    if (this.rulerY) this.rulerY.scrollTop = this.editor.workarea.scrollTop;
-    if (rulerX) rulerX.scrollLeft = this.editor.workarea.scrollLeft;
-    if (rulerY) rulerY.scrollTop = this.editor.workarea.scrollTop;
   }
 
   /**

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`);

src/editor/svgedit.css

@@ -16,9 +16,13 @@
 
 .svg_editor {
   display: grid;
-  grid-template-rows: 40px 1fr 40px;
+  grid-template-rows: 40px 15px 1fr 40px;
-  grid-template-columns: 34px 1fr 10px;
+  grid-template-columns: 34px 15px 1fr 10px;
-  grid-template-areas: "top top top" "left  workarea side" "left  bottom bottom";
+  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;
-}
+  height: 34px;
-
-#main_button:hover {
-  background-color: var(--icon-bg-color-hover);
-  color: #fff;
 }
 
 #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;

src/editor/templates/rulersTemplate.js

@@ -5,59 +5,40 @@ rulersTemplate.innerHTML = `
  
   /* Rulers
 ——————————————————————————————————————*/
-#rulers {
+
-  position: relative;
+#ruler_corner {
-  top: -14px;
-}
-#rulers > div {
   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;
-}
+  z-index: 1;
-
+  overflow: hidden;
-#ruler_x canvas:first-child {
-  margin-left: -16px;
 }
 
 #ruler_x canvas {
   float: left;
 }
-
-#ruler_y canvas {
-  margin-top: -16px;
-}
-
-#ruler_x > div,
-#ruler_y > div {
-  overflow: hidden;
-}
   </style>
-  <div id="rulers">
     <div id="ruler_corner"></div>
     <div id="ruler_x">
       <div>
@@ -69,7 +50,6 @@ rulersTemplate.innerHTML = `
         <canvas width="15"></canvas>
       </div>
     </div>
-  </div>
 `;
 
 export default rulersTemplate;

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.