lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-18 18:27:58 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

first pass at removing setDefaultAttrs logic to speed up node instantation performance

Browse Source
This commit is contained in:
Eric Rowell
2013-03-15 08:33:05 -07:00
parent 5c590bb88f
commit 69f9374c8e
28 changed files with 250 additions and 333 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Container.js
View File

@@ -242,7 +242,7 @@
Kinetic.Global.extend(Kinetic.Container, Kinetic.Node);
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Container, ['clipFunc']);
Kinetic.Node.addGetterSetter(Kinetic.Container, 'clipFunc');
/**
* set clipping function

33
src/DragAndDrop.js
View File

@@ -148,14 +148,7 @@
this.setAttr('draggable', draggable);
this._dragChange();
};
/**
* get draggable
* @name getDraggable
* @methodOf Kinetic.Node.prototype
*/
Kinetic.Node.prototype.getDraggable = function() {
return this.attrs.draggable;
};
/**
* determine if node is currently in drag and drop mode
* @name isDragging
@@ -200,14 +193,11 @@
this.off('mousedown.kinetic');
this.off('touchstart.kinetic');
};
/**
* get draggable. Alias of getDraggable()
* @name isDraggable
* @methodOf Kinetic.Node.prototype
*/
Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
Kinetic.Node.addGettersSetters(Kinetic.Node, ['dragBoundFunc', 'dragOnTop']);
Kinetic.Node.addGetterSetter(Kinetic.Node, 'dragBoundFunc');
Kinetic.Node.addGetterSetter(Kinetic.Node, 'dragOnTop', true);
Kinetic.Node.addGetter(Kinetic.Node, 'draggable', false);
/**
* set drag bound function. This is used to override the default
@@ -238,6 +228,19 @@
* @methodOf Kinetic.Node.prototype
*/
/**
* get draggable
* @name getDraggable
* @methodOf Kinetic.Node.prototype
*/
/**
* get draggable. Alias of getDraggable()
* @name isDraggable
* @methodOf Kinetic.Node.prototype
*/
Kinetic.Node.prototype.isDraggable = Kinetic.Node.prototype.getDraggable;
// listen for capturing phase so that the _endDrag method is
// called before the stage mouseup event is triggered in order
// to render the hit graph just in time to pick up the event

2
src/Group.js
View File

