From 19672c2727a6d0e4867564dfbea7a91c5caaf9aa Mon Sep 17 00:00:00 2001 From: Matt Slocum Date: Sun, 24 Aug 2014 21:48:27 -0600 Subject: [PATCH 1/3] Allow nodes to have multiple names similar to css The name field of a shape or element currently only supports a single name, but the find selector mimics css which supports multiple class names per node. This enhancement allows the name field to also support multiple names. For example you could name a circle: 'red circle' and a square: 'red square', and now stage.find('.red') will return both elements, but stage.find('.square') will return just the square. --- src/Global.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/Global.js b/src/Global.js index 8ddc78e5..67a9ed5b 100644 --- a/src/Global.js +++ b/src/Global.js @@ -293,10 +293,15 @@ var Kinetic = {}; }, _addName: function(node, name) { if(name !== undefined) { - if(this.names[name] === undefined) { - this.names[name] = []; + var names = name.split(/\W+/g); + for(var n = 0; n < names.length; n++) { + if (names[n]) { + if(this.names[names[n]] === undefined) { + this.names[names[n]] = []; + } + this.names[names[n]].push(node); + } } - this.names[name].push(node); } }, _removeName: function(name, _id) { From 0a1289c645c8024bb71d6eec598174a2e670cdb8 Mon Sep 17 00:00:00 2001 From: Matt Slocum Date: Tue, 26 Aug 2014 22:07:43 -0600 Subject: [PATCH 2/3] Unit Tests :: added Kinetic._addName --- test/unit/Global-test.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/test/unit/Global-test.js b/test/unit/Global-test.js index d5323533..5919f366 100644 --- a/test/unit/Global-test.js +++ b/test/unit/Global-test.js @@ -5,6 +5,26 @@ suite('Global', function() { assert.equal(Kinetic.version, 'dev'); }); + // ====================================================== + test('_addName', function() { + Kinetic._addName("node1", "single"); + assert.equal(Kinetic.names.single[0], "node1"); + + Kinetic._addName("node2", "double item"); + assert.equal(Kinetic.names.double[0], "node2"); + assert.equal(Kinetic.names.item[0], "node2"); + + Kinetic._addName("node3", " extra spaces "); + assert.equal(Kinetic.names.extra[0], "node3"); + assert.equal(Kinetic.names.spaces[0], "node3"); + + Kinetic._addName("node4", "another item"); + assert.equal(Kinetic.names.another[0], "node4"); + assert.equal(Kinetic.names.item.length, 2); + assert.equal(Kinetic.names.item[0], "node2"); + assert.equal(Kinetic.names.item[1], "node4"); + }); + // ====================================================== test('getAngle()', function() { // test that default angleDeg is true From 9de8d2f806d6f29553c74cc87dc0423db3c1f04a Mon Sep 17 00:00:00 2001 From: Matt Slocum Date: Wed, 27 Aug 2014 04:47:13 +0000 Subject: [PATCH 3/3] KineticJS Unit Tests :: find with multiple names Added unit tests to find nodes by name that have multiple names --- test/unit/Container-test.js | 65 +++++++++++++++++++++++++++++++++++++ test/unit/Global-test.js | 20 ------------ 2 files changed, 65 insertions(+), 20 deletions(-) diff --git a/test/unit/Container-test.js b/test/unit/Container-test.js index 94d2ae58..75cc2390 100644 --- a/test/unit/Container-test.js +++ b/test/unit/Container-test.js @@ -764,6 +764,71 @@ suite('Container', function() { assert.equal(group.find('Circle').length, 1, 'gropu should have 1 circles'); }); + // ====================================================== + test('test find() selector by adding shapes with multiple names', function() { + var stage = addStage(); + var layer = new Kinetic.Layer({ + name: 'layerName', + id: 'layerId' + }); + var group = new Kinetic.Group({ + name: 'groupName', + id: 'groupId' + }); + var rect = new Kinetic.Rect({ + x: 200, + y: 20, + width: 100, + height: 50, + fill: 'red', + name: 'red rectangle', + id: 'rectId' + }); + var circle = new Kinetic.Circle({ + x: 50, + y: 50, + radius: 20, + fill: 'red', + name: 'red circle', + id: 'circleId' + }); + + group.add(rect); + group.add(circle); + layer.add(group); + stage.add(layer); + + assert.equal(stage.find('.rectangle')[0].attrs.id, 'rectId', 'problem with shape name selector'); + assert.equal(stage.find('#rectId')[0].attrs.id, 'rectId', 'problem with shape id selector'); + assert.equal(layer.find('.rectangle')[0].attrs.id, 'rectId', 'problem with shape name selector'); + assert.equal(layer.find('#rectId')[0].attrs.id, 'rectId', 'problem with shape id selector'); + assert.equal(group.find('.rectangle')[0].attrs.id, 'rectId', 'problem with shape name selector'); + assert.equal(group.find('#rectId')[0].attrs.id, 'rectId', 'problem with shape id selector'); + + assert.equal(stage.find('.circle')[0].attrs.id, 'circleId', 'problem with shape name selector'); + assert.equal(stage.find('#circleId')[0].attrs.id, 'circleId', 'problem with shape id selector'); + assert.equal(layer.find('.circle')[0].attrs.id, 'circleId', 'problem with shape name selector'); + assert.equal(layer.find('#circleId')[0].attrs.id, 'circleId', 'problem with shape id selector'); + assert.equal(group.find('.circle')[0].attrs.id, 'circleId', 'problem with shape name selector'); + assert.equal(group.find('#circleId')[0].attrs.id, 'circleId', 'problem with shape id selector'); + + assert.equal(stage.find('.red')[0].attrs.id, 'rectId', 'problem with shape name selector'); + assert.equal(stage.find('.red')[1].attrs.id, 'circleId', 'problem with shape name selector'); + assert.equal(layer.find('.red')[0].attrs.id, 'rectId', 'problem with shape name selector'); + assert.equal(layer.find('.red')[1].attrs.id, 'circleId', 'problem with shape name selector'); + assert.equal(group.find('.red')[0].attrs.id, 'rectId', 'problem with shape name selector'); + assert.equal(group.find('.red')[1].attrs.id, 'circleId', 'problem with shape name selector'); + + assert.equal(stage.find('.groupName')[0].attrs.id, 'groupId', 'problem with group name selector'); + assert.equal(stage.find('#groupId')[0].attrs.id, 'groupId', 'problem with group id selector'); + assert.equal(layer.find('.groupName')[0].attrs.id, 'groupId', 'problem with group name selector'); + assert.equal(layer.find('#groupId')[0].attrs.id, 'groupId', 'problem with group id selector'); + + assert.equal(stage.find('.layerName')[0].attrs.id, 'layerId', 'problem with layer name selector'); + assert.equal(stage.find('#layerId')[0].attrs.id, 'layerId', 'problem with layer id selector'); + }); + + // ====================================================== test('test find() selector by adding shape, then group, then layer', function() { var stage = addStage(); diff --git a/test/unit/Global-test.js b/test/unit/Global-test.js index 5919f366..d5323533 100644 --- a/test/unit/Global-test.js +++ b/test/unit/Global-test.js @@ -5,26 +5,6 @@ suite('Global', function() { assert.equal(Kinetic.version, 'dev'); }); - // ====================================================== - test('_addName', function() { - Kinetic._addName("node1", "single"); - assert.equal(Kinetic.names.single[0], "node1"); - - Kinetic._addName("node2", "double item"); - assert.equal(Kinetic.names.double[0], "node2"); - assert.equal(Kinetic.names.item[0], "node2"); - - Kinetic._addName("node3", " extra spaces "); - assert.equal(Kinetic.names.extra[0], "node3"); - assert.equal(Kinetic.names.spaces[0], "node3"); - - Kinetic._addName("node4", "another item"); - assert.equal(Kinetic.names.another[0], "node4"); - assert.equal(Kinetic.names.item.length, 2); - assert.equal(Kinetic.names.item[0], "node2"); - assert.equal(Kinetic.names.item[1], "node4"); - }); - // ====================================================== test('getAngle()', function() { // test that default angleDeg is true