Pixelorigin

[sashadev-sky]

Fixes #402 (<=== Add issue number here)

Make sure these boxes are checked before your pull request (PR) is ready to be reviewed and merged. Thanks!

• PR is descriptively titled 📑 and links the original issue above 🔗
• tests pass -- look for a green checkbox ✔️ a few minutes after opening your PR -- or run tests locally with grunt
• code is in uniquely-named feature branch and has no merge conflicts 📁
• screenshots/GIFs are attached 📎 in case of UI updates
• @mention the original creator of the issue in a comment below for help or for a review

We're happy to help you get this ready -- don't be afraid to ask for help, and don't be discouraged if your tests fail at first!

If tests do fail, click on the red X to learn why by reading the logs.

Please be sure you've reviewed our contribution guidelines at https://publiclab.org/contributing-to-public-lab-software

Thanks!

=======
changes:

• updated debug/pixelorigin.html to use one of our distortableImageOverlay's instead of a marker
• bounds are now saved on the image corner and updated appropriately - one of the pending things wanted to implement to fix downstream MK logic (Implementgroup mapknitter#959)
  • note that setBounds calls _reset, so we no longer use that method ourselves.
• updated dragging logic to use setCorners() as well, also mentioned as useful in Implementgroup mapknitter#959
• bump to 0.7.8
• update docs

pending:

=======

[sashadev-sky]

@jywarren @rexagod here is an explanation of this one because its a little tricky -

the typical L.Draggable leaflet object is allowed to just leave the map:

Since we overrode this method, instead we get a result like the one shown in #402:

To fix this I update setCorners with a conditional that uses a formula based on the information from Leaflet docs that

which came out like this:

   for (var k in latlngObj) {
      if ((zoom === 0 && (map.project(latlngObj[k]).y < 2 || map.project(latlngObj[k]).y >= 255)) ||
          (zoom !== 0 && (map.project(latlngObj[k]).y / zoom < 2 || map.project(latlngObj[k]).y / Math.pow(2, zoom) >= 255))
      ) {
        // calling reset / update w/ the same corners bc it prevents a marker flicker for rotate
        this.setBounds(L.latLngBounds(this.getCorners()));
        this.fire('update');
        return;
      }
    }

2 is for the top, 255 is for the bottom. Made it less than 256 because 256 would trigger the distortions.

This results in:

[sashadev-sky]

let me know your thoughts and ill make corresponding doc updates if you like it!

[sashadev-sky]

@jywarren were u ok with this solution?

[sashadev-sky]

@jywarren merging here first because its already ready.