search

caplin / FlexLayout

Docking Layout Manager for React
MIT License
919 stars 173 forks source link

Drag and drop a tabset with a header onto another tabset. #415

Closed StephenR1 closed 10 months ago

StephenR1 commented 10 months ago

Describe the bug

Hi,

First can I say how excellent this library is. Secondly apologies in advance if this is not a bug but is actually me doing something not meant!

Description: If you have a layout with two tabsets and you drag one tabset onto the tab bar of another, All the tabs are moved and 'merged' into the second tabset. If I try doing the same when the tabset being dragged has a header, it no longer seems to let me 'select' the tab bar as a destination and so won't do that 'merge' behaviour. As an aside, if I drag a tabset without a header onto one with a header, that does work and the sets merge.

The above merging can be tried out using the 'demo' page using the 'headers' layout.

Thanks very much

Stephen

Your Example Website or App

https://rawgit.com/caplin/FlexLayout/demos/demos/v0.7/demo/index.html

Steps to Reproduce the Bug or Issue

Open the 'Headers' layout. Add a tab to the 'Header 1' tabset Add a tab to the tabset with no header. Try to drag the whole 'Header 1' tabset to the tabset with no header and it won't allow it. Try to drag the whole tabset with no header to 'Header 1' and it allows the drop and merges all the tabs into 'Header 1'

Expected behavior

As above

Operating System

Windows

Browser Type?

Chrome

Browser Version

Latest (I think )

Screenshots or Videos

I can try to create a shot but I think your demo page is probably the easiest way to see?

Additional context

No response

StephenR1 commented 10 months ago

Sorry. I really should have looked harder at the code before posting...

I see that this is by design now (from Node.ts)

        // prevent named tabset docking into another tabset, since this would lose the header
        if (dropInfo.location === DockLocation.CENTER && dragNode.getType() === "tabset" && dragNode.getName() !== undefined) {
            return false;
        }

I also had a think about what I was trying to do and realised that it was a silly kludge. Having looked a the code I think there is a much more sensible idea so will post a different 'feature request' with those details and close this. (As it is not a bug)