Enhance perimeter selection in SHOP for better User Experience
In easySDI workshop in February 2013, we designed the desired SHOP perimeter definition UX.
Everything has not been implemented yet, this enhancement is proposed to complete the shop behavior as initially designed.
- Allow free perimeter modification after drawing
- Add informations about selected perimeter (WFS)
- Avoid loosing selected perimeters by re-implementing v2 logic for WFS
- Have an 'implicit' pan policy and remove pan button
Allow free perimeter modification after drawing¶
In V2 we had the ability to edit a free perimeter once it has been drawn. But it was implemented as a specific control.
In 2013 workshop, we proposed 'combined tools' that 'onClick' go for new drawing, and once the drawing is done the feature becomes editable (the button returns to normal state/deselected).
To start again and clear the drawn perimeter, user has to select the tool again.
Here is how it should work:
Rectangle / Box tool¶
See this logic in action HERE (in the mini map, use rectangle for example)
When clicking on the rectangle tool, we enter in 'draw mode'. Then we 'drag and draw the rectangle'.
When the click is released, and the rectangle created, we automatically toggle in 'edit mode'.
(The button is now is normal state, not activated, but the feature is editable)
In edit mode, the rectangle has:
- 4 edit handles in corners
- 4 edit handles in sides
- 1 rotate handle on the bottom right corner. Shifted outside of the rectangle.
The rectangle can also be dragged (moved) by clicking it's inside surface:
Avoid '1 pixel rectangle'¶
There is a problem with the actual rectangle tool: it is possible to accidentally draw a '1x1 px' by clicking the map without moving the mouse, caused by:
- Human hand failure : clicked accidentally
- Misinterpretation : the user wants to draw a rectangle with 2 clicks (without dragging)
As the rectangle tool will offer edit capabilities, we propose to add the following feature to avoid 'pixel sized' rectangles:
- If the drawn rectangle is smaller than <min_surface_to_be_defined_in_shop_backend> then draw a square.
- The square is centered on the tiny 'failed' rectangle, and it's sides length is defined in backed.
- This DOES NOT force a minimum size ! If the user really wants a small rectangle, he can resize it. This behavior is active in 'draw mode' not in 'edit mode'.
The polygon tool features the same logic:
On first click we enter in 'draw mode', then draw the polygon point by point (the button is active).
The polygon is closed on double-click. After completion, we pass in edit mode automatically (the polygon button is now back to normal state).
Here is how it goes:
Click on polygon tool, and start adding points (same as in today's v4):
Double click to close:
The polygon now goes into edit mode:
- Handles on every vertice than can be moved:
- Handle on every line center to add a vertice by dragging:
Note: the polygon cannot be moved (dragged) nor rotated.
Keep the free perimeter editable !¶
The free perimeter has to be editable (rectangle and polygon) even if:
- The user has saved the perimeter, and the re-opens the popup
- The user has saved the perimeter and left the basket (browse the rest of the site, and come back later to the basket)
- The user has made a copy of the order
- The user has saved the order as draft and reuses it
Thant means that we need to save the tool used for free perimeter (polygon or rectangle) in session (current basket), and database (copy or draft) !
Add informations about selected perimeter (WFS)¶
In V2 we had instant view on how many WFS items we have selected, and this is important for users ordering tons of parcels.
We propose to add it in a discrete way in the interface: a bootstrap appended counter with a tooltip.
The counter will be visible only when the tool is selected.
When the tool is selected, the counter appears with a 0 value, and the increments with selections.
A tool tip indicates the selected values.
See here: and on hover with tooltip
Avoid loosing selected perimeters by re-implementing v2 logic for WFS¶
Multiple WFS perimeters selection has been implemented in easySDI V4 with a CTRL+Clic logic.
Problem is: if you miss or forget your CTRL key, you loose your selection. The problem is more likely to happen if you have set a selection and the re-open the popup to select more features.
In V2 the implementation was different: click to add, then click to remove. This logic is less risky, you can lose one selected feature at a time max.
Plus: it's easier to understand by users.
We propose to re-implement it this way in V4.
Same as for free perimeter, a user should be able to edit the perimeter of a saved or copied order (may be working is v4, I have not tested it)
Have an 'implicit' pan policy and remove pan button.¶
Pan should not be a button, but should be always working if possible.
On first popup opening, there is no tool selected. And pan is active (but not visible as a button).
When the user selects a tool, pan should still be active (except for rectangle/box as it's a drag and draw control).