From 79701fcca0ef805de27c3f5a4365e50bf3e4ccca Mon Sep 17 00:00:00 2001 From: Eric Rowell Date: Fri, 10 Jan 2014 22:09:22 -0800 Subject: [PATCH] reverted center attr back to offset. I think it's more confusing --- src/Node.js | 70 ++++++++++---------- test/unit/Node-test.js | 116 ++++++++++++++++----------------- test/unit/filters/Blur-test.js | 2 +- test/unit/shapes/Image-test.js | 14 ++-- test/unit/shapes/Text-test.js | 6 +- 5 files changed, 104 insertions(+), 104 deletions(-) diff --git a/src/Node.js b/src/Node.js index abb05730..7f526dd4 100644 --- a/src/Node.js +++ b/src/Node.js @@ -31,8 +31,8 @@ 'skewXChange.kinetic', 'skewYChange.kinetic', 'rotationChange.kinetic', - 'centerXChange.kinetic', - 'centerYChange.kinetic', + 'offsetXChange.kinetic', + 'offsetYChange.kinetic', 'transformsEnabledChange.kinetic' ].join(SPACE); @@ -702,11 +702,11 @@ getAbsolutePosition: function() { var absoluteMatrix = this.getAbsoluteTransform().getMatrix(), absoluteTransform = new Kinetic.Transform(), - center = this.center(); + offset = this.offset(); // clone the matrix array absoluteTransform.m = absoluteMatrix.slice(); - absoluteTransform.translate(center.x, center.y); + absoluteTransform.translate(offset.x, offset.y); return absoluteTransform.getTranslation(); }, @@ -761,8 +761,8 @@ rotation: this.getRotation(), scaleX: this.getScaleX(), scaleY: this.getScaleY(), - centerX: this.getCenterX(), - centerY: this.getCenterY(), + offsetX: this.getOffsetX(), + offsetY: this.getOffsetY(), skewX: this.getSkewX(), skewY: this.getSkewY() }; @@ -772,8 +772,8 @@ this.attrs.rotation = 0; this.attrs.scaleX = 1; this.attrs.scaleY = 1; - this.attrs.centerX = 0; - this.attrs.centerY = 0; + this.attrs.offsetX = 0; + this.attrs.offsetY = 0; this.attrs.skewX = 0; this.attrs.skewY = 0; @@ -1108,8 +1108,8 @@ scaleY = this.getScaleY(), skewX = this.getSkewX(), skewY = this.getSkewY(), - centerX = this.getCenterX(), - centerY = this.getCenterY(); + offsetX = this.getOffsetX(), + offsetY = this.getOffsetY(); if(x !== 0 || y !== 0) { m.translate(x, y); @@ -1123,8 +1123,8 @@ if(scaleX !== 1 || scaleY !== 1) { m.scale(scaleX, scaleY); } - if(centerX !== 0 || centerY !== 0) { - m.translate(-1 * centerX, -1 * centerY); + if(offsetX !== 0 || offsetY !== 0) { + m.translate(-1 * offsetX, -1 * offsetY); } return m; @@ -1750,58 +1750,58 @@ * node.skewY(3); */ - Kinetic.Factory.addComponentsGetterSetter(Kinetic.Node, 'center', ['x', 'y']); + Kinetic.Factory.addComponentsGetterSetter(Kinetic.Node, 'offset', ['x', 'y']); /** - * get/set center. A node's center defines the position and rotation point + * get/set offset. Offsets the default position and rotation point * @method * @memberof Kinetic.Node.prototype - * @param {Object} center - * @param {Number} center.x - * @param {Number} center.y + * @param {Object} offset + * @param {Number} offset.x + * @param {Number} offset.y * @returns {Object} * @example - * // get center
- * var center = node.center();

+ * // get offset
+ * var offset = node.offset();

