Remove game import from Container, default dimensions to Infinity by obiot · Pull Request #1348 · melonjs/melonJS

obiot · 2026-04-02T23:47:42Z

Summary

Container constructor no longer imports or references the global game singleton
Default width/height changed from game.viewport lookup to Infinity (no clipping)
Same effective behavior since all Container creations (internal and examples) pass explicit dimensions
Updated JSDoc to document Infinity defaults

Test plan

All 1983 tests pass
New tests: default Infinity dimensions, position defaults, explicit dimensions, children with Infinity container, no-clip behavior

🤖 Generated with Claude Code

Container constructor no longer imports or references the global game singleton. Default width/height changed from game.viewport dimensions to Infinity (no clipping). This is the same effective behavior since all actual Container creations pass explicit dimensions. Updated JSDoc to document Infinity defaults. Added tests: default dimensions, position defaults, explicit dimensions, children with Infinity container, no-clip behavior. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Copilot

Pull request overview

This PR decouples Container from the global game singleton by removing the game.viewport-based default sizing, and instead defaults container dimensions to Infinity to avoid implicit clipping when dimensions aren’t provided.

Changes:

Removed game import/usage from Container and simplified the constructor to pass through width/height directly.
Changed default Container width/height to Infinity and updated the constructor JSDoc accordingly.
Added tests covering default dimensions and some basic behaviors when dimensions are Infinity.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
packages/melonjs/src/renderable/container.js	Removes dependency on `game.viewport` and defaults container dimensions to `Infinity`.
packages/melonjs/tests/container.spec.js	Adds test cases for default `Container` dimensions and related expectations.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/melonjs/tests/container.spec.js

packages/melonjs/src/renderable/container.js

- Container: Infinity defaults, isFinite() guard in updateBounds, anchorPoint (0,0) - ImageLayer: uses parentApp for viewport/renderer, deferred to onActivateEvent - TMXTileMap: resolves viewport from container tree via getRootAncestor().app - Input: pointer/pointerevent receive app via GAME_INIT instead of game singleton - Stage: onDestroyEvent(app) now passes Application instance - video.js: DOM event listeners moved to Application.init() - video.renderer, video.init(), video.getParent(), device.onReady() deprecated - Application: improved JSDoc, DOM event bridge for resize/orientation/scroll - BitmapTextData: fix circular import (pool.ts <-> bitmaptextdata.ts) - All me.game.* JSDoc references updated to app.* - README hello world updated to use new Application() pattern - Platformer and UI examples migrated to Application entry point - New tests: container (Infinity/isFinite/clipping), ImageLayer (parentApp) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

…string Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Copilot

Pull request overview

Copilot reviewed 36 out of 36 changed files in this pull request and generated 5 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-04T04:17:45Z

packages/melonjs/src/renderable/container.js

 		const bounds = this.getBounds();

