@schukai/monster 4.137.5 → 4.137.7

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.5"}
+{"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.7"}

package/source/components/form/context-error.mjs

@@ -282,7 +282,7 @@ function getTemplate() {
                     <div data-monster-replace="path:content"></div>
                 </div>
             </div>
-			
+
         </div>
     `;
 }

package/source/components/form/login.mjs

@@ -1905,7 +1905,7 @@ function getTemplate() {
             <monster-collapse data-monster-option-openByDefault="true"
                               data-monster-role="login-collapse"
                               exportparts="control:collapse-login-control,
-   										   container:collapse-login-container,
+										   container:collapse-login-container,
 										   deco:collapse-login-deco"
                               part="login-collapse">
                 <monster-field-set

package/source/components/form/sheet.mjs

@@ -56,6 +56,12 @@ const menuStateSymbol = Symbol("sheetMenuState");
 const dragFillSymbol = Symbol("sheetDragFill");
 const lastCopySymbol = Symbol("sheetLastCopy");
 const dragSelectSymbol = Symbol("sheetDragSelect");
+const pendingResizeMoveSymbol = Symbol("sheetPendingResizeMove");
+const resizeMoveFrameSymbol = Symbol("sheetResizeMoveFrame");
+const pendingSelectionMoveSymbol = Symbol("sheetPendingSelectionMove");
+const selectionMoveFrameSymbol = Symbol("sheetSelectionMoveFrame");
+const pendingFillMoveSymbol = Symbol("sheetPendingFillMove");
+const fillMoveFrameSymbol = Symbol("sheetFillMoveFrame");
 
 class Sheet extends CustomControl {
 	static get [instanceSymbol]() {
@@ -1020,15 +1026,31 @@ function handleResizeMove(event) {
 	const grid = event.currentTarget;
 	const sheet = grid.getRootNode().host;
 	if (!sheet || !sheet[resizeStateSymbol]) return;
-	const state = sheet[resizeStateSymbol];
+	scheduleResizeMove.call(sheet, event.clientX, event.clientY);
+}
+
+function scheduleResizeMove(clientX, clientY) {
+	this[pendingResizeMoveSymbol] = { clientX, clientY };
+	if (this[resizeMoveFrameSymbol]) return;
+	this[resizeMoveFrameSymbol] = requestAnimationFrame(() => {
+		this[resizeMoveFrameSymbol] = null;
+		flushResizeMove.call(this);
+	});
+}
+
+function flushResizeMove() {
+	const pending = this[pendingResizeMoveSymbol];
+	this[pendingResizeMoveSymbol] = null;
+	if (!pending || !this[resizeStateSymbol]) return;
+	const state = this[resizeStateSymbol];
 	if (state.kind === "column") {
-		const delta = event.clientX - state.start;
+		const delta = pending.clientX - state.start;
 		const size = state.startSize + delta;
-		setColumnSize.call(sheet, state.id, size);
+		setColumnSize.call(this, state.id, size);
 	} else if (state.kind === "row") {
-		const delta = event.clientY - state.start;
+		const delta = pending.clientY - state.start;
 		const size = state.startSize + delta;
-		setRowSize.call(sheet, state.id, size);
+		setRowSize.call(this, state.id, size);
 	}
 }
 
@@ -1043,6 +1065,11 @@ function handleResizeEnd(event) {
 	grid.removeEventListener("pointermove", handleResizeMove);
 	grid.removeEventListener("pointerup", handleResizeEnd);
 	grid.removeEventListener("pointercancel", handleResizeEnd);
+	if (sheet[resizeMoveFrameSymbol]) {
+		cancelAnimationFrame(sheet[resizeMoveFrameSymbol]);
+		sheet[resizeMoveFrameSymbol] = null;
+	}
+	flushResizeMove.call(sheet);
 	sheet[resizeStateSymbol] = null;
 }
 
@@ -1050,6 +1077,9 @@ function setColumnSize(columnId, size) {
 	const min = getSizeNumber(this.getOption("constraints.minColumnWidth"), 64);
 	const max = getSizeNumber(this.getOption("constraints.maxColumnWidth"), 360);
 	const next = clamp(size, min, max);
+	if (getColumnWidthNumber.call(this, columnId) === next) {
+		return;
+	}
 	this.setOption(`sizes.columns.${columnId}`, next);
 	this[skipRenderSymbol] = true;
 	if (this.getOption("features.virtualize", false) === true) {
@@ -1067,6 +1097,9 @@ function setRowSize(rowId, size) {
 	const min = getSizeNumber(this.getOption("constraints.minRowHeight"), 28);
 	const max = getSizeNumber(this.getOption("constraints.maxRowHeight"), 120);
 	const next = clamp(size, min, max);
+	if (getRowHeightNumber.call(this, rowId) === next) {
+		return;
+	}
 	this.setOption(`sizes.rows.${rowId}`, next);
 	this[skipRenderSymbol] = true;
 	if (this.getOption("features.virtualize", false) === true) {
@@ -1178,7 +1211,23 @@ function handleSelectionDragMove(event) {
 		if (Math.abs(dx) < 3 && Math.abs(dy) < 3) return;
 		state.moved = true;
 	}
-	const cell = getCellFromPoint.call(this, event.clientX, event.clientY);
+	scheduleSelectionDragMove.call(this, event.clientX, event.clientY);
+}
+
+function scheduleSelectionDragMove(clientX, clientY) {
+	this[pendingSelectionMoveSymbol] = { clientX, clientY };
+	if (this[selectionMoveFrameSymbol]) return;
+	this[selectionMoveFrameSymbol] = requestAnimationFrame(() => {
+		this[selectionMoveFrameSymbol] = null;
+		flushSelectionDragMove.call(this);
+	});
+}
+
+function flushSelectionDragMove() {
+	const pending = this[pendingSelectionMoveSymbol];
+	this[pendingSelectionMoveSymbol] = null;
+	if (!pending || !this[dragSelectSymbol]?.active) return;
+	const cell = getCellFromPoint.call(this, pending.clientX, pending.clientY);
 	if (!cell) return;
 	const rowId = cell.dataset.rowId;
 	const colId = cell.dataset.colId;
@@ -1189,6 +1238,11 @@ function handleSelectionDragMove(event) {
 function handleSelectionDragEnd() {
 	const state = this[dragSelectSymbol];
 	if (!state) return;
+	if (this[selectionMoveFrameSymbol]) {
+		cancelAnimationFrame(this[selectionMoveFrameSymbol]);
+		this[selectionMoveFrameSymbol] = null;
+	}
+	flushSelectionDragMove.call(this);
 	if (state.cleanup) state.cleanup();
 	this[dragSelectSymbol] = null;
 	this.removeAttribute("data-selecting");
@@ -1805,8 +1859,25 @@ function handleFillMove(event) {
 		if (Math.abs(dx) < 3 && Math.abs(dy) < 3) return;
 		state.moved = true;
 	}
+	scheduleFillMove.call(this, event.clientX, event.clientY);
+}
+
+function scheduleFillMove(clientX, clientY) {
+	this[pendingFillMoveSymbol] = { clientX, clientY };
+	if (this[fillMoveFrameSymbol]) return;
+	this[fillMoveFrameSymbol] = requestAnimationFrame(() => {
+		this[fillMoveFrameSymbol] = null;
+		flushFillMove.call(this);
+	});
+}
+
+function flushFillMove() {
+	const state = this[dragFillSymbol];
+	const pending = this[pendingFillMoveSymbol];
+	this[pendingFillMoveSymbol] = null;
+	if (!state || !pending) return;
 	const data = normalizeValue.call(this);
-	const cell = getCellFromPoint.call(this, event.clientX, event.clientY);
+	const cell = getCellFromPoint.call(this, pending.clientX, pending.clientY);
 	if (!cell) return;
 	const rowId = cell.dataset.rowId;
 	const colId = cell.dataset.colId;
@@ -1829,6 +1900,11 @@ function handleFillMove(event) {
 function handleFillEnd() {
 	const state = this[dragFillSymbol];
 	if (!state) return;
+	if (this[fillMoveFrameSymbol]) {
+		cancelAnimationFrame(this[fillMoveFrameSymbol]);
+		this[fillMoveFrameSymbol] = null;
+	}
+	flushFillMove.call(this);
 	if (state.cleanup) state.cleanup();
 	this.removeAttribute("data-filling");
 	const data = normalizeValue.call(this);

package/source/components/layout/slider.mjs

@@ -106,27 +106,28 @@ class Slider extends CustomElement {
 			startPos: 0,
 			autoPlayInterval: null,
 			resizeObserver: null, // Store the observer for later cleanup
+			resizeFrame: null,
+			pendingResizeSize: null,
+			lastResizeSize: null,
+			visibleSlides: null,
+			dragFrame: null,
+			pendingDragEvent: null,
 
 			eventHandler: {
 				mouseOverPause: null,
 				mouseout: null,
 				touchstart: null,
 				touchend: null,
+				thumbnailMoved: null,
 			},
 		};
 
-		// Set the CSS custom property for slide width based on visible slides.
-		const slides = this.shadowRoot.querySelector(
-			`[${ATTRIBUTE_ROLE}="slider"]`,
-		);
+		initControlReferences.call(this);
 
+		// Set the CSS custom property for slide width based on visible slides.
 		const slidesVisible = getVisibleSlidesFromContainerWidth.call(this);
-		slides.style.setProperty(
-			"--monster-slides-width",
-			`${100 / slidesVisible}%`,
-		);
+		setVisibleSlidesWidth.call(this, slidesVisible);
 
-		initControlReferences.call(this);
 		initEventHandler.call(this);
 		initStructure.call(this);
 
@@ -151,6 +152,16 @@ class Slider extends CustomElement {
 			this[configSymbol].resizeObserver = null;
 		}
 
+		if (this[configSymbol]?.resizeFrame) {
+			getWindow().cancelAnimationFrame(this[configSymbol].resizeFrame);
+			this[configSymbol].resizeFrame = null;
+		}
+
+		if (this[configSymbol]?.dragFrame) {
+			getWindow().cancelAnimationFrame(this[configSymbol].dragFrame);
+			this[configSymbol].dragFrame = null;
+		}
+
 		// Remove autoplay-related event listeners
 		if (this[configSymbol]?.eventHandler) {
 			const { mouseOverPause, mouseout, touchstart, touchend } =
@@ -172,6 +183,13 @@ class Slider extends CustomElement {
 				this.removeEventListener("touchend", touchend);
 				this[configSymbol].eventHandler.touchend = null;
 			}
+			if (this[configSymbol].eventHandler.thumbnailMoved) {
+				this.removeEventListener(
+					"monster-slider-moved",
+					this[configSymbol].eventHandler.thumbnailMoved,
+				);
+				this[configSymbol].eventHandler.thumbnailMoved = null;
+			}
 		}
 	}
 
@@ -327,7 +345,6 @@ function initStructure() {
  * @description Generates the thumbnail navigation elements.
  */
 function initThumbnails() {
-	const self = this;
 	const thumbnails = this.shadowRoot.querySelector(
 		"[data-monster-role='thumbnails']",
 	);
@@ -350,20 +367,26 @@ function initThumbnails() {
 	});
 
 	// Listen for move events to update the active thumbnail
-	this.addEventListener("monster-slider-moved", (e) => {
-		const index = e.detail.index;
-		const thumbnail = thumbnails.children[index];
+	if (this[configSymbol].eventHandler.thumbnailMoved === null) {
+		this[configSymbol].eventHandler.thumbnailMoved = (e) => {
+			const index = e.detail.index;
+			const thumbnail = thumbnails.children[index];
 
-		if (!thumbnail) {
-			return;
-		}
+			if (!thumbnail) {
+				return;
+			}
 
-		Array.from(thumbnails.children).forEach((thumb) => {
-			thumb.classList.remove("current");
-		});
+			Array.from(thumbnails.children).forEach((thumb) => {
+				thumb.classList.remove("current");
+			});
 
-		thumbnail.classList.add("current");
-	});
+			thumbnail.classList.add("current");
+		};
+		this.addEventListener(
+			"monster-slider-moved",
+			this[configSymbol].eventHandler.thumbnailMoved,
+		);
+	}
 }
 
 /**
@@ -509,6 +532,23 @@ function getVisibleSlidesFromContainerWidth() {
 	return visibleSlides;
 }
 
+/**
+ * @private
+ * @param {number} slidesVisible
+ * @return {boolean}
+ */
+function setVisibleSlidesWidth(slidesVisible) {
+	if (this[configSymbol].visibleSlides === slidesVisible) {
+		return false;
+	}
+	this[configSymbol].visibleSlides = slidesVisible;
+	this[sliderElementSymbol].style.setProperty(
+		"--monster-slides-width",
+		`${100 / slidesVisible}%`,
+	);
+	return true;
+}
+
 /**
  * @private
  * @description Clones slides to create the "infinite" loop effect for the carousel.
@@ -757,7 +797,7 @@ function initEventHandler() {
 		);
 	}
 
-	const initialSize = {
+	this[configSymbol].lastResizeSize = {
 		width: this[sliderElementSymbol]?.offsetWidth || 0,
 		height: this[sliderElementSymbol]?.offsetHeight || 0,
 	};
@@ -766,30 +806,7 @@ function initEventHandler() {
 	const resizeObserver = new ResizeObserver((entries) => {
 		for (let entry of entries) {
 			const { width, height } = entry.contentRect;
-			if (width !== initialSize.width || height !== initialSize.height) {
-				self.stopAutoPlay();
-
-				// Re-init thumbnails if layout changes
-				if (this.getOption("features.thumbnails")) {
-					initThumbnails.call(this);
-				}
-
-				// Recalculate visible slides and update CSS property
-				const slidesVisible = getVisibleSlidesFromContainerWidth.call(this);
-				this[sliderElementSymbol].style.setProperty(
-					"--monster-slides-width",
-					`${100 / slidesVisible}%`,
-				);
-
-				// Move to start without animation
-				moveTo.call(self, 0, false);
-				self.startAutoPlay();
-
-				fireCustomEvent(self, "monster-slider-resized", {
-					width: width,
-					height: height,
-				});
-			}
+			scheduleResizeUpdate.call(this, width, height);
 		}
 	});
 
@@ -799,6 +816,62 @@ function initEventHandler() {
 	return this;
 }
 
+function scheduleResizeUpdate(width, height) {
+	const lastSize = this[configSymbol].lastResizeSize;
+	if (
+		this[configSymbol].resizeFrame === null &&
+		lastSize &&
+		width === lastSize.width &&
+		height === lastSize.height
+	) {
+		return;
+	}
+	this[configSymbol].pendingResizeSize = { width, height };
+	if (this[configSymbol].resizeFrame !== null) {
+		return;
+	}
+	this[configSymbol].resizeFrame = getWindow().requestAnimationFrame(() => {
+		this[configSymbol].resizeFrame = null;
+		flushResizeUpdate.call(this);
+	});
+}
+
+function flushResizeUpdate() {
+	const size = this[configSymbol].pendingResizeSize;
+	this[configSymbol].pendingResizeSize = null;
+	if (!size) {
+		return;
+	}
+
+	const lastSize = this[configSymbol].lastResizeSize;
+	if (
+		lastSize &&
+		size.width === lastSize.width &&
+		size.height === lastSize.height
+	) {
+		return;
+	}
+	this[configSymbol].lastResizeSize = size;
+
+	const previousVisibleSlides = this[configSymbol].visibleSlides;
+	const slidesVisible = getVisibleSlidesFromContainerWidth.call(this);
+	const visibleSlidesChanged = setVisibleSlidesWidth.call(this, slidesVisible);
+
+	if (
+		visibleSlidesChanged &&
+		previousVisibleSlides !== null &&
+		this.getOption("features.thumbnails")
+	) {
+		initThumbnails.call(this);
+	}
+
+	this.stopAutoPlay();
+	moveTo.call(this, 0, false);
+	this.startAutoPlay();
+
+	fireCustomEvent(this, "monster-slider-resized", size);
+}
+
 /**
  * @private
  * @description Handles the "mousedown" or "touchstart" event to begin dragging.
@@ -819,7 +892,7 @@ function startDragging(e, type) {
 	this[sliderElementSymbol].style.transitionProperty = "none";
 
 	const callbackMousemove = (x) => {
-		dragging.call(this, x, type);
+		scheduleDragging.call(this, x, type);
 	};
 
 	const callbackMouseUp = () => {
@@ -830,6 +903,12 @@ function startDragging(e, type) {
 		document.body.removeEventListener(endEvent, callbackMouseUp);
 		document.body.removeEventListener(moveEvent, callbackMousemove);
 
+		if (this[configSymbol].dragFrame !== null) {
+			getWindow().cancelAnimationFrame(this[configSymbol].dragFrame);
+			this[configSymbol].dragFrame = null;
+		}
+		flushDragging.call(this, type);
+
 		this[configSymbol].isDragging = false;
 		this[configSymbol].startPos = 0;
 		this[sliderElementSymbol].classList.remove("grabbing");
@@ -880,6 +959,26 @@ function dragging(e, type) {
 		`translateX(calc(${this[configSymbol].lastOffset} + ${this[configSymbol].draggingPos}px))`;
 }
 
+function scheduleDragging(e, type) {
+	this[configSymbol].pendingDragEvent = e;
+	if (this[configSymbol].dragFrame !== null) {
+		return;
+	}
+	this[configSymbol].dragFrame = getWindow().requestAnimationFrame(() => {
+		this[configSymbol].dragFrame = null;
+		flushDragging.call(this, type);
+	});
+}
+
+function flushDragging(type) {
+	const event = this[configSymbol].pendingDragEvent;
+	this[configSymbol].pendingDragEvent = null;
+	if (!event) {
+		return;
+	}
+	dragging.call(this, event, type);
+}
+
 /**
  * @private
  * @description Caches references to key elements in the shadow DOM.

package/source/types/version.mjs

@@ -156,7 +156,7 @@ function getMonsterVersion() {
 	}
 
 	/** don't touch, replaced by make with package.json version */
-	monsterVersion = new Version("4.136.7");
+	monsterVersion = new Version("4.137.5");
 
 	return monsterVersion;
 }

package/test/cases/components/form/sheet.mjs

@@ -0,0 +1,126 @@
+import * as chai from "chai";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+
+const expect = chai.expect;
+
+describe("Sheet", function () {
+	let Sheet;
+
+	before(function (done) {
+		initJSDOM()
+			.then(() => {
+				import("../../../../source/components/form/sheet.mjs")
+					.then((m) => {
+						Sheet = m.Sheet;
+						done();
+					})
+					.catch((e) => done(e));
+			})
+			.catch((e) => done(e));
+	});
+
+	afterEach(() => {
+		document.getElementById("mocks").innerHTML = "";
+	});
+
+	it("should register monster-sheet", function () {
+		expect(document.createElement("monster-sheet")).to.be.instanceof(Sheet);
+	});
+
+	it("should coalesce column resize pointer moves", function (done) {
+		const originalRequestAnimationFrame = window.requestAnimationFrame;
+		const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
+		const originalCancelAnimationFrame = window.cancelAnimationFrame;
+		const originalGlobalCancelAnimationFrame = globalThis.cancelAnimationFrame;
+		const scheduledCallbacks = [];
+
+		try {
+			window.requestAnimationFrame = (callback) => {
+				scheduledCallbacks.push(callback);
+				return scheduledCallbacks.length;
+			};
+			globalThis.requestAnimationFrame = window.requestAnimationFrame;
+			window.cancelAnimationFrame = () => {};
+			globalThis.cancelAnimationFrame = window.cancelAnimationFrame;
+
+			const mocks = document.getElementById("mocks");
+			const sheet = document.createElement("monster-sheet");
+			mocks.appendChild(sheet);
+
+			setTimeout(() => {
+				try {
+					const grid = sheet.shadowRoot.querySelector(
+						'[data-monster-role="grid"]',
+					);
+					const handle = sheet.shadowRoot.querySelector(
+						'[data-monster-role="column-resize"]',
+					);
+					const header = handle.parentElement;
+					grid.setPointerCapture = () => {};
+					grid.releasePointerCapture = () => {};
+					Object.defineProperty(header, "getBoundingClientRect", {
+						configurable: true,
+						value: () => ({ width: 120 }),
+					});
+
+					let resizeEvents = 0;
+					sheet.addEventListener("monster-sheet-resize-column", () => {
+						resizeEvents++;
+					});
+
+					const down = new Event("pointerdown", { bubbles: true });
+					Object.assign(down, {
+						button: 0,
+						clientX: 100,
+						clientY: 0,
+						pointerId: 1,
+					});
+					handle.dispatchEvent(down);
+
+					const firstMove = new Event("pointermove", { bubbles: true });
+					Object.assign(firstMove, {
+						clientX: 130,
+						clientY: 0,
+						pointerId: 1,
+					});
+					const secondMove = new Event("pointermove", { bubbles: true });
+					Object.assign(secondMove, {
+						clientX: 150,
+						clientY: 0,
+						pointerId: 1,
+					});
+					grid.dispatchEvent(firstMove);
+					grid.dispatchEvent(secondMove);
+
+					expect(scheduledCallbacks.length).to.equal(1);
+					scheduledCallbacks.shift()();
+					expect(resizeEvents).to.equal(1);
+
+					const repeatedMove = new Event("pointermove", { bubbles: true });
+					Object.assign(repeatedMove, {
+						clientX: 150,
+						clientY: 0,
+						pointerId: 1,
+					});
+					grid.dispatchEvent(repeatedMove);
+					scheduledCallbacks.shift()();
+					expect(resizeEvents).to.equal(1);
+					done();
+				} catch (e) {
+					done(e);
+				} finally {
+					window.requestAnimationFrame = originalRequestAnimationFrame;
+					globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+					window.cancelAnimationFrame = originalCancelAnimationFrame;
+					globalThis.cancelAnimationFrame = originalGlobalCancelAnimationFrame;
+				}
+			}, 0);
+		} catch (e) {
+			window.requestAnimationFrame = originalRequestAnimationFrame;
+			globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+			window.cancelAnimationFrame = originalCancelAnimationFrame;
+			globalThis.cancelAnimationFrame = originalGlobalCancelAnimationFrame;
+			done(e);
+		}
+	});
+});