Add support for displaying gcode on a non-3D view

cncjs · Feb 11, 2017 · eb79f67 · eb79f67
1 parent 82abe35
commit eb79f67
Show file tree

Hide file tree

Showing 5 changed files with 140 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -126,6 +126,7 @@
     "bootstrap": "~3.3.7",
     "chalk": "~1.1.3",
     "classnames": "~2.2.5",
+    "clusterize.js": "~0.17.2",
     "colornames": "~1.1.1",
     "commander": "~2.9.0",
     "compression": "~1.6.2",

diff --git a/src/web/components/Clusterize/index.jsx b/src/web/components/Clusterize/index.jsx
@@ -0,0 +1,80 @@
+import React, { Component, PropTypes } from 'react';
+import ReactDOM from 'react-dom';
+import Clusterize from 'clusterize.js';
+import i18n from '../../lib/i18n';
+
+export default class extends Component {
+    static propTypes = {
+        rows: PropTypes.array,
+        scrollTop: PropTypes.number
+    };
+    static defaultProps = {
+        rows: [],
+        scrollTop: 0
+    };
+
+    clusterize = null;
+    scrollElem = null;
+    contentElem = null;
+
+    componentDidMount() {
+        const scrollElem = ReactDOM.findDOMNode(this.scrollElem);
+        const contentElem = ReactDOM.findDOMNode(this.contentElem);
+
+        this.clusterize = new Clusterize({
+            rows: this.props.rows,
+            scrollElem: scrollElem,
+            contentElem: contentElem,
+            show_no_data_row: true,
+            no_data_text: i18n._('No data to display')
+        });
+    }
+    componentWillUnmount() {
+        if (this.clusterize) {
+            this.clusterize.destroy(true);
+            this.clusterize = null;
+        }
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+        if (nextProps.rows !== this.props.rows) {
+            return true;
+        }
+
+        return false;
+    }
+    componentWillReceiveProps(nextProps) {
+        if (nextProps.rows.length === 0) {
+            this.clusterize.clear();
+            return;
+        }
+        if (nextProps.rows !== this.props.rows) {
+            this.clusterize && this.clusterize.update(nextProps.rows);
+        }
+        if (nextProps.scrollTop !== this.props.scrollTop) {
+            this.scrollElem.scrollTop = nextProps.scrollTop;
+        }
+    }
+    render() {
+        const { className, style } = this.props;
+
+        return (
+            <div
+                ref={node => {
+                    this.scrollElem = node;
+                }}
+                className={className}
+                style={{
+                    height: '100%',
+                    overflow: 'auto',
+                    ...style
+                }}
+            >
+                <div
+                    ref={node => {
+                        this.contentElem = node;
+                    }}
+                />
+            </div>
+        );
+    }
+}
diff --git a/src/web/widgets/Visualizer/Dashboard.jsx b/src/web/widgets/Visualizer/Dashboard.jsx
@@ -3,6 +3,7 @@ import shallowCompare from 'react-addons-shallow-compare';
 import { ProgressBar } from 'react-bootstrap';
 import Anchor from '../../components/Anchor';
 import Panel from '../../components/Panel';
+import Clusterize from '../../components/Clusterize';
 import i18n from '../../lib/i18n';
 import { formatBytes } from '../../lib/numeral';
 import styles from './index.styl';
@@ -13,6 +14,17 @@ class Dashboard extends Component {
         state: PropTypes.object
     };
 
+    lines = [];
+
+    componentWillReceiveProps(nextProps) {
+        if (nextProps.state.gcode.content !== this.props.state.gcode.content) {
+            this.lines = nextProps.state.gcode.content.split('\n')
+                .filter(line => line.trim().length > 0)
+                .map((line, index) => (
+                `<div class="${styles.line}"><span class="${styles.label} ${styles.labelDefault}">${index + 1}</span> ${line}</div>`
+            ));
+        }
+    }
     shouldComponentUpdate(nextProps, nextState) {
         return shallowCompare(this, nextProps, nextState);
     }
@@ -38,6 +50,8 @@ class Dashboard extends Component {
         }(state));
         const filesize = state.gcode.ready ? formatBytes(state.gcode.size, 0) : '';
         const { sent = 0, total = 0 } = state.gcode;
+        const rowHeight = 20;
+        const scrollTop = (sent > 0) ? (sent - 1) * rowHeight : 0;
 
         return (
             <Panel className={styles.dashboard}>
@@ -47,12 +61,12 @@ class Dashboard extends Component {
                 <Panel.Body>
                     <div className="row no-gutters">
                         <div className="col col-xs-10">
-                            <div className="pull-left">
+                            <div className="pull-left text-nowrap">
                                 {filename}
                             </div>
                         </div>
                         <div className="col col-xs-2">
-                            <div className="pull-right">
+                            <div className="pull-right text-nowrap">
                                 {filesize}
                             </div>
                         </div>
@@ -70,6 +84,13 @@ class Dashboard extends Component {
                             </span>
                         }
                     />
+                    <div className={styles.gcodeViewer}>
+                        <Clusterize
+                            style={{ padding: '0 5px' }}
+                            rows={this.lines}
+                            scrollTop={scrollTop}
+                        />
+                    </div>
                 </Panel.Body>
             </Panel>
         );

diff --git a/src/web/widgets/Visualizer/index.jsx b/src/web/widgets/Visualizer/index.jsx
@@ -173,6 +173,7 @@ class VisualizerWidget extends Component {
                     loading: false,
                     rendering: capable.view3D,
                     ready: !capable.view3D,
+                    content: gcode,
                     bbox: {
                         min: {
                             x: 0,
@@ -223,6 +224,7 @@ class VisualizerWidget extends Component {
                     loading: false,
                     rendering: false,
                     ready: false,
+                    content: '',
                     bbox: {
                         min: {
                             x: 0,
@@ -553,6 +555,7 @@ class VisualizerWidget extends Component {
                 loading: false,
                 rendering: false,
                 ready: false,
+                content: '',
                 bbox: {
                     min: {
                         x: 0,

diff --git a/src/web/widgets/Visualizer/index.styl b/src/web/widgets/Visualizer/index.styl
@@ -128,6 +128,7 @@
     top: 60px;
     left: 10px;
     right: 10px;
+    bottom: 0;
 
     :global {
         .row {
@@ -137,6 +138,38 @@
             margin-bottom: 0;
         }
     }
+
+    .gcode-viewer {
+        border: 1px solid #ddd;
+        position: absolute;
+        top: 110px;
+        left: 10px;
+        right: 10px;
+        bottom: 10px;
+
+        .line {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .label {
+            display: inline;
+            padding: .2em .6em .3em;
+            font-size: 75%;
+            font-weight: bold;
+            line-height: 1;
+            color: #fff;
+            text-align: center;
+            white-space: nowrap;
+            vertical-align: baseline;
+            border-radius: .25em;
+            margin-right: 5px;
+        }
+        .label-default {
+            background-color: #777;
+        }
+    }
 }
 
 .text-gray {