Feature: Separate editing and preview

src/app/components/OptionalDropdown/OptionalDropdown.jsx

@@ -7,7 +7,7 @@ import styles from './styles.styl';
 
 // TODO: to be improved
 const OptionalDropdown = (props) => {
-    const { hidden, title, titleTip, onClick, children, ...rest } = props;
+    const { hidden, title, titleTip, onClick, disabled = false, children, ...rest } = props;
 
     return (
         <div>
@@ -16,6 +16,7 @@ const OptionalDropdown = (props) => {
                     <div className={styles['expandable-title']}>
                         <Anchor
                             onClick={onClick}
+                            disabled={disabled}
                         >
                             <i className={classNames(styles.icon, hidden ? styles['icon-unchecked'] : styles['icon-checked'])} />
                             <span>{title}</span>
@@ -45,6 +46,7 @@ OptionalDropdown.propTypes = {
     titleTip: PropTypes.string,
     children: PropTypes.node.isRequired,
     onClick: PropTypes.func.isRequired,
+    disabled: PropTypes.bool,
     hidden: PropTypes.bool.isRequired
 };
 

src/app/constants/index.js

@@ -44,6 +44,9 @@ export const STAGE_PREVIEWING = 2;
 export const STAGE_PREVIEWED = 3;
 export const STAGE_GENERATED = 4;
 
+export const PAGE_EDITOR = 'editor';
+export const PAGE_PROCESS = 'process';
+
 // Stages for 3d print
 export const STAGES_3DP = {
     noModel: 10,

src/app/containers/Cnc/Relief.jsx

@@ -203,7 +203,7 @@ const Relief = (props) => {
                     <tr>
                         <td />
                         <td>
-                            <input type="checkbox" defaultChecked={state.isInvert} onChange={actions.onToggleInvert} /> <span>Invert</span>
+                            <input type="checkbox" defaultChecked={state.invert} onChange={actions.onToggleInvert} /> <span>Invert</span>
                         </td>
                     </tr>
                 </tbody>

src/app/containers/Header/Header.jsx

@@ -12,6 +12,7 @@ import i18n from '../../lib/i18n';
 import QuickAccessToolbar from './QuickAccessToolbar';
 import MachineSelection from './MachineSelection';
 import styles from './styles.styl';
+import PageControl from './PageControl';
 
 const Logo = memo(() => (
     <Anchor
@@ -125,6 +126,7 @@ class Header extends PureComponent {
                 </Navbar.Brand>
                 <Navbar.Toggle aria-controls="lu-header" />
                 <Navbar.Collapse id="lu-header" className={styles['lu-nav']}>
+                    <PageControl {...this.props} />
                     <Nav className="mr-auto">
                         <MachineSelection />
                     </Nav>

src/app/containers/Header/PageControl.jsx

@@ -0,0 +1,81 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router-dom';
+import classNames from 'classnames';
+import styles from './styles.styl';
+import { PAGE_EDITOR, PAGE_PROCESS } from '../../constants';
+import { actions as cncLaserActions } from '../../flux/cncLaserShared';
+import i18n from '../../lib/i18n';
+
+
+class PageControl extends Component {
+    static propTypes = {
+        ...withRouter.propTypes,
+        page: PropTypes.string,
+        from: PropTypes.string,
+
+        togglePage: PropTypes.func.isRequired
+    };
+
+    actions= {
+
+    };
+
+    render() {
+        const { page, from } = this.props;
+        if (page === null) {
+            return null;
+        }
+        const isEditor = page === PAGE_EDITOR;
+        const isPreview = page === PAGE_PROCESS;
+
+        return (
+            <div className={classNames(styles['editor-and-preview'])}>
+                <div className={classNames(styles['btn-position'])}>
+                    <button
+                        type="button"
+                        className={classNames('btn', { [styles.selected]: isEditor })}
+                        onClick={() => {
+                            this.props.togglePage(from, PAGE_EDITOR);
+                        }}
+                    >{i18n._('Editor')}
+                    </button>
+                    <button
+                        type="button"
+                        className={classNames('btn', { [styles.selected]: isPreview })}
+                        onClick={() => {
+                            this.props.togglePage(from, PAGE_PROCESS);
+                        }}
+                    >{i18n._('Process')}
+                    </button>
+                </div>
+            </div>
+        );
+    }
+}
+
+const mapStateToProps = (state, props) => {
+    const pathname = props.location.pathname;
+    let page = null;
+    let from = null;
+    if (pathname.indexOf('laser') !== -1) {
+        from = 'laser';
+        page = state.laser.page;
+    } else if (pathname.indexOf('cnc') !== -1) {
+        from = 'cnc';
+        page = state.cnc.page;
+    }
+    return {
+        page,
+        from
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        togglePage: (from, page) => dispatch(cncLaserActions.togglePage(from, page))
+    };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(PageControl);

src/app/containers/Header/styles.styl

@@ -15,3 +15,48 @@
         }
     }
 }
+
+.editor-and-preview {
+    position: absolute
+    width: 100%
+    height: 100%
+    pointer-events:none;
+
+    .btn-position {
+        position: relative
+        pointer-events: auto
+        padding: 6px 0
+        margin: 0 auto
+        width: 180px
+        height: 100%
+        left: -320px
+        background-color: #f8f8f8
+
+        button {
+            height: 100%
+            width: 90px
+            position: relative
+            font-size: $font-size-h5
+            background-color: #f8f8f8
+
+            &:focus {
+                outline: 0
+                box-shadow: none
+            }
+        }
+
+        .selected {
+            background-color: #000
+            color: #f8f8f8
+        }
+    }
+}
+
+.btn-icon {
+    color: #444;
+
+    &:hover,
+    &:focus {
+        color: #222;
+    }
+}

src/app/flux/cnc/index.js

@@ -8,25 +8,34 @@ import {
 } from '../actionType';
 import { actions as sharedActions, CNC_LASER_STAGE } from '../cncLaserShared';
 import ToolPathModelGroup from '../models/ToolPathModelGroup';
+import { PAGE_EDITOR } from '../../constants';
 
 const ACTION_CHANGE_TOOL_PARAMS = 'cnc/ACTION_CHANGE_TOOL_PARAMS';
 
 const INITIAL_STATE = {
+
+    page: PAGE_EDITOR,
+
     stage: CNC_LASER_STAGE.EMPTY,
     progress: 0,
+
     modelGroup: new ModelGroup(),
     toolPathModelGroup: new ToolPathModelGroup(),
+
     isAllModelsPreviewed: false,
     isGcodeGenerating: false,
     gcodeFile: null,
-    // selected
+
     // model: null,
     selectedModelID: null,
     sourceType: '',
-    // selectedModelIDs: [],
     mode: '', // bw, greyscale, vector
+    showOrigin: null,
+
     printOrder: 1,
     transformation: {},
+    transformationUpdateTime: new Date().getTime(),
+
     gcodeConfig: {},
     config: {},
 
@@ -36,17 +45,6 @@ const INITIAL_STATE = {
         toolAngle: 30 // tool angle (in degree, defaults to 30° for V-Bit)
     },
 
-    // selected model transformation
-    positionX: 0,
-    positionY: 0,
-    positionZ: 0,
-    rotationX: 0,
-    rotationY: 0,
-    rotationZ: 0,
-    scaleX: 1,
-    scaleY: 1,
-    scaleZ: 1,
-
     // snapshot state
     undoSnapshots: [{ models: [], toolPathModels: [] }], // snapshot { models, toolPathModels }
     redoSnapshots: [], // snapshot { models, toolPathModels }
@@ -59,7 +57,6 @@ const INITIAL_STATE = {
 
     // boundingBox: new THREE.Box3(new THREE.Vector3(), new THREE.Vector3()), // bbox of selected model
 
-    previewUpdated: 0,
     previewFailed: false,
     autoPreviewEnabled: true,
 
@@ -109,8 +106,8 @@ export const actions = {
 };
 
 export default function reducer(state = INITIAL_STATE, action) {
-    const { from, type } = action;
-    if (from === 'cnc') {
+    const { headType, type } = action;
+    if (headType === 'cnc') {
         switch (type) {
             case ACTION_UPDATE_STATE: {
                 return Object.assign({}, state, { ...action.state });
@@ -122,7 +119,8 @@ export default function reducer(state = INITIAL_STATE, action) {
             }
             case ACTION_UPDATE_TRANSFORMATION: {
                 return Object.assign({}, state, {
-                    transformation: { ...state.transformation, ...action.transformation }
+                    transformation: { ...state.transformation, ...action.transformation },
+                    transformationUpdateTime: new Date().getTime()
                 });
             }
             case ACTION_UPDATE_GCODE_CONFIG: {