mirror of
https://github.com/AUTOMATIC1111/stable-diffusion-webui.git
synced 2024-06-07 21:20:49 +00:00
544 lines
20 KiB
JavaScript
544 lines
20 KiB
JavaScript
/* eslint-disable */
|
|
/*
|
|
Heavily modified Clusterize.js v1.0.0.
|
|
Original: http://NeXTs.github.com/Clusterize.js/
|
|
|
|
This has been modified to allow for an asynchronous data loader implementation.
|
|
This differs from the original Clusterize.js which would store the entire dataset
|
|
in an array and load from that; this caused a large memory overhead in the client.
|
|
*/
|
|
|
|
const SCROLL_DEBOUNCE_TIME_MS = 50;
|
|
const RESIZE_OBSERVER_DEBOUNCE_TIME_MS = 100;
|
|
const ELEMENT_OBSERVER_DEBOUNCE_TIME_MS = 100;
|
|
|
|
class Clusterize {
|
|
scroll_elem = null;
|
|
content_elem = null;
|
|
scroll_id = null;
|
|
content_id = null;
|
|
default_sort_mode_str = "";
|
|
default_sort_dir_str = "ascending";
|
|
default_filter_str = "";
|
|
sort_mode_str = this.default_sort_mode_str;
|
|
sort_dir_str = this.default_sort_dir_str;
|
|
filter_str = this.default_filter_str;
|
|
options = {
|
|
rows_in_block: 50,
|
|
cols_in_block: 1,
|
|
blocks_in_cluster: 5,
|
|
tag: null,
|
|
show_no_data_row: true,
|
|
no_data_class: "clusterize-no-data",
|
|
no_data_text: "No data",
|
|
keep_parity: true,
|
|
callbacks: {
|
|
initData: this.initDataDefault,
|
|
fetchData: this.fetchDataDefault,
|
|
sortData: this.sortDataDefault,
|
|
filterData: this.filterDataDefault,
|
|
},
|
|
};
|
|
#is_mac = null;
|
|
#ie = null;
|
|
#max_items = null;
|
|
#max_rows = null;
|
|
#cache = {};
|
|
#scroll_top = 0;
|
|
#last_cluster = false;
|
|
#scroll_debounce = 0;
|
|
#resize_observer = null;
|
|
#resize_observer_timer = null;
|
|
#element_observer = null;
|
|
#element_observer_timer = null;
|
|
#pointer_events_set = false;
|
|
|
|
constructor(args) {
|
|
for (const option of Object.keys(this.options)) {
|
|
if (keyExists(args, option)) {
|
|
this.options[option] = args[option];
|
|
}
|
|
}
|
|
|
|
if (!isNullOrUndefined(this.options.callbacks.initData)) {
|
|
this.options.callbacks.initData = this.initDataDefault;
|
|
}
|
|
if (!isNullOrUndefined(this.options.callbacks.fetchData)) {
|
|
this.options.callbacks.fetchData = this.fetchDataDefault;
|
|
}
|
|
if (!isNullOrUndefined(this.options.callbacks.sortData)) {
|
|
this.options.callbacks.sortData = this.sortDataDefault;
|
|
}
|
|
if (!isNullOrUndefined(this.options.callbacks.filterData)) {
|
|
this.options.callbacks.filterData = this.filterDataDefault;
|
|
}
|
|
|
|
// detect ie9 and lower
|
|
// https://gist.github.com/padolsey/527683#comment-786682
|
|
this.#ie = (function () {
|
|
for (var v = 3,
|
|
el = document.createElement("b"),
|
|
all = el.all || [];
|
|
el.innerHTML = `<!--[if gt IE ${++v}]><i><![endif]-->`,
|
|
all[0];
|
|
) { }
|
|
return v > 4 ? v : document.documentMode;
|
|
}())
|
|
this.#is_mac = navigator.platform.toLowerCase().indexOf("mac") + 1;
|
|
|
|
this.scroll_elem = args["scrollId"] ? document.getElementById(args["scrollId"]) : args["scrollElem"];
|
|
isElementThrowError(this.scroll_elem);
|
|
this.scroll_id = this.scroll_elem.id;
|
|
|
|
this.content_elem = args["contentId"] ? document.getElementById(args["contentId"]) : args["contentElem"];
|
|
isElementThrowError(this.content_elem);
|
|
this.content_id = this.content_elem.id;
|
|
|
|
if (!this.content_elem.hasAttribute("tabindex")) {
|
|
this.content_elem.setAttribute("tabindex", 0);
|
|
}
|
|
|
|
this.#scroll_top = this.scroll_elem.scrollTop;
|
|
|
|
this.#max_items = args.max_items;
|
|
}
|
|
|
|
// ==== PUBLIC FUNCTIONS ====
|
|
async setup() {
|
|
await this.#insertToDOM();
|
|
this.scroll_elem.scrollTop = this.#scroll_top;
|
|
|
|
this.#setupEvent("scroll", this.scroll_elem, this.#onScroll);
|
|
this.#setupElementObservers();
|
|
this.#setupResizeObservers();
|
|
}
|
|
|
|
clear() {
|
|
this.#html(this.#generateEmptyRow().join(""));
|
|
}
|
|
|
|
destroy() {
|
|
this.#teardownEvent("scroll", this.scroll_elem, this.#onScroll);
|
|
this.#teardownElementObservers();
|
|
this.#teardownResizeObservers();
|
|
this.clear();
|
|
}
|
|
|
|
async refresh(force) {
|
|
if (this.#getRowsHeight() || force) {
|
|
await this.update()
|
|
}
|
|
}
|
|
|
|
async update() {
|
|
this.#scroll_top = this.scroll_elem.scrollTop;
|
|
// fixes #39
|
|
if (this.#max_rows * this.options.item_height < this.#scroll_top) {
|
|
this.scroll_elem.scrollTop = 0;
|
|
this.#last_cluster = 0;
|
|
}
|
|
|
|
await this.#insertToDOM();
|
|
this.scroll_elem.scrollTop = this.#scroll_top;
|
|
}
|
|
|
|
getRowsAmount() {
|
|
return this.#max_rows;
|
|
}
|
|
|
|
getScrollProgress() {
|
|
return this.options.scroll_top / (this.#max_rows * this.options.item_height) * 100 || 0;
|
|
}
|
|
|
|
async setMaxItems(max_items) {
|
|
if (max_items === this.#max_items) {
|
|
// No change. do nothing.
|
|
return;
|
|
}
|
|
|
|
// If the number of items changed, we need to update the cluster.
|
|
this.#max_items = max_items;
|
|
await this.refresh(true);
|
|
|
|
// Apply sort to the updated data.
|
|
await this.sortData(this.sort_mode_str, this.sort_dir_str);
|
|
}
|
|
|
|
async filterData(filter_str) {
|
|
if (this.filter_str === filter_str) {
|
|
return;
|
|
}
|
|
|
|
this.filter_str = isNullOrUndefined(filter_str) ? this.default_filter_str : filter_str;
|
|
|
|
// Filter is applied to entire dataset.
|
|
const max_items = await this.options.callbacks.filterData(this.filter_str);
|
|
// If the number of items changed after filter, we need to update the cluster.
|
|
if (max_items !== this.#max_items) {
|
|
this.#max_items = max_items;
|
|
this.refresh(true);
|
|
}
|
|
// Apply sort to the new filtered data.
|
|
await this.sortData(this.sort_mode_str, this.sort_dir_str);
|
|
}
|
|
|
|
async sortData(sort_mode_str, sort_dir_str) {
|
|
if (this.sort_mode_str === sort_mode_str && this.sort_dir_str === sort_dir_str) {
|
|
return;
|
|
}
|
|
|
|
this.sort_mode_str = isNullOrUndefined(sort_mode_str) ? this.default_sort_mode_str : sort_mode_str;
|
|
this.sort_dir_str = isNullOrUndefined(sort_dir_str) ? this.default_sort_dir_str : sort_dir_str;
|
|
|
|
// Sort is applied to the filtered data.
|
|
await this.options.callbacks.sortData(this.sort_mode_str, this.sort_dir_str === "descending");
|
|
await this.#insertToDOM();
|
|
}
|
|
|
|
// ==== PRIVATE FUNCTIONS ====
|
|
initDataDefault() {
|
|
return Promise.resolve({});
|
|
}
|
|
|
|
fetchDataDefault() {
|
|
return Promise.resolve([]);
|
|
}
|
|
|
|
sortDataDefault() {
|
|
return Promise.resolve();
|
|
}
|
|
|
|
filterDataDefault() {
|
|
return Promise.resolve(0);
|
|
}
|
|
|
|
#exploreEnvironment(rows, cache) {
|
|
this.options.content_tag = this.content_elem.tagName.toLowerCase();
|
|
if (!rows.length) {
|
|
return;
|
|
}
|
|
if (this.#ie && this.#ie <= 9 && !this.options.tag) {
|
|
this.options.tag = rows[0].match(/<([^>\s/]*)/)[1].toLowerCase();
|
|
}
|
|
if (this.content_elem.children.length <= 1) {
|
|
cache.data = this.#html(rows[0] + rows[0] + rows[0]);
|
|
}
|
|
if (!this.options.tag) {
|
|
this.options.tag = this.content_elem.children[0].tagName.toLowerCase();
|
|
}
|
|
this.#getRowsHeight();
|
|
}
|
|
|
|
#getRowsHeight() {
|
|
const prev_item_height = this.options.item_height;
|
|
const prev_item_width = this.options.item_width;
|
|
const prev_rows_in_block = this.options.rows_in_block;
|
|
const prev_cols_in_block = this.options.cols_in_block;
|
|
|
|
this.options.cluster_height = 0;
|
|
this.options.cluster_width = 0;
|
|
if (!this.#max_items) {
|
|
return;
|
|
}
|
|
|
|
const nodes = this.content_elem.querySelectorAll(":not(.clusterize-row)");
|
|
if (!nodes.length) {
|
|
return;
|
|
}
|
|
|
|
const node = nodes[Math.floor(nodes.length / 2)];
|
|
const node_dims = getComputedDims(node);
|
|
this.options.item_height = node_dims.height;
|
|
this.options.item_width = node_dims.width;
|
|
// consider table's browser spacing
|
|
if (this.options.tag === "tr" && getStyle("borderCollapse", this.content_elem) !== "collapse") {
|
|
const spacing = parseInt(getStyle("borderSpacing", this.content_elem), 10) || 0;
|
|
this.options.item_height += spacing;
|
|
this.options.item_width += spacing;
|
|
}
|
|
// consider margins and margins collapsing
|
|
if (this.options.tag !== "tr") {
|
|
const margin_top = parseInt(getStyle("marginTop", node), 10) || 0;
|
|
const margin_right = parseInt(getStyle("marginRight", node), 10) || 0;
|
|
const margin_bottom = parseInt(getStyle("marginBottom", node), 10) || 0;
|
|
const margin_left = parseInt(getStyle("marginLeft", node), 10) || 0;
|
|
this.options.item_height += Math.max(margin_top, margin_bottom);
|
|
this.options.item_width += Math.max(margin_left, margin_right);
|
|
}
|
|
|
|
// Update rows in block to match the number of elements that can fit in the scroll element view.
|
|
this.options.rows_in_block = calcRowsPerCol(this.scroll_elem, node);
|
|
this.options.cols_in_block = calcColsPerRow(this.content_elem, node);
|
|
|
|
this.options.block_height = this.options.item_height * this.options.rows_in_block;
|
|
this.options.block_width = this.options.item_width * this.options.cols_in_block;
|
|
this.options.rows_in_cluster = this.options.blocks_in_cluster * this.options.rows_in_block;
|
|
this.options.cluster_height = this.options.blocks_in_cluster * this.options.block_height;
|
|
this.options.cluster_width = this.options.block_width;
|
|
|
|
this.#max_rows = parseInt(this.#max_items / this.options.cols_in_block, 10);
|
|
|
|
return (
|
|
prev_item_height !== this.options.item_height ||
|
|
prev_item_width !== this.options.item_width ||
|
|
prev_rows_in_block !== this.options.rows_in_block ||
|
|
prev_cols_in_block !== this.options.cols_in_block
|
|
);
|
|
}
|
|
|
|
#getClusterNum() {
|
|
this.options.scroll_top = this.scroll_elem.scrollTop;
|
|
const cluster_divider = this.options.cluster_height - this.options.block_height;
|
|
const current_cluster = Math.floor(this.options.scroll_top / cluster_divider);
|
|
const max_cluster = Math.floor((this.#max_rows * this.options.item_height) / cluster_divider);
|
|
return Math.min(current_cluster, max_cluster);
|
|
}
|
|
|
|
#generateEmptyRow() {
|
|
if (!this.options.tag || !this.options.show_no_data_row) {
|
|
return [];
|
|
}
|
|
|
|
const empty_row = document.createElement(this.options.tag);
|
|
const no_data_content = document.createTextNode(this.options.no_data_text);
|
|
empty_row.className = this.options.no_data_class;
|
|
if (this.options.tag === "tr") {
|
|
const td = document.createElement("td");
|
|
// fixes #53
|
|
td.colSpan = 100;
|
|
td.appendChild(no_data_content);
|
|
empty_row.appendChild(td);
|
|
} else {
|
|
empty_row.appendChild(no_data_content);
|
|
}
|
|
return [empty_row.outerHTML];
|
|
}
|
|
|
|
async #generate() {
|
|
const rows_start = Math.max(0, (this.options.rows_in_cluster - this.options.rows_in_block) * this.#getClusterNum());
|
|
const rows_end = rows_start + this.options.rows_in_cluster;
|
|
const top_offset = Math.max(0, rows_start * this.options.item_height);
|
|
const bottom_offset = Math.max(0, (this.#max_rows - rows_end) * this.options.item_height);
|
|
const rows_above = top_offset < 1 ? rows_start + 1 : rows_start;
|
|
|
|
const idx_start = Math.max(0, rows_start * this.options.cols_in_block);
|
|
const idx_end = rows_end * this.options.cols_in_block;
|
|
const this_cluster_rows = await this.options.callbacks.fetchData(idx_start, idx_end);
|
|
return {
|
|
top_offset: top_offset,
|
|
bottom_offset: bottom_offset,
|
|
rows_above: rows_above,
|
|
rows: this_cluster_rows,
|
|
};
|
|
}
|
|
|
|
async #insertToDOM() {
|
|
if (!this.options.cluster_height || !this.options.cluster_width) {
|
|
const rows = await this.options.callbacks.fetchData(0, 1);
|
|
this.#exploreEnvironment(rows, this.#cache);
|
|
}
|
|
|
|
const data = await this.#generate();
|
|
let this_cluster_rows = [];
|
|
for (let i = 0; i < data.rows.length; i += this.options.cols_in_block) {
|
|
const new_row = data.rows.slice(i, i + this.options.cols_in_block).join("");
|
|
this_cluster_rows.push(`<div class="clusterize-row">${new_row}</div>`);
|
|
}
|
|
this_cluster_rows = this_cluster_rows.join("");
|
|
const this_cluster_content_changed = this.#checkChanges("data", this_cluster_rows, this.#cache);
|
|
const top_offset_changed = this.#checkChanges("top", data.top_offset, this.#cache);
|
|
const only_bottom_offset_changed = this.#checkChanges("bottom", data.bottom_offset, this.#cache);
|
|
const layout = [];
|
|
|
|
if (this_cluster_content_changed || top_offset_changed) {
|
|
if (data.top_offset) {
|
|
this.options.keep_parity && layout.push(this.#renderExtraTag("keep-parity"));
|
|
layout.push(this.#renderExtraTag("top-space", data.top_offset));
|
|
}
|
|
layout.push(this_cluster_rows);
|
|
data.bottom_offset && layout.push(this.#renderExtraTag("bottom-space", data.bottom_offset));
|
|
this.options.callbacks.clusterWillChange && this.options.callbacks.clusterWillChange();
|
|
this.#html(layout.join(""));
|
|
this.options.content_tag === "ol" && this.content_elem.setAttribute("start", data.rows_above);
|
|
this.content_elem.style["counter-increment"] = `clusterize-counter ${data.rows_above - 1}`;
|
|
this.options.callbacks.clusterChanged && this.options.callbacks.clusterChanged();
|
|
} else if (only_bottom_offset_changed) {
|
|
this.content_elem.lastChild.style.height = `${data.bottom_offset}px`;
|
|
}
|
|
}
|
|
|
|
#html(data) {
|
|
const content_elem = this.content_elem;
|
|
if (this.#ie && this.#ie <= 9 && this.options.tag === "tr") {
|
|
const div = document.createElement("div");
|
|
let last;
|
|
div.innerHTML = `<table><tbody>${data}</tbody></table>`;
|
|
while ((last = content_elem.lastChild)) {
|
|
content_elem.removeChild(last);
|
|
}
|
|
const rows_nodes = this.#getChildNodes(div.firstChild.firstChild);
|
|
while (rows_nodes.length) {
|
|
content_elem.appendChild(rows_nodes.shift());
|
|
}
|
|
} else {
|
|
content_elem.innerHTML = data;
|
|
}
|
|
}
|
|
|
|
#renderExtraTag(class_name, height) {
|
|
const tag = document.createElement(this.options.tag);
|
|
const clusterize_prefix = "clusterize-";
|
|
tag.className = [
|
|
`${clusterize_prefix}extra-row`,
|
|
`${clusterize_prefix}${class_name}`,
|
|
].join(" ");
|
|
height && (tag.style.height = `${height}px`);
|
|
return tag.outerHTML;
|
|
}
|
|
|
|
#getChildNodes(tag) {
|
|
const child_nodes = tag.children;
|
|
const nodes = [];
|
|
for (let i = 0, j = child_nodes.length; i < j; i++) {
|
|
nodes.push(child_nodes[i]);
|
|
}
|
|
return nodes;
|
|
}
|
|
|
|
#checkChanges(type, value, cache) {
|
|
const changed = value !== cache[type];
|
|
cache[type] = value;
|
|
return changed;
|
|
}
|
|
|
|
// ==== EVENT HANDLERS ====
|
|
|
|
async #onScroll() {
|
|
if (this.#is_mac) {
|
|
if (!this.#pointer_events_set) {
|
|
this.content_elem.style.pointerEvents = "none";
|
|
this.#pointer_events_set = true;
|
|
clearTimeout(this.#scroll_debounce);
|
|
this.#scroll_debounce = setTimeout(() => {
|
|
this.content_elem.style.pointerEvents = "auto";
|
|
this.#pointer_events_set = false;
|
|
}, SCROLL_DEBOUNCE_TIME_MS);
|
|
}
|
|
}
|
|
if (this.#last_cluster !== (this.#last_cluster = this.#getClusterNum())) {
|
|
await this.#insertToDOM();
|
|
}
|
|
if (this.options.callbacks.scrollingProgress) {
|
|
this.options.callbacks.scrollingProgress(this.getScrollProgress());
|
|
}
|
|
}
|
|
|
|
async #onResize() {
|
|
await this.refresh();
|
|
}
|
|
|
|
#fixElementReferences() {
|
|
if (!isElement(this.scroll_elem) || !isElement(this.content_elem)) {
|
|
return;
|
|
}
|
|
|
|
// If association for elements is broken, replace them with instance version.
|
|
if (!this.scroll_elem.isConnected || !this.content_elem.isConnected) {
|
|
document.getElementByid(this.scroll_id).replaceWith(this.scroll_elem);
|
|
// refresh since sizes may have changed.
|
|
this.refresh(true);
|
|
}
|
|
}
|
|
|
|
#setupElementObservers() {
|
|
/** Listens for changes to the scroll and content elements.
|
|
*
|
|
* During testing, the scroll/content elements would frequently get removed from
|
|
* the DOM. This instance stores a reference to these elements
|
|
* which breaks whenever these elements are removed from the DOM. To fix this,
|
|
* we need to check for these changes and re-attach our stores elements by
|
|
* replacing the ones in the DOM with the ones in our clusterize instance.
|
|
*/
|
|
|
|
this.#element_observer = new MutationObserver((mutations) => {
|
|
const scroll_elem = document.getElementById(this.scroll_id);
|
|
if (isElement(scroll_elem) && scroll_elem !== this.scroll_elem) {
|
|
clearTimeout(this.#element_observer_timer);
|
|
this.#element_observer_timer = setTimeout(
|
|
this.#fixElementReferences,
|
|
ELEMENT_OBSERVER_DEBOUNCE_TIME_MS,
|
|
);
|
|
}
|
|
|
|
const content_elem = document.getElementById(this.content_id);
|
|
if (isElement(content_elem) && content_elem !== this.content_elem) {
|
|
clearTimeout(this.#element_observer_timer);
|
|
this.#element_observer_timer = setTimeout(
|
|
this.#fixElementReferences,
|
|
ELEMENT_OBSERVER_DEBOUNCE_TIME_MS,
|
|
);
|
|
}
|
|
});
|
|
const options = { subtree: true, childList: true, attributes: true };
|
|
this.#element_observer.observe(document, options);
|
|
}
|
|
|
|
#teardownElementObservers() {
|
|
if (!isNullOrUndefined(this.#element_observer)) {
|
|
this.#element_observer.takeRecords();
|
|
this.#element_observer.disconnect();
|
|
}
|
|
this.#element_observer = null;
|
|
}
|
|
|
|
#setupResizeObservers() {
|
|
/** Handles any updates to the size of both the Scroll and Content elements. */
|
|
this.#resize_observer = new ResizeObserver((entries) => {
|
|
for (const entry of entries) {
|
|
if (entry.target.id === this.scroll_id || entry.target.id === this.content_id) {
|
|
// debounce the event
|
|
clearTimeout(this.#resize_observer_timer);
|
|
this.#resize_observer_timer = setTimeout(
|
|
() => this.#onResize(),
|
|
RESIZE_OBSERVER_DEBOUNCE_TIME_MS,
|
|
);
|
|
}
|
|
}
|
|
});
|
|
|
|
this.#resize_observer.observe(this.scroll_elem);
|
|
this.#resize_observer.observe(this.content_elem);
|
|
}
|
|
|
|
#teardownResizeObservers() {
|
|
if (!isNullOrUndefined(this.#resize_observer)) {
|
|
this.#resize_observer.disconnect();
|
|
}
|
|
|
|
if (!isNullOrUndefined(this.#resize_observer_timer)) {
|
|
clearTimeout(this.#resize_observer_timer);
|
|
}
|
|
|
|
this.#resize_observer = null;
|
|
this.#resize_observer_timer = null;
|
|
}
|
|
|
|
// ==== HELPER FUNCTIONS ====
|
|
|
|
#setupEvent(type, elem, listener) {
|
|
if (elem.addEventListener) {
|
|
return elem.addEventListener(type, event => listener.call(this), false);
|
|
} else {
|
|
return elem.attachEvent(`on${type}`, event => listener.call(this));
|
|
}
|
|
}
|
|
|
|
#teardownEvent(type, elem, listener) {
|
|
if (elem.removeEventListener) {
|
|
return elem.removeEventListener(type, event => listener.call(this), false);
|
|
} else {
|
|
return elem.detachEvent(`on${type}`, event => listener.call(this));
|
|
}
|
|
}
|
|
}
|