Add support for changing opacity

Author: martinRenou

ipygany/ipygany.py

@@ -364,6 +364,7 @@ class Scene(_GanyDOMWidgetBase):
     children = List(Instance(Block)).tag(sync=True, **widget_serialization)
 
     background_color = Color('#fff').tag(sync=True)
+    background_opacity = CFloat(0.).tag(sync=True)
 
     def __init__(self, children=[], **kwargs):
         """Construct a Scene."""

package-lock.json

@@ -52,7 +52,7 @@
     "@jupyter-widgets/base": "^1.1.10 || ^2",
     "backbone": "^1.4.0",
     "binary-search-tree": "^0.2.6",
-    "ganyjs": "^0.1.6",
+    "ganyjs": "^0.1.8",
     "three": "^0.110.0",
     "uuid": "^3.3.3"
   },

package.json

@@ -488,6 +488,7 @@ class SceneModel extends _GanyDOMWidgetModel {
       _model_name: SceneModel.model_name,
       _view_name: SceneModel.view_name,
       background_color: '#fff',
+      background_opacity: 0.,
       children: [],
     };
   }
@@ -501,6 +502,14 @@ class SceneModel extends _GanyDOMWidgetModel {
     this.on('change:children', this.updateChildren.bind(this));
   }
 
+  get backgroundColor () : string {
+    return this.get('background_color')
+  }
+
+  get backgroundOpacity () : number {
+    return this.get('background_opacity')
+  }
+
   private updateChildren () {
     // TODO: Remove old children
 
@@ -546,7 +555,8 @@ class SceneView extends DOMWidgetView {
 
     this.displayed.then(() => {
       this.renderer.initialize();
-      this.renderer.backgroundColor = this.model.get('background_color');
+      this.renderer.backgroundColor = this.model.backgroundColor
+      this.renderer.backgroundOpacity = this.model.backgroundOpacity;
 
       this.initEventListeners();
     });
@@ -555,7 +565,8 @@ class SceneView extends DOMWidgetView {
   initEventListeners () {
     window.addEventListener('resize', this.resize.bind(this), false);
 
-    this.model.on('change:background_color', () => { this.renderer.backgroundColor = this.model.get('background_color'); });
+    this.model.on('change:background_color', () => { this.renderer.backgroundColor = this.model.backgroundColor; });
+    this.model.on('change:background_opacity', () => { this.renderer.backgroundOpacity = this.model.backgroundOpacity; });
   }
 
   processPhosphorMessage (msg: Message) {