Add uniform scaling UI and fix collider resizing (#10302)

* Add uniform scaling UI and fix collider resizing * remove id usage and use react-icon --------- Co-authored-by: aditya-mitra <[email protected]>
EtherealEngine · Jun 3, 2024 · 4328e1b · 4328e1b
1 parent 9cdea6a
commit 4328e1b
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/packages/spatial/src/physics/components/ColliderComponent.tsx b/packages/spatial/src/physics/components/ColliderComponent.tsx
@@ -81,7 +81,7 @@ export const ColliderComponent = defineComponent({
   reactor: function () {
     const entity = useEntityContext()
     const component = useComponent(entity, ColliderComponent)
-    useComponent(entity, TransformComponent)
+    const transform = useComponent(entity, TransformComponent)
     const rigidbodyEntity = useAncestorWithComponent(entity, RigidBodyComponent)
 
     useEffect(() => {
@@ -97,7 +97,7 @@ export const ColliderComponent = defineComponent({
       return () => {
         Physics.removeCollider(physicsWorld, entity)
       }
-    }, [component.shape, rigidbodyEntity])
+    }, [component.shape, rigidbodyEntity, transform.scale])
 
     useLayoutEffect(() => {
       Physics.setMass(entity, component.mass.value)

diff --git a/packages/ui/src/components/editor/input/Vector3/index.tsx b/packages/ui/src/components/editor/input/Vector3/index.tsx
@@ -26,8 +26,10 @@ Ethereal Engine. All Rights Reserved.
 import { useHookstate } from '@etherealengine/hyperflux'
 import { Vector3_Zero } from '@etherealengine/spatial/src/common/constants/MathConstants'
 import React from 'react'
+import { MdLink, MdLinkOff } from 'react-icons/md'
 import { twMerge } from 'tailwind-merge'
 import { Vector3 } from 'three'
+import Button from '../../../../primitives/tailwind/Button'
 import Scrubber from '../../layout/Scrubber'
 import NumericInput from '../Numeric'
 
@@ -63,9 +65,9 @@ export const Vector3Scrubber = ({ axis, onChange, value, children, ...props }: V
   )
 }
 
-export const UniformButtonContainer: React.FC<{ children?: any }> = ({ children }) => {
+export const UniformButtonContainer: React.FC<{ children?: JSX.Element }> = ({ children }) => {
   return (
-    <div className="flex w-4 items-center hover:text-[color:var(--blueHover)] [&>*:where(label)]:text-[color:var(--textColor)] [&>*:where(ul)]:w-full">
+    <div className="flex w-6 items-center hover:text-[color:var(--blueHover)] [&>*:where(label)]:text-[color:var(--textColor)] [&>*:where(ul)]:w-full">
       {children}
     </div>
   )
@@ -93,7 +95,12 @@ export const Vector3Input = ({
   onRelease,
   ...rest
 }: Vector3InputProp) => {
-  const uniformEnabled = useHookstate(uniformScaling)
+  const uniformEnabled = useHookstate(false)
+
+  const onToggleUniform = () => {
+    uniformEnabled.set((v) => !v)
+  }
+
   const processChange = (field: string, fieldValue: number) => {
     if (uniformEnabled.value) {
       value.set(fieldValue, fieldValue, fieldValue)
@@ -117,7 +124,10 @@ export const Vector3Input = ({
   const vz = value.z
 
   return (
-    <div className="flex flex-row justify-start gap-1.5">
+    <div className="flex flex-row flex-wrap justify-start gap-1.5">
+      {uniformScaling && (
+        <Button startIcon={uniformEnabled.value ? <MdLink /> : <MdLinkOff />} onClick={onToggleUniform} />
+      )}
       <NumericInput
         {...rest}
         value={vx}