diff --git a/tests/assets/Ghostscript_Tiger.svg b/test-old/assets/Ghostscript_Tiger.svg
similarity index 100%
rename from tests/assets/Ghostscript_Tiger.svg
rename to test-old/assets/Ghostscript_Tiger.svg
diff --git a/tests/assets/bamoon.jpg b/test-old/assets/bamoon.jpg
similarity index 100%
rename from tests/assets/bamoon.jpg
rename to test-old/assets/bamoon.jpg
diff --git a/tests/assets/cropped-darth.jpg b/test-old/assets/cropped-darth.jpg
similarity index 100%
rename from tests/assets/cropped-darth.jpg
rename to test-old/assets/cropped-darth.jpg
diff --git a/tests/assets/cropped-darth.png b/test-old/assets/cropped-darth.png
similarity index 100%
rename from tests/assets/cropped-darth.png
rename to test-old/assets/cropped-darth.png
diff --git a/tests/assets/darth-vader.jpg b/test-old/assets/darth-vader.jpg
similarity index 100%
rename from tests/assets/darth-vader.jpg
rename to test-old/assets/darth-vader.jpg
diff --git a/tests/assets/dataUrls.js b/test-old/assets/dataUrls.js
similarity index 100%
rename from tests/assets/dataUrls.js
rename to test-old/assets/dataUrls.js
diff --git a/tests/assets/lion.png b/test-old/assets/lion.png
similarity index 100%
rename from tests/assets/lion.png
rename to test-old/assets/lion.png
diff --git a/tests/assets/scorpion-sprite.png b/test-old/assets/scorpion-sprite.png
similarity index 100%
rename from tests/assets/scorpion-sprite.png
rename to test-old/assets/scorpion-sprite.png
diff --git a/tests/assets/tiger.js b/test-old/assets/tiger.js
similarity index 100%
rename from tests/assets/tiger.js
rename to test-old/assets/tiger.js
diff --git a/tests/assets/worldMap.js b/test-old/assets/worldMap.js
similarity index 100%
rename from tests/assets/worldMap.js
rename to test-old/assets/worldMap.js
diff --git a/tests/base.css b/test-old/base.css
similarity index 100%
rename from tests/base.css
rename to test-old/base.css
diff --git a/tests/html/filterTests.html b/test-old/html/filterTests.html
similarity index 100%
rename from tests/html/filterTests.html
rename to test-old/html/filterTests.html
diff --git a/tests/html/functionalTests.html b/test-old/html/functionalTests.html
similarity index 100%
rename from tests/html/functionalTests.html
rename to test-old/html/functionalTests.html
diff --git a/tests/html/index.html b/test-old/html/index.html
similarity index 100%
rename from tests/html/index.html
rename to test-old/html/index.html
diff --git a/tests/html/manualTests.html b/test-old/html/manualTests.html
similarity index 100%
rename from tests/html/manualTests.html
rename to test-old/html/manualTests.html
diff --git a/tests/html/performanceTests.html b/test-old/html/performanceTests.html
similarity index 100%
rename from tests/html/performanceTests.html
rename to test-old/html/performanceTests.html
diff --git a/tests/html/special/coreCustomBuild.html b/test-old/html/special/coreCustomBuild.html
similarity index 100%
rename from tests/html/special/coreCustomBuild.html
rename to test-old/html/special/coreCustomBuild.html
diff --git a/tests/html/special/dragAndDropCustomBuild.html b/test-old/html/special/dragAndDropCustomBuild.html
similarity index 100%
rename from tests/html/special/dragAndDropCustomBuild.html
rename to test-old/html/special/dragAndDropCustomBuild.html
diff --git a/tests/html/special/index.html b/test-old/html/special/index.html
similarity index 100%
rename from tests/html/special/index.html
rename to test-old/html/special/index.html
diff --git a/tests/html/special/requirejs.html b/test-old/html/special/requirejs.html
similarity index 100%
rename from tests/html/special/requirejs.html
rename to test-old/html/special/requirejs.html
diff --git a/tests/html/special/scripts/kinetic-vcurrent.js b/test-old/html/special/scripts/kinetic-vcurrent.js
similarity index 100%
rename from tests/html/special/scripts/kinetic-vcurrent.js
rename to test-old/html/special/scripts/kinetic-vcurrent.js
diff --git a/tests/html/special/scripts/main.js b/test-old/html/special/scripts/main.js
similarity index 100%
rename from tests/html/special/scripts/main.js
rename to test-old/html/special/scripts/main.js
diff --git a/tests/html/special/scripts/require.js b/test-old/html/special/scripts/require.js
similarity index 100%
rename from tests/html/special/scripts/require.js
rename to test-old/html/special/scripts/require.js
diff --git a/tests/html/special/stageBelowFold.html b/test-old/html/special/stageBelowFold.html
similarity index 100%
rename from tests/html/special/stageBelowFold.html
rename to test-old/html/special/stageBelowFold.html
diff --git a/tests/html/special/tallStage.html b/test-old/html/special/tallStage.html
similarity index 100%
rename from tests/html/special/tallStage.html
rename to test-old/html/special/tallStage.html
diff --git a/tests/html/special/transitionCustomBuild.html b/test-old/html/special/transitionCustomBuild.html
similarity index 100%
rename from tests/html/special/transitionCustomBuild.html
rename to test-old/html/special/transitionCustomBuild.html
diff --git a/tests/html/unitTests.html b/test-old/html/unitTests.html
similarity index 100%
rename from tests/html/unitTests.html
rename to test-old/html/unitTests.html
diff --git a/tests/html/visualTests.html b/test-old/html/visualTests.html
similarity index 100%
rename from tests/html/visualTests.html
rename to test-old/html/visualTests.html
diff --git a/tests/js/Test.js b/test-old/js/Test.js
similarity index 100%
rename from tests/js/Test.js
rename to test-old/js/Test.js
diff --git a/tests/js/filterTests.js b/test-old/js/filterTests.js
similarity index 100%
rename from tests/js/filterTests.js
rename to test-old/js/filterTests.js
diff --git a/tests/js/functionalTests.js b/test-old/js/functionalTests.js
similarity index 100%
rename from tests/js/functionalTests.js
rename to test-old/js/functionalTests.js
diff --git a/tests/js/manualTests.js b/test-old/js/manualTests.js
similarity index 100%
rename from tests/js/manualTests.js
rename to test-old/js/manualTests.js
diff --git a/tests/js/performanceTests.js b/test-old/js/performanceTests.js
similarity index 100%
rename from tests/js/performanceTests.js
rename to test-old/js/performanceTests.js
diff --git a/tests/js/unit/containerTests.js b/test-old/js/unitTests.js
similarity index 82%
rename from tests/js/unit/containerTests.js
rename to test-old/js/unitTests.js
index af330b65..f827c2d0 100644
--- a/tests/js/unit/containerTests.js
+++ b/test-old/js/unitTests.js
@@ -1,4 +1,147 @@
-Test.Modules.CONTAINER = {
+Test.Modules.ANIMATION = {
+ /*
+ * WARNING: make sure that this is the first unit test that uses
+ * animation because it's accessing the global animation object which could
+ * be modified by other unit tests
+ */
+ 'test start and stop': function(containerId) {
+ var stage = new Kinetic.Stage({
+ container: containerId,
+ width: 578,
+ height: 200
+ });
+ var layer = new Kinetic.Layer();
+ var rect = new Kinetic.Rect({
+ x: 200,
+ y: 100,
+ width: 100,
+ height: 50,
+ fill: 'green',
+ stroke: 'black',
+ strokeWidth: 4
+ });
+
+ layer.add(rect);
+ stage.add(layer);
+
+ var amplitude = 150;
+ var period = 1000;
+ // in ms
+ var centerX = stage.getWidth() / 2 - 100 / 2;
+
+ var anim = new Kinetic.Animation(function(frame) {
+ rect.setX(amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX);
+ }, layer);
+ var a = Kinetic.Animation;
+
+ test(a.animations.length === 0, '1should be no animations running');
+
+ anim.start();
+ test(a.animations.length === 1, '2should be 1 animation running');
+
+ anim.stop();
+ test(a.animations.length === 0, '3should be no animations running');
+
+ anim.start();
+ test(a.animations.length === 1, '4should be 1 animation running');
+
+ anim.start();
+ test(a.animations.length === 1, '5should be 1 animation runningg');
+
+ anim.stop();
+ test(a.animations.length === 0, '6should be no animations running');
+
+ anim.stop();
+ test(a.animations.length === 0, '7should be no animations running');
+ },
+ 'layer batch draw': function(containerId) {
+ var stage = new Kinetic.Stage({
+ container: containerId,
+ width: 578,
+ height: 200
+ });
+ var layer = new Kinetic.Layer();
+ var rect = new Kinetic.Rect({
+ x: 200,
+ y: 100,
+ width: 100,
+ height: 50,
+ fill: 'green',
+ stroke: 'black',
+ strokeWidth: 4
+ });
+
+ layer.add(rect);
+ stage.add(layer);
+
+ draws = 0;
+
+ layer.on('draw', function() {
+ //console.log('draw')
+ draws++;
+ });
+
+ layer.draw();
+ layer.draw();
+ layer.draw();
+
+ test(draws === 3, 'draw count should be 3');
+
+ layer.batchDraw();
+ layer.batchDraw();
+ layer.batchDraw();
+
+ test(draws !== 6, 'should not be 6 draws');
+
+ setTimeout(function() {
+ layer.batchDraw();
+ }, 2000);
+ },
+ 'stage batch draw': function(containerId) {
+ var stage = new Kinetic.Stage({
+ container: containerId,
+ width: 578,
+ height: 200
+ });
+ var layer = new Kinetic.Layer();
+ var rect = new Kinetic.Rect({
+ x: 200,
+ y: 100,
+ width: 100,
+ height: 50,
+ fill: 'green',
+ stroke: 'black',
+ strokeWidth: 4
+ });
+
+ layer.add(rect);
+ stage.add(layer);
+
+ draws = 0;
+
+ layer.on('draw', function() {
+ //console.log('draw')
+ draws++;
+ });
+
+ stage.draw();
+ stage.draw();
+ stage.draw();
+
+ test(draws === 3, 'draw count should be 3');
+
+ stage.batchDraw();
+ stage.batchDraw();
+ stage.batchDraw();
+
+ test(draws !== 6, 'should not be 6 draws');
+
+ setTimeout(function() {
+ stage.batchDraw();
+ }, 2000);
+ }
+};
+;Test.Modules.CONTAINER = {
'clip': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
@@ -1399,3 +1542,221 @@ Test.Modules.CONTAINER = {
layer.draw();
}
};
+;Test.Modules.LAYER = {
+ 'test canvas inline styles': function(containerId) {
+ var stage = new Kinetic.Stage({
+ container: containerId,
+ width: 578,
+ height: 200
+ });
+
+ var layer = new Kinetic.Layer();
+
+ var circle = new Kinetic.Circle({
+ x: 100,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'green',
+ stroke: 'black',
+ strokeWidth: 4
+ });
+
+ layer.add(circle);
+ stage.add(layer);
+
+ var style = layer.getCanvas()._canvas.style;
+
+ test(style.position === 'absolute', 'canvas position style should be absolute');
+ test(style.border === '0px', 'canvas border style should be 0px');
+ test(style.margin === '0px', 'canvas margin style should be 0px');
+ test(style.padding === '0px', 'canvas padding style should be 0px');
+ test(style.backgroundColor === 'transparent', 'canvas backgroundColor style should be transparent');
+ test(style.top === '0px', 'canvas top should be 0px');
+ test(style.left === '0px', 'canvas left should be 0px');
+ },
+
+ 'layer getIntersection()': function(containerId) {
+ var stage = new Kinetic.Stage({
+ container: containerId,
+ width: 578,
+ height: 200,
+ throttle: 999
+ });
+ var layer = new Kinetic.Layer();
+
+ var redCircle = new Kinetic.Circle({
+ x: 380,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ strokeWidth: 4,
+ fill: 'red',
+ stroke: 'black',
+ id: 'redCircle'
+ });
+
+ var greenCircle = new Kinetic.Circle({
+ x: 300,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ strokeWidth: 4,
+ fill: 'green',
+ stroke: 'black',
+ id: 'greenCircle'
+ });
+
+ layer.add(redCircle);
+ layer.add(greenCircle);
+ stage.add(layer);
+
+ test(layer.getIntersection(300, 100).shape.getId() === 'greenCircle', 'shape should be greenCircle');
+ test(layer.getIntersection(380, 100).shape.getId() === 'redCircle', 'shape should be redCircle');
+ test(layer.getIntersection(100, 100) === null, 'shape should be null');
+
+
+ },
+ 'set layer visibility': function(containerId) {
+ var stage = new Kinetic.Stage({
+ container: containerId,
+ width: 578,
+ height: 200
+ });
+ var layer = new Kinetic.Layer({
+ visible: false
+ });
+ var rect = new Kinetic.Rect({
+ x: 200,
+ width: 100,
+ height: 50,
+ fill: 'green',
+ stroke: 'black',
+ strokeWidth: 4,
+ scale: [3, 1],
+ draggable: true,
+ strokeScaleEnabled: false
+ });
+
+ rect.colorKey = '000000';
+
+ layer.add(rect);
+ stage.add(layer);
+ },
+
+ 'set clearBeforeDraw to false, and test toDataURL for stage, layer, group, and shape': function(containerId) {
+ var stage = new Kinetic.Stage({
+ container: containerId,
+ width: 578,
+ height: 200
+ });
+
+ var layer = new Kinetic.Layer({
+ clearBeforeDraw: false,
+ throttle: 999
+ });
+
+ var group = new Kinetic.Group();
+
+ var circle = new Kinetic.Circle({
+ x: 100,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'green',
+ stroke: 'black',
+ strokeWidth: 4
+ });
+
+ group.add(circle);
+ layer.add(group);
+ stage.add(layer);
+
+ for(var n = 0; n < 20; n++) {
+ circle.move(10, 0);
+ layer.draw();
+ }
+
+ // TODO: investigate re-enabling toDataURL with clearBeforeDraw = false.
+ // disabled it for now because toDataURL breaks on devices with pixelRatio != 1
+ //console.log(layer.toDataURL());
+
+ },
+ 'save layer as png (click on Circle to open new window)': function(containerId) {
+ var stage = new Kinetic.Stage({
+ container: containerId,
+ width: 578,
+ height: 200
+ });
+ var layer = new Kinetic.Layer();
+
+ var Circle = new Kinetic.Circle({
+ x: stage.getWidth() / 2,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'violet',
+ stroke: 'black',
+ strokeWidth: 4
+ });
+
+ Circle.on('click', function() {
+ window.open(layer.toDataURL());
+ });
+
+ layer.add(Circle);
+ stage.add(layer);
+ },
+ 'save layer as low quality jpg (click on Circle to open new window)': function(containerId) {
+ var stage = new Kinetic.Stage({
+ container: containerId,
+ width: 578,
+ height: 200
+ });
+ var layer = new Kinetic.Layer();
+
+ var circle = new Kinetic.Circle({
+ x: stage.getWidth() / 2,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'violet',
+ stroke: 'black',
+ strokeWidth: 4
+ });
+
+ circle.on('click', function() {
+ window.open(layer.toDataURL({
+ mimeType: 'image/jpeg',
+ quality: 0.2
+ }));
+ });
+
+ layer.add(circle);
+ stage.add(layer);
+ },
+ 'save layer as high quality jpg (click on Circle to open new window)': function(containerId) {
+ var stage = new Kinetic.Stage({
+ container: containerId,
+ width: 578,
+ height: 200
+ });
+ var layer = new Kinetic.Layer();
+
+ var circle = new Kinetic.Circle({
+ x: stage.getWidth() / 2,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'violet',
+ stroke: 'black',
+ strokeWidth: 4
+ });
+
+ circle.on('click', function() {
+ window.open(layer.toDataURL({
+ mimeType: 'image/jpeg',
+ quality: 1
+ }));
+ });
+
+ layer.add(circle);
+ stage.add(layer);
+ }
+};
+
+
+
diff --git a/tests/js/visualTests.js b/test-old/js/visualTests.js
similarity index 100%
rename from tests/js/visualTests.js
rename to test-old/js/visualTests.js
diff --git a/test/runner.html b/test/runner.html
index 3aa0530e..c210d8ab 100644
--- a/test/runner.html
+++ b/test/runner.html
@@ -42,13 +42,11 @@
+
+
-
-
-
-
@@ -62,6 +60,11 @@
+
+
+
+
+
diff --git a/tests/js/unit/animationTests.js b/test/unit/Animation-test.js
similarity index 52%
rename from tests/js/unit/animationTests.js
rename to test/unit/Animation-test.js
index 36e77bfc..097537bc 100644
--- a/tests/js/unit/animationTests.js
+++ b/test/unit/Animation-test.js
@@ -1,15 +1,7 @@
-Test.Modules.ANIMATION = {
- /*
- * WARNING: make sure that this is the first unit test that uses
- * animation because it's accessing the global animation object which could
- * be modified by other unit tests
- */
- 'test start and stop': function(containerId) {
- var stage = new Kinetic.Stage({
- container: containerId,
- width: 578,
- height: 200
- });
+suite('Animation', function() {
+ // ======================================================
+ test('test start and stop', function() {
+ var stage = addStage();
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 200,
@@ -32,34 +24,33 @@ Test.Modules.ANIMATION = {
var anim = new Kinetic.Animation(function(frame) {
rect.setX(amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX);
}, layer);
- var a = Kinetic.Animation;
+ var a = Kinetic.Animation.animations;
+ var startLen = a.length;
- test(a.animations.length === 0, '1should be no animations running');
+ assert.equal(a.length, startLen, '1should be no animations running');
anim.start();
- test(a.animations.length === 1, '2should be 1 animation running');
+ assert.equal(a.length, startLen + 1, '2should be 1 animation running');
anim.stop();
- test(a.animations.length === 0, '3should be no animations running');
+ assert.equal(a.length, startLen, '3should be no animations running');
anim.start();
- test(a.animations.length === 1, '4should be 1 animation running');
+ assert.equal(a.length, startLen + 1, '4should be 1 animation running');
anim.start();
- test(a.animations.length === 1, '5should be 1 animation runningg');
+ assert.equal(a.length, startLen + 1, '5should be 1 animation runningg');
anim.stop();
- test(a.animations.length === 0, '6should be no animations running');
+ assert.equal(a.length, startLen, '6should be no animations running');
anim.stop();
- test(a.animations.length === 0, '7should be no animations running');
- },
- 'layer batch draw': function(containerId) {
- var stage = new Kinetic.Stage({
- container: containerId,
- width: 578,
- height: 200
- });
+ assert.equal(a.length, startLen, '7should be no animations running');
+ });
+
+ // ======================================================
+ test('layer batch draw', function() {
+ var stage = addStage();
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 200,
@@ -85,24 +76,18 @@ Test.Modules.ANIMATION = {
layer.draw();
layer.draw();
- test(draws === 3, 'draw count should be 3');
+ assert.equal(draws, 3, 'draw count should be 3');
layer.batchDraw();
layer.batchDraw();
layer.batchDraw();
- test(draws !== 6, 'should not be 6 draws');
+ assert.notEqual(draws, 6, 'should not be 6 draws');
+ });
- setTimeout(function() {
- layer.batchDraw();
- }, 2000);
- },
- 'stage batch draw': function(containerId) {
- var stage = new Kinetic.Stage({
- container: containerId,
- width: 578,
- height: 200
- });
+ // ======================================================
+ test('stage batch draw', function() {
+ var stage = addStage();
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 200,
@@ -128,16 +113,13 @@ Test.Modules.ANIMATION = {
stage.draw();
stage.draw();
- test(draws === 3, 'draw count should be 3');
+ assert.equal(draws, 3, 'draw count should be 3');
stage.batchDraw();
stage.batchDraw();
stage.batchDraw();
- test(draws !== 6, 'should not be 6 draws');
+ assert.notEqual(draws, 6, 'should not be 6 draws');
- setTimeout(function() {
- stage.batchDraw();
- }, 2000);
- }
-};
+ });
+});
\ No newline at end of file
diff --git a/test/unit/Container-test.js b/test/unit/Container-test.js
new file mode 100644
index 00000000..f22d2fb7
--- /dev/null
+++ b/test/unit/Container-test.js
@@ -0,0 +1,1327 @@
+suite('Container', function() {
+
+ // ======================================================
+ test('clip', function() {
+ var stage = addStage();
+ var layer = new Kinetic.Layer({
+ clip: [0, 0, stage.getWidth() / 2, 100]
+ });
+ var group = new Kinetic.Group();
+ var circle = new Kinetic.Circle({
+ x: stage.getWidth() / 2,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'green',
+ stroke: 'black',
+ strokeWidth: 4,
+ name: 'myCircle',
+ draggable: true
+ });
+
+ stage.add(layer);
+ layer.add(group);
+ group.add(circle);
+ layer.draw();
+ });
+
+ // ======================================================
+ test('adder validation', function() {
+ var stage = addStage();
+ var layer = new Kinetic.Layer();
+ var group = new Kinetic.Group();
+ var circle = new Kinetic.Circle({
+ x: stage.getWidth() / 2,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'green',
+ stroke: 'black',
+ strokeWidth: 4,
+ name: 'myCircle'
+ });
+
+ stage.add(layer);
+ layer.add(group);
+ group.add(circle);
+ layer.draw();
+
+ // disassemble the tree
+ circle.remove();
+ group.remove();
+ layer.remove();
+
+ // ===================================
+ var errorThrown = false;
+ try {
+ stage.add(stage);
+ } catch(err) {
+ errorThrown = true;
+ }
+ assert.equal(errorThrown, true, 'error should have been thrown when adding stage to stage');
+ stage.remove();
+
+ // ===================================
+ var errorThrown = false;
+ try {
+ stage.add(group);
+ } catch(err) {
+ errorThrown = true;
+ }
+ assert.equal(errorThrown, true, 'error should have been thrown when adding group to stage');
+ group.remove();
+
+ // ===================================
+ var errorThrown = false;
+ try {
+ stage.add(circle);
+ } catch(err) {
+ errorThrown = true;
+ }
+ assert.equal(errorThrown, true, 'error should have been thrown when adding shape to stage');
+ circle.remove();
+
+ // ===================================
+ var errorThrown = false;
+ try {
+ layer.add(stage);
+ } catch(err) {
+ errorThrown = true;
+ }
+ assert.equal(errorThrown, true, 'error should have been thrown when adding stage to layer');
+ stage.remove();
+
+ // ===================================
+ var errorThrown = false;
+ try {
+ layer.add(layer);
+ } catch(err) {
+ errorThrown = true;
+ }
+ assert.equal(errorThrown, true, 'error should have been thrown when adding layer to layer');
+ layer.remove();
+
+ // ===================================
+ var errorThrown = false;
+ try {
+ group.add(stage);
+ } catch(err) {
+ errorThrown = true;
+ }
+ assert.equal(errorThrown, true, 'error should have been thrown when adding stage to group');
+ stage.remove();
+
+ // ===================================
+ var errorThrown = false;
+ try {
+ group.add(layer);
+ } catch(err) {
+ errorThrown = true;
+ }
+ assert.equal(errorThrown, true, 'error should have been thrown when adding layer to group');
+ layer.remove();
+
+ });
+
+ // ======================================================
+ test('add layer then group then shape', function() {
+ var stage = addStage();
+ var layer = new Kinetic.Layer();
+ var group = new Kinetic.Group();
+ var circle = new Kinetic.Circle({
+ x: stage.getWidth() / 2,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'green',
+ stroke: 'black',
+ strokeWidth: 4,
+ name: 'myCircle'
+ });
+
+ // these should all pass because they are valid
+ stage.add(layer);
+ layer.add(group);
+ group.add(circle);
+ layer.draw();
+ });
+
+ // ======================================================
+ test('add shape then stage then layer', function() {
+ var stage = addStage();
+ var layer = new Kinetic.Layer();
+ var group = new Kinetic.Group();
+ var circle = new Kinetic.Circle({
+ x: stage.getWidth() / 2,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'green',
+ stroke: 'black',
+ strokeWidth: 4,
+ name: 'myCircle'
+ });
+
+ group.add(circle);
+ stage.add(layer);
+ layer.add(group);
+ });
+
+ // ======================================================
+ test('select shape by id and name', function() {
+ var stage = addStage();
+ var layer = new Kinetic.Layer({
+ id: 'myLayer'
+ });
+ var circle = new Kinetic.Circle({
+ x: stage.getWidth() / 2,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'green',
+ stroke: 'black',
+ strokeWidth: 4,
+ id: 'myCircle'
+ });
+
+ var rect = new Kinetic.Rect({
+ x: 300,
+ y: 100,
+ width: 100,
+ height: 50,
+ fill: 'purple',
+ stroke: 'black',
+ strokeWidth: 4,
+ name: 'myRect'
+ });
+
+ layer.add(circle);
+ layer.add(rect);
+ stage.add(layer);
+
+ var node;
+ node = stage.get('#myCircle')[0];
+ assert.equal(node.className, 'Circle', 'className should be Circle');
+ node = layer.get('.myRect')[0];
+ assert.equal(node.className, 'Rect', 'className should be rect');
+ node = layer.get('#myLayer')[0];
+ assert.equal(node, undefined, 'node should be undefined');
+ node = stage.get('#myLayer')[0];
+ assert.equal(node.nodeType, 'Layer', 'node type should be Layer');
+
+ });
+
+ // ======================================================
+ test('select shapes with multiple selectors', function() {
+ var stage = addStage();
+ var layer = new Kinetic.Layer({
+ id: 'myLayer'
+ });
+ var circle = new Kinetic.Circle({
+ x: stage.getWidth() / 2,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'green',
+ stroke: 'black',
+ strokeWidth: 4,
+ id: 'myCircle'
+ });
+
+ var rect = new Kinetic.Rect({
+ x: 300,
+ y: 100,
+ width: 100,
+ height: 50,
+ fill: 'purple',
+ stroke: 'black',
+ strokeWidth: 4,
+ name: 'myRect'
+ });
+
+ layer.add(circle);
+ layer.add(rect);
+ stage.add(layer);
+
+ assert.equal(layer.get('#myCircle, .myRect').length, 2, 'should be 2 items in the array');
+ assert.equal(layer.get('#myCircle, .myRect')[0]._id, circle._id, 'circle id is wrong');
+ assert.equal(layer.get('#myCircle, .myRect')[1]._id, rect._id, 'rect id is wrong');
+
+ assert.equal(layer.get('#myCircle, Circle, .myRect, Rect').length, 4, 'should be 4 items in the array');
+ assert.equal(layer.get('#myCircle, Circle, .myRect, Rect')[0]._id, circle._id, 'circle id is wrong');
+ assert.equal(layer.get('#myCircle, Circle, .myRect, Rect')[1]._id, circle._id, 'circle id is wrong');
+ assert.equal(layer.get('#myCircle, Circle, .myRect, Rect')[2]._id, rect._id, 'rect id is wrong');
+ assert.equal(layer.get('#myCircle, Circle, .myRect, Rect')[3]._id, rect._id, 'rect id is wrong');
+
+ });
+
+ // ======================================================
+ test('set x on an array of nodes', function() {
+ var stage = addStage();
+ var layer = new Kinetic.Layer();
+ var circle = new Kinetic.Circle({
+ x: stage.getWidth() / 2,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'green',
+ stroke: 'black',
+ strokeWidth: 4,
+ name: 'myShape'
+ });
+
+ var rect = new Kinetic.Rect({
+ x: 300,
+ y: 100,
+ width: 100,
+ height: 50,
+ fill: 'purple',
+ stroke: 'black',
+ strokeWidth: 4,
+ name: 'myShape'
+ });
+
+ layer.add(circle);
+ layer.add(rect);
+ stage.add(layer);
+
+ var shapes = layer.get('.myShape');
+
+ assert.equal(shapes.length, 2, 'shapes array should have 2 elements');
+
+ shapes.each(function(node) {
+ node.setX(200);
+ });
+
+ layer.draw();
+
+ shapes.each(function(node) {
+ assert.equal(node.getX(), 200, 'shape x should be 200');
+ });
+ });
+
+ // ======================================================
+ test('set fill on array by Shape-selector', function() {
+ var stage = addStage();
+ var layer = new Kinetic.Layer();
+ var circle = new Kinetic.Circle({
+ x: stage.getWidth() / 2,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'green',
+ stroke: 'black',
+ strokeWidth: 4,
+ name: 'myShape'
+ });
+
+ var rect = new Kinetic.Rect({
+ x: 300,
+ y: 100,
+ width: 100,
+ height: 50,
+ fill: 'purple',
+ stroke: 'black',
+ strokeWidth: 4,
+ name: 'myShape'
+ });
+
+ layer.add(circle);
+ layer.add(rect);
+ stage.add(layer);
+
+ var shapes = layer.get('Shape');
+
+ assert.equal(shapes.length, 2, 'shapes array should have 2 elements');
+
+ shapes.each(function(node) {
+ node.setFill('gray');
+ });
+
+ layer.draw();
+
+ shapes.each(function(node) {
+ assert.equal(node.getFill(), 'gray', 'shape x should be 200');
+ });
+ });
+
+ // ======================================================
+ test('add listener to an array of nodes', function() {
+ var stage = addStage();
+ var layer = new Kinetic.Layer();
+ var circle = new Kinetic.Circle({
+ x: stage.getWidth() / 2,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'green',
+ stroke: 'black',
+ strokeWidth: 4,
+ name: 'myShape'
+ });
+
+ var rect = new Kinetic.Rect({
+ x: 300,
+ y: 100,
+ width: 100,
+ height: 50,
+ fill: 'purple',
+ stroke: 'black',
+ strokeWidth: 4,
+ name: 'myShape'
+ });
+
+ layer.add(circle);
+ layer.add(rect);
+ stage.add(layer);
+
+ var shapes = layer.get('.myShape');
+
+ assert.equal(shapes.length, 2, 'shapes array should have 2 elements');
+ var a = 0;
+ shapes.on('mouseover', function() {
+ a++;
+ });
+ circle.fire('mouseover');
+ assert.equal(a, 1, 'listener should have fired for circle');
+ rect.fire('mouseover');
+ assert.equal(a, 2, 'listener should have fired for rect');
+ });
+
+ // ======================================================
+ test('test ids and names hashes', function() {
+ var stage = addStage();
+ var layer = new Kinetic.Layer();
+ var circle = new Kinetic.Circle({
+ x: stage.getWidth() / 2,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'green',
+ stroke: 'black',
+ strokeWidth: 4,
+ id: 'myCircle3'
+ });
+
+ var rect = new Kinetic.Rect({
+ x: 300,
+ y: 100,
+ width: 100,
+ height: 50,
+ fill: 'purple',
+ stroke: 'black',
+ strokeWidth: 4,
+ name: 'myRect3'
+ });
+
+ layer.add(circle);
+ layer.add(rect);
+ stage.add(layer);
+
+
+ assert.equal(Kinetic.ids['myCircle3'].getId(), 'myCircle3', 'circle id not in ids hash');
+ assert.equal(Kinetic.names['myRect3'][0].getName(), 'myRect3', 'rect name not in names hash');
+
+ circle.setId('newCircleId');
+ assert.notEqual(Kinetic.ids['newCircleId'], undefined, 'circle not in ids hash');
+ assert.equal(Kinetic.ids['myCircle3'], undefined, 'old circle id key is still in ids hash');
+
+ rect.setName('newRectName');
+ assert.notEqual(Kinetic.names['newRectName'][0], undefined, 'new rect name not in names hash');
+ assert.equal(Kinetic.names['myRect3'], undefined, 'old rect name is still in names hash');
+ });
+
+ // ======================================================
+ test('add layer', function() {
+ var stage = addStage();
+ var layer = new Kinetic.Layer();
+ stage.add(layer);
+ });
+
+ // ======================================================
+ test('remove all children from layer', function() {
+ var stage = addStage();
+ var layer = new Kinetic.Layer();
+ var group = new Kinetic.Group();
+ var circle1 = new Kinetic.Circle({
+ x: 100,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'green',
+ stroke: 'black',
+ strokeWidth: 4
+ });
+
+ var circle2 = new Kinetic.Circle({
+ x: 300,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'green',
+ stroke: 'black',
+ strokeWidth: 4
+ });
+
+ group.add(circle1);
+ group.add(circle2);
+ layer.add(group);
+ stage.add(layer);
+
+ assert.equal(layer.children.length, 1, 'layer should have 1 children');
+ assert.equal(group.children.length, 2, 'group should have 2 children');
+
+ layer.removeChildren();
+ layer.draw();
+
+ assert.equal(layer.children.length, 0, 'layer should have 0 children');
+ assert.equal(group.children.length, 0, 'group should have 0 children');
+ });
+
+ // ======================================================
+ test('destroy all children from layer', function() {
+ var stage = addStage();
+ var layer = new Kinetic.Layer({
+ name: 'layerName',
+ id: 'layerId'
+ });
+ var group = new Kinetic.Group();
+ var circle1 = new Kinetic.Circle({
+ x: 100,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'green',
+ stroke: 'black',
+ strokeWidth: 4,
+ name: 'circleName',
+ id: 'circleId'
+ });
+
+ var circle2 = new Kinetic.Circle({
+ x: 300,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'green',
+ stroke: 'black',
+ strokeWidth: 4
+ });
+
+ group.add(circle1);
+ group.add(circle2);
+ layer.add(group);
+ stage.add(layer);
+
+ assert.equal(layer.children.length, 1, 'layer should have 1 children');
+ assert.equal(group.children.length, 2, 'group should have 2 children');
+ assert(Kinetic.names.circleName.length > 0, 'circleName should be in names hash');
+ assert.equal(Kinetic.ids.circleId.getId(), 'circleId', 'layerId should be in ids hash');
+
+ layer.destroyChildren();
+ layer.draw();
+
+ assert.equal(layer.children.length, 0, 'layer should have 0 children');
+ assert.equal(group.children.length, 0, 'group should have 0 children');
+ assert.equal(Kinetic.names.circleName, undefined, 'circleName should not be in names hash');
+ assert.equal(Kinetic.ids.circleId, undefined, 'layerId should not be in ids hash');
+ });
+
+ // ======================================================
+ test('add group', function() {
+ var stage = addStage();
+ var layer = new Kinetic.Layer();
+ var group = new Kinetic.Group();
+
+ var circle = new Kinetic.Circle({
+ x: stage.getWidth() / 2,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'green',
+ stroke: 'black',
+ strokeWidth: 4
+ });
+
+ group.add(circle);
+ layer.add(group);
+ stage.add(layer);
+ });
+
+ // ======================================================
+ test('create two groups, move first group', function() {
+ var stage = addStage();
+ var greenLayer = new Kinetic.Layer();
+ var blueLayer = new Kinetic.Layer();
+ var greenGroup = new Kinetic.Group();
+ var blueGroup = new Kinetic.Group();
+
+ var greencircle = new Kinetic.Circle({
+ x: stage.getWidth() / 2 - 100,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'green',
+ stroke: 'black',
+ strokeWidth: 4,
+ draggable: true
+ });
+
+ var bluecircle = new Kinetic.Circle({
+ x: stage.getWidth() / 2 + 100,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'blue',
+ stroke: 'black',
+ strokeWidth: 4
+ });
+
+ greenGroup.add(greencircle);
+ blueGroup.add(bluecircle);
+ greenLayer.add(greenGroup);
+ blueLayer.add(blueGroup);
+ stage.add(greenLayer);
+ stage.add(blueLayer);
+
+ blueLayer.removeChildren();
+ var blueGroup2 = new Kinetic.Group();
+ var bluecircle2 = new Kinetic.Circle({
+ x: stage.getWidth() / 2,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'blue',
+ stroke: 'black',
+ strokeWidth: 4
+ });
+ blueGroup2.add(bluecircle2);
+ blueLayer.add(blueGroup2);
+ blueLayer.draw();
+ blueGroup2.setPosition(100, 0);
+ blueLayer.draw();
+ });
+
+ // ======================================================
+ test('node type selector', function() {
+ var stage = addStage();
+ var layer = new Kinetic.Layer();
+ var fooLayer = new Kinetic.Layer();
+ var group = new Kinetic.Group();
+
+ var blue = new Kinetic.Rect({
+ x: 200,
+ y: 100,
+ width: 100,
+ height: 50,
+ fill: 'blue'
+ });
+
+ var red = new Kinetic.Rect({
+ x: 250,
+ y: 100,
+ width: 100,
+ height: 50,
+ fill: 'red'
+ });
+
+ group.add(red);
+ layer.add(blue);
+ layer.add(group);
+ stage.add(layer);
+ stage.add(fooLayer);
+
+ assert.equal(stage.get('Shape').length, 2, 'stage should have 2 shapes');
+ assert.equal(layer.get('Shape').length, 2, 'layer should have 2 shapes');
+ assert.equal(group.get('Shape').length, 1, 'layer should have 2 shapes');
+
+ assert.equal(stage.get('Layer').length, 2, 'stage should have 2 layers');
+ assert.equal(stage.get('Group').length, 1, 'stage should have 1 group');
+
+ assert.equal(layer.get('Group').length, 1, 'layer should have 1 group');
+ assert.equal(layer.get('Shape').length, 2, 'layer should have 2 shapes');
+ assert.equal(layer.get('Layer').length, 0, 'layer should have 0 layers');
+
+ assert.equal(fooLayer.get('Group').length, 0, 'layer should have 0 groups');
+ assert.equal(fooLayer.get('Shape').length, 0, 'layer should have 0 shapes');
+
+ assert.equal(group.get('Shape').length, 1, 'group should have 1 shape');
+ assert.equal(group.get('Layer').length, 0, 'group should have 0 layers');
+ assert.equal(group.get('Group').length, 0, 'group should have 0 groups');
+
+ });
+
+ // ======================================================
+ test('node and shape type selector', function() {
+ var stage = addStage();
+ var layer = new Kinetic.Layer();
+ var layer2 = new Kinetic.Layer();
+ var fooLayer = new Kinetic.Layer();
+ var group = new Kinetic.Group();
+
+ var blue = new Kinetic.Rect({
+ x: 100,
+ y: 50,
+ width: 100,
+ height: 50,
+ fill: 'blue'
+ });
+
+ var red = new Kinetic.Rect({
+ x: 150,
+ y: 75,
+ width: 100,
+ height: 50,
+ fill: 'red'
+ });
+
+ var green = new Kinetic.Rect({
+ x: 200,
+ y: 100,
+ width: 100,
+ height: 50,
+ fill: 'green'
+ });
+
+ var blueCircle = new Kinetic.Circle({
+ x: 350,
+ y: 75,
+ radius: 40,
+ fill: 'blue'
+ });
+
+ var redCircle = new Kinetic.Circle({
+ x: 400,
+ y: 125,
+ radius: 40,
+ fill: 'red'
+ });
+
+ var textpath = new Kinetic.TextPath({
+ y: 35,
+ stroke: 'black',
+ strokeWidth: 1,
+ fill: 'orange',
+ fontSize: '18',
+ fontFamily: 'Arial',
+ text: 'The quick brown fox jumped over the lazy dog\'s back',
+ data: "M 10,10 300,150 550,150"
+ });
+
+ var path = new Kinetic.Path({
+ x: 200,
+ y: -75,
+ data: 'M200,100h100v50z',
+ fill: '#ccc',
+ stroke: '#333',
+ strokeWidth: 2,
+ shadowColor: 'black',
+ shadowBlur: 2,
+ shadowOffset: [10, 10],
+ shadowOpacity: 0.5
+ });
+
+ var poly = new Kinetic.RegularPolygon({
+ x: stage.getWidth() / 2,
+ y: stage.getHeight() / 2,
+ sides: 5,
+ radius: 50,
+ fill: 'green',
+ stroke: 'blue',
+ strokeWidth: 5,
+ name: 'foobar'
+ });
+
+ group.add(red);
+ group.add(redCircle);
+ layer.add(blue);
+ layer.add(green);
+ layer.add(blueCircle);
+ layer.add(group);
+ layer2.add(textpath);
+ layer2.add(path);
+ layer2.add(poly);
+ stage.add(layer);
+ stage.add(layer2);
+ stage.add(fooLayer);
+
+ assert.equal(stage.get('Shape').length, 8, 'stage should have 5 shapes');
+ assert.equal(stage.get('Layer').length, 3, 'stage should have 2 layers');
+ assert.equal(stage.get('Group').length, 1, 'stage should have 1 group');
+ assert.equal(stage.get('Rect').length, 3, 'stage should have 3 rects');
+ assert.equal(stage.get('Circle').length, 2, 'stage should have 2 circles');
+ assert.equal(stage.get('RegularPolygon').length, 1, 'stage should have 1 regular polygon');
+ assert.equal(stage.get('TextPath').length, 1, 'stage should have 1 text path');
+ assert.equal(stage.get('Path').length, 1, 'stage should have 1 path');
+
+ assert.equal(layer.get('Shape').length, 5, 'layer should have 5 shapes');
+ assert.equal(layer.get('Layer').length, 0, 'layer should have 0 layers');
+ assert.equal(layer.get('Group').length, 1, 'layer should have 1 group');
+ assert.equal(layer.get('Rect').length, 3, 'layer should have 3 rects');
+ assert.equal(layer.get('Circle').length, 2, 'layer should have 2 circles');
+ assert.equal(layer.get('RegularPolygon').length, 0, 'layer should have 0 regular polygon');
+ assert.equal(layer.get('TextPath').length, 0, 'layer should have 0 text path');
+ assert.equal(layer.get('Path').length, 0, 'layer should have 0 path');
+
+ assert.equal(layer2.get('Shape').length, 3, 'layer2 should have 3 shapes');
+ assert.equal(layer2.get('Layer').length, 0, 'layer2 should have 0 layers');
+ assert.equal(layer2.get('Group').length, 0, 'layer2 should have 0 group');
+ assert.equal(layer2.get('RegularPolygon').length, 1, 'layer2 should have 1 regular polygon');
+ assert.equal(layer2.get('TextPath').length, 1, 'layer2 should have 1 text path');
+ assert.equal(layer2.get('Path').length, 1, 'layer2 should have 1 path');
+
+ assert.equal(fooLayer.get('Shape').length, 0, 'layer should have 0 shapes');
+ assert.equal(fooLayer.get('Group').length, 0, 'layer should have 0 groups');
+ assert.equal(fooLayer.get('Rect').length, 0, 'layer should have 0 rects');
+ assert.equal(fooLayer.get('Circle').length, 0, 'layer should have 0 circles');
+
+ assert.equal(group.get('Shape').length, 2, 'group should have 2 shape');
+ assert.equal(group.get('Layer').length, 0, 'group should have 0 layers');
+ assert.equal(group.get('Group').length, 0, 'group should have 0 groups');
+ assert.equal(group.get('Rect').length, 1, 'group should have 1 rects');
+ assert.equal(group.get('Circle').length, 1, 'gropu should have 1 circles');
+ });
+
+ // ======================================================
+ test('test get() selector by adding shape, then group, then layer', function() {
+ var stage = addStage();
+ var layer = new Kinetic.Layer({
+ name: 'layerName',
+ id: 'layerId'
+ });
+ var group = new Kinetic.Group({
+ name: 'groupName',
+ id: 'groupId'
+ });
+ var rect = new Kinetic.Rect({
+ x: 200,
+ y: 20,
+ width: 100,
+ height: 50,
+ fill: 'red',
+ stroke: 'black',
+ strokeWidth: 4,
+ name: 'rectName',
+ id: 'rectId'
+ });
+
+ group.add(rect);
+ layer.add(group);
+ stage.add(layer);
+
+ assert.equal(stage.get('.rectName')[0].attrs.id, 'rectId', 'problem with shape name selector');
+ assert.equal(stage.get('#rectId')[0].attrs.id, 'rectId', 'problem with shape id selector');
+ assert.equal(layer.get('.rectName')[0].attrs.id, 'rectId', 'problem with shape name selector');
+ assert.equal(layer.get('#rectId')[0].attrs.id, 'rectId', 'problem with shape id selector');
+ assert.equal(group.get('.rectName')[0].attrs.id, 'rectId', 'problem with shape name selector');
+ assert.equal(group.get('#rectId')[0].attrs.id, 'rectId', 'problem with shape id selector');
+
+ assert.equal(stage.get('.groupName')[0].attrs.id, 'groupId', 'problem with group name selector');
+ assert.equal(stage.get('#groupId')[0].attrs.id, 'groupId', 'problem with group id selector');
+ assert.equal(layer.get('.groupName')[0].attrs.id, 'groupId', 'problem with group name selector');
+ assert.equal(layer.get('#groupId')[0].attrs.id, 'groupId', 'problem with group id selector');
+
+ assert.equal(stage.get('.layerName')[0].attrs.id, 'layerId', 'problem with layer name selector');
+ assert.equal(stage.get('#layerId')[0].attrs.id, 'layerId', 'problem with layer id selector');
+ });
+
+ // ======================================================
+ test('test get() selector by adding group, then shape, then layer', function() {
+ var stage = addStage();
+ var layer = new Kinetic.Layer({
+ name: 'layerName',
+ id: 'layerId'
+ });
+ var group = new Kinetic.Group({
+ name: 'groupName',
+ id: 'groupId'
+ });
+ var rect = new Kinetic.Rect({
+ x: 200,
+ y: 20,
+ width: 100,
+ height: 50,
+ fill: 'red',
+ stroke: 'black',
+ strokeWidth: 4,
+ name: 'rectName',
+ id: 'rectId'
+ });
+
+ layer.add(group);
+ group.add(rect);
+ stage.add(layer);
+
+ assert.equal(stage.get('.rectName')[0].attrs.id, 'rectId', 'problem with shape name selector');
+ assert.equal(stage.get('#rectId')[0].attrs.id, 'rectId', 'problem with shape id selector');
+ assert.equal(layer.get('.rectName')[0].attrs.id, 'rectId', 'problem with shape name selector');
+ assert.equal(layer.get('#rectId')[0].attrs.id, 'rectId', 'problem with shape id selector');
+ assert.equal(group.get('.rectName')[0].attrs.id, 'rectId', 'problem with shape name selector');
+ assert.equal(group.get('#rectId')[0].attrs.id, 'rectId', 'problem with shape id selector');
+
+ assert.equal(stage.get('.groupName')[0].attrs.id, 'groupId', 'problem with group name selector');
+ assert.equal(stage.get('#groupId')[0].attrs.id, 'groupId', 'problem with group id selector');
+ assert.equal(layer.get('.groupName')[0].attrs.id, 'groupId', 'problem with group name selector');
+ assert.equal(layer.get('#groupId')[0].attrs.id, 'groupId', 'problem with group id selector');
+
+ assert.equal(stage.get('.layerName')[0].attrs.id, 'layerId', 'problem with layer name selector');
+ assert.equal(stage.get('#layerId')[0].attrs.id, 'layerId', 'problem with layer id selector');
+ });
+
+ // ======================================================
+ test('test get() selector by adding group, then layer, then shape', function() {
+ var stage = addStage();
+ var layer = new Kinetic.Layer({
+ name: 'layerName',
+ id: 'layerId'
+ });
+ var group = new Kinetic.Group({
+ name: 'groupName',
+ id: 'groupId'
+ });
+ var rect = new Kinetic.Rect({
+ x: 200,
+ y: 20,
+ width: 100,
+ height: 50,
+ fill: 'red',
+ stroke: 'black',
+ strokeWidth: 4,
+ name: 'rectName',
+ id: 'rectId'
+ });
+
+ layer.add(group);
+ stage.add(layer);
+ group.add(rect);
+
+ assert.equal(stage.get('.rectName')[0].attrs.id, 'rectId', 'problem with shape name selector');
+ assert.equal(stage.get('#rectId')[0].attrs.id, 'rectId', 'problem with shape id selector');
+ assert.equal(layer.get('.rectName')[0].attrs.id, 'rectId', 'problem with shape name selector');
+ assert.equal(layer.get('#rectId')[0].attrs.id, 'rectId', 'problem with shape id selector');
+ assert.equal(group.get('.rectName')[0].attrs.id, 'rectId', 'problem with shape name selector');
+ assert.equal(group.get('#rectId')[0].attrs.id, 'rectId', 'problem with shape id selector');
+
+ assert.equal(stage.get('.groupName')[0].attrs.id, 'groupId', 'problem with group name selector');
+ assert.equal(stage.get('#groupId')[0].attrs.id, 'groupId', 'problem with group id selector');
+ assert.equal(layer.get('.groupName')[0].attrs.id, 'groupId', 'problem with group name selector');
+ assert.equal(layer.get('#groupId')[0].attrs.id, 'groupId', 'problem with group id selector');
+
+ assert.equal(stage.get('.layerName')[0].attrs.id, 'layerId', 'problem with layer name selector');
+ assert.equal(stage.get('#layerId')[0].attrs.id, 'layerId', 'problem with layer id selector');
+ });
+
+ // ======================================================
+ test('test get() selector by adding layer, then group, then shape', function() {
+ var stage = addStage();
+ var layer = new Kinetic.Layer({
+ name: 'layerName',
+ id: 'layerId'
+ });
+ var group = new Kinetic.Group({
+ name: 'groupName',
+ id: 'groupId'
+ });
+ var rect = new Kinetic.Rect({
+ x: 200,
+ y: 20,
+ width: 100,
+ height: 50,
+ fill: 'red',
+ stroke: 'black',
+ strokeWidth: 4,
+ name: 'rectName',
+ id: 'rectId'
+ });
+
+ stage.add(layer);
+ layer.add(group);
+ group.add(rect);
+
+ assert.equal(stage.get('.rectName')[0].attrs.id, 'rectId', 'problem with shape name selector');
+ assert.equal(stage.get('#rectId')[0].attrs.id, 'rectId', 'problem with shape id selector');
+ assert.equal(layer.get('.rectName')[0].attrs.id, 'rectId', 'problem with shape name selector');
+ assert.equal(layer.get('#rectId')[0].attrs.id, 'rectId', 'problem with shape id selector');
+ assert.equal(group.get('.rectName')[0].attrs.id, 'rectId', 'problem with shape name selector');
+ assert.equal(group.get('#rectId')[0].attrs.id, 'rectId', 'problem with shape id selector');
+
+ assert.equal(stage.get('.groupName')[0].attrs.id, 'groupId', 'problem with group name selector');
+ assert.equal(stage.get('#groupId')[0].attrs.id, 'groupId', 'problem with group id selector');
+ assert.equal(layer.get('.groupName')[0].attrs.id, 'groupId', 'problem with group name selector');
+ assert.equal(layer.get('#groupId')[0].attrs.id, 'groupId', 'problem with group id selector');
+
+ assert.equal(stage.get('.layerName')[0].attrs.id, 'layerId', 'problem with layer name selector');
+ assert.equal(stage.get('#layerId')[0].attrs.id, 'layerId', 'problem with layer id selector');
+
+ layer.draw();
+ });
+
+ // ======================================================
+ test('add layer then shape', function() {
+ var stage = addStage();
+ var layer = new Kinetic.Layer();
+ var circle = new Kinetic.Circle({
+ x: stage.getWidth() / 2,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'green',
+ stroke: 'black',
+ strokeWidth: 4,
+ name: 'myCircle'
+ });
+
+ stage.add(layer);
+ layer.add(circle);
+ layer.draw();
+ });
+
+ // ======================================================
+ test('move blue layer on top of green layer with setZIndex', function() {
+ var stage = addStage();
+ var blueLayer = new Kinetic.Layer();
+ var greenLayer = new Kinetic.Layer();
+
+ var bluecircle = new Kinetic.Circle({
+ x: 200,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'blue',
+ stroke: 'black',
+ strokeWidth: 4
+ });
+
+ var greencircle = new Kinetic.Circle({
+ x: 280,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'green',
+ stroke: 'black',
+ strokeWidth: 4
+ });
+
+ blueLayer.add(bluecircle);
+ greenLayer.add(greencircle);
+
+ stage.add(blueLayer);
+ stage.add(greenLayer);
+
+ blueLayer.setZIndex(1);
+
+ //console.log(greenLayer.getZIndex());
+
+ assert.equal(greenLayer.getZIndex(), 0, 'green layer should have z index of 0');
+ assert.equal(blueLayer.getZIndex(), 1, 'blue layer should have z index of 1');
+ });
+
+ // ======================================================
+ test('move blue layer on top of green layer with moveToTop', function() {
+ var stage = addStage();
+ var blueLayer = new Kinetic.Layer();
+ var greenLayer = new Kinetic.Layer();
+
+ var bluecircle = new Kinetic.Circle({
+ x: 200,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'blue',
+ stroke: 'black',
+ strokeWidth: 4
+ });
+
+ var greencircle = new Kinetic.Circle({
+ x: 280,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'green',
+ stroke: 'black',
+ strokeWidth: 4
+ });
+
+ blueLayer.add(bluecircle);
+ greenLayer.add(greencircle);
+
+ stage.add(blueLayer);
+ stage.add(greenLayer);
+
+ blueLayer.moveToTop();
+
+ });
+
+ // ======================================================
+ test('move green layer below blue layer with moveToBottom', function() {
+ var stage = addStage();
+ var blueLayer = new Kinetic.Layer();
+ var greenLayer = new Kinetic.Layer();
+
+ var bluecircle = new Kinetic.Circle({
+ x: 200,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'blue',
+ stroke: 'black',
+ strokeWidth: 4
+ });
+
+ var greencircle = new Kinetic.Circle({
+ x: 280,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'green',
+ stroke: 'black',
+ strokeWidth: 4
+ });
+
+ blueLayer.add(bluecircle);
+ greenLayer.add(greencircle);
+
+ stage.add(blueLayer);
+ stage.add(greenLayer);
+
+ greenLayer.moveToBottom();
+
+ });
+
+ // ======================================================
+ test('move green layer below blue layer with moveDown', function() {
+ var stage = addStage();
+ var blueLayer = new Kinetic.Layer();
+ var greenLayer = new Kinetic.Layer();
+
+ var bluecircle = new Kinetic.Circle({
+ x: 200,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'blue',
+ stroke: 'black',
+ strokeWidth: 4
+ });
+
+ var greencircle = new Kinetic.Circle({
+ x: 280,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'green',
+ stroke: 'black',
+ strokeWidth: 4
+ });
+
+ blueLayer.add(bluecircle);
+ greenLayer.add(greencircle);
+
+ stage.add(blueLayer);
+ stage.add(greenLayer);
+ greenLayer.moveDown();
+
+ });
+
+ // ======================================================
+ test('move blue layer above green layer with moveUp', function() {
+ var stage = addStage();
+ var blueLayer = new Kinetic.Layer();
+ var greenLayer = new Kinetic.Layer();
+
+ var bluecircle = new Kinetic.Circle({
+ x: 200,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'blue',
+ stroke: 'black',
+ strokeWidth: 4
+ });
+
+ var greencircle = new Kinetic.Circle({
+ x: 280,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'green',
+ stroke: 'black',
+ strokeWidth: 4
+ });
+
+ blueLayer.add(bluecircle);
+ greenLayer.add(greencircle);
+
+ stage.add(blueLayer);
+ stage.add(greenLayer);
+ blueLayer.moveUp();
+
+ });
+
+ // ======================================================
+ test('move blue circle on top of green circle with moveToTop', function() {
+ var stage = addStage();
+ var layer = new Kinetic.Layer();
+
+ var bluecircle = new Kinetic.Circle({
+ x: 200,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'blue',
+ stroke: 'black',
+ strokeWidth: 4
+ });
+
+ var greencircle = new Kinetic.Circle({
+ x: 280,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'green',
+ stroke: 'black',
+ strokeWidth: 4
+ });
+
+ layer.add(bluecircle);
+ layer.add(greencircle);
+ stage.add(layer);
+
+ assert.equal(bluecircle.getZIndex(), 0, 'blue circle should have zindex 0 before relayering');
+ assert.equal(greencircle.getZIndex(), 1, 'green circle should have zindex 1 before relayering');
+
+ bluecircle.moveToTop();
+
+ assert.equal(bluecircle.getZIndex(), 1, 'blue circle should have zindex 1 after relayering');
+ assert.equal(greencircle.getZIndex(), 0, 'green circle should have zindex 0 after relayering');
+
+ layer.draw();
+ });
+
+ // ======================================================
+ test('move green circle below blue circle with moveDown', function() {
+ var stage = addStage();
+ var layer = new Kinetic.Layer();
+
+ var bluecircle = new Kinetic.Circle({
+ x: 200,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'blue',
+ stroke: 'black',
+ strokeWidth: 4
+ });
+
+ var greencircle = new Kinetic.Circle({
+ x: 280,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'green',
+ stroke: 'black',
+ strokeWidth: 4
+ });
+
+ layer.add(bluecircle);
+ layer.add(greencircle);
+ stage.add(layer);
+
+ assert.equal(bluecircle.getZIndex(), 0, 'blue circle should have zindex 0 before relayering');
+ assert.equal(greencircle.getZIndex(), 1, 'green circle should have zindex 1 before relayering');
+
+ greencircle.moveDown();
+
+ assert.equal(bluecircle.getZIndex(), 1, 'blue circle should have zindex 1 after relayering');
+ assert.equal(greencircle.getZIndex(), 0, 'green circle should have zindex 0 after relayering');
+
+ layer.draw();
+ });
+
+ // ======================================================
+ test('layer layer when only one layer', function() {
+ var stage = addStage();
+ var layer = new Kinetic.Layer();
+
+ var bluecircle = new Kinetic.Circle({
+ x: 200,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'blue',
+ stroke: 'black',
+ strokeWidth: 4
+ });
+
+ layer.add(bluecircle);
+ stage.add(layer);
+
+
+ assert.equal(layer.getZIndex(), 0, 'layer should have zindex of 0');
+
+ layer.moveDown();
+ assert.equal(layer.getZIndex(), 0, 'layer should have zindex of 0');
+
+ layer.moveToBottom();
+ assert.equal(layer.getZIndex(), 0, 'layer should have zindex of 0');
+
+ layer.moveUp();
+ assert.equal(layer.getZIndex(), 0, 'layer should have zindex of 0');
+
+ layer.moveToTop();
+ assert.equal(layer.getZIndex(), 0, 'layer should have zindex of 0');
+
+ });
+
+ // ======================================================
+ test('move blue group on top of green group with moveToTop', function() {
+ var stage = addStage();
+ var layer = new Kinetic.Layer();
+ var greenGroup = new Kinetic.Group();
+ var blueGroup = new Kinetic.Group();
+
+ var bluecircle = new Kinetic.Circle({
+ x: 200,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'blue',
+ stroke: 'black',
+ strokeWidth: 4
+ });
+
+ var greencircle = new Kinetic.Circle({
+ x: 280,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'green',
+ stroke: 'black',
+ strokeWidth: 4
+ });
+
+ blueGroup.add(bluecircle);
+ greenGroup.add(greencircle);
+
+ layer.add(blueGroup);
+ layer.add(greenGroup);
+ stage.add(layer);
+
+ assert.equal(blueGroup.getZIndex(), 0, 'blue group should have zindex 0 before relayering');
+ assert.equal(greenGroup.getZIndex(), 1, 'green group should have zindex 1 before relayering');
+
+ blueGroup.moveToTop();
+
+ assert.equal(blueGroup.getZIndex(), 1, 'blue group should have zindex 1 after relayering');
+ assert.equal(greenGroup.getZIndex(), 0, 'green group should have zindex 0 after relayering');
+
+ layer.draw();
+ });
+
+ // ======================================================
+ test('move blue group on top of green group with moveUp', function() {
+ var stage = addStage();
+ var layer = new Kinetic.Layer();
+ var greenGroup = new Kinetic.Group();
+ var blueGroup = new Kinetic.Group();
+
+ var bluecircle = new Kinetic.Circle({
+ x: 200,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'blue',
+ stroke: 'black',
+ strokeWidth: 4
+ });
+
+ var greencircle = new Kinetic.Circle({
+ x: 280,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'green',
+ stroke: 'black',
+ strokeWidth: 4
+ });
+
+ blueGroup.add(bluecircle);
+ greenGroup.add(greencircle);
+
+ layer.add(blueGroup);
+ layer.add(greenGroup);
+ stage.add(layer);
+
+ assert.equal(blueGroup.getZIndex(), 0, 'blue group should have zindex 0 before relayering');
+ assert.equal(greenGroup.getZIndex(), 1, 'green group should have zindex 1 before relayering');
+
+ blueGroup.moveUp();
+
+ assert.equal(blueGroup.getZIndex(), 1, 'blue group should have zindex 1 after relayering');
+ assert.equal(greenGroup.getZIndex(), 0, 'green group should have zindex 0 after relayering');
+
+ layer.draw();
+ });
+});
\ No newline at end of file
diff --git a/test/unit/Layer-test.js b/test/unit/Layer-test.js
new file mode 100644
index 00000000..150c49a9
--- /dev/null
+++ b/test/unit/Layer-test.js
@@ -0,0 +1,192 @@
+suite('Layer', function() {
+
+ // ======================================================
+ test('test canvas inline styles', function() {
+ var stage = addStage();
+
+ var layer = new Kinetic.Layer();
+
+ var circle = new Kinetic.Circle({
+ x: 100,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'green',
+ stroke: 'black',
+ strokeWidth: 4
+ });
+
+ layer.add(circle);
+ stage.add(layer);
+
+ var style = layer.getCanvas()._canvas.style;
+
+ assert.equal(style.position, 'absolute', 'canvas position style should be absolute');
+ assert.equal(style.border, '0px', 'canvas border style should be 0px');
+ assert.equal(style.margin, '0px', 'canvas margin style should be 0px');
+ assert.equal(style.padding, '0px', 'canvas padding style should be 0px');
+ assert.equal(style.backgroundColor, 'transparent', 'canvas backgroundColor style should be transparent');
+ assert.equal(style.top, '0px', 'canvas top should be 0px');
+ assert.equal(style.left, '0px', 'canvas left should be 0px');
+ });
+
+ // ======================================================
+ test('layer getIntersection()', function() {
+ var stage = addStage();
+ var layer = new Kinetic.Layer();
+
+ var redCircle = new Kinetic.Circle({
+ x: 380,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ strokeWidth: 4,
+ fill: 'red',
+ stroke: 'black',
+ id: 'redCircle'
+ });
+
+ var greenCircle = new Kinetic.Circle({
+ x: 300,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ strokeWidth: 4,
+ fill: 'green',
+ stroke: 'black',
+ id: 'greenCircle'
+ });
+
+ layer.add(redCircle);
+ layer.add(greenCircle);
+ stage.add(layer);
+
+ assert.equal(layer.getIntersection(300, 100).shape.getId(), 'greenCircle', 'shape should be greenCircle');
+ assert.equal(layer.getIntersection(380, 100).shape.getId(), 'redCircle', 'shape should be redCircle');
+ assert.equal(layer.getIntersection(100, 100), null, 'shape should be null');
+
+
+ });
+
+ // ======================================================
+ test('set layer visibility', function() {
+ var stage = addStage();
+ var layer = new Kinetic.Layer({
+ visible: false
+ });
+ var rect = new Kinetic.Rect({
+ x: 200,
+ width: 100,
+ height: 50,
+ fill: 'green',
+ stroke: 'black',
+ strokeWidth: 4,
+ scale: [3, 1],
+ draggable: true,
+ strokeScaleEnabled: false
+ });
+
+ rect.colorKey = '000000';
+
+ layer.add(rect);
+ stage.add(layer);
+ });
+
+ // ======================================================
+ test('set clearBeforeDraw to false, and test toDataURL for stage, layer, group, and shape', function() {
+ var stage = addStage();
+
+ var layer = new Kinetic.Layer({
+ clearBeforeDraw: false,
+ throttle: 999
+ });
+
+ var group = new Kinetic.Group();
+
+ var circle = new Kinetic.Circle({
+ x: 100,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'green',
+ stroke: 'black',
+ strokeWidth: 4
+ });
+
+ group.add(circle);
+ layer.add(group);
+ stage.add(layer);
+
+ for(var n = 0; n < 20; n++) {
+ circle.move(10, 0);
+ layer.draw();
+ }
+
+ var trace = layer.getContext().getTrace();
+ //console.log(trace);
+ assert.equal(trace, 'save();transform(1,0,0,1,220,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,230,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,240,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,250,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,260,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,270,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,280,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,290,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,300,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore()');
+
+ });
+
+ // ======================================================
+ test('save layer as png', function() {
+ var stage = addStage();
+ var layer = new Kinetic.Layer();
+
+ var Circle = new Kinetic.Circle({
+ x: stage.getWidth() / 2,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'violet',
+ stroke: 'black',
+ strokeWidth: 4
+ });
+
+ layer.add(Circle);
+ stage.add(layer);
+
+ var dataUrl = layer.toDataURL();
+ });
+
+ // ======================================================
+ test('save layer as low quality jpg', function() {
+ var stage = addStage();
+ var layer = new Kinetic.Layer();
+
+ var circle = new Kinetic.Circle({
+ x: stage.getWidth() / 2,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'violet',
+ stroke: 'black',
+ strokeWidth: 4
+ });
+
+ layer.add(circle);
+ stage.add(layer);
+
+ var dataUrl = layer.toDataURL({
+ mimeType: 'image/jpeg',
+ quality: 0.2
+ });
+ });
+
+ // ======================================================
+ test('save layer as high quality jpg', function() {
+ var stage = addStage();
+ var layer = new Kinetic.Layer();
+
+ var circle = new Kinetic.Circle({
+ x: stage.getWidth() / 2,
+ y: stage.getHeight() / 2,
+ radius: 70,
+ fill: 'violet',
+ stroke: 'black',
+ strokeWidth: 4
+ });
+
+ layer.add(circle);
+ stage.add(layer);
+
+ var dataUrl = layer.toDataURL({
+ mimeType: 'image/jpeg',
+ quality: 1
+ });
+ });
+});
\ No newline at end of file
diff --git a/tests/js/unit/layerTests.js b/tests/js/unit/layerTests.js
deleted file mode 100644
index 4068f838..00000000
--- a/tests/js/unit/layerTests.js
+++ /dev/null
@@ -1,218 +0,0 @@
-Test.Modules.LAYER = {
- 'test canvas inline styles': function(containerId) {
- var stage = new Kinetic.Stage({
- container: containerId,
- width: 578,
- height: 200
- });
-
- var layer = new Kinetic.Layer();
-
- var circle = new Kinetic.Circle({
- x: 100,
- y: stage.getHeight() / 2,
- radius: 70,
- fill: 'green',
- stroke: 'black',
- strokeWidth: 4
- });
-
- layer.add(circle);
- stage.add(layer);
-
- var style = layer.getCanvas()._canvas.style;
-
- test(style.position === 'absolute', 'canvas position style should be absolute');
- test(style.border === '0px', 'canvas border style should be 0px');
- test(style.margin === '0px', 'canvas margin style should be 0px');
- test(style.padding === '0px', 'canvas padding style should be 0px');
- test(style.backgroundColor === 'transparent', 'canvas backgroundColor style should be transparent');
- test(style.top === '0px', 'canvas top should be 0px');
- test(style.left === '0px', 'canvas left should be 0px');
- },
-
- 'layer getIntersection()': function(containerId) {
- var stage = new Kinetic.Stage({
- container: containerId,
- width: 578,
- height: 200,
- throttle: 999
- });
- var layer = new Kinetic.Layer();
-
- var redCircle = new Kinetic.Circle({
- x: 380,
- y: stage.getHeight() / 2,
- radius: 70,
- strokeWidth: 4,
- fill: 'red',
- stroke: 'black',
- id: 'redCircle'
- });
-
- var greenCircle = new Kinetic.Circle({
- x: 300,
- y: stage.getHeight() / 2,
- radius: 70,
- strokeWidth: 4,
- fill: 'green',
- stroke: 'black',
- id: 'greenCircle'
- });
-
- layer.add(redCircle);
- layer.add(greenCircle);
- stage.add(layer);
-
- test(layer.getIntersection(300, 100).shape.getId() === 'greenCircle', 'shape should be greenCircle');
- test(layer.getIntersection(380, 100).shape.getId() === 'redCircle', 'shape should be redCircle');
- test(layer.getIntersection(100, 100) === null, 'shape should be null');
-
-
- },
- 'set layer visibility': function(containerId) {
- var stage = new Kinetic.Stage({
- container: containerId,
- width: 578,
- height: 200
- });
- var layer = new Kinetic.Layer({
- visible: false
- });
- var rect = new Kinetic.Rect({
- x: 200,
- width: 100,
- height: 50,
- fill: 'green',
- stroke: 'black',
- strokeWidth: 4,
- scale: [3, 1],
- draggable: true,
- strokeScaleEnabled: false
- });
-
- rect.colorKey = '000000';
-
- layer.add(rect);
- stage.add(layer);
- },
-
- 'set clearBeforeDraw to false, and test toDataURL for stage, layer, group, and shape': function(containerId) {
- var stage = new Kinetic.Stage({
- container: containerId,
- width: 578,
- height: 200
- });
-
- var layer = new Kinetic.Layer({
- clearBeforeDraw: false,
- throttle: 999
- });
-
- var group = new Kinetic.Group();
-
- var circle = new Kinetic.Circle({
- x: 100,
- y: stage.getHeight() / 2,
- radius: 70,
- fill: 'green',
- stroke: 'black',
- strokeWidth: 4
- });
-
- group.add(circle);
- layer.add(group);
- stage.add(layer);
-
- for(var n = 0; n < 20; n++) {
- circle.move(10, 0);
- layer.draw();
- }
-
- // TODO: investigate re-enabling toDataURL with clearBeforeDraw = false.
- // disabled it for now because toDataURL breaks on devices with pixelRatio != 1
- //console.log(layer.toDataURL());
-
- },
- 'save layer as png (click on Circle to open new window)': function(containerId) {
- var stage = new Kinetic.Stage({
- container: containerId,
- width: 578,
- height: 200
- });
- var layer = new Kinetic.Layer();
-
- var Circle = new Kinetic.Circle({
- x: stage.getWidth() / 2,
- y: stage.getHeight() / 2,
- radius: 70,
- fill: 'violet',
- stroke: 'black',
- strokeWidth: 4
- });
-
- Circle.on('click', function() {
- window.open(layer.toDataURL());
- });
-
- layer.add(Circle);
- stage.add(layer);
- },
- 'save layer as low quality jpg (click on Circle to open new window)': function(containerId) {
- var stage = new Kinetic.Stage({
- container: containerId,
- width: 578,
- height: 200
- });
- var layer = new Kinetic.Layer();
-
- var circle = new Kinetic.Circle({
- x: stage.getWidth() / 2,
- y: stage.getHeight() / 2,
- radius: 70,
- fill: 'violet',
- stroke: 'black',
- strokeWidth: 4
- });
-
- circle.on('click', function() {
- window.open(layer.toDataURL({
- mimeType: 'image/jpeg',
- quality: 0.2
- }));
- });
-
- layer.add(circle);
- stage.add(layer);
- },
- 'save layer as high quality jpg (click on Circle to open new window)': function(containerId) {
- var stage = new Kinetic.Stage({
- container: containerId,
- width: 578,
- height: 200
- });
- var layer = new Kinetic.Layer();
-
- var circle = new Kinetic.Circle({
- x: stage.getWidth() / 2,
- y: stage.getHeight() / 2,
- radius: 70,
- fill: 'violet',
- stroke: 'black',
- strokeWidth: 4
- });
-
- circle.on('click', function() {
- window.open(layer.toDataURL({
- mimeType: 'image/jpeg',
- quality: 1
- }));
- });
-
- layer.add(circle);
- stage.add(layer);
- }
-};
-
-
-