diff --git a/package-lock.json b/package-lock.json index 022dfae..6958ba5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,14 +1,13 @@ { - "name": "thorvg.tester", + "name": "thorvg.test-automation", "version": "0.1.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "thorvg.tester", + "name": "thorvg.test-automation", "version": "0.1.0", "dependencies": { - "@lottiefiles/lottie-player": "^2.0.2", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -21,6 +20,7 @@ "electron-builder": "^24.6.4", "html2canvas": "^1.4.1", "jspdf": "^2.5.1", + "lottie-web": "latest", "opencv-react": "^0.0.6", "puppeteer": "^21.5.1", "react": "^18.2.0", @@ -31,9 +31,6 @@ "typescript": "^4.9.5", "web-vitals": "^2.1.4" }, - "bin": { - "tvg-cli": "cli-src/starter.js" - }, "devDependencies": { "@craco/craco": "^7.1.0", "@types/resemblejs": "^4.1.3", @@ -3396,31 +3393,6 @@ "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz", "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==" }, - "node_modules/@lit-labs/ssr-dom-shim": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.2.tgz", - "integrity": "sha512-jnOD+/+dSrfTWYfSXBXlo5l5f0q1UuJo3tkbMDCYA2lKUYq79jaxqtGEvnRoh049nt1vdo1+45RinipU6FGY2g==" - }, - "node_modules/@lit/reactive-element": { - "version": "1.6.3", - "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz", - "integrity": "sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==", - "dependencies": { - "@lit-labs/ssr-dom-shim": "^1.0.0" - } - }, - "node_modules/@lottiefiles/lottie-player": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/@lottiefiles/lottie-player/-/lottie-player-2.0.2.tgz", - "integrity": "sha512-R9WF2/gFboZ0GW3QjqtbZF94JQq8oI1t5XWZPtTypvk2xTizphybZu+c08QFQbqY6rnkazHIyRBj2MK0qr6Hrw==", - "dependencies": { - "@types/pako": "^1.0.1", - "lit": "^2.1.2", - "lottie-web": "^5.10.0", - "pako": "^2.0.4", - "resize-observer-polyfill": "^1.5.1" - } - }, "node_modules/@malept/cross-spawn-promise": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@malept/cross-spawn-promise/-/cross-spawn-promise-1.1.1.tgz", @@ -4594,11 +4566,6 @@ "@types/node": "*" } }, - "node_modules/@types/pako": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/@types/pako/-/pako-1.0.6.tgz", - "integrity": "sha512-cqH9QTLnznwxSPZxhoKpEjeXflGFSI7xcJoWgSkJ13b3kzrLuvJMNzqB+cJxCVyLe8TQ6SIhPBgEnDVNr0dr2w==" - }, "node_modules/@types/parse-json": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.1.tgz", @@ -14046,34 +14013,6 @@ "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" }, - "node_modules/lit": { - "version": "2.8.0", - "resolved": "https://registry.npmjs.org/lit/-/lit-2.8.0.tgz", - "integrity": "sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==", - "dependencies": { - "@lit/reactive-element": "^1.6.0", - "lit-element": "^3.3.0", - "lit-html": "^2.8.0" - } - }, - "node_modules/lit-element": { - "version": "3.3.3", - "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.3.3.tgz", - "integrity": "sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==", - "dependencies": { - "@lit-labs/ssr-dom-shim": "^1.1.0", - "@lit/reactive-element": "^1.3.0", - "lit-html": "^2.8.0" - } - }, - "node_modules/lit-html": { - "version": "2.8.0", - "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz", - "integrity": "sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==", - "dependencies": { - "@types/trusted-types": "^2.0.2" - } - }, "node_modules/loader-runner": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz", @@ -15117,11 +15056,6 @@ "node": ">= 14" } }, - "node_modules/pako": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz", - "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==" - }, "node_modules/param-case": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz", @@ -17509,11 +17443,6 @@ "canvas": "2.11.2" } }, - "node_modules/resize-observer-polyfill": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", - "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" - }, "node_modules/resolve": { "version": "1.22.8", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", diff --git a/package.json b/package.json index 0b777ed..bdf0dcb 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,6 @@ "main": "public/Main.js", "homepage": "./", "dependencies": { - "@lottiefiles/lottie-player": "^2.0.2", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -18,6 +17,7 @@ "electron-builder": "^24.6.4", "html2canvas": "^1.4.1", "jspdf": "^2.5.1", + "lottie-web": "latest", "opencv-react": "^0.0.6", "puppeteer": "^21.5.1", "react": "^18.2.0", diff --git a/src/App.tsx b/src/App.tsx index 216847a..b9849ea 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,17 +1,14 @@ -import "@lottiefiles/lottie-player"; -import { useEffect, useRef, useState } from 'react'; import './App.css'; +import lottieWeb from 'lottie-web'; +import { useEffect, useRef, useState } from 'react'; import logo from './logo.svg'; import Player from './utils/player'; -// @ts-ignore -import { OpenCvProvider } from 'opencv-react'; +import { BlobReader, TextWriter, ZipReader } from "@zip.js/zip.js"; +import html2canvas from "html2canvas"; +import jsPDF from "jspdf"; import { FileUploader } from "react-drag-drop-files"; +import { size, successPercentage, testingSize } from "./utils/constant"; import { diffWithResembleJS } from './utils/diff'; -import { testingSize, size, successPercentage } from "./utils/constant"; -import { drawSvgIntoCanvas } from "./utils/drawer"; -import jsPDF from "jspdf"; -import html2canvas from "html2canvas"; -import { BlobReader, ZipReader, TextWriter } from "@zip.js/zip.js"; declare global { interface Window { @@ -21,7 +18,6 @@ declare global { } let player: any; -let cv: any; let isDebug = false; function App() { @@ -166,13 +162,13 @@ function App() { const run = async (file: File): Promise => { return new Promise((resolve, reject) => { // ! try { - const thorvgCanvas: any = document.querySelector("#thorvg-canvas"); - const lottieCanvas: any = document.querySelector("#lottie-canvas"); + const thorvgCanvas: any = document.querySelector(".thorvg-canvas > canvas"); + const lottieCanvasWrapper: any = document.querySelector(".lottie-canvas"); const diffImg: any = document.querySelector("#diff-img"); - diffImg.setAttribute('src', ''); thorvgCanvas.getContext('2d').clearRect(0, 0, testingSize, testingSize); - lottieCanvas.getContext('2d').clearRect(0, 0, testingSize, testingSize); + lottieCanvasWrapper.innerHTML = ''; + diffImg.setAttribute('src', ''); setTimeout(async () => { const isLoaded = await load(file); @@ -206,8 +202,8 @@ function App() { resultText.style.width = '200px'; resultRow?.appendChild(resultText); - const thorvgCanvas = document.querySelector('#thorvg-canvas'); - const lottieCanvas = document.querySelector('#lottie-canvas'); + const thorvgCanvas = document.querySelector('.thorvg-canvas > canvas'); + const lottieCanvas = document.querySelector('.lottie-canvas > canvas'); const diffImg = document.querySelector('#diff-img'); const thorvgCloneCanvas = thorvgCanvas?.cloneNode(true) as any; @@ -215,10 +211,14 @@ function App() { const diffCloneImg = diffImg?.cloneNode(true) as any; thorvgCloneCanvas.width = size; + thorvgCloneCanvas.style.width = `${size}px`; thorvgCloneCanvas.height = size; + thorvgCloneCanvas.style.height = `${size}px`; lottieCloneCanvas.width = size; + lottieCloneCanvas.style.width = `${size}px`; lottieCloneCanvas.height = size; + lottieCloneCanvas.style.height = `${size}px`; diffCloneImg.width = size; diffCloneImg.height = size; @@ -247,8 +247,8 @@ function App() { resultText.innerText = logText; resultRow?.appendChild(resultText); - const thorvgCanvas = document.querySelector('#thorvg-canvas'); - const lottieCanvas = document.querySelector('#lottie-canvas'); + const thorvgCanvas = document.querySelector('.thorvg-canvas > canvas'); + const lottieCanvas = document.querySelector('.lottie-canvas > canvas'); const diffImg = document.querySelector('#diff-img'); const thorvgCloneCanvas = thorvgCanvas?.cloneNode(true) as any; @@ -256,10 +256,14 @@ function App() { const diffCloneImg = diffImg?.cloneNode(true) as any; thorvgCloneCanvas.width = size; + thorvgCloneCanvas.style.width = `${size}px`; thorvgCloneCanvas.height = size; + thorvgCloneCanvas.style.height = `${size}px`; lottieCloneCanvas.width = size; + lottieCloneCanvas.style.width = `${size}px`; lottieCloneCanvas.height = size; + lottieCloneCanvas.style.height = `${size}px`; diffCloneImg.width = size; diffCloneImg.height = size; @@ -278,50 +282,36 @@ function App() { } const test = async () => { - const thorvgCanvas: any = document.querySelector("#thorvg-canvas"); - const lottieCanvas: any = document.querySelector("#lottie-canvas"); - - // copy lottie-svg to canvas - try { - // @ts-ignore - const svg: any = document.querySelector('.lottie-player').shadowRoot.querySelector('svg'); - const canvas: any = document.querySelector("#lottie-canvas"); - - await drawSvgIntoCanvas(svg, canvas); - } catch (err) { - console.log(err); - return 0; - } + const thorvgCanvas: any = document.querySelector(".thorvg-canvas > canvas"); + const lottieCanvas: any = document.querySelector(".lottie-canvas > canvas"); // resembleJS diff const compabilityWithResembleJS = await diffWithResembleJS(thorvgCanvas, lottieCanvas); return compabilityWithResembleJS; - - // // OpenCV diff - // const compabilityOpenCV = diffWithOpenCV(cv, thorvgCanvas, lottieCanvas); - // return compabilityOpenCV; } const load = async (file: File) => { return new Promise(async (resolve, reject) => { - const lottiePlayer: any = document.querySelector("lottie-player"); + let anim: any = null; + const lottieCanvas: any = document.querySelector(".lottie-canvas"); const reader = new FileReader(); reader.readAsText(file); reader.onload = async () => { const json = reader.result as any; - - try { - // lottie-player - lottiePlayer.load(json); - } catch (err) { - console.log('Mark as an error : maybe lottie issue'); - resolve(false); - } - // check JSON try { - JSON.parse(json); + anim = lottieWeb.loadAnimation({ + container: lottieCanvas, + renderer: "canvas", + loop: false, + autoplay: false, + animationData: JSON.parse(json), + rendererSettings: { + clearCanvas: true, + }, + }); } catch (err) { + console.error('LottieWeb load error'); resolve(false); } @@ -330,20 +320,14 @@ function App() { fr.onloadend = () => { const bytes = fr.result as any; - console.log(bytes); - try { player.loadBytes(bytes); const playerTotalFrames = Math.floor(player.totalFrame); - const lottieTotalFrames = Math.floor(lottiePlayer.getLottie().totalFrames); const targetFrame = Math.floor(playerTotalFrames / 2); // Run with middle frame - player.seek(targetFrame); - lottiePlayer.seek(targetFrame); - - console.log(`totalFrames ${playerTotalFrames} ${lottieTotalFrames}`); + anim.goToAndStop(targetFrame, true); } catch (err) { console.log(err); return resolve(false); @@ -358,7 +342,7 @@ function App() { } return ( - cv = _cv}> + <>
{ @@ -436,30 +420,16 @@ function App() {
} - -
- - +
+
+ +
+
- -
- {/*
- - -
*/} -
@@ -487,7 +457,7 @@ function App() {
- + ); } diff --git a/src/utils/diff.ts b/src/utils/diff.ts index da03f7b..938d0ff 100644 --- a/src/utils/diff.ts +++ b/src/utils/diff.ts @@ -5,7 +5,8 @@ export const diffWithResembleJS = async (canvas: any, targetCanvas: any): Promis const lottieURL = targetCanvas.toDataURL("image/png"); return new Promise((resolve, reject) => { - resemble.compare(thorvgURL, lottieURL, {}, (err: any, data: any) => { + resemble.compare(thorvgURL, lottieURL, { scaleToSameSize: true }, (err: any, data: any) => { + console.log(err); const { misMatchPercentage, getImageDataUrl } = data; const diffImg = document.querySelector('#diff-img') as any; diffImg.src = getImageDataUrl();