Setting Action Cable

.rubocop.yml

@@ -28,6 +28,7 @@ AllCops:
     - 'public/**/*'
     - 'Dangerfile'
     - 'app/views/**/*'
+    - 'app/assets/javascripts/application.js'
   TargetRubyVersion: '2.4'
 
 Layout/MultilineMethodCallIndentation:

Gemfile

@@ -26,6 +26,7 @@ group :dependencies do
   gem 'bootsnap', '~> 1.4.4'
   gem 'turbolinks', '~> 5'
   gem 'mini_magick', '~> 4.8'
+  gem 'puma', '~> 4.1.0'
 
   # if you use amazon s3 for warpable image storage
   gem 'aws-sdk', '~> 1.5.7'
@@ -37,12 +38,15 @@ group :dependencies do
   # compiling markdown to html
   gem 'rdiscount', '2.2.0.1'
 
+  # Process manager for applications with multiple components
+  gem 'foreman', '~> 0.85.0'
+
   # asset pipelining
   gem 'bootstrap-sass'
   gem 'sassc-rails'
   gem 'jquery-rails'
   gem 'sprockets', '3.7.2'
-  gem "sprockets-rails"
+  gem 'sprockets-rails'
   gem 'sass', require: 'sass'
   gem 'autoprefixer-rails', '~> 9.6.1'
   gem 'uglifier', '~> 4.1.20'
@@ -65,11 +69,11 @@ end
 
 group :development, :test do
   gem 'capybara'
-  gem 'puma'
   gem 'selenium-webdriver'
   gem 'byebug', '~> 11.0.1', platforms: [:mri, :mingw, :x64_mingw]
   gem 'faker', '~> 2.1.2'
   gem 'pry-rails', '~> 0.3.9'
+  gem 'action-cable-testing'
 end
 
 group :development do

Gemfile.lock

@@ -4,6 +4,8 @@ GEM
     RubyInline (3.12.4)
       ZenTest (~> 4.3)
     ZenTest (4.11.2)
+    action-cable-testing (0.6.0)
+      actioncable (>= 5.0)
     actioncable (5.2.3)
       actionpack (= 5.2.3)
       nio4r (~> 2.0)
@@ -89,6 +91,8 @@ GEM
     faker (2.1.2)
       i18n (>= 0.8)
     ffi (1.11.1)
+    foreman (0.85.0)
+      thor (~> 0.19.1)
     friendly_id (5.2.5)
       activerecord (>= 4.0.0)
     geokit (1.13.1)
@@ -210,7 +214,7 @@ GEM
     rails-dom-testing (2.0.3)
       activesupport (>= 4.2.0)
       nokogiri (>= 1.6)
-    rails-html-sanitizer (1.1.0)
+    rails-html-sanitizer (1.2.0)
       loofah (~> 2.2, >= 2.2.2)
     rails-perftest (0.0.7)
     railties (5.2.3)
@@ -261,9 +265,8 @@ GEM
     sass-listen (4.0.0)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
-    sassc (2.0.1)
+    sassc (2.1.0)
       ffi (~> 1.9)
-      rake
     sassc-rails (2.1.2)
       railties (>= 4.0.0)
       sassc (>= 2.0)
@@ -296,7 +299,7 @@ GEM
     sqlite3 (1.4.1)
     terrapin (0.6.0)
       climate_control (>= 0.0.3, < 1.0)
-    thor (0.20.3)
+    thor (0.19.4)
     thread_safe (0.3.6)
     tilt (2.0.9)
     turbolinks (5.2.0)
@@ -330,14 +333,16 @@ PLATFORMS
 
 DEPENDENCIES
   RubyInline (~> 3.12.4)
-  autoprefixer-rails (~> 9.6.1)
+  action-cable-testing
+  autoprefixer-rails (~> 9.5.1.1)
   aws-sdk (~> 1.5.7)
   bootsnap (~> 1.4.4)
   bootstrap-sass
   byebug (~> 11.0.1)
   capybara
   codecov
   faker (~> 2.1.2)
+  foreman (~> 0.85.0)
   friendly_id
   geokit-rails (= 1.1.4)
   httparty
@@ -357,7 +362,7 @@ DEPENDENCIES
   passenger
   popper_js (~> 1.11, >= 1.11.1)
   pry-rails (~> 0.3.9)
-  puma
+  puma (~> 4.1.0)
   rack_session_access
   rails (~> 5.2.3)
   rails-controller-testing

Procfile

@@ -0,0 +1,2 @@
+passenger: passenger start
+puma: puma -C config/puma.rb

SYNCHRONOUS_EDITING.md

