fix: removed boolean prop defaults from TresCanvas (#384)

* bugfix: removed boolean prop defaults from TresCanvas

* chore: fixed linting errors

---------

Co-authored-by: Tino Koch <tinoooo@users.noreply.github.com>
Co-authored-by: Alvaro Saburido <alvaro.saburido@gmail.com>

playground/src/components/LocalOrbitControls.vue

@@ -8,224 +8,224 @@ import { useEventListener } from '@vueuse/core'
 
 export interface OrbitControlsProps {
   /**
-     * Whether to make this the default controls.
-     *
-     * @default false
-     * @type {boolean}
-     * @memberof OrbitControlsProps
-     */
+   * Whether to make this the default controls.
+   *
+   * @default false
+   * @type {boolean}
+   * @memberof OrbitControlsProps
+   */
   makeDefault?: boolean
   /**
-     * The camera to control.
-     *
-     * @type {Camera}
-     * @memberof OrbitControlsProps
-     * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.camera
-     */
+   * The camera to control.
+   *
+   * @type {Camera}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.camera
+   */
   camera?: Camera
   /**
-     * The dom element to listen to.
-     *
-     * @type {HTMLElement}
-     * @memberof OrbitControlsProps
-     * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.domElement
-     */
+   * The dom element to listen to.
+   *
+   * @type {HTMLElement}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.domElement
+   */
   domElement?: HTMLElement
   /**
-     * The target to orbit around.
-     *
-     * @type {TresVector3}
-     * @memberof OrbitControlsProps
-     * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.target
-     */
+   * The target to orbit around.
+   *
+   * @type {TresVector3}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.target
+   */
   target?: TresVector3
   /**
-     * Whether to enable damping (inertia)
-     *
-     * @default false
-     * @type {boolean}
-     * @memberof OrbitControlsProps
-     * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enableDamping
-     */
+   * Whether to enable damping (inertia)
+   *
+   * @default false
+   * @type {boolean}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enableDamping
+   */
   enableDamping?: boolean
   /**
-     * The damping inertia used if `.enableDamping` is set to true
-     *
-     * @default 0.05
-     * @type {number}
-     * @memberof OrbitControlsProps
-     * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.dampingFactor
-     */
+   * The damping inertia used if `.enableDamping` is set to true
+   *
+   * @default 0.05
+   * @type {number}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.dampingFactor
+   */
   dampingFactor?: number
   /**
-     * Set to true to automatically rotate around the target.
-     *
-     * @default false
-     * @type {boolean}
-     * @memberof OrbitControlsProps
-     * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.autoRotate
-     */
+   * Set to true to automatically rotate around the target.
+   *
+   * @default false
+   * @type {boolean}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.autoRotate
+   */
   autoRotate?: boolean
   /**
-     * How fast to rotate around the target if `.autoRotate` is true.
-     *
-     * @default 2
-     * @type {number}
-     * @memberof OrbitControlsProps
-     * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.autoRotateSpeed
-     */
+   * How fast to rotate around the target if `.autoRotate` is true.
+   *
+   * @default 2
+   * @type {number}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.autoRotateSpeed
+   */
   autoRotateSpeed?: number
   /**
-     * Whether to enable panning.
-     *
-     * @default true
-     * @type {boolean}
-     * @memberof OrbitControlsProps
-     * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enablePan
-     */
+   * Whether to enable panning.
+   *
+   * @default true
+   * @type {boolean}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enablePan
+   */
   enablePan?: boolean
   /**
-     * How fast to pan the camera when the keyboard is used. Default is 7.0 pixels per keypress.
-     *
-     * @default 7.0
-     * @type {number}
-     * @memberof OrbitControlsProps
-     * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.keyPanSpeed
-     */
+   * How fast to pan the camera when the keyboard is used. Default is 7.0 pixels per keypress.
+   *
+   * @default 7.0
+   * @type {number}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.keyPanSpeed
+   */
   keyPanSpeed?: number
   /**
-     * This object contains references to the keycodes for controlling camera panning.
-     * Default is the 4 arrow keys.
-     *
-     * @default `{ LEFT: 'ArrowLeft', UP: 'ArrowUp', RIGHT: 'ArrowRight', BOTTOM: 'ArrowDown' }`
-     * @type Record<string, string>
-     * @memberof OrbitControlsProps
-     * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.keys
-     */
+   * This object contains references to the keycodes for controlling camera panning.
+   * Default is the 4 arrow keys.
+   *
+   * @default `{ LEFT: 'ArrowLeft', UP: 'ArrowUp', RIGHT: 'ArrowRight', BOTTOM: 'ArrowDown' }`
+   * @type Record<string, string>
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.keys
+   */
   keys?: Record<string, string>
   /**
-     * How far you can orbit horizontally, upper limit.
-     * If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ],
-     * with ( max - min < 2 PI ). Default is Infinity.
-     *
-     * @default Infinity
-     * @type {number}
-     * @memberof OrbitControlsProps
-     * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxAzimuthAngle
-     */
+   * How far you can orbit horizontally, upper limit.
+   * If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ],
+   * with ( max - min < 2 PI ). Default is Infinity.
+   *
+   * @default Infinity
+   * @type {number}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxAzimuthAngle
+   */
   maxAzimuthAngle?: number
   /**
-     * How far you can orbit horizontally, lower limit.
-     * If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ],
-     * with ( max - min < 2 PI ).
-     * Default is - Infinity.
-     *
-     * @default -Infinity
-     * @type {number}
-     * @memberof OrbitControlsProps
-     * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minAzimuthAngle
-     */
+   * How far you can orbit horizontally, lower limit.
+   * If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ],
+   * with ( max - min < 2 PI ).
+   * Default is - Infinity.
+   *
+   * @default -Infinity
+   * @type {number}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minAzimuthAngle
+   */
   minAzimuthAngle?: number
   /**
-     * How far you can orbit vertically, upper limit.
-     * Range is 0 to Math.PI radians, and default is Math.PI.
-     *
-     * @default Math.PI
-     * @type {number}
-     * @memberof OrbitControlsProps
-     * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxPolarAngle
-     */
+   * How far you can orbit vertically, upper limit.
+   * Range is 0 to Math.PI radians, and default is Math.PI.
+   *
+   * @default Math.PI
+   * @type {number}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxPolarAngle
+   */
   maxPolarAngle?: number
   /**
-     * How far you can orbit vertically, lower limit.
-     * Range is 0 to Math.PI radians, and default is 0.
-     *
-     * @default 0
-     * @type {number}
-     * @memberof OrbitControlsProps
-     * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minPolarAngle
-     */
+   * How far you can orbit vertically, lower limit.
+   * Range is 0 to Math.PI radians, and default is 0.
+   *
+   * @default 0
+   * @type {number}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minPolarAngle
+   */
   minPolarAngle?: number
   /**
-     * The minimum distance of the camera to the target.
-     * Default is 0.
-     *
-     * @default 0
-     * @type {number}
-     * @memberof OrbitControlsProps
-     * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minDistance
-     */
+   * The minimum distance of the camera to the target.
+   * Default is 0.
+   *
+   * @default 0
+   * @type {number}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minDistance
+   */
   minDistance?: number
   /**
-     * The maximum distance of the camera to the target.
-     * Default is Infinity.
-     *
-     * @default Infinity
-     * @type {number}
-     * @memberof OrbitControlsProps
-     * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxDistance
-     */
+   * The maximum distance of the camera to the target.
+   * Default is Infinity.
+   *
+   * @default Infinity
+   * @type {number}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxDistance
+   */
   maxDistance?: number
   /**
-     * The minimum field of view angle, in radians.
-     * Default is 0.
-     *
-     * @default 0
-     * @type {number}
-     * @memberof OrbitControlsProps
-     * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minZoom
-     */
+   * The minimum field of view angle, in radians.
+   * Default is 0.
+   *
+   * @default 0
+   * @type {number}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minZoom
+   */
   minZoom?: number
   /**
-     * The maximum field of view angle, in radians.
-     * ( OrthographicCamera only ).
-     * Default is Infinity.
-     *
-     * @default Infinity
-     * @type {number}
-     * @memberof OrbitControlsProps
-     * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxZoom
-     */
+   * The maximum field of view angle, in radians.
+   * ( OrthographicCamera only ).
+   * Default is Infinity.
+   *
+   * @default Infinity
+   * @type {number}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxZoom
+   */
   maxZoom?: number
   touches?: {
     ONE?: number
     TWO?: number
   }
   /**
-     * Whether to enable zooming.
-     *
-     * @default true
-     * @type {boolean}
-     * @memberof OrbitControlsProps
-     * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enableZoom
-     */
+   * Whether to enable zooming.
+   *
+   * @default true
+   * @type {boolean}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enableZoom
+   */
   enableZoom?: boolean
   /**
-     * How fast to zoom in and out. Default is 1.
-     *
-     * @default 1
-     * @type {number}
-     * @memberof OrbitControlsProps
-     * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.zoomSpeed
-     */
+   * How fast to zoom in and out. Default is 1.
+   *
+   * @default 1
+   * @type {number}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.zoomSpeed
+   */
   zoomSpeed?: number
   /**
-     * Whether to enable rotating.
-     *
-     * @default true
-     * @type {boolean}
-     * @memberof OrbitControlsProps
-     * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enableRotate
-     */
+   * Whether to enable rotating.
+   *
+   * @default true
+   * @type {boolean}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enableRotate
+   */
   enableRotate?: boolean
   /**
-     * How fast to rotate around the target. Default is 1.
-     *
-     * @default 1
-     * @type {number}
-     * @memberof OrbitControlsProps
-     * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.rotateSpeed
-     */
+   * How fast to rotate around the target. Default is 1.
+   *
+   * @default 1
+   * @type {number}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.rotateSpeed
+   */
   rotateSpeed?: number
 }
 
