[034.5] Elm Weekly Drip #34 and Exercise: Moving Shapes

Adding a move operation to our SVG editor, and reviewing what's been going on around the community.

Subscribe now

Elm Weekly Drip #34 and Exercise: Moving Shapes [01.19.2017]

This week we built the beginnings of an SVG editor. So far, you can add shapes to the canvas and select them. For today's exercise, you'll add the ability to drag shapes around the canvas. First, though, let's see what's been happening in the community.

State of Elm 2017

A survey of the Elm development landscape.

Brian Hicks is running his second annual survey of Elm developers. Make sure to get your responses in and help make this year bigger than last year.

[ h/t @brianhicks ]

ktonon/elm-serverless

Deploy an Elm worker to AWS Lambda using serverless

I've been following this since I learned about it a little over a week ago. It's a package to help you write AWS Lambda functions using Elm. I'm a fan of anything that helps Elm expand its scope, and this definitely qualifies!

Here's an example of using it.

[ h/t @nobigb ]

abrykajlo/elm-scroll

An Elm Library for scrolling through a page

This is a package to make it easy for you to respond to scroll updates sent to you through a port. You might use this to shrink a header when scrolling down a page, or trigger animations at a particular point.

[ h/t @adambrykajlo ]

The why and when of choosing Elm (visual edition)

Ossi Hanhinen produced some graphical slides explaining why and when to use Elm. There's a text version as well.

Useful if you're trying to convince someone it's a good fit, or decide for yourself.

[ h/t @ohanhi ]

Pairing on HexView

I paired with Michal Muskala to integrate his Elm frontend with his API for an Elixir package code viewer.

[ h/t @knewter (that's me!) ]

Exercise

This week we're adding the ability to use drag and drop to move shapes around in our SVG editor. In the next drip I'll show how I solve it, but until then a few hints:

  • Add the concept of a dragAction to your model.
    • This way you can ultimately have a DragAction type that consists of things like DragResize and DragMove. We'll just worry about DragMove for now.
  • Add a comparedShape to your model so you have a source shape to compare to. This way you can use the shape's x and y to determine how far you've come.
    • It probably also makes sense to track the SvgPosition of the mouse at the time that the drag started, because that's what really matters for dragging. The comparedShape is nice when handling resizes, which we'll deal with later, so it might be worth looking at adding it ahead of time.

That's it for today. See you soon!