@aics/vole-app 3.3.1 → 3.4.1

package/es/aics-image-viewer/components/App/index.js

@@ -41,6 +41,7 @@ var defaultVisibleControls = {
   alphaMaskSlider: true,
   autoRotateButton: true,
   axisClipSliders: true,
+  rotationSliders: true,
   brightnessSlider: true,
   backgroundColorPicker: true,
   boundingBoxColorPicker: true,

package/es/aics-image-viewer/components/BottomPanel/index.js

@@ -5,37 +5,66 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 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 { Button, Drawer } from "antd";
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import ViewerIcon from "../shared/ViewerIcon";
 import "./styles.css";
 var BottomPanel = function BottomPanel(_ref) {
-  var children = _ref.children,
+  var _contents$page;
+  var contents = _ref.contents,
     openProp = _ref.open,
-    title = _ref.title,
+    pageProp = _ref.pageIndex,
     height = _ref.height,
-    onOpenChange = _ref.onOpenChange;
+    onPageChange = _ref.onPageChange;
   var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
     openState = _useState2[0],
     setOpenState = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    pageState = _useState4[0],
+    setPageState = _useState4[1];
   var open = openProp !== null && openProp !== void 0 ? openProp : openState;
-  var toggleDrawer = useCallback(function () {
+  var page = pageProp !== null && pageProp !== void 0 ? pageProp : pageState;
+  var setPage = useCallback(function (index) {
+    var nextOpen = !open || index !== page;
     if (openProp === undefined) {
-      setOpenState(!open);
+      setOpenState(nextOpen);
     }
-    onOpenChange === null || onOpenChange === void 0 || onOpenChange(!open);
-  }, [open, openProp, onOpenChange]);
-  var optionsButton = /*#__PURE__*/React.createElement(Button, {
-    className: "options-button",
-    size: "small",
-    onClick: toggleDrawer
-  }, title || "Options", /*#__PURE__*/React.createElement(ViewerIcon, {
-    type: "closePanel",
-    className: "button-arrow",
-    style: {
-      fontSize: "15px"
+    if (pageProp === undefined) {
+      setPageState(index);
     }
-  }));
+    onPageChange === null || onPageChange === void 0 || onPageChange(nextOpen ? index : null);
+  }, [open, openProp, page, pageProp, onPageChange]);
+
+  // If length of `contents` decreases, ensure we're still on a valid page
+  useEffect(function () {
+    if (page >= contents.length && contents.length > 0) {
+      var nextPage = contents.length - 1;
+      if (pageProp === undefined) {
+        setPageState(nextPage);
+      }
+      onPageChange === null || onPageChange === void 0 || onPageChange(open ? nextPage : null);
+    }
+  }, [contents.length, onPageChange, open, page, pageProp]);
+  var optionsButton = /*#__PURE__*/React.createElement("div", {
+    className: "options-button-container"
+  }, contents.map(function (_ref2, index) {
+    var title = _ref2.title;
+    return /*#__PURE__*/React.createElement(Button, {
+      key: index,
+      className: open && page === index ? "options-button button-open" : "options-button",
+      size: "small",
+      onClick: function onClick() {
+        return setPage(index);
+      }
+    }, title, /*#__PURE__*/React.createElement(ViewerIcon, {
+      type: "closePanel",
+      className: "button-arrow",
+      style: {
+        fontSize: "15px"
+      }
+    }));
+  }).reverse());
   return /*#__PURE__*/React.createElement("div", {
     className: "bottom-panel"
   }, /*#__PURE__*/React.createElement(Drawer, {
@@ -49,6 +78,6 @@ var BottomPanel = function BottomPanel(_ref) {
     height: height !== null && height !== void 0 ? height : 190
   }, /*#__PURE__*/React.createElement("div", {
     className: "drawer-body-wrapper"
-  }, children)));
+  }, open !== null && ((_contents$page = contents[page]) === null || _contents$page === void 0 ? void 0 : _contents$page.children))));
 };
 export default BottomPanel;

package/es/aics-image-viewer/components/BottomPanel/styles.css

@@ -46,18 +46,27 @@
       color:white;
     }
 
