Merge pull request #30 from floryst/faster_layouts

Faster layouts, configurable layout grid, and persistent views
Kitware · Mar 5, 2018 · 1e63ba1 · 1e63ba1
2 parents 7eeaea9 + 007c6c4
commit 1e63ba1
Show file tree

Hide file tree

Showing 10 changed files with 303 additions and 130 deletions.
diff --git a/Sources/MainView.js b/Sources/MainView.js
@@ -6,22 +6,25 @@ import PropTypes from 'prop-types';
 import { Layout, Menu, Progress } from 'antd';
 
 import Layouts from './layouts';
+import LayoutConfig from './config/glanceLayoutConfig';
 import style from './pv-explorer.mcss';
 import icons from './icons';
 
 import Controls from './controls';
 
 const { Header, Sider, Content } = Layout;
 
-const layouts = ['Layout2D', 'Layout3D', 'LayoutSplit', 'LayoutQuad'];
+const { LayoutGrid } = Layouts;
+
+const layouts = ['2D', '3D', 'Split', 'Quad'];
 
 const WIDTH = 300;
 
 export default class MainView extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      layout: 'Layout3D',
+      layout: '3D',
       overlayOpacity: 100,
       collapsed: false,
       tab: 'files',
@@ -36,10 +39,7 @@ export default class MainView extends React.Component {
   }
 
   onLayoutChange({ item, key, selectedKeys }) {
-    this.setState({ layout: key }, () => {
-      this.forceUpdate();
-      this.props.proxyManager.createRepresentationInAllViews();
-    });
+    this.setState({ layout: key });
   }
 
   onToggleControl() {
@@ -50,7 +50,6 @@ export default class MainView extends React.Component {
   }
 
   render() {
-    const Renderer = Layouts[this.state.layout];
     let progress = null;
 
     if (this.state.showProgress) {
@@ -80,7 +79,7 @@ export default class MainView extends React.Component {
                 <img
                   alt={name}
                   className={style.toolbarIcon}
-                  src={icons[name]}
+                  src={icons[`Layout${name}`]}
                 />
               </Menu.Item>
             ))}
@@ -105,9 +104,11 @@ export default class MainView extends React.Component {
           </Sider>
           <Layout>
             <Content className={style.workspace}>
-              <Renderer
+              <LayoutGrid
                 proxyManager={this.props.proxyManager}
                 className={style.content}
+                initialConfig={LayoutConfig}
+                layout={this.state.layout}
               />
             </Content>
           </Layout>

diff --git a/Sources/config/glanceLayoutConfig.js b/Sources/config/glanceLayoutConfig.js
@@ -0,0 +1,98 @@
+import Layout2D from '../layouts/Layout2D';
+import Layout3D from '../layouts/Layout3D';
+
+export default {
+  layouts: {
+    '2D': {
+      grid: [1, 1],
+      views: {
+        // stacked
+        sliceX: { cell: [1, 1] },
+        sliceY: { cell: [1, 1], defaultVisible: true, defaultActive: true },
+        sliceZ: { cell: [1, 1] },
+      },
+    },
+    '3D': {
+      grid: [1, 1],
+      views: {
+        volume: { cell: [1, 1], defaultActive: true },
+      },
+    },
+    Split: {
+      grid: [1, 2],
+      views: {
+        // stacked
+        sliceX: { cell: [1, 1] },
+        sliceY: { cell: [1, 1], defaultVisible: true },
+        sliceZ: { cell: [1, 1] },
+
+        volume: { cell: [1, 2], defaultActive: true },
+      },
+    },
+    Quad: {
+      grid: [2, 2],
+      views: {
+        sliceX: {
+          cell: [2, 1],
+          propOverrides: {
+            viewType: 'View2D_X',
+            title: '-Z+Y',
+            orientations: [],
+          },
+        },
+        sliceY: {
+          cell: [1, 1],
+          propOverrides: {
+            viewType: 'View2D_Y',
+            title: '-Z+X',
+            orientations: [],
+          },
+        },
+        sliceZ: {
+          cell: [2, 2],
+          propOverrides: {
+            viewType: 'View2D_Z',
+            title: '+X+Y',
+            orientations: [],
+          },
+        },
+        volume: { cell: [1, 2], defaultActive: true },
+      },
+    },
+  },
+  views: {
+    sliceX: {
+      component: Layout2D,
+      props: {
+        axis: 0,
+        orientation: 1,
+        viewUp: [0, 0, 1],
+        onAxisChange: (axis) => ['sliceX', 'sliceY', 'sliceZ'][axis],
+      },
+      stackChangeFunc: 'onAxisChange',
+    },
+    sliceY: {
+      component: Layout2D,
+      props: {
+        axis: 1,
+        orientation: 1,
+        viewUp: [0, -1, 0],
+        onAxisChange: (axis) => ['sliceX', 'sliceY', 'sliceZ'][axis],
+      },
+      stackChangeFunc: 'onAxisChange',
+    },
+    sliceZ: {
+      component: Layout2D,
+      props: {
+        axis: 2,
+        orientation: 1,
+        viewUp: [0, -1, 0],
+        onAxisChange: (axis) => ['sliceX', 'sliceY', 'sliceZ'][axis],
+      },
+      stackChangeFunc: 'onAxisChange',
+    },
+    volume: {
+      component: Layout3D,
+    },
+  },
+};
diff --git a/Sources/layouts/Layout2D.js b/Sources/layouts/Layout2D.js
@@ -37,7 +37,6 @@ export default class Layout2D extends React.Component {
     this.onActiveSourceChange = this.onActiveSourceChange.bind(this);
     this.rotate = this.rotate.bind(this);
     this.toggleOrientationMarker = this.toggleOrientationMarker.bind(this);
-    this.updateOrientation = this.updateOrientation.bind(this);
     this.activateView = this.activateView.bind(this);
     this.flush = () => this.forceUpdate();
 
@@ -158,26 +157,9 @@ export default class Layout2D extends React.Component {
     }
   }
 
-  updateOrientation(e) {
-    const state = this.props.orientations[Number(e.target.dataset.index)];
-    this.view.updateOrientation(state.axis, state.orientation, state.viewUp);
-    const reps = this.view.getRepresentations();
-    for (let i = 0; i < reps.length; i++) {
-      if (reps[i].setSlicingMode) {
-        reps[i].setSlicingMode('XYZ'[state.axis]);
-      }
-    }
-    this.props.proxyManager.modified();
-    this.view.resetCamera();
-    this.view.renderLater();
-    this.onActiveSourceChange();
-    this.updateSlider();
-
-    // Update control panel
-    this.props.proxyManager.modified();
-
-    // Update slider
-    this.forceUpdate();
+  resize() {
+    this.view.resize();
+    this.slider.resize();
   }
 
   rotate() {
@@ -217,7 +199,7 @@ export default class Layout2D extends React.Component {
                 key={o.label}
                 className={style.button}
                 data-index={i}
-                onClick={this.updateOrientation}
+                onClick={() => this.props.onAxisChange(o.axis)}
               >
                 {o.label}
               </div>
@@ -269,6 +251,7 @@ Layout2D.propTypes = {
   orientations: PropTypes.array,
   activateOnMount: PropTypes.bool,
   viewType: PropTypes.string,
+  onAxisChange: PropTypes.func,
 };
 
 Layout2D.defaultProps = {
@@ -285,4 +268,5 @@ Layout2D.defaultProps = {
     { label: 'Z', axis: 2, orientation: 1, viewUp: [0, -1, 0] },
   ],
   activateOnMount: false,
+  onAxisChange: () => {},
 };
diff --git a/Sources/layouts/Layout3D.js b/Sources/layouts/Layout3D.js
@@ -59,6 +59,10 @@ export default class Layout3D extends React.Component {
     this.props.proxyManager.setActiveView(this.view);
   }
 
+  resize() {
+    this.view.resize();
+  }
+
   render() {
     return (
       <div