@@ -262,9 +262,15 @@ const controls = ref<OrbitControls | null>(null)
 extend({ OrbitControls })
 
 function addEventListeners() {
-  useEventListener(controls.value as any, 'change', () => emit('change', controls.value))
-  useEventListener(controls.value as any, 'start', () => emit('start', controls.value))
-  useEventListener(controls.value as any, 'end', () => emit('end', controls.value))
+  useEventListener(controls.value as any, 'change', () =>
+    emit('change', controls.value),
+  )
+  useEventListener(controls.value as any, 'start', () =>
+    emit('start', controls.value),
+  )
+  useEventListener(controls.value as any, 'end', () =>
+    emit('end', controls.value),
+  )
 }
 
 const { onLoop } = useRenderLoop()
@@ -284,11 +290,6 @@ onUnmounted(() => {
     controls.value.dispose()
   }
 })
-
-watchEffect(() => {
-  console.log('activeCamera', activeCamera.value)
-  console.log('renderer', renderer.value)
-})
 </script>
 
 <template>

src/components/TresCanvas.vue

@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import {
-  PerspectiveCamera,
-  Scene,
-} from 'three'
+import { PerspectiveCamera, Scene } from 'three'
 import type {
   WebGLRendererParameters,
   ColorSpace,
@@ -10,22 +7,33 @@ import type {
   ToneMapping,
 } from 'three'
 import type { Ref } from 'vue'
-import { computed, onMounted, provide, ref, shallowRef, watch, watchEffect, Fragment, defineComponent, h } from 'vue'
 import {
-  useTresContextProvider, useLogger,
+  computed,
+  onMounted,
+  provide,
+  ref,
+  shallowRef,
+  watch,
+  watchEffect,
+  Fragment,
+  defineComponent,
+  h,
+} from 'vue'
+import {
+  useTresContextProvider,
+  useLogger,
   usePointerEventHandler,
-  useRenderLoop, type TresContext,
+  useRenderLoop,
+  type TresContext,
 } from '../composables'
 import { extend } from '../core/catalogue'
 import { render } from '../core/renderer'
 
-import {
-} from '../composables'
-
 import type { RendererPresetsType } from '../composables/useRenderer/const'
 import type { TresCamera, TresObject } from '../types/'
 
-export interface TresCanvasProps extends Omit<WebGLRendererParameters, 'canvas'> {
+export interface TresCanvasProps
+  extends Omit<WebGLRendererParameters, 'canvas'> {
   // required by for useRenderer
   shadows?: boolean
   clearColor?: string
@@ -36,18 +44,24 @@ export interface TresCanvasProps extends Omit<WebGLRendererParameters, 'canvas'>
   toneMappingExposure?: number
 
   // required by useTresContextProvider
-  windowSize?: boolean
+  camera?: TresCamera
   preset?: RendererPresetsType
+  windowSize?: boolean
   disableRender?: boolean
-  camera?: TresCamera
 }
 
 const props = withDefaults(defineProps<TresCanvasProps>(), {
-  alpha: false,
-  antialias: true,
-  depth: true,
-  stencil: true,
-  preserveDrawingBuffer: false,
+  alpha: undefined,
+  depth: undefined,
+  shadows: undefined,
+  stencil: undefined,
+  antialias: undefined,
+  windowSize: undefined,
+  disableRender: undefined,
+  useLegacyLights: undefined,
+  preserveDrawingBuffer: undefined,
+  logarithmicDepthBuffer: undefined,
+  failIfMajorPerformanceCaveat: undefined,
 })
 
 const { logWarning } = useLogger()
@@ -67,13 +81,14 @@ const slots = defineSlots<{
   default(): any
 }>()
 
-const createInternalComponent = (context: TresContext) => defineComponent({
-  setup() {
-    provide('useTres', context)
-    provide('extend', extend)
-    return () => h(Fragment, null, slots?.default ? slots.default() : [])
-  },
-})
+const createInternalComponent = (context: TresContext) =>
+  defineComponent({
+    setup() {
+      provide('useTres', context)
+      provide('extend', extend)
+      return () => h(Fragment, null, slots?.default ? slots.default() : [])
+    },
+  })
 
 const mountCustomRenderer = (context: TresContext) => {
   const InternalComponent = createInternalComponent(context)
@@ -106,37 +121,43 @@ onMounted(() => {
   mountCustomRenderer(context)
 
   const addDefaultCamera = () => {
-    const camera = new PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
+    const camera = new PerspectiveCamera(
+      45,
+      window.innerWidth / window.innerHeight,
+      0.1,
+      1000,
+    )
     camera.position.set(3, 3, 3)
     camera.lookAt(0, 0, 0)
     registerCamera(camera)
 
-    const unwatch = watchEffect(
-      () => {
-        if (cameras.value.length >= 2) {
-          camera.removeFromParent()
-          deregisterCamera(camera)
-          unwatch?.()
-        }
-      },
-    )
+    const unwatch = watchEffect(() => {
+      if (cameras.value.length >= 2) {
+        camera.removeFromParent()
+        deregisterCamera(camera)
+        unwatch?.()
+      }
+    })
   }
 
-  watch(() => props.camera, (newCamera, oldCamera) => {
-    if (newCamera)
-      registerCamera(newCamera)
-    else if (oldCamera) {
-      oldCamera.removeFromParent()
-      deregisterCamera(oldCamera)
-    }
-  }, {
-    immediate: true,
-  })
+  watch(
+    () => props.camera,
+    (newCamera, oldCamera) => {
+      if (newCamera) registerCamera(newCamera)
+      else if (oldCamera) {
+        oldCamera.removeFromParent()
+        deregisterCamera(oldCamera)
+      }
+    },
+    {
+      immediate: true,
+    },
+  )
 
   if (!camera.value) {
     logWarning(
       'No camera found. Creating a default perspective camera. '
-      + 'To have full control over a camera, please add one to the scene.',
+        + 'To have full control over a camera, please add one to the scene.',
     )
     addDefaultCamera()
   }