@@ -14,7 +14,7 @@
Kinetic.Group.prototype = {
_initGroup: function(config) {
this.nodeType = 'Group';
this.createAttrs();
// call super constructor
Kinetic.Container.call(this, config);
}

16
src/Layer.js
View File

@@ -16,10 +16,6 @@
Kinetic.Layer.prototype = {
_initLayer: function(config) {
this.setDefaultAttrs({
clearBeforeDraw: true
});
this.nodeType = 'Layer';
this.beforeDrawFunc = undefined;
this.afterDrawFunc = undefined;
@@ -27,6 +23,7 @@
this.canvas.getElement().style.position = 'absolute';
this.hitCanvas = new Kinetic.HitCanvas();
this.createAttrs();
// call super constructor
Kinetic.Container.call(this, config);
},
@@ -70,14 +67,18 @@
*/
drawScene: function(canvas) {
canvas = canvas || this.getCanvas();
if(this.attrs.clearBeforeDraw) {
if(this.getClearBeforeDraw()) {
canvas.clear();
}
Kinetic.Container.prototype.drawScene.call(this, canvas);
},
toDataURL: function(config) {
config = config || {};
var mimeType = config.mimeType || null, quality = config.quality || null, canvas, context, x = config.x || 0, y = config.y || 0;
var mimeType = config.mimeType || null,
quality = config.quality || null,
canvas, context,
x = config.x || 0,
y = config.y || 0;
// if dimension or position is defined, use Node toDataURL
if(config.width || config.height || config.x || config.y) {
@@ -87,6 +88,7 @@
else {
return this.getCanvas().toDataURL(mimeType, quality);
}
},
/**
* set before draw handler
@@ -217,7 +219,7 @@
Kinetic.Global.extend(Kinetic.Layer, Kinetic.Container);
// add getters and setters
Kinetic.Node.addGettersSetters(Kinetic.Layer, ['clearBeforeDraw']);
Kinetic.Node.addGetterSetter(Kinetic.Layer, 'clearBeforeDraw', true);
/**
* set flag which determines if the layer is cleared or not

210
src/Node.js
View File

@@ -13,28 +13,6 @@
Kinetic.Node.prototype = {
_nodeInit: function(config) {
this._id = Kinetic.Global.idCounter++;
this.defaultNodeAttrs = {
visible: true,
listening: true,
name: undefined,
opacity: 1,
x: 0,
y: 0,
scale: {
x: 1,
y: 1
},
rotation: 0,
offset: {
x: 0,
y: 0
},
draggable: false,
dragOnTop: true
};
this.setDefaultAttrs(this.defaultNodeAttrs);
this.eventListeners = {};
this.setAttrs(config);
},
@@ -91,7 +69,6 @@
var len = types.length;
for(var n = 0; n < len; n++) {
var type = types[n];
//var event = (type.indexOf('touch') === -1) ? 'on' + type : type;
var event = type;
var parts = event.split('.');
var baseEvent = parts[0];
@@ -155,42 +132,33 @@
this.remove();
},
/**
* get attr
* @name getAttr
* @methodOf Kinetic.Node.prototype
*/
getAttr: function(attr) {
var method = 'get' + attr.charAt(0).toUpperCase() + attr.slice(1);
return method();
},
/**
* get attrs
* @name getAttrs
* @methodOf Kinetic.Node.prototype
*/
getAttrs: function() {
return this.attrs;
return this.attrs || {};
},
/**
* set default attrs. This method should only be used if
* you're creating a custom node
* @name setDefaultAttrs
* @name createAttrs
* @methodOf Kinetic.Node.prototype
* @param {Object} confic
*/
setDefaultAttrs: function(config) {
// create attrs object if undefined
createAttrs: function() {
if(this.attrs === undefined) {
this.attrs = {};
}
if(config) {
for(var key in config) {
/*
* only set the attr if it's undefined in case
* a developer writes a custom class that extends
* a Kinetic Class such that their default property
* isn't overwritten by the Kinetic Class default
* property
*/
if(this.attrs[key] === undefined) {
this.attrs[key] = config[key];
}
}
}
},
/**
* set attrs
* @name setAttrs
@@ -220,7 +188,14 @@
* @methodOf Kinetic.Node.prototype
*/
getVisible: function() {
var visible = this.attrs.visible, parent = this.getParent();
var visible = this.attrs.visible,
parent = this.getParent();
// default
if (visible === undefined) {
visible = true;
}
if(visible && parent && !parent.getVisible()) {
return false;
}
@@ -234,7 +209,14 @@
* @methodOf Kinetic.Node.prototype
*/
getListening: function() {
var listening = this.attrs.listening, parent = this.getParent();
var listening = this.attrs.listening,
parent = this.getParent();
// default
if (listening === undefined) {
listening = true;
}
if(listening && parent && !parent.getListening()) {
return false;
}
@@ -262,7 +244,7 @@
* @methodOf Kinetic.Node.prototype
*/
getZIndex: function() {
return this.index;
return this.index || 0;
},
/**
* get absolute z-index which takes into account sibling
@@ -335,10 +317,9 @@
* @methodOf Kinetic.Node.prototype
*/
getPosition: function() {
var attrs = this.attrs;
return {
x: attrs.x,
y: attrs.y
x: this.getX(),
y: this.getY()
};
},
/**
@@ -630,14 +611,13 @@
*/
getTransform: function() {
var m = new Kinetic.Transform(),
attrs = this.attrs,
x = attrs.x,
y = attrs.y,
rotation = attrs.rotation,
scale = attrs.scale,
x = this.getX(),
y = this.getY(),
rotation = this.getRotation(),
scale = this.getScale(),
scaleX = scale.x,
scaleY = scale.y,
offset = attrs.offset,
offset = this.getOffset(),
offsetX = offset.x,
offsetY = offset.y;
@@ -811,13 +791,12 @@
}
},
_clearTransform: function() {
var attrs = this.attrs,
scale = attrs.scale,
offset = attrs.offset,
var scale = this.getScale(),
offset = this.getOffset(),
trans = {
x: attrs.x,
y: attrs.y,
rotation: attrs.rotation,
x: this.getX(),
y: this.getY(),
rotation: this.getRotation(),
scale: {
x: scale.x,
y: scale.y
@@ -932,65 +911,37 @@
};
// add getter and setter methods
Kinetic.Node.addSetters = function(constructor, arr) {
var len = arr.length;
for(var n = 0; n < len; n++) {
var attr = arr[n];
this._addSetter(constructor, attr);
}
Kinetic.Node.addGetterSetter = function(constructor, arr, def) {
this.addGetter(constructor, arr, def);
this.addSetter(constructor, arr);
};
Kinetic.Node.addPointSetters = function(constructor, arr) {
var len = arr.length;
for(var n = 0; n < len; n++) {
var attr = arr[n];
this._addPointSetter(constructor, attr);
}
Kinetic.Node.addPointGetterSetter = function(constructor, arr, def) {
this.addGetter(constructor, arr, def);
this.addPointSetter(constructor, arr);
};
Kinetic.Node.addRotationSetters = function(constructor, arr) {
var len = arr.length;
for(var n = 0; n < len; n++) {
var attr = arr[n];
this._addRotationSetter(constructor, attr);
}
Kinetic.Node.addRotationGetterSetter = function(constructor, arr, def) {
this.addRotationGetter(constructor, arr, def);
this.addRotationSetter(constructor, arr);
};
Kinetic.Node.addGetters = function(constructor, arr) {
var len = arr.length;
for(var n = 0; n < len; n++) {
var attr = arr[n];
this._addGetter(constructor, attr);
}
};
Kinetic.Node.addRotationGetters = function(constructor, arr) {
var len = arr.length;
for(var n = 0; n < len; n++) {
var attr = arr[n];
this._addRotationGetter(constructor, attr);
}
};
Kinetic.Node.addGettersSetters = function(constructor, arr) {
this.addSetters(constructor, arr);
this.addGetters(constructor, arr);
};
Kinetic.Node.addPointGettersSetters = function(constructor, arr) {
this.addPointSetters(constructor, arr);
this.addGetters(constructor, arr);
};
Kinetic.Node.addRotationGettersSetters = function(constructor, arr) {
this.addRotationSetters(constructor, arr);
this.addRotationGetters(constructor, arr);
};
Kinetic.Node._addSetter = function(constructor, attr) {
Kinetic.Node.addSetter = function(constructor, attr) {
var that = this;
var method = 'set' + attr.charAt(0).toUpperCase() + attr.slice(1);
constructor.prototype[method] = function(val) {
this.setAttr(attr, val);
};
};
Kinetic.Node._addPointSetter = function(constructor, attr) {
Kinetic.Node.addPointSetter = function(constructor, attr) {
var that = this;
var method = 'set' + attr.charAt(0).toUpperCase() + attr.slice(1);
constructor.prototype[method] = function() {
var pos = Kinetic.Type._getXY([].slice.call(arguments));
// default
if (!this.attrs[attr]) {
this.attrs[attr] = {x:1,y:1};
}
if(pos && pos.x === undefined) {
pos.x = this.attrs[attr].x;
}
@@ -1000,7 +951,7 @@
this.setAttr(attr, pos);
};
};
Kinetic.Node._addRotationSetter = function(constructor, attr) {
Kinetic.Node.addRotationSetter = function(constructor, attr) {
var that = this;
var method = 'set' + attr.charAt(0).toUpperCase() + attr.slice(1);
// radians
@@ -1012,23 +963,35 @@
this.setAttr(attr, Kinetic.Type._degToRad(deg));
};
};
Kinetic.Node._addGetter = function(constructor, attr) {
Kinetic.Node.addGetter = function(constructor, attr, def) {
var that = this;
var method = 'get' + attr.charAt(0).toUpperCase() + attr.slice(1);
constructor.prototype[method] = function(arg) {
return this.attrs[attr];
var val = this.attrs[attr];
if (val === undefined) {
val = def;
}
return val;
};
};
Kinetic.Node._addRotationGetter = function(constructor, attr) {
Kinetic.Node.addRotationGetter = function(constructor, attr, def) {
var that = this;
var method = 'get' + attr.charAt(0).toUpperCase() + attr.slice(1);
// radians
constructor.prototype[method] = function() {
return this.attrs[attr];
var val = this.attrs[attr];
if (val === undefined) {
val = def;
}
return val;
};
// degrees
constructor.prototype[method + 'Deg'] = function() {
return Kinetic.Type._radToDeg(this.attrs[attr])
var val = this.attrs[attr];
if (val === undefined) {
val = def;
}
return Kinetic.Type._radToDeg(val);
};
};
/**
@@ -1081,7 +1044,9 @@
return no;
};
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Node, ['x', 'y', 'opacity']);
Kinetic.Node.addGetterSetter(Kinetic.Node, 'x', 0);
Kinetic.Node.addGetterSetter(Kinetic.Node, 'y', 0);
Kinetic.Node.addGetterSetter(Kinetic.Node, 'opacity', 1);
/**
* set x position
@@ -1124,7 +1089,8 @@
* @methodOf Kinetic.Node.prototype
*/
Kinetic.Node.addGetters(Kinetic.Node, ['name', 'id']);
Kinetic.Node.addGetter(Kinetic.Node, 'name');
Kinetic.Node.addGetter(Kinetic.Node, 'id');
/**
* get name
@@ -1138,7 +1104,7 @@
* @methodOf Kinetic.Node.prototype
*/
Kinetic.Node.addRotationGettersSetters(Kinetic.Node, ['rotation']);
Kinetic.Node.addRotationGetterSetter(Kinetic.Node, 'rotation', 0);
/**
* set rotation in radians
@@ -1166,7 +1132,8 @@
* @methodOf Kinetic.Node.prototype
*/
Kinetic.Node.addPointGettersSetters(Kinetic.Node, ['scale', 'offset']);
Kinetic.Node.addPointGetterSetter(Kinetic.Node, 'scale', {x:1,y:1});
Kinetic.Node.addPointGetterSetter(Kinetic.Node, 'offset', {x:0,y:0});
/**
* set scale
@@ -1196,7 +1163,10 @@
* @methodOf Kinetic.Node.prototype
*/
Kinetic.Node.addSetters(Kinetic.Node, ['width', 'height', 'listening', 'visible']);
Kinetic.Node.addSetter(Kinetic.Node, 'width');
Kinetic.Node.addSetter(Kinetic.Node, 'height');
Kinetic.Node.addSetter(Kinetic.Node, 'listening');
Kinetic.Node.addSetter(Kinetic.Node, 'visible');
/**
* set width

46
src/Shape.js
View File

@@ -26,15 +26,6 @@
Kinetic.Shape.prototype = {
_initShape: function(config) {
this.setDefaultAttrs({
fillEnabled: true,
strokeEnabled: true,
shadowEnabled: true,
dashArrayEnabled: true,
fillPriority: 'color',
strokeScaleEnabled: true
});
this.nodeType = 'Shape';
this._fillFunc = _fillFunc;
this._strokeFunc = _strokeFunc;
@@ -55,6 +46,7 @@
this.colorKey = key;
shapes[key] = this;
this.createAttrs();
// call super constructor
Kinetic.Node.call(this, config);
},
@@ -211,7 +203,31 @@
Kinetic.Global.extend(Kinetic.Shape, Kinetic.Node);
// add getters and setters
Kinetic.Node.addGettersSetters(Kinetic.Shape, ['stroke', 'lineJoin', 'lineCap', 'strokeWidth', 'drawFunc', 'drawHitFunc', 'dashArray', 'shadowColor', 'shadowBlur', 'shadowOpacity', 'fillPatternImage', 'fill', 'fillPatternX', 'fillPatternY', 'fillLinearGradientColorStops', 'fillRadialGradientStartRadius', 'fillRadialGradientEndRadius', 'fillRadialGradientColorStops', 'fillPatternRepeat', 'fillEnabled', 'strokeEnabled', 'shadowEnabled', 'dashArrayEnabled', 'fillPriority', 'strokeScaleEnabled']);
Kinetic.Node.addGetterSetter(Kinetic.Shape, 'stroke');
Kinetic.Node.addGetterSetter(Kinetic.Shape, 'lineJoin');
Kinetic.Node.addGetterSetter(Kinetic.Shape, 'lineCap');
Kinetic.Node.addGetterSetter(Kinetic.Shape, 'strokeWidth');
Kinetic.Node.addGetterSetter(Kinetic.Shape, 'drawFunc');
Kinetic.Node.addGetterSetter(Kinetic.Shape, 'drawHitFunc');
Kinetic.Node.addGetterSetter(Kinetic.Shape, 'dashArray');
Kinetic.Node.addGetterSetter(Kinetic.Shape, 'shadowColor');
Kinetic.Node.addGetterSetter(Kinetic.Shape, 'shadowBlur');
Kinetic.Node.addGetterSetter(Kinetic.Shape, 'shadowOpacity');
Kinetic.Node.addGetterSetter(Kinetic.Shape, 'fillPatternImage');
Kinetic.Node.addGetterSetter(Kinetic.Shape, 'fill');
Kinetic.Node.addGetterSetter(Kinetic.Shape, 'fillPatternX');
Kinetic.Node.addGetterSetter(Kinetic.Shape, 'fillPatternY');
Kinetic.Node.addGetterSetter(Kinetic.Shape, 'fillLinearGradientColorStops');
Kinetic.Node.addGetterSetter(Kinetic.Shape, 'fillRadialGradientStartRadius');
Kinetic.Node.addGetterSetter(Kinetic.Shape, 'fillRadialGradientEndRadius');
Kinetic.Node.addGetterSetter(Kinetic.Shape, 'fillRadialGradientColorStops');
Kinetic.Node.addGetterSetter(Kinetic.Shape, 'fillPatternRepeat');
Kinetic.Node.addGetterSetter(Kinetic.Shape, 'fillEnabled', true);
Kinetic.Node.addGetterSetter(Kinetic.Shape, 'strokeEnabled', true);
Kinetic.Node.addGetterSetter(Kinetic.Shape, 'shadowEnabled', true);
Kinetic.Node.addGetterSetter(Kinetic.Shape, 'dashArrayEnabled', true);
Kinetic.Node.addGetterSetter(Kinetic.Shape, 'fillPriority', 'color');
Kinetic.Node.addGetterSetter(Kinetic.Shape, 'strokeScaleEnabled', true);
/**
* set stroke color
@@ -482,7 +498,13 @@
* @methodOf Kinetic.Shape.prototype
*/
Kinetic.Node.addPointGettersSetters(Kinetic.Shape, ['fillPatternOffset', 'fillPatternScale', 'fillLinearGradientStartPoint', 'fillLinearGradientEndPoint', 'fillRadialGradientStartPoint', 'fillRadialGradientEndPoint', 'shadowOffset']);
Kinetic.Node.addPointGetterSetter(Kinetic.Shape, 'fillPatternOffset');
Kinetic.Node.addPointGetterSetter(Kinetic.Shape, 'fillPatternScale');
Kinetic.Node.addPointGetterSetter(Kinetic.Shape, 'fillLinearGradientStartPoint');
Kinetic.Node.addPointGetterSetter(Kinetic.Shape, 'fillLinearGradientEndPoint');
Kinetic.Node.addPointGetterSetter(Kinetic.Shape, 'fillRadialGradientStartPoint');
Kinetic.Node.addPointGetterSetter(Kinetic.Shape, 'fillRadialGradientEndPoint');
Kinetic.Node.addPointGetterSetter(Kinetic.Shape, 'shadowOffset');
/**
* set fill pattern offset
@@ -575,7 +597,7 @@
* @methodOf Kinetic.Shape.prototype
*/
Kinetic.Node.addRotationGettersSetters(Kinetic.Shape, ['fillPatternRotation']);
Kinetic.Node.addRotationGetterSetter(Kinetic.Shape, 'fillPatternRotation', 0);
/**
* set fill pattern rotation in radians

29
src/Stage.js
View File

@@ -15,14 +15,10 @@
Kinetic.Stage.prototype = {
_initStage: function(config) {
var dd = Kinetic.DD;
this.setDefaultAttrs({
width: 400,
height: 200
});
this.createAttrs();
// call super constructor
Kinetic.Container.call(this, config);
this._setStageDefaultProperties();
this._id = Kinetic.Global.idCounter++;
this._buildDOM();
@@ -103,19 +99,6 @@
this.attrs.container.removeChild(content);
}
},
/**
* reset stage to default state
* @name reset
* @methodOf Kinetic.Stage.prototype
*/
reset: function() {
// remove children
this.removeChildren();
// defaults
this._setStageDefaultProperties();
this.setAttrs(this.defaultNodeAttrs);
},
/**
* get mouse position for desktop apps
* @name getMousePosition
@@ -170,7 +153,13 @@
*/
toDataURL: function(config) {
config = config || {};
var mimeType = config.mimeType || null, quality = config.quality || null, x = config.x || 0, y = config.y || 0, canvas = new Kinetic.SceneCanvas(config.width || this.getWidth(), config.height || this.getHeight()), context = canvas.getContext(), layers = this.children;
var mimeType = config.mimeType || null,
quality = config.quality || null,
x = config.x || 0,
y = config.y || 0,
canvas = new Kinetic.SceneCanvas(config.width || this.getWidth(), config.height || this.getHeight()),
context = canvas.getContext(),
layers = this.children;
if(x || y) {
context.translate(-1 * x, -1 * y);
@@ -568,7 +557,7 @@
Kinetic.Global.extend(Kinetic.Stage, Kinetic.Container);
// add getters and setters
Kinetic.Node.addGetters(Kinetic.Stage, ['container']);
Kinetic.Node.addGetter(Kinetic.Stage, 'container');
/**
* get container DOM element

8
src/plugins/RegularPolygon.js
View File

@@ -15,10 +15,7 @@
Kinetic.Plugins.RegularPolygon.prototype = {
_initRegularPolygon: function(config) {
this.setDefaultAttrs({
radius: 0,
sides: 0
});
this.createAttrs();
// call super constructor
Kinetic.Shape.call(this, config);
@@ -42,7 +39,8 @@
Kinetic.Global.extend(Kinetic.Plugins.RegularPolygon, Kinetic.Shape);
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Plugins.RegularPolygon, ['radius', 'sides']);
Kinetic.Node.addGetterSetter(Kinetic.Plugins.RegularPolygon, 'radius', 0);
Kinetic.Node.addGetterSetter(Kinetic.Plugins.RegularPolygon, 'sides', 0);
/**
* set radius

10
src/plugins/Star.js
View File

@@ -16,11 +16,7 @@
Kinetic.Plugins.Star.prototype = {
_initStar: function(config) {
this.setDefaultAttrs({
numPoints: 0,
innerRadius: 0,
outerRadius: 0
});
this.createAttrs();
// call super constructor
Kinetic.Shape.call(this, config);
@@ -47,7 +43,9 @@
Kinetic.Global.extend(Kinetic.Plugins.Star, Kinetic.Shape);
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Plugins.Star, ['numPoints', 'innerRadius', 'outerRadius']);
Kinetic.Node.addGetterSetter(Kinetic.Plugins.Star, 'numPoints', 0);
Kinetic.Node.addGetterSetter(Kinetic.Plugins.Star, 'innerRadius', 0);
Kinetic.Node.addGetterSetter(Kinetic.Plugins.Star, 'outerRadius', 0);
/**
* set number of points

19
src/plugins/TextPath.js
View File

@@ -1,4 +1,8 @@
(function() {
var EMPTY_STRING = '',
CALIBRI = 'Calibri',
NORMAL = 'normal';
/**
* Path constructor.
* @author Jason Follas
@@ -25,13 +29,7 @@
Kinetic.Plugins.TextPath.prototype = {
_initTextPath: function(config) {
this.setDefaultAttrs({
fontFamily: 'Calibri',
fontSize: 12,
fontStyle: 'normal',
text: ''
});
this.createAttrs();
this.dummyCanvas = document.createElement('canvas');
this.dataArray = [];
var that = this;
@@ -307,8 +305,11 @@
Kinetic.Global.extend(Kinetic.Plugins.TextPath, Kinetic.Shape);
// add setters and getters
Kinetic.Node.addGettersSetters(Kinetic.Plugins.TextPath, ['fontFamily', 'fontSize', 'fontStyle']);
Kinetic.Node.addGetters(Kinetic.Plugins.TextPath, ['text']);
Kinetic.Node.addGetterSetter(Kinetic.Plugins.TextPath, 'fontFamily', CALIBRI);
Kinetic.Node.addGetterSetter(Kinetic.Plugins.TextPath, 'fontSize', 12);
Kinetic.Node.addGetterSetter(Kinetic.Plugins.TextPath, 'fontStyle', NORMAL);
Kinetic.Node.addGetter(Kinetic.Plugins.TextPath, 'text', EMPTY_STRING);
/**
* set font family

7
src/shapes/Circle.js
View File

@@ -14,10 +14,7 @@
Kinetic.Circle.prototype = {
_initCircle: function(config) {
this.setDefaultAttrs({
radius: 0
});
this.createAttrs();
// call super constructor
Kinetic.Shape.call(this, config);
this.shapeType = 'Circle';
@@ -48,7 +45,7 @@
Kinetic.Global.extend(Kinetic.Circle, Kinetic.Shape);
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Circle, ['radius']);
Kinetic.Node.addGetterSetter(Kinetic.Circle, 'radius', 0);
/**
* set radius

9
src/shapes/Ellipse.js
View File

@@ -14,12 +14,7 @@
Kinetic.Ellipse.prototype = {
_initEllipse: function(config) {
this.setDefaultAttrs({
radius: {
x: 0,
y: 0
}
});
this.createAttrs();
// call super constructor
Kinetic.Shape.call(this, config);
@@ -60,7 +55,7 @@
Kinetic.Global.extend(Kinetic.Ellipse, Kinetic.Shape);
// add getters setters
Kinetic.Node.addPointGettersSetters(Kinetic.Ellipse, ['radius']);
Kinetic.Node.addPointGetterSetter(Kinetic.Ellipse, 'radius', {x:0,y:0});
/**
* set radius

4
src/shapes/Image.js
View File

@@ -191,8 +191,8 @@
Kinetic.Global.extend(Kinetic.Image, Kinetic.Shape);
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Image, ['image']);
Kinetic.Node.addGetters(Kinetic.Image, ['crop']);
Kinetic.Node.addGetterSetter(Kinetic.Image, 'image');
Kinetic.Node.addGetter(Kinetic.Image, 'crop');
/**
* set image

7
src/shapes/Line.js
View File

@@ -15,10 +15,7 @@
Kinetic.Line.prototype = {
_initLine: function(config) {
this.setDefaultAttrs({
points: [],
lineCap: 'butt'
});
this.createAttrs();
// call super constructor
Kinetic.Shape.call(this, config);
@@ -51,7 +48,7 @@
Kinetic.Global.extend(Kinetic.Line, Kinetic.Shape);
// add getters setters
Kinetic.Node.addGetters(Kinetic.Line, ['points']);
Kinetic.Node.addGetter(Kinetic.Line, 'points', []);
/**
* get points array

2
src/shapes/Path.js
View File

@@ -543,7 +543,7 @@
return [cx, cy, rx, ry, theta, dTheta, psi, fs];
};
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Path, ['data']);
Kinetic.Node.addGetterSetter(Kinetic.Path, 'data');
/**
* set SVG path data string. This method

6
src/shapes/Polygon.js
View File

@@ -15,9 +15,7 @@
Kinetic.Polygon.prototype = {
_initPolygon: function(config) {
this.setDefaultAttrs({
points: []
});
this.createAttrs();
// call super constructor
Kinetic.Shape.call(this, config);
@@ -48,7 +46,7 @@
Kinetic.Global.extend(Kinetic.Polygon, Kinetic.Shape);
// add getters setters
Kinetic.Node.addGetters(Kinetic.Polygon, ['points']);
Kinetic.Node.addGetter(Kinetic.Polygon, 'points', []);
/**
* get points array

19
src/shapes/Rect.js
View File

@@ -14,21 +14,20 @@
Kinetic.Rect.prototype = {
_initRect: function(config) {
this.setDefaultAttrs({
width: 0,
height: 0,
cornerRadius: 0
});
this.createAttrs();
Kinetic.Shape.call(this, config);
this.shapeType = 'Rect';
this._setDrawFuncs();
},
drawFunc: function(canvas) {
var context = canvas.getContext();
var context = canvas.getContext(),
cornerRadius = this.getCornerRadius(),
width = this.getWidth(),
height = this.getHeight();
context.beginPath();
var cornerRadius = this.getCornerRadius(), width = this.getWidth(), height = this.getHeight();
if(cornerRadius === 0) {
if(!cornerRadius) {
// simple rect - don't bother doing all that complicated maths stuff.
context.rect(0, 0, width, height);
}
@@ -51,7 +50,7 @@
Kinetic.Global.extend(Kinetic.Rect, Kinetic.Shape);
Kinetic.Node.addGettersSetters(Kinetic.Rect, ['cornerRadius']);
Kinetic.Node.addGetterSetter(Kinetic.Rect, 'cornerRadius', 0);
/**
* set corner radius

7
src/shapes/Spline.js
View File

@@ -40,10 +40,7 @@
Kinetic.Spline.prototype = {
_initSpline: function(config) {
this.setDefaultAttrs({
tension: 1
});
this.createAttrs();
// call super constructor
Kinetic.Line.call(this, config);
this.shapeType = 'Spline';
@@ -106,7 +103,7 @@
Kinetic.Global.extend(Kinetic.Spline, Kinetic.Line);
// add getters setters
Kinetic.Node.addGetters(Kinetic.Spline, ['tension']);
Kinetic.Node.addGetter(Kinetic.Spline, 'tension', 1);
/**
* get tension

10
src/shapes/Sprite.js
View File

@@ -16,10 +16,7 @@
Kinetic.Sprite.prototype = {
_initSprite: function(config) {
this.setDefaultAttrs({
index: 0,
frameRate: 17
});
this.createAttrs();
// call super constructor
Kinetic.Shape.call(this, config);
@@ -111,7 +108,10 @@
Kinetic.Global.extend(Kinetic.Sprite, Kinetic.Shape);
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Sprite, ['animation', 'animations', 'index']);
Kinetic.Node.addGetterSetter(Kinetic.Sprite, 'animation');
Kinetic.Node.addGetterSetter(Kinetic.Sprite, 'animations');
Kinetic.Node.addGetterSetter(Kinetic.Sprite, 'index', 0);
Kinetic.Node.addGetterSetter(Kinetic.Sprite, 'frameRate', 17);
/**
* set animation key

35
src/shapes/Text.js
View File

@@ -53,24 +53,18 @@
Kinetic.Text.prototype = {
_initText: function(config) {
var that = this;
this.setDefaultAttrs({
fontFamily: CALIBRI,
text: EMPTY_STRING,
fontSize: 12,
align: LEFT,
verticalAlign: TOP,
fontStyle: NORMAL,
padding: 0,
width: AUTO,
height: AUTO,
lineHeight: 1
});
this.dummyCanvas = document.createElement(CANVAS);
this.createAttrs();
// since width and height work a bit different for Text,
// we need to default the values here
this.attrs.width = AUTO;
this.attrs.height = AUTO;
// call super constructor
Kinetic.Shape.call(this, config);
this.shapeType = TEXT;
this._fillFunc = _fillFunc;
this._strokeFunc = _strokeFunc;
this.shapeType = TEXT_UPPER;
@@ -158,7 +152,7 @@
* @methodOf Kinetic.Text.prototype
*/
getHeight: function() {
return this.attrs.height === AUTO ? (this.getTextHeight() * this.textArr.length * this.attrs.lineHeight) + this.attrs.padding * 2 : this.attrs.height;
return this.attrs.height === AUTO ? (this.getTextHeight() * this.textArr.length * this.getLineHeight()) + this.attrs.padding * 2 : this.attrs.height;
},
/**
* get text width
@@ -282,8 +276,17 @@
Kinetic.Global.extend(Kinetic.Text, Kinetic.Shape);
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Text, ['fontFamily', 'fontSize', 'fontStyle', 'padding', 'align', 'lineHeight']);
Kinetic.Node.addGetters(Kinetic.Text, [TEXT]);
Kinetic.Node.addGetterSetter(Kinetic.Text, 'fontFamily', CALIBRI);
Kinetic.Node.addGetterSetter(Kinetic.Text, 'fontSize', 12);
Kinetic.Node.addGetterSetter(Kinetic.Text, 'fontStyle', NORMAL);
Kinetic.Node.addGetterSetter(Kinetic.Text, 'padding', 0);
Kinetic.Node.addGetterSetter(Kinetic.Text, 'align', LEFT);
Kinetic.Node.addGetterSetter(Kinetic.Text, 'lineHeight', 1);
Kinetic.Node.addGetter(Kinetic.Text, TEXT, EMPTY_STRING);
Kinetic.Node.addSetter(Kinetic.Text, 'width');
Kinetic.Node.addSetter(Kinetic.Text, 'height');
/**
* set font family
* @name setFontFamily

10
src/shapes/Wedge.js
View File

@@ -16,11 +16,7 @@
Kinetic.Wedge.prototype = {
_initWedge: function(config) {
this.setDefaultAttrs({
radius: 0,
angle: 0,
clockwise: false
});
this.createAttrs();
// call super constructor
Kinetic.Shape.call(this, config);
@@ -56,7 +52,9 @@
Kinetic.Global.extend(Kinetic.Wedge, Kinetic.Shape);
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Wedge, ['radius', 'angle', 'clockwise']);
Kinetic.Node.addGetterSetter(Kinetic.Wedge, 'radius', 0);
Kinetic.Node.addGetterSetter(Kinetic.Wedge, 'angle', 0);
Kinetic.Node.addGetterSetter(Kinetic.Wedge, 'clockwise', false);
/**
* set radius

34
tests/js/performanceTests.js
View File

@@ -400,7 +400,7 @@ Test.Modules.PERFORMANCE = {
anim.start();
}, 4000);
},
'DRAWING - draw 10,000 small circles with tooltips': function(containerId) {
'*DRAWING - draw 10,000 small circles with tooltips': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@@ -408,7 +408,7 @@ Test.Modules.PERFORMANCE = {
});
var circlesLayer = new Kinetic.Layer();
var tooltipLayer = new Kinetic.Layer();
var colors = ["red", "orange", "yellow", "green", "blue", "cyan", "purple"];
var colorIndex = 0;
@@ -425,47 +425,19 @@ Test.Modules.PERFORMANCE = {
var randX = Math.random() * stage.getWidth();
var randY = Math.random() * stage.getHeight();
var circle = new Kinetic.Ellipse({
var circle = new Kinetic.Circle({
x: randX,
y: randY,
radius: 2,
fill: color
});
circle.on("mousemove", function() {
// update tooltip
console.log('mouseover')
var mousePos = stage.getMousePosition();
tooltip.setPosition(mousePos.x + 5, mousePos.y + 5);
tooltip.setText("node: " + i + ", color: " + color);
tooltip.show();
tooltipLayer.draw();
});
circle.on("mouseout", function() {
tooltip.hide();
tooltipLayer.draw();
});
circlesLayer.add(circle);
}());
}
var tooltip = new Kinetic.Text({
text: "",
fontFamily: "Calibri",
fontSize: 12,
padding: 5,
visible: false,
fill: "black",
alpha: 0.75,
textFill: "white"
});
tooltipLayer.add(tooltip);
stage.add(circlesLayer);
stage.add(tooltipLayer);
endTimer('drew 10,000 circles');

2
tests/js/unit/containerTests.js
View File

@@ -856,6 +856,8 @@ Test.Modules.CONTAINER = {
blueLayer.setZIndex(1);
console.log(greenLayer.getZIndex());
test(greenLayer.getZIndex() === 0, 'green layer should have z index of 0');
test(blueLayer.getZIndex() === 1, 'blue layer should have z index of 1');

4
tests/js/unit/ddTests.js
View File

@@ -21,13 +21,13 @@ Test.Modules.DD = {
layer.draw();
// test defaults
test(circle.attrs.draggable === false, 'draggable should be false');
test(circle.isDraggable() === false, 'draggable should be false');
//change properties
circle.setDraggable(true);
// test new properties
test(circle.attrs.draggable === true, 'draggable should be true');
test(circle.getDraggable() === true, 'draggable should be true');
},
'DRAG AND DROP - multiple drag and drop sets with setDraggable()': function(containerId) {
var stage = new Kinetic.Stage({

5
tests/js/unit/nodeTests.js
View File

@@ -852,7 +852,7 @@ Test.Modules.NODE = {
showHit(layer);
},
'hide group': function(containerId) {
'hide group 2': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@@ -2611,6 +2611,9 @@ Test.Modules.NODE = {
layer.hide();
layer.draw();
console.log(layer.toDataURL());
test(layer.toDataURL() === dataUrls['cleared'], 'layer is still visible');
},
'hide group': function(containerId) {

4
tests/js/unit/shapes/textTests.js
View File

@@ -257,12 +257,16 @@ Test.Modules.Text = {
var width = text.getWidth();
var height = text.getHeight();
layer.add(text);
stage.add(layer);
text.setFontSize(30);
layer.draw();
//console.log(text.getHeight() + ',' + height);
test(text.getWidth() > width, 'text box width should have increased.');
test(text.getHeight() > height, 'text box height should have increased.');

31
tests/js/unit/stageTests.js
View File

@@ -67,37 +67,6 @@ Test.Modules.STAGE = {
test(layer.getCanvas().element.width === 333, 'layer canvas element width should be 333');
test(layer.getCanvas().element.height === 155, 'layer canvas element width should be 155');
},
'reset stage': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200,
x: 100
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
draggable: true
});
stage.add(layer);
layer.add(group);
group.add(circle);
layer.draw();
test(stage.getChildren().length === 1, 'stage should have one child');
test(stage.getX() === 100, 'stage x should be 100');
stage.reset();
test(stage.getChildren().length === 0, 'stage should have no children');
test(stage.getX() === 0, 'stage x should be 0');
},
'get stage DOM': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,