AngleWidget

Source

behavior.js
import macro from 'vtk.js/Sources/macro';
import vtkPointPicker from 'vtk.js/Sources/Rendering/Core/PointPicker';

const MAX_POINTS = 3;

export default function widgetBehavior(publicAPI, model) {
model.classHierarchy.push('vtkAngleWidgetProp');
let isDragging = null;

const picker = vtkPointPicker.newInstance();
picker.setPickFromList(1);

// --------------------------------------------------------------------------
// Display 2D
// --------------------------------------------------------------------------

publicAPI.setDisplayCallback = (callback) =>
model.representations[0].setDisplayCallback(callback);

// --------------------------------------------------------------------------
// Interactor events
// --------------------------------------------------------------------------

function ignoreKey(e) {
return e.altKey || e.controlKey || e.shiftKey;
}

// --------------------------------------------------------------------------
// Left press: Select handle to drag
// --------------------------------------------------------------------------

publicAPI.handleLeftButtonPress = (e) => {
if (
!model.activeState ||
!model.activeState.getActive() ||
!model.pickable ||
ignoreKey(e)
) {
return macro.VOID;
}

picker.initializePickList();
picker.setPickList(publicAPI.getNestedProps());

if (
model.activeState === model.widgetState.getMoveHandle() &&
model.widgetState.getHandleList().length < MAX_POINTS
) {
// Commit handle to location
const moveHandle = model.widgetState.getMoveHandle();
const newHandle = model.widgetState.addHandle();
newHandle.setOrigin(...moveHandle.getOrigin());
newHandle.setColor(moveHandle.getColor());
newHandle.setScale1(moveHandle.getScale1());
} else {
isDragging = true;
model.openGLRenderWindow.setCursor('grabbing');
model.interactor.requestAnimation(publicAPI);
}

publicAPI.invokeStartInteractionEvent();
return macro.EVENT_ABORT;
};

// --------------------------------------------------------------------------
// Mouse move: Drag selected handle / Handle follow the mouse
// --------------------------------------------------------------------------

publicAPI.handleMouseMove = (callData) => {
if (
model.pickable &&
model.manipulator &&
model.activeState &&
model.activeState.getActive() &&
!ignoreKey(callData)
) {
model.manipulator.setOrigin(model.activeState.getOrigin());
model.manipulator.setNormal(model.camera.getDirectionOfProjection());
const worldCoords = model.manipulator.handleEvent(
callData,
model.openGLRenderWindow
);

if (
model.activeState === model.widgetState.getMoveHandle() ||
isDragging
) {
model.activeState.setOrigin(worldCoords);
publicAPI.invokeInteractionEvent();
return macro.EVENT_ABORT;
}
}
if (model.hasFocus) {
model.widgetManager.disablePicking();
}
return macro.VOID;
};

// --------------------------------------------------------------------------
// Left release: Finish drag / Create new handle
// --------------------------------------------------------------------------

publicAPI.handleLeftButtonRelease = () => {
if (isDragging && model.pickable) {
model.openGLRenderWindow.setCursor('pointer');
model.widgetState.deactivate();
model.interactor.cancelAnimation(publicAPI);
publicAPI.invokeEndInteractionEvent();
} else if (model.activeState !== model.widgetState.getMoveHandle()) {
model.widgetState.deactivate();
}

if (
(model.hasFocus && !model.activeState) ||
(model.activeState && !model.activeState.getActive())
) {
publicAPI.invokeEndInteractionEvent();
model.widgetManager.enablePicking();
model.interactor.render();
}

// Don't make any more points
if (model.widgetState.getHandleList().length === MAX_POINTS) {
publicAPI.loseFocus();
}

isDragging = false;
};

// --------------------------------------------------------------------------
// Focus API - modeHandle follow mouse when widget has focus
// --------------------------------------------------------------------------

publicAPI.grabFocus = () => {
if (
!model.hasFocus &&
model.widgetState.getHandleList().length < MAX_POINTS
) {
model.activeState = model.widgetState.getMoveHandle();
model.activeState.activate();
model.activeState.setVisible(true);
model.interactor.requestAnimation(publicAPI);
publicAPI.invokeStartInteractionEvent();
}
model.hasFocus = true;
};

// --------------------------------------------------------------------------

publicAPI.loseFocus = () => {
if (model.hasFocus) {
model.interactor.cancelAnimation(publicAPI);
publicAPI.invokeEndInteractionEvent();
}
model.widgetState.deactivate();
model.widgetState.getMoveHandle().deactivate();
model.widgetState.getMoveHandle().setVisible(false);
model.activeState = null;
model.hasFocus = false;
model.widgetManager.enablePicking();
model.interactor.render();
};
}
index.js
import macro from 'vtk.js/Sources/macro';
import vtkAbstractWidgetFactory from 'vtk.js/Sources/Widgets/Core/AbstractWidgetFactory';
import vtkPlanePointManipulator from 'vtk.js/Sources/Widgets/Manipulators/PlaneManipulator';
import vtkPolyLineRepresentation from 'vtk.js/Sources/Widgets/Representations/PolyLineRepresentation';
import vtkSphereHandleRepresentation from 'vtk.js/Sources/Widgets/Representations/SphereHandleRepresentation';
import * as vtkMath from 'vtk.js/Sources/Common/Core/Math';

