autodraw

test/unit/AutoDraw-test.ts

@@ -0,0 +1,137 @@
+import { assert } from 'chai';
+import { addStage, isNode, Konva } from './utis';
+
+describe('AutoDraw', function () {
+  // ======================================================
+  it('schedule draw on shape add/change/remove', function () {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    let callCount = 0;
+    layer.batchDraw = function () {
+      callCount += 1;
+      Konva.Layer.prototype.batchDraw.call(this);
+      return layer;
+    };
+    var circle = new Konva.Circle({
+      x: stage.width() / 2,
+      y: stage.height() / 2,
+      radius: 70,
+      fill: 'green',
+      stroke: 'black',
+      strokeWidth: 4,
+      name: 'myCircle',
+    });
+    layer.add(circle);
+    assert.equal(callCount, 1);
+    circle.radius(50);
+    assert.equal(callCount, 2);
+    circle.destroy();
+    assert.equal(callCount, 3);
+  });
+
+  // ======================================================
+  it('schedule draw on order change', function () {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var circle = new Konva.Circle({
+      x: stage.width() / 2,
+      y: stage.height() / 2,
+      radius: 70,
+      fill: 'green',
+      stroke: 'black',
+      strokeWidth: 4,
+      name: 'myCircle',
+    });
+    layer.add(circle);
+
+    var circle2 = new Konva.Circle({
+      x: stage.width() / 2,
+      y: stage.height() / 2,
+      radius: 70,
+      fill: 'green',
+      stroke: 'black',
+      strokeWidth: 4,
+      name: 'myCircle',
+    });
+    layer.add(circle2);
+
+    let callCount = 0;
+    layer.batchDraw = function () {
+      callCount += 1;
+      Konva.Layer.prototype.batchDraw.call(this);
+      return layer;
+    };
+
+    circle.moveToTop();
+    assert.equal(callCount, 1);
+  });
+
+  // ======================================================
+  it('schedule draw on cache', function () {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var circle = new Konva.Circle({
+      x: stage.width() / 2,
+      y: stage.height() / 2,
+      radius: 70,
+      fill: 'green',
+      stroke: 'black',
+      strokeWidth: 4,
+      name: 'myCircle',
+    });
+    layer.add(circle);
+
+    let callCount = 0;
+    layer.batchDraw = function () {
+      callCount += 1;
+      Konva.Layer.prototype.batchDraw.call(this);
+      return layer;
+    };
+
+    circle.cache();
+    assert.equal(callCount, 1);
+
+    circle.clearCache();
+    assert.equal(callCount, 2);
+  });
+
+  // ======================================================
+  it.only('redraw for images', function (done) {
+    // don't test on node, because of specific url access
+    if (isNode) {
+      return;
+    }
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    const { src } = document.getElementById(
+      'darth-vader.jpg'
+    ) as HTMLImageElement;
+
+    const img = new Image();
+    img.src = src;
+    const image = new Konva.Image({
+      image: img,
+    });
+    layer.add(image);
+
+    let callCount = 0;
+    layer.batchDraw = function () {
+      callCount += 1;
+      Konva.Layer.prototype.batchDraw.call(this);
+      return layer;
+    };
+
+    img.onload = () => {
+      assert.equal(callCount, 1);
+      done();
+    };
+  });
+});

test/unit/Layer-test.ts

@@ -302,7 +302,7 @@ describe('Layer', function () {
 
     stage.add(layer);
 
-    assert(layer.getCanvasElement().style.display === 'none');
+    assert(layer.getNativeCanvasElement().style.display === 'none');
   });
 
   // ======================================================

test/unit/utis.ts

@@ -15,7 +15,7 @@ import { Stage } from '../../src/Stage';
 
 // reset some data
 beforeEach(function () {
-  Konva.inDblClickWindow = false;
+  Konva['inDblClickWindow'] = false;
 });
 
 export const isNode = typeof global.document === 'undefined';
@@ -120,7 +120,7 @@ export function compareCanvases(canvas1, canvas2, tol?, secondTol?) {
 }
 
 export function compareLayerAndCanvas(layer: Layer, canvas, tol?, secondTol?) {
-  compareCanvases(layer.getCanvasElement(), canvas, tol, secondTol);
+  compareCanvases(layer.getNativeCanvasElement(), canvas, tol, secondTol);
 }
 
 export function cloneAndCompareLayer(layer: Layer, tol?, secondTol?) {
@@ -131,7 +131,12 @@ export function cloneAndCompareLayer(layer: Layer, tol?, secondTol?) {
 }
 
 export function compareLayers(layer1: Layer, layer2: Layer, tol?, secondTol?) {
-  compareLayerAndCanvas(layer1, layer2.getCanvasElement(), tol, secondTol);
+  compareLayerAndCanvas(
+    layer1,
+    layer2.getNativeCanvasElement(),
+    tol,
+    secondTol
+  );
 }
 
 export function createCanvas() {
@@ -152,7 +157,7 @@ export function showHit(layer) {
   getContainer().appendChild(canvas);
 }
 
-Konva.UA.mobile = false;
+Konva['UA'].mobile = false;
 
 export function simulateMouseDown(stage, pos) {
   var top = isNode ? 0 : stage.content.getBoundingClientRect().top;