@@ -0,0 +1,30 @@
+The new synchronous editing feature
+===================================
+
+With the introduction of ActionCable to our system, it has been possible
+to do perform real-time tasks quite easily. We have used rail's default
+action cable to make a _concurrent_editing_channel.rb_ in the _app/channels_ folder,
+to handle all the incoming requests and consists of all the business 
+logic as well. At the frontend we have, _app/javascripts/channels/concurrent_editing.js_ which
+handles the logic at the browser or the frontend.
+
+## Flow of the feature:
+
+1. When the map is updated, the _speak_ method of _concurrent_editing.js_ is called which requests 
+the _sync_ method of _concurrent_editing_channel.rb_ to broadcast the updated data to 
+the connected users.
+
+2. The broadcasted data is finally caught by the _received_ function of _app/javascripts/channels/concurrent_editing.js_
+
+3. Finally the _received_ function calls the _synchronizeData_ function to update 
+ all the fresh data on the map.
+
+
+## Testing: 
+
+1. The _action-cable-testing_ gem is used for the feature's testing. It has some really
+cool testing functionality which was required for our use case.
+
+2. Currently we have separate tests written for connection related features and channel 
+specific features. The relevant files are test/channels/concurrent_editing_channel_test.rb and
+test/channels/connection_test.rb

app/assets/javascripts/application.js

@@ -17,7 +17,7 @@
 //= require jquery
 //= require jquery-ujs
 //= require jquery/dist/jquery.js
-//= require jquery-ujs/src/rails.js 
+//= require jquery-ujs/src/rails.js
 //= require jquery-ui/jquery-ui.min.js
 
 //= require blueimp-tmpl/js/tmpl.js
@@ -44,9 +44,10 @@
 //= require image-sequencer/dist/image-sequencer.js
 //= require leaflet-toolbar/dist/leaflet.toolbar.js
 //= require leaflet-draw/dist/leaflet.draw-src.js
-//= require leaflet-distortableimage/dist/leaflet.distortableimage.js
 //= require leaflet-illustrate/dist/Leaflet.Illustrate.js
+//= require leaflet-distortableimage/dist/leaflet.distortableimage.js
 //= require leaflet-distortableimage/src/edit/tools/EditAction.js
 //= require mapknitter/Map.js
+//= require cable.js
 
 //= require_tree .

app/assets/javascripts/cable.js

@@ -0,0 +1,11 @@
+//
+//= require action_cable
+//= require_self
+//= require_tree ./channels
+
+(function() {
+  this.App || (this.App = {});
+
+  App.cable = ActionCable.createConsumer();
+
+}).call(this);

app/assets/javascripts/channels/concurrent_editing.js

@@ -0,0 +1,31 @@
+/* Handles all the frontend interactions with action cable and the server.  */
+
+App.concurrent_editing = App.cable.subscriptions.create(
+    {
+        channel: "ConcurrentEditingChannel",
+        mapSlug: window.location.href.split("/").pop()
+    }, {
+  connected: function() {
+    // Called when the subscription is ready for use on the server
+  },
+
+  disconnected: function() {
+    // Called when the subscription has been terminated by the server
+  },
+
+  received: function(data) {
+    // Called when there's incoming data on the websocket for this channel
+    window.mapknitter.synchronizeData(data.changes);
+  },
+
+  speak: function(changes) {
+   /* Called when an image is updated from Map.js ('saveImage' function).
+    *  This function calls concurrent_editing_channel.rb's 'sync' method
+    *  which is responsible for broadcasting the updated warpables
+    *  to all the user's connected to the concurrent_editing channel. */
+    return this.perform("sync", {
+        changes: changes,
+        map_slug: window.location.href.split("/").pop()
+    });
+  }
+});

app/assets/javascripts/mapknitter/Map.js

