fix: camera controls ignored props

[whereiswolf]

• Fixes CameraControls component doesn't support mouseButtons and touches props #384
• Adds support for mouseButtons and touches prop.
• Adds default mouseButtons and touches prop values based on https://yomotsu.github.io/camera-controls/examples/config.html
• Adds support for partial overrides of mouseButtons and touches.
• Updates documentation of CameraControls

---

Feel free to point out at any mistakes and discrepancies from conventions. I have a strong React background, and some aspects of Vue are kinda new to me 😜

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[JaimeTorrealba]

Hey this work perfect, is very professional, thanks for this one.

But remember to update the docs for the component (adding the new props and maybe and example of the type that you can use, better be really explicit for the final user).

[whereiswolf]

@JaimeTorrealba Thanks for the comment, I completely agree, let me work on that 😄
By the way, I was thinking about re-exporting the CameraControls.ACTION enum, so that the devs don't have to import it directly from camera-controls when they want to override mouseButtons or touches. Any thoughts on that?

[JaimeTorrealba]

I agree with you, I would do it @whereiswolf (maybe you can export it in the defaultExpose ¿?)

[whereiswolf]

Hmmm 🤔 Wouldn't it cause sort of a "circular" dependency? Also, I don't think it solves the case, because in order to type the ref we'd still need to import some types.

<script lang="ts" setup>
  ...
  const cameraControlsRef = shallowRef<{ value: ???, ACTION: ??? }>()
</script>

<template>
  <CameraControls
    ref="cameraControlsRef"
    :mouse-buttons="{ left: cameraControlsRef.ACTION.ZOOM }"
  />
</template>

It seems like it's a bit more problematic, we can't just export it as a type, because the ACTION enum would be unusable.

import { CameraControls } from 'camera-controls'
...
export type CameraControlsType = typeof CameraControls

It would actually make sense to re-export the whole CameraControls class from camera-controls, but we'd need to come up with a clever name, otherwise we run into naming collision 😅 This way it would be:

<script lang="ts" setup>
  import { CameraControls, CameraControlsSOMETHING } from '@tresjs/cientos'
  // CameraControlsSOMETHING is CameraControls from camera-controls
  ...
  const cameraControlsRef = shallowRef<{ value: CameraControlsSOMETHING }>()
</script>

<template>
  <CameraControls
    ref="cameraControlsRef"
    :mouse-buttons="{ left: CameraControlsSOMETHING.ACTION.ZOOM }"
  />
</template>

[whereiswolf]

@JaimeTorrealba quick summary of the recent changes:

• Updated CameraControls docs with "User input config" section.
• Added logic to check the camera type, to set the default values in the same way as camera-controls does.
• Added CameraControlsClass re-export of camera-controls (if you have a better name suggestion please lmk 😄 )

If anything's unclear or should be changed, I'm happy to work on that 😉

[JaimeTorrealba]

Sorry for the late I was off this weekend.

I love the result. The only thing I am not sure is the name "CameraControlsClass" could that create confusion for some users? (since ThreeJs is basically made in classes)

But I don't have a better name, maybe CameraControlsPointers?

[whereiswolf]

Yeah, I wasn't sure about that either, what about ThreeCameraControls or BaseCameraControls? Maybe I miss something, but Pointers adds more ambiguity in my opinion 😛.

As one said:

There are only two hard things in Computer Science: cache invalidation and naming things.

[JaimeTorrealba]

I like BaseCameraControls :)

[whereiswolf]

Updated 😉

[JaimeTorrealba]

Hmmm 🤔 Wouldn't it cause sort of a "circular" dependency? Also, I don't think it solves the case, because in order to type the ref we'd still need to import some types.

<script lang="ts" setup>
  ...
  const cameraControlsRef = shallowRef<{ value: ???, ACTION: ??? }>()
</script>

<template>
  <CameraControls
    ref="cameraControlsRef"
    :mouse-buttons="{ left: cameraControlsRef.ACTION.ZOOM }"
  />
</template>

It seems like it's a bit more problematic, we can't just export it as a type, because the ACTION enum would be unusable.

import { CameraControls } from 'camera-controls'
...
export type CameraControlsType = typeof CameraControls

It would actually make sense to re-export the whole CameraControls class from camera-controls, but we'd need to come up with a clever name, otherwise we run into naming collision 😅 This way it would be:

<script lang="ts" setup>
  import { CameraControls, CameraControlsSOMETHING } from '@tresjs/cientos'
  // CameraControlsSOMETHING is CameraControls from camera-controls
  ...
  const cameraControlsRef = shallowRef<{ value: CameraControlsSOMETHING }>()
</script>

<template>
  <CameraControls
    ref="cameraControlsRef"
    :mouse-buttons="{ left: CameraControlsSOMETHING.ACTION.ZOOM }"
  />
</template>

100% agree :) my suggestion was terrible hahaha

[JaimeTorrealba]

Great work man!