MouseRangeManipulator

Methods

Source

index.d.ts

import vtkCompositeMouseManipulator, {
  ICompositeMouseManipulatorInitialValues,
} from '../../../Interaction/Manipulators/CompositeMouseManipulator';
import { vtkObject } from '../../../interfaces';

export interface IMouseRangeManipulatorInitialValues
  extends ICompositeMouseManipulatorInitialValues {}

export interface vtkMouseRangeManipulator
  extends vtkCompositeMouseManipulator,
    vtkObject {
  setHorizontalListener(
    min: number,
    max: number,
    step: number,
    getValue: () => number,
    setValue: (v: number) => void,
    scale?: number
  );
  setVerticalListener(
    min: number,
    max: number,
    step: number,
    getValue: () => number,
    setValue: (v: number) => void,
    scale?: number
  );
  setScrollListener(
    min: number,
    max: number,
    step: number,
    getValue: () => number,
    setValue: (v: number) => void,
    scale?: number
  );
  removeHorizontalListener();
  removeVerticalListener();
  removeScrollListener();
  removeAllListeners();
}

export function extend(
  publicAPI: object,
  model: object,
  initialValues?: IMouseRangeManipulatorInitialValues
): void;
export function newInstance(
  initialValues?: IMouseRangeManipulatorInitialValues
): vtkMouseRangeManipulator;

export declare const vtkMouseRangeManipulator: {
  newInstance: typeof newInstance;
  extend: typeof extend;
};

export default vtkMouseRangeManipulator;

index.js

import macro, { vtkWarningMacro } from 'vtk.js/Sources/macros';
import vtkCompositeMouseManipulator from 'vtk.js/Sources/Interaction/Manipulators/CompositeMouseManipulator';

// ----------------------------------------------------------------------------
// vtkMouseRangeManipulator methods
// ----------------------------------------------------------------------------

