Add resizable column border

Fixes #255

Author: qu1ck

InteractiveHtmlBom/core/ibom.py

@@ -26,7 +26,7 @@ def __init__(self, cli=False):
         ch = logging.StreamHandler(sys.stdout)
         ch.setLevel(logging.INFO)
         formatter = logging.Formatter(
-                "%(asctime)-15s %(levelname)s %(message)s")
+            "%(asctime)-15s %(levelname)s %(message)s")
         ch.setFormatter(formatter)
         self.logger.addHandler(ch)
 
@@ -237,7 +237,7 @@ def get_file_content(file_name):
     else:
         bom_file_dir = os.path.join(pcb_file_dir, config.bom_dest_dir)
     bom_file_name = process_substitutions(
-            config.bom_name_format, pcb_file_name, pcbdata['metadata'])
+        config.bom_name_format, pcb_file_name, pcbdata['metadata'])
     bom_file_name = os.path.join(bom_file_dir, bom_file_name)
     bom_file_dir = os.path.dirname(bom_file_name)
     if not os.path.isdir(bom_file_dir):
@@ -257,7 +257,7 @@ def get_file_content(file_name):
     html = html.replace('///CONFIG///', config_js)
     html = html.replace('///UTILJS///', get_file_content('util.js'))
     html = html.replace('///RENDERJS///', get_file_content('render.js'))
-    html = html.replace('///TABLEDRAG///', get_file_content('table-drag.js'))
+    html = html.replace('///TABLEUTILJS///', get_file_content('table-util.js'))
     html = html.replace('///IBOMJS///', get_file_content('ibom.js'))
     html = html.replace('///USERJS///', get_file_content('user.js'))
     html = html.replace('///USERHEADER///',
@@ -311,7 +311,7 @@ def save_config(dialog_panel):
     try:
         config.netlist_initial_directory = os.path.dirname(parser.file_name)
         extra_data_file = parser.latest_extra_data(
-                extra_dirs=[config.bom_dest_dir])
+            extra_dirs=[config.bom_dest_dir])
         if extra_data_file is not None:
             dlg.set_extra_data_path(extra_data_file)
         config.transfer_to_dialog(dlg.panel)

InteractiveHtmlBom/web/ibom.css

