From b6df17efd0e5ced2d9adb9342d1d946c669ba586 Mon Sep 17 00:00:00 2001
From: Karishma Chadha <kchadha@media.mit.edu>
Date: Sun, 21 Oct 2018 00:30:12 -0400
Subject: [PATCH 1/2] Save and load monitor position information. When the
 monitor is auto-positioned or dragged, a new location should be recorded in
 the monitor data.

---
 src/containers/monitor.jsx | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/containers/monitor.jsx b/src/containers/monitor.jsx
index 2f04cb51b7f..0a4d0bc6406 100644
--- a/src/containers/monitor.jsx
+++ b/src/containers/monitor.jsx
@@ -7,6 +7,7 @@ import MonitorComponent, {monitorModes} from '../components/monitor/monitor.jsx'
 import {addMonitorRect, getInitialPosition, resizeMonitorRect, removeMonitorRect} from '../reducers/monitor-layout';
 
 import {connect} from 'react-redux';
+import {Map} from 'immutable';
 import VM from 'scratch-vm';
 
 const availableModes = opcode => (
@@ -39,8 +40,14 @@ class Monitor extends React.Component {
     }
     componentDidMount () {
         let rect;
+
+        const isNum = num => typeof num === 'number' && !isNaN(num);
+
         // Load the VM provided position if not loaded already
-        if (this.props.x && this.props.y && !this.props.monitorLayout.savedMonitorPositions[this.props.id]) {
+        // If a monitor has numbers for the x and y positions, load the saved position.
+        // Otherwise, auto-position the monitor.
+        if (isNum(this.props.x) && isNum(this.props.y) &&
+            !this.props.monitorLayout.savedMonitorPositions[this.props.id]) {
             rect = {
                 upperStart: {x: this.props.x, y: this.props.y},
                 lowerEnd: {x: this.props.x + this.element.offsetWidth, y: this.props.y + this.element.offsetHeight}
@@ -50,6 +57,11 @@ class Monitor extends React.Component {
             rect = getInitialPosition(
                 this.props.monitorLayout, this.props.id, this.element.offsetWidth, this.element.offsetHeight);
             this.props.addMonitorRect(this.props.id, rect);
+            this.props.vm.runtime.requestUpdateMonitor(Map({
+                id: this.props.id,
+                x: rect.upperStart.x,
+                y: rect.upperStart.y
+            }));
         }
         this.element.style.top = `${rect.upperStart.y}px`;
         this.element.style.left = `${rect.upperStart.x}px`;
@@ -74,11 +86,18 @@ class Monitor extends React.Component {
         this.props.removeMonitorRect(this.props.id);
     }
     handleDragEnd (e, {x, y}) {
+        const newX = parseInt(this.element.style.left, 10) + x;
+        const newY = parseInt(this.element.style.top, 10) + y;
         this.props.onDragEnd(
             this.props.id,
-            parseInt(this.element.style.left, 10) + x,
-            parseInt(this.element.style.top, 10) + y
+            newX,
+            newY
         );
+        this.props.vm.runtime.requestUpdateMonitor(Map({
+            id: this.props.id,
+            x: newX,
+            y: newY
+        }));
     }
     handleNextMode () {
         const modes = availableModes(this.props.opcode);

From f433465c2d00933f13ab28feafd99bf9cdab0c74 Mon Sep 17 00:00:00 2001
From: Karishma Chadha <kchadha@media.mit.edu>
Date: Sun, 21 Oct 2018 02:00:41 -0400
Subject: [PATCH 2/2] Log updates to a monitor's display mode in the VM.

---
 src/containers/monitor.jsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/containers/monitor.jsx b/src/containers/monitor.jsx
index 0a4d0bc6406..73a0ac9deb2 100644
--- a/src/containers/monitor.jsx
+++ b/src/containers/monitor.jsx
@@ -102,16 +102,33 @@ class Monitor extends React.Component {
     handleNextMode () {
         const modes = availableModes(this.props.opcode);
         const modeIndex = modes.indexOf(this.state.mode);
-        this.setState({mode: modes[(modeIndex + 1) % modes.length]});
+        const newMode = modes[(modeIndex + 1) % modes.length];
+        this.setState({mode: newMode});
+        this.props.vm.runtime.requestUpdateMonitor(Map({
+            id: this.props.id,
+            mode: newMode
+        }));
     }
     handleSetModeToDefault () {
         this.setState({mode: 'default'});
+        this.props.vm.runtime.requestUpdateMonitor(Map({
+            id: this.props.id,
+            mode: 'default'
+        }));
     }
     handleSetModeToLarge () {
         this.setState({mode: 'large'});
+        this.props.vm.runtime.requestUpdateMonitor(Map({
+            id: this.props.id,
+            mode: 'large'
+        }));
     }
     handleSetModeToSlider () {
         this.setState({mode: 'slider'});
+        this.props.vm.runtime.requestUpdateMonitor(Map({
+            id: this.props.id,
+            mode: 'slider'
+        }));
     }
     setElement (monitorElt) {
         this.element = monitorElt;