From 6fc1ffda500632e847a2f6d14c934b6bc14b72b3 Mon Sep 17 00:00:00 2001
From: Forrest Li <forrest.li@kitware.com>
Date: Thu, 3 May 2018 10:04:34 -0400
Subject: [PATCH] fix(MainView): Use a remote control for triggering events on
 MainView

Fixes regression where the MobileOverlay HOC prevents access to the
underlying MainView instance. This is a general solution to wrapping the
MainView with HOCs.
---
 Sources/MainView.js      | 13 +++++++++++++
 Sources/RemoteControl.js | 24 ++++++++++++++++++++++++
 Sources/index.js         | 13 ++++++++-----
 3 files changed, 45 insertions(+), 5 deletions(-)
 create mode 100644 Sources/RemoteControl.js

diff --git a/Sources/MainView.js b/Sources/MainView.js
index bb9dbcfc..5cef465a 100644
--- a/Sources/MainView.js
+++ b/Sources/MainView.js
@@ -36,6 +36,18 @@ export default class MainView extends React.Component {
     this.forceUpdate = this.forceUpdate.bind(this);
   }
 
+  componentDidMount() {
+    const { remoteControl } = this.props;
+    remoteControl.addTrigger('toggleControl', this.onToggleControl);
+    remoteControl.addTrigger('changeTabTo', this.controls.changeTabTo);
+  }
+
+  componentWillUnmount() {
+    const { remoteControl } = this.props;
+    remoteControl.delTrigger('toggleControl');
+    remoteControl.delTrigger('changeTabTo');
+  }
+
   onLayoutChange(key) {
     this.setState({ layout: key });
   }
@@ -131,6 +143,7 @@ export default class MainView extends React.Component {
 }
 
 MainView.propTypes = {
+  remoteControl: PropTypes.object.isRequired,
   proxyManager: PropTypes.object.isRequired,
 };
 
diff --git a/Sources/RemoteControl.js b/Sources/RemoteControl.js
new file mode 100644
index 00000000..2ef66e1b
--- /dev/null
+++ b/Sources/RemoteControl.js
@@ -0,0 +1,24 @@
+function RemoteControl() {
+  const triggers = Object.create(null);
+
+  const addTrigger = (name, triggerFunc) => {
+    triggers[name] = triggerFunc;
+  };
+
+  const delTrigger = (name) => delete triggers[name];
+
+  const trigger = (name, ...args) => {
+    if (name in triggers) {
+      return triggers[name](...args);
+    }
+    return undefined;
+  };
+
+  return {
+    addTrigger,
+    delTrigger,
+    trigger,
+  };
+}
+
+export default RemoteControl;
diff --git a/Sources/index.js b/Sources/index.js
index cf3d042f..07cdf2fc 100644
--- a/Sources/index.js
+++ b/Sources/index.js
@@ -16,6 +16,7 @@ import Configs from './config';
 import MainView from './MainView';
 import * as Controls from './controls';
 import ReaderFactory from './io/ReaderFactory';
+import RemoteControl from './RemoteControl';
 import UI from './ui';
 
 const MainComponent = UI.MobileOverlay(MainView);
@@ -33,10 +34,12 @@ export const { registerControlTab, unregisterControlTab } = Controls;
 export function createViewer(container, proxyConfig = null) {
   const { mode } = vtkURLExtract.extractURLParameters();
   const proxyConfiguration = proxyConfig || Configs[mode] || Configs.Generic;
-
   const proxyManager = vtkProxyManager.newInstance({ proxyConfiguration });
-  const mainView = ReactDOM.render(
-    <MainComponent proxyManager={proxyManager} />,
+
+  const remoteControl = RemoteControl();
+
+  ReactDOM.render(
+    <MainComponent remoteControl={remoteControl} proxyManager={proxyManager} />,
     container
   );
 
@@ -77,11 +80,11 @@ export function createViewer(container, proxyConfig = null) {
   }
 
   function toggleControl() {
-    mainView.onToggleControl();
+    remoteControl.trigger('toggleControl');
   }
 
   function updateTab(tabName = 'pipeline') {
-    mainView.controls.changeTabTo(tabName);
+    remoteControl.trigger('changeTabTo', tabName);
   }
 
   function processURLArgs() {