add react-babylon-spring

package-lock.json

@@ -8,6 +8,9 @@
       "name": "neos-ts",
       "version": "0.1.0",
       "dependencies": {
+        "@react-spring/shared": "^9.6.1",
+        "@react-spring/types": "^9.6.1",
+        "@react-spring/web": "^9.6.1",
         "@reduxjs/toolkit": "^1.8.6",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.3.0",
@@ -2294,6 +2297,73 @@
         "react-dom": ">=16.9.0"
       }
     },
+    "node_modules/@react-spring/animated": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.6.1.tgz",
+      "integrity": "sha512-ls/rJBrAqiAYozjLo5EPPLLOb1LM0lNVQcXODTC1SMtS6DbuBCPaKco5svFUQFMP2dso3O+qcC4k9FsKc0KxMQ==",
+      "dependencies": {
+        "@react-spring/shared": "~9.6.1",
+        "@react-spring/types": "~9.6.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/core": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.6.1.tgz",
+      "integrity": "sha512-3HAAinAyCPessyQNNXe5W0OHzRfa8Yo5P748paPcmMowZ/4sMfaZ2ZB6e5x5khQI8NusOHj8nquoutd6FRY5WQ==",
+      "dependencies": {
+        "@react-spring/animated": "~9.6.1",
+        "@react-spring/rafz": "~9.6.1",
+        "@react-spring/shared": "~9.6.1",
+        "@react-spring/types": "~9.6.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-spring/donate"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/rafz": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.6.1.tgz",
+      "integrity": "sha512-v6qbgNRpztJFFfSE3e2W1Uz+g8KnIBs6SmzCzcVVF61GdGfGOuBrbjIcp+nUz301awVmREKi4eMQb2Ab2gGgyQ=="
+    },
+    "node_modules/@react-spring/shared": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.6.1.tgz",
+      "integrity": "sha512-PBFBXabxFEuF8enNLkVqMC9h5uLRBo6GQhRMQT/nRTnemVENimgRd+0ZT4yFnAQ0AxWNiJfX3qux+bW2LbG6Bw==",
+      "dependencies": {
+        "@react-spring/rafz": "~9.6.1",
+        "@react-spring/types": "~9.6.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/types": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.6.1.tgz",
+      "integrity": "sha512-POu8Mk0hIU3lRXB3bGIGe4VHIwwDsQyoD1F394OK7STTiX9w4dG3cTLljjYswkQN+hDSHRrj4O36kuVa7KPU8Q=="
+    },
+    "node_modules/@react-spring/web": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.6.1.tgz",
+      "integrity": "sha512-X2zR6q2Z+FjsWfGAmAXlQaoUHbPmfuCaXpuM6TcwXPpLE1ZD4A1eys/wpXboFQmDkjnrlTmKvpVna1MjWpZ5Hw==",
+      "dependencies": {
+        "@react-spring/animated": "~9.6.1",
+        "@react-spring/core": "~9.6.1",
+        "@react-spring/shared": "~9.6.1",
+        "@react-spring/types": "~9.6.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@reduxjs/toolkit": {
       "version": "1.8.6",
       "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.8.6.tgz",
@@ -27683,6 +27753,56 @@
         "rc-util": "^5.24.4"
       }
     },
+    "@react-spring/animated": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.6.1.tgz",
+      "integrity": "sha512-ls/rJBrAqiAYozjLo5EPPLLOb1LM0lNVQcXODTC1SMtS6DbuBCPaKco5svFUQFMP2dso3O+qcC4k9FsKc0KxMQ==",
+      "requires": {
+        "@react-spring/shared": "~9.6.1",
+        "@react-spring/types": "~9.6.1"
+      }
+    },
+    "@react-spring/core": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.6.1.tgz",
+      "integrity": "sha512-3HAAinAyCPessyQNNXe5W0OHzRfa8Yo5P748paPcmMowZ/4sMfaZ2ZB6e5x5khQI8NusOHj8nquoutd6FRY5WQ==",
+      "requires": {
+        "@react-spring/animated": "~9.6.1",
+        "@react-spring/rafz": "~9.6.1",
+        "@react-spring/shared": "~9.6.1",
+        "@react-spring/types": "~9.6.1"
+      }
+    },
+    "@react-spring/rafz": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.6.1.tgz",
+      "integrity": "sha512-v6qbgNRpztJFFfSE3e2W1Uz+g8KnIBs6SmzCzcVVF61GdGfGOuBrbjIcp+nUz301awVmREKi4eMQb2Ab2gGgyQ=="
+    },
+    "@react-spring/shared": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.6.1.tgz",
+      "integrity": "sha512-PBFBXabxFEuF8enNLkVqMC9h5uLRBo6GQhRMQT/nRTnemVENimgRd+0ZT4yFnAQ0AxWNiJfX3qux+bW2LbG6Bw==",
+      "requires": {
+        "@react-spring/rafz": "~9.6.1",
+        "@react-spring/types": "~9.6.1"
+      }
+    },
+    "@react-spring/types": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.6.1.tgz",
+      "integrity": "sha512-POu8Mk0hIU3lRXB3bGIGe4VHIwwDsQyoD1F394OK7STTiX9w4dG3cTLljjYswkQN+hDSHRrj4O36kuVa7KPU8Q=="
+    },
+    "@react-spring/web": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.6.1.tgz",
+      "integrity": "sha512-X2zR6q2Z+FjsWfGAmAXlQaoUHbPmfuCaXpuM6TcwXPpLE1ZD4A1eys/wpXboFQmDkjnrlTmKvpVna1MjWpZ5Hw==",
+      "requires": {
+        "@react-spring/animated": "~9.6.1",
+        "@react-spring/core": "~9.6.1",
+        "@react-spring/shared": "~9.6.1",
+        "@react-spring/types": "~9.6.1"
+      }
+    },
     "@reduxjs/toolkit": {
       "version": "1.8.6",
       "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.8.6.tgz",

package.json

@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@react-spring/shared": "^9.6.1",
+    "@react-spring/types": "^9.6.1",
+    "@react-spring/web": "^9.6.1",
     "@reduxjs/toolkit": "^1.8.6",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.3.0",

src/ui/Duel/spring/animated.ts

+// Copyright (c) 2020 hooke
+
+import { CSSProperties, ForwardRefExoticComponent, FC } from "react";
+import { FluidValue } from "@react-spring/shared";
+import {
+  AssignableKeys,
+  ComponentPropsWithRef,
+  ElementType,
+} from "@react-spring/types";
+import { Primitives } from "./primitives";
+
+type AnimatedPrimitives = {
+  [P in Primitives]: AnimatedComponent<FC<JSX.IntrinsicElements[P]>>;
+};
+
+/** The type of the `animated()` function */
+export type WithAnimated = {
+  <T extends ElementType>(wrappedComponent: T): AnimatedComponent<T>;
+} & AnimatedPrimitives;
+
+/** The type of an `animated()` component */
+export type AnimatedComponent<T extends ElementType> =
+  ForwardRefExoticComponent<AnimatedProps<ComponentPropsWithRef<T>>>;
+
+/** The props of an `animated()` component */
+export type AnimatedProps<Props extends object> = {
+  [P in keyof Props]: P extends "ref" | "key"
+    ? Props[P]
+    : AnimatedProp<Props[P]>;
+};
+
+// The animated prop value of a React element
+type AnimatedProp<T> = [T, T] extends [infer T, infer DT]
+  ? [DT] extends [never]
+    ? never
+    : DT extends void
+    ? undefined
+    : DT extends object
+    ? [AssignableKeys<DT, CSSProperties>] extends [never]
+      ? DT extends ReadonlyArray<any>
+        ? AnimatedStyles<DT>
+        : DT
+      : AnimatedStyle<T>
+    : DT | AnimatedLeaf<T>
+  : never;
+
+// An animated array of style objects
+type AnimatedStyles<T extends ReadonlyArray<any>> = {
+  [P in keyof T]: [T[P]] extends [infer DT]
+    ? DT extends object
+      ? [AssignableKeys<DT, CSSProperties>] extends [never]
+        ? DT extends ReadonlyArray<any>
+          ? AnimatedStyles<DT>
+          : DT
+        : { [P in keyof DT]: AnimatedProp<DT[P]> }
+      : DT
+    : never;
+};
+
+// An animated object of style attributes
+type AnimatedStyle<T> = [T, T] extends [infer T, infer DT]
+  ? DT extends void
+    ? undefined
+    : [DT] extends [never]
+    ? never
+    : DT extends object
+    ? { [P in keyof DT]: AnimatedStyle<DT[P]> }
+    : DT | AnimatedLeaf<T>
+  : never;
+
+// An animated primitive (or an array of them)
+type AnimatedLeaf<T> =
+  | Exclude<T, object | void>
+  | Extract<T, ReadonlyArray<number | string>> extends infer U
+  ? [U] extends [never]
+    ? never
+    : FluidValue<U | Exclude<T, object | void>>
+  : never;

src/ui/Duel/spring/customProps.ts

+// Copyright (c) 2020 hooke
+
+import { Color3, Color4, Vector3 } from "@babylonjs/core";
+import {
+  CustomPropsHandler,
+  ICustomPropsHandler,
+  PropChangeType,
+  PropertyUpdateProcessResult,
+} from "react-babylonjs";
+
+function parseRgbaString(rgba: string): number[] {
+  const arr: string[] = rgba.replace(/[^\d,]/g, "").split(",");
+  return arr.map((num) => parseInt(num, 10) / 255);
+}
+
+const Key = "react-babylon-spring";
+
+export class CustomColor3StringHandler
+  implements ICustomPropsHandler<string, Color3>
+{
+  get name() {
+    return `${Key}:Color3String`;
+  }
+
+  public propChangeType: string = PropChangeType.Color3;
+
+  accept(newProp: string): boolean {
+    return typeof newProp === "string";
+  }
+
+  process(
+    oldProp: string,
+    newProp: string
+  ): PropertyUpdateProcessResult<Color3> {
+    if (oldProp !== newProp) {
+      return {
+        processed: true,
+        value: Color3.FromArray(parseRgbaString(newProp)),
+      };
+    }
+
+    return { processed: false, value: null };
+  }
+}
+
+export class CustomColor3ArrayHandler
+  implements ICustomPropsHandler<number[], Color3>
+{
+  get name() {
+    return `${Key}:Color3Array`;
+  }
+
+  public propChangeType: string = PropChangeType.Color3;
+
+  accept(newProp: []): boolean {
+    return Array.isArray(newProp);
+  }
+
+  process(
+    oldProp: number[],
+    newProp: number[]
+  ): PropertyUpdateProcessResult<Color3> {
+    if (oldProp === undefined || oldProp.length !== newProp.length) {
+      // console.log(`found diff length (${oldProp?.length}/${newProp?.length}) Color3Array new? ${oldProp === undefined}`)
+      return {
+        processed: true,
+        value: Color3.FromArray(newProp),
+      };
+    }
+
+    for (let i = 0; i < oldProp.length; i++) {
+      if (oldProp[i] !== newProp[i]) {
+        // console.log('found diff value Color3Array')
+        return {
+          processed: true,
+          value: Color3.FromArray(newProp),
+        };
+      }
+    }
+
+    return { processed: false, value: null };
+  }
+}
+
+export class CustomColor4StringHandler
+  implements ICustomPropsHandler<string, Color4>
+{
+  get name() {
+    return `${Key}:Color4String`;
+  }
+
+  public propChangeType: string = PropChangeType.Color4;
+
+  accept(newProp: string): boolean {
+    return typeof newProp === "string";
+  }
+
+  process(
+    oldProp: string,
+    newProp: string
+  ): PropertyUpdateProcessResult<Color4> {
+    if (oldProp !== newProp) {
+      // console.log('found diff Color4String')
+      return {
+        processed: true,
+        value: Color4.FromArray(parseRgbaString(newProp)),
+      };
+    }
+
+    return { processed: false, value: null };
+  }
+}
+
+export class CustomVector3ArrayHandler
+  implements ICustomPropsHandler<number[], Vector3>
+{
+  get name() {
+    return `${Key}:Vector3Array`;
+  }
+
+  public propChangeType: string = PropChangeType.Vector3;
+
+  accept(newProp: []): boolean {
+    return Array.isArray(newProp);
+  }
+
+  process(
+    oldProp: number[],
+    newProp: number[]
+  ): PropertyUpdateProcessResult<Vector3> {
+    if (oldProp === undefined || oldProp.length !== newProp.length) {
+      // console.log(`found diff length (${oldProp?.length}/${newProp?.length}) Color3Array new? ${oldProp === undefined}`)
+      return {
+        processed: true,
+        value: Vector3.FromArray(newProp),
+      };
+    }
+
+    for (let i = 0; i < oldProp.length; i++) {
+      if (oldProp[i] !== newProp[i]) {
+        return {
+          processed: true,
+          value: Vector3.FromArray(newProp),
+        };
+      }
+    }
+
+    return { processed: false, value: null };
+  }
+}
+
+CustomPropsHandler.RegisterPropsHandler(new CustomColor3StringHandler());
+CustomPropsHandler.RegisterPropsHandler(new CustomColor3ArrayHandler());
+CustomPropsHandler.RegisterPropsHandler(new CustomColor4StringHandler());
+CustomPropsHandler.RegisterPropsHandler(new CustomVector3ArrayHandler());

src/ui/Duel/spring/index.ts

+// Copyright (c) 2020 hooke
+
+import { Globals } from "@react-spring/core";
+import { createHost } from "@react-spring/animated";
+import { createStringInterpolator } from "@react-spring/shared";
+import { applyInitialPropsToInstance } from "react-babylonjs";
+import { primitives } from "./primitives";
+import { WithAnimated } from "./animated";
+import "./customProps";
+
+// todo: frameLoop can use runRenderLoop
+Globals.assign({
+  createStringInterpolator,
+});
+
+const host = createHost(primitives, {
+  applyAnimatedValues: applyInitialPropsToInstance,
+});
+
+export const animated = host.animated as WithAnimated;
+export * from "./animated";
+export * from "@react-spring/core";

src/ui/Duel/spring/primitives.ts

+// Copyright (c) 2020 hooke
+
+import { intrinsicClassMap } from "react-babylonjs";
+
+const elements = Object.keys(intrinsicClassMap);
+
+/**
+ * https://github.com/react-spring/react-spring/blob/v9/targets/three/src/primitives.ts
+ */
+
+export type Primitives = keyof JSX.IntrinsicElements;
+
+export const primitives = ["primitive"].concat(elements) as Primitives[];