Hi, first off, apologies for continual issues with saving images. But best way to get both feet wet with D3 and Observable is to jump into the deep end, no?
Now to the real Q:
I’ve made my SVG Image (and text) draggable. However, after dragging the elements around, and hitting save, it doesn’t look like what I expected:
However, when I hit the scale nob, and then hit save… boom! It works!
Clearly, I’m doing something wrong… just have no idea what (story of my life on Observable, I guess).
The problem here is that Observable doesn’t know the cell asset is changing when you drag, and the download button is computing the rasterized asset greedily whenever Observable notices the asset cell changes.
Here are two possible fixes.
You could tell Observable that the cell asset is changing when you drag by making it a generator cell, say by using Generators.observe. This way rasterize(asset) always refers to the latest asset, and you can see the left border of both the asset cell and the download button cell update as you drag. Here’s a suggestion for that approach:
Or, you could rasterize lazily, such that rather than capturing the contents of the asset cell when rending the download buttons, you rasterize only when the button is clicked. Here’s what that looks like:
Feel free to merge if you like one of these approaches!