@@ -386,6 +386,144 @@ MapKnitter.Map = MapKnitter.Class.extend({
     if (this.editing._mode !== "lock") { e.stopPropagation(); }
   },
 
+    /* Called by the concurrent_editing.js channel's 'received' function (app/assets/javascripts/channels/concurrent_editing.js).
+     * It recieves a list of updated warpables,i.e. list of images with updated corner points. The aim of writing this function
+     * is to reposition the updated images onto the map on every connected browser (via the ActionCable). */
+
+  synchronizeData: function(warpables) {
+      var layers = [];
+      map.eachLayer(function(l) {layers.push(l)});
+      layers = layers.filter(image => (image._url!=undefined || image._url!=null));
+      warpables.forEach(function(warpable) {
+          corners = [];
+          warpable.nodes.forEach(function(node) {
+              corners.push(L.latLng(node.lat, node.lon));
+          });
+
+          x = corners[2];
+          y = corners [3];
+          corners [2] = y;
+          corners [3] = x;
+
+          layer = layers.filter(l => l._url==warpable.srcmedium)[0];
+
+          if(layer == null || layer == undefined) {
+              window.mapknitter.synchronizeNewAddedImage(warpable);
+          } else {
+              layer.setCorners(corners);
+              var index = layers.indexOf(layer);
+              if (index > -1) {
+                  layers.splice(index, 1);
+              }
+          }
+      });
+
+      // remove images if deleted from any user's browser
+      layers.forEach(function(layer) {
+          edit = layer.editing
+          edit._removeToolbar();
+          edit.disable();
+          // remove from Leaflet map:
+          map.removeLayer(layer);
+          // remove from sidebar too:
+          $('#warpable-' + layer.warpable_id).remove();
+      });
+  },
+
+  synchronizeNewAddedImage: function(warpable) {
+      var wn = warpable.nodes;
+      bounds = [];
+
+      // only already-placed images:
+      if (wn.length > 0) {
+          var downloadEl = $('.img-download-' + warpable.id),
+              imgEl = $('#full-img-' + warpable.id);
+
+          downloadEl.click(function () {
+              downloadEl.html('<i class="fa fa-circle-o-notch fa-spin"></i>');
+
+              imgEl[0].onload = function () {
+                  var height = imgEl.height(),
+                      width = imgEl.width(),
+                      nw = map.latLngToContainerPoint(wn[0]),
+                      ne = map.latLngToContainerPoint(wn[1]),
+                      se = map.latLngToContainerPoint(wn[2]),
+                      sw = map.latLngToContainerPoint(wn[3]),
+                      offsetX = nw.x,
+                      offsetY = nw.y,
+                      displayedWidth = $('#warpable-img-' + warpable.id).width(),
+                      ratio = width / displayedWidth;
+
+                  nw.x -= offsetX;
+                  ne.x -= offsetX;
+                  se.x -= offsetX;
+                  sw.x -= offsetX;
+
+                  nw.y -= offsetY;
+                  ne.y -= offsetY;
+                  se.y -= offsetY;
+                  sw.y -= offsetY;
+
+                  warpWebGl(
+                      'full-img-' + warpable.id,
+                      [0, 0, width, 0, width, height, 0, height],
+                      [nw.x, nw.y, ne.x, ne.y, se.x, se.y, sw.x, sw.y],
+                      true // trigger download
+                  )
+
+                  downloadEl.html('<i class="fa fa-download"></i>');
+              }
+
+              imgEl[0].src = $('.img-download-' + warpable.id).attr('data-image');
+          });
+
+          var corners = [
+              L.latLng(wn[0].lat, wn[0].lon),
+              L.latLng(wn[1].lat, wn[1].lon),
+              L.latLng(wn[3].lat, wn[3].lon),
+              L.latLng(wn[2].lat, wn[2].lon)
+          ];
+
+          var img = L.distortableImageOverlay(warpable.srcmedium, {
+              corners: corners,
+              mode: 'lock'
+          }).addTo(map);
+
+          var customExports = mapknitter.customExportAction();
+          var imgGroup = L.distortableCollection({
+              actions: [customExports]
+          }).addTo(map);
+
+          imgGroup.addLayer(img);
+
+          /**
+           * TODO: toolbar may still appear outside of frame. Create a getter for toolbar corners in LDI and then include them in this calculation
+           */
+          bounds = bounds.concat(corners);
+          var newImgBounds = L.latLngBounds(corners);
+
+          if (!map._initialBounds.contains(newImgBounds) && !map._initialBounds.equals(newImgBounds)) {
+              map._initialBounds.extend(newImgBounds);
+              mapknitter._map.flyToBounds(map._initialBounds);
+          }
+
+          images.push(img);
+          img.warpable_id = warpable.id;
+
+          if (!mapknitter.readOnly) {
+              L.DomEvent.on(img._image, {
+                  click: mapknitter.selectImage,
+                  dblclick: mapknitter.dblClickImage,
+                  load: mapknitter.setupToolbar
+              }, img);
+
+              L.DomEvent.on(imgGroup, 'layeradd', mapknitter.setupEvents, img);
+          }
+
+          img.editing.disable()
+      }
+  },
+
   saveImageIfChanged: function () {
     var img = this,
         edit = img.editing;
@@ -407,10 +545,8 @@ MapKnitter.Map = MapKnitter.Class.extend({
 
   saveImage: function () {
     var img = this;
-    // reset change state string:
-    img._corner_state = JSON.stringify(img._corners);
-    // send save request
-    $.ajax('/images', {
+    img._corner_state = JSON.stringify(img._corners); // reset change state string:
+    $.ajax('/images/'+img.warpable_id, { // send save request
       type: 'PATCH',
       data: {
         warpable_id: img.warpable_id,
@@ -424,6 +560,9 @@ MapKnitter.Map = MapKnitter.Class.extend({
       beforeSend: function (e) {
         $('.mk-save').removeClass('fa-check-circle fa-times-circle fa-green fa-red').addClass('fa-spinner fa-spin')
       },
+      success: function(data) {
+        App.concurrent_editing.speak(data);
+      },
       complete: function (e) {
         $('.mk-save').removeClass('fa-spinner fa-spin').addClass('fa-check-circle fa-green')
       },
@@ -447,6 +586,9 @@ MapKnitter.Map = MapKnitter.Class.extend({
           beforeSend: function (e) {
             $('.mk-save').removeClass('fa-check-circle fa-times-circle fa-green fa-red').addClass('fa-spinner fa-spin')
           },
+          success: function(data) {
+              App.concurrent_editing.speak(data);
+          },
           complete: function (e) {
             $('.mk-save').removeClass('fa-spinner fa-spin').addClass('fa-check-circle fa-green')
             // disable interactivity: