ticlo : a general puurpose visual programming language
ticlo / rc-dock Goto Github PK
View Code? Open in Web Editor NEWDock Layout for React Component
Home Page: https://ticlo.github.io/rc-dock/examples
License: Apache License 2.0
Dock Layout for React Component
Home Page: https://ticlo.github.io/rc-dock/examples
License: Apache License 2.0
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
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.
There is no reference to CSS in the example, I found it.
import 'rc-dock/dist/rc-dock.css'
Was there any API methods to normalize the layout data to store in the redux store and vice versa?
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/)
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
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
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?
Thanks for the rc-dock library.
I would like to add accessibility support Web Content Accessibility Guidelines.
Would you accept it?
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
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)
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.
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
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
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:
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...
Are there plans to put a browser popout window in for this? So you can pop a dock out from the browser window?
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.
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?
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
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
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?
Lines 29 to 35 in 7ccf837
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:
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.
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.
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:
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:
That a button is displayed with three dots, so you can still navigate to the tabs, just like in the example.
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
I only copied the "basic" example, including the less
files (renamed to scss).
CodeSandbox
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.
Used the drop mode example below:
Lines 1 to 51 in 21b3af2
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?
One reason I've considered flexlayout-react
is that it memorizes which panel was last active due to a user action, such as...
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
Lines 57 to 91 in 5d6ce97
Algorithm gist for find parent panel of tab: https://gist.github.com/andrewsantarin/6835090e7faa6ef07a6e564328b15f41
Is there any way of working around this for now?
Is there any way to manage layout data in redux so we can display updated layout from redux state. ?
Can we customize the tabs instead of using the provided rc-tabs?
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.
Is there a way to limit a panel to having one child:
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.
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
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.
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?
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,
}
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.
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!
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?
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.
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?
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
.
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,
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.
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
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.
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
Hi,
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.
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:
Do you plan to support these?
Thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.