@three-flatland/devtools 0.1.0-alpha.3 → 1.0.0-alpha.6

package/dist/stats-graph.js

@@ -1,273 +1,332 @@
 import { STATS_BATCH_MS } from "three-flatland/debug-protocol";
-const MODES = ["fps", "ms", "gpu", "mem"];
+//#region src/stats-graph.ts
+const MODES = [
+	"fps",
+	"ms",
+	"gpu",
+	"mem"
+];
 const BUFFER_SIZE = 80;
 const MODE_COLORS = {
-  fps: "#47cca9",
-  // retro-cyan
-  ms: "#47cc6a",
-  // green variant
-  gpu: "#ffa347",
-  // retro-amber
-  mem: "#d94c87"
-  // retro-pink
+	fps: "#47cca9",
+	ms: "#47cc6a",
+	gpu: "#ffa347",
+	mem: "#d94c87"
 };
 const MODE_UNITS = {
-  fps: "FPS",
-  ms: "MS",
-  gpu: "MS",
-  mem: "MB"
+	fps: "FPS",
+	ms: "MS",
+	gpu: "MS",
+	mem: "MB"
 };
+/**
+* Add a cycling stats graph to a Tweakpane parent.
+* Matches the visual design of the built-in fpsgraph blade.
+*/
 function addStatsGraph(parent, client, options = {}) {
-  const { rows = 2, driver = "raf" } = options;
-  let mode = "fps";
-  let modeIndex = 0;
-  const graphMax = {
-    fps: 120,
-    ms: 16.67,
-    gpu: 16.67,
-    mem: 256
-  };
-  const sessionMin = { fps: Infinity, ms: Infinity, gpu: Infinity, mem: Infinity };
-  const sessionMax = { fps: 0, ms: 0, gpu: 0, mem: 0 };
-  const lblv = document.createElement("div");
-  lblv.className = "tp-lblv";
-  lblv.style.cursor = "pointer";
-  const lblvL = document.createElement("div");
-  lblvL.className = "tp-lblv_l";
-  lblvL.textContent = "fps";
-  lblv.appendChild(lblvL);
-  const lblvV = document.createElement("div");
-  lblvV.className = "tp-lblv_v";
-  lblv.appendChild(lblvV);
-  const fpsv = document.createElement("div");
-  fpsv.className = "tp-fpsv";
-  lblvV.appendChild(fpsv);
-  const fpsvG = document.createElement("div");
-  fpsvG.className = "tp-fpsv_g";
-  fpsv.appendChild(fpsvG);
-  const grlv = document.createElement("div");
-  grlv.className = "tp-grlv";
-  fpsvG.appendChild(grlv);
-  const canvas = document.createElement("canvas");
-  canvas.classList.add("tp-grlv_g");
-  canvas.style.cssText = `display:block;width:100%;height:calc(var(--cnt-usz, 20px) * ${rows})`;
-  canvas.width = 1;
-  canvas.height = 1;
-  grlv.appendChild(canvas);
-  const gfx = canvas.getContext("2d");
-  const fpsvL = document.createElement("div");
-  fpsvL.className = "tp-fpsv_l";
-  fpsvL.style.cssText = "background:rgba(0,2,28,0.65);padding:1px 4px;border-radius:2px;";
-  fpsv.appendChild(fpsvL);
-  const valueSpan = document.createElement("span");
-  valueSpan.className = "tp-fpsv_v";
-  valueSpan.textContent = "--";
-  fpsvL.appendChild(valueSpan);
-  const unitSpan = document.createElement("span");
-  unitSpan.className = "tp-fpsv_u";
-  unitSpan.textContent = "FPS";
-  fpsvL.appendChild(unitSpan);
-  const blade = parent.addBlade({ view: "separator" });
-  const bladeEl = blade.element;
-  bladeEl.innerHTML = "";
-  bladeEl.className = "tp-cntv";
-  bladeEl.style.cssText = "";
-  bladeEl.appendChild(lblv);
-  function applyMode() {
-    lblvL.textContent = mode;
-    unitSpan.textContent = MODE_UNITS[mode];
-  }
-  applyMode();
-  lblv.addEventListener("click", () => {
-    const state = client.state;
-    do {
-      modeIndex = (modeIndex + 1) % MODES.length;
-      mode = MODES[modeIndex];
-    } while (mode === "mem" && state.heapUsedMB === void 0 || mode === "gpu" && !state.gpuModeEnabled);
-    applyMode();
-  });
-  let cachedW = 0;
-  let cachedH = 0;
-  const resizeObserver = new ResizeObserver(([entry]) => {
-    if (!entry) return;
-    const r = entry.contentRect;
-    const dpr = window.devicePixelRatio || 1;
-    const w = Math.max(1, Math.round(r.width * dpr));
-    const h = Math.max(1, Math.round(r.height * dpr));
-    if (canvas.width !== w || canvas.height !== h) {
-      canvas.width = w;
-      canvas.height = h;
-    }
-    cachedW = w;
-    cachedH = h;
-  });
-  resizeObserver.observe(canvas);
-  const MODE_LABEL = { fps: "fps", ms: "ms", gpu: "gpu", mem: "mem" };
-  const MODE_VALUE_UNIT = { fps: "FPS", ms: "MS", gpu: "MS", mem: "MB" };
-  const MODE_RANGE_UNIT = { fps: "FPS", ms: "MS", gpu: "GPU", mem: "MB" };
-  const MODE_DECIMALS = { fps: 0, ms: 1, gpu: 1, mem: 0 };
-  const MODE_SCALE = { fps: 1, ms: 10, gpu: 10, mem: 1 };
-  const fmtCache = {
-    fps: { key: NaN, str: "" },
-    ms: { key: NaN, str: "" },
-    gpu: { key: NaN, str: "" },
-    mem: { key: NaN, str: "" }
-  };
-  function fmtCached(m, v) {
-    const key = Math.round(v * MODE_SCALE[m]);
-    const c = fmtCache[m];
-    if (c.key === key) return c.str;
-    c.key = key;
-    c.str = v.toFixed(MODE_DECIMALS[m]);
-    return c.str;
-  }
-  function seriesFor(m) {
-    const s = client.state.series;
-    switch (m) {
-      case "fps":
-        return s.fps;
-      case "ms":
-        return s.cpuMs;
-      case "gpu":
-        return s.gpuMs;
-      case "mem":
-        return s.heapUsedMB;
-    }
-  }
-  const prevLabel = { fps: 0, ms: 0, gpu: 0, mem: 0 };
-  const currLabel = { fps: 0, ms: 0, gpu: 0, mem: 0 };
-  const hasLabel = { fps: false, ms: false, gpu: false, mem: false };
-  let batchCount = 0;
-  let lastBatchAt = performance.now();
-  let prevRingWrite = 0;
-  const snap = (m, v) => {
-    if (v === void 0) return;
-    prevLabel[m] = hasLabel[m] ? currLabel[m] : v;
-    currLabel[m] = v;
-    hasLabel[m] = true;
-  };
-  const unsubscribe = client.addListener((s) => {
-    if (s.heapLimitMB !== void 0) graphMax.mem = s.heapLimitMB;
-    snap("fps", s.fps);
-    snap("ms", s.cpuMs);
-    snap("gpu", s.gpuMs);
-    snap("mem", s.heapUsedMB);
-    const fps = s.series.fps;
-    const size = fps.data.length;
-    const delta = (fps.write - prevRingWrite + size) % size;
-    if (delta > 0) {
-      batchCount = delta;
-      prevRingWrite = fps.write;
-      lastBatchAt = performance.now();
-    }
-  });
-  let rafId = 0;
-  let disposed = false;
-  function setText(node, next, cache) {
-    if (cache.v === next) return;
-    node.textContent = next;
-    cache.v = next;
-  }
-  const labelCache = { v: "" };
-  const valueCache = { v: "" };
-  const unitCache = { v: "" };
-  const titleCache = { v: "" };
-  function update() {
-    if (disposed) return;
-    if (cachedW === 0 || cachedH === 0 || gfx === null) return;
-    const now = performance.now();
-    const t = Math.min(1, Math.max(0, (now - lastBatchAt) / STATS_BATCH_MS));
-    const ring = seriesFor(mode);
-    const size = ring.data.length;
-    const max = graphMax[mode] || 1;
-    const phase = batchCount * (1 - t);
-    const intPhase = Math.floor(phase);
-    const fracPhase = phase - intPhase;
-    const w = cachedW;
-    const h = cachedH;
-    gfx.clearRect(0, 0, w, h);
-    const color = MODE_COLORS[mode];
-    const samplePixelW = w / (BUFFER_SIZE - 1);
-    let mn = Infinity;
-    let mx = 0;
-    const baseRingIdx = ring.write - intPhase - BUFFER_SIZE + size * 2;
-    gfx.beginPath();
-    for (let i = -1; i < BUFFER_SIZE; i++) {
-      const ringIdx = (baseRingIdx + i) % size;
-      const v = ring.data[ringIdx];
-      if (i >= 0) {
-        if (v < mn) mn = v;
-        if (v > mx) mx = v;
-      }
-      const x = (i + fracPhase) * samplePixelW;
-      const yRaw = h - v / max * h * 0.85 - h * 0.05;
-      const y = yRaw < h * 0.05 ? h * 0.05 : yRaw;
-      if (i === -1) gfx.moveTo(x, y);
-      else gfx.lineTo(x, y);
-    }
-    gfx.lineTo(w, h);
-    gfx.lineTo(0, h);
-    gfx.closePath();
-    gfx.fillStyle = color;
-    gfx.globalAlpha = 0.33;
-    gfx.fill();
-    gfx.globalAlpha = 1;
-    gfx.beginPath();
-    for (let i = -1; i < BUFFER_SIZE; i++) {
-      const ringIdx = (baseRingIdx + i) % size;
-      const v = ring.data[ringIdx];
-      const x = (i + fracPhase) * samplePixelW;
-      const yRaw = h - v / max * h * 0.85 - h * 0.05;
-      const y = yRaw < h * 0.05 ? h * 0.05 : yRaw;
-      if (i === -1) gfx.moveTo(x, y);
-      else gfx.lineTo(x, y);
-    }
-    gfx.strokeStyle = color;
-    gfx.lineWidth = Math.max(1, window.devicePixelRatio || 1);
-    gfx.stroke();
-    if (hasLabel[mode]) {
-      sessionMin[mode] = Math.min(sessionMin[mode], mn);
-      sessionMax[mode] = Math.max(sessionMax[mode], mx);
-    }
-    const has = hasLabel[mode];
-    const lerped = prevLabel[mode] + (currLabel[mode] - prevLabel[mode]) * t;
-    const sMn = sessionMin[mode];
-    const sMx = sessionMax[mode];
-    setText(lblvL, MODE_LABEL[mode], labelCache);
-    setText(valueSpan, has ? fmtCached(mode, lerped) : "--", valueCache);
-    setText(unitSpan, MODE_VALUE_UNIT[mode], unitCache);
-    const nextTitle = sMn !== Infinity ? `${MODE_RANGE_UNIT[mode]} range: ${Math.round(sMn)}\u2013${Math.round(sMx)}` : "";
-    if (titleCache.v !== nextTitle) {
-      lblvL.title = nextTitle;
-      titleCache.v = nextTitle;
-    }
-  }
-  if (driver === "raf") {
-    const autoFrame = () => {
-      if (disposed) return;
-      rafId = requestAnimationFrame(autoFrame);
-      update();
-    };
-    rafId = requestAnimationFrame(autoFrame);
-  }
-  return {
-    element: bladeEl,
-    // In `'raf'` mode the internal loop already runs, so public `update()`
-    // is a no-op — we don't want to paint twice per frame when the host
-    // also (redundantly) drives it. In `'manual'` mode this is the only
-    // way the graph gets painted.
-    update: driver === "manual" ? update : () => {
-    },
-    dispose() {
-      disposed = true;
-      if (rafId !== 0) cancelAnimationFrame(rafId);
-      unsubscribe();
-      resizeObserver.disconnect();
-      blade.dispose();
-    }
-  };
+	const { rows = 2, driver = "raf" } = options;
+	let mode = "fps";
+	let modeIndex = 0;
+	const graphMax = {
+		fps: 120,
+		ms: 16.67,
+		gpu: 16.67,
+		mem: 256
+	};
+	const sessionMin = {
+		fps: Infinity,
+		ms: Infinity,
+		gpu: Infinity,
+		mem: Infinity
+	};
+	const sessionMax = {
+		fps: 0,
+		ms: 0,
+		gpu: 0,
+		mem: 0
+	};
+	const lblv = document.createElement("div");
+	lblv.className = "tp-lblv";
+	lblv.style.cursor = "pointer";
+	const lblvL = document.createElement("div");
+	lblvL.className = "tp-lblv_l";
+	lblvL.textContent = "fps";
+	lblv.appendChild(lblvL);
+	const lblvV = document.createElement("div");
+	lblvV.className = "tp-lblv_v";
+	lblv.appendChild(lblvV);
+	const fpsv = document.createElement("div");
+	fpsv.className = "tp-fpsv";
+	lblvV.appendChild(fpsv);
+	const fpsvG = document.createElement("div");
+	fpsvG.className = "tp-fpsv_g";
+	fpsv.appendChild(fpsvG);
+	const grlv = document.createElement("div");
+	grlv.className = "tp-grlv";
+	fpsvG.appendChild(grlv);
+	const canvas = document.createElement("canvas");
+	canvas.classList.add("tp-grlv_g");
+	canvas.style.cssText = `display:block;width:100%;height:calc(var(--cnt-usz, 20px) * ${rows})`;
+	canvas.width = 1;
+	canvas.height = 1;
+	grlv.appendChild(canvas);
+	const gfx = canvas.getContext("2d");
+	const fpsvL = document.createElement("div");
+	fpsvL.className = "tp-fpsv_l";
+	fpsvL.style.cssText = "background:rgba(0,2,28,0.65);padding:1px 4px;border-radius:2px;";
+	fpsv.appendChild(fpsvL);
+	const valueSpan = document.createElement("span");
+	valueSpan.className = "tp-fpsv_v";
+	valueSpan.textContent = "--";
+	fpsvL.appendChild(valueSpan);
+	const unitSpan = document.createElement("span");
+	unitSpan.className = "tp-fpsv_u";
+	unitSpan.textContent = "FPS";
+	fpsvL.appendChild(unitSpan);
+	const blade = parent.addBlade({ view: "separator" });
+	const bladeEl = blade.element;
+	bladeEl.innerHTML = "";
+	bladeEl.className = "tp-cntv";
+	bladeEl.style.cssText = "";
+	bladeEl.appendChild(lblv);
+	function applyMode() {
+		lblvL.textContent = mode;
+		unitSpan.textContent = MODE_UNITS[mode];
+	}
+	applyMode();
+	lblv.addEventListener("click", () => {
+		const state = client.state;
+		do {
+			modeIndex = (modeIndex + 1) % MODES.length;
+			mode = MODES[modeIndex];
+		} while (mode === "mem" && state.heapUsedMB === void 0 || mode === "gpu" && !state.gpuModeEnabled);
+		applyMode();
+	});
+	let cachedW = 0;
+	let cachedH = 0;
+	const resizeObserver = new ResizeObserver(([entry]) => {
+		if (!entry) return;
+		const r = entry.contentRect;
+		const dpr = window.devicePixelRatio || 1;
+		const w = Math.max(1, Math.round(r.width * dpr));
+		const h = Math.max(1, Math.round(r.height * dpr));
+		if (canvas.width !== w || canvas.height !== h) {
+			canvas.width = w;
+			canvas.height = h;
+		}
+		cachedW = w;
+		cachedH = h;
+	});
+	resizeObserver.observe(canvas);
+	const MODE_LABEL = {
+		fps: "fps",
+		ms: "ms",
+		gpu: "gpu",
+		mem: "mem"
+	};
+	const MODE_VALUE_UNIT = {
+		fps: "FPS",
+		ms: "MS",
+		gpu: "MS",
+		mem: "MB"
+	};
+	const MODE_RANGE_UNIT = {
+		fps: "FPS",
+		ms: "MS",
+		gpu: "GPU",
+		mem: "MB"
+	};
+	const MODE_DECIMALS = {
+		fps: 0,
+		ms: 1,
+		gpu: 1,
+		mem: 0
+	};
+	const MODE_SCALE = {
+		fps: 1,
+		ms: 10,
+		gpu: 10,
+		mem: 1
+	};
+	const fmtCache = {
+		fps: {
+			key: NaN,
+			str: ""
+		},
+		ms: {
+			key: NaN,
+			str: ""
+		},
+		gpu: {
+			key: NaN,
+			str: ""
+		},
+		mem: {
+			key: NaN,
+			str: ""
+		}
+	};
+	function fmtCached(m, v) {
+		const key = Math.round(v * MODE_SCALE[m]);
+		const c = fmtCache[m];
+		if (c.key === key) return c.str;
+		c.key = key;
+		c.str = v.toFixed(MODE_DECIMALS[m]);
+		return c.str;
+	}
+	function seriesFor(m) {
+		const s = client.state.series;
+		switch (m) {
+			case "fps": return s.fps;
+			case "ms": return s.cpuMs;
+			case "gpu": return s.gpuMs;
+			case "mem": return s.heapUsedMB;
+		}
+	}
+	const prevLabel = {
+		fps: 0,
+		ms: 0,
+		gpu: 0,
+		mem: 0
+	};
+	const currLabel = {
+		fps: 0,
+		ms: 0,
+		gpu: 0,
+		mem: 0
+	};
+	const hasLabel = {
+		fps: false,
+		ms: false,
+		gpu: false,
+		mem: false
+	};
+	let batchCount = 0;
+	let lastBatchAt = performance.now();
+	let prevRingWrite = 0;
+	const snap = (m, v) => {
+		if (v === void 0) return;
+		prevLabel[m] = hasLabel[m] ? currLabel[m] : v;
+		currLabel[m] = v;
+		hasLabel[m] = true;
+	};
+	const unsubscribe = client.addListener((s) => {
+		if (s.heapLimitMB !== void 0) graphMax.mem = s.heapLimitMB;
+		snap("fps", s.fps);
+		snap("ms", s.cpuMs);
+		snap("gpu", s.gpuMs);
+		snap("mem", s.heapUsedMB);
+		const fps = s.series.fps;
+		const size = fps.data.length;
+		const delta = (fps.write - prevRingWrite + size) % size;
+		if (delta > 0) {
+			batchCount = delta;
+			prevRingWrite = fps.write;
+			lastBatchAt = performance.now();
+		}
+	});
+	let rafId = 0;
+	let disposed = false;
+	function setText(node, next, cache) {
+		if (cache.v === next) return;
+		node.textContent = next;
+		cache.v = next;
+	}
+	const labelCache = { v: "" };
+	const valueCache = { v: "" };
+	const unitCache = { v: "" };
+	const titleCache = { v: "" };
+	function update() {
+		if (disposed) return;
+		if (cachedW === 0 || cachedH === 0 || gfx === null) return;
+		const now = performance.now();
+		const t = Math.min(1, Math.max(0, (now - lastBatchAt) / STATS_BATCH_MS));
+		const ring = seriesFor(mode);
+		const size = ring.data.length;
+		const max = graphMax[mode] || 1;
+		const phase = batchCount * (1 - t);
+		const intPhase = Math.floor(phase);
+		const fracPhase = phase - intPhase;
+		const w = cachedW;
+		const h = cachedH;
+		gfx.clearRect(0, 0, w, h);
+		const color = MODE_COLORS[mode];
+		const samplePixelW = w / (BUFFER_SIZE - 1);
+		let mn = Infinity;
+		let mx = 0;
+		const baseRingIdx = ring.write - intPhase - BUFFER_SIZE + size * 2;
+		gfx.beginPath();
+		for (let i = -1; i < BUFFER_SIZE; i++) {
+			const ringIdx = (baseRingIdx + i) % size;
+			const v = ring.data[ringIdx];
+			if (i >= 0) {
+				if (v < mn) mn = v;
+				if (v > mx) mx = v;
+			}
+			const x = (i + fracPhase) * samplePixelW;
+			const yRaw = h - v / max * h * .85 - h * .05;
+			const y = yRaw < h * .05 ? h * .05 : yRaw;
+			if (i === -1) gfx.moveTo(x, y);
+			else gfx.lineTo(x, y);
+		}
+		gfx.lineTo(w, h);
+		gfx.lineTo(0, h);
+		gfx.closePath();
+		gfx.fillStyle = color;
+		gfx.globalAlpha = .33;
+		gfx.fill();
+		gfx.globalAlpha = 1;
+		gfx.beginPath();
+		for (let i = -1; i < BUFFER_SIZE; i++) {
+			const ringIdx = (baseRingIdx + i) % size;
+			const v = ring.data[ringIdx];
+			const x = (i + fracPhase) * samplePixelW;
+			const yRaw = h - v / max * h * .85 - h * .05;
+			const y = yRaw < h * .05 ? h * .05 : yRaw;
+			if (i === -1) gfx.moveTo(x, y);
+			else gfx.lineTo(x, y);
+		}
+		gfx.strokeStyle = color;
+		gfx.lineWidth = Math.max(1, window.devicePixelRatio || 1);
+		gfx.stroke();
+		if (hasLabel[mode]) {
+			sessionMin[mode] = Math.min(sessionMin[mode], mn);
+			sessionMax[mode] = Math.max(sessionMax[mode], mx);
+		}
+		const has = hasLabel[mode];
+		const lerped = prevLabel[mode] + (currLabel[mode] - prevLabel[mode]) * t;
+		const sMn = sessionMin[mode];
+		const sMx = sessionMax[mode];
+		setText(lblvL, MODE_LABEL[mode], labelCache);
+		setText(valueSpan, has ? fmtCached(mode, lerped) : "--", valueCache);
+		setText(unitSpan, MODE_VALUE_UNIT[mode], unitCache);
+		const nextTitle = sMn !== Infinity ? `${MODE_RANGE_UNIT[mode]} range: ${Math.round(sMn)}–${Math.round(sMx)}` : "";
+		if (titleCache.v !== nextTitle) {
+			lblvL.title = nextTitle;
+			titleCache.v = nextTitle;
+		}
+	}
+	if (driver === "raf") {
+		const autoFrame = () => {
+			if (disposed) return;
+			rafId = requestAnimationFrame(autoFrame);
+			update();
+		};
+		rafId = requestAnimationFrame(autoFrame);
+	}
+	return {
+		element: bladeEl,
+		update: driver === "manual" ? update : () => {},
+		dispose() {
+			disposed = true;
+			if (rafId !== 0) cancelAnimationFrame(rafId);
+			unsubscribe();
+			resizeObserver.disconnect();
+			blade.dispose();
+		}
+	};
 }
-export {
-  addStatsGraph
-};
+//#endregion
+export { addStatsGraph };
+
 //# sourceMappingURL=stats-graph.js.map