grabber.ts

import { updateChild } from '../utils'

export default () =>
  AFRAME.registerComponent('grabber', {
    schema: {
      hand: { type: 'string' },
    },
    init() {
      console.log('grabber init', this.data.hand)
      this.otherEl = null
      this.attachedEl = null
      this.grabbedEl = null

      this.el.addEventListener('hitstart', this.handleHitStart)
      this.el.addEventListener('hitend', this.handleHitEnd)
      this.el.addEventListener('triggerdown', this.handleTriggerDown)
      this.el.addEventListener('triggerup', this.handleTriggerUp)
      this.el.addEventListener('gripdown', this.handleGripDown)
    },
    handleHitStart(e: any) {
      console.log('hitstart', e)

      this.otherEl = e.target.components['aabb-collider'].closestIntersectedEl
      console.log(
        'closest',
        e.target.components['aabb-collider'].closestIntersectedEl,
      )
      console.log('hitstart', this.otherEl)
    },
    handleHitEnd(e: any) {
      console.log('hitend', e)
      this.otherEl = e.target.components['aabb-collider'].closestIntersectedEl
    },
    handleTriggerDown() {
      console.log('triggerdown', this.attachedEl.id, this.grabbedEl.id)
      if (this.attachedEl) {
        this.attached.emit('interaction:start')
        return
      }

      if (this.otherEl) this.grabbedEl = this.otherEl
    },
    handleTriggerUp() {
      console.log('triggerup', this.attachedEl.id)
      if (this.attachedEl) {
        this.attached.emit('interaction:end')
        return
      }

      if (this.grabbed) this.grabbedEl = null
    },
    handleGripDown() {
      console.log('gripdown', this.otherEl)

      if (this.otherEl) {
        this.attachedEl = this.otherEl
        console.log('grabbed', this.attachedEl.id, this.otherEl.id)
        return
      }

      if (this.attachedEl) {
        console.log('dropping', this.attachedEl.id)
        this.attachedEl = null
        return
      }

      if (this.grabbed) {
        this.attachedEl = this.grabbedEl
        this.grabbedEl = null
      }
    },
    tick() {
      if (this.otherEl) {
        console.log('hovering', this.otherEl.id)
      }
      const attachedEl = this.attachedEl || this.grabbedEl
      if (!attachedEl) return
      console.log('carryingitem', attachedEl.getAttribute('id'))

      // updateChild(this.el, attachedEl)
    },
    destroy: function () {
      this.el.removeEventListener('hitStart', this.handleHitStart)
    },
  })