Merge 3dce376 into a92e72f

source/jquery.canvaswrapper.js

@@ -345,6 +345,15 @@ don't work unless the canvas is attached to the DOM.
         return info;
     };
 
+    function updateTransforms (element, transforms) {
+        element.transform.baseVal.clear();
+        if (transforms) {
+            transforms.forEach(function(t) {
+                element.transform.baseVal.appendItem(t);
+            });
+        }
+    }
+
     /**
     - addText (layer, x, y, text, font, angle, width, halign, valign, transforms)
 
@@ -377,13 +386,17 @@ don't work unless the canvas is attached to the DOM.
 
         y += 0.75 * info.height;
 
+
         // Determine whether this text already exists at this position.
         // If so, mark it for inclusion in the next render pass.
 
         for (var i = 0, position; positions[i]; i++) {
             position = positions[i];
             if (position.x === x && position.y === y && position.text === text) {
                 position.active = true;
+                // update the transforms
+                updateTransforms(position.element, transforms);
+
                 return;
             } else if (position.active === false) {
                 position.active = true;
@@ -398,6 +411,9 @@ don't work unless the canvas is attached to the DOM.
                 position.element.setAttributeNS(null, 'y', y);
                 position.x = x;
                 position.y = y;
+                // update the transforms
+                updateTransforms(position.element, transforms);
+
                 return;
             }
         }
@@ -429,13 +445,9 @@ don't work unless the canvas is attached to the DOM.
         position.element.setAttributeNS(null, 'x', x);
         position.element.setAttributeNS(null, 'y', y);
         position.element.style.textAlign = halign;
-
-        if (transforms) {
-            transforms.forEach(function(t) {
-                info.element.transform.baseVal.appendItem(t);
-            });
-        }
-    };
+        // update the transforms
+        updateTransforms(position.element, transforms);
+   };
 
     var addTspanElements = function(text, element, x) {
         var lines = text.split('<br>'),

tests/jquery.flot.canvaswrapper.Test.js

@@ -128,6 +128,53 @@ describe('CanvasWrapper', function() {
         expect(box2.top).not.toBe(box1.top);
     });
 
+    fit('should add the same text with the correct horizontal alignment', function() {
+        var canvas = newCanvas(placeholder);
+        canvas.addText('layerA', 100, 200, '123', 'a', 0, 200, 'center', 'top');
+        canvas.addText('layerA', 100, 200, '234', 'a');
+        canvas.render();
+
+        var elem1 = placeholder.find('.a')[0],
+            elem2 = placeholder.find('.a')[1],
+            box1 = elem1.getBoundingClientRect(),
+            box2 = elem2.getBoundingClientRect();
+        expect(box2.left).not.toBe(box1.left);
+        expect(box2.top).toBe(box1.top);
+    });
+
+    fit('should add the same text with the correct vertical alignment', function() {
+        var canvas = newCanvas(placeholder);
+        canvas.addText('layerA', 100, 200, '123', 'a', 0, 200, 'left', 'bottom');
+        canvas.addText('layerA', 100, 200, '234', 'a');
+        canvas.render();
+
+        var elem1 = placeholder.find('.a')[0],
+            elem2 = placeholder.find('.a')[1],
+            box1 = elem1.getBoundingClientRect(),
+            box2 = elem2.getBoundingClientRect();
+        expect(box2.left).toBe(box1.left);
+        expect(box2.top).not.toBe(box1.top);
+    });
+
+    fit('should add the same text with the correct tranforms', function() {
+        var canvas = newCanvas(placeholder);
+        var transforms = [], translate;
+        var svgLayer = canvas.getSVGLayer('layerA');
+        translate = svgLayer.parentNode.createSVGTransform();
+        translate.setTranslate(100, 100);
+        transforms.push(translate);
+
+        canvas.addText('layerA', 100, 200, '123', 'a', 0, 200, 'left', 'top', transforms);
+        canvas.addText('layerA', 100, 200, '234', 'a');
+        canvas.render();
+
+        var elem1 = placeholder.find('.a')[0],
+            elem2 = placeholder.find('.a')[1];
+        expect(elem2.transform.baseVal.length).toBe(0);
+        expect(elem1.transform.baseVal[0].matrix.e).toBe(100);
+        expect(elem1.transform.baseVal[0].matrix.f).toBe(100);
+    });
+
     it('should add different text with the same CSS at different coords', function() {
         var canvas = newCanvas(placeholder);
         canvas.addText('layerA', 100, 200, '123', 'a');