Ability to load globals via JS

app/static/app/js/classes/plugins/API.js

@@ -11,10 +11,15 @@ if (!window.PluginsAPI){
   SystemJS.config({
     baseURL: '/plugins',
     map: {
-      css: '/static/app/js/vendor/css.js'
+      'css': '/static/app/js/vendor/css.js',
+      'globals-loader': '/static/app/js/vendor/globals-loader.js'
     },
     meta: {
-      '*.css': { loader: 'css' }
+      '*.css': { loader: 'css' },
+
+      // Globals always available in the window object
+      'jQuery': { loader: 'globals-loader', exports: '$' },
+      'leaflet': { loader: 'globals-loader', exports: 'L' }
     }
   });
 

app/static/app/js/classes/plugins/ApiFactory.js

@@ -24,7 +24,6 @@ export default class ApiFactory{
           this.events.addListener(`${api.namespace}::${eventName}`, (...args) => {
             Promise.all(callbackOrDeps.map(dep => SystemJS.import(dep)))
               .then((...deps) => {
-                console.log(eventName, deps);
                 callbackOrUndef(...(Array.from(args).concat(...deps)));
               });
             });

app/static/app/js/components/Map.jsx

@@ -3,7 +3,6 @@ import '../css/Map.scss';
 import 'leaflet/dist/leaflet.css';
 import Leaflet from 'leaflet';
 import async from 'async';
-
 import '../vendor/leaflet/L.Control.MousePosition.css';
 import '../vendor/leaflet/L.Control.MousePosition';
 import '../vendor/leaflet/Leaflet.Autolayers/css/leaflet.auto-layers.css';
@@ -137,7 +136,7 @@ class Map extends React.Component {
                                     <i class="fa fa-cube"></i> 3D
                                 </button>`;
 
-            //layer.bindPopup(popup);
+            layer.bindPopup(popup);
 
             $('#layerOpacity', popup).on('change input', function() {
                 layer.setOpacity($('#layerOpacity', popup).val());

app/static/app/js/vendor/globals-loader.js

@@ -0,0 +1,15 @@
+/*
+  SystemJS Globals loader plugin
+  Piero Toffanin 2018
+*/
+
+// this code simply allows loading of global modules
+// that are already defined in the window object
+exports.fetch = function(load) {
+  var moduleName = load.name.split("/").pop();
+  return moduleName;
+}
+
+exports.instantiate = function(load){
+  return window[load.source] || window[load.metadata.exports];
+}

plugins/volume/public/app.jsx

@@ -1,5 +1,92 @@
-module.exports = class Hello{
-    constructor(){
-        console.log("INSTANTIATED");
+import 'leaflet-draw';
+import 'leaflet-draw/dist/leaflet.draw.css';
+import $ from 'jquery';
+import L from 'leaflet';
+
+module.exports = class App{
+    constructor(map){
+        this.map = map;
+    }
+
+    setupVolumeControls(){
+        const { map } = this;
+
+        const editableLayers = new L.FeatureGroup();
+        map.addLayer(editableLayers);
+
+        const options = {
+            position: 'topright',
+            draw: {
+                toolbar: {
+                    buttons: {
+                        polygon: 'Draw an awesome polygon'
+                    }
+                },
+                polyline: false,
+                polygon: {
+                    showArea: true,
+                    showLength: true,
+
+                    allowIntersection: false, // Restricts shapes to simple polygons
+                    drawError: {
+                        color: '#e1e100', // Color the shape will turn when intersects
+                        message: '<strong>Oh snap!<strong> Area cannot have intersections!' // Message that will show when intersect
+                    },
+                    shapeOptions: {
+                        // color: '#bada55'
+                    }
+                },
+                circle: false,
+                rectangle: false,
+                marker: false,
+                circlemarker: false
+            },
+            edit: {
+                featureGroup: editableLayers,
+                // remove: false
+                edit: {
+                    selectedPathOptions: {
+                      maintainColor: true,
+                      dashArray: '10, 10'
+                    }
+                }
+            }
+        };
+
+        const drawControl = new L.Control.Draw(options);
+        map.addControl(drawControl);
+
+        // Is there a better way?
+        $(drawControl._container)
+            .find('a.leaflet-draw-draw-polygon')
+            .attr('title', 'Measure Volume');
+        
+        map.on(L.Draw.Event.CREATED, (e) => {
+            const { layer } = e;
+            layer.feature = {geometry: {type: 'Polygon'} };
+
+            var paramList;
+            // $.ajax({
+            //     type: 'POST',
+            //     async: false,
+            //     url: `/api/projects/${meta.task.project}/tasks/${meta.task.id}/volume`,
+            //     data: JSON.stringify(e.layer.toGeoJSON()),
+            //     contentType: "application/json",
+            //     success: function (msg) {
+            //         paramList = msg;
+            //     },
+            //     error: function (jqXHR, textStatus, errorThrown) {
+            //         alert("get session failed " + errorThrown);
+            //     }
+            // });
+
+            e.layer.bindPopup('Volume: test');
+        
+            editableLayers.addLayer(layer);
+        });
+
+        map.on(L.Draw.Event.EDITED, (e) => {
+            console.log("EDITED ", e);
+        });
     }
 }

plugins/volume/public/main.js

@@ -1,79 +1,7 @@
 PluginsAPI.Map.willAddControls([
-    'volume/build/app.js'
+    'volume/build/app.js',
+    'volume/build/app.css'
 	], function(options, App){
-    new App();
+    const app = new App(options.map);
+    app.setupVolumeControls();
 });
-
-/*
-    const featureGroup = L.featureGroup();
-    featureGroup.addTo(this.map);
-
-    new L.Control.Draw({
-        draw: {
-          polygon: {
-            allowIntersection: false, // Restricts shapes to simple polygons
-            shapeOptions: {
-              color: '#707070'
-            }
-          },
-          rectangle: false,
-          circle: false,
-          circlemarker: false,
-          marker: false
-        },
-        edit: {
-          featureGroup: featureGroup,
-          edit: {
-            selectedPathOptions: {
-              maintainColor: true,
-              dashArray: '10, 10'
-            }
-          }
-        }
-      }).addTo(this.map);
-
-    this.map.on(L.Draw.Event.CREATED, function(e) {
-      e.layer.feature = {geometry: {type: 'Polygon'} };
-      featureGroup.addLayer(e.layer);
-
-      var paramList;
-        $.ajax({
-            type: 'POST',
-            async: false,
-            url: `/api/projects/${meta.task.project}/tasks/${meta.task.id}/volume`,
-            data: JSON.stringify(e.layer.toGeoJSON()),
-            contentType: "application/json",
-            success: function (msg) {
-                paramList = msg;
-            },
-            error: function (jqXHR, textStatus, errorThrown) {
-                alert("get session failed " + errorThrown);
-            }
-        });
-
-      e.layer.bindPopup('Volume: ' + paramList.toFixed(2) + 'Mètres Cubes (m3)');
-    });
-
-    this.map.on(L.Draw.Event.EDITED, function(e) {
-      e.layers.eachLayer(function(layer) {
-        const meta = window.meta;
-
-        var paramList = null;
-        $.ajax({
-            type: 'POST',
-            async: false,
-            url: `/api/projects/${meta.task.project}/tasks/${meta.task.id}/volume`,
-            data: JSON.stringify(layer.toGeoJSON()),
-            contentType: "application/json",
-            success: function (msg) {
-                paramList = msg;
-            },
-            error: function (jqXHR, textStatus, errorThrown) {
-                alert("get session failed " + errorThrown);
-            }
-        });
-
-      layer.setPopupContent('Volume: ' + paramList.toFixed(2) + 'Mètres Cubes (m3)');
-
-      });
-    });*/

plugins/volume/public/webpack.config.js

@@ -22,7 +22,7 @@ module.exports = {
 
   plugins: [
     new LiveReloadPlugin(),
-    new ExtractTextPlugin('css/[name].css', {
+    new ExtractTextPlugin('[name].css', {
         allChunks: true
     })
   ],
@@ -68,6 +68,7 @@ module.exports = {
     //  on the global let jQuery
     "jquery": "jQuery",
     "SystemJS": "SystemJS",
-    "PluginsAPI": "PluginsAPI"
+    "PluginsAPI": "PluginsAPI",
+    "leaflet": "leaflet"
   }
 }