* - * // set center
- * node.center({
+ * // set offset
+ * node.offset({
* x: 20
* y: 10
* }); */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'centerX', 0); + Kinetic.Factory.addGetterSetter(Kinetic.Node, 'offsetX', 0); /** - * get/set center x - * @name centerX + * get/set offset x + * @name offsetX * @memberof Kinetic.Node.prototype * @param {Number} x * @returns {Number} * @example - * // get center x
- * var centerX = node.centerX();

+ * // get offset x
+ * var offsetX = node.offsetX();

* - * // set center x
- * node.centerX(3); + * // set offset x
+ * node.offsetX(3); */ - Kinetic.Factory.addGetterSetter(Kinetic.Node, 'centerY', 0); + Kinetic.Factory.addGetterSetter(Kinetic.Node, 'offsetY', 0); /** - * get/set center y - * @name centerY + * get/set offset y + * @name offsetY * @method * @memberof Kinetic.Node.prototype * @param {Number} y * @returns {Number} * @example - * // get center y
- * var centerY = node.centerY();

+ * // get offset y
+ * var offsetY = node.offsetY();

* - * // set center y
- * node.centerY(3); + * // set offset y
+ * node.offsetY(3); */ Kinetic.Factory.addSetter(Kinetic.Node, 'width', 0); diff --git a/test/unit/Node-test.js b/test/unit/Node-test.js index 6497e411..2ef315dd 100644 --- a/test/unit/Node-test.js +++ b/test/unit/Node-test.js @@ -340,11 +340,11 @@ suite('Node', function() { }); // ====================================================== - test('test center attr change', function() { + test('test offset attr change', function() { /* * the premise of this test to make sure that only * root level attributes trigger an attr change event. - * for this test, we have two center properties. one + * for this test, we have two offset properties. one * is in the root level, and the other is inside the shadow * object */ @@ -356,7 +356,7 @@ suite('Node', function() { width: 200, height: 50, fill: 'blue', - center: {x:10, y:10}, + offset: {x:10, y:10}, shadowColor: 'black', shadowOffset: {x:20, y:20} }); @@ -364,16 +364,16 @@ suite('Node', function() { layer.add(rect); stage.add(layer); - var centerChange = false; + var offsetChange = false; var shadowOffsetChange = false; - rect.on('centerChange', function(val) { - centerChange = true; + rect.on('offsetChange', function(val) { + offsetChange = true; }); - rect.center({x:1, y:2}); + rect.offset({x:1, y:2}); - assert.equal(centerChange, true); + assert.equal(offsetChange, true); }); // ====================================================== @@ -410,8 +410,8 @@ suite('Node', function() { width: 200, height: 50, fill: 'blue', - centerX: 10, - centerY: 10, + offsetX: 10, + offsetY: 10, shadowColor: 'black', shadowOffsetX: 20, shadowOffsetY: 20, @@ -480,8 +480,8 @@ suite('Node', function() { width: 200, height: 50, fill: 'red', - centerX: 10, - centerY: 10, + offsetX: 10, + offsetY: 10, shadowColor: 'black', shadowOffset: [20, 20], name: 'myRect', @@ -961,7 +961,7 @@ suite('Node', function() { fill: 'green', stroke: 'black', strokeWidth: 4, - center: { + offset: { x: 0, y: 0 }, @@ -1027,7 +1027,7 @@ suite('Node', function() { }); // ====================================================== - test('set center offset after instantiation', function() { + test('set offset offset after instantiation', function() { var stage = addStage(); var layer = new Kinetic.Layer(); var rect = new Kinetic.Rect({ @@ -1036,7 +1036,7 @@ suite('Node', function() { width: 100, height: 50, stroke: 'blue', - center: { + offset: { x: 40, y: 20 } @@ -1045,19 +1045,19 @@ suite('Node', function() { layer.add(rect); stage.add(layer); - assert.equal(rect.centerX(), 40); - assert.equal(rect.centerY(), 20); + assert.equal(rect.offsetX(), 40); + assert.equal(rect.offsetY(), 20); - assert.equal(rect.center().x, 40); - assert.equal(rect.center().y, 20); + assert.equal(rect.offset().x, 40); + assert.equal(rect.offset().y, 20); - rect.center({x:80, y:40}); + rect.offset({x:80, y:40}); - assert.equal(rect.centerX(), 80); - assert.equal(rect.centerY(), 40); + assert.equal(rect.offsetX(), 80); + assert.equal(rect.offsetY(), 40); - assert.equal(rect.center().x, 80); - assert.equal(rect.center().y, 40); + assert.equal(rect.offset().x, 80); + assert.equal(rect.offset().y, 40); }); @@ -1150,7 +1150,7 @@ suite('Node', function() { }); // ====================================================== - test('test center', function() { + test('test offset', function() { var stage = addStage(); var layer = new Kinetic.Layer(); var rect = new Kinetic.Rect({ @@ -1164,28 +1164,28 @@ suite('Node', function() { layer.add(rect); stage.add(layer); - rect.center({x:1, y: 2}); - assert.equal(rect.center().x, 1); - assert.equal(rect.center().y, 2); + rect.offset({x:1, y: 2}); + assert.equal(rect.offset().x, 1); + assert.equal(rect.offset().y, 2); - rect.center({x:3, y:4}); - assert.equal(rect.center().x, 3); - assert.equal(rect.center().y, 4); + rect.offset({x:3, y:4}); + assert.equal(rect.offset().x, 3); + assert.equal(rect.offset().y, 4); - rect.center({ + rect.offset({ x: 5, y: 6 }); - assert.equal(rect.center().x, 5); - assert.equal(rect.center().y, 6); + assert.equal(rect.offset().x, 5); + assert.equal(rect.offset().y, 6); - rect.centerX(7); - assert.equal(rect.center().x, 7); - assert.equal(rect.center().y, 6); + rect.offsetX(7); + assert.equal(rect.offset().x, 7); + assert.equal(rect.offset().y, 6); - rect.centerY(8); - assert.equal(rect.center().x, 7); - assert.equal(rect.center().y, 8); + rect.offsetY(8); + assert.equal(rect.offset().x, 7); + assert.equal(rect.offset().y, 8); }); @@ -1451,8 +1451,8 @@ suite('Node', function() { stroke: 'black', strokeWidth: 4, draggable: true, - centerX: 30, - centerY: 30 + offsetX: 30, + offsetY: 30 //rotationDeg: 60 //rotationDeg: Math.PI / 3 }); @@ -1469,7 +1469,7 @@ suite('Node', function() { }); // ====================================================== - test('test getPosition and getAbsolutePosition for transformed parent with center offset', function() { + test('test getPosition and getAbsolutePosition for transformed parent with offset offset', function() { var side = 100; var diagonal = Math.sqrt(side * side * 2); @@ -1482,7 +1482,7 @@ suite('Node', function() { name: 'groupName', id: 'groupId', rotation: 45, - center: {x:side / 2, y:side / 2}, + offset: {x:side / 2, y:side / 2}, x: diagonal / 2, y: diagonal / 2 }); @@ -1533,7 +1533,7 @@ suite('Node', function() { x: 2, y: 1 }, - center: { + offset: { x: 50, y: 25 } @@ -2155,7 +2155,7 @@ suite('Node', function() { x: 200, y: 60, image: imageObj, - center: { + offset: { x: 50, y: imageObj.height / 2 }, @@ -2164,7 +2164,7 @@ suite('Node', function() { layer.add(darth); stage.add(layer); - var json = '{"attrs":{"width":578,"height":200},"className":"Stage","children":[{"attrs":{},"className":"Layer","children":[{"attrs":{"x":200,"y":60,"centerX":50,"centerY":150,"id":"darth"},"className":"Image"}]}]}'; + 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"}]}]}'; assert.equal(stage.toJSON(), json); @@ -2178,7 +2178,7 @@ suite('Node', function() { var imageObj = new Image(); 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,"centerX":50,"centerY":150,"id":"darth"},"className":"Image"}]}]}'; + 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); assert.equal(stage.toJSON(), json); @@ -2776,15 +2776,15 @@ suite('Node', function() { circle.skewY(8); assert.equal(circle.skewY(), 8); - circle.center({x: 2, y: 2}); - assert.equal(circle.center().x, 2); - assert.equal(circle.center().y, 2); + circle.offset({x: 2, y: 2}); + assert.equal(circle.offset().x, 2); + assert.equal(circle.offset().y, 2); - circle.centerX(5); - assert.equal(circle.centerX(), 5); + circle.offsetX(5); + assert.equal(circle.offsetX(), 5); - circle.centerY(8); - assert.equal(circle.centerY(), 8); + circle.offsetY(8); + assert.equal(circle.offsetY(), 8); circle.width(23); assert.equal(circle.width(), 23); @@ -2832,7 +2832,7 @@ suite('Node', function() { y: -74, width: 148, height: 148 - }).center({ + }).offset({ x: 74, y: 74 }); @@ -2885,7 +2885,7 @@ suite('Node', function() { width: 148, height: 148, showBorder: true - }).center({ + }).offset({ x: 74, y: 74 }); @@ -3036,7 +3036,7 @@ suite('Node', function() { height: 208 }); - group.centerX(104).centerY(104); + group.offsetX(104).offsetY(104); //console.log('--after cache'); //console.log(group.getAbsoluteTransform().getTranslation()) diff --git a/test/unit/filters/Blur-test.js b/test/unit/filters/Blur-test.js index 3bf3e519..eb5be9c7 100644 --- a/test/unit/filters/Blur-test.js +++ b/test/unit/filters/Blur-test.js @@ -95,7 +95,7 @@ suite('Blur', function() { height: 300 }); - group.center({ + group.offset({ x: 150, y: 150 }); diff --git a/test/unit/shapes/Image-test.js b/test/unit/shapes/Image-test.js index 07740d87..1024e776 100644 --- a/test/unit/shapes/Image-test.js +++ b/test/unit/shapes/Image-test.js @@ -13,7 +13,7 @@ suite('Image', function(){ image: imageObj, width: 100, height: 100, - center: {x: 50, y: 30}, + offset: {x: 50, y: 30}, crop: {x: 135, y: 7, width: 167, height: 134}, draggable: true }); @@ -31,8 +31,8 @@ suite('Image', function(){ assert.equal(darth.getY(), 60); assert.equal(darth.getWidth(), 100); assert.equal(darth.getHeight(), 100); - assert.equal(darth.center().x, 50); - assert.equal(darth.center().y, 30); + assert.equal(darth.offset().x, 50); + assert.equal(darth.offset().y, 30); assert.equal(Kinetic.Util._isElement(darth.getImage()), true); var crop = null; @@ -89,8 +89,8 @@ suite('Image', function(){ image: imageObj, width: 100, height: 100, - centerX: 50, - centerY: 30, + offsetX: 50, + offsetY: 30, crop: {x: 135, y: 7, width: 167, height: 134}, draggable: true }); @@ -254,7 +254,7 @@ suite('Image', function(){ image: imageObj, width: 100, height: 100, - center: {x: 50, y:30}, + offset: {x: 50, y:30}, draggable: true, opacity: 0.5, shadowColor: 'black', @@ -289,7 +289,7 @@ suite('Image', function(){ image: imageObj, width: 100, height: 100, - center: {x: 50, y: 30}, + offset: {x: 50, y: 30}, draggable: true, opacity: 0.5, shadowColor: 'black', diff --git a/test/unit/shapes/Text-test.js b/test/unit/shapes/Text-test.js index a530e629..ce4fe929 100644 --- a/test/unit/shapes/Text-test.js +++ b/test/unit/shapes/Text-test.js @@ -44,8 +44,8 @@ suite('Text', function(){ }); // center text box - rect.center(text.getWidth() / 2, text.getHeight() / 2); - text.center(text.getWidth() / 2, text.getHeight() / 2); + rect.offset(text.getWidth() / 2, text.getHeight() / 2); + text.offset(text.getWidth() / 2, text.getHeight() / 2); group.add(rect); group.add(text); @@ -82,7 +82,7 @@ suite('Text', function(){ }); // center text box - text.center(text.getWidth() / 2, text.getHeight() / 2); + text.offset(text.getWidth() / 2, text.getHeight() / 2); layer.add(text); stage.add(layer);