Added object list to layers panel (#466)

Co-authored-by: Timo Dittmann <timo.dittmann@kaufland.com>

src/editor/images/svg_edit_icons.svg

@@ -961,6 +961,12 @@
  </svg>
 </g>
 
+<g id="object_select">
+  <svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <ellipse cx="12" cy="11.9875" fill="#000000" fill-opacity="0" id="svg_2" rx="9.33333" ry="9.33333" stroke="#000000" stroke-width="3"/>
+  </svg>
+</g>
+
 <g id="no_color">
   <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
     <line fill="none" stroke="#d40000" id="svg_90" y2="24" x2="24" y1="0" x1="0"/>

src/editor/index.html

@@ -65,6 +65,16 @@
               <td class="layername">Layer 1</td>
             </tr>
           </table>
+
+          <h3>Objects</h3>
+          <table id="objectlist">
+            <tr class="object">
+              <td class="objectvis"></td>
+              <td class="objectname">Object 1</td>
+              <td class="objectselect"></td>
+            </tr>
+          </table>
+
           <span id="selLayerLabel">Move elements to:</span>
           <select id="selLayerNames" title="Move selected elements to a different layer" disabled="disabled">
             <option selected="selected" value="layer1">Layer 1</option>

src/editor/svgedit.css

@@ -273,7 +273,8 @@ select {
   cursor: pointer;
 }
 
-#layerlist {
+#layerlist,
+#objectlist {
   margin: 1px;
   padding: 0;
   width: 127px;
@@ -282,45 +283,63 @@ select {
   background-color: #FFFFFF;
 }
 
-#layerlist tr.layer {
+#layerlist tr.layer,
+#objectlist tr.object {
   background-color: #FFFFFF;
   margin: 0;
   padding: 0;
 }
 
-#layerlist tr.layersel {
+#layerlist tr.layersel,
+#objectlist tr.objectsel {
   border: 1px solid #808080;
   background-color: #CCCCCC;
 }
 
-#layerlist td.layervis {
+#layerlist td.layervis,
+#objectlist td.objectvis,
+#objectlist td.objectselect {
   width: 22px;
   cursor: pointer;
 }
 
-#layerlist td.layerinvis {
+#objectlist td.objectselect {
+    text-align: center;
+}
+
+#layerlist td.layerinvis,
+#objectlist td.objectinvis {
   background-image: none;
   cursor: pointer;
 }
 
-#layerlist td.layervis * {
+#layerlist td.layervis *,
+#objectlist td.objectvis * {
   display: block;
 }
 
-#layerlist td.layerinvis * {
+#layerlist td.layerinvis *,
+#objectlist td.objectinvis * {
   display: none;
 }
 
-#layerlist td.layername {
+#layerlist td.layername,
+#objectlist td.objectname {
   cursor: pointer;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  max-width: 1px;
 }
 
-#layerlist td.layername:hover {
+#layerlist td.layername:hover,
+#objectlist td.objectname:hover {
   color: blue;
   font-style: italic;
 }
 
-#layerlist tr.layersel td.layername {
+#layerlist tr.layersel td.layername,
+#objectlist tr.objectsel td.objectname {
   font-weight: bold;
 }
 

src/editor/svgedit.js

