Beginner cannot get speed to understand the fin-hypergrid API

[lancelab]

Dear Community.

I don't see the forum for for fin-hypergrid, so please excuse me if this is a wrong place for the question.
(I put this question on stackoverflow.com but it gets no answer.
https://stackoverflow.com/questions/48586239/how-to-cooperate-with-fin-hypergrid-api-events
)

The question is: What is the "legal" or fin-hypergrid way to work with events?

If one creates event handler for own manipulation with the grid (for example own way to move the columns), must be API events fin-mousedown, fin-mousemove used or DOM native events to be introduced? Introducing DOM-events seems "illegal" because this will interfere with
existing API handlers. For example, if selection feature must be suppressed how to do this from either fin-mousedown/fin-mousemove or any other way.

In the DOM, there are two ways for limited cooperation with "sibling" event-handlers: stopPropagation() and stopImmediatePropagation(). But I cannot find the similar methods in thegithub.com/openfin/fin-hypergrid` API.

In particular, what is the Hypergrid way to add mousedown custom event for drag and drop? Is this a right way:

grid.addEventListener( 'fin-my-fancy-named-custom-event', function( ... ?
Or this name won't work?

If so, how to make this event to do own work and to suppress other handlers like cell selection or other already preset API-mouse-events?

There seems no related entry in the API docs.

I know, there is already column-drag-and-drop implemented in the application, but I am tasked at the work to assess how quickly and conveniently the API can be incorporated.

Thank you.
Konstantin.

[joneit]

Hello Konstantin,

First of all, let's make sure you are aware that there is only one HTML element, a <canvas> element (accessible as myGrid.canvas.canvas).

Although you could in theory listen for DOM events on that element, the fin- events (which already do this) decorate the event object with useful information, such as the coordinates of the cell under the mouse.

Regarding stop propagation.... there is no propagation as there is only one element. If you mean stop propagation up the DOM tree from the <canvas> element, you can usually do that by calling event.detail.primitiveEvent.stopPropagation() form within a listener.

If you mean propagating from event listener to the "next" event listener, that isn't a thing as far as I'm aware. Event listeners for the same event on the same object are all triggered together. (By "together" I don't mean simultaneously, of course. Most modern browsers fire them in the order in which the listeners were attached per DOM3 spec but there may be exceptions and I would not depend on it.)

For custom events, you could handle however you like. They would of course need to be triggered (dispatched) from somewhere. Assuming you are talking about UI here, they would typically be triggered from DOM event listeners.

Regarding drag and drop, we don't re-fire those events. (Perhaps you would be interested in adding those to Canvas.js and submitting a pull request?)

Regarding stopping fin event default actions, what you are talking about is something like preventDefault (not stopPropagation) which is not implemented. (Perhaps you would be interested in submitting a PR for that?)

[lancelab]

Joneit,

thank you for detailed response and for your work on this nice application.

Put things simple, I was tasked to make a POC "plugin" where user takes pieces of a grid and
rearranges them in 3D scene by mouse drag.

The problem was: when click happens, then API highlights the column or may does something else which is undesirable.

The allocated task time was short and I was not able to comprehend docs enough,
so solution went rather weird path:

I put canvas in a wrap, attached 2 mouse events to DOM
and reused "fin-mousedown".

grid.addEventListener( 'fin-mousedown', finMouseDown );
hypergridWrap.addEventListener( 'mousemove', mouseMove );
document.body.addEventListener( 'mouseup', mouseUp )

You are probably right, there is no way even in DOM to cooperate with sibling-events
So the hardest part is still to learn the hypergrid API.

Demo (left button drag by column header)
http://landkey.net/z/bids/hypergrid/

"plugin" code:
https://github.com/lancelab/core/blob/master/demo/drag-23-from-local-data.html

Lancelab.

[joneit]

Hmmm thx interesting demo.
Regarding cell selection, you can suppress by setting one of:

grid.properties.cellSelection = false;
column.properties.cellSelection = false;
cell.properties.cellSelection = false;

You can also remove CellSelection from the feature chain.

[lancelab]

Thank you.