factor methods now also build overloaded attr functions. i.e. instead of setScaleX(5), you can use scaleX(5). Instead of getScaleX(), you can use scaleX()

This commit is contained in:
Eric Rowell 2013-12-13 11:02:07 -08:00
parent c7d7fef80a
commit fe7b4daebc
18 changed files with 167 additions and 32 deletions

View File

@ -46,20 +46,26 @@
addGetterSetter: function(constructor, attr, def) {
this.addGetter(constructor, attr, def);
this.addSetter(constructor, attr);
this.addOverloadedGetterSetter(constructor, attr);
},
addPointGetterSetter: function(constructor, attr, def) {
this.addPointGetter(constructor, attr, def);
this.addPointSetter(constructor, attr);
this.addOverloadedGetterSetter(constructor, attr);
// add invdividual component getters and setters
this.addGetter(constructor, attr + UPPER_X, def);
this.addGetter(constructor, attr + UPPER_Y, def);
this.addSetter(constructor, attr + UPPER_X);
this.addSetter(constructor, attr + UPPER_Y);
this.addOverloadedGetterSetter(constructor, attr + UPPER_X);
this.addOverloadedGetterSetter(constructor, attr + UPPER_Y);
},
addBoxGetterSetter: function(constructor, attr, def) {
this.addBoxGetter(constructor, attr, def);
this.addBoxSetter(constructor, attr);
this.addOverloadedGetterSetter(constructor, attr);
// add invdividual component getters and setters
this.addGetter(constructor, attr + UPPER_X, def);
@ -71,19 +77,27 @@
this.addSetter(constructor, attr + UPPER_Y);
this.addSetter(constructor, attr + UPPER_WIDTH);
this.addSetter(constructor, attr + UPPER_HEIGHT);
this.addOverloadedGetterSetter(constructor, attr + UPPER_X);
this.addOverloadedGetterSetter(constructor, attr + UPPER_Y);
this.addOverloadedGetterSetter(constructor, attr + UPPER_WIDTH);
this.addOverloadedGetterSetter(constructor, attr + UPPER_HEIGHT);
},
addPointsGetterSetter: function(constructor, attr) {
this.addPointsGetter(constructor, attr);
this.addPointsSetter(constructor, attr);
this.addPointAdder(constructor, attr);
this.addOverloadedGetterSetter(constructor, attr);
},
addRotationGetterSetter: function(constructor, attr, def) {
this.addRotationGetter(constructor, attr, def);
this.addRotationSetter(constructor, attr);
this.addOverloadedGetterSetter(constructor, attr);
this.addOverloadedGetterSetter(constructor, attr + DEG);
},
addColorGetterSetter: function(constructor, attr) {
this.addGetter(constructor, attr);
this.addSetter(constructor, attr);
this.addOverloadedGetterSetter(constructor, attr);
// component getters
this.addColorRGBGetter(constructor, attr);
@ -96,6 +110,11 @@
this.addColorComponentSetter(constructor, attr, R);
this.addColorComponentSetter(constructor, attr, G);
this.addColorComponentSetter(constructor, attr, B);
this.addOverloadedGetterSetter(constructor, attr + RGB);
this.addOverloadedGetterSetter(constructor, attr + UPPER_R);
this.addOverloadedGetterSetter(constructor, attr + UPPER_G);
this.addOverloadedGetterSetter(constructor, attr + UPPER_B);
},
// getter adders
@ -276,8 +295,7 @@
};
},
addRotationSetter: function(constructor, attr) {
var that = this,
method = SET + Kinetic.Util._capitalize(attr);
var method = SET + Kinetic.Util._capitalize(attr);
// radians
constructor.prototype[method] = function(val) {
@ -289,6 +307,24 @@
this._setAttr(attr, Kinetic.Util._degToRad(deg));
return this;
};
},
addOverloadedGetterSetter: function(constructor, attr) {
var that = this,
capitalizedAttr = Kinetic.Util._capitalize(attr),
setter = SET + capitalizedAttr,
getter = GET + capitalizedAttr;
constructor.prototype[attr] = function() {
// setting
if (arguments.length) {
this[setter](arguments[0]);
return this;
}
// getting
else {
return this[getter]();
}
}
}
};
})();

View File