+  .bottom-panel .options-button-container{
+    position:absolute;
+    right:0;
+  }
+
   .bottom-panel .options-button{
+    bottom:0;
+    transition:bottom 0.1s linear;
     border:none;
     box-shadow:none;
     margin-right:0.8em;
     margin-bottom:0.2em;
-    position:absolute;
-    right:0;
   }
 
   .bottom-panel .button-arrow{
     transform:rotate(270deg);
-    transition:transform 0.2s linear !important;
+    transition:transform 0.1s linear !important;
+  }
+
+  .bottom-panel .options-button.button-open .button-arrow{
+    transform:rotate(90deg);
   }
 
   .bottom-panel .drawer-body-wrapper{
@@ -65,6 +74,10 @@
     width:100%;
   }
 
+  .bottom-panel .ant-drawer.ant-drawer-open .options-button:not(.button-open){
+      bottom:0.8em;
+    }
+
   .bottom-panel .ant-drawer.ant-drawer-open .ant-drawer-content-wrapper{
       transform:none;
       box-shadow:none;
@@ -79,7 +92,3 @@
     .bottom-panel .ant-drawer.ant-drawer-open .ant-drawer-title .ant-btn.ant-btn-default{
       background-color:var(--color-controlpanel-drawer-bg);
     }
-
-  .bottom-panel .ant-drawer.ant-drawer-open .button-arrow{
-      transform:rotate(90deg);
-    }

package/es/aics-image-viewer/components/CellViewerCanvasWrapper/index.js

@@ -9,8 +9,9 @@ import React from "react";
 import { CLIPPING_PANEL_HEIGHT_DEFAULT, CLIPPING_PANEL_HEIGHT_TALL } from "../../shared/constants";
 import { ViewMode } from "../../shared/enums";
 import { select, useViewerState } from "../../state/store";
-import AxisClipSliders from "../AxisClipSliders";
 import BottomPanel from "../BottomPanel";
+import { AxisClipSliders } from "../dimension_sliders/AxisClipSliders";
+import { RotationSliders } from "../dimension_sliders/RotationSliders";
 import "./styles.css";
 var ViewerWrapper = function ViewerWrapper(props) {
   var view3dviewerRef = /*#__PURE__*/React.createRef();
@@ -47,6 +48,36 @@ var ViewerWrapper = function ViewerWrapper(props) {
   var time = useViewerState(select("time"));
   var scene = useViewerState(select("scene"));
   var clippingPanelTall = numTimesteps > 1 && numScenes > 1 && viewMode === ViewMode.threeD;
+  var bottomPanelContents = [];
+  if (visibleControls.axisClipSliders && !!props.image) {
+    bottomPanelContents.push({
+      title: "Clipping",
+      children: /*#__PURE__*/React.createElement(AxisClipSliders, {
+        mode: viewMode,
+        image: props.image,
+        changeViewerSetting: changeViewerSetting,
+        numSlices: props.numSlices,
+        numSlicesLoaded: props.numSlicesLoaded,
+        numScenes: numScenes,
+        region: region,
+        slices: slice,
+        numTimesteps: numTimesteps,
+        time: time,
+        scene: scene,
+        playControls: props.playControls,
+        playingAxis: props.playingAxis
+      })
+    });
+  }
+  if (visibleControls.rotationSliders) {
+    bottomPanelContents.push({
+      title: "Rotation",
+      children: /*#__PURE__*/React.createElement(RotationSliders, {
+        view3d: props.view3d,
+        disable: viewMode !== ViewMode.threeD
+      })
+    });
+  }
   return /*#__PURE__*/React.createElement("div", {
     className: "cell-canvas",
     style: _objectSpread(_objectSpread({}, STYLES.viewer), {}, {
@@ -56,25 +87,14 @@ var ViewerWrapper = function ViewerWrapper(props) {
     ref: view3dviewerRef,
     style: STYLES.view3d
   }), /*#__PURE__*/React.createElement(BottomPanel, {
-    title: "Clipping",
     open: props.clippingPanelOpen,
-    onOpenChange: props.onClippingPanelOpenChange,
-    height: clippingPanelTall ? CLIPPING_PANEL_HEIGHT_TALL : CLIPPING_PANEL_HEIGHT_DEFAULT
-  }, visibleControls.axisClipSliders && !!props.image && /*#__PURE__*/React.createElement(AxisClipSliders, {
-    mode: viewMode,
-    image: props.image,
-    changeViewerSetting: changeViewerSetting,
-    numSlices: props.numSlices,
-    numSlicesLoaded: props.numSlicesLoaded,
-    numScenes: numScenes,
-    region: region,
-    slices: slice,
-    numTimesteps: numTimesteps,
-    time: time,
-    scene: scene,
-    playControls: props.playControls,
-    playingAxis: props.playingAxis
-  })), renderOverlay());
+    onPageChange: function onPageChange(open) {
+      var _props$onClippingPane;
+      return (_props$onClippingPane = props.onClippingPanelOpenChange) === null || _props$onClippingPane === void 0 ? void 0 : _props$onClippingPane.call(props, open !== null);
+    },
+    height: clippingPanelTall ? CLIPPING_PANEL_HEIGHT_TALL : CLIPPING_PANEL_HEIGHT_DEFAULT,
+    contents: bottomPanelContents
+  }), renderOverlay());
 };
 export default ViewerWrapper;
 var STYLES = {

package/es/aics-image-viewer/components/ControlPanel/index.js

@@ -110,6 +110,8 @@ function ControlPanel(props) {
       icon: typeof icon === "string" ? icon : undefined
     }, _typeof(icon) === "object" && icon));
   };
