diff --git a/__tests__/e2e.test.js b/__tests__/e2e.test.js deleted file mode 100644 index 39dc481..0000000 --- a/__tests__/e2e.test.js +++ /dev/null @@ -1,76 +0,0 @@ -const fs = require('fs'); -const path = require('path'); -const assert = require('assert'); -const jimp = require('jimp'); -const pixelmatch = require('pixelmatch'); -const pngjs = require('pngjs'); -const { delay } = require('./../scripts/util/time'); -const { pageList } = require('./../scripts/screen.config'); -const { createScreenshot } = require('../scripts/util/screen'); - -const snapshotDir = path.join(__dirname, 'snapshot'); -const diffDir = path.join(__dirname, 'diff'); -const testResultDir = path.join(__dirname, 'test-result'); -const { PNG } = pngjs; - -async function diff() { - const middlewares = []; - const diffRateList = []; - pageList.forEach((p, i) => { - middlewares.push(async (ctx = {}, next) => { - const { page, port } = ctx; - const width = p.w; - const height = p.h; - - await page.setViewport( { width: p.w, height: p.h } ); - const pageUrl = `http://127.0.0.1:${port}/examples/${p.path || ''}`; - await page.goto(pageUrl); - await delay(p.delay || 100); - const buf = await page.screenshot(); - - const snapshotPicPath = parsePicPath(path.join(snapshotDir, p.path)); - const actual = (await jimp.read(buf)).scale(1).quality(100).bitmap; - const expected = (await jimp.read(fs.readFileSync(snapshotPicPath))).bitmap; - const diffBuf = new PNG({ width, height }); - const failedPixel = pixelmatch(expected.data, actual.data, diffBuf.data, actual.width, actual.height); - const failRate = failedPixel / (width * height); - if (failRate > 0) { - (await jimp.read(actual)).scale(1).quality(100).write(parsePicPath(path.join(testResultDir, p.path))); - (await jimp.read(diffBuf)).scale(1).quality(100).write(parsePicPath(path.join(diffDir, p.path))); - } - diffRateList.push({ - path: p.path, - rate: failRate, - }); - console.log(`[${i+1}/${pageList.length}] E2E Testing: ${p.path} | diff: ${failRate}`) - await next(); - }); - }); - await createScreenshot(middlewares, { baseDir: path.join(__dirname, '..') }); - return diffRateList; -} - -function parsePicPath(pagePath) { - // const picPath = pagePath.replace(/\.html$/, '.jpg'); - const picPath = pagePath + '.jpg'; - return picPath; -} - - - -describe('Screenshot testing', function() { - it('testing...', function(done){ - this.timeout(1000 * 60 * 2); - diff().then((rateList) => { - - assert.ok(Array.isArray(rateList)); - assert.ok(rateList.length > 0); - rateList.forEach((data) => { - // console.log(`${data.path}]diff-rate: ${data.rate}`, ); - assert.ok(data.rate < 0.04); - }); - - done(); - }).catch(done); - }); -}); \ No newline at end of file diff --git a/__tests__/e2e.test.ts b/__tests__/e2e.test.ts new file mode 100644 index 0000000..3fb6379 --- /dev/null +++ b/__tests__/e2e.test.ts @@ -0,0 +1,98 @@ +import fs from 'fs'; +import path from 'path'; +import assert from 'assert'; +import jimp from 'jimp'; +import pixelmatch from 'pixelmatch'; +import pngjs from 'pngjs'; +import { pageList } from './../scripts/screen.config'; +import { createScreenshot } from '../scripts/util/screen'; + +function delay(time = 100): Promise { + return new Promise((resolve) => { + setTimeout(() => { + resolve(); + }, time); + }); +} + +const snapshotDir = path.join(__dirname, 'snapshot'); +const diffDir = path.join(__dirname, 'diff'); +const testResultDir = path.join(__dirname, 'test-result'); +const { PNG } = pngjs; + +async function diff() { + const middlewares: any[] = []; + const diffRateList: any[] = []; + pageList.forEach((p, i) => { + middlewares.push(async (ctx: any, next: any) => { + const { page, port } = ctx as any; + const width = p.w; + const height = p.h; + + await page.setViewport({ width: p.w, height: p.h }); + const pageUrl = `http://127.0.0.1:${port}/examples/${p.path || ''}`; + await page.goto(pageUrl); + await delay(p.delay || 100); + const buf = await page.screenshot(); + + const snapshotPicPath = parsePicPath(path.join(snapshotDir, p.path)); + const actual = (await jimp.read(buf)).scale(1).quality(100).bitmap; + const expected = (await jimp.read(fs.readFileSync(snapshotPicPath))) + .bitmap; + const diffBuf = new PNG({ width, height }); + const failedPixel = pixelmatch( + expected.data, + actual.data, + diffBuf.data, + actual.width, + actual.height + ); + const failRate = failedPixel / (width * height); + if (failRate > 0) { + (await jimp.read(actual as any)) + .scale(1) + .quality(100) + .write(parsePicPath(path.join(testResultDir, p.path))); + (await jimp.read(diffBuf as any)) + .scale(1) + .quality(100) + .write(parsePicPath(path.join(diffDir, p.path))); + } + diffRateList.push({ + path: p.path, + rate: failRate + }); + console.log( + `[${i + 1}/${pageList.length}] E2E Testing: ${ + p.path + } | diff: ${failRate}` + ); + await next(); + }); + }); + await createScreenshot(middlewares, { baseDir: path.join(__dirname, '..') }); + return diffRateList; +} + +function parsePicPath(pagePath) { + // const picPath = pagePath.replace(/\.html$/, '.jpg'); + const picPath = pagePath + '.jpg'; + return picPath; +} + +describe('Screenshot testing', function () { + it('testing...', function (done) { + diff() + .then((rateList) => { + assert.ok(Array.isArray(rateList)); + assert.ok(rateList.length > 0); + rateList.forEach((data) => { + console.log(`${data.path}]diff-rate: ${data.rate}`); + assert.ok(data.rate < 0.04); + }); + + done(); + }) + .catch(done); + }); +}); diff --git a/jest.config.js b/jest.config.js index d9c9ff4..c469d7e 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,33 +1,28 @@ module.exports = { // "collectCoverage": true, - "coverageDirectory": "reports", - "collectCoverageFrom": [ - "packages/**/src/**/*.ts", - "!packages/**/node_modules/**", - "!**/node_modules/**" + testEnvironment: 'jsdom', + coverageDirectory: 'reports', + collectCoverageFrom: [ + 'packages/**/src/**/*.ts', + '!packages/**/node_modules/**', + '!**/node_modules/**' ], - "coverageReporters": [ + coverageReporters: [ // "clover", // "html", - "text-summary" + 'text-summary' ], - "coverageThreshold": { - "global": { - "branches": 80, - "functions": 80, - "lines": 80, - "statements": 80 + coverageThreshold: { + global: { + branches: 80, + functions: 80, + lines: 80, + statements: 80 } }, - "moduleFileExtensions": [ - "js", "ts" - ], - "modulePaths": [ - "" - ], - "testRegex": "(/packages/([^\/]{1,})/__tests__/.*)\\.test.ts$", + moduleFileExtensions: ['js', 'ts'], + modulePaths: [''], + testRegex: '(/packages/([^/]{1,})/__tests__/.*)\\.test.ts$', // "testRegex": "(/packages/idraw/__tests__/.*)\\.test.ts$", - "setupFiles": [ - "jest-canvas-mock" - ] -} \ No newline at end of file + setupFiles: ['jest-canvas-mock'] +}; diff --git a/jest.e2e.config.js b/jest.e2e.config.js new file mode 100644 index 0000000..ae5d548 --- /dev/null +++ b/jest.e2e.config.js @@ -0,0 +1,11 @@ +module.exports = { + // "collectCoverage": true, + testEnvironment: 'jsdom', + testTimeout: 2 * 60 * 1000, + moduleFileExtensions: ['js', 'ts'], + modulePaths: [''], + testRegex: '/__tests__/e2e.test.ts$' + // testRegex: '/__tests__/(.*)\\.test.ts$' + // "testRegex": "(/packages/idraw/__tests__/.*)\\.test.ts$", + // setupFiles: ['jest-canvas-mock'] +}; diff --git a/package.json b/package.json index be30634..de277bb 100644 --- a/package.json +++ b/package.json @@ -1,9 +1,8 @@ { "name": "root", "private": false, - "type": "module", "scripts": { - "_postinstall": "npm run build", + "postinstall": "npm run build", "dev": "vite-node ./scripts/dev.ts", "dev:mod": "vite-node ./scripts/dev-mod.ts", "build": "npm run build:mod && npm run build:bundle && npm run build:min", @@ -11,7 +10,7 @@ "build:mod": "vite-node ./scripts/build-module.ts", "build:min": "vite-node ./scripts/minify.ts", "snapshot": "npm run build:bundle && vite-node ./scripts/snapshot.ts", - "e2e": "mocha --exit ./__tests__/e2e.test.js", + "e2e": "jest --config jest.e2e.config.js", "init": "lerna bootstrap", "init:cnpm": "lerna bootstrap --npm-client=cnpm", "clear": "rm -rf node_modules/ && rm -rf ./packages/*/dist/ && rm -rf ./packages/*/esm/ && rm -rf ./packages/*/node_modules/", @@ -29,41 +28,42 @@ "pu2": "lerna version && npm run build && lerna publish from-git --force-publish" }, "devDependencies": { - "@babel/core": "^7.20.7", + "@babel/core": "^7.20.12", "@babel/preset-env": "^7.20.2", "@babel/preset-typescript": "^7.18.6", "@types/glob": "^8.0.1", - "@types/jest": "^29.2.5", + "@types/jest": "^29.4.0", "@types/koa-compose": "^3.2.5", - "@types/node": "^18.11.18", + "@types/node": "^18.13.0", "@types/serve-handler": "^6.1.1", - "@typescript-eslint/eslint-plugin": "^5.47.1", - "@typescript-eslint/parser": "^5.47.1", - "babel-jest": "^29.3.1", + "@typescript-eslint/eslint-plugin": "^5.51.0", + "@typescript-eslint/parser": "^5.51.0", + "babel-jest": "^29.4.2", "canvas": "^2.11.0", "chalk": "^5.2.0", "enquirer": "^2.3.6", - "eslint": "^8.31.0", - "execa": "^6.1.0", + "eslint": "^8.34.0", + "execa": "^7.0.0", "fs-extra": "^11.1.0", - "glob": "^8.0.3", + "glob": "^8.1.0", "http-server": "^14.1.1", - "husky": "^8.0.2", - "jest": "^29.3.1", + "husky": "^8.0.3", + "jest": "^29.4.2", "jest-canvas-mock": "^2.4.0", - "jimp": "^0.16.2", + "jest-environment-jsdom": "^29.4.2", + "jimp": "^0.22.4", "koa-compose": "^4.1.0", - "lerna": "^6.3.0", + "lerna": "^6.4.1", "mocha": "^10.2.0", "pixelmatch": "^5.3.0", "pngjs": "^6.0.0", - "puppeteer": "^19.4.1", + "puppeteer": "^19.6.3", "serve-handler": "^6.1.5", - "terser": "^5.16.1", + "terser": "^5.16.3", "ts-node": "^10.9.1", - "tslib": "^2.4.1", - "typescript": "^4.9.4", - "vite": "^4.0.3", - "vite-node": "^0.26.2" + "tslib": "^2.5.0", + "typescript": "^4.9.5", + "vite": "^4.1.1", + "vite-node": "^0.28.4" } } diff --git a/packages/board/__tests__/__snapshots__/index.test.ts.snap b/packages/board/__tests__/__snapshots__/index.test.ts.snap index 82f09ed..a6d89d4 100644 --- a/packages/board/__tests__/__snapshots__/index.test.ts.snap +++ b/packages/board/__tests__/__snapshots__/index.test.ts.snap @@ -1,15 +1,15 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`@idraw/board context 1`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -19,14 +19,14 @@ Array [ ], "type": "clearRect", }, - Object { - "props": Object { + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -36,14 +36,14 @@ Array [ ], "type": "fillRect", }, - Object { - "props": Object { + { + "props": { "height": 480, "width": 800, "x": 40, "y": 40, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -53,14 +53,14 @@ Array [ ], "type": "fillRect", }, - Object { - "props": Object { + { + "props": { "height": 480, "width": 800, "x": 320, "y": 320, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -70,14 +70,14 @@ Array [ ], "type": "fillRect", }, - Object { - "props": Object { + { + "props": { "height": 480, "width": 800, "x": 640, "y": 640, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -87,14 +87,14 @@ Array [ ], "type": "fillRect", }, - Object { - "props": Object { + { + "props": { "height": 400, "width": 800, "x": 1560, "y": 1160, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -108,15 +108,15 @@ Array [ `; exports[`@idraw/board context 2`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -126,14 +126,14 @@ Array [ ], "type": "clearRect", }, - Object { - "props": Object { + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -143,8 +143,8 @@ Array [ ], "type": "clearRect", }, - Object { - "props": Object { + { + "props": { "dHeight": 3600, "dWidth": 4000, "dx": 0, @@ -158,7 +158,7 @@ Array [ "sx": 0, "sy": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -168,8 +168,8 @@ Array [ ], "type": "drawImage", }, - Object { - "props": Object { + { + "props": { "dHeight": 3600, "dWidth": 4000, "dx": 0, @@ -183,7 +183,7 @@ Array [ "sx": 0, "sy": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, diff --git a/packages/board/__tests__/__snapshots__/other-api.test.ts.snap b/packages/board/__tests__/__snapshots__/other-api.test.ts.snap index 7a032cb..b340f11 100644 --- a/packages/board/__tests__/__snapshots__/other-api.test.ts.snap +++ b/packages/board/__tests__/__snapshots__/other-api.test.ts.snap @@ -1,15 +1,15 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`@idraw/board getTransform 1`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -19,14 +19,14 @@ Array [ ], "type": "clearRect", }, - Object { - "props": Object { + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -36,14 +36,14 @@ Array [ ], "type": "fillRect", }, - Object { - "props": Object { + { + "props": { "height": 480, "width": 800, "x": 40, "y": 40, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -53,14 +53,14 @@ Array [ ], "type": "fillRect", }, - Object { - "props": Object { + { + "props": { "height": 480, "width": 800, "x": 320, "y": 320, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -70,14 +70,14 @@ Array [ ], "type": "fillRect", }, - Object { - "props": Object { + { + "props": { "height": 480, "width": 800, "x": 640, "y": 640, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -87,14 +87,14 @@ Array [ ], "type": "fillRect", }, - Object { - "props": Object { + { + "props": { "height": 400, "width": 800, "x": 1560, "y": 1160, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -108,15 +108,15 @@ Array [ `; exports[`@idraw/board getTransform 2`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -126,14 +126,14 @@ Array [ ], "type": "clearRect", }, - Object { - "props": Object { + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -143,8 +143,8 @@ Array [ ], "type": "clearRect", }, - Object { - "props": Object { + { + "props": { "dHeight": 1600, "dWidth": 2400, "dx": -2400, @@ -158,7 +158,7 @@ Array [ "sx": 0, "sy": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -168,8 +168,8 @@ Array [ ], "type": "drawImage", }, - Object { - "props": Object { + { + "props": { "dHeight": 1600, "dWidth": 2400, "dx": -2400, @@ -183,7 +183,7 @@ Array [ "sx": 0, "sy": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, diff --git a/packages/board/__tests__/__snapshots__/scale.test.ts.snap b/packages/board/__tests__/__snapshots__/scale.test.ts.snap index b931f2d..5af11e5 100644 --- a/packages/board/__tests__/__snapshots__/scale.test.ts.snap +++ b/packages/board/__tests__/__snapshots__/scale.test.ts.snap @@ -1,15 +1,15 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`@idraw/board scale 001 1`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -19,14 +19,14 @@ Array [ ], "type": "clearRect", }, - Object { - "props": Object { + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -36,14 +36,14 @@ Array [ ], "type": "fillRect", }, - Object { - "props": Object { + { + "props": { "height": 480, "width": 800, "x": 40, "y": 40, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -53,14 +53,14 @@ Array [ ], "type": "fillRect", }, - Object { - "props": Object { + { + "props": { "height": 480, "width": 800, "x": 320, "y": 320, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -70,14 +70,14 @@ Array [ ], "type": "fillRect", }, - Object { - "props": Object { + { + "props": { "height": 480, "width": 800, "x": 640, "y": 640, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -87,14 +87,14 @@ Array [ ], "type": "fillRect", }, - Object { - "props": Object { + { + "props": { "height": 400, "width": 800, "x": 1560, "y": 1160, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -108,15 +108,15 @@ Array [ `; exports[`@idraw/board scale 001 2`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -126,14 +126,14 @@ Array [ ], "type": "clearRect", }, - Object { - "props": Object { + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -143,8 +143,8 @@ Array [ ], "type": "clearRect", }, - Object { - "props": Object { + { + "props": { "dHeight": 3600, "dWidth": 4000, "dx": 200, @@ -158,7 +158,7 @@ Array [ "sx": 0, "sy": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -168,8 +168,8 @@ Array [ ], "type": "drawImage", }, - Object { - "props": Object { + { + "props": { "dHeight": 3600, "dWidth": 4000, "dx": 200, @@ -183,7 +183,7 @@ Array [ "sx": 0, "sy": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -197,15 +197,15 @@ Array [ `; exports[`@idraw/board scale 002 1`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -215,14 +215,14 @@ Array [ ], "type": "clearRect", }, - Object { - "props": Object { + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -232,14 +232,14 @@ Array [ ], "type": "fillRect", }, - Object { - "props": Object { + { + "props": { "height": 480, "width": 800, "x": 40, "y": 40, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -249,14 +249,14 @@ Array [ ], "type": "fillRect", }, - Object { - "props": Object { + { + "props": { "height": 480, "width": 800, "x": 320, "y": 320, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -266,14 +266,14 @@ Array [ ], "type": "fillRect", }, - Object { - "props": Object { + { + "props": { "height": 480, "width": 800, "x": 640, "y": 640, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -283,14 +283,14 @@ Array [ ], "type": "fillRect", }, - Object { - "props": Object { + { + "props": { "height": 400, "width": 800, "x": 1560, "y": 1160, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -304,15 +304,15 @@ Array [ `; exports[`@idraw/board scale 002 2`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -322,14 +322,14 @@ Array [ ], "type": "clearRect", }, - Object { - "props": Object { + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -339,8 +339,8 @@ Array [ ], "type": "clearRect", }, - Object { - "props": Object { + { + "props": { "dHeight": 2400, "dWidth": 4800, "dx": 0, @@ -354,7 +354,7 @@ Array [ "sx": 0, "sy": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -364,8 +364,8 @@ Array [ ], "type": "drawImage", }, - Object { - "props": Object { + { + "props": { "dHeight": 2400, "dWidth": 4800, "dx": 0, @@ -379,7 +379,7 @@ Array [ "sx": 0, "sy": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -393,15 +393,15 @@ Array [ `; exports[`@idraw/board scale 003 1`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -411,14 +411,14 @@ Array [ ], "type": "clearRect", }, - Object { - "props": Object { + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -428,14 +428,14 @@ Array [ ], "type": "fillRect", }, - Object { - "props": Object { + { + "props": { "height": 480, "width": 800, "x": 40, "y": 40, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -445,14 +445,14 @@ Array [ ], "type": "fillRect", }, - Object { - "props": Object { + { + "props": { "height": 480, "width": 800, "x": 320, "y": 320, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -462,14 +462,14 @@ Array [ ], "type": "fillRect", }, - Object { - "props": Object { + { + "props": { "height": 480, "width": 800, "x": 640, "y": 640, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -479,14 +479,14 @@ Array [ ], "type": "fillRect", }, - Object { - "props": Object { + { + "props": { "height": 400, "width": 800, "x": 1560, "y": 1160, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -500,15 +500,15 @@ Array [ `; exports[`@idraw/board scale 003 2`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -518,14 +518,14 @@ Array [ ], "type": "clearRect", }, - Object { - "props": Object { + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -535,8 +535,8 @@ Array [ ], "type": "clearRect", }, - Object { - "props": Object { + { + "props": { "dHeight": 2400, "dWidth": 4000, "dx": 0, @@ -550,7 +550,7 @@ Array [ "sx": 0, "sy": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -560,8 +560,8 @@ Array [ ], "type": "drawImage", }, - Object { - "props": Object { + { + "props": { "dHeight": 2400, "dWidth": 4000, "dx": 0, @@ -575,7 +575,7 @@ Array [ "sx": 0, "sy": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -589,15 +589,15 @@ Array [ `; exports[`@idraw/board scale 1`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -607,14 +607,14 @@ Array [ ], "type": "clearRect", }, - Object { - "props": Object { + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -624,14 +624,14 @@ Array [ ], "type": "fillRect", }, - Object { - "props": Object { + { + "props": { "height": 480, "width": 800, "x": 40, "y": 40, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -641,14 +641,14 @@ Array [ ], "type": "fillRect", }, - Object { - "props": Object { + { + "props": { "height": 480, "width": 800, "x": 320, "y": 320, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -658,14 +658,14 @@ Array [ ], "type": "fillRect", }, - Object { - "props": Object { + { + "props": { "height": 480, "width": 800, "x": 640, "y": 640, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -675,14 +675,14 @@ Array [ ], "type": "fillRect", }, - Object { - "props": Object { + { + "props": { "height": 400, "width": 800, "x": 1560, "y": 1160, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -696,15 +696,15 @@ Array [ `; exports[`@idraw/board scale 2`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -714,14 +714,14 @@ Array [ ], "type": "clearRect", }, - Object { - "props": Object { + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -731,8 +731,8 @@ Array [ ], "type": "clearRect", }, - Object { - "props": Object { + { + "props": { "dHeight": 1600, "dWidth": 2400, "dx": 600, @@ -746,7 +746,7 @@ Array [ "sx": 0, "sy": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -756,8 +756,8 @@ Array [ ], "type": "drawImage", }, - Object { - "props": Object { + { + "props": { "dHeight": 1600, "dWidth": 2400, "dx": 600, @@ -771,7 +771,7 @@ Array [ "sx": 0, "sy": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, diff --git a/packages/board/__tests__/__snapshots__/scroll.test.ts.snap b/packages/board/__tests__/__snapshots__/scroll.test.ts.snap index 31ee226..26aa655 100644 --- a/packages/board/__tests__/__snapshots__/scroll.test.ts.snap +++ b/packages/board/__tests__/__snapshots__/scroll.test.ts.snap @@ -1,15 +1,15 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`@idraw/board scroll 1`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -19,14 +19,14 @@ Array [ ], "type": "clearRect", }, - Object { - "props": Object { + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -36,14 +36,14 @@ Array [ ], "type": "fillRect", }, - Object { - "props": Object { + { + "props": { "height": 480, "width": 800, "x": 40, "y": 40, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -53,14 +53,14 @@ Array [ ], "type": "fillRect", }, - Object { - "props": Object { + { + "props": { "height": 480, "width": 800, "x": 320, "y": 320, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -70,14 +70,14 @@ Array [ ], "type": "fillRect", }, - Object { - "props": Object { + { + "props": { "height": 480, "width": 800, "x": 640, "y": 640, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -87,14 +87,14 @@ Array [ ], "type": "fillRect", }, - Object { - "props": Object { + { + "props": { "height": 400, "width": 800, "x": 1560, "y": 1160, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -108,15 +108,15 @@ Array [ `; exports[`@idraw/board scroll 2`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -126,14 +126,14 @@ Array [ ], "type": "clearRect", }, - Object { - "props": Object { + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -143,8 +143,8 @@ Array [ ], "type": "clearRect", }, - Object { - "props": Object { + { + "props": { "dHeight": 1600, "dWidth": 2400, "dx": -2400, @@ -158,7 +158,7 @@ Array [ "sx": 0, "sy": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -168,8 +168,8 @@ Array [ ], "type": "drawImage", }, - Object { - "props": Object { + { + "props": { "dHeight": 1600, "dWidth": 2400, "dx": -2400, @@ -183,7 +183,7 @@ Array [ "sx": 0, "sy": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, diff --git a/packages/board/__tests__/__snapshots__/wheel.test.ts.snap b/packages/board/__tests__/__snapshots__/wheel.test.ts.snap index 0b49daf..5578aed 100644 --- a/packages/board/__tests__/__snapshots__/wheel.test.ts.snap +++ b/packages/board/__tests__/__snapshots__/wheel.test.ts.snap @@ -1,15 +1,15 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`@idraw/board scroll 1`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -19,14 +19,14 @@ Array [ ], "type": "clearRect", }, - Object { - "props": Object { + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -36,14 +36,14 @@ Array [ ], "type": "fillRect", }, - Object { - "props": Object { + { + "props": { "height": 480, "width": 800, "x": 40, "y": 40, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -53,14 +53,14 @@ Array [ ], "type": "fillRect", }, - Object { - "props": Object { + { + "props": { "height": 480, "width": 800, "x": 320, "y": 320, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -70,14 +70,14 @@ Array [ ], "type": "fillRect", }, - Object { - "props": Object { + { + "props": { "height": 480, "width": 800, "x": 640, "y": 640, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -87,14 +87,14 @@ Array [ ], "type": "fillRect", }, - Object { - "props": Object { + { + "props": { "height": 400, "width": 800, "x": 1560, "y": 1160, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -108,15 +108,15 @@ Array [ `; exports[`@idraw/board scroll 2`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -126,14 +126,14 @@ Array [ ], "type": "clearRect", }, - Object { - "props": Object { + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -143,8 +143,8 @@ Array [ ], "type": "clearRect", }, - Object { - "props": Object { + { + "props": { "dHeight": 1600, "dWidth": 2400, "dx": -2400, @@ -158,7 +158,7 @@ Array [ "sx": 0, "sy": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -168,8 +168,8 @@ Array [ ], "type": "drawImage", }, - Object { - "props": Object { + { + "props": { "dHeight": 1600, "dWidth": 2400, "dx": -2400, @@ -183,7 +183,7 @@ Array [ "sx": 0, "sy": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -193,14 +193,14 @@ Array [ ], "type": "drawImage", }, - Object { - "props": Object { + { + "props": { "height": 80, "width": 2400, "x": 0, "y": 1520, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -210,13 +210,13 @@ Array [ ], "type": "fillRect", }, - Object { - "props": Object { + { + "props": { "fillRule": "nonzero", - "path": Array [ - Object { - "props": Object {}, - "transform": Array [ + "path": [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -226,12 +226,12 @@ Array [ ], "type": "beginPath", }, - Object { - "props": Object { + { + "props": { "x": 2240, "y": 1520, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -241,15 +241,15 @@ Array [ ], "type": "moveTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 2400, "cpx2": 2400, "cpy1": 1520, "cpy2": 1600, "radius": 40, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -259,15 +259,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 2400, "cpx2": 2200, "cpy1": 1600, "cpy2": 1600, "radius": 40, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -277,15 +277,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 2200, "cpx2": 2200, "cpy1": 1600, "cpy2": 1520, "radius": 40, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -295,15 +295,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 2200, "cpx2": 2400, "cpy1": 1520, "cpy2": 1520, "radius": 40, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -313,9 +313,9 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object {}, - "transform": Array [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -327,7 +327,7 @@ Array [ }, ], }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -337,14 +337,14 @@ Array [ ], "type": "fill", }, - Object { - "props": Object { + { + "props": { "height": 1600, "width": 80, "x": 2320, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -354,13 +354,13 @@ Array [ ], "type": "fillRect", }, - Object { - "props": Object { + { + "props": { "fillRule": "nonzero", - "path": Array [ - Object { - "props": Object {}, - "transform": Array [ + "path": [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -370,12 +370,12 @@ Array [ ], "type": "beginPath", }, - Object { - "props": Object { + { + "props": { "x": 2360, "y": 1400, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -385,15 +385,15 @@ Array [ ], "type": "moveTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 2400, "cpx2": 2400, "cpy1": 1400, "cpy2": 1600, "radius": 40, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -403,15 +403,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 2400, "cpx2": 2320, "cpy1": 1600, "cpy2": 1600, "radius": 40, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -421,15 +421,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 2320, "cpx2": 2320, "cpy1": 1600, "cpy2": 1400, "radius": 40, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -439,15 +439,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 2320, "cpx2": 2400, "cpy1": 1400, "cpy2": 1400, "radius": 40, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -457,9 +457,9 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object {}, - "transform": Array [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -471,7 +471,7 @@ Array [ }, ], }, - "transform": Array [ + "transform": [ 1, 0, 0, diff --git a/packages/board/__tests__/index.test.ts b/packages/board/__tests__/index.test.ts index dc487f9..b63c89d 100644 --- a/packages/board/__tests__/index.test.ts +++ b/packages/board/__tests__/index.test.ts @@ -1,9 +1,8 @@ -import { Board } from './../src'; +import Board from './../src'; import { getData } from './data'; - describe('@idraw/board', () => { - test('context', async () => { + test('context', async () => { document.body.innerHTML = `
`; @@ -13,33 +12,31 @@ describe('@idraw/board', () => { contextWidth: 1000, contextHeight: 900, devicePixelRatio: 4 - } + }; const mount = document.querySelector('#mount') as HTMLDivElement; const board = new Board(mount, opts); - + const ctx = board.getContext(); const data = getData(); - + board.clear(); ctx.clearRect(0, 0, opts.width, opts.height); ctx.setFillStyle('#ffffff'); ctx.fillRect(0, 0, opts.width, opts.height); - data.elements.forEach(ele => { + data.elements.forEach((ele) => { ctx.setFillStyle(ele.desc.color); ctx.fillRect(ele.x, ele.y, ele.w, ele.h); }); board.draw(); - + const originCtx = board.getOriginContext2D(); // @ts-ignore; const originCalls = originCtx.__getDrawCalls(); expect(originCalls).toMatchSnapshot(); - + const displayCtx = board.getDisplayContext2D(); // @ts-ignore; const displayCalls = displayCtx.__getDrawCalls(); expect(displayCalls).toMatchSnapshot(); - }); -}) - +}); diff --git a/packages/board/__tests__/lib/__snapshots__/style.test.ts.snap b/packages/board/__tests__/lib/__snapshots__/style.test.ts.snap index 0853e48..abdb3ac 100644 --- a/packages/board/__tests__/lib/__snapshots__/style.test.ts.snap +++ b/packages/board/__tests__/lib/__snapshots__/style.test.ts.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`@idraw/board: src/lib/style getStyle 1`] = ` -Object { +{ "height": "20px", "margin-top": "123px", "overflow": "auto", diff --git a/packages/board/__tests__/other-api.test.ts b/packages/board/__tests__/other-api.test.ts index f7e424d..5523d12 100644 --- a/packages/board/__tests__/other-api.test.ts +++ b/packages/board/__tests__/other-api.test.ts @@ -1,9 +1,7 @@ -import { Board } from '../src'; +import Board from '../src'; import { getData } from './data'; describe('@idraw/board', () => { - - document.body.innerHTML = `
`; @@ -13,7 +11,7 @@ describe('@idraw/board', () => { contextWidth: 600, contextHeight: 400, devicePixelRatio: 4 - } + }; const mount = document.querySelector('#mount') as HTMLDivElement; const board = new Board(mount, opts); @@ -23,41 +21,43 @@ describe('@idraw/board', () => { ctx.clearRect(0, 0, opts.width, opts.height); ctx.setFillStyle('#ffffff'); ctx.fillRect(0, 0, opts.width, opts.height); - data.elements.forEach(ele => { + data.elements.forEach((ele) => { ctx.setFillStyle(ele.desc.color); ctx.fillRect(ele.x, ele.y, ele.w, ele.h); }); - test('getTransform', async () => { - - - const resultScale =board.scale(2); - expect(resultScale).toStrictEqual({"position":{"top":0,"bottom":-400,"left":0,"right":-600},"size":{"x":0,"y":0,"w":1200,"h":800}}) - - const resultX =board.scrollX(-600); - expect(resultX).toStrictEqual({"position":{"top":0,"bottom":-400,"left":-600,"right":0},"size":{"x":-1200,"y":0,"w":1200,"h":800}}) - - const resultY =board.scrollY(-400); - expect(resultY).toStrictEqual({"position":{"top":-400,"bottom":0,"left":-600,"right":0},"size":{"x":-1200,"y":-800,"w":1200,"h":800}}) - + test('getTransform', async () => { + const resultScale = board.scale(2); + expect(resultScale).toStrictEqual({ + position: { top: 0, bottom: -400, left: 0, right: -600 }, + size: { x: 0, y: 0, w: 1200, h: 800 } + }); + + const resultX = board.scrollX(-600); + expect(resultX).toStrictEqual({ + position: { top: 0, bottom: -400, left: -600, right: 0 }, + size: { x: -1200, y: 0, w: 1200, h: 800 } + }); + + const resultY = board.scrollY(-400); + expect(resultY).toStrictEqual({ + position: { top: -400, bottom: 0, left: -600, right: 0 }, + size: { x: -1200, y: -800, w: 1200, h: 800 } + }); + board.draw(); - + const originCtx = board.getOriginContext2D(); // @ts-ignore; const originCalls = originCtx.__getDrawCalls(); expect(originCalls).toMatchSnapshot(); - + const displayCtx = board.getDisplayContext2D(); // @ts-ignore; const displayCalls = displayCtx.__getDrawCalls(); expect(displayCalls).toMatchSnapshot(); - const transform = board.getTransform(); expect(transform).toStrictEqual({ scale: 2, scrollX: -600, scrollY: -400 }); - }); - - }); - diff --git a/packages/board/__tests__/point.test.ts b/packages/board/__tests__/point.test.ts index 1d3c577..7f8d8e0 100644 --- a/packages/board/__tests__/point.test.ts +++ b/packages/board/__tests__/point.test.ts @@ -1,7 +1,6 @@ -import { Board } from '../src'; +import Board from '../src'; describe('@idraw/board', () => { - document.body.innerHTML = `
`; @@ -11,12 +10,12 @@ describe('@idraw/board', () => { contextWidth: 600, contextHeight: 400, devicePixelRatio: 4, - canScroll: true, + canScroll: true }; const transform = { scale: 2, scrollX: -200, - scrollY: -100, + scrollY: -100 }; const mount = document.querySelector('#mount') as HTMLDivElement; const board = new Board(mount, opts); @@ -26,8 +25,8 @@ describe('@idraw/board', () => { board.scrollY(transform.scrollY); board.draw(); - const p1 = {x: 400, y: 300}; - const p2 = {x: 300, y: 200}; + const p1 = { x: 400, y: 300 }; + const p2 = { x: 300, y: 200 }; test('pointScreenToContext', async () => { expect(board.pointScreenToContext(p1)).toStrictEqual(p2); @@ -36,6 +35,4 @@ describe('@idraw/board', () => { test('pointContextToScreen', async () => { expect(board.pointContextToScreen(p2)).toStrictEqual(p1); }); - }); - diff --git a/packages/board/__tests__/scale.test.ts b/packages/board/__tests__/scale.test.ts index 6da850e..a0ae67c 100644 --- a/packages/board/__tests__/scale.test.ts +++ b/packages/board/__tests__/scale.test.ts @@ -1,9 +1,8 @@ -import { Board } from '../src'; +import Board from '../src'; import { getData } from './data'; describe('@idraw/board', () => { - - test('scale', async () => { + test('scale', async () => { document.body.innerHTML = `
`; @@ -13,39 +12,41 @@ describe('@idraw/board', () => { contextWidth: 600, contextHeight: 400, devicePixelRatio: 4 - } + }; const mount = document.querySelector('#mount') as HTMLDivElement; const board = new Board(mount, opts); - + const ctx = board.getContext(); const data = getData(); - + board.clear(); ctx.clearRect(0, 0, opts.width, opts.height); ctx.setFillStyle('#ffffff'); ctx.fillRect(0, 0, opts.width, opts.height); - data.elements.forEach(ele => { + data.elements.forEach((ele) => { ctx.setFillStyle(ele.desc.color); ctx.fillRect(ele.x, ele.y, ele.w, ele.h); }); - + const result = board.scale(0.5); - expect(result).toStrictEqual({"position":{"top":100,"bottom":100,"left":150,"right":150},"size":{"x":75,"y":50,"w":300,"h":200}}) + expect(result).toStrictEqual({ + position: { top: 100, bottom: 100, left: 150, right: 150 }, + size: { x: 75, y: 50, w: 300, h: 200 } + }); board.draw(); - + const originCtx = board.getOriginContext2D(); // @ts-ignore; const originCalls = originCtx.__getDrawCalls(); expect(originCalls).toMatchSnapshot(); - + const displayCtx = board.getDisplayContext2D(); // @ts-ignore; const displayCalls = displayCtx.__getDrawCalls(); expect(displayCalls).toMatchSnapshot(); }); - - test('scale 001', async () => { + test('scale 001', async () => { document.body.innerHTML = `
`; @@ -55,39 +56,41 @@ describe('@idraw/board', () => { contextWidth: 1000, contextHeight: 900, devicePixelRatio: 4 - } + }; const mount = document.querySelector('#mount-001') as HTMLDivElement; const board = new Board(mount, opts); - + const ctx = board.getContext(); const data = getData(); - + board.clear(); ctx.clearRect(0, 0, opts.width, opts.height); ctx.setFillStyle('#ffffff'); ctx.fillRect(0, 0, opts.width, opts.height); - data.elements.forEach(ele => { + data.elements.forEach((ele) => { ctx.setFillStyle(ele.desc.color); ctx.fillRect(ele.x, ele.y, ele.w, ele.h); }); - + const result = board.scale(0.5); - expect(result).toStrictEqual({"position":{"top":0,"bottom":-50,"left":50,"right":50},"size":{"x":25,"y":0,"w":500,"h":450}}) + expect(result).toStrictEqual({ + position: { top: 0, bottom: -50, left: 50, right: 50 }, + size: { x: 25, y: 0, w: 500, h: 450 } + }); board.draw(); - + const originCtx = board.getOriginContext2D(); // @ts-ignore; const originCalls = originCtx.__getDrawCalls(); expect(originCalls).toMatchSnapshot(); - + const displayCtx = board.getDisplayContext2D(); // @ts-ignore; const displayCalls = displayCtx.__getDrawCalls(); expect(displayCalls).toMatchSnapshot(); }); - - test('scale 002', async () => { + test('scale 002', async () => { document.body.innerHTML = `
`; @@ -97,41 +100,43 @@ describe('@idraw/board', () => { contextWidth: 1200, contextHeight: 600, devicePixelRatio: 4 - } + }; const mount = document.querySelector('#mount-002') as HTMLDivElement; const board = new Board(mount, opts); - + const ctx = board.getContext(); const data = getData(); - + board.clear(); ctx.clearRect(0, 0, opts.width, opts.height); ctx.setFillStyle('#ffffff'); ctx.fillRect(0, 0, opts.width, opts.height); - data.elements.forEach(ele => { + data.elements.forEach((ele) => { ctx.setFillStyle(ele.desc.color); ctx.fillRect(ele.x, ele.y, ele.w, ele.h); }); - + board.scrollX(-600); board.scrollY(-400); const result = board.scale(0.5); - expect(result).toStrictEqual({"position":{"top":50,"bottom":50,"left":0,"right":0},"size":{"x":0,"y":25,"w":600,"h":300}}) + expect(result).toStrictEqual({ + position: { top: 50, bottom: 50, left: 0, right: 0 }, + size: { x: 0, y: 25, w: 600, h: 300 } + }); board.draw(); - + const originCtx = board.getOriginContext2D(); // @ts-ignore; const originCalls = originCtx.__getDrawCalls(); expect(originCalls).toMatchSnapshot(); - + const displayCtx = board.getDisplayContext2D(); // @ts-ignore; const displayCalls = displayCtx.__getDrawCalls(); expect(displayCalls).toMatchSnapshot(); }); - - test('scale 003', async () => { + test('scale 003', async () => { document.body.innerHTML = `
`; @@ -141,36 +146,39 @@ describe('@idraw/board', () => { contextWidth: 1000, contextHeight: 600, devicePixelRatio: 4 - } + }; const mount = document.querySelector('#mount-003') as HTMLDivElement; const board = new Board(mount, opts); - + const ctx = board.getContext(); const data = getData(); - + board.clear(); ctx.clearRect(0, 0, opts.width, opts.height); ctx.setFillStyle('#ffffff'); ctx.fillRect(0, 0, opts.width, opts.height); - data.elements.forEach(ele => { + data.elements.forEach((ele) => { ctx.setFillStyle(ele.desc.color); ctx.fillRect(ele.x, ele.y, ele.w, ele.h); }); - + board.scrollX(400); board.scrollY(400); const result = board.scale(0.8); - expect(result).toStrictEqual({"position":{"top":0,"bottom":-80,"left":0,"right":-200},"size":{"x":0,"y":0,"w":800,"h":480}}) + expect(result).toStrictEqual({ + position: { top: 0, bottom: -80, left: 0, right: -200 }, + size: { x: 0, y: 0, w: 800, h: 480 } + }); board.draw(); - + const originCtx = board.getOriginContext2D(); // @ts-ignore; const originCalls = originCtx.__getDrawCalls(); expect(originCalls).toMatchSnapshot(); - + const displayCtx = board.getDisplayContext2D(); // @ts-ignore; const displayCalls = displayCtx.__getDrawCalls(); expect(displayCalls).toMatchSnapshot(); }); -}) +}); diff --git a/packages/board/__tests__/scroll.test.ts b/packages/board/__tests__/scroll.test.ts index 5fb0e94..5c2b217 100644 --- a/packages/board/__tests__/scroll.test.ts +++ b/packages/board/__tests__/scroll.test.ts @@ -1,9 +1,7 @@ -import { Board } from '../src'; +import Board from '../src'; import { getData } from './data'; describe('@idraw/board', () => { - - document.body.innerHTML = `
`; @@ -13,7 +11,7 @@ describe('@idraw/board', () => { contextWidth: 600, contextHeight: 400, devicePixelRatio: 4 - } + }; const mount = document.querySelector('#mount') as HTMLDivElement; const board = new Board(mount, opts); @@ -23,41 +21,54 @@ describe('@idraw/board', () => { ctx.clearRect(0, 0, opts.width, opts.height); ctx.setFillStyle('#ffffff'); ctx.fillRect(0, 0, opts.width, opts.height); - data.elements.forEach(ele => { + data.elements.forEach((ele) => { ctx.setFillStyle(ele.desc.color); ctx.fillRect(ele.x, ele.y, ele.w, ele.h); }); - test('scroll', async () => { - - - const resultScale =board.scale(2); - expect(resultScale).toStrictEqual({"position":{"top":0,"bottom":-400,"left":0,"right":-600},"size":{"x":0,"y":0,"w":1200,"h":800}}) - - const resultX =board.scrollX(-600); - expect(resultX).toStrictEqual({"position":{"top":0,"bottom":-400,"left":-600,"right":0},"size":{"x":-1200,"y":0,"w":1200,"h":800}}) - - const resultY =board.scrollY(-400); - expect(resultY).toStrictEqual({"position":{"top":-400,"bottom":0,"left":-600,"right":0},"size":{"x":-1200,"y":-800,"w":1200,"h":800}}) - + test('scroll', async () => { + const resultScale = board.scale(2); + expect(resultScale).toStrictEqual({ + position: { top: 0, bottom: -400, left: 0, right: -600 }, + size: { x: 0, y: 0, w: 1200, h: 800 } + }); + + const resultX = board.scrollX(-600); + expect(resultX).toStrictEqual({ + position: { top: 0, bottom: -400, left: -600, right: 0 }, + size: { x: -1200, y: 0, w: 1200, h: 800 } + }); + + const resultY = board.scrollY(-400); + expect(resultY).toStrictEqual({ + position: { top: -400, bottom: 0, left: -600, right: 0 }, + size: { x: -1200, y: -800, w: 1200, h: 800 } + }); + board.draw(); - + const originCtx = board.getOriginContext2D(); // @ts-ignore; const originCalls = originCtx.__getDrawCalls(); expect(originCalls).toMatchSnapshot(); - + const displayCtx = board.getDisplayContext2D(); // @ts-ignore; const displayCalls = displayCtx.__getDrawCalls(); expect(displayCalls).toMatchSnapshot(); - const screenInfo = board.getScreenInfo(); - expect(screenInfo).toStrictEqual({"size":{"x":-1200,"y":-800,"w":1200,"h":800},"position":{"top":-400,"bottom":0,"left":-600,"right":0},"deviceSize":{"x":-2400,"y":-1600,"w":4800,"h":3200},"width":600,"height":400,"devicePixelRatio":4, "canScrollXNext": true, "canScrollXPrev": true, "canScrollYNext": true, "canScrollYPrev": true, }); - + expect(screenInfo).toStrictEqual({ + size: { x: -1200, y: -800, w: 1200, h: 800 }, + position: { top: -400, bottom: 0, left: -600, right: 0 }, + deviceSize: { x: -2400, y: -1600, w: 4800, h: 3200 }, + width: 600, + height: 400, + devicePixelRatio: 4, + canScrollXNext: true, + canScrollXPrev: true, + canScrollYNext: true, + canScrollYPrev: true + }); }); - - }); - diff --git a/packages/board/__tests__/wheel.test.ts b/packages/board/__tests__/wheel.test.ts index 042b43c..0bdde7f 100644 --- a/packages/board/__tests__/wheel.test.ts +++ b/packages/board/__tests__/wheel.test.ts @@ -1,8 +1,8 @@ -import { Board } from '../src'; +import Board from '../src'; import { getData } from './data'; describe('@idraw/board', () => { - test('scroll', async () => { + test('scroll', async () => { document.body.innerHTML = `
`; @@ -17,45 +17,52 @@ describe('@idraw/board', () => { lineWidth: 20, color: '#666666' } - } + }; const mount = document.querySelector('#mount') as HTMLDivElement; const board = new Board(mount, opts); - + const ctx = board.getContext(); const data = getData(); board.clear(); ctx.clearRect(0, 0, opts.width, opts.height); ctx.setFillStyle('#ffffff'); ctx.fillRect(0, 0, opts.width, opts.height); - data.elements.forEach(ele => { + data.elements.forEach((ele) => { ctx.setFillStyle(ele.desc.color); ctx.fillRect(ele.x, ele.y, ele.w, ele.h); }); - - const resultScale =board.scale(2); - expect(resultScale).toStrictEqual({"position":{"top":0,"bottom":-400,"left":0,"right":-600},"size":{"x":0,"y":0,"w":1200,"h":800}}) - - const resultX =board.scrollX(-600); - expect(resultX).toStrictEqual({"position":{"top":0,"bottom":-400,"left":-600,"right":0},"size":{"x":-1200,"y":0,"w":1200,"h":800}}) - - const resultY =board.scrollY(-400); - expect(resultY).toStrictEqual({"position":{"top":-400,"bottom":0,"left":-600,"right":0},"size":{"x":-1200,"y":-800,"w":1200,"h":800}}) - + + const resultScale = board.scale(2); + expect(resultScale).toStrictEqual({ + position: { top: 0, bottom: -400, left: 0, right: -600 }, + size: { x: 0, y: 0, w: 1200, h: 800 } + }); + + const resultX = board.scrollX(-600); + expect(resultX).toStrictEqual({ + position: { top: 0, bottom: -400, left: -600, right: 0 }, + size: { x: -1200, y: 0, w: 1200, h: 800 } + }); + + const resultY = board.scrollY(-400); + expect(resultY).toStrictEqual({ + position: { top: -400, bottom: 0, left: -600, right: 0 }, + size: { x: -1200, y: -800, w: 1200, h: 800 } + }); + board.draw(); - + const originCtx = board.getOriginContext2D(); // @ts-ignore; const originCalls = originCtx.__getDrawCalls(); expect(originCalls).toMatchSnapshot(); - + const displayCtx = board.getDisplayContext2D(); // @ts-ignore; const displayCalls = displayCtx.__getDrawCalls(); expect(displayCalls).toMatchSnapshot(); - const scrollLineWidth = board.getScrollLineWidth(); - expect(scrollLineWidth).toStrictEqual(opts.scrollConfig.lineWidth) + expect(scrollLineWidth).toStrictEqual(opts.scrollConfig.lineWidth); }); }); - diff --git a/packages/core/__tests__/__snapshots__/index.test.ts.snap b/packages/core/__tests__/__snapshots__/index.test.ts.snap index ce70fed..e35eaab 100644 --- a/packages/core/__tests__/__snapshots__/index.test.ts.snap +++ b/packages/core/__tests__/__snapshots__/index.test.ts.snap @@ -1,15 +1,15 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`@idraw/core @idraw/core: context 1`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -19,12 +19,12 @@ Array [ ], "type": "clearRect", }, - Object { - "props": Object { - "path": Array [ - Object { - "props": Object {}, - "transform": Array [ + { + "props": { + "path": [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -34,12 +34,12 @@ Array [ ], "type": "beginPath", }, - Object { - "props": Object { + { + "props": { "x": 120, "y": 20, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -49,15 +49,15 @@ Array [ ], "type": "moveTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 860, "cpx2": 860, "cpy1": 20, "cpy2": 460, "radius": 100, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -67,15 +67,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 860, "cpx2": 20, "cpy1": 460, "cpy2": 460, "radius": 100, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -85,15 +85,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 20, "cpx2": 20, "cpy1": 460, "cpy2": 20, "radius": 100, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -103,15 +103,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 20, "cpx2": 860, "cpy1": 20, "cpy2": 20, "radius": 100, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -121,9 +121,9 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object {}, - "transform": Array [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -135,7 +135,7 @@ Array [ }, ], }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -145,13 +145,13 @@ Array [ ], "type": "stroke", }, - Object { - "props": Object { + { + "props": { "fillRule": "nonzero", - "path": Array [ - Object { - "props": Object {}, - "transform": Array [ + "path": [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -161,12 +161,12 @@ Array [ ], "type": "beginPath", }, - Object { - "props": Object { + { + "props": { "x": 120, "y": 40, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -176,15 +176,15 @@ Array [ ], "type": "moveTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 840, "cpx2": 840, "cpy1": 40, "cpy2": 440, "radius": 80, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -194,15 +194,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 840, "cpx2": 40, "cpy1": 440, "cpy2": 440, "radius": 80, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -212,15 +212,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 40, "cpx2": 40, "cpy1": 440, "cpy2": 40, "radius": 80, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -230,15 +230,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 40, "cpx2": 840, "cpy1": 40, "cpy2": 40, "radius": 80, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -248,9 +248,9 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object {}, - "transform": Array [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -262,7 +262,7 @@ Array [ }, ], }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -272,12 +272,12 @@ Array [ ], "type": "fill", }, - Object { - "props": Object { - "path": Array [ - Object { - "props": Object {}, - "transform": Array [ + { + "props": { + "path": [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -287,12 +287,12 @@ Array [ ], "type": "beginPath", }, - Object { - "props": Object { + { + "props": { "x": 560, "y": 316, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -302,15 +302,15 @@ Array [ ], "type": "moveTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 1124, "cpx2": 1124, "cpy1": 316, "cpy2": 804, "radius": 244, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -320,15 +320,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 1124, "cpx2": 316, "cpy1": 804, "cpy2": 804, "radius": 244, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -338,15 +338,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 316, "cpx2": 316, "cpy1": 804, "cpy2": 316, "radius": 244, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -356,15 +356,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 316, "cpx2": 1124, "cpy1": 316, "cpy2": 316, "radius": 244, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -374,9 +374,9 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object {}, - "transform": Array [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -388,7 +388,7 @@ Array [ }, ], }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -398,13 +398,13 @@ Array [ ], "type": "stroke", }, - Object { - "props": Object { + { + "props": { "fillRule": "nonzero", - "path": Array [ - Object { - "props": Object {}, - "transform": Array [ + "path": [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -414,12 +414,12 @@ Array [ ], "type": "beginPath", }, - Object { - "props": Object { + { + "props": { "x": 560, "y": 320, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -429,15 +429,15 @@ Array [ ], "type": "moveTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 1120, "cpx2": 1120, "cpy1": 320, "cpy2": 800, "radius": 240, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -447,15 +447,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 1120, "cpx2": 320, "cpy1": 800, "cpy2": 800, "radius": 240, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -465,15 +465,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 320, "cpx2": 320, "cpy1": 800, "cpy2": 320, "radius": 240, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -483,15 +483,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 320, "cpx2": 1120, "cpy1": 320, "cpy2": 320, "radius": 240, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -501,9 +501,9 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object {}, - "transform": Array [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -515,7 +515,7 @@ Array [ }, ], }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -525,14 +525,14 @@ Array [ ], "type": "fill", }, - Object { - "props": Object { + { + "props": { "maxWidth": null, "text": "Hello Text", "x": 715, "y": 520, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -546,15 +546,15 @@ Array [ `; exports[`@idraw/core @idraw/core: context 2`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -564,14 +564,14 @@ Array [ ], "type": "clearRect", }, - Object { - "props": Object { + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -581,8 +581,8 @@ Array [ ], "type": "clearRect", }, - Object { - "props": Object { + { + "props": { "dHeight": 1600, "dWidth": 2400, "dx": 0, @@ -596,7 +596,7 @@ Array [ "sx": 0, "sy": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -606,8 +606,8 @@ Array [ ], "type": "drawImage", }, - Object { - "props": Object { + { + "props": { "dHeight": 1600, "dWidth": 2400, "dx": 0, @@ -621,7 +621,7 @@ Array [ "sx": 0, "sy": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, diff --git a/packages/core/__tests__/__snapshots__/move.test.ts.snap b/packages/core/__tests__/__snapshots__/move.test.ts.snap index 4c6bbbe..bbc9d4b 100644 --- a/packages/core/__tests__/__snapshots__/move.test.ts.snap +++ b/packages/core/__tests__/__snapshots__/move.test.ts.snap @@ -1,15 +1,15 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`@idraw/core moveDownElement 1`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -19,12 +19,12 @@ Array [ ], "type": "clearRect", }, - Object { - "props": Object { - "path": Array [ - Object { - "props": Object {}, - "transform": Array [ + { + "props": { + "path": [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -34,12 +34,12 @@ Array [ ], "type": "beginPath", }, - Object { - "props": Object { + { + "props": { "x": 120, "y": 20, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -49,15 +49,15 @@ Array [ ], "type": "moveTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 860, "cpx2": 860, "cpy1": 20, "cpy2": 460, "radius": 100, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -67,15 +67,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 860, "cpx2": 20, "cpy1": 460, "cpy2": 460, "radius": 100, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -85,15 +85,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 20, "cpx2": 20, "cpy1": 460, "cpy2": 20, "radius": 100, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -103,15 +103,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 20, "cpx2": 860, "cpy1": 20, "cpy2": 20, "radius": 100, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -121,9 +121,9 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object {}, - "transform": Array [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -135,7 +135,7 @@ Array [ }, ], }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -145,13 +145,13 @@ Array [ ], "type": "stroke", }, - Object { - "props": Object { + { + "props": { "fillRule": "nonzero", - "path": Array [ - Object { - "props": Object {}, - "transform": Array [ + "path": [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -161,12 +161,12 @@ Array [ ], "type": "beginPath", }, - Object { - "props": Object { + { + "props": { "x": 120, "y": 40, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -176,15 +176,15 @@ Array [ ], "type": "moveTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 840, "cpx2": 840, "cpy1": 40, "cpy2": 440, "radius": 80, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -194,15 +194,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 840, "cpx2": 40, "cpy1": 440, "cpy2": 440, "radius": 80, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -212,15 +212,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 40, "cpx2": 40, "cpy1": 440, "cpy2": 40, "radius": 80, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -230,15 +230,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 40, "cpx2": 840, "cpy1": 40, "cpy2": 40, "radius": 80, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -248,9 +248,9 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object {}, - "transform": Array [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -262,7 +262,7 @@ Array [ }, ], }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -272,12 +272,12 @@ Array [ ], "type": "fill", }, - Object { - "props": Object { - "path": Array [ - Object { - "props": Object {}, - "transform": Array [ + { + "props": { + "path": [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -287,12 +287,12 @@ Array [ ], "type": "beginPath", }, - Object { - "props": Object { + { + "props": { "x": 560, "y": 316, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -302,15 +302,15 @@ Array [ ], "type": "moveTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 1124, "cpx2": 1124, "cpy1": 316, "cpy2": 804, "radius": 244, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -320,15 +320,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 1124, "cpx2": 316, "cpy1": 804, "cpy2": 804, "radius": 244, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -338,15 +338,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 316, "cpx2": 316, "cpy1": 804, "cpy2": 316, "radius": 244, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -356,15 +356,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 316, "cpx2": 1124, "cpy1": 316, "cpy2": 316, "radius": 244, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -374,9 +374,9 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object {}, - "transform": Array [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -388,7 +388,7 @@ Array [ }, ], }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -398,13 +398,13 @@ Array [ ], "type": "stroke", }, - Object { - "props": Object { + { + "props": { "fillRule": "nonzero", - "path": Array [ - Object { - "props": Object {}, - "transform": Array [ + "path": [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -414,12 +414,12 @@ Array [ ], "type": "beginPath", }, - Object { - "props": Object { + { + "props": { "x": 560, "y": 320, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -429,15 +429,15 @@ Array [ ], "type": "moveTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 1120, "cpx2": 1120, "cpy1": 320, "cpy2": 800, "radius": 240, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -447,15 +447,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 1120, "cpx2": 320, "cpy1": 800, "cpy2": 800, "radius": 240, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -465,15 +465,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 320, "cpx2": 320, "cpy1": 800, "cpy2": 320, "radius": 240, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -483,15 +483,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 320, "cpx2": 1120, "cpy1": 320, "cpy2": 320, "radius": 240, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -501,9 +501,9 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object {}, - "transform": Array [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -515,7 +515,7 @@ Array [ }, ], }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -525,14 +525,14 @@ Array [ ], "type": "fill", }, - Object { - "props": Object { + { + "props": { "maxWidth": null, "text": "Hello Text", "x": 715, "y": 520, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -546,15 +546,15 @@ Array [ `; exports[`@idraw/core moveDownElement 2`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -564,14 +564,14 @@ Array [ ], "type": "clearRect", }, - Object { - "props": Object { + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -581,8 +581,8 @@ Array [ ], "type": "clearRect", }, - Object { - "props": Object { + { + "props": { "dHeight": 1600, "dWidth": 2400, "dx": 0, @@ -596,7 +596,7 @@ Array [ "sx": 0, "sy": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -606,8 +606,8 @@ Array [ ], "type": "drawImage", }, - Object { - "props": Object { + { + "props": { "dHeight": 1600, "dWidth": 2400, "dx": 0, @@ -621,7 +621,7 @@ Array [ "sx": 0, "sy": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -635,15 +635,15 @@ Array [ `; exports[`@idraw/core moveUpElement 1`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -653,12 +653,12 @@ Array [ ], "type": "clearRect", }, - Object { - "props": Object { - "path": Array [ - Object { - "props": Object {}, - "transform": Array [ + { + "props": { + "path": [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -668,12 +668,12 @@ Array [ ], "type": "beginPath", }, - Object { - "props": Object { + { + "props": { "x": 120, "y": 20, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -683,15 +683,15 @@ Array [ ], "type": "moveTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 860, "cpx2": 860, "cpy1": 20, "cpy2": 460, "radius": 100, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -701,15 +701,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 860, "cpx2": 20, "cpy1": 460, "cpy2": 460, "radius": 100, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -719,15 +719,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 20, "cpx2": 20, "cpy1": 460, "cpy2": 20, "radius": 100, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -737,15 +737,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 20, "cpx2": 860, "cpy1": 20, "cpy2": 20, "radius": 100, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -755,9 +755,9 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object {}, - "transform": Array [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -769,7 +769,7 @@ Array [ }, ], }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -779,13 +779,13 @@ Array [ ], "type": "stroke", }, - Object { - "props": Object { + { + "props": { "fillRule": "nonzero", - "path": Array [ - Object { - "props": Object {}, - "transform": Array [ + "path": [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -795,12 +795,12 @@ Array [ ], "type": "beginPath", }, - Object { - "props": Object { + { + "props": { "x": 120, "y": 40, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -810,15 +810,15 @@ Array [ ], "type": "moveTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 840, "cpx2": 840, "cpy1": 40, "cpy2": 440, "radius": 80, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -828,15 +828,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 840, "cpx2": 40, "cpy1": 440, "cpy2": 440, "radius": 80, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -846,15 +846,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 40, "cpx2": 40, "cpy1": 440, "cpy2": 40, "radius": 80, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -864,15 +864,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 40, "cpx2": 840, "cpy1": 40, "cpy2": 40, "radius": 80, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -882,9 +882,9 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object {}, - "transform": Array [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -896,7 +896,7 @@ Array [ }, ], }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -906,12 +906,12 @@ Array [ ], "type": "fill", }, - Object { - "props": Object { - "path": Array [ - Object { - "props": Object {}, - "transform": Array [ + { + "props": { + "path": [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -921,12 +921,12 @@ Array [ ], "type": "beginPath", }, - Object { - "props": Object { + { + "props": { "x": 560, "y": 316, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -936,15 +936,15 @@ Array [ ], "type": "moveTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 1124, "cpx2": 1124, "cpy1": 316, "cpy2": 804, "radius": 244, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -954,15 +954,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 1124, "cpx2": 316, "cpy1": 804, "cpy2": 804, "radius": 244, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -972,15 +972,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 316, "cpx2": 316, "cpy1": 804, "cpy2": 316, "radius": 244, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -990,15 +990,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 316, "cpx2": 1124, "cpy1": 316, "cpy2": 316, "radius": 244, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -1008,9 +1008,9 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object {}, - "transform": Array [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -1022,7 +1022,7 @@ Array [ }, ], }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -1032,13 +1032,13 @@ Array [ ], "type": "stroke", }, - Object { - "props": Object { + { + "props": { "fillRule": "nonzero", - "path": Array [ - Object { - "props": Object {}, - "transform": Array [ + "path": [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -1048,12 +1048,12 @@ Array [ ], "type": "beginPath", }, - Object { - "props": Object { + { + "props": { "x": 560, "y": 320, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -1063,15 +1063,15 @@ Array [ ], "type": "moveTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 1120, "cpx2": 1120, "cpy1": 320, "cpy2": 800, "radius": 240, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -1081,15 +1081,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 1120, "cpx2": 320, "cpy1": 800, "cpy2": 800, "radius": 240, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -1099,15 +1099,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 320, "cpx2": 320, "cpy1": 800, "cpy2": 320, "radius": 240, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -1117,15 +1117,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 320, "cpx2": 1120, "cpy1": 320, "cpy2": 320, "radius": 240, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -1135,9 +1135,9 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object {}, - "transform": Array [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -1149,7 +1149,7 @@ Array [ }, ], }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -1159,14 +1159,14 @@ Array [ ], "type": "fill", }, - Object { - "props": Object { + { + "props": { "maxWidth": null, "text": "Hello Text", "x": 715, "y": 520, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -1180,15 +1180,15 @@ Array [ `; exports[`@idraw/core moveUpElement 2`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -1198,14 +1198,14 @@ Array [ ], "type": "clearRect", }, - Object { - "props": Object { + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -1215,8 +1215,8 @@ Array [ ], "type": "clearRect", }, - Object { - "props": Object { + { + "props": { "dHeight": 1600, "dWidth": 2400, "dx": 0, @@ -1230,7 +1230,7 @@ Array [ "sx": 0, "sy": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -1240,8 +1240,8 @@ Array [ ], "type": "drawImage", }, - Object { - "props": Object { + { + "props": { "dHeight": 1600, "dWidth": 2400, "dx": 0, @@ -1255,7 +1255,7 @@ Array [ "sx": 0, "sy": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, diff --git a/packages/core/__tests__/index.test.ts b/packages/core/__tests__/index.test.ts index e147a65..d6183ec 100644 --- a/packages/core/__tests__/index.test.ts +++ b/packages/core/__tests__/index.test.ts @@ -1,17 +1,15 @@ import { requestAnimationFrameMock } from './../../../__tests__/polyfill/requestanimateframe'; import './../../../__tests__/polyfill/image'; -import { Core } from './../src/'; +import Core from './../src/'; import { getData } from './data'; - -describe("@idraw/core", () => { - +describe('@idraw/core', () => { beforeEach(() => { requestAnimationFrameMock.reset(); - }) + }); - test('@idraw/core: context', async () => { + test('@idraw/core: context', async () => { document.body.innerHTML = `
`; @@ -21,26 +19,22 @@ describe("@idraw/core", () => { contextWidth: 600, contextHeight: 400, devicePixelRatio: 4 - } + }; const mount = document.querySelector('#mount') as HTMLDivElement; const core = new Core(mount, opts); const data = getData(); core.setData(data); requestAnimationFrameMock.triggerNextAnimationFrame(); - + const originCtx = core.__getOriginContext2D(); // @ts-ignore; const originCalls = originCtx.__getDrawCalls(); expect(originCalls).toMatchSnapshot(); - + const displayCtx = core.__getDisplayContext2D(); // @ts-ignore; const displayCalls = displayCtx.__getDrawCalls(); expect(displayCalls).toMatchSnapshot(); }); }); - - - - diff --git a/packages/core/__tests__/lib/core-check.test.ts b/packages/core/__tests__/lib/core-check.test.ts index 9f089d9..7ef75ec 100644 --- a/packages/core/__tests__/lib/core-check.test.ts +++ b/packages/core/__tests__/lib/core-check.test.ts @@ -1,185 +1,223 @@ -import { Core } from './../../src'; - -describe("@idraw/core static check", () => { +import Core from './../../src'; +describe('@idraw/core static check', () => { test('Core.check.attrs', () => { - expect(Core.check.attrs({ - x: 0, - y: 100, - w: 200, - h: 200, - angle: 0 - })).toStrictEqual(true); + expect( + Core.check.attrs({ + x: 0, + y: 100, + w: 200, + h: 200, + angle: 0 + }) + ).toStrictEqual(true); - expect(Core.check.attrs({ - x: 0, - y: 100, - w: -200, - h: 200, - angle: 0 - })).toStrictEqual(false); + expect( + Core.check.attrs({ + x: 0, + y: 100, + w: -200, + h: 200, + angle: 0 + }) + ).toStrictEqual(false); - expect(Core.check.attrs({ - x: 0, - y: 100, - w: 200, - h: 200, - angle: -99999 - })).toStrictEqual(false); + expect( + Core.check.attrs({ + x: 0, + y: 100, + w: 200, + h: 200, + angle: -99999 + }) + ).toStrictEqual(false); }); - test('Core.check.rectDesc', () => { + expect( + Core.check.rectDesc({ + bgColor: '#ffffff' + }) + ).toStrictEqual(true); - expect(Core.check.rectDesc({ - bgColor: '#ffffff', - })).toStrictEqual(true); + expect( + Core.check.rectDesc({ + bgColor: 123 + }) + ).toStrictEqual(false); - expect(Core.check.rectDesc({ - bgColor: 123, - })).toStrictEqual(false); + expect( + Core.check.rectDesc({ + borderRadius: 12, + borderWidth: 10, + borderColor: '#123abf', + bgColor: '#ffffff' + }) + ).toStrictEqual(true); - expect(Core.check.rectDesc({ - borderRadius: 12, - borderWidth: 10, - borderColor: '#123abf', - bgColor: '#ffffff', - })).toStrictEqual(true); - - expect(Core.check.rectDesc({ - borderRadius: 12, - borderWidth: 10, - borderColor: '#123af', - })).toStrictEqual(false); - + expect( + Core.check.rectDesc({ + borderRadius: 12, + borderWidth: 10, + borderColor: '#123af' + }) + ).toStrictEqual(false); }); - test('Core.check.circleDesc', () => { + expect( + Core.check.circleDesc({ + bgColor: '#ffffff' + }) + ).toStrictEqual(true); - expect(Core.check.circleDesc({ - bgColor: '#ffffff', - })).toStrictEqual(true); + expect( + Core.check.circleDesc({ + bgColor: 123 + }) + ).toStrictEqual(false); - expect(Core.check.circleDesc({ - bgColor: 123, - })).toStrictEqual(false); + expect( + Core.check.circleDesc({ + borderWidth: 10, + borderColor: '#123abf', + bgColor: '#ffffff' + }) + ).toStrictEqual(true); - expect(Core.check.circleDesc({ - borderWidth: 10, - borderColor: '#123abf', - bgColor: '#ffffff', - })).toStrictEqual(true); - - expect(Core.check.circleDesc({ - borderWidth: 10, - borderColor: '#123af', - })).toStrictEqual(false); - + expect( + Core.check.circleDesc({ + borderWidth: 10, + borderColor: '#123af' + }) + ).toStrictEqual(false); }); - test('Core.check.imageDesc', () => { + expect( + Core.check.imageDesc({ + src: 'https://xxxxxx' + }) + ).toStrictEqual(true); - expect(Core.check.imageDesc({ - src: 'https://xxxxxx', - })).toStrictEqual(true); + expect( + Core.check.imageDesc({ + src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOg' + }) + ).toStrictEqual(true); - expect(Core.check.imageDesc({ - src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOg', - })).toStrictEqual(true); + expect( + Core.check.imageDesc({ + src: '/xx/xxx/xxx' + }) + ).toStrictEqual(true); - expect(Core.check.imageDesc({ - src: '/xx/xxx/xxx', - })).toStrictEqual(true); + expect( + Core.check.imageDesc({ + src: './xx/xxx/xxx' + }) + ).toStrictEqual(true); - expect(Core.check.imageDesc({ - src: './xx/xxx/xxx', - })).toStrictEqual(true); + expect( + Core.check.imageDesc({ + src: 'abcdefg' + }) + ).toStrictEqual(false); - expect(Core.check.imageDesc({ - src: 'abcdefg', - })).toStrictEqual(false); - - expect(Core.check.imageDesc({ - src: 1234, - })).toStrictEqual(false); + expect( + Core.check.imageDesc({ + src: 1234 + }) + ).toStrictEqual(false); expect(Core.check.imageDesc({})).toStrictEqual(false); }); test('Core.check.svgDesc', () => { - expect(Core.check.svgDesc({ - svg: ` + expect( + Core.check.svgDesc({ + svg: ` - `, - })).toStrictEqual(true); + ` + }) + ).toStrictEqual(true); - expect(Core.check.svgDesc({ - svg: ` + expect( + Core.check.svgDesc({ + svg: ` - `, - })).toStrictEqual(true); + ` + }) + ).toStrictEqual(true); - expect(Core.check.svgDesc({ - svg: './xxxxx/xxx', - })).toStrictEqual(false); + expect( + Core.check.svgDesc({ + svg: './xxxxx/xxx' + }) + ).toStrictEqual(false); expect(Core.check.svgDesc({})).toStrictEqual(false); }); - test('Core.check.htmlDesc', () => { - expect(Core.check.htmlDesc({ - html: ` + expect( + Core.check.htmlDesc({ + html: `
Hello World
- `, - })).toStrictEqual(true); + ` + }) + ).toStrictEqual(true); - expect(Core.check.htmlDesc({ - html: ` + expect( + Core.check.htmlDesc({ + html: ` abcdefg
Hello World
- `, - })).toStrictEqual(true); + ` + }) + ).toStrictEqual(true); - expect(Core.check.htmlDesc({ - html: 'Hello World', - })).toStrictEqual(false); + expect( + Core.check.htmlDesc({ + html: 'Hello World' + }) + ).toStrictEqual(false); expect(Core.check.htmlDesc({})).toStrictEqual(false); }); - test('Core.check.textDesc', () => { - expect(Core.check.textDesc({ - text: 'abcdefg', - color: '#af1234', - bgColor: '#f0f0f0', - fontSize: 12, - lineHeight: 12, - fontWeight: 'bold', - fontFamily: 'abc', - textAlign: 'center', - borderRadius: 12, - borderWidth: 10, - borderColor: '#123abf', - })).toStrictEqual(true); + expect( + Core.check.textDesc({ + text: 'abcdefg', + color: '#af1234', + bgColor: '#f0f0f0', + fontSize: 12, + lineHeight: 12, + fontWeight: 'bold', + fontFamily: 'abc', + textAlign: 'center', + borderRadius: 12, + borderWidth: 10, + borderColor: '#123abf' + }) + ).toStrictEqual(true); - expect(Core.check.textDesc({ - text: 'abcdefg', - color: '#af1234', - fontSize: 12, - })).toStrictEqual(true); + expect( + Core.check.textDesc({ + text: 'abcdefg', + color: '#af1234', + fontSize: 12 + }) + ).toStrictEqual(true); expect(Core.check.textDesc({})).toStrictEqual(false); }); - -}) \ No newline at end of file +}); diff --git a/packages/core/__tests__/lib/core-element.test.ts b/packages/core/__tests__/lib/core-element.test.ts index b835ccb..1e20175 100644 --- a/packages/core/__tests__/lib/core-element.test.ts +++ b/packages/core/__tests__/lib/core-element.test.ts @@ -1,8 +1,8 @@ // import { TypeData } from '@idraw/types'; -import { Core } from '../../src'; +import Core from '../../src'; import { getData } from '../data'; -describe("@idraw/core: Element API", () => { +describe('@idraw/core: Element API', () => { document.body.innerHTML = `
`; @@ -12,33 +12,28 @@ describe("@idraw/core: Element API", () => { contextWidth: 600, contextHeight: 400, devicePixelRatio: 4 - } + }; const mount = document.querySelector('#mount') as HTMLDivElement; const core = new Core(mount, opts); const data = getData(); core.setData(data); const _data = core.getData(); - test('getSelectedElements', async () => { + test('getSelectedElements', async () => { core.selectElement(_data.elements[1].uuid || ''); const elems = core.getSelectedElements(); expect(elems).toStrictEqual([_data.elements[1]]); }); - test('getElement', async () => { + test('getElement', async () => { const uuid = core.getData().elements[0]?.uuid; const elem = core.getElement(uuid); - expect(elem).toStrictEqual(core.getData().elements[0]) + expect(elem).toStrictEqual(core.getData().elements[0]); }); - test('getElementByIndex', async () => { + test('getElementByIndex', async () => { const index = 0; const elem = core.getElementByIndex(index); - expect(elem).toStrictEqual(core.getData().elements[index]) + expect(elem).toStrictEqual(core.getData().elements[index]); }); - }); - - - - diff --git a/packages/core/__tests__/lib/core-is.test.ts b/packages/core/__tests__/lib/core-is.test.ts index a0231bd..1c3a1f3 100644 --- a/packages/core/__tests__/lib/core-is.test.ts +++ b/packages/core/__tests__/lib/core-is.test.ts @@ -1,7 +1,6 @@ -import { Core } from './../../src'; - -describe("@idraw/core:static is", () => { +import Core from './../../src'; +describe('@idraw/core:static is', () => { test('Core.is.number', () => { expect(Core.is.number(0)).toStrictEqual(true); expect(Core.is.number(100)).toStrictEqual(true); @@ -70,7 +69,9 @@ describe("@idraw/core:static is", () => { expect(Core.is.imageSrc('http://xxxxx')).toStrictEqual(true); expect(Core.is.imageSrc('./xxxxx/xxx')).toStrictEqual(true); expect(Core.is.imageSrc('/xxxxx/xxx')).toStrictEqual(true); - expect(Core.is.imageSrc('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOg')).toStrictEqual(true); + expect( + Core.is.imageSrc('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOg') + ).toStrictEqual(true); expect(Core.is.imageSrc('dafafsfsaffafa')).toStrictEqual(false); }); @@ -83,7 +84,9 @@ describe("@idraw/core:static is", () => { }); test('Core.is.imageBase64', () => { - expect(Core.is.imageBase64('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOg')).toStrictEqual(true); + expect( + Core.is.imageBase64('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOg') + ).toStrictEqual(true); expect(Core.is.imageBase64('http://xxxxx')).toStrictEqual(false); expect(Core.is.imageBase64('./xxxxx/xxx')).toStrictEqual(false); expect(Core.is.imageBase64('/xxxxx/xxx')).toStrictEqual(false); @@ -91,31 +94,39 @@ describe("@idraw/core:static is", () => { }); test('Core.is.svg', () => { - expect(Core.is.svg(` + expect( + Core.is.svg(` - `)).toStrictEqual(true); - expect(Core.is.svg(` + `) + ).toStrictEqual(true); + expect( + Core.is.svg(` - `)).toStrictEqual(true); + `) + ).toStrictEqual(true); expect(Core.is.svg('./xxxxx/xxx')).toStrictEqual(false); expect(Core.is.svg('/xxxxx/xxx')).toStrictEqual(false); expect(Core.is.svg('dafafsfsaffafa')).toStrictEqual(false); }); test('Core.is.html', () => { - expect(Core.is.html(` + expect( + Core.is.html(`
Hello World
- `)).toStrictEqual(true); - expect(Core.is.html(` + `) + ).toStrictEqual(true); + expect( + Core.is.html(`
Hello World
- `)).toStrictEqual(true); + `) + ).toStrictEqual(true); expect(Core.is.html('./xxxxx/xxx')).toStrictEqual(false); expect(Core.is.html('/xxxxx/xxx')).toStrictEqual(false); expect(Core.is.html('dafafsfsaffafa')).toStrictEqual(false); @@ -146,7 +157,6 @@ describe("@idraw/core:static is", () => { expect(Core.is.textAlign('helloworld')).toStrictEqual(false); }); - test('Core.is.fontFamily', () => { expect(Core.is.fontFamily('yahei')).toStrictEqual(true); expect(Core.is.fontFamily('helloworld')).toStrictEqual(true); @@ -158,5 +168,4 @@ describe("@idraw/core:static is", () => { expect(Core.is.fontWeight('xxxxxxx')).toStrictEqual(false); expect(Core.is.fontWeight('')).toStrictEqual(false); }); - -}) \ No newline at end of file +}); diff --git a/packages/core/__tests__/lib/element.test.ts b/packages/core/__tests__/lib/element.test.ts index ba787e1..3437aef 100644 --- a/packages/core/__tests__/lib/element.test.ts +++ b/packages/core/__tests__/lib/element.test.ts @@ -1,9 +1,9 @@ import { TypeData } from '@idraw/types'; -import { Core } from './../../src'; +import Core from './../../src'; import { getData } from './../data'; import { Element } from './../../src/lib/element'; -describe("@idraw/core: lib/element", () => { +describe('@idraw/core: lib/element', () => { document.body.innerHTML = `
`; @@ -13,21 +13,15 @@ describe("@idraw/core: lib/element", () => { contextWidth: 600, contextHeight: 400, devicePixelRatio: 4 - } + }; const mount = document.querySelector('#mount') as HTMLDivElement; const core = new Core(mount, opts); const ctx = core.__getBoardContext(); const data = getData(); - test('initData', async () => { + test('initData', async () => { const element = new Element(ctx); const newData = element.initData(data as TypeData); expect(newData.elements[0].uuid.length).toStrictEqual(36); }); - - }); - - - - diff --git a/packages/core/__tests__/lib/point.test.ts b/packages/core/__tests__/lib/point.test.ts index 24826c5..bd931be 100644 --- a/packages/core/__tests__/lib/point.test.ts +++ b/packages/core/__tests__/lib/point.test.ts @@ -1,7 +1,6 @@ -import { Core } from '../../src'; +import Core from '../../src'; describe('@idraw/core', () => { - document.body.innerHTML = `
`; @@ -11,12 +10,12 @@ describe('@idraw/core', () => { contextWidth: 600, contextHeight: 400, devicePixelRatio: 4, - canScroll: true, + canScroll: true }; const transform = { scale: 2, scrollLeft: 200, - scrollTop: 100, + scrollTop: 100 }; const mount = document.querySelector('#mount') as HTMLDivElement; const idraw = new Core(mount, opts); @@ -25,8 +24,8 @@ describe('@idraw/core', () => { idraw.scrollLeft(transform.scrollLeft); idraw.scrollTop(transform.scrollTop); - const p1 = {x: 400, y: 300}; - const p2 = {x: 300, y: 200}; + const p1 = { x: 400, y: 300 }; + const p2 = { x: 300, y: 200 }; test('pointScreenToContext', async () => { expect(idraw.pointScreenToContext(p1)).toStrictEqual(p2); @@ -35,6 +34,4 @@ describe('@idraw/core', () => { test('pointContextToScreen', async () => { expect(idraw.pointContextToScreen(p2)).toStrictEqual(p1); }); - }); - diff --git a/packages/core/__tests__/move.test.ts b/packages/core/__tests__/move.test.ts index a79d42f..c0ed418 100644 --- a/packages/core/__tests__/move.test.ts +++ b/packages/core/__tests__/move.test.ts @@ -1,7 +1,7 @@ import { requestAnimationFrameMock } from '../../../__tests__/polyfill/requestanimateframe'; import '../../../__tests__/polyfill/image'; -import { Core } from '../src'; +import Core from '../src'; import { getData } from './data'; // function delay(time: number): Promise { @@ -12,13 +12,12 @@ import { getData } from './data'; // }); // } -describe("@idraw/core", () => { - +describe('@idraw/core', () => { beforeEach(() => { requestAnimationFrameMock.reset(); - }) + }); - test('moveDownElement', async () => { + test('moveDownElement', async () => { document.body.innerHTML = `
`; @@ -28,27 +27,27 @@ describe("@idraw/core", () => { contextWidth: 600, contextHeight: 400, devicePixelRatio: 4 - } + }; const mount = document.querySelector('#mount') as HTMLDivElement; const idraw = new Core(mount, opts); const data = getData(); idraw.setData(data); - idraw.moveUpElement('image-003'); + idraw.moveUpElement('image-003'); requestAnimationFrameMock.triggerNextAnimationFrame(); - + const originCtx = idraw.__getOriginContext2D(); // @ts-ignore; const originCalls = originCtx.__getDrawCalls(); expect(originCalls).toMatchSnapshot(); - + const displayCtx = idraw.__getDisplayContext2D(); // @ts-ignore; const displayCalls = displayCtx.__getDrawCalls(); expect(displayCalls).toMatchSnapshot(); }); - test('moveUpElement', async () => { + test('moveUpElement', async () => { document.body.innerHTML = `
`; @@ -58,28 +57,23 @@ describe("@idraw/core", () => { contextWidth: 600, contextHeight: 400, devicePixelRatio: 4 - } + }; const mount = document.querySelector('#mount') as HTMLDivElement; const idraw = new Core(mount, opts); const data = getData(); idraw.setData(data); - idraw.moveDownElement('image-003'); + idraw.moveDownElement('image-003'); requestAnimationFrameMock.triggerNextAnimationFrame(); - + const originCtx = idraw.__getOriginContext2D(); // @ts-ignore; const originCalls = originCtx.__getDrawCalls(); expect(originCalls).toMatchSnapshot(); - + const displayCtx = idraw.__getDisplayContext2D(); // @ts-ignore; const displayCalls = displayCtx.__getDrawCalls(); expect(displayCalls).toMatchSnapshot(); }); - }); - - - - diff --git a/packages/idraw/__tests__/__snapshots__/index.test.ts.snap b/packages/idraw/__tests__/__snapshots__/index.test.ts.snap index ce3bcab..0743723 100644 --- a/packages/idraw/__tests__/__snapshots__/index.test.ts.snap +++ b/packages/idraw/__tests__/__snapshots__/index.test.ts.snap @@ -1,15 +1,15 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`idraw context 1`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -19,12 +19,12 @@ Array [ ], "type": "clearRect", }, - Object { - "props": Object { - "path": Array [ - Object { - "props": Object {}, - "transform": Array [ + { + "props": { + "path": [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -34,12 +34,12 @@ Array [ ], "type": "beginPath", }, - Object { - "props": Object { + { + "props": { "x": 120, "y": 20, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -49,15 +49,15 @@ Array [ ], "type": "moveTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 860, "cpx2": 860, "cpy1": 20, "cpy2": 460, "radius": 100, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -67,15 +67,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 860, "cpx2": 20, "cpy1": 460, "cpy2": 460, "radius": 100, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -85,15 +85,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 20, "cpx2": 20, "cpy1": 460, "cpy2": 20, "radius": 100, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -103,15 +103,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 20, "cpx2": 860, "cpy1": 20, "cpy2": 20, "radius": 100, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -121,9 +121,9 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object {}, - "transform": Array [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -135,7 +135,7 @@ Array [ }, ], }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -145,13 +145,13 @@ Array [ ], "type": "stroke", }, - Object { - "props": Object { + { + "props": { "fillRule": "nonzero", - "path": Array [ - Object { - "props": Object {}, - "transform": Array [ + "path": [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -161,12 +161,12 @@ Array [ ], "type": "beginPath", }, - Object { - "props": Object { + { + "props": { "x": 120, "y": 40, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -176,15 +176,15 @@ Array [ ], "type": "moveTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 840, "cpx2": 840, "cpy1": 40, "cpy2": 440, "radius": 80, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -194,15 +194,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 840, "cpx2": 40, "cpy1": 440, "cpy2": 440, "radius": 80, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -212,15 +212,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 40, "cpx2": 40, "cpy1": 440, "cpy2": 40, "radius": 80, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -230,15 +230,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 40, "cpx2": 840, "cpy1": 40, "cpy2": 40, "radius": 80, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -248,9 +248,9 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object {}, - "transform": Array [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -262,7 +262,7 @@ Array [ }, ], }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -272,12 +272,12 @@ Array [ ], "type": "fill", }, - Object { - "props": Object { - "path": Array [ - Object { - "props": Object {}, - "transform": Array [ + { + "props": { + "path": [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -287,12 +287,12 @@ Array [ ], "type": "beginPath", }, - Object { - "props": Object { + { + "props": { "x": 560, "y": 316, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -302,15 +302,15 @@ Array [ ], "type": "moveTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 1124, "cpx2": 1124, "cpy1": 316, "cpy2": 804, "radius": 244, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -320,15 +320,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 1124, "cpx2": 316, "cpy1": 804, "cpy2": 804, "radius": 244, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -338,15 +338,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 316, "cpx2": 316, "cpy1": 804, "cpy2": 316, "radius": 244, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -356,15 +356,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 316, "cpx2": 1124, "cpy1": 316, "cpy2": 316, "radius": 244, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -374,9 +374,9 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object {}, - "transform": Array [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -388,7 +388,7 @@ Array [ }, ], }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -398,13 +398,13 @@ Array [ ], "type": "stroke", }, - Object { - "props": Object { + { + "props": { "fillRule": "nonzero", - "path": Array [ - Object { - "props": Object {}, - "transform": Array [ + "path": [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -414,12 +414,12 @@ Array [ ], "type": "beginPath", }, - Object { - "props": Object { + { + "props": { "x": 560, "y": 320, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -429,15 +429,15 @@ Array [ ], "type": "moveTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 1120, "cpx2": 1120, "cpy1": 320, "cpy2": 800, "radius": 240, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -447,15 +447,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 1120, "cpx2": 320, "cpy1": 800, "cpy2": 800, "radius": 240, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -465,15 +465,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 320, "cpx2": 320, "cpy1": 800, "cpy2": 320, "radius": 240, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -483,15 +483,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 320, "cpx2": 1120, "cpy1": 320, "cpy2": 320, "radius": 240, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -501,9 +501,9 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object {}, - "transform": Array [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -515,7 +515,7 @@ Array [ }, ], }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -525,14 +525,14 @@ Array [ ], "type": "fill", }, - Object { - "props": Object { + { + "props": { "maxWidth": null, "text": "Hello Text", "x": 715, "y": 520, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -546,15 +546,15 @@ Array [ `; exports[`idraw context 2`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -564,14 +564,14 @@ Array [ ], "type": "clearRect", }, - Object { - "props": Object { + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -581,8 +581,8 @@ Array [ ], "type": "clearRect", }, - Object { - "props": Object { + { + "props": { "dHeight": 1600, "dWidth": 2400, "dx": 0, @@ -596,7 +596,7 @@ Array [ "sx": 0, "sy": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -606,8 +606,8 @@ Array [ ], "type": "drawImage", }, - Object { - "props": Object { + { + "props": { "dHeight": 1600, "dWidth": 2400, "dx": 0, @@ -621,7 +621,7 @@ Array [ "sx": 0, "sy": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -635,15 +635,15 @@ Array [ `; exports[`idraw undo/redo 1`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -653,12 +653,12 @@ Array [ ], "type": "clearRect", }, - Object { - "props": Object { - "path": Array [ - Object { - "props": Object {}, - "transform": Array [ + { + "props": { + "path": [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -668,12 +668,12 @@ Array [ ], "type": "beginPath", }, - Object { - "props": Object { + { + "props": { "x": 120, "y": 20, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -683,15 +683,15 @@ Array [ ], "type": "moveTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 860, "cpx2": 860, "cpy1": 20, "cpy2": 460, "radius": 100, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -701,15 +701,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 860, "cpx2": 20, "cpy1": 460, "cpy2": 460, "radius": 100, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -719,15 +719,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 20, "cpx2": 20, "cpy1": 460, "cpy2": 20, "radius": 100, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -737,15 +737,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 20, "cpx2": 860, "cpy1": 20, "cpy2": 20, "radius": 100, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -755,9 +755,9 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object {}, - "transform": Array [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -769,7 +769,7 @@ Array [ }, ], }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -779,13 +779,13 @@ Array [ ], "type": "stroke", }, - Object { - "props": Object { + { + "props": { "fillRule": "nonzero", - "path": Array [ - Object { - "props": Object {}, - "transform": Array [ + "path": [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -795,12 +795,12 @@ Array [ ], "type": "beginPath", }, - Object { - "props": Object { + { + "props": { "x": 120, "y": 40, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -810,15 +810,15 @@ Array [ ], "type": "moveTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 840, "cpx2": 840, "cpy1": 40, "cpy2": 440, "radius": 80, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -828,15 +828,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 840, "cpx2": 40, "cpy1": 440, "cpy2": 440, "radius": 80, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -846,15 +846,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 40, "cpx2": 40, "cpy1": 440, "cpy2": 40, "radius": 80, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -864,15 +864,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 40, "cpx2": 840, "cpy1": 40, "cpy2": 40, "radius": 80, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -882,9 +882,9 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object {}, - "transform": Array [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -896,7 +896,7 @@ Array [ }, ], }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -906,12 +906,12 @@ Array [ ], "type": "fill", }, - Object { - "props": Object { - "path": Array [ - Object { - "props": Object {}, - "transform": Array [ + { + "props": { + "path": [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -921,12 +921,12 @@ Array [ ], "type": "beginPath", }, - Object { - "props": Object { + { + "props": { "x": 560, "y": 316, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -936,15 +936,15 @@ Array [ ], "type": "moveTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 1124, "cpx2": 1124, "cpy1": 316, "cpy2": 804, "radius": 244, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -954,15 +954,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 1124, "cpx2": 316, "cpy1": 804, "cpy2": 804, "radius": 244, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -972,15 +972,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 316, "cpx2": 316, "cpy1": 804, "cpy2": 316, "radius": 244, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -990,15 +990,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 316, "cpx2": 1124, "cpy1": 316, "cpy2": 316, "radius": 244, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -1008,9 +1008,9 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object {}, - "transform": Array [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -1022,7 +1022,7 @@ Array [ }, ], }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -1032,13 +1032,13 @@ Array [ ], "type": "stroke", }, - Object { - "props": Object { + { + "props": { "fillRule": "nonzero", - "path": Array [ - Object { - "props": Object {}, - "transform": Array [ + "path": [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -1048,12 +1048,12 @@ Array [ ], "type": "beginPath", }, - Object { - "props": Object { + { + "props": { "x": 560, "y": 320, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -1063,15 +1063,15 @@ Array [ ], "type": "moveTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 1120, "cpx2": 1120, "cpy1": 320, "cpy2": 800, "radius": 240, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -1081,15 +1081,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 1120, "cpx2": 320, "cpy1": 800, "cpy2": 800, "radius": 240, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -1099,15 +1099,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 320, "cpx2": 320, "cpy1": 800, "cpy2": 320, "radius": 240, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -1117,15 +1117,15 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object { + { + "props": { "cpx1": 320, "cpx2": 1120, "cpy1": 320, "cpy2": 320, "radius": 240, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -1135,9 +1135,9 @@ Array [ ], "type": "arcTo", }, - Object { - "props": Object {}, - "transform": Array [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -1149,7 +1149,7 @@ Array [ }, ], }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -1159,14 +1159,14 @@ Array [ ], "type": "fill", }, - Object { - "props": Object { + { + "props": { "maxWidth": null, "text": "Hello Text", "x": 715, "y": 520, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -1180,15 +1180,15 @@ Array [ `; exports[`idraw undo/redo 2`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -1198,14 +1198,14 @@ Array [ ], "type": "clearRect", }, - Object { - "props": Object { + { + "props": { "height": 1600, "width": 2400, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -1215,8 +1215,8 @@ Array [ ], "type": "clearRect", }, - Object { - "props": Object { + { + "props": { "dHeight": 1600, "dWidth": 2400, "dx": 0, @@ -1230,7 +1230,7 @@ Array [ "sx": 0, "sy": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -1240,8 +1240,8 @@ Array [ ], "type": "drawImage", }, - Object { - "props": Object { + { + "props": { "dHeight": 1600, "dWidth": 2400, "dx": 0, @@ -1255,7 +1255,7 @@ Array [ "sx": 0, "sy": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, diff --git a/packages/util/__tests__/index.test.ts b/packages/util/__tests__/index.test.ts index fdbdfd6..06be948 100644 --- a/packages/util/__tests__/index.test.ts +++ b/packages/util/__tests__/index.test.ts @@ -1,33 +1,32 @@ -import util from '../src/default'; +import * as util from '../src'; const types = { - 'Context': 'Function', - 'check': 'Object', - 'compose': 'Function', - 'createUUID': 'Function', - 'deepClone': 'Function', - 'delay': 'Function', - 'downloadImageFromCanvas': 'Function', - 'is': 'Object', - 'isColorStr': 'Function', - 'istype': 'Object', - 'loadHTML': 'AsyncFunction', - 'loadImage': 'Function', - 'loadSVG': 'AsyncFunction', - 'throttle': 'Function', - 'toColorHexNum': 'Function', - 'toColorHexStr': 'Function' -} + Context: 'Function', + check: 'Object', + compose: 'Function', + createUUID: 'Function', + deepClone: 'Function', + delay: 'Function', + downloadImageFromCanvas: 'Function', + is: 'Object', + isColorStr: 'Function', + istype: 'Object', + loadHTML: 'AsyncFunction', + loadImage: 'Function', + loadSVG: 'AsyncFunction', + throttle: 'Function', + toColorHexNum: 'Function', + toColorHexStr: 'Function', + default: 'Object' +}; -function getType (data: any): string { +function getType(data: any): string { const typeStr = Object.prototype.toString.call(data) || ''; - const result = typeStr.replace(/(\[object|\])/ig, '').trim(); + const result = typeStr.replace(/(\[object|\])/gi, '').trim(); return result; } - describe('@idraw/util', () => { - test('index', async () => { const keys = Object.keys(util); keys.forEach((key) => { @@ -37,6 +36,4 @@ describe('@idraw/util', () => { expect(type).toStrictEqual(types[key]); }); }); - }); - diff --git a/packages/util/__tests__/lib/__snapshots__/context.test.ts.snap b/packages/util/__tests__/lib/__snapshots__/context.test.ts.snap index 63ac58a..a0bac45 100644 --- a/packages/util/__tests__/lib/__snapshots__/context.test.ts.snap +++ b/packages/util/__tests__/lib/__snapshots__/context.test.ts.snap @@ -1,15 +1,15 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`@idraw/board: src/lib/context Context 1`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "height": 1800, "width": 2000, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -19,14 +19,14 @@ Array [ ], "type": "clearRect", }, - Object { - "props": Object { + { + "props": { "height": 1800, "width": 2000, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -36,14 +36,14 @@ Array [ ], "type": "fillRect", }, - Object { - "props": Object { + { + "props": { "height": 240, "width": 400, "x": 20, "y": 20, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -53,14 +53,14 @@ Array [ ], "type": "fillRect", }, - Object { - "props": Object { + { + "props": { "height": 240, "width": 400, "x": 160, "y": 160, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -70,14 +70,14 @@ Array [ ], "type": "fillRect", }, - Object { - "props": Object { + { + "props": { "height": 240, "width": 400, "x": 320, "y": 320, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -87,14 +87,14 @@ Array [ ], "type": "fillRect", }, - Object { - "props": Object { + { + "props": { "height": 200, "width": 400, "x": 780, "y": 580, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -108,14 +108,14 @@ Array [ `; exports[`@idraw/board: src/lib/context Context.arc 1`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "fillRule": "nonzero", - "path": Array [ - Object { - "props": Object {}, - "transform": Array [ + "path": [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -125,8 +125,8 @@ Array [ ], "type": "beginPath", }, - Object { - "props": Object { + { + "props": { "anticlockwise": true, "endAngle": 6.283185307179586, "radius": 100, @@ -134,7 +134,7 @@ Array [ "x": 140, "y": 160, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -146,7 +146,7 @@ Array [ }, ], }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -160,14 +160,14 @@ Array [ `; exports[`@idraw/board: src/lib/context Context.arcTo 1`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "fillRule": "nonzero", - "path": Array [ - Object { - "props": Object {}, - "transform": Array [ + "path": [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -177,15 +177,15 @@ Array [ ], "type": "beginPath", }, - Object { - "props": Object { + { + "props": { "cpx1": 100, "cpx2": 200, "cpy1": 100, "cpy2": 200, "radius": 12.566370614359172, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -197,7 +197,7 @@ Array [ }, ], }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -211,14 +211,14 @@ Array [ `; exports[`@idraw/board: src/lib/context Context.beginPath 1`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "fillRule": "nonzero", - "path": Array [ - Object { - "props": Object {}, - "transform": Array [ + "path": [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -230,7 +230,7 @@ Array [ }, ], }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -244,15 +244,15 @@ Array [ `; exports[`@idraw/board: src/lib/context Context.clearRect 1`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "height": 1800, "width": 2000, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -266,14 +266,14 @@ Array [ `; exports[`@idraw/board: src/lib/context Context.closePath 1`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "fillRule": "nonzero", - "path": Array [ - Object { - "props": Object {}, - "transform": Array [ + "path": [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -283,9 +283,9 @@ Array [ ], "type": "beginPath", }, - Object { - "props": Object {}, - "transform": Array [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -297,7 +297,7 @@ Array [ }, ], }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -311,15 +311,15 @@ Array [ `; exports[`@idraw/board: src/lib/context Context.createPattern 1`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "height": 600, "width": 600, "x": 0, "y": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -333,9 +333,9 @@ Array [ `; exports[`@idraw/board: src/lib/context Context.drawImage 1`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "dHeight": 0, "dWidth": 0, "dx": 22, @@ -346,7 +346,7 @@ Array [ "sx": 0, "sy": 0, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -356,8 +356,8 @@ Array [ ], "type": "drawImage", }, - Object { - "props": Object { + { + "props": { "dHeight": 104, "dWidth": 102, "dx": 22, @@ -368,7 +368,7 @@ Array [ "sx": 122, "sy": 124, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -382,14 +382,14 @@ Array [ `; exports[`@idraw/board: src/lib/context Context.fill 1`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "fillRule": "nonzero", - "path": Array [ - Object { - "props": Object {}, - "transform": Array [ + "path": [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -401,7 +401,7 @@ Array [ }, ], }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -415,15 +415,15 @@ Array [ `; exports[`@idraw/board: src/lib/context Context.fillRect 1`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "height": 200, "width": 160, "x": 20, "y": 40, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -437,15 +437,15 @@ Array [ `; exports[`@idraw/board: src/lib/context Context.fillText 1`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "maxWidth": null, "text": "Hello world", "x": 100, "y": 200, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -459,14 +459,14 @@ Array [ `; exports[`@idraw/board: src/lib/context Context.lineTo 1`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "fillRule": "nonzero", - "path": Array [ - Object { - "props": Object {}, - "transform": Array [ + "path": [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -476,12 +476,12 @@ Array [ ], "type": "beginPath", }, - Object { - "props": Object { + { + "props": { "x": 20, "y": 40, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -493,7 +493,7 @@ Array [ }, ], }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -507,14 +507,14 @@ Array [ `; exports[`@idraw/board: src/lib/context Context.moveTo 1`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "fillRule": "nonzero", - "path": Array [ - Object { - "props": Object {}, - "transform": Array [ + "path": [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -524,12 +524,12 @@ Array [ ], "type": "beginPath", }, - Object { - "props": Object { + { + "props": { "x": 20, "y": 40, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -541,7 +541,7 @@ Array [ }, ], }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -555,14 +555,14 @@ Array [ `; exports[`@idraw/board: src/lib/context Context.rect 1`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "fillRule": "nonzero", - "path": Array [ - Object { - "props": Object {}, - "transform": Array [ + "path": [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -572,14 +572,14 @@ Array [ ], "type": "beginPath", }, - Object { - "props": Object { + { + "props": { "height": 400, "width": 200, "x": 20, "y": 40, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -591,7 +591,7 @@ Array [ }, ], }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -605,15 +605,15 @@ Array [ `; exports[`@idraw/board: src/lib/context Context.restore 1`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "height": 200, "width": 200, "x": 20, "y": 20, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -623,14 +623,14 @@ Array [ ], "type": "fillRect", }, - Object { - "props": Object { + { + "props": { "height": 200, "width": 200, "x": 300, "y": 150, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -644,13 +644,13 @@ Array [ `; exports[`@idraw/board: src/lib/context Context.rotate 1`] = ` -Array [ - Object { - "props": Object { - "path": Array [ - Object { - "props": Object {}, - "transform": Array [ +[ + { + "props": { + "path": [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -660,14 +660,14 @@ Array [ ], "type": "beginPath", }, - Object { - "props": Object { + { + "props": { "height": 400, "width": 200, "x": 20, "y": 40, }, - "transform": Array [ + "transform": [ 0.8660254037844387, 0.49999999999999994, -0.49999999999999994, @@ -679,7 +679,7 @@ Array [ }, ], }, - "transform": Array [ + "transform": [ 0.8660254037844387, 0.49999999999999994, -0.49999999999999994, @@ -693,15 +693,15 @@ Array [ `; exports[`@idraw/board: src/lib/context Context.save 1`] = ` -Array [ - Object { - "props": Object { +[ + { + "props": { "height": 200, "width": 200, "x": 20, "y": 20, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -711,14 +711,14 @@ Array [ ], "type": "fillRect", }, - Object { - "props": Object { + { + "props": { "height": 200, "width": 200, "x": 300, "y": 150, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -732,13 +732,13 @@ Array [ `; exports[`@idraw/board: src/lib/context Context.scale 1`] = ` -Array [ - Object { - "props": Object { - "path": Array [ - Object { - "props": Object {}, - "transform": Array [ +[ + { + "props": { + "path": [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -748,14 +748,14 @@ Array [ ], "type": "beginPath", }, - Object { - "props": Object { + { + "props": { "height": 400, "width": 200, "x": 20, "y": 40, }, - "transform": Array [ + "transform": [ 2, 0, 0, @@ -767,7 +767,7 @@ Array [ }, ], }, - "transform": Array [ + "transform": [ 2, 0, 0, @@ -781,13 +781,13 @@ Array [ `; exports[`@idraw/board: src/lib/context Context.stroke 1`] = ` -Array [ - Object { - "props": Object { - "path": Array [ - Object { - "props": Object {}, - "transform": Array [ +[ + { + "props": { + "path": [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -797,14 +797,14 @@ Array [ ], "type": "beginPath", }, - Object { - "props": Object { + { + "props": { "height": 400, "width": 200, "x": 20, "y": 40, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -816,7 +816,7 @@ Array [ }, ], }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -830,13 +830,13 @@ Array [ `; exports[`@idraw/board: src/lib/context Context.translate 1`] = ` -Array [ - Object { - "props": Object { - "path": Array [ - Object { - "props": Object {}, - "transform": Array [ +[ + { + "props": { + "path": [ + { + "props": {}, + "transform": [ 1, 0, 0, @@ -846,14 +846,14 @@ Array [ ], "type": "beginPath", }, - Object { - "props": Object { + { + "props": { "height": 400, "width": 200, "x": 20, "y": 40, }, - "transform": Array [ + "transform": [ 1, 0, 0, @@ -865,7 +865,7 @@ Array [ }, ], }, - "transform": Array [ + "transform": [ 1, 0, 0, diff --git a/packages/util/__tests__/lib/loader.test.ts b/packages/util/__tests__/lib/loader.test.ts index 4999571..631ecab 100644 --- a/packages/util/__tests__/lib/loader.test.ts +++ b/packages/util/__tests__/lib/loader.test.ts @@ -1,11 +1,8 @@ -import './../../../../__tests__/polyfill/image' -import { - loadHTML, loadImage, loadSVG -} from '../../src/lib/loader'; +import './../../../../__tests__/polyfill/image'; +import { loadHTML, loadImage, loadSVG } from '../../src/lib/loader'; import { parseHTMLToDataURL, parseSVGToDataURL } from './../../src/lib/parser'; describe('@idraw/util: lib/loader', () => { - test('loadHTML', async () => { const html = `