fix: use correct transformation properties in dom- and svg-renderer (#…

…824) Co-authored-by: Niclas Fors <niclas.fors@qlik.com>
qlik-oss · Jan 12, 2024 · a91fd0b · a91fd0b
1 parent 95b09f4
commit a91fd0b
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 6 deletions.
diff --git a/packages/picasso.js/src/web/renderer/dom-renderer/__tests__/dom-renderer.spec.js b/packages/picasso.js/src/web/renderer/dom-renderer/__tests__/dom-renderer.spec.js
@@ -75,7 +75,14 @@ describe('dom renderer', () => {
 
     it('should apply transform if provided', () => {
       const rendererSettings = {
-        transform: () => ({ a: 1, b: 0, c: 1, d: 0, e: 100, f: 100 }),
+        transform: () => ({
+          horizontalScaling: 1,
+          horizontalSkewing: 0,
+          verticalSkewing: 1,
+          verticalScaling: 0,
+          horizontalMoving: 100,
+          verticalMoving: 100,
+        }),
         irrelevantSetting: 'irrelevant!',
       };
       rend.settings(rendererSettings);

diff --git a/packages/picasso.js/src/web/renderer/dom-renderer/dom-renderer.js b/packages/picasso.js/src/web/renderer/dom-renderer/dom-renderer.js
@@ -51,8 +51,15 @@ export default function renderer(opts = {}) {
 
     const transformation = typeof settings.transform === 'function' && settings.transform();
     if (transformation) {
-      const { a, b, c, d, e, f } = transformation;
-      el.style.transform = `matrix(${a}, ${b}, ${c}, ${d}, ${e}, ${f})`;
+      const {
+        horizontalScaling,
+        horizontalSkewing,
+        verticalSkewing,
+        verticalScaling,
+        horizontalMoving,
+        verticalMoving,
+      } = transformation;
+      el.style.transform = `matrix(${horizontalScaling}, ${horizontalSkewing}, ${verticalSkewing}, ${verticalScaling}, ${horizontalMoving}, ${verticalMoving})`;
       return true;
     }
     el.style.transform = '';

diff --git a/packages/picasso.js/src/web/renderer/svg-renderer/__tests__/svg-renderer.spec.js b/packages/picasso.js/src/web/renderer/svg-renderer/__tests__/svg-renderer.spec.js
@@ -76,7 +76,14 @@ describe('svg renderer', () => {
 
     it('should apply transform if provided', () => {
       const rendererSettings = {
-        transform: () => ({ a: 1, b: 0, c: 1, d: 0, e: 100, f: 100 }),
+        transform: () => ({
+          horizontalScaling: 1,
+          horizontalSkewing: 0,
+          verticalSkewing: 1,
+          verticalScaling: 0,
+          horizontalMoving: 100,
+          verticalMoving: 100,
+        }),
         irrelevantSetting: 'irrelevant!',
       };
       svg.settings(rendererSettings);

diff --git a/packages/picasso.js/src/web/renderer/svg-renderer/svg-renderer.js b/packages/picasso.js/src/web/renderer/svg-renderer/svg-renderer.js
@@ -117,8 +117,15 @@ export default function renderer(treeFn = treeFactory, ns = svgNs, sceneFn = sce
 
     const transformation = typeof settings.transform === 'function' && settings.transform();
     if (transformation) {
-      const { a, b, c, d, e, f } = transformation;
-      group.style.transform = `matrix(${a}, ${b}, ${c}, ${d}, ${e}, ${f})`;
+      const {
+        horizontalScaling,
+        horizontalSkewing,
+        verticalSkewing,
+        verticalScaling,
+        horizontalMoving,
+        verticalMoving,
+      } = transformation;
+      group.style.transform = `matrix(${horizontalScaling}, ${horizontalSkewing}, ${verticalSkewing}, ${verticalScaling}, ${horizontalMoving}, ${verticalMoving})`;
       return true;
     }
     group.style.transform = '';