publiclab · jywarren · Dec 10, 2022 · Dec 9, 2022 · Dec 10, 2022 · Dec 10, 2022
diff --git a/examples/js/listeners.js b/examples/js/listeners.js
@@ -0,0 +1,18 @@
+let map;
+
+(function(){
+    map = L.map('map').setView([51.505, -0.09], 13);
+    map.addGoogleMutant();
+
+    map.whenReady(function() {
+    img = L.distortableImageOverlay('example.jpg', {
+        selected: true,
+    }).addTo(map);
+
+    // Wait until image is loaded before setting up DOM element listeners
+    L.DomEvent.on(img.getElement(), 'load', function() {
+        L.DomEvent.on(img, 'edit', function() { alert('edited'); });
+        L.DomEvent.on(img.getElement(), 'mouseup touchend', function() { alert('edited'); });
+    });
+    });
+})();
diff --git a/examples/js/select.js b/examples/js/select.js
@@ -1,3 +1,62 @@
+let map;
+
+(function(){
+    map = L.map('map').setView([51.505, -0.09], 13);
+    map.addGoogleMutant();
+
+    map.whenReady(function() {
+    img = L.distortableImageOverlay('example.jpg', {
+        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),
+        ],
+        mode: 'lock',
+    });
+
+    // create a second image
+    img2 = L.distortableImageOverlay('example.jpg', {
+        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),
+        ],
+        mode: 'freeRotate',
+        suppressToolbar: true,
+    });
+
+    img3 = L.distortableImageOverlay('example.jpg', {
+        corners: [
+        L.latLng(51.50, -0.13),
+        L.latLng(51.50,-0.09),
+        L.latLng(51.48, -0.14),
+        L.latLng(51.48,-0.10),
+        ],
+        actions: [L.DistortAction, L.FreeRotateAction, L.LockAction, L.OpacityAction, L.DeleteAction, L.StackAction],
+    });
+
+    img4 = L.distortableImageOverlay('example.jpg', {
+        actions: [L.ScaleAction, L.DistortAction, L.RotateAction, L.FreeRotateAction, L.LockAction, L.OpacityAction, L.DeleteAction, L.StackAction],
+        corners: [
+        L.latLng(51.51, -0.07),
+        L.latLng(51.51,-0.03),
+        L.latLng(51.49, -0.08),
+        L.latLng(51.49,-0.04),
+        ]
+    });
+
+    imgGroup = L.distortableCollection().addTo(map);
+
+    /* TODO: make an addLayers func */
+    imgGroup.addLayer(img);
+    imgGroup.addLayer(img4);
+    imgGroup.addLayer(img2);
+    imgGroup.addLayer(img3);
+    });
+})();
+=======
   let map;
 
     (function(){

diff --git a/examples/listeners.html b/examples/listeners.html
@@ -13,6 +13,7 @@
     <script src="../node_modules/leaflet/dist/leaflet.js" type="text/javascript" charset="utf-8"></script>
     <script src="../dist/vendor.js"></script>
     <script src="../dist/leaflet.distortableimage.js"></script>
+    <script src="./js/listeners.js" defer></script>
   </head>
   <body style="margin:0;">
 
@@ -21,25 +22,6 @@
     </form>
 
     <div id="map" style="width:100%; height:100%; position:absolute; top:0;"></div>
+
   </body>
-  <script>
-    let map;
-
-    (function(){
-      map = L.map('map').setView([51.505, -0.09], 13);
-      map.addGoogleMutant();
-
-      map.whenReady(function() {
-        img = L.distortableImageOverlay('example.jpg', {
-          selected: true,
-        }).addTo(map);
-
-        // Wait until image is loaded before setting up DOM element listeners
-        L.DomEvent.on(img.getElement(), 'load', function() {
-          L.DomEvent.on(img, 'edit', function() { alert('edited'); });
-          L.DomEvent.on(img.getElement(), 'mouseup touchend', function() { alert('edited'); });
-        });
-      });
-    })();
-  </script>
 </html>
diff --git a/src/edit/iconsets/IconSet.js b/src/edit/iconsets/IconSet.js
@@ -0,0 +1,17 @@
+/* this is the baseclass other IconSets inherit from,
+* we don't use it directly */
+L.IconSet = L.Class.extend({
+
+  _svg: '<svg xmlns="http://www.w3.org/2000/svg">',
+
+  _symbols: '',
+
+  render() {
+    this.addSymbols(this._symbols);
+    return this._svg;
+  },
+
+  addSymbols(symbols) {
+    this._svg += symbols;
+  },
+});
diff --git a/src/edit/iconsets/KeymapperIconSet.js b/src/edit/iconsets/KeymapperIconSet.js
@@ -0,0 +1,7 @@
+L.KeymapperIconSet = L.IconSet.extend({
+
+  _symbols:
+      // eslint-disable-next-line max-len
+      '<symbol viewBox="0 0 25 25" id="keyboard_open"><path d="M12 23l4-4H8l4 4zm7-15h-2V6h2v2zm0 3h-2V9h2v2zm-3-3h-2V6h2v2zm0 3h-2V9h2v2zm0 4H8v-2h8v2zM7 8H5V6h2v2zm0 3H5V9h2v2zm1-2h2v2H8V9zm0-3h2v2H8V6zm3 3h2v2h-2V9zm0-3h2v2h-2V6zm9-3H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></symbol>',
+
+});
diff --git a/src/edit/iconsets/ToolbarIconSet.js b/src/edit/iconsets/ToolbarIconSet.js