OpenLayers OpenLayers

Ticket #1484 (new feature)

Opened 8 months ago

Last modified 6 days ago

better cursor support for controls

Reported by: bartvde Assigned to:
Priority: minor Milestone: 2.8 Release
Component: Control Version: 2.7
Keywords: Cc:
State: Review

Description

I want to start working on better cursor support for OL controls. Currently a lot of the cursors are hard-coded in javascript, without any way to override them.

I am doubting a bit between having control API properties, or doing this completely with css classes. I tend to be in favour of the API properties, since if we autogenerate css class names (ofcourse we could also work out something similar to displayClass, e.g. cursorClass), we will run into trouble with e.g. the ZoomBox Control, for which people will want a different cursor if out=true. With API Properties they will be able to do that.

When the tool is activated, the cursor on the map should be cursor X. But also in some cases people want the cursor to change on mouse down to cursor Y, for instance the pan hand in Google maps changes to a move cursor on mouse down. Also APIProperties will make it easier since we don't need a removeClass and addClass method for adding/removing css classes to the map div.

Initial proposal for APIProperties: -cursor -mousedownCursor

which would be set on the map div (this.map.div.style.cursor).

Thoughts welcome before I start my implementation. Especially with the decision to use css classes or to use API Properties for the cursor. TIA.

Attachments

ticket1484.patch (11.8 kB) - added by bartvde on 04/23/08 06:52:19.
preliminary patch to give an idea about the approach
cursors_revisited.patch (21.5 kB) - added by bartvde on 11/11/08 07:57:27.
New patch using addClass and removeClass

Change History

04/22/08 08:42:08 changed by bartvde

Okay, work in progress in my sandbox called cursor:

http://dev.openlayers.org/sandbox/bartvde/cursor/examples/cursor.html

04/23/08 06:52:19 changed by bartvde

  • attachment ticket1484.patch added.

preliminary patch to give an idea about the approach

06/06/08 08:07:42 changed by bartvde

There is a conflict between this approach and the OpenLayers.Control.Button items of NavigationHistory. Everytime an activate is called on those buttons, which sets the cursor back to default.

(follow-up: ↓ 4 ) 06/06/08 16:50:27 changed by tschaub

I think I mentioned this approach elsewhere (can't remember if there was discussion on it), but I would suggest adding and removing a class name from the map div instead of setting the cursor property directly. My felling is that if we are setting style properties directly in the code, we're going to be limiting what can be accomplished.

If the map div is given an additional class name temporarily, we can have style declarations that determine the cursor property. Then when this class name is removed, whatever custom cursor the application designer might have set in the first place is restored.

With this approach (as far as I can tell from the patch), if someone sets a cursor in their own stylesheet, it is lost.

For methods to add and remove class names, see (http://trac.openlayers.org/browser/sandbox/topp/almanac/lib/OpenLayers/BaseTypes/Element.js#L126 this). I'll make a patch for that.

(in reply to: ↑ 3 ; follow-up: ↓ 5 ) 07/02/08 04:27:04 changed by euzuro

Replying to tschaub:

I think I mentioned this approach elsewhere (can't remember if there was discussion on it), but I would suggest adding and removing a class name from the map div instead of setting the cursor property directly. My felling is that if we are setting style properties directly in the code, we're going to be limiting what can be accomplished. If the map div is given an additional class name temporarily, we can have style declarations that determine the cursor property. Then when this class name is removed, whatever custom cursor the application designer might have set in the first place is restored. With this approach (as far as I can tell from the patch), if someone sets a cursor in their own stylesheet, it is lost. For methods to add and remove class names, see (http://trac.openlayers.org/browser/sandbox/topp/almanac/lib/OpenLayers/BaseTypes/Element.js#L126 this). I'll make a patch for that.

.... i believe you mentioned it here: #688

(in reply to: ↑ 4 ) 07/02/08 04:34:59 changed by tschaub

Replying to euzuro:

Replying to tschaub:

I think I mentioned this approach elsewhere (can't remember if there was discussion on it), but I would suggest adding and removing a class name from the map div instead of setting the cursor property directly. My felling is that if we are setting style properties directly in the code, we're going to be limiting what can be accomplished. If the map div is given an additional class name temporarily, we can have style declarations that determine the cursor property. Then when this class name is removed, whatever custom cursor the application designer might have set in the first place is restored. With this approach (as far as I can tell from the patch), if someone sets a cursor in their own stylesheet, it is lost. For methods to add and remove class names, see (http://trac.openlayers.org/browser/sandbox/topp/almanac/lib/OpenLayers/BaseTypes/Element.js#L126 this). I'll make a patch for that.

.... i believe you mentioned it here: #688

Thanks for the reminder. Check #1607 for css class name management functions.

07/28/08 11:40:45 changed by crschmidt

#1607 is going to go in this week as part of a sprint at MetaCarta. Once that is done, this ticket should be refactored to use that. Bart, if you update this (or someone else does) this can go into 2.7, but we don't plan to work specifically on this and it's not a blocker for 2.7.

08/26/08 03:53:44 changed by euzuro

  • milestone changed from 2.7 Release to 2.8 Release.

Lack of activity.

11/11/08 07:51:59 changed by bartvde

  • state set to Review.
  • version changed from 2.6 RC1 to 2.7.

Okay I've finally gotten the chance to rewrite this stuff, and am left with a few questions:

1) if a control has multiple handlers, like the dragFeature control, is it okay to pass the handlerOptions of the control to both handlers? Or is it necessary for the handlerOptions to have a hash per handler? 2) I haven't really taken an effort to mimic the current OpenLayers cursors used. Do people feel strongly about keeping cursors as they are, e.g. crosshair on box etc.? If so, I can make the effort the restore all the previous cursors. 3) I have adapted the DragFeature test, but would appreciate somebody more knowledgeable of the DragFeature control to have a look to determine if I did not break anything. All I could see is that cursor should change to move when over the feature.

The sandbox is still the same, bartvde/cursor, and the last patch is derived from there.

Please review.

TIA.

11/11/08 07:57:27 changed by bartvde

  • attachment cursors_revisited.patch added.

New patch using addClass and removeClass

11/27/08 10:14:56 changed by avlee

Using CSS to apply cursors is a good way.