Show a warning when a stage has too many layers

CHANGELOG.md

@@ -5,6 +5,9 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [new version][unreleased]
 
+### Added
+* Show a warning when a stage has too many layers.
+
 ### Changed
 * Fixes inconsistent `layer.setSize()` method. Now it has same arguments as any container.
 * Full rewrite to Typescript with tons of refactoring and small optimizations. The public API should be 100% the same

package.json

@@ -1,6 +1,6 @@
 {
   "name": "konva",
-  "version": "2.6.0",
+  "version": "3.0.0",
   "author": "Anton Lavrenov",
   "files": [
     "README.md",

src/Stage.ts

@@ -50,6 +50,7 @@ var STAGE = 'Stage',
   SPACE = ' ',
   UNDERSCORE = '_',
   CONTAINER = 'container',
+  MAX_LAYERS_NUMBER = 5,
   EMPTY_STRING = '',
   EVENTS = [
     MOUSEDOWN,
@@ -75,6 +76,7 @@ function addEvent(ctx, eventName) {
     false
   );
 }
+
 export const stages: Stage[] = [];
 
 /**
@@ -300,6 +302,15 @@ export class Stage extends Container {
       return this;
     }
     super.add(layer);
+
+    var length = this.children.length;
+    if (length > MAX_LAYERS_NUMBER) {
+      Util.warn(
+        'The stage has ' +
+          length +
+          ' layers. Recommended maximin number of layers is 3-5. Adding more layers into the stage may drop the performance. Rethink your tree structure, you can use Konva.Group.'
+      );
+    }
     layer._setCanvasSize(this.width(), this.height());
 
     // draw layer and append canvas to container

test/unit/Stage-test.js

@@ -1231,6 +1231,28 @@ suite('Stage', function() {
     image.src = url;
   });
 
+  test.only('show a warning if the stage has too many layers', function() {
+    var stage = addStage();
+    var oldWarn = Konva.Util.warn;
+    var called = false;
+    Konva.Util.warn = function() {
+      oldWarn.apply(null, arguments);
+      called = true;
+    };
+
+    // let say 5 is max number
+    stage.add(new Konva.Layer());
+    stage.add(new Konva.Layer());
+    stage.add(new Konva.Layer());
+    stage.add(new Konva.Layer());
+    stage.add(new Konva.Layer());
+    stage.add(new Konva.Layer());
+    stage.add(new Konva.Layer());
+
+    Konva.Util.warn = oldWarn;
+    assert.equal(called, true);
+  });
+
   // test.only('Warn when styles or stage are applied', function() {
   //   var stage = addStage();
   //   // var layer = new Konva.Layer();