diff --git a/src/types.ts b/src/types.ts index f9d8af1f..95cccb23 100644 --- a/src/types.ts +++ b/src/types.ts @@ -49,7 +49,7 @@ export interface IFrame { frameRate: number; } -export type AnimationFn = (frame?: IFrame) => boolean | void; +export type AnimationFn = (frame: IFrame) => boolean | void; export enum KonvaNodeEvent { mouseover = 'mouseover', diff --git a/test/manual/Manual-test.ts b/test/manual/Manual-test.ts index 62661ccb..3ee209ed 100644 --- a/test/manual/Manual-test.ts +++ b/test/manual/Manual-test.ts @@ -352,7 +352,7 @@ describe('Manual', function () { document.body.style.cursor = 'default'; }); - Konva.pixelRatio = undefined; + Konva.pixelRatio = 1; done(); }; imageObj.src = 'assets/lion.png'; diff --git a/test/unit/Arc-test.ts b/test/unit/Arc-test.ts index 7a5e79a0..87fb8b4e 100644 --- a/test/unit/Arc-test.ts +++ b/test/unit/Arc-test.ts @@ -3,7 +3,7 @@ import { assert } from 'chai'; import { addStage, Konva, - createCanvas, + createCanvasAndContext, compareLayerAndCanvas, assertAlmostDeepEqual, } from './test-utils.ts'; @@ -189,8 +189,7 @@ describe('Arc', function () { layer.add(arc); stage.add(layer); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); context.beginPath(); context.arc(100, 100, 80, 0, Math.PI / 2, false); context.arc(100, 100, 50, Math.PI / 2, 0, true); diff --git a/test/unit/Blob-test.ts b/test/unit/Blob-test.ts index a79af6ca..209d130c 100644 --- a/test/unit/Blob-test.ts +++ b/test/unit/Blob-test.ts @@ -57,7 +57,7 @@ describe('Blob', function () { layer.add(blob); stage.add(layer); - assert.equal(stage.findOne('Line').points().length, 8); + assert.equal(stage.findOne('Line')?.points().length, 8); }); // ====================================================== diff --git a/test/unit/Circle-test.ts b/test/unit/Circle-test.ts index f7af384a..92b00557 100644 --- a/test/unit/Circle-test.ts +++ b/test/unit/Circle-test.ts @@ -3,7 +3,7 @@ import { assert } from 'chai'; import { addStage, Konva, - createCanvas, + createCanvasAndContext, compareLayerAndCanvas, loadImage, } from './test-utils.ts'; @@ -159,8 +159,7 @@ describe('Circle', function () { layer.add(group); stage.add(layer); - var canvas = createCanvas(); - var ctx = canvas.getContext('2d'); + const { canvas, context: ctx } = createCanvasAndContext(); var start = { x: -35, y: -35 }; var end = { x: 35, y: 35 }; @@ -306,8 +305,7 @@ describe('Circle', function () { layer.add(circle); stage.add(layer); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); context.beginPath(); context.arc(100, 100, 50, 0, Math.PI * 2, false); context.closePath(); diff --git a/test/unit/DragAndDropEvents-test.ts b/test/unit/DragAndDropEvents-test.ts index 2ddc882e..3395a6a3 100644 --- a/test/unit/DragAndDropEvents-test.ts +++ b/test/unit/DragAndDropEvents-test.ts @@ -47,7 +47,7 @@ describe('DragAndDropEvents', function () { var dragStart = false; var dragMove = false; var dragEnd = false; - var events = []; + var events: string[] = []; circle.on('dragstart', function () { dragStart = true; diff --git a/test/unit/Ellipse-test.ts b/test/unit/Ellipse-test.ts index 8148c6dc..3dc4d5e1 100644 --- a/test/unit/Ellipse-test.ts +++ b/test/unit/Ellipse-test.ts @@ -3,7 +3,7 @@ import { assert } from 'chai'; import { addStage, Konva, - createCanvas, + createCanvasAndContext, compareLayerAndCanvas, } from './test-utils.ts'; @@ -99,8 +99,7 @@ describe('Ellipse', function () { layer.add(ellipse); stage.add(layer); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); context.save(); context.beginPath(); context.scale(1, 0.5); diff --git a/test/unit/Group-test.ts b/test/unit/Group-test.ts index 18455f6f..11e2b02e 100644 --- a/test/unit/Group-test.ts +++ b/test/unit/Group-test.ts @@ -38,7 +38,7 @@ describe('Group', function () { y: -15, width: 150, height: 150, - }) + })! .offsetX(5) .offsetY(5); diff --git a/test/unit/Image-test.ts b/test/unit/Image-test.ts index f2c7adcc..c90b759a 100644 --- a/test/unit/Image-test.ts +++ b/test/unit/Image-test.ts @@ -3,11 +3,11 @@ import { assert } from 'chai'; import { addStage, Konva, - createCanvas, compareLayerAndCanvas, loadImage, isNode, isBrowser, + createCanvasAndContext, } from './test-utils.ts'; describe('Image', function () { @@ -305,8 +305,7 @@ describe('Image', function () { height: 100, }); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); context.drawImage(imageObj, 200, 60, 100, 100); compareLayerAndCanvas(layer, canvas, 10); done(); @@ -341,9 +340,13 @@ describe('Image', function () { var layer = new Konva.Layer(); stage.add(layer); var src = 'non-existent.jpg'; - Konva.Image.fromURL(src, null, function (e) { - done(); - }); + Konva.Image.fromURL( + src, + () => {}, + function (e) { + done(); + } + ); }); it('check zero values', function (done) { diff --git a/test/unit/Layer-test.ts b/test/unit/Layer-test.ts index 5dfb9bba..325da03e 100644 --- a/test/unit/Layer-test.ts +++ b/test/unit/Layer-test.ts @@ -225,12 +225,12 @@ describe('Layer', function () { stage.add(layer); assert.equal( - layer.getIntersection({ x: 300, y: 100 }).id(), + layer.getIntersection({ x: 300, y: 100 })?.id(), 'greenCircle', 'shape should be greenCircle' ); assert.equal( - layer.getIntersection({ x: 380, y: 100 }).id(), + layer.getIntersection({ x: 380, y: 100 })?.id(), 'redCircle', 'shape should be redCircle' ); diff --git a/test/unit/Line-test.ts b/test/unit/Line-test.ts index 2dea75b6..76aea9ce 100644 --- a/test/unit/Line-test.ts +++ b/test/unit/Line-test.ts @@ -3,7 +3,7 @@ import { assert } from 'chai'; import { addStage, Konva, - createCanvas, + createCanvasAndContext, compareLayerAndCanvas, compareLayers, } from './test-utils.ts'; @@ -147,8 +147,7 @@ describe('Line', function () { layer.add(line); stage.add(layer); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); context.save(); context.lineJoin = 'round'; diff --git a/test/unit/MouseEvents-test.ts b/test/unit/MouseEvents-test.ts index 620821b7..5ad98aab 100644 --- a/test/unit/MouseEvents-test.ts +++ b/test/unit/MouseEvents-test.ts @@ -1550,7 +1550,7 @@ describe('MouseEvents', function () { stage.add(layer); // events array - var e = []; + var e: string[] = []; circle.on('click', function () { e.push('circle'); diff --git a/test/unit/Node-cache-test.ts b/test/unit/Node-cache-test.ts index 1eeeb33c..6e6a7a7c 100644 --- a/test/unit/Node-cache-test.ts +++ b/test/unit/Node-cache-test.ts @@ -5,7 +5,7 @@ import { compareLayerAndCanvas, cloneAndCompareLayer, compareCanvases, - createCanvas, + createCanvasAndContext, loadImage, getPixelRatio, } from './test-utils.ts'; @@ -29,8 +29,7 @@ describe('Caching', function () { layer.add(rect); stage.add(layer); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); context.beginPath(); context.rect(100, 50, 100, 50); context.closePath(); @@ -60,8 +59,7 @@ describe('Caching', function () { layer.add(rect); stage.add(layer); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); context.translate(100, 50); context.rotate(Math.PI / 4); context.beginPath(); @@ -93,8 +91,7 @@ describe('Caching', function () { layer.add(rect); stage.add(layer); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); context.beginPath(); context.rect(100, 50, 100, 50); context.closePath(); @@ -125,8 +122,7 @@ describe('Caching', function () { layer.add(rect); stage.add(layer); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); context.globalAlpha = 0.3; context.beginPath(); context.rect(100, 50, 100, 50); @@ -209,8 +205,7 @@ describe('Caching', function () { layer.add(rect); stage.add(layer); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); context.beginPath(); context.rect(100, 50, 100, 50); context.closePath(); @@ -244,8 +239,7 @@ describe('Caching', function () { layer.add(rect); stage.add(layer); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); context.translate(100, 50); context.beginPath(); @@ -281,8 +275,7 @@ describe('Caching', function () { layer.add(rect); stage.add(layer); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); context.translate(100, 50); context.beginPath(); @@ -346,8 +339,7 @@ describe('Caching', function () { layer.add(rect); stage.add(layer); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); context.translate(50, 25); context.beginPath(); @@ -384,8 +376,7 @@ describe('Caching', function () { layer.add(group); stage.add(layer); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); context.beginPath(); context.rect(100, 50, 100, 50); context.closePath(); @@ -461,8 +452,7 @@ describe('Caching', function () { layer.add(group); stage.add(layer); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); // draw rect context.save(); @@ -574,8 +564,7 @@ describe('Caching', function () { layer.add(group); stage.add(layer); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); // draw rect context.save(); @@ -630,8 +619,7 @@ describe('Caching', function () { assert.equal(circle._getCanvasCache(), undefined); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); // circle context.save(); context.beginPath(); @@ -858,8 +846,7 @@ describe('Caching', function () { group.cache(); layer.draw(); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); context.globalAlpha = 0.5; context.beginPath(); context.rect(100, 50, 100, 50); @@ -891,8 +878,7 @@ describe('Caching', function () { layer.visible(true); layer.draw(); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); context.beginPath(); context.rect(100, 50, 100, 100); context.closePath(); @@ -960,8 +946,7 @@ describe('Caching', function () { layer.listening(true); layer.draw(); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); context.beginPath(); context.rect(100, 50, 100, 100); context.closePath(); @@ -999,8 +984,7 @@ describe('Caching', function () { layer.visible(true); layer.draw(); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); context.globalAlpha = 0.5; context.beginPath(); context.rect(100, 50, 100, 100); @@ -1535,8 +1519,7 @@ describe('Caching', function () { assert.equal(hitCanvas._canvas.height, rect.height() * 0.2); assert.equal(hitCanvas.pixelRatio, 0.2); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); context.beginPath(); context.rect(100, 50, 100, 100); context.closePath(); diff --git a/test/unit/Node-test.ts b/test/unit/Node-test.ts index 53f6a633..a45fea4e 100644 --- a/test/unit/Node-test.ts +++ b/test/unit/Node-test.ts @@ -637,7 +637,7 @@ describe('Node', function () { id: 'myRect', }); - var clicks = []; + var clicks: string[] = []; rect.on('click', function () { clicks.push(this.name()); @@ -719,8 +719,8 @@ describe('Node', function () { group.add(rect); group.add(text); - var clicks = []; - var taps = []; + var clicks: string[] = []; + var taps: string[] = []; group.on('click', function () { clicks.push(this.name()); @@ -1883,7 +1883,7 @@ describe('Node', function () { layer.add(circle); layer.draw(); - var clicks = []; + var clicks: string[] = []; circle.on('click', function () { clicks.push('circle'); @@ -2057,7 +2057,7 @@ describe('Node', function () { layer.add(circle); layer.draw(); - var clicks = []; + var clicks: string[] = []; circle.on('click', function () { clicks.push('circle'); @@ -2091,7 +2091,7 @@ describe('Node', function () { layer.add(circle); layer.draw(); - var clicks = []; + var clicks: string[] = []; circle.on('click', function (e) { e.cancelBubble = true; @@ -3318,7 +3318,7 @@ describe('Node', function () { width: 148, height: 148, }) - .offset({ + ?.offset({ x: 74, y: 74, }); @@ -3834,7 +3834,7 @@ describe('Node', function () { y: 100, }); - assert.equal(circle.getRelativePointerPosition().x, -50); - assert.equal(circle.getRelativePointerPosition().y, 0); + assert.equal(circle.getRelativePointerPosition()?.x, -50); + assert.equal(circle.getRelativePointerPosition()?.y, 0); }); }); diff --git a/test/unit/Path-test.ts b/test/unit/Path-test.ts index 513627b7..dbeb19eb 100644 --- a/test/unit/Path-test.ts +++ b/test/unit/Path-test.ts @@ -6,7 +6,7 @@ import tiger from '../assets/tiger.ts'; import { addStage, Konva, - createCanvas, + createCanvasAndContext, compareLayerAndCanvas, cloneAndCompareLayer, isNode, @@ -196,8 +196,7 @@ describe('Path', function () { assert.equal(path.dataArray[1].command, 'L'); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); // stroke context.beginPath(); context.moveTo(200, 100); @@ -1099,7 +1098,7 @@ describe('Path', function () { ) as SVGPathElement; SVGPath.setAttribute('d', data); for (var i = 0; i < path.getLength(); i += 1) { - var p = path.getPointAtLength(i); + var p = path.getPointAtLength(i)!; var circle = new Konva.Circle({ x: p.x, y: p.y, @@ -1119,9 +1118,9 @@ describe('Path', function () { ); } } else { - var points = []; + var points: { x: number; y: number }[] = []; for (var i = 0; i < path.getLength(); i += 20) { - var p = path.getPointAtLength(i); + var p = path.getPointAtLength(i)!; points.push(p); var circle = new Konva.Circle({ x: p.x, @@ -1185,7 +1184,7 @@ describe('Path', function () { ) as SVGPathElement; SVGPath.setAttribute('d', data); for (var i = 0.001; i < path.getLength(); i += 1) { - var p = path.getPointAtLength(i); + var p = path.getPointAtLength(i)!; var circle = new Konva.Circle({ x: p.x + path.x(), y: p.y + path.y(), @@ -1222,7 +1221,7 @@ describe('Path', function () { ) as SVGPathElement; SVGPath.setAttribute('d', data); for (var i = 0; i < path.getLength(); i += 1) { - var p = path.getPointAtLength(i); + var p = path.getPointAtLength(i)!; var circle = new Konva.Circle({ x: p.x, y: p.y, @@ -1262,7 +1261,7 @@ describe('Path', function () { ) as SVGPathElement; SVGPath.setAttribute('d', data); for (var i = 0; i < path.getLength(); i += 10) { - var p = path.getPointAtLength(i); + var p = path.getPointAtLength(i)!; var circle = new Konva.Circle({ x: p.x, y: p.y, @@ -1282,9 +1281,9 @@ describe('Path', function () { ); } } else { - var points = []; + var points: { x: number; y: number }[] = []; for (var i = 0; i < path.getLength(); i += 500) { - var p = path.getPointAtLength(i); + var p = path.getPointAtLength(i)!; points.push(p); var circle = new Konva.Circle({ x: p.x, diff --git a/test/unit/PointerEvents-test.ts b/test/unit/PointerEvents-test.ts index e54b2f0a..3d9cb4d4 100644 --- a/test/unit/PointerEvents-test.ts +++ b/test/unit/PointerEvents-test.ts @@ -163,7 +163,6 @@ describe.skip('PointerEvents', function () { x: 289, y: 10, pointerId: 0, - preventDefault: function () {}, }); assert.equal(otherDownCount, 1, '6) otherDownCount should be 1'); @@ -176,7 +175,6 @@ describe.skip('PointerEvents', function () { x: 289, y: 100, pointerId: 1, - preventDefault: function () {}, }); assert.equal(otherDownCount, 1, '7) otherDownCount should be 1'); @@ -189,7 +187,6 @@ describe.skip('PointerEvents', function () { x: 289, y: 10, pointerId: 2, - preventDefault: function () {}, }); assert.equal(otherDownCount, 1, '8) otherDownCount should be 1'); @@ -209,15 +206,15 @@ describe.skip('PointerEvents', function () { assert(pointermove, '9) pointermove should be true'); simulatePointerUp(stage, { + x: 290, + y: 10, pointerId: 1, - preventDefault: function () {}, }); simulatePointerDown(stage, { x: 289, y: 10, pointerId: 1, - preventDefault: function () {}, }); assert(otherDownCount === 2, '10) otherDownCount should be 1'); diff --git a/test/unit/Rect-test.ts b/test/unit/Rect-test.ts index 02e7f472..9efcd563 100644 --- a/test/unit/Rect-test.ts +++ b/test/unit/Rect-test.ts @@ -3,7 +3,7 @@ import { assert } from 'chai'; import { addStage, Konva, - createCanvas, + createCanvasAndContext, compareLayerAndCanvas, } from './test-utils.ts'; @@ -120,8 +120,7 @@ describe('Rect', function () { layer.add(rect); stage.add(layer); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); context.beginPath(); context.rect(200, 100, 100, 50); context.fillStyle = 'blue'; @@ -149,8 +148,7 @@ describe('Rect', function () { layer.add(rect); stage.add(layer); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); context.beginPath(); context.rect(200, 100, 100, 50); context.lineWidth = 4; @@ -175,8 +173,7 @@ describe('Rect', function () { layer.add(rect); stage.add(layer); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); context.beginPath(); context.rect(200, 100, 100, 50); context.lineWidth = 2; @@ -202,8 +199,7 @@ describe('Rect', function () { stage.add(layer); // as corner radius is much bigger we should have circe in the result - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); context.beginPath(); context.arc(100, 100, 50, 0, Math.PI * 2); context.fillStyle = 'black'; diff --git a/test/unit/RegularPolygon-test.ts b/test/unit/RegularPolygon-test.ts index 17190077..f26010a1 100644 --- a/test/unit/RegularPolygon-test.ts +++ b/test/unit/RegularPolygon-test.ts @@ -5,7 +5,7 @@ import { Konva, cloneAndCompareLayer, assertAlmostEqual, - createCanvas, + createCanvasAndContext, compareLayerAndCanvas, } from './test-utils.ts'; @@ -230,8 +230,7 @@ describe('RegularPolygon', function () { stage.add(layer); // corner radius creates perfect circle at 1/2 radius - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); context.beginPath(); context.arc(100, 100, resultCircleRadius, 0, Math.PI * 2); context.fillStyle = 'black'; diff --git a/test/unit/Shape-test.ts b/test/unit/Shape-test.ts index 94a2719c..a68acd47 100644 --- a/test/unit/Shape-test.ts +++ b/test/unit/Shape-test.ts @@ -5,7 +5,7 @@ import { simulateMouseDown, simulateMouseMove, simulateMouseUp, - createCanvas, + createCanvasAndContext, isBrowser, isNode, compareLayerAndCanvas, @@ -500,8 +500,7 @@ describe('Shape', function () { assert.equal(rect.x(), 100); assert.equal(rect.y(), 50); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); context.globalAlpha = 0.5; // rect context.beginPath(); @@ -572,8 +571,7 @@ describe('Shape', function () { layer.add(rect); stage.add(layer); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); context.beginPath(); context.rect(100, 50, 100, 50); context.closePath(); @@ -617,8 +615,7 @@ describe('Shape', function () { assert.equal(rect.x(), 100); assert.equal(rect.y(), 50); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); context.globalAlpha = 0.5; // rect context.beginPath(); @@ -665,8 +662,7 @@ describe('Shape', function () { stage.add(layer); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); context.globalAlpha = 0.5; // stroke context.beginPath(); @@ -711,8 +707,7 @@ describe('Shape', function () { layer.add(rect); stage.add(layer); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); context.beginPath(); context.rect(100, 50, 100, 50); context.closePath(); @@ -722,8 +717,7 @@ describe('Shape', function () { context.fill(); context.stroke(); - var c2 = createCanvas(); - var ctx2 = c2.getContext('2d'); + const { canvas: c2, context: ctx2 } = createCanvasAndContext(); ctx2.shadowColor = 'grey'; ctx2.shadowBlur = 10 * Konva.pixelRatio; ctx2.shadowOffsetX = 20 * Konva.pixelRatio; @@ -774,8 +768,7 @@ describe('Shape', function () { layer.add(rect); stage.add(layer); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); context.globalAlpha = 0.3; // draw shadow @@ -854,8 +847,7 @@ describe('Shape', function () { layer.add(text); stage.add(layer); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); context.save(); context.shadowColor = 'black'; @@ -1257,8 +1249,7 @@ describe('Shape', function () { layer.add(rect); stage.add(layer); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); // rect context.beginPath(); context.rect(100, 100, 50, 50); @@ -1303,8 +1294,7 @@ describe('Shape', function () { layer.add(rect); stage.add(layer); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); // rect context.beginPath(); context.rect(50, 100, 50, 50); @@ -1352,8 +1342,7 @@ describe('Shape', function () { layer.add(group); stage.add(layer); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); // rect context.beginPath(); context.rect(100, 100, 50, 50); @@ -1397,8 +1386,7 @@ describe('Shape', function () { stage.add(layer); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); context.globalAlpha = 0.5; // stroke context.beginPath(); @@ -1441,8 +1429,7 @@ describe('Shape', function () { stage.add(layer); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); // stroke context.beginPath(); @@ -1455,8 +1442,7 @@ describe('Shape', function () { context.fill(); context.stroke(); - var canvas2 = createCanvas(); - var context2 = canvas2.getContext('2d'); + const { canvas: canvas2, context: context2 } = createCanvasAndContext(); context2.globalAlpha = 0.5; context2.drawImage(canvas, 0, 0, canvas.width / 2, canvas.height / 2); @@ -1652,8 +1638,7 @@ describe('Shape', function () { layer.add(rect); stage.add(layer); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); context.beginPath(); context.rect(100, 50, 100, 50); context.closePath(); @@ -1980,9 +1965,9 @@ describe('Shape', function () { var oldCreate = ctx.createPattern; var callCount = 0; - ctx.createPattern = function () { + ctx.createPattern = function (...args) { callCount += 1; - return oldCreate.apply(this, arguments); + return oldCreate.apply(this, args); }; layer.draw(); @@ -2078,9 +2063,9 @@ describe('Shape', function () { var oldCreate = ctx.createLinearGradient; var callCount = 0; - ctx.createLinearGradient = function () { + ctx.createLinearGradient = function (...args) { callCount += 1; - return oldCreate.apply(this, arguments); + return oldCreate.apply(this, args); }; layer.draw(); @@ -2176,9 +2161,9 @@ describe('Shape', function () { var oldCreate = ctx.createRadialGradient; var callCount = 0; - ctx.createRadialGradient = function () { + ctx.createRadialGradient = function (...args) { callCount += 1; - return oldCreate.apply(this, arguments); + return oldCreate.apply(this, args); }; layer.draw(); @@ -2349,8 +2334,7 @@ describe('Shape', function () { var layer = new Konva.Layer(); stage.add(layer); - var canvas = createCanvas(); - var ctx = canvas.getContext('2d'); + const { canvas, context: ctx } = createCanvasAndContext(); var gradient = ctx.createLinearGradient(0, 75, 100, 75); gradient.addColorStop(0.0, 'rgba(255,255,255,1)'); @@ -2440,8 +2424,7 @@ describe('Shape', function () { stage.add(layer); // Create expected result using native canvas with buffer approach - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); // Draw on buffer first context.beginPath(); @@ -2459,8 +2442,8 @@ describe('Shape', function () { context.stroke(); // Apply opacity by drawing to final canvas - var finalCanvas = createCanvas(); - var finalContext = finalCanvas.getContext('2d'); + const { canvas: finalCanvas, context: finalContext } = + createCanvasAndContext(); finalContext.globalAlpha = 0.7; finalContext.drawImage(canvas, 0, 0); diff --git a/test/unit/Stage-test.ts b/test/unit/Stage-test.ts index f890d90c..9d47fda3 100644 --- a/test/unit/Stage-test.ts +++ b/test/unit/Stage-test.ts @@ -10,12 +10,12 @@ import { simulateTouchEnd, simulatePointerMove, compareCanvases, - createCanvas, showHit, getContainer, isNode, isBrowser, Konva, + createCanvasAndContext, } from './test-utils.ts'; describe('Stage', function () { @@ -210,7 +210,7 @@ describe('Stage', function () { } var stage = addStage(); var container = document.createElement('div'); - var wrap = stage.container().parentNode; + var wrap = stage.container().parentNode!; wrap.appendChild(container); stage.container(container); @@ -240,7 +240,7 @@ describe('Stage', function () { layer.draw(); var container = document.createElement('div'); - var wrap = stage.container().parentNode; + var wrap = stage.container().parentNode!; wrap.appendChild(container); var clone = stage.clone(); @@ -257,7 +257,7 @@ describe('Stage', function () { } var stage = addStage(); var container = stage.container(); - var parent = stage.content.parentElement; + var parent = stage.content.parentElement!; parent.removeChild(stage.content); @@ -334,7 +334,7 @@ describe('Stage', function () { }); stage.on('contentMousemove', function () { - var pos = stage.getPointerPosition(); + var pos = stage.getPointerPosition()!; var shape = stage.getIntersection(pos); if (!shape) { //console.log(pos); @@ -1367,10 +1367,9 @@ describe('Stage', function () { height: stage.height() + 20, }); - var canvas = createCanvas(); + const { canvas, context } = createCanvasAndContext(); canvas.width = radius * 2; canvas.height = radius * 2; - var context = canvas.getContext('2d'); context.beginPath(); context.arc(radius, radius, radius, 0, 2 * Math.PI); context.fillStyle = 'black'; diff --git a/test/unit/Text-test.ts b/test/unit/Text-test.ts index 4a8103c5..48db165b 100644 --- a/test/unit/Text-test.ts +++ b/test/unit/Text-test.ts @@ -3,7 +3,7 @@ import { assert } from 'chai'; import { addStage, Konva, - createCanvas, + createCanvasAndContext, compareLayerAndCanvas, compareLayers, loadImage, @@ -18,7 +18,7 @@ export function getOffsetY( ) { const metrics = context.measureText('M') as any; fontSize = - fontSize || parseInt(context.font.split('px')[0].split(' ').pop(), 10); + fontSize || parseInt(context.font.split('px')[0].split(' ').pop()!, 10); lineHeight = lineHeight || 1; // Use the same fallbacks as Text.measureSize() for missing advanced metrics @@ -166,8 +166,7 @@ describe('Text', function () { layer.add(text); stage.add(layer); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); context.textBaseline = 'alphabetic'; context.font = 'normal normal 50px Arial'; context.fillStyle = 'darkgrey'; @@ -193,8 +192,7 @@ describe('Text', function () { layer.add(text); stage.add(layer); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); context.textBaseline = 'alphabetic'; context.font = 'normal normal 50px Arial'; @@ -224,8 +222,7 @@ describe('Text', function () { layer.add(text); stage.add(layer); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); context.textBaseline = 'alphabetic'; context.font = 'normal normal 20px Arial'; context.fillStyle = 'black'; @@ -254,8 +251,7 @@ describe('Text', function () { layer.add(text); stage.add(layer); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); context.textBaseline = 'middle'; context.letterSpacing = '10px'; context.font = 'normal normal 50px Arial'; @@ -1010,8 +1006,7 @@ describe('Text', function () { layer.add(text); stage.add(layer); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); context.translate(0, 80); context.lineWidth = 2; context.font = '80px Arial'; @@ -1395,8 +1390,7 @@ describe('Text', function () { layer.add(text); stage.add(layer); - var canvas = createCanvas(); - var context = canvas.getContext('2d'); + const { canvas, context } = createCanvasAndContext(); context.translate(50, 50); context.lineWidth = 2; context.font = '50px Arial'; @@ -1450,8 +1444,7 @@ describe('Text', function () { layer.add(text); stage.add(layer); - var canvas = createCanvas(); - var ctx = canvas.getContext('2d'); + const { canvas, context: ctx } = createCanvasAndContext(); ctx.fillStyle = 'green'; ctx.font = 'normal 50px Arial'; @@ -1490,8 +1483,7 @@ describe('Text', function () { layer.add(text); stage.add(layer); - var canvas = createCanvas(); - var ctx = canvas.getContext('2d'); + const { canvas, context: ctx } = createCanvasAndContext(); ctx.fillStyle = 'green'; ctx.font = 'normal 50px Arial'; @@ -1541,8 +1533,7 @@ describe('Text', function () { layer.add(text); stage.add(layer); - var canvas = createCanvas(); - var ctx = canvas.getContext('2d'); + const { canvas, context: ctx } = createCanvasAndContext(); ctx.fillStyle = 'green'; ctx.font = 'normal 50px Arial'; @@ -1669,14 +1660,13 @@ describe('Text', function () { layer.add(text); stage.add(layer); - var canvas = createCanvas(); - var ctx = canvas.getContext('2d'); + const { canvas, context: ctx } = createCanvasAndContext(); ctx.fillStyle = 'green'; ctx.font = 'normal normal 30px Arial'; ctx.textBaseline = 'alphabetic'; - var grd = ctx.createPattern(imageObj, 'repeat'); + var grd = ctx.createPattern(imageObj, 'repeat')!; ctx.fillStyle = grd; ctx.fillText(text.text(), 0, getOffsetY(ctx)); @@ -1704,14 +1694,13 @@ describe('Text', function () { layer.add(text); stage.add(layer); - var canvas = createCanvas(); - var ctx = canvas.getContext('2d'); + const { canvas, context: ctx } = createCanvasAndContext(); ctx.fillStyle = 'green'; ctx.font = 'normal normal 30px Arial'; ctx.textBaseline = 'alphabetic'; - var grd = ctx.createPattern(imageObj, 'repeat'); + var grd = ctx.createPattern(imageObj, 'repeat')!; const matrix = new (global as any).DOMMatrix([1, 0, 0, 1, -50, 0]); grd.setTransform(matrix); @@ -1742,14 +1731,13 @@ describe('Text', function () { layer.add(text); stage.add(layer); - var canvas = createCanvas(); - var ctx = canvas.getContext('2d'); + const { canvas, context: ctx } = createCanvasAndContext(); ctx.fillStyle = 'green'; ctx.font = 'normal normal 30px Arial'; ctx.textBaseline = 'alphabetic'; - var grd = ctx.createPattern(imageObj, 'repeat'); + var grd = ctx.createPattern(imageObj, 'repeat')!; const matrix = new (global as any).DOMMatrix([0.5, 0, 0, 0.5, 0, 0]); grd.setTransform(matrix); diff --git a/test/unit/TouchEvents-test.ts b/test/unit/TouchEvents-test.ts index d32537dd..2f4b2490 100644 --- a/test/unit/TouchEvents-test.ts +++ b/test/unit/TouchEvents-test.ts @@ -826,8 +826,8 @@ describe('TouchEvents', function () { stage.on('tap', function (e) { assert.equal(e.target, circle1); - assert.equal(stage.getPointerPosition().x, 100); - assert.equal(stage.getPointerPosition().y, 100); + assert.equal(stage.getPointerPosition()?.x, 100); + assert.equal(stage.getPointerPosition()?.y, 100); tap += 1; }); diff --git a/test/unit/Transformer-test.ts b/test/unit/Transformer-test.ts index 3e3847c3..c7b06b67 100644 --- a/test/unit/Transformer-test.ts +++ b/test/unit/Transformer-test.ts @@ -1,6 +1,7 @@ import { assert } from 'chai'; import { Transformer } from '../../src/shapes/Transformer.ts'; import type { Rect } from '../../src/shapes/Rect.ts'; +import type { Shape } from '../../src/Shape.ts'; import { addStage, @@ -12,13 +13,25 @@ import { assertAlmostEqual, } from './test-utils.ts'; -function simulateMouseDown(tr, pos) { - sd(tr.getStage(), pos); +function simulateMouseDown( + tr: Transformer, + pos: { x: number; y: number; button?: number } +) { + sd(tr.getStage()!, pos); } -function simulateMouseMove(tr, pos) { - const stage = tr.getStage(); - var top = (stage.content && stage.content.getBoundingClientRect().top) || 0; +function simulateMouseMove( + tr: Transformer, + pos: { + target?: Shape | null; + x: number; + y: number; + button?: number; + altKey?: boolean; + } +) { + const stage = tr.getStage()!; + const top = stage?.content?.getBoundingClientRect().top ?? 0; tr._handleMouseMove({ ...pos, clientX: pos.x, @@ -28,13 +41,13 @@ function simulateMouseMove(tr, pos) { } function simulateMouseUp(tr: Transformer, pos = { x: 0, y: 0 }) { - const stage = tr.getStage(); - var top = (stage.content && stage.content.getBoundingClientRect().top) || 0; + const stage = tr.getStage()!; + const top = stage.content?.getBoundingClientRect().top ?? 0; tr._handleMouseUp({ clientX: pos.x, clientY: pos.y + top, }); - su(tr.getStage(), pos || { x: 1, y: 1 }); + su(stage, pos || { x: 1, y: 1 }); } describe('Transformer', function () { @@ -68,7 +81,7 @@ describe('Transformer', function () { assert.equal(tr.height(), rect.height()); // manual check of correct position of node - var handler = tr.findOne('.bottom-right'); + var handler = tr.findOne('.bottom-right')!; var pos = handler.getAbsolutePosition(); assert.equal(pos.x, rect.x() + rect.width()); assert.equal(pos.y, rect.y() + rect.height()); @@ -431,7 +444,7 @@ describe('Transformer', function () { assert.equal(tr.x(), 100, 'second x'); assert.equal(tr.width(), 200); // check visual - var pos = tr.findOne('.top-right').getAbsolutePosition(); + var pos = tr.findOne('.top-right')!.getAbsolutePosition(); assert.equal(pos.x, 300); stage.draw(); @@ -693,7 +706,7 @@ describe('Transformer', function () { assert.equal(tr.y(), rect.y()); assert.equal(tr.width(), rect.width()); assert.equal(tr.height(), rect.height()); - assert.equal(tr.findOne('.back').width(), rect.width()); + assert.equal(tr.findOne('.back')?.width(), rect.width()); }); it('add transformer for transformed rect', function () { @@ -1391,7 +1404,7 @@ describe('Transformer', function () { layer.add(tr); layer.draw(); - var anchor = tr.findOne('.top-right'); + var anchor = tr.findOne('.top-right')!; var pos = anchor.getAbsolutePosition(); simulateMouseDown(tr, { @@ -1434,7 +1447,7 @@ describe('Transformer', function () { layer.draw(); - var anchor = tr.findOne('.top-left'); + var anchor = tr.findOne('.top-left')!; assertAlmostEqual(anchor.getAbsolutePosition().x, 20); simulateMouseDown(tr, { @@ -2025,7 +2038,7 @@ describe('Transformer', function () { assert.equal(tr.height(), 100); // manual check position - var back = tr.findOne('.back'); + var back = tr.findOne('.back')!; assert.equal(back.getAbsolutePosition().x, 0); layer.batchDraw(); @@ -2188,7 +2201,7 @@ describe('Transformer', function () { layer.add(tr); layer.draw(); - var rotater = tr.findOne('.rotater'); + var rotater = tr.findOne('.rotater')!; var pos = rotater.getAbsolutePosition(); simulateMouseDown(tr, { @@ -2724,7 +2737,7 @@ describe('Transformer', function () { x: 20, y: 20, }); - assert.equal(shape.name(), 'top-left _anchor'); + assert.equal(shape?.name(), 'top-left _anchor'); }); it('check rotator size on scaled transformer', function () { @@ -2751,7 +2764,7 @@ describe('Transformer', function () { layer.add(tr); layer.draw(); - var rotater = tr.findOne('.rotater'); + var rotater = tr.findOne('.rotater')!; var pos = rotater.getAbsolutePosition(); // pos.x === (x * scaleX - (height)) @@ -4874,7 +4887,7 @@ describe('Transformer', function () { }); layer.add(tr); // manual check of correct position of node - var handler = tr.findOne('.bottom-right'); + var handler = tr.findOne('.bottom-right')!; assert.equal(handler.fill(), 'white'); tr.anchorStyleFunc((anchor) => { diff --git a/test/unit/Tween-test.ts b/test/unit/Tween-test.ts index 2b538d95..f25f8aba 100644 --- a/test/unit/Tween-test.ts +++ b/test/unit/Tween-test.ts @@ -153,7 +153,7 @@ describe('Tween', function () { stage.add(layer); var duration = 0.1; - var c = Konva.Util.colorToRGBA('rgba(0,255,0,0.5)'); + var c = Konva.Util.colorToRGBA('rgba(0,255,0,0.5)')!; var endFill = 'rgba(' + c.r + ',' + c.g + ',' + c.b + ',' + c.a + ')'; var midFill = 'rgba(128,128,0,0.75)'; diff --git a/test/unit/imagediff.ts b/test/unit/imagediff.ts index a64213ac..439770c7 100644 --- a/test/unit/imagediff.ts +++ b/test/unit/imagediff.ts @@ -125,7 +125,7 @@ function toImageDataFromContext(context) { function toCanvas(object) { const data = toImageData(object), canvas = getCanvas(data.width, data.height), - context = canvas.getContext('2d'); + context = canvas.getContext('2d')!; context.putImageData(data, 0, 0); return canvas; diff --git a/test/unit/test-utils.ts b/test/unit/test-utils.ts index 7db90f68..cb4b991d 100644 --- a/test/unit/test-utils.ts +++ b/test/unit/test-utils.ts @@ -21,8 +21,8 @@ beforeEach(function () { // clear after test afterEach(function () { - var isFailed = this.currentTest.state == 'failed'; - var isManual = this.currentTest.parent.title === 'Manual'; + var isFailed = this.currentTest?.state === 'failed'; + var isManual = this.currentTest?.parent?.title === 'Manual'; Konva.stages.forEach(function (stage) { clearTimeout(stage._mouseDblTimeout); @@ -44,7 +44,7 @@ export const isNode = typeof global.document === 'undefined'; export const isBrowser = !isNode; export function getContainer() { - return document.getElementById('konva-container'); + return document.getElementById('konva-container')!; } export function addContainer() { @@ -69,7 +69,7 @@ export function addStage(attrs?) { }); if (!isNode) { - getContainer().appendChild(container); + getContainer().appendChild(container!); } return stage; @@ -111,9 +111,7 @@ export function compareCanvases(canvas1, canvas2, tol?, secondTol?) { var equal = imagediff.equal(canvas1, canvas2, tol, secondTol); if (!equal) { const diff = imagediff.diff(canvas1, canvas2); - const diffCanvas = createCanvas(); - - const context = diffCanvas.getContext('2d'); + const { canvas: diffCanvas, context } = createCanvasAndContext(); context.putImageData(diff, 0, 0); var base64 = diffCanvas.toDataURL(); @@ -171,12 +169,13 @@ export function compareLayers(layer1: Layer, layer2: Layer, tol?, secondTol?) { ); } -export function createCanvas() { - var node = Konva.Util.createCanvasElement(); - node.width = 578 * Konva.pixelRatio; - node.height = 200 * Konva.pixelRatio; - node.getContext('2d').scale(Konva.pixelRatio, Konva.pixelRatio); - return node; +export function createCanvasAndContext() { + const canvas = Konva.Util.createCanvasElement(); + canvas.width = 578 * Konva.pixelRatio; + canvas.height = 200 * Konva.pixelRatio; + const context = canvas.getContext('2d')!; + context.scale(Konva.pixelRatio, Konva.pixelRatio); + return { canvas, context }; } export function showHit(layer) { @@ -189,7 +188,10 @@ export function showHit(layer) { getContainer().appendChild(canvas); } -export function simulateMouseDown(stage, pos) { +export function simulateMouseDown( + stage: Stage, + pos: { x: number; y: number; button?: number } +) { simulatePointerDown(stage, pos); var top = isNode ? 0 : stage.content.getBoundingClientRect().top; @@ -198,10 +200,13 @@ export function simulateMouseDown(stage, pos) { clientY: pos.y + top, button: pos.button || 0, type: 'mousedown', - }); + } as any); } -export function simulateMouseMove(stage, pos) { +export function simulateMouseMove( + stage: Stage, + pos: { x: number; y: number; button?: number } +) { simulatePointerMove(stage, pos); var top = isNode ? 0 : stage.content.getBoundingClientRect().top; var evt = { @@ -212,7 +217,7 @@ export function simulateMouseMove(stage, pos) { }; Konva.DD._drag(evt); - stage._pointermove(evt); + stage._pointermove(evt as any); } export function simulateMouseUp(stage, pos) { @@ -344,7 +349,13 @@ export function simulateTouchEnd(stage, pos, changed?) { Konva.DD._endDragAfter(evt); } -export function simulatePointerDown(stage: Stage, pos) { +type SimulatedPointerEvent = { + x: number; + y: number; + button?: number; + pointerId?: number; +}; +export function simulatePointerDown(stage: Stage, pos: SimulatedPointerEvent) { var top = isNode ? 0 : stage.content.getBoundingClientRect().top; stage._pointerdown({ clientX: pos.x, @@ -355,7 +366,7 @@ export function simulatePointerDown(stage: Stage, pos) { } as any); } -export function simulatePointerMove(stage: Stage, pos) { +export function simulatePointerMove(stage: Stage, pos: SimulatedPointerEvent) { var top = isNode ? 0 : stage.content.getBoundingClientRect().top; var evt = { clientX: pos.x, @@ -369,7 +380,7 @@ export function simulatePointerMove(stage: Stage, pos) { // Konva.DD._drag(evt); } -export function simulatePointerUp(stage: Stage, pos) { +export function simulatePointerUp(stage: Stage, pos: SimulatedPointerEvent) { var top = isNode ? 0 : stage.content.getBoundingClientRect().top; var evt = { clientX: pos.x, diff --git a/tsconfig.test.json b/tsconfig.test.json index 8c2f4d95..9dbaf768 100644 --- a/tsconfig.test.json +++ b/tsconfig.test.json @@ -1,19 +1,7 @@ { "extends": "./tsconfig.json", "compilerOptions": { - "strict": false, - "noImplicitAny": false, - "allowJs": true, - "noEmit": true, - "checkJs": false, - "allowUnreachableCode": true, - "allowUnusedLabels": true, - "noFallthroughCasesInSwitch": false, - "noImplicitReturns": false, - "noImplicitThis": false, - "noPropertyAccessFromIndexSignature": false, - "noUnusedLocals": false, - "noUnusedParameters": false + "noEmit": true }, "include": ["src", "test"] }