From 82fa2ca18ac6acca0f34f8c43f2652fdd9b4a824 Mon Sep 17 00:00:00 2001
From: Alexander <github@lichter.io>
Date: Wed, 24 Jul 2024 01:49:20 +0200
Subject: [PATCH 1/2] wip

---
 src/core/controls/DragControls.vue | 69 ++++++++++++++++++++++++++++++
 src/core/controls/index.ts         |  2 +
 2 files changed, 71 insertions(+)
 create mode 100644 src/core/controls/DragControls.vue

diff --git a/src/core/controls/DragControls.vue b/src/core/controls/DragControls.vue
new file mode 100644
index 00000000..4720b6fd
--- /dev/null
+++ b/src/core/controls/DragControls.vue
@@ -0,0 +1,69 @@
+<script lang="ts" setup>
+import type { Camera, Object3D } from 'three'
+import { DragControls } from 'three-stdlib'
+import { onUnmounted, ref, watchEffect } from 'vue'
+import { useTresContext } from '@tresjs/core'
+import { useEventListener } from '@vueuse/core'
+
+export interface TransformControlsProps {
+  objects: Object3D[]
+  camera?: Camera
+  mode?: 'translate' | 'rotate'
+  enabled?: boolean
+  /**
+   * The dom element to listen to.
+   *
+   * @type {HTMLElement}
+   * @memberof OrbitControlsProps
+   * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.domElement
+   */
+   domElement?: HTMLElement
+}
+
+withDefaults(defineProps<TransformControlsProps>(), {
+  mode: 'translate',
+  enabled: true,
+})
+
+const emit = defineEmits(['dragstart', 'drag', 'dragend', 'hoveron', 'hoveroff'])
+
+const { camera: activeCamera, renderer, extend } = useTresContext()
+
+const controlsRef = ref<DragControls | null>(null)
+
+extend({ DragControls })
+
+watchEffect(() => {
+  if(controlsRef.value) {
+    addEventListeners()
+  }
+})
+
+function addEventListeners() {
+  useEventListener(controlsRef.value as any, 'dragstart', () => emit('dragstart', controlsRef.value))
+  useEventListener(controlsRef.value as any, 'drag', () => emit('drag', controlsRef.value))
+  useEventListener(controlsRef.value as any, 'dragend', () => emit('dragend', controlsRef.value))
+  useEventListener(controlsRef.value as any, 'hoveron', () => emit('hoveron', controlsRef.value))
+  useEventListener(controlsRef.value as any, 'hoveroff', () => emit('hoveroff', controlsRef.value))
+}
+
+onUnmounted(() => {
+  if (controlsRef.value) {
+    controlsRef.value.dispose()
+  }
+})
+
+defineExpose({ value: controlsRef })
+</script>
+
+<template>
+  <TresDragControls
+    v-if="(camera || activeCamera) && (domElement || renderer)"
+    ref="controlsRef"
+    :objects="objects"
+    :camera="camera || activeCamera"
+    :mode="mode"
+    :enabled="enabled"    
+    :args="[objects, camera || activeCamera, domElement || renderer.domElement]"
+  />
+</template>
\ No newline at end of file
diff --git a/src/core/controls/index.ts b/src/core/controls/index.ts
index 9ca61e52..820e3714 100644
--- a/src/core/controls/index.ts
+++ b/src/core/controls/index.ts
@@ -5,6 +5,7 @@ import PointerLockControls from './PointerLockControls.vue'
 import MapControls from './MapControls.vue'
 import ScrollControls from './ScrollControls.vue'
 import CameraControls, { BaseCameraControls } from './CameraControls.vue'
+import DragControls from './DragControls.vue'
 
 export {
   OrbitControls,
@@ -15,4 +16,5 @@ export {
   ScrollControls,
   CameraControls,
   BaseCameraControls,
+  DragControls
 }

From 58eb37f5c378f47fc9e7f4c9a57a262954b4e5eb Mon Sep 17 00:00:00 2001
From: Alexander <github@lichter.io>
Date: Wed, 24 Jul 2024 01:50:42 +0200
Subject: [PATCH 2/2] wip

---
 src/core/controls/DragControls.vue | 8 ++++----
 src/core/controls/index.ts         | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/core/controls/DragControls.vue b/src/core/controls/DragControls.vue
index 4720b6fd..ece34835 100644
--- a/src/core/controls/DragControls.vue
+++ b/src/core/controls/DragControls.vue
@@ -17,7 +17,7 @@ export interface TransformControlsProps {
    * @memberof OrbitControlsProps
    * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.domElement
    */
-   domElement?: HTMLElement
+  domElement?: HTMLElement
 }
 
 withDefaults(defineProps<TransformControlsProps>(), {
@@ -34,7 +34,7 @@ const controlsRef = ref<DragControls | null>(null)
 extend({ DragControls })
 
 watchEffect(() => {
-  if(controlsRef.value) {
+  if (controlsRef.value) {
     addEventListeners()
   }
 })
@@ -63,7 +63,7 @@ defineExpose({ value: controlsRef })
     :objects="objects"
     :camera="camera || activeCamera"
     :mode="mode"
-    :enabled="enabled"    
+    :enabled="enabled"
     :args="[objects, camera || activeCamera, domElement || renderer.domElement]"
   />
-</template>
\ No newline at end of file
+</template>
diff --git a/src/core/controls/index.ts b/src/core/controls/index.ts
index 820e3714..0d9b1a67 100644
--- a/src/core/controls/index.ts
+++ b/src/core/controls/index.ts
@@ -16,5 +16,5 @@ export {
   ScrollControls,
   CameraControls,
   BaseCameraControls,
-  DragControls
+  DragControls,
 }