fixed move and center commands for text

 - 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.

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4ed1af2e72271213bd4bb6eafd7cfe68d5313d57..d6afc539ee5cd3608827a78038e35a4d948468d4 100644 (file)
--- 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 a541e98fa31346f58450218be0644c173fd5b487..f1b01017df2c11eb31de8d65dc9f14cc5d25bcac 100644 (file)
--- 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 b13ddd5fa0068c0cbfdb9e5523c6178d19857ed9..cefac49677935c9d52aaa86675e736f22a3a0d1a 100644 (file)
--- 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 cfa3f51499e9ebbb76b7a8d83c8c98629f1bd7fb..c12c937699f51b2628e1f756847ab676efc6fed4 100644 (file)
--- 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 64895fc4537eae58111908e2866d9f49bded9af4..a9c2debf52ceed576915b27d00957991d88d942d 100644 (file)
--- 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 7aba0f7b2e89e1326d852cb4639030cf0e998e94..0da0fe49044acaf68b2216c3a1d29ac2acd2a794 100644 (file)
--- 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)
   }
 })