feat: Add API to support history feature (#28)

Author: mateuszJS

integration-tests/assetStates.ts

@@ -1,73 +1,43 @@
-import initCreator from '../src/index'
-import SampleImg from './image-sample.png'
+import initCreator, { SerializedAsset } from '../src/index'
 
 declare global {
   interface Window {
-    testLastAssetUpdate: {
-      calledTimes: number
-      assets: object[] | null
-    }
+    assetsSnapshot: SerializedAsset[]
   }
 }
 
-const params = new URLSearchParams(document.location.search)
-const isSampleParam = params.has('sample') // is the string "Jonathan"
+const assetsUpdatesHistory: SerializedAsset[][] = [[]]
 
 async function test() {
   const canvas = document.querySelector<HTMLCanvasElement>('canvas')!
 
   const selectedAssetEl = document.querySelector<HTMLSpanElement>('#selected-asset-id')!
+  const isProcessingEventsEl = document.querySelector<HTMLSpanElement>('#is-processing-events')!
   const removeAssetBtn = document.querySelector<HTMLSpanElement>('#remove-btn')!
+  const undoBtn = document.querySelector<HTMLSpanElement>('#undo-btn')!
+  const redoBtn = document.querySelector<HTMLSpanElement>('#redo-btn')!
 
-  window.testLastAssetUpdate = {
-    calledTimes: 0,
-    assets: null,
-  }
+  window.assetsSnapshot = []
+  let currentHistoryIndex = 0
 
   const creator = await initCreator(
     canvas,
-    isSampleParam
-      ? [
-          {
-            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,
-          },
-        ]
-      : [],
+    [],
     (assets) => {
-      window.testLastAssetUpdate = {
-        calledTimes: window.testLastAssetUpdate.calledTimes + 1,
-        assets,
+      window.assetsSnapshot = assets
+      // we had to implement this whole history logic because there is no way
+      // to call creator.resetCanvas(newAssets) from test code file
+      if (currentHistoryIndex === assetsUpdatesHistory.length - 1) {
+        assetsUpdatesHistory.push(assets)
+        currentHistoryIndex = assetsUpdatesHistory.length - 1
       }
       console.log(assets)
     },
     (assetId) => {
       selectedAssetEl.textContent = assetId.toString()
+    },
+    (inProgress) => {
+      isProcessingEventsEl.textContent = inProgress ? 'true' : 'false'
     }
   )
 
@@ -81,11 +51,24 @@ async function test() {
     img.onload = () => {
       creator.addImage(img)
     }
+    fileInput.value = '' // reset input value to allow re-uploading the same file
   })
 
   removeAssetBtn.addEventListener('click', () => {
     creator.removeAsset()
   })
+
+  undoBtn.addEventListener('click', () => {
+    currentHistoryIndex = Math.max(0, currentHistoryIndex - 1)
+    const assets = assetsUpdatesHistory[currentHistoryIndex]
+    creator.resetAssets(assets)
+  })
+
+  redoBtn.addEventListener('click', () => {
+    currentHistoryIndex = Math.min(assetsUpdatesHistory.length - 1, currentHistoryIndex + 1)
+    const assets = assetsUpdatesHistory[currentHistoryIndex]
+    creator.resetAssets(assets)
+  })
 }
 
 test()

integration-tests/index.ts

@@ -0,0 +1,101 @@
+import type { Page } from '@playwright/test'
+import { expect } from '@playwright/test'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+const PAGE_WIDTH = 1000
+const PAGE_HEIGHT = 700
+let page: Page
+let move: (x: number, y: number) => Promise<void>
+let canvasBox: { x: number; y: number; width: number; height: number }
+
+interface SerializedAsset {
+  id: number
+  points: { u: number; v: number; x: number; y: number }[]
+  url: string
+}
+
+// SyntaxError: TypeScript enum is not supported in strip-only mode
+export const TransformHandle = {
+  TOP_LEFT: 0,
+  TOP_RIGHT: 1,
+  BOTTOM_RIGHT: 2,
+  BOTTOM_LEFT: 3,
+}
+
+export default async function init(receivedPage: Page) {
+  page = receivedPage
+
+  // To check in the future 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
+
+  const canvas = (await page.$('canvas'))!
+  canvasBox = (await canvas.boundingBox())!
+
+  move = async (x: number, y: number) => {
+    await page.mouse.move(x + canvasBox.x, y + canvasBox.y)
+  }
+
+  return {
+    getAssetsState,
+    uploadAsset,
+    resizeAsset,
+    selectAsset,
+  }
+}
+
+async function getAssetsState(): Promise<SerializedAsset[]> {
+  const isProcessingEventsEl = page.locator('#is-processing-events')
+  await expect(isProcessingEventsEl).toHaveText('false')
+
+  const assetsSnapshot = await page.evaluate(() => window.assetsSnapshot)
+  return assetsSnapshot
+}
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const testImagePath = path.join(__dirname, './image-sample.png')
+
+async function uploadAsset() {
+  const fileInput = (await page.$('input[type="file"]'))!
+  await fileInput.setInputFiles(testImagePath)
+  const assets = await getAssetsState()
+  return assets[assets.length - 1] // return the last uploaded asset
+}
+
+async function selectAsset({ points }: SerializedAsset) {
+  await move((points[0].x + points[1].x) / 2, canvasBox.height - (points[0].y + points[3].y) / 2)
+  await page.mouse.down()
+  await page.mouse.up()
+}
+
+// handles are counted clock-wise starting from top left corner
+async function resizeAsset(
+  { points }: SerializedAsset,
+  width: number,
+  height: number,
+  handle: number
+) {
+  const currentWidth = Math.abs(points[0].x - points[1].x)
+  const currentHeight = Math.abs(points[0].y - points[3].y) // (canvasHeight - 140)
+  const directionX =
+    handle === TransformHandle.TOP_LEFT || handle === TransformHandle.BOTTOM_LEFT ? 1 : -1
+  const directionY =
+    handle === TransformHandle.TOP_LEFT || handle === TransformHandle.TOP_RIGHT ? 1 : -1
+
+  await move(points[handle].x, canvasBox.height - points[handle].y)
+  await page.mouse.down()
+  await move(
+    points[handle].x + (currentWidth - width) * directionX,
+    canvasBox.height - points[handle].y + (currentHeight - height) * directionY
+  )
+  await page.mouse.up()
+}

integration-tests/init.ts

@@ -32,7 +32,10 @@
   <aside>
     <input type="file" />
     <p>Selected asset: <span id="selected-asset-id">0</span></p>
+    <p>Is processing events: <span id="is-processing-events">false</span></p>
     <button id="remove-btn">Remove Asset</button>
+    <button id="undo-btn">Undo</button>
+    <button id="redo-btn">Redo</button>
   </aside>
   <canvas></canvas>
 </body>

integration-tests/template.html

@@ -1,7 +1,7 @@
-// npx playwright test asset-basic-transform.spec.ts --debug
+// npm run test-e2e -- asset-basic-transform.spec.ts --debug
 
 import { test, expect } from '@playwright/test'
-import * as Utils from '../utils'
+import init from '../init'
 
 test('asset performs basic transformations', async ({ page }, testinfo) => {
   if (process.env.CI) {
@@ -11,14 +11,15 @@ test('asset performs basic transformations', async ({ page }, testinfo) => {
 
   testinfo.snapshotSuffix = '' // by default is `process.platform`
 
-  await Utils.init(page)
-  await Utils.uploadAsset(page)
+  const utils = await init(page)
+  await utils.uploadAsset()
   const canvas = page.locator('canvas')
 
   // select asset
   await page.mouse.move(550, 275)
   await page.mouse.down()
   await page.mouse.up()
+  await expect(canvas).toHaveScreenshot('select-image.png')
 
   // move
   await page.mouse.down()

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

@@ -1,7 +1,7 @@
-// npx playwright test asset-removal.spec.ts --debug
+// npm run test-e2e -- asset-removal.spec.ts --debug
 
 import { test, expect } from '@playwright/test'
-import * as Utils from '../utils'
+import init from '../init'
 
 test('asset removal', async ({ page }, testinfo) => {
   if (process.env.CI) {
@@ -11,9 +11,8 @@ test('asset removal', async ({ page }, testinfo) => {
 
   testinfo.snapshotSuffix = '' // by default is `process.platform`
 
-  const expectLastUpdate = await Utils.init(page)
-  await Utils.uploadAsset(page)
-  const canvas = page.locator('canvas')
+  const utils = await init(page)
+  await utils.uploadAsset()
   const removeBtn = page.locator('#remove-btn')
   const assetIdEl = page.locator('#selected-asset-id')
 
@@ -23,8 +22,6 @@ test('asset removal', async ({ page }, testinfo) => {
   await page.mouse.up()
 
   await removeBtn.click()
-  await expect(canvas).toHaveScreenshot('removed-image.png')
   await expect(assetIdEl).toHaveText('0')
-
-  await expectLastUpdate(3, [])
+  expect(await utils.getAssetsState()).toStrictEqual([])
 })