From 4683ae69170344b471112c53efe63422e8f62c1d Mon Sep 17 00:00:00 2001 From: Eric Rowell Date: Wed, 11 Sep 2013 12:05:34 -0700 Subject: [PATCH] removed test dependencies from grunt --- .gitignore | 1 - Gruntfile.js | 25 - test-old/html/unitTests.html | 25 - test-old/js/unitTests.js | 1762 ---------------------------------- 4 files changed, 1813 deletions(-) delete mode 100644 test-old/html/unitTests.html delete mode 100644 test-old/js/unitTests.js diff --git a/.gitignore b/.gitignore index 42a958f6..f0acd89f 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,6 @@ jsdoc-toolkit jsdoc-master dist -tests/js/unitTests.js analysis node_modules phantomjs.exe diff --git a/Gruntfile.js b/Gruntfile.js index 84a2b604..debba9c7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -46,26 +46,6 @@ module.exports = function(grunt) { 'src/filters/ConvolvePack.js' ]; - var unitTestFiles = [ - 'tests/js/unit/animationTests.js', - 'tests/js/unit/tweenTests.js', - 'tests/js/unit/globalTests.js', - 'tests/js/unit/utilTests.js', - 'tests/js/unit/nodeTests.js', - 'tests/js/unit/stageTests.js', - 'tests/js/unit/containerTests.js', - 'tests/js/unit/layerTests.js', - 'tests/js/unit/shapeTests.js', - 'tests/js/unit/ddTests.js', - 'tests/js/unit/canvasTests.js', - - 'tests/js/unit/plugins/pathTests.js', - 'tests/js/unit/plugins/regularPolygonTests.js', - 'tests/js/unit/plugins/starTests.js', - 'tests/js/unit/plugins/textPathTests.js', - 'tests/js/unit/plugins/labelTests.js' - ]; - // Project configuration. var config = { pkg: grunt.file.readJSON('package.json'), @@ -84,10 +64,6 @@ module.exports = function(grunt) { prod: { src: sourceFiles, dest: 'dist/kinetic-v<%= pkg.version %>.js' - }, - test: { - src: unitTestFiles, - dest: 'tests/js/unitTests.js' } }, replace: { @@ -210,6 +186,5 @@ module.exports = function(grunt) { grunt.registerTask('dev', ['clean', 'concat:dev', 'replace:dev']); grunt.registerTask('beta', ['clean', 'concat:beta', 'replace:beta']); grunt.registerTask('full', ['clean', 'concat:prod', 'uglify', 'replace:prod1', 'replace:prod2', 'replace:prod3']); - grunt.registerTask('test', ['concat:test']); grunt.registerTask('hint', ['clean', 'concat:dev', 'replace:dev', 'jshint']); }; diff --git a/test-old/html/unitTests.html b/test-old/html/unitTests.html deleted file mode 100644 index 8da7d462..00000000 --- a/test-old/html/unitTests.html +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - - - - - - - - - diff --git a/test-old/js/unitTests.js b/test-old/js/unitTests.js deleted file mode 100644 index f827c2d0..00000000 --- a/test-old/js/unitTests.js +++ /dev/null @@ -1,1762 +0,0 @@ -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, - width: 578, - height: 200, - draggable: true - }); - 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(); - }, - 'adder validation': function(containerId) { - var stage = new Kinetic.Stage({ - container: containerId, - width: 578, - height: 200 - }); - 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; - } - test(errorThrown, 'error should have been thrown when adding stage to stage'); - stage.remove(); - - // =================================== - var errorThrown = false; - try { - stage.add(group); - } catch(err) { - errorThrown = true; - } - test(errorThrown, 'error should have been thrown when adding group to stage'); - group.remove(); - - // =================================== - var errorThrown = false; - try { - stage.add(circle); - } catch(err) { - errorThrown = true; - } - test(errorThrown, 'error should have been thrown when adding shape to stage'); - circle.remove(); - - // =================================== - var errorThrown = false; - try { - layer.add(stage); - } catch(err) { - errorThrown = true; - } - test(errorThrown, 'error should have been thrown when adding stage to layer'); - stage.remove(); - - // =================================== - var errorThrown = false; - try { - layer.add(layer); - } catch(err) { - errorThrown = true; - } - test(errorThrown, 'error should have been thrown when adding layer to layer'); - layer.remove(); - - // =================================== - var errorThrown = false; - try { - group.add(stage); - } catch(err) { - errorThrown = true; - } - test(errorThrown, 'error should have been thrown when adding stage to group'); - stage.remove(); - - // =================================== - var errorThrown = false; - try { - group.add(layer); - } catch(err) { - errorThrown = true; - } - test(errorThrown, 'error should have been thrown when adding layer to group'); - layer.remove(); - - }, - 'add layer then group then shape': function(containerId) { - var stage = new Kinetic.Stage({ - container: containerId, - width: 578, - height: 200 - }); - 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(); - }, - 'add shape then stage then layer': function(containerId) { - var stage = new Kinetic.Stage({ - container: containerId, - width: 578, - height: 200 - }); - 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); - layer.draw(); - }, - 'select shape by id and name': function(containerId) { - var stage = new Kinetic.Stage({ - container: containerId, - width: 578, - height: 200 - }); - 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]; - test(node.className === 'Circle', 'className should be Circle'); - node = layer.get('.myRect')[0]; - test(node.className === 'Rect', 'className should be rect'); - node = layer.get('#myLayer')[0]; - test(node === undefined, 'node should be undefined'); - node = stage.get('#myLayer')[0]; - test(node.nodeType === 'Layer', 'node type should be Layer'); - - }, - 'select shapes with multiple selectors': function(containerId) { - var stage = new Kinetic.Stage({ - container: containerId, - width: 578, - height: 200 - }); - 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); - - test(layer.get('#myCircle, .myRect').length === 2, 'should be 2 items in the array'); - test(layer.get('#myCircle, .myRect')[0]._id === circle._id, 'circle id is wrong'); - test(layer.get('#myCircle, .myRect')[1]._id === rect._id, 'rect id is wrong'); - - test(layer.get('#myCircle, Circle, .myRect, Rect').length === 4, 'should be 4 items in the array'); - test(layer.get('#myCircle, Circle, .myRect, Rect')[0]._id === circle._id, 'circle id is wrong'); - test(layer.get('#myCircle, Circle, .myRect, Rect')[1]._id === circle._id, 'circle id is wrong'); - test(layer.get('#myCircle, Circle, .myRect, Rect')[2]._id === rect._id, 'rect id is wrong'); - test(layer.get('#myCircle, Circle, .myRect, Rect')[3]._id === rect._id, 'rect id is wrong'); - - }, - 'set x on an array of nodes': 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: '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'); - - test(shapes.length === 2, 'shapes array should have 2 elements'); - - shapes.each(function(node) { - node.setX(200); - }); - - layer.draw(); - - shapes.each(function(node) { - test(node.getX() === 200, 'shape x should be 200'); - }); - }, - 'set fill on array by Shape-selector': 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: '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'); - - test(shapes.length === 2, 'shapes array should have 2 elements'); - - shapes.each(function(node) { - node.setFill('gray'); - }); - - layer.draw(); - - shapes.each(function(node) { - test(node.getFill() === 'gray', 'shape x should be 200'); - }); - }, - 'add listener to an array of nodes': 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: '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'); - - test(shapes.length === 2, 'shapes array should have 2 elements'); - var a = 0; - shapes.on('mouseover', function() { - a++; - }); - circle.fire('mouseover'); - test(a === 1, 'listener should have fired for circle'); - rect.fire('mouseover'); - test(a === 2, 'listener should have fired for rect'); - }, - 'test ids and names hashes': 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: '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); - - - test(Kinetic.ids['myCircle3'].getId() === 'myCircle3', 'circle id not in ids hash'); - test(Kinetic.names['myRect3'][0].getName() === 'myRect3', 'rect name not in names hash'); - - circle.setId('newCircleId'); - test(Kinetic.ids['newCircleId'] !== undefined, 'circle not in ids hash'); - test(Kinetic.ids['myCircle3'] === undefined, 'old circle id key is still in ids hash'); - - rect.setName('newRectName'); - test(Kinetic.names['newRectName'][0] !== undefined, 'new rect name not in names hash'); - test(Kinetic.names['myRect3'] === undefined, 'old rect name is still in names hash'); - }, - 'add layer': function(containerId) { - var stage = new Kinetic.Stage({ - container: containerId, - width: 578, - height: 200 - }); - var layer = new Kinetic.Layer(); - stage.add(layer); - }, - 'remove all children from layer': function(containerId) { - var stage = new Kinetic.Stage({ - container: containerId, - width: 578, - height: 200 - }); - 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); - - test(layer.children.length === 1, 'layer should have 1 children'); - test(group.children.length === 2, 'group should have 2 children'); - - layer.removeChildren(); - layer.draw(); - - test(layer.children.length === 0, 'layer should have 0 children'); - test(group.children.length === 0, 'group should have 0 children'); - }, - 'destroy all children from layer': function(containerId) { - var stage = new Kinetic.Stage({ - container: containerId, - width: 578, - height: 200 - }); - 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); - - test(layer.children.length === 1, 'layer should have 1 children'); - test(group.children.length === 2, 'group should have 2 children'); - test(Kinetic.names.circleName.length > 0, 'circleName should be in names hash'); - test(Kinetic.ids.circleId.getId() === 'circleId', 'layerId should be in ids hash'); - - layer.destroyChildren(); - layer.draw(); - - test(layer.children.length === 0, 'layer should have 0 children'); - test(group.children.length === 0, 'group should have 0 children'); - test(Kinetic.names.circleName === undefined, 'circleName should not be in names hash'); - test(Kinetic.ids.circleId === undefined, 'layerId should not be in ids hash'); - }, - 'add group': function(containerId) { - var stage = new Kinetic.Stage({ - container: containerId, - width: 578, - height: 200 - }); - 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); - }, - 'create two groups, move first group': function(containerId) { - var stage = new Kinetic.Stage({ - container: containerId, - width: 578, - height: 200 - }); - 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(); - }, - 'node type selector': function(containerId) { - var stage = new Kinetic.Stage({ - container: containerId, - width: 578, - height: 200 - }); - 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); - - test(stage.get('Shape').length === 2, 'stage should have 2 shapes'); - test(layer.get('Shape').length === 2, 'layer should have 2 shapes'); - test(group.get('Shape').length === 1, 'layer should have 2 shapes'); - - test(stage.get('Layer').length === 2, 'stage should have 2 layers'); - test(stage.get('Group').length === 1, 'stage should have 1 group'); - - test(layer.get('Group').length === 1, 'layer should have 1 group'); - test(layer.get('Shape').length === 2, 'layer should have 2 shapes'); - test(layer.get('Layer').length === 0, 'layer should have 0 layers'); - - test(fooLayer.get('Group').length === 0, 'layer should have 0 groups'); - test(fooLayer.get('Shape').length === 0, 'layer should have 0 shapes'); - - test(group.get('Shape').length === 1, 'group should have 1 shape'); - test(group.get('Layer').length === 0, 'group should have 0 layers'); - test(group.get('Group').length === 0, 'group should have 0 groups'); - - }, - 'node and shape type selector': function(containerId) { - var stage = new Kinetic.Stage({ - container: containerId, - width: 578, - height: 200 - }); - 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); - - test(stage.get('Shape').length === 8, 'stage should have 5 shapes'); - test(stage.get('Layer').length === 3, 'stage should have 2 layers'); - test(stage.get('Group').length === 1, 'stage should have 1 group'); - test(stage.get('Rect').length === 3, 'stage should have 3 rects'); - test(stage.get('Circle').length === 2, 'stage should have 2 circles'); - test(stage.get('RegularPolygon').length === 1, 'stage should have 1 regular polygon'); - test(stage.get('TextPath').length === 1, 'stage should have 1 text path'); - test(stage.get('Path').length === 1, 'stage should have 1 path'); - - test(layer.get('Shape').length === 5, 'layer should have 5 shapes'); - test(layer.get('Layer').length === 0, 'layer should have 0 layers'); - test(layer.get('Group').length === 1, 'layer should have 1 group'); - test(layer.get('Rect').length === 3, 'layer should have 3 rects'); - test(layer.get('Circle').length === 2, 'layer should have 2 circles'); - test(layer.get('RegularPolygon').length === 0, 'layer should have 0 regular polygon'); - test(layer.get('TextPath').length === 0, 'layer should have 0 text path'); - test(layer.get('Path').length === 0, 'layer should have 0 path'); - - test(layer2.get('Shape').length === 3, 'layer2 should have 3 shapes'); - test(layer2.get('Layer').length === 0, 'layer2 should have 0 layers'); - test(layer2.get('Group').length === 0, 'layer2 should have 0 group'); - test(layer2.get('RegularPolygon').length === 1, 'layer2 should have 1 regular polygon'); - test(layer2.get('TextPath').length === 1, 'layer2 should have 1 text path'); - test(layer2.get('Path').length === 1, 'layer2 should have 1 path'); - - test(fooLayer.get('Shape').length === 0, 'layer should have 0 shapes'); - test(fooLayer.get('Group').length === 0, 'layer should have 0 groups'); - test(fooLayer.get('Rect').length === 0, 'layer should have 0 rects'); - test(fooLayer.get('Circle').length === 0, 'layer should have 0 circles'); - - test(group.get('Shape').length === 2, 'group should have 2 shape'); - test(group.get('Layer').length === 0, 'group should have 0 layers'); - test(group.get('Group').length === 0, 'group should have 0 groups'); - test(group.get('Rect').length === 1, 'group should have 1 rects'); - test(group.get('Circle').length === 1, 'gropu should have 1 circles'); - }, - 'test get() selector by adding shape, then group, then layer': function(containerId) { - var stage = new Kinetic.Stage({ - container: containerId, - width: 578, - height: 200, - name: 'stageName', - id: 'stageId' - }); - 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); - - test(stage.get('.rectName')[0].attrs.id === 'rectId', 'problem with shape name selector'); - test(stage.get('#rectId')[0].attrs.id === 'rectId', 'problem with shape id selector'); - test(layer.get('.rectName')[0].attrs.id === 'rectId', 'problem with shape name selector'); - test(layer.get('#rectId')[0].attrs.id === 'rectId', 'problem with shape id selector'); - test(group.get('.rectName')[0].attrs.id === 'rectId', 'problem with shape name selector'); - test(group.get('#rectId')[0].attrs.id === 'rectId', 'problem with shape id selector'); - - test(stage.get('.groupName')[0].attrs.id === 'groupId', 'problem with group name selector'); - test(stage.get('#groupId')[0].attrs.id === 'groupId', 'problem with group id selector'); - test(layer.get('.groupName')[0].attrs.id === 'groupId', 'problem with group name selector'); - test(layer.get('#groupId')[0].attrs.id === 'groupId', 'problem with group id selector'); - - test(stage.get('.layerName')[0].attrs.id === 'layerId', 'problem with layer name selector'); - test(stage.get('#layerId')[0].attrs.id === 'layerId', 'problem with layer id selector'); - }, - 'test get() selector by adding group, then shape, then layer': function(containerId) { - var stage = new Kinetic.Stage({ - container: containerId, - width: 578, - height: 200, - name: 'stageName', - id: 'stageId' - }); - 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); - - test(stage.get('.rectName')[0].attrs.id === 'rectId', 'problem with shape name selector'); - test(stage.get('#rectId')[0].attrs.id === 'rectId', 'problem with shape id selector'); - test(layer.get('.rectName')[0].attrs.id === 'rectId', 'problem with shape name selector'); - test(layer.get('#rectId')[0].attrs.id === 'rectId', 'problem with shape id selector'); - test(group.get('.rectName')[0].attrs.id === 'rectId', 'problem with shape name selector'); - test(group.get('#rectId')[0].attrs.id === 'rectId', 'problem with shape id selector'); - - test(stage.get('.groupName')[0].attrs.id === 'groupId', 'problem with group name selector'); - test(stage.get('#groupId')[0].attrs.id === 'groupId', 'problem with group id selector'); - test(layer.get('.groupName')[0].attrs.id === 'groupId', 'problem with group name selector'); - test(layer.get('#groupId')[0].attrs.id === 'groupId', 'problem with group id selector'); - - test(stage.get('.layerName')[0].attrs.id === 'layerId', 'problem with layer name selector'); - test(stage.get('#layerId')[0].attrs.id === 'layerId', 'problem with layer id selector'); - }, - 'test get() selector by adding group, then layer, then shape': function(containerId) { - var stage = new Kinetic.Stage({ - container: containerId, - width: 578, - height: 200, - name: 'stageName', - id: 'stageId' - }); - 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); - - test(stage.get('.rectName')[0].attrs.id === 'rectId', 'problem with shape name selector'); - test(stage.get('#rectId')[0].attrs.id === 'rectId', 'problem with shape id selector'); - test(layer.get('.rectName')[0].attrs.id === 'rectId', 'problem with shape name selector'); - test(layer.get('#rectId')[0].attrs.id === 'rectId', 'problem with shape id selector'); - test(group.get('.rectName')[0].attrs.id === 'rectId', 'problem with shape name selector'); - test(group.get('#rectId')[0].attrs.id === 'rectId', 'problem with shape id selector'); - - test(stage.get('.groupName')[0].attrs.id === 'groupId', 'problem with group name selector'); - test(stage.get('#groupId')[0].attrs.id === 'groupId', 'problem with group id selector'); - test(layer.get('.groupName')[0].attrs.id === 'groupId', 'problem with group name selector'); - test(layer.get('#groupId')[0].attrs.id === 'groupId', 'problem with group id selector'); - - test(stage.get('.layerName')[0].attrs.id === 'layerId', 'problem with layer name selector'); - test(stage.get('#layerId')[0].attrs.id === 'layerId', 'problem with layer id selector'); - }, - 'test get() selector by adding layer, then group, then shape': function(containerId) { - var stage = new Kinetic.Stage({ - container: containerId, - width: 578, - height: 200, - name: 'stageName', - id: 'stageId' - }); - 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); - - test(stage.get('.rectName')[0].attrs.id === 'rectId', 'problem with shape name selector'); - test(stage.get('#rectId')[0].attrs.id === 'rectId', 'problem with shape id selector'); - test(layer.get('.rectName')[0].attrs.id === 'rectId', 'problem with shape name selector'); - test(layer.get('#rectId')[0].attrs.id === 'rectId', 'problem with shape id selector'); - test(group.get('.rectName')[0].attrs.id === 'rectId', 'problem with shape name selector'); - test(group.get('#rectId')[0].attrs.id === 'rectId', 'problem with shape id selector'); - - test(stage.get('.groupName')[0].attrs.id === 'groupId', 'problem with group name selector'); - test(stage.get('#groupId')[0].attrs.id === 'groupId', 'problem with group id selector'); - test(layer.get('.groupName')[0].attrs.id === 'groupId', 'problem with group name selector'); - test(layer.get('#groupId')[0].attrs.id === 'groupId', 'problem with group id selector'); - - test(stage.get('.layerName')[0].attrs.id === 'layerId', 'problem with layer name selector'); - test(stage.get('#layerId')[0].attrs.id === 'layerId', 'problem with layer id selector'); - - layer.draw(); - }, - 'add layer then shape': 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: 'green', - stroke: 'black', - strokeWidth: 4, - name: 'myCircle' - }); - - stage.add(layer); - layer.add(circle); - layer.draw(); - }, - 'move blue layer on top of green layer with setZIndex': function(containerId) { - var stage = new Kinetic.Stage({ - container: containerId, - width: 578, - height: 200 - }); - 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()); - - test(greenLayer.getZIndex() === 0, 'green layer should have z index of 0'); - test(blueLayer.getZIndex() === 1, 'blue layer should have z index of 1'); - }, - 'move blue layer on top of green layer with moveToTop': function(containerId) { - var stage = new Kinetic.Stage({ - container: containerId, - width: 578, - height: 200 - }); - 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(); - - }, - 'move green layer below blue layer with moveToBottom': function(containerId) { - var stage = new Kinetic.Stage({ - container: containerId, - width: 578, - height: 200 - }); - 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(); - - }, - 'move green layer below blue layer with moveDown': function(containerId) { - var stage = new Kinetic.Stage({ - container: containerId, - width: 578, - height: 200 - }); - 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(); - - }, - 'move blue layer above green layer with moveUp': function(containerId) { - var stage = new Kinetic.Stage({ - container: containerId, - width: 578, - height: 200 - }); - 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(); - - }, - 'move blue circle on top of green circle with moveToTop': function(containerId) { - var stage = new Kinetic.Stage({ - container: containerId, - width: 578, - height: 200 - }); - 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); - - 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'); - - layer.draw(); - }, - 'move green circle below blue circle with moveDown': function(containerId) { - var stage = new Kinetic.Stage({ - container: containerId, - width: 578, - height: 200 - }); - 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); - - 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'); - - layer.draw(); - }, - 'layer layer when only one layer': function(containerId) { - var stage = new Kinetic.Stage({ - container: containerId, - width: 578, - height: 200 - }); - 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); - - - test(layer.getZIndex() === 0, 'layer should have zindex of 0'); - - layer.moveDown(); - test(layer.getZIndex() === 0, 'layer should have zindex of 0'); - - layer.moveToBottom(); - test(layer.getZIndex() === 0, 'layer should have zindex of 0'); - - layer.moveUp(); - test(layer.getZIndex() === 0, 'layer should have zindex of 0'); - - layer.moveToTop(); - test(layer.getZIndex() === 0, 'layer should have zindex of 0'); - - }, - 'move blue group on top of green group with moveToTop': function(containerId) { - var stage = new Kinetic.Stage({ - container: containerId, - width: 578, - height: 200 - }); - 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); - - 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'); - - layer.draw(); - }, - 'move blue group on top of green group with moveUp': function(containerId) { - var stage = new Kinetic.Stage({ - container: containerId, - width: 578, - height: 200 - }); - 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); - - 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'); - - 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); - } -}; - - -