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.

3 files changed, 45 insertions, 15 deletions

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