SphereWidget

Methods

Source

behavior.js
import macro from 'vtk.js/Sources/macros';
import { add } from 'vtk.js/Sources/Common/Core/Math';
import { vec3 } from 'gl-matrix';

export default function widgetBehavior(publicAPI, model) {
const state = model.widgetState;
const moveHandle = state.getMoveHandle();
const centerHandle = state.getCenterHandle();
const borderHandle = state.getBorderHandle();
const shapeHandle = state.getSphereHandle();

// Set while moving the center or border handle.
model._isDragging = false;

model.classHierarchy.push('vtkSphereWidgetProp');

moveHandle.setVisible(true);
centerHandle.setVisible(false);
borderHandle.setVisible(false);
shapeHandle.setVisible(true);

function isValidHandle(handle) {
return (
handle === centerHandle ||
handle === borderHandle ||
handle === moveHandle
);
}

function isPlaced() {
return !!centerHandle.getOrigin() && !!borderHandle.getOrigin();
}

// Update the sphereHandle parameters from {center,border}Handle.
function updateSphere() {
const center = centerHandle.getOrigin();
if (!center) return;

centerHandle.setVisible(true);
let border = borderHandle.getOrigin();
if (border) {
borderHandle.setVisible(true);
} else {
border = moveHandle.getOrigin();
if (!border) return;
}
if (isPlaced()) {
moveHandle.setVisible(false);
}
const radius = vec3.distance(center, border);
shapeHandle.setVisible(true);
shapeHandle.setOrigin(center);
shapeHandle.setScale1(radius * 2);
model._interactor.render();
}

function currentWorldCoords(e) {
const manipulator =
model.activeState?.getManipulator?.() ?? model.manipulator;
return manipulator.handleEvent(e, model._apiSpecificRenderWindow);
}

// Update the sphere's center and radius. Example:
// handle.setCenterAndRadius([1,2,3], 10);
publicAPI.setCenterAndRadius = (newCenter, newRadius) => {
const oldCenter = centerHandle.getOrigin();
const oldBorder = borderHandle.getOrigin();
let newBorder = [newCenter[0] + newRadius, newCenter[1], newCenter[2]];
if (oldBorder) {
// Move the boundary handle to reflect the new radius, while preserving
// its direction relative to the center.
const direction = vec3.sub(vec3.create(), oldBorder, oldCenter);
const oldRadius = vec3.length(direction);
if (oldRadius > 1e-10) {
newBorder = vec3.add(
vec3.create(),
newCenter,
vec3.scale(vec3.create(), direction, newRadius / oldRadius)
);
}
}
centerHandle.setOrigin(newCenter);
borderHandle.setOrigin(newBorder);
updateSphere();
model._widgetManager.enablePicking();
};

publicAPI.handleLeftButtonPress = (e) => {
if (!isValidHandle(model.activeState)) {
model.activeState = null;
return macro.VOID;
}
const { worldCoords } = currentWorldCoords(e);

if (model.activeState === moveHandle) {
// Initial sphere placement.
if (!centerHandle.getOrigin()) {
centerHandle.setOrigin(worldCoords);
} else if (!borderHandle.getOrigin()) {
borderHandle.setOrigin(worldCoords);
publicAPI.loseFocus();
}
updateSphere();
return macro.EVENT_ABORT;
}

model._isDragging = true;
model._apiSpecificRenderWindow.setCursor('grabbing');
publicAPI.invokeStartInteractionEvent();
return macro.EVENT_ABORT;
};

publicAPI.handleLeftButtonRelease = (e) => {
if (!model._isDragging) {
model.activeState = null;
return macro.VOID;
}
if (isPlaced()) {
model._widgetManager.enablePicking();
model._apiSpecificRenderWindow.setCursor('pointer');
model._isDragging = false;
model.activeState = null;
state.deactivate();
}
publicAPI.invokeEndInteractionEvent();
return macro.EVENT_ABORT;
};

publicAPI.handleMouseMove = (e) => {
if (!model.activeState) return macro.VOID;
const { worldCoords, worldDelta } = currentWorldCoords(e);

if (model.hasFocus) {
model.activeState.setOrigin(worldCoords);
} else if (model._isDragging) {
model.activeState.setOrigin(
add(model.activeState.getOrigin(), worldDelta, [])
);
}

updateSphere();
return macro.VOID;
};

const superGrabFocus = publicAPI.grabFocus;

publicAPI.grabFocus = () => {
superGrabFocus();
moveHandle.setVisible(true);
centerHandle.setVisible(false);
borderHandle.setVisible(false);
centerHandle.setOrigin(null);
borderHandle.setOrigin(null);
model.activeState = moveHandle;
model._interactor.render();
};

const superLoseFocus = publicAPI.loseFocus;

publicAPI.loseFocus = () => {
superLoseFocus();
model.activeState = null;
};
}
index.d.ts
import vtkAbstractWidget from '../../Core/AbstractWidget';
import { Vector3, Bounds } from '../../../types';

export interface ISphereWidgetHandleState {
getOrigin(): Vector3;
setOrigin(arg: Vector3): void;
getColor(): string;
setColor(arg: string): void;
getScale1(): number;
setScale1(arg: number): void;
getVisible(): boolean;
setVisible(arg: boolean): void;
setShape(arg: string): void;
getShape(): string;
}

