added tests and updated behavior

flot · Aug 16, 2019 · b312b0c · b312b0c
1 parent e2e8f2c
commit b312b0c
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 10 deletions.
diff --git a/karma.conf.js b/karma.conf.js
@@ -10,7 +10,8 @@ module.exports = function(config) {
     var browsersMatrix = {
             'win': ['Firefox', 'Chrome', 'Edge'],
             'linux': ['Firefox', 'Chrome'],
-            'mac': ['Safari', 'Firefox', 'Chrome']
+            // 'mac': ['Safari', 'Firefox', 'Chrome']
+            'mac': ['Chrome']
         },
         isWin = /^win/.test(process.platform),
         isLinux = /^linux/.test(process.platform),

diff --git a/source/jquery.canvaswrapper.js b/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)
 
@@ -378,21 +387,16 @@ don't work unless the canvas is attached to the DOM.
         y += 0.75 * info.height;
 
 
-        // update the transforms
-        if (transforms) {
-            info.element.transform.baseVal.clear();
-            transforms.forEach(function(t) {
-                info.element.transform.baseVal.appendItem(t);
-            });
-        }
-
         // 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;
@@ -407,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;
             }
         }
@@ -438,7 +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;
-    };
+        // update the transforms
+        updateTransforms(position.element, transforms);
+   };
 
     var addTspanElements = function(text, element, x) {
         var lines = text.split('<br>'),

diff --git a/tests/jquery.flot.canvaswrapper.Test.js b/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');