@@ -767,3 +767,27 @@ a {
 .dark .placeholder {
   filter: invert(1);
 }
+
+.column-spacer {
+  top: 0;
+  left: 0;
+  width: calc(100% - 4px);
+  position: absolute;
+  cursor: pointer;
+  user-select: none;
+  height: 100%;
+}
+
+.column-width-handle {
+  top: 0;
+  right: 0;
+  width: 4px;
+  position: absolute;
+  cursor: col-resize;
+  user-select: none;
+  height: 100%;
+}
+
+.column-width-handle:hover {
+  background-color: #4f99bd;
+}

InteractiveHtmlBom/web/ibom.html

@@ -39,7 +39,7 @@
 ///////////////////////////////////////////////
 
 ///////////////////////////////////////////////
-///TABLEDRAG///
+///TABLEUTILJS///
 ///////////////////////////////////////////////
 
 ///////////////////////////////////////////////

InteractiveHtmlBom/web/ibom.js

@@ -196,7 +196,7 @@ function createCheckboxChangeHandler(checkbox, references, row) {
       }
       if (markWhenChecked) {
         row.classList.add("checked");
-        for(var ref of references) {
+        for (var ref of references) {
           markedFootprints.add(ref[1]);
         }
         drawHighlights();
@@ -209,7 +209,7 @@ function createCheckboxChangeHandler(checkbox, references, row) {
       }
       if (markWhenChecked) {
         row.classList.remove("checked");
-        for(var ref of references) {
+        for (var ref of references) {
           markedFootprints.delete(ref[1]);
         }
         drawHighlights();
@@ -354,20 +354,22 @@ function createColumnHeader(name, cls, comparator, is_checkbox = false) {
     th.setAttribute("col_name", "bom-checkbox");
   else
     th.setAttribute("col_name", name);
-  th.style.cursor = "pointer";
   var span = document.createElement("SPAN");
   span.classList.add("sortmark");
   span.classList.add("none");
   th.appendChild(span);
-  th.onclick = function() {
-    if (currentSortColumn && this !== currentSortColumn) {
+  var spacer = document.createElement("div");
+  spacer.className = "column-spacer";
+  th.appendChild(spacer);
+  spacer.onclick = function() {
+    if (currentSortColumn && th !== currentSortColumn) {
       // Currently sorted by another column
       currentSortColumn.childNodes[1].classList.remove(currentSortOrder);
       currentSortColumn.childNodes[1].classList.add("none");
       currentSortColumn = null;
       currentSortOrder = null;
     }
-    if (currentSortColumn && this === currentSortColumn) {
+    if (currentSortColumn && th === currentSortColumn) {
       // Already sorted by this column
       if (currentSortOrder == "asc") {
         // Sort by this column, descending order
@@ -388,13 +390,17 @@ function createColumnHeader(name, cls, comparator, is_checkbox = false) {
     } else {
       // Sort by this column, ascending order
       bomSortFunction = comparator;
-      currentSortColumn = this;
+      currentSortColumn = th;
       currentSortColumn.childNodes[1].classList.remove("none");
       currentSortColumn.childNodes[1].classList.add("asc");
       currentSortOrder = "asc";
     }
     populateBomBody();
   }
+  if (is_checkbox) {
+    spacer.onclick = fancyDblClickHandler(
+      spacer, spacer.onclick, checkboxSetUnsetAllHandler(name));
+  }
   return th;
 }
 
@@ -489,8 +495,6 @@ function populateBomHeader(placeHolderColumn = null, placeHolderElements = null)
         for (var checkbox of settings.checkboxes) {
           th = createColumnHeader(
             checkbox, "bom-checkbox", checkboxCompareClosure(checkbox), true);
-          th.onclick = fancyDblClickHandler(
-            th, th.onclick.bind(th), checkboxSetUnsetAllHandler(checkbox));
           tr.appendChild(th);
         }
       }
@@ -739,6 +743,7 @@ function populateBomTable() {
   populateBomHeader();
   populateBomBody();
   setBomHandlers();
+  resizableGrid(bomhead);
 }
 
 function footprintsClicked(footprintIndexes) {
@@ -1014,7 +1019,7 @@ function setMarkWhenChecked(value) {
   writeStorage("markWhenChecked", value);
   settings.markWhenChecked = value;
   markedFootprints.clear();
-  for(var ref of (value ? getStoredCheckboxRefs(value) : [])) {
+  for (var ref of (value ? getStoredCheckboxRefs(value) : [])) {
     markedFootprints.add(ref);
   }
   populateBomTable();

InteractiveHtmlBom/web/table-drag.js renamed to InteractiveHtmlBom/web/table-util.js

@@ -142,9 +142,9 @@ function setBomHandlers() {
   }
 
   const mouseDownHandler = function(e) {
-    // The sortmark shouldn't be draggable
-    if (e.target.classList.contains("sortmark"))
-      return;
+    var target = e.target;
+    if (target.tagName.toLowerCase() != "td")
+      target = target.parentElement;
 
     // Used to check if a dragging has ever happened
     wasDragged = false;
@@ -161,10 +161,10 @@ function setBomHandlers() {
 
     // Get all compound headers for the current column
     var compoundHeaders;
-    if (e.target.classList.contains("bom-checkbox")) {
+    if (target.classList.contains("bom-checkbox")) {
       compoundHeaders = Array.from(bh.querySelectorAll("th.bom-checkbox"));
     } else {
-      compoundHeaders = [e.target];
+      compoundHeaders = [target];
     }
 
     // Create new table which will display the column
@@ -223,7 +223,7 @@ function setBomHandlers() {
     yOffset = e.screenY - compoundHeaders[0].offsetTop;
 
     // Get name for the column in settings.columnOrder
-    dragName = getColumnOrderName(e.target);
+    dragName = getColumnOrderName(target);
 
     // Change text and class for placeholder elements
     placeHolderElements = placeHolderElements.map(function(e) {
@@ -277,10 +277,8 @@ function getBoundingClientRectFromMultiple(elements) {
 
 function cloneElementWithDimensions(elem) {
   var newElem = elem.cloneNode(true);
-  newElem.style.height = window.getComputedStyle(elem)
-    .height;
-  newElem.style.width = window.getComputedStyle(elem)
-    .width;
+  newElem.style.height = window.getComputedStyle(elem).height;
+  newElem.style.width = window.getComputedStyle(elem).width;
   return newElem;
 }
 
@@ -297,3 +295,76 @@ function getColumnOrderName(elem) {
   else
     return cname;
 }
+
+function resizableGrid(tablehead) {
+  var cols = tablehead.firstElementChild.children;
+  var rowWidth = tablehead.offsetWidth;
+
+  for (var i = 1; i < cols.length; i++) {
+    if (cols[i].classList.contains("bom-checkbox"))
+      continue;
+    cols[i].style.width = ((cols[i].clientWidth - paddingDiff(cols[i])) * 100 / rowWidth) + '%';
+  }
+
+  for (var i = 1; i < cols.length - 1; i++) {
+    var div = document.createElement('div');
+    div.className = "column-width-handle";
+    cols[i].appendChild(div);
+    setListeners(div);
+  }
+
+  function setListeners(div) {
+    var startX, curCol, nxtCol, curColWidth, nxtColWidth, rowWidth;
+
+    div.addEventListener('mousedown', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      curCol = e.target.parentElement;
+      nxtCol = curCol.nextElementSibling;
+      startX = e.pageX;
+
+      var padding = paddingDiff(curCol);
+
+      rowWidth = curCol.parentElement.offsetWidth;
+      curColWidth = curCol.clientWidth - padding;
+      nxtColWidth = nxtCol.clientWidth - padding;
+    });
+
+    document.addEventListener('mousemove', function(e) {
+      if (startX) {
+        var diffX = e.pageX - startX;
+        diffX = -Math.min(-diffX, curColWidth - 20);
+        diffX = Math.min(diffX, nxtColWidth - 20);
+
+        curCol.style.width = ((curColWidth + diffX) * 100 / rowWidth) + '%';
+        nxtCol.style.width = ((nxtColWidth - diffX) * 100 / rowWidth) + '%';
+        console.log(`${curColWidth + nxtColWidth} ${(curColWidth + diffX) * 100 / rowWidth + (nxtColWidth - diffX) * 100 / rowWidth}`);
+      }
+    });
+
+    document.addEventListener('mouseup', function(e) {
+      curCol = undefined;
+      nxtCol = undefined;
+      startX = undefined;
+      nxtColWidth = undefined;
+      curColWidth = undefined
+    });
+  }
+
+  function paddingDiff(col) {
+
+    if (getStyleVal(col, 'box-sizing') == 'border-box') {
+      return 0;
+    }
+
+    var padLeft = getStyleVal(col, 'padding-left');
+    var padRight = getStyleVal(col, 'padding-right');
+    return (parseInt(padLeft) + parseInt(padRight));
+
+  }
+
+  function getStyleVal(elm, css) {
+    return (window.getComputedStyle(elm, null).getPropertyValue(css))
+  }
+}