Calculating mouse position based on canvas bounding rectangle for emb…

[calrk]

…edded scenes

Description:
For this issue:
#2938
Not sure about the performance impacts, and whether this code should only execute for if scenes have the 'embedded' attribute

Changes proposed:

• Using sceneEl.canvas.getBoundingClientRect() to properly calculate the mouse position relative to the canvas

[ngokevin]

This will be a bit more involved, but I think we want to cache the bounds (e.g., in this.canvasBounds, and then on window resize event in a throttled handler (utils.throttle), we want recalculate those bounds.

[calrk]

Is this what you meant by using the throttledTick and window resize event together?

[ngokevin]

Close, I meant just utils.throttle the handler, not throttleTick. In case someone is dragging to resize the window, many resize events would fire.

[calrk]

I think this is what you mean, copying the style of 'throttledEmitComponentChanged' in component.js.
I made an example which I have also uploaded here to test it out by mousing over the central cube. The problem with using the throttle wrapper is that if the user does a lot of small quick drags, it won't update to the final result. Doing a single resize works fine though.

The Library drag component library that was being used has the same issue.
https://github.com/jesstelford/aframe-click-drag-component/blob/master/src/index.js#L132

[ngokevin]

OK, I see. We want to use debounce instead. We need to add a utility function for that. In utils/index.js next to throttle, we can add:

module.exports.debounce = function (func, wait, immediate) {
	var timeout;
	return function() {
		var context = this, args = arguments;
		var later = function() {
			timeout = null;
			if (!immediate) func.apply(context, args);
		};
		var callNow = immediate && !timeout;
		clearTimeout(timeout);
		timeout = setTimeout(later, wait);
		if (callNow) func.apply(context, args);
	};
};

And use utils.debounce instead. Thanks!

[calrk]

Ok I've added the debounce function in and it works better now.

[ngokevin]

Thanks!