refactor polydata

src/lib/vtk/core/CellData.tsx

@@ -1,20 +1,21 @@
-import React from 'react';
+import React, { useContext, useEffect } from 'react';
 
 import { DataSetContext, FieldsContext } from './View';
 
 /**
  * CellData is exposing a vtkCellData to a downstream element
  */
 export default function CellData(props: CellDataProps) {
+  const dataset = useContext(DataSetContext)
+  if (!dataset) {
+    return null
+  }
   return (
-    <DataSetContext.Consumer>
-      {(dataset) => (
-        <FieldsContext.Provider value={dataset.getDataSet().getCellData()}>
-          {props.children}
-        </FieldsContext.Provider>
-      )}
-    </DataSetContext.Consumer>
-  );
+    <FieldsContext.Provider value={dataset.getCellData()}>
+      {props.children}
+    </FieldsContext.Provider>
+  )
+
 }
 
 CellData.defaultProps = {};

src/lib/vtk/core/FieldData.tsx

@@ -1,19 +1,20 @@
-import React from 'react';
+import React, { useContext } from 'react';
 
 import { DataSetContext, FieldsContext } from './View';
 
 /**
  * FieldData is exposing a FieldData to a downstream element
  */
 export default function FieldData(props: FieldDataProps) {
+  const dataset = useContext(DataSetContext)
+  if (!dataset) {
+    return null
+  }
   return (
-    <DataSetContext.Consumer>
-      {(dataset) => (
-        <FieldsContext.Provider value={dataset.getDataSet().getFieldData()}>
-          {props.children}
-        </FieldsContext.Provider>
-      )}
-    </DataSetContext.Consumer>
+    <FieldsContext.Provider value={dataset.getFieldData()}>
+      {props.children}
+    </FieldsContext.Provider>
+
   );
 }
 

src/lib/vtk/core/PointData.tsx

@@ -1,28 +1,27 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 
 import { DataSetContext, FieldsContext } from './View';
 
 /**
  * PointData is exposing a vtkPointData to a downstream element
  */
