Access to DataTransfer object on drag events

[mathuo]

• Would it be possible to add support to the API of the dock panel tab and group for setting the DataTransfer? I have a use case where the tab represents a file, and the group is a directory, and dragging the tab or group onto an input, I need to be able to specify the value of the DataTransfer object on the drag handler.

  I've tried my own stab at it, but I have difficulty figuring out how the Tab objects are created in relation to the tab component.

Originally posted by @techbech in #298 (comment)

[mathuo]

@techbech Just initial thoughts, would something like this work?

interface DragPanelEvent {
    panel: IDockviewPanel;
    nativeEvent: DragEvent;
}

interface DragPanelEvent {
    group: IDockviewGroupPanel;
    nativeEvent: DragEvent;
}

api.onWillDragPanel((event: DragPanelEvent) => { /** */ })

api.onWillDragGroup((event: DragPanelEvent) => { /** */ })

[techbech]

Thank you!

I noted that dataTransfer is read-only, but I guess it will still work.

Just expanding on yours. Is the following how I would use it?

interface DragPanelEvent {
    panel: IDockviewPanel;
    nativeEvent: DragEvent;
}

interface DragGroupEvent {
    group: IDockviewGroupPanel;
    nativeEvent: DragEvent;
}

event.api.onWillDragPanel(({panel, nativeEvent}: DragPanelEvent) => {
    if (panel.params.filePath) {
        nativeEvent.setData("text/plain", panel.params.filePath);
    }
})
event.api.onWillDragGroup(({group, nativeEvent}: DragGroupEvent) => {
    if (group.params.directoryPath) {
        nativeEvent.setData("text/plain", group.params.directoryPath);
    }
})

That would be awesome! And it will also work with serialize/deserialize, right?

Only question then is how I would add params to a group, but I guess I would have to add my own custom group factory.

[mathuo]

Nothing would need to change in terms of serialization since there would be no extra state required as the onWillDrag events would be called for every drag event. In your example filePath would currently be serialized as panel state.

For the group event though I think that directoryPath would need to be provided from an external source (some function that you own that can correlate a group to some state) since dockview doesn't currently have any concept of group state.

The event I could expose is the underlying DragEvent from where you should access the dataTransfer object as nativeEvent.dataTransfer.set(...).

I will have a think about how to implement this but something like the above looks like a reasonable approach that should cover all cases.

[techbech]

Awesome!

I just played around and found the updateParameters(...) method on the group. But it's fine in my case to get the data from elsewhere.

Let me know if you could use any help or could use someone to discuss things with.