Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CustomHandler best practices #4119

Closed
ToHold opened this issue May 16, 2024 · 2 comments
Closed

CustomHandler best practices #4119

ToHold opened this issue May 16, 2024 · 2 comments

Comments

@ToHold
Copy link
Contributor

ToHold commented May 16, 2024

Recently I wanted to add a delay before displaying the text of CooperativeGesturesHandler on smartphones, so I decided to create my own Handler that extends of CooperativeGesturesHandler :

import * as MapLibreGL from 'maplibre-gl';

class CooperativeGesturesHandler extends MapLibreGL.CooperativeGesturesHandler {
	private _touchmoveDelayer: boolean = false;
	private _touchmoveDelayerTiemout: number = null;

	constructor(map: MapLibreGL.Map, active: boolean) {
		super(map, active);
	}

	touchmove(e: TouchEvent) {
		if (e.touches.length !== 1) {
			this._touchmoveDelayer = true;
			clearTimeout(this._touchmoveDelayerTiemout);
			this._touchmoveDelayerTiemout = null;
		} else if (this._touchmoveDelayerTiemout == null && this._touchmoveDelayer){
			this._touchmoveDelayerTiemout = setTimeout(() => {
				this._touchmoveDelayer = false;
				this._touchmoveDelayerTiemout = null;
			}, 500);
		}

		this._onCooperativeGesture((!this._touchmoveDelayer) && e.touches.length === 1);
	}
}

export default CooperativeGesturesHandler;

But here comes the problem : when adding a new Handler this way :

const cooperativeGestures = new CooperativeGesturesHandler(map, true);
cooperativeGestures.enable();
map.cooperativeGestures = cooperativeGestures;
map.handlers._add("cooperativeGestures", cooperativeGestures );

I can't find a way to specify the order inside the HandlerManager._handlers array, I need to specify an order because handlers "touchPan", and "touchZoom" are blocking the "touchMove" event. I can add an allowed list to the "_add" method this way : map.handlers._add("cooperativeGestures", cooperativeGestures , ["touchPan", "touchZoom"]); but now because my custom handler is added at the end of HandlerManager._handlers "touchZoom" and "touchPan" are not blocked by my custom handler.

Well it works, but when it comes to edit other handlers it becomes harder, that's why I would love to have some advices, or the best practices to create my custom handlers.

By the way I would avoid to use HandlerManager._handlers or HandlerManager._handlersById, because in my mind prefixed by _ variables can be changed in new realeases, and I even don't know if it's a great idea to use map.handlers._add too.

Any advices would be appreciate :)

@ToHold
Copy link
Contributor Author

ToHold commented May 16, 2024

Is there also a way to specify a custom HandlerManager._addDefaultHandlers function ?

@HarelM
Copy link
Member

HarelM commented May 16, 2024

Most of the handler logic is internal, and too complicated if you ask me.
Some handlers are checking the state of other handler in some situations, I looked into it when fixing some bugs in the cooperative gesture handler.

Have you tried css' animation-delay?

@maplibre maplibre locked and limited conversation to collaborators May 18, 2024
@HarelM HarelM converted this issue into discussion #4136 May 18, 2024

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants