Introducing A New Web Component To Drag, Resize And Rotate

Add drag, drop and resize capabilities to any web apps.

Image for post
Image for post

Today we are happy to unleash a new open source Web Component that we developed for our web editor for presentations, DeckDeckGo. With it you can add drag, resize and rotate features to your applications or websites, regardless of your web framework. Cherry on the cake: it works out of the box — no extra JavaScript needed.

A demo is worth a thousand words:

Back Story

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.

Getting Started

The easiest way to try out our component is to use it, with the help of Unpkg, in a plain HTML file.

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.

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 🎉.

All together tested in the browser looks like the following.

Options

The cool thing about this component, I think, is that you don’t have to write any JavaScript to use it. You wrap it around any element and “it works”. It provides a couple of options, which are all documented in the related chapter of our documentation for developers. It notably supports various units (percent, viewport related or pixels) and each action can be disabled separately. Its design can be customized with various CSS4 variables and finally it bubbles two events, one when the component is selected or unselected and another one when it has changed.

It is also worth noticing that it does support both mouse and touch interactions.

What’s Next

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 infinite and beyond 🚀!

David

Written by

Freelancer by day | Creator of DeckDeckGo by night | Organizer of the Ionic and IndieHackers Zürich Meetup

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store