fix several ui issues

src/editor/EditorStartup.js

@@ -249,7 +249,7 @@ class EditorStartup {
     });
 
     $id('seg_type').addEventListener('change', (evt) => {
-      this.svgCanvas.setSegType(evt.currentTarget.value);
+      this.svgCanvas.setSegType(evt.detail.value);
     });
 
     const addListenerMulti = (element, eventNames, listener)=> {

src/editor/MainMenu.js

@@ -289,7 +289,7 @@ class MainMenu {
         <se-menu-item id="tool_editor_homepage" label="${i18next.t('tools.editor_homepage')}" src="${imgPath}/logo.svg"></se-menu-item>
     </se-menu>
        `;
-    $id('tools_top').prepend(template.content.cloneNode(true));
+    this.editor.$svgEditor.append(template.content.cloneNode(true));
 
     // register action to main menu entries
     /**

src/editor/components/index.js

@@ -10,3 +10,5 @@ import './seMenuItem.js';
 import './seList.js';
 import './seListItem.js';
 import './seColorPicker.js';
+import './seSelect';
+

src/editor/components/seButton.js

@@ -10,7 +10,7 @@ template.innerHTML = `
   {
     height: 24px;
     width: 24px;
-    margin: 2px 1px 4px;
+    margin: 4px 1px 4px;
     padding: 3px;
     background-color: var(--icon-bg-color);
     cursor: pointer;

src/editor/components/seInput.js

@@ -23,6 +23,7 @@ template.innerHTML = `
   elix-input {
     background-color: var(--input-color);
     border-radius: 3px;
+    height: 24px;
   }
   </style>
   <div>

src/editor/components/seList.js

@@ -11,7 +11,11 @@ elix-dropdown-list:hover {
   background-color: var(--icon-bg-color-hover);
 }
 
-::part(popup-toggle) {
+elix-dropdown-list::part(value) {
+  background-color: var(--main-bg-color);
+}
+
+elix-dropdown-list::part(popup-toggle) {
   display: none;
 }
 ::slotted(*) {

src/editor/components/seSelect.js

@@ -0,0 +1,149 @@
+const template = document.createElement('template');
+template.innerHTML = `
+<style>
+select {
+  margin-top: 8px;
+  background-color: var(--input-color);
+  appearance: none;
+  outline: none;
+  padding: 3px;
+}
+label {
+  margin-left: 2px;
+}
+::slotted(*) {
+  padding:0;
+  width:100%;
+}
+</style>
+  <label>Label</label>
+  <select>
+  </select>
+
+`;
+/**
+ * @class SeList
+ */
+export class SeSelect extends HTMLElement {
+  /**
+    * @function constructor
+    */
+  constructor () {
+    super();
+    // create the shadowDom and insert the template
+    this._shadowRoot = this.attachShadow({ mode: 'open' });
+    this._shadowRoot.append(template.content.cloneNode(true));
+    this.$select = this._shadowRoot.querySelector('select');
+    this.$label = this._shadowRoot.querySelector('label');
+  }
+  /**
+   * @function observedAttributes
+   * @returns {any} observed
+   */
+  static get observedAttributes () {
+    return [ 'label', 'width', 'height', 'options', 'values' ];
+  }
+
+  /**
+   * @function attributeChangedCallback
+   * @param {string} name
+   * @param {string} oldValue
+   * @param {string} newValue
+   * @returns {void}
+   */
+  attributeChangedCallback (name, oldValue, newValue) {
+    let options;
+    if (oldValue === newValue) return;
+    switch (name) {
+    case 'label':
+      this.$label.textContent = newValue;
+      break;
+    case 'height':
+      this.$select.style.height = newValue;
+      break;
+    case 'width':
+      this.$select.style.width = newValue;
+      break;
+    case 'options':
+      options = newValue.split(',');
+      options.forEach((option) => {
+        const optionNode = document.createElement("OPTION");
+        const text = document.createTextNode(option);
+        optionNode.appendChild(text);
+        this.$select.appendChild(optionNode);
+      });
+      break;
+    case 'values':
+      options = newValue.split(' ');
+      options.forEach((option, index) => {
+        this.$select.children[index].setAttribute('value', option);
+      });
+      break;
+    default:
+      // eslint-disable-next-line no-console
+      console.error(`unknown attribute: ${name}`);
+      break;
+    }
+  }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get label () {
+    return this.getAttribute('label');
+  }
+
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set label (value) {
+    this.setAttribute('label', value);
+  }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get width () {
+    return this.getAttribute('width');
+  }
+
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set width (value) {
+    this.setAttribute('width', value);
+  }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get height () {
+    return this.getAttribute('height');
+  }
+
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set height (value) {
+    this.setAttribute('height', value);
+  }
+  /**
+   * @function connectedCallback
+   * @returns {void}
+   */
+  connectedCallback () {
+    const currentObj = this;
+    this.$select.addEventListener('change', () => {
+      const value = this.$select.value;
+      const closeEvent = new CustomEvent('change', { detail: { value } });
+      currentObj.dispatchEvent(closeEvent);
+      currentObj.value = value;
+    });
+  }
+}
+
+// Register
+customElements.define('se-select', SeSelect);

src/editor/components/seSpinInput.js

@@ -14,6 +14,7 @@ template.innerHTML = `
   img {
     position: relative;
     right: -4px;
+    top: 2px;
   }
   span {
     bottom: -0.5em;

src/editor/panels/BottomPanel.js

@@ -186,13 +186,10 @@ class BottomPanel {
         <se-colorpicker id="stroke_color" src="${imgPath}/stroke.svg" title="${i18next.t('properties.stroke_color')}" type="stroke">
         </se-colorpicker>
         <se-spin-input id="stroke_width" min=0 max=99 step=1 title="${i18next.t('properties.stroke_width')}" label=""></se-spin-input>
-        <se-list id="stroke_style" title="${i18next.t('properties.stroke_style')}" label="" width="22px" height="22px">
+        <se-select id="stroke_style" title="${i18next.t('properties.stroke_style')}" label="" width="22px" height="22px"
-          <se-list-item value="none">&#8212;</se-list-item>
+          options="&#8212;,...,- -,- .,- .."
-          <se-list-item value="2,2">...</se-list-item>
+          values="none 2,2 5,5 5,2,2,2 5,2,2,2,2,2">     
-          <se-list-item value="5,5">- -</se-list-item>
+        </se-select>
-          <se-list-item value="5,2,2,2">- .</se-list-item>
-          <se-list-item value="5,2,2,2,2,2">- ..</se-list-item>
-        </se-list>
         <se-list id="stroke_linejoin" title="${i18next.t('properties.linejoin_miter')}" label="" width="22px" height="22px">
           <se-list-item id="linejoin_miter" value="miter"><img title="${i18next.t('properties.linejoin_miter')}" src="${imgPath}/linejoin_miter.svg"
               height="22px"></img></se-list-item>

src/editor/panels/TopPanel.js

@@ -920,12 +920,13 @@ class TopPanel {
           <se-button id="tool_align_top" title="${i18next.t('tools.align_top')}" src="${imgPath}/align_top.svg"></se-button>
           <se-button id="tool_align_middle" title="${i18next.t('tools.align_middle')}" src="${imgPath}/align_middle.svg"></se-button>
           <se-button id="tool_align_bottom" title="${i18next.t('tools.align_bottom')}" src="${imgPath}/align_bottom.svg"></se-button>
-          <se-list id="tool_align_relative" label="relative to:">
+          <se-select id="tool_align_relative" label="relative to:" 
-            <se-list-item id="selected_objects" value="selected">${i18next.t('tools.selected_objects')}</se-list-item>
+            options="${i18next.t('tools.selected_objects')},
-            <se-list-item id="largest_object" value="largest">${i18next.t('tools.largest_object')}</se-list-item>
+                ${i18next.t('tools.largest_object')},
-            <se-list-item id="smallest_object" value="smallest">${i18next.t('tools.smallest_object')}</se-list-item>
+                ${i18next.t('tools.smallest_object')},
-            <se-list-item id="page" value="page">${i18next.t('tools.page')}</se-list-item>
+                ${i18next.t('tools.page')}"
-          </se-list>
+            values="selected largest smallest page"></se-list-item>
+          </se-select>
         </div> <!-- multiselected_panel -->
         <div class="rect_panel">
             <se-spin-input id="rect_width" data-attr="width" size="4" label="w" title="${i18next.t('properties.rect_width')}">
@@ -976,16 +977,17 @@ class TopPanel {
         <div class="text_panel">
           <se-button id="tool_bold" title="${i18next.t('properties.bold')}" src="${imgPath}/bold.svg" shortcut="B"></se-button>
           <se-button id="tool_italic" title="${i18next.t('properties.italic')}" src="${imgPath}/italic.svg" shortcut="I"></se-button>
-          <se-list id="tool_font_family" label="Font:">
+          <se-select id="tool_font_family" label="Font:"
-            <se-list-item value="Serif" style="font-family:serif;">${i18next.t('properties.serif')}</se-list-item>
+            options="${i18next.t('properties.serif')},
-            <se-list-item value="Sans-serif" style="font-family:sans-serif;">${i18next.t('properties.sans_serif')}</se-list-item>
+                     ${i18next.t('properties.sans_serif')},
-            <se-list-item value="Cursive" style="font-family:cursive;">${i18next.t('properties.cursive')}</se-list-item>
+                     ${i18next.t('properties.cursive')},
-            <se-list-item value="Fantasy" style="font-family:fantasy;">${i18next.t('properties.fantasy')}</se-list-item>
+                     ${i18next.t('properties.fantasy')},
-            <se-list-item value="Monospace" style="font-family:monospace;">${i18next.t('properties.monospace')}</se-list-item>
+                     ${i18next.t('properties.monospace')},
-            <se-list-item value="Courier" style="font-family:courier;">${i18next.t('properties.courier')} </se-list-item>
+                     ${i18next.t('properties.courier')},
-            <se-list-item value="Helvetica" style="font-family:helvetica;">${i18next.t('properties.helvetica')}</se-list-item>
+                     ${i18next.t('properties.helvetica')},
-            <se-list-item value="Times" style="font-family:times;">${i18next.t('properties.times')}</se-list-item>
+                     ${i18next.t('properties.times')}           "
-          </se-list>
+          >
+          </select>
           <se-spin-input size="2" id="font_size" min=1 max=1000 step=1 title="${i18next.t('properties.font_size')}"
             src="${imgPath}/fontsize.svg"></se-spin-input>
         </div>
@@ -1025,10 +1027,11 @@ class TopPanel {
           </se-spin-input>
           <se-spin-input id="path_node_y" data-attr="y" size="4" title="${i18next.t('properties.node_y')}" label="y:">
           </se-spin-input>
-          <select id="seg_type" title="${i18next.t('tools.seg_type')}">
+          <se-select id="seg_type" title="${i18next.t('tools.seg_type')}" label="" 
-            <option id="straight_segments" selected="selected" value="4">${i18next.t('properties.straight_segments')}</option>
+            options="${i18next.t('properties.straight_segments')}, ${i18next.t('properties.curve_segments')}"
-            <option id="curve_segments" value="6">${i18next.t('properties.curve_segments')}</option>
+            values="4 6"
-          </select>
+          >
+          </se-select>
           <se-button id="tool_node_clone" title="${i18next.t('tools.node_clone')}" src="${imgPath}/tool_node_clone.svg"></se-button>
           <se-button id="tool_node_delete" title="${i18next.t('tools.node_delete')}" src="${imgPath}/tool_node_delete.svg"></se-button>
           <se-button id="tool_openclose_path" title="${i18next.t('tools.openclose_path')}" src="${imgPath}/tool_openclose_path.svg">

src/editor/svgedit.css

@@ -18,12 +18,12 @@
 .svg_editor {
   display: grid;
   grid-template-rows: auto 15px 1fr 40px;
-  grid-template-columns: 34px 15px 1fr 15px;
+  grid-template-columns: 34px 15px 50px 1fr 15px;
   grid-template-areas: 
-    "top   top    top    top"
+    "main main   main top top"
-    "left  corner rulerX side"
+    "left corner rulerX rulerX side"
-    "left  rulerY workarea side"
+    "left rulerY workarea workarea side"
-    "left  bottom bottom bottom";
+    "left bottom bottom bottom bottom";
   font-size: 8pt;
   background: var(--main-bg-color);
   font-family: Verdana, Helvetica, Arial;
@@ -33,12 +33,7 @@
   height: 100%;
 }
 
-.svg_editor.open {
-  grid-template-columns: 34px 15px 1fr 150px;
-}
-
 /* on smaller screen, allow 2 lines for the toolbar */
-
 @media screen and (max-width:1250px) {
   .svg_editor {
     grid-template-rows: minmax(80px, auto) 15px 1fr 40px;
@@ -186,6 +181,7 @@ hr {
 —————————————————————————————*/
 
 #main_button {
+  grid-area: main;
   color: #fff;
   border-radius: 3px;
   padding-block: 2px;
@@ -299,8 +295,7 @@ hr {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  /* leave space for the main menu */
+  align-items: flex-start;
-  position: relative;
   background-color: var(--main-bg-color);
 }
 
@@ -325,11 +320,12 @@ hr {
   width: 3px;
 }
 
-#tools_bottom se-list {
+#tools_bottom se-list, #tools_bottom se-select {
   margin-bottom: 8px;
 }
 
 
+
 /*—————————————————————————————*/
 
 #tools_left {

src/svgcanvas/path-actions.js

@@ -1179,7 +1179,7 @@ export const pathActionsMethod = (function () {
     * @returns {void}
     */
     setSegType (v) {
-      path.setSegType(v);
+      path?.setSegType(v);
     },
     /**
     * @param {string} attr