useTranslation() (#465)

wcandillon · Aug 30, 2021 · 1f9e72f · 1f9e72f
1 parent 86e061a
commit 1f9e72f
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 16 deletions.
diff --git a/src/Colors.ts b/src/Colors.ts
@@ -1,15 +1,17 @@
 import { interpolateColor } from "react-native-reanimated";
 
+import { clamp, fract, mix } from "./Math";
+
 export type AnimatedColor = string | number;
 
 /**
  * @summary Returns black or white depending on the value of the background color.
  * @worklet
  */
-export const colorForBackground = (r: number, g: number, b: number) => {
+export const isLight = (r: number, g: number, b: number) => {
   "worklet";
   const L = 0.299 * r + 0.587 * g + 0.114 * b;
-  return L > 186 ? 0x000000ff : 0xffffffff;
+  return L > 186;
 };
 
 /**
@@ -29,3 +31,30 @@ export const mixColor = (
   "worklet";
   return interpolateColor(value, [0, 1], [color1, color2], colorSpace);
 };
+
+export const hsv2rgb = (h: number, s: number, v: number) => {
+  "worklet";
+  const K = {
+    x: 1,
+    y: 2 / 3,
+    z: 1 / 3,
+    w: 3,
+  };
+  const p = {
+    x: Math.abs(fract(h + K.x) * 6 - K.w),
+    y: Math.abs(fract(h + K.y) * 6 - K.w),
+    z: Math.abs(fract(h + K.z) * 6 - K.w),
+  };
+  // return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
+  const rgb = {
+    x: v * mix(s, K.x, clamp(p.x - K.x, 0, 1)),
+    y: v * mix(s, K.x, clamp(p.y - K.x, 0, 1)),
+    z: v * mix(s, K.x, clamp(p.z - K.x, 0, 1)),
+  };
+
+  const r = Math.round(rgb.x * 255);
+  const g = Math.round(rgb.y * 255);
+  const b = Math.round(rgb.z * 255);
+
+  return { r, g, b };
+};
diff --git a/src/Math.ts b/src/Math.ts
@@ -246,3 +246,8 @@ export const cubicBezierYForX = (
     .filter((root) => root >= 0 && root <= 1)[0];
   return cubicBezier(t, a.y, b.y, c.y, d.y);
 };
+
+export const fract = (x: number) => {
+  "worklet";
+  return x - Math.floor(x);
+};
diff --git a/src/Matrix3.ts b/src/Matrix3.ts
@@ -209,14 +209,14 @@ export const multiply3 = (m1: Matrix3, m2: Matrix3) => {
   ] as const;
 };
 
-export const serializeToSVGMatrixArray = (m: Matrix3) => {
+const serializeToSVGMatrix = (m: Matrix3) => {
   "worklet";
-  return [m[0][0], m[1][0], m[0][1], m[1][1], m[0][2], m[1][2]];
+  return `matrix(${m[0][0]}, ${m[1][0]}, ${m[0][1]}, ${m[1][1]}, ${m[0][2]}, ${m[1][2]})`;
 };
 
-export const serializeToSVGMatrix = (m: Matrix3) => {
+export const svgMatrix = (transforms: Transforms2d) => {
   "worklet";
-  return `matrix(${m[0][0]}, ${m[1][0]}, ${m[0][1]}, ${m[1][1]}, ${m[0][2]}, ${m[1][2]})`;
+  return serializeToSVGMatrix(processTransform2d(transforms));
 };
 
 export const processTransform2d = (transforms: Transforms2d) => {

diff --git a/src/Transforms.ts b/src/Transforms.ts
@@ -1,4 +1,6 @@
 import type { TransformsStyle } from "react-native";
+import type Animated from "react-native-reanimated";
+import { useAnimatedStyle } from "react-native-reanimated";
 
 import type { Vector } from "./Vectors";
 import type { Transforms2d } from "./Matrix3";
@@ -32,3 +34,11 @@ export const transformOrigin2d = (
     { translateY: -y },
   ];
 };
+
+export const useTranslation = ({
+  x,
+  y,
+}: Vector<Animated.SharedValue<number>>) =>
+  useAnimatedStyle(() => ({
+    transform: [{ translateX: x.value }, { translateY: y.value }],
+  }));
diff --git a/src/__tests__/Matrix3.test.ts b/src/__tests__/Matrix3.test.ts
@@ -1,18 +1,16 @@
-import { processTransform2d, serializeToSVGMatrix } from "../Matrix3";
+import { svgMatrix } from "../Matrix3";
 
 test("processTransform3d()", () => {
   const width = 100;
   const height = 100;
   expect(
-    serializeToSVGMatrix(
-      processTransform2d([
-        { translateX: width / 2 },
-        { translateY: height / 2 },
-        { rotate: `${Math.PI / 2}rad` },
-        { translateX: -width / 2 },
-        { translateY: -height / 2 },
-      ])
-    )
+    svgMatrix([
+      { translateX: width / 2 },
+      { translateY: height / 2 },
+      { rotate: `${Math.PI / 2}rad` },
+      { translateX: -width / 2 },
+      { translateY: -height / 2 },
+    ])
   ).toStrictEqual(
     "matrix(6.123233995736766e-17, 1, -1, 6.123233995736766e-17, 100, -3.061616997868383e-15)"
   );