diff --git a/.jshintrc b/.jshintrc index 6f69f8c9..1f5b04aa 100644 --- a/.jshintrc +++ b/.jshintrc @@ -15,7 +15,7 @@ "trailing" : true, "laxbreak" : true, "globals": { - "Kinetic": false, + "Konva": false, "document": false, "window" : false, "navigator" : false, diff --git a/.travis.yml b/.travis.yml index f6ca4607..54b1e469 100644 --- a/.travis.yml +++ b/.travis.yml @@ -15,4 +15,4 @@ deploy: secure: rYqyBhn3K8tnt/XK6RFodBiIsIqwmUuPBEAOQxRt/elK4F7BVC+ba7/xgsvdFLP+Bqn4sS8b/YjfxUqm0lfxoph3qvvyKZ+qjuGCXBtvbY8EgGqX3FJKq/LJp8Vu4encCUOpI3PWXQEB+0OrC8ntKnBn1L1WP6lzDbRHj49e9ew= on: tags: true - repo: lavrton/KineticJS + repo: konvajs/konva diff --git a/CHANGELOG.md b/CHANGELOG.md index a15138aa..45da7671 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,14 +10,14 @@ * Bug Fixes * working "this-example" as name for nodes - * Kinetic.Text() with no config don't throws exception - * Kinetic.Line() with no config don't throws exception + * Konva.Text() with no config don't throws exception + * Konva.Line() with no config don't throws exception * Enhancements * `black` is default fill for text - * true class extending. Now `rect instanceOf Kinetic.Shape` will return true + * true class extending. Now `rect instanceOf Konva.Shape` will return true * while dragging you can redraw layer that is not under drag. hit graph will be updated in this case * now you can move object that is dragging into another layer. - * new `frameOffsets` attribute for `Kinetic.Sprite` + * new `frameOffsets` attribute for `Konva.Sprite` ## 5.1.9 2014-01-09 @@ -28,7 +28,7 @@ * cache node before adding to layer * `intersects` function now works for shapes with shadow * Enhancements - * npm package. See https://github.com/ericdrowell/KineticJS#installation + * npm package. See https://github.com/ericdrowell/KonvaJS#installation * much better dragging performance * `browserify` support * applying opacity to cached node diff --git a/Gruntfile.js b/Gruntfile.js index a4ef942a..e026a30a 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -70,15 +70,15 @@ module.exports = function(grunt) { }, dev: { src: sourceFiles, - dest: 'dist/kinetic-dev.js' + dest: 'dist/konva-dev.js' }, beta: { src: sourceFiles, - dest: 'dist/kinetic-v<%= pkg.version %>-beta.js' + dest: 'dist/konva-v<%= pkg.version %>-beta.js' }, prod: { src: sourceFiles, - dest: 'dist/kinetic-v<%= pkg.version %>.js' + dest: 'dist/konva-v<%= pkg.version %>.js' } }, replace: { @@ -95,8 +95,8 @@ module.exports = function(grunt) { }, files: [{ - src: ['dist/kinetic-dev.js'], - dest: 'dist/kinetic-dev.js' + src: ['dist/konva-dev.js'], + dest: 'dist/konva-dev.js' }] }, beta: { @@ -112,8 +112,8 @@ module.exports = function(grunt) { }, files: [{ - src: ['dist/kinetic-v<%= pkg.version %>-beta.js'], - dest: 'dist/kinetic-v<%= pkg.version %>-beta.js' + src: ['dist/konva-v<%= pkg.version %>-beta.js'], + dest: 'dist/konva-v<%= pkg.version %>-beta.js' }] }, prod1: { @@ -129,8 +129,8 @@ module.exports = function(grunt) { }, files: [{ - src: ['dist/kinetic-v<%= pkg.version %>.js'], - dest: 'dist/kinetic-v<%= pkg.version %>.js' + src: ['dist/konva-v<%= pkg.version %>.js'], + dest: 'dist/konva-v<%= pkg.version %>.js' }] }, prod2: { @@ -141,8 +141,8 @@ module.exports = function(grunt) { prefix: '@@' }, files: [{ - src: ['dist/kinetic-Global-v<%= pkg.version %>.min.js'], - dest: 'dist/kinetic-Global-v<%= pkg.version %>.min.js' + src: ['dist/konva-Global-v<%= pkg.version %>.min.js'], + dest: 'dist/konva-Global-v<%= pkg.version %>.min.js' }] }, prod3: { @@ -153,8 +153,8 @@ module.exports = function(grunt) { prefix: '@@' }, files: [{ - src: ['dist/kinetic-v<%= pkg.version %>.min.js'], - dest: 'dist/kinetic-v<%= pkg.version %>.min.js' + src: ['dist/konva-v<%= pkg.version %>.min.js'], + dest: 'dist/konva-v<%= pkg.version %>.min.js' }] }, updateBower: { @@ -172,11 +172,11 @@ module.exports = function(grunt) { }, uglify: { options: { - banner: '/*! KineticJS v<%= pkg.version %> <%= grunt.template.today("yyyy-mm-dd") %> http://lavrton.github.io/KineticJS/ by Eric Rowell @ericdrowell, Anton Lavrenov @lavrton - MIT License https://github.com/lavrton/KineticJS/wiki/License*/\n' + banner: '/*! KonvaJS v<%= pkg.version %> <%= grunt.template.today("yyyy-mm-dd") %> http://lavrton.github.io/KonvaJS/ by Eric Rowell @ericdrowell, Anton Lavrenov @lavrton - MIT License https://github.com/lavrton/KonvaJS/wiki/License*/\n' }, build: { files: { - 'dist/kinetic-v<%= pkg.version %>.min.js': 'dist/kinetic-v<%= pkg.version %>.js' + 'dist/konva-v<%= pkg.version %>.min.js': 'dist/konva-v<%= pkg.version %>.js' } } }, @@ -190,13 +190,13 @@ module.exports = function(grunt) { copy: { prod1: { nonull: true, - src: 'dist/kinetic-v<%= pkg.version %>.min.js', - dest: 'kinetic.min.js' + src: 'dist/konva-v<%= pkg.version %>.min.js', + dest: 'konva.min.js' }, prod2: { nonull: true, - src: 'dist/kinetic-v<%= pkg.version %>.js', - dest: 'kinetic.js' + src: 'dist/konva-v<%= pkg.version %>.js', + dest: 'konva.js' } }, shell: { @@ -206,7 +206,7 @@ module.exports = function(grunt) { stderr : true, failOnError : true }, - command: './node_modules/.bin/jsdoc ./dist/kinetic-v<%= pkg.version %>.js -d ./docs' + command: './node_modules/.bin/jsdoc ./dist/konva-v<%= pkg.version %>.js -d ./docs' } }, mocha_phantomjs: { @@ -223,7 +223,7 @@ module.exports = function(grunt) { }, jsdoc : { dist : { - src: ['README.md', './dist/kinetic-v<%= pkg.version %>.js'], + src: ['README.md', './dist/konva-v<%= pkg.version %>.js'], options: { destination: 'api', template : './node_modules/grunt-jsdoc/node_modules/ink-docstrap/template', @@ -237,7 +237,7 @@ module.exports = function(grunt) { for (var n=0; n.min.js'; + var outputFile = 'dist/konva-' + className + '-v<%= pkg.version %>.min.js'; config.uglify.build.files[outputFile] = [inputFile]; } diff --git a/README.md b/README.md index d6ce5bd5..4634ca41 100644 --- a/README.md +++ b/README.md @@ -4,8 +4,8 @@ Konva is an HTML5 Canvas JavaScript framework that enables high performance anim [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/konvajs/konva?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) -[![npm version](https://badge.fury.io/js/kinetic.svg)](http://badge.fury.io/js/kinetic) [![bower version](https://badge.fury.io/bo/kinetic.svg)](http://badge.fury.io/bo/kinetic) -[![Build Status](https://travis-ci.org/lavrton/KineticJS.png)](https://travis-ci.org/lavrton/KineticJS) [![Code Climate](https://codeclimate.com/github/lavrton/KineticJS/badges/gpa.svg)](https://codeclimate.com/github/lavrton/KineticJS) +[![npm version](https://badge.fury.io/js/konva.svg)](http://badge.fury.io/js/konva) [![bower version](https://badge.fury.io/bo/konva.svg)](http://badge.fury.io/bo/konva) +[![Build Status](https://travis-ci.org/konvajs/konva.png)](https://travis-ci.org/konvajs/konva) [![Code Climate](https://codeclimate.com/github/konvajs/konva/badges/gpa.svg)](https://codeclimate.com/github/konvajs/konva) You can draw things onto the stage, add event listeners to them, move them, scale them, and rotate them independently from other shapes to support high performance animations, even if your application uses thousands of shapes. Served hot with a side of awesomeness. @@ -52,7 +52,7 @@ If you add a file in the src directory, be sure to add the filename to the sourc Konva uses Mocha for testing. * If you need run test only one time run `grunt test`. -* While developing it is easy to use `grunt server` with watch task. Just run it and go to [http://localhost:8080/test/runner.html](http://localhost:8080/test/runner.html). After src file change kinetic-dev.js will be automatically created, so you just need refresh test the page. +* While developing it is easy to use `grunt server` with watch task. Just run it and go to [http://localhost:8080/test/runner.html](http://localhost:8080/test/runner.html). After src file change konva-dev.js will be automatically created, so you just need refresh test the page. Konva is covered with hundreds of tests and well over a thousand assertions. Konva uses TDD (test driven development) which means that every new feature or bug fix is accompanied with at least one new test. diff --git a/bower.json b/bower.json index 9136df6a..cca229da 100644 --- a/bower.json +++ b/bower.json @@ -1,11 +1,11 @@ { - "name": "KineticJS", + "name": "KonvaJS", "version": "5.2.0", "authors": [ "Eric Rowell", "Anton Lavrenov" ], - "homepage": "http://lavrton.github.io/KineticJS/", - "description": "KineticJS is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more.", + "homepage": "http://lavrton.github.io/KonvaJS/", + "description": "KonvaJS is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more.", "keywords": [ "canvas", "animations", @@ -25,5 +25,5 @@ ".gitignore", "Gruntfile.js" ], - "main": "kinetic.min.js" + "main": "konva.min.js" } diff --git a/kinetic.min.js b/kinetic.min.js deleted file mode 100644 index 41379b2b..00000000 --- a/kinetic.min.js +++ /dev/null @@ -1,5 +0,0 @@ -/*! KineticJS v5.2.0 2015-01-22 http://lavrton.github.io/KineticJS/ by Eric Rowell @ericdrowell, Anton Lavrenov @lavrton - MIT License https://github.com/lavrton/KineticJS/wiki/License*/ -var Kinetic={};!function(a){var b=Math.PI/180;Kinetic={version:"5.2.0",stages:[],idCounter:0,ids:{},names:{},shapes:{},listenClickTap:!1,inDblClickWindow:!1,enableTrace:!1,traceArrMax:100,dblClickWindow:400,pixelRatio:void 0,dragDistance:0,angleDeg:!0,showWarnings:!0,Filters:{},Node:function(a){this._init(a)},Shape:function(a){this.__init(a)},Container:function(a){this.__init(a)},Stage:function(a){this.___init(a)},BaseLayer:function(a){this.___init(a)},Layer:function(a){this.____init(a)},FastLayer:function(a){this.____init(a)},Group:function(a){this.___init(a)},isDragging:function(){var a=Kinetic.DD;return a?a.isDragging:!1},isDragReady:function(){var a=Kinetic.DD;return a?!!a.node:!1},_addId:function(a,b){void 0!==b&&(this.ids[b]=a)},_removeId:function(a){void 0!==a&&delete this.ids[a]},_addName:function(a,b){if(void 0!==b)for(var c=b.split(/\s/g),d=0;d"),Kinetic.window=Kinetic.document.createWindow(),Kinetic.window.Image=d.Image,Kinetic._nodeCanvas=d}return Kinetic.root=a,void(module.exports=c)}"function"==typeof define&&define.amd&&define(b),Kinetic.document=document,Kinetic.window=window,Kinetic.root=a}(this,function(){return Kinetic}),function(){Kinetic.Collection=function(){var a=[].slice.call(arguments),b=a.length,c=0;for(this.length=b;b>c;c++)this[c]=a[c];return this},Kinetic.Collection.prototype=[],Kinetic.Collection.prototype.each=function(a){for(var b=0;ba;a++)b.push(this[a]);return b},Kinetic.Collection.toCollection=function(a){var b,c=new Kinetic.Collection,d=a.length;for(b=0;d>b;b++)c.push(a[b]);return c},Kinetic.Collection._mapMethod=function(a){Kinetic.Collection.prototype[a]=function(){var b,c=this.length,d=[].slice.call(arguments);for(b=0;c>b;b++)this[b][a].apply(this[b],d);return this}},Kinetic.Collection.mapMethods=function(a){var b=a.prototype;for(var c in b)Kinetic.Collection._mapMethod(c)},Kinetic.Transform=function(a){this.m=a&&a.slice()||[1,0,0,1,0,0]},Kinetic.Transform.prototype={copy:function(){return new Kinetic.Transform(this.m)},point:function(a){var b=this.m;return{x:b[0]*a.x+b[2]*a.y+b[4],y:b[1]*a.x+b[3]*a.y+b[5]}},translate:function(a,b){return this.m[4]+=this.m[0]*a+this.m[2]*b,this.m[5]+=this.m[1]*a+this.m[3]*b,this},scale:function(a,b){return this.m[0]*=a,this.m[1]*=a,this.m[2]*=b,this.m[3]*=b,this},rotate:function(a){var b=Math.cos(a),c=Math.sin(a),d=this.m[0]*b+this.m[2]*c,e=this.m[1]*b+this.m[3]*c,f=this.m[0]*-c+this.m[2]*b,g=this.m[1]*-c+this.m[3]*b;return this.m[0]=d,this.m[1]=e,this.m[2]=f,this.m[3]=g,this},getTranslation:function(){return{x:this.m[4],y:this.m[5]}},skew:function(a,b){var c=this.m[0]+this.m[2]*b,d=this.m[1]+this.m[3]*b,e=this.m[2]+this.m[0]*a,f=this.m[3]+this.m[1]*a;return this.m[0]=c,this.m[1]=d,this.m[2]=e,this.m[3]=f,this},multiply:function(a){var b=this.m[0]*a.m[0]+this.m[2]*a.m[1],c=this.m[1]*a.m[0]+this.m[3]*a.m[1],d=this.m[0]*a.m[2]+this.m[2]*a.m[3],e=this.m[1]*a.m[2]+this.m[3]*a.m[3],f=this.m[0]*a.m[4]+this.m[2]*a.m[5]+this.m[4],g=this.m[1]*a.m[4]+this.m[3]*a.m[5]+this.m[5];return this.m[0]=b,this.m[1]=c,this.m[2]=d,this.m[3]=e,this.m[4]=f,this.m[5]=g,this},invert:function(){var a=1/(this.m[0]*this.m[3]-this.m[1]*this.m[2]),b=this.m[3]*a,c=-this.m[1]*a,d=-this.m[2]*a,e=this.m[0]*a,f=a*(this.m[2]*this.m[5]-this.m[3]*this.m[4]),g=a*(this.m[1]*this.m[4]-this.m[0]*this.m[5]);return this.m[0]=b,this.m[1]=c,this.m[2]=d,this.m[3]=e,this.m[4]=f,this.m[5]=g,this},getMatrix:function(){return this.m},setAbsolutePosition:function(a,b){var c=this.m[0],d=this.m[1],e=this.m[2],f=this.m[3],g=this.m[4],h=this.m[5],i=(c*(b-h)-d*(a-g))/(c*f-d*e),j=(a-g-e*i)/c;return this.translate(j,i)}};var a="2d",b="[object Array]",c="[object Number]",d="[object String]",e=Math.PI/180,f=180/Math.PI,g="#",h="",i="0",j="Kinetic warning: ",k="Kinetic error: ",l="rgb(",m={aqua:[0,255,255],lime:[0,255,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,255],navy:[0,0,128],white:[255,255,255],fuchsia:[255,0,255],olive:[128,128,0],yellow:[255,255,0],orange:[255,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[255,0,0],pink:[255,192,203],cyan:[0,255,255],transparent:[255,255,255,0]},n=/rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)/;Kinetic.Util={_isElement:function(a){return!(!a||1!=a.nodeType)},_isFunction:function(a){return!!(a&&a.constructor&&a.call&&a.apply)},_isObject:function(a){return!!a&&a.constructor==Object},_isArray:function(a){return Object.prototype.toString.call(a)==b},_isNumber:function(a){return Object.prototype.toString.call(a)==c},_isString:function(a){return Object.prototype.toString.call(a)==d},_throttle:function(a,b,c){var d,e,f,g=null,h=0,i=c||{},j=function(){h=i.leading===!1?0:(new Date).getTime(),g=null,f=a.apply(d,e),d=e=null};return function(){var c=(new Date).getTime();h||i.leading!==!1||(h=c);var k=b-(c-h);return d=this,e=arguments,0>=k?(clearTimeout(g),g=null,h=c,f=a.apply(d,e),d=e=null):g||i.trailing===!1||(g=setTimeout(j,k)),f}},_hasMethods:function(a){var b,c=[];for(b in a)this._isFunction(a[b])&&c.push(b);return c.length>0},createCanvasElement:function(){var a=Kinetic.document.createElement("canvas");try{a.style=a.style||{}}catch(b){}return a},isBrowser:function(){return"object"!=typeof exports},_isInDocument:function(a){for(;a=a.parentNode;)if(a==Kinetic.document)return!0;return!1},_simplifyArray:function(a){var b,c,d=[],e=a.length,f=Kinetic.Util;for(b=0;e>b;b++)c=a[b],f._isNumber(c)?c=Math.round(1e3*c)/1e3:f._isString(c)||(c=c.toString()),d.push(c);return d},_getImage:function(b,c){var d,e;if(b)if(this._isElement(b))c(b);else if(this._isString(b))d=new Kinetic.window.Image,d.onload=function(){c(d)},d.src=b;else if(b.data){e=Kinetic.Util.createCanvasElement(),e.width=b.width,e.height=b.height;var f=e.getContext(a);f.putImageData(b,0,0),this._getImage(e.toDataURL(),c)}else c(null);else c(null)},_getRGBAString:function(a){var b=a.red||0,c=a.green||0,d=a.blue||0,e=a.alpha||1;return["rgba(",b,",",c,",",d,",",e,")"].join(h)},_rgbToHex:function(a,b,c){return((1<<24)+(a<<16)+(b<<8)+c).toString(16).slice(1)},_hexToRgb:function(a){a=a.replace(g,h);var b=parseInt(a,16);return{r:b>>16&255,g:b>>8&255,b:255&b}},getRandomColor:function(){for(var a=(16777215*Math.random()<<0).toString(16);a.length<6;)a=i+a;return g+a},get:function(a,b){return void 0===a?b:a},getRGB:function(a){var b;return a in m?(b=m[a],{r:b[0],g:b[1],b:b[2]}):a[0]===g?this._hexToRgb(a.substring(1)):a.substr(0,4)===l?(b=n.exec(a.replace(/ /g,"")),{r:parseInt(b[1],10),g:parseInt(b[2],10),b:parseInt(b[3],10)}):{r:0,g:0,b:0}},_merge:function(a,b){var c=this._clone(b);for(var d in a)c[d]=this._isObject(a[d])?this._merge(a[d],c[d]):a[d];return c},cloneObject:function(a){var b={};for(var c in a)b[c]=this._isObject(a[c])?this.cloneObject(a[c]):this._isArray(a[c])?this.cloneArray(a[c]):a[c];return b},cloneArray:function(a){return a.slice(0)},_degToRad:function(a){return a*e},_radToDeg:function(a){return a*f},_capitalize:function(a){return a.charAt(0).toUpperCase()+a.slice(1)},error:function(a){throw new Error(k+a)},warn:function(a){Kinetic.root.console&&console.warn&&Kinetic.showWarnings&&console.warn(j+a)},extend:function(a,b){function c(){this.constructor=a}c.prototype=b.prototype;var d=a.prototype;a.prototype=new c;for(var e in d)d.hasOwnProperty(e)&&(a.prototype[e]=d[e]);a.__super__=b.prototype},addMethods:function(a,b){var c;for(c in b)a.prototype[c]=b[c]},_getControlPoints:function(a,b,c,d,e,f,g){var h=Math.sqrt(Math.pow(c-a,2)+Math.pow(d-b,2)),i=Math.sqrt(Math.pow(e-c,2)+Math.pow(f-d,2)),j=g*h/(h+i),k=g*i/(h+i),l=c-j*(e-a),m=d-j*(f-b),n=c+k*(e-a),o=d+k*(f-b);return[l,m,n,o]},_expandPoints:function(a,b){var c,d,e=a.length,f=[];for(c=2;e-2>c;c+=2)d=Kinetic.Util._getControlPoints(a[c-2],a[c-1],a[c],a[c+1],a[c+2],a[c+3],b),f.push(d[0]),f.push(d[1]),f.push(a[c]),f.push(a[c+1]),f.push(d[2]),f.push(d[3]);return f},_removeLastLetter:function(a){return a.substring(0,a.length-1)}}}(),function(){var a=Kinetic.Util.createCanvasElement(),b=a.getContext("2d"),c=Kinetic.UA.mobile?function(){var a=window.devicePixelRatio||1,c=b.webkitBackingStorePixelRatio||b.mozBackingStorePixelRatio||b.msBackingStorePixelRatio||b.oBackingStorePixelRatio||b.backingStorePixelRatio||1;return a/c}():1;Kinetic.Canvas=function(a){this.init(a)},Kinetic.Canvas.prototype={init:function(a){var b=a||{},d=b.pixelRatio||Kinetic.pixelRatio||c;this.pixelRatio=d,this._canvas=Kinetic.Util.createCanvasElement(),this._canvas.style.padding=0,this._canvas.style.margin=0,this._canvas.style.border=0,this._canvas.style.background="transparent",this._canvas.style.position="absolute",this._canvas.style.top=0,this._canvas.style.left=0},getContext:function(){return this.context},getPixelRatio:function(){return this.pixelRatio},setPixelRatio:function(a){this.pixelRatio=a,this.setSize(this.getWidth(),this.getHeight())},setWidth:function(a){this.width=this._canvas.width=a*this.pixelRatio,this._canvas.style.width=a+"px"},setHeight:function(a){this.height=this._canvas.height=a*this.pixelRatio,this._canvas.style.height=a+"px"},getWidth:function(){return this.width},getHeight:function(){return this.height},setSize:function(a,b){this.setWidth(a),this.setHeight(b)},toDataURL:function(a,b){try{return this._canvas.toDataURL(a,b)}catch(c){try{return this._canvas.toDataURL()}catch(d){return Kinetic.Util.warn("Unable to get data URL. "+d.message),""}}}},Kinetic.SceneCanvas=function(a){var b=a||{},c=b.width||0,d=b.height||0;Kinetic.Canvas.call(this,b),this.context=new Kinetic.SceneContext(this),this.setSize(c,d)},Kinetic.SceneCanvas.prototype={setWidth:function(a){var b=this.pixelRatio,c=this.getContext()._context;Kinetic.Canvas.prototype.setWidth.call(this,a),c.scale(b,b)},setHeight:function(a){var b=this.pixelRatio,c=this.getContext()._context;Kinetic.Canvas.prototype.setHeight.call(this,a),c.scale(b,b)}},Kinetic.Util.extend(Kinetic.SceneCanvas,Kinetic.Canvas),Kinetic.HitCanvas=function(a){var b=a||{},c=b.width||0,d=b.height||0;Kinetic.Canvas.call(this,b),this.context=new Kinetic.HitContext(this),this.setSize(c,d),this.hitCanvas=!0},Kinetic.Util.extend(Kinetic.HitCanvas,Kinetic.Canvas)}(),function(){var a=",",b="(",c=")",d="([",e="])",f=";",g="()",h="=",i=["arc","arcTo","beginPath","bezierCurveTo","clearRect","clip","closePath","createLinearGradient","createPattern","createRadialGradient","drawImage","fill","fillText","getImageData","createImageData","lineTo","moveTo","putImageData","quadraticCurveTo","rect","restore","rotate","save","scale","setLineDash","setTransform","stroke","strokeText","transform","translate"];Kinetic.Context=function(a){this.init(a)},Kinetic.Context.prototype={init:function(a){this.canvas=a,this._context=a._canvas.getContext("2d"),Kinetic.enableTrace&&(this.traceArr=[],this._enableTrace())},fillShape:function(a){a.getFillEnabled()&&this._fill(a)},strokeShape:function(a){a.getStrokeEnabled()&&this._stroke(a)},fillStrokeShape:function(a){var b=a.getFillEnabled();b&&this._fill(a),a.getStrokeEnabled()&&this._stroke(a)},getTrace:function(i){var j,k,l,m,n=this.traceArr,o=n.length,p="";for(j=0;o>j;j++)k=n[j],l=k.method,l?(m=k.args,p+=l,p+=i?g:Kinetic.Util._isArray(m[0])?d+m.join(a)+e:b+m.join(a)+c):(p+=k.property,i||(p+=h+k.val)),p+=f;return p},clearTrace:function(){this.traceArr=[]},_trace:function(a){var b,c=this.traceArr;c.push(a),b=c.length,b>=Kinetic.traceArrMax&&c.shift()},reset:function(){var a=this.getCanvas().getPixelRatio();this.setTransform(1*a,0,0,1*a,0,0)},getCanvas:function(){return this.canvas},clear:function(a){var b=this.getCanvas();a?this.clearRect(a.x||0,a.y||0,a.width||0,a.height||0):this.clearRect(0,0,b.getWidth(),b.getHeight())},_applyLineCap:function(a){var b=a.getLineCap();b&&this.setAttr("lineCap",b)},_applyOpacity:function(a){var b=a.getAbsoluteOpacity();1!==b&&this.setAttr("globalAlpha",b)},_applyLineJoin:function(a){var b=a.getLineJoin();b&&this.setAttr("lineJoin",b)},setAttr:function(a,b){this._context[a]=b},arc:function(){var a=arguments;this._context.arc(a[0],a[1],a[2],a[3],a[4],a[5])},beginPath:function(){this._context.beginPath()},bezierCurveTo:function(){var a=arguments;this._context.bezierCurveTo(a[0],a[1],a[2],a[3],a[4],a[5])},clearRect:function(){var a=arguments;this._context.clearRect(a[0],a[1],a[2],a[3])},clip:function(){this._context.clip()},closePath:function(){this._context.closePath()},createImageData:function(){var a=arguments;return 2===a.length?this._context.createImageData(a[0],a[1]):1===a.length?this._context.createImageData(a[0]):void 0},createLinearGradient:function(){var a=arguments;return this._context.createLinearGradient(a[0],a[1],a[2],a[3])},createPattern:function(){var a=arguments;return this._context.createPattern(a[0],a[1])},createRadialGradient:function(){var a=arguments;return this._context.createRadialGradient(a[0],a[1],a[2],a[3],a[4],a[5])},drawImage:function(){var a=arguments,b=this._context;3===a.length?b.drawImage(a[0],a[1],a[2]):5===a.length?b.drawImage(a[0],a[1],a[2],a[3],a[4]):9===a.length&&b.drawImage(a[0],a[1],a[2],a[3],a[4],a[5],a[6],a[7],a[8])},fill:function(){this._context.fill()},fillText:function(){var a=arguments;this._context.fillText(a[0],a[1],a[2])},getImageData:function(){var a=arguments;return this._context.getImageData(a[0],a[1],a[2],a[3])},lineTo:function(){var a=arguments;this._context.lineTo(a[0],a[1])},moveTo:function(){var a=arguments;this._context.moveTo(a[0],a[1])},rect:function(){var a=arguments;this._context.rect(a[0],a[1],a[2],a[3])},putImageData:function(){var a=arguments;this._context.putImageData(a[0],a[1],a[2])},quadraticCurveTo:function(){var a=arguments;this._context.quadraticCurveTo(a[0],a[1],a[2],a[3])},restore:function(){this._context.restore()},rotate:function(){var a=arguments;this._context.rotate(a[0])},save:function(){this._context.save()},scale:function(){var a=arguments;this._context.scale(a[0],a[1])},setLineDash:function(){var a=arguments,b=this._context;this._context.setLineDash?b.setLineDash(a[0]):"mozDash"in b?b.mozDash=a[0]:"webkitLineDash"in b&&(b.webkitLineDash=a[0])},setTransform:function(){var a=arguments;this._context.setTransform(a[0],a[1],a[2],a[3],a[4],a[5])},stroke:function(){this._context.stroke()},strokeText:function(){var a=arguments;this._context.strokeText(a[0],a[1],a[2])},transform:function(){var a=arguments;this._context.transform(a[0],a[1],a[2],a[3],a[4],a[5])},translate:function(){var a=arguments;this._context.translate(a[0],a[1])},_enableTrace:function(){var a,b,c=this,d=i.length,e=Kinetic.Util._simplifyArray,f=this.setAttr,g=function(a){var d,f=c[a];c[a]=function(){return b=e(Array.prototype.slice.call(arguments,0)),d=f.apply(c,arguments),c._trace({method:a,args:b}),d}};for(a=0;d>a;a++)g(i[a]);c.setAttr=function(){f.apply(c,arguments),c._trace({property:arguments[0],val:arguments[1]})}}},Kinetic.SceneContext=function(a){Kinetic.Context.call(this,a)},Kinetic.SceneContext.prototype={_fillColor:function(a){var b=a.fill()||Kinetic.Util._getRGBAString({red:a.fillRed(),green:a.fillGreen(),blue:a.fillBlue(),alpha:a.fillAlpha()});this.setAttr("fillStyle",b),a._fillFunc(this)},_fillPattern:function(a){var b=a.getFillPatternImage(),c=a.getFillPatternX(),d=a.getFillPatternY(),e=a.getFillPatternScale(),f=Kinetic.getAngle(a.getFillPatternRotation()),g=a.getFillPatternOffset(),h=a.getFillPatternRepeat();(c||d)&&this.translate(c||0,d||0),f&&this.rotate(f),e&&this.scale(e.x,e.y),g&&this.translate(-1*g.x,-1*g.y),this.setAttr("fillStyle",this.createPattern(b,h||"repeat")),this.fill()},_fillLinearGradient:function(a){var b=a.getFillLinearGradientStartPoint(),c=a.getFillLinearGradientEndPoint(),d=a.getFillLinearGradientColorStops(),e=this.createLinearGradient(b.x,b.y,c.x,c.y);if(d){for(var f=0;fh;h++)i=e[h],a[i]=this.getAttr(d+k(i));return a},c.prototype[m]=function(a){var b,c=this.attrs[d];f&&(a=f.call(this,a));for(b in a)this._setAttr(d+k(b),a[b]);return this._fireChangeEvent(d,c,a),g&&g.call(this),this},this.addOverloadedGetterSetter(c,d)},addOverloadedGetterSetter:function(c,d){var e=Kinetic.Util._capitalize(d),f=b+e,g=a+e;c.prototype[d]=function(){return arguments.length?(this[f](arguments[0]),this):this[g]()}},backCompat:function(a,b){var c;for(c in b)a.prototype[c]=a.prototype[b[c]]},afterSetFilter:function(){this._filterUpToDate=!1}},Kinetic.Validators={RGBComponent:function(a){return a>255?255:0>a?0:Math.round(a)},alphaComponent:function(a){return a>1?1:1e-4>a?1e-4:a}}}(),function(){var a="absoluteOpacity",b="absoluteTransform",c="Change",d="children",e=".",f="",g="get",h="id",i="kinetic",j="listening",k="mouseenter",l="mouseleave",m="name",n="set",o="Shape",p=" ",q="stage",r="transform",s="Stage",t="visible",u=["id"],v=["xChange.kinetic","yChange.kinetic","scaleXChange.kinetic","scaleYChange.kinetic","skewXChange.kinetic","skewYChange.kinetic","rotationChange.kinetic","offsetXChange.kinetic","offsetYChange.kinetic","transformsEnabledChange.kinetic"].join(p);Kinetic.Util.addMethods(Kinetic.Node,{_init:function(c){var d=this;this._id=Kinetic.idCounter++,this.eventListeners={},this.attrs={},this._cache={},this._filterUpToDate=!1,this.setAttrs(c),this.on(v,function(){this._clearCache(r),d._clearSelfAndDescendantCache(b)}),this.on("visibleChange.kinetic",function(){d._clearSelfAndDescendantCache(t)}),this.on("listeningChange.kinetic",function(){d._clearSelfAndDescendantCache(j)}),this.on("opacityChange.kinetic",function(){d._clearSelfAndDescendantCache(a)})},_clearCache:function(a){a?delete this._cache[a]:this._cache={}},_getCache:function(a,b){var c=this._cache[a];return void 0===c&&(this._cache[a]=b.call(this)),this._cache[a]},_clearSelfAndDescendantCache:function(a){this._clearCache(a),this.children&&this.getChildren().each(function(b){b._clearSelfAndDescendantCache(a)})},clearCache:function(){return delete this._cache.canvas,this._filterUpToDate=!1,this},cache:function(a){var b=a||{},c=b.x||0,d=b.y||0,e=b.width||this.width(),f=b.height||this.height(),g=b.drawBorder||!1;if(0===e||0===f)return void Kinetic.Util.warn("Width or height of caching configuration equals 0. Cache is ignored.");var h=new Kinetic.SceneCanvas({pixelRatio:1,width:e,height:f}),i=new Kinetic.SceneCanvas({pixelRatio:1,width:e,height:f}),j=new Kinetic.HitCanvas({width:e,height:f}),k=h.getContext(),l=j.getContext();return j.isCache=!0,this.clearCache(),k.save(),l.save(),g&&(k.save(),k.beginPath(),k.rect(0,0,e,f),k.closePath(),k.setAttr("strokeStyle","red"),k.setAttr("lineWidth",5),k.stroke(),k.restore()),k.translate(-1*c,-1*d),l.translate(-1*c,-1*d),"Shape"===this.nodeType&&(k.translate(-1*this.x(),-1*this.y()),l.translate(-1*this.x(),-1*this.y())),this.drawScene(h,this),this.drawHit(j,this),k.restore(),l.restore(),this._cache.canvas={scene:h,filter:i,hit:j},this},_drawCachedSceneCanvas:function(a){a.save(),this.getLayer()._applyTransform(this,a),a._applyOpacity(this),a.drawImage(this._getCachedSceneCanvas()._canvas,0,0),a.restore()},_getCachedSceneCanvas:function(){var a,b,c,d,e=this.filters(),f=this._cache.canvas,g=f.scene,h=f.filter,i=h.getContext();if(e){if(!this._filterUpToDate){try{for(a=e.length,i.clear(),i.drawImage(g._canvas,0,0),b=i.getImageData(0,0,h.getWidth(),h.getHeight()),c=0;a>c;c++)d=e[c],d.call(this,b),i.putImageData(b,0,0)}catch(j){Kinetic.Util.warn("Unable to apply filter. "+j.message)}this._filterUpToDate=!0}return h}return g},_drawCachedHitCanvas:function(a){var b=this._cache.canvas,c=b.hit;a.save(),this.getLayer()._applyTransform(this,a),a.drawImage(c._canvas,0,0),a.restore()},on:function(a,b){var c,d,g,h,i,j=a.split(p),k=j.length;for(c=0;k>c;c++)d=j[c],g=d.split(e),h=g[0],i=g[1]||f,this.eventListeners[h]||(this.eventListeners[h]=[]),this.eventListeners[h].push({name:i,handler:b});return this},off:function(a){var b,c,d,f,g,h,i=(a||"").split(p),j=i.length;if(!a)for(c in this.eventListeners)this._off(c);for(b=0;j>b;b++)if(d=i[b],f=d.split(e),g=f[0],h=f[1],g)this.eventListeners[g]&&this._off(g,h);else for(c in this.eventListeners)this._off(c,h);return this},dispatchEvent:function(a){var b={target:this,type:a.type,evt:a};this.fire(a.type,b)},addEventListener:function(a,b){this.on(a,function(a){b.call(this,a.evt)})},removeEventListener:function(a){this.off(a)},remove:function(){var c=this.getParent();return c&&c.children&&(c.children.splice(this.index,1),c._setChildrenIndices(),delete this.parent),this._clearSelfAndDescendantCache(q),this._clearSelfAndDescendantCache(b),this._clearSelfAndDescendantCache(t),this._clearSelfAndDescendantCache(j),this._clearSelfAndDescendantCache(a),this},destroy:function(){Kinetic._removeId(this.getId()),Kinetic._removeName(this.getName(),this._id),this.remove()},getAttr:function(a){var b=g+Kinetic.Util._capitalize(a);return Kinetic.Util._isFunction(this[b])?this[b]():this.attrs[a]},getAncestors:function(){for(var a=this.getParent(),b=new Kinetic.Collection;a;)b.push(a),a=a.getParent();return b},getAttrs:function(){return this.attrs||{}},setAttrs:function(a){var b,c;if(a)for(b in a)b===d||a[b]instanceof Kinetic.Node||(c=n+Kinetic.Util._capitalize(b),Kinetic.Util._isFunction(this[c])?this[c](a[b]):this._setAttr(b,a[b]));return this},isListening:function(){return this._getCache(j,this._isListening)},_isListening:function(){var a=this.getListening(),b=this.getParent();return"inherit"===a?b?b.isListening():!0:a},isVisible:function(){return this._getCache(t,this._isVisible)},_isVisible:function(){var a=this.getVisible(),b=this.getParent();return"inherit"===a?b?b.isVisible():!0:a},shouldDrawHit:function(a){var b=this.getLayer();return a&&a.isCache||b&&b.hitGraphEnabled()&&this.isListening()&&this.isVisible()},show:function(){return this.setVisible(!0),this},hide:function(){return this.setVisible(!1),this},getZIndex:function(){return this.index||0},getAbsoluteZIndex:function(){function a(i){for(b=[],c=i.length,d=0;c>d;d++)e=i[d],h++,e.nodeType!==o&&(b=b.concat(e.getChildren().toArray())),e._id===g._id&&(d=c);b.length>0&&b[0].getDepth()<=f&&a(b)}var b,c,d,e,f=this.getDepth(),g=this,h=0;return g.nodeType!==s&&a(g.getStage().getChildren()),h},getDepth:function(){for(var a=0,b=this.parent;b;)a++,b=b.parent;return a},setPosition:function(a){return this.setX(a.x),this.setY(a.y),this},getPosition:function(){return{x:this.getX(),y:this.getY()}},getAbsolutePosition:function(){var a=this.getAbsoluteTransform().getMatrix(),b=new Kinetic.Transform,c=this.offset();return b.m=a.slice(),b.translate(c.x,c.y),b.getTranslation()},setAbsolutePosition:function(a){var b,c=this._clearTransform();return this.attrs.x=c.x,this.attrs.y=c.y,delete c.x,delete c.y,b=this.getAbsoluteTransform(),b.invert(),b.translate(a.x,a.y),a={x:this.attrs.x+b.getTranslation().x,y:this.attrs.y+b.getTranslation().y},this.setPosition({x:a.x,y:a.y}),this._setTransform(c),this},_setTransform:function(a){var c;for(c in a)this.attrs[c]=a[c];this._clearCache(r),this._clearSelfAndDescendantCache(b)},_clearTransform:function(){var a={x:this.getX(),y:this.getY(),rotation:this.getRotation(),scaleX:this.getScaleX(),scaleY:this.getScaleY(),offsetX:this.getOffsetX(),offsetY:this.getOffsetY(),skewX:this.getSkewX(),skewY:this.getSkewY()};return this.attrs.x=0,this.attrs.y=0,this.attrs.rotation=0,this.attrs.scaleX=1,this.attrs.scaleY=1,this.attrs.offsetX=0,this.attrs.offsetY=0,this.attrs.skewX=0,this.attrs.skewY=0,this._clearCache(r),this._clearSelfAndDescendantCache(b),a},move:function(a){var b=a.x,c=a.y,d=this.getX(),e=this.getY();return void 0!==b&&(d+=b),void 0!==c&&(e+=c),this.setPosition({x:d,y:e}),this},_eachAncestorReverse:function(a,b){var c,d,e=[],f=this.getParent();if(b&&b._id===this._id)return a(this),!0;for(e.unshift(this);f&&(!b||f._id!==b._id);)e.unshift(f),f=f.parent;for(c=e.length,d=0;c>d;d++)a(e[d])},rotate:function(a){return this.setRotation(this.getRotation()+a),this},moveToTop:function(){if(!this.parent)return void Kinetic.Util.warn("Node has no parent. moveToTop function is ignored.");var a=this.index;return this.parent.children.splice(a,1),this.parent.children.push(this),this.parent._setChildrenIndices(),!0},moveUp:function(){if(!this.parent)return void Kinetic.Util.warn("Node has no parent. moveUp function is ignored.");var a=this.index,b=this.parent.getChildren().length;return b-1>a?(this.parent.children.splice(a,1),this.parent.children.splice(a+1,0,this),this.parent._setChildrenIndices(),!0):!1},moveDown:function(){if(!this.parent)return void Kinetic.Util.warn("Node has no parent. moveDown function is ignored.");var a=this.index;return a>0?(this.parent.children.splice(a,1),this.parent.children.splice(a-1,0,this),this.parent._setChildrenIndices(),!0):!1},moveToBottom:function(){if(!this.parent)return void Kinetic.Util.warn("Node has no parent. moveToBottom function is ignored.");var a=this.index;return a>0?(this.parent.children.splice(a,1),this.parent.children.unshift(this),this.parent._setChildrenIndices(),!0):!1},setZIndex:function(a){if(!this.parent)return void Kinetic.Util.warn("Node has no parent. zIndex parameter is ignored.");var b=this.index;return this.parent.children.splice(b,1),this.parent.children.splice(a,0,this),this.parent._setChildrenIndices(),this},getAbsoluteOpacity:function(){return this._getCache(a,this._getAbsoluteOpacity)},_getAbsoluteOpacity:function(){var a=this.getOpacity();return this.getParent()&&(a*=this.getParent().getAbsoluteOpacity()),a},moveTo:function(a){return this.getParent()!==a&&(this.remove(),a.add(this)),this},toObject:function(){var a,b,c,d,e=Kinetic.Util,f={},g=this.getAttrs();f.attrs={};for(a in g)b=g[a],e._isFunction(b)||e._isElement(b)||e._isObject(b)&&e._hasMethods(b)||(c=this[a],delete g[a],d=c?c.call(this):null,g[a]=b,d!==b&&(f.attrs[a]=b));return f.className=this.getClassName(),f},toJSON:function(){return JSON.stringify(this.toObject())},getParent:function(){return this.parent},getLayer:function(){var a=this.getParent();return a?a.getLayer():null},getStage:function(){return this._getCache(q,this._getStage)},_getStage:function(){var a=this.getParent();return a?a.getStage():void 0},fire:function(a,b,c){return c?this._fireAndBubble(a,b||{}):this._fire(a,b||{}),this},getAbsoluteTransform:function(a){return a?this._getAbsoluteTransform(a):this._getCache(b,this._getAbsoluteTransform)},_getAbsoluteTransform:function(a){var b,c,d=new Kinetic.Transform;return this._eachAncestorReverse(function(a){b=a.transformsEnabled(),c=a.getTransform(),"all"===b?d.multiply(c):"position"===b&&d.translate(a.x(),a.y())},a),d},getTransform:function(){return this._getCache(r,this._getTransform)},_getTransform:function(){var a=new Kinetic.Transform,b=this.getX(),c=this.getY(),d=Kinetic.getAngle(this.getRotation()),e=this.getScaleX(),f=this.getScaleY(),g=this.getSkewX(),h=this.getSkewY(),i=this.getOffsetX(),j=this.getOffsetY();return(0!==b||0!==c)&&a.translate(b,c),0!==d&&a.rotate(d),(0!==g||0!==h)&&a.skew(g,h),(1!==e||1!==f)&&a.scale(e,f),(0!==i||0!==j)&&a.translate(-1*i,-1*j),a},clone:function(a){var b,c,d,e,f,g=this.getClassName(),h=Kinetic.Util.cloneObject(this.attrs);for(var j in u){var k=u[j];delete h[k]}for(b in a)h[b]=a[b];var l=new Kinetic[g](h);for(b in this.eventListeners)for(c=this.eventListeners[b],d=c.length,e=0;d>e;e++)f=c[e],f.name.indexOf(i)<0&&(l.eventListeners[b]||(l.eventListeners[b]=[]),l.eventListeners[b].push(f));return l},toDataURL:function(a){a=a||{};var b=a.mimeType||null,c=a.quality||null,d=this.getStage(),e=a.x||0,f=a.y||0,g=new Kinetic.SceneCanvas({width:a.width||this.getWidth()||(d?d.getWidth():0),height:a.height||this.getHeight()||(d?d.getHeight():0),pixelRatio:1}),h=g.getContext();return h.save(),(e||f)&&h.translate(-1*e,-1*f),this.drawScene(g),h.restore(),g.toDataURL(b,c)},toImage:function(a){Kinetic.Util._getImage(this.toDataURL(a),function(b){a.callback(b)})},setSize:function(a){return this.setWidth(a.width),this.setHeight(a.height),this},getSize:function(){return{width:this.getWidth(),height:this.getHeight()}},getWidth:function(){return this.attrs.width||0},getHeight:function(){return this.attrs.height||0},getClassName:function(){return this.className||this.nodeType},getType:function(){return this.nodeType},getDragDistance:function(){return void 0!==this.attrs.dragDistance?this.attrs.dragDistance:this.parent?this.parent.getDragDistance():Kinetic.dragDistance -},_get:function(a){return this.className===a||this.nodeType===a?[this]:[]},_off:function(a,b){var c,d,e=this.eventListeners[a];for(c=0;ce;e++)c.add(this._createNode(g[e]));return c},Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node,"position"),Kinetic.Factory.addGetterSetter(Kinetic.Node,"x",0),Kinetic.Factory.addGetterSetter(Kinetic.Node,"y",0),Kinetic.Factory.addGetterSetter(Kinetic.Node,"opacity",1),Kinetic.Factory.addGetter(Kinetic.Node,"name"),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node,"name"),Kinetic.Factory.addGetter(Kinetic.Node,"id"),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node,"id"),Kinetic.Factory.addGetterSetter(Kinetic.Node,"rotation",0),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Node,"scale",["x","y"]),Kinetic.Factory.addGetterSetter(Kinetic.Node,"scaleX",1),Kinetic.Factory.addGetterSetter(Kinetic.Node,"scaleY",1),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Node,"skew",["x","y"]),Kinetic.Factory.addGetterSetter(Kinetic.Node,"skewX",0),Kinetic.Factory.addGetterSetter(Kinetic.Node,"skewY",0),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Node,"offset",["x","y"]),Kinetic.Factory.addGetterSetter(Kinetic.Node,"offsetX",0),Kinetic.Factory.addGetterSetter(Kinetic.Node,"offsetY",0),Kinetic.Factory.addSetter(Kinetic.Node,"dragDistance"),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node,"dragDistance"),Kinetic.Factory.addSetter(Kinetic.Node,"width",0),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node,"width"),Kinetic.Factory.addSetter(Kinetic.Node,"height",0),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node,"height"),Kinetic.Factory.addGetterSetter(Kinetic.Node,"listening","inherit"),Kinetic.Factory.addGetterSetter(Kinetic.Node,"filters",void 0,function(a){return this._filterUpToDate=!1,a}),Kinetic.Factory.addGetterSetter(Kinetic.Node,"visible","inherit"),Kinetic.Factory.addGetterSetter(Kinetic.Node,"transformsEnabled","all"),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node,"size"),Kinetic.Factory.backCompat(Kinetic.Node,{rotateDeg:"rotate",setRotationDeg:"setRotation",getRotationDeg:"getRotation"}),Kinetic.Collection.mapMethods(Kinetic.Node)}(),function(){Kinetic.Filters.Grayscale=function(a){var b,c,d=a.data,e=d.length;for(b=0;e>b;b+=4)c=.34*d[b]+.5*d[b+1]+.16*d[b+2],d[b]=c,d[b+1]=c,d[b+2]=c}}(),function(){Kinetic.Filters.Brighten=function(a){var b,c=255*this.brightness(),d=a.data,e=d.length;for(b=0;e>b;b+=4)d[b]+=c,d[b+1]+=c,d[b+2]+=c},Kinetic.Factory.addGetterSetter(Kinetic.Node,"brightness",0,null,Kinetic.Factory.afterSetFilter)}(),function(){Kinetic.Filters.Invert=function(a){var b,c=a.data,d=c.length;for(b=0;d>b;b+=4)c[b]=255-c[b],c[b+1]=255-c[b+1],c[b+2]=255-c[b+2]}}(),function(){function a(){this.r=0,this.g=0,this.b=0,this.a=0,this.next=null}function b(b,e){var f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D=b.data,E=b.width,F=b.height,G=e+e+1,H=E-1,I=F-1,J=e+1,K=J*(J+1)/2,L=new a,M=null,N=L,O=null,P=null,Q=c[e],R=d[e];for(h=1;G>h;h++)N=N.next=new a,h==J&&(M=N);for(N.next=L,l=k=0,g=0;F>g;g++){for(u=v=w=x=m=n=o=p=0,q=J*(y=D[k]),r=J*(z=D[k+1]),s=J*(A=D[k+2]),t=J*(B=D[k+3]),m+=K*y,n+=K*z,o+=K*A,p+=K*B,N=L,h=0;J>h;h++)N.r=y,N.g=z,N.b=A,N.a=B,N=N.next;for(h=1;J>h;h++)i=k+((h>H?H:h)<<2),m+=(N.r=y=D[i])*(C=J-h),n+=(N.g=z=D[i+1])*C,o+=(N.b=A=D[i+2])*C,p+=(N.a=B=D[i+3])*C,u+=y,v+=z,w+=A,x+=B,N=N.next;for(O=L,P=M,f=0;E>f;f++)D[k+3]=B=p*Q>>R,0!==B?(B=255/B,D[k]=(m*Q>>R)*B,D[k+1]=(n*Q>>R)*B,D[k+2]=(o*Q>>R)*B):D[k]=D[k+1]=D[k+2]=0,m-=q,n-=r,o-=s,p-=t,q-=O.r,r-=O.g,s-=O.b,t-=O.a,i=l+((i=f+e+1)f;f++){for(v=w=x=u=n=o=p=m=0,k=f<<2,q=J*(y=D[k]),r=J*(z=D[k+1]),s=J*(A=D[k+2]),t=J*(B=D[k+3]),m+=K*y,n+=K*z,o+=K*A,p+=K*B,N=L,h=0;J>h;h++)N.r=y,N.g=z,N.b=A,N.a=B,N=N.next;for(j=E,h=1;e>=h;h++)k=j+f<<2,m+=(N.r=y=D[k])*(C=J-h),n+=(N.g=z=D[k+1])*C,o+=(N.b=A=D[k+2])*C,p+=(N.a=B=D[k+3])*C,u+=y,v+=z,w+=A,x+=B,N=N.next,I>h&&(j+=E);for(k=f,O=L,P=M,g=0;F>g;g++)i=k<<2,D[i+3]=B=p*Q>>R,B>0?(B=255/B,D[i]=(m*Q>>R)*B,D[i+1]=(n*Q>>R)*B,D[i+2]=(o*Q>>R)*B):D[i]=D[i+1]=D[i+2]=0,m-=q,n-=r,o-=s,p-=t,q-=O.r,r-=O.g,s-=O.b,t-=O.a,i=f+((i=g+J)0&&b(a,c)},Kinetic.Factory.addGetterSetter(Kinetic.Node,"blurRadius",0,null,Kinetic.Factory.afterSetFilter)}(),function(){function a(a,b,c){var d=4*(c*a.width+b),e=[];return e.push(a.data[d++],a.data[d++],a.data[d++],a.data[d++]),e}function b(a,b){return Math.sqrt(Math.pow(a[0]-b[0],2)+Math.pow(a[1]-b[1],2)+Math.pow(a[2]-b[2],2))}function c(a){for(var b=[0,0,0],c=0;cn?0:255}return l}}function e(a,b){for(var c=0;ch;h++)for(var i=0;b>i;i++){for(var j=h*b+i,k=0,l=0;e>l;l++)for(var m=0;e>m;m++){var n=h+l-f,o=i+m-f;if(n>=0&&c>n&&o>=0&&b>o){var p=n*b+o,q=d[l*e+m];k+=a[p]*q}}g[j]=2040===k?255:0}return g}function g(a,b,c){for(var d=[1,1,1,1,1,1,1,1,1],e=Math.round(Math.sqrt(d.length)),f=Math.floor(e/2),g=[],h=0;c>h;h++)for(var i=0;b>i;i++){for(var j=h*b+i,k=0,l=0;e>l;l++)for(var m=0;e>m;m++){var n=h+l-f,o=i+m-f;if(n>=0&&c>n&&o>=0&&b>o){var p=n*b+o,q=d[l*e+m];k+=a[p]*q}}g[j]=k>=1020?255:0}return g}function h(a,b,c){for(var d=[1/9,1/9,1/9,1/9,1/9,1/9,1/9,1/9,1/9],e=Math.round(Math.sqrt(d.length)),f=Math.floor(e/2),g=[],h=0;c>h;h++)for(var i=0;b>i;i++){for(var j=h*b+i,k=0,l=0;e>l;l++)for(var m=0;e>m;m++){var n=h+l-f,o=i+m-f;if(n>=0&&c>n&&o>=0&&b>o){var p=n*b+o,q=d[l*e+m];k+=a[p]*q}}g[j]=k}return g}Kinetic.Filters.Mask=function(a){var b=this.threshold(),c=d(a,b);return c&&(c=f(c,a.width,a.height),c=g(c,a.width,a.height),c=h(c,a.width,a.height),e(a,c)),a},Kinetic.Factory.addGetterSetter(Kinetic.Node,"threshold",0,null,Kinetic.Factory.afterSetFilter)}(),function(){Kinetic.Filters.RGB=function(a){var b,c,d=a.data,e=d.length,f=this.red(),g=this.green(),h=this.blue();for(b=0;e>b;b+=4)c=(.34*d[b]+.5*d[b+1]+.16*d[b+2])/255,d[b]=c*f,d[b+1]=c*g,d[b+2]=c*h,d[b+3]=d[b+3]},Kinetic.Factory.addGetterSetter(Kinetic.Node,"red",0,function(a){return this._filterUpToDate=!1,a>255?255:0>a?0:Math.round(a)}),Kinetic.Factory.addGetterSetter(Kinetic.Node,"green",0,function(a){return this._filterUpToDate=!1,a>255?255:0>a?0:Math.round(a)}),Kinetic.Factory.addGetterSetter(Kinetic.Node,"blue",0,Kinetic.Validators.RGBComponent,Kinetic.Factory.afterSetFilter)}(),function(){Kinetic.Filters.HSV=function(a){var b,c,d,e,f,g=a.data,h=g.length,i=Math.pow(2,this.value()),j=Math.pow(2,this.saturation()),k=Math.abs(this.hue()+360)%360,l=i*j*Math.cos(k*Math.PI/180),m=i*j*Math.sin(k*Math.PI/180),n=.299*i+.701*l+.167*m,o=.587*i-.587*l+.33*m,p=.114*i-.114*l-.497*m,q=.299*i-.299*l-.328*m,r=.587*i+.413*l+.035*m,s=.114*i-.114*l+.293*m,t=.299*i-.3*l+1.25*m,u=.587*i-.586*l-1.05*m,v=.114*i+.886*l-.2*m;for(b=0;h>b;b+=4)c=g[b+0],d=g[b+1],e=g[b+2],f=g[b+3],g[b+0]=n*c+o*d+p*e,g[b+1]=q*c+r*d+s*e,g[b+2]=t*c+u*d+v*e,g[b+3]=f},Kinetic.Factory.addGetterSetter(Kinetic.Node,"hue",0,null,Kinetic.Factory.afterSetFilter),Kinetic.Factory.addGetterSetter(Kinetic.Node,"saturation",0,null,Kinetic.Factory.afterSetFilter),Kinetic.Factory.addGetterSetter(Kinetic.Node,"value",0,null,Kinetic.Factory.afterSetFilter)}(),function(){Kinetic.Factory.addGetterSetter(Kinetic.Node,"hue",0,null,Kinetic.Factory.afterSetFilter),Kinetic.Factory.addGetterSetter(Kinetic.Node,"saturation",0,null,Kinetic.Factory.afterSetFilter),Kinetic.Factory.addGetterSetter(Kinetic.Node,"luminance",0,null,Kinetic.Factory.afterSetFilter),Kinetic.Filters.HSL=function(a){var b,c,d,e,f,g=a.data,h=g.length,i=1,j=Math.pow(2,this.saturation()),k=Math.abs(this.hue()+360)%360,l=127*this.luminance(),m=i*j*Math.cos(k*Math.PI/180),n=i*j*Math.sin(k*Math.PI/180),o=.299*i+.701*m+.167*n,p=.587*i-.587*m+.33*n,q=.114*i-.114*m-.497*n,r=.299*i-.299*m-.328*n,s=.587*i+.413*m+.035*n,t=.114*i-.114*m+.293*n,u=.299*i-.3*m+1.25*n,v=.587*i-.586*m-1.05*n,w=.114*i+.886*m-.2*n;for(b=0;h>b;b+=4)c=g[b+0],d=g[b+1],e=g[b+2],f=g[b+3],g[b+0]=o*c+p*d+q*e+l,g[b+1]=r*c+s*d+t*e+l,g[b+2]=u*c+v*d+w*e+l,g[b+3]=f}}(),function(){Kinetic.Filters.Emboss=function(a){var b=10*this.embossStrength(),c=255*this.embossWhiteLevel(),d=this.embossDirection(),e=this.embossBlend(),f=0,g=0,h=a.data,i=a.width,j=a.height,k=4*i,l=j;switch(d){case"top-left":f=-1,g=-1;break;case"top":f=-1,g=0;break;case"top-right":f=-1,g=1;break;case"right":f=0,g=1;break;case"bottom-right":f=1,g=1;break;case"bottom":f=1,g=0;break;case"bottom-left":f=1,g=-1;break;case"left":f=0,g=-1}do{var m=(l-1)*k,n=f;1>l+n&&(n=0),l+n>j&&(n=0);var o=(l-1+n)*i*4,p=i;do{var q=m+4*(p-1),r=g;1>p+r&&(r=0),p+r>i&&(r=0);var s=o+4*(p-1+r),t=h[q]-h[s],u=h[q+1]-h[s+1],v=h[q+2]-h[s+2],w=t,x=w>0?w:-w,y=u>0?u:-u,z=v>0?v:-v;if(y>x&&(w=u),z>x&&(w=v),w*=b,e){var A=h[q]+w,B=h[q+1]+w,C=h[q+2]+w;h[q]=A>255?255:0>A?0:A,h[q+1]=B>255?255:0>B?0:B,h[q+2]=C>255?255:0>C?0:C}else{var D=c-w;0>D?D=0:D>255&&(D=255),h[q]=h[q+1]=h[q+2]=D}}while(--p)}while(--l)},Kinetic.Factory.addGetterSetter(Kinetic.Node,"embossStrength",.5,null,Kinetic.Factory.afterSetFilter),Kinetic.Factory.addGetterSetter(Kinetic.Node,"embossWhiteLevel",.5,null,Kinetic.Factory.afterSetFilter),Kinetic.Factory.addGetterSetter(Kinetic.Node,"embossDirection","top-left",null,Kinetic.Factory.afterSetFilter),Kinetic.Factory.addGetterSetter(Kinetic.Node,"embossBlend",!1,null,Kinetic.Factory.afterSetFilter)}(),function(){function a(a,b,c,d,e){var f,g=c-b,h=e-d;return 0===g?d+h/2:0===h?d:(f=(a-b)/g,f=h*f+d)}Kinetic.Filters.Enhance=function(b){var c,d,e,f,g=b.data,h=g.length,i=g[0],j=i,k=g[1],l=k,m=g[2],n=m,o=this.enhance();if(0!==o){for(f=0;h>f;f+=4)c=g[f+0],i>c?i=c:c>j&&(j=c),d=g[f+1],k>d?k=d:d>l&&(l=d),e=g[f+2],m>e?m=e:e>n&&(n=e);j===i&&(j=255,i=0),l===k&&(l=255,k=0),n===m&&(n=255,m=0);var p,q,r,s,t,u,v,w,x;for(o>0?(q=j+o*(255-j),r=i-o*(i-0),t=l+o*(255-l),u=k-o*(k-0),w=n+o*(255-n),x=m-o*(m-0)):(p=.5*(j+i),q=j+o*(j-p),r=i+o*(i-p),s=.5*(l+k),t=l+o*(l-s),u=k+o*(k-s),v=.5*(n+m),w=n+o*(n-v),x=m+o*(m-v)),f=0;h>f;f+=4)g[f+0]=a(g[f+0],i,j,r,q),g[f+1]=a(g[f+1],k,l,u,t),g[f+2]=a(g[f+2],m,n,x,w)}},Kinetic.Factory.addGetterSetter(Kinetic.Node,"enhance",0,null,Kinetic.Factory.afterSetFilter)}(),function(){Kinetic.Filters.Posterize=function(a){var b,c=Math.round(254*this.levels())+1,d=a.data,e=d.length,f=255/c;for(b=0;e>b;b+=1)d[b]=Math.floor(d[b]/f)*f},Kinetic.Factory.addGetterSetter(Kinetic.Node,"levels",.5,null,Kinetic.Factory.afterSetFilter)}(),function(){Kinetic.Filters.Noise=function(a){var b,c=255*this.noise(),d=a.data,e=d.length,f=c/2;for(b=0;e>b;b+=4)d[b+0]+=f-2*f*Math.random(),d[b+1]+=f-2*f*Math.random(),d[b+2]+=f-2*f*Math.random()},Kinetic.Factory.addGetterSetter(Kinetic.Node,"noise",.2,null,Kinetic.Factory.afterSetFilter)}(),function(){Kinetic.Filters.Pixelate=function(a){var b,c,d,e,f,g,h,i,j,k,l,m,n,o,p=Math.ceil(this.pixelSize()),q=a.width,r=a.height,s=Math.ceil(q/p),t=Math.ceil(r/p);for(a=a.data,m=0;s>m;m+=1)for(n=0;t>n;n+=1){for(e=0,f=0,g=0,h=0,i=m*p,j=i+p,k=n*p,l=k+p,o=0,b=i;j>b;b+=1)if(!(b>=q))for(c=k;l>c;c+=1)c>=r||(d=4*(q*c+b),e+=a[d+0],f+=a[d+1],g+=a[d+2],h+=a[d+3],o+=1);for(e/=o,f/=o,g/=o,b=i;j>b;b+=1)if(!(b>=q))for(c=k;l>c;c+=1)c>=r||(d=4*(q*c+b),a[d+0]=e,a[d+1]=f,a[d+2]=g,a[d+3]=h)}},Kinetic.Factory.addGetterSetter(Kinetic.Node,"pixelSize",8,null,Kinetic.Factory.afterSetFilter)}(),function(){Kinetic.Filters.Threshold=function(a){var b,c=255*this.threshold(),d=a.data,e=d.length;for(b=0;e>b;b+=1)d[b]=d[b]255?255:h,k[d+1]=i>255?255:i,k[d+2]=j>255?255:j,k[d+3]=k[d+3];while(--c)}while(--m)}}(),function(){Kinetic.Filters.Solarize=function(a){var b=a.data,c=a.width,d=a.height,e=4*c,f=d;do{var g=(f-1)*e,h=c;do{var i=g+4*(h-1),j=b[i],k=b[i+1],l=b[i+2];j>127&&(j=255-j),k>127&&(k=255-k),l>127&&(l=255-l),b[i]=j,b[i+1]=k,b[i+2]=l}while(--h)}while(--f)}}(),function(){var a=function(a,b,c){var d,e,f,g,h=a.data,i=b.data,j=a.width,k=a.height,l=c.polarCenterX||j/2,m=c.polarCenterY||k/2,n=0,o=0,p=0,q=0,r=Math.sqrt(l*l+m*m);e=j-l,f=k-m,g=Math.sqrt(e*e+f*f),r=g>r?g:r;var s,t,u,v,w=k,x=j,y=360/x*Math.PI/180;for(t=0;x>t;t+=1)for(u=Math.sin(t*y),v=Math.cos(t*y),s=0;w>s;s+=1)e=Math.floor(l+r*s/w*v),f=Math.floor(m+r*s/w*u),d=4*(f*j+e),n=h[d+0],o=h[d+1],p=h[d+2],q=h[d+3],d=4*(t+s*j),i[d+0]=n,i[d+1]=o,i[d+2]=p,i[d+3]=q},b=function(a,b,c){var d,e,f,g,h,i,j=a.data,k=b.data,l=a.width,m=a.height,n=c.polarCenterX||l/2,o=c.polarCenterY||m/2,p=0,q=0,r=0,s=0,t=Math.sqrt(n*n+o*o);e=l-n,f=m-o,i=Math.sqrt(e*e+f*f),t=i>t?i:t;var u,v,w,x,y=m,z=l,A=c.polarRotation||0;for(e=0;l>e;e+=1)for(f=0;m>f;f+=1)g=e-n,h=f-o,u=Math.sqrt(g*g+h*h)*y/t,v=(180*Math.atan2(h,g)/Math.PI+360+A)%360,v=v*z/360,w=Math.floor(v),x=Math.floor(u),d=4*(x*l+w),p=j[d+0],q=j[d+1],r=j[d+2],s=j[d+3],d=4*(f*l+e),k[d+0]=p,k[d+1]=q,k[d+2]=r,k[d+3]=s},c=Kinetic.Util.createCanvasElement();Kinetic.Filters.Kaleidoscope=function(d){var e,f,g,h,i,j,k,l,m,n,o=d.width,p=d.height,q=Math.round(this.kaleidoscopePower()),r=Math.round(this.kaleidoscopeAngle()),s=Math.floor(o*(r%360)/360);if(!(1>q)){c.width=o,c.height=p;var t=c.getContext("2d").getImageData(0,0,o,p);a(d,t,{polarCenterX:o/2,polarCenterY:p/2});for(var u=o/Math.pow(2,q);8>=u;)u=2*u,q-=1;u=Math.ceil(u);var v=u,w=0,x=v,y=1;for(s+u>o&&(w=v,x=0,y=-1),f=0;p>f;f+=1)for(e=w;e!==x;e+=y)g=Math.round(e+s)%o,m=4*(o*f+g),i=t.data[m+0],j=t.data[m+1],k=t.data[m+2],l=t.data[m+3],n=4*(o*f+e),t.data[n+0]=i,t.data[n+1]=j,t.data[n+2]=k,t.data[n+3]=l;for(f=0;p>f;f+=1)for(v=Math.floor(u),h=0;q>h;h+=1){for(e=0;v+1>e;e+=1)m=4*(o*f+e),i=t.data[m+0],j=t.data[m+1],k=t.data[m+2],l=t.data[m+3],n=4*(o*f+2*v-e-1),t.data[n+0]=i,t.data[n+1]=j,t.data[n+2]=k,t.data[n+3]=l;v*=2}b(t,d,{polarRotation:0})}},Kinetic.Factory.addGetterSetter(Kinetic.Node,"kaleidoscopePower",2,null,Kinetic.Factory.afterSetFilter),Kinetic.Factory.addGetterSetter(Kinetic.Node,"kaleidoscopeAngle",0,null,Kinetic.Factory.afterSetFilter)}(),function(){function a(a){setTimeout(a,1e3/60)}function b(){return e.apply(Kinetic.root,arguments)}var c=500,d=function(){return Kinetic.root.performance&&Kinetic.root.performance.now?function(){return Kinetic.root.performance.now()}:function(){return(new Date).getTime()}}(),e=function(){return Kinetic.root.requestAnimationFrame||Kinetic.root.webkitRequestAnimationFrame||Kinetic.root.mozRequestAnimationFrame||Kinetic.root.oRequestAnimationFrame||Kinetic.root.msRequestAnimationFrame||a}();Kinetic.Animation=function(a,b){var c=Kinetic.Animation;this.func=a,this.setLayers(b),this.id=c.animIdCounter++,this.frame={time:0,timeDiff:0,lastTime:d()}},Kinetic.Animation.prototype={setLayers:function(a){var b=[];b=a?a.length>0?a:[a]:[],this.layers=b},getLayers:function(){return this.layers},addLayer:function(a){var b,c,d=this.layers;if(d){for(b=d.length,c=0;b>c;c++)if(d[c]._id===a._id)return!1}else this.layers=[];return this.layers.push(a),!0},isRunning:function(){var a,b=Kinetic.Animation,c=b.animations,d=c.length;for(a=0;d>a;a++)if(c[a].id===this.id)return!0;return!1},start:function(){var a=Kinetic.Animation;this.stop(),this.frame.timeDiff=0,this.frame.lastTime=d(),a._addAnimation(this)},stop:function(){Kinetic.Animation._removeAnimation(this)},_updateFrameObject:function(a){this.frame.timeDiff=a-this.frame.lastTime,this.frame.lastTime=a,this.frame.time+=this.frame.timeDiff,this.frame.frameRate=1e3/this.frame.timeDiff}},Kinetic.Animation.animations=[],Kinetic.Animation.animIdCounter=0,Kinetic.Animation.animRunning=!1,Kinetic.Animation._addAnimation=function(a){this.animations.push(a),this._handleAnimation()},Kinetic.Animation._removeAnimation=function(a){var b,c=a.id,d=this.animations,e=d.length;for(b=0;e>b;b++)if(d[b].id===c){this.animations.splice(b,1);break}},Kinetic.Animation._runFrames=function(){var a,b,c,e,f,g,h,i,j,k={},l=this.animations;for(e=0;ef;f++)h=b[f],void 0!==h._id&&(k[h._id]=h);for(i in k)k[i].draw()},Kinetic.Animation._animationLoop=function(){var a=Kinetic.Animation;a.animations.length?(b(a._animationLoop),a._runFrames()):a.animRunning=!1},Kinetic.Animation._handleAnimation=function(){var a=this;this.animRunning||(this.animRunning=!0,a._animationLoop())};var f=Kinetic.Node.prototype.moveTo;Kinetic.Node.prototype.moveTo=function(a){f.call(this,a)},Kinetic.BaseLayer.prototype.batchDraw=function(){var a=this,b=Kinetic.Animation;this.batchAnim||(this.batchAnim=new b(function(){a.lastBatchDrawTime&&d()-a.lastBatchDrawTime>c&&a.batchAnim.stop()},this)),this.lastBatchDrawTime=d(),this.batchAnim.isRunning()||(this.draw(),this.batchAnim.start())},Kinetic.Stage.prototype.batchDraw=function(){this.getChildren().each(function(a){a.batchDraw()})}}(this),function(){var a={node:1,duration:1,easing:1,onFinish:1,yoyo:1},b=1,c=2,d=3,e=0;Kinetic.Tween=function(b){var c,d,g=this,h=b.node,i=h._id,j=b.easing||Kinetic.Easings.Linear,k=!!b.yoyo;c="undefined"==typeof b.duration?1:0===b.duration?.001:b.duration,this.node=h,this._id=e++,this.anim=new Kinetic.Animation(function(){g.tween.onEnterFrame()},h.getLayer()||(h instanceof Kinetic.Stage?h.getLayers():null)),this.tween=new f(d,function(a){g._tweenFunc(a)},j,0,1,1e3*c,k),this._addListeners(),Kinetic.Tween.attrs[i]||(Kinetic.Tween.attrs[i]={}),Kinetic.Tween.attrs[i][this._id]||(Kinetic.Tween.attrs[i][this._id]={}),Kinetic.Tween.tweens[i]||(Kinetic.Tween.tweens[i]={});for(d in b)void 0===a[d]&&this._addAttr(d,b[d]);this.reset(),this.onFinish=b.onFinish,this.onReset=b.onReset},Kinetic.Tween.attrs={},Kinetic.Tween.tweens={},Kinetic.Tween.prototype={_addAttr:function(a,b){var c,d,e,f,g,h=this.node,i=h._id;if(e=Kinetic.Tween.tweens[i][a],e&&delete Kinetic.Tween.attrs[i][e][a],c=h.getAttr(a),Kinetic.Util._isArray(b))for(d=[],g=b.length,f=0;g>f;f++)d.push(b[f]-c[f]);else d=b-c;Kinetic.Tween.attrs[i][this._id][a]={start:c,diff:d},Kinetic.Tween.tweens[i][a]=this._id},_tweenFunc:function(a){var b,c,d,e,f,g,h,i=this.node,j=Kinetic.Tween.attrs[i._id][this._id];for(b in j){if(c=j[b],d=c.start,e=c.diff,Kinetic.Util._isArray(d))for(f=[],h=d.length,g=0;h>g;g++)f.push(d[g]+e[g]*a);else f=d+e*a;i.setAttr(b,f)}},_addListeners:function(){var a=this;this.tween.onPlay=function(){a.anim.start()},this.tween.onReverse=function(){a.anim.start()},this.tween.onPause=function(){a.anim.stop()},this.tween.onFinish=function(){a.onFinish&&a.onFinish()},this.tween.onReset=function(){a.onReset&&a.onReset()}},play:function(){return this.tween.play(),this},reverse:function(){return this.tween.reverse(),this},reset:function(){return this.tween.reset(),this},seek:function(a){return this.tween.seek(1e3*a),this},pause:function(){return this.tween.pause(),this},finish:function(){return this.tween.finish(),this},destroy:function(){var a,b=this.node._id,c=this._id,d=Kinetic.Tween.tweens[b];this.pause();for(a in d)delete Kinetic.Tween.tweens[b][a];delete Kinetic.Tween.attrs[b][c]}};var f=function(a,b,c,d,e,f,g){this.prop=a,this.propFunc=b,this.begin=d,this._pos=d,this.duration=f,this._change=0,this.prevPos=0,this.yoyo=g,this._time=0,this._position=0,this._startTime=0,this._finish=0,this.func=c,this._change=e-this.begin,this.pause()};f.prototype={fire:function(a){var b=this[a];b&&b()},setTime:function(a){a>this.duration?this.yoyo?(this._time=this.duration,this.reverse()):this.finish():0>a?this.yoyo?(this._time=0,this.play()):this.reset():(this._time=a,this.update())},getTime:function(){return this._time},setPosition:function(a){this.prevPos=this._pos,this.propFunc(a),this._pos=a},getPosition:function(a){return void 0===a&&(a=this._time),this.func(a,this.begin,this._change,this.duration)},play:function(){this.state=c,this._startTime=this.getTimer()-this._time,this.onEnterFrame(),this.fire("onPlay")},reverse:function(){this.state=d,this._time=this.duration-this._time,this._startTime=this.getTimer()-this._time,this.onEnterFrame(),this.fire("onReverse")},seek:function(a){this.pause(),this._time=a,this.update(),this.fire("onSeek")},reset:function(){this.pause(),this._time=0,this.update(),this.fire("onReset")},finish:function(){this.pause(),this._time=this.duration,this.update(),this.fire("onFinish")},update:function(){this.setPosition(this.getPosition(this._time))},onEnterFrame:function(){var a=this.getTimer()-this._startTime;this.state===c?this.setTime(a):this.state===d&&this.setTime(this.duration-a)},pause:function(){this.state=b,this.fire("onPause")},getTimer:function(){return(new Date).getTime()}},Kinetic.Easings={BackEaseIn:function(a,b,c,d){var e=1.70158;return c*(a/=d)*a*((e+1)*a-e)+b},BackEaseOut:function(a,b,c,d){var e=1.70158;return c*((a=a/d-1)*a*((e+1)*a+e)+1)+b},BackEaseInOut:function(a,b,c,d){var e=1.70158;return(a/=d/2)<1?c/2*a*a*(((e*=1.525)+1)*a-e)+b:c/2*((a-=2)*a*(((e*=1.525)+1)*a+e)+2)+b},ElasticEaseIn:function(a,b,c,d,e,f){var g=0;return 0===a?b:1==(a/=d)?b+c:(f||(f=.3*d),!e||ea?-.5*e*Math.pow(2,10*(a-=1))*Math.sin(2*(a*d-g)*Math.PI/f)+b:e*Math.pow(2,-10*(a-=1))*Math.sin(2*(a*d-g)*Math.PI/f)*.5+c+b)},BounceEaseOut:function(a,b,c,d){return(a/=d)<1/2.75?7.5625*c*a*a+b:2/2.75>a?c*(7.5625*(a-=1.5/2.75)*a+.75)+b:2.5/2.75>a?c*(7.5625*(a-=2.25/2.75)*a+.9375)+b:c*(7.5625*(a-=2.625/2.75)*a+.984375)+b},BounceEaseIn:function(a,b,c,d){return c-Kinetic.Easings.BounceEaseOut(d-a,0,c,d)+b},BounceEaseInOut:function(a,b,c,d){return d/2>a?.5*Kinetic.Easings.BounceEaseIn(2*a,0,c,d)+b:.5*Kinetic.Easings.BounceEaseOut(2*a-d,0,c,d)+.5*c+b},EaseIn:function(a,b,c,d){return c*(a/=d)*a+b},EaseOut:function(a,b,c,d){return-c*(a/=d)*(a-2)+b},EaseInOut:function(a,b,c,d){return(a/=d/2)<1?c/2*a*a+b:-c/2*(--a*(a-2)-1)+b},StrongEaseIn:function(a,b,c,d){return c*(a/=d)*a*a*a*a+b},StrongEaseOut:function(a,b,c,d){return c*((a=a/d-1)*a*a*a*a+1)+b},StrongEaseInOut:function(a,b,c,d){return(a/=d/2)<1?c/2*a*a*a*a*a+b:c/2*((a-=2)*a*a*a*a+2)+b},Linear:function(a,b,c,d){return c*a/d+b}}}(),function(){Kinetic.DD={anim:new Kinetic.Animation(function(){var a=this.dirty;return this.dirty=!1,a}),isDragging:!1,justDragged:!1,offset:{x:0,y:0},node:null,_drag:function(a){var b=Kinetic.DD,c=b.node;if(c){if(!b.isDragging){var d=c.getStage().getPointerPosition(),e=c.dragDistance(),f=Math.max(Math.abs(d.x-b.startPointerPos.x),Math.abs(d.y-b.startPointerPos.y));if(e>f)return}c._setDragPosition(a),b.isDragging||(b.isDragging=!0,c.fire("dragstart",{type:"dragstart",target:c,evt:a},!0)),c.fire("dragmove",{type:"dragmove",target:c,evt:a},!0)}},_endDragBefore:function(a){var b,c,d=Kinetic.DD,e=d.node;e&&(b=e.nodeType,c=e.getLayer(),d.anim.stop(),d.isDragging&&(d.isDragging=!1,d.justDragged=!0,Kinetic.listenClickTap=!1,a&&(a.dragEndNode=e)),delete d.node,(c||e).draw())},_endDragAfter:function(a){a=a||{};var b=a.dragEndNode;a&&b&&b.fire("dragend",{type:"dragend",target:b,evt:a},!0)}},Kinetic.Node.prototype.startDrag=function(){var a=Kinetic.DD,b=this.getStage(),c=this.getLayer(),d=b.getPointerPosition(),e=this.getAbsolutePosition();d&&(a.node&&a.node.stopDrag(),a.node=this,a.startPointerPos=d,a.offset.x=d.x-e.x,a.offset.y=d.y-e.y,a.anim.setLayers(c||this.getLayers()),a.anim.start(),this._setDragPosition())},Kinetic.Node.prototype._setDragPosition=function(a){var b=Kinetic.DD,c=this.getStage().getPointerPosition(),d=this.getDragBoundFunc();if(c){var e={x:c.x-b.offset.x,y:c.y-b.offset.y};void 0!==d&&(e=d.call(this,e,a)),this.setAbsolutePosition(e),this._lastPos&&this._lastPos.x===e.x&&this._lastPos.y===e.y||(b.anim.dirty=!0),this._lastPos=e}},Kinetic.Node.prototype.stopDrag=function(){var a=Kinetic.DD,b={};a._endDragBefore(b),a._endDragAfter(b)},Kinetic.Node.prototype.setDraggable=function(a){this._setAttr("draggable",a),this._dragChange()};var a=Kinetic.Node.prototype.destroy;Kinetic.Node.prototype.destroy=function(){var b=Kinetic.DD;b.node&&b.node._id===this._id&&this.stopDrag(),a.call(this)},Kinetic.Node.prototype.isDragging=function(){var a=Kinetic.DD;return!(!a.node||a.node._id!==this._id||!a.isDragging)},Kinetic.Node.prototype._listenDrag=function(){var a=this;this._dragCleanup(),"Stage"===this.getClassName()?this.on("contentMousedown.kinetic contentTouchstart.kinetic",function(b){Kinetic.DD.node||a.startDrag(b)}):this.on("mousedown.kinetic touchstart.kinetic",function(b){1!==b.evt.button&&2!==b.evt.button&&(Kinetic.DD.node||a.startDrag(b))})},Kinetic.Node.prototype._dragChange=function(){if(this.attrs.draggable)this._listenDrag();else{this._dragCleanup();var a=this.getStage(),b=Kinetic.DD;a&&b.node&&b.node._id===this._id&&b.node.stopDrag()}},Kinetic.Node.prototype._dragCleanup=function(){"Stage"===this.getClassName()?(this.off("contentMousedown.kinetic"),this.off("contentTouchstart.kinetic")):(this.off("mousedown.kinetic"),this.off("touchstart.kinetic"))},Kinetic.Factory.addGetterSetter(Kinetic.Node,"dragBoundFunc"),Kinetic.Factory.addGetter(Kinetic.Node,"draggable",!1),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node,"draggable");var b=Kinetic.document.documentElement;b.addEventListener("mouseup",Kinetic.DD._endDragBefore,!0),b.addEventListener("touchend",Kinetic.DD._endDragBefore,!0),b.addEventListener("mouseup",Kinetic.DD._endDragAfter,!1),b.addEventListener("touchend",Kinetic.DD._endDragAfter,!1)}(),function(){Kinetic.Util.addMethods(Kinetic.Container,{__init:function(a){this.children=new Kinetic.Collection,Kinetic.Node.call(this,a)},getChildren:function(a){if(a){var b=new Kinetic.Collection;return this.children.each(function(c){a(c)&&b.push(c)}),b}return this.children},hasChildren:function(){return this.getChildren().length>0},removeChildren:function(){for(var a,b=Kinetic.Collection.toCollection(this.children),c=0;c1){for(var b=0;bb;b++)if(d=j[b],"#"===d.charAt(0))f=this._getNodeById(d.slice(1)),f&&i.push(f);else if("."===d.charAt(0))e=this._getNodesByName(d.slice(1)),i=i.concat(e);else for(g=this.getChildren(),h=g.length,c=0;h>c;c++)i=i.concat(g[c]._get(d));return Kinetic.Collection.toCollection(i)},_getNodeById:function(a){var b=Kinetic.ids[a];return void 0!==b&&this.isAncestorOf(b)?b:null},_getNodesByName:function(a){var b=Kinetic.names[a]||[];return this._getDescendants(b)},_get:function(a){for(var b=Kinetic.Node.prototype._get.call(this,a),c=this.getChildren(),d=c.length,e=0;d>e;e++)b=b.concat(c[e]._get(a));return b},toObject:function(){var a=Kinetic.Node.prototype.toObject.call(this); -a.children=[];for(var b=this.getChildren(),c=b.length,d=0;c>d;d++){var e=b[d];a.children.push(e.toObject())}return a},_getDescendants:function(a){for(var b=[],c=a.length,d=0;c>d;d++){var e=a[d];this.isAncestorOf(e)&&b.push(e)}return b},isAncestorOf:function(a){for(var b=a.getParent();b;){if(b._id===this._id)return!0;b=b.getParent()}return!1},clone:function(a){var b=Kinetic.Node.prototype.clone.call(this,a);return this.getChildren().each(function(a){b.add(a.clone())}),b},getAllIntersections:function(a){var b=[];return this.find("Shape").each(function(c){c.isVisible()&&c.intersects(a)&&b.push(c)}),b},_setChildrenIndices:function(){this.children.each(function(a,b){a.index=b})},drawScene:function(a,b){var c=this.getLayer(),d=a||c&&c.getCanvas(),e=d&&d.getContext(),f=this._cache.canvas,g=f&&f.scene;return this.isVisible()&&(g?this._drawCachedSceneCanvas(e):this._drawChildren(d,"drawScene",b)),this},drawHit:function(a,b){var c=this.getLayer(),d=a||c&&c.hitCanvas,e=d&&d.getContext(),f=this._cache.canvas,g=f&&f.hit;return this.shouldDrawHit(d)&&(c&&c.clearHitCache(),g?this._drawCachedHitCanvas(e):this._drawChildren(d,"drawHit",b)),this},_drawChildren:function(a,b,c){var d,e,f=this.getLayer(),g=a&&a.getContext(),h=this.getClipWidth(),i=this.getClipHeight(),j=h&&i;j&&f&&(d=this.getClipX(),e=this.getClipY(),g.save(),f._applyTransform(this,g),g.beginPath(),g.rect(d,e,h,i),g.clip(),g.reset()),this.children.each(function(d){d[b](a,c)}),j&&g.restore()},shouldDrawHit:function(a){var b=this.getLayer(),c=Kinetic.DD,d=c&&Kinetic.isDragging()&&-1!==Kinetic.DD.anim.getLayers().indexOf(b);return a&&a.isCache||b&&b.hitGraphEnabled()&&this.isVisible()&&!d}}),Kinetic.Util.extend(Kinetic.Container,Kinetic.Node),Kinetic.Container.prototype.get=Kinetic.Container.prototype.find,Kinetic.Factory.addComponentsGetterSetter(Kinetic.Container,"clip",["x","y","width","height"]),Kinetic.Factory.addGetterSetter(Kinetic.Container,"clipX"),Kinetic.Factory.addGetterSetter(Kinetic.Container,"clipY"),Kinetic.Factory.addGetterSetter(Kinetic.Container,"clipWidth"),Kinetic.Factory.addGetterSetter(Kinetic.Container,"clipHeight"),Kinetic.Collection.mapMethods(Kinetic.Container)}(),function(){function a(a){a.fill()}function b(a){a.stroke()}function c(a){a.fill()}function d(a){a.stroke()}function e(){this._clearCache(f)}var f="hasShadow";Kinetic.Util.addMethods(Kinetic.Shape,{__init:function(f){this.nodeType="Shape",this._fillFunc=a,this._strokeFunc=b,this._fillFuncHit=c,this._strokeFuncHit=d;for(var g,h=Kinetic.shapes;;)if(g=Kinetic.Util.getRandomColor(),g&&!(g in h))break;this.colorKey=g,h[g]=this,Kinetic.Node.call(this,f),this.on("shadowColorChange.kinetic shadowBlurChange.kinetic shadowOffsetChange.kinetic shadowOpacityChange.kinetic shadowEnabledChange.kinetic",e)},hasChildren:function(){return!1},getChildren:function(){return[]},getContext:function(){return this.getLayer().getContext()},getCanvas:function(){return this.getLayer().getCanvas()},hasShadow:function(){return this._getCache(f,this._hasShadow)},_hasShadow:function(){return this.getShadowEnabled()&&0!==this.getShadowOpacity()&&!!(this.getShadowColor()||this.getShadowBlur()||this.getShadowOffsetX()||this.getShadowOffsetY())},hasFill:function(){return!!(this.getFill()||this.getFillPatternImage()||this.getFillLinearGradientColorStops()||this.getFillRadialGradientColorStops())},hasStroke:function(){return!!(this.stroke()||this.strokeRed()||this.strokeGreen()||this.strokeBlue())},intersects:function(a){var b,c=this.getStage(),d=c.bufferHitCanvas;return d.getContext().clear(),this.drawScene(d),b=d.context.getImageData(Math.round(a.x),Math.round(a.y),1,1).data,b[3]>0},destroy:function(){Kinetic.Node.prototype.destroy.call(this),delete Kinetic.shapes[this.colorKey]},_useBufferCanvas:function(){return(this.hasShadow()||1!==this.getAbsoluteOpacity())&&this.hasFill()&&this.hasStroke()&&this.getStage()},drawScene:function(a,b){var c,d,e,f=this.getLayer(),g=a||f.getCanvas(),h=g.getContext(),i=this._cache.canvas,j=this.sceneFunc(),k=this.hasShadow();if(this.isVisible())if(i)this._drawCachedSceneCanvas(h);else if(j){if(h.save(),this._useBufferCanvas()){if(c=this.getStage(),d=c.bufferCanvas,e=d.getContext(),e.clear(),e.save(),e._applyLineJoin(this),f)f._applyTransform(this,e,b);else{var l=this.getAbsoluteTransform(b).getMatrix();h.transform(l[0],l[1],l[2],l[3],l[4],l[5])}j.call(this,e),e.restore(),k&&!g.hitCanvas&&(h.save(),h._applyShadow(this),h.drawImage(d._canvas,0,0),h.restore()),h._applyOpacity(this),h.drawImage(d._canvas,0,0)}else{if(h._applyLineJoin(this),f)f._applyTransform(this,h,b);else{var m=this.getAbsoluteTransform(b).getMatrix();h.transform(m[0],m[1],m[2],m[3],m[4],m[5])}k&&!g.hitCanvas&&(h.save(),h._applyShadow(this),j.call(this,h),h.restore()),h._applyOpacity(this),j.call(this,h)}h.restore()}return this},drawHit:function(a,b){var c=this.getLayer(),d=a||c.hitCanvas,e=d.getContext(),f=this.hitFunc()||this.sceneFunc(),g=this._cache.canvas,h=g&&g.hit;if(this.shouldDrawHit(d))if(c&&c.clearHitCache(),h)this._drawCachedHitCanvas(e);else if(f){if(e.save(),e._applyLineJoin(this),c)c._applyTransform(this,e,b);else{var i=this.getAbsoluteTransform(b).getMatrix();e.transform(i[0],i[1],i[2],i[3],i[4],i[5])}f.call(this,e),e.restore()}return this},drawHitFromCache:function(a){var b,c,d,e,f,g,h,i,j=a||0,k=this._cache.canvas,l=this._getCachedSceneCanvas(),m=l.getContext(),n=k.hit,o=n.getContext(),p=l.getWidth(),q=l.getHeight();o.clear();try{for(b=m.getImageData(0,0,p,q),c=b.data,d=o.getImageData(0,0,p,q),e=d.data,f=c.length,g=Kinetic.Util._hexToRgb(this.colorKey),h=0;f>h;h+=4)i=c[h+3],i>j&&(e[h]=g.r,e[h+1]=g.g,e[h+2]=g.b,e[h+3]=255);o.putImageData(d,0,0)}catch(r){Kinetic.Util.warn("Unable to draw hit graph from cached scene canvas. "+r.message)}return this}}),Kinetic.Util.extend(Kinetic.Shape,Kinetic.Node),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"stroke"),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"strokeRed",0,Kinetic.Validators.RGBComponent),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"strokeGreen",0,Kinetic.Validators.RGBComponent),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"strokeBlue",0,Kinetic.Validators.RGBComponent),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"strokeAlpha",1,Kinetic.Validators.alphaComponent),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"strokeWidth",2),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"lineJoin"),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"lineCap"),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"sceneFunc"),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"hitFunc"),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"dash"),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"shadowColor"),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"shadowRed",0,Kinetic.Validators.RGBComponent),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"shadowGreen",0,Kinetic.Validators.RGBComponent),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"shadowBlue",0,Kinetic.Validators.RGBComponent),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"shadowAlpha",1,Kinetic.Validators.alphaComponent),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"shadowBlur"),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"shadowOpacity"),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Shape,"shadowOffset",["x","y"]),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"shadowOffsetX",0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"shadowOffsetY",0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillPatternImage"),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fill"),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillRed",0,Kinetic.Validators.RGBComponent),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillGreen",0,Kinetic.Validators.RGBComponent),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillBlue",0,Kinetic.Validators.RGBComponent),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillAlpha",1,Kinetic.Validators.alphaComponent),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillPatternX",0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillPatternY",0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillLinearGradientColorStops"),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillRadialGradientStartRadius",0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillRadialGradientEndRadius",0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillRadialGradientColorStops"),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillPatternRepeat","repeat"),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillEnabled",!0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"strokeEnabled",!0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"shadowEnabled",!0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"dashEnabled",!0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"strokeScaleEnabled",!0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillPriority","color"),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Shape,"fillPatternOffset",["x","y"]),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillPatternOffsetX",0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillPatternOffsetY",0),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Shape,"fillPatternScale",["x","y"]),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillPatternScaleX",1),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillPatternScaleY",1),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Shape,"fillLinearGradientStartPoint",["x","y"]),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillLinearGradientStartPointX",0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillLinearGradientStartPointY",0),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Shape,"fillLinearGradientEndPoint",["x","y"]),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillLinearGradientEndPointX",0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillLinearGradientEndPointY",0),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Shape,"fillRadialGradientStartPoint",["x","y"]),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillRadialGradientStartPointX",0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillRadialGradientStartPointY",0),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Shape,"fillRadialGradientEndPoint",["x","y"]),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillRadialGradientEndPointX",0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillRadialGradientEndPointY",0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillPatternRotation",0),Kinetic.Factory.backCompat(Kinetic.Shape,{dashArray:"dash",getDashArray:"getDash",setDashArray:"getDash",drawFunc:"sceneFunc",getDrawFunc:"getSceneFunc",setDrawFunc:"setSceneFunc",drawHitFunc:"hitFunc",getDrawHitFunc:"getHitFunc",setDrawHitFunc:"setHitFunc"}),Kinetic.Collection.mapMethods(Kinetic.Shape)}(),function(){function a(a,b){a.content.addEventListener(b,function(c){a[L+b](c)},!1)}var b="Stage",c="string",d="px",e="mouseout",f="mouseleave",g="mouseover",h="mouseenter",i="mousemove",j="mousedown",k="mouseup",l="click",m="dblclick",n="touchstart",o="touchend",p="tap",q="dbltap",r="touchmove",s="DOMMouseScroll",t="mousewheel",u="wheel",v="contentMouseout",w="contentMouseover",x="contentMousemove",y="contentMousedown",z="contentMouseup",A="contentClick",B="contentDblclick",C="contentTouchstart",D="contentTouchend",E="contentDbltap",F="contentTouchmove",G="div",H="relative",I="inline-block",J="kineticjs-content",K=" ",L="_",M="container",N="",O=[j,i,k,e,n,r,o,g,s,t,u],P=O.length;Kinetic.Util.addMethods(Kinetic.Stage,{___init:function(a){this.nodeType=b,Kinetic.Container.call(this,a),this._id=Kinetic.idCounter++,this._buildDOM(),this._bindContentEvents(),this._enableNestedTransforms=!1,Kinetic.stages.push(this)},_validateAdd:function(a){"Layer"!==a.getType()&&Kinetic.Util.error("You may only add layers to the stage.")},setContainer:function(a){if(typeof a===c){var b=a;if(a=Kinetic.document.getElementById(a),!a)throw"Can not find container in document with id "+b}return this._setAttr(M,a),this},shouldDrawHit:function(){return!0},draw:function(){return Kinetic.Node.prototype.draw.call(this),this},setHeight:function(a){return Kinetic.Node.prototype.setHeight.call(this,a),this._resizeDOM(),this},setWidth:function(a){return Kinetic.Node.prototype.setWidth.call(this,a),this._resizeDOM(),this},clear:function(){var a,b=this.children,c=b.length;for(a=0;c>a;a++)b[a].clear();return this},clone:function(a){return a||(a={}),a.container=Kinetic.document.createElement(G),Kinetic.Container.prototype.clone.call(this,a)},destroy:function(){var a=this.content;Kinetic.Container.prototype.destroy.call(this),a&&Kinetic.Util._isInDocument(a)&&this.getContainer().removeChild(a);var b=Kinetic.stages.indexOf(this);b>-1&&Kinetic.stages.splice(b,1)},getPointerPosition:function(){return this.pointerPos},getStage:function(){return this},getContent:function(){return this.content},toDataURL:function(a){function b(e){var f=i[e],j=f.toDataURL(),k=new Kinetic.window.Image;k.onload=function(){h.drawImage(k,0,0),e=0;b--)if(c=d[b].getIntersection(a))return c;return null},_resizeDOM:function(){if(this.content){var a,b,c=this.getWidth(),e=this.getHeight(),f=this.getChildren(),g=f.length;for(this.content.style.width=c+d,this.content.style.height=e+d,this.bufferCanvas.setSize(c,e),this.bufferHitCanvas.setSize(c,e),a=0;g>a;a++)b=f[a],b.setSize(c,e),b.draw()}},add:function(a){if(!(arguments.length>1))return Kinetic.Container.prototype.add.call(this,a),a._setCanvasSize(this.width(),this.height()),a.draw(),this.content.appendChild(a.canvas._canvas),this;for(var b=0;bb;b++)a(this,O[b])},_mouseover:function(a){Kinetic.UA.mobile||(this._setPointerPosition(a),this._fire(w,{evt:a}))},_mouseout:function(a){if(!Kinetic.UA.mobile){this._setPointerPosition(a);var b=this.targetShape;b&&!Kinetic.isDragging()&&(b._fireAndBubble(e,{evt:a}),b._fireAndBubble(f,{evt:a}),this.targetShape=null),this.pointerPos=void 0,this._fire(v,{evt:a})}},_mousemove:function(a){if(Kinetic.UA.ieMobile)return this._touchmove(a);if(("undefined"==typeof a.webkitMovementX&&"undefined"==typeof a.webkitMovementY||0!==a.webkitMovementY||0!==a.webkitMovementX)&&!Kinetic.UA.mobile){this._setPointerPosition(a);var b,c=Kinetic.DD;Kinetic.isDragging()||(b=this.getIntersection(this.getPointerPosition()),b&&b.isListening()?Kinetic.isDragging()||this.targetShape&&this.targetShape._id===b._id?b._fireAndBubble(i,{evt:a}):(this.targetShape&&(this.targetShape._fireAndBubble(e,{evt:a},b),this.targetShape._fireAndBubble(f,{evt:a},b)),b._fireAndBubble(g,{evt:a},this.targetShape),b._fireAndBubble(h,{evt:a},this.targetShape),this.targetShape=b):this.targetShape&&!Kinetic.isDragging()&&(this.targetShape._fireAndBubble(e,{evt:a}),this.targetShape._fireAndBubble(f,{evt:a}),this.targetShape=null),this._fire(x,{evt:a})),c&&c._drag(a),a.preventDefault&&a.preventDefault()}},_mousedown:function(a){if(Kinetic.UA.ieMobile)return this._touchstart(a);if(!Kinetic.UA.mobile){this._setPointerPosition(a);var b=this.getIntersection(this.getPointerPosition());Kinetic.listenClickTap=!0,b&&b.isListening()&&(this.clickStartShape=b,b._fireAndBubble(j,{evt:a})),this._fire(y,{evt:a})}a.preventDefault&&a.preventDefault()},_mouseup:function(a){if(Kinetic.UA.ieMobile)return this._touchend(a);if(!Kinetic.UA.mobile){this._setPointerPosition(a);var b=this.getIntersection(this.getPointerPosition()),c=this.clickStartShape,d=!1,e=Kinetic.DD;Kinetic.inDblClickWindow?(d=!0,Kinetic.inDblClickWindow=!1):e&&e.justDragged?e&&(e.justDragged=!1):Kinetic.inDblClickWindow=!0,setTimeout(function(){Kinetic.inDblClickWindow=!1},Kinetic.dblClickWindow),b&&b.isListening()&&(b._fireAndBubble(k,{evt:a}),Kinetic.listenClickTap&&c&&c._id===b._id&&(b._fireAndBubble(l,{evt:a}),d&&b._fireAndBubble(m,{evt:a}))),this._fire(z,{evt:a}),Kinetic.listenClickTap&&(this._fire(A,{evt:a}),d&&this._fire(B,{evt:a})),Kinetic.listenClickTap=!1}a.preventDefault&&a.preventDefault()},_touchstart:function(a){this._setPointerPosition(a);var b=this.getIntersection(this.getPointerPosition());Kinetic.listenClickTap=!0,b&&b.isListening()&&(this.tapStartShape=b,b._fireAndBubble(n,{evt:a}),b.isListening()&&a.preventDefault&&a.preventDefault()),this._fire(C,{evt:a})},_touchend:function(a){this._setPointerPosition(a);var b=this.getIntersection(this.getPointerPosition()),c=!1;Kinetic.inDblClickWindow?(c=!0,Kinetic.inDblClickWindow=!1):Kinetic.inDblClickWindow=!0,setTimeout(function(){Kinetic.inDblClickWindow=!1},Kinetic.dblClickWindow),b&&b.isListening()&&(b._fireAndBubble(o,{evt:a}),Kinetic.listenClickTap&&b._id===this.tapStartShape._id&&(b._fireAndBubble(p,{evt:a}),c&&b._fireAndBubble(q,{evt:a})),b.isListening()&&a.preventDefault&&a.preventDefault()),Kinetic.listenClickTap&&(this._fire(D,{evt:a}),c&&this._fire(E,{evt:a})),Kinetic.listenClickTap=!1},_touchmove:function(a){this._setPointerPosition(a);var b,c=Kinetic.DD;Kinetic.isDragging()||(b=this.getIntersection(this.getPointerPosition()),b&&b.isListening()&&(b._fireAndBubble(r,{evt:a}),b.isListening()&&a.preventDefault&&a.preventDefault()),this._fire(F,{evt:a})),c&&(c._drag(a),Kinetic.isDragging()&&a.preventDefault())},_DOMMouseScroll:function(a){this._mousewheel(a)},_mousewheel:function(a){this._setPointerPosition(a);var b=this.getIntersection(this.getPointerPosition());b&&b.isListening()&&b._fireAndBubble(t,{evt:a})},_wheel:function(a){this._mousewheel(a)},_setPointerPosition:function(a){var b,c=this._getContentPosition(),d=a.offsetX,e=a.clientX,f=null,g=null;a=a?a:window.event,void 0!==a.touches?a.touches.length>0&&(b=a.touches[0],f=b.clientX-c.left,g=b.clientY-c.top):void 0!==d?(f=d,g=a.offsetY):"mozilla"===Kinetic.UA.browser?(f=a.layerX,g=a.layerY):void 0!==e&&c&&(f=e-c.left,g=a.clientY-c.top),null!==f&&null!==g&&(this.pointerPos={x:f,y:g})},_getContentPosition:function(){var a=this.content.getBoundingClientRect?this.content.getBoundingClientRect():{top:0,left:0};return{top:a.top,left:a.left}},_buildDOM:function(){var a=this.getContainer();if(!a){if(Kinetic.Util.isBrowser())throw"Stage has no container. A container is required.";a=Kinetic.document.createElement(G)}a.innerHTML=N,this.content=Kinetic.document.createElement(G),this.content.style.position=H,this.content.style.display=I,this.content.className=J,this.content.setAttribute("role","presentation"),a.appendChild(this.content),this.bufferCanvas=new Kinetic.SceneCanvas({pixelRatio:1}),this.bufferHitCanvas=new Kinetic.HitCanvas,this._resizeDOM()},_onContent:function(a,b){var c,d,e=a.split(K),f=e.length;for(c=0;f>c;c++)d=e[c],this.content.addEventListener(d,b,!1)},cache:function(){Kinetic.Util.warn("Cache function is not allowed for stage. You may use cache only for layers, groups and shapes.")},clearCache:function(){}}),Kinetic.Util.extend(Kinetic.Stage,Kinetic.Container),Kinetic.Factory.addGetter(Kinetic.Stage,"container"),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Stage,"container")}(),function(){Kinetic.Util.addMethods(Kinetic.BaseLayer,{___init:function(a){this.nodeType="Layer",Kinetic.Container.call(this,a)},createPNGStream:function(){return this.canvas._canvas.createPNGStream()},getCanvas:function(){return this.canvas},getHitCanvas:function(){return this.hitCanvas},getContext:function(){return this.getCanvas().getContext()},clear:function(a){return this.getContext().clear(a),this.getHitCanvas().getContext().clear(a),this},clearHitCache:function(){this._hitImageData=void 0},setZIndex:function(a){Kinetic.Node.prototype.setZIndex.call(this,a);var b=this.getStage();return b&&(b.content.removeChild(this.getCanvas()._canvas),ac;c++){if(f=d[c],b=this._getIntersection({x:a.x+f.x*h,y:a.y+f.y*h}),g=b.shape)return g;b.antialiased&&(i=!0)}if(!i)return;h+=1}},_getImageData:function(a,b){var c=this.hitCanvas.width||1,d=this.hitCanvas.height||1,e=Math.round(b)*c+Math.round(a);return this._hitImageData||(this._hitImageData=this.hitCanvas.context.getImageData(0,0,c,d)),[this._hitImageData.data[4*e+0],this._hitImageData.data[4*e+1],this._hitImageData.data[4*e+2],this._hitImageData.data[4*e+3]]},_getIntersection:function(b){var c,d,e=this.hitCanvas.context.getImageData(b.x,b.y,1,1).data,f=e[3];return 255===f?(c=Kinetic.Util._rgbToHex(e[0],e[1],e[2]),d=Kinetic.shapes[a+c],{shape:d}):f>0?{antialiased:!0}:{}},drawScene:function(a,d){var e=this.getLayer(),f=a||e&&e.getCanvas();return this._fire(b,{node:this}),this.getClearBeforeDraw()&&f.getContext().clear(),Kinetic.Container.prototype.drawScene.call(this,f,d),this._fire(c,{node:this}),this},_applyTransform:function(a,b,c){var d=a.getAbsoluteTransform(c).getMatrix();b.transform(d[0],d[1],d[2],d[3],d[4],d[5])},drawHit:function(a,b){var c=this.getLayer(),d=a||c&&c.hitCanvas;return c&&c.getClearBeforeDraw()&&c.getHitCanvas().getContext().clear(),Kinetic.Container.prototype.drawHit.call(this,d,b),this.imageData=null,this},clear:function(a){return this.getContext().clear(a),this.getHitCanvas().getContext().clear(a),this.imageData=null,this},setVisible:function(a){return Kinetic.Node.prototype.setVisible.call(this,a),a?(this.getCanvas()._canvas.style.display="block",this.hitCanvas._canvas.style.display="block"):(this.getCanvas()._canvas.style.display="none",this.hitCanvas._canvas.style.display="none"),this},enableHitGraph:function(){return this.setHitGraphEnabled(!0),this},disableHitGraph:function(){return this.setHitGraphEnabled(!1),this},setSize:function(a,b){Kinetic.BaseLayer.prototype.setSize.call(this,a,b),this.hitCanvas.setSize(a,b)}}),Kinetic.Util.extend(Kinetic.Layer,Kinetic.BaseLayer),Kinetic.Factory.addGetterSetter(Kinetic.Layer,"hitGraphEnabled",!0),Kinetic.Collection.mapMethods(Kinetic.Layer)}(),function(){Kinetic.Util.addMethods(Kinetic.FastLayer,{____init:function(a){this.nodeType="Layer",this.canvas=new Kinetic.SceneCanvas,Kinetic.BaseLayer.call(this,a)},_validateAdd:function(a){var b=a.getType();"Shape"!==b&&Kinetic.Util.error("You may only add shapes to a fast layer.")},_setCanvasSize:function(a,b){this.canvas.setSize(a,b)},hitGraphEnabled:function(){return!1},getIntersection:function(){return null},drawScene:function(a){var b=this.getLayer(),c=a||b&&b.getCanvas();return this.getClearBeforeDraw()&&c.getContext().clear(),Kinetic.Container.prototype.drawScene.call(this,c),this},_applyTransform:function(a,b,c){if(!c||c._id!==this._id){var d=a.getTransform().getMatrix();b.transform(d[0],d[1],d[2],d[3],d[4],d[5])}},draw:function(){return this.drawScene(),this},clear:function(a){return this.getContext().clear(a),this},setVisible:function(a){return Kinetic.Node.prototype.setVisible.call(this,a),this.getCanvas()._canvas.style.display=a?"block":"none",this}}),Kinetic.Util.extend(Kinetic.FastLayer,Kinetic.BaseLayer),Kinetic.Collection.mapMethods(Kinetic.FastLayer)}(),function(){Kinetic.Util.addMethods(Kinetic.Group,{___init:function(a){this.nodeType="Group",Kinetic.Container.call(this,a)},_validateAdd:function(a){var b=a.getType();"Group"!==b&&"Shape"!==b&&Kinetic.Util.error("You may only add groups and shapes to groups.")}}),Kinetic.Util.extend(Kinetic.Group,Kinetic.Container),Kinetic.Collection.mapMethods(Kinetic.Group)}(),function(){Kinetic.Rect=function(a){this.___init(a)},Kinetic.Rect.prototype={___init:function(a){Kinetic.Shape.call(this,a),this.className="Rect",this.sceneFunc(this._sceneFunc)},_sceneFunc:function(a){var b=this.getCornerRadius(),c=this.getWidth(),d=this.getHeight();a.beginPath(),b?(b=Math.min(b,c/2,d/2),a.moveTo(b,0),a.lineTo(c-b,0),a.arc(c-b,b,b,3*Math.PI/2,0,!1),a.lineTo(c,d-b),a.arc(c-b,d-b,b,0,Math.PI/2,!1),a.lineTo(b,d),a.arc(b,d-b,b,Math.PI/2,Math.PI,!1),a.lineTo(0,b),a.arc(b,b,b,Math.PI,3*Math.PI/2,!1)):a.rect(0,0,c,d),a.closePath(),a.fillStrokeShape(this)}},Kinetic.Util.extend(Kinetic.Rect,Kinetic.Shape),Kinetic.Factory.addGetterSetter(Kinetic.Rect,"cornerRadius",0),Kinetic.Collection.mapMethods(Kinetic.Rect)}(),function(){var a=2*Math.PI-1e-4,b="Circle";Kinetic.Circle=function(a){this.___init(a)},Kinetic.Circle.prototype={___init:function(a){Kinetic.Shape.call(this,a),this.className=b,this.sceneFunc(this._sceneFunc)},_sceneFunc:function(b){b.beginPath(),b.arc(0,0,this.getRadius(),0,a,!1),b.closePath(),b.fillStrokeShape(this)},getWidth:function(){return 2*this.getRadius()},getHeight:function(){return 2*this.getRadius()},setWidth:function(a){Kinetic.Node.prototype.setWidth.call(this,a),this.radius()!==a/2&&this.setRadius(a/2)},setHeight:function(a){Kinetic.Node.prototype.setHeight.call(this,a),this.radius()!==a/2&&this.setRadius(a/2)},setRadius:function(a){this._setAttr("radius",a),this.setWidth(2*a),this.setHeight(2*a)}},Kinetic.Util.extend(Kinetic.Circle,Kinetic.Shape),Kinetic.Factory.addGetter(Kinetic.Circle,"radius",0),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Circle,"radius"),Kinetic.Collection.mapMethods(Kinetic.Circle)}(),function(){var a=2*Math.PI-1e-4,b="Ellipse";Kinetic.Ellipse=function(a){this.___init(a)},Kinetic.Ellipse.prototype={___init:function(a){Kinetic.Shape.call(this,a),this.className=b,this.sceneFunc(this._sceneFunc)},_sceneFunc:function(b){var c=this.getRadiusX(),d=this.getRadiusY();b.beginPath(),b.save(),c!==d&&b.scale(1,d/c),b.arc(0,0,c,0,a,!1),b.restore(),b.closePath(),b.fillStrokeShape(this)},getWidth:function(){return 2*this.getRadiusX()},getHeight:function(){return 2*this.getRadiusY()},setWidth:function(a){Kinetic.Node.prototype.setWidth.call(this,a),this.setRadius({x:a/2})},setHeight:function(a){Kinetic.Node.prototype.setHeight.call(this,a),this.setRadius({y:a/2})}},Kinetic.Util.extend(Kinetic.Ellipse,Kinetic.Shape),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Ellipse,"radius",["x","y"]),Kinetic.Factory.addGetterSetter(Kinetic.Ellipse,"radiusX",0),Kinetic.Factory.addGetterSetter(Kinetic.Ellipse,"radiusY",0),Kinetic.Collection.mapMethods(Kinetic.Ellipse)}(),function(){var a=2*Math.PI-1e-4;Kinetic.Ring=function(a){this.___init(a)},Kinetic.Ring.prototype={___init:function(a){Kinetic.Shape.call(this,a),this.className="Ring",this.sceneFunc(this._sceneFunc)},_sceneFunc:function(b){b.beginPath(),b.arc(0,0,this.getInnerRadius(),0,a,!1),b.moveTo(this.getOuterRadius(),0),b.arc(0,0,this.getOuterRadius(),a,0,!0),b.closePath(),b.fillStrokeShape(this)},getWidth:function(){return 2*this.getOuterRadius()},getHeight:function(){return 2*this.getOuterRadius()},setWidth:function(a){Kinetic.Node.prototype.setWidth.call(this,a),this.outerRadius()!==a/2&&this.setOuterRadius(a/2)},setHeight:function(a){Kinetic.Node.prototype.setHeight.call(this,a),this.outerRadius()!==a/2&&this.setOuterRadius(a/2)},setOuterRadius:function(a){this._setAttr("outerRadius",a),this.setWidth(2*a),this.setHeight(2*a)}},Kinetic.Util.extend(Kinetic.Ring,Kinetic.Shape),Kinetic.Factory.addGetterSetter(Kinetic.Ring,"innerRadius",0),Kinetic.Factory.addGetter(Kinetic.Ring,"outerRadius",0),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Ring,"outerRadius"),Kinetic.Collection.mapMethods(Kinetic.Ring)}(),function(){Kinetic.Wedge=function(a){this.___init(a)},Kinetic.Wedge.prototype={___init:function(a){Kinetic.Shape.call(this,a),this.className="Wedge",this.sceneFunc(this._sceneFunc)},_sceneFunc:function(a){a.beginPath(),a.arc(0,0,this.getRadius(),0,Kinetic.getAngle(this.getAngle()),this.getClockwise()),a.lineTo(0,0),a.closePath(),a.fillStrokeShape(this)}},Kinetic.Util.extend(Kinetic.Wedge,Kinetic.Shape),Kinetic.Factory.addGetterSetter(Kinetic.Wedge,"radius",0),Kinetic.Factory.addGetterSetter(Kinetic.Wedge,"angle",0),Kinetic.Factory.addGetterSetter(Kinetic.Wedge,"clockwise",!1),Kinetic.Factory.backCompat(Kinetic.Wedge,{angleDeg:"angle",getAngleDeg:"getAngle",setAngleDeg:"setAngle"}),Kinetic.Collection.mapMethods(Kinetic.Wedge)}(),function(){Kinetic.Arc=function(a){this.___init(a)},Kinetic.Arc.prototype={___init:function(a){Kinetic.Shape.call(this,a),this.className="Arc",this.sceneFunc(this._sceneFunc)},_sceneFunc:function(a){var b=Kinetic.getAngle(this.angle()),c=this.clockwise();a.beginPath(),a.arc(0,0,this.getOuterRadius(),0,b,c),a.arc(0,0,this.getInnerRadius(),b,0,!c),a.closePath(),a.fillStrokeShape(this)}},Kinetic.Util.extend(Kinetic.Arc,Kinetic.Shape),Kinetic.Factory.addGetterSetter(Kinetic.Arc,"innerRadius",0),Kinetic.Factory.addGetterSetter(Kinetic.Arc,"outerRadius",0),Kinetic.Factory.addGetterSetter(Kinetic.Arc,"angle",0),Kinetic.Factory.addGetterSetter(Kinetic.Arc,"clockwise",!1),Kinetic.Collection.mapMethods(Kinetic.Arc)}(),function(){var a="Image";Kinetic.Image=function(a){this.___init(a)},Kinetic.Image.prototype={___init:function(b){Kinetic.Shape.call(this,b),this.className=a,this.sceneFunc(this._sceneFunc),this.hitFunc(this._hitFunc)},_useBufferCanvas:function(){return(this.hasShadow()||1!==this.getAbsoluteOpacity())&&this.hasStroke()&&this.getStage()},_sceneFunc:function(a){var b,c,d,e=this.getWidth(),f=this.getHeight(),g=this.getImage();g&&(b=this.getCropWidth(),c=this.getCropHeight(),d=b&&c?[g,this.getCropX(),this.getCropY(),b,c,0,0,e,f]:[g,0,0,e,f]),(this.hasFill()||this.hasStroke()||this.hasShadow())&&(a.beginPath(),a.rect(0,0,e,f),a.closePath(),a.fillStrokeShape(this)),g&&a.drawImage.apply(a,d) -},_hitFunc:function(a){var b=this.getWidth(),c=this.getHeight();a.beginPath(),a.rect(0,0,b,c),a.closePath(),a.fillStrokeShape(this)},getWidth:function(){var a=this.getImage();return this.attrs.width||(a?a.width:0)},getHeight:function(){var a=this.getImage();return this.attrs.height||(a?a.height:0)}},Kinetic.Util.extend(Kinetic.Image,Kinetic.Shape),Kinetic.Factory.addGetterSetter(Kinetic.Image,"image"),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Image,"crop",["x","y","width","height"]),Kinetic.Factory.addGetterSetter(Kinetic.Image,"cropX",0),Kinetic.Factory.addGetterSetter(Kinetic.Image,"cropY",0),Kinetic.Factory.addGetterSetter(Kinetic.Image,"cropWidth",0),Kinetic.Factory.addGetterSetter(Kinetic.Image,"cropHeight",0),Kinetic.Collection.mapMethods(Kinetic.Image)}(),function(){function a(a){a.fillText(this.partialText,0,0)}function b(a){a.strokeText(this.partialText,0,0)}var c="auto",d="center",e="Change.kinetic",f="2d",g="-",h="",i="left",j="text",k="Text",l="middle",m="normal",n="px ",o=" ",p="right",q="word",r="char",s="none",t=["fontFamily","fontSize","fontStyle","fontVariant","padding","align","lineHeight","text","width","height","wrap"],u=t.length,v=Kinetic.Util.createCanvasElement().getContext(f);Kinetic.Text=function(a){this.___init(a)},Kinetic.Text.prototype={___init:function(d){d=d||{},d.fill=d.fill||"black",void 0===d.width&&(d.width=c),void 0===d.height&&(d.height=c),Kinetic.Shape.call(this,d),this._fillFunc=a,this._strokeFunc=b,this.className=k;for(var f=0;u>f;f++)this.on(t[f]+e,this._setTextData);this._setTextData(),this.sceneFunc(this._sceneFunc),this.hitFunc(this._hitFunc)},_sceneFunc:function(a){var b,c=this.getPadding(),e=this.getTextHeight(),f=this.getLineHeight()*e,g=this.textArr,h=g.length,j=this.getWidth();for(a.setAttr("font",this._getContextFont()),a.setAttr("textBaseline",l),a.setAttr("textAlign",i),a.save(),c?(a.translate(c,0),a.translate(0,c+e/2)):a.translate(0,e/2),b=0;h>b;b++){var k=g[b],m=k.text,n=k.width;a.save(),this.getAlign()===p?a.translate(j-n-2*c,0):this.getAlign()===d&&a.translate((j-n-2*c)/2,0),this.partialText=m,a.fillStrokeShape(this),a.restore(),a.translate(0,f)}a.restore()},_hitFunc:function(a){var b=this.getWidth(),c=this.getHeight();a.beginPath(),a.rect(0,0,b,c),a.closePath(),a.fillStrokeShape(this)},setText:function(a){var b=Kinetic.Util._isString(a)?a:a.toString();return this._setAttr(j,b),this},getWidth:function(){return this.attrs.width===c?this.getTextWidth()+2*this.getPadding():this.attrs.width},getHeight:function(){return this.attrs.height===c?this.getTextHeight()*this.textArr.length*this.getLineHeight()+2*this.getPadding():this.attrs.height},getTextWidth:function(){return this.textWidth},getTextHeight:function(){return this.textHeight},_getTextSize:function(a){var b,c=v,d=this.getFontSize();return c.save(),c.font=this._getContextFont(),b=c.measureText(a),c.restore(),{width:b.width,height:parseInt(d,10)}},_getContextFont:function(){return this.getFontStyle()+o+this.getFontVariant()+o+this.getFontSize()+n+this.getFontFamily()},_addTextLine:function(a,b){return this.textArr.push({text:a,width:b})},_getTextWidth:function(a){return v.measureText(a).width},_setTextData:function(){var a=this.getText().split("\n"),b=+this.getFontSize(),d=0,e=this.getLineHeight()*b,f=this.attrs.width,h=this.attrs.height,i=f!==c,j=h!==c,k=this.getPadding(),l=f-2*k,m=h-2*k,n=0,p=this.getWrap(),q=p!==s,t=p!==r&&q;this.textArr=[],v.save(),v.font=this._getContextFont();for(var u=0,w=a.length;w>u;++u){var x=a[u],y=this._getTextWidth(x);if(i&&y>l)for(;x.length>0;){for(var z=0,A=x.length,B="",C=0;A>z;){var D=z+A>>>1,E=x.slice(0,D+1),F=this._getTextWidth(E);l>=F?(z=D+1,B=E,C=F):A=D}if(!B)break;if(t){var G=Math.max(B.lastIndexOf(o),B.lastIndexOf(g))+1;G>0&&(z=G,B=B.slice(0,z),C=this._getTextWidth(B))}if(this._addTextLine(B,C),d=Math.max(d,C),n+=e,!q||j&&n+e>m)break;if(x=x.slice(z),x.length>0&&(y=this._getTextWidth(x),l>=y)){this._addTextLine(x,y),n+=e,d=Math.max(d,y);break}}else this._addTextLine(x,y),n+=e,d=Math.max(d,y);if(j&&n+e>m)break}v.restore(),this.textHeight=b,this.textWidth=d}},Kinetic.Util.extend(Kinetic.Text,Kinetic.Shape),Kinetic.Factory.addGetterSetter(Kinetic.Text,"fontFamily","Arial"),Kinetic.Factory.addGetterSetter(Kinetic.Text,"fontSize",12),Kinetic.Factory.addGetterSetter(Kinetic.Text,"fontStyle",m),Kinetic.Factory.addGetterSetter(Kinetic.Text,"fontVariant",m),Kinetic.Factory.addGetterSetter(Kinetic.Text,"padding",0),Kinetic.Factory.addGetterSetter(Kinetic.Text,"align",i),Kinetic.Factory.addGetterSetter(Kinetic.Text,"lineHeight",1),Kinetic.Factory.addGetterSetter(Kinetic.Text,"wrap",q),Kinetic.Factory.addGetter(Kinetic.Text,"text",h),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Text,"text"),Kinetic.Collection.mapMethods(Kinetic.Text)}(),function(){Kinetic.Line=function(a){this.___init(a)},Kinetic.Line.prototype={___init:function(a){Kinetic.Shape.call(this,a),this.className="Line",this.on("pointsChange.kinetic tensionChange.kinetic closedChange.kinetic",function(){this._clearCache("tensionPoints")}),this.sceneFunc(this._sceneFunc)},_sceneFunc:function(a){var b,c,d,e=this.getPoints(),f=e.length,g=this.getTension(),h=this.getClosed();if(f){if(a.beginPath(),a.moveTo(e[0],e[1]),0!==g&&f>4){for(b=this.getTensionPoints(),c=b.length,d=h?0:4,h||a.quadraticCurveTo(b[0],b[1],b[2],b[3]);c-2>d;)a.bezierCurveTo(b[d++],b[d++],b[d++],b[d++],b[d++],b[d++]);h||a.quadraticCurveTo(b[c-2],b[c-1],e[f-2],e[f-1])}else for(d=2;f>d;d+=2)a.lineTo(e[d],e[d+1]);h?(a.closePath(),a.fillStrokeShape(this)):a.strokeShape(this)}},getTensionPoints:function(){return this._getCache("tensionPoints",this._getTensionPoints)},_getTensionPoints:function(){return this.getClosed()?this._getTensionPointsClosed():Kinetic.Util._expandPoints(this.getPoints(),this.getTension())},_getTensionPointsClosed:function(){var a=this.getPoints(),b=a.length,c=this.getTension(),d=Kinetic.Util,e=d._getControlPoints(a[b-2],a[b-1],a[0],a[1],a[2],a[3],c),f=d._getControlPoints(a[b-4],a[b-3],a[b-2],a[b-1],a[0],a[1],c),g=Kinetic.Util._expandPoints(a,c),h=[e[2],e[3]].concat(g).concat([f[0],f[1],a[b-2],a[b-1],f[2],f[3],e[0],e[1],a[0],a[1]]);return h}},Kinetic.Util.extend(Kinetic.Line,Kinetic.Shape),Kinetic.Factory.addGetterSetter(Kinetic.Line,"closed",!1),Kinetic.Factory.addGetterSetter(Kinetic.Line,"tension",0),Kinetic.Factory.addGetterSetter(Kinetic.Line,"points",[]),Kinetic.Collection.mapMethods(Kinetic.Line)}(),function(){Kinetic.Sprite=function(a){this.___init(a)},Kinetic.Sprite.prototype={___init:function(a){Kinetic.Shape.call(this,a),this.className="Sprite",this._updated=!0;var b=this;this.anim=new Kinetic.Animation(function(){var a=b._updated;return b._updated=!1,a}),this.on("animationChange.kinetic",function(){this.frameIndex(0)}),this.on("frameIndexChange.kinetic",function(){this._updated=!0}),this.on("frameRateChange.kinetic",function(){this.anim.isRunning()&&(clearInterval(this.interval),this._setInterval())}),this.sceneFunc(this._sceneFunc),this.hitFunc(this._hitFunc)},_sceneFunc:function(a){var b=this.getAnimation(),c=this.frameIndex(),d=4*c,e=this.getAnimations()[b],f=this.frameOffsets(),g=e[d+0],h=e[d+1],i=e[d+2],j=e[d+3],k=this.getImage();if(k)if(f){var l=f[b],m=2*c;a.drawImage(k,g,h,i,j,l[m+0],l[m+1],i,j)}else a.drawImage(k,g,h,i,j,0,0,i,j)},_hitFunc:function(a){var b=this.getAnimation(),c=this.frameIndex(),d=4*c,e=this.getAnimations()[b],f=this.frameOffsets(),g=e[d+2],h=e[d+3];if(a.beginPath(),f){var i=f[b],j=2*c;a.rect(i[j+0],i[j+1],g,h)}else a.rect(0,0,g,h);a.closePath(),a.fillShape(this)},_useBufferCanvas:function(){return(this.hasShadow()||1!==this.getAbsoluteOpacity())&&this.hasStroke()},_setInterval:function(){var a=this;this.interval=setInterval(function(){a._updateIndex()},1e3/this.getFrameRate())},start:function(){var a=this.getLayer();this.anim.setLayers(a),this._setInterval(),this.anim.start()},stop:function(){this.anim.stop(),clearInterval(this.interval)},isRunning:function(){return this.anim.isRunning()},_updateIndex:function(){var a=this.frameIndex(),b=this.getAnimation(),c=this.getAnimations(),d=c[b],e=d.length/4;this.frameIndex(e-1>a?a+1:0)}},Kinetic.Util.extend(Kinetic.Sprite,Kinetic.Shape),Kinetic.Factory.addGetterSetter(Kinetic.Sprite,"animation"),Kinetic.Factory.addGetterSetter(Kinetic.Sprite,"animations"),Kinetic.Factory.addGetterSetter(Kinetic.Sprite,"frameOffsets"),Kinetic.Factory.addGetterSetter(Kinetic.Sprite,"image"),Kinetic.Factory.addGetterSetter(Kinetic.Sprite,"frameIndex",0),Kinetic.Factory.addGetterSetter(Kinetic.Sprite,"frameRate",17),Kinetic.Factory.backCompat(Kinetic.Sprite,{index:"frameIndex",getIndex:"getFrameIndex",setIndex:"setFrameIndex"}),Kinetic.Collection.mapMethods(Kinetic.Sprite)}(),function(){Kinetic.Path=function(a){this.___init(a)},Kinetic.Path.prototype={___init:function(a){this.dataArray=[];var b=this;Kinetic.Shape.call(this,a),this.className="Path",this.dataArray=Kinetic.Path.parsePathData(this.getData()),this.on("dataChange.kinetic",function(){b.dataArray=Kinetic.Path.parsePathData(this.getData())}),this.sceneFunc(this._sceneFunc)},_sceneFunc:function(a){var b=this.dataArray,c=!1;a.beginPath();for(var d=0;dj?i:j,p=i>j?1:i/j,q=i>j?j/i:1;a.translate(g,h),a.rotate(m),a.scale(p,q),a.arc(0,0,o,k,k+l,1-n),a.scale(1/p,1/q),a.rotate(-m),a.translate(-g,-h);break;case"z":a.closePath(),c=!0}}c?a.fillStrokeShape(this):a.strokeShape(this)}},Kinetic.Util.extend(Kinetic.Path,Kinetic.Shape),Kinetic.Path.getLineLength=function(a,b,c,d){return Math.sqrt((c-a)*(c-a)+(d-b)*(d-b))},Kinetic.Path.getPointOnLine=function(a,b,c,d,e,f,g){void 0===f&&(f=b),void 0===g&&(g=c);var h=(e-c)/(d-b+1e-8),i=Math.sqrt(a*a/(1+h*h));b>d&&(i*=-1);var j,k=h*i;if(d===b)j={x:f,y:g+k};else if((g-c)/(f-b+1e-8)===h)j={x:f+i,y:g+k};else{var l,m,n=this.getLineLength(b,c,d,e);if(1e-8>n)return void 0;var o=(f-b)*(d-b)+(g-c)*(e-c);o/=n*n,l=b+o*(d-b),m=c+o*(e-c);var p=this.getLineLength(f,g,l,m),q=Math.sqrt(a*a-p*p);i=Math.sqrt(q*q/(1+h*h)),b>d&&(i*=-1),k=h*i,j={x:l+i,y:m+k}}return j},Kinetic.Path.getPointOnCubicBezier=function(a,b,c,d,e,f,g,h,i){function j(a){return a*a*a}function k(a){return 3*a*a*(1-a)}function l(a){return 3*a*(1-a)*(1-a)}function m(a){return(1-a)*(1-a)*(1-a)}var n=h*j(a)+f*k(a)+d*l(a)+b*m(a),o=i*j(a)+g*k(a)+e*l(a)+c*m(a);return{x:n,y:o}},Kinetic.Path.getPointOnQuadraticBezier=function(a,b,c,d,e,f,g){function h(a){return a*a}function i(a){return 2*a*(1-a)}function j(a){return(1-a)*(1-a)}var k=f*h(a)+d*i(a)+b*j(a),l=g*h(a)+e*i(a)+c*j(a);return{x:k,y:l}},Kinetic.Path.getPointOnEllipticalArc=function(a,b,c,d,e,f){var g=Math.cos(f),h=Math.sin(f),i={x:c*Math.cos(e),y:d*Math.sin(e)};return{x:a+(i.x*g-i.y*h),y:b+(i.x*h+i.y*g)}},Kinetic.Path.parsePathData=function(a){if(!a)return[];var b=a,c=["m","M","l","L","v","V","h","H","z","Z","c","C","q","Q","t","T","s","S","a","A"];b=b.replace(new RegExp(" ","g"),",");for(var d=0;d0&&""===k[0]&&k.shift();for(var l=0;l0&&!isNaN(k[0]);){var m,n,o,p,q,r,s,t,u,v,w=null,x=[],y=g,z=h;switch(j){case"l":g+=k.shift(),h+=k.shift(),w="L",x.push(g,h);break;case"L":g=k.shift(),h=k.shift(),x.push(g,h);break;case"m":var A=k.shift(),B=k.shift();if(g+=A,h+=B,w="M",f.length>2&&"z"===f[f.length-1].command)for(var C=f.length-2;C>=0;C--)if("M"===f[C].command){g=f[C].points[0]+A,h=f[C].points[1]+B;break}x.push(g,h),j="l";break;case"M":g=k.shift(),h=k.shift(),w="M",x.push(g,h),j="L";break;case"h":g+=k.shift(),w="L",x.push(g,h);break;case"H":g=k.shift(),w="L",x.push(g,h);break;case"v":h+=k.shift(),w="L",x.push(g,h);break;case"V":h=k.shift(),w="L",x.push(g,h);break;case"C":x.push(k.shift(),k.shift(),k.shift(),k.shift()),g=k.shift(),h=k.shift(),x.push(g,h);break;case"c":x.push(g+k.shift(),h+k.shift(),g+k.shift(),h+k.shift()),g+=k.shift(),h+=k.shift(),w="C",x.push(g,h);break;case"S":n=g,o=h,m=f[f.length-1],"C"===m.command&&(n=g+(g-m.points[2]),o=h+(h-m.points[3])),x.push(n,o,k.shift(),k.shift()),g=k.shift(),h=k.shift(),w="C",x.push(g,h);break;case"s":n=g,o=h,m=f[f.length-1],"C"===m.command&&(n=g+(g-m.points[2]),o=h+(h-m.points[3])),x.push(n,o,g+k.shift(),h+k.shift()),g+=k.shift(),h+=k.shift(),w="C",x.push(g,h);break;case"Q":x.push(k.shift(),k.shift()),g=k.shift(),h=k.shift(),x.push(g,h);break;case"q":x.push(g+k.shift(),h+k.shift()),g+=k.shift(),h+=k.shift(),w="Q",x.push(g,h);break;case"T":n=g,o=h,m=f[f.length-1],"Q"===m.command&&(n=g+(g-m.points[0]),o=h+(h-m.points[1])),g=k.shift(),h=k.shift(),w="Q",x.push(n,o,g,h);break;case"t":n=g,o=h,m=f[f.length-1],"Q"===m.command&&(n=g+(g-m.points[0]),o=h+(h-m.points[1])),g+=k.shift(),h+=k.shift(),w="Q",x.push(n,o,g,h);break;case"A":p=k.shift(),q=k.shift(),r=k.shift(),s=k.shift(),t=k.shift(),u=g,v=h,g=k.shift(),h=k.shift(),w="A",x=this.convertEndpointToCenterParameterization(u,v,g,h,s,t,p,q,r);break;case"a":p=k.shift(),q=k.shift(),r=k.shift(),s=k.shift(),t=k.shift(),u=g,v=h,g+=k.shift(),h+=k.shift(),w="A",x=this.convertEndpointToCenterParameterization(u,v,g,h,s,t,p,q,r)}f.push({command:w||j,points:x,start:{x:y,y:z},pathLength:this.calcLength(y,z,w||j,x)})}("z"===j||"Z"===j)&&f.push({command:"z",points:[],start:void 0,pathLength:0})}return f},Kinetic.Path.calcLength=function(a,b,c,d){var e,f,g,h,i=Kinetic.Path;switch(c){case"L":return i.getLineLength(a,b,d[0],d[1]);case"C":for(e=0,f=i.getPointOnCubicBezier(0,a,b,d[0],d[1],d[2],d[3],d[4],d[5]),h=.01;1>=h;h+=.01)g=i.getPointOnCubicBezier(h,a,b,d[0],d[1],d[2],d[3],d[4],d[5]),e+=i.getLineLength(f.x,f.y,g.x,g.y),f=g;return e;case"Q":for(e=0,f=i.getPointOnQuadraticBezier(0,a,b,d[0],d[1],d[2],d[3]),h=.01;1>=h;h+=.01)g=i.getPointOnQuadraticBezier(h,a,b,d[0],d[1],d[2],d[3]),e+=i.getLineLength(f.x,f.y,g.x,g.y),f=g;return e;case"A":e=0;var j=d[4],k=d[5],l=d[4]+k,m=Math.PI/180;if(Math.abs(j-l)k)for(h=j-m;h>l;h-=m)g=i.getPointOnEllipticalArc(d[0],d[1],d[2],d[3],h,0),e+=i.getLineLength(f.x,f.y,g.x,g.y),f=g;else for(h=j+m;l>h;h+=m)g=i.getPointOnEllipticalArc(d[0],d[1],d[2],d[3],h,0),e+=i.getLineLength(f.x,f.y,g.x,g.y),f=g;return g=i.getPointOnEllipticalArc(d[0],d[1],d[2],d[3],l,0),e+=i.getLineLength(f.x,f.y,g.x,g.y)}return 0},Kinetic.Path.convertEndpointToCenterParameterization=function(a,b,c,d,e,f,g,h,i){var j=i*(Math.PI/180),k=Math.cos(j)*(a-c)/2+Math.sin(j)*(b-d)/2,l=-1*Math.sin(j)*(a-c)/2+Math.cos(j)*(b-d)/2,m=k*k/(g*g)+l*l/(h*h);m>1&&(g*=Math.sqrt(m),h*=Math.sqrt(m));var n=Math.sqrt((g*g*h*h-g*g*l*l-h*h*k*k)/(g*g*l*l+h*h*k*k));e===f&&(n*=-1),isNaN(n)&&(n=0);var o=n*g*l/h,p=n*-h*k/g,q=(a+c)/2+Math.cos(j)*o-Math.sin(j)*p,r=(b+d)/2+Math.sin(j)*o+Math.cos(j)*p,s=function(a){return Math.sqrt(a[0]*a[0]+a[1]*a[1])},t=function(a,b){return(a[0]*b[0]+a[1]*b[1])/(s(a)*s(b))},u=function(a,b){return(a[0]*b[1]=1&&(y=0),0===f&&y>0&&(y-=2*Math.PI),1===f&&0>y&&(y+=2*Math.PI),[q,r,g,h,v,y,j,f]},Kinetic.Factory.addGetterSetter(Kinetic.Path,"data"),Kinetic.Collection.mapMethods(Kinetic.Path)}(),function(){function a(a){a.fillText(this.partialText,0,0)}function b(a){a.strokeText(this.partialText,0,0)}var c="",d="normal";Kinetic.TextPath=function(a){this.___init(a)},Kinetic.TextPath.prototype={___init:function(c){var d=this;this.dummyCanvas=Kinetic.Util.createCanvasElement(),this.dataArray=[],Kinetic.Shape.call(this,c),this._fillFunc=a,this._strokeFunc=b,this._fillFuncHit=a,this._strokeFuncHit=b,this.className="TextPath",this.dataArray=Kinetic.Path.parsePathData(this.attrs.data),this.on("dataChange.kinetic",function(){d.dataArray=Kinetic.Path.parsePathData(this.attrs.data)}),this.on("textChange.kinetic textStroke.kinetic textStrokeWidth.kinetic",d._setTextData),d._setTextData(),this.sceneFunc(this._sceneFunc)},_sceneFunc:function(a){a.setAttr("font",this._getContextFont()),a.setAttr("textBaseline","middle"),a.setAttr("textAlign","left"),a.save();for(var b=this.glyphInfo,c=0;c0)return g=d,b[d];"M"==b[d].command&&(c={x:b[d].points[0],y:b[d].points[1]})}return{}},j=function(b){var f=a._getTextSize(b).width,g=0,j=0;for(d=void 0;Math.abs(f-g)/f>.01&&25>j;){j++;for(var k=g;void 0===e;)e=i(),e&&k+e.pathLengthf?d=Kinetic.Path.getPointOnLine(f,c.x,c.y,e.points[0],e.points[1],c.x,c.y):e=void 0;break;case"A":var m=e.points[4],n=e.points[5],o=e.points[4]+n;0===h?h=m+1e-8:f>g?h+=Math.PI/180*n/Math.abs(n):h-=Math.PI/360*n/Math.abs(n),(0>n&&o>h||n>=0&&h>o)&&(h=o,l=!0),d=Kinetic.Path.getPointOnEllipticalArc(e.points[0],e.points[1],e.points[2],e.points[3],h,e.points[6]);break;case"C":0===h?h=f>e.pathLength?1e-8:f/e.pathLength:f>g?h+=(f-g)/e.pathLength:h-=(g-f)/e.pathLength,h>1&&(h=1,l=!0),d=Kinetic.Path.getPointOnCubicBezier(h,e.start.x,e.start.y,e.points[0],e.points[1],e.points[2],e.points[3],e.points[4],e.points[5]);break;case"Q":0===h?h=f/e.pathLength:f>g?h+=(f-g)/e.pathLength:h-=(g-f)/e.pathLength,h>1&&(h=1,l=!0),d=Kinetic.Path.getPointOnQuadraticBezier(h,e.start.x,e.start.y,e.points[0],e.points[1],e.points[2],e.points[3])}void 0!==d&&(g=Kinetic.Path.getLineLength(c.x,c.y,d.x,d.y)),l&&(l=!1,e=void 0)}},k=0;kb;b++)c=f*Math.sin(2*b*Math.PI/e),d=-1*f*Math.cos(2*b*Math.PI/e),a.lineTo(c,d);a.closePath(),a.fillStrokeShape(this)}},Kinetic.Util.extend(Kinetic.RegularPolygon,Kinetic.Shape),Kinetic.Factory.addGetterSetter(Kinetic.RegularPolygon,"radius",0),Kinetic.Factory.addGetterSetter(Kinetic.RegularPolygon,"sides",0),Kinetic.Collection.mapMethods(Kinetic.RegularPolygon)}(),function(){Kinetic.Star=function(a){this.___init(a)},Kinetic.Star.prototype={___init:function(a){Kinetic.Shape.call(this,a),this.className="Star",this.sceneFunc(this._sceneFunc)},_sceneFunc:function(a){var b=this.innerRadius(),c=this.outerRadius(),d=this.numPoints();a.beginPath(),a.moveTo(0,0-c);for(var e=1;2*d>e;e++){var f=e%2===0?c:b,g=f*Math.sin(e*Math.PI/d),h=-1*f*Math.cos(e*Math.PI/d);a.lineTo(g,h)}a.closePath(),a.fillStrokeShape(this)}},Kinetic.Util.extend(Kinetic.Star,Kinetic.Shape),Kinetic.Factory.addGetterSetter(Kinetic.Star,"numPoints",5),Kinetic.Factory.addGetterSetter(Kinetic.Star,"innerRadius",0),Kinetic.Factory.addGetterSetter(Kinetic.Star,"outerRadius",0),Kinetic.Collection.mapMethods(Kinetic.Star)}(),function(){var a=["fontFamily","fontSize","fontStyle","padding","lineHeight","text"],b="Change.kinetic",c="none",d="up",e="right",f="down",g="left",h="Label",i=a.length;Kinetic.Label=function(a){this.____init(a)},Kinetic.Label.prototype={____init:function(a){var b=this;Kinetic.Group.call(this,a),this.className=h,this.on("add.kinetic",function(a){b._addListeners(a.child),b._sync()})},getText:function(){return this.find("Text")[0]},getTag:function(){return this.find("Tag")[0]},_addListeners:function(c){var d,e=this,f=function(){e._sync()};for(d=0;i>d;d++)c.on(a[d]+b,f)},getWidth:function(){return this.getText().getWidth()},getHeight:function(){return this.getText().getHeight()},_sync:function(){var a,b,c,h,i,j,k,l=this.getText(),m=this.getTag();if(l&&m){switch(a=l.getWidth(),b=l.getHeight(),c=m.getPointerDirection(),h=m.getPointerWidth(),k=m.getPointerHeight(),i=0,j=0,c){case d:i=a/2,j=-1*k;break;case e:i=a+h,j=b/2;break;case f:i=a/2,j=b+k;break;case g:i=-1*h,j=b/2}m.setAttrs({x:-1*i,y:-1*j,width:a,height:b}),l.setAttrs({x:-1*i,y:-1*j})}}},Kinetic.Util.extend(Kinetic.Label,Kinetic.Group),Kinetic.Collection.mapMethods(Kinetic.Label),Kinetic.Tag=function(a){this.___init(a)},Kinetic.Tag.prototype={___init:function(a){Kinetic.Shape.call(this,a),this.className="Tag",this.sceneFunc(this._sceneFunc)},_sceneFunc:function(a){var b=this.getWidth(),c=this.getHeight(),h=this.getPointerDirection(),i=this.getPointerWidth(),j=this.getPointerHeight(),k=this.getCornerRadius();a.beginPath(),a.moveTo(0,0),h===d&&(a.lineTo((b-i)/2,0),a.lineTo(b/2,-1*j),a.lineTo((b+i)/2,0)),k?(a.lineTo(b-k,0),a.arc(b-k,k,k,3*Math.PI/2,0,!1)):a.lineTo(b,0),h===e&&(a.lineTo(b,(c-j)/2),a.lineTo(b+i,c/2),a.lineTo(b,(c+j)/2)),k?(a.lineTo(b,c-k),a.arc(b-k,c-k,k,0,Math.PI/2,!1)):a.lineTo(b,c),h===f&&(a.lineTo((b+i)/2,c),a.lineTo(b/2,c+j),a.lineTo((b-i)/2,c)),k?(a.lineTo(k,c),a.arc(k,c-k,k,Math.PI/2,Math.PI,!1)):a.lineTo(0,c),h===g&&(a.lineTo(0,(c+j)/2),a.lineTo(-1*i,c/2),a.lineTo(0,(c-j)/2)),k&&(a.lineTo(0,k),a.arc(k,k,k,Math.PI,3*Math.PI/2,!1)),a.closePath(),a.fillStrokeShape(this)}},Kinetic.Util.extend(Kinetic.Tag,Kinetic.Shape),Kinetic.Factory.addGetterSetter(Kinetic.Tag,"pointerDirection",c),Kinetic.Factory.addGetterSetter(Kinetic.Tag,"pointerWidth",0),Kinetic.Factory.addGetterSetter(Kinetic.Tag,"pointerHeight",0),Kinetic.Factory.addGetterSetter(Kinetic.Tag,"cornerRadius",0),Kinetic.Collection.mapMethods(Kinetic.Tag)}(),function(){Kinetic.Arrow=function(a){this.____init(a)},Kinetic.Arrow.prototype={____init:function(a){Kinetic.Line.call(this,a),this.className="Arrow"},_sceneFunc:function(a){var b=2*Math.PI,c=this.points(),d=c.length,e=c[d-2]-c[d-4],f=c[d-1]-c[d-3],g=(Math.atan2(f,e)+b)%b,h=this.pointerLength(),i=this.pointerWidth();a.save(),a.beginPath(),a.translate(c[d-2],c[d-1]),a.rotate(g),a.moveTo(0,0),a.lineTo(-h,i/2),a.lineTo(-h,-i/2),a.closePath(),a.restore(),this.pointerAtBeginning()&&(a.save(),a.translate(c[0],c[1]),e=c[2]-c[0],f=c[3]-c[1],a.rotate((Math.atan2(-f,-e)+b)%b),a.moveTo(0,0),a.lineTo(-10,6),a.lineTo(-10,-6),a.closePath(),a.restore()),a.fillStrokeShape(this),Kinetic.Line.prototype._sceneFunc.apply(this,arguments)}},Kinetic.Util.extend(Kinetic.Arrow,Kinetic.Line),Kinetic.Factory.addGetterSetter(Kinetic.Arrow,"pointerLength",10),Kinetic.Factory.addGetterSetter(Kinetic.Arrow,"pointerWidth",10),Kinetic.Factory.addGetterSetter(Kinetic.Arrow,"pointerAtBeginning",!1),Kinetic.Collection.mapMethods(Kinetic.Arrow)}(); \ No newline at end of file diff --git a/kinetic.js b/konva.js similarity index 87% rename from kinetic.js rename to konva.js index ba81c679..669f8b1f 100644 --- a/kinetic.js +++ b/konva.js @@ -1,9 +1,9 @@ /* - * KineticJS JavaScript Framework v5.2.0 - * http://lavrton.github.io/KineticJS/ + * KonvaJS JavaScript Framework v5.2.0 + * http://lavrton.github.io/KonvaJS/ * Licensed under the MIT or GPL Version 2 licenses. - * Date: 2015-01-22 + * Date: 2015-01-27 * * Original work Copyright (C) 2011 - 2013 by Eric Rowell * Modified work Copyright (C) 2014 - 2015 by Anton Lavrenov @@ -27,14 +27,14 @@ * THE SOFTWARE. */ /** - * @namespace Kinetic + * @namespace Konva */ /*jshint -W079, -W020*/ -var Kinetic = {}; +var Konva = {}; (function(root) { var PI_OVER_180 = Math.PI / 180; - Kinetic = { + Konva = { // public version: '5.2.0', @@ -52,13 +52,13 @@ var Kinetic = {}; traceArrMax: 100, dblClickWindow: 400, /** - * Global pixel ratio configuration. KineticJS automatically detect pixel ratio of current device. + * Global pixel ratio configuration. KonvaJS automatically detect pixel ratio of current device. * But you may override such property, if you want to use your value. * @property pixelRatio * @default undefined - * @memberof Kinetic + * @memberof Konva * @example - * Kinetic.pixelRatio = 1; + * Konva.pixelRatio = 1; */ pixelRatio: undefined, /** @@ -66,19 +66,19 @@ var Kinetic = {}; * only then start dragging. * @property dragDistance * @default 0 - * @memberof Kinetic + * @memberof Konva * @example - * Kinetic.dragDistance = 10; + * Konva.dragDistance = 10; */ dragDistance : 0, /** * Use degree values for angle properties. You may set this property to false if you want to use radiant values. * @property angleDeg * @default true - * @memberof Kinetic + * @memberof Konva * @example * node.rotation(45); // 45 degrees - * Kinetic.angleDeg = false; + * Konva.angleDeg = false; * node.rotation(Math.PI / 2); // PI/2 radian */ angleDeg: true, @@ -86,9 +86,9 @@ var Kinetic = {}; * Show different warnings about errors or wrong API usage * @property showWarnings * @default true - * @memberof Kinetic + * @memberof Konva * @example - * Kinetic.showWarnings = false; + * Konva.showWarnings = false; */ showWarnings : true, @@ -96,7 +96,7 @@ var Kinetic = {}; /** * @namespace Filters - * @memberof Kinetic + * @memberof Konva */ Filters: {}, @@ -104,28 +104,28 @@ var Kinetic = {}; * Node constructor. Nodes are entities that can be transformed, layered, * and have bound events. The stage, layers, groups, and shapes all extend Node. * @constructor - * @memberof Kinetic + * @memberof Konva * @abstract * @param {Object} config - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] + * @param {Number} [config.x] + * @param {Number} [config.y] + * @param {Number} [config.width] + * @param {Number} [config.height] + * @param {Boolean} [config.visible] + * @param {Boolean} [config.listening] whether or not the node is listening for events + * @param {String} [config.id] unique id + * @param {String} [config.name] non-unique name + * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 + * @param {Object} [config.scale] set scale + * @param {Number} [config.scaleX] set scale x + * @param {Number} [config.scaleY] set scale y + * @param {Number} [config.rotation] rotation in degrees + * @param {Object} [config.offset] offset from center point and rotation point + * @param {Number} [config.offsetX] set offset x + * @param {Number} [config.offsetY] set offset y + * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop + * the entire stage by dragging any portion of the stage + * @param {Number} [config.dragDistance] * @param {Function} [config.dragBoundFunc] */ Node: function(config) { @@ -136,95 +136,95 @@ var Kinetic = {}; * Shape constructor. Shapes are primitive objects such as rectangles, * circles, text, lines, etc. * @constructor - * @memberof Kinetic - * @augments Kinetic.Node + * @memberof Konva + * @augments Konva.Node * @param {Object} config - * @param {String} [config.fill] fill color - * @param {Integer} [config.fillRed] set fill red component - * @param {Integer} [config.fillGreen] set fill green component - * @param {Integer} [config.fillBlue] set fill blue component - * @param {Integer} [config.fillAlpha] set fill alpha component - * @param {Image} [config.fillPatternImage] fill pattern image - * @param {Number} [config.fillPatternX] - * @param {Number} [config.fillPatternY] - * @param {Object} [config.fillPatternOffset] object with x and y component - * @param {Number} [config.fillPatternOffsetX] - * @param {Number} [config.fillPatternOffsetY] - * @param {Object} [config.fillPatternScale] object with x and y component - * @param {Number} [config.fillPatternScaleX] - * @param {Number} [config.fillPatternScaleY] - * @param {Number} [config.fillPatternRotation] - * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" - * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component - * @param {Number} [config.fillLinearGradientStartPointX] - * @param {Number} [config.fillLinearGradientStartPointY] - * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component - * @param {Number} [config.fillLinearGradientEndPointX] - * @param {Number} [config.fillLinearGradientEndPointY] - * @param {Array} [config.fillLinearGradientColorStops] array of color stops - * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component - * @param {Number} [config.fillRadialGradientStartPointX] - * @param {Number} [config.fillRadialGradientStartPointY] - * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component - * @param {Number} [config.fillRadialGradientEndPointX] - * @param {Number} [config.fillRadialGradientEndPointY] - * @param {Number} [config.fillRadialGradientStartRadius] - * @param {Number} [config.fillRadialGradientEndRadius] - * @param {Array} [config.fillRadialGradientColorStops] array of color stops - * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true - * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration - * @param {String} [config.stroke] stroke color - * @param {Integer} [config.strokeRed] set stroke red component - * @param {Integer} [config.strokeGreen] set stroke green component - * @param {Integer} [config.strokeBlue] set stroke blue component - * @param {Integer} [config.strokeAlpha] set stroke alpha component - * @param {Number} [config.strokeWidth] stroke width - * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true - * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true - * @param {String} [config.lineJoin] can be miter, round, or bevel. The default - * is miter - * @param {String} [config.lineCap] can be butt, round, or sqare. The default - * is butt - * @param {String} [config.shadowColor] - * @param {Integer} [config.shadowRed] set shadow color red component - * @param {Integer} [config.shadowGreen] set shadow color green component - * @param {Integer} [config.shadowBlue] set shadow color blue component - * @param {Integer} [config.shadowAlpha] set shadow color alpha component - * @param {Number} [config.shadowBlur] - * @param {Object} [config.shadowOffset] object with x and y component - * @param {Number} [config.shadowOffsetX] - * @param {Number} [config.shadowOffsetY] - * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number - * between 0 and 1 - * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true - * @param {Array} [config.dash] + * @param {String} [config.fill] fill color + * @param {Integer} [config.fillRed] set fill red component + * @param {Integer} [config.fillGreen] set fill green component + * @param {Integer} [config.fillBlue] set fill blue component + * @param {Integer} [config.fillAlpha] set fill alpha component + * @param {Image} [config.fillPatternImage] fill pattern image + * @param {Number} [config.fillPatternX] + * @param {Number} [config.fillPatternY] + * @param {Object} [config.fillPatternOffset] object with x and y component + * @param {Number} [config.fillPatternOffsetX] + * @param {Number} [config.fillPatternOffsetY] + * @param {Object} [config.fillPatternScale] object with x and y component + * @param {Number} [config.fillPatternScaleX] + * @param {Number} [config.fillPatternScaleY] + * @param {Number} [config.fillPatternRotation] + * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" + * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component + * @param {Number} [config.fillLinearGradientStartPointX] + * @param {Number} [config.fillLinearGradientStartPointY] + * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component + * @param {Number} [config.fillLinearGradientEndPointX] + * @param {Number} [config.fillLinearGradientEndPointY] + * @param {Array} [config.fillLinearGradientColorStops] array of color stops + * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component + * @param {Number} [config.fillRadialGradientStartPointX] + * @param {Number} [config.fillRadialGradientStartPointY] + * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component + * @param {Number} [config.fillRadialGradientEndPointX] + * @param {Number} [config.fillRadialGradientEndPointY] + * @param {Number} [config.fillRadialGradientStartRadius] + * @param {Number} [config.fillRadialGradientEndRadius] + * @param {Array} [config.fillRadialGradientColorStops] array of color stops + * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true + * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration + * @param {String} [config.stroke] stroke color + * @param {Integer} [config.strokeRed] set stroke red component + * @param {Integer} [config.strokeGreen] set stroke green component + * @param {Integer} [config.strokeBlue] set stroke blue component + * @param {Integer} [config.strokeAlpha] set stroke alpha component + * @param {Number} [config.strokeWidth] stroke width + * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true + * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true + * @param {String} [config.lineJoin] can be miter, round, or bevel. The default + * is miter + * @param {String} [config.lineCap] can be butt, round, or sqare. The default + * is butt + * @param {String} [config.shadowColor] + * @param {Integer} [config.shadowRed] set shadow color red component + * @param {Integer} [config.shadowGreen] set shadow color green component + * @param {Integer} [config.shadowBlue] set shadow color blue component + * @param {Integer} [config.shadowAlpha] set shadow color alpha component + * @param {Number} [config.shadowBlur] + * @param {Object} [config.shadowOffset] object with x and y component + * @param {Number} [config.shadowOffsetX] + * @param {Number} [config.shadowOffsetY] + * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number + * between 0 and 1 + * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true + * @param {Array} [config.dash] * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] + * @param {Number} [config.x] + * @param {Number} [config.y] + * @param {Number} [config.width] + * @param {Number} [config.height] + * @param {Boolean} [config.visible] + * @param {Boolean} [config.listening] whether or not the node is listening for events + * @param {String} [config.id] unique id + * @param {String} [config.name] non-unique name + * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 + * @param {Object} [config.scale] set scale + * @param {Number} [config.scaleX] set scale x + * @param {Number} [config.scaleY] set scale y + * @param {Number} [config.rotation] rotation in degrees + * @param {Object} [config.offset] offset from center point and rotation point + * @param {Number} [config.offsetX] set offset x + * @param {Number} [config.offsetY] set offset y + * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop + * the entire stage by dragging any portion of the stage + * @param {Number} [config.dragDistance] * @param {Function} [config.dragBoundFunc] * @example - * var customShape = new Kinetic.Shape({ + * var customShape = new Konva.Shape({ * x: 5, * y: 10, * fill: 'red', - * // a Kinetic.Canvas renderer is passed into the drawFunc function + * // a Konva.Canvas renderer is passed into the drawFunc function * drawFunc: function(context) { * context.beginPath(); * context.moveTo(200, 50); @@ -242,35 +242,35 @@ var Kinetic = {}; /** * Container constructor.  Containers are used to contain nodes or other containers * @constructor - * @memberof Kinetic - * @augments Kinetic.Node + * @memberof Konva + * @augments Konva.Node * @abstract * @param {Object} config - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] + * @param {Number} [config.x] + * @param {Number} [config.y] + * @param {Number} [config.width] + * @param {Number} [config.height] + * @param {Boolean} [config.visible] + * @param {Boolean} [config.listening] whether or not the node is listening for events + * @param {String} [config.id] unique id + * @param {String} [config.name] non-unique name + * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 + * @param {Object} [config.scale] set scale + * @param {Number} [config.scaleX] set scale x + * @param {Number} [config.scaleY] set scale y + * @param {Number} [config.rotation] rotation in degrees + * @param {Object} [config.offset] offset from center point and rotation point + * @param {Number} [config.offsetX] set offset x + * @param {Number} [config.offsetY] set offset y + * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop + * the entire stage by dragging any portion of the stage + * @param {Number} [config.dragDistance] * @param {Function} [config.dragBoundFunc] - * * @param {Object} [config.clip] set clip - * @param {Number} [config.clipX] set clip x - * @param {Number} [config.clipY] set clip y - * @param {Number} [config.clipWidth] set clip width - * @param {Number} [config.clipHeight] set clip height + * * @param {Object} [config.clip] set clip + * @param {Number} [config.clipX] set clip x + * @param {Number} [config.clipY] set clip y + * @param {Number} [config.clipWidth] set clip width + * @param {Number} [config.clipHeight] set clip height */ Container: function(config) { @@ -280,32 +280,32 @@ var Kinetic = {}; /** * Stage constructor. A stage is used to contain multiple layers * @constructor - * @memberof Kinetic - * @augments Kinetic.Container + * @memberof Konva + * @augments Konva.Container * @param {Object} config * @param {String|Element} config.container Container id or DOM element - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] + * @param {Number} [config.x] + * @param {Number} [config.y] + * @param {Number} [config.width] + * @param {Number} [config.height] + * @param {Boolean} [config.visible] + * @param {Boolean} [config.listening] whether or not the node is listening for events + * @param {String} [config.id] unique id + * @param {String} [config.name] non-unique name + * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 + * @param {Object} [config.scale] set scale + * @param {Number} [config.scaleX] set scale x + * @param {Number} [config.scaleY] set scale y + * @param {Number} [config.rotation] rotation in degrees + * @param {Object} [config.offset] offset from center point and rotation point + * @param {Number} [config.offsetX] set offset x + * @param {Number} [config.offsetY] set offset y + * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop + * the entire stage by dragging any portion of the stage + * @param {Number} [config.dragDistance] * @param {Function} [config.dragBoundFunc] * @example - * var stage = new Kinetic.Stage({ + * var stage = new Konva.Stage({ * width: 500, * height: 800, * container: 'containerId' @@ -318,39 +318,39 @@ var Kinetic = {}; /** * BaseLayer constructor. * @constructor - * @memberof Kinetic - * @augments Kinetic.Container + * @memberof Konva + * @augments Konva.Container * @param {Object} config * @param {Boolean} [config.clearBeforeDraw] set this property to false if you don't want * to clear the canvas before each layer draw. The default value is true. - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] + * @param {Number} [config.x] + * @param {Number} [config.y] + * @param {Number} [config.width] + * @param {Number} [config.height] + * @param {Boolean} [config.visible] + * @param {Boolean} [config.listening] whether or not the node is listening for events + * @param {String} [config.id] unique id + * @param {String} [config.name] non-unique name + * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 + * @param {Object} [config.scale] set scale + * @param {Number} [config.scaleX] set scale x + * @param {Number} [config.scaleY] set scale y + * @param {Number} [config.rotation] rotation in degrees + * @param {Object} [config.offset] offset from center point and rotation point + * @param {Number} [config.offsetX] set offset x + * @param {Number} [config.offsetY] set offset y + * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop + * the entire stage by dragging any portion of the stage + * @param {Number} [config.dragDistance] * @param {Function} [config.dragBoundFunc] - * * @param {Object} [config.clip] set clip - * @param {Number} [config.clipX] set clip x - * @param {Number} [config.clipY] set clip y - * @param {Number} [config.clipWidth] set clip width - * @param {Number} [config.clipHeight] set clip height + * * @param {Object} [config.clip] set clip + * @param {Number} [config.clipX] set clip x + * @param {Number} [config.clipY] set clip y + * @param {Number} [config.clipWidth] set clip width + * @param {Number} [config.clipHeight] set clip height * @example - * var layer = new Kinetic.Layer(); + * var layer = new Konva.Layer(); */ BaseLayer: function(config) { this.___init(config); @@ -360,39 +360,39 @@ var Kinetic = {}; * Layer constructor. Layers are tied to their own canvas element and are used * to contain groups or shapes. * @constructor - * @memberof Kinetic - * @augments Kinetic.BaseLayer + * @memberof Konva + * @augments Konva.BaseLayer * @param {Object} config * @param {Boolean} [config.clearBeforeDraw] set this property to false if you don't want * to clear the canvas before each layer draw. The default value is true. - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] + * @param {Number} [config.x] + * @param {Number} [config.y] + * @param {Number} [config.width] + * @param {Number} [config.height] + * @param {Boolean} [config.visible] + * @param {Boolean} [config.listening] whether or not the node is listening for events + * @param {String} [config.id] unique id + * @param {String} [config.name] non-unique name + * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 + * @param {Object} [config.scale] set scale + * @param {Number} [config.scaleX] set scale x + * @param {Number} [config.scaleY] set scale y + * @param {Number} [config.rotation] rotation in degrees + * @param {Object} [config.offset] offset from center point and rotation point + * @param {Number} [config.offsetX] set offset x + * @param {Number} [config.offsetY] set offset y + * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop + * the entire stage by dragging any portion of the stage + * @param {Number} [config.dragDistance] * @param {Function} [config.dragBoundFunc] - * * @param {Object} [config.clip] set clip - * @param {Number} [config.clipX] set clip x - * @param {Number} [config.clipY] set clip y - * @param {Number} [config.clipWidth] set clip width - * @param {Number} [config.clipHeight] set clip height + * * @param {Object} [config.clip] set clip + * @param {Number} [config.clipX] set clip x + * @param {Number} [config.clipY] set clip y + * @param {Number} [config.clipWidth] set clip width + * @param {Number} [config.clipHeight] set clip height * @example - * var layer = new Kinetic.Layer(); + * var layer = new Konva.Layer(); */ Layer: function(config) { this.____init(config); @@ -404,8 +404,8 @@ var Kinetic = {}; * or event pub/sub, you should use FastLayer instead of Layer to create your layers. * It renders about 2x faster than normal layers. * @constructor - * @memberof Kinetic - * @augments Kinetic.BaseLayer + * @memberof Konva + * @augments Konva.BaseLayer * @param {Object} config * @param {Boolean} [config.clearBeforeDraw] set this property to false if you don't want * to clear the canvas before each layer draw. The default value is true. @@ -413,14 +413,14 @@ var Kinetic = {}; * @param {String} [config.id] unique id * @param {String} [config.name] non-unique name * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * * @param {Object} [config.clip] set clip - * @param {Number} [config.clipX] set clip x - * @param {Number} [config.clipY] set clip y - * @param {Number} [config.clipWidth] set clip width - * @param {Number} [config.clipHeight] set clip height + * * @param {Object} [config.clip] set clip + * @param {Number} [config.clipX] set clip x + * @param {Number} [config.clipY] set clip y + * @param {Number} [config.clipWidth] set clip width + * @param {Number} [config.clipHeight] set clip height * @example - * var layer = new Kinetic.FastLayer(); + * var layer = new Konva.FastLayer(); */ FastLayer: function(config) { this.____init(config); @@ -429,37 +429,37 @@ var Kinetic = {}; /** * Group constructor. Groups are used to contain shapes or other groups. * @constructor - * @memberof Kinetic - * @augments Kinetic.Container + * @memberof Konva + * @augments Konva.Container * @param {Object} config - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] + * @param {Number} [config.x] + * @param {Number} [config.y] + * @param {Number} [config.width] + * @param {Number} [config.height] + * @param {Boolean} [config.visible] + * @param {Boolean} [config.listening] whether or not the node is listening for events + * @param {String} [config.id] unique id + * @param {String} [config.name] non-unique name + * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 + * @param {Object} [config.scale] set scale + * @param {Number} [config.scaleX] set scale x + * @param {Number} [config.scaleY] set scale y + * @param {Number} [config.rotation] rotation in degrees + * @param {Object} [config.offset] offset from center point and rotation point + * @param {Number} [config.offsetX] set offset x + * @param {Number} [config.offsetY] set offset y + * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop + * the entire stage by dragging any portion of the stage + * @param {Number} [config.dragDistance] * @param {Function} [config.dragBoundFunc] - * * @param {Object} [config.clip] set clip - * @param {Number} [config.clipX] set clip x - * @param {Number} [config.clipY] set clip y - * @param {Number} [config.clipWidth] set clip width - * @param {Number} [config.clipHeight] set clip height + * * @param {Object} [config.clip] set clip + * @param {Number} [config.clipX] set clip x + * @param {Number} [config.clipY] set clip y + * @param {Number} [config.clipWidth] set clip width + * @param {Number} [config.clipHeight] set clip height * @example - * var group = new Kinetic.Group(); + * var group = new Konva.Group(); */ Group: function(config) { this.___init(config); @@ -468,10 +468,10 @@ var Kinetic = {}; /** * returns whether or not drag and drop is currently active * @method - * @memberof Kinetic + * @memberof Konva */ isDragging: function() { - var dd = Kinetic.DD; + var dd = Konva.DD; // if DD is not included with the build, then // drag and drop is not even possible @@ -485,10 +485,10 @@ var Kinetic = {}; * returns whether or not a drag and drop operation is ready, but may * not necessarily have started * @method - * @memberof Kinetic + * @memberof Konva */ isDragReady: function() { - var dd = Kinetic.DD; + var dd = Konva.DD; // if DD is not included with the build, then // drag and drop is not even possible @@ -562,14 +562,14 @@ var Kinetic = {}; // adding mobile flab mobile: mobile, - ieMobile: ieMobile // If this is true (i.e., WP8), then Kinetic touch events are executed instead of equivalent Kinetic mouse events + ieMobile: ieMobile // If this is true (i.e., WP8), then Konva touch events are executed instead of equivalent Konva mouse events }; }, // user agent UA: undefined }; - Kinetic.UA = Kinetic._parseUA((root.navigator && root.navigator.userAgent) || ''); + Konva.UA = Konva._parseUA((root.navigator && root.navigator.userAgent) || ''); })(this); @@ -592,11 +592,11 @@ var Kinetic = {}; // if the module has no dependencies, the above pattern can be simplified to ( function(root, factory) { if( typeof exports === 'object') { - var KineticJS = factory(); + var KonvaJS = factory(); // runtime-check for browserify if(global.window === global) { - Kinetic.document = global.document; - Kinetic.window = global; + Konva.document = global.document; + Konva.window = global; } else { // Node. Does not work with strict CommonJS, but // only CommonJS-like enviroments that support module.exports, @@ -604,39 +604,39 @@ var Kinetic = {}; var Canvas = require('canvas'); var jsdom = require('jsdom').jsdom; - Kinetic.document = jsdom(''); - Kinetic.window = Kinetic.document.createWindow(); - Kinetic.window.Image = Canvas.Image; - Kinetic._nodeCanvas = Canvas; + Konva.document = jsdom(''); + Konva.window = Konva.document.createWindow(); + Konva.window.Image = Canvas.Image; + Konva._nodeCanvas = Canvas; } - Kinetic.root = root; - module.exports = KineticJS; + Konva.root = root; + module.exports = KonvaJS; return; } else if( typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define(factory); } - Kinetic.document = document; - Kinetic.window = window; - Kinetic.root = root; + Konva.document = document; + Konva.window = window; + Konva.root = root; }(this, function() { // Just return a value to define the module export. // This example returns an object, but the module // can return a function as the exported value. - return Kinetic; + return Konva; })); ;(function() { /** * Collection constructor. Collection extends - * Array. This class is used in conjunction with {@link Kinetic.Container#get} + * Array. This class is used in conjunction with {@link Konva.Container#get} * @constructor - * @memberof Kinetic + * @memberof Konva */ - Kinetic.Collection = function() { + Konva.Collection = function() { var args = [].slice.call(arguments), length = args.length, i = 0; this.length = length; @@ -645,12 +645,12 @@ var Kinetic = {}; } return this; }; - Kinetic.Collection.prototype = []; + Konva.Collection.prototype = []; /** * iterate through node array and run a function for each node. * The node and index is passed into the function * @method - * @memberof Kinetic.Collection.prototype + * @memberof Konva.Collection.prototype * @param {Function} func * @example * // get all nodes with name foo inside layer, and set x to 10 for each @@ -658,7 +658,7 @@ var Kinetic = {}; * shape.setX(10); * }); */ - Kinetic.Collection.prototype.each = function(func) { + Konva.Collection.prototype.each = function(func) { for(var n = 0; n < this.length; n++) { func(this[n], n); } @@ -666,9 +666,9 @@ var Kinetic = {}; /** * convert collection into an array * @method - * @memberof Kinetic.Collection.prototype + * @memberof Konva.Collection.prototype */ - Kinetic.Collection.prototype.toArray = function() { + Konva.Collection.prototype.toArray = function() { var arr = [], len = this.length, n; @@ -681,11 +681,11 @@ var Kinetic = {}; /** * convert array into a collection * @method - * @memberof Kinetic.Collection + * @memberof Konva.Collection * @param {Array} arr */ - Kinetic.Collection.toCollection = function(arr) { - var collection = new Kinetic.Collection(), + Konva.Collection.toCollection = function(arr) { + var collection = new Konva.Collection(), len = arr.length, n; @@ -696,8 +696,8 @@ var Kinetic = {}; }; // map one method by it's name - Kinetic.Collection._mapMethod = function(methodName) { - Kinetic.Collection.prototype[methodName] = function() { + Konva.Collection._mapMethod = function(methodName) { + Konva.Collection.prototype[methodName] = function() { var len = this.length, i; @@ -710,10 +710,10 @@ var Kinetic = {}; }; }; - Kinetic.Collection.mapMethods = function(constructor) { + Konva.Collection.mapMethods = function(constructor) { var prot = constructor.prototype; for(var methodName in prot) { - Kinetic.Collection._mapMethod(methodName); + Konva.Collection._mapMethod(methodName); } }; @@ -729,7 +729,7 @@ var Kinetic = {}; /* * The usage of this class was inspired by some of the work done by a forked - * project, KineticJS-Ext by Wappworks, which is based on Simon's Transform + * project, KonvaJS-Ext by Wappworks, which is based on Simon's Transform * class. Modified by Eric Rowell */ @@ -737,26 +737,26 @@ var Kinetic = {}; * Transform constructor * @constructor * @param {Array} [m] Optional six-element matrix - * @memberof Kinetic + * @memberof Konva */ - Kinetic.Transform = function(m) { + Konva.Transform = function(m) { this.m = (m && m.slice()) || [1, 0, 0, 1, 0, 0]; }; - Kinetic.Transform.prototype = { + Konva.Transform.prototype = { /** - * Copy Kinetic.Transform object + * Copy Konva.Transform object * @method - * @memberof Kinetic.Transform.prototype - * @returns {Kinetic.Transform} + * @memberof Konva.Transform.prototype + * @returns {Konva.Transform} */ copy: function() { - return new Kinetic.Transform(this.m); + return new Konva.Transform(this.m); }, /** * Transform point * @method - * @memberof Kinetic.Transform.prototype + * @memberof Konva.Transform.prototype * @param {Object} point 2D point(x, y) * @returns {Object} 2D point(x, y) */ @@ -770,10 +770,10 @@ var Kinetic = {}; /** * Apply translation * @method - * @memberof Kinetic.Transform.prototype + * @memberof Konva.Transform.prototype * @param {Number} x * @param {Number} y - * @returns {Kinetic.Transform} + * @returns {Konva.Transform} */ translate: function(x, y) { this.m[4] += this.m[0] * x + this.m[2] * y; @@ -783,10 +783,10 @@ var Kinetic = {}; /** * Apply scale * @method - * @memberof Kinetic.Transform.prototype + * @memberof Konva.Transform.prototype * @param {Number} sx * @param {Number} sy - * @returns {Kinetic.Transform} + * @returns {Konva.Transform} */ scale: function(sx, sy) { this.m[0] *= sx; @@ -798,9 +798,9 @@ var Kinetic = {}; /** * Apply rotation * @method - * @memberof Kinetic.Transform.prototype + * @memberof Konva.Transform.prototype * @param {Number} rad Angle in radians - * @returns {Kinetic.Transform} + * @returns {Konva.Transform} */ rotate: function(rad) { var c = Math.cos(rad); @@ -818,7 +818,7 @@ var Kinetic = {}; /** * Returns the translation * @method - * @memberof Kinetic.Transform.prototype + * @memberof Konva.Transform.prototype * @returns {Object} 2D point(x, y) */ getTranslation: function() { @@ -830,10 +830,10 @@ var Kinetic = {}; /** * Apply skew * @method - * @memberof Kinetic.Transform.prototype + * @memberof Konva.Transform.prototype * @param {Number} sx * @param {Number} sy - * @returns {Kinetic.Transform} + * @returns {Konva.Transform} */ skew: function(sx, sy) { var m11 = this.m[0] + this.m[2] * sy; @@ -849,9 +849,9 @@ var Kinetic = {}; /** * Transform multiplication * @method - * @memberof Kinetic.Transform.prototype - * @param {Kinetic.Transform} matrix - * @returns {Kinetic.Transform} + * @memberof Konva.Transform.prototype + * @param {Konva.Transform} matrix + * @returns {Konva.Transform} */ multiply: function(matrix) { var m11 = this.m[0] * matrix.m[0] + this.m[2] * matrix.m[1]; @@ -874,8 +874,8 @@ var Kinetic = {}; /** * Invert the matrix * @method - * @memberof Kinetic.Transform.prototype - * @returns {Kinetic.Transform} + * @memberof Konva.Transform.prototype + * @returns {Konva.Transform} */ invert: function() { var d = 1 / (this.m[0] * this.m[3] - this.m[1] * this.m[2]); @@ -896,7 +896,7 @@ var Kinetic = {}; /** * return matrix * @method - * @memberof Kinetic.Transform.prototype + * @memberof Konva.Transform.prototype */ getMatrix: function() { return this.m; @@ -904,8 +904,8 @@ var Kinetic = {}; /** * set to absolute position via translation * @method - * @memberof Kinetic.Transform.prototype - * @returns {Kinetic.Transform} + * @memberof Konva.Transform.prototype + * @returns {Konva.Transform} * @author ericdrowell */ setAbsolutePosition: function(x, y) { @@ -932,8 +932,8 @@ var Kinetic = {}; HASH = '#', EMPTY_STRING = '', ZERO = '0', - KINETIC_WARNING = 'Kinetic warning: ', - KINETIC_ERROR = 'Kinetic error: ', + KINETIC_WARNING = 'Konva warning: ', + KINETIC_ERROR = 'Konva error: ', RGB_PAREN = 'rgb(', COLORS = { aqua: [0,255,255], @@ -962,9 +962,9 @@ var Kinetic = {}; /** * @namespace Util - * @memberof Kinetic + * @memberof Konva */ - Kinetic.Util = { + Konva.Util = { /* * cherry-picked utilities from underscore.js */ @@ -1037,7 +1037,7 @@ var Kinetic = {}; return names.length > 0; }, createCanvasElement: function() { - var canvas = Kinetic.document.createElement('canvas'); + var canvas = Konva.document.createElement('canvas'); // on some environments canvas.style is readonly try { canvas.style = canvas.style || {}; @@ -1050,7 +1050,7 @@ var Kinetic = {}; }, _isInDocument: function(el) { while(el = el.parentNode) { - if(el == Kinetic.document) { + if(el == Konva.document) { return true; } } @@ -1059,7 +1059,7 @@ var Kinetic = {}; _simplifyArray: function(arr) { var retArr = [], len = arr.length, - util = Kinetic.Util, + util = Konva.Util, n, val; for (n=0; n= Kinetic.traceArrMax) { + if (len >= Konva.traceArrMax) { traceArr.shift(); } }, /** * reset canvas context transform * @method - * @memberof Kinetic.Context.prototype + * @memberof Konva.Context.prototype */ reset: function() { var pixelRatio = this.getCanvas().getPixelRatio(); @@ -1716,8 +1716,8 @@ var Kinetic = {}; /** * get canvas * @method - * @memberof Kinetic.Context.prototype - * @returns {Kinetic.Canvas} + * @memberof Konva.Context.prototype + * @returns {Konva.Canvas} */ getCanvas: function() { return this.canvas; @@ -1725,7 +1725,7 @@ var Kinetic = {}; /** * clear canvas * @method - * @memberof Kinetic.Context.prototype + * @memberof Konva.Context.prototype * @param {Object} [bounds] * @param {Number} [bounds.x] * @param {Number} [bounds.y] @@ -1907,7 +1907,7 @@ var Kinetic = {}; _enableTrace: function() { var that = this, len = CONTEXT_METHODS.length, - _simplifyArray = Kinetic.Util._simplifyArray, + _simplifyArray = Konva.Util._simplifyArray, origSetter = this.setAttr, n, args; @@ -1944,14 +1944,14 @@ var Kinetic = {}; } }; - Kinetic.SceneContext = function(canvas) { - Kinetic.Context.call(this, canvas); + Konva.SceneContext = function(canvas) { + Konva.Context.call(this, canvas); }; - Kinetic.SceneContext.prototype = { + Konva.SceneContext.prototype = { _fillColor: function(shape) { var fill = shape.fill() - || Kinetic.Util._getRGBAString({ + || Konva.Util._getRGBAString({ red: shape.fillRed(), green: shape.fillGreen(), blue: shape.fillBlue(), @@ -1966,7 +1966,7 @@ var Kinetic = {}; fillPatternX = shape.getFillPatternX(), fillPatternY = shape.getFillPatternY(), fillPatternScale = shape.getFillPatternScale(), - fillPatternRotation = Kinetic.getAngle(shape.getFillPatternRotation()), + fillPatternRotation = Konva.getAngle(shape.getFillPatternRotation()), fillPatternOffset = shape.getFillPatternOffset(), fillPatternRepeat = shape.getFillPatternRepeat(); @@ -2052,10 +2052,11 @@ var Kinetic = {}; }, _stroke: function(shape) { var dash = shape.dash(), - strokeScaleEnabled = shape.getStrokeScaleEnabled(); + // ignore strokeScaleEnabled for Text + strokeScaleEnabled = (shape.getStrokeScaleEnabled() || (shape instanceof Konva.Text)); if(shape.hasStroke()) { - if (!strokeScaleEnabled && !(shape instanceof Kinetic.Text)) { + if (!strokeScaleEnabled) { this.save(); this.setTransform(1, 0, 0, 1, 0, 0); } @@ -2067,7 +2068,7 @@ var Kinetic = {}; this.setAttr('lineWidth', shape.strokeWidth()); this.setAttr('strokeStyle', shape.stroke() - || Kinetic.Util._getRGBAString({ + || Konva.Util._getRGBAString({ red: shape.strokeRed(), green: shape.strokeGreen(), blue: shape.strokeBlue(), @@ -2082,7 +2083,7 @@ var Kinetic = {}; } }, _applyShadow: function(shape) { - var util = Kinetic.Util, + var util = Konva.Util, absOpacity = shape.getAbsoluteOpacity(), color = util.get(shape.getShadowColor(), 'black'), blur = util.get(shape.getShadowBlur(), 5), @@ -2103,13 +2104,13 @@ var Kinetic = {}; } }; - Kinetic.Util.extend(Kinetic.SceneContext, Kinetic.Context); + Konva.Util.extend(Konva.SceneContext, Konva.Context); - Kinetic.HitContext = function(canvas) { - Kinetic.Context.call(this, canvas); + Konva.HitContext = function(canvas) { + Konva.Context.call(this, canvas); }; - Kinetic.HitContext.prototype = { + Konva.HitContext.prototype = { _fill: function(shape) { this.save(); this.setAttr('fillStyle', shape.colorKey); @@ -2118,14 +2119,23 @@ var Kinetic = {}; }, _stroke: function(shape) { if(shape.hasStroke()) { + // ignore strokeScaleEnabled for Text + var strokeScaleEnabled = (shape.getStrokeScaleEnabled() || (shape instanceof Konva.Text)); + if (!strokeScaleEnabled) { + this.save(); + this.setTransform(1, 0, 0, 1, 0, 0); + } this._applyLineCap(shape); this.setAttr('lineWidth', shape.strokeWidth()); this.setAttr('strokeStyle', shape.colorKey); shape._strokeFuncHit(this); + if (!strokeScaleEnabled) { + this.restore(); + } } } }; - Kinetic.Util.extend(Kinetic.HitContext, Kinetic.Context); + Konva.Util.extend(Konva.HitContext, Konva.Context); })(); ;/*jshint unused:false */ (function() { @@ -2134,14 +2144,14 @@ var Kinetic = {}; RGB = 'RGB', SET = 'set'; - Kinetic.Factory = { + Konva.Factory = { addGetterSetter: function(constructor, attr, def, validator, after) { this.addGetter(constructor, attr, def); this.addSetter(constructor, attr, validator, after); this.addOverloadedGetterSetter(constructor, attr); }, addGetter: function(constructor, attr, def) { - var method = GET + Kinetic.Util._capitalize(attr); + var method = GET + Konva.Util._capitalize(attr); constructor.prototype[method] = function() { var val = this.attrs[attr]; @@ -2149,7 +2159,7 @@ var Kinetic = {}; }; }, addSetter: function(constructor, attr, validator, after) { - var method = SET + Kinetic.Util._capitalize(attr); + var method = SET + Konva.Util._capitalize(attr); constructor.prototype[method] = function(val) { if (validator) { @@ -2167,7 +2177,7 @@ var Kinetic = {}; }, addComponentsGetterSetter: function(constructor, attr, components, validator, after) { var len = components.length, - capitalize = Kinetic.Util._capitalize, + capitalize = Konva.Util._capitalize, getter = GET + capitalize(attr), setter = SET + capitalize(attr), n, component; @@ -2209,7 +2219,7 @@ var Kinetic = {}; this.addOverloadedGetterSetter(constructor, attr); }, addOverloadedGetterSetter: function(constructor, attr) { - var capitalizedAttr = Kinetic.Util._capitalize(attr), + var capitalizedAttr = Konva.Util._capitalize(attr), setter = SET + capitalizedAttr, getter = GET + capitalizedAttr; @@ -2237,7 +2247,7 @@ var Kinetic = {}; } }; - Kinetic.Validators = { + Konva.Validators = { /** * @return {number} */ @@ -2273,7 +2283,7 @@ var Kinetic = {}; EMPTY_STRING = '', GET = 'get', ID = 'id', - KINETIC = 'kinetic', + KINETIC = 'konva', LISTENING = 'listening', MOUSEENTER = 'mouseenter', MOUSELEAVE = 'mouseleave', @@ -2288,23 +2298,23 @@ var Kinetic = {}; CLONE_BLACK_LIST = ['id'], TRANSFORM_CHANGE_STR = [ - 'xChange.kinetic', - 'yChange.kinetic', - 'scaleXChange.kinetic', - 'scaleYChange.kinetic', - 'skewXChange.kinetic', - 'skewYChange.kinetic', - 'rotationChange.kinetic', - 'offsetXChange.kinetic', - 'offsetYChange.kinetic', - 'transformsEnabledChange.kinetic' + 'xChange.konva', + 'yChange.konva', + 'scaleXChange.konva', + 'scaleYChange.konva', + 'skewXChange.konva', + 'skewYChange.konva', + 'rotationChange.konva', + 'offsetXChange.konva', + 'offsetYChange.konva', + 'transformsEnabledChange.konva' ].join(SPACE); - Kinetic.Util.addMethods(Kinetic.Node, { + Konva.Util.addMethods(Konva.Node, { _init: function(config) { var that = this; - this._id = Kinetic.idCounter++; + this._id = Konva.idCounter++; this.eventListeners = {}; this.attrs = {}; this._cache = {}; @@ -2316,13 +2326,13 @@ var Kinetic = {}; this._clearCache(TRANSFORM); that._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM); }); - this.on('visibleChange.kinetic', function() { + this.on('visibleChange.konva', function() { that._clearSelfAndDescendantCache(VISIBLE); }); - this.on('listeningChange.kinetic', function() { + this.on('listeningChange.konva', function() { that._clearSelfAndDescendantCache(LISTENING); }); - this.on('opacityChange.kinetic', function() { + this.on('opacityChange.konva', function() { that._clearSelfAndDescendantCache(ABSOLUTE_OPACITY); }); }, @@ -2360,8 +2370,8 @@ var Kinetic = {}; /** * clear cached canvas * @method - * @memberof Kinetic.Node.prototype - * @returns {Kinetic.Node} + * @memberof Konva.Node.prototype + * @returns {Konva.Node} * @example * node.clearCache(); */ @@ -2374,7 +2384,7 @@ var Kinetic = {}; * cache node to improve drawing performance, apply filters, or create more accurate * hit regions * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Object} config * @param {Number} [config.x] * @param {Number} [config.y] @@ -2382,7 +2392,7 @@ var Kinetic = {}; * @param {Number} [config.height] * @param {Boolean} [config.drawBorder] when set to true, a red border will be drawn around the cached * region for debugging purposes - * @returns {Kinetic.Node} + * @returns {Konva.Node} * @example * // cache a shape with the x,y position of the bounding box at the center and * // the width and height of the bounding box equal to the width and height of @@ -2416,20 +2426,20 @@ var Kinetic = {}; drawBorder = conf.drawBorder || false; if (width === 0 || height === 0) { - Kinetic.Util.warn('Width or height of caching configuration equals 0. Cache is ignored.'); + Konva.Util.warn('Width or height of caching configuration equals 0. Cache is ignored.'); return; } - var cachedSceneCanvas = new Kinetic.SceneCanvas({ + var cachedSceneCanvas = new Konva.SceneCanvas({ pixelRatio: 1, width: width, height: height }), - cachedFilterCanvas = new Kinetic.SceneCanvas({ + cachedFilterCanvas = new Konva.SceneCanvas({ pixelRatio: 1, width: width, height: height }), - cachedHitCanvas = new Kinetic.HitCanvas({ + cachedHitCanvas = new Konva.HitCanvas({ width: width, height: height }), @@ -2511,7 +2521,7 @@ var Kinetic = {}; } } catch(e) { - Kinetic.Util.warn('Unable to apply filter. ' + e.message); + Konva.Util.warn('Unable to apply filter. ' + e.message); } this._filterUpToDate = true; @@ -2533,19 +2543,19 @@ var Kinetic = {}; context.restore(); }, /** - * bind events to the node. KineticJS supports mouseover, mousemove, + * bind events to the node. KonvaJS supports mouseover, mousemove, * mouseout, mouseenter, mouseleave, mousedown, mouseup, mousewheel, click, dblclick, touchstart, touchmove, - * touchend, tap, dbltap, dragstart, dragmove, and dragend events. The Kinetic Stage supports + * touchend, tap, dbltap, dragstart, dragmove, and dragend events. The Konva Stage supports * contentMouseover, contentMousemove, contentMouseout, contentMousedown, contentMouseup, * contentClick, contentDblclick, contentTouchstart, contentTouchmove, contentTouchend, contentTap, * and contentDblTap. Pass in a string of events delimmited by a space to bind multiple events at once * such as 'mousedown mouseup mousemove'. Include a namespace to bind an * event by name such as 'click.foobar'. * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {String} evtStr e.g. 'click', 'mousedown touchstart', 'mousedown.foo touchstart.foo' * @param {Function} handler The handler function is passed an event object - * @returns {Kinetic.Node} + * @returns {Konva.Node} * @example * // add click listener * node.on('click', function() { @@ -2625,9 +2635,9 @@ var Kinetic = {}; * such as 'click.foobar'. If you only give a name like '.foobar', * all events in that namespace will be removed. * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {String} evtStr e.g. 'click', 'mousedown touchstart', '.foobar' - * @returns {Kinetic.Node} + * @returns {Konva.Node} * @example * // remove listener * node.off('click'); @@ -2689,8 +2699,8 @@ var Kinetic = {}; /** * remove self from parent, but don't destroy * @method - * @memberof Kinetic.Node.prototype - * @returns {Kinetic.Node} + * @memberof Konva.Node.prototype + * @returns {Konva.Node} * @example * node.remove(); */ @@ -2716,29 +2726,29 @@ var Kinetic = {}; /** * remove and destroy self * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @example * node.destroy(); */ destroy: function() { // remove from ids and names hashes - Kinetic._removeId(this.getId()); - Kinetic._removeName(this.getName(), this._id); + Konva._removeId(this.getId()); + Konva._removeName(this.getName(), this._id); this.remove(); }, /** * get attr * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {String} attr * @returns {Integer|String|Object|Array} * @example * var x = node.getAttr('x'); */ getAttr: function(attr) { - var method = GET + Kinetic.Util._capitalize(attr); - if(Kinetic.Util._isFunction(this[method])) { + var method = GET + Konva.Util._capitalize(attr); + if(Konva.Util._isFunction(this[method])) { return this[method](); } // otherwise get directly @@ -2749,8 +2759,8 @@ var Kinetic = {}; /** * get ancestors * @method - * @memberof Kinetic.Node.prototype - * @returns {Kinetic.Collection} + * @memberof Konva.Node.prototype + * @returns {Konva.Collection} * @example * shape.getAncestors().each(function(node) { * console.log(node.getId()); @@ -2758,7 +2768,7 @@ var Kinetic = {}; */ getAncestors: function() { var parent = this.getParent(), - ancestors = new Kinetic.Collection(); + ancestors = new Konva.Collection(); while (parent) { ancestors.push(parent); @@ -2770,7 +2780,7 @@ var Kinetic = {}; /** * get attrs object literal * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {Object} */ getAttrs: function() { @@ -2779,9 +2789,9 @@ var Kinetic = {}; /** * set multiple attrs at once using an object literal * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Object} config object containing key value pairs - * @returns {Kinetic.Node} + * @returns {Konva.Node} * @example * node.setAttrs({ * x: 5, @@ -2793,13 +2803,13 @@ var Kinetic = {}; if(config) { for(key in config) { - if (key === CHILDREN || config[key] instanceof Kinetic.Node) { + if (key === CHILDREN || config[key] instanceof Konva.Node) { } else { - method = SET + Kinetic.Util._capitalize(key); + method = SET + Konva.Util._capitalize(key); // use setter if available - if(Kinetic.Util._isFunction(this[method])) { + if(Konva.Util._isFunction(this[method])) { this[method](config[key]); } // otherwise set directly @@ -2827,7 +2837,7 @@ var Kinetic = {}; * I | I | T * * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {Boolean} */ isListening: function() { @@ -2867,7 +2877,7 @@ var Kinetic = {}; * I | I | T * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {Boolean} */ isVisible: function() { @@ -2895,7 +2905,7 @@ var Kinetic = {}; * determine if listening is enabled by taking into account descendants. If self or any children * have _isListeningEnabled set to true, then self also has listening enabled. * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {Boolean} */ shouldDrawHit: function(canvas) { @@ -2906,8 +2916,8 @@ var Kinetic = {}; /** * show node * @method - * @memberof Kinetic.Node.prototype - * @returns {Kinetic.Node} + * @memberof Konva.Node.prototype + * @returns {Konva.Node} */ show: function() { this.setVisible(true); @@ -2916,8 +2926,8 @@ var Kinetic = {}; /** * hide node. Hidden nodes are no longer detectable * @method - * @memberof Kinetic.Node.prototype - * @returns {Kinetic.Node} + * @memberof Konva.Node.prototype + * @returns {Konva.Node} */ hide: function() { this.setVisible(false); @@ -2926,7 +2936,7 @@ var Kinetic = {}; /** * get zIndex relative to the node's siblings who share the same parent * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {Integer} */ getZIndex: function() { @@ -2936,7 +2946,7 @@ var Kinetic = {}; * get absolute z-index which takes into account sibling * and ancestor indices * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {Integer} */ getAbsoluteZIndex: function() { @@ -2976,7 +2986,7 @@ var Kinetic = {}; * e.g. Stage depth will always be 0. Layers will always be 1. Groups and Shapes will always * be >= 2 * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {Integer} */ getDepth: function() { @@ -3003,12 +3013,12 @@ var Kinetic = {}; /** * get absolute position relative to the top left corner of the stage container div * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {Object} */ getAbsolutePosition: function() { var absoluteMatrix = this.getAbsoluteTransform().getMatrix(), - absoluteTransform = new Kinetic.Transform(), + absoluteTransform = new Konva.Transform(), offset = this.offset(); // clone the matrix array @@ -3020,11 +3030,11 @@ var Kinetic = {}; /** * set absolute position * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Object} pos * @param {Number} pos.x * @param {Number} pos.y - * @returns {Kinetic.Node} + * @returns {Konva.Node} */ setAbsolutePosition: function(pos) { var origTrans = this._clearTransform(), @@ -3093,11 +3103,11 @@ var Kinetic = {}; /** * move node by an amount relative to its current position * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Object} change * @param {Number} change.x * @param {Number} change.y - * @returns {Kinetic.Node} + * @returns {Konva.Node} * @example * // move node in x direction by 1px and y direction by 2px * node.move({ @@ -3150,9 +3160,9 @@ var Kinetic = {}; /** * rotate node by an amount in degrees relative to its current rotation * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Number} theta - * @returns {Kinetic.Node} + * @returns {Konva.Node} */ rotate: function(theta) { this.setRotation(this.getRotation() + theta); @@ -3161,12 +3171,12 @@ var Kinetic = {}; /** * move node to the top of its siblings * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {Boolean} */ moveToTop: function() { if (!this.parent) { - Kinetic.Util.warn('Node has no parent. moveToTop function is ignored.'); + Konva.Util.warn('Node has no parent. moveToTop function is ignored.'); return; } var index = this.index; @@ -3178,12 +3188,12 @@ var Kinetic = {}; /** * move node up * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {Boolean} */ moveUp: function() { if (!this.parent) { - Kinetic.Util.warn('Node has no parent. moveUp function is ignored.'); + Konva.Util.warn('Node has no parent. moveUp function is ignored.'); return; } var index = this.index, @@ -3199,12 +3209,12 @@ var Kinetic = {}; /** * move node down * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {Boolean} */ moveDown: function() { if (!this.parent) { - Kinetic.Util.warn('Node has no parent. moveDown function is ignored.'); + Konva.Util.warn('Node has no parent. moveDown function is ignored.'); return; } var index = this.index; @@ -3219,12 +3229,12 @@ var Kinetic = {}; /** * move node to the bottom of its siblings * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {Boolean} */ moveToBottom: function() { if (!this.parent) { - Kinetic.Util.warn('Node has no parent. moveToBottom function is ignored.'); + Konva.Util.warn('Node has no parent. moveToBottom function is ignored.'); return; } var index = this.index; @@ -3239,13 +3249,13 @@ var Kinetic = {}; /** * set zIndex relative to siblings * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Integer} zIndex - * @returns {Kinetic.Node} + * @returns {Konva.Node} */ setZIndex: function(zIndex) { if (!this.parent) { - Kinetic.Util.warn('Node has no parent. zIndex parameter is ignored.'); + Konva.Util.warn('Node has no parent. zIndex parameter is ignored.'); return; } var index = this.index; @@ -3257,7 +3267,7 @@ var Kinetic = {}; /** * get absolute opacity * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {Number} */ getAbsoluteOpacity: function() { @@ -3273,9 +3283,9 @@ var Kinetic = {}; /** * move node to another container * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Container} newContainer - * @returns {Kinetic.Node} + * @returns {Konva.Node} * @example * // move node from current layer into layer2 * node.moveTo(layer2); @@ -3291,11 +3301,11 @@ var Kinetic = {}; /** * convert Node into an object for serialization. Returns an object. * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {Object} */ toObject: function() { - var type = Kinetic.Util, + var type = Konva.Util, obj = {}, attrs = this.getAttrs(), key, val, getter, defaultValue; @@ -3324,7 +3334,7 @@ var Kinetic = {}; /** * convert Node into a JSON string. Returns a JSON string. * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {String}} */ toJSON: function() { @@ -3333,8 +3343,8 @@ var Kinetic = {}; /** * get parent container * @method - * @memberof Kinetic.Node.prototype - * @returns {Kinetic.Node} + * @memberof Konva.Node.prototype + * @returns {Konva.Node} */ getParent: function() { return this.parent; @@ -3342,8 +3352,8 @@ var Kinetic = {}; /** * get layer ancestor * @method - * @memberof Kinetic.Node.prototype - * @returns {Kinetic.Layer} + * @memberof Konva.Node.prototype + * @returns {Konva.Layer} */ getLayer: function() { var parent = this.getParent(); @@ -3352,8 +3362,8 @@ var Kinetic = {}; /** * get stage ancestor * @method - * @memberof Kinetic.Node.prototype - * @returns {Kinetic.Stage} + * @memberof Konva.Node.prototype + * @returns {Konva.Stage} */ getStage: function() { return this._getCache(STAGE, this._getStage); @@ -3370,12 +3380,12 @@ var Kinetic = {}; /** * fire event * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {String} eventType event type. can be a regular event, like click, mouseover, or mouseout, or it can be a custom event, like myCustomEvent * @param {Event} [evt] event object * @param {Boolean} [bubble] setting the value to false, or leaving it undefined, will result in the event * not bubbling. Setting the value to true will result in the event bubbling. - * @returns {Kinetic.Node} + * @returns {Konva.Node} * @example * // manually fire click event * node.fire('click'); @@ -3406,8 +3416,8 @@ var Kinetic = {}; * get absolute transform of the node which takes into * account its ancestor transforms * @method - * @memberof Kinetic.Node.prototype - * @returns {Kinetic.Transform} + * @memberof Konva.Node.prototype + * @returns {Konva.Transform} */ getAbsoluteTransform: function(top) { // if using an argument, we can't cache the result. @@ -3420,7 +3430,7 @@ var Kinetic = {}; } }, _getAbsoluteTransform: function(top) { - var at = new Kinetic.Transform(), + var at = new Konva.Transform(), transformsEnabled, trans; // start with stage and traverse downwards to self @@ -3440,17 +3450,17 @@ var Kinetic = {}; /** * get transform of the node * @method - * @memberof Kinetic.Node.prototype - * @returns {Kinetic.Transform} + * @memberof Konva.Node.prototype + * @returns {Konva.Transform} */ getTransform: function() { return this._getCache(TRANSFORM, this._getTransform); }, _getTransform: function() { - var m = new Kinetic.Transform(), + var m = new Konva.Transform(), x = this.getX(), y = this.getY(), - rotation = Kinetic.getAngle(this.getRotation()), + rotation = Konva.getAngle(this.getRotation()), scaleX = this.getScaleX(), scaleY = this.getScaleY(), skewX = this.getSkewX(), @@ -3481,9 +3491,9 @@ var Kinetic = {}; * the node properties with an object literal, enabling you to use an existing node as a template * for another node * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Object} obj override attrs - * @returns {Kinetic.Node} + * @returns {Konva.Node} * @example * // simple clone * var clone = node.clone(); @@ -3496,7 +3506,7 @@ var Kinetic = {}; clone: function(obj) { // instantiate new node var className = this.getClassName(), - attrs = Kinetic.Util.cloneObject(this.attrs), + attrs = Konva.Util.cloneObject(this.attrs), key, allListeners, len, n, listener; // filter black attrs for (var i in CLONE_BLACK_LIST) { @@ -3508,7 +3518,7 @@ var Kinetic = {}; attrs[key] = obj[key]; } - var node = new Kinetic[className](attrs); + var node = new Konva[className](attrs); // copy over listeners for(key in this.eventListeners) { allListeners = this.eventListeners[key]; @@ -3516,7 +3526,7 @@ var Kinetic = {}; for(n = 0; n < len; n++) { listener = allListeners[n]; /* - * don't include kinetic namespaced listeners because + * don't include konva namespaced listeners because * these are generated by the constructors */ if(listener.name.indexOf(KINETIC) < 0) { @@ -3535,7 +3545,7 @@ var Kinetic = {}; * specified, then "image/png" will result. For "image/jpeg", specify a quality * level as quality (range 0.0 - 1.0) * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Object} config * @param {String} [config.mimeType] can be "image/png" or "image/jpeg". * "image/png" is the default @@ -3556,7 +3566,7 @@ var Kinetic = {}; stage = this.getStage(), x = config.x || 0, y = config.y || 0, - canvas = new Kinetic.SceneCanvas({ + canvas = new Konva.SceneCanvas({ width: config.width || this.getWidth() || (stage ? stage.getWidth() : 0), height: config.height || this.getHeight() || (stage ? stage.getHeight() : 0), pixelRatio: 1 @@ -3579,7 +3589,7 @@ var Kinetic = {}; * method is asynchronous, a callback is required. toImage is most commonly used * to cache complex drawings as an image so that they don't have to constantly be redrawn * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Object} config * @param {Function} config.callback function executed when the composite has completed * @param {String} [config.mimeType] can be "image/png" or "image/jpeg". @@ -3599,7 +3609,7 @@ var Kinetic = {}; * }); */ toImage: function(config) { - Kinetic.Util._getImage(this.toDataURL(config), function(img) { + Konva.Util._getImage(this.toDataURL(config), function(img) { config.callback(img); }); }, @@ -3623,7 +3633,7 @@ var Kinetic = {}; /** * get class name, which may return Stage, Layer, Group, or shape class names like Rect, Circle, Text, etc. * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {String} */ getClassName: function() { @@ -3632,7 +3642,7 @@ var Kinetic = {}; /** * get the node type, which may return Stage, Layer, Group, or Node * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {String} */ getType: function() { @@ -3645,7 +3655,7 @@ var Kinetic = {}; } else if (this.parent) { return this.parent.getDragDistance(); } else { - return Kinetic.dragDistance; + return Konva.dragDistance; } }, _get: function(selector) { @@ -3658,10 +3668,10 @@ var Kinetic = {}; for(i = 0; i < evtListeners.length; i++) { evtName = evtListeners[i].name; // the following two conditions must be true in order to remove a handler: - // 1) the current event name cannot be kinetic unless the event name is kinetic - // this enables developers to force remove a kinetic specific listener for whatever reason + // 1) the current event name cannot be konva unless the event name is konva + // this enables developers to force remove a konva specific listener for whatever reason // 2) an event name is not specified, or if one is specified, it matches the current event name - if((evtName !== 'kinetic' || name === 'kinetic') && (!name || evtName === name)) { + if((evtName !== 'konva' || name === 'konva') && (!name || evtName === name)) { evtListeners.splice(i, 1); if(evtListeners.length === 0) { delete this.eventListeners[type]; @@ -3680,34 +3690,34 @@ var Kinetic = {}; setId: function(id) { var oldId = this.getId(); - Kinetic._removeId(oldId); - Kinetic._addId(this, id); + Konva._removeId(oldId); + Konva._addId(this, id); this._setAttr(ID, id); return this; }, setName: function(name) { var oldName = this.getName(); - Kinetic._removeName(oldName, this._id); - Kinetic._addName(this, name); + Konva._removeName(oldName, this._id); + Konva._addName(this, name); this._setAttr(NAME, name); return this; }, /** * set attr * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {String} attr * @param {*} val - * @returns {Kinetic.Node} + * @returns {Konva.Node} * @example * node.setAttr('x', 5); */ setAttr: function(attr, val) { - var method = SET + Kinetic.Util._capitalize(attr), + var method = SET + Konva.Util._capitalize(attr), func = this[method]; - if(Kinetic.Util._isFunction(func)) { + if(Konva.Util._isFunction(func)) { func.call(this, val); } // otherwise set directly @@ -3781,8 +3791,8 @@ var Kinetic = {}; /** * draw both scene and hit graphs. If the node being drawn is the stage, all of the layers will be cleared and redrawn * @method - * @memberof Kinetic.Node.prototype - * @returns {Kinetic.Node} + * @memberof Konva.Node.prototype + * @returns {Konva.Node} */ draw: function() { this.drawScene(); @@ -3799,16 +3809,16 @@ var Kinetic = {}; * shapes after loading the stage and set these properties via on(), setDrawFunc(), * and setImage() methods * @method - * @memberof Kinetic.Node + * @memberof Konva.Node * @param {String} json * @param {Element} [container] optional container dom element used only if you're * creating a stage node */ - Kinetic.Node.create = function(json, container) { + Konva.Node.create = function(json, container) { return this._createNode(JSON.parse(json), container); }; - Kinetic.Node._createNode = function(obj, container) { - var className = Kinetic.Node.prototype.getClassName.call(obj), + Konva.Node._createNode = function(obj, container) { + var className = Konva.Node.prototype.getClassName.call(obj), children = obj.children, no, len, n; @@ -3817,7 +3827,7 @@ var Kinetic = {}; obj.attrs.container = container; } - no = new Kinetic[className](obj.attrs); + no = new Konva[className](obj.attrs); if(children) { len = children.length; for(n = 0; n < len; n++) { @@ -3831,12 +3841,12 @@ var Kinetic = {}; // =========================== add getters setters =========================== - Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node, 'position'); + Konva.Factory.addOverloadedGetterSetter(Konva.Node, 'position'); /** * get/set node position relative to parent * @name position * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Object} pos * @param {Number} pos.x * @param {Number} pos.y @@ -3852,13 +3862,13 @@ var Kinetic = {}; * }); */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'x', 0); + Konva.Factory.addGetterSetter(Konva.Node, 'x', 0); /** * get/set x position * @name x * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Number} x * @returns {Object} * @example @@ -3869,13 +3879,13 @@ var Kinetic = {}; * node.x(5); */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'y', 0); + Konva.Factory.addGetterSetter(Konva.Node, 'y', 0); /** * get/set y position * @name y * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Number} y * @returns {Integer} * @example @@ -3886,7 +3896,7 @@ var Kinetic = {}; * node.y(5); */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'opacity', 1); + Konva.Factory.addGetterSetter(Konva.Node, 'opacity', 1); /** * get/set opacity. Opacity values range from 0 to 1. @@ -3894,7 +3904,7 @@ var Kinetic = {}; * with an opacity of 1 is fully opaque * @name opacity * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Object} opacity * @returns {Number} * @example @@ -3905,14 +3915,14 @@ var Kinetic = {}; * node.opacity(0.5); */ - Kinetic.Factory.addGetter(Kinetic.Node, 'name'); - Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node, 'name'); + Konva.Factory.addGetter(Konva.Node, 'name'); + Konva.Factory.addOverloadedGetterSetter(Konva.Node, 'name'); /** * get/set name * @name name * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {String} name * @returns {String} * @example @@ -3926,14 +3936,14 @@ var Kinetic = {}; * node.name('foo bar'); */ - Kinetic.Factory.addGetter(Kinetic.Node, 'id'); - Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node, 'id'); + Konva.Factory.addGetter(Konva.Node, 'id'); + Konva.Factory.addOverloadedGetterSetter(Konva.Node, 'id'); /** * get/set id * @name id * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {String} id * @returns {String} * @example @@ -3944,13 +3954,13 @@ var Kinetic = {}; * node.id('foo'); */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'rotation', 0); + Konva.Factory.addGetterSetter(Konva.Node, 'rotation', 0); /** * get/set rotation in degrees * @name rotation * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Number} rotation * @returns {Number} * @example @@ -3961,7 +3971,7 @@ var Kinetic = {}; * node.rotation(45); */ - Kinetic.Factory.addComponentsGetterSetter(Kinetic.Node, 'scale', ['x', 'y']); + Konva.Factory.addComponentsGetterSetter(Konva.Node, 'scale', ['x', 'y']); /** * get/set scale @@ -3970,7 +3980,7 @@ var Kinetic = {}; * @param {Number} scale.x * @param {Number} scale.y * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {Object} * @example * // get scale @@ -3983,14 +3993,14 @@ var Kinetic = {}; * }); */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'scaleX', 1); + Konva.Factory.addGetterSetter(Konva.Node, 'scaleX', 1); /** * get/set scale x * @name scaleX * @param {Number} x * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {Number} * @example * // get scale x @@ -4000,14 +4010,14 @@ var Kinetic = {}; * node.scaleX(2); */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'scaleY', 1); + Konva.Factory.addGetterSetter(Konva.Node, 'scaleY', 1); /** * get/set scale y * @name scaleY * @param {Number} y * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {Number} * @example * // get scale y @@ -4017,7 +4027,7 @@ var Kinetic = {}; * node.scaleY(2); */ - Kinetic.Factory.addComponentsGetterSetter(Kinetic.Node, 'skew', ['x', 'y']); + Konva.Factory.addComponentsGetterSetter(Konva.Node, 'skew', ['x', 'y']); /** * get/set skew @@ -4026,7 +4036,7 @@ var Kinetic = {}; * @param {Number} skew.x * @param {Number} skew.y * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {Object} * @example * // get skew @@ -4039,14 +4049,14 @@ var Kinetic = {}; * }); */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'skewX', 0); + Konva.Factory.addGetterSetter(Konva.Node, 'skewX', 0); /** * get/set skew x * @name skewX * @param {Number} x * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {Number} * @example * // get skew x @@ -4056,14 +4066,14 @@ var Kinetic = {}; * node.skewX(3); */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'skewY', 0); + Konva.Factory.addGetterSetter(Konva.Node, 'skewY', 0); /** * get/set skew y * @name skewY * @param {Number} y * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {Number} * @example * // get skew y @@ -4073,12 +4083,12 @@ var Kinetic = {}; * node.skewY(3); */ - Kinetic.Factory.addComponentsGetterSetter(Kinetic.Node, 'offset', ['x', 'y']); + Konva.Factory.addComponentsGetterSetter(Konva.Node, 'offset', ['x', 'y']); /** * get/set offset. Offsets the default position and rotation point * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Object} offset * @param {Number} offset.x * @param {Number} offset.y @@ -4094,13 +4104,13 @@ var Kinetic = {}; * }); */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'offsetX', 0); + Konva.Factory.addGetterSetter(Konva.Node, 'offsetX', 0); /** * get/set offset x * @name offsetX * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Number} x * @returns {Number} * @example @@ -4111,13 +4121,13 @@ var Kinetic = {}; * node.offsetX(3); */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'offsetY', 0); + Konva.Factory.addGetterSetter(Konva.Node, 'offsetY', 0); /** * get/set offset y * @name offsetY * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Number} y * @returns {Number} * @example @@ -4128,14 +4138,14 @@ var Kinetic = {}; * node.offsetY(3); */ - Kinetic.Factory.addSetter(Kinetic.Node, 'dragDistance'); - Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node, 'dragDistance'); + Konva.Factory.addSetter(Konva.Node, 'dragDistance'); + Konva.Factory.addOverloadedGetterSetter(Konva.Node, 'dragDistance'); /** * get/set drag distance * @name dragDistance * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Number} distance * @returns {Number} * @example @@ -4146,17 +4156,17 @@ var Kinetic = {}; * // node starts dragging only if pointer moved more then 3 pixels * node.dragDistance(3); * // or set globally - * Kinetic.dragDistance = 3; + * Konva.dragDistance = 3; */ - Kinetic.Factory.addSetter(Kinetic.Node, 'width', 0); - Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node, 'width'); + Konva.Factory.addSetter(Konva.Node, 'width', 0); + Konva.Factory.addOverloadedGetterSetter(Konva.Node, 'width'); /** * get/set width * @name width * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Number} width * @returns {Number} * @example @@ -4167,13 +4177,13 @@ var Kinetic = {}; * node.width(100); */ - Kinetic.Factory.addSetter(Kinetic.Node, 'height', 0); - Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node, 'height'); + Konva.Factory.addSetter(Konva.Node, 'height', 0); + Konva.Factory.addOverloadedGetterSetter(Konva.Node, 'height'); /** * get/set height * @name height * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Number} height * @returns {Number} * @example @@ -4184,13 +4194,13 @@ var Kinetic = {}; * node.height(100); */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'listening', 'inherit'); + Konva.Factory.addGetterSetter(Konva.Node, 'listening', 'inherit'); /** * get/set listenig attr. If you need to determine if a node is listening or not * by taking into account its parents, use the isListening() method * @name listening * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Boolean|String} listening Can be "inherit", true, or false. The default is "inherit". * @returns {Boolean|String} * @example @@ -4207,12 +4217,12 @@ var Kinetic = {}; * node.listening('inherit'); */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'filters', undefined, function(val) {this._filterUpToDate = false;return val;}); + Konva.Factory.addGetterSetter(Konva.Node, 'filters', undefined, function(val) {this._filterUpToDate = false;return val;}); /** * get/set filters. Filters are applied to cached canvases * @name filters * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Array} filters array of filters * @returns {Array} * @example @@ -4221,25 +4231,25 @@ var Kinetic = {}; * * // set a single filter * node.cache(); - * node.filters([Kinetic.Filters.Blur]); + * node.filters([Konva.Filters.Blur]); * * // set multiple filters * node.cache(); * node.filters([ - * Kinetic.Filters.Blur, - * Kinetic.Filters.Sepia, - * Kinetic.Filters.Invert + * Konva.Filters.Blur, + * Konva.Filters.Sepia, + * Konva.Filters.Invert * ]); */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'visible', 'inherit'); + Konva.Factory.addGetterSetter(Konva.Node, 'visible', 'inherit'); /** * get/set visible attr. Can be "inherit", true, or false. The default is "inherit". * If you need to determine if a node is visible or not * by taking into account its parents, use the isVisible() method * @name visible * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Boolean|String} visible * @returns {Boolean|String} * @example @@ -4256,14 +4266,14 @@ var Kinetic = {}; * node.visible('inherit'); */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'transformsEnabled', 'all'); + Konva.Factory.addGetterSetter(Konva.Node, 'transformsEnabled', 'all'); /** * get/set transforms that are enabled. Can be "all", "none", or "position". The default * is "all" * @name transformsEnabled * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {String} enabled * @returns {String} * @example @@ -4280,7 +4290,7 @@ var Kinetic = {}; * get/set node size * @name size * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Object} size * @param {Number} size.width * @param {Number} size.height @@ -4297,54 +4307,54 @@ var Kinetic = {}; * height: 200 * }); */ - Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node, 'size'); + Konva.Factory.addOverloadedGetterSetter(Konva.Node, 'size'); - Kinetic.Factory.backCompat(Kinetic.Node, { + Konva.Factory.backCompat(Konva.Node, { rotateDeg: 'rotate', setRotationDeg: 'setRotation', getRotationDeg: 'getRotation' }); - Kinetic.Collection.mapMethods(Kinetic.Node); + Konva.Collection.mapMethods(Konva.Node); +})(); +;(function() { + /** + * Grayscale Filter + * @function + * @memberof Konva.Filters + * @param {Object} imageData + * @example + * node.cache(); + * node.filters([Konva.Filters.Grayscale]); + */ + Konva.Filters.Grayscale = function(imageData) { + var data = imageData.data, + len = data.length, + i, brightness; + + for(i = 0; i < len; i += 4) { + brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2]; + // red + data[i] = brightness; + // green + data[i + 1] = brightness; + // blue + data[i + 2] = brightness; + } + }; })(); -;(function() { - /** - * Grayscale Filter - * @function - * @memberof Kinetic.Filters - * @param {Object} imageData - * @example - * node.cache(); - * node.filters([Kinetic.Filters.Grayscale]); - */ - Kinetic.Filters.Grayscale = function(imageData) { - var data = imageData.data, - len = data.length, - i, brightness; - - for(i = 0; i < len; i += 4) { - brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2]; - // red - data[i] = brightness; - // green - data[i + 1] = brightness; - // blue - data[i + 2] = brightness; - } - }; -})(); ;(function() { /** * Brighten Filter. * @function - * @memberof Kinetic.Filters + * @memberof Konva.Filters * @param {Object} imageData * @example * node.cache(); - * node.filters([Kinetic.Filters.Brighten]); + * node.filters([Konva.Filters.Brighten]); * node.brightness(0.8); */ - Kinetic.Filters.Brighten = function(imageData) { + Konva.Filters.Brighten = function(imageData) { var brightness = this.brightness() * 255, data = imageData.data, len = data.length, @@ -4360,45 +4370,45 @@ var Kinetic = {}; } }; - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'brightness', 0, null, Kinetic.Factory.afterSetFilter); + Konva.Factory.addGetterSetter(Konva.Node, 'brightness', 0, null, Konva.Factory.afterSetFilter); /** * get/set filter brightness. The brightness is a number between -1 and 1.  Positive values - * brighten the pixels and negative values darken them. Use with {@link Kinetic.Filters.Brighten} filter. + * brighten the pixels and negative values darken them. Use with {@link Konva.Filters.Brighten} filter. * @name brightness * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Number} brightness value between -1 and 1 * @returns {Number} */ })(); -;(function() { - /** - * Invert Filter - * @function - * @memberof Kinetic.Filters - * @param {Object} imageData - * @example - * node.cache(); - * node.filters([Kinetic.Filters.Invert]); - */ - Kinetic.Filters.Invert = function(imageData) { - var data = imageData.data, - len = data.length, - i; - - for(i = 0; i < len; i += 4) { - // red - data[i] = 255 - data[i]; - // green - data[i + 1] = 255 - data[i + 1]; - // blue - data[i + 2] = 255 - data[i + 2]; - } - }; +;(function() { + /** + * Invert Filter + * @function + * @memberof Konva.Filters + * @param {Object} imageData + * @example + * node.cache(); + * node.filters([Konva.Filters.Invert]); + */ + Konva.Filters.Invert = function(imageData) { + var data = imageData.data, + len = data.length, + i; + + for(i = 0; i < len; i += 4) { + // red + data[i] = 255 - data[i]; + // green + data[i + 1] = 255 - data[i + 1]; + // blue + data[i + 2] = 255 - data[i + 2]; + } + }; })();;/* the Gauss filter - master repo: https://github.com/pavelpower/kineticjsGaussFilter/ + master repo: https://github.com/pavelpower/konvajsGaussFilter/ */ (function() { /* @@ -4729,14 +4739,14 @@ var Kinetic = {}; * Blur Filter * @function * @name Blur - * @memberof Kinetic.Filters + * @memberof Konva.Filters * @param {Object} imageData * @example * node.cache(); - * node.filters([Kinetic.Filters.Blur]); + * node.filters([Konva.Filters.Blur]); * node.blurRadius(10); */ - Kinetic.Filters.Blur = function Blur(imageData) { + Konva.Filters.Blur = function Blur(imageData) { var radius = Math.round(this.blurRadius()); if (radius > 0) { @@ -4744,13 +4754,13 @@ var Kinetic = {}; } }; - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'blurRadius', 0, null, Kinetic.Factory.afterSetFilter); + Konva.Factory.addGetterSetter(Konva.Node, 'blurRadius', 0, null, Konva.Factory.afterSetFilter); /** - * get/set blur radius. Use with {@link Kinetic.Filters.Blur} filter + * get/set blur radius. Use with {@link Konva.Filters.Blur} filter * @name blurRadius * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Integer} radius * @returns {Integer} */ @@ -4919,14 +4929,14 @@ var Kinetic = {}; * Mask Filter * @function * @name Mask - * @memberof Kinetic.Filters + * @memberof Konva.Filters * @param {Object} imageData * @example * node.cache(); - * node.filters([Kinetic.Filters.Mask]); + * node.filters([Konva.Filters.Mask]); * node.threshold(0.1); */ - Kinetic.Filters.Mask = function(imageData) { + Konva.Filters.Mask = function(imageData) { // Detect pixels close to the background color var threshold = this.threshold(), mask = backgroundMask(imageData, threshold); @@ -4949,23 +4959,23 @@ var Kinetic = {}; return imageData; }; - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'threshold', 0, null, Kinetic.Factory.afterSetFilter); + Konva.Factory.addGetterSetter(Konva.Node, 'threshold', 0, null, Konva.Factory.afterSetFilter); })(); ;(function () { /** * RGB Filter * @function * @name RGB - * @memberof Kinetic.Filters + * @memberof Konva.Filters * @param {Object} imageData * @author ippo615 * @example * node.cache(); - * node.filters([Kinetic.Filters.RGB]); + * node.filters([Konva.Filters.RGB]); * node.blue(120); * node.green(200); */ - Kinetic.Filters.RGB = function (imageData) { + Konva.Filters.RGB = function (imageData) { var data = imageData.data, nPixels = data.length, red = this.red(), @@ -4982,7 +4992,7 @@ var Kinetic = {}; } }; - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'red', 0, function(val) { + Konva.Factory.addGetterSetter(Konva.Node, 'red', 0, function(val) { this._filterUpToDate = false; if (val > 255) { return 255; @@ -4995,15 +5005,15 @@ var Kinetic = {}; } }); /** - * get/set filter red value. Use with {@link Kinetic.Filters.RGB} filter. + * get/set filter red value. Use with {@link Konva.Filters.RGB} filter. * @name red * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Integer} red value between 0 and 255 * @returns {Integer} */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'green', 0, function(val) { + Konva.Factory.addGetterSetter(Konva.Node, 'green', 0, function(val) { this._filterUpToDate = false; if (val > 255) { return 255; @@ -5016,20 +5026,20 @@ var Kinetic = {}; } }); /** - * get/set filter green value. Use with {@link Kinetic.Filters.RGB} filter. + * get/set filter green value. Use with {@link Konva.Filters.RGB} filter. * @name green * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Integer} green value between 0 and 255 * @returns {Integer} */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'blue', 0, Kinetic.Validators.RGBComponent, Kinetic.Factory.afterSetFilter); + Konva.Factory.addGetterSetter(Konva.Node, 'blue', 0, Konva.Validators.RGBComponent, Konva.Factory.afterSetFilter); /** - * get/set filter blue value. Use with {@link Kinetic.Filters.RGB} filter. + * get/set filter blue value. Use with {@link Konva.Filters.RGB} filter. * @name blue * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Integer} blue value between 0 and 255 * @returns {Integer} */ @@ -5040,15 +5050,15 @@ var Kinetic = {}; * HSV Filter. Adjusts the hue, saturation and value * @function * @name HSV - * @memberof Kinetic.Filters + * @memberof Konva.Filters * @param {Object} imageData * @author ippo615 * @example - * image.filters([Kinetic.Filters.HSV]); + * image.filters([Konva.Filters.HSV]); * image.value(200); */ - Kinetic.Filters.HSV = function (imageData) { + Konva.Filters.HSV = function (imageData) { var data = imageData.data, nPixels = data.length, v = Math.pow(2,this.value()), @@ -5097,32 +5107,32 @@ var Kinetic = {}; }; - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'hue', 0, null, Kinetic.Factory.afterSetFilter); + Konva.Factory.addGetterSetter(Konva.Node, 'hue', 0, null, Konva.Factory.afterSetFilter); /** - * get/set hsv hue in degrees. Use with {@link Kinetic.Filters.HSV} or {@link Kinetic.Filters.HSL} filter. + * get/set hsv hue in degrees. Use with {@link Konva.Filters.HSV} or {@link Konva.Filters.HSL} filter. * @name hue * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Number} hue value between 0 and 359 * @returns {Number} */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'saturation', 0, null, Kinetic.Factory.afterSetFilter); + Konva.Factory.addGetterSetter(Konva.Node, 'saturation', 0, null, Konva.Factory.afterSetFilter); /** - * get/set hsv saturation. Use with {@link Kinetic.Filters.HSV} or {@link Kinetic.Filters.HSL} filter. + * get/set hsv saturation. Use with {@link Konva.Filters.HSV} or {@link Konva.Filters.HSL} filter. * @name saturation * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Number} saturation 0 is no change, -1.0 halves the saturation, 1.0 doubles, etc.. * @returns {Number} */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'value', 0, null, Kinetic.Factory.afterSetFilter); + Konva.Factory.addGetterSetter(Konva.Node, 'value', 0, null, Konva.Factory.afterSetFilter); /** - * get/set hsv value. Use with {@link Kinetic.Filters.HSV} filter. + * get/set hsv value. Use with {@link Konva.Filters.HSV} filter. * @name value * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Number} value 0 is no change, -1.0 halves the value, 1.0 doubles, etc.. * @returns {Number} */ @@ -5130,32 +5140,32 @@ var Kinetic = {}; })(); ;(function () { - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'hue', 0, null, Kinetic.Factory.afterSetFilter); + Konva.Factory.addGetterSetter(Konva.Node, 'hue', 0, null, Konva.Factory.afterSetFilter); /** - * get/set hsv hue in degrees. Use with {@link Kinetic.Filters.HSV} or {@link Kinetic.Filters.HSL} filter. + * get/set hsv hue in degrees. Use with {@link Konva.Filters.HSV} or {@link Konva.Filters.HSL} filter. * @name hue * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Number} hue value between 0 and 359 * @returns {Number} */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'saturation', 0, null, Kinetic.Factory.afterSetFilter); + Konva.Factory.addGetterSetter(Konva.Node, 'saturation', 0, null, Konva.Factory.afterSetFilter); /** - * get/set hsv saturation. Use with {@link Kinetic.Filters.HSV} or {@link Kinetic.Filters.HSL} filter. + * get/set hsv saturation. Use with {@link Konva.Filters.HSV} or {@link Konva.Filters.HSL} filter. * @name saturation * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Number} saturation 0 is no change, -1.0 halves the saturation, 1.0 doubles, etc.. * @returns {Number} */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'luminance', 0, null, Kinetic.Factory.afterSetFilter); + Konva.Factory.addGetterSetter(Konva.Node, 'luminance', 0, null, Konva.Factory.afterSetFilter); /** - * get/set hsl luminance. Use with {@link Kinetic.Filters.HSL} filter. + * get/set hsl luminance. Use with {@link Konva.Filters.HSL} filter. * @name value * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Number} value 0 is no change, -1.0 halves the value, 1.0 doubles, etc.. * @returns {Number} */ @@ -5163,15 +5173,15 @@ var Kinetic = {}; /** * HSL Filter. Adjusts the hue, saturation and luminance (or lightness) * @function - * @memberof Kinetic.Filters + * @memberof Konva.Filters * @param {Object} imageData * @author ippo615 * @example - * image.filters([Kinetic.Filters.HSL]); + * image.filters([Konva.Filters.HSL]); * image.luminance(200); */ - Kinetic.Filters.HSL = function (imageData) { + Konva.Filters.HSL = function (imageData) { var data = imageData.data, nPixels = data.length, v = 1, @@ -5227,17 +5237,17 @@ var Kinetic = {}; * Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk, http://blog.nihilogic.dk/ * License: [http://www.pixastic.com/lib/license.txt] * @function - * @memberof Kinetic.Filters + * @memberof Konva.Filters * @param {Object} imageData * @example * node.cache(); - * node.filters([Kinetic.Filters.Emboss]); + * node.filters([Konva.Filters.Emboss]); * node.embossStrength(0.8); * node.embossWhiteLevel(0.3); * node.embossDirection('right'); * node.embossBlend(true); */ - Kinetic.Filters.Emboss = function (imageData) { + Konva.Filters.Emboss = function (imageData) { // pixastic strength is between 0 and 10. I want it between 0 and 1 // pixastic greyLevel is between 0 and 255. I want it between 0 and 1. Also, @@ -5359,43 +5369,43 @@ var Kinetic = {}; } while (--y); }; - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'embossStrength', 0.5, null, Kinetic.Factory.afterSetFilter); + Konva.Factory.addGetterSetter(Konva.Node, 'embossStrength', 0.5, null, Konva.Factory.afterSetFilter); /** - * get/set emboss strength. Use with {@link Kinetic.Filters.Emboss} filter. + * get/set emboss strength. Use with {@link Konva.Filters.Emboss} filter. * @name embossStrength * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Number} level between 0 and 1. Default is 0.5 * @returns {Number} */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'embossWhiteLevel', 0.5, null, Kinetic.Factory.afterSetFilter); + Konva.Factory.addGetterSetter(Konva.Node, 'embossWhiteLevel', 0.5, null, Konva.Factory.afterSetFilter); /** - * get/set emboss white level. Use with {@link Kinetic.Filters.Emboss} filter. + * get/set emboss white level. Use with {@link Konva.Filters.Emboss} filter. * @name embossWhiteLevel * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Number} embossWhiteLevel between 0 and 1. Default is 0.5 * @returns {Number} */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'embossDirection', 'top-left', null, Kinetic.Factory.afterSetFilter); + Konva.Factory.addGetterSetter(Konva.Node, 'embossDirection', 'top-left', null, Konva.Factory.afterSetFilter); /** - * get/set emboss direction. Use with {@link Kinetic.Filters.Emboss} filter. + * get/set emboss direction. Use with {@link Konva.Filters.Emboss} filter. * @name embossDirection * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {String} embossDirection can be top-left, top, top-right, right, bottom-right, bottom, bottom-left or left * The default is top-left * @returns {String} */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'embossBlend', false, null, Kinetic.Factory.afterSetFilter); + Konva.Factory.addGetterSetter(Konva.Node, 'embossBlend', false, null, Konva.Factory.afterSetFilter); /** - * get/set emboss blend. Use with {@link Kinetic.Filters.Emboss} filter. + * get/set emboss blend. Use with {@link Konva.Filters.Emboss} filter. * @name embossBlend * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Boolean} embossBlend * @returns {Boolean} */ @@ -5431,15 +5441,15 @@ var Kinetic = {}; * writes. * @function * @name Enhance - * @memberof Kinetic.Filters + * @memberof Konva.Filters * @param {Object} imageData * @author ippo615 * @example * node.cache(); - * node.filters([Kinetic.Filters.Enhance]); + * node.filters([Konva.Filters.Enhance]); * node.enhance(0.4); */ - Kinetic.Filters.Enhance = function (imageData) { + Konva.Filters.Enhance = function (imageData) { var data = imageData.data, nSubPixels = data.length, rMin = data[0], rMax = rMin, r, @@ -5506,13 +5516,13 @@ var Kinetic = {}; } }; - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'enhance', 0, null, Kinetic.Factory.afterSetFilter); + Konva.Factory.addGetterSetter(Konva.Node, 'enhance', 0, null, Konva.Factory.afterSetFilter); /** - * get/set enhance. Use with {@link Kinetic.Filters.Enhance} filter. + * get/set enhance. Use with {@link Konva.Filters.Enhance} filter. * @name enhance * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Float} amount * @returns {Float} */ @@ -5526,15 +5536,15 @@ var Kinetic = {}; * @function * @name Posterize * @author ippo615 - * @memberof Kinetic.Filters + * @memberof Konva.Filters * @param {Object} imageData * @example * node.cache(); - * node.filters([Kinetic.Filters.Posterize]); + * node.filters([Konva.Filters.Posterize]); * node.levels(0.8); */ - Kinetic.Filters.Posterize = function (imageData) { + Konva.Filters.Posterize = function (imageData) { // level must be between 1 and 255 var levels = Math.round(this.levels() * 254) + 1, data = imageData.data, @@ -5547,185 +5557,185 @@ var Kinetic = {}; } }; - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'levels', 0.5, null, Kinetic.Factory.afterSetFilter); + Konva.Factory.addGetterSetter(Konva.Node, 'levels', 0.5, null, Konva.Factory.afterSetFilter); /** - * get/set levels. Must be a number between 0 and 1. Use with {@link Kinetic.Filters.Posterize} filter. + * get/set levels. Must be a number between 0 and 1. Use with {@link Konva.Filters.Posterize} filter. * @name levels * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Number} level between 0 and 1 * @returns {Number} */ -})();;(function () { - - /** - * Noise Filter. Randomly adds or substracts to the color channels - * @function - * @name Noise - * @memberof Kinetic.Filters - * @param {Object} imageData - * @author ippo615 - * @example - * node.cache(); - * node.filters([Kinetic.Filters.Noise]); - * node.noise(0.8); - */ - Kinetic.Filters.Noise = function (imageData) { - var amount = this.noise() * 255, - data = imageData.data, - nPixels = data.length, - half = amount / 2, - i; - - for (i = 0; i < nPixels; i += 4) { - data[i + 0] += half - 2 * half * Math.random(); - data[i + 1] += half - 2 * half * Math.random(); - data[i + 2] += half - 2 * half * Math.random(); - } - }; - - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'noise', 0.2, null, Kinetic.Factory.afterSetFilter); - - /** - * get/set noise amount. Must be a value between 0 and 1. Use with {@link Kinetic.Filters.Noise} filter. - * @name noise - * @method - * @memberof Kinetic.Node.prototype - * @param {Number} noise - * @returns {Number} - */ -})(); -;(function () { - - /** - * Pixelate Filter. Averages groups of pixels and redraws - * them as larger pixels - * @function - * @name Pixelate - * @memberof Kinetic.Filters - * @param {Object} imageData - * @author ippo615 - * @example - * node.cache(); - * node.filters([Kinetic.Filters.Pixelate]); - * node.pixelSize(10); - */ - - Kinetic.Filters.Pixelate = function (imageData) { - - var pixelSize = Math.ceil(this.pixelSize()), - width = imageData.width, - height = imageData.height, - x, y, i, - //pixelsPerBin = pixelSize * pixelSize, - red, green, blue, alpha, - nBinsX = Math.ceil(width / pixelSize), - nBinsY = Math.ceil(height / pixelSize), - xBinStart, xBinEnd, yBinStart, yBinEnd, - xBin, yBin, pixelsInBin; - imageData = imageData.data; - - for (xBin = 0; xBin < nBinsX; xBin += 1) { - for (yBin = 0; yBin < nBinsY; yBin += 1) { - - // Initialize the color accumlators to 0 - red = 0; - green = 0; - blue = 0; - alpha = 0; - - // Determine which pixels are included in this bin - xBinStart = xBin * pixelSize; - xBinEnd = xBinStart + pixelSize; - yBinStart = yBin * pixelSize; - yBinEnd = yBinStart + pixelSize; - - // Add all of the pixels to this bin! - pixelsInBin = 0; - for (x = xBinStart; x < xBinEnd; x += 1) { - if( x >= width ){ continue; } - for (y = yBinStart; y < yBinEnd; y += 1) { - if( y >= height ){ continue; } - i = (width * y + x) * 4; - red += imageData[i + 0]; - green += imageData[i + 1]; - blue += imageData[i + 2]; - alpha += imageData[i + 3]; - pixelsInBin += 1; - } - } - - // Make sure the channels are between 0-255 - red = red / pixelsInBin; - green = green / pixelsInBin; - blue = blue / pixelsInBin; - - // Draw this bin - for (x = xBinStart; x < xBinEnd; x += 1) { - if( x >= width ){ continue; } - for (y = yBinStart; y < yBinEnd; y += 1) { - if( y >= height ){ continue; } - i = (width * y + x) * 4; - imageData[i + 0] = red; - imageData[i + 1] = green; - imageData[i + 2] = blue; - imageData[i + 3] = alpha; - } - } - } - } - - }; - - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'pixelSize', 8, null, Kinetic.Factory.afterSetFilter); - - /** - * get/set pixel size. Use with {@link Kinetic.Filters.Pixelate} filter. - * @name pixelSize - * @method - * @memberof Kinetic.Node.prototype - * @param {Integer} pixelSize - * @returns {Integer} - */ -})();;(function () { - - /** - * Threshold Filter. Pushes any value above the mid point to - * the max and any value below the mid point to the min. - * This affects the alpha channel. - * @function - * @name Threshold - * @memberof Kinetic.Filters - * @param {Object} imageData - * @author ippo615 - * @example - * node.cache(); - * node.filters([Kinetic.Filters.Threshold]); - * node.threshold(0.1); - */ - - Kinetic.Filters.Threshold = function (imageData) { - var level = this.threshold() * 255, - data = imageData.data, - len = data.length, - i; - - for (i = 0; i < len; i += 1) { - data[i] = data[i] < level ? 0 : 255; - } - }; - - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'threshold', 0.5, null, Kinetic.Factory.afterSetFilter); - - /** - * get/set threshold. Must be a value between 0 and 1. Use with {@link Kinetic.Filters.Threshold} or {@link Kinetic.Filters.Mask} filter. - * @name threshold - * @method - * @memberof Kinetic.Node.prototype - * @param {Number} threshold - * @returns {Number} - */ +})();;(function () { + + /** + * Noise Filter. Randomly adds or substracts to the color channels + * @function + * @name Noise + * @memberof Konva.Filters + * @param {Object} imageData + * @author ippo615 + * @example + * node.cache(); + * node.filters([Konva.Filters.Noise]); + * node.noise(0.8); + */ + Konva.Filters.Noise = function (imageData) { + var amount = this.noise() * 255, + data = imageData.data, + nPixels = data.length, + half = amount / 2, + i; + + for (i = 0; i < nPixels; i += 4) { + data[i + 0] += half - 2 * half * Math.random(); + data[i + 1] += half - 2 * half * Math.random(); + data[i + 2] += half - 2 * half * Math.random(); + } + }; + + Konva.Factory.addGetterSetter(Konva.Node, 'noise', 0.2, null, Konva.Factory.afterSetFilter); + + /** + * get/set noise amount. Must be a value between 0 and 1. Use with {@link Konva.Filters.Noise} filter. + * @name noise + * @method + * @memberof Konva.Node.prototype + * @param {Number} noise + * @returns {Number} + */ +})(); +;(function () { + + /** + * Pixelate Filter. Averages groups of pixels and redraws + * them as larger pixels + * @function + * @name Pixelate + * @memberof Konva.Filters + * @param {Object} imageData + * @author ippo615 + * @example + * node.cache(); + * node.filters([Konva.Filters.Pixelate]); + * node.pixelSize(10); + */ + + Konva.Filters.Pixelate = function (imageData) { + + var pixelSize = Math.ceil(this.pixelSize()), + width = imageData.width, + height = imageData.height, + x, y, i, + //pixelsPerBin = pixelSize * pixelSize, + red, green, blue, alpha, + nBinsX = Math.ceil(width / pixelSize), + nBinsY = Math.ceil(height / pixelSize), + xBinStart, xBinEnd, yBinStart, yBinEnd, + xBin, yBin, pixelsInBin; + imageData = imageData.data; + + for (xBin = 0; xBin < nBinsX; xBin += 1) { + for (yBin = 0; yBin < nBinsY; yBin += 1) { + + // Initialize the color accumlators to 0 + red = 0; + green = 0; + blue = 0; + alpha = 0; + + // Determine which pixels are included in this bin + xBinStart = xBin * pixelSize; + xBinEnd = xBinStart + pixelSize; + yBinStart = yBin * pixelSize; + yBinEnd = yBinStart + pixelSize; + + // Add all of the pixels to this bin! + pixelsInBin = 0; + for (x = xBinStart; x < xBinEnd; x += 1) { + if( x >= width ){ continue; } + for (y = yBinStart; y < yBinEnd; y += 1) { + if( y >= height ){ continue; } + i = (width * y + x) * 4; + red += imageData[i + 0]; + green += imageData[i + 1]; + blue += imageData[i + 2]; + alpha += imageData[i + 3]; + pixelsInBin += 1; + } + } + + // Make sure the channels are between 0-255 + red = red / pixelsInBin; + green = green / pixelsInBin; + blue = blue / pixelsInBin; + + // Draw this bin + for (x = xBinStart; x < xBinEnd; x += 1) { + if( x >= width ){ continue; } + for (y = yBinStart; y < yBinEnd; y += 1) { + if( y >= height ){ continue; } + i = (width * y + x) * 4; + imageData[i + 0] = red; + imageData[i + 1] = green; + imageData[i + 2] = blue; + imageData[i + 3] = alpha; + } + } + } + } + + }; + + Konva.Factory.addGetterSetter(Konva.Node, 'pixelSize', 8, null, Konva.Factory.afterSetFilter); + + /** + * get/set pixel size. Use with {@link Konva.Filters.Pixelate} filter. + * @name pixelSize + * @method + * @memberof Konva.Node.prototype + * @param {Integer} pixelSize + * @returns {Integer} + */ +})();;(function () { + + /** + * Threshold Filter. Pushes any value above the mid point to + * the max and any value below the mid point to the min. + * This affects the alpha channel. + * @function + * @name Threshold + * @memberof Konva.Filters + * @param {Object} imageData + * @author ippo615 + * @example + * node.cache(); + * node.filters([Konva.Filters.Threshold]); + * node.threshold(0.1); + */ + + Konva.Filters.Threshold = function (imageData) { + var level = this.threshold() * 255, + data = imageData.data, + len = data.length, + i; + + for (i = 0; i < len; i += 1) { + data[i] = data[i] < level ? 0 : 255; + } + }; + + Konva.Factory.addGetterSetter(Konva.Node, 'threshold', 0.5, null, Konva.Factory.afterSetFilter); + + /** + * get/set threshold. Must be a value between 0 and 1. Use with {@link Konva.Filters.Threshold} or {@link Konva.Filters.Mask} filter. + * @name threshold + * @method + * @memberof Konva.Node.prototype + * @param {Number} threshold + * @returns {Number} + */ })();;(function() { /** * Sepia Filter @@ -5733,15 +5743,15 @@ var Kinetic = {}; * Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk, http://blog.nihilogic.dk/ * @function * @name Sepia - * @memberof Kinetic.Filters + * @memberof Konva.Filters * @param {Object} imageData * @author Jacob Seidelin * @license MPL v1.1 [http://www.pixastic.com/lib/license.txt] * @example * node.cache(); - * node.filters([Kinetic.Filters.Sepia]); + * node.filters([Konva.Filters.Sepia]); */ - Kinetic.Filters.Sepia = function (imageData) { + Konva.Filters.Sepia = function (imageData) { var data = imageData.data, w = imageData.width, y = imageData.height, @@ -5778,13 +5788,13 @@ var Kinetic = {}; * License: [http://www.pixastic.com/lib/license.txt] * @function * @name Solarize - * @memberof Kinetic.Filters + * @memberof Konva.Filters * @param {Object} imageData * @example * node.cache(); - * node.filters([Kinetic.Filters.Solarize]); + * node.filters([Konva.Filters.Solarize]); */ - Kinetic.Filters.Solarize = function (imageData) { + Konva.Filters.Solarize = function (imageData) { var data = imageData.data, w = imageData.width, h = imageData.height, @@ -5828,7 +5838,7 @@ var Kinetic = {}; * what would be the y axis and the theta axis along the x axis. * @function * @author ippo615 - * @memberof Kinetic.Filters + * @memberof Konva.Filters * @param {ImageData} src, the source image data (what will be transformed) * @param {ImageData} dst, the destination image data (where it will be saved) * @param {Object} opt @@ -5895,7 +5905,7 @@ var Kinetic = {}; * Performs w*h*4 pixel reads and w*h pixel writes. * @function * @author ippo615 - * @memberof Kinetic.Filters + * @memberof Konva.Filters * @param {ImageData} src, the source image data (what will be transformed) * @param {ImageData} dst, the destination image data (where it will be saved) * @param {Object} opt @@ -5964,25 +5974,25 @@ var Kinetic = {}; }; - //Kinetic.Filters.ToPolar = Kinetic.Util._FilterWrapDoubleBuffer(ToPolar); - //Kinetic.Filters.FromPolar = Kinetic.Util._FilterWrapDoubleBuffer(FromPolar); + //Konva.Filters.ToPolar = Konva.Util._FilterWrapDoubleBuffer(ToPolar); + //Konva.Filters.FromPolar = Konva.Util._FilterWrapDoubleBuffer(FromPolar); // create a temporary canvas for working - shared between multiple calls - var tempCanvas = Kinetic.Util.createCanvasElement(); + var tempCanvas = Konva.Util.createCanvasElement(); /* * Kaleidoscope Filter. * @function * @name Kaleidoscope * @author ippo615 - * @memberof Kinetic.Filters + * @memberof Konva.Filters * @example * node.cache(); - * node.filters([Kinetic.Filters.Kaleidoscope]); + * node.filters([Konva.Filters.Kaleidoscope]); * node.kaleidoscopePower(3); * node.kaleidoscopeAngle(45); */ - Kinetic.Filters.Kaleidoscope = function(imageData){ + Konva.Filters.Kaleidoscope = function(imageData){ var xSize = imageData.width, ySize = imageData.height; @@ -6066,33 +6076,33 @@ var Kinetic = {}; }; /** - * get/set kaleidoscope power. Use with {@link Kinetic.Filters.Kaleidoscope} filter. + * get/set kaleidoscope power. Use with {@link Konva.Filters.Kaleidoscope} filter. * @name kaleidoscopePower * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Integer} power of kaleidoscope * @returns {Integer} */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'kaleidoscopePower', 2, null, Kinetic.Factory.afterSetFilter); + Konva.Factory.addGetterSetter(Konva.Node, 'kaleidoscopePower', 2, null, Konva.Factory.afterSetFilter); /** - * get/set kaleidoscope angle. Use with {@link Kinetic.Filters.Kaleidoscope} filter. + * get/set kaleidoscope angle. Use with {@link Konva.Filters.Kaleidoscope} filter. * @name kaleidoscopeAngle * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Integer} degrees * @returns {Integer} */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'kaleidoscopeAngle', 0, null, Kinetic.Factory.afterSetFilter); + Konva.Factory.addGetterSetter(Konva.Node, 'kaleidoscopeAngle', 0, null, Konva.Factory.afterSetFilter); })(); ;(function() { var BATCH_DRAW_STOP_TIME_DIFF = 500; var now =(function() { - if (Kinetic.root.performance && Kinetic.root.performance.now) { + if (Konva.root.performance && Konva.root.performance.now) { return function() { - return Kinetic.root.performance.now(); + return Konva.root.performance.now(); }; } else { @@ -6103,11 +6113,11 @@ var Kinetic = {}; })(); var RAF = (function() { - return Kinetic.root.requestAnimationFrame - || Kinetic.root.webkitRequestAnimationFrame - || Kinetic.root.mozRequestAnimationFrame - || Kinetic.root.oRequestAnimationFrame - || Kinetic.root.msRequestAnimationFrame + return Konva.root.requestAnimationFrame + || Konva.root.webkitRequestAnimationFrame + || Konva.root.mozRequestAnimationFrame + || Konva.root.oRequestAnimationFrame + || Konva.root.msRequestAnimationFrame || FRAF; })(); @@ -6116,34 +6126,34 @@ var Kinetic = {}; } function requestAnimFrame() { - return RAF.apply(Kinetic.root, arguments); + return RAF.apply(Konva.root, arguments); } /** * Animation constructor. A stage is used to contain multiple layers and handle * @constructor - * @memberof Kinetic + * @memberof Konva * @param {Function} func function executed on each animation frame. The function is passed a frame object, which contains * timeDiff, lastTime, time, and frameRate properties. The timeDiff property is the number of milliseconds that have passed * since the last animation frame. The lastTime property is time in milliseconds that elapsed from the moment the animation started * to the last animation frame. The time property is the time in milliseconds that ellapsed from the moment the animation started * to the current animation frame. The frameRate property is the current frame rate in frames / second. Return false from function, * if you don't need to redraw layer/layers on some frames. - * @param {Kinetic.Layer|Array} [layers] layer(s) to be redrawn on each animation frame. Can be a layer, an array of layers, or null. + * @param {Konva.Layer|Array} [layers] layer(s) to be redrawn on each animation frame. Can be a layer, an array of layers, or null. * Not specifying a node will result in no redraw. * @example * // move a node to the right at 50 pixels / second * var velocity = 50; * - * var anim = new Kinetic.Animation(function(frame) { + * var anim = new Konva.Animation(function(frame) { * var dist = velocity * (frame.timeDiff / 1000); * node.move(dist, 0); * }, layer); * * anim.start(); */ - Kinetic.Animation = function(func, layers) { - var Anim = Kinetic.Animation; + Konva.Animation = function(func, layers) { + var Anim = Konva.Animation; this.func = func; this.setLayers(layers); this.id = Anim.animIdCounter++; @@ -6156,12 +6166,12 @@ var Kinetic = {}; /* * Animation methods */ - Kinetic.Animation.prototype = { + Konva.Animation.prototype = { /** * set layers to be redrawn on each animation frame * @method - * @memberof Kinetic.Animation.prototype - * @param {Kinetic.Layer|Array} [layers] layer(s) to be redrawn.  Can be a layer, an array of layers, or null. Not specifying a node will result in no redraw. + * @memberof Konva.Animation.prototype + * @param {Konva.Layer|Array} [layers] layer(s) to be redrawn.  Can be a layer, an array of layers, or null. Not specifying a node will result in no redraw. */ setLayers: function(layers) { var lays = []; @@ -6170,7 +6180,7 @@ var Kinetic = {}; lays = []; } // if passing in an array of Layers - // NOTE: layers could be an array or Kinetic.Collection. for simplicity, I'm just inspecting + // NOTE: layers could be an array or Konva.Collection. for simplicity, I'm just inspecting // the length property to check for both cases else if (layers.length > 0) { lays = layers; @@ -6185,7 +6195,7 @@ var Kinetic = {}; /** * get layers * @method - * @memberof Kinetic.Animation.prototype + * @memberof Konva.Animation.prototype */ getLayers: function() { return this.layers; @@ -6193,8 +6203,8 @@ var Kinetic = {}; /** * add layer. Returns true if the layer was added, and false if it was not * @method - * @memberof Kinetic.Animation.prototype - * @param {Kinetic.Layer} layer + * @memberof Konva.Animation.prototype + * @param {Konva.Layer} layer */ addLayer: function(layer) { var layers = this.layers, @@ -6220,10 +6230,10 @@ var Kinetic = {}; /** * determine if animation is running or not. returns true or false * @method - * @memberof Kinetic.Animation.prototype + * @memberof Konva.Animation.prototype */ isRunning: function() { - var a = Kinetic.Animation, + var a = Konva.Animation, animations = a.animations, len = animations.length, n; @@ -6238,10 +6248,10 @@ var Kinetic = {}; /** * start animation * @method - * @memberof Kinetic.Animation.prototype + * @memberof Konva.Animation.prototype */ start: function() { - var Anim = Kinetic.Animation; + var Anim = Konva.Animation; this.stop(); this.frame.timeDiff = 0; this.frame.lastTime = now(); @@ -6250,10 +6260,10 @@ var Kinetic = {}; /** * stop animation * @method - * @memberof Kinetic.Animation.prototype + * @memberof Konva.Animation.prototype */ stop: function() { - Kinetic.Animation._removeAnimation(this); + Konva.Animation._removeAnimation(this); }, _updateFrameObject: function(time) { this.frame.timeDiff = time - this.frame.lastTime; @@ -6262,15 +6272,15 @@ var Kinetic = {}; this.frame.frameRate = 1000 / this.frame.timeDiff; } }; - Kinetic.Animation.animations = []; - Kinetic.Animation.animIdCounter = 0; - Kinetic.Animation.animRunning = false; + Konva.Animation.animations = []; + Konva.Animation.animIdCounter = 0; + Konva.Animation.animRunning = false; - Kinetic.Animation._addAnimation = function(anim) { + Konva.Animation._addAnimation = function(anim) { this.animations.push(anim); this._handleAnimation(); }; - Kinetic.Animation._removeAnimation = function(anim) { + Konva.Animation._removeAnimation = function(anim) { var id = anim.id, animations = this.animations, len = animations.length, @@ -6284,7 +6294,7 @@ var Kinetic = {}; } }; - Kinetic.Animation._runFrames = function() { + Konva.Animation._runFrames = function() { var layerHash = {}, animations = this.animations, anim, layers, func, n, i, layersLen, layer, key, needRedraw; @@ -6331,8 +6341,8 @@ var Kinetic = {}; layerHash[key].draw(); } }; - Kinetic.Animation._animationLoop = function() { - var Anim = Kinetic.Animation; + Konva.Animation._animationLoop = function() { + var Anim = Konva.Animation; if(Anim.animations.length) { requestAnimFrame(Anim._animationLoop); @@ -6342,7 +6352,7 @@ var Kinetic = {}; Anim.animRunning = false; } }; - Kinetic.Animation._handleAnimation = function() { + Konva.Animation._handleAnimation = function() { var that = this; if(!this.animRunning) { this.animRunning = true; @@ -6350,19 +6360,19 @@ var Kinetic = {}; } }; - var moveTo = Kinetic.Node.prototype.moveTo; - Kinetic.Node.prototype.moveTo = function(container) { + var moveTo = Konva.Node.prototype.moveTo; + Konva.Node.prototype.moveTo = function(container) { moveTo.call(this, container); }; /** * batch draw * @method - * @memberof Kinetic.Base.prototype + * @memberof Konva.Base.prototype */ - Kinetic.BaseLayer.prototype.batchDraw = function() { + Konva.BaseLayer.prototype.batchDraw = function() { var that = this, - Anim = Kinetic.Animation; + Anim = Konva.Animation; if (!this.batchAnim) { this.batchAnim = new Anim(function() { @@ -6383,9 +6393,9 @@ var Kinetic = {}; /** * batch draw * @method - * @memberof Kinetic.Stage.prototype + * @memberof Konva.Stage.prototype */ - Kinetic.Stage.prototype.batchDraw = function() { + Konva.Stage.prototype.batchDraw = function() { this.getChildren().each(function(layer) { layer.batchDraw(); }); @@ -6409,16 +6419,16 @@ var Kinetic = {}; /** * Tween constructor. Tweens enable you to animate a node between the current state and a new state. * You can play, pause, reverse, seek, reset, and finish tweens. By default, tweens are animated using - * a linear easing. For more tweening options, check out {@link Kinetic.Easings} + * a linear easing. For more tweening options, check out {@link Konva.Easings} * @constructor - * @memberof Kinetic + * @memberof Konva * @example * // instantiate new tween which fully rotates a node in 1 second - * var tween = new Kinetic.Tween({ + * var tween = new Konva.Tween({ * node: node, * rotationDeg: 360, * duration: 1, - * easing: Kinetic.Easings.EaseInOut + * easing: Konva.Easings.EaseInOut * }); * * // play tween @@ -6427,12 +6437,12 @@ var Kinetic = {}; * // pause tween * tween.pause(); */ - Kinetic.Tween = function(config) { + Konva.Tween = function(config) { var that = this, node = config.node, nodeId = node._id, duration, - easing = config.easing || Kinetic.Easings.Linear, + easing = config.easing || Konva.Easings.Linear, yoyo = !!config.yoyo, key; @@ -6446,9 +6456,9 @@ var Kinetic = {}; this.node = node; this._id = idCounter++; - this.anim = new Kinetic.Animation(function() { + this.anim = new Konva.Animation(function() { that.tween.onEnterFrame(); - }, node.getLayer() || ((node instanceof Kinetic.Stage) ? node.getLayers() : null)); + }, node.getLayer() || ((node instanceof Konva.Stage) ? node.getLayers() : null)); this.tween = new Tween(key, function(i) { that._tweenFunc(i); @@ -6457,15 +6467,15 @@ var Kinetic = {}; this._addListeners(); // init attrs map - if (!Kinetic.Tween.attrs[nodeId]) { - Kinetic.Tween.attrs[nodeId] = {}; + if (!Konva.Tween.attrs[nodeId]) { + Konva.Tween.attrs[nodeId] = {}; } - if (!Kinetic.Tween.attrs[nodeId][this._id]) { - Kinetic.Tween.attrs[nodeId][this._id] = {}; + if (!Konva.Tween.attrs[nodeId][this._id]) { + Konva.Tween.attrs[nodeId][this._id] = {}; } // init tweens map - if (!Kinetic.Tween.tweens[nodeId]) { - Kinetic.Tween.tweens[nodeId] = {}; + if (!Konva.Tween.tweens[nodeId]) { + Konva.Tween.tweens[nodeId] = {}; } for (key in config) { @@ -6482,27 +6492,27 @@ var Kinetic = {}; }; // start/diff object = attrs.nodeId.tweenId.attr - Kinetic.Tween.attrs = {}; + Konva.Tween.attrs = {}; // tweenId = tweens.nodeId.attr - Kinetic.Tween.tweens = {}; + Konva.Tween.tweens = {}; - Kinetic.Tween.prototype = { + Konva.Tween.prototype = { _addAttr: function(key, end) { var node = this.node, nodeId = node._id, start, diff, tweenId, n, len; // remove conflict from tween map if it exists - tweenId = Kinetic.Tween.tweens[nodeId][key]; + tweenId = Konva.Tween.tweens[nodeId][key]; if (tweenId) { - delete Kinetic.Tween.attrs[nodeId][tweenId][key]; + delete Konva.Tween.attrs[nodeId][tweenId][key]; } // add to tween map start = node.getAttr(key); - if (Kinetic.Util._isArray(end)) { + if (Konva.Util._isArray(end)) { diff = []; len = end.length; for (n=0; n -1) { - Kinetic.stages.splice(index, 1); + Konva.stages.splice(index, 1); } }, /** * get pointer position which can be a touch position or mouse position * @method - * @memberof Kinetic.Stage.prototype + * @memberof Konva.Stage.prototype * @returns {Object} */ getPointerPosition: function() { @@ -9352,9 +9362,9 @@ var Kinetic = {}; }, /** * get stage content div element which has the - * the class name "kineticjs-content" + * the class name "konvajs-content" * @method - * @memberof Kinetic.Stage.prototype + * @memberof Konva.Stage.prototype */ getContent: function() { return this.content; @@ -9362,7 +9372,7 @@ var Kinetic = {}; /** * Creates a composite data URL and requires a callback because the composite is generated asynchronously. * @method - * @memberof Kinetic.Stage.prototype + * @memberof Konva.Stage.prototype * @param {Object} config * @param {Function} config.callback function executed when the composite has completed * @param {String} [config.mimeType] can be "image/png" or "image/jpeg". @@ -9382,7 +9392,7 @@ var Kinetic = {}; quality = config.quality || null, x = config.x || 0, y = config.y || 0, - canvas = new Kinetic.SceneCanvas({ + canvas = new Konva.SceneCanvas({ width: config.width || this.getWidth(), height: config.height || this.getHeight(), pixelRatio: 1 @@ -9397,7 +9407,7 @@ var Kinetic = {}; function drawLayer(n) { var layer = layers[n], layerUrl = layer.toDataURL(), - imageObj = new Kinetic.window.Image(); + imageObj = new Konva.window.Image(); imageObj.onload = function() { _context.drawImage(imageObj, 0, 0); @@ -9416,7 +9426,7 @@ var Kinetic = {}; /** * converts stage into an image. * @method - * @memberof Kinetic.Stage.prototype + * @memberof Konva.Stage.prototype * @param {Object} config * @param {Function} config.callback function executed when the composite has completed * @param {String} [config.mimeType] can be "image/png" or "image/jpeg". @@ -9433,7 +9443,7 @@ var Kinetic = {}; var cb = config.callback; config.callback = function(dataUrl) { - Kinetic.Util._getImage(dataUrl, function(img) { + Konva.Util._getImage(dataUrl, function(img) { cb(img); }); }; @@ -9443,11 +9453,11 @@ var Kinetic = {}; * get visible intersection shape. This is the preferred * method for determining if a point intersects a shape or not * @method - * @memberof Kinetic.Stage.prototype + * @memberof Konva.Stage.prototype * @param {Object} pos * @param {Number} pos.x * @param {Number} pos.y - * @returns {Kinetic.Shape} + * @returns {Konva.Shape} */ getIntersection: function(pos) { var layers = this.getChildren(), @@ -9490,8 +9500,8 @@ var Kinetic = {}; /** * add layer or layers to stage * @method - * @memberof Kinetic.Stage.prototype - * @param {...Kinetic.Layer} layer + * @memberof Konva.Stage.prototype + * @param {...Konva.Layer} layer * @example * stage.add(layer1, layer2, layer3); */ @@ -9502,7 +9512,7 @@ var Kinetic = {}; } return; } - Kinetic.Container.prototype.add.call(this, layer); + Konva.Container.prototype.add.call(this, layer); layer._setCanvasSize(this.width(), this.height()); // draw layer and append canvas to container @@ -9519,9 +9529,9 @@ var Kinetic = {}; return null; }, /** - * returns a {@link Kinetic.Collection} of layers + * returns a {@link Konva.Collection} of layers * @method - * @memberof Kinetic.Stage.prototype + * @memberof Konva.Stage.prototype */ getLayers: function() { return this.getChildren(); @@ -9532,17 +9542,17 @@ var Kinetic = {}; } }, _mouseover: function(evt) { - if (!Kinetic.UA.mobile) { + if (!Konva.UA.mobile) { this._setPointerPosition(evt); this._fire(CONTENT_MOUSEOVER, {evt: evt}); } }, _mouseout: function(evt) { - if (!Kinetic.UA.mobile) { + if (!Konva.UA.mobile) { this._setPointerPosition(evt); var targetShape = this.targetShape; - if(targetShape && !Kinetic.isDragging()) { + if(targetShape && !Konva.isDragging()) { targetShape._fireAndBubble(MOUSEOUT, {evt: evt}); targetShape._fireAndBubble(MOUSELEAVE, {evt: evt}); this.targetShape = null; @@ -9555,7 +9565,7 @@ var Kinetic = {}; _mousemove: function(evt) { // workaround for mobile IE to force touch event when unhandled pointer event elevates into a mouse event - if (Kinetic.UA.ieMobile) { + if (Konva.UA.ieMobile) { return this._touchmove(evt); } @@ -9563,16 +9573,16 @@ var Kinetic = {}; if ((typeof evt.webkitMovementX !== 'undefined' || typeof evt.webkitMovementY !== 'undefined') && evt.webkitMovementY === 0 && evt.webkitMovementX === 0) { return; } - if (Kinetic.UA.mobile) { + if (Konva.UA.mobile) { return; } this._setPointerPosition(evt); - var dd = Kinetic.DD, shape; + var dd = Konva.DD, shape; - if (!Kinetic.isDragging()) { + if (!Konva.isDragging()) { shape = this.getIntersection(this.getPointerPosition()); if(shape && shape.isListening()) { - if(!Kinetic.isDragging() && (!this.targetShape || this.targetShape._id !== shape._id)) { + if(!Konva.isDragging() && (!this.targetShape || this.targetShape._id !== shape._id)) { if(this.targetShape) { this.targetShape._fireAndBubble(MOUSEOUT, {evt: evt}, shape); this.targetShape._fireAndBubble(MOUSELEAVE, {evt: evt}, shape); @@ -9590,7 +9600,7 @@ var Kinetic = {}; * to run mouseout from previous target shape */ else { - if(this.targetShape && !Kinetic.isDragging()) { + if(this.targetShape && !Konva.isDragging()) { this.targetShape._fireAndBubble(MOUSEOUT, {evt: evt}); this.targetShape._fireAndBubble(MOUSELEAVE, {evt: evt}); this.targetShape = null; @@ -9614,15 +9624,15 @@ var Kinetic = {}; _mousedown: function(evt) { // workaround for mobile IE to force touch event when unhandled pointer event elevates into a mouse event - if (Kinetic.UA.ieMobile) { + if (Konva.UA.ieMobile) { return this._touchstart(evt); } - if (!Kinetic.UA.mobile) { + if (!Konva.UA.mobile) { this._setPointerPosition(evt); var shape = this.getIntersection(this.getPointerPosition()); - Kinetic.listenClickTap = true; + Konva.listenClickTap = true; if (shape && shape.isListening()) { this.clickStartShape = shape; @@ -9642,36 +9652,36 @@ var Kinetic = {}; _mouseup: function(evt) { // workaround for mobile IE to force touch event when unhandled pointer event elevates into a mouse event - if (Kinetic.UA.ieMobile) { + if (Konva.UA.ieMobile) { return this._touchend(evt); } - if (!Kinetic.UA.mobile) { + if (!Konva.UA.mobile) { this._setPointerPosition(evt); var shape = this.getIntersection(this.getPointerPosition()), clickStartShape = this.clickStartShape, fireDblClick = false, - dd = Kinetic.DD; + dd = Konva.DD; - if(Kinetic.inDblClickWindow) { + if(Konva.inDblClickWindow) { fireDblClick = true; - Kinetic.inDblClickWindow = false; + Konva.inDblClickWindow = false; } // don't set inDblClickWindow after dragging else if (!dd || !dd.justDragged) { - Kinetic.inDblClickWindow = true; + Konva.inDblClickWindow = true; } else if (dd) { dd.justDragged = false; } setTimeout(function() { - Kinetic.inDblClickWindow = false; - }, Kinetic.dblClickWindow); + Konva.inDblClickWindow = false; + }, Konva.dblClickWindow); if (shape && shape.isListening()) { shape._fireAndBubble(MOUSEUP, {evt: evt}); // detect if click or double click occurred - if(Kinetic.listenClickTap && clickStartShape && clickStartShape._id === shape._id) { + if(Konva.listenClickTap && clickStartShape && clickStartShape._id === shape._id) { shape._fireAndBubble(CLICK, {evt: evt}); if(fireDblClick) { @@ -9681,14 +9691,14 @@ var Kinetic = {}; } // content events this._fire(CONTENT_MOUSEUP, {evt: evt}); - if (Kinetic.listenClickTap) { + if (Konva.listenClickTap) { this._fire(CONTENT_CLICK, {evt: evt}); if(fireDblClick) { this._fire(CONTENT_DBL_CLICK, {evt: evt}); } } - Kinetic.listenClickTap = false; + Konva.listenClickTap = false; } // always call preventDefault for desktop events because some browsers @@ -9701,7 +9711,7 @@ var Kinetic = {}; this._setPointerPosition(evt); var shape = this.getIntersection(this.getPointerPosition()); - Kinetic.listenClickTap = true; + Konva.listenClickTap = true; if (shape && shape.isListening()) { this.tapStartShape = shape; @@ -9720,23 +9730,23 @@ var Kinetic = {}; var shape = this.getIntersection(this.getPointerPosition()), fireDblClick = false; - if(Kinetic.inDblClickWindow) { + if(Konva.inDblClickWindow) { fireDblClick = true; - Kinetic.inDblClickWindow = false; + Konva.inDblClickWindow = false; } else { - Kinetic.inDblClickWindow = true; + Konva.inDblClickWindow = true; } setTimeout(function() { - Kinetic.inDblClickWindow = false; - }, Kinetic.dblClickWindow); + Konva.inDblClickWindow = false; + }, Konva.dblClickWindow); if (shape && shape.isListening()) { shape._fireAndBubble(TOUCHEND, {evt: evt}); // detect if tap or double tap occurred - if(Kinetic.listenClickTap && shape._id === this.tapStartShape._id) { + if(Konva.listenClickTap && shape._id === this.tapStartShape._id) { shape._fireAndBubble(TAP, {evt: evt}); if(fireDblClick) { @@ -9749,20 +9759,20 @@ var Kinetic = {}; } } // content events - if (Kinetic.listenClickTap) { + if (Konva.listenClickTap) { this._fire(CONTENT_TOUCHEND, {evt: evt}); if(fireDblClick) { this._fire(CONTENT_DBL_TAP, {evt: evt}); } } - Kinetic.listenClickTap = false; + Konva.listenClickTap = false; }, _touchmove: function(evt) { this._setPointerPosition(evt); - var dd = Kinetic.DD, + var dd = Konva.DD, shape; - if (!Kinetic.isDragging()) { + if (!Konva.isDragging()) { shape = this.getIntersection(this.getPointerPosition()); if (shape && shape.isListening()) { shape._fireAndBubble(TOUCHMOVE, {evt: evt}); @@ -9775,7 +9785,7 @@ var Kinetic = {}; } if(dd) { dd._drag(evt); - if (Kinetic.isDragging()) { + if (Konva.isDragging()) { evt.preventDefault(); } } @@ -9826,7 +9836,7 @@ var Kinetic = {}; // the layerX or layerY properties in newer versions of Chrome // throws a JS warning. layerX and layerY are required for FF // when the container is transformed via CSS. - else if (Kinetic.UA.browser === 'mozilla') { + else if (Konva.UA.browser === 'mozilla') { x = evt.layerX; y = evt.layerY; } @@ -9854,18 +9864,18 @@ var Kinetic = {}; _buildDOM: function() { var container = this.getContainer(); if (!container) { - if (Kinetic.Util.isBrowser()) { + if (Konva.Util.isBrowser()) { throw 'Stage has no container. A container is required.'; } else { // automatically create element for jsdom in nodejs env - container = Kinetic.document.createElement(DIV); + container = Konva.document.createElement(DIV); } } // clear content inside container container.innerHTML = EMPTY_STRING; // content - this.content = Kinetic.document.createElement(DIV); + this.content = Konva.document.createElement(DIV); this.content.style.position = RELATIVE; this.content.style.display = INLINE_BLOCK; this.content.className = KINETICJS_CONTENT; @@ -9875,10 +9885,10 @@ var Kinetic = {}; // the buffer canvas pixel ratio must be 1 because it is used as an // intermediate canvas before copying the result onto a scene canvas. // not setting it to 1 will result in an over compensation - this.bufferCanvas = new Kinetic.SceneCanvas({ + this.bufferCanvas = new Konva.SceneCanvas({ pixelRatio: 1 }); - this.bufferHitCanvas = new Kinetic.HitCanvas(); + this.bufferHitCanvas = new Konva.HitCanvas(); this._resizeDOM(); }, @@ -9895,22 +9905,22 @@ var Kinetic = {}; // currently cache function is now working for stage, because stage has no its own canvas element // TODO: may be it is better to cache all children layers? cache: function() { - Kinetic.Util.warn('Cache function is not allowed for stage. You may use cache only for layers, groups and shapes.'); + Konva.Util.warn('Cache function is not allowed for stage. You may use cache only for layers, groups and shapes.'); }, clearCache : function() { } }); - Kinetic.Util.extend(Kinetic.Stage, Kinetic.Container); + Konva.Util.extend(Konva.Stage, Konva.Container); // add getters and setters - Kinetic.Factory.addGetter(Kinetic.Stage, 'container'); - Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Stage, 'container'); + Konva.Factory.addGetter(Konva.Stage, 'container'); + Konva.Factory.addOverloadedGetterSetter(Konva.Stage, 'container'); /** * get container DOM element * @name container * @method - * @memberof Kinetic.Stage.prototype + * @memberof Konva.Stage.prototype * @returns {DomElement} container * @example * // get container @@ -9924,10 +9934,10 @@ var Kinetic = {}; })(); ;(function() { - Kinetic.Util.addMethods(Kinetic.BaseLayer, { + Konva.Util.addMethods(Konva.BaseLayer, { ___init: function(config) { this.nodeType = 'Layer'; - Kinetic.Container.call(this, config); + Konva.Container.call(this, config); }, createPNGStream : function() { return this.canvas._canvas.createPNGStream(); @@ -9935,7 +9945,7 @@ var Kinetic = {}; /** * get layer canvas * @method - * @memberof Kinetic.BaseLayer.prototype + * @memberof Konva.BaseLayer.prototype */ getCanvas: function() { return this.canvas; @@ -9943,7 +9953,7 @@ var Kinetic = {}; /** * get layer hit canvas * @method - * @memberof Kinetic.BaseLayer.prototype + * @memberof Konva.BaseLayer.prototype */ getHitCanvas: function() { return this.hitCanvas; @@ -9951,7 +9961,7 @@ var Kinetic = {}; /** * get layer canvas context * @method - * @memberof Kinetic.BaseLayer.prototype + * @memberof Konva.BaseLayer.prototype */ getContext: function() { return this.getCanvas().getContext(); @@ -9959,7 +9969,7 @@ var Kinetic = {}; /** * clear scene and hit canvas contexts tied to the layer * @method - * @memberof Kinetic.BaseLayer.prototype + * @memberof Konva.BaseLayer.prototype * @param {Object} [bounds] * @param {Number} [bounds.x] * @param {Number} [bounds.y] @@ -9984,7 +9994,7 @@ var Kinetic = {}; }, // extend Node.prototype.setZIndex setZIndex: function(index) { - Kinetic.Node.prototype.setZIndex.call(this, index); + Konva.Node.prototype.setZIndex.call(this, index); var stage = this.getStage(); if(stage) { stage.content.removeChild(this.getCanvas()._canvas); @@ -10000,7 +10010,7 @@ var Kinetic = {}; }, // extend Node.prototype.moveToTop moveToTop: function() { - Kinetic.Node.prototype.moveToTop.call(this); + Konva.Node.prototype.moveToTop.call(this); var stage = this.getStage(); if(stage) { stage.content.removeChild(this.getCanvas()._canvas); @@ -10009,7 +10019,7 @@ var Kinetic = {}; }, // extend Node.prototype.moveUp moveUp: function() { - if(Kinetic.Node.prototype.moveUp.call(this)) { + if(Konva.Node.prototype.moveUp.call(this)) { var stage = this.getStage(); if(stage) { stage.content.removeChild(this.getCanvas()._canvas); @@ -10025,7 +10035,7 @@ var Kinetic = {}; }, // extend Node.prototype.moveDown moveDown: function() { - if(Kinetic.Node.prototype.moveDown.call(this)) { + if(Konva.Node.prototype.moveDown.call(this)) { var stage = this.getStage(); if(stage) { var children = stage.getChildren(); @@ -10036,7 +10046,7 @@ var Kinetic = {}; }, // extend Node.prototype.moveToBottom moveToBottom: function() { - if(Kinetic.Node.prototype.moveToBottom.call(this)) { + if(Konva.Node.prototype.moveToBottom.call(this)) { var stage = this.getStage(); if(stage) { var children = stage.getChildren(); @@ -10051,9 +10061,9 @@ var Kinetic = {}; remove: function() { var _canvas = this.getCanvas()._canvas; - Kinetic.Node.prototype.remove.call(this); + Konva.Node.prototype.remove.call(this); - if(_canvas && _canvas.parentNode && Kinetic.Util._isInDocument(_canvas)) { + if(_canvas && _canvas.parentNode && Konva.Util._isInDocument(_canvas)) { _canvas.parentNode.removeChild(_canvas); } return this; @@ -10069,7 +10079,7 @@ var Kinetic = {}; * if you want change width use `stage.width(value);` * @name width * @method - * @memberof Kinetic.BaseLayer.prototype + * @memberof Konva.BaseLayer.prototype * @returns {Number} * @example * var width = layer.width(); @@ -10080,14 +10090,14 @@ var Kinetic = {}; } }, setWidth : function() { - Kinetic.Util.warn('Can not change width of layer. Use "stage.width(value)" function instead.'); + Konva.Util.warn('Can not change width of layer. Use "stage.width(value)" function instead.'); }, /** * get/set height of layer.getter return height of stage. setter doing nothing. * if you want change height use `stage.height(value);` * @name height * @method - * @memberof Kinetic.BaseLayer.prototype + * @memberof Konva.BaseLayer.prototype * @returns {Number} * @example * var height = layer.height(); @@ -10098,19 +10108,19 @@ var Kinetic = {}; } }, setHeight : function() { - Kinetic.Util.warn('Can not change height of layer. Use "stage.height(value)" function instead.'); + Konva.Util.warn('Can not change height of layer. Use "stage.height(value)" function instead.'); } }); - Kinetic.Util.extend(Kinetic.BaseLayer, Kinetic.Container); + Konva.Util.extend(Konva.BaseLayer, Konva.Container); // add getters and setters - Kinetic.Factory.addGetterSetter(Kinetic.BaseLayer, 'clearBeforeDraw', true); + Konva.Factory.addGetterSetter(Konva.BaseLayer, 'clearBeforeDraw', true); /** * get/set clearBeforeDraw flag which determines if the layer is cleared or not * before drawing * @name clearBeforeDraw * @method - * @memberof Kinetic.BaseLayer.prototype + * @memberof Konva.BaseLayer.prototype * @param {Boolean} clearBeforeDraw * @returns {Boolean} * @example @@ -10124,7 +10134,7 @@ var Kinetic = {}; * layer.clearBeforeDraw(true); */ - Kinetic.Collection.mapMethods(Kinetic.BaseLayer); + Konva.Collection.mapMethods(Konva.BaseLayer); })(); ;(function() { // constants @@ -10153,13 +10163,13 @@ var Kinetic = {}; INTERSECTION_OFFSETS_LEN = INTERSECTION_OFFSETS.length; - Kinetic.Util.addMethods(Kinetic.Layer, { + Konva.Util.addMethods(Konva.Layer, { ____init: function(config) { this.nodeType = 'Layer'; - this.canvas = new Kinetic.SceneCanvas(); - this.hitCanvas = new Kinetic.HitCanvas(); + this.canvas = new Konva.SceneCanvas(); + this.hitCanvas = new Konva.HitCanvas(); // call super constructor - Kinetic.BaseLayer.call(this, config); + Konva.BaseLayer.call(this, config); }, _setCanvasSize: function(width, height) { this.canvas.setSize(width, height); @@ -10168,18 +10178,18 @@ var Kinetic = {}; _validateAdd: function(child) { var type = child.getType(); if (type !== 'Group' && type !== 'Shape') { - Kinetic.Util.error('You may only add groups and shapes to a layer.'); + Konva.Util.error('You may only add groups and shapes to a layer.'); } }, /** * get visible intersection shape. This is the preferred * method for determining if a point intersects a shape or not * @method - * @memberof Kinetic.Layer.prototype + * @memberof Konva.Layer.prototype * @param {Object} pos * @param {Number} pos.x * @param {Number} pos.y - * @returns {Kinetic.Shape} + * @returns {Konva.Shape} */ getIntersection: function(pos) { var obj, i, intersectionOffset, shape; @@ -10241,8 +10251,8 @@ var Kinetic = {}; // fully opaque pixel if(p3 === 255) { - colorKey = Kinetic.Util._rgbToHex(p[0], p[1], p[2]); - shape = Kinetic.shapes[HASH + colorKey]; + colorKey = Konva.Util._rgbToHex(p[0], p[1], p[2]); + shape = Konva.shapes[HASH + colorKey]; return { shape: shape }; @@ -10270,7 +10280,7 @@ var Kinetic = {}; canvas.getContext().clear(); } - Kinetic.Container.prototype.drawScene.call(this, canvas, top); + Konva.Container.prototype.drawScene.call(this, canvas, top); this._fire(DRAW, { node: this @@ -10293,14 +10303,14 @@ var Kinetic = {}; layer.getHitCanvas().getContext().clear(); } - Kinetic.Container.prototype.drawHit.call(this, canvas, top); + Konva.Container.prototype.drawHit.call(this, canvas, top); this.imageData = null; // Clear imageData cache return this; }, /** * clear scene and hit canvas contexts tied to the layer * @method - * @memberof Kinetic.Layer.prototype + * @memberof Konva.Layer.prototype * @param {Object} [bounds] * @param {Number} [bounds.x] * @param {Number} [bounds.y] @@ -10323,7 +10333,7 @@ var Kinetic = {}; }, // extend Node.prototype.setVisible setVisible: function(visible) { - Kinetic.Node.prototype.setVisible.call(this, visible); + Konva.Node.prototype.setVisible.call(this, visible); if(visible) { this.getCanvas()._canvas.style.display = 'block'; this.hitCanvas._canvas.style.display = 'block'; @@ -10338,7 +10348,7 @@ var Kinetic = {}; * enable hit graph * @name enableHitGraph * @method - * @memberof Kinetic.Layer.prototype + * @memberof Konva.Layer.prototype * @returns {Layer} */ enableHitGraph: function() { @@ -10349,7 +10359,7 @@ var Kinetic = {}; * disable hit graph * @name disableHitGraph * @method - * @memberof Kinetic.Layer.prototype + * @memberof Konva.Layer.prototype * @returns {Layer} */ disableHitGraph: function() { @@ -10357,20 +10367,20 @@ var Kinetic = {}; return this; }, setSize : function(width, height) { - Kinetic.BaseLayer.prototype.setSize.call(this, width, height); + Konva.BaseLayer.prototype.setSize.call(this, width, height); this.hitCanvas.setSize(width, height); } }); - Kinetic.Util.extend(Kinetic.Layer, Kinetic.BaseLayer); + Konva.Util.extend(Konva.Layer, Konva.BaseLayer); - Kinetic.Factory.addGetterSetter(Kinetic.Layer, 'hitGraphEnabled', true); + Konva.Factory.addGetterSetter(Konva.Layer, 'hitGraphEnabled', true); /** * get/set hitGraphEnabled flag. Disabling the hit graph will greatly increase * draw performance because the hit graph will not be redrawn each time the layer is * drawn. This, however, also disables mouse/touch event detection * @name hitGraphEnabled * @method - * @memberof Kinetic.Layer.prototype + * @memberof Konva.Layer.prototype * @param {Boolean} enabled * @returns {Boolean} * @example @@ -10383,21 +10393,21 @@ var Kinetic = {}; * // enable hit graph * layer.hitGraphEnabled(true); */ - Kinetic.Collection.mapMethods(Kinetic.Layer); + Konva.Collection.mapMethods(Konva.Layer); })(); ;(function() { - Kinetic.Util.addMethods(Kinetic.FastLayer, { + Konva.Util.addMethods(Konva.FastLayer, { ____init: function(config) { this.nodeType = 'Layer'; - this.canvas = new Kinetic.SceneCanvas(); + this.canvas = new Konva.SceneCanvas(); // call super constructor - Kinetic.BaseLayer.call(this, config); + Konva.BaseLayer.call(this, config); }, _validateAdd: function(child) { var type = child.getType(); if (type !== 'Shape') { - Kinetic.Util.error('You may only add shapes to a fast layer.'); + Konva.Util.error('You may only add shapes to a fast layer.'); } }, _setCanvasSize: function(width, height) { @@ -10417,7 +10427,7 @@ var Kinetic = {}; canvas.getContext().clear(); } - Kinetic.Container.prototype.drawScene.call(this, canvas); + Konva.Container.prototype.drawScene.call(this, canvas); return this; }, @@ -10437,7 +10447,7 @@ var Kinetic = {}; /** * clear scene and hit canvas contexts tied to the layer * @method - * @memberof Kinetic.FastLayer.prototype + * @memberof Konva.FastLayer.prototype * @param {Object} [bounds] * @param {Number} [bounds.x] * @param {Number} [bounds.y] @@ -10458,7 +10468,7 @@ var Kinetic = {}; }, // extend Node.prototype.setVisible setVisible: function(visible) { - Kinetic.Node.prototype.setVisible.call(this, visible); + Konva.Node.prototype.setVisible.call(this, visible); if(visible) { this.getCanvas()._canvas.style.display = 'block'; } @@ -10468,118 +10478,118 @@ var Kinetic = {}; return this; } }); - Kinetic.Util.extend(Kinetic.FastLayer, Kinetic.BaseLayer); + Konva.Util.extend(Konva.FastLayer, Konva.BaseLayer); - Kinetic.Collection.mapMethods(Kinetic.FastLayer); + Konva.Collection.mapMethods(Konva.FastLayer); })(); ;(function() { - Kinetic.Util.addMethods(Kinetic.Group, { + Konva.Util.addMethods(Konva.Group, { ___init: function(config) { this.nodeType = 'Group'; // call super constructor - Kinetic.Container.call(this, config); + Konva.Container.call(this, config); }, _validateAdd: function(child) { var type = child.getType(); if (type !== 'Group' && type !== 'Shape') { - Kinetic.Util.error('You may only add groups and shapes to groups.'); + Konva.Util.error('You may only add groups and shapes to groups.'); } } }); - Kinetic.Util.extend(Kinetic.Group, Kinetic.Container); + Konva.Util.extend(Konva.Group, Konva.Container); - Kinetic.Collection.mapMethods(Kinetic.Group); + Konva.Collection.mapMethods(Konva.Group); })(); ;(function() { /** * Rect constructor * @constructor - * @memberof Kinetic - * @augments Kinetic.Shape + * @memberof Konva + * @augments Konva.Shape * @param {Object} config * @param {Number} [config.cornerRadius] - * @param {String} [config.fill] fill color - * @param {Integer} [config.fillRed] set fill red component - * @param {Integer} [config.fillGreen] set fill green component - * @param {Integer} [config.fillBlue] set fill blue component - * @param {Integer} [config.fillAlpha] set fill alpha component - * @param {Image} [config.fillPatternImage] fill pattern image - * @param {Number} [config.fillPatternX] - * @param {Number} [config.fillPatternY] - * @param {Object} [config.fillPatternOffset] object with x and y component - * @param {Number} [config.fillPatternOffsetX] - * @param {Number} [config.fillPatternOffsetY] - * @param {Object} [config.fillPatternScale] object with x and y component - * @param {Number} [config.fillPatternScaleX] - * @param {Number} [config.fillPatternScaleY] - * @param {Number} [config.fillPatternRotation] - * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" - * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component - * @param {Number} [config.fillLinearGradientStartPointX] - * @param {Number} [config.fillLinearGradientStartPointY] - * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component - * @param {Number} [config.fillLinearGradientEndPointX] - * @param {Number} [config.fillLinearGradientEndPointY] - * @param {Array} [config.fillLinearGradientColorStops] array of color stops - * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component - * @param {Number} [config.fillRadialGradientStartPointX] - * @param {Number} [config.fillRadialGradientStartPointY] - * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component - * @param {Number} [config.fillRadialGradientEndPointX] - * @param {Number} [config.fillRadialGradientEndPointY] - * @param {Number} [config.fillRadialGradientStartRadius] - * @param {Number} [config.fillRadialGradientEndRadius] - * @param {Array} [config.fillRadialGradientColorStops] array of color stops - * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true - * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration - * @param {String} [config.stroke] stroke color - * @param {Integer} [config.strokeRed] set stroke red component - * @param {Integer} [config.strokeGreen] set stroke green component - * @param {Integer} [config.strokeBlue] set stroke blue component - * @param {Integer} [config.strokeAlpha] set stroke alpha component - * @param {Number} [config.strokeWidth] stroke width - * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true - * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true - * @param {String} [config.lineJoin] can be miter, round, or bevel. The default - * is miter - * @param {String} [config.lineCap] can be butt, round, or sqare. The default - * is butt - * @param {String} [config.shadowColor] - * @param {Integer} [config.shadowRed] set shadow color red component - * @param {Integer} [config.shadowGreen] set shadow color green component - * @param {Integer} [config.shadowBlue] set shadow color blue component - * @param {Integer} [config.shadowAlpha] set shadow color alpha component - * @param {Number} [config.shadowBlur] - * @param {Object} [config.shadowOffset] object with x and y component - * @param {Number} [config.shadowOffsetX] - * @param {Number} [config.shadowOffsetY] - * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number - * between 0 and 1 - * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true - * @param {Array} [config.dash] + * @param {String} [config.fill] fill color + * @param {Integer} [config.fillRed] set fill red component + * @param {Integer} [config.fillGreen] set fill green component + * @param {Integer} [config.fillBlue] set fill blue component + * @param {Integer} [config.fillAlpha] set fill alpha component + * @param {Image} [config.fillPatternImage] fill pattern image + * @param {Number} [config.fillPatternX] + * @param {Number} [config.fillPatternY] + * @param {Object} [config.fillPatternOffset] object with x and y component + * @param {Number} [config.fillPatternOffsetX] + * @param {Number} [config.fillPatternOffsetY] + * @param {Object} [config.fillPatternScale] object with x and y component + * @param {Number} [config.fillPatternScaleX] + * @param {Number} [config.fillPatternScaleY] + * @param {Number} [config.fillPatternRotation] + * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" + * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component + * @param {Number} [config.fillLinearGradientStartPointX] + * @param {Number} [config.fillLinearGradientStartPointY] + * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component + * @param {Number} [config.fillLinearGradientEndPointX] + * @param {Number} [config.fillLinearGradientEndPointY] + * @param {Array} [config.fillLinearGradientColorStops] array of color stops + * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component + * @param {Number} [config.fillRadialGradientStartPointX] + * @param {Number} [config.fillRadialGradientStartPointY] + * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component + * @param {Number} [config.fillRadialGradientEndPointX] + * @param {Number} [config.fillRadialGradientEndPointY] + * @param {Number} [config.fillRadialGradientStartRadius] + * @param {Number} [config.fillRadialGradientEndRadius] + * @param {Array} [config.fillRadialGradientColorStops] array of color stops + * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true + * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration + * @param {String} [config.stroke] stroke color + * @param {Integer} [config.strokeRed] set stroke red component + * @param {Integer} [config.strokeGreen] set stroke green component + * @param {Integer} [config.strokeBlue] set stroke blue component + * @param {Integer} [config.strokeAlpha] set stroke alpha component + * @param {Number} [config.strokeWidth] stroke width + * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true + * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true + * @param {String} [config.lineJoin] can be miter, round, or bevel. The default + * is miter + * @param {String} [config.lineCap] can be butt, round, or sqare. The default + * is butt + * @param {String} [config.shadowColor] + * @param {Integer} [config.shadowRed] set shadow color red component + * @param {Integer} [config.shadowGreen] set shadow color green component + * @param {Integer} [config.shadowBlue] set shadow color blue component + * @param {Integer} [config.shadowAlpha] set shadow color alpha component + * @param {Number} [config.shadowBlur] + * @param {Object} [config.shadowOffset] object with x and y component + * @param {Number} [config.shadowOffsetX] + * @param {Number} [config.shadowOffsetY] + * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number + * between 0 and 1 + * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true + * @param {Array} [config.dash] * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] + * @param {Number} [config.x] + * @param {Number} [config.y] + * @param {Number} [config.width] + * @param {Number} [config.height] + * @param {Boolean} [config.visible] + * @param {Boolean} [config.listening] whether or not the node is listening for events + * @param {String} [config.id] unique id + * @param {String} [config.name] non-unique name + * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 + * @param {Object} [config.scale] set scale + * @param {Number} [config.scaleX] set scale x + * @param {Number} [config.scaleY] set scale y + * @param {Number} [config.rotation] rotation in degrees + * @param {Object} [config.offset] offset from center point and rotation point + * @param {Number} [config.offsetX] set offset x + * @param {Number} [config.offsetY] set offset y + * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop + * the entire stage by dragging any portion of the stage + * @param {Number} [config.dragDistance] * @param {Function} [config.dragBoundFunc] * @example - * var rect = new Kinetic.Rect({ + * var rect = new Konva.Rect({ * width: 100, * height: 50, * fill: 'red', @@ -10587,13 +10597,13 @@ var Kinetic = {}; * strokeWidth: 5 * }); */ - Kinetic.Rect = function(config) { + Konva.Rect = function(config) { this.___init(config); }; - Kinetic.Rect.prototype = { + Konva.Rect.prototype = { ___init: function(config) { - Kinetic.Shape.call(this, config); + Konva.Shape.call(this, config); this.className = 'Rect'; this.sceneFunc(this._sceneFunc); }, @@ -10608,8 +10618,7 @@ var Kinetic = {}; if(!cornerRadius) { // simple rect - don't bother doing all that complicated maths stuff. context.rect(0, 0, width, height); - } - else { + } else { // arcTo would be nicer, but browser support is patchy (Opera) cornerRadius = Math.min(cornerRadius, width / 2, height / 2); context.moveTo(cornerRadius, 0); @@ -10627,14 +10636,14 @@ var Kinetic = {}; } }; - Kinetic.Util.extend(Kinetic.Rect, Kinetic.Shape); + Konva.Util.extend(Konva.Rect, Konva.Shape); - Kinetic.Factory.addGetterSetter(Kinetic.Rect, 'cornerRadius', 0); + Konva.Factory.addGetterSetter(Konva.Rect, 'cornerRadius', 0); /** * get/set corner radius * @name cornerRadius * @method - * @memberof Kinetic.Rect.prototype + * @memberof Konva.Rect.prototype * @param {Number} cornerRadius * @returns {Number} * @example @@ -10645,7 +10654,7 @@ var Kinetic = {}; * rect.cornerRadius(10); */ - Kinetic.Collection.mapMethods(Kinetic.Rect); + Konva.Collection.mapMethods(Konva.Rect); })(); ;(function() { // the 0.0001 offset fixes a bug in Chrome 27 @@ -10655,107 +10664,107 @@ var Kinetic = {}; /** * Circle constructor * @constructor - * @memberof Kinetic - * @augments Kinetic.Shape + * @memberof Konva + * @augments Konva.Shape * @param {Object} config * @param {Number} config.radius - * @param {String} [config.fill] fill color - * @param {Integer} [config.fillRed] set fill red component - * @param {Integer} [config.fillGreen] set fill green component - * @param {Integer} [config.fillBlue] set fill blue component - * @param {Integer} [config.fillAlpha] set fill alpha component - * @param {Image} [config.fillPatternImage] fill pattern image - * @param {Number} [config.fillPatternX] - * @param {Number} [config.fillPatternY] - * @param {Object} [config.fillPatternOffset] object with x and y component - * @param {Number} [config.fillPatternOffsetX] - * @param {Number} [config.fillPatternOffsetY] - * @param {Object} [config.fillPatternScale] object with x and y component - * @param {Number} [config.fillPatternScaleX] - * @param {Number} [config.fillPatternScaleY] - * @param {Number} [config.fillPatternRotation] - * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" - * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component - * @param {Number} [config.fillLinearGradientStartPointX] - * @param {Number} [config.fillLinearGradientStartPointY] - * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component - * @param {Number} [config.fillLinearGradientEndPointX] - * @param {Number} [config.fillLinearGradientEndPointY] - * @param {Array} [config.fillLinearGradientColorStops] array of color stops - * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component - * @param {Number} [config.fillRadialGradientStartPointX] - * @param {Number} [config.fillRadialGradientStartPointY] - * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component - * @param {Number} [config.fillRadialGradientEndPointX] - * @param {Number} [config.fillRadialGradientEndPointY] - * @param {Number} [config.fillRadialGradientStartRadius] - * @param {Number} [config.fillRadialGradientEndRadius] - * @param {Array} [config.fillRadialGradientColorStops] array of color stops - * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true - * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration - * @param {String} [config.stroke] stroke color - * @param {Integer} [config.strokeRed] set stroke red component - * @param {Integer} [config.strokeGreen] set stroke green component - * @param {Integer} [config.strokeBlue] set stroke blue component - * @param {Integer} [config.strokeAlpha] set stroke alpha component - * @param {Number} [config.strokeWidth] stroke width - * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true - * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true - * @param {String} [config.lineJoin] can be miter, round, or bevel. The default - * is miter - * @param {String} [config.lineCap] can be butt, round, or sqare. The default - * is butt - * @param {String} [config.shadowColor] - * @param {Integer} [config.shadowRed] set shadow color red component - * @param {Integer} [config.shadowGreen] set shadow color green component - * @param {Integer} [config.shadowBlue] set shadow color blue component - * @param {Integer} [config.shadowAlpha] set shadow color alpha component - * @param {Number} [config.shadowBlur] - * @param {Object} [config.shadowOffset] object with x and y component - * @param {Number} [config.shadowOffsetX] - * @param {Number} [config.shadowOffsetY] - * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number - * between 0 and 1 - * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true - * @param {Array} [config.dash] + * @param {String} [config.fill] fill color + * @param {Integer} [config.fillRed] set fill red component + * @param {Integer} [config.fillGreen] set fill green component + * @param {Integer} [config.fillBlue] set fill blue component + * @param {Integer} [config.fillAlpha] set fill alpha component + * @param {Image} [config.fillPatternImage] fill pattern image + * @param {Number} [config.fillPatternX] + * @param {Number} [config.fillPatternY] + * @param {Object} [config.fillPatternOffset] object with x and y component + * @param {Number} [config.fillPatternOffsetX] + * @param {Number} [config.fillPatternOffsetY] + * @param {Object} [config.fillPatternScale] object with x and y component + * @param {Number} [config.fillPatternScaleX] + * @param {Number} [config.fillPatternScaleY] + * @param {Number} [config.fillPatternRotation] + * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" + * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component + * @param {Number} [config.fillLinearGradientStartPointX] + * @param {Number} [config.fillLinearGradientStartPointY] + * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component + * @param {Number} [config.fillLinearGradientEndPointX] + * @param {Number} [config.fillLinearGradientEndPointY] + * @param {Array} [config.fillLinearGradientColorStops] array of color stops + * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component + * @param {Number} [config.fillRadialGradientStartPointX] + * @param {Number} [config.fillRadialGradientStartPointY] + * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component + * @param {Number} [config.fillRadialGradientEndPointX] + * @param {Number} [config.fillRadialGradientEndPointY] + * @param {Number} [config.fillRadialGradientStartRadius] + * @param {Number} [config.fillRadialGradientEndRadius] + * @param {Array} [config.fillRadialGradientColorStops] array of color stops + * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true + * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration + * @param {String} [config.stroke] stroke color + * @param {Integer} [config.strokeRed] set stroke red component + * @param {Integer} [config.strokeGreen] set stroke green component + * @param {Integer} [config.strokeBlue] set stroke blue component + * @param {Integer} [config.strokeAlpha] set stroke alpha component + * @param {Number} [config.strokeWidth] stroke width + * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true + * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true + * @param {String} [config.lineJoin] can be miter, round, or bevel. The default + * is miter + * @param {String} [config.lineCap] can be butt, round, or sqare. The default + * is butt + * @param {String} [config.shadowColor] + * @param {Integer} [config.shadowRed] set shadow color red component + * @param {Integer} [config.shadowGreen] set shadow color green component + * @param {Integer} [config.shadowBlue] set shadow color blue component + * @param {Integer} [config.shadowAlpha] set shadow color alpha component + * @param {Number} [config.shadowBlur] + * @param {Object} [config.shadowOffset] object with x and y component + * @param {Number} [config.shadowOffsetX] + * @param {Number} [config.shadowOffsetY] + * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number + * between 0 and 1 + * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true + * @param {Array} [config.dash] * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] + * @param {Number} [config.x] + * @param {Number} [config.y] + * @param {Number} [config.width] + * @param {Number} [config.height] + * @param {Boolean} [config.visible] + * @param {Boolean} [config.listening] whether or not the node is listening for events + * @param {String} [config.id] unique id + * @param {String} [config.name] non-unique name + * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 + * @param {Object} [config.scale] set scale + * @param {Number} [config.scaleX] set scale x + * @param {Number} [config.scaleY] set scale y + * @param {Number} [config.rotation] rotation in degrees + * @param {Object} [config.offset] offset from center point and rotation point + * @param {Number} [config.offsetX] set offset x + * @param {Number} [config.offsetY] set offset y + * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop + * the entire stage by dragging any portion of the stage + * @param {Number} [config.dragDistance] * @param {Function} [config.dragBoundFunc] * @example * // create circle - * var circle = new Kinetic.Circle({ + * var circle = new Konva.Circle({ * radius: 40, * fill: 'red', * stroke: 'black' * strokeWidth: 5 * }); */ - Kinetic.Circle = function(config) { + Konva.Circle = function(config) { this.___init(config); }; - Kinetic.Circle.prototype = { + Konva.Circle.prototype = { ___init: function(config) { // call super constructor - Kinetic.Shape.call(this, config); + Konva.Shape.call(this, config); this.className = CIRCLE; this.sceneFunc(this._sceneFunc); }, @@ -10775,14 +10784,14 @@ var Kinetic = {}; }, // implements Shape.prototype.setWidth() setWidth: function(width) { - Kinetic.Node.prototype.setWidth.call(this, width); + Konva.Node.prototype.setWidth.call(this, width); if (this.radius() !== width / 2) { this.setRadius(width / 2); } }, // implements Shape.prototype.setHeight() setHeight: function(height) { - Kinetic.Node.prototype.setHeight.call(this, height); + Konva.Node.prototype.setHeight.call(this, height); if (this.radius() !== height / 2) { this.setRadius(height / 2); } @@ -10793,17 +10802,17 @@ var Kinetic = {}; this.setHeight(val * 2); } }; - Kinetic.Util.extend(Kinetic.Circle, Kinetic.Shape); + Konva.Util.extend(Konva.Circle, Konva.Shape); // add getters setters - Kinetic.Factory.addGetter(Kinetic.Circle, 'radius', 0); - Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Circle, 'radius'); + Konva.Factory.addGetter(Konva.Circle, 'radius', 0); + Konva.Factory.addOverloadedGetterSetter(Konva.Circle, 'radius'); /** * get/set radius * @name radius * @method - * @memberof Kinetic.Circle.prototype + * @memberof Konva.Circle.prototype * @param {Number} radius * @returns {Number} * @example @@ -10814,7 +10823,7 @@ var Kinetic = {}; * circle.radius(10); */ - Kinetic.Collection.mapMethods(Kinetic.Circle); + Konva.Collection.mapMethods(Konva.Circle); })(); ;(function() { // the 0.0001 offset fixes a bug in Chrome 27 @@ -10824,13 +10833,13 @@ var Kinetic = {}; /** * Ellipse constructor * @constructor - * @augments Kinetic.Shape + * @augments Konva.Shape * @param {Object} config * @param {Object} config.radius defines x and y radius * @@ShapeParams * @@NodeParams * @example - * var ellipse = new Kinetic.Ellipse({ + * var ellipse = new Konva.Ellipse({ * radius : { * x : 50, * y : 50 @@ -10838,14 +10847,14 @@ var Kinetic = {}; * fill: 'red' * }); */ - Kinetic.Ellipse = function(config) { + Konva.Ellipse = function(config) { this.___init(config); }; - Kinetic.Ellipse.prototype = { + Konva.Ellipse.prototype = { ___init: function(config) { // call super constructor - Kinetic.Shape.call(this, config); + Konva.Shape.call(this, config); this.className = ELLIPSE; this.sceneFunc(this._sceneFunc); }, @@ -10873,29 +10882,29 @@ var Kinetic = {}; }, // implements Shape.prototype.setWidth() setWidth: function(width) { - Kinetic.Node.prototype.setWidth.call(this, width); + Konva.Node.prototype.setWidth.call(this, width); this.setRadius({ x: width / 2 }); }, // implements Shape.prototype.setHeight() setHeight: function(height) { - Kinetic.Node.prototype.setHeight.call(this, height); + Konva.Node.prototype.setHeight.call(this, height); this.setRadius({ y: height / 2 }); } }; - Kinetic.Util.extend(Kinetic.Ellipse, Kinetic.Shape); + Konva.Util.extend(Konva.Ellipse, Konva.Shape); // add getters setters - Kinetic.Factory.addComponentsGetterSetter(Kinetic.Ellipse, 'radius', ['x', 'y']); + Konva.Factory.addComponentsGetterSetter(Konva.Ellipse, 'radius', ['x', 'y']); /** * get/set radius * @name radius * @method - * @memberof Kinetic.Ellipse.prototype + * @memberof Konva.Ellipse.prototype * @param {Object} radius * @param {Number} radius.x * @param {Number} radius.y @@ -10911,12 +10920,12 @@ var Kinetic = {}; * }); */ - Kinetic.Factory.addGetterSetter(Kinetic.Ellipse, 'radiusX', 0); + Konva.Factory.addGetterSetter(Konva.Ellipse, 'radiusX', 0); /** * get/set radius x * @name radiusX * @method - * @memberof Kinetic.Ellipse.prototype + * @memberof Konva.Ellipse.prototype * @param {Number} x * @returns {Number} * @example @@ -10927,12 +10936,12 @@ var Kinetic = {}; * ellipse.radiusX(200); */ - Kinetic.Factory.addGetterSetter(Kinetic.Ellipse, 'radiusY', 0); + Konva.Factory.addGetterSetter(Konva.Ellipse, 'radiusY', 0); /** * get/set radius y * @name radiusY * @method - * @memberof Kinetic.Ellipse.prototype + * @memberof Konva.Ellipse.prototype * @param {Number} y * @returns {Number} * @example @@ -10943,7 +10952,7 @@ var Kinetic = {}; * ellipse.radiusY(200); */ - Kinetic.Collection.mapMethods(Kinetic.Ellipse); + Konva.Collection.mapMethods(Konva.Ellipse); })();;(function() { // the 0.0001 offset fixes a bug in Chrome 27 @@ -10952,93 +10961,93 @@ var Kinetic = {}; /** * Ring constructor * @constructor - * @augments Kinetic.Shape + * @augments Konva.Shape * @param {Object} config * @param {Number} config.innerRadius * @param {Number} config.outerRadius * @param {Boolean} [config.clockwise] - * @param {String} [config.fill] fill color - * @param {Integer} [config.fillRed] set fill red component - * @param {Integer} [config.fillGreen] set fill green component - * @param {Integer} [config.fillBlue] set fill blue component - * @param {Integer} [config.fillAlpha] set fill alpha component - * @param {Image} [config.fillPatternImage] fill pattern image - * @param {Number} [config.fillPatternX] - * @param {Number} [config.fillPatternY] - * @param {Object} [config.fillPatternOffset] object with x and y component - * @param {Number} [config.fillPatternOffsetX] - * @param {Number} [config.fillPatternOffsetY] - * @param {Object} [config.fillPatternScale] object with x and y component - * @param {Number} [config.fillPatternScaleX] - * @param {Number} [config.fillPatternScaleY] - * @param {Number} [config.fillPatternRotation] - * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" - * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component - * @param {Number} [config.fillLinearGradientStartPointX] - * @param {Number} [config.fillLinearGradientStartPointY] - * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component - * @param {Number} [config.fillLinearGradientEndPointX] - * @param {Number} [config.fillLinearGradientEndPointY] - * @param {Array} [config.fillLinearGradientColorStops] array of color stops - * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component - * @param {Number} [config.fillRadialGradientStartPointX] - * @param {Number} [config.fillRadialGradientStartPointY] - * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component - * @param {Number} [config.fillRadialGradientEndPointX] - * @param {Number} [config.fillRadialGradientEndPointY] - * @param {Number} [config.fillRadialGradientStartRadius] - * @param {Number} [config.fillRadialGradientEndRadius] - * @param {Array} [config.fillRadialGradientColorStops] array of color stops - * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true - * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration - * @param {String} [config.stroke] stroke color - * @param {Integer} [config.strokeRed] set stroke red component - * @param {Integer} [config.strokeGreen] set stroke green component - * @param {Integer} [config.strokeBlue] set stroke blue component - * @param {Integer} [config.strokeAlpha] set stroke alpha component - * @param {Number} [config.strokeWidth] stroke width - * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true - * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true - * @param {String} [config.lineJoin] can be miter, round, or bevel. The default - * is miter - * @param {String} [config.lineCap] can be butt, round, or sqare. The default - * is butt - * @param {String} [config.shadowColor] - * @param {Integer} [config.shadowRed] set shadow color red component - * @param {Integer} [config.shadowGreen] set shadow color green component - * @param {Integer} [config.shadowBlue] set shadow color blue component - * @param {Integer} [config.shadowAlpha] set shadow color alpha component - * @param {Number} [config.shadowBlur] - * @param {Object} [config.shadowOffset] object with x and y component - * @param {Number} [config.shadowOffsetX] - * @param {Number} [config.shadowOffsetY] - * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number - * between 0 and 1 - * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true - * @param {Array} [config.dash] + * @param {String} [config.fill] fill color + * @param {Integer} [config.fillRed] set fill red component + * @param {Integer} [config.fillGreen] set fill green component + * @param {Integer} [config.fillBlue] set fill blue component + * @param {Integer} [config.fillAlpha] set fill alpha component + * @param {Image} [config.fillPatternImage] fill pattern image + * @param {Number} [config.fillPatternX] + * @param {Number} [config.fillPatternY] + * @param {Object} [config.fillPatternOffset] object with x and y component + * @param {Number} [config.fillPatternOffsetX] + * @param {Number} [config.fillPatternOffsetY] + * @param {Object} [config.fillPatternScale] object with x and y component + * @param {Number} [config.fillPatternScaleX] + * @param {Number} [config.fillPatternScaleY] + * @param {Number} [config.fillPatternRotation] + * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" + * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component + * @param {Number} [config.fillLinearGradientStartPointX] + * @param {Number} [config.fillLinearGradientStartPointY] + * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component + * @param {Number} [config.fillLinearGradientEndPointX] + * @param {Number} [config.fillLinearGradientEndPointY] + * @param {Array} [config.fillLinearGradientColorStops] array of color stops + * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component + * @param {Number} [config.fillRadialGradientStartPointX] + * @param {Number} [config.fillRadialGradientStartPointY] + * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component + * @param {Number} [config.fillRadialGradientEndPointX] + * @param {Number} [config.fillRadialGradientEndPointY] + * @param {Number} [config.fillRadialGradientStartRadius] + * @param {Number} [config.fillRadialGradientEndRadius] + * @param {Array} [config.fillRadialGradientColorStops] array of color stops + * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true + * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration + * @param {String} [config.stroke] stroke color + * @param {Integer} [config.strokeRed] set stroke red component + * @param {Integer} [config.strokeGreen] set stroke green component + * @param {Integer} [config.strokeBlue] set stroke blue component + * @param {Integer} [config.strokeAlpha] set stroke alpha component + * @param {Number} [config.strokeWidth] stroke width + * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true + * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true + * @param {String} [config.lineJoin] can be miter, round, or bevel. The default + * is miter + * @param {String} [config.lineCap] can be butt, round, or sqare. The default + * is butt + * @param {String} [config.shadowColor] + * @param {Integer} [config.shadowRed] set shadow color red component + * @param {Integer} [config.shadowGreen] set shadow color green component + * @param {Integer} [config.shadowBlue] set shadow color blue component + * @param {Integer} [config.shadowAlpha] set shadow color alpha component + * @param {Number} [config.shadowBlur] + * @param {Object} [config.shadowOffset] object with x and y component + * @param {Number} [config.shadowOffsetX] + * @param {Number} [config.shadowOffsetY] + * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number + * between 0 and 1 + * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true + * @param {Array} [config.dash] * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] + * @param {Number} [config.x] + * @param {Number} [config.y] + * @param {Number} [config.width] + * @param {Number} [config.height] + * @param {Boolean} [config.visible] + * @param {Boolean} [config.listening] whether or not the node is listening for events + * @param {String} [config.id] unique id + * @param {String} [config.name] non-unique name + * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 + * @param {Object} [config.scale] set scale + * @param {Number} [config.scaleX] set scale x + * @param {Number} [config.scaleY] set scale y + * @param {Number} [config.rotation] rotation in degrees + * @param {Object} [config.offset] offset from center point and rotation point + * @param {Number} [config.offsetX] set offset x + * @param {Number} [config.offsetY] set offset y + * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop + * the entire stage by dragging any portion of the stage + * @param {Number} [config.dragDistance] * @param {Function} [config.dragBoundFunc] * @example - * var ring = new Kinetic.Ring({ + * var ring = new Konva.Ring({ * innerRadius: 40, * outerRadius: 80, * fill: 'red', @@ -11046,14 +11055,14 @@ var Kinetic = {}; * strokeWidth: 5 * }); */ - Kinetic.Ring = function(config) { + Konva.Ring = function(config) { this.___init(config); }; - Kinetic.Ring.prototype = { + Konva.Ring.prototype = { ___init: function(config) { // call super constructor - Kinetic.Shape.call(this, config); + Konva.Shape.call(this, config); this.className = 'Ring'; this.sceneFunc(this._sceneFunc); }, @@ -11075,14 +11084,14 @@ var Kinetic = {}; }, // implements Shape.prototype.setWidth() setWidth: function(width) { - Kinetic.Node.prototype.setWidth.call(this, width); + Konva.Node.prototype.setWidth.call(this, width); if (this.outerRadius() !== width / 2) { this.setOuterRadius(width / 2); } }, // implements Shape.prototype.setHeight() setHeight: function(height) { - Kinetic.Node.prototype.setHeight.call(this, height); + Konva.Node.prototype.setHeight.call(this, height); if (this.outerRadius() !== height / 2) { this.setOuterRadius(height / 2); } @@ -11093,16 +11102,16 @@ var Kinetic = {}; this.setHeight(val * 2); } }; - Kinetic.Util.extend(Kinetic.Ring, Kinetic.Shape); + Konva.Util.extend(Konva.Ring, Konva.Shape); // add getters setters - Kinetic.Factory.addGetterSetter(Kinetic.Ring, 'innerRadius', 0); + Konva.Factory.addGetterSetter(Konva.Ring, 'innerRadius', 0); /** * get/set innerRadius * @name innerRadius * @method - * @memberof Kinetic.Ring.prototype + * @memberof Konva.Ring.prototype * @param {Number} innerRadius * @returns {Number} * @example @@ -11113,14 +11122,14 @@ var Kinetic = {}; * ring.innerRadius(20); */ - Kinetic.Factory.addGetter(Kinetic.Ring, 'outerRadius', 0); - Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Ring, 'outerRadius'); + Konva.Factory.addGetter(Konva.Ring, 'outerRadius', 0); + Konva.Factory.addOverloadedGetterSetter(Konva.Ring, 'outerRadius'); /** * get/set outerRadius * @name outerRadius * @method - * @memberof Kinetic.Ring.prototype + * @memberof Konva.Ring.prototype * @param {Number} outerRadius * @returns {Number} * @example @@ -11131,100 +11140,100 @@ var Kinetic = {}; * ring.outerRadius(20); */ - Kinetic.Collection.mapMethods(Kinetic.Ring); + Konva.Collection.mapMethods(Konva.Ring); })(); ;(function() { /** * Wedge constructor * @constructor - * @augments Kinetic.Shape + * @augments Konva.Shape * @param {Object} config * @param {Number} config.angle in degrees * @param {Number} config.radius * @param {Boolean} [config.clockwise] - * @param {String} [config.fill] fill color - * @param {Integer} [config.fillRed] set fill red component - * @param {Integer} [config.fillGreen] set fill green component - * @param {Integer} [config.fillBlue] set fill blue component - * @param {Integer} [config.fillAlpha] set fill alpha component - * @param {Image} [config.fillPatternImage] fill pattern image - * @param {Number} [config.fillPatternX] - * @param {Number} [config.fillPatternY] - * @param {Object} [config.fillPatternOffset] object with x and y component - * @param {Number} [config.fillPatternOffsetX] - * @param {Number} [config.fillPatternOffsetY] - * @param {Object} [config.fillPatternScale] object with x and y component - * @param {Number} [config.fillPatternScaleX] - * @param {Number} [config.fillPatternScaleY] - * @param {Number} [config.fillPatternRotation] - * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" - * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component - * @param {Number} [config.fillLinearGradientStartPointX] - * @param {Number} [config.fillLinearGradientStartPointY] - * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component - * @param {Number} [config.fillLinearGradientEndPointX] - * @param {Number} [config.fillLinearGradientEndPointY] - * @param {Array} [config.fillLinearGradientColorStops] array of color stops - * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component - * @param {Number} [config.fillRadialGradientStartPointX] - * @param {Number} [config.fillRadialGradientStartPointY] - * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component - * @param {Number} [config.fillRadialGradientEndPointX] - * @param {Number} [config.fillRadialGradientEndPointY] - * @param {Number} [config.fillRadialGradientStartRadius] - * @param {Number} [config.fillRadialGradientEndRadius] - * @param {Array} [config.fillRadialGradientColorStops] array of color stops - * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true - * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration - * @param {String} [config.stroke] stroke color - * @param {Integer} [config.strokeRed] set stroke red component - * @param {Integer} [config.strokeGreen] set stroke green component - * @param {Integer} [config.strokeBlue] set stroke blue component - * @param {Integer} [config.strokeAlpha] set stroke alpha component - * @param {Number} [config.strokeWidth] stroke width - * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true - * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true - * @param {String} [config.lineJoin] can be miter, round, or bevel. The default - * is miter - * @param {String} [config.lineCap] can be butt, round, or sqare. The default - * is butt - * @param {String} [config.shadowColor] - * @param {Integer} [config.shadowRed] set shadow color red component - * @param {Integer} [config.shadowGreen] set shadow color green component - * @param {Integer} [config.shadowBlue] set shadow color blue component - * @param {Integer} [config.shadowAlpha] set shadow color alpha component - * @param {Number} [config.shadowBlur] - * @param {Object} [config.shadowOffset] object with x and y component - * @param {Number} [config.shadowOffsetX] - * @param {Number} [config.shadowOffsetY] - * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number - * between 0 and 1 - * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true - * @param {Array} [config.dash] + * @param {String} [config.fill] fill color + * @param {Integer} [config.fillRed] set fill red component + * @param {Integer} [config.fillGreen] set fill green component + * @param {Integer} [config.fillBlue] set fill blue component + * @param {Integer} [config.fillAlpha] set fill alpha component + * @param {Image} [config.fillPatternImage] fill pattern image + * @param {Number} [config.fillPatternX] + * @param {Number} [config.fillPatternY] + * @param {Object} [config.fillPatternOffset] object with x and y component + * @param {Number} [config.fillPatternOffsetX] + * @param {Number} [config.fillPatternOffsetY] + * @param {Object} [config.fillPatternScale] object with x and y component + * @param {Number} [config.fillPatternScaleX] + * @param {Number} [config.fillPatternScaleY] + * @param {Number} [config.fillPatternRotation] + * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" + * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component + * @param {Number} [config.fillLinearGradientStartPointX] + * @param {Number} [config.fillLinearGradientStartPointY] + * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component + * @param {Number} [config.fillLinearGradientEndPointX] + * @param {Number} [config.fillLinearGradientEndPointY] + * @param {Array} [config.fillLinearGradientColorStops] array of color stops + * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component + * @param {Number} [config.fillRadialGradientStartPointX] + * @param {Number} [config.fillRadialGradientStartPointY] + * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component + * @param {Number} [config.fillRadialGradientEndPointX] + * @param {Number} [config.fillRadialGradientEndPointY] + * @param {Number} [config.fillRadialGradientStartRadius] + * @param {Number} [config.fillRadialGradientEndRadius] + * @param {Array} [config.fillRadialGradientColorStops] array of color stops + * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true + * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration + * @param {String} [config.stroke] stroke color + * @param {Integer} [config.strokeRed] set stroke red component + * @param {Integer} [config.strokeGreen] set stroke green component + * @param {Integer} [config.strokeBlue] set stroke blue component + * @param {Integer} [config.strokeAlpha] set stroke alpha component + * @param {Number} [config.strokeWidth] stroke width + * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true + * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true + * @param {String} [config.lineJoin] can be miter, round, or bevel. The default + * is miter + * @param {String} [config.lineCap] can be butt, round, or sqare. The default + * is butt + * @param {String} [config.shadowColor] + * @param {Integer} [config.shadowRed] set shadow color red component + * @param {Integer} [config.shadowGreen] set shadow color green component + * @param {Integer} [config.shadowBlue] set shadow color blue component + * @param {Integer} [config.shadowAlpha] set shadow color alpha component + * @param {Number} [config.shadowBlur] + * @param {Object} [config.shadowOffset] object with x and y component + * @param {Number} [config.shadowOffsetX] + * @param {Number} [config.shadowOffsetY] + * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number + * between 0 and 1 + * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true + * @param {Array} [config.dash] * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] + * @param {Number} [config.x] + * @param {Number} [config.y] + * @param {Number} [config.width] + * @param {Number} [config.height] + * @param {Boolean} [config.visible] + * @param {Boolean} [config.listening] whether or not the node is listening for events + * @param {String} [config.id] unique id + * @param {String} [config.name] non-unique name + * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 + * @param {Object} [config.scale] set scale + * @param {Number} [config.scaleX] set scale x + * @param {Number} [config.scaleY] set scale y + * @param {Number} [config.rotation] rotation in degrees + * @param {Object} [config.offset] offset from center point and rotation point + * @param {Number} [config.offsetX] set offset x + * @param {Number} [config.offsetY] set offset y + * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop + * the entire stage by dragging any portion of the stage + * @param {Number} [config.dragDistance] * @param {Function} [config.dragBoundFunc] * @example * // draw a wedge that's pointing downwards - * var wedge = new Kinetic.Wedge({ + * var wedge = new Konva.Wedge({ * radius: 40, * fill: 'red', * stroke: 'black' @@ -11233,35 +11242,35 @@ var Kinetic = {}; * rotationDeg: -120 * }); */ - Kinetic.Wedge = function(config) { + Konva.Wedge = function(config) { this.___init(config); }; - Kinetic.Wedge.prototype = { + Konva.Wedge.prototype = { ___init: function(config) { // call super constructor - Kinetic.Shape.call(this, config); + Konva.Shape.call(this, config); this.className = 'Wedge'; this.sceneFunc(this._sceneFunc); }, _sceneFunc: function(context) { context.beginPath(); - context.arc(0, 0, this.getRadius(), 0, Kinetic.getAngle(this.getAngle()), this.getClockwise()); + context.arc(0, 0, this.getRadius(), 0, Konva.getAngle(this.getAngle()), this.getClockwise()); context.lineTo(0, 0); context.closePath(); context.fillStrokeShape(this); } }; - Kinetic.Util.extend(Kinetic.Wedge, Kinetic.Shape); + Konva.Util.extend(Konva.Wedge, Konva.Shape); // add getters setters - Kinetic.Factory.addGetterSetter(Kinetic.Wedge, 'radius', 0); + Konva.Factory.addGetterSetter(Konva.Wedge, 'radius', 0); /** * get/set radius * @name radius * @method - * @memberof Kinetic.Wedge.prototype + * @memberof Konva.Wedge.prototype * @param {Number} radius * @returns {Number} * @example @@ -11272,13 +11281,13 @@ var Kinetic = {}; * wedge.radius(10); */ - Kinetic.Factory.addGetterSetter(Kinetic.Wedge, 'angle', 0); + Konva.Factory.addGetterSetter(Konva.Wedge, 'angle', 0); /** * get/set angle in degrees * @name angle * @method - * @memberof Kinetic.Wedge.prototype + * @memberof Konva.Wedge.prototype * @param {Number} angle * @returns {Number} * @example @@ -11289,13 +11298,13 @@ var Kinetic = {}; * wedge.angle(20); */ - Kinetic.Factory.addGetterSetter(Kinetic.Wedge, 'clockwise', false); + Konva.Factory.addGetterSetter(Konva.Wedge, 'clockwise', false); /** * get/set clockwise flag * @name clockwise * @method - * @memberof Kinetic.Wedge.prototype + * @memberof Konva.Wedge.prototype * @param {Number} clockwise * @returns {Number} * @example @@ -11309,107 +11318,107 @@ var Kinetic = {}; * wedge.clockwise(true); */ - Kinetic.Factory.backCompat(Kinetic.Wedge, { + Konva.Factory.backCompat(Konva.Wedge, { angleDeg: 'angle', getAngleDeg: 'getAngle', setAngleDeg: 'setAngle' }); - Kinetic.Collection.mapMethods(Kinetic.Wedge); + Konva.Collection.mapMethods(Konva.Wedge); })(); ;(function() { /** * Arc constructor * @constructor - * @augments Kinetic.Shape + * @augments Konva.Shape * @param {Object} config * @param {Number} config.angle in degrees * @param {Number} config.innerRadius * @param {Number} config.outerRadius * @param {Boolean} [config.clockwise] - * @param {String} [config.fill] fill color - * @param {Integer} [config.fillRed] set fill red component - * @param {Integer} [config.fillGreen] set fill green component - * @param {Integer} [config.fillBlue] set fill blue component - * @param {Integer} [config.fillAlpha] set fill alpha component - * @param {Image} [config.fillPatternImage] fill pattern image - * @param {Number} [config.fillPatternX] - * @param {Number} [config.fillPatternY] - * @param {Object} [config.fillPatternOffset] object with x and y component - * @param {Number} [config.fillPatternOffsetX] - * @param {Number} [config.fillPatternOffsetY] - * @param {Object} [config.fillPatternScale] object with x and y component - * @param {Number} [config.fillPatternScaleX] - * @param {Number} [config.fillPatternScaleY] - * @param {Number} [config.fillPatternRotation] - * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" - * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component - * @param {Number} [config.fillLinearGradientStartPointX] - * @param {Number} [config.fillLinearGradientStartPointY] - * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component - * @param {Number} [config.fillLinearGradientEndPointX] - * @param {Number} [config.fillLinearGradientEndPointY] - * @param {Array} [config.fillLinearGradientColorStops] array of color stops - * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component - * @param {Number} [config.fillRadialGradientStartPointX] - * @param {Number} [config.fillRadialGradientStartPointY] - * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component - * @param {Number} [config.fillRadialGradientEndPointX] - * @param {Number} [config.fillRadialGradientEndPointY] - * @param {Number} [config.fillRadialGradientStartRadius] - * @param {Number} [config.fillRadialGradientEndRadius] - * @param {Array} [config.fillRadialGradientColorStops] array of color stops - * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true - * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration - * @param {String} [config.stroke] stroke color - * @param {Integer} [config.strokeRed] set stroke red component - * @param {Integer} [config.strokeGreen] set stroke green component - * @param {Integer} [config.strokeBlue] set stroke blue component - * @param {Integer} [config.strokeAlpha] set stroke alpha component - * @param {Number} [config.strokeWidth] stroke width - * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true - * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true - * @param {String} [config.lineJoin] can be miter, round, or bevel. The default - * is miter - * @param {String} [config.lineCap] can be butt, round, or sqare. The default - * is butt - * @param {String} [config.shadowColor] - * @param {Integer} [config.shadowRed] set shadow color red component - * @param {Integer} [config.shadowGreen] set shadow color green component - * @param {Integer} [config.shadowBlue] set shadow color blue component - * @param {Integer} [config.shadowAlpha] set shadow color alpha component - * @param {Number} [config.shadowBlur] - * @param {Object} [config.shadowOffset] object with x and y component - * @param {Number} [config.shadowOffsetX] - * @param {Number} [config.shadowOffsetY] - * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number - * between 0 and 1 - * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true - * @param {Array} [config.dash] + * @param {String} [config.fill] fill color + * @param {Integer} [config.fillRed] set fill red component + * @param {Integer} [config.fillGreen] set fill green component + * @param {Integer} [config.fillBlue] set fill blue component + * @param {Integer} [config.fillAlpha] set fill alpha component + * @param {Image} [config.fillPatternImage] fill pattern image + * @param {Number} [config.fillPatternX] + * @param {Number} [config.fillPatternY] + * @param {Object} [config.fillPatternOffset] object with x and y component + * @param {Number} [config.fillPatternOffsetX] + * @param {Number} [config.fillPatternOffsetY] + * @param {Object} [config.fillPatternScale] object with x and y component + * @param {Number} [config.fillPatternScaleX] + * @param {Number} [config.fillPatternScaleY] + * @param {Number} [config.fillPatternRotation] + * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" + * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component + * @param {Number} [config.fillLinearGradientStartPointX] + * @param {Number} [config.fillLinearGradientStartPointY] + * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component + * @param {Number} [config.fillLinearGradientEndPointX] + * @param {Number} [config.fillLinearGradientEndPointY] + * @param {Array} [config.fillLinearGradientColorStops] array of color stops + * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component + * @param {Number} [config.fillRadialGradientStartPointX] + * @param {Number} [config.fillRadialGradientStartPointY] + * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component + * @param {Number} [config.fillRadialGradientEndPointX] + * @param {Number} [config.fillRadialGradientEndPointY] + * @param {Number} [config.fillRadialGradientStartRadius] + * @param {Number} [config.fillRadialGradientEndRadius] + * @param {Array} [config.fillRadialGradientColorStops] array of color stops + * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true + * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration + * @param {String} [config.stroke] stroke color + * @param {Integer} [config.strokeRed] set stroke red component + * @param {Integer} [config.strokeGreen] set stroke green component + * @param {Integer} [config.strokeBlue] set stroke blue component + * @param {Integer} [config.strokeAlpha] set stroke alpha component + * @param {Number} [config.strokeWidth] stroke width + * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true + * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true + * @param {String} [config.lineJoin] can be miter, round, or bevel. The default + * is miter + * @param {String} [config.lineCap] can be butt, round, or sqare. The default + * is butt + * @param {String} [config.shadowColor] + * @param {Integer} [config.shadowRed] set shadow color red component + * @param {Integer} [config.shadowGreen] set shadow color green component + * @param {Integer} [config.shadowBlue] set shadow color blue component + * @param {Integer} [config.shadowAlpha] set shadow color alpha component + * @param {Number} [config.shadowBlur] + * @param {Object} [config.shadowOffset] object with x and y component + * @param {Number} [config.shadowOffsetX] + * @param {Number} [config.shadowOffsetY] + * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number + * between 0 and 1 + * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true + * @param {Array} [config.dash] * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] + * @param {Number} [config.x] + * @param {Number} [config.y] + * @param {Number} [config.width] + * @param {Number} [config.height] + * @param {Boolean} [config.visible] + * @param {Boolean} [config.listening] whether or not the node is listening for events + * @param {String} [config.id] unique id + * @param {String} [config.name] non-unique name + * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 + * @param {Object} [config.scale] set scale + * @param {Number} [config.scaleX] set scale x + * @param {Number} [config.scaleY] set scale y + * @param {Number} [config.rotation] rotation in degrees + * @param {Object} [config.offset] offset from center point and rotation point + * @param {Number} [config.offsetX] set offset x + * @param {Number} [config.offsetY] set offset y + * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop + * the entire stage by dragging any portion of the stage + * @param {Number} [config.dragDistance] * @param {Function} [config.dragBoundFunc] * @example * // draw a Arc that's pointing downwards - * var arc = new Kinetic.Arc({ + * var arc = new Konva.Arc({ * innerRadius: 40, * outerRadius: 80, * fill: 'red', @@ -11419,19 +11428,19 @@ var Kinetic = {}; * rotationDeg: -120 * }); */ - Kinetic.Arc = function(config) { + Konva.Arc = function(config) { this.___init(config); }; - Kinetic.Arc.prototype = { + Konva.Arc.prototype = { ___init: function(config) { // call super constructor - Kinetic.Shape.call(this, config); + Konva.Shape.call(this, config); this.className = 'Arc'; this.sceneFunc(this._sceneFunc); }, _sceneFunc: function(context) { - var angle = Kinetic.getAngle(this.angle()), + var angle = Konva.getAngle(this.angle()), clockwise = this.clockwise(); context.beginPath(); @@ -11441,16 +11450,16 @@ var Kinetic = {}; context.fillStrokeShape(this); } }; - Kinetic.Util.extend(Kinetic.Arc, Kinetic.Shape); + Konva.Util.extend(Konva.Arc, Konva.Shape); // add getters setters - Kinetic.Factory.addGetterSetter(Kinetic.Arc, 'innerRadius', 0); + Konva.Factory.addGetterSetter(Konva.Arc, 'innerRadius', 0); /** * get/set innerRadius * @name innerRadius * @method - * @memberof Kinetic.Arc.prototype + * @memberof Konva.Arc.prototype * @param {Number} innerRadius * @returns {Number} * @example @@ -11461,13 +11470,13 @@ var Kinetic = {}; * arc.innerRadius(20); */ - Kinetic.Factory.addGetterSetter(Kinetic.Arc, 'outerRadius', 0); + Konva.Factory.addGetterSetter(Konva.Arc, 'outerRadius', 0); /** * get/set outerRadius * @name outerRadius * @method - * @memberof Kinetic.Arc.prototype + * @memberof Konva.Arc.prototype * @param {Number} outerRadius * @returns {Number} * @example @@ -11478,13 +11487,13 @@ var Kinetic = {}; * arc.outerRadius(20); */ - Kinetic.Factory.addGetterSetter(Kinetic.Arc, 'angle', 0); + Konva.Factory.addGetterSetter(Konva.Arc, 'angle', 0); /** * get/set angle in degrees * @name angle * @method - * @memberof Kinetic.Arc.prototype + * @memberof Konva.Arc.prototype * @param {Number} angle * @returns {Number} * @example @@ -11495,13 +11504,13 @@ var Kinetic = {}; * arc.angle(20); */ - Kinetic.Factory.addGetterSetter(Kinetic.Arc, 'clockwise', false); + Konva.Factory.addGetterSetter(Konva.Arc, 'clockwise', false); /** * get/set clockwise flag * @name clockwise * @method - * @memberof Kinetic.Arc.prototype + * @memberof Konva.Arc.prototype * @param {Boolean} clockwise * @returns {Boolean} * @example @@ -11515,7 +11524,7 @@ var Kinetic = {}; * arc.clockwise(true); */ - Kinetic.Collection.mapMethods(Kinetic.Arc); + Konva.Collection.mapMethods(Konva.Arc); })(); ;(function() { @@ -11525,95 +11534,95 @@ var Kinetic = {}; /** * Image constructor * @constructor - * @memberof Kinetic - * @augments Kinetic.Shape + * @memberof Konva + * @augments Konva.Shape * @param {Object} config * @param {Image} config.image * @param {Object} [config.crop] - * @param {String} [config.fill] fill color - * @param {Integer} [config.fillRed] set fill red component - * @param {Integer} [config.fillGreen] set fill green component - * @param {Integer} [config.fillBlue] set fill blue component - * @param {Integer} [config.fillAlpha] set fill alpha component - * @param {Image} [config.fillPatternImage] fill pattern image - * @param {Number} [config.fillPatternX] - * @param {Number} [config.fillPatternY] - * @param {Object} [config.fillPatternOffset] object with x and y component - * @param {Number} [config.fillPatternOffsetX] - * @param {Number} [config.fillPatternOffsetY] - * @param {Object} [config.fillPatternScale] object with x and y component - * @param {Number} [config.fillPatternScaleX] - * @param {Number} [config.fillPatternScaleY] - * @param {Number} [config.fillPatternRotation] - * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" - * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component - * @param {Number} [config.fillLinearGradientStartPointX] - * @param {Number} [config.fillLinearGradientStartPointY] - * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component - * @param {Number} [config.fillLinearGradientEndPointX] - * @param {Number} [config.fillLinearGradientEndPointY] - * @param {Array} [config.fillLinearGradientColorStops] array of color stops - * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component - * @param {Number} [config.fillRadialGradientStartPointX] - * @param {Number} [config.fillRadialGradientStartPointY] - * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component - * @param {Number} [config.fillRadialGradientEndPointX] - * @param {Number} [config.fillRadialGradientEndPointY] - * @param {Number} [config.fillRadialGradientStartRadius] - * @param {Number} [config.fillRadialGradientEndRadius] - * @param {Array} [config.fillRadialGradientColorStops] array of color stops - * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true - * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration - * @param {String} [config.stroke] stroke color - * @param {Integer} [config.strokeRed] set stroke red component - * @param {Integer} [config.strokeGreen] set stroke green component - * @param {Integer} [config.strokeBlue] set stroke blue component - * @param {Integer} [config.strokeAlpha] set stroke alpha component - * @param {Number} [config.strokeWidth] stroke width - * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true - * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true - * @param {String} [config.lineJoin] can be miter, round, or bevel. The default - * is miter - * @param {String} [config.lineCap] can be butt, round, or sqare. The default - * is butt - * @param {String} [config.shadowColor] - * @param {Integer} [config.shadowRed] set shadow color red component - * @param {Integer} [config.shadowGreen] set shadow color green component - * @param {Integer} [config.shadowBlue] set shadow color blue component - * @param {Integer} [config.shadowAlpha] set shadow color alpha component - * @param {Number} [config.shadowBlur] - * @param {Object} [config.shadowOffset] object with x and y component - * @param {Number} [config.shadowOffsetX] - * @param {Number} [config.shadowOffsetY] - * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number - * between 0 and 1 - * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true - * @param {Array} [config.dash] + * @param {String} [config.fill] fill color + * @param {Integer} [config.fillRed] set fill red component + * @param {Integer} [config.fillGreen] set fill green component + * @param {Integer} [config.fillBlue] set fill blue component + * @param {Integer} [config.fillAlpha] set fill alpha component + * @param {Image} [config.fillPatternImage] fill pattern image + * @param {Number} [config.fillPatternX] + * @param {Number} [config.fillPatternY] + * @param {Object} [config.fillPatternOffset] object with x and y component + * @param {Number} [config.fillPatternOffsetX] + * @param {Number} [config.fillPatternOffsetY] + * @param {Object} [config.fillPatternScale] object with x and y component + * @param {Number} [config.fillPatternScaleX] + * @param {Number} [config.fillPatternScaleY] + * @param {Number} [config.fillPatternRotation] + * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" + * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component + * @param {Number} [config.fillLinearGradientStartPointX] + * @param {Number} [config.fillLinearGradientStartPointY] + * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component + * @param {Number} [config.fillLinearGradientEndPointX] + * @param {Number} [config.fillLinearGradientEndPointY] + * @param {Array} [config.fillLinearGradientColorStops] array of color stops + * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component + * @param {Number} [config.fillRadialGradientStartPointX] + * @param {Number} [config.fillRadialGradientStartPointY] + * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component + * @param {Number} [config.fillRadialGradientEndPointX] + * @param {Number} [config.fillRadialGradientEndPointY] + * @param {Number} [config.fillRadialGradientStartRadius] + * @param {Number} [config.fillRadialGradientEndRadius] + * @param {Array} [config.fillRadialGradientColorStops] array of color stops + * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true + * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration + * @param {String} [config.stroke] stroke color + * @param {Integer} [config.strokeRed] set stroke red component + * @param {Integer} [config.strokeGreen] set stroke green component + * @param {Integer} [config.strokeBlue] set stroke blue component + * @param {Integer} [config.strokeAlpha] set stroke alpha component + * @param {Number} [config.strokeWidth] stroke width + * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true + * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true + * @param {String} [config.lineJoin] can be miter, round, or bevel. The default + * is miter + * @param {String} [config.lineCap] can be butt, round, or sqare. The default + * is butt + * @param {String} [config.shadowColor] + * @param {Integer} [config.shadowRed] set shadow color red component + * @param {Integer} [config.shadowGreen] set shadow color green component + * @param {Integer} [config.shadowBlue] set shadow color blue component + * @param {Integer} [config.shadowAlpha] set shadow color alpha component + * @param {Number} [config.shadowBlur] + * @param {Object} [config.shadowOffset] object with x and y component + * @param {Number} [config.shadowOffsetX] + * @param {Number} [config.shadowOffsetY] + * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number + * between 0 and 1 + * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true + * @param {Array} [config.dash] * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] + * @param {Number} [config.x] + * @param {Number} [config.y] + * @param {Number} [config.width] + * @param {Number} [config.height] + * @param {Boolean} [config.visible] + * @param {Boolean} [config.listening] whether or not the node is listening for events + * @param {String} [config.id] unique id + * @param {String} [config.name] non-unique name + * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 + * @param {Object} [config.scale] set scale + * @param {Number} [config.scaleX] set scale x + * @param {Number} [config.scaleY] set scale y + * @param {Number} [config.rotation] rotation in degrees + * @param {Object} [config.offset] offset from center point and rotation point + * @param {Number} [config.offsetX] set offset x + * @param {Number} [config.offsetY] set offset y + * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop + * the entire stage by dragging any portion of the stage + * @param {Number} [config.dragDistance] * @param {Function} [config.dragBoundFunc] * @example * var imageObj = new Image(); * imageObj.onload = function() { - * var image = new Kinetic.Image({ + * var image = new Konva.Image({ * x: 200, * y: 50, * image: imageObj, @@ -11623,14 +11632,14 @@ var Kinetic = {}; * }; * imageObj.src = '/path/to/image.jpg' */ - Kinetic.Image = function(config) { + Konva.Image = function(config) { this.___init(config); }; - Kinetic.Image.prototype = { + Konva.Image.prototype = { ___init: function(config) { // call super constructor - Kinetic.Shape.call(this, config); + Konva.Shape.call(this, config); this.className = IMAGE; this.sceneFunc(this._sceneFunc); this.hitFunc(this._hitFunc); @@ -11683,16 +11692,16 @@ var Kinetic = {}; return this.attrs.height || (image ? image.height : 0); } }; - Kinetic.Util.extend(Kinetic.Image, Kinetic.Shape); + Konva.Util.extend(Konva.Image, Konva.Shape); // add getters setters - Kinetic.Factory.addGetterSetter(Kinetic.Image, 'image'); + Konva.Factory.addGetterSetter(Konva.Image, 'image'); /** * set image * @name setImage * @method - * @memberof Kinetic.Image.prototype + * @memberof Konva.Image.prototype * @param {Image} image */ @@ -11700,16 +11709,16 @@ var Kinetic = {}; * get image * @name getImage * @method - * @memberof Kinetic.Image.prototype + * @memberof Konva.Image.prototype * @returns {Image} */ - Kinetic.Factory.addComponentsGetterSetter(Kinetic.Image, 'crop', ['x', 'y', 'width', 'height']); + Konva.Factory.addComponentsGetterSetter(Konva.Image, 'crop', ['x', 'y', 'width', 'height']); /** * get/set crop * @method * @name crop - * @memberof Kinetic.Image.prototype + * @memberof Konva.Image.prototype * @param {Object} crop * @param {Number} crop.x * @param {Number} crop.y @@ -11729,12 +11738,12 @@ var Kinetic = {}; * }); */ - Kinetic.Factory.addGetterSetter(Kinetic.Image, 'cropX', 0); + Konva.Factory.addGetterSetter(Konva.Image, 'cropX', 0); /** * get/set crop x * @method * @name cropX - * @memberof Kinetic.Image.prototype + * @memberof Konva.Image.prototype * @param {Number} x * @returns {Number} * @example @@ -11745,12 +11754,12 @@ var Kinetic = {}; * image.cropX(20); */ - Kinetic.Factory.addGetterSetter(Kinetic.Image, 'cropY', 0); + Konva.Factory.addGetterSetter(Konva.Image, 'cropY', 0); /** * get/set crop y * @name cropY * @method - * @memberof Kinetic.Image.prototype + * @memberof Konva.Image.prototype * @param {Number} y * @returns {Number} * @example @@ -11761,12 +11770,12 @@ var Kinetic = {}; * image.cropY(20); */ - Kinetic.Factory.addGetterSetter(Kinetic.Image, 'cropWidth', 0); + Konva.Factory.addGetterSetter(Konva.Image, 'cropWidth', 0); /** * get/set crop width * @name cropWidth * @method - * @memberof Kinetic.Image.prototype + * @memberof Konva.Image.prototype * @param {Number} width * @returns {Number} * @example @@ -11777,12 +11786,12 @@ var Kinetic = {}; * image.cropWidth(20); */ - Kinetic.Factory.addGetterSetter(Kinetic.Image, 'cropHeight', 0); + Konva.Factory.addGetterSetter(Konva.Image, 'cropHeight', 0); /** * get/set crop height * @name cropHeight * @method - * @memberof Kinetic.Image.prototype + * @memberof Konva.Image.prototype * @param {Number} height * @returns {Number} * @example @@ -11793,14 +11802,14 @@ var Kinetic = {}; * image.cropHeight(20); */ - Kinetic.Collection.mapMethods(Kinetic.Image); + Konva.Collection.mapMethods(Konva.Image); })(); ;(function() { // constants var AUTO = 'auto', //CANVAS = 'canvas', CENTER = 'center', - CHANGE_KINETIC = 'Change.kinetic', + CHANGE_KINETIC = 'Change.konva', CONTEXT_2D = '2d', DASH = '-', EMPTY_STRING = '', @@ -11819,13 +11828,13 @@ var Kinetic = {}; // cached variables attrChangeListLen = ATTR_CHANGE_LIST.length, - dummyContext = Kinetic.Util.createCanvasElement().getContext(CONTEXT_2D); + dummyContext = Konva.Util.createCanvasElement().getContext(CONTEXT_2D); /** * Text constructor * @constructor - * @memberof Kinetic - * @augments Kinetic.Shape + * @memberof Konva + * @augments Konva.Shape * @param {Object} config * @param {String} [config.fontFamily] default is Arial * @param {Number} [config.fontSize] in pixels. Default is 12 @@ -11838,88 +11847,88 @@ var Kinetic = {}; * @param {Number} [config.height] default is auto * @param {Number} [config.lineHeight] default is 1 * @param {String} [config.wrap] can be word, char, or none. Default is word - * @param {String} [config.fill] fill color - * @param {Integer} [config.fillRed] set fill red component - * @param {Integer} [config.fillGreen] set fill green component - * @param {Integer} [config.fillBlue] set fill blue component - * @param {Integer} [config.fillAlpha] set fill alpha component - * @param {Image} [config.fillPatternImage] fill pattern image - * @param {Number} [config.fillPatternX] - * @param {Number} [config.fillPatternY] - * @param {Object} [config.fillPatternOffset] object with x and y component - * @param {Number} [config.fillPatternOffsetX] - * @param {Number} [config.fillPatternOffsetY] - * @param {Object} [config.fillPatternScale] object with x and y component - * @param {Number} [config.fillPatternScaleX] - * @param {Number} [config.fillPatternScaleY] - * @param {Number} [config.fillPatternRotation] - * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" - * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component - * @param {Number} [config.fillLinearGradientStartPointX] - * @param {Number} [config.fillLinearGradientStartPointY] - * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component - * @param {Number} [config.fillLinearGradientEndPointX] - * @param {Number} [config.fillLinearGradientEndPointY] - * @param {Array} [config.fillLinearGradientColorStops] array of color stops - * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component - * @param {Number} [config.fillRadialGradientStartPointX] - * @param {Number} [config.fillRadialGradientStartPointY] - * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component - * @param {Number} [config.fillRadialGradientEndPointX] - * @param {Number} [config.fillRadialGradientEndPointY] - * @param {Number} [config.fillRadialGradientStartRadius] - * @param {Number} [config.fillRadialGradientEndRadius] - * @param {Array} [config.fillRadialGradientColorStops] array of color stops - * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true - * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration - * @param {String} [config.stroke] stroke color - * @param {Integer} [config.strokeRed] set stroke red component - * @param {Integer} [config.strokeGreen] set stroke green component - * @param {Integer} [config.strokeBlue] set stroke blue component - * @param {Integer} [config.strokeAlpha] set stroke alpha component - * @param {Number} [config.strokeWidth] stroke width - * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true - * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true - * @param {String} [config.lineJoin] can be miter, round, or bevel. The default - * is miter - * @param {String} [config.lineCap] can be butt, round, or sqare. The default - * is butt - * @param {String} [config.shadowColor] - * @param {Integer} [config.shadowRed] set shadow color red component - * @param {Integer} [config.shadowGreen] set shadow color green component - * @param {Integer} [config.shadowBlue] set shadow color blue component - * @param {Integer} [config.shadowAlpha] set shadow color alpha component - * @param {Number} [config.shadowBlur] - * @param {Object} [config.shadowOffset] object with x and y component - * @param {Number} [config.shadowOffsetX] - * @param {Number} [config.shadowOffsetY] - * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number - * between 0 and 1 - * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true - * @param {Array} [config.dash] + * @param {String} [config.fill] fill color + * @param {Integer} [config.fillRed] set fill red component + * @param {Integer} [config.fillGreen] set fill green component + * @param {Integer} [config.fillBlue] set fill blue component + * @param {Integer} [config.fillAlpha] set fill alpha component + * @param {Image} [config.fillPatternImage] fill pattern image + * @param {Number} [config.fillPatternX] + * @param {Number} [config.fillPatternY] + * @param {Object} [config.fillPatternOffset] object with x and y component + * @param {Number} [config.fillPatternOffsetX] + * @param {Number} [config.fillPatternOffsetY] + * @param {Object} [config.fillPatternScale] object with x and y component + * @param {Number} [config.fillPatternScaleX] + * @param {Number} [config.fillPatternScaleY] + * @param {Number} [config.fillPatternRotation] + * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" + * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component + * @param {Number} [config.fillLinearGradientStartPointX] + * @param {Number} [config.fillLinearGradientStartPointY] + * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component + * @param {Number} [config.fillLinearGradientEndPointX] + * @param {Number} [config.fillLinearGradientEndPointY] + * @param {Array} [config.fillLinearGradientColorStops] array of color stops + * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component + * @param {Number} [config.fillRadialGradientStartPointX] + * @param {Number} [config.fillRadialGradientStartPointY] + * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component + * @param {Number} [config.fillRadialGradientEndPointX] + * @param {Number} [config.fillRadialGradientEndPointY] + * @param {Number} [config.fillRadialGradientStartRadius] + * @param {Number} [config.fillRadialGradientEndRadius] + * @param {Array} [config.fillRadialGradientColorStops] array of color stops + * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true + * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration + * @param {String} [config.stroke] stroke color + * @param {Integer} [config.strokeRed] set stroke red component + * @param {Integer} [config.strokeGreen] set stroke green component + * @param {Integer} [config.strokeBlue] set stroke blue component + * @param {Integer} [config.strokeAlpha] set stroke alpha component + * @param {Number} [config.strokeWidth] stroke width + * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true + * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true + * @param {String} [config.lineJoin] can be miter, round, or bevel. The default + * is miter + * @param {String} [config.lineCap] can be butt, round, or sqare. The default + * is butt + * @param {String} [config.shadowColor] + * @param {Integer} [config.shadowRed] set shadow color red component + * @param {Integer} [config.shadowGreen] set shadow color green component + * @param {Integer} [config.shadowBlue] set shadow color blue component + * @param {Integer} [config.shadowAlpha] set shadow color alpha component + * @param {Number} [config.shadowBlur] + * @param {Object} [config.shadowOffset] object with x and y component + * @param {Number} [config.shadowOffsetX] + * @param {Number} [config.shadowOffsetY] + * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number + * between 0 and 1 + * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true + * @param {Array} [config.dash] * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] + * @param {Number} [config.x] + * @param {Number} [config.y] + * @param {Number} [config.width] + * @param {Number} [config.height] + * @param {Boolean} [config.visible] + * @param {Boolean} [config.listening] whether or not the node is listening for events + * @param {String} [config.id] unique id + * @param {String} [config.name] non-unique name + * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 + * @param {Object} [config.scale] set scale + * @param {Number} [config.scaleX] set scale x + * @param {Number} [config.scaleY] set scale y + * @param {Number} [config.rotation] rotation in degrees + * @param {Object} [config.offset] offset from center point and rotation point + * @param {Number} [config.offsetX] set offset x + * @param {Number} [config.offsetY] set offset y + * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop + * the entire stage by dragging any portion of the stage + * @param {Number} [config.dragDistance] * @param {Function} [config.dragBoundFunc] * @example - * var text = new Kinetic.Text({ + * var text = new Konva.Text({ * x: 10, * y: 15, * text: 'Simple Text', @@ -11928,7 +11937,7 @@ var Kinetic = {}; * fill: 'green' * }); */ - Kinetic.Text = function(config) { + Konva.Text = function(config) { this.___init(config); }; function _fillFunc(context) { @@ -11938,7 +11947,7 @@ var Kinetic = {}; context.strokeText(this.partialText, 0, 0); } - Kinetic.Text.prototype = { + Konva.Text.prototype = { ___init: function(config) { config = config || {}; config.fill = config.fill || 'black'; @@ -11951,7 +11960,7 @@ var Kinetic = {}; } // call super constructor - Kinetic.Shape.call(this, config); + Konva.Shape.call(this, config); this._fillFunc = _fillFunc; this._strokeFunc = _strokeFunc; @@ -12019,14 +12028,14 @@ var Kinetic = {}; context.fillStrokeShape(this); }, setText: function(text) { - var str = Kinetic.Util._isString(text) ? text : text.toString(); + var str = Konva.Util._isString(text) ? text : text.toString(); this._setAttr(TEXT, str); return this; }, /** * get width of text area, which includes padding * @method - * @memberof Kinetic.Text.prototype + * @memberof Konva.Text.prototype * @returns {Number} */ getWidth: function() { @@ -12035,7 +12044,7 @@ var Kinetic = {}; /** * get the height of the text area, which takes into account multi-line text, line heights, and padding * @method - * @memberof Kinetic.Text.prototype + * @memberof Konva.Text.prototype * @returns {Number} */ getHeight: function() { @@ -12044,7 +12053,7 @@ var Kinetic = {}; /** * get text width * @method - * @memberof Kinetic.Text.prototype + * @memberof Konva.Text.prototype * @returns {Number} */ getTextWidth: function() { @@ -12053,7 +12062,7 @@ var Kinetic = {}; /** * get text height * @method - * @memberof Kinetic.Text.prototype + * @memberof Konva.Text.prototype * @returns {Number} */ getTextHeight: function() { @@ -12192,16 +12201,16 @@ var Kinetic = {}; this.textWidth = textWidth; } }; - Kinetic.Util.extend(Kinetic.Text, Kinetic.Shape); + Konva.Util.extend(Konva.Text, Konva.Shape); // add getters setters - Kinetic.Factory.addGetterSetter(Kinetic.Text, 'fontFamily', 'Arial'); + Konva.Factory.addGetterSetter(Konva.Text, 'fontFamily', 'Arial'); /** * get/set font family * @name fontFamily * @method - * @memberof Kinetic.Text.prototype + * @memberof Konva.Text.prototype * @param {String} fontFamily * @returns {String} * @example @@ -12212,13 +12221,13 @@ var Kinetic = {}; * text.fontFamily('Arial'); */ - Kinetic.Factory.addGetterSetter(Kinetic.Text, 'fontSize', 12); + Konva.Factory.addGetterSetter(Konva.Text, 'fontSize', 12); /** * get/set font size in pixels * @name fontSize * @method - * @memberof Kinetic.Text.prototype + * @memberof Konva.Text.prototype * @param {Number} fontSize * @returns {Number} * @example @@ -12229,13 +12238,13 @@ var Kinetic = {}; * text.fontSize(22); */ - Kinetic.Factory.addGetterSetter(Kinetic.Text, 'fontStyle', NORMAL); + Konva.Factory.addGetterSetter(Konva.Text, 'fontStyle', NORMAL); /** * set font style. Can be 'normal', 'italic', or 'bold'. 'normal' is the default. * @name fontStyle * @method - * @memberof Kinetic.Text.prototype + * @memberof Konva.Text.prototype * @param {String} fontStyle * @returns {String} * @example @@ -12246,13 +12255,13 @@ var Kinetic = {}; * text.fontStyle('bold'); */ - Kinetic.Factory.addGetterSetter(Kinetic.Text, 'fontVariant', NORMAL); + Konva.Factory.addGetterSetter(Konva.Text, 'fontVariant', NORMAL); /** * set font variant. Can be 'normal' or 'small-caps'. 'normal' is the default. * @name fontVariant * @method - * @memberof Kinetic.Text.prototype + * @memberof Konva.Text.prototype * @param {String} fontVariant * @returns {String} * @example @@ -12263,13 +12272,13 @@ var Kinetic = {}; * text.fontVariant('small-caps'); */ - Kinetic.Factory.addGetterSetter(Kinetic.Text, 'padding', 0); + Konva.Factory.addGetterSetter(Konva.Text, 'padding', 0); /** * set padding * @name padding * @method - * @memberof Kinetic.Text.prototype + * @memberof Konva.Text.prototype * @param {Number} padding * @returns {Number} * @example @@ -12280,13 +12289,13 @@ var Kinetic = {}; * text.padding(10); */ - Kinetic.Factory.addGetterSetter(Kinetic.Text, 'align', LEFT); + Konva.Factory.addGetterSetter(Konva.Text, 'align', LEFT); /** * get/set horizontal align of text. Can be 'left', 'center', or 'right' * @name align * @method - * @memberof Kinetic.Text.prototype + * @memberof Konva.Text.prototype * @param {String} align * @returns {String} * @example @@ -12300,13 +12309,13 @@ var Kinetic = {}; * text.align('right'); */ - Kinetic.Factory.addGetterSetter(Kinetic.Text, 'lineHeight', 1); + Konva.Factory.addGetterSetter(Konva.Text, 'lineHeight', 1); /** * get/set line height. The default is 1. * @name lineHeight * @method - * @memberof Kinetic.Text.prototype + * @memberof Konva.Text.prototype * @param {Number} lineHeight * @returns {Number} * @example @@ -12317,13 +12326,13 @@ var Kinetic = {}; * text.lineHeight(2); */ - Kinetic.Factory.addGetterSetter(Kinetic.Text, 'wrap', WORD); + Konva.Factory.addGetterSetter(Konva.Text, 'wrap', WORD); /** * get/set wrap. Can be word, char, or none. Default is word. * @name wrap * @method - * @memberof Kinetic.Text.prototype + * @memberof Konva.Text.prototype * @param {String} wrap * @returns {String} * @example @@ -12334,14 +12343,14 @@ var Kinetic = {}; * text.wrap('word'); */ - Kinetic.Factory.addGetter(Kinetic.Text, 'text', EMPTY_STRING); - Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Text, 'text'); + Konva.Factory.addGetter(Konva.Text, 'text', EMPTY_STRING); + Konva.Factory.addOverloadedGetterSetter(Konva.Text, 'text'); /** * get/set text * @name getText * @method - * @memberof Kinetic.Text.prototype + * @memberof Konva.Text.prototype * @param {String} text * @returns {String} * @example @@ -12352,102 +12361,102 @@ var Kinetic = {}; * text.text('Hello world!'); */ - Kinetic.Collection.mapMethods(Kinetic.Text); + Konva.Collection.mapMethods(Konva.Text); })(); ;(function() { /** * Line constructor.  Lines are defined by an array of points and * a tension * @constructor - * @memberof Kinetic - * @augments Kinetic.Shape + * @memberof Konva + * @augments Konva.Shape * @param {Object} config * @param {Array} config.points * @param {Number} [config.tension] Higher values will result in a more curvy line. A value of 0 will result in no interpolation. * The default is 0 * @param {Boolean} [config.closed] defines whether or not the line shape is closed, creating a polygon or blob - * @param {String} [config.fill] fill color - * @param {Integer} [config.fillRed] set fill red component - * @param {Integer} [config.fillGreen] set fill green component - * @param {Integer} [config.fillBlue] set fill blue component - * @param {Integer} [config.fillAlpha] set fill alpha component - * @param {Image} [config.fillPatternImage] fill pattern image - * @param {Number} [config.fillPatternX] - * @param {Number} [config.fillPatternY] - * @param {Object} [config.fillPatternOffset] object with x and y component - * @param {Number} [config.fillPatternOffsetX] - * @param {Number} [config.fillPatternOffsetY] - * @param {Object} [config.fillPatternScale] object with x and y component - * @param {Number} [config.fillPatternScaleX] - * @param {Number} [config.fillPatternScaleY] - * @param {Number} [config.fillPatternRotation] - * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" - * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component - * @param {Number} [config.fillLinearGradientStartPointX] - * @param {Number} [config.fillLinearGradientStartPointY] - * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component - * @param {Number} [config.fillLinearGradientEndPointX] - * @param {Number} [config.fillLinearGradientEndPointY] - * @param {Array} [config.fillLinearGradientColorStops] array of color stops - * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component - * @param {Number} [config.fillRadialGradientStartPointX] - * @param {Number} [config.fillRadialGradientStartPointY] - * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component - * @param {Number} [config.fillRadialGradientEndPointX] - * @param {Number} [config.fillRadialGradientEndPointY] - * @param {Number} [config.fillRadialGradientStartRadius] - * @param {Number} [config.fillRadialGradientEndRadius] - * @param {Array} [config.fillRadialGradientColorStops] array of color stops - * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true - * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration - * @param {String} [config.stroke] stroke color - * @param {Integer} [config.strokeRed] set stroke red component - * @param {Integer} [config.strokeGreen] set stroke green component - * @param {Integer} [config.strokeBlue] set stroke blue component - * @param {Integer} [config.strokeAlpha] set stroke alpha component - * @param {Number} [config.strokeWidth] stroke width - * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true - * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true - * @param {String} [config.lineJoin] can be miter, round, or bevel. The default - * is miter - * @param {String} [config.lineCap] can be butt, round, or sqare. The default - * is butt - * @param {String} [config.shadowColor] - * @param {Integer} [config.shadowRed] set shadow color red component - * @param {Integer} [config.shadowGreen] set shadow color green component - * @param {Integer} [config.shadowBlue] set shadow color blue component - * @param {Integer} [config.shadowAlpha] set shadow color alpha component - * @param {Number} [config.shadowBlur] - * @param {Object} [config.shadowOffset] object with x and y component - * @param {Number} [config.shadowOffsetX] - * @param {Number} [config.shadowOffsetY] - * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number - * between 0 and 1 - * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true - * @param {Array} [config.dash] + * @param {String} [config.fill] fill color + * @param {Integer} [config.fillRed] set fill red component + * @param {Integer} [config.fillGreen] set fill green component + * @param {Integer} [config.fillBlue] set fill blue component + * @param {Integer} [config.fillAlpha] set fill alpha component + * @param {Image} [config.fillPatternImage] fill pattern image + * @param {Number} [config.fillPatternX] + * @param {Number} [config.fillPatternY] + * @param {Object} [config.fillPatternOffset] object with x and y component + * @param {Number} [config.fillPatternOffsetX] + * @param {Number} [config.fillPatternOffsetY] + * @param {Object} [config.fillPatternScale] object with x and y component + * @param {Number} [config.fillPatternScaleX] + * @param {Number} [config.fillPatternScaleY] + * @param {Number} [config.fillPatternRotation] + * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" + * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component + * @param {Number} [config.fillLinearGradientStartPointX] + * @param {Number} [config.fillLinearGradientStartPointY] + * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component + * @param {Number} [config.fillLinearGradientEndPointX] + * @param {Number} [config.fillLinearGradientEndPointY] + * @param {Array} [config.fillLinearGradientColorStops] array of color stops + * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component + * @param {Number} [config.fillRadialGradientStartPointX] + * @param {Number} [config.fillRadialGradientStartPointY] + * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component + * @param {Number} [config.fillRadialGradientEndPointX] + * @param {Number} [config.fillRadialGradientEndPointY] + * @param {Number} [config.fillRadialGradientStartRadius] + * @param {Number} [config.fillRadialGradientEndRadius] + * @param {Array} [config.fillRadialGradientColorStops] array of color stops + * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true + * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration + * @param {String} [config.stroke] stroke color + * @param {Integer} [config.strokeRed] set stroke red component + * @param {Integer} [config.strokeGreen] set stroke green component + * @param {Integer} [config.strokeBlue] set stroke blue component + * @param {Integer} [config.strokeAlpha] set stroke alpha component + * @param {Number} [config.strokeWidth] stroke width + * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true + * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true + * @param {String} [config.lineJoin] can be miter, round, or bevel. The default + * is miter + * @param {String} [config.lineCap] can be butt, round, or sqare. The default + * is butt + * @param {String} [config.shadowColor] + * @param {Integer} [config.shadowRed] set shadow color red component + * @param {Integer} [config.shadowGreen] set shadow color green component + * @param {Integer} [config.shadowBlue] set shadow color blue component + * @param {Integer} [config.shadowAlpha] set shadow color alpha component + * @param {Number} [config.shadowBlur] + * @param {Object} [config.shadowOffset] object with x and y component + * @param {Number} [config.shadowOffsetX] + * @param {Number} [config.shadowOffsetY] + * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number + * between 0 and 1 + * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true + * @param {Array} [config.dash] * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] + * @param {Number} [config.x] + * @param {Number} [config.y] + * @param {Number} [config.width] + * @param {Number} [config.height] + * @param {Boolean} [config.visible] + * @param {Boolean} [config.listening] whether or not the node is listening for events + * @param {String} [config.id] unique id + * @param {String} [config.name] non-unique name + * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 + * @param {Object} [config.scale] set scale + * @param {Number} [config.scaleX] set scale x + * @param {Number} [config.scaleY] set scale y + * @param {Number} [config.rotation] rotation in degrees + * @param {Object} [config.offset] offset from center point and rotation point + * @param {Number} [config.offsetX] set offset x + * @param {Number} [config.offsetY] set offset y + * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop + * the entire stage by dragging any portion of the stage + * @param {Number} [config.dragDistance] * @param {Function} [config.dragBoundFunc] * @example - * var line = new Kinetic.Line({ + * var line = new Konva.Line({ * x: 100, * y: 50, * points: [73, 70, 340, 23, 450, 60, 500, 20], @@ -12455,17 +12464,17 @@ var Kinetic = {}; * tension: 1 * }); */ - Kinetic.Line = function(config) { + Konva.Line = function(config) { this.___init(config); }; - Kinetic.Line.prototype = { + Konva.Line.prototype = { ___init: function(config) { // call super constructor - Kinetic.Shape.call(this, config); + Konva.Shape.call(this, config); this.className = 'Line'; - this.on('pointsChange.kinetic tensionChange.kinetic closedChange.kinetic', function() { + this.on('pointsChange.konva tensionChange.konva closedChange.konva', function() { this._clearCache('tensionPoints'); }); @@ -12528,14 +12537,14 @@ var Kinetic = {}; return this._getTensionPointsClosed(); } else { - return Kinetic.Util._expandPoints(this.getPoints(), this.getTension()); + return Konva.Util._expandPoints(this.getPoints(), this.getTension()); } }, _getTensionPointsClosed: function() { var p = this.getPoints(), len = p.length, tension = this.getTension(), - util = Kinetic.Util, + util = Konva.Util, firstControlPoints = util._getControlPoints( p[len-2], p[len-1], @@ -12554,7 +12563,7 @@ var Kinetic = {}; p[1], tension ), - middle = Kinetic.Util._expandPoints(p, tension), + middle = Konva.Util._expandPoints(p, tension), tp = [ firstControlPoints[2], firstControlPoints[3] @@ -12576,16 +12585,16 @@ var Kinetic = {}; return tp; } }; - Kinetic.Util.extend(Kinetic.Line, Kinetic.Shape); + Konva.Util.extend(Konva.Line, Konva.Shape); // add getters setters - Kinetic.Factory.addGetterSetter(Kinetic.Line, 'closed', false); + Konva.Factory.addGetterSetter(Konva.Line, 'closed', false); /** * get/set closed flag. The default is false * @name closed * @method - * @memberof Kinetic.Line.prototype + * @memberof Konva.Line.prototype * @param {Boolean} closed * @returns {Boolean} * @example @@ -12599,13 +12608,13 @@ var Kinetic = {}; * line.closed(false); */ - Kinetic.Factory.addGetterSetter(Kinetic.Line, 'tension', 0); + Konva.Factory.addGetterSetter(Konva.Line, 'tension', 0); /** * get/set tension * @name tension * @method - * @memberof Kinetic.Line.prototype + * @memberof Konva.Line.prototype * @param {Number} Higher values will result in a more curvy line. A value of 0 will result in no interpolation. * The default is 0 * @returns {Number} @@ -12617,12 +12626,12 @@ var Kinetic = {}; * line.tension(3); */ - Kinetic.Factory.addGetterSetter(Kinetic.Line, 'points', []); + Konva.Factory.addGetterSetter(Konva.Line, 'points', []); /** * get/set points array * @name points * @method - * @memberof Kinetic.Line.prototype + * @memberof Konva.Line.prototype * @param {Array} points * @returns {Array} * @example @@ -12636,515 +12645,515 @@ var Kinetic = {}; * line.points(line.points().concat([70, 80])); */ - Kinetic.Collection.mapMethods(Kinetic.Line); -})();;(function() { - /** - * Sprite constructor - * @constructor - * @memberof Kinetic - * @augments Kinetic.Shape - * @param {Object} config - * @param {String} config.animation animation key - * @param {Object} config.animations animation map - * @param {Integer} [config.frameIndex] animation frame index - * @param {Image} config.image image object - * @param {String} [config.fill] fill color - * @param {Integer} [config.fillRed] set fill red component - * @param {Integer} [config.fillGreen] set fill green component - * @param {Integer} [config.fillBlue] set fill blue component - * @param {Integer} [config.fillAlpha] set fill alpha component - * @param {Image} [config.fillPatternImage] fill pattern image - * @param {Number} [config.fillPatternX] - * @param {Number} [config.fillPatternY] - * @param {Object} [config.fillPatternOffset] object with x and y component - * @param {Number} [config.fillPatternOffsetX] - * @param {Number} [config.fillPatternOffsetY] - * @param {Object} [config.fillPatternScale] object with x and y component - * @param {Number} [config.fillPatternScaleX] - * @param {Number} [config.fillPatternScaleY] - * @param {Number} [config.fillPatternRotation] - * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" - * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component - * @param {Number} [config.fillLinearGradientStartPointX] - * @param {Number} [config.fillLinearGradientStartPointY] - * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component - * @param {Number} [config.fillLinearGradientEndPointX] - * @param {Number} [config.fillLinearGradientEndPointY] - * @param {Array} [config.fillLinearGradientColorStops] array of color stops - * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component - * @param {Number} [config.fillRadialGradientStartPointX] - * @param {Number} [config.fillRadialGradientStartPointY] - * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component - * @param {Number} [config.fillRadialGradientEndPointX] - * @param {Number} [config.fillRadialGradientEndPointY] - * @param {Number} [config.fillRadialGradientStartRadius] - * @param {Number} [config.fillRadialGradientEndRadius] - * @param {Array} [config.fillRadialGradientColorStops] array of color stops - * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true - * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration - * @param {String} [config.stroke] stroke color - * @param {Integer} [config.strokeRed] set stroke red component - * @param {Integer} [config.strokeGreen] set stroke green component - * @param {Integer} [config.strokeBlue] set stroke blue component - * @param {Integer} [config.strokeAlpha] set stroke alpha component - * @param {Number} [config.strokeWidth] stroke width - * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true - * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true - * @param {String} [config.lineJoin] can be miter, round, or bevel. The default - * is miter - * @param {String} [config.lineCap] can be butt, round, or sqare. The default - * is butt - * @param {String} [config.shadowColor] - * @param {Integer} [config.shadowRed] set shadow color red component - * @param {Integer} [config.shadowGreen] set shadow color green component - * @param {Integer} [config.shadowBlue] set shadow color blue component - * @param {Integer} [config.shadowAlpha] set shadow color alpha component - * @param {Number} [config.shadowBlur] - * @param {Object} [config.shadowOffset] object with x and y component - * @param {Number} [config.shadowOffsetX] - * @param {Number} [config.shadowOffsetY] - * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number - * between 0 and 1 - * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true - * @param {Array} [config.dash] - * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] - * @param {Function} [config.dragBoundFunc] - * @example - * var imageObj = new Image(); - * imageObj.onload = function() { - * var sprite = new Kinetic.Sprite({ - * x: 200, - * y: 100, - * image: imageObj, - * animation: 'standing', - * animations: { - * standing: [ - * // x, y, width, height (6 frames) - * 0, 0, 49, 109, - * 52, 0, 49, 109, - * 105, 0, 49, 109, - * 158, 0, 49, 109, - * 210, 0, 49, 109, - * 262, 0, 49, 109 - * ], - * kicking: [ - * // x, y, width, height (6 frames) - * 0, 109, 45, 98, - * 45, 109, 45, 98, - * 95, 109, 63, 98, - * 156, 109, 70, 98, - * 229, 109, 60, 98, - * 287, 109, 41, 98 - * ] - * }, - * frameRate: 7, - * frameIndex: 0 - * }); - * }; - * imageObj.src = '/path/to/image.jpg' - */ - Kinetic.Sprite = function(config) { - this.___init(config); - }; - - Kinetic.Sprite.prototype = { - ___init: function(config) { - // call super constructor - Kinetic.Shape.call(this, config); - this.className = 'Sprite'; - - this._updated = true; - var that = this; - this.anim = new Kinetic.Animation(function() { - // if we don't need to redraw layer we should return false - var updated = that._updated; - that._updated = false; - return updated; - }); - this.on('animationChange.kinetic', function() { - // reset index when animation changes - this.frameIndex(0); - }); - this.on('frameIndexChange.kinetic', function() { - this._updated = true; - }); - // smooth change for frameRate - this.on('frameRateChange.kinetic', function() { - if (!this.anim.isRunning()) { - return; - } - clearInterval(this.interval); - this._setInterval(); - }); - - this.sceneFunc(this._sceneFunc); - this.hitFunc(this._hitFunc); - }, - _sceneFunc: function(context) { - var anim = this.getAnimation(), - index = this.frameIndex(), - ix4 = index * 4, - set = this.getAnimations()[anim], - offsets = this.frameOffsets(), - x = set[ix4 + 0], - y = set[ix4 + 1], - width = set[ix4 + 2], - height = set[ix4 + 3], - image = this.getImage(); - - if(image) { - if (offsets) { - var offset = offsets[anim], - ix2 = index * 2; - context.drawImage(image, x, y, width, height, offset[ix2 + 0], offset[ix2 + 1], width, height); - } else { - context.drawImage(image, x, y, width, height, 0, 0, width, height); - } - } - }, - _hitFunc: function(context) { - var anim = this.getAnimation(), - index = this.frameIndex(), - ix4 = index * 4, - set = this.getAnimations()[anim], - offsets = this.frameOffsets(), - width = set[ix4 + 2], - height = set[ix4 + 3]; - - context.beginPath(); - if (offsets) { - var offset = offsets[anim]; - var ix2 = index * 2; - context.rect(offset[ix2 + 0], offset[ix2 + 1], width, height); - } else { - context.rect(0, 0, width, height); - } - context.closePath(); - context.fillShape(this); - }, - _useBufferCanvas: function() { - return (this.hasShadow() || this.getAbsoluteOpacity() !== 1) && this.hasStroke(); - }, - _setInterval: function() { - var that = this; - this.interval = setInterval(function() { - that._updateIndex(); - }, 1000 / this.getFrameRate()); - }, - /** - * start sprite animation - * @method - * @memberof Kinetic.Sprite.prototype - */ - start: function() { - var layer = this.getLayer(); - - /* - * animation object has no executable function because - * the updates are done with a fixed FPS with the setInterval - * below. The anim object only needs the layer reference for - * redraw - */ - this.anim.setLayers(layer); - this._setInterval(); - this.anim.start(); - }, - /** - * stop sprite animation - * @method - * @memberof Kinetic.Sprite.prototype - */ - stop: function() { - this.anim.stop(); - clearInterval(this.interval); - }, - /** - * determine if animation of sprite is running or not. returns true or false - * @method - * @memberof Kinetic.Animation.prototype - * @returns {Boolean} - */ - isRunning: function() { - return this.anim.isRunning(); - }, - _updateIndex: function() { - var index = this.frameIndex(), - animation = this.getAnimation(), - animations = this.getAnimations(), - anim = animations[animation], - len = anim.length / 4; - - if(index < len - 1) { - this.frameIndex(index + 1); - } - else { - this.frameIndex(0); - } - } - }; - Kinetic.Util.extend(Kinetic.Sprite, Kinetic.Shape); - - // add getters setters - Kinetic.Factory.addGetterSetter(Kinetic.Sprite, 'animation'); - - /** - * get/set animation key - * @name animation - * @method - * @memberof Kinetic.Sprite.prototype - * @param {String} anim animation key - * @returns {String} - * @example - * // get animation key - * var animation = sprite.animation(); - * - * // set animation key - * sprite.animation('kicking'); - */ - - Kinetic.Factory.addGetterSetter(Kinetic.Sprite, 'animations'); - - /** - * get/set animations map - * @name animations - * @method - * @memberof Kinetic.Sprite.prototype - * @param {Object} animations - * @returns {Object} - * @example - * // get animations map - * var animations = sprite.animations(); - * - * // set animations map - * sprite.animations({ - * standing: [ - * // x, y, width, height (6 frames) - * 0, 0, 49, 109, - * 52, 0, 49, 109, - * 105, 0, 49, 109, - * 158, 0, 49, 109, - * 210, 0, 49, 109, - * 262, 0, 49, 109 - * ], - * kicking: [ - * // x, y, width, height (6 frames) - * 0, 109, 45, 98, - * 45, 109, 45, 98, - * 95, 109, 63, 98, - * 156, 109, 70, 98, - * 229, 109, 60, 98, - * 287, 109, 41, 98 - * ] - * }); - */ - - Kinetic.Factory.addGetterSetter(Kinetic.Sprite, 'frameOffsets'); - - /** - * get/set offsets map - * @name offsets - * @method - * @memberof Kinetic.Sprite.prototype - * @param {Object} offsets - * @returns {Object} - * @example - * // get offsets map - * var offsets = sprite.offsets(); - * - * // set offsets map - * sprite.offsets({ - * standing: [ - * // x, y (6 frames) - * 0, 0, - * 0, 0, - * 5, 0, - * 0, 0, - * 0, 3, - * 2, 0 - * ], - * kicking: [ - * // x, y (6 frames) - * 0, 5, - * 5, 0, - * 10, 0, - * 0, 0, - * 2, 1, - * 0, 0 - * ] - * }); - */ - - Kinetic.Factory.addGetterSetter(Kinetic.Sprite, 'image'); - - /** - * get/set image - * @name image - * @method - * @memberof Kinetic.Sprite.prototype - * @param {Image} image - * @returns {Image} - * @example - * // get image - * var image = sprite.image(); - * - * // set image - * sprite.image(imageObj); - */ - - Kinetic.Factory.addGetterSetter(Kinetic.Sprite, 'frameIndex', 0); - - /** - * set/set animation frame index - * @name frameIndex - * @method - * @memberof Kinetic.Sprite.prototype - * @param {Integer} frameIndex - * @returns {Integer} - * @example - * // get animation frame index - * var frameIndex = sprite.frameIndex(); - * - * // set animation frame index - * sprite.frameIndex(3); - */ - - Kinetic.Factory.addGetterSetter(Kinetic.Sprite, 'frameRate', 17); - - /** - * get/set frame rate in frames per second. Increase this number to make the sprite - * animation run faster, and decrease the number to make the sprite animation run slower - * The default is 17 frames per second - * @name frameRate - * @method - * @memberof Kinetic.Sprite.prototype - * @param {Integer} frameRate - * @returns {Integer} - * @example - * // get frame rate - * var frameRate = sprite.frameRate(); - * - * // set frame rate to 2 frames per second - * sprite.frameRate(2); - */ - - Kinetic.Factory.backCompat(Kinetic.Sprite, { - index: 'frameIndex', - getIndex: 'getFrameIndex', - setIndex: 'setFrameIndex' - }); - - Kinetic.Collection.mapMethods(Kinetic.Sprite); -})(); + Konva.Collection.mapMethods(Konva.Line); +})();;(function() { + /** + * Sprite constructor + * @constructor + * @memberof Konva + * @augments Konva.Shape + * @param {Object} config + * @param {String} config.animation animation key + * @param {Object} config.animations animation map + * @param {Integer} [config.frameIndex] animation frame index + * @param {Image} config.image image object + * @param {String} [config.fill] fill color + * @param {Integer} [config.fillRed] set fill red component + * @param {Integer} [config.fillGreen] set fill green component + * @param {Integer} [config.fillBlue] set fill blue component + * @param {Integer} [config.fillAlpha] set fill alpha component + * @param {Image} [config.fillPatternImage] fill pattern image + * @param {Number} [config.fillPatternX] + * @param {Number} [config.fillPatternY] + * @param {Object} [config.fillPatternOffset] object with x and y component + * @param {Number} [config.fillPatternOffsetX] + * @param {Number} [config.fillPatternOffsetY] + * @param {Object} [config.fillPatternScale] object with x and y component + * @param {Number} [config.fillPatternScaleX] + * @param {Number} [config.fillPatternScaleY] + * @param {Number} [config.fillPatternRotation] + * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" + * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component + * @param {Number} [config.fillLinearGradientStartPointX] + * @param {Number} [config.fillLinearGradientStartPointY] + * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component + * @param {Number} [config.fillLinearGradientEndPointX] + * @param {Number} [config.fillLinearGradientEndPointY] + * @param {Array} [config.fillLinearGradientColorStops] array of color stops + * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component + * @param {Number} [config.fillRadialGradientStartPointX] + * @param {Number} [config.fillRadialGradientStartPointY] + * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component + * @param {Number} [config.fillRadialGradientEndPointX] + * @param {Number} [config.fillRadialGradientEndPointY] + * @param {Number} [config.fillRadialGradientStartRadius] + * @param {Number} [config.fillRadialGradientEndRadius] + * @param {Array} [config.fillRadialGradientColorStops] array of color stops + * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true + * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration + * @param {String} [config.stroke] stroke color + * @param {Integer} [config.strokeRed] set stroke red component + * @param {Integer} [config.strokeGreen] set stroke green component + * @param {Integer} [config.strokeBlue] set stroke blue component + * @param {Integer} [config.strokeAlpha] set stroke alpha component + * @param {Number} [config.strokeWidth] stroke width + * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true + * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true + * @param {String} [config.lineJoin] can be miter, round, or bevel. The default + * is miter + * @param {String} [config.lineCap] can be butt, round, or sqare. The default + * is butt + * @param {String} [config.shadowColor] + * @param {Integer} [config.shadowRed] set shadow color red component + * @param {Integer} [config.shadowGreen] set shadow color green component + * @param {Integer} [config.shadowBlue] set shadow color blue component + * @param {Integer} [config.shadowAlpha] set shadow color alpha component + * @param {Number} [config.shadowBlur] + * @param {Object} [config.shadowOffset] object with x and y component + * @param {Number} [config.shadowOffsetX] + * @param {Number} [config.shadowOffsetY] + * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number + * between 0 and 1 + * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true + * @param {Array} [config.dash] + * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true + * @param {Number} [config.x] + * @param {Number} [config.y] + * @param {Number} [config.width] + * @param {Number} [config.height] + * @param {Boolean} [config.visible] + * @param {Boolean} [config.listening] whether or not the node is listening for events + * @param {String} [config.id] unique id + * @param {String} [config.name] non-unique name + * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 + * @param {Object} [config.scale] set scale + * @param {Number} [config.scaleX] set scale x + * @param {Number} [config.scaleY] set scale y + * @param {Number} [config.rotation] rotation in degrees + * @param {Object} [config.offset] offset from center point and rotation point + * @param {Number} [config.offsetX] set offset x + * @param {Number} [config.offsetY] set offset y + * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop + * the entire stage by dragging any portion of the stage + * @param {Number} [config.dragDistance] + * @param {Function} [config.dragBoundFunc] + * @example + * var imageObj = new Image(); + * imageObj.onload = function() { + * var sprite = new Konva.Sprite({ + * x: 200, + * y: 100, + * image: imageObj, + * animation: 'standing', + * animations: { + * standing: [ + * // x, y, width, height (6 frames) + * 0, 0, 49, 109, + * 52, 0, 49, 109, + * 105, 0, 49, 109, + * 158, 0, 49, 109, + * 210, 0, 49, 109, + * 262, 0, 49, 109 + * ], + * kicking: [ + * // x, y, width, height (6 frames) + * 0, 109, 45, 98, + * 45, 109, 45, 98, + * 95, 109, 63, 98, + * 156, 109, 70, 98, + * 229, 109, 60, 98, + * 287, 109, 41, 98 + * ] + * }, + * frameRate: 7, + * frameIndex: 0 + * }); + * }; + * imageObj.src = '/path/to/image.jpg' + */ + Konva.Sprite = function(config) { + this.___init(config); + }; + + Konva.Sprite.prototype = { + ___init: function(config) { + // call super constructor + Konva.Shape.call(this, config); + this.className = 'Sprite'; + + this._updated = true; + var that = this; + this.anim = new Konva.Animation(function() { + // if we don't need to redraw layer we should return false + var updated = that._updated; + that._updated = false; + return updated; + }); + this.on('animationChange.konva', function() { + // reset index when animation changes + this.frameIndex(0); + }); + this.on('frameIndexChange.konva', function() { + this._updated = true; + }); + // smooth change for frameRate + this.on('frameRateChange.konva', function() { + if (!this.anim.isRunning()) { + return; + } + clearInterval(this.interval); + this._setInterval(); + }); + + this.sceneFunc(this._sceneFunc); + this.hitFunc(this._hitFunc); + }, + _sceneFunc: function(context) { + var anim = this.getAnimation(), + index = this.frameIndex(), + ix4 = index * 4, + set = this.getAnimations()[anim], + offsets = this.frameOffsets(), + x = set[ix4 + 0], + y = set[ix4 + 1], + width = set[ix4 + 2], + height = set[ix4 + 3], + image = this.getImage(); + + if(image) { + if (offsets) { + var offset = offsets[anim], + ix2 = index * 2; + context.drawImage(image, x, y, width, height, offset[ix2 + 0], offset[ix2 + 1], width, height); + } else { + context.drawImage(image, x, y, width, height, 0, 0, width, height); + } + } + }, + _hitFunc: function(context) { + var anim = this.getAnimation(), + index = this.frameIndex(), + ix4 = index * 4, + set = this.getAnimations()[anim], + offsets = this.frameOffsets(), + width = set[ix4 + 2], + height = set[ix4 + 3]; + + context.beginPath(); + if (offsets) { + var offset = offsets[anim]; + var ix2 = index * 2; + context.rect(offset[ix2 + 0], offset[ix2 + 1], width, height); + } else { + context.rect(0, 0, width, height); + } + context.closePath(); + context.fillShape(this); + }, + _useBufferCanvas: function() { + return (this.hasShadow() || this.getAbsoluteOpacity() !== 1) && this.hasStroke(); + }, + _setInterval: function() { + var that = this; + this.interval = setInterval(function() { + that._updateIndex(); + }, 1000 / this.getFrameRate()); + }, + /** + * start sprite animation + * @method + * @memberof Konva.Sprite.prototype + */ + start: function() { + var layer = this.getLayer(); + + /* + * animation object has no executable function because + * the updates are done with a fixed FPS with the setInterval + * below. The anim object only needs the layer reference for + * redraw + */ + this.anim.setLayers(layer); + this._setInterval(); + this.anim.start(); + }, + /** + * stop sprite animation + * @method + * @memberof Konva.Sprite.prototype + */ + stop: function() { + this.anim.stop(); + clearInterval(this.interval); + }, + /** + * determine if animation of sprite is running or not. returns true or false + * @method + * @memberof Konva.Animation.prototype + * @returns {Boolean} + */ + isRunning: function() { + return this.anim.isRunning(); + }, + _updateIndex: function() { + var index = this.frameIndex(), + animation = this.getAnimation(), + animations = this.getAnimations(), + anim = animations[animation], + len = anim.length / 4; + + if(index < len - 1) { + this.frameIndex(index + 1); + } + else { + this.frameIndex(0); + } + } + }; + Konva.Util.extend(Konva.Sprite, Konva.Shape); + + // add getters setters + Konva.Factory.addGetterSetter(Konva.Sprite, 'animation'); + + /** + * get/set animation key + * @name animation + * @method + * @memberof Konva.Sprite.prototype + * @param {String} anim animation key + * @returns {String} + * @example + * // get animation key + * var animation = sprite.animation(); + * + * // set animation key + * sprite.animation('kicking'); + */ + + Konva.Factory.addGetterSetter(Konva.Sprite, 'animations'); + + /** + * get/set animations map + * @name animations + * @method + * @memberof Konva.Sprite.prototype + * @param {Object} animations + * @returns {Object} + * @example + * // get animations map + * var animations = sprite.animations(); + * + * // set animations map + * sprite.animations({ + * standing: [ + * // x, y, width, height (6 frames) + * 0, 0, 49, 109, + * 52, 0, 49, 109, + * 105, 0, 49, 109, + * 158, 0, 49, 109, + * 210, 0, 49, 109, + * 262, 0, 49, 109 + * ], + * kicking: [ + * // x, y, width, height (6 frames) + * 0, 109, 45, 98, + * 45, 109, 45, 98, + * 95, 109, 63, 98, + * 156, 109, 70, 98, + * 229, 109, 60, 98, + * 287, 109, 41, 98 + * ] + * }); + */ + + Konva.Factory.addGetterSetter(Konva.Sprite, 'frameOffsets'); + + /** + * get/set offsets map + * @name offsets + * @method + * @memberof Konva.Sprite.prototype + * @param {Object} offsets + * @returns {Object} + * @example + * // get offsets map + * var offsets = sprite.offsets(); + * + * // set offsets map + * sprite.offsets({ + * standing: [ + * // x, y (6 frames) + * 0, 0, + * 0, 0, + * 5, 0, + * 0, 0, + * 0, 3, + * 2, 0 + * ], + * kicking: [ + * // x, y (6 frames) + * 0, 5, + * 5, 0, + * 10, 0, + * 0, 0, + * 2, 1, + * 0, 0 + * ] + * }); + */ + + Konva.Factory.addGetterSetter(Konva.Sprite, 'image'); + + /** + * get/set image + * @name image + * @method + * @memberof Konva.Sprite.prototype + * @param {Image} image + * @returns {Image} + * @example + * // get image + * var image = sprite.image(); + * + * // set image + * sprite.image(imageObj); + */ + + Konva.Factory.addGetterSetter(Konva.Sprite, 'frameIndex', 0); + + /** + * set/set animation frame index + * @name frameIndex + * @method + * @memberof Konva.Sprite.prototype + * @param {Integer} frameIndex + * @returns {Integer} + * @example + * // get animation frame index + * var frameIndex = sprite.frameIndex(); + * + * // set animation frame index + * sprite.frameIndex(3); + */ + + Konva.Factory.addGetterSetter(Konva.Sprite, 'frameRate', 17); + + /** + * get/set frame rate in frames per second. Increase this number to make the sprite + * animation run faster, and decrease the number to make the sprite animation run slower + * The default is 17 frames per second + * @name frameRate + * @method + * @memberof Konva.Sprite.prototype + * @param {Integer} frameRate + * @returns {Integer} + * @example + * // get frame rate + * var frameRate = sprite.frameRate(); + * + * // set frame rate to 2 frames per second + * sprite.frameRate(2); + */ + + Konva.Factory.backCompat(Konva.Sprite, { + index: 'frameIndex', + getIndex: 'getFrameIndex', + setIndex: 'setFrameIndex' + }); + + Konva.Collection.mapMethods(Konva.Sprite); +})(); ;(function () { /** * Path constructor. * @author Jason Follas * @constructor - * @memberof Kinetic - * @augments Kinetic.Shape + * @memberof Konva + * @augments Konva.Shape * @param {Object} config * @param {String} config.data SVG data string - * @param {String} [config.fill] fill color - * @param {Integer} [config.fillRed] set fill red component - * @param {Integer} [config.fillGreen] set fill green component - * @param {Integer} [config.fillBlue] set fill blue component - * @param {Integer} [config.fillAlpha] set fill alpha component - * @param {Image} [config.fillPatternImage] fill pattern image - * @param {Number} [config.fillPatternX] - * @param {Number} [config.fillPatternY] - * @param {Object} [config.fillPatternOffset] object with x and y component - * @param {Number} [config.fillPatternOffsetX] - * @param {Number} [config.fillPatternOffsetY] - * @param {Object} [config.fillPatternScale] object with x and y component - * @param {Number} [config.fillPatternScaleX] - * @param {Number} [config.fillPatternScaleY] - * @param {Number} [config.fillPatternRotation] - * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" - * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component - * @param {Number} [config.fillLinearGradientStartPointX] - * @param {Number} [config.fillLinearGradientStartPointY] - * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component - * @param {Number} [config.fillLinearGradientEndPointX] - * @param {Number} [config.fillLinearGradientEndPointY] - * @param {Array} [config.fillLinearGradientColorStops] array of color stops - * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component - * @param {Number} [config.fillRadialGradientStartPointX] - * @param {Number} [config.fillRadialGradientStartPointY] - * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component - * @param {Number} [config.fillRadialGradientEndPointX] - * @param {Number} [config.fillRadialGradientEndPointY] - * @param {Number} [config.fillRadialGradientStartRadius] - * @param {Number} [config.fillRadialGradientEndRadius] - * @param {Array} [config.fillRadialGradientColorStops] array of color stops - * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true - * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration - * @param {String} [config.stroke] stroke color - * @param {Integer} [config.strokeRed] set stroke red component - * @param {Integer} [config.strokeGreen] set stroke green component - * @param {Integer} [config.strokeBlue] set stroke blue component - * @param {Integer} [config.strokeAlpha] set stroke alpha component - * @param {Number} [config.strokeWidth] stroke width - * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true - * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true - * @param {String} [config.lineJoin] can be miter, round, or bevel. The default - * is miter - * @param {String} [config.lineCap] can be butt, round, or sqare. The default - * is butt - * @param {String} [config.shadowColor] - * @param {Integer} [config.shadowRed] set shadow color red component - * @param {Integer} [config.shadowGreen] set shadow color green component - * @param {Integer} [config.shadowBlue] set shadow color blue component - * @param {Integer} [config.shadowAlpha] set shadow color alpha component - * @param {Number} [config.shadowBlur] - * @param {Object} [config.shadowOffset] object with x and y component - * @param {Number} [config.shadowOffsetX] - * @param {Number} [config.shadowOffsetY] - * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number - * between 0 and 1 - * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true - * @param {Array} [config.dash] + * @param {String} [config.fill] fill color + * @param {Integer} [config.fillRed] set fill red component + * @param {Integer} [config.fillGreen] set fill green component + * @param {Integer} [config.fillBlue] set fill blue component + * @param {Integer} [config.fillAlpha] set fill alpha component + * @param {Image} [config.fillPatternImage] fill pattern image + * @param {Number} [config.fillPatternX] + * @param {Number} [config.fillPatternY] + * @param {Object} [config.fillPatternOffset] object with x and y component + * @param {Number} [config.fillPatternOffsetX] + * @param {Number} [config.fillPatternOffsetY] + * @param {Object} [config.fillPatternScale] object with x and y component + * @param {Number} [config.fillPatternScaleX] + * @param {Number} [config.fillPatternScaleY] + * @param {Number} [config.fillPatternRotation] + * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" + * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component + * @param {Number} [config.fillLinearGradientStartPointX] + * @param {Number} [config.fillLinearGradientStartPointY] + * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component + * @param {Number} [config.fillLinearGradientEndPointX] + * @param {Number} [config.fillLinearGradientEndPointY] + * @param {Array} [config.fillLinearGradientColorStops] array of color stops + * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component + * @param {Number} [config.fillRadialGradientStartPointX] + * @param {Number} [config.fillRadialGradientStartPointY] + * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component + * @param {Number} [config.fillRadialGradientEndPointX] + * @param {Number} [config.fillRadialGradientEndPointY] + * @param {Number} [config.fillRadialGradientStartRadius] + * @param {Number} [config.fillRadialGradientEndRadius] + * @param {Array} [config.fillRadialGradientColorStops] array of color stops + * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true + * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration + * @param {String} [config.stroke] stroke color + * @param {Integer} [config.strokeRed] set stroke red component + * @param {Integer} [config.strokeGreen] set stroke green component + * @param {Integer} [config.strokeBlue] set stroke blue component + * @param {Integer} [config.strokeAlpha] set stroke alpha component + * @param {Number} [config.strokeWidth] stroke width + * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true + * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true + * @param {String} [config.lineJoin] can be miter, round, or bevel. The default + * is miter + * @param {String} [config.lineCap] can be butt, round, or sqare. The default + * is butt + * @param {String} [config.shadowColor] + * @param {Integer} [config.shadowRed] set shadow color red component + * @param {Integer} [config.shadowGreen] set shadow color green component + * @param {Integer} [config.shadowBlue] set shadow color blue component + * @param {Integer} [config.shadowAlpha] set shadow color alpha component + * @param {Number} [config.shadowBlur] + * @param {Object} [config.shadowOffset] object with x and y component + * @param {Number} [config.shadowOffsetX] + * @param {Number} [config.shadowOffsetY] + * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number + * between 0 and 1 + * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true + * @param {Array} [config.dash] * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] + * @param {Number} [config.x] + * @param {Number} [config.y] + * @param {Number} [config.width] + * @param {Number} [config.height] + * @param {Boolean} [config.visible] + * @param {Boolean} [config.listening] whether or not the node is listening for events + * @param {String} [config.id] unique id + * @param {String} [config.name] non-unique name + * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 + * @param {Object} [config.scale] set scale + * @param {Number} [config.scaleX] set scale x + * @param {Number} [config.scaleY] set scale y + * @param {Number} [config.rotation] rotation in degrees + * @param {Object} [config.offset] offset from center point and rotation point + * @param {Number} [config.offsetX] set offset x + * @param {Number} [config.offsetY] set offset y + * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop + * the entire stage by dragging any portion of the stage + * @param {Number} [config.dragDistance] * @param {Function} [config.dragBoundFunc] * @example - * var path = new Kinetic.Path({ + * var path = new Konva.Path({ * x: 240, * y: 40, * data: 'M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z', @@ -13152,22 +13161,22 @@ var Kinetic = {}; * scale: 2 * }); */ - Kinetic.Path = function (config) { + Konva.Path = function (config) { this.___init(config); }; - Kinetic.Path.prototype = { + Konva.Path.prototype = { ___init: function (config) { this.dataArray = []; var that = this; // call super constructor - Kinetic.Shape.call(this, config); + Konva.Shape.call(this, config); this.className = 'Path'; - this.dataArray = Kinetic.Path.parsePathData(this.getData()); - this.on('dataChange.kinetic', function () { - that.dataArray = Kinetic.Path.parsePathData(this.getData()); + this.dataArray = Konva.Path.parsePathData(this.getData()); + this.on('dataChange.konva', function () { + that.dataArray = Konva.Path.parsePathData(this.getData()); }); this.sceneFunc(this._sceneFunc); @@ -13225,12 +13234,12 @@ var Kinetic = {}; } } }; - Kinetic.Util.extend(Kinetic.Path, Kinetic.Shape); + Konva.Util.extend(Konva.Path, Konva.Shape); - Kinetic.Path.getLineLength = function(x1, y1, x2, y2) { + Konva.Path.getLineLength = function(x1, y1, x2, y2) { return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1)); }; - Kinetic.Path.getPointOnLine = function(dist, P1x, P1y, P2x, P2y, fromX, fromY) { + Konva.Path.getPointOnLine = function(dist, P1x, P1y, P2x, P2y, fromX, fromY) { if(fromX === undefined) { fromX = P1x; } @@ -13285,7 +13294,7 @@ var Kinetic = {}; return pt; }; - Kinetic.Path.getPointOnCubicBezier = function(pct, P1x, P1y, P2x, P2y, P3x, P3y, P4x, P4y) { + Konva.Path.getPointOnCubicBezier = function(pct, P1x, P1y, P2x, P2y, P3x, P3y, P4x, P4y) { function CB1(t) { return t * t * t; } @@ -13306,7 +13315,7 @@ var Kinetic = {}; y: y }; }; - Kinetic.Path.getPointOnQuadraticBezier = function(pct, P1x, P1y, P2x, P2y, P3x, P3y) { + Konva.Path.getPointOnQuadraticBezier = function(pct, P1x, P1y, P2x, P2y, P3x, P3y) { function QB1(t) { return t * t; } @@ -13324,7 +13333,7 @@ var Kinetic = {}; y: y }; }; - Kinetic.Path.getPointOnEllipticalArc = function(cx, cy, rx, ry, theta, psi) { + Konva.Path.getPointOnEllipticalArc = function(cx, cy, rx, ry, theta, psi) { var cosPsi = Math.cos(psi), sinPsi = Math.sin(psi); var pt = { x: rx * Math.cos(theta), @@ -13341,7 +13350,7 @@ var Kinetic = {}; * L data for the purpose of high performance Path * rendering */ - Kinetic.Path.parsePathData = function(data) { + Konva.Path.parsePathData = function(data) { // Path Data Segment must begin with a moveTo //m (x y)+ Relative moveTo (subsequent points are treated as lineTo) //M (x y)+ Absolute moveTo (subsequent points are treated as lineTo) @@ -13613,9 +13622,9 @@ var Kinetic = {}; return ca; }; - Kinetic.Path.calcLength = function(x, y, cmd, points) { + Konva.Path.calcLength = function(x, y, cmd, points) { var len, p1, p2, t; - var path = Kinetic.Path; + var path = Konva.Path; switch (cmd) { case 'L': @@ -13677,7 +13686,7 @@ var Kinetic = {}; return 0; }; - Kinetic.Path.convertEndpointToCenterParameterization = function(x1, y1, x2, y2, fa, fs, rx, ry, psiDeg) { + Konva.Path.convertEndpointToCenterParameterization = function(x1, y1, x2, y2, fa, fs, rx, ry, psiDeg) { // Derived from: http://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes var psi = psiDeg * (Math.PI / 180.0); var xp = Math.cos(psi) * (x1 - x2) / 2.0 + Math.sin(psi) * (y1 - y2) / 2.0; @@ -13734,7 +13743,7 @@ var Kinetic = {}; return [cx, cy, rx, ry, theta, dTheta, psi, fs]; }; // add getters setters - Kinetic.Factory.addGetterSetter(Kinetic.Path, 'data'); + Konva.Factory.addGetterSetter(Konva.Path, 'data'); /** * set SVG path data string. This method @@ -13743,7 +13752,7 @@ var Kinetic = {}; * M, m, L, l, H, h, V, v, Q, q, T, t, C, c, S, s, A, a, Z, z * @name setData * @method - * @memberof Kinetic.Path.prototype + * @memberof Konva.Path.prototype * @param {String} SVG path command string */ @@ -13751,10 +13760,10 @@ var Kinetic = {}; * get SVG path data string * @name getData * @method - * @memberof Kinetic.Path.prototype + * @memberof Konva.Path.prototype */ - Kinetic.Collection.mapMethods(Kinetic.Path); + Konva.Collection.mapMethods(Konva.Path); })(); ;(function() { var EMPTY_STRING = '', @@ -13765,8 +13774,8 @@ var Kinetic = {}; * Path constructor. * @author Jason Follas * @constructor - * @memberof Kinetic - * @augments Kinetic.Shape + * @memberof Konva + * @augments Konva.Shape * @param {Object} config * @param {String} [config.fontFamily] default is Calibri * @param {Number} [config.fontSize] default is 12 @@ -13774,88 +13783,88 @@ var Kinetic = {}; * @param {String} [config.fontVariant] can be normal or small-caps. Default is normal * @param {String} config.text * @param {String} config.data SVG data string - * @param {String} [config.fill] fill color - * @param {Integer} [config.fillRed] set fill red component - * @param {Integer} [config.fillGreen] set fill green component - * @param {Integer} [config.fillBlue] set fill blue component - * @param {Integer} [config.fillAlpha] set fill alpha component - * @param {Image} [config.fillPatternImage] fill pattern image - * @param {Number} [config.fillPatternX] - * @param {Number} [config.fillPatternY] - * @param {Object} [config.fillPatternOffset] object with x and y component - * @param {Number} [config.fillPatternOffsetX] - * @param {Number} [config.fillPatternOffsetY] - * @param {Object} [config.fillPatternScale] object with x and y component - * @param {Number} [config.fillPatternScaleX] - * @param {Number} [config.fillPatternScaleY] - * @param {Number} [config.fillPatternRotation] - * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" - * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component - * @param {Number} [config.fillLinearGradientStartPointX] - * @param {Number} [config.fillLinearGradientStartPointY] - * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component - * @param {Number} [config.fillLinearGradientEndPointX] - * @param {Number} [config.fillLinearGradientEndPointY] - * @param {Array} [config.fillLinearGradientColorStops] array of color stops - * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component - * @param {Number} [config.fillRadialGradientStartPointX] - * @param {Number} [config.fillRadialGradientStartPointY] - * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component - * @param {Number} [config.fillRadialGradientEndPointX] - * @param {Number} [config.fillRadialGradientEndPointY] - * @param {Number} [config.fillRadialGradientStartRadius] - * @param {Number} [config.fillRadialGradientEndRadius] - * @param {Array} [config.fillRadialGradientColorStops] array of color stops - * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true - * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration - * @param {String} [config.stroke] stroke color - * @param {Integer} [config.strokeRed] set stroke red component - * @param {Integer} [config.strokeGreen] set stroke green component - * @param {Integer} [config.strokeBlue] set stroke blue component - * @param {Integer} [config.strokeAlpha] set stroke alpha component - * @param {Number} [config.strokeWidth] stroke width - * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true - * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true - * @param {String} [config.lineJoin] can be miter, round, or bevel. The default - * is miter - * @param {String} [config.lineCap] can be butt, round, or sqare. The default - * is butt - * @param {String} [config.shadowColor] - * @param {Integer} [config.shadowRed] set shadow color red component - * @param {Integer} [config.shadowGreen] set shadow color green component - * @param {Integer} [config.shadowBlue] set shadow color blue component - * @param {Integer} [config.shadowAlpha] set shadow color alpha component - * @param {Number} [config.shadowBlur] - * @param {Object} [config.shadowOffset] object with x and y component - * @param {Number} [config.shadowOffsetX] - * @param {Number} [config.shadowOffsetY] - * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number - * between 0 and 1 - * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true - * @param {Array} [config.dash] + * @param {String} [config.fill] fill color + * @param {Integer} [config.fillRed] set fill red component + * @param {Integer} [config.fillGreen] set fill green component + * @param {Integer} [config.fillBlue] set fill blue component + * @param {Integer} [config.fillAlpha] set fill alpha component + * @param {Image} [config.fillPatternImage] fill pattern image + * @param {Number} [config.fillPatternX] + * @param {Number} [config.fillPatternY] + * @param {Object} [config.fillPatternOffset] object with x and y component + * @param {Number} [config.fillPatternOffsetX] + * @param {Number} [config.fillPatternOffsetY] + * @param {Object} [config.fillPatternScale] object with x and y component + * @param {Number} [config.fillPatternScaleX] + * @param {Number} [config.fillPatternScaleY] + * @param {Number} [config.fillPatternRotation] + * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" + * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component + * @param {Number} [config.fillLinearGradientStartPointX] + * @param {Number} [config.fillLinearGradientStartPointY] + * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component + * @param {Number} [config.fillLinearGradientEndPointX] + * @param {Number} [config.fillLinearGradientEndPointY] + * @param {Array} [config.fillLinearGradientColorStops] array of color stops + * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component + * @param {Number} [config.fillRadialGradientStartPointX] + * @param {Number} [config.fillRadialGradientStartPointY] + * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component + * @param {Number} [config.fillRadialGradientEndPointX] + * @param {Number} [config.fillRadialGradientEndPointY] + * @param {Number} [config.fillRadialGradientStartRadius] + * @param {Number} [config.fillRadialGradientEndRadius] + * @param {Array} [config.fillRadialGradientColorStops] array of color stops + * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true + * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration + * @param {String} [config.stroke] stroke color + * @param {Integer} [config.strokeRed] set stroke red component + * @param {Integer} [config.strokeGreen] set stroke green component + * @param {Integer} [config.strokeBlue] set stroke blue component + * @param {Integer} [config.strokeAlpha] set stroke alpha component + * @param {Number} [config.strokeWidth] stroke width + * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true + * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true + * @param {String} [config.lineJoin] can be miter, round, or bevel. The default + * is miter + * @param {String} [config.lineCap] can be butt, round, or sqare. The default + * is butt + * @param {String} [config.shadowColor] + * @param {Integer} [config.shadowRed] set shadow color red component + * @param {Integer} [config.shadowGreen] set shadow color green component + * @param {Integer} [config.shadowBlue] set shadow color blue component + * @param {Integer} [config.shadowAlpha] set shadow color alpha component + * @param {Number} [config.shadowBlur] + * @param {Object} [config.shadowOffset] object with x and y component + * @param {Number} [config.shadowOffsetX] + * @param {Number} [config.shadowOffsetY] + * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number + * between 0 and 1 + * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true + * @param {Array} [config.dash] * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] + * @param {Number} [config.x] + * @param {Number} [config.y] + * @param {Number} [config.width] + * @param {Number} [config.height] + * @param {Boolean} [config.visible] + * @param {Boolean} [config.listening] whether or not the node is listening for events + * @param {String} [config.id] unique id + * @param {String} [config.name] non-unique name + * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 + * @param {Object} [config.scale] set scale + * @param {Number} [config.scaleX] set scale x + * @param {Number} [config.scaleY] set scale y + * @param {Number} [config.rotation] rotation in degrees + * @param {Object} [config.offset] offset from center point and rotation point + * @param {Number} [config.offsetX] set offset x + * @param {Number} [config.offsetY] set offset y + * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop + * the entire stage by dragging any portion of the stage + * @param {Number} [config.dragDistance] * @param {Function} [config.dragBoundFunc] * @example - * var textpath = new Kinetic.TextPath({ + * var textpath = new Konva.TextPath({ * x: 100, * y: 50, * fill: '#333', @@ -13865,7 +13874,7 @@ var Kinetic = {}; * data: 'M10,10 C0,0 10,150 100,100 S300,150 400,50' * }); */ - Kinetic.TextPath = function(config) { + Konva.TextPath = function(config) { this.___init(config); }; @@ -13876,14 +13885,14 @@ var Kinetic = {}; context.strokeText(this.partialText, 0, 0); } - Kinetic.TextPath.prototype = { + Konva.TextPath.prototype = { ___init: function(config) { var that = this; - this.dummyCanvas = Kinetic.Util.createCanvasElement(); + this.dummyCanvas = Konva.Util.createCanvasElement(); this.dataArray = []; // call super constructor - Kinetic.Shape.call(this, config); + Konva.Shape.call(this, config); // overrides // TODO: shouldn't this be on the prototype? @@ -13894,13 +13903,13 @@ var Kinetic = {}; this.className = 'TextPath'; - this.dataArray = Kinetic.Path.parsePathData(this.attrs.data); - this.on('dataChange.kinetic', function() { - that.dataArray = Kinetic.Path.parsePathData(this.attrs.data); + this.dataArray = Konva.Path.parsePathData(this.attrs.data); + this.on('dataChange.konva', function() { + that.dataArray = Konva.Path.parsePathData(this.attrs.data); }); // update text data for certain attr changes - this.on('textChange.kinetic textStroke.kinetic textStrokeWidth.kinetic', that._setTextData); + this.on('textChange.konva textStroke.konva textStrokeWidth.konva', that._setTextData); that._setTextData(); this.sceneFunc(this._sceneFunc); }, @@ -13939,7 +13948,7 @@ var Kinetic = {}; /** * get text width in pixels * @method - * @memberof Kinetic.TextPath.prototype + * @memberof Konva.TextPath.prototype */ getTextWidth: function() { return this.textWidth; @@ -13947,7 +13956,7 @@ var Kinetic = {}; /** * get text height in pixels * @method - * @memberof Kinetic.TextPath.prototype + * @memberof Konva.TextPath.prototype */ getTextHeight: function() { return this.textHeight; @@ -13955,11 +13964,11 @@ var Kinetic = {}; /** * set text * @method - * @memberof Kinetic.TextPath.prototype + * @memberof Konva.TextPath.prototype * @param {String} text */ setText: function(text) { - Kinetic.Text.prototype.setText.call(this, text); + Konva.Text.prototype.setText.call(this, text); }, _getTextSize: function(text) { var dummyCanvas = this.dummyCanvas; @@ -14041,8 +14050,8 @@ var Kinetic = {}; switch (pathCmd.command) { case 'L': - if(Kinetic.Path.getLineLength(p0.x, p0.y, pathCmd.points[0], pathCmd.points[1]) > glyphWidth) { - p1 = Kinetic.Path.getPointOnLine(glyphWidth, p0.x, p0.y, pathCmd.points[0], pathCmd.points[1], p0.x, p0.y); + if(Konva.Path.getLineLength(p0.x, p0.y, pathCmd.points[0], pathCmd.points[1]) > glyphWidth) { + p1 = Konva.Path.getPointOnLine(glyphWidth, p0.x, p0.y, pathCmd.points[0], pathCmd.points[1], p0.x, p0.y); } else { pathCmd = undefined; @@ -14067,13 +14076,13 @@ var Kinetic = {}; currentT -= Math.PI / 360.0 * dTheta / Math.abs(dTheta); } - // Credit for bug fix: @therth https://github.com/ericdrowell/KineticJS/issues/249 + // Credit for bug fix: @therth https://github.com/ericdrowell/KonvaJS/issues/249 // Old code failed to render text along arc of this path: "M 50 50 a 150 50 0 0 1 250 50 l 50 0" if(dTheta < 0 && currentT < end || dTheta >= 0 && currentT > end) { currentT = end; needNewSegment = true; } - p1 = Kinetic.Path.getPointOnEllipticalArc(pathCmd.points[0], pathCmd.points[1], pathCmd.points[2], pathCmd.points[3], currentT, pathCmd.points[6]); + p1 = Konva.Path.getPointOnEllipticalArc(pathCmd.points[0], pathCmd.points[1], pathCmd.points[2], pathCmd.points[3], currentT, pathCmd.points[6]); break; case 'C': if(currentT === 0) { @@ -14095,7 +14104,7 @@ var Kinetic = {}; currentT = 1.0; needNewSegment = true; } - p1 = Kinetic.Path.getPointOnCubicBezier(currentT, pathCmd.start.x, pathCmd.start.y, pathCmd.points[0], pathCmd.points[1], pathCmd.points[2], pathCmd.points[3], pathCmd.points[4], pathCmd.points[5]); + p1 = Konva.Path.getPointOnCubicBezier(currentT, pathCmd.start.x, pathCmd.start.y, pathCmd.points[0], pathCmd.points[1], pathCmd.points[2], pathCmd.points[3], pathCmd.points[4], pathCmd.points[5]); break; case 'Q': if(currentT === 0) { @@ -14112,13 +14121,13 @@ var Kinetic = {}; currentT = 1.0; needNewSegment = true; } - p1 = Kinetic.Path.getPointOnQuadraticBezier(currentT, pathCmd.start.x, pathCmd.start.y, pathCmd.points[0], pathCmd.points[1], pathCmd.points[2], pathCmd.points[3]); + p1 = Konva.Path.getPointOnQuadraticBezier(currentT, pathCmd.start.x, pathCmd.start.y, pathCmd.points[0], pathCmd.points[1], pathCmd.points[2], pathCmd.points[3]); break; } if(p1 !== undefined) { - currLen = Kinetic.Path.getLineLength(p0.x, p0.y, p1.x, p1.y); + currLen = Konva.Path.getLineLength(p0.x, p0.y, p1.x, p1.y); } if(needNewSegment) { @@ -14136,7 +14145,7 @@ var Kinetic = {}; break; } - var width = Kinetic.Path.getLineLength(p0.x, p0.y, p1.x, p1.y); + var width = Konva.Path.getLineLength(p0.x, p0.y, p1.x, p1.y); // Note: Since glyphs are rendered one at a time, any kerning pair data built into the font will not be used. // Can foresee having a rough pair table built in that the developer can override as needed. @@ -14144,7 +14153,7 @@ var Kinetic = {}; var kern = 0; // placeholder for future implementation - var midpoint = Kinetic.Path.getPointOnLine(kern + width / 2.0, p0.x, p0.y, p1.x, p1.y); + var midpoint = Konva.Path.getPointOnLine(kern + width / 2.0, p0.x, p0.y, p1.x, p1.y); var rotation = Math.atan2((p1.y - p0.y), (p1.x - p0.x)); this.glyphInfo.push({ @@ -14161,18 +14170,18 @@ var Kinetic = {}; }; // map TextPath methods to Text - Kinetic.TextPath.prototype._getContextFont = Kinetic.Text.prototype._getContextFont; + Konva.TextPath.prototype._getContextFont = Konva.Text.prototype._getContextFont; - Kinetic.Util.extend(Kinetic.TextPath, Kinetic.Shape); + Konva.Util.extend(Konva.TextPath, Konva.Shape); // add setters and getters - Kinetic.Factory.addGetterSetter(Kinetic.TextPath, 'fontFamily', 'Arial'); + Konva.Factory.addGetterSetter(Konva.TextPath, 'fontFamily', 'Arial'); /** * set font family * @name setFontFamily * @method - * @memberof Kinetic.TextPath.prototype + * @memberof Konva.TextPath.prototype * @param {String} fontFamily */ @@ -14180,16 +14189,16 @@ var Kinetic = {}; * get font family * @name getFontFamily * @method - * @memberof Kinetic.TextPath.prototype + * @memberof Konva.TextPath.prototype */ - Kinetic.Factory.addGetterSetter(Kinetic.TextPath, 'fontSize', 12); + Konva.Factory.addGetterSetter(Konva.TextPath, 'fontSize', 12); /** * set font size * @name setFontSize * @method - * @memberof Kinetic.TextPath.prototype + * @memberof Konva.TextPath.prototype * @param {int} fontSize */ @@ -14197,16 +14206,16 @@ var Kinetic = {}; * get font size * @name getFontSize * @method - * @memberof Kinetic.TextPath.prototype + * @memberof Konva.TextPath.prototype */ - Kinetic.Factory.addGetterSetter(Kinetic.TextPath, 'fontStyle', NORMAL); + Konva.Factory.addGetterSetter(Konva.TextPath, 'fontStyle', NORMAL); /** * set font style. Can be 'normal', 'italic', or 'bold'. 'normal' is the default. * @name setFontStyle * @method - * @memberof Kinetic.TextPath.prototype + * @memberof Konva.TextPath.prototype * @param {String} fontStyle */ @@ -14214,16 +14223,16 @@ var Kinetic = {}; * get font style * @name getFontStyle * @method - * @memberof Kinetic.TextPath.prototype + * @memberof Konva.TextPath.prototype */ - Kinetic.Factory.addGetterSetter(Kinetic.TextPath, 'fontVariant', NORMAL); + Konva.Factory.addGetterSetter(Konva.TextPath, 'fontVariant', NORMAL); /** * set font variant. Can be 'normal' or 'small-caps'. 'normal' is the default. * @name setFontVariant * @method - * @memberof Kinetic.TextPath.prototype + * @memberof Konva.TextPath.prototype * @param {String} fontVariant */ @@ -14231,111 +14240,111 @@ var Kinetic = {}; * @get font variant * @name getFontVariant * @method - * @memberof Kinetic.TextPath.prototype + * @memberof Konva.TextPath.prototype */ - Kinetic.Factory.addGetter(Kinetic.TextPath, 'text', EMPTY_STRING); + Konva.Factory.addGetter(Konva.TextPath, 'text', EMPTY_STRING); /** * get text * @name getText * @method - * @memberof Kinetic.TextPath.prototype + * @memberof Konva.TextPath.prototype */ - Kinetic.Collection.mapMethods(Kinetic.TextPath); + Konva.Collection.mapMethods(Konva.TextPath); })(); ;(function() { /** * RegularPolygon constructor.  Examples include triangles, squares, pentagons, hexagons, etc. * @constructor - * @memberof Kinetic - * @augments Kinetic.Shape + * @memberof Konva + * @augments Konva.Shape * @param {Object} config * @param {Number} config.sides * @param {Number} config.radius - * @param {String} [config.fill] fill color - * @param {Integer} [config.fillRed] set fill red component - * @param {Integer} [config.fillGreen] set fill green component - * @param {Integer} [config.fillBlue] set fill blue component - * @param {Integer} [config.fillAlpha] set fill alpha component - * @param {Image} [config.fillPatternImage] fill pattern image - * @param {Number} [config.fillPatternX] - * @param {Number} [config.fillPatternY] - * @param {Object} [config.fillPatternOffset] object with x and y component - * @param {Number} [config.fillPatternOffsetX] - * @param {Number} [config.fillPatternOffsetY] - * @param {Object} [config.fillPatternScale] object with x and y component - * @param {Number} [config.fillPatternScaleX] - * @param {Number} [config.fillPatternScaleY] - * @param {Number} [config.fillPatternRotation] - * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" - * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component - * @param {Number} [config.fillLinearGradientStartPointX] - * @param {Number} [config.fillLinearGradientStartPointY] - * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component - * @param {Number} [config.fillLinearGradientEndPointX] - * @param {Number} [config.fillLinearGradientEndPointY] - * @param {Array} [config.fillLinearGradientColorStops] array of color stops - * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component - * @param {Number} [config.fillRadialGradientStartPointX] - * @param {Number} [config.fillRadialGradientStartPointY] - * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component - * @param {Number} [config.fillRadialGradientEndPointX] - * @param {Number} [config.fillRadialGradientEndPointY] - * @param {Number} [config.fillRadialGradientStartRadius] - * @param {Number} [config.fillRadialGradientEndRadius] - * @param {Array} [config.fillRadialGradientColorStops] array of color stops - * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true - * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration - * @param {String} [config.stroke] stroke color - * @param {Integer} [config.strokeRed] set stroke red component - * @param {Integer} [config.strokeGreen] set stroke green component - * @param {Integer} [config.strokeBlue] set stroke blue component - * @param {Integer} [config.strokeAlpha] set stroke alpha component - * @param {Number} [config.strokeWidth] stroke width - * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true - * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true - * @param {String} [config.lineJoin] can be miter, round, or bevel. The default - * is miter - * @param {String} [config.lineCap] can be butt, round, or sqare. The default - * is butt - * @param {String} [config.shadowColor] - * @param {Integer} [config.shadowRed] set shadow color red component - * @param {Integer} [config.shadowGreen] set shadow color green component - * @param {Integer} [config.shadowBlue] set shadow color blue component - * @param {Integer} [config.shadowAlpha] set shadow color alpha component - * @param {Number} [config.shadowBlur] - * @param {Object} [config.shadowOffset] object with x and y component - * @param {Number} [config.shadowOffsetX] - * @param {Number} [config.shadowOffsetY] - * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number - * between 0 and 1 - * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true - * @param {Array} [config.dash] + * @param {String} [config.fill] fill color + * @param {Integer} [config.fillRed] set fill red component + * @param {Integer} [config.fillGreen] set fill green component + * @param {Integer} [config.fillBlue] set fill blue component + * @param {Integer} [config.fillAlpha] set fill alpha component + * @param {Image} [config.fillPatternImage] fill pattern image + * @param {Number} [config.fillPatternX] + * @param {Number} [config.fillPatternY] + * @param {Object} [config.fillPatternOffset] object with x and y component + * @param {Number} [config.fillPatternOffsetX] + * @param {Number} [config.fillPatternOffsetY] + * @param {Object} [config.fillPatternScale] object with x and y component + * @param {Number} [config.fillPatternScaleX] + * @param {Number} [config.fillPatternScaleY] + * @param {Number} [config.fillPatternRotation] + * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" + * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component + * @param {Number} [config.fillLinearGradientStartPointX] + * @param {Number} [config.fillLinearGradientStartPointY] + * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component + * @param {Number} [config.fillLinearGradientEndPointX] + * @param {Number} [config.fillLinearGradientEndPointY] + * @param {Array} [config.fillLinearGradientColorStops] array of color stops + * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component + * @param {Number} [config.fillRadialGradientStartPointX] + * @param {Number} [config.fillRadialGradientStartPointY] + * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component + * @param {Number} [config.fillRadialGradientEndPointX] + * @param {Number} [config.fillRadialGradientEndPointY] + * @param {Number} [config.fillRadialGradientStartRadius] + * @param {Number} [config.fillRadialGradientEndRadius] + * @param {Array} [config.fillRadialGradientColorStops] array of color stops + * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true + * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration + * @param {String} [config.stroke] stroke color + * @param {Integer} [config.strokeRed] set stroke red component + * @param {Integer} [config.strokeGreen] set stroke green component + * @param {Integer} [config.strokeBlue] set stroke blue component + * @param {Integer} [config.strokeAlpha] set stroke alpha component + * @param {Number} [config.strokeWidth] stroke width + * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true + * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true + * @param {String} [config.lineJoin] can be miter, round, or bevel. The default + * is miter + * @param {String} [config.lineCap] can be butt, round, or sqare. The default + * is butt + * @param {String} [config.shadowColor] + * @param {Integer} [config.shadowRed] set shadow color red component + * @param {Integer} [config.shadowGreen] set shadow color green component + * @param {Integer} [config.shadowBlue] set shadow color blue component + * @param {Integer} [config.shadowAlpha] set shadow color alpha component + * @param {Number} [config.shadowBlur] + * @param {Object} [config.shadowOffset] object with x and y component + * @param {Number} [config.shadowOffsetX] + * @param {Number} [config.shadowOffsetY] + * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number + * between 0 and 1 + * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true + * @param {Array} [config.dash] * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] + * @param {Number} [config.x] + * @param {Number} [config.y] + * @param {Number} [config.width] + * @param {Number} [config.height] + * @param {Boolean} [config.visible] + * @param {Boolean} [config.listening] whether or not the node is listening for events + * @param {String} [config.id] unique id + * @param {String} [config.name] non-unique name + * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 + * @param {Object} [config.scale] set scale + * @param {Number} [config.scaleX] set scale x + * @param {Number} [config.scaleY] set scale y + * @param {Number} [config.rotation] rotation in degrees + * @param {Object} [config.offset] offset from center point and rotation point + * @param {Number} [config.offsetX] set offset x + * @param {Number} [config.offsetY] set offset y + * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop + * the entire stage by dragging any portion of the stage + * @param {Number} [config.dragDistance] * @param {Function} [config.dragBoundFunc] * @example - * var hexagon = new Kinetic.RegularPolygon({ + * var hexagon = new Konva.RegularPolygon({ * x: 100, * y: 200, * sides: 6, @@ -14345,14 +14354,14 @@ var Kinetic = {}; * strokeWidth: 4 * }); */ - Kinetic.RegularPolygon = function(config) { + Konva.RegularPolygon = function(config) { this.___init(config); }; - Kinetic.RegularPolygon.prototype = { + Konva.RegularPolygon.prototype = { ___init: function(config) { // call super constructor - Kinetic.Shape.call(this, config); + Konva.Shape.call(this, config); this.className = 'RegularPolygon'; this.sceneFunc(this._sceneFunc); }, @@ -14373,16 +14382,16 @@ var Kinetic = {}; context.fillStrokeShape(this); } }; - Kinetic.Util.extend(Kinetic.RegularPolygon, Kinetic.Shape); + Konva.Util.extend(Konva.RegularPolygon, Konva.Shape); // add getters setters - Kinetic.Factory.addGetterSetter(Kinetic.RegularPolygon, 'radius', 0); + Konva.Factory.addGetterSetter(Konva.RegularPolygon, 'radius', 0); /** * set radius * @name setRadius * @method - * @memberof Kinetic.RegularPolygon.prototype + * @memberof Konva.RegularPolygon.prototype * @param {Number} radius */ @@ -14390,16 +14399,16 @@ var Kinetic = {}; * get radius * @name getRadius * @method - * @memberof Kinetic.RegularPolygon.prototype + * @memberof Konva.RegularPolygon.prototype */ - Kinetic.Factory.addGetterSetter(Kinetic.RegularPolygon, 'sides', 0); + Konva.Factory.addGetterSetter(Konva.RegularPolygon, 'sides', 0); /** * set number of sides * @name setSides * @method - * @memberof Kinetic.RegularPolygon.prototype + * @memberof Konva.RegularPolygon.prototype * @param {int} sides */ @@ -14407,103 +14416,103 @@ var Kinetic = {}; * get number of sides * @name getSides * @method - * @memberof Kinetic.RegularPolygon.prototype + * @memberof Konva.RegularPolygon.prototype */ - Kinetic.Collection.mapMethods(Kinetic.RegularPolygon); + Konva.Collection.mapMethods(Konva.RegularPolygon); })(); ;(function() { /** * Star constructor * @constructor - * @memberof Kinetic - * @augments Kinetic.Shape + * @memberof Konva + * @augments Konva.Shape * @param {Object} config * @param {Integer} config.numPoints * @param {Number} config.innerRadius * @param {Number} config.outerRadius - * @param {String} [config.fill] fill color - * @param {Integer} [config.fillRed] set fill red component - * @param {Integer} [config.fillGreen] set fill green component - * @param {Integer} [config.fillBlue] set fill blue component - * @param {Integer} [config.fillAlpha] set fill alpha component - * @param {Image} [config.fillPatternImage] fill pattern image - * @param {Number} [config.fillPatternX] - * @param {Number} [config.fillPatternY] - * @param {Object} [config.fillPatternOffset] object with x and y component - * @param {Number} [config.fillPatternOffsetX] - * @param {Number} [config.fillPatternOffsetY] - * @param {Object} [config.fillPatternScale] object with x and y component - * @param {Number} [config.fillPatternScaleX] - * @param {Number} [config.fillPatternScaleY] - * @param {Number} [config.fillPatternRotation] - * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" - * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component - * @param {Number} [config.fillLinearGradientStartPointX] - * @param {Number} [config.fillLinearGradientStartPointY] - * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component - * @param {Number} [config.fillLinearGradientEndPointX] - * @param {Number} [config.fillLinearGradientEndPointY] - * @param {Array} [config.fillLinearGradientColorStops] array of color stops - * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component - * @param {Number} [config.fillRadialGradientStartPointX] - * @param {Number} [config.fillRadialGradientStartPointY] - * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component - * @param {Number} [config.fillRadialGradientEndPointX] - * @param {Number} [config.fillRadialGradientEndPointY] - * @param {Number} [config.fillRadialGradientStartRadius] - * @param {Number} [config.fillRadialGradientEndRadius] - * @param {Array} [config.fillRadialGradientColorStops] array of color stops - * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true - * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration - * @param {String} [config.stroke] stroke color - * @param {Integer} [config.strokeRed] set stroke red component - * @param {Integer} [config.strokeGreen] set stroke green component - * @param {Integer} [config.strokeBlue] set stroke blue component - * @param {Integer} [config.strokeAlpha] set stroke alpha component - * @param {Number} [config.strokeWidth] stroke width - * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true - * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true - * @param {String} [config.lineJoin] can be miter, round, or bevel. The default - * is miter - * @param {String} [config.lineCap] can be butt, round, or sqare. The default - * is butt - * @param {String} [config.shadowColor] - * @param {Integer} [config.shadowRed] set shadow color red component - * @param {Integer} [config.shadowGreen] set shadow color green component - * @param {Integer} [config.shadowBlue] set shadow color blue component - * @param {Integer} [config.shadowAlpha] set shadow color alpha component - * @param {Number} [config.shadowBlur] - * @param {Object} [config.shadowOffset] object with x and y component - * @param {Number} [config.shadowOffsetX] - * @param {Number} [config.shadowOffsetY] - * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number - * between 0 and 1 - * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true - * @param {Array} [config.dash] + * @param {String} [config.fill] fill color + * @param {Integer} [config.fillRed] set fill red component + * @param {Integer} [config.fillGreen] set fill green component + * @param {Integer} [config.fillBlue] set fill blue component + * @param {Integer} [config.fillAlpha] set fill alpha component + * @param {Image} [config.fillPatternImage] fill pattern image + * @param {Number} [config.fillPatternX] + * @param {Number} [config.fillPatternY] + * @param {Object} [config.fillPatternOffset] object with x and y component + * @param {Number} [config.fillPatternOffsetX] + * @param {Number} [config.fillPatternOffsetY] + * @param {Object} [config.fillPatternScale] object with x and y component + * @param {Number} [config.fillPatternScaleX] + * @param {Number} [config.fillPatternScaleY] + * @param {Number} [config.fillPatternRotation] + * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" + * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component + * @param {Number} [config.fillLinearGradientStartPointX] + * @param {Number} [config.fillLinearGradientStartPointY] + * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component + * @param {Number} [config.fillLinearGradientEndPointX] + * @param {Number} [config.fillLinearGradientEndPointY] + * @param {Array} [config.fillLinearGradientColorStops] array of color stops + * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component + * @param {Number} [config.fillRadialGradientStartPointX] + * @param {Number} [config.fillRadialGradientStartPointY] + * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component + * @param {Number} [config.fillRadialGradientEndPointX] + * @param {Number} [config.fillRadialGradientEndPointY] + * @param {Number} [config.fillRadialGradientStartRadius] + * @param {Number} [config.fillRadialGradientEndRadius] + * @param {Array} [config.fillRadialGradientColorStops] array of color stops + * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true + * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration + * @param {String} [config.stroke] stroke color + * @param {Integer} [config.strokeRed] set stroke red component + * @param {Integer} [config.strokeGreen] set stroke green component + * @param {Integer} [config.strokeBlue] set stroke blue component + * @param {Integer} [config.strokeAlpha] set stroke alpha component + * @param {Number} [config.strokeWidth] stroke width + * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true + * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true + * @param {String} [config.lineJoin] can be miter, round, or bevel. The default + * is miter + * @param {String} [config.lineCap] can be butt, round, or sqare. The default + * is butt + * @param {String} [config.shadowColor] + * @param {Integer} [config.shadowRed] set shadow color red component + * @param {Integer} [config.shadowGreen] set shadow color green component + * @param {Integer} [config.shadowBlue] set shadow color blue component + * @param {Integer} [config.shadowAlpha] set shadow color alpha component + * @param {Number} [config.shadowBlur] + * @param {Object} [config.shadowOffset] object with x and y component + * @param {Number} [config.shadowOffsetX] + * @param {Number} [config.shadowOffsetY] + * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number + * between 0 and 1 + * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true + * @param {Array} [config.dash] * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] + * @param {Number} [config.x] + * @param {Number} [config.y] + * @param {Number} [config.width] + * @param {Number} [config.height] + * @param {Boolean} [config.visible] + * @param {Boolean} [config.listening] whether or not the node is listening for events + * @param {String} [config.id] unique id + * @param {String} [config.name] non-unique name + * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 + * @param {Object} [config.scale] set scale + * @param {Number} [config.scaleX] set scale x + * @param {Number} [config.scaleY] set scale y + * @param {Number} [config.rotation] rotation in degrees + * @param {Object} [config.offset] offset from center point and rotation point + * @param {Number} [config.offsetX] set offset x + * @param {Number} [config.offsetY] set offset y + * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop + * the entire stage by dragging any portion of the stage + * @param {Number} [config.dragDistance] * @param {Function} [config.dragBoundFunc] * @example - * var star = new Kinetic.Star({ + * var star = new Konva.Star({ * x: 100, * y: 200, * numPoints: 5, @@ -14514,14 +14523,14 @@ var Kinetic = {}; * strokeWidth: 4 * }); */ - Kinetic.Star = function(config) { + Konva.Star = function(config) { this.___init(config); }; - Kinetic.Star.prototype = { + Konva.Star.prototype = { ___init: function(config) { // call super constructor - Kinetic.Shape.call(this, config); + Konva.Shape.call(this, config); this.className = 'Star'; this.sceneFunc(this._sceneFunc); }, @@ -14544,16 +14553,16 @@ var Kinetic = {}; context.fillStrokeShape(this); } }; - Kinetic.Util.extend(Kinetic.Star, Kinetic.Shape); + Konva.Util.extend(Konva.Star, Konva.Shape); // add getters setters - Kinetic.Factory.addGetterSetter(Kinetic.Star, 'numPoints', 5); + Konva.Factory.addGetterSetter(Konva.Star, 'numPoints', 5); /** * set number of points * @name setNumPoints * @method - * @memberof Kinetic.Star.prototype + * @memberof Konva.Star.prototype * @param {Integer} points */ @@ -14561,16 +14570,16 @@ var Kinetic = {}; * get number of points * @name getNumPoints * @method - * @memberof Kinetic.Star.prototype + * @memberof Konva.Star.prototype */ - Kinetic.Factory.addGetterSetter(Kinetic.Star, 'innerRadius', 0); + Konva.Factory.addGetterSetter(Konva.Star, 'innerRadius', 0); /** * set inner radius * @name setInnerRadius * @method - * @memberof Kinetic.Star.prototype + * @memberof Konva.Star.prototype * @param {Number} radius */ @@ -14578,16 +14587,16 @@ var Kinetic = {}; * get inner radius * @name getInnerRadius * @method - * @memberof Kinetic.Star.prototype + * @memberof Konva.Star.prototype */ - Kinetic.Factory.addGetterSetter(Kinetic.Star, 'outerRadius', 0); + Konva.Factory.addGetterSetter(Konva.Star, 'outerRadius', 0); /** * set outer radius * @name setOuterRadius * @method - * @memberof Kinetic.Star.prototype + * @memberof Konva.Star.prototype * @param {Number} radius */ @@ -14595,15 +14604,15 @@ var Kinetic = {}; * get outer radius * @name getOuterRadius * @method - * @memberof Kinetic.Star.prototype + * @memberof Konva.Star.prototype */ - Kinetic.Collection.mapMethods(Kinetic.Star); + Konva.Collection.mapMethods(Konva.Star); })(); ;(function() { // constants var ATTR_CHANGE_LIST = ['fontFamily', 'fontSize', 'fontStyle', 'padding', 'lineHeight', 'text'], - CHANGE_KINETIC = 'Change.kinetic', + CHANGE_KINETIC = 'Change.konva', NONE = 'none', UP = 'up', RIGHT = 'right', @@ -14617,38 +14626,38 @@ var Kinetic = {}; /** * Label constructor.  Labels are groups that contain a Text and Tag shape * @constructor - * @memberof Kinetic + * @memberof Konva * @param {Object} config - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] + * @param {Number} [config.x] + * @param {Number} [config.y] + * @param {Number} [config.width] + * @param {Number} [config.height] + * @param {Boolean} [config.visible] + * @param {Boolean} [config.listening] whether or not the node is listening for events + * @param {String} [config.id] unique id + * @param {String} [config.name] non-unique name + * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 + * @param {Object} [config.scale] set scale + * @param {Number} [config.scaleX] set scale x + * @param {Number} [config.scaleY] set scale y + * @param {Number} [config.rotation] rotation in degrees + * @param {Object} [config.offset] offset from center point and rotation point + * @param {Number} [config.offsetX] set offset x + * @param {Number} [config.offsetY] set offset y + * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop + * the entire stage by dragging any portion of the stage + * @param {Number} [config.dragDistance] * @param {Function} [config.dragBoundFunc] * @example * // create label - * var label = new Kinetic.Label({ + * var label = new Konva.Label({ * x: 100, * y: 100, * draggable: true * }); * * // add a tag to the label - * label.add(new Kinetic.Tag({ + * label.add(new Konva.Tag({ * fill: '#bbb', * stroke: '#333', * shadowColor: 'black', @@ -14663,7 +14672,7 @@ var Kinetic = {}; * })); * * // add text to the label - * label.add(new Kinetic.Text({ + * label.add(new Konva.Text({ * text: 'Hello World!', * fontSize: 50, * lineHeight: 1.2, @@ -14671,18 +14680,18 @@ var Kinetic = {}; * fill: 'green' * })); */ - Kinetic.Label = function(config) { + Konva.Label = function(config) { this.____init(config); }; - Kinetic.Label.prototype = { + Konva.Label.prototype = { ____init: function(config) { var that = this; - Kinetic.Group.call(this, config); + Konva.Group.call(this, config); this.className = LABEL; - this.on('add.kinetic', function(evt) { + this.on('add.konva', function(evt) { that._addListeners(evt.child); that._sync(); }); @@ -14692,7 +14701,7 @@ var Kinetic = {}; * the text properties * @name getText * @method - * @memberof Kinetic.Label.prototype + * @memberof Konva.Label.prototype */ getText: function() { return this.find('Text')[0]; @@ -14702,7 +14711,7 @@ var Kinetic = {}; * the pointer properties and the corner radius * @name getTag * @method - * @memberof Kinetic.Label.prototype + * @memberof Konva.Label.prototype */ getTag: function() { return this.find('Tag')[0]; @@ -14773,15 +14782,15 @@ var Kinetic = {}; } }; - Kinetic.Util.extend(Kinetic.Label, Kinetic.Group); + Konva.Util.extend(Konva.Label, Konva.Group); - Kinetic.Collection.mapMethods(Kinetic.Label); + Konva.Collection.mapMethods(Konva.Label); /** * Tag constructor.  A Tag can be configured * to have a pointer element that points up, right, down, or left * @constructor - * @memberof Kinetic + * @memberof Konva * @param {Object} config * @param {String} [config.pointerDirection] can be up, right, down, left, or none; the default * is none. When a pointer is present, the positioning of the label is relative to the tip of the pointer. @@ -14789,13 +14798,13 @@ var Kinetic = {}; * @param {Number} [config.pointerHeight] * @param {Number} [config.cornerRadius] */ - Kinetic.Tag = function(config) { + Konva.Tag = function(config) { this.___init(config); }; - Kinetic.Tag.prototype = { + Konva.Tag.prototype = { ___init: function(config) { - Kinetic.Shape.call(this, config); + Konva.Shape.call(this, config); this.className = 'Tag'; this.sceneFunc(this._sceneFunc); }, @@ -14865,14 +14874,14 @@ var Kinetic = {}; } }; - Kinetic.Util.extend(Kinetic.Tag, Kinetic.Shape); - Kinetic.Factory.addGetterSetter(Kinetic.Tag, 'pointerDirection', NONE); + Konva.Util.extend(Konva.Tag, Konva.Shape); + Konva.Factory.addGetterSetter(Konva.Tag, 'pointerDirection', NONE); /** * set pointer Direction * @name setPointerDirection * @method - * @memberof Kinetic.Tag.prototype + * @memberof Konva.Tag.prototype * @param {String} pointerDirection can be up, right, down, left, or none. The * default is none */ @@ -14881,16 +14890,16 @@ var Kinetic = {}; * get pointer Direction * @name getPointerDirection * @method - * @memberof Kinetic.Tag.prototype + * @memberof Konva.Tag.prototype */ - Kinetic.Factory.addGetterSetter(Kinetic.Tag, 'pointerWidth', 0); + Konva.Factory.addGetterSetter(Konva.Tag, 'pointerWidth', 0); /** * set pointer width * @name setPointerWidth * @method - * @memberof Kinetic.Tag.prototype + * @memberof Konva.Tag.prototype * @param {Number} pointerWidth */ @@ -14898,16 +14907,16 @@ var Kinetic = {}; * get pointer width * @name getPointerWidth * @method - * @memberof Kinetic.Tag.prototype + * @memberof Konva.Tag.prototype */ - Kinetic.Factory.addGetterSetter(Kinetic.Tag, 'pointerHeight', 0); + Konva.Factory.addGetterSetter(Konva.Tag, 'pointerHeight', 0); /** * set pointer height * @name setPointerHeight * @method - * @memberof Kinetic.Tag.prototype + * @memberof Konva.Tag.prototype * @param {Number} pointerHeight */ @@ -14915,16 +14924,16 @@ var Kinetic = {}; * get pointer height * @name getPointerHeight * @method - * @memberof Kinetic.Tag.prototype + * @memberof Konva.Tag.prototype */ - Kinetic.Factory.addGetterSetter(Kinetic.Tag, 'cornerRadius', 0); + Konva.Factory.addGetterSetter(Konva.Tag, 'cornerRadius', 0); /** * set corner radius * @name setCornerRadius * @method - * @memberof Kinetic.Tag.prototype + * @memberof Konva.Tag.prototype * @param {Number} corner radius */ @@ -14932,105 +14941,105 @@ var Kinetic = {}; * get corner radius * @name getCornerRadius * @method - * @memberof Kinetic.Tag.prototype + * @memberof Konva.Tag.prototype */ - Kinetic.Collection.mapMethods(Kinetic.Tag); + Konva.Collection.mapMethods(Konva.Tag); })(); ;(function() { /** * Arrow constructor * @constructor - * @memberof Kinetic - * @augments Kinetic.Shape + * @memberof Konva + * @augments Konva.Shape * @param {Object} config * @param {Array} config.points * @param {Number} [config.tension] Higher values will result in a more curvy line. A value of 0 will result in no interpolation. * The default is 0 * @param {Number} config.pointerLength * @param {Number} config.pointerWidth - * @param {String} [config.fill] fill color - * @param {Integer} [config.fillRed] set fill red component - * @param {Integer} [config.fillGreen] set fill green component - * @param {Integer} [config.fillBlue] set fill blue component - * @param {Integer} [config.fillAlpha] set fill alpha component - * @param {Image} [config.fillPatternImage] fill pattern image - * @param {Number} [config.fillPatternX] - * @param {Number} [config.fillPatternY] - * @param {Object} [config.fillPatternOffset] object with x and y component - * @param {Number} [config.fillPatternOffsetX] - * @param {Number} [config.fillPatternOffsetY] - * @param {Object} [config.fillPatternScale] object with x and y component - * @param {Number} [config.fillPatternScaleX] - * @param {Number} [config.fillPatternScaleY] - * @param {Number} [config.fillPatternRotation] - * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" - * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component - * @param {Number} [config.fillLinearGradientStartPointX] - * @param {Number} [config.fillLinearGradientStartPointY] - * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component - * @param {Number} [config.fillLinearGradientEndPointX] - * @param {Number} [config.fillLinearGradientEndPointY] - * @param {Array} [config.fillLinearGradientColorStops] array of color stops - * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component - * @param {Number} [config.fillRadialGradientStartPointX] - * @param {Number} [config.fillRadialGradientStartPointY] - * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component - * @param {Number} [config.fillRadialGradientEndPointX] - * @param {Number} [config.fillRadialGradientEndPointY] - * @param {Number} [config.fillRadialGradientStartRadius] - * @param {Number} [config.fillRadialGradientEndRadius] - * @param {Array} [config.fillRadialGradientColorStops] array of color stops - * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true - * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration - * @param {String} [config.stroke] stroke color - * @param {Integer} [config.strokeRed] set stroke red component - * @param {Integer} [config.strokeGreen] set stroke green component - * @param {Integer} [config.strokeBlue] set stroke blue component - * @param {Integer} [config.strokeAlpha] set stroke alpha component - * @param {Number} [config.strokeWidth] stroke width - * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true - * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true - * @param {String} [config.lineJoin] can be miter, round, or bevel. The default - * is miter - * @param {String} [config.lineCap] can be butt, round, or sqare. The default - * is butt - * @param {String} [config.shadowColor] - * @param {Integer} [config.shadowRed] set shadow color red component - * @param {Integer} [config.shadowGreen] set shadow color green component - * @param {Integer} [config.shadowBlue] set shadow color blue component - * @param {Integer} [config.shadowAlpha] set shadow color alpha component - * @param {Number} [config.shadowBlur] - * @param {Object} [config.shadowOffset] object with x and y component - * @param {Number} [config.shadowOffsetX] - * @param {Number} [config.shadowOffsetY] - * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number - * between 0 and 1 - * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true - * @param {Array} [config.dash] + * @param {String} [config.fill] fill color + * @param {Integer} [config.fillRed] set fill red component + * @param {Integer} [config.fillGreen] set fill green component + * @param {Integer} [config.fillBlue] set fill blue component + * @param {Integer} [config.fillAlpha] set fill alpha component + * @param {Image} [config.fillPatternImage] fill pattern image + * @param {Number} [config.fillPatternX] + * @param {Number} [config.fillPatternY] + * @param {Object} [config.fillPatternOffset] object with x and y component + * @param {Number} [config.fillPatternOffsetX] + * @param {Number} [config.fillPatternOffsetY] + * @param {Object} [config.fillPatternScale] object with x and y component + * @param {Number} [config.fillPatternScaleX] + * @param {Number} [config.fillPatternScaleY] + * @param {Number} [config.fillPatternRotation] + * @param {String} [config.fillPatternRepeat] can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat" + * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component + * @param {Number} [config.fillLinearGradientStartPointX] + * @param {Number} [config.fillLinearGradientStartPointY] + * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component + * @param {Number} [config.fillLinearGradientEndPointX] + * @param {Number} [config.fillLinearGradientEndPointY] + * @param {Array} [config.fillLinearGradientColorStops] array of color stops + * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component + * @param {Number} [config.fillRadialGradientStartPointX] + * @param {Number} [config.fillRadialGradientStartPointY] + * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component + * @param {Number} [config.fillRadialGradientEndPointX] + * @param {Number} [config.fillRadialGradientEndPointY] + * @param {Number} [config.fillRadialGradientStartRadius] + * @param {Number} [config.fillRadialGradientEndRadius] + * @param {Array} [config.fillRadialGradientColorStops] array of color stops + * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true + * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration + * @param {String} [config.stroke] stroke color + * @param {Integer} [config.strokeRed] set stroke red component + * @param {Integer} [config.strokeGreen] set stroke green component + * @param {Integer} [config.strokeBlue] set stroke blue component + * @param {Integer} [config.strokeAlpha] set stroke alpha component + * @param {Number} [config.strokeWidth] stroke width + * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true + * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true + * @param {String} [config.lineJoin] can be miter, round, or bevel. The default + * is miter + * @param {String} [config.lineCap] can be butt, round, or sqare. The default + * is butt + * @param {String} [config.shadowColor] + * @param {Integer} [config.shadowRed] set shadow color red component + * @param {Integer} [config.shadowGreen] set shadow color green component + * @param {Integer} [config.shadowBlue] set shadow color blue component + * @param {Integer} [config.shadowAlpha] set shadow color alpha component + * @param {Number} [config.shadowBlur] + * @param {Object} [config.shadowOffset] object with x and y component + * @param {Number} [config.shadowOffsetX] + * @param {Number} [config.shadowOffsetY] + * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number + * between 0 and 1 + * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true + * @param {Array} [config.dash] * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true - * @param {Number} [config.x] - * @param {Number} [config.y] - * @param {Number} [config.width] - * @param {Number} [config.height] - * @param {Boolean} [config.visible] - * @param {Boolean} [config.listening] whether or not the node is listening for events - * @param {String} [config.id] unique id - * @param {String} [config.name] non-unique name - * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 - * @param {Object} [config.scale] set scale - * @param {Number} [config.scaleX] set scale x - * @param {Number} [config.scaleY] set scale y - * @param {Number} [config.rotation] rotation in degrees - * @param {Object} [config.offset] offset from center point and rotation point - * @param {Number} [config.offsetX] set offset x - * @param {Number} [config.offsetY] set offset y - * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop - * the entire stage by dragging any portion of the stage - * @param {Number} [config.dragDistance] + * @param {Number} [config.x] + * @param {Number} [config.y] + * @param {Number} [config.width] + * @param {Number} [config.height] + * @param {Boolean} [config.visible] + * @param {Boolean} [config.listening] whether or not the node is listening for events + * @param {String} [config.id] unique id + * @param {String} [config.name] non-unique name + * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 + * @param {Object} [config.scale] set scale + * @param {Number} [config.scaleX] set scale x + * @param {Number} [config.scaleY] set scale y + * @param {Number} [config.rotation] rotation in degrees + * @param {Object} [config.offset] offset from center point and rotation point + * @param {Number} [config.offsetX] set offset x + * @param {Number} [config.offsetY] set offset y + * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop + * the entire stage by dragging any portion of the stage + * @param {Number} [config.dragDistance] * @param {Function} [config.dragBoundFunc] * @example - * var line = new Kinetic.Line({ + * var line = new Konva.Line({ * points: [73, 70, 340, 23, 450, 60, 500, 20], * stroke: 'red', * tension: 1, @@ -15038,14 +15047,14 @@ var Kinetic = {}; * pointerWidth : 12 * }); */ - Kinetic.Arrow = function(config) { + Konva.Arrow = function(config) { this.____init(config); }; - Kinetic.Arrow.prototype = { + Konva.Arrow.prototype = { ____init : function(config) { // call super constructor - Kinetic.Line.call(this, config); + Konva.Line.call(this, config); this.className = 'Arrow'; }, _sceneFunc : function(ctx) { @@ -15082,16 +15091,16 @@ var Kinetic = {}; } ctx.fillStrokeShape(this); - Kinetic.Line.prototype._sceneFunc.apply(this, arguments); + Konva.Line.prototype._sceneFunc.apply(this, arguments); } }; - Kinetic.Util.extend(Kinetic.Arrow, Kinetic.Line); + Konva.Util.extend(Konva.Arrow, Konva.Line); /** * get/set pointerLength * @name pointerLength * @method - * @memberof Kinetic.Arrow.prototype + * @memberof Konva.Arrow.prototype * @param {Number} Length of pointer of arrow. * The default is 10. * @returns {Number} @@ -15103,12 +15112,12 @@ var Kinetic = {}; * line.pointerLength(15); */ - Kinetic.Factory.addGetterSetter(Kinetic.Arrow, 'pointerLength', 10); + Konva.Factory.addGetterSetter(Konva.Arrow, 'pointerLength', 10); /** * get/set pointerWidth * @name pointerWidth * @method - * @memberof Kinetic.Arrow.prototype + * @memberof Konva.Arrow.prototype * @param {Number} Width of pointer of arrow. * The default is 10. * @returns {Number} @@ -15120,12 +15129,12 @@ var Kinetic = {}; * line.pointerWidth(15); */ - Kinetic.Factory.addGetterSetter(Kinetic.Arrow, 'pointerWidth', 10); + Konva.Factory.addGetterSetter(Konva.Arrow, 'pointerWidth', 10); /** * get/set pointerAtBeginning * @name pointerAtBeginning * @method - * @memberof Kinetic.Arrow.prototype + * @memberof Konva.Arrow.prototype * @param {Number} Should pointer displayed at beginning of arrow. * The default is false. * @returns {Boolean} @@ -15137,8 +15146,8 @@ var Kinetic = {}; * line.pointerAtBeginning(true); */ - Kinetic.Factory.addGetterSetter(Kinetic.Arrow, 'pointerAtBeginning', false); - Kinetic.Collection.mapMethods(Kinetic.Arrow); + Konva.Factory.addGetterSetter(Konva.Arrow, 'pointerAtBeginning', false); + Konva.Collection.mapMethods(Konva.Arrow); })(); diff --git a/konva.min.js b/konva.min.js new file mode 100644 index 00000000..c7f694dc --- /dev/null +++ b/konva.min.js @@ -0,0 +1,5 @@ +/*! KonvaJS v5.2.0 2015-01-27 http://lavrton.github.io/KonvaJS/ by Eric Rowell @ericdrowell, Anton Lavrenov @lavrton - MIT License https://github.com/lavrton/KonvaJS/wiki/License*/ +var Konva={};!function(a){var b=Math.PI/180;Konva={version:"5.2.0",stages:[],idCounter:0,ids:{},names:{},shapes:{},listenClickTap:!1,inDblClickWindow:!1,enableTrace:!1,traceArrMax:100,dblClickWindow:400,pixelRatio:void 0,dragDistance:0,angleDeg:!0,showWarnings:!0,Filters:{},Node:function(a){this._init(a)},Shape:function(a){this.__init(a)},Container:function(a){this.__init(a)},Stage:function(a){this.___init(a)},BaseLayer:function(a){this.___init(a)},Layer:function(a){this.____init(a)},FastLayer:function(a){this.____init(a)},Group:function(a){this.___init(a)},isDragging:function(){var a=Konva.DD;return a?a.isDragging:!1},isDragReady:function(){var a=Konva.DD;return a?!!a.node:!1},_addId:function(a,b){void 0!==b&&(this.ids[b]=a)},_removeId:function(a){void 0!==a&&delete this.ids[a]},_addName:function(a,b){if(void 0!==b)for(var c=b.split(/\s/g),d=0;d"),Konva.window=Konva.document.createWindow(),Konva.window.Image=d.Image,Konva._nodeCanvas=d}return Konva.root=a,void(module.exports=c)}"function"==typeof define&&define.amd&&define(b),Konva.document=document,Konva.window=window,Konva.root=a}(this,function(){return Konva}),function(){Konva.Collection=function(){var a=[].slice.call(arguments),b=a.length,c=0;for(this.length=b;b>c;c++)this[c]=a[c];return this},Konva.Collection.prototype=[],Konva.Collection.prototype.each=function(a){for(var b=0;ba;a++)b.push(this[a]);return b},Konva.Collection.toCollection=function(a){var b,c=new Konva.Collection,d=a.length;for(b=0;d>b;b++)c.push(a[b]);return c},Konva.Collection._mapMethod=function(a){Konva.Collection.prototype[a]=function(){var b,c=this.length,d=[].slice.call(arguments);for(b=0;c>b;b++)this[b][a].apply(this[b],d);return this}},Konva.Collection.mapMethods=function(a){var b=a.prototype;for(var c in b)Konva.Collection._mapMethod(c)},Konva.Transform=function(a){this.m=a&&a.slice()||[1,0,0,1,0,0]},Konva.Transform.prototype={copy:function(){return new Konva.Transform(this.m)},point:function(a){var b=this.m;return{x:b[0]*a.x+b[2]*a.y+b[4],y:b[1]*a.x+b[3]*a.y+b[5]}},translate:function(a,b){return this.m[4]+=this.m[0]*a+this.m[2]*b,this.m[5]+=this.m[1]*a+this.m[3]*b,this},scale:function(a,b){return this.m[0]*=a,this.m[1]*=a,this.m[2]*=b,this.m[3]*=b,this},rotate:function(a){var b=Math.cos(a),c=Math.sin(a),d=this.m[0]*b+this.m[2]*c,e=this.m[1]*b+this.m[3]*c,f=this.m[0]*-c+this.m[2]*b,g=this.m[1]*-c+this.m[3]*b;return this.m[0]=d,this.m[1]=e,this.m[2]=f,this.m[3]=g,this},getTranslation:function(){return{x:this.m[4],y:this.m[5]}},skew:function(a,b){var c=this.m[0]+this.m[2]*b,d=this.m[1]+this.m[3]*b,e=this.m[2]+this.m[0]*a,f=this.m[3]+this.m[1]*a;return this.m[0]=c,this.m[1]=d,this.m[2]=e,this.m[3]=f,this},multiply:function(a){var b=this.m[0]*a.m[0]+this.m[2]*a.m[1],c=this.m[1]*a.m[0]+this.m[3]*a.m[1],d=this.m[0]*a.m[2]+this.m[2]*a.m[3],e=this.m[1]*a.m[2]+this.m[3]*a.m[3],f=this.m[0]*a.m[4]+this.m[2]*a.m[5]+this.m[4],g=this.m[1]*a.m[4]+this.m[3]*a.m[5]+this.m[5];return this.m[0]=b,this.m[1]=c,this.m[2]=d,this.m[3]=e,this.m[4]=f,this.m[5]=g,this},invert:function(){var a=1/(this.m[0]*this.m[3]-this.m[1]*this.m[2]),b=this.m[3]*a,c=-this.m[1]*a,d=-this.m[2]*a,e=this.m[0]*a,f=a*(this.m[2]*this.m[5]-this.m[3]*this.m[4]),g=a*(this.m[1]*this.m[4]-this.m[0]*this.m[5]);return this.m[0]=b,this.m[1]=c,this.m[2]=d,this.m[3]=e,this.m[4]=f,this.m[5]=g,this},getMatrix:function(){return this.m},setAbsolutePosition:function(a,b){var c=this.m[0],d=this.m[1],e=this.m[2],f=this.m[3],g=this.m[4],h=this.m[5],i=(c*(b-h)-d*(a-g))/(c*f-d*e),j=(a-g-e*i)/c;return this.translate(j,i)}};var a="2d",b="[object Array]",c="[object Number]",d="[object String]",e=Math.PI/180,f=180/Math.PI,g="#",h="",i="0",j="Konva warning: ",k="Konva error: ",l="rgb(",m={aqua:[0,255,255],lime:[0,255,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,255],navy:[0,0,128],white:[255,255,255],fuchsia:[255,0,255],olive:[128,128,0],yellow:[255,255,0],orange:[255,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[255,0,0],pink:[255,192,203],cyan:[0,255,255],transparent:[255,255,255,0]},n=/rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)/;Konva.Util={_isElement:function(a){return!(!a||1!=a.nodeType)},_isFunction:function(a){return!!(a&&a.constructor&&a.call&&a.apply)},_isObject:function(a){return!!a&&a.constructor==Object},_isArray:function(a){return Object.prototype.toString.call(a)==b},_isNumber:function(a){return Object.prototype.toString.call(a)==c},_isString:function(a){return Object.prototype.toString.call(a)==d},_throttle:function(a,b,c){var d,e,f,g=null,h=0,i=c||{},j=function(){h=i.leading===!1?0:(new Date).getTime(),g=null,f=a.apply(d,e),d=e=null};return function(){var c=(new Date).getTime();h||i.leading!==!1||(h=c);var k=b-(c-h);return d=this,e=arguments,0>=k?(clearTimeout(g),g=null,h=c,f=a.apply(d,e),d=e=null):g||i.trailing===!1||(g=setTimeout(j,k)),f}},_hasMethods:function(a){var b,c=[];for(b in a)this._isFunction(a[b])&&c.push(b);return c.length>0},createCanvasElement:function(){var a=Konva.document.createElement("canvas");try{a.style=a.style||{}}catch(b){}return a},isBrowser:function(){return"object"!=typeof exports},_isInDocument:function(a){for(;a=a.parentNode;)if(a==Konva.document)return!0;return!1},_simplifyArray:function(a){var b,c,d=[],e=a.length,f=Konva.Util;for(b=0;e>b;b++)c=a[b],f._isNumber(c)?c=Math.round(1e3*c)/1e3:f._isString(c)||(c=c.toString()),d.push(c);return d},_getImage:function(b,c){var d,e;if(b)if(this._isElement(b))c(b);else if(this._isString(b))d=new Konva.window.Image,d.onload=function(){c(d)},d.src=b;else if(b.data){e=Konva.Util.createCanvasElement(),e.width=b.width,e.height=b.height;var f=e.getContext(a);f.putImageData(b,0,0),this._getImage(e.toDataURL(),c)}else c(null);else c(null)},_getRGBAString:function(a){var b=a.red||0,c=a.green||0,d=a.blue||0,e=a.alpha||1;return["rgba(",b,",",c,",",d,",",e,")"].join(h)},_rgbToHex:function(a,b,c){return((1<<24)+(a<<16)+(b<<8)+c).toString(16).slice(1)},_hexToRgb:function(a){a=a.replace(g,h);var b=parseInt(a,16);return{r:b>>16&255,g:b>>8&255,b:255&b}},getRandomColor:function(){for(var a=(16777215*Math.random()<<0).toString(16);a.length<6;)a=i+a;return g+a},get:function(a,b){return void 0===a?b:a},getRGB:function(a){var b;return a in m?(b=m[a],{r:b[0],g:b[1],b:b[2]}):a[0]===g?this._hexToRgb(a.substring(1)):a.substr(0,4)===l?(b=n.exec(a.replace(/ /g,"")),{r:parseInt(b[1],10),g:parseInt(b[2],10),b:parseInt(b[3],10)}):{r:0,g:0,b:0}},_merge:function(a,b){var c=this._clone(b);for(var d in a)c[d]=this._isObject(a[d])?this._merge(a[d],c[d]):a[d];return c},cloneObject:function(a){var b={};for(var c in a)b[c]=this._isObject(a[c])?this.cloneObject(a[c]):this._isArray(a[c])?this.cloneArray(a[c]):a[c];return b},cloneArray:function(a){return a.slice(0)},_degToRad:function(a){return a*e},_radToDeg:function(a){return a*f},_capitalize:function(a){return a.charAt(0).toUpperCase()+a.slice(1)},error:function(a){throw new Error(k+a)},warn:function(a){Konva.root.console&&console.warn&&Konva.showWarnings&&console.warn(j+a)},extend:function(a,b){function c(){this.constructor=a}c.prototype=b.prototype;var d=a.prototype;a.prototype=new c;for(var e in d)d.hasOwnProperty(e)&&(a.prototype[e]=d[e]);a.__super__=b.prototype},addMethods:function(a,b){var c;for(c in b)a.prototype[c]=b[c]},_getControlPoints:function(a,b,c,d,e,f,g){var h=Math.sqrt(Math.pow(c-a,2)+Math.pow(d-b,2)),i=Math.sqrt(Math.pow(e-c,2)+Math.pow(f-d,2)),j=g*h/(h+i),k=g*i/(h+i),l=c-j*(e-a),m=d-j*(f-b),n=c+k*(e-a),o=d+k*(f-b);return[l,m,n,o]},_expandPoints:function(a,b){var c,d,e=a.length,f=[];for(c=2;e-2>c;c+=2)d=Konva.Util._getControlPoints(a[c-2],a[c-1],a[c],a[c+1],a[c+2],a[c+3],b),f.push(d[0]),f.push(d[1]),f.push(a[c]),f.push(a[c+1]),f.push(d[2]),f.push(d[3]);return f},_removeLastLetter:function(a){return a.substring(0,a.length-1)}}}(),function(){var a=Konva.Util.createCanvasElement(),b=a.getContext("2d"),c=Konva.UA.mobile?function(){var a=window.devicePixelRatio||1,c=b.webkitBackingStorePixelRatio||b.mozBackingStorePixelRatio||b.msBackingStorePixelRatio||b.oBackingStorePixelRatio||b.backingStorePixelRatio||1;return a/c}():1;Konva.Canvas=function(a){this.init(a)},Konva.Canvas.prototype={init:function(a){var b=a||{},d=b.pixelRatio||Konva.pixelRatio||c;this.pixelRatio=d,this._canvas=Konva.Util.createCanvasElement(),this._canvas.style.padding=0,this._canvas.style.margin=0,this._canvas.style.border=0,this._canvas.style.background="transparent",this._canvas.style.position="absolute",this._canvas.style.top=0,this._canvas.style.left=0},getContext:function(){return this.context},getPixelRatio:function(){return this.pixelRatio},setPixelRatio:function(a){this.pixelRatio=a,this.setSize(this.getWidth(),this.getHeight())},setWidth:function(a){this.width=this._canvas.width=a*this.pixelRatio,this._canvas.style.width=a+"px"},setHeight:function(a){this.height=this._canvas.height=a*this.pixelRatio,this._canvas.style.height=a+"px"},getWidth:function(){return this.width},getHeight:function(){return this.height},setSize:function(a,b){this.setWidth(a),this.setHeight(b)},toDataURL:function(a,b){try{return this._canvas.toDataURL(a,b)}catch(c){try{return this._canvas.toDataURL()}catch(d){return Konva.Util.warn("Unable to get data URL. "+d.message),""}}}},Konva.SceneCanvas=function(a){var b=a||{},c=b.width||0,d=b.height||0;Konva.Canvas.call(this,b),this.context=new Konva.SceneContext(this),this.setSize(c,d)},Konva.SceneCanvas.prototype={setWidth:function(a){var b=this.pixelRatio,c=this.getContext()._context;Konva.Canvas.prototype.setWidth.call(this,a),c.scale(b,b)},setHeight:function(a){var b=this.pixelRatio,c=this.getContext()._context;Konva.Canvas.prototype.setHeight.call(this,a),c.scale(b,b)}},Konva.Util.extend(Konva.SceneCanvas,Konva.Canvas),Konva.HitCanvas=function(a){var b=a||{},c=b.width||0,d=b.height||0;Konva.Canvas.call(this,b),this.context=new Konva.HitContext(this),this.setSize(c,d),this.hitCanvas=!0},Konva.Util.extend(Konva.HitCanvas,Konva.Canvas)}(),function(){var a=",",b="(",c=")",d="([",e="])",f=";",g="()",h="=",i=["arc","arcTo","beginPath","bezierCurveTo","clearRect","clip","closePath","createLinearGradient","createPattern","createRadialGradient","drawImage","fill","fillText","getImageData","createImageData","lineTo","moveTo","putImageData","quadraticCurveTo","rect","restore","rotate","save","scale","setLineDash","setTransform","stroke","strokeText","transform","translate"];Konva.Context=function(a){this.init(a)},Konva.Context.prototype={init:function(a){this.canvas=a,this._context=a._canvas.getContext("2d"),Konva.enableTrace&&(this.traceArr=[],this._enableTrace())},fillShape:function(a){a.getFillEnabled()&&this._fill(a)},strokeShape:function(a){a.getStrokeEnabled()&&this._stroke(a)},fillStrokeShape:function(a){var b=a.getFillEnabled();b&&this._fill(a),a.getStrokeEnabled()&&this._stroke(a)},getTrace:function(i){var j,k,l,m,n=this.traceArr,o=n.length,p="";for(j=0;o>j;j++)k=n[j],l=k.method,l?(m=k.args,p+=l,p+=i?g:Konva.Util._isArray(m[0])?d+m.join(a)+e:b+m.join(a)+c):(p+=k.property,i||(p+=h+k.val)),p+=f;return p},clearTrace:function(){this.traceArr=[]},_trace:function(a){var b,c=this.traceArr;c.push(a),b=c.length,b>=Konva.traceArrMax&&c.shift()},reset:function(){var a=this.getCanvas().getPixelRatio();this.setTransform(1*a,0,0,1*a,0,0)},getCanvas:function(){return this.canvas},clear:function(a){var b=this.getCanvas();a?this.clearRect(a.x||0,a.y||0,a.width||0,a.height||0):this.clearRect(0,0,b.getWidth(),b.getHeight())},_applyLineCap:function(a){var b=a.getLineCap();b&&this.setAttr("lineCap",b)},_applyOpacity:function(a){var b=a.getAbsoluteOpacity();1!==b&&this.setAttr("globalAlpha",b)},_applyLineJoin:function(a){var b=a.getLineJoin();b&&this.setAttr("lineJoin",b)},setAttr:function(a,b){this._context[a]=b},arc:function(){var a=arguments;this._context.arc(a[0],a[1],a[2],a[3],a[4],a[5])},beginPath:function(){this._context.beginPath()},bezierCurveTo:function(){var a=arguments;this._context.bezierCurveTo(a[0],a[1],a[2],a[3],a[4],a[5])},clearRect:function(){var a=arguments;this._context.clearRect(a[0],a[1],a[2],a[3])},clip:function(){this._context.clip()},closePath:function(){this._context.closePath()},createImageData:function(){var a=arguments;return 2===a.length?this._context.createImageData(a[0],a[1]):1===a.length?this._context.createImageData(a[0]):void 0},createLinearGradient:function(){var a=arguments;return this._context.createLinearGradient(a[0],a[1],a[2],a[3])},createPattern:function(){var a=arguments;return this._context.createPattern(a[0],a[1])},createRadialGradient:function(){var a=arguments;return this._context.createRadialGradient(a[0],a[1],a[2],a[3],a[4],a[5])},drawImage:function(){var a=arguments,b=this._context;3===a.length?b.drawImage(a[0],a[1],a[2]):5===a.length?b.drawImage(a[0],a[1],a[2],a[3],a[4]):9===a.length&&b.drawImage(a[0],a[1],a[2],a[3],a[4],a[5],a[6],a[7],a[8])},fill:function(){this._context.fill()},fillText:function(){var a=arguments;this._context.fillText(a[0],a[1],a[2])},getImageData:function(){var a=arguments;return this._context.getImageData(a[0],a[1],a[2],a[3])},lineTo:function(){var a=arguments;this._context.lineTo(a[0],a[1])},moveTo:function(){var a=arguments;this._context.moveTo(a[0],a[1])},rect:function(){var a=arguments;this._context.rect(a[0],a[1],a[2],a[3])},putImageData:function(){var a=arguments;this._context.putImageData(a[0],a[1],a[2])},quadraticCurveTo:function(){var a=arguments;this._context.quadraticCurveTo(a[0],a[1],a[2],a[3])},restore:function(){this._context.restore()},rotate:function(){var a=arguments;this._context.rotate(a[0])},save:function(){this._context.save()},scale:function(){var a=arguments;this._context.scale(a[0],a[1])},setLineDash:function(){var a=arguments,b=this._context;this._context.setLineDash?b.setLineDash(a[0]):"mozDash"in b?b.mozDash=a[0]:"webkitLineDash"in b&&(b.webkitLineDash=a[0])},setTransform:function(){var a=arguments;this._context.setTransform(a[0],a[1],a[2],a[3],a[4],a[5])},stroke:function(){this._context.stroke()},strokeText:function(){var a=arguments;this._context.strokeText(a[0],a[1],a[2])},transform:function(){var a=arguments;this._context.transform(a[0],a[1],a[2],a[3],a[4],a[5])},translate:function(){var a=arguments;this._context.translate(a[0],a[1])},_enableTrace:function(){var a,b,c=this,d=i.length,e=Konva.Util._simplifyArray,f=this.setAttr,g=function(a){var d,f=c[a];c[a]=function(){return b=e(Array.prototype.slice.call(arguments,0)),d=f.apply(c,arguments),c._trace({method:a,args:b}),d}};for(a=0;d>a;a++)g(i[a]);c.setAttr=function(){f.apply(c,arguments),c._trace({property:arguments[0],val:arguments[1]})}}},Konva.SceneContext=function(a){Konva.Context.call(this,a)},Konva.SceneContext.prototype={_fillColor:function(a){var b=a.fill()||Konva.Util._getRGBAString({red:a.fillRed(),green:a.fillGreen(),blue:a.fillBlue(),alpha:a.fillAlpha()});this.setAttr("fillStyle",b),a._fillFunc(this)},_fillPattern:function(a){var b=a.getFillPatternImage(),c=a.getFillPatternX(),d=a.getFillPatternY(),e=a.getFillPatternScale(),f=Konva.getAngle(a.getFillPatternRotation()),g=a.getFillPatternOffset(),h=a.getFillPatternRepeat();(c||d)&&this.translate(c||0,d||0),f&&this.rotate(f),e&&this.scale(e.x,e.y),g&&this.translate(-1*g.x,-1*g.y),this.setAttr("fillStyle",this.createPattern(b,h||"repeat")),this.fill()},_fillLinearGradient:function(a){var b=a.getFillLinearGradientStartPoint(),c=a.getFillLinearGradientEndPoint(),d=a.getFillLinearGradientColorStops(),e=this.createLinearGradient(b.x,b.y,c.x,c.y);if(d){for(var f=0;fh;h++)i=e[h],a[i]=this.getAttr(d+k(i));return a},c.prototype[m]=function(a){var b,c=this.attrs[d];f&&(a=f.call(this,a));for(b in a)this._setAttr(d+k(b),a[b]);return this._fireChangeEvent(d,c,a),g&&g.call(this),this},this.addOverloadedGetterSetter(c,d)},addOverloadedGetterSetter:function(c,d){var e=Konva.Util._capitalize(d),f=b+e,g=a+e;c.prototype[d]=function(){return arguments.length?(this[f](arguments[0]),this):this[g]()}},backCompat:function(a,b){var c;for(c in b)a.prototype[c]=a.prototype[b[c]]},afterSetFilter:function(){this._filterUpToDate=!1}},Konva.Validators={RGBComponent:function(a){return a>255?255:0>a?0:Math.round(a)},alphaComponent:function(a){return a>1?1:1e-4>a?1e-4:a}}}(),function(){var a="absoluteOpacity",b="absoluteTransform",c="Change",d="children",e=".",f="",g="get",h="id",i="konva",j="listening",k="mouseenter",l="mouseleave",m="name",n="set",o="Shape",p=" ",q="stage",r="transform",s="Stage",t="visible",u=["id"],v=["xChange.konva","yChange.konva","scaleXChange.konva","scaleYChange.konva","skewXChange.konva","skewYChange.konva","rotationChange.konva","offsetXChange.konva","offsetYChange.konva","transformsEnabledChange.konva"].join(p);Konva.Util.addMethods(Konva.Node,{_init:function(c){var d=this;this._id=Konva.idCounter++,this.eventListeners={},this.attrs={},this._cache={},this._filterUpToDate=!1,this.setAttrs(c),this.on(v,function(){this._clearCache(r),d._clearSelfAndDescendantCache(b)}),this.on("visibleChange.konva",function(){d._clearSelfAndDescendantCache(t)}),this.on("listeningChange.konva",function(){d._clearSelfAndDescendantCache(j)}),this.on("opacityChange.konva",function(){d._clearSelfAndDescendantCache(a)})},_clearCache:function(a){a?delete this._cache[a]:this._cache={}},_getCache:function(a,b){var c=this._cache[a];return void 0===c&&(this._cache[a]=b.call(this)),this._cache[a]},_clearSelfAndDescendantCache:function(a){this._clearCache(a),this.children&&this.getChildren().each(function(b){b._clearSelfAndDescendantCache(a)})},clearCache:function(){return delete this._cache.canvas,this._filterUpToDate=!1,this},cache:function(a){var b=a||{},c=b.x||0,d=b.y||0,e=b.width||this.width(),f=b.height||this.height(),g=b.drawBorder||!1;if(0===e||0===f)return void Konva.Util.warn("Width or height of caching configuration equals 0. Cache is ignored.");var h=new Konva.SceneCanvas({pixelRatio:1,width:e,height:f}),i=new Konva.SceneCanvas({pixelRatio:1,width:e,height:f}),j=new Konva.HitCanvas({width:e,height:f}),k=h.getContext(),l=j.getContext();return j.isCache=!0,this.clearCache(),k.save(),l.save(),g&&(k.save(),k.beginPath(),k.rect(0,0,e,f),k.closePath(),k.setAttr("strokeStyle","red"),k.setAttr("lineWidth",5),k.stroke(),k.restore()),k.translate(-1*c,-1*d),l.translate(-1*c,-1*d),"Shape"===this.nodeType&&(k.translate(-1*this.x(),-1*this.y()),l.translate(-1*this.x(),-1*this.y())),this.drawScene(h,this),this.drawHit(j,this),k.restore(),l.restore(),this._cache.canvas={scene:h,filter:i,hit:j},this},_drawCachedSceneCanvas:function(a){a.save(),this.getLayer()._applyTransform(this,a),a._applyOpacity(this),a.drawImage(this._getCachedSceneCanvas()._canvas,0,0),a.restore()},_getCachedSceneCanvas:function(){var a,b,c,d,e=this.filters(),f=this._cache.canvas,g=f.scene,h=f.filter,i=h.getContext();if(e){if(!this._filterUpToDate){try{for(a=e.length,i.clear(),i.drawImage(g._canvas,0,0),b=i.getImageData(0,0,h.getWidth(),h.getHeight()),c=0;a>c;c++)d=e[c],d.call(this,b),i.putImageData(b,0,0)}catch(j){Konva.Util.warn("Unable to apply filter. "+j.message)}this._filterUpToDate=!0}return h}return g},_drawCachedHitCanvas:function(a){var b=this._cache.canvas,c=b.hit;a.save(),this.getLayer()._applyTransform(this,a),a.drawImage(c._canvas,0,0),a.restore()},on:function(a,b){var c,d,g,h,i,j=a.split(p),k=j.length;for(c=0;k>c;c++)d=j[c],g=d.split(e),h=g[0],i=g[1]||f,this.eventListeners[h]||(this.eventListeners[h]=[]),this.eventListeners[h].push({name:i,handler:b});return this},off:function(a){var b,c,d,f,g,h,i=(a||"").split(p),j=i.length;if(!a)for(c in this.eventListeners)this._off(c);for(b=0;j>b;b++)if(d=i[b],f=d.split(e),g=f[0],h=f[1],g)this.eventListeners[g]&&this._off(g,h);else for(c in this.eventListeners)this._off(c,h);return this},dispatchEvent:function(a){var b={target:this,type:a.type,evt:a};this.fire(a.type,b)},addEventListener:function(a,b){this.on(a,function(a){b.call(this,a.evt)})},removeEventListener:function(a){this.off(a)},remove:function(){var c=this.getParent();return c&&c.children&&(c.children.splice(this.index,1),c._setChildrenIndices(),delete this.parent),this._clearSelfAndDescendantCache(q),this._clearSelfAndDescendantCache(b),this._clearSelfAndDescendantCache(t),this._clearSelfAndDescendantCache(j),this._clearSelfAndDescendantCache(a),this},destroy:function(){Konva._removeId(this.getId()),Konva._removeName(this.getName(),this._id),this.remove()},getAttr:function(a){var b=g+Konva.Util._capitalize(a);return Konva.Util._isFunction(this[b])?this[b]():this.attrs[a]},getAncestors:function(){for(var a=this.getParent(),b=new Konva.Collection;a;)b.push(a),a=a.getParent();return b},getAttrs:function(){return this.attrs||{}},setAttrs:function(a){var b,c;if(a)for(b in a)b===d||a[b]instanceof Konva.Node||(c=n+Konva.Util._capitalize(b),Konva.Util._isFunction(this[c])?this[c](a[b]):this._setAttr(b,a[b]));return this},isListening:function(){return this._getCache(j,this._isListening)},_isListening:function(){var a=this.getListening(),b=this.getParent();return"inherit"===a?b?b.isListening():!0:a},isVisible:function(){return this._getCache(t,this._isVisible)},_isVisible:function(){var a=this.getVisible(),b=this.getParent();return"inherit"===a?b?b.isVisible():!0:a},shouldDrawHit:function(a){var b=this.getLayer();return a&&a.isCache||b&&b.hitGraphEnabled()&&this.isListening()&&this.isVisible()},show:function(){return this.setVisible(!0),this},hide:function(){return this.setVisible(!1),this},getZIndex:function(){return this.index||0},getAbsoluteZIndex:function(){function a(i){for(b=[],c=i.length,d=0;c>d;d++)e=i[d],h++,e.nodeType!==o&&(b=b.concat(e.getChildren().toArray())),e._id===g._id&&(d=c);b.length>0&&b[0].getDepth()<=f&&a(b)}var b,c,d,e,f=this.getDepth(),g=this,h=0;return g.nodeType!==s&&a(g.getStage().getChildren()),h},getDepth:function(){for(var a=0,b=this.parent;b;)a++,b=b.parent;return a},setPosition:function(a){return this.setX(a.x),this.setY(a.y),this},getPosition:function(){return{x:this.getX(),y:this.getY()}},getAbsolutePosition:function(){var a=this.getAbsoluteTransform().getMatrix(),b=new Konva.Transform,c=this.offset();return b.m=a.slice(),b.translate(c.x,c.y),b.getTranslation()},setAbsolutePosition:function(a){var b,c=this._clearTransform();return this.attrs.x=c.x,this.attrs.y=c.y,delete c.x,delete c.y,b=this.getAbsoluteTransform(),b.invert(),b.translate(a.x,a.y),a={x:this.attrs.x+b.getTranslation().x,y:this.attrs.y+b.getTranslation().y},this.setPosition({x:a.x,y:a.y}),this._setTransform(c),this},_setTransform:function(a){var c;for(c in a)this.attrs[c]=a[c];this._clearCache(r),this._clearSelfAndDescendantCache(b)},_clearTransform:function(){var a={x:this.getX(),y:this.getY(),rotation:this.getRotation(),scaleX:this.getScaleX(),scaleY:this.getScaleY(),offsetX:this.getOffsetX(),offsetY:this.getOffsetY(),skewX:this.getSkewX(),skewY:this.getSkewY()};return this.attrs.x=0,this.attrs.y=0,this.attrs.rotation=0,this.attrs.scaleX=1,this.attrs.scaleY=1,this.attrs.offsetX=0,this.attrs.offsetY=0,this.attrs.skewX=0,this.attrs.skewY=0,this._clearCache(r),this._clearSelfAndDescendantCache(b),a},move:function(a){var b=a.x,c=a.y,d=this.getX(),e=this.getY();return void 0!==b&&(d+=b),void 0!==c&&(e+=c),this.setPosition({x:d,y:e}),this},_eachAncestorReverse:function(a,b){var c,d,e=[],f=this.getParent();if(b&&b._id===this._id)return a(this),!0;for(e.unshift(this);f&&(!b||f._id!==b._id);)e.unshift(f),f=f.parent;for(c=e.length,d=0;c>d;d++)a(e[d])},rotate:function(a){return this.setRotation(this.getRotation()+a),this},moveToTop:function(){if(!this.parent)return void Konva.Util.warn("Node has no parent. moveToTop function is ignored.");var a=this.index;return this.parent.children.splice(a,1),this.parent.children.push(this),this.parent._setChildrenIndices(),!0},moveUp:function(){if(!this.parent)return void Konva.Util.warn("Node has no parent. moveUp function is ignored.");var a=this.index,b=this.parent.getChildren().length;return b-1>a?(this.parent.children.splice(a,1),this.parent.children.splice(a+1,0,this),this.parent._setChildrenIndices(),!0):!1},moveDown:function(){if(!this.parent)return void Konva.Util.warn("Node has no parent. moveDown function is ignored.");var a=this.index;return a>0?(this.parent.children.splice(a,1),this.parent.children.splice(a-1,0,this),this.parent._setChildrenIndices(),!0):!1},moveToBottom:function(){if(!this.parent)return void Konva.Util.warn("Node has no parent. moveToBottom function is ignored.");var a=this.index;return a>0?(this.parent.children.splice(a,1),this.parent.children.unshift(this),this.parent._setChildrenIndices(),!0):!1},setZIndex:function(a){if(!this.parent)return void Konva.Util.warn("Node has no parent. zIndex parameter is ignored.");var b=this.index;return this.parent.children.splice(b,1),this.parent.children.splice(a,0,this),this.parent._setChildrenIndices(),this},getAbsoluteOpacity:function(){return this._getCache(a,this._getAbsoluteOpacity)},_getAbsoluteOpacity:function(){var a=this.getOpacity();return this.getParent()&&(a*=this.getParent().getAbsoluteOpacity()),a},moveTo:function(a){return this.getParent()!==a&&(this.remove(),a.add(this)),this},toObject:function(){var a,b,c,d,e=Konva.Util,f={},g=this.getAttrs();f.attrs={};for(a in g)b=g[a],e._isFunction(b)||e._isElement(b)||e._isObject(b)&&e._hasMethods(b)||(c=this[a],delete g[a],d=c?c.call(this):null,g[a]=b,d!==b&&(f.attrs[a]=b));return f.className=this.getClassName(),f},toJSON:function(){return JSON.stringify(this.toObject())},getParent:function(){return this.parent},getLayer:function(){var a=this.getParent();return a?a.getLayer():null},getStage:function(){return this._getCache(q,this._getStage)},_getStage:function(){var a=this.getParent();return a?a.getStage():void 0},fire:function(a,b,c){return c?this._fireAndBubble(a,b||{}):this._fire(a,b||{}),this},getAbsoluteTransform:function(a){return a?this._getAbsoluteTransform(a):this._getCache(b,this._getAbsoluteTransform)},_getAbsoluteTransform:function(a){var b,c,d=new Konva.Transform;return this._eachAncestorReverse(function(a){b=a.transformsEnabled(),c=a.getTransform(),"all"===b?d.multiply(c):"position"===b&&d.translate(a.x(),a.y())},a),d},getTransform:function(){return this._getCache(r,this._getTransform)},_getTransform:function(){var a=new Konva.Transform,b=this.getX(),c=this.getY(),d=Konva.getAngle(this.getRotation()),e=this.getScaleX(),f=this.getScaleY(),g=this.getSkewX(),h=this.getSkewY(),i=this.getOffsetX(),j=this.getOffsetY();return(0!==b||0!==c)&&a.translate(b,c),0!==d&&a.rotate(d),(0!==g||0!==h)&&a.skew(g,h),(1!==e||1!==f)&&a.scale(e,f),(0!==i||0!==j)&&a.translate(-1*i,-1*j),a},clone:function(a){var b,c,d,e,f,g=this.getClassName(),h=Konva.Util.cloneObject(this.attrs);for(var j in u){var k=u[j];delete h[k]}for(b in a)h[b]=a[b];var l=new Konva[g](h);for(b in this.eventListeners)for(c=this.eventListeners[b],d=c.length,e=0;d>e;e++)f=c[e],f.name.indexOf(i)<0&&(l.eventListeners[b]||(l.eventListeners[b]=[]),l.eventListeners[b].push(f));return l},toDataURL:function(a){a=a||{};var b=a.mimeType||null,c=a.quality||null,d=this.getStage(),e=a.x||0,f=a.y||0,g=new Konva.SceneCanvas({width:a.width||this.getWidth()||(d?d.getWidth():0),height:a.height||this.getHeight()||(d?d.getHeight():0),pixelRatio:1}),h=g.getContext();return h.save(),(e||f)&&h.translate(-1*e,-1*f),this.drawScene(g),h.restore(),g.toDataURL(b,c)},toImage:function(a){Konva.Util._getImage(this.toDataURL(a),function(b){a.callback(b)})},setSize:function(a){return this.setWidth(a.width),this.setHeight(a.height),this},getSize:function(){return{width:this.getWidth(),height:this.getHeight()}},getWidth:function(){return this.attrs.width||0},getHeight:function(){return this.attrs.height||0},getClassName:function(){return this.className||this.nodeType},getType:function(){return this.nodeType},getDragDistance:function(){return void 0!==this.attrs.dragDistance?this.attrs.dragDistance:this.parent?this.parent.getDragDistance():Konva.dragDistance},_get:function(a){return this.className===a||this.nodeType===a?[this]:[] +},_off:function(a,b){var c,d,e=this.eventListeners[a];for(c=0;ce;e++)c.add(this._createNode(g[e]));return c},Konva.Factory.addOverloadedGetterSetter(Konva.Node,"position"),Konva.Factory.addGetterSetter(Konva.Node,"x",0),Konva.Factory.addGetterSetter(Konva.Node,"y",0),Konva.Factory.addGetterSetter(Konva.Node,"opacity",1),Konva.Factory.addGetter(Konva.Node,"name"),Konva.Factory.addOverloadedGetterSetter(Konva.Node,"name"),Konva.Factory.addGetter(Konva.Node,"id"),Konva.Factory.addOverloadedGetterSetter(Konva.Node,"id"),Konva.Factory.addGetterSetter(Konva.Node,"rotation",0),Konva.Factory.addComponentsGetterSetter(Konva.Node,"scale",["x","y"]),Konva.Factory.addGetterSetter(Konva.Node,"scaleX",1),Konva.Factory.addGetterSetter(Konva.Node,"scaleY",1),Konva.Factory.addComponentsGetterSetter(Konva.Node,"skew",["x","y"]),Konva.Factory.addGetterSetter(Konva.Node,"skewX",0),Konva.Factory.addGetterSetter(Konva.Node,"skewY",0),Konva.Factory.addComponentsGetterSetter(Konva.Node,"offset",["x","y"]),Konva.Factory.addGetterSetter(Konva.Node,"offsetX",0),Konva.Factory.addGetterSetter(Konva.Node,"offsetY",0),Konva.Factory.addSetter(Konva.Node,"dragDistance"),Konva.Factory.addOverloadedGetterSetter(Konva.Node,"dragDistance"),Konva.Factory.addSetter(Konva.Node,"width",0),Konva.Factory.addOverloadedGetterSetter(Konva.Node,"width"),Konva.Factory.addSetter(Konva.Node,"height",0),Konva.Factory.addOverloadedGetterSetter(Konva.Node,"height"),Konva.Factory.addGetterSetter(Konva.Node,"listening","inherit"),Konva.Factory.addGetterSetter(Konva.Node,"filters",void 0,function(a){return this._filterUpToDate=!1,a}),Konva.Factory.addGetterSetter(Konva.Node,"visible","inherit"),Konva.Factory.addGetterSetter(Konva.Node,"transformsEnabled","all"),Konva.Factory.addOverloadedGetterSetter(Konva.Node,"size"),Konva.Factory.backCompat(Konva.Node,{rotateDeg:"rotate",setRotationDeg:"setRotation",getRotationDeg:"getRotation"}),Konva.Collection.mapMethods(Konva.Node)}(),function(){Konva.Filters.Grayscale=function(a){var b,c,d=a.data,e=d.length;for(b=0;e>b;b+=4)c=.34*d[b]+.5*d[b+1]+.16*d[b+2],d[b]=c,d[b+1]=c,d[b+2]=c}}(),function(){Konva.Filters.Brighten=function(a){var b,c=255*this.brightness(),d=a.data,e=d.length;for(b=0;e>b;b+=4)d[b]+=c,d[b+1]+=c,d[b+2]+=c},Konva.Factory.addGetterSetter(Konva.Node,"brightness",0,null,Konva.Factory.afterSetFilter)}(),function(){Konva.Filters.Invert=function(a){var b,c=a.data,d=c.length;for(b=0;d>b;b+=4)c[b]=255-c[b],c[b+1]=255-c[b+1],c[b+2]=255-c[b+2]}}(),function(){function a(){this.r=0,this.g=0,this.b=0,this.a=0,this.next=null}function b(b,e){var f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D=b.data,E=b.width,F=b.height,G=e+e+1,H=E-1,I=F-1,J=e+1,K=J*(J+1)/2,L=new a,M=null,N=L,O=null,P=null,Q=c[e],R=d[e];for(h=1;G>h;h++)N=N.next=new a,h==J&&(M=N);for(N.next=L,l=k=0,g=0;F>g;g++){for(u=v=w=x=m=n=o=p=0,q=J*(y=D[k]),r=J*(z=D[k+1]),s=J*(A=D[k+2]),t=J*(B=D[k+3]),m+=K*y,n+=K*z,o+=K*A,p+=K*B,N=L,h=0;J>h;h++)N.r=y,N.g=z,N.b=A,N.a=B,N=N.next;for(h=1;J>h;h++)i=k+((h>H?H:h)<<2),m+=(N.r=y=D[i])*(C=J-h),n+=(N.g=z=D[i+1])*C,o+=(N.b=A=D[i+2])*C,p+=(N.a=B=D[i+3])*C,u+=y,v+=z,w+=A,x+=B,N=N.next;for(O=L,P=M,f=0;E>f;f++)D[k+3]=B=p*Q>>R,0!==B?(B=255/B,D[k]=(m*Q>>R)*B,D[k+1]=(n*Q>>R)*B,D[k+2]=(o*Q>>R)*B):D[k]=D[k+1]=D[k+2]=0,m-=q,n-=r,o-=s,p-=t,q-=O.r,r-=O.g,s-=O.b,t-=O.a,i=l+((i=f+e+1)f;f++){for(v=w=x=u=n=o=p=m=0,k=f<<2,q=J*(y=D[k]),r=J*(z=D[k+1]),s=J*(A=D[k+2]),t=J*(B=D[k+3]),m+=K*y,n+=K*z,o+=K*A,p+=K*B,N=L,h=0;J>h;h++)N.r=y,N.g=z,N.b=A,N.a=B,N=N.next;for(j=E,h=1;e>=h;h++)k=j+f<<2,m+=(N.r=y=D[k])*(C=J-h),n+=(N.g=z=D[k+1])*C,o+=(N.b=A=D[k+2])*C,p+=(N.a=B=D[k+3])*C,u+=y,v+=z,w+=A,x+=B,N=N.next,I>h&&(j+=E);for(k=f,O=L,P=M,g=0;F>g;g++)i=k<<2,D[i+3]=B=p*Q>>R,B>0?(B=255/B,D[i]=(m*Q>>R)*B,D[i+1]=(n*Q>>R)*B,D[i+2]=(o*Q>>R)*B):D[i]=D[i+1]=D[i+2]=0,m-=q,n-=r,o-=s,p-=t,q-=O.r,r-=O.g,s-=O.b,t-=O.a,i=f+((i=g+J)0&&b(a,c)},Konva.Factory.addGetterSetter(Konva.Node,"blurRadius",0,null,Konva.Factory.afterSetFilter)}(),function(){function a(a,b,c){var d=4*(c*a.width+b),e=[];return e.push(a.data[d++],a.data[d++],a.data[d++],a.data[d++]),e}function b(a,b){return Math.sqrt(Math.pow(a[0]-b[0],2)+Math.pow(a[1]-b[1],2)+Math.pow(a[2]-b[2],2))}function c(a){for(var b=[0,0,0],c=0;cn?0:255}return l}}function e(a,b){for(var c=0;ch;h++)for(var i=0;b>i;i++){for(var j=h*b+i,k=0,l=0;e>l;l++)for(var m=0;e>m;m++){var n=h+l-f,o=i+m-f;if(n>=0&&c>n&&o>=0&&b>o){var p=n*b+o,q=d[l*e+m];k+=a[p]*q}}g[j]=2040===k?255:0}return g}function g(a,b,c){for(var d=[1,1,1,1,1,1,1,1,1],e=Math.round(Math.sqrt(d.length)),f=Math.floor(e/2),g=[],h=0;c>h;h++)for(var i=0;b>i;i++){for(var j=h*b+i,k=0,l=0;e>l;l++)for(var m=0;e>m;m++){var n=h+l-f,o=i+m-f;if(n>=0&&c>n&&o>=0&&b>o){var p=n*b+o,q=d[l*e+m];k+=a[p]*q}}g[j]=k>=1020?255:0}return g}function h(a,b,c){for(var d=[1/9,1/9,1/9,1/9,1/9,1/9,1/9,1/9,1/9],e=Math.round(Math.sqrt(d.length)),f=Math.floor(e/2),g=[],h=0;c>h;h++)for(var i=0;b>i;i++){for(var j=h*b+i,k=0,l=0;e>l;l++)for(var m=0;e>m;m++){var n=h+l-f,o=i+m-f;if(n>=0&&c>n&&o>=0&&b>o){var p=n*b+o,q=d[l*e+m];k+=a[p]*q}}g[j]=k}return g}Konva.Filters.Mask=function(a){var b=this.threshold(),c=d(a,b);return c&&(c=f(c,a.width,a.height),c=g(c,a.width,a.height),c=h(c,a.width,a.height),e(a,c)),a},Konva.Factory.addGetterSetter(Konva.Node,"threshold",0,null,Konva.Factory.afterSetFilter)}(),function(){Konva.Filters.RGB=function(a){var b,c,d=a.data,e=d.length,f=this.red(),g=this.green(),h=this.blue();for(b=0;e>b;b+=4)c=(.34*d[b]+.5*d[b+1]+.16*d[b+2])/255,d[b]=c*f,d[b+1]=c*g,d[b+2]=c*h,d[b+3]=d[b+3]},Konva.Factory.addGetterSetter(Konva.Node,"red",0,function(a){return this._filterUpToDate=!1,a>255?255:0>a?0:Math.round(a)}),Konva.Factory.addGetterSetter(Konva.Node,"green",0,function(a){return this._filterUpToDate=!1,a>255?255:0>a?0:Math.round(a)}),Konva.Factory.addGetterSetter(Konva.Node,"blue",0,Konva.Validators.RGBComponent,Konva.Factory.afterSetFilter)}(),function(){Konva.Filters.HSV=function(a){var b,c,d,e,f,g=a.data,h=g.length,i=Math.pow(2,this.value()),j=Math.pow(2,this.saturation()),k=Math.abs(this.hue()+360)%360,l=i*j*Math.cos(k*Math.PI/180),m=i*j*Math.sin(k*Math.PI/180),n=.299*i+.701*l+.167*m,o=.587*i-.587*l+.33*m,p=.114*i-.114*l-.497*m,q=.299*i-.299*l-.328*m,r=.587*i+.413*l+.035*m,s=.114*i-.114*l+.293*m,t=.299*i-.3*l+1.25*m,u=.587*i-.586*l-1.05*m,v=.114*i+.886*l-.2*m;for(b=0;h>b;b+=4)c=g[b+0],d=g[b+1],e=g[b+2],f=g[b+3],g[b+0]=n*c+o*d+p*e,g[b+1]=q*c+r*d+s*e,g[b+2]=t*c+u*d+v*e,g[b+3]=f},Konva.Factory.addGetterSetter(Konva.Node,"hue",0,null,Konva.Factory.afterSetFilter),Konva.Factory.addGetterSetter(Konva.Node,"saturation",0,null,Konva.Factory.afterSetFilter),Konva.Factory.addGetterSetter(Konva.Node,"value",0,null,Konva.Factory.afterSetFilter)}(),function(){Konva.Factory.addGetterSetter(Konva.Node,"hue",0,null,Konva.Factory.afterSetFilter),Konva.Factory.addGetterSetter(Konva.Node,"saturation",0,null,Konva.Factory.afterSetFilter),Konva.Factory.addGetterSetter(Konva.Node,"luminance",0,null,Konva.Factory.afterSetFilter),Konva.Filters.HSL=function(a){var b,c,d,e,f,g=a.data,h=g.length,i=1,j=Math.pow(2,this.saturation()),k=Math.abs(this.hue()+360)%360,l=127*this.luminance(),m=i*j*Math.cos(k*Math.PI/180),n=i*j*Math.sin(k*Math.PI/180),o=.299*i+.701*m+.167*n,p=.587*i-.587*m+.33*n,q=.114*i-.114*m-.497*n,r=.299*i-.299*m-.328*n,s=.587*i+.413*m+.035*n,t=.114*i-.114*m+.293*n,u=.299*i-.3*m+1.25*n,v=.587*i-.586*m-1.05*n,w=.114*i+.886*m-.2*n;for(b=0;h>b;b+=4)c=g[b+0],d=g[b+1],e=g[b+2],f=g[b+3],g[b+0]=o*c+p*d+q*e+l,g[b+1]=r*c+s*d+t*e+l,g[b+2]=u*c+v*d+w*e+l,g[b+3]=f}}(),function(){Konva.Filters.Emboss=function(a){var b=10*this.embossStrength(),c=255*this.embossWhiteLevel(),d=this.embossDirection(),e=this.embossBlend(),f=0,g=0,h=a.data,i=a.width,j=a.height,k=4*i,l=j;switch(d){case"top-left":f=-1,g=-1;break;case"top":f=-1,g=0;break;case"top-right":f=-1,g=1;break;case"right":f=0,g=1;break;case"bottom-right":f=1,g=1;break;case"bottom":f=1,g=0;break;case"bottom-left":f=1,g=-1;break;case"left":f=0,g=-1}do{var m=(l-1)*k,n=f;1>l+n&&(n=0),l+n>j&&(n=0);var o=(l-1+n)*i*4,p=i;do{var q=m+4*(p-1),r=g;1>p+r&&(r=0),p+r>i&&(r=0);var s=o+4*(p-1+r),t=h[q]-h[s],u=h[q+1]-h[s+1],v=h[q+2]-h[s+2],w=t,x=w>0?w:-w,y=u>0?u:-u,z=v>0?v:-v;if(y>x&&(w=u),z>x&&(w=v),w*=b,e){var A=h[q]+w,B=h[q+1]+w,C=h[q+2]+w;h[q]=A>255?255:0>A?0:A,h[q+1]=B>255?255:0>B?0:B,h[q+2]=C>255?255:0>C?0:C}else{var D=c-w;0>D?D=0:D>255&&(D=255),h[q]=h[q+1]=h[q+2]=D}}while(--p)}while(--l)},Konva.Factory.addGetterSetter(Konva.Node,"embossStrength",.5,null,Konva.Factory.afterSetFilter),Konva.Factory.addGetterSetter(Konva.Node,"embossWhiteLevel",.5,null,Konva.Factory.afterSetFilter),Konva.Factory.addGetterSetter(Konva.Node,"embossDirection","top-left",null,Konva.Factory.afterSetFilter),Konva.Factory.addGetterSetter(Konva.Node,"embossBlend",!1,null,Konva.Factory.afterSetFilter)}(),function(){function a(a,b,c,d,e){var f,g=c-b,h=e-d;return 0===g?d+h/2:0===h?d:(f=(a-b)/g,f=h*f+d)}Konva.Filters.Enhance=function(b){var c,d,e,f,g=b.data,h=g.length,i=g[0],j=i,k=g[1],l=k,m=g[2],n=m,o=this.enhance();if(0!==o){for(f=0;h>f;f+=4)c=g[f+0],i>c?i=c:c>j&&(j=c),d=g[f+1],k>d?k=d:d>l&&(l=d),e=g[f+2],m>e?m=e:e>n&&(n=e);j===i&&(j=255,i=0),l===k&&(l=255,k=0),n===m&&(n=255,m=0);var p,q,r,s,t,u,v,w,x;for(o>0?(q=j+o*(255-j),r=i-o*(i-0),t=l+o*(255-l),u=k-o*(k-0),w=n+o*(255-n),x=m-o*(m-0)):(p=.5*(j+i),q=j+o*(j-p),r=i+o*(i-p),s=.5*(l+k),t=l+o*(l-s),u=k+o*(k-s),v=.5*(n+m),w=n+o*(n-v),x=m+o*(m-v)),f=0;h>f;f+=4)g[f+0]=a(g[f+0],i,j,r,q),g[f+1]=a(g[f+1],k,l,u,t),g[f+2]=a(g[f+2],m,n,x,w)}},Konva.Factory.addGetterSetter(Konva.Node,"enhance",0,null,Konva.Factory.afterSetFilter)}(),function(){Konva.Filters.Posterize=function(a){var b,c=Math.round(254*this.levels())+1,d=a.data,e=d.length,f=255/c;for(b=0;e>b;b+=1)d[b]=Math.floor(d[b]/f)*f},Konva.Factory.addGetterSetter(Konva.Node,"levels",.5,null,Konva.Factory.afterSetFilter)}(),function(){Konva.Filters.Noise=function(a){var b,c=255*this.noise(),d=a.data,e=d.length,f=c/2;for(b=0;e>b;b+=4)d[b+0]+=f-2*f*Math.random(),d[b+1]+=f-2*f*Math.random(),d[b+2]+=f-2*f*Math.random()},Konva.Factory.addGetterSetter(Konva.Node,"noise",.2,null,Konva.Factory.afterSetFilter)}(),function(){Konva.Filters.Pixelate=function(a){var b,c,d,e,f,g,h,i,j,k,l,m,n,o,p=Math.ceil(this.pixelSize()),q=a.width,r=a.height,s=Math.ceil(q/p),t=Math.ceil(r/p);for(a=a.data,m=0;s>m;m+=1)for(n=0;t>n;n+=1){for(e=0,f=0,g=0,h=0,i=m*p,j=i+p,k=n*p,l=k+p,o=0,b=i;j>b;b+=1)if(!(b>=q))for(c=k;l>c;c+=1)c>=r||(d=4*(q*c+b),e+=a[d+0],f+=a[d+1],g+=a[d+2],h+=a[d+3],o+=1);for(e/=o,f/=o,g/=o,b=i;j>b;b+=1)if(!(b>=q))for(c=k;l>c;c+=1)c>=r||(d=4*(q*c+b),a[d+0]=e,a[d+1]=f,a[d+2]=g,a[d+3]=h)}},Konva.Factory.addGetterSetter(Konva.Node,"pixelSize",8,null,Konva.Factory.afterSetFilter)}(),function(){Konva.Filters.Threshold=function(a){var b,c=255*this.threshold(),d=a.data,e=d.length;for(b=0;e>b;b+=1)d[b]=d[b]255?255:h,k[d+1]=i>255?255:i,k[d+2]=j>255?255:j,k[d+3]=k[d+3];while(--c)}while(--m)}}(),function(){Konva.Filters.Solarize=function(a){var b=a.data,c=a.width,d=a.height,e=4*c,f=d;do{var g=(f-1)*e,h=c;do{var i=g+4*(h-1),j=b[i],k=b[i+1],l=b[i+2];j>127&&(j=255-j),k>127&&(k=255-k),l>127&&(l=255-l),b[i]=j,b[i+1]=k,b[i+2]=l}while(--h)}while(--f)}}(),function(){var a=function(a,b,c){var d,e,f,g,h=a.data,i=b.data,j=a.width,k=a.height,l=c.polarCenterX||j/2,m=c.polarCenterY||k/2,n=0,o=0,p=0,q=0,r=Math.sqrt(l*l+m*m);e=j-l,f=k-m,g=Math.sqrt(e*e+f*f),r=g>r?g:r;var s,t,u,v,w=k,x=j,y=360/x*Math.PI/180;for(t=0;x>t;t+=1)for(u=Math.sin(t*y),v=Math.cos(t*y),s=0;w>s;s+=1)e=Math.floor(l+r*s/w*v),f=Math.floor(m+r*s/w*u),d=4*(f*j+e),n=h[d+0],o=h[d+1],p=h[d+2],q=h[d+3],d=4*(t+s*j),i[d+0]=n,i[d+1]=o,i[d+2]=p,i[d+3]=q},b=function(a,b,c){var d,e,f,g,h,i,j=a.data,k=b.data,l=a.width,m=a.height,n=c.polarCenterX||l/2,o=c.polarCenterY||m/2,p=0,q=0,r=0,s=0,t=Math.sqrt(n*n+o*o);e=l-n,f=m-o,i=Math.sqrt(e*e+f*f),t=i>t?i:t;var u,v,w,x,y=m,z=l,A=c.polarRotation||0;for(e=0;l>e;e+=1)for(f=0;m>f;f+=1)g=e-n,h=f-o,u=Math.sqrt(g*g+h*h)*y/t,v=(180*Math.atan2(h,g)/Math.PI+360+A)%360,v=v*z/360,w=Math.floor(v),x=Math.floor(u),d=4*(x*l+w),p=j[d+0],q=j[d+1],r=j[d+2],s=j[d+3],d=4*(f*l+e),k[d+0]=p,k[d+1]=q,k[d+2]=r,k[d+3]=s},c=Konva.Util.createCanvasElement();Konva.Filters.Kaleidoscope=function(d){var e,f,g,h,i,j,k,l,m,n,o=d.width,p=d.height,q=Math.round(this.kaleidoscopePower()),r=Math.round(this.kaleidoscopeAngle()),s=Math.floor(o*(r%360)/360);if(!(1>q)){c.width=o,c.height=p;var t=c.getContext("2d").getImageData(0,0,o,p);a(d,t,{polarCenterX:o/2,polarCenterY:p/2});for(var u=o/Math.pow(2,q);8>=u;)u=2*u,q-=1;u=Math.ceil(u);var v=u,w=0,x=v,y=1;for(s+u>o&&(w=v,x=0,y=-1),f=0;p>f;f+=1)for(e=w;e!==x;e+=y)g=Math.round(e+s)%o,m=4*(o*f+g),i=t.data[m+0],j=t.data[m+1],k=t.data[m+2],l=t.data[m+3],n=4*(o*f+e),t.data[n+0]=i,t.data[n+1]=j,t.data[n+2]=k,t.data[n+3]=l;for(f=0;p>f;f+=1)for(v=Math.floor(u),h=0;q>h;h+=1){for(e=0;v+1>e;e+=1)m=4*(o*f+e),i=t.data[m+0],j=t.data[m+1],k=t.data[m+2],l=t.data[m+3],n=4*(o*f+2*v-e-1),t.data[n+0]=i,t.data[n+1]=j,t.data[n+2]=k,t.data[n+3]=l;v*=2}b(t,d,{polarRotation:0})}},Konva.Factory.addGetterSetter(Konva.Node,"kaleidoscopePower",2,null,Konva.Factory.afterSetFilter),Konva.Factory.addGetterSetter(Konva.Node,"kaleidoscopeAngle",0,null,Konva.Factory.afterSetFilter)}(),function(){function a(a){setTimeout(a,1e3/60)}function b(){return e.apply(Konva.root,arguments)}var c=500,d=function(){return Konva.root.performance&&Konva.root.performance.now?function(){return Konva.root.performance.now()}:function(){return(new Date).getTime()}}(),e=function(){return Konva.root.requestAnimationFrame||Konva.root.webkitRequestAnimationFrame||Konva.root.mozRequestAnimationFrame||Konva.root.oRequestAnimationFrame||Konva.root.msRequestAnimationFrame||a}();Konva.Animation=function(a,b){var c=Konva.Animation;this.func=a,this.setLayers(b),this.id=c.animIdCounter++,this.frame={time:0,timeDiff:0,lastTime:d()}},Konva.Animation.prototype={setLayers:function(a){var b=[];b=a?a.length>0?a:[a]:[],this.layers=b},getLayers:function(){return this.layers},addLayer:function(a){var b,c,d=this.layers;if(d){for(b=d.length,c=0;b>c;c++)if(d[c]._id===a._id)return!1}else this.layers=[];return this.layers.push(a),!0},isRunning:function(){var a,b=Konva.Animation,c=b.animations,d=c.length;for(a=0;d>a;a++)if(c[a].id===this.id)return!0;return!1},start:function(){var a=Konva.Animation;this.stop(),this.frame.timeDiff=0,this.frame.lastTime=d(),a._addAnimation(this)},stop:function(){Konva.Animation._removeAnimation(this)},_updateFrameObject:function(a){this.frame.timeDiff=a-this.frame.lastTime,this.frame.lastTime=a,this.frame.time+=this.frame.timeDiff,this.frame.frameRate=1e3/this.frame.timeDiff}},Konva.Animation.animations=[],Konva.Animation.animIdCounter=0,Konva.Animation.animRunning=!1,Konva.Animation._addAnimation=function(a){this.animations.push(a),this._handleAnimation()},Konva.Animation._removeAnimation=function(a){var b,c=a.id,d=this.animations,e=d.length;for(b=0;e>b;b++)if(d[b].id===c){this.animations.splice(b,1);break}},Konva.Animation._runFrames=function(){var a,b,c,e,f,g,h,i,j,k={},l=this.animations;for(e=0;ef;f++)h=b[f],void 0!==h._id&&(k[h._id]=h);for(i in k)k[i].draw()},Konva.Animation._animationLoop=function(){var a=Konva.Animation;a.animations.length?(b(a._animationLoop),a._runFrames()):a.animRunning=!1},Konva.Animation._handleAnimation=function(){var a=this;this.animRunning||(this.animRunning=!0,a._animationLoop())};var f=Konva.Node.prototype.moveTo;Konva.Node.prototype.moveTo=function(a){f.call(this,a)},Konva.BaseLayer.prototype.batchDraw=function(){var a=this,b=Konva.Animation;this.batchAnim||(this.batchAnim=new b(function(){a.lastBatchDrawTime&&d()-a.lastBatchDrawTime>c&&a.batchAnim.stop()},this)),this.lastBatchDrawTime=d(),this.batchAnim.isRunning()||(this.draw(),this.batchAnim.start())},Konva.Stage.prototype.batchDraw=function(){this.getChildren().each(function(a){a.batchDraw()})}}(this),function(){var a={node:1,duration:1,easing:1,onFinish:1,yoyo:1},b=1,c=2,d=3,e=0;Konva.Tween=function(b){var c,d,g=this,h=b.node,i=h._id,j=b.easing||Konva.Easings.Linear,k=!!b.yoyo;c="undefined"==typeof b.duration?1:0===b.duration?.001:b.duration,this.node=h,this._id=e++,this.anim=new Konva.Animation(function(){g.tween.onEnterFrame()},h.getLayer()||(h instanceof Konva.Stage?h.getLayers():null)),this.tween=new f(d,function(a){g._tweenFunc(a)},j,0,1,1e3*c,k),this._addListeners(),Konva.Tween.attrs[i]||(Konva.Tween.attrs[i]={}),Konva.Tween.attrs[i][this._id]||(Konva.Tween.attrs[i][this._id]={}),Konva.Tween.tweens[i]||(Konva.Tween.tweens[i]={});for(d in b)void 0===a[d]&&this._addAttr(d,b[d]);this.reset(),this.onFinish=b.onFinish,this.onReset=b.onReset},Konva.Tween.attrs={},Konva.Tween.tweens={},Konva.Tween.prototype={_addAttr:function(a,b){var c,d,e,f,g,h=this.node,i=h._id;if(e=Konva.Tween.tweens[i][a],e&&delete Konva.Tween.attrs[i][e][a],c=h.getAttr(a),Konva.Util._isArray(b))for(d=[],g=b.length,f=0;g>f;f++)d.push(b[f]-c[f]);else d=b-c;Konva.Tween.attrs[i][this._id][a]={start:c,diff:d},Konva.Tween.tweens[i][a]=this._id},_tweenFunc:function(a){var b,c,d,e,f,g,h,i=this.node,j=Konva.Tween.attrs[i._id][this._id];for(b in j){if(c=j[b],d=c.start,e=c.diff,Konva.Util._isArray(d))for(f=[],h=d.length,g=0;h>g;g++)f.push(d[g]+e[g]*a);else f=d+e*a;i.setAttr(b,f)}},_addListeners:function(){var a=this;this.tween.onPlay=function(){a.anim.start()},this.tween.onReverse=function(){a.anim.start()},this.tween.onPause=function(){a.anim.stop()},this.tween.onFinish=function(){a.onFinish&&a.onFinish()},this.tween.onReset=function(){a.onReset&&a.onReset()}},play:function(){return this.tween.play(),this},reverse:function(){return this.tween.reverse(),this},reset:function(){return this.tween.reset(),this},seek:function(a){return this.tween.seek(1e3*a),this},pause:function(){return this.tween.pause(),this},finish:function(){return this.tween.finish(),this},destroy:function(){var a,b=this.node._id,c=this._id,d=Konva.Tween.tweens[b];this.pause();for(a in d)delete Konva.Tween.tweens[b][a];delete Konva.Tween.attrs[b][c]}};var f=function(a,b,c,d,e,f,g){this.prop=a,this.propFunc=b,this.begin=d,this._pos=d,this.duration=f,this._change=0,this.prevPos=0,this.yoyo=g,this._time=0,this._position=0,this._startTime=0,this._finish=0,this.func=c,this._change=e-this.begin,this.pause()};f.prototype={fire:function(a){var b=this[a];b&&b()},setTime:function(a){a>this.duration?this.yoyo?(this._time=this.duration,this.reverse()):this.finish():0>a?this.yoyo?(this._time=0,this.play()):this.reset():(this._time=a,this.update())},getTime:function(){return this._time},setPosition:function(a){this.prevPos=this._pos,this.propFunc(a),this._pos=a},getPosition:function(a){return void 0===a&&(a=this._time),this.func(a,this.begin,this._change,this.duration)},play:function(){this.state=c,this._startTime=this.getTimer()-this._time,this.onEnterFrame(),this.fire("onPlay")},reverse:function(){this.state=d,this._time=this.duration-this._time,this._startTime=this.getTimer()-this._time,this.onEnterFrame(),this.fire("onReverse")},seek:function(a){this.pause(),this._time=a,this.update(),this.fire("onSeek")},reset:function(){this.pause(),this._time=0,this.update(),this.fire("onReset")},finish:function(){this.pause(),this._time=this.duration,this.update(),this.fire("onFinish")},update:function(){this.setPosition(this.getPosition(this._time))},onEnterFrame:function(){var a=this.getTimer()-this._startTime;this.state===c?this.setTime(a):this.state===d&&this.setTime(this.duration-a)},pause:function(){this.state=b,this.fire("onPause")},getTimer:function(){return(new Date).getTime()}},Konva.Easings={BackEaseIn:function(a,b,c,d){var e=1.70158;return c*(a/=d)*a*((e+1)*a-e)+b},BackEaseOut:function(a,b,c,d){var e=1.70158;return c*((a=a/d-1)*a*((e+1)*a+e)+1)+b},BackEaseInOut:function(a,b,c,d){var e=1.70158;return(a/=d/2)<1?c/2*a*a*(((e*=1.525)+1)*a-e)+b:c/2*((a-=2)*a*(((e*=1.525)+1)*a+e)+2)+b},ElasticEaseIn:function(a,b,c,d,e,f){var g=0;return 0===a?b:1==(a/=d)?b+c:(f||(f=.3*d),!e||ea?-.5*e*Math.pow(2,10*(a-=1))*Math.sin(2*(a*d-g)*Math.PI/f)+b:e*Math.pow(2,-10*(a-=1))*Math.sin(2*(a*d-g)*Math.PI/f)*.5+c+b)},BounceEaseOut:function(a,b,c,d){return(a/=d)<1/2.75?7.5625*c*a*a+b:2/2.75>a?c*(7.5625*(a-=1.5/2.75)*a+.75)+b:2.5/2.75>a?c*(7.5625*(a-=2.25/2.75)*a+.9375)+b:c*(7.5625*(a-=2.625/2.75)*a+.984375)+b},BounceEaseIn:function(a,b,c,d){return c-Konva.Easings.BounceEaseOut(d-a,0,c,d)+b},BounceEaseInOut:function(a,b,c,d){return d/2>a?.5*Konva.Easings.BounceEaseIn(2*a,0,c,d)+b:.5*Konva.Easings.BounceEaseOut(2*a-d,0,c,d)+.5*c+b},EaseIn:function(a,b,c,d){return c*(a/=d)*a+b},EaseOut:function(a,b,c,d){return-c*(a/=d)*(a-2)+b},EaseInOut:function(a,b,c,d){return(a/=d/2)<1?c/2*a*a+b:-c/2*(--a*(a-2)-1)+b},StrongEaseIn:function(a,b,c,d){return c*(a/=d)*a*a*a*a+b},StrongEaseOut:function(a,b,c,d){return c*((a=a/d-1)*a*a*a*a+1)+b},StrongEaseInOut:function(a,b,c,d){return(a/=d/2)<1?c/2*a*a*a*a*a+b:c/2*((a-=2)*a*a*a*a+2)+b},Linear:function(a,b,c,d){return c*a/d+b}}}(),function(){Konva.DD={anim:new Konva.Animation(function(){var a=this.dirty;return this.dirty=!1,a}),isDragging:!1,justDragged:!1,offset:{x:0,y:0},node:null,_drag:function(a){var b=Konva.DD,c=b.node;if(c){if(!b.isDragging){var d=c.getStage().getPointerPosition(),e=c.dragDistance(),f=Math.max(Math.abs(d.x-b.startPointerPos.x),Math.abs(d.y-b.startPointerPos.y));if(e>f)return}c._setDragPosition(a),b.isDragging||(b.isDragging=!0,c.fire("dragstart",{type:"dragstart",target:c,evt:a},!0)),c.fire("dragmove",{type:"dragmove",target:c,evt:a},!0)}},_endDragBefore:function(a){var b,c,d=Konva.DD,e=d.node;e&&(b=e.nodeType,c=e.getLayer(),d.anim.stop(),d.isDragging&&(d.isDragging=!1,d.justDragged=!0,Konva.listenClickTap=!1,a&&(a.dragEndNode=e)),delete d.node,(c||e).draw())},_endDragAfter:function(a){a=a||{};var b=a.dragEndNode;a&&b&&b.fire("dragend",{type:"dragend",target:b,evt:a},!0)}},Konva.Node.prototype.startDrag=function(){var a=Konva.DD,b=this.getStage(),c=this.getLayer(),d=b.getPointerPosition(),e=this.getAbsolutePosition();d&&(a.node&&a.node.stopDrag(),a.node=this,a.startPointerPos=d,a.offset.x=d.x-e.x,a.offset.y=d.y-e.y,a.anim.setLayers(c||this.getLayers()),a.anim.start(),this._setDragPosition())},Konva.Node.prototype._setDragPosition=function(a){var b=Konva.DD,c=this.getStage().getPointerPosition(),d=this.getDragBoundFunc();if(c){var e={x:c.x-b.offset.x,y:c.y-b.offset.y};void 0!==d&&(e=d.call(this,e,a)),this.setAbsolutePosition(e),this._lastPos&&this._lastPos.x===e.x&&this._lastPos.y===e.y||(b.anim.dirty=!0),this._lastPos=e}},Konva.Node.prototype.stopDrag=function(){var a=Konva.DD,b={};a._endDragBefore(b),a._endDragAfter(b)},Konva.Node.prototype.setDraggable=function(a){this._setAttr("draggable",a),this._dragChange()};var a=Konva.Node.prototype.destroy;Konva.Node.prototype.destroy=function(){var b=Konva.DD;b.node&&b.node._id===this._id&&this.stopDrag(),a.call(this)},Konva.Node.prototype.isDragging=function(){var a=Konva.DD;return!(!a.node||a.node._id!==this._id||!a.isDragging)},Konva.Node.prototype._listenDrag=function(){var a=this;this._dragCleanup(),"Stage"===this.getClassName()?this.on("contentMousedown.konva contentTouchstart.konva",function(b){Konva.DD.node||a.startDrag(b)}):this.on("mousedown.konva touchstart.konva",function(b){1!==b.evt.button&&2!==b.evt.button&&(Konva.DD.node||a.startDrag(b))})},Konva.Node.prototype._dragChange=function(){if(this.attrs.draggable)this._listenDrag();else{this._dragCleanup();var a=this.getStage(),b=Konva.DD;a&&b.node&&b.node._id===this._id&&b.node.stopDrag()}},Konva.Node.prototype._dragCleanup=function(){"Stage"===this.getClassName()?(this.off("contentMousedown.konva"),this.off("contentTouchstart.konva")):(this.off("mousedown.konva"),this.off("touchstart.konva"))},Konva.Factory.addGetterSetter(Konva.Node,"dragBoundFunc"),Konva.Factory.addGetter(Konva.Node,"draggable",!1),Konva.Factory.addOverloadedGetterSetter(Konva.Node,"draggable");var b=Konva.document.documentElement;b.addEventListener("mouseup",Konva.DD._endDragBefore,!0),b.addEventListener("touchend",Konva.DD._endDragBefore,!0),b.addEventListener("mouseup",Konva.DD._endDragAfter,!1),b.addEventListener("touchend",Konva.DD._endDragAfter,!1)}(),function(){Konva.Util.addMethods(Konva.Container,{__init:function(a){this.children=new Konva.Collection,Konva.Node.call(this,a)},getChildren:function(a){if(a){var b=new Konva.Collection;return this.children.each(function(c){a(c)&&b.push(c)}),b}return this.children},hasChildren:function(){return this.getChildren().length>0},removeChildren:function(){for(var a,b=Konva.Collection.toCollection(this.children),c=0;c1){for(var b=0;bb;b++)if(d=j[b],"#"===d.charAt(0))f=this._getNodeById(d.slice(1)),f&&i.push(f);else if("."===d.charAt(0))e=this._getNodesByName(d.slice(1)),i=i.concat(e);else for(g=this.getChildren(),h=g.length,c=0;h>c;c++)i=i.concat(g[c]._get(d));return Konva.Collection.toCollection(i)},_getNodeById:function(a){var b=Konva.ids[a];return void 0!==b&&this.isAncestorOf(b)?b:null},_getNodesByName:function(a){var b=Konva.names[a]||[];return this._getDescendants(b)},_get:function(a){for(var b=Konva.Node.prototype._get.call(this,a),c=this.getChildren(),d=c.length,e=0;d>e;e++)b=b.concat(c[e]._get(a));return b},toObject:function(){var a=Konva.Node.prototype.toObject.call(this);a.children=[];for(var b=this.getChildren(),c=b.length,d=0;c>d;d++){var e=b[d];a.children.push(e.toObject())}return a},_getDescendants:function(a){for(var b=[],c=a.length,d=0;c>d;d++){var e=a[d];this.isAncestorOf(e)&&b.push(e)}return b},isAncestorOf:function(a){for(var b=a.getParent();b;){if(b._id===this._id)return!0;b=b.getParent()}return!1},clone:function(a){var b=Konva.Node.prototype.clone.call(this,a);return this.getChildren().each(function(a){b.add(a.clone())}),b},getAllIntersections:function(a){var b=[];return this.find("Shape").each(function(c){c.isVisible()&&c.intersects(a)&&b.push(c) +}),b},_setChildrenIndices:function(){this.children.each(function(a,b){a.index=b})},drawScene:function(a,b){var c=this.getLayer(),d=a||c&&c.getCanvas(),e=d&&d.getContext(),f=this._cache.canvas,g=f&&f.scene;return this.isVisible()&&(g?this._drawCachedSceneCanvas(e):this._drawChildren(d,"drawScene",b)),this},drawHit:function(a,b){var c=this.getLayer(),d=a||c&&c.hitCanvas,e=d&&d.getContext(),f=this._cache.canvas,g=f&&f.hit;return this.shouldDrawHit(d)&&(c&&c.clearHitCache(),g?this._drawCachedHitCanvas(e):this._drawChildren(d,"drawHit",b)),this},_drawChildren:function(a,b,c){var d,e,f=this.getLayer(),g=a&&a.getContext(),h=this.getClipWidth(),i=this.getClipHeight(),j=h&&i;j&&f&&(d=this.getClipX(),e=this.getClipY(),g.save(),f._applyTransform(this,g),g.beginPath(),g.rect(d,e,h,i),g.clip(),g.reset()),this.children.each(function(d){d[b](a,c)}),j&&g.restore()},shouldDrawHit:function(a){var b=this.getLayer(),c=Konva.DD,d=c&&Konva.isDragging()&&-1!==Konva.DD.anim.getLayers().indexOf(b);return a&&a.isCache||b&&b.hitGraphEnabled()&&this.isVisible()&&!d}}),Konva.Util.extend(Konva.Container,Konva.Node),Konva.Container.prototype.get=Konva.Container.prototype.find,Konva.Factory.addComponentsGetterSetter(Konva.Container,"clip",["x","y","width","height"]),Konva.Factory.addGetterSetter(Konva.Container,"clipX"),Konva.Factory.addGetterSetter(Konva.Container,"clipY"),Konva.Factory.addGetterSetter(Konva.Container,"clipWidth"),Konva.Factory.addGetterSetter(Konva.Container,"clipHeight"),Konva.Collection.mapMethods(Konva.Container)}(),function(){function a(a){a.fill()}function b(a){a.stroke()}function c(a){a.fill()}function d(a){a.stroke()}function e(){this._clearCache(f)}var f="hasShadow";Konva.Util.addMethods(Konva.Shape,{__init:function(f){this.nodeType="Shape",this._fillFunc=a,this._strokeFunc=b,this._fillFuncHit=c,this._strokeFuncHit=d;for(var g,h=Konva.shapes;;)if(g=Konva.Util.getRandomColor(),g&&!(g in h))break;this.colorKey=g,h[g]=this,Konva.Node.call(this,f),this.on("shadowColorChange.konva shadowBlurChange.konva shadowOffsetChange.konva shadowOpacityChange.konva shadowEnabledChange.konva",e)},hasChildren:function(){return!1},getChildren:function(){return[]},getContext:function(){return this.getLayer().getContext()},getCanvas:function(){return this.getLayer().getCanvas()},hasShadow:function(){return this._getCache(f,this._hasShadow)},_hasShadow:function(){return this.getShadowEnabled()&&0!==this.getShadowOpacity()&&!!(this.getShadowColor()||this.getShadowBlur()||this.getShadowOffsetX()||this.getShadowOffsetY())},hasFill:function(){return!!(this.getFill()||this.getFillPatternImage()||this.getFillLinearGradientColorStops()||this.getFillRadialGradientColorStops())},hasStroke:function(){return!!(this.stroke()||this.strokeRed()||this.strokeGreen()||this.strokeBlue())},intersects:function(a){var b,c=this.getStage(),d=c.bufferHitCanvas;return d.getContext().clear(),this.drawScene(d),b=d.context.getImageData(Math.round(a.x),Math.round(a.y),1,1).data,b[3]>0},destroy:function(){Konva.Node.prototype.destroy.call(this),delete Konva.shapes[this.colorKey]},_useBufferCanvas:function(){return(this.hasShadow()||1!==this.getAbsoluteOpacity())&&this.hasFill()&&this.hasStroke()&&this.getStage()},drawScene:function(a,b){var c,d,e,f=this.getLayer(),g=a||f.getCanvas(),h=g.getContext(),i=this._cache.canvas,j=this.sceneFunc(),k=this.hasShadow();if(this.isVisible())if(i)this._drawCachedSceneCanvas(h);else if(j){if(h.save(),this._useBufferCanvas()){if(c=this.getStage(),d=c.bufferCanvas,e=d.getContext(),e.clear(),e.save(),e._applyLineJoin(this),f)f._applyTransform(this,e,b);else{var l=this.getAbsoluteTransform(b).getMatrix();h.transform(l[0],l[1],l[2],l[3],l[4],l[5])}j.call(this,e),e.restore(),k&&!g.hitCanvas&&(h.save(),h._applyShadow(this),h.drawImage(d._canvas,0,0),h.restore()),h._applyOpacity(this),h.drawImage(d._canvas,0,0)}else{if(h._applyLineJoin(this),f)f._applyTransform(this,h,b);else{var m=this.getAbsoluteTransform(b).getMatrix();h.transform(m[0],m[1],m[2],m[3],m[4],m[5])}k&&!g.hitCanvas&&(h.save(),h._applyShadow(this),j.call(this,h),h.restore()),h._applyOpacity(this),j.call(this,h)}h.restore()}return this},drawHit:function(a,b){var c=this.getLayer(),d=a||c.hitCanvas,e=d.getContext(),f=this.hitFunc()||this.sceneFunc(),g=this._cache.canvas,h=g&&g.hit;if(this.shouldDrawHit(d))if(c&&c.clearHitCache(),h)this._drawCachedHitCanvas(e);else if(f){if(e.save(),e._applyLineJoin(this),c)c._applyTransform(this,e,b);else{var i=this.getAbsoluteTransform(b).getMatrix();e.transform(i[0],i[1],i[2],i[3],i[4],i[5])}f.call(this,e),e.restore()}return this},drawHitFromCache:function(a){var b,c,d,e,f,g,h,i,j=a||0,k=this._cache.canvas,l=this._getCachedSceneCanvas(),m=l.getContext(),n=k.hit,o=n.getContext(),p=l.getWidth(),q=l.getHeight();o.clear();try{for(b=m.getImageData(0,0,p,q),c=b.data,d=o.getImageData(0,0,p,q),e=d.data,f=c.length,g=Konva.Util._hexToRgb(this.colorKey),h=0;f>h;h+=4)i=c[h+3],i>j&&(e[h]=g.r,e[h+1]=g.g,e[h+2]=g.b,e[h+3]=255);o.putImageData(d,0,0)}catch(r){Konva.Util.warn("Unable to draw hit graph from cached scene canvas. "+r.message)}return this}}),Konva.Util.extend(Konva.Shape,Konva.Node),Konva.Factory.addGetterSetter(Konva.Shape,"stroke"),Konva.Factory.addGetterSetter(Konva.Shape,"strokeRed",0,Konva.Validators.RGBComponent),Konva.Factory.addGetterSetter(Konva.Shape,"strokeGreen",0,Konva.Validators.RGBComponent),Konva.Factory.addGetterSetter(Konva.Shape,"strokeBlue",0,Konva.Validators.RGBComponent),Konva.Factory.addGetterSetter(Konva.Shape,"strokeAlpha",1,Konva.Validators.alphaComponent),Konva.Factory.addGetterSetter(Konva.Shape,"strokeWidth",2),Konva.Factory.addGetterSetter(Konva.Shape,"lineJoin"),Konva.Factory.addGetterSetter(Konva.Shape,"lineCap"),Konva.Factory.addGetterSetter(Konva.Shape,"sceneFunc"),Konva.Factory.addGetterSetter(Konva.Shape,"hitFunc"),Konva.Factory.addGetterSetter(Konva.Shape,"dash"),Konva.Factory.addGetterSetter(Konva.Shape,"shadowColor"),Konva.Factory.addGetterSetter(Konva.Shape,"shadowRed",0,Konva.Validators.RGBComponent),Konva.Factory.addGetterSetter(Konva.Shape,"shadowGreen",0,Konva.Validators.RGBComponent),Konva.Factory.addGetterSetter(Konva.Shape,"shadowBlue",0,Konva.Validators.RGBComponent),Konva.Factory.addGetterSetter(Konva.Shape,"shadowAlpha",1,Konva.Validators.alphaComponent),Konva.Factory.addGetterSetter(Konva.Shape,"shadowBlur"),Konva.Factory.addGetterSetter(Konva.Shape,"shadowOpacity"),Konva.Factory.addComponentsGetterSetter(Konva.Shape,"shadowOffset",["x","y"]),Konva.Factory.addGetterSetter(Konva.Shape,"shadowOffsetX",0),Konva.Factory.addGetterSetter(Konva.Shape,"shadowOffsetY",0),Konva.Factory.addGetterSetter(Konva.Shape,"fillPatternImage"),Konva.Factory.addGetterSetter(Konva.Shape,"fill"),Konva.Factory.addGetterSetter(Konva.Shape,"fillRed",0,Konva.Validators.RGBComponent),Konva.Factory.addGetterSetter(Konva.Shape,"fillGreen",0,Konva.Validators.RGBComponent),Konva.Factory.addGetterSetter(Konva.Shape,"fillBlue",0,Konva.Validators.RGBComponent),Konva.Factory.addGetterSetter(Konva.Shape,"fillAlpha",1,Konva.Validators.alphaComponent),Konva.Factory.addGetterSetter(Konva.Shape,"fillPatternX",0),Konva.Factory.addGetterSetter(Konva.Shape,"fillPatternY",0),Konva.Factory.addGetterSetter(Konva.Shape,"fillLinearGradientColorStops"),Konva.Factory.addGetterSetter(Konva.Shape,"fillRadialGradientStartRadius",0),Konva.Factory.addGetterSetter(Konva.Shape,"fillRadialGradientEndRadius",0),Konva.Factory.addGetterSetter(Konva.Shape,"fillRadialGradientColorStops"),Konva.Factory.addGetterSetter(Konva.Shape,"fillPatternRepeat","repeat"),Konva.Factory.addGetterSetter(Konva.Shape,"fillEnabled",!0),Konva.Factory.addGetterSetter(Konva.Shape,"strokeEnabled",!0),Konva.Factory.addGetterSetter(Konva.Shape,"shadowEnabled",!0),Konva.Factory.addGetterSetter(Konva.Shape,"dashEnabled",!0),Konva.Factory.addGetterSetter(Konva.Shape,"strokeScaleEnabled",!0),Konva.Factory.addGetterSetter(Konva.Shape,"fillPriority","color"),Konva.Factory.addComponentsGetterSetter(Konva.Shape,"fillPatternOffset",["x","y"]),Konva.Factory.addGetterSetter(Konva.Shape,"fillPatternOffsetX",0),Konva.Factory.addGetterSetter(Konva.Shape,"fillPatternOffsetY",0),Konva.Factory.addComponentsGetterSetter(Konva.Shape,"fillPatternScale",["x","y"]),Konva.Factory.addGetterSetter(Konva.Shape,"fillPatternScaleX",1),Konva.Factory.addGetterSetter(Konva.Shape,"fillPatternScaleY",1),Konva.Factory.addComponentsGetterSetter(Konva.Shape,"fillLinearGradientStartPoint",["x","y"]),Konva.Factory.addGetterSetter(Konva.Shape,"fillLinearGradientStartPointX",0),Konva.Factory.addGetterSetter(Konva.Shape,"fillLinearGradientStartPointY",0),Konva.Factory.addComponentsGetterSetter(Konva.Shape,"fillLinearGradientEndPoint",["x","y"]),Konva.Factory.addGetterSetter(Konva.Shape,"fillLinearGradientEndPointX",0),Konva.Factory.addGetterSetter(Konva.Shape,"fillLinearGradientEndPointY",0),Konva.Factory.addComponentsGetterSetter(Konva.Shape,"fillRadialGradientStartPoint",["x","y"]),Konva.Factory.addGetterSetter(Konva.Shape,"fillRadialGradientStartPointX",0),Konva.Factory.addGetterSetter(Konva.Shape,"fillRadialGradientStartPointY",0),Konva.Factory.addComponentsGetterSetter(Konva.Shape,"fillRadialGradientEndPoint",["x","y"]),Konva.Factory.addGetterSetter(Konva.Shape,"fillRadialGradientEndPointX",0),Konva.Factory.addGetterSetter(Konva.Shape,"fillRadialGradientEndPointY",0),Konva.Factory.addGetterSetter(Konva.Shape,"fillPatternRotation",0),Konva.Factory.backCompat(Konva.Shape,{dashArray:"dash",getDashArray:"getDash",setDashArray:"getDash",drawFunc:"sceneFunc",getDrawFunc:"getSceneFunc",setDrawFunc:"setSceneFunc",drawHitFunc:"hitFunc",getDrawHitFunc:"getHitFunc",setDrawHitFunc:"setHitFunc"}),Konva.Collection.mapMethods(Konva.Shape)}(),function(){function a(a,b){a.content.addEventListener(b,function(c){a[L+b](c)},!1)}var b="Stage",c="string",d="px",e="mouseout",f="mouseleave",g="mouseover",h="mouseenter",i="mousemove",j="mousedown",k="mouseup",l="click",m="dblclick",n="touchstart",o="touchend",p="tap",q="dbltap",r="touchmove",s="DOMMouseScroll",t="mousewheel",u="wheel",v="contentMouseout",w="contentMouseover",x="contentMousemove",y="contentMousedown",z="contentMouseup",A="contentClick",B="contentDblclick",C="contentTouchstart",D="contentTouchend",E="contentDbltap",F="contentTouchmove",G="div",H="relative",I="inline-block",J="konvajs-content",K=" ",L="_",M="container",N="",O=[j,i,k,e,n,r,o,g,s,t,u],P=O.length;Konva.Util.addMethods(Konva.Stage,{___init:function(a){this.nodeType=b,Konva.Container.call(this,a),this._id=Konva.idCounter++,this._buildDOM(),this._bindContentEvents(),this._enableNestedTransforms=!1,Konva.stages.push(this)},_validateAdd:function(a){"Layer"!==a.getType()&&Konva.Util.error("You may only add layers to the stage.")},setContainer:function(a){if(typeof a===c){var b=a;if(a=Konva.document.getElementById(a),!a)throw"Can not find container in document with id "+b}return this._setAttr(M,a),this},shouldDrawHit:function(){return!0},draw:function(){return Konva.Node.prototype.draw.call(this),this},setHeight:function(a){return Konva.Node.prototype.setHeight.call(this,a),this._resizeDOM(),this},setWidth:function(a){return Konva.Node.prototype.setWidth.call(this,a),this._resizeDOM(),this},clear:function(){var a,b=this.children,c=b.length;for(a=0;c>a;a++)b[a].clear();return this},clone:function(a){return a||(a={}),a.container=Konva.document.createElement(G),Konva.Container.prototype.clone.call(this,a)},destroy:function(){var a=this.content;Konva.Container.prototype.destroy.call(this),a&&Konva.Util._isInDocument(a)&&this.getContainer().removeChild(a);var b=Konva.stages.indexOf(this);b>-1&&Konva.stages.splice(b,1)},getPointerPosition:function(){return this.pointerPos},getStage:function(){return this},getContent:function(){return this.content},toDataURL:function(a){function b(e){var f=i[e],j=f.toDataURL(),k=new Konva.window.Image;k.onload=function(){h.drawImage(k,0,0),e=0;b--)if(c=d[b].getIntersection(a))return c;return null},_resizeDOM:function(){if(this.content){var a,b,c=this.getWidth(),e=this.getHeight(),f=this.getChildren(),g=f.length;for(this.content.style.width=c+d,this.content.style.height=e+d,this.bufferCanvas.setSize(c,e),this.bufferHitCanvas.setSize(c,e),a=0;g>a;a++)b=f[a],b.setSize(c,e),b.draw()}},add:function(a){if(!(arguments.length>1))return Konva.Container.prototype.add.call(this,a),a._setCanvasSize(this.width(),this.height()),a.draw(),this.content.appendChild(a.canvas._canvas),this;for(var b=0;bb;b++)a(this,O[b])},_mouseover:function(a){Konva.UA.mobile||(this._setPointerPosition(a),this._fire(w,{evt:a}))},_mouseout:function(a){if(!Konva.UA.mobile){this._setPointerPosition(a);var b=this.targetShape;b&&!Konva.isDragging()&&(b._fireAndBubble(e,{evt:a}),b._fireAndBubble(f,{evt:a}),this.targetShape=null),this.pointerPos=void 0,this._fire(v,{evt:a})}},_mousemove:function(a){if(Konva.UA.ieMobile)return this._touchmove(a);if(("undefined"==typeof a.webkitMovementX&&"undefined"==typeof a.webkitMovementY||0!==a.webkitMovementY||0!==a.webkitMovementX)&&!Konva.UA.mobile){this._setPointerPosition(a);var b,c=Konva.DD;Konva.isDragging()||(b=this.getIntersection(this.getPointerPosition()),b&&b.isListening()?Konva.isDragging()||this.targetShape&&this.targetShape._id===b._id?b._fireAndBubble(i,{evt:a}):(this.targetShape&&(this.targetShape._fireAndBubble(e,{evt:a},b),this.targetShape._fireAndBubble(f,{evt:a},b)),b._fireAndBubble(g,{evt:a},this.targetShape),b._fireAndBubble(h,{evt:a},this.targetShape),this.targetShape=b):this.targetShape&&!Konva.isDragging()&&(this.targetShape._fireAndBubble(e,{evt:a}),this.targetShape._fireAndBubble(f,{evt:a}),this.targetShape=null),this._fire(x,{evt:a})),c&&c._drag(a),a.preventDefault&&a.preventDefault()}},_mousedown:function(a){if(Konva.UA.ieMobile)return this._touchstart(a);if(!Konva.UA.mobile){this._setPointerPosition(a);var b=this.getIntersection(this.getPointerPosition());Konva.listenClickTap=!0,b&&b.isListening()&&(this.clickStartShape=b,b._fireAndBubble(j,{evt:a})),this._fire(y,{evt:a})}a.preventDefault&&a.preventDefault()},_mouseup:function(a){if(Konva.UA.ieMobile)return this._touchend(a);if(!Konva.UA.mobile){this._setPointerPosition(a);var b=this.getIntersection(this.getPointerPosition()),c=this.clickStartShape,d=!1,e=Konva.DD;Konva.inDblClickWindow?(d=!0,Konva.inDblClickWindow=!1):e&&e.justDragged?e&&(e.justDragged=!1):Konva.inDblClickWindow=!0,setTimeout(function(){Konva.inDblClickWindow=!1},Konva.dblClickWindow),b&&b.isListening()&&(b._fireAndBubble(k,{evt:a}),Konva.listenClickTap&&c&&c._id===b._id&&(b._fireAndBubble(l,{evt:a}),d&&b._fireAndBubble(m,{evt:a}))),this._fire(z,{evt:a}),Konva.listenClickTap&&(this._fire(A,{evt:a}),d&&this._fire(B,{evt:a})),Konva.listenClickTap=!1}a.preventDefault&&a.preventDefault()},_touchstart:function(a){this._setPointerPosition(a);var b=this.getIntersection(this.getPointerPosition());Konva.listenClickTap=!0,b&&b.isListening()&&(this.tapStartShape=b,b._fireAndBubble(n,{evt:a}),b.isListening()&&a.preventDefault&&a.preventDefault()),this._fire(C,{evt:a})},_touchend:function(a){this._setPointerPosition(a);var b=this.getIntersection(this.getPointerPosition()),c=!1;Konva.inDblClickWindow?(c=!0,Konva.inDblClickWindow=!1):Konva.inDblClickWindow=!0,setTimeout(function(){Konva.inDblClickWindow=!1},Konva.dblClickWindow),b&&b.isListening()&&(b._fireAndBubble(o,{evt:a}),Konva.listenClickTap&&b._id===this.tapStartShape._id&&(b._fireAndBubble(p,{evt:a}),c&&b._fireAndBubble(q,{evt:a})),b.isListening()&&a.preventDefault&&a.preventDefault()),Konva.listenClickTap&&(this._fire(D,{evt:a}),c&&this._fire(E,{evt:a})),Konva.listenClickTap=!1},_touchmove:function(a){this._setPointerPosition(a);var b,c=Konva.DD;Konva.isDragging()||(b=this.getIntersection(this.getPointerPosition()),b&&b.isListening()&&(b._fireAndBubble(r,{evt:a}),b.isListening()&&a.preventDefault&&a.preventDefault()),this._fire(F,{evt:a})),c&&(c._drag(a),Konva.isDragging()&&a.preventDefault())},_DOMMouseScroll:function(a){this._mousewheel(a)},_mousewheel:function(a){this._setPointerPosition(a);var b=this.getIntersection(this.getPointerPosition());b&&b.isListening()&&b._fireAndBubble(t,{evt:a})},_wheel:function(a){this._mousewheel(a)},_setPointerPosition:function(a){var b,c=this._getContentPosition(),d=a.offsetX,e=a.clientX,f=null,g=null;a=a?a:window.event,void 0!==a.touches?a.touches.length>0&&(b=a.touches[0],f=b.clientX-c.left,g=b.clientY-c.top):void 0!==d?(f=d,g=a.offsetY):"mozilla"===Konva.UA.browser?(f=a.layerX,g=a.layerY):void 0!==e&&c&&(f=e-c.left,g=a.clientY-c.top),null!==f&&null!==g&&(this.pointerPos={x:f,y:g})},_getContentPosition:function(){var a=this.content.getBoundingClientRect?this.content.getBoundingClientRect():{top:0,left:0};return{top:a.top,left:a.left}},_buildDOM:function(){var a=this.getContainer();if(!a){if(Konva.Util.isBrowser())throw"Stage has no container. A container is required.";a=Konva.document.createElement(G)}a.innerHTML=N,this.content=Konva.document.createElement(G),this.content.style.position=H,this.content.style.display=I,this.content.className=J,this.content.setAttribute("role","presentation"),a.appendChild(this.content),this.bufferCanvas=new Konva.SceneCanvas({pixelRatio:1}),this.bufferHitCanvas=new Konva.HitCanvas,this._resizeDOM()},_onContent:function(a,b){var c,d,e=a.split(K),f=e.length;for(c=0;f>c;c++)d=e[c],this.content.addEventListener(d,b,!1)},cache:function(){Konva.Util.warn("Cache function is not allowed for stage. You may use cache only for layers, groups and shapes.")},clearCache:function(){}}),Konva.Util.extend(Konva.Stage,Konva.Container),Konva.Factory.addGetter(Konva.Stage,"container"),Konva.Factory.addOverloadedGetterSetter(Konva.Stage,"container")}(),function(){Konva.Util.addMethods(Konva.BaseLayer,{___init:function(a){this.nodeType="Layer",Konva.Container.call(this,a)},createPNGStream:function(){return this.canvas._canvas.createPNGStream()},getCanvas:function(){return this.canvas},getHitCanvas:function(){return this.hitCanvas},getContext:function(){return this.getCanvas().getContext()},clear:function(a){return this.getContext().clear(a),this.getHitCanvas().getContext().clear(a),this},clearHitCache:function(){this._hitImageData=void 0},setZIndex:function(a){Konva.Node.prototype.setZIndex.call(this,a);var b=this.getStage();return b&&(b.content.removeChild(this.getCanvas()._canvas),ac;c++){if(f=d[c],b=this._getIntersection({x:a.x+f.x*h,y:a.y+f.y*h}),g=b.shape)return g;b.antialiased&&(i=!0)}if(!i)return;h+=1}},_getImageData:function(a,b){var c=this.hitCanvas.width||1,d=this.hitCanvas.height||1,e=Math.round(b)*c+Math.round(a);return this._hitImageData||(this._hitImageData=this.hitCanvas.context.getImageData(0,0,c,d)),[this._hitImageData.data[4*e+0],this._hitImageData.data[4*e+1],this._hitImageData.data[4*e+2],this._hitImageData.data[4*e+3]]},_getIntersection:function(b){var c,d,e=this.hitCanvas.context.getImageData(b.x,b.y,1,1).data,f=e[3];return 255===f?(c=Konva.Util._rgbToHex(e[0],e[1],e[2]),d=Konva.shapes[a+c],{shape:d}):f>0?{antialiased:!0}:{}},drawScene:function(a,d){var e=this.getLayer(),f=a||e&&e.getCanvas();return this._fire(b,{node:this}),this.getClearBeforeDraw()&&f.getContext().clear(),Konva.Container.prototype.drawScene.call(this,f,d),this._fire(c,{node:this}),this},_applyTransform:function(a,b,c){var d=a.getAbsoluteTransform(c).getMatrix();b.transform(d[0],d[1],d[2],d[3],d[4],d[5])},drawHit:function(a,b){var c=this.getLayer(),d=a||c&&c.hitCanvas;return c&&c.getClearBeforeDraw()&&c.getHitCanvas().getContext().clear(),Konva.Container.prototype.drawHit.call(this,d,b),this.imageData=null,this},clear:function(a){return this.getContext().clear(a),this.getHitCanvas().getContext().clear(a),this.imageData=null,this},setVisible:function(a){return Konva.Node.prototype.setVisible.call(this,a),a?(this.getCanvas()._canvas.style.display="block",this.hitCanvas._canvas.style.display="block"):(this.getCanvas()._canvas.style.display="none",this.hitCanvas._canvas.style.display="none"),this},enableHitGraph:function(){return this.setHitGraphEnabled(!0),this},disableHitGraph:function(){return this.setHitGraphEnabled(!1),this},setSize:function(a,b){Konva.BaseLayer.prototype.setSize.call(this,a,b),this.hitCanvas.setSize(a,b)}}),Konva.Util.extend(Konva.Layer,Konva.BaseLayer),Konva.Factory.addGetterSetter(Konva.Layer,"hitGraphEnabled",!0),Konva.Collection.mapMethods(Konva.Layer)}(),function(){Konva.Util.addMethods(Konva.FastLayer,{____init:function(a){this.nodeType="Layer",this.canvas=new Konva.SceneCanvas,Konva.BaseLayer.call(this,a)},_validateAdd:function(a){var b=a.getType();"Shape"!==b&&Konva.Util.error("You may only add shapes to a fast layer.")},_setCanvasSize:function(a,b){this.canvas.setSize(a,b)},hitGraphEnabled:function(){return!1},getIntersection:function(){return null},drawScene:function(a){var b=this.getLayer(),c=a||b&&b.getCanvas();return this.getClearBeforeDraw()&&c.getContext().clear(),Konva.Container.prototype.drawScene.call(this,c),this},_applyTransform:function(a,b,c){if(!c||c._id!==this._id){var d=a.getTransform().getMatrix();b.transform(d[0],d[1],d[2],d[3],d[4],d[5])}},draw:function(){return this.drawScene(),this},clear:function(a){return this.getContext().clear(a),this},setVisible:function(a){return Konva.Node.prototype.setVisible.call(this,a),this.getCanvas()._canvas.style.display=a?"block":"none",this}}),Konva.Util.extend(Konva.FastLayer,Konva.BaseLayer),Konva.Collection.mapMethods(Konva.FastLayer)}(),function(){Konva.Util.addMethods(Konva.Group,{___init:function(a){this.nodeType="Group",Konva.Container.call(this,a)},_validateAdd:function(a){var b=a.getType();"Group"!==b&&"Shape"!==b&&Konva.Util.error("You may only add groups and shapes to groups.")}}),Konva.Util.extend(Konva.Group,Konva.Container),Konva.Collection.mapMethods(Konva.Group)}(),function(){Konva.Rect=function(a){this.___init(a)},Konva.Rect.prototype={___init:function(a){Konva.Shape.call(this,a),this.className="Rect",this.sceneFunc(this._sceneFunc)},_sceneFunc:function(a){var b=this.getCornerRadius(),c=this.getWidth(),d=this.getHeight();a.beginPath(),b?(b=Math.min(b,c/2,d/2),a.moveTo(b,0),a.lineTo(c-b,0),a.arc(c-b,b,b,3*Math.PI/2,0,!1),a.lineTo(c,d-b),a.arc(c-b,d-b,b,0,Math.PI/2,!1),a.lineTo(b,d),a.arc(b,d-b,b,Math.PI/2,Math.PI,!1),a.lineTo(0,b),a.arc(b,b,b,Math.PI,3*Math.PI/2,!1)):a.rect(0,0,c,d),a.closePath(),a.fillStrokeShape(this)}},Konva.Util.extend(Konva.Rect,Konva.Shape),Konva.Factory.addGetterSetter(Konva.Rect,"cornerRadius",0),Konva.Collection.mapMethods(Konva.Rect)}(),function(){var a=2*Math.PI-1e-4,b="Circle";Konva.Circle=function(a){this.___init(a)},Konva.Circle.prototype={___init:function(a){Konva.Shape.call(this,a),this.className=b,this.sceneFunc(this._sceneFunc)},_sceneFunc:function(b){b.beginPath(),b.arc(0,0,this.getRadius(),0,a,!1),b.closePath(),b.fillStrokeShape(this)},getWidth:function(){return 2*this.getRadius()},getHeight:function(){return 2*this.getRadius()},setWidth:function(a){Konva.Node.prototype.setWidth.call(this,a),this.radius()!==a/2&&this.setRadius(a/2)},setHeight:function(a){Konva.Node.prototype.setHeight.call(this,a),this.radius()!==a/2&&this.setRadius(a/2)},setRadius:function(a){this._setAttr("radius",a),this.setWidth(2*a),this.setHeight(2*a)}},Konva.Util.extend(Konva.Circle,Konva.Shape),Konva.Factory.addGetter(Konva.Circle,"radius",0),Konva.Factory.addOverloadedGetterSetter(Konva.Circle,"radius"),Konva.Collection.mapMethods(Konva.Circle)}(),function(){var a=2*Math.PI-1e-4,b="Ellipse";Konva.Ellipse=function(a){this.___init(a)},Konva.Ellipse.prototype={___init:function(a){Konva.Shape.call(this,a),this.className=b,this.sceneFunc(this._sceneFunc)},_sceneFunc:function(b){var c=this.getRadiusX(),d=this.getRadiusY();b.beginPath(),b.save(),c!==d&&b.scale(1,d/c),b.arc(0,0,c,0,a,!1),b.restore(),b.closePath(),b.fillStrokeShape(this)},getWidth:function(){return 2*this.getRadiusX()},getHeight:function(){return 2*this.getRadiusY()},setWidth:function(a){Konva.Node.prototype.setWidth.call(this,a),this.setRadius({x:a/2})},setHeight:function(a){Konva.Node.prototype.setHeight.call(this,a),this.setRadius({y:a/2})}},Konva.Util.extend(Konva.Ellipse,Konva.Shape),Konva.Factory.addComponentsGetterSetter(Konva.Ellipse,"radius",["x","y"]),Konva.Factory.addGetterSetter(Konva.Ellipse,"radiusX",0),Konva.Factory.addGetterSetter(Konva.Ellipse,"radiusY",0),Konva.Collection.mapMethods(Konva.Ellipse)}(),function(){var a=2*Math.PI-1e-4;Konva.Ring=function(a){this.___init(a)},Konva.Ring.prototype={___init:function(a){Konva.Shape.call(this,a),this.className="Ring",this.sceneFunc(this._sceneFunc)},_sceneFunc:function(b){b.beginPath(),b.arc(0,0,this.getInnerRadius(),0,a,!1),b.moveTo(this.getOuterRadius(),0),b.arc(0,0,this.getOuterRadius(),a,0,!0),b.closePath(),b.fillStrokeShape(this)},getWidth:function(){return 2*this.getOuterRadius()},getHeight:function(){return 2*this.getOuterRadius()},setWidth:function(a){Konva.Node.prototype.setWidth.call(this,a),this.outerRadius()!==a/2&&this.setOuterRadius(a/2)},setHeight:function(a){Konva.Node.prototype.setHeight.call(this,a),this.outerRadius()!==a/2&&this.setOuterRadius(a/2)},setOuterRadius:function(a){this._setAttr("outerRadius",a),this.setWidth(2*a),this.setHeight(2*a)}},Konva.Util.extend(Konva.Ring,Konva.Shape),Konva.Factory.addGetterSetter(Konva.Ring,"innerRadius",0),Konva.Factory.addGetter(Konva.Ring,"outerRadius",0),Konva.Factory.addOverloadedGetterSetter(Konva.Ring,"outerRadius"),Konva.Collection.mapMethods(Konva.Ring)}(),function(){Konva.Wedge=function(a){this.___init(a)},Konva.Wedge.prototype={___init:function(a){Konva.Shape.call(this,a),this.className="Wedge",this.sceneFunc(this._sceneFunc)},_sceneFunc:function(a){a.beginPath(),a.arc(0,0,this.getRadius(),0,Konva.getAngle(this.getAngle()),this.getClockwise()),a.lineTo(0,0),a.closePath(),a.fillStrokeShape(this)}},Konva.Util.extend(Konva.Wedge,Konva.Shape),Konva.Factory.addGetterSetter(Konva.Wedge,"radius",0),Konva.Factory.addGetterSetter(Konva.Wedge,"angle",0),Konva.Factory.addGetterSetter(Konva.Wedge,"clockwise",!1),Konva.Factory.backCompat(Konva.Wedge,{angleDeg:"angle",getAngleDeg:"getAngle",setAngleDeg:"setAngle"}),Konva.Collection.mapMethods(Konva.Wedge)}(),function(){Konva.Arc=function(a){this.___init(a)},Konva.Arc.prototype={___init:function(a){Konva.Shape.call(this,a),this.className="Arc",this.sceneFunc(this._sceneFunc)},_sceneFunc:function(a){var b=Konva.getAngle(this.angle()),c=this.clockwise();a.beginPath(),a.arc(0,0,this.getOuterRadius(),0,b,c),a.arc(0,0,this.getInnerRadius(),b,0,!c),a.closePath(),a.fillStrokeShape(this)}},Konva.Util.extend(Konva.Arc,Konva.Shape),Konva.Factory.addGetterSetter(Konva.Arc,"innerRadius",0),Konva.Factory.addGetterSetter(Konva.Arc,"outerRadius",0),Konva.Factory.addGetterSetter(Konva.Arc,"angle",0),Konva.Factory.addGetterSetter(Konva.Arc,"clockwise",!1),Konva.Collection.mapMethods(Konva.Arc)}(),function(){var a="Image";Konva.Image=function(a){this.___init(a)},Konva.Image.prototype={___init:function(b){Konva.Shape.call(this,b),this.className=a,this.sceneFunc(this._sceneFunc),this.hitFunc(this._hitFunc)},_useBufferCanvas:function(){return(this.hasShadow()||1!==this.getAbsoluteOpacity())&&this.hasStroke()&&this.getStage()},_sceneFunc:function(a){var b,c,d,e=this.getWidth(),f=this.getHeight(),g=this.getImage();g&&(b=this.getCropWidth(),c=this.getCropHeight(),d=b&&c?[g,this.getCropX(),this.getCropY(),b,c,0,0,e,f]:[g,0,0,e,f]),(this.hasFill()||this.hasStroke()||this.hasShadow())&&(a.beginPath(),a.rect(0,0,e,f),a.closePath(),a.fillStrokeShape(this)),g&&a.drawImage.apply(a,d)},_hitFunc:function(a){var b=this.getWidth(),c=this.getHeight();a.beginPath(),a.rect(0,0,b,c),a.closePath(),a.fillStrokeShape(this)},getWidth:function(){var a=this.getImage();return this.attrs.width||(a?a.width:0)},getHeight:function(){var a=this.getImage();return this.attrs.height||(a?a.height:0)}},Konva.Util.extend(Konva.Image,Konva.Shape),Konva.Factory.addGetterSetter(Konva.Image,"image"),Konva.Factory.addComponentsGetterSetter(Konva.Image,"crop",["x","y","width","height"]),Konva.Factory.addGetterSetter(Konva.Image,"cropX",0),Konva.Factory.addGetterSetter(Konva.Image,"cropY",0),Konva.Factory.addGetterSetter(Konva.Image,"cropWidth",0),Konva.Factory.addGetterSetter(Konva.Image,"cropHeight",0),Konva.Collection.mapMethods(Konva.Image)}(),function(){function a(a){a.fillText(this.partialText,0,0)}function b(a){a.strokeText(this.partialText,0,0)}var c="auto",d="center",e="Change.konva",f="2d",g="-",h="",i="left",j="text",k="Text",l="middle",m="normal",n="px ",o=" ",p="right",q="word",r="char",s="none",t=["fontFamily","fontSize","fontStyle","fontVariant","padding","align","lineHeight","text","width","height","wrap"],u=t.length,v=Konva.Util.createCanvasElement().getContext(f); +Konva.Text=function(a){this.___init(a)},Konva.Text.prototype={___init:function(d){d=d||{},d.fill=d.fill||"black",void 0===d.width&&(d.width=c),void 0===d.height&&(d.height=c),Konva.Shape.call(this,d),this._fillFunc=a,this._strokeFunc=b,this.className=k;for(var f=0;u>f;f++)this.on(t[f]+e,this._setTextData);this._setTextData(),this.sceneFunc(this._sceneFunc),this.hitFunc(this._hitFunc)},_sceneFunc:function(a){var b,c=this.getPadding(),e=this.getTextHeight(),f=this.getLineHeight()*e,g=this.textArr,h=g.length,j=this.getWidth();for(a.setAttr("font",this._getContextFont()),a.setAttr("textBaseline",l),a.setAttr("textAlign",i),a.save(),c?(a.translate(c,0),a.translate(0,c+e/2)):a.translate(0,e/2),b=0;h>b;b++){var k=g[b],m=k.text,n=k.width;a.save(),this.getAlign()===p?a.translate(j-n-2*c,0):this.getAlign()===d&&a.translate((j-n-2*c)/2,0),this.partialText=m,a.fillStrokeShape(this),a.restore(),a.translate(0,f)}a.restore()},_hitFunc:function(a){var b=this.getWidth(),c=this.getHeight();a.beginPath(),a.rect(0,0,b,c),a.closePath(),a.fillStrokeShape(this)},setText:function(a){var b=Konva.Util._isString(a)?a:a.toString();return this._setAttr(j,b),this},getWidth:function(){return this.attrs.width===c?this.getTextWidth()+2*this.getPadding():this.attrs.width},getHeight:function(){return this.attrs.height===c?this.getTextHeight()*this.textArr.length*this.getLineHeight()+2*this.getPadding():this.attrs.height},getTextWidth:function(){return this.textWidth},getTextHeight:function(){return this.textHeight},_getTextSize:function(a){var b,c=v,d=this.getFontSize();return c.save(),c.font=this._getContextFont(),b=c.measureText(a),c.restore(),{width:b.width,height:parseInt(d,10)}},_getContextFont:function(){return this.getFontStyle()+o+this.getFontVariant()+o+this.getFontSize()+n+this.getFontFamily()},_addTextLine:function(a,b){return this.textArr.push({text:a,width:b})},_getTextWidth:function(a){return v.measureText(a).width},_setTextData:function(){var a=this.getText().split("\n"),b=+this.getFontSize(),d=0,e=this.getLineHeight()*b,f=this.attrs.width,h=this.attrs.height,i=f!==c,j=h!==c,k=this.getPadding(),l=f-2*k,m=h-2*k,n=0,p=this.getWrap(),q=p!==s,t=p!==r&&q;this.textArr=[],v.save(),v.font=this._getContextFont();for(var u=0,w=a.length;w>u;++u){var x=a[u],y=this._getTextWidth(x);if(i&&y>l)for(;x.length>0;){for(var z=0,A=x.length,B="",C=0;A>z;){var D=z+A>>>1,E=x.slice(0,D+1),F=this._getTextWidth(E);l>=F?(z=D+1,B=E,C=F):A=D}if(!B)break;if(t){var G=Math.max(B.lastIndexOf(o),B.lastIndexOf(g))+1;G>0&&(z=G,B=B.slice(0,z),C=this._getTextWidth(B))}if(this._addTextLine(B,C),d=Math.max(d,C),n+=e,!q||j&&n+e>m)break;if(x=x.slice(z),x.length>0&&(y=this._getTextWidth(x),l>=y)){this._addTextLine(x,y),n+=e,d=Math.max(d,y);break}}else this._addTextLine(x,y),n+=e,d=Math.max(d,y);if(j&&n+e>m)break}v.restore(),this.textHeight=b,this.textWidth=d}},Konva.Util.extend(Konva.Text,Konva.Shape),Konva.Factory.addGetterSetter(Konva.Text,"fontFamily","Arial"),Konva.Factory.addGetterSetter(Konva.Text,"fontSize",12),Konva.Factory.addGetterSetter(Konva.Text,"fontStyle",m),Konva.Factory.addGetterSetter(Konva.Text,"fontVariant",m),Konva.Factory.addGetterSetter(Konva.Text,"padding",0),Konva.Factory.addGetterSetter(Konva.Text,"align",i),Konva.Factory.addGetterSetter(Konva.Text,"lineHeight",1),Konva.Factory.addGetterSetter(Konva.Text,"wrap",q),Konva.Factory.addGetter(Konva.Text,"text",h),Konva.Factory.addOverloadedGetterSetter(Konva.Text,"text"),Konva.Collection.mapMethods(Konva.Text)}(),function(){Konva.Line=function(a){this.___init(a)},Konva.Line.prototype={___init:function(a){Konva.Shape.call(this,a),this.className="Line",this.on("pointsChange.konva tensionChange.konva closedChange.konva",function(){this._clearCache("tensionPoints")}),this.sceneFunc(this._sceneFunc)},_sceneFunc:function(a){var b,c,d,e=this.getPoints(),f=e.length,g=this.getTension(),h=this.getClosed();if(f){if(a.beginPath(),a.moveTo(e[0],e[1]),0!==g&&f>4){for(b=this.getTensionPoints(),c=b.length,d=h?0:4,h||a.quadraticCurveTo(b[0],b[1],b[2],b[3]);c-2>d;)a.bezierCurveTo(b[d++],b[d++],b[d++],b[d++],b[d++],b[d++]);h||a.quadraticCurveTo(b[c-2],b[c-1],e[f-2],e[f-1])}else for(d=2;f>d;d+=2)a.lineTo(e[d],e[d+1]);h?(a.closePath(),a.fillStrokeShape(this)):a.strokeShape(this)}},getTensionPoints:function(){return this._getCache("tensionPoints",this._getTensionPoints)},_getTensionPoints:function(){return this.getClosed()?this._getTensionPointsClosed():Konva.Util._expandPoints(this.getPoints(),this.getTension())},_getTensionPointsClosed:function(){var a=this.getPoints(),b=a.length,c=this.getTension(),d=Konva.Util,e=d._getControlPoints(a[b-2],a[b-1],a[0],a[1],a[2],a[3],c),f=d._getControlPoints(a[b-4],a[b-3],a[b-2],a[b-1],a[0],a[1],c),g=Konva.Util._expandPoints(a,c),h=[e[2],e[3]].concat(g).concat([f[0],f[1],a[b-2],a[b-1],f[2],f[3],e[0],e[1],a[0],a[1]]);return h}},Konva.Util.extend(Konva.Line,Konva.Shape),Konva.Factory.addGetterSetter(Konva.Line,"closed",!1),Konva.Factory.addGetterSetter(Konva.Line,"tension",0),Konva.Factory.addGetterSetter(Konva.Line,"points",[]),Konva.Collection.mapMethods(Konva.Line)}(),function(){Konva.Sprite=function(a){this.___init(a)},Konva.Sprite.prototype={___init:function(a){Konva.Shape.call(this,a),this.className="Sprite",this._updated=!0;var b=this;this.anim=new Konva.Animation(function(){var a=b._updated;return b._updated=!1,a}),this.on("animationChange.konva",function(){this.frameIndex(0)}),this.on("frameIndexChange.konva",function(){this._updated=!0}),this.on("frameRateChange.konva",function(){this.anim.isRunning()&&(clearInterval(this.interval),this._setInterval())}),this.sceneFunc(this._sceneFunc),this.hitFunc(this._hitFunc)},_sceneFunc:function(a){var b=this.getAnimation(),c=this.frameIndex(),d=4*c,e=this.getAnimations()[b],f=this.frameOffsets(),g=e[d+0],h=e[d+1],i=e[d+2],j=e[d+3],k=this.getImage();if(k)if(f){var l=f[b],m=2*c;a.drawImage(k,g,h,i,j,l[m+0],l[m+1],i,j)}else a.drawImage(k,g,h,i,j,0,0,i,j)},_hitFunc:function(a){var b=this.getAnimation(),c=this.frameIndex(),d=4*c,e=this.getAnimations()[b],f=this.frameOffsets(),g=e[d+2],h=e[d+3];if(a.beginPath(),f){var i=f[b],j=2*c;a.rect(i[j+0],i[j+1],g,h)}else a.rect(0,0,g,h);a.closePath(),a.fillShape(this)},_useBufferCanvas:function(){return(this.hasShadow()||1!==this.getAbsoluteOpacity())&&this.hasStroke()},_setInterval:function(){var a=this;this.interval=setInterval(function(){a._updateIndex()},1e3/this.getFrameRate())},start:function(){var a=this.getLayer();this.anim.setLayers(a),this._setInterval(),this.anim.start()},stop:function(){this.anim.stop(),clearInterval(this.interval)},isRunning:function(){return this.anim.isRunning()},_updateIndex:function(){var a=this.frameIndex(),b=this.getAnimation(),c=this.getAnimations(),d=c[b],e=d.length/4;this.frameIndex(e-1>a?a+1:0)}},Konva.Util.extend(Konva.Sprite,Konva.Shape),Konva.Factory.addGetterSetter(Konva.Sprite,"animation"),Konva.Factory.addGetterSetter(Konva.Sprite,"animations"),Konva.Factory.addGetterSetter(Konva.Sprite,"frameOffsets"),Konva.Factory.addGetterSetter(Konva.Sprite,"image"),Konva.Factory.addGetterSetter(Konva.Sprite,"frameIndex",0),Konva.Factory.addGetterSetter(Konva.Sprite,"frameRate",17),Konva.Factory.backCompat(Konva.Sprite,{index:"frameIndex",getIndex:"getFrameIndex",setIndex:"setFrameIndex"}),Konva.Collection.mapMethods(Konva.Sprite)}(),function(){Konva.Path=function(a){this.___init(a)},Konva.Path.prototype={___init:function(a){this.dataArray=[];var b=this;Konva.Shape.call(this,a),this.className="Path",this.dataArray=Konva.Path.parsePathData(this.getData()),this.on("dataChange.konva",function(){b.dataArray=Konva.Path.parsePathData(this.getData())}),this.sceneFunc(this._sceneFunc)},_sceneFunc:function(a){var b=this.dataArray,c=!1;a.beginPath();for(var d=0;dj?i:j,p=i>j?1:i/j,q=i>j?j/i:1;a.translate(g,h),a.rotate(m),a.scale(p,q),a.arc(0,0,o,k,k+l,1-n),a.scale(1/p,1/q),a.rotate(-m),a.translate(-g,-h);break;case"z":a.closePath(),c=!0}}c?a.fillStrokeShape(this):a.strokeShape(this)}},Konva.Util.extend(Konva.Path,Konva.Shape),Konva.Path.getLineLength=function(a,b,c,d){return Math.sqrt((c-a)*(c-a)+(d-b)*(d-b))},Konva.Path.getPointOnLine=function(a,b,c,d,e,f,g){void 0===f&&(f=b),void 0===g&&(g=c);var h=(e-c)/(d-b+1e-8),i=Math.sqrt(a*a/(1+h*h));b>d&&(i*=-1);var j,k=h*i;if(d===b)j={x:f,y:g+k};else if((g-c)/(f-b+1e-8)===h)j={x:f+i,y:g+k};else{var l,m,n=this.getLineLength(b,c,d,e);if(1e-8>n)return void 0;var o=(f-b)*(d-b)+(g-c)*(e-c);o/=n*n,l=b+o*(d-b),m=c+o*(e-c);var p=this.getLineLength(f,g,l,m),q=Math.sqrt(a*a-p*p);i=Math.sqrt(q*q/(1+h*h)),b>d&&(i*=-1),k=h*i,j={x:l+i,y:m+k}}return j},Konva.Path.getPointOnCubicBezier=function(a,b,c,d,e,f,g,h,i){function j(a){return a*a*a}function k(a){return 3*a*a*(1-a)}function l(a){return 3*a*(1-a)*(1-a)}function m(a){return(1-a)*(1-a)*(1-a)}var n=h*j(a)+f*k(a)+d*l(a)+b*m(a),o=i*j(a)+g*k(a)+e*l(a)+c*m(a);return{x:n,y:o}},Konva.Path.getPointOnQuadraticBezier=function(a,b,c,d,e,f,g){function h(a){return a*a}function i(a){return 2*a*(1-a)}function j(a){return(1-a)*(1-a)}var k=f*h(a)+d*i(a)+b*j(a),l=g*h(a)+e*i(a)+c*j(a);return{x:k,y:l}},Konva.Path.getPointOnEllipticalArc=function(a,b,c,d,e,f){var g=Math.cos(f),h=Math.sin(f),i={x:c*Math.cos(e),y:d*Math.sin(e)};return{x:a+(i.x*g-i.y*h),y:b+(i.x*h+i.y*g)}},Konva.Path.parsePathData=function(a){if(!a)return[];var b=a,c=["m","M","l","L","v","V","h","H","z","Z","c","C","q","Q","t","T","s","S","a","A"];b=b.replace(new RegExp(" ","g"),",");for(var d=0;d0&&""===k[0]&&k.shift();for(var l=0;l0&&!isNaN(k[0]);){var m,n,o,p,q,r,s,t,u,v,w=null,x=[],y=g,z=h;switch(j){case"l":g+=k.shift(),h+=k.shift(),w="L",x.push(g,h);break;case"L":g=k.shift(),h=k.shift(),x.push(g,h);break;case"m":var A=k.shift(),B=k.shift();if(g+=A,h+=B,w="M",f.length>2&&"z"===f[f.length-1].command)for(var C=f.length-2;C>=0;C--)if("M"===f[C].command){g=f[C].points[0]+A,h=f[C].points[1]+B;break}x.push(g,h),j="l";break;case"M":g=k.shift(),h=k.shift(),w="M",x.push(g,h),j="L";break;case"h":g+=k.shift(),w="L",x.push(g,h);break;case"H":g=k.shift(),w="L",x.push(g,h);break;case"v":h+=k.shift(),w="L",x.push(g,h);break;case"V":h=k.shift(),w="L",x.push(g,h);break;case"C":x.push(k.shift(),k.shift(),k.shift(),k.shift()),g=k.shift(),h=k.shift(),x.push(g,h);break;case"c":x.push(g+k.shift(),h+k.shift(),g+k.shift(),h+k.shift()),g+=k.shift(),h+=k.shift(),w="C",x.push(g,h);break;case"S":n=g,o=h,m=f[f.length-1],"C"===m.command&&(n=g+(g-m.points[2]),o=h+(h-m.points[3])),x.push(n,o,k.shift(),k.shift()),g=k.shift(),h=k.shift(),w="C",x.push(g,h);break;case"s":n=g,o=h,m=f[f.length-1],"C"===m.command&&(n=g+(g-m.points[2]),o=h+(h-m.points[3])),x.push(n,o,g+k.shift(),h+k.shift()),g+=k.shift(),h+=k.shift(),w="C",x.push(g,h);break;case"Q":x.push(k.shift(),k.shift()),g=k.shift(),h=k.shift(),x.push(g,h);break;case"q":x.push(g+k.shift(),h+k.shift()),g+=k.shift(),h+=k.shift(),w="Q",x.push(g,h);break;case"T":n=g,o=h,m=f[f.length-1],"Q"===m.command&&(n=g+(g-m.points[0]),o=h+(h-m.points[1])),g=k.shift(),h=k.shift(),w="Q",x.push(n,o,g,h);break;case"t":n=g,o=h,m=f[f.length-1],"Q"===m.command&&(n=g+(g-m.points[0]),o=h+(h-m.points[1])),g+=k.shift(),h+=k.shift(),w="Q",x.push(n,o,g,h);break;case"A":p=k.shift(),q=k.shift(),r=k.shift(),s=k.shift(),t=k.shift(),u=g,v=h,g=k.shift(),h=k.shift(),w="A",x=this.convertEndpointToCenterParameterization(u,v,g,h,s,t,p,q,r);break;case"a":p=k.shift(),q=k.shift(),r=k.shift(),s=k.shift(),t=k.shift(),u=g,v=h,g+=k.shift(),h+=k.shift(),w="A",x=this.convertEndpointToCenterParameterization(u,v,g,h,s,t,p,q,r)}f.push({command:w||j,points:x,start:{x:y,y:z},pathLength:this.calcLength(y,z,w||j,x)})}("z"===j||"Z"===j)&&f.push({command:"z",points:[],start:void 0,pathLength:0})}return f},Konva.Path.calcLength=function(a,b,c,d){var e,f,g,h,i=Konva.Path;switch(c){case"L":return i.getLineLength(a,b,d[0],d[1]);case"C":for(e=0,f=i.getPointOnCubicBezier(0,a,b,d[0],d[1],d[2],d[3],d[4],d[5]),h=.01;1>=h;h+=.01)g=i.getPointOnCubicBezier(h,a,b,d[0],d[1],d[2],d[3],d[4],d[5]),e+=i.getLineLength(f.x,f.y,g.x,g.y),f=g;return e;case"Q":for(e=0,f=i.getPointOnQuadraticBezier(0,a,b,d[0],d[1],d[2],d[3]),h=.01;1>=h;h+=.01)g=i.getPointOnQuadraticBezier(h,a,b,d[0],d[1],d[2],d[3]),e+=i.getLineLength(f.x,f.y,g.x,g.y),f=g;return e;case"A":e=0;var j=d[4],k=d[5],l=d[4]+k,m=Math.PI/180;if(Math.abs(j-l)k)for(h=j-m;h>l;h-=m)g=i.getPointOnEllipticalArc(d[0],d[1],d[2],d[3],h,0),e+=i.getLineLength(f.x,f.y,g.x,g.y),f=g;else for(h=j+m;l>h;h+=m)g=i.getPointOnEllipticalArc(d[0],d[1],d[2],d[3],h,0),e+=i.getLineLength(f.x,f.y,g.x,g.y),f=g;return g=i.getPointOnEllipticalArc(d[0],d[1],d[2],d[3],l,0),e+=i.getLineLength(f.x,f.y,g.x,g.y)}return 0},Konva.Path.convertEndpointToCenterParameterization=function(a,b,c,d,e,f,g,h,i){var j=i*(Math.PI/180),k=Math.cos(j)*(a-c)/2+Math.sin(j)*(b-d)/2,l=-1*Math.sin(j)*(a-c)/2+Math.cos(j)*(b-d)/2,m=k*k/(g*g)+l*l/(h*h);m>1&&(g*=Math.sqrt(m),h*=Math.sqrt(m));var n=Math.sqrt((g*g*h*h-g*g*l*l-h*h*k*k)/(g*g*l*l+h*h*k*k));e===f&&(n*=-1),isNaN(n)&&(n=0);var o=n*g*l/h,p=n*-h*k/g,q=(a+c)/2+Math.cos(j)*o-Math.sin(j)*p,r=(b+d)/2+Math.sin(j)*o+Math.cos(j)*p,s=function(a){return Math.sqrt(a[0]*a[0]+a[1]*a[1])},t=function(a,b){return(a[0]*b[0]+a[1]*b[1])/(s(a)*s(b))},u=function(a,b){return(a[0]*b[1]=1&&(y=0),0===f&&y>0&&(y-=2*Math.PI),1===f&&0>y&&(y+=2*Math.PI),[q,r,g,h,v,y,j,f]},Konva.Factory.addGetterSetter(Konva.Path,"data"),Konva.Collection.mapMethods(Konva.Path)}(),function(){function a(a){a.fillText(this.partialText,0,0)}function b(a){a.strokeText(this.partialText,0,0)}var c="",d="normal";Konva.TextPath=function(a){this.___init(a)},Konva.TextPath.prototype={___init:function(c){var d=this;this.dummyCanvas=Konva.Util.createCanvasElement(),this.dataArray=[],Konva.Shape.call(this,c),this._fillFunc=a,this._strokeFunc=b,this._fillFuncHit=a,this._strokeFuncHit=b,this.className="TextPath",this.dataArray=Konva.Path.parsePathData(this.attrs.data),this.on("dataChange.konva",function(){d.dataArray=Konva.Path.parsePathData(this.attrs.data)}),this.on("textChange.konva textStroke.konva textStrokeWidth.konva",d._setTextData),d._setTextData(),this.sceneFunc(this._sceneFunc)},_sceneFunc:function(a){a.setAttr("font",this._getContextFont()),a.setAttr("textBaseline","middle"),a.setAttr("textAlign","left"),a.save();for(var b=this.glyphInfo,c=0;c0)return g=d,b[d];"M"==b[d].command&&(c={x:b[d].points[0],y:b[d].points[1]})}return{}},j=function(b){var f=a._getTextSize(b).width,g=0,j=0;for(d=void 0;Math.abs(f-g)/f>.01&&25>j;){j++;for(var k=g;void 0===e;)e=i(),e&&k+e.pathLengthf?d=Konva.Path.getPointOnLine(f,c.x,c.y,e.points[0],e.points[1],c.x,c.y):e=void 0;break;case"A":var m=e.points[4],n=e.points[5],o=e.points[4]+n;0===h?h=m+1e-8:f>g?h+=Math.PI/180*n/Math.abs(n):h-=Math.PI/360*n/Math.abs(n),(0>n&&o>h||n>=0&&h>o)&&(h=o,l=!0),d=Konva.Path.getPointOnEllipticalArc(e.points[0],e.points[1],e.points[2],e.points[3],h,e.points[6]);break;case"C":0===h?h=f>e.pathLength?1e-8:f/e.pathLength:f>g?h+=(f-g)/e.pathLength:h-=(g-f)/e.pathLength,h>1&&(h=1,l=!0),d=Konva.Path.getPointOnCubicBezier(h,e.start.x,e.start.y,e.points[0],e.points[1],e.points[2],e.points[3],e.points[4],e.points[5]);break;case"Q":0===h?h=f/e.pathLength:f>g?h+=(f-g)/e.pathLength:h-=(g-f)/e.pathLength,h>1&&(h=1,l=!0),d=Konva.Path.getPointOnQuadraticBezier(h,e.start.x,e.start.y,e.points[0],e.points[1],e.points[2],e.points[3])}void 0!==d&&(g=Konva.Path.getLineLength(c.x,c.y,d.x,d.y)),l&&(l=!1,e=void 0)}},k=0;kb;b++)c=f*Math.sin(2*b*Math.PI/e),d=-1*f*Math.cos(2*b*Math.PI/e),a.lineTo(c,d);a.closePath(),a.fillStrokeShape(this)}},Konva.Util.extend(Konva.RegularPolygon,Konva.Shape),Konva.Factory.addGetterSetter(Konva.RegularPolygon,"radius",0),Konva.Factory.addGetterSetter(Konva.RegularPolygon,"sides",0),Konva.Collection.mapMethods(Konva.RegularPolygon)}(),function(){Konva.Star=function(a){this.___init(a)},Konva.Star.prototype={___init:function(a){Konva.Shape.call(this,a),this.className="Star",this.sceneFunc(this._sceneFunc)},_sceneFunc:function(a){var b=this.innerRadius(),c=this.outerRadius(),d=this.numPoints();a.beginPath(),a.moveTo(0,0-c);for(var e=1;2*d>e;e++){var f=e%2===0?c:b,g=f*Math.sin(e*Math.PI/d),h=-1*f*Math.cos(e*Math.PI/d);a.lineTo(g,h)}a.closePath(),a.fillStrokeShape(this)}},Konva.Util.extend(Konva.Star,Konva.Shape),Konva.Factory.addGetterSetter(Konva.Star,"numPoints",5),Konva.Factory.addGetterSetter(Konva.Star,"innerRadius",0),Konva.Factory.addGetterSetter(Konva.Star,"outerRadius",0),Konva.Collection.mapMethods(Konva.Star)}(),function(){var a=["fontFamily","fontSize","fontStyle","padding","lineHeight","text"],b="Change.konva",c="none",d="up",e="right",f="down",g="left",h="Label",i=a.length;Konva.Label=function(a){this.____init(a)},Konva.Label.prototype={____init:function(a){var b=this;Konva.Group.call(this,a),this.className=h,this.on("add.konva",function(a){b._addListeners(a.child),b._sync()})},getText:function(){return this.find("Text")[0]},getTag:function(){return this.find("Tag")[0]},_addListeners:function(c){var d,e=this,f=function(){e._sync()};for(d=0;i>d;d++)c.on(a[d]+b,f)},getWidth:function(){return this.getText().getWidth()},getHeight:function(){return this.getText().getHeight()},_sync:function(){var a,b,c,h,i,j,k,l=this.getText(),m=this.getTag();if(l&&m){switch(a=l.getWidth(),b=l.getHeight(),c=m.getPointerDirection(),h=m.getPointerWidth(),k=m.getPointerHeight(),i=0,j=0,c){case d:i=a/2,j=-1*k;break;case e:i=a+h,j=b/2;break;case f:i=a/2,j=b+k;break;case g:i=-1*h,j=b/2}m.setAttrs({x:-1*i,y:-1*j,width:a,height:b}),l.setAttrs({x:-1*i,y:-1*j})}}},Konva.Util.extend(Konva.Label,Konva.Group),Konva.Collection.mapMethods(Konva.Label),Konva.Tag=function(a){this.___init(a)},Konva.Tag.prototype={___init:function(a){Konva.Shape.call(this,a),this.className="Tag",this.sceneFunc(this._sceneFunc)},_sceneFunc:function(a){var b=this.getWidth(),c=this.getHeight(),h=this.getPointerDirection(),i=this.getPointerWidth(),j=this.getPointerHeight(),k=this.getCornerRadius();a.beginPath(),a.moveTo(0,0),h===d&&(a.lineTo((b-i)/2,0),a.lineTo(b/2,-1*j),a.lineTo((b+i)/2,0)),k?(a.lineTo(b-k,0),a.arc(b-k,k,k,3*Math.PI/2,0,!1)):a.lineTo(b,0),h===e&&(a.lineTo(b,(c-j)/2),a.lineTo(b+i,c/2),a.lineTo(b,(c+j)/2)),k?(a.lineTo(b,c-k),a.arc(b-k,c-k,k,0,Math.PI/2,!1)):a.lineTo(b,c),h===f&&(a.lineTo((b+i)/2,c),a.lineTo(b/2,c+j),a.lineTo((b-i)/2,c)),k?(a.lineTo(k,c),a.arc(k,c-k,k,Math.PI/2,Math.PI,!1)):a.lineTo(0,c),h===g&&(a.lineTo(0,(c+j)/2),a.lineTo(-1*i,c/2),a.lineTo(0,(c-j)/2)),k&&(a.lineTo(0,k),a.arc(k,k,k,Math.PI,3*Math.PI/2,!1)),a.closePath(),a.fillStrokeShape(this)}},Konva.Util.extend(Konva.Tag,Konva.Shape),Konva.Factory.addGetterSetter(Konva.Tag,"pointerDirection",c),Konva.Factory.addGetterSetter(Konva.Tag,"pointerWidth",0),Konva.Factory.addGetterSetter(Konva.Tag,"pointerHeight",0),Konva.Factory.addGetterSetter(Konva.Tag,"cornerRadius",0),Konva.Collection.mapMethods(Konva.Tag)}(),function(){Konva.Arrow=function(a){this.____init(a)},Konva.Arrow.prototype={____init:function(a){Konva.Line.call(this,a),this.className="Arrow"},_sceneFunc:function(a){var b=2*Math.PI,c=this.points(),d=c.length,e=c[d-2]-c[d-4],f=c[d-1]-c[d-3],g=(Math.atan2(f,e)+b)%b,h=this.pointerLength(),i=this.pointerWidth();a.save(),a.beginPath(),a.translate(c[d-2],c[d-1]),a.rotate(g),a.moveTo(0,0),a.lineTo(-h,i/2),a.lineTo(-h,-i/2),a.closePath(),a.restore(),this.pointerAtBeginning()&&(a.save(),a.translate(c[0],c[1]),e=c[2]-c[0],f=c[3]-c[1],a.rotate((Math.atan2(-f,-e)+b)%b),a.moveTo(0,0),a.lineTo(-10,6),a.lineTo(-10,-6),a.closePath(),a.restore()),a.fillStrokeShape(this),Konva.Line.prototype._sceneFunc.apply(this,arguments)}},Konva.Util.extend(Konva.Arrow,Konva.Line),Konva.Factory.addGetterSetter(Konva.Arrow,"pointerLength",10),Konva.Factory.addGetterSetter(Konva.Arrow,"pointerWidth",10),Konva.Factory.addGetterSetter(Konva.Arrow,"pointerAtBeginning",!1),Konva.Collection.mapMethods(Konva.Arrow)}(); \ No newline at end of file diff --git a/package.json b/package.json index b4d08e06..9a97e06d 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "kinetic", + "name": "konva", "version": "5.2.0", "author": "Eric Rowell", "contributors" : [ @@ -40,14 +40,14 @@ "jsdom": false }, "bugs": { - "url": "https://github.com/lavrton/KineticJS/issues" + "url": "https://github.com/lavrton/KonvaJS/issues" }, - "homepage" : "http://lavrton.github.io/KineticJS/", + "homepage" : "http://lavrton.github.io/KonvaJS/", "readmeFilename": "README.md", - "main": "kinetic.js", + "main": "konva.js", "repository": { "type": "git", - "url": "git://github.com/lavrton/KineticJS.git" + "url": "git://github.com/lavrton/KonvaJS.git" }, "license": "MIT" } diff --git a/resources/bower-template.json b/resources/bower-template.json index 5b68de4e..671f3520 100644 --- a/resources/bower-template.json +++ b/resources/bower-template.json @@ -1,11 +1,11 @@ { - "name": "KineticJS", + "name": "KonvaJS", "version": "@@version", "authors": [ "Eric Rowell", "Anton Lavrenov" ], - "homepage": "http://lavrton.github.io/KineticJS/", - "description": "KineticJS is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more.", + "homepage": "http://lavrton.github.io/KonvaJS/", + "description": "KonvaJS is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more.", "keywords": [ "canvas", "animations", @@ -25,5 +25,5 @@ ".gitignore", "Gruntfile.js" ], - "main": "kinetic.min.js" + "main": "konva.min.js" } diff --git a/resources/jsdoc.conf.json b/resources/jsdoc.conf.json index f4f05dff..d6eb504f 100644 --- a/resources/jsdoc.conf.json +++ b/resources/jsdoc.conf.json @@ -10,9 +10,9 @@ "dateFormat" : "ddd MMM Do YYYY", "outputSourceFiles" : true, "outputSourcePath" : true, - "systemName" : "KineticJS", + "systemName" : "KonvaJS", "footer" : "", - "copyright" : "KineticJS Copyright © 2015 The contributors to the KineticJS project.", + "copyright" : "KonvaJS Copyright © 2015 The contributors to the KonvaJS project.", "navType" : "vertical", "theme" : "cosmo", "linenums" : true, @@ -21,7 +21,7 @@ "highlightTutorialCode" : true, "analytics" : { "ua" : "UA-54202824-2", - "domain" : "http://lavrton.github.io/KineticJS" + "domain" : "http://lavrton.github.io/KonvaJS" } }, "markdown" : { diff --git a/resources/nodejs-demo.js b/resources/nodejs-demo.js index e7df8044..9152fb7d 100644 --- a/resources/nodejs-demo.js +++ b/resources/nodejs-demo.js @@ -1,23 +1,23 @@ var fs = require('fs'), - Kinetic = require('./dist/kinetic-dev'); + Konva = require('./dist/konva-dev'); // Create stage. Container parameter is not required in NodeJS. -var stage = new Kinetic.Stage({ +var stage = new Konva.Stage({ width : 100, height : 100 }); -var layer = new Kinetic.Layer(); +var layer = new Konva.Layer(); stage.add(layer); -var rect = new Kinetic.Rect({ +var rect = new Konva.Rect({ width : 100, height : 100, x : 50, y : 50, fill : 'green' }); -var text = new Kinetic.Text({ +var text = new Konva.Text({ text : 'Generated inside node js', x : 20, y : 20, @@ -31,7 +31,7 @@ stage.setSize({ }); // check tween works -var tween = new Kinetic.Tween({ +var tween = new Konva.Tween({ node : rect, duration : 1, x : -50 @@ -43,9 +43,9 @@ setTimeout(function(){ stage.toDataURL({ callback: function(data){ // Then add result to stage - var img = new Kinetic.window.Image(); + var img = new Konva.window.Image(); img.onload = function() { - var image = new Kinetic.Image({ + var image = new Konva.Image({ image : img, x : 10, y : 50 diff --git a/src/Animation.js b/src/Animation.js index e2111bed..02a964b0 100644 --- a/src/Animation.js +++ b/src/Animation.js @@ -2,9 +2,9 @@ var BATCH_DRAW_STOP_TIME_DIFF = 500; var now =(function() { - if (Kinetic.root.performance && Kinetic.root.performance.now) { + if (Konva.root.performance && Konva.root.performance.now) { return function() { - return Kinetic.root.performance.now(); + return Konva.root.performance.now(); }; } else { @@ -15,11 +15,11 @@ })(); var RAF = (function() { - return Kinetic.root.requestAnimationFrame - || Kinetic.root.webkitRequestAnimationFrame - || Kinetic.root.mozRequestAnimationFrame - || Kinetic.root.oRequestAnimationFrame - || Kinetic.root.msRequestAnimationFrame + return Konva.root.requestAnimationFrame + || Konva.root.webkitRequestAnimationFrame + || Konva.root.mozRequestAnimationFrame + || Konva.root.oRequestAnimationFrame + || Konva.root.msRequestAnimationFrame || FRAF; })(); @@ -28,34 +28,34 @@ } function requestAnimFrame() { - return RAF.apply(Kinetic.root, arguments); + return RAF.apply(Konva.root, arguments); } /** * Animation constructor. A stage is used to contain multiple layers and handle * @constructor - * @memberof Kinetic + * @memberof Konva * @param {Function} func function executed on each animation frame. The function is passed a frame object, which contains * timeDiff, lastTime, time, and frameRate properties. The timeDiff property is the number of milliseconds that have passed * since the last animation frame. The lastTime property is time in milliseconds that elapsed from the moment the animation started * to the last animation frame. The time property is the time in milliseconds that ellapsed from the moment the animation started * to the current animation frame. The frameRate property is the current frame rate in frames / second. Return false from function, * if you don't need to redraw layer/layers on some frames. - * @param {Kinetic.Layer|Array} [layers] layer(s) to be redrawn on each animation frame. Can be a layer, an array of layers, or null. + * @param {Konva.Layer|Array} [layers] layer(s) to be redrawn on each animation frame. Can be a layer, an array of layers, or null. * Not specifying a node will result in no redraw. * @example * // move a node to the right at 50 pixels / second * var velocity = 50; * - * var anim = new Kinetic.Animation(function(frame) { + * var anim = new Konva.Animation(function(frame) { * var dist = velocity * (frame.timeDiff / 1000); * node.move(dist, 0); * }, layer); * * anim.start(); */ - Kinetic.Animation = function(func, layers) { - var Anim = Kinetic.Animation; + Konva.Animation = function(func, layers) { + var Anim = Konva.Animation; this.func = func; this.setLayers(layers); this.id = Anim.animIdCounter++; @@ -68,12 +68,12 @@ /* * Animation methods */ - Kinetic.Animation.prototype = { + Konva.Animation.prototype = { /** * set layers to be redrawn on each animation frame * @method - * @memberof Kinetic.Animation.prototype - * @param {Kinetic.Layer|Array} [layers] layer(s) to be redrawn.  Can be a layer, an array of layers, or null. Not specifying a node will result in no redraw. + * @memberof Konva.Animation.prototype + * @param {Konva.Layer|Array} [layers] layer(s) to be redrawn.  Can be a layer, an array of layers, or null. Not specifying a node will result in no redraw. */ setLayers: function(layers) { var lays = []; @@ -82,7 +82,7 @@ lays = []; } // if passing in an array of Layers - // NOTE: layers could be an array or Kinetic.Collection. for simplicity, I'm just inspecting + // NOTE: layers could be an array or Konva.Collection. for simplicity, I'm just inspecting // the length property to check for both cases else if (layers.length > 0) { lays = layers; @@ -97,7 +97,7 @@ /** * get layers * @method - * @memberof Kinetic.Animation.prototype + * @memberof Konva.Animation.prototype */ getLayers: function() { return this.layers; @@ -105,8 +105,8 @@ /** * add layer. Returns true if the layer was added, and false if it was not * @method - * @memberof Kinetic.Animation.prototype - * @param {Kinetic.Layer} layer + * @memberof Konva.Animation.prototype + * @param {Konva.Layer} layer */ addLayer: function(layer) { var layers = this.layers, @@ -132,10 +132,10 @@ /** * determine if animation is running or not. returns true or false * @method - * @memberof Kinetic.Animation.prototype + * @memberof Konva.Animation.prototype */ isRunning: function() { - var a = Kinetic.Animation, + var a = Konva.Animation, animations = a.animations, len = animations.length, n; @@ -150,10 +150,10 @@ /** * start animation * @method - * @memberof Kinetic.Animation.prototype + * @memberof Konva.Animation.prototype */ start: function() { - var Anim = Kinetic.Animation; + var Anim = Konva.Animation; this.stop(); this.frame.timeDiff = 0; this.frame.lastTime = now(); @@ -162,10 +162,10 @@ /** * stop animation * @method - * @memberof Kinetic.Animation.prototype + * @memberof Konva.Animation.prototype */ stop: function() { - Kinetic.Animation._removeAnimation(this); + Konva.Animation._removeAnimation(this); }, _updateFrameObject: function(time) { this.frame.timeDiff = time - this.frame.lastTime; @@ -174,15 +174,15 @@ this.frame.frameRate = 1000 / this.frame.timeDiff; } }; - Kinetic.Animation.animations = []; - Kinetic.Animation.animIdCounter = 0; - Kinetic.Animation.animRunning = false; + Konva.Animation.animations = []; + Konva.Animation.animIdCounter = 0; + Konva.Animation.animRunning = false; - Kinetic.Animation._addAnimation = function(anim) { + Konva.Animation._addAnimation = function(anim) { this.animations.push(anim); this._handleAnimation(); }; - Kinetic.Animation._removeAnimation = function(anim) { + Konva.Animation._removeAnimation = function(anim) { var id = anim.id, animations = this.animations, len = animations.length, @@ -196,7 +196,7 @@ } }; - Kinetic.Animation._runFrames = function() { + Konva.Animation._runFrames = function() { var layerHash = {}, animations = this.animations, anim, layers, func, n, i, layersLen, layer, key, needRedraw; @@ -243,8 +243,8 @@ layerHash[key].draw(); } }; - Kinetic.Animation._animationLoop = function() { - var Anim = Kinetic.Animation; + Konva.Animation._animationLoop = function() { + var Anim = Konva.Animation; if(Anim.animations.length) { requestAnimFrame(Anim._animationLoop); @@ -254,7 +254,7 @@ Anim.animRunning = false; } }; - Kinetic.Animation._handleAnimation = function() { + Konva.Animation._handleAnimation = function() { var that = this; if(!this.animRunning) { this.animRunning = true; @@ -262,19 +262,19 @@ } }; - var moveTo = Kinetic.Node.prototype.moveTo; - Kinetic.Node.prototype.moveTo = function(container) { + var moveTo = Konva.Node.prototype.moveTo; + Konva.Node.prototype.moveTo = function(container) { moveTo.call(this, container); }; /** * batch draw * @method - * @memberof Kinetic.Base.prototype + * @memberof Konva.Base.prototype */ - Kinetic.BaseLayer.prototype.batchDraw = function() { + Konva.BaseLayer.prototype.batchDraw = function() { var that = this, - Anim = Kinetic.Animation; + Anim = Konva.Animation; if (!this.batchAnim) { this.batchAnim = new Anim(function() { @@ -295,9 +295,9 @@ /** * batch draw * @method - * @memberof Kinetic.Stage.prototype + * @memberof Konva.Stage.prototype */ - Kinetic.Stage.prototype.batchDraw = function() { + Konva.Stage.prototype.batchDraw = function() { this.getChildren().each(function(layer) { layer.batchDraw(); }); diff --git a/src/BaseLayer.js b/src/BaseLayer.js index 07617c9b..21297ef4 100644 --- a/src/BaseLayer.js +++ b/src/BaseLayer.js @@ -1,8 +1,8 @@ (function() { - Kinetic.Util.addMethods(Kinetic.BaseLayer, { + Konva.Util.addMethods(Konva.BaseLayer, { ___init: function(config) { this.nodeType = 'Layer'; - Kinetic.Container.call(this, config); + Konva.Container.call(this, config); }, createPNGStream : function() { return this.canvas._canvas.createPNGStream(); @@ -10,7 +10,7 @@ /** * get layer canvas * @method - * @memberof Kinetic.BaseLayer.prototype + * @memberof Konva.BaseLayer.prototype */ getCanvas: function() { return this.canvas; @@ -18,7 +18,7 @@ /** * get layer hit canvas * @method - * @memberof Kinetic.BaseLayer.prototype + * @memberof Konva.BaseLayer.prototype */ getHitCanvas: function() { return this.hitCanvas; @@ -26,7 +26,7 @@ /** * get layer canvas context * @method - * @memberof Kinetic.BaseLayer.prototype + * @memberof Konva.BaseLayer.prototype */ getContext: function() { return this.getCanvas().getContext(); @@ -34,7 +34,7 @@ /** * clear scene and hit canvas contexts tied to the layer * @method - * @memberof Kinetic.BaseLayer.prototype + * @memberof Konva.BaseLayer.prototype * @param {Object} [bounds] * @param {Number} [bounds.x] * @param {Number} [bounds.y] @@ -59,7 +59,7 @@ }, // extend Node.prototype.setZIndex setZIndex: function(index) { - Kinetic.Node.prototype.setZIndex.call(this, index); + Konva.Node.prototype.setZIndex.call(this, index); var stage = this.getStage(); if(stage) { stage.content.removeChild(this.getCanvas()._canvas); @@ -75,7 +75,7 @@ }, // extend Node.prototype.moveToTop moveToTop: function() { - Kinetic.Node.prototype.moveToTop.call(this); + Konva.Node.prototype.moveToTop.call(this); var stage = this.getStage(); if(stage) { stage.content.removeChild(this.getCanvas()._canvas); @@ -84,7 +84,7 @@ }, // extend Node.prototype.moveUp moveUp: function() { - if(Kinetic.Node.prototype.moveUp.call(this)) { + if(Konva.Node.prototype.moveUp.call(this)) { var stage = this.getStage(); if(stage) { stage.content.removeChild(this.getCanvas()._canvas); @@ -100,7 +100,7 @@ }, // extend Node.prototype.moveDown moveDown: function() { - if(Kinetic.Node.prototype.moveDown.call(this)) { + if(Konva.Node.prototype.moveDown.call(this)) { var stage = this.getStage(); if(stage) { var children = stage.getChildren(); @@ -111,7 +111,7 @@ }, // extend Node.prototype.moveToBottom moveToBottom: function() { - if(Kinetic.Node.prototype.moveToBottom.call(this)) { + if(Konva.Node.prototype.moveToBottom.call(this)) { var stage = this.getStage(); if(stage) { var children = stage.getChildren(); @@ -126,9 +126,9 @@ remove: function() { var _canvas = this.getCanvas()._canvas; - Kinetic.Node.prototype.remove.call(this); + Konva.Node.prototype.remove.call(this); - if(_canvas && _canvas.parentNode && Kinetic.Util._isInDocument(_canvas)) { + if(_canvas && _canvas.parentNode && Konva.Util._isInDocument(_canvas)) { _canvas.parentNode.removeChild(_canvas); } return this; @@ -144,7 +144,7 @@ * if you want change width use `stage.width(value);` * @name width * @method - * @memberof Kinetic.BaseLayer.prototype + * @memberof Konva.BaseLayer.prototype * @returns {Number} * @example * var width = layer.width(); @@ -155,14 +155,14 @@ } }, setWidth : function() { - Kinetic.Util.warn('Can not change width of layer. Use "stage.width(value)" function instead.'); + Konva.Util.warn('Can not change width of layer. Use "stage.width(value)" function instead.'); }, /** * get/set height of layer.getter return height of stage. setter doing nothing. * if you want change height use `stage.height(value);` * @name height * @method - * @memberof Kinetic.BaseLayer.prototype + * @memberof Konva.BaseLayer.prototype * @returns {Number} * @example * var height = layer.height(); @@ -173,19 +173,19 @@ } }, setHeight : function() { - Kinetic.Util.warn('Can not change height of layer. Use "stage.height(value)" function instead.'); + Konva.Util.warn('Can not change height of layer. Use "stage.height(value)" function instead.'); } }); - Kinetic.Util.extend(Kinetic.BaseLayer, Kinetic.Container); + Konva.Util.extend(Konva.BaseLayer, Konva.Container); // add getters and setters - Kinetic.Factory.addGetterSetter(Kinetic.BaseLayer, 'clearBeforeDraw', true); + Konva.Factory.addGetterSetter(Konva.BaseLayer, 'clearBeforeDraw', true); /** * get/set clearBeforeDraw flag which determines if the layer is cleared or not * before drawing * @name clearBeforeDraw * @method - * @memberof Kinetic.BaseLayer.prototype + * @memberof Konva.BaseLayer.prototype * @param {Boolean} clearBeforeDraw * @returns {Boolean} * @example @@ -199,5 +199,5 @@ * layer.clearBeforeDraw(true); */ - Kinetic.Collection.mapMethods(Kinetic.BaseLayer); + Konva.Collection.mapMethods(Konva.BaseLayer); })(); diff --git a/src/Canvas.js b/src/Canvas.js index a43f41be..b600f949 100644 --- a/src/Canvas.js +++ b/src/Canvas.js @@ -1,13 +1,13 @@ (function() { // calculate pixel ratio - var canvas = Kinetic.Util.createCanvasElement(), + var canvas = Konva.Util.createCanvasElement(), context = canvas.getContext('2d'), // if using a mobile device, calculate the pixel ratio. Otherwise, just use // 1. For desktop browsers, if the user has zoom enabled, it affects the pixel ratio // and causes artifacts on the canvas. As of 02/26/2014, there doesn't seem to be a way // to reliably calculate the browser zoom for modern browsers, which is why we just set // the pixel ratio to 1 for desktops - _pixelRatio = Kinetic.UA.mobile ? (function() { + _pixelRatio = Konva.UA.mobile ? (function() { var devicePixelRatio = window.devicePixelRatio || 1, backingStoreRatio = context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio @@ -22,11 +22,11 @@ * Canvas Renderer constructor * @constructor * @abstract - * @memberof Kinetic + * @memberof Konva * @param {Object} config * @param {Number} config.width * @param {Number} config.height - * @param {Number} config.pixelRatio KineticJS automatically handles pixel ratio adjustments in order to render crisp drawings + * @param {Number} config.pixelRatio KonvaJS automatically handles pixel ratio adjustments in order to render crisp drawings * on all devices. Most desktops, low end tablets, and low end phones, have device pixel ratios * of 1. Some high end tablets and phones, like iPhones and iPads (not the mini) have a device pixel ratio * of 2. Some Macbook Pros, and iMacs also have a device pixel ratio of 2. Some high end Android devices have pixel @@ -34,18 +34,18 @@ * specified, the pixel ratio will be defaulted to the actual device pixel ratio. You can override the device pixel * ratio for special situations, or, if you don't want the pixel ratio to be taken into account, you can set it to 1. */ - Kinetic.Canvas = function(config) { + Konva.Canvas = function(config) { this.init(config); }; - Kinetic.Canvas.prototype = { + Konva.Canvas.prototype = { init: function(config) { var conf = config || {}; - var pixelRatio = conf.pixelRatio || Kinetic.pixelRatio || _pixelRatio; + var pixelRatio = conf.pixelRatio || Konva.pixelRatio || _pixelRatio; this.pixelRatio = pixelRatio; - this._canvas = Kinetic.Util.createCanvasElement(); + this._canvas = Konva.Util.createCanvasElement(); // set inline styles this._canvas.style.padding = 0; @@ -59,7 +59,7 @@ /** * get canvas context * @method - * @memberof Kinetic.Canvas.prototype + * @memberof Konva.Canvas.prototype * @returns {CanvasContext} context */ getContext: function() { @@ -68,7 +68,7 @@ /** * get pixel ratio * @method - * @memberof Kinetic.Canvas.prototype + * @memberof Konva.Canvas.prototype * @returns {Number} pixel ratio */ getPixelRatio: function() { @@ -77,8 +77,8 @@ /** * get pixel ratio * @method - * @memberof Kinetic.Canvas.prototype - * @param {Number} pixelRatio KineticJS automatically handles pixel ratio adustments in order to render crisp drawings + * @memberof Konva.Canvas.prototype + * @param {Number} pixelRatio KonvaJS automatically handles pixel ratio adustments in order to render crisp drawings * on all devices. Most desktops, low end tablets, and low end phones, have device pixel ratios * of 1. Some high end tablets and phones, like iPhones and iPads (not the mini) have a device pixel ratio * of 2. Some Macbook Pros, and iMacs also have a device pixel ratio of 2. Some high end Android devices have pixel @@ -93,7 +93,7 @@ /** * set width * @method - * @memberof Kinetic.Canvas.prototype + * @memberof Konva.Canvas.prototype * @param {Number} width */ setWidth: function(width) { @@ -104,7 +104,7 @@ /** * set height * @method - * @memberof Kinetic.Canvas.prototype + * @memberof Konva.Canvas.prototype * @param {Number} height */ setHeight: function(height) { @@ -115,7 +115,7 @@ /** * get width * @method - * @memberof Kinetic.Canvas.prototype + * @memberof Konva.Canvas.prototype * @returns {Number} width */ getWidth: function() { @@ -124,7 +124,7 @@ /** * get height * @method - * @memberof Kinetic.Canvas.prototype + * @memberof Konva.Canvas.prototype * @returns {Number} height */ getHeight: function() { @@ -133,7 +133,7 @@ /** * set size * @method - * @memberof Kinetic.Canvas.prototype + * @memberof Konva.Canvas.prototype * @param {Number} width * @param {Number} height */ @@ -144,7 +144,7 @@ /** * to data url * @method - * @memberof Kinetic.Canvas.prototype + * @memberof Konva.Canvas.prototype * @param {String} mimeType * @param {Number} quality between 0 and 1 for jpg mime types * @returns {String} data url string @@ -160,51 +160,51 @@ return this._canvas.toDataURL(); } catch(err) { - Kinetic.Util.warn('Unable to get data URL. ' + err.message); + Konva.Util.warn('Unable to get data URL. ' + err.message); return ''; } } } }; - Kinetic.SceneCanvas = function(config) { + Konva.SceneCanvas = function(config) { var conf = config || {}; var width = conf.width || 0, height = conf.height || 0; - Kinetic.Canvas.call(this, conf); - this.context = new Kinetic.SceneContext(this); + Konva.Canvas.call(this, conf); + this.context = new Konva.SceneContext(this); this.setSize(width, height); }; - Kinetic.SceneCanvas.prototype = { + Konva.SceneCanvas.prototype = { setWidth: function(width) { var pixelRatio = this.pixelRatio, _context = this.getContext()._context; - Kinetic.Canvas.prototype.setWidth.call(this, width); + Konva.Canvas.prototype.setWidth.call(this, width); _context.scale(pixelRatio, pixelRatio); }, setHeight: function(height) { var pixelRatio = this.pixelRatio, _context = this.getContext()._context; - Kinetic.Canvas.prototype.setHeight.call(this, height); + Konva.Canvas.prototype.setHeight.call(this, height); _context.scale(pixelRatio, pixelRatio); } }; - Kinetic.Util.extend(Kinetic.SceneCanvas, Kinetic.Canvas); + Konva.Util.extend(Konva.SceneCanvas, Konva.Canvas); - Kinetic.HitCanvas = function(config) { + Konva.HitCanvas = function(config) { var conf = config || {}; var width = conf.width || 0, height = conf.height || 0; - Kinetic.Canvas.call(this, conf); - this.context = new Kinetic.HitContext(this); + Konva.Canvas.call(this, conf); + this.context = new Konva.HitContext(this); this.setSize(width, height); this.hitCanvas = true; }; - Kinetic.Util.extend(Kinetic.HitCanvas, Kinetic.Canvas); + Konva.Util.extend(Konva.HitCanvas, Konva.Canvas); })(); diff --git a/src/Container.js b/src/Container.js index 843c7615..2023389f 100644 --- a/src/Container.js +++ b/src/Container.js @@ -1,15 +1,15 @@ (function() { - Kinetic.Util.addMethods(Kinetic.Container, { + Konva.Util.addMethods(Konva.Container, { __init: function(config) { - this.children = new Kinetic.Collection(); - Kinetic.Node.call(this, config); + this.children = new Konva.Collection(); + Konva.Node.call(this, config); }, /** - * returns a {@link Kinetic.Collection} of direct descendant nodes + * returns a {@link Konva.Collection} of direct descendant nodes * @method - * @memberof Kinetic.Container.prototype + * @memberof Konva.Container.prototype * @param {Function} [filterFunc] filter function - * @returns {Kinetic.Collection} + * @returns {Konva.Collection} * @example * // get all children * var children = layer.getChildren(); @@ -23,7 +23,7 @@ if (!filterFunc) { return this.children; } else { - var results = new Kinetic.Collection(); + var results = new Konva.Collection(); this.children.each(function(child){ if (filterFunc(child)) { results.push(child); @@ -35,7 +35,7 @@ /** * determine if node has children * @method - * @memberof Kinetic.Container.prototype + * @memberof Konva.Container.prototype * @returns {Boolean} */ hasChildren: function() { @@ -44,10 +44,10 @@ /** * remove all children * @method - * @memberof Kinetic.Container.prototype + * @memberof Konva.Container.prototype */ removeChildren: function() { - var children = Kinetic.Collection.toCollection(this.children); + var children = Konva.Collection.toCollection(this.children); var child; for (var i = 0; i < children.length; i++) { child = children[i]; @@ -60,16 +60,16 @@ child.remove(); } children = null; - this.children = new Kinetic.Collection(); + this.children = new Konva.Collection(); return this; }, /** * destroy all children * @method - * @memberof Kinetic.Container.prototype + * @memberof Konva.Container.prototype */ destroyChildren: function() { - var children = Kinetic.Collection.toCollection(this.children); + var children = Konva.Collection.toCollection(this.children); var child; for (var i = 0; i < children.length; i++) { child = children[i]; @@ -79,14 +79,14 @@ child.destroy(); } children = null; - this.children = new Kinetic.Collection(); + this.children = new Konva.Collection(); return this; }, /** * Add node or nodes to container. * @method - * @memberof Kinetic.Container.prototype - * @param {...Kinetic.Node} child + * @memberof Konva.Container.prototype + * @param {...Konva.Node} child * @returns {Container} * @example * layer.add(shape1, shape2, shape3); @@ -113,7 +113,7 @@ // if node under drag we need to update drag animation if (child.isDragging()) { - Kinetic.DD.anim.setLayers(child.getLayer()); + Konva.DD.anim.setLayers(child.getLayer()); } // chainable @@ -125,14 +125,14 @@ this.destroyChildren(); } // then destroy self - Kinetic.Node.prototype.destroy.call(this); + Konva.Node.prototype.destroy.call(this); }, /** - * return a {@link Kinetic.Collection} of nodes that match the selector. Use '#' for id selections + * return a {@link Konva.Collection} of nodes that match the selector. Use '#' for id selections * and '.' for name selections. You can also select by type or class name. Pass multiple selectors * separated by a space. * @method - * @memberof Kinetic.Container.prototype + * @memberof Konva.Container.prototype * @param {String} selector * @returns {Collection} * @example @@ -182,10 +182,10 @@ } } - return Kinetic.Collection.toCollection(retArr); + return Konva.Collection.toCollection(retArr); }, _getNodeById: function(key) { - var node = Kinetic.ids[key]; + var node = Konva.ids[key]; if(node !== undefined && this.isAncestorOf(node)) { return node; @@ -193,11 +193,11 @@ return null; }, _getNodesByName: function(key) { - var arr = Kinetic.names[key] || []; + var arr = Konva.names[key] || []; return this._getDescendants(arr); }, _get: function(selector) { - var retArr = Kinetic.Node.prototype._get.call(this, selector); + var retArr = Konva.Node.prototype._get.call(this, selector); var children = this.getChildren(); var len = children.length; for(var n = 0; n < len; n++) { @@ -207,7 +207,7 @@ }, // extenders toObject: function() { - var obj = Kinetic.Node.prototype.toObject.call(this); + var obj = Konva.Node.prototype.toObject.call(this); obj.children = []; @@ -236,8 +236,8 @@ * determine if node is an ancestor * of descendant * @method - * @memberof Kinetic.Container.prototype - * @param {Kinetic.Node} node + * @memberof Konva.Container.prototype + * @param {Konva.Node} node */ isAncestorOf: function(node) { var parent = node.getParent(); @@ -252,7 +252,7 @@ }, clone: function(obj) { // call super method - var node = Kinetic.Node.prototype.clone.call(this, obj); + var node = Konva.Node.prototype.clone.call(this, obj); this.getChildren().each(function(no) { node.add(no.clone()); @@ -262,10 +262,10 @@ /** * get all shapes that intersect a point. Note: because this method must clear a temporary * canvas and redraw every shape inside the container, it should only be used for special sitations - * because it performs very poorly. Please use the {@link Kinetic.Stage#getIntersection} method if at all possible + * because it performs very poorly. Please use the {@link Konva.Stage#getIntersection} method if at all possible * because it performs much better * @method - * @memberof Kinetic.Container.prototype + * @memberof Konva.Container.prototype * @param {Object} pos * @param {Number} pos.x * @param {Number} pos.y @@ -354,24 +354,24 @@ }, shouldDrawHit: function(canvas) { var layer = this.getLayer(); - var dd = Kinetic.DD; - var layerUnderDrag = dd && Kinetic.isDragging() && (Kinetic.DD.anim.getLayers().indexOf(layer) !== -1); + var dd = Konva.DD; + var layerUnderDrag = dd && Konva.isDragging() && (Konva.DD.anim.getLayers().indexOf(layer) !== -1); return (canvas && canvas.isCache) || (layer && layer.hitGraphEnabled()) && this.isVisible() && !layerUnderDrag; } }); - Kinetic.Util.extend(Kinetic.Container, Kinetic.Node); + Konva.Util.extend(Konva.Container, Konva.Node); // deprecated methods - Kinetic.Container.prototype.get = Kinetic.Container.prototype.find; + Konva.Container.prototype.get = Konva.Container.prototype.find; // add getters setters - Kinetic.Factory.addComponentsGetterSetter(Kinetic.Container, 'clip', ['x', 'y', 'width', 'height']); + Konva.Factory.addComponentsGetterSetter(Konva.Container, 'clip', ['x', 'y', 'width', 'height']); /** * get/set clip * @method * @name clip - * @memberof Kinetic.Container.prototype + * @memberof Konva.Container.prototype * @param {Object} clip * @param {Number} clip.x * @param {Number} clip.y @@ -391,12 +391,12 @@ * }); */ - Kinetic.Factory.addGetterSetter(Kinetic.Container, 'clipX'); + Konva.Factory.addGetterSetter(Konva.Container, 'clipX'); /** * get/set clip x * @name clipX * @method - * @memberof Kinetic.Container.prototype + * @memberof Konva.Container.prototype * @param {Number} x * @returns {Number} * @example @@ -407,12 +407,12 @@ * container.clipX(10); */ - Kinetic.Factory.addGetterSetter(Kinetic.Container, 'clipY'); + Konva.Factory.addGetterSetter(Konva.Container, 'clipY'); /** * get/set clip y * @name clipY * @method - * @memberof Kinetic.Container.prototype + * @memberof Konva.Container.prototype * @param {Number} y * @returns {Number} * @example @@ -423,12 +423,12 @@ * container.clipY(10); */ - Kinetic.Factory.addGetterSetter(Kinetic.Container, 'clipWidth'); + Konva.Factory.addGetterSetter(Konva.Container, 'clipWidth'); /** * get/set clip width * @name clipWidth * @method - * @memberof Kinetic.Container.prototype + * @memberof Konva.Container.prototype * @param {Number} width * @returns {Number} * @example @@ -439,12 +439,12 @@ * container.clipWidth(100); */ - Kinetic.Factory.addGetterSetter(Kinetic.Container, 'clipHeight'); + Konva.Factory.addGetterSetter(Konva.Container, 'clipHeight'); /** * get/set clip height * @name clipHeight * @method - * @memberof Kinetic.Container.prototype + * @memberof Konva.Container.prototype * @param {Number} height * @returns {Number} * @example @@ -455,5 +455,5 @@ * container.clipHeight(100); */ - Kinetic.Collection.mapMethods(Kinetic.Container); + Konva.Collection.mapMethods(Konva.Container); })(); diff --git a/src/Context.js b/src/Context.js index a0e60f17..21a3a80e 100644 --- a/src/Context.js +++ b/src/Context.js @@ -46,18 +46,18 @@ * Canvas Context constructor * @constructor * @abstract - * @memberof Kinetic + * @memberof Konva */ - Kinetic.Context = function(canvas) { + Konva.Context = function(canvas) { this.init(canvas); }; - Kinetic.Context.prototype = { + Konva.Context.prototype = { init: function(canvas) { this.canvas = canvas; this._context = canvas._canvas.getContext('2d'); - if (Kinetic.enableTrace) { + if (Konva.enableTrace) { this.traceArr = []; this._enableTrace(); } @@ -65,8 +65,8 @@ /** * fill shape * @method - * @memberof Kinetic.Context.prototype - * @param {Kinetic.Shape} shape + * @memberof Konva.Context.prototype + * @param {Konva.Shape} shape */ fillShape: function(shape) { if(shape.getFillEnabled()) { @@ -76,8 +76,8 @@ /** * stroke shape * @method - * @memberof Kinetic.Context.prototype - * @param {Kinetic.Shape} shape + * @memberof Konva.Context.prototype + * @param {Konva.Shape} shape */ strokeShape: function(shape) { if(shape.getStrokeEnabled()) { @@ -87,8 +87,8 @@ /** * fill then stroke * @method - * @memberof Kinetic.Context.prototype - * @param {Kinetic.Shape} shape + * @memberof Konva.Context.prototype + * @param {Konva.Shape} shape */ fillStrokeShape: function(shape) { var fillEnabled = shape.getFillEnabled(); @@ -102,7 +102,7 @@ /** * get context trace if trace is enabled * @method - * @memberof Kinetic.Context.prototype + * @memberof Konva.Context.prototype * @param {Boolean} relaxed if false, return strict context trace, which includes method names, method parameters * properties, and property values. If true, return relaxed context trace, which only returns method names and * properites. @@ -126,7 +126,7 @@ str += DOUBLE_PAREN; } else { - if (Kinetic.Util._isArray(args[0])) { + if (Konva.Util._isArray(args[0])) { str += OPEN_PAREN_BRACKET + args.join(COMMA) + CLOSE_BRACKET_PAREN; } else { @@ -150,7 +150,7 @@ /** * clear trace if trace is enabled * @method - * @memberof Kinetic.Context.prototype + * @memberof Konva.Context.prototype */ clearTrace: function() { this.traceArr = []; @@ -162,14 +162,14 @@ traceArr.push(str); len = traceArr.length; - if (len >= Kinetic.traceArrMax) { + if (len >= Konva.traceArrMax) { traceArr.shift(); } }, /** * reset canvas context transform * @method - * @memberof Kinetic.Context.prototype + * @memberof Konva.Context.prototype */ reset: function() { var pixelRatio = this.getCanvas().getPixelRatio(); @@ -178,8 +178,8 @@ /** * get canvas * @method - * @memberof Kinetic.Context.prototype - * @returns {Kinetic.Canvas} + * @memberof Konva.Context.prototype + * @returns {Konva.Canvas} */ getCanvas: function() { return this.canvas; @@ -187,7 +187,7 @@ /** * clear canvas * @method - * @memberof Kinetic.Context.prototype + * @memberof Konva.Context.prototype * @param {Object} [bounds] * @param {Number} [bounds.x] * @param {Number} [bounds.y] @@ -369,7 +369,7 @@ _enableTrace: function() { var that = this, len = CONTEXT_METHODS.length, - _simplifyArray = Kinetic.Util._simplifyArray, + _simplifyArray = Konva.Util._simplifyArray, origSetter = this.setAttr, n, args; @@ -406,14 +406,14 @@ } }; - Kinetic.SceneContext = function(canvas) { - Kinetic.Context.call(this, canvas); + Konva.SceneContext = function(canvas) { + Konva.Context.call(this, canvas); }; - Kinetic.SceneContext.prototype = { + Konva.SceneContext.prototype = { _fillColor: function(shape) { var fill = shape.fill() - || Kinetic.Util._getRGBAString({ + || Konva.Util._getRGBAString({ red: shape.fillRed(), green: shape.fillGreen(), blue: shape.fillBlue(), @@ -428,7 +428,7 @@ fillPatternX = shape.getFillPatternX(), fillPatternY = shape.getFillPatternY(), fillPatternScale = shape.getFillPatternScale(), - fillPatternRotation = Kinetic.getAngle(shape.getFillPatternRotation()), + fillPatternRotation = Konva.getAngle(shape.getFillPatternRotation()), fillPatternOffset = shape.getFillPatternOffset(), fillPatternRepeat = shape.getFillPatternRepeat(); @@ -515,7 +515,7 @@ _stroke: function(shape) { var dash = shape.dash(), // ignore strokeScaleEnabled for Text - strokeScaleEnabled = (shape.getStrokeScaleEnabled() || (shape instanceof Kinetic.Text)); + strokeScaleEnabled = (shape.getStrokeScaleEnabled() || (shape instanceof Konva.Text)); if(shape.hasStroke()) { if (!strokeScaleEnabled) { @@ -530,7 +530,7 @@ this.setAttr('lineWidth', shape.strokeWidth()); this.setAttr('strokeStyle', shape.stroke() - || Kinetic.Util._getRGBAString({ + || Konva.Util._getRGBAString({ red: shape.strokeRed(), green: shape.strokeGreen(), blue: shape.strokeBlue(), @@ -545,7 +545,7 @@ } }, _applyShadow: function(shape) { - var util = Kinetic.Util, + var util = Konva.Util, absOpacity = shape.getAbsoluteOpacity(), color = util.get(shape.getShadowColor(), 'black'), blur = util.get(shape.getShadowBlur(), 5), @@ -566,13 +566,13 @@ } }; - Kinetic.Util.extend(Kinetic.SceneContext, Kinetic.Context); + Konva.Util.extend(Konva.SceneContext, Konva.Context); - Kinetic.HitContext = function(canvas) { - Kinetic.Context.call(this, canvas); + Konva.HitContext = function(canvas) { + Konva.Context.call(this, canvas); }; - Kinetic.HitContext.prototype = { + Konva.HitContext.prototype = { _fill: function(shape) { this.save(); this.setAttr('fillStyle', shape.colorKey); @@ -582,7 +582,7 @@ _stroke: function(shape) { if(shape.hasStroke()) { // ignore strokeScaleEnabled for Text - var strokeScaleEnabled = (shape.getStrokeScaleEnabled() || (shape instanceof Kinetic.Text)); + var strokeScaleEnabled = (shape.getStrokeScaleEnabled() || (shape instanceof Konva.Text)); if (!strokeScaleEnabled) { this.save(); this.setTransform(1, 0, 0, 1, 0, 0); @@ -597,5 +597,5 @@ } } }; - Kinetic.Util.extend(Kinetic.HitContext, Kinetic.Context); + Konva.Util.extend(Konva.HitContext, Konva.Context); })(); diff --git a/src/DragAndDrop.js b/src/DragAndDrop.js index f08b78f1..650e61e0 100644 --- a/src/DragAndDrop.js +++ b/src/DragAndDrop.js @@ -1,7 +1,7 @@ (function() { - Kinetic.DD = { + Konva.DD = { // properties - anim: new Kinetic.Animation(function() { + anim: new Konva.Animation(function() { var b = this.dirty; this.dirty = false; return b; @@ -16,7 +16,7 @@ // methods _drag: function(evt) { - var dd = Kinetic.DD, + var dd = Konva.DD, node = dd.node; if(node) { @@ -51,7 +51,7 @@ } }, _endDragBefore: function(evt) { - var dd = Kinetic.DD, + var dd = Konva.DD, node = dd.node, nodeType, layer; @@ -65,7 +65,7 @@ if(dd.isDragging) { dd.isDragging = false; dd.justDragged = true; - Kinetic.listenClickTap = false; + Konva.listenClickTap = false; if (evt) { evt.dragEndNode = node; @@ -97,10 +97,10 @@ /** * initiate drag and drop * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype */ - Kinetic.Node.prototype.startDrag = function() { - var dd = Kinetic.DD, + Konva.Node.prototype.startDrag = function() { + var dd = Konva.DD, stage = this.getStage(), layer = this.getLayer(), pos = stage.getPointerPosition(), @@ -122,8 +122,8 @@ } }; - Kinetic.Node.prototype._setDragPosition = function(evt) { - var dd = Kinetic.DD, + Konva.Node.prototype._setDragPosition = function(evt) { + var dd = Konva.DD, pos = this.getStage().getPointerPosition(), dbf = this.getDragBoundFunc(); if (!pos) { @@ -150,24 +150,24 @@ /** * stop drag and drop * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype */ - Kinetic.Node.prototype.stopDrag = function() { - var dd = Kinetic.DD, + Konva.Node.prototype.stopDrag = function() { + var dd = Konva.DD, evt = {}; dd._endDragBefore(evt); dd._endDragAfter(evt); }; - Kinetic.Node.prototype.setDraggable = function(draggable) { + Konva.Node.prototype.setDraggable = function(draggable) { this._setAttr('draggable', draggable); this._dragChange(); }; - var origDestroy = Kinetic.Node.prototype.destroy; + var origDestroy = Konva.Node.prototype.destroy; - Kinetic.Node.prototype.destroy = function() { - var dd = Kinetic.DD; + Konva.Node.prototype.destroy = function() { + var dd = Konva.DD; // stop DD if(dd.node && dd.node._id === this._id) { @@ -181,32 +181,32 @@ /** * determine if node is currently in drag and drop mode * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype */ - Kinetic.Node.prototype.isDragging = function() { - var dd = Kinetic.DD; + Konva.Node.prototype.isDragging = function() { + var dd = Konva.DD; return !!(dd.node && dd.node._id === this._id && dd.isDragging); }; - Kinetic.Node.prototype._listenDrag = function() { + Konva.Node.prototype._listenDrag = function() { var that = this; this._dragCleanup(); if (this.getClassName() === 'Stage') { - this.on('contentMousedown.kinetic contentTouchstart.kinetic', function(evt) { - if(!Kinetic.DD.node) { + this.on('contentMousedown.konva contentTouchstart.konva', function(evt) { + if(!Konva.DD.node) { that.startDrag(evt); } }); } else { - this.on('mousedown.kinetic touchstart.kinetic', function(evt) { + this.on('mousedown.konva touchstart.konva', function(evt) { // ignore right and middle buttons if (evt.evt.button === 1 || evt.evt.button === 2) { return; } - if(!Kinetic.DD.node) { + if(!Konva.DD.node) { that.startDrag(evt); } }); @@ -219,7 +219,7 @@ */ }; - Kinetic.Node.prototype._dragChange = function() { + Konva.Node.prototype._dragChange = function() { if(this.attrs.draggable) { this._listenDrag(); } @@ -233,31 +233,31 @@ * drag and drop mode */ var stage = this.getStage(); - var dd = Kinetic.DD; + var dd = Konva.DD; if(stage && dd.node && dd.node._id === this._id) { dd.node.stopDrag(); } } }; - Kinetic.Node.prototype._dragCleanup = function() { + Konva.Node.prototype._dragCleanup = function() { if (this.getClassName() === 'Stage') { - this.off('contentMousedown.kinetic'); - this.off('contentTouchstart.kinetic'); + this.off('contentMousedown.konva'); + this.off('contentTouchstart.konva'); } else { - this.off('mousedown.kinetic'); - this.off('touchstart.kinetic'); + this.off('mousedown.konva'); + this.off('touchstart.konva'); } }; - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'dragBoundFunc'); + Konva.Factory.addGetterSetter(Konva.Node, 'dragBoundFunc'); /** * get/set drag bound function. This is used to override the default * drag and drop position * @name dragBoundFunc * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Function} dragBoundFunc * @returns {Function} * @example @@ -273,14 +273,14 @@ * }); */ - Kinetic.Factory.addGetter(Kinetic.Node, 'draggable', false); - Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node, 'draggable'); + Konva.Factory.addGetter(Konva.Node, 'draggable', false); + Konva.Factory.addOverloadedGetterSetter(Konva.Node, 'draggable'); /** * get/set draggable flag * @name draggable * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Boolean} draggable * @returns {Boolean} * @example @@ -294,11 +294,11 @@ * node.draggable(false); */ - var html = Kinetic.document.documentElement; - html.addEventListener('mouseup', Kinetic.DD._endDragBefore, true); - html.addEventListener('touchend', Kinetic.DD._endDragBefore, true); + var html = Konva.document.documentElement; + html.addEventListener('mouseup', Konva.DD._endDragBefore, true); + html.addEventListener('touchend', Konva.DD._endDragBefore, true); - html.addEventListener('mouseup', Kinetic.DD._endDragAfter, false); - html.addEventListener('touchend', Kinetic.DD._endDragAfter, false); + html.addEventListener('mouseup', Konva.DD._endDragAfter, false); + html.addEventListener('touchend', Konva.DD._endDragAfter, false); })(); diff --git a/src/Factory.js b/src/Factory.js index f6d5aa0d..2eed69d4 100644 --- a/src/Factory.js +++ b/src/Factory.js @@ -5,14 +5,14 @@ RGB = 'RGB', SET = 'set'; - Kinetic.Factory = { + Konva.Factory = { addGetterSetter: function(constructor, attr, def, validator, after) { this.addGetter(constructor, attr, def); this.addSetter(constructor, attr, validator, after); this.addOverloadedGetterSetter(constructor, attr); }, addGetter: function(constructor, attr, def) { - var method = GET + Kinetic.Util._capitalize(attr); + var method = GET + Konva.Util._capitalize(attr); constructor.prototype[method] = function() { var val = this.attrs[attr]; @@ -20,7 +20,7 @@ }; }, addSetter: function(constructor, attr, validator, after) { - var method = SET + Kinetic.Util._capitalize(attr); + var method = SET + Konva.Util._capitalize(attr); constructor.prototype[method] = function(val) { if (validator) { @@ -38,7 +38,7 @@ }, addComponentsGetterSetter: function(constructor, attr, components, validator, after) { var len = components.length, - capitalize = Kinetic.Util._capitalize, + capitalize = Konva.Util._capitalize, getter = GET + capitalize(attr), setter = SET + capitalize(attr), n, component; @@ -80,7 +80,7 @@ this.addOverloadedGetterSetter(constructor, attr); }, addOverloadedGetterSetter: function(constructor, attr) { - var capitalizedAttr = Kinetic.Util._capitalize(attr), + var capitalizedAttr = Konva.Util._capitalize(attr), setter = SET + capitalizedAttr, getter = GET + capitalizedAttr; @@ -108,7 +108,7 @@ } }; - Kinetic.Validators = { + Konva.Validators = { /** * @return {number} */ diff --git a/src/FastLayer.js b/src/FastLayer.js index 51597ab1..9b75020e 100644 --- a/src/FastLayer.js +++ b/src/FastLayer.js @@ -1,16 +1,16 @@ (function() { - Kinetic.Util.addMethods(Kinetic.FastLayer, { + Konva.Util.addMethods(Konva.FastLayer, { ____init: function(config) { this.nodeType = 'Layer'; - this.canvas = new Kinetic.SceneCanvas(); + this.canvas = new Konva.SceneCanvas(); // call super constructor - Kinetic.BaseLayer.call(this, config); + Konva.BaseLayer.call(this, config); }, _validateAdd: function(child) { var type = child.getType(); if (type !== 'Shape') { - Kinetic.Util.error('You may only add shapes to a fast layer.'); + Konva.Util.error('You may only add shapes to a fast layer.'); } }, _setCanvasSize: function(width, height) { @@ -30,7 +30,7 @@ canvas.getContext().clear(); } - Kinetic.Container.prototype.drawScene.call(this, canvas); + Konva.Container.prototype.drawScene.call(this, canvas); return this; }, @@ -50,7 +50,7 @@ /** * clear scene and hit canvas contexts tied to the layer * @method - * @memberof Kinetic.FastLayer.prototype + * @memberof Konva.FastLayer.prototype * @param {Object} [bounds] * @param {Number} [bounds.x] * @param {Number} [bounds.y] @@ -71,7 +71,7 @@ }, // extend Node.prototype.setVisible setVisible: function(visible) { - Kinetic.Node.prototype.setVisible.call(this, visible); + Konva.Node.prototype.setVisible.call(this, visible); if(visible) { this.getCanvas()._canvas.style.display = 'block'; } @@ -81,7 +81,7 @@ return this; } }); - Kinetic.Util.extend(Kinetic.FastLayer, Kinetic.BaseLayer); + Konva.Util.extend(Konva.FastLayer, Konva.BaseLayer); - Kinetic.Collection.mapMethods(Kinetic.FastLayer); + Konva.Collection.mapMethods(Konva.FastLayer); })(); diff --git a/src/Global.js b/src/Global.js index 81996ed6..edb904cb 100644 --- a/src/Global.js +++ b/src/Global.js @@ -1,7 +1,7 @@ /* - * KineticJS JavaScript Framework v@@version - * http://lavrton.github.io/KineticJS/ + * KonvaJS JavaScript Framework v@@version + * http://lavrton.github.io/KonvaJS/ * Licensed under the MIT or GPL Version 2 licenses. * Date: @@date * @@ -27,14 +27,14 @@ * THE SOFTWARE. */ /** - * @namespace Kinetic + * @namespace Konva */ /*jshint -W079, -W020*/ -var Kinetic = {}; +var Konva = {}; (function(root) { var PI_OVER_180 = Math.PI / 180; - Kinetic = { + Konva = { // public version: '@@version', @@ -52,13 +52,13 @@ var Kinetic = {}; traceArrMax: 100, dblClickWindow: 400, /** - * Global pixel ratio configuration. KineticJS automatically detect pixel ratio of current device. + * Global pixel ratio configuration. KonvaJS automatically detect pixel ratio of current device. * But you may override such property, if you want to use your value. * @property pixelRatio * @default undefined - * @memberof Kinetic + * @memberof Konva * @example - * Kinetic.pixelRatio = 1; + * Konva.pixelRatio = 1; */ pixelRatio: undefined, /** @@ -66,19 +66,19 @@ var Kinetic = {}; * only then start dragging. * @property dragDistance * @default 0 - * @memberof Kinetic + * @memberof Konva * @example - * Kinetic.dragDistance = 10; + * Konva.dragDistance = 10; */ dragDistance : 0, /** * Use degree values for angle properties. You may set this property to false if you want to use radiant values. * @property angleDeg * @default true - * @memberof Kinetic + * @memberof Konva * @example * node.rotation(45); // 45 degrees - * Kinetic.angleDeg = false; + * Konva.angleDeg = false; * node.rotation(Math.PI / 2); // PI/2 radian */ angleDeg: true, @@ -86,9 +86,9 @@ var Kinetic = {}; * Show different warnings about errors or wrong API usage * @property showWarnings * @default true - * @memberof Kinetic + * @memberof Konva * @example - * Kinetic.showWarnings = false; + * Konva.showWarnings = false; */ showWarnings : true, @@ -96,7 +96,7 @@ var Kinetic = {}; /** * @namespace Filters - * @memberof Kinetic + * @memberof Konva */ Filters: {}, @@ -104,7 +104,7 @@ var Kinetic = {}; * Node constructor. Nodes are entities that can be transformed, layered, * and have bound events. The stage, layers, groups, and shapes all extend Node. * @constructor - * @memberof Kinetic + * @memberof Konva * @abstract * @param {Object} config * @@nodeParams @@ -117,17 +117,17 @@ var Kinetic = {}; * Shape constructor. Shapes are primitive objects such as rectangles, * circles, text, lines, etc. * @constructor - * @memberof Kinetic - * @augments Kinetic.Node + * @memberof Konva + * @augments Konva.Node * @param {Object} config * @@shapeParams * @@nodeParams * @example - * var customShape = new Kinetic.Shape({ + * var customShape = new Konva.Shape({ * x: 5, * y: 10, * fill: 'red', - * // a Kinetic.Canvas renderer is passed into the drawFunc function + * // a Konva.Canvas renderer is passed into the drawFunc function * drawFunc: function(context) { * context.beginPath(); * context.moveTo(200, 50); @@ -145,8 +145,8 @@ var Kinetic = {}; /** * Container constructor.  Containers are used to contain nodes or other containers * @constructor - * @memberof Kinetic - * @augments Kinetic.Node + * @memberof Konva + * @augments Konva.Node * @abstract * @param {Object} config * @@nodeParams @@ -159,13 +159,13 @@ var Kinetic = {}; /** * Stage constructor. A stage is used to contain multiple layers * @constructor - * @memberof Kinetic - * @augments Kinetic.Container + * @memberof Konva + * @augments Konva.Container * @param {Object} config * @param {String|Element} config.container Container id or DOM element * @@nodeParams * @example - * var stage = new Kinetic.Stage({ + * var stage = new Konva.Stage({ * width: 500, * height: 800, * container: 'containerId' @@ -178,15 +178,15 @@ var Kinetic = {}; /** * BaseLayer constructor. * @constructor - * @memberof Kinetic - * @augments Kinetic.Container + * @memberof Konva + * @augments Konva.Container * @param {Object} config * @param {Boolean} [config.clearBeforeDraw] set this property to false if you don't want * to clear the canvas before each layer draw. The default value is true. * @@nodeParams * @@containerParams * @example - * var layer = new Kinetic.Layer(); + * var layer = new Konva.Layer(); */ BaseLayer: function(config) { this.___init(config); @@ -196,15 +196,15 @@ var Kinetic = {}; * Layer constructor. Layers are tied to their own canvas element and are used * to contain groups or shapes. * @constructor - * @memberof Kinetic - * @augments Kinetic.BaseLayer + * @memberof Konva + * @augments Konva.BaseLayer * @param {Object} config * @param {Boolean} [config.clearBeforeDraw] set this property to false if you don't want * to clear the canvas before each layer draw. The default value is true. * @@nodeParams * @@containerParams * @example - * var layer = new Kinetic.Layer(); + * var layer = new Konva.Layer(); */ Layer: function(config) { this.____init(config); @@ -216,8 +216,8 @@ var Kinetic = {}; * or event pub/sub, you should use FastLayer instead of Layer to create your layers. * It renders about 2x faster than normal layers. * @constructor - * @memberof Kinetic - * @augments Kinetic.BaseLayer + * @memberof Konva + * @augments Konva.BaseLayer * @param {Object} config * @param {Boolean} [config.clearBeforeDraw] set this property to false if you don't want * to clear the canvas before each layer draw. The default value is true. @@ -227,7 +227,7 @@ var Kinetic = {}; * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1 * @@containerParams * @example - * var layer = new Kinetic.FastLayer(); + * var layer = new Konva.FastLayer(); */ FastLayer: function(config) { this.____init(config); @@ -236,13 +236,13 @@ var Kinetic = {}; /** * Group constructor. Groups are used to contain shapes or other groups. * @constructor - * @memberof Kinetic - * @augments Kinetic.Container + * @memberof Konva + * @augments Konva.Container * @param {Object} config * @@nodeParams * @@containerParams * @example - * var group = new Kinetic.Group(); + * var group = new Konva.Group(); */ Group: function(config) { this.___init(config); @@ -251,10 +251,10 @@ var Kinetic = {}; /** * returns whether or not drag and drop is currently active * @method - * @memberof Kinetic + * @memberof Konva */ isDragging: function() { - var dd = Kinetic.DD; + var dd = Konva.DD; // if DD is not included with the build, then // drag and drop is not even possible @@ -268,10 +268,10 @@ var Kinetic = {}; * returns whether or not a drag and drop operation is ready, but may * not necessarily have started * @method - * @memberof Kinetic + * @memberof Konva */ isDragReady: function() { - var dd = Kinetic.DD; + var dd = Konva.DD; // if DD is not included with the build, then // drag and drop is not even possible @@ -345,14 +345,14 @@ var Kinetic = {}; // adding mobile flab mobile: mobile, - ieMobile: ieMobile // If this is true (i.e., WP8), then Kinetic touch events are executed instead of equivalent Kinetic mouse events + ieMobile: ieMobile // If this is true (i.e., WP8), then Konva touch events are executed instead of equivalent Konva mouse events }; }, // user agent UA: undefined }; - Kinetic.UA = Kinetic._parseUA((root.navigator && root.navigator.userAgent) || ''); + Konva.UA = Konva._parseUA((root.navigator && root.navigator.userAgent) || ''); })(this); @@ -375,11 +375,11 @@ var Kinetic = {}; // if the module has no dependencies, the above pattern can be simplified to ( function(root, factory) { if( typeof exports === 'object') { - var KineticJS = factory(); + var KonvaJS = factory(); // runtime-check for browserify if(global.window === global) { - Kinetic.document = global.document; - Kinetic.window = global; + Konva.document = global.document; + Konva.window = global; } else { // Node. Does not work with strict CommonJS, but // only CommonJS-like enviroments that support module.exports, @@ -387,28 +387,28 @@ var Kinetic = {}; var Canvas = require('canvas'); var jsdom = require('jsdom').jsdom; - Kinetic.document = jsdom(''); - Kinetic.window = Kinetic.document.createWindow(); - Kinetic.window.Image = Canvas.Image; - Kinetic._nodeCanvas = Canvas; + Konva.document = jsdom(''); + Konva.window = Konva.document.createWindow(); + Konva.window.Image = Canvas.Image; + Konva._nodeCanvas = Canvas; } - Kinetic.root = root; - module.exports = KineticJS; + Konva.root = root; + module.exports = KonvaJS; return; } else if( typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define(factory); } - Kinetic.document = document; - Kinetic.window = window; - Kinetic.root = root; + Konva.document = document; + Konva.window = window; + Konva.root = root; }(this, function() { // Just return a value to define the module export. // This example returns an object, but the module // can return a function as the exported value. - return Kinetic; + return Konva; })); diff --git a/src/Group.js b/src/Group.js index a877a4a4..68594b65 100644 --- a/src/Group.js +++ b/src/Group.js @@ -1,18 +1,18 @@ (function() { - Kinetic.Util.addMethods(Kinetic.Group, { + Konva.Util.addMethods(Konva.Group, { ___init: function(config) { this.nodeType = 'Group'; // call super constructor - Kinetic.Container.call(this, config); + Konva.Container.call(this, config); }, _validateAdd: function(child) { var type = child.getType(); if (type !== 'Group' && type !== 'Shape') { - Kinetic.Util.error('You may only add groups and shapes to groups.'); + Konva.Util.error('You may only add groups and shapes to groups.'); } } }); - Kinetic.Util.extend(Kinetic.Group, Kinetic.Container); + Konva.Util.extend(Konva.Group, Konva.Container); - Kinetic.Collection.mapMethods(Kinetic.Group); + Konva.Collection.mapMethods(Konva.Group); })(); diff --git a/src/Layer.js b/src/Layer.js index e98a5d2b..c5d92812 100644 --- a/src/Layer.js +++ b/src/Layer.js @@ -25,13 +25,13 @@ INTERSECTION_OFFSETS_LEN = INTERSECTION_OFFSETS.length; - Kinetic.Util.addMethods(Kinetic.Layer, { + Konva.Util.addMethods(Konva.Layer, { ____init: function(config) { this.nodeType = 'Layer'; - this.canvas = new Kinetic.SceneCanvas(); - this.hitCanvas = new Kinetic.HitCanvas(); + this.canvas = new Konva.SceneCanvas(); + this.hitCanvas = new Konva.HitCanvas(); // call super constructor - Kinetic.BaseLayer.call(this, config); + Konva.BaseLayer.call(this, config); }, _setCanvasSize: function(width, height) { this.canvas.setSize(width, height); @@ -40,18 +40,18 @@ _validateAdd: function(child) { var type = child.getType(); if (type !== 'Group' && type !== 'Shape') { - Kinetic.Util.error('You may only add groups and shapes to a layer.'); + Konva.Util.error('You may only add groups and shapes to a layer.'); } }, /** * get visible intersection shape. This is the preferred * method for determining if a point intersects a shape or not * @method - * @memberof Kinetic.Layer.prototype + * @memberof Konva.Layer.prototype * @param {Object} pos * @param {Number} pos.x * @param {Number} pos.y - * @returns {Kinetic.Shape} + * @returns {Konva.Shape} */ getIntersection: function(pos) { var obj, i, intersectionOffset, shape; @@ -113,8 +113,8 @@ // fully opaque pixel if(p3 === 255) { - colorKey = Kinetic.Util._rgbToHex(p[0], p[1], p[2]); - shape = Kinetic.shapes[HASH + colorKey]; + colorKey = Konva.Util._rgbToHex(p[0], p[1], p[2]); + shape = Konva.shapes[HASH + colorKey]; return { shape: shape }; @@ -142,7 +142,7 @@ canvas.getContext().clear(); } - Kinetic.Container.prototype.drawScene.call(this, canvas, top); + Konva.Container.prototype.drawScene.call(this, canvas, top); this._fire(DRAW, { node: this @@ -165,14 +165,14 @@ layer.getHitCanvas().getContext().clear(); } - Kinetic.Container.prototype.drawHit.call(this, canvas, top); + Konva.Container.prototype.drawHit.call(this, canvas, top); this.imageData = null; // Clear imageData cache return this; }, /** * clear scene and hit canvas contexts tied to the layer * @method - * @memberof Kinetic.Layer.prototype + * @memberof Konva.Layer.prototype * @param {Object} [bounds] * @param {Number} [bounds.x] * @param {Number} [bounds.y] @@ -195,7 +195,7 @@ }, // extend Node.prototype.setVisible setVisible: function(visible) { - Kinetic.Node.prototype.setVisible.call(this, visible); + Konva.Node.prototype.setVisible.call(this, visible); if(visible) { this.getCanvas()._canvas.style.display = 'block'; this.hitCanvas._canvas.style.display = 'block'; @@ -210,7 +210,7 @@ * enable hit graph * @name enableHitGraph * @method - * @memberof Kinetic.Layer.prototype + * @memberof Konva.Layer.prototype * @returns {Layer} */ enableHitGraph: function() { @@ -221,7 +221,7 @@ * disable hit graph * @name disableHitGraph * @method - * @memberof Kinetic.Layer.prototype + * @memberof Konva.Layer.prototype * @returns {Layer} */ disableHitGraph: function() { @@ -229,20 +229,20 @@ return this; }, setSize : function(width, height) { - Kinetic.BaseLayer.prototype.setSize.call(this, width, height); + Konva.BaseLayer.prototype.setSize.call(this, width, height); this.hitCanvas.setSize(width, height); } }); - Kinetic.Util.extend(Kinetic.Layer, Kinetic.BaseLayer); + Konva.Util.extend(Konva.Layer, Konva.BaseLayer); - Kinetic.Factory.addGetterSetter(Kinetic.Layer, 'hitGraphEnabled', true); + Konva.Factory.addGetterSetter(Konva.Layer, 'hitGraphEnabled', true); /** * get/set hitGraphEnabled flag. Disabling the hit graph will greatly increase * draw performance because the hit graph will not be redrawn each time the layer is * drawn. This, however, also disables mouse/touch event detection * @name hitGraphEnabled * @method - * @memberof Kinetic.Layer.prototype + * @memberof Konva.Layer.prototype * @param {Boolean} enabled * @returns {Boolean} * @example @@ -255,5 +255,5 @@ * // enable hit graph * layer.hitGraphEnabled(true); */ - Kinetic.Collection.mapMethods(Kinetic.Layer); + Konva.Collection.mapMethods(Konva.Layer); })(); diff --git a/src/Node.js b/src/Node.js index b36a1d0a..57a33ff1 100644 --- a/src/Node.js +++ b/src/Node.js @@ -8,7 +8,7 @@ EMPTY_STRING = '', GET = 'get', ID = 'id', - KINETIC = 'kinetic', + KINETIC = 'konva', LISTENING = 'listening', MOUSEENTER = 'mouseenter', MOUSELEAVE = 'mouseleave', @@ -23,23 +23,23 @@ CLONE_BLACK_LIST = ['id'], TRANSFORM_CHANGE_STR = [ - 'xChange.kinetic', - 'yChange.kinetic', - 'scaleXChange.kinetic', - 'scaleYChange.kinetic', - 'skewXChange.kinetic', - 'skewYChange.kinetic', - 'rotationChange.kinetic', - 'offsetXChange.kinetic', - 'offsetYChange.kinetic', - 'transformsEnabledChange.kinetic' + 'xChange.konva', + 'yChange.konva', + 'scaleXChange.konva', + 'scaleYChange.konva', + 'skewXChange.konva', + 'skewYChange.konva', + 'rotationChange.konva', + 'offsetXChange.konva', + 'offsetYChange.konva', + 'transformsEnabledChange.konva' ].join(SPACE); - Kinetic.Util.addMethods(Kinetic.Node, { + Konva.Util.addMethods(Konva.Node, { _init: function(config) { var that = this; - this._id = Kinetic.idCounter++; + this._id = Konva.idCounter++; this.eventListeners = {}; this.attrs = {}; this._cache = {}; @@ -51,13 +51,13 @@ this._clearCache(TRANSFORM); that._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM); }); - this.on('visibleChange.kinetic', function() { + this.on('visibleChange.konva', function() { that._clearSelfAndDescendantCache(VISIBLE); }); - this.on('listeningChange.kinetic', function() { + this.on('listeningChange.konva', function() { that._clearSelfAndDescendantCache(LISTENING); }); - this.on('opacityChange.kinetic', function() { + this.on('opacityChange.konva', function() { that._clearSelfAndDescendantCache(ABSOLUTE_OPACITY); }); }, @@ -95,8 +95,8 @@ /** * clear cached canvas * @method - * @memberof Kinetic.Node.prototype - * @returns {Kinetic.Node} + * @memberof Konva.Node.prototype + * @returns {Konva.Node} * @example * node.clearCache(); */ @@ -109,7 +109,7 @@ * cache node to improve drawing performance, apply filters, or create more accurate * hit regions * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Object} config * @param {Number} [config.x] * @param {Number} [config.y] @@ -117,7 +117,7 @@ * @param {Number} [config.height] * @param {Boolean} [config.drawBorder] when set to true, a red border will be drawn around the cached * region for debugging purposes - * @returns {Kinetic.Node} + * @returns {Konva.Node} * @example * // cache a shape with the x,y position of the bounding box at the center and * // the width and height of the bounding box equal to the width and height of @@ -151,20 +151,20 @@ drawBorder = conf.drawBorder || false; if (width === 0 || height === 0) { - Kinetic.Util.warn('Width or height of caching configuration equals 0. Cache is ignored.'); + Konva.Util.warn('Width or height of caching configuration equals 0. Cache is ignored.'); return; } - var cachedSceneCanvas = new Kinetic.SceneCanvas({ + var cachedSceneCanvas = new Konva.SceneCanvas({ pixelRatio: 1, width: width, height: height }), - cachedFilterCanvas = new Kinetic.SceneCanvas({ + cachedFilterCanvas = new Konva.SceneCanvas({ pixelRatio: 1, width: width, height: height }), - cachedHitCanvas = new Kinetic.HitCanvas({ + cachedHitCanvas = new Konva.HitCanvas({ width: width, height: height }), @@ -246,7 +246,7 @@ } } catch(e) { - Kinetic.Util.warn('Unable to apply filter. ' + e.message); + Konva.Util.warn('Unable to apply filter. ' + e.message); } this._filterUpToDate = true; @@ -268,19 +268,19 @@ context.restore(); }, /** - * bind events to the node. KineticJS supports mouseover, mousemove, + * bind events to the node. KonvaJS supports mouseover, mousemove, * mouseout, mouseenter, mouseleave, mousedown, mouseup, mousewheel, click, dblclick, touchstart, touchmove, - * touchend, tap, dbltap, dragstart, dragmove, and dragend events. The Kinetic Stage supports + * touchend, tap, dbltap, dragstart, dragmove, and dragend events. The Konva Stage supports * contentMouseover, contentMousemove, contentMouseout, contentMousedown, contentMouseup, * contentClick, contentDblclick, contentTouchstart, contentTouchmove, contentTouchend, contentTap, * and contentDblTap. Pass in a string of events delimmited by a space to bind multiple events at once * such as 'mousedown mouseup mousemove'. Include a namespace to bind an * event by name such as 'click.foobar'. * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {String} evtStr e.g. 'click', 'mousedown touchstart', 'mousedown.foo touchstart.foo' * @param {Function} handler The handler function is passed an event object - * @returns {Kinetic.Node} + * @returns {Konva.Node} * @example * // add click listener * node.on('click', function() { @@ -360,9 +360,9 @@ * such as 'click.foobar'. If you only give a name like '.foobar', * all events in that namespace will be removed. * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {String} evtStr e.g. 'click', 'mousedown touchstart', '.foobar' - * @returns {Kinetic.Node} + * @returns {Konva.Node} * @example * // remove listener * node.off('click'); @@ -424,8 +424,8 @@ /** * remove self from parent, but don't destroy * @method - * @memberof Kinetic.Node.prototype - * @returns {Kinetic.Node} + * @memberof Konva.Node.prototype + * @returns {Konva.Node} * @example * node.remove(); */ @@ -451,29 +451,29 @@ /** * remove and destroy self * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @example * node.destroy(); */ destroy: function() { // remove from ids and names hashes - Kinetic._removeId(this.getId()); - Kinetic._removeName(this.getName(), this._id); + Konva._removeId(this.getId()); + Konva._removeName(this.getName(), this._id); this.remove(); }, /** * get attr * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {String} attr * @returns {Integer|String|Object|Array} * @example * var x = node.getAttr('x'); */ getAttr: function(attr) { - var method = GET + Kinetic.Util._capitalize(attr); - if(Kinetic.Util._isFunction(this[method])) { + var method = GET + Konva.Util._capitalize(attr); + if(Konva.Util._isFunction(this[method])) { return this[method](); } // otherwise get directly @@ -484,8 +484,8 @@ /** * get ancestors * @method - * @memberof Kinetic.Node.prototype - * @returns {Kinetic.Collection} + * @memberof Konva.Node.prototype + * @returns {Konva.Collection} * @example * shape.getAncestors().each(function(node) { * console.log(node.getId()); @@ -493,7 +493,7 @@ */ getAncestors: function() { var parent = this.getParent(), - ancestors = new Kinetic.Collection(); + ancestors = new Konva.Collection(); while (parent) { ancestors.push(parent); @@ -505,7 +505,7 @@ /** * get attrs object literal * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {Object} */ getAttrs: function() { @@ -514,9 +514,9 @@ /** * set multiple attrs at once using an object literal * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Object} config object containing key value pairs - * @returns {Kinetic.Node} + * @returns {Konva.Node} * @example * node.setAttrs({ * x: 5, @@ -528,13 +528,13 @@ if(config) { for(key in config) { - if (key === CHILDREN || config[key] instanceof Kinetic.Node) { + if (key === CHILDREN || config[key] instanceof Konva.Node) { } else { - method = SET + Kinetic.Util._capitalize(key); + method = SET + Konva.Util._capitalize(key); // use setter if available - if(Kinetic.Util._isFunction(this[method])) { + if(Konva.Util._isFunction(this[method])) { this[method](config[key]); } // otherwise set directly @@ -562,7 +562,7 @@ * I | I | T * * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {Boolean} */ isListening: function() { @@ -602,7 +602,7 @@ * I | I | T * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {Boolean} */ isVisible: function() { @@ -630,7 +630,7 @@ * determine if listening is enabled by taking into account descendants. If self or any children * have _isListeningEnabled set to true, then self also has listening enabled. * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {Boolean} */ shouldDrawHit: function(canvas) { @@ -641,8 +641,8 @@ /** * show node * @method - * @memberof Kinetic.Node.prototype - * @returns {Kinetic.Node} + * @memberof Konva.Node.prototype + * @returns {Konva.Node} */ show: function() { this.setVisible(true); @@ -651,8 +651,8 @@ /** * hide node. Hidden nodes are no longer detectable * @method - * @memberof Kinetic.Node.prototype - * @returns {Kinetic.Node} + * @memberof Konva.Node.prototype + * @returns {Konva.Node} */ hide: function() { this.setVisible(false); @@ -661,7 +661,7 @@ /** * get zIndex relative to the node's siblings who share the same parent * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {Integer} */ getZIndex: function() { @@ -671,7 +671,7 @@ * get absolute z-index which takes into account sibling * and ancestor indices * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {Integer} */ getAbsoluteZIndex: function() { @@ -711,7 +711,7 @@ * e.g. Stage depth will always be 0. Layers will always be 1. Groups and Shapes will always * be >= 2 * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {Integer} */ getDepth: function() { @@ -738,12 +738,12 @@ /** * get absolute position relative to the top left corner of the stage container div * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {Object} */ getAbsolutePosition: function() { var absoluteMatrix = this.getAbsoluteTransform().getMatrix(), - absoluteTransform = new Kinetic.Transform(), + absoluteTransform = new Konva.Transform(), offset = this.offset(); // clone the matrix array @@ -755,11 +755,11 @@ /** * set absolute position * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Object} pos * @param {Number} pos.x * @param {Number} pos.y - * @returns {Kinetic.Node} + * @returns {Konva.Node} */ setAbsolutePosition: function(pos) { var origTrans = this._clearTransform(), @@ -828,11 +828,11 @@ /** * move node by an amount relative to its current position * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Object} change * @param {Number} change.x * @param {Number} change.y - * @returns {Kinetic.Node} + * @returns {Konva.Node} * @example * // move node in x direction by 1px and y direction by 2px * node.move({ @@ -885,9 +885,9 @@ /** * rotate node by an amount in degrees relative to its current rotation * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Number} theta - * @returns {Kinetic.Node} + * @returns {Konva.Node} */ rotate: function(theta) { this.setRotation(this.getRotation() + theta); @@ -896,12 +896,12 @@ /** * move node to the top of its siblings * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {Boolean} */ moveToTop: function() { if (!this.parent) { - Kinetic.Util.warn('Node has no parent. moveToTop function is ignored.'); + Konva.Util.warn('Node has no parent. moveToTop function is ignored.'); return; } var index = this.index; @@ -913,12 +913,12 @@ /** * move node up * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {Boolean} */ moveUp: function() { if (!this.parent) { - Kinetic.Util.warn('Node has no parent. moveUp function is ignored.'); + Konva.Util.warn('Node has no parent. moveUp function is ignored.'); return; } var index = this.index, @@ -934,12 +934,12 @@ /** * move node down * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {Boolean} */ moveDown: function() { if (!this.parent) { - Kinetic.Util.warn('Node has no parent. moveDown function is ignored.'); + Konva.Util.warn('Node has no parent. moveDown function is ignored.'); return; } var index = this.index; @@ -954,12 +954,12 @@ /** * move node to the bottom of its siblings * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {Boolean} */ moveToBottom: function() { if (!this.parent) { - Kinetic.Util.warn('Node has no parent. moveToBottom function is ignored.'); + Konva.Util.warn('Node has no parent. moveToBottom function is ignored.'); return; } var index = this.index; @@ -974,13 +974,13 @@ /** * set zIndex relative to siblings * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Integer} zIndex - * @returns {Kinetic.Node} + * @returns {Konva.Node} */ setZIndex: function(zIndex) { if (!this.parent) { - Kinetic.Util.warn('Node has no parent. zIndex parameter is ignored.'); + Konva.Util.warn('Node has no parent. zIndex parameter is ignored.'); return; } var index = this.index; @@ -992,7 +992,7 @@ /** * get absolute opacity * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {Number} */ getAbsoluteOpacity: function() { @@ -1008,9 +1008,9 @@ /** * move node to another container * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Container} newContainer - * @returns {Kinetic.Node} + * @returns {Konva.Node} * @example * // move node from current layer into layer2 * node.moveTo(layer2); @@ -1026,11 +1026,11 @@ /** * convert Node into an object for serialization. Returns an object. * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {Object} */ toObject: function() { - var type = Kinetic.Util, + var type = Konva.Util, obj = {}, attrs = this.getAttrs(), key, val, getter, defaultValue; @@ -1059,7 +1059,7 @@ /** * convert Node into a JSON string. Returns a JSON string. * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {String}} */ toJSON: function() { @@ -1068,8 +1068,8 @@ /** * get parent container * @method - * @memberof Kinetic.Node.prototype - * @returns {Kinetic.Node} + * @memberof Konva.Node.prototype + * @returns {Konva.Node} */ getParent: function() { return this.parent; @@ -1077,8 +1077,8 @@ /** * get layer ancestor * @method - * @memberof Kinetic.Node.prototype - * @returns {Kinetic.Layer} + * @memberof Konva.Node.prototype + * @returns {Konva.Layer} */ getLayer: function() { var parent = this.getParent(); @@ -1087,8 +1087,8 @@ /** * get stage ancestor * @method - * @memberof Kinetic.Node.prototype - * @returns {Kinetic.Stage} + * @memberof Konva.Node.prototype + * @returns {Konva.Stage} */ getStage: function() { return this._getCache(STAGE, this._getStage); @@ -1105,12 +1105,12 @@ /** * fire event * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {String} eventType event type. can be a regular event, like click, mouseover, or mouseout, or it can be a custom event, like myCustomEvent * @param {Event} [evt] event object * @param {Boolean} [bubble] setting the value to false, or leaving it undefined, will result in the event * not bubbling. Setting the value to true will result in the event bubbling. - * @returns {Kinetic.Node} + * @returns {Konva.Node} * @example * // manually fire click event * node.fire('click'); @@ -1141,8 +1141,8 @@ * get absolute transform of the node which takes into * account its ancestor transforms * @method - * @memberof Kinetic.Node.prototype - * @returns {Kinetic.Transform} + * @memberof Konva.Node.prototype + * @returns {Konva.Transform} */ getAbsoluteTransform: function(top) { // if using an argument, we can't cache the result. @@ -1155,7 +1155,7 @@ } }, _getAbsoluteTransform: function(top) { - var at = new Kinetic.Transform(), + var at = new Konva.Transform(), transformsEnabled, trans; // start with stage and traverse downwards to self @@ -1175,17 +1175,17 @@ /** * get transform of the node * @method - * @memberof Kinetic.Node.prototype - * @returns {Kinetic.Transform} + * @memberof Konva.Node.prototype + * @returns {Konva.Transform} */ getTransform: function() { return this._getCache(TRANSFORM, this._getTransform); }, _getTransform: function() { - var m = new Kinetic.Transform(), + var m = new Konva.Transform(), x = this.getX(), y = this.getY(), - rotation = Kinetic.getAngle(this.getRotation()), + rotation = Konva.getAngle(this.getRotation()), scaleX = this.getScaleX(), scaleY = this.getScaleY(), skewX = this.getSkewX(), @@ -1216,9 +1216,9 @@ * the node properties with an object literal, enabling you to use an existing node as a template * for another node * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Object} obj override attrs - * @returns {Kinetic.Node} + * @returns {Konva.Node} * @example * // simple clone * var clone = node.clone(); @@ -1231,7 +1231,7 @@ clone: function(obj) { // instantiate new node var className = this.getClassName(), - attrs = Kinetic.Util.cloneObject(this.attrs), + attrs = Konva.Util.cloneObject(this.attrs), key, allListeners, len, n, listener; // filter black attrs for (var i in CLONE_BLACK_LIST) { @@ -1243,7 +1243,7 @@ attrs[key] = obj[key]; } - var node = new Kinetic[className](attrs); + var node = new Konva[className](attrs); // copy over listeners for(key in this.eventListeners) { allListeners = this.eventListeners[key]; @@ -1251,7 +1251,7 @@ for(n = 0; n < len; n++) { listener = allListeners[n]; /* - * don't include kinetic namespaced listeners because + * don't include konva namespaced listeners because * these are generated by the constructors */ if(listener.name.indexOf(KINETIC) < 0) { @@ -1270,7 +1270,7 @@ * specified, then "image/png" will result. For "image/jpeg", specify a quality * level as quality (range 0.0 - 1.0) * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Object} config * @param {String} [config.mimeType] can be "image/png" or "image/jpeg". * "image/png" is the default @@ -1291,7 +1291,7 @@ stage = this.getStage(), x = config.x || 0, y = config.y || 0, - canvas = new Kinetic.SceneCanvas({ + canvas = new Konva.SceneCanvas({ width: config.width || this.getWidth() || (stage ? stage.getWidth() : 0), height: config.height || this.getHeight() || (stage ? stage.getHeight() : 0), pixelRatio: 1 @@ -1314,7 +1314,7 @@ * method is asynchronous, a callback is required. toImage is most commonly used * to cache complex drawings as an image so that they don't have to constantly be redrawn * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Object} config * @param {Function} config.callback function executed when the composite has completed * @param {String} [config.mimeType] can be "image/png" or "image/jpeg". @@ -1334,7 +1334,7 @@ * }); */ toImage: function(config) { - Kinetic.Util._getImage(this.toDataURL(config), function(img) { + Konva.Util._getImage(this.toDataURL(config), function(img) { config.callback(img); }); }, @@ -1358,7 +1358,7 @@ /** * get class name, which may return Stage, Layer, Group, or shape class names like Rect, Circle, Text, etc. * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {String} */ getClassName: function() { @@ -1367,7 +1367,7 @@ /** * get the node type, which may return Stage, Layer, Group, or Node * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {String} */ getType: function() { @@ -1380,7 +1380,7 @@ } else if (this.parent) { return this.parent.getDragDistance(); } else { - return Kinetic.dragDistance; + return Konva.dragDistance; } }, _get: function(selector) { @@ -1393,10 +1393,10 @@ for(i = 0; i < evtListeners.length; i++) { evtName = evtListeners[i].name; // the following two conditions must be true in order to remove a handler: - // 1) the current event name cannot be kinetic unless the event name is kinetic - // this enables developers to force remove a kinetic specific listener for whatever reason + // 1) the current event name cannot be konva unless the event name is konva + // this enables developers to force remove a konva specific listener for whatever reason // 2) an event name is not specified, or if one is specified, it matches the current event name - if((evtName !== 'kinetic' || name === 'kinetic') && (!name || evtName === name)) { + if((evtName !== 'konva' || name === 'konva') && (!name || evtName === name)) { evtListeners.splice(i, 1); if(evtListeners.length === 0) { delete this.eventListeners[type]; @@ -1415,34 +1415,34 @@ setId: function(id) { var oldId = this.getId(); - Kinetic._removeId(oldId); - Kinetic._addId(this, id); + Konva._removeId(oldId); + Konva._addId(this, id); this._setAttr(ID, id); return this; }, setName: function(name) { var oldName = this.getName(); - Kinetic._removeName(oldName, this._id); - Kinetic._addName(this, name); + Konva._removeName(oldName, this._id); + Konva._addName(this, name); this._setAttr(NAME, name); return this; }, /** * set attr * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {String} attr * @param {*} val - * @returns {Kinetic.Node} + * @returns {Konva.Node} * @example * node.setAttr('x', 5); */ setAttr: function(attr, val) { - var method = SET + Kinetic.Util._capitalize(attr), + var method = SET + Konva.Util._capitalize(attr), func = this[method]; - if(Kinetic.Util._isFunction(func)) { + if(Konva.Util._isFunction(func)) { func.call(this, val); } // otherwise set directly @@ -1516,8 +1516,8 @@ /** * draw both scene and hit graphs. If the node being drawn is the stage, all of the layers will be cleared and redrawn * @method - * @memberof Kinetic.Node.prototype - * @returns {Kinetic.Node} + * @memberof Konva.Node.prototype + * @returns {Konva.Node} */ draw: function() { this.drawScene(); @@ -1534,16 +1534,16 @@ * shapes after loading the stage and set these properties via on(), setDrawFunc(), * and setImage() methods * @method - * @memberof Kinetic.Node + * @memberof Konva.Node * @param {String} json * @param {Element} [container] optional container dom element used only if you're * creating a stage node */ - Kinetic.Node.create = function(json, container) { + Konva.Node.create = function(json, container) { return this._createNode(JSON.parse(json), container); }; - Kinetic.Node._createNode = function(obj, container) { - var className = Kinetic.Node.prototype.getClassName.call(obj), + Konva.Node._createNode = function(obj, container) { + var className = Konva.Node.prototype.getClassName.call(obj), children = obj.children, no, len, n; @@ -1552,7 +1552,7 @@ obj.attrs.container = container; } - no = new Kinetic[className](obj.attrs); + no = new Konva[className](obj.attrs); if(children) { len = children.length; for(n = 0; n < len; n++) { @@ -1566,12 +1566,12 @@ // =========================== add getters setters =========================== - Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node, 'position'); + Konva.Factory.addOverloadedGetterSetter(Konva.Node, 'position'); /** * get/set node position relative to parent * @name position * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Object} pos * @param {Number} pos.x * @param {Number} pos.y @@ -1587,13 +1587,13 @@ * }); */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'x', 0); + Konva.Factory.addGetterSetter(Konva.Node, 'x', 0); /** * get/set x position * @name x * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Number} x * @returns {Object} * @example @@ -1604,13 +1604,13 @@ * node.x(5); */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'y', 0); + Konva.Factory.addGetterSetter(Konva.Node, 'y', 0); /** * get/set y position * @name y * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Number} y * @returns {Integer} * @example @@ -1621,7 +1621,7 @@ * node.y(5); */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'opacity', 1); + Konva.Factory.addGetterSetter(Konva.Node, 'opacity', 1); /** * get/set opacity. Opacity values range from 0 to 1. @@ -1629,7 +1629,7 @@ * with an opacity of 1 is fully opaque * @name opacity * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Object} opacity * @returns {Number} * @example @@ -1640,14 +1640,14 @@ * node.opacity(0.5); */ - Kinetic.Factory.addGetter(Kinetic.Node, 'name'); - Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node, 'name'); + Konva.Factory.addGetter(Konva.Node, 'name'); + Konva.Factory.addOverloadedGetterSetter(Konva.Node, 'name'); /** * get/set name * @name name * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {String} name * @returns {String} * @example @@ -1661,14 +1661,14 @@ * node.name('foo bar'); */ - Kinetic.Factory.addGetter(Kinetic.Node, 'id'); - Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node, 'id'); + Konva.Factory.addGetter(Konva.Node, 'id'); + Konva.Factory.addOverloadedGetterSetter(Konva.Node, 'id'); /** * get/set id * @name id * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {String} id * @returns {String} * @example @@ -1679,13 +1679,13 @@ * node.id('foo'); */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'rotation', 0); + Konva.Factory.addGetterSetter(Konva.Node, 'rotation', 0); /** * get/set rotation in degrees * @name rotation * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Number} rotation * @returns {Number} * @example @@ -1696,7 +1696,7 @@ * node.rotation(45); */ - Kinetic.Factory.addComponentsGetterSetter(Kinetic.Node, 'scale', ['x', 'y']); + Konva.Factory.addComponentsGetterSetter(Konva.Node, 'scale', ['x', 'y']); /** * get/set scale @@ -1705,7 +1705,7 @@ * @param {Number} scale.x * @param {Number} scale.y * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {Object} * @example * // get scale @@ -1718,14 +1718,14 @@ * }); */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'scaleX', 1); + Konva.Factory.addGetterSetter(Konva.Node, 'scaleX', 1); /** * get/set scale x * @name scaleX * @param {Number} x * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {Number} * @example * // get scale x @@ -1735,14 +1735,14 @@ * node.scaleX(2); */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'scaleY', 1); + Konva.Factory.addGetterSetter(Konva.Node, 'scaleY', 1); /** * get/set scale y * @name scaleY * @param {Number} y * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {Number} * @example * // get scale y @@ -1752,7 +1752,7 @@ * node.scaleY(2); */ - Kinetic.Factory.addComponentsGetterSetter(Kinetic.Node, 'skew', ['x', 'y']); + Konva.Factory.addComponentsGetterSetter(Konva.Node, 'skew', ['x', 'y']); /** * get/set skew @@ -1761,7 +1761,7 @@ * @param {Number} skew.x * @param {Number} skew.y * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {Object} * @example * // get skew @@ -1774,14 +1774,14 @@ * }); */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'skewX', 0); + Konva.Factory.addGetterSetter(Konva.Node, 'skewX', 0); /** * get/set skew x * @name skewX * @param {Number} x * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {Number} * @example * // get skew x @@ -1791,14 +1791,14 @@ * node.skewX(3); */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'skewY', 0); + Konva.Factory.addGetterSetter(Konva.Node, 'skewY', 0); /** * get/set skew y * @name skewY * @param {Number} y * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @returns {Number} * @example * // get skew y @@ -1808,12 +1808,12 @@ * node.skewY(3); */ - Kinetic.Factory.addComponentsGetterSetter(Kinetic.Node, 'offset', ['x', 'y']); + Konva.Factory.addComponentsGetterSetter(Konva.Node, 'offset', ['x', 'y']); /** * get/set offset. Offsets the default position and rotation point * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Object} offset * @param {Number} offset.x * @param {Number} offset.y @@ -1829,13 +1829,13 @@ * }); */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'offsetX', 0); + Konva.Factory.addGetterSetter(Konva.Node, 'offsetX', 0); /** * get/set offset x * @name offsetX * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Number} x * @returns {Number} * @example @@ -1846,13 +1846,13 @@ * node.offsetX(3); */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'offsetY', 0); + Konva.Factory.addGetterSetter(Konva.Node, 'offsetY', 0); /** * get/set offset y * @name offsetY * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Number} y * @returns {Number} * @example @@ -1863,14 +1863,14 @@ * node.offsetY(3); */ - Kinetic.Factory.addSetter(Kinetic.Node, 'dragDistance'); - Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node, 'dragDistance'); + Konva.Factory.addSetter(Konva.Node, 'dragDistance'); + Konva.Factory.addOverloadedGetterSetter(Konva.Node, 'dragDistance'); /** * get/set drag distance * @name dragDistance * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Number} distance * @returns {Number} * @example @@ -1881,17 +1881,17 @@ * // node starts dragging only if pointer moved more then 3 pixels * node.dragDistance(3); * // or set globally - * Kinetic.dragDistance = 3; + * Konva.dragDistance = 3; */ - Kinetic.Factory.addSetter(Kinetic.Node, 'width', 0); - Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node, 'width'); + Konva.Factory.addSetter(Konva.Node, 'width', 0); + Konva.Factory.addOverloadedGetterSetter(Konva.Node, 'width'); /** * get/set width * @name width * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Number} width * @returns {Number} * @example @@ -1902,13 +1902,13 @@ * node.width(100); */ - Kinetic.Factory.addSetter(Kinetic.Node, 'height', 0); - Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node, 'height'); + Konva.Factory.addSetter(Konva.Node, 'height', 0); + Konva.Factory.addOverloadedGetterSetter(Konva.Node, 'height'); /** * get/set height * @name height * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Number} height * @returns {Number} * @example @@ -1919,13 +1919,13 @@ * node.height(100); */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'listening', 'inherit'); + Konva.Factory.addGetterSetter(Konva.Node, 'listening', 'inherit'); /** * get/set listenig attr. If you need to determine if a node is listening or not * by taking into account its parents, use the isListening() method * @name listening * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Boolean|String} listening Can be "inherit", true, or false. The default is "inherit". * @returns {Boolean|String} * @example @@ -1942,12 +1942,12 @@ * node.listening('inherit'); */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'filters', undefined, function(val) {this._filterUpToDate = false;return val;}); + Konva.Factory.addGetterSetter(Konva.Node, 'filters', undefined, function(val) {this._filterUpToDate = false;return val;}); /** * get/set filters. Filters are applied to cached canvases * @name filters * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Array} filters array of filters * @returns {Array} * @example @@ -1956,25 +1956,25 @@ * * // set a single filter * node.cache(); - * node.filters([Kinetic.Filters.Blur]); + * node.filters([Konva.Filters.Blur]); * * // set multiple filters * node.cache(); * node.filters([ - * Kinetic.Filters.Blur, - * Kinetic.Filters.Sepia, - * Kinetic.Filters.Invert + * Konva.Filters.Blur, + * Konva.Filters.Sepia, + * Konva.Filters.Invert * ]); */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'visible', 'inherit'); + Konva.Factory.addGetterSetter(Konva.Node, 'visible', 'inherit'); /** * get/set visible attr. Can be "inherit", true, or false. The default is "inherit". * If you need to determine if a node is visible or not * by taking into account its parents, use the isVisible() method * @name visible * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Boolean|String} visible * @returns {Boolean|String} * @example @@ -1991,14 +1991,14 @@ * node.visible('inherit'); */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'transformsEnabled', 'all'); + Konva.Factory.addGetterSetter(Konva.Node, 'transformsEnabled', 'all'); /** * get/set transforms that are enabled. Can be "all", "none", or "position". The default * is "all" * @name transformsEnabled * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {String} enabled * @returns {String} * @example @@ -2015,7 +2015,7 @@ * get/set node size * @name size * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Object} size * @param {Number} size.width * @param {Number} size.height @@ -2032,13 +2032,13 @@ * height: 200 * }); */ - Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node, 'size'); + Konva.Factory.addOverloadedGetterSetter(Konva.Node, 'size'); - Kinetic.Factory.backCompat(Kinetic.Node, { + Konva.Factory.backCompat(Konva.Node, { rotateDeg: 'rotate', setRotationDeg: 'setRotation', getRotationDeg: 'getRotation' }); - Kinetic.Collection.mapMethods(Kinetic.Node); + Konva.Collection.mapMethods(Konva.Node); })(); diff --git a/src/Shape.js b/src/Shape.js index aefa3734..af57f680 100644 --- a/src/Shape.js +++ b/src/Shape.js @@ -18,7 +18,7 @@ this._clearCache(HAS_SHADOW); } - Kinetic.Util.addMethods(Kinetic.Shape, { + Konva.Util.addMethods(Konva.Shape, { __init: function(config) { this.nodeType = 'Shape'; this._fillFunc = _fillFunc; @@ -27,11 +27,11 @@ this._strokeFuncHit = _strokeFuncHit; // set colorKey - var shapes = Kinetic.shapes; + var shapes = Konva.shapes; var key; while(true) { - key = Kinetic.Util.getRandomColor(); + key = Konva.Util.getRandomColor(); if(key && !( key in shapes)) { break; } @@ -41,9 +41,9 @@ shapes[key] = this; // call super constructor - Kinetic.Node.call(this, config); + Konva.Node.call(this, config); - this.on('shadowColorChange.kinetic shadowBlurChange.kinetic shadowOffsetChange.kinetic shadowOpacityChange.kinetic shadowEnabledChange.kinetic', _clearHasShadowCache); + this.on('shadowColorChange.konva shadowBlurChange.konva shadowOffsetChange.konva shadowOpacityChange.konva shadowEnabledChange.konva', _clearHasShadowCache); }, hasChildren: function() { return false; @@ -54,8 +54,8 @@ /** * get canvas context tied to the layer * @method - * @memberof Kinetic.Shape.prototype - * @returns {Kinetic.Context} + * @memberof Konva.Shape.prototype + * @returns {Konva.Context} */ getContext: function() { return this.getLayer().getContext(); @@ -63,8 +63,8 @@ /** * get canvas renderer tied to the layer. Note that this returns a canvas renderer, not a canvas element * @method - * @memberof Kinetic.Shape.prototype - * @returns {Kinetic.Canvas} + * @memberof Konva.Shape.prototype + * @returns {Konva.Canvas} */ getCanvas: function() { return this.getLayer().getCanvas(); @@ -72,7 +72,7 @@ /** * returns whether or not a shadow will be rendered * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @returns {Boolean} */ hasShadow: function() { @@ -84,7 +84,7 @@ /** * returns whether or not the shape will be filled * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @returns {Boolean} */ hasFill: function() { @@ -93,7 +93,7 @@ /** * returns whether or not the shape will be stroked * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @returns {Boolean} */ hasStroke: function() { @@ -102,10 +102,10 @@ /** * determines if point is in the shape, regardless if other shapes are on top of it. Note: because * this method clears a temporary canvas and then redraws the shape, it performs very poorly if executed many times - * consecutively. Please use the {@link Kinetic.Stage#getIntersection} method if at all possible + * consecutively. Please use the {@link Konva.Stage#getIntersection} method if at all possible * because it performs much better * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Object} point * @param {Number} point.x * @param {Number} point.y @@ -123,8 +123,8 @@ }, // extends Node.prototype.destroy destroy: function() { - Kinetic.Node.prototype.destroy.call(this); - delete Kinetic.shapes[this.colorKey]; + Konva.Node.prototype.destroy.call(this); + delete Konva.shapes[this.colorKey]; }, _useBufferCanvas: function() { // return false; @@ -263,11 +263,11 @@ /** * draw hit graph using the cached scene canvas * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Integer} alphaThreshold alpha channel threshold that determines whether or not * a pixel should be drawn onto the hit graph. Must be a value between 0 and 255. * The default is 0 - * @returns {Kinetic.Shape} + * @returns {Konva.Shape} * @example * shape.cache(); * shape.drawHitFromCache(); @@ -291,7 +291,7 @@ hitImageData = hitContext.getImageData(0, 0, width, height); hitData = hitImageData.data; len = sceneData.length; - rgbColorKey = Kinetic.Util._hexToRgb(this.colorKey); + rgbColorKey = Konva.Util._hexToRgb(this.colorKey); // replace non transparent pixels with color key for(i = 0; i < len; i += 4) { @@ -307,22 +307,22 @@ hitContext.putImageData(hitImageData, 0, 0); } catch(e) { - Kinetic.Util.warn('Unable to draw hit graph from cached scene canvas. ' + e.message); + Konva.Util.warn('Unable to draw hit graph from cached scene canvas. ' + e.message); } return this; } }); - Kinetic.Util.extend(Kinetic.Shape, Kinetic.Node); + Konva.Util.extend(Konva.Shape, Konva.Node); // add getters and setters - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'stroke'); + Konva.Factory.addGetterSetter(Konva.Shape, 'stroke'); /** * get/set stroke color * @name stroke * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {String} color * @returns {String} * @example @@ -342,13 +342,13 @@ * shape.stroke('rgba(0,255,0,0.5'); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'strokeRed', 0, Kinetic.Validators.RGBComponent); + Konva.Factory.addGetterSetter(Konva.Shape, 'strokeRed', 0, Konva.Validators.RGBComponent); /** * get/set stroke red component * @name strokeRed * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Integer} red * @returns {Integer} * @example @@ -359,13 +359,13 @@ * shape.strokeRed(0); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'strokeGreen', 0, Kinetic.Validators.RGBComponent); + Konva.Factory.addGetterSetter(Konva.Shape, 'strokeGreen', 0, Konva.Validators.RGBComponent); /** * get/set stroke green component * @name strokeGreen * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Integer} green * @returns {Integer} * @example @@ -376,13 +376,13 @@ * shape.strokeGreen(255); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'strokeBlue', 0, Kinetic.Validators.RGBComponent); + Konva.Factory.addGetterSetter(Konva.Shape, 'strokeBlue', 0, Konva.Validators.RGBComponent); /** * get/set stroke blue component * @name strokeBlue * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Integer} blue * @returns {Integer} * @example @@ -393,14 +393,14 @@ * shape.strokeBlue(0); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'strokeAlpha', 1, Kinetic.Validators.alphaComponent); + Konva.Factory.addGetterSetter(Konva.Shape, 'strokeAlpha', 1, Konva.Validators.alphaComponent); /** * get/set stroke alpha component. Alpha is a real number between 0 and 1. The default * is 1. * @name strokeAlpha * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Number} alpha * @returns {Number} * @example @@ -411,13 +411,13 @@ * shape.strokeAlpha(0.5); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'strokeWidth', 2); + Konva.Factory.addGetterSetter(Konva.Shape, 'strokeWidth', 2); /** * get/set stroke width * @name strokeWidth * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Number} strokeWidth * @returns {Number} * @example @@ -428,14 +428,14 @@ * shape.strokeWidth(); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'lineJoin'); + Konva.Factory.addGetterSetter(Konva.Shape, 'lineJoin'); /** * get/set line join. Can be miter, round, or bevel. The * default is miter * @name lineJoin * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {String} lineJoin * @returns {String} * @example @@ -446,13 +446,13 @@ * shape.lineJoin('round'); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'lineCap'); + Konva.Factory.addGetterSetter(Konva.Shape, 'lineCap'); /** * get/set line cap. Can be butt, round, or square * @name lineCap * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {String} lineCap * @returns {String} * @example @@ -463,13 +463,13 @@ * shape.lineCap('round'); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'sceneFunc'); + Konva.Factory.addGetterSetter(Konva.Shape, 'sceneFunc'); /** * get/set scene draw function * @name sceneFunc * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Function} drawFunc drawing function * @returns {Function} * @example @@ -485,13 +485,13 @@ * }); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'hitFunc'); + Konva.Factory.addGetterSetter(Konva.Shape, 'hitFunc'); /** * get/set hit draw function * @name hitFunc * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Function} drawFunc drawing function * @returns {Function} * @example @@ -507,13 +507,13 @@ * }); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'dash'); + Konva.Factory.addGetterSetter(Konva.Shape, 'dash'); /** * get/set dash array for stroke. * @name dash * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Array} dash * @returns {Array} * @example @@ -527,13 +527,13 @@ */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'shadowColor'); + Konva.Factory.addGetterSetter(Konva.Shape, 'shadowColor'); /** * get/set shadow color * @name shadowColor * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {String} color * @returns {String} * @example @@ -553,13 +553,13 @@ * shape.shadowColor('rgba(0,255,0,0.5'); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'shadowRed', 0, Kinetic.Validators.RGBComponent); + Konva.Factory.addGetterSetter(Konva.Shape, 'shadowRed', 0, Konva.Validators.RGBComponent); /** * get/set shadow red component * @name shadowRed * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Integer} red * @returns {Integer} * @example @@ -570,13 +570,13 @@ * shape.shadowRed(0); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'shadowGreen', 0, Kinetic.Validators.RGBComponent); + Konva.Factory.addGetterSetter(Konva.Shape, 'shadowGreen', 0, Konva.Validators.RGBComponent); /** * get/set shadow green component * @name shadowGreen * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Integer} green * @returns {Integer} * @example @@ -587,13 +587,13 @@ * shape.shadowGreen(255); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'shadowBlue', 0, Kinetic.Validators.RGBComponent); + Konva.Factory.addGetterSetter(Konva.Shape, 'shadowBlue', 0, Konva.Validators.RGBComponent); /** * get/set shadow blue component * @name shadowBlue * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Integer} blue * @returns {Integer} * @example @@ -604,14 +604,14 @@ * shape.shadowBlue(0); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'shadowAlpha', 1, Kinetic.Validators.alphaComponent); + Konva.Factory.addGetterSetter(Konva.Shape, 'shadowAlpha', 1, Konva.Validators.alphaComponent); /** * get/set shadow alpha component. Alpha is a real number between 0 and 1. The default * is 1. * @name shadowAlpha * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Number} alpha * @returns {Number} * @example @@ -622,13 +622,13 @@ * shape.shadowAlpha(0.5); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'shadowBlur'); + Konva.Factory.addGetterSetter(Konva.Shape, 'shadowBlur'); /** * get/set shadow blur * @name shadowBlur * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Number} blur * @returns {Number} * @example @@ -639,13 +639,13 @@ * shape.shadowBlur(10); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'shadowOpacity'); + Konva.Factory.addGetterSetter(Konva.Shape, 'shadowOpacity'); /** * get/set shadow opacity. must be a value between 0 and 1 * @name shadowOpacity * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Number} opacity * @returns {Number} * @example @@ -656,13 +656,13 @@ * shape.shadowOpacity(0.5); */ - Kinetic.Factory.addComponentsGetterSetter(Kinetic.Shape, 'shadowOffset', ['x', 'y']); + Konva.Factory.addComponentsGetterSetter(Konva.Shape, 'shadowOffset', ['x', 'y']); /** * get/set shadow offset * @name shadowOffset * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Object} offset * @param {Number} offset.x * @param {Number} offset.y @@ -678,13 +678,13 @@ * }); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'shadowOffsetX', 0); + Konva.Factory.addGetterSetter(Konva.Shape, 'shadowOffsetX', 0); /** * get/set shadow offset x * @name shadowOffsetX * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Number} x * @returns {Number} * @example @@ -695,13 +695,13 @@ * shape.shadowOffsetX(5); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'shadowOffsetY', 0); + Konva.Factory.addGetterSetter(Konva.Shape, 'shadowOffsetY', 0); /** * get/set shadow offset y * @name shadowOffsetY * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Number} y * @returns {Number} * @example @@ -712,13 +712,13 @@ * shape.shadowOffsetY(5); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillPatternImage'); + Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternImage'); /** * get/set fill pattern image * @name fillPatternImage * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Image} image object * @returns {Image} * @example @@ -733,13 +733,13 @@ * imageObj.src = 'path/to/image/jpg'; */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fill'); + Konva.Factory.addGetterSetter(Konva.Shape, 'fill'); /** * get/set fill color * @name fill * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {String} color * @returns {String} * @example @@ -762,13 +762,13 @@ * shape.fill(null); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillRed', 0, Kinetic.Validators.RGBComponent); + Konva.Factory.addGetterSetter(Konva.Shape, 'fillRed', 0, Konva.Validators.RGBComponent); /** * get/set fill red component * @name fillRed * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Integer} red * @returns {Integer} * @example @@ -779,13 +779,13 @@ * shape.fillRed(0); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillGreen', 0, Kinetic.Validators.RGBComponent); + Konva.Factory.addGetterSetter(Konva.Shape, 'fillGreen', 0, Konva.Validators.RGBComponent); /** * get/set fill green component * @name fillGreen * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Integer} green * @returns {Integer} * @example @@ -796,13 +796,13 @@ * shape.fillGreen(255); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillBlue', 0, Kinetic.Validators.RGBComponent); + Konva.Factory.addGetterSetter(Konva.Shape, 'fillBlue', 0, Konva.Validators.RGBComponent); /** * get/set fill blue component * @name fillBlue * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Integer} blue * @returns {Integer} * @example @@ -813,14 +813,14 @@ * shape.fillBlue(0); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillAlpha', 1, Kinetic.Validators.alphaComponent); + Konva.Factory.addGetterSetter(Konva.Shape, 'fillAlpha', 1, Konva.Validators.alphaComponent); /** * get/set fill alpha component. Alpha is a real number between 0 and 1. The default * is 1. * @name fillAlpha * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Number} alpha * @returns {Number} * @example @@ -832,13 +832,13 @@ */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillPatternX', 0); + Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternX', 0); /** * get/set fill pattern x * @name fillPatternX * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Number} x * @returns {Number} * @example @@ -849,13 +849,13 @@ * shape.fillPatternX(20); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillPatternY', 0); + Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternY', 0); /** * get/set fill pattern y * @name fillPatternY * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Number} y * @returns {Number} * @example @@ -866,13 +866,13 @@ * shape.fillPatternY(20); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillLinearGradientColorStops'); + Konva.Factory.addGetterSetter(Konva.Shape, 'fillLinearGradientColorStops'); /** * get/set fill linear gradient color stops * @name fillLinearGradientColorStops * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Array} colorStops * @returns {Array} colorStops * @example @@ -884,13 +884,13 @@ * shape.fillLinearGradientColorStops(0, 'red', 0.5, 'blue', 1, 'green'); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillRadialGradientStartRadius', 0); + Konva.Factory.addGetterSetter(Konva.Shape, 'fillRadialGradientStartRadius', 0); /** * get/set fill radial gradient start radius * @name fillRadialGradientStartRadius * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Number} radius * @returns {Number} * @example @@ -901,13 +901,13 @@ * shape.fillRadialGradientStartRadius(0); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillRadialGradientEndRadius', 0); + Konva.Factory.addGetterSetter(Konva.Shape, 'fillRadialGradientEndRadius', 0); /** * get/set fill radial gradient end radius * @name fillRadialGradientEndRadius * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Number} radius * @returns {Number} * @example @@ -918,13 +918,13 @@ * shape.fillRadialGradientEndRadius(100); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillRadialGradientColorStops'); + Konva.Factory.addGetterSetter(Konva.Shape, 'fillRadialGradientColorStops'); /** * get/set fill radial gradient color stops * @name fillRadialGradientColorStops * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Number} colorStops * @returns {Array} * @example @@ -936,13 +936,13 @@ * shape.fillRadialGradientColorStops(0, 'red', 0.5, 'blue', 1, 'green'); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillPatternRepeat', 'repeat'); + Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternRepeat', 'repeat'); /** * get/set fill pattern repeat. Can be 'repeat', 'repeat-x', 'repeat-y', or 'no-repeat'. The default is 'repeat' * @name fillPatternRepeat * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {String} repeat * @returns {String} * @example @@ -956,13 +956,13 @@ * shape.fillPatternRepeat('no repeat'); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillEnabled', true); + Konva.Factory.addGetterSetter(Konva.Shape, 'fillEnabled', true); /** * get/set fill enabled flag * @name fillEnabled * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Boolean} enabled * @returns {Boolean} * @example @@ -976,13 +976,13 @@ * shape.fillEnabled(true); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'strokeEnabled', true); + Konva.Factory.addGetterSetter(Konva.Shape, 'strokeEnabled', true); /** * get/set stroke enabled flag * @name strokeEnabled * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Boolean} enabled * @returns {Boolean} * @example @@ -996,13 +996,13 @@ * shape.strokeEnabled(true); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'shadowEnabled', true); + Konva.Factory.addGetterSetter(Konva.Shape, 'shadowEnabled', true); /** * get/set shadow enabled flag * @name shadowEnabled * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Boolean} enabled * @returns {Boolean} * @example @@ -1016,13 +1016,13 @@ * shape.shadowEnabled(true); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'dashEnabled', true); + Konva.Factory.addGetterSetter(Konva.Shape, 'dashEnabled', true); /** * get/set dash enabled flag * @name dashEnabled * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Boolean} enabled * @returns {Boolean} * @example @@ -1036,13 +1036,13 @@ * shape.dashEnabled(true); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'strokeScaleEnabled', true); + Konva.Factory.addGetterSetter(Konva.Shape, 'strokeScaleEnabled', true); /** * get/set strokeScale enabled flag * @name strokeScaleEnabled * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Boolean} enabled * @returns {Boolean} * @example @@ -1056,14 +1056,14 @@ * shape.strokeScaleEnabled(true); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillPriority', 'color'); + Konva.Factory.addGetterSetter(Konva.Shape, 'fillPriority', 'color'); /** * get/set fill priority. can be color, pattern, linear-gradient, or radial-gradient. The default is color. * This is handy if you want to toggle between different fill types. * @name fillPriority * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {String} priority * @returns {String} * @example @@ -1074,13 +1074,13 @@ * shape.fillPriority('linear-gradient'); */ - Kinetic.Factory.addComponentsGetterSetter(Kinetic.Shape, 'fillPatternOffset', ['x', 'y']); + Konva.Factory.addComponentsGetterSetter(Konva.Shape, 'fillPatternOffset', ['x', 'y']); /** * get/set fill pattern offset * @name fillPatternOffset * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Object} offset * @param {Number} offset.x * @param {Number} offset.y @@ -1097,12 +1097,12 @@ */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillPatternOffsetX', 0); + Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternOffsetX', 0); /** * get/set fill pattern offset x * @name fillPatternOffsetX * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Number} x * @returns {Number} * @example @@ -1113,12 +1113,12 @@ * shape.fillPatternOffsetX(20); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillPatternOffsetY', 0); + Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternOffsetY', 0); /** * get/set fill pattern offset y * @name fillPatternOffsetY * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Number} y * @returns {Number} * @example @@ -1129,13 +1129,13 @@ * shape.fillPatternOffsetY(10); */ - Kinetic.Factory.addComponentsGetterSetter(Kinetic.Shape, 'fillPatternScale', ['x', 'y']); + Konva.Factory.addComponentsGetterSetter(Konva.Shape, 'fillPatternScale', ['x', 'y']); /** * get/set fill pattern scale * @name fillPatternScale * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Object} scale * @param {Number} scale.x * @param {Number} scale.y @@ -1152,12 +1152,12 @@ */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillPatternScaleX', 1); + Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternScaleX', 1); /** * get/set fill pattern scale x * @name fillPatternScaleX * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Number} x * @returns {Number} * @example @@ -1168,12 +1168,12 @@ * shape.fillPatternScaleX(2); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillPatternScaleY', 1); + Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternScaleY', 1); /** * get/set fill pattern scale y * @name fillPatternScaleY * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Number} y * @returns {Number} * @example @@ -1184,13 +1184,13 @@ * shape.fillPatternScaleY(2); */ - Kinetic.Factory.addComponentsGetterSetter(Kinetic.Shape, 'fillLinearGradientStartPoint', ['x', 'y']); + Konva.Factory.addComponentsGetterSetter(Konva.Shape, 'fillLinearGradientStartPoint', ['x', 'y']); /** * get/set fill linear gradient start point * @name fillLinearGradientStartPoint * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Object} startPoint * @param {Number} startPoint.x * @param {Number} startPoint.y @@ -1206,12 +1206,12 @@ * }); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillLinearGradientStartPointX', 0); + Konva.Factory.addGetterSetter(Konva.Shape, 'fillLinearGradientStartPointX', 0); /** * get/set fill linear gradient start point x * @name fillLinearGradientStartPointX * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Number} x * @returns {Number} * @example @@ -1222,12 +1222,12 @@ * shape.fillLinearGradientStartPointX(20); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillLinearGradientStartPointY', 0); + Konva.Factory.addGetterSetter(Konva.Shape, 'fillLinearGradientStartPointY', 0); /** * get/set fill linear gradient start point y * @name fillLinearGradientStartPointY * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Number} y * @returns {Number} * @example @@ -1238,13 +1238,13 @@ * shape.fillLinearGradientStartPointY(20); */ - Kinetic.Factory.addComponentsGetterSetter(Kinetic.Shape, 'fillLinearGradientEndPoint', ['x', 'y']); + Konva.Factory.addComponentsGetterSetter(Konva.Shape, 'fillLinearGradientEndPoint', ['x', 'y']); /** * get/set fill linear gradient end point * @name fillLinearGradientEndPoint * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Object} endPoint * @param {Number} endPoint.x * @param {Number} endPoint.y @@ -1260,12 +1260,12 @@ * }); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillLinearGradientEndPointX', 0); + Konva.Factory.addGetterSetter(Konva.Shape, 'fillLinearGradientEndPointX', 0); /** * get/set fill linear gradient end point x * @name fillLinearGradientEndPointX * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Number} x * @returns {Number} * @example @@ -1276,12 +1276,12 @@ * shape.fillLinearGradientEndPointX(20); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillLinearGradientEndPointY', 0); + Konva.Factory.addGetterSetter(Konva.Shape, 'fillLinearGradientEndPointY', 0); /** * get/set fill linear gradient end point y * @name fillLinearGradientEndPointY * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Number} y * @returns {Number} * @example @@ -1292,13 +1292,13 @@ * shape.fillLinearGradientEndPointY(20); */ - Kinetic.Factory.addComponentsGetterSetter(Kinetic.Shape, 'fillRadialGradientStartPoint', ['x', 'y']); + Konva.Factory.addComponentsGetterSetter(Konva.Shape, 'fillRadialGradientStartPoint', ['x', 'y']); /** * get/set fill radial gradient start point * @name fillRadialGradientStartPoint * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Object} startPoint * @param {Number} startPoint.x * @param {Number} startPoint.y @@ -1314,12 +1314,12 @@ * }); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillRadialGradientStartPointX', 0); + Konva.Factory.addGetterSetter(Konva.Shape, 'fillRadialGradientStartPointX', 0); /** * get/set fill radial gradient start point x * @name fillRadialGradientStartPointX * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Number} x * @returns {Number} * @example @@ -1330,12 +1330,12 @@ * shape.fillRadialGradientStartPointX(20); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillRadialGradientStartPointY', 0); + Konva.Factory.addGetterSetter(Konva.Shape, 'fillRadialGradientStartPointY', 0); /** * get/set fill radial gradient start point y * @name fillRadialGradientStartPointY * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Number} y * @returns {Number} * @example @@ -1346,13 +1346,13 @@ * shape.fillRadialGradientStartPointY(20); */ - Kinetic.Factory.addComponentsGetterSetter(Kinetic.Shape, 'fillRadialGradientEndPoint', ['x', 'y']); + Konva.Factory.addComponentsGetterSetter(Konva.Shape, 'fillRadialGradientEndPoint', ['x', 'y']); /** * get/set fill radial gradient end point * @name fillRadialGradientEndPoint * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Object} endPoint * @param {Number} endPoint.x * @param {Number} endPoint.y @@ -1368,12 +1368,12 @@ * }); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillRadialGradientEndPointX', 0); + Konva.Factory.addGetterSetter(Konva.Shape, 'fillRadialGradientEndPointX', 0); /** * get/set fill radial gradient end point x * @name fillRadialGradientEndPointX * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Number} x * @returns {Number} * @example @@ -1384,12 +1384,12 @@ * shape.fillRadialGradientEndPointX(20); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillRadialGradientEndPointY', 0); + Konva.Factory.addGetterSetter(Konva.Shape, 'fillRadialGradientEndPointY', 0); /** * get/set fill radial gradient end point y * @name fillRadialGradientEndPointY * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Number} y * @returns {Number} * @example @@ -1400,15 +1400,15 @@ * shape.fillRadialGradientEndPointY(20); */ - Kinetic.Factory.addGetterSetter(Kinetic.Shape, 'fillPatternRotation', 0); + Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternRotation', 0); /** * get/set fill pattern rotation in degrees * @name fillPatternRotation * @method - * @memberof Kinetic.Shape.prototype + * @memberof Konva.Shape.prototype * @param {Number} rotation - * @returns {Kinetic.Shape} + * @returns {Konva.Shape} * @example * // get fill pattern rotation * var patternRotation = shape.fillPatternRotation(); @@ -1418,7 +1418,7 @@ */ - Kinetic.Factory.backCompat(Kinetic.Shape, { + Konva.Factory.backCompat(Konva.Shape, { dashArray: 'dash', getDashArray: 'getDash', setDashArray: 'getDash', @@ -1432,5 +1432,5 @@ setDrawHitFunc: 'setHitFunc' }); - Kinetic.Collection.mapMethods(Kinetic.Shape); + Konva.Collection.mapMethods(Konva.Shape); })(); diff --git a/src/Stage.js b/src/Stage.js index 3d4f49e2..67c0bf30 100644 --- a/src/Stage.js +++ b/src/Stage.js @@ -38,7 +38,7 @@ DIV = 'div', RELATIVE = 'relative', INLINE_BLOCK = 'inline-block', - KINETICJS_CONTENT = 'kineticjs-content', + KONVA_CONTENT = 'konvajs-content', SPACE = ' ', UNDERSCORE = '_', CONTAINER = 'container', @@ -54,32 +54,32 @@ }, false); } - Kinetic.Util.addMethods(Kinetic.Stage, { + Konva.Util.addMethods(Konva.Stage, { ___init: function(config) { this.nodeType = STAGE; // call super constructor - Kinetic.Container.call(this, config); - this._id = Kinetic.idCounter++; + Konva.Container.call(this, config); + this._id = Konva.idCounter++; this._buildDOM(); this._bindContentEvents(); this._enableNestedTransforms = false; - Kinetic.stages.push(this); + Konva.stages.push(this); }, _validateAdd: function(child) { if (child.getType() !== 'Layer') { - Kinetic.Util.error('You may only add layers to the stage.'); + Konva.Util.error('You may only add layers to the stage.'); } }, /** * set container dom element which contains the stage wrapper div element * @method - * @memberof Kinetic.Stage.prototype + * @memberof Konva.Stage.prototype * @param {DomElement} container can pass in a dom element or id string */ setContainer: function(container) { if( typeof container === STRING) { var id = container; - container = Kinetic.document.getElementById(container); + container = Konva.document.getElementById(container); if (!container) { throw 'Can not find container in document with id ' + id; } @@ -91,49 +91,49 @@ return true; }, draw: function() { - Kinetic.Node.prototype.draw.call(this); + Konva.Node.prototype.draw.call(this); return this; }, /** * draw layer scene graphs * @name draw * @method - * @memberof Kinetic.Stage.prototype + * @memberof Konva.Stage.prototype */ /** * draw layer hit graphs * @name drawHit * @method - * @memberof Kinetic.Stage.prototype + * @memberof Konva.Stage.prototype */ /** * set height * @method - * @memberof Kinetic.Stage.prototype + * @memberof Konva.Stage.prototype * @param {Number} height */ setHeight: function(height) { - Kinetic.Node.prototype.setHeight.call(this, height); + Konva.Node.prototype.setHeight.call(this, height); this._resizeDOM(); return this; }, /** * set width * @method - * @memberof Kinetic.Stage.prototype + * @memberof Konva.Stage.prototype * @param {Number} width */ setWidth: function(width) { - Kinetic.Node.prototype.setWidth.call(this, width); + Konva.Node.prototype.setWidth.call(this, width); this._resizeDOM(); return this; }, /** * clear all layers * @method - * @memberof Kinetic.Stage.prototype + * @memberof Konva.Stage.prototype */ clear: function() { var layers = this.children, @@ -149,31 +149,31 @@ if (!obj) { obj = {}; } - obj.container = Kinetic.document.createElement(DIV); + obj.container = Konva.document.createElement(DIV); - return Kinetic.Container.prototype.clone.call(this, obj); + return Konva.Container.prototype.clone.call(this, obj); }, /** * destroy stage * @method - * @memberof Kinetic.Stage.prototype + * @memberof Konva.Stage.prototype */ destroy: function() { var content = this.content; - Kinetic.Container.prototype.destroy.call(this); + Konva.Container.prototype.destroy.call(this); - if(content && Kinetic.Util._isInDocument(content)) { + if(content && Konva.Util._isInDocument(content)) { this.getContainer().removeChild(content); } - var index = Kinetic.stages.indexOf(this); + var index = Konva.stages.indexOf(this); if (index > -1) { - Kinetic.stages.splice(index, 1); + Konva.stages.splice(index, 1); } }, /** * get pointer position which can be a touch position or mouse position * @method - * @memberof Kinetic.Stage.prototype + * @memberof Konva.Stage.prototype * @returns {Object} */ getPointerPosition: function() { @@ -184,9 +184,9 @@ }, /** * get stage content div element which has the - * the class name "kineticjs-content" + * the class name "konvajs-content" * @method - * @memberof Kinetic.Stage.prototype + * @memberof Konva.Stage.prototype */ getContent: function() { return this.content; @@ -194,7 +194,7 @@ /** * Creates a composite data URL and requires a callback because the composite is generated asynchronously. * @method - * @memberof Kinetic.Stage.prototype + * @memberof Konva.Stage.prototype * @param {Object} config * @param {Function} config.callback function executed when the composite has completed * @param {String} [config.mimeType] can be "image/png" or "image/jpeg". @@ -214,7 +214,7 @@ quality = config.quality || null, x = config.x || 0, y = config.y || 0, - canvas = new Kinetic.SceneCanvas({ + canvas = new Konva.SceneCanvas({ width: config.width || this.getWidth(), height: config.height || this.getHeight(), pixelRatio: 1 @@ -229,7 +229,7 @@ function drawLayer(n) { var layer = layers[n], layerUrl = layer.toDataURL(), - imageObj = new Kinetic.window.Image(); + imageObj = new Konva.window.Image(); imageObj.onload = function() { _context.drawImage(imageObj, 0, 0); @@ -248,7 +248,7 @@ /** * converts stage into an image. * @method - * @memberof Kinetic.Stage.prototype + * @memberof Konva.Stage.prototype * @param {Object} config * @param {Function} config.callback function executed when the composite has completed * @param {String} [config.mimeType] can be "image/png" or "image/jpeg". @@ -265,7 +265,7 @@ var cb = config.callback; config.callback = function(dataUrl) { - Kinetic.Util._getImage(dataUrl, function(img) { + Konva.Util._getImage(dataUrl, function(img) { cb(img); }); }; @@ -275,11 +275,11 @@ * get visible intersection shape. This is the preferred * method for determining if a point intersects a shape or not * @method - * @memberof Kinetic.Stage.prototype + * @memberof Konva.Stage.prototype * @param {Object} pos * @param {Number} pos.x * @param {Number} pos.y - * @returns {Kinetic.Shape} + * @returns {Konva.Shape} */ getIntersection: function(pos) { var layers = this.getChildren(), @@ -323,8 +323,8 @@ /** * add layer or layers to stage * @method - * @memberof Kinetic.Stage.prototype - * @param {...Kinetic.Layer} layer + * @memberof Konva.Stage.prototype + * @param {...Konva.Layer} layer * @example * stage.add(layer1, layer2, layer3); */ @@ -335,7 +335,7 @@ } return; } - Kinetic.Container.prototype.add.call(this, layer); + Konva.Container.prototype.add.call(this, layer); layer._setCanvasSize(this.width(), this.height()); // draw layer and append canvas to container @@ -352,9 +352,9 @@ return null; }, /** - * returns a {@link Kinetic.Collection} of layers + * returns a {@link Konva.Collection} of layers * @method - * @memberof Kinetic.Stage.prototype + * @memberof Konva.Stage.prototype */ getLayers: function() { return this.getChildren(); @@ -365,17 +365,17 @@ } }, _mouseover: function(evt) { - if (!Kinetic.UA.mobile) { + if (!Konva.UA.mobile) { this._setPointerPosition(evt); this._fire(CONTENT_MOUSEOVER, {evt: evt}); } }, _mouseout: function(evt) { - if (!Kinetic.UA.mobile) { + if (!Konva.UA.mobile) { this._setPointerPosition(evt); var targetShape = this.targetShape; - if(targetShape && !Kinetic.isDragging()) { + if(targetShape && !Konva.isDragging()) { targetShape._fireAndBubble(MOUSEOUT, {evt: evt}); targetShape._fireAndBubble(MOUSELEAVE, {evt: evt}); this.targetShape = null; @@ -388,7 +388,7 @@ _mousemove: function(evt) { // workaround for mobile IE to force touch event when unhandled pointer event elevates into a mouse event - if (Kinetic.UA.ieMobile) { + if (Konva.UA.ieMobile) { return this._touchmove(evt); } @@ -396,16 +396,16 @@ if ((typeof evt.webkitMovementX !== 'undefined' || typeof evt.webkitMovementY !== 'undefined') && evt.webkitMovementY === 0 && evt.webkitMovementX === 0) { return; } - if (Kinetic.UA.mobile) { + if (Konva.UA.mobile) { return; } this._setPointerPosition(evt); - var dd = Kinetic.DD, shape; + var dd = Konva.DD, shape; - if (!Kinetic.isDragging()) { + if (!Konva.isDragging()) { shape = this.getIntersection(this.getPointerPosition()); if(shape && shape.isListening()) { - if(!Kinetic.isDragging() && (!this.targetShape || this.targetShape._id !== shape._id)) { + if(!Konva.isDragging() && (!this.targetShape || this.targetShape._id !== shape._id)) { if(this.targetShape) { this.targetShape._fireAndBubble(MOUSEOUT, {evt: evt}, shape); this.targetShape._fireAndBubble(MOUSELEAVE, {evt: evt}, shape); @@ -423,7 +423,7 @@ * to run mouseout from previous target shape */ else { - if(this.targetShape && !Kinetic.isDragging()) { + if(this.targetShape && !Konva.isDragging()) { this.targetShape._fireAndBubble(MOUSEOUT, {evt: evt}); this.targetShape._fireAndBubble(MOUSELEAVE, {evt: evt}); this.targetShape = null; @@ -447,15 +447,15 @@ _mousedown: function(evt) { // workaround for mobile IE to force touch event when unhandled pointer event elevates into a mouse event - if (Kinetic.UA.ieMobile) { + if (Konva.UA.ieMobile) { return this._touchstart(evt); } - if (!Kinetic.UA.mobile) { + if (!Konva.UA.mobile) { this._setPointerPosition(evt); var shape = this.getIntersection(this.getPointerPosition()); - Kinetic.listenClickTap = true; + Konva.listenClickTap = true; if (shape && shape.isListening()) { this.clickStartShape = shape; @@ -475,36 +475,36 @@ _mouseup: function(evt) { // workaround for mobile IE to force touch event when unhandled pointer event elevates into a mouse event - if (Kinetic.UA.ieMobile) { + if (Konva.UA.ieMobile) { return this._touchend(evt); } - if (!Kinetic.UA.mobile) { + if (!Konva.UA.mobile) { this._setPointerPosition(evt); var shape = this.getIntersection(this.getPointerPosition()), clickStartShape = this.clickStartShape, fireDblClick = false, - dd = Kinetic.DD; + dd = Konva.DD; - if(Kinetic.inDblClickWindow) { + if(Konva.inDblClickWindow) { fireDblClick = true; - Kinetic.inDblClickWindow = false; + Konva.inDblClickWindow = false; } // don't set inDblClickWindow after dragging else if (!dd || !dd.justDragged) { - Kinetic.inDblClickWindow = true; + Konva.inDblClickWindow = true; } else if (dd) { dd.justDragged = false; } setTimeout(function() { - Kinetic.inDblClickWindow = false; - }, Kinetic.dblClickWindow); + Konva.inDblClickWindow = false; + }, Konva.dblClickWindow); if (shape && shape.isListening()) { shape._fireAndBubble(MOUSEUP, {evt: evt}); // detect if click or double click occurred - if(Kinetic.listenClickTap && clickStartShape && clickStartShape._id === shape._id) { + if(Konva.listenClickTap && clickStartShape && clickStartShape._id === shape._id) { shape._fireAndBubble(CLICK, {evt: evt}); if(fireDblClick) { @@ -514,14 +514,14 @@ } // content events this._fire(CONTENT_MOUSEUP, {evt: evt}); - if (Kinetic.listenClickTap) { + if (Konva.listenClickTap) { this._fire(CONTENT_CLICK, {evt: evt}); if(fireDblClick) { this._fire(CONTENT_DBL_CLICK, {evt: evt}); } } - Kinetic.listenClickTap = false; + Konva.listenClickTap = false; } // always call preventDefault for desktop events because some browsers @@ -534,7 +534,7 @@ this._setPointerPosition(evt); var shape = this.getIntersection(this.getPointerPosition()); - Kinetic.listenClickTap = true; + Konva.listenClickTap = true; if (shape && shape.isListening()) { this.tapStartShape = shape; @@ -553,23 +553,23 @@ var shape = this.getIntersection(this.getPointerPosition()), fireDblClick = false; - if(Kinetic.inDblClickWindow) { + if(Konva.inDblClickWindow) { fireDblClick = true; - Kinetic.inDblClickWindow = false; + Konva.inDblClickWindow = false; } else { - Kinetic.inDblClickWindow = true; + Konva.inDblClickWindow = true; } setTimeout(function() { - Kinetic.inDblClickWindow = false; - }, Kinetic.dblClickWindow); + Konva.inDblClickWindow = false; + }, Konva.dblClickWindow); if (shape && shape.isListening()) { shape._fireAndBubble(TOUCHEND, {evt: evt}); // detect if tap or double tap occurred - if(Kinetic.listenClickTap && shape._id === this.tapStartShape._id) { + if(Konva.listenClickTap && shape._id === this.tapStartShape._id) { shape._fireAndBubble(TAP, {evt: evt}); if(fireDblClick) { @@ -582,20 +582,20 @@ } } // content events - if (Kinetic.listenClickTap) { + if (Konva.listenClickTap) { this._fire(CONTENT_TOUCHEND, {evt: evt}); if(fireDblClick) { this._fire(CONTENT_DBL_TAP, {evt: evt}); } } - Kinetic.listenClickTap = false; + Konva.listenClickTap = false; }, _touchmove: function(evt) { this._setPointerPosition(evt); - var dd = Kinetic.DD, + var dd = Konva.DD, shape; - if (!Kinetic.isDragging()) { + if (!Konva.isDragging()) { shape = this.getIntersection(this.getPointerPosition()); if (shape && shape.isListening()) { shape._fireAndBubble(TOUCHMOVE, {evt: evt}); @@ -608,7 +608,7 @@ } if(dd) { dd._drag(evt); - if (Kinetic.isDragging()) { + if (Konva.isDragging()) { evt.preventDefault(); } } @@ -659,7 +659,7 @@ // the layerX or layerY properties in newer versions of Chrome // throws a JS warning. layerX and layerY are required for FF // when the container is transformed via CSS. - else if (Kinetic.UA.browser === 'mozilla') { + else if (Konva.UA.browser === 'mozilla') { x = evt.layerX; y = evt.layerY; } @@ -687,34 +687,34 @@ _buildDOM: function() { var container = this.getContainer(); if (!container) { - if (Kinetic.Util.isBrowser()) { + if (Konva.Util.isBrowser()) { throw 'Stage has no container. A container is required.'; } else { // automatically create element for jsdom in nodejs env - container = Kinetic.document.createElement(DIV); + container = Konva.document.createElement(DIV); } } // clear content inside container container.innerHTML = EMPTY_STRING; // content - this.content = Kinetic.document.createElement(DIV); + this.content = Konva.document.createElement(DIV); this.content.style.position = RELATIVE; this.content.style.display = INLINE_BLOCK; - this.content.className = KINETICJS_CONTENT; + this.content.className = KONVA_CONTENT; this.content.setAttribute('role', 'presentation'); container.appendChild(this.content); // the buffer canvas pixel ratio must be 1 because it is used as an // intermediate canvas before copying the result onto a scene canvas. // not setting it to 1 will result in an over compensation - this.bufferCanvas = new Kinetic.SceneCanvas({ + this.bufferCanvas = new Konva.SceneCanvas({ pixelRatio: 1 }); - this.bufferCanvas2 = new Kinetic.SceneCanvas({ + this.bufferCanvas2 = new Konva.SceneCanvas({ pixelRatio: 1 }); - this.bufferHitCanvas = new Kinetic.HitCanvas(); + this.bufferHitCanvas = new Konva.HitCanvas(); this._resizeDOM(); }, @@ -731,22 +731,22 @@ // currently cache function is now working for stage, because stage has no its own canvas element // TODO: may be it is better to cache all children layers? cache: function() { - Kinetic.Util.warn('Cache function is not allowed for stage. You may use cache only for layers, groups and shapes.'); + Konva.Util.warn('Cache function is not allowed for stage. You may use cache only for layers, groups and shapes.'); }, clearCache : function() { } }); - Kinetic.Util.extend(Kinetic.Stage, Kinetic.Container); + Konva.Util.extend(Konva.Stage, Konva.Container); // add getters and setters - Kinetic.Factory.addGetter(Kinetic.Stage, 'container'); - Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Stage, 'container'); + Konva.Factory.addGetter(Konva.Stage, 'container'); + Konva.Factory.addOverloadedGetterSetter(Konva.Stage, 'container'); /** * get container DOM element * @name container * @method - * @memberof Kinetic.Stage.prototype + * @memberof Konva.Stage.prototype * @returns {DomElement} container * @example * // get container diff --git a/src/Tween.js b/src/Tween.js index f8002f49..aa7b9837 100644 --- a/src/Tween.js +++ b/src/Tween.js @@ -16,16 +16,16 @@ /** * Tween constructor. Tweens enable you to animate a node between the current state and a new state. * You can play, pause, reverse, seek, reset, and finish tweens. By default, tweens are animated using - * a linear easing. For more tweening options, check out {@link Kinetic.Easings} + * a linear easing. For more tweening options, check out {@link Konva.Easings} * @constructor - * @memberof Kinetic + * @memberof Konva * @example * // instantiate new tween which fully rotates a node in 1 second - * var tween = new Kinetic.Tween({ + * var tween = new Konva.Tween({ * node: node, * rotationDeg: 360, * duration: 1, - * easing: Kinetic.Easings.EaseInOut + * easing: Konva.Easings.EaseInOut * }); * * // play tween @@ -34,12 +34,12 @@ * // pause tween * tween.pause(); */ - Kinetic.Tween = function(config) { + Konva.Tween = function(config) { var that = this, node = config.node, nodeId = node._id, duration, - easing = config.easing || Kinetic.Easings.Linear, + easing = config.easing || Konva.Easings.Linear, yoyo = !!config.yoyo, key; @@ -53,9 +53,9 @@ this.node = node; this._id = idCounter++; - this.anim = new Kinetic.Animation(function() { + this.anim = new Konva.Animation(function() { that.tween.onEnterFrame(); - }, node.getLayer() || ((node instanceof Kinetic.Stage) ? node.getLayers() : null)); + }, node.getLayer() || ((node instanceof Konva.Stage) ? node.getLayers() : null)); this.tween = new Tween(key, function(i) { that._tweenFunc(i); @@ -64,15 +64,15 @@ this._addListeners(); // init attrs map - if (!Kinetic.Tween.attrs[nodeId]) { - Kinetic.Tween.attrs[nodeId] = {}; + if (!Konva.Tween.attrs[nodeId]) { + Konva.Tween.attrs[nodeId] = {}; } - if (!Kinetic.Tween.attrs[nodeId][this._id]) { - Kinetic.Tween.attrs[nodeId][this._id] = {}; + if (!Konva.Tween.attrs[nodeId][this._id]) { + Konva.Tween.attrs[nodeId][this._id] = {}; } // init tweens map - if (!Kinetic.Tween.tweens[nodeId]) { - Kinetic.Tween.tweens[nodeId] = {}; + if (!Konva.Tween.tweens[nodeId]) { + Konva.Tween.tweens[nodeId] = {}; } for (key in config) { @@ -89,27 +89,27 @@ }; // start/diff object = attrs.nodeId.tweenId.attr - Kinetic.Tween.attrs = {}; + Konva.Tween.attrs = {}; // tweenId = tweens.nodeId.attr - Kinetic.Tween.tweens = {}; + Konva.Tween.tweens = {}; - Kinetic.Tween.prototype = { + Konva.Tween.prototype = { _addAttr: function(key, end) { var node = this.node, nodeId = node._id, start, diff, tweenId, n, len; // remove conflict from tween map if it exists - tweenId = Kinetic.Tween.tweens[nodeId][key]; + tweenId = Konva.Tween.tweens[nodeId][key]; if (tweenId) { - delete Kinetic.Tween.attrs[nodeId][tweenId][key]; + delete Konva.Tween.attrs[nodeId][tweenId][key]; } // add to tween map start = node.getAttr(key); - if (Kinetic.Util._isArray(end)) { + if (Konva.Util._isArray(end)) { diff = []; len = end.length; for (n=0; n 0; }, createCanvasElement: function() { - var canvas = Kinetic.document.createElement('canvas'); + var canvas = Konva.document.createElement('canvas'); // on some environments canvas.style is readonly try { canvas.style = canvas.style || {}; @@ -419,7 +419,7 @@ }, _isInDocument: function(el) { while(el = el.parentNode) { - if(el == Kinetic.document) { + if(el == Konva.document) { return true; } } @@ -428,7 +428,7 @@ _simplifyArray: function(arr) { var retArr = [], len = arr.length, - util = Kinetic.Util, + util = Konva.Util, n, val; for (n=0; n 0) { @@ -346,13 +346,13 @@ } }; - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'blurRadius', 0, null, Kinetic.Factory.afterSetFilter); + Konva.Factory.addGetterSetter(Konva.Node, 'blurRadius', 0, null, Konva.Factory.afterSetFilter); /** - * get/set blur radius. Use with {@link Kinetic.Filters.Blur} filter + * get/set blur radius. Use with {@link Konva.Filters.Blur} filter * @name blurRadius * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Integer} radius * @returns {Integer} */ diff --git a/src/filters/Brighten.js b/src/filters/Brighten.js index 723395da..1c9009f5 100644 --- a/src/filters/Brighten.js +++ b/src/filters/Brighten.js @@ -2,14 +2,14 @@ /** * Brighten Filter. * @function - * @memberof Kinetic.Filters + * @memberof Konva.Filters * @param {Object} imageData * @example * node.cache(); - * node.filters([Kinetic.Filters.Brighten]); + * node.filters([Konva.Filters.Brighten]); * node.brightness(0.8); */ - Kinetic.Filters.Brighten = function(imageData) { + Konva.Filters.Brighten = function(imageData) { var brightness = this.brightness() * 255, data = imageData.data, len = data.length, @@ -25,13 +25,13 @@ } }; - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'brightness', 0, null, Kinetic.Factory.afterSetFilter); + Konva.Factory.addGetterSetter(Konva.Node, 'brightness', 0, null, Konva.Factory.afterSetFilter); /** * get/set filter brightness. The brightness is a number between -1 and 1.  Positive values - * brighten the pixels and negative values darken them. Use with {@link Kinetic.Filters.Brighten} filter. + * brighten the pixels and negative values darken them. Use with {@link Konva.Filters.Brighten} filter. * @name brightness * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Number} brightness value between -1 and 1 * @returns {Number} */ diff --git a/src/filters/Emboss.js b/src/filters/Emboss.js index 9b5fee91..e9183919 100644 --- a/src/filters/Emboss.js +++ b/src/filters/Emboss.js @@ -5,17 +5,17 @@ * Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk, http://blog.nihilogic.dk/ * License: [http://www.pixastic.com/lib/license.txt] * @function - * @memberof Kinetic.Filters + * @memberof Konva.Filters * @param {Object} imageData * @example * node.cache(); - * node.filters([Kinetic.Filters.Emboss]); + * node.filters([Konva.Filters.Emboss]); * node.embossStrength(0.8); * node.embossWhiteLevel(0.3); * node.embossDirection('right'); * node.embossBlend(true); */ - Kinetic.Filters.Emboss = function (imageData) { + Konva.Filters.Emboss = function (imageData) { // pixastic strength is between 0 and 10. I want it between 0 and 1 // pixastic greyLevel is between 0 and 255. I want it between 0 and 1. Also, @@ -137,43 +137,43 @@ } while (--y); }; - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'embossStrength', 0.5, null, Kinetic.Factory.afterSetFilter); + Konva.Factory.addGetterSetter(Konva.Node, 'embossStrength', 0.5, null, Konva.Factory.afterSetFilter); /** - * get/set emboss strength. Use with {@link Kinetic.Filters.Emboss} filter. + * get/set emboss strength. Use with {@link Konva.Filters.Emboss} filter. * @name embossStrength * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Number} level between 0 and 1. Default is 0.5 * @returns {Number} */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'embossWhiteLevel', 0.5, null, Kinetic.Factory.afterSetFilter); + Konva.Factory.addGetterSetter(Konva.Node, 'embossWhiteLevel', 0.5, null, Konva.Factory.afterSetFilter); /** - * get/set emboss white level. Use with {@link Kinetic.Filters.Emboss} filter. + * get/set emboss white level. Use with {@link Konva.Filters.Emboss} filter. * @name embossWhiteLevel * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Number} embossWhiteLevel between 0 and 1. Default is 0.5 * @returns {Number} */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'embossDirection', 'top-left', null, Kinetic.Factory.afterSetFilter); + Konva.Factory.addGetterSetter(Konva.Node, 'embossDirection', 'top-left', null, Konva.Factory.afterSetFilter); /** - * get/set emboss direction. Use with {@link Kinetic.Filters.Emboss} filter. + * get/set emboss direction. Use with {@link Konva.Filters.Emboss} filter. * @name embossDirection * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {String} embossDirection can be top-left, top, top-right, right, bottom-right, bottom, bottom-left or left * The default is top-left * @returns {String} */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'embossBlend', false, null, Kinetic.Factory.afterSetFilter); + Konva.Factory.addGetterSetter(Konva.Node, 'embossBlend', false, null, Konva.Factory.afterSetFilter); /** - * get/set emboss blend. Use with {@link Kinetic.Filters.Emboss} filter. + * get/set emboss blend. Use with {@link Konva.Filters.Emboss} filter. * @name embossBlend * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Boolean} embossBlend * @returns {Boolean} */ diff --git a/src/filters/Enhance.js b/src/filters/Enhance.js index 78e563ee..5cda1494 100644 --- a/src/filters/Enhance.js +++ b/src/filters/Enhance.js @@ -27,15 +27,15 @@ * writes. * @function * @name Enhance - * @memberof Kinetic.Filters + * @memberof Konva.Filters * @param {Object} imageData * @author ippo615 * @example * node.cache(); - * node.filters([Kinetic.Filters.Enhance]); + * node.filters([Konva.Filters.Enhance]); * node.enhance(0.4); */ - Kinetic.Filters.Enhance = function (imageData) { + Konva.Filters.Enhance = function (imageData) { var data = imageData.data, nSubPixels = data.length, rMin = data[0], rMax = rMin, r, @@ -102,13 +102,13 @@ } }; - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'enhance', 0, null, Kinetic.Factory.afterSetFilter); + Konva.Factory.addGetterSetter(Konva.Node, 'enhance', 0, null, Konva.Factory.afterSetFilter); /** - * get/set enhance. Use with {@link Kinetic.Filters.Enhance} filter. + * get/set enhance. Use with {@link Konva.Filters.Enhance} filter. * @name enhance * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Float} amount * @returns {Float} */ diff --git a/src/filters/Grayscale.js b/src/filters/Grayscale.js index 9c1319e2..3e307e04 100644 --- a/src/filters/Grayscale.js +++ b/src/filters/Grayscale.js @@ -2,13 +2,13 @@ /** * Grayscale Filter * @function - * @memberof Kinetic.Filters + * @memberof Konva.Filters * @param {Object} imageData * @example * node.cache(); - * node.filters([Kinetic.Filters.Grayscale]); + * node.filters([Konva.Filters.Grayscale]); */ - Kinetic.Filters.Grayscale = function(imageData) { + Konva.Filters.Grayscale = function(imageData) { var data = imageData.data, len = data.length, i, brightness; diff --git a/src/filters/HSL.js b/src/filters/HSL.js index 4452924c..e2f0e48b 100644 --- a/src/filters/HSL.js +++ b/src/filters/HSL.js @@ -1,31 +1,31 @@ (function () { - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'hue', 0, null, Kinetic.Factory.afterSetFilter); + Konva.Factory.addGetterSetter(Konva.Node, 'hue', 0, null, Konva.Factory.afterSetFilter); /** - * get/set hsv hue in degrees. Use with {@link Kinetic.Filters.HSV} or {@link Kinetic.Filters.HSL} filter. + * get/set hsv hue in degrees. Use with {@link Konva.Filters.HSV} or {@link Konva.Filters.HSL} filter. * @name hue * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Number} hue value between 0 and 359 * @returns {Number} */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'saturation', 0, null, Kinetic.Factory.afterSetFilter); + Konva.Factory.addGetterSetter(Konva.Node, 'saturation', 0, null, Konva.Factory.afterSetFilter); /** - * get/set hsv saturation. Use with {@link Kinetic.Filters.HSV} or {@link Kinetic.Filters.HSL} filter. + * get/set hsv saturation. Use with {@link Konva.Filters.HSV} or {@link Konva.Filters.HSL} filter. * @name saturation * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Number} saturation 0 is no change, -1.0 halves the saturation, 1.0 doubles, etc.. * @returns {Number} */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'luminance', 0, null, Kinetic.Factory.afterSetFilter); + Konva.Factory.addGetterSetter(Konva.Node, 'luminance', 0, null, Konva.Factory.afterSetFilter); /** - * get/set hsl luminance. Use with {@link Kinetic.Filters.HSL} filter. + * get/set hsl luminance. Use with {@link Konva.Filters.HSL} filter. * @name value * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Number} value 0 is no change, -1.0 halves the value, 1.0 doubles, etc.. * @returns {Number} */ @@ -33,15 +33,15 @@ /** * HSL Filter. Adjusts the hue, saturation and luminance (or lightness) * @function - * @memberof Kinetic.Filters + * @memberof Konva.Filters * @param {Object} imageData * @author ippo615 * @example - * image.filters([Kinetic.Filters.HSL]); + * image.filters([Konva.Filters.HSL]); * image.luminance(200); */ - Kinetic.Filters.HSL = function (imageData) { + Konva.Filters.HSL = function (imageData) { var data = imageData.data, nPixels = data.length, v = 1, diff --git a/src/filters/HSV.js b/src/filters/HSV.js index 995221e8..cb2e6d31 100644 --- a/src/filters/HSV.js +++ b/src/filters/HSV.js @@ -4,15 +4,15 @@ * HSV Filter. Adjusts the hue, saturation and value * @function * @name HSV - * @memberof Kinetic.Filters + * @memberof Konva.Filters * @param {Object} imageData * @author ippo615 * @example - * image.filters([Kinetic.Filters.HSV]); + * image.filters([Konva.Filters.HSV]); * image.value(200); */ - Kinetic.Filters.HSV = function (imageData) { + Konva.Filters.HSV = function (imageData) { var data = imageData.data, nPixels = data.length, v = Math.pow(2,this.value()), @@ -61,32 +61,32 @@ }; - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'hue', 0, null, Kinetic.Factory.afterSetFilter); + Konva.Factory.addGetterSetter(Konva.Node, 'hue', 0, null, Konva.Factory.afterSetFilter); /** - * get/set hsv hue in degrees. Use with {@link Kinetic.Filters.HSV} or {@link Kinetic.Filters.HSL} filter. + * get/set hsv hue in degrees. Use with {@link Konva.Filters.HSV} or {@link Konva.Filters.HSL} filter. * @name hue * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Number} hue value between 0 and 359 * @returns {Number} */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'saturation', 0, null, Kinetic.Factory.afterSetFilter); + Konva.Factory.addGetterSetter(Konva.Node, 'saturation', 0, null, Konva.Factory.afterSetFilter); /** - * get/set hsv saturation. Use with {@link Kinetic.Filters.HSV} or {@link Kinetic.Filters.HSL} filter. + * get/set hsv saturation. Use with {@link Konva.Filters.HSV} or {@link Konva.Filters.HSL} filter. * @name saturation * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Number} saturation 0 is no change, -1.0 halves the saturation, 1.0 doubles, etc.. * @returns {Number} */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'value', 0, null, Kinetic.Factory.afterSetFilter); + Konva.Factory.addGetterSetter(Konva.Node, 'value', 0, null, Konva.Factory.afterSetFilter); /** - * get/set hsv value. Use with {@link Kinetic.Filters.HSV} filter. + * get/set hsv value. Use with {@link Konva.Filters.HSV} filter. * @name value * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Number} value 0 is no change, -1.0 halves the value, 1.0 doubles, etc.. * @returns {Number} */ diff --git a/src/filters/Invert.js b/src/filters/Invert.js index 0cfea0c5..80242be6 100644 --- a/src/filters/Invert.js +++ b/src/filters/Invert.js @@ -2,13 +2,13 @@ /** * Invert Filter * @function - * @memberof Kinetic.Filters + * @memberof Konva.Filters * @param {Object} imageData * @example * node.cache(); - * node.filters([Kinetic.Filters.Invert]); + * node.filters([Konva.Filters.Invert]); */ - Kinetic.Filters.Invert = function(imageData) { + Konva.Filters.Invert = function(imageData) { var data = imageData.data, len = data.length, i; diff --git a/src/filters/Kaleidoscope.js b/src/filters/Kaleidoscope.js index ff7ba11f..cd69e32e 100644 --- a/src/filters/Kaleidoscope.js +++ b/src/filters/Kaleidoscope.js @@ -7,7 +7,7 @@ * what would be the y axis and the theta axis along the x axis. * @function * @author ippo615 - * @memberof Kinetic.Filters + * @memberof Konva.Filters * @param {ImageData} src, the source image data (what will be transformed) * @param {ImageData} dst, the destination image data (where it will be saved) * @param {Object} opt @@ -74,7 +74,7 @@ * Performs w*h*4 pixel reads and w*h pixel writes. * @function * @author ippo615 - * @memberof Kinetic.Filters + * @memberof Konva.Filters * @param {ImageData} src, the source image data (what will be transformed) * @param {ImageData} dst, the destination image data (where it will be saved) * @param {Object} opt @@ -143,25 +143,25 @@ }; - //Kinetic.Filters.ToPolar = Kinetic.Util._FilterWrapDoubleBuffer(ToPolar); - //Kinetic.Filters.FromPolar = Kinetic.Util._FilterWrapDoubleBuffer(FromPolar); + //Konva.Filters.ToPolar = Konva.Util._FilterWrapDoubleBuffer(ToPolar); + //Konva.Filters.FromPolar = Konva.Util._FilterWrapDoubleBuffer(FromPolar); // create a temporary canvas for working - shared between multiple calls - var tempCanvas = Kinetic.Util.createCanvasElement(); + var tempCanvas = Konva.Util.createCanvasElement(); /* * Kaleidoscope Filter. * @function * @name Kaleidoscope * @author ippo615 - * @memberof Kinetic.Filters + * @memberof Konva.Filters * @example * node.cache(); - * node.filters([Kinetic.Filters.Kaleidoscope]); + * node.filters([Konva.Filters.Kaleidoscope]); * node.kaleidoscopePower(3); * node.kaleidoscopeAngle(45); */ - Kinetic.Filters.Kaleidoscope = function(imageData){ + Konva.Filters.Kaleidoscope = function(imageData){ var xSize = imageData.width, ySize = imageData.height; @@ -245,23 +245,23 @@ }; /** - * get/set kaleidoscope power. Use with {@link Kinetic.Filters.Kaleidoscope} filter. + * get/set kaleidoscope power. Use with {@link Konva.Filters.Kaleidoscope} filter. * @name kaleidoscopePower * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Integer} power of kaleidoscope * @returns {Integer} */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'kaleidoscopePower', 2, null, Kinetic.Factory.afterSetFilter); + Konva.Factory.addGetterSetter(Konva.Node, 'kaleidoscopePower', 2, null, Konva.Factory.afterSetFilter); /** - * get/set kaleidoscope angle. Use with {@link Kinetic.Filters.Kaleidoscope} filter. + * get/set kaleidoscope angle. Use with {@link Konva.Filters.Kaleidoscope} filter. * @name kaleidoscopeAngle * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Integer} degrees * @returns {Integer} */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'kaleidoscopeAngle', 0, null, Kinetic.Factory.afterSetFilter); + Konva.Factory.addGetterSetter(Konva.Node, 'kaleidoscopeAngle', 0, null, Konva.Factory.afterSetFilter); })(); diff --git a/src/filters/Mask.js b/src/filters/Mask.js index 926d1b7c..7beb70b3 100644 --- a/src/filters/Mask.js +++ b/src/filters/Mask.js @@ -163,14 +163,14 @@ * Mask Filter * @function * @name Mask - * @memberof Kinetic.Filters + * @memberof Konva.Filters * @param {Object} imageData * @example * node.cache(); - * node.filters([Kinetic.Filters.Mask]); + * node.filters([Konva.Filters.Mask]); * node.threshold(0.1); */ - Kinetic.Filters.Mask = function(imageData) { + Konva.Filters.Mask = function(imageData) { // Detect pixels close to the background color var threshold = this.threshold(), mask = backgroundMask(imageData, threshold); @@ -193,5 +193,5 @@ return imageData; }; - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'threshold', 0, null, Kinetic.Factory.afterSetFilter); + Konva.Factory.addGetterSetter(Konva.Node, 'threshold', 0, null, Konva.Factory.afterSetFilter); })(); diff --git a/src/filters/Noise.js b/src/filters/Noise.js index c3ede506..a053a947 100644 --- a/src/filters/Noise.js +++ b/src/filters/Noise.js @@ -4,15 +4,15 @@ * Noise Filter. Randomly adds or substracts to the color channels * @function * @name Noise - * @memberof Kinetic.Filters + * @memberof Konva.Filters * @param {Object} imageData * @author ippo615 * @example * node.cache(); - * node.filters([Kinetic.Filters.Noise]); + * node.filters([Konva.Filters.Noise]); * node.noise(0.8); */ - Kinetic.Filters.Noise = function (imageData) { + Konva.Filters.Noise = function (imageData) { var amount = this.noise() * 255, data = imageData.data, nPixels = data.length, @@ -26,13 +26,13 @@ } }; - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'noise', 0.2, null, Kinetic.Factory.afterSetFilter); + Konva.Factory.addGetterSetter(Konva.Node, 'noise', 0.2, null, Konva.Factory.afterSetFilter); /** - * get/set noise amount. Must be a value between 0 and 1. Use with {@link Kinetic.Filters.Noise} filter. + * get/set noise amount. Must be a value between 0 and 1. Use with {@link Konva.Filters.Noise} filter. * @name noise * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Number} noise * @returns {Number} */ diff --git a/src/filters/Pixelate.js b/src/filters/Pixelate.js index b5f66b0c..a0ca32c8 100644 --- a/src/filters/Pixelate.js +++ b/src/filters/Pixelate.js @@ -5,16 +5,16 @@ * them as larger pixels * @function * @name Pixelate - * @memberof Kinetic.Filters + * @memberof Konva.Filters * @param {Object} imageData * @author ippo615 * @example * node.cache(); - * node.filters([Kinetic.Filters.Pixelate]); + * node.filters([Konva.Filters.Pixelate]); * node.pixelSize(10); */ - Kinetic.Filters.Pixelate = function (imageData) { + Konva.Filters.Pixelate = function (imageData) { var pixelSize = Math.ceil(this.pixelSize()), width = imageData.width, @@ -80,13 +80,13 @@ }; - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'pixelSize', 8, null, Kinetic.Factory.afterSetFilter); + Konva.Factory.addGetterSetter(Konva.Node, 'pixelSize', 8, null, Konva.Factory.afterSetFilter); /** - * get/set pixel size. Use with {@link Kinetic.Filters.Pixelate} filter. + * get/set pixel size. Use with {@link Konva.Filters.Pixelate} filter. * @name pixelSize * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Integer} pixelSize * @returns {Integer} */ diff --git a/src/filters/Posterize.js b/src/filters/Posterize.js index 79407439..17e21997 100644 --- a/src/filters/Posterize.js +++ b/src/filters/Posterize.js @@ -7,15 +7,15 @@ * @function * @name Posterize * @author ippo615 - * @memberof Kinetic.Filters + * @memberof Konva.Filters * @param {Object} imageData * @example * node.cache(); - * node.filters([Kinetic.Filters.Posterize]); + * node.filters([Konva.Filters.Posterize]); * node.levels(0.8); */ - Kinetic.Filters.Posterize = function (imageData) { + Konva.Filters.Posterize = function (imageData) { // level must be between 1 and 255 var levels = Math.round(this.levels() * 254) + 1, data = imageData.data, @@ -28,13 +28,13 @@ } }; - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'levels', 0.5, null, Kinetic.Factory.afterSetFilter); + Konva.Factory.addGetterSetter(Konva.Node, 'levels', 0.5, null, Konva.Factory.afterSetFilter); /** - * get/set levels. Must be a number between 0 and 1. Use with {@link Kinetic.Filters.Posterize} filter. + * get/set levels. Must be a number between 0 and 1. Use with {@link Konva.Filters.Posterize} filter. * @name levels * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Number} level between 0 and 1 * @returns {Number} */ diff --git a/src/filters/RGB.js b/src/filters/RGB.js index 5a7625a2..8550f4df 100644 --- a/src/filters/RGB.js +++ b/src/filters/RGB.js @@ -3,16 +3,16 @@ * RGB Filter * @function * @name RGB - * @memberof Kinetic.Filters + * @memberof Konva.Filters * @param {Object} imageData * @author ippo615 * @example * node.cache(); - * node.filters([Kinetic.Filters.RGB]); + * node.filters([Konva.Filters.RGB]); * node.blue(120); * node.green(200); */ - Kinetic.Filters.RGB = function (imageData) { + Konva.Filters.RGB = function (imageData) { var data = imageData.data, nPixels = data.length, red = this.red(), @@ -29,7 +29,7 @@ } }; - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'red', 0, function(val) { + Konva.Factory.addGetterSetter(Konva.Node, 'red', 0, function(val) { this._filterUpToDate = false; if (val > 255) { return 255; @@ -42,15 +42,15 @@ } }); /** - * get/set filter red value. Use with {@link Kinetic.Filters.RGB} filter. + * get/set filter red value. Use with {@link Konva.Filters.RGB} filter. * @name red * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Integer} red value between 0 and 255 * @returns {Integer} */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'green', 0, function(val) { + Konva.Factory.addGetterSetter(Konva.Node, 'green', 0, function(val) { this._filterUpToDate = false; if (val > 255) { return 255; @@ -63,20 +63,20 @@ } }); /** - * get/set filter green value. Use with {@link Kinetic.Filters.RGB} filter. + * get/set filter green value. Use with {@link Konva.Filters.RGB} filter. * @name green * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Integer} green value between 0 and 255 * @returns {Integer} */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'blue', 0, Kinetic.Validators.RGBComponent, Kinetic.Factory.afterSetFilter); + Konva.Factory.addGetterSetter(Konva.Node, 'blue', 0, Konva.Validators.RGBComponent, Konva.Factory.afterSetFilter); /** - * get/set filter blue value. Use with {@link Kinetic.Filters.RGB} filter. + * get/set filter blue value. Use with {@link Konva.Filters.RGB} filter. * @name blue * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Integer} blue value between 0 and 255 * @returns {Integer} */ diff --git a/src/filters/Sepia.js b/src/filters/Sepia.js index 0a99e131..1e6ebbbd 100644 --- a/src/filters/Sepia.js +++ b/src/filters/Sepia.js @@ -5,15 +5,15 @@ * Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk, http://blog.nihilogic.dk/ * @function * @name Sepia - * @memberof Kinetic.Filters + * @memberof Konva.Filters * @param {Object} imageData * @author Jacob Seidelin * @license MPL v1.1 [http://www.pixastic.com/lib/license.txt] * @example * node.cache(); - * node.filters([Kinetic.Filters.Sepia]); + * node.filters([Konva.Filters.Sepia]); */ - Kinetic.Filters.Sepia = function (imageData) { + Konva.Filters.Sepia = function (imageData) { var data = imageData.data, w = imageData.width, y = imageData.height, diff --git a/src/filters/Solarize.js b/src/filters/Solarize.js index 9b205ecd..97d4f8ad 100644 --- a/src/filters/Solarize.js +++ b/src/filters/Solarize.js @@ -6,13 +6,13 @@ * License: [http://www.pixastic.com/lib/license.txt] * @function * @name Solarize - * @memberof Kinetic.Filters + * @memberof Konva.Filters * @param {Object} imageData * @example * node.cache(); - * node.filters([Kinetic.Filters.Solarize]); + * node.filters([Konva.Filters.Solarize]); */ - Kinetic.Filters.Solarize = function (imageData) { + Konva.Filters.Solarize = function (imageData) { var data = imageData.data, w = imageData.width, h = imageData.height, diff --git a/src/filters/Threshold.js b/src/filters/Threshold.js index e1403a03..1c20e787 100644 --- a/src/filters/Threshold.js +++ b/src/filters/Threshold.js @@ -6,16 +6,16 @@ * This affects the alpha channel. * @function * @name Threshold - * @memberof Kinetic.Filters + * @memberof Konva.Filters * @param {Object} imageData * @author ippo615 * @example * node.cache(); - * node.filters([Kinetic.Filters.Threshold]); + * node.filters([Konva.Filters.Threshold]); * node.threshold(0.1); */ - Kinetic.Filters.Threshold = function (imageData) { + Konva.Filters.Threshold = function (imageData) { var level = this.threshold() * 255, data = imageData.data, len = data.length, @@ -26,13 +26,13 @@ } }; - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'threshold', 0.5, null, Kinetic.Factory.afterSetFilter); + Konva.Factory.addGetterSetter(Konva.Node, 'threshold', 0.5, null, Konva.Factory.afterSetFilter); /** - * get/set threshold. Must be a value between 0 and 1. Use with {@link Kinetic.Filters.Threshold} or {@link Kinetic.Filters.Mask} filter. + * get/set threshold. Must be a value between 0 and 1. Use with {@link Konva.Filters.Threshold} or {@link Konva.Filters.Mask} filter. * @name threshold * @method - * @memberof Kinetic.Node.prototype + * @memberof Konva.Node.prototype * @param {Number} threshold * @returns {Number} */ diff --git a/src/plugins/Arrow.js b/src/plugins/Arrow.js index 30041131..f09f08ab 100644 --- a/src/plugins/Arrow.js +++ b/src/plugins/Arrow.js @@ -2,8 +2,8 @@ /** * Arrow constructor * @constructor - * @memberof Kinetic - * @augments Kinetic.Shape + * @memberof Konva + * @augments Konva.Shape * @param {Object} config * @param {Array} config.points * @param {Number} [config.tension] Higher values will result in a more curvy line. A value of 0 will result in no interpolation. @@ -13,7 +13,7 @@ * @@shapeParams * @@nodeParams * @example - * var line = new Kinetic.Line({ + * var line = new Konva.Line({ * points: [73, 70, 340, 23, 450, 60, 500, 20], * stroke: 'red', * tension: 1, @@ -21,14 +21,14 @@ * pointerWidth : 12 * }); */ - Kinetic.Arrow = function(config) { + Konva.Arrow = function(config) { this.____init(config); }; - Kinetic.Arrow.prototype = { + Konva.Arrow.prototype = { ____init : function(config) { // call super constructor - Kinetic.Line.call(this, config); + Konva.Line.call(this, config); this.className = 'Arrow'; }, _sceneFunc : function(ctx) { @@ -65,16 +65,16 @@ } ctx.fillStrokeShape(this); - Kinetic.Line.prototype._sceneFunc.apply(this, arguments); + Konva.Line.prototype._sceneFunc.apply(this, arguments); } }; - Kinetic.Util.extend(Kinetic.Arrow, Kinetic.Line); + Konva.Util.extend(Konva.Arrow, Konva.Line); /** * get/set pointerLength * @name pointerLength * @method - * @memberof Kinetic.Arrow.prototype + * @memberof Konva.Arrow.prototype * @param {Number} Length of pointer of arrow. * The default is 10. * @returns {Number} @@ -86,12 +86,12 @@ * line.pointerLength(15); */ - Kinetic.Factory.addGetterSetter(Kinetic.Arrow, 'pointerLength', 10); + Konva.Factory.addGetterSetter(Konva.Arrow, 'pointerLength', 10); /** * get/set pointerWidth * @name pointerWidth * @method - * @memberof Kinetic.Arrow.prototype + * @memberof Konva.Arrow.prototype * @param {Number} Width of pointer of arrow. * The default is 10. * @returns {Number} @@ -103,12 +103,12 @@ * line.pointerWidth(15); */ - Kinetic.Factory.addGetterSetter(Kinetic.Arrow, 'pointerWidth', 10); + Konva.Factory.addGetterSetter(Konva.Arrow, 'pointerWidth', 10); /** * get/set pointerAtBeginning * @name pointerAtBeginning * @method - * @memberof Kinetic.Arrow.prototype + * @memberof Konva.Arrow.prototype * @param {Number} Should pointer displayed at beginning of arrow. * The default is false. * @returns {Boolean} @@ -120,8 +120,8 @@ * line.pointerAtBeginning(true); */ - Kinetic.Factory.addGetterSetter(Kinetic.Arrow, 'pointerAtBeginning', false); - Kinetic.Collection.mapMethods(Kinetic.Arrow); + Konva.Factory.addGetterSetter(Konva.Arrow, 'pointerAtBeginning', false); + Konva.Collection.mapMethods(Konva.Arrow); })(); diff --git a/src/plugins/Label.js b/src/plugins/Label.js index 8986884d..344676a3 100644 --- a/src/plugins/Label.js +++ b/src/plugins/Label.js @@ -1,7 +1,7 @@ (function() { // constants var ATTR_CHANGE_LIST = ['fontFamily', 'fontSize', 'fontStyle', 'padding', 'lineHeight', 'text'], - CHANGE_KINETIC = 'Change.kinetic', + CHANGE_KINETIC = 'Change.konva', NONE = 'none', UP = 'up', RIGHT = 'right', @@ -15,19 +15,19 @@ /** * Label constructor.  Labels are groups that contain a Text and Tag shape * @constructor - * @memberof Kinetic + * @memberof Konva * @param {Object} config * @@nodeParams * @example * // create label - * var label = new Kinetic.Label({ + * var label = new Konva.Label({ * x: 100, * y: 100, * draggable: true * }); * * // add a tag to the label - * label.add(new Kinetic.Tag({ + * label.add(new Konva.Tag({ * fill: '#bbb', * stroke: '#333', * shadowColor: 'black', @@ -42,7 +42,7 @@ * })); * * // add text to the label - * label.add(new Kinetic.Text({ + * label.add(new Konva.Text({ * text: 'Hello World!', * fontSize: 50, * lineHeight: 1.2, @@ -50,18 +50,18 @@ * fill: 'green' * })); */ - Kinetic.Label = function(config) { + Konva.Label = function(config) { this.____init(config); }; - Kinetic.Label.prototype = { + Konva.Label.prototype = { ____init: function(config) { var that = this; - Kinetic.Group.call(this, config); + Konva.Group.call(this, config); this.className = LABEL; - this.on('add.kinetic', function(evt) { + this.on('add.konva', function(evt) { that._addListeners(evt.child); that._sync(); }); @@ -71,7 +71,7 @@ * the text properties * @name getText * @method - * @memberof Kinetic.Label.prototype + * @memberof Konva.Label.prototype */ getText: function() { return this.find('Text')[0]; @@ -81,7 +81,7 @@ * the pointer properties and the corner radius * @name getTag * @method - * @memberof Kinetic.Label.prototype + * @memberof Konva.Label.prototype */ getTag: function() { return this.find('Tag')[0]; @@ -152,15 +152,15 @@ } }; - Kinetic.Util.extend(Kinetic.Label, Kinetic.Group); + Konva.Util.extend(Konva.Label, Konva.Group); - Kinetic.Collection.mapMethods(Kinetic.Label); + Konva.Collection.mapMethods(Konva.Label); /** * Tag constructor.  A Tag can be configured * to have a pointer element that points up, right, down, or left * @constructor - * @memberof Kinetic + * @memberof Konva * @param {Object} config * @param {String} [config.pointerDirection] can be up, right, down, left, or none; the default * is none. When a pointer is present, the positioning of the label is relative to the tip of the pointer. @@ -168,13 +168,13 @@ * @param {Number} [config.pointerHeight] * @param {Number} [config.cornerRadius] */ - Kinetic.Tag = function(config) { + Konva.Tag = function(config) { this.___init(config); }; - Kinetic.Tag.prototype = { + Konva.Tag.prototype = { ___init: function(config) { - Kinetic.Shape.call(this, config); + Konva.Shape.call(this, config); this.className = 'Tag'; this.sceneFunc(this._sceneFunc); }, @@ -244,14 +244,14 @@ } }; - Kinetic.Util.extend(Kinetic.Tag, Kinetic.Shape); - Kinetic.Factory.addGetterSetter(Kinetic.Tag, 'pointerDirection', NONE); + Konva.Util.extend(Konva.Tag, Konva.Shape); + Konva.Factory.addGetterSetter(Konva.Tag, 'pointerDirection', NONE); /** * set pointer Direction * @name setPointerDirection * @method - * @memberof Kinetic.Tag.prototype + * @memberof Konva.Tag.prototype * @param {String} pointerDirection can be up, right, down, left, or none. The * default is none */ @@ -260,16 +260,16 @@ * get pointer Direction * @name getPointerDirection * @method - * @memberof Kinetic.Tag.prototype + * @memberof Konva.Tag.prototype */ - Kinetic.Factory.addGetterSetter(Kinetic.Tag, 'pointerWidth', 0); + Konva.Factory.addGetterSetter(Konva.Tag, 'pointerWidth', 0); /** * set pointer width * @name setPointerWidth * @method - * @memberof Kinetic.Tag.prototype + * @memberof Konva.Tag.prototype * @param {Number} pointerWidth */ @@ -277,16 +277,16 @@ * get pointer width * @name getPointerWidth * @method - * @memberof Kinetic.Tag.prototype + * @memberof Konva.Tag.prototype */ - Kinetic.Factory.addGetterSetter(Kinetic.Tag, 'pointerHeight', 0); + Konva.Factory.addGetterSetter(Konva.Tag, 'pointerHeight', 0); /** * set pointer height * @name setPointerHeight * @method - * @memberof Kinetic.Tag.prototype + * @memberof Konva.Tag.prototype * @param {Number} pointerHeight */ @@ -294,16 +294,16 @@ * get pointer height * @name getPointerHeight * @method - * @memberof Kinetic.Tag.prototype + * @memberof Konva.Tag.prototype */ - Kinetic.Factory.addGetterSetter(Kinetic.Tag, 'cornerRadius', 0); + Konva.Factory.addGetterSetter(Konva.Tag, 'cornerRadius', 0); /** * set corner radius * @name setCornerRadius * @method - * @memberof Kinetic.Tag.prototype + * @memberof Konva.Tag.prototype * @param {Number} corner radius */ @@ -311,8 +311,8 @@ * get corner radius * @name getCornerRadius * @method - * @memberof Kinetic.Tag.prototype + * @memberof Konva.Tag.prototype */ - Kinetic.Collection.mapMethods(Kinetic.Tag); + Konva.Collection.mapMethods(Konva.Tag); })(); diff --git a/src/plugins/Path.js b/src/plugins/Path.js index d0f6ac3b..5c20c162 100644 --- a/src/plugins/Path.js +++ b/src/plugins/Path.js @@ -3,14 +3,14 @@ * Path constructor. * @author Jason Follas * @constructor - * @memberof Kinetic - * @augments Kinetic.Shape + * @memberof Konva + * @augments Konva.Shape * @param {Object} config * @param {String} config.data SVG data string * @@shapeParams * @@nodeParams * @example - * var path = new Kinetic.Path({ + * var path = new Konva.Path({ * x: 240, * y: 40, * data: 'M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z', @@ -18,22 +18,22 @@ * scale: 2 * }); */ - Kinetic.Path = function (config) { + Konva.Path = function (config) { this.___init(config); }; - Kinetic.Path.prototype = { + Konva.Path.prototype = { ___init: function (config) { this.dataArray = []; var that = this; // call super constructor - Kinetic.Shape.call(this, config); + Konva.Shape.call(this, config); this.className = 'Path'; - this.dataArray = Kinetic.Path.parsePathData(this.getData()); - this.on('dataChange.kinetic', function () { - that.dataArray = Kinetic.Path.parsePathData(this.getData()); + this.dataArray = Konva.Path.parsePathData(this.getData()); + this.on('dataChange.konva', function () { + that.dataArray = Konva.Path.parsePathData(this.getData()); }); this.sceneFunc(this._sceneFunc); @@ -91,12 +91,12 @@ } } }; - Kinetic.Util.extend(Kinetic.Path, Kinetic.Shape); + Konva.Util.extend(Konva.Path, Konva.Shape); - Kinetic.Path.getLineLength = function(x1, y1, x2, y2) { + Konva.Path.getLineLength = function(x1, y1, x2, y2) { return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1)); }; - Kinetic.Path.getPointOnLine = function(dist, P1x, P1y, P2x, P2y, fromX, fromY) { + Konva.Path.getPointOnLine = function(dist, P1x, P1y, P2x, P2y, fromX, fromY) { if(fromX === undefined) { fromX = P1x; } @@ -151,7 +151,7 @@ return pt; }; - Kinetic.Path.getPointOnCubicBezier = function(pct, P1x, P1y, P2x, P2y, P3x, P3y, P4x, P4y) { + Konva.Path.getPointOnCubicBezier = function(pct, P1x, P1y, P2x, P2y, P3x, P3y, P4x, P4y) { function CB1(t) { return t * t * t; } @@ -172,7 +172,7 @@ y: y }; }; - Kinetic.Path.getPointOnQuadraticBezier = function(pct, P1x, P1y, P2x, P2y, P3x, P3y) { + Konva.Path.getPointOnQuadraticBezier = function(pct, P1x, P1y, P2x, P2y, P3x, P3y) { function QB1(t) { return t * t; } @@ -190,7 +190,7 @@ y: y }; }; - Kinetic.Path.getPointOnEllipticalArc = function(cx, cy, rx, ry, theta, psi) { + Konva.Path.getPointOnEllipticalArc = function(cx, cy, rx, ry, theta, psi) { var cosPsi = Math.cos(psi), sinPsi = Math.sin(psi); var pt = { x: rx * Math.cos(theta), @@ -207,7 +207,7 @@ * L data for the purpose of high performance Path * rendering */ - Kinetic.Path.parsePathData = function(data) { + Konva.Path.parsePathData = function(data) { // Path Data Segment must begin with a moveTo //m (x y)+ Relative moveTo (subsequent points are treated as lineTo) //M (x y)+ Absolute moveTo (subsequent points are treated as lineTo) @@ -479,9 +479,9 @@ return ca; }; - Kinetic.Path.calcLength = function(x, y, cmd, points) { + Konva.Path.calcLength = function(x, y, cmd, points) { var len, p1, p2, t; - var path = Kinetic.Path; + var path = Konva.Path; switch (cmd) { case 'L': @@ -543,7 +543,7 @@ return 0; }; - Kinetic.Path.convertEndpointToCenterParameterization = function(x1, y1, x2, y2, fa, fs, rx, ry, psiDeg) { + Konva.Path.convertEndpointToCenterParameterization = function(x1, y1, x2, y2, fa, fs, rx, ry, psiDeg) { // Derived from: http://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes var psi = psiDeg * (Math.PI / 180.0); var xp = Math.cos(psi) * (x1 - x2) / 2.0 + Math.sin(psi) * (y1 - y2) / 2.0; @@ -600,7 +600,7 @@ return [cx, cy, rx, ry, theta, dTheta, psi, fs]; }; // add getters setters - Kinetic.Factory.addGetterSetter(Kinetic.Path, 'data'); + Konva.Factory.addGetterSetter(Konva.Path, 'data'); /** * set SVG path data string. This method @@ -609,7 +609,7 @@ * M, m, L, l, H, h, V, v, Q, q, T, t, C, c, S, s, A, a, Z, z * @name setData * @method - * @memberof Kinetic.Path.prototype + * @memberof Konva.Path.prototype * @param {String} SVG path command string */ @@ -617,8 +617,8 @@ * get SVG path data string * @name getData * @method - * @memberof Kinetic.Path.prototype + * @memberof Konva.Path.prototype */ - Kinetic.Collection.mapMethods(Kinetic.Path); + Konva.Collection.mapMethods(Konva.Path); })(); diff --git a/src/plugins/RegularPolygon.js b/src/plugins/RegularPolygon.js index 2809c0e9..3cb16a9c 100644 --- a/src/plugins/RegularPolygon.js +++ b/src/plugins/RegularPolygon.js @@ -2,15 +2,15 @@ /** * RegularPolygon constructor.  Examples include triangles, squares, pentagons, hexagons, etc. * @constructor - * @memberof Kinetic - * @augments Kinetic.Shape + * @memberof Konva + * @augments Konva.Shape * @param {Object} config * @param {Number} config.sides * @param {Number} config.radius * @@shapeParams * @@nodeParams * @example - * var hexagon = new Kinetic.RegularPolygon({ + * var hexagon = new Konva.RegularPolygon({ * x: 100, * y: 200, * sides: 6, @@ -20,14 +20,14 @@ * strokeWidth: 4 * }); */ - Kinetic.RegularPolygon = function(config) { + Konva.RegularPolygon = function(config) { this.___init(config); }; - Kinetic.RegularPolygon.prototype = { + Konva.RegularPolygon.prototype = { ___init: function(config) { // call super constructor - Kinetic.Shape.call(this, config); + Konva.Shape.call(this, config); this.className = 'RegularPolygon'; this.sceneFunc(this._sceneFunc); }, @@ -48,16 +48,16 @@ context.fillStrokeShape(this); } }; - Kinetic.Util.extend(Kinetic.RegularPolygon, Kinetic.Shape); + Konva.Util.extend(Konva.RegularPolygon, Konva.Shape); // add getters setters - Kinetic.Factory.addGetterSetter(Kinetic.RegularPolygon, 'radius', 0); + Konva.Factory.addGetterSetter(Konva.RegularPolygon, 'radius', 0); /** * set radius * @name setRadius * @method - * @memberof Kinetic.RegularPolygon.prototype + * @memberof Konva.RegularPolygon.prototype * @param {Number} radius */ @@ -65,16 +65,16 @@ * get radius * @name getRadius * @method - * @memberof Kinetic.RegularPolygon.prototype + * @memberof Konva.RegularPolygon.prototype */ - Kinetic.Factory.addGetterSetter(Kinetic.RegularPolygon, 'sides', 0); + Konva.Factory.addGetterSetter(Konva.RegularPolygon, 'sides', 0); /** * set number of sides * @name setSides * @method - * @memberof Kinetic.RegularPolygon.prototype + * @memberof Konva.RegularPolygon.prototype * @param {int} sides */ @@ -82,8 +82,8 @@ * get number of sides * @name getSides * @method - * @memberof Kinetic.RegularPolygon.prototype + * @memberof Konva.RegularPolygon.prototype */ - Kinetic.Collection.mapMethods(Kinetic.RegularPolygon); + Konva.Collection.mapMethods(Konva.RegularPolygon); })(); diff --git a/src/plugins/Star.js b/src/plugins/Star.js index bbb2dfd3..ad8c47ac 100644 --- a/src/plugins/Star.js +++ b/src/plugins/Star.js @@ -2,8 +2,8 @@ /** * Star constructor * @constructor - * @memberof Kinetic - * @augments Kinetic.Shape + * @memberof Konva + * @augments Konva.Shape * @param {Object} config * @param {Integer} config.numPoints * @param {Number} config.innerRadius @@ -11,7 +11,7 @@ * @@shapeParams * @@nodeParams * @example - * var star = new Kinetic.Star({ + * var star = new Konva.Star({ * x: 100, * y: 200, * numPoints: 5, @@ -22,14 +22,14 @@ * strokeWidth: 4 * }); */ - Kinetic.Star = function(config) { + Konva.Star = function(config) { this.___init(config); }; - Kinetic.Star.prototype = { + Konva.Star.prototype = { ___init: function(config) { // call super constructor - Kinetic.Shape.call(this, config); + Konva.Shape.call(this, config); this.className = 'Star'; this.sceneFunc(this._sceneFunc); }, @@ -52,16 +52,16 @@ context.fillStrokeShape(this); } }; - Kinetic.Util.extend(Kinetic.Star, Kinetic.Shape); + Konva.Util.extend(Konva.Star, Konva.Shape); // add getters setters - Kinetic.Factory.addGetterSetter(Kinetic.Star, 'numPoints', 5); + Konva.Factory.addGetterSetter(Konva.Star, 'numPoints', 5); /** * set number of points * @name setNumPoints * @method - * @memberof Kinetic.Star.prototype + * @memberof Konva.Star.prototype * @param {Integer} points */ @@ -69,16 +69,16 @@ * get number of points * @name getNumPoints * @method - * @memberof Kinetic.Star.prototype + * @memberof Konva.Star.prototype */ - Kinetic.Factory.addGetterSetter(Kinetic.Star, 'innerRadius', 0); + Konva.Factory.addGetterSetter(Konva.Star, 'innerRadius', 0); /** * set inner radius * @name setInnerRadius * @method - * @memberof Kinetic.Star.prototype + * @memberof Konva.Star.prototype * @param {Number} radius */ @@ -86,16 +86,16 @@ * get inner radius * @name getInnerRadius * @method - * @memberof Kinetic.Star.prototype + * @memberof Konva.Star.prototype */ - Kinetic.Factory.addGetterSetter(Kinetic.Star, 'outerRadius', 0); + Konva.Factory.addGetterSetter(Konva.Star, 'outerRadius', 0); /** * set outer radius * @name setOuterRadius * @method - * @memberof Kinetic.Star.prototype + * @memberof Konva.Star.prototype * @param {Number} radius */ @@ -103,8 +103,8 @@ * get outer radius * @name getOuterRadius * @method - * @memberof Kinetic.Star.prototype + * @memberof Konva.Star.prototype */ - Kinetic.Collection.mapMethods(Kinetic.Star); + Konva.Collection.mapMethods(Konva.Star); })(); diff --git a/src/plugins/TextPath.js b/src/plugins/TextPath.js index 3af62ff5..8ee2ef82 100644 --- a/src/plugins/TextPath.js +++ b/src/plugins/TextPath.js @@ -7,8 +7,8 @@ * Path constructor. * @author Jason Follas * @constructor - * @memberof Kinetic - * @augments Kinetic.Shape + * @memberof Konva + * @augments Konva.Shape * @param {Object} config * @param {String} [config.fontFamily] default is Calibri * @param {Number} [config.fontSize] default is 12 @@ -19,7 +19,7 @@ * @@shapeParams * @@nodeParams * @example - * var textpath = new Kinetic.TextPath({ + * var textpath = new Konva.TextPath({ * x: 100, * y: 50, * fill: '#333', @@ -29,7 +29,7 @@ * data: 'M10,10 C0,0 10,150 100,100 S300,150 400,50' * }); */ - Kinetic.TextPath = function(config) { + Konva.TextPath = function(config) { this.___init(config); }; @@ -40,14 +40,14 @@ context.strokeText(this.partialText, 0, 0); } - Kinetic.TextPath.prototype = { + Konva.TextPath.prototype = { ___init: function(config) { var that = this; - this.dummyCanvas = Kinetic.Util.createCanvasElement(); + this.dummyCanvas = Konva.Util.createCanvasElement(); this.dataArray = []; // call super constructor - Kinetic.Shape.call(this, config); + Konva.Shape.call(this, config); // overrides // TODO: shouldn't this be on the prototype? @@ -58,13 +58,13 @@ this.className = 'TextPath'; - this.dataArray = Kinetic.Path.parsePathData(this.attrs.data); - this.on('dataChange.kinetic', function() { - that.dataArray = Kinetic.Path.parsePathData(this.attrs.data); + this.dataArray = Konva.Path.parsePathData(this.attrs.data); + this.on('dataChange.konva', function() { + that.dataArray = Konva.Path.parsePathData(this.attrs.data); }); // update text data for certain attr changes - this.on('textChange.kinetic textStroke.kinetic textStrokeWidth.kinetic', that._setTextData); + this.on('textChange.konva textStroke.konva textStrokeWidth.konva', that._setTextData); that._setTextData(); this.sceneFunc(this._sceneFunc); }, @@ -103,7 +103,7 @@ /** * get text width in pixels * @method - * @memberof Kinetic.TextPath.prototype + * @memberof Konva.TextPath.prototype */ getTextWidth: function() { return this.textWidth; @@ -111,7 +111,7 @@ /** * get text height in pixels * @method - * @memberof Kinetic.TextPath.prototype + * @memberof Konva.TextPath.prototype */ getTextHeight: function() { return this.textHeight; @@ -119,11 +119,11 @@ /** * set text * @method - * @memberof Kinetic.TextPath.prototype + * @memberof Konva.TextPath.prototype * @param {String} text */ setText: function(text) { - Kinetic.Text.prototype.setText.call(this, text); + Konva.Text.prototype.setText.call(this, text); }, _getTextSize: function(text) { var dummyCanvas = this.dummyCanvas; @@ -205,8 +205,8 @@ switch (pathCmd.command) { case 'L': - if(Kinetic.Path.getLineLength(p0.x, p0.y, pathCmd.points[0], pathCmd.points[1]) > glyphWidth) { - p1 = Kinetic.Path.getPointOnLine(glyphWidth, p0.x, p0.y, pathCmd.points[0], pathCmd.points[1], p0.x, p0.y); + if(Konva.Path.getLineLength(p0.x, p0.y, pathCmd.points[0], pathCmd.points[1]) > glyphWidth) { + p1 = Konva.Path.getPointOnLine(glyphWidth, p0.x, p0.y, pathCmd.points[0], pathCmd.points[1], p0.x, p0.y); } else { pathCmd = undefined; @@ -231,13 +231,13 @@ currentT -= Math.PI / 360.0 * dTheta / Math.abs(dTheta); } - // Credit for bug fix: @therth https://github.com/ericdrowell/KineticJS/issues/249 + // Credit for bug fix: @therth https://github.com/ericdrowell/KonvaJS/issues/249 // Old code failed to render text along arc of this path: "M 50 50 a 150 50 0 0 1 250 50 l 50 0" if(dTheta < 0 && currentT < end || dTheta >= 0 && currentT > end) { currentT = end; needNewSegment = true; } - p1 = Kinetic.Path.getPointOnEllipticalArc(pathCmd.points[0], pathCmd.points[1], pathCmd.points[2], pathCmd.points[3], currentT, pathCmd.points[6]); + p1 = Konva.Path.getPointOnEllipticalArc(pathCmd.points[0], pathCmd.points[1], pathCmd.points[2], pathCmd.points[3], currentT, pathCmd.points[6]); break; case 'C': if(currentT === 0) { @@ -259,7 +259,7 @@ currentT = 1.0; needNewSegment = true; } - p1 = Kinetic.Path.getPointOnCubicBezier(currentT, pathCmd.start.x, pathCmd.start.y, pathCmd.points[0], pathCmd.points[1], pathCmd.points[2], pathCmd.points[3], pathCmd.points[4], pathCmd.points[5]); + p1 = Konva.Path.getPointOnCubicBezier(currentT, pathCmd.start.x, pathCmd.start.y, pathCmd.points[0], pathCmd.points[1], pathCmd.points[2], pathCmd.points[3], pathCmd.points[4], pathCmd.points[5]); break; case 'Q': if(currentT === 0) { @@ -276,13 +276,13 @@ currentT = 1.0; needNewSegment = true; } - p1 = Kinetic.Path.getPointOnQuadraticBezier(currentT, pathCmd.start.x, pathCmd.start.y, pathCmd.points[0], pathCmd.points[1], pathCmd.points[2], pathCmd.points[3]); + p1 = Konva.Path.getPointOnQuadraticBezier(currentT, pathCmd.start.x, pathCmd.start.y, pathCmd.points[0], pathCmd.points[1], pathCmd.points[2], pathCmd.points[3]); break; } if(p1 !== undefined) { - currLen = Kinetic.Path.getLineLength(p0.x, p0.y, p1.x, p1.y); + currLen = Konva.Path.getLineLength(p0.x, p0.y, p1.x, p1.y); } if(needNewSegment) { @@ -300,7 +300,7 @@ break; } - var width = Kinetic.Path.getLineLength(p0.x, p0.y, p1.x, p1.y); + var width = Konva.Path.getLineLength(p0.x, p0.y, p1.x, p1.y); // Note: Since glyphs are rendered one at a time, any kerning pair data built into the font will not be used. // Can foresee having a rough pair table built in that the developer can override as needed. @@ -308,7 +308,7 @@ var kern = 0; // placeholder for future implementation - var midpoint = Kinetic.Path.getPointOnLine(kern + width / 2.0, p0.x, p0.y, p1.x, p1.y); + var midpoint = Konva.Path.getPointOnLine(kern + width / 2.0, p0.x, p0.y, p1.x, p1.y); var rotation = Math.atan2((p1.y - p0.y), (p1.x - p0.x)); this.glyphInfo.push({ @@ -325,18 +325,18 @@ }; // map TextPath methods to Text - Kinetic.TextPath.prototype._getContextFont = Kinetic.Text.prototype._getContextFont; + Konva.TextPath.prototype._getContextFont = Konva.Text.prototype._getContextFont; - Kinetic.Util.extend(Kinetic.TextPath, Kinetic.Shape); + Konva.Util.extend(Konva.TextPath, Konva.Shape); // add setters and getters - Kinetic.Factory.addGetterSetter(Kinetic.TextPath, 'fontFamily', 'Arial'); + Konva.Factory.addGetterSetter(Konva.TextPath, 'fontFamily', 'Arial'); /** * set font family * @name setFontFamily * @method - * @memberof Kinetic.TextPath.prototype + * @memberof Konva.TextPath.prototype * @param {String} fontFamily */ @@ -344,16 +344,16 @@ * get font family * @name getFontFamily * @method - * @memberof Kinetic.TextPath.prototype + * @memberof Konva.TextPath.prototype */ - Kinetic.Factory.addGetterSetter(Kinetic.TextPath, 'fontSize', 12); + Konva.Factory.addGetterSetter(Konva.TextPath, 'fontSize', 12); /** * set font size * @name setFontSize * @method - * @memberof Kinetic.TextPath.prototype + * @memberof Konva.TextPath.prototype * @param {int} fontSize */ @@ -361,16 +361,16 @@ * get font size * @name getFontSize * @method - * @memberof Kinetic.TextPath.prototype + * @memberof Konva.TextPath.prototype */ - Kinetic.Factory.addGetterSetter(Kinetic.TextPath, 'fontStyle', NORMAL); + Konva.Factory.addGetterSetter(Konva.TextPath, 'fontStyle', NORMAL); /** * set font style. Can be 'normal', 'italic', or 'bold'. 'normal' is the default. * @name setFontStyle * @method - * @memberof Kinetic.TextPath.prototype + * @memberof Konva.TextPath.prototype * @param {String} fontStyle */ @@ -378,16 +378,16 @@ * get font style * @name getFontStyle * @method - * @memberof Kinetic.TextPath.prototype + * @memberof Konva.TextPath.prototype */ - Kinetic.Factory.addGetterSetter(Kinetic.TextPath, 'fontVariant', NORMAL); + Konva.Factory.addGetterSetter(Konva.TextPath, 'fontVariant', NORMAL); /** * set font variant. Can be 'normal' or 'small-caps'. 'normal' is the default. * @name setFontVariant * @method - * @memberof Kinetic.TextPath.prototype + * @memberof Konva.TextPath.prototype * @param {String} fontVariant */ @@ -395,17 +395,17 @@ * @get font variant * @name getFontVariant * @method - * @memberof Kinetic.TextPath.prototype + * @memberof Konva.TextPath.prototype */ - Kinetic.Factory.addGetter(Kinetic.TextPath, 'text', EMPTY_STRING); + Konva.Factory.addGetter(Konva.TextPath, 'text', EMPTY_STRING); /** * get text * @name getText * @method - * @memberof Kinetic.TextPath.prototype + * @memberof Konva.TextPath.prototype */ - Kinetic.Collection.mapMethods(Kinetic.TextPath); + Konva.Collection.mapMethods(Konva.TextPath); })(); diff --git a/src/shapes/Arc.js b/src/shapes/Arc.js index 8b4a188c..fa85f1aa 100644 --- a/src/shapes/Arc.js +++ b/src/shapes/Arc.js @@ -2,7 +2,7 @@ /** * Arc constructor * @constructor - * @augments Kinetic.Shape + * @augments Konva.Shape * @param {Object} config * @param {Number} config.angle in degrees * @param {Number} config.innerRadius @@ -12,7 +12,7 @@ * @@nodeParams * @example * // draw a Arc that's pointing downwards - * var arc = new Kinetic.Arc({ + * var arc = new Konva.Arc({ * innerRadius: 40, * outerRadius: 80, * fill: 'red', @@ -22,19 +22,19 @@ * rotationDeg: -120 * }); */ - Kinetic.Arc = function(config) { + Konva.Arc = function(config) { this.___init(config); }; - Kinetic.Arc.prototype = { + Konva.Arc.prototype = { ___init: function(config) { // call super constructor - Kinetic.Shape.call(this, config); + Konva.Shape.call(this, config); this.className = 'Arc'; this.sceneFunc(this._sceneFunc); }, _sceneFunc: function(context) { - var angle = Kinetic.getAngle(this.angle()), + var angle = Konva.getAngle(this.angle()), clockwise = this.clockwise(); context.beginPath(); @@ -44,16 +44,16 @@ context.fillStrokeShape(this); } }; - Kinetic.Util.extend(Kinetic.Arc, Kinetic.Shape); + Konva.Util.extend(Konva.Arc, Konva.Shape); // add getters setters - Kinetic.Factory.addGetterSetter(Kinetic.Arc, 'innerRadius', 0); + Konva.Factory.addGetterSetter(Konva.Arc, 'innerRadius', 0); /** * get/set innerRadius * @name innerRadius * @method - * @memberof Kinetic.Arc.prototype + * @memberof Konva.Arc.prototype * @param {Number} innerRadius * @returns {Number} * @example @@ -64,13 +64,13 @@ * arc.innerRadius(20); */ - Kinetic.Factory.addGetterSetter(Kinetic.Arc, 'outerRadius', 0); + Konva.Factory.addGetterSetter(Konva.Arc, 'outerRadius', 0); /** * get/set outerRadius * @name outerRadius * @method - * @memberof Kinetic.Arc.prototype + * @memberof Konva.Arc.prototype * @param {Number} outerRadius * @returns {Number} * @example @@ -81,13 +81,13 @@ * arc.outerRadius(20); */ - Kinetic.Factory.addGetterSetter(Kinetic.Arc, 'angle', 0); + Konva.Factory.addGetterSetter(Konva.Arc, 'angle', 0); /** * get/set angle in degrees * @name angle * @method - * @memberof Kinetic.Arc.prototype + * @memberof Konva.Arc.prototype * @param {Number} angle * @returns {Number} * @example @@ -98,13 +98,13 @@ * arc.angle(20); */ - Kinetic.Factory.addGetterSetter(Kinetic.Arc, 'clockwise', false); + Konva.Factory.addGetterSetter(Konva.Arc, 'clockwise', false); /** * get/set clockwise flag * @name clockwise * @method - * @memberof Kinetic.Arc.prototype + * @memberof Konva.Arc.prototype * @param {Boolean} clockwise * @returns {Boolean} * @example @@ -118,5 +118,5 @@ * arc.clockwise(true); */ - Kinetic.Collection.mapMethods(Kinetic.Arc); + Konva.Collection.mapMethods(Konva.Arc); })(); diff --git a/src/shapes/Circle.js b/src/shapes/Circle.js index 748783dc..38508254 100644 --- a/src/shapes/Circle.js +++ b/src/shapes/Circle.js @@ -6,29 +6,29 @@ /** * Circle constructor * @constructor - * @memberof Kinetic - * @augments Kinetic.Shape + * @memberof Konva + * @augments Konva.Shape * @param {Object} config * @param {Number} config.radius * @@shapeParams * @@nodeParams * @example * // create circle - * var circle = new Kinetic.Circle({ + * var circle = new Konva.Circle({ * radius: 40, * fill: 'red', * stroke: 'black' * strokeWidth: 5 * }); */ - Kinetic.Circle = function(config) { + Konva.Circle = function(config) { this.___init(config); }; - Kinetic.Circle.prototype = { + Konva.Circle.prototype = { ___init: function(config) { // call super constructor - Kinetic.Shape.call(this, config); + Konva.Shape.call(this, config); this.className = CIRCLE; this.sceneFunc(this._sceneFunc); }, @@ -48,14 +48,14 @@ }, // implements Shape.prototype.setWidth() setWidth: function(width) { - Kinetic.Node.prototype.setWidth.call(this, width); + Konva.Node.prototype.setWidth.call(this, width); if (this.radius() !== width / 2) { this.setRadius(width / 2); } }, // implements Shape.prototype.setHeight() setHeight: function(height) { - Kinetic.Node.prototype.setHeight.call(this, height); + Konva.Node.prototype.setHeight.call(this, height); if (this.radius() !== height / 2) { this.setRadius(height / 2); } @@ -66,17 +66,17 @@ this.setHeight(val * 2); } }; - Kinetic.Util.extend(Kinetic.Circle, Kinetic.Shape); + Konva.Util.extend(Konva.Circle, Konva.Shape); // add getters setters - Kinetic.Factory.addGetter(Kinetic.Circle, 'radius', 0); - Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Circle, 'radius'); + Konva.Factory.addGetter(Konva.Circle, 'radius', 0); + Konva.Factory.addOverloadedGetterSetter(Konva.Circle, 'radius'); /** * get/set radius * @name radius * @method - * @memberof Kinetic.Circle.prototype + * @memberof Konva.Circle.prototype * @param {Number} radius * @returns {Number} * @example @@ -87,5 +87,5 @@ * circle.radius(10); */ - Kinetic.Collection.mapMethods(Kinetic.Circle); + Konva.Collection.mapMethods(Konva.Circle); })(); diff --git a/src/shapes/Ellipse.js b/src/shapes/Ellipse.js index f7da16d5..6b0ef6d8 100644 --- a/src/shapes/Ellipse.js +++ b/src/shapes/Ellipse.js @@ -6,13 +6,13 @@ /** * Ellipse constructor * @constructor - * @augments Kinetic.Shape + * @augments Konva.Shape * @param {Object} config * @param {Object} config.radius defines x and y radius * @@ShapeParams * @@NodeParams * @example - * var ellipse = new Kinetic.Ellipse({ + * var ellipse = new Konva.Ellipse({ * radius : { * x : 50, * y : 50 @@ -20,14 +20,14 @@ * fill: 'red' * }); */ - Kinetic.Ellipse = function(config) { + Konva.Ellipse = function(config) { this.___init(config); }; - Kinetic.Ellipse.prototype = { + Konva.Ellipse.prototype = { ___init: function(config) { // call super constructor - Kinetic.Shape.call(this, config); + Konva.Shape.call(this, config); this.className = ELLIPSE; this.sceneFunc(this._sceneFunc); }, @@ -55,29 +55,29 @@ }, // implements Shape.prototype.setWidth() setWidth: function(width) { - Kinetic.Node.prototype.setWidth.call(this, width); + Konva.Node.prototype.setWidth.call(this, width); this.setRadius({ x: width / 2 }); }, // implements Shape.prototype.setHeight() setHeight: function(height) { - Kinetic.Node.prototype.setHeight.call(this, height); + Konva.Node.prototype.setHeight.call(this, height); this.setRadius({ y: height / 2 }); } }; - Kinetic.Util.extend(Kinetic.Ellipse, Kinetic.Shape); + Konva.Util.extend(Konva.Ellipse, Konva.Shape); // add getters setters - Kinetic.Factory.addComponentsGetterSetter(Kinetic.Ellipse, 'radius', ['x', 'y']); + Konva.Factory.addComponentsGetterSetter(Konva.Ellipse, 'radius', ['x', 'y']); /** * get/set radius * @name radius * @method - * @memberof Kinetic.Ellipse.prototype + * @memberof Konva.Ellipse.prototype * @param {Object} radius * @param {Number} radius.x * @param {Number} radius.y @@ -93,12 +93,12 @@ * }); */ - Kinetic.Factory.addGetterSetter(Kinetic.Ellipse, 'radiusX', 0); + Konva.Factory.addGetterSetter(Konva.Ellipse, 'radiusX', 0); /** * get/set radius x * @name radiusX * @method - * @memberof Kinetic.Ellipse.prototype + * @memberof Konva.Ellipse.prototype * @param {Number} x * @returns {Number} * @example @@ -109,12 +109,12 @@ * ellipse.radiusX(200); */ - Kinetic.Factory.addGetterSetter(Kinetic.Ellipse, 'radiusY', 0); + Konva.Factory.addGetterSetter(Konva.Ellipse, 'radiusY', 0); /** * get/set radius y * @name radiusY * @method - * @memberof Kinetic.Ellipse.prototype + * @memberof Konva.Ellipse.prototype * @param {Number} y * @returns {Number} * @example @@ -125,6 +125,6 @@ * ellipse.radiusY(200); */ - Kinetic.Collection.mapMethods(Kinetic.Ellipse); + Konva.Collection.mapMethods(Konva.Ellipse); })(); \ No newline at end of file diff --git a/src/shapes/Image.js b/src/shapes/Image.js index 76eaa2e2..e34252ff 100644 --- a/src/shapes/Image.js +++ b/src/shapes/Image.js @@ -6,8 +6,8 @@ /** * Image constructor * @constructor - * @memberof Kinetic - * @augments Kinetic.Shape + * @memberof Konva + * @augments Konva.Shape * @param {Object} config * @param {Image} config.image * @param {Object} [config.crop] @@ -16,7 +16,7 @@ * @example * var imageObj = new Image(); * imageObj.onload = function() { - * var image = new Kinetic.Image({ + * var image = new Konva.Image({ * x: 200, * y: 50, * image: imageObj, @@ -26,14 +26,14 @@ * }; * imageObj.src = '/path/to/image.jpg' */ - Kinetic.Image = function(config) { + Konva.Image = function(config) { this.___init(config); }; - Kinetic.Image.prototype = { + Konva.Image.prototype = { ___init: function(config) { // call super constructor - Kinetic.Shape.call(this, config); + Konva.Shape.call(this, config); this.className = IMAGE; this.sceneFunc(this._sceneFunc); this.hitFunc(this._hitFunc); @@ -86,16 +86,16 @@ return this.attrs.height || (image ? image.height : 0); } }; - Kinetic.Util.extend(Kinetic.Image, Kinetic.Shape); + Konva.Util.extend(Konva.Image, Konva.Shape); // add getters setters - Kinetic.Factory.addGetterSetter(Kinetic.Image, 'image'); + Konva.Factory.addGetterSetter(Konva.Image, 'image'); /** * set image * @name setImage * @method - * @memberof Kinetic.Image.prototype + * @memberof Konva.Image.prototype * @param {Image} image */ @@ -103,16 +103,16 @@ * get image * @name getImage * @method - * @memberof Kinetic.Image.prototype + * @memberof Konva.Image.prototype * @returns {Image} */ - Kinetic.Factory.addComponentsGetterSetter(Kinetic.Image, 'crop', ['x', 'y', 'width', 'height']); + Konva.Factory.addComponentsGetterSetter(Konva.Image, 'crop', ['x', 'y', 'width', 'height']); /** * get/set crop * @method * @name crop - * @memberof Kinetic.Image.prototype + * @memberof Konva.Image.prototype * @param {Object} crop * @param {Number} crop.x * @param {Number} crop.y @@ -132,12 +132,12 @@ * }); */ - Kinetic.Factory.addGetterSetter(Kinetic.Image, 'cropX', 0); + Konva.Factory.addGetterSetter(Konva.Image, 'cropX', 0); /** * get/set crop x * @method * @name cropX - * @memberof Kinetic.Image.prototype + * @memberof Konva.Image.prototype * @param {Number} x * @returns {Number} * @example @@ -148,12 +148,12 @@ * image.cropX(20); */ - Kinetic.Factory.addGetterSetter(Kinetic.Image, 'cropY', 0); + Konva.Factory.addGetterSetter(Konva.Image, 'cropY', 0); /** * get/set crop y * @name cropY * @method - * @memberof Kinetic.Image.prototype + * @memberof Konva.Image.prototype * @param {Number} y * @returns {Number} * @example @@ -164,12 +164,12 @@ * image.cropY(20); */ - Kinetic.Factory.addGetterSetter(Kinetic.Image, 'cropWidth', 0); + Konva.Factory.addGetterSetter(Konva.Image, 'cropWidth', 0); /** * get/set crop width * @name cropWidth * @method - * @memberof Kinetic.Image.prototype + * @memberof Konva.Image.prototype * @param {Number} width * @returns {Number} * @example @@ -180,12 +180,12 @@ * image.cropWidth(20); */ - Kinetic.Factory.addGetterSetter(Kinetic.Image, 'cropHeight', 0); + Konva.Factory.addGetterSetter(Konva.Image, 'cropHeight', 0); /** * get/set crop height * @name cropHeight * @method - * @memberof Kinetic.Image.prototype + * @memberof Konva.Image.prototype * @param {Number} height * @returns {Number} * @example @@ -196,5 +196,5 @@ * image.cropHeight(20); */ - Kinetic.Collection.mapMethods(Kinetic.Image); + Konva.Collection.mapMethods(Konva.Image); })(); diff --git a/src/shapes/Line.js b/src/shapes/Line.js index ed7ff790..0c0a0a4a 100644 --- a/src/shapes/Line.js +++ b/src/shapes/Line.js @@ -3,8 +3,8 @@ * Line constructor.  Lines are defined by an array of points and * a tension * @constructor - * @memberof Kinetic - * @augments Kinetic.Shape + * @memberof Konva + * @augments Konva.Shape * @param {Object} config * @param {Array} config.points * @param {Number} [config.tension] Higher values will result in a more curvy line. A value of 0 will result in no interpolation. @@ -13,7 +13,7 @@ * @@shapeParams * @@nodeParams * @example - * var line = new Kinetic.Line({ + * var line = new Konva.Line({ * x: 100, * y: 50, * points: [73, 70, 340, 23, 450, 60, 500, 20], @@ -21,17 +21,17 @@ * tension: 1 * }); */ - Kinetic.Line = function(config) { + Konva.Line = function(config) { this.___init(config); }; - Kinetic.Line.prototype = { + Konva.Line.prototype = { ___init: function(config) { // call super constructor - Kinetic.Shape.call(this, config); + Konva.Shape.call(this, config); this.className = 'Line'; - this.on('pointsChange.kinetic tensionChange.kinetic closedChange.kinetic', function() { + this.on('pointsChange.konva tensionChange.konva closedChange.konva', function() { this._clearCache('tensionPoints'); }); @@ -94,14 +94,14 @@ return this._getTensionPointsClosed(); } else { - return Kinetic.Util._expandPoints(this.getPoints(), this.getTension()); + return Konva.Util._expandPoints(this.getPoints(), this.getTension()); } }, _getTensionPointsClosed: function() { var p = this.getPoints(), len = p.length, tension = this.getTension(), - util = Kinetic.Util, + util = Konva.Util, firstControlPoints = util._getControlPoints( p[len-2], p[len-1], @@ -120,7 +120,7 @@ p[1], tension ), - middle = Kinetic.Util._expandPoints(p, tension), + middle = Konva.Util._expandPoints(p, tension), tp = [ firstControlPoints[2], firstControlPoints[3] @@ -142,16 +142,16 @@ return tp; } }; - Kinetic.Util.extend(Kinetic.Line, Kinetic.Shape); + Konva.Util.extend(Konva.Line, Konva.Shape); // add getters setters - Kinetic.Factory.addGetterSetter(Kinetic.Line, 'closed', false); + Konva.Factory.addGetterSetter(Konva.Line, 'closed', false); /** * get/set closed flag. The default is false * @name closed * @method - * @memberof Kinetic.Line.prototype + * @memberof Konva.Line.prototype * @param {Boolean} closed * @returns {Boolean} * @example @@ -165,13 +165,13 @@ * line.closed(false); */ - Kinetic.Factory.addGetterSetter(Kinetic.Line, 'tension', 0); + Konva.Factory.addGetterSetter(Konva.Line, 'tension', 0); /** * get/set tension * @name tension * @method - * @memberof Kinetic.Line.prototype + * @memberof Konva.Line.prototype * @param {Number} Higher values will result in a more curvy line. A value of 0 will result in no interpolation. * The default is 0 * @returns {Number} @@ -183,12 +183,12 @@ * line.tension(3); */ - Kinetic.Factory.addGetterSetter(Kinetic.Line, 'points', []); + Konva.Factory.addGetterSetter(Konva.Line, 'points', []); /** * get/set points array * @name points * @method - * @memberof Kinetic.Line.prototype + * @memberof Konva.Line.prototype * @param {Array} points * @returns {Array} * @example @@ -202,5 +202,5 @@ * line.points(line.points().concat([70, 80])); */ - Kinetic.Collection.mapMethods(Kinetic.Line); + Konva.Collection.mapMethods(Konva.Line); })(); \ No newline at end of file diff --git a/src/shapes/Rect.js b/src/shapes/Rect.js index 28d96d77..a2923ca8 100644 --- a/src/shapes/Rect.js +++ b/src/shapes/Rect.js @@ -2,14 +2,14 @@ /** * Rect constructor * @constructor - * @memberof Kinetic - * @augments Kinetic.Shape + * @memberof Konva + * @augments Konva.Shape * @param {Object} config * @param {Number} [config.cornerRadius] * @@shapeParams * @@nodeParams * @example - * var rect = new Kinetic.Rect({ + * var rect = new Konva.Rect({ * width: 100, * height: 50, * fill: 'red', @@ -17,13 +17,13 @@ * strokeWidth: 5 * }); */ - Kinetic.Rect = function(config) { + Konva.Rect = function(config) { this.___init(config); }; - Kinetic.Rect.prototype = { + Konva.Rect.prototype = { ___init: function(config) { - Kinetic.Shape.call(this, config); + Konva.Shape.call(this, config); this.className = 'Rect'; this.sceneFunc(this._sceneFunc); }, @@ -56,14 +56,14 @@ } }; - Kinetic.Util.extend(Kinetic.Rect, Kinetic.Shape); + Konva.Util.extend(Konva.Rect, Konva.Shape); - Kinetic.Factory.addGetterSetter(Kinetic.Rect, 'cornerRadius', 0); + Konva.Factory.addGetterSetter(Konva.Rect, 'cornerRadius', 0); /** * get/set corner radius * @name cornerRadius * @method - * @memberof Kinetic.Rect.prototype + * @memberof Konva.Rect.prototype * @param {Number} cornerRadius * @returns {Number} * @example @@ -74,5 +74,5 @@ * rect.cornerRadius(10); */ - Kinetic.Collection.mapMethods(Kinetic.Rect); + Konva.Collection.mapMethods(Konva.Rect); })(); diff --git a/src/shapes/Ring.js b/src/shapes/Ring.js index 1c6ffda6..25a20690 100644 --- a/src/shapes/Ring.js +++ b/src/shapes/Ring.js @@ -5,7 +5,7 @@ /** * Ring constructor * @constructor - * @augments Kinetic.Shape + * @augments Konva.Shape * @param {Object} config * @param {Number} config.innerRadius * @param {Number} config.outerRadius @@ -13,7 +13,7 @@ * @@shapeParams * @@nodeParams * @example - * var ring = new Kinetic.Ring({ + * var ring = new Konva.Ring({ * innerRadius: 40, * outerRadius: 80, * fill: 'red', @@ -21,14 +21,14 @@ * strokeWidth: 5 * }); */ - Kinetic.Ring = function(config) { + Konva.Ring = function(config) { this.___init(config); }; - Kinetic.Ring.prototype = { + Konva.Ring.prototype = { ___init: function(config) { // call super constructor - Kinetic.Shape.call(this, config); + Konva.Shape.call(this, config); this.className = 'Ring'; this.sceneFunc(this._sceneFunc); }, @@ -50,14 +50,14 @@ }, // implements Shape.prototype.setWidth() setWidth: function(width) { - Kinetic.Node.prototype.setWidth.call(this, width); + Konva.Node.prototype.setWidth.call(this, width); if (this.outerRadius() !== width / 2) { this.setOuterRadius(width / 2); } }, // implements Shape.prototype.setHeight() setHeight: function(height) { - Kinetic.Node.prototype.setHeight.call(this, height); + Konva.Node.prototype.setHeight.call(this, height); if (this.outerRadius() !== height / 2) { this.setOuterRadius(height / 2); } @@ -68,16 +68,16 @@ this.setHeight(val * 2); } }; - Kinetic.Util.extend(Kinetic.Ring, Kinetic.Shape); + Konva.Util.extend(Konva.Ring, Konva.Shape); // add getters setters - Kinetic.Factory.addGetterSetter(Kinetic.Ring, 'innerRadius', 0); + Konva.Factory.addGetterSetter(Konva.Ring, 'innerRadius', 0); /** * get/set innerRadius * @name innerRadius * @method - * @memberof Kinetic.Ring.prototype + * @memberof Konva.Ring.prototype * @param {Number} innerRadius * @returns {Number} * @example @@ -88,14 +88,14 @@ * ring.innerRadius(20); */ - Kinetic.Factory.addGetter(Kinetic.Ring, 'outerRadius', 0); - Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Ring, 'outerRadius'); + Konva.Factory.addGetter(Konva.Ring, 'outerRadius', 0); + Konva.Factory.addOverloadedGetterSetter(Konva.Ring, 'outerRadius'); /** * get/set outerRadius * @name outerRadius * @method - * @memberof Kinetic.Ring.prototype + * @memberof Konva.Ring.prototype * @param {Number} outerRadius * @returns {Number} * @example @@ -106,5 +106,5 @@ * ring.outerRadius(20); */ - Kinetic.Collection.mapMethods(Kinetic.Ring); + Konva.Collection.mapMethods(Konva.Ring); })(); diff --git a/src/shapes/Sprite.js b/src/shapes/Sprite.js index 17eee5a9..d8f49eb8 100644 --- a/src/shapes/Sprite.js +++ b/src/shapes/Sprite.js @@ -2,8 +2,8 @@ /** * Sprite constructor * @constructor - * @memberof Kinetic - * @augments Kinetic.Shape + * @memberof Konva + * @augments Konva.Shape * @param {Object} config * @param {String} config.animation animation key * @param {Object} config.animations animation map @@ -14,7 +14,7 @@ * @example * var imageObj = new Image(); * imageObj.onload = function() { - * var sprite = new Kinetic.Sprite({ + * var sprite = new Konva.Sprite({ * x: 200, * y: 100, * image: imageObj, @@ -45,33 +45,33 @@ * }; * imageObj.src = '/path/to/image.jpg' */ - Kinetic.Sprite = function(config) { + Konva.Sprite = function(config) { this.___init(config); }; - Kinetic.Sprite.prototype = { + Konva.Sprite.prototype = { ___init: function(config) { // call super constructor - Kinetic.Shape.call(this, config); + Konva.Shape.call(this, config); this.className = 'Sprite'; this._updated = true; var that = this; - this.anim = new Kinetic.Animation(function() { + this.anim = new Konva.Animation(function() { // if we don't need to redraw layer we should return false var updated = that._updated; that._updated = false; return updated; }); - this.on('animationChange.kinetic', function() { + this.on('animationChange.konva', function() { // reset index when animation changes this.frameIndex(0); }); - this.on('frameIndexChange.kinetic', function() { + this.on('frameIndexChange.konva', function() { this._updated = true; }); // smooth change for frameRate - this.on('frameRateChange.kinetic', function() { + this.on('frameRateChange.konva', function() { if (!this.anim.isRunning()) { return; } @@ -136,7 +136,7 @@ /** * start sprite animation * @method - * @memberof Kinetic.Sprite.prototype + * @memberof Konva.Sprite.prototype */ start: function() { var layer = this.getLayer(); @@ -154,7 +154,7 @@ /** * stop sprite animation * @method - * @memberof Kinetic.Sprite.prototype + * @memberof Konva.Sprite.prototype */ stop: function() { this.anim.stop(); @@ -163,7 +163,7 @@ /** * determine if animation of sprite is running or not. returns true or false * @method - * @memberof Kinetic.Animation.prototype + * @memberof Konva.Animation.prototype * @returns {Boolean} */ isRunning: function() { @@ -184,16 +184,16 @@ } } }; - Kinetic.Util.extend(Kinetic.Sprite, Kinetic.Shape); + Konva.Util.extend(Konva.Sprite, Konva.Shape); // add getters setters - Kinetic.Factory.addGetterSetter(Kinetic.Sprite, 'animation'); + Konva.Factory.addGetterSetter(Konva.Sprite, 'animation'); /** * get/set animation key * @name animation * @method - * @memberof Kinetic.Sprite.prototype + * @memberof Konva.Sprite.prototype * @param {String} anim animation key * @returns {String} * @example @@ -204,13 +204,13 @@ * sprite.animation('kicking'); */ - Kinetic.Factory.addGetterSetter(Kinetic.Sprite, 'animations'); + Konva.Factory.addGetterSetter(Konva.Sprite, 'animations'); /** * get/set animations map * @name animations * @method - * @memberof Kinetic.Sprite.prototype + * @memberof Konva.Sprite.prototype * @param {Object} animations * @returns {Object} * @example @@ -240,13 +240,13 @@ * }); */ - Kinetic.Factory.addGetterSetter(Kinetic.Sprite, 'frameOffsets'); + Konva.Factory.addGetterSetter(Konva.Sprite, 'frameOffsets'); /** * get/set offsets map * @name offsets * @method - * @memberof Kinetic.Sprite.prototype + * @memberof Konva.Sprite.prototype * @param {Object} offsets * @returns {Object} * @example @@ -276,13 +276,13 @@ * }); */ - Kinetic.Factory.addGetterSetter(Kinetic.Sprite, 'image'); + Konva.Factory.addGetterSetter(Konva.Sprite, 'image'); /** * get/set image * @name image * @method - * @memberof Kinetic.Sprite.prototype + * @memberof Konva.Sprite.prototype * @param {Image} image * @returns {Image} * @example @@ -293,13 +293,13 @@ * sprite.image(imageObj); */ - Kinetic.Factory.addGetterSetter(Kinetic.Sprite, 'frameIndex', 0); + Konva.Factory.addGetterSetter(Konva.Sprite, 'frameIndex', 0); /** * set/set animation frame index * @name frameIndex * @method - * @memberof Kinetic.Sprite.prototype + * @memberof Konva.Sprite.prototype * @param {Integer} frameIndex * @returns {Integer} * @example @@ -310,7 +310,7 @@ * sprite.frameIndex(3); */ - Kinetic.Factory.addGetterSetter(Kinetic.Sprite, 'frameRate', 17); + Konva.Factory.addGetterSetter(Konva.Sprite, 'frameRate', 17); /** * get/set frame rate in frames per second. Increase this number to make the sprite @@ -318,7 +318,7 @@ * The default is 17 frames per second * @name frameRate * @method - * @memberof Kinetic.Sprite.prototype + * @memberof Konva.Sprite.prototype * @param {Integer} frameRate * @returns {Integer} * @example @@ -329,11 +329,11 @@ * sprite.frameRate(2); */ - Kinetic.Factory.backCompat(Kinetic.Sprite, { + Konva.Factory.backCompat(Konva.Sprite, { index: 'frameIndex', getIndex: 'getFrameIndex', setIndex: 'setFrameIndex' }); - Kinetic.Collection.mapMethods(Kinetic.Sprite); + Konva.Collection.mapMethods(Konva.Sprite); })(); diff --git a/src/shapes/Text.js b/src/shapes/Text.js index 4d798cab..5593cdf9 100644 --- a/src/shapes/Text.js +++ b/src/shapes/Text.js @@ -3,7 +3,7 @@ var AUTO = 'auto', //CANVAS = 'canvas', CENTER = 'center', - CHANGE_KINETIC = 'Change.kinetic', + CHANGE_KINETIC = 'Change.konva', CONTEXT_2D = '2d', DASH = '-', EMPTY_STRING = '', @@ -22,13 +22,13 @@ // cached variables attrChangeListLen = ATTR_CHANGE_LIST.length, - dummyContext = Kinetic.Util.createCanvasElement().getContext(CONTEXT_2D); + dummyContext = Konva.Util.createCanvasElement().getContext(CONTEXT_2D); /** * Text constructor * @constructor - * @memberof Kinetic - * @augments Kinetic.Shape + * @memberof Konva + * @augments Konva.Shape * @param {Object} config * @param {String} [config.fontFamily] default is Arial * @param {Number} [config.fontSize] in pixels. Default is 12 @@ -44,7 +44,7 @@ * @@shapeParams * @@nodeParams * @example - * var text = new Kinetic.Text({ + * var text = new Konva.Text({ * x: 10, * y: 15, * text: 'Simple Text', @@ -53,7 +53,7 @@ * fill: 'green' * }); */ - Kinetic.Text = function(config) { + Konva.Text = function(config) { this.___init(config); }; function _fillFunc(context) { @@ -63,7 +63,7 @@ context.strokeText(this.partialText, 0, 0); } - Kinetic.Text.prototype = { + Konva.Text.prototype = { ___init: function(config) { config = config || {}; config.fill = config.fill || 'black'; @@ -76,7 +76,7 @@ } // call super constructor - Kinetic.Shape.call(this, config); + Konva.Shape.call(this, config); this._fillFunc = _fillFunc; this._strokeFunc = _strokeFunc; @@ -144,14 +144,14 @@ context.fillStrokeShape(this); }, setText: function(text) { - var str = Kinetic.Util._isString(text) ? text : text.toString(); + var str = Konva.Util._isString(text) ? text : text.toString(); this._setAttr(TEXT, str); return this; }, /** * get width of text area, which includes padding * @method - * @memberof Kinetic.Text.prototype + * @memberof Konva.Text.prototype * @returns {Number} */ getWidth: function() { @@ -160,7 +160,7 @@ /** * get the height of the text area, which takes into account multi-line text, line heights, and padding * @method - * @memberof Kinetic.Text.prototype + * @memberof Konva.Text.prototype * @returns {Number} */ getHeight: function() { @@ -169,7 +169,7 @@ /** * get text width * @method - * @memberof Kinetic.Text.prototype + * @memberof Konva.Text.prototype * @returns {Number} */ getTextWidth: function() { @@ -178,7 +178,7 @@ /** * get text height * @method - * @memberof Kinetic.Text.prototype + * @memberof Konva.Text.prototype * @returns {Number} */ getTextHeight: function() { @@ -317,16 +317,16 @@ this.textWidth = textWidth; } }; - Kinetic.Util.extend(Kinetic.Text, Kinetic.Shape); + Konva.Util.extend(Konva.Text, Konva.Shape); // add getters setters - Kinetic.Factory.addGetterSetter(Kinetic.Text, 'fontFamily', 'Arial'); + Konva.Factory.addGetterSetter(Konva.Text, 'fontFamily', 'Arial'); /** * get/set font family * @name fontFamily * @method - * @memberof Kinetic.Text.prototype + * @memberof Konva.Text.prototype * @param {String} fontFamily * @returns {String} * @example @@ -337,13 +337,13 @@ * text.fontFamily('Arial'); */ - Kinetic.Factory.addGetterSetter(Kinetic.Text, 'fontSize', 12); + Konva.Factory.addGetterSetter(Konva.Text, 'fontSize', 12); /** * get/set font size in pixels * @name fontSize * @method - * @memberof Kinetic.Text.prototype + * @memberof Konva.Text.prototype * @param {Number} fontSize * @returns {Number} * @example @@ -354,13 +354,13 @@ * text.fontSize(22); */ - Kinetic.Factory.addGetterSetter(Kinetic.Text, 'fontStyle', NORMAL); + Konva.Factory.addGetterSetter(Konva.Text, 'fontStyle', NORMAL); /** * set font style. Can be 'normal', 'italic', or 'bold'. 'normal' is the default. * @name fontStyle * @method - * @memberof Kinetic.Text.prototype + * @memberof Konva.Text.prototype * @param {String} fontStyle * @returns {String} * @example @@ -371,13 +371,13 @@ * text.fontStyle('bold'); */ - Kinetic.Factory.addGetterSetter(Kinetic.Text, 'fontVariant', NORMAL); + Konva.Factory.addGetterSetter(Konva.Text, 'fontVariant', NORMAL); /** * set font variant. Can be 'normal' or 'small-caps'. 'normal' is the default. * @name fontVariant * @method - * @memberof Kinetic.Text.prototype + * @memberof Konva.Text.prototype * @param {String} fontVariant * @returns {String} * @example @@ -388,13 +388,13 @@ * text.fontVariant('small-caps'); */ - Kinetic.Factory.addGetterSetter(Kinetic.Text, 'padding', 0); + Konva.Factory.addGetterSetter(Konva.Text, 'padding', 0); /** * set padding * @name padding * @method - * @memberof Kinetic.Text.prototype + * @memberof Konva.Text.prototype * @param {Number} padding * @returns {Number} * @example @@ -405,13 +405,13 @@ * text.padding(10); */ - Kinetic.Factory.addGetterSetter(Kinetic.Text, 'align', LEFT); + Konva.Factory.addGetterSetter(Konva.Text, 'align', LEFT); /** * get/set horizontal align of text. Can be 'left', 'center', or 'right' * @name align * @method - * @memberof Kinetic.Text.prototype + * @memberof Konva.Text.prototype * @param {String} align * @returns {String} * @example @@ -425,13 +425,13 @@ * text.align('right'); */ - Kinetic.Factory.addGetterSetter(Kinetic.Text, 'lineHeight', 1); + Konva.Factory.addGetterSetter(Konva.Text, 'lineHeight', 1); /** * get/set line height. The default is 1. * @name lineHeight * @method - * @memberof Kinetic.Text.prototype + * @memberof Konva.Text.prototype * @param {Number} lineHeight * @returns {Number} * @example @@ -442,13 +442,13 @@ * text.lineHeight(2); */ - Kinetic.Factory.addGetterSetter(Kinetic.Text, 'wrap', WORD); + Konva.Factory.addGetterSetter(Konva.Text, 'wrap', WORD); /** * get/set wrap. Can be word, char, or none. Default is word. * @name wrap * @method - * @memberof Kinetic.Text.prototype + * @memberof Konva.Text.prototype * @param {String} wrap * @returns {String} * @example @@ -459,14 +459,14 @@ * text.wrap('word'); */ - Kinetic.Factory.addGetter(Kinetic.Text, 'text', EMPTY_STRING); - Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Text, 'text'); + Konva.Factory.addGetter(Konva.Text, 'text', EMPTY_STRING); + Konva.Factory.addOverloadedGetterSetter(Konva.Text, 'text'); /** * get/set text * @name getText * @method - * @memberof Kinetic.Text.prototype + * @memberof Konva.Text.prototype * @param {String} text * @returns {String} * @example @@ -477,5 +477,5 @@ * text.text('Hello world!'); */ - Kinetic.Collection.mapMethods(Kinetic.Text); + Konva.Collection.mapMethods(Konva.Text); })(); diff --git a/src/shapes/Wedge.js b/src/shapes/Wedge.js index 946ff578..9d646e71 100644 --- a/src/shapes/Wedge.js +++ b/src/shapes/Wedge.js @@ -2,7 +2,7 @@ /** * Wedge constructor * @constructor - * @augments Kinetic.Shape + * @augments Konva.Shape * @param {Object} config * @param {Number} config.angle in degrees * @param {Number} config.radius @@ -11,7 +11,7 @@ * @@nodeParams * @example * // draw a wedge that's pointing downwards - * var wedge = new Kinetic.Wedge({ + * var wedge = new Konva.Wedge({ * radius: 40, * fill: 'red', * stroke: 'black' @@ -20,35 +20,35 @@ * rotationDeg: -120 * }); */ - Kinetic.Wedge = function(config) { + Konva.Wedge = function(config) { this.___init(config); }; - Kinetic.Wedge.prototype = { + Konva.Wedge.prototype = { ___init: function(config) { // call super constructor - Kinetic.Shape.call(this, config); + Konva.Shape.call(this, config); this.className = 'Wedge'; this.sceneFunc(this._sceneFunc); }, _sceneFunc: function(context) { context.beginPath(); - context.arc(0, 0, this.getRadius(), 0, Kinetic.getAngle(this.getAngle()), this.getClockwise()); + context.arc(0, 0, this.getRadius(), 0, Konva.getAngle(this.getAngle()), this.getClockwise()); context.lineTo(0, 0); context.closePath(); context.fillStrokeShape(this); } }; - Kinetic.Util.extend(Kinetic.Wedge, Kinetic.Shape); + Konva.Util.extend(Konva.Wedge, Konva.Shape); // add getters setters - Kinetic.Factory.addGetterSetter(Kinetic.Wedge, 'radius', 0); + Konva.Factory.addGetterSetter(Konva.Wedge, 'radius', 0); /** * get/set radius * @name radius * @method - * @memberof Kinetic.Wedge.prototype + * @memberof Konva.Wedge.prototype * @param {Number} radius * @returns {Number} * @example @@ -59,13 +59,13 @@ * wedge.radius(10); */ - Kinetic.Factory.addGetterSetter(Kinetic.Wedge, 'angle', 0); + Konva.Factory.addGetterSetter(Konva.Wedge, 'angle', 0); /** * get/set angle in degrees * @name angle * @method - * @memberof Kinetic.Wedge.prototype + * @memberof Konva.Wedge.prototype * @param {Number} angle * @returns {Number} * @example @@ -76,13 +76,13 @@ * wedge.angle(20); */ - Kinetic.Factory.addGetterSetter(Kinetic.Wedge, 'clockwise', false); + Konva.Factory.addGetterSetter(Konva.Wedge, 'clockwise', false); /** * get/set clockwise flag * @name clockwise * @method - * @memberof Kinetic.Wedge.prototype + * @memberof Konva.Wedge.prototype * @param {Number} clockwise * @returns {Number} * @example @@ -96,11 +96,11 @@ * wedge.clockwise(true); */ - Kinetic.Factory.backCompat(Kinetic.Wedge, { + Konva.Factory.backCompat(Konva.Wedge, { angleDeg: 'angle', getAngleDeg: 'getAngle', setAngleDeg: 'setAngle' }); - Kinetic.Collection.mapMethods(Kinetic.Wedge); + Konva.Collection.mapMethods(Konva.Wedge); })(); diff --git a/test/functional/DragAndDropEvents-test.js b/test/functional/DragAndDropEvents-test.js index 3096c8ab..a23e9037 100644 --- a/test/functional/DragAndDropEvents-test.js +++ b/test/functional/DragAndDropEvents-test.js @@ -3,9 +3,9 @@ suite('DragAndDropEvents', function() { test('test dragstart, dragmove, dragend', function(done) { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var greenCircle = new Kinetic.Circle({ + var greenCircle = new Konva.Circle({ x: 40, y: 40, radius: 20, @@ -16,7 +16,7 @@ suite('DragAndDropEvents', function() { }); - var circle = new Kinetic.Circle({ + var circle = new Konva.Circle({ x: 380, y: stage.getHeight() / 2, radius: 70, @@ -70,8 +70,8 @@ suite('DragAndDropEvents', function() { }); - assert(!Kinetic.isDragging(), ' isDragging() should be false 1'); - assert(!Kinetic.isDragReady(), ' isDragReady()) should be false 2'); + assert(!Konva.isDragging(), ' isDragging() should be false 1'); + assert(!Konva.isDragReady(), ' isDragReady()) should be false 2'); /* * simulate drag and drop @@ -86,8 +86,8 @@ suite('DragAndDropEvents', function() { //assert.equal(!dragMove, 'dragmove event should not have been triggered'); assert(!dragEnd, 'dragend event should not have been triggered 4'); - assert(!Kinetic.isDragging(), ' isDragging() should be false 5'); - assert(Kinetic.isDragReady(), ' isDragReady()) should be true 6'); + assert(!Konva.isDragging(), ' isDragging() should be false 5'); + assert(Konva.isDragReady(), ' isDragReady()) should be true 6'); setTimeout(function() { stage._mousemove({ @@ -95,19 +95,19 @@ suite('DragAndDropEvents', function() { clientY: 98 + top }); - assert(Kinetic.isDragging(), ' isDragging() should be true 7'); - assert(Kinetic.isDragReady(), ' isDragReady()) should be true 8'); + assert(Konva.isDragging(), ' isDragging() should be true 7'); + assert(Konva.isDragReady(), ' isDragReady()) should be true 8'); assert(dragStart, 'dragstart event was not triggered 9'); //assert.equal(dragMove, 'dragmove event was not triggered'); assert(!dragEnd, 'dragend event should not have been triggered 10'); - Kinetic.DD._endDragBefore(); + Konva.DD._endDragBefore(); stage._mouseup({ clientX: 100, clientY: 98 + top }); - Kinetic.DD._endDragAfter({dragEndNode:circle}); + Konva.DD._endDragAfter({dragEndNode:circle}); assert(dragStart, 'dragstart event was not triggered 11'); assert(dragMove, 'dragmove event was not triggered 12'); @@ -116,8 +116,8 @@ suite('DragAndDropEvents', function() { assert.equal(events.toString(), 'mouseup,dragend', 'mouseup should occur before dragend 14'); - assert(!Kinetic.isDragging(), ' isDragging() should be false 15'); - assert(!Kinetic.isDragReady(), ' isDragReady()) should be false 16'); + assert(!Konva.isDragging(), ' isDragging() should be false 15'); + assert(!Konva.isDragReady(), ' isDragReady()) should be false 16'); //console.log(greenCircle.getPosition()); //console.log(circle.getPosition()); @@ -139,9 +139,9 @@ suite('DragAndDropEvents', function() { // ====================================================== test('destroy shape while dragging', function(done) { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var greenCircle = new Kinetic.Circle({ + var greenCircle = new Konva.Circle({ x: 40, y: 40, radius: 20, @@ -152,7 +152,7 @@ suite('DragAndDropEvents', function() { }); - var circle = new Kinetic.Circle({ + var circle = new Konva.Circle({ x: 380, y: stage.getHeight() / 2, radius: 70, @@ -187,8 +187,8 @@ suite('DragAndDropEvents', function() { events.push('mouseup'); }); - assert(!Kinetic.isDragging(), ' isDragging() should be false'); - assert(!Kinetic.isDragReady(), ' isDragReady()) should be false'); + assert(!Konva.isDragging(), ' isDragging() should be false'); + assert(!Konva.isDragReady(), ' isDragReady()) should be false'); stage._mousedown({ @@ -226,9 +226,9 @@ suite('DragAndDropEvents', function() { // ====================================================== test('click should not occur after drag and drop', function(done) { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var circle = new Kinetic.Circle({ + var circle = new Konva.Circle({ x: 40, y: 40, radius: 20, @@ -265,12 +265,12 @@ suite('DragAndDropEvents', function() { clientY: 100 + top }); - Kinetic.DD._endDragBefore(); + Konva.DD._endDragBefore(); stage._mouseup({ clientX: 100, clientY: 100 + top }); - Kinetic.DD._endDragAfter({dragEndNode:circle}); + Konva.DD._endDragAfter({dragEndNode:circle}); assert(!clicked, 'click event should not have been fired'); @@ -282,9 +282,9 @@ suite('DragAndDropEvents', function() { // ====================================================== test('drag and drop distance', function(done) { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var circle = new Kinetic.Circle({ + var circle = new Konva.Circle({ x: 40, y: 40, radius: 20, @@ -316,12 +316,12 @@ suite('DragAndDropEvents', function() { clientY: 45 + top }); assert(circle.isDragging(), 'now circle is dragging'); - Kinetic.DD._endDragBefore(); + Konva.DD._endDragBefore(); stage._mouseup({ clientX: 41, clientY: 45 + top }); - Kinetic.DD._endDragAfter({dragEndNode:circle}); + Konva.DD._endDragAfter({dragEndNode:circle}); @@ -333,8 +333,8 @@ suite('DragAndDropEvents', function() { // ====================================================== test('cancel drag and drop by setting draggable to false', function(done) { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: 380, y: 100, radius: 70, @@ -383,12 +383,12 @@ suite('DragAndDropEvents', function() { clientY: 100 + top }); - Kinetic.DD._endDragBefore(); + Konva.DD._endDragBefore(); stage._mouseup({ clientX: 100, clientY: 100 + top }); - Kinetic.DD._endDragAfter({dragEndNode:circle}); + Konva.DD._endDragAfter({dragEndNode:circle}); assert.equal(circle.getPosition().x, 380, 'circle x should be 380'); assert.equal(circle.getPosition().y, 100, 'circle y should be 100'); @@ -399,7 +399,7 @@ suite('DragAndDropEvents', function() { // ====================================================== test('drag and drop layer', function(done) { var stage = addStage(); - var layer = new Kinetic.Layer({ + var layer = new Konva.Layer({ drawFunc: function() { var context = this.getContext(); context.beginPath(); @@ -413,14 +413,14 @@ suite('DragAndDropEvents', function() { draggable: true }); - var circle1 = new Kinetic.Circle({ + var circle1 = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, fill: 'red' }); - var circle2 = new Kinetic.Circle({ + var circle2 = new Konva.Circle({ x: 400, y: stage.getHeight() / 2, radius: 70, @@ -448,12 +448,12 @@ suite('DragAndDropEvents', function() { clientY: 109 + top }); - Kinetic.DD._endDragBefore(); + Konva.DD._endDragBefore(); stage._mouseup({ clientX: 210, clientY: 109 + top }); - Kinetic.DD._endDragAfter({dragEndNode:circle2}); + Konva.DD._endDragAfter({dragEndNode:circle2}); //console.log(layer.getPosition()) @@ -468,20 +468,20 @@ suite('DragAndDropEvents', function() { // ====================================================== test('drag and drop stage', function(done) { var container = document.createElement('div'), - stage = new Kinetic.Stage({ + stage = new Konva.Stage({ container: container, width: 578, height: 200, draggable: true }); - kineticContainer.appendChild(container); + konvaContainer.appendChild(container); //stage.setDraggable(true); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var circle = new Kinetic.Circle({ + var circle = new Konva.Circle({ x: 100, y: 100, radius: 70, @@ -510,12 +510,12 @@ suite('DragAndDropEvents', function() { clientY: 110 + top }); - Kinetic.DD._endDragBefore(); + Konva.DD._endDragBefore(); stage._mouseup({ clientX: 300, clientY: 110 + top }); - Kinetic.DD._endDragAfter(); + Konva.DD._endDragAfter(); assert.equal(stage.getX(), 300); assert.equal(stage.getY(), 10); diff --git a/test/functional/MouseEvents-test.js b/test/functional/MouseEvents-test.js index 2336f417..72ac1daa 100644 --- a/test/functional/MouseEvents-test.js +++ b/test/functional/MouseEvents-test.js @@ -1,14 +1,14 @@ suite('MouseEvents', function() { // NOTE: disable throttling so these tests can run synchronously - Kinetic.enableThrottling = false; + Konva.enableThrottling = false; // ====================================================== test('stage content mouse events', function(done) { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: 100, y: 100, radius: 70, @@ -149,9 +149,9 @@ suite('MouseEvents', function() { var top = stage.content.getBoundingClientRect().top; - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var circle = new Kinetic.Circle({ + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -179,12 +179,12 @@ suite('MouseEvents', function() { clientY: 112 + top }); - Kinetic.DD._endDragBefore(); + Konva.DD._endDragBefore(); stage._mouseup({ clientX: 291, clientY: 112 + top }); - Kinetic.DD._endDragAfter({dragEndNode:circle}); + Konva.DD._endDragAfter({dragEndNode:circle}); }); // ====================================================== @@ -193,9 +193,9 @@ suite('MouseEvents', function() { var top = stage.content.getBoundingClientRect().top; - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var circle = new Kinetic.Circle({ + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -219,7 +219,7 @@ suite('MouseEvents', function() { clientX: 291, clientY: 112 + top }); - Kinetic.DD._endDragBefore(); + Konva.DD._endDragBefore(); stage._mouseup({ clientX: 291, clientY: 112 + top @@ -232,7 +232,7 @@ suite('MouseEvents', function() { clientX: 291, clientY: 112 + top }); - Kinetic.DD._endDragBefore(); + Konva.DD._endDragBefore(); stage._mouseup({ clientX: 291, clientY: 112 + top @@ -245,7 +245,7 @@ suite('MouseEvents', function() { clientX: 291, clientY: 112 + top }); - Kinetic.DD._endDragBefore(); + Konva.DD._endDragBefore(); stage._mouseup({ clientX: 291, clientY: 112 + top @@ -257,7 +257,7 @@ suite('MouseEvents', function() { // ====================================================== test('click mapping', function() { var stage = addStage(); - var layer = new Kinetic.Layer({ + var layer = new Konva.Layer({ drawFunc: function() { var context = this.getContext(); context.beginPath(); @@ -270,14 +270,14 @@ suite('MouseEvents', function() { } }); - var redCircle = new Kinetic.Circle({ + var redCircle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, fill: 'red' }); - var greenCircle = new Kinetic.Circle({ + var greenCircle = new Konva.Circle({ x: 400, y: stage.getHeight() / 2, radius: 70, @@ -312,12 +312,12 @@ suite('MouseEvents', function() { clientY: 113 + top }); - Kinetic.DD._endDragBefore(); + Konva.DD._endDragBefore(); stage._mouseup({ clientX: 284, clientY: 113 + top }); - Kinetic.DD._endDragAfter({dragEndNode:redCircle}); + Konva.DD._endDragAfter({dragEndNode:redCircle}); assert.equal(redClicks, 1, 'red circle should have 1 click'); assert.equal(greenClicks, 0, 'green circle should have 0 clicks'); @@ -328,12 +328,12 @@ suite('MouseEvents', function() { clientY: 108 + top }); - Kinetic.DD._endDragBefore(); + Konva.DD._endDragBefore(); stage._mouseup({ clientX: 397, clientY: 108 + top }); - Kinetic.DD._endDragAfter({dragEndNode:redCircle}); + Konva.DD._endDragAfter({dragEndNode:redCircle}); assert.equal(redClicks, 1, 'red circle should have 1 click'); assert.equal(greenClicks, 1, 'green circle should have 1 click'); @@ -344,12 +344,12 @@ suite('MouseEvents', function() { clientY: 113 + top }); - Kinetic.DD._endDragBefore(); + Konva.DD._endDragBefore(); stage._mouseup({ clientX: 397, clientY: 108 + top }); - Kinetic.DD._endDragAfter({dragEndNode:redCircle}); + Konva.DD._endDragAfter({dragEndNode:redCircle}); assert.equal(redClicks, 1, 'red circle should still have 1 click'); assert.equal(greenClicks, 1, 'green circle should still have 1 click'); @@ -359,8 +359,8 @@ suite('MouseEvents', function() { // ====================================================== test('text events', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var text = new Kinetic.Text({ + var layer = new Konva.Layer(); + var text = new Konva.Text({ x: 290, y: 111, fontFamily: 'Calibri', @@ -389,12 +389,12 @@ suite('MouseEvents', function() { clientY: 120 + top }); - Kinetic.DD._endDragBefore(); + Konva.DD._endDragBefore(); stage._mouseup({ clientX: 300, clientY: 120 + top }); - Kinetic.DD._endDragAfter({dragEndNode:text}); + Konva.DD._endDragAfter({dragEndNode:text}); //TODO: can't get this to pass assert.equal(click, true, 'click event should have been fired when mousing down and then up on text'); @@ -404,10 +404,10 @@ suite('MouseEvents', function() { // ====================================================== test('modify fill stroke and stroke width on hover with circle', function(done) { var stage = addStage(); - var layer = new Kinetic.Layer({ + var layer = new Konva.Layer({ throttle: 999 }); - var circle = new Kinetic.Circle({ + var circle = new Konva.Circle({ x: 380, y: stage.getHeight() / 2, radius: 70, @@ -467,8 +467,8 @@ suite('MouseEvents', function() { // ====================================================== test('mousedown mouseup mouseover mouseout mousemove click dblclick', function(done) { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -636,10 +636,10 @@ suite('MouseEvents', function() { // ====================================================== test('test group mousedown events', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var group = new Kinetic.Group(); + var layer = new Konva.Layer(); + var group = new Konva.Group(); - var redCircle = new Kinetic.Circle({ + var redCircle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 80, @@ -649,7 +649,7 @@ suite('MouseEvents', function() { name: 'red' }); - var greenCircle = new Kinetic.Circle({ + var greenCircle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 40, @@ -715,10 +715,10 @@ suite('MouseEvents', function() { // ====================================================== test('test mousedown events with antialiasing', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var group = new Kinetic.Group(); + var layer = new Konva.Layer(); + var group = new Konva.Group(); - var greenCircle = new Kinetic.Circle({ + var greenCircle = new Konva.Circle({ x: 50, y: 50, radius: 50, @@ -755,8 +755,8 @@ suite('MouseEvents', function() { // ====================================================== test('group mouseenter events', function(done) { var stage = addStage(); - var layer = new Kinetic.Layer(); - var group = new Kinetic.Group({ + var layer = new Konva.Layer(); + var group = new Konva.Group({ name: 'group' }); @@ -767,7 +767,7 @@ suite('MouseEvents', function() { var groupMouseenters = 0; var groupMouseleaves = 0; - var redCircle = new Kinetic.Circle({ + var redCircle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 80, @@ -777,7 +777,7 @@ suite('MouseEvents', function() { name: 'red' }); - var greenCircle = new Kinetic.Circle({ + var greenCircle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 40, @@ -915,11 +915,11 @@ suite('MouseEvents', function() { // ====================================================== test('test mouseleave with multiple groups', function() { var stage = addStage(); - var layer = new Kinetic.Layer({ + var layer = new Konva.Layer({ id : 'layer' }); - var rect1 = new Kinetic.Rect({ + var rect1 = new Konva.Rect({ x:0, y:0, width: 100, @@ -928,7 +928,7 @@ suite('MouseEvents', function() { id : 'redRect' }); - var rect2 = new Kinetic.Rect({ + var rect2 = new Konva.Rect({ x:50, y:0, width: 70, @@ -938,10 +938,10 @@ suite('MouseEvents', function() { id : 'greenRect' }); - var group = new Kinetic.Group({ + var group = new Konva.Group({ id : 'group1' }); - var group2 = new Kinetic.Group({ + var group2 = new Konva.Group({ id : 'group2' }); group.add(rect1); @@ -1061,8 +1061,8 @@ suite('MouseEvents', function() { // ====================================================== test('test event bubbling', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: 380, y: stage.getHeight() / 2, radius: 70, @@ -1072,8 +1072,8 @@ suite('MouseEvents', function() { id: 'myCircle' }); - var group1 = new Kinetic.Group(); - var group2 = new Kinetic.Group(); + var group1 = new Konva.Group(); + var group2 = new Konva.Group(); /* * stage @@ -1120,12 +1120,12 @@ suite('MouseEvents', function() { clientX: 374, clientY: 114 + top }); - Kinetic.DD._endDragBefore(); + Konva.DD._endDragBefore(); stage._mouseup({ clientX: 374, clientY: 114 + top }); - Kinetic.DD._endDragAfter({dragEndNode:circle}); + Konva.DD._endDragAfter({dragEndNode:circle}); assert.equal(e.toString(), 'circle,group1,group2,layer,stage', 'problem with event bubbling'); @@ -1134,8 +1134,8 @@ suite('MouseEvents', function() { // ====================================================== test('test custom circle hit function', function(done) { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: 380, y: stage.getHeight() / 2, radius: 70, diff --git a/test/functional/TouchEvents-test.js b/test/functional/TouchEvents-test.js index 9df8f3a6..4a6a4453 100644 --- a/test/functional/TouchEvents-test.js +++ b/test/functional/TouchEvents-test.js @@ -3,8 +3,8 @@ suite('TouchEvents', function() { // ====================================================== test('stage content touch events', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: 100, y: 100, radius: 70, @@ -94,8 +94,8 @@ suite('TouchEvents', function() { // ====================================================== test('touchstart touchend touchmove tap dbltap', function(done) { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -149,7 +149,7 @@ suite('TouchEvents', function() { var top = stage.content.getBoundingClientRect().top; // reset inDoubleClickWindow - Kinetic.inDblClickWindow = false; + Konva.inDblClickWindow = false; // touchstart circle stage._touchstart({ @@ -175,7 +175,7 @@ suite('TouchEvents', function() { }); // end drag is tied to document mouseup and touchend event // which can't be simulated. call _endDrag manually - //Kinetic.DD._endDrag(); + //Konva.DD._endDrag(); assert(touchstart, '9) touchstart should be true'); assert(!touchmove, '9) touchmove should be false'); @@ -207,7 +207,7 @@ suite('TouchEvents', function() { }); // end drag is tied to document mouseup and touchend event // which can't be simulated. call _endDrag manually - //Kinetic.DD._endDrag(); + //Konva.DD._endDrag(); assert(touchstart, '11) touchstart should be true'); assert(!touchmove, '11) touchmove should be false'); diff --git a/test/manual/manual-test.js b/test/manual/manual-test.js index dc13e48d..e20bec55 100644 --- a/test/manual/manual-test.js +++ b/test/manual/manual-test.js @@ -3,9 +3,9 @@ suite('Manual', function() { // ====================================================== test('oscillation animation', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var hexagon = new Kinetic.RegularPolygon({ + var hexagon = new Konva.RegularPolygon({ x: stage.width()/2, y: stage.height()/2, sides: 6, @@ -16,7 +16,7 @@ suite('Manual', function() { }); - // var hexagon = new Kinetic.Rect({ + // var hexagon = new Konva.Rect({ // x: stage.width()/2, // y: stage.height()/2, // width: 100, @@ -34,7 +34,7 @@ suite('Manual', function() { // in ms var centerX = stage.width()/2; - var anim = new Kinetic.Animation(function(frame) { + var anim = new Konva.Animation(function(frame) { hexagon.setX(amplitude * Math.sin(new Date().getTime() * 2 * Math.PI / period) + centerX); }, layer); @@ -45,11 +45,11 @@ suite('Manual', function() { // ====================================================== test('rotation animation', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); var rect; for (var n=0; n<100; n++) { - rect = new Kinetic.Rect({ + rect = new Konva.Rect({ x: Math.random() * 400, y: Math.random() * 400, width: 100, @@ -68,7 +68,7 @@ suite('Manual', function() { var velocity = 360; // 1 rev per second - var anim = new Kinetic.Animation(function(frame) { + var anim = new Konva.Animation(function(frame) { layer.find('Rect').rotate(velocity * frame.timeDiff / 1000); }, layer); @@ -78,8 +78,8 @@ suite('Manual', function() { // ====================================================== test('tween node', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var rect = new Kinetic.Rect({ + var layer = new Konva.Layer(); + var rect = new Konva.Rect({ x: 100, y: 100, width: 100, @@ -93,7 +93,7 @@ suite('Manual', function() { layer.add(rect); stage.add(layer); - var tween = new Kinetic.Tween({ + var tween = new Konva.Tween({ node: rect, duration: 1, x: 400, @@ -114,9 +114,9 @@ suite('Manual', function() { // ====================================================== test('tween spline', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var spline = new Kinetic.Line({ + var spline = new Konva.Line({ points: [ 73, 160, 340, 23, @@ -134,7 +134,7 @@ suite('Manual', function() { layer.add(spline); stage.add(layer); - var tween = new Kinetic.Tween({ + var tween = new Konva.Tween({ node: spline, duration: 1, //x: 100, @@ -145,7 +145,7 @@ suite('Manual', function() { 500, 109, 100, 10 ], - easing: Kinetic.Easings.BackEaseOut, + easing: Konva.Easings.BackEaseOut, yoyo: false }); @@ -163,9 +163,9 @@ suite('Manual', function() { // ====================================================== test('blur and tween spline', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var spline = new Kinetic.Line({ + var spline = new Konva.Line({ points: [ 73, 160, 340, 23, @@ -188,7 +188,7 @@ suite('Manual', function() { height: stage.height() }); - spline.filters([Kinetic.Filters.Blur]).blurRadius(40); + spline.filters([Konva.Filters.Blur]).blurRadius(40); layer.draw(); layer.on('beforeDraw', function() { @@ -198,7 +198,7 @@ suite('Manual', function() { }); }); - var tween = new Kinetic.Tween({ + var tween = new Konva.Tween({ node: spline, duration: 2, //x: 100, @@ -210,7 +210,7 @@ suite('Manual', function() { 100, 10 ], blurRadius: 0, - easing: Kinetic.Easings.BackEaseOut, + easing: Konva.Easings.BackEaseOut, yoyo: false }); diff --git a/test/memLeakTest.html b/test/memLeakTest.html index 7008513d..26ff4f56 100644 --- a/test/memLeakTest.html +++ b/test/memLeakTest.html @@ -1,13 +1,13 @@ - KineticJS Memory leak test + KonvaJS Memory leak test Check memory before tests. Open console. Run "run()". See memory after.
- + + + + + diff --git a/test/performance/random-squares-v5.0.1.html b/test/performance/random-squares-v5.0.1.html index 84c0a1de..803578ad 100644 --- a/test/performance/random-squares-v5.0.1.html +++ b/test/performance/random-squares-v5.0.1.html @@ -14,7 +14,7 @@
- + diff --git a/test/performance/rotate-cached-star.html b/test/performance/rotate-cached-star.html index f495ad2e..07ee9a75 100644 --- a/test/performance/rotate-cached-star.html +++ b/test/performance/rotate-cached-star.html @@ -14,7 +14,7 @@
- + @@ -22,14 +22,14 @@ - var stage = new Kinetic.Stage({ + var stage = new Konva.Stage({ container: 'container', width: 500, height: 500 }); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var star = new Kinetic.Star({ + var star = new Konva.Star({ x: 250, y: 250, innerRadius: 100, @@ -45,7 +45,7 @@ layer.add(star); stage.add(layer); - var anim = new Kinetic.Animation(function() { + var anim = new Konva.Animation(function() { stats.begin(); star.rotate(0.1); }, layer); diff --git a/test/performance/rotate-star.html b/test/performance/rotate-star.html index ee8a4898..d6355a20 100644 --- a/test/performance/rotate-star.html +++ b/test/performance/rotate-star.html @@ -14,7 +14,7 @@
- + @@ -22,14 +22,14 @@ - var stage = new Kinetic.Stage({ + var stage = new Konva.Stage({ container: 'container', width: 500, height: 500 }); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var star = new Kinetic.Star({ + var star = new Konva.Star({ x: 250, y: 250, innerRadius: 100, @@ -45,7 +45,7 @@ layer.add(star); stage.add(layer); - var anim = new Kinetic.Animation(function() { + var anim = new Konva.Animation(function() { stats.begin(); star.rotate(0.1); }, layer); diff --git a/test/runner.html b/test/runner.html index f536fafb..2c31f53b 100644 --- a/test/runner.html +++ b/test/runner.html @@ -1,7 +1,7 @@ - KineticJS Mocha Tests + KonvaJS Mocha Tests -

KineticJS Test

+

KonvaJS Test

-
+
- + diff --git a/test/runner.js b/test/runner.js index b7f92f4f..3065845c 100644 --- a/test/runner.js +++ b/test/runner.js @@ -1,7 +1,7 @@ mocha.ui('tdd'); mocha.setup("bdd"); var assert = chai.assert, - kineticContainer = document.getElementById('kinetic-container'), + konvaContainer = document.getElementById('konva-container'), origAssertEqual = assert.equal, origAssert = assert, origNotEqual = assert.notEqual, @@ -57,8 +57,8 @@ function init() { -Kinetic.enableTrace = true; -Kinetic.showWarnings = false; +Konva.enableTrace = true; +Konva.showWarnings = false; function addStats() { stats = new Stats(); @@ -85,13 +85,13 @@ function addStats() { function addStage() { var container = document.createElement('div'), - stage = new Kinetic.Stage({ + stage = new Konva.Stage({ container: container, width: 578, height: 200 }); - kineticContainer.appendChild(container); + konvaContainer.appendChild(container); return stage; } @@ -136,7 +136,7 @@ function compareLayerAndCanvas(layer, canvas, tol) { div.appendChild(b); div.appendChild(c); - kineticContainer.appendChild(div); + konvaContainer.appendChild(div); } assert.equal(equal, true); @@ -145,7 +145,7 @@ function compareLayerAndCanvas(layer, canvas, tol) { function addContainer() { var container = document.createElement('div'); - kineticContainer.appendChild(container); + konvaContainer.appendChild(container); return container; } @@ -153,13 +153,13 @@ function addContainer() { function showCanvas(canvas) { canvas.style.position = 'relative'; - kineticContainer.appendChild(canvas); + konvaContainer.appendChild(canvas); } function showHit(layer) { var canvas = layer.hitCanvas._canvas; canvas.style.position = 'relative'; - kineticContainer.appendChild(canvas); + konvaContainer.appendChild(canvas); } beforeEach(function(){ @@ -167,13 +167,13 @@ beforeEach(function(){ test = this.currentTest; title.innerHTML = test.parent.title + ' - ' + test.title; - title.className = 'kinetic-title'; - kineticContainer.appendChild(title); + title.className = 'konva-title'; + konvaContainer.appendChild(title); // resets - Kinetic.inDblClickWindow = false; - Kinetic.DD.isDragging = false; - Kinetic.DD.node = undefined; + Konva.inDblClickWindow = false; + Konva.DD.isDragging = false; + Konva.DD.node = undefined; }); init(); \ No newline at end of file diff --git a/test/unit/Animation-test.js b/test/unit/Animation-test.js index 097537bc..7138a693 100644 --- a/test/unit/Animation-test.js +++ b/test/unit/Animation-test.js @@ -2,8 +2,8 @@ suite('Animation', function() { // ====================================================== test('test start and stop', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var rect = new Kinetic.Rect({ + var layer = new Konva.Layer(); + var rect = new Konva.Rect({ x: 200, y: 100, width: 100, @@ -21,10 +21,10 @@ suite('Animation', function() { // in ms var centerX = stage.getWidth() / 2 - 100 / 2; - var anim = new Kinetic.Animation(function(frame) { + var anim = new Konva.Animation(function(frame) { rect.setX(amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX); }, layer); - var a = Kinetic.Animation.animations; + var a = Konva.Animation.animations; var startLen = a.length; assert.equal(a.length, startLen, '1should be no animations running'); @@ -51,8 +51,8 @@ suite('Animation', function() { // ====================================================== test('layer batch draw', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var rect = new Kinetic.Rect({ + var layer = new Konva.Layer(); + var rect = new Konva.Rect({ x: 200, y: 100, width: 100, @@ -88,8 +88,8 @@ suite('Animation', function() { // ====================================================== test('stage batch draw', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var rect = new Kinetic.Rect({ + var layer = new Konva.Layer(); + var rect = new Konva.Rect({ x: 200, y: 100, width: 100, diff --git a/test/unit/BaseLayer-test.js b/test/unit/BaseLayer-test.js index c39bd716..b735b5fd 100644 --- a/test/unit/BaseLayer-test.js +++ b/test/unit/BaseLayer-test.js @@ -4,7 +4,7 @@ suite('BaseLayer', function() { test('width and height', function() { var stage = addStage(); - var layer = new Kinetic.FastLayer(); + var layer = new Konva.FastLayer(); assert.equal(layer.width(), undefined, 'while layer is not on stage width is undefined'); assert.equal(layer.height(), undefined, 'while layer is not on stage height is undefined'); diff --git a/test/unit/Canvas-test.js b/test/unit/Canvas-test.js index 3179908d..276d5fac 100644 --- a/test/unit/Canvas-test.js +++ b/test/unit/Canvas-test.js @@ -3,9 +3,9 @@ suite('Canvas', function() { test('pixel ratio', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var circle = new Kinetic.Circle({ + var circle = new Konva.Circle({ x: 578/2, y: 100, radius: 70, diff --git a/test/unit/Collection-test.js b/test/unit/Collection-test.js index 2f6684e7..dcd8e2ec 100644 --- a/test/unit/Collection-test.js +++ b/test/unit/Collection-test.js @@ -3,22 +3,22 @@ suite('Collection', function(){ test('test collection method mapping', function(){ // Node method - assert.notEqual(Kinetic.Collection.prototype.on, undefined); + assert.notEqual(Konva.Collection.prototype.on, undefined); // Layer method - assert.notEqual(Kinetic.Collection.prototype.getContext, undefined); + assert.notEqual(Konva.Collection.prototype.getContext, undefined); // Container method - assert.notEqual(Kinetic.Collection.prototype.hasChildren, undefined); + assert.notEqual(Konva.Collection.prototype.hasChildren, undefined); // Shape method - assert.notEqual(Kinetic.Collection.prototype.strokeWidth, undefined); + assert.notEqual(Konva.Collection.prototype.strokeWidth, undefined); }); test('add circle to stage', function(){ var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle1 = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle1 = new Konva.Circle({ x: 100, y: 100, radius: 70, @@ -30,7 +30,7 @@ suite('Collection', function(){ }); - var circle2 = new Kinetic.Circle({ + var circle2 = new Konva.Circle({ x:300, y: 100, radius: 70, diff --git a/test/unit/Container-test.js b/test/unit/Container-test.js index b467bc34..844a8d47 100644 --- a/test/unit/Container-test.js +++ b/test/unit/Container-test.js @@ -3,11 +3,11 @@ suite('Container', function() { // ====================================================== test('clip', function() { var stage = addStage(); - var layer = new Kinetic.Layer({ + var layer = new Konva.Layer({ clip: {x:0, y:0, width:stage.getWidth() / 2, height:100} }); - var group = new Kinetic.Group(); - var circle = new Kinetic.Circle({ + var group = new Konva.Group(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -27,9 +27,9 @@ suite('Container', function() { // ====================================================== test('adder validation', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var group = new Kinetic.Group(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var group = new Konva.Group(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -124,9 +124,9 @@ suite('Container', function() { // ====================================================== test('add layer then group then shape', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var group = new Kinetic.Group(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var group = new Konva.Group(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -146,9 +146,9 @@ suite('Container', function() { // ====================================================== test('add shape then stage then layer', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var group = new Kinetic.Group(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var group = new Konva.Group(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -166,10 +166,10 @@ suite('Container', function() { // ====================================================== test('select shape by id and name', function() { var stage = addStage(); - var layer = new Kinetic.Layer({ + var layer = new Konva.Layer({ id: 'myLayer' }); - var circle = new Kinetic.Circle({ + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -179,7 +179,7 @@ suite('Container', function() { id: 'myCircle' }); - var rect = new Kinetic.Rect({ + var rect = new Konva.Rect({ x: 300, y: 100, width: 100, @@ -209,9 +209,9 @@ suite('Container', function() { // ====================================================== test('select shape by name with "-" char', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var rect = new Kinetic.Rect({ + var rect = new Konva.Rect({ x: 300, y: 100, width: 100, @@ -232,10 +232,10 @@ suite('Container', function() { // ====================================================== test('select shapes with multiple selectors', function() { var stage = addStage(); - var layer = new Kinetic.Layer({ + var layer = new Konva.Layer({ id: 'myLayer' }); - var circle = new Kinetic.Circle({ + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -245,7 +245,7 @@ suite('Container', function() { id: 'myCircle' }); - var rect = new Kinetic.Rect({ + var rect = new Konva.Rect({ x: 300, y: 100, width: 100, @@ -275,8 +275,8 @@ suite('Container', function() { // ====================================================== test('set x on an array of nodes', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -286,7 +286,7 @@ suite('Container', function() { name: 'myShape' }); - var rect = new Kinetic.Rect({ + var rect = new Konva.Rect({ x: 300, y: 100, width: 100, @@ -319,8 +319,8 @@ suite('Container', function() { // ====================================================== test('set fill on array by Shape-selector', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -330,7 +330,7 @@ suite('Container', function() { name: 'myShape' }); - var rect = new Kinetic.Rect({ + var rect = new Konva.Rect({ x: 300, y: 100, width: 100, @@ -363,8 +363,8 @@ suite('Container', function() { // ====================================================== test('add listener to an array of nodes', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -374,7 +374,7 @@ suite('Container', function() { name: 'myShape' }); - var rect = new Kinetic.Rect({ + var rect = new Konva.Rect({ x: 300, y: 100, width: 100, @@ -405,8 +405,8 @@ suite('Container', function() { // ====================================================== test('test ids and names hashes', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -416,7 +416,7 @@ suite('Container', function() { id: 'myCircle3' }); - var rect = new Kinetic.Rect({ + var rect = new Konva.Rect({ x: 300, y: 100, width: 100, @@ -432,31 +432,31 @@ suite('Container', function() { stage.add(layer); - assert.equal(Kinetic.ids['myCircle3'].getId(), 'myCircle3', 'circle id not in ids hash'); - assert.equal(Kinetic.names['myRect3'][0].getName(), 'myRect3', 'rect name not in names hash'); + assert.equal(Konva.ids['myCircle3'].getId(), 'myCircle3', 'circle id not in ids hash'); + assert.equal(Konva.names['myRect3'][0].getName(), 'myRect3', 'rect name not in names hash'); circle.setId('newCircleId'); - assert.notEqual(Kinetic.ids['newCircleId'], undefined, 'circle not in ids hash'); - assert.equal(Kinetic.ids['myCircle3'], undefined, 'old circle id key is still in ids hash'); + assert.notEqual(Konva.ids['newCircleId'], undefined, 'circle not in ids hash'); + assert.equal(Konva.ids['myCircle3'], undefined, 'old circle id key is still in ids hash'); rect.setName('newRectName'); - assert.notEqual(Kinetic.names['newRectName'][0], undefined, 'new rect name not in names hash'); - assert.equal(Kinetic.names['myRect3'], undefined, 'old rect name is still in names hash'); + assert.notEqual(Konva.names['newRectName'][0], undefined, 'new rect name not in names hash'); + assert.equal(Konva.names['myRect3'], undefined, 'old rect name is still in names hash'); }); // ====================================================== test('add layer', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); stage.add(layer); }); // ====================================================== test('remove all children from layer', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var group = new Kinetic.Group(); - var circle1 = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var group = new Konva.Group(); + var circle1 = new Konva.Circle({ x: 100, y: stage.getHeight() / 2, radius: 70, @@ -465,7 +465,7 @@ suite('Container', function() { strokeWidth: 4 }); - var circle2 = new Kinetic.Circle({ + var circle2 = new Konva.Circle({ x: 300, y: stage.getHeight() / 2, radius: 70, @@ -492,12 +492,12 @@ suite('Container', function() { // ====================================================== test('destroy all children from layer', function() { var stage = addStage(); - var layer = new Kinetic.Layer({ + var layer = new Konva.Layer({ name: 'layerName', id: 'layerId' }); - var group = new Kinetic.Group(); - var circle1 = new Kinetic.Circle({ + var group = new Konva.Group(); + var circle1 = new Konva.Circle({ x: 100, y: stage.getHeight() / 2, radius: 70, @@ -508,7 +508,7 @@ suite('Container', function() { id: 'circleId' }); - var circle2 = new Kinetic.Circle({ + var circle2 = new Konva.Circle({ x: 300, y: stage.getHeight() / 2, radius: 70, @@ -524,25 +524,25 @@ suite('Container', function() { assert.equal(layer.children.length, 1, 'layer should have 1 children'); assert.equal(group.children.length, 2, 'group should have 2 children'); - assert(Kinetic.names.circleName.length > 0, 'circleName should be in names hash'); - assert.equal(Kinetic.ids.circleId.getId(), 'circleId', 'layerId should be in ids hash'); + assert(Konva.names.circleName.length > 0, 'circleName should be in names hash'); + assert.equal(Konva.ids.circleId.getId(), 'circleId', 'layerId should be in ids hash'); layer.destroyChildren(); layer.draw(); assert.equal(layer.children.length, 0, 'layer should have 0 children'); assert.equal(group.children.length, 0, 'group should have 0 children'); - assert.equal(Kinetic.names.circleName, undefined, 'circleName should not be in names hash'); - assert.equal(Kinetic.ids.circleId, undefined, 'layerId should not be in ids hash'); + assert.equal(Konva.names.circleName, undefined, 'circleName should not be in names hash'); + assert.equal(Konva.ids.circleId, undefined, 'layerId should not be in ids hash'); }); // ====================================================== test('add group', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var group = new Kinetic.Group(); + var layer = new Konva.Layer(); + var group = new Konva.Group(); - var circle = new Kinetic.Circle({ + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -559,12 +559,12 @@ suite('Container', function() { // ====================================================== test('create two groups, move first group', function() { var stage = addStage(); - var greenLayer = new Kinetic.Layer(); - var blueLayer = new Kinetic.Layer(); - var greenGroup = new Kinetic.Group(); - var blueGroup = new Kinetic.Group(); + var greenLayer = new Konva.Layer(); + var blueLayer = new Konva.Layer(); + var greenGroup = new Konva.Group(); + var blueGroup = new Konva.Group(); - var greencircle = new Kinetic.Circle({ + var greencircle = new Konva.Circle({ x: stage.getWidth() / 2 - 100, y: stage.getHeight() / 2, radius: 70, @@ -574,7 +574,7 @@ suite('Container', function() { draggable: true }); - var bluecircle = new Kinetic.Circle({ + var bluecircle = new Konva.Circle({ x: stage.getWidth() / 2 + 100, y: stage.getHeight() / 2, radius: 70, @@ -591,8 +591,8 @@ suite('Container', function() { stage.add(blueLayer); blueLayer.removeChildren(); - var blueGroup2 = new Kinetic.Group(); - var bluecircle2 = new Kinetic.Circle({ + var blueGroup2 = new Konva.Group(); + var bluecircle2 = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -610,11 +610,11 @@ suite('Container', function() { // ====================================================== test('node type selector', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var fooLayer = new Kinetic.Layer(); - var group = new Kinetic.Group(); + var layer = new Konva.Layer(); + var fooLayer = new Konva.Layer(); + var group = new Konva.Group(); - var blue = new Kinetic.Rect({ + var blue = new Konva.Rect({ x: 200, y: 100, width: 100, @@ -622,7 +622,7 @@ suite('Container', function() { fill: 'blue' }); - var red = new Kinetic.Rect({ + var red = new Konva.Rect({ x: 250, y: 100, width: 100, @@ -659,12 +659,12 @@ suite('Container', function() { // ====================================================== test('node and shape type selector', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var layer2 = new Kinetic.Layer(); - var fooLayer = new Kinetic.Layer(); - var group = new Kinetic.Group(); + var layer = new Konva.Layer(); + var layer2 = new Konva.Layer(); + var fooLayer = new Konva.Layer(); + var group = new Konva.Group(); - var blue = new Kinetic.Rect({ + var blue = new Konva.Rect({ x: 100, y: 50, width: 100, @@ -672,7 +672,7 @@ suite('Container', function() { fill: 'blue' }); - var red = new Kinetic.Rect({ + var red = new Konva.Rect({ x: 150, y: 75, width: 100, @@ -680,7 +680,7 @@ suite('Container', function() { fill: 'red' }); - var green = new Kinetic.Rect({ + var green = new Konva.Rect({ x: 200, y: 100, width: 100, @@ -688,21 +688,21 @@ suite('Container', function() { fill: 'green' }); - var blueCircle = new Kinetic.Circle({ + var blueCircle = new Konva.Circle({ x: 350, y: 75, radius: 40, fill: 'blue' }); - var redCircle = new Kinetic.Circle({ + var redCircle = new Konva.Circle({ x: 400, y: 125, radius: 40, fill: 'red' }); - var textpath = new Kinetic.TextPath({ + var textpath = new Konva.TextPath({ y: 35, stroke: 'black', strokeWidth: 1, @@ -713,7 +713,7 @@ suite('Container', function() { data: "M 10,10 300,150 550,150" }); - var path = new Kinetic.Path({ + var path = new Konva.Path({ x: 200, y: -75, data: 'M200,100h100v50z', @@ -726,7 +726,7 @@ suite('Container', function() { shadowOpacity: 0.5 }); - var poly = new Kinetic.RegularPolygon({ + var poly = new Konva.RegularPolygon({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, sides: 5, @@ -790,15 +790,15 @@ suite('Container', function() { // ====================================================== test('test find() selector by adding shapes with multiple names', function() { var stage = addStage(); - var layer = new Kinetic.Layer({ + var layer = new Konva.Layer({ name: 'layerName', id: 'layerId' }); - var group = new Kinetic.Group({ + var group = new Konva.Group({ name: 'groupName', id: 'groupId' }); - var rect = new Kinetic.Rect({ + var rect = new Konva.Rect({ x: 200, y: 20, width: 100, @@ -807,7 +807,7 @@ suite('Container', function() { name: 'red rectangle', id: 'rectId' }); - var circle = new Kinetic.Circle({ + var circle = new Konva.Circle({ x: 50, y: 50, radius: 20, @@ -846,15 +846,15 @@ suite('Container', function() { // ====================================================== test('test find() selector by adding shape, then group, then layer', function() { var stage = addStage(); - var layer = new Kinetic.Layer({ + var layer = new Konva.Layer({ name: 'layerName', id: 'layerId' }); - var group = new Kinetic.Group({ + var group = new Konva.Group({ name: 'groupName', id: 'groupId' }); - var rect = new Kinetic.Rect({ + var rect = new Konva.Rect({ x: 200, y: 20, width: 100, @@ -889,15 +889,15 @@ suite('Container', function() { // ====================================================== test('test find() selector by adding group, then shape, then layer', function() { var stage = addStage(); - var layer = new Kinetic.Layer({ + var layer = new Konva.Layer({ name: 'layerName', id: 'layerId' }); - var group = new Kinetic.Group({ + var group = new Konva.Group({ name: 'groupName', id: 'groupId' }); - var rect = new Kinetic.Rect({ + var rect = new Konva.Rect({ x: 200, y: 20, width: 100, @@ -932,15 +932,15 @@ suite('Container', function() { // ====================================================== test('test deprecated get() method', function() { var stage = addStage(); - var layer = new Kinetic.Layer({ + var layer = new Konva.Layer({ name: 'layerName', id: 'layerId' }); - var group = new Kinetic.Group({ + var group = new Konva.Group({ name: 'groupName', id: 'groupId' }); - var rect = new Kinetic.Rect({ + var rect = new Konva.Rect({ x: 200, y: 20, width: 100, @@ -962,15 +962,15 @@ suite('Container', function() { // ====================================================== test('test find() selector by adding group, then layer, then shape', function() { var stage = addStage(); - var layer = new Kinetic.Layer({ + var layer = new Konva.Layer({ name: 'layerName', id: 'layerId' }); - var group = new Kinetic.Group({ + var group = new Konva.Group({ name: 'groupName', id: 'groupId' }); - var rect = new Kinetic.Rect({ + var rect = new Konva.Rect({ x: 200, y: 20, width: 100, @@ -1005,15 +1005,15 @@ suite('Container', function() { // ====================================================== test('test find() selector by adding layer, then group, then shape', function() { var stage = addStage(); - var layer = new Kinetic.Layer({ + var layer = new Konva.Layer({ name: 'layerName', id: 'layerId' }); - var group = new Kinetic.Group({ + var group = new Konva.Group({ name: 'groupName', id: 'groupId' }); - var rect = new Kinetic.Rect({ + var rect = new Konva.Rect({ x: 200, y: 20, width: 100, @@ -1050,8 +1050,8 @@ suite('Container', function() { // ====================================================== test('add layer then shape', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -1069,10 +1069,10 @@ suite('Container', function() { // ====================================================== test('move blue layer on top of green layer with setZIndex', function() { var stage = addStage(); - var blueLayer = new Kinetic.Layer(); - var greenLayer = new Kinetic.Layer(); + var blueLayer = new Konva.Layer(); + var greenLayer = new Konva.Layer(); - var bluecircle = new Kinetic.Circle({ + var bluecircle = new Konva.Circle({ x: 200, y: stage.getHeight() / 2, radius: 70, @@ -1081,7 +1081,7 @@ suite('Container', function() { strokeWidth: 4 }); - var greencircle = new Kinetic.Circle({ + var greencircle = new Konva.Circle({ x: 280, y: stage.getHeight() / 2, radius: 70, @@ -1107,10 +1107,10 @@ suite('Container', function() { // ====================================================== test('move blue layer on top of green layer with moveToTop', function() { var stage = addStage(); - var blueLayer = new Kinetic.Layer(); - var greenLayer = new Kinetic.Layer(); + var blueLayer = new Konva.Layer(); + var greenLayer = new Konva.Layer(); - var bluecircle = new Kinetic.Circle({ + var bluecircle = new Konva.Circle({ x: 200, y: stage.getHeight() / 2, radius: 70, @@ -1119,7 +1119,7 @@ suite('Container', function() { strokeWidth: 4 }); - var greencircle = new Kinetic.Circle({ + var greencircle = new Konva.Circle({ x: 280, y: stage.getHeight() / 2, radius: 70, @@ -1141,10 +1141,10 @@ suite('Container', function() { // ====================================================== test('move green layer below blue layer with moveToBottom', function() { var stage = addStage(); - var blueLayer = new Kinetic.Layer(); - var greenLayer = new Kinetic.Layer(); + var blueLayer = new Konva.Layer(); + var greenLayer = new Konva.Layer(); - var bluecircle = new Kinetic.Circle({ + var bluecircle = new Konva.Circle({ x: 200, y: stage.getHeight() / 2, radius: 70, @@ -1153,7 +1153,7 @@ suite('Container', function() { strokeWidth: 4 }); - var greencircle = new Kinetic.Circle({ + var greencircle = new Konva.Circle({ x: 280, y: stage.getHeight() / 2, radius: 70, @@ -1175,10 +1175,10 @@ suite('Container', function() { // ====================================================== test('move green layer below blue layer with moveDown', function() { var stage = addStage(); - var blueLayer = new Kinetic.Layer(); - var greenLayer = new Kinetic.Layer(); + var blueLayer = new Konva.Layer(); + var greenLayer = new Konva.Layer(); - var bluecircle = new Kinetic.Circle({ + var bluecircle = new Konva.Circle({ x: 200, y: stage.getHeight() / 2, radius: 70, @@ -1187,7 +1187,7 @@ suite('Container', function() { strokeWidth: 4 }); - var greencircle = new Kinetic.Circle({ + var greencircle = new Konva.Circle({ x: 280, y: stage.getHeight() / 2, radius: 70, @@ -1208,10 +1208,10 @@ suite('Container', function() { // ====================================================== test('move blue layer above green layer with moveUp', function() { var stage = addStage(); - var blueLayer = new Kinetic.Layer(); - var greenLayer = new Kinetic.Layer(); + var blueLayer = new Konva.Layer(); + var greenLayer = new Konva.Layer(); - var bluecircle = new Kinetic.Circle({ + var bluecircle = new Konva.Circle({ x: 200, y: stage.getHeight() / 2, radius: 70, @@ -1220,7 +1220,7 @@ suite('Container', function() { strokeWidth: 4 }); - var greencircle = new Kinetic.Circle({ + var greencircle = new Konva.Circle({ x: 280, y: stage.getHeight() / 2, radius: 70, @@ -1241,9 +1241,9 @@ suite('Container', function() { // ====================================================== test('move blue circle on top of green circle with moveToTop', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var bluecircle = new Kinetic.Circle({ + var bluecircle = new Konva.Circle({ x: 200, y: stage.getHeight() / 2, radius: 70, @@ -1252,7 +1252,7 @@ suite('Container', function() { strokeWidth: 4 }); - var greencircle = new Kinetic.Circle({ + var greencircle = new Konva.Circle({ x: 280, y: stage.getHeight() / 2, radius: 70, @@ -1279,9 +1279,9 @@ suite('Container', function() { // ====================================================== test('move green circle below blue circle with moveDown', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var bluecircle = new Kinetic.Circle({ + var bluecircle = new Konva.Circle({ x: 200, y: stage.getHeight() / 2, radius: 70, @@ -1290,7 +1290,7 @@ suite('Container', function() { strokeWidth: 4 }); - var greencircle = new Kinetic.Circle({ + var greencircle = new Konva.Circle({ x: 280, y: stage.getHeight() / 2, radius: 70, @@ -1317,9 +1317,9 @@ suite('Container', function() { // ====================================================== test('layer layer when only one layer', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var bluecircle = new Kinetic.Circle({ + var bluecircle = new Konva.Circle({ x: 200, y: stage.getHeight() / 2, radius: 70, @@ -1351,11 +1351,11 @@ suite('Container', function() { // ====================================================== test('move blue group on top of green group with moveToTop', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var greenGroup = new Kinetic.Group(); - var blueGroup = new Kinetic.Group(); + var layer = new Konva.Layer(); + var greenGroup = new Konva.Group(); + var blueGroup = new Konva.Group(); - var bluecircle = new Kinetic.Circle({ + var bluecircle = new Konva.Circle({ x: 200, y: stage.getHeight() / 2, radius: 70, @@ -1364,7 +1364,7 @@ suite('Container', function() { strokeWidth: 4 }); - var greencircle = new Kinetic.Circle({ + var greencircle = new Konva.Circle({ x: 280, y: stage.getHeight() / 2, radius: 70, @@ -1394,11 +1394,11 @@ suite('Container', function() { // ====================================================== test('move blue group on top of green group with moveUp', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var greenGroup = new Kinetic.Group(); - var blueGroup = new Kinetic.Group(); + var layer = new Konva.Layer(); + var greenGroup = new Konva.Group(); + var blueGroup = new Konva.Group(); - var bluecircle = new Kinetic.Circle({ + var bluecircle = new Konva.Circle({ x: 200, y: stage.getHeight() / 2, radius: 70, @@ -1407,7 +1407,7 @@ suite('Container', function() { strokeWidth: 4 }); - var greencircle = new Kinetic.Circle({ + var greencircle = new Konva.Circle({ x: 280, y: stage.getHeight() / 2, radius: 70, @@ -1437,11 +1437,11 @@ suite('Container', function() { // ====================================================== test('add and moveTo should work same way (depend on parent)', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var greenGroup = new Kinetic.Group(); - var blueGroup = new Kinetic.Group(); + var layer = new Konva.Layer(); + var greenGroup = new Konva.Group(); + var blueGroup = new Konva.Group(); - var bluecircle = new Kinetic.Circle({ + var bluecircle = new Konva.Circle({ x: 200, y: stage.getHeight() / 2, radius: 70, @@ -1472,10 +1472,10 @@ suite('Container', function() { // ====================================================== test('getChildren may use filter function', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var group = new Kinetic.Group(); + var layer = new Konva.Layer(); + var group = new Konva.Group(); - var circle1 = new Kinetic.Circle({ + var circle1 = new Konva.Circle({ x: 200, y: stage.getHeight() / 2, radius: 70, @@ -1486,7 +1486,7 @@ suite('Container', function() { var circle2 = circle1.clone(); group.add(circle1).add(circle2); - var rect = new Kinetic.Rect({ + var rect = new Konva.Rect({ name : 'test' }); group.add(rect); @@ -1511,20 +1511,20 @@ suite('Container', function() { test('add multiple nodes to container', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle1 = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle1 = new Konva.Circle({ x: 0, y: 0, radius: 10, fill: 'red' }); - var circle2 = new Kinetic.Circle({ + var circle2 = new Konva.Circle({ x: 0, y: 0, radius: 10, fill: 'white' }); - var circle3 = new Kinetic.Circle({ + var circle3 = new Konva.Circle({ x: 0, y: 0, radius: 10, diff --git a/test/unit/DragAndDrop-test.js b/test/unit/DragAndDrop-test.js index 6f9ab339..7ed9c79d 100644 --- a/test/unit/DragAndDrop-test.js +++ b/test/unit/DragAndDrop-test.js @@ -3,8 +3,8 @@ suite('DragAndDrop', function() { // ====================================================== test('test drag and drop properties and methods', function(done) { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -45,8 +45,8 @@ suite('DragAndDrop', function() { // ====================================================== test('multiple drag and drop sets with setDraggable()', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: 380, y: stage.getHeight() / 2, radius: 70, @@ -72,9 +72,9 @@ suite('DragAndDrop', function() { var top = stage.content.getBoundingClientRect().top; - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var circle = new Kinetic.Circle({ + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -100,12 +100,12 @@ suite('DragAndDrop', function() { assert(circle.isDragging(), 'dragging is ok'); - Kinetic.DD._endDragBefore(); + Konva.DD._endDragBefore(); stage._mouseup({ clientX: 291, clientY: 112 + top }); - Kinetic.DD._endDragAfter({dragEndNode:circle}); + Konva.DD._endDragAfter({dragEndNode:circle}); @@ -123,13 +123,13 @@ suite('DragAndDrop', function() { assert(circle.isDragging() === false, 'no dragging with right click'); - Kinetic.DD._endDragBefore(); + Konva.DD._endDragBefore(); stage._mouseup({ clientX: 291, clientY: 112 + top, button: 2 }); - Kinetic.DD._endDragAfter({dragEndNode:circle}); + Konva.DD._endDragAfter({dragEndNode:circle}); }); // ====================================================== @@ -138,13 +138,13 @@ suite('DragAndDrop', function() { var top = stage.content.getBoundingClientRect().top; - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); stage.add(layer); - var dragLayer = new Kinetic.Layer(); + var dragLayer = new Konva.Layer(); stage.add(dragLayer); - var circle = new Kinetic.Circle({ + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -158,7 +158,7 @@ suite('DragAndDrop', function() { dragLayer.add(circle); dragLayer.draw(); - var rect = new Kinetic.Rect({ + var rect = new Konva.Rect({ fill: 'green', stroke: 'black', strokeWidth: 4, @@ -207,12 +207,12 @@ suite('DragAndDrop', function() { assert.equal(!!shape, false, 'circle is not detected'); - Kinetic.DD._endDragBefore(); + Konva.DD._endDragBefore(); stage._mouseup({ clientX: 291, clientY: 112 + top }); - Kinetic.DD._endDragAfter({dragEndNode:circle}); + Konva.DD._endDragAfter({dragEndNode:circle}); }); @@ -222,13 +222,13 @@ suite('DragAndDrop', function() { var top = stage.content.getBoundingClientRect().top; - var startDragLayer = new Kinetic.Layer(); + var startDragLayer = new Konva.Layer(); stage.add(startDragLayer); - var endDragLayer = new Kinetic.Layer(); + var endDragLayer = new Konva.Layer(); stage.add(endDragLayer); - var circle = new Kinetic.Circle({ + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -242,7 +242,7 @@ suite('DragAndDrop', function() { startDragLayer.add(circle); startDragLayer.draw(); - var rect = new Kinetic.Rect({ + var rect = new Konva.Rect({ fill: 'green', stroke: 'black', strokeWidth: 4, @@ -271,7 +271,7 @@ suite('DragAndDrop', function() { rect.moveTo(startDragLayer); startDragLayer.draw(); - assert.equal(Kinetic.DD.anim.getLayers()[0], endDragLayer, 'drag layer should be switched'); + assert.equal(Konva.DD.anim.getLayers()[0], endDragLayer, 'drag layer should be switched'); var shape = startDragLayer.getIntersection({ @@ -291,12 +291,12 @@ suite('DragAndDrop', function() { assert.equal(!!shape, false, 'circle is not detected'); - Kinetic.DD._endDragBefore(); + Konva.DD._endDragBefore(); stage._mouseup({ clientX: 291, clientY: 112 + top }); - Kinetic.DD._endDragAfter({dragEndNode:circle}); + Konva.DD._endDragAfter({dragEndNode:circle}); }); }); \ No newline at end of file diff --git a/test/unit/FastLayer-test.js b/test/unit/FastLayer-test.js index 44930b4b..8e7c2524 100644 --- a/test/unit/FastLayer-test.js +++ b/test/unit/FastLayer-test.js @@ -4,9 +4,9 @@ suite('FastLayer', function() { test('basic render', function() { var stage = addStage(); - var layer = new Kinetic.FastLayer(); + var layer = new Konva.FastLayer(); - var circle = new Kinetic.Circle({ + var circle = new Konva.Circle({ x: 100, y: stage.getHeight() / 2, radius: 70, @@ -23,9 +23,9 @@ suite('FastLayer', function() { test('cache shape on fast layer', function(){ var stage = addStage(); - var layer = new Kinetic.FastLayer(); + var layer = new Konva.FastLayer(); - var circle = new Kinetic.Circle({ + var circle = new Konva.Circle({ x: 74, y: 74, radius: 70, diff --git a/test/unit/Global-test.js b/test/unit/Global-test.js index d5323533..8ca20468 100644 --- a/test/unit/Global-test.js +++ b/test/unit/Global-test.js @@ -1,21 +1,21 @@ suite('Global', function() { // ====================================================== - test('test Kinetic version number', function() { - assert.equal(Kinetic.version, 'dev'); + test('test Konva version number', function() { + assert.equal(Konva.version, 'dev'); }); // ====================================================== test('getAngle()', function() { // test that default angleDeg is true - assert.equal(Kinetic.angleDeg, true); - assert.equal(Kinetic.getAngle(180), Math.PI); + assert.equal(Konva.angleDeg, true); + assert.equal(Konva.getAngle(180), Math.PI); - Kinetic.angleDeg = false; - assert.equal(Kinetic.getAngle(1), 1); + Konva.angleDeg = false; + assert.equal(Konva.getAngle(1), 1); // set angleDeg back to true for future tests - Kinetic.angleDeg = true; + Konva.angleDeg = true; }); @@ -25,7 +25,7 @@ suite('Global', function() { var ua; // Chrome 34.0.1847.137 m - ua = Kinetic._parseUA('Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.137 Safari/537.36'); + ua = Konva._parseUA('Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.137 Safari/537.36'); assert.equal(ua.browser, 'chrome'); assert.equal(ua.mobile, false); @@ -34,42 +34,42 @@ suite('Global', function() { // Internet Explorer 9 - ua = Kinetic._parseUA('Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)'); + ua = Konva._parseUA('Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)'); assert.equal(ua.browser, 'msie'); assert.equal(ua.mobile, false); assert.equal(ua.version, '9.0'); assert.equal(ua.ieMobile, false); // Internet Explorer 10 - ua = Kinetic._parseUA('Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; Trident/6.0)'); + ua = Konva._parseUA('Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; Trident/6.0)'); assert.equal(ua.browser, 'msie'); assert.equal(ua.mobile, false); assert.equal(ua.version, '10.0'); assert.equal(ua.ieMobile, false); // Internet Explorer 10 Mobile (Windows Phone 8) - ua = Kinetic._parseUA('Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 920)'); + ua = Konva._parseUA('Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 920)'); assert.equal(ua.browser, 'msie'); assert.equal(ua.mobile, true); assert.equal(ua.version, '10.0'); - assert.equal(ua.ieMobile, true); // <-- forces Kinetic mouse events to be Kinetic touch events instead + assert.equal(ua.ieMobile, true); // <-- forces Konva mouse events to be Konva touch events instead // Internet Explorer 11 Mobile (Windows Phone 8.1) - ua = Kinetic._parseUA('Mozilla/5.0 (Windows Phone 8.1; ARM; Trident/7.0; Touch; rv:11; IEMobile/11.0; NOKIA; Lumia 928) like Gecko'); + ua = Konva._parseUA('Mozilla/5.0 (Windows Phone 8.1; ARM; Trident/7.0; Touch; rv:11; IEMobile/11.0; NOKIA; Lumia 928) like Gecko'); assert.equal(ua.browser, 'mozilla'); assert.equal(ua.mobile, true); assert.equal(ua.version, '11'); - assert.equal(ua.ieMobile, true); // <-- forces Kinetic mouse events to be Kinetic touch events instead + assert.equal(ua.ieMobile, true); // <-- forces Konva mouse events to be Konva touch events instead // Internet Explorer 11 on 64-bit Windows 8.1 with Update - ua = Kinetic._parseUA('Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; rv:11.0) like Gecko'); + ua = Konva._parseUA('Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; rv:11.0) like Gecko'); assert.equal(ua.browser, 'mozilla'); assert.equal(ua.mobile, false); assert.equal(ua.version, '11.0'); assert.equal(ua.ieMobile, false); // Windows 8.1 with Update HTML/JS appx - ua = Kinetic._parseUA('Mozilla/5.0 (Windows NT 6.3; Win64; x64; Trident/7.0; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; Tablet PC 2.0; MSAppHost/2.0; rv:11.0) like Gecko'); + ua = Konva._parseUA('Mozilla/5.0 (Windows NT 6.3; Win64; x64; Trident/7.0; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; Tablet PC 2.0; MSAppHost/2.0; rv:11.0) like Gecko'); assert.equal(ua.browser, 'mozilla'); assert.equal(ua.mobile, false); assert.equal(ua.version, '11.0'); diff --git a/test/unit/Group-test.js b/test/unit/Group-test.js index 6b91947f..ba8dc3a6 100644 --- a/test/unit/Group-test.js +++ b/test/unit/Group-test.js @@ -4,20 +4,20 @@ suite('Group', function() { test('cache group with text', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var group = new Kinetic.Group({ + var layer = new Konva.Layer(); + var group = new Konva.Group({ draggable : true, x: 100, y: 40 }); - var text = new Kinetic.Text({ + var text = new Konva.Text({ text : "some text", fontSize: 20, fill: "black", y : 50 }); - var rect = new Kinetic.Rect({ + var rect = new Konva.Rect({ height : 100, width : 100, stroke : "#00B80C", diff --git a/test/unit/Layer-test.js b/test/unit/Layer-test.js index e2a42f6f..6df65a8e 100644 --- a/test/unit/Layer-test.js +++ b/test/unit/Layer-test.js @@ -4,9 +4,9 @@ suite('Layer', function() { test('test canvas inline styles', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var circle = new Kinetic.Circle({ + var circle = new Konva.Circle({ x: 100, y: stage.getHeight() / 2, radius: 70, @@ -31,8 +31,8 @@ suite('Layer', function() { test('test clear()', function(){ var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: 100, y: 100, radius: 70, @@ -67,8 +67,8 @@ suite('Layer', function() { test('test clear() with bounds', function(){ var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: 100, y: 100, radius: 70, @@ -104,9 +104,9 @@ suite('Layer', function() { // ====================================================== test('layer getIntersection()', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var redCircle = new Kinetic.Circle({ + var redCircle = new Konva.Circle({ x: 380, y: stage.getHeight() / 2, radius: 70, @@ -116,7 +116,7 @@ suite('Layer', function() { id: 'redCircle' }); - var greenCircle = new Kinetic.Circle({ + var greenCircle = new Konva.Circle({ x: 300, y: stage.getHeight() / 2, radius: 70, @@ -140,10 +140,10 @@ suite('Layer', function() { // ====================================================== test('set layer visibility', function() { var stage = addStage(); - var layer = new Kinetic.Layer({ + var layer = new Konva.Layer({ visible: false }); - var rect = new Kinetic.Rect({ + var rect = new Konva.Rect({ x: 200, width: 100, height: 50, @@ -165,14 +165,14 @@ suite('Layer', function() { test('set clearBeforeDraw to false, and test toDataURL for stage, layer, group, and shape', function() { var stage = addStage(); - var layer = new Kinetic.Layer({ + var layer = new Konva.Layer({ clearBeforeDraw: false, throttle: 999 }); - var group = new Kinetic.Group(); + var group = new Konva.Group(); - var circle = new Kinetic.Circle({ + var circle = new Konva.Circle({ x: 100, y: stage.getHeight() / 2, radius: 70, @@ -199,9 +199,9 @@ suite('Layer', function() { // ====================================================== test('save layer as png', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var Circle = new Kinetic.Circle({ + var Circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -219,9 +219,9 @@ suite('Layer', function() { // ====================================================== test('save layer as low quality jpg', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var circle = new Kinetic.Circle({ + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -242,9 +242,9 @@ suite('Layer', function() { // ====================================================== test('save layer as high quality jpg', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var circle = new Kinetic.Circle({ + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -265,9 +265,9 @@ suite('Layer', function() { // ====================================================== test('hit graph enable disable', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var circle = new Kinetic.Circle({ + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -296,7 +296,7 @@ suite('Layer', function() { // ====================================================== test.skip('hit graph caching', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); var originGetImageData = layer.getHitCanvas().getContext().getImageData; var count = 0; layer.getHitCanvas().getContext().getImageData = function() { @@ -306,7 +306,7 @@ suite('Layer', function() { stage.add(layer); - var circle = new Kinetic.Circle({ + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -333,7 +333,7 @@ suite('Layer', function() { assert.equal(count, 1, 'getImageData should not be called, because data is cached'); - var group = new Kinetic.Group(); + var group = new Konva.Group(); group.cache({ width : 1, height : 1 diff --git a/test/unit/Node-test.js b/test/unit/Node-test.js index 3b0e0256..dcc88a73 100644 --- a/test/unit/Node-test.js +++ b/test/unit/Node-test.js @@ -3,9 +3,9 @@ suite('Node', function() { // ====================================================== test('getType and getClassName', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var group = new Kinetic.Group(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var group = new Konva.Group(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -33,8 +33,8 @@ suite('Node', function() { // ====================================================== test('get layer', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -51,8 +51,8 @@ suite('Node', function() { // ====================================================== test('setAttr', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -82,8 +82,8 @@ suite('Node', function() { // ====================================================== test('set shape and layer opacity to 0.5', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -104,8 +104,8 @@ suite('Node', function() { // ====================================================== test('transform cache', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -130,8 +130,8 @@ suite('Node', function() { // ====================================================== test('visible cache', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -158,8 +158,8 @@ suite('Node', function() { // ====================================================== test('shadow cache', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -185,8 +185,8 @@ suite('Node', function() { // ====================================================== test('has shadow', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var rect = new Kinetic.Rect({ + var layer = new Konva.Layer(); + var rect = new Konva.Rect({ x: 10, y: stage.getHeight() / 3, width: 100, @@ -209,8 +209,8 @@ suite('Node', function() { // ====================================================== test('opacity cache', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -233,8 +233,8 @@ suite('Node', function() { // ====================================================== test('listening cache', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -261,8 +261,8 @@ suite('Node', function() { // ====================================================== test('stage cache', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -282,16 +282,16 @@ suite('Node', function() { // ====================================================== test('test pixel ratio toDataURL', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); // override pixel ratio - layer.canvas = new Kinetic.SceneCanvas({ + layer.canvas = new Konva.SceneCanvas({ pixelRatio: 2 }); layer.canvas._canvas.style.position = 'absolute'; - var circle = new Kinetic.Circle({ + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -310,8 +310,8 @@ suite('Node', function() { // ====================================================== test('listen and don\'t listen', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var rect = new Kinetic.Rect({ + var layer = new Konva.Layer(); + var rect = new Konva.Rect({ x: 50, y: 50, width: 200, @@ -319,7 +319,7 @@ suite('Node', function() { fill: 'blue' }); - var rect2 = new Kinetic.Rect({ + var rect2 = new Konva.Rect({ x: 200, y: 100, width: 200, @@ -345,8 +345,8 @@ suite('Node', function() { // ====================================================== test('listen and don\'t listen with one shape', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var rect = new Kinetic.Rect({ + var layer = new Konva.Layer(); + var rect = new Konva.Rect({ x: 50, y: 50, width: 200, @@ -373,8 +373,8 @@ suite('Node', function() { * object */ var stage = addStage(); - var layer = new Kinetic.Layer(); - var rect = new Kinetic.Rect({ + var layer = new Konva.Layer(); + var rect = new Konva.Rect({ x: 50, y: 50, width: 200, @@ -403,9 +403,9 @@ suite('Node', function() { // ====================================================== test('simple clone', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var rect = new Kinetic.Rect({ + var rect = new Konva.Rect({ x: 0, y: 0, width: 100, @@ -427,9 +427,9 @@ suite('Node', function() { // ====================================================== test('clone - check reference', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var line = new Kinetic.Line({ + var line = new Konva.Line({ x: 0, y: 0, stroke : 'red', @@ -450,8 +450,8 @@ suite('Node', function() { // ====================================================== test('complex clone', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var rect = new Kinetic.Rect({ + var layer = new Konva.Layer(); + var rect = new Konva.Rect({ x: 50, y: 50, width: 200, @@ -517,14 +517,14 @@ suite('Node', function() { // ====================================================== test('clone a group', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var group = new Kinetic.Group({ + var layer = new Konva.Layer(); + var group = new Konva.Group({ x: 50, draggable: true, name: 'myGroup' }); - var rect = new Kinetic.Rect({ + var rect = new Konva.Rect({ x: 0, y: 50, width: 200, @@ -537,7 +537,7 @@ suite('Node', function() { name: 'myRect', myAttr: 'group rect' }); - var text = new Kinetic.Text({ + var text = new Konva.Text({ x: 0, y: 110, text: 'Some awesome text!', @@ -624,8 +624,8 @@ suite('Node', function() { // ====================================================== test('test on attr change', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var rect = new Kinetic.Rect({ + var layer = new Konva.Layer(); + var rect = new Konva.Rect({ x: 50, y: 50, width: 200, @@ -634,7 +634,7 @@ suite('Node', function() { shadowOffset: {x: 10, y: 10}, }); - var circle = new Kinetic.Circle({ + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 35, @@ -681,8 +681,8 @@ suite('Node', function() { // ====================================================== test('set shape, layer and stage opacity to 0.5', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -706,10 +706,10 @@ suite('Node', function() { test('hide show layer', function() { var stage = addStage(); - var layer1 = new Kinetic.Layer(); - var layer2 = new Kinetic.Layer(); + var layer1 = new Konva.Layer(); + var layer2 = new Konva.Layer(); - var circle1 = new Kinetic.Circle({ + var circle1 = new Konva.Circle({ x: 100, y: stage.getHeight() / 2, radius: 70, @@ -717,7 +717,7 @@ suite('Node', function() { stroke: 'black', strokeWidth: 4 }); - var circle2 = new Kinetic.Circle({ + var circle2 = new Konva.Circle({ x: 150, y: stage.getHeight() / 2, radius: 70, @@ -753,8 +753,8 @@ suite('Node', function() { // ====================================================== test('rotation in degrees', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var rect = new Kinetic.Rect({ + var layer = new Konva.Layer(); + var rect = new Konva.Rect({ x: 200, y: 100, width: 100, @@ -778,8 +778,8 @@ suite('Node', function() { // ====================================================== test('skew', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var rect = new Kinetic.Rect({ + var layer = new Konva.Layer(); + var rect = new Konva.Rect({ x: 200, y: 100, width: 100, @@ -811,8 +811,8 @@ suite('Node', function() { // ====================================================== test('init with position, scale, rotation, then change scale', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var rect = new Kinetic.Rect({ + var layer = new Konva.Layer(); + var rect = new Konva.Rect({ x: 200, y: 100, width: 100, @@ -846,9 +846,9 @@ suite('Node', function() { var imageObj = new Image(); imageObj.onload = function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var sprite = new Kinetic.Sprite({ + var sprite = new Konva.Sprite({ x: 200, y: 50, image: imageObj, @@ -892,12 +892,12 @@ suite('Node', function() { // ====================================================== test('node caching', function(done) { var stage = addStage(); - var layer = new Kinetic.Layer(); - var group = new Kinetic.Group(); + var layer = new Konva.Layer(); + var group = new Konva.Group(); var points = [73, 250, 73, 160, 340, 23, 500, 109, 499, 139, 342, 93]; - var poly = new Kinetic.Line({ + var poly = new Konva.Line({ points: points, fill: 'green', stroke: 'blue', @@ -915,9 +915,9 @@ suite('Node', function() { height: 300, callback: function(imageObj) { //document.body.appendChild(imageObj) - assert.equal(Kinetic.Util._isElement(imageObj), true); + assert.equal(Konva.Util._isElement(imageObj), true); - var cachedShape = new Kinetic.Image({ + var cachedShape = new Konva.Image({ image: imageObj, draggable: true, stroke: 'red', @@ -940,10 +940,10 @@ suite('Node', function() { test('hide group', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var group = new Kinetic.Group(); + var layer = new Konva.Layer(); + var group = new Konva.Group(); - var circle1 = new Kinetic.Circle({ + var circle1 = new Konva.Circle({ x: 100, y: stage.getHeight() / 2, radius: 70, @@ -951,7 +951,7 @@ suite('Node', function() { stroke: 'black', strokeWidth: 4 }); - var circle2 = new Kinetic.Circle({ + var circle2 = new Konva.Circle({ x: 150, y: stage.getHeight() / 2, radius: 70, @@ -985,8 +985,8 @@ suite('Node', function() { // ====================================================== test('add shape with custom attr pointing to self', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -1024,8 +1024,8 @@ suite('Node', function() { // ====================================================== test('scale shape by half', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -1042,8 +1042,8 @@ suite('Node', function() { // ====================================================== test('scale shape by half then back to 1', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -1061,8 +1061,8 @@ suite('Node', function() { // ====================================================== test('set offset offset after instantiation', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var rect = new Kinetic.Rect({ + var layer = new Konva.Layer(); + var rect = new Konva.Rect({ x: 200, y: 100, width: 100, @@ -1096,8 +1096,8 @@ suite('Node', function() { // ====================================================== test('get shape name', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -1116,8 +1116,8 @@ suite('Node', function() { // ====================================================== test('test setting shadow offset', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var rect = new Kinetic.Rect({ + var layer = new Konva.Layer(); + var rect = new Konva.Rect({ x: 0, y: 0, width: 100, @@ -1159,8 +1159,8 @@ suite('Node', function() { // ====================================================== test('test offset', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var rect = new Kinetic.Rect({ + var layer = new Konva.Layer(); + var rect = new Konva.Rect({ x: 0, y: 0, width: 100, @@ -1199,8 +1199,8 @@ suite('Node', function() { // ====================================================== test('test setPosition and move', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var rect = new Kinetic.Rect({ + var layer = new Konva.Layer(); + var rect = new Konva.Rect({ x: 0, y: 0, width: 100, @@ -1243,8 +1243,8 @@ suite('Node', function() { // ====================================================== test('test setScale', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var rect = new Kinetic.Rect({ + var layer = new Konva.Layer(); + var rect = new Konva.Rect({ x: 200, y: 20, width: 100, @@ -1293,8 +1293,8 @@ suite('Node', function() { // ====================================================== test('test config scale', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var rect1 = new Kinetic.Rect({ + var layer = new Konva.Layer(); + var rect1 = new Konva.Rect({ x: 200, y: 20, width: 100, @@ -1306,7 +1306,7 @@ suite('Node', function() { } }); - var rect2 = new Kinetic.Rect({ + var rect2 = new Konva.Rect({ x: 200, y: 20, width: 100, @@ -1315,7 +1315,7 @@ suite('Node', function() { scale: {x:2,y:2} }); - var rect3 = new Kinetic.Rect({ + var rect3 = new Konva.Rect({ x: 200, y: 20, width: 100, @@ -1324,7 +1324,7 @@ suite('Node', function() { scale: {x:2, y:3} }); - var rect4 = new Kinetic.Rect({ + var rect4 = new Konva.Rect({ x: 200, y: 20, width: 100, @@ -1333,7 +1333,7 @@ suite('Node', function() { scaleX: 2 }); - var rect5 = new Kinetic.Rect({ + var rect5 = new Konva.Rect({ x: 200, y: 20, width: 100, @@ -1364,8 +1364,8 @@ suite('Node', function() { // ====================================================== test('test config position', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var rect1 = new Kinetic.Rect({ + var layer = new Konva.Layer(); + var rect1 = new Konva.Rect({ x: 1, y: 2, width: 100, @@ -1373,21 +1373,21 @@ suite('Node', function() { fill: 'red' }); - var rect2 = new Kinetic.Rect({ + var rect2 = new Konva.Rect({ x: 3, width: 100, height: 50, fill: 'red' }); - var rect3 = new Kinetic.Rect({ + var rect3 = new Konva.Rect({ y: 4, width: 100, height: 50, fill: 'red' }); - var rect4 = new Kinetic.Rect({ + var rect4 = new Konva.Rect({ width: 100, height: 50, fill: 'red' @@ -1412,8 +1412,8 @@ suite('Node', function() { // ====================================================== test('test getPosition and getAbsolutePosition for shape inside transformed stage', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var rect = new Kinetic.Rect({ + var layer = new Konva.Layer(); + var rect = new Konva.Rect({ x: 200, y: 20, width: 100, @@ -1448,8 +1448,8 @@ suite('Node', function() { // ====================================================== test('test consecutive getAbsolutePositions()s when shape has offset', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var rect = new Kinetic.Rect({ + var layer = new Konva.Layer(); + var rect = new Konva.Rect({ x: 200, y: 20, width: 100, @@ -1481,11 +1481,11 @@ suite('Node', function() { var diagonal = Math.sqrt(side * side * 2); var stage = addStage(); - var layer = new Kinetic.Layer({ + var layer = new Konva.Layer({ name: 'layerName', id: 'layerId' }); - var group = new Kinetic.Group({ + var group = new Konva.Group({ name: 'groupName', id: 'groupId', rotation: 45, @@ -1493,7 +1493,7 @@ suite('Node', function() { x: diagonal / 2, y: diagonal / 2 }); - var rect = new Kinetic.Rect({ + var rect = new Konva.Rect({ x: 0, y: 0, width: side, @@ -1502,7 +1502,7 @@ suite('Node', function() { name: 'rectName', id: 'rectId' }); - var marker = new Kinetic.Rect({ + var marker = new Konva.Rect({ x: side, y: 0, width: 1, @@ -1526,8 +1526,8 @@ suite('Node', function() { // ====================================================== test('test dragDistance', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var rect1 = new Kinetic.Rect({ + var layer = new Konva.Layer(); + var rect1 = new Konva.Rect({ x: 1, y: 2, width: 100, @@ -1535,11 +1535,11 @@ suite('Node', function() { fill: 'red' }); - var group = new Kinetic.Group({ + var group = new Konva.Group({ dragDistance : 2 }); - var rect2 = new Kinetic.Rect({ + var rect2 = new Konva.Rect({ x: 3, width: 100, height: 50, @@ -1558,8 +1558,8 @@ suite('Node', function() { // ====================================================== test('translate, rotate, scale shape', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Rect({ + var layer = new Konva.Layer(); + var circle = new Konva.Rect({ x: 100, y: 100, rotationDeg: 20, @@ -1585,8 +1585,8 @@ suite('Node', function() { // ====================================================== test('test isListening', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var rect = new Kinetic.Rect({ + var layer = new Konva.Layer(); + var rect = new Konva.Rect({ x: 100, y: 100, rotationDeg: 20, @@ -1630,8 +1630,8 @@ suite('Node', function() { // ====================================================== test('test fire event', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -1691,8 +1691,8 @@ suite('Node', function() { // ====================================================== test('add remove event', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -1763,7 +1763,7 @@ suite('Node', function() { // test remove all events - circle.on('click.kinetic', function() { + circle.on('click.konva', function() { }); circle.on('click', function() { }); @@ -1773,7 +1773,7 @@ suite('Node', function() { assert.equal(circle.eventListeners['boo'].length, 1); circle.off(); assert.equal(circle.eventListeners['boo'], undefined); - // should not remove kinetic listeners + // should not remove konva listeners assert.equal(circle.eventListeners['click'].length, 1); stage.add(layer); layer.add(circle); @@ -1783,8 +1783,8 @@ suite('Node', function() { // ====================================================== test('simulate event bubble', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -1817,10 +1817,10 @@ suite('Node', function() { // ====================================================== test('move shape, group, and layer, and then get absolute position', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var group = new Kinetic.Group(); + var layer = new Konva.Layer(); + var group = new Konva.Group(); - var circle = new Kinetic.Circle({ + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -1853,18 +1853,18 @@ suite('Node', function() { // ====================================================== test('scale layer, rotate group, position shape, and then get absolute position', function() { var stage = addStage(); - var layer = new Kinetic.Layer({ + var layer = new Konva.Layer({ scale: { x: 2, y: 2 } }); - var group = new Kinetic.Group({ + var group = new Konva.Group({ x: 100, rotation: 90 }); - var rect = new Kinetic.Rect({ + var rect = new Konva.Rect({ x: 50, y: 10, width: 100, @@ -1889,8 +1889,8 @@ suite('Node', function() { // ====================================================== test('hide show circle', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -1916,10 +1916,37 @@ suite('Node', function() { }); // ====================================================== + test('set shape opacity to 0.5', function() { + var stage = addStage(); + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ + x: stage.getWidth() / 2, + y: stage.getHeight() / 2, + radius: 70, + fill: 'green', + stroke: 'black', + strokeWidth: 20, + draggable: true + }); + + circle.setOpacity(0.5); + layer.add(circle); + stage.add(layer); + + var sceneTrace = layer.getContext().getTrace(); + //console.log(sceneTrace); + + var bufferTrace = stage.bufferCanvas.getContext().getTrace(); + //console.log(bufferTrace); + + assert.equal(sceneTrace, 'clearRect(0,0,578,200);save();globalAlpha=0.5;drawImage([object HTMLCanvasElement],0,0);restore();'); + assert.equal(bufferTrace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,289,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=20;strokeStyle=black;stroke();restore();'); + }); + test('set shape opacity to 0.5 then back to 1', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -1943,20 +1970,20 @@ suite('Node', function() { // ====================================================== test('get absolute z index', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var group1 = new Kinetic.Group(); - var group2 = new Kinetic.Group(); - var group3 = new Kinetic.Group(); - var group4 = new Kinetic.Group(); + var layer = new Konva.Layer(); + var group1 = new Konva.Group(); + var group2 = new Konva.Group(); + var group3 = new Konva.Group(); + var group4 = new Konva.Group(); - var shape1 = new Kinetic.Circle({ + var shape1 = new Konva.Circle({ x: 150, y: stage.getHeight() / 2, radius: 40, fill: 'green' }); - var shape2 = new Kinetic.Circle({ + var shape2 = new Konva.Circle({ x: 250, y: stage.getHeight() / 2, radius: 40, @@ -2004,17 +2031,17 @@ suite('Node', function() { test('JPEG toDataURL() Not Hiding Lower Layers with Black', function(done) { var stage = addStage(); - var layer1 = new Kinetic.Layer(); - var layer2 = new Kinetic.Layer(); + var layer1 = new Konva.Layer(); + var layer2 = new Konva.Layer(); - layer1.add(new Kinetic.Rect({ + layer1.add(new Konva.Rect({ x: 10, y: 10, width: 25, height: 15, fill: 'red' })); - layer2.add(new Kinetic.Rect({ + layer2.add(new Konva.Rect({ x: 50, y: 50, width: 15, @@ -2033,7 +2060,7 @@ suite('Node', function() { callback: function(url) { var imageObj = new Image(); imageObj.onload = function() { - layer2.add(new Kinetic.Image({ + layer2.add(new Konva.Image({ x: 200, y: 10, image: imageObj @@ -2049,9 +2076,9 @@ suite('Node', function() { // ====================================================== test('serialize stage', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var group = new Kinetic.Group(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var group = new Konva.Group(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -2075,9 +2102,9 @@ suite('Node', function() { // ====================================================== test('serialize shape', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var group = new Kinetic.Group(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var group = new Konva.Group(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -2103,7 +2130,7 @@ suite('Node', function() { test('load stage using json', function() { var container = addContainer(); var json = '{"attrs":{"width":578,"height":200},"className":"Stage","children":[{"attrs":{},"className":"Layer","children":[{"attrs":{},"className":"Group","children":[{"attrs":{"x":289,"y":100,"radius":70,"fill":"green","stroke":"black","strokeWidth":4,"name":"myCircle","draggable":true},"className":"Shape"}]}]}]}'; - var stage = Kinetic.Node.create(json, container); + var stage = Konva.Node.create(json, container); assert.equal(stage.toJSON(), json); }); @@ -2111,8 +2138,8 @@ suite('Node', function() { // ====================================================== test('serialize stage with custom shape', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var group = new Kinetic.Group(); + var layer = new Konva.Layer(); + var group = new Konva.Group(); var drawTriangle = function(context) { context.beginPath(); @@ -2122,7 +2149,7 @@ suite('Node', function() { context.closePath(); context.fillStrokeShape(this); }; - var triangle = new Kinetic.Shape({ + var triangle = new Konva.Shape({ drawFunc: drawTriangle, fill: "#00D2FF", stroke: "black", @@ -2159,7 +2186,7 @@ suite('Node', function() { }; var json = '{"attrs":{"width":578,"height":200},"className":"Stage","children":[{"attrs":{},"className":"Layer","children":[{"attrs":{},"className":"Group","children":[{"attrs":{"fill":"#00D2FF","stroke":"black","strokeWidth":4,"id":"myTriangle"},"className":"Shape"}]}]}]}'; - var stage = Kinetic.Node.create(json, container); + var stage = Konva.Node.create(json, container); stage.find('#myTriangle').each(function(node) { node.sceneFunc(drawTriangle); @@ -2175,8 +2202,8 @@ suite('Node', function() { var imageObj = new Image(); imageObj.onload = function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 200, y: 60, image: imageObj, @@ -2204,7 +2231,7 @@ suite('Node', function() { var container = addContainer(); imageObj.onload = function() { var json = '{"attrs":{"width":578,"height":200},"className":"Stage","children":[{"attrs":{},"className":"Layer","children":[{"attrs":{"x":200,"y":60,"offsetX":50,"offsetY":150,"id":"darth"},"className":"Image"}]}]}'; - var stage = Kinetic.Node.create(json, container); + var stage = Konva.Node.create(json, container); assert.equal(stage.toJSON(), json); stage.find('#darth').each(function(node) { @@ -2220,8 +2247,8 @@ suite('Node', function() { // ====================================================== test('remove shape', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -2248,8 +2275,8 @@ suite('Node', function() { // ====================================================== test('destroy shape', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -2276,8 +2303,8 @@ suite('Node', function() { // ====================================================== test('destroy shape without adding its parent to stage', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -2300,10 +2327,10 @@ suite('Node', function() { // ====================================================== test('destroy layer with shape', function() { var stage = addStage(); - var layer = new Kinetic.Layer({ + var layer = new Konva.Layer({ name: 'myLayer' }); - var circle = new Kinetic.Circle({ + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -2332,10 +2359,10 @@ suite('Node', function() { // ====================================================== test('destroy stage with layer and shape', function() { var stage = addStage(); - var layer = new Kinetic.Layer({ + var layer = new Konva.Layer({ name: 'myLayer' }); - var circle = new Kinetic.Circle({ + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -2359,14 +2386,14 @@ suite('Node', function() { // ====================================================== test('destroy group with shape', function() { var stage = addStage(); - var layer = new Kinetic.Layer({ + var layer = new Konva.Layer({ name: 'myLayer' }); - var group = new Kinetic.Group({ + var group = new Konva.Group({ name: 'myGroup' }); - var circle = new Kinetic.Circle({ + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -2396,7 +2423,7 @@ suite('Node', function() { // ====================================================== test('destroy layer with no shapes', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); stage.add(layer); layer.destroy(); @@ -2406,8 +2433,8 @@ suite('Node', function() { // ====================================================== test('destroy shape multiple times', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var shape1 = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var shape1 = new Konva.Circle({ x: 150, y: 100, radius: 50, @@ -2415,7 +2442,7 @@ suite('Node', function() { name: 'myCircle' }); - var shape2 = new Kinetic.Circle({ + var shape2 = new Konva.Circle({ x: 250, y: 100, radius: 50, @@ -2441,10 +2468,10 @@ suite('Node', function() { // ====================================================== test('remove layer multiple times', function() { var stage = addStage(); - var layer1 = new Kinetic.Layer(); - var layer2 = new Kinetic.Layer(); + var layer1 = new Konva.Layer(); + var layer2 = new Konva.Layer(); - var shape1 = new Kinetic.Circle({ + var shape1 = new Konva.Circle({ x: 150, y: 100, radius: 50, @@ -2452,7 +2479,7 @@ suite('Node', function() { name: 'myCircle' }); - var shape2 = new Kinetic.Circle({ + var shape2 = new Konva.Circle({ x: 250, y: 100, radius: 50, @@ -2479,8 +2506,8 @@ suite('Node', function() { // ====================================================== test('destroy shape by id or name', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -2490,7 +2517,7 @@ suite('Node', function() { id: 'myCircle2' }); - var rect = new Kinetic.Rect({ + var rect = new Konva.Rect({ x: 300, y: 100, width: 100, @@ -2508,33 +2535,33 @@ suite('Node', function() { layer.add(rect); stage.add(layer); - assert.equal(Kinetic.ids.myCircle2._id, circle._id); - assert.equal(Kinetic.names.myRect2[0]._id, rect._id); - assert.equal(Kinetic.shapes[circleColorKey]._id, circle._id); - assert.equal(Kinetic.shapes[rectColorKey]._id, rect._id); + assert.equal(Konva.ids.myCircle2._id, circle._id); + assert.equal(Konva.names.myRect2[0]._id, rect._id); + assert.equal(Konva.shapes[circleColorKey]._id, circle._id); + assert.equal(Konva.shapes[rectColorKey]._id, rect._id); circle.destroy(); - assert.equal(Kinetic.ids.myCircle2, undefined); - assert.equal(Kinetic.names.myRect2[0]._id, rect._id); - assert.equal(Kinetic.shapes[circleColorKey], undefined); - assert.equal(Kinetic.shapes[rectColorKey]._id, rect._id); + assert.equal(Konva.ids.myCircle2, undefined); + assert.equal(Konva.names.myRect2[0]._id, rect._id); + assert.equal(Konva.shapes[circleColorKey], undefined); + assert.equal(Konva.shapes[rectColorKey]._id, rect._id); rect.destroy(); - assert.equal(Kinetic.ids.myCircle2, undefined); - assert.equal(Kinetic.names.myRect2, undefined); - assert.equal(Kinetic.shapes[circleColorKey], undefined); - assert.equal(Kinetic.shapes[rectColorKey], undefined); + assert.equal(Konva.ids.myCircle2, undefined); + assert.equal(Konva.names.myRect2, undefined); + assert.equal(Konva.shapes[circleColorKey], undefined); + assert.equal(Konva.shapes[rectColorKey], undefined); }); // ====================================================== test('hide stage', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var group = new Kinetic.Group(); + var layer = new Konva.Layer(); + var group = new Konva.Group(); - var rect = new Kinetic.Rect({ + var rect = new Konva.Rect({ x: 200, y: 100, width: 100, @@ -2565,9 +2592,9 @@ suite('Node', function() { test('listening, & shouldDrawHit', function(){ var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var rect = new Kinetic.Rect({ + var rect = new Konva.Rect({ x: 100, y: 50, width: 100, @@ -2597,17 +2624,17 @@ suite('Node', function() { test('group, listening, & shouldDrawHit', function(){ var stage = addStage(); - var layer = new Kinetic.Layer({ + var layer = new Konva.Layer({ listening : false }); stage.add(layer); - var group = new Kinetic.Group({ + var group = new Konva.Group({ listening : false }); layer.add(group); - var rect = new Kinetic.Rect({ + var rect = new Konva.Rect({ x: 100, y: 50, width: 100, @@ -2649,7 +2676,7 @@ suite('Node', function() { clientX: 150, clientY: 75 + top }); - Kinetic.DD._endDragBefore(); + Konva.DD._endDragBefore(); stage._mouseup({ clientX: 150, clientY: 75 + top @@ -2663,9 +2690,9 @@ suite('Node', function() { // ====================================================== test('isVisible', function(){ var stage = addStage(); - var layer = new Kinetic.Layer(); - var group = new Kinetic.Group(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var group = new Konva.Group(); + var circle = new Konva.Circle({ x: 100, y: 100, radius: 70, @@ -2729,9 +2756,9 @@ suite('Node', function() { test('overloaders', function(){ var stage = addStage(); - var layer = new Kinetic.Layer(); - var group = new Kinetic.Group(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var group = new Konva.Group(); + var circle = new Konva.Circle({ x: 100, y: 100, radius: 70, @@ -2821,9 +2848,9 @@ suite('Node', function() { test('cache shape', function(){ var stage = addStage(); - var layer = new Kinetic.Layer(); - var group = new Kinetic.Group(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var group = new Konva.Group(); + var circle = new Konva.Circle({ x: 74, y: 74, radius: 70, @@ -2868,12 +2895,12 @@ suite('Node', function() { test('cache shape before adding to layer', function(){ var stage = addStage(); - var layer = new Kinetic.Layer(); - var group = new Kinetic.Group({ + var layer = new Konva.Layer(); + var group = new Konva.Group({ x : 0, y : 0 }); - var rect = new Kinetic.Rect({ + var rect = new Konva.Rect({ x: 35, y: 35, width: 50, @@ -2922,12 +2949,12 @@ suite('Node', function() { test('cache shape inside transformed group', function(){ var stage = addStage(); - var layer = new Kinetic.Layer(); - var group = new Kinetic.Group({ + var layer = new Konva.Layer(); + var group = new Konva.Group({ x: 50, y: 50 }); - var circle = new Kinetic.Circle({ + var circle = new Konva.Circle({ x: 74, y: 74, radius: 70, @@ -2971,9 +2998,9 @@ suite('Node', function() { test('cache shape thats larger than stage', function(){ var stage = addStage(); - var layer = new Kinetic.Layer(); - var group = new Kinetic.Group(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var group = new Konva.Group(); + var circle = new Konva.Circle({ x: 74, y: 74, radius: 300, @@ -3006,9 +3033,9 @@ suite('Node', function() { test('show cache border', function(){ var stage = addStage(); - var layer = new Kinetic.Layer(); - var group = new Kinetic.Group(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var group = new Konva.Group(); + var circle = new Konva.Circle({ x: 200, y: 74, radius: 70, @@ -3053,13 +3080,13 @@ suite('Node', function() { test('cache group', function(){ var stage = addStage(); - var layer = new Kinetic.Layer(); - var group = new Kinetic.Group({ + var layer = new Konva.Layer(); + var group = new Konva.Group({ x: 100, y: 100, draggable: true }); - var top = new Kinetic.Circle({ + var top = new Konva.Circle({ x: 0, y: -70, radius: 30, @@ -3067,7 +3094,7 @@ suite('Node', function() { stroke: 'black', strokeWidth: 4 }); - var right = new Kinetic.Circle({ + var right = new Konva.Circle({ x: 70, y: 0, radius: 30, @@ -3075,7 +3102,7 @@ suite('Node', function() { stroke: 'black', strokeWidth: 4 }); - var bottom = new Kinetic.Circle({ + var bottom = new Konva.Circle({ x: 0, y: 70, radius: 30, @@ -3083,7 +3110,7 @@ suite('Node', function() { stroke: 'black', strokeWidth: 4 }); - var left = new Kinetic.Circle({ + var left = new Konva.Circle({ x: -70, y: 0, radius: 30, @@ -3125,8 +3152,8 @@ suite('Node', function() { test('cache transformed group', function(){ var stage = addStage(); - var layer = new Kinetic.Layer(); - var group = new Kinetic.Group({ + var layer = new Konva.Layer(); + var group = new Konva.Group({ x: 100, y: 100, draggable: true, @@ -3134,7 +3161,7 @@ suite('Node', function() { scaleX: 2, scaleY: 2 }); - var top = new Kinetic.Circle({ + var top = new Konva.Circle({ x: 0, y: -70, radius: 50, @@ -3142,7 +3169,7 @@ suite('Node', function() { stroke: 'black', strokeWidth: 4 }); - var right = new Kinetic.Circle({ + var right = new Konva.Circle({ x: 70, y: 0, radius: 30, @@ -3150,7 +3177,7 @@ suite('Node', function() { stroke: 'black', strokeWidth: 4 }); - var bottom = new Kinetic.Circle({ + var bottom = new Konva.Circle({ x: 0, y: 70, radius: 30, @@ -3158,7 +3185,7 @@ suite('Node', function() { stroke: 'black', strokeWidth: 4 }); - var left = new Kinetic.Circle({ + var left = new Konva.Circle({ x: -70, y: 0, radius: 30, @@ -3201,13 +3228,13 @@ suite('Node', function() { test('cache layer', function(){ var stage = addStage(); - var layer = new Kinetic.Layer({ + var layer = new Konva.Layer({ x: 100, y: 100, draggable: true }); - var group = new Kinetic.Group(); - var top = new Kinetic.Circle({ + var group = new Konva.Group(); + var top = new Konva.Circle({ x: 0, y: -70, radius: 30, @@ -3215,7 +3242,7 @@ suite('Node', function() { stroke: 'black', strokeWidth: 4 }); - var right = new Kinetic.Circle({ + var right = new Konva.Circle({ x: 70, y: 0, radius: 30, @@ -3223,7 +3250,7 @@ suite('Node', function() { stroke: 'black', strokeWidth: 4 }); - var bottom = new Kinetic.Circle({ + var bottom = new Konva.Circle({ x: 0, y: 70, radius: 30, @@ -3231,7 +3258,7 @@ suite('Node', function() { stroke: 'black', strokeWidth: 4 }); - var left = new Kinetic.Circle({ + var left = new Konva.Circle({ x: -70, y: 0, radius: 30, @@ -3274,8 +3301,8 @@ suite('Node', function() { imageObj.onload = function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 200, y: 60, image: imageObj, diff --git a/test/unit/Shape-test.js b/test/unit/Shape-test.js index 845d44fe..34df1bdf 100644 --- a/test/unit/Shape-test.js +++ b/test/unit/Shape-test.js @@ -3,8 +3,8 @@ suite('Shape', function() { // ====================================================== test('shape color components', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var rect = new Kinetic.Rect({ + var layer = new Konva.Layer(); + var rect = new Konva.Rect({ x: 200, y: 90, width: 100, @@ -38,7 +38,7 @@ suite('Shape', function() { rect.fillGreen(128); rect.fillBlue(0); - // var tween = new Kinetic.Tween({ + // var tween = new Konva.Tween({ // node: rect, // fillGreen: 0, // fillRed: 255, @@ -58,8 +58,8 @@ suite('Shape', function() { // ====================================================== test('test intersects()', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var rect = new Kinetic.Rect({ + var layer = new Konva.Layer(); + var rect = new Konva.Rect({ x: 200, y: 100, width: 100, @@ -102,8 +102,8 @@ suite('Shape', function() { // ====================================================== test('test hasShadow() method', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var shape = new Kinetic.Shape({ + var layer = new Konva.Layer(); + var shape = new Konva.Shape({ drawFunc: function(context) { context.beginPath(); @@ -140,8 +140,8 @@ suite('Shape', function() { // ====================================================== test('custom shape with fill, stroke, and strokeWidth', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var shape = new Kinetic.Shape({ + var layer = new Konva.Layer(); + var shape = new Konva.Shape({ drawFunc: function(context) { context.beginPath(); context.moveTo(0, 0); @@ -166,9 +166,9 @@ suite('Shape', function() { var imageObj = new Image(); imageObj.onload = function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var star = new Kinetic.Star({ + var star = new Konva.Star({ x: 200, y: 100, numPoints: 5, @@ -192,7 +192,7 @@ suite('Shape', function() { stage.add(layer); /* - var anim = new Kinetic.Animation(function() { + var anim = new Konva.Animation(function() { star.attrs.fill.rotation += 0.02; }, layer); anim.start(); @@ -229,16 +229,16 @@ suite('Shape', function() { // ====================================================== test('test size setters and getters', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var circle = new Kinetic.Circle({ + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 50, fill: 'red' }); - var ellipse = new Kinetic.Circle({ + var ellipse = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 50, @@ -272,8 +272,8 @@ suite('Shape', function() { var imageObj = new Image(); imageObj.onload = function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: 200, y: 60, radius: 50, @@ -315,8 +315,8 @@ suite('Shape', function() { // ====================================================== test('test enablers and disablers', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -342,7 +342,7 @@ suite('Shape', function() { assert.equal(circle.getStrokeScaleEnabled(), false); layer.draw(); - var trace = layer.getContext().getTrace(); +// var trace = layer.getContext().getTrace(); circle.fillEnabled(false); assert.equal(circle.getFillEnabled(), false, 'fillEnabled should be false'); @@ -377,9 +377,9 @@ suite('Shape', function() { test('fill with shadow and opacity', function(){ var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var rect = new Kinetic.Rect({ + var rect = new Konva.Rect({ x: 100, y: 50, width: 100, @@ -409,9 +409,9 @@ suite('Shape', function() { test('stroke with shadow and opacity', function(){ var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var rect = new Kinetic.Rect({ + var rect = new Konva.Rect({ x: 100, y: 50, width: 100, @@ -441,9 +441,9 @@ suite('Shape', function() { test('fill and stroke with opacity', function(){ var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var rect = new Kinetic.Rect({ + var rect = new Konva.Rect({ x: 100, y: 50, width: 100, @@ -483,9 +483,9 @@ suite('Shape', function() { test('fill and stroke with shadow', function(){ var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var rect = new Kinetic.Rect({ + var rect = new Konva.Rect({ x: 100, y: 50, width: 100, @@ -542,9 +542,9 @@ suite('Shape', function() { stage.bufferCanvas._canvas.style.position = 'relative'; document.body.appendChild(stage.bufferCanvas._canvas); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var rect = new Kinetic.Rect({ + var rect = new Konva.Rect({ x: 100, y: 50, width: 100, @@ -619,9 +619,9 @@ suite('Shape', function() { test('shape intersect with shadow', function(){ var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var rect = new Kinetic.Rect({ + var rect = new Konva.Rect({ fill: '#ff0000', x: 50, y: 50, @@ -642,9 +642,9 @@ suite('Shape', function() { test('overloaded getters and setters', function(){ var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var rect = new Kinetic.Rect({ + var rect = new Konva.Rect({ x: 100, y: 50, width: 100, @@ -699,11 +699,11 @@ suite('Shape', function() { var imageObj = new Image(); var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); imageObj.onload = function() { - var lion = new Kinetic.Image({ + var lion = new Konva.Image({ x: 200, y: 40, image: imageObj, @@ -716,7 +716,7 @@ suite('Shape', function() { // override color key with black lion.colorKey = '#000000'; - Kinetic.shapes['#000000'] = lion; + Konva.shapes['#000000'] = lion; layer.add(lion); @@ -746,13 +746,13 @@ suite('Shape', function() { }); test('back compat', function() { - assert.notEqual(Kinetic.Shape.prototype.dashArray, undefined); - assert.notEqual(Kinetic.Shape.prototype.setDashArray, undefined); - assert.notEqual(Kinetic.Shape.prototype.getDashArray, undefined); + assert.notEqual(Konva.Shape.prototype.dashArray, undefined); + assert.notEqual(Konva.Shape.prototype.setDashArray, undefined); + assert.notEqual(Konva.Shape.prototype.getDashArray, undefined); }); test('test defaults', function() { - var shape = new Kinetic.Shape(); + var shape = new Konva.Shape(); assert.equal(shape.strokeRed(), 0); assert.equal(shape.strokeGreen(), 0); @@ -795,8 +795,8 @@ suite('Shape', function() { // ====================================================== test.skip('hit graph when shape cached before adding to Layer', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var rect = new Kinetic.Rect({ + var layer = new Konva.Layer(); + var rect = new Konva.Rect({ x: 290, y: 111, width : 50, @@ -823,22 +823,22 @@ suite('Shape', function() { clientY: 120 + top }); - Kinetic.DD._endDragBefore(); + Konva.DD._endDragBefore(); stage._mouseup({ clientX: 300, clientY: 120 + top }); - Kinetic.DD._endDragAfter({dragEndNode:rect}); + Konva.DD._endDragAfter({dragEndNode:rect}); //TODO: can't get this to pass assert.equal(click, true, 'click event should have been fired when mousing down and then up on rect'); }); test('class inherince', function() { - var rect = new Kinetic.Rect(); - assert.equal(rect instanceof Kinetic.Rect, true); - assert.equal(rect instanceof Kinetic.Shape, true); - assert.equal(rect instanceof Kinetic.Node, true); + var rect = new Konva.Rect(); + assert.equal(rect instanceof Konva.Rect, true); + assert.equal(rect instanceof Konva.Shape, true); + assert.equal(rect instanceof Konva.Node, true); }); }); \ No newline at end of file diff --git a/test/unit/Stage-test.js b/test/unit/Stage-test.js index bb671d95..463edb8b 100644 --- a/test/unit/Stage-test.js +++ b/test/unit/Stage-test.js @@ -2,18 +2,18 @@ suite('Stage', function() { // ====================================================== test('instantiate stage with id', function() { - var container = Kinetic.document.createElement('div'); + var container = Konva.document.createElement('div'); container.id = 'container'; - kineticContainer.appendChild(container); + konvaContainer.appendChild(container); - var stage = new Kinetic.Stage({ + var stage = new Konva.Stage({ container: 'container', width: 578, height: 200 }); - assert.equal(stage.getContent().className, 'kineticjs-content'); + assert.equal(stage.getContent().className, 'konvajs-content'); assert.equal(stage.getContent().getAttribute('role'), 'presentation'); @@ -21,15 +21,15 @@ suite('Stage', function() { // ====================================================== test('test stage buffer canvas and hit buffer canvas', function() { - var container = Kinetic.document.createElement('div'); + var container = Konva.document.createElement('div'); container.id = 'container'; - kineticContainer.appendChild(container); + konvaContainer.appendChild(container); // simulate pixelRatio = 2 - Kinetic.pixelRatio = 2; + Konva.pixelRatio = 2; - var stage = new Kinetic.Stage({ + var stage = new Konva.Stage({ container: 'container', width: 578, height: 200 @@ -40,16 +40,16 @@ suite('Stage', function() { assert.equal(stage.bufferHitCanvas.getPixelRatio(), 2); // reset - Kinetic.pixelRatio = 1; + Konva.pixelRatio = 1; }); // ====================================================== test('instantiate stage with dom element', function() { - var container = Kinetic.document.createElement('div'); + var container = Konva.document.createElement('div'); - kineticContainer.appendChild(container); + konvaContainer.appendChild(container); - var stage = new Kinetic.Stage({ + var stage = new Konva.Stage({ container: container, width: 578, height: 200 @@ -58,13 +58,13 @@ suite('Stage', function() { // ====================================================== test('stage instantiation should clear container', function() { - var container = Kinetic.document.createElement('div'); - var dummy = Kinetic.document.createElement('p'); + var container = Konva.document.createElement('div'); + var dummy = Konva.document.createElement('p'); container.appendChild(dummy); - kineticContainer.appendChild(container); + konvaContainer.appendChild(container); - var stage = new Kinetic.Stage({ + var stage = new Konva.Stage({ container: container, width: 578, height: 200 @@ -76,7 +76,7 @@ suite('Stage', function() { // ====================================================== test('test stage cloning', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); stage.add(layer); var stageClone = stage.clone(); @@ -90,9 +90,9 @@ suite('Stage', function() { test('set stage size', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var circle = new Kinetic.Circle({ + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -146,15 +146,15 @@ suite('Stage', function() { test('get stage DOM', function() { var stage = addStage(); - assert.equal(stage.getContent().className, 'kineticjs-content'); + assert.equal(stage.getContent().className, 'konvajs-content'); }); // ====================================================== test('stage getIntersection()', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var redCircle = new Kinetic.Circle({ + var redCircle = new Konva.Circle({ x: 380, y: stage.getHeight() / 2, radius: 70, @@ -164,7 +164,7 @@ suite('Stage', function() { id: 'redCircle' }); - var greenCircle = new Kinetic.Circle({ + var greenCircle = new Konva.Circle({ x: 300, y: stage.getHeight() / 2, radius: 70, @@ -188,9 +188,9 @@ suite('Stage', function() { // ====================================================== test('stage getIntersection() edge detection', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var redCircle = new Kinetic.Circle({ + var redCircle = new Konva.Circle({ x: 380, y: stage.getHeight() / 2, radius: 70, @@ -200,7 +200,7 @@ suite('Stage', function() { id: 'redCircle' }); - var greenCircle = new Kinetic.Circle({ + var greenCircle = new Konva.Circle({ x: 300, y: stage.getHeight() / 2, radius: 70, @@ -235,9 +235,9 @@ suite('Stage', function() { // ====================================================== test('test getAllIntersections', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var redCircle = new Kinetic.Circle({ + var redCircle = new Konva.Circle({ x: 380, y: stage.getHeight() / 2, radius: 70, @@ -247,7 +247,7 @@ suite('Stage', function() { id: 'redCircle' }); - var greenCircle = new Kinetic.Circle({ + var greenCircle = new Konva.Circle({ x: 300, y: stage.getHeight() / 2, radius: 70, @@ -312,8 +312,8 @@ suite('Stage', function() { // ====================================================== test('scale stage after add layer', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -335,8 +335,8 @@ suite('Stage', function() { // ====================================================== test('scale stage before add shape', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -357,8 +357,8 @@ suite('Stage', function() { // ====================================================== test('remove stage', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -378,11 +378,11 @@ suite('Stage', function() { // ====================================================== test('destroy stage', function() { - var container = Kinetic.document.createElement('div'); + var container = Konva.document.createElement('div'); - kineticContainer.appendChild(container); + konvaContainer.appendChild(container); - var stage = new Kinetic.Stage({ + var stage = new Konva.Stage({ container: container, width: 578, height: 200, @@ -390,8 +390,8 @@ suite('Stage', function() { name: 'stageFalconName' }); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -405,18 +405,18 @@ suite('Stage', function() { layer.add(circle); stage.add(layer); - assert.equal(Kinetic.ids.stageFalconId._id, stage._id, 'stage id should be in global ids map'); - assert.equal(Kinetic.names.stageFalconName[0]._id, stage._id, 'stage name should be in global names map'); - assert.equal(Kinetic.ids.circleFalconId._id, circle._id, 'circle id should be in global ids map'); - assert.equal(Kinetic.names.circleFalconName[0]._id, circle._id, 'circle name should be in global names map'); + assert.equal(Konva.ids.stageFalconId._id, stage._id, 'stage id should be in global ids map'); + assert.equal(Konva.names.stageFalconName[0]._id, stage._id, 'stage name should be in global names map'); + assert.equal(Konva.ids.circleFalconId._id, circle._id, 'circle id should be in global ids map'); + assert.equal(Konva.names.circleFalconName[0]._id, circle._id, 'circle name should be in global names map'); stage.destroy(); - assert.equal(Kinetic.ids.stageFalconId, undefined, 'stage should no longer be in ids map'); - assert.equal(Kinetic.names.stageFalconName, undefined, 'stage should no longer be in names map'); - assert.equal(Kinetic.ids.circleFalconId, undefined, 'circle should no longer be in ids map'); - assert.equal(Kinetic.names.circleFalconName, undefined, 'circle should no longer be in names map'); - assert.equal(Kinetic.stages.indexOf(stage) === -1, true, 'stage should not be in stages array'); + assert.equal(Konva.ids.stageFalconId, undefined, 'stage should no longer be in ids map'); + assert.equal(Konva.names.stageFalconName, undefined, 'stage should no longer be in names map'); + assert.equal(Konva.ids.circleFalconId, undefined, 'circle should no longer be in ids map'); + assert.equal(Konva.names.circleFalconName, undefined, 'circle should no longer be in names map'); + assert.equal(Konva.stages.indexOf(stage) === -1, true, 'stage should not be in stages array'); }); @@ -425,7 +425,7 @@ suite('Stage', function() { test('scale stage with no shapes', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); stage.add(layer); stage.setScale(0.5); @@ -444,17 +444,17 @@ suite('Stage', function() { test('add multiple layers to stage', function() { var stage = addStage(); - var layer1 = new Kinetic.Layer(); - var layer2 = new Kinetic.Layer(); - var layer3 = new Kinetic.Layer(); + var layer1 = new Konva.Layer(); + var layer2 = new Konva.Layer(); + var layer3 = new Konva.Layer(); stage.add(layer1, layer2, layer3); assert.equal(stage.getLayers().length, 3, 'stage has exactly three layers'); }); // ====================================================== test('test drag and click', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var rect = new Kinetic.Rect({ + var layer = new Konva.Layer(); + var rect = new Konva.Rect({ x: 50, y: 50, width: 50, @@ -499,12 +499,12 @@ suite('Stage', function() { clientY: clientY }); - Kinetic.DD._endDragBefore(); + Konva.DD._endDragBefore(); stage._mouseup({ clientX: 65, clientY: clientY }); - Kinetic.DD._endDragAfter({dragEndNode:rect}); + Konva.DD._endDragAfter({dragEndNode:rect}); // simulate click stage._mousedown({ diff --git a/test/unit/Tween-test.js b/test/unit/Tween-test.js index 52d4bb28..8c10daf1 100644 --- a/test/unit/Tween-test.js +++ b/test/unit/Tween-test.js @@ -4,9 +4,9 @@ suite('Tween', function() { test('tween node', function(done) { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var circle = new Kinetic.Circle({ + var circle = new Konva.Circle({ x: 100, y: stage.getHeight() / 2, radius: 70, @@ -27,17 +27,17 @@ suite('Tween', function() { var tweens = 0; var attrs = 0; - for (var key in Kinetic.Tween.tweens) { + for (var key in Konva.Tween.tweens) { tweens++; } - for (var key in Kinetic.Tween.attrs) { + for (var key in Konva.Tween.attrs) { attrs++; } assert.equal(tweens, 0); assert.equal(attrs, 0); - var tween = new Kinetic.Tween({ + var tween = new Konva.Tween({ node: circle, duration: 0.2, x: 200, @@ -47,18 +47,18 @@ suite('Tween', function() { var tweens = 0; var attrs = 0; - for (var key in Kinetic.Tween.tweens) { + for (var key in Konva.Tween.tweens) { tweens++; } - for (var key in Kinetic.Tween.attrs[circle._id][tween._id]) { + for (var key in Konva.Tween.attrs[circle._id][tween._id]) { attrs++; } assert.equal(tweens, 1); assert.equal(attrs, 2); - assert.notEqual(Kinetic.Tween.attrs[circle._id][tween._id].x, undefined); - assert.notEqual(Kinetic.Tween.attrs[circle._id][tween._id].y, undefined); + assert.notEqual(Konva.Tween.attrs[circle._id][tween._id].x, undefined); + assert.notEqual(Konva.Tween.attrs[circle._id][tween._id].y, undefined); }); @@ -66,9 +66,9 @@ suite('Tween', function() { test('destroy tween while tweening', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var circle = new Kinetic.Circle({ + var circle = new Konva.Circle({ x: 100, y: stage.getHeight() / 2, radius: 70, @@ -81,7 +81,7 @@ suite('Tween', function() { stage.add(layer); - var tween = new Kinetic.Tween({ + var tween = new Konva.Tween({ node: circle, duration: 0.2, x: 200, @@ -92,13 +92,13 @@ suite('Tween', function() { // tweenId = tweens.nodeId.attr assert.notEqual(tween._id, undefined); - assert.equal(Kinetic.Tween.tweens[circle._id].x, tween._id); - assert.notEqual(Kinetic.Tween.attrs[circle._id][tween._id], undefined); + assert.equal(Konva.Tween.tweens[circle._id].x, tween._id); + assert.notEqual(Konva.Tween.attrs[circle._id][tween._id], undefined); tween.destroy(); - assert.equal(Kinetic.Tween.tweens[circle._id].x, undefined); - assert.equal(Kinetic.Tween.attrs[circle._id][tween._id], undefined); + assert.equal(Konva.Tween.tweens[circle._id].x, undefined); + assert.equal(Konva.Tween.attrs[circle._id][tween._id], undefined); }); @@ -107,9 +107,9 @@ suite('Tween', function() { test('zero duration', function(done) { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var circle = new Kinetic.Circle({ + var circle = new Konva.Circle({ x: 100, y: stage.getHeight() / 2, radius: 70, @@ -122,7 +122,7 @@ suite('Tween', function() { stage.add(layer); - var tween = new Kinetic.Tween({ + var tween = new Konva.Tween({ node: circle, duration: 0, x: 200, diff --git a/test/unit/Util-test.js b/test/unit/Util-test.js index c678c038..adb179d1 100644 --- a/test/unit/Util-test.js +++ b/test/unit/Util-test.js @@ -1,15 +1,15 @@ suite('Util', function(){ test('get()', function(){ - assert.equal(Kinetic.Util.get(1, 2), 1); - assert.equal(Kinetic.Util.get(undefined, 2), 2); - assert.equal(Kinetic.Util.get(undefined, {foo:'bar'}).foo, 'bar'); + assert.equal(Konva.Util.get(1, 2), 1); + assert.equal(Konva.Util.get(undefined, 2), 2); + assert.equal(Konva.Util.get(undefined, {foo:'bar'}).foo, 'bar'); }); test('test _getRGBString()', function(){ - assert.equal(Kinetic.Util._getRGBAString({}), 'rgba(0,0,0,1)'); + assert.equal(Konva.Util._getRGBAString({}), 'rgba(0,0,0,1)'); - assert.equal(Kinetic.Util._getRGBAString({ + assert.equal(Konva.Util._getRGBAString({ red: 100, green: 150, blue: 200, diff --git a/test/unit/filters/Blur-test.js b/test/unit/filters/Blur-test.js index 2cec18bc..0f6b3c3c 100644 --- a/test/unit/filters/Blur-test.js +++ b/test/unit/filters/Blur-test.js @@ -6,8 +6,8 @@ suite('Blur', function() { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -18,7 +18,7 @@ suite('Blur', function() { stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.Blur]); + darth.filters([Konva.Filters.Blur]); darth.blurRadius(10); assert.equal(darth.blurRadius(), 10); @@ -45,13 +45,13 @@ suite('Blur', function() { test('blur group', function(){ var stage = addStage(); - var layer = new Kinetic.Layer(); - var group = new Kinetic.Group({ + var layer = new Konva.Layer(); + var group = new Konva.Group({ x: 100, y: 100, draggable: true }); - var top = new Kinetic.Circle({ + var top = new Konva.Circle({ x: 0, y: -70, radius: 30, @@ -59,7 +59,7 @@ suite('Blur', function() { stroke: 'black', strokeWidth: 4 }); - var right = new Kinetic.Circle({ + var right = new Konva.Circle({ x: 70, y: 0, radius: 30, @@ -67,7 +67,7 @@ suite('Blur', function() { stroke: 'black', strokeWidth: 4 }); - var bottom = new Kinetic.Circle({ + var bottom = new Konva.Circle({ x: 0, y: 70, radius: 30, @@ -75,7 +75,7 @@ suite('Blur', function() { stroke: 'black', strokeWidth: 4 }); - var left = new Kinetic.Circle({ + var left = new Konva.Circle({ x: -70, y: 0, radius: 30, @@ -100,7 +100,7 @@ suite('Blur', function() { y: 150 }); - group.filters([Kinetic.Filters.Blur]); + group.filters([Konva.Filters.Blur]); group.blurRadius(20); layer.draw(); @@ -122,8 +122,8 @@ suite('Blur', function() { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -134,15 +134,15 @@ suite('Blur', function() { stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.Blur]); + darth.filters([Konva.Filters.Blur]); darth.blurRadius(100); layer.draw(); - var tween = new Kinetic.Tween({ + var tween = new Konva.Tween({ node: darth, duration: 2.0, blurRadius: 0, - easing: Kinetic.Easings.EaseInOut + easing: Konva.Easings.EaseInOut }); darth.on('mouseover', function() { @@ -166,8 +166,8 @@ suite('Blur', function() { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -179,7 +179,7 @@ suite('Blur', function() { stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.Blur]); + darth.filters([Konva.Filters.Blur]); darth.blurRadius(10); layer.draw(); @@ -196,8 +196,8 @@ suite('Blur', function() { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -209,15 +209,15 @@ suite('Blur', function() { stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.Blur]); + darth.filters([Konva.Filters.Blur]); darth.blurRadius(100); layer.draw(); - var tween = new Kinetic.Tween({ + var tween = new Konva.Tween({ node: darth, duration: 2.0, blurRadius: 0, - easing: Kinetic.Easings.EaseInOut + easing: Konva.Easings.EaseInOut }); darth.on('mouseover', function() { @@ -241,8 +241,8 @@ suite('Blur', function() { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -253,15 +253,15 @@ suite('Blur', function() { stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.Blur]); + darth.filters([Konva.Filters.Blur]); darth.blurRadius(100); layer.draw(); - var tween = new Kinetic.Tween({ + var tween = new Konva.Tween({ node: darth, duration: 2.0, blurRadius: 0, - easing: Kinetic.Easings.EaseInOut + easing: Konva.Easings.EaseInOut }); darth.on('mouseover', function() { @@ -285,8 +285,8 @@ suite('Blur', function() { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -299,7 +299,7 @@ suite('Blur', function() { stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.Blur]); + darth.filters([Konva.Filters.Blur]); darth.blurRadius(20); darth.drawHitFromCache(100); layer.draw(); diff --git a/test/unit/filters/Brighten-test.js b/test/unit/filters/Brighten-test.js index 83748920..23cdd954 100644 --- a/test/unit/filters/Brighten-test.js +++ b/test/unit/filters/Brighten-test.js @@ -6,8 +6,8 @@ suite('Brighten', function() { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -18,7 +18,7 @@ suite('Brighten', function() { stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.Brighten]); + darth.filters([Konva.Filters.Brighten]); darth.brightness(0.3); layer.draw(); @@ -37,8 +37,8 @@ suite('Brighten', function() { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -49,15 +49,15 @@ suite('Brighten', function() { stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.Brighten]); + darth.filters([Konva.Filters.Brighten]); darth.brightness(0.3); layer.draw(); - var tween = new Kinetic.Tween({ + var tween = new Konva.Tween({ node: darth, duration: 2.0, brightness: 0, - easing: Kinetic.Easings.EaseInOut + easing: Konva.Easings.EaseInOut }); darth.on('mouseover', function() { @@ -81,8 +81,8 @@ suite('Brighten', function() { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -94,7 +94,7 @@ suite('Brighten', function() { stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.Brighten]); + darth.filters([Konva.Filters.Brighten]); darth.brightness(-0.3); layer.draw(); @@ -113,8 +113,8 @@ suite('Brighten', function() { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -125,15 +125,15 @@ suite('Brighten', function() { stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.Brighten]); + darth.filters([Konva.Filters.Brighten]); darth.brightness(0.3); layer.draw(); - var tween = new Kinetic.Tween({ + var tween = new Konva.Tween({ node: darth, duration: 2.0, brightness: -0.3, - easing: Kinetic.Easings.EaseInOut + easing: Konva.Easings.EaseInOut }); darth.on('mouseover', function() { diff --git a/test/unit/filters/Emboss-test.js b/test/unit/filters/Emboss-test.js index 12d66b45..e30e625b 100644 --- a/test/unit/filters/Emboss-test.js +++ b/test/unit/filters/Emboss-test.js @@ -6,8 +6,8 @@ suite('Emboss', function() { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -17,18 +17,18 @@ suite('Emboss', function() { layer.add(darth); stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.Emboss]); + darth.filters([Konva.Filters.Emboss]); darth.embossStrength(0.5); darth.embossWhiteLevel(0.8); darth.embossDirection('top-right'); layer.draw(); - var tween = new Kinetic.Tween({ + var tween = new Konva.Tween({ node: darth, duration: 0.6, embossStrength: 10, - easing: Kinetic.Easings.EaseInOut + easing: Konva.Easings.EaseInOut }); darth.on('mouseover', function() { @@ -53,8 +53,8 @@ suite('Emboss', function() { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -64,18 +64,18 @@ suite('Emboss', function() { layer.add(darth); stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.Emboss]); + darth.filters([Konva.Filters.Emboss]); darth.embossStrength(0.5); darth.embossWhiteLevel(0.2); darth.embossBlend(true); layer.draw(); - var tween = new Kinetic.Tween({ + var tween = new Konva.Tween({ node: darth, duration: 0.6, embossStrength: 10, - easing: Kinetic.Easings.EaseInOut + easing: Konva.Easings.EaseInOut }); darth.on('mouseover', function() { diff --git a/test/unit/filters/Enhance-test.js b/test/unit/filters/Enhance-test.js index 466c3efe..3334adcb 100644 --- a/test/unit/filters/Enhance-test.js +++ b/test/unit/filters/Enhance-test.js @@ -6,14 +6,14 @@ suite('Enhance', function () { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - var filt = new Kinetic.Image({ + var layer = new Konva.Layer(); + var filt = new Konva.Image({ x: 10, y: 10, image: imageObj, draggable: true }); - var orig = new Kinetic.Image({ + var orig = new Konva.Image({ x: 200, y: 10, image: imageObj, @@ -26,7 +26,7 @@ suite('Enhance', function () { filt.cache(); filt.enhance(1.0); - filt.filters([Kinetic.Filters.Enhance]); + filt.filters([Konva.Filters.Enhance]); layer.draw(); done(); @@ -42,8 +42,8 @@ suite('Enhance', function () { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -54,15 +54,15 @@ suite('Enhance', function () { stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.Enhance]); + darth.filters([Konva.Filters.Enhance]); darth.enhance(-1); layer.draw(); - var tween = new Kinetic.Tween({ + var tween = new Konva.Tween({ node: darth, duration: 2.0, enhance: 1.0, - easing: Kinetic.Easings.EaseInOut + easing: Konva.Easings.EaseInOut }); darth.on('mouseover', function() { diff --git a/test/unit/filters/Grayscale-test.js b/test/unit/filters/Grayscale-test.js index c951a5b5..ee9534c0 100644 --- a/test/unit/filters/Grayscale-test.js +++ b/test/unit/filters/Grayscale-test.js @@ -6,8 +6,8 @@ suite('Grayscale', function() { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -18,7 +18,7 @@ suite('Grayscale', function() { stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.Grayscale]); + darth.filters([Konva.Filters.Grayscale]); layer.draw(); done(); @@ -34,8 +34,8 @@ suite('Grayscale', function() { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -47,7 +47,7 @@ suite('Grayscale', function() { stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.Grayscale]); + darth.filters([Konva.Filters.Grayscale]); layer.draw(); done(); @@ -63,8 +63,8 @@ suite('Grayscale', function() { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -75,7 +75,7 @@ suite('Grayscale', function() { stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.Grayscale]); + darth.filters([Konva.Filters.Grayscale]); layer.draw(); done(); diff --git a/test/unit/filters/HSL-test.js b/test/unit/filters/HSL-test.js index 51a422b4..3fafb5a4 100644 --- a/test/unit/filters/HSL-test.js +++ b/test/unit/filters/HSL-test.js @@ -8,8 +8,8 @@ suite('HSL', function() { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -20,15 +20,15 @@ suite('HSL', function() { stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.HSL]); + darth.filters([Konva.Filters.HSL]); darth.hue(360); layer.draw(); - var tween = new Kinetic.Tween({ + var tween = new Konva.Tween({ node: darth, duration: 1.0, hue: 0, - easing: Kinetic.Easings.EaseInOut + easing: Konva.Easings.EaseInOut }); darth.on('mouseover', function() { @@ -52,8 +52,8 @@ suite('HSL', function() { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -64,15 +64,15 @@ suite('HSL', function() { stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.HSL]); + darth.filters([Konva.Filters.HSL]); darth.luminance(1.0); layer.draw(); - var tween = new Kinetic.Tween({ + var tween = new Konva.Tween({ node: darth, duration: 1.0, luminance: -1.0, - easing: Kinetic.Easings.EaseInOut + easing: Konva.Easings.EaseInOut }); darth.on('mouseover', function() { @@ -96,8 +96,8 @@ suite('HSL', function() { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -108,15 +108,15 @@ suite('HSL', function() { stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.HSL]); + darth.filters([Konva.Filters.HSL]); darth.saturation(1.0); layer.draw(); - var tween = new Kinetic.Tween({ + var tween = new Konva.Tween({ node: darth, duration: 1.0, saturation: -1.0, - easing: Kinetic.Easings.EaseInOut + easing: Konva.Easings.EaseInOut }); darth.on('mouseover', function() { diff --git a/test/unit/filters/HSV-test.js b/test/unit/filters/HSV-test.js index 33fa8355..7729a7aa 100644 --- a/test/unit/filters/HSV-test.js +++ b/test/unit/filters/HSV-test.js @@ -8,8 +8,8 @@ suite('HSV', function() { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -20,15 +20,15 @@ suite('HSV', function() { stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.HSV]); + darth.filters([Konva.Filters.HSV]); darth.hue(360); layer.draw(); - var tween = new Kinetic.Tween({ + var tween = new Konva.Tween({ node: darth, duration: 1.0, hue: 0, - easing: Kinetic.Easings.EaseInOut + easing: Konva.Easings.EaseInOut }); darth.on('mouseover', function() { @@ -52,8 +52,8 @@ suite('HSV', function() { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -64,16 +64,16 @@ suite('HSV', function() { stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.HSV]); + darth.filters([Konva.Filters.HSV]); darth.saturation(1.0); layer.draw(); - var tween = new Kinetic.Tween({ + var tween = new Konva.Tween({ node: darth, duration: 1.0, saturation: -1.0, - easing: Kinetic.Easings.EaseInOut + easing: Konva.Easings.EaseInOut }); darth.on('mouseover', function() { @@ -97,8 +97,8 @@ suite('HSV', function() { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -109,15 +109,15 @@ suite('HSV', function() { stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.HSV]); + darth.filters([Konva.Filters.HSV]); darth.saturation(1.0); layer.draw(); - var tween = new Kinetic.Tween({ + var tween = new Konva.Tween({ node: darth, duration: 1.0, saturation: -1, - easing: Kinetic.Easings.EaseInOut + easing: Konva.Easings.EaseInOut }); darth.on('mouseover', function() { @@ -141,8 +141,8 @@ suite('HSV', function() { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -153,15 +153,15 @@ suite('HSV', function() { stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.HSV]); + darth.filters([Konva.Filters.HSV]); darth.value(1.0); layer.draw(); - var tween = new Kinetic.Tween({ + var tween = new Konva.Tween({ node: darth, duration: 1.0, value: -1.0, - easing: Kinetic.Easings.EaseInOut + easing: Konva.Easings.EaseInOut }); darth.on('mouseover', function() { diff --git a/test/unit/filters/Invert-test.js b/test/unit/filters/Invert-test.js index bd8a2cca..5dc13ef0 100644 --- a/test/unit/filters/Invert-test.js +++ b/test/unit/filters/Invert-test.js @@ -6,8 +6,8 @@ suite('Invert', function() { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -18,7 +18,7 @@ suite('Invert', function() { stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.Invert]); + darth.filters([Konva.Filters.Invert]); layer.draw(); done(); @@ -34,8 +34,8 @@ suite('Invert', function() { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -47,7 +47,7 @@ suite('Invert', function() { stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.Invert]); + darth.filters([Konva.Filters.Invert]); layer.draw(); done(); @@ -63,8 +63,8 @@ suite('Invert', function() { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -75,7 +75,7 @@ suite('Invert', function() { stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.Invert]); + darth.filters([Konva.Filters.Invert]); layer.draw(); done(); diff --git a/test/unit/filters/Kaleidoscope-test.js b/test/unit/filters/Kaleidoscope-test.js index 49192510..3469d255 100644 --- a/test/unit/filters/Kaleidoscope-test.js +++ b/test/unit/filters/Kaleidoscope-test.js @@ -6,8 +6,8 @@ suite('Kaleidoscope', function() { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -18,7 +18,7 @@ suite('Kaleidoscope', function() { stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.Kaleidoscope]); + darth.filters([Konva.Filters.Kaleidoscope]); darth.kaleidoscopePower(2); assert.equal(darth.kaleidoscopePower(), 2); @@ -50,8 +50,8 @@ suite('Kaleidoscope', function() { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -62,16 +62,16 @@ suite('Kaleidoscope', function() { stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.Kaleidoscope]); + darth.filters([Konva.Filters.Kaleidoscope]); darth.kaleidoscopePower(3); darth.kaleidoscopeAngle(0); layer.draw(); - var tween = new Kinetic.Tween({ + var tween = new Konva.Tween({ node: darth, duration: 10.0, kaleidoscopeAngle: 720, - easing: Kinetic.Easings.EaseInOut + easing: Konva.Easings.EaseInOut }); darth.on('mouseover', function() { @@ -95,8 +95,8 @@ suite('Kaleidoscope', function() { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -107,16 +107,16 @@ suite('Kaleidoscope', function() { stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.Kaleidoscope]); + darth.filters([Konva.Filters.Kaleidoscope]); darth.kaleidoscopePower(0); darth.kaleidoscopeAngle(0); layer.draw(); - var tween = new Kinetic.Tween({ + var tween = new Konva.Tween({ node: darth, duration: 2.0, kaleidoscopePower: 8, - easing: Kinetic.EasingsEaseInOut + easing: Konva.EasingsEaseInOut }); darth.on('mouseover', function() { diff --git a/test/unit/filters/Mask-test.js b/test/unit/filters/Mask-test.js index 3aa248b2..c17b318a 100644 --- a/test/unit/filters/Mask-test.js +++ b/test/unit/filters/Mask-test.js @@ -7,16 +7,16 @@ suite('Mask', function() { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer({ + var layer = new Konva.Layer({ throttle: 999 }); - var bamoon = new Kinetic.Image({ + var bamoon = new Konva.Image({ x: 0, y: 0, image: imageObj, draggable: true }), - filtered = new Kinetic.Image({ + filtered = new Konva.Image({ x: 300, y: 0, image: imageObj, @@ -28,7 +28,7 @@ suite('Mask', function() { stage.add(layer); filtered.cache(); - filtered.filters([Kinetic.Filters.Mask]); + filtered.filters([Konva.Filters.Mask]); filtered.threshold(10); layer.draw(); diff --git a/test/unit/filters/Noise-test.js b/test/unit/filters/Noise-test.js index 852493ec..31523a7d 100644 --- a/test/unit/filters/Noise-test.js +++ b/test/unit/filters/Noise-test.js @@ -7,8 +7,8 @@ suite('Noise', function () { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -19,15 +19,15 @@ suite('Noise', function () { stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.Noise]); + darth.filters([Konva.Filters.Noise]); darth.noise(1); layer.draw(); - var tween = new Kinetic.Tween({ + var tween = new Konva.Tween({ node: darth, duration: 5.0, noise: 0, - easing: Kinetic.Easings.EaseInOut + easing: Konva.Easings.EaseInOut }); darth.on('mouseover', function() { diff --git a/test/unit/filters/Pixelate-test.js b/test/unit/filters/Pixelate-test.js index 3b923a52..fb0d4eb8 100644 --- a/test/unit/filters/Pixelate-test.js +++ b/test/unit/filters/Pixelate-test.js @@ -7,8 +7,8 @@ suite('Pixelate', function () { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - lion = new Kinetic.Image({ + var layer = new Konva.Layer(); + lion = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -19,15 +19,15 @@ suite('Pixelate', function () { stage.add(layer); lion.cache(); - lion.filters([Kinetic.Filters.Pixelate]); + lion.filters([Konva.Filters.Pixelate]); lion.pixelSize(16); layer.draw(); - var tween = new Kinetic.Tween({ + var tween = new Konva.Tween({ node: lion, duration: 3.0, pixelSize: 1, - easing: Kinetic.Easings.EaseInOut + easing: Konva.Easings.EaseInOut }); lion.on('mouseover', function() { diff --git a/test/unit/filters/Posterize-test.js b/test/unit/filters/Posterize-test.js index ae2b62db..aa50b0d6 100644 --- a/test/unit/filters/Posterize-test.js +++ b/test/unit/filters/Posterize-test.js @@ -7,8 +7,8 @@ suite('Posterize', function () { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -19,15 +19,15 @@ suite('Posterize', function () { stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.Posterize]); + darth.filters([Konva.Filters.Posterize]); darth.levels(0.2); layer.draw(); - var tween = new Kinetic.Tween({ + var tween = new Konva.Tween({ node: darth, duration: 1.0, levels: 0, - easing: Kinetic.Easings.Linear + easing: Konva.Easings.Linear }); darth.on('mouseover', function() { diff --git a/test/unit/filters/RGB-test.js b/test/unit/filters/RGB-test.js index ab380590..237cab81 100644 --- a/test/unit/filters/RGB-test.js +++ b/test/unit/filters/RGB-test.js @@ -6,8 +6,8 @@ suite('RGB', function() { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -18,7 +18,7 @@ suite('RGB', function() { stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.RGB]); + darth.filters([Konva.Filters.RGB]); darth.red(255).green(0).blue(128); layer.draw(); @@ -38,8 +38,8 @@ suite('RGB', function() { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -51,7 +51,7 @@ suite('RGB', function() { stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.RGB]); + darth.filters([Konva.Filters.RGB]); darth.red(0).green(255).blue(0); layer.draw(); @@ -66,7 +66,7 @@ suite('RGB', function() { // ====================================================== test('colorize transparancy', function(done) { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); var colors = [ [255,0,0], @@ -88,7 +88,7 @@ suite('RGB', function() { var imageObj = new Image(); imageObj.onload = (function(color,x){ return function() { - var darth = new Kinetic.Image({ + var darth = new Konva.Image({ x: x, y: 32, image: imageObj, @@ -97,7 +97,7 @@ suite('RGB', function() { layer.add(darth); darth.cache(); - darth.filters([Kinetic.Filters.RGB]); + darth.filters([Konva.Filters.RGB]); darth.red(color[0]).green(color[1]).blue(color[2]); nAdded += 1; diff --git a/test/unit/filters/Ripple-test.js b/test/unit/filters/Ripple-test.js index 940c01a2..97283807 100644 --- a/test/unit/filters/Ripple-test.js +++ b/test/unit/filters/Ripple-test.js @@ -6,8 +6,8 @@ suite('Ripple', function() { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -18,7 +18,7 @@ suite('Ripple', function() { stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.Ripple]); + darth.filters([Konva.Filters.Ripple]); darth.rippleSize(10); assert.equal(darth.rippleSize(), 10); @@ -50,8 +50,8 @@ suite('Ripple', function() { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -62,17 +62,17 @@ suite('Ripple', function() { stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.Ripple]); + darth.filters([Konva.Filters.Ripple]); darth.rippleSize(16); darth.rippleOffset(0); layer.draw(); - var tween = new Kinetic.Tween({ + var tween = new Konva.Tween({ node: darth, duration: 2.0, rippleOffset: 32, //rippleSize: 64, - easing: Kinetic.Easings.EaseInOut + easing: Konva.Easings.EaseInOut }); darth.on('mouseover', function() { @@ -96,8 +96,8 @@ suite('Ripple', function() { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -108,16 +108,16 @@ suite('Ripple', function() { stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.Ripple]); + darth.filters([Konva.Filters.Ripple]); darth.rippleSize(16); darth.rippleOffset(0); layer.draw(); - var tween = new Kinetic.Tween({ + var tween = new Konva.Tween({ node: darth, duration: 2.0, rippleSize: 64, - easing: Kinetic.Easings.EaseInOut + easing: Konva.Easings.EaseInOut }); darth.on('mouseover', function() { diff --git a/test/unit/filters/Sepia-test.js b/test/unit/filters/Sepia-test.js index 1b9e3d74..ad7a0444 100644 --- a/test/unit/filters/Sepia-test.js +++ b/test/unit/filters/Sepia-test.js @@ -6,8 +6,8 @@ suite('Filter Sepia', function() { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -18,7 +18,7 @@ suite('Filter Sepia', function() { stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.Sepia]); + darth.filters([Konva.Filters.Sepia]); layer.draw(); done(); @@ -34,8 +34,8 @@ suite('Filter Sepia', function() { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -48,7 +48,7 @@ suite('Filter Sepia', function() { stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.Sepia]); + darth.filters([Konva.Filters.Sepia]); layer.draw(); done(); @@ -64,8 +64,8 @@ suite('Filter Sepia', function() { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -76,7 +76,7 @@ suite('Filter Sepia', function() { stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.Sepia]); + darth.filters([Konva.Filters.Sepia]); layer.draw(); done(); diff --git a/test/unit/filters/Solarize-test.js b/test/unit/filters/Solarize-test.js index 26b27de6..7d8b96f4 100644 --- a/test/unit/filters/Solarize-test.js +++ b/test/unit/filters/Solarize-test.js @@ -6,8 +6,8 @@ suite('Solarize', function() { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -17,7 +17,7 @@ suite('Solarize', function() { layer.add(darth); stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.Solarize]); + darth.filters([Konva.Filters.Solarize]); layer.draw(); diff --git a/test/unit/filters/Threshold-test.js b/test/unit/filters/Threshold-test.js index f4e8d30a..5070df36 100644 --- a/test/unit/filters/Threshold-test.js +++ b/test/unit/filters/Threshold-test.js @@ -6,8 +6,8 @@ suite('Threshold', function () { var imageObj = new Image(); imageObj.onload = function() { - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 10, y: 10, image: imageObj, @@ -18,15 +18,15 @@ suite('Threshold', function () { stage.add(layer); darth.cache(); - darth.filters([Kinetic.Filters.Threshold]); + darth.filters([Konva.Filters.Threshold]); darth.threshold(1); layer.draw(); - var tween = new Kinetic.Tween({ + var tween = new Konva.Tween({ node: darth, duration: 5.0, threshold: 0, - easing: Kinetic.Easings.EaseInOut + easing: Konva.Easings.EaseInOut }); darth.on('mouseover', function() { diff --git a/test/unit/plugins/Arrow-test.js b/test/unit/plugins/Arrow-test.js index 1957325d..751104d7 100644 --- a/test/unit/plugins/Arrow-test.js +++ b/test/unit/plugins/Arrow-test.js @@ -2,9 +2,9 @@ suite('Arrow', function() { // ====================================================== test('add arrow', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var arrow = new Kinetic.Arrow({ + var arrow = new Konva.Arrow({ points: [73,160, 340, 23], stroke: 'blue', fill : 'blue', diff --git a/test/unit/plugins/Label-test.js b/test/unit/plugins/Label-test.js index d7ab0bc5..b08bf818 100644 --- a/test/unit/plugins/Label-test.js +++ b/test/unit/plugins/Label-test.js @@ -2,16 +2,16 @@ suite('Label', function() { // ====================================================== test.skip('add label', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var label = new Kinetic.Label({ + var label = new Konva.Label({ x: 100, y: 100, draggable: true }); // add a tag to the label - label.add(new Kinetic.Tag({ + label.add(new Konva.Tag({ fill: '#bbb', shadowColor: 'black', shadowBlur: 10, @@ -25,7 +25,7 @@ suite('Label', function() { })); // add text to the label - label.add(new Kinetic.Text({ + label.add(new Konva.Text({ text: '', fontSize: 50, //fontFamily: 'Calibri', @@ -65,9 +65,9 @@ suite('Label', function() { var stage = addStage(); var json = '{"attrs":{"x":100,"y":100,"draggable":true},"className":"Label","children":[{"attrs":{"fill":"#bbb","stroke":"#333","shadowColor":"black","shadowBlur":10,"shadowOffsetX":10,"shadowOffsetY":10,"shadowOpacity":0.2,"lineJoin":"round","pointerDirection":"up","pointerWidth":20,"pointerHeight":20,"cornerRadius":5,"x":-151.5,"y":20,"width":303,"height":60},"className":"Tag"},{"attrs":{"text":"Hello big world","fontSize":50,"lineHeight":1.2,"fill":"green","width":"auto","height":"auto","x":-151.5,"y":20},"className":"Text"}]}'; - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var label = Kinetic.Node.create(json); + var label = Konva.Node.create(json); layer.add(label); stage.add(layer); @@ -75,20 +75,20 @@ suite('Label', function() { test('find label class', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var label = new Kinetic.Label({ + var label = new Konva.Label({ x: 100, y: 100 }); // add a tag to the label - label.add(new Kinetic.Tag({ + label.add(new Konva.Tag({ fill: '#bbb' })); // add text to the label - label.add(new Kinetic.Text({ + label.add(new Konva.Text({ text: 'Test Label', fill: 'green' })); diff --git a/test/unit/plugins/Path-test.js b/test/unit/plugins/Path-test.js index cea207fb..7afaeff4 100644 --- a/test/unit/plugins/Path-test.js +++ b/test/unit/plugins/Path-test.js @@ -3,9 +3,9 @@ suite('Path', function() { test('add simple path', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var path = new Kinetic.Path({ + var path = new Konva.Path({ data: 'M200,100h100v50z', fill: '#ccc', stroke: '#333', @@ -48,9 +48,9 @@ suite('Path', function() { // ====================================================== test('add path with line cap and line join', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var path = new Kinetic.Path({ + var path = new Konva.Path({ data: 'M200,100h100v50', stroke: '#333', strokeWidth: 20, @@ -68,9 +68,9 @@ suite('Path', function() { //======================================================= test('add path with double closed path and releative moveto', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var path = new Kinetic.Path({ + var path = new Konva.Path({ data: 'm 4.114181,28.970898 8.838835,50.205 22.980968,-48.4372 z m -4.59619304,13.7887 0,18.385 c 14.10943004,-12.211 24.57748204,-6.2149 35.00178204,0 l 2.304443,-8.6004 -13.264598,0 c 2.227131,-5.4642 7.171257,-11.834 -6.858423,-11.8792 -3.920218,12.899 -9.493066,14.6427 -17.18320404,2.0946 z', stroke: '#000', strokeWidth: 1, @@ -87,9 +87,9 @@ suite('Path', function() { //======================================================= test('complex path made of many different closed and open paths (Sopwith Camel)', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var path = new Kinetic.Path({ + var path = new Konva.Path({ data: 'm 15.749277,58.447629 8.495831,-0.05348 m 0.319898,-15.826548 -0.202438,17.295748 0.942206,0.941911 1.345933,-1.816987 0.20211,-11.642611 z m 77.458374,28.680768 c 0,5.308829 -4.303525,9.612686 -9.612485,9.612686 -5.30873,0 -9.612194,-4.303857 -9.612194,-9.612686 0,-5.308829 4.303464,-9.61226 9.612194,-9.61226 5.30896,0 9.612485,4.303431 9.612485,9.61226 z m -3.520874,0 c 0,3.364079 -2.72763,6.091348 -6.091611,6.091348 -3.364243,0 -6.091119,-2.727269 -6.091119,-6.091348 0,-3.363719 2.726876,-6.090791 6.091119,-6.090791 3.363981,0 6.091611,2.727072 6.091611,6.090791 z m -3.997576,0 c 0,1.156718 -0.937743,2.093937 -2.094035,2.093937 -1.156062,0 -2.093871,-0.937219 -2.093871,-2.093937 0,-1.156357 0.937809,-2.093773 2.093871,-2.093773 1.156292,0 2.094035,0.937416 2.094035,2.093773 z m 45.77821,4.283023 c -0.24607,1.90039 5.06492,3.680204 7.61403,5.520093 0.50662,0.514199 0.27889,0.975967 -0.0984,1.427532 l 3.9019,-1.141987 c -0.59258,-0.121397 -1.85951,0.01969 -1.71294,-0.380038 -0.85894,-1.950525 -3.68693,-2.761261 -5.61518,-4.092495 -1.06971,-1.03496 0.0997,-1.60766 0.76126,-2.284203 z M 43.206396,42.60133 55.578964,74.008743 58.71987,73.910313 47.203939,44.40726 c -1.109013,-0.737406 -1.174108,-2.1004 -3.997543,-1.808752 z m -18.654022,-0.570632 12.467721,31.692335 3.140643,0.09843 -12.467656,-31.692927 z m 2.285318,42.353106 -2.636648,-0.06431 0.163066,0.734584 3.709372,9.956142 2.357927,-1.168202 z m 19.411934,0.566268 -6.370726,9.901284 2.090163,1.615665 7.13671,-11.417403 0.303821,-0.4347 -2.942667,-0.02953 z m -12.091915,8.286013 c -5.729323,0 -10.367941,4.560169 -10.367941,10.184405 0,5.62429 4.638618,10.18489 10.367941,10.18489 5.729424,0 10.37654,-4.5606 10.37654,-10.18489 0,-5.624236 -4.647083,-10.184405 -10.37654,-10.184405 z m 0,2.473319 c 4.310029,0 7.811352,3.453552 7.811352,7.711086 0,4.25776 -3.50129,7.71167 -7.811352,7.71167 -4.310157,0 -7.803016,-3.45391 -7.803016,-7.71167 0,-4.257534 3.492859,-7.711086 7.803016,-7.711086 z m 3.528526,-21.795876 c -1.29032,-0.0066 -2.97525,0.03839 -3.402437,1.45155 l -0.01969,7.494437 c 0.586775,0.761915 1.42432,0.688978 2.236565,0.71411 l 26.529545,-0.14502 8.636784,0.761324 0,-7.518487 C 71.56989,75.908478 71.09444,75.467051 70.239377,75.338961 61.126027,73.734287 49.244756,73.929146 37.690371,73.911166 z M 20.959576,41.269176 c -0.0098,0.603377 0.575258,0.881409 0.575258,0.881409 L 58.95771,42.33629 c -4.893946,-0.985482 -16.592629,-2.859625 -32.835015,-2.783473 -1.570354,0.107617 -5.151439,1.109571 -5.163119,1.712718 z m 3.353022,14.276273 c -2.79955,0.01312 -5.595489,0.02953 -8.382964,0.05545 l 0,9.9e-5 0.0033,1.447677 -1.173484,0.01312 0.0066,1.244485 1.184048,0.05807 c -1.34298,0.220812 -2.956414,1.305807 -3.054779,3.476618 0.0098,3.269061 0.01312,6.538943 0.01312,9.808103 l -1.21197,0.0033 -0.01969,-2.361569 -4.6851755,0.0033 0,5.901969 4.6323185,0.0066 -0.02953,-1.7556 1.308596,-0.02297 0.0098,9.180447 c -0.0066,1.315781 2.739048,3.634336 4.542583,3.634336 l 4.811756,-2.995032 c 1.616583,-0.107617 1.758126,0.482078 1.884346,1.076924 l 35.667571,0.318914 6.909664,-0.81031 m 4.994738,-0.585889 85.216614,-9.991675 c 4.93952,-0.487623 14.9162,-22.255511 -3.75098,-25.556727 -5.12814,-0.887479 -15.53194,4.839613 -21.44018,9.104984 -2.31314,1.954593 -1.74166,4.084194 0.0263,5.982879 l -72.209399,-8.111923 -2.12281,-0.0012 c -0.966453,1.390128 -3.158262,3.260465 -4.554559,4.053123 M 49.36027,58.361483 c -1.699757,-1.038536 -2.965602,-2.804438 -4.533856,-2.875275 -3.903936,0.0011 -7.904399,0.0066 -11.882849,0.01312 m -3.081192,0.0066 c -1.043195,0.0033 -2.082715,0.0066 -3.116396,0.0098', stroke: '#000', strokeWidth: 1, @@ -110,10 +110,10 @@ suite('Path', function() { // ====================================================== test('moveTo with implied lineTos and trailing comma', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var path = new Kinetic.Path({ - data: 'm200,100,100,0,0,50,-100,0z', + var path = new Konva.Path({ + data: 'm200,100,100,0,0,50,z', fill: '#fcc', // stroke: '#333', // strokeWidth: 2, @@ -165,12 +165,12 @@ suite('Path', function() { // ====================================================== test('add map path', function() { var stage = addStage(); - var mapLayer = new Kinetic.Layer(); + var mapLayer = new Konva.Layer(); for(var key in worldMap.shapes) { var c = worldMap.shapes[key]; - var path = new Kinetic.Path({ + var path = new Konva.Path({ data: c, fill: '#ccc', stroke: '#999', @@ -202,11 +202,11 @@ suite('Path', function() { // ====================================================== test('curved arrow path', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); var c = "M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z"; - var path = new Kinetic.Path({ + var path = new Konva.Path({ data: c, fill: '#ccc', stroke: '#999', @@ -231,11 +231,11 @@ suite('Path', function() { // ====================================================== test('Quadradic Curve test from SVG w3c spec', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); var c = "M200,300 Q400,50 600,300 T1000,300"; - var path = new Kinetic.Path({ + var path = new Konva.Path({ data: c, stroke: 'red', strokeWidth: 5 @@ -243,42 +243,42 @@ suite('Path', function() { layer.add(path); - layer.add(new Kinetic.Circle({ + layer.add(new Konva.Circle({ x: 200, y: 300, radius: 10, fill: 'black' })); - layer.add(new Kinetic.Circle({ + layer.add(new Konva.Circle({ x: 600, y: 300, radius: 10, fill: 'black' })); - layer.add(new Kinetic.Circle({ + layer.add(new Konva.Circle({ x: 1000, y: 300, radius: 10, fill: 'black' })); - layer.add(new Kinetic.Circle({ + layer.add(new Konva.Circle({ x: 400, y: 50, radius: 10, fill: '#888' })); - layer.add(new Kinetic.Circle({ + layer.add(new Konva.Circle({ x: 800, y: 550, radius: 10, fill: '#888' })); - layer.add(new Kinetic.Path({ + layer.add(new Konva.Path({ data: "M200,300 L400,50L600,300L800,550L1000,300", stroke: "#888", strokeWidth: 2 @@ -291,11 +291,11 @@ suite('Path', function() { // ====================================================== test('Cubic Bezier Curve test from SVG w3c spec using setData', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); var c = "M100,200 C100,100 250,100 250,200 S400,300 400,200"; - var path = new Kinetic.Path({ + var path = new Konva.Path({ stroke: 'red', strokeWidth: 5 }); @@ -304,49 +304,49 @@ suite('Path', function() { layer.add(path); - layer.add(new Kinetic.Circle({ + layer.add(new Konva.Circle({ x: 100, y: 200, radius: 10, stroke: '#888' })); - layer.add(new Kinetic.Circle({ + layer.add(new Konva.Circle({ x: 250, y: 200, radius: 10, stroke: '#888' })); - layer.add(new Kinetic.Circle({ + layer.add(new Konva.Circle({ x: 400, y: 200, radius: 10, stroke: '#888' })); - layer.add(new Kinetic.Circle({ + layer.add(new Konva.Circle({ x: 100, y: 100, radius: 10, fill: '#888' })); - layer.add(new Kinetic.Circle({ + layer.add(new Konva.Circle({ x: 250, y: 100, radius: 10, fill: '#888' })); - layer.add(new Kinetic.Circle({ + layer.add(new Konva.Circle({ x: 400, y: 300, radius: 10, fill: '#888' })); - layer.add(new Kinetic.Circle({ + layer.add(new Konva.Circle({ x: 250, y: 300, radius: 10, @@ -360,11 +360,11 @@ suite('Path', function() { // ====================================================== test('path arc', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); var c = "M100,350 l 50,-25 a25,25 -30 0,1 50,-25 l 50,-25 a25,50 -30 0,1 50,-25 l 50,-25 a25,75 -30 0,1 50,-25 l 50,-25 a25,100 -30 0,1 50,-25 l 50,-25"; - var path = new Kinetic.Path({ + var path = new Konva.Path({ data: c, fill: 'none', stroke: '#999', @@ -389,11 +389,11 @@ suite('Path', function() { // ====================================================== test('Tiger (RAWR!)', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var group = new Kinetic.Group(); + var layer = new Konva.Layer(); + var group = new Konva.Group(); for(var i = 0; i < tiger.length; i++) { - var path = new Kinetic.Path(tiger[i]); + var path = new Konva.Path(tiger[i]); group.add(path); } @@ -408,12 +408,12 @@ suite('Path', function() { // ====================================================== test('Able to determine point on line some distance from another point on line', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); var c = "M10,10 210,160"; // i.e., from a 3-4-5 triangle - var path = new Kinetic.Path({ + var path = new Konva.Path({ stroke: 'red', strokeWidth: 3 }); @@ -421,19 +421,19 @@ suite('Path', function() { path.setData(c); layer.add(path); - layer.add(new Kinetic.Circle({ + layer.add(new Konva.Circle({ x: 10, y: 10, radius: 10, fill: 'black' })); - var p1 = Kinetic.Path.getPointOnLine(125, 10, 10, 210, 160); + var p1 = Konva.Path.getPointOnLine(125, 10, 10, 210, 160); // should be 1/2 way, or (110,85) assert.equal(Math.round(p1.x), 110); assert.equal(Math.round(p1.y), 85); - layer.add(new Kinetic.Circle({ + layer.add(new Konva.Circle({ x: p1.x, y: p1.y, radius: 10, @@ -447,11 +447,11 @@ suite('Path', function() { // ====================================================== test('Able to determine points on Cubic Bezier Curve', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); var c = "M100,200 C100,100 250,100 250,200 S400,300 400,200"; - var path = new Kinetic.Path({ + var path = new Konva.Path({ stroke: 'red', strokeWidth: 3 }); @@ -462,16 +462,16 @@ suite('Path', function() { c = 'M 100 200'; for( t = 0.25; t <= 1; t += 0.25) { - var p1 = Kinetic.Path.getPointOnCubicBezier(t, 100, 200, 100, 100, 250, 100, 250, 200); + var p1 = Konva.Path.getPointOnCubicBezier(t, 100, 200, 100, 100, 250, 100, 250, 200); c += ' ' + p1.x.toString() + ' ' + p1.y.toString(); } for( t = 0.25; t <= 1; t += 0.25) { - var p1 = Kinetic.Path.getPointOnCubicBezier(t, 250, 200, 250, 300, 400, 300, 400, 200); + var p1 = Konva.Path.getPointOnCubicBezier(t, 250, 200, 250, 300, 400, 300, 400, 200); c += ' ' + p1.x.toString() + ' ' + p1.y.toString(); } - var testPath = new Kinetic.Path({ + var testPath = new Konva.Path({ stroke: 'black', strokewidth: 2, data: c @@ -484,11 +484,11 @@ suite('Path', function() { // ====================================================== test('Able to determine points on Quadratic Curve', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); var c = "M200,300 Q400,50 600,300 T1000,300"; - var path = new Kinetic.Path({ + var path = new Konva.Path({ stroke: 'red', strokeWidth: 3 }); @@ -499,16 +499,16 @@ suite('Path', function() { c = 'M 200 300'; for( t = 0.333; t <= 1; t += 0.333) { - var p1 = Kinetic.Path.getPointOnQuadraticBezier(t, 200, 300, 400, 50, 600, 300); + var p1 = Konva.Path.getPointOnQuadraticBezier(t, 200, 300, 400, 50, 600, 300); c += ' ' + p1.x.toString() + ' ' + p1.y.toString(); } for( t = 0.333; t <= 1; t += 0.333) { - var p1 = Kinetic.Path.getPointOnQuadraticBezier(t, 600, 300, 800, 550, 1000, 300); + var p1 = Konva.Path.getPointOnQuadraticBezier(t, 600, 300, 800, 550, 1000, 300); c += ' ' + p1.x.toString() + ' ' + p1.y.toString(); } - var testPath = new Kinetic.Path({ + var testPath = new Konva.Path({ stroke: 'black', strokewidth: 2, data: c @@ -521,11 +521,11 @@ suite('Path', function() { // ====================================================== test('Able to determine points on Elliptical Arc with clockwise stroke', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); var c = "M 50,100 A 100 50 0 1 1 150 150"; - var path = new Kinetic.Path({ + var path = new Konva.Path({ stroke: 'red', strokeWidth: 3 }); @@ -534,7 +534,7 @@ suite('Path', function() { layer.add(path); - var centerParamPoints = Kinetic.Path.convertEndpointToCenterParameterization(50, 100, 150, 150, 1, 1, 100, 50, 0); + var centerParamPoints = Konva.Path.convertEndpointToCenterParameterization(50, 100, 150, 150, 1, 1, 100, 50, 0); var start = centerParamPoints[4]; // 4 = theta @@ -544,27 +544,27 @@ suite('Path', function() { var inc = Math.PI / 6.0; // 30 degree resolution - var p1 = Kinetic.Path.getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], start, 0); + var p1 = Konva.Path.getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], start, 0); c = 'M ' + p1.x.toString() + ' ' + p1.y.toString(); if(dTheta < 0)// clockwise { for( t = start - inc; t > end; t -= inc) { - p1 = Kinetic.Path.getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], t, 0); + p1 = Konva.Path.getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], t, 0); c += ' ' + p1.x.toString() + ' ' + p1.y.toString(); } } else// counter-clockwise { for( t = start + inc; t < end; t += inc) { - p1 = Kinetic.Path.getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], t, 0); + p1 = Konva.Path.getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], t, 0); c += ' ' + p1.x.toString() + ' ' + p1.y.toString(); } } - p1 = Kinetic.Path.getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], end, 0); + p1 = Konva.Path.getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], end, 0); c += ' ' + p1.x.toString() + ' ' + p1.y.toString(); - var testpath = new Kinetic.Path({ + var testpath = new Konva.Path({ stroke: 'black', strokeWidth: 2, data: c @@ -577,11 +577,11 @@ suite('Path', function() { // ====================================================== test('Able to determine points on Elliptical Arc with counter-clockwise stroke', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); var c = "M 250,100 A 100 50 0 1 0 150 150"; - var path = new Kinetic.Path({ + var path = new Konva.Path({ stroke: 'red', strokeWidth: 3 }); @@ -590,7 +590,7 @@ suite('Path', function() { layer.add(path); - var centerParamPoints = Kinetic.Path.convertEndpointToCenterParameterization(250, 100, 150, 150, 1, 0, 100, 50, 0); + var centerParamPoints = Konva.Path.convertEndpointToCenterParameterization(250, 100, 150, 150, 1, 0, 100, 50, 0); var start = centerParamPoints[4]; // 4 = theta @@ -600,27 +600,27 @@ suite('Path', function() { var inc = Math.PI / 6.0; // 30 degree resolution - var p1 = Kinetic.Path.getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], start, 0); + var p1 = Konva.Path.getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], start, 0); c = 'M ' + p1.x.toString() + ' ' + p1.y.toString(); if(dTheta < 0)// clockwise { for( t = start - inc; t > end; t -= inc) { - p1 = Kinetic.Path.getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], t, 0); + p1 = Konva.Path.getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], t, 0); c += ' ' + p1.x.toString() + ' ' + p1.y.toString(); } } else// counter-clockwise { for( t = start + inc; t < end; t += inc) { - p1 = Kinetic.Path.getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], t, 0); + p1 = Konva.Path.getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], t, 0); c += ' ' + p1.x.toString() + ' ' + p1.y.toString(); } } - p1 = Kinetic.Path.getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], end, 0); + p1 = Konva.Path.getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], end, 0); c += ' ' + p1.x.toString() + ' ' + p1.y.toString(); - var testpath = new Kinetic.Path({ + var testpath = new Konva.Path({ stroke: 'black', strokeWidth: 2, data: c @@ -633,11 +633,11 @@ suite('Path', function() { // ====================================================== test('Able to determine points on Elliptical Arc when rotated', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); var c = "M 250,100 A 100 50 30 1 0 150 150"; - var path = new Kinetic.Path({ + var path = new Konva.Path({ stroke: 'red', strokeWidth: 3 }); @@ -646,7 +646,7 @@ suite('Path', function() { layer.add(path); - var centerParamPoints = Kinetic.Path.convertEndpointToCenterParameterization(250, 100, 150, 150, 1, 0, 100, 50, 30); + var centerParamPoints = Konva.Path.convertEndpointToCenterParameterization(250, 100, 150, 150, 1, 0, 100, 50, 30); var start = centerParamPoints[4]; // 4 = theta @@ -658,27 +658,27 @@ suite('Path', function() { var psi = centerParamPoints[6]; // 6 = psi radians - var p1 = Kinetic.Path.getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], start, psi); + var p1 = Konva.Path.getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], start, psi); c = 'M ' + p1.x.toString() + ' ' + p1.y.toString(); if(dTheta < 0)// clockwise { for( t = start - inc; t > end; t -= inc) { - p1 = Kinetic.Path.getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], t, psi); + p1 = Konva.Path.getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], t, psi); c += ' ' + p1.x.toString() + ' ' + p1.y.toString(); } } else// counter-clockwise { for( t = start + inc; t < end; t += inc) { - p1 = Kinetic.Path.getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], t, psi); + p1 = Konva.Path.getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], t, psi); c += ' ' + p1.x.toString() + ' ' + p1.y.toString(); } } - p1 = Kinetic.Path.getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], end, psi); + p1 = Konva.Path.getPointOnEllipticalArc(centerParamPoints[0], centerParamPoints[1], centerParamPoints[2], centerParamPoints[3], end, psi); c += ' ' + p1.x.toString() + ' ' + p1.y.toString(); - var testpath = new Kinetic.Path({ + var testpath = new Konva.Path({ stroke: 'black', strokeWidth: 2, data: c @@ -702,7 +702,7 @@ suite('Path', function() { x: -10, y: -10 }; - point = Kinetic.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y); + point = Konva.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y); assert(point.x < 0 && point.y < 0, 'The new point should be up left'); //point up right @@ -710,7 +710,7 @@ suite('Path', function() { x: 10, y: -10 }; - point = Kinetic.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y); + point = Konva.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y); assert(point.x > 0 && point.y < 0, 'The new point should be up right'); //point down right @@ -718,7 +718,7 @@ suite('Path', function() { x: 10, y: 10 }; - point = Kinetic.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y); + point = Konva.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y); assert(point.x > 0 && point.y > 0, 'The new point should be down right'); //point down left @@ -726,7 +726,7 @@ suite('Path', function() { x: -10, y: 10 }; - point = Kinetic.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y); + point = Konva.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y); assert(point.x < 0 && point.y > 0, 'The new point should be down left'); //point left @@ -734,7 +734,7 @@ suite('Path', function() { x: -10, y: 0 }; - point = Kinetic.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y); + point = Konva.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y); assert(point.x == -10 && point.y == 0, 'The new point should be left'); //point up @@ -742,7 +742,7 @@ suite('Path', function() { x: 0, y: -10 }; - point = Kinetic.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y); + point = Konva.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y); assert(Math.abs(point.x) < 0.0000001 && point.y == -10, 'The new point should be up'); //point right @@ -750,7 +750,7 @@ suite('Path', function() { x: 10, y: 0 }; - point = Kinetic.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y); + point = Konva.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y); assert(point.x == 10 && point.y == 0, 'The new point should be right'); //point down @@ -758,7 +758,7 @@ suite('Path', function() { x: 0, y: 10 }; - point = Kinetic.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y); + point = Konva.Path.getPointOnLine(10, origo.x, origo.y, p.x, p.y); assert(Math.abs(point.x) < 0.0000001 && point.y == 10, 'The new point should be down'); }); @@ -766,9 +766,9 @@ suite('Path', function() { test('Borneo Map (has scientific notation: -10e-4)', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var borneo = new Kinetic.Path({ + var borneo = new Konva.Path({ data: "m 136.68513,236.08861 c -0.63689,-0.67792 -0.75417,-1.28099 -1.03556,-5.32352 -0.26489,-3.80589 -0.4465,-4.81397 -1.09951,-6.1026 -0.51169,-1.00981 -0.98721,-1.54361 -1.375,-1.54361 -0.8911,0 -3.48931,-1.22828 -3.80975,-1.80103 -0.16294,-0.29089 -0.87295,-0.56825 -1.68693,-0.65886 -1.13423,-0.12629 -1.91094,0.0661 -4.02248,0.99633 -4.0367,1.77835 -5.46464,1.87106 -6.79674,0.44127 -0.51948,-0.55765 -0.64763,-1.12674 -0.64763,-2.87683 l 0,-2.18167 -0.87832,0.20996 c -0.48312,0.11549 -1.12041,0.33383 -1.41635,0.4852 -1.52799,0.78172 -4.61534,-0.0398 -5.55846,-1.47906 -0.30603,-0.46718 -1.06518,-1.19501 -1.68667,-1.61739 -1.27136,-0.86387 -1.62607,-0.6501 -1.63439,0.98494 -0.007,1.00822 -0.76687,2.38672 -1.31885,2.38672 -0.17579,0 -1.27182,0.66553 -2.4356,1.47895 -4.016775,2.8076 -6.006455,3.29182 -7.693525,1.87231 -0.52348,-0.44054 -1.43004,-1.00203 -2.01445,-1.24775 -1.35902,-0.57143 -2.10139,-0.21496 -5.36296,2.57523 -2.00259,1.71315 -2.55857,2.02869 -3.57441,2.02869 -0.66172,0 -1.31931,-0.17966 -1.46135,-0.39925 -0.27734,-0.42865 -0.75823,-5.15099 -0.87007,-8.54399 -0.0708,-2.14922 -0.41754,-3.83281 -0.78935,-3.83281 -0.1176,0 -0.45993,0.28746 -0.76078,0.63881 -0.66657,0.77849 -3.4572,0.87321 -4.70537,0.15969 -1.29782,-0.7419 -2.38029,-0.55672 -5.01545,0.85797 -2.16783,1.16385 -2.75945,1.33971 -4.5666,1.35746 -1.66762,0.0163 -2.276,-0.12217 -3.09174,-0.70405 -0.61985,-0.44211 -1.09397,-0.5977 -1.21663,-0.39925 -0.32993,0.53385 -2.25686,0.37294 -2.80642,-0.23436 -0.27856,-0.30774 -0.65658,-0.95453 -0.8401,-1.43731 -0.42448,-1.11632 -0.91809,-1.10316 -3.01531,0.0804 -0.93379,0.52702 -2.13107,0.9582 -2.66054,0.9582 -1.46554,0 -1.97734,-0.82307 -2.19476,-3.52955 -0.10515,-1.30865 -0.4137,-2.90864 -0.68575,-3.55553 -0.37975,-0.90312 -0.41736,-1.39768 -0.16196,-2.13038 0.35544,-1.01957 -0.24711,-3.50377 -1.40121,-5.77657 -0.48023,-0.94578 -0.50724,-1.33822 -0.19445,-2.82926 0.40575,-1.93441 -0.0409,-3.36568 -1.16059,-3.72114 -0.3255,-0.10331 -0.93466,-0.55279 -1.35374,-0.99885 -1.12569,-1.19829 -1.03821,-2.92553 0.22088,-4.35957 0.85079,-0.96896 1.01308,-1.45348 1.2082,-3.60666 l 0.22545,-2.48734 -1.16949,-1.19763 c -0.64324,-0.65869 -1.26203,-1.64897 -1.37517,-2.20061 -0.13388,-0.6528 -0.56813,-1.23242 -1.24372,-1.66009 l -1.03807,-0.65709 0,1.0782 c 0,0.59301 -0.21786,1.38922 -0.48413,1.76937 -0.68007,0.97099 -4.56312,2.96438 -5.77445,2.96438 -1.55729,0 -1.88611,-0.67097 -1.88611,-3.84837 0,-3.52819 0.41663,-4.13666 2.83284,-4.13666 1.49279,0 1.57631,-0.0396 1.09598,-0.51996 -0.4316,-0.43155 -0.69566,-0.4587 -1.55343,-0.15971 -0.56839,0.19815 -1.3354,0.35443 -1.70442,0.34729 -0.86278,-0.0167 -2.61563,-1.51607 -3.02205,-2.58498 -0.3513,-0.92403 -0.12267,-3.38466 0.34119,-3.67132 0.16474,-0.1018 -0.39367,-0.50661 -1.24085,-0.89959 -2.032471,-0.94281 -2.321421,-1.35146 -2.487701,-3.51839 -0.0772,-1.00533 -0.30119,-2.31552 -0.4979,-2.91152 -0.48076,-1.45668 -0.16499,-2.30832 0.90163,-2.43139 0.843711,-0.0974 0.860511,-0.14171 0.748911,-1.97594 -0.0696,-1.14269 0.0236,-1.96143 0.23793,-2.09396 0.47223,-0.29188 -2.501621,-3.97433 -3.330171,-4.12358 -0.34456,-0.062 -0.75956,-0.23921 -0.92229,-0.39365 -0.3459,-0.32835 -0.78945,-2.83658 -0.98794,-5.58637 -0.0769,-1.06517 -0.35848,-2.55647 -0.62576,-3.31402 -0.71739,-2.03331 -0.61465,-2.55112 0.76687,-3.86532 l 1.25273,-1.19173 -0.46915,-1.36178 c -0.53343,-1.54826 -0.33638,-2.99085 0.48923,-3.5815 0.65547,-0.46898 1.32731,-2.61652 1.52388,-4.87126 0.13191,-1.51252 0.2658,-1.7153 2.531131,-3.83281 2.21127,-2.06705 2.41106,-2.36144 2.64687,-3.89989 0.31881,-2.07979 0.74608,-2.60075 2.34208,-2.85597 0.69615,-0.11132 1.66359,-0.53718 2.14988,-0.94636 1.89204,-1.59201 4.16695,-1.77416 4.16695,-0.33363 0,0.40454 -0.23171,1.4157 -0.51499,2.24703 -0.28322,0.83134 -0.45486,1.57164 -0.38139,1.64512 0.0735,0.0735 1.32057,0.92807 2.77127,1.89909 2.57827,1.72574 2.68847,1.7655 4.89522,1.7655 1.74495,0 2.50706,-0.15424 3.35669,-0.67937 0.91121,-0.56315 1.2344,-0.61779 1.88934,-0.3194 0.43449,0.19798 1.19684,0.35997 1.69411,0.35997 1.03354,0 1.51204,0.45563 1.67033,1.59058 0.10938,0.78459 0.54215,1.02641 2.56344,1.43244 0.47079,0.0946 1.07249,0.38843 1.33713,0.65302 0.29826,0.29829 0.55659,0.35879 0.67998,0.15922 0.3007,-0.48659 2.51019,-0.38548 3.21433,0.1471 0.90129,0.6817 0.99638,0.6211 1.2201,-0.77786 0.1114,-0.69691 0.4878,-1.53284 0.83642,-1.85761 0.34861,-0.32477 0.76943,-1.29968 0.93532,-2.16645 0.36198,-1.89196 1.67658,-4.95214 2.37708,-5.53353 0.45941,-0.38127 0.45882,-0.50661 -0.007,-1.40586 -0.92929,-1.79695 -1.07762,-2.78281 -0.59325,-3.94207 0.32267,-0.77223 0.71393,-1.13742 1.3562,-1.26589 l 0.90282,-0.18055 -0.12723,-3.168 -0.1273,-3.168021 1.13626,0 c 0.6249,0 1.22425,0.14254 1.33189,0.31676 0.11034,0.17851 0.92013,-0.22348 1.85538,-0.92103 2.57554,-1.920815 3.6054,-2.317745 6.74013,-2.597735 2.80648,-0.25066 4.59942,-0.61535 8.65387,-1.76019 1.05398,-0.29761 2.49129,-0.66582 3.19396,-0.81822 2.5583,-0.55486 5.16562,-1.18239 7.665675,-1.84504 2.13376,-0.56557 2.7297,-0.87493 3.61346,-1.87587 1.968,-2.22882 6.60136,-8.28119 7.54474,-9.85529 0.55323,-0.92329 1.87182,-2.29956 3.218,-3.35904 2.58733,-2.03622 6.23997,-6.36804 7.37413,-8.74536 0.64823,-1.35877 0.73216,-1.8923 0.56253,-3.57654 -0.2316,-2.3005 -0.44696,-2.16353 3.91929,-2.49301 3.85817,-0.29115 6.65679,-1.49266 9.77494,-4.19656 2.99721,-2.5991 5.77546,-4.25711 7.14234,-4.26265 1.34414,-0.005 2.18866,0.95864 1.93792,2.21228 l -0.19117,0.956 1.02783,-0.62674 c 0.66237,-0.40384 1.60221,-0.62716 2.64269,-0.62793 1.73168,-10e-4 3.01752,-0.70122 4.31246,-2.34742 0.89476,-1.13744 0.70339,-1.77317 -0.78398,-2.60556 -0.68465,-0.38314 -1.52661,-1.0834 -1.87097,-1.55613 -0.54929,-0.75408 -0.57635,-0.97959 -0.22059,-1.83856 0.52649,-1.27114 3.93115,-4.11017 4.92904,-4.11017 0.41859,0 1.13672,0.14279 1.59566,0.3173 1.3868,0.52725 2.80354,-0.28364 3.6531,-2.09077 0.39579,-0.84216 1.25891,-2.18904 1.91795,-2.99304 1.48075,-1.80638 2.89866,-4.72745 2.89866,-5.97158 0,-0.75538 0.58238,-1.50827 3.06391,-3.96067 2.7523,-2.72002 6.3045,-6.98689 7.09162,-8.51845 0.1634,-0.318 0.3954,-1.22055 0.51562,-2.00566 0.25722,-1.68064 1.72382,-4.16066 2.46108,-4.16147 0.9766,-10e-4 2.12459,1.22566 2.31255,2.47132 0.0998,0.66067 0.27255,1.72385 0.384,2.36261 0.1155,0.66184 0.0472,1.45181 -0.15868,1.83656 -0.24595,0.45955 -0.25349,0.67517 -0.0229,0.67517 0.51299,0 2.24002,-2.8963 2.24002,-3.75665 0,-0.8354 0.53999,-2.02246 1.08581,-2.38694 0.19334,-0.12906 0.94292,-0.23686 1.66584,-0.23955 1.77381,-0.007 2.99753,0.95517 2.99753,2.35583 0,0.57021 0.21732,1.76868 0.48299,2.66324 l 0.48306,1.6265 0.92969,-0.92972 c 1.22287,-1.22287 2.47045,-1.24866 2.92225,-0.0604 0.22007,0.57891 0.22505,1.10057 0.0151,1.56166 -0.27458,0.60266 -0.20454,0.71514 0.53993,0.86809 1.18369,0.24315 3.55993,2.06175 3.91536,2.99648 0.59574,1.567 0.35077,3.19938 -0.65144,4.34081 -0.94122,1.07196 -0.94371,1.08593 -0.60505,3.28498 0.18712,1.21464 0.38753,2.25901 0.44545,2.32083 0.2451,0.26166 3.313,-0.9897 3.8317,-1.56289 1.62004,-1.79007 4.61934,0.34098 4.61934,3.28202 0,0.59127 -0.10771,1.21358 -0.23953,1.38292 -0.13176,0.16934 0.1309,-0.10749 0.58362,-0.61518 l 0.82309,-0.92308 2.45525,0.57882 c 3.13892,0.74002 4.67982,1.61224 5.4805,3.10222 0.49583,0.92281 0.83285,1.18897 1.50604,1.18964 0.49596,0.001 1.31643,0.39216 1.91637,0.91477 0.57707,0.50266 1.55223,1.17153 2.16717,1.48639 0.61481,0.31487 1.27608,0.78847 1.46955,1.05246 0.39952,0.54529 2.27154,0.59949 2.79024,0.0808 0.66827,-0.66817 2.3398,-0.37712 3.37202,0.58712 0.87138,0.81397 0.99174,1.13441 0.98984,2.63507 -0.007,3.14067 -1.18875,4.18009 -7.03587,6.17196 -3.71253,1.26471 -4.57971,1.44538 -6.93747,1.44538 -2.24861,0 -2.8547,-0.11412 -3.66279,-0.68954 -0.94626,-0.67382 -0.99252,-0.67652 -2.02854,-0.11858 -0.5831,0.31401 -1.383,0.91461 -1.77767,1.33464 l -0.71741,0.76372 1.56061,1.58439 c 1.40266,1.42413 1.61342,1.53657 2.08298,1.11159 0.76662,-0.69377 2.74012,-0.60035 3.50647,0.16598 0.78732,0.78729 0.81648,1.55502 0.0799,2.09925 -0.83901,0.61987 -0.0838,1.18313 1.57667,1.17578 1.61709,-0.007 2.17621,0.35138 2.17621,1.3954 0,0.59148 -0.17166,0.7594 -0.7769,0.7594 -0.48332,0 -0.84989,0.22977 -0.96998,0.60798 -0.26508,0.83534 -2.11417,1.6503 -4.4471,1.96007 -1.90366,0.25276 -5.24254,1.10817 -7.59191,1.94503 -1.09649,0.39058 -1.18265,0.52074 -1.37769,2.08163 -0.25454,2.03716 -0.67941,2.42422 -2.5359,2.31005 -0.79407,-0.0488 -1.53022,-0.002 -1.6359,0.10335 -0.10561,0.10567 0.32091,0.60142 0.94784,1.10167 0.62693,0.50027 1.13993,1.14348 1.13993,1.4294 0,0.28592 0.21555,0.69878 0.47906,0.91747 1.02219,0.84833 0.30092,2.43799 -1.55295,3.4227 -0.52676,0.27977 -0.48306,0.33828 0.3819,0.51126 1.25557,0.25111 1.75716,1.19504 1.48651,2.79737 -0.15363,0.90893 -0.36794,1.2537 -0.77945,1.2537 -1.42926,0 -3.3719,-2.70726 -2.60535,-3.63084 0.50081,-0.60337 -1.57909,-0.86467 -4.87669,-0.61268 -2.37814,0.18174 -2.45709,0.21144 -1.43732,0.54105 0.67928,0.21956 1.25642,0.70374 1.55806,1.30695 0.41505,0.8301 0.62988,0.94551 1.607,0.86325 0.85566,-0.072 1.30196,0.0903 1.84916,0.67285 0.87917,0.9358 1.26172,2.8927 0.69828,3.57163 -0.45639,0.54984 -2.57856,0.65234 -3.08199,0.14886 -0.23101,-0.23099 -0.45619,-0.1844 -0.73549,0.15214 -0.34547,0.41624 -0.19184,0.54147 1.0828,0.88237 2.06555,0.55246 2.84678,1.34484 2.63181,2.66945 -0.12598,0.77608 -0.0111,1.1894 0.4446,1.60189 0.33781,0.30575 0.61514,0.85703 0.61626,1.22506 0,0.40883 0.37665,0.8823 0.9648,1.21704 0.60282,0.34303 1.20761,1.11895 1.61742,2.075045 0.37403,0.87256 1.58191,2.485991 2.81788,3.764031 2.72839,2.82133 3.02053,3.36933 2.75178,5.16167 -0.1765,1.17708 -0.43169,1.57351 -1.52084,2.36249 -0.71977,0.52142 -1.65712,1.46074 -2.08292,2.08735 -0.66074,0.97241 -0.72193,1.26543 -0.41747,2.00042 0.19615,0.47362 1.00666,1.25369 1.80099,1.7335 0.79426,0.47981 1.6716,1.26687 1.94966,1.74904 0.56868,0.98649 2.52869,2.54597 4.42534,3.52103 0.69619,0.35796 1.69715,1.10835 2.22417,1.66754 0.52702,0.55918 1.52124,1.30625 2.2095,1.66012 1.53401,0.78869 4.33814,2.85596 4.33814,3.19814 0,0.64314 2.36392,2.78408 3.29157,2.98114 3.11842,0.66236 2.71293,3.44603 -0.88801,6.09705 l -1.28558,0.94651 -5.32705,-0.0434 c -4.41945,-0.036 -5.46766,-0.13568 -6.15336,-0.58491 -1.12014,-0.734 -3.69123,-1.21344 -3.69123,-0.68833 0,0.88679 -1.22942,1.53613 -2.56839,1.35654 -1.12847,-0.15136 -1.45376,-0.0446 -2.40271,0.78858 -0.60361,0.52999 -1.09747,1.11694 -1.09747,1.30432 0,0.61061 -2.01766,4.84486 -2.64971,5.56065 -0.83547,0.94619 -1.93367,5.6836 -1.50374,6.48688 0.50015,0.93456 0.37973,2.29694 -0.31815,3.59909 -0.77894,1.45317 -0.79106,1.89641 -0.10398,3.81328 0.46,1.28334 0.67568,1.5151 1.48658,1.597 1.48403,0.14992 1.74197,0.90287 0.92798,2.70938 -0.38137,0.84625 -0.78522,2.35688 -0.89764,3.35694 -0.11931,1.06047 -0.42298,2.01508 -0.72888,2.29042 -0.68334,0.61527 -3.70237,1.79849 -4.6086,1.8063 -0.72042,0.007 -3.41815,2.85544 -5.35745,5.65834 -1.05175,1.52015 -2.85327,2.4565 -4.21281,2.18961 -0.75535,-0.14829 -0.87832,-0.0687 -0.87832,0.56857 0,0.91256 -0.75207,1.60008 -2.29008,2.09359 -1.4381,0.46144 -1.7214,0.80341 -1.96204,2.3682 -0.23809,1.54838 -0.68406,2.08325 -2.35507,2.82408 l -1.33701,0.5928 0.77815,0.77808 c 0.69428,0.6944 0.77808,1.05197 0.77808,3.32499 0,1.85231 -0.13241,2.67923 -0.48529,3.03212 -0.43398,0.43402 -0.35818,0.52049 0.71872,0.81954 0.66212,0.18388 1.51875,0.33512 1.9036,0.3361 0.38485,0.001 0.78136,0.13367 0.88094,0.29487 0.25866,0.41856 -0.38281,4.69924 -0.97325,6.49419 l -0.49911,1.51716 -1.65116,-0.001 -1.65116,-10e-4 0.0983,3.6244 0.0984,3.6244 -1.14753,1.00754 c -0.63119,0.55415 -1.34035,1.00754 -1.57601,1.00754 -0.28893,0 -0.47605,0.57495 -0.57491,1.76696 -0.11787,1.42104 -0.33794,1.96816 -1.1244,2.79476 -1.13233,1.19012 -2.96046,4.69205 -2.96046,5.671 0,1.11194 -0.56115,1.80916 -1.6279,2.02253 -0.55663,0.11131 -1.67566,0.67436 -2.48682,1.25124 -1.22006,0.86773 -6.20079,3.10238 -6.91473,3.10238 -0.11119,0 -1.23238,0.43908 -2.49148,0.97576 -1.25917,0.53667 -2.86172,1.21939 -3.56125,1.51716 -0.69952,0.29776 -3.03704,1.4397 -5.19451,2.53764 -2.15747,1.09794 -4.25494,1.99626 -4.66121,1.99626 -0.4062,0 -1.06176,-0.34404 -1.4569,-0.76453 z", fill: "blue" }); @@ -779,12 +779,12 @@ suite('Path', function() { // ====================================================== test('Stroke only when no fill', function() { - // https://github.com/ericdrowell/KineticJS/issues/567 + // https://github.com/ericdrowell/KonvaJS/issues/567 var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var path = new Kinetic.Path({ + var path = new Konva.Path({ data: "M 50 0 C 50 150 170 170 200 170", stroke: 'black' }); diff --git a/test/unit/plugins/RegularPolygon-test.js b/test/unit/plugins/RegularPolygon-test.js index 46cb9003..14d58a0b 100644 --- a/test/unit/plugins/RegularPolygon-test.js +++ b/test/unit/plugins/RegularPolygon-test.js @@ -3,9 +3,9 @@ suite('RegularPolygon', function() { test('add regular polygon triangle', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var poly = new Kinetic.RegularPolygon({ + var poly = new Konva.RegularPolygon({ x: 200, y: 100, sides: 3, @@ -30,9 +30,9 @@ suite('RegularPolygon', function() { // ====================================================== test('add regular polygon square', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var poly = new Kinetic.RegularPolygon({ + var poly = new Konva.RegularPolygon({ x: 200, y: 100, sides: 4, @@ -50,9 +50,9 @@ suite('RegularPolygon', function() { // ====================================================== test('add regular polygon pentagon', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var poly = new Kinetic.RegularPolygon({ + var poly = new Konva.RegularPolygon({ x: 200, y: 100, sides: 5, @@ -70,9 +70,9 @@ suite('RegularPolygon', function() { // ====================================================== test('add regular polygon octogon', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var poly = new Kinetic.RegularPolygon({ + var poly = new Konva.RegularPolygon({ x: 200, y: 100, sides: 8, diff --git a/test/unit/plugins/Star-test.js b/test/unit/plugins/Star-test.js index 3f5fe4e5..3009f3db 100644 --- a/test/unit/plugins/Star-test.js +++ b/test/unit/plugins/Star-test.js @@ -3,9 +3,9 @@ suite('Star', function() { test('add five point star', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var star = new Kinetic.Star({ + var star = new Konva.Star({ x: 200, y: 100, numPoints: 5, @@ -34,9 +34,9 @@ suite('Star', function() { // ====================================================== test('add star with line join and shadow', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var rect = new Kinetic.Rect({ + var rect = new Konva.Rect({ x: 250, y: 75, width: 100, @@ -44,7 +44,7 @@ suite('Star', function() { fill: 'red' }); - var star = new Kinetic.Star({ + var star = new Konva.Star({ x: 200, y: 100, numPoints: 5, diff --git a/test/unit/plugins/TextPath-test.js b/test/unit/plugins/TextPath-test.js index 3983a8f5..5048643e 100644 --- a/test/unit/plugins/TextPath-test.js +++ b/test/unit/plugins/TextPath-test.js @@ -3,11 +3,11 @@ suite('TextPath', function() { // ====================================================== test('Render Text Along Line', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); var c = "M 10,10 300,150"; - var path = new Kinetic.Path({ + var path = new Konva.Path({ stroke: 'red', strokeWidth: 1, data: c @@ -15,7 +15,7 @@ suite('TextPath', function() { layer.add(path); - var textpath = new Kinetic.TextPath({ + var textpath = new Konva.TextPath({ fill: 'orange', fontSize: '24', fontFamily: 'Arial', @@ -39,10 +39,10 @@ suite('TextPath', function() { // ====================================================== test('Find Next Segment when Arc is in Path', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); var c = "M 50 50 a 150 50 0 0 1 250 50 l 50 0"; - var path = new Kinetic.Path({ + var path = new Konva.Path({ stroke: 'red', strokeWidth: 1, data: c @@ -50,7 +50,7 @@ suite('TextPath', function() { layer.add(path); - var textpath = new Kinetic.TextPath({ + var textpath = new Konva.TextPath({ fill: 'black', fontSize: '10', text: 'All the world\'s a stage, and all the men and women merely players. They have their exits and their entrances; And one man in his time plays many parts.', @@ -64,12 +64,12 @@ suite('TextPath', function() { // ====================================================== test('Render Text Along Vertical Line', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); // Top Down var c = "M 50,10 50,150"; - var path = new Kinetic.Path({ + var path = new Konva.Path({ stroke: 'red', strokeWidth: 1, data: c @@ -77,7 +77,7 @@ suite('TextPath', function() { layer.add(path); - var textpath = new Kinetic.TextPath({ + var textpath = new Konva.TextPath({ stroke: 'black', strokeWidth: 1, fill: 'orange', @@ -93,7 +93,7 @@ suite('TextPath', function() { // Bottom up c = "M 150,150 150,10"; - path = new Kinetic.Path({ + path = new Konva.Path({ stroke: 'red', strokeWidth: 1, data: c @@ -101,7 +101,7 @@ suite('TextPath', function() { layer.add(path); - textpath = new Kinetic.TextPath({ + textpath = new Konva.TextPath({ stroke: 'black', strokeWidth: 1, fill: 'orange', @@ -119,10 +119,10 @@ suite('TextPath', function() { // ====================================================== test('Render Text Along two connected Bezier', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); var c = "M10,10 C0,0 10,150 100,100 S300,150 400,50"; - var path = new Kinetic.Path({ + var path = new Konva.Path({ stroke: 'red', strokeWidth: 1, data: c @@ -130,7 +130,7 @@ suite('TextPath', function() { layer.add(path); - var textpath = new Kinetic.TextPath({ + var textpath = new Konva.TextPath({ stroke: 'black', strokeWidth: 1, fill: 'orange', @@ -148,10 +148,10 @@ suite('TextPath', function() { // ====================================================== test('Render Text Along Elliptical Arc', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); var c = "M 250,100 A 100 50 30 1 0 150 150"; - var path = new Kinetic.Path({ + var path = new Konva.Path({ stroke: 'red', strokeWidth: 1, data: c @@ -159,7 +159,7 @@ suite('TextPath', function() { layer.add(path); - var textpath = new Kinetic.TextPath({ + var textpath = new Konva.TextPath({ fill: 'black', fontSize: '10', text: 'All the world\'s a stage, and all the men and women merely players. They have their exits and their entrances; And one man in his time plays many parts.', @@ -173,11 +173,11 @@ suite('TextPath', function() { // ====================================================== test('Render Text Along complex path', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); var c = 'M 955.92249,-42.126952 L 955.92249,-42.126952 L 955.92249,-42.126952 L 961.93262,212.9279 C 961.72797,213.3372 961.22315,215.2234 960.80572,215.5574 C 957.45077,218.2413 956.9054,218.3026 953.66869,216.6843 C 952.62164,216.1607 951.67338,214.3658 949.91236,214.8061 C 947.3405,215.4491 948.09281,215.8744 946.53166,217.4355 C 945.22315,218.744 943.52659,219.8744 943.52659,222.3188 C 943.52659,225.6087 944.62943,224.7909 946.15603,226.8264 C 947.55965,228.6979 948.18154,229.6696 948.78546,232.0852 C 949.37174,234.4304 951.2918,235.2197 952.16616,236.9685 C 953.11809,238.8723 956.44837,240.9001 955.17122,242.6029 C 955.17122,242.8772 955.27602,243.9657 955.17122,244.1055 C 954.37248,245.1705 952.25782,247.1195 951.79052,248.9887 C 951.25154,251.1447 951.97226,252.3937 951.41489,254.6232 C 950.9178,256.6116 949.53672,257.6472 949.53672,259.8821 C 949.53672,261.2894 949.87203,263.5578 950.66362,265.1409 C 951.32462,266.4629 953.24159,268.3158 953.66869,270.0242 C 954.03114,271.474 954.12634,273.8281 953.66869,275.6587 C 953.20033,277.5321 952.16616,278.7427 952.16616,280.9175 C 952.16616,281.7694 952.66216,286.9313 952.16616,287.3033 C 950.55129,287.3033 950.38215,287.5144 949.16109,288.4302 C 947.74898,289.4893 945.57047,291.4095 944.65349,292.9378 C 943.57061,294.7426 942.86906,296.6011 942.3997,298.9479 C 941.97063,301.0933 941.32659,303.0261 940.1459,304.2068 C 938.60102,305.7517 939.019,307.4128 939.019,309.8413 C 939.019,311.6467 939.44296,314.3005 938.26773,315.4758 C 937.15545,316.5881 934.88703,318.5361 934.88703,320.7346 C 934.88703,322.7058 934.79432,324.8714 935.26267,326.7448 C 935.72373,328.589 935.6383,330.6902 935.6383,332.7549 C 935.6383,334.5937 936.08895,337.1125 935.26267,338.765 C 933.38787,342.5146 935.26267,342.5858 935.26267,345.5264 C 935.61053,346.9179 935.6383,348.2383 935.6383,350.034 C 935.6383,351.5752 934.96036,354.5783 932.63323,353.4147 C 932.09123,353.1437 928.92886,348.8032 927.75,351.1609 C 926.64231,353.3763 926.87972,354.3829 928.12564,356.0442 C 929.10471,357.3496 930.01787,360.3569 928.12564,361.303 C 926.67006,362.0308 924.24963,362.5828 924.74494,365.0593 C 925.21304,367.3998 926.19847,367.8684 926.6231,369.567 C 926.7781,370.1869 927.80544,374.5783 926.24747,375.2014 C 924.2456,376.0022 920.63857,376.64 919.86171,378.5821 C 918.7844,381.2754 918.89909,381.8572 921.36424,383.0897 C 922.93947,383.8774 923.65296,384.6272 925.12057,386.0948 C 925.4026,386.3768 928.41848,391.3951 926.99874,392.1049 C 926.6231,392.2301 926.22599,392.3035 925.87184,392.4806 C 924.02717,393.4029 922.07311,394.7556 920.61297,395.4856 C 918.19436,396.6949 919.66034,398.0609 920.23734,400.3689 C 920.66358,402.0738 920.9143,404.1809 919.48607,405.2521 C 918.27148,406.163 916.40598,407.9567 914.60284,407.5059 C 912.7458,407.0416 911.06841,406.8699 909.71961,407.8815 C 908.08698,409.106 906.39997,410.6424 905.96328,412.3891 C 905.46424,414.3853 903.5041,416.8116 901.83132,417.648 C 900.14443,418.4914 897.73682,419.2163 895.82119,420.6531 C 894.39644,421.7216 891.99114,423.3808 890.93796,424.785 C 889.59804,426.5716 888.40557,428.0687 886.80599,429.6682 C 885.18365,431.2906 883.35936,432.8052 882.29839,434.9271 C 881.56876,436.3864 879.95545,436.9836 879.29333,438.3078 C 878.57656,439.7413 877.73542,441.3406 876.28826,442.0641 C 874.75553,442.8305 873.35007,443.456 871.40503,443.9423 C 867.75936,444.8537 869.30342,446.1864 868.7756,448.8255 C 868.7756,449.4008 868.88599,450.1518 868.7756,450.7037 C 868.4147,452.5082 867.97176,454.46 866.14617,454.46 C 863.87643,454.46 863.13519,452.5202 860.51167,452.9575 C 858.30041,453.326 855.7288,453.4708 853.75028,454.46 C 851.66578,455.5023 850.88183,456.6114 849.24268,457.8407 C 848.34172,458.5165 844.59521,461.2214 842.85692,461.2214 C 841.06194,461.2214 838.75283,461.625 837.59805,460.4702 C 836.02546,458.8976 834.59299,457.0331 834.59299,454.8357 C 834.59299,452.5753 834.44046,450.9268 833.09045,449.5768 C 831.22582,447.7122 830.88608,448.6344 829.33412,450.7037 C 827.57516,453.049 826.50225,455.876 824.07526,457.0895 C 820.97109,458.6416 819.33963,458.3772 818.44076,461.9727 C 817.87317,464.2431 816.93823,466.7246 816.93823,469.1097 C 816.93823,470.8675 817.70296,474.7173 816.93823,476.2468 C 816.14706,477.8291 812.41394,478.9791 810.9281,476.998 C 808.83845,474.2118 810.41749,473.2417 805.66924,473.2417 C 801.6473,473.2417 799.28347,473.0146 799.28347,477.3737 C 799.28347,479.1155 799.58784,484.5107 796.65404,484.5107 C 796.27841,484.5107 795.90277,484.5107 795.52714,484.5107 C 793.06311,484.5107 790.57051,484.2819 789.51701,486.3889 C 789.24153,486.9398 789.17021,490.492 788.39011,491.2721 C 785.76325,493.8989 789.66759,493.7526 790.26828,496.1553 C 790.57092,497.3659 791.29959,501.1341 790.26828,502.1654 C 788.37505,504.0587 788.1443,505.2726 787.63885,507.7999 C 787.12622,510.3631 787.28641,510.4294 784.25815,510.4294 C 779.52049,510.4294 778.62062,512.1783 781.25308,515.6882 C 782.04773,516.7478 784.15693,519.0183 785.76068,519.8202 C 787.2339,520.5568 788.2453,521.5264 787.63885,523.9522 C 787.29534,525.3262 785.38505,526.8783 785.38505,528.8354 C 785.38505,532.3304 785.96541,532.0452 787.63885,533.7186 C 789.35939,535.4392 791.26358,536.4988 790.64391,538.9775 C 790.07532,541.2518 787.846,540.5966 785.38505,540.1044 C 784.8577,539.9989 777.87238,538.1167 777.87238,538.2262 C 777.87238,538.3043 777.87238,541.4667 777.87238,543.1095 C 777.87238,545.7389 776.11001,547.6978 773.74042,549.1196 C 769.72179,551.5308 769.56137,548.92 765.85212,547.9927 C 764.43987,547.6396 762.84706,547.0925 762.84706,544.9876 C 762.84706,542.5025 764.72522,540.5566 764.72522,538.9775 C 764.72522,537.481 764.49962,535.4457 763.97396,533.343 C 763.53464,531.5857 763.96677,529.2128 760.96889,529.9623 C 759.74476,530.2683 755.76059,530.9158 755.3344,529.211 C 754.79258,527.0438 753.83472,525.0819 752.32933,523.5765 C 751.7239,522.9711 748.78535,518.481 747.07047,520.1958 C 745.42956,521.8367 745.1923,522.8794 745.1923,525.4547 C 745.1923,529.5231 743.80555,527.5927 741.43597,529.9623 C 739.21241,532.1859 738.84328,532.0691 738.05527,535.2212 C 737.62578,536.9391 737.33255,538.9489 736.17711,540.1044 C 735.37222,540.9093 731.5352,542.6268 730.91824,543.8607 C 729.89113,545.9149 730.31425,546.7847 731.29388,548.744 C 731.93347,550.0231 732.94949,551.8879 732.42078,554.0028 C 731.86797,556.214 729.92914,558.5699 727.16191,559.2617 C 726.16187,559.7617 724.82639,560.5029 723.78121,560.7642 C 721.91594,561.2305 719.64925,561.351 719.64925,564.1449 C 719.64925,566.832 719.04019,568.7236 721.15178,569.7794 C 722.21289,570.31 724.72561,571.2926 725.28375,572.4088 C 726.18968,574.2207 726.03501,576.214 726.03501,578.419 C 726.03501,580.9518 724.90811,582.9761 724.90811,585.1804 C 724.90811,587.587 724.17206,589.3326 725.28375,590.8149 C 726.38582,592.2843 727.68532,592.9085 728.28881,595.3225 C 728.47077,596.0503 729.29883,599.6882 728.66444,600.957 C 728.20299,601.8799 726.62388,604.7133 724.90811,604.7133 C 722.23081,604.7133 719.55156,603.2108 717.77108,603.2108 C 712.9722,603.2108 711.01958,602.0443 709.88279,606.5915 C 709.52114,608.038 708.85871,610.3121 708.38026,612.2259 C 707.78279,614.6158 706.87772,616.6877 706.87772,619.363 C 706.87772,621.8398 706.7087,624.1711 706.12646,626.5 C 705.78303,627.8737 704.58011,630.6495 702.74576,631.3832 C 700.14612,632.4231 699.90837,632.6269 696.73563,633.2614 C 695.19072,633.5704 692.38471,634.0127 690.34987,634.0127 C 687.92024,634.0127 684.24023,633.3112 682.08594,634.3883 C 680.51621,635.1732 677.63742,637.5327 677.20271,639.2715 C 676.32889,642.7668 669.65019,641.1298 666.68498,639.6472 C 665.51347,639.0614 662.57658,637.112 662.17738,635.5152 C 661.57521,633.1065 663.16351,629.2235 662.17738,627.2513 C 661.26634,625.4292 659.87344,623.4448 658.42105,621.9924 C 657.38134,620.9527 655.38855,620.0777 654.28908,618.6117 C 653.089,617.0116 651.62053,616.0553 650.15712,614.1041 C 648.34003,611.6813 647.12666,612.2259 643.77136,612.2259 C 639.94754,612.2259 634.27092,612.8011 630.99983,610.3478 C 628.83169,608.7217 627.09631,607.7996 625.74097,605.0889 C 624.63961,602.8862 624.51407,601.3082 623.8628,598.7032 C 623.8628,597.1031 624.2465,594.9791 623.8628,593.4443 C 623.39918,591.5898 621.23337,589.3243 621.23337,587.4342 C 621.23337,587.1837 621.29411,586.9258 621.23337,586.6829 C 620.53685,583.8968 622.36027,582.4393 622.36027,580.6728 C 622.36027,578.1478 621.87342,577.1809 620.10647,575.4139 C 619.11396,574.4214 614.71345,572.543 612.96944,574.287 C 611.60526,575.6512 609.17921,577.309 606.95931,578.419 C 604.01326,579.892 598.66588,576.9755 597.19285,579.9215 C 596.40756,581.4921 595.76926,583.6587 595.31468,585.9316 C 594.88705,588.0698 594.09657,589.556 591.55835,590.0636 C 590.26591,590.3221 585.80562,591.0513 585.17259,592.3174 C 584.45323,593.7561 582.33804,595.3917 581.79189,597.5763 C 581.21425,599.8868 580.53762,600.7708 578.78683,602.0839 C 576.60544,603.7199 574.24457,604.0233 571.27416,602.8351 C 569.56134,602.15 566.96195,601.3583 564.51277,601.7082 C 562.15094,602.0456 560.7219,604.7047 559.2539,604.3377 C 556.608,603.6762 556.41629,603.5592 554.74631,601.3326 C 553.7801,600.0443 552.83677,595.5353 551.36561,594.9468 C 549.22437,594.0903 546.63624,594.001 543.85294,593.4443 C 541.39906,592.9535 538.87331,593.0687 536.34028,593.0687 C 532.49916,593.0687 532.93906,592.2969 530.70579,590.0636 C 529.57858,588.9364 527.94151,588.118 525.82255,587.0585 C 523.85495,586.0747 523.02163,585.6928 520.56369,586.3073 C 518.15725,586.9089 517.4765,588.4877 515.68046,588.9367 C 514.53264,589.2237 511.38458,588.643 510.04596,589.3123 C 508.49749,590.0866 507.19267,590.5834 506.66527,592.693 C 506.20828,594.521 505.99947,595.9598 504.7871,597.5763 C 503.10137,599.8239 501.43481,599.4686 499.1526,598.3275 C 496.74377,597.1231 496.63249,597.7484 493.89374,597.2006 C 491.45635,596.7131 490.45647,596.313 488.63487,594.9468 C 486.20245,593.1225 485.84728,591.7342 484.87854,589.3123 C 484.34805,587.9861 483.82138,584.0535 482.24911,584.0535 C 479.1858,584.0535 478.32694,584.2633 476.23898,582.1753 C 475.01433,580.9507 474.104,579.7043 472.85828,578.0433 C 471.87387,576.7308 471.15841,575.0383 468.72632,575.0383 C 465.62648,575.0383 465.0931,574.4101 463.09182,572.4088 C 461.80618,571.1232 459.77548,570.155 457.45733,570.155 C 454.22738,570.155 453.13567,570.2034 450.69593,572.0332 C 449.01793,573.2917 445.74427,574.287 443.5589,574.287 C 441.14907,574.287 438.88122,574.5776 436.7975,573.5357 C 435.27776,572.7759 434.01441,571.5961 432.28991,570.9063 C 429.9965,569.989 427.79078,568.6525 425.15288,568.6525 C 423.40022,568.6525 419.8328,569.7488 418.39148,569.0281 C 418.14106,568.9029 417.89064,568.7777 417.64021,568.6525 C 415.49479,567.5798 416.55622,567.2358 415.38641,564.8962 C 414.77237,563.6681 414.63515,562.1788 414.63515,560.0129 C 414.63515,558.3145 415.04465,556.0165 414.63515,554.3784 C 414.06491,552.0975 414.24886,549.8602 412.38135,547.9927 C 411.40995,547.0213 409.24156,545.0938 408.62502,543.8607 C 408.07318,542.757 407.08617,540.8193 405.99559,539.7288 C 404.23882,537.972 404.86869,537.4962 404.86869,535.2212 C 404.86869,532.3223 402.92378,530.8222 402.23926,528.0841 C 402.03511,527.2676 400.20775,523.9522 399.23419,523.9522 C 397.40724,523.9522 395.17436,524.3278 393.59969,524.3278 C 392.1471,524.3278 388.62445,524.895 387.9652,523.5765 C 387.16017,521.9665 386.46266,520.8647 386.46266,518.3177 C 386.46266,517.2392 387.06995,513.4929 386.46266,512.6832 C 385.44124,511.3213 383.94518,508.9268 382.3307,508.9268 C 380.0442,508.9268 378.68472,509.6505 377.07184,510.0537 C 374.43842,510.7121 375.12089,510.9506 374.06677,513.0588 C 372.99551,515.2013 371.43568,515.6866 369.55917,513.8101 C 367.11608,511.367 367.54854,511.9833 366.17847,513.8101 C 364.4331,516.1372 362.02692,517.942 359.04145,517.942 C 356.27733,517.942 354.79253,517.3325 353.78258,515.3126 C 352.71976,513.187 352.20547,512.3075 349.65062,512.3075 C 347.43943,512.3075 345.67638,511.8115 345.14302,509.6781 C 344.69437,507.8835 343.8574,505.0515 342.51359,504.0436 C 341.49931,503.2829 339.32282,500.99 337.25472,502.5411 C 336.12724,503.3867 330.59067,511.5766 329.49596,511.5766 L 339.92116,9.4291543 L 531.3294,9.5579943 C 531.53498,9.8775343 531.74056,10.197084 531.94614,10.516624 C 532.70213,11.691684 530.89998,12.894794 530.62953,14.247024 C 530.42067,15.291354 532.94855,14.371684 533.70163,15.124764 C 533.96143,15.384574 533.06188,17.795104 533.26276,18.196854 C 533.6241,18.919554 537.09651,16.118584 537.43203,15.783074 C 538.52925,14.685844 541.26067,15.533334 542.2596,15.783074 C 544.36225,16.308734 544.53484,13.969904 545.77057,16.441374 C 546.72008,18.340404 548.8757,18.577754 550.81758,18.855164 C 551.5334,18.957424 552.36959,15.108804 552.7925,14.685894 C 553.70371,13.774684 554.04733,13.026284 554.76742,14.466454 C 555.55609,16.043794 556.96728,16.885754 558.27838,18.196854 C 559.14892,19.067394 560.36843,19.874104 561.35048,20.610644 C 562.42985,21.420174 563.12715,21.998014 564.20314,22.805004 C 565.9662,24.127294 567.78898,25.511804 570.12789,26.096534 C 572.7652,26.755854 576.55367,27.553934 578.90531,28.729754 C 580.9132,29.733704 583.43718,29.459644 585.48837,30.485234 C 586.49144,30.986774 588.94826,31.133324 590.09651,31.362974 C 591.42028,32.024864 591.77294,34.338314 592.07143,35.532254 C 592.3559,36.670124 593.11993,38.320014 593.82691,39.262654 C 594.69143,40.415344 596.17315,41.423224 597.11844,41.895874 C 598.26675,42.470034 600.11464,43.649294 601.28771,44.529104 C 602.4452,45.397214 603.546,45.151114 603.04319,47.162324 C 602.73764,48.384554 601.38101,48.605074 600.62941,49.356674 C 599.50817,50.477904 599.93932,51.519254 600.84884,52.428774 C 601.81016,53.390084 603.26382,53.305314 604.14037,52.428774 C 604.62824,51.940894 608.18038,52.428774 608.96795,52.428774 C 611.1468,52.428774 610.66216,51.127474 612.47891,50.673284 C 612.63759,50.633624 612.77149,50.526994 612.91778,50.453854 C 614.68717,49.569154 616.9206,51.445064 617.9648,49.356674 C 618.52936,48.227544 619.56541,48.220674 619.93972,46.723454 C 620.25133,45.477014 620.37729,44.531694 621.03689,43.212484 C 621.76915,41.747964 621.9135,40.434484 622.79237,39.262654 C 623.77356,37.954414 624.27391,36.972204 625.64503,36.629424 C 627.98413,36.044654 628.95445,36.884634 629.81431,38.604344 C 630.5868,40.149334 629.04661,41.566394 628.05882,42.554184 C 627.03053,43.582464 626.94563,46.049134 627.83939,46.942884 C 628.71859,47.822094 631.7203,46.960114 632.66697,46.723454 C 635.14429,46.104124 638.40825,46.723454 641.00551,46.723454 C 642.99376,46.723454 643.25279,47.744904 644.29704,49.137244 C 645.27121,50.436134 645.05681,51.584644 643.63873,52.648204 C 642.199,53.728004 640.62809,54.372964 639.25003,55.061994 C 637.13418,56.119914 635.43133,55.127564 633.54471,54.184254 C 631.95211,53.387954 630.44161,53.389994 628.71713,53.964814 C 626.84122,54.590124 627.42091,55.720304 625.20616,55.720304 C 623.21044,55.720304 622.67528,55.410144 621.25633,54.842564 C 619.91862,54.307474 619.00883,54.278974 617.9648,55.061994 C 617.10854,55.704184 616.39298,55.720304 614.8927,55.720304 C 613.05499,55.720304 612.78965,55.409564 611.82061,56.378604 C 611.11873,57.080484 611.94664,57.914654 609.40682,57.914654 C 607.90864,57.914654 607.56008,59.135134 606.55416,59.889574 C 605.2063,60.900474 602.08634,60.328444 600.40997,60.328444 C 598.82692,60.328444 597.23216,60.282954 596.02126,60.767314 C 592.93299,62.002624 597.05347,63.219724 597.77675,63.400534 C 599.71594,63.885334 600.39327,64.211484 600.84884,66.033764 C 601.33813,67.990904 602.14535,68.474354 603.48206,66.692064 C 604.91144,64.786234 602.91352,64.497714 606.77359,64.497714 C 607.59464,64.497714 608.63043,67.232284 608.96795,67.569814 C 610.45793,69.059794 611.16665,70.095494 613.13722,71.080774 C 614.46498,71.744654 616.30615,67.595574 616.64819,66.911504 C 617.28296,65.641964 617.99069,64.704204 619.28141,64.058844 C 621.30547,63.046814 622.75619,64.278284 624.76729,64.278284 C 626.50942,64.278284 627.61995,65.003454 627.61995,62.742234 C 627.61995,61.212584 627.63406,61.199134 628.93656,60.547884 C 628.93656,59.039954 631.8995,61.398604 633.10584,62.303364 C 634.22905,63.145774 635.25806,64.560214 636.6168,65.375454 C 638.02819,66.222284 639.45789,65.179164 639.90833,64.278284 C 640.50672,63.081494 642.69629,63.368184 643.63873,63.839414 C 644.9694,64.504744 646.71554,64.500074 648.02744,65.156024 C 649.65658,65.970594 651.25018,66.091894 652.63558,67.130944 C 654.5709,68.582434 655.72441,69.284754 658.12146,69.764164 C 660.76933,70.293734 662.17378,70.473704 664.26565,71.519644 C 666.22906,72.501344 668.08427,73.121854 669.75154,74.372304 C 670.99777,75.306984 673.61008,75.688914 675.23742,75.688914 C 678.09495,75.688914 679.5978,74.715624 682.03992,73.494564 C 683.61178,72.708634 685.09563,72.194334 686.20919,71.080774 C 687.25214,70.037824 688.09533,68.975204 689.28128,67.789244 C 690.81968,66.250844 691.90496,66.472634 694.10886,66.472634 C 695.98476,66.472634 697.61589,67.130944 699.37531,67.130944 C 700.88236,67.130944 702.30921,68.008684 703.98345,68.008684 C 705.78815,68.008684 706.82154,67.443974 708.15272,66.911504 C 709.49084,66.376254 710.32631,65.391024 711.22482,64.717154 C 712.93357,63.435584 713.93405,62.155634 715.83296,61.206184 C 717.44839,60.398474 719.60451,59.255264 721.09941,58.134094 C 722.32027,57.218444 724.55866,55.842944 725.92699,55.500864 C 727.42616,55.126074 729.09302,54.102794 730.53513,53.525944 C 732.4374,52.765044 734.47148,52.545224 736.02101,51.770464 C 736.81463,51.373654 738.38579,51.112164 739.31254,51.112164 C 739.58229,50.977294 739.8977,50.965874 740.19028,50.892724 C 741.93619,50.456234 744.97275,50.145724 746.55391,51.331594 C 747.77567,52.247914 749.08929,52.550364 750.06487,53.525944 C 751.05366,54.514734 751.10636,54.963084 752.6981,55.281434 C 753.97746,55.537304 755.20688,54.403694 756.64793,54.403694 C 757.60799,54.403694 759.65763,56.143574 760.59777,56.378604 C 762.10547,56.755534 763.41059,56.817474 764.98648,56.817474 C 766.46659,56.817474 768.85254,54.943624 770.47236,54.403694 C 772.25575,53.809224 773.23113,53.525944 775.29994,53.525944 C 777.348,53.525944 779.39606,53.525944 781.44413,53.525944 C 783.12504,53.525944 784.01926,53.375894 785.17453,53.087074 C 786.13177,52.847764 786.81429,52.867644 787.80775,52.867644 C 789.68721,52.397784 790.54366,51.799654 792.41589,51.331594 C 793.72507,51.004304 794.52824,48.862394 795.04912,47.820634 C 795.74654,46.425784 796.31421,45.768114 797.24347,44.529104 C 798.0814,43.411864 799.90954,42.318324 801.19331,41.676444 C 802.47959,41.033304 803.007,40.301614 804.04597,39.262654 C 804.9791,38.329524 805.42163,37.448114 806.24032,36.629424 C 807.32555,35.544194 808.33509,33.723304 809.09298,32.460154 C 809.72369,31.408974 811.13754,30.635024 812.16508,29.607494 C 812.75994,29.012634 816.59236,28.500674 817.43152,28.290884 C 818.9728,27.905564 820.03772,26.864014 820.94249,25.657664 C 821.81326,24.496634 822.20664,23.673144 822.47854,22.585564 C 822.70979,21.660554 823.16846,20.484194 823.35628,19.732904 C 823.39176,19.590984 823.35628,19.440324 823.35628,19.294034 C 824.72829,14.181234 833.5556,11.720324 838.16552,9.4153643 C 840.3455,8.3253643 841.62867,5.2222343 843.25846,3.0491743 C 844.34873,1.5954943 847.99376,1.4409443 850.04906,0.92711429 C 853.15105,0.15161429 855.95039,-0.84630571 858.11289,-2.4681757 C 860.2827,-4.0955457 863.83523,-5.3512957 866.17672,-6.2878857 C 868.93603,-7.3916157 871.61677,-9.3068957 873.81614,-10.956426 C 875.97519,-12.575706 878.16034,-13.552932 880.60673,-14.776132 C 882.92916,-15.937342 883.77331,-17.477632 886.5485,-18.171422 C 890.51751,-19.163682 894.57232,-17.476362 898.43204,-19.020252 C 901.2465,-20.146032 904.60721,-21.731172 907.3447,-22.415552 C 909.30842,-22.906482 911.47245,-25.328252 913.28647,-26.235262 C 916.00359,-27.593822 917.08159,-29.412202 919.65265,-30.054972 C 921.32298,-30.472552 924.26602,-31.730552 926.44325,-32.601442 C 928.89479,-33.582062 931.86421,-33.402072 933.65826,-34.299092 C 936.16619,-35.553052 937.08458,-36.322802 939.17561,-36.845562 C 941.67817,-37.471202 944.13749,-38.007702 946.81503,-38.543212 C 948.94134,-38.968472 950.98649,-40.592612 952.33239,-41.938512 C 953.1616,-42.767712 955.07166,-42.233042 955.92249,-42.126952 z '; - var textpath = new Kinetic.TextPath({ + var textpath = new Konva.TextPath({ y: 50, fill: 'black', fontSize: '24', diff --git a/test/unit/shapes/Arc-test.js b/test/unit/shapes/Arc-test.js index 0ba27de2..e8fac1a4 100644 --- a/test/unit/shapes/Arc-test.js +++ b/test/unit/shapes/Arc-test.js @@ -2,8 +2,8 @@ suite('Arc', function() { // ====================================================== test('add arc', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var arc = new Kinetic.Arc({ + var layer = new Konva.Layer(); + var arc = new Konva.Arc({ x: 100, y: 100, innerRadius: 50, diff --git a/test/unit/shapes/Blob-test.js b/test/unit/shapes/Blob-test.js index 6add9390..31ddb1e0 100644 --- a/test/unit/shapes/Blob-test.js +++ b/test/unit/shapes/Blob-test.js @@ -2,9 +2,9 @@ suite('Blob', function(){ // ====================================================== test('add blob', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var blob = new Kinetic.Line({ + var blob = new Konva.Line({ points: [73,140,340,23,500,109,300,170], stroke: 'blue', strokeWidth: 10, @@ -34,10 +34,10 @@ suite('Blob', function(){ // ====================================================== test('define tension first', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var blob = new Kinetic.Line({ + var blob = new Konva.Line({ tension: 0.8, points: [73,140,340,23,500,109,300,170], stroke: 'blue', @@ -56,11 +56,11 @@ suite('Blob', function(){ }); // ====================================================== - test('check for kinetic event handlers', function() { + test('check for konva event handlers', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var blob = new Kinetic.Line({ + var blob = new Konva.Line({ points: [73,140,340,23,500,109,300,170], stroke: 'blue', strokeWidth: 10, @@ -74,19 +74,19 @@ suite('Blob', function(){ stage.add(layer); - assert.equal(blob.eventListeners.pointsChange[0].name, 'kinetic'); - assert.equal(blob.eventListeners.tensionChange[0].name, 'kinetic'); + assert.equal(blob.eventListeners.pointsChange[0].name, 'konva'); + assert.equal(blob.eventListeners.tensionChange[0].name, 'konva'); - // removing handlers should not remove kinetic specific handlers + // removing handlers should not remove konva specific handlers blob.off('pointsChange'); blob.off('tensionChange'); - assert.equal(blob.eventListeners.pointsChange[0].name, 'kinetic'); - assert.equal(blob.eventListeners.tensionChange[0].name, 'kinetic'); + assert.equal(blob.eventListeners.pointsChange[0].name, 'konva'); + assert.equal(blob.eventListeners.tensionChange[0].name, 'konva'); // you can force remove an event by adding the name - blob.off('pointsChange.kinetic'); - blob.off('tensionChange.kinetic'); + blob.off('pointsChange.konva'); + blob.off('tensionChange.konva'); assert.equal(blob.eventListeners.pointsChange, undefined); assert.equal(blob.eventListeners.tensionChange, undefined); diff --git a/test/unit/shapes/Circle-test.js b/test/unit/shapes/Circle-test.js index 09e8a57a..bf4f8708 100644 --- a/test/unit/shapes/Circle-test.js +++ b/test/unit/shapes/Circle-test.js @@ -3,9 +3,9 @@ suite('Circle', function(){ test('add circle to stage', function(){ var stage = addStage(); - var layer = new Kinetic.Layer(); - var group = new Kinetic.Group(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var group = new Konva.Group(); + var circle = new Konva.Circle({ x: 100, y: 100, radius: 70, @@ -46,9 +46,9 @@ suite('Circle', function(){ var imageObj = new Image(); imageObj.onload = function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var group = new Kinetic.Group(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var group = new Konva.Group(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -89,9 +89,9 @@ suite('Circle', function(){ // ====================================================== test('add circle with radial gradient fill', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var group = new Kinetic.Group(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var group = new Konva.Group(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -125,9 +125,9 @@ suite('Circle', function(){ // ====================================================== test('add shape with linear gradient fill', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var group = new Kinetic.Group(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var group = new Konva.Group(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -151,9 +151,9 @@ suite('Circle', function(){ // ====================================================== test('set opacity after instantiation', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var group = new Kinetic.Group(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var group = new Konva.Group(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -174,8 +174,8 @@ suite('Circle', function(){ // ====================================================== test('attrs sync', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, @@ -203,8 +203,8 @@ suite('Circle', function(){ // ====================================================== test('set fill after instantiation', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var circle = new Kinetic.Circle({ + var layer = new Konva.Layer(); + var circle = new Konva.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: 70, diff --git a/test/unit/shapes/Ellipse-test.js b/test/unit/shapes/Ellipse-test.js index c7055aaa..1381cfde 100644 --- a/test/unit/shapes/Ellipse-test.js +++ b/test/unit/shapes/Ellipse-test.js @@ -3,8 +3,8 @@ suite('Ellipse', function(){ // ====================================================== test('add ellipse', function(){ var stage = addStage(); - var layer = new Kinetic.Layer(); - var ellipse = new Kinetic.Ellipse({ + var layer = new Konva.Layer(); + var ellipse = new Konva.Ellipse({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, radius: {x:70, y:35}, diff --git a/test/unit/shapes/Image-test.js b/test/unit/shapes/Image-test.js index 999ce40c..af3ed827 100644 --- a/test/unit/shapes/Image-test.js +++ b/test/unit/shapes/Image-test.js @@ -6,8 +6,8 @@ suite('Image', function(){ imageObj.onload = function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + var darth = new Konva.Image({ x: 200, y: 60, image: imageObj, @@ -33,7 +33,7 @@ suite('Image', function(){ assert.equal(darth.getHeight(), 100); assert.equal(darth.offset().x, 50); assert.equal(darth.offset().y, 30); - assert.equal(Kinetic.Util._isElement(darth.getImage()), true); + assert.equal(Konva.Util._isElement(darth.getImage()), true); var crop = null; crop = darth.getCrop(); @@ -115,8 +115,8 @@ suite('Image', function(){ var imageObj = new Image(); imageObj.onload = function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 200, y: 75, image: imageObj, @@ -179,11 +179,11 @@ suite('Image', function(){ var imageObj = new Image(); var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); imageObj.onload = function() { - var tiger = new Kinetic.Image({ + var tiger = new Konva.Image({ x: 0, y: 0, image: imageObj, @@ -204,9 +204,9 @@ suite('Image', function(){ var imageObj = new Image(); var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - layer.add(new Kinetic.Line({ + layer.add(new Konva.Line({ points: [0,0,578,200], stroke: 'black', strokeWidth: 5 @@ -214,7 +214,7 @@ suite('Image', function(){ imageObj.onload = function() { - var tiger = new Kinetic.Image({ + var tiger = new Konva.Image({ x: 0, y: 0, image: imageObj, @@ -225,7 +225,7 @@ suite('Image', function(){ layer.add(tiger); - layer.add(new Kinetic.Line({ + layer.add(new Konva.Line({ points: [578,0,0,200], stroke: 'blue', strokeWidth: 5 @@ -247,8 +247,8 @@ suite('Image', function(){ imageObj.onload = function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 200, y: 60, image: imageObj, @@ -282,8 +282,8 @@ suite('Image', function(){ imageObj.onload = function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ + var layer = new Konva.Layer(); + darth = new Konva.Image({ x: 200, y: 60, image: imageObj, diff --git a/test/unit/shapes/Line-test.js b/test/unit/shapes/Line-test.js index 4e84a880..451fee08 100644 --- a/test/unit/shapes/Line-test.js +++ b/test/unit/shapes/Line-test.js @@ -2,9 +2,9 @@ suite('Line', function() { // ====================================================== test('add line', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var line = new Kinetic.Line({ + var line = new Konva.Line({ stroke: 'blue', strokeWidth: 20, lineCap: 'round', @@ -34,9 +34,9 @@ suite('Line', function() { // ====================================================== test('test default ponts array for two lines', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var line = new Kinetic.Line({ + var line = new Konva.Line({ stroke: 'blue', strokeWidth: 20, lineCap: 'round', @@ -44,7 +44,7 @@ suite('Line', function() { draggable: true }); - var redLine = new Kinetic.Line({ + var redLine = new Konva.Line({ x: 50, stroke: 'red', strokeWidth: 20, @@ -67,7 +67,7 @@ suite('Line', function() { // ====================================================== test('add dashed line', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); /* var points = [{ @@ -85,7 +85,7 @@ suite('Line', function() { }]; */ - var line = new Kinetic.Line({ + var line = new Konva.Line({ points: [73, 160, 340, 23, 500, 109, 500, 180], stroke: 'blue', @@ -114,9 +114,9 @@ suite('Line', function() { // ====================================================== test('add line with shadow', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var line = new Kinetic.Line({ + var line = new Konva.Line({ points: [73,160,340,23], stroke: 'blue', strokeWidth: 20, @@ -142,16 +142,16 @@ suite('Line', function() { test('line hit test with strokeScaleEnabled = false', function() { var stage = addStage(); var scale = 0.1; - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var group = new Kinetic.Group({ + var group = new Konva.Group({ scale: { x :scale, y : scale } }); - var line1 = new Kinetic.Line({ + var line1 = new Konva.Line({ points: [0, 0, 300, 0], stroke: 'red', strokeScaleEnabled: false, @@ -160,7 +160,7 @@ suite('Line', function() { }); group.add(line1); - var line2 = new Kinetic.Line({ + var line2 = new Konva.Line({ points: [0, 0, 300, 0], stroke: 'green', strokeWidth: 40 / scale, diff --git a/test/unit/shapes/Polygon-test.js b/test/unit/shapes/Polygon-test.js index 0292fbd1..834731d7 100644 --- a/test/unit/shapes/Polygon-test.js +++ b/test/unit/shapes/Polygon-test.js @@ -2,10 +2,10 @@ suite('Polygon', function() { test('add polygon', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); var points = [73,192,73,160,340,23,500,109,499,139,342,93]; - var poly = new Kinetic.Line({ + var poly = new Konva.Line({ points: points, fill: 'green', stroke: 'blue', diff --git a/test/unit/shapes/Rect-test.js b/test/unit/shapes/Rect-test.js index d406a97a..d85dad08 100644 --- a/test/unit/shapes/Rect-test.js +++ b/test/unit/shapes/Rect-test.js @@ -4,9 +4,9 @@ suite('Rect', function(){ test('add rect to stage', function(){ var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var rect = new Kinetic.Rect({ + var rect = new Konva.Rect({ x: 100, y: 50, width: 100, @@ -34,9 +34,9 @@ suite('Rect', function(){ test('add rect with shadow, corner radius, and opacity', function(){ var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var rect = new Kinetic.Rect({ + var rect = new Konva.Rect({ x: 100, y: 50, width: 100, @@ -68,8 +68,8 @@ suite('Rect', function(){ // ====================================================== test('draw rect', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var rect = new Kinetic.Rect({ + var layer = new Konva.Layer(); + var rect = new Konva.Rect({ x: 200, y: 90, width: 100, @@ -94,8 +94,8 @@ suite('Rect', function(){ // ====================================================== test('add fill stroke rect', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var rect = new Kinetic.Rect({ + var layer = new Konva.Layer(); + var rect = new Konva.Rect({ x: 200, y: 100, width: 100, @@ -124,8 +124,8 @@ suite('Rect', function(){ // ====================================================== test('add stroke rect', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var rect = new Kinetic.Rect({ + var layer = new Konva.Layer(); + var rect = new Konva.Rect({ x: 200, y: 100, width: 100, @@ -151,8 +151,8 @@ suite('Rect', function(){ // ====================================================== test('use default stroke width (stroke width should be 2)', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var rect = new Kinetic.Rect({ + var layer = new Konva.Layer(); + var rect = new Konva.Rect({ x: 200, y: 100, width: 100, @@ -176,8 +176,8 @@ suite('Rect', function(){ // ====================================================== test('limit corner radius', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var rect = new Kinetic.Rect({ + var layer = new Konva.Layer(); + var rect = new Konva.Rect({ x: 50, y: 50, width: 100, diff --git a/test/unit/shapes/Ring-test.js b/test/unit/shapes/Ring-test.js index 25698421..c94d6282 100644 --- a/test/unit/shapes/Ring-test.js +++ b/test/unit/shapes/Ring-test.js @@ -3,8 +3,8 @@ suite('Ring', function() { // ====================================================== test('add ring', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var ring = new Kinetic.Ring({ + var layer = new Konva.Layer(); + var ring = new Konva.Ring({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, innerRadius: 50, @@ -23,11 +23,11 @@ suite('Ring', function() { }); // ====================================================== - // test for https://github.com/ericdrowell/KineticJS/issues/987 + // test for https://github.com/ericdrowell/KonvaJS/issues/987 test('ring attrs sync', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var ring = new Kinetic.Ring({ + var layer = new Konva.Layer(); + var ring = new Konva.Ring({ name: 'ring', x: 30, y: 50, diff --git a/test/unit/shapes/Spline-test.js b/test/unit/shapes/Spline-test.js index 7286bd41..ff2a6f29 100644 --- a/test/unit/shapes/Spline-test.js +++ b/test/unit/shapes/Spline-test.js @@ -2,9 +2,9 @@ suite('Spline', function() { // ====================================================== test('add splines', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var line1 = new Kinetic.Line({ + var line1 = new Konva.Line({ points: [73,160,340,23,500,109,300,109], stroke: 'blue', strokeWidth: 10, @@ -14,7 +14,7 @@ suite('Spline', function() { tension: 1 }); - var line2 = new Kinetic.Line({ + var line2 = new Konva.Line({ points: [73,160,340,23,500,109], stroke: 'red', strokeWidth: 10, @@ -24,7 +24,7 @@ suite('Spline', function() { tension: 1 }); - var line3 = new Kinetic.Line({ + var line3 = new Konva.Line({ points: [73,160,340,23], stroke: 'green', strokeWidth: 10, @@ -50,9 +50,9 @@ suite('Spline', function() { // ====================================================== test('update spline points', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var spline = new Kinetic.Line({ + var spline = new Konva.Line({ points: [73,160,340,23,500,109,300,109], stroke: 'blue', strokeWidth: 10, @@ -80,9 +80,9 @@ suite('Spline', function() { // ====================================================== test('add point to spline points', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var spline = new Kinetic.Line({ + var spline = new Konva.Line({ points: [73,160,340,23,500,109,300,109], stroke: 'blue', strokeWidth: 10, diff --git a/test/unit/shapes/Sprite-test.js b/test/unit/shapes/Sprite-test.js index bf72310b..704d741a 100644 --- a/test/unit/shapes/Sprite-test.js +++ b/test/unit/shapes/Sprite-test.js @@ -4,10 +4,10 @@ suite('Sprite', function() { var imageObj = new Image(); imageObj.onload = function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var sprite = new Kinetic.Sprite({ + var sprite = new Konva.Sprite({ x: 200, y: 50, image: imageObj, @@ -78,10 +78,10 @@ suite('Sprite', function() { var imageObj = new Image(); imageObj.onload = function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var sprite = new Kinetic.Sprite({ + var sprite = new Konva.Sprite({ x: 200, y: 50, image: imageObj, @@ -131,10 +131,10 @@ suite('Sprite', function() { var imageObj = new Image(); imageObj.onload = function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var sprite = new Kinetic.Sprite({ + var sprite = new Konva.Sprite({ x: 200, y: 50, image: imageObj, @@ -152,7 +152,7 @@ suite('Sprite', function() { frameRate: 5 }); - var sprite2 = new Kinetic.Sprite({ + var sprite2 = new Konva.Sprite({ x: 200, y: 50, image: imageObj, @@ -199,10 +199,10 @@ suite('Sprite', function() { var imageObj = new Image(); imageObj.onload = function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var sprite = new Kinetic.Sprite({ + var sprite = new Konva.Sprite({ x: 200, y: 50, image: imageObj, @@ -240,10 +240,10 @@ suite('Sprite', function() { var imageObj = new Image(); imageObj.onload = function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var sprite = new Kinetic.Sprite({ + var sprite = new Konva.Sprite({ x: 200, y: 50, image: imageObj, diff --git a/test/unit/shapes/Text-test.js b/test/unit/shapes/Text-test.js index 4d28d245..e13747d2 100644 --- a/test/unit/shapes/Text-test.js +++ b/test/unit/shapes/Text-test.js @@ -4,10 +4,10 @@ suite('Text', function(){ // ====================================================== test('text with empty config is allowed', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); stage.add(layer); - var text = new Kinetic.Text(); + var text = new Konva.Text(); layer.add(text); layer.draw(); @@ -15,9 +15,9 @@ suite('Text', function(){ test('add text with shadows', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var rect = new Kinetic.Rect({ + var rect = new Konva.Rect({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, stroke: '#555', @@ -32,7 +32,7 @@ suite('Text', function(){ cornerRadius: 10 }); - var text = new Kinetic.Text({ + var text = new Konva.Text({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, text: 'Hello World!', @@ -52,7 +52,7 @@ suite('Text', function(){ shadowOpacity: 0.2 }); - var group = new Kinetic.Group({ + var group = new Konva.Group({ draggable: true }); @@ -71,9 +71,9 @@ suite('Text', function(){ // ====================================================== test('text getters and setters', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var text = new Kinetic.Text({ + var text = new Konva.Text({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, text: 'Hello World!', @@ -171,9 +171,9 @@ suite('Text', function(){ // ====================================================== test('text multi line', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var rect = new Kinetic.Rect({ + var rect = new Konva.Rect({ x: 10, y: 10, width: 380, @@ -181,7 +181,7 @@ suite('Text', function(){ fill: 'red' }); - var text = new Kinetic.Text({ + var text = new Konva.Text({ x: 10, y: 10, text: 'HEADING\n\nAll the world\'s a stage, merely players. They have their exits and their entrances; And one man in his time plays many parts.', @@ -225,9 +225,9 @@ suite('Text', function(){ // ====================================================== test('text multi line with shadows', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var text = new Kinetic.Text({ + var text = new Konva.Text({ x: 10, y: 10, //stroke: '#555', @@ -260,9 +260,9 @@ suite('Text', function(){ // ====================================================== test('change font size should update text data', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var text = new Kinetic.Text({ + var text = new Konva.Text({ x: 10, y: 10, text: 'Some awesome text', @@ -294,9 +294,9 @@ suite('Text', function(){ }); test('get text width', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); stage.add(layer); - var text = new Kinetic.Text({ + var text = new Konva.Text({ text : 'hello asd fasdf asdf asd fasdf asdfasd fa sds helloo', fill : 'black', width: 100 @@ -309,15 +309,15 @@ suite('Text', function(){ }); test('default text color should be black', function() { - var text = new Kinetic.Text(); + var text = new Konva.Text(); assert.equal(text.fill(), 'black'); }); test('text with stoke and strokeScaleEnabled', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); + var layer = new Konva.Layer(); - var text = new Kinetic.Text({ + var text = new Konva.Text({ fontSize: 50, y : 50, x : 50, diff --git a/test/unit/shapes/Wedge-test.js b/test/unit/shapes/Wedge-test.js index 9991e384..111477a7 100644 --- a/test/unit/shapes/Wedge-test.js +++ b/test/unit/shapes/Wedge-test.js @@ -2,8 +2,8 @@ suite('Wedge', function() { // ====================================================== test('add wedge', function() { var stage = addStage(); - var layer = new Kinetic.Layer(); - var wedge = new Kinetic.Wedge({ + var layer = new Konva.Layer(); + var wedge = new Konva.Wedge({ x: 100, y: 100, radius: 70,