Pass size down to vega and trigger a resize. view API not working, so…

… use brute force and redraw. jupyter-incubator#3 (c) Copyright IBM Corp. 2016
peller · Aug 17, 2016 · 7d8bcf7 · 7d8bcf7
1 parent def85d7
commit 7d8bcf7
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 10 deletions.
diff --git a/urth-viz-explorer.html b/urth-viz-explorer.html
@@ -5,7 +5,7 @@
 <link rel="import" href="../polymer/polymer.html">
 
 <link rel="import" href="../urth-core-behaviors/error-display-behavior.html">
-<!-- <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html"> -->
+<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
 <link rel="import" href="../urth-viz-behaviors/urth-viz-selection-behavior.html">
 
 <link rel="import" href="../iron-collapse/iron-collapse.html">
@@ -347,11 +347,20 @@
         ],
 
         behaviors: [
-//            Polymer.IronResizableBehavior,
+            Polymer.IronResizableBehavior,
             Urth.DisplayErrorBehavior,
             Urth.VizSelectionBehavior
         ],
 
+        listeners: {
+            'iron-resize': '_resize'
+        },
+
+        _resize: function() {
+            var vega = this.$$('urth-viz-vega');
+            if (vega) vega._resize();
+        },
+
         _closeEditDialog: function(event) {
             var specEditor = this.$['spec-editor'];
             if (event.detail.confirmed) {

diff --git a/urth-viz-vega.html b/urth-viz-vega.html
@@ -67,16 +67,21 @@
             },
 
             _specChanged: function(newSpec) {
-                if (!this.isReady) { return; }
+                if (!this.view) { return; }
 
                 this.render();
             },
 
             _resize: function() {
-                if (!this.view) { return; }
-
-                // TODO
-                this.view.update();
+                if (!this.view || !this.spec) { return; }
+
+                // spec width/height represent plot area, not total canvas.  Use fudge factor, for now,
+                // to account for labels, axes
+                var style = window.getComputedStyle(this.parentNode),
+                    width = Math.max(200, parseInt(style.width) - 150),
+                    height = Math.max(200, parseInt(style.height) - 150);
+//                this.view.width(width).height(height).update();
+                this.spec.width = width; this.spec.height = height; this.render();
             },
 
             created: function() {
@@ -129,14 +134,20 @@
                 }
             },
 
-            ready: function() {
+            attached: function() {
                 var display = window.getComputedStyle(this).display;
                 if (display === 'none' || document.readyState !== 'complete') {
-                    this.async(this.ready, 200);
+                    this.async(this.attached, 200);
                     return;
                 }
 
-                this.isReady = true;
+                var style = window.getComputedStyle(this.$.container),
+                    width = parseInt(style.width) || 200,
+                    height = parseInt(style.height) || 200;
+
+                this.spec.width = Math.max(200, parseInt(style.width) - 150);
+                this.spec.height = Math.max(200, parseInt(style.height) - 150);
+
                 this.render();
             },