bugfix/pulse-position

package.json

@@ -24,53 +24,53 @@
     "lint:fix": "eslint --fix ."
   },
   "dependencies": {
-    "classnames": "^2.3.2",
+    "classnames": "^2.5.1",
     "glslify-loader": "^2.0.0",
     "noisejs": "^2.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.4.3",
+    "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
-    "three": "^0.148.0",
+    "three": "^0.162.0",
     "three.meshline": "^1.4.0",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^3.5.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.5",
+    "@babel/core": "^7.24.3",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.18.6",
-    "@svgr/webpack": "^6.5.1",
+    "@babel/preset-env": "^7.24.3",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.24.1",
+    "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/node": "^18.11.10",
-    "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.0.9",
-    "@types/three": "^0.146.0",
-    "@typescript-eslint/eslint-plugin": "^5.46.1",
-    "babel-loader": "^9.1.0",
+    "@testing-library/react": "^14.2.2",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/node": "^20.11.30",
+    "@types/react": "^18.2.69",
+    "@types/react-dom": "^18.2.22",
+    "@types/three": "^0.162.0",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "babel-loader": "^9.1.3",
     "clean-webpack-plugin": "^4.0.0",
-    "css-loader": "^6.7.2",
-    "eslint": "^8.29.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-config-standard-with-typescript": "^24.0.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-n": "^15.6.0",
-    "eslint-plugin-prettier": "^4.2.1",
+    "css-loader": "^6.10.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-standard-with-typescript": "^43.0.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-n": "^17.0.0-5",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-react": "^7.31.11",
-    "html-webpack-plugin": "^5.5.0",
-    "mini-css-extract-plugin": "^2.7.2",
+    "eslint-plugin-react": "^7.34.1",
+    "html-webpack-plugin": "^5.6.0",
+    "mini-css-extract-plugin": "^2.8.1",
     "process": "^0.11.10",
     "raw-loader": "^4.0.2",
-    "style-loader": "^3.3.1",
-    "terser-webpack-plugin": "^5.3.6",
-    "typescript": "^4.9.4",
-    "webpack": "^5.75.0",
-    "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.11.1"
+    "style-loader": "^3.3.4",
+    "terser-webpack-plugin": "^5.3.10",
+    "typescript": "^5.4.3",
+    "webpack": "^5.91.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4"
   },
   "browserslist": {
     "production": [

src/components/Animation/index.tsx

@@ -1,31 +1,35 @@
-import React, { lazy, useContext, Fragment } from 'react';
-import { useOutletContext } from 'react-router-dom';
-import type { FC } from 'react';
+import React, { lazy, useContext, Fragment } from 'react'
+import { useOutletContext } from 'react-router-dom'
+import type { FC } from 'react'
 
-import * as animations from '../../shared/2d/animations';
-import DataContext, { IDataContext } from '../Context';
-import { Canvas } from '../Canvas';
-import { useCanvas } from '../../hooks';
-import type { IOutletContext, IProperty } from '../../shared/types';
-import type { CanvasAnimationsNames } from '../../router';
+import * as animations from '../../shared/2d/animations'
+import DataContext, { IDataContext } from '../Context'
+import { Canvas } from '../Canvas'
+import { useCanvas } from '../../hooks'
+import type { IOutletContext, IProperty, TAsyncImportedClass, TConstructorOf } from '../../shared/types'
+import type { CanvasAnimationsNames } from '../../router'
 
-const ParamHandlerContainer = lazy(() => import('../ParamHandlerContainer'));
+const ParamHandlerContainer = lazy(() => import('../ParamHandlerContainer'))
 
 export interface IAnimationProps {
 	classId: CanvasAnimationsNames;
 	properties: IProperty;
 }
 
 const Animation: FC<IAnimationProps> = ({ properties, classId }) => {
-	const { keyToggle } = useContext<IDataContext>(DataContext);
-	const { width: offset, isMobile } = useOutletContext<IOutletContext>();
+	const { keyToggle } = useContext<IDataContext>(DataContext)
+	const { width: offset, isMobile } = useOutletContext<IOutletContext>()
 
-	const { innerWidth, innerHeight, devicePixelRatio } = window;
-	const offsetWidth: number = isMobile ? 0 : offset;
+	const { innerWidth, innerHeight, devicePixelRatio } = window
+	const offsetWidth: number = isMobile ? 0 : offset
 
-	const AnimationClass = animations[classId];
+	const AnimationClass = animations[classId]
 
-	const [canvasRef, handlers] = useCanvas<typeof AnimationClass>(
+	const getAnimationModule = async () => {
+		return await AnimationClass()
+	}
+
+	const [canvasRef, handlers] = useCanvas<TAsyncImportedClass<typeof AnimationClass>>(
 		AnimationClass,
 		{
 			properties,
@@ -34,7 +38,7 @@ const Animation: FC<IAnimationProps> = ({ properties, classId }) => {
 			devicePixelRatio,
 			offset: offsetWidth,
 		}
-	);
+	)
 
 	return (
 		<Fragment key={+keyToggle.current}>
@@ -54,12 +58,12 @@ const Animation: FC<IAnimationProps> = ({ properties, classId }) => {
 					backgroundColor: properties.bgColor,
 					width: innerWidth - offsetWidth,
 					height: innerHeight,
-					position: 'absolute',
+					position: 'relative',
 					right: 0,
 				}}
 			/>
 		</Fragment>
-	);
-};
+	)
+}
 
