Aframe - events for dragging

Question

I'm using Aframe-React and the Aframe Click Drag component.

This is working well, and I'm now trying to work out how to add events to the entity so I can update these calculations when one of my entities is dragged (the lines are a elbow connection between them - I want to update these as the item is dragged)

The entities are given the Click Drag attributes later on, however I'm assuming its best to add the listener here.

The library has an example for events

https://github.com/jesstelford/aframe-click-drag-component/blob/master/examples/events/index.html

And registers the events as such

  event-set__1="_event: dragstart; material.opacity: 0.2" 

However I can't seem to work out how to make that call a function in this class,

i.e. something like

event-set__1="_event: dragstart" should call the dragStart() function.

Any clues on how to do this?

const scalar = 0.2
const offsetX = 4
const offsetY = 4.5

config.scale = {x: scalar, y: scalar, z: scalar}

if (editingHotspot.shape) {

  buttonConfig.position = {
    x: config.position.x + offsetX,
    y: config.position.y + offsetY,
    z: config.position.z,
  }

  const shapeTop = {
    x: config.position.x,
    y: config.position.y + 1.9,
    z: config.position.z,
  }

  const buttonEdge = {
    x: buttonConfig.position.x - geometry.width * 0.5 * scalar,
    y: buttonConfig.position.y,
    z: buttonConfig.position.z,
  }

  const join = {
    x: shapeTop.x,
    y: buttonEdge.y,
    z: (shapeTop.z + buttonEdge.z) / 2,
  }

  lineX = {
    lineWidth: 10,
    path: AFRAME.utils.coordinates.stringify(buttonEdge) + ',' + AFRAME.utils.coordinates.stringify(join),
    color: '#fff',
  }
  lineY = {
    lineWidth: 10,
    path: AFRAME.utils.coordinates.stringify(shapeTop) + ',' + AFRAME.utils.coordinates.stringify(join),
    color: '#fff',
      }
    }
  }

  let dragStart = (e) => {
    console.log(e)
  }

  let params = {
    'hotspots-button': 'text:' + (button.label != null ? button.label : '') + ';' + 'icon:' + (button.icon != null ? button.icon.preview : '') + ';',
    draw: 'width:256; height:' + (button.icon != null ? '256' : '128') + ';',
  }

  return (
    <Entity className='hotspot button' {...params} >
      <Entity
        className='hotspot button'
        primitive='a-image'
        look-at='[camera]'
        {...{geometry}}
        scale={config.scale}
        position={editingHotspot.shape ? buttonConfig.position : config.position}
      />
      {
        editingHotspot.shape &&
          <Entity>
            <Shape config={config} editingHotspot={editingHotspot}/>
            <Entity meshline={lineX}/>
            <Entity meshline={lineY}/>
          </Entity>
      }

    </Entity>
  )

Answer 1

As far as i see, Kevin's event-set component sets the target / self attributes (line 121 of his non-minified dist), which means it can't call methods ( except for update, which is called whenever an attribute is changed)

I'd make my own listener, either in my component, or just a listener -> caller

AFRAME.registerComponent("listener", {
  init: function() {
     this.el.addEventListener("startDrag", (e)=> {
        // call your function here.
        // if you want to call another component's function, you can do
        // this.el.components.componentWithMethod.method()
     }
  }
}

Something like this.