feat: Resize and rotation (#14)

* add ui to transform an asset

* trying to make transofrmation work wtiout matricies

* introduce matricies

* update tests

* mainy fixed typos and update test to use new parameters

Author: mateuszJS

ADRs/points vs matrix

@@ -0,0 +1,10 @@
+I have two options how assets(positon/scale/rotation)  can stored.
+a) four points, each represents one corner
+b) width, height + 3x3 matrix
+
+Seems like matrix could simplify a lot of transformations but at the same time
+I need to store points wit UV coordinates anyway.
+
+Thats why for now I are going to stick with storing assets in a from of four points, each point is x,y,u,v.
+For transformations like scaling, rotations I are going to use matricies.
+For transition is not useful since it's super easy to just add cursor position to points.

ADRs/y-axis coords

@@ -0,0 +1,7 @@
+I've decided to stay with mathematically correct y axis(growing up).
+
+Using popular method of coordinates for screens is y axis growing down. It introduces a lot of noise and
+missunderstanding into calculating, especially those angle related.
+
+Also we do flip the textures while loading to be sure that
+(0,0) is bottom left corner, (1,1) is top right corner so we operate in correct cartesian space.

integration-tests/index.ts

@@ -1,24 +1,49 @@
 import initCreator from '../src/index'
-// import SampleImg from './image-sample.png'
+import SampleImg from './image-sample.png'
 
-let new_asset_id = 1000
+let new_asset_id = 1001
+
+const params = new URLSearchParams(document.location.search)
+const isSampleParam = params.has('sample') // is the string "Jonathan"
 
 async function test() {
   const canvas = document.querySelector<HTMLCanvasElement>('canvas')!
   const creator = await initCreator(
     canvas,
-    [
-      // {
-      //   id: 1000,
-      //   points: [
-      //     { x: 84.5, y: 71.5, u: 0, v: 0 },
-      //     { x: 688.5, y: 71.5, u: 1, v: 0 },
-      //     { x: 688.5, y: 675.5, u: 1, v: 1 },
-      //     { x: 84.5, y: 675.5, u: 0, v: 1 },
-      //   ],
-      //   url: SampleImg,
-      // },
-    ],
+    isSampleParam
+      ? [
+          {
+            id: 1000,
+            points: [
+              {
+                u: 0,
+                v: 1,
+                x: 106.5999984741211,
+                y: 693.9000244140625,
+              },
+              {
+                u: 1,
+                v: 1,
+                x: 723.4000244140625,
+                y: 693.9000244140625,
+              },
+              {
+                u: 1,
+                v: 0,
+                x: 723.4000244140625,
+                y: 77.0999984741211,
+              },
+              {
+                u: 0,
+                v: 0,
+                x: 106.5999984741211,
+                y: 77.0999984741211,
+              },
+            ],
+            url: SampleImg,
+          },
+        ]
+      : [],
     console.log
   )
 

integration-tests/tests/creator.spec.ts

@@ -1,11 +1,11 @@
-
 import { test, expect } from '@playwright/test'
 import path from 'path'
-import { fileURLToPath } from "url"
+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('visible image after upload', async ({ page }, testinfo) => {
   if (process.env.CI) {
@@ -24,30 +24,61 @@ test('visible image after upload', async ({ page }, testinfo) => {
 
   await page.setViewportSize({ width: PAGE_WIDTH, height: PAGE_HEIGHT })
   await page.goto('/')
-  await page.waitForLoadState("networkidle")
+  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')
-  await expect(canvas).toHaveScreenshot('after-upload.png')
+  await expect(canvas).toHaveScreenshot('upload-image.png')
 
   /** =========DISPLAYS BORDER AROUND HOVERED ASSET============ */
-  const center = { x: PAGE_WIDTH / 2, y: PAGE_HEIGHT / 2 }
   await page.mouse.move(center.x, center.y)
-  await expect(canvas).toHaveScreenshot('after-hover.png')
+  await expect(canvas).toHaveScreenshot('hover-image.png')
 
   /** =========IMAGE SELECTED============ */
   await page.mouse.click(center.x, center.y)
-  await expect(canvas).toHaveScreenshot('after-selection.png')
+  await expect(canvas).toHaveScreenshot('select-image.png')
 
-  /** =========IMAGES POSITION UPDATES============ */
+  /** =========IMAGE POSITION UPDATES============ */
   await page.mouse.down()
-  await page.mouse.move(300, 200)
+  await page.mouse.move(300, 300)
   await page.mouse.up()
-  await expect(canvas).toHaveScreenshot('after-move.png')
-})
+  await expect(canvas).toHaveScreenshot('move-image.png')
 
+  /** =========ROTATION UI HOVER============ */
+  await page.mouse.move(340, 640)
+  await expect(canvas).toHaveScreenshot('hover-rotation-ui.png')
 
+  /** =========IMAGE ROTATION UPDATES============ */
+  await page.mouse.down()
+  await page.mouse.move(573, 533)
+  await page.mouse.up()
+  await expect(canvas).toHaveScreenshot('rotate-image.png')
+
+  /** =========TOP SCALE HOVER============ */
+  await page.mouse.move(156, 95)
+  await expect(canvas).toHaveScreenshot('hover-top-scale-ui.png')
+
+  /** =========TOP SCALE USAGE============ */
+  await page.mouse.down()
+  await page.mouse.move(320, 264)
+  await page.mouse.up()
+  await expect(canvas).toHaveScreenshot('use-top-scale-ui.png')
+
+  /** =========TOP LEFT SCALE HOVER============ */
+  await page.mouse.move(168, 410)
+  await expect(canvas).toHaveScreenshot('hover-top-left-scale-ui.png')
+
+  /** =========TOP LEFT SCALE USAGE============ */
+  await page.mouse.down()
+  await page.mouse.move(950, 400)
+  await page.mouse.up()
+  await expect(canvas).toHaveScreenshot('use-top-left-scale-ui.png')
+})