DEV Community

loading...
Cover image for Introducing A New Web Component To Drag, Resize And Rotate

Introducing A New Web Component To Drag, Resize And Rotate

David Dal Busco
Creator of DeckDeckGo | Organizer of the Ionic Zürich Meetup
Originally published at Medium Updated on ・3 min read

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

Discussion (14)

Collapse
brucou profile image
brucou

David, that is awesome. How big is the component (bundle-size)?

Collapse
daviddalbusco profile image
David Dal Busco Author • Edited

Thx for the positive feedback!

According bundlephobia.com the bundle size gzipped and minified is 198 bytes.

Update: When I fetch it through Unpkg has displayed in the blog post, it first loads 180 bytes and then asynchronously load 9kb for the component.

Collapse
brucou profile image
brucou

That's great work!

Thread Thread
daviddalbusco profile image
David Dal Busco Author

Thx!

Collapse
shubhramishrakota2310 profile image
shayla • Edited

Hi David, this is amazing. May I know how to add a library of different shapes and images to use with this component like the one in the demo?

Collapse
daviddalbusco profile image
David Dal Busco Author

Thank you Shayla. The component it self accept any elements passed as slot, therefore you can use any shapes or do you mean in our editor?

Collapse
shubhramishrakota2310 profile image
shayla • Edited

Great, just wanted to ask if we could add images and gifs as well.

Thread Thread
daviddalbusco profile image
David Dal Busco Author

Cool. Sure that works too.

Collapse
nataliedeweerd profile image
𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝

This looks really cool!

Collapse
daviddalbusco profile image
David Dal Busco Author

Thank you Natalie, happy to hear it 😃

Collapse
timrodz profile image
Juan Alejandro Morais

Awesome work as always, David! Looking forward to trying these out soon.

Collapse
daviddalbusco profile image
David Dal Busco Author

Thank you Juan!!!

And congratulations for reaching 5k posts views on DEV 💪

Collapse
codefoxx profile image
codefoxx

This doesn't work properly on my machine. When I drag the square up or down it moves the square all the way down or up the screen. Also when I try to to resize the square it disappears .

Collapse
daviddalbusco profile image
David Dal Busco Author

It sounds like some CSS styles are missing, notably on the container. Checkout the example in your documentation.

If still does not work, you are most welcomed to provide a sample repo.