diff --git a/packages/board/__tests__/lib/__snapshots__/context.test.ts.snap b/packages/board/__tests__/lib/__snapshots__/context.test.ts.snap index 9e63f23..db74529 100644 --- a/packages/board/__tests__/lib/__snapshots__/context.test.ts.snap +++ b/packages/board/__tests__/lib/__snapshots__/context.test.ts.snap @@ -4,8 +4,8 @@ exports[`@idraw/board: src/lib/context Context 1`] = ` Array [ Object { "props": Object { - "height": 1600, - "width": 2400, + "height": 1800, + "width": 2000, "x": 0, "y": 0, }, @@ -21,8 +21,8 @@ Array [ }, Object { "props": Object { - "height": 1600, - "width": 2400, + "height": 1800, + "width": 2000, "x": 0, "y": 0, }, @@ -38,10 +38,10 @@ Array [ }, Object { "props": Object { - "height": 480, - "width": 800, - "x": 40, - "y": 40, + "height": 240, + "width": 400, + "x": 20, + "y": 20, }, "transform": Array [ 1, @@ -55,8 +55,25 @@ Array [ }, Object { "props": Object { - "height": 480, - "width": 800, + "height": 240, + "width": 400, + "x": 160, + "y": 160, + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "fillRect", + }, + Object { + "props": Object { + "height": 240, + "width": 400, "x": 320, "y": 320, }, @@ -72,27 +89,10 @@ Array [ }, Object { "props": Object { - "height": 480, - "width": 800, - "x": 640, - "y": 640, - }, - "transform": Array [ - 1, - 0, - 0, - 1, - 0, - 0, - ], - "type": "fillRect", - }, - Object { - "props": Object { - "height": 400, - "width": 800, - "x": 1560, - "y": 1160, + "height": 200, + "width": 400, + "x": 780, + "y": 580, }, "transform": Array [ 1, @@ -106,3 +106,160 @@ Array [ }, ] `; + +exports[`@idraw/board: src/lib/context Context.arc 1`] = ` +Array [ + Object { + "props": Object { + "fillRule": "nonzero", + "path": Array [ + Object { + "props": Object {}, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "beginPath", + }, + Object { + "props": Object { + "anticlockwise": true, + "endAngle": 6.283185307179586, + "radius": 100, + "startAngle": 0, + "x": 140, + "y": 160, + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "arc", + }, + ], + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "fill", + }, +] +`; + +exports[`@idraw/board: src/lib/context Context.fill 1`] = ` +Array [ + Object { + "props": Object { + "fillRule": "nonzero", + "path": Array [ + Object { + "props": Object {}, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "beginPath", + }, + ], + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "fill", + }, +] +`; + +exports[`@idraw/board: src/lib/context Context.fillRect 1`] = ` +Array [ + Object { + "props": Object { + "height": 1800, + "width": 2000, + "x": 0, + "y": 0, + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "fillRect", + }, +] +`; + +exports[`@idraw/board: src/lib/context Context.rect 1`] = ` +Array [ + Object { + "props": Object { + "fillRule": "nonzero", + "path": Array [ + Object { + "props": Object {}, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "beginPath", + }, + Object { + "props": Object { + "height": 400, + "width": 200, + "x": 20, + "y": 40, + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "rect", + }, + ], + }, + "transform": Array [ + 1, + 0, + 0, + 1, + 0, + 0, + ], + "type": "fill", + }, +] +`; diff --git a/packages/board/__tests__/lib/context.test.ts b/packages/board/__tests__/lib/context.test.ts index 4dc75bc..a9212df 100644 --- a/packages/board/__tests__/lib/context.test.ts +++ b/packages/board/__tests__/lib/context.test.ts @@ -1,15 +1,20 @@ import Context from './../../src/lib/context'; +import util from '@idraw/util' import { getData } from './../data'; +const { deepClone } = util.data; + describe('@idraw/board: src/lib/context', () => { + const options = { + width: 600, + height: 400, + contextWidth: 1000, + contextHeight: 900, + devicePixelRatio: 2 + } + test('Context', async () => { - const opts = { - width: 600, - height: 400, - contextWidth: 1000, - contextHeight: 900, - devicePixelRatio: 4 - } + const opts = deepClone(options); const canvas = document.createElement('canvas'); canvas.width = opts.contextWidth; canvas.height = opts.contextHeight; @@ -18,9 +23,9 @@ describe('@idraw/board: src/lib/context', () => { const ctx = new Context(ctx2d, opts); const data = getData(); - ctx.clearRect(0, 0, opts.width, opts.height); + ctx.clearRect(0, 0, opts.contextWidth, opts.contextHeight); ctx.setFillStyle('#ffffff'); - ctx.fillRect(0, 0, opts.width, opts.height); + ctx.fillRect(0, 0, opts.contextWidth, opts.contextHeight); data.elements.forEach(ele => { ctx.setFillStyle(ele.desc.color); ctx.fillRect(ele.x, ele.y, ele.w, ele.h); @@ -29,5 +34,167 @@ describe('@idraw/board: src/lib/context', () => { const calls = ctx2d.__getDrawCalls(); expect(calls).toMatchSnapshot(); }); + + test('Context.getSize', async () => { + const opts = deepClone(options); + const canvas = document.createElement('canvas'); + canvas.width = opts.contextWidth; + canvas.height = opts.contextHeight; + const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D; + const ctx = new Context(ctx2d, opts); + expect(ctx.getSize()).toStrictEqual(opts); + }) + + test('Context.resetSize', async () => { + const opts = deepClone(options); + const canvas = document.createElement('canvas'); + canvas.width = opts.contextWidth; + canvas.height = opts.contextHeight; + const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D; + const newOpts = { + width: 601, + height: 401, + contextWidth: 1001, + contextHeight: 901, + devicePixelRatio: 3, + } + const ctx = new Context(ctx2d, opts); + ctx.resetSize(newOpts); + expect(ctx.getSize()).toStrictEqual(newOpts); + }); + + test('Context.calcDeviceNum', async () => { + const opts = deepClone(options); + const canvas = document.createElement('canvas'); + canvas.width = opts.contextWidth; + canvas.height = opts.contextHeight; + const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D; + const ctx = new Context(ctx2d, opts); + const num = 100; + expect(ctx.calcDeviceNum(num)).toStrictEqual(opts.devicePixelRatio * num); + }); + + test('Context.calcScreenNum', async () => { + const opts = deepClone(options); + const canvas = document.createElement('canvas'); + canvas.width = opts.contextWidth; + canvas.height = opts.contextHeight; + const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D; + const ctx = new Context(ctx2d, opts); + const num = 100; + expect(ctx.calcScreenNum(num)).toStrictEqual(num / opts.devicePixelRatio); + }); + + test('Context.setTransform', async () => { + const opts = deepClone(options); + const canvas = document.createElement('canvas'); + canvas.width = opts.contextWidth; + canvas.height = opts.contextHeight; + const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D; + const ctx = new Context(ctx2d, opts); + const transform = { + scale: 2, + scrollX: 100, + scrollY: -200, + }; + ctx.setTransform(deepClone(transform)) + expect(ctx.getTransform()).toStrictEqual(deepClone(transform)); + }); + + test('Context.getTransform', async () => { + const opts = deepClone(options); + const canvas = document.createElement('canvas'); + canvas.width = opts.contextWidth; + canvas.height = opts.contextHeight; + const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D; + const ctx = new Context(ctx2d, opts); + expect(ctx.getTransform()).toStrictEqual({ + scale: 1, + scrollX: 0, + scrollY: 0, + }); + }); + + + test('Context.setFillStyle', async () => { + const opts = deepClone(options); + const canvas = document.createElement('canvas'); + canvas.width = opts.contextWidth; + canvas.height = opts.contextHeight; + const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D; + const ctx = new Context(ctx2d, opts); + const color = '#f0f0f0'; + ctx.setFillStyle(color); + ctx.fillRect(0, 0, opts.contextWidth, opts.contextHeight); + expect(ctx2d.fillStyle).toStrictEqual(color); + }); + + + test('Context.fill', async () => { + const opts = deepClone(options); + const canvas = document.createElement('canvas'); + canvas.width = opts.contextWidth; + canvas.height = opts.contextHeight; + const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D; + const ctx = new Context(ctx2d, opts); + ctx.fill(); + // @ts-ignore + const calls = ctx2d.__getDrawCalls(); + expect(calls).toMatchSnapshot(); + }) + + test('Context.arc', async () => { + const opts = deepClone(options); + const canvas = document.createElement('canvas'); + canvas.width = opts.contextWidth; + canvas.height = opts.contextHeight; + const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D; + const ctx = new Context(ctx2d, opts); + ctx.arc(70, 80, 50, 0, Math.PI * 2, true); + ctx.fill(); + // @ts-ignore + const calls = ctx2d.__getDrawCalls(); + // console.log('calls =', JSON.stringify(calls, null, 2)); + expect(calls).toMatchSnapshot(); + }) + + + test('Context.rect', async () => { + const opts = deepClone(options); + const canvas = document.createElement('canvas'); + canvas.width = opts.contextWidth; + canvas.height = opts.contextHeight; + const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D; + const ctx = new Context(ctx2d, opts); + ctx.rect(10, 20, 100, 200); + ctx.fill(); + // @ts-ignore + const calls = ctx2d.__getDrawCalls(); + // console.log('calls =', JSON.stringify(calls, null, 2)); + expect(calls).toMatchSnapshot(); + }) + + + test('Context.fillRect', async () => { + const opts = deepClone(options); + const canvas = document.createElement('canvas'); + canvas.width = opts.contextWidth; + canvas.height = opts.contextHeight; + const ctx2d: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D; + const ctx = new Context(ctx2d, opts); + ctx.fillRect(0, 0, opts.contextWidth, opts.contextHeight); + // @ts-ignore + const calls = ctx2d.__getDrawCalls(); + // console.log('calls =', JSON.stringify(calls, null, 2)); + expect(calls).toMatchSnapshot(); + // expect(calls).toStrictEqual([ + // { + // type: 'fillRect', + // transform: [ 1, 0, 0, 1, 0, 0 ], + // props: { x: 0, y: 0, width: 2000, height: 1800 } + // } + // ]); + }) + })