+
+  // TODO this can just be a component...?
   var renderAdvancedSettings = function renderAdvancedSettings() {
     var items = [{
       key: 0,

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

@@ -0,0 +1,148 @@
+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 _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 React, { useEffect } from "react";
+import { activeAxisMap } from "../../shared/types";
+import { DimensionSliderRow, IndexSliderRow, PlaySliderRow } from "./SliderRows";
+var AXES = ["x", "y", "z"];
+export var AxisClipSliders = function AxisClipSliders(props) {
+  var activeAxis = activeAxisMap[props.mode];
+  var pauseOnInput = function pauseOnInput(axis) {
+    // Pause on slider input unless user is scrubbing along the playing axis (playback is held while this is happening)
+    if (!props.playControls.playHolding || props.playingAxis !== axis) {
+      props.playControls.pause();
+    }
+  };
+  var updateRegion = function updateRegion(axis, minval, maxval) {
+    pauseOnInput(axis);
+    var changeViewerSetting = props.changeViewerSetting,
+      numSlices = props.numSlices;
+    // get a value from 0-1
+    var max = numSlices[axis];
+    var start = minval / max;
+    var end = maxval / max;
+    changeViewerSetting("region", _defineProperty({}, axis, [start, end]));
+  };
+  var updateSlice = function updateSlice(axis, slice) {
+    pauseOnInput(axis);
+    props.changeViewerSetting("slice", _defineProperty({}, axis, slice / props.numSlices[axis]));
+  };
+  var updateTime = function updateTime(time) {
+    pauseOnInput("t");
+    props.changeViewerSetting("time", time);
+  };
+
+  // Pause when view mode or volume size has changed
+  useEffect(function () {
+    return props.playControls.pause();
+  }, [props.mode, props.image, props.playControls]);
+  var handlePlayPause = function handlePlayPause(axis, willPlay) {
+    if (willPlay) {
+      props.playControls.play(axis);
+    } else {
+      props.playControls.pause();
+    }
+  };
+  var create2dAxisSlider = function create2dAxisSlider(axis) {
+    var numSlices = props.numSlices[axis];
+    var numSlicesLoaded = props.numSlicesLoaded[axis];
+    return /*#__PURE__*/React.createElement("div", {
+      key: axis + numSlices + numSlicesLoaded,
+      className: "slider-row slider-".concat(axis)
+    }, /*#__PURE__*/React.createElement(PlaySliderRow, {
+      label: axis.toUpperCase(),
+      val: Math.round(props.slices[axis] * numSlices),
+      max: numSlices,
+      onChange: function onChange(val) {
+        return updateSlice(axis, val);
+      },
+      onStart: function onStart() {
+        return props.playControls.startHold(axis);
+      },
+      onEnd: function onEnd() {
+        return props.playControls.endHold();
+      },
+      playing: props.playingAxis === axis,
+      onTogglePlayback: function onTogglePlayback(willPlay) {
+        return handlePlayPause(axis, willPlay);
+      },
+      updateWhileSliding: numSlices === numSlicesLoaded
+    }));
+  };
+  var create3dAxisSlider = function create3dAxisSlider(axis) {
+    var numSlices = props.numSlices[axis];
+    if (numSlices === 1) {
+      return null;
+    }
+    var region = props.region[axis];
+    return /*#__PURE__*/React.createElement("div", {
+      key: axis + numSlices + "3d",
+      className: "slider-row slider-".concat(axis)
+    }, /*#__PURE__*/React.createElement(DimensionSliderRow, {
+      label: axis.toUpperCase(),
+      val: [Math.round(region[0] * numSlices), Math.round(region[1] * numSlices)],
+      min: 0,
+      max: numSlices,
+      onSlide: function onSlide(values) {
+        return updateRegion(axis, values[0], values[1]);
+      },
+      onStart: function onStart() {
+        return props.playControls.startHold(axis);
+      },
+      onEnd: function onEnd() {
+        return props.playControls.endHold();
+      }
+    }));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: activeAxis ? "clip-sliders clip-sliders-2d" : "clip-sliders"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "slider-group"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "slider-group-title"
+  }, "ROI"), /*#__PURE__*/React.createElement("span", {
+    className: "slider-group-rows"
+  }, activeAxis ? create2dAxisSlider(activeAxis) : AXES.map(create3dAxisSlider))), props.numTimesteps > 1 && /*#__PURE__*/React.createElement("span", {
+    className: "slider-group"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "slider-group-title"
+  }, "Time"), /*#__PURE__*/React.createElement("span", {
+    className: "slider-group-rows"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "slider-row slider-t"
+  }, /*#__PURE__*/React.createElement(PlaySliderRow, {
+    label: "",
+    val: props.time,
+    max: props.numTimesteps,
+    playing: props.playingAxis === "t",
+    onTogglePlayback: function onTogglePlayback(willPlay) {
+      return handlePlayPause("t", willPlay);
+    },
+    onChange: function onChange(time) {
+      return updateTime(time);
+    },
+    onStart: function onStart() {
+      return props.playControls.startHold("t");
+    },
+    onEnd: function onEnd() {
+      return props.playControls.endHold();
+    }
+  })))), props.numScenes > 1 && /*#__PURE__*/React.createElement("span", {
+    className: "slider-group"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "slider-group-title"
+  }, "Scene"), /*#__PURE__*/React.createElement("span", {
+    className: "slider-group-rows"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "slider-row slider-scene"
+  }, /*#__PURE__*/React.createElement(IndexSliderRow, {
+    label: "",
+    val: props.scene,
+    max: props.numScenes,
+    onChange: function onChange(scene) {
+      props.changeViewerSetting("scene", scene);
+      props.changeViewerSetting("useExactScaleLevel", false);
+    }
+  })))));
+};

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

