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.
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 ]
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 ]
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 ]
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!) ]
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:
dragAction
to your model.
DragAction
type that consists of things
like DragResize
and DragMove
. We'll just worry about DragMove
for now.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.
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!