fix: select an asset without prior hover (#23)

Author: mateuszJS

integration-tests/tests/asset-basic-transform.spec.ts

@@ -0,0 +1,72 @@
+// npx playwright test asset-basic-transform.spec.ts --debug
+
+import { test, expect } from '@playwright/test'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const PAGE_WIDTH = 1000
+const PAGE_HEIGHT = 700
+const center = { x: PAGE_WIDTH / 2, y: PAGE_HEIGHT / 2 }
+
+test('asset performs basic transformations', async ({ page }, testinfo) => {
+  if (process.env.CI) {
+    test.skip()
+    return
+  }
+
+  testinfo.snapshotSuffix = '' // by default is `process.platform`
+
+  // and it produces different screenshot name base on operating system
+  // while we want to make app consistent on all operating systems
+
+  // To finally check if WebGPU is supported
+  // await page.goto('https://webgpureport.org/');
+  // await expect(page).toHaveScreenshot('webgpu-report.png');
+
+  await page.setViewportSize({ width: PAGE_WIDTH, height: PAGE_HEIGHT })
+  await page.goto('/')
+  await page.waitForLoadState('networkidle')
+  await page.evaluate(() =>
+    window.addEventListener('mousemove', (e) => console.log(e.clientX, e.clientY))
+  ) // to display cursor position during debugging
+  // helps to copy position here
+
+  /** =========PNG IMAGE UPLOAD============ */
+  const fileInput = page.locator('input[type="file"]')
+  const testImagePath = path.join(__dirname, '../image-sample.png')
+  await fileInput.setInputFiles(testImagePath)
+
+  const canvas = page.locator('canvas')
+
+  // select asset
+  await page.mouse.move(center.x, center.y)
+  await page.mouse.down()
+  await page.mouse.up()
+
+  // move
+  await page.mouse.down()
+  await page.mouse.move(300, 300)
+  await page.mouse.up()
+  await expect(canvas).toHaveScreenshot('move-image.png')
+
+  // rotate
+  await page.mouse.down()
+  await page.mouse.move(573, 533)
+  await page.mouse.up()
+  await expect(canvas).toHaveScreenshot('rotate-image.png')
+
+  // scale with top middle handler
+  await page.mouse.down()
+  await page.mouse.move(320, 264)
+  await page.mouse.up()
+  await expect(canvas).toHaveScreenshot('use-top-scale-ui.png')
+
+  // TODO: do rotation test
+
+  // scale with top left andler
+  await page.mouse.down()
+  await page.mouse.move(950, 400)
+  await page.mouse.up()
+  await expect(canvas).toHaveScreenshot('use-top-left-scale-ui.png')
+})

integration-tests/tests/asset-basic-transform.spec.ts-snapshots/move-image-chromium.png

@@ -109,6 +109,14 @@ export default class PickManager {
       await this.pickBuffer.mapAsync(GPUMapMode.READ, 0, 4 * NUM_PIXELS)
       const [id] = new Uint32Array(this.pickBuffer.getMappedRange(0, 4 * NUM_PIXELS))
       on_update_pick(id)
+
+      if (pointer.downCallback) {
+        // to me 100% precise we should also check timestamp if pickign started after the click happened
+        // but not sure if it's possible to expose this issue
+        pointer.downCallback()
+        pointer.downCallback = null // reset callback after use
+      }
+
       this.pickBuffer.unmap()
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
     } catch (err) {

integration-tests/tests/asset-basic-transform.spec.ts-snapshots/rotate-image-chromium.png

@@ -1,6 +1,10 @@
 import { on_pointer_move, on_pointer_down, on_pointer_up } from '../logic/index.zig'
 
-export const pointer = { x: 0, y: 0 }
+export const pointer = {
+  x: 0,
+  y: 0,
+  downCallback: null as VoidFunction | null,
+}
 
 export default function initMouseController(canvas: HTMLCanvasElement) {
   pointer.x = 0
@@ -19,8 +23,11 @@ export default function initMouseController(canvas: HTMLCanvasElement) {
     on_pointer_move(pointer.x, canvas.height - pointer.y)
   })
 
-  canvas.addEventListener('mousedown', () => {
-    on_pointer_down(pointer.x, canvas.height - pointer.y)
+  canvas.addEventListener('mousedown', (e) => {
+    updatePointer(e)
+    pointer.downCallback = () => {
+      on_pointer_down(pointer.x, canvas.height - pointer.y)
+    }
   })
 
   canvas.addEventListener('mouseup', () => {

integration-tests/tests/asset-basic-transform.spec.ts-snapshots/select-image-chromium.png

@@ -10,6 +10,7 @@ import getCanvasMatrix from 'getCanvasMatrix'
 import PickManager from 'WebGPU/pick'
 import { canvas_render, picks_render, connect_web_gpu_programs } from 'logic/index.zig'
 import { TextureSource } from '.'
+import { pointer } from 'WebGPU/pointer'
 
 export const transformMatrix = new Float32Array()
 export const MAP_BACKGROUND_SCALE = 1000
@@ -43,6 +44,7 @@ export default function runCreator(
   })
 
   let rafId = 0
+  const lastPickPointer: Point = { x: 0, y: 0 }
 
   function draw(now: DOMHighResTimeStamp) {
     const encoder = device.createCommandEncoder()
@@ -52,16 +54,21 @@ export default function runCreator(
     canvas_render()
     canvasPass.end()
 
-    pickMatrix = pickManager.createMatrix(canvas, canvasMatrix)
-    const pick = pickManager.startPicking(encoder)
-    pickPass = pick.pass
-    picks_render()
-    pick.end()
+    if (lastPickPointer.x !== pointer.x || lastPickPointer.y !== pointer.y) {
+      lastPickPointer.x = pointer.x
+      lastPickPointer.y = pointer.y
+      pickMatrix = pickManager.createMatrix(canvas, canvasMatrix)
+      const pick = pickManager.startPicking(encoder)
+      pickPass = pick.pass
+      picks_render()
+      pick.end()
+    }
 
     const commandBuffer = encoder.finish()
     device.queue.submit([commandBuffer])
 
     pickManager.asyncPick()
+
     rafId = requestAnimationFrame(draw)
   }