Simple marching ants with clean SCSS styling #266
Conversation
|
Would you be able to add a little gif/video of the effect to the PR description please? |
|
Just added it to the description. |
There was a problem hiding this comment.
This is pretty great, thanks @simonbethke.
A few things:
- the brush tool outline is broken (I can't see why from a quick look at your changes)
- I'm not sure about the 2px line width... that combined with the animating ants looks a bit ... loud to me. I can be persuaded though, will chat with @willeastcott tomorrow.
| @@ -16,9 +16,6 @@ class BrushSelection { | |||
| const circle = document.createElementNS(svg.namespaceURI, 'circle') as SVGCircleElement; | |||
| circle.setAttribute('r', radius.toString()); | |||
| circle.setAttribute('fill', 'rgba(255, 102, 0, 0.2)'); | |||
| circle.setAttribute('stroke', '#f60'); | |||
There was a problem hiding this comment.
I think you meant to remove the previous line too
|
Hm, the brush outline isn't broken. I am just not used to moving single atoms one by one, so I changed it to something that appears correct to me. The 2px width is just a poor try to raise the visibility. What would actually be needed is to fill the gaps in the dashed line with something darker. But with svg this is only possible by duplicating the entire polyline |
|
I have changed the 2px width of the lines to 1px and also reverted the brush-outline to dashed again. |
|
Do you have any auto-formatting setup that I can use in vscode? I keep seeing reformattings :) |
I implemented simple marching ants without introducing complexity.
marching-ants2.mp4