Allow JS side to instigate widget creation

Author: vidartf

js/scripts/templates/js_wrapper.mustache

@@ -18,8 +18,6 @@ var {{ modelName }} = {{ superClass.modelName }}.extend({
     defaults: function() {
         return _.extend({{ superClass.modelName }}.prototype.defaults.call(this), {
 
-            _model_name: '{{ modelName }}',
-
             {{#each properties as |prop propName|}}
             {{ propName }}: {{{ prop.defaultJson }}},
             {{/each}}
@@ -70,15 +68,18 @@ var {{ modelName }} = {{ superClass.modelName }}.extend({
 
     },
 
-}{{#if serialized_props}}, {
+}, {
+
+    model_name: '{{ modelName }}',
 
+    {{#if serialized_props}}
     serializers: _.extend({
         {{#each serialized_props as |propName|}}
         {{ propName }}: { deserialize: widgets.unpack_models },
         {{/each}}
     }, {{ superClass.modelName }}.serializers),
-
-}{{/if}});
+    {{/if}}
+});
 
 module.exports = {
     {{ modelName }}: {{ modelName }},

js/src/_base/Three.js

@@ -6,6 +6,8 @@ var ndarray = require('ndarray');
 
 var Enums = require('./enums');
 
+var version = require('../../package.json').version;
+
 var ThreeCache = {
     byId: {},
     byUuid: {},
@@ -17,7 +19,7 @@ var ThreeModel = widgets.WidgetModel.extend({
 
     defaults: function() {
         return _.extend(widgets.WidgetModel.prototype.defaults.call(this), {
-            _model_name: 'ThreeModel',
+            _model_name: this.constructor.model_name,
             _model_module: 'jupyter-threejs',
         });
     },
@@ -27,6 +29,29 @@ var ThreeModel = widgets.WidgetModel.extend({
 
         this.createPropertiesArrays();
 
+        if (options.three_obj) {
+            // We are defining the object from a given THREE object!
+
+            // We need to push a default state first, as comm open does
+            // not support buffers!
+            this.save_changes();
+
+            var obj = options.three_obj;
+            delete options.three_obj;
+
+            this.initPromise = Promise.resolve(obj).bind(this).then(this.processNewObj
+            ).then(function (obj) {
+
+                // sync in all the properties from the THREE object
+                this.syncToModel(true);
+
+                // setup msg, model, and children change listeners
+                this.setupListeners();
+
+            });
+            return;
+        }
+
         // Instantiate Three.js object
         this.initPromise = this.createThreeObjectAsync().bind(this).then(function() {
 
@@ -153,6 +178,24 @@ var ThreeModel = widgets.WidgetModel.extend({
 
     },
 
+    processNewObj: function(obj) {
+
+        obj.ipymodelId = this.model_id; // brand that sucker
+        obj.ipymodel = this;
+
+        var cacheDescriptor = this.getCacheDescriptor();
+        if (!cacheDescriptor) {
+            console.error('Model missing ID:', this);
+            throw new Error('Model missing ID!');
+        }
+
+        this.putThreeObjectIntoCache(cacheDescriptor, obj);
+
+        this.obj = obj;
+        return obj;
+
+    },
+
     createThreeObjectAsync: function() {
 
         // try cache first
@@ -181,30 +224,7 @@ var ThreeModel = widgets.WidgetModel.extend({
             throw new Error('no THREE construct method exists: this.createThreeObjectAsync');
         }
 
-        return objPromise.bind(this).then(function(obj) {
-
-            obj.ipymodelId = this.model_id; // brand that sucker
-            obj.ipymodel = this;
-
-            if (!cacheDescriptor) {
-                cacheDescriptor = this.getCacheDescriptor();
-                if (!cacheDescriptor) {
-                    console.error('Model missing ID:', this);
-                    throw new Error('Model missing ID!');
-                }
-            }
-
-            this.putThreeObjectIntoCache(cacheDescriptor, obj);
-
-            // pickers need access to the model from the three.js object
-            // TODO: this.obj may not exist until after the update() call above
-            // TODO: handle this now that it's in the model
-            // this.obj.ipywidget_view = this;
-
-            this.obj = obj;
-            return obj;
-
-        });
+        return objPromise.bind(this).then(this.processNewObj);
 
     },
 
@@ -717,6 +737,10 @@ var ThreeModel = widgets.WidgetModel.extend({
         return "#" + c.getHexString();
     },
 
+}, {
+    model_module: 'jupyter-threejs',
+    model_name: 'ThreeModel',
+    model_module_version: version,
 });
 
 module.exports = {

js/src/_base/utils.js

@@ -0,0 +1,84 @@
+
+var widgets = require("@jupyter-widgets/base");
+
+
+
+/**
+ * Work around for notebook issue #2730.
+ */
+var commOpenWithBuffers = function(comm, content, callbacks, metadata, buffers) {
+    return comm.kernel.send_shell_message(
+        "comm_open", content, callbacks, metadata, buffers);
+}
+
+
+
+/**
+ * Create a new model from the JS side.
+ *
+ * This will be pushed to the python side.
+ */
+var createModel = function(constructor, widget_manager, obj) {
+
+    var id = widgets.uuid();
+
+    let modelOptions = {
+        widget_manager: widget_manager,
+        model_id: id,
+        three_obj: obj,
+    }
+    var attributes = { };
+    let widget_model = new constructor(attributes, modelOptions);
+
+    widget_model.once('comm:close', () => {
+        delete widget_manager._models[id];
+    });
+
+    var data, buffers;
+    widget_manager._models[id] = widget_model.initPromise.then(() => {
+        var split = widgets.remove_buffers(
+            widget_model.serialize(widget_model.get_state(true)));
+        data = {
+            state: _.extend({}, split.state, {
+                _model_name: constructor.model_name,
+                _model_module: constructor.model_module,
+                _model_module_version: constructor.model_module_version,
+                _view_name: null,
+                _view_module: null,
+                _view_module_version: '',
+            }),
+            buffer_paths: split.buffer_paths
+        };
+        buffers = split.buffers;
+
+        // Create un-opened comm:
+        return widget_manager._create_comm(widget_manager.comm_target_name, id);
+
+    }).then(comm => {
+        var content = {
+            'comm_id': id,
+            'target_name': widget_manager.comm_target_name,
+            'data': data
+        };
+        var metadata = {version: widgets.PROTOCOL_VERSION};
+
+        commOpenWithBuffers(comm, content, null, metadata, buffers)
+
+        widget_model.comm = comm;
+
+        // Hook comm messages up to model.
+        comm.on_close(_.bind(widget_model._handle_comm_closed, widget_model));
+        comm.on_msg(_.bind(widget_model._handle_comm_msg, widget_model));
+
+        widget_model.comm_live = true;
+
+        return widget_model;
+    });
+
+    return widget_manager._models[id];
+}
+
+
+module.exports = {
+    createModel: createModel,
+}