From 0cf82fed02a0786d62a13e318eeaed5ff7a35a73 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mikl=C3=B3s=20Tusz?= Date: Thu, 28 Apr 2016 17:52:23 -0400 Subject: [PATCH] Lib: Add getTranslate and setTranslate methods and tests --- src/lib/index.js | 36 ++++++++++++++ test/jasmine/tests/lib_test.js | 87 ++++++++++++++++++++++++++++++++++ 2 files changed, 123 insertions(+) diff --git a/src/lib/index.js b/src/lib/index.js index 8f2235928cd..0a6b8f839bc 100644 --- a/src/lib/index.js +++ b/src/lib/index.js @@ -430,6 +430,42 @@ lib.addStyleRule = function(selector, styleString) { else console.warn('addStyleRule failed'); }; +lib.getTranslate = function(element) { + + var re = /(\btranslate\()(\d*\.?\d*)([^\d]*)(\d*\.?\d*)([^\d]*)(.*)/, + getter = element.attr ? 'attr' : 'getAttribute', + transform = element[getter]('transform') || ''; + + var translate = transform.replace(re, function(match, p1, p2, p3, p4) { + return [p2, p4].join(' '); + }) + .split(' '); + + return { + x: +translate[0] || 0, + y: +translate[1] || 0 + }; +}; + +lib.setTranslate = function(element, x, y) { + + var re = /(\btranslate\(.*?\);?)/, + getter = element.attr ? 'attr' : 'getAttribute', + setter = element.attr ? 'attr' : 'setAttribute', + transform = element[getter]('transform') || ''; + + x = x || 0; + y = y || 0; + + transform = transform.replace(re, '').trim(); + transform += ' translate(' + x + ', ' + y + ')'; + transform = transform.trim(); + + element[setter]('transform', transform); + + return transform; +}; + lib.isIE = function() { return typeof window.navigator.msSaveBlob !== 'undefined'; }; diff --git a/test/jasmine/tests/lib_test.js b/test/jasmine/tests/lib_test.js index 3b11c1868d9..065c7da8f31 100644 --- a/test/jasmine/tests/lib_test.js +++ b/test/jasmine/tests/lib_test.js @@ -770,4 +770,91 @@ describe('Test lib.js:', function() { }); }); + fdescribe('getTranslate', function() { + + it('should work with regular DOM elements', function() { + var el = document.createElement('div'); + + expect(Lib.getTranslate(el)).toEqual({ x: 0, y: 0 }); + + el.setAttribute('transform', 'translate(123.45px, 67)'); + expect(Lib.getTranslate(el)).toEqual({ x: 123.45, y: 67 }); + + el.setAttribute('transform', 'translate(123.45)'); + expect(Lib.getTranslate(el)).toEqual({ x: 123.45, y: 0 }); + + el.setAttribute('transform', 'translate(1 2)'); + expect(Lib.getTranslate(el)).toEqual({ x: 1, y: 2 }); + + el.setAttribute('transform', 'translate(1 2); rotate(20deg)'); + expect(Lib.getTranslate(el)).toEqual({ x: 1, y: 2 }); + + el.setAttribute('transform', 'rotate(20deg)'); + expect(Lib.getTranslate(el)).toEqual({ x: 0, y: 0 }); + }); + + it('should work with d3 elements', function() { + var el = d3.select(document.createElement('div')); + + el.attr('transform', 'translate(123.45px, 67)'); + expect(Lib.getTranslate(el)).toEqual({ x: 123.45, y: 67 }); + + el.attr('transform', 'translate(123.45)'); + expect(Lib.getTranslate(el)).toEqual({ x: 123.45, y: 0 }); + + el.attr('transform', 'translate(1 2)'); + expect(Lib.getTranslate(el)).toEqual({ x: 1, y: 2 }); + + el.attr('transform', 'translate(1 2); rotate(20)'); + expect(Lib.getTranslate(el)).toEqual({ x: 1, y: 2 }); + + el.attr('transform', 'rotate(20)'); + expect(Lib.getTranslate(el)).toEqual({ x: 0, y: 0 }); + }); + + }); + + fdescribe('setTranslate', function() { + + it('should work with regular DOM elements', function() { + var el = document.createElement('div'); + + Lib.setTranslate(el, 5); + expect(el.getAttribute('transform')).toBe('translate(5, 0)'); + + Lib.setTranslate(el, 10, 20); + expect(el.getAttribute('transform')).toBe('translate(10, 20)'); + + Lib.setTranslate(el, 30, 40); + expect(el.getAttribute('transform')).toBe('translate(30, 40)'); + + Lib.setTranslate(el); + expect(el.getAttribute('transform')).toBe('translate(0, 0)'); + + el.setAttribute('transform', 'translate(0, 0); rotate(30)'); + Lib.setTranslate(el, 30, 40); + expect(el.getAttribute('transform')).toBe('rotate(30) translate(30, 40)'); + }); + + it('should work with d3 elements', function() { + var el = d3.select(document.createElement('div')); + + Lib.setTranslate(el, 5); + expect(el.attr('transform')).toBe('translate(5, 0)'); + + Lib.setTranslate(el, 10, 20); + expect(el.attr('transform')).toBe('translate(10, 20)'); + + Lib.setTranslate(el, 30, 40); + expect(el.attr('transform')).toBe('translate(30, 40)'); + + Lib.setTranslate(el); + expect(el.attr('transform')).toBe('translate(0, 0)'); + + el.attr('transform', 'translate(0, 0); rotate(30)'); + Lib.setTranslate(el, 30, 40); + expect(el.attr('transform')).toBe('rotate(30) translate(30, 40)'); + }); + }); + });