diff --git a/src/Node.js b/src/Node.js index b582f4a4..ddff7016 100644 --- a/src/Node.js +++ b/src/Node.js @@ -51,8 +51,29 @@ * @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 * node.on('click', function() {
* console.log('you clicked me!');
+ * });

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

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

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

+ * + * // namespace listener + * node.on('click.foo', function() {
+ * console.log('you clicked/touched me!');
* }); */ on: function(typesStr, handler) { @@ -124,7 +145,7 @@ return this; }, /** - * remove child from container, but don't destroy it + * remove self from parent, but don't destroy * @method * @memberof Kinetic.Node.prototype */ @@ -138,7 +159,7 @@ delete this.parent; }, /** - * remove and destroy node + * remove and destroy self * @method * @memberof Kinetic.Node.prototype */ @@ -859,6 +880,22 @@ getHeight: function() { return this.attrs.height || 0; }, + /** + * get class name, which may return Stage, Layer, Group, or shape class names like Rect, Circle, Text, etc. + * @method + * @memberof Kinetic.Node.prototype + */ + getClassName: function() { + return this.shapeType || this.nodeType; + }, + /** + * get the node type, which may return Stage, Layer, Group, or Node + * @method + * @memberof Kinetic.Node.prototype + */ + getType: function() { + return this.nodeType; + }, _get: function(selector) { return this.nodeType === selector ? [this] : []; }, diff --git a/tests/js/unit/nodeTests.js b/tests/js/unit/nodeTests.js index 2d80ff8b..5314f928 100644 --- a/tests/js/unit/nodeTests.js +++ b/tests/js/unit/nodeTests.js @@ -1,4 +1,37 @@ Test.Modules.NODE = { + 'getType and getClassName': function(containerId) { + var stage = new Kinetic.Stage({ + container: containerId, + width: 578, + height: 200 + }); + 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 + }); + + stage.add(layer.add(group.add(circle))); + + console.log(stage.getType()); + + test(stage.getType() === 'Stage', 'stage type should be Stage'); + test(layer.getType() === 'Layer', 'layer type should be Layer'); + test(group.getType() === 'Group', 'group type should be Group'); + test(circle.getType() === 'Shape', 'circle type should be Shape'); + + test(stage.getClassName() === 'Stage', 'stage class name should be Stage'); + test(layer.getClassName() === 'Layer', 'layer class name should be Layer'); + test(group.getClassName() === 'Group', 'group class name should be Group'); + test(circle.getClassName() === 'Circle', 'circle class name should be Circle'); + + + }, 'setAttr': function(containerId) { var stage = new Kinetic.Stage({ container: containerId,