ROTATED COMPONENT

Browsers aren’t designed to support a drag & drop interface. That is why the challenge of manipulating a rotated element’s size and position is not simple. The browser rotates elements around their center, which causes side effects when resizing.

An Example can be to rotate an element by 45 degrees, and increase the width of one of its sides. Since changing its width will cause the center to move in the same direction by half the width’s delta, the center will shift both upwards and sideways (in the case of 45 degrees rotation), resulting in the element unintentionally changing it’s position.

The solution required compensations for each change of size, by projecting mouse movements on the rotated axis, and isolating the desired changes, while contradicting the side effects.

 

 

When I developed this feature, I had to solve another challenge that no longer exists today - at the time Internet Explorer 8 was still a widely used browser so I needed the rotation to work there too. The problem was this browser didn’t support inherent angle property in css. To rotate an element, I used linear algebra and matrices multiplication. I also had to use matrices for resizing and positioning once an element was rotated.

 

The result is an easy to use drag & drop interface, including angle control, supported across browsers.

 

© 2015 by Guy Romm. Proudly created with Wix.com