-export default function PointData(props) {
+export default function PointData(props: PointDataProps) {
+    const dataset = useContext(DataSetContext)
+    if (!dataset) {
+        return null
+    }
     return (
-        <DataSetContext.Consumer>
-            {(dataset) => (
-                <FieldsContext.Provider value={dataset.getDataSet().getPointData()}>
-                    {props.children}
-                </FieldsContext.Provider>
-            )}
-        </DataSetContext.Consumer>
+        <FieldsContext.Provider value={dataset.getPointData()}>
+            {props.children}
+        </FieldsContext.Provider>
+
     );
 }
 
 PointData.defaultProps = {};
+type PointDataProps = {
+
+    children?: any;
 
-PointData.propTypes = {
-    children: PropTypes.oneOfType([
-        PropTypes.arrayOf(PropTypes.node),
-        PropTypes.node,
-    ]),
-};
+}

src/lib/vtk/core/PolyData.tsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { useEffect, useRef, useContext } from 'react';
 
 import { toTypedArray, smartEqualsShallow } from '../utils';
 
@@ -21,67 +21,57 @@ import vtkPolyData from '@kitware/vtk.js/Common/DataModel/PolyData.js';
  * Cell connectivity helper property:
  *   - connectivity: 'manual', // [manual, points, triangles, strips]
  */
-export default class PolyData extends Component<PolyDataProps> {
-    static defaultProps = {
-        port: 0,
-        points: [],
-        connectivity: 'manual',
-    }
-    polydata: any
-    representation: any
-    downstream: any
-    constructor(props: PolyDataProps) {
-        super(props);
-
-        // Create vtk.js polydata
-        this.polydata = vtkPolyData.newInstance();
-    }
+const usePreviousValue = (value) => {
+    const previousRef = useRef();
+    useEffect(() => {
+        previousRef.current = value;
+    }, [value]);
+    return previousRef.current
+}
 
-    render() {
-        return (
-            <RepresentationContext.Consumer>
-                {(representation) => (
-                    <DownstreamContext.Consumer>
-                        {(downstream) => {
-                            this.representation = representation;
-                            if (!this.downstream) {
-                                this.downstream = downstream;
-                            }
-                            return (
-                                <DataSetContext.Provider value={this}>
-                                    <div key={this.props.id} id={this.props.id}>
-                                        {this.props.children}
-                                    </div>
-                                </DataSetContext.Provider>
-                            );
-                        }}
-                    </DownstreamContext.Consumer>
-                )}
-            </RepresentationContext.Consumer>
-        );
-    }
+export default function PolyData(props: PolyDataProps) {
+    const dataset = useRef(null);
+    const representation = useContext(RepresentationContext)
+    const downstream = useContext(DownstreamContext)
+    const prevProps = usePreviousValue(props);
 
-    componentDidMount() {
-        this.update(this.props);
-    }
+    useEffect(() => {
+        if (!dataset.current) {
+            let polydata = vtkPolyData.newInstance();
+            dataset.current = polydata
+        }
+        return () => {
+            dataset.current.delete()
+            dataset.current = { polydata: null }
+        }
+    }, [])
 
-    componentDidUpdate(prevProps, prevState, snapshot) {
-        this.update(this.props, prevProps);
-    }
+    useEffect(() => {
+        if (dataset.current) {
+            update(props, prevProps)
+        }
 
-    componentWillUnmount() {
-        this.polydata.delete();
-        this.polydata = null;
-    }
+    }, [props])
+
+    return (
 
-    update(props, previous?) {
+        <DataSetContext.Provider value={dataset.current}>
+            <div key={props.id} id={props.id}>
+                {props.children}
+            </div>
+        </DataSetContext.Provider>
+
+    )
+
+    function update(props, previous?) {
         const { connectivity, points, verts, lines, polys, strips } = props;
+        const polydata = dataset.current
         let changeDetected = false;
         let typedArray: any = Uint32Array;
 
         if (points && (!previous || !smartEqualsShallow(points, previous.points))) {
             const array = toTypedArray(points, Float64Array);
-            this.polydata.getPoints().setData(array, 3);
+            polydata.getPoints().setData(array, 3);
             changeDetected = true;
 
             // Adapt cell size
@@ -91,22 +81,22 @@ export default class PolyData extends Component<PolyDataProps> {
         }
 
         if (verts && (!previous || !smartEqualsShallow(verts, previous.verts))) {
-            this.polydata.getVerts().setData(toTypedArray(verts, typedArray));
+            polydata.getVerts().setData(toTypedArray(verts, typedArray));
             changeDetected = true;
         }
 
         if (lines && (!previous || !smartEqualsShallow(lines, previous.lines))) {
-            this.polydata.getLines().setData(toTypedArray(lines, typedArray));
+            polydata.getLines().setData(toTypedArray(lines, typedArray));
             changeDetected = true;
         }
 
         if (polys && (!previous || !smartEqualsShallow(polys, previous.polys))) {
-            this.polydata.getPolys().setData(toTypedArray(polys, typedArray));
+            polydata.getPolys().setData(toTypedArray(polys, typedArray));
             changeDetected = true;
         }
 
         if (strips && (!previous || !smartEqualsShallow(strips, previous.strips))) {
-            this.polydata.getStrips().setData(toTypedArray(strips, typedArray));
+            polydata.getStrips().setData(toTypedArray(strips, typedArray));
             changeDetected = true;
         }
 
@@ -125,7 +115,7 @@ export default class PolyData extends Component<PolyDataProps> {
                         for (let i = 0; i < nbPoints; i++) {
                             values[i + 1] = i;
                         }
-                        this.polydata.getVerts().setData(values);
+                        polydata.getVerts().setData(values);
                         changeDetected = true;
                     }
                     break;
@@ -139,7 +129,7 @@ export default class PolyData extends Component<PolyDataProps> {
                             values[offset++] = i + 1;
                             values[offset++] = i + 2;
                         }
-                        this.polydata.getPolys().setData(values);
+                        polydata.getPolys().setData(values);
                         changeDetected = true;
                     }
                     break;
@@ -150,7 +140,7 @@ export default class PolyData extends Component<PolyDataProps> {
                         for (let i = 0; i < nbPoints; i++) {
                             values[i + 1] = i;
                         }
-                        this.polydata.getStrips().setData(values);
+                        polydata.getStrips().setData(values);
                         changeDetected = true;
                     }
                     break;
@@ -160,27 +150,24 @@ export default class PolyData extends Component<PolyDataProps> {
         }
 
         if (changeDetected) {
-            this.modified();
-        }
-    }
-
-    getDataSet() {
-        return this.polydata;
-    }
+            polydata.modified();
+            downstream.setInputData(polydata, props.port);
 
-    modified() {
-        this.polydata.modified();
-        this.downstream.setInputData(this.polydata, this.props.port);
-
-        // Let the representation know that we have data
-        if (this.representation && this.polydata.getPoints().getData().length) {
-            this.representation.dataAvailable();
-            this.representation.dataChanged();
+            // Let the representation know that we have data
+            if (representation && polydata.getPoints().getData().length) {
+                representation.dataAvailable();
+                representation.dataChanged();
+            }
         }
     }
-}
 
+}
 
+PolyData.defaultProps = {
+    port: 0,
+    points: [],
+    connectivity: 'manual',
+}
 
 type PolyDataProps = {
     /**