diff --git a/spec/parser/javascript/node_spec.js b/spec/parser/javascript/node_spec.js index 4c59eee..10a0668 100644 --- a/spec/parser/javascript/node_spec.js +++ b/spec/parser/javascript/node_spec.js @@ -366,19 +366,188 @@ describe('parser/javascript/node.js', function() { describe('#spaceHorizontally', function() { - pending(); + it('positions each item', function() { + var svg = Snap(document.createElement('svg')), + items = [ + svg.group(), + svg.group(), + svg.group() + ]; + + spyOn(items[0], 'getBBox').and.returnValue({ ay: 5, width: 10 }); + spyOn(items[1], 'getBBox').and.returnValue({ ay: 15, width: 30 }); + spyOn(items[2], 'getBBox').and.returnValue({ ay: 10, width: 20 }); + spyOn(items[0], 'transform').and.callThrough(); + spyOn(items[1], 'transform').and.callThrough(); + spyOn(items[2], 'transform').and.callThrough(); + + this.node.spaceHorizontally(items, { padding: 5 }); + + expect(items[0].transform).toHaveBeenCalledWith(Snap.matrix() + .translate(0, 10)); + expect(items[1].transform).toHaveBeenCalledWith(Snap.matrix() + .translate(15, 0)); + expect(items[2].transform).toHaveBeenCalledWith(Snap.matrix() + .translate(50, 5)); + }); }); describe('#spaceVertically', function() { - pending(); + it('positions each item', function() { + var svg = Snap(document.createElement('svg')), + items = [ + svg.group(), + svg.group(), + svg.group() + ]; + + spyOn(items[0], 'getBBox').and.returnValue({ cx: 5, height: 10 }); + spyOn(items[1], 'getBBox').and.returnValue({ cx: 15, height: 30 }); + spyOn(items[2], 'getBBox').and.returnValue({ cx: 10, height: 20 }); + spyOn(items[0], 'transform').and.callThrough(); + spyOn(items[1], 'transform').and.callThrough(); + spyOn(items[2], 'transform').and.callThrough(); + + this.node.spaceVertically(items, { padding: 5 }); + + expect(items[0].transform).toHaveBeenCalledWith(Snap.matrix() + .translate(10, 0)); + expect(items[1].transform).toHaveBeenCalledWith(Snap.matrix() + .translate(0, 15)); + expect(items[2].transform).toHaveBeenCalledWith(Snap.matrix() + .translate(5, 50)); + }); }); describe('#renderLabeledBox', function() { - pending(); + beforeEach(function() { + var svg = Snap(document.createElement('svg')); + + this.text = svg.text(); + this.rect = svg.rect(); + this.content = svg.rect(); + + this.node.container = jasmine.createSpyObj('container', ['addClass', 'text', 'rect', 'prepend']); + this.node.container.text.and.returnValue(this.text); + this.node.container.rect.and.returnValue(this.rect); + + this.node.type = 'example-type'; + }); + + it('creates a text element', function() { + this.node.renderLabeledBox('example label', this.content, { padding: 5 }); + expect(this.node.container.text).toHaveBeenCalledWith(0, 0, 'example label'); + }); + + it('sets the class on the text element', function() { + spyOn(this.text, 'addClass').and.callThrough(); + this.node.renderLabeledBox('example label', this.content, { padding: 5 }); + expect(this.text.addClass).toHaveBeenCalledWith('example-type-label'); + }); + + it('creates a rect element', function() { + this.node.renderLabeledBox('example label', this.content, { padding: 5 }); + expect(this.node.container.rect).toHaveBeenCalled(); + }); + + it('sets the class on the rect element', function() { + spyOn(this.rect, 'addClass').and.callThrough(); + this.node.renderLabeledBox('example label', this.content, { padding: 5 }); + expect(this.rect.addClass).toHaveBeenCalledWith('example-type-box'); + }); + + it('sets the corner radius on the rect element', function() { + spyOn(this.rect, 'attr').and.callThrough(); + this.node.renderLabeledBox('example label', this.content, { padding: 5 }); + expect(this.rect.attr).toHaveBeenCalledWith({ + rx: 3, + ry: 3 + }); + }); + + describe('positioning of elements', function() { + + beforeEach(function() { + spyOn(this.text, 'getBBox').and.returnValue({ + width: 100, + height: 20 + }); + spyOn(this.content, 'getBBox').and.returnValue({ + width: 200, + height: 100, + cx: 100 + }); + }); + + it('positions the text element', function(done) { + spyOn(this.text, 'transform').and.callThrough(); + this.node.renderLabeledBox('example label', this.content, { padding: 5 }) + .then(() => { + expect(this.text.transform).toHaveBeenCalledWith(Snap.matrix() + .translate(0, 20)); + }) + .finally(done) + .done(); + }); + + it('positions the rect element', function(done) { + spyOn(this.rect, 'transform').and.callThrough(); + this.node.renderLabeledBox('example label', this.content, { padding: 5 }) + .then(() => { + expect(this.rect.transform).toHaveBeenCalledWith(Snap.matrix() + .translate(0, 20)); + }) + .finally(done) + .done(); + }); + + it('sets the dimensions of the rect element', function(done) { + spyOn(this.rect, 'attr').and.callThrough(); + this.node.renderLabeledBox('example label', this.content, { padding: 5 }) + .then(() => { + expect(this.rect.attr).toHaveBeenCalledWith({ + width: 210, + height: 110 + }) + }) + .finally(done) + .done(); + }); + + it('sets the dimensions of the rect element (based on the text element)', function(done) { + this.content.getBBox.and.returnValue({ + width: 50, + height: 100, + cx: 25 + }); + spyOn(this.rect, 'attr').and.callThrough(); + this.node.renderLabeledBox('example label', this.content, { padding: 5 }) + .then(() => { + expect(this.rect.attr).toHaveBeenCalledWith({ + width: 100, + height: 110 + }) + }) + .finally(done) + .done(); + }); + + it('positions the content element', function(done) { + spyOn(this.content, 'transform').and.callThrough(); + this.node.renderLabeledBox('example label', this.content, { padding: 5 }) + .then(() => { + expect(this.content.transform).toHaveBeenCalledWith(Snap.matrix() + .translate(5, 25)); + }) + .finally(done) + .done(); + }); + + }); }); diff --git a/src/js/parser/javascript/node.js b/src/js/parser/javascript/node.js index 2ccecfc..b94abd9 100644 --- a/src/js/parser/javascript/node.js +++ b/src/js/parser/javascript/node.js @@ -138,10 +138,9 @@ export default class Node { } spaceHorizontally(items, options) { - var verticalCenter = 0, - normalize = this.normalizeBBox; + var verticalCenter = 0; - _.defaults(options, { + options = _.defaults(options || {}, { padding: 0 }); @@ -151,14 +150,14 @@ export default class Node { item.transform(Snap.matrix() .translate(offset, 0)); - box = normalize(item.getBBox()); + box = this.normalizeBBox(item.getBBox()); verticalCenter = Math.max(verticalCenter, box.ay); return offset + options.padding + box.width; }, 0); for (var item of items) { - let box = normalize(item.getBBox()); + let box = this.normalizeBBox(item.getBBox()); item.transform(Snap.matrix() .add(item.transform().localMatrix) @@ -169,7 +168,7 @@ export default class Node { spaceVertically(items, options) { var horizontalCenter = 0; - _.defaults(options, { + options = _.defaults(options || {}, { padding: 0 }); @@ -194,11 +193,8 @@ export default class Node { } renderLabeledBox(label, content, options) { - var label = this.container.text() - .addClass([this.type, 'label'].join('-')) - .attr({ - text: label - }), + var label = this.container.text(0, 0, label) + .addClass([this.type, 'label'].join('-')), box = this.container.rect() .addClass([this.type, 'box'].join('-')) .attr({ @@ -206,7 +202,7 @@ export default class Node { ry: 3 }); - _.defaults(options, { + options = _.defaults(options || {}, { padding: 0 });