Lib: Add getTranslate and setTranslate methods and tests

mdtusz · mdtusz · commit 0cf82fed02a0 · 2016-04-28T17:52:23.000-04:00
diff --git 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
@@ -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)');
+        });
+    });
+
 });
