From fafb5db93f9f903ef64d9a4694babf5d82a22813 Mon Sep 17 00:00:00 2001 From: Eric Rowell Date: Sat, 17 Mar 2012 14:35:34 -0700 Subject: [PATCH] added support for event bubble cancelation --- dist/kinetic-core.js | 46 ++-- src/GlobalObject.js | 3 +- src/Node.js | 8 +- src/Shape.js | 3 +- src/Stage.js | 23 +- src/shapes/Polygon.js | 2 +- src/shapes/RegularPolygon.js | 2 +- src/shapes/Star.js | 2 +- src/shapes/Text.js | 6 +- tests/js/functionalTests.js | 302 +++++++++++--------- tests/js/unitTests.js | 518 +++++++++++++++++------------------ 11 files changed, 460 insertions(+), 455 deletions(-) diff --git a/dist/kinetic-core.js b/dist/kinetic-core.js index 4433a3c0..b93543dd 100644 --- a/dist/kinetic-core.js +++ b/dist/kinetic-core.js @@ -186,8 +186,7 @@ Kinetic.GlobalObject = { this.isAnimating = true; that._animationLoop(); } - else - if(this.isAnimating && !this._isaCanvasAnimating()) { + else if(this.isAnimating && !this._isaCanvasAnimating()) { this.isAnimating = false; this.frame.lastTime = 0; } @@ -744,15 +743,11 @@ Kinetic.Node.prototype = { } } - if(obj.parent.className !== 'Stage') { + // simulate event bubbling + if(!evt.cancelBubble && obj.parent.className !== 'Stage') { handle(obj.parent); } } - /* - * simulate bubbling by handling node events - * first, followed by group events, followed - * by layer events - */ handle(this); } }; @@ -1151,8 +1146,7 @@ Kinetic.Stage.prototype = { return true; } // handle onmouseup & onclick - else - if(this.mouseUp) { + else if(this.mouseUp) { this.mouseUp = false; shape._handleEvents('onmouseup', evt); @@ -1178,8 +1172,7 @@ Kinetic.Stage.prototype = { } // handle touchstart - else - if(this.touchStart) { + else if(this.touchStart) { this.touchStart = false; shape._handleEvents('touchstart', evt); @@ -1199,23 +1192,20 @@ Kinetic.Stage.prototype = { } // handle touchend - else - if(this.touchEnd) { + else if(this.touchEnd) { this.touchEnd = false; shape._handleEvents('touchend', evt); return true; } // handle touchmove - else - if(!isDragging && el.touchmove) { + else if(!isDragging && el.touchmove) { shape._handleEvents('touchmove', evt); return true; } //this condition is used to identify a new target shape. - else - if(!isDragging && (!this.targetShape || (!this.targetFound && shape.id !== this.targetShape.id))) { + else if(!isDragging && (!this.targetShape || (!this.targetFound && shape.id !== this.targetShape.id))) { /* * check if old target has an onmouseout event listener */ @@ -1236,15 +1226,13 @@ Kinetic.Stage.prototype = { } // handle onmousemove - else - if(!isDragging) { + else if(!isDragging) { shape._handleEvents('onmousemove', evt); return true; } } // handle mouseout condition - else - if(!isDragging && this.targetShape && this.targetShape.id === shape.id) { + else if(!isDragging && this.targetShape && this.targetShape.id === shape.id) { this.targetShape = undefined; shape._handleEvents('onmouseout', evt); return true; @@ -1268,7 +1256,7 @@ Kinetic.Stage.prototype = { } } else { - this._traverseChildren(child); + this._traverseChildren(child, evt); } } @@ -1669,8 +1657,7 @@ Kinetic.Shape = function(config) { if(config.stroke === undefined) { config.stroke = 'black'; } - else - if(config.strokeWidth === undefined) { + else if(config.strokeWidth === undefined) { config.strokeWidth = 2; } } @@ -2060,6 +2047,7 @@ Kinetic.Polygon.prototype = { // extend Shape Kinetic.GlobalObject.extend(Kinetic.Polygon, Kinetic.Shape); + /////////////////////////////////////////////////////////////////////// // RegularPolygon /////////////////////////////////////////////////////////////////////// @@ -2133,6 +2121,7 @@ Kinetic.RegularPolygon.prototype = { // extend Shape Kinetic.GlobalObject.extend(Kinetic.RegularPolygon, Kinetic.Shape); + /////////////////////////////////////////////////////////////////////// // Star /////////////////////////////////////////////////////////////////////// @@ -2206,6 +2195,7 @@ Kinetic.Star.prototype = { }; // extend Shape Kinetic.GlobalObject.extend(Kinetic.Star, Kinetic.Shape); + /////////////////////////////////////////////////////////////////////// // Text /////////////////////////////////////////////////////////////////////// @@ -2223,8 +2213,7 @@ Kinetic.Text = function(config) { if(config.textStroke === undefined) { config.textStroke = 'black'; } - else - if(config.textStrokeWidth === undefined) { + else if(config.textStrokeWidth === undefined) { config.textStrokeWidth = 2; } } @@ -2288,8 +2277,7 @@ Kinetic.Text = function(config) { if(this.textStroke === undefined) { this.textStroke = 'black'; } - else - if(this.textStrokeWidth === undefined) { + else if(this.textStrokeWidth === undefined) { this.textStrokeWidth = 2; } context.lineWidth = this.textStrokeWidth; diff --git a/src/GlobalObject.js b/src/GlobalObject.js index 31c09821..b35b6b6e 100644 --- a/src/GlobalObject.js +++ b/src/GlobalObject.js @@ -158,8 +158,7 @@ Kinetic.GlobalObject = { this.isAnimating = true; that._animationLoop(); } - else - if(this.isAnimating && !this._isaCanvasAnimating()) { + else if(this.isAnimating && !this._isaCanvasAnimating()) { this.isAnimating = false; this.frame.lastTime = 0; } diff --git a/src/Node.js b/src/Node.js index 7c1d89c8..63a34358 100644 --- a/src/Node.js +++ b/src/Node.js @@ -541,15 +541,11 @@ Kinetic.Node.prototype = { } } - if(obj.parent.className !== 'Stage') { + // simulate event bubbling + if(!evt.cancelBubble && obj.parent.className !== 'Stage') { handle(obj.parent); } } - /* - * simulate bubbling by handling node events - * first, followed by group events, followed - * by layer events - */ handle(this); } }; diff --git a/src/Shape.js b/src/Shape.js index 4dae915d..93a8242a 100644 --- a/src/Shape.js +++ b/src/Shape.js @@ -16,8 +16,7 @@ Kinetic.Shape = function(config) { if(config.stroke === undefined) { config.stroke = 'black'; } - else - if(config.strokeWidth === undefined) { + else if(config.strokeWidth === undefined) { config.strokeWidth = 2; } } diff --git a/src/Stage.js b/src/Stage.js index 610e8494..d381048b 100644 --- a/src/Stage.js +++ b/src/Stage.js @@ -285,8 +285,7 @@ Kinetic.Stage.prototype = { return true; } // handle onmouseup & onclick - else - if(this.mouseUp) { + else if(this.mouseUp) { this.mouseUp = false; shape._handleEvents('onmouseup', evt); @@ -312,8 +311,7 @@ Kinetic.Stage.prototype = { } // handle touchstart - else - if(this.touchStart) { + else if(this.touchStart) { this.touchStart = false; shape._handleEvents('touchstart', evt); @@ -333,23 +331,20 @@ Kinetic.Stage.prototype = { } // handle touchend - else - if(this.touchEnd) { + else if(this.touchEnd) { this.touchEnd = false; shape._handleEvents('touchend', evt); return true; } // handle touchmove - else - if(!isDragging && el.touchmove) { + else if(!isDragging && el.touchmove) { shape._handleEvents('touchmove', evt); return true; } //this condition is used to identify a new target shape. - else - if(!isDragging && (!this.targetShape || (!this.targetFound && shape.id !== this.targetShape.id))) { + else if(!isDragging && (!this.targetShape || (!this.targetFound && shape.id !== this.targetShape.id))) { /* * check if old target has an onmouseout event listener */ @@ -370,15 +365,13 @@ Kinetic.Stage.prototype = { } // handle onmousemove - else - if(!isDragging) { + else if(!isDragging) { shape._handleEvents('onmousemove', evt); return true; } } // handle mouseout condition - else - if(!isDragging && this.targetShape && this.targetShape.id === shape.id) { + else if(!isDragging && this.targetShape && this.targetShape.id === shape.id) { this.targetShape = undefined; shape._handleEvents('onmouseout', evt); return true; @@ -402,7 +395,7 @@ Kinetic.Stage.prototype = { } } else { - this._traverseChildren(child); + this._traverseChildren(child, evt); } } diff --git a/src/shapes/Polygon.js b/src/shapes/Polygon.js index d9314e5c..af4c59b4 100644 --- a/src/shapes/Polygon.js +++ b/src/shapes/Polygon.js @@ -41,4 +41,4 @@ Kinetic.Polygon.prototype = { }; // extend Shape -Kinetic.GlobalObject.extend(Kinetic.Polygon, Kinetic.Shape); \ No newline at end of file +Kinetic.GlobalObject.extend(Kinetic.Polygon, Kinetic.Shape); diff --git a/src/shapes/RegularPolygon.js b/src/shapes/RegularPolygon.js index 649bc90a..ec642064 100644 --- a/src/shapes/RegularPolygon.js +++ b/src/shapes/RegularPolygon.js @@ -70,4 +70,4 @@ Kinetic.RegularPolygon.prototype = { }; // extend Shape -Kinetic.GlobalObject.extend(Kinetic.RegularPolygon, Kinetic.Shape); \ No newline at end of file +Kinetic.GlobalObject.extend(Kinetic.RegularPolygon, Kinetic.Shape); diff --git a/src/shapes/Star.js b/src/shapes/Star.js index 918af987..f38b26ea 100644 --- a/src/shapes/Star.js +++ b/src/shapes/Star.js @@ -70,4 +70,4 @@ Kinetic.Star.prototype = { } }; // extend Shape -Kinetic.GlobalObject.extend(Kinetic.Star, Kinetic.Shape); \ No newline at end of file +Kinetic.GlobalObject.extend(Kinetic.Star, Kinetic.Shape); diff --git a/src/shapes/Text.js b/src/shapes/Text.js index 86f22370..e6f05fc7 100644 --- a/src/shapes/Text.js +++ b/src/shapes/Text.js @@ -15,8 +15,7 @@ Kinetic.Text = function(config) { if(config.textStroke === undefined) { config.textStroke = 'black'; } - else - if(config.textStrokeWidth === undefined) { + else if(config.textStrokeWidth === undefined) { config.textStrokeWidth = 2; } } @@ -80,8 +79,7 @@ Kinetic.Text = function(config) { if(this.textStroke === undefined) { this.textStroke = 'black'; } - else - if(this.textStrokeWidth === undefined) { + else if(this.textStrokeWidth === undefined) { this.textStrokeWidth = 2; } context.lineWidth = this.textStrokeWidth; diff --git a/tests/js/functionalTests.js b/tests/js/functionalTests.js index 0d7a8ef9..73db6c48 100644 --- a/tests/js/functionalTests.js +++ b/tests/js/functionalTests.js @@ -1,5 +1,5 @@ Test.prototype.tests = { - "TRANSITION - transition position and rotation": function(containerId) { + 'TRANSITION - transition position and rotation': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var rect = new Kinetic.Rect({ @@ -7,8 +7,8 @@ Test.prototype.tests = { y: 100, width: 100, height: 50, - fill: "green", - stroke: "black", + fill: 'green', + stroke: 'black', strokeWidth: 4 }); @@ -22,7 +22,7 @@ Test.prototype.tests = { duration: 1 }); }, - "TRANSITION - transition position and rotation with two transitions": function(containerId) { + 'TRANSITION - transition position and rotation with two transitions': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var rect = new Kinetic.Rect({ @@ -30,8 +30,8 @@ Test.prototype.tests = { y: 100, width: 100, height: 50, - fill: "green", - stroke: "black", + fill: 'green', + stroke: 'black', strokeWidth: 4 }); @@ -49,7 +49,7 @@ Test.prototype.tests = { duration: 2 }); }, - "ANIMATION - run animation": function(containerId) { + 'ANIMATION - run animation': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var rect = new Kinetic.Rect({ @@ -57,8 +57,8 @@ Test.prototype.tests = { y: 100, width: 100, height: 50, - fill: "green", - stroke: "black", + fill: 'green', + stroke: 'black', strokeWidth: 4 }); @@ -77,15 +77,15 @@ Test.prototype.tests = { stage.start(); }, - "EVENTS - mousedown mouseup mouseover mouseout click dblclick / touchstart touchend dbltap": function(containerId) { + 'EVENTS - mousedown mouseup mouseover mouseout click dblclick / touchstart touchend dbltap': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ x: stage.width / 2, y: stage.height / 2, radius: 70, - fill: "red", - stroke: "black", + fill: 'red', + stroke: 'black', strokeWidth: 4, draggable: true }); @@ -129,7 +129,7 @@ Test.prototype.tests = { layer.add(circle); stage.add(layer); }, - "EVENTS - modify fill stroke and stroke width on hover with circle": function(containerId) { + 'EVENTS - modify fill stroke and stroke width on hover with circle': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ @@ -137,20 +137,20 @@ Test.prototype.tests = { y: stage.height / 2, radius: 70, strokeWidth: 4, - fill: "red", - stroke: "black" + fill: 'red', + stroke: 'black' }); - circle.on("mouseover", function() { - this.setFill("yellow"); - this.setStroke("purple"); + circle.on('mouseover', function() { + this.setFill('yellow'); + this.setStroke('purple'); this.setStrokeWidth(20); layer.draw(); }); - circle.on("mouseout", function() { - this.setFill("red"); - this.setStroke("black"); + circle.on('mouseout', function() { + this.setFill('red'); + this.setStroke('black'); this.setStrokeWidth(4); layer.draw(); }); @@ -158,7 +158,7 @@ Test.prototype.tests = { layer.add(circle); stage.add(layer); }, - "EVENTS - modify fill stroke and stroke width on hover with circle with star": function(containerId) { + 'EVENTS - modify fill stroke and stroke width on hover with circle with star': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); @@ -168,22 +168,22 @@ Test.prototype.tests = { points: 10, innerRadius: 40, outerRadius: 70, - fill: "green", - stroke: "blue", + fill: 'green', + stroke: 'blue', strokeWidth: 5, - name: "foobar" + name: 'foobar' }); - star.on("mouseover", function() { - this.setFill("yellow"); - this.setStroke("purple"); + star.on('mouseover', function() { + this.setFill('yellow'); + this.setStroke('purple'); this.setStrokeWidth(20); layer.draw(); }); - star.on("mouseout", function() { - this.setFill("green"); - this.setStroke("blue"); + star.on('mouseout', function() { + this.setFill('green'); + this.setStroke('blue'); this.setStrokeWidth(5); layer.draw(); }); @@ -191,7 +191,7 @@ Test.prototype.tests = { layer.add(star); stage.add(layer); }, - "EVENTS - modify fill stroke and stroke width on hover with circle with image": function(containerId) { + 'EVENTS - modify fill stroke and stroke width on hover with circle with image': function(containerId) { var imageObj = new Image(); imageObj.onload = function() { var stage = new Kinetic.Stage(containerId, 578, 200); @@ -202,14 +202,14 @@ Test.prototype.tests = { image: imageObj }); - darth.on("mouseover", function() { - this.setFill("yellow"); - this.setStroke("purple"); + darth.on('mouseover', function() { + this.setFill('yellow'); + this.setStroke('purple'); this.setStrokeWidth(20); layer.draw(); }); - darth.on("mouseout", function() { + darth.on('mouseout', function() { this.setFill(undefined); this.setStroke(undefined); this.setStrokeWidth(0); @@ -219,9 +219,9 @@ Test.prototype.tests = { layer.add(darth); stage.add(layer); }; - imageObj.src = "../darth-vader.jpg"; + imageObj.src = '../darth-vader.jpg'; }, - "EVENTS - drag events click": function(containerId) { + 'EVENTS - drag events click': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ @@ -229,8 +229,8 @@ Test.prototype.tests = { y: stage.height / 2, radius: 70, strokeWidth: 4, - fill: "red", - stroke: "black" + fill: 'red', + stroke: 'black' }); circle.draggable(true); @@ -254,7 +254,7 @@ Test.prototype.tests = { layer.add(circle); stage.add(layer); }, - "EVENTS - isDragging": function(containerId) { + 'EVENTS - isDragging': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ @@ -262,37 +262,37 @@ Test.prototype.tests = { y: stage.height / 2, radius: 70, strokeWidth: 4, - fill: "red", - stroke: "black" + fill: 'red', + stroke: 'black' }); //log('not dragging yet before draggable, isDragging: ' + circle.isDragging()); - test(circle.isDragging() === false, "isDragging() should be false"); + test(circle.isDragging() === false, 'isDragging() should be false'); circle.draggable(true); //log('not dragging yet after draggable, isDragging: ' + circle.isDragging()); - test(circle.isDragging() === false, "isDragging() should be false"); + test(circle.isDragging() === false, 'isDragging() should be false'); circle.on('dragstart', function() { log('dragstart, isDragging: ' + this.isDragging()); - test(circle.isDragging() === true, "isDragging() should be true"); + test(circle.isDragging() === true, 'isDragging() should be true'); }); circle.on('dragmove', function() { log('dragmove, isDragging: ' + this.isDragging()); - test(circle.isDragging() === true, "isDragging() should be true"); + test(circle.isDragging() === true, 'isDragging() should be true'); }); circle.on('dragend', function() { log('dragend, isDragging: ' + this.isDragging()); - test(circle.isDragging() === false, "isDragging() should be false"); + test(circle.isDragging() === false, 'isDragging() should be false'); }); layer.add(circle); stage.add(layer); }, - "EVENTS - mousemove from shape to another shape in same layer": function(containerId) { + 'EVENTS - mousemove from shape to another shape in same layer': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); @@ -301,14 +301,14 @@ Test.prototype.tests = { y: stage.height / 2, radius: 70, strokeWidth: 4, - fill: "red", - stroke: "black" + fill: 'red', + stroke: 'black' }); - redCircle.on("mouseover", function() { + redCircle.on('mouseover', function() { log('mouseover red circle'); }); - redCircle.on("mouseout", function() { + redCircle.on('mouseout', function() { log('mouseout red circle'); }); var greenCircle = new Kinetic.Circle({ @@ -316,14 +316,14 @@ Test.prototype.tests = { y: stage.height / 2, radius: 70, strokeWidth: 4, - fill: "green", - stroke: "black" + fill: 'green', + stroke: 'black' }); - greenCircle.on("mouseover", function() { + greenCircle.on('mouseover', function() { log('mouseover green circle'); }); - greenCircle.on("mouseout", function() { + greenCircle.on('mouseout', function() { log('mouseout green circle'); }); @@ -332,7 +332,7 @@ Test.prototype.tests = { stage.add(layer); }, - "EVENTS - mousemove from shape in one layer to shape in another layer": function(containerId) { + 'EVENTS - mousemove from shape in one layer to shape in another layer': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var redLayer = new Kinetic.Layer(); var greenLayer = new Kinetic.Layer(); @@ -342,14 +342,14 @@ Test.prototype.tests = { y: stage.height / 2, radius: 70, strokeWidth: 4, - fill: "red", - stroke: "black" + fill: 'red', + stroke: 'black' }); - redCircle.on("mouseover", function() { + redCircle.on('mouseover', function() { log('mouseover red circle'); }); - redCircle.on("mouseout", function() { + redCircle.on('mouseout', function() { log('mouseout red circle'); }); var greenCircle = new Kinetic.Circle({ @@ -357,14 +357,14 @@ Test.prototype.tests = { y: stage.height / 2, radius: 70, strokeWidth: 4, - fill: "green", - stroke: "black" + fill: 'green', + stroke: 'black' }); - greenCircle.on("mouseover", function() { + greenCircle.on('mouseover', function() { log('mouseover green circle'); }); - greenCircle.on("mouseout", function() { + greenCircle.on('mouseout', function() { log('mouseout green circle'); }); @@ -374,25 +374,25 @@ Test.prototype.tests = { stage.add(redLayer); stage.add(greenLayer); }, - "EVENTS - event bubbling": function(containerId) { + 'EVENTS - event bubbling': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var group = new Kinetic.Group(); - layer.on("mouseover", function() { + layer.on('mouseover', function() { log('mouseover layer'); //console.log(this); }); - layer.on("mouseout", function() { + layer.on('mouseout', function() { log('mouseout layer'); //console.log(this); }); - group.on("mouseover", function() { + group.on('mouseover', function() { log('mouseover group'); //console.log(this); }); - group.on("mouseout", function() { + group.on('mouseout', function() { log('mouseout group'); //console.log(this); }); @@ -401,15 +401,15 @@ Test.prototype.tests = { y: stage.height / 2, radius: 80, strokeWidth: 4, - fill: "red", - stroke: "black" + fill: 'red', + stroke: 'black' }); - redCircle.on("mouseover", function() { + redCircle.on('mouseover', function() { log('mouseover red circle'); //console.log(this); }); - redCircle.on("mouseout", function() { + redCircle.on('mouseout', function() { log('mouseout red circle'); //console.log(this); }); @@ -418,15 +418,15 @@ Test.prototype.tests = { y: stage.height / 2, radius: 40, strokeWidth: 4, - fill: "green", - stroke: "black" + fill: 'green', + stroke: 'black' }); - greenCircle.on("mouseover", function() { + greenCircle.on('mouseover', function() { log('mouseover green circle'); //console.log(this); }); - greenCircle.on("mouseout", function() { + greenCircle.on('mouseout', function() { log('mouseout green circle'); //console.log(this); }); @@ -437,15 +437,47 @@ Test.prototype.tests = { layer.add(group); stage.add(layer); }, - "DRAG AND DROP - draggable true": function(containerId) { + 'EVENTS - cancel event bubbling (only the red circle should fire click event)': function(containerId) { + var stage = new Kinetic.Stage(containerId, 578, 200); + var layer = new Kinetic.Layer(); + var group = new Kinetic.Group(); + + layer.on('click', function() { + log('click layer'); + //console.log(this); + }); + group.on('click', function() { + log('click group'); + //console.log(this); + }); + + var redCircle = new Kinetic.Circle({ + x: stage.width / 2, + y: stage.height / 2, + radius: 80, + strokeWidth: 4, + fill: 'red', + stroke: 'black' + }); + + redCircle.on('click', function(evt) { + log('click red circle'); + evt.cancelBubble = true; + }); + + group.add(redCircle); + layer.add(group); + stage.add(layer); + }, + 'DRAG AND DROP - draggable true': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ x: stage.width / 2, y: stage.height / 2, radius: 70, - fill: "red", - stroke: "black", + fill: 'red', + stroke: 'black', strokeWidth: 4 }); @@ -454,15 +486,15 @@ Test.prototype.tests = { layer.add(circle); stage.add(layer); }, - "DRAG AND DROP - draggable true false": function(containerId) { + 'DRAG AND DROP - draggable true false': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ x: stage.width / 2, y: stage.height / 2, radius: 70, - fill: "red", - stroke: "black", + fill: 'red', + stroke: 'black', strokeWidth: 4 }); @@ -473,15 +505,15 @@ Test.prototype.tests = { circle.draggable(false); }, - "DRAG AND DROP - scale stage after add layer then drag and drop shape": function(containerId) { + 'DRAG AND DROP - scale stage after add layer then drag and drop shape': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ x: stage.width / 2, y: stage.height / 2, radius: 70, - fill: "red", - stroke: "black", + fill: 'red', + stroke: 'black', strokeWidth: 4 }); @@ -494,15 +526,15 @@ Test.prototype.tests = { stage.draw(); }, - "DRAG AND DROP - scale stage before add shape then drag and drop shape": function(containerId) { + 'DRAG AND DROP - scale stage before add shape then drag and drop shape': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ x: stage.width / 2, y: stage.height / 2, radius: 70, - fill: "red", - stroke: "black", + fill: 'red', + stroke: 'black', strokeWidth: 4 }); @@ -512,15 +544,15 @@ Test.prototype.tests = { layer.add(circle); stage.add(layer); }, - "DRAG AND DROP - set stage scale to 1.5 after add layer then drag and drop shape": function(containerId) { + 'DRAG AND DROP - set stage scale to 1.5 after add layer then drag and drop shape': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ x: stage.width / 2, y: stage.height / 2, radius: 70, - fill: "red", - stroke: "black", + fill: 'red', + stroke: 'black', strokeWidth: 4 }); @@ -533,15 +565,15 @@ Test.prototype.tests = { stage.draw(); }, - "DRAG AND DROP - set stage scale to 1.5 before add layer then drag and drop shape": function(containerId) { + 'DRAG AND DROP - set stage scale to 1.5 before add layer then drag and drop shape': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ x: stage.width / 2, y: stage.height / 2, radius: 70, - fill: "red", - stroke: "black", + fill: 'red', + stroke: 'black', strokeWidth: 4 }); @@ -552,15 +584,15 @@ Test.prototype.tests = { layer.add(circle); stage.add(layer); }, - "DRAG AND DROP - check that green events are ignored when dragging red circle": function(containerId) { + 'DRAG AND DROP - check that green events are ignored when dragging red circle': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var circle1 = new Kinetic.Circle({ x: stage.width / 2, y: stage.height / 2, radius: 70, - fill: "red", - stroke: "black", + fill: 'red', + stroke: 'black', strokeWidth: 4 }); @@ -568,81 +600,81 @@ Test.prototype.tests = { x: stage.width / 2 + 50, y: stage.height / 2, radius: 70, - fill: "green", - stroke: "black", + fill: 'green', + stroke: 'black', strokeWidth: 4 }); circle1.draggable(true); - circle2.on("mouseover", function() { - log("mouseover green circle"); + circle2.on('mouseover', function() { + log('mouseover green circle'); }); layer.add(circle1); layer.add(circle2); stage.add(layer); }, - "DRAG AND DROP - drag and drop constrianed horiztonally": function(containerId) { + 'DRAG AND DROP - drag and drop constrianed horiztonally': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ x: stage.width / 2, y: stage.height / 2, radius: 70, - fill: "red", - stroke: "black", + fill: 'red', + stroke: 'black', strokeWidth: 4, draggable: true, - dragConstraint: "horizontal" + dragConstraint: 'horizontal' }); layer.add(circle); stage.add(layer); }, - "DRAG AND DROP - drag and drop constrianed vertically": function(containerId) { + 'DRAG AND DROP - drag and drop constrianed vertically': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ x: stage.width / 2, y: stage.height / 2, radius: 70, - fill: "red", - stroke: "black", + fill: 'red', + stroke: 'black', strokeWidth: 4, draggable: true, - dragConstraint: "vertical" + dragConstraint: 'vertical' }); layer.add(circle); stage.add(layer); }, - "DRAG AND DROP - drag and drop with explicit no constraint": function(containerId) { + 'DRAG AND DROP - drag and drop with explicit no constraint': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ x: stage.width / 2, y: stage.height / 2, radius: 70, - fill: "red", - stroke: "black", + fill: 'red', + stroke: 'black', strokeWidth: 4, draggable: true, - dragConstraint: "none" + dragConstraint: 'none' }); layer.add(circle); stage.add(layer); }, - "DRAG AND DROP - drag and drop with left bounds": function(containerId) { + 'DRAG AND DROP - drag and drop with left bounds': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ x: stage.width / 2, y: stage.height / 2, radius: 70, - fill: "red", - stroke: "black", + fill: 'red', + stroke: 'black', strokeWidth: 4, draggable: true, dragBounds: { @@ -653,15 +685,15 @@ Test.prototype.tests = { layer.add(circle); stage.add(layer); }, - "DRAG AND DROP - drag and drop with right bounds": function(containerId) { + 'DRAG AND DROP - drag and drop with right bounds': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ x: stage.width / 2, y: stage.height / 2, radius: 70, - fill: "red", - stroke: "black", + fill: 'red', + stroke: 'black', strokeWidth: 4, draggable: true, dragBounds: { @@ -672,15 +704,15 @@ Test.prototype.tests = { layer.add(circle); stage.add(layer); }, - "DRAG AND DROP - drag and drop with top bounds": function(containerId) { + 'DRAG AND DROP - drag and drop with top bounds': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ x: stage.width / 2, y: stage.height / 2, radius: 70, - fill: "red", - stroke: "black", + fill: 'red', + stroke: 'black', strokeWidth: 4, draggable: true, dragBounds: { @@ -691,15 +723,15 @@ Test.prototype.tests = { layer.add(circle); stage.add(layer); }, - "DRAG AND DROP - drag and drop with bottom bounds": function(containerId) { + 'DRAG AND DROP - drag and drop with bottom bounds': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ x: stage.width / 2, y: stage.height / 2, radius: 70, - fill: "red", - stroke: "black", + fill: 'red', + stroke: 'black', strokeWidth: 4, draggable: true, dragBounds: { @@ -710,15 +742,15 @@ Test.prototype.tests = { layer.add(circle); stage.add(layer); }, - "DRAG AND DROP - drag and drop with full rect bounds": function(containerId) { + 'DRAG AND DROP - drag and drop with full rect bounds': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ x: stage.width / 2, y: stage.height / 2, radius: 70, - fill: "red", - stroke: "black", + fill: 'red', + stroke: 'black', strokeWidth: 4, draggable: true, dragBounds: { @@ -732,20 +764,20 @@ Test.prototype.tests = { layer.add(circle); stage.add(layer); }, - "DRAG AND DROP - drag and drop shape inside scrollable div": function(containerId) { + 'DRAG AND DROP - drag and drop shape inside scrollable div': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 400); // make container scrollable var container = stage.getContainer(); - container.style.overflow = "auto"; + container.style.overflow = 'auto'; var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ x: stage.width / 2, y: 100, radius: 50, - fill: "blue", - stroke: "black", + fill: 'blue', + stroke: 'black', strokeWidth: 4, draggable: true }); diff --git a/tests/js/unitTests.js b/tests/js/unitTests.js index 12458a93..015e6668 100644 --- a/tests/js/unitTests.js +++ b/tests/js/unitTests.js @@ -3,14 +3,14 @@ Test.prototype.tests = { // STAGE tests //////////////////////////////////////////////////////////////////////// - "STAGE - instantiate stage with id": function(containerId) { + 'STAGE - instantiate stage with id': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); }, - "STAGE - instantiate stage with dom element": function(containerId) { + 'STAGE - instantiate stage with dom element': function(containerId) { var containerDom = document.getElementById(containerId); var stage = new Kinetic.Stage(containerDom, 578, 200); }, - "STAGE - add shape then stage then layer": function(containerId) { + 'STAGE - add shape then stage then layer': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var group = new Kinetic.Group(); @@ -18,10 +18,10 @@ Test.prototype.tests = { x: stage.width / 2, y: stage.height / 2, radius: 70, - fill: "green", - stroke: "black", + fill: 'green', + stroke: 'black', strokeWidth: 4, - name: "myCircle" + name: 'myCircle' }); group.add(circle); @@ -29,7 +29,7 @@ Test.prototype.tests = { layer.add(group); layer.draw(); }, - "STAGE - add layer then group then shape": function(containerId) { + 'STAGE - add layer then group then shape': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var group = new Kinetic.Group(); @@ -37,10 +37,10 @@ Test.prototype.tests = { x: stage.width / 2, y: stage.height / 2, radius: 70, - fill: "green", - stroke: "black", + fill: 'green', + stroke: 'black', strokeWidth: 4, - name: "myCircle" + name: 'myCircle' }); stage.add(layer); @@ -48,15 +48,15 @@ Test.prototype.tests = { group.add(circle); layer.draw(); }, - "STAGE - scale stage after add layer": function(containerId) { + 'STAGE - scale stage after add layer': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ x: stage.width / 2, y: stage.height / 2, radius: 70, - fill: "green", - stroke: "black", + fill: 'green', + stroke: 'black', strokeWidth: 4 }); @@ -67,15 +67,15 @@ Test.prototype.tests = { stage.draw(); }, - "STAGE - scale stage before add shape": function(containerId) { + 'STAGE - scale stage before add shape': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ x: stage.width / 2, y: stage.height / 2, radius: 70, - fill: "green", - stroke: "black", + fill: 'green', + stroke: 'black', strokeWidth: 4 }); @@ -83,7 +83,7 @@ Test.prototype.tests = { layer.add(circle); stage.add(layer); }, - "STAGE - scale stage with no shapes": function(containerId) { + 'STAGE - scale stage with no shapes': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); @@ -92,29 +92,29 @@ Test.prototype.tests = { stage.draw(); }, - "STAGE - remove layer with shape": function(containerId) { + 'STAGE - remove layer with shape': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ x: stage.width / 2, y: stage.height / 2, radius: 70, - fill: "green", - stroke: "black", + fill: 'green', + stroke: 'black', strokeWidth: 4, - name: "myCircle" + name: 'myCircle' }); layer.add(circle); stage.add(layer); - test(stage.children.length === 1, "stage should have 1 children"); + test(stage.children.length === 1, 'stage should have 1 children'); stage.remove(layer); - test(stage.children.length === 0, "stage should have 0 children"); + test(stage.children.length === 0, 'stage should have 0 children'); }, - "STAGE - remove layer with no shapes": function(containerId) { + 'STAGE - remove layer with no shapes': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); stage.add(layer); @@ -124,20 +124,20 @@ Test.prototype.tests = { // LAYERS tests //////////////////////////////////////////////////////////////////////// - "LAYERS - add layer": function(containerId) { + 'LAYERS - add layer': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); stage.add(layer); }, - "LAYERS - remove all children from layer": function(containerId) { + 'LAYERS - remove all children from layer': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var circle1 = new Kinetic.Circle({ x: stage.width / 2, y: stage.height / 2, radius: 70, - fill: "green", - stroke: "black", + fill: 'green', + stroke: 'black', strokeWidth: 4 }); @@ -145,8 +145,8 @@ Test.prototype.tests = { x: stage.width / 2, y: stage.height / 2, radius: 70, - fill: "green", - stroke: "black", + fill: 'green', + stroke: 'black', strokeWidth: 4 }); @@ -154,21 +154,21 @@ Test.prototype.tests = { layer.add(circle1); stage.add(layer); - test(layer.children.length === 2, "layer should have 2 children"); + test(layer.children.length === 2, 'layer should have 2 children'); layer.removeChildren(); - test(layer.children.length === 0, "layer should have 0 children"); + test(layer.children.length === 0, 'layer should have 0 children'); }, - "LAYERS - hide layer": function(containerId) { + 'LAYERS - hide layer': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ x: stage.width / 2, y: stage.height / 2, radius: 70, - fill: "green", - stroke: "black", + fill: 'green', + stroke: 'black', strokeWidth: 4 }); @@ -182,7 +182,7 @@ Test.prototype.tests = { // GROUPS tests //////////////////////////////////////////////////////////////////////// - "GROUPS - add group": function(containerId) { + 'GROUPS - add group': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var group = new Kinetic.Group(); @@ -191,8 +191,8 @@ Test.prototype.tests = { x: stage.width / 2, y: stage.height / 2, radius: 70, - fill: "green", - stroke: "black", + fill: 'green', + stroke: 'black', strokeWidth: 4 }); @@ -204,7 +204,7 @@ Test.prototype.tests = { // SHAPES tests //////////////////////////////////////////////////////////////////////// - "SHAPES - add rect": function(containerId) { + 'SHAPES - add rect': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var rect = new Kinetic.Rect({ @@ -212,8 +212,8 @@ Test.prototype.tests = { y: 100, width: 100, height: 50, - fill: "green", - stroke: "black", + fill: 'green', + stroke: 'black', strokeWidth: 4, centerOffset: { x: 50 @@ -233,15 +233,15 @@ Test.prototype.tests = { }); //stage.start(); }, - "SHAPES - add circle": function(containerId) { + 'SHAPES - add circle': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ x: stage.width / 2, y: stage.height / 2, radius: 70, - fill: "green", - stroke: "black", + fill: 'green', + stroke: 'black', strokeWidth: 4, centerOffset: { x: 0, @@ -261,24 +261,24 @@ Test.prototype.tests = { }); //stage.start(); }, - "SHAPES - set fill after instantiation": function(containerId) { + 'SHAPES - set fill after instantiation': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ x: stage.width / 2, y: stage.height / 2, radius: 70, - fill: "green", - stroke: "black", + fill: 'green', + stroke: 'black', strokeWidth: 4 }); layer.add(circle); - circle.setFill("blue"); + circle.setFill('blue'); stage.add(layer); }, - "SHAPES - add image": function(containerId) { + 'SHAPES - add image': function(containerId) { var imageObj = new Image(); imageObj.onload = function() { var stage = new Kinetic.Stage(containerId, 578, 200); @@ -303,9 +303,9 @@ Test.prototype.tests = { }); //stage.start(); }; - imageObj.src = "../darth-vader.jpg"; + imageObj.src = '../darth-vader.jpg'; }, - "SHAPES - add polygon": function(containerId) { + 'SHAPES - add polygon': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); @@ -331,8 +331,8 @@ Test.prototype.tests = { var poly = new Kinetic.Polygon({ points: points, - fill: "green", - stroke: "blue", + fill: 'green', + stroke: 'blue', strokeWidth: 5, centerOffset: { x: 300, @@ -349,7 +349,7 @@ Test.prototype.tests = { }); //stage.start(); }, - "SHAPES - add regular polygon triangle": function(containerId) { + 'SHAPES - add regular polygon triangle': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); @@ -358,10 +358,10 @@ Test.prototype.tests = { y: 100, sides: 3, radius: 50, - fill: "green", - stroke: "blue", + fill: 'green', + stroke: 'blue', strokeWidth: 5, - name: "foobar", + name: 'foobar', centerOffset: { y: -50 } @@ -376,7 +376,7 @@ Test.prototype.tests = { }); //stage.start(); }, - "SHAPES - add regular polygon square": function(containerId) { + 'SHAPES - add regular polygon square': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); @@ -385,16 +385,16 @@ Test.prototype.tests = { y: 100, sides: 4, radius: 50, - fill: "green", - stroke: "blue", + fill: 'green', + stroke: 'blue', strokeWidth: 5, - name: "foobar" + name: 'foobar' }); layer.add(poly); stage.add(layer); }, - "SHAPES - add regular polygon pentagon": function(containerId) { + 'SHAPES - add regular polygon pentagon': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); @@ -403,16 +403,16 @@ Test.prototype.tests = { y: 100, sides: 5, radius: 50, - fill: "green", - stroke: "blue", + fill: 'green', + stroke: 'blue', strokeWidth: 5, - name: "foobar" + name: 'foobar' }); layer.add(poly); stage.add(layer); }, - "SHAPES - add regular polygon octogon": function(containerId) { + 'SHAPES - add regular polygon octogon': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); @@ -421,16 +421,16 @@ Test.prototype.tests = { y: 100, sides: 8, radius: 50, - fill: "green", - stroke: "blue", + fill: 'green', + stroke: 'blue', strokeWidth: 5, - name: "foobar" + name: 'foobar' }); layer.add(poly); stage.add(layer); }, - "SHAPES - add 5 point star": function(containerId) { + 'SHAPES - add 5 point star': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); @@ -440,10 +440,10 @@ Test.prototype.tests = { points: 5, innerRadius: 40, outerRadius: 70, - fill: "green", - stroke: "blue", + fill: 'green', + stroke: 'blue', strokeWidth: 5, - name: "foobar", + name: 'foobar', centerOffset: { y: -70 }, @@ -462,7 +462,7 @@ Test.prototype.tests = { }); //stage.start(); }, - "SHAPES - add stroke rect": function(containerId) { + 'SHAPES - add stroke rect': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var rect = new Kinetic.Rect({ @@ -470,14 +470,14 @@ Test.prototype.tests = { y: 100, width: 100, height: 50, - stroke: "green", + stroke: 'green', strokeWidth: 4 }); layer.add(rect); stage.add(layer); }, - "SHAPES - use default stroke": function(containerId) { + 'SHAPES - use default stroke': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var rect = new Kinetic.Rect({ @@ -491,9 +491,9 @@ Test.prototype.tests = { layer.add(rect); stage.add(layer); - test(rect.stroke === "black", "stroke should be black"); + test(rect.stroke === 'black', 'stroke should be black'); }, - "SHAPES - use default stroke width": function(containerId) { + 'SHAPES - use default stroke width': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var rect = new Kinetic.Rect({ @@ -501,15 +501,15 @@ Test.prototype.tests = { y: 100, width: 100, height: 50, - stroke: "blue" + stroke: 'blue' }); layer.add(rect); stage.add(layer); - test(rect.strokeWidth === 2, "stroke width should be 2"); + test(rect.strokeWidth === 2, 'stroke width should be 2'); }, - "SHAPES - set center offset after instantiation": function(containerId) { + 'SHAPES - set center offset after instantiation': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var rect = new Kinetic.Rect({ @@ -517,7 +517,7 @@ Test.prototype.tests = { y: 100, width: 100, height: 50, - stroke: "blue", + stroke: 'blue', centerOffset: { x: 20, y: 20 @@ -527,16 +527,16 @@ Test.prototype.tests = { layer.add(rect); stage.add(layer); - test(rect.centerOffset.x === 20, "center offset x should be 20"); - test(rect.centerOffset.y === 20, "center offset y should be 20"); + test(rect.centerOffset.x === 20, 'center offset x should be 20'); + test(rect.centerOffset.y === 20, 'center offset y should be 20'); rect.setCenterOffset(40, 40); - test(rect.centerOffset.x === 40, "center offset x should be 40"); - test(rect.centerOffset.y === 40, "center offset y should be 40"); + test(rect.centerOffset.x === 40, 'center offset x should be 40'); + test(rect.centerOffset.y === 40, 'center offset y should be 40'); }, - "SHAPES - custom shape with fill, stroke, and strokeWidth": function(containerId) { + 'SHAPES - custom shape with fill, stroke, and strokeWidth': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var shape = new Kinetic.Shape({ @@ -551,15 +551,15 @@ Test.prototype.tests = { }, x: 200, y: 100, - fill: "green", - stroke: "blue", + fill: 'green', + stroke: 'blue', strokeWidth: 5 }); layer.add(shape); stage.add(layer); }, - "SHAPES - init with position, scale, rotation, then change scale": function(containerId) { + 'SHAPES - init with position, scale, rotation, then change scale': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var rect = new Kinetic.Rect({ @@ -567,8 +567,8 @@ Test.prototype.tests = { y: 100, width: 100, height: 50, - fill: "green", - stroke: "black", + fill: 'green', + stroke: 'black', strokeWidth: 4, scale: { x: 0.5, @@ -577,20 +577,20 @@ Test.prototype.tests = { rotation: 20 * Math.PI / 180 }); - test(rect.getPosition().x == 200, "rect should be at x = 200"); - test(rect.getPosition().y == 100, "rect should be at y = 100"); - test(rect.getScale().x == 0.5, "rect x scale should be 0.5"); - test(rect.getScale().y == 0.5, "rect y scale should be 0.5"); - test(rect.getRotation() == 20 * Math.PI / 180, "rect should rotated by 20 degrees"); + test(rect.getPosition().x == 200, 'rect should be at x = 200'); + test(rect.getPosition().y == 100, 'rect should be at y = 100'); + test(rect.getScale().x == 0.5, 'rect x scale should be 0.5'); + test(rect.getScale().y == 0.5, 'rect y scale should be 0.5'); + test(rect.getRotation() == 20 * Math.PI / 180, 'rect should rotated by 20 degrees'); rect.setScale(2, 0.3); - test(rect.getScale().x == 2, "rect x scale should be 2"); - test(rect.getScale().y == 0.3, "rect y scale should be 0.3"); + test(rect.getScale().x == 2, 'rect x scale should be 2'); + test(rect.getScale().y == 0.3, 'rect y scale should be 0.3'); layer.add(rect); stage.add(layer); }, - "SHAPES - rotation in degrees": function(containerId) { + 'SHAPES - rotation in degrees': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var rect = new Kinetic.Rect({ @@ -598,40 +598,40 @@ Test.prototype.tests = { y: 100, width: 100, height: 50, - fill: "green", - stroke: "black", + fill: 'green', + stroke: 'black', strokeWidth: 4, rotationDeg: 10 }); - test(rect.getRotationDeg() === 10, "rotation should be 10 degrees"); + test(rect.getRotationDeg() === 10, 'rotation should be 10 degrees'); rect.setRotationDeg(20); - test(rect.getRotationDeg() === 20, "rotation should be 20 degrees"); + test(rect.getRotationDeg() === 20, 'rotation should be 20 degrees'); rect.rotateDeg(20); - test(rect.getRotationDeg() === 40, "rotation should be 40 degrees"); + test(rect.getRotationDeg() === 40, 'rotation should be 40 degrees'); layer.add(rect); stage.add(layer); }, - "SHAPES - add text": function(containerId) { + 'SHAPES - add text': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var text = new Kinetic.Text({ x: stage.width / 2, y: stage.height / 2, - stroke: "green", + stroke: 'green', strokeWidth: 5, - fill: "#ddd", - text: "Hello World!", + fill: '#ddd', + text: 'Hello World!', fontSize: 60, - fontFamily: "Calibri", - textFill: "#888", - textStroke: "#333", + fontFamily: 'Calibri', + textFill: '#888', + textStroke: '#333', padding: 10, //draggable: true, - align: "center", - verticalAlign: "middle" + align: 'center', + verticalAlign: 'middle' }); layer.add(text); @@ -646,84 +646,84 @@ Test.prototype.tests = { /* * test getters and setters */ - text.setText("Bye World!"); - test(text.getText() === "Bye World!", "text should be Bye World!"); - test(text.getPadding() === 10, "padding should be 10"); + text.setText('Bye World!'); + test(text.getText() === 'Bye World!', 'text should be Bye World!'); + test(text.getPadding() === 10, 'padding should be 10'); text.setPadding(20); - test(text.getPadding() === 20, "padding should be 20"); + test(text.getPadding() === 20, 'padding should be 20'); layer.draw(); - text.setFontFamily("Arial"); + text.setFontFamily('Arial'); text.setFontSize(30); - text.setAlign("right"); - text.setVerticalAlign("top"); - text.setTextFill("blue"); - text.setTextStroke("red"); + text.setAlign('right'); + text.setVerticalAlign('top'); + text.setTextFill('blue'); + text.setTextStroke('red'); text.setTextStrokeWidth(10); - test(text.getFontFamily() === "Arial", "font family should be Arial"); - test(text.getFontSize() === 30, "text size should be 30"); - test(text.getAlign() === "right", "text align should be right"); - test(text.getVerticalAlign() === "top", "vertical align should be top"); - test(text.getTextFill() === "blue", "text fill should be blue"); - test(text.getTextStroke() === "red", "text stroke should be red"); - test(text.getTextStrokeWidth() === 10, "test stroke width should be 10"); + test(text.getFontFamily() === 'Arial', 'font family should be Arial'); + test(text.getFontSize() === 30, 'text size should be 30'); + test(text.getAlign() === 'right', 'text align should be right'); + test(text.getVerticalAlign() === 'top', 'vertical align should be top'); + test(text.getTextFill() === 'blue', 'text fill should be blue'); + test(text.getTextStroke() === 'red', 'text stroke should be red'); + test(text.getTextStrokeWidth() === 10, 'test stroke width should be 10'); }, - "SHAPES - get shape name": function(containerId) { + 'SHAPES - get shape name': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ x: stage.width / 2, y: stage.height / 2, radius: 70, - fill: "green", - stroke: "black", + fill: 'green', + stroke: 'black', strokeWidth: 4, - name: "myCircle" + name: 'myCircle' }); layer.add(circle); stage.add(layer); - test(circle.getName() == "myCircle", "name should be myCircle"); + test(circle.getName() == 'myCircle', 'name should be myCircle'); }, - "SHAPES - remove shape": function(containerId) { + 'SHAPES - remove shape': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ x: stage.width / 2, y: stage.height / 2, radius: 70, - fill: "green", - stroke: "black", + fill: 'green', + stroke: 'black', strokeWidth: 4, - name: "myCircle" + name: 'myCircle' }); layer.add(circle); stage.add(layer); - test(layer.children.length === 1, "layer should have 1 children"); + test(layer.children.length === 1, 'layer should have 1 children'); layer.remove(circle); - test(layer.children.length === 0, "layer should have 0 children"); - test(layer.getChild("myCircle") === undefined, "shape should be null"); + test(layer.children.length === 0, 'layer should have 0 children'); + test(layer.getChild('myCircle') === undefined, 'shape should be null'); layer.draw(); }, - "NODE - test drag and drop properties and methods": function(containerId) { + 'NODE - test drag and drop properties and methods': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ x: stage.width / 2, y: stage.height / 2, radius: 70, - fill: "green", - stroke: "black", + fill: 'green', + stroke: 'black', strokeWidth: 4, - name: "myCircle" + name: 'myCircle' }); stage.add(layer); @@ -731,18 +731,18 @@ Test.prototype.tests = { layer.draw(); // test defaults - test(circle._draggable === false, "draggable should be false"); - test(circle.dragConstraint === "none", "drag constraint should be none"); - test(circle.dragBounds.left === undefined, "drag left should be undefined"); - test(circle.dragBounds.top === undefined, "drag top should be undefined"); - test(circle.dragBounds.right === undefined, "drag right should be undefined"); - test(circle.dragBounds.bottom === undefined, "drag bottom should be undefined"); - test(circle.getDragConstraint() === "none", "drag constraint should be none"); - test(circle.getDragBounds().bottom === undefined, "drag bottom should be undefined"); + test(circle._draggable === false, 'draggable should be false'); + test(circle.dragConstraint === 'none', 'drag constraint should be none'); + test(circle.dragBounds.left === undefined, 'drag left should be undefined'); + test(circle.dragBounds.top === undefined, 'drag top should be undefined'); + test(circle.dragBounds.right === undefined, 'drag right should be undefined'); + test(circle.dragBounds.bottom === undefined, 'drag bottom should be undefined'); + test(circle.getDragConstraint() === 'none', 'drag constraint should be none'); + test(circle.getDragBounds().bottom === undefined, 'drag bottom should be undefined'); //change properties circle.draggable(true); - circle.setDragConstraint("vertical"); + circle.setDragConstraint('vertical'); circle.setDragBounds({ left: 50, top: 100, @@ -751,33 +751,33 @@ Test.prototype.tests = { }); // test new properties - test(circle._draggable === true, "draggable should be true"); - test(circle.dragConstraint === "vertical", "drag constraint should be vertical"); - test(circle.dragBounds.left === 50, "drag left should be 50"); - test(circle.dragBounds.top === 100, "drag top should be 100"); - test(circle.dragBounds.right === 150, "drag right should be 150"); - test(circle.dragBounds.bottom === 200, "drag bottom should be 200"); - test(circle.getDragConstraint() === "vertical", "drag constraint should be vertical"); - test(circle.getDragBounds().bottom === 200, "drag bottom should be 200"); + test(circle._draggable === true, 'draggable should be true'); + test(circle.dragConstraint === 'vertical', 'drag constraint should be vertical'); + test(circle.dragBounds.left === 50, 'drag left should be 50'); + test(circle.dragBounds.top === 100, 'drag top should be 100'); + test(circle.dragBounds.right === 150, 'drag right should be 150'); + test(circle.dragBounds.bottom === 200, 'drag bottom should be 200'); + test(circle.getDragConstraint() === 'vertical', 'drag constraint should be vertical'); + test(circle.getDragBounds().bottom === 200, 'drag bottom should be 200'); }, - "STAGE - add layer then shape": function(containerId) { + 'STAGE - add layer then shape': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ x: stage.width / 2, y: stage.height / 2, radius: 70, - fill: "green", - stroke: "black", + fill: 'green', + stroke: 'black', strokeWidth: 4, - name: "myCircle" + name: 'myCircle' }); stage.add(layer); layer.add(circle); layer.draw(); }, - "SHAPES - move shape, group, and layer, and then get absolute position": function(containerId) { + 'SHAPES - move shape, group, and layer, and then get absolute position': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var group = new Kinetic.Group(); @@ -786,8 +786,8 @@ Test.prototype.tests = { x: stage.width / 2, y: stage.height / 2, radius: 70, - fill: "green", - stroke: "black", + fill: 'green', + stroke: 'black', strokeWidth: 4 }); @@ -800,26 +800,26 @@ Test.prototype.tests = { layer.setPosition(100, 0); // test relative positions - test(circle.getPosition().x == 100, "circle should be at x = 100"); - test(group.getPosition().x == 100, "group should be at x = 100"); - test(layer.getPosition().x == 100, "layer should be at x = 100"); + test(circle.getPosition().x == 100, 'circle should be at x = 100'); + test(group.getPosition().x == 100, 'group should be at x = 100'); + test(layer.getPosition().x == 100, 'layer should be at x = 100'); // test absolute positions - test(circle.getAbsolutePosition().x == 300, "circle should be at x = 300"); - test(group.getAbsolutePosition().x == 200, "group should be at x = 200"); - test(layer.getAbsolutePosition().x == 100, "layer should be at x = 100"); + test(circle.getAbsolutePosition().x == 300, 'circle should be at x = 300'); + test(group.getAbsolutePosition().x == 200, 'group should be at x = 200'); + test(layer.getAbsolutePosition().x == 100, 'layer should be at x = 100'); layer.draw(); }, - "SHAPES - hide circle": function(containerId) { + 'SHAPES - hide circle': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ x: stage.width / 2, y: stage.height / 2, radius: 70, - fill: "green", - stroke: "black", + fill: 'green', + stroke: 'black', strokeWidth: 4 }); @@ -829,15 +829,15 @@ Test.prototype.tests = { circle.hide(); layer.draw(); }, - "SHAPES - hide show circle": function(containerId) { + 'SHAPES - hide show circle': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ x: stage.width / 2, y: stage.height / 2, radius: 70, - fill: "green", - stroke: "black", + fill: 'green', + stroke: 'black', strokeWidth: 4 }); @@ -850,7 +850,7 @@ Test.prototype.tests = { circle.show(); layer.draw(); }, - "GROUPS - hide group": function(containerId) { + 'GROUPS - hide group': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var group = new Kinetic.Group(); @@ -858,8 +858,8 @@ Test.prototype.tests = { x: stage.width / 2, y: stage.height / 2, radius: 70, - fill: "green", - stroke: "black", + fill: 'green', + stroke: 'black', strokeWidth: 4 }); @@ -870,15 +870,15 @@ Test.prototype.tests = { group.hide(); layer.draw(); }, - "SHAPES - set shape alpha to 0.5": function(containerId) { + 'SHAPES - set shape alpha to 0.5': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ x: stage.width / 2, y: stage.height / 2, radius: 70, - fill: "green", - stroke: "black", + fill: 'green', + stroke: 'black', strokeWidth: 4 }); @@ -886,15 +886,15 @@ Test.prototype.tests = { layer.add(circle); stage.add(layer); }, - "SHAPES - set shape alpha to 0.5 then back to 1": function(containerId) { + 'SHAPES - set shape alpha to 0.5 then back to 1': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ x: stage.width / 2, y: stage.height / 2, radius: 70, - fill: "green", - stroke: "black", + fill: 'green', + stroke: 'black', strokeWidth: 4 }); @@ -902,22 +902,22 @@ Test.prototype.tests = { layer.add(circle); stage.add(layer); - test(circle.getAbsoluteAlpha() === 0.5, "abs alpha should be 0.5"); + test(circle.getAbsoluteAlpha() === 0.5, 'abs alpha should be 0.5'); circle.setAlpha(1); layer.draw(); - test(circle.getAbsoluteAlpha() === 1, "abs alpha should be 1"); + test(circle.getAbsoluteAlpha() === 1, 'abs alpha should be 1'); }, - "STAGE - set shape and layer alpha to 0.5": function(containerId) { + 'STAGE - set shape and layer alpha to 0.5': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ x: stage.width / 2, y: stage.height / 2, radius: 70, - fill: "green", - stroke: "black", + fill: 'green', + stroke: 'black', strokeWidth: 4 }); @@ -926,18 +926,18 @@ Test.prototype.tests = { layer.add(circle); stage.add(layer); - test(circle.getAbsoluteAlpha() === 0.25, "abs alpha should be 0.25"); - test(layer.getAbsoluteAlpha() === 0.5, "abs alpha should be 0.5"); + test(circle.getAbsoluteAlpha() === 0.25, 'abs alpha should be 0.25'); + test(layer.getAbsoluteAlpha() === 0.5, 'abs alpha should be 0.5'); }, - "SHAPES - scale shape by half": function(containerId) { + 'SHAPES - scale shape by half': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ x: stage.width / 2, y: stage.height / 2, radius: 70, - fill: "green", - stroke: "black", + fill: 'green', + stroke: 'black', strokeWidth: 4 }); @@ -945,15 +945,15 @@ Test.prototype.tests = { layer.add(circle); stage.add(layer); }, - "SHAPES - scale shape by half then back to 1": function(containerId) { + 'SHAPES - scale shape by half then back to 1': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ x: stage.width / 2, y: stage.height / 2, radius: 70, - fill: "green", - stroke: "black", + fill: 'green', + stroke: 'black', strokeWidth: 4 }); @@ -966,7 +966,7 @@ Test.prototype.tests = { // LAYERING tests //////////////////////////////////////////////////////////////////////// - "LAYERING - move blue circle on top of green circle with moveToTop": function(containerId) { + 'LAYERING - move blue circle on top of green circle with moveToTop': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); @@ -974,8 +974,8 @@ Test.prototype.tests = { x: 200, y: stage.height / 2, radius: 70, - fill: "blue", - stroke: "black", + fill: 'blue', + stroke: 'black', strokeWidth: 4 }); @@ -983,8 +983,8 @@ Test.prototype.tests = { x: 280, y: stage.height / 2, radius: 70, - fill: "green", - stroke: "black", + fill: 'green', + stroke: 'black', strokeWidth: 4 }); @@ -992,17 +992,17 @@ Test.prototype.tests = { layer.add(greenCircle); stage.add(layer); - test(blueCircle.getZIndex() === 0, "blue circle should have zindex 0 before relayering"); - test(greenCircle.getZIndex() === 1, "green circle should have zindex 1 before relayering"); + test(blueCircle.getZIndex() === 0, 'blue circle should have zindex 0 before relayering'); + test(greenCircle.getZIndex() === 1, 'green circle should have zindex 1 before relayering'); blueCircle.moveToTop(); - test(blueCircle.getZIndex() === 1, "blue circle should have zindex 1 after relayering"); - test(greenCircle.getZIndex() === 0, "green circle should have zindex 0 after relayering"); + test(blueCircle.getZIndex() === 1, 'blue circle should have zindex 1 after relayering'); + test(greenCircle.getZIndex() === 0, 'green circle should have zindex 0 after relayering'); layer.draw(); }, - "LAYERING - move green circle below blue circle with moveDown": function(containerId) { + 'LAYERING - move green circle below blue circle with moveDown': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); @@ -1010,8 +1010,8 @@ Test.prototype.tests = { x: 200, y: stage.height / 2, radius: 70, - fill: "blue", - stroke: "black", + fill: 'blue', + stroke: 'black', strokeWidth: 4 }); @@ -1019,8 +1019,8 @@ Test.prototype.tests = { x: 280, y: stage.height / 2, radius: 70, - fill: "green", - stroke: "black", + fill: 'green', + stroke: 'black', strokeWidth: 4 }); @@ -1028,17 +1028,17 @@ Test.prototype.tests = { layer.add(greenCircle); stage.add(layer); - test(blueCircle.getZIndex() === 0, "blue circle should have zindex 0 before relayering"); - test(greenCircle.getZIndex() === 1, "green circle should have zindex 1 before relayering"); + test(blueCircle.getZIndex() === 0, 'blue circle should have zindex 0 before relayering'); + test(greenCircle.getZIndex() === 1, 'green circle should have zindex 1 before relayering'); greenCircle.moveDown(); - test(blueCircle.getZIndex() === 1, "blue circle should have zindex 1 after relayering"); - test(greenCircle.getZIndex() === 0, "green circle should have zindex 0 after relayering"); + test(blueCircle.getZIndex() === 1, 'blue circle should have zindex 1 after relayering'); + test(greenCircle.getZIndex() === 0, 'green circle should have zindex 0 after relayering'); layer.draw(); }, - "LAYERING - move blue group on top of green group with moveToTop": function(containerId) { + 'LAYERING - move blue group on top of green group with moveToTop': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var greenGroup = new Kinetic.Group(); @@ -1048,8 +1048,8 @@ Test.prototype.tests = { x: 200, y: stage.height / 2, radius: 70, - fill: "blue", - stroke: "black", + fill: 'blue', + stroke: 'black', strokeWidth: 4 }); @@ -1057,8 +1057,8 @@ Test.prototype.tests = { x: 280, y: stage.height / 2, radius: 70, - fill: "green", - stroke: "black", + fill: 'green', + stroke: 'black', strokeWidth: 4 }); @@ -1069,17 +1069,17 @@ Test.prototype.tests = { layer.add(greenGroup); stage.add(layer); - test(blueGroup.getZIndex() === 0, "blue group should have zindex 0 before relayering"); - test(greenGroup.getZIndex() === 1, "green group should have zindex 1 before relayering"); + test(blueGroup.getZIndex() === 0, 'blue group should have zindex 0 before relayering'); + test(greenGroup.getZIndex() === 1, 'green group should have zindex 1 before relayering'); blueGroup.moveToTop(); - test(blueGroup.getZIndex() === 1, "blue group should have zindex 1 after relayering"); - test(greenGroup.getZIndex() === 0, "green group should have zindex 0 after relayering"); + test(blueGroup.getZIndex() === 1, 'blue group should have zindex 1 after relayering'); + test(greenGroup.getZIndex() === 0, 'green group should have zindex 0 after relayering'); layer.draw(); }, - "LAYERING - move blue group on top of green group with moveUp": function(containerId) { + 'LAYERING - move blue group on top of green group with moveUp': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var greenGroup = new Kinetic.Group(); @@ -1089,8 +1089,8 @@ Test.prototype.tests = { x: 200, y: stage.height / 2, radius: 70, - fill: "blue", - stroke: "black", + fill: 'blue', + stroke: 'black', strokeWidth: 4 }); @@ -1098,8 +1098,8 @@ Test.prototype.tests = { x: 280, y: stage.height / 2, radius: 70, - fill: "green", - stroke: "black", + fill: 'green', + stroke: 'black', strokeWidth: 4 }); @@ -1110,17 +1110,17 @@ Test.prototype.tests = { layer.add(greenGroup); stage.add(layer); - test(blueGroup.getZIndex() === 0, "blue group should have zindex 0 before relayering"); - test(greenGroup.getZIndex() === 1, "green group should have zindex 1 before relayering"); + test(blueGroup.getZIndex() === 0, 'blue group should have zindex 0 before relayering'); + test(greenGroup.getZIndex() === 1, 'green group should have zindex 1 before relayering'); blueGroup.moveUp(); - test(blueGroup.getZIndex() === 1, "blue group should have zindex 1 after relayering"); - test(greenGroup.getZIndex() === 0, "green group should have zindex 0 after relayering"); + test(blueGroup.getZIndex() === 1, 'blue group should have zindex 1 after relayering'); + test(greenGroup.getZIndex() === 0, 'green group should have zindex 0 after relayering'); layer.draw(); }, - "LAYERING - move blue layer on top of green layer with moveToTop": function(containerId) { + 'LAYERING - move blue layer on top of green layer with moveToTop': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var blueLayer = new Kinetic.Layer(); var greenLayer = new Kinetic.Layer(); @@ -1129,8 +1129,8 @@ Test.prototype.tests = { x: 200, y: stage.height / 2, radius: 70, - fill: "blue", - stroke: "black", + fill: 'blue', + stroke: 'black', strokeWidth: 4 }); @@ -1138,8 +1138,8 @@ Test.prototype.tests = { x: 280, y: stage.height / 2, radius: 70, - fill: "green", - stroke: "black", + fill: 'green', + stroke: 'black', strokeWidth: 4 }); @@ -1151,7 +1151,7 @@ Test.prototype.tests = { blueLayer.moveToTop(); }, - "LAYERING - move green layer below blue layer with moveToBottom": function(containerId) { + 'LAYERING - move green layer below blue layer with moveToBottom': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var blueLayer = new Kinetic.Layer(); var greenLayer = new Kinetic.Layer(); @@ -1160,8 +1160,8 @@ Test.prototype.tests = { x: 200, y: stage.height / 2, radius: 70, - fill: "blue", - stroke: "black", + fill: 'blue', + stroke: 'black', strokeWidth: 4 }); @@ -1169,8 +1169,8 @@ Test.prototype.tests = { x: 280, y: stage.height / 2, radius: 70, - fill: "green", - stroke: "black", + fill: 'green', + stroke: 'black', strokeWidth: 4 }); @@ -1186,7 +1186,7 @@ Test.prototype.tests = { // ANIMATION tests //////////////////////////////////////////////////////////////////////// - "ANIMATION - stage and global object animation properties": function(containerId) { + 'ANIMATION - stage and global object animation properties': function(containerId) { var stage = new Kinetic.Stage(containerId, 578, 200); var layer = new Kinetic.Layer(); var rect = new Kinetic.Rect({ @@ -1194,8 +1194,8 @@ Test.prototype.tests = { y: 100, width: 100, height: 50, - fill: "green", - stroke: "black", + fill: 'green', + stroke: 'black', strokeWidth: 4 }); @@ -1211,17 +1211,17 @@ Test.prototype.tests = { rect.x = amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX; layer.draw(); }); - test(stage.isAnimating === false, "stage should not be animating"); - test(Kinetic.GlobalObject.isAnimating === false, "global object should not be animating"); + test(stage.isAnimating === false, 'stage should not be animating'); + test(Kinetic.GlobalObject.isAnimating === false, 'global object should not be animating'); stage.start(); - test(stage.isAnimating === true, "stage should be animating"); - test(Kinetic.GlobalObject.isAnimating === true, "global object should be animating"); + test(stage.isAnimating === true, 'stage should be animating'); + test(Kinetic.GlobalObject.isAnimating === true, 'global object should be animating'); stage.stop(); - test(stage.isAnimating === false, "stage should not be animating"); - test(Kinetic.GlobalObject.isAnimating === false, "global object should not be animating"); + test(stage.isAnimating === false, 'stage should not be animating'); + test(Kinetic.GlobalObject.isAnimating === false, 'global object should not be animating'); } };