diff --git a/src/components/monitor-list/monitor-list.css b/src/components/monitor-list/monitor-list.css
index 6ee78ce05ed030cfce98c4331f0c56f3905d70a9..272fb28a66dbed2c3655585faf3b8fb70a56bda7 100644
--- a/src/components/monitor-list/monitor-list.css
+++ b/src/components/monitor-list/monitor-list.css
@@ -1,5 +1,10 @@
.monitor-list {
- width: 100%;
- height: 100%;
+ /* Width/height are set by the component, margin: auto centers in fullscreen */
+ margin: auto;
pointer-events: none;
}
+
+.monitor-list-scaler {
+ /* Scaling for monitors should happen from the top left */
+ transform-origin: left top;
+}
diff --git a/src/components/monitor-list/monitor-list.jsx b/src/components/monitor-list/monitor-list.jsx
index 07b6a817be90020956891f340b73a344f5b21afd..2af0a8fb84149c335b7e6e57120cf54b3e64619f 100644
--- a/src/components/monitor-list/monitor-list.jsx
+++ b/src/components/monitor-list/monitor-list.jsx
@@ -7,37 +7,62 @@ import {OrderedMap} from 'immutable';
import styles from './monitor-list.css';
+const stageSizeToTransform = ({width, height, widthDefault, heightDefault}) => {
+ const scaleX = width / widthDefault;
+ const scaleY = height / heightDefault;
+ return `scale(${scaleX},${scaleY})`;
+};
+
const MonitorList = props => (
<Box
// Use static `monitor-overlay` class for bounds of draggables
className={classNames(styles.monitorList, 'monitor-overlay')}
+ style={{
+ width: props.stageSize.width,
+ height: props.stageSize.height
+ }}
>
- {props.monitors.valueSeq().filter(m => m.visible)
- .map(monitorData => (
- <Monitor
- height={monitorData.height}
- id={monitorData.id}
- key={monitorData.id}
- max={monitorData.sliderMax}
- min={monitorData.sliderMin}
- mode={monitorData.mode}
- opcode={monitorData.opcode}
- params={monitorData.params}
- spriteName={monitorData.spriteName}
- targetId={monitorData.targetId}
- value={monitorData.value}
- width={monitorData.width}
- x={monitorData.x}
- y={monitorData.y}
- onDragEnd={props.onMonitorChange}
- />
- ))}
+ <Box
+ className={styles.monitorListScaler}
+ style={{
+ transform: stageSizeToTransform(props.stageSize)
+ }}
+ >
+ {props.monitors.valueSeq().filter(m => m.visible)
+ .map(monitorData => (
+ <Monitor
+ draggable={props.draggable}
+ height={monitorData.height}
+ id={monitorData.id}
+ key={monitorData.id}
+ max={monitorData.sliderMax}
+ min={monitorData.sliderMin}
+ mode={monitorData.mode}
+ opcode={monitorData.opcode}
+ params={monitorData.params}
+ spriteName={monitorData.spriteName}
+ targetId={monitorData.targetId}
+ value={monitorData.value}
+ width={monitorData.width}
+ x={monitorData.x}
+ y={monitorData.y}
+ onDragEnd={props.onMonitorChange}
+ />
+ ))}
+ </Box>
</Box>
);
MonitorList.propTypes = {
+ draggable: PropTypes.bool.isRequired,
monitors: PropTypes.instanceOf(OrderedMap),
- onMonitorChange: PropTypes.func.isRequired
+ onMonitorChange: PropTypes.func.isRequired,
+ stageSize: PropTypes.shape({
+ width: PropTypes.number,
+ height: PropTypes.number,
+ widthDefault: PropTypes.number,
+ heightDefault: PropTypes.number
+ }).isRequired
};
export default MonitorList;
diff --git a/src/components/monitor/list-monitor-scroller.jsx b/src/components/monitor/list-monitor-scroller.jsx
index fd6da9babbef90a2d491e51dca96968b67461c62..a62c0c0e2ae7aa2279a00205071af853a222d34b 100644
--- a/src/components/monitor/list-monitor-scroller.jsx
+++ b/src/components/monitor/list-monitor-scroller.jsx
@@ -20,7 +20,7 @@ class ListMonitorScroller extends React.Component {
}
noRowsRenderer () {
return (
- <div className={styles.listEmpty}>
+ <div className={classNames(styles.listRow, styles.listEmpty)}>
{'(empty)' /* TODO waiting for design before translation */}
</div>
);
@@ -37,9 +37,9 @@ class ListMonitorScroller extends React.Component {
className={styles.listValue}
dataIndex={index}
style={{background: this.props.categoryColor}}
- onClick={this.handleEventFactory(index)}
+ onClick={this.props.draggable ? this.handleEventFactory(index) : null}
>
- {this.props.activeIndex === index ? (
+ {this.props.draggable && this.props.activeIndex === index ? (
<div className={styles.inputWrapper}>
<input
autoFocus
@@ -93,6 +93,7 @@ ListMonitorScroller.propTypes = {
activeIndex: PropTypes.number,
activeValue: PropTypes.string,
categoryColor: PropTypes.string,
+ draggable: PropTypes.bool,
height: PropTypes.number,
onActivate: PropTypes.func,
onDeactivate: PropTypes.func,
diff --git a/src/components/monitor/list-monitor.jsx b/src/components/monitor/list-monitor.jsx
index a29afa283a395da93256321e30df72cd5e379dd9..c541980559124e24be7d8b01d30fb53be176315d 100644
--- a/src/components/monitor/list-monitor.jsx
+++ b/src/components/monitor/list-monitor.jsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
import styles from './monitor.css';
import ListMonitorScroller from './list-monitor-scroller.jsx';
-const ListMonitor = ({label, width, height, value, onResizeMouseDown, onAdd, ...rowProps}) => (
+const ListMonitor = ({draggable, label, width, height, value, onResizeMouseDown, onAdd, ...rowProps}) => (
<div
className={styles.listMonitor}
style={{
@@ -17,6 +17,7 @@ const ListMonitor = ({label, width, height, value, onResizeMouseDown, onAdd, ...
</div>
<div className={styles.listBody}>
<ListMonitorScroller
+ draggable={draggable}
height={height}
values={value}
width={width}
@@ -26,7 +27,7 @@ const ListMonitor = ({label, width, height, value, onResizeMouseDown, onAdd, ...
<div className={styles.listFooter}>
<div
className={styles.addButton}
- onClick={onAdd}
+ onClick={draggable ? onAdd : null}
>
{'+' /* TODO waiting on asset */}
</div>
@@ -35,7 +36,7 @@ const ListMonitor = ({label, width, height, value, onResizeMouseDown, onAdd, ...
</div>
<div
className={classNames(styles.resizeHandle, 'no-drag')}
- onMouseDown={onResizeMouseDown}
+ onMouseDown={draggable ? onResizeMouseDown : null}
>
{'=' /* TODO waiting on asset */}
</div>
@@ -46,6 +47,7 @@ const ListMonitor = ({label, width, height, value, onResizeMouseDown, onAdd, ...
ListMonitor.propTypes = {
activeIndex: PropTypes.number,
categoryColor: PropTypes.string.isRequired,
+ draggable: PropTypes.bool.isRequired,
height: PropTypes.number,
label: PropTypes.string.isRequired,
onActivate: PropTypes.func,
diff --git a/src/components/monitor/monitor.css b/src/components/monitor/monitor.css
index 348f11e0cdee8f91d279438f12c6a2a3548573bc..c8b7f3108796331a93df8090ccb0c507289782e0 100644
--- a/src/components/monitor/monitor.css
+++ b/src/components/monitor/monitor.css
@@ -93,6 +93,7 @@
align-items: center;
padding: 2px;
flex-shrink: 0;
+ transform: translateZ(0); /* Keep sharp when scaled */
}
.list-index {
@@ -137,6 +138,8 @@
.value-inner {
padding: 3px 5px;
min-height: 22px;
+ overflow: hidden; /* Don't let long values escape container */
+ user-select: text; /* Allow selecting list values for 2.0 compatibility, only relevant in player */
}
.list-input {
diff --git a/src/components/monitor/monitor.jsx b/src/components/monitor/monitor.jsx
index a45fe52142a26090245023d4e558b720fd3d95cb..c11034b29b3801a8899187c84b36b90fbc5467e9 100644
--- a/src/components/monitor/monitor.jsx
+++ b/src/components/monitor/monitor.jsx
@@ -37,6 +37,7 @@ const MonitorComponent = props => (
bounds=".monitor-overlay" // Class for monitor container
cancel=".no-drag" // Class used for slider input to prevent drag
defaultClassNameDragging={styles.dragging}
+ disabled={!props.draggable}
onStop={props.onDragEnd}
>
<Box
@@ -88,6 +89,7 @@ const monitorModes = Object.keys(modes);
MonitorComponent.propTypes = {
category: PropTypes.oneOf(Object.keys(categories)),
componentRef: PropTypes.func.isRequired,
+ draggable: PropTypes.bool.isRequired,
label: PropTypes.string.isRequired,
mode: PropTypes.oneOf(monitorModes),
onDragEnd: PropTypes.func.isRequired,
diff --git a/src/components/stage/stage.jsx b/src/components/stage/stage.jsx
index 37f12706b0cc0de16bb334dc1fc7f8b8d6e8d5d4..658114a608a69757c746b3f64da2ac43c6ce1ad3 100644
--- a/src/components/stage/stage.jsx
+++ b/src/components/stage/stage.jsx
@@ -21,6 +21,7 @@ const StageComponent = props => {
onDeactivateColorPicker,
question,
onQuestionAnswered,
+ useEditorDragStyle,
...boxProps
} = props;
@@ -47,7 +48,10 @@ const StageComponent = props => {
{...boxProps}
/>
<Box className={styles.monitorWrapper}>
- <MonitorList />
+ <MonitorList
+ draggable={useEditorDragStyle}
+ stageSize={stageSize}
+ />
</Box>
{isColorPicking && colorInfo ? (
<Box className={styles.colorPickerWrapper}>
@@ -98,6 +102,7 @@ StageComponent.propTypes = {
onDeactivateColorPicker: PropTypes.func,
onQuestionAnswered: PropTypes.func,
question: PropTypes.string,
+ useEditorDragStyle: PropTypes.bool,
width: PropTypes.number
};
StageComponent.defaultProps = {
diff --git a/src/containers/monitor.jsx b/src/containers/monitor.jsx
index b2480a41299ed592a11a0fa115eea292ba81c6fb..fd7a584adff0a78f9f74eaef217b22c4b2b235f0 100644
--- a/src/containers/monitor.jsx
+++ b/src/containers/monitor.jsx
@@ -103,6 +103,7 @@ class Monitor extends React.Component {
<MonitorComponent
componentRef={this.setElement}
{...monitorProps}
+ draggable={this.props.draggable}
height={this.props.height}
max={this.props.max}
min={this.props.min}
@@ -121,6 +122,7 @@ class Monitor extends React.Component {
Monitor.propTypes = {
addMonitorRect: PropTypes.func.isRequired,
+ draggable: PropTypes.bool,
height: PropTypes.number,
id: PropTypes.string.isRequired,
max: PropTypes.number,
diff --git a/src/containers/stage.jsx b/src/containers/stage.jsx
index ee3154a2207aa8769815a78950044a6ec2cbf768..b66efa2c5090ec70fb54f0c1a73340ea41a7aa66 100644
--- a/src/containers/stage.jsx
+++ b/src/containers/stage.jsx
@@ -363,7 +363,6 @@ class Stage extends React.Component {
const {
vm, // eslint-disable-line no-unused-vars
onActivateColorPicker, // eslint-disable-line no-unused-vars
- useEditorDragStyle, // eslint-disable-line no-unused-vars
...props
} = this.props;
return (