import widgetBehavior from 'vtk.js/Sources/Widgets/Widgets3D/AngleWidget/behavior';
import stateGenerator from 'vtk.js/Sources/Widgets/Widgets3D/AngleWidget/state';

import { ViewTypes } from 'vtk.js/Sources/Widgets/Core/WidgetManager/Constants';

// ----------------------------------------------------------------------------
// Factory
// ----------------------------------------------------------------------------

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

// --- Widget Requirement ---------------------------------------------------

model.methodsToLink = [
'activeScaleFactor',
'activeColor',
'useActiveColor',
'glyphResolution',
'defaultScale',
];
model.behavior = widgetBehavior;
model.widgetState = stateGenerator();

publicAPI.getRepresentationsForViewType = (viewType) => {
switch (viewType) {
case ViewTypes.DEFAULT:
case ViewTypes.GEOMETRY:
case ViewTypes.SLICE:
case ViewTypes.VOLUME:
default:
return [
{ builder: vtkSphereHandleRepresentation, labels: ['handles'] },
{ builder: vtkSphereHandleRepresentation, labels: ['moveHandle'] },
{
builder: vtkPolyLineRepresentation,
labels: ['handles', 'moveHandle'],
},
];
}
};

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

// Returns angle in radians
publicAPI.getAngle = () => {
const handles = model.widgetState.getHandleList();
if (handles.length !== 3) {
return 0;
}

const vec1 = [0, 0, 0];
const vec2 = [0, 0, 0];
vtkMath.subtract(handles[0].getOrigin(), handles[1].getOrigin(), vec1);
vtkMath.subtract(handles[2].getOrigin(), handles[1].getOrigin(), vec2);
return vtkMath.angleBetweenVectors(vec1, vec2);
};

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

model.widgetState.onBoundsChange((bounds) => {
const center = [
(bounds[0] + bounds[1]) * 0.5,
(bounds[2] + bounds[3]) * 0.5,
(bounds[4] + bounds[5]) * 0.5,
];
model.widgetState.getMoveHandle().setOrigin(center);
});

// Default manipulator
model.manipulator = vtkPlanePointManipulator.newInstance();
}

// ----------------------------------------------------------------------------

const DEFAULT_VALUES = {
// manipulator: null,
};

// ----------------------------------------------------------------------------

export function extend(publicAPI, model, initialValues = {}) {
Object.assign(model, DEFAULT_VALUES, initialValues);

vtkAbstractWidgetFactory.extend(publicAPI, model, initialValues);
macro.setGet(publicAPI, model, ['manipulator']);

vtkAngleWidget(publicAPI, model);
}

// ----------------------------------------------------------------------------

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

// ----------------------------------------------------------------------------

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

export default function generateState() {
return vtkStateBuilder
.createBuilder()
.addStateFromMixin({
labels: ['moveHandle'],
mixins: ['origin', 'color', 'scale1', 'visible'],
name: 'moveHandle',
initialValues: {
scale1: 0.1,
origin: [-1, -1, -1],
visible: false,
},
})
.addDynamicMixinState({
labels: ['handles'],
mixins: ['origin', 'color', 'scale1'],
name: 'handle',
initialValues: {
scale1: 0.1,
origin: [-1, -1, -1],
},
})
.build();
}