Toolbar tool updates (#255)

* update dist * dist file * Toggle hovertext * standardize code * update Keymapper order * update map and hovertext to Rotate+Scale * push updates * Remove extra whitespace * fix indentation * Normalize tooltips * geocode to geolocate * More symantic updates * s * Confirm all updates
publiclab · Jun 8, 2019 · 2da25be · 2da25be
1 parent ee8e1ae
commit 2da25be
Show file tree

Hide file tree

Showing 14 changed files with 571 additions and 430 deletions.
diff --git a/README.md b/README.md
@@ -59,10 +59,10 @@ img = L.distortableImageOverlay(
   'example.png', {
     // 'corners' is the only required option for this class
     corners: [
-      L.latLng(51.52,-0.10),
       L.latLng(51.52,-0.14),
-      L.latLng(51.50,-0.10),
-      L.latLng(51.50,-0.14)
+      L.latLng(51.52,-0.10),
+      L.latLng(51.50,-0.14),
+      L.latLng(51.50,-0.10)
     ],
   }
 ).addTo(map);
@@ -82,7 +82,7 @@ Options available to pass during `L.DistortableImageOverlay` initialization:
 
 - [keymapper](#keymapper)
 
-- [suppressToolbar](#suppressToolbar)
+- [suppressToolbar](#Suppress-Toolbar)
 
 
 ## Selected
@@ -101,7 +101,7 @@ Each primary editing mode corresponds to a separate editing tool.
 
 This option sets the image's initial editing mode, meaning the corresponding editing tool will always appear first when you interact with the image.
 
-values available to pass to `mode` are: 
+Values available to pass to `mode` are: 
 - "distort" (the default)
 - "lock"
 - "rotate"
@@ -114,13 +114,16 @@ In the below example, the image will be initialiazed with "rotateScale" handles:
 // create an image
   img = L.distortableImageOverlay("example.png", {
     corners: [
-      L.latLng(51.52, -0.1),
       L.latLng(51.52, -0.14),
-      L.latLng(51.5, -0.1),
-      L.latLng(51.5, -0.14)
+      L.latLng(51.52, -0.10),
+      L.latLng(51.50, -0.14),
+      L.latLng(51.50, -0.10)
     ],
     mode: "rotateScale",
   }).addTo(map);
+
+L.DomEvent.on(img._image, 'load', img.editing.enable, img.editing);
+
 ```
 
 ## Keymapper
@@ -149,10 +152,10 @@ When instantiating a Distortable Image, pass in a `fullResolutionSrc` option set
 img = L.distortableImageOverlay(
   'example.png', {
     corners: [
-      L.latLng(51.52,-0.10),
       L.latLng(51.52,-0.14),
-      L.latLng(51.50,-0.10),
-      L.latLng(51.50,-0.14)
+      L.latLng(51.52,-0.10),
+      L.latLng(51.50,-0.14),
+      L.latLng(51.50,-0.10)
     ],
     fullResolutionSrc: 'large.jpg'
   }
@@ -162,7 +165,7 @@ L.DomEvent.on(img._image, 'load', img.editing.enable, img.editing);
 
 ```
 
-## suppressToolbar
+## Suppress Toolbar
 
 `suppressToolbar` (*optional*, default: false, value: *boolean*)
 
@@ -193,31 +196,42 @@ imageFeatureGroup.addLayer(img2);
 imageFeatureGroup.addLayer(img3);
 
 ```
+<hr>
 
-## Image-ordering
+## Default Toolbar Actions
 
-For multiple images, we've also added a `ToggleOrder` action, that switches overlapping images back and forth into view by employing [`bringToFront()`](https://leafletjs.com/reference-1.4.0.html#popup-bringtofront) and [`bringToBack()`](https://leafletjs.com/reference-1.4.0.html#popup-bringtoback) from the Leaflet API.
+- "ToggleLock"
 
-```js
-ToggleOrder = EditOverlayAction.extend({
-  options: {
-    toolbarIcon: {
-      html: '<span class="fa fa-sort"></span>',
-      tooltip: 'Change order',
-      title: 'Toggle order'
-    }
-  },
-
-  addHooks: function ()
-  {
-    var editing = this._overlay.editing;
-
-    editing._toggleOrder(); // toggles images into view
-    this.disable();
-  }
-});
+- "ToggleOrder"
 
-```
+- "ToggleOutline"
+
+- "ToggleTransparency"
+
+- "ToggleRotateScale"
+
+- "EnableEXIF"
+
+- "Export"
+
+- "Delete"
+
+## Addons
+
+- "ToggleRotate"
+
+- "ToggleScale"
+
+### Image-ordering
+
+For multiple images, the `ToggleOrder` action switches overlapping images back and forth into view by employing [`bringToFront()`](https://leafletjs.com/reference-1.4.0.html#popup-bringtofront) and [`bringToBack()`](https://leafletjs.com/reference-1.4.0.html#popup-bringtoback) from the Leaflet API.
+
+
+## Quick API Reference
+
+- [`getCorners()`](corners) and [`getCorner(idx)`](corners)
+
+- `getCenter()` - Calculates the centroid of the image
 
 ## Corners
 
@@ -227,19 +241,20 @@ on the image, and can be accessed using our `getCorners()` method after the imag
 Useful usage example:
 
 ```js
-// instantiate and add to map
+// instantiate, add to map and enable
 img = L.distortableImageOverlay(...);
 img.addTo(map);
+L.DomEvent.on(img._image, 'load', img.editing.enable, img.editing);
 
 // grab the initial corner positions
 JSON.stringify(img.getCorners())
-=> "[{"lat":51.52,"lng":-0.1},{"lat":51.52,"lng":-0.14},{"lat":51.5,"lng":-0.1},{"lat":51.5,"lng":-0.14}]"
+=> "[{"lat":51.52,"lng":-0.14},{"lat":51.52,"lng":-0.1},{"lat":51.5,"lng":-0.14},{"lat":51.5,"lng":-0.1}]"
 
 // ...move the image around...
 
 // check the new corner positions.
 JSON.stringify(img.getCorners())
-=> "[{"lat":51.51091971397745,"lng":-0.015994012355804447},{"lat":51.51091971397745,"lng":-0.05599111318588257},{"lat":51.49093697986642,"lng":-0.015994012355804447},{"lat":51.49093697986642,"lng":-0.05599111318588257}]"
+=> "[{"lat":51.50685099607552,"lng":-0.06058305501937867},{"lat":51.50685099607552,"lng":-0.02058595418930054},{"lat":51.486652692081925,"lng":-0.06058305501937867},{"lat":51.486652692081925,"lng":-0.02058595418930054}]"
 
 // note there is an added level of precision after dragging the image for debugging purposes
 

diff --git a/bower.json b/bower.json
@@ -37,7 +37,6 @@
     "sinon": "^1.12.2"
   },
   "dependencies": {
-    "font-awesome": "^4.2.0",
     "jquery": "^2.1.3",
     "leaflet": "^1.0.0",
     "leaflet-toolbar": "git+https://github.com/manleyjster/Leaflet.Toolbar.git"

diff --git a/dist/leaflet.distortableimage.css b/dist/leaflet.distortableimage.css
@@ -1,3 +1,48 @@
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/materialicons/v47/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
+}
+
+@font-face {
+  font-family: 'Material Icons Outlined';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v8/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUcel5euIg.woff2) format('woff2');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+}
+
+.material-icons-outlined {
+  font-family: 'Material Icons Outlined';
+}
+
+.material-icons, .material-icons-outlined {
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+
+.material-icons.red { color: #c10d0d; }
+
+.material-icons.md-18, .material-icons-outlined.md-18  { 
+  font-size: 18px; 
+  line-height: inherit;
+}
+
 #imgcontainer {
   position:relative;
   width: 100%;
@@ -84,8 +129,3 @@ kbd {
   text-shadow: 0 0.5px 0 #fff;
 }
 
-span {
-  margin-left: 2px;
-  letter-spacing: 1.2px;
-}
-