Release 14.5.1

package.json

@@ -1,7 +1,7 @@
 {
   "name": "visyn_core",
   "description": "Core repository for datavisyn applications.",
-  "version": "14.5.0",
+  "version": "14.5.1",
   "author": {
     "name": "datavisyn GmbH",
     "email": "[email protected]",

src/vis/vishooks/hooks/useTransformScale.ts

@@ -1,36 +1,54 @@
-import { useMemo } from 'react';
-import { scaleLinear } from 'd3-scale';
+import { ZoomTransform as D3ZoomTransform, scaleLinear } from 'd3v7';
 import { ZoomTransform } from '../interfaces';
 import { rescaleX, rescaleY } from '../transform';
+import { sxi, txi, tyi } from '../math/matrix4x4';
+import { useDeepMemo } from '../../../hooks/useDeepMemo';
 
 interface UseTransformScaleProps {
   domain: number[];
   range: number[];
   transform?: ZoomTransform;
   direction: 'x' | 'y';
+  transformTarget?: 'domain' | 'range';
 }
 
-export function useTransformScale({ domain, range, transform, direction }: UseTransformScaleProps) {
-  return useMemo(() => {
+export function useTransformScale({ domain, range, transform, direction, transformTarget }: UseTransformScaleProps) {
+  return useDeepMemo(() => {
+    // Invalid data case
     if (!domain || !range) {
       return null;
     }
 
     const scale = scaleLinear().domain(domain).range(range);
 
-    if (transform) {
+    // Untransformed case
+    if (!transform) {
       return {
         base: scale,
-        scaled: direction === 'x' ? rescaleX(transform, scale) : rescaleY(transform, scale),
+        scaled: scale,
       };
     }
 
-    return {
-      base: scale,
-      scaled: scale,
-    };
+    switch (transformTarget ?? (domain.length === 2 ? 'domain' : 'range')) {
+      case 'domain':
+        return {
+          base: scale,
+          scaled: direction === 'x' ? rescaleX(transform, scale) : rescaleY(transform, scale),
+        };
+      case 'range': {
+        const d3transform = new D3ZoomTransform(transform[sxi]!, transform[txi]!, transform[tyi]!);
+        const transformedRange =
+          direction === 'x' ? scale.range().map((value) => d3transform.applyX(value)) : scale.range().map((value) => d3transform.applyY(value));
+
+        return {
+          base: scale,
+          scaled: scale.range(transformedRange),
+        };
+      }
+      default:
+        throw new Error('Invalid transform target');
+    }
 
     // We dont want to compare with range/domain reference, only the primitive values
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [domain?.[0], domain?.[1], range?.[0], range?.[1], transform, direction]);
+  }, [domain, range, transform, direction, transformTarget]);
 }