Merge 26cc4f9 into 4384641

nglviewer · Jun 22, 2019 · a0ce11d · a0ce11d
2 parents 4384641 + 26cc4f9
commit a0ce11d
Show file tree

Hide file tree

Showing 7 changed files with 120 additions and 75 deletions.
diff --git a/js/package.json b/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nglview-js-widgets",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "nglview-js-widgets",
   "author": "Hai Nguyen <hainm.comp@gmail.com>, Alexander Rose <alexander.rose@weirdbyte.de>",
   "license": "MIT",

diff --git a/js/src/widget_ngl.js b/js/src/widget_ngl.js
@@ -1,3 +1,4 @@
+var Jupyter
 var widgets = require("@jupyter-widgets/base");
 var NGL = require('ngl');
 var $ = require('jquery');
@@ -7,12 +8,6 @@ require('jquery-ui/ui/widgets/slider');
 require('jquery-ui/ui/widgets/dialog');
 require('jquery-ui/themes/base/all.css');
 
-var Jupyter;
-if (typeof window !== 'undefined') {
-  Jupyter = window['Jupyter'] = window['Jupyter'] || {};
-} else {
-  Jupyter = Jupyter || {};
-}
 
 var NGLModel = widgets.DOMWidgetModel.extend({
     defaults: function(){
@@ -44,10 +39,17 @@ var NGLView = widgets.DOMWidgetView.extend({
         this.delay = 100;
         this.sync_frame = false;
         this.sync_camera = false;
-
+        this._synced_model_ids = this.model.get("_synced_model_ids");
         // get message from Python
-        this.model.on("msg:custom", function(msg) {
-            this.on_msg(msg);
+        this.model.on("msg:custom", function(msg){ 
+            if ('ngl_view_id' in msg){
+                var key = msg.ngl_view_id;
+                console.log(key);
+                this.model.views[key].then(function(v){
+                    v.on_msg(msg);
+                })
+            }
+            else{this.on_msg(msg);}
         }, this);
 
         if (this.model.comm) {
@@ -77,6 +79,8 @@ var NGLView = widgets.DOMWidgetView.extend({
         });
         this.displayed.then(function() {
             this.ngl_view_id = this.get_last_child_id();
+            this.model.set("_ngl_view_id", Object.keys(this.model.views).sort());
+            this.touch();
             var that = this;
             var width = this.$el.parent().width() + "px";
             var height = "300px";
@@ -98,7 +102,24 @@ var NGLView = widgets.DOMWidgetView.extend({
         }.bind(this));
 
         this.stage.viewerControls.signals.changed.add(function() {
+            var that = this;
             this.serialize_camera_orientation();
+            var m = this.stage.viewerControls.getOrientation();
+            if (that._synced_model_ids.length > 0 && that._ngl_focused == 1){
+                that._synced_model_ids.forEach(function(mid){
+                    that.model.widget_manager.get_model(mid).then(function(model){
+                        for (var k in model.views){
+                            var pview = model.views[k];
+                            pview.then(function(view){
+                                // not sync with itself
+                                if (view != that){ 
+                                    view.stage.viewerControls.orient(m);
+                                }
+                            })
+                        }
+                    })
+                })
+            }
         }.bind(this));
 
         // init toggle fullscreen
@@ -200,14 +221,12 @@ var NGLView = widgets.DOMWidgetView.extend({
         }, false);
 
         container.addEventListener('mouseover', function(e) {
-            that.model.set("_ngl_focused", 1)
-            that.touch();
+            that._ngl_focused = 1;
             e; // linter
         }, false);
 
         container.addEventListener('mouseout', function(e) {
-            that.model.set("_ngl_focused", 0)
-            that.touch();
+            that._ngl_focused = 0;
             e; // linter
         }, false);
 
@@ -460,13 +479,8 @@ var NGLView = widgets.DOMWidgetView.extend({
         this.sync_frame = false;
     },
 
-    setSyncCamera: function() {
-        this.sync_camera = true;
-        this.serialize_camera_orientation();
-    },
-
-    setUnSyncCamera: function() {
-        this.sync_camera = false;
+    setSyncCamera: function(model_ids){
+        this._synced_model_ids = model_ids;
     },
 
     viewXZPlane: function() {

diff --git a/nglview/sandbox/grid_view.py b/nglview/sandbox/grid_view.py
@@ -5,7 +5,7 @@
 
 
 _code_set_size = """
-var ww = window.outerWidth
+var ww = window.outerWidth - 300
 var wh = window.outerHeight
 var vw = ww / %s + 'px'
 var vh = wh / %s + 50 + 'px'
@@ -83,27 +83,33 @@ def on_click(b):
         self._player.widget_general.children = list(self._player.widget_general.children) + [btn]
 
 
-def _sync_camera_pair(v0, v1):
-    def on_change_camera(change):
-        new = change['new']
-        owner = change['owner']
-        if owner == v0 and v0._ngl_focused:
-            v1.control.orient(v0._camera_orientation)
-        elif owner == v1 and v1._ngl_focused:
-            v0.control.orient(v1._camera_orientation)
+# def _sync_camera_pair(v0, v1):
+#     v0._set_sync_camera(v0
+#     def on_change_camera(change):
+#         new = change['new']
+#         owner = change['owner']
+#         if owner == v0 and v0._ngl_focused:
+#             v1.control.orient(v0._camera_orientation)
+#         elif owner == v1 and v1._ngl_focused:
+#             v0.control.orient(v1._camera_orientation)
+# 
+#     v0.observe(on_change_camera, '_camera_orientation')
+#     v1.observe(on_change_camera, '_camera_orientation')
 
-    v0.observe(on_change_camera, '_camera_orientation')
-    v1.observe(on_change_camera, '_camera_orientation')
 
+# def _sync_all(views):
+#     from itertools import combinations
+#     views = [v for v in views if isinstance(v, NGLWidget)]
+#     for v0, v1 in combinations(views, 2):
+#         _sync_camera_pair(v0, v1)
 
 def _sync_all(views):
-    from itertools import combinations
-    views = [v for v in views if isinstance(v, NGLWidget)]
-    for v0, v1 in combinations(views, 2):
-        _sync_camera_pair(v0, v1)
+    views = {v for v in views if isinstance(v, NGLWidget)}
+    for v in views:
+        v._set_sync_camera(views)
 
 
-def grid_view(views, n_columns, grid_class=GridBoxViewAndPlayer, fullscreen=False, sync_camera=True,
+def grid_view(views, n_columns, grid_class=GridBoxViewAndPlayer, fullscreen=False, sync_camera=False,
         **grid_kwargs):
     if sync_camera:
         _sync_all(views)

diff --git a/nglview/static/index.js b/nglview/static/index.js
diff --git a/nglview/static/index.js.map b/nglview/static/index.js.map
diff --git a/nglview/tests/test_widget.py b/nglview/tests/test_widget.py
@@ -217,7 +217,7 @@ class DummWidget():
     view.display(gui=False)
     view.display(gui=True, use_box=True)
     view._set_sync_frame()
-    view._set_sync_camera()
+    view._set_sync_camera([view])
     view._set_selection('.CA')
     view.color_by('atomindex')
     representations = [dict(type='cartoon', params=dict())]
@@ -1077,7 +1077,7 @@ def test_queuing_messages():
     view.download_image()
     view
     assert [f._method_name for f in view._ngl_displayed_callbacks_before_loaded] == \
-           ['setUnSyncCamera', 'setUnSyncFrame', 'setDelay',
+           ['setUnSyncFrame', 'setDelay',
             'loadFile',
             '_downloadImage']
     assert [f._method_name for f in view._ngl_displayed_callbacks_after_loaded] == \