react-layout: Hooking to events in the AJAX viewer (OnSelectionChanged)

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
15 messages Options
Reply | Threaded
Open this post in threaded view
|

react-layout: Hooking to events in the AJAX viewer (OnSelectionChanged)

Matze
Hi,
is there a way in react-layout (v0.8 Ajax Viewer) to rebuild the OnSelectionChanged/onMapClick workaround  like in the normal MapGuide Ajax Viewer?

Thank you in advanced.




Reply | Threaded
Open this post in threaded view
|

Re: react-layout: Hooking to events in the AJAX viewer (OnSelectionChanged)

Jackie Ng
There is no current hook to the outside (of react.js) world for map selection changes.

It should be trivial for me to add such a hook as a mount() call option if that is what you're after.

- Jackie
Reply | Threaded
Open this post in threaded view
|

Re: react-layout: Hooking to events in the AJAX viewer (OnSelectionChanged)

Matze
If it is possible, yes.

For what I need this:

As soon as the user touches/clicks on the map and occurs a change/creation of a selection, the user will get a custum property info in the taskpane with more properties than in the mapguide propertypane.

For this, I just need an event that the selection has changed. If the event is fired, i will do some Ajax request by using the sessionId and selectionXML to get the unique primary keys. Then I can do some database queries and return the result to fillin the taskpane.

This will be also usefull for the other layouts like sidebar.html
Reply | Threaded
Open this post in threaded view
|

Re: react-layout: Hooking to events in the AJAX viewer (OnSelectionChanged)

Jackie Ng
I thought about this some more.

Since your aim is to ultimately be showing some kind of URL the task pane (or new window, or frame) in response to a selection, and my aim is for this viewer to be as much configuration-driven as it possibly can be (I want custom coding to be a last resort solution where possible), I think the easiest solution would be to add some kind of mount property that allows certain InvokeURL commands to be automatically run on a selection change.

InvokeURL commands already have layer/selection filters and parameter support. The only thing is such commands require manually clicking said command from a referencing menu or toolbar after a selection has been made.

To put this another way, can you achieve what you're after currently with a manually clicked InvokeURL command?

If so, I can easily make the manual part automatic.

- Jackie
Reply | Threaded
Open this post in threaded view
|

Re: react-layout: Hooking to events in the AJAX viewer (OnSelectionChanged)

