Merge pull request #419 from itsdouges/disabled-editor-handles

Add disabled state to transform / pivot handles

Author: bbohlender

CONTRIBUTING.md

@@ -21,4 +21,4 @@ pnpm dev
 
 **Important**
 
-When making a change to the packages, the `vite` cache of the examples needs to be cleared (delete `node_modules/.vite` inside the running example). Rebuilding the libraries is not necassary unless types have changed.
+When making a change to the packages, the `vite` cache of the examples needs to be cleared (delete `node_modules/.vite` inside the running example). Rebuilding the libraries is not necessary unless types have changed.

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/index.ts

@@ -1,14 +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
+      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

@@ -1,4 +1,4 @@
-import { ColorRepresentation, LineBasicMaterial, MeshBasicMaterial } from 'three'
+import { Color, ColorRepresentation, LineBasicMaterial, MeshBasicMaterial } from 'three'
 import { HandlesContext } from './context.js'
 
 export const handleXRayMaterialProperties = {
@@ -18,14 +18,22 @@ export function setupHandlesContextHoverMaterial(
     hoverColor,
     hoverOpacity,
     opacity,
+    disabled = false,
   }: {
     color: ColorRepresentation
+    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

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,6 +28,7 @@ export class PivotAxisRotationHandle extends RegisteredHandle {
     const cleanupHover = setupHandlesContextHoverMaterial(this.context, material, this.tag, {
       color: defaultColor,
       hoverColor: 0xffff40,
+      disabled,
     })
 
     const visualizationMesh = new Mesh(new TorusGeometry(0.45, 0.0075, 3, 64, Math.PI / 2), material)
@@ -42,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)
+    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,21 +26,22 @@ export class PivotAxisScaleHandle extends RegisteredHandle {
     const cleanupHover = setupHandlesContextHoverMaterial(this.context, material, this.tag, {
       color: defaultColor,
       hoverColor: 0xffff40,
+      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)
+    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)