Selection of multiple markers/areas by drawing a rectangle with the mouse

[carlosrusso]

It would be cool if we could select a bunch of markers by simply drawing a rectangle over them.

The implementation could go along the lines of http://stackoverflow.com/questions/14708880/rectangle-selection-of-svg-elements-for-raphael
and http://jsfiddle.net/Wrajf/348/

The cherry on top of the cake would be attaching some callbacks to the selection, signalling the selection has started, is still underway, or has finished.

[carlosrusso]

Humm, by inspecting the code it seems that the concept of multiple feature selection does not exist yet in jquery-mapael. Currently, clicking on a region/marker simply triggers an event.
The rectangular selection mode would require jquery-mapael to keep track of which features are selected.

[neveldo]

Hello carlosrusso,

You are right, Mapael doesn't handle a multiple selection feature. I think it's a great idea, feel free to contribute if you have time to add it to mapael !

[carlosrusso]

Do you have any thoughts on what's the best way to implement this?

[carlosrusso]

Hello Vincent,

I have a prototype implementation of a selection mechanism on https://github.com/carlosrusso/jQuery-Mapael/tree/feature-selection

Clicking on an item or drawing a box (you must start on an empty area) basically toggles a selection state, which is stored as a data attribute.
We would need to add two more style settings per item, corresponding to a selected item in its normal state and when the mouse is over it.

Please take a look. I'd like to discuss future work.

[neveldo]

Hello,

Thank for your work to build a selection mechanism over mapael. I will check it soon.

However, when I try to check the code updates on carlosrusso@eb6fdc0#diff-8ff6272a968b1eb5b5ca8302c0ed73bf , I get : "Showing 1 changed file with 1,628 additions and 1,467 deletions" . Maybe you have updated the indentation style or something like that ?

It should be great to see what have been updated/added in the code, maybe you could update the commit in order to have a clear diff, or list the major code updates here ?

[carlosrusso]

The major changes are the addition of the following blocks:

https://github.com/carlosrusso/jQuery-Mapael/blob/eb6fdc0dd92295367cf3a5ebcff7fed100fa7278/js/jquery.mapael.js#L49-L56 (ignore the line referring to window.paper)

https://github.com/carlosrusso/jQuery-Mapael/blob/eb6fdc0dd92295367cf3a5ebcff7fed100fa7278/js/jquery.mapael.js#L230-L304

[Indigo744]

@carlosrusso if you would like to work on this feature and submit a PR, it would be a really good addition for the upcoming 2.0 version!
==> Part of the TODO list (https://github.com/neveldo/jQuery-Mapael/wiki/TODO-list)

[carlosrusso]

I would love to, but I'm not sure I can commit to delivering the feature to a given deadline.

There's a deeper question associated with this feature: how to define the styles (set of attributes) associated with different states of the various elements. Currently there is only normal/hover, covered by the properties "attrs" and "attrsHover".
With the concept of selection, we would also have "selected", "unselected", which would amount to 4 combinations.

This suggests we should review the mechanism for defining state dependent styles.
I'm thinking about something along the lines:

attrs: {
  fill: 'red',
  stroke: 'white',
  "@normal": {
  "fill-opacity": 0.5
 },
  "@hover": {
    stroke: 'black'
  },
 "@unselected": { 
 },
 "@selected": {
   fill: "darkred",
   "@hover": {
     stroke: 'yellow'
   }
 }
}

The rules on "@selected", "@Unselected" woudl have precedence over "@hover", "@Normal"

[Indigo744]

You raise an important point indeed.
Correct me if I'm wrong, but I don't think we need selection attribute for each area.
I think we just need to define a new selectedAttr option that will override any attribute defined on the element. Usually, I think most users would simply defined a new stroke attribute to show that an element is selected. Hence, only the stroke will be overriden.
I was thinking of defining this behavior the same manners as the Zoom feature:

options = {
    map: {
        name: "",
        ...
        zoom: {...},
        selection: {
            enabled: true,              // if selection feature is enabled
            selectorAttr: {},           // the rectangle attribute
            ElemSelectedAttr: {},       // the attribute to override when element is selected
            canSelectType: {},          // the type of element that can be selected (plot or area)
            afterSelect: function(){}   // callback after selection is done
        },
    }
}

What do you think?

[carlosrusso]

What if the element is both selected and the mouse is over it? Which style will be applied? Or would you define a special algorithm?
We are assuming the user is sensible and will only change one attribute at a time...

Imagine you want a marker to be drawn as a circle in the normal state, but it should switch to a square when the mouse is over it, and when selected, the marker should be rendered using a star...

[Indigo744]

We should not overthink it. In my opinion, this can be left for the user to choose.
The selection attribute should always override the other ones. Then the user will choose a style that corresponds to what he wants.
For instance: on mouse over, I change the fill attribute. On selection, I change the stroke attribute.

[carlosrusso]

I'm just saying that there might be an overlap between the styles associated with "hover" and "selection", and that the current way things are being done does not seem handle that well.
I do recognize that for most use cases it is sensible enough.

[Indigo744]

I understand your point! But as a first draft, I suggest we keep the feature light and simple :)
My main concern actually is more on the selection implementation side. The link you found suggest to create an element that take all the background, and attach drag events to it.
This raises some issues:

1. You can select element only if you start dragging from an empty space of the map. If a user wants to select plots on a huge map, he will have hard times...
2. Adding a background element may become a problem with 'static' element drawn directly by the user on the paper.
   For me, the selection event(s) should be attach to the map container directly. It will require some additional processing to transform (x,y) mouse position to relative Raphael paper position.

[neveldo]

Hello,

First of all, thank you for thinking about this feature !

I suggest we keep the feature light and simple :)

I agree with Indigo744 on that point. I think it could be a great feature for mapael, but we should stay pragmatic in order to build a feature that matches 95% of the needs, and avoid to try to match the remaining 5% of the needs with a ton of additional lines of code.

I also thought about some other needs like being able to draw multiple selection rectangles in order to select several element in separate areas of the map. And being able to do ctrl+click on elements in order to unselect some of them. What about letting the users select only the plotted cities and not the areas in the background ?

The cherry on top of the cake would be attaching some callbacks to the selection, signalling the selection has started, is still underway, or has finished.

I think that it should be more than the cherry on top, but the core of the feature. Maybe I'm wrong, but I think that having a multiple selection feature without being able to do anything with the selected elements will be useless.

Another questions to answer : what would be the common use cases of such a feature ? Multiple plots / links deletion ? Being able to move plots or to change their state on the map ? Does this feature should be part of mapael core, or be provided as an extension ?

[qaiseri79]

Hey carlosrusso! . You explain very wel,l awesome dude. you are faboulus. i want to do the same task in jointjs .but How? .i don,t Know.Is You have any Suggestion.Kindly Tell me .waiting for your answer.