From 8dcdc8d934116acac228dc22ee67cb512dd78f2c Mon Sep 17 00:00:00 2001 From: andrewdove1 Date: Wed, 14 Aug 2019 15:53:53 -0500 Subject: [PATCH 1/4] Bug fix for transforms of text --- source/jquery.canvaswrapper.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/source/jquery.canvaswrapper.js b/source/jquery.canvaswrapper.js index 4832e1b2..609e3c99 100644 --- a/source/jquery.canvaswrapper.js +++ b/source/jquery.canvaswrapper.js @@ -384,6 +384,13 @@ don't work unless the canvas is attached to the DOM. position = positions[i]; if (position.x === x && position.y === y && position.text === text) { position.active = true; + // update the transforms + if (transforms) { + info.element.transform.baseVal.clear(); + transforms.forEach(function(t) { + info.element.transform.baseVal.appendItem(t); + }); + } return; } else if (position.active === false) { position.active = true; From e2e8f2c0e48b9135c677c38b6578fcd88261aa0d Mon Sep 17 00:00:00 2001 From: andrewdove1 Date: Fri, 16 Aug 2019 09:03:10 -0500 Subject: [PATCH 2/4] Moved tranform code --- source/jquery.canvaswrapper.js | 22 +++++++++------------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/source/jquery.canvaswrapper.js b/source/jquery.canvaswrapper.js index 609e3c99..9f285259 100644 --- a/source/jquery.canvaswrapper.js +++ b/source/jquery.canvaswrapper.js @@ -377,6 +377,15 @@ 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. @@ -384,13 +393,6 @@ don't work unless the canvas is attached to the DOM. position = positions[i]; if (position.x === x && position.y === y && position.text === text) { position.active = true; - // update the transforms - if (transforms) { - info.element.transform.baseVal.clear(); - transforms.forEach(function(t) { - info.element.transform.baseVal.appendItem(t); - }); - } return; } else if (position.active === false) { position.active = true; @@ -436,12 +438,6 @@ 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); - }); - } }; var addTspanElements = function(text, element, x) { From b312b0c3c8ecf362bfa818aea06b86082a668073 Mon Sep 17 00:00:00 2001 From: andrewdove1 Date: Fri, 16 Aug 2019 10:38:59 -0500 Subject: [PATCH 3/4] added tests and updated behavior --- karma.conf.js | 3 +- source/jquery.canvaswrapper.js | 27 +++++++++----- tests/jquery.flot.canvaswrapper.Test.js | 47 +++++++++++++++++++++++++ 3 files changed, 67 insertions(+), 10 deletions(-) diff --git a/karma.conf.js b/karma.conf.js index da8f2b4e..4b0fc83d 100644 --- 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 index 9f285259..355fddf9 100644 --- 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,14 +387,6 @@ 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. @@ -393,6 +394,9 @@ don't work unless the canvas is attached to the DOM. 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('
'), diff --git a/tests/jquery.flot.canvaswrapper.Test.js b/tests/jquery.flot.canvaswrapper.Test.js index 825adeae..79d4f4ba 100644 --- 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'); From 3dce376c9596fa35c38f73c88d638183fc040df2 Mon Sep 17 00:00:00 2001 From: andrewdove1 Date: Fri, 16 Aug 2019 10:40:09 -0500 Subject: [PATCH 4/4] Fix browser list --- karma.conf.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/karma.conf.js b/karma.conf.js index 4b0fc83d..da8f2b4e 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -10,8 +10,7 @@ module.exports = function(config) { var browsersMatrix = { 'win': ['Firefox', 'Chrome', 'Edge'], 'linux': ['Firefox', 'Chrome'], - // 'mac': ['Safari', 'Firefox', 'Chrome'] - 'mac': ['Chrome'] + 'mac': ['Safari', 'Firefox', 'Chrome'] }, isWin = /^win/.test(process.platform), isLinux = /^linux/.test(process.platform),