@aics/vole-app 3.3.1 → 3.4.1

package/es/aics-image-viewer/components/dimension_sliders/SliderRows.js

@@ -0,0 +1,167 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+import { CaretRightOutlined, PauseOutlined } from "@ant-design/icons";
+import { Button, Tooltip } from "antd";
+import React, { useCallback, useState } from "react";
+import NumericInput from "../shared/NumericInput";
+import SmarterSlider from "../shared/SmarterSlider";
+import "./styles.css";
+/** A single slider row, with a slider, one or two spinbox inputs, and a max value. */
+export var DimensionSliderRow = function DimensionSliderRow(_ref) {
+  var label = _ref.label,
+    val = _ref.val,
+    _ref$valReadout = _ref.valReadout,
+    valReadout = _ref$valReadout === void 0 ? val : _ref$valReadout,
+    min = _ref.min,
+    max = _ref.max,
+    hideMax = _ref.hideMax,
+    unitSymbol = _ref.unitSymbol,
+    onSlide = _ref.onSlide,
+    _ref$onChange = _ref.onChange,
+    _onChange = _ref$onChange === void 0 ? onSlide : _ref$onChange,
+    onStart = _ref.onStart,
+    onEnd = _ref.onEnd;
+  return /*#__PURE__*/React.createElement("span", {
+    className: "axis-slider-container"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "slider-name"
+  }, label), max <= min ? /*#__PURE__*/React.createElement("i", null, "No values to adjust") : /*#__PURE__*/React.createElement("span", {
+    className: "axis-slider"
+  }, /*#__PURE__*/React.createElement(SmarterSlider, {
+    className: val.length <= 1 ? "slider-single-handle" : "",
+    connect: true,
+    range: {
+      min: min,
+      max: max
+    },
+    start: val,
+    step: 1,
+    margin: 1,
+    behaviour: "drag",
+    pips: {
+      mode: "positions",
+      values: [25, 50, 75],
+      density: 25,
+      format: {
+        // remove labels from pips
+        to: function to() {
+          return "";
+        }
+      }
+    }
+    // round slider output to nearest slice; assume any string inputs represent ints
+    ,
+    format: {
+      to: Math.round,
+      from: parseInt
+    },
+    onSlide: onSlide,
+    onChange: _onChange,
+    onStart: onStart,
+    onEnd: onEnd
+  })), max > min && /*#__PURE__*/React.createElement("span", {
+    className: "slider-values"
+  }, /*#__PURE__*/React.createElement(NumericInput, {
+    min: min,
+    max: max,
+    value: valReadout[0],
+    onChange: function onChange(value) {
+      return _onChange === null || _onChange === void 0 ? void 0 : _onChange([value].concat(_toConsumableArray(val.slice(1))));
+    },
+    unitSymbol: unitSymbol
+  }), val.length > 1 && /*#__PURE__*/React.createElement(React.Fragment, null, " , ", /*#__PURE__*/React.createElement(NumericInput, {
+    min: min,
+    max: max,
+    value: valReadout[1],
+    onChange: function onChange(value) {
+      return _onChange === null || _onChange === void 0 ? void 0 : _onChange([val[0], value].concat(_toConsumableArray(val.slice(2))));
+    },
+    unitSymbol: unitSymbol
+  })), !hideMax && /*#__PURE__*/React.createElement(React.Fragment, null, " / ", max)));
+};
+
+/** Extremely thin wrapper around `SliderRow` for adjusting 0-indexed values that the user should see as 1-indexed. */
+export var IndexSliderRow = function IndexSliderRow(props) {
+  return /*#__PURE__*/React.createElement(DimensionSliderRow, {
+    label: props.label,
+    val: [props.val + 1],
+    valReadout: props.valReadout === undefined ? undefined : [props.valReadout + 1],
+    min: 1,
+    max: props.max,
+    onSlide: function onSlide(_ref2) {
+      var _props$onSlide;
+      var _ref3 = _slicedToArray(_ref2, 1),
+        value = _ref3[0];
+      return (_props$onSlide = props.onSlide) === null || _props$onSlide === void 0 ? void 0 : _props$onSlide.call(props, value - 1);
+    },
+    onChange: function onChange(_ref4) {
+      var _props$onChange;
+      var _ref5 = _slicedToArray(_ref4, 1),
+        value = _ref5[0];
+      return (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, value - 1);
+    },
+    onStart: props.onStart,
+    onEnd: props.onEnd
+  });
+};
+
+/** Wrapper around `SliderRow` that adds a play button and accounts for the case where not all of an axis is loaded. */
+export var PlaySliderRow = function PlaySliderRow(props) {
+  var onChange = props.onChange,
+    onStart = props.onStart,
+    onEnd = props.onEnd;
+  // In partially-loaded axes, stores the displayed value of the slider while the user is sliding it
+  var _useState = useState(props.val),
+    _useState2 = _slicedToArray(_useState, 2),
+    valReadout = _useState2[0],
+    setValReadout = _useState2[1];
+  // Tracks when the user is sliding the slider and `valReadout` may have to sub in for props
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    sliderHeld = _useState4[0],
+    setSliderHeld = _useState4[1];
+  var wrappedOnChange = useCallback(function (val) {
+    return onChange === null || onChange === void 0 ? void 0 : onChange(val);
+  }, [onChange]);
+  var wrappedSetValReadout = useCallback(function (val) {
+    return setValReadout(val);
+  }, []);
+  var wrappedOnStart = useCallback(function () {
+    setValReadout(props.val);
+    setSliderHeld(true);
+    onStart === null || onStart === void 0 || onStart();
+  }, [onStart, props.val]);
+  var wrappedOnEnd = useCallback(function () {
+    setSliderHeld(false);
+    onEnd === null || onEnd === void 0 || onEnd();
+  }, [onEnd]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IndexSliderRow, {
+    label: props.label,
+    val: props.val,
+    valReadout: props.updateWhileSliding || !sliderHeld ? undefined : valReadout,
+    max: props.max,
+    onSlide: props.updateWhileSliding ? wrappedOnChange : wrappedSetValReadout,
+    onChange: props.updateWhileSliding ? undefined : wrappedOnChange,
+    onStart: wrappedOnStart,
+    onEnd: wrappedOnEnd
+  }), props.max > 1 && /*#__PURE__*/React.createElement(Tooltip, {
+    placement: "top",
+    title: "Play through sequence",
+    trigger: ["hover", "focus"]
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: "slider-play-button",
+    onClick: function onClick() {
+      return props.onTogglePlayback(!props.playing);
+    },
+    icon: props.playing ? /*#__PURE__*/React.createElement(PauseOutlined, null) : /*#__PURE__*/React.createElement(CaretRightOutlined, null),
+    "aria-label": (props.playing ? "Pause " : "Play ") + props.label
+  })));
+};

