Introducing A New Web Component To Drag, Resize And Rotate
March 03, 2020 · 3 min read
A demo is worth a thousand words:
We really care about performance and dependencies. That’s why we tend to be a bit bundleophibic and, let’s face it, we are also nerds 🤷. Coding is as much a job as it is a hobby. That’s why we like to spend our evenings and weekends developing that kind of stuff.
A couple of months ago, when we were brainstorming new ideas, Nicolas suggested adding a new template which would let users draw technical schemas, directly in our editor. This concept implied two complexities: preserving the aspect ratio of the content of the slide across devices and being able to manipulate (drag, resize and rotate) its content. That’s why it took us some time to schedule and realize it.
While it may look easy to develop at first glance, during development we discovered that the required maths were actually more challenging than expected and therefore obviously even more fun 😉.
Nicolas published today a post in which he details the mathematical problems and solutions. Check it out on his blog.
The easiest way to try out our component is to use it, with the help of Unpkg, in a plain HTML file.
<html> <head> <script type="module" src="https://unpkg.com/@deckdeckgo/drag-resize-rotate@latest/dist/deckdeckgo-drag-resize-rotate/deckdeckgo-drag-resize-rotate.esm.js"></script> <script nomodule="" src="https://unpkg.com/@deckdeckgo/drag-resize-rotate@latest/dist/deckdeckgo-drag-resize-rotate/deckdeckgo-drag-resize-rotate.js"></script> </head> <body> </body> </html>
Once the imported, the component can be used to drag, resize or rotate any elements. For that purpose, it should be just wrapped around each of these which have to be manipulated. For example, let’s say we have a division element.
<div style="background: purple;"></div>
If we want to make it movable, draggable and resizable, we wrap it in our Web Component
<deckgo-drr/>, we specify its default size and position with CSS4 variables and … that’s it 🎉.
<deckgo-drr style="--width: 10%; --height: 19%; --top: 15%; --left: 12.5%;"> <div style="background: purple;"></div> </deckgo-drr>
All together tested in the browser looks like the following.
It is also worth noticing that it does support both mouse and touch interactions.
What’s coming next is actually up to you 😉. We are open source and are eager to hear your feedback. Ping us on our Slack channel, open an issue in our repo or even provide a Pull Request, you are most welcome to contribute to our pet project DeckDeckGo in any ways or simply by using it to compose your next slides 🙏.
To infinity and beyond 🚀!