Merge pull request #7 from Kitware/add-filter-support

Add filter support

Sources/config/glanceProxyConfig.js

@@ -7,6 +7,7 @@ import vtkProxySource from 'vtk.js/Sources/Proxy/Core/SourceProxy';
 import vtkSliceRepresentationProxy from 'vtk.js/Sources/Proxy/Representations/SliceRepresentationProxy';
 import vtkView from 'vtk.js/Sources/Proxy/Core/ViewProxy';
 import vtkVolumeRepresentationProxy from 'vtk.js/Sources/Proxy/Representations/VolumeRepresentationProxy';
+import vtkImageMarchingCubes from 'vtk.js/Sources/Filters/General/ImageMarchingCubes';
 
 import Palettes from '../Palettes';
 
@@ -25,6 +26,67 @@ export default {
         class: vtkProxySource,
         options: {},
       },
+      Contour: {
+        class: vtkProxySource,
+        options: {
+          autoUpdate: false, // For now...
+          algoFactory: vtkImageMarchingCubes,
+          proxyPropertyMapping: {
+            contourValue: { modelKey: 'algo', property: 'contourValue' },
+            computeNormals: { modelKey: 'algo', property: 'computeNormals' },
+            mergePoints: { modelKey: 'algo', property: 'mergePoints' },
+          },
+          updateDomain(self, dataset) {
+            const arrayToProcess =
+              dataset.getPointData().getScalars() ||
+              dataset.getPointData().getArrayByIndex(0);
+            if (!arrayToProcess) {
+              return;
+            }
+            const [min, max] = arrayToProcess.getRange();
+            const step = (max - min) / 100;
+            self.updateProxyProperty('contourValue', {
+              domain: { min, max, step },
+            });
+          },
+          ui: [
+            {
+              label: 'Contour Value',
+              name: 'contourValue',
+              widget: 'slider',
+              propType: 'slider',
+              type: 'double',
+              size: 1,
+              domain: { min: 0, max: 1000, step: 1 },
+              doc: 'Adjust contour value',
+            },
+            {
+              label: 'Compute Normals',
+              name: 'computeNormals',
+              widget: 'checkbox',
+              type: 'boolean',
+              advanced: 0,
+              size: 1,
+              doc: 'Compute normal to enable smooth surface',
+            },
+            {
+              label: 'Merge points',
+              name: 'mergePoints',
+              widget: 'checkbox',
+              type: 'boolean',
+              advanced: 0,
+              size: 1,
+              doc: 'Prevent point duplication by merging them',
+            },
+            {
+              label: 'Update',
+              name: 'update',
+              propType: 'ExecuteProperty',
+              size: 1,
+            },
+          ],
+        },
+      },
     },
     Representations: {
       Geometry: {
@@ -415,4 +477,9 @@ export default {
       vtkMolecule: { name: 'Molecule' },
     },
   },
+  filters: {
+    vtkPolyData: [],
+    vtkImageData: ['Contour'],
+    vtkMolecule: [],
+  },
 };

Sources/controls/Filters/index.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Menu } from 'antd';
+
+export default class Filters extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      filterMap: props.proxyManager.getProxyConfiguration().filters,
+      filters: [],
+    };
+
+    // Closure for callback
+    this.onClick = this.onClick.bind(this);
+    this.updateActiveSource = this.updateActiveSource.bind(this);
+  }
+
+  componentWillMount() {
+    this.subscription = this.props.proxyManager.onActiveSourceChange(
+      this.updateActiveSource
+    );
+    this.updateActiveSource();
+  }
+
+  componentWillUnmount() {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+      this.subscription = null;
+    }
+    if (this.sourceSubscription) {
+      this.sourceSubscription.unsubscribe();
+      this.sourceSubscription = null;
+    }
+  }
+
+  onClick({ key }) {
+    const inputProxy = this.props.proxyManager.getActiveSource();
+    if (inputProxy) {
+      const filter = this.props.proxyManager.createProxy('Sources', key, {
+        inputProxy,
+        name: key,
+      });
+      this.props.proxyManager.setActiveSource(filter);
+      this.props.proxyManager.createRepresentationInAllViews(filter);
+      this.props.proxyManager.renderAllViews();
+      this.props.updateTab('pipeline');
+    }
+  }
+
+  updateActiveSource() {
+    if (this.sourceSubscription) {
+      this.sourceSubscription.unsubscribe();
+      this.sourceSubscription = null;
+    }
+    const activeSource = this.props.proxyManager.getActiveSource();
+    const activeType = activeSource ? activeSource.getType() : '';
+    const filters = this.state.filterMap[activeType] || [];
+    if (activeSource) {
+      this.sourceSubscription = activeSource.onModified(
+        this.updateActiveSource
+      );
+    }
+    this.setState({ filters });
+  }
+
+  render() {
+    return (
+      <Menu onClick={this.onClick} selectable={false}>
+        {this.state.filters.map((name) => (
+          <Menu.Item key={name}>{name}</Menu.Item>
+        ))}
+      </Menu>
+    );
+  }
+}
+
+Filters.propTypes = {
+  proxyManager: PropTypes.object.isRequired,
+  updateTab: PropTypes.func,
+};
+
+Filters.defaultProps = {
+  updateTab: () => {},
+};

Sources/controls/index.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { Tabs, Icon } from 'antd';
 
 import FileLoader from './FileLoader';
+import Filters from './Filters';
 import Informations from './Informations';
 import PipelineEditor from './PipelineEditor';
 
@@ -53,6 +54,7 @@ export function getDefaultActiveTab() {
 
 registerControlTab('pipeline', PipelineEditor, 10, 'share-alt');
 registerControlTab('files', FileLoader, 5, 'file-text', true); // Default active one
+registerControlTab('filters', Filters, 6, 'plus');
 registerControlTab('informations', Informations, 0, 'info');
 
 // ----------------------------------------------------------------------------

Sources/properties/ExecuteProperty/index.js

@@ -54,6 +54,7 @@ export default class ExecuteProperty extends React.Component {
       <Button
         style={{ width: 'calc(100% - 20px)', margin: '0 10px' }}
         onClick={this.onClick}
+        disabled={this.props.data.value[0] === false ? 'disabled' : ''}
       >
         {this.state.ui.label}
       </Button>