with my team mates we are trying to implement a tree in React using react-complex-tree. We are using the controlled Environment because we want to make the user able to add and remove items. We are also implementing the Drag and drop mechanism, we filled the onDrop event and the "putting an item inside another" mechanism works. If we don't expand any Item also the reordering mechanism works, buf if we expand some Items and we try to move some child became all broken! The "target" element is wrong and in some cases (with the elements on bottom of the tree) also the "item" array is wrong!!! On "bestofreactjs.com" there is the issue #15, and seems to be similar. We are in trouble, this problems is making lose a big amount of time! How can we fix it ? Thanks all for the answers.
Related
What approach to do intelligent drag drop like this in react? (canvas or non-canvas based approach?). That is to use React (with a library such as React DND) without using cavas, OR move to rendering/drawing this within React using HTML 5 "canvas" (with potentially a library such as "react-konva".
Requirements:
when dragging the item, the other items behind "move" to calculate
and show what the final re-arrangement will look like (if the drag is
allowable)
may be drop points for which move is not allowed so would highlight
this as well (e.g. if some other items in the timeline were "locked")
I have checked React DND, react-konva, and others. The issue they use the transform property and that prevents moving the placeholder separately from dragging the item.
So here is the custom implementation: https://codesandbox.io/s/drag-swap-qv6s0x
P.S
It is still unfinished (buggy), later I will fix and clean up the code. But for now, I would like to share it, to know is it what you wanted or if I missing something.
Have a look at this online documentation for MDBootstrap:
https://mdbootstrap.com/docs/standard/plugins/drag-and-drop/
Go to "Horizontal example" section, this might be what you are looking for.
Edit: Sadly this is a premium feature :(
I want to create a list of switches (or custom controls that handle horizontal pointer movements).
That is easily done by putting those components in a Container using BoxLayout.y as LayoutManager.
But because the components (the horizontally movable Switch or custom components) take a lot of room in the list it is very difficult to scroll the list. This is because all the pointer events are handled by the nested components and none get through to the surrounding Container - the one with the BoxLayout.y.
The natural thing I tried to do was to call the respective pointer...-Methods of the parent Container - which turned out to be a stupid idea - it led to a StackOverflowError.
What I really would like to do was handle the pointer events in both the child and the parent Components for a certain threshold distance on order to determine whether the user wants to scroll horizontally or vertically.
I noticed that with nested BoxLayout.x-Containers nested in a BoxLayout.y-Container this works out of the box. But I haven't been able to grasp how to achieve that with a custom control - and it does not work the the CN1-Switch-Components either.
The question is: How do do this in a reasonable manner? Is it even possible? Or would that require gesture detection which is not (yet) part of Codename One?
This is the default behavior of Codename One. Scrolling takes over and there are biases based on the X/Y axis you use. All of that is built in. As I recall you changed a lot of default behaviors in Codename One, I suggest trying a clean project and seeing how it works e.g. with something like this: https://www.codenameone.com/blog/button-lists.html
I have been using ContainerList with drag and drop functionality in the past. Since ContainerList has been deprecated I am now trying to use something different. As recommended in the documentation I would like to use just a Container with BoxLayout in the y-axis.
However looking into that this seems to be rather difficult, too.
What I am trying to (re-)create ist a list of entries containing with labels and buttons which entries van be sorted by a longPointerPress followed by drag and drop.
In the past I managed to do this by heavily modifying the ContainerList and ContainerList.Entry classes.
But with a Container I cannot see how to do this at all.
As I see it this would involve:
creation of a ListEntry component derived from Container and overriding de.sae.tryout.modules.dragdrop.DraggableContainer.getComponentAt(int, int) to always return this to intercept all of the pointer interactions and
depending of its state passing through the pointer events to the child components if it is appropriate
Since this seems to me as an inadmissible trick the question: What is the recommended way to display such a sortable list of entries where each entry contains some labels and buttons?
Since every entry would be a lead component to make it feel like a container list just using setDraggable(true) on the lead component and setDropTarget(true) on the parent will allow drag and drop.
Notice this won't have the same behavior as you have now with the long pointer press which might be a problem but might not. If this is a problem you can override the drag initialization behavior of the lead component to make it closer to the way it worked.
I have a TreeView which holds approximately 100,000 TreeNodes or even more, I have optimized everything related to loading or unloading them on deserialization process but now I'm stuck with an issue I can't overcome.
Its important to mention I decided not to use the LabelEdit default event given by the control since its pretty tricky to make it work as I wanted to, Its widely known that there are a lot of "problems" with this particular event which have pushed many devs to implement their own custom TreeViews.
In my case I am using a ContextMenu which has a Rename option, this brings a textbox right in front of the TreeNode and then I just simply change the TreeNode.Text property to whatever the user input was in the TextBox keydown event, once we trigger this event, the whole GUI freezes for a couple of seconds (4-5), I'm not doing any Depth search over the TreeNodeCollection or anything, I am directly accessing the TreeNode and modifying the property...
So, any thoughts on what could be wrong here? I already tried BeginUpdate / SuspendLayout / or even a custom solution found here How do I suspend painting for a control and its children? and nothing seems to help.
The first thing that comes to mind is that when the text is changed on the node, it must be redrawing the entire treeview.
In this situation, suspendlayout will not help, as the control isn't laying its contents.
I think beginupdate stops the drawing when nodes are being added to the list, but the text changed might bypass this.
Have you considered not using the keydown, and just updating the text once the user has dismissed the textbox? (i.e. done editing). Not ideal, but will limit the performance hit to once, instead of every key stroke?
Currently I am stuck with a problem that is simple on the first sight. Its about automated GUI testing.
I want to make a row/cell of a WPF DatGrid completely visible by scrolling using ScrollIntoView(row) and then accessing the row/cell directly after. Unfortunately scrolling in ScrollViewer seems to happen asynchronously. This means I need to wait for the scrolling to finish before accessing the row/cell. For this purpose I found the ScrollChanged event I can subscribe.
There is only one detail I can not solve: If the row/cell I want to access is already visible (and no scrolling is necessary) I do not get that event and the algorithm gets stuck. I was not able to find a reliable way to predict if a call to ScrollIntoView(row) actually scrolls.
Any idea how to solve this?
To make sure layout is updated call UIElement.UpdateLayout after you ScrollIntoView and before you want to use item. Quoting MSDN it
Ensures that all visual child elements of this element are properly updated for layout.