Update Matsui, combine changes until the next render frame

stfx/ui/html/generic.html

@@ -186,7 +186,7 @@
 			</script>
 		</section>
 		<template @foreach>
-			<div class="plot" @if="${d => d.$type == 'Spectrum'}">
+			<div class="plot" @if="${d => d.$type == 'Spectrum'}" $fullscreentoggle='foo'>
 				<canvas class="plot-grid" $update="${drawSpectrum}" $resize="${drawSpectrum}"></canvas>
 				<canvas class="plot-data" $update="${drawSpectrum}" $resize="${drawSpectrum}"></canvas>
 				<canvas class="plot-labels" $update="${drawSpectrum}" $resize="${drawSpectrum}"></canvas>
@@ -294,25 +294,34 @@
 		<script src="cbor.min.js"></script>
 		<script src="matsui-bundle.min.js"></script>
 		<script>
-			Matsui.global.attributes.resize = (element, fn) => {
-				element.classList.add('_matsuiResize');
-				element._matsuiResize = fn;
-			};
-			addEventListener('resize', e => {
-				document.querySelectorAll('._matsuiResize').forEach(e => {
-					let fn = e._matsuiResize;
-					if (fn) fn(e, e.offsetWidth, e.offsetHeight);
+			Matsui.global.attributes.fullscreentoggle = (element) => {
+				Matsui.global.attributes.press(element, count => {
+					if (count == 2) {
+						if (document.fullscreenElement == element) {
+							document.exitFullscreen();
+						} else {
+							element.requestFullscreen();
+						}
+					}
 				});
-			});
-
+			};
+		
 			let state = Matsui.replace(document.body, {name: "..."});
 			state.trackMerges(merge => {
 				window.parent.postMessage(CBOR.encode(merge), '*');
 			});
+			let pendingMerge = null;
 			addEventListener('message', e => {
 				let merge = CBOR.decode(e.data);
-				window.merge = merge;//console.log(merge);
-				state.merge(merge);
+				if (pendingMerge !== null) {
+					Matsui.merge.apply(pendingMerge, merge);
+				} else {
+					pendingMerge = merge;
+					requestAnimationFrame(_ => {
+						pendingMerge = null;
+						state.merge(merge);
+					});
+				}
 			});
 			
 			window.parent.postMessage(CBOR.encode("ready"), '*');