menpo · jabooth · Nov 25, 2015 · Nov 25, 2015 · Nov 25, 2015 · Nov 26, 2015
diff --git a/.eslintignore b/.eslintignore
@@ -1 +1,2 @@
 test/**/*.js
+build/*
diff --git a/.eslintrc b/.eslintrc
@@ -18,8 +18,8 @@
     "new-cap": [2, {"newIsCap":true, "capIsNew":false}],
     "prefer-const": [1],
     "no-alert": [0],
-    "key-spacing": [2, {"beforeColon": false, "afterColon": true}],
     "camelcase": [1],
+    "semi": [1, "always"],
     "no-multiple-empty-lines": [2, {"max": 1}],
     "dot-notation": [1],
     "no-unexpected-multiline": [2]

diff --git a/.gitignore b/.gitignore
@@ -2,6 +2,7 @@ node_modules
 .DS_Store
 # IntelliJ modules
 *.iml
+.idea
 # On master - we don't want to check in every bundle we make!
 npm-debug.log
 coverage

diff --git a/.travis.yml b/.travis.yml
@@ -1,7 +1,7 @@
 sudo: false
 language: node_js
 node_js:
-- '4.1'
+- '5.0'
 install:
   - npm install
   - gem install s3_website

diff --git a/jsconfig.json b/jsconfig.json
@@ -0,0 +1,13 @@
+{
+	// See https://go.microsoft.com/fwlink/?LinkId=759670
+	// for the documentation about the jsconfig.json format
+	"compilerOptions": {
+		"target": "es5",
+		"module": "commonjs",
+		"allowSyntheticDefaultImports": true
+	},
+	"exclude": [
+		"node_modules",
+		"build"
+	]
+}
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
     "build:webpack": "webpack --config ./webpack/webpack.prod.config.js",
     "build:appcache": "sed 's/<html lang=\"en\">/<html lang=\"en\" manifest=\"lmio.appcache\">/g' ./build/index.html > tmp && mv tmp ./build/index.html",
     "build": "NODE_ENV=production npm run build:prep && npm run build:webpack && npm run build:appcache",
-    "watch:webpack-dev-server": "webpack-dev-server --config ./webpack/webpack.dev.config.js --colours --content-base ./build",
+    "watch:webpack-dev-server": "webpack-dev-server --config ./webpack/webpack.dev.config.js --colours --content-base ./build --port 4000 --host 0.0.0.0",
     "watch": "npm run build:prep && npm run watch:webpack-dev-server",
     "test": "mocha --compilers js:babel/register -R spec --recursive ./test",
     "coverage": "istanbul cover _mocha -- --compilers js:babel/register -R dot --recursive ./test",

diff --git a/src/js/app/model/app.js b/src/js/app/model/app.js
@@ -132,6 +132,10 @@ export default Backbone.Model.extend({
         return this.get('landmarks');
     },
 
+    landmarkSize: function () {
+        return this.get('landmarkSize');
+    },
+
     initialize: function () {
         _.bindAll(this, 'assetChanged', 'mesh', 'assetSource', 'landmarks');
 
@@ -143,6 +147,11 @@ export default Backbone.Model.extend({
         this._initCollections();
     },
 
+    budgeLandmarks: function(vector) {
+        // call our onBudgeLandmarks callback
+        this.onBudgeLandmarks(vector)
+    },
+
     _initTemplates: function (override=false) {
         // firstly, we need to find out what template we will use.
         // construct a template labels model to go grab the available labels.

diff --git a/src/js/app/model/asset.js b/src/js/app/model/asset.js
@@ -64,6 +64,10 @@ export const Image = Backbone.Model.extend({
         return { textureOn: true };
     },
 
+    server: function () {
+        return this.get('server');
+    },
+
     hasTexture: function() {
         return this.hasOwnProperty('texture');
     },
@@ -179,7 +183,7 @@ export const Image = Backbone.Model.extend({
 
     loadThumbnail: function () {
         if (!this.hasOwnProperty('_thumbnailPromise')) {
-            this._thumbnailPromise = this.get('server').fetchThumbnail(this.id).then((material) => {
+            this._thumbnailPromise = this.server().fetchThumbnail(this.id).then((material) => {
                 delete this._thumbnailPromise;
                 console.log('Asset: loaded thumbnail for ' + this.id);
                 this.thumbnail = material;
@@ -196,7 +200,7 @@ export const Image = Backbone.Model.extend({
 
     loadTexture: function () {
         if (!this.hasOwnProperty('_texturePromise')) {
-            this._texturePromise = this.get('server').fetchTexture(this.id).then((material) => {
+            this._texturePromise = this.server().fetchTexture(this.id).then((material) => {
                 delete this._texturePromise;
                 console.log('Asset: loaded texture for ' + this.id);
                 this.texture = material;
@@ -258,15 +262,15 @@ export const Image = Backbone.Model.extend({
 export const Mesh = Image.extend({
 
     geometryUrl: function () {
-        return this.get('server').map('meshes/' + this.id);
+        return this.server().map('meshes/' + this.id);
     },
 
     loadGeometry: function () {
         if (this.hasOwnProperty('_geometryPromise')) {
             // already loading this geometry
             return this._geometryPromise;
         }
-        const arrayPromise = this.get('server').fetchGeometry(this.id);
+        const arrayPromise = this.server().fetchGeometry(this.id);
 
         if (arrayPromise.isGeometry) { // Backend says it parses the geometry
             this._geometryPromise = arrayPromise.then((geometry) => {

diff --git a/src/js/app/model/assetsource.js b/src/js/app/model/assetsource.js
@@ -19,9 +19,13 @@ const AssetSource = Backbone.Model.extend({
         return { assets: new Backbone.Collection(), assetIsLoading: false };
     },
 
+    server: function () {
+        return this.get('server');
+    },
+
     fetch: function () {
         return (
-            this.get('server').fetchCollection(this.id).then((response) => {
+            this.server().fetchCollection(this.id).then((response) => {
                 this.set('assets', this.parse(response).assets);
             })
         );
@@ -95,15 +99,15 @@ export const MeshSource = AssetSource.extend({
         const meshes = response.map((assetId) => {
             return new Asset.Mesh({
                 id: assetId,
-                server: this.get('server')
+                server: this.server()
             });
         });
 
         return { assets: meshes };
     },
 
     setAsset: function (newMesh) {
-        var oldAsset = this.get('asset');
+        var oldAsset = this.asset();
         // stop listening to the old asset
         if (oldAsset) {
             this.stopListening(oldAsset);
@@ -165,15 +169,15 @@ export const ImageSource = AssetSource.extend({
         const images = response.map((assetId) => {
             return new Asset.Image({
                 id: assetId,
-                server: this.get('server')
+                server: this.server()
             });
         });
 
         return { assets: images };
     },
 
     setAsset: function (newAsset) {
-        const oldAsset = this.get('asset');
+        const oldAsset = this.asset();
         // stop listening to the old asset
         if (oldAsset) {
             this.stopListening(oldAsset);

diff --git a/src/js/app/model/landmark.js b/src/js/app/model/landmark.js
@@ -29,6 +29,10 @@ export default Backbone.Model.extend({
         return this.get('point');
     },
 
+    index: function () {
+        return this.get('index');
+    },
+
     setPoint: function (p) {
         this.set('point', p);
     },

diff --git a/src/js/app/model/landmark_group.js b/src/js/app/model/landmark_group.js
@@ -191,7 +191,7 @@ LandmarkGroup.prototype.resetNextAvailable = function (originLm) {
 LandmarkGroup.prototype.deleteSelected = atomicOperation(function () {
     const ops = [];
     this.selected().forEach(function (lm) {
-        ops.push([lm.get('index'), lm.point().clone(), undefined]);
+        ops.push([lm.index(), lm.point().clone(), undefined]);
         lm.clear();
     });
     // reactivate the group to reset next available.
@@ -215,9 +215,8 @@ LandmarkGroup.prototype.setLmAt = atomicOperation(function (lm, v) {
     if (!v) {
         return;
     }
-
     this.tracker.record([
-        [ lm.get('index'),
+        [lm.index(),
          lm.point() ? lm.point().clone() : undefined,
          v.clone() ]
     ]);

diff --git a/src/js/app/view/bbviewport.js b/src/js/app/view/bbviewport.js
@@ -0,0 +1,91 @@
+'use strict';
+
+import { Viewport } from './viewport';
+
+const landmarkForBBLandmark = bbLm => ({
+    point: bbLm.point(),
+    isSelected: bbLm.isSelected(),
+    index: bbLm.index()
+});
+
+// A wrapper around the standalone viewport that hooks it into the legacy
+// Backbone Landmarker.io code.
+
+export class BackboneViewport {
+
+    constructor(app) {
+        this.model = app;
+
+        this.model.onBudgeLandmarks = vector => this.viewport.budgeLandmarks(vector);
+
+        const on = {
+            selectLandmarks: is => is.forEach(i => this.model.landmarks().landmarks[i].select()),
+            deselectLandmarks: is => is.forEach(i => this.model.landmarks().landmarks[i].deselect()),
+            deselectAllLandmarks: () => {
+                const lms = this.model.landmarks();
+                if (lms) {
+                    lms.deselectAll()
+                }
+            },
+            selectLandmarkAndDeselectRest: i => this.model.landmarks().landmarks[i].selectAndDeselectRest(),
+            setLandmarkPoint: (i, point) => this.model.landmarks().setLmAt(this.model.landmarks().landmarks[i], point),
+            setLandmarkPointWithHistory: (i, point) => this.model.landmarks().landmarks[i].setPoint(point),
+            addLandmarkHistory: points => this.model.landmarks().tracker.record(points),
+            insertNewLandmark: point => this.model.landmarks().insertNew(point)
+        };
+        this.viewport = new Viewport(app.meshMode(), on);
+
+        this.model.on('newMeshAvailable', this.setMesh);
+        this.model.on("change:landmarks", this.setLandmarks);
+        this.model.on("change:landmarkSize", this.setLandmarkSize);
+        this.model.on("change:connectivityOn", this.updateConnectivityDisplay);
+        this.model.on("change:editingOn", this.updateEditingDisplay);
+
+        // make sure we didn't miss any state changes on load
+        this.setMesh();
+        this.setLandmarkSize();
+        this.updateConnectivityDisplay();
+        this.updateEditingDisplay();
+    }
+
+    setMesh = () => {
+        const meshPayload = this.model.mesh();
+        if (meshPayload === null) {
+            return;
+        }
+        this.viewport.setMesh(meshPayload.mesh, meshPayload.up, meshPayload.front);
+    };
+
+    setLandmarks = () => {
+        const landmarks = this.model.landmarks();
+        if (landmarks !== null) {
+            this.viewport.setLandmarksAndConnectivity(landmarks.landmarks.map(landmarkForBBLandmark),
+                                                      landmarks.connectivity);
+
+            // TODO will this be collected properly?
+            landmarks.landmarks.forEach(lm => lm.on('change', () => this.updateLandmark(lm.index())));
+        }
+
+    };
+
+    setLandmarkSize = () => {
+        this.viewport.setLandmarkSize(this.model.landmarkSize());
+    };
+
+    updateEditingDisplay = () => {
+        this.viewport.updateEditingDisplay(this.model.isEditingOn());
+    };
+
+    updateConnectivityDisplay = () => {
+        this.viewport.updateConnectivityDisplay(this.model.isConnectivityOn());
+    };
+
+    updateLandmark = i => {
+        console.log(`updating landmark ${i}`);
+        this.viewport.updateLandmarks([
+                landmarkForBBLandmark(this.model.landmarks().landmarks[i])
+            ]
+        )
+    };
+
+}
diff --git a/src/js/app/view/keyboard.js b/src/js/app/view/keyboard.js
@@ -9,12 +9,10 @@ const SHORTCUTS = {
     // Shortcuts activated without SHIFT, but CAPS LOCK ok (letters)
     "d": [function (lms) { // d = [d]elete selected
         lms.deleteSelected();
-        $('#viewportContainer').trigger("groupDeselected");
     }, false, true],
 
     "q": [function (lms) { // q = deselect all
         lms.deselectAll();
-        $('#viewportContainer').trigger("groupDeselected");
     }, false, true],
 
     "r": [function (lms, app, viewport) { // r = [r]eset camera
@@ -30,11 +28,10 @@ const SHORTCUTS = {
 
     "a": [function (lms, app) { // a = select [a]ll
         app.landmarks().selectAll();
-        $('#viewportContainer').trigger("groupSelected");
     }, false, true],
 
-    "g": [function () { // g = complete [g]roup selection
-        $('#viewportContainer').trigger("completeGroupSelection");
+    "g": [function (lms) { // g = complete [g]roup selection
+        lms.completeGroups()
     }, false, true],
 
     "c": [function (lms, app, viewport) { // c = toggle [c]amera mode
@@ -138,7 +135,6 @@ export default function KeyboardShortcutsHandler (app, viewport) {
             lms = app.landmarks();
             if (lms) {
                 app.landmarks().deselectAll();
-                $('#viewportContainer').trigger("groupDeselected");
                 evt.stopPropagation();
                 return null;
             }
@@ -148,6 +144,15 @@ export default function KeyboardShortcutsHandler (app, viewport) {
             if (lms) {
                 lms.save();
             }
+        } else if (evt.which >= 37 && evt.which <= 40) { // arrow keys
+            // Up and down are inverted due to the way THREE handles coordinates
+            const vector = {
+                37: [-1, 0],  // Left
+                38: [0, -1],  // Up
+                39: [1, 0],   // Right
+                40: [0, 1]    // Down
+            }[evt.which];
+            app.budgeLandmarks(vector)
         }
     };
 }

diff --git a/src/js/app/view/sidebar.js b/src/js/app/view/sidebar.js
@@ -63,7 +63,6 @@ export const LandmarkView = Backbone.View.extend({
         } else if (event.ctrlKey || event.metaKey) {
             if (!this.model.isSelected()) {
                 this.model.select();
-                $('#viewportContainer').trigger("groupSelected");
             }
         } else if (this.model.isEmpty()) {
             // user is clicking on an empty landmark - mark it as the next for
@@ -77,12 +76,10 @@ export const LandmarkView = Backbone.View.extend({
     selectGroup: function () {
         this.model.group().deselectAll();
         this.model.group().labels[this.labelIndex].selectAll();
-        $('#viewportContainer').trigger("groupSelected");
     },
 
     selectAll: function () {
         this.model.group().selectAll();
-        $('#viewportContainer').trigger("groupSelected");
     }
 });