DockPanel inside a DockPanel

[jtpio]

Given the following layout (adapted from the DockPanel example), where dock2 is a second DockPanel added to the first one with:

let dock2 = new DockPanel();
dock2.addWidget(g2);
dock2.addWidget(y2, { mode: 'split-right', ref: g2 });
dock2.id = 'dock2';
dock2.title.label = 'Dock 2';
dock.addWidget(dock2, { mode: 'split-bottom', ref: r1});

Is is possible to have control on where the widgets of an inner DockPanel can be docked? For example to disallow dropping them outside of "Dock 2":

[jasongrout]

I think this is tricky because the mimetypes from the inner dockpanel match the accepted drops for the outer dockpanel. Perhaps there is a way to override those mimetypes for one or the other to make the inner and outer dockpanels incompatible with each other.

[jasongrout]

Yeah, this is the mimetype it is setting and accepting. If you customized that to be different for the inner and outer dockpanels, things might work:

lumino/packages/widgets/src/dockpanel.ts

Line 489 in 1beb8b3

if (event.mimeData.hasData('application/vnd.lumino.widget-factory')) {

lumino/packages/widgets/src/dockpanel.ts

Line 963 in 1beb8b3

mimeData.setData('application/vnd.lumino.widget-factory', factory);

[jasongrout]

Perhaps that string should be a class parameter that can be changed for these sorts of issues? It probably ought to be at least a variable so it can be referenced instead of typed out exactly three different places.

[jtpio]

Yes that's a good point.

It should be possible to try a quick and dirty solution, for example by appending the DockPanel id to the mime data, which would prevent drops to a widget with a different id.

Perhaps that string should be a class parameter that can be changed for these sorts of issues? It probably ought to be at least a variable so it can be referenced instead of typed out exactly three different places.

Or by adding the source to the Drag object here:

lumino/packages/widgets/src/dockpanel.ts

Lines 969 to 973 in 1beb8b3

	this._drag = new Drag({
	mimeData, dragImage,
	proposedAction: 'move',
	supportedActions: 'move',
	});

And checking for the source here:

lumino/packages/widgets/src/dockpanel.ts

Line 489 in 1beb8b3

if (event.mimeData.hasData('application/vnd.lumino.widget-factory')) {

[afshin]

As I recall this used to be possible before the dock panel refactor that laid out everything by calculation and left the children as sibling nodes in the DOM. The explicit design constraint was that a dock panel should not reside in another dock panel. The suggestions in this thread may work, but I would suggest revisiting the user experience of an embedded dock panel, when we were re-designing this component we came to the conclusion that it's a use case that might lead to convoluted UX.

…

On Thu, 30 Jan 2020 at 10:46 Jeremy Tuloup ***@***.***> wrote: Yes that's a good point. It should be possible to try a quick and dirty solution, for example by appending the DockPanel id to the mime data, which would prevent drops to a widget with a different id. Perhaps that string should be a class parameter that can be changed for these sorts of issues? It probably ought to be at least a variable so it can be referenced instead of typed out exactly three different places. Or by adding the source to the Drag object here: https://github.com/jupyterlab/lumino/blob/1beb8b36878dc0b1c4a75ab627b3938808eef0ca/packages/widgets/src/dockpanel.ts#L969-L973 And checking for the source here: https://github.com/jupyterlab/lumino/blob/1beb8b36878dc0b1c4a75ab627b3938808eef0ca/packages/widgets/src/dockpanel.ts#L489 — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#43?email_source=notifications&email_token=AABG6KJ4MKQ5XXURXMCQTU3RAKV2HA5CNFSM4KKLYELKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKKRJAI#issuecomment-580195457>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABG6KNGP2HHJU5ZSE55YP3RAKV2HANCNFSM4KKLYELA> .

[jtpio]

Thanks @afshin for the extra context.

Maybe such behavior could still be enabled using an opt-in flag, to let users do something like this if they really want to.

I'll experiment with this and report back, at least to get a feeling of what it looks like in terms of UX.

[dhirschfeld]

This functionality might be useful for e.g. variable viewers for the debugger

(though I'm not sure that is an actual improvement over just adding them to the main DockPanel)

[jtpio]

Reusing the example from above, and implementing the idea from #43 (comment) and using the source field from the Drag object: