From 3837e179bb15707a4bdcd37bf86b1e09325d2580 Mon Sep 17 00:00:00 2001 From: Aria Minaei Date: Fri, 4 Aug 2023 10:54:17 +0200 Subject: [PATCH] WIP: Upgrade to THREE 155: Upgrade OrbitControls --- packages/playground/package.json | 3 +- .../src/shared/three-basic/ThreeScene.tsx | 4 +- packages/r3f/package.json | 14 +- packages/r3f/src/drei/OrthographicCamera.tsx | 2 +- packages/r3f/src/drei/PerspectiveCamera.tsx | 2 +- .../OrbitControls/OrbitControlsImpl.ts | 63 ++++--- .../components/OrbitControls/index.tsx | 92 ++++++---- packages/r3f/src/main/editable.tsx | 2 +- theatre/package.json | 8 +- .../CurveEditorPopover/EasingOption.tsx | 2 +- .../uiComponents/form/BasicNumberInput.tsx | 2 +- .../uiComponents/form/BasicStringInput.tsx | 6 +- .../toolbar/ToolbarIconButton.tsx | 2 +- yarn.lock | 166 +++++++++--------- 14 files changed, 202 insertions(+), 166 deletions(-) diff --git a/packages/playground/package.json b/packages/playground/package.json index 3204db1..266970b 100644 --- a/packages/playground/package.json +++ b/packages/playground/package.json @@ -31,13 +31,14 @@ "@types/node": "^15.6.2", "@types/react": "^18.2.18", "@types/react-dom": "^18.2.7", + "@types/styled-components": "^5.1.26", "@vitejs/plugin-react": "^4.0.0", "@vitejs/plugin-react-swc": "^3.3.2", "fast-glob": "^3.3.0", "lodash-es": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", - "styled-components": "^5.3.5", + "styled-components": "^5.3.11", "theatric": "workspace:*", "three": "^0.155.0", "typescript": "^4.4.2", diff --git a/packages/playground/src/shared/three-basic/ThreeScene.tsx b/packages/playground/src/shared/three-basic/ThreeScene.tsx index c971581..377c350 100644 --- a/packages/playground/src/shared/three-basic/ThreeScene.tsx +++ b/packages/playground/src/shared/three-basic/ThreeScene.tsx @@ -10,7 +10,7 @@ import { RawShaderMaterial, Scene, ShaderMaterial, - SphereBufferGeometry, + SphereGeometry, Vector2, Vector3, WebGLRenderer, @@ -190,7 +190,7 @@ export default function ThreeScene(props: ThreeSceneProps) { light.position.set(1, 5, 4) scene.add(light) - mesh = new Mesh(new SphereBufferGeometry(3), new MeshPhongMaterial()) + mesh = new Mesh(new SphereGeometry(3), new MeshPhongMaterial()) scene.add(mesh) // RAF diff --git a/packages/r3f/package.json b/packages/r3f/package.json index eddddea..7151fbb 100644 --- a/packages/r3f/package.json +++ b/packages/r3f/package.json @@ -56,8 +56,8 @@ "@types/node": "^15.6.2", "@types/react": "^18.2.18", "@types/react-dom": "^18.2.7", - "@types/styled-components": "^5.1.9", - "@types/three": "0.131.0", + "@types/styled-components": "^5.1.26", + "@types/three": "0.155.0", "esbuild": "^0.18.17", "esbuild-register": "^3.4.2", "lodash-es": "^4.17.21", @@ -66,18 +66,18 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-icons": "^4.2.0", - "react-merge-refs": "^1.1.0", - "react-shadow": "^19.0.3", - "react-use-measure": "^2.0.4", + "react-merge-refs": "^2.0.2", + "react-shadow": "^20.4.0", + "react-use-measure": "^2.1.1", "reakit": "^1.3.8", - "styled-components": "^5.3.5", + "styled-components": "^5.3.11", "three": "0.155.0", "three-stdlib": "^2.24.1", "typescript": "^4.4.2", "zustand": "^3.5.1" }, "peerDependencies": { - "@react-three/fiber": ">=7.0.6", + "@react-three/fiber": "^8.13.6", "@theatre/core": "*", "@theatre/studio": "*", "react": ">=17.0.2", diff --git a/packages/r3f/src/drei/OrthographicCamera.tsx b/packages/r3f/src/drei/OrthographicCamera.tsx index 0c55d24..ef72e48 100644 --- a/packages/r3f/src/drei/OrthographicCamera.tsx +++ b/packages/r3f/src/drei/OrthographicCamera.tsx @@ -4,7 +4,7 @@ import type { Object3D, } from 'three' import {useFrame, useThree} from '@react-three/fiber' -import mergeRefs from 'react-merge-refs' +import {mergeRefs} from 'react-merge-refs' import {editable} from '../index' import {Vector3} from 'three' import type {MutableRefObject} from 'react' diff --git a/packages/r3f/src/drei/PerspectiveCamera.tsx b/packages/r3f/src/drei/PerspectiveCamera.tsx index 830d67e..04f9552 100644 --- a/packages/r3f/src/drei/PerspectiveCamera.tsx +++ b/packages/r3f/src/drei/PerspectiveCamera.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import type {PerspectiveCamera as PerspectiveCameraImpl, Object3D} from 'three' import {useFrame, useThree} from '@react-three/fiber' -import mergeRefs from 'react-merge-refs' +import {mergeRefs} from 'react-merge-refs' import {editable} from '../index' import {Vector3} from 'three' import {editorStore} from '../main/store' diff --git a/packages/r3f/src/extension/components/OrbitControls/OrbitControlsImpl.ts b/packages/r3f/src/extension/components/OrbitControls/OrbitControlsImpl.ts index a00bc72..68bb92b 100644 --- a/packages/r3f/src/extension/components/OrbitControls/OrbitControlsImpl.ts +++ b/packages/r3f/src/extension/components/OrbitControls/OrbitControlsImpl.ts @@ -1,8 +1,6 @@ -/* eslint-disable */ +import type {Matrix4} from 'three' import { - Camera, EventDispatcher, - Matrix4, MOUSE, OrthographicCamera, PerspectiveCamera, @@ -13,6 +11,9 @@ import { Vector3, } from 'three' +// Almost an exact copy of https://github.com/pmndrs/three-stdlib/blob/4c04593ee49bb0b022025718844f3ce2b21f67bf/src/controls/OrbitControls.ts +// The only change is that we added `(if (altKey)` at line 866 to only rotate if alt key is pressed + // This set of controls performs orbiting, dollying (zooming), and panning. // Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default). // @@ -23,8 +24,8 @@ import { const moduloWrapAround = (offset: number, capacity: number) => ((offset % capacity) + capacity) % capacity -class OrbitControlsImpl extends EventDispatcher { - object: Camera +class OrbitControls extends EventDispatcher { + object: PerspectiveCamera | OrthographicCamera domElement: HTMLElement | undefined // Set to false to disable this control enabled = true @@ -73,13 +74,20 @@ class OrbitControlsImpl extends EventDispatcher { BOTTOM: 'ArrowDown', } // Mouse buttons - mouseButtons = { + mouseButtons: Partial<{ + LEFT: MOUSE + MIDDLE: MOUSE + RIGHT: MOUSE + }> = { LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN, } // Touch fingers - touches = {ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY_PAN} + touches: Partial<{ + ONE: TOUCH + TWO: TOUCH + }> = {ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY_PAN} target0: Vector3 position0: Vector3 zoom0: number @@ -93,13 +101,17 @@ class OrbitControlsImpl extends EventDispatcher { getDistance: () => number listenToKeyEvents: (domElement: HTMLElement) => void + stopListenToKeyEvents: () => void saveState: () => void reset: () => void update: () => void connect: (domElement: HTMLElement) => void dispose: () => void - constructor(object: Camera, domElement?: HTMLElement) { + constructor( + object: PerspectiveCamera | OrthographicCamera, + domElement?: HTMLElement, + ) { super() this.object = object @@ -108,7 +120,7 @@ class OrbitControlsImpl extends EventDispatcher { // for reset this.target0 = this.target.clone() this.position0 = this.object.position.clone() - this.zoom0 = this.object instanceof PerspectiveCamera ? this.object.zoom : 1 + this.zoom0 = this.object.zoom // // public methods @@ -166,20 +178,22 @@ class OrbitControlsImpl extends EventDispatcher { this._domElementKeyEvents = domElement } + this.stopListenToKeyEvents = (): void => { + this._domElementKeyEvents.removeEventListener('keydown', onKeyDown) + this._domElementKeyEvents = null + } + this.saveState = (): void => { scope.target0.copy(scope.target) scope.position0.copy(scope.object.position) - scope.zoom0 = - scope.object instanceof PerspectiveCamera ? scope.object.zoom : 1 + scope.zoom0 = scope.object.zoom } this.reset = (): void => { scope.target.copy(scope.target0) scope.object.position.copy(scope.position0) - if (scope.object instanceof PerspectiveCamera) { - scope.object.zoom = scope.zoom0 - scope.object.updateProjectionMatrix() - } + scope.object.zoom = scope.zoom0 + scope.object.updateProjectionMatrix() scope.dispatchEvent(changeEvent) @@ -191,12 +205,10 @@ class OrbitControlsImpl extends EventDispatcher { // this method is exposed, but perhaps it would be better if we can make it private... this.update = ((): (() => void) => { const offset = new Vector3() + const up = new Vector3(0, 1, 0) // so camera.up is the orbit axis - const quat = new Quaternion().setFromUnitVectors( - object.up, - new Vector3(0, 1, 0), - ) + const quat = new Quaternion().setFromUnitVectors(object.up, up) const quatInverse = quat.clone().invert() const lastPosition = new Vector3() @@ -207,6 +219,10 @@ class OrbitControlsImpl extends EventDispatcher { return function update(): boolean { const position = scope.object.position + // update new up direction + quat.setFromUnitVectors(object.up, up) + quatInverse.copy(quat).invert() + offset.copy(position).sub(scope.target) // rotate offset to "y-axis-is-up" space @@ -1059,8 +1075,11 @@ class OrbitControlsImpl extends EventDispatcher { // Zoom - middle mouse, or mousewheel / touch: two-finger spread or squish // Pan - left mouse, or arrow keys / touch: one-finger move -class MapControls extends OrbitControlsImpl { - constructor(object: Camera, domElement?: HTMLElement) { +class MapControls extends OrbitControls { + constructor( + object: PerspectiveCamera | OrthographicCamera, + domElement?: HTMLElement, + ) { super(object, domElement) this.screenSpacePanning = false // pan orthogonal to world-space direction camera.up @@ -1073,4 +1092,4 @@ class MapControls extends OrbitControlsImpl { } } -export {OrbitControlsImpl, MapControls} +export {OrbitControls as OrbitControlsImpl, MapControls} diff --git a/packages/r3f/src/extension/components/OrbitControls/index.tsx b/packages/r3f/src/extension/components/OrbitControls/index.tsx index f0590cf..e515d95 100644 --- a/packages/r3f/src/extension/components/OrbitControls/index.tsx +++ b/packages/r3f/src/extension/components/OrbitControls/index.tsx @@ -1,9 +1,12 @@ import type {EventManager, ReactThreeFiber} from '@react-three/fiber' import {useFrame, useThree} from '@react-three/fiber' import * as React from 'react' -import {forwardRef, useEffect, useMemo} from 'react' import type {Camera, Event} from 'three' -import {OrbitControlsImpl as OrbitControlsImpl} from './OrbitControlsImpl' +import {OrbitControlsImpl} from './OrbitControlsImpl' + +export type OrbitControlsChangeEvent = Event & { + target: EventTarget & {object: Camera} +} export type OrbitControlsProps = Omit< ReactThreeFiber.Overwrite< @@ -13,17 +16,21 @@ export type OrbitControlsProps = Omit< domElement?: HTMLElement enableDamping?: boolean makeDefault?: boolean - onChange?: (e?: Event) => void + onChange?: (e?: OrbitControlsChangeEvent) => void onEnd?: (e?: Event) => void onStart?: (e?: Event) => void regress?: boolean target?: ReactThreeFiber.Vector3 + keyEvents?: boolean | HTMLElement } >, 'ref' > -export const OrbitControls = forwardRef( +export const OrbitControls = React.forwardRef< + OrbitControlsImpl, + OrbitControlsProps +>( ( { makeDefault, @@ -31,6 +38,7 @@ export const OrbitControls = forwardRef( regress, domElement, enableDamping = true, + keyEvents = false, onChange, onStart, onEnd, @@ -38,56 +46,67 @@ export const OrbitControls = forwardRef( }, ref, ) => { - const invalidate = useThree(({invalidate}) => invalidate) - const defaultCamera = useThree(({camera}) => camera) - const gl = useThree(({gl}) => gl) - const events = useThree(({events}) => events) as EventManager - const set = useThree(({set}) => set) - const get = useThree(({get}) => get) - const performance = useThree(({performance}) => performance) - const explCamera = camera || defaultCamera - const explDomElement = - domElement || - (typeof events.connected !== 'boolean' ? events.connected : gl.domElement) - const controls = useMemo( + const invalidate = useThree((state) => state.invalidate) + const defaultCamera = useThree((state) => state.camera) + const gl = useThree((state) => state.gl) + const events = useThree( + (state) => state.events, + ) as EventManager + const setEvents = useThree((state) => state.setEvents) + const set = useThree((state) => state.set) + const get = useThree((state) => state.get) + const performance = useThree((state) => state.performance) + const explCamera = (camera || defaultCamera) as + | THREE.OrthographicCamera + | THREE.PerspectiveCamera + const explDomElement = (domElement || + events.connected || + gl.domElement) as HTMLElement + const controls = React.useMemo( () => new OrbitControlsImpl(explCamera), [explCamera], ) useFrame(() => { if (controls.enabled) controls.update() - }) + }, -1) - useEffect(() => { - const callback = (e: Event) => { + React.useEffect(() => { + if (keyEvents) { + controls.connect(keyEvents === true ? explDomElement : keyEvents) + } + + controls.connect(explDomElement) + return () => void controls.dispose() + }, [keyEvents, explDomElement, regress, controls, invalidate]) + + React.useEffect(() => { + const callback = (e: OrbitControlsChangeEvent) => { invalidate() if (regress) performance.regress() if (onChange) onChange(e) } - controls.connect(explDomElement!) - controls.addEventListener('change', callback) + const onStartCb = (e: Event) => { + if (onStart) onStart(e) + } - if (onStart) controls.addEventListener('start', onStart) - if (onEnd) controls.addEventListener('end', onEnd) + const onEndCb = (e: Event) => { + if (onEnd) onEnd(e) + } + + controls.addEventListener('change', callback) + controls.addEventListener('start', onStartCb) + controls.addEventListener('end', onEndCb) return () => { + controls.removeEventListener('start', onStartCb) + controls.removeEventListener('end', onEndCb) controls.removeEventListener('change', callback) - if (onStart) controls.removeEventListener('start', onStart) - if (onEnd) controls.removeEventListener('end', onEnd) - controls.dispose() } - }, [ - explDomElement, - onChange, - onStart, - onEnd, - regress, - controls, - invalidate, - ]) + }, [onChange, onStart, onEnd, controls, invalidate, setEvents]) - useEffect(() => { + React.useEffect(() => { if (makeDefault) { const old = get().controls set({controls}) @@ -105,5 +124,4 @@ export const OrbitControls = forwardRef( ) }, ) - export {OrbitControlsImpl} diff --git a/packages/r3f/src/main/editable.tsx b/packages/r3f/src/main/editable.tsx index e93ab16..dc1e3c2 100644 --- a/packages/r3f/src/main/editable.tsx +++ b/packages/r3f/src/main/editable.tsx @@ -2,7 +2,7 @@ import type {ComponentProps, ComponentType, Ref, RefAttributes} from 'react' import {useMemo, useState} from 'react' import React, {forwardRef, useEffect, useLayoutEffect, useRef} from 'react' import {allRegisteredObjects, editorStore} from './store' -import mergeRefs from 'react-merge-refs' +import {mergeRefs} from 'react-merge-refs' import useInvalidate from './useInvalidate' import {useCurrentSheet} from './SheetProvider' import defaultEditableFactoryConfig from './defaultEditableFactoryConfig' diff --git a/theatre/package.json b/theatre/package.json index 1036977..abee817 100644 --- a/theatre/package.json +++ b/theatre/package.json @@ -41,7 +41,7 @@ "@types/redux-actions": "^2.6.1", "@types/rollup": "0.54.0", "@types/shallowequal": "^1.1.1", - "@types/styled-components": "^5.1.9", + "@types/styled-components": "^5.1.26", "@types/uuid": "^8.3.0", "blob-compare": "1.1.0", "cross-env": "^7.0.3", @@ -69,8 +69,8 @@ "react-hot-toast": "^2.4.0", "react-icons": "^4.2.0", "react-is": "^17.0.2", - "react-merge-refs": "^1.1.0", - "react-shadow": "^19.0.3", + "react-merge-refs": "^2.0.2", + "react-shadow": "^20.4.0", "react-use": "^17.2.4", "react-use-gesture": "^9.1.3", "reakit": "^1.3.8", @@ -80,7 +80,7 @@ "rollup": "^2.56.3", "rollup-plugin-dts": "^4.0.0", "shallowequal": "^1.1.0", - "styled-components": "^5.3.5", + "styled-components": "^5.3.11", "timing-function": "^0.2.3", "typescript": "^4.4.2", "uuid": "^8.3.2" diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/EasingOption.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/EasingOption.tsx index e63b956..a358ce9 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/EasingOption.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/EasingOption.tsx @@ -3,7 +3,7 @@ import React from 'react' import styled, {css} from 'styled-components' import {handlesFromCssCubicBezierArgs} from './shared' import SVGCurveSegment from './SVGCurveSegment' -import mergeRefs from 'react-merge-refs' +import {mergeRefs} from 'react-merge-refs' import {COLOR_BASE} from './colors' import BasicPopover from '@theatre/studio/uiComponents/Popover/BasicPopover' diff --git a/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx b/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx index 8398427..ac71041 100644 --- a/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx +++ b/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx @@ -4,7 +4,7 @@ import {useEffect} from 'react' import {useState} from 'react' import React, {useMemo, useRef} from 'react' import styled from 'styled-components' -import mergeRefs from 'react-merge-refs' +import {mergeRefs} from 'react-merge-refs' import useRefAndState from '@theatre/studio/utils/useRefAndState' import useOnClickOutside from '@theatre/studio/uiComponents/useOnClickOutside' import useDrag from '@theatre/studio/uiComponents/useDrag' diff --git a/theatre/studio/src/uiComponents/form/BasicStringInput.tsx b/theatre/studio/src/uiComponents/form/BasicStringInput.tsx index 795e07e..3aa1397 100644 --- a/theatre/studio/src/uiComponents/form/BasicStringInput.tsx +++ b/theatre/studio/src/uiComponents/form/BasicStringInput.tsx @@ -1,8 +1,8 @@ import styled from 'styled-components' -import type {MutableRefObject} from 'react'; -import { useEffect} from 'react' +import type {MutableRefObject} from 'react' +import {useEffect} from 'react' import React, {useMemo, useRef} from 'react' -import mergeRefs from 'react-merge-refs' +import {mergeRefs} from 'react-merge-refs' import useRefAndState from '@theatre/studio/utils/useRefAndState' import useOnClickOutside from '@theatre/studio/uiComponents/useOnClickOutside' diff --git a/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx b/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx index 08e5fef..5a3fa8f 100644 --- a/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx +++ b/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx @@ -3,7 +3,7 @@ import {pointerEventsAutoInNormalMode} from '@theatre/studio/css' import React from 'react' import type {$FixMe, $IntentionalAny} from '@theatre/shared/utils/types' import useTooltip from '@theatre/studio/uiComponents/Popover/useTooltip' -import mergeRefs from 'react-merge-refs' +import {mergeRefs} from 'react-merge-refs' import MinimalTooltip from '@theatre/studio/uiComponents/Popover/MinimalTooltip' import ToolbarSwitchSelectContainer from './ToolbarSwitchSelectContainer' diff --git a/yarn.lock b/yarn.lock index 041754e..4b5af90 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7934,8 +7934,8 @@ __metadata: "@types/node": ^15.6.2 "@types/react": ^18.2.18 "@types/react-dom": ^18.2.7 - "@types/styled-components": ^5.1.9 - "@types/three": 0.131.0 + "@types/styled-components": ^5.1.26 + "@types/three": 0.155.0 esbuild: ^0.18.17 esbuild-register: ^3.4.2 lodash-es: ^4.17.21 @@ -7944,17 +7944,17 @@ __metadata: react: ^18.2.0 react-dom: ^18.2.0 react-icons: ^4.2.0 - react-merge-refs: ^1.1.0 - react-shadow: ^19.0.3 - react-use-measure: ^2.0.4 + react-merge-refs: ^2.0.2 + react-shadow: ^20.4.0 + react-use-measure: ^2.1.1 reakit: ^1.3.8 - styled-components: ^5.3.5 + styled-components: ^5.3.11 three: 0.155.0 three-stdlib: ^2.24.1 typescript: ^4.4.2 zustand: ^3.5.1 peerDependencies: - "@react-three/fiber": ">=7.0.6" + "@react-three/fiber": ^8.13.6 "@theatre/core": "*" "@theatre/studio": "*" react: ">=17.0.2" @@ -8037,6 +8037,13 @@ __metadata: languageName: node linkType: hard +"@tweenjs/tween.js@npm:~18.6.4": + version: 18.6.4 + resolution: "@tweenjs/tween.js@npm:18.6.4" + checksum: 47208db3f6c32cde80284a852d0fca016284f90c4798eb4ebb2ebfc2e379504007bf0c031c2c33044df8a0878fd1942ebc4e0b7f5b8bcccf812b532ea1ee73eb + languageName: node + linkType: hard + "@types/argparse@npm:1.0.38": version: 1.0.38 resolution: "@types/argparse@npm:1.0.38" @@ -8356,7 +8363,7 @@ __metadata: languageName: node linkType: hard -"@types/js-cookie@npm:2.2.6, @types/js-cookie@npm:^2.2.6": +"@types/js-cookie@npm:^2.2.6": version: 2.2.6 resolution: "@types/js-cookie@npm:2.2.6" checksum: 97c50ff6cd0a27409b028aad94b0c4eb5cc43623532a1bdbbcccdb200539593eff3cc7f0d874b6b9bee586167638e3a10093c811ff6603ff2a9639564c82b3b1 @@ -8796,14 +8803,21 @@ __metadata: languageName: node linkType: hard -"@types/styled-components@npm:^5.1.9": - version: 5.1.9 - resolution: "@types/styled-components@npm:5.1.9" +"@types/stats.js@npm:*": + version: 0.17.0 + resolution: "@types/stats.js@npm:0.17.0" + checksum: ac8dc5e622fa3b7cc37b9e21663193a2f171a4f5896285e4dfc04f2874acbb75edc958f077bffbd85b0ae358daa5bf4ecbc71210386a4300bff05d09435e35f9 + languageName: node + linkType: hard + +"@types/styled-components@npm:^5.1.26": + version: 5.1.26 + resolution: "@types/styled-components@npm:5.1.26" dependencies: "@types/hoist-non-react-statics": "*" "@types/react": "*" csstype: ^3.0.2 - checksum: 99b5e069a01980b6baec40ecb273bcb51baabbb5ca12905e59d575ab8672e2db1b60a5cf3715214ccf99597d4094aebbaa5d5c54c314332332fe6ec41a19e6c6 + checksum: 84f53b3101739b20d1731554fb7735bc2f3f5d050a8b392e9845403c8c8bbd729737d033978649f9195a97b557875b010d46e35a4538564a2d0dbcce661dbf76 languageName: node linkType: hard @@ -8823,10 +8837,17 @@ __metadata: languageName: node linkType: hard -"@types/three@npm:0.131.0": - version: 0.131.0 - resolution: "@types/three@npm:0.131.0" - checksum: 3d8def97d9a42855a7726f26bfd3339fc6f0565adf6206852cb2d6e4296af8372fb5dc9c39312fa8472824776664e16b20f860e7560697f0a3ec4e8db222dcb9 +"@types/three@npm:0.155.0": + version: 0.155.0 + resolution: "@types/three@npm:0.155.0" + dependencies: + "@tweenjs/tween.js": ~18.6.4 + "@types/stats.js": "*" + "@types/webxr": "*" + fflate: ~0.6.9 + lil-gui: ~0.17.0 + meshoptimizer: ~0.18.1 + checksum: decd966b198ad0f24febcbd16a2c3ff584e7b0f7f89e70c2ecb8c1a7842598a51f79cd0965220aa74d216ab4474ca2f6e4023904aa7ca0f38c93fc8b99e2a0d6 languageName: node linkType: hard @@ -8885,7 +8906,7 @@ __metadata: languageName: node linkType: hard -"@types/webxr@npm:^0.5.2": +"@types/webxr@npm:*, @types/webxr@npm:^0.5.2": version: 0.5.2 resolution: "@types/webxr@npm:0.5.2" checksum: e3387c3d64c140557796a4bcececd82d912a88f73ff8e34bf51c04d44078390fbe4756b256b2844b1ae4664a883d46f96bb40913d21f12e9ab484d9d8dbc68c3 @@ -9929,7 +9950,7 @@ __metadata: languageName: node linkType: hard -"@xobotyi/scrollbar-width@npm:1.9.5, @xobotyi/scrollbar-width@npm:^1.9.5": +"@xobotyi/scrollbar-width@npm:^1.9.5": version: 1.9.5 resolution: "@xobotyi/scrollbar-width@npm:1.9.5" checksum: e880c8696bd6c7eedaad4e89cc7bcfcd502c22dc6c061288ffa7f5a4fe5dab4aa2358bdd68e7357bf0334dc8b56724ed9bee05e010b60d83a3bb0d855f3d886f @@ -13207,7 +13228,7 @@ __metadata: languageName: node linkType: hard -"copy-to-clipboard@npm:^3.2.0, copy-to-clipboard@npm:^3.3.1": +"copy-to-clipboard@npm:^3.3.1": version: 3.3.1 resolution: "copy-to-clipboard@npm:3.3.1" dependencies: @@ -14134,7 +14155,7 @@ __metadata: languageName: node linkType: hard -"debounce@npm:^1.2.0, debounce@npm:^1.2.1": +"debounce@npm:^1.2.1": version: 1.2.1 resolution: "debounce@npm:1.2.1" checksum: 682a89506d9e54fb109526f4da255c5546102fbb8e3ae75eef3b04effaf5d4853756aee97475cd4650641869794e44f410eeb20ace2b18ea592287ab2038519e @@ -17478,7 +17499,7 @@ __metadata: languageName: node linkType: hard -"fflate@npm:^0.6.9": +"fflate@npm:^0.6.9, fflate@npm:~0.6.9": version: 0.6.10 resolution: "fflate@npm:0.6.10" checksum: 96384bc4090987fe565c0de8204e3830f538144ec950576fea50aee1b42adbe9fc3ed5e7905dfa7979faaa20979def330dbebce548f3dcafc3e118cc9838526d @@ -22510,6 +22531,13 @@ fsevents@^1.2.7: languageName: node linkType: hard +"lil-gui@npm:~0.17.0": + version: 0.17.0 + resolution: "lil-gui@npm:0.17.0" + checksum: a6f33e90748ea98477f1f7af6d6cbdc4a1b38ce9da86d674d73f7b0bbdc7f3e947d81edee04c32f33fb28c69a108ba04c24270a8398064ffcc56ffeabc0a916e + languageName: node + linkType: hard + "lilconfig@npm:2.0.5, lilconfig@npm:^2.0.3, lilconfig@npm:^2.0.5": version: 2.0.5 resolution: "lilconfig@npm:2.0.5" @@ -23175,6 +23203,13 @@ fsevents@^1.2.7: languageName: node linkType: hard +"meshoptimizer@npm:~0.18.1": + version: 0.18.1 + resolution: "meshoptimizer@npm:0.18.1" + checksum: 101dbed8abd4cf167cdb7a0bc13db90dd0743332c689e43b18cc5254d238f0766750752432401fa63dc7e9e32399ef68daacf48f0d89db1484042c1761c7362d + languageName: node + linkType: hard + "methods@npm:~1.1.2": version: 1.1.2 resolution: "methods@npm:1.1.2" @@ -23695,7 +23730,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"nano-css@npm:^5.2.1, nano-css@npm:^5.3.1": +"nano-css@npm:^5.3.1": version: 5.3.1 resolution: "nano-css@npm:5.3.1" dependencies: @@ -25397,13 +25432,14 @@ fsevents@^1.2.7: "@types/node": ^15.6.2 "@types/react": ^18.2.18 "@types/react-dom": ^18.2.7 + "@types/styled-components": ^5.1.26 "@vitejs/plugin-react": ^4.0.0 "@vitejs/plugin-react-swc": ^3.3.2 fast-glob: ^3.3.0 lodash-es: ^4.17.21 react: ^18.2.0 react-dom: ^18.2.0 - styled-components: ^5.3.5 + styled-components: ^5.3.11 theatric: "workspace:*" three: ^0.155.0 typescript: ^4.4.2 @@ -27997,6 +28033,13 @@ fsevents@^1.2.7: languageName: node linkType: hard +"react-merge-refs@npm:^2.0.2": + version: 2.0.2 + resolution: "react-merge-refs@npm:2.0.2" + checksum: 64758870d79ad52e6666d1d30cdecd5a72722edfd5c89808b41acdbd81a039f0c78b8b576f7ae247010468fc45cb57dd31f402693c64224439dbe0127f4389f3 + languageName: node + linkType: hard + "react-reconciler@npm:^0.27.0": version: 0.27.0 resolution: "react-reconciler@npm:0.27.0" @@ -28175,17 +28218,16 @@ fsevents@^1.2.7: languageName: node linkType: hard -"react-shadow@npm:^19.0.3": - version: 19.0.3 - resolution: "react-shadow@npm:19.0.3" +"react-shadow@npm:^20.4.0": + version: 20.4.0 + resolution: "react-shadow@npm:20.4.0" dependencies: humps: ^2.0.1 - react-use: ^15.3.3 peerDependencies: prop-types: ^15.0.0 - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.0.0 || ^17.0.0 - checksum: eb789ac10a85bf872406493189916a60aacec07a4eaaaf5b15d7fc8f7de3bfb9b1531f17dd899c6270700b6e964c828355798bc06e688c71a372272cbd8a5729 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 + checksum: 88be6a3f2ed8336116458585d3acd09d2c21b43bd857dac305c72d26b13e9d0c56a21db1c6cc49cecaa92f976b563b8cd487c19ee4e8f1ffb0ad13ea677f021e languageName: node linkType: hard @@ -28208,18 +28250,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"react-use-measure@npm:^2.0.4": - version: 2.0.4 - resolution: "react-use-measure@npm:2.0.4" - dependencies: - debounce: ^1.2.0 - peerDependencies: - react: ">=16.13" - react-dom: ">=16.13" - checksum: cbaf8896f14bb4b3259a39181b8cd26bf8291cda5f02729f6f977169145acfa1b727d9a99710f20329eb717bad189f599a1616e735053ff07f9ae0a0bd7fd206 - languageName: node - linkType: hard - "react-use-measure@npm:^2.1.1": version: 2.1.1 resolution: "react-use-measure@npm:2.1.1" @@ -28232,31 +28262,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"react-use@npm:^15.3.3": - version: 15.3.8 - resolution: "react-use@npm:15.3.8" - dependencies: - "@types/js-cookie": 2.2.6 - "@xobotyi/scrollbar-width": 1.9.5 - copy-to-clipboard: ^3.2.0 - fast-deep-equal: ^3.1.3 - fast-shallow-equal: ^1.0.0 - js-cookie: ^2.2.1 - nano-css: ^5.2.1 - react-universal-interface: ^0.6.2 - resize-observer-polyfill: ^1.5.1 - screenfull: ^5.0.0 - set-harmonic-interval: ^1.0.1 - throttle-debounce: ^2.1.0 - ts-easing: ^0.2.0 - tslib: ^2.0.0 - peerDependencies: - react: ^16.8.0 || ^17.0.0 - react-dom: ^16.8.0 || ^17.0.0 - checksum: 732a21f7c2295556d9cd501188644b9191f85370b5dc6347277e06c52dfe2ecf376c869056084ee7c7d4e57b8c5f723a3f00ee818f6cf59409b93cf704dbef33 - languageName: node - linkType: hard - "react-use@npm:^17.2.4": version: 17.2.4 resolution: "react-use@npm:17.2.4" @@ -29624,7 +29629,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"screenfull@npm:^5.0.0, screenfull@npm:^5.1.0": +"screenfull@npm:^5.1.0": version: 5.1.0 resolution: "screenfull@npm:5.1.0" checksum: e8ab486ba2310055aeabd84d8f76f1c9e729669942a4b1bdd675131333076ac9ee6655fb41c2507de3be93865e120cf3641e5ff636090f9e2458170827e650c7 @@ -31105,9 +31110,9 @@ fsevents@^1.2.7: languageName: node linkType: hard -"styled-components@npm:^5.3.5": - version: 5.3.5 - resolution: "styled-components@npm:5.3.5" +"styled-components@npm:^5.3.11": + version: 5.3.11 + resolution: "styled-components@npm:5.3.11" dependencies: "@babel/helper-module-imports": ^7.0.0 "@babel/traverse": ^7.4.5 @@ -31123,7 +31128,7 @@ fsevents@^1.2.7: react: ">= 16.8.0" react-dom: ">= 16.8.0" react-is: ">= 16.8.0" - checksum: 05a664dfe423c2906959a0f3f47f9b1ad630e493eb2e06deea0dc0906af33ba5ca17277b98948a6c9642e73894d6533391aebf45576489f5afe920c974e9f8eb + checksum: 10edd4dae3b0231ec02d86bdd09c88e894eedfa7e9d4f8e562b09fb69c67a27d586cbcf35c785002d59b3bf11e6c0940b0efce40d13ae9ed148b26b1dc8f3284 languageName: node linkType: hard @@ -31627,7 +31632,7 @@ fsevents@^1.2.7: "@types/redux-actions": ^2.6.1 "@types/rollup": 0.54.0 "@types/shallowequal": ^1.1.1 - "@types/styled-components": ^5.1.9 + "@types/styled-components": ^5.1.26 "@types/uuid": ^8.3.0 blob-compare: 1.1.0 cross-env: ^7.0.3 @@ -31657,8 +31662,8 @@ fsevents@^1.2.7: react-hot-toast: ^2.4.0 react-icons: ^4.2.0 react-is: ^17.0.2 - react-merge-refs: ^1.1.0 - react-shadow: ^19.0.3 + react-merge-refs: ^2.0.2 + react-shadow: ^20.4.0 react-use: ^17.2.4 react-use-gesture: ^9.1.3 reakit: ^1.3.8 @@ -31668,7 +31673,7 @@ fsevents@^1.2.7: rollup: ^2.56.3 rollup-plugin-dts: ^4.0.0 shallowequal: ^1.1.0 - styled-components: ^5.3.5 + styled-components: ^5.3.11 timing-function: ^0.2.3 typescript: ^4.4.2 uuid: ^8.3.2 @@ -31793,13 +31798,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"throttle-debounce@npm:^2.1.0": - version: 2.3.0 - resolution: "throttle-debounce@npm:2.3.0" - checksum: 6d90aa2ddb294f8dad13d854a1cfcd88fdb757469669a096a7da10f515ee466857ac1e750649cb9da931165c6f36feb448318e7cb92570f0a3679d20e860a925 - languageName: node - linkType: hard - "throttle-debounce@npm:^3.0.1": version: 3.0.1 resolution: "throttle-debounce@npm:3.0.1" @@ -32181,7 +32179,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"tslib@npm:^2.0.0, tslib@npm:^2.0.3, tslib@npm:^2.1.0": +"tslib@npm:^2.0.3, tslib@npm:^2.1.0": version: 2.1.0 resolution: "tslib@npm:2.1.0" checksum: aa189c8179de0427b0906da30926fd53c59d96ec239dff87d6e6bc831f608df0cbd6f77c61dabc074408bd0aa0b9ae4ec35cb2c15f729e32f37274db5730cb78