Introducing A New Web Component To Drag, Resize And Rotate

March 03, 2020

#webdev #showdev #javascript #opensource

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.

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

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

David

Blog

Read the article

Test Angular Components and Services With HTTP Mocks

April 1st 2020

#angular #testing #javascript #webdev

Read the article

Add A Slider To You Angular App

March 31st 2020

#angular #webdev #javascript #showdev

Read the article

Create A Modal For Your Angular App Without Libs

March 30th 2020

#angular #webdev #javascript #css

More articles

Address

Fluster GmbH c/o The Hub Zürich Association Sihlquai 131 8005 Zürich

On the web

I have developed this website. Its open source code is available on Github