Skip to content

Commit

Permalink
feat(scalarbar): Add scalarbar capability
Browse files Browse the repository at this point in the history
  • Loading branch information
@jourdain
jourdain committed Apr 8, 2021
1 parent 057a9de commit af6b612
Show file tree
Hide file tree
Showing 6 changed files with 163 additions and 2 deletions.
44 changes: 44 additions & 0 deletions src/core/GeometryRepresentation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import vtkColorMaps from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/C
import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction.js';

import vtkCubeAxesActor from '@kitware/vtk.js/Rendering/Core/CubeAxesActor.js';
import vtkScalarBarActor from '@kitware/vtk.js/Rendering/Core/ScalarBarActor.js';

/**
* GeometryRepresentation is responsible to convert a vtkPolyData into rendering
Expand All @@ -30,6 +31,7 @@ export default class GeometryRepresentation extends Component {
});
this.actor.setMapper(this.mapper);

// Cube Axes
this.cubeAxes = vtkCubeAxesActor.newInstance({
visibility: false,
dataBounds: [-1, 1, -1, 1, -1, 1],
Expand All @@ -38,6 +40,11 @@ export default class GeometryRepresentation extends Component {
.getActors()
.forEach(({ setVisibility }) => setVisibility(false));

// Scalar Bar
this.scalarBar = vtkScalarBarActor.newInstance();
this.scalarBar.setScalarsToColors(this.lookupTable);
this.scalarBar.setVisibility(false);

const updateCubeAxes = () => {
if (this.mapper.getInputData()) {
if (this.subscriptions.length === 1) {
Expand Down Expand Up @@ -67,6 +74,7 @@ export default class GeometryRepresentation extends Component {
{(view) => {
if (!this.view) {
this.cubeAxes.setCamera(view.renderer.getActiveCamera());
view.renderer.addActor(this.scalarBar);
view.renderer.addActor(this.cubeAxes);
view.renderer.addActor(this.actor);
this.view = view;
Expand Down Expand Up @@ -99,10 +107,17 @@ export default class GeometryRepresentation extends Component {
}

if (this.view && this.view.renderer) {
this.view.renderer.removeActor(this.scalarBar);
this.view.renderer.removeActor(this.cubeAxes);
this.view.renderer.removeActor(this.actor);
}

this.scalarBar.delete();
this.scalarBar = null;

this.cubeAxes.delete();
this.cubeAxes = null;

this.actor.delete();
this.actor = null;

Expand Down Expand Up @@ -168,6 +183,17 @@ export default class GeometryRepresentation extends Component {
needRender++;
}

// Only trigger a render if something is different
if (this.scalarBar.setVisibility(props.showScalarBar)) {
needRender++;
}
if (this.scalarBar.setAxisLabel(props.scalarBarTitle)) {
needRender++;
}
if (this.scalarBar.set(props.scalarBarStyle || {})) {
needRender++;
}

if (this.view && needRender) {
this.view.renderView();
}
Expand All @@ -184,6 +210,8 @@ GeometryRepresentation.defaultProps = {
colorMapPreset: 'erdc_rainbow_bright',
colorDataRange: [0, 1],
showCubeAxes: false,
showScalarBar: false,
scalarBarTitle: '',
};

GeometryRepresentation.propTypes = {
Expand Down Expand Up @@ -228,6 +256,22 @@ GeometryRepresentation.propTypes = {
*/
cubeAxesStyle: PropTypes.object,

/**
* Show hide scalar bar for that representation
*/
showScalarBar: PropTypes.bool,

/**
* Use given string as title for scalar bar. By default it is empty (no title).
*/
scalarBarTitle: PropTypes.string,

/**
* Configure scalar bar style by overriding the set of properties defined
* https://github.com/Kitware/vtk-js/blob/master/Sources/Rendering/Core/ScalarBarActor/index.js#L776-L796
*/
scalarBarStyle: PropTypes.object,

