fix: allow gizmo to override click behaviour

src/core/GizmoViewcube.tsx

@@ -3,16 +3,17 @@ import { useGizmoContext } from './GizmoHelper'
 import { CanvasTexture, Event, Vector3 } from 'three'
 
 type XYZ = [number, number, number]
-type StyleProps = {
+type GenericProps = {
   font?: string
   opacity?: number
   color?: string
   hoverColor?: string
   textColor?: string
   strokeColor?: string
+  onClick?: (e: Event) => null
 }
-type FaceTypeProps = { hover: boolean; index: number } & StyleProps
-type EdgeCubeProps = { dimensions: XYZ; position: Vector3 } & Omit<StyleProps, 'font'>
+type FaceTypeProps = { hover: boolean; index: number } & GenericProps
+type EdgeCubeProps = { dimensions: XYZ; position: Vector3 } & Omit<GenericProps, 'font'>
 
 const colors = { bg: '#f0f0f0', hover: '#999', text: 'black', stroke: 'black' }
 const faces = ['Right', 'Left', 'Top', 'Bottom', 'Front', 'Back']
@@ -86,27 +87,27 @@ const FaceMaterial = ({
   )
 }
 
-const FaceCube = (props: StyleProps) => {
+const FaceCube = (props: GenericProps) => {
   const { tweenCamera, raycast } = useGizmoContext()
   const [hover, setHover] = React.useState<number | null>(null)
   const handlePointerOut = (e: Event) => {
-    setHover(null)
     e.stopPropagation()
+    setHover(null)
   }
   const handlePointerDown = (e: Event) => {
-    tweenCamera(e.face.normal)
     e.stopPropagation()
+    tweenCamera(e.face.normal)
   }
   const handlePointerMove = (e: Event) => {
-    setHover(Math.floor(e.faceIndex / 2))
     e.stopPropagation()
+    setHover(Math.floor(e.faceIndex / 2))
   }
   return (
     <mesh
       raycast={raycast}
       onPointerOut={handlePointerOut}
       onPointerMove={handlePointerMove}
-      onPointerDown={handlePointerDown}
+      onPointerDown={props.onClick || handlePointerDown}
     >
       {[...Array(6)].map((_, index) => (
         <FaceMaterial key={index} index={index} hover={hover === index} {...props} />
@@ -116,36 +117,42 @@ const FaceCube = (props: StyleProps) => {
   )
 }
 
-const EdgeCube = ({ dimensions, position, hoverColor = colors.hover }: EdgeCubeProps): JSX.Element => {
+const EdgeCube = ({
+  onClick,
+  dimensions,
+  position,
+  color = colors.bg,
+  hoverColor = colors.hover,
+}: EdgeCubeProps): JSX.Element => {
   const { tweenCamera, raycast } = useGizmoContext()
   const [hover, setHover] = React.useState<boolean>(false)
   const handlePointerOut = (e: Event) => {
-    setHover(false)
     e.stopPropagation()
+    setHover(false)
   }
   const handlePointerOver = (e: Event) => {
-    setHover(true)
     e.stopPropagation()
+    setHover(true)
   }
   const handlePointerDown = (e: Event) => {
-    tweenCamera(position)
     e.stopPropagation()
+    tweenCamera(position)
   }
   return (
     <mesh
       position={position}
       raycast={raycast}
       onPointerOver={handlePointerOver}
       onPointerOut={handlePointerOut}
-      onPointerDown={handlePointerDown}
+      onPointerDown={onClick || handlePointerDown}
     >
       <meshBasicMaterial color={hover ? hoverColor : 'white'} transparent opacity={0.6} visible={hover} />
       <boxGeometry args={dimensions} />
     </mesh>
   )
 }
 
-export const GizmoViewcube = (props: StyleProps) => {
+export const GizmoViewcube = (props: GenericProps) => {
   return (
     <group scale={[60, 60, 60]}>
       <FaceCube {...props} />

src/core/GizmoViewport.tsx

@@ -13,6 +13,7 @@ type AxisHeadProps = JSX.IntrinsicElements['sprite'] & {
   labelColor: string
   disabled?: boolean
   font: string
+  onClick?: (e: Event) => null
 }
 
 type GizmoViewportProps = JSX.IntrinsicElements['group'] & {
@@ -21,6 +22,7 @@ type GizmoViewportProps = JSX.IntrinsicElements['group'] & {
   hideNegativeAxes?: boolean
   disabled?: boolean
   font?: string
+  onClick?: (e: Event) => null
 }
 
 function Axis({ color, rotation }: AxisProps) {
@@ -34,7 +36,7 @@ function Axis({ color, rotation }: AxisProps) {
   )
 }
 
-function AxisHead({ font, disabled, arcStyle, label, labelColor, ...props }: AxisHeadProps) {
+function AxisHead({ onClick, font, disabled, arcStyle, label, labelColor, ...props }: AxisHeadProps) {
   const texture = React.useMemo(() => {
     const canvas = document.createElement('canvas')
     canvas.width = 64
@@ -59,18 +61,18 @@ function AxisHead({ font, disabled, arcStyle, label, labelColor, ...props }: Axi
   const [active, setActive] = React.useState(false)
   const scale = (label ? 1 : 0.75) * (active ? 1.2 : 1)
   const handlePointerOver = (e: Event) => {
-    setActive(true)
     e.stopPropagation()
+    setActive(true)
   }
   const handlePointerOut = (e: Event) => {
-    setActive(false)
     e.stopPropagation()
+    setActive(false)
   }
   return (
     <sprite
       scale={scale}
       onPointerOver={!disabled ? handlePointerOver : undefined}
-      onPointerOut={!disabled ? handlePointerOut : undefined}
+      onPointerOut={!disabled ? onClick || handlePointerOut : undefined}
       {...props}
     >
       <spriteMaterial map={texture} alphaTest={0.3} opacity={label ? 1 : 0.75} toneMapped={false} />
@@ -84,6 +86,7 @@ export const GizmoViewport = ({
   font = '18px Inter var, Arial, sans-serif',
   axisColors = ['#ff3653', '#0adb50', '#2c8fdf'],
   labelColor = '#000',
+  onClick,
   ...props
 }: GizmoViewportProps) => {
   const [colorX, colorY, colorZ] = axisColors
@@ -93,6 +96,7 @@ export const GizmoViewport = ({
     disabled,
     labelColor,
     raycast,
+    onClick,
     onPointerDown: !disabled
       ? (e: Event) => {
           tweenCamera(e.object.position)