tbfleming/jscut

Make lines easier to click

Opened this issue · 3 comments

When a shape doesn't have a fill and the line doesn't have a thicker width it's currently hard to select shapes.
Could we find a way to alter the line width so that shapes are easier to click?
Maybe this can be done with css? The following css would give all path, circle, rect etc elements a bigger stroke, when one hovers over them.

svg circle:hover, svg path:hover, svg rect:hover {
  stroke-width: 3px;
  stroke: #2A6496;
}

That might be alarming. A color change would be better perhaps?

IMHO Makercam does this nicely -- you can drag a selection rectangle and anything it intersects gets selected. That's probably a lot tougher to implement?

I figured out that I was wrong, in that the line would have to be thicker by default. But it would be great if we could do that invisibly (to not alter the drawing itself to much). Maybe using something like a transparent css glow.

@tiger12506, I like the selection rectangle, that could work in combination. One problem with a rectangle is that it's hard to select one shape between multiple overlapping shapes.

@peteruithoven - it does make it hard if you have to encompass the whole shape. However, I reference Makercam because they choose to select a shape if the rectangle intersects with the shape's outline, which is much easier to use for intricate details. Anyways, I'm not familiar with the code base, so I don't know if it's even feasible. All I know is that in #37 tbfleming says that he uses browser's built-in hit-testing.