Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Honor rowHeightPx option #85

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Honor rowHeightPx option #85

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export const DEFAULT_DEBUGLEVEL = 4; // Replaced by rollup script
/**
* Fixed height of a row in pixel. Must match the SCSS variable `$row-outer-height`.
*/
export const ROW_HEIGHT = 22;
export const DEFAULT_ROW_HEIGHT = 22;
/**
* Fixed width of node icons in pixel. Must match the SCSS variable `$icon-outer-width`.
*/
Expand Down
8 changes: 4 additions & 4 deletions src/wb_ext_dnd.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import {
DropRegionType,
DropRegionTypeSet,
} from "./types";
import { ROW_HEIGHT } from "./common";
import { DebouncedFunction, throttle } from "./debounce";

const nodeMimeType = "application/x-wunderbaum-node";
Expand Down Expand Up @@ -135,21 +134,22 @@ export class DndExtension extends WunderbaumExtension<DndOptionsType> {
e: DragEvent,
allowed: DropRegionTypeSet | null
): DropRegionType | false {
const rowHeight = this.tree.options.rowHeightPx!;
const dy = e.offsetY;

if (!allowed) {
return false;
} else if (allowed.size === 3) {
return dy < 0.25 * ROW_HEIGHT
return dy < 0.25 * rowHeight
? "before"
: dy > 0.75 * ROW_HEIGHT
: dy > 0.75 * rowHeight
? "after"
: "over";
} else if (allowed.size === 1 && allowed.has("over")) {
return "over";
} else {
// Only 'before' and 'after':
return dy > ROW_HEIGHT / 2 ? "after" : "before";
return dy > rowHeight / 2 ? "after" : "before";
}
// return "over";
}
Expand Down
4 changes: 2 additions & 2 deletions src/wb_node.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@ import {
makeNodeTitleMatcher,
RESERVED_TREE_SOURCE_KEYS,
TITLE_SPAN_PAD_Y,
ROW_HEIGHT,
TEST_IMG,
decompressSourceData,
nodeTitleSorter,
Expand Down Expand Up @@ -1630,6 +1629,7 @@ export class WunderbaumNode {
protected _render_markup(opts: RenderOptions) {
const tree = this.tree;
const treeOptions = tree.options;
const rowHeight = treeOptions.rowHeightPx!;
const checkbox = this.getOption("checkbox");
const columns = tree.columns;
const level = this.getLevel();
Expand All @@ -1651,7 +1651,7 @@ export class WunderbaumNode {
rowDiv = document.createElement("div");
rowDiv.classList.add("wb-row");

rowDiv.style.top = this._rowIdx! * ROW_HEIGHT + "px";
rowDiv.style.top = this._rowIdx! * rowHeight + "px";

this._rowElem = rowDiv;

Expand Down
50 changes: 32 additions & 18 deletions src/wunderbaum.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ import {
makeNodeTitleStartMatcher,
nodeTitleSorter,
RENDER_MAX_PREFETCH,
ROW_HEIGHT,
DEFAULT_ROW_HEIGHT,
} from "./common";
import { WunderbaumNode } from "./wb_node";
import { Deferred } from "./deferred";
Expand Down Expand Up @@ -189,7 +189,7 @@ export class Wunderbaum {
debugLevel: DEFAULT_DEBUGLEVEL, // 0:quiet, 1:errors, 2:warnings, 3:info, 4:verbose
header: null, // Show/hide header (pass bool or string)
// headerHeightPx: ROW_HEIGHT,
rowHeightPx: ROW_HEIGHT,
rowHeightPx: DEFAULT_ROW_HEIGHT,
iconMap: "bootstrap",
columns: null,
types: null,
Expand Down Expand Up @@ -286,6 +286,16 @@ export class Wunderbaum {
this.element.tabIndex = 0;
}

if (opts.rowHeightPx !== DEFAULT_ROW_HEIGHT) {
this.element.style.setProperty(
"--wb-row-outer-height",
opts.rowHeightPx + "px"
);
this.element.style.setProperty(
"--wb-row-inner-height",
opts.rowHeightPx - 2 + "px"
);
}
// Attach tree instance to <div>
(<any>this.element)._wb_tree = this;

Expand Down Expand Up @@ -744,32 +754,34 @@ export class Wunderbaum {

/** Return the topmost visible node in the viewport. */
getTopmostVpNode(complete = true) {
const rowHeight = this.options.rowHeightPx!;
const gracePx = 1; // ignore subpixel scrolling
const scrollParent = this.element;
// const headerHeight = this.headerElement.clientHeight; // May be 0
const scrollTop = scrollParent.scrollTop; // + headerHeight;
let topIdx: number;

if (complete) {
topIdx = Math.ceil((scrollTop - gracePx) / ROW_HEIGHT);
topIdx = Math.ceil((scrollTop - gracePx) / rowHeight);
} else {
topIdx = Math.floor(scrollTop / ROW_HEIGHT);
topIdx = Math.floor(scrollTop / rowHeight);
}
return this._getNodeByRowIdx(topIdx)!;
}

/** Return the lowest visible node in the viewport. */
getLowestVpNode(complete = true) {
const rowHeight = this.options.rowHeightPx!;
const scrollParent = this.element;
const headerHeight = this.headerElement.clientHeight; // May be 0
const scrollTop = scrollParent.scrollTop;
const clientHeight = scrollParent.clientHeight - headerHeight;
let bottomIdx: number;

if (complete) {
bottomIdx = Math.floor((scrollTop + clientHeight) / ROW_HEIGHT) - 1;
bottomIdx = Math.floor((scrollTop + clientHeight) / rowHeight) - 1;
} else {
bottomIdx = Math.ceil((scrollTop + clientHeight) / ROW_HEIGHT) - 1;
bottomIdx = Math.ceil((scrollTop + clientHeight) / rowHeight) - 1;
}
bottomIdx = Math.min(bottomIdx, this.count(true) - 1);
return this._getNodeByRowIdx(bottomIdx)!;
Expand Down Expand Up @@ -1267,9 +1279,10 @@ export class Wunderbaum {
* @param includeHidden Not yet implemented
*/
findRelatedNode(node: WunderbaumNode, where: string, includeHidden = false) {
const rowHeight = this.options.rowHeightPx!;
let res = null;
const pageSize = Math.floor(
this.listContainerElement.clientHeight / ROW_HEIGHT
this.listContainerElement.clientHeight / rowHeight
);

switch (where) {
Expand Down Expand Up @@ -1605,7 +1618,7 @@ export class Wunderbaum {
const PADDING = 2; // leave some pixels between viewport bounds

let node;
WunderbaumNode;
// WunderbaumNode;
let options: ScrollToOptions | undefined;

if (nodeOrOpts instanceof WunderbaumNode) {
Expand All @@ -1616,14 +1629,15 @@ export class Wunderbaum {
}
util.assert(node && node._rowIdx != null, `Invalid node: ${node}`);

const rowHeight = this.options.rowHeightPx!;
const scrollParent = this.element;
const headerHeight = this.headerElement.clientHeight; // May be 0
const scrollTop = scrollParent.scrollTop;
const vpHeight = scrollParent.clientHeight;
const rowTop = node._rowIdx! * ROW_HEIGHT + headerHeight;
const rowTop = node._rowIdx! * rowHeight + headerHeight;
const vpTop = headerHeight;
const vpRowTop = rowTop - scrollTop;
const vpRowBottom = vpRowTop + ROW_HEIGHT;
const vpRowBottom = vpRowTop + rowHeight;
const topNode = options?.topNode;

// this.log( `scrollTo(${node.title}), vpTop:${vpTop}px, scrollTop:${scrollTop}, vpHeight:${vpHeight}, rowTop:${rowTop}, vpRowTop:${vpRowTop}`, nodeOrOpts , options);
Expand All @@ -1636,7 +1650,7 @@ export class Wunderbaum {
} else {
// Node is below viewport
// this.log("Below viewport");
newScrollTop = rowTop + ROW_HEIGHT - vpHeight + PADDING; // leave some pixels between viewport bounds
newScrollTop = rowTop + rowHeight - vpHeight + PADDING; // leave some pixels between viewport bounds
}
} else {
// Node is above viewport
Expand Down Expand Up @@ -2276,20 +2290,20 @@ export class Wunderbaum {
options = Object.assign({ newNodesOnly: false }, options);
const newNodesOnly = !!options.newNodesOnly;

const row_height = ROW_HEIGHT;
const vp_height = this.element.clientHeight;
const rowHeight = this.options.rowHeightPx!;
const vpHeight = this.element.clientHeight;
const prefetch = RENDER_MAX_PREFETCH;
// const grace_prefetch = RENDER_MAX_PREFETCH - RENDER_MIN_PREFETCH;
const ofs = this.element.scrollTop;

let startIdx = Math.max(0, ofs / row_height - prefetch);
let startIdx = Math.max(0, ofs / rowHeight - prefetch);
startIdx = Math.floor(startIdx);
// Make sure start is always even, so the alternating row colors don't
// change when scrolling:
if (startIdx % 2) {
startIdx--;
}
let endIdx = Math.max(0, (ofs + vp_height) / row_height + prefetch);
let endIdx = Math.max(0, (ofs + vpHeight) / rowHeight + prefetch);
endIdx = Math.ceil(endIdx);

// this.debug("render", opts);
Expand Down Expand Up @@ -2322,20 +2336,20 @@ export class Wunderbaum {
} else if (rowDiv && newNodesOnly) {
obsoleteNodes.delete(node);
// no need to update existing node markup
rowDiv.style.top = idx * ROW_HEIGHT + "px";
rowDiv.style.top = idx * rowHeight + "px";
prevElem = rowDiv;
} else {
obsoleteNodes.delete(node);
// Create new markup
if (rowDiv) {
rowDiv.style.top = idx * ROW_HEIGHT + "px";
rowDiv.style.top = idx * rowHeight + "px";
}
node._render({ top: top, after: prevElem });
// node.log("render", top, prevElem, "=>", node._rowElem);
prevElem = node._rowElem!;
}
idx++;
top += row_height;
top += rowHeight;
});
this.treeRowCount = idx;
for (const n of obsoleteNodes) {
Expand Down
Loading