feat: add uniform scale handle to pivot controls

packages/handle/src/handles/pivot/index.ts

@@ -7,13 +7,15 @@ import { computeHandlesScale } from '../utils.js'
 import { PivotAxisRotationHandle } from './rotate.js'
 import { AxisTranslateHandle } from '../translate/axis.js'
 import { PlaneTranslateHandle } from '../translate/plane.js'
+import { PivotUniformScaleHandle } from './uniform-scale.js'
 
 const vectorHelper = new Vector3()
 
 export class PivotHandlesHandles extends Group {
   public readonly scaleX: PivotAxisScaleHandle
   public readonly scaleY: PivotAxisScaleHandle
   public readonly scaleZ: PivotAxisScaleHandle
+  public readonly scaleXYZ: PivotUniformScaleHandle
 
   public readonly rotationX: PivotAxisRotationHandle
   public readonly rotationY: PivotAxisRotationHandle
@@ -49,6 +51,8 @@ export class PivotHandlesHandles extends Group {
     this.scaleZ = new PivotAxisScaleHandle(context, 'z', 's')
     this.scaleZ.rotation.y = -Math.PI / 2
     this.add(this.scaleZ)
+    this.scaleXYZ = new PivotUniformScaleHandle(context, 's')
+    this.add(this.scaleXYZ)
     this.rotationX = new PivotAxisRotationHandle(context, 'x', 'r', this.xRotationAxis)
     this.add(this.rotationX)
     this.rotationY = new PivotAxisRotationHandle(context, 'y', 'r', this.yRotationAxis)
@@ -100,6 +104,7 @@ export class PivotHandlesHandles extends Group {
     const unbindScaleX = this.scaleX.bind(0xff2060, scale)
     const unbindScaleY = this.scaleY.bind(0x20df80, scale)
     const unbindScaleZ = this.scaleZ.bind(0x2080ff, scale)
+    const unbindScaleXYZ = this.scaleXYZ.bind(0xffffff, scale)
     const unbindRotationX = this.rotationX.bind(0xff2060, rotation)
     const unbindRotationY = this.rotationY.bind(0x20df80, rotation)
     const unbindRotationZ = this.rotationZ.bind(0x2080ff, rotation)
@@ -113,6 +118,7 @@ export class PivotHandlesHandles extends Group {
       unbindScaleX?.()
       unbindScaleY?.()
       unbindScaleZ?.()
+      unbindScaleXYZ?.()
       unbindRotationX?.()
       unbindRotationY?.()
       unbindRotationZ?.()
@@ -163,3 +169,4 @@ function computeLocalAxis(
 
 export * from './rotate.js'
 export * from './scale.js'
+export * from './uniform-scale.js'

packages/handle/src/handles/pivot/uniform-scale.ts

@@ -0,0 +1,48 @@
+import { BoxGeometry, ColorRepresentation, Mesh, MeshBasicMaterial } from 'three'
+import { HandlesContext } from '../context.js'
+import { HandlesProperties } from '../index.js'
+import { handleXRayMaterialProperties, setupHandlesContextHoverMaterial } from '../material.js'
+import { RegisteredHandle } from '../registered.js'
+import { extractHandleTransformOptions } from '../utils.js'
+
+export class PivotUniformScaleHandle extends RegisteredHandle {
+  constructor(context: HandlesContext, tagPrefix: string) {
+    super(context, 'xyz', tagPrefix, () => ({
+      scale: { uniform: true, ...this.options },
+      rotate: false,
+      translate: 'as-scale',
+      multitouch: false,
+    }))
+  }
+
+  bind(defaultColor: ColorRepresentation, config?: HandlesProperties) {
+    const { options, disabled } = extractHandleTransformOptions('xyz', config)
+    if (options === false) {
+      return undefined
+    }
+    this.options = options
+    const material = new MeshBasicMaterial(handleXRayMaterialProperties)
+    const cleanupHover = setupHandlesContextHoverMaterial(this.context, material, this.tag, {
+      color: defaultColor,
+      hoverColor: 0xffff40,
+      disabled,
+    })
+
+    const mesh = new Mesh(new BoxGeometry(0.08, 0.08, 0.08), material)
+    mesh.renderOrder = Infinity
+    mesh.pointerEventsOrder = Infinity
+    mesh.position.set(0.5, 0.5, 0.5)
+
+    const unregister = disabled ? undefined : this.context.registerHandle(this.store, mesh, this.tag)
+
+    this.add(mesh)
+
+    return () => {
+      material.dispose()
+      mesh.geometry.dispose()
+      unregister?.()
+      cleanupHover?.()
+      this.remove(mesh)
+    }
+  }
+}

packages/react/handle/src/handles/pivot.tsx

@@ -93,6 +93,10 @@ export const PivotHandlesHandles = forwardRef<PivotHandlesHandlesImpl, PivotHand
       () => (hidden ? undefined : handles.scaleZ.bind(0x2080ff, disabled ? disableProperties(scale) : scale)),
       [disabled, scale, handles, hidden],
     )
+    useEffect(
+      () => (hidden ? undefined : handles.scaleXYZ.bind(0xffffff, disabled ? disableProperties(scale) : scale)),
+      [disabled, scale, handles, hidden],
+    )
     useEffect(
       () => (hidden ? undefined : handles.rotationX.bind(0xff2060, disabled ? disableProperties(rotation) : rotation)),
       [disabled, rotation, handles, hidden],