-export default React.memo(Animation);
+export default React.memo(Animation)

src/components/AnimationGL/index.tsx

@@ -1,38 +1,40 @@
-import React, { lazy, useContext, Fragment } from 'react';
-import { useOutletContext } from 'react-router-dom';
-import type { FC } from 'react';
+import React, { lazy, useContext, Fragment } from 'react'
+import { useOutletContext } from 'react-router-dom'
+import type { FC } from 'react'
 
-import * as animations from '../../shared/2d/animations';
-import DataContext, { IDataContext } from '../Context';
-import { Canvas } from '../Canvas';
-import { useWebGL } from '../../hooks';
-import { FlyingCubesGL, FlyingLinesGL } from '../../shared/2d/animations';
-import type { CanvasAnimationsNames } from '../../router';
-import type { IOutletContext, IProperty } from '../../shared/types';
+import * as animations from '../../shared/2d/animations'
+import DataContext, { IDataContext } from '../Context'
+import { Canvas } from '../Canvas'
+import { useWebGL } from '../../hooks'
+import { FlyingCubesGL, FlyingLinesGL } from '../../shared/2d/animations'
+import type { CanvasAnimationsNames } from '../../router'
+import type { IOutletContext, IProperty } from '../../shared/types'
+import useWindowSize from '../../hooks/useWindowSize'
 
-const ParamHandlerContainer = lazy(() => import('../ParamHandlerContainer'));
+const ParamHandlerContainer = lazy(() => import('../ParamHandlerContainer'))
 
 export interface IAnimationGLProps {
 	properties: IProperty;
 	classId: CanvasAnimationsNames;
 }
 
 const AnimationGL: FC<IAnimationGLProps> = ({ properties, classId }) => {
-	const { keyToggle } = useContext<IDataContext>(DataContext);
-	const { width: offset, isMobile } = useOutletContext<IOutletContext>();
+	const { keyToggle } = useContext<IDataContext>(DataContext)
+	const { width: offset, isMobile } = useOutletContext<IOutletContext>()
 
-	const { innerWidth, innerHeight, devicePixelRatio } = window;
-	const offsetWidth: number = isMobile ? 0 : offset;
+	const { innerWidth, innerHeight, devicePixelRatio } = window
+	const [width, height] = useWindowSize()
+	const offsetWidth: number = isMobile ? 0 : offset
 
-	const AnimationClass = animations[classId];
+	const AnimationClass = animations[classId]
 
 	const [canvasRef, handlers] = useWebGL(AnimationClass, {
 		properties,
 		innerWidth,
 		innerHeight,
 		devicePixelRatio,
 		offset: offsetWidth,
-	});
+	})
 
 	return (
 		<Fragment key={+keyToggle.current}>
@@ -46,17 +48,17 @@ const AnimationGL: FC<IAnimationGLProps> = ({ properties, classId }) => {
 			/>
 			<Canvas
 				ref={canvasRef}
-				width={innerWidth - offsetWidth}
-				height={innerHeight}
+				width={width - offsetWidth}
+				height={height}
 				style={{
-					width: innerWidth - offsetWidth,
-					height: innerHeight,
+					width: width - offsetWidth,
+					height,
 					position: 'absolute',
 					right: 0,
 				}}
 			/>
 		</Fragment>
-	);
-};
+	)
+}
 
-export default React.memo(AnimationGL);
+export default React.memo(AnimationGL)

src/components/Canvas/index.tsx

