ticlo/rc-dock

Dock Layout for React Component

ticlo : a general puurpose visual programming language

---

rc-dock's Issues

rc-dock drag-n-drop events doesn't work in Safari (12.1)

rc-dock just amazing, but it seems, drag-n-drop and resize events, connected with this lib, doesn't work in Safari. Is there any possible solutions or polyfills to eliminate this problem?
P.S. This behavior you can see even on your page of examples (https://ticlo.github.io/rc-dock/examples/)

quick question

Any advice on how to implement this?

Dragging entire tab group can clone it

Hi, thought we had caused it, but turned out to be easy to reproduce also in the example.

In https://ticlo.github.io/rc-dock/examples/#drop-mode , drag from the reminder of the bar of the three tabs on the right, to move all of them.

Drop in drop zone above or below itself, staying in the right half.

Both the dragged and dropped groups are now in the layout, with tabs offering double views of the same content. I would expect the result to be no visual change, no matter if the 'move' is carried out or it is deemed meaningless.

This seems to not be an issue when you have more than one bar vertically, or if dropmode isn't edge.

more well defined types

I'm looking something like this, but with more type support. Eventually, it would be helpful if someone wants to save the state in the redux as an option.

export const enum GroupOrientation {
    HORIZONTAL,
    VERTICAL,
}

export const enum GroupLocation {
    FIRST,
    LAST,
    NEXT,
    PREVIOUS,
}
export const enum GroupDirection {
    UP,
    DOWN,
    LEFT,
    RIGHT,
}

export const enum GroupsArrangement {

    /**
     * Make the current active group consume the maximum
     * amount of space possible.
     */
    MINIMIZE_OTHERS,

    /**
     * Size all groups evenly.
     */
    EVEN,
}

Moving/Maximising/Manipulating tabs causes re-render of inner components?

Hi, this library is very promising but there is a fatal flaw in its use for my app (or I'm just doing something wrong, which would be nice!).

I have a VERY expensive React component with lots of server logic etc. This cannot, ever, re-render. It is a pure component with no arguments. So in usual conditions, it has no reason to ever re-render.

But when I maximise or move a tab, the component does re-render :(
I profiled and it says my component is being rendered for the first time.. meaning the tab which holds it has been destroyed and re-added from fresh.

Switching tabs works fine. Moving or maximising them seems to cause re-renders for their child components, even if those child components are pure/memoed etc.

Please advise is this is something known, if I seem to be doing something wrong, or this is something fixable in source. Otherwise, this library is great.

Support for Accessibility (WCAG 2.0AA)

Thanks for the rc-dock library.

I would like to add accessibility support Web Content Accessibility Guidelines.

Would you accept it?

Feature requests: Hide, Enlarge, & Popup

Hi @rinick,

First of all, thank you for the awesome work! This is indeed the best react based layout manager after days of searching. The cache mode is brilliant and solves a lot of the re-rendering problem!

Compared to some of the other libraries such as golden-layout, react-mosaic, flexlayout-react, there are still three features missing:

1. toggle hide: something like double click the tabs label to toggle hide the pane
2. enlarge: enlarge the pane to full screen
3. popup window: maybe something like https://github.com/rmariuzzo/react-new-window?

Do you plan to support these?

Thanks!

Customisation

Could you add functionality by passing custom styles by object into docklayout?
That rc-dock has possibility to change styles not only by css files but with passing params

Cannot get the reference of rc-dock to access the methods like dockMove

I tried creating the reference of the DockLayout object and accessing it with the ref object. But I'm not able to do that. Here is the code

import React, { useRef } from 'react';
import DockLayout from 'rc-dock';
import './App.css';

function App() {

  const rcDockRef = useRef(null);

  const defaultLayout = {
    dockbox: {
      mode: 'horizontal',
      children: [
        {
          tabs: [
            {id: 'tab1', title: 'tab1', content: <div>Hello World</div>}
          ]
        }
      ]
    }
  };

  return (
      <DockLayout
        ref={rcDockRef}
        defaultLayout={defaultLayout}
      />
  );
}

export default App;

It will be great if you guys can help me out with this?
My goal is to access methods of rc-dock like dockMove.

New functionality needed, to disable docking of floating Panel.

Hi,

react, react-dom should be peerDepeendencies

Hey, @rinick, I just noticed this:

Most packages in the wild (including the rc-tabs package this library depends on right now) don't ship with their own version of react when I install them. So, why is react, react-dom in .dependencies? Shouldn't they be in peerDependencies instead?

rc-dock/package.json

Lines 29 to 35 in 7ccf837

	"dependencies": {
	"classnames": "^2.2.6",
	"lodash": "^4.17.11",
	"rc-tabs": "^9.6.4",
	"react": "^16.8.6",
	"react-dom": "^16.8.6"
	},

What if the user has a different version of react, e.g. [email protected] from an old commercial project?

Maybe I'm wrong and shouldn't be worried about this, but if I already have react installed in my projects, I shouldn't have to install a different version of React + React DOM separately just because this library says so. Plus, I'm quite hopeful that by moving react and react-dom to peerDependencies, we'd have a somewhat smaller build...

Resources to back me up:

• https://medium.com/@jacob.h.page/common-npm-mistakes-51bf8989079f#d2fe
• https://stackoverflow.com/a/34645112/11455106

Resizable undocked panels

I'm looking at the examples, but right away, I can see one thing's already missing:

Can the undocked components (<DockPanel />) be resized yet? I tried to click-drag the handles, but nothing's happening.

Prevent docking to other DockLayout instance

Hi!

First of all, thank you for this library.
I am trying to use it for a specific case in which I could not figure out how to do it:

In the end I want to have:

• Left dock: containing 2 components A & B. These components can be dockable/tabable only in the left dock
• Right dock: containing 2 other components C & D. These components may be dockabel/tabable/floatable only in the right dock

I tried with the groups, but this is only preventing for tabs.
Is there a way for not letting one DockLayout to be containing docks of another DockLayout?

I also tried disableDock, but it affects docking as a whole...

Couldn't get dropMode="edge" to work

Used the drop mode example below:

rc-dock/example/drop-mode.jsx

Lines 1 to 51 in 21b3af2

	import React from 'react';
	import ReactDOM from 'react-dom';
	import {htmlTab, jsxTab} from "./prism-tabs";
	import {DockLayout} from '../lib';
	let dropModeTab = {
	title: 'Drop Mode',
	content: (
	<div>
	<p>When you set <b>dropMode</b>='edge' on &lt;DockLayout&gt;</p>
	<p>The distance between mouse cursor and panel border is used to pick drop location.</p>
	</div>
	)
	};
	let tab = {
	title: 'Tab',
	content: <div>Tab Content</div>
	};
	let box = {
	dockbox: {
	mode: 'horizontal',
	children: [
	{
	mode: 'vertical',
	children: [
	{
	tabs: [{...dropModeTab, id: 't1'}, jsxTab, htmlTab],
	},
	{
	tabs: [{...tab, id: 't4'}, {...tab, id: 't5'}, {...tab, id: 't6'}],
	}
	]
	},
	{
	tabs: [{...tab, id: 't7'}, {...tab, id: 't8'}, {...tab, id: 't9'}],
	},
	]
	}
	};
	class Demo extends React.Component {
	render() {
	return (
	<DockLayout defaultLayout={box} dropMode='edge'
	style={{position: 'absolute', left: 10, top: 10, right: 10, bottom: 10}}/>
	);
	}
	}
	ReactDOM.render(<Demo/>, document.getElementById('app'));

I tried to create an example CodeSandbox for it, but it doesn't work. The <div className='dock-drop-indicator'> in the element wouldn't show any changes in size so effectively, drop mode doesn't register into the component. Did I forget to configure it? All I needed is dropMode="edge", right?

Adding multiple tabs at once

Hi,

I'm using your dock for an editor and I want it to open multiple tabs when you first enter the editor. If I use dockMove(source, target, direction) twice consecutively it seems to open only the last tab but if I stagger the calls by 50ms or so it will open both of them as expected. Any idea why this might be or how to fix it?

Thanks,

Ben

Not work drag and drop rc-dock component in tab of other rc-dock component.

Hello. Please tell me, how I can correctly use rc-dock component in tab of other rc-dock component. I find problem, drag and drop of inner rc-dock component not working. If tab of outer rc-dock in floatable mode - working ok. But in "horizontal" or "vertical" mode, images for drag and drop not displayed when I drag tab.

problem when right click in multiple windows

hi sorry for my bad English
very thanks for your good library
i made a custom contextmenu shown with right-click .
when i use rc-dock and have multiple window (or tab) and do right click on a window this error shown in console but when i close all tabs (or windows) except one of them and do right click error noting shown in console thanks for any help.

i use this library's :
material-ui for theme.
react-contexify for contextmenu.
stockcharts for charting.
rc-dock for multiple windows

error:
Uncaught TypeError: Cannot read property 'offsetWidth' of undefined
at Menu.setMenuPosition (Menu.tsx:162)
at callCallback (react-dom.development.js:12490)
at commitUpdateQueue (react-dom.development.js:12511)
at commitLifeCycles (react-dom.development.js:19858)
at commitLayoutEffects (react-dom.development.js:22803)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
at invokeGuardedCallback (react-dom.development.js:292)
at commitRootImpl (react-dom.development.js:22541)
at unstable_runWithPriority (scheduler.development.js:653)
3VM79 react_devtools_backend.js:6 The above error occurred in the

component:
in Menu (created by MyAwesomeMenu)
in MyAwesomeMenu (created by CandleStickChartWithDarkTheme)
in div (created by CandleStickChartWithDarkTheme)
in CandleStickChartWithDarkTheme (created by fitWidth(CandleStickChartWithDarkTheme))
in fitWidth(CandleStickChartWithDarkTheme) (created by Root)
in div (created by Root)
in div (created by DockTabPane)
in DockTabPane (created by DockTabs)
in div (created by TabContent)
in TabContent (created by Tabs)
in div (created by Tabs)
in Tabs (created by DockTabs)
in DockTabs (created by DockPanel)
in div (created by DragDropDiv)
in DragDropDiv (created by DockPanel)
in DockPanel (created by DockBox)
in div (created by DockBox)
in DockBox (created by DockLayout)
in div (created by DockLayout)
in DockLayout (created by Root)
in Root (created by Context.Consumer)
in Route (created by BaseRouter)
in Switch (created by BaseRouter)
in Suspense (created by BaseRouter)
in div (created by BaseRouter)
in BaseRouter (created by App)
in div (created by ForwardRef(Paper))
in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
in WithStyles(ForwardRef(Paper)) (created by ForwardRef(Drawer))
in div (created by ForwardRef(Drawer))
in ForwardRef(Drawer) (created by WithStyles(ForwardRef(Drawer)))
in WithStyles(ForwardRef(Drawer)) (created by MiniDrawer)
in ThemeProvider (created by MiniDrawer)
in div (created by ForwardRef(Grid))
in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
in WithStyles(ForwardRef(Grid)) (created by MiniDrawer)
in div (created by ForwardRef(Grid))
in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
in WithStyles(ForwardRef(Grid)) (created by MiniDrawer)
in div (created by MiniDrawer)
in MiniDrawer (created by App)
in Router (created by BrowserRouter)
in BrowserRouter (created by App)
in App (created by ConnectFunction)
in ConnectFunction
in Provider

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
r @ VM79 react_devtools_backend.js:6
react-dom.development.js:11102 Uncaught TypeError: Cannot read property 'offsetWidth' of undefined
at Menu.setMenuPosition (Menu.tsx:162)
at callCallback (react-dom.development.js:12490)
at commitUpdateQueue (react-dom.development.js:12511)
at commitLifeCycles (react-dom.development.js:19858)
at commitLayoutEffects (react-dom.development.js:22803)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
at invokeGuardedCallback (react-dom.development.js:292)
at commitRootImpl (react-dom.development.js:22541)
at unstable_runWithPriority (scheduler.development.js:653)

Feature Request: Enabling users of RC-dock to decide how to render panel contents

Hey,

So I'd like to use RC-dock with a different tabs component - for styling and accessibility purposes. Looking at it - I think one option would be a render prop e.g. renderPanelContent for rendering the panel contents. That could be given the panel data - and the drag-drop listener calls - that are currently given to DockTabs and render a component.

There'd still need to be something done for the drop behaviour of the tabs into the tab bar -> right now I think that's done by the DragDropDiv inside the DockTabBar -> I'm not quite certain how we'd enable that. yet, maybe expose the DragDropDiv so it could be used by the renderPanelContent prop.

What do you think?
I'm happy to try this out and come up with a proposal
Do you think it could be incorporated into the rc-dock package?

Solution for the problem "Uncaught TypeError: subChild.children is not iterable"

Hi guys. Thank you very much for "rc-dock", is very good component, but I find a problem.
This is my simple react component for test:

export default class MyDockView extends Component
{
	constructor(props)
	{
		super(props);

		this._layout = {
			dockbox: {
				mode: "horizontal",
				children: [
					{
						id: "panel_1",
						mode: "vertical",
						size: 1,
						// -----------------
						// Here problem...
						// -----------------
						tabs: [{
							id: `tab_${Date.now()}`,
							title: "Tab 1",
							closable: true,
							content: <div>Tab 1 content</div>,
							minWidth: 300,
							minHeight: 300,
						}],
					},
				],
			},
		};
	}

	addTab() {
		const panel = {
			id: `panel_${Date.now()}`,
			x: 300, y: 150, w: 400, h: 300,
			tabs: [{
				id: `tab_${Date.now()}`,
				title: "Tab new",
				content: <div>Tab new content</div>,
				minWidth: 200,
				minHeight: 200,
			}],
		};

		this.dockLayout.dockMove(panel, null, "float");
	}
	
	render() {
		return (
			<div style={{border: "0px solid orange", display: "flex", flexDirection: "column", width: "100%", height: "100%",}}>
				<div style={{border: "2px solid Gray", display: "flex", padding: "10px",}}>
					<button onClick={() => this.addTab()}>
						Add tab
					</button>
				</div>
				
				<DockLayout
					ref={(ref) => this.dockLayout = ref}
					defaultLayout={this._layout}
					dropMode="default"
					style={{
						border: "0px solid red",
						position: "relative",
						width: "100%",
						height: "100%",
					}}
				/>
			</div>
		);
	}
}

And I make two movements.

1 - Drag the new panel (or taboo) to the right side, as shown in the picture.

2 - Drag the new panel (or taboo) to the top side, as shown in the picture.

And after that I immediately get an error in devtools.

Uncaught TypeError: subChild.children is not iterable
    at fixBoxData (Algorithm.js:504)
    at Object.fixLayoutData (Algorithm.js:578)
    at DockLayout.dockMove (DockLayout.js:156)
    at Object.DockDropSquare.onDrop [as onDropT] (DockDropLayer.js:48)
    at DragState._onDragEnd (DragManager.js:100)
    at HTMLDocument.DragDropDiv.onDragEnd (DragDropDiv.js:124)

Solution
If layout data looks like:

this._layout = {
	dockbox: {
		mode: "horizontal",
		children: [
			{
				id: "tree",
				mode: "vertical",
				size: 1,
				// -----------------------------------------
				// Here children with tabs, instead of tabs
				// -----------------------------------------
				children: [{
					tabs: [{
						id: `tab_${Date.now()}`,
						title: "Tab 1",
						closable: true,
						content: <div>Tab 1 content</div>,
						minWidth: 300,
						minHeight: 300,
					}],
				}],
			},
		],
	},
};

Everything works without problems.

Failed to use

There is no reference to CSS in the example, I found it.
import 'rc-dock/dist/rc-dock.css'

How do I find the most recent active panel when the layout state changes?

One reason I've considered flexlayout-react is that it memorizes which panel was last active due to a user action, such as...

• adding a new tab
• moving a tab panel
• rearranging the tabs in a panel
• clicking on a tab to edit an input field
• etc etc...

It allows my team to easily assign new content to the last changed panel, kind of like what users normally do in a desktop environment. Compare this behavior to browsers:

when you put hide the browser in the background and open a link from, let's say, a text editor, it automatically opens a new tab right next to your last tab,

Unfortunately, I don't see a solid approach of that here outside of handling afterPanelLoaded or calling some object diffing algorithm to tell the difference between the old and new layout state. Here's how I've attempted it: https://codesandbox.io/s/mo897nyn6j. Even then, it's hard to tell which panel was last worked on.

I do have an algorithm to do reverse searching from panel to tab: i.e to find out which panel the tab currently belongs to. I used

rc-dock/src/Algorithm.ts

Lines 57 to 91 in 5d6ce97

	function findInPanel(panel: PanelData, id: string): PanelData | TabData {
	if (panel.id === id) {
	return panel;
	}
	for (let tab of panel.tabs) {
	if (tab.id === id) {
	return tab;
	}
	}
	return null;
	}
	function findInBox(box: BoxData, id: string): PanelData | TabData {
	let result: PanelData | TabData;
	for (let child of box.children) {
	if ('children' in child) {
	if (result = findInBox(child, id)) {
	break;
	}
	} else if ('tabs' in child) {
	if (result = findInPanel(child, id)) {
	break;
	}
	}
	}
	return result;
	}
	export function find(layout: LayoutData, id: string): PanelData | TabData {
	let result = findInBox(layout.dockbox, id);
	if (!result) {
	result = findInBox(layout.floatbox, id);
	}
	return result;
	}

as the foundation for it. Unfortunately, that's just finding the panel from a tab. I don't know yet how to tell where other kinds of changes happen.

Algorithm gist for find parent panel of tab: https://gist.github.com/andrewsantarin/6835090e7faa6ef07a6e564328b15f41

Is there any way of working around this for now?

ReferenceError: exports is not defined When migrated to version 3.0.0

ReferenceError: exports is not defined
Module../node_modules/rc-new-window/es/index.js

12 | };
13 | };
14 |

15 | Object.defineProperty(exports, "__esModule", {
16 | value: true
17 | });
18 |

I'm building a ReactJS application created using npx create -react-app, after updating the version of rc-dock from 2.6.2 to 3.0.0 the above error occured. I've tried many solution for this error but non has worked.

Thank you in advance.

panelLock property allow floating of panels during dropMode 'edge'

Hi, i'm little bit confused with behavior of panelLock property during dropMode="edge". Is it normal situation, that in 'edge' mode panels can be dragged in floatbox when we are using panelLock?
P.S. In dropMode='default' panelLock works according to docs and disallow panels to be placed in floatbox

Minimize?

Hi there,

I am not sure if this is possible just now. Can I minimize a tab or set the height of a vertical tab programmatically rather than dragging?

Many thanks,

Preventing components from re-mounting

Hi everyone,
First, I wanted to say that I'm using this component and I'm really happy with it, it works great!

The only thing I have noticed is that every time a tab is moved or maximized (or minimized), the component that is in the content of it is unmounted and mounted again. Is there a way to prevent this behavior? I would prefer not to lose the state of component every time it is being dragged.
I'm using defaultLayout.

Listeners for changes size of docks and on moving docks

Hi, just wanted to ask is it possible to add listeners on 'move' or 'resize' actions on docks? Or, if this possibility is ready now, how can i use it then? Thanks

use different tab in tabbar dropdown

right now tab bar and dropdown use same element, which means they both support the same drag/drop, and even calling the getRef twice.

currently a work around is implemented in this commits: 49d1fb5
ideally the dropdown tab should be different in the first place

Single Child Panel

Is there a way to limit a panel to having one child:

• prevent dropping of children
• prevent dropping panel into other tabbar (but allow it to be redocked somewhere else, just not as a tab)
• no tab bar

Ideally, I'd like to free up the vertical space that is used for the tab bar so maybe it could be moved with a ctrl-click anywhere on the panel or something but, alternatively, it could support a handle class that can be dragged.

api to use with redux

Was there any API methods to normalize the layout data to store in the redux store and vice versa?

Id start with `+`

This is not a bug but of curiosity want to know the reason behind using + for Id instead of going with number?

https://github.com/ticlo/rc-dock/blob/master/src/Algorithm.ts#L352

Question - roadmap/future of RC dock

@rinick

Hi, we're looking at using RC dock in our codebase and was wondering what the roadmap is for RC dock in the future. I saw that an alpha version for 3.0... was released a few days ago, so I was wondering if you're planning on doing a major version bump and what changes would include.

RC is pretty cool 😄 Thanks for making and sharing it

how to use a custom tab instead of `rc-tabs`

Can we customize the tabs instead of using the provided rc-tabs?

New functionality needed, to disable docking of floating Panel.

Hi,

I need a new functionality in rc-dock, where via a property, I want to be able to disable , the floating panel, from docking back or docking to any other panel. I don't know if in the current panel, there is anyway I can do this ?

Basically, I need the floating panel to be non-dockable.

We used the Basic Example, on how the floating panel works. We want the floating panel, tab-9 and tab-10, to be non dockable to anywhere else.

Also, if we would like to disable other panels to dock back into the floating panel.

Kindly help.

Undock panels to a new window

Using React portals is possible to achieve docking functionality with multiple windows.
Codepen: https://codepen.io/davidgilbertson/pen/xPVMqp
Article: https://medium.com/hackernoon/using-a-react-16-portal-to-do-something-cool-2a2d627b0202

This may be very difficult -or impossible- to implement and I don't expect it soon. With this it may be possible to achieve full desktop docking features in the browser.

It has other quirks like the styles have to be copied over the created window.

Thoughts on the idea?

Pass header dynamically

I need to set-up a functionality wherein I need to add icons next to tab names.
I can't find relevant documentation to pass additional information in the header.

Can you please let me know if there is any facility to create the header tab dynamically without modifying rc-dock files like through props?

Question: rc-tabs

Hi,

I notice that the rc-tabs has released v11 a few months ago, I'd be interested to know if you have a plan to move to the latest rc-tabs?

Any info would be appreciated, thank you!

Some improvements and demands

Hi,
The application looks stable and successful in its capabilities.
But we had a similar application before.
Before switching to this application, I wanted to give an opinion on a subject and I think it will make our transition quite easy if we can get a return in a short time. Think of it as a recommendation.
It clusters the windows in the application under three headings with a complex model. Instead, you would consider switching to a data structure such as "items: [{id: 'window1, position: {boxType:' float '....., vs}'}]", which is reduced to a single level. Thus, people who want to use your application but have an existing application do not have to keep data according to your position information.

tabs of different dock-panel also get render for any change in the tabs of other dock-panel

Seems the tabs in a different DockPanel always render even the data on that Tabs had not changed.

https://github.com/ticlo/rc-dock/blob/master/src/DockTabs.tsx#L190 <-- always leads to true

Seems like there is a nested parent object that was causing this issue.

new-window incompatible with controlled-layout, and layout load/save

Heyo,

I tried to implement the 'new-window' example in combination with with 'adv-save-layout' and 'controller-layout' examples.

'new-window' + controlled = windows don't pop up
'new window' + saveLayout = pop ups work, but saved pop out windows don't load

Totally understandable btw, I can imagine popout windows are diabolical to work with. I'll try to design around it.

"dock-nav-more" are missing

Description

In small view, the element with the class "dock-nav-more" is not displayed (it does not even exist in the DOM tree).
At the same time this is probably the reason for this bug:

Expected Behavior

That a button is displayed with three dots, so you can still navigate to the tabs, just like in the example.

Environment / Tested With

react:16.13.1 & react:17.0.0
rc-dock:2.6.2, rc-dock:2.6.1, rc-dock:2.6.0, rc-dock:2.5.2 & rc-dock:2.0.0

Minimal Example / Reproducion / Sandbox

I only copied the "basic" example, including the less files (renamed to scss).
CodeSandbox

Support RTL

I would need RTL support:
https://material.io/design/usability/bidirectionality.html#mirroring-layout.
I am setting the dir="rtl" in html.
RC-Dock seems to support it somewhat, but when resizing a panel with the mouse (left/right) the panel goes in the other direction.
Some other issues:

• Close button is located to the right, should be left of the tab name
• The maximize button is located to the right

how we can store layout data in redux to manage panels after redux get change

Is there any way to manage layout data in redux so we can display updated layout from redux state. ?

common content component for each panel

Is there a way we can use one common component for a panel with multiple tabs where its state gets updated when the tab changes?

In adv-tab-update example 2 tabs being added

In adv-tab-update example at https://ticlo.github.io/rc-dock/examples/#adv-tab-update clicking the button "Add Tab" results into 2 tabs being added at once.

Performance Issue

Hi Im using rc-dock in my react application which is full of tabs and cards with load of real time data and api responses, because of the docking the application is being too much heavy and while moving the tab from when card to another it becomes too slow, and don't know the reason why.
If there is any guidance or help in debugging such cases in order to check the performance of the rc-dock.
Thank you in Advance
Regards

Squeezed tab infinitely renavigates tab panel header scroll

Hi, @rinick.

I spotted a bug while testing a local instance of rc-dock on my mobile. See my recording:
https://youtu.be/LqtXzAVvTk8

When the panel has a given panelExtra, and you dock the tab header to a new panel such that there's not enough space to fit the tab header in that panel, the panel's tab header scroll loops forever.

Notes

1. You need to drag & drop the tab using the tab header, not the whole panel's tab header bar, or else you can't reproduce this bug.
2. You should use a small viewport size to emulate it, such as an iPhone 5S/SE (real or emulated) or a really narrow layout using CSS. The bug won't happen if the layout is wide enough.

Add new tabs in controlled layout

Hi. I'm trying to add new tabs to controlled layout according to your example (https://github.com/ticlo/rc-dock/blob/master/example/panel-extra.jsx), but i have not a big progress here. Are there some moments to know, when i'm adding new tabs in controlled layout, maybe?

Auto-highlighting of another content in Safari and Edge browsers during drag-n-drop and resize events; expanded functionality of rearranging tabs

Good morning. Recently, i have noticed a little bit strange behavior in Safari and Edge browsers. When you use "drag-n-drop" and "resize" events in that browsers, you can see, that content behind cursor starting to be highlighted.
And another question: is it possible to rearrange tabs between themselves when tabLocked property is true, in some way? I need panelData with some tabs, which i could rearrange, but disallow splitting for them and moving out from their parent container to another ones. Thanks.

popout window

Are there plans to put a browser popout window in for this? So you can pop a dock out from the browser window?

BoxData - maxwidth, mawHeight

Hello,

The defaultLayout object foresees the possibility to set a minWidth and a minHeight.
Is there a possibility to set a mawWidth and maxHeight?
If so, could you provide a sample code?

In fact, my left pane should not exceed a certain with, otherwise the layout of my main pane is broke. Or should I define groups? But in that case, I do not see how to set these kind of limitations.

With kind regards,

Richert