@ -1488,6 +1488,7 @@
*/
Kinetic.Factory.addGetter(Kinetic.Node, 'name');
Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node, 'name');
/**
* get name
@ -1498,6 +1499,7 @@
*/
Kinetic.Factory.addGetter(Kinetic.Node, 'id');
Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node, 'id');
/**
* get id
@ -1726,6 +1728,7 @@
*/
Kinetic.Factory.addSetter(Kinetic.Node, 'width', 0);
Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node, 'width');
/**
* set width
@ -1737,6 +1740,7 @@
*/
Kinetic.Factory.addSetter(Kinetic.Node, 'height', 0);
Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node, 'height');
/**
* set height

View File

@ -43,8 +43,6 @@
// call super constructor
Kinetic.Node.call(this, config);
this._setDrawFuncs();
this.on('shadowColorChange.kinetic shadowBlurChange.kinetic shadowOffsetChange.kinetic shadowOpacityChange.kinetic shadowEnabledChanged.kinetic', _clearHasShadowCache);
},
hasChildren: function() {
@ -301,14 +299,6 @@
context.restore();
}
return this;
},
_setDrawFuncs: function() {
if(!this.attrs.drawFunc && this.drawFunc) {
this.setDrawFunc(this.drawFunc);
}
if(!this.attrs.drawHitFunc && this.drawHitFunc) {
this.setDrawHitFunc(this.drawHitFunc);
}
}
});
Kinetic.Util.extend(Kinetic.Shape, Kinetic.Node);

View File

@ -174,8 +174,9 @@
___init: function(config) {
Kinetic.Shape.call(this, config);
this.className = 'Tag';
this.setDrawFunc(this._drawFunc);
},
drawFunc: function(context) {
_drawFunc: function(context) {
var width = this.getWidth(),
height = this.getHeight(),
pointerDirection = this.getPointerDirection(),

View File

@ -35,8 +35,10 @@
this.on('dataChange.kinetic', function () {
that.dataArray = Kinetic.Path.parsePathData(this.getData());
});
this.setDrawFunc(this._drawFunc);
},
drawFunc: function (context) {
_drawFunc: function (context) {
var ca = this.dataArray,
closedPath = false;

View File

@ -29,8 +29,9 @@
// call super constructor
Kinetic.Shape.call(this, config);
this.className = 'RegularPolygon';
this.setDrawFunc(this._drawFunc);
},
drawFunc: function(context) {
_drawFunc: function(context) {
var sides = this.attrs.sides,
radius = this.attrs.radius,
n, x, y;

View File

@ -31,8 +31,9 @@
// call super constructor
Kinetic.Shape.call(this, config);
this.className = 'Star';
this.setDrawFunc(this._drawFunc);
},
drawFunc: function(context) {
_drawFunc: function(context) {
var _context = context._context,
innerRadius = this.attrs.innerRadius,
outerRadius = this.attrs.outerRadius,

View File

@ -65,8 +65,9 @@
// update text data for certain attr changes
this.on('textChange.kinetic textStroke.kinetic textStrokeWidth.kinetic', that._setTextData);
that._setTextData();
this.setDrawFunc(this._drawFunc);
},
drawFunc: function(context) {
_drawFunc: function(context) {
context.setAttr('font', this._getContextFont());
context.setAttr('textBaseline', 'middle');
context.setAttr('textAlign', 'left');

View File

@ -32,8 +32,9 @@
// call super constructor
Kinetic.Shape.call(this, config);
this.className = 'Arc';
this.setDrawFunc(this._drawFunc);
},
drawFunc: function(context) {
_drawFunc: function(context) {
context.beginPath();
context.arc(0, 0, this.getOuterRadius(), 0, this.getAngle(), this.getClockwise());
context.arc(0, 0, this.getInnerRadius(), this.getAngle(), 0, !this.getClockwise());

View File

@ -40,8 +40,9 @@
// call super constructor
Kinetic.Shape.call(this, config);
this.className = CIRCLE;
this.setDrawFunc(this._drawFunc);
},
drawFunc: function(context) {
_drawFunc: function(context) {
context.beginPath();
context.arc(0, 0, this.getRadius(), 0, PIx2, false);
context.closePath();

View File

@ -21,8 +21,9 @@
// call super constructor
Kinetic.Shape.call(this, config);
this.className = ELLIPSE;
this.setDrawFunc(this._drawFunc);
},
drawFunc: function(context) {
_drawFunc: function(context) {
var r = this.getRadius();
context.beginPath();

View File

@ -36,11 +36,13 @@
// call super constructor
Kinetic.Shape.call(this, config);
this.className = IMAGE;
this.setDrawFunc(this._drawFunc);
this.setDrawHitFunc(this._drawHitFunc);
},
_useBufferCanvas: function() {
return (this.hasShadow() || this.getAbsoluteOpacity() !== 1) && this.hasStroke();
},
drawFunc: function(context) {
_drawFunc: function(context) {
var width = this.getWidth(),
height = this.getHeight(),
crop, cropWidth, cropHeight,
@ -85,7 +87,7 @@
context.drawImage.apply(context, params);
}
},
drawHitFunc: function(context) {
_drawHitFunc: function(context) {
var width = this.getWidth(),
height = this.getHeight(),
imageHitRegion = this.imageHitRegion;

View File

@ -34,8 +34,10 @@
this.on('pointsChange.kinetic tensionChange.kinetic closedChange.kinetic', function() {
this._clearCache('tensionPoints');
});
this.setDrawFunc(this._drawFunc);
},
drawFunc: function(context) {
_drawFunc: function(context) {
var points = this.getPoints(),
length = points.length,
tension = this.getTension(),

View File

@ -25,8 +25,9 @@
___init: function(config) {
Kinetic.Shape.call(this, config);
this.className = 'Rect';
this.setDrawFunc(this._drawFunc);
},
drawFunc: function(context) {
_drawFunc: function(context) {
var cornerRadius = this.getCornerRadius(),
width = this.getWidth(),
height = this.getHeight();

View File

@ -77,13 +77,15 @@
this.className = 'Sprite';
this.anim = new Kinetic.Animation();
var that = this;
this.on('animationChange.kinetic', function() {
// reset index when animation changes
that.setIndex(0);
this.setIndex(0);
});
this.setDrawFunc(this._drawFunc);
this.setDrawHitFunc(this._drawHitFunc);
},
drawFunc: function(context) {
_drawFunc: function(context) {
var anim = this.getAnimation(),
index = this.getIndex(),
f = this.getAnimations()[anim][index],
@ -93,7 +95,7 @@
context.drawImage(image, f.x, f.y, f.width, f.height, 0, 0, f.width, f.height);
}
},
drawHitFunc: function(context) {
_drawHitFunc: function(context) {
var anim = this.getAnimation(),
index = this.getIndex(),
f = this.getAnimations()[anim][index];

View File

@ -86,8 +86,10 @@
}
this._setTextData();
this.setDrawFunc(this._drawFunc);
this.setDrawHitFunc(this._drawHitFunc);
},
drawFunc: function(context) {
_drawFunc: function(context) {
var p = this.getPadding(),
textHeight = this.getTextHeight(),
lineHeightPx = this.getLineHeight() * textHeight,
@ -125,7 +127,7 @@
}
context.restore();
},
drawHitFunc: function(context) {
_drawHitFunc: function(context) {
var width = this.getWidth(),
height = this.getHeight();

View File

@ -30,8 +30,9 @@
// call super constructor
Kinetic.Shape.call(this, config);
this.className = 'Wedge';
this.setDrawFunc(this._drawFunc);
},
drawFunc: function(context) {
_drawFunc: function(context) {
context.beginPath();
context.arc(0, 0, this.getRadius(), 0, this.getAngle(), this.getClockwise());
context.lineTo(0, 0);

View File

@ -2805,4 +2805,90 @@ suite('Node', function() {
assert.equal(circle.isVisible(), true);
});
test('overloaders', function(){
var stage = addStage();
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
var circle = new Kinetic.Circle({
x: 100,
y: 100,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
draggable: true
});
group.add(circle);
layer.add(group);
stage.add(layer);
circle.x(1);
assert.equal(circle.x(), 1);
circle.y(2);
assert.equal(circle.y(), 2);
circle.opacity(0.5);
assert.equal(circle.opacity(), 0.5);
circle.name('foo');
assert.equal(circle.name(), 'foo');
circle.id('bar');
assert.equal(circle.id(), 'bar');
circle.rotation(2);
assert.equal(circle.rotation(), 2);
circle.rotationDeg(3);
assert.equal(Math.round(circle.rotationDeg()), 3);
circle.scale({x: 2, y: 2});
assert.equal(circle.scale().x, 2);
assert.equal(circle.scale().y, 2);
circle.scaleX(5);
assert.equal(circle.scaleX(), 5);
circle.scaleY(8);
assert.equal(circle.scaleY(), 8);
circle.skew({x: 2, y: 2});
assert.equal(circle.skew().x, 2);
assert.equal(circle.skew().y, 2);
circle.skewX(5);
assert.equal(circle.skewX(), 5);
circle.skewY(8);
assert.equal(circle.skewY(), 8);
circle.offset({x: 2, y: 2});
assert.equal(circle.offset().x, 2);
assert.equal(circle.offset().y, 2);
circle.offsetX(5);
assert.equal(circle.offsetX(), 5);
circle.offsetY(8);
assert.equal(circle.offsetY(), 8);
circle.width(23);
assert.equal(circle.width(), 23);
circle.height(11);
assert.equal(circle.height(), 11);
circle.listening(false);
assert.equal(circle.listening(), false);
circle.visible(false);
assert.equal(circle.visible(), false);
circle.transformsEnabled(false);
assert.equal(circle.transformsEnabled(), false);
});
});