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.
Related
I am trying to make a teleport part, so I need to detect when Body collides with area. I tried to use body_enter/body_entered and body_exit/body_exited, but I do not know how exactly they work and where do I need to insert them. Can I have example codes of using it?
My nodes path:
RigidBody
├ CollisionShape
├ MeshInstance
├ Area
├ ├ CollisionShape
Scene tree structure
First of all, if you want two things to collide you probably want them to be siblings. Not one Node child of the other. This is because Spatials are placed relative to their parent. Said another way: when an Spatial moves, its children move with it.
Enable monitoring
Second, you want to make sure that the Node that will detect the collision is able to do it. In the case of a RigidBody and an Area, the Area will detect the RigidBody, and for that it must have monitoring to be true This is the default. Thus, unless you have been messing with it, you need to do nothing.
Layers and masks
Third, you want the layers and masks to overlap. In particular, you want the collision_mask of the Area to have bits in common with the collision_layer of the RigidBody. By default, they come with the first bit set, so this is also satisfied by default unless you have been messing with it.
SIGNALS
Fourth, you need to connect the "body_entered" signal of the Area. You have two ways to do that:
Using the editor:
Have the Area selected in the Scene panel (on the left by default), and then go to the Node panel (on the right by default) and then to the Signals tab.
There you should find "body_entered(body:Node)". Double click it. Or select it and then click the "Connect…" button at the bottom, or press enter.
Godot will ask you to select the Node you will connect it to. You can connect it to any Node on the same scene that has a script attached beforehand. I suggest to connect it to the Area itself.
Godot will also allow you to specify the name of the method that will handle it (by default the name will be _on_Area_body_entered).
Under "advanced" you can also add extra parameters to be passed to the method, whether or not the signal can/will wait for the next frame ("deferred"), and if it will disconnect itself once triggered ("oneshot").
By pressing the Connect button, Godot will connect the signal accordingly, creating a method with the provided name in the script of the target node if it does not exist.
From code:
To connect a signal from code you use the connect method. See also disconnect and is_connected.
So you can, use the connect method to connect the "body_entered" signal, like this:
func _ready() -> void:
connect("body_entered", self, "_on_Area_body_entered")
func _on_Area_body_entered(body:Node) -> void:
pass
This code is intended to work in a script attached to the Area itself. It is also possible to call connect from a Node to another. Please note that we are passing the name of the method we want to connect as parameter to the connect method, and thus it can be whatever you want.
The connect method has optional parameters to specify extra parameters, or if you want the connection to be deferred or oneshot.
To reiterate: simply adding a method won't work, you need to connect the signal to it. And there is no special name for the method, it can have any name you choose.
With that done, the method should execute when the RigidBody overlaps the Area.
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
On my site I have a number of Google Maps (v3) that you can select via a TabPanel (one per tab) but there is a problem when you switch tabs. When you select the tab it does not "wake up" the map. To fix this I simply need to use ResizeEvent.fire(source, Window.getClientWidth(), Window.getClientHight()); this will active the resize listener on the map and "wake it up." My problem is that I cant get a pointer to the registered resize handlers for the browser window (it is package protected in com.google.gwt.user.client.Window.handlers) therefore I don't know what to use as my source. If anyone has the answer to my solution or another possible solution it would be greatly appreciated.
Thanks, Tom
I am not sure if using resize is the best way of doing this (I haven't embedded a map before), but you could consider using a TabLayoutPanel instead of a TabPanel, and call panel.onResize() instead of firing the resize event. Note that you would need to use *LayoutPanels (or something that implements ProvidesResize) all the way to the root of the document, and your page would need to be rendered in standards mode.
Thanks for your reply but I figured out that these three lines:
HasLatLng center = mapWidget.getMap().getCenter();
Event.trigger(mapWidget.getMap(), "resize");
mapWidget.getMap().setCenter(center);
do the trick. This is basically what happens when the map loads initially. In the onLoad() method for MapWidget it makes a call to super.onLoad() then executes these three lines which "wakes up" the map and preserves the center point.
If you are using GWT-Maps-V3-Api, there is a triggerResize() function in the MapWidget class that does the trick.
New to GWT here...
I'm using the UIBinder approach to layout an app, somewhat in the style of the GWT Mail sample. The app starts with a DockLayoutPanel added to RootLayoutPanel within the onModuleLoad() method. The DockLayoutPanel has a static North and a static South, using a custom center widget defined like:
public class BigLayoutWidget extends ResizeComposite {
...
}
This custom widget is laid out using BigLayoutWidget.ui.xml, which in turn consists of a TabLayoutPanel (3 tabs), the first of which contains a SplitLayoutPanel divided into WEST (Shortcuts.ui.xml) and CENTER (Workpanel.ui.xml). Shortcuts, in turn, consists of a StackLayoutPanel with 3 stacks, each defined in its own ui.xml file.
I want click events within one of Shortcuts' individual stacks to change the contents of Workpanel, but so far I've only been able to manipulate widgets within the same class. Using the simplest case, I can't get a button click w/in Shortcuts to clear the contents of Workpanel or make WorkPanel non-visible.
A few questions...
Is ResizeComposite the right type of class to extend for this? I'm following the approach from the Mail example for TopPanel, MailList, etc, so maybe not?
How can I make these clicks manipulate the contents of panels in which they do NOT reside?
Are listeners no longer recommended for handling events? I thought I saw somewhere during compilation that ClickHandlers are used these days, and the click listener "subscription" approach is being deprecated (I'm mostly using #UiHandler annotations)
Is there an easy way to get a handle to specific elements in my app/page? (Applying the "ID" field in the UI.XML file generates a deprecation warning). I'm looking for something like a document.getElementById() that get me a handle to specific elements. If that exists, how do I set the handle/ID on the element, and how can I then call that element by name/id?
Note that I have the layout itself pretty well nailed; it's the interaction from one ui.xml modularized panel to the next that I can't quite get.
Thanks in advance.
If you don't have a use for resizing events than just use Composite
What you want is what the GWT devs called message bus (implemented as HandlerManager). You can get a nice explanation in the widely discussed (for example, on the GWT Google Group, just search for 'mvp') presentation by Ray Ryan from Google I/O 2009 which can be found here. Basically, you "broadcast" an event on that message bus and then a Widget listening for that event gets the message and does its stuff.
Yep, *Handlers are the current way of handling events - the usage is basically the same so migration shouldn't be a problem (docs). They changed it so that they could introduce custom fields in the future, without breaking existing code.
If you've set an id for any DOM element (for Widgets I use someWidget.getElement().setId(id), usually in combination with DOM.createUniqueId()) you can get it via GWT.get(String id). You'll get then a RootPanel which you'll have to cast to the right Widget class - as you can see it can get a little 'hackish' (what if you change the type of the Widget by that id? Exceptions, or worse), so I'd recommend sticking with MVP (see the first point) and communicating via the message bus. Remember however, that sometimes it's also good to aggregate - not everything has to be handled via the message bus :)
Bottom line is I'd recommend embracing MVP (and History) as soon as possible - it makes GWT development much easier and less messy :) (I know from experience, that with time the code starts to look like a nightmare, if you don't divide it into presentation, view, etc.)
I'm trying to modify Brian Reindel's Accessible News Slider plugin (sorry, it won't let me link to it and also to my work location), to allow a visitor to fill in multiple copies of a form, sliding back and forth between them. I need for the visitor to be able to add and delete copies of the form from the list. I've modified one of his examples and created a little function to add an element to the list. However, no matter how many times I call the function, it only adds one element, and the plugin is not aware of it; I can see it in the DOM Inspector, but that's it. What am I missing?
this is Brian. Since you're already using jQuery and the plugin, you would gain a great deal by using the library to append elements to the DOM within your custom function. I wanted to give you some guidance, since this is probably more work than you were inititally expecting. Here are some hopefully helpful tips:
The plugin calculates some wrapper
element widths based upon the number
of list items. If you add/remove list
items, then you would need to modify
the calculations that were made or
else it won't scroll properly. You'll probably experience the same types of issues for the click events on the next/previous buttons.
If you have events registered on
elements that you add/remove from the
DOM, then you will need to
re-register those events, since when
the elements are gone, so are the
events that were "bound" to them. It
doesn't look like this is your
problem though at this point.
If you're adding form elements to the
DOM on the fly using the "Add" link,
then the user's cursor focus is no
longer on the form elements, and the
slider is no longer really
accessible. As much as I love
plugging my own plugin, it was meant
mostly to demonstrate usable, custom styled accessible
JavaScript, and I'm not sure it is
flexible enough to do what you want
without some rework.
If you have more specific questions about how to do certain things to get you started on the right track, let me know, and I would be happy to help. Depending on how much you plan to use jQuery on your projects (and I highly recommend that you use it), try out the book Learning jQuery.