@@ -1184,6 +1184,8 @@ editor.init = () => {
         '#layer_down': 'go_down',
         '#layer_moreopts': 'context_menu',
         '#layerlist td.layervis': 'eye',
+        '#objectlist td.objectvis': 'eye',
+        '#objectlist td.objectselect': 'object_select',
 
         '#tool_source_save,#tool_docprops_save,#tool_prefs_save': 'ok',
         '#tool_source_cancel,#tool_docprops_cancel,#tool_prefs_cancel': 'cancel',
@@ -1207,7 +1209,7 @@ editor.init = () => {
       resize: {
         '#logo .svg_icon': 28,
         '.flyout_arrow_horiz .svg_icon': 5,
-        '.layer_button .svg_icon, #layerlist td.layervis .svg_icon': 14,
+        '.layer_button .svg_icon, #layerlist td.layervis .svg_icon, #objectlist .svg_icon': 14,
         '.dropdown button .svg_icon': 7,
         '#main_button .dropdown .svg_icon': 9,
         '.palette_item:first .svg_icon': 15,
@@ -1405,6 +1407,7 @@ editor.init = () => {
         $('#layerlist tr.layer').removeClass('layersel');
         $(this.parentNode).addClass('layersel');
         svgCanvas.setCurrentLayer(this.textContent);
+        populateObjects();
         evt.preventDefault();
       })
       .mouseover(function () {
@@ -1429,6 +1432,66 @@ editor.init = () => {
     }
   };
 
+  const populateObjects = function () {
+    const objectlist = $('#objectlist tbody').empty();
+    const eyeIcon = $.getSvgIcon('eye');
+    const selectIcon = $.getSvgIcon('object_select');
+    const selectedElementId = selectedElement ? selectedElement.id : null;
+
+    const drawing = svgCanvas.getCurrentDrawing();
+    const currentElements = drawing.getCurrentLayerChildren();
+    for (const currentElement of currentElements) {
+      const elementId = currentElement.id;
+
+      const objectTr = $('<tr class="object">').toggleClass('objectsel', elementId === selectedElementId);
+      const objectVis = $('<td class="objectvis">').toggleClass('objectinvis', !drawing.isLayerChildrenVisible(elementId));
+      const objectName = $('<td class="objectname" title="' + elementId + '">' + elementId + '</td>');
+      const objectSelect = $('<td class="objectselect">');
+      objectlist.append(objectTr.append(objectVis, objectName, objectSelect));
+    }
+
+    if (eyeIcon !== undefined) {
+      const copy = eyeIcon.clone();
+      $('td.objectvis', objectlist).append(copy);
+      $.resizeSvgIcons({'td.objectvis .svg_icon': 14});
+    }
+    if (selectIcon !== undefined) {
+      const copy = selectIcon.clone();
+      $('td.objectselect', objectlist).append(copy);
+      $.resizeSvgIcons({'td.objectselect .svg_icon': 8});
+    }
+
+    // Change visibility of object
+    $('#objectlist td.objectvis').click(function () {
+      const row = $(this.parentNode).prevAll().length;
+      const id = $('#objectlist tr.object:eq(' + row + ') td.objectname').text();
+      const vis = $(this).hasClass('objectinvis');
+      drawing.setLayerChildrenVisible(id, vis);
+      $(this).toggleClass('objectinvis');
+      if (!vis) svgCanvas.clearSelection();
+    });
+
+    // Handle selection of object
+    $('#objectlist td.objectselect').click(function () {
+      $('#objectlist tr.object').removeClass('objectsel');
+      const row = $(this.parentNode).prevAll().length;
+      const vis = $('#objectlist tr.object:eq(' + row + ') td.objectvis').hasClass('objectinvis');
+
+      if (!vis) {
+        const id = $('#objectlist tr.object:eq(' + row + ') td.objectname').text();
+        svgCanvas.clearSelection();
+        svgCanvas.addToSelection([$('[id="' + id + '"]')[0]], true);
+        $(this).parent().toggleClass('objectsel');
+      }
+    });
+
+    // if there were too few rows, let's add a few to make it not so lonely
+    let num = 5 - $('#objectlist tr.object').size();
+    while (num-- > 0) {
+      objectlist.append('<tr><td style="color:white">_</td><td/><td/></tr>');
+    }
+  };
+
   let editingsource = false;
   let origSource = '';
 
@@ -2386,6 +2449,7 @@ editor.init = () => {
     // Deal with pathedit mode
     togglePathEditMode(isNode, elems);
     updateContextPanel();
+    populateObjects();
     svgCanvas.runExtensions('selectedChanged', /** @type {module:svgcanvas.SvgCanvas#event:ext_selectedChanged} */ {
       elems,
       selectedElement,
@@ -5281,6 +5345,7 @@ editor.init = () => {
   });
 
   populateLayers();
+  populateObjects();
 
   // function changeResolution (x,y) {
   //   const {zoom} = svgCanvas.getResolution();