package/es/aics-image-viewer/components/{AxisClipSliders → dimension_sliders}/styles.css

@@ -1,5 +1,5 @@
 .clip-sliders{
-  --w-group-title:50px;
+  --w-group-title:60px;
   --w-axis-slider:480px;
   --w-name:10px;
   --w-values-3d:160px;
@@ -93,8 +93,14 @@
 .clip-sliders .slider-group .slider-group-title{
       flex:0 0 var(--w-group-title);
       margin:0;
+      font-family:var(--font-family);
+      color:var(--color-text-header);
     }
 
+.clip-sliders .slider-group .slider-group-title.group-title-extra{
+        flex-basis:calc(var(--w-group-title) + var(--w-name) + 14px);
+      }
+
 .clip-sliders .slider-group .slider-group-rows{
       flex:1 1 auto;
     }

package/es/aics-image-viewer/components/shared/NumericInput/index.js

@@ -4,8 +4,8 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-import React from "react";
 import { CaretDownOutlined, CaretUpOutlined } from "@ant-design/icons";
+import React from "react";
 import { useRefWithSetter } from "../../../shared/utils/hooks";
 import "./styles.css";
 /**
@@ -27,6 +27,8 @@ var NumericInput = function NumericInput(_ref) {
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$unitSymbol = _ref.unitSymbol,
+    unitSymbol = _ref$unitSymbol === void 0 ? "" : _ref$unitSymbol,
     onChange = _ref.onChange;
   // While the input has focus, allow invalid input, just don't call `onChange` with it
   var _React$useState = React.useState(false),
@@ -100,7 +102,7 @@ var NumericInput = function NumericInput(_ref) {
     className: fullClassName,
     onKeyDown: onKeyDown
   }, /*#__PURE__*/React.createElement("input", {
-    value: hasFocus ? textContent : displayedValue,
+    value: hasFocus ? textContent : displayedValue + unitSymbol,
     step: step,
     min: min,
     max: max,

package/es/aics-image-viewer/components/shared/SliderRow/index.js

@@ -23,10 +23,12 @@ var SliderRow = function SliderRow(props) {
       max: props.max
     },
     start: props.start,
+    disabled: props.disabled,
     connect: true,
     tooltips: true,
     behaviour: "drag",
     format: props.formatInteger ? INTEGER_FORMATTER : undefined,
+    onSlide: props.onSlide,
     onUpdate: props.onUpdate,
     onChange: props.onChange
   })), props.children && /*#__PURE__*/React.createElement("div", {

package/es/aics-image-viewer/components/shared/SliderRow/styles.css

@@ -21,6 +21,7 @@
     align-items:center;
   }
 
-  .viewer-control-row .control .control-slider{
+  .viewer-control-row .control .control-slider,
+    .viewer-control-row .control .control-extra:first-child{
       flex-grow:1;
     }

package/es/aics-image-viewer/shared/constants.js

@@ -13,7 +13,7 @@ export var
   BACKGROUND_COLOR_DEFAULT = [0, 0, 0],
   BOUNDING_BOX_COLOR_DEFAULT = [255, 255, 255],
   AXIS_MARGIN_DEFAULT = [16, 16],
-  SCALE_BAR_MARGIN_DEFAULT = [120, 12],
+  SCALE_BAR_MARGIN_DEFAULT = [220, 12],
   // These settings were chosen to work well with most AICS microscopy pipeline images.
   // These numbers mean: remap the bottom LUT_MIN_PERCENTILE fraction of pixels to zero intensity,
   // and linearly increase intensity up to the LUT_MAX_PERCENTILE fraction of pixels.

package/es/aics-image-viewer/shared/utils/camera.js

@@ -0,0 +1,122 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { mat3, quat, vec3 } from "gl-matrix";
+import React from "react";
+
+/**
+ * Converts a `vec3` to a `[number, number, number]`.
+ *
+ * Technically, these are already equivalent types for all the math we do here, but the `vec3` type also includes any
+ * other indexable collection of `number`s, so this keeps the type checker happy.
+ */
+var toArray = function toArray(v) {
+  return [v[0], v[1], v[2]];
+};
+var vecToTarget = function vecToTarget(state) {
+  return vec3.subtract(vec3.create(), state.target, state.position);
+};
+
+/** Transpose a 3x3 matrix */
+var transpose = function transpose(matrix) {
+  var out = mat3.create();
+  mat3.transpose(out, matrix);
+  return out;
+};
+
+/** Multiply every vector in `state` by `matrix` */
+export var applyMatrix = function applyMatrix(state, matrix) {
+  var position = toArray(vec3.transformMat3(vec3.create(), state.position, matrix));
+  var up = toArray(vec3.transformMat3(vec3.create(), state.up, matrix));
+  var target = toArray(vec3.transformMat3(vec3.create(), state.target, matrix));
+  return {
+    position: position,
+    up: up,
+    target: target
+  };
+};
+/** Orthonormal camera basis derived from `state`. */
+var getBasis = function getBasis(state) {
+  var toTarget = vecToTarget(state);
+  var distance = vec3.length(toTarget);
+  var forward = vec3.scale(vec3.create(), toTarget, 1 / distance);
+  var right = vec3.cross(vec3.create(), forward, state.up);
+  vec3.normalize(right, right);
+  var up = vec3.cross(vec3.create(), right, forward);
+  return {
+    forward: forward,
+    right: right,
+    up: up,
+    distance: distance
+  };
+};
+
+/** Creates a XYZ rotation matrix with the given angles */
+export var rotationMatrix = function rotationMatrix(x, y, z) {
+  var rotationQuat = quat.create();
+  quat.rotateX(rotationQuat, rotationQuat, x);
+  quat.rotateY(rotationQuat, rotationQuat, y);
+  quat.rotateZ(rotationQuat, rotationQuat, z);
+  var rotation = mat3.fromQuat(mat3.create(), rotationQuat);
+  return rotation;
+};
+
+/** Extract Tait-Bryan angles from a `CameraState` */
+export var getRotationAngles = function getRotationAngles(state) {
+  var _getBasis = getBasis(state),
+    forward = _getBasis.forward,
+    right = _getBasis.right,
+    up = _getBasis.up;
+  var sy = Math.max(-1, Math.min(1, -forward[0]));
+  var y = Math.asin(sy);
+  if (Math.abs(sy) < 1 - 1e-6) {
+    return {
+      x: Math.atan2(forward[1], -forward[2]),
+      y: y,
+      z: Math.atan2(-up[0], right[0])
+    };
+  }
+  // Gimbal lock: y = ±90°, fold combined rotation into x.
+  return {
+    x: Math.atan2(up[2], up[1]),
+    y: y,
+    z: 0
+  };
+};
+
+/**
+ * Constructs a new `CameraState` equivalent to rotating `state` about the origin such that the camera returns to its
+ * default *orientation* (looking towards -Z, +Y up), though not necessarily its default *position*.
+ */
+export var defaultOrientedCamera = function defaultOrientedCamera(state) {
+  var distance = vec3.length(vecToTarget(state));
+  // Rotate `target` about the origin, then derive `position` from `target`
+  var _getRotationAngles = getRotationAngles(state),
+    x = _getRotationAngles.x,
+    y = _getRotationAngles.y,
+    z = _getRotationAngles.z;
+  var matrix = transpose(rotationMatrix(x, y, z));
+  var target = toArray(vec3.transformMat3(vec3.create(), state.target, matrix));
+  var position = toArray(vec3.add(vec3.create(), target, vec3.fromValues(0, 0, distance)));
+  return {
+    target: target,
+    position: position,
+    up: [0, 1, 0]
+  };
+};
+
+/** Creates a callback that performs some action on the camera, by applying `transform` to the current camera state. */
+export var useCameraCallback = function useCameraCallback(transform, view3d) {
+  return React.useCallback(function () {
+    var state = view3d.getCameraState();
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    var nextState = transform.apply(void 0, [state].concat(args));
+    view3d.setCameraState(nextState);
+    return _objectSpread(_objectSpread({}, state), nextState);
+  }, [view3d, transform]);
+};

package/es/aics-image-viewer/shared/utils/test/camera.test.js

@@ -0,0 +1,127 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { describe, expect, it } from "@jest/globals";
+import { mat3 } from "gl-matrix";
+import { applyMatrix, defaultOrientedCamera, getRotationAngles, rotationMatrix } from "../camera";
+var expectCameraStateToBe = function expectCameraStateToBe(actual, expected, precision) {
+  console.log(actual.up, expected.up);
+  var _actual$position = _slicedToArray(actual.position, 3),
+    apx = _actual$position[0],
+    apy = _actual$position[1],
+    apz = _actual$position[2];
+  var _expected$position = _slicedToArray(expected.position, 3),
+    epx = _expected$position[0],
+    epy = _expected$position[1],
+    epz = _expected$position[2];
+  expect(apx).toBeCloseTo(epx, precision);
+  expect(apy).toBeCloseTo(epy, precision);
+  expect(apz).toBeCloseTo(epz, precision);
+  var _actual$target = _slicedToArray(actual.target, 3),
+    atx = _actual$target[0],
+    aty = _actual$target[1],
+    atz = _actual$target[2];
+  var _expected$target = _slicedToArray(expected.target, 3),
+    etx = _expected$target[0],
+    ety = _expected$target[1],
+    etz = _expected$target[2];
+  expect(atx).toBeCloseTo(etx, precision);
+  expect(aty).toBeCloseTo(ety, precision);
+  expect(atz).toBeCloseTo(etz, precision);
+  var _actual$up = _slicedToArray(actual.up, 3),
+    aux = _actual$up[0],
+    auy = _actual$up[1],
+    auz = _actual$up[2];
+  var _expected$up = _slicedToArray(expected.up, 3),
+    eux = _expected$up[0],
+    euy = _expected$up[1],
+    euz = _expected$up[2];
+  expect(aux).toBeCloseTo(eux, precision);
+  expect(auy).toBeCloseTo(euy, precision);
+  expect(auz).toBeCloseTo(euz, precision);
+};
+describe("applyMatrix", function () {
+  it("multiplies every vector in a `CameraState` by a matrix", function () {
+    var INPUT = {
+      position: [3, 0, 0],
+      up: [0, 1, 0],
+      target: [0, 0, 1]
+    };
+    var EXPECTED = {
+      position: [0, 0, 3],
+      up: [0, 2, 0],
+      target: [3, 0, 0]
+    };
+    var actual = applyMatrix(INPUT, mat3.fromValues(0, 0, 1, 0, 2, 0, 3, 0, 0));
+    expectCameraStateToBe(actual, EXPECTED);
+  });
+  it("properly handles the matrix in column-major order", function () {
+    var INPUT = {
+      position: [7, 11, 3],
+      up: [0, 0, 1],
+      target: [2, 3, 5]
+    };
+    var EXPECTED = {
+      position: [38, 31, 57],
+      up: [3, 2, 1],
+      target: [23, 17, 20]
+    };
+    var actual = applyMatrix(INPUT, mat3.fromValues(1, 2, 3, 2, 1, 3, 3, 2, 1));
+    expectCameraStateToBe(actual, EXPECTED);
+  });
+});
+describe("defaultOrientedCamera", function () {
+  var testDefaultOrientedCamera = function testDefaultOrientedCamera(input, position, target) {
+    var result = defaultOrientedCamera(input);
+    expectCameraStateToBe(result, {
+      position: position,
+      target: target,
+      up: [0, 1, 0]
+    });
+  };
+  it("returns the camera to its default orientation (towards -Z, with +Y up)", function () {
+    testDefaultOrientedCamera({
+      position: [Math.SQRT2 / 2, 0, Math.SQRT2 / 2],
+      target: [0, 0, 0],
+      up: [-1, 0, 0]
+    }, [0, 0, 1], [0, 0, 0]);
+  });
+  it("preserves the distance from `position` to `target`", function () {
+    testDefaultOrientedCamera({
+      position: [0, 1, 1],
+      target: [0, 0, 0],
+      up: [-1, 0, 0]
+    }, [0, 0, Math.SQRT2], [0, 0, 0]);
+  });
+  it("rotates both `target` and `position` about the origin", function () {
+    testDefaultOrientedCamera({
+      position: [-1, -2, 1],
+      target: [-1, -1, 1],
+      up: [-1, 0, 0]
+    }, [1, 1, 2], [1, 1, 1]);
+  });
+});
+describe("getRotationAngles", function () {
+  it("is the inverse of applying a rotation matrix to a default-oriented camera when -PI/2 < Y < PI/2", function () {
+    var testRotationAnglesInverse = function testRotationAnglesInverse(x, y, z, target) {
+      var state = {
+        position: [target[0], target[1], target[2] - 1],
+        target: target,
+        up: [0, 1, 0]
+      };
+      var rotated = applyMatrix(defaultOrientedCamera(state), rotationMatrix(x, y, z));
+      var result = getRotationAngles(rotated);
+      expect(result.x).toBeCloseTo(x);
+      expect(result.y).toBeCloseTo(y);
+      expect(result.z).toBeCloseTo(z);
+    };
+    testRotationAnglesInverse(Math.PI / 2, 0, 0, [0, 0, 0]);
+    testRotationAnglesInverse(Math.PI / 2, 0, 0, [1, 2, 3]);
+    testRotationAnglesInverse(Math.PI / 3, Math.PI / 3, Math.PI / 3, [3, 3, 3]);
+    testRotationAnglesInverse(Math.PI, Math.PI / 4, -Math.PI, [3, 3, 3]);
+    testRotationAnglesInverse(1, -0.8, 3, [0.5, 0.8, 1.2]);
+  });
+});