@@ -0,0 +1,167 @@
+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); }
+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 { Button, Space } from "antd";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { ViewMode } from "../../shared/enums";
+import { applyMatrix, defaultOrientedCamera, getRotationAngles, rotationMatrix, useCameraCallback } from "../../shared/utils/camera";
+import { select, useViewerState } from "../../state/store";
+import { DimensionSliderRow } from "./SliderRows";
+
+/** Convert an angle from degrees to radians */
+var toRadians = function toRadians(deg) {
+  return deg * (Math.PI / 180);
+};
+/** Convert an angle from radians to degrees */
+var toDegrees = function toDegrees(rad) {
+  return rad * (180 / Math.PI);
+};
+export var RotationSliders = function RotationSliders(_ref) {
+  var view3d = _ref.view3d,
+    disable = _ref.disable;
+  var _useState = useState(function () {
+      return getRotationAngles(view3d.getCameraState());
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    rotation = _useState2[0],
+    setRotation = _useState2[1];
+  var autorotate = useViewerState(select("autorotate"));
+  var viewMode = useViewerState(select("viewMode"));
+  var changeViewerSetting = useViewerState(select("changeViewerSetting"));
+
+  // Set to `true` when user interacts with this component, `false` when they click on the canvas or start autorotate.
+  // While `hasControlRef.current === true`, this component's state propagates *down* to `view3d`
+  // While `hasControlRef.current === false`, `view3d`'s camera state is synced *up* to this component.
+  // TODO are there any other events besides the above that cause the volume to rotate? Ideally this would be an event
+  //   that `View3d` would let us track directly.
+  var hasControlRef = useRef(false);
+  var handleRotate = useCallback(function (axis, deg) {
+    hasControlRef.current = true;
+    if (autorotate) {
+      changeViewerSetting("autorotate", false);
+    }
+    setRotation(function (current) {
+      return _objectSpread(_objectSpread({}, current), {}, _defineProperty({}, axis, toRadians(deg)));
+    });
+  }, [autorotate, changeViewerSetting]);
+  var handleJump = useCallback(function (x, y, z) {
+    hasControlRef.current = true;
+    setRotation({
+      x: x,
+      y: y,
+      z: z
+    });
+  }, []);
+  var jumpXMinus = useCallback(function () {
+    return handleJump(0, -Math.PI / 2, 0);
+  }, [handleJump]);
+  var jumpXPlus = useCallback(function () {
+    return handleJump(0, Math.PI / 2, 0);
+  }, [handleJump]);
+  var jumpYMinus = useCallback(function () {
+    return handleJump(Math.PI / 2, 0, -Math.PI / 2);
+  }, [handleJump]);
+  var jumpYPlus = useCallback(function () {
+    return handleJump(-Math.PI / 2, 0, -Math.PI / 2);
+  }, [handleJump]);
+  var jumpZMinus = useCallback(function () {
+    return handleJump(Math.PI, 0, -Math.PI);
+  }, [handleJump]);
+  var jumpZPlus = useCallback(function () {
+    return handleJump(0, 0, 0);
+  }, [handleJump]);
+
+  // Take away control when autorotate is enabled
+  useEffect(function () {
+    if (autorotate) {
+      hasControlRef.current = false;
+    }
+  }, [autorotate]);
+  var rotateCameraTo = useCameraCallback(function (state, rotation) {
+    var matrix = rotationMatrix(rotation.x, rotation.y, rotation.z);
+    return applyMatrix(defaultOrientedCamera(state), matrix);
+  }, view3d);
+
+  // Sync down rotation state while this component is "in control."
+  useEffect(function () {
+    if (hasControlRef.current && viewMode === ViewMode.threeD) {
+      rotateCameraTo(rotation);
+    }
+  }, [rotateCameraTo, rotation, viewMode]);
+
+  // Set up event listeners on mount.
+  useEffect(function () {
+    // TODO this is *extremely brittle*: setting this clears away any other listener for render events.
+    //   At time of writing, `setOnRenderCallback` appears not to be used anywhere else in either this package or
+    //   vole-core, but that could change at any time.
+    //   Ideally `View3d` would have an `addEventListener`/`removeEventListener` model.
+    view3d.setOnRenderCallback(function () {
+      if (!hasControlRef.current) {
+        setRotation(getRotationAngles(view3d.getCameraState()));
+      }
+    });
+    var clickListener = function clickListener() {
+      return hasControlRef.current = false;
+    };
+    view3d.getDOMElement().addEventListener("mousedown", clickListener);
+    return function () {
+      return view3d.getDOMElement().removeEventListener("mousedown", clickListener);
+    };
+  }, [view3d]);
+  var createRotateSlider = function createRotateSlider(axis) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "".concat(axis, "-rotate"),
+      className: "slider-row slider-".concat(axis)
+    }, /*#__PURE__*/React.createElement(DimensionSliderRow, {
+      label: axis.toUpperCase(),
+      val: [toDegrees(rotation[axis])],
+      min: -180,
+      max: 180,
+      hideMax: true,
+      onSlide: function onSlide(_ref2) {
+        var _ref3 = _slicedToArray(_ref2, 1),
+          deg = _ref3[0];
+        return handleRotate(axis, deg);
+      },
+      unitSymbol: "\xB0"
+    }));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "clip-sliders clip-sliders-2d"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "slider-group"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "slider-group-title"
+  }, "Rotate"), disable ? /*#__PURE__*/React.createElement("span", {
+    className: "axis-slider-container"
+  }, /*#__PURE__*/React.createElement("i", null, "Unavailable in 2d mode")) : /*#__PURE__*/React.createElement("span", {
+    className: "slider-group-rows"
+  }, createRotateSlider("x"), createRotateSlider("y"), createRotateSlider("z"))), !disable && /*#__PURE__*/React.createElement("span", {
+    className: "slider-group"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "slider-group-title group-title-extra"
+  }, "Jump to"), /*#__PURE__*/React.createElement("span", {
+    className: "slider-group-rows"
+  }, /*#__PURE__*/React.createElement(Space.Compact, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: jumpXMinus
+  }, "-X"), /*#__PURE__*/React.createElement(Button, {
+    onClick: jumpXPlus
+  }, "+X"), /*#__PURE__*/React.createElement(Button, {
+    onClick: jumpYMinus
+  }, "-Y"), /*#__PURE__*/React.createElement(Button, {
+    onClick: jumpYPlus
+  }, "+Y"), /*#__PURE__*/React.createElement(Button, {
+    onClick: jumpZMinus
+  }, "-Z"), /*#__PURE__*/React.createElement(Button, {
+    onClick: jumpZPlus
+  }, "+Z")))));
+};