-		// call parent method
-		super.updateBounds(absolute);
+		if (this.isFinite()) {
+			// call parent method only when container has finite dimensions
+			super.updateBounds(absolute);


For Infinity-sized containers, updateBounds() skips super.updateBounds() but does not clear/reset the existing bounds before aggregating child bounds. Since non-finite bounds are initialized with max = Infinity, subsequent bounds.addBounds(childBounds) will keep the container bounds infinite and won’t become child-derived. Clear/reset bounds (or start from the first child bounds with clear=true) when !this.isFinite() and enableChildBoundsUpdate is enabled.

Copilot · 2026-04-04T04:17:46Z

packages/melonjs/src/renderable/imagelayer.js

 	// called when the layer is added to the game world or a container
 	onActivateEvent() {
-		// register to the viewport change notification
+		const viewport = this.parentApp.viewport;
+		// set the initial size to match the viewport
+		this.resize(viewport.width, viewport.height);
+		this.createPattern();


ImageLayer.onActivateEvent() dereferences this.parentApp immediately. Container.addChild() invokes onActivateEvent even when the container tree is not attached to a root/world container, so parentApp may be unavailable and this will throw. Add a guard (throw a clear error or defer initialization until attached) before using parentApp.viewport/renderer.

Copilot · 2026-04-04T04:17:46Z

packages/melonjs/src/input/pointerevent.ts

 		if (pointerEventTarget === null || pointerEventTarget === undefined) {
 			// default pointer event target
-			pointerEventTarget = game.renderer.getCanvas();
+			pointerEventTarget = _app.renderer.getCanvas();
 		}


enablePointerEvent() uses _app.renderer.getCanvas() as the default event target, but _app is only assigned via the GAME_INIT event. If bindPointer() / registerPointerEvent() is called before an Application is constructed, this will crash. Add a defensive check and throw a clear initialization error when _app is undefined.

Copilot · 2026-04-04T04:17:46Z

packages/melonjs/src/application/application.ts

+		// bridge DOM events to the melonJS event system
+		globalThis.addEventListener("resize", (e) => {
+			emit(WINDOW_ONRESIZE, e);
+		});
+		globalThis.addEventListener("orientationchange", (e) => {


The constructor registers global resize/orientationchange/scroll listeners via globalThis.addEventListener(...), but destroy() does not remove them. Creating/destroying multiple Application instances will leak listeners and duplicate emitted events. Store handler references and unregister them in destroy().

Copilot · 2026-04-04T04:17:46Z

packages/melonjs/src/level/tiled/TMXTileMap.js

+		const app = container.getRootAncestor().app;
+
 		function _setBounds(width, height) {


TMXTileMap.addTo() resolves const app = container.getRootAncestor().app; unconditionally. If container is not attached to a root/world container, getRootAncestor() can return undefined and this will throw even when setViewportBounds is false. Move app resolution inside the setViewportBounds === true branch and add a defensive check when no root/app is available.

Suggested change

const app = container.getRootAncestor().app;

function _setBounds(width, height) {

function _setBounds(width, height) {

const rootAncestor = container.getRootAncestor();

const app = rootAncestor && rootAncestor.app;

if (!app || !app.viewport) {

return;

}

- Container: clear bounds before child aggregation for infinite containers - ImageLayer: throw if parentApp unavailable in onActivateEvent - Input: throw if Application not initialized when enabling pointer events - Application: store DOM event handlers, remove them in destroy() - TMXTileMap: move app resolution inside setViewportBounds branch Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Copilot

Pull request overview

Copilot reviewed 36 out of 36 changed files in this pull request and generated 6 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-04T06:14:13Z

packages/melonjs/src/application/application.ts

+		globalThis.addEventListener("resize", this._onResize);
+		globalThis.addEventListener("orientationchange", this._onOrientationChange);
+		if (device.screenOrientation) {
+			globalThis.screen.orientation.onchange = this._onOrientationChange;


Application.init() assigns screen.orientation.onchange directly and destroy() unconditionally clears it. This can clobber another Application instance’s handler (or any consumer handler) when multiple apps exist or when an app is destroyed out of order. Prefer screen.orientation.addEventListener('change', ...)/removeEventListener, or only clear onchange if it still equals this instance’s handler (restore previous handler otherwise).

Suggested change

globalThis.screen.orientation.onchange = this._onOrientationChange;

globalThis.screen.orientation.addEventListener(

"change",

this._onOrientationChange,

);

Copilot · 2026-04-04T06:14:13Z

packages/melonjs/src/application/application.ts

+				this._onOrientationChange!,
+			);
+			globalThis.removeEventListener("scroll", this._onScroll!);
+			if (device.screenOrientation) {


destroy() sets screen.orientation.onchange = null without checking whether another Application (or user code) has since installed a different handler. This can break orientation handling in multi-app scenarios. Only clear it if the current value matches this instance’s handler, or switch to add/removeEventListener for ScreenOrientation change events.

Suggested change

if (device.screenOrientation) {

if (

device.screenOrientation &&

globalThis.screen.orientation.onchange === this._onOrientationChange

) {

Copilot · 2026-04-04T06:14:13Z

packages/melonjs/src/renderable/imagelayer.js

@@ -123,15 +119,23 @@ export default class ImageLayer extends Sprite {
 				this.repeatY = true;
 				break;
 		}


The repeat setter no longer triggers a resize / pattern rebuild. If repeat is changed at runtime after activation, width/height and _pattern can become inconsistent until a viewport resize happens. Consider updating size (this.resize(viewport.width, viewport.height)) and recreating the pattern when parentApp is available and the layer is active.

Suggested change

}

}

if (this.parentApp && this.parentApp.viewport) {

const viewport = this.parentApp.viewport;

this.resize(viewport.width, viewport.height);

this.createPattern();

}

Copilot · 2026-04-04T06:14:14Z

packages/melonjs/src/renderable/container.js

+ * In this case, anchorPoint is treated as (0, 0) since there is no meaningful
+ * center for an infinite area. Bounds are then derived entirely from children
+ * when {@link Container#enableChildBoundsUpdate} is enabled.


The doc/comment says the container anchorPoint is “always” (0,0) / “treated as” (0,0), but nothing prevents users from changing anchorPoint after construction (which can reintroduce Infinity * anchor issues). Consider clarifying this as a default (not an invariant), or enforcing it (e.g. override setter / clamp to 0 when width/height are non-finite).

Suggested change

* In this case, anchorPoint is treated as (0, 0) since there is no meaningful

* center for an infinite area. Bounds are then derived entirely from children

* when {@link Container#enableChildBoundsUpdate} is enabled.

* In this case, the default anchorPoint should remain at (0, 0), since there is

* no meaningful center for an infinite area. Bounds are then derived entirely

* from children when {@link Container#enableChildBoundsUpdate} is enabled.

Copilot · 2026-04-04T06:14:14Z

README.md

+const app = new Application(1218, 562, {
+    parent: "screen",
+    scale: "auto",
+    backgroundColor: "#202020",
 });
+
+// set a gray background color


In this example, backgroundColor passed to new Application(...) only affects the parent element CSS background (per ApplicationSettings docs), while app.world.backgroundColor.parseCSS(...) controls the rendered clear color. Having both (and the comment “set a gray background color”) is confusing—consider either removing the option or adjusting the comments to reflect the distinction.

Suggested change

const app = new Application(1218, 562, {

parent: "screen",

scale: "auto",

backgroundColor: "#202020",

});

// set a gray background color

// `backgroundColor` here sets the parent element CSS background

const app = new Application(1218, 562, {

parent: "screen",

scale: "auto",

backgroundColor: "#202020",

});

// set the rendered world clear color to gray

Copilot · 2026-04-04T06:14:14Z

packages/melonjs/src/system/bootstrap.ts

 /**
 * Initialize the melonJS library.
- * This is called automatically in two cases:
- * - On DOMContentLoaded, unless {@link skipAutoInit} is set to true
- * - By {@link Application.init} when creating a new game instance
- *
+ * This is called automatically by the {@link Application} constructor.
 * Multiple calls are safe — boot() is idempotent.
- * @see {@link skipAutoInit}
+ * When using {@link Application} directly, calling boot() manually is not needed.
+ * @see {@link Application}


The updated JSDoc for boot() says it’s “called automatically by the Application constructor”, but the entrypoint still auto-calls boot() on DOMContentLoaded when skipAutoInit is false (see src/index.ts). Consider updating the doc to reflect both auto-init paths (DOMContentLoaded + Application.init/constructor) so users relying on skipAutoInit aren’t misled.

Copilot AI review requested due to automatic review settings April 2, 2026 23:47

Copilot started reviewing on behalf of obiot April 2, 2026 23:48 View session

Copilot AI reviewed Apr 2, 2026

View reviewed changes

packages/melonjs/tests/container.spec.js Show resolved Hide resolved

packages/melonjs/src/renderable/container.js Show resolved Hide resolved

obiot mentioned this pull request Apr 3, 2026

clipRect: potential issues with transformed containers and scissor state cleanup #1349

Open

obiot requested a review from Copilot April 4, 2026 04:10

Copilot started reviewing on behalf of obiot April 4, 2026 04:10 View session

obiot and others added 2 commits April 4, 2026 12:14

Fix type error in eventEmitter test: parent expects HTMLElement, not …

aae62c1

…string Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Fix ApplicationSettings parent type to accept string ID or HTMLElement

64bb806

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Copilot AI reviewed Apr 4, 2026

View reviewed changes

obiot and others added 2 commits April 4, 2026 12:21

Fix no-confusing-void-expression lint errors in DOM event handlers

a361299

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Copilot AI review requested due to automatic review settings April 4, 2026 06:08

Copilot started reviewing on behalf of obiot April 4, 2026 06:08 View session

obiot merged commit 6472226 into master Apr 4, 2026
8 checks passed

obiot deleted the refactor/container-no-game branch April 4, 2026 06:11

Copilot AI reviewed Apr 4, 2026

View reviewed changes

		const app = container.getRootAncestor().app;

		function _setBounds(width, height) {

-			globalThis.screen.orientation.onchange = this._onOrientationChange;
+			globalThis.screen.orientation.addEventListener(
+				"change",
+				this._onOrientationChange,
+			);

-			if (device.screenOrientation) {
+			if (
+				device.screenOrientation &&
+				globalThis.screen.orientation.onchange === this._onOrientationChange
+			) {

Uh oh!

Conversation

obiot commented Apr 2, 2026

Summary

Test plan

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants