Nested list (tree) - how to nest elements by dragging to the right? - sortablejs

What would be the approach with Vue.Draggable/SortableJS in order to achieve the functionality as shown in this animated gif?
The default behavior of Sortable for nesting is to drag the element up to the above element until the mouse reaches emptyInsertThreshold pixels from the drop zone of the above element but I would like to be able to nest elements by dragging them to the right. Same for un-nesting.
I have set emptyInsertThreshold to 0 to disable the default behavior and now when I drag the element to the right I get the following events fired: clone and start (in that order).
But how do I:
Can get notified when the mouse has traveled the pre-defined distance to the right?
Inform Vue.Draggable that the ghost element should be nested as a child to the element under which I am doing the horizontal movement?

You can get the mouse position given in the start event under event.originalEvent and in the onMove event using the originalEvent argument (2nd argument). I would track the % that the mouse is past the end of the list item above the dragged item, using: (clientX - aboveItemStart) / aboveItemWidth. Then when it reaches 10% or so, change the DOM directly using event.dragged. Not sure how you would modify it to work with Vue.Draggable... you might need to edit the Vue.Draggable source.

Related

Godot - Input.is_action_just_pressed() runs twice

So I have my Q and E set to control a Camera that is fixed in 8 directions. The problem is when I call Input.is_action_just_pressed() it sets true two times, so it does its content twice.
This is what it does with the counter:
0 0 0 0 1 1 2 2 2 2
How can I fix thix?
if Input.is_action_just_pressed("camera_right", true):
if cardinal_count < cardinal_index.size() - 1:
cardinal_count += 1
else:
cardinal_count = 0
emit_signal("cardinal_count_changed", cardinal_count)
On _process or _physics_process
Your code should work correctly - without reporting twice - if it is running in _process or _physics_process.
This is because is_action_just_pressed will return if the action was pressed in the current frame. By default that means graphics frame, but the method actually detect if it is being called in the physics frame or graphic frame, as you can see in its source code. And by design you only get one call of _process per graphics frame, and one call of _physics_process per physics frame.
On _input
However, if you are running the code in _input, remember you will get a call of _input for every input event. And there can be multiple in a single frame. Thus, there can be multiple calls of _input where is_action_just_pressed. That is because they are in the same frame (graphics frame, which is the default).
Now, let us look at the proposed solution (from comments):
if event is InputEventKey:
if Input.is_action_just_pressed("camera_right", true) and not event.is_echo():
# whatever
pass
It is testing if the "camera_right" action was pressed in the current graphics frame. But it could be a different input event that one being currently processed (event).
Thus, you can fool this code. Press the key configured to "camera_right" and something else at the same time (or fast enough to be in the same frame), and the execution will enter there twice. Which is what we are trying to avoid.
To avoid it correctly, you need to check that the current event is the action you are interested in. Which you can do with event.is_action("camera_right"). Now, you have a choice. You can do this:
if event.is_action("camera_right") and event.is_pressed() and not event.is_echo():
# whatever
pass
Which is what I would suggest. It checks that it is the correct action, that it is a press (not a release) event, and it is not an echo (which are form keyboard repetition).
Or you could do this:
if event.is_action("camera_right") and Input.is_action_just_pressed("camera_right", true) and not event.is_echo():
# whatever
pass
Which I'm not suggesting because: first, it is longer; and second, is_action_just_pressed is really not meant to be used in _input. Since is_action_just_pressed is tied to the concept of a frame. The design of is_action_just_pressed is intended to work with _process or _physics_process, NOT _input.
So, apparently theres a built in method for echo detection:
is_echo()
Im closing this.
I've encountered the same issue and in my case it was down to the fact that my scene (the one containing the Input.is_action_just_pressed check) was placed in the scene tree, and was also autoloaded, which meant that the input was picked up from both locations and executed twice.
I took it out as an autoload and Input.is_action_just_pressed is now triggered once per input.

How to add arrow annotations?

I need to add a batch of arrow annotations to an image, I know all the start and end points of the arrows.
And I've put them into an image (2 columns, many rows) which I used as a data sheet, how to realize it in script?
I noticed that in the DM help manual that the line annotation has the attributes-- start point and end point.
But the function to create an arrow annotation jsut looks like this:
Component NewArrowAnnotation( Number top, Number left, Number bottom, Number right )
Does that mean the number top and left define the start point, number bottom and right the end point?
I also need to change the color of the annotations, and add some text next to them (either side is OK, but please show me how to control it).
What isn't always clear from the current documentation is that annotations belong to the component object. You therefore find all required commands documented in the component section of the help documentation.
Note that also imageDisplays are themselves a subclass of the component object, so you can add "annotations" (components) to "imageDisplay" (components) using the ComponentAddChild... commands.
A script to add a simple arrow-annotation (pointing at 200/200) can therefore look like the following:
image test := RealImage( "Test", 4, 512, 512 )
test.ShowImage()
ImageDisplay disp = test.ImageGetImageDisplay(0)
component arrow = NewArrowAnnotation(100,100,200,200)
arrow.ComponentSetForegroundColor( 0, 1, 1 )
disp.ComponentAddChildAtEnd( arrow )

Knob drags beyond right boundary [More 1.5.1]

When creating a nice slider using Mootools More 1.5.1 Slider class, I noticed that the 'knob' can be dragged too far to the right.
Consider this slider scenario:
|--|~|----------------|
I find I am able to do this:
|---------------------||~|
which is no good when the parent div has overflow:hidden set.
This occurs because the Drag object in the Slider class sets the left most x position ( limit.x[1] ) as the width of the passed in element (parent of the knob).
I would expect this limit to be the the element width minus the knob width.
I get the same problem whether the 'knob' is inside or outside the 'element' (above and below in the DOM).
The only way I could fix this was with a hack:
if(mySlider.drag.options.limit.x[1]===mySlider.element.getSize().x){
mySlider.drag.options.limit.x[1] -= mySlider.knob.getSize().x;
mySlider.drag.setOptions(mySlider.drag.options);
}
Check out this Fiddle (examples of broken and hacked).
Am I missing something here? Or should this be raised as a bug?

Opposit of CGDisplayMoveCursorToPoint

I am looking for a way to retrieve the cursor position to later set the position back with CGDisplayMoveCursorToPoint. I can't find any function like CGDisplayGetCursorPosition in Quartz Display References.
Does anybody know how to retrieve the (absolute) position of the cursor in Mac OS X?
Use one of the answers at Cocoa: Getting the current mouse position on the screen to get the mouse position in global coordinates.
To call CGDisplayMoveCursorToPoint, get the display containing that position using CGGetDisplaysWithPoint, and then use the rect returned by CGDisplayBounds to convert the global point to a screen-local point.
Or just use CGWarpMouseCursorPosition instead of CGDisplayMoveCursorToPoint, since CGWarpMouseCursorPosition just takes a global point and no display.

How to create a custom mouse cursor in Matplotlib

I am interested in creating a custom mouse cursor, so that during drag and pick events on certain lines or points, the mouse changes from an arrow to a hand (or other symbol).
What is the best method of doing this?
I assume this is possible since the mouse cursor changes to a small cross hair during zoom operations. If possible, a solution using the PyQt/PySide backend would be preferable.
What you need is mpl_canvas. Follow this tutorial to set one up.
With an mpl_canvas, you can then set up events that get triggered.
fig = matplotlib.figure.Figure()
cid = fig.canvas.mpl_connect('button_press_event', your_method)
There are several kinds of signals under here (listed under Events).
With your signal set up, your_method gets called, with an event parameter. So do something like:
def your_method(event):
print('Your x and y mouse positions are ', event.xdata, event.ydata)
Click on the corrosponding Class and description links to see what exactly is in event. for a specific mpl_canvas Event.
In your specific case, to change how the mouse looks your_method should look something like:
def your_method(event):
#changes cursor to +
QtGui.QApplication.setOverrideCursor(QtGui.QCursor(QtCore.Qt.CrossCursor))