@inglorious/renderer-2d 0.8.0 → 0.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/renderer-2d",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "A renderer for the Inglorious Engine, using the Context2D of the Canvas API.",
   "author": "IceOnFire <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
@@ -24,12 +24,12 @@
     "access": "public"
   },
   "dependencies": {
-    "@inglorious/engine": "2.1.0",
-    "@inglorious/utils": "3.5.0"
+    "@inglorious/engine": "2.1.1",
+    "@inglorious/utils": "3.5.1"
   },
   "peerDependencies": {
-    "@inglorious/engine": "2.1.0",
-    "@inglorious/utils": "3.5.0"
+    "@inglorious/engine": "2.1.1",
+    "@inglorious/utils": "3.5.1"
   },
   "devDependencies": {
     "eslint": "^9.34.0",

package/src/coordinates.js

@@ -0,0 +1,33 @@
+import { v } from "@inglorious/utils/v.js"
+
+const NO_Y = 0
+const HALF = 2
+
+export function createCoordinateConverter(canvas, api) {
+  return (clientX, clientY) => {
+    const {
+      left,
+      bottom,
+      width: canvasWidth,
+      height: canvasHeight,
+    } = canvas.getBoundingClientRect()
+
+    const x = clientX - left
+    const y = bottom - clientY
+
+    const game = api.getEntity("game")
+    const [gameWidth, gameHeight] = game.size
+
+    const scaleX = canvasWidth / gameWidth
+    const scaleY = canvasHeight / gameHeight
+    const scale = Math.min(scaleX, scaleY)
+
+    const scaledGameWidth = gameWidth * scale
+    const scaledGameHeight = gameHeight * scale
+
+    const offsetX = (canvasWidth - scaledGameWidth) / HALF
+    const offsetY = (canvasHeight - scaledGameHeight) / HALF
+
+    return v((x - offsetX) / scale, NO_Y, (y - offsetY) / scale)
+  }
+}

package/src/rendering-behavior.js

@@ -1,10 +1,14 @@
 import { trackMouse } from "@inglorious/engine/behaviors/input/mouse.js"
 import { trackTouch } from "@inglorious/engine/behaviors/input/touch.js"
 
+import { createCoordinateConverter } from "./coordinates.js"
+
 const ORIGIN = 0
 const HALF = 2
 
 export function rendering(canvas) {
+  canvas.style.touchAction = "none"
+
   const ctx = canvas.getContext("2d")
 
   let _onMouseMove = null
@@ -49,7 +53,13 @@ export function rendering(canvas) {
         ctx.imageSmoothingEnabled = false
       }
 
-      const { onMouseMove, onClick, onWheel } = trackMouse(canvas, api)
+      const toGamePosition = createCoordinateConverter(canvas, api)
+
+      const { onMouseMove, onClick, onWheel } = trackMouse(
+        canvas,
+        api,
+        toGamePosition,
+      )
       _onMouseMove = onMouseMove
       _onClick = onClick
       _onWheel = onWheel
@@ -58,7 +68,11 @@ export function rendering(canvas) {
       canvas.addEventListener("click", _onClick)
       canvas.addEventListener("wheel", _onWheel)
 
-      const { onTouchStart, onTouchMove, onTouchEnd } = trackTouch(canvas, api)
+      const { onTouchStart, onTouchMove, onTouchEnd } = trackTouch(
+        canvas,
+        api,
+        toGamePosition,
+      )
       _onTouchStart = onTouchStart
       _onTouchMove = onTouchMove
       _onTouchEnd = onTouchEnd