Merge pull request #3124 from ibdafna/classic_nb_resize

Add event listener for resize events

Author: jasongrout

Diff for: examples/web1/webpack.config.js

@@ -1,4 +1,5 @@
 var path = require('path');
+var webpack = require('webpack');
 
 module.exports = {
   mode: 'development',
@@ -14,5 +15,13 @@ module.exports = {
       // jquery-ui loads some images
       { test: /\.(jpg|png|gif)$/, use: 'file-loader' }
     ]
-  }
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      // Needed for Blueprint. See https://github.com/palantir/blueprint/issues/4393
+      'process.env': '{}',
+      // Needed for various packages using cwd(), like the path polyfill
+      process: { cwd: () => '/' }
+    })
+  ]
 };

Diff for: examples/web2/webpack.config.js

@@ -1,4 +1,5 @@
 var path = require('path');
+var webpack = require('webpack');
 
 module.exports = {
   mode: 'development',
@@ -57,5 +58,13 @@ module.exports = {
         }
       }
     ]
-  }
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      // Needed for Blueprint. See https://github.com/palantir/blueprint/issues/4393
+      'process.env': '{}',
+      // Needed for various packages using cwd(), like the path polyfill
+      process: { cwd: () => '/' }
+    })
+  ]
 };

Diff for: examples/web3/package.json

@@ -18,7 +18,6 @@
     "@jupyter-widgets/controls": "^4.0.0-alpha.3",
     "@jupyter-widgets/html-manager": "^0.21.0-alpha.3",
     "@jupyterlab/services": "^6.0.0",
-    "@lumino/widgets": "^1.11.1",
     "codemirror": "^5.48.0",
     "font-awesome": "^4.7.0",
     "http-server": "^0.12.3"

Diff for: examples/web3/src/index.ts

@@ -3,7 +3,6 @@ import 'codemirror/lib/codemirror.css';
 import 'codemirror/mode/python/python';
 import 'font-awesome/css/font-awesome.css';
 import { WidgetManager } from './manager';
-import * as luminoWidget from '@lumino/widgets';
 
 import {
   KernelManager,
@@ -62,8 +61,7 @@ document.addEventListener('DOMContentLoaded', async function(event) {
       if (widgetData !== undefined && widgetData.version_major === 2) {
         const model = await manager.get_model(widgetData.model_id);
         if (model !== undefined) {
-          const view = await manager.create_view(model);
-          luminoWidget.Widget.attach(view.luminoWidget, widgetarea);
+          manager.display_view(manager.create_view(model), widgetarea);
         }
       }
     }

Diff for: examples/web3/webpack.config.js

@@ -1,5 +1,6 @@
 const postcss = require('postcss');
 var path = require('path');
+var webpack = require('webpack');
 
 module.exports = {
   mode: 'development',
@@ -88,5 +89,13 @@ module.exports = {
         }
       }
     ]
-  }
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      // Needed for Blueprint. See https://github.com/palantir/blueprint/issues/4393
+      'process.env': '{}',
+      // Needed for various packages using cwd(), like the path polyfill
+      process: { cwd: () => '/' }
+    })
+  ]
 };

Diff for: examples/web4/webpack.config.js

@@ -1,4 +1,5 @@
 var path = require('path');
+var webpack = require('webpack');
 
 module.exports = {
   mode: 'development',
@@ -57,4 +58,12 @@ module.exports = {
       },
     ],
   },
+  plugins: [
+    new webpack.DefinePlugin({
+      // Needed for Blueprint. See https://github.com/palantir/blueprint/issues/4393
+      'process.env': '{}',
+      // Needed for various packages using cwd(), like the path polyfill
+      process: { cwd: () => '/' }
+    })
+  ]
 };

Diff for: packages/html-manager/package.json

@@ -44,6 +44,7 @@
     "@jupyterlab/outputarea": "^3.0.0",
     "@jupyterlab/rendermime": "^3.0.0",
     "@jupyterlab/rendermime-interfaces": "^3.0.0",
+    "@lumino/messaging": "^1.3.3",
     "@lumino/widgets": "^1.11.1",
     "ajv": "^8.6.0",
     "jquery": "^3.1.1"

Diff for: packages/html-manager/src/htmlmanager.ts

@@ -5,6 +5,7 @@ import * as widgets from '@jupyter-widgets/controls';
 import * as base from '@jupyter-widgets/base';
 import * as outputWidgets from './output';
 import { ManagerBase } from '@jupyter-widgets/base-manager';
+import { MessageLoop } from '@lumino/messaging';
 
 import * as LuminoWidget from '@lumino/widgets';
 import {
@@ -32,6 +33,16 @@ export class HTMLManager extends ManagerBase {
       },
       0
     );
+
+    this._viewList = new Set<DOMWidgetView>();
+    window.addEventListener('resize', () => {
+      this._viewList.forEach(view => {
+        MessageLoop.postMessage(
+          view.luminoWidget,
+          LuminoWidget.Widget.ResizeMessage.UnknownSize
+        );
+      });
+    });
   }
   /**
    * Display the specified view. Element where the view is displayed
@@ -41,7 +52,13 @@ export class HTMLManager extends ManagerBase {
     view: Promise<DOMWidgetView> | DOMWidgetView,
     el: HTMLElement
   ): Promise<void> {
-    LuminoWidget.Widget.attach((await view).luminoWidget, el);
+    const v = await view;
+    LuminoWidget.Widget.attach(v.luminoWidget, el);
+
+    this._viewList.add(v);
+    v.once('remove', () => {
+      this._viewList.delete(v);
+    });
   }
 
   /**
@@ -118,4 +135,6 @@ export class HTMLManager extends ManagerBase {
   loader:
     | ((moduleName: string, moduleVersion: string) => Promise<any>)
     | undefined;
+
+  private _viewList: Set<DOMWidgetView>;
 }

Diff for: widgetsnbextension/src/extension.js

@@ -19,6 +19,7 @@ var mngr = require('./manager');
 require('./save_state');
 require('./embed_widgets');
 var LuminoWidget = require('@lumino/widgets');
+var LuminoMessaging = require('@lumino/messaging');
 
 /**
  * Create a widget manager for a kernel instance.
@@ -73,6 +74,16 @@ function register_events(Jupyter, events, outputarea) {
    * method when a view is removed from the page.
    */
   var views = {};
+
+  window.addEventListener('resize', () => {
+    Object.keys(views).forEach(viewKey => {
+      LuminoMessaging.MessageLoop.postMessage(
+        views[viewKey].luminoWidget,
+        LuminoWidget.Widget.ResizeMessage.UnknownSize
+      );
+    });
+  });
+
   var removeView = function(event, data) {
     var output = data.cell ? data.cell.output_area : data.output_area;
     var viewids = output ? output._jupyterWidgetViews : void 0;