Merge pull request #73 from Kitware/remote_control

fix(MainView): Use a remote control for triggering events on MainView

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,
 };
 

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;

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() {