Refactor image border drawing (css border is affected by image transparency)

[jywarren]

so we can't use opacity to make images outlined; we may have to draw a new polygon in the way Leaflet implements Polygon?

or we could ditch outlining and create a new tool like "isolate" which would hide all other images besides the one you're working on. Which may be more helpful than outline in the first place.

and hide, i guess

Also: a solution here may also solve the issue that extreme distortions reveal that a 1px border is relative to the local image distortions; that is, a highly stretched corner of an image will have a blurry, wider red border.

[justinmanley]

Jeff - I think that we're beginning to push the boundaries of what this plugin is for.

An "isolate" tool doesn't seem appropriate for this plugin, because it requires that the plugin have knowledge of all of the images that are currently on the map. That's not library code, that's application code.

I think the right place for that code is the MapKnitter module in the annotation-interface branch of my fork, or other similar MapKnitter-specific JavaScript code.

[jywarren]

that seems reasonable to me; the same might be said for the hotkeys system; although in both cases, perhaps some of that code could also be provided in code in the examples folder, since they are both extremely useful tools for working with complex maps with multiple images. If you like that idea, we could make a new issue listing things we'd like to move to the /examples/ section and/or excise from the code in favor of an application-specific implementation.

[justinmanley]

Sure, good idea - I think the examples are a great place for that code.
On Dec 22, 2014 12:44 PM, "Jeffrey Warren" notifications@github.com wrote:

that seems reasonable to me; the same might be said for the hotkeys
system; although in both cases, perhaps some of that code could also be
provided in code in the examples folder, since they are both extremely
useful tools for working with complex maps with multiple images. If you
like that idea, we could make a new issue listing things we'd like to move
to the /examples/ section and/or excise from the code in favor of an
application-specific implementation.

—
Reply to this email directly or view it on GitHub
#6 (comment)
.

[jywarren]

We could have an outer div and an inner img; transforms would affect the outer div, but transparency could affect the inner img

[numeroteca]

Trying to solve it with just css made borders disappear (as you mentioned). What you propose sounds like a great idea.

[grvsachdeva]

@jywarren I saw that this issue is referenced in some other issues and also commits. Can you please update the issue or open a new issue if we have more work to do here with a clear goal? Thanks!

[jywarren]

I think the best approach may really be to use a Leaflet polygonal layer to draw a polygon just in front of or behind the image, and to just keep updating it as we do the image itself. This would also enable us to do other things like offset or expand it, and it also wouldn't be affected by the distortion - i.e. edges would have a fixed pixel width instead of the longer edges getting fatter.

[rexagod]

@sashadev-sky Should we close this, then?

[sashadev-sky]

No I never solved this actually. I put it under the pending list in my PR. The thing is the border just experiences the same kind of stretching that the image does when you drag a corner too far in one direction. The transparency part is simple to resolve but implementing polylines that dynamically update to make sure they don't distort will be a little project.

I'm deleting my comment on here about it and my reference to it in multiple image select so there's no confusion about its status

[sashadev-sky]

transferring my initial notes on it from the pending section of that PR:

• Refactor image border drawing (css border is affected by image transparency) Refactor image border drawing (css border is affected by image transparency) #6 -- for this thinking to maybe put all corner point markers in a feature group class together and then use distances between them to create polylines dynamically