Merge branch 'feature/25-extend-catalog-in-cientos' into feature/3-transform-pivot-controls-for-cientos

packages/cientos/src/core/OrbitControls.vue

@@ -1,9 +1,57 @@
-<script setup lang="ts">
+<script lang="ts" setup>
+import { Camera, Vector3, WebGLRenderer } from 'three'
+import { OrbitControls } from 'three-stdlib'
+import { inject, ref, type Ref } from 'vue'
+
+import { useCientos } from './useCientos'
+
+const props = withDefaults(
+  defineProps<{
+    makeDefault?: boolean
+    camera?: Camera
+    domElement?: HTMLElement
+    target?: Ref<Vector3>
+    enableDamping?: boolean
+  }>(),
+  {
+    makeDefault: false,
+  },
+)
+
+const controls = ref(null)
+const camera = inject<Ref<Camera>>('camera')
+const renderer = inject<Ref<WebGLRenderer>>('renderer')
+
+const { extend } = useCientos()
+extend({ OrbitControls })
+</script>
+
+<template>
+  <TresOrbitControls
+    v-if="camera && renderer"
+    ref="controls"
+    :args="[camera, renderer?.domElement]"
+    :enabling-dampling="enableDamping"
+  />
+</template>
+
+<!-- <script setup lang="ts">
 import { useRenderLoop } from '@tresjs/core'
-import { Camera, WebGLRenderer } from 'three'
+import { Camera, Vector3, WebGLRenderer } from 'three'
 import { OrbitControls as OrbitControlsImp } from 'three-stdlib'
 import { inject, type Ref, unref, watch } from 'vue'
 
+const props = withDefaults(
+  defineProps<{
+    makeDefault?: boolean
+    camera?: Camera
+    domElement?: HTMLElement
+    target?: Ref<Vector3>
+  }>(),
+  {
+    makeDefault: false,
+  },
+)
 let controls: OrbitControlsImp
 
 const camera = inject<Ref<Camera>>('camera')
@@ -19,7 +67,7 @@ watch(
       const { onLoop } = useRenderLoop()
 
       onLoop(() => {
-        if (controls) {
+        if (controls.enabled) {
           controls.update()
         }
       })
@@ -30,3 +78,4 @@ watch(
   },
 )
 </script>
+ -->

packages/cientos/src/core/useCientos.ts

@@ -0,0 +1,12 @@
+import { useCatalogue } from '@tresjs/core'
+import { getCurrentInstance } from 'vue'
+
+export function useCientos() {
+  const { appContext } = getCurrentInstance()
+  const { catalogue, extend } = useCatalogue(appContext.app)
+
+  return {
+    catalogue,
+    extend,
+  }
+}

packages/cientos/src/env.d.ts

@@ -1,3 +1,4 @@
+import { App } from 'vue'
 /// <reference types="vite/client" />
 
 declare module '*.vue' {
@@ -6,3 +7,14 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, any>
   export default component
 }
+
+declare global {
+  // Define the window interface, with type annotations for the properties and methods of the window object
+  interface Window {
+    // Define the location property, with a type of Location
+    __TRES__: {
+      app: App
+      version: string
+    }
+  }
+}

packages/tres/src/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /* import { Color } from 'three' */
-import { useTweakPane, OrbitControls } from '../../cientos/src'
+import { useTweakPane, OrbitControls, TransformControls } from '../../cientos/src'
 /* import TestSphere from '/@/components/TestSphere.vue' */
 import Text3D from '/@/components/Text3D.vue'
 /* import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

packages/tres/src/core/useCatalogue/index.ts

@@ -1,6 +1,7 @@
-import { useInstanceCreator } from '/@/core'
-import { App, ref, Component, Ref } from 'vue'
+import { App, ref, Component, Ref, provide } from 'vue'
 import * as THREE from 'three'
+import { useInstanceCreator } from '/@/core'
+import { useLogger } from '/@/composables'
 import { TresCatalogue } from '/@/types'
 
 const catalogue: Ref<TresCatalogue> = ref({ ...THREE })
@@ -8,20 +9,32 @@ const catalogue: Ref<TresCatalogue> = ref({ ...THREE })
 delete catalogue.value.Scene
 
 let localApp: App
-
 export function useCatalogue(app?: App, prefix = 'Tres') {
+  const { logError } = useLogger()
   if (!localApp && app) {
     localApp = app
   }
   const { createComponentInstances } = useInstanceCreator(prefix)
 
+  provide('catalogue', catalogue)
+
   const extend = (objects: any) => {
+    if (!objects) {
+      logError('No objects provided to extend catalogue')
+      return
+    }
+
     catalogue.value = Object.assign(catalogue.value, objects)
     const components = createComponentInstances(ref(objects))
 
-    components.forEach(([key, cmp]) => {
-      localApp.component(key as string, cmp as Component)
-    })
+    if (localApp) {
+      components.forEach(([key, cmp]) => {
+        // If the component is not already registered, register it
+        if (!localApp._context.components[key as string]) {
+          localApp.component(key as string, cmp as Component)
+        }
+      })
+    }
   }
 
   return {

packages/tres/src/env.d.ts

@@ -8,3 +8,14 @@ declare module '*.vue' {
 }
 
 declare module '*.glsl' {}
+
+declare global {
+  // Define the window interface, with type annotations for the properties and methods of the window object
+  interface Window {
+    // Define the location property, with a type of Location
+    __TRES__: {
+      app: App
+      version: string
+    }
+  }
+}

packages/tres/src/index.ts

@@ -1,10 +1,10 @@
-import { App, Component, watchEffect } from 'vue'
+import { App, Component } from 'vue'
 import { TresCanvas } from '/@/core/useRenderer/component'
 import { Scene } from '/@/core/useScene/component'
 import { useCatalogue, useInstanceCreator } from '/@/core'
 export * from '/@/core'
 export * from './keys'
-
+import { version } from '../package.json'
 export interface TresOptions {
   prefix?: string
   extends?: Record<string, unknown>
@@ -29,9 +29,10 @@ const plugin: TresPlugin = {
       app.component(key as string, cmp as Component)
     })
 
-    watchEffect(() => {
-      console.log({ catalogue })
-    })
+    window.__TRES__ = {
+      app,
+      version,
+    }
   },
 }