Merge pull request #62 from SylvainCorlay/jlab

Jupyterlab extension

Author: jasongrout

.gitignore

@@ -7,6 +7,7 @@ node_modules/
 
 # Compiled javascript
 pythreejs/static/
+pythreejs/staticlab/
 
 # OS X
 .DS_Store

js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jupyter-threejs",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "jupyter - threejs bridge",
   "author": "Jupyter-Threejs development team",
   "license": "BSD",
@@ -15,12 +15,15 @@
   },
   "devDependencies": {
     "json-loader": "^0.5.4",
+    "@jupyterlab/extension-builder": "^0.7.0",
     "rimraf": "^2.4.1",
     "webpack": "^1.12.14"
   },
   "dependencies": {
     "jquery": "^2.1.4",
-    "jupyter-js-widgets": "^1.0.0",
+    "jupyter-js-widgets": "^2.0.4",
+    "jupyterlab" : "^0.5.1",
+    "@jupyterlab/nbwidgets": "^0.4.0",
     "three": "^0.75.0",
     "underscore": "^1.8.3"
   }

js/src/jupyter-threejs.js

@@ -33,7 +33,8 @@ define(["jupyter-js-widgets", "underscore", "three"],
                 this.renderer = new THREE.CanvasRenderer();
             }
             this.el.className = "jupyter-widget jupyter-threejs";
-            this.$el.empty().append(this.renderer.domElement);
+            this.el.innerHTML = '';
+            this.el.appendChild(this.renderer.domElement);
             var that = this;
             var view_promises = [];
             view_promises.push(this.create_child_view(this.model.get('camera'), render_loop).then(
@@ -494,9 +495,8 @@ define(["jupyter-js-widgets", "underscore", "three"],
             this.model.on('change:root', this.change_root, this);
             this.change_root(this.model, this.model.get('root'));
             this.options.dom.addEventListener(this.model.get('event'), function(event) {
-                var offset = $(this).offset();
-                var mouseX = ((event.pageX - offset.left) / $(that.options.dom).width()) * 2 - 1;
-                var mouseY = -((event.pageY - offset.top) / $(that.options.dom).height()) * 2 + 1;
+                var mouseX = ((event.pageX - this.offsetLeft) / that.options.dom.getBoundingClientRect().width) * 2 - 1;
+                var mouseY = -((event.pageY - this.offsetTop) / that.options.dom.getBoundingClientRect().height) * 2 + 1;
                 var vector = new THREE.Vector3(mouseX, mouseY, that.options.renderer.camera.obj.near);
 
                 vector.unproject(that.options.renderer.camera.obj);
@@ -997,7 +997,7 @@ define(["jupyter-js-widgets", "underscore", "three"],
             var img = new Image();
             //img.crossOrigin='anonymous';
             img.src = this.model.get('imageuri');
-            img.onload = $.proxy(this.needs_update, this);
+            img.onload = _.bind(this.needs_update, this);
             this.replace_obj(new THREE.Texture(img));
             ThreeView.prototype.update.call(this);
         },

js/src/labplugin.js

@@ -0,0 +1,16 @@
+var jupyter_threejs = require('./index');
+
+var jupyterlab_widgets = require('@jupyterlab/nbwidgets');
+
+module.exports = {
+  id: 'jupyter.extensions.jupyter-threejs',
+  requires: [jupyterlab_widgets.INBWidgetExtension],
+  activate: function(app, widgets) {
+      widgets.registerWidget({
+          name: 'jupyter-threejs',
+          version: jupyter_threejs.version,
+          exports: jupyter_threejs
+      });
+  },
+  autoStart: true
+};

js/webpack.config.js

@@ -2,6 +2,19 @@ var loaders = [
     { test: /\.json$/, loader: "json-loader" },
 ];
 
+var buildExtension = require('@jupyterlab/extension-builder/lib/builder').buildExtension;
+
+buildExtension({
+    name: 'jupyter-threejs',
+    entry: './src/labplugin',
+    outputDir: '../pythreejs/staticlab',
+    config: {
+        module: {
+            loaders: []
+        }
+    }
+});
+
 module.exports = [
     {// Notebook extension
         entry: './src/extension.js',

pythreejs/__init__.py

@@ -143,3 +143,9 @@ def _jupyter_nbextension_paths():
         'dest': npm_pkg_name,
         'require': npm_pkg_name + '/extension'
     }]
+
+def _jupyter_labextension_paths():
+    return [{
+        'name': npm_pkg_name,
+        'src': 'staticlab'
+    }]