children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node,
Expand Down
74 changes: 73 additions & 1 deletion src/core/View.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@ import vtkRenderWindowInteractor from '@kitware/vtk.js/Rendering/Core/RenderWind
import vtkRenderer from '@kitware/vtk.js/Rendering/Core/Renderer.js';
import vtkInteractorStyleManipulator from '@kitware/vtk.js/Interaction/Style/InteractorStyleManipulator.js';

import vtkBoundingBox from '@kitware/vtk.js/Common/DataModel/BoundingBox.js';
import vtkCubeAxesActor from '@kitware/vtk.js/Rendering/Core/CubeAxesActor.js';

// Style modes
import vtkMouseCameraTrackballMultiRotateManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballMultiRotateManipulator.js';
import vtkMouseCameraTrackballPanManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballPanManipulator.js';
Expand Down Expand Up @@ -128,8 +131,28 @@ export default class View extends Component {
this.resizeObserver = new ResizeObserver(() => this.onResize());

// expose helper methods
this.renderView = this.renderWindow.render;
this.renderView = () => {
this.updateCubeBounds();
this.renderWindow.render();
};
this.resetCamera = this.resetCamera.bind(this);
const bbox = vtkBoundingBox.newInstance({ bounds: [0, 0, 0, 0, 0, 0] });
this.updateCubeBounds = () => {
bbox.reset();
const { props } = this.renderer.get('props');
for (let i = 0; i < props.length; i++) {
const prop = props[i];
if (
prop.getVisibility() &&
prop.getUseBounds() &&
prop !== this.cubeAxes
) {
bbox.addBounds(...prop.getBounds());
}
}
this.cubeAxes.setDataBounds(bbox.getBounds());
};
const debouncedCubeBounds = debounce(this.updateCubeBounds, 50);

// Internal functions
this.hasFocus = false;
Expand Down Expand Up @@ -195,6 +218,26 @@ export default class View extends Component {
this.onClick = (e) => click(this.getScreenEventPositionFor(e));
this.onMouseMove = (e) => hover(this.getScreenEventPositionFor(e));
this.lastSelection = [];

// Cube Axes
this.cubeAxes = vtkCubeAxesActor.newInstance({
visibility: false,
dataBounds: [-1, 1, -1, 1, -1, 1],
});
this.cubeAxes
.getActors()
.forEach(({ setVisibility }) => setVisibility(false));
this.cubeAxes.setCamera(this.camera);
this.renderer.addActor(this.cubeAxes);

this.subscriptions = [];
this.subscriptions.push(
this.renderer.onEvent(({ type, renderer }) => {
if (renderer && type === 'ComputeVisiblePropBoundsEvent') {
debouncedCubeBounds();
}
})
);
}

getScreenEventPositionFor(source) {
Expand Down Expand Up @@ -260,6 +303,10 @@ export default class View extends Component {
}

componentWillUnmount() {
while (this.subscriptions.length) {
this.subscriptions.pop().unsubscribe();
}

document.removeEventListener('keyup', this.handleKey);
// Stop size listening
this.resizeObserver.disconnect();
Expand Down Expand Up @@ -295,6 +342,8 @@ export default class View extends Component {
cameraParallelProjection,
triggerRender,
triggerResetCamera,
showCubeAxes,
cubeAxesStyle,
} = props;
if (background && (!previous || background !== previous.background)) {
this.renderer.setBackground(background);
Expand Down Expand Up @@ -333,6 +382,17 @@ export default class View extends Component {
}
}

if (this.cubeAxes.setVisibility(showCubeAxes)) {
this.cubeAxes
.getActors()
.forEach(({ setVisibility }) => setVisibility(showCubeAxes));
this.renderView();
}

if (this.cubeAxes.set(cubeAxesStyle || {})) {
this.renderView();
}

// Allow to trigger method call from property change
if (previous && triggerRender !== previous.triggerRender) {
setTimeout(this.renderView, 0);
Expand Down Expand Up @@ -483,6 +543,7 @@ View.defaultProps = {
},
],
pickingModes: [],
showCubeAxes: false,
};

View.propTypes = {
Expand Down Expand Up @@ -573,4 +634,15 @@ View.propTypes = {
* the picking info describing the object being hovered.
*/
hoverInfo: PropTypes.object,

/**
* Show/Hide Cube Axes for the given representation
*/
showCubeAxes: PropTypes.bool,

/**
* Configure cube Axes style by overriding the set of properties defined
* https://github.com/Kitware/vtk-js/blob/HEAD/Sources/Rendering/Core/CubeAxesActor/index.js#L703-L719
*/
cubeAxesStyle: PropTypes.object,
};
35 changes: 35 additions & 0 deletions src/representations/PointCloudRepresentation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,11 @@ export default function PointCloudRepresentation(props) {
colorMapPreset={props.colorMapPreset}
colorDataRange={props.colorDataRange}
property={props.property}
showCubeAxes={props.showCubeAxes}
cubeAxesStyle={props.cubeAxesStyle}
showScalarBar={props.showScalarBar}
scalarBarTitle={props.scalarBarTitle}
scalarBarStyle={props.scalarBarStyle}
>
<PolyData points={props.xyz} connectivity='points'>
{nbComponents && (
Expand All @@ -60,6 +65,9 @@ PointCloudRepresentation.defaultProps = {
xyz: [0, 0, 0],
colorMapPreset: 'erdc_rainbow_bright',
colorDataRange: [0, 1],
showCubeAxes: false,
showScalarBar: false,
scalarBarTitle: '',
};

PointCloudRepresentation.propTypes = {
Expand Down Expand Up @@ -99,4 +107,31 @@ PointCloudRepresentation.propTypes = {
* Properties to set to the actor.property
*/
property: PropTypes.object,

/**
* Show/Hide Cube Axes for the given representation
*/
showCubeAxes: PropTypes.bool,

/**
* Configure cube Axes style by overriding the set of properties defined
* https://github.com/Kitware/vtk-js/blob/HEAD/Sources/Rendering/Core/CubeAxesActor/index.js#L703-L719
*/
cubeAxesStyle: PropTypes.object,

/**
* Show hide scalar bar for that representation
*/
showScalarBar: PropTypes.bool,

/**
* Use given string as title for scalar bar. By default it is empty (no title).
*/
scalarBarTitle: PropTypes.string,

/**
* Configure scalar bar style by overriding the set of properties defined
* https://github.com/Kitware/vtk-js/blob/master/Sources/Rendering/Core/ScalarBarActor/index.js#L776-L796
*/
scalarBarStyle: PropTypes.object,
};
9 changes: 9 additions & 0 deletions usage/Geometry/Picking.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ function Example(props) {
}}
colorDataRange={[0, 0.7]}
colorMapPreset="Black-Body Radiation"
showScalarBar={true}
scalarBarTitle="Plan"
>
<PolyData
points={[
Expand Down Expand Up @@ -65,6 +67,13 @@ function Example(props) {
id="cloud"
colorDataRange={[0, 1]}
property={{ pointSize: 5 }}
showScalarBar={true}
scalarBarTitle="Cloud"
scalarBarStyle={{
automated: false,
boxPosition: [-0.9, -0.95],
boxSize: [1.7, 0.25],
}}
>
<PolyData
points={points}
Expand Down
1 change: 1 addition & 0 deletions usage/Geometry/PointCloud.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ function Example(props) {
property={{ pointSize: 10 }}
xyz={props.xyz}
scalars={props.scalars}
showScalarBar={true}
/>
</View>
</div>
Expand Down
2 changes: 1 addition & 1 deletion usage/Geometry/ProcessingPipeline.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ function Example(props) {
const [scaleFactor, setScaleFactor] = useState(0);
return (
<div style={{width: '100vw', height: '100vh'}}>
<View>
<View showCubeAxes={true}>
<Slider value={scaleFactor} setValue={setScaleFactor} />
<GeometryRepresentation
mapper={{
Expand Down

0 comments on commit af6b612

Please sign in to comment.