diff options
| -rw-r--r-- | CHANGELOG.md | 7 | ||||
| -rw-r--r-- | spec/spec/text.js | 52 | ||||
| -rw-r--r-- | src/elements/Element.js | 5 | ||||
| -rw-r--r-- | src/elements/Text.js | 43 | ||||
| -rw-r--r-- | src/elements/Tspan.js | 12 | ||||
| -rw-r--r-- | src/modules/optional/sugar.js | 5 |
6 files changed, 75 insertions, 49 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index 4ed1af2..d6afc53 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,12 @@ The document follows the conventions described in [“Keep a CHANGELOG”](http: ==== +## [3.0.11] - 2019-01-22 + +### Fixed + - fixed move commands (x, y, move) of text so that it moves text always by the upper left edge. + - fixed center commands (cx, cy, center) of text so that it moves text always by the center. + ## [3.0.10] - 2019-01-14 ### Fixed @@ -801,6 +807,7 @@ The document follows the conventions described in [“Keep a CHANGELOG”](http: <!-- Headings above link to the releases listed here --> +[3.0.11]: https://github.com/svgdotjs/svg.js/releases/tag/3.0.11 [3.0.10]: https://github.com/svgdotjs/svg.js/releases/tag/3.0.10 [3.0.9]: https://github.com/svgdotjs/svg.js/releases/tag/3.0.9 [3.0.8]: https://github.com/svgdotjs/svg.js/releases/tag/3.0.8 diff --git a/spec/spec/text.js b/spec/spec/text.js index a541e98..f1b0101 100644 --- a/spec/spec/text.js +++ b/spec/spec/text.js @@ -39,52 +39,52 @@ describe('Text', function() { describe('x()', function() { it('returns the value of x without an argument', function() { - expect(text.x()).toBe(0) + expect(text.x(0).x()).toBe(0) }) - it('sets the value of x with the first argument', function() { + it('sets the x value of the bbox with the first argument', function() { text.x(123) - expect(text.node.getAttribute('x')).toBeCloseTo(123) + expect(text.bbox().x).toBe(123) }) it('sets the value of all lines', function() { text.x(200) text.each(function() { - expect(this.x()).toBe(200) + expect(this.x()).toBe(text.attr('x')) }) }) - it('sets the value of y with a percent value', function() { - text.x('40%') + }) + + describe('ax()', function () { + it('sets the value of x with a percent value', function() { + text.ax('40%') expect(text.node.getAttribute('x')).toBe('40%') }) it('returns the value of x when x is a percentual value', function() { - expect(text.x('45%').x()).toBe('45%') + expect(text.ax('45%').ax()).toBe('45%') }) - // Woow this test is old. The functionality not even implemented anymore - // Was a good feature. Maybe we add it back? - /*it('sets the value of x based on the anchor with the first argument', function() { - text.x(123, true) - var box = text.bbox() - expect(box.x).toBeCloseTo(123) - })*/ }) describe('y()', function() { it('returns the value of y without an argument', function() { expect(text.y(0).y()).toBeCloseTo(0) }) - it('returns the value of y when y is a percentual value', function() { - expect(text.y('45%').y()).toBe('45%') - }) - it('sets the value of y with the first argument', function() { + it('sets the y value of the bbox with the first argument', function() { text.y(345) var box = text.bbox() expect(box.y).toBe(345) }) + }) + + describe('ay()', function () { it('sets the value of y with a percent value', function() { - text.y('40%') + text.ay('40%') expect(text.node.getAttribute('y')).toBe('40%') }) + it('returns the value of y when y is a percentual value', function() { + expect(text.ay('45%').ay()).toBe('45%') + }) }) + describe('cx()', function() { it('returns the value of cx without an argument', function() { var box = text.bbox() @@ -96,12 +96,6 @@ describe('Text', function() { // this is a hack. it should be exactly 123 since you set it. But bbox with text is a thing... expect(box.cx).toBeCloseTo(box.x + box.width/2) }) - // not implemented anymore - /*it('sets the value of cx based on the anchor with the first argument', function() { - text.cx(123, true) - var box = text.bbox() - expect(box.cx).toBeCloseTo(123) - })*/ }) describe('cy()', function() { @@ -119,8 +113,8 @@ describe('Text', function() { describe('move()', function() { it('sets the x and y position', function() { text.move(123,456) - expect(text.node.getAttribute('x')).toBe('123') - expect(text.y()).toBeCloseTo(456) + expect(text.bbox().x).toBe(123) + expect(text.bbox().y).toBe(456) }) }) @@ -128,8 +122,8 @@ describe('Text', function() { it('sets the cx and cy position', function() { text.center(321, 567) var box = text.bbox() - expect(+text.node.getAttribute('x') + box.width / 2).toBeCloseTo(321, 1) - expect(text.y() + box.height / 2).toBeCloseTo(567, 0) + expect(text.bbox().cx).toBeCloseTo(321) + expect(text.bbox().cy).toBeCloseTo(567) }) }) diff --git a/src/elements/Element.js b/src/elements/Element.js index b13ddd5..cefac49 100644 --- a/src/elements/Element.js +++ b/src/elements/Element.js @@ -53,6 +53,11 @@ export default class Element extends Dom { return this.root().defs() } + // Relative move over x and y axes + dmove (x, y) { + return this.dx(x).dy(y) + } + // Relative move over x axis dx (x) { return this.x(new SVGNumber(x).plus(this.x())) diff --git a/src/elements/Text.js b/src/elements/Text.js index cfa3f51..c12c937 100644 --- a/src/elements/Text.js +++ b/src/elements/Text.js @@ -22,36 +22,49 @@ export default class Text extends Shape { } // Move over x-axis - x (x) { - // act as getter + // Text is moved its bounding box + // text-anchor does NOT matter + x (x, box = this.bbox()) { if (x == null) { - return this.attr('x') + return box.x } - return this.attr('x', x) + return this.attr('x', this.attr('x') + x - box.x) } // Move over y-axis - y (y) { - var oy = this.attr('y') - var o = typeof oy === 'number' ? oy - this.bbox().y : 0 - - // act as getter + y (y, box = this.bbox()) { if (y == null) { - return typeof oy === 'number' ? oy - o : oy + return box.y } - return this.attr('y', typeof y === 'number' ? y + o : y) + return this.attr('y', this.attr('y') + y - box.y) + } + + move (x, y, box = this.bbox()) { + return this.x(x, box).y(y, box) } // Move center over x-axis - cx (x) { - return x == null ? this.bbox().cx : this.x(x - this.bbox().width / 2) + cx (x, box = this.bbox()) { + if (x == null) { + return box.cx + } + + return this.attr('x', this.attr('x') + x - box.cx) } // Move center over y-axis - cy (y) { - return y == null ? this.bbox().cy : this.y(y - this.bbox().height / 2) + cy (y, box = this.bbox()) { + if (y == null) { + return box.cy + } + + return this.attr('y', this.attr('y') + y - box.cy) + } + + center (x, y, box = this.bbox()) { + return this.cx(x, box).cy(y, box) } // Set the text content diff --git a/src/elements/Tspan.js b/src/elements/Tspan.js index 64895fc..a9c2deb 100644 --- a/src/elements/Tspan.js +++ b/src/elements/Tspan.js @@ -35,6 +35,18 @@ export default class Tspan extends Text { return this.attr('dy', dy) } + x (x) { + return this.attr('x', x) + } + + y (y) { + return this.attr('x', y) + } + + move (x, y) { + return this.x(x).y(y) + } + // Create new line newLine () { // fetch text parent diff --git a/src/modules/optional/sugar.js b/src/modules/optional/sugar.js index 7aba0f7..0da0fe4 100644 --- a/src/modules/optional/sugar.js +++ b/src/modules/optional/sugar.js @@ -102,11 +102,6 @@ registerMethods([ 'Element', 'Runner' ], { // Opacity opacity: function (value) { return this.attr('opacity', value) - }, - - // Relative move over x and y axes - dmove: function (x, y) { - return this.dx(x).dy(y) } }) |