@schukai/monster 4.137.3 → 4.137.4

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.137.3"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.137.4"}

package/source/components/datatable/columnbar.mjs

@@ -25,6 +25,7 @@ import { getLocaleOfDocument } from "../../dom/locale.mjs";
 import { hasObjectLink } from "../../dom/attributes.mjs";
 import { customElementUpdaterLinkSymbol } from "../../dom/constants.mjs";
 import { getGlobalObject } from "../../types/global.mjs";
+import { UniqueQueue } from "../../types/uniquequeue.mjs";
 import {
 	createFloatingPopper,
 	popperInstanceSymbol,
@@ -83,6 +84,23 @@ const dotsUpdateInProgressSymbol = Symbol("dotsUpdateInProgress");
  * @type {symbol}
  */
 const dotsFrameRequestSymbol = Symbol("dotsFrameRequest");
+/**
+ * @private
+ * @type {symbol}
+ */
+const dotsLayoutCacheSymbol = Symbol("dotsLayoutCache");
+
+/**
+ * @private
+ * @type {UniqueQueue}
+ */
+const scheduledDotsUpdates = new UniqueQueue();
+
+/**
+ * @private
+ * @type {number|null}
+ */
+let scheduledDotsFrameRequest = null;
 
 /**
  * @private
@@ -222,14 +240,8 @@ class ColumnBar extends CustomElement {
 			this[dotsMutationObserverSymbol] = null;
 		}
 
-		if (typeof this[dotsFrameRequestSymbol] === "number") {
-			const cancelFrame =
-				typeof globalThis.cancelAnimationFrame === "function"
-					? globalThis.cancelAnimationFrame.bind(globalThis)
-					: globalThis.clearTimeout.bind(globalThis);
-			cancelFrame(this[dotsFrameRequestSymbol]);
-			this[dotsFrameRequestSymbol] = null;
-		}
+		removeScheduledDotsUpdate(this);
+		this[dotsFrameRequestSymbol] = null;
 
 		if (this[closeEventHandlerSymbol]) {
 			getGlobalObject("document").removeEventListener(
@@ -455,7 +467,11 @@ function initDotsObservers() {
 	const parentElement = this.parentElement;
 
 	if (controlElement && !this[resizeObserverSymbol]) {
-		this[resizeObserverSymbol] = new ResizeObserver(() => {
+		this[resizeObserverSymbol] = new ResizeObserver((entries) => {
+			updateDotsLayoutResizeCache.call(this, entries, {
+				controlElement,
+				parentElement,
+			});
 			scheduleDotsVisibilityUpdate.call(this);
 		});
 		this[resizeObserverSymbol].observe(controlElement);
@@ -465,10 +481,17 @@ function initDotsObservers() {
 	}
 
 	if (this[dotsContainerElementSymbol] && !this[dotsMutationObserverSymbol]) {
-		this[dotsMutationObserverSymbol] = new MutationObserver(() => {
-			if (this[dotsUpdateInProgressSymbol]) {
+		this[dotsMutationObserverSymbol] = new MutationObserver((mutations) => {
+			if (
+				this[dotsUpdateInProgressSymbol] ||
+				mutations.every(isOverflowIndicatorMutation)
+			) {
 				return;
 			}
+			invalidateDotsLayoutCache.call(this, {
+				dots: true,
+				visibility: true,
+			});
 			scheduleDotsVisibilityUpdate.call(this);
 		});
 		this[dotsMutationObserverSymbol].observe(this[dotsContainerElementSymbol], {
@@ -481,29 +504,43 @@ function initDotsObservers() {
  * @private
  */
 function scheduleDotsVisibilityUpdate() {
-	if (
-		this[dotsFrameRequestSymbol] !== null &&
-		this[dotsFrameRequestSymbol] !== undefined
-	) {
-		return;
-	}
+	scheduledDotsUpdates.add(this);
+	this[dotsFrameRequestSymbol] = true;
 
-	this[dotsFrameRequestSymbol] = requestAnimationFrame(() => {
-		this[dotsFrameRequestSymbol] = null;
-		updateDotsVisibility.call(this);
+	if (scheduledDotsFrameRequest !== null) return;
+
+	scheduledDotsFrameRequest = requestAnimationFrame(() => {
+		const pending = [];
+		while (!scheduledDotsUpdates.isEmpty()) {
+			pending.push(scheduledDotsUpdates.poll());
+		}
+		scheduledDotsFrameRequest = null;
+
+		const layouts = [];
+		for (const element of pending) {
+			element[dotsFrameRequestSymbol] = null;
+			const layout = measureDotsLayout.call(element);
+			if (layout) {
+				layouts.push(layout);
+			}
+		}
+
+		for (const layout of layouts) {
+			applyDotsLayout(layout);
+		}
 	});
 }
 
 /**
  * @private
  */
-function updateDotsVisibility() {
+function measureDotsLayout() {
 	if (this[dotsUpdateInProgressSymbol]) {
-		return;
+		return null;
 	}
 
 	if (!this.shadowRoot || !this[dotsContainerElementSymbol]) {
-		return;
+		return null;
 	}
 
 	const controlElement = this.shadowRoot.querySelector(
@@ -513,81 +550,318 @@ function updateDotsVisibility() {
 	const parentElement = this.parentElement;
 
 	if (!controlElement || !settingsButton) {
-		return;
+		return null;
 	}
 
 	const dotsContainer = this[dotsContainerElementSymbol];
-	dotsContainer.classList.remove("dots-hidden");
+	const cache = getDotsLayoutCache.call(this);
+	const dots = Array.from(
+		dotsContainer.querySelectorAll("li:not(.dots-overflow-indicator)"),
+	);
 
-	this[dotsUpdateInProgressSymbol] = true;
-	try {
-		const dots = Array.from(dotsContainer.querySelectorAll("li"));
-		if (dots.length === 0) {
-			return;
-		}
+	if (dots.length === 0) {
+		return {
+			hostElement: this,
+			dots,
+			dotsContainer,
+			hiddenCount: 0,
+			hideContainer: true,
+			visibleDots: 0,
+		};
+	}
 
-		for (const dot of dots) {
-			dot.classList.remove("dots-overflow-hidden");
-		}
+	if (cache.dotsCount !== dots.length) {
+		cache.dotsCount = dots.length;
+		cache.dotSlotWidth = null;
+		cache.lastVisibleDots = null;
+		cache.lastHiddenCount = null;
+	}
 
-		const indicator = dotsContainer.querySelector(".dots-overflow-indicator");
-		if (indicator) {
-			indicator.remove();
-		}
+	if (cache.controlWidth === null || cache.controlWidth <= 0) {
+		cache.controlWidth = controlElement.getBoundingClientRect().width;
+	}
+	if (cache.settingsWidth === null || cache.settingsWidth <= 0) {
+		cache.settingsWidth = settingsButton.getBoundingClientRect().width;
+	}
 
-		const controlWidth = controlElement.getBoundingClientRect().width;
-		const settingsWidth = settingsButton.getBoundingClientRect().width;
-		const availableWidth = Math.max(
-			0,
-			getAvailableWidth(parentElement, settingsWidth, this) ??
-				controlWidth - settingsWidth - 12,
-		);
+	const availableWidth = Math.max(
+		0,
+		getAvailableWidth(parentElement, cache.settingsWidth, this, cache) ??
+			cache.controlWidth - cache.settingsWidth - 12,
+	);
 
-		const dotSlotWidth = getDotSlotWidth(dots[0]);
-		const maxDots =
-			dotSlotWidth > 0
-				? Math.floor(availableWidth / dotSlotWidth)
-				: dots.length;
-		const configuredMaxVisible = parseInt(
-			this.getOption("dots.maxVisible"),
-			10,
+	if (cache.dotSlotWidth === null || cache.dotSlotWidth <= 0) {
+		cache.dotSlotWidth = getDotSlotWidth(dots[0]);
+	}
+
+	const maxDots =
+		cache.dotSlotWidth > 0
+			? Math.floor(availableWidth / cache.dotSlotWidth)
+			: dots.length;
+	const configuredMaxVisible = parseInt(this.getOption("dots.maxVisible"), 10);
+	const enforceMaxVisible =
+		Number.isFinite(configuredMaxVisible) && configuredMaxVisible > 0;
+
+	if (maxDots <= 1) {
+		return {
+			hostElement: this,
+			dots,
+			dotsContainer,
+			hiddenCount: 0,
+			hideContainer: true,
+			visibleDots: 0,
+		};
+	}
+
+	const configLimit = enforceMaxVisible
+		? configuredMaxVisible
+		: Number.POSITIVE_INFINITY;
+	const baseLimit = Math.min(maxDots, configLimit, dots.length);
+	const needsIndicator = baseLimit < dots.length;
+
+	let visibleDots = baseLimit;
+	if (needsIndicator) {
+		visibleDots = Math.min(
+			Math.max(1, maxDots - 1),
+			configLimit,
+			dots.length,
 		);
-		const enforceMaxVisible =
-			Number.isFinite(configuredMaxVisible) && configuredMaxVisible > 0;
+	}
 
-		if (maxDots <= 1) {
-			dotsContainer.classList.add("dots-hidden");
-			return;
-		}
+	return {
+		hostElement: this,
+		dots,
+		dotsContainer,
+		hiddenCount: dots.length - visibleDots,
+		hideContainer: false,
+		visibleDots,
+	};
+}
+
+/**
+ * @private
+ * @param {object} layout
+ * @return {void}
+ */
+function applyDotsLayout(layout) {
+	const cache = getDotsLayoutCache.call(layout.hostElement);
 
-		const configLimit = enforceMaxVisible
-			? configuredMaxVisible
-			: Number.POSITIVE_INFINITY;
-		const baseLimit = Math.min(maxDots, configLimit, dots.length);
-		const needsIndicator = baseLimit < dots.length;
-
-		let visibleDots = baseLimit;
-		if (needsIndicator) {
-			visibleDots = Math.min(
-				Math.max(1, maxDots - 1),
-				configLimit,
-				dots.length,
+	layout.hostElement[dotsUpdateInProgressSymbol] = true;
+	try {
+		if (cache.lastContainerHidden !== layout.hideContainer) {
+			layout.dotsContainer.classList.toggle(
+				"dots-hidden",
+				layout.hideContainer,
 			);
+			cache.lastContainerHidden = layout.hideContainer;
 		}
-		for (let i = visibleDots; i < dots.length; i++) {
-			dots[i].classList.add("dots-overflow-hidden");
+
+		if (
+			cache.lastVisibleDots !== layout.visibleDots ||
+			cache.lastDotsCount !== layout.dots.length
+		) {
+			for (let i = 0; i < layout.dots.length; i++) {
+				const shouldHide = i >= layout.visibleDots;
+				if (
+					layout.dots[i].classList.contains("dots-overflow-hidden") !==
+					shouldHide
+				) {
+					layout.dots[i].classList.toggle("dots-overflow-hidden", shouldHide);
+				}
+			}
+			cache.lastVisibleDots = layout.visibleDots;
+			cache.lastDotsCount = layout.dots.length;
 		}
 
-		const hiddenCount = dots.length - visibleDots;
-		if (hiddenCount > 0) {
-			const overflowIndicator = document.createElement("li");
-			overflowIndicator.className = "dots-overflow-indicator";
-			overflowIndicator.textContent = `+${hiddenCount}`;
-			dotsContainer.appendChild(overflowIndicator);
+		if (cache.lastHiddenCount !== layout.hiddenCount) {
+			updateOverflowIndicator(layout.dotsContainer, layout.hiddenCount);
+			cache.lastHiddenCount = layout.hiddenCount;
 		}
 	} finally {
-		this[dotsUpdateInProgressSymbol] = false;
+		layout.hostElement[dotsUpdateInProgressSymbol] = false;
+	}
+}
+
+/**
+ * @private
+ * @param {MutationRecord} mutation
+ * @return {boolean}
+ */
+function isOverflowIndicatorMutation(mutation) {
+	const changedNodes = Array.from(mutation.addedNodes).concat(
+		Array.from(mutation.removedNodes),
+	);
+
+	return (
+		changedNodes.length > 0 &&
+		changedNodes.every((node) => {
+			return (
+				node instanceof HTMLElement &&
+				node.classList.contains("dots-overflow-indicator")
+			);
+		})
+	);
+}
+
+/**
+ * @private
+ * @param {HTMLElement} dotsContainer
+ * @param {number} hiddenCount
+ * @return {void}
+ */
+function updateOverflowIndicator(dotsContainer, hiddenCount) {
+	let overflowIndicator = dotsContainer.querySelector(
+		".dots-overflow-indicator",
+	);
+
+	if (hiddenCount <= 0) {
+		overflowIndicator?.remove();
+		return;
+	}
+
+	const label = `+${hiddenCount}`;
+	if (!overflowIndicator) {
+		overflowIndicator = document.createElement("li");
+		overflowIndicator.className = "dots-overflow-indicator";
+		dotsContainer.appendChild(overflowIndicator);
+	}
+
+	if (overflowIndicator.textContent !== label) {
+		overflowIndicator.textContent = label;
+	}
+}
+
+/**
+ * @private
+ * @param {ColumnBar} element
+ * @return {void}
+ */
+function removeScheduledDotsUpdate(element) {
+	const pending = [];
+	while (!scheduledDotsUpdates.isEmpty()) {
+		const item = scheduledDotsUpdates.poll();
+		if (item !== element) {
+			pending.push(item);
+		}
+	}
+	for (const item of pending) {
+		scheduledDotsUpdates.add(item);
+	}
+}
+
+/**
+ * @private
+ * @return {object}
+ */
+function getDotsLayoutCache() {
+	if (!this[dotsLayoutCacheSymbol]) {
+		this[dotsLayoutCacheSymbol] = {
+			controlWidth: null,
+			dotSlotWidth: null,
+			dotsCount: null,
+			lastContainerHidden: null,
+			lastDotsCount: null,
+			lastHiddenCount: null,
+			lastVisibleDots: null,
+			parentGap: null,
+			parentWidth: null,
+			settingsWidth: null,
+			siblingsSignature: null,
+			siblingsWidth: null,
+		};
+	}
+
+	return this[dotsLayoutCacheSymbol];
+}
+
+/**
+ * @private
+ * @param {object} options
+ * @return {void}
+ */
+function invalidateDotsLayoutCache(options = {}) {
+	const cache = getDotsLayoutCache.call(this);
+
+	if (options.dots === true) {
+		cache.dotSlotWidth = null;
+		cache.dotsCount = null;
+	}
+
+	if (options.visibility === true) {
+		cache.lastContainerHidden = null;
+		cache.lastDotsCount = null;
+		cache.lastHiddenCount = null;
+		cache.lastVisibleDots = null;
+	}
+
+	if (options.control === true) {
+		cache.controlWidth = null;
+	}
+
+	if (options.parent === true) {
+		cache.parentWidth = null;
+	}
+
+	if (options.settings === true) {
+		cache.settingsWidth = null;
+	}
+
+	if (options.siblings === true) {
+		cache.parentGap = null;
+		cache.siblingsSignature = null;
+		cache.siblingsWidth = null;
+	}
+}
+
+/**
+ * @private
+ * @param {ResizeObserverEntry[]} entries
+ * @param {object} elements
+ * @return {void}
+ */
+function updateDotsLayoutResizeCache(entries, { controlElement, parentElement }) {
+	const cache = getDotsLayoutCache.call(this);
+
+	if (!Array.isArray(entries) || entries.length === 0) {
+		invalidateDotsLayoutCache.call(this, {
+			control: true,
+			parent: true,
+			siblings: true,
+		});
+		return;
 	}
+
+	for (const entry of entries) {
+		const width = getResizeEntryWidth(entry);
+		if (width === null) continue;
+
+		if (entry.target === controlElement) {
+			cache.controlWidth = width;
+		}
+		if (entry.target === parentElement) {
+			cache.parentWidth = width;
+			cache.siblingsSignature = null;
+			cache.siblingsWidth = null;
+		}
+	}
+}
+
+/**
+ * @private
+ * @param {ResizeObserverEntry} entry
+ * @return {number|null}
+ */
+function getResizeEntryWidth(entry) {
+	const borderSize = Array.isArray(entry.borderBoxSize)
+		? entry.borderBoxSize[0]
+		: entry.borderBoxSize;
+	const contentSize = Array.isArray(entry.contentBoxSize)
+		? entry.contentBoxSize[0]
+		: entry.contentBoxSize;
+	const width =
+		borderSize?.inlineSize ?? contentSize?.inlineSize ?? entry.contentRect?.width;
+
+	return Number.isFinite(width) ? width : null;
 }
 
 /**
@@ -607,32 +881,50 @@ function getDotSlotWidth(dot) {
  * @private
  * @param {HTMLElement|null} parent
  * @param {number} settingsWidth
+ * @param {ColumnBar} hostElement
+ * @param {object} cache
  * @return {number|null}
  */
-function getAvailableWidth(parent, settingsWidth, hostElement) {
+function getAvailableWidth(parent, settingsWidth, hostElement, cache) {
 	if (!parent) return null;
 
-	const parentWidth = parent.getBoundingClientRect().width;
+	const parentWidth =
+		cache.parentWidth ?? parent.getBoundingClientRect().width ?? null;
 	if (!parentWidth) return null;
-
-	const styles = getComputedStyle(parent);
-	const gapValue = styles.columnGap || styles.gap || "0";
-	const gap = parseFloat(gapValue) || 0;
+	cache.parentWidth = parentWidth;
 
 	const siblings = Array.from(parent.children).filter(
 		(el) => el !== hostElement,
 	);
-	let siblingsWidth = 0;
-	for (const sibling of siblings) {
-		const siblingStyles = getComputedStyle(sibling);
-		if (siblingStyles.display === "none") {
-			continue;
+	const siblingsSignature = siblings
+		.map((sibling) => sibling.getAttribute("data-monster-role") || sibling.tagName)
+		.join("|");
+
+	if (
+		cache.siblingsSignature !== siblingsSignature ||
+		cache.siblingsWidth === null ||
+		cache.parentGap === null
+	) {
+		const styles = getComputedStyle(parent);
+		const gapValue = styles.columnGap || styles.gap || "0";
+		cache.parentGap = parseFloat(gapValue) || 0;
+		cache.siblingsSignature = siblingsSignature;
+		cache.siblingsWidth = 0;
+
+		for (const sibling of siblings) {
+			const siblingStyles = getComputedStyle(sibling);
+			if (siblingStyles.display === "none") {
+				continue;
+			}
+			cache.siblingsWidth += sibling.getBoundingClientRect().width;
 		}
-		siblingsWidth += sibling.getBoundingClientRect().width;
 	}
 
 	const gaps = siblings.length > 0 ? siblings.length : 0;
-	return Math.max(0, parentWidth - siblingsWidth - gap * gaps - settingsWidth);
+	return Math.max(
+		0,
+		parentWidth - cache.siblingsWidth - cache.parentGap * gaps - settingsWidth,
+	);
 }
 
 /**

package/test/cases/components/datatable/drag-scroll.mjs

@@ -557,4 +557,122 @@ describe("Datatable drag scroll", function () {
 			globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
 		}
 	});
+
+	it("coalesces column bar dot updates and ignores overflow indicator mutations", async function () {
+		const OriginalResizeObserver = window.ResizeObserver;
+		const originalGlobalResizeObserver = globalThis.ResizeObserver;
+		const originalRequestAnimationFrame = window.requestAnimationFrame;
+		const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
+
+		class TrackingResizeObserver extends ResizeObserverMock {
+			static instances = [];
+
+			constructor(callback) {
+				super(callback);
+				TrackingResizeObserver.instances.push(this);
+			}
+		}
+
+		try {
+			window.ResizeObserver = TrackingResizeObserver;
+			globalThis.ResizeObserver = TrackingResizeObserver;
+
+			const mocks = document.getElementById("mocks");
+			const wrapper = document.createElement("div");
+			let parentWidth = 80;
+
+			Object.defineProperty(wrapper, "getBoundingClientRect", {
+				configurable: true,
+				value: () => ({ width: parentWidth }),
+			});
+
+			mocks.appendChild(wrapper);
+
+			const createColumnBar = async () => {
+				const columnBar = document.createElement("monster-column-bar");
+				columnBar.setOption("columns", [
+					{ index: 0, name: "One", visible: true },
+					{ index: 1, name: "Two", visible: true },
+					{ index: 2, name: "Three", visible: true },
+					{ index: 3, name: "Four", visible: true },
+					{ index: 4, name: "Five", visible: true },
+					{ index: 5, name: "Six", visible: true },
+				]);
+				wrapper.appendChild(columnBar);
+
+				await new Promise((resolve) => setTimeout(resolve, 30));
+
+				const control = columnBar.shadowRoot.querySelector(
+					"[data-monster-role=control]",
+				);
+				const settingsButton = columnBar.shadowRoot.querySelector(
+					"[data-monster-role=settings-button]",
+				);
+				const dotsContainer = columnBar.shadowRoot.querySelector(
+					"[data-monster-role=dots]",
+				);
+				const dots = Array.from(dotsContainer.querySelectorAll("li"));
+
+				Object.defineProperty(control, "getBoundingClientRect", {
+					configurable: true,
+					value: () => ({ width: parentWidth }),
+				});
+				Object.defineProperty(settingsButton, "getBoundingClientRect", {
+					configurable: true,
+					value: () => ({ width: 20 }),
+				});
+				dots.forEach((dot) => {
+					Object.defineProperty(dot, "getBoundingClientRect", {
+						configurable: true,
+						value: () => ({ width: 20 }),
+					});
+				});
+
+				return { columnBar, control, dotsContainer };
+			};
+
+			const first = await createColumnBar();
+			const second = await createColumnBar();
+
+			const firstResizeObserver = TrackingResizeObserver.instances.find(
+				(observer) => observer.elements.includes(first.control),
+			);
+			const secondResizeObserver = TrackingResizeObserver.instances.find(
+				(observer) => observer.elements.includes(second.control),
+			);
+
+			expect(firstResizeObserver).to.exist;
+			expect(secondResizeObserver).to.exist;
+
+			const scheduledCallbacks = [];
+			window.requestAnimationFrame = (callback) => {
+				scheduledCallbacks.push(callback);
+				return scheduledCallbacks.length;
+			};
+			globalThis.requestAnimationFrame = window.requestAnimationFrame;
+
+			firstResizeObserver.triggerResize([]);
+			secondResizeObserver.triggerResize([]);
+
+			expect(scheduledCallbacks.length).to.equal(1);
+
+			scheduledCallbacks.shift()();
+
+			expect(
+				first.dotsContainer.querySelector(".dots-overflow-indicator"),
+			).to.exist;
+			expect(
+				second.dotsContainer.querySelector(".dots-overflow-indicator"),
+			).to.exist;
+
+			await new Promise((resolve) => setTimeout(resolve, 0));
+
+			expect(scheduledCallbacks.length).to.equal(0);
+		} finally {
+			window.ResizeObserver = OriginalResizeObserver;
+			globalThis.ResizeObserver = originalGlobalResizeObserver;
+			window.requestAnimationFrame = originalRequestAnimationFrame;
+			globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+		}
+	});
 });