Matze
In former times I did the invokeURL as you mentioned. Click/select a feature, press a button with the invokeURL and the result ended up in the taskpane.
In this little example (sorry, it's in german), you can see a workaround with the normal Ajax Viewer. The user clicks on a feature in the map and than the result will show up in a separate tab in the taskpane, without reload the whole taskpane.

For that, it would be nice to configure the mount function with invokeURL and/or a custum handler/script.
Reply | Threaded
Open this post in threaded view
|

Re: react-layout: Hooking to events in the AJAX viewer (OnSelectionChanged)

Jackie Ng
Thanks for the link, it makes it more clear what you're trying to achieve.

I think the easiest thing is for me to add a new viewer API to register a handler for selection changes. It will be at the same level as other AJAX viewer APIs, so you can get to it from the task pane content through parent.parent

So your task pane content just needs a script block that is basically

window.onload = function() {
    parent.parent.RegisterSelectionChangeHandler(function(selection) {
        //Selection changed, update your task pane content here
    });
};

The key is that you can do this from "inside" the viewer from the task pane content, and not invasively from "outside" the viewer through a mount parameter or custom pre-mounting code.

How does this sound?

- Jackie
Reply | Threaded
Open this post in threaded view
|

Re: react-layout: Hooking to events in the AJAX viewer (OnSelectionChanged)

Matze
That sound's great.
I think, this is a good solution.

Thank you in advanced.

Matze
Reply | Threaded
Open this post in threaded view
|

Re: react-layout: Hooking to events in the AJAX viewer (OnSelectionChanged)

Jackie Ng
I've made an issue to track this: https://github.com/jumpinjackie/mapguide-react-layout/issues/144

- Jackie
Reply | Threaded
Open this post in threaded view
|

Re: react-layout: Hooking to events in the AJAX viewer (OnSelectionChanged)

svlad
In reply to this post by Jackie Ng
Hi, we use nearly all fusion events (MAP_LOADED, MAP_SELECTION_ON, MAP_SELECTION_OFF etc.) from outside (the fusion viewer is in an iframe). Will this be possible with the new react-layout?
Thank you, svlad
Reply | Threaded
Open this post in threaded view
|

Re: react-layout: Hooking to events in the AJAX viewer (OnSelectionChanged)

Jackie Ng
You raise an interesting point about how our viewer offerings are being used.

Namely, I wasn't expecting embedding the viewer in a frame/iframe to feature prominently as a common use case. The viewer API design thus far has been going on the assumption that the react viewer is either the top-level element or a sibling of top-level content.

So my current answer is: No not possible, but this is clearly something that will need to be supported in some form so that migrating from Fusion is not too painful.

- Jackie
Reply | Threaded
Open this post in threaded view
|

Re: react-layout: Hooking to events in the AJAX viewer (OnSelectionChanged)

Jackie Ng
In reply to this post by Matze
I've just landed support so that task pane content can install/uninstall selection change event handlers.

If you want to try this out right now (instead of waiting for me to release 0.9), grab the latest viewer.zip from the AppVeyor artifacts page:

https://ci.appveyor.com/project/jumpinjackie/mapguide-react-layout/build/artifacts

In there, there is a new examples/taskpane/viewerapi.html file that demonstrates how to access the new enhanced viewer APIs from task pane content and an example of how to register/unregister selection change event handlers. The example selection handler converts whatever selection object it receives to selection XML.

- Jackie
Reply | Threaded
Open this post in threaded view
|

Re: react-layout: Hooking to events in the AJAX viewer (OnSelectionChanged)

svlad
Hi, I placed this viewer in an iframe named "mapframe" and it works!

var myviewer = mapframe.GetViewerInterface();
and
mapframe.RegisterSelectionHandler(mySelectionHandler);

That's what I wanted!

Can I declare other handlers (MapLoaded etc.) without modify the viewer sources?

Thanks, svlad
Reply | Threaded
Open this post in threaded view
|

Re: react-layout: Hooking to events in the AJAX viewer (OnSelectionChanged)

Jackie Ng
I've yet to implement a more generic event handler that covers most/all of the Fusion events. This is the logged issue.

https://github.com/jumpinjackie/mapguide-react-layout/issues/145

- Jackie
Reply | Threaded
Open this post in threaded view
|

Re: react-layout: Hooking to events in the AJAX viewer (OnSelectionChanged)

Jackie Ng
In reply to this post by svlad
Also take care that any selection handlers you register be unregistered (either manually or on page unload) as well to prevent "dangling" event handlers if you load other task pane content in from running another command.

The samples page demonstrates this.

- Jackie
Reply | Threaded
Open this post in threaded view
|

Re: react-layout: Hooking to events in the AJAX viewer (OnSelectionChanged)

Jackie Ng
In reply to this post by svlad
With the 0.9 release, as part of refactoring to allow mapguide-react-layout to reuse the existing Fusion backend, I had to implement polyfills for Fusion APIs that the query/theme/redline/featureinfo/selectwithin/buffer/search widgets use.

Which also meant I had to polyfill support for some Fusion events as well.

As of the 0.9 release, that Fusion events supported by mapguide-react-layout are:

 - Fusion.Event.MAP_SELECTION_ON
 - Fusion.Event.MAP_SELECTION_OFF
 - Fusion.Event.MAP_ACTIVE_LAYER_CHANGED
 - Fusion.Event.MAP_BUSY_CHANGED

And the Fusion/<Widget> registerForEvent/deregisterForEvent APIs are available to subscribe/unsubscribe from these events as well.

The current list of supported AJAX Viewer/Fusion APIs can be found here:

https://jumpinjackie.github.io/mapguide-react-layout/apicompat.html

- Jackie