Merge pull request #2011 from paulkaplan/consume-monitor-mode

Consume monitor mode and position from VM

src/components/monitor-list/monitor-list.jsx

@@ -16,10 +16,13 @@ const MonitorList = props => (
             <Monitor
                 id={monitorData.id}
                 key={monitorData.id}
+                mode={monitorData.mode}
                 opcode={monitorData.opcode}
                 params={monitorData.params}
                 spriteName={monitorData.spriteName}
                 value={monitorData.value}
+                x={monitorData.x}
+                y={monitorData.y}
                 onDragEnd={props.onMonitorChange}
             />
         ))}

src/components/monitor/monitor.css

@@ -45,9 +45,9 @@
 }
 
 .large-value {
-    min-height: 1.5rem;
+    min-height: 1.4rem;
     min-width: 3rem;
-    padding: 0.25rem;
+    padding: 0.1rem 0.25rem;
     text-align: center;
     color: white;
     font-size: 1rem;

src/components/monitor/monitor.jsx

@@ -19,7 +19,7 @@ const categories = {
     list: '#FC662C'
 };
 
-const types = {
+const modes = {
     default: DefaultMonitor,
     large: LargeMonitor
 };
@@ -34,9 +34,9 @@ const MonitorComponent = props => (
             <Box
                 className={styles.monitorContainer}
                 componentRef={props.componentRef}
-                onDoubleClick={props.onNextType}
+                onDoubleClick={props.onNextMode}
             >
-                {types[props.type]({
+                {(modes[props.mode] || modes.default)({ // Use default until other modes arrive
                     categoryColor: categories[props.category],
                     label: props.label,
                     value: props.value
@@ -44,14 +44,14 @@ const MonitorComponent = props => (
             </Box>
         </Draggable>
         <ContextMenu id={`monitor-${props.label}`}>
-            <MenuItem onClick={props.onSetTypeToDefault}>
+            <MenuItem onClick={props.onSetModeToDefault}>
                 <FormattedMessage
                     defaultMessage="normal readout"
                     description="Menu item to switch to the default monitor"
                     id="gui.monitor.contextMenu.default"
                 />
             </MenuItem>
-            <MenuItem onClick={props.onSetTypeToLarge}>
+            <MenuItem onClick={props.onSetModeToLarge}>
                 <FormattedMessage
                     defaultMessage="large readout"
                     description="Menu item to switch to the large monitor"
@@ -65,17 +65,17 @@ const MonitorComponent = props => (
 
 MonitorComponent.categories = categories;
 
-const monitorTypes = Object.keys(types);
+const monitorModes = Object.keys(modes);
 
 MonitorComponent.propTypes = {
     category: PropTypes.oneOf(Object.keys(categories)),
     componentRef: PropTypes.func.isRequired,
     label: PropTypes.string.isRequired,
+    mode: PropTypes.oneOf(monitorModes),
     onDragEnd: PropTypes.func.isRequired,
-    onNextType: PropTypes.func.isRequired,
-    onSetTypeToDefault: PropTypes.func.isRequired,
-    onSetTypeToLarge: PropTypes.func.isRequired,
-    type: PropTypes.oneOf(monitorTypes),
+    onNextMode: PropTypes.func.isRequired,
+    onSetModeToDefault: PropTypes.func.isRequired,
+    onSetModeToLarge: PropTypes.func.isRequired,
     value: PropTypes.oneOfType([
         PropTypes.string,
         PropTypes.number])
@@ -83,10 +83,10 @@ MonitorComponent.propTypes = {
 
 MonitorComponent.defaultProps = {
     category: 'data',
-    type: 'default'
+    mode: 'default'
 };
 
 export {
     MonitorComponent as default,
-    monitorTypes
+    monitorModes
 };

src/containers/monitor.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import monitorAdapter from '../lib/monitor-adapter.js';
-import MonitorComponent, {monitorTypes} from '../components/monitor/monitor.jsx';
+import MonitorComponent, {monitorModes} from '../components/monitor/monitor.jsx';
 import {addMonitorRect, getInitialPosition, resizeMonitorRect, removeMonitorRect} from '../reducers/monitor-layout';
 
 import {connect} from 'react-redux';
@@ -13,15 +13,15 @@ class Monitor extends React.Component {
         super(props);
         bindAll(this, [
             'handleDragEnd',
-            'handleNextType',
-            'handleSetTypeToDefault',
-            'handleSetTypeToLarge',
+            'handleNextMode',
+            'handleSetModeToDefault',
+            'handleSetModeToLarge',
             'setElement'
         ]);
 
-        // @todo this eventually will be stored in the VM
+        // @todo consume from VM, but need to store until there are APIs to update vm
         this.state = {
-            type: 'default'
+            mode: props.mode || 'default'
         };
     }
     componentDidMount () {
@@ -67,17 +67,17 @@ class Monitor extends React.Component {
             parseInt(this.element.style.top, 10) + y
         );
     }
-    handleNextType () {
-        // @todo the type list needs to be filtered for current available types
-        // i.e. no sliders for read-only monitors, only list type for list vars.
-        const typeIndex = monitorTypes.indexOf(this.state.type);
-        this.setState({type: monitorTypes[(typeIndex + 1) % monitorTypes.length]});
+    handleNextMode () {
+        // @todo the mode list needs to be filtered for current available modes
+        // i.e. no sliders for read-only monitors, only list for list vars.
+        const modeIndex = monitorModes.indexOf(this.state.mode);
+        this.setState({mode: monitorModes[(modeIndex + 1) % monitorModes.length]});
     }
-    handleSetTypeToDefault () {
-        this.setState({type: 'default'});
+    handleSetModeToDefault () {
+        this.setState({mode: 'default'});
     }
-    handleSetTypeToLarge () {
-        this.setState({type: 'large'});
+    handleSetModeToLarge () {
+        this.setState({mode: 'large'});
     }
     setElement (monitorElt) {
         this.element = monitorElt;
@@ -88,11 +88,11 @@ class Monitor extends React.Component {
             <MonitorComponent
                 componentRef={this.setElement}
                 {...monitorProps}
-                type={this.state.type}
+                mode={this.state.mode}
                 onDragEnd={this.handleDragEnd}
-                onNextType={this.handleNextType}
-                onSetTypeToDefault={this.handleSetTypeToDefault}
-                onSetTypeToLarge={this.handleSetTypeToLarge}
+                onNextMode={this.handleNextMode}
+                onSetModeToDefault={this.handleSetModeToDefault}
+                onSetModeToLarge={this.handleSetModeToLarge}
             />
         );
     }
@@ -101,6 +101,7 @@ class Monitor extends React.Component {
 Monitor.propTypes = {
     addMonitorRect: PropTypes.func.isRequired,
     id: PropTypes.string.isRequired,
+    mode: PropTypes.oneOf(['default', 'slider', 'large', 'list']),
     monitorLayout: PropTypes.shape({
         monitors: PropTypes.object,
         savedMonitorPositions: PropTypes.object