Skip to content

Commit

Permalink
Add resizable column border
Browse files Browse the repository at this point in the history 
Fixes #255
  • Loading branch information
@qu1ck
qu1ck committed Jul 27, 2021
1 parent de62198 commit 43587ca
Show file tree
Hide file tree
Showing 5 changed files with 125 additions and 25 deletions.
8 changes: 4 additions & 4 deletions InteractiveHtmlBom/core/ibom.py
View file
Expand Up @@ -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)

Expand Down Expand Up @@ -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):
Expand All @@ -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///',
Expand Down Expand Up @@ -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)
Expand Down
24 changes: 24 additions & 0 deletions InteractiveHtmlBom/web/ibom.css
View file
Expand Up @@ -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;
}
2 changes: 1 addition & 1 deletion InteractiveHtmlBom/web/ibom.html
View file
Expand Up @@ -39,7 +39,7 @@
///////////////////////////////////////////////

///////////////////////////////////////////////
///TABLEDRAG///
///TABLEUTILJS///
///////////////////////////////////////////////

///////////////////////////////////////////////
Expand Down
25 changes: 15 additions & 10 deletions InteractiveHtmlBom/web/ibom.js
View file
Expand Up @@ -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();
Expand All @@ -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();
Expand Down Expand Up @@ -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
Expand All @@ -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;
}

Expand Down Expand Up @@ -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);
}
}
Expand Down Expand Up @@ -739,6 +743,7 @@ function populateBomTable() {
populateBomHeader();
populateBomBody();
setBomHandlers();
resizableGrid(bomhead);
}

function footprintsClicked(footprintIndexes) {
Expand Down Expand Up @@ -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();
Expand Down
91 changes: 81 additions & 10 deletions InteractiveHtmlBom/web/table-drag.js → InteractiveHtmlBom/web/table-util.js
View file
Expand Up @@ -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;
Expand All @@ -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
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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;
}

Expand All @@ -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))
}
}

0 comments on commit 43587ca

Please sign in to comment.