fix mousepos in fullscreen

CHANGELOG.md

@@ -1,3 +1,8 @@
+### v3000.1.11
+- added option `kaboom({ focus: false })` to disable focus on start
+- fixed `rand()` typing for numbers
+- fixed mouse position in fullscreen
+
 ### v3000.1.10
 - fix test code accidentally getting shipped (where a screenshot will be downloaded every time you press space)
 

src/app.ts

@@ -13,6 +13,7 @@ import type {
 
 import {
 	Vec2,
+	map,
 } from "./math"
 
 import {
@@ -608,9 +609,30 @@ export default (opt: {
 	const docEvents: EventList<DocumentEventMap> = {}
 	const winEvents: EventList<WindowEventMap> = {}
 
+	const pd = opt.pixelDensity || window.devicePixelRatio || 1
+
 	canvasEvents.mousemove = (e) => {
 		const mousePos = new Vec2(e.offsetX, e.offsetY)
 		const mouseDeltaPos = new Vec2(e.movementX, e.movementY)
+		if (isFullscreen()) {
+			const cw = state.canvas.width / pd
+			const ch = state.canvas.height / pd
+			const ww = window.innerWidth
+			const wh = window.innerHeight
+			const rw = ww / wh
+			const rc = cw / ch
+			if (rw > rc) {
+				const ratio = wh / ch
+				const offset = (ww - (cw * ratio)) / 2
+				mousePos.x = map(e.offsetX - offset, 0, cw * ratio, 0, cw)
+				mousePos.y = map(e.offsetY, 0, ch * ratio, 0, ch)
+			} else {
+				const ratio = ww / cw
+				const offset = (wh - (ch * ratio)) / 2
+				mousePos.x = map(e.offsetX , 0, cw * ratio, 0, cw)
+				mousePos.y = map(e.offsetY - offset, 0, ch * ratio, 0, ch)
+			}
+		}
 		state.events.onOnce("input", () => {
 			state.isMouseMoved = true
 			state.mousePos = mousePos

src/kaboom.ts

@@ -697,7 +697,6 @@ export default (gopt: KaboomOpt = {}): KaboomCtx => {
 			)
 		}
 
-		// gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true)
 		gl.enable(gl.BLEND)
 		gl.blendFuncSeparate(
 			gl.SRC_ALPHA,
@@ -861,10 +860,10 @@ export default (gopt: KaboomOpt = {}): KaboomCtx => {
 
 	const audio = (() => {
 
-		// TODO: handle when audio context is unavailable
 		const ctx = new (
 			window.AudioContext || (window as any).webkitAudioContext
 		)() as AudioContext
+
 		const masterNode = ctx.createGain()
 		masterNode.connect(ctx.destination)
 
@@ -3072,7 +3071,6 @@ export default (gopt: KaboomOpt = {}): KaboomCtx => {
 		let onCurCompCleanup = null
 		let paused = false
 
-		// TODO
 		// @ts-ignore
 		const obj: GameObj = {
 
@@ -3323,20 +3321,26 @@ export default (gopt: KaboomOpt = {}): KaboomCtx => {
 							? this.isAncestorOf(obj)
 							: obj.parent === this
 					}
+					const events = []
 					// TODO: handle when object add / remove tags
 					// TODO: clean up when obj destroyed
-					onAdd((obj) => {
+					events.push(onAdd((obj) => {
 						if (isChild(obj) && obj.is(t)) {
 							list.push(obj)
 						}
-					})
-					onDestroy((obj) => {
+					}))
+					events.push(onDestroy((obj) => {
 						if (isChild(obj) && obj.is(t)) {
 							const idx = list.findIndex((o) => o.id === obj.id)
 							if (idx !== -1) {
 								list.splice(idx, 1)
 							}
 						}
+					}))
+					this.onDestroy(() => {
+						for (const ev of events) {
+							ev.cancel()
+						}
 					})
 				}
 				return list
@@ -4973,7 +4977,6 @@ export default (gopt: KaboomOpt = {}): KaboomCtx => {
 		}
 	}
 
-	// TODO: all children should be fixed
 	function fixed(): FixedComp {
 		return {
 			id: "fixed",
@@ -6754,31 +6757,6 @@ export default (gopt: KaboomOpt = {}): KaboomCtx => {
 		const cw = gl.drawingBufferWidth / pd
 		const ch = gl.drawingBufferHeight / pd
 
-		if (app.isFullscreen()) {
-			const ww = window.innerWidth
-			const wh = window.innerHeight
-			const rw = ww / wh
-			const rc = cw / ch
-			if (rw > rc) {
-				const sw = window.innerHeight * rc
-				gfx.viewport = {
-					x: (ww - sw) / 2,
-					y: 0,
-					width: sw,
-					height: wh,
-				}
-			} else {
-				const sh = window.innerWidth / rc
-				gfx.viewport = {
-					x: 0,
-					y: (wh - sh) / 2,
-					width: ww,
-					height: sh,
-				}
-			}
-			return
-		}
-
 		if (gopt.letterbox) {
 
 			if (!gopt.width || !gopt.height) {
@@ -7139,7 +7117,9 @@ export default (gopt: KaboomOpt = {}): KaboomCtx => {
 		}
 	}
 
-	app.canvas().focus()
+	if (gopt.focus !== false) {
+		app.canvas().focus()
+	}
 
 	return ctx
 

src/math.ts

@@ -627,7 +627,7 @@ export class RNG {
 			this.genNumber(a.b, b.b),
 		)
 	}
-	genAny<T extends RNGValue>(...args: T[]): T {
+	genAny<T = RNGValue>(...args: T[]): T {
 		if (args.length === 0) {
 			return this.gen() as T
 		} else if (args.length === 1) {

src/types.ts

@@ -1659,7 +1659,7 @@ export interface KaboomCtx {
 	 * rand(rgb(255, 255, 255))
 	 * ```
 	 */
-	rand<T extends RNGValue>(n: T): T,
+	rand<T = RNGValue>(n: T): T,
 	/**
 	 * Get a random value between the given bound.
 	 *
@@ -1674,7 +1674,7 @@ export interface KaboomCtx {
 	 * ])
 	 * ```
 	 */
-	rand<T extends RNGValue>(a: T, b: T): T,
+	rand<T = RNGValue>(a: T, b: T): T,
 	/**
 	 * rand() but floored to integer.
 	 *
@@ -2537,6 +2537,12 @@ export interface KaboomOpt<T extends PluginList<any> = any> {
 	 * @since v3000.0
 	 */
 	maxFPS?: number,
+	/**
+	 * If focus on the canvas on start (default true).
+	 *
+	 * @since v3000.2
+	 */
+	focus?: boolean,
 	/**
 	 * If import all kaboom functions to global (default true).
 	 */
@@ -3909,7 +3915,7 @@ export declare class RNG {
 	genNumber(a: number, b: number): number
 	genVec2(a: Vec2, b?: Vec2): Vec2
 	genColor(a: Color, b: Color): Color
-	genAny<T extends RNGValue>(...args: T[]): T
+	genAny<T = RNGValue>(...args: T[]): T
 }
 
 export interface Comp {