function vtkMouseRangeManipulator(publicAPI, model) {
  // Set our className
  model.classHierarchy.push('vtkMouseRangeManipulator');

  // Keep track of delta that is below the value
  // of one step to progressively increment it
  const incrementalDelta = new Map();

  // Internal methods
  //-------------------------------------------------------------------------
  function scaleDeltaToRange(listener, normalizedDelta) {
    return (
      normalizedDelta * ((listener.max - listener.min) / (listener.step + 1))
    );
  }

  //-------------------------------------------------------------------------
  function processDelta(listener, delta) {
    const oldValue = listener.getValue();

    // if exponential scroll is enabled, we raise our scale to the
    //  exponent of the net delta of the interaction. The further away
    // the user's cursor is from the start of the interaction, the more
    // their movements will effect the value.
    let scalingFactor = listener.exponentialScroll
      ? listener.scale ** Math.log2(Math.abs(model.interactionNetDelta) + 2)
      : listener.scale;

    // Preserve the sign of scale (which can be used to invert the scrolling direction)
    // after the power operation above (in case of exponentialScroll).
    scalingFactor = Math.abs(scalingFactor) * Math.sign(listener.scale);

    const newDelta = delta * scalingFactor + incrementalDelta.get(listener);

    // Compute new value based on step
    // In the following line, Math.abs is required so that the floor function
    // consistently rounds to the lowest absolute integer.
    const stepsToDifference = Math.floor(Math.abs(newDelta / listener.step));
    let value =
      oldValue + listener.step * stepsToDifference * Math.sign(newDelta);
    value = Math.max(value, listener.min);
    value = Math.min(value, listener.max);

    if (value !== oldValue) {
      // Update value
      listener.setValue(value);
      incrementalDelta.set(listener, 0);
    } else if (
      (value === listener.min && newDelta < 0) ||
      (value === listener.max && newDelta > 0)
    ) {
      // Do not allow incremental delta to go past range
      incrementalDelta.set(listener, 0);
    } else {
      // Store delta for the next iteration
      incrementalDelta.set(listener, newDelta);
    }
  }

  // Public API methods

  // min:number = minimum allowable value
  // max:number = maximum allowable value
  // step:number = value per step -- smaller = more steps over a given distance, larger = fewer steps over a given distance
  // getValue:fn = function that returns current value
  // setValue:fn = function to set value
  // scale:number = scale value is applied to mouse event to allow users accelerate or decelerate delta without emitting more events
  //-------------------------------------------------------------------------
  publicAPI.setHorizontalListener = (
    min,
    max,
    step,
    getValue,
    setValue,
    scale = 1,
    exponentialScroll = false
  ) => {
    const getFn = Number.isFinite(getValue) ? () => getValue : getValue;
    model.horizontalListener = {
      min,
      max,
      step,
      getValue: getFn,
      setValue,
      scale,
      exponentialScroll,
    };
    incrementalDelta.set(model.horizontalListener, 0);
    publicAPI.modified();
  };

  //-------------------------------------------------------------------------
  publicAPI.setVerticalListener = (
    min,
    max,
    step,
    getValue,
    setValue,
    scale = 1,
    exponentialScroll = false
  ) => {
    const getFn = Number.isFinite(getValue) ? () => getValue : getValue;
    model.verticalListener = {
      min,
      max,
      step,
      getValue: getFn,
      setValue,
      scale,
      exponentialScroll,
    };
    incrementalDelta.set(model.verticalListener, 0);
    publicAPI.modified();
  };

  //-------------------------------------------------------------------------
  publicAPI.setScrollListener = (
    min,
    max,
    step,
    getValue,
    setValue,
    scale = 1,
    exponentialScroll = false
  ) => {
    if (step < 0) {
      vtkWarningMacro(
        'Value of step cannot be negative. If you want to invert the scrolling direction, use a negative scale value instead.'
      );
    }
    const stepSize = Math.abs(step);
    const getFn = Number.isFinite(getValue) ? () => getValue : getValue;
    model.scrollListener = {
      min,
      max,
      step: stepSize,
      getValue: getFn,
      setValue,
      scale,
      exponentialScroll,
    };
    incrementalDelta.set(model.scrollListener, 0);
    publicAPI.modified();
  };

  //-------------------------------------------------------------------------
  publicAPI.removeHorizontalListener = () => {
    if (model.horizontalListener) {
      incrementalDelta.delete(model.horizontalListener);
      delete model.horizontalListener;
      publicAPI.modified();
    }
  };

  //-------------------------------------------------------------------------
  publicAPI.removeVerticalListener = () => {
    if (model.verticalListener) {
      incrementalDelta.delete(model.verticalListener);
      delete model.verticalListener;
      publicAPI.modified();
    }
  };

  //-------------------------------------------------------------------------
  publicAPI.removeScrollListener = () => {
    if (model.scrollListener) {
      incrementalDelta.delete(model.scrollListener);
      delete model.scrollListener;
      publicAPI.modified();
    }
  };

  //-------------------------------------------------------------------------
  publicAPI.removeAllListeners = () => {
    publicAPI.removeHorizontalListener();
    publicAPI.removeVerticalListener();
    publicAPI.removeScrollListener();
  };

  //-------------------------------------------------------------------------
  publicAPI.onButtonDown = (interactor, renderer, position) => {
    model.previousPosition = position;
    model.interactionNetDelta = 0;
    const glRenderWindow = interactor.getView();
    // Ratio is the dom size vs renderwindow size
    const ratio =
      glRenderWindow.getContainerSize()[0] / glRenderWindow.getSize()[0];
    // Get proper pixel range used by viewport in rw size space
    const size = glRenderWindow.getViewportSize(renderer);
    // rescale size to match mouse event position
    model.containerSize = size.map((v) => v * ratio);
  };

  publicAPI.onButtonUp = (interactor) => {
    interactor.exitPointerLock();
  };

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

  // TODO: at some point, this should perhaps be done in
  // RenderWindowInteractor instead of here.
  // We need to hook into mousemove directly for two reasons:
  // 1. We need to keep receiving mouse move events after the mouse button
  //    is released. This is currently not possible with
  //    vtkInteractorStyleManipulator.
  // 2. Since the mouse is stationary in pointer lock mode, we need the
  //    event.movementX and event.movementY info, which are not currently
  //    passed via interactor.onMouseMove.
  publicAPI.startPointerLockEvent = (interactor, renderer) => {
    const handlePointerLockMove = (event) => {
      publicAPI.onPointerLockMove(interactor, renderer, event);
    };

    document.addEventListener('mousemove', handlePointerLockMove);

    let subscription = null;
    const endInteraction = () => {
      document.removeEventListener('mousemove', handlePointerLockMove);
      subscription?.unsubscribe();
    };
    subscription = interactor?.onEndPointerLock(endInteraction);
  };

  publicAPI.onPointerLockMove = (interactor, renderer, event) => {
    // There is a slight delay between the `onEndPointerLock` call
    // and the last `onMouseMove` event, we must make sure the pointer
    // is still locked before we run this logic otherwise we may
    // get a `onMouseMove` call after the pointer has been unlocked.
    if (!interactor.isPointerLocked()) return;

    // previousPosition could be undefined if for some reason the
    // `startPointerLockEvent` method is called before the `onButtonDown` one.
    if (model.previousPosition == null) return;

    model.previousPosition.x += event.movementX;
    model.previousPosition.y += event.movementY;

    publicAPI.onMouseMove(interactor, renderer, model.previousPosition);
  };

  //-------------------------------------------------------------------------
  publicAPI.onMouseMove = (interactor, renderer, position) => {
    if (!model.verticalListener && !model.horizontalListener) {
      return;
    }

    // We only want to initialize the pointer lock listener
    // after the user starts moving their mouse, this way
    // we don't interfere with other events such as doubleClick,
    // for this reason we don't call this from `onButtonDown`
    if (model.usePointerLock && !interactor.isPointerLocked()) {
      interactor.requestPointerLock();
      publicAPI.startPointerLockEvent(interactor, renderer);
    }

    if (!position) {
      return;
    }

    if (model.horizontalListener) {
      const dxNorm =
        (position.x - model.previousPosition.x) / model.containerSize[0];
      const dx = scaleDeltaToRange(model.horizontalListener, dxNorm);
      model.interactionNetDelta += dx;
      processDelta(model.horizontalListener, dx);
    }
    if (model.verticalListener) {
      const dyNorm =
        (position.y - model.previousPosition.y) / model.containerSize[1];
      const dy = scaleDeltaToRange(model.verticalListener, dyNorm);
      model.interactionNetDelta += dy;
      processDelta(model.verticalListener, dy);
    }

    model.previousPosition = position;
  };

  //-------------------------------------------------------------------------
  publicAPI.onScroll = (interactor, renderer, delta) => {
    if (!model.scrollListener || !delta) {
      return;
    }
    model.interactionNetDelta += delta * model.scrollListener.step;
    processDelta(model.scrollListener, delta * model.scrollListener.step);
  };

  publicAPI.onStartScroll = () => {
    model.interactionNetDelta = 0;
  };
}

// ----------------------------------------------------------------------------
// Object factory
// ----------------------------------------------------------------------------

const DEFAULT_VALUES = {
  horizontalListener: null,
  verticalListener: null,
  scrollListener: null,
};

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

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

  // Inheritance
  macro.obj(publicAPI, model);
  vtkCompositeMouseManipulator.extend(publicAPI, model, initialValues);

  // Create get-set macros
  macro.setGet(publicAPI, model, ['usePointerLock']);

  // Object specific methods
  vtkMouseRangeManipulator(publicAPI, model);
}

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

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

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

export default { newInstance, extend };