Issue while dragging elements inside a group - jsplumb

I have two groups and each group has a child element inside. Both child elements are connected using JsPlumb 5.12. When I click on the element and drag, the connections are broken.
For example. 'group1' has a child element 'elem1' and 'group2' has a child element 'elem2'. 'elem1' and 'elem2' are connected using JsPlumb connect method. when either of 'elem1' or 'elem2' is clicked and dragged, the connection lines are broken.
I saw the same issue in a demo which was part of JsPlumb doc. Has anyone faced this issue. How did u overcome this? I have attached the demo below.
As you can see when the child element of a group is dragged the connection is broken. It works fine when any other region of a group is dragged other than the child element.
Also is there a way to make a child element of a group not draggable?

If you think you have found a bug you'd be best off opening an issue on Github ( I refer to your statement "when the child element of a group is dragged the connection is broken" ).
Regarding switching off drag inside a group, there is a setDraggable(el, state) method available on the jsPlumb instance which you could call to disable drag for some element.

Related

jsPlumb Posse Example

Does anyone know of a working example for jsPlumbs Posses feature?
Since jsPlumb 2.0.0 there is another way of configuring multiple element drag - the concept of a posse. This is a group of elements that should all move whenever one of them is dragged. This mechanism is intended to be used for more "permanent" multiple drag arrangements - you may have a set of nodes that should always move together and they do not need to be considered to be "selected".
https://jsplumbtoolkit.com/community/doc/dragging.html

Android- RecyclerView Adapter - How to implement endless scrolling without deleting previous items

I'm developing an app to get tweets and display them on screen.
I've user RecyclerView and it works fine.
The thing is that when I get to the last item, I'm swapping the adapter in order to get new items, but the previous items get deleted and I can't scroll back to view them.
recyclerView.swapAdapter(adapter,true);
How can I implement endless scrolling without losing my previous values ?
Thanks!
The answer is here:
http://antonioleiva.com/recyclerview/
All I've had to do is add items to the list of items that's already in the adapter and then use "notifyItemInserted(position)".
Same idea for removal.

jsPlumb makeSource draggable move bug

I found a problem when setting the MapSource connectors.
In jsFiddle code, click on "Reverse" to plot again. When you try to move a div, notice that the background of the DIV it is with an open connector.
Commenting the following code:
instancia.makeSource(elem.pageSourceId, {
paintStyle:{ fillStyle:"transparent" },
//hoverPaintStyle: endpointHoverStyle,
//connectorPaintStyle: connectorPaintStyle,
//connectorHoverPaintStyle: connectorHoverStyle
});
This bug does not happen anymore, but I need this code to maintain the original style. Anyone have any idea what it might be?
https://jsfiddle.net/braziel/dvhh7hvg/
Please read carefully Creating an Endpoint to understand what happens:
Endpoints are created in a number of different ways:
jsPlumb.makeSource(...) - Makes some DOM element(s) a Connection source, allowing you to drag connections from it/them without having to first register any Endpoints.
jsPlumb.makeTarget(...) - Makes some DOM element(s) a Connection target, allowing you to drag connections to it/them without having to first register any Endpoints.
jsPlumb.connect(...) - Establishes a Connection between two elements (or Endpoints, which are themselves registered to elements).
jsPlumb.addEndpoint(...) - Adds an Endpoint to a given element or elements.
You try to use all the methods in your example and as result you are creating a lot of endpoints wich you can't control. My suggestion is to choose only one way and use it.

p:tree ajax loading nodes does not display the expand icon

I'm trying to ajax load the p:tree component. The idea is to mimic the tree of a windows file system. When I click the expand icon of a node, I make a call to a service which returns list of directories under that directory node. I then simply add these new directories as child nodes of the node which was expanded. I can successfully add child nodes to a node, however, I need to see the expand icon beside every new node being added. This is not happening for me. Any child nodes I add render without the expand icon and thus I am unable to go deeper into the tree.
Furthermore, it seems that PF tree component will only display the expand icon it the node has one or more children. However, in my case, I don't know whether a node will have children or not until that node is expanded.
The source code is available at the PimeFaces forum, I am opening this question in the hopes of getting a few more eyes looking at it.
http://forum.primefaces.org/viewtopic.php?f=3&t=34819
I have managed to find a workaround for this.
Everytime I add a new node anywhere on the tree, add a 'dummy' node to it. This will ensure that every new node added will get the expand icon beside. Now, when clicking the expand icon on a node, the backing bean will remove all children and add the real nodes.
There is probably a better way of doing this so I am open to other suggestions but for the time being this will do its job.

How to make selection on QGraphicsScene?

I'm writing a diagram editor in Qt with Graphics View Framework.
Currently I'm just trying to create a simple Node (QGraphicsItem) on GraphScene (QGraphicsScene). I created a Canvas (QGraphicsView) and added a grid to it. I can even add Nodes and move them around on scene. My final goal is to have different working modes, editing and styling options, etc. For now I just want to know how can I setup selection for Nodes already present on scene. I tried doing it with mouse events but noticed that event calls for selection and Node insertion overlap... When I try to select something a new Node is created... This is my first Qt application so I don't fully understand how the functionality I want to achieve should be designed.
How the Selection Rectangle should be properly drawn?
How should I manage mouse events that conflict with each other?
You can use a checkable button/action(that's a QPushButton/QAction with a checkable property set to 'true) to switch between Edit & Insert mode. Then you check the state in your mouse event and insert a new item only if you're in Insertion mode.
You can also distinct between mouse buttons - insert item when dragged with the right button for example
Or use QKeyboardModifiers - for example: on drag + Ctrl - insert item.
Hope this helps.
In case of the overlapping mouse events, you should have a single place (like QGraphicsView to handle the mouse clicking/moving events) and create a state machine and then handle the events according to the state you are in. You need to plan your architecture well and that can be really complex task.
set your state enum/constants
refer to the current machine state in your events in your if conditions
keep your "business logic" on a single place
Like it's shown in these two NodeEditor tutorials #11 and #12: https://www.youtube.com/watch?v=pk4v2xuXlm4 and https://www.youtube.com/watch?v=-VYcQojkloE)
If you still want more in depth explanation of the functionality and events of Qt, here is a full list of tutorials with implementing all possible features like dragging edges to nodes, selecting them and deleting them, cutting edges, serialization, etc., you can have a look on the whole list of 50 tutorials I've recorded here: https://www.blenderfreak.com/tutorials/node-editor-tutorial-series/.
I'm putting a link to the whole list, since it's not possible to write all the code on this page...

Resources