From 6c9cc8946afccf0baf3ab077186d2a7a7454d213 Mon Sep 17 00:00:00 2001 From: Markus Grigull Date: Wed, 15 Mar 2017 13:13:39 +0100 Subject: [PATCH] Add widgets at cursor drop position, widget zIndex Add context menu for zIndex ordering Bug: zIndex is only applied after saving visualization --- src/components/dialog/edit-simulator.js | 16 +---- src/components/dialog/edit-widget.js | 3 + src/components/dialog/new-simulator.js | 17 +----- src/components/dropzone.js | 12 +++- src/containers/simulators.js | 1 - src/containers/visualization.js | 61 +++++++++++++++++-- src/containers/widget.js | 5 +- .../simulator-data-data-manager.js | 10 +-- src/stores/simulator-data-store.js | 2 - src/styles/widgets.css | 2 + 10 files changed, 79 insertions(+), 50 deletions(-) diff --git a/src/components/dialog/edit-simulator.js b/src/components/dialog/edit-simulator.js index ad6fa39..2ed14fb 100644 --- a/src/components/dialog/edit-simulator.js +++ b/src/components/dialog/edit-simulator.js @@ -26,7 +26,6 @@ class EditSimulatorDialog extends Component { this.state = { name: '', - simulatorid: '1', endpoint: '', _id: '' }; @@ -47,7 +46,6 @@ class EditSimulatorDialog extends Component { resetState() { this.setState({ name: this.props.simulator.name, - simulatorid: this.props.simulator.simulatorid, endpoint: this.props.simulator.endpoint, _id: this.props.simulator._id }); @@ -55,7 +53,6 @@ class EditSimulatorDialog extends Component { validateForm(target) { // check all controls - var simulatorid = true; var endpoint = true; var name = true; @@ -63,20 +60,14 @@ class EditSimulatorDialog extends Component { name = false; } - // test if simulatorid is a number (in a string, not type of number) - if (!/^\d+$/.test(this.state.simulatorid)) { - simulatorid = false; - } - if (this.state.endpoint === '') { endpoint = false; } - this.valid = simulatorid && endpoint && name; + this.valid = endpoint && name; // return state to control if (target === 'name') return name ? "success" : "error"; - else if (target === 'simulatorid') return simulatorid ? "success" : "error"; else return endpoint ? "success" : "error"; } @@ -89,11 +80,6 @@ class EditSimulatorDialog extends Component { this.handleChange(e)} /> - - Simulator ID - this.handleChange(e)} /> - - Endpoint this.handleChange(e)} /> diff --git a/src/components/dialog/edit-widget.js b/src/components/dialog/edit-widget.js index 4f63349..8a7c3b0 100644 --- a/src/components/dialog/edit-widget.js +++ b/src/components/dialog/edit-widget.js @@ -15,6 +15,7 @@ import Dialog from './dialog'; import EditValueWidget from './edit-widget-value'; import EditPlotWidget from './edit-widget-plot'; import EditTableWidget from './edit-widget-table'; +import EditImageWidget from './edit-widget-image'; class EditWidgetDialog extends Component { static propTypes = { @@ -81,6 +82,8 @@ class EditWidgetDialog extends Component { widgetDialog = this.validateForm(id)} simulation={this.props.simulation} handleChange={(e, index) => this.handleChange(e, index)} />; } else if (this.props.widget.type === 'Table') { widgetDialog = this.validateForm(id)} simulation={this.props.simulation} handleChange={(e, index) => this.handleChange(e, index)} />; + } else if (this.props.widget.type === 'Image') { + widgetDialog = this.validateForm(id)} simulation={this.props.simulation} handleChange={(e, index) => this.handleChange(e, index)} />; } } diff --git a/src/components/dialog/new-simulator.js b/src/components/dialog/new-simulator.js index 87eb407..7726e85 100644 --- a/src/components/dialog/new-simulator.js +++ b/src/components/dialog/new-simulator.js @@ -25,7 +25,6 @@ class NewSimulatorDialog extends Component { this.state = { name: '', - simulatorid: '1', endpoint: '' }; } @@ -43,12 +42,11 @@ class NewSimulatorDialog extends Component { } resetState() { - this.setState({ name: '', simulatorid: '1', endpoint: '' }); + this.setState({ name: '', endpoint: '' }); } validateForm(target) { // check all controls - var simulatorid = true; var endpoint = true; var name = true; @@ -56,20 +54,14 @@ class NewSimulatorDialog extends Component { name = false; } - // test if simulatorid is a number (in a string, not type of number) - if (!/^\d+$/.test(this.state.simulatorid)) { - simulatorid = false; - } - if (this.state.endpoint === '') { endpoint = false; } - this.valid = simulatorid && endpoint && name; + this.valid = endpoint && name; // return state to control if (target === 'name') return name ? "success" : "error"; - else if (target === 'simulatorid') return simulatorid ? "success" : "error"; else return endpoint ? "success" : "error"; } @@ -82,11 +74,6 @@ class NewSimulatorDialog extends Component { this.handleChange(e)} /> - - Simulator ID - this.handleChange(e)} /> - - Endpoint this.handleChange(e)} /> diff --git a/src/components/dropzone.js b/src/components/dropzone.js index de2986d..88572d2 100644 --- a/src/components/dropzone.js +++ b/src/components/dropzone.js @@ -12,8 +12,14 @@ import { DropTarget } from 'react-dnd'; import classNames from 'classnames'; const dropzoneTarget = { - drop(props, monitor) { - props.onDrop(monitor.getItem()); + drop(props, monitor, component) { + // get drop position + var position = monitor.getSourceClientOffset(); + var dropzoneRect = component.wrapper.getBoundingClientRect(); + position.x -= dropzoneRect.left; + position.y -= dropzoneRect.top; + + props.onDrop(monitor.getItem(), position); } }; @@ -41,7 +47,7 @@ class Dropzone extends Component { }); return this.props.connectDropTarget( -
+
this.wrapper = wrapper}> {this.props.children}
); diff --git a/src/containers/simulators.js b/src/containers/simulators.js index 00ab175..6bbbe3d 100644 --- a/src/containers/simulators.js +++ b/src/containers/simulators.js @@ -79,7 +79,6 @@ class Simulators extends Component { - this.setState({ editModal: true, modalSimulator: this.state.simulators[index] })} onDelete={(index) => this.setState({ deleteModal: true, modalSimulator: this.state.simulators[index] })} /> diff --git a/src/containers/visualization.js b/src/containers/visualization.js index 3a58018..4c77bc2 100644 --- a/src/containers/visualization.js +++ b/src/containers/visualization.js @@ -99,15 +99,15 @@ class Visualization extends Component { }); } - handleDrop(item) { + handleDrop(item, position) { // add new widget var widget = { name: 'Name', type: item.name, width: 100, height: 100, - x: 0, - y: 0, + x: position.x, + y: position.y, z: 0 }; @@ -185,6 +185,54 @@ class Visualization extends Component { this.forceUpdate(); } + moveWidgetAbove(e, data) { + // increase z-Order + var visualization = this.state.visualization; + var widget = visualization.widgets[data.index] + widget.z++; + + visualization.widgets[data.index] = widget; + this.setState({ visualization: visualization }); + this.forceUpdate(); + } + + moveWidgetToFront(e, data) { + // increase z-Order + var visualization = this.state.visualization; + var widget = visualization.widgets[data.index] + widget.z = 100; + + visualization.widgets[data.index] = widget; + this.setState({ visualization: visualization }); + this.forceUpdate(); + } + + moveWidgetUnderneath(e, data) { + // decrease z-Order + var visualization = this.state.visualization; + var widget = visualization.widgets[data.index] + + widget.z--; + if (widget.z < 0) { + widget.z = 0; + } + + visualization.widgets[data.index] = widget; + this.setState({ visualization: visualization }); + this.forceUpdate(); + } + + moveWidgetToBack(e, data) { + // increase z-Order + var visualization = this.state.visualization; + var widget = visualization.widgets[data.index] + widget.z = 0; + + visualization.widgets[data.index] = widget; + this.setState({ visualization: visualization }); + this.forceUpdate(); + } + render() { return (
@@ -216,7 +264,7 @@ class Visualization extends Component {
} - this.handleDrop(item)} editing={this.state.editing}> + this.handleDrop(item, position)} editing={this.state.editing}> {this.state.visualization.widgets != null && this.state.visualization.widgets.map((widget, index) => ( this.widgetChange(w, i)} editing={this.state.editing} index={index} grid={this.state.grid} /> @@ -228,6 +276,11 @@ class Visualization extends Component { this.editWidget(e, data)}>Edit this.deleteWidget(e, data)}>Delete + + this.moveWidgetAbove(e, data)}>Move above + this.moveWidgetToFront(e, data)}>Move to front + this.moveWidgetUnderneath(e, data)}>Move underneath + this.moveWidgetToBack(e, data)}>Move to back ))} diff --git a/src/containers/widget.js b/src/containers/widget.js index 603691c..968e5f6 100644 --- a/src/containers/widget.js +++ b/src/containers/widget.js @@ -61,6 +61,8 @@ class Widget extends Component { } render() { + console.log('render widget ' + this.props.data.z + this.props.data.type); + // configure grid var grid = this.props.grid; if (!grid) { @@ -92,6 +94,7 @@ class Widget extends Component { onDragStop={(event, ui) => this.dragStop(event, ui)} moveGrid={grid} resizeGrid={grid} + zIndex={widget.z} > {element} @@ -100,7 +103,7 @@ class Widget extends Component { ); } else { return ( -
+
{element}
); diff --git a/src/data-managers/simulator-data-data-manager.js b/src/data-managers/simulator-data-data-manager.js index aded151..dec7f66 100644 --- a/src/data-managers/simulator-data-data-manager.js +++ b/src/data-managers/simulator-data-data-manager.js @@ -23,13 +23,9 @@ class SimulatorDataDataManager { this._sockets.close(); this._sockets[identifier] = WebsocketAPI.addSocket(endpoint, { onOpen: (event) => this.onOpen(event, identifier, signals), onClose: (event) => this.onClose(event, identifier), onMessage: (event) => this.onMessage(event, identifier) }); - - console.log('Modified socket'); } } else { this._sockets[identifier] = WebsocketAPI.addSocket(endpoint, { onOpen: (event) => this.onOpen(event, identifier, signals), onClose: (event) => this.onClose(event, identifier), onMessage: (event) => this.onMessage(event, identifier) }); - - console.log('New socket'); } } @@ -51,8 +47,6 @@ class SimulatorDataDataManager { onMessage(event, identifier) { var message = this.bufferToMessage(event.data); - //console.log(message); - AppDispatcher.dispatch({ type: 'simulatorData/data-changed', data: message, @@ -69,7 +63,6 @@ class SimulatorDataDataManager { let OFFSET_VERSION = 4; var bits = data.getUint8(0); - var simulator = data.getUint8(0x01); var endian = (bits >> OFFSET_ENDIAN) & 0x1 ? 0 : 1; var length = data.getUint16(0x02, endian); @@ -82,8 +75,7 @@ class SimulatorDataDataManager { length: length, sequence: data.getUint32(0x04, endian), timestamp: data.getUint32(0x08, endian) * 1e3 + data.getUint32(0x0C, endian) * 1e-6, - values: values, - simulator: simulator + values: values }; } } diff --git a/src/stores/simulator-data-store.js b/src/stores/simulator-data-store.js index 7e5145b..0568dcc 100644 --- a/src/stores/simulator-data-store.js +++ b/src/stores/simulator-data-store.js @@ -39,8 +39,6 @@ class SimulationDataStore extends ReduceStore { state[action.identifier].values.push([]); } - console.log('Socket opened'); - return state; case 'simulatorData/data-changed': diff --git a/src/styles/widgets.css b/src/styles/widgets.css index fb9a781..3ef8ecd 100644 --- a/src/styles/widgets.css +++ b/src/styles/widgets.css @@ -14,6 +14,8 @@ border: 1px solid lightgray; padding: 3px 6px; + + background-color: #fff; } .react-contextmenu {