Keymapper phase 2 enhancements (#243)

* Control toolbar + Keymap guide + Util fn to make custom toolbars

* Toolbar options

* default toolbarType and expose Guides

* fix conflicts

* Update src/edit/tools/DistortableImage.Guides.js

Co-Authored-By: rexagod <[email protected]>

* Update .gitignore

* develop on sashadev-sky's review

* delete extra bracket causing error after rebase

* remove intent technique

* Update Gruntfile.js

* force build dist

* all tests passing

* removed guides

* addToolbar -> keymapper

* Control toolbar + Keymap guide + Util fn to make custom toolbars

* Update src/edit/tools/DistortableImage.Guides.js

Co-Authored-By: rexagod <[email protected]>

* Update .gitignore

* develop on sashadev-sky's review

* Update Gruntfile.js

* force build dist

* package-json fixed

* add hiding functionality

* relocate to ../

* remove erroneous coverage from build, extend from L.Handler, remove init code from LDI.edit.js, and exposed in *.html

* merge position and init

* make similar changes in select.html

* set topright as default position

* add disable functionality

* modify keymapper ui #258

* Fix rebase

* fixed rebase 2

* Fix rebase 3

* initiate orb algo UI integration

* Revert "initiate orb algo UI integration"

This reverts commit 45ffdee.

* Make updates on rexagods updates

* keymapperinitially collapsed

* Keymapper toggle no longer propogates and hides image toolbar

* finished draft

* add disable and instance check functionality

* remove instance count for DistortableImage.Edit

* remove .vscode from modified files

* add removeHooks

* merge changes

* add enable functionality

* fix so that enable works

* Control toolbar + Keymap guide + Util fn to make custom toolbars

* Toolbar options

* default toolbarType and expose Guides

* develop on sashadev-sky's review

* force build dist

* remove erroneous coverage from build, extend from L.Handler, remove init code from LDI.edit.js, and exposed in *.html

* Fix rebase 3

* Make updates on rexagods updates

* add disable and instance check functionality

* remove instance count for DistortableImage.Edit

* add removeHooks

* fix so that enable works

* all fixed

* restructure

* More refactoring

* changge from button to a

* updates

* clean up

* clean up

* fix broken package-lock

* bump version

* position working and ui updates

* modal

* refactor

* get rid of arrow collapse svg

* finish cleanup

* return extra line to css file

* cleanup

* update README

* syntax

* try to resolve npm travis trouble

* try npm rebuild

* try nuking cache

* add node v 12 to .travis.yml

* reorder dependencies undo gruntfile change

* rebase again, readd a line deleted

* update README

* try updaing paths

Gruntfile.js

@@ -78,9 +78,9 @@ module.exports = function(grunt) {
             { removeViewBox: false },
             { removeEmptyAttrs: false },
             { removeTitle: true }, // "leaflet-toolbar" lets us specify the title attribute later
-            { removeAttrs: 
-              {
-						    attrs: ['xmlns', 'fill']
+            {
+              removeAttrs: {
+                attrs: ['xmlns', 'fill']
               }
             }
           ]
@@ -131,12 +131,14 @@ module.exports = function(grunt) {
             'src/edit/RotateScaleHandle.js',
             'src/edit/RotateHandle.js',
             'src/edit/ScaleHandle.js',
-            'src/edit/tools/IconSet.js',
+            'src/iconsets/IconSet.js',
+            'src/iconsets/KeymapperIconSet.js',
+            'src/iconsets/ToolbarIconSet.js',
             'src/edit/tools/EditAction.js',
             'src/edit/tools/DistortableImage.PopupBar.js',
             'src/edit/tools/DistortableImage.ControlBar.js',
             'src/edit/DistortableImage.Edit.js',
-            'src/edit/DistortableImage.Keymapper.js',
+            'src/components/DistortableImage.Keymapper.js',
             'src/edit/BoxSelector.js'
           ],
           dest: 'dist/leaflet.distortableimage.js'

README.md

@@ -58,17 +58,16 @@ L.tileLayer('https://{s}.tiles.mapbox.com/v3/anishshah101.ipm9j6em/{z}/{x}/{y}.p
 }).addTo(map);
 
 // create an image
-img = L.distortableImageOverlay(
-  'example.png', {
-    // 'corners' is the only required option for this class
-    // and is in NW, NE, SW, SE order
-    corners: [
-      L.latLng(51.52,-0.14),
-      L.latLng(51.52,-0.10),
-      L.latLng(51.50,-0.14),
-      L.latLng(51.50,-0.10)
-    ],
-  }).addTo(map);
+img = L.distortableImageOverlay('example.png', {
+  // 'corners' is the only required option for this class
+  // and is in NW, NE, SW, SE order
+  corners: [
+    L.latLng(51.52,-0.14),
+    L.latLng(51.52,-0.10),
+    L.latLng(51.50,-0.14),
+    L.latLng(51.50,-0.10)
+  ],
+}).addTo(map);
 
 // enable editing
 L.DomEvent.on(img._image, 'load', img.editing.enable, img.editing);
@@ -93,18 +92,15 @@ If you would like to overrwrite the default toolbar actions available for an ind
 For example, to overrwrite the toolbar to only include the `ToggleTransparency` and `Delete` actions:
 
 ``` JS
-img = L.distortableImageOverlay(
-*   'example.png', {
-    // 'corners' is the only required option for this class
-    // and is in NW, NE, SW, SE order
-    corners: [
-      L.latLng(51.52,-0.14),
-      L.latLng(51.52,-0.10),
-      L.latLng(51.50,-0.14),
-      L.latLng(51.50,-0.10)
-    ],
-    actions: [ToggleTransparency, Delete]
-  }).addTo(map);
+img = L.distortableImageOverlay('example.png', {
+  corners: [
+    L.latLng(51.52,-0.14),
+    L.latLng(51.52,-0.10),
+    L.latLng(51.50,-0.14),
+    L.latLng(51.50,-0.10)
+  ],
+  actions: [ToggleTransparency, Delete]
+}).addTo(map);
 ```
 
 ### Corners
@@ -180,13 +176,10 @@ In the below example, the image will be initialiazed with "rotateScale" handles:
 L.DomEvent.on(img._image, 'load', img.editing.enable, img.editing);
 ```
 
-### Keymapper
-
-`keymapper` (*optional*, default: true, value: *boolean*)
+### Full-resolution download
 
-By default, an image loads with a keymapper legend showing the available key bindings for different editing / interaction options. To suppress the keymapper, pass `keymapper: false` as an additional option to the image.
+`fullResolutionSrc` (*optional*)
 
-### Full-resolution download
 
 We've added a GPU-accelerated means to generate a full resolution version of the distorted image; it requires two additional dependencies to enable; see how we've included them in the demo:
 
@@ -198,20 +191,15 @@ We've added a GPU-accelerated means to generate a full resolution version of the
 When instantiating a Distortable Image, pass in a `fullResolutionSrc` option set to the url of the higher resolution image. This image will be used in full-res exporting.
 
 ```JS
-// create basic map setup from above
-
-// create an image - note the optional
-// fullResolutionSrc option is now passed in
-img = L.distortableImageOverlay(
-  'example.png', {
-    corners: [
-      L.latLng(51.52,-0.14),
-      L.latLng(51.52,-0.10),
-      L.latLng(51.50,-0.14),
-      L.latLng(51.50,-0.10)
-    ],
-    fullResolutionSrc: 'large.jpg'
-  }).addTo(map);
+img = L.distortableImageOverlay('example.png', {
+  corners: [
+    L.latLng(51.52,-0.14),
+    L.latLng(51.52,-0.10),
+    L.latLng(51.50,-0.14),
+    L.latLng(51.50,-0.10)
+  ],
+  fullResolutionSrc: 'large.jpg'
+}).addTo(map);
 
 L.DomEvent.on(img._image, 'load', img.editing.enable, img.editing);
 ```
@@ -239,26 +227,22 @@ The setup is relatively similar - here is an example with two images:
 ```JS
 // 1. Instantiate map
 // 2. Instantiate images but this time *dont* add them directly to the map
-img = L.distortableImageOverlay(
-  'example.png', {
-    keymapper: false,
-    corners: [
-      L.latLng(51.52, -0.14),
-      L.latLng(51.52,-0.10),
-      L.latLng(51.50, -0.14),
-      L.latLng(51.50,-0.10)
-    ],
-  });
+img = L.distortableImageOverlay('example.png', {
+  corners: [
+    L.latLng(51.52, -0.14),
+    L.latLng(51.52,-0.10),
+    L.latLng(51.50, -0.14),
+    L.latLng(51.50,-0.10)
+  ],
+});
 
-img2 = L.distortableImageOverlay(
-  'example.png', {
-    keymapper: false,
-    corners: [
-      L.latLng(51.51, -0.20),
-      L.latLng(51.51,-0.16),
-      L.latLng(51.49, -0.21),
-      L.latLng(51.49,-0.17)
-    ],
+img2 = L.distortableImageOverlay('example.png', {
+  corners: [
+    L.latLng(51.51, -0.20),
+    L.latLng(51.51,-0.16),
+    L.latLng(51.49, -0.21),
+    L.latLng(51.49,-0.17)
+  ],
 });
 
 // 3. Instantiate an empty `DistortableCollection` group
@@ -294,13 +278,15 @@ To add / remove a tool from the toolbar at runtime, we have also added the metho
 ### UI and functionalities 
 Currently it supports multiple image selection and translations, and WIP we are working on porting all editing tools to work for it, such as transparency, etc. Image distortions still use the single-image interface.
 
-**How to multi-select:**
+**multi-select:** A single toolbar instance (using `L.control`) renders the set of tools available to use on collections of images.
+
+
   1. Multi-selection works with <kbd>cmd</kbd> + `click` to toggle an individual image's inclusion in this interface.
   2. Or <kbd>shift</kbd> + `drag` to use our `BoxSelector` handler to select multiple at once.
   3. Or for touch devices, `touch` and `hold` (aka `longpress`). 
 
   **How to un-multi-select:**
-  - A single toolbar instance (using `L.control`) renders the set of tools available to use on collections of images.
+
   - In order to return to the single-image interface, where each `L.popup` toolbar only applies actions on the image it's attached to, you must toggle *all* images out of multi-select or...
   - ...Click on the map or hit the <kbd>esc</kbd> key to quickly deselect all images.
   - For the aforementioned 3 mutli-select methods, the `BoxSelector` method is the only one that doesn't also toggle _out_ of multi-select mode. 
@@ -403,6 +389,26 @@ Defaults:
 
 - `hasTool(action)` - Checks if the tool is already present in the currently rendered control toolbar.
 
+## Additional Components
+
+### Keymapper
+
+
+```JS
+// add a position option with combinations of 'top', 'bottom', 'left' or 'right'
+L.distortableImage.keymapper(map, { 
+  position: 'topleft' 
+});
+```
+
+Options:
+ - `position` (*optional*, default: 'topright', value: *string*)
+
+
+Adds a control onto the map which opens a keymapper legend showing the available key bindings for different editing / interaction options. 
+
+(WIP) Currently includes keybindings for all available actions and does not update yet if you use the `actions` API to limit available actions.
+
 ## Contributing
 
 This plugin has basic functionality, and is in production as part of MapKnitter, but there are [plenty of outstanding issues to resolve](https://github.com/publiclab/Leaflet.DistortableImage/issues). Please consider helping out!