@aics/vole-app 3.3.1 → 3.4.1

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

@@ -1,295 +0,0 @@
-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); }
-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 { CaretRightOutlined, PauseOutlined } from "@ant-design/icons";
-import { Button, Tooltip } from "antd";
-import React, { useCallback, useEffect, useState } from "react";
-import { activeAxisMap } from "../../shared/types";
-import NumericInput from "../shared/NumericInput";
-import SmarterSlider from "../shared/SmarterSlider";
-import "./styles.css";
-var AXES = ["x", "y", "z"];
-/** A single slider row, with a slider, one or two spinbox inputs, and a max value */
-var SliderRow = function SliderRow(_ref) {
-  var label = _ref.label,
-    vals = _ref.vals,
-    _ref$valsReadout = _ref.valsReadout,
-    valsReadout = _ref$valsReadout === void 0 ? vals : _ref$valsReadout,
-    max = _ref.max,
-    onSlide = _ref.onSlide,
-    _ref$onChange = _ref.onChange,
-    _onChange = _ref$onChange === void 0 ? onSlide : _ref$onChange,
-    onStart = _ref.onStart,
-    onEnd = _ref.onEnd;
-  var isRange = vals.length > 1;
-  // If slider is a range, handles represent slice *edges*: the range around only the 1st slice is [0, 1]; the range
-  // around only the last is [max-1, max].
-  // If slider is not a range, just work with slices, but don't 0-index: 1st slice is 1, last is max
-  var min = isRange ? 0 : 1;
-  var wrappedOnSlide = isRange ? onSlide : function (values) {
-    return onSlide === null || onSlide === void 0 ? void 0 : onSlide([values[0] - 1]);
-  };
-  var wrappedOnChange = isRange ? _onChange : function (values) {
-    return _onChange === null || _onChange === void 0 ? void 0 : _onChange([values[0] - 1]);
-  };
-  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: isRange ? "" : "slider-single-handle",
-    connect: true,
-    range: {
-      min: min,
-      max: max
-    },
-    start: isRange ? vals : [vals[0] + 1],
-    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: wrappedOnSlide,
-    onChange: wrappedOnChange,
-    onStart: onStart,
-    onEnd: onEnd
-  })), max > min && /*#__PURE__*/React.createElement("span", {
-    className: "slider-values"
-  }, /*#__PURE__*/React.createElement(NumericInput, {
-    min: min,
-    max: max,
-    value: valsReadout[0] + (isRange ? 0 : 1),
-    onChange: function onChange(value) {
-      return _onChange === null || _onChange === void 0 ? void 0 : _onChange(isRange ? [value, vals[1]] : [value - 1]);
-    }
-  }), isRange && /*#__PURE__*/React.createElement(React.Fragment, null, " , ", /*#__PURE__*/React.createElement(NumericInput, {
-    min: min,
-    max: max,
-    value: valsReadout[1],
-    onChange: function onChange(value) {
-      return _onChange === null || _onChange === void 0 ? void 0 : _onChange([vals[0], value]);
-    }
-  })), " / ", max));
-};
-/** Wrapper around `SliderRow` that adds a play button and accounts for the case where not all of an axis is loaded */
-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 (_ref2) {
-    var _ref3 = _slicedToArray(_ref2, 1),
-      val = _ref3[0];
-    return onChange === null || onChange === void 0 ? void 0 : onChange(val);
-  }, [onChange]);
-  var wrappedSetValReadout = useCallback(function (_ref4) {
-    var _ref5 = _slicedToArray(_ref4, 1),
-      val = _ref5[0];
-    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(SliderRow, {
-    label: props.label,
-    vals: [props.val],
-    valsReadout: 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
-  })));
-};
-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(SliderRow, {
-      label: axis.toUpperCase(),
-      vals: [Math.round(region[0] * numSlices), Math.round(region[1] * numSlices)],
-      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("h4", {
-    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("h4", {
-    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("h4", {
-    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(SliderRow, {
-    label: "",
-    vals: [props.scene],
-    max: props.numScenes,
-    onChange: function onChange(_ref6) {
-      var _ref7 = _slicedToArray(_ref6, 1),
-        scene = _ref7[0];
-      props.changeViewerSetting("scene", scene);
-      props.changeViewerSetting("useExactScaleLevel", false);
-    }
-  })))));
-};
-export default AxisClipSliders;