disable axis individually

Author: bbohlender

examples/editor/app.tsx

@@ -628,7 +628,7 @@ const SelectablePivotHandles = forwardRef<
     <group ref={groupRef} onClick={() => useSceneStore.setState({ selected: target })}>
       <PivotHandles
         size={size}
-        enabled={isSelected}
+        hidden={!isSelected}
         apply={(state, target) => applyWithAudioEffect(state, target, apply)}
         ref={ref}
       >

packages/handle/src/handles/context.ts

@@ -49,12 +49,7 @@ export class HandlesContext {
     store: HandleStore<unknown>,
     object: Object3D<PointerEventsMap & Object3DEventMap>,
     tag: string,
-    enabled: boolean = true,
   ): () => void {
-    if (!enabled) {
-      return () => {}
-    }
-
     const entry: (typeof this.handles)[number] = {
       object,
       store,

packages/handle/src/handles/index.ts

@@ -1,15 +1,15 @@
-import type { Vector2Tuple, ColorRepresentation } from 'three'
+import type { Vector2Tuple } from 'three'
 import type { Axis } from '../state.js'
 
 export type HandlesProperties =
   | boolean
   | {
-      x?: boolean | Vector2Tuple
-      y?: boolean | Vector2Tuple
-      z?: boolean | Vector2Tuple
-      e?: boolean | Vector2Tuple
-      enabled?: boolean
+      x?: boolean | Vector2Tuple | 'disabled'
+      y?: boolean | Vector2Tuple | 'disabled'
+      z?: boolean | Vector2Tuple | 'disabled'
+      e?: boolean | Vector2Tuple | 'disabled'
     }
+  | 'disabled'
   | Axis
   | 'e'
 

packages/handle/src/handles/material.ts

@@ -18,27 +18,28 @@ export function setupHandlesContextHoverMaterial(
     hoverColor,
     hoverOpacity,
     opacity,
-    enabled = true,
+    disabled = false,
   }: {
     color: ColorRepresentation
-    enabled?: boolean
+    disabled?: boolean
     opacity?: number
     hoverColor?: ColorRepresentation
     hoverOpacity?: number
   },
 ) {
-  if (hoverColor == null && hoverOpacity == null) {
+  if ((hoverColor == null && hoverOpacity == null) || disabled) {
+    material.color.set(color)
+    material.opacity = opacity ?? 1
+    if (disabled) {
+      material.opacity *= 0.5
+      material.color.lerp(new Color(1, 1, 1), 0.5)
+    }
     return
   }
   hoverColor ??= color
   return context.subscribeHover((tags) => {
-    const isHovered = enabled ? tags.some((activeTag) => activeTag.includes(tag)) : false
+    const isHovered = tags.some((activeTag) => activeTag.includes(tag))
     material.color.set(isHovered ? hoverColor : color)
     material.opacity = (isHovered ? hoverOpacity : opacity) ?? 1
-
-    if (!enabled) {
-      material.opacity *= 0.5
-      material.color.lerp(new Color(1, 1, 1), 0.5)
-    }
   })
 }

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

@@ -17,7 +17,7 @@ export class PivotAxisRotationHandle extends RegisteredHandle {
   }
 
   bind(defaultColor: ColorRepresentation, config?: HandlesProperties) {
-    const options = extractHandleTransformOptions(this.axis, config)
+    const { options, disabled } = extractHandleTransformOptions(this.axis, config)
     if (options === false) {
       return undefined
     }
@@ -28,7 +28,7 @@ export class PivotAxisRotationHandle extends RegisteredHandle {
     const cleanupHover = setupHandlesContextHoverMaterial(this.context, material, this.tag, {
       color: defaultColor,
       hoverColor: 0xffff40,
-      enabled: options.enabled,
+      disabled,
     })
 
     const visualizationMesh = new Mesh(new TorusGeometry(0.45, 0.0075, 3, 64, Math.PI / 2), material)
@@ -43,13 +43,13 @@ export class PivotAxisRotationHandle extends RegisteredHandle {
     interactionMesh.rotation.set(0, Math.PI / 2, Math.PI / 2)
     this.add(interactionMesh)
 
-    const unregister = this.context.registerHandle(this.store, interactionMesh, this.tag, options.enabled)
+    const unregister = disabled ? undefined : this.context.registerHandle(this.store, interactionMesh, this.tag)
 
     return () => {
       material.dispose()
       interactionMesh.geometry.dispose()
       visualizationMesh.geometry.dispose()
-      unregister()
+      unregister?.()
       cleanupHover?.()
       this.remove(visualizationMesh)
       this.remove(interactionMesh)

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

@@ -17,7 +17,7 @@ export class PivotAxisScaleHandle extends RegisteredHandle {
   }
 
   bind(defaultColor: ColorRepresentation, config?: HandlesProperties) {
-    const options = extractHandleTransformOptions(this.axis, config)
+    const { options, disabled } = extractHandleTransformOptions(this.axis, config)
     if (options === false) {
       return undefined
     }
@@ -26,22 +26,22 @@ export class PivotAxisScaleHandle extends RegisteredHandle {
     const cleanupHover = setupHandlesContextHoverMaterial(this.context, material, this.tag, {
       color: defaultColor,
       hoverColor: 0xffff40,
-      enabled: options.enabled,
+      disabled,
     })
 
     const mesh = new Mesh(new SphereGeometry(0.04), material)
     mesh.renderOrder = Infinity
     mesh.pointerEventsOrder = Infinity
     mesh.position.x = 0.68
 
-    const unregister = this.context.registerHandle(this.store, mesh, this.tag, options.enabled)
+    const unregister = disabled ? undefined : this.context.registerHandle(this.store, mesh, this.tag)
 
     this.add(mesh)
 
     return () => {
       material.dispose()
       mesh.geometry.dispose()
-      unregister()
+      unregister?.()
       cleanupHover?.()
       this.remove(mesh)
     }

packages/handle/src/handles/registered.ts

@@ -5,7 +5,7 @@ import { extractHandleTransformOptions } from './utils.js'
 
 export class RegisteredHandle extends Group {
   public readonly store: HandleStore<unknown>
-  protected options: Exclude<ReturnType<typeof extractHandleTransformOptions>, false> | undefined
+  protected options: Exclude<ReturnType<typeof extractHandleTransformOptions>['options'], false> | undefined
   protected readonly tag: string
 
   constructor(

packages/handle/src/handles/rotate/axis.ts

@@ -97,7 +97,7 @@ export class AxisRotateHandle extends RegisteredHandle {
   }
 
   bind(defaultColor: ColorRepresentation, config?: HandlesProperties) {
-    const options = extractHandleTransformOptions(this.axis, config)
+    const { options, disabled } = extractHandleTransformOptions(this.axis, config)
     if (options === false) {
       return undefined
     }
@@ -108,6 +108,7 @@ export class AxisRotateHandle extends RegisteredHandle {
     const cleanupHover = setupHandlesContextHoverMaterial(this.context, material, this.tag, {
       color: defaultColor,
       hoverColor: 0xffff00,
+      disabled,
     })
     const visualizationMesh = new Mesh(createCircleGeometry(0.5, 0.5), material)
     visualizationMesh.renderOrder = Infinity
@@ -120,13 +121,13 @@ export class AxisRotateHandle extends RegisteredHandle {
     interactionMesh.rotation.set(0, -Math.PI / 2, -Math.PI / 2)
     this.add(interactionMesh)
 
-    const unregister = this.context.registerHandle(this.store, interactionMesh, this.tag)
+    const unregister = disabled ? undefined : this.context.registerHandle(this.store, interactionMesh, this.tag)
 
     return () => {
       material.dispose()
       interactionMesh.geometry.dispose()
       visualizationMesh.geometry.dispose()
-      unregister()
+      unregister?.()
       cleanupHover?.()
       this.remove(interactionMesh)
       this.remove(visualizationMesh)

packages/handle/src/handles/rotate/free.ts

@@ -38,7 +38,7 @@ export class FreeRotateHandle extends RegisteredHandle {
   }
 
   bind(config?: HandlesProperties) {
-    const options = extractHandleTransformOptions(this.axis, config)
+    const { options, disabled } = extractHandleTransformOptions(this.axis, config)
     if (options === false) {
       return undefined
     }
@@ -50,6 +50,7 @@ export class FreeRotateHandle extends RegisteredHandle {
       color: 0xffffff,
       hoverColor: 0xffff00,
       opacity: 0.25,
+      disabled,
     })
     const visualizationMesh = new Mesh(createCircleGeometry(0.5, 1), material)
     visualizationMesh.renderOrder = Infinity
@@ -61,14 +62,14 @@ export class FreeRotateHandle extends RegisteredHandle {
     interactionMesh.pointerEventsOrder = Infinity
     this.add(interactionMesh)
 
-    const unregister = this.context.registerHandle(this.store, interactionMesh, this.tag)
+    const unregister = disabled ? undefined : this.context.registerHandle(this.store, interactionMesh, this.tag)
 
     return () => {
       this.pointerEvents = 'none'
       material.dispose()
       interactionMesh.geometry.dispose()
       visualizationMesh.geometry.dispose()
-      unregister()
+      unregister?.()
       cleanupHover?.()
       this.remove(interactionMesh)
       this.remove(visualizationMesh)

packages/handle/src/handles/rotate/screen.ts

@@ -42,7 +42,7 @@ export class ScreenSpaceRotateHandle extends RegisteredHandle {
   }
 
   bind(config?: HandlesProperties) {
-    const options = extractHandleTransformOptions(this.axis, config)
+    const { options, disabled } = extractHandleTransformOptions(this.axis, config)
     if (options === false) {
       return undefined
     }
@@ -54,6 +54,7 @@ export class ScreenSpaceRotateHandle extends RegisteredHandle {
       color: 0xffff00,
       hoverColor: 0xffff00,
       opacity: 0.5,
+      disabled,
     })
     const visualizationMesh = new Mesh(createCircleGeometry(0.75, 1), material)
     visualizationMesh.renderOrder = Infinity
@@ -66,13 +67,13 @@ export class ScreenSpaceRotateHandle extends RegisteredHandle {
     interactionMesh.pointerEventsOrder = Infinity
     this.add(interactionMesh)
 
-    const unregister = this.context.registerHandle(this.store, interactionMesh, this.tag)
+    const unregister = disabled ? undefined : this.context.registerHandle(this.store, interactionMesh, this.tag)
 
     return () => {
       material.dispose()
       interactionMesh.geometry.dispose()
       visualizationMesh.geometry.dispose()
-      unregister()
+      unregister?.()
       cleanupHover?.()
       this.remove(interactionMesh)
       this.remove(visualizationMesh)