// The internal state of the widget.
export interface vtkSphereWidgetState {
// A handle that defines the center of the sphere.
getCenterHandle(): ISphereWidgetHandleState;
// An arbitrary point at the sphere border. Used only to set the radius.
getBorderHandle(): ISphereWidgetHandleState;
}

// The type of object returned by vtkWidgetManager.addWidget()
export interface vtkSphereWidgetHandle {
// Set the sphere parameters.
setCenterAndRadius(center: Vector3, radius: number): void;
}

export interface vtkSphereWidget {
// Abstract widget methods.
getWidgetState(): vtkSphereWidgetState;
onWidgetChange(fn: () => void): void;
placeWidget(bounds: Bounds): void;
setPlaceFactor(factor: number): void;

// Methods specific to vtkSphereWidget.
getRadius(): number;
}

export interface ISphereWidgetInitialValues {}

export function newInstance(
props?: ISphereWidgetInitialValues
): vtkSphereWidget;

export const vtkSphereWidget: {
newInstance: typeof newInstance;
};

export default vtkSphereWidget;
index.js
import { distance2BetweenPoints } from 'vtk.js/Sources/Common/Core/Math';
import vtkAbstractWidgetFactory from 'vtk.js/Sources/Widgets/Core/AbstractWidgetFactory';
import vtkPlanePointManipulator from 'vtk.js/Sources/Widgets/Manipulators/PlaneManipulator';
import vtkSphereHandleRepresentation from 'vtk.js/Sources/Widgets/Representations/SphereHandleRepresentation';
import vtkSphereContextRepresentation from 'vtk.js/Sources/Widgets/Representations/SphereContextRepresentation';
import macro from 'vtk.js/Sources/macros';

import widgetBehavior from './behavior';
import stateGenerator from './state';

function vtkSphereWidget(publicAPI, model) {
model.classHierarchy.push('vtkSphereWidget');

const superClass = { ...publicAPI };

model.methodsToLink = ['scaleInPixels'];

publicAPI.getRepresentationsForViewType = (viewType) => [
{
builder: vtkSphereHandleRepresentation,
labels: ['moveHandle'],
},
{
builder: vtkSphereHandleRepresentation,
labels: ['centerHandle'],
},
{
builder: vtkSphereHandleRepresentation,
labels: ['borderHandle'],
},
{
builder: vtkSphereContextRepresentation,
labels: ['sphereHandle'],
},
];

// --- Public methods -------------------------------------------------------

publicAPI.getRadius = () => {
const h1 = model.widgetState.getCenterHandle();
const h2 = model.widgetState.getBorderHandle();
return Math.sqrt(distance2BetweenPoints(h1.getOrigin(), h2.getOrigin()));
};

publicAPI.setManipulator = (manipulator) => {
superClass.setManipulator(manipulator);
model.widgetState.getMoveHandle().setManipulator(manipulator);
model.widgetState.getCenterHandle().setManipulator(manipulator);
model.widgetState.getBorderHandle().setManipulator(manipulator);
};

// --------------------------------------------------------------------------
// initialization
// --------------------------------------------------------------------------

publicAPI.setManipulator(
model.manipulator ||
vtkPlanePointManipulator.newInstance({ useCameraNormal: true })
);
}

const defaultValues = (initialValues) => ({
behavior: widgetBehavior,
widgetState: stateGenerator(),
...initialValues,
});

export function extend(publicAPI, model, initialValues = {}) {
Object.assign(model, defaultValues(initialValues));
vtkAbstractWidgetFactory.extend(publicAPI, model, initialValues);
macro.setGet(publicAPI, model, ['manipulator', 'widgetState']);
vtkSphereWidget(publicAPI, model);
}

export const newInstance = macro.newInstance(extend, 'vtkSphereWidget');

export default { newInstance, extend };
state.js
import vtkStateBuilder from 'vtk.js/Sources/Widgets/Core/StateBuilder';

// Defines the structure of the widget state.
// See https://kitware.github.io/vtk-js/docs/concepts_widgets.html.
export default function stateGenerator() {
return (
vtkStateBuilder
.createBuilder()
// The handle used only for during initial placement.
.addStateFromMixin({
labels: ['moveHandle'],
mixins: ['origin', 'color', 'scale1', 'visible', 'manipulator'],
name: 'moveHandle',
initialValues: {
scale1: 20,
visible: true,
},
})
// The handle for the center of the sphere.
.addStateFromMixin({
labels: ['centerHandle'],
mixins: ['origin', 'color', 'scale1', 'visible', 'manipulator'],
name: 'centerHandle',
initialValues: {
scale1: 20,
visible: true,
},
})
// The handle for a border point of the sphere.
.addStateFromMixin({
labels: ['borderHandle'],
mixins: ['origin', 'color', 'scale1', 'visible', 'manipulator'],
name: 'borderHandle',
initialValues: {
scale1: 20,
visible: true,
},
})
// For displaying the sphere.
.addStateFromMixin({
labels: ['sphereHandle'],
mixins: ['origin', 'color', 'scale1', 'visible', 'orientation'],
name: 'sphereHandle',
initialValues: {
visible: true,
radius: 1,
},
})
.build()
);
}