Aframe - events for dragging - aframe

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.