@@ -1,21 +1,21 @@
-import React, { CSSProperties, forwardRef } from 'react';
+import React, { CSSProperties, forwardRef } from 'react'
 
 export interface ICanvasProps {
-	width: number;
-	height: number;
+	width?: number;
+	height?: number;
 	style?: CSSProperties;
 	props?: unknown[];
 }
 
 export const Canvas = forwardRef<HTMLCanvasElement, ICanvasProps>(
-	({ style, width, height, ...props }, ref) => (
+	({ style, ...props }, ref) => (
 		<canvas
 			ref={ref}
 			id={'canvas'}
 			style={style}
-			width={width}
-			height={height}
+			// width={width}
+			// height={height}
 			{...props}
 		/>
 	)
-);
+)

src/components/DropdownContent/index.tsx

@@ -1,26 +1,26 @@
-import React, { useCallback, useState } from 'react';
-import type { FC } from 'react';
+import React, { useCallback, useState } from 'react'
+import type { FC } from 'react'
 
-import DropdownItem from '../DropdownItem';
-import CopyIcon from '../../assets/copyIcon.svg';
-import { COPY_ANIMATION_DURATION } from '../../shared/constants';
-import type { IProperty, TValues } from '../../shared/types';
+import DropdownItem from '../DropdownItem'
+import CopyIcon from '../../assets/copyIcon.svg'
+import { COPY_ANIMATION_DURATION } from '../../shared/constants'
+import type { IProperty, TValues } from '../../shared/types'
 
 export interface IDropdownContent {
 	propertySet: IProperty;
 }
 
 const DropdownContent: FC<IDropdownContent> = ({ propertySet }) => {
-	const [isCopied, setIsCopied] = useState(false);
+	const [isCopied, setIsCopied] = useState(false)
 
 	const onListClick = useCallback(() => {
-		navigator.clipboard.writeText(JSON.stringify(propertySet, null, '\t'));
-		setIsCopied(true);
+		navigator.clipboard.writeText(JSON.stringify(propertySet, null, '\t'))
+		setIsCopied(true)
 
 		setTimeout(() => {
-			setIsCopied(false);
-		}, COPY_ANIMATION_DURATION);
-	}, [propertySet]);
+			setIsCopied(false)
+		}, COPY_ANIMATION_DURATION)
+	}, [propertySet])
 
 	return (
 		<ul className="DropdownContent">
@@ -40,7 +40,7 @@ const DropdownContent: FC<IDropdownContent> = ({ propertySet }) => {
 				)
 			)}
 		</ul>
-	);
-};
+	)
+}
 
-export default React.memo(DropdownContent);
+export default React.memo(DropdownContent)

src/components/DropdownItem/index.tsx

@@ -1,10 +1,10 @@
-import classNames from 'classnames';
-import React, { useCallback, useState } from 'react';
-import type { FC } from 'react';
+import classNames from 'classnames'
+import React, { useCallback, useState } from 'react'
+import type { FC } from 'react'
 
-import { COPY_ANIMATION_DURATION } from '../../shared/constants';
-import { parametersToString } from '../../shared/utils/helpers';
-import type { IProperty, TValues } from '../../shared/types';
+import { COPY_ANIMATION_DURATION } from '../../shared/constants'
+import { parametersToString } from '../../shared/utils/helpers'
+import type { IProperty, TValues } from '../../shared/types'
 
 export interface IDropdownItemProps {
 	propertyKey: string;
@@ -15,18 +15,18 @@ const DropdownItem: FC<IDropdownItemProps> = ({
 	propertyKey,
 	propertyValue,
 }) => {
-	const [isCopied, setIsCopied] = useState(false);
+	const [isCopied, setIsCopied] = useState(false)
 
 	const onItemClick = useCallback(() => {
 		navigator.clipboard.writeText(
 			`${propertyKey}: ${parametersToString(propertyValue)}`
-		);
-		setIsCopied(true);
+		)
+		setIsCopied(true)
 
 		setTimeout(() => {
-			setIsCopied(false);
-		}, COPY_ANIMATION_DURATION);
-	}, [propertyKey, propertyValue]);
+			setIsCopied(false)
+		}, COPY_ANIMATION_DURATION)
+	}, [propertyKey, propertyValue])
 
 	return (
 		<li className="CardPanel" onClick={onItemClick}>
@@ -37,7 +37,7 @@ const DropdownItem: FC<IDropdownItemProps> = ({
 				</span>
 			</p>
 		</li>
-	);
-};
+	)
+}
 
-export default React.memo(DropdownItem);
+export default React.memo(DropdownItem)