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
Related
I'm currently prototyping a potential app where the user would be managing a primary list. What I would like is for the ability of an alternate list to slide out so both lists would appear side by side. This would allow the user to transfer items between the two via drag and drop. Since the main workflow would be on the primary list most of the time, it seems like it would be cleaner if most of the time, the alternate list is hidden.
To me, it seems like using NSDrawer would be a good fit. However it's deprecated. And I'm assuming it's impossible to build an app which has an 'L' shape or inverted 'T' shape.
So I was thinking of potential alternatives which I could try out.
Some ones I though of were
Expanding the window width to accommodate a split view. And shrink when done
Create a new NSWindow but find a way to always pin it to the side. So if either window were moved, the other would move with it.
Just use another NSWindow and don't care about the pinning. In theory I could always open it next to the other window and let the user worry about managing any movement.
Has anyone had any success in replicating an NSDrawer type of alternative?
I'm new to flutter and I'm looking for a way to implement a simple feature. A draggable container.
I have two groups of UI elements wrapped in a Container widget. I want to be able to go from one group to another by dragging or swiping in different directions.
How would I go about doing this?
Here are sample images of my UI design to help you understand what I want to achieve:
Image #1
Image #2
As you can see, Image #1 and Image #2 are only different in the bottom part of my design. I have already created all the necessary UI elements and wrapped them in the Container widget. Now the only thing I need is the ability to go from one group to another. It would also be nice if there was a callback method that could update the buttons above upon transitioning from one group to another.
Thanks in advance!
There are many possibilities to achieve this, depends on your exact wishes, here are 3 ideas:
Using a TabBarView to swipe the entire screen, Tab1 will be the first screen you showed, and Tab2 will be second screen - only the contents. (you probably did not want that, but just putting it out there).
Dividing the container into 2 pieces (vertically), and placing the TabBarView on the bottom part, having 2 tabs: 1 with the Today part and one with the Weekly part. (there are a few examples out there, for instance: divide screen into two equal parts in flutter).
You can also customize the build method to change anything (for example the top indicator) based on the current tab index (as asked and answered here: How to get current tab index in Flutter)
For a more custom solution you can use:
GestureDetector wrapped around your container, and handle OnHorizontalDragX (where X is Start, End etc.) to do any custom stuff - maybe changing the state and trigger a rebuild with the new image
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.
I am looking for a control many of us probably know, but I don't know it's name and don't have a real screenshot by hand, just this sketch:
In the left box one can select an operation or whatever, which then is moved to the right side. With the up/down arrows on the right, one can move this operation (or whatever kind of meaning the entry has) up or down in the order of execution.
How is this kind of control called? Or is it normally build by developers out of single controls? Is this control available in JavaFX 2? If not, I don't need exactly this control, but a control with the following features:
User can select multiple operations (duplicates allowed) out of all available operations
The user can arrange their order of execution
Thanks for any hint :-)
You need to use multiple controls to build up your interface. Use two ListViews with a MultipleSelectionModel for each (or at least the left one) and add a couple of buttons, that copy selected items from one list to the other and another couple of buttons which modify the position of selected items in the right list view by modifying the view's underlying item list.
listView.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);
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...