From 97faaea8df5b32edf96e3177bdae6a59f8c74a6b Mon Sep 17 00:00:00 2001 From: Karishma Chadha Date: Sun, 21 Oct 2018 00:30:12 -0400 Subject: [PATCH 1/6] 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 fa0b929d4f15e75e42f42aa7aaccecafdecf7e1f Mon Sep 17 00:00:00 2001 From: Karishma Chadha Date: Sun, 21 Oct 2018 02:00:41 -0400 Subject: [PATCH 2/6] 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; From b9c12115e24da0c631e2b643f4378f6b44113804 Mon Sep 17 00:00:00 2001 From: Karishma Chadha Date: Fri, 9 Nov 2018 23:49:44 -0500 Subject: [PATCH 3/6] Update monitor height and width in the vm after a list monitor resize. --- src/containers/list-monitor.jsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/containers/list-monitor.jsx b/src/containers/list-monitor.jsx index f20fd614800..c8d06e511bd 100644 --- a/src/containers/list-monitor.jsx +++ b/src/containers/list-monitor.jsx @@ -6,6 +6,7 @@ import {connect} from 'react-redux'; import {getEventXY} from '../lib/touch-utils'; import {getVariableValue, setVariableValue} from '../lib/variable-utils'; import ListMonitorComponent from '../components/monitor/list-monitor.jsx'; +import {Map} from 'immutable'; class ListMonitor extends React.Component { constructor (props) { @@ -24,7 +25,6 @@ class ListMonitor extends React.Component { this.state = { activeIndex: null, activeValue: null, - // TODO These will need to be sent back to the VM for saving width: props.width || 100, height: props.height || 200 }; @@ -139,9 +139,13 @@ class ListMonitor extends React.Component { const onMouseUp = ev => { onMouseMove(ev); // Make sure width/height are up-to-date - // TODO send these new sizes to the VM for saving window.removeEventListener('mousemove', onMouseMove); window.removeEventListener('mouseup', onMouseUp); + this.props.vm.runtime.requestUpdateMonitor(Map({ + id: this.props.id, + height: this.state.height, + width: this.state.width + })); }; window.addEventListener('mousemove', onMouseMove); From 2ba2522af9c8523bc9573ee803d4195d701bd8ce Mon Sep 17 00:00:00 2001 From: Karishma Chadha Date: Fri, 9 Nov 2018 23:51:29 -0500 Subject: [PATCH 4/6] Default to extension color for monitors. --- src/components/monitor/monitor.jsx | 5 +++-- src/lib/opcode-labels.js | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/monitor/monitor.jsx b/src/components/monitor/monitor.jsx index 7be0875e5bc..7e6156ff005 100644 --- a/src/components/monitor/monitor.jsx +++ b/src/components/monitor/monitor.jsx @@ -19,7 +19,8 @@ const categories = { sound: '#CF63CF', looks: '#9966FF', motion: '#4C97FF', - list: '#FC662C' + list: '#FC662C', + extension: '#0FBD8C' }; const modes = { @@ -106,7 +107,7 @@ MonitorComponent.propTypes = { }; MonitorComponent.defaultProps = { - category: 'data', + category: 'extension', mode: 'default' }; diff --git a/src/lib/opcode-labels.js b/src/lib/opcode-labels.js index 03c7e6ef969..a916fba9397 100644 --- a/src/lib/opcode-labels.js +++ b/src/lib/opcode-labels.js @@ -238,7 +238,7 @@ class OpcodeLabels { getLabel (opcode) { if (opcode in this._opcodeMap) return this._opcodeMap[opcode]; return { - category: 'data', + category: 'extension', label: opcode }; } From 1a3819c61ce7df3f9d88140833803d6064a364a8 Mon Sep 17 00:00:00 2001 From: Karishma Chadha Date: Wed, 14 Nov 2018 11:08:58 -0500 Subject: [PATCH 5/6] Remove monitor mode from state and use props instead. --- src/containers/monitor.jsx | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/src/containers/monitor.jsx b/src/containers/monitor.jsx index 73a0ac9deb2..0a02e826856 100644 --- a/src/containers/monitor.jsx +++ b/src/containers/monitor.jsx @@ -32,11 +32,6 @@ class Monitor extends React.Component { 'handleSetModeToSlider', 'setElement' ]); - - // @todo consume from VM, but need to store until there are APIs to update vm - this.state = { - mode: props.mode || 'default' - }; } componentDidMount () { let rect; @@ -101,30 +96,26 @@ class Monitor extends React.Component { } handleNextMode () { const modes = availableModes(this.props.opcode); - const modeIndex = modes.indexOf(this.state.mode); + const modeIndex = modes.indexOf(this.props.mode); 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' @@ -144,7 +135,7 @@ class Monitor extends React.Component { height={this.props.height} max={this.props.max} min={this.props.min} - mode={this.state.mode} + mode={this.props.mode} targetId={this.props.targetId} width={this.props.width} onDragEnd={this.handleDragEnd} From 4ec54e39df1d009a290c1135b9268528e6df0671 Mon Sep 17 00:00:00 2001 From: Karishma Chadha Date: Wed, 14 Nov 2018 14:38:58 -0500 Subject: [PATCH 6/6] Update scratch-vm. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 0b5f8d28805..32c30f2431a 100644 --- a/package.json +++ b/package.json @@ -107,7 +107,7 @@ "scratch-render": "0.1.0-prerelease.20181102130522", "scratch-storage": "1.2.0", "scratch-svg-renderer": "0.2.0-prerelease.20181101210634", - "scratch-vm": "0.2.0-prerelease.20181113174211", + "scratch-vm": "0.2.0-prerelease.20181114192419", "selenium-webdriver": "3.6.0", "startaudiocontext": "1.2.1", "style-loader": "^0.23.0",