DRR rotation miscalculated on first click

[ble]

Affected part of DeckDeckGo

• Web Components (DRR)

Reproduction

Steps to reproduce:

1. Visit https://docs.deckdeckgo.com/components/drr/
2. Resize element to have large width, small height:
3. Rotate element so that the rotation handle is nearly 90 or 270 degrees from horizontal:
   
4. Click the rotation handle and attempt to rotate it a short distance (by dragging the handle a short distance)
5. Observe a large jump in rotation:
   

Expected Behavior

The element should rotate a small amount, continuously with the motion of the mouse.

Actual Behavior

On the first rotation, the element's rotation angle jumps significantly.

Environment

• Browser(s): Chrome Canary - Version 82.0.4069.0 (Official Build) canary (64-bit)
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

[ble]

I believe that these two lines are the issue:

deckdeckgo/webcomponents/drag-resize-rotate/src/components/deckdeckgo-drr.tsx

Lines 217 to 218 in 267b16d

	this.centerX = this.el.getBoundingClientRect().left + this.el.offsetWidth / 2;
	this.centerY = this.el.getBoundingClientRect().top + this.el.offsetHeight / 2;

At least in this browser, Element.offsetWidth and Element.offsetHeight do not appear to account for the rotation of the element.

[ble]

I was able to test a fix for this issue by setting a breakpoint in the above code (after prettifying it in the Web Inspector) and then, when paused at that breakpoint, running:

this.__proto__.initStartPositionsRotation = function() {
  let rect = this.el.getBoundingClientRect();
  this.centerX = rect.left + rect.width / 2;
  this.centerY = rect.top + rect.height / 2;
 
}

after which the (monkeypatched) DRR no longer exhibited any signs of jumping on first rotation.

[peterpeterparker]

@ble sweet! let me try quickly

[peterpeterparker]

Yes @ble absolutely that solve the issue!!! I tested both the component in standalone mode and integrate locally in the documentation, it works like a charm.

Would you like to provide a PR?

[ble]

yeah, let me see if i can remember how to do it :)))

[peterpeterparker]

awesome

[ble]

#656 hmm, maybe this will auto-associate them?

[peterpeterparker]

a new version of component is published in npm, docs and remote are updated and have been deployed (might need a good browser refresh) 🎉

in the editor, fix will be unleashed in next major release

really awesome! thx again @ble