From 47364c63cd142365c328e7c7f625e230755fe812 Mon Sep 17 00:00:00 2001 From: Eric Rowell Date: Fri, 17 May 2013 11:46:06 -0700 Subject: [PATCH] deprecated getNodeType(), added className property to label, and added lots of Node doc examples --- src/Node.js | 101 +++++++++++++++++++++++----- src/plugins/Label.js | 2 + tests/js/unit/nodeTests.js | 35 ---------- tests/js/unit/plugins/labelTests.js | 3 +- 4 files changed, 88 insertions(+), 53 deletions(-) diff --git a/src/Node.js b/src/Node.js index 364b75d4..1d350fe0 100644 --- a/src/Node.js +++ b/src/Node.js @@ -51,27 +51,27 @@ * @param {String} typesStr e.g. 'click', 'mousedown touchstart', 'mousedown.foo touchstart.foo' * @param {Function} handler The handler function is passed an event object * @example - * // add click listener + * // add click listener
* node.on('click', function() {
* console.log('you clicked me!');
* });

* - * // get the target node + * // get the target node
* node.on('click', function(evt) {
* console.log(evt.targetNode);
* });

* - * // stop event propagation + * // stop event propagation
* node.on('click', function(evt) {
- * evt.cancelBubble = true; + * evt.cancelBubble = true;
* });

* - * // bind multiple listeners + * // bind multiple listeners
* node.on('click touchstart', function() {
* console.log('you clicked/touched me!');
* });

* - * // namespace listener + * // namespace listener
* node.on('click.foo', function() {
* console.log('you clicked/touched me!');
* }); @@ -114,6 +114,15 @@ * @method * @memberof Kinetic.Node.prototype * @param {String} typesStr e.g. 'click', 'mousedown touchstart', '.foobar' + * @example + * // remove listener
+ * node.off('click');

+ * + * // remove multiple listener
+ * node.off('click touchstart');

+ * + * // remove listener by name
+ * node.off('click.foo'); */ off: function(typesStr) { var types = typesStr.split(SPACE), @@ -148,6 +157,8 @@ * remove self from parent, but don't destroy * @method * @memberof Kinetic.Node.prototype + * @example + * node.remove(); */ remove: function() { var parent = this.getParent(); @@ -162,6 +173,8 @@ * remove and destroy self * @method * @memberof Kinetic.Node.prototype + * @example + * node.destroy(); */ destroy: function() { var parent = this.getParent(), @@ -187,6 +200,8 @@ * @method * @memberof Kinetic.Node.prototype * @param {String} attr + * @example + * var attr = node.getAttr('x'); */ getAttr: function(attr) { var method = GET + Kinetic.Util._capitalize(attr); @@ -204,6 +219,8 @@ * @memberof Kinetic.Node.prototype * @param {String} attr * #param {*} val + * @example + * node.setAttr('x', 5); */ setAttr: function() { var args = Array.prototype.slice.call(arguments), @@ -221,7 +238,7 @@ } }, /** - * get attrs + * get attrs object literal * @method * @memberof Kinetic.Node.prototype */ @@ -235,10 +252,15 @@ }, /** - * set attrs + * set multiple attrs at once using an object literal * @method * @memberof Kinetic.Node.prototype * @param {Object} config object containing key value pairs + * @example + * node.setAttrs({
+ * x: 5,
+ * fill: 'red'
+ * });
*/ setAttrs: function(config) { var key, method; @@ -385,6 +407,20 @@ * @memberof Kinetic.Node.prototype * @param {Number} x * @param {Number} y + * @example + * // set x and y
+ * node.setPosition(5, 10);

+ * + * // set x only
+ * node.setPosition({
+ * x: 5
+ * });
+ * + * // set x and y using an array
+ * node.setPosition([5, 10]);

+ * + * // set both x and y to 5
+ * node.setPosition(5); */ setPosition: function() { var pos = Kinetic.Util._getXY([].slice.call(arguments)); @@ -451,6 +487,14 @@ * @memberof Kinetic.Node.prototype * @param {Number} x * @param {Number} y + * @example + * // move node in x direction by 1px and y direction by 2px
+ * node.move(1, 2);

+ * + * // move node in x direction by 1px
+ * node.move({
+ * x: 1
+ * }) */ move: function() { var pos = Kinetic.Util._getXY([].slice.call(arguments)), @@ -588,6 +632,9 @@ * @method * @memberof Kinetic.Node.prototype * @param {Container} newContainer + * @example + * // move node from current layer into layer2
+ * node.moveTo(layer2); */ moveTo: function(newContainer) { Kinetic.Node.prototype.remove.call(this); @@ -664,6 +711,20 @@ * @param {EventObject} 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. + * @example + * // manually fire click event
+ * node.fire('click');

+ * + * // fire custom event
+ * node.fire('foo');

+ * + * // fire custom event with custom event object
+ * node.fire('foo', {
+ * bar: 10
+ * });
+ * + * // fire click event that doesn't bubble
+ * node.fire('click', null, false); */ fire: function(eventType, evt, bubble) { // bubble @@ -743,6 +804,14 @@ * @method * @memberof Kinetic.Node.prototype * @param {Object} attrs override attrs + * @example + * // clone a rectangle
+ * var rectClone = rect.clone();

+ * + * // clone a rectangle, but override the x position
+ * var rectClone = rect.clone({
+ * x: 5
+ * }); */ clone: function(obj) { // instantiate new node @@ -834,6 +903,12 @@ * @param {Number} [config.quality] jpeg quality. If using an "image/jpeg" mimeType, * you can specify the quality from 0 to 1, where 0 is very poor quality and 1 * is very high quality + * @example + * var image = node.toImage({
+ * callback: function(img) {
+ * // do stuff with img
+ * }
+ * }) */ toImage: function(config) { Kinetic.Util._getImage(this.toDataURL(config), function(img) { @@ -886,7 +961,7 @@ * @memberof Kinetic.Node.prototype */ getClassName: function() { - return this.shapeType || this.nodeType; + return this.className || this.shapeType || this.nodeType; }, /** * get the node type, which may return Stage, Layer, Group, or Node @@ -991,14 +1066,6 @@ go._addName(this, name); this._setAttr(NAME, name); }, - /** - * get node type. Returns 'Stage', 'Layer', 'Group', or 'Shape' - * @method - * @memberof Kinetic.Node.prototype - */ - getNodeType: function() { - return this.nodeType; - }, _setAttr: function(key, val) { var oldVal; if(val !== undefined) { diff --git a/src/plugins/Label.js b/src/plugins/Label.js index 721dd863..5d7266f7 100644 --- a/src/plugins/Label.js +++ b/src/plugins/Label.js @@ -7,6 +7,7 @@ RIGHT = 'right', DOWN = 'down', LEFT = 'left', + LABEL = 'Label', // cached variables attrChangeListLen = ATTR_CHANGE_LIST.length; @@ -43,6 +44,7 @@ this.innerGroup = new Kinetic.Group(); this.createAttrs(); + this.className = LABEL; Kinetic.Group.call(this, config); text = new Kinetic.Text(config.text); this.setText(text); diff --git a/tests/js/unit/nodeTests.js b/tests/js/unit/nodeTests.js index 5314f928..902a014c 100644 --- a/tests/js/unit/nodeTests.js +++ b/tests/js/unit/nodeTests.js @@ -2825,40 +2825,5 @@ Test.Modules.NODE = { layer.draw(); testDataUrl(layer.toDataURL(), 'cleared', 'group is still visible'); - }, - 'test getNodeType()': function(containerId) { - var stage = new Kinetic.Stage({ - container: containerId, - width: 578, - height: 200 - }); - var layer = new Kinetic.Layer(); - var group = new Kinetic.Group(); - - var rect = new Kinetic.Rect({ - x: 200, - y: 100, - width: 100, - height: 50, - fill: 'red', - stroke: 'black', - strokeWidth: 4, - draggable: true, - rotationDeg: 60, - scale: { - x: 2, - y: 1 - } - }); - - group.add(rect); - layer.add(group); - stage.add(layer); - - test(stage.getNodeType() === 'Stage', 'node type should be Stage'); - test(layer.getNodeType() === 'Layer', 'node type should be Layer'); - test(group.getNodeType() === 'Group', 'node type should be Group'); - test(rect.getNodeType() === 'Shape', 'node type should be Shape'); - } }; diff --git a/tests/js/unit/plugins/labelTests.js b/tests/js/unit/plugins/labelTests.js index 5e63909d..077741db 100644 --- a/tests/js/unit/plugins/labelTests.js +++ b/tests/js/unit/plugins/labelTests.js @@ -52,6 +52,7 @@ Test.Modules.LABEL = { layer.draw(); - test(label.getNodeType() === 'Group', 'label should be a group'); + test(label.getType() === 'Group', 'label should be a group'); + test(label.getClassName() === 'Label', 'label class name should be Label'); } };