Drag & Drop || Viewport List item --> Drop Panel

[Chazrox]

I want to be able to 'drag' an item out of the viewport list and drop it over a 'drop panel' and have that file be loaded into a defined AudioLoopPlayer.

I've found this....am I on the right track?

I can script a drop panel and callbacks....I just dont know how to start the 'drag' action starting from a viewport item.

I imagine this would be the flow....

//Viewport List Item
if (drag)
{
// 1. Get filepath of file matching viewport index selection
// 2. Execute .startExternalFileDrag(); // onFinished callback  Do nothing?
}

// Drop Panel
if (obj.drop)
{
// Load drop file into audioLoopPlayer

}

Can you help me figure this out?

Thanks in advance!

[David Healey]

@Chazrox It might be possible with a mouse broadcaster. Start by tackling the dragging from the viewport and see if you can solve that. If it's possible then the panel dropping part is probably pretty easy.

[Chazrox]

@d-healey yeah thats the part I need help with. Once I get the drag function going I think I can finish the rest. I've havent been able to figure it out yet. Is there an option to set "allow callbacks" for viewports? or is that irrelevant?

[David Healey]

@Chazrox said in Drag & Drop || Viewport List item --> Drop Panel:

Is there an option to set "allow callbacks" for viewports? or is that irrelevant?

No such thing as far as I know. A mouse broadcaster is where you should look, it's basically the same thing.

[Chazrox]

@d-healey Ok. Honestly I've tried to understand Broadcasters a couple times and failed miserably. lol. I'll try that again. I feel like it'll help me down the line as well. Wish me luck! ha.

[David Healey]

@Chazrox Yeah broadcasters are great for tons of stuff. They're a little bit complicated for individual tasks like this, but it's the only way to handle it. They really shine though for larger tasks and can save a ton of time and lines of code.

[ustk]

@Chazrox I second Dave on this. I had a hard time understanding them but once done they reveal very powerful in some situations

[Chazrox]

@ustk @d-healey Thanks guys!

[HISEnberg]

@Chazrox just a side note start with the Broadcast Wizard (and David's video). I found it super helpful to understand how the Broadcast system works using the Broadcast wizard first, and ever since then I use them all over the place.

[Chazrox]

@HISEnberg I think the part that gets me is understanding what arguments to use and why, and in what order. I can assume, but I dont feel sure in my choices just yet. I've been using helper functions so Im barley starting to understand how to pass arguments to other functions but im still getting comfy with everything. Appreciate the advice!

[Chazrox]

@d-healey @ustk
Yo! ok I got this far. That wasnt that bad.

Maybe you can check this out and see why when I drag from different parts of the viewport list, the pop up image is sometimes right under my mouse as desired and sometimes it isnt. Is event.x at the time that im calling it 'event.x' of the entire UI or wah? I cant tell where im measuring from.

I would like to be able to 'check value' first so I can get item text and stuff for my end function eventually but I know thats going to require a different broadcaster callback. I'll figure that out after. I just want to center this image pop up. Any tips?

// Broadcaster definition
const var bcvpAllFilesFiltered = Engine.createBroadcaster({
  "id": "vpAllFilesFiltered",
  "args": ["component", "event"],
  "tags": []
});

// attach to event Type
bcvpAllFilesFiltered.attachToComponentMouseEvents(["vpAllFilesFiltered"], "Clicks, Hover & Dragging", "");

// attach first listener
bcvpAllFilesFiltered.addListener(pnlFileDragger, "FileDraggingNow", function(component, event){
	
	if (event.drag)
	{
		this.showControl(true);
		this.set("x", event.x + 100);
		this.set("y", event.y + 100);
	}
	else
	{
		this.showControl(false);
	}
});

[Chazrox]

@d-healey I watched your bc video again and for some reason it just made alot more sense this time around. I think I understand a little more in general now so it wasn't as intimidating. lol Thanks for the video!

[Chazrox]

----- continued thoughts.....

In the end, Im going to want to do .startExternalFileDrag();

am I going in the right path or am I digging a hole?

I want the user to be able to click/drag the viewport list item / grab file data / .startExternalFileDrag();

[Chazrox]

ok....

That wasnt that bad at all...

So I figured....bypass the actual panel visuals and just execute .startExternalFileDrag() and let it do its thing essentially using the panel just to hold the function I guess.

The only thing I need to do now (not shown in video) is to check for 'scrollbar drag' and not execute file dragger in that instance.

Here's the working code so far:

inline function DraggerFinishedCallback()
{
	
};


// Broadcaster definition
const var bcvpAllFilesFiltered = Engine.createBroadcaster({
  "id": "vpAllFilesFiltered",
  "args": ["component", "event"],
  "tags": []
});

// attach to event Type
bcvpAllFilesFiltered.attachToComponentMouseEvents(["vpAllFilesFiltered"], "Clicks, Hover & Dragging", "");

// attach first listener
bcvpAllFilesFiltered.addListener(pnlFileDragger, "FileDraggingNow", function(component, event){
	
	if (event.drag)
	{
		this.startExternalFileDrag(AudioLoopPlayerAuditioner.getFilename(), false, DraggerFinishedCallback);
	}
});

Anybody know how to check viewport list for 'scroll dragging'?

@d-healey @ustk
yyyyyeah bro, I can see where this can be useful in a lot of things...I think im getting it now.

[Chazrox]

@HISEnberg Im seeing now!

[Chazrox]

Anybody know how to check viewport list for 'scroll bar dragging'?